flowbite-svelte 0.36.4 → 0.37.1

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

@@ -17,6 +17,15 @@ declare const __propDef: {
 export type DarkModeProps = typeof __propDef.props;
 export type DarkModeEvents = typeof __propDef.events;
 export type DarkModeSlots = typeof __propDef.slots;
+/**
+ * ## Features
+ * [Go to Darkmode](https://flowbite-svelte.com/docs/components/darkmode)
+ * ## Props
+ * @prop initialTheme: string = 'light';
+ * @prop btnClass: string =
+ *   'text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5';
+ * @prop size: 'sm' | 'md' | 'lg' = 'md';
+ */
 export default class DarkMode extends SvelteComponentTyped<DarkModeProps, DarkModeEvents, DarkModeSlots> {
 }
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"DarkMode.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/darkmode/DarkMode.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA4DD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACnD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACrD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEnD,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,oBAAoB,CAAC,aAAa,EAAE,cAAc,EAAE,aAAa,CAAC;CACvG"}
+{"version":3,"file":"DarkMode.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/darkmode/DarkMode.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA4DD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACnD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACrD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEnD;;;;;;;;GAQG;AACH,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,oBAAoB,CAAC,aAAa,EAAE,cAAc,EAAE,aAAa,CAAC;CACvG"}

package/dist/datepicker/Calender.svelte

@@ -1,12 +1,10 @@
 <svg
-	aria-hidden="true"
-	class="w-5 h-5 text-gray-500 dark:text-gray-400"
-	fill="currentColor"
-	viewBox="0 0 20 20"
-	xmlns="http://www.w3.org/2000/svg"
-	><path
-		fill-rule="evenodd"
-		d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
-		clip-rule="evenodd"
-	/></svg
->
+  aria-hidden="true"
+  class="w-5 h-5 text-gray-500 dark:text-gray-400"
+  fill="currentColor"
+  viewBox="0 0 20 20"
+  xmlns="http://www.w3.org/2000/svg"
+  ><path
+    fill-rule="evenodd"
+    d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
+    clip-rule="evenodd" /></svg>

package/dist/datepicker/Datepicker.svelte

