flowbite-svelte 0.44.13 → 0.44.14

package/dist/buttons/Button.svelte

@@ -68,7 +68,7 @@ let buttonClass;
 $: buttonClass = twMerge('text-center font-medium', group ? 'focus:ring-2' : 'focus:ring-4', group && 'focus:z-10', group || 'focus:outline-none', 'inline-flex items-center justify-center ' + sizeClasses[size], outline ? outlineClasses[color] : colorClasses[color], color === 'alternative' && (group ? '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 ? 'dark:text-white dark:border-white' : 'dark:text-gray-400 dark:border-gray-700'), coloredFocusClasses[color], hasBorder() && group && 'border-l-0 first:border-l', group ? (pill && 'first:rounded-l-full last:rounded-r-full') || 'first:rounded-l-lg last:rounded-r-lg' : (pill && 'rounded-full') || 'rounded-lg', shadow && 'shadow-lg', shadow && coloredShadowClasses[color], $$props.disabled && 'cursor-not-allowed opacity-50', $$props.class);
 </script>
 
-<svelte:element this={href ? 'a' : 'button'} type={href ? undefined : type} {href} role={href ? 'link' : 'button'} {...$$restProps} class={buttonClass} on:click on:change on:keydown on:keyup on:touchstart on:touchend on:touchcancel on:mouseenter on:mouseleave>
+<svelte:element this={href ? 'a' : 'button'} type={href ? undefined : type} {href} role={href ? 'link' : 'button'} {...$$restProps} class={buttonClass} on:click on:change on:keydown on:keyup on:touchstart|passive on:touchend on:touchcancel on:mouseenter on:mouseleave>
   <slot />
 </svelte:element>
 

package/dist/buttons/GradientButton.svelte

@@ -50,7 +50,7 @@ $: divClass = twMerge($$props.outline && 'p-0.5', gradientClasses[color], shadow
     <!-- Trick to prentend outline without using border
 	    This has a limitation of no supporting transparency as
 	    is set to bg-white dark:bg-gray-900 -->
-    <Button {...$$restProps} color="none" class={gradientOutlineClass} on:click on:change on:keydown on:keyup on:touchstart on:touchend on:touchcancel on:mouseenter on:mouseleave><slot /></Button>
+    <Button {...$$restProps} color="none" class={gradientOutlineClass} on:click on:change on:keydown on:keyup on:mouseenter on:mouseleave><slot /></Button>
   </div>
 {:else}
   <Button {...$$restProps} color="none" class={divClass} on:click on:change on:keydown on:keyup on:touchstart on:touchend on:touchcancel on:mouseenter on:mouseleave>

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

@@ -10,11 +10,11 @@ declare const __propDef: {
         change: Event;
         keydown: KeyboardEvent;
         keyup: KeyboardEvent;
+        mouseenter: MouseEvent;
+        mouseleave: MouseEvent;
         touchstart: TouchEvent;
         touchend: TouchEvent;
         touchcancel: TouchEvent;
-        mouseenter: MouseEvent;
-        mouseleave: MouseEvent;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/dist/carousels/Carousel.svelte

@@ -116,7 +116,7 @@ $: onDragStop =
 
 <!-- The move listeners go here, so things keep working if the touch strays out of the element. -->
 <svelte:document on:mousemove={onDragMove} on:mouseup={onDragStop} on:touchmove={onDragMove} on:touchend={onDragStop} />
-<div bind:this={carouselDiv} class="relative" on:mousedown={onDragStart} on:touchstart={onDragStart} role="button" aria-label="Draggable Carousel" tabindex="0">
+<div bind:this={carouselDiv} class="relative" on:mousedown={onDragStart} on:touchstart|passive={onDragStart} role="button" aria-label="Draggable Carousel" tabindex="0">
   <div style={`transform: translateX(${percentOffset}%)`} {...$$restProps} class={twMerge(divClass, activeDragGesture === undefined ? 'transition-transform' : '', $$props.class)} use:loop={duration}>
     {#key images[index]}
       <img alt="..." {...images[index]} transition:transition={{}} class="absolute block w-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2 object-cover" />

package/dist/device-mockup/Android.svelte

@@ -1,23 +1,33 @@
-<script>export let androidTop;
-export let androidLeftTop;
-export let androidLeftMid;
-export let androidLeftBot;
-export let androidRight;
+<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-xl h-[600px] w-[300px] shadow-xl';
+export let slot = 'rounded-xl 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-[32px] w-[3px] bg-gray-800 absolute -left-[17px] top-[72px] rounded-l-lg';
+export let leftMid = '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';
 </script>
 
-<div class={androidTop} />
-<div class={androidLeftTop} />
-<div class={androidLeftMid} />
-<div class={androidLeftBot} />
-<div class={androidRight} />
+<div class={twMerge(div, $$props.class)}>
+  <div class={twMerge(top, $$props.classTop)} />
+  <div class={twMerge(leftTop, $$props.classLeftTop)} />
+  <div class={twMerge(leftMid, $$props.classLeftMid)} />
+  <div class={twMerge(leftBot, $$props.classLeftBot)} />
+  <div class={twMerge(right, $$props.classRight)} />
+  <div class={twMerge(slot, $$props.classSlot)}>
+    <slot />
+  </div>
+</div>
 
 <!--
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let androidTop: string;
-@prop export let androidLeftTop: string;
-@prop export let androidLeftMid: string;
-@prop export let androidLeftBot: string;
-@prop export let androidRight: string;
+@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';
 -->

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

@@ -1,16 +1,21 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        androidTop: string;
-        androidLeftTop: string;
-        androidLeftMid: string;
-        androidLeftBot: string;
-        androidRight: string;
+        [x: string]: any;
+        div?: string | undefined;
+        slot?: string | undefined;
+        top?: string | undefined;
+        leftTop?: string | undefined;
+        leftMid?: string | undefined;
+        leftBot?: string | undefined;
+        right?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        default: {};
+    };
 };
 export type AndroidProps = typeof __propDef.props;
 export type AndroidEvents = typeof __propDef.events;
@@ -18,11 +23,13 @@ export type AndroidSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop export let androidTop: string;
- * @prop export let androidLeftTop: string;
- * @prop export let androidLeftMid: string;
- * @prop export let androidLeftBot: string;
- * @prop export let androidRight: string;
+ * @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';
  */
 export default class Android extends SvelteComponent<AndroidProps, AndroidEvents, AndroidSlots> {
 }

package/dist/device-mockup/Android.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Android.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/device-mockup/Android.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AAmBD,QAAA,MAAM,SAAS;;oBAD0K,MAAM;wBAAkB,MAAM;wBAAkB,MAAM;wBAAkB,MAAM;sBAAgB,MAAM;;;;;;CACtO,CAAC;AACxD,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAClD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACpD,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAElD;;;;;;;;GAQG;AACH,MAAM,CAAC,OAAO,OAAO,OAAQ,SAAQ,eAAe,CAAC,YAAY,EAAE,aAAa,EAAE,YAAY,CAAC;CAC9F"}
+{"version":3,"file":"Android.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/device-mockup/Android.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AA8BD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAClD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACpD,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAElD;;;;;;;;;;GAUG;AACH,MAAM,CAAC,OAAO,OAAO,OAAQ,SAAQ,eAAe,CAAC,YAAY,EAAE,aAAa,EAAE,YAAY,CAAC;CAC9F"}

package/dist/device-mockup/DefaultMockup.svelte

@@ -1,20 +1,30 @@
-<script>export let defaultTop;
-export let defaultLeftTop;
-export let defaultLeftBot;
-export let defaultRight;
+<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]';
+export let slot = 'rounded-[2rem] overflow-hidden w-[272px] h-[572px] bg-white dark:bg-gray-800';
+export let top = 'h-[32px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[72px] rounded-l-lg';
+export let leftTop = 'h-[46px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[124px] rounded-l-lg';
+export let leftBot = 'h-[46px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[178px] rounded-l-lg';
+export let right = 'h-[64px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -right-[17px] top-[142px] rounded-r-lg';
 </script>
 
-<div class={defaultTop} />
-<div class={defaultLeftTop} />
-<div class={defaultLeftBot} />
-<div class={defaultRight} />
+<div class={twMerge(div, $$props.class)}>
+  <div class={twMerge(top, $$props.classTop)} />
+  <div class={twMerge(leftTop, $$props.classLeftTop)} />
+  <div class={twMerge(leftBot, $$props.classLeftBot)} />
+  <div class={twMerge(right, $$props.classRight)} />
+  <div class={twMerge(slot, $$props.classSlot)}>
+    <slot />
+  </div>
+</div>
 
 <!--
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let defaultTop: string;
-@prop export let defaultLeftTop: string;
-@prop export let defaultLeftBot: string;
-@prop export let defaultRight: string;
+@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';
 -->

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

@@ -1,15 +1,20 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        defaultTop: string;
-        defaultLeftTop: string;
-        defaultLeftBot: string;
-        defaultRight: string;
+        [x: string]: any;
+        div?: string | undefined;
+        slot?: string | undefined;
+        top?: string | undefined;
+        leftTop?: string | undefined;
+        leftBot?: string | undefined;
+        right?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        default: {};
+    };
 };
 export type DefaultMockupProps = typeof __propDef.props;
 export type DefaultMockupEvents = typeof __propDef.events;
