flowbite-svelte 0.37.5 → 0.38.2

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';

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;AAiED,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,29 +1,27 @@
-<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';
 export let dismissable = true;
 export let bannerType = 'default';
-export let divDefault = 'z-10 flex justify-between p-4 dark:bg-gray-700 dark:border-gray-600';
-export let insideDiv = 'flex';
+export let divClass = 'z-10 flex justify-between p-4 dark:bg-gray-700 dark:border-gray-600';
+export let innerClass = 'flex';
 const divClasses = {
     default: 'top-0 left-0 w-full border-b border-gray-200 bg-gray-50',
     bottom: 'bottom-0 left-0 w-full border-t border-gray-200 bg-gray-50',
     cta: 'flex-col md:flex-row  w-[calc(100%-2rem)] -translate-x-1/2 bg-white border border-gray-100 rounded-lg shadow-sm lg:max-w-7xl left-1/2 top-6',
     signup: 'top-0 left-0 w-full border-b border-gray-200 bg-gray-50',
-    info: 'top-0 left-0 flex-col w-full border-b border-gray-200 md:flex-row bg-gray-50',
-    custom: ''
+    info: 'top-0 left-0 flex-col w-full border-b border-gray-200 md:flex-row bg-gray-50'
 };
 const insideDivClasses = {
     default: 'items-center mx-auto',
     bottom: 'items-center mx-auto',
     cta: 'flex-col items-start mb-3 mr-4 md:items-center md:flex-row md:mb-0',
     signup: 'items-center flex-shrink-0 w-full mx-auto sm:w-auto',
-    info: 'items-center flex-shrink-0',
-    custom: ''
+    info: 'items-center flex-shrink-0'
 };
