flowbite-svelte 0.48.4 → 1.0.0-next.2

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

@@ -1,44 +1,25 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {
-        div?: string;
-        slot?: string;
-        top?: string;
-        leftTop?: string;
-        leftBot?: string;
-        right?: string;
-        classTop?: string;
-        classLeftTop?: string;
-        classLeftBot?: string;
-        classRight?: string;
-        classSlot?: string;
-        class?: string;
-    };
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        default: {};
-    };
+    slots: {};
 };
-export type DefaultMockupProps = typeof __propDef.props;
+type DefaultMockupProps_ = typeof __propDef.props;
+export { DefaultMockupProps_ as DefaultMockupProps };
 export type DefaultMockupEvents = typeof __propDef.events;
 export type DefaultMockupSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @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';
- * @prop export let classTop: $$Props['classTop'] = '';
- * @prop export let classLeftTop: $$Props['classLeftTop'] = '';
- * @prop export let classLeftBot: $$Props['classLeftBot'] = '';
- * @prop export let classRight: $$Props['classRight'] = '';
- * @prop export let classSlot: $$Props['classSlot'] = '';
+ * @props: children: any;
+ * @props:divClass: any;
+ * @props:div2Class: any;
+ * @props:div3Class: any;
+ * @props:div4Class: any;
+ * @props:div5Class: any;
+ * @props:div6Class: any;
  */
-export default class DefaultMockup extends SvelteComponentTyped<DefaultMockupProps, DefaultMockupEvents, DefaultMockupSlots> {
+export default class DefaultMockup extends SvelteComponentTyped<DefaultMockupProps_, DefaultMockupEvents, DefaultMockupSlots> {
 }
-export {};

package/dist/device-mockups/Desktop.svelte

@@ -1,30 +1,28 @@
-<script>import { twMerge } from "tailwind-merge";
-export let inner = "rounded-xl overflow-hidden h-[140px] md:h-[262px]";
-export let 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]";
-export let botUnder = "relative mx-auto bg-gray-800 rounded-b-xl h-[55px] max-w-[83px] md:h-[95px] md:max-w-[142px]";
-export let 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 let classInner = "";
-export let classBot = "";
-export let classBotUnder = "";
+<script lang="ts">
+  import { type MockupBaseProps as Props, desktop } from ".";
+
+  let { children, divClass, div2Class, div3Class, div4Class, ...restProps }: Props = $props();
+
+  const { div, inner, bot, botUnder } = desktop();
 </script>
 
-<div class={twMerge(div, $$props.class)}>
-  <div class={twMerge(inner, classInner)}>
-    <slot></slot>
+<div {...restProps} class={div({ class: divClass })}>
+  <div class={inner({ class: div2Class })}>
+    {#if children}
+      {@render children()}
+    {/if}
   </div>
 </div>
-<div class={twMerge(bot, classBot)}></div>
-<div class={twMerge(botUnder, classBotUnder)}></div>
+<div class={bot({ class: div3Class })}></div>
+<div class={botUnder({ class: div4Class })}></div>
 
 <!--
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@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]';
-@prop export let classInner: $$Props['classInner'] = '';
-@prop export let classBot: $$Props['classBot'] = '';
-@prop export let classBotUnder: $$Props['classBotUnder'] = '';
+@props: children: any;
+@props:divClass: any;
+@props:div2Class: any;
+@props:div3Class: any;
+@props:div4Class: any;
 -->

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

@@ -1,21 +1,10 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {
-        inner?: string;
-        bot?: string;
-        botUnder?: string;
-        div?: string;
-        classInner?: string;
-        classBot?: string;
-        classBotUnder?: string;
-        class?: string;
-    };
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        default: {};
-    };
+    slots: {};
 };
 export type DesktopProps = typeof __propDef.props;
 export type DesktopEvents = typeof __propDef.events;
@@ -23,13 +12,11 @@ export type DesktopSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @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]';
- * @prop export let classInner: $$Props['classInner'] = '';
- * @prop export let classBot: $$Props['classBot'] = '';
- * @prop export let classBotUnder: $$Props['classBotUnder'] = '';
+ * @props: children: any;
+ * @props:divClass: any;
+ * @props:div2Class: any;
+ * @props:div3Class: any;
+ * @props:div4Class: any;
  */
 export default class Desktop extends SvelteComponentTyped<DesktopProps, DesktopEvents, DesktopSlots> {
 }

package/dist/device-mockups/DeviceMockup.svelte