@@ -17,10 +22,12 @@ export type DefaultMockupSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop export let defaultTop: string;
- * @prop export let defaultLeftTop: string;
- * @prop export let defaultLeftBot: string;
- * @prop export let defaultRight: string;
+ * @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';
  */
 export default class DefaultMockup extends SvelteComponent<DefaultMockupProps, DefaultMockupEvents, DefaultMockupSlots> {
 }

package/dist/device-mockup/DefaultMockup.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DefaultMockup.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/device-mockup/DefaultMockup.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AAiBD,QAAA,MAAM,SAAS;;oBADyI,MAAM;wBAAkB,MAAM;wBAAkB,MAAM;sBAAgB,MAAM;;;;;;CAC7K,CAAC;AACxD,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACxD,MAAM,MAAM,mBAAmB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC1D,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAExD;;;;;;;GAOG;AACH,MAAM,CAAC,OAAO,OAAO,aAAc,SAAQ,eAAe,CAAC,kBAAkB,EAAE,mBAAmB,EAAE,kBAAkB,CAAC;CACtH"}
+{"version":3,"file":"DefaultMockup.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/device-mockup/DefaultMockup.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AA4BD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACxD,MAAM,MAAM,mBAAmB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC1D,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAExD;;;;;;;;;GASG;AACH,MAAM,CAAC,OAAO,OAAO,aAAc,SAAQ,eAAe,CAAC,kBAAkB,EAAE,mBAAmB,EAAE,kBAAkB,CAAC;CACtH"}

