flowbite-svelte 0.35.3 → 0.36.2

package/dist/accordion/Accordion.svelte.d.ts

@@ -249,11 +249,11 @@ declare const __propDef: {
         node?: HTMLElement | undefined;
         use?: import("svelte/action").Action<HTMLElement, any, Record<never, any>> | undefined;
         options?: object | undefined;
-        multiple: boolean;
-        flush: boolean;
-        activeClasses: string;
-        inactiveClasses: string;
-        defaultClass: string;
+        multiple?: boolean | undefined;
+        flush?: boolean | undefined;
+        activeClasses?: string | undefined;
+        inactiveClasses?: string | undefined;
+        defaultClass?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/accordion/Accordion.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/accordion/Accordion.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AACC,OAAO,EAAY,KAAK,QAAQ,EAAE,MAAM,cAAc,CAAC;AAEvD,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,OAAO,CAAC;IACf,aAAa,EAAE,MAAM,CAAC;IACtB,eAAe,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC;CAC7B;AAsDH,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kBAzCD,OAAO;eACV,OAAO;uBACC,MAAM;yBACJ,MAAM;sBACT,MAAM;;;;;;;;CAqC+B,CAAC;AACxD,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":"Accordion.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/accordion/Accordion.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AACC,OAAO,EAAY,KAAK,QAAQ,EAAE,MAAM,cAAc,CAAC;AAEvD,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,OAAO,CAAC;IACf,aAAa,EAAE,MAAM,CAAC;IACtB,eAAe,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC;CAC7B;AAsDH,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAwC,CAAC;AACxD,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/accordion/AccordionItem.svelte

@@ -17,6 +17,7 @@ export let textFlushDefault = 'text-gray-500 dark:text-gray-400';
 export let borderClass = 'border-l border-r group-first:border-t';
 export let borderOpenClass = 'border-l border-r';
 export let borderBottomClass = 'border-b';
+export let borderSharedClass = 'border-gray-200 dark:border-gray-700';
 // make a custom transition function that returns the desired transition
 const multiple = (node, params) => {
     switch (transitionType) {
@@ -44,7 +45,7 @@ onMount(() => {
 });
 const handleToggle = (_) => selected.set(open ? {} : self);
 let buttonClass;
-$: buttonClass = classNames(defaultClass, ctx.flush || borderClass, borderBottomClass, ctx.flush ? paddingFlush : paddingDefault, open && (ctx.flush ? textFlushOpen : activeClasses || ctx.activeClasses), !open && (ctx.flush ? textFlushDefault : inactiveClasses || ctx.inactiveClasses), $$props.class);
+$: buttonClass = classNames(defaultClass, ctx.flush || borderClass, borderBottomClass, borderSharedClass, ctx.flush ? paddingFlush : paddingDefault, open && (ctx.flush ? textFlushOpen : activeClasses || ctx.activeClasses), !open && (ctx.flush ? textFlushDefault : inactiveClasses || ctx.inactiveClasses), $$props.class);
 </script>
 
 <h2 class="group">
@@ -59,7 +60,10 @@ $: buttonClass = classNames(defaultClass, ctx.flush || borderClass, borderBottom
 </h2>
 {#if open}
   <div transition:multiple|local={transitionParams}>
-    <div class="{ctx.flush ? paddingFlush : paddingDefault} {ctx.flush ? '' : borderOpenClass} {borderBottomClass}">
+    <div
+      class="{ctx.flush ? paddingFlush : paddingDefault} {ctx.flush
+        ? ''
+        : borderOpenClass} {borderBottomClass} {borderSharedClass}">
       <slot />
     </div>
   </div>

package/dist/accordion/AccordionItem.svelte.d.ts

@@ -16,6 +16,7 @@ declare const __propDef: {
         borderClass?: string | undefined;
         borderOpenClass?: string | undefined;
         borderBottomClass?: string | undefined;
+        borderSharedClass?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/accordion/AccordionItem.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/accordion/AccordionItem.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAOD,OAAO,KAAK,EAAE,eAAe,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AA4FtE,QAAA,MAAM,SAAS;;;;wBAD8b,MAAM,GAAG,SAAS;0BAAoB,MAAM,GAAG,SAAS;;;;;;;;;;;;;;;;;;;;;CACvb,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":"AccordionItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/accordion/AccordionItem.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAOD,OAAO,KAAK,EAAE,eAAe,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAgGtE,QAAA,MAAM,SAAS;;;;wBADqe,MAAM,GAAG,SAAS;0BAAoB,MAAM,GAAG,SAAS;;;;;;;;;;;;;;;;;;;;;;CAC9d,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/buttons/Button.svelte

@@ -3,59 +3,59 @@ import { getContext } from 'svelte';
 const group = getContext('group');
 export let pill = false;
 export let outline = false;
-export let gradient = false;
 export let size = group ? 'sm' : 'md';
 export let href = undefined;
 export let btnClass = undefined;
 export let type = 'button';
 export let color = group ? (outline ? 'dark' : 'alternative') : 'primary';
-export let shadow = null;
+export let shadow = false;
 const colorClasses = {
-    blue: 'text-white bg-blue-700 hover:bg-blue-800 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800',
-    dark: 'text-white bg-gray-800 hover:bg-gray-900 focus:ring-gray-300 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700',
-    alternative: 'text-gray-900 bg-white border border-gray-200 dark:border-gray-600 hover:bg-gray-100 focus:ring-gray-200 dark:bg-gray-800 dark:text-gray-400 hover:text-blue-700 focus:text-blue-700 dark:focus:text-white dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-gray-700',
-    light: 'text-gray-900 bg-white border border-gray-300 hover:bg-gray-100 focus:ring-gray-200 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700',
-    green: 'text-white bg-green-700 hover:bg-green-800 focus:ring-green-300 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800',
-    red: 'text-white bg-red-700 hover:bg-red-800 focus:ring-red-300 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900',
-    yellow: 'text-white bg-yellow-400 hover:bg-yellow-500 focus:ring-yellow-300 dark:focus:ring-yellow-900',
-    primary: 'text-white bg-primary-700 hover:bg-primary-800 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800',
-    purple: 'text-white bg-purple-700 hover:bg-purple-800 focus:ring-purple-300 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-900'
+    alternative: 'text-gray-900 bg-white border border-gray-200 hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-400 hover:text-primary-700 focus:text-primary-700 dark:focus:text-white dark:hover:text-white',
+    blue: 'text-white bg-blue-700 hover:bg-blue-800 dark:bg-blue-600 dark:hover:bg-blue-700',
+    dark: 'text-white bg-gray-800 hover:bg-gray-900 dark:bg-gray-800 dark:hover:bg-gray-700',
+    green: 'text-white bg-green-700 hover:bg-green-800 dark:bg-green-600 dark:hover:bg-green-700',
+    light: 'text-gray-900 bg-white border border-gray-300 hover:bg-gray-100 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600',
+    primary: 'text-white bg-primary-700 hover:bg-primary-800 dark:bg-primary-600 dark:hover:bg-primary-700',
+    purple: 'text-white bg-purple-700 hover:bg-purple-800 dark:bg-purple-600 dark:hover:bg-purple-700',
+    red: 'text-white bg-red-700 hover:bg-red-800 dark:bg-red-600 dark:hover:bg-red-700',
+    yellow: 'text-white bg-yellow-400 hover:bg-yellow-500 ',
+    none: ''
 };
-const gradientClasses = {
-    blue: 'text-white bg-gradient-to-r from-blue-500 via-blue-600 to-blue-700 hover:bg-gradient-to-br focus:ring-blue-300 dark:focus:ring-blue-800 ',
-    green: 'text-white bg-gradient-to-r from-green-400 via-green-500 to-green-600 hover:bg-gradient-to-br focus:ring-green-300 dark:focus:ring-green-800',
-    cyan: 'text-white bg-gradient-to-r from-cyan-400 via-cyan-500 to-cyan-600 hover:bg-gradient-to-br focus:ring-cyan-300 dark:focus:ring-cyan-800',
-    teal: 'text-white bg-gradient-to-r from-teal-400 via-teal-500 to-teal-600 hover:bg-gradient-to-br focus:ring-teal-300 dark:focus:ring-teal-800',
-    lime: 'text-gray-900 bg-gradient-to-r from-lime-200 via-lime-400 to-lime-500 hover:bg-gradient-to-br focus:ring-lime-300 dark:focus:ring-lime-800',
-    red: 'text-white bg-gradient-to-r from-red-400 via-red-500 to-red-600 hover:bg-gradient-to-br focus:ring-red-300 dark:focus:ring-red-800',
-    pink: 'text-white bg-gradient-to-r from-pink-400 via-pink-500 to-pink-600 hover:bg-gradient-to-br focus:ring-pink-300 dark:focus:ring-pink-800',
-    purple: 'text-white bg-gradient-to-r from-purple-500 via-purple-600 to-purple-700 hover:bg-gradient-to-br focus:ring-purple-300 dark:focus:ring-purple-800',
-    purpleToBlue: 'text-white bg-gradient-to-br from-purple-600 to-blue-500 hover:bg-gradient-to-bl focus:ring-blue-300 dark:focus:ring-blue-800',
-    cyanToBlue: 'text-white bg-gradient-to-r from-cyan-500 to-blue-500 hover:bg-gradient-to-bl focus:ring-cyan-300 dark:focus:ring-cyan-800',
-    greenToBlue: 'text-white bg-gradient-to-br from-green-400 to-blue-600 hover:bg-gradient-to-bl focus:ring-green-200 dark:focus:ring-green-800',
-    purpleToPink: 'text-white bg-gradient-to-r from-purple-500 to-pink-500 hover:bg-gradient-to-l focus:ring-purple-200 dark:focus:ring-purple-800',
-    pinkToOrange: 'text-white bg-gradient-to-br from-pink-500 to-orange-400 hover:bg-gradient-to-bl focus:ring-pink-200 dark:focus:ring-pink-800',
-    tealToLime: 'text-gray-900 bg-gradient-to-r from-teal-200 to-lime-200 hover:bg-gradient-to-l focus:ring-lime-200 dark:focus:ring-teal-700',
-    redToYellow: 'text-gray-900 bg-gradient-to-r from-red-200 via-red-300 to-yellow-200 hover:bg-gradient-to-bl focus:ring-red-100 dark:focus:ring-red-400'
+const coloredFocusClasses = {
+    alternative: 'focus:ring-gray-200 dark:focus:ring-gray-700',
+    blue: 'focus:ring-blue-300 dark:focus:ring-blue-800',
+    dark: 'focus:ring-gray-300 dark:focus:ring-gray-700',
+    green: 'focus:ring-green-300 dark:focus:ring-green-800',
+    light: 'focus:ring-gray-200 dark:focus:ring-gray-700',
+    primary: 'focus:ring-primary-300 dark:focus:ring-primary-800',
+    purple: 'focus:ring-purple-300 dark:focus:ring-purple-900',
+    red: 'focus:ring-red-300 dark:focus:ring-red-900',
+    yellow: 'focus:ring-yellow-300 dark:focus:ring-yellow-900',
+    none: ''
 };
 const coloredShadowClasses = {
-    blue: 'shadow-lg shadow-blue-500/50 dark:shadow-lg dark:shadow-blue-800/80',
-    green: 'shadow-lg shadow-green-500/50 dark:shadow-lg dark:shadow-green-800/80',
-    cyan: 'shadow-lg shadow-cyan-500/50 dark:shadow-lg dark:shadow-cyan-800/80',
-    teal: 'shadow-lg shadow-teal-500/50 dark:shadow-lg dark:shadow-teal-800/80 ',
-    lime: 'shadow-lg shadow-lime-500/50 dark:shadow-lg dark:shadow-lime-800/80',
-    red: 'shadow-lg shadow-red-500/50 dark:shadow-lg dark:shadow-red-800/80 ',
-    pink: 'shadow-lg shadow-pink-500/50 dark:shadow-lg dark:shadow-pink-800/80',
-    purple: 'shadow-lg shadow-purple-500/50 dark:shadow-lg dark:shadow-purple-800/80'
+    alternative: 'shadow-gray-500/50 dark:shadow-gray-800/80',
+    blue: 'shadow-blue-500/50 dark:shadow-blue-800/80',
+    dark: 'shadow-gray-500/50 dark:shadow-gray-800/80',
+    green: 'shadow-green-500/50 dark:shadow-green-800/80',
+    light: 'shadow-gray-500/50 dark:shadow-gray-800/80',
+    primary: 'shadow-primary-500/50 dark:shadow-primary-800/80',
+    purple: 'shadow-purple-500/50 dark:shadow-purple-800/80',
+    red: 'shadow-red-500/50 dark:shadow-red-800/80 ',
+    yellow: 'shadow-yellow-500/50 dark:shadow-yellow-800/80 ',
+    none: ''
 };
 const outlineClasses = {
-    blue: 'text-blue-700 hover:text-white border border-blue-700 hover:bg-blue-800 focus:ring-blue-300 dark:border-blue-500 dark:text-blue-500 dark:hover:text-white dark:hover:bg-blue-600 dark:focus:ring-blue-800',
-    light: 'text-gray-500 hover:text-gray-900 bg-white border border-gray-200 dark:border-gray-600 dark:hover:text-white dark:text-gray-400 hover:bg-gray-50 dark:bg-gray-700 dark:hover:bg-gray-600 focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-400',
-    dark: 'text-gray-900 hover:text-white border border-gray-800 hover:bg-gray-900 focus:bg-gray-900 focus:text-white focus:ring-gray-300 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-800',
-    green: 'text-green-700 hover:text-white border border-green-700 hover:bg-green-800 focus:ring-green-300 dark:border-green-500 dark:text-green-500 dark:hover:text-white dark:hover:bg-green-600 dark:focus:ring-green-800',
-    red: 'text-red-700 hover:text-white border border-red-700 hover:bg-red-800 focus:ring-red-300 dark:border-red-500 dark:text-red-500 dark:hover:text-white dark:hover:bg-red-600 dark:focus:ring-red-900',
-    yellow: 'text-yellow-400 hover:text-white border border-yellow-400 hover:bg-yellow-500 focus:ring-yellow-300 dark:border-yellow-300 dark:text-yellow-300 dark:hover:text-white dark:hover:bg-yellow-400 dark:focus:ring-yellow-900',
-    purple: 'text-purple-700 hover:text-white border border-purple-700 hover:bg-purple-800 focus:ring-purple-300 dark:border-purple-400 dark:text-purple-400 dark:hover:text-white dark:hover:bg-purple-500 dark:focus:ring-purple-900'
+    alternative: 'text-gray-900 hover:text-white border border-gray-800 hover:bg-gray-900 focus:bg-gray-900 focus:text-white focus:ring-gray-300 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-800',
+    blue: 'text-blue-700 hover:text-white border border-blue-700 hover:bg-blue-800 dark:border-blue-500 dark:text-blue-500 dark:hover:text-white dark:hover:bg-blue-600',
+    dark: 'text-gray-900 hover:text-white border border-gray-800 hover:bg-gray-900 focus:bg-gray-900 focus:text-white dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-600',
+    green: 'text-green-700 hover:text-white border border-green-700 hover:bg-green-800 dark:border-green-500 dark:text-green-500 dark:hover:text-white dark:hover:bg-green-600',
+    light: 'text-gray-500 hover:text-gray-900 bg-white border border-gray-200 dark:border-gray-600 dark:hover:text-white dark:text-gray-400 hover:bg-gray-50 dark:bg-gray-700 dark:hover:bg-gray-600',
+    primary: 'text-primary-700 hover:text-white border border-primary-700 hover:bg-primary-700 dark:border-primary-500 dark:text-primary-500 dark:hover:text-white dark:hover:bg-primary-600',
+    purple: 'text-purple-700 hover:text-white border border-purple-700 hover:bg-purple-800 dark:border-purple-400 dark:text-purple-400 dark:hover:text-white dark:hover:bg-purple-500',
+    red: 'text-red-700 hover:text-white border border-red-700 hover:bg-red-800 dark:border-red-500 dark:text-red-500 dark:hover:text-white dark:hover:bg-red-600',
+    yellow: 'text-yellow-400 hover:text-white border border-yellow-400 hover:bg-yellow-500 dark:border-yellow-300 dark:text-yellow-300 dark:hover:text-white dark:hover:bg-yellow-400',
+    none: ''
 };
 const sizeClasses = {
     xs: 'px-3 py-2 text-xs',
@@ -64,29 +64,18 @@ const sizeClasses = {
     lg: 'px-5 py-3 text-base',
     xl: 'px-6 py-3.5 text-base'
 };
-function rounded(gradientOutline = false) {
-    if (group) {
-        return pill
-            ? 'first:rounded-l-full last:rounded-r-full'
-            : gradientOutline
-                ? 'first:rounded-l-md last:rounded-r-md'
-                : 'first:rounded-l-lg last:rounded-r-lg';
-    }
-    return pill ? 'rounded-full' : gradientOutline ? 'rounded-md' : 'rounded-lg';
-}
 const hasBorder = () => outline || color === 'alternative' || color === 'light';
 let buttonClass;
 $: buttonClass = btnClass
     ? btnClass
-    : classNames('text-center font-medium', group ? 'focus:ring-2' : 'focus:ring-4', group && 'focus:z-10', group || 'focus:outline-none', outline && gradient ? 'p-0.5' : 'inline-flex items-center justify-center ' + sizeClasses[size], gradient ? gradientClasses[color] : outline ? outlineClasses[color] : colorClasses[color], color === 'alternative' &&
+    : classNames('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-800 dark:hover:border-gray-700'), outline &&
+            : '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'), hasBorder() && group && 'border-l-0 first:border-l', rounded(false), shadow && coloredShadowClasses[shadow], $$props.disabled && 'cursor-not-allowed opacity-50', $$props.class);
-let gradientOutlineClass;
-$: gradientOutlineClass = classNames('inline-flex items-center justify-center', sizeClasses[size], rounded(true), 'bg-white text-gray-900 dark:bg-gray-900 dark:text-white', // this is limitation - no transparency
-'transition-all duration-75 ease-in hover:bg-opacity-0 hover:text-inherit');
+        (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
@@ -101,12 +90,5 @@ $: gradientOutlineClass = classNames('inline-flex items-center justify-center',
   on:keyup
   on:mouseenter
   on:mouseleave>
-  {#if outline && gradient}
-    <!-- Trick to prentend outline without using border
-		This has a limitation of no supporting transparency as
-		background is set to bg-white dark:bg-gray-900 -->
-    <span class={gradientOutlineClass}><slot /></span>
-  {:else}
-    <slot />
-  {/if}
+  <slot />
 </svelte:element>

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

@@ -1,17 +1,16 @@
 import { SvelteComponentTyped } from "svelte";
-import type { ButtonType, ButtonColorType } from '../types';
+import type { ButtonType } from '../types';
 declare const __propDef: {
     props: {
         [x: string]: any;
         pill?: boolean | undefined;
         outline?: boolean | undefined;
-        gradient?: boolean | undefined;
         size?: "xs" | "sm" | "lg" | "xl" | "md" | undefined;
         href?: string | undefined;
         btnClass?: string | undefined;
         type?: ButtonType | undefined;
-        color?: ButtonColorType | undefined;
-        shadow?: "red" | "green" | "purple" | "pink" | "blue" | "cyan" | "lime" | "teal" | null | undefined;
+        color?: "red" | "yellow" | "green" | "purple" | "blue" | "light" | "dark" | "primary" | "none" | "alternative" | undefined;
+        shadow?: boolean | undefined;
     };
     events: {
         click: MouseEvent;

package/dist/buttons/Button.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/buttons/Button.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAGD,OAAO,KAAK,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AA2J5D,QAAA,MAAM,SAAS;;;;;;;eAD6P,MAAM,GAAG,SAAS;mBAAa,MAAM,GAAG,SAAS;;;;;;;;;;;;;;;;;;CAC/O,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":"Button.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/buttons/Button.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAGD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AA8H3C,QAAA,MAAM,SAAS;;;;;;eADoN,MAAM,GAAG,SAAS;mBAAa,MAAM,GAAG,SAAS;;;;;;;;;;;;;;;;;;CACtM,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/buttons/GradientButton.svelte

@@ -0,0 +1,70 @@
+<script>import classNames from 'classnames';
+import Button from './Button.svelte';
+import { getContext } from 'svelte';
+const group = getContext('group');
+export let color = 'blue';
+export let shadow = false;
+const gradientClasses = {
+    blue: 'text-white bg-gradient-to-r from-blue-500 via-blue-600 to-blue-700 hover:bg-gradient-to-br focus:ring-blue-300 dark:focus:ring-blue-800 ',
+    green: 'text-white bg-gradient-to-r from-green-400 via-green-500 to-green-600 hover:bg-gradient-to-br focus:ring-green-300 dark:focus:ring-green-800',
+    cyan: 'text-white bg-gradient-to-r from-cyan-400 via-cyan-500 to-cyan-600 hover:bg-gradient-to-br focus:ring-cyan-300 dark:focus:ring-cyan-800',
+    teal: 'text-white bg-gradient-to-r from-teal-400 via-teal-500 to-teal-600 hover:bg-gradient-to-br focus:ring-teal-300 dark:focus:ring-teal-800',
+    lime: 'text-gray-900 bg-gradient-to-r from-lime-200 via-lime-400 to-lime-500 hover:bg-gradient-to-br focus:ring-lime-300 dark:focus:ring-lime-800',
+    red: 'text-white bg-gradient-to-r from-red-400 via-red-500 to-red-600 hover:bg-gradient-to-br focus:ring-red-300 dark:focus:ring-red-800',
+    pink: 'text-white bg-gradient-to-r from-pink-400 via-pink-500 to-pink-600 hover:bg-gradient-to-br focus:ring-pink-300 dark:focus:ring-pink-800',
+    purple: 'text-white bg-gradient-to-r from-purple-500 via-purple-600 to-purple-700 hover:bg-gradient-to-br focus:ring-purple-300 dark:focus:ring-purple-800',
+    purpleToBlue: 'text-white bg-gradient-to-br from-purple-600 to-blue-500 hover:bg-gradient-to-bl focus:ring-blue-300 dark:focus:ring-blue-800',
+    cyanToBlue: 'text-white bg-gradient-to-r from-cyan-500 to-blue-500 hover:bg-gradient-to-bl focus:ring-cyan-300 dark:focus:ring-cyan-800',
+    greenToBlue: 'text-white bg-gradient-to-br from-green-400 to-blue-600 hover:bg-gradient-to-bl focus:ring-green-200 dark:focus:ring-green-800',
+    purpleToPink: 'text-white bg-gradient-to-r from-purple-500 to-pink-500 hover:bg-gradient-to-l focus:ring-purple-200 dark:focus:ring-purple-800',
+    pinkToOrange: 'text-white bg-gradient-to-br from-pink-500 to-orange-400 hover:bg-gradient-to-bl focus:ring-pink-200 dark:focus:ring-pink-800',
+    tealToLime: 'text-gray-900 bg-gradient-to-r from-teal-200 to-lime-200 hover:bg-gradient-to-l focus:ring-lime-200 dark:focus:ring-teal-700',
+    redToYellow: 'text-gray-900 bg-gradient-to-r from-red-200 via-red-300 to-yellow-200 hover:bg-gradient-to-bl focus:ring-red-100 dark:focus:ring-red-400'
+};
+const coloredShadowClasses = {
+    blue: 'shadow-blue-500/50 dark:shadow-blue-800/80',
+    green: 'shadow-green-500/50 dark:shadow-green-800/80',
+    cyan: 'shadow-cyan-500/50 dark:shadow-cyan-800/80',
+    teal: 'shadow-teal-500/50 dark:shadow-teal-800/80 ',
+    lime: 'shadow-lime-500/50 dark:shadow-lime-800/80',
+    red: 'shadow-red-500/50 dark:shadow-red-800/80 ',
+    pink: 'shadow-pink-500/50 dark:shadow-pink-800/80',
+    purple: 'shadow-purple-500/50 dark:shadow-purple-800/80',
+    purpleToBlue: 'shadow-blue-500/50 dark:shadow-blue-800/80',
+    cyanToBlue: 'shadow-cyan-500/50 dark:shadow-cyan-800/80',
+    greenToBlue: 'shadow-green-500/50 dark:shadow-green-800/80',
+    purpleToPink: 'shadow-purple-500/50 dark:shadow-purple-800/80',
+    pinkToOrange: 'shadow-pink-500/50 dark:shadow-pink-800/80',
+    tealToLime: 'shadow-lime-500/50 dark:shadow-teal-800/80',
+    redToYellow: 'shadow-red-500/50 dark:shadow-red-800/80'
+};
+let gradientOutlineClass;
+$: gradientOutlineClass = classNames('inline-flex items-center justify-center w-full  !border-0', $$props.pill || '!rounded-md', 'bg-white !text-gray-900 dark:bg-gray-900 dark:!text-white', // this is limitation - no transparency
+'hover:bg-transparent hover:!text-inherit', 'transition-all duration-75 ease-in group-hover:!bg-opacity-0 group-hover:!text-inherit');
+let divClass;
+$: divClass = classNames('p-0.5', gradientClasses[color], shadow && 'shadow-lg', shadow && coloredShadowClasses[color], group
+    ? ($$props.pill && 'first:rounded-l-full last:rounded-r-full') ||
+        'first:rounded-l-lg last:rounded-r-lg'
+    : ($$props.pill && 'rounded-full') || 'rounded-lg', $$props.class);
+</script>
+
+{#if $$props.outline}
+  <div class={divClass}>
+    <!-- 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}><slot /></Button>
+  </div>
+{:else}
+  <Button 
+  {...$$restProps} 
+  color="none" 
+  class={divClass}
+  on:click
+  on:change
+  on:keydown
+  on:keyup
+  on:mouseenter
+  on:mouseleave
+  ><slot /></Button>
+{/if}

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

@@ -0,0 +1,28 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        color?: "red" | "green" | "purple" | "pink" | "blue" | "cyan" | "lime" | "teal" | "purpleToBlue" | "cyanToBlue" | "greenToBlue" | "purpleToPink" | "pinkToOrange" | "tealToLime" | "redToYellow" | undefined;
+        shadow?: boolean | undefined;
+    };
+    events: {
+        click: MouseEvent;
+        change: Event;
+        keydown: KeyboardEvent;
+        keyup: KeyboardEvent;
+        mouseenter: MouseEvent;
+        mouseleave: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type GradientButtonProps = typeof __propDef.props;
+export type GradientButtonEvents = typeof __propDef.events;
+export type GradientButtonSlots = typeof __propDef.slots;
+export default class GradientButton extends SvelteComponentTyped<GradientButtonProps, GradientButtonEvents, GradientButtonSlots> {
+}
+export {};
+//# sourceMappingURL=GradientButton.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"GradientButton.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/buttons/GradientButton.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA8FD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,mBAAmB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACzD,MAAM,MAAM,oBAAoB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC3D,MAAM,MAAM,mBAAmB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEzD,MAAM,CAAC,OAAO,OAAO,cAAe,SAAQ,oBAAoB,CAAC,mBAAmB,EAAE,oBAAoB,EAAE,mBAAmB,CAAC;CAC/H"}

package/dist/darkmode/DarkMode.svelte

@@ -1,5 +1,7 @@
 <script>import { onMount } from 'svelte';
 import classNames from 'classnames';
+// declare initialTheme as a prop with a default value of 'light'
+export let initialTheme = 'light';
 export let btnClass = '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';
 export let size = 'md';
 const sizes = {
@@ -9,10 +11,10 @@ const sizes = {
 };
 let toggleTheme;
 onMount(() => {
-    localStorage.getItem('color-theme') === 'dark' ||
+    localStorage.getItem('color-theme') === initialTheme ||
         (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)
-        ? window.document.documentElement.classList.add('dark')
-        : window.document.documentElement.classList.remove('dark');
+        ? window.document.documentElement.classList.add(initialTheme)
+        : window.document.documentElement.classList.remove(initialTheme);
     toggleTheme = () => {
         const isDark = window.document.documentElement.classList.toggle('dark');
         localStorage.setItem('color-theme', isDark ? 'dark' : 'light');

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

@@ -2,6 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
+        initialTheme?: string | undefined;
         btnClass?: string | undefined;
         size?: "sm" | "lg" | "md" | undefined;
     };

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;AAsDD,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;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"}

package/dist/device-mockup/Android.svelte

@@ -0,0 +1,5 @@
+<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>

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

@@ -0,0 +1,24 @@
+/** @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;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};
+//# sourceMappingURL=Android.svelte.d.ts.map

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

@@ -0,0 +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"}

package/dist/device-mockup/Default.svelte

@@ -0,0 +1,4 @@
+<div class="h-[32px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[72px] rounded-l-lg"></div>
+<div class="h-[46px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[124px] rounded-l-lg"></div>
+<div class="h-[46px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[178px] rounded-l-lg"></div>
+<div class="h-[64px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -right-[17px] top-[142px] rounded-r-lg"></div>

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

@@ -0,0 +1,24 @@
+/** @typedef {typeof __propDef.props}  DefaultProps */
+/** @typedef {typeof __propDef.events}  DefaultEvents */
+/** @typedef {typeof __propDef.slots}  DefaultSlots */
+export default class Default extends SvelteComponentTyped<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type DefaultProps = typeof __propDef.props;
+export type DefaultEvents = typeof __propDef.events;
+export type DefaultSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};
+//# sourceMappingURL=Default.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Default.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/device-mockup/Default.svelte.js"],"names":[],"mappings":"AASA,sDAAsD;AACtD,wDAAwD;AACxD,sDAAsD;AAEtD;;;;;CACC;2BALa,OAAO,UAAU,KAAK;4BACtB,OAAO,UAAU,MAAM;2BACvB,OAAO,UAAU,KAAK;qCAXC,QAAQ;AAQ7C;;;;;;;;EAA8E"}

package/dist/device-mockup/DeviceMockup.svelte

@@ -0,0 +1,69 @@
+<script>import Default from './Default.svelte';
+import Ios from './Ios.svelte';
+import Android from './Android.svelte';
+import Tablet from './Tablet.svelte';
+import SmartWatch from './SmartWatch.svelte';
+export let device = 'default';
+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]'
+};
+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]'
+};
+</script>
+
+
+<div class="{divClasses[device]}">
+  {#if device === 'default'}
+    <Default />
+  {:else if device === 'ios'}
+    <Ios />
+  {:else if device === 'android'}
+    <Android />
+  {:else if device === 'tablet'}
+    <Tablet />
+  {/if}
+  {#if device === 'laptop' }
+  <div class="rounded-lg overflow-hidden h-[156px] md:h-[278px] bg-white dark:bg-gray-800">
+    <slot />
+  </div>
+  {:else if device === 'desktop'}
+  <div class="rounded-xl overflow-hidden h-[140px] md:h-[262px]">
+    <slot />
+  </div>
+  {:else if device === 'smartwatch'}
+  <!-- No code -->
+  {:else}
+  <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>
+{: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>
+{: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]">
+      <slot />
+  </div>
+</div>
+<div class="relative mx-auto bg-gray-800 dark:bg-gray-700 rounded-b-[2.5rem] h-[63px] max-w-[133px]"></div>
+{/if}

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

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        device?: "default" | "ios" | "android" | "tablet" | "laptop" | "desktop" | "smartwatch" | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type DeviceMockupProps = typeof __propDef.props;
+export type DeviceMockupEvents = typeof __propDef.events;
+export type DeviceMockupSlots = typeof __propDef.slots;
+export default class DeviceMockup extends SvelteComponentTyped<DeviceMockupProps, DeviceMockupEvents, DeviceMockupSlots> {
+}
+export {};
+//# sourceMappingURL=DeviceMockup.svelte.d.ts.map

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

@@ -0,0 +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"}

package/dist/device-mockup/Ios.svelte

@@ -0,0 +1,4 @@
+<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>

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

@@ -0,0 +1,24 @@
+/** @typedef {typeof __propDef.props}  IosProps */
+/** @typedef {typeof __propDef.events}  IosEvents */
+/** @typedef {typeof __propDef.slots}  IosSlots */
+export default class Ios extends SvelteComponentTyped<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type IosProps = typeof __propDef.props;
+export type IosEvents = typeof __propDef.events;
+export type IosSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};
+//# sourceMappingURL=Ios.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Ios.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/device-mockup/Ios.svelte.js"],"names":[],"mappings":"AASA,kDAAkD;AAClD,oDAAoD;AACpD,kDAAkD;AAElD;;;;;CACC;uBALa,OAAO,UAAU,KAAK;wBACtB,OAAO,UAAU,MAAM;uBACvB,OAAO,UAAU,KAAK;qCAXC,QAAQ;AAQ7C;;;;;;;;EAA8E"}

package/dist/device-mockup/SmartWatch.svelte

@@ -0,0 +1,2 @@
+<div class="h-[41px] w-[6px] bg-gray-800 dark:bg-gray-800 absolute -right-[16px] top-[40px] rounded-r-lg"></div>
+<div class="h-[32px] w-[6px] bg-gray-800 dark:bg-gray-800 absolute -right-[16px] top-[88px] rounded-r-lg"></div>