@@ -66,3 +66,19 @@ $: setAttribute = (node, params) => {
     <slot />
   </div>
 {/if}
+
+<!--
+  @component
+  **EXPERIMENTAL**
+  ## Features
+  [Go to Datepicker](https://flowbite-svelte.com/docs/experimental/datepicker)
+  ## Props
+  @prop range: boolean = false;
+  @prop datepickerButtons: boolean = false;
+  @prop datepickerFormat: string = 'mm/dd/yyyy';
+  @prop datepickerOrientation: string = 'bottom';
+  @prop datepickerTitle: string = 'Flowbite datepicker';
+  @prop attribute: string = '';
+  @prop inputClass: string = 'bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5  dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500';
+
+-->

package/dist/datepicker/Datepicker.svelte.d.ts

@@ -20,6 +20,19 @@ declare const __propDef: {
 export type DatepickerProps = typeof __propDef.props;
 export type DatepickerEvents = typeof __propDef.events;
 export type DatepickerSlots = typeof __propDef.slots;
+/**
+ * **EXPERIMENTAL**
+ * ## Features
+ * [Go to Datepicker](https://flowbite-svelte.com/docs/experimental/datepicker)
+ * ## Props
+ * @prop range: boolean = false;
+ * @prop datepickerButtons: boolean = false;
+ * @prop datepickerFormat: string = 'mm/dd/yyyy';
+ * @prop datepickerOrientation: string = 'bottom';
+ * @prop datepickerTitle: string = 'Flowbite datepicker';
+ * @prop attribute: string = '';
+ * @prop inputClass: string = 'bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5  dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500';
+ */
 export default class Datepicker extends SvelteComponentTyped<DatepickerProps, DatepickerEvents, DatepickerSlots> {
 }
 export {};

package/dist/datepicker/Datepicker.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Datepicker.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/datepicker/Datepicker.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA2DD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACrD,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACvD,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAErD,MAAM,CAAC,OAAO,OAAO,UAAW,SAAQ,oBAAoB,CAAC,eAAe,EAAE,gBAAgB,EAAE,eAAe,CAAC;CAC/G"}
+{"version":3,"file":"Datepicker.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/datepicker/Datepicker.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA6DD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACrD,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACvD,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAErD;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,OAAO,OAAO,UAAW,SAAQ,oBAAoB,CAAC,eAAe,EAAE,gBAAgB,EAAE,eAAe,CAAC;CAC/G"}

package/dist/device-mockup/Android.svelte

@@ -1,5 +1,41 @@
-<div class="w-[148px] h-[18px] bg-gray-800 top-0 rounded-b-[1rem] left-1/2 -translate-x-1/2 absolute"></div>
-<div class="h-[32px] w-[3px] bg-gray-800 absolute -left-[17px] top-[72px] rounded-l-lg"></div>
-<div class="h-[46px] w-[3px] bg-gray-800 absolute -left-[17px] top-[124px] rounded-l-lg"></div>
-<div class="h-[46px] w-[3px] bg-gray-800 absolute -left-[17px] top-[178px] rounded-l-lg"></div>
-<div class="h-[64px] w-[3px] bg-gray-800 absolute -right-[17px] top-[142px] rounded-r-lg"></div>
+<script>export let androidTop;
+export let androidLeftTop;
+export let androidLeftMid;
+export let androidLeftBot;
+export let androidRight;
+</script>
+
+<div class={androidTop} />
+<div class={androidLeftTop} />
+<div class={androidLeftMid} />
+<div class={androidLeftBot} />
+<div class={androidRight} />
+
+<!--
+  @component
+  ## Features
+  [Go to Device Mockups](https://flowbite-svelte.com/docs/components/device-mockups)
+  ## Props
+  @prop androidTop: string;
+  @prop androidLeftTop: string;
+  @prop androidLeftMid: string;
+  @prop androidLeftBot: string;
+  @prop androidRight: string;
+  ## Example
+  ```
+  <script>
+    import { DeviceMockup } from 'flowbite-svelte';
+  </script>
+
+  <DeviceMockup device="android">
+    <img
+      src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/hero/mockup-1-light.png"
+      class="dark:hidden w-[272px] h-[572px]"
+      alt="android example 1" />
+    <img
+      src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/hero/mockup-1-dark.png"
+      class="hidden dark:block w-[272px] h-[572px]"
+      alt="android example 2" />
+  </DeviceMockup>
+  ```
+-->

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

@@ -1,24 +1,48 @@
-/** @typedef {typeof __propDef.props}  AndroidProps */
-/** @typedef {typeof __propDef.events}  AndroidEvents */
-/** @typedef {typeof __propDef.slots}  AndroidSlots */
-export default class Android extends SvelteComponentTyped<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type AndroidProps = typeof __propDef.props;
-export type AndroidEvents = typeof __propDef.events;
-export type AndroidSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        [x: string]: never;
+        androidTop: string;
+        androidLeftTop: string;
+        androidLeftMid: string;
+        androidLeftBot: string;
+        androidRight: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
+export type AndroidProps = typeof __propDef.props;
+export type AndroidEvents = typeof __propDef.events;
+export type AndroidSlots = typeof __propDef.slots;
+/**
+ * ## Features
+ * [Go to Device Mockups](https://flowbite-svelte.com/docs/components/device-mockups)
+ * ## Props
+ * @prop androidTop: string;
+ * @prop androidLeftTop: string;
+ * @prop androidLeftMid: string;
+ * @prop androidLeftBot: string;
+ * @prop androidRight: string;
+ * ## Example
+ * ```
+ * <script>
+ *   import { DeviceMockup } from 'flowbite-svelte';
+ * </script>
+ *
+ * <DeviceMockup device="android">
+ *   <img
+ *     src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/hero/mockup-1-light.png"
+ *     class="dark:hidden w-[272px] h-[572px]"
+ *     alt="android example 1" />
+ *   <img
+ *     src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/hero/mockup-1-dark.png"
+ *     class="hidden dark:block w-[272px] h-[572px]"
+ *     alt="android example 2" />
+ * </DeviceMockup>
+ * ```
+ */
+export default class Android extends SvelteComponentTyped<AndroidProps, AndroidEvents, AndroidSlots> {
+}
 export {};
 //# sourceMappingURL=Android.svelte.d.ts.map

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.js"],"names":[],"mappings":"AAUA,sDAAsD;AACtD,wDAAwD;AACxD,sDAAsD;AAEtD;;;;;CACC;2BALa,OAAO,UAAU,KAAK;4BACtB,OAAO,UAAU,MAAM;2BACvB,OAAO,UAAU,KAAK;qCAZC,QAAQ;AAS7C;;;;;;;;EAA8E"}
+{"version":3,"file":"Android.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/device-mockup/Android.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;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;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,MAAM,CAAC,OAAO,OAAO,OAAQ,SAAQ,oBAAoB,CAAC,YAAY,EAAE,aAAa,EAAE,YAAY,CAAC;CACnG"}

package/dist/device-mockup/DefaultMockup.svelte

@@ -0,0 +1,38 @@
+<script>export let defaultTop;
+export let defaultLeftTop;
+export let defaultLeftBot;
+export let defaultRight;
+</script>
+
+<div class={defaultTop} />
+<div class={defaultLeftTop} />
+<div class={defaultLeftBot} />
+<div class={defaultRight} />
+
+<!--
+  @component
+  ## Features
+  [Go to Device Mockups](https://flowbite-svelte.com/docs/components/device-mockups)
+  ## Props
+  @prop defaultTop: string;
+  @prop defaultLeftTop: string;
+  @prop defaultLeftBot: string;
+  @prop defaultRight: string;
+  ## Example
+  ```
+  <script>
+    import { DeviceMockup } from 'flowbite-svelte';
+  </script>
+
+  <DeviceMockup>
+    <img
+      src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/hero/mockup-1-light.png"
+      class="dark:hidden w-[272px] h-[572px]"
+      alt="default example 1" />
+    <img
+      src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/hero/mockup-1-dark.png"
+      class="hidden dark:block w-[272px] h-[572px]"
+      alt="default example 2" />
+  </DeviceMockup>
+  ```
+-->

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

@@ -0,0 +1,46 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        defaultTop: string;
+        defaultLeftTop: string;
+        defaultLeftBot: string;
+        defaultRight: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type DefaultMockupProps = typeof __propDef.props;
+export type DefaultMockupEvents = typeof __propDef.events;
+export type DefaultMockupSlots = typeof __propDef.slots;
+/**
+ * ## Features
+ * [Go to Device Mockups](https://flowbite-svelte.com/docs/components/device-mockups)
+ * ## Props
+ * @prop defaultTop: string;
+ * @prop defaultLeftTop: string;
+ * @prop defaultLeftBot: string;
+ * @prop defaultRight: string;
+ * ## Example
+ * ```
+ * <script>
+ *   import { DeviceMockup } from 'flowbite-svelte';
+ * </script>
+ *
+ * <DeviceMockup>
+ *   <img
+ *     src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/hero/mockup-1-light.png"
+ *     class="dark:hidden w-[272px] h-[572px]"
+ *     alt="default example 1" />
+ *   <img
+ *     src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/hero/mockup-1-dark.png"
+ *     class="hidden dark:block w-[272px] h-[572px]"
+ *     alt="default example 2" />
+ * </DeviceMockup>
+ * ```
+ */
+export default class DefaultMockup extends SvelteComponentTyped<DefaultMockupProps, DefaultMockupEvents, DefaultMockupSlots> {
+}
+export {};
+//# sourceMappingURL=DefaultMockup.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DefaultMockup.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/device-mockup/DefaultMockup.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;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;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,CAAC,OAAO,OAAO,aAAc,SAAQ,oBAAoB,CAAC,kBAAkB,EAAE,mBAAmB,EAAE,kBAAkB,CAAC;CAC3H"}

package/dist/device-mockup/DeviceMockup.svelte

@@ -1,69 +1,238 @@
-<script>import Default from './Default.svelte';
+<script>import DefaultMockup from './DefaultMockup.svelte';
 import Ios from './Ios.svelte';
 import Android from './Android.svelte';
 import Tablet from './Tablet.svelte';
-import SmartWatch from './SmartWatch.svelte';
+import Smartwatch from './Smartwatch.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';
 const divClasses = {
-    default: 'relative mx-auto border-gray-800 dark:border-gray-800 bg-gray-800 border-[14px] rounded-[2.5rem] h-[600px] w-[300px]',
-    ios: 'relative mx-auto border-gray-800 dark:border-gray-800 bg-gray-800 border-[14px] rounded-[2.5rem] h-[600px] w-[300px] shadow-xl',
-    android: 'relative mx-auto border-gray-800 dark:border-gray-800 bg-gray-800 border-[14px] rounded-xl h-[600px] w-[300px] shadow-xl',
-    tablet: '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]',
-    laptop: '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]',
-    desktop: '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]',
-    smartwatch: 'relative mx-auto bg-gray-800 dark:bg-gray-700 rounded-t-[2.5rem] h-[63px] max-w-[133px]'
+    default: defaultDiv,
+    ios: iosDiv,
+    android: androidDiv,
+    tablet: tabletDiv,
+    laptop: laptopDiv,
+    desktop: destopDiv,
+    smartwatch: smartwatchDiv
 };
 const slotClasses = {
-    default: 'rounded-[2rem] overflow-hidden w-[272px] h-[572px] bg-white dark:bg-gray-800',
-    ios: 'rounded-[2rem] overflow-hidden w-[272px] h-[572px] bg-white dark:bg-gray-800',
-    android: 'rounded-xl overflow-hidden w-[272px] h-[572px] bg-white dark:bg-gray-800',
-    tablet: 'rounded-[2rem] overflow-hidden h-[426px] md:h-[654px] bg-white dark:bg-gray-800',
-    laptop: 'rounded-lg overflow-hidden h-[156px] md:h-[278px] bg-white dark:bg-gray-800',
-    desktop: 'rounded-xl overflow-hidden h-[140px] md:h-[262px]',
-    smartwatch: 'rounded-[2rem] overflow-hidden h-[193px] w-[188px]'
+    default: defaultSlot,
+    ios: iosSlot,
+    android: androidSlot,
+    tablet: tabletSlot,
+    laptop: laptopSlot,
+    desktop: desktopSlot,
+    smartwatch: smartwatchSlot
 };
 </script>
 
-
-<div class="{divClasses[device]}">
+<div class={divClasses[device]}>
   {#if device === 'default'}
-    <Default />
+    <DefaultMockup {defaultTop} {defaultLeftTop} {defaultLeftBot} {defaultRight} />
   {:else if device === 'ios'}
-    <Ios />
+    <Ios {iosTop} {iosLeftTop} {iosLeftBot} {iosRight} />
   {:else if device === 'android'}
-    <Android />
+    <Android {androidTop} {androidLeftTop} {androidLeftMid} {androidLeftBot} {androidRight} />
   {:else if device === 'tablet'}
-    <Tablet />
+    <Tablet {tabletLeftTop} {tabletLeftMid} {tabletLeftBot} {tabletRight} />
   {/if}
-  {#if device === 'laptop' }
-  <div class="rounded-lg overflow-hidden h-[156px] md:h-[278px] bg-white dark:bg-gray-800">
-    <slot />
-  </div>
+  {#if device === 'laptop'}
+    <div class={laptopInner}>
+      <slot />
+    </div>
   {:else if device === 'desktop'}
-  <div class="rounded-xl overflow-hidden h-[140px] md:h-[262px]">
-    <slot />
-  </div>
+    <div class={desktopInner}>
+      <slot />
+    </div>
   {:else if device === 'smartwatch'}
-  <!-- No code -->
+    <!-- No code -->
   {:else}
-  <div class="{slotClasses[device]}">
-    <slot />
-  </div>
+    <div class={slotClasses[device]}>
+      <slot />
+    </div>
   {/if}
 </div>
-{#if device === 'laptop' }
-<div class="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]">
-  <div class="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"></div>
-</div>
+{#if device === 'laptop'}
+  <div class={laptopBot}>
+    <div class={laptopBotCen} />
+  </div>
 {:else if device === 'desktop'}
-<div class="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]"></div>
-<div class="relative mx-auto bg-gray-800 rounded-b-xl h-[55px] max-w-[83px] md:h-[95px] md:max-w-[142px]"></div>
+  <div class={desktopBot} />
+  <div class={desktopBotUnder} />
 {:else if device === 'smartwatch'}
-<div class="relative mx-auto border-gray-900 dark:bg-gray-800 dark:border-gray-800 border-[10px] rounded-[2.5rem] h-[213px] w-[208px]">
-  <SmartWatch />
-  <div class="rounded-[2rem] overflow-hidden h-[193px] w-[188px]">
+  <div class={smartTop}>
+    <Smartwatch {smartRightTop} {smartRightBot} />
+    <div class={smartwatchInner}>
       <slot />
+    </div>
   </div>
-</div>
-<div class="relative mx-auto bg-gray-800 dark:bg-gray-700 rounded-b-[2.5rem] h-[63px] max-w-[133px]"></div>
+  <div class={smartBot} />
 {/if}
+
+<!--
+  @component
+  ## Features
+  [Go to Device Mockups](https://flowbite-svelte.com/docs/components/device-mockups)
+  - Setup
+  - Default mockup
+  - iPhone 12 mockup (iOS)
+  - Google Pixel mockup (Android)
+  - Tablet mockup
+  - Laptop mockup
+  - Desktop mockup
+  - Smartwatch mockup
+  ## Props
+  @prop device: 'default' | 'ios' | 'android' | 'tablet' | 'laptop' | 'desktop' | 'smartwatch' =
+    'default';
+  ### Android
+  @prop 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 androidSlot: string =
+    'rounded-xl overflow-hidden w-[272px] h-[572px] bg-white dark:bg-gray-800';
+  @prop androidTop: string =
+    'w-[148px] h-[18px] bg-gray-800 top-0 rounded-b-[1rem] left-1/2 -translate-x-1/2 absolute';
+  @prop androidLeftTop: string =
+    'h-[32px] w-[3px] bg-gray-800 absolute -left-[17px] top-[72px] rounded-l-lg';
+  @prop androidLeftMid: string =
+    'h-[46px] w-[3px] bg-gray-800 absolute -left-[17px] top-[124px] rounded-l-lg';
+  @prop androidLeftBot: string =
+    'h-[46px] w-[3px] bg-gray-800 absolute -left-[17px] top-[178px] rounded-l-lg';
+  @prop androidRight: string =
+    'h-[64px] w-[3px] bg-gray-800 absolute -right-[17px] top-[142px] rounded-r-lg';
+  ### Default
+  @prop 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 defaultSlot: string =
+    'rounded-[2rem] overflow-hidden w-[272px] h-[572px] bg-white dark:bg-gray-800';
+  @prop defaultTop: string =
+    'h-[32px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[72px] rounded-l-lg';
+  @prop defaultLeftTop: string =
+    'h-[46px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[124px] rounded-l-lg';
+  @prop defaultLeftBot: string =
+    'h-[46px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[178px] rounded-l-lg';
+  @prop defaultRight: string =
+    'h-[64px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -right-[17px] top-[142px] rounded-r-lg';
+  ### Desktop
+  @prop desktopInner: string = 'rounded-xl overflow-hidden h-[140px] md:h-[262px]';
+  @prop 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 desktopBotUnder: string =
+    'relative mx-auto bg-gray-800 rounded-b-xl h-[55px] max-w-[83px] md:h-[95px] md:max-w-[142px]';
+  @prop 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 desktopSlot: string = 'rounded-xl overflow-hidden h-[140px] md:h-[262px]';
+  ### ios
+  @prop 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 iosSlot: string =
+    'rounded-[2rem] overflow-hidden w-[272px] h-[572px] bg-white dark:bg-gray-800';
+  @prop iosTop: string =
+    'w-[148px] h-[18px] bg-gray-800 top-0 rounded-b-[1rem] left-1/2 -translate-x-1/2 absolute';
+  @prop iosLeftTop: string =
+    'h-[46px] w-[3px] bg-gray-800 absolute -left-[17px] top-[124px] rounded-l-lg';
+  @prop iosLeftBot: string =
+    'h-[46px] w-[3px] bg-gray-800 absolute -left-[17px] top-[178px] rounded-l-lg';
+  @prop iosRight: string =
+    'h-[64px] w-[3px] bg-gray-800 absolute -right-[17px] top-[142px] rounded-r-lg';
+  ### Laptop    
+  @prop 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 laptopSlot: string =
+    'rounded-lg overflow-hidden h-[156px] md:h-[278px] bg-white dark:bg-gray-800';
+  @prop laptopInner: string =
+    'rounded-lg overflow-hidden h-[156px] md:h-[278px] bg-white dark:bg-gray-800';
+  @prop 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 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';
+  ### Smartwatch
+  @prop smartwatchDiv: string =
+    'relative mx-auto bg-gray-800 dark:bg-gray-700 rounded-t-[2.5rem] h-[63px] max-w-[133px]';
+  @prop smartwatchSlot: string = 'rounded-[2rem] overflow-hidden h-[193px] w-[188px]';
+  @prop smartRightTop: string =
+    'h-[41px] w-[6px] bg-gray-800 dark:bg-gray-800 absolute -right-[16px] top-[40px] rounded-r-lg';
+  @prop smartRightBot: string =
+    'h-[32px] w-[6px] bg-gray-800 dark:bg-gray-800 absolute -right-[16px] top-[88px] rounded-r-lg';
+  @prop 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 smartBot: string =
+    'relative mx-auto bg-gray-800 dark:bg-gray-700 rounded-b-[2.5rem] h-[63px] max-w-[133px]';
+  @prop smartwatchInner: string = 'rounded-[2rem] overflow-hidden h-[193px] w-[188px]';
+  ### Tablet
+  @prop 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 tabletSlot: string =
+    'rounded-[2rem] overflow-hidden h-[426px] md:h-[654px] bg-white dark:bg-gray-800';
+  @prop tabletLeftTop: string =
+    'h-[32px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[72px] rounded-l-lg';
+  @prop tabletLeftMid: string =
+    'h-[46px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[124px] rounded-l-lg';
+  @prop tabletLeftBot: string =
+    'h-[46px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[178px] rounded-l-lg';
+  @prop tabletRight: string =
+    'h-[64px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -right-[17px] top-[142px] rounded-r-lg';
+  ## Example 
+  ```
+  <script>
+    import { DeviceMockup } from 'flowbite-svelte';
+  </script>
+
+  <DeviceMockup>
+    <img
+      src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/hero/mockup-1-light.png"
+      class="dark:hidden w-[272px] h-[572px]"
+      alt="default example 1" />
+    <img
+      src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/hero/mockup-1-dark.png"
+      class="hidden dark:block w-[272px] h-[572px]"
+      alt="default example 2" />
+  </DeviceMockup>
+  ```
+-->