package/dist/device-mockup/Desktop.svelte

@@ -0,0 +1,24 @@
+<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]';
+</script>
+
+<div class={twMerge(div, $$props.class)}>
+  <div class={twMerge(inner, $$props.classInner)}>
+    <slot />
+  </div>
+</div>
+<div class={twMerge(bot, $$props.classBot)} />
+<div class={twMerge(botUnder, $$props.classBotUnder)} />
+
+<!--
+@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]';
+-->

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

@@ -0,0 +1,31 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        inner?: string | undefined;
+        bot?: string | undefined;
+        botUnder?: string | undefined;
+        div?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type DesktopProps = typeof __propDef.props;
+export type DesktopEvents = typeof __propDef.events;
+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]';
+ */
+export default class Desktop extends SvelteComponent<DesktopProps, DesktopEvents, DesktopSlots> {
+}
+export {};
+//# sourceMappingURL=Desktop.svelte.d.ts.map

package/dist/device-mockup/Desktop.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Desktop.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/device-mockup/Desktop.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AAwBD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAClD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACpD,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAElD;;;;;;;GAOG;AACH,MAAM,CAAC,OAAO,OAAO,OAAQ,SAAQ,eAAe,CAAC,YAAY,EAAE,aAAa,EAAE,YAAY,CAAC;CAC9F"}

package/dist/device-mockup/DeviceMockup.svelte

@@ -1,169 +1,28 @@
-<script>import { twJoin, twMerge } from 'tailwind-merge';
+<script>import Android from './Android.svelte';
 import DefaultMockup from './DefaultMockup.svelte';
+import Desktop from './Desktop.svelte';
 import Ios from './Ios.svelte';
-import Android from './Android.svelte';
-import Tablet from './Tablet.svelte';
+import Laptop from './Laptop.svelte';
 import Smartwatch from './Smartwatch.svelte';
