flowbite-svelte 0.37.4 → 0.38.1

package/README.md

@@ -31,7 +31,7 @@ You can find all the starters in the Starters directory.
 
 You can find all the examples in the Examples directory.
 
-- [Flowbite SvelteKit responsive sidebar layout](https://github.com/themesberg/flowbite-svelte/tree/main/examples/flowbite-sveltekit-responsive-sidebar-layout)
+- [Flowbite SvelteKit responsive sidebar layout](https://github.com/shinokada/flowbite-sveltekit-responsive-sidebar-layout)
 
 ## Installation
 

package/dist/accordion/Accordion.svelte

@@ -2,7 +2,7 @@
 </script>
 
 <script>import Frame from '../utils/Frame.svelte';
-import classNames from 'classnames';
+import { twMerge } from 'tailwind-merge';
 import { setContext } from 'svelte';
 export let multiple = false;
 export let flush = false;
@@ -16,7 +16,7 @@ const ctx = {
     selected: multiple ? undefined : writable()
 };
 setContext('ctx', ctx);
-let frameClass = classNames(defaultClass, $$props.class);
+let frameClass = twMerge(defaultClass, $$props.class);
 </script>
 
 <Frame {...$$restProps} class={frameClass} color="none">

package/dist/accordion/AccordionItem.svelte

@@ -1,6 +1,6 @@
 <script>import ChevronDown from '../utils/ChevronDown.svelte';
 import ChevronUp from '../utils/ChevronUp.svelte';
-import classNames from 'classnames';
+import { twMerge } from 'tailwind-merge';
 import { getContext, onMount } from 'svelte';
 import { writable } from 'svelte/store';
 import { fade, blur, fly, slide } from 'svelte/transition';
@@ -45,7 +45,7 @@ onMount(() => {
 });
 const handleToggle = (_) => selected.set(open ? {} : self);
 let buttonClass;
-$: buttonClass = classNames(defaultClass, ctx.flush || borderClass, borderBottomClass, borderSharedClass, ctx.flush ? paddingFlush : paddingDefault, open && (ctx.flush ? textFlushOpen : activeClasses || ctx.activeClasses), !open && (ctx.flush ? textFlushDefault : inactiveClasses || ctx.inactiveClasses), $$props.class);
+$: buttonClass = twMerge(defaultClass, ctx.flush || borderClass, borderBottomClass, borderSharedClass, ctx.flush ? paddingFlush : paddingDefault, open && (ctx.flush ? textFlushOpen : activeClasses || ctx.activeClasses), !open && (ctx.flush ? textFlushDefault : inactiveClasses || ctx.inactiveClasses), $$props.class);
 </script>
 
 <h2 class="group">

package/dist/alerts/Alert.svelte

@@ -1,50 +1,57 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 import { createEventDispatcher } from 'svelte';
 import CloseButton from '../utils/CloseButton.svelte';
 import Frame from '../utils/Frame.svelte';
+import { fade } from 'svelte/transition';
 export let dismissable = false;
-export let accent = false;
+export let defaultClass = 'p-4 gap-3 text-sm';
 const dispatch = createEventDispatcher();
-let hidden = false;
-const handleHide = () => {
-    hidden = !hidden;
+let open = true;
+const close = () => {
+    open = false;
     dispatch('close'); // preferred name
 };
 let divClass;
-$: divClass = classNames('p-4 text-sm', accent && 'border-t-4 ', hidden && 'hidden', $$props.class);
+$: divClass = twMerge(defaultClass, ($$slots.icon || dismissable) && 'flex items-center', $$props.class);
 $: {
     // set default values
-    $$restProps.color = $$restProps.color ?? 'blue';
-    $$restProps.rounded = $$restProps.rounded ?? !accent;
+    $$restProps.color = $$restProps.color ?? 'primary';
+    $$restProps.rounded = $$restProps.rounded ?? true;
+    if (dismissable)
+        $$restProps.transition = $$restProps.transition ?? fade;
 }
 </script>
 
-<Frame {...$$restProps} class={divClass} role="alert">
-  <div class="flex items-center">
+{#if open}
+  <Frame {...$$restProps} class={divClass} role="alert">
     {#if $$slots.icon}
       <slot name="icon" />
     {/if}
-    <div class:ml-3={$$slots.icon}>
+
+    {#if $$slots.icon || dismissable}
+      <div><slot /></div>
+    {:else}
       <slot />
-    </div>
+    {/if}
 
     {#if dismissable}
-      <CloseButton
-        class="-mx-1.5 -my-1.5"
-        color={$$restProps.color}
-        on:click={handleHide}
-        on:click
-        on:change
-        on:keydown
-        on:keyup
-        on:focus
-        on:blur
-        on:mouseenter
-        on:mouseleave />
+      <slot name="close-button" {close}>
+        <CloseButton
+          class="'-mx-1.5 -my-1.5'"
+          color={$$restProps.color}
+          on:click={close}
+          on:click
+          on:change
+          on:keydown
+          on:keyup
+          on:focus
+          on:blur
+          on:mouseenter
+          on:mouseleave />
+      </slot>
     {/if}
-  </div>
-  <slot name="extra" />
-</Frame>
+  </Frame>
+{/if}
 
 <!--
   @component
@@ -84,4 +91,4 @@ $: {
     <span class="font-medium">Danger alert!</span> Change a few things up and try submitting again.
   </Alert>
   ```
--->
+-->

package/dist/alerts/Alert.svelte.d.ts

@@ -243,7 +243,6 @@ declare const __propDef: {
         use?: import("svelte/action").Action<HTMLElement, any, Record<never, any>> | undefined;
         options?: object | undefined;
         dismissable?: boolean | undefined;
-        accent?: boolean | undefined;
     };
     events: {
         click: MouseEvent;
@@ -261,7 +260,9 @@ declare const __propDef: {
     slots: {
         icon: {};
         default: {};
-        extra: {};
+        'close-button': {
+            close: () => void;
+        };
     };
 };
 export type AlertProps = typeof __propDef.props;

package/dist/alerts/Alert.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/alerts/Alert.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA2DD,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,oBAAoB,CAAC,UAAU,EAAE,WAAW,EAAE,UAAU,CAAC;CAC3F"}
+{"version":3,"file":"Alert.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/alerts/Alert.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAoED,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,oBAAoB,CAAC,UAAU,EAAE,WAAW,EAAE,UAAU,CAAC;CAC3F"}

package/dist/avatar/Avatar.svelte

@@ -1,4 +1,4 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 import AvatarPlaceholder from './Placeholder.svelte';
 import Indicator from '../indicators/Indicator.svelte';
 export let src = '';
@@ -18,7 +18,7 @@ const sizes = {
     xl: 'w-36 h-36'
 };
 let avatarClass;
-$: avatarClass = classNames(rounded ? 'rounded' : 'rounded-full', border && 'p-1 ring-2 ring-gray-300 dark:ring-gray-500', sizes[size], stacked && 'border-2 -ml-4 border-white dark:border-gray-800', 'bg-gray-100 dark:bg-gray-600 text-gray-600 dark:text-gray-300', $$props.class);
+$: avatarClass = twMerge(rounded ? 'rounded' : 'rounded-full', border && 'p-1 ring-2 ring-gray-300 dark:ring-gray-500', sizes[size], stacked && 'border-2 -ml-4 border-white dark:border-gray-800', 'bg-gray-100 dark:bg-gray-600 text-gray-600 dark:text-gray-300', $$props.class);
 </script>
 
 {#if !src || !!href || $$slots.default || dot}

package/dist/avatar/Avatar.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/avatar/Avatar.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA6DD,QAAA,MAAM,SAAS;;;;eAD4I,MAAM,GAAG,SAAS;;;;cAAgE,MAAM,GAAG,SAAS;;;;;;;;;;CACjL,CAAC;AAC/E,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,oBAAoB,CAAC,WAAW,EAAE,YAAY,EAAE,WAAW,CAAC;CAC/F"}
+{"version":3,"file":"Avatar.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/avatar/Avatar.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA2DD,QAAA,MAAM,SAAS;;;;eAD4I,MAAM,GAAG,SAAS;;;;cAAgE,MAAM,GAAG,SAAS;;;;;;;;;;CACjL,CAAC;AAC/E,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,oBAAoB,CAAC,WAAW,EAAE,YAAY,EAAE,WAAW,CAAC;CAC/F"}

package/dist/badges/Badge.svelte

@@ -1,7 +1,7 @@
 <script>import { createEventDispatcher } from 'svelte';
-import classNames from 'classnames';
+import { twMerge, twJoin } from 'tailwind-merge';
 import CloseButton from '../utils/CloseButton.svelte';
-export let color = 'blue';
+export let color = 'primary';
 export let large = false;
 export let border = false;
 export let href = undefined;
@@ -9,6 +9,7 @@ export let rounded = false;
 export let index = false;
 export let dismissable = false;
 const colors = {
+    primary: 'bg-primary-100 text-primary-800 dark:bg-primary-900 dark:text-primary-300',
     blue: 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300',
     dark: 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300',
     red: 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300',
@@ -28,6 +29,7 @@ const colors = {
     none: ''
 };
 const borderedColors = {
+    primary: 'bg-primary-100 text-primary-800 dark:bg-gray-700 dark:text-primary-400 border-primary-400',
     blue: 'bg-blue-100 text-blue-800 dark:bg-gray-700 dark:text-blue-400 border-blue-400',
     dark: 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-400 border-gray-500',
     red: 'bg-red-100 text-red-800 dark:bg-gray-700 dark:text-red-400 border-red-400',
@@ -39,6 +41,7 @@ const borderedColors = {
     none: ''
 };
 const hoverColors = {
+    primary: 'hover:bg-primary-200',
     blue: 'hover:bg-blue-200',
     dark: 'hover:bg-gray-200',
     red: 'hover:bg-red-200',
@@ -52,10 +55,11 @@ const hoverColors = {
 const baseClass = 'font-medium inline-flex items-center justify-center px-2.5 py-0.5';
 let transition = false;
 let badgeClass;
-$: badgeClass = classNames(baseClass, large ? 'text-sm' : 'text-xs', border ? `border ${borderedColors[color]}` : colors[color], href && hoverColors[color], rounded ? 'rounded-full' : 'rounded', index && 'absolute font-bold border-2 border-white dark:border-gray-900', index && (large ? 'w-7 h-7 -top-3 -right-3' : 'w-6 h-6 -top-2 -right-2'), transition && 'transition-opacity duration-300 ease-out opacity-0', $$props.class);
+$: badgeClass = twMerge(baseClass, large ? 'text-sm' : 'text-xs', border ? `border ${borderedColors[color]}` : colors[color], href && hoverColors[color], rounded ? 'rounded-full' : 'rounded', index && 'absolute font-bold border-2 border-white dark:border-gray-900', index && (large ? 'w-7 h-7 -top-3 -right-3' : 'w-6 h-6 -top-2 -right-2'), transition && 'transition-opacity duration-300 ease-out opacity-0', $$props.class);
 const closeBtnBaseClass = 'inline-flex items-center !p-0.5 !m-0 !ml-2 text-sm bg-transparent rounded-sm focus:!ring-0';
 // only overwrite necessary colors (<CloseButton> v0.29.10)
 const closeBtnColors = {
+    primary: 'text-primary-400 hover:text-primary-900 dark:hover:!bg-primary-800 dark:hover:text-primary-300',
     blue: 'text-blue-400 hover:text-blue-900 dark:hover:!bg-blue-800 dark:hover:text-blue-300',
     dark: 'text-gray-400 hover:!text-gray-400 hover:!bg-gray-200 dark:hover:!text-gray-300',
     red: 'text-red-400 hover:text-red-900 dark:hover:!bg-red-800 dark:hover:text-red-300',
@@ -67,7 +71,7 @@ const closeBtnColors = {
     none: ''
 };
 let closeBtnClass;
-$: closeBtnClass = classNames(closeBtnBaseClass, closeBtnColors[color]);
+$: closeBtnClass = twJoin(closeBtnBaseClass, closeBtnColors[color]);
 let hidden = false;
 const dispatch = createEventDispatcher();
 const handleHide = () => {

package/dist/badges/Badge.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/badges/Badge.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA8HD,QAAA,MAAM,SAAS;;;;;;eADsQ,MAAM,GAAG,SAAS;;;;;;;;;;;;;;;;CACzN,CAAC;AAC/E,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,oBAAoB,CAAC,UAAU,EAAE,WAAW,EAAE,UAAU,CAAC;CAC3F"}
+{"version":3,"file":"Badge.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/badges/Badge.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAmID,QAAA,MAAM,SAAS;;;;;;eADsQ,MAAM,GAAG,SAAS;;;;;;;;;;;;;;;;CACzN,CAAC;AAC/E,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,oBAAoB,CAAC,UAAU,EAAE,WAAW,EAAE,UAAU,CAAC;CAC3F"}

package/dist/banner/Banner.svelte

@@ -1,4 +1,4 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 import CloseButton from '../utils/CloseButton.svelte';
 export let id = 'sticky-banner';
 export let position = 'sticky';
@@ -22,8 +22,8 @@ const insideDivClasses = {
     info: 'items-center flex-shrink-0',
     custom: ''
 };
-$: divClass = classNames(position, divDefault, divClasses[bannerType], $$props.outerDiv);
-$: div2Class = classNames(insideDiv, insideDivClasses[bannerType], $$props.innerDiv);
+$: divClass = twMerge(position, divDefault, divClasses[bannerType], $$props.outerDiv);
+$: div2Class = twMerge(insideDiv, insideDivClasses[bannerType], $$props.innerDiv);
 let show = true;
 $: handleHide = () => {
     show = !show;

package/dist/bottom-nav/BottomNav.svelte

@@ -1,5 +1,5 @@
 <script>import { setContext } from 'svelte';
-import classNames from 'classnames';
+import { twMerge } from 'tailwind-merge';
 export let position = 'fixed';
 export let navType = 'default';
 export let outerDefault = 'w-full z-50 border-gray-200 dark:bg-gray-700 dark:border-gray-600';
@@ -29,8 +29,8 @@ const innerDivClasses = {
     video: 'flex items-center w-full',
     custom: innerCustom
 };
-$: outerClass = classNames(position, outerDefault, outerDivClasses[navType], $$props.outerDiv);
-$: innerClass = classNames(innerDefault, innerDivClasses[navType], $$props.innerDiv);
+$: outerClass = twMerge(position, outerDefault, outerDivClasses[navType], $$props.outerDiv);
+$: innerClass = twMerge(innerDefault, innerDivClasses[navType], $$props.innerDiv);
 </script>
 
 <div {...$$restProps} class={outerClass}>

package/dist/bottom-nav/BottomNavHeaderItem.svelte

@@ -1,9 +1,8 @@
-<script>import classNames from 'classnames';
-export let itemName = '';
+<script>export let itemName = '';
 export let active = false;
 export let defaultClass = 'px-5 py-1.5 text-xs font-medium text-gray-900 hover:bg-gray-200 dark:text-white dark:hover:bg-gray-700 rounded-lg';
 export let activeClass = 'px-5 py-1.5 text-xs font-medium text-white bg-gray-900 dark:bg-gray-300 dark:text-gray-900 rounded-lg';
-$: btnClass = classNames(active ? activeClass : defaultClass);
+$: btnClass = active ? activeClass : defaultClass;
 </script>
 
 <button class={btnClass} {...$$restProps}>

package/dist/bottom-nav/BottomNavHeaderItem.svelte.d.ts.map

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

package/dist/bottom-nav/BottomNavItem.svelte

@@ -1,5 +1,5 @@
 <script>import { getContext } from 'svelte';
-import classNames from 'classnames';
+import { twMerge } from 'tailwind-merge';
 export let btnName = '';
 export let appBtnPosition = 'custom';
 export let btnDefault = '';
@@ -20,12 +20,12 @@ const btnClasses = {
     custom: btnCustom
 };
 const spanClasses = {
-    default: 'text-sm text-gray-500 dark:text-gray-400 group-hover:text-blue-600 dark:group-hover:text-blue-500',
-    border: 'text-sm text-gray-500 dark:text-gray-400 group-hover:text-blue-600 dark:group-hover:text-blue-500',
+    default: 'text-sm text-gray-500 dark:text-gray-400 group-hover:text-primary-600 dark:group-hover:text-primary-500',
+    border: 'text-sm text-gray-500 dark:text-gray-400 group-hover:text-primary-600 dark:group-hover:text-primary-500',
     application: 'sr-only',
     pagination: 'sr-only',
     group: 'sr-only',
-    card: 'text-sm text-gray-500 dark:text-gray-400 group-hover:text-blue-600 dark:group-hover:text-blue-500',
+    card: 'text-sm text-gray-500 dark:text-gray-400 group-hover:text-primary-600 dark:group-hover:text-primary-500',
     meeting: '',
     video: '',
     custom: spanCustom
@@ -36,8 +36,8 @@ const appBtnClasses = {
     right: 'inline-flex flex-col items-center justify-center px-5 rounded-r-full hover:bg-gray-50 dark:hover:bg-gray-800 group',
     custom: appCustom
 };
-$: btnClass = classNames(btnDefault, btnClasses[navType], appBtnClasses[appBtnPosition], $$props.btnClass);
-$: spanClass = classNames(spanDefault, spanClasses[navType], $$props.spanClass);
+$: btnClass = twMerge(btnDefault, btnClasses[navType], appBtnClasses[appBtnPosition], $$props.btnClass);
+$: spanClass = twMerge(spanDefault, spanClasses[navType], $$props.spanClass);
 </script>
 
 <button

package/dist/breadcrumbs/Breadcrumb.svelte

@@ -1,4 +1,4 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 export let solid = false;
 export let navClass = 'flex';
 export let solidClass = 'flex px-5 py-3 text-gray-700 border border-gray-200 rounded-lg bg-gray-50 dark:bg-gray-800 dark:border-gray-700';
@@ -6,8 +6,8 @@ export let olClass = 'inline-flex items-center space-x-1 md:space-x-3';
 let classNav = solid ? solidClass : navClass;
 </script>
 
-<nav aria-label="Breadcrumb" {...$$restProps} class={classNames(classNav, $$props.class)}>
-  <ol class={classNames(olClass, $$props.classOl)}>
+<nav aria-label="Breadcrumb" {...$$restProps} class={twMerge(classNav, $$props.class)}>
+  <ol class={twMerge(olClass, $$props.classOl)}>
     <slot />
   </ol>
 </nav>

package/dist/buttongroups/ButtonGroup.svelte

@@ -1,11 +1,11 @@
 <script>import { setContext } from 'svelte';
-import classNames from 'classnames';
+import { twMerge } from 'tailwind-merge';
 export let size = 'md';
 export let divClass = 'inline-flex rounded-lg shadow-sm';
 setContext('group', { size });
 </script>
 
-<div {...$$restProps} class={classNames(divClass, $$props.class)} role="group">
+<div {...$$restProps} class={twMerge(divClass, $$props.class)} role="group">
   <slot />
 </div>
 

package/dist/buttons/Button.svelte

@@ -1,4 +1,4 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 import { getContext } from 'svelte';
 const group = getContext('group');
 export let pill = false;
@@ -68,7 +68,7 @@ const hasBorder = () => outline || color === 'alternative' || color === 'light';
 let buttonClass;
 $: buttonClass = btnClass
     ? btnClass
-    : classNames('text-center font-medium', group ? 'focus:ring-2' : 'focus:ring-4', group && 'focus:z-10', group || 'focus:outline-none', 'inline-flex items-center justify-center ' + sizeClasses[size], outline ? outlineClasses[color] : colorClasses[color], color === 'alternative' &&
+    : twMerge('text-center font-medium', group ? 'focus:ring-2' : 'focus:ring-4', group && 'focus:z-10', group || 'focus:outline-none', 'inline-flex items-center justify-center ' + sizeClasses[size], outline ? outlineClasses[color] : colorClasses[color], color === 'alternative' &&
         (group
             ? 'dark:bg-gray-700 dark:text-white dark:border-gray-700 dark:hover:border-gray-600 dark:hover:bg-gray-600'
             : 'dark:bg-transparent dark:border-gray-600 dark:hover:border-gray-700'), outline &&
@@ -89,6 +89,9 @@ $: buttonClass = btnClass
   on:change
   on:keydown
   on:keyup
+  on:touchstart
+  on:touchend
+  on:touchcancel
   on:mouseenter
   on:mouseleave>
   <slot />
@@ -127,6 +130,9 @@ $: buttonClass = btnClass
   - on:change
   - on:keydown
   - on:keyup
+  - on:touchstart
+  - on:touchend
+  - on:touchcancel
   - on:mouseenter
   - on:mouseleave
   ## Example

package/dist/buttons/Button.svelte.d.ts

@@ -17,6 +17,9 @@ declare const __propDef: {
         change: Event;
         keydown: KeyboardEvent;
         keyup: KeyboardEvent;
+        touchstart: TouchEvent;
+        touchend: TouchEvent;
+        touchcancel: TouchEvent;
         mouseenter: MouseEvent;
         mouseleave: MouseEvent;
     } & {
@@ -61,6 +64,9 @@ export type ButtonSlots = typeof __propDef.slots;
  * - on:change
  * - on:keydown
  * - on:keyup
+ * - on:touchstart
+ * - on:touchend
+ * - on:touchcancel
  * - on:mouseenter
  * - on:mouseleave
  * ## Example

package/dist/buttons/Button.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/buttons/Button.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAGD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAgI3C,QAAA,MAAM,SAAS;;;;;;eADoN,MAAM,GAAG,SAAS;mBAAa,MAAM,GAAG,SAAS;;;;;;;;;;;;;;;;;;CACtM,CAAC;AAC/E,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AACH,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,oBAAoB,CAAC,WAAW,EAAE,YAAY,EAAE,WAAW,CAAC;CAC/F"}
+{"version":3,"file":"Button.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/buttons/Button.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAGD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAkI3C,QAAA,MAAM,SAAS;;;;;;eADoN,MAAM,GAAG,SAAS;mBAAa,MAAM,GAAG,SAAS;;;;;;;;;;;;;;;;;;;;;CACtM,CAAC;AAC/E,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgDG;AACH,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,oBAAoB,CAAC,WAAW,EAAE,YAAY,EAAE,WAAW,CAAC;CAC/F"}

package/dist/buttons/GradientButton.svelte

@@ -1,4 +1,4 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 import Button from './Button.svelte';
 import { getContext } from 'svelte';
 const group = getContext('group');
@@ -39,10 +39,10 @@ const coloredShadowClasses = {
     redToYellow: 'shadow-red-500/50 dark:shadow-red-800/80'
 };
 let gradientOutlineClass;
-$: gradientOutlineClass = classNames('inline-flex items-center justify-center w-full  !border-0', $$props.pill || '!rounded-md', 'bg-white !text-gray-900 dark:bg-gray-900 dark:!text-white', // this is limitation - no transparency
+$: gradientOutlineClass = twMerge('inline-flex items-center justify-center w-full  !border-0', $$props.pill || '!rounded-md', 'bg-white !text-gray-900 dark:bg-gray-900 dark:!text-white', // this is limitation - no transparency
 'hover:bg-transparent hover:!text-inherit', 'transition-all duration-75 ease-in group-hover:!bg-opacity-0 group-hover:!text-inherit');
 let divClass;
-$: divClass = classNames('p-0.5', gradientClasses[color], shadow && 'shadow-lg', shadow && coloredShadowClasses[color], group
+$: divClass = twMerge($$props.outline && 'p-0.5', gradientClasses[color], shadow && 'shadow-lg', shadow && coloredShadowClasses[color], group
     ? ($$props.pill && 'first:rounded-l-full last:rounded-r-full') ||
         'first:rounded-l-lg last:rounded-r-lg'
     : ($$props.pill && 'rounded-full') || 'rounded-lg', $$props.class);
@@ -64,6 +64,9 @@ $: divClass = classNames('p-0.5', gradientClasses[color], shadow && 'shadow-lg',
     on:change
     on:keydown
     on:keyup
+    on:touchstart
+    on:touchend
+    on:touchcancel
     on:mouseenter
     on:mouseleave><slot /></Button>
 {/if}
@@ -79,6 +82,9 @@ $: divClass = classNames('p-0.5', gradientClasses[color], shadow && 'shadow-lg',
   - on:change
   - on:keydown
   - on:keyup
+  - on:touchstart
+  - on:touchend
+  - on:touchcancel
   - on:mouseenter
   - on:mouseleave
   ## Example

package/dist/buttons/GradientButton.svelte.d.ts

@@ -10,6 +10,9 @@ declare const __propDef: {
         change: Event;
         keydown: KeyboardEvent;
         keyup: KeyboardEvent;
+        touchstart: TouchEvent;
+        touchend: TouchEvent;
+        touchcancel: TouchEvent;
         mouseenter: MouseEvent;
         mouseleave: MouseEvent;
     } & {
@@ -32,6 +35,9 @@ export type GradientButtonSlots = typeof __propDef.slots;
  * - on:change
  * - on:keydown
  * - on:keyup
+ * - on:touchstart
+ * - on:touchend
+ * - on:touchcancel
  * - on:mouseenter
  * - on:mouseleave
  * ## Example

package/dist/buttons/GradientButton.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GradientButton.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/buttons/GradientButton.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAgGD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,mBAAmB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACzD,MAAM,MAAM,oBAAoB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC3D,MAAM,MAAM,mBAAmB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEzD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,MAAM,CAAC,OAAO,OAAO,cAAe,SAAQ,oBAAoB,CAAC,mBAAmB,EAAE,oBAAoB,EAAE,mBAAmB,CAAC;CAC/H"}
+{"version":3,"file":"GradientButton.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/buttons/GradientButton.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAgGD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,mBAAmB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACzD,MAAM,MAAM,oBAAoB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC3D,MAAM,MAAM,mBAAmB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEzD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,CAAC,OAAO,OAAO,cAAe,SAAQ,oBAAoB,CAAC,mBAAmB,EAAE,oBAAoB,EAAE,mBAAmB,CAAC;CAC/H"}

package/dist/cards/Card.svelte

@@ -1,4 +1,4 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 import Frame from '../utils/Frame.svelte';
 export let href = undefined;
 export let horizontal = false;
@@ -23,9 +23,9 @@ const sizes = {
 let innerPdding;
 $: innerPdding = paddings[padding];
 let cardClass;
-$: cardClass = classNames('flex', sizes[size], reverse ? 'flex-col-reverse' : 'flex-col', horizontal && (reverse ? 'md:flex-row-reverse md:max-w-xl' : 'md:flex-row md:max-w-xl'), href && 'hover:bg-gray-100 dark:hover:bg-gray-700', !img && innerPdding, $$props.class);
+$: cardClass = twMerge('flex', sizes[size], reverse ? 'flex-col-reverse' : 'flex-col', horizontal && (reverse ? 'md:flex-row-reverse md:max-w-xl' : 'md:flex-row md:max-w-xl'), href && 'hover:bg-gray-100 dark:hover:bg-gray-700', !img && innerPdding, $$props.class);
 let imgClass;
-$: imgClass = classNames(reverse ? 'rounded-b-lg' : 'rounded-t-lg', horizontal && 'object-cover w-full h-96 md:h-auto md:w-48 md:rounded-none', horizontal && (reverse ? 'md:rounded-r-lg' : 'md:rounded-l-lg'));
+$: imgClass = twMerge(reverse ? 'rounded-b-lg' : 'rounded-t-lg', horizontal && 'object-cover w-full h-96 md:h-auto md:w-48 md:rounded-none', horizontal && (reverse ? 'md:rounded-r-lg' : 'md:rounded-l-lg'));
 </script>
 
 <Frame

package/dist/darkmode/DarkMode.svelte

@@ -1,4 +1,4 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 export let btnClass = 'text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5';
 export let size = 'md';
 const sizes = {
@@ -26,7 +26,7 @@ const toggleTheme = () => {
   aria-label="Dark mode"
   type="button"
   {...$$restProps}
-  class={classNames(btnClass, $$props.class)}>
+  class={twMerge(btnClass, $$props.class)}>
   <span class="hidden dark:block">
     <slot name="lightIcon">
       <svg class={sizes[size]} fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">

package/dist/drawer/Drawer.svelte

@@ -1,4 +1,4 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 import { fly, slide, blur, fade } from 'svelte/transition';
 import { clickOutside } from '../utils/clickOutside';
 export let activateClickOutside = true;
@@ -38,7 +38,7 @@ const placements = {
 const handleDrawer = () => {
     hidden = !hidden;
 };
-let backdropDivClass = classNames('fixed top-0 left-0 z-50 w-full h-full', backdrop && bgColor, backdrop && bgOpacity);
+let backdropDivClass = twMerge('fixed top-0 left-0 z-50 w-full h-full', backdrop && bgColor, backdrop && bgOpacity);
 </script>
 
 {#if !hidden}
@@ -52,7 +52,7 @@ let backdropDivClass = classNames('fixed top-0 left-0 z-50 w-full h-full', backd
       use:clickOutside={() => !hidden && handleDrawer()}
       {id}
       {...$$restProps}
-      class={classNames(divClass, width, position, placements[placement], $$props.class)}
+      class={twMerge(divClass, width, position, placements[placement], $$props.class)}
       transition:multiple={transitionParams}
       tabindex="-1"
       aria-controls={id}
@@ -63,7 +63,7 @@ let backdropDivClass = classNames('fixed top-0 left-0 z-50 w-full h-full', backd
     <div
       {id}
       {...$$restProps}
-      class={classNames(divClass, width, position, placements[placement], $$props.class)}
+      class={twMerge(divClass, width, position, placements[placement], $$props.class)}
       transition:multiple={transitionParams}
       tabindex="-1"
       aria-controls={id}

package/dist/dropdowns/Dropdown.svelte

@@ -1,10 +1,10 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 import Popper from '../utils/Popper.svelte';
 export let open = false;
 export let frameClass = '';
-export let headerClass = 'py-1 overflow-hidden rounded-t';
+export let headerClass = 'py-1 overflow-hidden rounded-t-lg';
 export let ulClass = 'py-1 w-44';
-export let footerClass = 'py-1 overflow-hidden rounded-b';
+export let footerClass = 'py-1 overflow-hidden rounded-b-lg';
 $: {
     // set default values
     $$restProps.arrow = $$restProps.arrow ?? false;
@@ -15,7 +15,7 @@ $: {
     $$restProps.rounded = $$restProps.rounded ?? true;
 }
 let popoverClass;
-$: popoverClass = classNames('divide-y divide-gray-100 dark:divide-gray-600', frameClass);
+$: popoverClass = twMerge('divide-y divide-gray-100 dark:divide-gray-600', frameClass);
 </script>
 
 <Popper activeContent {...$$restProps} class={popoverClass} on:show bind:open>
@@ -65,9 +65,9 @@ $: popoverClass = classNames('divide-y divide-gray-100 dark:divide-gray-600', fr
   ## Props
   @prop open: boolean = false;
   @prop frameClass: string = '';
-  @prop headerClass: string = 'py-1 overflow-hidden rounded-t';
+  @prop headerClass: string = 'py-1 overflow-hidden rounded-t-lg';
   @prop ulClass: string = 'py-1 w-44';
-  @prop footerClass: string = 'py-1 overflow-hidden rounded-b';
+  @prop footerClass: string = 'py-1 overflow-hidden rounded-b-lg';
   ## Example
   ```
   <script>

package/dist/dropdowns/Dropdown.svelte.d.ts

@@ -52,9 +52,9 @@ export type DropdownSlots = typeof __propDef.slots;
  * ## Props
  * @prop open: boolean = false;
  * @prop frameClass: string = '';
- * @prop headerClass: string = 'py-1 overflow-hidden rounded-t';
+ * @prop headerClass: string = 'py-1 overflow-hidden rounded-t-lg';
  * @prop ulClass: string = 'py-1 w-44';
- * @prop footerClass: string = 'py-1 overflow-hidden rounded-b';
+ * @prop footerClass: string = 'py-1 overflow-hidden rounded-b-lg';
  * ## Example
  * ```
  * <script>

package/dist/dropdowns/Dropdown.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/dropdowns/Dropdown.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAgDD,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AACH,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,oBAAoB,CAAC,aAAa,EAAE,cAAc,EAAE,aAAa,CAAC;CACvG"}
+{"version":3,"file":"Dropdown.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/dropdowns/Dropdown.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAkDD,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AACH,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,oBAAoB,CAAC,aAAa,EAAE,cAAc,EAAE,aAAa,CAAC;CACvG"}