@@ -1,33 +1,37 @@
-<script>import Android from "./Android.svelte";
-import DefaultMockup from "./DefaultMockup.svelte";
-import Desktop from "./Desktop.svelte";
-import Ios from "./Ios.svelte";
-import Laptop from "./Laptop.svelte";
-import Smartwatch from "./Smartwatch.svelte";
-import Tablet from "./Tablet.svelte";
-export let device = "default";
-const componets = {
-  android: Android,
-  ios: Ios,
-  tablet: Tablet,
-  default: DefaultMockup,
-  smartwatch: Smartwatch,
-  laptop: Laptop,
-  desktop: Desktop
-};
-let component;
-$: component = componets[device];
+<script lang="ts">
+  import type { Component } from "svelte";
+  import Android from "./Android.svelte";
+  import DefaultMockup from "./DefaultMockup.svelte";
+  import Desktop from "./Desktop.svelte";
+  import Ios from "./Ios.svelte";
+  import Laptop from "./Laptop.svelte";
+  import Smartwatch from "./Smartwatch.svelte";
+  import Tablet from "./Tablet.svelte";
+  import { type DeviceMockupProps as Props } from ".";
+
+  let { children, device = "default" }: Props = $props();
+
+  const componets = {
+    android: Android,
+    ios: Ios,
+    tablet: Tablet,
+    default: DefaultMockup,
+    smartwatch: Smartwatch,
+    laptop: Laptop,
+    desktop: Desktop
+  };
+
+  let DeviceComponent: Component = $derived(componets[device]);
 </script>
 
-{#if component}
-  <svelte:component this={component}><slot /></svelte:component>
-{:else}
-  <div class="border p-3 text-xl">Unknow device</div>
-{/if}
+<DeviceComponent>
+  {@render children()}
+</DeviceComponent>
 
 <!--
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let device: NonNullable<$$Props['device']> = 'default';
+@props: children: any;
+@props:device: any = "default";
 -->

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

@@ -1,23 +1,20 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {
-        device?: "default" | "ios" | "android" | "tablet" | "laptop" | "desktop" | "smartwatch";
-    };
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        default: {};
-    };
+    slots: {};
 };
-export type DeviceMockupProps = typeof __propDef.props;
+type DeviceMockupProps_ = typeof __propDef.props;
+export { DeviceMockupProps_ as DeviceMockupProps };
 export type DeviceMockupEvents = typeof __propDef.events;
 export type DeviceMockupSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop export let device: NonNullable<$$Props['device']> = 'default';
+ * @props: children: any;
+ * @props:device: any = "default";
  */
-export default class DeviceMockup extends SvelteComponentTyped<DeviceMockupProps, DeviceMockupEvents, DeviceMockupSlots> {
+export default class DeviceMockup extends SvelteComponentTyped<DeviceMockupProps_, DeviceMockupEvents, DeviceMockupSlots> {
 }
-export {};

package/dist/device-mockups/Ios.svelte

@@ -1,24 +1,20 @@
-<script>import { twMerge } from "tailwind-merge";
-export let 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";
-export let slot = "rounded-[2rem] overflow-hidden w-[272px] h-[572px] bg-white dark:bg-gray-800";
-export let top = "w-[148px] h-[18px] bg-gray-800 top-0 rounded-b-[1rem] left-1/2 -translate-x-1/2 absolute";
-export let leftTop = "h-[46px] w-[3px] bg-gray-800 absolute -left-[17px] top-[124px] rounded-l-lg";
-export let leftBot = "h-[46px] w-[3px] bg-gray-800 absolute -left-[17px] top-[178px] rounded-l-lg";
-export let right = "h-[64px] w-[3px] bg-gray-800 absolute -right-[17px] top-[142px] rounded-r-lg";
-export let classTop = "";
-export let classLeftTop = "";
-export let classLeftBot = "";
-export let classRight = "";
-export let classSlot = "";
+<script lang="ts">
+  import { type IosProps as Props, ios } from ".";
+
+  let { children, divClass, div2Class, div3Class, div4Class, div5Class, div6Class, ...restProps }: Props = $props();
+
+  const { div, slot, top, leftTop, leftBot, right } = ios();
 </script>
 
-<div class={twMerge(div, $$props.class)}>
-  <div class={twMerge(top, classTop)}></div>
-  <div class={twMerge(leftTop, classLeftTop)}></div>
-  <div class={twMerge(leftBot, classLeftBot)}></div>
-  <div class={twMerge(right, classRight)}></div>
-  <div class={twMerge(slot, classSlot)}>
-    <slot></slot>
+<div {...restProps} class={div({ class: divClass })}>
+  <div class={top({ class: div2Class })}></div>
+  <div class={leftTop({ class: div3Class })}></div>
+  <div class={leftBot({ class: div4Class })}></div>
+  <div class={right({ class: div5Class })}></div>
+  <div class={slot({ class: div6Class })}>
+    {#if children}
+      {@render children()}
+    {/if}
   </div>
 </div>
 
@@ -26,15 +22,11 @@ export let classSlot = "";
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@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';
-@prop export let classTop: $$Props['classTop'] = '';
-@prop export let classLeftTop: $$Props['classLeftTop'] = '';
-@prop export let classLeftBot: $$Props['classLeftBot'] = '';
-@prop export let classRight: $$Props['classRight'] = '';
-@prop export let classSlot: $$Props['classSlot'] = '';
+@props: children: any;
+@props:divClass: any;
+@props:div2Class: any;
+@props:div3Class: any;
+@props:div4Class: any;
+@props:div5Class: any;
+@props:div6Class: any;
 -->

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

@@ -1,44 +1,25 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {
-        div?: string;
-        slot?: string;
-        top?: string;
-        leftTop?: string;
-        leftBot?: string;
-        right?: string;
-        classTop?: string;
-        classLeftTop?: string;
-        classLeftBot?: string;
-        classRight?: string;
-        classSlot?: string;
-        class?: string;
-    };
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        default: {};
-    };
+    slots: {};
 };
