flowbite-svelte 0.37.5 → 0.38.1

package/dist/forms/FloatingLabelInput.svelte

@@ -1,4 +1,4 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 import generateId from '../utils/generateId.js';
 export let id = generateId();
 export let style = 'standard';
@@ -90,7 +90,7 @@ function setType(node, _type) {
     on:paste
     use:setType={type}
     placeholder=" "
-    class={classNames(
+    class={twMerge(
       inputClasses[style],
       inputColorClasses[color],
       inputSizes[style][size],
@@ -99,7 +99,7 @@ function setType(node, _type) {
 
   <label
     for={id}
-    class={classNames(
+    class={twMerge(
       labelClasses[style],
       labelColorClasses[color],
       labelSizes[style][size],

package/dist/forms/Helper.svelte

@@ -1,4 +1,4 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 export let helperClass = 'text-xs font-normal text-gray-500 dark:text-gray-300';
 export let color = 'gray';
 const colorClasses = {
@@ -9,7 +9,7 @@ const colorClasses = {
 };
 </script>
 
-<p {...$$restProps} class={classNames(helperClass, colorClasses[color], $$props.class)}>
+<p {...$$restProps} class={twMerge(helperClass, colorClasses[color], $$props.class)}>
   <slot />
 </p>
 

package/dist/forms/Input.svelte

@@ -4,7 +4,7 @@
 </script>
 
 <script>import Wrapper from '../utils/Wrapper.svelte';
-import classNames from 'classnames';
+import { twMerge } from 'tailwind-merge';
 import { getContext } from 'svelte';
 export let type = 'text';
 export let value = undefined;
@@ -48,7 +48,18 @@ $: _size = size || clampSize(group?.size) || 'md';
 let inputClass;
 $: {
     const _color = color === 'base' && background ? 'tinted' : color;
-    inputClass = classNames(defaultClass, $$slots.left && leftPadding[_size], $$slots.right && rightPadding[_size], ringClasses[color], colorClasses[_color], borderClasses[_color], inputPadding[_size], textSizes[_size], group || 'rounded-lg', group && 'first:rounded-l-lg last:rounded-r-lg', group && 'border-l-0 first:border-l last:border-r', $$props.class);
+    inputClass = twMerge([
+        defaultClass,
+        ($$slots.left && leftPadding[_size] || $$slots.right && rightPadding[_size]) || inputPadding[_size],
+        ringClasses[color],
+        colorClasses[_color],
+        borderClasses[_color],
+        textSizes[_size],
+        group || 'rounded-lg',
+        group && 'first:rounded-l-lg last:rounded-r-lg',
+        group && 'border-l-0 first:border-l last:border-r',
+        $$props.class
+    ]);
 }
 let floatClass = 'flex absolute inset-y-0 items-center text-gray-500 dark:text-gray-400';
 </script>

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

@@ -1 +1 @@
-{"version":3,"file":"Input.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/forms/Input.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AACC,OAAO,KAAK,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AACzD,wBAAgB,SAAS,CAAC,CAAC,EAAE,QAAQ,sBAEpC;AAMH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAgG1C,QAAA,MAAM,SAAS;;;;gBADoH,GAAG;eAAS,YAAY,GAAG,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACzF,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwDG;AACH,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,oBAAoB,CAAC,UAAU,EAAE,WAAW,EAAE,UAAU,CAAC;CAC3F"}
+{"version":3,"file":"Input.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/forms/Input.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AACC,OAAO,KAAK,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AACzD,wBAAgB,SAAS,CAAC,CAAC,EAAE,QAAQ,sBAEpC;AAMH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AA8F1C,QAAA,MAAM,SAAS;;;;gBADoH,GAAG;eAAS,YAAY,GAAG,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACzF,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwDG;AACH,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,oBAAoB,CAAC,UAAU,EAAE,WAAW,EAAE,UAAU,CAAC;CAC3F"}

package/dist/forms/InputAddon.svelte

@@ -1,4 +1,4 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 import { getContext } from 'svelte';
 import { clampSize } from './Input.svelte';
 export let size = undefined;
@@ -21,7 +21,7 @@ const textSizes = { sm: 'sm:text-xs', md: 'text-sm', lg: 'sm:text-base' };
 const prefixPadding = { sm: 'px-2', md: 'px-3', lg: 'px-4' };
 // size: explicit, inherited, default
 $: _size = size || clampSize(group?.size) || 'md';
-$: divClass = classNames(textSizes[_size], prefixPadding[_size], background ? borderClasses['tinted'] : borderClasses['base'], 'text-gray-500 bg-gray-200', background ? darkBgClasses.tinted : darkBgClasses.base, background ? divider.tinted : divider.base, 'inline-flex items-center border-t border-b first:border-l border-r', 'first:rounded-l-lg last:rounded-r-lg', $$props.class);
+$: divClass = twMerge(textSizes[_size], prefixPadding[_size], background ? borderClasses['tinted'] : borderClasses['base'], 'text-gray-500 bg-gray-200', background ? darkBgClasses.tinted : darkBgClasses.base, background ? divider.tinted : divider.base, 'inline-flex items-center border-t border-b first:border-l border-r', 'first:rounded-l-lg last:rounded-r-lg', $$props.class);
 </script>
 
 <div {...$$restProps} class={divClass}>

package/dist/forms/Label.svelte

@@ -1,4 +1,4 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 export let color = 'gray';
 export let defaultClass = 'text-sm font-medium block';
 export let show = true;
@@ -14,7 +14,7 @@ $: {
     const control = node?.control;
     color = control?.disabled ? 'disabled' : color;
 }
-$: labelClass = classNames(defaultClass, colorClasses[color], $$props.class);
+$: labelClass = twMerge(defaultClass, colorClasses[color], $$props.class);
 </script>
 
 {#if show}

package/dist/forms/Radio.svelte

@@ -1,5 +1,5 @@
 <script context="module">// this part is shared between Radio and Checkbox
-import classNames from 'classnames';
+import { twMerge } from 'tailwind-merge';
 const colorClasses = {
     primary: 'text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600',
     secondary: 'text-secondary-600 focus:ring-secondary-500 dark:focus:ring-secondary-600',
@@ -11,8 +11,9 @@ const colorClasses = {
     orange: 'text-orange-500 focus:ring-orange-500 dark:focus:ring-orange-600',
     blue: 'text-blue-600 focus:ring-blue-500 dark:focus:ring-blue-600'
 };
-export const labelClass = (inline, extraClass) => classNames(inline ? 'inline-flex' : 'flex', 'items-center', extraClass);
-export const inputClass = (custom, color, rounded, tinted, extraClass) => classNames('w-4 h-4 bg-gray-100 border-gray-300 dark:ring-offset-gray-800 focus:ring-2', extraClass === true && 'mr-2', tinted ? 'dark:bg-gray-600 dark:border-gray-500' : 'dark:bg-gray-700 dark:border-gray-600', custom && 'sr-only peer', rounded && 'rounded', colorClasses[color], extraClass);
+export const labelClass = (inline, extraClass) => twMerge(inline ? 'inline-flex' : 'flex', 'items-center', extraClass);
+export let spacing = 'mr-2';
+export const inputClass = (custom, color, rounded, tinted, extraClass) => twMerge('w-4 h-4 bg-gray-100 border-gray-300 dark:ring-offset-gray-800 focus:ring-2', spacing, tinted ? 'dark:bg-gray-600 dark:border-gray-500' : 'dark:bg-gray-700 dark:border-gray-600', custom && 'sr-only peer', rounded && 'rounded', colorClasses[color], extraClass);
 </script>
 
 <script>import { getContext } from 'svelte';

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

@@ -1,6 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
 export declare const labelClass: (inline: boolean, extraClass: string) => string;
-export declare const inputClass: (custom: boolean, color: FormColorType, rounded: boolean, tinted: boolean, extraClass: string | boolean) => string;
+export declare let spacing: string;
+export declare const inputClass: (custom: boolean, color: FormColorType, rounded: boolean, tinted: boolean, extraClass: string) => string;
 import type { FormColorType } from '../types';
 declare const __propDef: {
     props: {

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

@@ -1 +1 @@
-{"version":3,"file":"Radio.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/forms/Radio.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAgBC,eAAO,MAAM,UAAU,WAAY,OAAO,cAAc,MAAM,WACW,CAAC;AAE1E,eAAO,MAAM,UAAU,WACb,OAAO,SACR,aAAa,WACX,OAAO,UACR,OAAO,cACH,MAAM,GAAG,OAAO,WAU3B,CAAC;AAIN,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AA4B9C,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;CAA+D,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AACH,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,oBAAoB,CAAC,UAAU,EAAE,WAAW,EAAE,UAAU,CAAC;CAC3F"}
+{"version":3,"file":"Radio.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/forms/Radio.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAgBC,eAAO,MAAM,UAAU,WAAY,OAAO,cAAc,MAAM,WACM,CAAC;AACrE,eAAO,IAAI,OAAO,EAAE,MAAe,CAAC;AAEpC,eAAO,MAAM,UAAU,WACb,OAAO,SACR,aAAa,WACX,OAAO,UACR,OAAO,cACH,MAAM,WAUjB,CAAC;AAIN,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AA4B9C,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;CAA+D,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AACH,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,oBAAoB,CAAC,UAAU,EAAE,WAAW,EAAE,UAAU,CAAC;CAC3F"}

package/dist/forms/Range.svelte

@@ -1,4 +1,4 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 export let value;
 export let size = 'md';
 const sizes = {
@@ -7,7 +7,7 @@ const sizes = {
     lg: 'h-3 range-lg'
 };
 let inputClass;
-$: inputClass = classNames('w-full bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700', sizes[size] ?? sizes.md, $$props.class);
+$: inputClass = twMerge('w-full bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700', sizes[size] ?? sizes.md, $$props.class);
 </script>
 
 <input

package/dist/forms/Select.svelte

@@ -1,4 +1,4 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 export let items = [];
 export let value = undefined;
 export let placeholder = 'Choose option ...';
@@ -13,7 +13,7 @@ const sizes = {
     lg: 'text-base py-3 px-4'
 };
 let selectClass;
-$: selectClass = classNames(common, underline ? underlineClass : defaultClass, sizes[size], underline && '!px-0', $$restProps.class);
+$: selectClass = twMerge(common, underline ? underlineClass : defaultClass, sizes[size], underline && '!px-0', $$restProps.class);
 </script>
 
 <select {...$$restProps} bind:value class={selectClass} on:change on:contextmenu on:input>

package/dist/forms/Textarea.svelte

@@ -1,4 +1,4 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 import { getContext } from 'svelte';
 import Wrapper from '../utils/Wrapper.svelte';
 const background = getContext('background');
@@ -8,12 +8,12 @@ export let unWrappedClass = 'p-2.5 text-sm focus:ring-primary-500 focus:border-p
 let wrapped;
 $: wrapped = $$slots.header || $$slots.footer;
 let wrapperClass;
-$: wrapperClass = classNames('w-full rounded-lg', background ? 'bg-white dark:bg-gray-800' : 'bg-gray-50 dark:bg-gray-700', 'text-gray-900 dark:placeholder-gray-400 dark:text-white ', 'border border-gray-200 dark:border-gray-600', $$props.class);
+$: wrapperClass = twMerge('w-full rounded-lg', background ? 'bg-white dark:bg-gray-800' : 'bg-gray-50 dark:bg-gray-700', 'text-gray-900 dark:placeholder-gray-400 dark:text-white ', 'border border-gray-200 dark:border-gray-600', $$props.class);
 let textareaClass;
-$: textareaClass = wrapped ? classNames(wrappedClass) : classNames(wrapperClass, unWrappedClass);
-const headerClass = (header) => classNames(header ? 'border-b' : 'border-t', 'py-2 px-3 border-gray-200 dark:border-gray-600');
+$: textareaClass = wrapped ? wrappedClass : twMerge(wrapperClass, unWrappedClass);
+const headerClass = (header) => twMerge(header ? 'border-b' : 'border-t', 'py-2 px-3 border-gray-200 dark:border-gray-600');
 let innerWrapperClass;
-$: innerWrapperClass = classNames('py-2 px-4 bg-white dark:bg-gray-800', $$slots.footer || 'rounded-b-lg', $$slots.header || 'rounded-t-lg');
+$: innerWrapperClass = twMerge('py-2 px-4 bg-white dark:bg-gray-800', $$slots.footer ? 'rounded-b-lg' : '', $$slots.header ? 'rounded-t-lg' : '');
 </script>
 
 <Wrapper show={wrapped} class={wrapperClass}>

package/dist/forms/Toggle.svelte

@@ -1,5 +1,5 @@
 <script>import { getContext } from 'svelte';
-import classNames from 'classnames';
+import { twMerge } from 'tailwind-merge';
 import Checkbox from './Checkbox.svelte';
 export let size = 'default';
 export let group = [];
@@ -27,7 +27,7 @@ const sizes = {
     custom: customSize
 };
 let divClass;
-$: divClass = classNames(common, background ? 'dark:bg-gray-600 dark:border-gray-500' : 'dark:bg-gray-700 dark:border-gray-600', colors[$$restProps.color ?? 'primary'], sizes[size], 'relative');
+$: divClass = twMerge(common, background ? 'dark:bg-gray-600 dark:border-gray-500' : 'dark:bg-gray-700 dark:border-gray-600', colors[$$restProps.color ?? 'primary'], sizes[size], 'relative');
 </script>
 
 <Checkbox custom {...$$restProps} class={$$props.class} {value} bind:checked bind:group on:click on:change>

package/dist/gallery/Gallery.svelte

@@ -1,7 +1,7 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 export let items = [];
 export let imgClass = 'h-auto max-w-full rounded-lg';
-$: divClass = classNames('grid', $$props.class);
+$: divClass = twMerge('grid', $$props.class);
 function init(node) {
     if (getComputedStyle(node).gap === 'normal')
         node.style.gap = 'inherit';

package/dist/indicators/Indicator.svelte

@@ -1,4 +1,4 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 export let color = 'gray';
 export let rounded = false;
 export let size = 'md';
@@ -54,7 +54,7 @@ const offsets = {
     'bottom-right': 'translate-x-1/3 translate-y-1/3'
 };
 let dotClass;
-$: dotClass = classNames('flex-shrink-0', rounded ? 'rounded' : 'rounded-full', border && 'border-2 border-white dark:border-gray-800', sizes[size], colors[color], $$slots.default && 'inline-flex items-center justify-center', placement && 'absolute ' + placements[placement], placement && offset && offsets[placement], $$props.class);
+$: dotClass = twMerge('flex-shrink-0', rounded ? 'rounded' : 'rounded-full', border && 'border-2 border-white dark:border-gray-800', sizes[size], colors[color], $$slots.default && 'inline-flex items-center justify-center', placement && 'absolute ' + placements[placement], placement && offset && offsets[placement], $$props.class);
 </script>
 
 <div class={dotClass}><slot /></div>

package/dist/kbd/ArrowKeyDown.svelte

@@ -1,10 +1,10 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 export let svgClass = 'w-4 h-4';
 </script>
 
 <svg
   {...$$restProps}
-  class={classNames(svgClass, $$props.class)}
+  class={twMerge(svgClass, $$props.class)}
   aria-hidden="true"
   fill="currentColor"
   xmlns="http://www.w3.org/2000/svg"

package/dist/kbd/ArrowKeyLeft.svelte

@@ -1,10 +1,10 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 export let svgClass = 'w-4 h-4';
 </script>
 
 <svg
   {...$$restProps}
-  class={classNames(svgClass, $$props.class)}
+  class={twMerge(svgClass, $$props.class)}
   aria-hidden="true"
   fill="currentColor"
   xmlns="http://www.w3.org/2000/svg"

package/dist/kbd/ArrowKeyRight.svelte

@@ -1,10 +1,10 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 export let svgClass = 'w-4 h-4';
 </script>
 
 <svg
   {...$$restProps}
-  class={classNames(svgClass, $$props.class)}
+  class={twMerge(svgClass, $$props.class)}
   aria-hidden="true"
   fill="currentColor"
   xmlns="http://www.w3.org/2000/svg"

package/dist/kbd/ArrowKeyUp.svelte

@@ -1,10 +1,10 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 export let svgClass = 'w-4 h-4';
 </script>
 
 <svg
   {...$$restProps}
-  class={classNames(svgClass, $$props.class)}
+  class={twMerge(svgClass, $$props.class)}
   aria-hidden="true"
   fill="currentColor"
   xmlns="http://www.w3.org/2000/svg"

package/dist/kbd/Kbd.svelte

@@ -1,8 +1,8 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 export let kbdClass = 'text-xs font-semibold text-gray-800 bg-gray-100 border border-gray-200 rounded-lg dark:bg-gray-600 dark:text-gray-100 dark:border-gray-500';
 </script>
 
-<kbd class={classNames(kbdClass, $$props.class)}>
+<kbd class={twMerge(kbdClass, $$props.class)}>
   <slot />
 </kbd>
 

package/dist/list-group/Listgroup.svelte

@@ -1,5 +1,5 @@
 <script>import { setContext } from 'svelte';
-import classNames from 'classnames';
+import { twMerge } from 'tailwind-merge';
 import ListgroupItem from './ListgroupItem.svelte';
 import Frame from '../utils/Frame.svelte';
 export let items = [];
@@ -7,7 +7,7 @@ export let active = false;
 export let defaultClass = 'divide-y divide-gray-200 dark:divide-gray-600';
 $: setContext('active', active);
 let groupClass;
-$: groupClass = classNames(defaultClass, $$props.class);
+$: groupClass = twMerge(defaultClass, $$props.class);
 </script>
 
 <Frame tag={active ? 'div' : 'ul'} {...$$restProps} rounded border class={groupClass}>

package/dist/list-group/ListgroupItem.svelte

@@ -1,5 +1,5 @@
 <script>import { getContext } from 'svelte';
-import classNames from 'classnames';
+import { twMerge } from 'tailwind-merge';
 export let active = getContext('active');
 export let current = false;
 export let disabled = false;
@@ -18,7 +18,7 @@ const states = {
 let state;
 $: state = disabled ? 'disabled' : current ? 'current' : 'normal';
 let itemClass;
-$: itemClass = classNames(itemDefaultClass, states[state], active && state === 'disabled' && 'cursor-not-allowed', active && state === 'normal' && hoverClass, active && state === 'normal' && focusClass, $$props.class);
+$: itemClass = twMerge(itemDefaultClass, states[state], active && state === 'disabled' && 'cursor-not-allowed', active && state === 'normal' && hoverClass, active && state === 'normal' && focusClass, $$props.class);
 </script>
 
 {#if !active}

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');
 </script>
 
 <Popper

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';
@@ -73,7 +73,7 @@ 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
@@ -86,7 +86,7 @@ function handleKeys(e) {
 
 {#if open}
   <!-- backdrop -->
-  <div class={classNames('fixed inset-0 z-40', backdropClasses)} />
+  <div class={twMerge('fixed inset-0 z-40', backdropClasses)} />
   <!-- dialog -->
   <div
     on:keydown={handleKeys}
@@ -94,7 +94,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()
     )}

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/NavHamburger.svelte

@@ -1,10 +1,10 @@
 <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';
 </script>
 
-<ToolbarButton name="Open main menu" on:click {...$$restProps} class={classNames(btnClass, $$props.class)}>
+<ToolbarButton name="Open main menu" on:click {...$$restProps} class={twMerge(btnClass, $$props.class)}>
   <Menu class="h-6 w-6 shrink-0" />
 </ToolbarButton>
 

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,10 +1,10 @@
 <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';
 </script>
 
-<ToolbarButton name="Open main menu" on:click {...$$restProps} class={classNames(btnClass, $$props.class)}>
+<ToolbarButton name="Open main menu" on:click {...$$restProps} class={twMerge(btnClass, $$props.class)}>
   <SidebarMenu class="h-6 w-6 shrink-0" variation="solid" />
 </ToolbarButton>
 

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,9 +14,9 @@ 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);
 </script>

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;
@@ -13,8 +13,8 @@ let toggle = () => {
 };
 </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(navDivClass, (fluid && 'w-full') || 'container')}>
     <slot {hidden} {toggle} />
   </div>
 </Frame>

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 = [];
@@ -18,11 +18,11 @@ 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')}>
+        class={twJoin(normalClass, table ? 'rounded-l' : 'rounded-l-lg')}>
         <slot name="prev">Previous</slot>
       </PaginationItem>
     </li>
@@ -46,7 +46,7 @@ const next = () => {
       </li>
     {/each}
     <li>
-      <PaginationItem on:click={next} class={classNames(normalClass, table ? 'rounded-r' : 'rounded-r-lg')}>
+      <PaginationItem on:click={next} class={twJoin(normalClass, table ? 'rounded-r' : 'rounded-r-lg')}>
         <slot name="next">Next</slot>
       </PaginationItem>
     </li>

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,4 +1,4 @@
-<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;
@@ -19,18 +19,19 @@ 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.class)}>
+    <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('w-full bg-gray-200 rounded-full dark:bg-gray-700', 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.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"}