Pass list props as arrays instead of comma-separated strings (#2726)

docs/pages/ui/components/breadcrumb.mdx

@@ -16,7 +16,7 @@ Use the `breadcrumb` class to add a breadcrumb to your interface design for bett
 Look at the example below to see how breadcrumbs work in practice.
 
 <Example centered>
-<Breadcrumb pages="Home,Library,Data" />
+<Breadcrumb pages={['Home', 'Library', 'Data']} />
 </Example>
 
 ## Different separators
@@ -26,7 +26,7 @@ You can use different breadcrumb styles to match your website or app design. Cho
 This example shows how to use different breadcrumb styles.
 
 <Example vertical separated centered>
-<Breadcrumb pages="Home,Library,Data" separator="dots" /> <Breadcrumb pages="Home,Library,Data" separator="arrows" /> <Breadcrumb pages="Home,Library,Data" separator="bullets" />
+<Breadcrumb pages={['Home', 'Library', 'Data']} separator="dots" /> <Breadcrumb pages={['Home', 'Library', 'Data']} separator="arrows" /> <Breadcrumb pages={['Home', 'Library', 'Data']} separator="bullets" />
 </Example>
 
 ## With icon
@@ -34,7 +34,7 @@ This example shows how to use different breadcrumb styles.
 You can use icons in breadcrumbs to make them more visually appealing. The example below demonstrates how to use icons in breadcrumbs.
 
 <Example vertical separated>
-<Breadcrumb pages="Home,Library,Data" home-icon />
+<Breadcrumb pages={['Home', 'Library', 'Data']} home-icon />
 </Example>
 
 ## Muted breadcrumbs
@@ -42,7 +42,7 @@ You can use icons in breadcrumbs to make them more visually appealing. The examp
 You can use the `breadcrumb-muted` class to create a muted breadcrumb style. This style is perfect for breadcrumbs that are not the main focus of your website or app.
 
 <Example>
-<Breadcrumb pages="Home,Library,Data" class="breadcrumb-muted" />
+<Breadcrumb pages={['Home', 'Library', 'Data']} class="breadcrumb-muted" />
 </Example>
 
 ## Breadcrumb in headers
@@ -50,5 +50,5 @@ You can use the `breadcrumb-muted` class to create a muted breadcrumb style. Thi
 You can use breadcrumbs in headers to show the current page location and provide a better navigation experience. The example below demonstrates how to use breadcrumbs in headers.
 
 <Example centered vertical>
-<div class="page-header"> <div class="row align-items-center mw-100"> <div class="col"> <Breadcrumb pages="Home,Library,Articles" /> <h2 class="page-title"> <span class="text-truncate">How to Build a Modern Dashboard with Tabler</span> </h2> </div> <div class="col-auto"> <div class="btn-list"> <a href="#" class="btn d-none d-md-inline-flex"> <Icon name="edit" /> Edit </a> <a href="#" class="btn btn-primary">Publish</a> </div> </div> </div> </div>
+<div class="page-header"> <div class="row align-items-center mw-100"> <div class="col"> <Breadcrumb pages={['Home', 'Library', 'Articles']} /> <h2 class="page-title"> <span class="text-truncate">How to Build a Modern Dashboard with Tabler</span> </h2> </div> <div class="col-auto"> <div class="btn-list"> <a href="#" class="btn d-none d-md-inline-flex"> <Icon name="edit" /> Edit </a> <a href="#" class="btn btn-primary">Publish</a> </div> </div> </div> </div>
 </Example>

docs/pages/ui/components/progress-step.mdx

@@ -41,7 +41,7 @@ Use color classes to mark completed steps. Set `aria-current="step"` on the curr
 Use hidden labels so assistive technologies can announce meaningful step names.
 
 <Example>
-<ProgressSteps labels="Account,Profile,Billing,Review" active={3} ariaLabel="Checkout progress" />
+<ProgressSteps labels={['Account', 'Profile', 'Billing', 'Review']} active={3} ariaLabel="Checkout progress" />
 </Example>
 
 ### Color state