flowbite-svelte 0.37.5 → 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,4 +1,4 @@
-<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';
@@ -12,7 +12,7 @@ const close = () => {
     dispatch('close'); // preferred name
 };
 let divClass;
-$: divClass = classNames(defaultClass, ($$slots.icon || dismissable) && 'flex items-center', $$props.class);
+$: divClass = twMerge(defaultClass, ($$slots.icon || dismissable) && 'flex items-center', $$props.class);
 $: {
     // set default values
     $$restProps.color = $$restProps.color ?? 'primary';
@@ -91,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.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;AAqED,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,5 +1,5 @@
 <script>import { createEventDispatcher } from 'svelte';
-import classNames from 'classnames';
+import { twMerge, twJoin } from 'tailwind-merge';
 import CloseButton from '../utils/CloseButton.svelte';
 export let color = 'primary';
 export let large = false;
@@ -55,7 +55,7 @@ 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 = {
@@ -71,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/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 = '';
@@ -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 &&

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgDG;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);

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,4 +1,4 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 import Popper from '../utils/Popper.svelte';
 export let open = false;
 export let frameClass = '';
@@ -15,7 +15,7 @@ $: {
     $$restProps.rounded = $$restProps.rounded ?? true;
 }
 let popoverClass;
-$: popoverClass = classNames('divide-y divide-gray-100 dark:divide-gray-600 rounded-lg', frameClass);
+$: popoverClass = twMerge('divide-y divide-gray-100 dark:divide-gray-600', frameClass);
 </script>
 
 <Popper activeContent {...$$restProps} class={popoverClass} on:show bind:open>

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"}

package/dist/dropdowns/DropdownDivider.svelte

@@ -1,8 +1,8 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 export let divClass = 'my-1 h-px bg-gray-100 dark:bg-gray-600';
 </script>
 
-<div {...$$restProps} class={classNames(divClass, $$props.class)} />
+<div {...$$restProps} class={twMerge(divClass, $$props.class)} />
 
 <!--
   @component

package/dist/dropdowns/DropdownHeader.svelte

@@ -1,10 +1,10 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 import DropdownDivider from './DropdownDivider.svelte';
 export let divClass = 'py-2 px-4 text-gray-700 dark:text-white';
 export let divider = true;
 </script>
 
-<div {...$$restProps} class={classNames(divClass, $$props.class)}>
+<div {...$$restProps} class={twMerge(divClass, $$props.class)}>
   <slot />
 </div>
 {#if divider}

package/dist/dropdowns/DropdownItem.svelte

@@ -1,9 +1,9 @@
 <script>import Wrapper from '../utils/Wrapper.svelte';
-import classNames from 'classnames';
+import { twMerge } from 'tailwind-merge';
 export let defaultClass = 'font-medium py-2 px-4 text-sm hover:bg-gray-100 dark:hover:bg-gray-600';
 export let href = undefined;
 let liClass;
-$: liClass = classNames(defaultClass, href ? 'block' : 'w-full text-left', $$props.class);
+$: liClass = twMerge(defaultClass, href ? 'block' : 'w-full text-left', $$props.class);
 let wrap = true;
 function init(node) {
     wrap = node.parentElement?.tagName === 'UL';

package/dist/footer/Footer.svelte

@@ -1,22 +1,26 @@
-<script>import classNames from 'classnames';
-export let customClass = '';
+<script>import { twMerge } from 'tailwind-merge';
 export let footerType = 'default';
-// using classNames dynamic class names, https://github.com/JedWatson/classnames#dynamic-class-names-with-es2015
+let styles = '';
+switch (footerType) {
+    case 'sitemap':
+        styles = 'bg-gray-800';
+        break;
+    case 'socialmedia':
+        styles = 'p-4 bg-white sm:p-6 dark:bg-gray-800';
+        break;
+    case 'logo':
+        styles = 'p-4 bg-white rounded-lg shadow md:px-6 md:py-8 dark:bg-gray-800';
+        break;
+    case 'default':
+        styles = 'p-4 bg-white rounded-lg shadow md:flex md:items-center md:justify-between md:p-6 dark:bg-gray-800';
+        break;
+}
+let footerClass = twMerge([styles, $$props.class]);
+console.log(footerClass);
 </script>
-
 <footer
   {...$$restProps}
-  class={classNames(
-    {
-      'bg-gray-800': footerType === 'sitemap',
-      'p-4 bg-white sm:p-6 dark:bg-gray-800': footerType === 'socialmedia',
-      'p-4 bg-white rounded-lg shadow md:px-6 md:py-8 dark:bg-gray-800': footerType === 'logo',
-      'p-4 bg-white rounded-lg shadow md:flex md:items-center md:justify-between md:p-6 dark:bg-gray-800':
-        footerType === 'default',
-      [`${customClass}`]: footerType === 'custom'
-    },
-    $$props.class
-  )}>
+  class={footerClass}>
   <slot />
 </footer>
 

package/dist/footer/Footer.svelte.d.ts

@@ -2,8 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        customClass?: string | undefined;
-        footerType?: "default" | "custom" | "sitemap" | "logo" | "socialmedia" | undefined;
+        footerType?: "default" | "sitemap" | "logo" | "socialmedia" | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/footer/Footer.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Footer.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/footer/Footer.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA4BD,QAAA,MAAM,SAAS;;;;;;;;;;;;CAA+D,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,oBAAoB,CAAC,WAAW,EAAE,YAAY,EAAE,WAAW,CAAC;CAC/F"}
+{"version":3,"file":"Footer.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/footer/Footer.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAqCD,QAAA,MAAM,SAAS;;;;;;;;;;;CAA+D,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,oBAAoB,CAAC,WAAW,EAAE,YAAY,EAAE,WAAW,CAAC;CAC/F"}

package/dist/footer/FooterBrand.svelte

@@ -1,4 +1,4 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 export let aClass = 'flex items-center';
 export let spanClass = 'self-center text-2xl font-semibold whitespace-nowrap dark:text-white';
 export let imgClass = 'mr-3 h-8';
@@ -10,7 +10,7 @@ export let target = undefined;
 </script>
 
 {#if href}
-  <a {...$$restProps} {href} {target} class={classNames(aClass, $$props.class)}>
+  <a {...$$restProps} {href} {target} class={twMerge(aClass, $$props.class)}>
     <img {src} class={imgClass} {alt} />
     <span class={spanClass}>{name}</span>
     <slot />

package/dist/footer/FooterCopyright.svelte

@@ -1,4 +1,4 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 export let spanClass = 'block text-sm text-gray-500 sm:text-center dark:text-gray-400';
 export let aClass = 'hover:underline';
 export let year = new Date().getFullYear();
@@ -8,7 +8,7 @@ export let target = undefined;
 export let copyrightMessage = 'All Rights Reserved.';
 </script>
 
-<span class={classNames(spanClass, $$props.class)}>
+<span class={twMerge(spanClass, $$props.class)}>
   &copy; {year}
   {#if href}
     <a {...$$restProps} {href} {target} class={aClass}>

package/dist/footer/FooterIcon.svelte

@@ -1,4 +1,4 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 export let href = '';
 export let ariaLabel = '';
 export let aClass = 'text-gray-500 hover:text-gray-900 dark:hover:text-white';
@@ -6,7 +6,7 @@ export let target = undefined;
 </script>
 
 {#if href}
-  <a {...$$restProps} {href} {target} aria-label={ariaLabel} class={classNames(aClass, $$props.class)}>
+  <a {...$$restProps} {href} {target} aria-label={ariaLabel} class={twMerge(aClass, $$props.class)}>
     <slot />
   </a>
 {:else}

package/dist/footer/FooterLink.svelte

@@ -1,11 +1,11 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 export let liClass = 'mr-4 last:mr-0 md:mr-6';
 export let aClass = 'hover:underline';
 export let href = '';
 export let target = undefined;
 </script>
 
-<li class={classNames(liClass, $$props.class)}>
+<li class={twMerge(liClass, $$props.class)}>
   <a {...$$restProps} {href} class={aClass} {target}>
     <slot />
   </a>

package/dist/footer/FooterLinkGroup.svelte

@@ -1,8 +1,8 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 export let ulClass = 'text-gray-600 dark:text-gray-400';
 </script>
 
-<ul class={classNames(ulClass, $$props.class)}>
+<ul class={twMerge(ulClass, $$props.class)}>
   <slot />
 </ul>
 

package/dist/forms/Checkbox.svelte

@@ -1,4 +1,5 @@
-<script>import { getContext } from 'svelte';
+<script>import { twMerge } from 'tailwind-merge';
+import { getContext } from 'svelte';
 import { labelClass, inputClass } from './Radio.svelte';
 import Label from './Label.svelte';
 // properties forwarding
@@ -8,6 +9,7 @@ export let inline = false;
 export let group = [];
 export let value = 'on';
 export let checked = undefined;
+export let spacing = 'mr-2';
 // tinted if put in component having its own background
 let background = getContext('background');
 // react on external group changes
@@ -62,7 +64,9 @@ function onChange() {
     on:change
     {value}
     {...$$restProps}
-    class={inputClass(custom, color, true, background, $$slots.default || $$props.class)} /><slot />
+    class={twMerge(
+      spacing,
+      inputClass(custom, color, true, background, $$slots.default || $$props.class))} /><slot />
 </Label>
 
 <!--

package/dist/forms/Checkbox.svelte.d.ts

@@ -9,6 +9,7 @@ declare const __propDef: {
         group?: (string | number)[] | undefined;
         value?: string | number | undefined;
         checked?: boolean | undefined;
+        spacing?: string | undefined;
     };
     events: {
         keyup: KeyboardEvent;

package/dist/forms/Checkbox.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/forms/Checkbox.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAED,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AA+D9C,QAAA,MAAM,SAAS;;;;;;;;kBADkO,OAAO,GAAG,SAAS;;;;;;;;;;;;;;;;;;;;CACtL,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AACH,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,oBAAoB,CAAC,aAAa,EAAE,cAAc,EAAE,aAAa,CAAC;CACvG"}
+{"version":3,"file":"Checkbox.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/forms/Checkbox.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAGD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAmE9C,QAAA,MAAM,SAAS;;;;;;;;kBADqP,OAAO,GAAG,SAAS;;;;;;;;;;;;;;;;;;;;;CACzM,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AACH,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,oBAAoB,CAAC,aAAa,EAAE,cAAc,EAAE,aAAa,CAAC;CACvG"}

package/dist/forms/Dropzone.svelte

@@ -1,4 +1,4 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 export let value = '';
 export let files = undefined;
 export let defaultClass = 'flex flex-col justify-center items-center w-full h-64 bg-gray-50 rounded-lg border-2 border-gray-300 border-dashed cursor-pointer dark:hover:bg-bray-800 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600';
@@ -12,7 +12,7 @@ function keydown(ev) {
 </script>
 
 <button
-  class={classNames(defaultClass, $$props.class)}
+  class={twMerge(defaultClass, $$props.class)}
   on:keydown={keydown}
   on:focus
   on:blur

package/dist/forms/Fileupload.svelte

@@ -1,11 +1,11 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 import Input from './Input.svelte';
 export let value = '';
 export let files = undefined;
 export let inputClass = 'border !p-0 dark:text-gray-400';
 </script>
 
-<Input {...$$restProps} class={classNames(inputClass, $$props.class)} let:props>
+<Input {...$$restProps} class={twMerge(inputClass, $$props.class)} let:props>
   <input
     type="file"
     on:change