flowbite-svelte 0.37.5 → 0.38.2

package/dist/megamenu/MegaMenu.svelte

@@ -1,12 +1,12 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 import Popper from '../utils/Popper.svelte';
 export let items = [];
 export let full = false;
 export let open = false;
 let wrapperClass;
-$: wrapperClass = classNames(full && 'border-y w-full', $$props.class);
+$: wrapperClass = twMerge(full && 'border-y w-full', $$props.class);
 let ulClass;
-$: ulClass = classNames('grid grid-flow-row gap-y-4 md:gap-x-0 auto-col-max auto-row-max', full && $$slots.extra ? 'grid-cols-2' : 'grid-cols-2 md:grid-cols-3', 'text-sm font-medium', full && $$slots.extra && 'md:w-2/3');
+$: ulClass = twMerge('grid grid-flow-row gap-y-4 md:gap-x-0 auto-col-max auto-row-max', full && $$slots.extra ? 'grid-cols-2' : 'grid-cols-2 md:grid-cols-3', 'text-sm font-medium', full && $$slots.extra && 'md:w-2/3', $$props.classUl);
 </script>
 
 <Popper

package/dist/megamenu/MegaMenu.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MegaMenu.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/megamenu/MegaMenu.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAED,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AA+CzC,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACnD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACrD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEnD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AACH,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,oBAAoB,CAAC,aAAa,EAAE,cAAc,EAAE,aAAa,CAAC;CACvG"}
+{"version":3,"file":"MegaMenu.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/megamenu/MegaMenu.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAED,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAgDzC,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACnD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACrD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEnD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AACH,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,oBAAoB,CAAC,aAAa,EAAE,cAAc,EAAE,aAAa,CAAC;CACvG"}

package/dist/modals/Modal.svelte

@@ -1,4 +1,4 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 import Frame from '../utils/Frame.svelte';
 import { createEventDispatcher } from 'svelte';
 import CloseButton from '../utils/CloseButton.svelte';
@@ -9,7 +9,7 @@ export let size = 'md';
 export let placement = 'center';
 export let autoclose = false;
 export let permanent = false;
-export let backdropClasses = 'bg-gray-900 bg-opacity-50 dark:bg-opacity-80';
+export let backdropClass = 'bg-gray-900 bg-opacity-50 dark:bg-opacity-80';
 export let defaultClass = 'relative flex flex-col mx-auto';
 export let outsideclose = false;
 const dispatch = createEventDispatcher();
@@ -73,11 +73,12 @@ const hide = (e) => {
     open = false;
 };
 let frameClass;
-$: frameClass = classNames(defaultClass, 'w-full', $$props.class);
+$: frameClass = twMerge(defaultClass, 'w-full', $$props.class);
 const isScrollable = (e) => [
     e.scrollWidth > e.clientWidth && ['scroll', 'auto'].indexOf(getComputedStyle(e).overflowX) >= 0,
     e.scrollHeight > e.clientHeight && ['scroll', 'auto'].indexOf(getComputedStyle(e).overflowY) >= 0
 ];
