flowbite-svelte 0.47.0 → 0.47.2

package/README.md

@@ -174,7 +174,7 @@ For full documentation, visit [flowbite-svelte.com](https://flowbite-svelte.com/
         </a>
     </td>
     <td width="33.3333%">
-        <a href="https://flowbite-svelte.com/docs/experimental/datepicker">
+        <a href="https://flowbite-svelte.com/docs/components/datepicker">
             <img alt="Svelte Datepicker" src="https://flowbite.s3.amazonaws.com/github/svelte/datepicker.jpg">
         </a>
     </td>

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/avatar/Avatar.svelte.d.ts

@@ -1,7 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
-import type { HTMLAttributes } from 'svelte/elements';
+import type { HTMLAttributes, HTMLAnchorAttributes } from 'svelte/elements';
 declare const __propDef: {
-    props: HTMLAttributes<HTMLAnchorElement | HTMLDivElement> & {
+    props: {
         href?: string;
         src?: string;
         rounded?: boolean;
@@ -10,7 +10,7 @@ declare const __propDef: {
         dot?: object | undefined;
         alt?: string;
         size?: "xs" | "sm" | "md" | "lg" | "xl" | "none";
-    };
+    } & (HTMLAnchorAttributes | HTMLAttributes<HTMLDivElement>);
     events: {
         [evt: string]: CustomEvent<any>;
     };
@@ -18,7 +18,8 @@ declare const __propDef: {
         default: {};
     };
 };
-export type AvatarProps = typeof __propDef.props;
+type AvatarProps_ = typeof __propDef.props;
+export { AvatarProps_ as AvatarProps };
 export type AvatarEvents = typeof __propDef.events;
 export type AvatarSlots = typeof __propDef.slots;
 /**
@@ -33,6 +34,5 @@ export type AvatarSlots = typeof __propDef.slots;
  * @prop export let alt: $$Props['alt'] = '';
  * @prop export let size: NonNullable<$$Props['size']> = 'md';
  */
-export default class Avatar extends SvelteComponentTyped<AvatarProps, AvatarEvents, AvatarSlots> {
+export default class Avatar extends SvelteComponentTyped<AvatarProps_, AvatarEvents, AvatarSlots> {
 }
-export {};

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

@@ -11,6 +11,8 @@ declare const __propDef: {
         bannerStatus?: boolean;
         transition?: (node: HTMLElement, params: any) => TransitionConfig;
         params?: object;
+        classDiv?: string;
+        classInner?: string;
     };
     events: {
         click: MouseEvent;
@@ -43,6 +45,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/datepicker/Datepicker.svelte

@@ -1,7 +1,6 @@
 <script>import { createEventDispatcher, onMount } from "svelte";
 import { fade } from "svelte/transition";
 import { Button } from "..";
-import { ChevronLeftOutline, ChevronRightOutline, CalendarMonthSolid } from "flowbite-svelte-icons";
 export let value = null;
 export let defaultDate = null;
 export let range = false;
@@ -23,7 +22,6 @@ const dispatch = createEventDispatcher();
 let isOpen = inline;
 let inputElement;
 let currentMonth = value || defaultDate || /* @__PURE__ */ new Date();
-currentMonth.setDate(1);
 let focusedDate = null;
 let calendarRef;
 $: daysInMonth = getDaysInMonth(currentMonth);
@@ -138,12 +136,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;
@@ -215,7 +217,9 @@ function handleApply() {
     <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" />
       <button type="button" class="absolute inset-y-0 right-0 flex items-center px-3 text-gray-500 dark:text-gray-400 focus:outline-none" on:click={() => (isOpen = !isOpen)} {disabled} aria-label={isOpen ? 'Close date picker' : 'Open date picker'}>
-        <CalendarMonthSolid class="w-5 h-5" />
+        <svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
+          <path d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z"></path>
+        </svg>
       </button>
     </div>
   {/if}
@@ -236,13 +240,13 @@ function handleApply() {
         {/if}
         <div class="flex items-center justify-between mb-4">
           <Button on:click={() => changeMonth(-1)} {color} size="sm" aria-label="Previous month">
-            <ChevronLeftOutline class="w-4 h-4" />
+            <svg class="w-3 h-3 rtl:rotate-180 text-white dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 5H1m0 0 4 4M1 5l4-4"></path></svg>
           </Button>
           <h3 class="text-lg font-semibold dark:text-white" aria-live="polite">
             {currentMonth.toLocaleString(locale, { month: 'long', year: 'numeric' })}
           </h3>
           <Button on:click={() => changeMonth(1)} {color} size="sm" aria-label="Next month">
-            <ChevronRightOutline class="w-4 h-4" />
+            <svg class="w-3 h-3 rtl:rotate-180 text-white dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"></path></svg>
           </Button>
         </div>
         <div class="grid grid-cols-7 gap-1" role="grid">

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'] = '';
 -->

package/dist/device-mockups/Ios.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 IosSlots = typeof __propDef.slots;
  * @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'] = '';
  */
 export default class Ios extends SvelteComponentTyped<IosProps, IosEvents, IosSlots> {
 }