flowbite-svelte 0.47.1 → 0.47.3

package/dist/accordion/Accordion.svelte

@@ -9,10 +9,12 @@ export let flush = false;
 export let activeClass = "bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800";
 export let inactiveClass = "text-gray-500 dark:text-gray-400 hover:bg-gray-100 hover:dark:bg-gray-800";
 export let defaultClass = "text-gray-500 dark:text-gray-400";
+export let classActive = "";
+export let classInactive = "";
 const ctx = {
   flush,
-  activeClass: twMerge(activeClass, $$props.classActive),
-  inactiveClass: twMerge(inactiveClass, $$props.classInactive),
+  activeClass: twMerge(activeClass, classActive),
+  inactiveClass: twMerge(inactiveClass, classInactive),
   selected: multiple ? void 0 : writable()
 };
 setContext("ctx", ctx);
@@ -33,4 +35,6 @@ $: frameClass = twMerge(defaultClass, $$props.class);
 @prop export let activeClass: $$Props['activeClass'] = 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800';
 @prop export let inactiveClass: $$Props['inactiveClass'] = 'text-gray-500 dark:text-gray-400 hover:bg-gray-100 hover:dark:bg-gray-800';
 @prop export let defaultClass: $$Props['defaultClass'] = 'text-gray-500 dark:text-gray-400';
+@prop export let classActive: $$Props['classActive'] = '';
+@prop export let classInactive: $$Props['classInactive'] = '';
 -->

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

@@ -50,6 +50,8 @@ export type AccordionSlots = typeof __propDef.slots;
  * @prop export let activeClass: $$Props['activeClass'] = 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800';
  * @prop export let inactiveClass: $$Props['inactiveClass'] = 'text-gray-500 dark:text-gray-400 hover:bg-gray-100 hover:dark:bg-gray-800';
  * @prop export let defaultClass: $$Props['defaultClass'] = 'text-gray-500 dark:text-gray-400';
+ * @prop export let classActive: $$Props['classActive'] = '';
+ * @prop export let classInactive: $$Props['classInactive'] = '';
  */
 export default class Accordion extends SvelteComponentTyped<AccordionProps, AccordionEvents, AccordionSlots> {
 }

package/dist/banner/Banner.svelte

@@ -9,6 +9,8 @@ export let innerClass = "flex";
 export let bannerStatus = true;
 export let transition = fade;
 export let params = {};
