flowbite-svelte 0.47.1 → 0.47.2

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

@@ -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

@@ -22,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);
@@ -137,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;

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> {
 }

package/dist/device-mockups/Laptop.svelte

@@ -3,16 +3,19 @@ export let div = "relative mx-auto border-gray-800 dark:border-gray-800 bg-gray-
 export let inner = "rounded-lg overflow-hidden h-[156px] md:h-[278px] bg-white dark:bg-gray-800";
 export let bot = "relative mx-auto bg-gray-900 dark:bg-gray-700 rounded-b-xl rounded-t-sm h-[17px] max-w-[351px] md:h-[21px] md:max-w-[597px]";
 export let botCen = "absolute left-1/2 top-0 -translate-x-1/2 rounded-b-xl w-[56px] h-[5px] md:w-[96px] md:h-[8px] bg-gray-800";
+export let classInner = "";
+export let classBot = "";
+export let classBotCen = "";
 </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 class={twMerge(botCen, $$props.classBotCen)}></div>
+<div class={twMerge(bot, classBot)}>
+  <div class={twMerge(botCen, classBotCen)}></div>
 </div>
 
 <!--
@@ -23,4 +26,7 @@ export let botCen = "absolute left-1/2 top-0 -translate-x-1/2 rounded-b-xl w-[56
 @prop export let inner: $$Props['inner'] = 'rounded-lg overflow-hidden h-[156px] md:h-[278px] bg-white dark:bg-gray-800';
 @prop export let bot: $$Props['bot'] = 'relative mx-auto bg-gray-900 dark:bg-gray-700 rounded-b-xl rounded-t-sm h-[17px] max-w-[351px] md:h-[21px] md:max-w-[597px]';
 @prop export let botCen: $$Props['botCen'] = 'absolute left-1/2 top-0 -translate-x-1/2 rounded-b-xl w-[56px] h-[5px] md:w-[96px] md:h-[8px] bg-gray-800';
+@prop export let classInner: $$Props['classInner'] = '';
+@prop export let classBot: $$Props['classBot'] = '';
+@prop export let classBotCen: $$Props['classBotCen'] = '';
 -->

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

@@ -5,6 +5,9 @@ declare const __propDef: {
         inner?: string;
         bot?: string;
         botCen?: string;
+        classInner?: string;
+        classBot?: string;
+        classBotCen?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -23,6 +26,9 @@ export type LaptopSlots = typeof __propDef.slots;
  * @prop export let inner: $$Props['inner'] = 'rounded-lg overflow-hidden h-[156px] md:h-[278px] bg-white dark:bg-gray-800';
  * @prop export let bot: $$Props['bot'] = 'relative mx-auto bg-gray-900 dark:bg-gray-700 rounded-b-xl rounded-t-sm h-[17px] max-w-[351px] md:h-[21px] md:max-w-[597px]';
  * @prop export let botCen: $$Props['botCen'] = 'absolute left-1/2 top-0 -translate-x-1/2 rounded-b-xl w-[56px] h-[5px] md:w-[96px] md:h-[8px] bg-gray-800';
+ * @prop export let classInner: $$Props['classInner'] = '';
+ * @prop export let classBot: $$Props['classBot'] = '';
+ * @prop export let classBotCen: $$Props['classBotCen'] = '';
  */
 export default class Laptop extends SvelteComponentTyped<LaptopProps, LaptopEvents, LaptopSlots> {
 }

package/dist/device-mockups/Smartwatch.svelte

@@ -5,17 +5,22 @@ export let rightTop = "h-[41px] w-[6px] bg-gray-800 dark:bg-gray-800 absolute -r
 export let rightBot = "h-[32px] w-[6px] bg-gray-800 dark:bg-gray-800 absolute -right-[16px] top-[88px] rounded-r-lg";
 export let top = "relative mx-auto border-gray-900 dark:bg-gray-800 dark:border-gray-800 border-[10px] rounded-[2.5rem] h-[213px] w-[208px]";
 export let bot = "relative mx-auto bg-gray-800 dark:bg-gray-700 rounded-b-[2.5rem] h-[63px] max-w-[133px]";
+export let classTop = "";
+export let classRightTop = "";
+export let classRightBot = "";
+export let classSlot = "";
+export let classBot = "";
 </script>
 
 <div class={twMerge(div, $$props.class)}></div>
-<div class={twMerge(top, $$props.classTop)}>
-  <div class={twMerge(rightTop, $$props.classRightTop)}></div>
-  <div class={twMerge(rightBot, $$props.classRightBot)}></div>
-  <div class={twMerge(slot, $$props.classSlot)}>
+<div class={twMerge(top, classTop)}>
+  <div class={twMerge(rightTop, classRightTop)}></div>
+  <div class={twMerge(rightBot, classRightBot)}></div>
+  <div class={twMerge(slot, classSlot)}>
     <slot></slot>
   </div>
 </div>
-<div class={twMerge(bot, $$props.classBot)}></div>
+<div class={twMerge(bot, classBot)}></div>
 
 <!--
 @component
@@ -27,4 +32,9 @@ export let bot = "relative mx-auto bg-gray-800 dark:bg-gray-700 rounded-b-[2.5re
 @prop export let rightBot: $$Props['rightBot'] = 'h-[32px] w-[6px] bg-gray-800 dark:bg-gray-800 absolute -right-[16px] top-[88px] rounded-r-lg';
 @prop export let top: $$Props['top'] = 'relative mx-auto border-gray-900 dark:bg-gray-800 dark:border-gray-800 border-[10px] rounded-[2.5rem] h-[213px] w-[208px]';
 @prop export let bot: $$Props['bot'] = 'relative mx-auto bg-gray-800 dark:bg-gray-700 rounded-b-[2.5rem] h-[63px] max-w-[133px]';
+@prop export let classTop: $$Props['classTop'] = '';
+@prop export let classRightTop: $$Props['classRightTop'] = '';
+@prop export let classRightBot: $$Props['classRightBot'] = '';
+@prop export let classSlot: $$Props['classSlot'] = '';
+@prop export let classBot: $$Props['classBot'] = '';
 -->