flowbite-svelte 0.44.13 → 0.44.15

package/dist/breadcrumbs/Breadcrumb.svelte

@@ -3,10 +3,11 @@ export let solid = false;
 export let navClass = 'flex';
 export let solidClass = 'flex px-5 py-3 text-gray-700 border border-gray-200 rounded-lg bg-gray-50 dark:bg-gray-800 dark:border-gray-700';
 export let olClass = 'inline-flex items-center space-x-1 md:space-x-3';
+export let ariaLabel = 'Breadcrumb';
 let classNav = solid ? solidClass : navClass;
 </script>
 
-<nav aria-label="Breadcrumb" {...$$restProps} class={twMerge(classNav, $$props.class)}>
+<nav aria-label={ariaLabel} {...$$restProps} class={twMerge(classNav, $$props.class)}>
   <ol class={twMerge(olClass, $$props.classOl)}>
     <slot />
   </ol>
@@ -20,4 +21,5 @@ let classNav = solid ? solidClass : navClass;
 @prop export let navClass: string = 'flex';
 @prop export let solidClass: string = 'flex px-5 py-3 text-gray-700 border border-gray-200 rounded-lg bg-gray-50 dark:bg-gray-800 dark:border-gray-700';
 @prop export let olClass: string = 'inline-flex items-center space-x-1 md:space-x-3';
+@prop export let ariaLabel: string = 'Breadcrumb';
 -->

package/dist/breadcrumbs/Breadcrumb.svelte.d.ts

