flowbite-svelte 0.46.18 → 0.46.19

package/dist/device-mockups/Desktop.svelte

@@ -17,8 +17,8 @@ export let div = "relative mx-auto border-gray-800 dark:border-gray-800 bg-gray-
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let inner: string = 'rounded-xl overflow-hidden h-[140px] md:h-[262px]';
-@prop export let bot: string = 'relative mx-auto bg-gray-900 dark:bg-gray-700 rounded-b-xl h-[24px] max-w-[301px] md:h-[42px] md:max-w-[512px]';
-@prop export let botUnder: string = 'relative mx-auto bg-gray-800 rounded-b-xl h-[55px] max-w-[83px] md:h-[95px] md:max-w-[142px]';
-@prop export let div: string = 'relative mx-auto border-gray-800 dark:border-gray-800 bg-gray-800 border-[16px] rounded-t-xl h-[172px] max-w-[301px] md:h-[294px] md:max-w-[512px]';
+@prop export let inner: $$Props['inner'] = 'rounded-xl overflow-hidden h-[140px] md:h-[262px]';
+@prop export let bot: $$Props['bot'] = 'relative mx-auto bg-gray-900 dark:bg-gray-700 rounded-b-xl h-[24px] max-w-[301px] md:h-[42px] md:max-w-[512px]';
+@prop export let botUnder: $$Props['botUnder'] = 'relative mx-auto bg-gray-800 rounded-b-xl h-[55px] max-w-[83px] md:h-[95px] md:max-w-[142px]';
+@prop export let div: $$Props['div'] = 'relative mx-auto border-gray-800 dark:border-gray-800 bg-gray-800 border-[16px] rounded-t-xl h-[172px] max-w-[301px] md:h-[294px] md:max-w-[512px]';
 -->

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

@@ -1,11 +1,10 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        [x: string]: any;
-        inner?: string | undefined;
-        bot?: string | undefined;
-        botUnder?: string | undefined;
-        div?: string | undefined;
+        inner?: string;
+        bot?: string;
+        botUnder?: string;
+        div?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -20,10 +19,10 @@ export type DesktopSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop export let inner: string = 'rounded-xl overflow-hidden h-[140px] md:h-[262px]';
- * @prop export let bot: string = 'relative mx-auto bg-gray-900 dark:bg-gray-700 rounded-b-xl h-[24px] max-w-[301px] md:h-[42px] md:max-w-[512px]';
- * @prop export let botUnder: string = 'relative mx-auto bg-gray-800 rounded-b-xl h-[55px] max-w-[83px] md:h-[95px] md:max-w-[142px]';
- * @prop export let div: string = 'relative mx-auto border-gray-800 dark:border-gray-800 bg-gray-800 border-[16px] rounded-t-xl h-[172px] max-w-[301px] md:h-[294px] md:max-w-[512px]';
+ * @prop export let inner: $$Props['inner'] = 'rounded-xl overflow-hidden h-[140px] md:h-[262px]';
+ * @prop export let bot: $$Props['bot'] = 'relative mx-auto bg-gray-900 dark:bg-gray-700 rounded-b-xl h-[24px] max-w-[301px] md:h-[42px] md:max-w-[512px]';
+ * @prop export let botUnder: $$Props['botUnder'] = 'relative mx-auto bg-gray-800 rounded-b-xl h-[55px] max-w-[83px] md:h-[95px] md:max-w-[142px]';
+ * @prop export let div: $$Props['div'] = 'relative mx-auto border-gray-800 dark:border-gray-800 bg-gray-800 border-[16px] rounded-t-xl h-[172px] max-w-[301px] md:h-[294px] md:max-w-[512px]';
  */
 export default class Desktop extends SvelteComponentTyped<DesktopProps, DesktopEvents, DesktopSlots> {
 }

package/dist/device-mockups/DeviceMockup.svelte

