flowbite-svelte 0.37.4 → 0.38.1

package/dist/tables/Table.svelte

@@ -1,4 +1,4 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge, twJoin } from 'tailwind-merge';
 import { setContext } from 'svelte';
 export let divClass = 'relative overflow-x-auto';
 export let striped = false;
@@ -24,8 +24,8 @@ $: setContext('noborder', noborder);
 $: setContext('color', color);
 </script>
 
-<div class={classNames(divClass, shadow && 'shadow-md sm:rounded-lg')}>
-  <table {...$$restProps} class={classNames('w-full text-left text-sm', colors[color], $$props.class)}>
+<div class={twJoin(divClass, shadow && 'shadow-md sm:rounded-lg')}>
+  <table {...$$restProps} class={twMerge('w-full text-left text-sm', colors[color], $$props.class)}>
     <slot />
   </table>
 </div>

package/dist/tables/TableBodyCell.svelte

@@ -1,10 +1,10 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 import { getContext } from 'svelte';
 export let tdClass = 'px-6 py-4 whitespace-nowrap font-medium ';
 let color = 'default';
 color = getContext('color');
 let tdClassfinal;
-$: tdClassfinal = classNames(tdClass, color === 'default'
+$: tdClassfinal = twMerge(tdClass, color === 'default'
     ? 'text-gray-900 dark:text-white'
     : 'text-blue-50 whitespace-nowrap dark:text-blue-100', $$props.class);
 </script>

package/dist/tables/TableBodyRow.svelte

@@ -1,4 +1,4 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 import { getContext } from 'svelte';
 export let color = getContext('color');
 const colors = {
@@ -29,7 +29,13 @@ const stripColors = {
     custom: ''
 };
 let trClass;
-$: trClass = classNames(!getContext('noborder') && 'border-b last:border-b-0', colors[color], getContext('hoverable') && hoverColors[color], getContext('striped') && stripColors[color], $$props.class);
+$: trClass = twMerge([
+    !getContext('noborder') && 'border-b last:border-b-0',
+    colors[color],
+    getContext('hoverable') && hoverColors[color],
+    getContext('striped') && stripColors[color],
+    $$props.class
+]);
 </script>
 
 <tr {...$$restProps} class={trClass} on:click on:contextmenu>

package/dist/tables/TableHead.svelte

@@ -1,4 +1,4 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 import { getContext } from 'svelte';
 export let theadClass = 'text-xs uppercase';
 export let defaultRow = true;
@@ -28,7 +28,7 @@ let borderColors = striped
         : color === 'custom'
             ? ''
             : `border-${color}-400`;
-$: theadClassfinal = classNames(theadClass, textColor, striped && borderColors, bgColors[color], $$props.class);
+$: theadClassfinal = twMerge(theadClass, textColor, striped && borderColors, bgColors[color], $$props.class);
 </script>
 
 <thead {...$$restProps} class={theadClassfinal}>

package/dist/tables/TableHeadCell.svelte

@@ -1,10 +1,10 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 export let padding = 'px-6 py-3';
 </script>
 
 <th
   {...$$restProps}
-  class={classNames(padding, $$props.class)}
+  class={twMerge(padding, $$props.class)}
   on:click
   on:focus
   on:keydown

package/dist/tables/TableSearch.svelte

@@ -1,4 +1,4 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 import { setContext } from 'svelte';
 export let divClass = 'relative overflow-x-auto shadow-md sm:rounded-lg';
 export let inputValue = '';
@@ -44,7 +44,7 @@ $: setContext('color', color);
         {placeholder} />
     </div>
   </div>
-  <table {...$$restProps} class={classNames('w-full text-left text-sm', colors[color], $$props.class)}>
+  <table {...$$restProps} class={twMerge('w-full text-left text-sm', colors[color], $$props.class)}>
     <slot />
   </table>
 </div>

package/dist/tabs/TabItem.svelte

@@ -1,6 +1,6 @@
 <script>import { getContext } from 'svelte';
 import { writable } from 'svelte/store';
-import classNames from 'classnames';
+import { twMerge } from 'tailwind-merge';
 export let open = false;
 export let title = 'Tab title';
 export let activeClasses = undefined;
@@ -19,12 +19,12 @@ function init(node) {
     return { destroy };
 }
 let buttonClass;
-$: buttonClass = classNames(defaultClass, open ? activeClasses ?? ctx.activeClasses : inactiveClasses ?? ctx.inactiveClasses, open && 'active'
+$: buttonClass = twMerge(defaultClass, open ? activeClasses ?? ctx.activeClasses : inactiveClasses ?? ctx.inactiveClasses, open && 'active'
 // $$restProps.disabled && 'cursor-not-allowed pointer-events-none'
 );
 </script>
 
-<li class={classNames('group', $$props.class)} role="presentation">
+<li class={twMerge('group', $$props.class)} role="presentation">
   <button
     type="button"
     on:click={() => (open = true)}

package/dist/tabs/Tabs.svelte

@@ -1,7 +1,7 @@
 <script context="module">import { writable } from 'svelte/store';
 </script>
 
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 import { setContext } from 'svelte';
 export let style = 'none';
 export let defaultClass = 'flex flex-wrap space-x-2';
@@ -36,7 +36,7 @@ function init(node) {
     });
     return { destroy };
 }
-$: ulClass = classNames(defaultClass, style === 'underline' && '-mb-px', $$props.class);
+$: ulClass = twMerge(defaultClass, style === 'underline' && '-mb-px', $$props.class);
 </script>
 
 <ul class={ulClass}>

package/dist/timeline/TimelineItem.svelte

@@ -1,4 +1,4 @@
-<script>import classNames from 'classnames';
+<script>import { twJoin } from 'tailwind-merge';
 import { getContext } from 'svelte';
 export let title = '';
 export let date = '';
@@ -32,7 +32,7 @@ const timeClasses = {
     group: 'text-lg font-semibold text-gray-900 dark:text-white',
     custom: customTimeClass
 };
-const h3Class = classNames(order === 'vertical'
+const h3Class = twJoin(order === 'vertical'
     ? 'flex items-center mb-1 text-lg font-semibold text-gray-900 dark:text-white'
     : 'text-lg font-semibold text-gray-900 dark:text-white');
 </script>

package/dist/toasts/Toast.svelte

@@ -1,5 +1,5 @@
 <script>import Frame from '../utils/Frame.svelte';
-import classNames from 'classnames';
+import { twMerge } from 'tailwind-merge';
 import CloseButton from '../utils/CloseButton.svelte';
 import { fade } from 'svelte/transition';
 export let simple = false;
@@ -18,7 +18,7 @@ const positions = {
     none: ''
 };
 let finalDivClass;
-$: finalDivClass = classNames('flex', align ? 'items-center' : 'items-start', divClass, positions[position], $$props.class);
+$: finalDivClass = twMerge('flex', align ? 'items-center' : 'items-start', divClass, positions[position], $$props.class);
 const colors = {
     primary: 'text-primary-500 bg-primary-100 dark:bg-primary-800 dark:text-primary-200',
     gray: 'text-gray-500 bg-gray-100 dark:bg-gray-700 dark:text-gray-200',
@@ -32,7 +32,7 @@ const colors = {
     none: ''
 };
 let iconClass;
-$: iconClass = classNames('inline-flex items-center justify-center shrink-0', colors[color], defaultIconClass);
+$: iconClass = twMerge('inline-flex items-center justify-center shrink-0', colors[color], defaultIconClass);
 const clsBtnExtraClass = '-mx-1.5 -my-1.5 text-gray-400 hover:text-gray-900 focus:!ring-gray-300 hover:bg-gray-100 dark:text-gray-500 dark:hover:text-white dark:hover:bg-gray-700';
 </script>
 

package/dist/toasts/Toast.svelte.d.ts

@@ -150,6 +150,44 @@ declare const __propDef: {
         'on:load'?: import("svelte/elements").EventHandler<Event, Element> | null | undefined;
         'on:error'?: import("svelte/elements").EventHandler<Event, Element> | null | undefined;
         'on:toggle'?: import("svelte/elements").EventHandler<Event, HTMLAnchorElement> | null | undefined;
+        /**
+         * ## Features
+         * [Go to Toast](https://flowbite-svelte.com/docs/components/toast)
+         * - Setup
+         * - Default toast
+         * - Simple toast
+         * - Colors
+         * - Icons
+         * - Autohide example
+         * - Transitions
+         * - Blur examples
+         * - Fly examples
+         * - Undo button
+         * - Advanced examples
+         * - Toast message
+         * - Push notification
+         * - Interactive toast
+         * - Positioning
+         * ## Props
+         * @prop simple: boolean = false;
+         * @prop position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'none' = 'none';
+         * @prop open: boolean = true;
+         * @prop divClass: string = 'w-full max-w-xs p-4';
+         * @prop defaultIconClass: string = 'inline-flex items-center justify-center flex-shrink-0 w-8 h-8 mr-3';
+         * ## Example
+         * ```
+         * <script>
+         *   import { Toast } from 'flowbite-svelte';
+         * </script>
+         * <Toast>
+         *   <svelte:fragment slot="icon">
+         *     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M15.362 5.214A8.252 8.252 0 0112 21 8.25 8.25 0 016.038 7.048 8.287 8.287 0 009 9.6a8.983 8.983 0 013.361-6.867 8.21 8.21 0 003 2.48z" /><path stroke-linecap="round" stroke-linejoin="round" d="M12 18a3.75 3.75 0 00.495-7.467 5.99 5.99 0 00-1.925 3.546 5.974 5.974 0 01-2.133-1A3.75 3.75 0 0012 18z" />
+         *     </svg>
+         *   </svelte:fragment>
+         *   Dismissable user notification.
+         * </Toast>
+         * ```
+         */
         'on:keydown'?: import("svelte/elements").KeyboardEventHandler<HTMLAnchorElement> | null | undefined;
         'on:keypress'?: import("svelte/elements").KeyboardEventHandler<HTMLAnchorElement> | null | undefined;
         'on:keyup'?: import("svelte/elements").KeyboardEventHandler<HTMLAnchorElement> | null | undefined;

package/dist/toasts/Toast.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/toasts/Toast.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAsHD,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":"Toast.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/toasts/Toast.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAsHD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAKf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;WAqCG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA1CoD,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/toolbar/Toolbar.svelte

@@ -1,13 +1,13 @@
 <script>import { setContext } from 'svelte';
 import { writable } from 'svelte/store';
-import classNames from 'classnames';
+import { twMerge, twJoin } from 'tailwind-merge';
 import Frame from '../utils/Frame.svelte';
 const separators = writable(false);
 setContext('toolbar', separators);
 export let color = 'dark';
 export let embedded = false;
 let divClass;
-$: divClass = classNames('flex justify-between items-center', embedded || 'p-2', $$props.class);
+$: divClass = twMerge('flex justify-between items-center', embedded || 'p-2', $$props.class);
 const divideColors = {
     gray: 'divide-gray-400 dark:divide-gray-700',
     red: 'divide-red-400 dark:divide-red-700',
@@ -21,7 +21,7 @@ const divideColors = {
     none: ''
 };
 let separatorsClass;
-$: separatorsClass = classNames($separators && 'sm:divide-x', divideColors[color]);
+$: separatorsClass = twJoin($separators && 'sm:divide-x', divideColors[color]);
 </script>
 
 <Frame {...$$restProps} class={divClass} color={embedded ? 'none' : color} rounded={!embedded}>

package/dist/toolbar/ToolbarButton.svelte

@@ -1,5 +1,5 @@
 <script>import { getContext } from 'svelte';
-import classNames from 'classnames';
+import { twMerge } from 'tailwind-merge';
 const background = getContext('background');
 export let color = 'default';
 export let name = undefined;
@@ -25,7 +25,7 @@ const sizing = {
     lg: 'm-0.5 rounded-lg focus:ring-2 p-2.5'
 };
 let buttonClass;
-$: buttonClass = classNames('focus:outline-none whitespace-normal', sizing[size], colors[color], color === 'default' &&
+$: buttonClass = twMerge('focus:outline-none whitespace-normal', sizing[size], colors[color], color === 'default' &&
     (background ? 'hover:bg-gray-100 dark:hover:bg-gray-600' : 'hover:bg-gray-100 dark:hover:bg-gray-700'), $$props.class);
 const svgSizes = {
     xs: 'w-3 h-3',

package/dist/tooltips/Tooltip.svelte

@@ -1,5 +1,5 @@
 <script>import Popper from '../utils/Popper.svelte';
-import classNames from 'classnames';
+import { twMerge } from 'tailwind-merge';
 export let type = 'dark';
 export let defaultClass = 'py-2 px-3 text-sm font-medium';
 const types = {
@@ -14,7 +14,7 @@ $: {
         type = 'custom';
     else
         $$restProps.color = 'none';
-    toolTipClass = classNames('tooltip', defaultClass, types[type], $$props.class);
+    toolTipClass = twMerge('tooltip', defaultClass, types[type], $$props.class);
 }
 </script>
 

package/dist/typography/A.svelte

@@ -1,10 +1,10 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 export let href = '#';
-export let color = 'text-blue-600 dark:text-blue-500';
+export let color = 'text-primary-600 dark:text-primary-500';
 export let aClass = 'inline-flex items-center hover:underline';
 </script>
 
-<a {...$$restProps} {href} class={classNames(aClass, color, $$props.class)}>
+<a {...$$restProps} {href} class={twMerge(aClass, color, $$props.class)}>
   <slot />
 </a>
 

package/dist/typography/Blockquote.svelte

@@ -1,4 +1,4 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 export let border = false;
 export let italic = true;
 export let borderClass = 'border-l-4 border-gray-300 dark:border-gray-500';
@@ -31,7 +31,7 @@ const sizes = {
 
 <blockquote
   {...$$restProps}
-  class={classNames(
+  class={twMerge(
     baseClass,
     alignmentClasses[alignment],
     sizes[size],

package/dist/typography/DescriptionList.svelte

@@ -1,8 +1,8 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 export let tag;
 export let dtClass = 'text-gray-500 md:text-lg dark:text-gray-400';
 export let ddClass = 'text-lg font-semibold';
-let classDesc = classNames(tag === 'dt' ? dtClass : ddClass, $$props.class);
+let classDesc = twMerge(tag === 'dt' ? dtClass : ddClass, $$props.class);
 </script>
 
 <svelte:element this={tag} {...$$restProps} class={classDesc}>

package/dist/typography/Heading.svelte

@@ -1,4 +1,4 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 export let tag = 'h1';
 export let color = 'text-gray-900 dark:text-white';
 export let customSize = '';
@@ -15,7 +15,7 @@ const textSizes = {
 <svelte:element
   this={tag}
   {...$$restProps}
-  class={classNames(customSize ? customSize : textSizes[tag], color, 'w-full', $$props.class)}>
+  class={twMerge(customSize ? customSize : textSizes[tag], color, 'w-full', $$props.class)}>
   <slot />
 </svelte:element>
 

package/dist/typography/Hr.svelte

@@ -1,4 +1,4 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 export let icon = false;
 export let width = 'w-full';
 export let height = 'h-px';
@@ -7,9 +7,9 @@ export let hrClass = 'bg-gray-200 rounded border-0 dark:bg-gray-700';
 export let iconDivClass = 'absolute left-1/2 px-4 bg-white -translate-x-1/2 ';
 export let textSpanClass = 'absolute left-1/2 px-3 font-medium text-gray-900 bg-white -translate-x-1/2 dark:text-white ';
 export let middleBgColor = 'dark:bg-gray-900';
-let horizontalClass = classNames(hrClass, width, height, $$props.class);
-let classDiv = classNames(divClass, $$slots && 'relative', $$props.classDiv);
-let middleClass = classNames(middleBgColor, icon ? iconDivClass : textSpanClass);
+let horizontalClass = twMerge(hrClass, width, height, $$props.class);
+let classDiv = twMerge(divClass, $$slots && 'relative', $$props.classDiv);
+let middleClass = twMerge(middleBgColor, icon ? iconDivClass : textSpanClass);
 </script>
 
 {#if $$slots}

package/dist/typography/Img.svelte

@@ -1,4 +1,4 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 export let caption = undefined;
 export let src = undefined;
 export let srcset = undefined;
@@ -13,13 +13,13 @@ export let captionClass = 'mt-2 text-sm text-center text-gray-500 dark:text-gray
 
 {#if caption}
   <figure class={figClass}>
-    <img class={classNames(imgClass, size, alignment, effect, $$props.class)} {src} {srcset} {alt} />
+    <img class={twMerge(imgClass, size, alignment, effect, $$props.class)} {src} {srcset} {alt} />
     <figcaption class={captionClass}>{@html caption}</figcaption>
   </figure>
 {:else}
   <img
     {...$$restProps}
-    class={classNames(imgClass, size, alignment, effect, $$props.class)}
+    class={twMerge(imgClass, size, alignment, effect, $$props.class)}
     {src}
     {srcset}
     {alt} />

package/dist/typography/Layout.svelte

@@ -1,8 +1,8 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 export let divClass = 'grid';
 export let cols = 'grid-cols-1 sm:grid-cols-2';
 export let gap;
-let classDiv = classNames(divClass, 'gap-' + String(gap), cols);
+let classDiv = twMerge(divClass, 'gap-' + String(gap), cols);
 </script>
 
 <div {...$$restProps} class={classDiv}>

package/dist/typography/Li.svelte

@@ -1,7 +1,7 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 export let icon = false;
 export let liClass = '';
-let classLi = classNames(liClass, icon && 'flex items-center', $$props.class);
+let classLi = twMerge(liClass, icon && 'flex items-center', $$props.class);
 </script>
 
 <li {...$$restProps} class={classLi}>

package/dist/typography/List.svelte

@@ -1,4 +1,4 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 export let tag = 'ul';
 export let list = undefined;
 export let position = 'inside';
@@ -11,7 +11,7 @@ let positions = {
     inside: 'list-inside',
     outside: 'list-outside'
 };
-let classList = classNames(lists[list ?? (tag === 'ul' ? 'disc' : 'ol' ? 'decimal' : 'none')], positions[position], $$props.class);
+let classList = twMerge(lists[list ?? (tag === 'ul' ? 'disc' : 'ol' ? 'decimal' : 'none')], positions[position], $$props.class);
 </script>
 
 <svelte:element this={tag} {...$$restProps} class={classList}>

package/dist/typography/Mark.svelte

@@ -1,10 +1,10 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 export let color = 'text-white dark:bg-blue-500';
 export let bgColor = 'bg-blue-600';
 export let markClass = 'px-2 rounded';
 </script>
 
-<mark {...$$restProps} class={classNames(markClass, bgColor, color, $$props.class)}>
+<mark {...$$restProps} class={twMerge(markClass, bgColor, color, $$props.class)}>
   <slot />
 </mark>
 

package/dist/typography/P.svelte

@@ -1,4 +1,4 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 export let color = 'text-gray-900 dark:text-white';
 export let height = 'normal';
 export let align = 'left';
@@ -67,7 +67,7 @@ let colorAndopacity = color
     .map((element) => element.trim())
     .map((element) => element + '/' + String(opacity))
     .join(' ');
-let classP = classNames(size && sizes[size], (opacity && colorAndopacity) || (color && color), height && heights[height], weight && weights[weight], space && spaces[space], align && aligns[align], justify && 'text-justify', italic && 'italic', firstupper && upperClass, whitespace && whitespaces[whitespace], $$props.class);
+let classP = twMerge(size && sizes[size], (opacity && colorAndopacity) || (color && color), height && heights[height], weight && weights[weight], space && spaces[space], align && aligns[align], justify && 'text-justify', italic && 'italic', firstupper && upperClass, whitespace && whitespaces[whitespace], $$props.class);
 </script>
 
 <p {...$$restProps} class={classP}>

package/dist/typography/Secondary.svelte

@@ -1,9 +1,9 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 export let color = 'text-gray-500 dark:text-gray-400';
 export let secondaryClass = 'font-semibold';
 </script>
 
-<small {...$$restProps} class={classNames(color, secondaryClass, $$props.class)}>
+<small {...$$restProps} class={twMerge(color, secondaryClass, $$props.class)}>
   <slot />
 </small>
 

package/dist/typography/Span.svelte

@@ -1,4 +1,4 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 export let italic = false;
 export let underline = false;
 export let linethrough = false;
@@ -8,8 +8,8 @@ export let highlight = false;
 export let highlightClass = 'text-blue-600 dark:text-blue-500';
 export let decorationClass = 'decoration-2 decoration-blue-400 dark:decoration-blue-600';
 export let gradientClass = 'text-transparent bg-clip-text bg-gradient-to-r to-emerald-600 from-sky-400';
-let underlineClass = classNames('underline', decorationClass);
-let classSpan = classNames(italic && 'italic', underline && underlineClass, linethrough && 'line-through', uppercase && 'uppercase', gradient ? gradientClass : 'font-semibold text-gray-900 dark:text-white', highlight && highlightClass, $$props.class);
+let underlineClass = twMerge('underline', decorationClass);
+let classSpan = twMerge(italic && 'italic', underline && underlineClass, linethrough && 'line-through', uppercase && 'uppercase', gradient ? gradientClass : 'font-semibold text-gray-900 dark:text-white', highlight && highlightClass, $$props.class);
 </script>
 
 <span {...$$restProps} class={classSpan}>

package/dist/utils/CloseButton.svelte

@@ -1,9 +1,9 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 import ToolbarButton from '../toolbar/ToolbarButton.svelte';
 export let name = 'Close';
 </script>
 
-<ToolbarButton on:click {name} {...$$restProps} class={classNames('ml-auto', $$props.class)} let:svgSize>
+<ToolbarButton on:click {name} {...$$restProps} class={twMerge('ml-auto', $$props.class)} let:svgSize>
   <svg class={svgSize} fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
     <path
       fill-rule="evenodd"

package/dist/utils/Frame.svelte

@@ -1,4 +1,4 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 import { setContext } from 'svelte';
 import { noop } from 'svelte/internal';
 setContext('background', true);
@@ -75,12 +75,12 @@ const borderColors = {
     navbar: 'border-gray-100 dark:border-gray-700',
     navbarUl: 'border-gray-100 dark:border-gray-700',
     form: 'border-gray-300 dark:border-gray-700',
-    primary: 'border-primary-500 dark:bg-primary-200 ',
-    orange: 'border-orange-300 dark:bg-orange-800',
+    primary: 'border-primary-500 dark:border-primary-200 ',
+    orange: 'border-orange-300 dark:border-orange-800',
     none: ''
 };
 let divClass;
-$: divClass = classNames(bgColors[color], textColors[color], rounded && (color === 'dropdown' ? 'rounded' : 'rounded-lg'), border && 'border', borderColors[color], shadow && 'shadow-md', $$props.class);
+$: divClass = twMerge(bgColors[color], textColors[color], rounded && (color === 'dropdown' ? 'rounded' : 'rounded-lg'), border && 'border', borderColors[color], shadow && 'shadow-md', $$props.class);
 </script>
 
 {#if transition}

package/dist/utils/MenuButton.svelte

@@ -1,10 +1,10 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 import ToolbarButton from '../toolbar/ToolbarButton.svelte';
 export let name = undefined;
 export let vertical = false;
 </script>
 
-<ToolbarButton on:click {name} {...$$restProps} class={classNames($$props.class)} let:svgSize>
+<ToolbarButton on:click {name} {...$$restProps} class={twMerge($$props.class)} let:svgSize>
   <svg
     class={svgSize}
     aria-hidden="true"

package/dist/utils/Popper.svelte

@@ -1,6 +1,6 @@
 <script>import { onMount } from 'svelte';
 import { createPopper } from '@popperjs/core';
-import classNames from 'classnames';
+import { twMerge } from 'tailwind-merge';
 import createEventDispatcher from './createEventDispatcher';
 import Frame from './Frame.svelte';
 export let activeContent = false;
@@ -53,6 +53,7 @@ const hideHandler = (ev) => {
         open = false;
 };
 function init(node, _triggerEl) {
+    const arrowEl = arrow ? node.lastElementChild : undefined;
     popper = createPopper(_triggerEl, node, {
         placement,
         strategy,
@@ -68,7 +69,7 @@ function init(node, _triggerEl) {
             },
             { name: 'eventListeners', enabled: open },
             { name: 'flip', enabled: false },
-            { name: 'arrow', enabled: true }
+            { name: 'arrow', enabled: arrow, options: { element: arrowEl, padding: 10 } }
         ]
     });
     return {
@@ -116,10 +117,10 @@ onMount(() => {
 function optional(pred, func) {
     return (pred && func) || null;
 }
-let position;
+let position = 'bottom';
 $: position = placement.split('-', 1)[0];
 let arrowClass = 'bottom';
-$: arrowClass = classNames('absolute w-[9px] h-[9px] rotate-45 bg-inherit', position === 'top' && ($$props.border ? 'border-b border-r -bottom-[5px]' : '-bottom-[4px]'), position === 'bottom' && ($$props.border ? 'border-t border-l -top-[5px]' : '-top-[4px]'), position === 'left' && ($$props.border ? 'border-t border-r -right-[5px]' : '-right-[4px]'), position === 'right' && ($$props.border ? 'border-b border-l -left-[5px]' : '-left-[4px]'));
+$: arrowClass = twMerge('absolute w-[9px] h-[9px] rotate-45 bg-inherit', position === 'top' && ($$props.border ? 'border-b border-r -bottom-[5px]' : '-bottom-[4px]'), position === 'bottom' && ($$props.border ? 'border-t border-l -top-[5px]' : '-top-[4px]'), position === 'left' && ($$props.border ? 'border-t border-r -right-[5px]' : '-right-[4px]'), position === 'right' && ($$props.border ? 'border-b border-l -left-[5px]' : '-left-[4px]'));
 </script>
 
 {#if !triggerEl}
@@ -137,13 +138,13 @@ $: arrowClass = classNames('absolute w-[9px] h-[9px] rotate-45 bg-inherit', posi
     on:mouseenter={optional(activeContent && !clickable, showHandler)}
     on:mouseleave={optional(activeContent && !clickable, hideHandler)}
     {...$$restProps}
-    class={classNames('outline-none', $$props.class)}>
+    class={twMerge('outline-none', $$props.class)}>
     <slot />
-    {#if arrow}<div data-popper-arrow class={arrowClass} />{/if}
+    {#if arrow}<div class={arrowClass} />{/if}
   </Frame>
 {/if}
 
-<!--        
+<!--
   @component
   ## Props
   @prop activeContent: boolean = false;

package/dist/utils/Popper.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Popper.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/utils/Popper.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAID,OAAO,KAAK,EAAE,SAAS,EAAY,MAAM,gBAAgB,CAAC;AA6K1D,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAwC,CAAC;AACxD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACjD,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACnD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEjD;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,oBAAoB,CAAC,WAAW,EAAE,YAAY,EAAE,WAAW,CAAC;CAC/F"}
+{"version":3,"file":"Popper.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/utils/Popper.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAID,OAAO,KAAK,EAAE,SAAS,EAAY,MAAM,gBAAgB,CAAC;AA8K1D,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAwC,CAAC;AACxD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACjD,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACnD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEjD;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,oBAAoB,CAAC,WAAW,EAAE,YAAY,EAAE,WAAW,CAAC;CAC/F"}

package/dist/video/Video.svelte

@@ -1,10 +1,10 @@
-<script>import classNames from 'classnames';
+<script>import { twMerge } from 'tailwind-merge';
 export let src;
 export let type = 'video/mp4';
 export let trackSrc = '';
 export let srclang = 'en';
 export let label = 'english_captions';
-let videoClass = classNames($$props.class);
+let videoClass = twMerge($$props.class);
 </script>
 
 <video {...$$restProps} class={videoClass}>