-export type IosProps = typeof __propDef.props;
+type IosProps_ = typeof __propDef.props;
+export { IosProps_ as IosProps };
 export type IosEvents = typeof __propDef.events;
 export type IosSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @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';
- * @prop export let classTop: $$Props['classTop'] = '';
- * @prop export let classLeftTop: $$Props['classLeftTop'] = '';
- * @prop export let classLeftBot: $$Props['classLeftBot'] = '';
- * @prop export let classRight: $$Props['classRight'] = '';
- * @prop export let classSlot: $$Props['classSlot'] = '';
+ * @props: children: any;
+ * @props:divClass: any;
+ * @props:div2Class: any;
+ * @props:div3Class: any;
+ * @props:div4Class: any;
+ * @props:div5Class: any;
+ * @props:div6Class: any;
  */
-export default class Ios extends SvelteComponentTyped<IosProps, IosEvents, IosSlots> {
+export default class Ios extends SvelteComponentTyped<IosProps_, IosEvents, IosSlots> {
 }
-export {};

package/dist/device-mockups/Laptop.svelte

@@ -1,32 +1,31 @@
-<script>import { twMerge } from "tailwind-merge";
-export let 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]";
-export let inner = "rounded-lg overflow-hidden h-[156px] md:h-[278px] bg-white dark:bg-gray-800";
-export let 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]";
-export let 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 let classInner = "";
-export let classBot = "";
-export let classBotCen = "";
+<script lang="ts">
+  import { type MockupBaseProps as Props, laptop } from ".";
+
+  let { children, divClass, div2Class, div3Class, div4Class, ...restProps }: Props = $props();
+  const { div, inner, bot, botCen } = laptop();
 </script>
 
-<div class={twMerge(div, $$props.class)}>
-  <div class={twMerge(inner, classInner)}>
-    <slot></slot>
+<div {...restProps}>
+  <div class={div({ class: divClass })}>
+    <div class={inner({ class: div2Class })}>
+      {#if children}
+        {@render children()}
+      {/if}
+    </div>
   </div>
-</div>
 
-<div class={twMerge(bot, classBot)}>
-  <div class={twMerge(botCen, classBotCen)}></div>
+  <div class={bot({ class: div3Class })}>
+    <div class={botCen({ class: div4Class })}></div>
+  </div>
 </div>
 
 <!--
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@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';
-@prop export let classInner: $$Props['classInner'] = '';
-@prop export let classBot: $$Props['classBot'] = '';
-@prop export let classBotCen: $$Props['classBotCen'] = '';
+@props: children: any;
+@props:divClass: any;
+@props:div2Class: any;
+@props:div3Class: any;
+@props:div4Class: any;
 -->

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

@@ -1,21 +1,10 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {
-        div?: string;
-        inner?: string;
-        bot?: string;
-        botCen?: string;
-        classInner?: string;
-        classBot?: string;
-        classBotCen?: string;
-        class?: string;
-    };
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        default: {};
-    };
+    slots: {};
 };
 export type LaptopProps = typeof __propDef.props;
 export type LaptopEvents = typeof __propDef.events;
@@ -23,13 +12,11 @@ export type LaptopSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @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';
- * @prop export let classInner: $$Props['classInner'] = '';
- * @prop export let classBot: $$Props['classBot'] = '';
- * @prop export let classBotCen: $$Props['classBotCen'] = '';
+ * @props: children: any;
+ * @props:divClass: any;
+ * @props:div2Class: any;
+ * @props:div3Class: any;
+ * @props:div4Class: any;
  */
 export default class Laptop extends SvelteComponentTyped<LaptopProps, LaptopEvents, LaptopSlots> {
 }