+export let classDiv = "";
+export let classInner = "";
 const divClasses = {
   default: "top-0 start-0 w-full border-b border-gray-200 bg-gray-50",
   bottom: "bottom-0 start-0 w-full border-t border-gray-200 bg-gray-50",
@@ -23,8 +25,8 @@ const insideDivClasses = {
   signup: "items-center flex-shrink-0 w-full mx-auto sm:w-auto",
   info: "items-center flex-shrink-0"
 };
-$: divClass = twMerge(position, divClass, divClasses[bannerType], $$props.classDiv);
-$: div2Class = twMerge(innerClass, insideDivClasses[bannerType], $$props.classInner);
+$: divClass = twMerge(position, divClass, divClasses[bannerType], classDiv);
+$: div2Class = twMerge(innerClass, insideDivClasses[bannerType], classInner);
 function close(e) {
   e.preventDefault();
   bannerStatus = false;
@@ -58,4 +60,6 @@ function close(e) {
 @prop export let bannerStatus: $$Props['bannerStatus'] = true;
 @prop export let transition: NonNullable<$$Props['transition']> = fade;
 @prop export let params: $$Props['params'] = {};
+@prop export let classDiv: $$Props['classDiv'] = '';
+@prop export let classInner: $$Props['classInner'] = '';
 -->

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

@@ -1,6 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
 import type { HTMLAttributes } from 'svelte/elements';
 import { type TransitionConfig } from 'svelte/transition';
+import type { ParamsType } from '../types';
 declare const __propDef: {
     props: HTMLAttributes<HTMLDivElement> & {
         position?: "static" | "fixed" | "absolute" | "relative" | "sticky";
@@ -9,8 +10,10 @@ declare const __propDef: {
         divClass?: string;
         innerClass?: string;
         bannerStatus?: boolean;
-        transition?: (node: HTMLElement, params: any) => TransitionConfig;
+        transition?: (node: HTMLElement, params: ParamsType) => TransitionConfig;
         params?: object;
+        classDiv?: string;
+        classInner?: string;
     };
     events: {
         click: MouseEvent;
@@ -43,6 +46,8 @@ export type BannerSlots = typeof __propDef.slots;
  * @prop export let bannerStatus: $$Props['bannerStatus'] = true;
  * @prop export let transition: NonNullable<$$Props['transition']> = fade;
  * @prop export let params: $$Props['params'] = {};
+ * @prop export let classDiv: $$Props['classDiv'] = '';
+ * @prop export let classInner: $$Props['classInner'] = '';
  */
 export default class Banner extends SvelteComponentTyped<BannerProps, BannerEvents, BannerSlots> {
 }

package/dist/bottom-navigation/BottomNav.svelte

@@ -9,9 +9,12 @@ export let navType = "default";
 export let outerClass = "w-full z-50 border-gray-200 dark:bg-gray-700 dark:border-gray-600";
 export let innerClass = "grid h-full max-w-lg mx-auto";
 export let activeClass = "text-primary-700 dark:text-primary-700 hover:text-primary-900 dark:hover:text-primary-900";
+export let classActive = "";
+export let classOuter = "";
+export let classInner = "";
 let activeCls = "";
 const activeUrlStore = writable("");
-activeCls = twMerge(activeClass, $$props.classActive);
+activeCls = twMerge(activeClass, classActive);
 setContext("navType", navType);
 setContext("bottomNavType", { activeClass: activeCls });
 $: {
@@ -38,8 +41,8 @@ const innerDivClasses = {
   meeting: "flex items-center justify-center mx-auto",
   video: "flex items-center w-full"
 };
-$: outerCls = twMerge(position, outerClass, outerDivClasses[navType], $$props.classOuter);
-$: innerCls = twMerge(innerClass, innerDivClasses[navType], $$props.classInner);
+$: outerCls = twMerge(position, outerClass, outerDivClasses[navType], classOuter);
+$: innerCls = twMerge(innerClass, innerDivClasses[navType], classInner);
 </script>
 
 <div {...$$restProps} class={outerCls}>
@@ -59,4 +62,7 @@ $: innerCls = twMerge(innerClass, innerDivClasses[navType], $$props.classInner);
 @prop export let outerClass: $$Props['outerClass'] = 'w-full z-50 border-gray-200 dark:bg-gray-700 dark:border-gray-600';
 @prop export let innerClass: $$Props['innerClass'] = 'grid h-full max-w-lg mx-auto';
 @prop export let activeClass: $$Props['activeClass'] = 'text-primary-700 dark:text-primary-700 hover:text-primary-900 dark:hover:text-primary-900';
+@prop export let classActive: $$Props['classActive'] = '';
+@prop export let classOuter: $$Props['classOuter'] = '';
+@prop export let classInner: $$Props['classInner'] = '';
 -->

package/dist/bottom-navigation/BottomNav.svelte.d.ts

@@ -13,6 +13,9 @@ declare const __propDef: {
         outerClass?: string;
         innerClass?: string;
         activeClass?: string;
+        classActive?: string;
+        classOuter?: string;
+        classInner?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -34,6 +37,9 @@ export type BottomNavSlots = typeof __propDef.slots;
  * @prop export let outerClass: $$Props['outerClass'] = 'w-full z-50 border-gray-200 dark:bg-gray-700 dark:border-gray-600';
  * @prop export let innerClass: $$Props['innerClass'] = 'grid h-full max-w-lg mx-auto';
  * @prop export let activeClass: $$Props['activeClass'] = 'text-primary-700 dark:text-primary-700 hover:text-primary-900 dark:hover:text-primary-900';
+ * @prop export let classActive: $$Props['classActive'] = '';
+ * @prop export let classOuter: $$Props['classOuter'] = '';
+ * @prop export let classInner: $$Props['classInner'] = '';
  */
 export default class BottomNav extends SvelteComponentTyped<BottomNavProps, BottomNavEvents, BottomNavSlots> {
 }

package/dist/bottom-navigation/BottomNavHeader.svelte

@@ -1,10 +1,12 @@
 <script>import { twMerge } from "tailwind-merge";
 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";
+export let classOuter = "";
+export let classInner = "";
 </script>
 
-<div {...$$restProps} class={twMerge(outerClass, $$props.classOuter)} >
-  <div class={twMerge(innerClass, $$props.classInner)} role="group">
+<div {...$$restProps} class={twMerge(outerClass, classOuter)} >
+  <div class={twMerge(innerClass, classInner)} role="group">
     <slot />
   </div>
 </div>
@@ -15,4 +17,6 @@ export let innerClass = "grid max-w-xs grid-cols-3 gap-1 p-1 mx-auto my-2 bg-gra
 ## Props
 @prop export let outerClass: $$Props['outerClass'] = 'w-full';
 @prop export let innerClass: $$Props['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';
+@prop export let classOuter: $$Props['classOuter'] = '';
+@prop export let classInner: $$Props['classInner'] = '';
 -->

package/dist/bottom-navigation/BottomNavHeader.svelte.d.ts

@@ -4,6 +4,8 @@ declare const __propDef: {
     props: HTMLAttributes<HTMLDivElement> & {
         outerClass?: string;
         innerClass?: string;
+        classOuter?: string;
+        classInner?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -20,6 +22,8 @@ export type BottomNavHeaderSlots = typeof __propDef.slots;
  * ## Props
  * @prop export let outerClass: $$Props['outerClass'] = 'w-full';
  * @prop export let innerClass: $$Props['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';
+ * @prop export let classOuter: $$Props['classOuter'] = '';
+ * @prop export let classInner: $$Props['classInner'] = '';
  */
 export default class BottomNavHeader extends SvelteComponentTyped<BottomNavHeaderProps, BottomNavHeaderEvents, BottomNavHeaderSlots> {
 }

package/dist/breadcrumb/Breadcrumb.svelte

@@ -4,11 +4,12 @@ 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 rtl:space-x-reverse md:space-x-3 rtl:space-x-reverse";
 export let ariaLabel = "Breadcrumb";
+export let classOl = "";
 let classNav = solid ? solidClass : navClass;
 </script>
 
 <nav aria-label={ariaLabel} {...$$restProps} class={twMerge(classNav, $$props.class)}>
-  <ol class={twMerge(olClass, $$props.classOl)}>
+  <ol class={twMerge(olClass, classOl)}>
     <slot />
   </ol>
 </nav>
@@ -22,4 +23,5 @@ let classNav = solid ? solidClass : navClass;
 @prop export let solidClass: NonNullable<$$Props['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';
 @prop export let olClass: $$Props['olClass'] = 'inline-flex items-center space-x-1 rtl:space-x-reverse md:space-x-3 rtl:space-x-reverse';
 @prop export let ariaLabel: $$Props['ariaLabel'] = 'Breadcrumb';
+@prop export let classOl: $$Props['classOl'] = '';
 -->

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

@@ -7,6 +7,7 @@ declare const __propDef: {
         solidClass?: string;
         olClass?: string;
         ariaLabel?: string;
+        classOl?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -26,6 +27,7 @@ export type BreadcrumbSlots = typeof __propDef.slots;
  * @prop export let solidClass: NonNullable<$$Props['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';
  * @prop export let olClass: $$Props['olClass'] = 'inline-flex items-center space-x-1 rtl:space-x-reverse md:space-x-3 rtl:space-x-reverse';
  * @prop export let ariaLabel: $$Props['ariaLabel'] = 'Breadcrumb';
+ * @prop export let classOl: $$Props['classOl'] = '';
  */
 export default class Breadcrumb extends SvelteComponentTyped<BreadcrumbProps, BreadcrumbEvents, BreadcrumbSlots> {
 }

package/dist/breadcrumb/BreadcrumbItem.svelte

@@ -4,11 +4,14 @@ export let href = void 0;
 export let linkClass = "ms-1 text-sm font-medium text-gray-700 hover:text-gray-900 md:ms-2 dark:text-gray-400 dark:hover:text-white";
 export let spanClass = "ms-1 text-sm font-medium text-gray-500 md:ms-2 dark:text-gray-400";
 export let homeClass = "inline-flex items-center text-sm font-medium text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white";
+export let classHome = "";
+export let classLink = "";
+export let classSpan = "";
 </script>
 
 <li {...$$restProps} class={twMerge('inline-flex items-center', $$props.class)}>
   {#if home}
-    <a class={twMerge(homeClass, $$props.classHome)} {href}>
+    <a class={twMerge(homeClass, classHome)} {href}>
       {#if $$slots.icon}
         <slot name="icon" />
       {:else}
@@ -27,11 +30,11 @@ export let homeClass = "inline-flex items-center text-sm font-medium text-gray-7
       </svg>
     {/if}
     {#if href}
-      <a class={twMerge(linkClass, $$props.classLink)} {href}>
+      <a class={twMerge(linkClass, classLink)} {href}>
         <slot />
       </a>
     {:else}
-      <span class={twMerge(spanClass, $$props.classSpan)}>
+      <span class={twMerge(spanClass, classSpan)}>
         <slot />
       </span>
     {/if}
@@ -47,4 +50,7 @@ export let homeClass = "inline-flex items-center text-sm font-medium text-gray-7
 @prop export let linkClass: $$Props['linkClass'] = 'ms-1 text-sm font-medium text-gray-700 hover:text-gray-900 md:ms-2 dark:text-gray-400 dark:hover:text-white';
 @prop export let spanClass: $$Props['spanClass'] = 'ms-1 text-sm font-medium text-gray-500 md:ms-2 dark:text-gray-400';
 @prop export let homeClass: $$Props['homeClass'] = 'inline-flex items-center text-sm font-medium text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white';
+@prop export let classHome: $$Props['classHome'] = '';
+@prop export let classLink: $$Props['classLink'] = '';
+@prop export let classSpan: $$Props['classSpan'] = '';
 -->

package/dist/breadcrumb/BreadcrumbItem.svelte.d.ts

@@ -7,6 +7,9 @@ declare const __propDef: {
         linkClass?: string;
         spanClass?: string;
         homeClass?: string;
+        classHome?: string;
+        classLink?: string;
+        classSpan?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -27,6 +30,9 @@ export type BreadcrumbItemSlots = typeof __propDef.slots;
  * @prop export let linkClass: $$Props['linkClass'] = 'ms-1 text-sm font-medium text-gray-700 hover:text-gray-900 md:ms-2 dark:text-gray-400 dark:hover:text-white';
  * @prop export let spanClass: $$Props['spanClass'] = 'ms-1 text-sm font-medium text-gray-500 md:ms-2 dark:text-gray-400';
  * @prop export let homeClass: $$Props['homeClass'] = 'inline-flex items-center text-sm font-medium text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white';
+ * @prop export let classHome: $$Props['classHome'] = '';
+ * @prop export let classLink: $$Props['classLink'] = '';
+ * @prop export let classSpan: $$Props['classSpan'] = '';
  */
 export default class BreadcrumbItem extends SvelteComponentTyped<BreadcrumbItemProps, BreadcrumbItemEvents, BreadcrumbItemSlots> {
 }

package/dist/buttons/Button.svelte

@@ -107,6 +107,10 @@ $: buttonClass = twMerge(
   <a {href} {...$$restProps} class={buttonClass} role="button" on:click on:change on:keydown on:keyup on:touchstart|passive on:touchend on:touchcancel on:mouseenter on:mouseleave>
     <slot />
   </a>
+{:else if tag === 'label'}
+  <label {...$$restProps} class={buttonClass}>
+    <slot />
+  </label>
 {:else if tag === 'button' }
   <button {type} {...$$restProps} {disabled} class={buttonClass} on:click on:change on:keydown on:keyup on:touchstart|passive on:touchend on:touchcancel on:mouseenter on:mouseleave>
     <slot />

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

@@ -7,7 +7,7 @@ declare const __propDef: {
         size?: "xs" | "sm" | "md" | "lg" | "xl";
         color?: "red" | "yellow" | "green" | "purple" | "blue" | "light" | "dark" | "primary" | "none" | "alternative";
         shadow?: boolean;
-        tag?: "a" | "button";
+        tag?: "a" | "button" | "label";
         checked?: boolean;
     } & Omit<HTMLAnchorAttributes, "type"> & {
         href?: string | undefined;
@@ -17,7 +17,7 @@ declare const __propDef: {
         size?: "xs" | "sm" | "md" | "lg" | "xl";
         color?: "red" | "yellow" | "green" | "purple" | "blue" | "light" | "dark" | "primary" | "none" | "alternative";
         shadow?: boolean;
-        tag?: "a" | "button";
+        tag?: "a" | "button" | "label";
         checked?: boolean;
     } & HTMLButtonAttributes & {
         disabled?: HTMLButtonAttributes["disabled"];

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

@@ -11,13 +11,14 @@ import type { TransitionConfig } from 'svelte/transition';
 import Controls from './Controls.svelte';
 import Indicators from './Indicators.svelte';
 import Slide from './Slide.svelte';
+import type { ParamsType } from '../types';
 declare const __propDef: {
     props: {
         [x: string]: any;
         images: HTMLImgAttributes[];
         index?: number | undefined;
         slideDuration?: number | undefined;
-        transition?: (((node: HTMLElement, params: any) => TransitionConfig) | null) | undefined;
+        transition?: (((node: HTMLElement, params: ParamsType) => TransitionConfig) | null) | undefined;
         duration?: number | undefined;
         ariaLabel?: string | undefined;
         disableSwipe?: boolean | undefined;

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

@@ -1,11 +1,12 @@
 import { SvelteComponentTyped } from "svelte";
 import type { HTMLImgAttributes } from 'svelte/elements';
 import { type TransitionConfig } from 'svelte/transition';
+import type { ParamsType } from '../types';
 declare const __propDef: {
     props: {
         [x: string]: any;
         image: HTMLImgAttributes;
-        transition?: (((node: HTMLElement, params: any) => TransitionConfig) | null) | undefined;
+        transition?: (((node: HTMLElement, params: ParamsType) => TransitionConfig) | null) | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/carousel/Thumbnails.svelte

@@ -23,7 +23,6 @@ $: index = (index + images.length) % images.length;
 <div class={twMerge('flex flex-row justify-center bg-gray-100 w-full', $$props.class)}>
   {#each images as image, idx}
     {@const selected = index === idx}
-    <!-- svelte-ignore a11y-click-events-have-key-events -->
     <button on:click={() => btnClick(idx)} aria-label={ariaLabel}>
       <slot {Thumbnail} {image} {selected} {imgClass}>
         <Thumbnail {...image} {selected} class={imgClass} />

package/dist/datepicker/Datepicker.svelte

@@ -21,8 +21,8 @@ export let title = "";
 const dispatch = createEventDispatcher();
 let isOpen = inline;
 let inputElement;
+let datepickerContainerElement;
 let currentMonth = value || defaultDate || /* @__PURE__ */ new Date();
-currentMonth.setDate(1);
 let focusedDate = null;
 let calendarRef;
 $: daysInMonth = getDaysInMonth(currentMonth);
@@ -129,7 +129,7 @@ function handleInputChange() {
   }
 }
 function handleClickOutside(event) {
-  if (isOpen && !inputElement.contains(event.target)) {
+  if (isOpen && datepickerContainerElement && !datepickerContainerElement.contains(event.target)) {
     isOpen = false;
   }
 }
@@ -137,12 +137,16 @@ function formatDate(date) {
   if (!date) return "";
   return date.toLocaleDateString(locale, dateFormat);
 }
-function isSelected(day) {
+function isSameDate(date1, date2) {
+  if (!date1 || !date2) return false;
+  return date1.toDateString() === date2.toDateString();
+}
+$: isSelected = (day) => {
   if (range) {
-    return !!(rangeFrom && day.toDateString() === rangeFrom.toDateString()) || !!(rangeTo && day.toDateString() === rangeTo.toDateString());
+    return isSameDate(day, rangeFrom) || isSameDate(day, rangeTo);
   }
-  return !!(value && day.toDateString() === value.toDateString());
-}
+  return isSameDate(day, value);
+};
 function isInRange(day) {
   if (!range || !rangeFrom || !rangeTo) return false;
   return day > rangeFrom && day < rangeTo;
@@ -209,7 +213,7 @@ function handleApply() {
 }
 </script>
 
-<div class="relative {inline ? 'inline-block' : ''}">
+<div bind:this={datepickerContainerElement} class="relative {inline ? 'inline-block' : ''}">
   {#if !inline}
     <div class="relative">
       <input bind:this={inputElement} type="text" class="w-full px-4 py-2 text-sm border rounded-md focus:outline-none dark:bg-gray-700 dark:text-white dark:border-gray-600 {getFocusRingClass(color)} {inputClass}" {placeholder} value={range ? `${formatDate(rangeFrom)} - ${formatDate(rangeTo)}` : formatDate(value)} on:focus={() => (isOpen = true)} on:input={handleInputChange} on:keydown={handleInputKeydown} {disabled} {required} aria-haspopup="dialog" />

package/dist/device-mockups/Android.svelte

@@ -6,15 +6,21 @@ export let leftTop = "h-[32px] w-[3px] bg-gray-800 absolute -left-[17px] top-[72
 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";
+export let classTop = "";
+export let classLeftTop = "";
+export let classLeftMid = "";
+export let classLeftBot = "";
+export let classRight = "";
+export let classSlot = "";
 </script>
 
 <div class={twMerge(div, $$props.class)}>
-  <div class={twMerge(top, $$props.classTop)}></div>
-  <div class={twMerge(leftTop, $$props.classLeftTop)}></div>
-  <div class={twMerge(leftMid, $$props.classLeftMid)}></div>
-  <div class={twMerge(leftBot, $$props.classLeftBot)}></div>
-  <div class={twMerge(right, $$props.classRight)}></div>
-  <div class={twMerge(slot, $$props.classSlot)}>
+  <div class={twMerge(top, classTop)}></div>
+  <div class={twMerge(leftTop, classLeftTop)}></div>
+  <div class={twMerge(leftMid, classLeftMid)}></div>
+  <div class={twMerge(leftBot, classLeftBot)}></div>
+  <div class={twMerge(right, classRight)}></div>
+  <div class={twMerge(slot, classSlot)}>
     <slot></slot>
   </div>
 </div>
@@ -30,4 +36,10 @@ export let right = "h-[64px] w-[3px] bg-gray-800 absolute -right-[17px] top-[142
 @prop export let leftMid: $$Props['leftMid'] = 'h-[46px] w-[3px] bg-gray-800 absolute -left-[17px] top-[124px] rounded-l-lg';
 @prop export let leftBot: $$Props['leftBot'] = 'h-[46px] w-[3px] bg-gray-800 absolute -left-[17px] top-[178px] rounded-l-lg';
 @prop export let right: $$Props['right'] = 'h-[64px] w-[3px] bg-gray-800 absolute -right-[17px] top-[142px] rounded-r-lg';
+@prop export let classTop: $$Props['classTop'] = '';
+@prop export let classLeftTop: $$Props['classLeftTop'] = '';
+@prop export let classLeftMid: $$Props['classLeftMid'] = '';
+@prop export let classLeftBot: $$Props['classLeftBot'] = '';
+@prop export let classRight: $$Props['classRight'] = '';
+@prop export let classSlot: $$Props['classSlot'] = '';
 -->

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

@@ -8,6 +8,12 @@ declare const __propDef: {
         leftMid?: string;
         leftBot?: string;
         right?: string;
+        classTop?: string;
+        classLeftTop?: string;
+        classLeftMid?: string;
+        classLeftBot?: string;
+        classRight?: string;
+        classSlot?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -29,6 +35,12 @@ export type AndroidSlots = typeof __propDef.slots;
  * @prop export let leftMid: $$Props['leftMid'] = 'h-[46px] w-[3px] bg-gray-800 absolute -left-[17px] top-[124px] rounded-l-lg';
  * @prop export let leftBot: $$Props['leftBot'] = 'h-[46px] w-[3px] bg-gray-800 absolute -left-[17px] top-[178px] rounded-l-lg';
  * @prop export let right: $$Props['right'] = 'h-[64px] w-[3px] bg-gray-800 absolute -right-[17px] top-[142px] rounded-r-lg';
+ * @prop export let classTop: $$Props['classTop'] = '';
+ * @prop export let classLeftTop: $$Props['classLeftTop'] = '';
+ * @prop export let classLeftMid: $$Props['classLeftMid'] = '';
+ * @prop export let classLeftBot: $$Props['classLeftBot'] = '';
+ * @prop export let classRight: $$Props['classRight'] = '';
+ * @prop export let classSlot: $$Props['classSlot'] = '';
  */
 export default class Android extends SvelteComponentTyped<AndroidProps, AndroidEvents, AndroidSlots> {
 }

package/dist/device-mockups/DefaultMockup.svelte

@@ -5,14 +5,19 @@ export let top = "h-[32px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[
 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";
+export let classTop = "";
+export let classLeftTop = "";
+export let classLeftBot = "";
+export let classRight = "";
+export let classSlot = "";
 </script>
 
 <div class={twMerge(div, $$props.class)}>
-  <div class={twMerge(top, $$props.classTop)}></div>
-  <div class={twMerge(leftTop, $$props.classLeftTop)}></div>
-  <div class={twMerge(leftBot, $$props.classLeftBot)}></div>
-  <div class={twMerge(right, $$props.classRight)}></div>
-  <div class={twMerge(slot, $$props.classSlot)}>
+  <div class={twMerge(top, classTop)}></div>
+  <div class={twMerge(leftTop, classLeftTop)}></div>
+  <div class={twMerge(leftBot, classLeftBot)}></div>
+  <div class={twMerge(right, classRight)}></div>
+  <div class={twMerge(slot, classSlot)}>
     <slot></slot>
   </div>
 </div>
@@ -27,4 +32,9 @@ export let right = "h-[64px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -righ
 @prop export let leftTop: $$Props['leftTop'] = 'h-[46px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[124px] rounded-l-lg';
 @prop export let leftBot: $$Props['leftBot'] = 'h-[46px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[178px] rounded-l-lg';
 @prop export let right: $$Props['right'] = 'h-[64px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -right-[17px] top-[142px] rounded-r-lg';
+@prop export let classTop: $$Props['classTop'] = '';
+@prop export let classLeftTop: $$Props['classLeftTop'] = '';
+@prop export let classLeftBot: $$Props['classLeftBot'] = '';
+@prop export let classRight: $$Props['classRight'] = '';
+@prop export let classSlot: $$Props['classSlot'] = '';
 -->

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

@@ -7,6 +7,11 @@ declare const __propDef: {
         leftTop?: string;
         leftBot?: string;
         right?: string;
+        classTop?: string;
+        classLeftTop?: string;
+        classLeftBot?: string;
+        classRight?: string;
+        classSlot?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -27,6 +32,11 @@ export type DefaultMockupSlots = typeof __propDef.slots;
  * @prop export let leftTop: $$Props['leftTop'] = 'h-[46px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[124px] rounded-l-lg';
  * @prop export let leftBot: $$Props['leftBot'] = 'h-[46px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[178px] rounded-l-lg';
  * @prop export let right: $$Props['right'] = 'h-[64px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -right-[17px] top-[142px] rounded-r-lg';
+ * @prop export let classTop: $$Props['classTop'] = '';
+ * @prop export let classLeftTop: $$Props['classLeftTop'] = '';
+ * @prop export let classLeftBot: $$Props['classLeftBot'] = '';
+ * @prop export let classRight: $$Props['classRight'] = '';
+ * @prop export let classSlot: $$Props['classSlot'] = '';
  */
 export default class DefaultMockup extends SvelteComponentTyped<DefaultMockupProps, DefaultMockupEvents, DefaultMockupSlots> {
 }

package/dist/device-mockups/Desktop.svelte

@@ -3,15 +3,18 @@ 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]";
+export let classInner = "";
+export let classBot = "";
+export let classBotUnder = "";
 </script>
 
 <div class={twMerge(div, $$props.class)}>
-  <div class={twMerge(inner, $$props.classInner)}>
+  <div class={twMerge(inner, classInner)}>
     <slot></slot>
   </div>
 </div>
-<div class={twMerge(bot, $$props.classBot)}></div>
-<div class={twMerge(botUnder, $$props.classBotUnder)}></div>
+<div class={twMerge(bot, classBot)}></div>
+<div class={twMerge(botUnder, classBotUnder)}></div>
 
 <!--
 @component
@@ -21,4 +24,7 @@ export let div = "relative mx-auto border-gray-800 dark:border-gray-800 bg-gray-
 @prop export let bot: $$Props['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]';
 @prop export let botUnder: $$Props['botUnder'] = '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: $$Props['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]';
+@prop export let classInner: $$Props['classInner'] = '';
+@prop export let classBot: $$Props['classBot'] = '';
+@prop export let classBotUnder: $$Props['classBotUnder'] = '';
 -->

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

@@ -5,6 +5,9 @@ declare const __propDef: {
         bot?: string;
         botUnder?: string;
         div?: string;
+        classInner?: string;
+        classBot?: string;
+        classBotUnder?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -23,6 +26,9 @@ export type DesktopSlots = typeof __propDef.slots;
  * @prop export let bot: $$Props['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]';
  * @prop export let botUnder: $$Props['botUnder'] = '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: $$Props['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]';
+ * @prop export let classInner: $$Props['classInner'] = '';
+ * @prop export let classBot: $$Props['classBot'] = '';
+ * @prop export let classBotUnder: $$Props['classBotUnder'] = '';
  */
 export default class Desktop extends SvelteComponentTyped<DesktopProps, DesktopEvents, DesktopSlots> {
 }

package/dist/device-mockups/Ios.svelte

@@ -5,14 +5,19 @@ export let top = "w-[148px] h-[18px] bg-gray-800 top-0 rounded-b-[1rem] left-1/2
 export let leftTop = "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";
+export let classTop = "";
+export let classLeftTop = "";
+export let classLeftBot = "";
+export let classRight = "";
+export let classSlot = "";
 </script>
 
 <div class={twMerge(div, $$props.class)}>
-  <div class={twMerge(top, $$props.classTop)}></div>
-  <div class={twMerge(leftTop, $$props.classLeftTop)}></div>
-  <div class={twMerge(leftBot, $$props.classLeftBot)}></div>
-  <div class={twMerge(right, $$props.classRight)}></div>
-  <div class={twMerge(slot, $$props.classSlot)}>
+  <div class={twMerge(top, classTop)}></div>
+  <div class={twMerge(leftTop, classLeftTop)}></div>
+  <div class={twMerge(leftBot, classLeftBot)}></div>
+  <div class={twMerge(right, classRight)}></div>
+  <div class={twMerge(slot, classSlot)}>
     <slot></slot>
   </div>
 </div>
@@ -27,4 +32,9 @@ export let right = "h-[64px] w-[3px] bg-gray-800 absolute -right-[17px] top-[142
 @prop export let leftTop: $$Props['leftTop'] = 'h-[46px] w-[3px] bg-gray-800 absolute -left-[17px] top-[124px] rounded-l-lg';
 @prop export let leftBot: $$Props['leftBot'] = 'h-[46px] w-[3px] bg-gray-800 absolute -left-[17px] top-[178px] rounded-l-lg';
 @prop export let right: $$Props['right'] = 'h-[64px] w-[3px] bg-gray-800 absolute -right-[17px] top-[142px] rounded-r-lg';
+@prop export let classTop: $$Props['classTop'] = '';
+@prop export let classLeftTop: $$Props['classLeftTop'] = '';
+@prop export let classLeftBot: $$Props['classLeftBot'] = '';
+@prop export let classRight: $$Props['classRight'] = '';
+@prop export let classSlot: $$Props['classSlot'] = '';
 -->