+import Tablet from './Tablet.svelte';
 export let device = 'default';
-// android
-export let androidDiv = 'relative mx-auto border-gray-800 dark:border-gray-800 bg-gray-800 border-[14px] rounded-xl h-[600px] w-[300px] shadow-xl';
-export let androidSlot = 'rounded-xl overflow-hidden w-[272px] h-[572px] bg-white dark:bg-gray-800';
-export let androidTop = 'w-[148px] h-[18px] bg-gray-800 top-0 rounded-b-[1rem] left-1/2 -translate-x-1/2 absolute';
-export let androidLeftTop = 'h-[32px] w-[3px] bg-gray-800 absolute -left-[17px] top-[72px] rounded-l-lg';
-export let androidLeftMid = 'h-[46px] w-[3px] bg-gray-800 absolute -left-[17px] top-[124px] rounded-l-lg';
-export let androidLeftBot = 'h-[46px] w-[3px] bg-gray-800 absolute -left-[17px] top-[178px] rounded-l-lg';
-export let androidRight = 'h-[64px] w-[3px] bg-gray-800 absolute -right-[17px] top-[142px] rounded-r-lg';
-// default
-export let defaultDiv = 'relative mx-auto border-gray-800 dark:border-gray-800 bg-gray-800 border-[14px] rounded-[2.5rem] h-[600px] w-[300px]';
-export let defaultSlot = 'rounded-[2rem] overflow-hidden w-[272px] h-[572px] bg-white dark:bg-gray-800';
-export let defaultTop = 'h-[32px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[72px] rounded-l-lg';
-export let defaultLeftTop = 'h-[46px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[124px] rounded-l-lg';
-export let defaultLeftBot = 'h-[46px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[178px] rounded-l-lg';
-export let defaultRight = 'h-[64px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -right-[17px] top-[142px] rounded-r-lg';
-// desktop
-export let desktopInner = 'rounded-xl overflow-hidden h-[140px] md:h-[262px]';
-export let desktopBot = '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 desktopBotUnder = 'relative mx-auto bg-gray-800 rounded-b-xl h-[55px] max-w-[83px] md:h-[95px] md:max-w-[142px]';
-export let destopDiv = '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 desktopSlot = 'rounded-xl overflow-hidden h-[140px] md:h-[262px]';
-// ios
-export let iosDiv = '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 iosSlot = 'rounded-[2rem] overflow-hidden w-[272px] h-[572px] bg-white dark:bg-gray-800';
-export let iosTop = 'w-[148px] h-[18px] bg-gray-800 top-0 rounded-b-[1rem] left-1/2 -translate-x-1/2 absolute';
-export let iosLeftTop = 'h-[46px] w-[3px] bg-gray-800 absolute -left-[17px] top-[124px] rounded-l-lg';
-export let iosLeftBot = 'h-[46px] w-[3px] bg-gray-800 absolute -left-[17px] top-[178px] rounded-l-lg';
-export let iosRight = 'h-[64px] w-[3px] bg-gray-800 absolute -right-[17px] top-[142px] rounded-r-lg';
-// laptop
-export let laptopDiv = '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 laptopSlot = 'rounded-lg overflow-hidden h-[156px] md:h-[278px] bg-white dark:bg-gray-800';
-export let laptopInner = 'rounded-lg overflow-hidden h-[156px] md:h-[278px] bg-white dark:bg-gray-800';
-export let laptopBot = '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 laptopBotCen = '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';
-// smartwatch
-export let smartwatchDiv = 'relative mx-auto bg-gray-800 dark:bg-gray-700 rounded-t-[2.5rem] h-[63px] max-w-[133px]';
-export let smartwatchSlot = 'rounded-[2rem] overflow-hidden h-[193px] w-[188px]';
-export let smartRightTop = 'h-[41px] w-[6px] bg-gray-800 dark:bg-gray-800 absolute -right-[16px] top-[40px] rounded-r-lg';
-export let smartRightBot = 'h-[32px] w-[6px] bg-gray-800 dark:bg-gray-800 absolute -right-[16px] top-[88px] rounded-r-lg';
-export let smartTop = '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 smartBot = 'relative mx-auto bg-gray-800 dark:bg-gray-700 rounded-b-[2.5rem] h-[63px] max-w-[133px]';
-export let smartwatchInner = 'rounded-[2rem] overflow-hidden h-[193px] w-[188px]';
-// tablet
-export let tabletDiv = '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]';
-export let tabletSlot = 'rounded-[2rem] overflow-hidden h-[426px] md:h-[654px] bg-white dark:bg-gray-800';
-export let tabletLeftTop = 'h-[32px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[72px] rounded-l-lg';
-export let tabletLeftMid = 'h-[46px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[124px] rounded-l-lg';
-export let tabletLeftBot = 'h-[46px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[178px] rounded-l-lg';
-export let tabletRight = 'h-[64px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -right-[17px] top-[142px] rounded-r-lg';
-// android
-let androidDivCls = twMerge(androidDiv, $$props.classAndroidDiv);
-let androidSlotCls = twMerge(androidSlot, $$props.classAndroidSlot);
-let androidTopCls = twMerge(androidTop, $$props.classAndroidTop);
-let androidLeftTopCls = twMerge(androidLeftTop, $$props.classAndroidLeftTop);
-let androidLeftMidCls = twMerge(androidLeftMid, $$props.classAndroidLeftMid);
-let androidLeftBotCls = twMerge(androidLeftBot, $$props.classAndroidLeftBot);
-let androidRightCls = twMerge(androidRight, $$props.classAndroidRight);
-//default
-let defaultDivCls = twMerge(defaultDiv, $$props.classDefaultDiv);
-let defaultSlotCls = twMerge(defaultSlot, $$props.classDefaultSlot);
-let defaultTopCls = twMerge(defaultTop, $$props.classDefaultTop);
-let defaultLeftTopCls = twMerge(defaultLeftTop, $$props.classDefaultLeftTop);
-let defaultLeftBotCls = twMerge(defaultLeftBot, $$props.classDefaultLeftBot);
-let defaultRightCls = twMerge(defaultRight, $$props.classDefaultRight);
-// desktop
-let desktopInnerCls = twMerge(desktopInner, $$props.classDesktopInner);
-let desktopBotCls = twMerge(desktopBot, $$props.classDesktopBot);
-let desktopBotUnderCls = twMerge(desktopBotUnder, $$props.classDesktopBotUnder);
-let destopDivCls = twMerge(destopDiv, $$props.classDestopDiv);
-let desktopSlotCls = twMerge(desktopSlot, $$props.classDesktopSlot);
-// ios
-let iosDivCls = twMerge(iosDiv, $$props.classIosDiv);
-let iosSlotCls = twMerge(iosSlot, $$props.classIosSlot);
-let iosTopCls = twMerge(iosTop, $$props.classIosTop);
-let iosLeftTopCls = twMerge(iosLeftTop, $$props.classIosLeftTop);
-let iosLeftBotCls = twMerge(iosLeftBot, $$props.classIosLeftBot);
-let iosRightCls = twMerge(iosRight, $$props.classIosRight);
-// laptop
-let laptopDivCls = twMerge(laptopDiv, $$props.classLaptopDiv);
-let laptopSlotCls = twMerge(laptopSlot, $$props.classLaptopSlot);
-let laptopInnerCls = twMerge(laptopInner, $$props.classLaptopInner);
-let laptopBotCls = twMerge(laptopBot, $$props.classLaptopBot);
-let laptopBotCenCls = twMerge(laptopBotCen, $$props.classLaptopBotCen);
-// smartwatch
-let smartwatchDivCls = twMerge(smartwatchDiv, $$props.classSmartwatchDiv);
-let smartwatchSlotCls = twMerge(smartwatchSlot, $$props.classSmartwatchSlot);
-let smartRightTopCls = twMerge(smartRightTop, $$props.classSmartRightTop);
-let smartRightBotCls = twMerge(smartRightBot, $$props.classSmartRightBot);
-let smartTopCls = twMerge(smartTop, $$props.classSmartTop);
-let smartBotCls = twMerge(smartBot, $$props.classSmartBot);
-let smartwatchInnerCls = twMerge(smartwatchInner, $$props.classSmartwatchInner);
-// tablet
-let tabletDivCls = twMerge(tabletDiv, $$props.classTabletDiv);
-let tabletSlotCls = twMerge(tabletSlot, $$props.classTabletSlot);
-let tabletLeftTopCls = twMerge(tabletLeftTop, $$props.classTabletLeftTop);
-let tabletLeftMidCls = twMerge(tabletLeftMid, $$props.classTabletLeftMid);
-let tabletLeftBotCls = twMerge(tabletLeftBot, $$props.classTabletLeftBot);
-let tabletRightCls = twMerge(tabletRight, $$props.classTabletRight);
-const divClasses = {
-    default: defaultDivCls,
-    ios: iosDivCls,
-    android: androidDivCls,
-    tablet: tabletDivCls,
-    laptop: laptopDivCls,
-    desktop: destopDivCls,
-    smartwatch: smartwatchDivCls
-};
-const slotClasses = {
-    default: defaultSlotCls,
-    ios: iosSlotCls,
-    android: androidSlotCls,
-    tablet: tabletSlotCls,
-    laptop: laptopSlotCls,
-    desktop: desktopSlotCls,
-    smartwatch: smartwatchSlotCls
+const componets = {
+    android: Android,
+    ios: Ios,
+    tablet: Tablet,
+    default: DefaultMockup,
+    smartwatch: Smartwatch,
+    laptop: Laptop,
+    desktop: Desktop
 };
+let component;
+$: component = componets[device];
 </script>
 
-<div class={twMerge(divClasses[device], $$props.class)}>
-  {#if device === 'default'}
-    <DefaultMockup defaultTop={defaultTopCls} defaultLeftTop={defaultLeftTopCls} defaultLeftBot={defaultLeftBotCls} defaultRight={defaultRightCls} />
-  {:else if device === 'ios'}
-    <Ios iosTop={iosTopCls} iosLeftTop={iosLeftTopCls} iosLeftBot={iosLeftBotCls} iosRight={iosRightCls} />
-  {:else if device === 'android'}
-    <Android androidTop={androidTopCls} androidLeftTop={androidLeftTopCls} androidLeftMid={androidLeftMidCls} androidLeftBot={androidLeftBotCls} androidRight={androidRightCls} />
-  {:else if device === 'tablet'}
-    <Tablet tabletLeftTop={tabletLeftTopCls} tabletLeftMid={tabletLeftMidCls} tabletLeftBot={tabletLeftBotCls} tabletRight={tabletRightCls} />
-  {/if}
-  {#if device === 'laptop'}
-    <div class={laptopInnerCls}>
-      <slot />
-    </div>
-  {:else if device === 'desktop'}
-    <div class={desktopInnerCls}>
-      <slot />
-    </div>
-  {:else if device === 'smartwatch'}
-    <!-- No code -->
-  {:else}
-    <div class={slotClasses[device]}>
-      <slot />
-    </div>
-  {/if}
-</div>
-{#if device === 'laptop'}
-  <div class={laptopBotCls}>
-    <div class={laptopBotCenCls} />
-  </div>
-{:else if device === 'desktop'}
-  <div class={desktopBotCls} />
-  <div class={desktopBotUnderCls} />
-{:else if device === 'smartwatch'}
-  <div class={smartTopCls}>
-    <Smartwatch smartRightTop={smartRightTopCls} smartRightBot={smartRightBotCls} />
-    <div class={smartwatchInnerCls}>
-      <slot />
-    </div>
-  </div>
-  <div class={smartBotCls} />
+{#if component}
+  <svelte:component this={component}><slot /></svelte:component>
+{:else}
+  <div class="border p-3 text-xl">Unknow device</div>
 {/if}
 
 <!--
@@ -171,46 +30,4 @@ const slotClasses = {
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
 @prop export let device: 'default' | 'ios' | 'android' | 'tablet' | 'laptop' | 'desktop' | 'smartwatch' = 'default';
-@prop export let androidDiv: 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 androidSlot: string = 'rounded-xl overflow-hidden w-[272px] h-[572px] bg-white dark:bg-gray-800';
-@prop export let androidTop: string = 'w-[148px] h-[18px] bg-gray-800 top-0 rounded-b-[1rem] left-1/2 -translate-x-1/2 absolute';
-@prop export let androidLeftTop: string = 'h-[32px] w-[3px] bg-gray-800 absolute -left-[17px] top-[72px] rounded-l-lg';
-@prop export let androidLeftMid: string = 'h-[46px] w-[3px] bg-gray-800 absolute -left-[17px] top-[124px] rounded-l-lg';
-@prop export let androidLeftBot: string = 'h-[46px] w-[3px] bg-gray-800 absolute -left-[17px] top-[178px] rounded-l-lg';
-@prop export let androidRight: string = 'h-[64px] w-[3px] bg-gray-800 absolute -right-[17px] top-[142px] rounded-r-lg';
-@prop export let defaultDiv: 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 defaultSlot: string = 'rounded-[2rem] overflow-hidden w-[272px] h-[572px] bg-white dark:bg-gray-800';
-@prop export let defaultTop: string = 'h-[32px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[72px] rounded-l-lg';
-@prop export let defaultLeftTop: string = 'h-[46px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[124px] rounded-l-lg';
-@prop export let defaultLeftBot: string = 'h-[46px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[178px] rounded-l-lg';
-@prop export let defaultRight: string = 'h-[64px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -right-[17px] top-[142px] rounded-r-lg';
-@prop export let desktopInner: string = 'rounded-xl overflow-hidden h-[140px] md:h-[262px]';
-@prop export let desktopBot: 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 desktopBotUnder: 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 destopDiv: 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 desktopSlot: string = 'rounded-xl overflow-hidden h-[140px] md:h-[262px]';
-@prop export let iosDiv: 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 iosSlot: string = 'rounded-[2rem] overflow-hidden w-[272px] h-[572px] bg-white dark:bg-gray-800';
-@prop export let iosTop: string = 'w-[148px] h-[18px] bg-gray-800 top-0 rounded-b-[1rem] left-1/2 -translate-x-1/2 absolute';
-@prop export let iosLeftTop: string = 'h-[46px] w-[3px] bg-gray-800 absolute -left-[17px] top-[124px] rounded-l-lg';
-@prop export let iosLeftBot: string = 'h-[46px] w-[3px] bg-gray-800 absolute -left-[17px] top-[178px] rounded-l-lg';
-@prop export let iosRight: string = 'h-[64px] w-[3px] bg-gray-800 absolute -right-[17px] top-[142px] rounded-r-lg';
-@prop export let laptopDiv: 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 laptopSlot: string = 'rounded-lg overflow-hidden h-[156px] md:h-[278px] bg-white dark:bg-gray-800';
-@prop export let laptopInner: string = 'rounded-lg overflow-hidden h-[156px] md:h-[278px] bg-white dark:bg-gray-800';
-@prop export let laptopBot: 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 laptopBotCen: 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 smartwatchDiv: string = 'relative mx-auto bg-gray-800 dark:bg-gray-700 rounded-t-[2.5rem] h-[63px] max-w-[133px]';
-@prop export let smartwatchSlot: string = 'rounded-[2rem] overflow-hidden h-[193px] w-[188px]';
-@prop export let smartRightTop: string = 'h-[41px] w-[6px] bg-gray-800 dark:bg-gray-800 absolute -right-[16px] top-[40px] rounded-r-lg';
-@prop export let smartRightBot: string = 'h-[32px] w-[6px] bg-gray-800 dark:bg-gray-800 absolute -right-[16px] top-[88px] rounded-r-lg';
-@prop export let smartTop: 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 smartBot: string = 'relative mx-auto bg-gray-800 dark:bg-gray-700 rounded-b-[2.5rem] h-[63px] max-w-[133px]';
-@prop export let smartwatchInner: string = 'rounded-[2rem] overflow-hidden h-[193px] w-[188px]';
-@prop export let tabletDiv: 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 tabletSlot: string = 'rounded-[2rem] overflow-hidden h-[426px] md:h-[654px] bg-white dark:bg-gray-800';
-@prop export let tabletLeftTop: string = 'h-[32px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[72px] rounded-l-lg';
-@prop export let tabletLeftMid: string = 'h-[46px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[124px] rounded-l-lg';
-@prop export let tabletLeftBot: string = 'h-[46px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[178px] rounded-l-lg';
-@prop export let tabletRight: string = 'h-[64px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -right-[17px] top-[142px] rounded-r-lg';
 -->