package/dist/device-mockups/Smartwatch.svelte

@@ -1,40 +1,34 @@
-<script>import { twMerge } from "tailwind-merge";
-export let div = "relative mx-auto bg-gray-800 dark:bg-gray-700 rounded-t-[2.5rem] h-[63px] max-w-[133px]";
-export let slot = "rounded-[2rem] overflow-hidden h-[193px] w-[188px]";
-export let rightTop = "h-[41px] w-[6px] bg-gray-800 dark:bg-gray-800 absolute -right-[16px] top-[40px] rounded-r-lg";
-export let rightBot = "h-[32px] w-[6px] bg-gray-800 dark:bg-gray-800 absolute -right-[16px] top-[88px] rounded-r-lg";
-export let top = "relative mx-auto border-gray-900 dark:bg-gray-800 dark:border-gray-800 border-[10px] rounded-[2.5rem] h-[213px] w-[208px]";
-export let bot = "relative mx-auto bg-gray-800 dark:bg-gray-700 rounded-b-[2.5rem] h-[63px] max-w-[133px]";
-export let classTop = "";
-export let classRightTop = "";
-export let classRightBot = "";
-export let classSlot = "";
-export let classBot = "";
+<script lang="ts">
+  import { type SmartwatchProps as Props, smartwatch } from ".";
+
+  let { children, divClass, div2Class, div3Class, div4Class, div5Class, div6Class, ...restProps }: Props = $props();
+
+  const { div, top, rightTop, rightBot, bot, slot } = smartwatch();
 </script>
 
-<div class={twMerge(div, $$props.class)}></div>
-<div class={twMerge(top, classTop)}>
-  <div class={twMerge(rightTop, classRightTop)}></div>
-  <div class={twMerge(rightBot, classRightBot)}></div>
-  <div class={twMerge(slot, classSlot)}>
-    <slot></slot>
+<div {...restProps}>
+  <div class={div({ class: divClass })}></div>
+  <div class={top({ class: div2Class })}>
+    <div class={rightTop({ class: div3Class })}></div>
+    <div class={rightBot({ class: div4Class })}></div>
+    <div class={slot({ class: div5Class })}>
+      {#if children}
+        {@render children()}
+      {/if}
+    </div>
   </div>
+  <div class={bot({ class: div6Class })}></div>
 </div>
-<div class={twMerge(bot, classBot)}></div>
 
 <!--
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@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]';
-@prop export let classTop: $$Props['classTop'] = '';
-@prop export let classRightTop: $$Props['classRightTop'] = '';
-@prop export let classRightBot: $$Props['classRightBot'] = '';
-@prop export let classSlot: $$Props['classSlot'] = '';
-@prop export let classBot: $$Props['classBot'] = '';
+@props: children: any;
+@props:divClass: any;
+@props:div2Class: any;
+@props:div3Class: any;
+@props:div4Class: any;
+@props:div5Class: any;
+@props:div6Class: any;
 -->

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

@@ -1,44 +1,25 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {
-        div?: string;
-        slot?: string;
-        rightTop?: string;
-        rightBot?: string;
-        top?: string;
-        bot?: string;
-        classTop?: string;
-        classRightTop?: string;
-        classRightBot?: string;
-        classSlot?: string;
-        classBot?: string;
-        class?: string;
-    };
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        default: {};
-    };
+    slots: {};
 };
-export type SmartwatchProps = typeof __propDef.props;
+type SmartwatchProps_ = typeof __propDef.props;
+export { SmartwatchProps_ as SmartwatchProps };
 export type SmartwatchEvents = typeof __propDef.events;
 export type SmartwatchSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @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]';
- * @prop export let classTop: $$Props['classTop'] = '';
- * @prop export let classRightTop: $$Props['classRightTop'] = '';
- * @prop export let classRightBot: $$Props['classRightBot'] = '';
- * @prop export let classSlot: $$Props['classSlot'] = '';
- * @prop export let classBot: $$Props['classBot'] = '';
+ * @props: children: any;
+ * @props:divClass: any;
+ * @props:div2Class: any;
+ * @props:div3Class: any;
+ * @props:div4Class: any;
+ * @props:div5Class: any;
+ * @props:div6Class: any;
  */
-export default class Smartwatch extends SvelteComponentTyped<SmartwatchProps, SmartwatchEvents, SmartwatchSlots> {
+export default class Smartwatch extends SvelteComponentTyped<SmartwatchProps_, SmartwatchEvents, SmartwatchSlots> {
 }
-export {};