+let backdropCls = twMerge(backdropClass, $$props.classBackdrop);
 function handleKeys(e) {
     if (e.key === 'Escape' && !permanent)
         return hide(e);
@@ -86,7 +87,7 @@ function handleKeys(e) {
 
 {#if open}
   <!-- backdrop -->
-  <div class={classNames('fixed inset-0 z-40', backdropClasses)} />
+  <div class={twMerge('fixed inset-0 z-40', backdropCls)} />
   <!-- dialog -->
   <div
     on:keydown={handleKeys}
@@ -94,7 +95,7 @@ function handleKeys(e) {
     use:prepareFocus
     use:focusTrap
     on:click={onAutoClose}
-    class={classNames(
+    class={twMerge(
       'fixed top-0 left-0 right-0 h-modal md:inset-0 md:h-full z-50 w-full p-4 flex',
       ...getPlacementClasses()
     )}
@@ -162,7 +163,7 @@ function handleKeys(e) {
   @prop placement: ModalPlacementType = 'center';
   @prop autoclose: boolean = false;
   @prop permanent: boolean = false;
-  @prop backdropClasses: string = 'bg-gray-900 bg-opacity-50 dark:bg-opacity-80';
+  @prop backdropClass: string = 'bg-gray-900 bg-opacity-50 dark:bg-opacity-80';
   @prop defaultClass: string = 'relative flex flex-col mx-auto';
   @prop outsideclose: boolean = false; 
   ## Example

package/dist/modals/Modal.svelte.d.ts

@@ -248,7 +248,7 @@ declare const __propDef: {
         placement?: "top-left" | "top-center" | "top-right" | "center-left" | "center" | "center-right" | "bottom-left" | "bottom-center" | "bottom-right" | undefined;
         autoclose?: boolean | undefined;
         permanent?: boolean | undefined;
-        backdropClasses?: string | undefined;
+        backdropClass?: string | undefined;
         defaultClass?: string | undefined;
         outsideclose?: boolean | undefined;
     };
@@ -286,7 +286,7 @@ export type ModalSlots = typeof __propDef.slots;
  * @prop placement: ModalPlacementType = 'center';
  * @prop autoclose: boolean = false;
  * @prop permanent: boolean = false;
- * @prop backdropClasses: string = 'bg-gray-900 bg-opacity-50 dark:bg-opacity-80';
+ * @prop backdropClass: string = 'bg-gray-900 bg-opacity-50 dark:bg-opacity-80';
  * @prop defaultClass: string = 'relative flex flex-col mx-auto';
  * @prop outsideclose: boolean = false;
  * ## Example

package/dist/modals/Modal.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/modals/Modal.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAMD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAsK3C,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAwC,CAAC;AACxD,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAChD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAClD,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEhD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,oBAAoB,CAAC,UAAU,EAAE,WAAW,EAAE,UAAU,CAAC;CAC3F"}
+{"version":3,"file":"Modal.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/modals/Modal.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAMD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAwK3C,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAwC,CAAC;AACxD,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAChD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAClD,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEhD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,oBAAoB,CAAC,UAAU,EAAE,WAAW,EAAE,UAAU,CAAC;CAC3F"}

package/dist/navbar/NavBrand.svelte

@@ -1,8 +1,8 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 export let href = '';
 </script>
 
-<a {href} {...$$restProps} class={classNames('flex items-center', $$props.class)}>
+<a {href} {...$$restProps} class={twMerge('flex items-center', $$props.class)}>
   <slot />
 </a>
 

package/dist/navbar/NavDropdown.svelte

@@ -1,5 +1,6 @@
-<script>import { clickOutside } from '../utils/clickOutside';
-export let liButtonClass = 'flex items-center justify-between w-full';
+<script>import { twMerge } from 'tailwind-merge';
+import { clickOutside } from '../utils/clickOutside';
+export let liBtnClass = 'flex items-center justify-between w-full';
 export let name;
 export let child = [];
 export let dropdownDiv = '';
@@ -14,8 +15,8 @@ const handleDropdown = () => {
 let liClass = 'flex justify-center py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-primary-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700';
 </script>
 
-<li use:clickOutside={() => !hidden && handleDropdown()} class={liClass}>
-  <button on:click={() => handleDropdown()} class={liButtonClass}
+<li use:clickOutside={() => !hidden && handleDropdown()} class={twMerge(liClass, $$props.classLi)}>
+  <button on:click={() => handleDropdown()} class={twMerge(liBtnClass, $$props.classBtn)}
     >{name}
     <svg class="ml-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
       ><path
@@ -55,7 +56,7 @@ let liClass = 'flex justify-center py-2 pr-4 pl-3 text-gray-700 border-b border-
   @component
   [Go to Navbar](https://flowbite-svelte.com/docs/components/navbar)
   ## Props
-  @prop liButtonClass: string = 'flex items-center justify-between w-full';
+  @prop liBtnClass: string = 'flex items-center justify-between w-full';
   @prop name: string;
   @prop child: NavbarType[] = [];
   @prop dropdownDiv: string = '';

package/dist/navbar/NavDropdown.svelte.d.ts

@@ -2,7 +2,8 @@ import { SvelteComponentTyped } from "svelte";
 import type { NavbarType } from '../types';
 declare const __propDef: {
     props: {
-        liButtonClass?: string | undefined;
+        [x: string]: any;
+        liBtnClass?: string | undefined;
         name: string;
         child?: NavbarType[] | undefined;
         dropdownDiv?: string | undefined;
@@ -33,7 +34,7 @@ export type NavDropdownSlots = typeof __propDef.slots;
 /**
  * [Go to Navbar](https://flowbite-svelte.com/docs/components/navbar)
  * ## Props
- * @prop liButtonClass: string = 'flex items-center justify-between w-full';
+ * @prop liBtnClass: string = 'flex items-center justify-between w-full';
  * @prop name: string;
  * @prop child: NavbarType[] = [];
  * @prop dropdownDiv: string = '';

package/dist/navbar/NavDropdown.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NavDropdown.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/navbar/NavDropdown.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AACD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAgD3C,QAAA,MAAM,SAAS;;;cAD6L,MAAM;;;qCAA2E,MAAM,GAAG,SAAS;cAAQ,MAAM,GAAG,SAAS;;;;;;;;;;;;;;;;;;;CAClR,CAAC;AACxD,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACtD,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACxD,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEtD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AACH,MAAM,CAAC,OAAO,OAAO,WAAY,SAAQ,oBAAoB,CAAC,gBAAgB,EAAE,iBAAiB,EAAE,gBAAgB,CAAC;CACnH"}
+{"version":3,"file":"NavDropdown.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/navbar/NavDropdown.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAED,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAiD3C,QAAA,MAAM,SAAS;;;;cADoL,MAAM;;;qCAA2E,MAAM,GAAG,SAAS;cAAQ,MAAM,GAAG,SAAS;;;;;;;;;;;;;;;;;;;CAClP,CAAC;AAC/E,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACtD,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACxD,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEtD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AACH,MAAM,CAAC,OAAO,OAAO,WAAY,SAAQ,oBAAoB,CAAC,gBAAgB,EAAE,iBAAiB,EAAE,gBAAgB,CAAC;CACnH"}

package/dist/navbar/NavHamburger.svelte

@@ -1,11 +1,12 @@
 <script>import ToolbarButton from '../toolbar/ToolbarButton.svelte';
-import classNames from 'classnames';
+import { twMerge } from 'tailwind-merge';
 import Menu from './Menu.svelte';
 export let btnClass = 'ml-3 md:hidden';
+export let menuClass = 'h-6 w-6 shrink-0';
 </script>
 
-<ToolbarButton name="Open main menu" on:click {...$$restProps} class={classNames(btnClass, $$props.class)}>
-  <Menu class="h-6 w-6 shrink-0" />
+<ToolbarButton name="Open main menu" on:click {...$$restProps} class={twMerge(btnClass, $$props.class)}>
+  <Menu class={twMerge(menuClass, $$props.classMenu)} />
 </ToolbarButton>
 
 <!--

package/dist/navbar/NavHamburger.svelte.d.ts

@@ -3,6 +3,7 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         btnClass?: string | undefined;
+        menuClass?: string | undefined;
     };
     events: {
         click: MouseEvent;

package/dist/navbar/NavHamburger.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NavHamburger.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/navbar/NavHamburger.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAqBD,QAAA,MAAM,SAAS;;;;;;;;;;;CAA+D,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,oBAAoB,CAAC,iBAAiB,EAAE,kBAAkB,EAAE,iBAAiB,CAAC;CACvH"}
+{"version":3,"file":"NavHamburger.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/navbar/NavHamburger.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAsBD,QAAA,MAAM,SAAS;;;;;;;;;;;;CAA+D,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,oBAAoB,CAAC,iBAAiB,EAAE,kBAAkB,EAAE,iBAAiB,CAAC;CACvH"}

package/dist/navbar/NavLi.svelte

@@ -1,4 +1,4 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 import { getContext } from 'svelte';
 export let href = '';
 export let active = false;
@@ -6,7 +6,7 @@ export let activeClass = undefined;
 export let nonActiveClass = undefined;
 const context = getContext('navbar') ?? {};
 let liClass;
-$: liClass = classNames('block py-2 pr-4 pl-3 md:p-0 rounded md:border-0', active ? activeClass ?? context.activeClass : nonActiveClass ?? context.nonActiveClass, $$props.class);
+$: liClass = twMerge('block py-2 pr-4 pl-3 md:p-0 rounded md:border-0', active ? activeClass ?? context.activeClass : nonActiveClass ?? context.nonActiveClass, $$props.class);
 </script>
 
 <li>

package/dist/navbar/NavSidebarHamburger.svelte

@@ -1,11 +1,12 @@
 <script>import ToolbarButton from '../toolbar/ToolbarButton.svelte';
-import classNames from 'classnames';
+import { twMerge } from 'tailwind-merge';
 import SidebarMenu from './SidebarMenu.svelte';
 export let btnClass = 'ml-3 md:hidden';
+export let sideMenuClass = 'h-6 w-6 shrink-0';
 </script>
 
-<ToolbarButton name="Open main menu" on:click {...$$restProps} class={classNames(btnClass, $$props.class)}>
-  <SidebarMenu class="h-6 w-6 shrink-0" variation="solid" />
+<ToolbarButton name="Open main menu" on:click {...$$restProps} class={twMerge(btnClass, $$props.class)}>
+  <SidebarMenu class={twMerge(sideMenuClass, $$props.classSideMenu)} variation="solid" />
 </ToolbarButton>
 
 <!--

package/dist/navbar/NavSidebarHamburger.svelte.d.ts

@@ -3,6 +3,7 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         btnClass?: string | undefined;
+        sideMenuClass?: string | undefined;
     };
     events: {
         click: MouseEvent;

package/dist/navbar/NavSidebarHamburger.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NavSidebarHamburger.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/navbar/NavSidebarHamburger.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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,MAAM,CAAC,OAAO,OAAO,mBAAoB,SAAQ,oBAAoB,CAAC,wBAAwB,EAAE,yBAAyB,EAAE,wBAAwB,CAAC;CACnJ"}
+{"version":3,"file":"NavSidebarHamburger.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/navbar/NavSidebarHamburger.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAsBD,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,MAAM,CAAC,OAAO,OAAO,mBAAoB,SAAQ,oBAAoB,CAAC,wBAAwB,EAAE,yBAAyB,EAAE,wBAAwB,CAAC;CACnJ"}

package/dist/navbar/NavUl.svelte

@@ -1,7 +1,7 @@
 <script context="module">export {};
 </script>
 
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 import { slide } from 'svelte/transition';
 import { quintOut } from 'svelte/easing';
 import Frame from '../utils/Frame.svelte';
@@ -14,11 +14,11 @@ export let activeClass = 'text-white bg-primary-700 md:bg-transparent md:text-pr
 export let nonActiveClass = 'text-gray-700 hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-primary-700 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent';
 setContext('navbar', { activeClass, nonActiveClass });
 let _divClass;
-$: _divClass = classNames(divClass, $$props.class);
+$: _divClass = twMerge(divClass, $$props.class);
 let _ulClass;
-$: _ulClass = classNames(ulClass, 
+$: _ulClass = twMerge(ulClass, 
 // 'divide-y md:divide-y-0 divide-gray-100 dark:divide-gray-700',
-$$props.class);
+$$props.classUl);
 </script>
 
 {#if !hidden}

package/dist/navbar/Navbar.svelte

@@ -1,5 +1,5 @@
 <script>import Frame from '../utils/Frame.svelte';
-import classNames from 'classnames';
+import { twMerge } from 'tailwind-merge';
 export let navClass = 'px-2 sm:px-4 py-2.5 w-full';
 export let navDivClass = 'mx-auto flex flex-wrap justify-between items-center ';
 export let fluid = false;
@@ -11,10 +11,11 @@ let hidden = true;
 let toggle = () => {
     hidden = !hidden;
 };
+let navDivCls = twMerge(navDivClass, $$props.classNav);
 </script>
 
-<Frame tag="nav" {...$$restProps} class={classNames(navClass, $$props.class)}>
-  <div class={classNames(navDivClass, (fluid && 'w-full') || 'container')}>
+<Frame tag="nav" {...$$restProps} class={twMerge(navClass, $$props.class)}>
+  <div class={twMerge(navDivCls, (fluid && 'w-full') || 'container')}>
     <slot {hidden} {toggle} />
   </div>
 </Frame>

package/dist/navbar/Navbar.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Navbar.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/navbar/Navbar.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA0CD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAwC,CAAC;AACxD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACjD,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACnD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,oBAAoB,CAAC,WAAW,EAAE,YAAY,EAAE,WAAW,CAAC;CAC/F"}
+{"version":3,"file":"Navbar.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/navbar/Navbar.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA2CD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAwC,CAAC;AACxD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACjD,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACnD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,oBAAoB,CAAC,WAAW,EAAE,YAAY,EAAE,WAAW,CAAC;CAC/F"}

package/dist/navbar/SidebarMenu.svelte

@@ -25,8 +25,8 @@ export let ariaLabel = 'bars 3';
   xmlns="http://www.w3.org/2000/svg"
   width={size}
   height={size}
-  class={$$props.class}
   {...$$restProps}
+  class={$$props.class}
   aria-label={ariaLabel}
   fill="none"
   {viewBox}

package/dist/paginations/Pagination.svelte

@@ -1,4 +1,4 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge, twJoin } from 'tailwind-merge';
 import { createEventDispatcher, setContext } from 'svelte';
 import PaginationItem from './PaginationItem.svelte';
 export let pages = [];
@@ -6,6 +6,8 @@ export let activeClass = 'text-blue-600 border border-gray-300 bg-blue-50 hover:
 export let normalClass = 'text-gray-500 bg-white hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white';
 export let ulClass = 'inline-flex -space-x-px items-center';
 export let table = false;
+let normalCls = twMerge(normalClass, $$props.classNormal);
+let activeCls = twMerge(activeClass, $$props.classActive);
 const dispatch = createEventDispatcher();
 setContext('group', true);
 setContext('table', table);
@@ -18,11 +20,9 @@ const next = () => {
 </script>
 
 <nav aria-label="Page navigation">
-  <ul class={classNames(ulClass, table && 'divide-x divide-gray-700', $$props.class)}>
+  <ul class={twMerge(ulClass, table && 'divide-x divide-gray-700', $$props.class)}>
     <li>
-      <PaginationItem
-        on:click={previous}
-        class={classNames(normalClass, table ? 'rounded-l' : 'rounded-l-lg')}>
+      <PaginationItem on:click={previous} class={twJoin(normalCls, table ? 'rounded-l' : 'rounded-l-lg')}>
         <slot name="prev">Previous</slot>
       </PaginationItem>
     </li>
@@ -40,13 +40,13 @@ const next = () => {
           on:mouseenter
           on:mouseleave
           on:mouseover
-          {activeClass}
-          {normalClass}
+          {activeCls}
+          {normalCls}
           {href}>{name}</PaginationItem>
       </li>
     {/each}
     <li>
-      <PaginationItem on:click={next} class={classNames(normalClass, table ? 'rounded-r' : 'rounded-r-lg')}>
+      <PaginationItem on:click={next} class={twJoin(normalCls, table ? 'rounded-r' : 'rounded-r-lg')}>
         <slot name="next">Next</slot>
       </PaginationItem>
     </li>

package/dist/paginations/Pagination.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/paginations/Pagination.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAGD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAsDzC,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoEG;AACH,MAAM,CAAC,OAAO,OAAO,UAAW,SAAQ,oBAAoB,CAAC,eAAe,EAAE,gBAAgB,EAAE,eAAe,CAAC;CAC/G"}
+{"version":3,"file":"Pagination.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/paginations/Pagination.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAGD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAyDzC,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoEG;AACH,MAAM,CAAC,OAAO,OAAO,UAAW,SAAQ,oBAAoB,CAAC,eAAe,EAAE,gBAAgB,EAAE,eAAe,CAAC;CAC/G"}

package/dist/paginations/PaginationItem.svelte

@@ -1,4 +1,4 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 import { getContext } from 'svelte';
 export let href = undefined;
 export let active = false;
@@ -7,7 +7,15 @@ export let normalClass = 'text-gray-500 bg-white hover:bg-gray-100 hover:text-gr
 const group = getContext('group');
 const table = getContext('table');
 let defaultClass;
-$: defaultClass = classNames('block py-2', group ? 'px-3' : 'px-4', 'text-sm font-medium', table || 'border border-gray-300', group || (table ? 'rounded' : 'rounded-lg'), active ? activeClass : normalClass, $$props.class);
+$: defaultClass = twMerge([
+    'block py-2',
+    group ? 'px-3' : 'px-4',
+    'text-sm font-medium',
+    table || 'border border-gray-300',
+    group || (table ? 'rounded' : 'rounded-lg'),
+    active ? activeClass : normalClass,
+    $$props.class
+]);
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->

package/dist/progressbars/Progressbar.svelte

@@ -1,10 +1,11 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge, twJoin } from 'tailwind-merge';
 export let progress = '45';
 export let size = 'h-2.5';
 export let labelInside = false;
 export let labelOutside = '';
 export let color = 'primary';
 export let labelInsideClass = 'text-primary-100 text-xs font-medium text-center p-0.5 leading-none rounded-full';
+export let divClass = 'w-full bg-gray-200 rounded-full dark:bg-gray-700';
 // let barColor: string;
 const barColors = {
     primary: 'bg-primary-600',
@@ -19,18 +20,18 @@ const barColors = {
 </script>
 
 {#if labelOutside}
-  <div {...$$restProps} class={classNames('flex justify-between mb-1', $$props.class)}>
-    <span class="text-base font-medium text-primary-700 dark:text-white">{labelOutside}</span>
-    <span class="text-sm font-medium text-primary-700 dark:text-white">{progress}%</span>
+  <div {...$$restProps} class={twMerge('flex justify-between mb-1', $$props.classLabelOutside)}>
+    <span class="text-base font-medium text-blue-700 dark:text-white">{labelOutside}</span>
+    <span class="text-sm font-medium text-blue-700 dark:text-white">{progress}%</span>
   </div>
 {/if}
-<div class={classNames('w-full bg-gray-200 rounded-full dark:bg-gray-700', size, $$props.class)}>
+<div class={twMerge(divClass, size, $$props.class)}>
   {#if labelInside}
-    <div class={classNames(labelInsideClass, barColors[color])} style="width: {progress}%">
+    <div class={twJoin(labelInsideClass, barColors[color])} style="width: {progress}%">
       {progress}%
     </div>
   {:else}
-    <div class={classNames(barColors[color], size, 'rounded-full')} style="width: {progress}%" />
+    <div class={twJoin(barColors[color], size, 'rounded-full')} style="width: {progress}%" />
   {/if}
 </div>
 

package/dist/progressbars/Progressbar.svelte.d.ts

@@ -8,6 +8,7 @@ declare const __propDef: {
         labelOutside?: string | undefined;
         color?: "gray" | "red" | "yellow" | "green" | "indigo" | "purple" | "blue" | "primary" | undefined;
         labelInsideClass?: string | undefined;
+        divClass?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/progressbars/Progressbar.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Progressbar.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/progressbars/Progressbar.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAgDD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACtD,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACxD,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEtD;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,CAAC,OAAO,OAAO,WAAY,SAAQ,oBAAoB,CAAC,gBAAgB,EAAE,iBAAiB,EAAE,gBAAgB,CAAC;CACnH"}
+{"version":3,"file":"Progressbar.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/progressbars/Progressbar.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAiDD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACtD,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACxD,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEtD;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,CAAC,OAAO,OAAO,WAAY,SAAQ,oBAAoB,CAAC,gBAAgB,EAAE,iBAAiB,EAAE,gBAAgB,CAAC;CACnH"}

package/dist/ratings/Rating.svelte

@@ -1,5 +1,5 @@
 <script>import Star from './Star.svelte';
-import classNames from 'classnames';
+import { twMerge } from 'tailwind-merge';
 import generateId from '../utils/generateId.js';
 export let divClass = 'flex items-center';
 export let size = 24;
@@ -18,7 +18,7 @@ let grayStars = total - (fullStars + Math.ceil(rateDiffence));
 // console.log(fullStars, grayStars, rateDiffence, percentRating)
 </script>
 
-<div class={classNames(divClass, $$props.class)}>
+<div class={twMerge(divClass, $$props.class)}>
   {#if count}
     <svelte:component this={icon} fillPercent={100} {size} />
     <p class="ml-2 text-sm font-bold text-gray-900 dark:text-white">{rating}</p>

package/dist/ratings/RatingComment.svelte

@@ -1,5 +1,4 @@
 <script>import Button from '../buttons/Button.svelte';
-import Star from './Star.svelte';
 import Rating from './Rating.svelte';
 // default is floor
 export let ceil = false;

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

@@ -1 +1 @@
-{"version":3,"file":"RatingComment.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/ratings/RatingComment.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAkGD,QAAA,MAAM,SAAS;;;;;iBAhB0J;YACrK,EAAE,EAAE,MAAM,CAAC;YACX,IAAI,EAAE;gBACJ,MAAM,MAAM,CAAC;gBACb,GAAG,EAAE;oBACH,GAAG,EAAE,MAAM,CAAC;oBACZ,GAAG,EAAE,MAAM,CAAC;iBACb,CAAC;gBACF,MAAM,EAAE,MAAM,CAAC;aAChB,CAAC;YACF,KAAK,EAAE,MAAM,CAAC;YACd,MAAM,EAAE,MAAM,CAAC;YACf,OAAO,EAAE,MAAM,CAAC;YAChB,OAAO,EAAE,MAAM,CAAC;YAChB,QAAQ,EAAE,MAAM,CAAC;SAClB;;;;;;;;;CACoD,CAAC;AACxD,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACxD,MAAM,MAAM,mBAAmB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC1D,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAExD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,MAAM,CAAC,OAAO,OAAO,aAAc,SAAQ,oBAAoB,CAAC,kBAAkB,EAAE,mBAAmB,EAAE,kBAAkB,CAAC;CAC3H"}
+{"version":3,"file":"RatingComment.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/ratings/RatingComment.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAgGD,QAAA,MAAM,SAAS;;;;;iBAhB0J;YACrK,EAAE,EAAE,MAAM,CAAC;YACX,IAAI,EAAE;gBACJ,MAAM,MAAM,CAAC;gBACb,GAAG,EAAE;oBACH,GAAG,EAAE,MAAM,CAAC;oBACZ,GAAG,EAAE,MAAM,CAAC;iBACb,CAAC;gBACF,MAAM,EAAE,MAAM,CAAC;aAChB,CAAC;YACF,KAAK,EAAE,MAAM,CAAC;YACd,MAAM,EAAE,MAAM,CAAC;YACf,OAAO,EAAE,MAAM,CAAC;YAChB,OAAO,EAAE,MAAM,CAAC;YAChB,QAAQ,EAAE,MAAM,CAAC;SAClB;;;;;;;;;CACoD,CAAC;AACxD,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACxD,MAAM,MAAM,mBAAmB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC1D,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAExD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,MAAM,CAAC,OAAO,OAAO,aAAc,SAAQ,oBAAoB,CAAC,kBAAkB,EAAE,mBAAmB,EAAE,kBAAkB,CAAC;CAC3H"}

package/dist/ratings/Review.svelte

@@ -1,4 +1,4 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 export let review;
 export let articleClass = 'md:gap-8 md:grid md:grid-cols-3';
 export let divClass = 'flex items-center mb-6 space-x-4';
@@ -7,10 +7,10 @@ export let ulClass = 'space-y-4 text-sm text-gray-500 dark:text-gray-400';
 export let liClass = 'flex items-center';
 </script>
 
-<article class={classNames(articleClass, $$props.classArticle)}>
+<article class={twMerge(articleClass, $$props.classArticle)}>
   <div>
-    <div class={classNames(divClass, $$props.classDiv)}>
-      <img class={classNames(imgClass, $$props.classImg)} src={review.imgSrc} alt={review.imgAlt} />
+    <div class={twMerge(divClass, $$props.classDiv)}>
+      <img class={twMerge(imgClass, $$props.classImg)} src={review.imgSrc} alt={review.imgAlt} />
       <div class="space-y-1 font-medium dark:text-white">
         <p>{review.name}</p>
         {#if review.address}
@@ -21,19 +21,19 @@ export let liClass = 'flex items-center';
       </div>
     </div>
     {#if $$slots.item1 || $$slots.item2 || $$slots.item3}
-      <ul class={classNames(ulClass, $$props.classUl)}>
+      <ul class={twMerge(ulClass, $$props.classUl)}>
         {#if $$slots.item1}
-          <li class={classNames(liClass, $$props.classLi)}>
+          <li class={twMerge(liClass, $$props.classLi)}>
             <slot name="item1" />
           </li>
         {/if}
         {#if $$slots.item2}
-          <li class={classNames(liClass, $$props.classLi)}>
+          <li class={twMerge(liClass, $$props.classLi)}>
             <slot name="item2" />
           </li>
         {/if}
         {#if $$slots.item3}
-          <li class={classNames(liClass, $$props.classLi)}>
+          <li class={twMerge(liClass, $$props.classLi)}>
             <slot name="item3" />
           </li>
         {/if}

package/dist/ratings/Star.svelte

@@ -11,8 +11,8 @@ export let role = 'img';
 <svg
   width={size}
   height={size}
-  class={$$props.class}
   {...$$restProps}
+  class={$$props.class}
   aria-label={ariaLabel}
   viewBox="100 100 120 120"
   {role}

package/dist/ratings/Thumbup.svelte

@@ -10,8 +10,8 @@ export let role = 'img';
 <svg
   width={size}
   height={size}
-  class={$$props.class}
   {...$$restProps}
+  class={$$props.class}
   aria-label={ariaLabel}
   viewBox="0 0 24 24"
   {role}

package/dist/sidebars/Sidebar.svelte

@@ -1,8 +1,8 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 export let asideClass = 'w-64';
 </script>
 
-<aside {...$$restProps} class={classNames(asideClass, $$props.class)} aria-label="Sidebar">
+<aside {...$$restProps} class={twMerge(asideClass, $$props.class)} aria-label="Sidebar">
   <slot />
 </aside>
 

package/dist/sidebars/SidebarBrand.svelte

@@ -1,11 +1,11 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 export let site;
 export let aClass = 'flex items-center pl-2.5 mb-5';
 export let imgClass = 'h-6 mr-3 sm:h-7';
 export let spanClass = 'self-center text-xl font-semibold whitespace-nowrap dark:text-white';
 </script>
 
-<a {...$$restProps} href={site.href} class={classNames(aClass, $$props.class)}>
+<a {...$$restProps} href={site.href} class={twMerge(aClass, $$props.class)}>
   <img src={site.img} class={imgClass} alt={site.name} />
   <span class={spanClass}>{site.name}</span>
 </a>

package/dist/sidebars/SidebarCta.svelte

@@ -1,11 +1,11 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 export let divWrapperClass = 'p-4 mt-6 bg-primary-50 rounded-lg dark:bg-primary-900';
 export let divClass = 'flex items-center mb-3';
 export let spanClass = 'bg-primary-100 text-primary-800 text-sm font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-primary-200 dark:text-primary-900';
 export let label = '';
 </script>
 
-<div {...$$restProps} id="dropdown-cta" class={classNames(divWrapperClass, $$props.class)} role="alert">
+<div {...$$restProps} id="dropdown-cta" class={twMerge(divWrapperClass, $$props.class)} role="alert">
   <div class={divClass}>
     <span class={spanClass}>{label}</span>
     {#if $$slots.icon}

package/dist/sidebars/SidebarDropdownItem.svelte

@@ -1,4 +1,4 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 export let aClass = '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';
 export let href = '';
 export let label = '';
@@ -19,7 +19,7 @@ export let active = false;
     on:mouseenter
     on:mouseleave
     on:mouseover
-    class={classNames(active ? activeClass : aClass, $$props.class)}>{label}</a>
+    class={twMerge(active ? activeClass : aClass, $$props.class)}>{label}</a>
 </li>
 
 <!--

package/dist/sidebars/SidebarDropdownWrapper.svelte

@@ -1,4 +1,4 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 import { fade, blur, fly, slide } from 'svelte/transition';
 // import { quintOut } from 'svelte/easing';
 import ChevronDown from '../utils/ChevronDown.svelte';
@@ -33,7 +33,7 @@ const handleDropdown = () => {
     {...$$restProps}
     on:click={() => handleDropdown()}
     type="button"
-    class={classNames(btnClass, $$props.class)}
+    class={twMerge(btnClass, $$props.class)}
     aria-controls="sidebar-dropdown">
     <slot name="icon" />
     <span class={spanClass}>{label}</span>