flowbite-svelte 0.46.18 → 0.46.20

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

@@ -1,13 +1,13 @@
 import { SvelteComponentTyped } from "svelte";
+import type { HTMLAttributes } from 'svelte/elements';
 declare const __propDef: {
-    props: {
-        [x: string]: any;
-        btnName?: string | undefined;
-        appBtnPosition?: ("left" | "middle" | "right") | undefined;
-        activeClass?: string | undefined;
-        href?: string | undefined;
-        exact?: boolean | undefined;
-        spanClass?: string | undefined;
+    props: HTMLAttributes<HTMLAnchorElement | HTMLButtonElement> & {
+        btnName?: string;
+        appBtnPosition?: "left" | "middle" | "right";
+        activeClass?: string;
+        href?: string;
+        exact?: boolean;
+        spanClass?: string;
     };
     events: {
         click: MouseEvent;
@@ -31,12 +31,12 @@ export type BottomNavItemSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop export let btnName: string = '';
- * @prop export let appBtnPosition: 'left' | 'middle' | 'right' = 'middle';
- * @prop export let activeClass: string | undefined = undefined;
- * @prop export let href: string = '';
- * @prop export let exact: boolean = true;
- * @prop export let spanClass: string = '';
+ * @prop export let btnName: $$Props['btnName'] = '';
+ * @prop export let appBtnPosition: NonNullable<$$Props['appBtnPosition']> = 'middle';
+ * @prop export let activeClass: $$Props['activeClass'] = undefined;
+ * @prop export let href: NonNullable<$$Props['href']> = '';
+ * @prop export let exact: $$Props['exact'] = true;
+ * @prop export let spanClass: $$Props['spanClass'] = '';
  */
 export default class BottomNavItem extends SvelteComponentTyped<BottomNavItemProps, BottomNavItemEvents, BottomNavItemSlots> {
 }

package/dist/breadcrumb/Breadcrumb.svelte

@@ -17,9 +17,9 @@ let classNav = solid ? solidClass : navClass;
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let solid: boolean = false;
-@prop export let navClass: string = 'flex';
-@prop export let solidClass: string = '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';
-@prop export let olClass: string = 'inline-flex items-center space-x-1 rtl:space-x-reverse md:space-x-3 rtl:space-x-reverse';
-@prop export let ariaLabel: string = 'Breadcrumb';
+@prop export let solid: $$Props['solid'] = false;
+@prop export let navClass: NonNullable<$$Props['navClass']> = 'flex';
+@prop export let solidClass: NonNullable<$$Props['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';
+@prop export let olClass: $$Props['olClass'] = 'inline-flex items-center space-x-1 rtl:space-x-reverse md:space-x-3 rtl:space-x-reverse';
+@prop export let ariaLabel: $$Props['ariaLabel'] = 'Breadcrumb';
 -->

package/dist/breadcrumb/Breadcrumb.svelte.d.ts

@@ -1,12 +1,12 @@
 import { SvelteComponentTyped } from "svelte";
+import type { HTMLAttributes } from 'svelte/elements';
 declare const __propDef: {
-    props: {
-        [x: string]: any;
-        solid?: boolean | undefined;
-        navClass?: string | undefined;
-        solidClass?: string | undefined;
-        olClass?: string | undefined;
-        ariaLabel?: string | undefined;
+    props: HTMLAttributes<HTMLDivElement> & {
+        solid?: boolean;
+        navClass?: string;
+        solidClass?: string;
+        olClass?: string;
+        ariaLabel?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -21,11 +21,11 @@ export type BreadcrumbSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop export let solid: boolean = false;
- * @prop export let navClass: string = 'flex';
- * @prop export let solidClass: string = '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';
- * @prop export let olClass: string = 'inline-flex items-center space-x-1 rtl:space-x-reverse md:space-x-3 rtl:space-x-reverse';
- * @prop export let ariaLabel: string = 'Breadcrumb';
+ * @prop export let solid: $$Props['solid'] = false;
+ * @prop export let navClass: NonNullable<$$Props['navClass']> = 'flex';
+ * @prop export let solidClass: NonNullable<$$Props['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';
+ * @prop export let olClass: $$Props['olClass'] = 'inline-flex items-center space-x-1 rtl:space-x-reverse md:space-x-3 rtl:space-x-reverse';
+ * @prop export let ariaLabel: $$Props['ariaLabel'] = 'Breadcrumb';
  */
 export default class Breadcrumb extends SvelteComponentTyped<BreadcrumbProps, BreadcrumbEvents, BreadcrumbSlots> {
 }

package/dist/breadcrumb/BreadcrumbItem.svelte

@@ -42,9 +42,9 @@ export let homeClass = "inline-flex items-center text-sm font-medium text-gray-7
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let home: boolean = false;
-@prop export let href: string | undefined = undefined;
-@prop export let linkClass: string = 'ms-1 text-sm font-medium text-gray-700 hover:text-gray-900 md:ms-2 dark:text-gray-400 dark:hover:text-white';
-@prop export let spanClass: string = 'ms-1 text-sm font-medium text-gray-500 md:ms-2 dark:text-gray-400';
-@prop export let homeClass: string = 'inline-flex items-center text-sm font-medium text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white';
+@prop export let home: $$Props['home'] = false;
+@prop export let href: $$Props['href'] = undefined;
+@prop export let linkClass: $$Props['linkClass'] = 'ms-1 text-sm font-medium text-gray-700 hover:text-gray-900 md:ms-2 dark:text-gray-400 dark:hover:text-white';
+@prop export let spanClass: $$Props['spanClass'] = 'ms-1 text-sm font-medium text-gray-500 md:ms-2 dark:text-gray-400';
+@prop export let homeClass: $$Props['homeClass'] = 'inline-flex items-center text-sm font-medium text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white';
 -->

package/dist/breadcrumb/BreadcrumbItem.svelte.d.ts

@@ -1,12 +1,12 @@
 import { SvelteComponentTyped } from "svelte";
+import type { HTMLLiAttributes } from 'svelte/elements';
 declare const __propDef: {
-    props: {
-        [x: string]: any;
-        home?: boolean | undefined;
-        href?: string | undefined;
-        linkClass?: string | undefined;
-        spanClass?: string | undefined;
-        homeClass?: string | undefined;
+    props: HTMLLiAttributes & {
+        home?: boolean;
+        href?: string;
+        linkClass?: string;
+        spanClass?: string;
+        homeClass?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -22,11 +22,11 @@ export type BreadcrumbItemSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop export let home: boolean = false;
- * @prop export let href: string | undefined = undefined;
- * @prop export let linkClass: string = 'ms-1 text-sm font-medium text-gray-700 hover:text-gray-900 md:ms-2 dark:text-gray-400 dark:hover:text-white';
- * @prop export let spanClass: string = 'ms-1 text-sm font-medium text-gray-500 md:ms-2 dark:text-gray-400';
- * @prop export let homeClass: string = 'inline-flex items-center text-sm font-medium text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white';
+ * @prop export let home: $$Props['home'] = false;
+ * @prop export let href: $$Props['href'] = undefined;
+ * @prop export let linkClass: $$Props['linkClass'] = 'ms-1 text-sm font-medium text-gray-700 hover:text-gray-900 md:ms-2 dark:text-gray-400 dark:hover:text-white';
+ * @prop export let spanClass: $$Props['spanClass'] = 'ms-1 text-sm font-medium text-gray-500 md:ms-2 dark:text-gray-400';
+ * @prop export let homeClass: $$Props['homeClass'] = 'inline-flex items-center text-sm font-medium text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white';
  */
 export default class BreadcrumbItem extends SvelteComponentTyped<BreadcrumbItemProps, BreadcrumbItemEvents, BreadcrumbItemSlots> {
 }

package/dist/button-group/ButtonGroup.svelte

@@ -13,6 +13,6 @@ setContext("group", { size });
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let size: SizeType = 'md';
-@prop export let divClass: string = 'inline-flex rounded-lg shadow-sm';
+@prop export let size: $$Props['size'] = 'md';
+@prop export let divClass: $$Props['divClass'] = 'inline-flex rounded-lg shadow-sm';
 -->

package/dist/button-group/ButtonGroup.svelte.d.ts

@@ -1,10 +1,10 @@
 import { SvelteComponentTyped } from "svelte";
+import type { HTMLAttributes } from 'svelte/elements';
 import type { SizeType } from '../types';
 declare const __propDef: {
-    props: {
-        [x: string]: any;
-        size?: SizeType | undefined;
-        divClass?: string | undefined;
+    props: HTMLAttributes<HTMLDivElement> & {
+        size?: SizeType;
+        divClass?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -19,8 +19,8 @@ export type ButtonGroupSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop export let size: SizeType = 'md';
- * @prop export let divClass: string = 'inline-flex rounded-lg shadow-sm';
+ * @prop export let size: $$Props['size'] = 'md';
+ * @prop export let divClass: $$Props['divClass'] = 'inline-flex rounded-lg shadow-sm';
  */
 export default class ButtonGroup extends SvelteComponentTyped<ButtonGroupProps, ButtonGroupEvents, ButtonGroupSlots> {
 }

package/dist/buttons/Button.svelte

@@ -121,14 +121,14 @@ $: buttonClass = twMerge(
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let pill: boolean = false;
-@prop export let outline: boolean = false;
-@prop export let size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = group ? 'sm' : 'md';
-@prop export let href: string | undefined = undefined;
-@prop export let type: HTMLButtonAttributes['type'] = 'button';
-@prop export let color: ButtonColor = group ? (outline ? 'dark' : 'alternative') : 'primary';
-@prop export let shadow: boolean = false;
-@prop export let tag: string = 'button';
-@prop export let checked: boolean | undefined = undefined;
-@prop export let disabled: boolean = false;
+@prop export let pill: $$Props['pill'] = false;
+@prop export let outline: $$Props['outline'] = false;
+@prop export let size: NonNullable<$$Props['size']> = group ? 'sm' : 'md';
+@prop export let href: $$Props['href'] = undefined;
+@prop export let type: $$Props['type'] = 'button';
+@prop export let color: NonNullable<$$Props['color']> = group ? (outline ? 'dark' : 'alternative') : 'primary';
+@prop export let shadow: $$Props['shadow'] = false;
+@prop export let tag: $$Props['tag'] = 'button';
+@prop export let checked: $$Props['checked'] = undefined;
+@prop export let disabled: $$Props['disabled'] = false;
 -->

package/dist/buttons/Button.svelte.d.ts

@@ -1,18 +1,20 @@
 import { SvelteComponentTyped } from "svelte";
-import type { HTMLButtonAttributes } from 'svelte/elements';
+import type { HTMLButtonAttributes, HTMLAttributes } from 'svelte/elements';
 declare const __propDef: {
-    props: {
-        [x: string]: any;
-        pill?: boolean | undefined;
-        outline?: boolean | undefined;
-        size?: ("xs" | "sm" | "md" | "lg" | "xl") | undefined;
-        href?: string | undefined;
+    props: HTMLAttributes<HTMLAnchorElement | HTMLButtonElement> & {
+        pill?: boolean;
+        outline?: boolean;
+        size?: "xs" | "sm" | "md" | "lg" | "xl";
+        href?: string;
         type?: HTMLButtonAttributes["type"];
-        color?: ("red" | "yellow" | "green" | "purple" | "blue" | "light" | "dark" | "primary" | "none" | "alternative") | undefined;
-        shadow?: boolean | undefined;
-        tag?: string | undefined;
-        checked?: boolean | undefined;
-        disabled?: boolean | undefined;
+        color?: "red" | "yellow" | "green" | "purple" | "blue" | "light" | "dark" | "primary" | "none" | "alternative";
+        shadow?: boolean;
+        tag?: string;
+        checked?: boolean;
+        disabled?: boolean;
+        target?: string;
+        rel?: string;
+        name?: string;
     };
     events: {
         click: MouseEvent;
@@ -37,16 +39,16 @@ export type ButtonSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop export let pill: boolean = false;
- * @prop export let outline: boolean = false;
- * @prop export let size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = group ? 'sm' : 'md';
- * @prop export let href: string | undefined = undefined;
- * @prop export let type: HTMLButtonAttributes['type'] = 'button';
- * @prop export let color: ButtonColor = group ? (outline ? 'dark' : 'alternative') : 'primary';
- * @prop export let shadow: boolean = false;
- * @prop export let tag: string = 'button';
- * @prop export let checked: boolean | undefined = undefined;
- * @prop export let disabled: boolean = false;
+ * @prop export let pill: $$Props['pill'] = false;
+ * @prop export let outline: $$Props['outline'] = false;
+ * @prop export let size: NonNullable<$$Props['size']> = group ? 'sm' : 'md';
+ * @prop export let href: $$Props['href'] = undefined;
+ * @prop export let type: $$Props['type'] = 'button';
+ * @prop export let color: NonNullable<$$Props['color']> = group ? (outline ? 'dark' : 'alternative') : 'primary';
+ * @prop export let shadow: $$Props['shadow'] = false;
+ * @prop export let tag: $$Props['tag'] = 'button';
+ * @prop export let checked: $$Props['checked'] = undefined;
+ * @prop export let disabled: $$Props['disabled'] = false;
  */
 export default class Button extends SvelteComponentTyped<ButtonProps, ButtonEvents, ButtonSlots> {
 }

package/dist/buttons/GradientButton.svelte

@@ -68,6 +68,6 @@ $: divClass = twMerge($$props.outline && "p-0.5", gradientClasses[color], shadow
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let color: keyof typeof gradientClasses = 'blue';
-@prop export let shadow: boolean = false;
+@prop export let color: NonNullable<$$Props['color']> = 'blue';
+@prop export let shadow: $$Props['shadow'] = false;
 -->

package/dist/buttons/GradientButton.svelte.d.ts

@@ -1,9 +1,22 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {
-        [x: string]: any;
-        color?: ("red" | "green" | "purple" | "pink" | "blue" | "teal" | "cyan" | "lime" | "purpleToBlue" | "cyanToBlue" | "greenToBlue" | "purpleToPink" | "pinkToOrange" | "tealToLime" | "redToYellow") | undefined;
-        shadow?: boolean | undefined;
+    props: Omit<import("svelte/elements").HTMLAttributes<HTMLAnchorElement | HTMLButtonElement> & {
+        pill?: boolean;
+        outline?: boolean;
+        size?: "xs" | "sm" | "md" | "lg" | "xl";
+        href?: string;
+        type?: import("svelte/elements").HTMLButtonAttributes["type"];
+        color?: "red" | "yellow" | "green" | "purple" | "blue" | "light" | "dark" | "primary" | "none" | "alternative";
+        shadow?: boolean;
+        tag?: string;
+        checked?: boolean;
+        disabled?: boolean;
+        target?: string;
+        rel?: string;
+        name?: string;
+    }, "color"> & {
+        color?: "red" | "green" | "purple" | "pink" | "blue" | "teal" | "cyan" | "lime" | "purpleToBlue" | "cyanToBlue" | "greenToBlue" | "purpleToPink" | "pinkToOrange" | "tealToLime" | "redToYellow";
+        shadow?: boolean;
     };
     events: {
         click: MouseEvent;
@@ -28,8 +41,8 @@ export type GradientButtonSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop export let color: keyof typeof gradientClasses = 'blue';
- * @prop export let shadow: boolean = false;
+ * @prop export let color: NonNullable<$$Props['color']> = 'blue';
+ * @prop export let shadow: $$Props['shadow'] = false;
  */
 export default class GradientButton extends SvelteComponentTyped<GradientButtonProps, GradientButtonEvents, GradientButtonSlots> {
 }

package/dist/cards/Card.svelte

@@ -46,11 +46,11 @@ $: imgCls = twMerge(reverse ? "rounded-b-lg" : "rounded-t-lg", horizontal && "ob
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let href: string | null | undefined = undefined;
-@prop export let horizontal: boolean = false;
-@prop export let reverse: boolean = false;
-@prop export let img: string | undefined = undefined;
-@prop export let padding: SizeType | 'none' = 'lg';
-@prop export let size: SizeType | 'none' = 'sm';
-@prop export let imgClass: string = '';
+@prop export let href: $$Props['href'] = undefined;
+@prop export let horizontal: $$Props['horizontal'] = false;
+@prop export let reverse: $$Props['reverse'] = false;
+@prop export let img: $$Props['img'] = undefined;
+@prop export let padding: NonNullable<$$Props['padding']> = 'lg';
+@prop export let size: NonNullable<$$Props['size']> = 'sm';
+@prop export let imgClass: $$Props['imgClass'] = '';
 -->

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

@@ -16,6 +16,7 @@ declare const __propDef: {
         transition?: (node: HTMLElement, params: any) => import("svelte/transition").TransitionConfig;
         params?: any;
     } & {
+        href?: string;
         horizontal?: boolean;
         reverse?: boolean;
         img?: string;
@@ -42,13 +43,13 @@ export type CardSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop export let href: string | null | undefined = undefined;
- * @prop export let horizontal: boolean = false;
- * @prop export let reverse: boolean = false;
- * @prop export let img: string | undefined = undefined;
- * @prop export let padding: SizeType | 'none' = 'lg';
- * @prop export let size: SizeType | 'none' = 'sm';
- * @prop export let imgClass: string = '';
+ * @prop export let href: $$Props['href'] = undefined;
+ * @prop export let horizontal: $$Props['horizontal'] = false;
+ * @prop export let reverse: $$Props['reverse'] = false;
+ * @prop export let img: $$Props['img'] = undefined;
+ * @prop export let padding: NonNullable<$$Props['padding']> = 'lg';
+ * @prop export let size: NonNullable<$$Props['size']> = 'sm';
+ * @prop export let imgClass: $$Props['imgClass'] = '';
  */
 export default class Card extends SvelteComponentTyped<CardProps, CardEvents, CardSlots> {
 }

package/dist/carousel/Thumbnail.svelte

@@ -11,8 +11,8 @@ export let inactiveClass = "opacity-60";
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let selected: $$Props['selected'] = false;
-@prop export let alt: $$Props['alt'] = '';
-@prop export let activeClass: $$Props['activeClass'] = 'opacity-100';
-@prop export let inactiveClass: $$Props['inactiveClass'] = 'opacity-60';
+@prop export let selected: boolean = false;
+@prop export let alt: string | undefined | null = '';
+@prop export let activeClass: string = 'opacity-100';
+@prop export let inactiveClass: string = 'opacity-60';
 -->

package/dist/carousel/Thumbnail.svelte.d.ts

@@ -3,7 +3,7 @@ import type { HTMLImgAttributes } from 'svelte/elements';
 declare const __propDef: {
     props: HTMLImgAttributes & {
         selected?: boolean;
-        alt?: string;
+        alt?: string | undefined | null;
         activeClass?: string;
         inactiveClass?: string;
     };
@@ -18,10 +18,10 @@ export type ThumbnailSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop export let selected: $$Props['selected'] = false;
- * @prop export let alt: $$Props['alt'] = '';
- * @prop export let activeClass: $$Props['activeClass'] = 'opacity-100';
- * @prop export let inactiveClass: $$Props['inactiveClass'] = 'opacity-60';
+ * @prop export let selected: boolean = false;
+ * @prop export let alt: string | undefined | null = '';
+ * @prop export let activeClass: string = 'opacity-100';
+ * @prop export let inactiveClass: string = 'opacity-60';
  */
 export default class Thumbnail extends SvelteComponentTyped<ThumbnailProps, ThumbnailEvents, ThumbnailSlots> {
 }

package/dist/charts/Chart.svelte

@@ -1,21 +1,28 @@
-<script>export let options;
-export let chart;
+<script>import { onMount } from "svelte";
+export let options;
+let chart;
 function initChart(node, options2) {
   async function asyncInitChart() {
-    const ApexCharts = (await import("apexcharts")).default;
+    const ApexChartsModule = await import("apexcharts");
+    const ApexCharts = ApexChartsModule.default;
     chart = new ApexCharts(node, options2);
-    chart.render();
+    await chart.render();
   }
   asyncInitChart();
   return {
     update(options3) {
-      chart && chart.updateOptions(options3);
+      chart?.updateOptions(options3);
     },
     destroy() {
-      chart && chart.destroy();
+      chart?.destroy();
     }
   };
 }
+onMount(() => {
+  return () => {
+    chart?.destroy();
+  };
+});
 </script>
 
 <div use:initChart={options} class={$$props.class}></div>
@@ -25,5 +32,4 @@ function initChart(node, options2) {
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
 @prop export let options: ApexOptions;
-@prop export let chart: ApexCharts;
 -->

package/dist/charts/Chart.svelte.d.ts

@@ -2,9 +2,8 @@ import { SvelteComponentTyped } from "svelte";
 import type { ApexOptions } from 'apexcharts';
 declare const __propDef: {
     props: {
-        [x: string]: any;
         options: ApexOptions;
-        chart: ApexCharts;
+        class?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -18,7 +17,6 @@ export type ChartSlots = typeof __propDef.slots;
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
  * @prop export let options: ApexOptions;
- * @prop export let chart: ApexCharts;
  */
 export default class Chart extends SvelteComponentTyped<ChartProps, ChartEvents, ChartSlots> {
 }

package/dist/darkmode/DarkMode.svelte

@@ -52,7 +52,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 rounded-lg text-sm p-2.5';
-@prop export let size: 'sm' | 'md' | 'lg' = 'md';
-@prop export let ariaLabel: string = 'Dark mode';
+@prop export let btnClass: $$Props['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';
+@prop export let size: NonNullable<$$Props['size']> = 'md';
+@prop export let ariaLabel: $$Props['ariaLabel'] = 'Dark mode';
 -->

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

@@ -1,10 +1,10 @@
 import { SvelteComponentTyped } from "svelte";
+import type { HTMLButtonAttributes } from 'svelte/elements';
 declare const __propDef: {
-    props: {
-        [x: string]: any;
-        btnClass?: string | undefined;
-        size?: ("sm" | "md" | "lg") | undefined;
-        ariaLabel?: string | undefined;
+    props: HTMLButtonAttributes & {
+        btnClass?: string;
+        size?: "sm" | "md" | "lg";
+        ariaLabel?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -20,9 +20,9 @@ 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 rounded-lg text-sm p-2.5';
- * @prop export let size: 'sm' | 'md' | 'lg' = 'md';
- * @prop export let ariaLabel: string = 'Dark mode';
+ * @prop export let btnClass: $$Props['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';
+ * @prop export let size: NonNullable<$$Props['size']> = 'md';
+ * @prop export let ariaLabel: $$Props['ariaLabel'] = 'Dark mode';
  */
 export default class DarkMode extends SvelteComponentTyped<DarkModeProps, DarkModeEvents, DarkModeSlots> {
 }

package/dist/device-mockups/Android.svelte

@@ -23,11 +23,11 @@ export let right = "h-[64px] w-[3px] bg-gray-800 absolute -right-[17px] top-[142
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let div: string = 'relative mx-auto border-gray-800 dark:border-gray-800 bg-gray-800 border-[14px] rounded-xl h-[600px] w-[300px] shadow-xl';
-@prop export let slot: string = 'rounded-xl overflow-hidden w-[272px] h-[572px] bg-white dark:bg-gray-800';
-@prop export let top: string = 'w-[148px] h-[18px] bg-gray-800 top-0 rounded-b-[1rem] left-1/2 -translate-x-1/2 absolute';
-@prop export let leftTop: string = 'h-[32px] w-[3px] bg-gray-800 absolute -left-[17px] top-[72px] rounded-l-lg';
-@prop export let leftMid: string = 'h-[46px] w-[3px] bg-gray-800 absolute -left-[17px] top-[124px] rounded-l-lg';
-@prop export let leftBot: string = 'h-[46px] w-[3px] bg-gray-800 absolute -left-[17px] top-[178px] rounded-l-lg';
-@prop export let right: string = 'h-[64px] w-[3px] bg-gray-800 absolute -right-[17px] top-[142px] rounded-r-lg';
+@prop export let div: $$Props['div'] = 'relative mx-auto border-gray-800 dark:border-gray-800 bg-gray-800 border-[14px] rounded-xl h-[600px] w-[300px] shadow-xl';
+@prop export let slot: $$Props['slot'] = 'rounded-xl overflow-hidden w-[272px] h-[572px] bg-white dark:bg-gray-800';
+@prop export let top: $$Props['top'] = 'w-[148px] h-[18px] bg-gray-800 top-0 rounded-b-[1rem] left-1/2 -translate-x-1/2 absolute';
+@prop export let leftTop: $$Props['leftTop'] = 'h-[32px] w-[3px] bg-gray-800 absolute -left-[17px] top-[72px] rounded-l-lg';
+@prop export let leftMid: $$Props['leftMid'] = 'h-[46px] w-[3px] bg-gray-800 absolute -left-[17px] top-[124px] rounded-l-lg';
+@prop export let leftBot: $$Props['leftBot'] = 'h-[46px] w-[3px] bg-gray-800 absolute -left-[17px] top-[178px] rounded-l-lg';
+@prop export let right: $$Props['right'] = 'h-[64px] w-[3px] bg-gray-800 absolute -right-[17px] top-[142px] rounded-r-lg';
 -->

package/dist/device-mockups/Android.svelte.d.ts

@@ -1,14 +1,13 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        [x: string]: any;
-        div?: string | undefined;
-        slot?: string | undefined;
-        top?: string | undefined;
-        leftTop?: string | undefined;
-        leftMid?: string | undefined;
-        leftBot?: string | undefined;
-        right?: string | undefined;
+        div?: string;
+        slot?: string;
+        top?: string;
+        leftTop?: string;
+        leftMid?: string;
+        leftBot?: string;
+        right?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -23,13 +22,13 @@ export type AndroidSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop export let div: string = 'relative mx-auto border-gray-800 dark:border-gray-800 bg-gray-800 border-[14px] rounded-xl h-[600px] w-[300px] shadow-xl';
- * @prop export let slot: string = 'rounded-xl overflow-hidden w-[272px] h-[572px] bg-white dark:bg-gray-800';
- * @prop export let top: string = 'w-[148px] h-[18px] bg-gray-800 top-0 rounded-b-[1rem] left-1/2 -translate-x-1/2 absolute';
- * @prop export let leftTop: string = 'h-[32px] w-[3px] bg-gray-800 absolute -left-[17px] top-[72px] rounded-l-lg';
- * @prop export let leftMid: string = 'h-[46px] w-[3px] bg-gray-800 absolute -left-[17px] top-[124px] rounded-l-lg';
- * @prop export let leftBot: string = 'h-[46px] w-[3px] bg-gray-800 absolute -left-[17px] top-[178px] rounded-l-lg';
- * @prop export let right: string = 'h-[64px] w-[3px] bg-gray-800 absolute -right-[17px] top-[142px] rounded-r-lg';
+ * @prop export let div: $$Props['div'] = 'relative mx-auto border-gray-800 dark:border-gray-800 bg-gray-800 border-[14px] rounded-xl h-[600px] w-[300px] shadow-xl';
+ * @prop export let slot: $$Props['slot'] = 'rounded-xl overflow-hidden w-[272px] h-[572px] bg-white dark:bg-gray-800';
+ * @prop export let top: $$Props['top'] = 'w-[148px] h-[18px] bg-gray-800 top-0 rounded-b-[1rem] left-1/2 -translate-x-1/2 absolute';
+ * @prop export let leftTop: $$Props['leftTop'] = 'h-[32px] w-[3px] bg-gray-800 absolute -left-[17px] top-[72px] rounded-l-lg';
+ * @prop export let leftMid: $$Props['leftMid'] = 'h-[46px] w-[3px] bg-gray-800 absolute -left-[17px] top-[124px] rounded-l-lg';
+ * @prop export let leftBot: $$Props['leftBot'] = 'h-[46px] w-[3px] bg-gray-800 absolute -left-[17px] top-[178px] rounded-l-lg';
+ * @prop export let right: $$Props['right'] = 'h-[64px] w-[3px] bg-gray-800 absolute -right-[17px] top-[142px] rounded-r-lg';
  */
 export default class Android extends SvelteComponentTyped<AndroidProps, AndroidEvents, AndroidSlots> {
 }

package/dist/device-mockups/DefaultMockup.svelte

@@ -21,10 +21,10 @@ export let right = "h-[64px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -righ
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let div: string = 'relative mx-auto border-gray-800 dark:border-gray-800 bg-gray-800 border-[14px] rounded-[2.5rem] h-[600px] w-[300px]';
-@prop export let slot: string = 'rounded-[2rem] overflow-hidden w-[272px] h-[572px] bg-white dark:bg-gray-800';
-@prop export let top: string = 'h-[32px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[72px] rounded-l-lg';
-@prop export let leftTop: string = 'h-[46px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[124px] rounded-l-lg';
-@prop export let leftBot: string = 'h-[46px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[178px] rounded-l-lg';
-@prop export let right: string = 'h-[64px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -right-[17px] top-[142px] rounded-r-lg';
+@prop export let div: $$Props['div'] = 'relative mx-auto border-gray-800 dark:border-gray-800 bg-gray-800 border-[14px] rounded-[2.5rem] h-[600px] w-[300px]';
+@prop export let slot: $$Props['slot'] = 'rounded-[2rem] overflow-hidden w-[272px] h-[572px] bg-white dark:bg-gray-800';
+@prop export let top: $$Props['top'] = 'h-[32px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[72px] rounded-l-lg';
+@prop export let leftTop: $$Props['leftTop'] = 'h-[46px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[124px] rounded-l-lg';
+@prop export let leftBot: $$Props['leftBot'] = 'h-[46px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[178px] rounded-l-lg';
+@prop export let right: $$Props['right'] = 'h-[64px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -right-[17px] top-[142px] rounded-r-lg';
 -->