flowbite-svelte 0.36.4 → 0.37.1

package/dist/ratings/Star.svelte.d.ts

@@ -19,6 +19,28 @@ declare const __propDef: {
 export type StarProps = typeof __propDef.props;
 export type StarEvents = typeof __propDef.events;
 export type StarSlots = typeof __propDef.slots;
+/**
+ * ## Features
+ * [Go to Rating](https://flowbite-svelte.com/docs/components/rating)
+ * ## Props
+ * @prop fillPercent: number = 100;
+ * @prop fillColor: string = '#F5CA14';
+ * @prop strokeColor: string = '#F5CA14';
+ * @prop size: number = 24;
+ * @prop ariaLabel: string = 'star';
+ * @prop id: string = generateId();
+ * ## Event
+ * - on:click
+ * ## Example
+ * ```
+ * <script>
+ *   import { Rating } from 'flowbite-svelte';
+ * </script>
+ *
+ * <Rating id="example-1" total={5} size={50} rating={1.4} />
+ * <Rating id="example-1b" total={5} size={50} rating={4.66} />
+ * ```
+ */
 export default class Star extends SvelteComponentTyped<StarProps, StarEvents, StarSlots> {
 }
 export {};

package/dist/ratings/Star.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Star.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/ratings/Star.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAiCD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,SAAS,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAC/C,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACjD,MAAM,MAAM,SAAS,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAE/C,MAAM,CAAC,OAAO,OAAO,IAAK,SAAQ,oBAAoB,CAAC,SAAS,EAAE,UAAU,EAAE,SAAS,CAAC;CACvF"}
+{"version":3,"file":"Star.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/ratings/Star.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAwCD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,SAAS,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAC/C,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACjD,MAAM,MAAM,SAAS,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAE/C;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,CAAC,OAAO,OAAO,IAAK,SAAQ,oBAAoB,CAAC,SAAS,EAAE,UAAU,EAAE,SAAS,CAAC;CACvF"}

package/dist/ratings/Thumbup.svelte

@@ -16,26 +16,48 @@ export let id = 'thumbup';
   stroke-width="1.5"
   stroke="currentColor"
   fill="none"
-  on:click
->
+  on:click>
   <defs>
     <linearGradient {id}>
       {#if fillPercent !== 100}
-        <stop offset="0%" stop-color="{fillColor}" />
-        <stop offset="{fillPercent}%" stop-color="{fillColor}" />
+        <stop offset="0%" stop-color={fillColor} />
+        <stop offset="{fillPercent}%" stop-color={fillColor} />
         <stop offset="{fillPercent}%" stop-color="transparent" />
         <stop offset="100%" stop-color="transparent" />
       {:else}
-        <stop offset="0%" stop-color="{fillColor}" />
-        <stop offset="100%" stop-color="{fillColor}" />
+        <stop offset="0%" stop-color={fillColor} />
+        <stop offset="100%" stop-color={fillColor} />
       {/if}
     </linearGradient>
   </defs>
   <path
     fill="url(#{id})"
-    stroke="{strokeColor}"
+    stroke={strokeColor}
     stroke-linecap="round"
     stroke-linejoin="round"
-    d="M6.633 10.5c.806 0 1.533-.446 2.031-1.08a9.041 9.041 0 012.861-2.4c.723-.384 1.35-.956 1.653-1.715a4.498 4.498 0 00.322-1.672V3a.75.75 0 01.75-.75A2.25 2.25 0 0116.5 4.5c0 1.152-.26 2.243-.723 3.218-.266.558.107 1.282.725 1.282h3.126c1.026 0 1.945.694 2.054 1.715.045.422.068.85.068 1.285a11.95 11.95 0 01-2.649 7.521c-.388.482-.987.729-1.605.729H13.48c-.483 0-.964-.078-1.423-.23l-3.114-1.04a4.501 4.501 0 00-1.423-.23H5.904M14.25 9h2.25M5.904 18.75c.083.205.173.405.27.602.197.4-.078.898-.523.898h-.908c-.889 0-1.713-.518-1.972-1.368a12 12 0 01-.521-3.507c0-1.553.295-3.036.831-4.398C3.387 10.203 4.167 9.75 5 9.75h1.053c.472 0 .745.556.5.96a8.958 8.958 0 00-1.302 4.665c0 1.194.232 2.333.654 3.375z"
-  />
+    d="M6.633 10.5c.806 0 1.533-.446 2.031-1.08a9.041 9.041 0 012.861-2.4c.723-.384 1.35-.956 1.653-1.715a4.498 4.498 0 00.322-1.672V3a.75.75 0 01.75-.75A2.25 2.25 0 0116.5 4.5c0 1.152-.26 2.243-.723 3.218-.266.558.107 1.282.725 1.282h3.126c1.026 0 1.945.694 2.054 1.715.045.422.068.85.068 1.285a11.95 11.95 0 01-2.649 7.521c-.388.482-.987.729-1.605.729H13.48c-.483 0-.964-.078-1.423-.23l-3.114-1.04a4.501 4.501 0 00-1.423-.23H5.904M14.25 9h2.25M5.904 18.75c.083.205.173.405.27.602.197.4-.078.898-.523.898h-.908c-.889 0-1.713-.518-1.972-1.368a12 12 0 01-.521-3.507c0-1.553.295-3.036.831-4.398C3.387 10.203 4.167 9.75 5 9.75h1.053c.472 0 .745.556.5.96a8.958 8.958 0 00-1.302 4.665c0 1.194.232 2.333.654 3.375z" />
 </svg>
+
+<!--
+  @component
+  ## Features
+  [Go to Rating](https://flowbite-svelte.com/docs/components/rating)
+  ## Props
+  @prop fillPercent: number = 100;
+  @prop fillColor: string = '#00b500';
+  @prop strokeColor: string = '#00b500';
+  @prop size: number = 24;
+  @prop ariaLabel: string = 'thumbup';
+  @prop id: string = 'thumbup';
+  ## Event
+  - on:click
+  ## Example
+  ```
+  <script>
+    import { Rating } from 'flowbite-svelte';
+  </script>
+
+  <Rating total={5} rating={4.7} id="example-5c" icon={Thumbup}/>
+  <Rating total={10} rating={8.2} id="example-5d" icon={Thumbup}/>
+  ```
+-->

package/dist/ratings/Thumbup.svelte.d.ts

@@ -19,6 +19,28 @@ declare const __propDef: {
 export type ThumbupProps = typeof __propDef.props;
 export type ThumbupEvents = typeof __propDef.events;
 export type ThumbupSlots = typeof __propDef.slots;
+/**
+ * ## Features
+ * [Go to Rating](https://flowbite-svelte.com/docs/components/rating)
+ * ## Props
+ * @prop fillPercent: number = 100;
+ * @prop fillColor: string = '#00b500';
+ * @prop strokeColor: string = '#00b500';
+ * @prop size: number = 24;
+ * @prop ariaLabel: string = 'thumbup';
+ * @prop id: string = 'thumbup';
+ * ## Event
+ * - on:click
+ * ## Example
+ * ```
+ * <script>
+ *   import { Rating } from 'flowbite-svelte';
+ * </script>
+ *
+ * <Rating total={5} rating={4.7} id="example-5c" icon={Thumbup}/>
+ * <Rating total={10} rating={8.2} id="example-5d" icon={Thumbup}/>
+ * ```
+ */
 export default class Thumbup extends SvelteComponentTyped<ThumbupProps, ThumbupEvents, ThumbupSlots> {
 }
 export {};

package/dist/ratings/Thumbup.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Thumbup.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/ratings/Thumbup.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA6BD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAClD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACpD,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAElD,MAAM,CAAC,OAAO,OAAO,OAAQ,SAAQ,oBAAoB,CAAC,YAAY,EAAE,aAAa,EAAE,YAAY,CAAC;CACnG"}
+{"version":3,"file":"Thumbup.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/ratings/Thumbup.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA+BD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAClD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACpD,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAElD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,CAAC,OAAO,OAAO,OAAQ,SAAQ,oBAAoB,CAAC,YAAY,EAAE,aAAa,EAAE,YAAY,CAAC;CACnG"}

package/dist/sidebars/Sidebar.svelte

@@ -3,5 +3,72 @@ export let asideClass = 'w-64';
 </script>
 
 <aside {...$$restProps} class={classNames(asideClass, $$props.class)} aria-label="Sidebar">
-	<slot />
+  <slot />
 </aside>
+
+<!--
+  @component
+  ## Features
+  [Go to Sidebar](https://flowbite-svelte.com/docs/components/sidebar)
+  ## Props
+  @prop asideClass: string = 'w-64';
+  ## Example
+  ```
+  <script>
+    import { page } from '$app/stores';
+    import { Sidebar, SidebarGroup, SidebarItem, SidebarWrapper } from 'flowbite-svelte';
+    let spanClass = 'flex-1 ml-3 whitespace-nowrap';
+    $: activeUrl = $page.url.pathname
+  </script>
+
+  <Sidebar>
+    <SidebarWrapper>
+      <SidebarGroup>
+        <SidebarItem label="Dashboard">
+        <svelte:fragment slot="icon">
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M10.5 6a7.5 7.5 0 107.5 7.5h-7.5V6z" /><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 10.5H21A7.5 7.5 0 0013.5 3v7.5z" /></svg>
+          </svelte:fragment>
+        </SidebarItem>
+        <SidebarItem label="Kanban" {spanClass}>
+          <svelte:fragment slot="icon">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6zM3.75 15.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 18v-2.25zM13.5 6a2.25 2.25 0 012.25-2.25H18A2.25 2.25 0 0120.25 6v2.25A2.25 2.25 0 0118 10.5h-2.25a2.25 2.25 0 01-2.25-2.25V6zM13.5 15.75a2.25 2.25 0 012.25-2.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-2.25A2.25 2.25 0 0113.5 18v-2.25z" /></svg>
+          </svelte:fragment>
+          <svelte:fragment slot="subtext">
+            <span
+              class="inline-flex justify-center items-center px-2 ml-3 text-sm font-medium text-gray-800 bg-gray-200 rounded-full dark:bg-gray-700 dark:text-gray-300"
+              >Pro</span
+            >
+          </svelte:fragment>
+        </SidebarItem>
+        <SidebarItem label="Inbox" {spanClass}>
+        <svelte:fragment slot="icon">
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M9 3.75H6.912a2.25 2.25 0 00-2.15 1.588L2.35 13.177a2.25 2.25 0 00-.1.661V18a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18v-4.162c0-.224-.034-.447-.1-.661L19.24 5.338a2.25 2.25 0 00-2.15-1.588H15M2.25 13.5h3.86a2.25 2.25 0 012.012 1.244l.256.512a2.25 2.25 0 002.013 1.244h3.218a2.25 2.25 0 002.013-1.244l.256-.512a2.25 2.25 0 012.013-1.244h3.859M12 3v8.25m0 0l-3-3m3 3l3-3" /></svg>
+          </svelte:fragment>
+          <svelte:fragment slot="subtext">
+            <span
+              class="inline-flex justify-center items-center p-3 ml-3 w-3 h-3 text-sm font-medium text-blue-600 bg-blue-200 rounded-full dark:bg-blue-900 dark:text-blue-200"
+              >3</span
+            >
+          </svelte:fragment>
+        </SidebarItem>
+        <SidebarItem label="Sidebar" href='/docs/components/sidebar' active={activeUrl === '/docs/components/sidebar'}>
+          <svelte:fragment slot="icon">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" /></svg>
+          </svelte:fragment>
+        </SidebarItem>
+        <SidebarItem label="Sign In">
+          <svelte:fragment slot="icon">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15M12 9l-3 3m0 0l3 3m-3-3h12.75" /></svg>
+          </svelte:fragment>
+        </SidebarItem>
+        <SidebarItem label="Sign Up">
+          <svelte:fragment slot="icon">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12a7.5 7.5 0 0015 0m-15 0a7.5 7.5 0 1115 0m-15 0H3m16.5 0H21m-1.5 0H12m-8.457 3.077l1.41-.513m14.095-5.13l1.41-.513M5.106 17.785l1.15-.964m11.49-9.642l1.149-.964M7.501 19.795l.75-1.3m7.5-12.99l.75-1.3m-6.063 16.658l.26-1.477m2.605-14.772l.26-1.477m0 17.726l-.26-1.477M10.698 4.614l-.26-1.477M16.5 19.794l-.75-1.299M7.5 4.205L12 12m6.894 5.785l-1.149-.964M6.256 7.178l-1.15-.964m15.352 8.864l-1.41-.513M4.954 9.435l-1.41-.514M12.002 12l-3.75 6.495" /></svg>
+          </svelte:fragment>
+        </SidebarItem>
+      </SidebarGroup>
+    </SidebarWrapper>
+  </Sidebar>
+  ```
+  
+-->

package/dist/sidebars/Sidebar.svelte.d.ts

@@ -14,6 +14,70 @@ declare const __propDef: {
 export type SidebarProps = typeof __propDef.props;
 export type SidebarEvents = typeof __propDef.events;
 export type SidebarSlots = typeof __propDef.slots;
+/**
+ * ## Features
+ * [Go to Sidebar](https://flowbite-svelte.com/docs/components/sidebar)
+ * ## Props
+ * @prop asideClass: string = 'w-64';
+ * ## Example
+ * ```
+ * <script>
+ *   import { page } from '$app/stores';
+ *   import { Sidebar, SidebarGroup, SidebarItem, SidebarWrapper } from 'flowbite-svelte';
+ *   let spanClass = 'flex-1 ml-3 whitespace-nowrap';
+ *   $: activeUrl = $page.url.pathname
+ * </script>
+ *
+ * <Sidebar>
+ *   <SidebarWrapper>
+ *     <SidebarGroup>
+ *       <SidebarItem label="Dashboard">
+ *       <svelte:fragment slot="icon">
+ *         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M10.5 6a7.5 7.5 0 107.5 7.5h-7.5V6z" /><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 10.5H21A7.5 7.5 0 0013.5 3v7.5z" /></svg>
+ *         </svelte:fragment>
+ *       </SidebarItem>
+ *       <SidebarItem label="Kanban" {spanClass}>
+ *         <svelte:fragment slot="icon">
+ *           <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6zM3.75 15.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 18v-2.25zM13.5 6a2.25 2.25 0 012.25-2.25H18A2.25 2.25 0 0120.25 6v2.25A2.25 2.25 0 0118 10.5h-2.25a2.25 2.25 0 01-2.25-2.25V6zM13.5 15.75a2.25 2.25 0 012.25-2.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-2.25A2.25 2.25 0 0113.5 18v-2.25z" /></svg>
+ *         </svelte:fragment>
+ *         <svelte:fragment slot="subtext">
+ *           <span
+ *             class="inline-flex justify-center items-center px-2 ml-3 text-sm font-medium text-gray-800 bg-gray-200 rounded-full dark:bg-gray-700 dark:text-gray-300"
+ *             >Pro</span
+ *           >
+ *         </svelte:fragment>
+ *       </SidebarItem>
+ *       <SidebarItem label="Inbox" {spanClass}>
+ *       <svelte:fragment slot="icon">
+ *         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M9 3.75H6.912a2.25 2.25 0 00-2.15 1.588L2.35 13.177a2.25 2.25 0 00-.1.661V18a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18v-4.162c0-.224-.034-.447-.1-.661L19.24 5.338a2.25 2.25 0 00-2.15-1.588H15M2.25 13.5h3.86a2.25 2.25 0 012.012 1.244l.256.512a2.25 2.25 0 002.013 1.244h3.218a2.25 2.25 0 002.013-1.244l.256-.512a2.25 2.25 0 012.013-1.244h3.859M12 3v8.25m0 0l-3-3m3 3l3-3" /></svg>
+ *         </svelte:fragment>
+ *         <svelte:fragment slot="subtext">
+ *           <span
+ *             class="inline-flex justify-center items-center p-3 ml-3 w-3 h-3 text-sm font-medium text-blue-600 bg-blue-200 rounded-full dark:bg-blue-900 dark:text-blue-200"
+ *             >3</span
+ *           >
+ *         </svelte:fragment>
+ *       </SidebarItem>
+ *       <SidebarItem label="Sidebar" href='/docs/components/sidebar' active={activeUrl === '/docs/components/sidebar'}>
+ *         <svelte:fragment slot="icon">
+ *           <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" /></svg>
+ *         </svelte:fragment>
+ *       </SidebarItem>
+ *       <SidebarItem label="Sign In">
+ *         <svelte:fragment slot="icon">
+ *           <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15M12 9l-3 3m0 0l3 3m-3-3h12.75" /></svg>
+ *         </svelte:fragment>
+ *       </SidebarItem>
+ *       <SidebarItem label="Sign Up">
+ *         <svelte:fragment slot="icon">
+ *           <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12a7.5 7.5 0 0015 0m-15 0a7.5 7.5 0 1115 0m-15 0H3m16.5 0H21m-1.5 0H12m-8.457 3.077l1.41-.513m14.095-5.13l1.41-.513M5.106 17.785l1.15-.964m11.49-9.642l1.149-.964M7.501 19.795l.75-1.3m7.5-12.99l.75-1.3m-6.063 16.658l.26-1.477m2.605-14.772l.26-1.477m0 17.726l-.26-1.477M10.698 4.614l-.26-1.477M16.5 19.794l-.75-1.299M7.5 4.205L12 12m6.894 5.785l-1.149-.964M6.256 7.178l-1.15-.964m15.352 8.864l-1.41-.513M4.954 9.435l-1.41-.514M12.002 12l-3.75 6.495" /></svg>
+ *         </svelte:fragment>
+ *       </SidebarItem>
+ *     </SidebarGroup>
+ *   </SidebarWrapper>
+ * </Sidebar>
+ * ```
+ */
 export default class Sidebar extends SvelteComponentTyped<SidebarProps, SidebarEvents, SidebarSlots> {
 }
 export {};

package/dist/sidebars/Sidebar.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Sidebar.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/sidebars/Sidebar.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAcD,QAAA,MAAM,SAAS;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAClD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACpD,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAElD,MAAM,CAAC,OAAO,OAAO,OAAQ,SAAQ,oBAAoB,CAAC,YAAY,EAAE,aAAa,EAAE,YAAY,CAAC;CACnG"}
+{"version":3,"file":"Sidebar.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/sidebars/Sidebar.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAgBD,QAAA,MAAM,SAAS;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAClD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACpD,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAElD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+DG;AACH,MAAM,CAAC,OAAO,OAAO,OAAQ,SAAQ,oBAAoB,CAAC,YAAY,EAAE,aAAa,EAAE,YAAY,CAAC;CACnG"}

package/dist/sidebars/SidebarBrand.svelte

@@ -6,6 +6,31 @@ export let spanClass = 'self-center text-xl font-semibold whitespace-nowrap dark
 </script>
 
 <a {...$$restProps} href={site.href} class={classNames(aClass, $$props.class)}>
-	<img src={site.img} class={imgClass} alt={site.name} />
-	<span class={spanClass}>{site.name}</span>
+  <img src={site.img} class={imgClass} alt={site.name} />
+  <span class={spanClass}>{site.name}</span>
 </a>
+
+<!--
+  @component
+  ## Features
+  [Go to Sidebar](https://flowbite-svelte.com/docs/components/sidebar)
+  ## Props
+  @prop site: SiteType;
+  @prop aClass: string = 'flex items-center pl-2.5 mb-5';
+  @prop imgClass: string = 'h-6 mr-3 sm:h-7';
+  @prop spanClass: string = 'self-center text-xl font-semibold whitespace-nowrap dark:text-white';
+  ## Example
+  ```
+  <script>
+    import { SidebarBrand } from 'flowbite-svelte'
+
+    let site = {
+      name: 'Flowbite-Svelte',
+      href: '/',
+      img: '/images/flowbite-svelte-icon-logo.svg'
+    };
+  </script>
+  <SidebarBrand {site} />
+  ```
+  
+-->

package/dist/sidebars/SidebarBrand.svelte.d.ts

@@ -16,6 +16,28 @@ declare const __propDef: {
 export type SidebarBrandProps = typeof __propDef.props;
 export type SidebarBrandEvents = typeof __propDef.events;
 export type SidebarBrandSlots = typeof __propDef.slots;
+/**
+ * ## Features
+ * [Go to Sidebar](https://flowbite-svelte.com/docs/components/sidebar)
+ * ## Props
+ * @prop site: SiteType;
+ * @prop aClass: string = 'flex items-center pl-2.5 mb-5';
+ * @prop imgClass: string = 'h-6 mr-3 sm:h-7';
+ * @prop spanClass: string = 'self-center text-xl font-semibold whitespace-nowrap dark:text-white';
+ * ## Example
+ * ```
+ * <script>
+ *   import { SidebarBrand } from 'flowbite-svelte'
+ *
+ *   let site = {
+ *     name: 'Flowbite-Svelte',
+ *     href: '/',
+ *     img: '/images/flowbite-svelte-icon-logo.svg'
+ *   };
+ * </script>
+ * <SidebarBrand {site} />
+ * ```
+ */
 export default class SidebarBrand extends SvelteComponentTyped<SidebarBrandProps, SidebarBrandEvents, SidebarBrandSlots> {
 }
 export {};

package/dist/sidebars/SidebarBrand.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SidebarBrand.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/sidebars/SidebarBrand.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAED,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAoBzC,QAAA,MAAM,SAAS;;;cADqF,QAAQ;;;;;;;;;CAC9B,CAAC;AAC/E,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACvD,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACzD,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEvD,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,oBAAoB,CAAC,iBAAiB,EAAE,kBAAkB,EAAE,iBAAiB,CAAC;CACvH"}
+{"version":3,"file":"SidebarBrand.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/sidebars/SidebarBrand.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAED,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAqBzC,QAAA,MAAM,SAAS;;;cADqF,QAAQ;;;;;;;;;CAC9B,CAAC;AAC/E,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACvD,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACzD,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEvD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,oBAAoB,CAAC,iBAAiB,EAAE,kBAAkB,EAAE,iBAAiB,CAAC;CACvH"}

package/dist/sidebars/SidebarCta.svelte

@@ -5,17 +5,50 @@ export let spanClass = 'bg-orange-100 text-orange-800 text-sm font-semibold mr-2
 export let label = '';
 </script>
 
-<div
-	{...$$restProps}
-	id="dropdown-cta"
-	class={classNames(divWrapperClass, $$props.class)}
-	role="alert"
->
-	<div class={divClass}>
-		<span class={spanClass}>{label}</span>
-		{#if $$slots.icon}
-			<slot name="icon" />
-		{/if}
-	</div>
-	<slot />
+<div {...$$restProps} id="dropdown-cta" class={classNames(divWrapperClass, $$props.class)} role="alert">
+  <div class={divClass}>
+    <span class={spanClass}>{label}</span>
+    {#if $$slots.icon}
+      <slot name="icon" />
+    {/if}
+  </div>
+  <slot />
 </div>
+
+<!--
+  @component
+  ## Features
+  [Go to Sidebar](https://flowbite-svelte.com/docs/components/sidebar)
+  ## Props
+
+  ## Example
+  ```
+  <script>
+    import { SidebarCta } from 'flowbite-svelte';
+  </script>
+
+  <SidebarCta label="Beta">
+    <svelte:fragment slot="icon">
+      <button
+        type="button"
+        class="ml-auto -mx-1.5 -my-1.5 bg-blue-50 text-blue-900 rounded-lg focus:ring-2 focus:ring-blue-400 p-1 hover:bg-blue-200 inline-flex h-6 w-6 dark:bg-blue-900 dark:text-blue-400 dark:hover:bg-blue-800"
+        data-collapse-toggle="dropdown-cta"
+        aria-label="Close"
+      >
+        <span class="sr-only">Close</span>
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /></svg>
+      </button>
+    </svelte:fragment>
+    <p class="mb-3 text-sm text-blue-900 dark:text-blue-400">
+      Preview the new Flowbite dashboard navigation! You can turn the new navigation off for a
+      limited time in your profile.
+    </p>
+    <a
+      class="text-sm text-blue-900 underline hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300"
+      href="/">Turn new navigation off</a
+    >
+  </SidebarCta>
+
+  ```
+  
+-->

package/dist/sidebars/SidebarCta.svelte.d.ts

@@ -18,6 +18,41 @@ declare const __propDef: {
 export type SidebarCtaProps = typeof __propDef.props;
 export type SidebarCtaEvents = typeof __propDef.events;
 export type SidebarCtaSlots = typeof __propDef.slots;
+/**
+ * ## Features
+ * [Go to Sidebar](https://flowbite-svelte.com/docs/components/sidebar)
+ * ## Props
+ *
+ * ## Example
+ * ```
+ * <script>
+ *   import { SidebarCta } from 'flowbite-svelte';
+ * </script>
+ *
+ * <SidebarCta label="Beta">
+ *   <svelte:fragment slot="icon">
+ *     <button
+ *       type="button"
+ *       class="ml-auto -mx-1.5 -my-1.5 bg-blue-50 text-blue-900 rounded-lg focus:ring-2 focus:ring-blue-400 p-1 hover:bg-blue-200 inline-flex h-6 w-6 dark:bg-blue-900 dark:text-blue-400 dark:hover:bg-blue-800"
+ *       data-collapse-toggle="dropdown-cta"
+ *       aria-label="Close"
+ *     >
+ *       <span class="sr-only">Close</span>
+ *       <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /></svg>
+ *     </button>
+ *   </svelte:fragment>
+ *   <p class="mb-3 text-sm text-blue-900 dark:text-blue-400">
+ *     Preview the new Flowbite dashboard navigation! You can turn the new navigation off for a
+ *     limited time in your profile.
+ *   </p>
+ *   <a
+ *     class="text-sm text-blue-900 underline hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300"
+ *     href="/">Turn new navigation off</a
+ *   >
+ * </SidebarCta>
+ *
+ * ```
+ */
 export default class SidebarCta extends SvelteComponentTyped<SidebarCtaProps, SidebarCtaEvents, SidebarCtaSlots> {
 }
 export {};

package/dist/sidebars/SidebarCta.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SidebarCta.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/sidebars/SidebarCta.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAyBD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACrD,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACvD,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAErD,MAAM,CAAC,OAAO,OAAO,UAAW,SAAQ,oBAAoB,CAAC,eAAe,EAAE,gBAAgB,EAAE,eAAe,CAAC;CAC/G"}
+{"version":3,"file":"SidebarCta.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/sidebars/SidebarCta.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA2BD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACrD,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACvD,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAErD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,MAAM,CAAC,OAAO,OAAO,UAAW,SAAQ,oBAAoB,CAAC,eAAe,EAAE,gBAAgB,EAAE,eAAe,CAAC;CAC/G"}

package/dist/sidebars/SidebarDropdownItem.svelte

@@ -21,3 +21,55 @@ export let active = false;
     on:mouseover
     class={classNames(active ? activeClass : aClass, $$props.class)}>{label}</a>
 </li>
+
+<!--
+  @component
+  ## Features
+  [Go to Sidebar](https://flowbite-svelte.com/docs/components/sidebar)
+  ## Props
+  @prop aClass: string = 'flex items-center p-2 pl-11 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700';
+  @prop href: string = '';
+  @prop label: string = '';
+  @prop activeClass: string = 'flex items-center p-2 pl-11 text-base font-normal text-gray-900 bg-gray-200 dark:bg-gray-700 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700';
+  @prop active: boolean = false;
+  ## Event
+  - on:blur
+  - on:click
+  - on:focus
+  - on:keydown
+  - on:keypress
+  - on:keyup
+  - on:mouseenter
+  - on:mouseleave
+  - on:mouseover
+  ## Example
+  ```
+  <script>
+    import { page } from '$app/stores';
+    import { Sidebar, SidebarGroup, SidebarItem, SidebarWrapper, SidebarDropdownWrapper, SidebarDropdownItem } from 'flowbite-svelte';
+    let spanClass = 'flex-1 ml-3 whitespace-nowrap';
+    $: activeUrl = $page.url.pathname
+    $: containPath = ()=>{
+      // add your logic here
+      true
+    }
+  </script>
+  
+  <Sidebar>
+    <SidebarWrapper>
+      <SidebarGroup>
+        <SidebarItem label="Dashboard" active={activeUrl === '/dashboard'} />
+        <SidebarDropdownWrapper label="E-commerce" isOpen={containPath}>
+          <SidebarDropdownItem label="Products" href='/components/products' active={activeUrl === '/components/products'} />
+          <SidebarDropdownItem label="Sidebar" href='/docs/components/sidebar' active={activeUrl === '/docs/components/sidebar'}/>
+        </SidebarDropdownWrapper>
+        <SidebarDropdownWrapper label="Items">
+          <SidebarDropdownItem label="Item 1" href='/components/item1' active={activeUrl === '/components/item'} />
+          <SidebarDropdownItem label="Item 2" href='/components/item2' active={activeUrl === '/components/billing'} />
+        </SidebarDropdownWrapper>
+      </SidebarGroup>
+    </SidebarWrapper>
+  </Sidebar>
+  ```
+  
+-->

package/dist/sidebars/SidebarDropdownItem.svelte.d.ts

@@ -26,6 +26,55 @@ declare const __propDef: {
 export type SidebarDropdownItemProps = typeof __propDef.props;
 export type SidebarDropdownItemEvents = typeof __propDef.events;
 export type SidebarDropdownItemSlots = typeof __propDef.slots;
+/**
+ * ## Features
+ * [Go to Sidebar](https://flowbite-svelte.com/docs/components/sidebar)
+ * ## Props
+ * @prop aClass: string = 'flex items-center p-2 pl-11 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700';
+ * @prop href: string = '';
+ * @prop label: string = '';
+ * @prop activeClass: string = 'flex items-center p-2 pl-11 text-base font-normal text-gray-900 bg-gray-200 dark:bg-gray-700 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700';
+ * @prop active: boolean = false;
+ * ## Event
+ * - on:blur
+ * - on:click
+ * - on:focus
+ * - on:keydown
+ * - on:keypress
+ * - on:keyup
+ * - on:mouseenter
+ * - on:mouseleave
+ * - on:mouseover
+ * ## Example
+ * ```
+ * <script>
+ *   import { page } from '$app/stores';
+ *   import { Sidebar, SidebarGroup, SidebarItem, SidebarWrapper, SidebarDropdownWrapper, SidebarDropdownItem } from 'flowbite-svelte';
+ *   let spanClass = 'flex-1 ml-3 whitespace-nowrap';
+ *   $: activeUrl = $page.url.pathname
+ *   $: containPath = ()=>{
+ *     // add your logic here
+ *     true
+ *   }
+ * </script>
+ *
+ * <Sidebar>
+ *   <SidebarWrapper>
+ *     <SidebarGroup>
+ *       <SidebarItem label="Dashboard" active={activeUrl === '/dashboard'} />
+ *       <SidebarDropdownWrapper label="E-commerce" isOpen={containPath}>
+ *         <SidebarDropdownItem label="Products" href='/components/products' active={activeUrl === '/components/products'} />
+ *         <SidebarDropdownItem label="Sidebar" href='/docs/components/sidebar' active={activeUrl === '/docs/components/sidebar'}/>
+ *       </SidebarDropdownWrapper>
+ *       <SidebarDropdownWrapper label="Items">
+ *         <SidebarDropdownItem label="Item 1" href='/components/item1' active={activeUrl === '/components/item'} />
+ *         <SidebarDropdownItem label="Item 2" href='/components/item2' active={activeUrl === '/components/billing'} />
+ *       </SidebarDropdownWrapper>
+ *     </SidebarGroup>
+ *   </SidebarWrapper>
+ * </Sidebar>
+ * ```
+ */
 export default class SidebarDropdownItem extends SvelteComponentTyped<SidebarDropdownItemProps, SidebarDropdownItemEvents, SidebarDropdownItemSlots> {
 }
 export {};

package/dist/sidebars/SidebarDropdownItem.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SidebarDropdownItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/sidebars/SidebarDropdownItem.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAqBD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,wBAAwB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAC9D,MAAM,MAAM,yBAAyB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAChE,MAAM,MAAM,wBAAwB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAE9D,MAAM,CAAC,OAAO,OAAO,mBAAoB,SAAQ,oBAAoB,CAAC,wBAAwB,EAAE,yBAAyB,EAAE,wBAAwB,CAAC;CACnJ"}
+{"version":3,"file":"SidebarDropdownItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/sidebars/SidebarDropdownItem.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAuBD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,wBAAwB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAC9D,MAAM,MAAM,yBAAyB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAChE,MAAM,MAAM,wBAAwB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAE9D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgDG;AACH,MAAM,CAAC,OAAO,OAAO,mBAAoB,SAAQ,oBAAoB,CAAC,wBAAwB,EAAE,yBAAyB,EAAE,wBAAwB,CAAC;CACnJ"}

package/dist/sidebars/SidebarDropdownWrapper.svelte

@@ -55,3 +55,46 @@ const handleDropdown = () => {
     </ul>
   {/if}
 </li>
+
+<!--
+  @component
+  ## Features
+  [Go to Sidebar](https://flowbite-svelte.com/docs/components/sidebar)
+  ## Props
+  @prop btnClass: string = 'flex items-center p-2 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700';
+  @prop label: string = '';
+  @prop spanClass: string = 'flex-1 ml-3 text-left whitespace-nowrap';
+  @prop ulClass: string = 'py-2 space-y-2';
+  @prop transitionType: TransitionTypes = 'slide';
+  @prop transitionParams: TransitionParamTypes = {};
+  ## Example
+  ```
+  <script>
+    import { page } from '$app/stores';
+    import { Sidebar, SidebarGroup, SidebarItem, SidebarWrapper, SidebarDropdownWrapper, SidebarDropdownItem } from 'flowbite-svelte';
+    let spanClass = 'flex-1 ml-3 whitespace-nowrap';
+    $: activeUrl = $page.url.pathname
+    $: containPath = ()=>{
+      // add your logic here
+      true
+    }
+  </script>
+
+  <Sidebar>
+    <SidebarWrapper>
+      <SidebarGroup>
+        <SidebarItem label="Dashboard" active={activeUrl === '/dashboard'} />
+        <SidebarDropdownWrapper label="E-commerce" isOpen={containPath}>
+          <SidebarDropdownItem label="Products" href='/components/products' active={activeUrl === '/components/products'} />
+          <SidebarDropdownItem label="Sidebar" href='/docs/components/sidebar' active={activeUrl === '/docs/components/sidebar'}/>
+        </SidebarDropdownWrapper>
+        <SidebarDropdownWrapper label="Items">
+          <SidebarDropdownItem label="Item 1" href='/components/item1' active={activeUrl === '/components/item'} />
+          <SidebarDropdownItem label="Item 2" href='/components/item2' active={activeUrl === '/components/billing'} />
+        </SidebarDropdownWrapper>
+      </SidebarGroup>
+    </SidebarWrapper>
+  </Sidebar>
+  ```
+  
+-->