-$: divClass = classNames(position, divDefault, divClasses[bannerType], $$props.outerDiv);
-$: div2Class = classNames(insideDiv, insideDivClasses[bannerType], $$props.innerDiv);
+$: divClass = twMerge(position, divClass, divClasses[bannerType], $$props.classDiv);
+$: div2Class = twMerge(innerClass, insideDivClasses[bannerType], $$props.classInner);
 let show = true;
 $: handleHide = () => {
     show = !show;
@@ -69,8 +67,8 @@ $: handleHide = () => {
   @prop id: string = 'sticky-banner';
   @prop position: 'static' | 'fixed' | 'absolute' | 'relative' | 'sticky' = 'sticky';
   @prop dismissable: boolean = true;
-  @prop bannerType: 'default' | 'bottom' | 'cta' | 'signup' | 'info' | 'custom' = 'default';
-  @prop divDefault: string = 'z-10 flex justify-between p-4 dark:bg-gray-700 dark:border-gray-600';
+  @prop bannerType: 'default' | 'bottom' | 'cta' | 'signup' | 'info' = 'default';
+  @prop divClass: string = 'z-10 flex justify-between p-4 dark:bg-gray-700 dark:border-gray-600';
   @prop insideDiv: string = 'flex';
   ## Event
   - on:click

package/dist/banner/Banner.svelte.d.ts

@@ -5,9 +5,9 @@ declare const __propDef: {
         id?: string | undefined;
         position?: "static" | "fixed" | "absolute" | "relative" | "sticky" | undefined;
         dismissable?: boolean | undefined;
-        bannerType?: "default" | "custom" | "bottom" | "cta" | "signup" | "info" | undefined;
-        divDefault?: string | undefined;
-        insideDiv?: string | undefined;
+        bannerType?: "default" | "bottom" | "cta" | "signup" | "info" | undefined;
+        divClass?: string | undefined;
+        innerClass?: string | undefined;
     };
     events: {
         click: MouseEvent;
@@ -42,8 +42,8 @@ export type BannerSlots = typeof __propDef.slots;
  * @prop id: string = 'sticky-banner';
  * @prop position: 'static' | 'fixed' | 'absolute' | 'relative' | 'sticky' = 'sticky';
  * @prop dismissable: boolean = true;
- * @prop bannerType: 'default' | 'bottom' | 'cta' | 'signup' | 'info' | 'custom' = 'default';
- * @prop divDefault: string = 'z-10 flex justify-between p-4 dark:bg-gray-700 dark:border-gray-600';
+ * @prop bannerType: 'default' | 'bottom' | 'cta' | 'signup' | 'info' = 'default';
+ * @prop divClass: string = 'z-10 flex justify-between p-4 dark:bg-gray-700 dark:border-gray-600';
  * @prop insideDiv: string = 'flex';
  * ## Event
  * - on:click

package/dist/banner/Banner.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Banner.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/banner/Banner.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA2DD,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AACH,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,oBAAoB,CAAC,WAAW,EAAE,YAAY,EAAE,WAAW,CAAC;CAC/F"}
+{"version":3,"file":"Banner.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/banner/Banner.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAyDD,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AACH,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,oBAAoB,CAAC,WAAW,EAAE,YAAY,EAAE,WAAW,CAAC;CAC/F"}

package/dist/bottom-nav/BottomNav.svelte

@@ -1,11 +1,9 @@
 <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';
-export let innerDefault = 'grid h-full max-w-lg mx-auto';
-export let outerCustom = '';
-export let innerCustom = '';
+export let outerClass = 'w-full z-50 border-gray-200 dark:bg-gray-700 dark:border-gray-600';
+export let innerClass = 'grid h-full max-w-lg mx-auto';
 setContext('navType', navType);
 const outerDivClasses = {
     default: 'bottom-0 left-0 h-16 bg-white border-t',
@@ -15,8 +13,7 @@ const outerDivClasses = {
     group: 'bottom-0 -translate-x-1/2 bg-white border-t left-1/2',
     card: 'bottom-0 left-0 h-16 bg-white border-t',
     meeting: 'bottom-0 left-0 grid h-16 grid-cols-1 px-8 bg-white border-t md:grid-cols-3',
-    video: 'bottom-0 left-0 grid h-24 grid-cols-1 px-8 bg-white border-t md:grid-cols-3',
-    custom: outerCustom
+    video: 'bottom-0 left-0 grid h-24 grid-cols-1 px-8 bg-white border-t md:grid-cols-3'
 };
 const innerDivClasses = {
     default: '',
@@ -26,16 +23,15 @@ const innerDivClasses = {
     group: '',
     card: '',
     meeting: 'flex items-center justify-center mx-auto',
-    video: 'flex items-center w-full',
-    custom: innerCustom
+    video: 'flex items-center w-full'
 };
-$: outerClass = classNames(position, outerDefault, outerDivClasses[navType], $$props.outerDiv);
-$: innerClass = classNames(innerDefault, innerDivClasses[navType], $$props.innerDiv);
+$: outerCls = twMerge(position, outerClass, outerDivClasses[navType], $$props.classOuter);
+$: innerCls = twMerge(innerClass, innerDivClasses[navType], $$props.classInner);
 </script>
 
-<div {...$$restProps} class={outerClass}>
+<div {...$$restProps} class={outerCls}>
   <slot name="header" />
-  <div class={innerClass}>
+  <div class={innerCls}>
     <slot />
   </div>
 </div>
@@ -53,8 +49,8 @@ $: innerClass = classNames(innerDefault, innerDivClasses[navType], $$props.inner
   ## Props
   @prop position: 'static' | 'fixed' | 'absolute' | 'relative' | 'sticky' = 'fixed';
   @prop navType:| 'default' | 'border' | 'application' | 'pagination' | 'group' | 'card' | 'meeting' | 'video' | 'custom' = 'default';
-  @prop outerDefault: string = 'w-full z-50 border-gray-200 dark:bg-gray-700 dark:border-gray-600';
-  @prop innerDefault: string = 'grid h-full max-w-lg mx-auto';
+  @prop outerClass: string = 'w-full z-50 border-gray-200 dark:bg-gray-700 dark:border-gray-600';
+  @prop innerClass: string = 'grid h-full max-w-lg mx-auto';
   @prop outerCustom: string = '';
   @prop innerCustom: string = '';
   ## Example

package/dist/bottom-nav/BottomNav.svelte.d.ts

@@ -3,11 +3,9 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         position?: "static" | "fixed" | "absolute" | "relative" | "sticky" | undefined;
-        navType?: "default" | "border" | "application" | "group" | "custom" | "pagination" | "card" | "meeting" | "video" | undefined;
-        outerDefault?: string | undefined;
-        innerDefault?: string | undefined;
-        outerCustom?: string | undefined;
-        innerCustom?: string | undefined;
+        navType?: "default" | "border" | "application" | "group" | "pagination" | "card" | "meeting" | "video" | undefined;
+        outerClass?: string | undefined;
+        innerClass?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -32,8 +30,8 @@ export type BottomNavSlots = typeof __propDef.slots;
  * ## Props
  * @prop position: 'static' | 'fixed' | 'absolute' | 'relative' | 'sticky' = 'fixed';
  * @prop navType:| 'default' | 'border' | 'application' | 'pagination' | 'group' | 'card' | 'meeting' | 'video' | 'custom' = 'default';
- * @prop outerDefault: string = 'w-full z-50 border-gray-200 dark:bg-gray-700 dark:border-gray-600';
- * @prop innerDefault: string = 'grid h-full max-w-lg mx-auto';
+ * @prop outerClass: string = 'w-full z-50 border-gray-200 dark:bg-gray-700 dark:border-gray-600';
+ * @prop innerClass: string = 'grid h-full max-w-lg mx-auto';
  * @prop outerCustom: string = '';
  * @prop innerCustom: string = '';
  * ## Example

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

@@ -1 +1 @@
-{"version":3,"file":"BottomNav.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/bottom-nav/BottomNav.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA0ED,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACpD,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACtD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEpD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CG;AACH,MAAM,CAAC,OAAO,OAAO,SAAU,SAAQ,oBAAoB,CAAC,cAAc,EAAE,eAAe,EAAE,cAAc,CAAC;CAC3G"}
+{"version":3,"file":"BottomNav.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/bottom-nav/BottomNav.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAoED,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACpD,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACtD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEpD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CG;AACH,MAAM,CAAC,OAAO,OAAO,SAAU,SAAQ,oBAAoB,CAAC,cAAc,EAAE,eAAe,EAAE,cAAc,CAAC;CAC3G"}

package/dist/bottom-nav/BottomNavHeader.svelte

@@ -1,9 +1,10 @@
-<script>export let outerClass = 'w-full';
+<script>import { twMerge } from 'tailwind-merge';
+export let outerClass = 'w-full';
 export let innerClass = 'grid max-w-xs grid-cols-3 gap-1 p-1 mx-auto my-2 bg-gray-100 rounded-lg dark:bg-gray-600';
 </script>
 
-<div class={outerClass} {...$$restProps}>
-  <div class={innerClass} role="group">
+<div class={twMerge(outerClass, $$props.classOuter)} {...$$restProps}>
+  <div class={twMerge(innerClass, $$props.classInner)} role="group">
     <slot />
   </div>
 </div>

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

@@ -1 +1 @@
-{"version":3,"file":"BottomNavHeader.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/bottom-nav/BottomNavHeader.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAiBD,QAAA,MAAM,SAAS;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,oBAAoB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAC1D,MAAM,MAAM,qBAAqB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC5D,MAAM,MAAM,oBAAoB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAE1D;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,CAAC,OAAO,OAAO,eAAgB,SAAQ,oBAAoB,CAAC,oBAAoB,EAAE,qBAAqB,EAAE,oBAAoB,CAAC;CACnI"}
+{"version":3,"file":"BottomNavHeader.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/bottom-nav/BottomNavHeader.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAoBD,QAAA,MAAM,SAAS;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,oBAAoB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAC1D,MAAM,MAAM,qBAAqB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC5D,MAAM,MAAM,oBAAoB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAE1D;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,CAAC,OAAO,OAAO,eAAgB,SAAQ,oBAAoB,CAAC,oBAAoB,EAAE,qBAAqB,EAAE,oBAAoB,CAAC;CACnI"}

package/dist/bottom-nav/BottomNavHeaderItem.svelte

@@ -1,12 +1,12 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 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}>
+<button class={twMerge(btnClass, $$props.class)} {...$$restProps}>
   {itemName}
 </button>
 

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;AAuBD,QAAA,MAAM,SAAS;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,wBAAwB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAC9D,MAAM,MAAM,yBAAyB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAChE,MAAM,MAAM,wBAAwB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAE9D;;;;;;;;GAQG;AACH,MAAM,CAAC,OAAO,OAAO,mBAAoB,SAAQ,oBAAoB,CAAC,wBAAwB,EAAE,yBAAyB,EAAE,wBAAwB,CAAC;CACnJ"}

package/dist/bottom-nav/BottomNavItem.svelte

@@ -1,12 +1,7 @@
 <script>import { getContext } from 'svelte';
-import classNames from 'classnames';
+import { twMerge } from 'tailwind-merge';
 export let btnName = '';
-export let appBtnPosition = 'custom';
-export let btnDefault = '';
-export let spanDefault = '';
-export let btnCustom = '';
-export let spanCustom = '';
-export let appCustom = '';
+export let appBtnPosition = 'middle';
 const navType = getContext('navType');
 const btnClasses = {
     default: 'inline-flex flex-col items-center justify-center px-5 hover:bg-gray-50 dark:hover:bg-gray-800 group',
@@ -16,8 +11,7 @@ const btnClasses = {
     group: 'inline-flex flex-col items-center justify-center p-4 hover:bg-gray-50 dark:hover:bg-gray-800 group',
     card: 'inline-flex flex-col items-center justify-center px-5 hover:bg-gray-50 dark:hover:bg-gray-800 group',
     meeting: '',
-    video: '',
-    custom: btnCustom
+    video: ''
 };
 const spanClasses = {
     default: 'text-sm text-gray-500 dark:text-gray-400 group-hover:text-primary-600 dark:group-hover:text-primary-500',
@@ -27,17 +21,15 @@ const spanClasses = {
     group: 'sr-only',
     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
+    video: ''
 };
 const appBtnClasses = {
     left: 'inline-flex flex-col items-center justify-center px-5 rounded-l-full hover:bg-gray-50 dark:hover:bg-gray-800 group',
     middle: 'inline-flex flex-col items-center justify-center px-5 hover:bg-gray-50 dark:hover:bg-gray-800 group',
-    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
+    right: 'inline-flex flex-col items-center justify-center px-5 rounded-r-full hover:bg-gray-50 dark:hover:bg-gray-800 group'
 };
-$: btnClass = classNames(btnDefault, btnClasses[navType], appBtnClasses[appBtnPosition], $$props.btnClass);
-$: spanClass = classNames(spanDefault, spanClasses[navType], $$props.spanClass);
+$: btnClass = twMerge(btnClasses[navType], appBtnClasses[appBtnPosition], $$props.btnClass);
+$: spanClass = twMerge(spanClasses[navType], $$props.spanClass);
 </script>
 
 <button

package/dist/bottom-nav/BottomNavItem.svelte.d.ts

@@ -3,12 +3,7 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         btnName?: string | undefined;
-        appBtnPosition?: "custom" | "left" | "middle" | "right" | undefined;
-        btnDefault?: string | undefined;
-        spanDefault?: string | undefined;
-        btnCustom?: string | undefined;
-        spanCustom?: string | undefined;
-        appCustom?: string | undefined;
+        appBtnPosition?: "left" | "middle" | "right" | undefined;
     };
     events: {
         click: MouseEvent;

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

@@ -1 +1 @@
-{"version":3,"file":"BottomNavItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/bottom-nav/BottomNavItem.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAgFD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,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;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,CAAC,OAAO,OAAO,aAAc,SAAQ,oBAAoB,CAAC,kBAAkB,EAAE,mBAAmB,EAAE,kBAAkB,CAAC;CAC3H"}
+{"version":3,"file":"BottomNavItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/bottom-nav/BottomNavItem.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAuED,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,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;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,CAAC,OAAO,OAAO,aAAc,SAAQ,oBAAoB,CAAC,kBAAkB,EAAE,mBAAmB,EAAE,kBAAkB,CAAC;CAC3H"}

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/breadcrumbs/BreadcrumbItem.svelte

@@ -1,13 +1,14 @@
-<script>export let home = false;
+<script>import { twMerge } from 'tailwind-merge';
+export let home = false;
 export let href = undefined;
 export let linkClass = 'ml-1 text-sm font-medium text-gray-700 hover:text-gray-900 md:ml-2 dark:text-gray-400 dark:hover:text-white';
 export let spanClass = 'ml-1 text-sm font-medium text-gray-500 md:ml-2 dark:text-gray-400';
 export let homeClass = 'inline-flex items-center text-sm font-medium text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white';
 </script>
 
-<li class="inline-flex items-center" {...$$restProps}>
+<li class={twMerge('inline-flex items-center', $$props.class)} {...$$restProps}>
   {#if home}
-    <a class={homeClass} {href}>
+    <a class={twMerge(homeClass, $$props.classHome)} {href}>
       {#if $$slots.icon}
         <slot name="icon" />
       {:else}
@@ -32,11 +33,11 @@ export let homeClass = 'inline-flex items-center text-sm font-medium text-gray-7
           clip-rule="evenodd" /></svg>
     {/if}
     {#if href}
-      <a class={linkClass} {href}>
+      <a class={twMerge(linkClass, $$props.classLink)} {href}>
         <slot />
       </a>
     {:else}
-      <span class={spanClass}>
+      <span class={twMerge(spanClass, $$props.classSpan)}>
         <slot />
       </span>
     {/if}

package/dist/breadcrumbs/BreadcrumbItem.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BreadcrumbItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/breadcrumbs/BreadcrumbItem.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA2CD,QAAA,MAAM,SAAS;;;;eAD2H,MAAM,GAAG,SAAS;;;;;;;;;;;;CAC9E,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;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,OAAO,OAAO,cAAe,SAAQ,oBAAoB,CAAC,mBAAmB,EAAE,oBAAoB,EAAE,mBAAmB,CAAC;CAC/H"}
+{"version":3,"file":"BreadcrumbItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/breadcrumbs/BreadcrumbItem.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA8CD,QAAA,MAAM,SAAS;;;;eAD2H,MAAM,GAAG,SAAS;;;;;;;;;;;;CAC9E,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;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,OAAO,OAAO,cAAe,SAAQ,oBAAoB,CAAC,mBAAmB,EAAE,oBAAoB,EAAE,mBAAmB,CAAC;CAC/H"}

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/carousels/Caption.svelte

@@ -1,9 +1,10 @@
 <script>export let caption = '';
 export let captionClass = '';
+export let pClass = 'text-gray-900 dark:text-white';
 </script>
 
 <div class={captionClass}>
-  <p id="caption" class="text-gray-900 dark:text-white">{caption}</p>
+  <p id="caption" class={pClass}>{caption}</p>
 </div>
 
 <!--

package/dist/carousels/Caption.svelte.d.ts

@@ -3,6 +3,7 @@ declare const __propDef: {
     props: {
         caption?: string | undefined;
         captionClass?: string | undefined;
+        pClass?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/carousels/Caption.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Caption.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/carousels/Caption.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAcD,QAAA,MAAM,SAAS;;;;;;;;;CAAwC,CAAC;AACxD,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAClD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACpD,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAElD;;;;;;;GAOG;AACH,MAAM,CAAC,OAAO,OAAO,OAAQ,SAAQ,oBAAoB,CAAC,YAAY,EAAE,aAAa,EAAE,YAAY,CAAC;CACnG"}
+{"version":3,"file":"Caption.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/carousels/Caption.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAeD,QAAA,MAAM,SAAS;;;;;;;;;;CAAwC,CAAC;AACxD,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAClD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACpD,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAElD;;;;;;;GAOG;AACH,MAAM,CAAC,OAAO,OAAO,OAAQ,SAAQ,oBAAoB,CAAC,YAAY,EAAE,aAAa,EAAE,YAAY,CAAC;CACnG"}