@@ -6,6 +6,7 @@ declare const __propDef: {
         navClass?: string | undefined;
         solidClass?: string | undefined;
         olClass?: string | undefined;
+        ariaLabel?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -24,6 +25,7 @@ export type BreadcrumbSlots = typeof __propDef.slots;
  * @prop export let navClass: string = 'flex';
  * @prop export let solidClass: string = 'flex px-5 py-3 text-gray-700 border border-gray-200 rounded-lg bg-gray-50 dark:bg-gray-800 dark:border-gray-700';
  * @prop export let olClass: string = 'inline-flex items-center space-x-1 md:space-x-3';
+ * @prop export let ariaLabel: string = 'Breadcrumb';
  */
 export default class Breadcrumb extends SvelteComponent<BreadcrumbProps, BreadcrumbEvents, BreadcrumbSlots> {
 }

package/dist/breadcrumbs/Breadcrumb.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumb.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/breadcrumbs/Breadcrumb.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AAuBD,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;;;;;;;GAOG;AACH,MAAM,CAAC,OAAO,OAAO,UAAW,SAAQ,eAAe,CAAC,eAAe,EAAE,gBAAgB,EAAE,eAAe,CAAC;CAC1G"}
+{"version":3,"file":"Breadcrumb.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/breadcrumbs/Breadcrumb.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AAwBD,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;;;;;;;;GAQG;AACH,MAAM,CAAC,OAAO,OAAO,UAAW,SAAQ,eAAe,CAAC,eAAe,EAAE,gBAAgB,EAAE,eAAe,CAAC;CAC1G"}

package/dist/buttons/Button.svelte

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

package/dist/buttons/GradientButton.svelte

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

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

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

package/dist/carousels/Carousel.svelte

@@ -8,10 +8,12 @@ import { fade } from 'svelte/transition';
 import { twMerge } from 'tailwind-merge';
 import Controls from './Controls.svelte';
 import Indicators from './Indicators.svelte';
+import Slide from './Slide.svelte';
 export let images;
 export let index = 0;
 export let transition = (x) => fade(x, { duration: 700, easing: quintOut });
 export let duration = 0;
+export let ariaLabel = 'Draggable Carousel';
 // Carousel
 let divClass = 'overflow-hidden relative rounded-lg h-56 sm:h-64 xl:h-80 2xl:h-96';
 const dispatch = createEventDispatcher();
@@ -116,11 +118,11 @@ $: onDragStop =
 
 <!-- The move listeners go here, so things keep working if the touch strays out of the element. -->
 <svelte:document on:mousemove={onDragMove} on:mouseup={onDragStop} on:touchmove={onDragMove} on:touchend={onDragStop} />
-<div bind:this={carouselDiv} class="relative" on:mousedown={onDragStart} on:touchstart={onDragStart} role="button" aria-label="Draggable Carousel" tabindex="0">
+<div bind:this={carouselDiv} class="relative" on:mousedown={onDragStart} on:touchstart|passive={onDragStart} role="button" aria-label={ariaLabel} tabindex="0">
   <div style={`transform: translateX(${percentOffset}%)`} {...$$restProps} class={twMerge(divClass, activeDragGesture === undefined ? 'transition-transform' : '', $$props.class)} use:loop={duration}>
-    {#key images[index]}
-      <img alt="..." {...images[index]} transition:transition={{}} class="absolute block w-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2 object-cover" />
-    {/key}
+    <slot name="slide" {Slide} {index}>
+      <Slide image={images[index]} {transition} />
+    </slot>
   </div>
   <slot {index} {Controls} {Indicators} />
 </div>
@@ -133,4 +135,5 @@ $: onDragStop =
 @prop export let index: number = 0;
 @prop export let transition: TransitionFunc = (x) => fade(x, { duration: 700, easing: quintOut });
 @prop export let duration: number = 0;
+@prop export let ariaLabel: string = 'Draggable Carousel';
 -->

package/dist/carousels/Carousel.svelte.d.ts

@@ -7,6 +7,7 @@ import type { HTMLImgAttributes } from 'svelte/elements';
 import { type TransitionConfig } from 'svelte/transition';
 import Controls from './Controls.svelte';
 import Indicators from './Indicators.svelte';
+import Slide from './Slide.svelte';
 declare const __propDef: {
     props: {
         [x: string]: any;
@@ -14,6 +15,7 @@ declare const __propDef: {
         index?: number | undefined;
         transition?: ((node: HTMLElement, params: any) => TransitionConfig) | undefined;
         duration?: number | undefined;
+        ariaLabel?: string | undefined;
     };
     events: {
         change: CustomEvent<any>;
@@ -21,6 +23,10 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
+        slide: {
+            Slide: typeof Slide;
+            index: number;
+        };
         default: {
             index: number;
             Controls: typeof Controls;
@@ -38,6 +44,7 @@ export type CarouselSlots = typeof __propDef.slots;
  * @prop export let index: number = 0;
  * @prop export let transition: TransitionFunc = (x) => fade(x, { duration: 700, easing: quintOut });
  * @prop export let duration: number = 0;
+ * @prop export let ariaLabel: string = 'Draggable Carousel';
  */
 export default class Carousel extends SvelteComponent<CarouselProps, CarouselEvents, CarouselSlots> {
 }

package/dist/carousels/Carousel.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Carousel.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/carousels/Carousel.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AACC,MAAM,MAAM,KAAK,GAAG;IAClB,MAAM,EAAE,iBAAiB,EAAE,CAAC;IAC5B,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAKJ,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAEzD,OAAO,EAAQ,KAAK,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAEhE,OAAO,QAAQ,MAAM,mBAAmB,CAAC;AACzC,OAAO,UAAU,MAAM,qBAAqB,CAAC;AA8J7C,QAAA,MAAM,SAAS;;;gBAD2F,iBAAiB,EAAE;;6BAjJ9F,WAAW,UAAU,GAAG,KAAK,gBAAgB;;;;;;;;;;;;;;;CAkJE,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;;;;;;;GAOG;AACH,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,eAAe,CAAC,aAAa,EAAE,cAAc,EAAE,aAAa,CAAC;CAClG"}
+{"version":3,"file":"Carousel.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/carousels/Carousel.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AACC,MAAM,MAAM,KAAK,GAAG;IAClB,MAAM,EAAE,iBAAiB,EAAE,CAAC;IAC5B,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAKJ,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAEzD,OAAO,EAAQ,KAAK,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAEhE,OAAO,QAAQ,MAAM,mBAAmB,CAAC;AACzC,OAAO,UAAU,MAAM,qBAAqB,CAAC;AAC7C,OAAO,KAAK,MAAM,gBAAgB,CAAC;AAgKnC,QAAA,MAAM,SAAS;;;gBADkH,iBAAiB,EAAE;;6BAlJrH,WAAW,UAAU,GAAG,KAAK,gBAAgB;;;;;;;;;;;;;;;;;;;;CAmJE,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,eAAe,CAAC,aAAa,EAAE,cAAc,EAAE,aAAa,CAAC;CAClG"}

package/dist/carousels/Slide.svelte

@@ -0,0 +1,17 @@
+<script>import { quintOut } from 'svelte/easing';
+import { fade } from 'svelte/transition';
+export let image;
+export let transition = (x) => fade(x, { duration: 700, easing: quintOut });
+</script>
+
+{#key image}
+  <img alt="..." {...image} transition:transition={{}} class="absolute block w-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2 object-cover" />
+{/key}
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let image: HTMLImgAttributes;
+@prop export let transition: TransitionFunc = (x) => fade(x, { duration: 700, easing: quintOut });
+-->

package/dist/carousels/Slide.svelte.d.ts

@@ -0,0 +1,26 @@
+import { SvelteComponent } from "svelte";
+import type { HTMLImgAttributes } from 'svelte/elements';
+import { type TransitionConfig } from 'svelte/transition';
+declare const __propDef: {
+    props: {
+        image: HTMLImgAttributes;
+        transition?: ((node: HTMLElement, params: any) => TransitionConfig) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type SlideProps = typeof __propDef.props;
+export type SlideEvents = typeof __propDef.events;
+export type SlideSlots = typeof __propDef.slots;
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Props
+ * @prop export let image: HTMLImgAttributes;
+ * @prop export let transition: TransitionFunc = (x) => fade(x, { duration: 700, easing: quintOut });
+ */
+export default class Slide extends SvelteComponent<SlideProps, SlideEvents, SlideSlots> {
+}
+export {};
+//# sourceMappingURL=Slide.svelte.d.ts.map

package/dist/carousels/Slide.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slide.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/carousels/Slide.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AAED,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AACzD,OAAO,EAAQ,KAAK,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAqBhE,QAAA,MAAM,SAAS;;eADoD,iBAAiB;6BAbrD,WAAW,UAAU,GAAG,KAAK,gBAAgB;;;;;;CAcrB,CAAC;AACxD,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAChD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAClD,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEhD;;;;;GAKG;AACH,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,eAAe,CAAC,UAAU,EAAE,WAAW,EAAE,UAAU,CAAC;CACtF"}

package/dist/carousels/Thumbnails.svelte

@@ -2,6 +2,7 @@
 import Thumbnail from './Thumbnail.svelte';
 export let images = [];
 export let index = 0;
+export let ariaLabel = 'Click to view image';
 $: index = (index + images.length) % images.length;
 </script>
 
@@ -9,7 +10,7 @@ $: index = (index + images.length) % images.length;
   {#each images as image, idx}
     {@const selected = index === idx}
     <!-- svelte-ignore a11y-click-events-have-key-events -->
-    <button on:click={() => (index = idx)} aria-label="Click to view image">
+    <button on:click={() => (index = idx)} aria-label={ariaLabel}>
       <slot {Thumbnail} {image} {selected}>
         <Thumbnail {...image} {selected} />
       </slot>
@@ -23,4 +24,5 @@ $: index = (index + images.length) % images.length;
 ## Props
 @prop export let images: HTMLImgAttributes[] = [];
 @prop export let index: number = 0;
+@prop export let ariaLabel: string = 'Click to view image';
 -->

package/dist/carousels/Thumbnails.svelte.d.ts

@@ -6,6 +6,7 @@ declare const __propDef: {
         [x: string]: any;
         images?: HTMLImgAttributes[] | undefined;
         index?: number | undefined;
+        ariaLabel?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -26,6 +27,7 @@ export type ThumbnailsSlots = typeof __propDef.slots;
  * ## Props
  * @prop export let images: HTMLImgAttributes[] = [];
  * @prop export let index: number = 0;
+ * @prop export let ariaLabel: string = 'Click to view image';
  */
 export default class Thumbnails extends SvelteComponent<ThumbnailsProps, ThumbnailsEvents, ThumbnailsSlots> {
 }

package/dist/carousels/Thumbnails.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Thumbnails.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/carousels/Thumbnails.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AACD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAEzD,OAAO,SAAS,MAAM,oBAAoB,CAAC;AA6B3C,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;;;;;GAKG;AACH,MAAM,CAAC,OAAO,OAAO,UAAW,SAAQ,eAAe,CAAC,eAAe,EAAE,gBAAgB,EAAE,eAAe,CAAC;CAC1G"}
+{"version":3,"file":"Thumbnails.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/carousels/Thumbnails.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AACD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAEzD,OAAO,SAAS,MAAM,oBAAoB,CAAC;AA8B3C,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;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,OAAO,UAAW,SAAQ,eAAe,CAAC,eAAe,EAAE,gBAAgB,EAAE,eAAe,CAAC;CAC1G"}

package/dist/darkmode/DarkMode.svelte

@@ -1,6 +1,7 @@
 <script>import { twMerge } from 'tailwind-merge';
 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';
+export let ariaLabel = 'Dark mode';
 const sizes = {
     sm: 'w-4 h-4',
     md: 'w-5 h-5',
@@ -24,7 +25,7 @@ const toggleTheme = () => {
   </script>
 </svelte:head>
 
-<button on:click={toggleTheme} aria-label="Dark mode" type="button" {...$$restProps} class={twMerge(btnClass, $$props.class)}>
+<button on:click={toggleTheme} aria-label={ariaLabel} type="button" {...$$restProps} class={twMerge(btnClass, $$props.class)}>
   <span class="hidden dark:block">
     <slot name="lightIcon">
       <svg class={sizes[size]} fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
@@ -51,4 +52,5 @@ const toggleTheme = () => {
 ## Props
 @prop export let 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 export let size: 'sm' | 'md' | 'lg' = 'md';
+@prop export let ariaLabel: string = 'Dark mode';
 -->

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

@@ -4,6 +4,7 @@ declare const __propDef: {
         [x: string]: any;
         btnClass?: string | undefined;
         size?: "sm" | "lg" | "md" | undefined;
+        ariaLabel?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -21,6 +22,7 @@ export type DarkModeSlots = typeof __propDef.slots;
  * ## Props
  * @prop export let 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 export let size: 'sm' | 'md' | 'lg' = 'md';
+ * @prop export let ariaLabel: string = 'Dark mode';
  */
 export default class DarkMode extends SvelteComponent<DarkModeProps, DarkModeEvents, DarkModeSlots> {
 }

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,eAAe,EAAE,MAAM,QAAQ,CAEvC;AA+CD,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;;;;;GAKG;AACH,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,eAAe,CAAC,aAAa,EAAE,cAAc,EAAE,aAAa,CAAC;CAClG"}
+{"version":3,"file":"DarkMode.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/darkmode/DarkMode.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AAgDD,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;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,eAAe,CAAC,aAAa,EAAE,cAAc,EAAE,aAAa,CAAC;CAClG"}

package/dist/device-mockup/Android.svelte

@@ -1,23 +1,33 @@
-<script>export let androidTop;
-export let androidLeftTop;
-export let androidLeftMid;
-export let androidLeftBot;
-export let androidRight;
+<script>import { twMerge } from 'tailwind-merge';
+export let div = 'relative mx-auto border-gray-800 dark:border-gray-800 bg-gray-800 border-[14px] rounded-xl h-[600px] w-[300px] shadow-xl';
+export let slot = 'rounded-xl overflow-hidden w-[272px] h-[572px] bg-white dark:bg-gray-800';
+export let top = 'w-[148px] h-[18px] bg-gray-800 top-0 rounded-b-[1rem] left-1/2 -translate-x-1/2 absolute';
+export let leftTop = 'h-[32px] w-[3px] bg-gray-800 absolute -left-[17px] top-[72px] rounded-l-lg';
+export let leftMid = 'h-[46px] w-[3px] bg-gray-800 absolute -left-[17px] top-[124px] rounded-l-lg';
+export let leftBot = 'h-[46px] w-[3px] bg-gray-800 absolute -left-[17px] top-[178px] rounded-l-lg';
+export let right = 'h-[64px] w-[3px] bg-gray-800 absolute -right-[17px] top-[142px] rounded-r-lg';
 </script>
 
-<div class={androidTop} />
-<div class={androidLeftTop} />
-<div class={androidLeftMid} />
-<div class={androidLeftBot} />
-<div class={androidRight} />
+<div class={twMerge(div, $$props.class)}>
+  <div class={twMerge(top, $$props.classTop)} />
+  <div class={twMerge(leftTop, $$props.classLeftTop)} />
+  <div class={twMerge(leftMid, $$props.classLeftMid)} />
+  <div class={twMerge(leftBot, $$props.classLeftBot)} />
+  <div class={twMerge(right, $$props.classRight)} />
+  <div class={twMerge(slot, $$props.classSlot)}>
+    <slot />
+  </div>
+</div>
 
 <!--
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let androidTop: string;
-@prop export let androidLeftTop: string;
-@prop export let androidLeftMid: string;
-@prop export let androidLeftBot: string;
-@prop export let androidRight: string;
+@prop export let div: string = 'relative mx-auto border-gray-800 dark:border-gray-800 bg-gray-800 border-[14px] rounded-xl h-[600px] w-[300px] shadow-xl';
+@prop export let slot: string = 'rounded-xl overflow-hidden w-[272px] h-[572px] bg-white dark:bg-gray-800';
+@prop export let top: string = 'w-[148px] h-[18px] bg-gray-800 top-0 rounded-b-[1rem] left-1/2 -translate-x-1/2 absolute';
+@prop export let leftTop: string = 'h-[32px] w-[3px] bg-gray-800 absolute -left-[17px] top-[72px] rounded-l-lg';
+@prop export let leftMid: string = 'h-[46px] w-[3px] bg-gray-800 absolute -left-[17px] top-[124px] rounded-l-lg';
+@prop export let leftBot: string = 'h-[46px] w-[3px] bg-gray-800 absolute -left-[17px] top-[178px] rounded-l-lg';
+@prop export let right: string = 'h-[64px] w-[3px] bg-gray-800 absolute -right-[17px] top-[142px] rounded-r-lg';
 -->

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

@@ -1,16 +1,21 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        androidTop: string;
-        androidLeftTop: string;
-        androidLeftMid: string;
-        androidLeftBot: string;
-        androidRight: string;
+        [x: string]: any;
+        div?: string | undefined;
+        slot?: string | undefined;
+        top?: string | undefined;
+        leftTop?: string | undefined;
+        leftMid?: string | undefined;
+        leftBot?: string | undefined;
+        right?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        default: {};
+    };
 };
 export type AndroidProps = typeof __propDef.props;
 export type AndroidEvents = typeof __propDef.events;
@@ -18,11 +23,13 @@ export type AndroidSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop export let androidTop: string;
- * @prop export let androidLeftTop: string;
- * @prop export let androidLeftMid: string;
- * @prop export let androidLeftBot: string;
- * @prop export let androidRight: string;
+ * @prop export let div: string = 'relative mx-auto border-gray-800 dark:border-gray-800 bg-gray-800 border-[14px] rounded-xl h-[600px] w-[300px] shadow-xl';
+ * @prop export let slot: string = 'rounded-xl overflow-hidden w-[272px] h-[572px] bg-white dark:bg-gray-800';
+ * @prop export let top: string = 'w-[148px] h-[18px] bg-gray-800 top-0 rounded-b-[1rem] left-1/2 -translate-x-1/2 absolute';
+ * @prop export let leftTop: string = 'h-[32px] w-[3px] bg-gray-800 absolute -left-[17px] top-[72px] rounded-l-lg';
+ * @prop export let leftMid: string = 'h-[46px] w-[3px] bg-gray-800 absolute -left-[17px] top-[124px] rounded-l-lg';
+ * @prop export let leftBot: string = 'h-[46px] w-[3px] bg-gray-800 absolute -left-[17px] top-[178px] rounded-l-lg';
+ * @prop export let right: string = 'h-[64px] w-[3px] bg-gray-800 absolute -right-[17px] top-[142px] rounded-r-lg';
  */
 export default class Android extends SvelteComponent<AndroidProps, AndroidEvents, AndroidSlots> {
 }

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

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

package/dist/device-mockup/DefaultMockup.svelte

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

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

@@ -1,15 +1,20 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        defaultTop: string;
-        defaultLeftTop: string;
-        defaultLeftBot: string;
-        defaultRight: string;
+        [x: string]: any;
+        div?: string | undefined;
+        slot?: string | undefined;
+        top?: string | undefined;
+        leftTop?: string | undefined;
+        leftBot?: string | undefined;
+        right?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        default: {};
+    };
 };
 export type DefaultMockupProps = typeof __propDef.props;
 export type DefaultMockupEvents = typeof __propDef.events;
@@ -17,10 +22,12 @@ export type DefaultMockupSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop export let defaultTop: string;
- * @prop export let defaultLeftTop: string;
- * @prop export let defaultLeftBot: string;
- * @prop export let defaultRight: string;
+ * @prop export let div: string = 'relative mx-auto border-gray-800 dark:border-gray-800 bg-gray-800 border-[14px] rounded-[2.5rem] h-[600px] w-[300px]';
+ * @prop export let slot: string = 'rounded-[2rem] overflow-hidden w-[272px] h-[572px] bg-white dark:bg-gray-800';
+ * @prop export let top: string = 'h-[32px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[72px] rounded-l-lg';
+ * @prop export let leftTop: string = 'h-[46px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[124px] rounded-l-lg';
+ * @prop export let leftBot: string = 'h-[46px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[178px] rounded-l-lg';
+ * @prop export let right: string = 'h-[64px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -right-[17px] top-[142px] rounded-r-lg';
  */
 export default class DefaultMockup extends SvelteComponent<DefaultMockupProps, DefaultMockupEvents, DefaultMockupSlots> {
 }

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

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

package/dist/device-mockup/Desktop.svelte

@@ -0,0 +1,24 @@
+<script>import { twMerge } from 'tailwind-merge';
+export let inner = 'rounded-xl overflow-hidden h-[140px] md:h-[262px]';
+export let bot = 'relative mx-auto bg-gray-900 dark:bg-gray-700 rounded-b-xl h-[24px] max-w-[301px] md:h-[42px] md:max-w-[512px]';
+export let botUnder = 'relative mx-auto bg-gray-800 rounded-b-xl h-[55px] max-w-[83px] md:h-[95px] md:max-w-[142px]';
+export let div = 'relative mx-auto border-gray-800 dark:border-gray-800 bg-gray-800 border-[16px] rounded-t-xl h-[172px] max-w-[301px] md:h-[294px] md:max-w-[512px]';
+</script>
+
+<div class={twMerge(div, $$props.class)}>
+  <div class={twMerge(inner, $$props.classInner)}>
+    <slot />
+  </div>
+</div>
+<div class={twMerge(bot, $$props.classBot)} />
+<div class={twMerge(botUnder, $$props.classBotUnder)} />
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let inner: string = 'rounded-xl overflow-hidden h-[140px] md:h-[262px]';
+@prop export let bot: string = 'relative mx-auto bg-gray-900 dark:bg-gray-700 rounded-b-xl h-[24px] max-w-[301px] md:h-[42px] md:max-w-[512px]';
+@prop export let botUnder: string = 'relative mx-auto bg-gray-800 rounded-b-xl h-[55px] max-w-[83px] md:h-[95px] md:max-w-[142px]';
+@prop export let div: string = 'relative mx-auto border-gray-800 dark:border-gray-800 bg-gray-800 border-[16px] rounded-t-xl h-[172px] max-w-[301px] md:h-[294px] md:max-w-[512px]';
+-->

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

@@ -0,0 +1,31 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        inner?: string | undefined;
+        bot?: string | undefined;
+        botUnder?: string | undefined;
+        div?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type DesktopProps = typeof __propDef.props;
+export type DesktopEvents = typeof __propDef.events;
+export type DesktopSlots = typeof __propDef.slots;
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Props
+ * @prop export let inner: string = 'rounded-xl overflow-hidden h-[140px] md:h-[262px]';
+ * @prop export let bot: string = 'relative mx-auto bg-gray-900 dark:bg-gray-700 rounded-b-xl h-[24px] max-w-[301px] md:h-[42px] md:max-w-[512px]';
+ * @prop export let botUnder: string = 'relative mx-auto bg-gray-800 rounded-b-xl h-[55px] max-w-[83px] md:h-[95px] md:max-w-[142px]';
+ * @prop export let div: string = 'relative mx-auto border-gray-800 dark:border-gray-800 bg-gray-800 border-[16px] rounded-t-xl h-[172px] max-w-[301px] md:h-[294px] md:max-w-[512px]';
+ */
+export default class Desktop extends SvelteComponent<DesktopProps, DesktopEvents, DesktopSlots> {
+}
+export {};
+//# sourceMappingURL=Desktop.svelte.d.ts.map

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

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