flowbite-svelte 0.44.22 → 0.44.24

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

@@ -34,7 +34,7 @@ declare const __propDef: {
         icon: {};
         default: {};
         'close-button': {
-            close: (ev: MouseEvent | undefined) => void;
+            close: any;
         };
     };
 };

package/dist/badge/Badge.svelte.d.ts

@@ -26,7 +26,7 @@ declare const __propDef: {
     slots: {
         default: {};
         'close-button': {
-            close: (ev: MouseEvent | undefined) => void;
+            close: any;
         };
     };
 };

package/dist/buttons/Button.svelte

@@ -11,7 +11,7 @@ export let shadow = false;
 export let tag = 'button';
 export let checked = undefined;
 const colorClasses = {
-    alternative: 'text-gray-900 bg-white border border-gray-200 hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-400 hover:text-primary-700 focus-within:text-primary-700 dark:focus-within:text-white dark:hover:text-white',
+    alternative: 'text-gray-900 bg-white border border-gray-200 hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-400 hover:text-primary-700 focus-within:text-primary-700 dark:focus-within:text-white dark:hover:text-white dark:hover:bg-gray-700',
     blue: 'text-white bg-blue-700 hover:bg-blue-800 dark:bg-blue-600 dark:hover:bg-blue-700',
     dark: 'text-white bg-gray-800 hover:bg-gray-900 dark:bg-gray-800 dark:hover:bg-gray-700',
     green: 'text-white bg-green-700 hover:bg-green-800 dark:bg-green-600 dark:hover:bg-green-700',
@@ -79,7 +79,7 @@ const sizeClasses = {
 };
 const hasBorder = () => outline || color === 'alternative' || color === 'light';
 let buttonClass;
-$: buttonClass = twMerge('text-center font-medium', group ? 'focus-within:ring-2' : 'focus-within:ring-4', group && 'focus-within:z-10', group || 'focus-within:outline-none', 'inline-flex items-center justify-center ' + sizeClasses[size], outline && checked && 'border dark:border-gray-900', outline && checked && colorCheckedClasses[color], outline && !checked && outlineClasses[color], !outline && checked && colorCheckedClasses[color], !outline && !checked && colorClasses[color], color === 'alternative' && (group && !checked ? '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 && color === 'dark' && (group ? (checked ? 'bg-gray-900 border-gray-800 dark:border-white dark:bg-gray-600' : 'dark:text-white border-gray-800 dark:border-white') : 'dark:text-gray-400 dark:border-gray-700'), coloredFocusClasses[color], hasBorder() && group && 'border-s-0 first:border-s', group ? (pill && 'first:rounded-s-full last:rounded-e-full') || 'first:rounded-s-lg last:rounded-e-lg' : (pill && 'rounded-full') || 'rounded-lg', shadow && 'shadow-lg', shadow && coloredShadowClasses[color], $$props.disabled && 'cursor-not-allowed opacity-50', $$props.class);
+$: buttonClass = twMerge('text-center font-medium', group ? 'focus-within:ring-2' : 'focus-within:ring-4', group && 'focus-within:z-10', group || 'focus-within:outline-none', 'inline-flex items-center justify-center ' + sizeClasses[size], outline && checked && 'border dark:border-gray-900', outline && checked && colorCheckedClasses[color], outline && !checked && outlineClasses[color], !outline && checked && colorCheckedClasses[color], !outline && !checked && colorClasses[color], color === 'alternative' && (group && !checked ? '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-600'), outline && color === 'dark' && (group ? (checked ? 'bg-gray-900 border-gray-800 dark:border-white dark:bg-gray-600' : 'dark:text-white border-gray-800 dark:border-white') : 'dark:text-gray-400 dark:border-gray-700'), coloredFocusClasses[color], hasBorder() && group && 'border-s-0 first:border-s', group ? (pill && 'first:rounded-s-full last:rounded-e-full') || 'first:rounded-s-lg last:rounded-e-lg' : (pill && 'rounded-full') || 'rounded-lg', shadow && 'shadow-lg', shadow && coloredShadowClasses[color], $$props.disabled && 'cursor-not-allowed opacity-50', $$props.class);
 </script>
 
 {#if href}

package/dist/cards/Card.svelte

@@ -7,23 +7,25 @@ export let img = undefined;
 export let padding = 'lg';
 export let size = 'sm';
 const paddings = {
-    none: 'p-0',
-    sm: 'p-4 sm:p-6 md:p-8',
+    none: '',
+    xs: 'p-2',
+    sm: 'p-4',
     md: 'p-4 sm:p-5',
     lg: 'p-4 sm:p-6',
     xl: 'p-4 sm:p-8'
 };
 const sizes = {
+    none: '',
     xs: 'max-w-xs',
     sm: 'max-w-sm',
-    md: 'max-w-lg',
+    md: 'max-w-xl',
     lg: 'max-w-2xl',
     xl: 'max-w-screen-xl'
 };
 let innerPadding;
 $: innerPadding = paddings[padding];
 let cardClass;
-$: cardClass = twMerge('flex', sizes[size], reverse ? 'flex-col-reverse' : 'flex-col', horizontal && (reverse ? 'md:flex-row-reverse' : 'md:flex-row'), href && 'hover:bg-gray-100 dark:hover:bg-gray-700', !img && innerPadding, $$props.class);
+$: cardClass = twMerge('flex w-full', sizes[size], reverse ? 'flex-col-reverse' : 'flex-col', horizontal && (reverse ? 'md:flex-row-reverse' : 'md:flex-row'), href && 'hover:bg-gray-100 dark:hover:bg-gray-700', !img && innerPadding, $$props.class);
 let imgClass;
 $: 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-e-lg' : 'md:rounded-s-lg'));
 </script>
@@ -47,6 +49,6 @@ $: imgClass = twMerge(reverse ? 'rounded-b-lg' : 'rounded-t-lg', horizontal && '
 @prop export let horizontal: boolean = false;
 @prop export let reverse: boolean = false;
 @prop export let img: string | undefined = undefined;
-@prop export let padding: 'none' | 'sm' | 'md' | 'lg' | 'xl' = 'lg';
-@prop export let size: SizeType = 'sm';
+@prop export let padding: SizeType | 'none' = 'lg';
+@prop export let size: SizeType | 'none' = 'sm';
 -->

package/dist/cards/Card.svelte.d.ts

@@ -16,8 +16,8 @@ declare const __propDef: {
         horizontal?: boolean | undefined;
         reverse?: boolean | undefined;
         img?: string | undefined;
-        padding?: "none" | "sm" | "lg" | "xl" | "md" | undefined;
-        size?: SizeType | undefined;
+        padding?: "none" | SizeType | undefined;
+        size?: "none" | SizeType | undefined;
     };
     events: {
         click: MouseEvent;
@@ -42,8 +42,8 @@ export type CardSlots = typeof __propDef.slots;
  * @prop export let horizontal: boolean = false;
  * @prop export let reverse: boolean = false;
  * @prop export let img: string | undefined = undefined;
- * @prop export let padding: 'none' | 'sm' | 'md' | 'lg' | 'xl' = 'lg';
- * @prop export let size: SizeType = 'sm';
+ * @prop export let padding: SizeType | 'none' = 'lg';
+ * @prop export let size: SizeType | 'none' = 'sm';
  */
 export default class Card extends SvelteComponent<CardProps, CardEvents, CardSlots> {
 }

package/dist/cards/Card.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Card.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/cards/Card.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AACD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAoE3C,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAwC,CAAC;AACxD,MAAM,MAAM,SAAS,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAC/C,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACjD,MAAM,MAAM,SAAS,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAE/C;;;;;;;;;GASG;AACH,MAAM,CAAC,OAAO,OAAO,IAAK,SAAQ,eAAe,CAAC,SAAS,EAAE,UAAU,EAAE,SAAS,CAAC;CAClF"}
+{"version":3,"file":"Card.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/cards/Card.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AACD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAsE3C,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAwC,CAAC;AACxD,MAAM,MAAM,SAAS,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAC/C,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACjD,MAAM,MAAM,SAAS,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAE/C;;;;;;;;;GASG;AACH,MAAM,CAAC,OAAO,OAAO,IAAK,SAAQ,eAAe,CAAC,SAAS,EAAE,UAAU,EAAE,SAAS,CAAC;CAClF"}

package/dist/darkmode/DarkMode.svelte

@@ -1,5 +1,5 @@
 <script>import { twMerge } from 'tailwind-merge';
-export let btnClass = 'text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5';
+export let btnClass = 'text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none rounded-lg text-sm p-2.5';
 export let size = 'md';
 export let ariaLabel = 'Dark mode';
 const sizes = {
@@ -53,7 +53,7 @@ const toggleTheme = (ev) => {
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let btnClass: string = 'text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5';
+@prop export let btnClass: string = 'text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none rounded-lg text-sm p-2.5';
 @prop export let size: 'sm' | 'md' | 'lg' = 'md';
 @prop export let ariaLabel: string = 'Dark mode';
 -->

package/dist/darkmode/DarkMode.svelte.d.ts

@@ -20,7 +20,7 @@ export type DarkModeSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop export let btnClass: string = 'text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5';
+ * @prop export let btnClass: string = 'text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none rounded-lg text-sm p-2.5';
  * @prop export let size: 'sm' | 'md' | 'lg' = 'md';
  * @prop export let ariaLabel: string = 'Dark mode';
  */

package/dist/dropdown/Dropdown.svelte

@@ -9,17 +9,21 @@ const activeUrlStore = writable('');
 export let activeUrl = '';
 export let open = false;
 export let containerClass = 'divide-y z-50';
+export let classContainer = undefined;
 export let headerClass = 'py-1 overflow-hidden rounded-t-lg';
+export let classHeader = undefined;
 export let footerClass = 'py-1 overflow-hidden rounded-b-lg';
+export let classFooter = undefined;
 export let activeClass = 'text-primary-700 dark:text-primary-700 hover:text-primary-900 dark:hover:text-primary-900';
-let activeCls = twMerge(activeClass, $$props.classActive);
+export let classActive = undefined;
+let activeCls = twMerge(activeClass, classActive);
 setContext('DropdownType', { activeClass: activeCls });
 $: activeUrlStore.set(activeUrl);
 setContext('activeUrl', activeUrlStore);
-let containerCls = twMerge(containerClass, $$props.classContainer);
-let headerCls = twMerge(headerClass, $$props.classHeader);
-let ulCls = twMerge('py-1', $$props.class);
-let footerCls = twMerge(footerClass, $$props.classFooter);
+$: containerCls = twMerge(containerClass, classContainer);
+$: headerCls = twMerge(headerClass, classHeader);
+$: ulCls = twMerge('py-1', $$props.class);
+$: footerCls = twMerge(footerClass, classFooter);
 $: {
     // set default values
     $$restProps.arrow = $$restProps.arrow ?? false;
@@ -54,7 +58,11 @@ $: {
 @prop export let activeUrl: string = '';
 @prop export let open: boolean = false;
 @prop export let containerClass: string = 'divide-y z-50';
+@prop export let classContainer: string | undefined = undefined;
 @prop export let headerClass: string = 'py-1 overflow-hidden rounded-t-lg';
+@prop export let classHeader: string | undefined = undefined;
 @prop export let footerClass: string = 'py-1 overflow-hidden rounded-b-lg';
+@prop export let classFooter: string | undefined = undefined;
 @prop export let activeClass: string = 'text-primary-700 dark:text-primary-700 hover:text-primary-900 dark:hover:text-primary-900';
+@prop export let classActive: string | undefined = undefined;
 -->

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

@@ -19,18 +19,22 @@ declare const __propDef: {
         arrow?: boolean | undefined;
         offset?: number | undefined;
         placement?: import("@floating-ui/dom").Placement | undefined;
-        trigger?: "click" | "hover" | undefined;
+        trigger?: "click" | "focus" | "hover" | undefined;
         triggeredBy?: string | undefined;
         reference?: string | undefined;
         strategy?: "fixed" | "absolute" | undefined;
         open?: boolean | undefined;
         yOnly?: boolean | undefined;
     } & {
-        open?: boolean | undefined;
+        activeUrl?: string | undefined;
         containerClass?: string | undefined;
+        classContainer?: string | undefined;
         headerClass?: string | undefined;
+        classHeader?: string | undefined;
         footerClass?: string | undefined;
-        activeUrl?: string | undefined;
+        classFooter?: string | undefined;
+        activeClass?: string | undefined;
+        classActive?: string | undefined;
     };
     events: {
         show: CustomEvent<any>;
@@ -52,9 +56,13 @@ export type DropdownSlots = typeof __propDef.slots;
  * @prop export let activeUrl: string = '';
  * @prop export let open: boolean = false;
  * @prop export let containerClass: string = 'divide-y z-50';
+ * @prop export let classContainer: string | undefined = undefined;
  * @prop export let headerClass: string = 'py-1 overflow-hidden rounded-t-lg';
+ * @prop export let classHeader: string | undefined = undefined;
  * @prop export let footerClass: string = 'py-1 overflow-hidden rounded-b-lg';
+ * @prop export let classFooter: string | undefined = undefined;
  * @prop export let activeClass: string = 'text-primary-700 dark:text-primary-700 hover:text-primary-900 dark:hover:text-primary-900';
+ * @prop export let classActive: string | undefined = undefined;
  */
 export default class Dropdown extends SvelteComponent<DropdownProps, DropdownEvents, DropdownSlots> {
 }

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

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/dropdown/Dropdown.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AACC,MAAM,MAAM,YAAY,GAAG;IACzB,WAAW,EAAE,MAAM,CAAC;CACrB,CAAC;AA+EJ,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAwC,CAAC;AACxD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACnD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACrD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEnD;;;;;;;;;GASG;AACH,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,eAAe,CAAC,aAAa,EAAE,cAAc,EAAE,aAAa,CAAC;CAClG"}
+{"version":3,"file":"Dropdown.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/dropdown/Dropdown.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AACC,MAAM,MAAM,YAAY,GAAG;IACzB,WAAW,EAAE,MAAM,CAAC;CACrB,CAAC;AAuFJ,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAwC,CAAC;AACxD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACnD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACrD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEnD;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,eAAe,CAAC,aAAa,EAAE,cAAc,EAAE,aAAa,CAAC;CAClG"}

package/dist/forms/Checkbox.svelte

@@ -46,7 +46,7 @@ function onChange() {
 </script>
 
 <Label class={labelClass(inline, $$props.class)} show={$$slots.default}>
-  <input use:init={group} type="checkbox" bind:checked on:keyup on:keydown on:keypress on:focus on:blur on:click on:mouseover on:mouseenter on:mouseleave on:paste on:change={onChange} on:change {value} {...$$restProps} class={twMerge(spacing, inputClass(custom, color, true, background, $$slots.default || $$props.class))} />
+  <input use:init={group} type="checkbox" bind:checked on:keyup on:keydown on:keypress on:focus on:blur on:click on:mouseover on:mouseenter on:mouseleave on:paste on:change={onChange} on:change {value} {...$$restProps} class={inputClass(custom, color, true, background, spacing, $$slots.default || $$props.class)} />
   <slot />
 </Label>
 

package/dist/forms/Dropzone.svelte

@@ -9,14 +9,18 @@ function keydown(ev) {
         input.click();
     }
 }
+function onClick(event) {
+    event.preventDefault();
+    input.click();
+}
 </script>
 
-<button class={twMerge(defaultClass, $$props.class)} on:keydown={keydown} on:focus on:blur on:mouseenter on:mouseleave on:mouseover on:dragenter on:dragleave on:dragover on:drop type="button">
-  <label class="flex flex-col items-center" tabIndex="0">
-    <slot />
-    <input {...$$restProps} bind:value bind:files bind:this={input} on:change on:click type="file" class="hidden" />
-  </label>
+<button class={twMerge(defaultClass, $$props.class)} on:keydown={keydown} on:click={onClick} on:focus on:blur on:mouseenter on:mouseleave on:mouseover on:dragenter on:dragleave on:dragover on:drop type="button">
+  <slot />
 </button>
+<label class="hidden">
+  <input {...$$restProps} bind:value bind:files bind:this={input} on:change on:click type="file" />
+</label>
 
 <!--
 @component

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

@@ -1 +1 @@
-{"version":3,"file":"Dropzone.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/forms/Dropzone.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AA+BD,QAAA,MAAM,SAAS;;;;gBADwF,QAAQ,GAAG,SAAS;;;;;;;;;;;;;;;;;;;;;CAC7C,CAAC;AAC/E,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACnD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACrD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEnD;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,eAAe,CAAC,aAAa,EAAE,cAAc,EAAE,aAAa,CAAC;CAClG"}
+{"version":3,"file":"Dropzone.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/forms/Dropzone.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AAoCD,QAAA,MAAM,SAAS;;;;gBADwF,QAAQ,GAAG,SAAS;;;;;;;;;;;;;;;;;;;;;CAC7C,CAAC;AAC/E,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACnD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACrD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEnD;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,eAAe,CAAC,aAAa,EAAE,cAAc,EAAE,aAAa,CAAC;CAClG"}

package/dist/forms/Radio.svelte

@@ -12,8 +12,7 @@ const colorClasses = {
     blue: 'text-blue-600 focus:ring-blue-500 dark:focus:ring-blue-600'
 };
 export const labelClass = (inline, extraClass) => twMerge(inline ? 'inline-flex' : 'flex', 'items-center', extraClass);
-export let spacing = 'me-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);
+export const inputClass = (custom, color, rounded, tinted, spacing, 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';
@@ -21,14 +20,15 @@ import Label from './Label.svelte';
 export let color = 'primary';
 export let custom = false;
 export let inline = false;
-export let group = '';
+export let group = undefined;
 export let value = '';
+export let spacing = 'mr-2';
 // tinted if put in component having its own background
 let background = getContext('background');
 </script>
 
 <Label class={labelClass(inline, $$props.class)} show={$$slots.default}>
-  <input type="radio" bind:group on:blur on:change on:click on:focus on:keydown on:keypress on:keyup on:mouseenter on:mouseleave on:mouseover on:paste {value} {...$$restProps} class={inputClass(custom, color, false, background, $$slots.default || $$props.class)} />
+  <input type="radio" bind:group on:blur on:change on:click on:focus on:keydown on:keypress on:keyup on:mouseenter on:mouseleave on:mouseover on:paste {value} {...$$restProps} class={inputClass(custom, color, false, background, spacing, $$slots.default || $$props.class)} />
   <slot />
 </Label>
 
@@ -36,10 +36,10 @@ let background = getContext('background');
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let spacing: string = 'me-2';
 @prop export let color: FormColorType = 'primary';
 @prop export let custom: boolean = false;
 @prop export let inline: boolean = false;
-@prop export let group: number | string = '';
+@prop export let group: number | string | undefined = undefined;
 @prop export let value: number | string = '';
+@prop export let spacing: string = 'mr-2';
 -->

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

@@ -1,7 +1,6 @@
 import { SvelteComponent } from "svelte";
 export declare const labelClass: (inline: boolean, extraClass: string) => string;
-export declare let spacing: string;
-export declare const inputClass: (custom: boolean, color: FormColorType, rounded: boolean, tinted: boolean, extraClass: string) => string;
+export declare const inputClass: (custom: boolean, color: FormColorType, rounded: boolean, tinted: boolean, spacing: string, extraClass: string) => string;
 import type { FormColorType } from '../types';
 declare const __propDef: {
     props: {
@@ -9,8 +8,9 @@ declare const __propDef: {
         color?: FormColorType | undefined;
         custom?: boolean | undefined;
         inline?: boolean | undefined;
-        group?: string | number | undefined;
+        group?: number | string | undefined;
         value?: string | number | undefined;
+        spacing?: string | undefined;
     };
     events: {
         blur: FocusEvent;
@@ -37,12 +37,12 @@ export type RadioSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop export let spacing: string = 'me-2';
  * @prop export let color: FormColorType = 'primary';
  * @prop export let custom: boolean = false;
  * @prop export let inline: boolean = false;
- * @prop export let group: number | string = '';
+ * @prop export let group: number | string | undefined = undefined;
  * @prop export let value: number | string = '';
+ * @prop export let spacing: string = 'mr-2';
  */
 export default class Radio extends SvelteComponent<RadioProps, RadioEvents, RadioSlots> {
 }

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,eAAe,EAAE,MAAM,QAAQ,CAEvC;AAgBC,eAAO,MAAM,UAAU,WAAY,OAAO,cAAc,MAAM,WAAyE,CAAC;AACxI,eAAO,IAAI,OAAO,EAAE,MAAe,CAAC;AAEpC,eAAO,MAAM,UAAU,WAAY,OAAO,SAAS,aAAa,WAAW,OAAO,UAAU,OAAO,cAAc,MAAM,WAAgR,CAAC;AAI1Y,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AA6B9C,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;;;;;;;;;GASG;AACH,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,eAAe,CAAC,UAAU,EAAE,WAAW,EAAE,UAAU,CAAC;CACtF"}
+{"version":3,"file":"Radio.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/forms/Radio.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AAgBC,eAAO,MAAM,UAAU,WAAY,OAAO,cAAc,MAAM,WAAyE,CAAC;AAExI,eAAO,MAAM,UAAU,WAAY,OAAO,SAAS,aAAa,WAAW,OAAO,UAAU,OAAO,WAAW,MAAM,cAAc,MAAM,WAAgR,CAAC;AAI3Z,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AA8B9C,QAAA,MAAM,SAAS;;;;;;gBAD0K,MAAM,GAAG,MAAM,GAAG,SAAS;;;;;;;;;;;;;;;;;;;;;;CACtI,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;;;;;;;;;GASG;AACH,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,eAAe,CAAC,UAAU,EAAE,WAAW,EAAE,UAAU,CAAC;CACtF"}

package/dist/mega-menu/MegaMenu.svelte.d.ts

@@ -17,7 +17,7 @@ declare const __propDef: {
         arrow?: boolean | undefined;
         offset?: number | undefined;
         placement?: import("@floating-ui/dom").Placement | undefined;
-        trigger?: "click" | "hover" | undefined;
+        trigger?: "click" | "focus" | "hover" | undefined;
         triggeredBy?: string | undefined;
         reference?: string | undefined;
         strategy?: "fixed" | "absolute" | undefined;

package/dist/modal/Modal.svelte

@@ -98,7 +98,7 @@ function handleKeys(e) {
       <Frame rounded shadow {...$$restProps} class={frameClass}>
         <!-- Modal header -->
         {#if $$slots.header || title}
-          <Frame color={$$restProps.color} class="flex justify-between items-center p-4 rounded-t-lg">
+          <Frame color={$$restProps.color} class="flex justify-between items-center p-4 md:p-5 rounded-t-lg">
             <slot name="header">
               <h3 class="text-xl font-semibold {$$restProps.color ? '' : 'text-gray-900 dark:text-white'} p-0">
                 {title}
@@ -108,7 +108,7 @@ function handleKeys(e) {
           </Frame>
         {/if}
         <!-- Modal body -->
-        <div class={twMerge('p-6 space-y-6 flex-1 overflow-y-auto overscroll-contain', $$props.bodyClass)} on:keydown|stopPropagation={handleKeys} role="document" on:wheel|stopPropagation|passive>
+        <div class={twMerge('p-4 md:p-5 space-y-4 flex-1 overflow-y-auto overscroll-contain', $$props.bodyClass)} on:keydown|stopPropagation={handleKeys} role="document" on:wheel|stopPropagation|passive>
           {#if dismissable && !$$slots.header && !title}
             <CloseButton name="Close modal" class="absolute top-3 end-2.5" on:click={hide} color={$$restProps.color} />
           {/if}
@@ -116,7 +116,7 @@ function handleKeys(e) {
         </div>
         <!-- Modal footer -->
         {#if $$slots.footer}
-          <Frame color={$$restProps.color} class="flex items-center p-6 space-x-2 rtl:space-x-reverse rounded-b-lg">
+          <Frame color={$$restProps.color} class="flex items-center p-4 md:p-5 space-x-3 rtl:space-x-reverse rounded-b-lg">
             <slot name="footer" />
           </Frame>
         {/if}

package/dist/popover/Popover.svelte.d.ts

@@ -16,7 +16,7 @@ declare const __propDef: {
         arrow?: boolean | undefined;
         offset?: number | undefined;
         placement?: import("@floating-ui/dom").Placement | undefined;
-        trigger?: "click" | "hover" | undefined;
+        trigger?: "click" | "focus" | "hover" | undefined;
         triggeredBy?: string | undefined;
         reference?: string | undefined;
         strategy?: "fixed" | "absolute" | undefined;

package/dist/speed-dial/SpeedDial.svelte

@@ -59,7 +59,7 @@ $: poperClass = twMerge(popperDefaultClass, ['top', 'bottom'].includes(placement
 @prop export let placement: Placement = 'top';
 @prop export let pill: boolean = true;
 @prop export let tooltip: Placement | 'none' = 'left';
-@prop export let trigger: 'hover' | 'click' = 'hover';
+@prop export let trigger: 'hover' | 'click' | 'focus' = 'hover';
 @prop export let textOutside: boolean = false;
 @prop export let id: string = generateId();
 @prop export let name: string = 'Open actions menu';

package/dist/speed-dial/SpeedDial.svelte.d.ts

@@ -13,7 +13,7 @@ declare const __propDef: {
         placement?: Placement | undefined;
         pill?: boolean | undefined;
         tooltip?: "none" | Placement | undefined;
-        trigger?: "click" | "hover" | undefined;
+        trigger?: "click" | "focus" | "hover" | undefined;
         textOutside?: boolean | undefined;
         id?: string | undefined;
         name?: string | undefined;
@@ -39,7 +39,7 @@ export type SpeedDialSlots = typeof __propDef.slots;
  * @prop export let placement: Placement = 'top';
  * @prop export let pill: boolean = true;
  * @prop export let tooltip: Placement | 'none' = 'left';
- * @prop export let trigger: 'hover' | 'click' = 'hover';
+ * @prop export let trigger: 'hover' | 'click' | 'focus' = 'hover';
  * @prop export let textOutside: boolean = false;
  * @prop export let id: string = generateId();
  * @prop export let name: string = 'Open actions menu';

package/dist/spinner/Spinner.svelte

@@ -37,7 +37,7 @@ let fillColorClass = color === undefined ? '' : fillColorClasses[color] ?? fillC
 @prop export let color: 'primary' | 'blue' | 'gray' | 'green' | 'red' | 'yellow' | 'pink' | 'purple' | 'white' | 'custom' | undefined = 'primary';
 @prop export let bg: string = 'text-gray-300';
 @prop export let customColor: string = '';
-@prop export let size: string = '8';
+@prop export let size: string | number = '8';
 @prop export let currentFill: string = 'currentFill';
 @prop export let currentColor: string = 'currentColor';
 -->

package/dist/spinner/Spinner.svelte.d.ts

@@ -5,7 +5,7 @@ declare const __propDef: {
         color?: 'primary' | 'blue' | 'gray' | 'green' | 'red' | 'yellow' | 'pink' | 'purple' | 'white' | 'custom' | undefined;
         bg?: string | undefined;
         customColor?: string | undefined;
-        size?: string | undefined;
+        size?: string | number | undefined;
         currentFill?: string | undefined;
         currentColor?: string | undefined;
     };
@@ -23,7 +23,7 @@ export type SpinnerSlots = typeof __propDef.slots;
  * @prop export let color: 'primary' | 'blue' | 'gray' | 'green' | 'red' | 'yellow' | 'pink' | 'purple' | 'white' | 'custom' | undefined = 'primary';
  * @prop export let bg: string = 'text-gray-300';
  * @prop export let customColor: string = '';
- * @prop export let size: string = '8';
+ * @prop export let size: string | number = '8';
  * @prop export let currentFill: string = 'currentFill';
  * @prop export let currentColor: string = 'currentColor';
  */

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

@@ -32,7 +32,7 @@ declare const __propDef: {
         icon: {};
         default: {};
         'close-button': {
-            close: (ev: MouseEvent | undefined) => void;
+            close: any;
         };
     };
 };

package/dist/tooltip/Tooltip.svelte.d.ts

@@ -16,7 +16,7 @@ declare const __propDef: {
         arrow?: boolean | undefined;
         offset?: number | undefined;
         placement?: import("@floating-ui/dom").Placement | undefined;
-        trigger?: "click" | "hover" | undefined;
+        trigger?: "click" | "focus" | "hover" | undefined;
         triggeredBy?: string | undefined;
         reference?: string | undefined;
         strategy?: "fixed" | "absolute" | undefined;

package/dist/typography/P.svelte

@@ -62,12 +62,12 @@ const whitespaces = {
     preline: 'whitespace-pre-line',
     prewrap: 'whitespace-pre-wrap'
 };
-let colorAndopacity = color
+$: colorAndopacity = color
     .split(' ')
     .map((element) => element.trim())
     .map((element) => element + '/' + String(opacity))
     .join(' ');
-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);
+$: 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/utils/Popper.svelte

@@ -17,6 +17,8 @@ export let middlewares = [dom.flip(), dom.shift()];
 const dispatch = createEventDispatcher();
 let clickable;
 $: clickable = trigger === 'click';
+let hoverable;
+$: hoverable = trigger === 'hover';
 $: dispatch('show', open);
 $: placement && (referenceEl = referenceEl);
 let referenceEl;
@@ -93,8 +95,8 @@ onMount(() => {
         ['focusin', showHandler, true],
         ['focusout', hideHandler, true],
         ['click', showHandler, clickable],
-        ['mouseenter', showHandler, !clickable],
-        ['mouseleave', hideHandler, !clickable]
+        ['mouseenter', showHandler, hoverable],
+        ['mouseleave', hideHandler, hoverable]
     ];
     if (triggeredBy)
         triggerEls = [...document.querySelectorAll(triggeredBy)];
@@ -117,7 +119,7 @@ onMount(() => {
         }
         else {
             referenceEl.addEventListener('focusout', hideHandler);
-            if (!clickable)
+            if (hoverable)
                 referenceEl.addEventListener('mouseleave', hideHandler);
         }
     }
@@ -172,7 +174,7 @@ function initArrow(node) {
 @prop export let arrow: boolean = true;
 @prop export let offset: number = 8;
 @prop export let placement: Placement = 'top';
-@prop export let trigger: 'hover' | 'click' = 'hover';
+@prop export let trigger: 'hover' | 'click' | 'focus' = 'hover';
 @prop export let triggeredBy: string | undefined = undefined;
 @prop export let reference: string | undefined = undefined;
 @prop export let strategy: 'absolute' | 'fixed' = 'absolute';

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

@@ -17,7 +17,7 @@ declare const __propDef: {
         arrow?: boolean | undefined;
         offset?: number | undefined;
         placement?: Placement | undefined;
-        trigger?: "click" | "hover" | undefined;
+        trigger?: "click" | "focus" | "hover" | undefined;
         triggeredBy?: string | undefined;
         reference?: string | undefined;
         strategy?: "fixed" | "absolute" | undefined;
@@ -43,7 +43,7 @@ export type PopperSlots = typeof __propDef.slots;
  * @prop export let arrow: boolean = true;
  * @prop export let offset: number = 8;
  * @prop export let placement: Placement = 'top';
- * @prop export let trigger: 'hover' | 'click' = 'hover';
+ * @prop export let trigger: 'hover' | 'click' | 'focus' = 'hover';
  * @prop export let triggeredBy: string | undefined = undefined;
  * @prop export let reference: string | undefined = undefined;
  * @prop export let strategy: 'absolute' | 'fixed' = 'absolute';

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,eAAe,EAAE,MAAM,QAAQ,CAEvC;AACD,OAAO,KAAK,EAAqC,SAAS,EAAQ,MAAM,kBAAkB,CAAC;AA0M3F,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;;;;;;;;;;;;;;GAcG;AACH,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,eAAe,CAAC,WAAW,EAAE,YAAY,EAAE,WAAW,CAAC;CAC1F"}
+{"version":3,"file":"Popper.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/utils/Popper.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AACD,OAAO,KAAK,EAAqC,SAAS,EAAQ,MAAM,kBAAkB,CAAC;AA6M3F,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;;;;;;;;;;;;;;GAcG;AACH,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,eAAe,CAAC,WAAW,EAAE,YAAY,EAAE,WAAW,CAAC;CAC1F"}

package/dist/utils/TransitionFrame.svelte

@@ -23,7 +23,9 @@ function close(ev) {
     </div>
   {/if}
 {:else}
-  <Frame {...$$restProps}><slot {close} /></Frame>
+  {#if open}
+    <Frame {...$$restProps}><slot /></Frame>
+  {/if}
 {/if}
 
 <!--

package/dist/utils/TransitionFrame.svelte.d.ts

@@ -21,9 +21,7 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        default: {
-            close: (ev: MouseEvent | undefined) => void;
-        };
+        default: {};
     };
 };
 export type TransitionFrameProps = typeof __propDef.props;

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

@@ -1 +1 @@
-{"version":3,"file":"TransitionFrame.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/utils/TransitionFrame.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AACD,OAAO,EAAQ,KAAK,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAGhE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AA+C9C,QAAA,MAAM,SAAS;;;;;;;;;;;;;6BAvCgB,WAAW,UAAU,GAAG,KAAK,gBAAgB;iBAK/D,GAAG;;;;;;;wBAcK,UAAU,GAAG,SAAS;;;CAoBY,CAAC;AACxD,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;;;;;;;GAOG;AACH,MAAM,CAAC,OAAO,OAAO,eAAgB,SAAQ,eAAe,CAAC,oBAAoB,EAAE,qBAAqB,EAAE,oBAAoB,CAAC;CAC9H"}
+{"version":3,"file":"TransitionFrame.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/utils/TransitionFrame.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AACD,OAAO,EAAQ,KAAK,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAGhE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAiD9C,QAAA,MAAM,SAAS;;;;;;;;;;;;;6BAzCgB,WAAW,UAAU,GAAG,KAAK,gBAAgB;iBAK/D,GAAG;;;;;;;;CAoCuC,CAAC;AACxD,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;;;;;;;GAOG;AACH,MAAM,CAAC,OAAO,OAAO,eAAgB,SAAQ,eAAe,CAAC,oBAAoB,EAAE,qBAAqB,EAAE,oBAAoB,CAAC;CAC9H"}

package/dist/utils/focusTrap.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"focusTrap.d.ts","sourceRoot":"","sources":["../../../../src/lib/utils/focusTrap.js"],"names":[],"mappings":";AA0Cu1rC,oJAAsM"}
+{"version":3,"file":"focusTrap.d.ts","sourceRoot":"","sources":["../../../../src/lib/utils/focusTrap.js"],"names":[],"mappings":";AA0Ci8rC,oJAAsM"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.44.22",
+  "version": "0.44.24",
   "description": "Flowbite components for Svelte",
   "main": "dist/index.js",
   "author": {
@@ -33,39 +33,39 @@
   },
   "devDependencies": {
     "@docsearch/js": "^3.5.2",
-    "@playwright/test": "^1.40.1",
-    "@sveltejs/adapter-vercel": "^4.0.4",
-    "@sveltejs/kit": "^2.3.2",
-    "@sveltejs/package": "2.2.2",
-    "@sveltejs/vite-plugin-svelte": "^3.0.1",
-    "@typescript-eslint/eslint-plugin": "^6.18.1",
-    "@typescript-eslint/parser": "^6.18.1",
-    "autoprefixer": "^10.4.16",
-    "esbuild": "0.19.5",
+    "@playwright/test": "^1.41.2",
+    "@sveltejs/adapter-vercel": "^5.1.0",
+    "@sveltejs/kit": "^2.5.1",
+    "@sveltejs/package": "2.2.7",
+    "@sveltejs/vite-plugin-svelte": "^3.0.2",
+    "@typescript-eslint/eslint-plugin": "^7.0.2",
+    "@typescript-eslint/parser": "^7.0.2",
+    "autoprefixer": "^10.4.17",
+    "esbuild": "0.20.1",
     "eslint": "^8.56.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-svelte": "^2.35.1",
     "flowbite-svelte-icons": "^0.4.5",
     "mdsvex": "^0.11.0",
     "mdsvexamples": "^0.4.1",
-    "postcss": "^8.4.33",
-    "postcss-load-config": "^4.0.2",
-    "prettier": "^3.1.1",
-    "prettier-plugin-svelte": "^3.1.2",
+    "postcss": "^8.4.35",
+    "postcss-load-config": "^5.0.3",
+    "prettier": "^3.2.5",
+    "prettier-plugin-svelte": "^3.2.1",
     "prism-themes": "^1.9.0",
     "publint": "^0.2.7",
-    "svelte": "^4.2.8",
-    "svelte-check": "^3.6.3",
-    "svelte-lib-helpers": "^0.3.15",
+    "svelte": "^4.2.11",
+    "svelte-check": "^3.6.4",
+    "svelte-lib-helpers": "^0.4.1",
     "svelte-meta-tags": "^3.1.0",
     "svelte-preprocess": "^5.1.3",
-    "svelte2tsx": "^0.7.0",
+    "svelte2tsx": "^0.7.1",
     "tailwind-merge": "^1.13.1",
     "tailwindcss": "^3.4.1",
     "tslib": "^2.6.2",
     "typescript": "^5.3.3",
-    "vite": "^5.0.11",
-    "vitest": "^0.34.6"
+    "vite": "^5.1.4",
+    "vitest": "^1.3.1"
   },
   "peerDependencies": {
     "svelte": "^4.0.0"
@@ -114,13 +114,13 @@
     "url": "https://github.com/themesberg/flowbite-svelte"
   },
   "dependencies": {
-    "@floating-ui/dom": "^1.5.4",
-    "apexcharts": "^3.45.1",
-    "flowbite": "^2.2.1",
-    "tailwind-merge": "^2.2.0"
+    "@floating-ui/dom": "^1.6.3",
+    "apexcharts": "^3.46.0",
+    "flowbite": "^2.3.0",
+    "tailwind-merge": "^2.2.1"
   },
   "engines": {
-    "npm": ">=7.0.0",
+    "pnpm": ">=8.0.0",
     "node": ">=18.0.0"
   },
   "files": [
@@ -750,6 +750,7 @@
     "./Video.svelte": {
       "types": "./dist/video/Video.svelte.d.ts",
       "svelte": "./dist/video/Video.svelte"
-    }
+    },
+    "./package.json": "./package.json"
   }
 }