flowbite-svelte 0.36.2 → 0.36.5

package/README.md

@@ -1,4 +1,4 @@
-# FLOWBITE-SVELTE 
+# FLOWBITE-SVELTE
 
 [![npm version](https://badgen.net/npm/v/flowbite-svelte)](https://www.npmjs.com/package/flowbite-svelte)
 [![npm downloads](https://badgen.net/npm/dw/flowbite-svelte)](https://www.npmjs.com/package/flowbite-svelte)
@@ -510,4 +510,4 @@ View the full [changelog](https://github.com/themesberg/flowbite-svelte/blob/mai
 
 ## License
 
-Flowbite Svelte is open-source under the [MIT License](https://flowbite-svelte.com/docs/pages/license).
+Flowbite Svelte is open-source under the [MIT License](https://flowbite-svelte.com/docs/pages/license).

package/dist/avatar/Placeholder.svelte

@@ -2,14 +2,9 @@
 </script>
 
 <svg
-	class="text-gray-400 bg-gray-100 dark:bg-gray-600 {rounded ? 'rounded' : 'rounded-full'}"
-	fill="currentColor"
-	viewBox="0 0 16 16"
-	xmlns="http://www.w3.org/2000/svg"
->
-	<path
-		fill-rule="evenodd"
-		d="M8 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
-		clip-rule="evenodd"
-	/>
+  class="text-gray-400 bg-gray-100 dark:bg-gray-600 {rounded ? 'rounded' : 'rounded-full'}"
+  fill="currentColor"
+  viewBox="0 0 16 16"
+  xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="M8 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd" />
 </svg>

package/dist/banner/Banner.svelte

@@ -31,26 +31,26 @@ $: handleHide = () => {
 </script>
 
 {#if show}
-  <div {id} tabindex="-1" class={divClass} {...$$restProps} >
+  <div {id} tabindex="-1" class={divClass} {...$$restProps}>
     <slot name="header" />
     <div class={div2Class}>
-        <slot />
+      <slot />
     </div>
     {#if dismissable}
-    <div class="flex items-center">
-      <CloseButton
-        class="-mx-1.5 -my-1.5"
-        color={$$restProps.color}
-        on:click={handleHide}
-        on:click
-        on:change
-        on:keydown
-        on:keyup
-        on:focus
-        on:blur
-        on:mouseenter
-        on:mouseleave />
-    </div>
+      <div class="flex items-center">
+        <CloseButton
+          class="-mx-1.5 -my-1.5"
+          color={$$restProps.color}
+          on:click={handleHide}
+          on:click
+          on:change
+          on:keydown
+          on:keyup
+          on:focus
+          on:blur
+          on:mouseenter
+          on:mouseleave />
+      </div>
     {/if}
   </div>
 {/if}

package/dist/banner/Banner.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Banner.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/banner/Banner.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAiED,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACjD,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACnD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEjD,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,oBAAoB,CAAC,WAAW,EAAE,YAAY,EAAE,WAAW,CAAC;CAC/F"}
+{"version":3,"file":"Banner.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/banner/Banner.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAwDD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACjD,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACnD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEjD,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,oBAAoB,CAAC,WAAW,EAAE,YAAY,EAAE,WAAW,CAAC;CAC/F"}

package/dist/bottom-nav/BottomNav.svelte

@@ -31,10 +31,9 @@ $: outerClass = classNames(position, outerDefault, outerDivClasses[navType], $$p
 $: innerClass = classNames(innerDefault, innerDivClasses[navType], $$props.innerDiv);
 </script>
 
-
-<div class="{outerClass}" {...$$restProps} >
+<div class={outerClass} {...$$restProps}>
   <slot name="header" />
-  <div class="{innerClass}">
-      <slot />
+  <div class={innerClass}>
+    <slot />
   </div>
 </div>

package/dist/bottom-nav/BottomNav.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BottomNav.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/bottom-nav/BottomNav.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA8DD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACpD,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACtD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEpD,MAAM,CAAC,OAAO,OAAO,SAAU,SAAQ,oBAAoB,CAAC,cAAc,EAAE,eAAe,EAAE,cAAc,CAAC;CAC3G"}
+{"version":3,"file":"BottomNav.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/bottom-nav/BottomNav.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAqED,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACpD,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACtD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEpD,MAAM,CAAC,OAAO,OAAO,SAAU,SAAQ,oBAAoB,CAAC,cAAc,EAAE,eAAe,EAAE,cAAc,CAAC;CAC3G"}

package/dist/bottom-nav/BottomNavHeader.svelte

@@ -1,10 +1,9 @@
-<script>export let outerClass = "w-full";
-export let innerClass = "grid max-w-xs grid-cols-3 gap-1 p-1 mx-auto my-2 bg-gray-100 rounded-lg dark:bg-gray-600";
+<script>export let outerClass = 'w-full';
+export let innerClass = 'grid max-w-xs grid-cols-3 gap-1 p-1 mx-auto my-2 bg-gray-100 rounded-lg dark:bg-gray-600';
 </script>
 
-
-<div class="{outerClass}" {...$$restProps}>
-  <div class="{innerClass}" role="group">
-      <slot />
+<div class={outerClass} {...$$restProps}>
+  <div class={innerClass} role="group">
+    <slot />
   </div>
-</div>
+</div>

package/dist/bottom-nav/BottomNavHeader.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BottomNavHeader.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/bottom-nav/BottomNavHeader.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAcD,QAAA,MAAM,SAAS;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,oBAAoB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAC1D,MAAM,MAAM,qBAAqB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC5D,MAAM,MAAM,oBAAoB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAE1D,MAAM,CAAC,OAAO,OAAO,eAAgB,SAAQ,oBAAoB,CAAC,oBAAoB,EAAE,qBAAqB,EAAE,oBAAoB,CAAC;CACnI"}
+{"version":3,"file":"BottomNavHeader.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/bottom-nav/BottomNavHeader.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAeD,QAAA,MAAM,SAAS;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,oBAAoB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAC1D,MAAM,MAAM,qBAAqB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC5D,MAAM,MAAM,oBAAoB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAE1D,MAAM,CAAC,OAAO,OAAO,eAAgB,SAAQ,oBAAoB,CAAC,oBAAoB,EAAE,qBAAqB,EAAE,oBAAoB,CAAC;CACnI"}

package/dist/bottom-nav/BottomNavHeaderItem.svelte

@@ -1,11 +1,11 @@
 <script>import classNames from 'classnames';
 export let itemName = '';
 export let active = false;
-export let defaultClass = "px-5 py-1.5 text-xs font-medium text-gray-900 hover:bg-gray-200 dark:text-white dark:hover:bg-gray-700 rounded-lg";
+export let defaultClass = 'px-5 py-1.5 text-xs font-medium text-gray-900 hover:bg-gray-200 dark:text-white dark:hover:bg-gray-700 rounded-lg';
 export let activeClass = 'px-5 py-1.5 text-xs font-medium text-white bg-gray-900 dark:bg-gray-300 dark:text-gray-900 rounded-lg';
 $: btnClass = classNames(active ? activeClass : defaultClass);
 </script>
 
-<button class="{btnClass}" {...$$restProps}>
+<button class={btnClass} {...$$restProps}>
   {itemName}
-</button>
+</button>

package/dist/bottom-nav/BottomNavHeaderItem.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BottomNavHeaderItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/bottom-nav/BottomNavHeaderItem.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAoBD,QAAA,MAAM,SAAS;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,wBAAwB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAC9D,MAAM,MAAM,yBAAyB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAChE,MAAM,MAAM,wBAAwB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAE9D,MAAM,CAAC,OAAO,OAAO,mBAAoB,SAAQ,oBAAoB,CAAC,wBAAwB,EAAE,yBAAyB,EAAE,wBAAwB,CAAC;CACnJ"}
+{"version":3,"file":"BottomNavHeaderItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/bottom-nav/BottomNavHeaderItem.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAqBD,QAAA,MAAM,SAAS;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,wBAAwB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAC9D,MAAM,MAAM,yBAAyB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAChE,MAAM,MAAM,wBAAwB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAE9D,MAAM,CAAC,OAAO,OAAO,mBAAoB,SAAQ,oBAAoB,CAAC,wBAAwB,EAAE,yBAAyB,EAAE,wBAAwB,CAAC;CACnJ"}

package/dist/bottom-nav/BottomNavItem.svelte

@@ -36,7 +36,11 @@ const appBtnClasses = {
 $: btnClass = classNames(btnDefault, btnClasses[navType], appBtnClasses[appBtnPosition], $$props.btnClass);
 $: spanClass = classNames(spanDefault, spanClasses[navType], $$props.spanClass);
 </script>
-<button class="{btnClass}" aria-label="{btnName}" {...$$restProps} 
+
+<button
+  class={btnClass}
+  aria-label={btnName}
+  {...$$restProps}
   on:click
   on:change
   on:keydown
@@ -44,8 +48,7 @@ $: spanClass = classNames(spanDefault, spanClasses[navType], $$props.spanClass);
   on:focus
   on:blur
   on:mouseenter
-  on:mouseleave
->
+  on:mouseleave>
   <slot />
-  <span class="{spanClass}">{btnName}</span>
-</button>
+  <span class={spanClass}>{btnName}</span>
+</button>

package/dist/bottom-nav/BottomNavItem.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BottomNavItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/bottom-nav/BottomNavItem.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA+DD,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,MAAM,CAAC,OAAO,OAAO,aAAc,SAAQ,oBAAoB,CAAC,kBAAkB,EAAE,mBAAmB,EAAE,kBAAkB,CAAC;CAC3H"}
+{"version":3,"file":"BottomNavItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/bottom-nav/BottomNavItem.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAyED,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,MAAM,CAAC,OAAO,OAAO,aAAc,SAAQ,oBAAoB,CAAC,kBAAkB,EAAE,mBAAmB,EAAE,kBAAkB,CAAC;CAC3H"}

package/dist/breadcrumbs/Breadcrumb.svelte

@@ -7,7 +7,7 @@ let classNav = solid ? solidClass : navClass;
 </script>
 
 <nav aria-label="Breadcrumb" {...$$restProps} class={classNames(classNav, $$props.class)}>
-	<ol class={classNames(olClass, $$props.classOl)}>
-		<slot />
-	</ol>
+  <ol class={classNames(olClass, $$props.classOl)}>
+    <slot />
+  </ol>
 </nav>

package/dist/buttongroups/ButtonGroup.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonGroup.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/buttongroups/ButtonGroup.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAGD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAoB3C,QAAA,MAAM,SAAS;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACtD,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACxD,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEtD,MAAM,CAAC,OAAO,OAAO,WAAY,SAAQ,oBAAoB,CAAC,gBAAgB,EAAE,iBAAiB,EAAE,gBAAgB,CAAC;CACnH"}
+{"version":3,"file":"ButtonGroup.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/buttongroups/ButtonGroup.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAGD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAmB3C,QAAA,MAAM,SAAS;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACtD,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACxD,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEtD,MAAM,CAAC,OAAO,OAAO,WAAY,SAAQ,oBAAoB,CAAC,gBAAgB,EAAE,iBAAiB,EAAE,gBAAgB,CAAC;CACnH"}

package/dist/buttons/GradientButton.svelte

@@ -56,15 +56,14 @@ $: divClass = classNames('p-0.5', gradientClasses[color], shadow && 'shadow-lg',
     <Button {...$$restProps} color="none" class={gradientOutlineClass}><slot /></Button>
   </div>
 {:else}
-  <Button 
-  {...$$restProps} 
-  color="none" 
-  class={divClass}
-  on:click
-  on:change
-  on:keydown
-  on:keyup
-  on:mouseenter
-  on:mouseleave
-  ><slot /></Button>
+  <Button
+    {...$$restProps}
+    color="none"
+    class={divClass}
+    on:click
+    on:change
+    on:keydown
+    on:keyup
+    on:mouseenter
+    on:mouseleave><slot /></Button>
 {/if}

package/dist/darkmode/DarkMode.svelte

@@ -11,6 +11,9 @@ const sizes = {
 };
 let toggleTheme;
 onMount(() => {
+    if (localStorage.getItem('color-theme')) {
+        initialTheme = localStorage.getItem('color-theme') || 'light';
+    }
     localStorage.getItem('color-theme') === initialTheme ||
         (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)
         ? window.document.documentElement.classList.add(initialTheme)

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;AAwDD,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,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/device-mockup/Android.svelte

@@ -1,5 +1,12 @@
-<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 = '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';
+</script>
+
+<div class={androidTop} />
+<div class={androidLeftTop} />
+<div class={androidLeftMid} />
+<div class={androidLeftBot} />
+<div class={androidRight} />

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

@@ -1,24 +1,21 @@
-/** @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 | undefined;
+        androidLeftTop?: string | undefined;
+        androidLeftMid?: string | undefined;
+        androidLeftBot?: string | undefined;
+        androidRight?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
+export type AndroidProps = typeof __propDef.props;
+export type AndroidEvents = typeof __propDef.events;
+export type AndroidSlots = typeof __propDef.slots;
+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;AAsBD,QAAA,MAAM,SAAS;;;;;;;;;;;;CAAwC,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,MAAM,CAAC,OAAO,OAAO,OAAQ,SAAQ,oBAAoB,CAAC,YAAY,EAAE,aAAa,EAAE,YAAY,CAAC;CACnG"}

package/dist/device-mockup/DefaultMockup.svelte

@@ -0,0 +1,10 @@
+<script>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';
+</script>
+
+<div class={defaultTop} />
+<div class={defaultLeftTop} />
+<div class={defaultLeftBot} />
+<div class={defaultRight} />

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

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        defaultTop?: string | undefined;
+        defaultLeftTop?: string | undefined;
+        defaultLeftBot?: string | undefined;
+        defaultRight?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type DefaultMockupProps = typeof __propDef.props;
+export type DefaultMockupEvents = typeof __propDef.events;
+export type DefaultMockupSlots = typeof __propDef.slots;
+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;AAmBD,QAAA,MAAM,SAAS;;;;;;;;;;;CAAwC,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,MAAM,CAAC,OAAO,OAAO,aAAc,SAAQ,oBAAoB,CAAC,kBAAkB,EAAE,mBAAmB,EAAE,kBAAkB,CAAC;CAC3H"}

package/dist/device-mockup/DeviceMockup.svelte

@@ -1,69 +1,110 @@
-<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';
+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 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 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 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 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 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]';
+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 androidTop;
+export let androidLeftTop;
+export let androidLeftMid;
+export let androidLeftBot;
+export let androidRight;
+export let defaultTop;
+export let defaultLeftTop;
+export let defaultLeftBot;
+export let defaultRight;
+export let iosTop;
+export let iosLeftTop;
+export let iosLeftBot;
+export let iosRight;
+export let smartRightTop;
+export let smartRightBot;
+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]';
+export let tabletLeftTop;
+export let tabletLeftMid;
+export let tabletLeftBot;
+export let tabletRight;
+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';
+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]';
 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}

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

@@ -2,6 +2,48 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         device?: "default" | "ios" | "android" | "tablet" | "laptop" | "desktop" | "smartwatch" | undefined;
+        defaultDiv?: string | undefined;
+        defaultSlot?: string | undefined;
+        iosDiv?: string | undefined;
+        iosSlot?: string | undefined;
+        androidDiv?: string | undefined;
+        androidSlot?: string | undefined;
+        tabletDiv?: string | undefined;
+        tabletSlot?: string | undefined;
+        laptopDiv?: string | undefined;
+        laptopSlot?: string | undefined;
+        destopDiv?: string | undefined;
+        desktopSlot?: string | undefined;
+        smartwatchDiv?: string | undefined;
+        smartwatchSlot?: string | undefined;
+        androidTop: string;
+        androidLeftTop: string;
+        androidLeftMid: string;
+        androidLeftBot: string;
+        androidRight: string;
+        defaultTop: string;
+        defaultLeftTop: string;
+        defaultLeftBot: string;
+        defaultRight: string;
+        iosTop: string;
+        iosLeftTop: string;
+        iosLeftBot: string;
+        iosRight: string;
+        smartRightTop: string;
+        smartRightBot: string;
+        smartTop?: string | undefined;
+        smartBot?: string | undefined;
+        smartwatchInner?: string | undefined;
+        tabletLeftTop: string;
+        tabletLeftMid: string;
+        tabletLeftBot: string;
+        tabletRight: string;
+        laptopInner?: string | undefined;
+        laptopBot?: string | undefined;
+        laptopBotCen?: string | undefined;
+        desktopInner?: string | undefined;
+        desktopBot?: string | undefined;
+        desktopBotUnder?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -1 +1 @@
-{"version":3,"file":"DeviceMockup.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/device-mockup/DeviceMockup.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAoFD,QAAA,MAAM,SAAS;;;;;;;;;;CAAwC,CAAC;AACxD,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACvD,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACzD,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEvD,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,oBAAoB,CAAC,iBAAiB,EAAE,kBAAkB,EAAE,iBAAiB,CAAC;CACvH"}
+{"version":3,"file":"DeviceMockup.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/device-mockup/DeviceMockup.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA8JD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;oBADmhD,MAAM;wBAAkB,MAAM;wBAAkB,MAAM;wBAAkB,MAAM;sBAAgB,MAAM;oBAAc,MAAM;wBAAkB,MAAM;wBAAkB,MAAM;sBAAgB,MAAM;gBAAU,MAAM;oBAAc,MAAM;oBAAc,MAAM;kBAAY,MAAM;uBAAiB,MAAM;uBAAiB,MAAM;;;;uBAAiF,MAAM;uBAAiB,MAAM;uBAAiB,MAAM;qBAAe,MAAM;;;;;;;;;;;;;;CAC37D,CAAC;AACxD,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACvD,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACzD,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEvD,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,oBAAoB,CAAC,iBAAiB,EAAE,kBAAkB,EAAE,iBAAiB,CAAC;CACvH"}

package/dist/device-mockup/Ios.svelte

@@ -1,4 +1,10 @@
-<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-[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 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';
+</script>
+
+<div class={iosTop} />
+<div class={iosLeftTop} />
+<div class={iosLeftBot} />
+<div class={iosRight} />