@@ -29,5 +29,5 @@ $: component = componets[device];
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let device: 'default' | 'ios' | 'android' | 'tablet' | 'laptop' | 'desktop' | 'smartwatch' = 'default';
+@prop export let device: NonNullable<$$Props['device']> = 'default';
 -->

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

@@ -16,7 +16,7 @@ export type DeviceMockupSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop export let device: 'default' | 'ios' | 'android' | 'tablet' | 'laptop' | 'desktop' | 'smartwatch' = 'default';
+ * @prop export let device: NonNullable<$$Props['device']> = 'default';
  */
 export default class DeviceMockup extends SvelteComponentTyped<DeviceMockupProps, DeviceMockupEvents, DeviceMockupSlots> {
 }

package/dist/device-mockups/Ios.svelte

@@ -21,10 +21,10 @@ 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-[2.5rem] h-[600px] w-[300px] shadow-xl';
-@prop export let slot: string = 'rounded-[2rem] 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-[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-[2.5rem] h-[600px] w-[300px] shadow-xl';
+@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'] = '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-[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/Ios.svelte.d.ts

@@ -1,13 +1,12 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        [x: string]: any;
-        div?: string | undefined;
-        slot?: string | undefined;
-        top?: string | undefined;
-        leftTop?: string | undefined;
-        leftBot?: string | undefined;
-        right?: string | undefined;
+        div?: string;
+        slot?: string;
+        top?: string;
+        leftTop?: string;
+        leftBot?: string;
+        right?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -22,12 +21,12 @@ export type IosSlots = 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-[2.5rem] h-[600px] w-[300px] shadow-xl';
- * @prop export let slot: string = 'rounded-[2rem] 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-[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-[2.5rem] h-[600px] w-[300px] shadow-xl';
+ * @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'] = '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-[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 Ios extends SvelteComponentTyped<IosProps, IosEvents, IosSlots> {
 }

package/dist/device-mockups/Laptop.svelte

@@ -19,8 +19,8 @@ export let botCen = "absolute left-1/2 top-0 -translate-x-1/2 rounded-b-xl w-[56
 @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-[8px] rounded-t-xl h-[172px] max-w-[301px] md:h-[294px] md:max-w-[512px]';
-@prop export let inner: string = 'rounded-lg overflow-hidden h-[156px] md:h-[278px] bg-white dark:bg-gray-800';
-@prop export let bot: string = 'relative mx-auto bg-gray-900 dark:bg-gray-700 rounded-b-xl rounded-t-sm h-[17px] max-w-[351px] md:h-[21px] md:max-w-[597px]';
-@prop export let botCen: string = 'absolute left-1/2 top-0 -translate-x-1/2 rounded-b-xl w-[56px] h-[5px] md:w-[96px] md:h-[8px] bg-gray-800';
+@prop export let div: $$Props['div'] = 'relative mx-auto border-gray-800 dark:border-gray-800 bg-gray-800 border-[8px] rounded-t-xl h-[172px] max-w-[301px] md:h-[294px] md:max-w-[512px]';
+@prop export let inner: $$Props['inner'] = 'rounded-lg overflow-hidden h-[156px] md:h-[278px] bg-white dark:bg-gray-800';
+@prop export let bot: $$Props['bot'] = 'relative mx-auto bg-gray-900 dark:bg-gray-700 rounded-b-xl rounded-t-sm h-[17px] max-w-[351px] md:h-[21px] md:max-w-[597px]';
+@prop export let botCen: $$Props['botCen'] = 'absolute left-1/2 top-0 -translate-x-1/2 rounded-b-xl w-[56px] h-[5px] md:w-[96px] md:h-[8px] bg-gray-800';
 -->

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

@@ -1,11 +1,10 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        [x: string]: any;
-        div?: string | undefined;
-        inner?: string | undefined;
-        bot?: string | undefined;
-        botCen?: string | undefined;
+        div?: string;
+        inner?: string;
+        bot?: string;
+        botCen?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -20,10 +19,10 @@ export type LaptopSlots = 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-[8px] rounded-t-xl h-[172px] max-w-[301px] md:h-[294px] md:max-w-[512px]';
- * @prop export let inner: string = 'rounded-lg overflow-hidden h-[156px] md:h-[278px] bg-white dark:bg-gray-800';
- * @prop export let bot: string = 'relative mx-auto bg-gray-900 dark:bg-gray-700 rounded-b-xl rounded-t-sm h-[17px] max-w-[351px] md:h-[21px] md:max-w-[597px]';
- * @prop export let botCen: string = 'absolute left-1/2 top-0 -translate-x-1/2 rounded-b-xl w-[56px] h-[5px] md:w-[96px] md:h-[8px] bg-gray-800';
+ * @prop export let div: $$Props['div'] = 'relative mx-auto border-gray-800 dark:border-gray-800 bg-gray-800 border-[8px] rounded-t-xl h-[172px] max-w-[301px] md:h-[294px] md:max-w-[512px]';
+ * @prop export let inner: $$Props['inner'] = 'rounded-lg overflow-hidden h-[156px] md:h-[278px] bg-white dark:bg-gray-800';
+ * @prop export let bot: $$Props['bot'] = 'relative mx-auto bg-gray-900 dark:bg-gray-700 rounded-b-xl rounded-t-sm h-[17px] max-w-[351px] md:h-[21px] md:max-w-[597px]';
+ * @prop export let botCen: $$Props['botCen'] = 'absolute left-1/2 top-0 -translate-x-1/2 rounded-b-xl w-[56px] h-[5px] md:w-[96px] md:h-[8px] bg-gray-800';
  */
 export default class Laptop extends SvelteComponentTyped<LaptopProps, LaptopEvents, LaptopSlots> {
 }

package/dist/device-mockups/Smartwatch.svelte

@@ -21,10 +21,10 @@ export let bot = "relative mx-auto bg-gray-800 dark:bg-gray-700 rounded-b-[2.5re
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let div: string = 'relative mx-auto bg-gray-800 dark:bg-gray-700 rounded-t-[2.5rem] h-[63px] max-w-[133px]';
-@prop export let slot: string = 'rounded-[2rem] overflow-hidden h-[193px] w-[188px]';
-@prop export let rightTop: string = 'h-[41px] w-[6px] bg-gray-800 dark:bg-gray-800 absolute -right-[16px] top-[40px] rounded-r-lg';
-@prop export let rightBot: string = 'h-[32px] w-[6px] bg-gray-800 dark:bg-gray-800 absolute -right-[16px] top-[88px] rounded-r-lg';
-@prop export let top: string = 'relative mx-auto border-gray-900 dark:bg-gray-800 dark:border-gray-800 border-[10px] rounded-[2.5rem] h-[213px] w-[208px]';
-@prop export let bot: string = 'relative mx-auto bg-gray-800 dark:bg-gray-700 rounded-b-[2.5rem] h-[63px] max-w-[133px]';
+@prop export let div: $$Props['div'] = 'relative mx-auto bg-gray-800 dark:bg-gray-700 rounded-t-[2.5rem] h-[63px] max-w-[133px]';
+@prop export let slot: $$Props['slot'] = 'rounded-[2rem] overflow-hidden h-[193px] w-[188px]';
+@prop export let rightTop: $$Props['rightTop'] = 'h-[41px] w-[6px] bg-gray-800 dark:bg-gray-800 absolute -right-[16px] top-[40px] rounded-r-lg';
+@prop export let rightBot: $$Props['rightBot'] = 'h-[32px] w-[6px] bg-gray-800 dark:bg-gray-800 absolute -right-[16px] top-[88px] rounded-r-lg';
+@prop export let top: $$Props['top'] = 'relative mx-auto border-gray-900 dark:bg-gray-800 dark:border-gray-800 border-[10px] rounded-[2.5rem] h-[213px] w-[208px]';
+@prop export let bot: $$Props['bot'] = 'relative mx-auto bg-gray-800 dark:bg-gray-700 rounded-b-[2.5rem] h-[63px] max-w-[133px]';
 -->

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

@@ -1,13 +1,12 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        [x: string]: any;
-        div?: string | undefined;
-        slot?: string | undefined;
-        rightTop?: string | undefined;
-        rightBot?: string | undefined;
-        top?: string | undefined;
-        bot?: string | undefined;
+        div?: string;
+        slot?: string;
+        rightTop?: string;
+        rightBot?: string;
+        top?: string;
+        bot?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -22,12 +21,12 @@ export type SmartwatchSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop export let div: string = 'relative mx-auto bg-gray-800 dark:bg-gray-700 rounded-t-[2.5rem] h-[63px] max-w-[133px]';
- * @prop export let slot: string = 'rounded-[2rem] overflow-hidden h-[193px] w-[188px]';
- * @prop export let rightTop: string = 'h-[41px] w-[6px] bg-gray-800 dark:bg-gray-800 absolute -right-[16px] top-[40px] rounded-r-lg';
- * @prop export let rightBot: string = 'h-[32px] w-[6px] bg-gray-800 dark:bg-gray-800 absolute -right-[16px] top-[88px] rounded-r-lg';
- * @prop export let top: string = 'relative mx-auto border-gray-900 dark:bg-gray-800 dark:border-gray-800 border-[10px] rounded-[2.5rem] h-[213px] w-[208px]';
- * @prop export let bot: string = 'relative mx-auto bg-gray-800 dark:bg-gray-700 rounded-b-[2.5rem] h-[63px] max-w-[133px]';
+ * @prop export let div: $$Props['div'] = 'relative mx-auto bg-gray-800 dark:bg-gray-700 rounded-t-[2.5rem] h-[63px] max-w-[133px]';
+ * @prop export let slot: $$Props['slot'] = 'rounded-[2rem] overflow-hidden h-[193px] w-[188px]';
+ * @prop export let rightTop: $$Props['rightTop'] = 'h-[41px] w-[6px] bg-gray-800 dark:bg-gray-800 absolute -right-[16px] top-[40px] rounded-r-lg';
+ * @prop export let rightBot: $$Props['rightBot'] = 'h-[32px] w-[6px] bg-gray-800 dark:bg-gray-800 absolute -right-[16px] top-[88px] rounded-r-lg';
+ * @prop export let top: $$Props['top'] = 'relative mx-auto border-gray-900 dark:bg-gray-800 dark:border-gray-800 border-[10px] rounded-[2.5rem] h-[213px] w-[208px]';
+ * @prop export let bot: $$Props['bot'] = 'relative mx-auto bg-gray-800 dark:bg-gray-700 rounded-b-[2.5rem] h-[63px] max-w-[133px]';
  */
 export default class Smartwatch extends SvelteComponentTyped<SmartwatchProps, SmartwatchEvents, SmartwatchSlots> {
 }

package/dist/device-mockups/Tablet.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-[454px] max-w-[341px] md:h-[682px] md:max-w-[512px]';
-@prop export let slot: string = 'rounded-[2rem] overflow-hidden h-[426px] md:h-[654px] bg-white dark:bg-gray-800';
-@prop export let leftTop: string = 'h-[32px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[72px] rounded-l-lg';
-@prop export let leftMid: 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-[454px] max-w-[341px] md:h-[682px] md:max-w-[512px]';
+@prop export let slot: $$Props['slot'] = 'rounded-[2rem] overflow-hidden h-[426px] md:h-[654px] bg-white dark:bg-gray-800';
+@prop export let leftTop: $$Props['leftTop'] = 'h-[32px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[72px] rounded-l-lg';
+@prop export let leftMid: $$Props['leftMid'] = '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';
 -->

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

@@ -1,13 +1,12 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        [x: string]: any;
-        div?: string | undefined;
-        slot?: string | undefined;
-        leftTop?: string | undefined;
-        leftMid?: string | undefined;
-        leftBot?: string | undefined;
-        right?: string | undefined;
+        div?: string;
+        slot?: string;
+        leftTop?: string;
+        leftMid?: string;
+        leftBot?: string;
+        right?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -22,12 +21,12 @@ export type TabletSlots = 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-[2.5rem] h-[454px] max-w-[341px] md:h-[682px] md:max-w-[512px]';
- * @prop export let slot: string = 'rounded-[2rem] overflow-hidden h-[426px] md:h-[654px] bg-white dark:bg-gray-800';
- * @prop export let leftTop: string = 'h-[32px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[72px] rounded-l-lg';
- * @prop export let leftMid: 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-[454px] max-w-[341px] md:h-[682px] md:max-w-[512px]';
+ * @prop export let slot: $$Props['slot'] = 'rounded-[2rem] overflow-hidden h-[426px] md:h-[654px] bg-white dark:bg-gray-800';
+ * @prop export let leftTop: $$Props['leftTop'] = 'h-[32px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[72px] rounded-l-lg';
+ * @prop export let leftMid: $$Props['leftMid'] = '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';
  */
 export default class Tablet extends SvelteComponentTyped<TabletProps, TabletEvents, TabletSlots> {
 }

package/dist/drawer/Drawer.svelte

@@ -61,20 +61,20 @@ function clickOutsideWrapper(node, callback) {
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let activateClickOutside: boolean = true;
-@prop export let hidden: boolean = true;
-@prop export let position: 'fixed' | 'absolute' = 'fixed';
-@prop export let leftOffset: string = 'inset-y-0 start-0';
-@prop export let rightOffset: string = 'inset-y-0 end-0';
-@prop export let topOffset: string = 'inset-x-0 top-0';
-@prop export let bottomOffset: string = 'inset-x-0 bottom-0';
-@prop export let width: string = 'w-80';
-@prop export let backdrop: boolean = true;
-@prop export let bgColor: string = 'bg-gray-900';
-@prop export let bgOpacity: string = 'bg-opacity-75';
-@prop export let placement: 'left' | 'right' | 'top' | 'bottom' = 'left';
-@prop export let id: string = 'drawer-example';
-@prop export let divClass: string = 'overflow-y-auto z-50 p-4 bg-white dark:bg-gray-800';
-@prop export let transitionParams: drawerTransitionParamTypes = {};
-@prop export let transitionType: drawerTransitionTypes = 'fly';
+@prop export let activateClickOutside: $$Props['activateClickOutside'] = true;
+@prop export let hidden: $$Props['hidden'] = true;
+@prop export let position: $$Props['position'] = 'fixed';
+@prop export let leftOffset: $$Props['leftOffset'] = 'inset-y-0 start-0';
+@prop export let rightOffset: $$Props['rightOffset'] = 'inset-y-0 end-0';
+@prop export let topOffset: $$Props['topOffset'] = 'inset-x-0 top-0';
+@prop export let bottomOffset: $$Props['bottomOffset'] = 'inset-x-0 bottom-0';
+@prop export let width: $$Props['width'] = 'w-80';
+@prop export let backdrop: $$Props['backdrop'] = true;
+@prop export let bgColor: $$Props['bgColor'] = 'bg-gray-900';
+@prop export let bgOpacity: $$Props['bgOpacity'] = 'bg-opacity-75';
+@prop export let placement: NonNullable<$$Props['placement']> = 'left';
+@prop export let id: $$Props['id'] = 'drawer-example';
+@prop export let divClass: $$Props['divClass'] = 'overflow-y-auto z-50 p-4 bg-white dark:bg-gray-800';
+@prop export let transitionParams: $$Props['transitionParams'] = {};
+@prop export let transitionType: $$Props['transitionType'] = 'fly';
 -->

package/dist/drawer/Drawer.svelte.d.ts

@@ -1,23 +1,23 @@
 import { SvelteComponentTyped } from "svelte";
 import type { drawerTransitionParamTypes, drawerTransitionTypes } from '../types';
+import type { HTMLAttributes } from 'svelte/elements';
 declare const __propDef: {
-    props: {
-        [x: string]: any;
-        activateClickOutside?: boolean | undefined;
-        hidden?: boolean | undefined;
-        position?: ("fixed" | "absolute") | undefined;
-        leftOffset?: string | undefined;
-        rightOffset?: string | undefined;
-        topOffset?: string | undefined;
-        bottomOffset?: string | undefined;
-        width?: string | undefined;
-        backdrop?: boolean | undefined;
-        bgColor?: string | undefined;
-        bgOpacity?: string | undefined;
-        placement?: ("left" | "right" | "top" | "bottom") | undefined;
-        id?: string | undefined;
-        divClass?: string | undefined;
-        transitionParams?: drawerTransitionParamTypes | undefined;
+    props: HTMLAttributes<HTMLElement> & {
+        activateClickOutside?: boolean;
+        hidden?: boolean;
+        position?: "fixed" | "absolute";
+        leftOffset?: string;
+        rightOffset?: string;
+        topOffset?: string;
+        bottomOffset?: string;
+        width?: string;
+        backdrop?: boolean;
+        bgColor?: string;
+        bgOpacity?: string;
+        placement?: "left" | "right" | "top" | "bottom";
+        id?: string;
+        divClass?: string;
+        transitionParams?: drawerTransitionParamTypes;
         transitionType?: drawerTransitionTypes;
     };
     events: {
@@ -25,7 +25,7 @@ declare const __propDef: {
     };
     slots: {
         default: {
-            hidden: boolean;
+            hidden: boolean | undefined;
         };
     };
 };
@@ -35,22 +35,22 @@ export type DrawerSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop export let activateClickOutside: boolean = true;
- * @prop export let hidden: boolean = true;
- * @prop export let position: 'fixed' | 'absolute' = 'fixed';
- * @prop export let leftOffset: string = 'inset-y-0 start-0';
- * @prop export let rightOffset: string = 'inset-y-0 end-0';
- * @prop export let topOffset: string = 'inset-x-0 top-0';
- * @prop export let bottomOffset: string = 'inset-x-0 bottom-0';
- * @prop export let width: string = 'w-80';
- * @prop export let backdrop: boolean = true;
- * @prop export let bgColor: string = 'bg-gray-900';
- * @prop export let bgOpacity: string = 'bg-opacity-75';
- * @prop export let placement: 'left' | 'right' | 'top' | 'bottom' = 'left';
- * @prop export let id: string = 'drawer-example';
- * @prop export let divClass: string = 'overflow-y-auto z-50 p-4 bg-white dark:bg-gray-800';
- * @prop export let transitionParams: drawerTransitionParamTypes = {};
- * @prop export let transitionType: drawerTransitionTypes = 'fly';
+ * @prop export let activateClickOutside: $$Props['activateClickOutside'] = true;
+ * @prop export let hidden: $$Props['hidden'] = true;
+ * @prop export let position: $$Props['position'] = 'fixed';
+ * @prop export let leftOffset: $$Props['leftOffset'] = 'inset-y-0 start-0';
+ * @prop export let rightOffset: $$Props['rightOffset'] = 'inset-y-0 end-0';
+ * @prop export let topOffset: $$Props['topOffset'] = 'inset-x-0 top-0';
+ * @prop export let bottomOffset: $$Props['bottomOffset'] = 'inset-x-0 bottom-0';
+ * @prop export let width: $$Props['width'] = 'w-80';
+ * @prop export let backdrop: $$Props['backdrop'] = true;
+ * @prop export let bgColor: $$Props['bgColor'] = 'bg-gray-900';
+ * @prop export let bgOpacity: $$Props['bgOpacity'] = 'bg-opacity-75';
+ * @prop export let placement: NonNullable<$$Props['placement']> = 'left';
+ * @prop export let id: $$Props['id'] = 'drawer-example';
+ * @prop export let divClass: $$Props['divClass'] = 'overflow-y-auto z-50 p-4 bg-white dark:bg-gray-800';
+ * @prop export let transitionParams: $$Props['transitionParams'] = {};
+ * @prop export let transitionType: $$Props['transitionType'] = 'fly';
  */
 export default class Drawer extends SvelteComponentTyped<DrawerProps, DrawerEvents, DrawerSlots> {
 }

package/dist/forms/Checkbox.svelte

@@ -32,15 +32,15 @@ let background = getContext("background");
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let name: string | undefined = undefined;
-@prop export let color: FormColorType = 'primary';
-@prop export let custom: boolean = false;
-@prop export let inline: boolean = false;
-@prop export let group: string[] = [];
-@prop export let choices: CheckboxItem[] = [];
-@prop export let value: string | number = 'on';
-@prop export let checked: boolean | undefined = undefined;
-@prop export let spacing: string = $$slots.default ? 'me-2' : '';
-@prop export let groupLabelClass: string = '';
-@prop export let groupInputClass: string = '';
+@prop export let name: $$Props['name'] = undefined;
+@prop export let color: NonNullable<$$Props['color']> = 'primary';
+@prop export let custom: NonNullable<$$Props['custom']> = false;
+@prop export let inline: NonNullable<$$Props['inline']> = false;
+@prop export let group: $$Props['group'] = [];
+@prop export let choices: NonNullable<$$Props['choices']> = [];
+@prop export let value: $$Props['value'] = 'on';
+@prop export let checked: $$Props['checked'] = undefined;
+@prop export let spacing: NonNullable<$$Props['spacing']> = $$slots.default ? 'me-2' : '';
+@prop export let groupLabelClass: NonNullable<$$Props['groupLabelClass']> = '';
+@prop export let groupInputClass: NonNullable<$$Props['groupInputClass']> = '';
 -->

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

@@ -3,18 +3,19 @@ import type { FormColorType } from '../types';
 import type { CheckboxItem } from '../types';
 declare const __propDef: {
     props: {
-        [x: string]: any;
-        name?: string | undefined;
-        color?: FormColorType | undefined;
-        custom?: boolean | undefined;
-        inline?: boolean | undefined;
-        group?: string[] | undefined;
-        choices?: CheckboxItem[] | undefined;
-        value?: (string | number) | undefined;
-        checked?: boolean | undefined;
-        spacing?: string | undefined;
-        groupLabelClass?: string | undefined;
-        groupInputClass?: string | undefined;
+        name?: string;
+        color?: FormColorType;
+        custom?: boolean;
+        inline?: boolean;
+        group?: string[];
+        choices?: CheckboxItem[];
+        value?: string | number;
+        checked?: boolean;
+        spacing?: string;
+        groupLabelClass?: string;
+        groupInputClass?: string;
+        class?: string;
+        required?: boolean;
     };
     events: {
         keyup: KeyboardEvent;
@@ -41,17 +42,17 @@ export type CheckboxSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop export let name: string | undefined = undefined;
- * @prop export let color: FormColorType = 'primary';
- * @prop export let custom: boolean = false;
- * @prop export let inline: boolean = false;
- * @prop export let group: string[] = [];
- * @prop export let choices: CheckboxItem[] = [];
- * @prop export let value: string | number = 'on';
- * @prop export let checked: boolean | undefined = undefined;
- * @prop export let spacing: string = $$slots.default ? 'me-2' : '';
- * @prop export let groupLabelClass: string = '';
- * @prop export let groupInputClass: string = '';
+ * @prop export let name: $$Props['name'] = undefined;
+ * @prop export let color: NonNullable<$$Props['color']> = 'primary';
+ * @prop export let custom: NonNullable<$$Props['custom']> = false;
+ * @prop export let inline: NonNullable<$$Props['inline']> = false;
+ * @prop export let group: $$Props['group'] = [];
+ * @prop export let choices: NonNullable<$$Props['choices']> = [];
+ * @prop export let value: $$Props['value'] = 'on';
+ * @prop export let checked: $$Props['checked'] = undefined;
+ * @prop export let spacing: NonNullable<$$Props['spacing']> = $$slots.default ? 'me-2' : '';
+ * @prop export let groupLabelClass: NonNullable<$$Props['groupLabelClass']> = '';
+ * @prop export let groupInputClass: NonNullable<$$Props['groupInputClass']> = '';
  */
 export default class Checkbox extends SvelteComponentTyped<CheckboxProps, CheckboxEvents, CheckboxSlots> {
 }

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

@@ -1,11 +1,11 @@
 import { SvelteComponentTyped } from "svelte";
+import type { HTMLInputAttributes } from 'svelte/elements';
 declare const __propDef: {
     props: {
-        [x: string]: any;
-        value?: string | undefined;
+        value?: string;
         files?: FileList | undefined;
-        defaultClass?: string | undefined;
-    };
+        defaultClass?: string;
+    } & HTMLInputAttributes;
     events: {
         focus: FocusEvent;
         blur: FocusEvent;
@@ -25,7 +25,8 @@ declare const __propDef: {
         default: {};
     };
 };
-export type DropzoneProps = typeof __propDef.props;
+type DropzoneProps_ = typeof __propDef.props;
+export { DropzoneProps_ as DropzoneProps };
 export type DropzoneEvents = typeof __propDef.events;
 export type DropzoneSlots = typeof __propDef.slots;
 /**
@@ -35,6 +36,5 @@ export type DropzoneSlots = typeof __propDef.slots;
  * @prop export let files: FileList | undefined = undefined;
  * @prop export let defaultClass: string = 'flex flex-col justify-center items-center w-full h-64 bg-gray-50 rounded-lg border-2 border-gray-300 border-dashed cursor-pointer dark:hover:bg-bray-800 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600';
  */
-export default class Dropzone extends SvelteComponentTyped<DropzoneProps, DropzoneEvents, DropzoneSlots> {
+export default class Dropzone extends SvelteComponentTyped<DropzoneProps_, DropzoneEvents, DropzoneSlots> {
 }
-export {};

package/dist/forms/MultiSelect.svelte

@@ -114,7 +114,7 @@ function handleKeyDown(event) {
     {#if selectItems.length}
       {#each selectItems as item (item.name)}
         <slot {item} clear={() => clearThisOption(item)}>
-          <Badge color="dark" large={size === 'lg'} dismissable params={{ duration: 100 }} on:close={() => clearThisOption(item)} class={disabled && "pointer-events-none"} >
+          <Badge color="dark" large={size === 'lg'} dismissable params={{ duration: 100 }} on:close={() => clearThisOption(item)} class={disabled ? "pointer-events-none" : undefined} >
             {item.name}
           </Badge>
         </slot>

package/dist/forms/Toggle.svelte

@@ -39,9 +39,9 @@ $: divClass = twMerge(common, $$slots.offLabel ? "ms-3" : "", background ? "dark
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let size: 'small' | 'default' | 'large' | 'custom' = 'default';
-@prop export let group: (string | number)[] = [];
-@prop export let value: string | number = '';
-@prop export let checked: boolean | undefined = undefined;
-@prop export let customSize: string = '';
+@prop export let size: NonNullable<$$Props['size']> = 'default';
+@prop export let group: $$Props['group'] = [];
+@prop export let value: $$Props['value'] = '';
+@prop export let checked: $$Props['checked'] = undefined;
+@prop export let customSize: $$Props['customSize'] = '';
 -->