flowbite-svelte 0.38.1 → 0.38.2

package/dist/device-mockup/DeviceMockup.svelte

@@ -1,4 +1,5 @@
-<script>import DefaultMockup from './DefaultMockup.svelte';
+<script>import { twJoin, twMerge } from 'tailwind-merge';
+import DefaultMockup from './DefaultMockup.svelte';
 import Ios from './Ios.svelte';
 import Android from './Android.svelte';
 import Tablet from './Tablet.svelte';
@@ -53,42 +54,104 @@ export let tabletLeftTop = 'h-[32px] w-[3px] bg-gray-800 dark:bg-gray-800 absolu
 export let tabletLeftMid = 'h-[46px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[124px] rounded-l-lg';
 export let tabletLeftBot = 'h-[46px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[178px] rounded-l-lg';
 export let tabletRight = 'h-[64px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -right-[17px] top-[142px] rounded-r-lg';
+// android
+let androidDivCls = twMerge(androidDiv, $$props.classAndroidDiv);
+let androidSlotCls = twMerge(androidSlot, $$props.classAndroidSlot);
+let androidTopCls = twMerge(androidTop, $$props.classAndroidTop);
+let androidLeftTopCls = twMerge(androidLeftTop, $$props.classAndroidLeftTop);
+let androidLeftMidCls = twMerge(androidLeftMid, $$props.classAndroidLeftMid);
+let androidLeftBotCls = twMerge(androidLeftBot, $$props.classAndroidLeftBot);
+let androidRightCls = twMerge(androidRight, $$props.classAndroidRight);
+//default
+let defaultDivCls = twMerge(defaultDiv, $$props.classDefaultDiv);
+let defaultSlotCls = twMerge(defaultSlot, $$props.classDefaultSlot);
+let defaultTopCls = twMerge(defaultTop, $$props.classDefaultTop);
+let defaultLeftTopCls = twMerge(defaultLeftTop, $$props.classDefaultLeftTop);
+let defaultLeftBotCls = twMerge(defaultLeftBot, $$props.classDefaultLeftBot);
+let defaultRightCls = twMerge(defaultRight, $$props.classDefaultRight);
+// desktop
+let desktopInnerCls = twMerge(desktopInner, $$props.classDesktopInner);
+let desktopBotCls = twMerge(desktopBot, $$props.classDesktopBot);
+let desktopBotUnderCls = twMerge(desktopBotUnder, $$props.classDesktopBotUnder);
+let destopDivCls = twMerge(destopDiv, $$props.classDestopDiv);
+let desktopSlotCls = twMerge(desktopSlot, $$props.classDesktopSlot);
+// ios
+let iosDivCls = twMerge(iosDiv, $$props.classIosDiv);
+let iosSlotCls = twMerge(iosSlot, $$props.classIosSlot);
+let iosTopCls = twMerge(iosTop, $$props.classIosTop);
+let iosLeftTopCls = twMerge(iosLeftTop, $$props.classIosLeftTop);
+let iosLeftBotCls = twMerge(iosLeftBot, $$props.classIosLeftBot);
+let iosRightCls = twMerge(iosRight, $$props.classIosRight);
+// laptop
+let laptopDivCls = twMerge(laptopDiv, $$props.classLaptopDiv);
+let laptopSlotCls = twMerge(laptopSlot, $$props.classLaptopSlot);
+let laptopInnerCls = twMerge(laptopInner, $$props.classLaptopInner);
+let laptopBotCls = twMerge(laptopBot, $$props.classLaptopBot);
+let laptopBotCenCls = twMerge(laptopBotCen, $$props.classLaptopBotCen);
+// smartwatch
+let smartwatchDivCls = twMerge(smartwatchDiv, $$props.classSmartwatchDiv);
+let smartwatchSlotCls = twMerge(smartwatchSlot, $$props.classSmartwatchSlot);
+let smartRightTopCls = twMerge(smartRightTop, $$props.classSmartRightTop);
+let smartRightBotCls = twMerge(smartRightBot, $$props.classSmartRightBot);
+let smartTopCls = twMerge(smartTop, $$props.classSmartTop);
+let smartBotCls = twMerge(smartBot, $$props.classSmartBot);
+let smartwatchInnerCls = twMerge(smartwatchInner, $$props.classSmartwatchInner);
+// tablet
+let tabletDivCls = twMerge(tabletDiv, $$props.classTabletDiv);
+let tabletSlotCls = twMerge(tabletSlot, $$props.classTabletSlot);
+let tabletLeftTopCls = twMerge(tabletLeftTop, $$props.classTabletLeftTop);
+let tabletLeftMidCls = twMerge(tabletLeftMid, $$props.classTabletLeftMid);
+let tabletLeftBotCls = twMerge(tabletLeftBot, $$props.classTabletLeftBot);
+let tabletRightCls = twMerge(tabletRight, $$props.classTabletRight);
 const divClasses = {
-    default: defaultDiv,
-    ios: iosDiv,
-    android: androidDiv,
-    tablet: tabletDiv,
-    laptop: laptopDiv,
-    desktop: destopDiv,
-    smartwatch: smartwatchDiv
+    default: defaultDivCls,
+    ios: iosDivCls,
+    android: androidDivCls,
+    tablet: tabletDivCls,
+    laptop: laptopDivCls,
+    desktop: destopDivCls,
+    smartwatch: smartwatchDivCls
 };
 const slotClasses = {
-    default: defaultSlot,
-    ios: iosSlot,
-    android: androidSlot,
-    tablet: tabletSlot,
-    laptop: laptopSlot,
-    desktop: desktopSlot,
-    smartwatch: smartwatchSlot
+    default: defaultSlotCls,
+    ios: iosSlotCls,
+    android: androidSlotCls,
+    tablet: tabletSlotCls,
+    laptop: laptopSlotCls,
+    desktop: desktopSlotCls,
+    smartwatch: smartwatchSlotCls
 };
 </script>
 
 <div class={divClasses[device]}>
   {#if device === 'default'}
-    <DefaultMockup {defaultTop} {defaultLeftTop} {defaultLeftBot} {defaultRight} />
+    <DefaultMockup
+      defaultTop={defaultTopCls}
+      defaultLeftTop={defaultLeftTopCls}
+      defaultLeftBot={defaultLeftBotCls}
+      defaultRight={defaultRightCls} />
   {:else if device === 'ios'}
-    <Ios {iosTop} {iosLeftTop} {iosLeftBot} {iosRight} />
+    <Ios iosTop={iosTopCls} iosLeftTop={iosLeftTopCls} iosLeftBot={iosLeftBotCls} iosRight={iosRightCls} />
   {:else if device === 'android'}
-    <Android {androidTop} {androidLeftTop} {androidLeftMid} {androidLeftBot} {androidRight} />
+    <Android
+      androidTop={androidTopCls}
+      androidLeftTop={androidLeftTopCls}
+      androidLeftMid={androidLeftMidCls}
+      androidLeftBot={androidLeftBotCls}
+      androidRight={androidRightCls} />
   {:else if device === 'tablet'}
-    <Tablet {tabletLeftTop} {tabletLeftMid} {tabletLeftBot} {tabletRight} />
+    <Tablet
+      tabletLeftTop={tabletLeftTopCls}
+      tabletLeftMid={tabletLeftMidCls}
+      tabletLeftBot={tabletLeftBotCls}
+      tabletRight={tabletRightCls} />
   {/if}
   {#if device === 'laptop'}
-    <div class={laptopInner}>
+    <div class={laptopInnerCls}>
       <slot />
     </div>
   {:else if device === 'desktop'}
-    <div class={desktopInner}>
+    <div class={desktopInnerCls}>
       <slot />
     </div>
   {:else if device === 'smartwatch'}
@@ -100,20 +163,20 @@ const slotClasses = {
   {/if}
 </div>
 {#if device === 'laptop'}
-  <div class={laptopBot}>
-    <div class={laptopBotCen} />
+  <div class={laptopBotCls}>
+    <div class={laptopBotCenCls} />
   </div>
 {:else if device === 'desktop'}
-  <div class={desktopBot} />
-  <div class={desktopBotUnder} />
+  <div class={desktopBotCls} />
+  <div class={desktopBotUnderCls} />
 {:else if device === 'smartwatch'}
-  <div class={smartTop}>
-    <Smartwatch {smartRightTop} {smartRightBot} />
-    <div class={smartwatchInner}>
+  <div class={smartTopCls}>
+    <Smartwatch smartRightTop={smartRightTopCls} smartRightBot={smartRightBotCls} />
+    <div class={smartwatchInnerCls}>
       <slot />
     </div>
   </div>
-  <div class={smartBot} />
+  <div class={smartBotCls} />
 {/if}
 
 <!--

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

@@ -1,6 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        [x: string]: any;
         device?: "default" | "ios" | "android" | "tablet" | "laptop" | "desktop" | "smartwatch" | undefined;
         androidDiv?: string | undefined;
         androidSlot?: string | undefined;

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

@@ -1 +1 @@
-{"version":3,"file":"DeviceMockup.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/device-mockup/DeviceMockup.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAmLD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAwC,CAAC;AACxD,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACvD,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACzD,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEvD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsHG;AACH,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,oBAAoB,CAAC,iBAAiB,EAAE,kBAAkB,EAAE,iBAAiB,CAAC;CACvH"}
+{"version":3,"file":"DeviceMockup.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/device-mockup/DeviceMockup.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA8OD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACvD,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACzD,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEvD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsHG;AACH,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,oBAAoB,CAAC,iBAAiB,EAAE,kBAAkB,EAAE,iBAAiB,CAAC;CACvH"}

package/dist/dropdowns/Dropdown.svelte

@@ -1,10 +1,12 @@
 <script>import { twMerge } from 'tailwind-merge';
 import Popper from '../utils/Popper.svelte';
 export let open = false;
-export let frameClass = '';
 export let headerClass = 'py-1 overflow-hidden rounded-t-lg';
 export let ulClass = 'py-1 w-44';
 export let footerClass = 'py-1 overflow-hidden rounded-b-lg';
+let headerCls = twMerge(headerClass, $$props.classHeader);
+let ulCls = twMerge(ulClass, $$props.classUl);
+let footerCls = twMerge(footerClass, $$props.classFooter);
 $: {
     // set default values
     $$restProps.arrow = $$restProps.arrow ?? false;
@@ -15,20 +17,20 @@ $: {
     $$restProps.rounded = $$restProps.rounded ?? true;
 }
 let popoverClass;
-$: popoverClass = twMerge('divide-y divide-gray-100 dark:divide-gray-600', frameClass);
+$: popoverClass = twMerge('divide-y divide-gray-100 dark:divide-gray-600', $$props.class);
 </script>
 
 <Popper activeContent {...$$restProps} class={popoverClass} on:show bind:open>
   {#if $$slots.header}
-    <div class={headerClass}>
+    <div class={headerCls}>
       <slot name="header" />
     </div>
   {/if}
-  <ul class={$$props.class ?? ulClass}>
+  <ul class={$$props.class ?? ulCls}>
     <slot />
   </ul>
   {#if $$slots.footer}
-    <div class={footerClass}>
+    <div class={footerCls}>
       <slot name="footer" />
     </div>
   {/if}
@@ -64,7 +66,6 @@ $: popoverClass = twMerge('divide-y divide-gray-100 dark:divide-gray-600', frame
   - Events
   ## Props
   @prop open: boolean = false;
-  @prop frameClass: string = '';
   @prop headerClass: string = 'py-1 overflow-hidden rounded-t-lg';
   @prop ulClass: string = 'py-1 w-44';
   @prop footerClass: string = 'py-1 overflow-hidden rounded-b-lg';

package/dist/dropdowns/Dropdown.svelte.d.ts

@@ -3,7 +3,6 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         open?: boolean | undefined;
-        frameClass?: string | undefined;
         headerClass?: string | undefined;
         ulClass?: string | undefined;
         footerClass?: string | undefined;
@@ -51,7 +50,6 @@ export type DropdownSlots = typeof __propDef.slots;
  * - Events
  * ## Props
  * @prop open: boolean = false;
- * @prop frameClass: string = '';
  * @prop headerClass: string = 'py-1 overflow-hidden rounded-t-lg';
  * @prop ulClass: string = 'py-1 w-44';
  * @prop footerClass: string = 'py-1 overflow-hidden rounded-b-lg';

package/dist/dropdowns/Dropdown.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/dropdowns/Dropdown.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAkDD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACnD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACrD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEnD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AACH,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,oBAAoB,CAAC,aAAa,EAAE,cAAc,EAAE,aAAa,CAAC;CACvG"}
+{"version":3,"file":"Dropdown.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/dropdowns/Dropdown.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAoDD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACnD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACrD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEnD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CG;AACH,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,oBAAoB,CAAC,aAAa,EAAE,cAAc,EAAE,aAAa,CAAC;CACvG"}

package/dist/footer/Footer.svelte

@@ -1,26 +1,10 @@
 <script>import { twMerge } from 'tailwind-merge';
 export let footerType = 'default';
-let styles = '';
-switch (footerType) {
-    case 'sitemap':
-        styles = 'bg-gray-800';
-        break;
-    case 'socialmedia':
-        styles = 'p-4 bg-white sm:p-6 dark:bg-gray-800';
-        break;
-    case 'logo':
-        styles = 'p-4 bg-white rounded-lg shadow md:px-6 md:py-8 dark:bg-gray-800';
-        break;
-    case 'default':
-        styles = 'p-4 bg-white rounded-lg shadow md:flex md:items-center md:justify-between md:p-6 dark:bg-gray-800';
-        break;
-}
-let footerClass = twMerge([styles, $$props.class]);
-console.log(footerClass);
+let footerClass = twMerge(footerType === 'sitemap' && 'bg-gray-800', footerType === 'socialmedia' && 'p-4 bg-white sm:p-6 dark:bg-gray-800', footerType === 'logo' && 'p-4 bg-white rounded-lg shadow md:px-6 md:py-8 dark:bg-gray-800', footerType === 'default' &&
+    'p-4 bg-white rounded-lg shadow md:flex md:items-center md:justify-between md:p-6 dark:bg-gray-800', $$props.class);
 </script>
-<footer
-  {...$$restProps}
-  class={footerClass}>
+
+<footer {...$$restProps} class={footerClass}>
   <slot />
 </footer>
 

package/dist/footer/Footer.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Footer.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/footer/Footer.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAqCD,QAAA,MAAM,SAAS;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACjD,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACnD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,oBAAoB,CAAC,WAAW,EAAE,YAAY,EAAE,WAAW,CAAC;CAC/F"}
+{"version":3,"file":"Footer.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/footer/Footer.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA0BD,QAAA,MAAM,SAAS;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACjD,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACnD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,oBAAoB,CAAC,WAAW,EAAE,YAAY,EAAE,WAAW,CAAC;CAC/F"}

package/dist/footer/FooterBrand.svelte

@@ -7,16 +7,19 @@ export let src = '';
 export let alt = '';
 export let name = '';
 export let target = undefined;
+let aCls = twMerge(aClass, $$props.classA);
+let spanCls = twMerge(spanClass, $$props.classSpan);
+let imgCls = twMerge(imgClass, $$props.classImg);
 </script>
 
 {#if href}
-  <a {...$$restProps} {href} {target} class={twMerge(aClass, $$props.class)}>
-    <img {src} class={imgClass} {alt} />
-    <span class={spanClass}>{name}</span>
+  <a {...$$restProps} {href} {target} class={aCls}>
+    <img {src} class={imgCls} {alt} />
+    <span class={spanCls}>{name}</span>
     <slot />
   </a>
 {:else}
-  <img {...$$restProps} {src} class={imgClass} {alt} />
+  <img {...$$restProps} {src} class={imgCls} {alt} />
 {/if}
 
 <!--

package/dist/footer/FooterBrand.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FooterBrand.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/footer/FooterBrand.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA6BD,QAAA,MAAM,SAAS;;;;;;;;;;iBAD8P,MAAM,GAAG,SAAS;;;;;;;;CACjN,CAAC;AAC/E,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACtD,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACxD,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEtD;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,OAAO,OAAO,WAAY,SAAQ,oBAAoB,CAAC,gBAAgB,EAAE,iBAAiB,EAAE,gBAAgB,CAAC;CACnH"}
+{"version":3,"file":"FooterBrand.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/footer/FooterBrand.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAiCD,QAAA,MAAM,SAAS;;;;;;;;;;iBAD8P,MAAM,GAAG,SAAS;;;;;;;;CACjN,CAAC;AAC/E,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACtD,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACxD,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEtD;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,OAAO,OAAO,WAAY,SAAQ,oBAAoB,CAAC,gBAAgB,EAAE,iBAAiB,EAAE,gBAAgB,CAAC;CACnH"}

package/dist/footer/FooterCopyright.svelte

@@ -6,12 +6,14 @@ export let href = '';
 export let by = '';
 export let target = undefined;
 export let copyrightMessage = 'All Rights Reserved.';
+let spanCls = twMerge(spanClass, $$props.classSpan);
+let aCls = twMerge(aClass, $$props.classA);
 </script>
 
-<span class={twMerge(spanClass, $$props.class)}>
+<span class={spanCls}>
   &copy; {year}
   {#if href}
-    <a {...$$restProps} {href} {target} class={aClass}>
+    <a {...$$restProps} {href} {target} class={aCls}>
       {by}
     </a>
   {:else}

package/dist/footer/FooterCopyright.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FooterCopyright.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/footer/FooterCopyright.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA8BD,QAAA,MAAM,SAAS;;;;;;;;iBAD+N,MAAM,GAAG,SAAS;;;;;;;CAClL,CAAC;AAC/E,MAAM,MAAM,oBAAoB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAC1D,MAAM,MAAM,qBAAqB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC5D,MAAM,MAAM,oBAAoB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAE1D;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,OAAO,OAAO,eAAgB,SAAQ,oBAAoB,CAAC,oBAAoB,EAAE,qBAAqB,EAAE,oBAAoB,CAAC;CACnI"}
+{"version":3,"file":"FooterCopyright.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/footer/FooterCopyright.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAiCD,QAAA,MAAM,SAAS;;;;;;;;iBAD+N,MAAM,GAAG,SAAS;;;;;;;CAClL,CAAC;AAC/E,MAAM,MAAM,oBAAoB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAC1D,MAAM,MAAM,qBAAqB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC5D,MAAM,MAAM,oBAAoB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAE1D;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,OAAO,OAAO,eAAgB,SAAQ,oBAAoB,CAAC,oBAAoB,EAAE,qBAAqB,EAAE,oBAAoB,CAAC;CACnI"}

package/dist/footer/FooterLink.svelte

@@ -3,10 +3,12 @@ export let liClass = 'mr-4 last:mr-0 md:mr-6';
 export let aClass = 'hover:underline';
 export let href = '';
 export let target = undefined;
+let liCls = twMerge(liClass, $$props.classLi);
+let aCls = twMerge(aClass, $$props.classA);
 </script>
 
-<li class={twMerge(liClass, $$props.class)}>
-  <a {...$$restProps} {href} class={aClass} {target}>
+<li class={liCls}>
+  <a {...$$restProps} {href} class={aCls} {target}>
     <slot />
   </a>
 </li>

package/dist/footer/FooterLink.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FooterLink.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/footer/FooterLink.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAqBD,QAAA,MAAM,SAAS;;;;;;iBADkI,MAAM,GAAG,SAAS;;;;;;;;CACrF,CAAC;AAC/E,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACrD,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACvD,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAErD;;;;;;;;GAQG;AACH,MAAM,CAAC,OAAO,OAAO,UAAW,SAAQ,oBAAoB,CAAC,eAAe,EAAE,gBAAgB,EAAE,eAAe,CAAC;CAC/G"}
+{"version":3,"file":"FooterLink.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/footer/FooterLink.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAwBD,QAAA,MAAM,SAAS;;;;;;iBADkI,MAAM,GAAG,SAAS;;;;;;;;CACrF,CAAC;AAC/E,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACrD,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACvD,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAErD;;;;;;;;GAQG;AACH,MAAM,CAAC,OAAO,OAAO,UAAW,SAAQ,oBAAoB,CAAC,eAAe,EAAE,gBAAgB,EAAE,eAAe,CAAC;CAC/G"}

package/dist/forms/Checkbox.svelte

@@ -66,7 +66,8 @@ function onChange() {
     {...$$restProps}
     class={twMerge(
       spacing,
-      inputClass(custom, color, true, background, $$slots.default || $$props.class))} /><slot />
+      inputClass(custom, color, true, background, $$slots.default || $$props.class)
+    )} /><slot />
 </Label>
 
 <!--

package/dist/forms/Checkbox.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/forms/Checkbox.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAGD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAmE9C,QAAA,MAAM,SAAS;;;;;;;;kBADqP,OAAO,GAAG,SAAS;;;;;;;;;;;;;;;;;;;;;CACzM,CAAC;AAC/E,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACnD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACrD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEnD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AACH,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,oBAAoB,CAAC,aAAa,EAAE,cAAc,EAAE,aAAa,CAAC;CACvG"}
+{"version":3,"file":"Checkbox.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/forms/Checkbox.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAGD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAoE9C,QAAA,MAAM,SAAS;;;;;;;;kBADqP,OAAO,GAAG,SAAS;;;;;;;;;;;;;;;;;;;;;CACzM,CAAC;AAC/E,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACnD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACrD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEnD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AACH,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,oBAAoB,CAAC,aAAa,EAAE,cAAc,EAAE,aAAa,CAAC;CACvG"}

package/dist/forms/FloatingLabelInput.svelte

@@ -71,7 +71,7 @@ function setType(node, _type) {
 }
 </script>
 
-<div class={divClasses[style]}>
+<div class={twMerge(divClasses[style], $$props.classDiv)}>
   <input
     {id}
     {...$$restProps}
@@ -94,7 +94,7 @@ function setType(node, _type) {
       inputClasses[style],
       inputColorClasses[color],
       inputSizes[style][size],
-      $$props.class
+      $$props.classInput
     )} />
 
   <label
@@ -103,7 +103,7 @@ function setType(node, _type) {
       labelClasses[style],
       labelColorClasses[color],
       labelSizes[style][size],
-      $$props.labelClass
+      $$props.classLabel
     )}>
     {label}
   </label>

package/dist/forms/Input.svelte

@@ -11,6 +11,7 @@ export let value = undefined;
 export let size = undefined;
 export let defaultClass = 'block w-full disabled:cursor-not-allowed disabled:opacity-50';
 export let color = 'base';
+export let floatClass = 'flex absolute inset-y-0 items-center text-gray-500 dark:text-gray-400';
 const borderClasses = {
     base: 'border-gray-300 dark:border-gray-600',
     tinted: 'border-gray-300 dark:border-gray-500',
@@ -50,7 +51,7 @@ $: {
     const _color = color === 'base' && background ? 'tinted' : color;
     inputClass = twMerge([
         defaultClass,
-        ($$slots.left && leftPadding[_size] || $$slots.right && rightPadding[_size]) || inputPadding[_size],
+        ($$slots.left && leftPadding[_size]) || ($$slots.right && rightPadding[_size]) || inputPadding[_size],
         ringClasses[color],
         colorClasses[_color],
         borderClasses[_color],
@@ -61,12 +62,13 @@ $: {
         $$props.class
     ]);
 }
-let floatClass = 'flex absolute inset-y-0 items-center text-gray-500 dark:text-gray-400';
 </script>
 
 <Wrapper class="relative w-full" show={$$slots.left || $$slots.right}>
   {#if $$slots.left}
-    <div class="{floatClass} left-0 pl-2.5 pointer-events-none"><slot name="left" /></div>
+    <div class="{twMerge(floatClass, $$props.classLeft)} left-0 pl-2.5 pointer-events-none">
+      <slot name="left" />
+    </div>
   {/if}
   <slot props={{ ...$$restProps, class: inputClass }}>
     <input
@@ -89,7 +91,7 @@ let floatClass = 'flex absolute inset-y-0 items-center text-gray-500 dark:text-g
       class={inputClass} />
   </slot>
   {#if $$slots.right}
-    <div class="{floatClass} right-0 pr-2.5"><slot name="right" /></div>
+    <div class="{twMerge(floatClass, $$props.classRight)} right-0 pr-2.5"><slot name="right" /></div>
   {/if}
 </Wrapper>
 

package/dist/forms/Input.svelte.d.ts

@@ -10,6 +10,7 @@ declare const __propDef: {
         size?: FormSizeType | undefined;
         defaultClass?: string | undefined;
         color?: "red" | "green" | "base" | undefined;
+        floatClass?: string | undefined;
     };
     events: {
         blur: FocusEvent;

package/dist/forms/Input.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Input.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/forms/Input.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AACC,OAAO,KAAK,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AACzD,wBAAgB,SAAS,CAAC,CAAC,EAAE,QAAQ,sBAEpC;AAMH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AA8F1C,QAAA,MAAM,SAAS;;;;gBADoH,GAAG;eAAS,YAAY,GAAG,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACzF,CAAC;AAC/E,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAChD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAClD,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEhD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwDG;AACH,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,oBAAoB,CAAC,UAAU,EAAE,WAAW,EAAE,UAAU,CAAC;CAC3F"}
+{"version":3,"file":"Input.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/forms/Input.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AACC,OAAO,KAAK,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AACzD,wBAAgB,SAAS,CAAC,CAAC,EAAE,QAAQ,sBAEpC;AAMH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAgG1C,QAAA,MAAM,SAAS;;;;gBAD6I,GAAG;eAAS,YAAY,GAAG,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAClH,CAAC;AAC/E,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAChD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAClD,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEhD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwDG;AACH,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,oBAAoB,CAAC,UAAU,EAAE,WAAW,EAAE,UAAU,CAAC;CAC3F"}

package/dist/forms/Radio.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/forms/Radio.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAgBC,eAAO,MAAM,UAAU,WAAY,OAAO,cAAc,MAAM,WACM,CAAC;AACrE,eAAO,IAAI,OAAO,EAAE,MAAe,CAAC;AAEpC,eAAO,MAAM,UAAU,WACb,OAAO,SACR,aAAa,WACX,OAAO,UACR,OAAO,cACH,MAAM,WAUjB,CAAC;AAIN,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AA4B9C,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAChD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAClD,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEhD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AACH,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,oBAAoB,CAAC,UAAU,EAAE,WAAW,EAAE,UAAU,CAAC;CAC3F"}
+{"version":3,"file":"Radio.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/forms/Radio.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAgBC,eAAO,MAAM,UAAU,WAAY,OAAO,cAAc,MAAM,WACQ,CAAC;AACvE,eAAO,IAAI,OAAO,EAAE,MAAe,CAAC;AAEpC,eAAO,MAAM,UAAU,WACb,OAAO,SACR,aAAa,WACX,OAAO,UACR,OAAO,cACH,MAAM,WAUjB,CAAC;AAIN,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AA4B9C,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAChD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAClD,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEhD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AACH,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,oBAAoB,CAAC,UAAU,EAAE,WAAW,EAAE,UAAU,CAAC;CAC3F"}

package/dist/forms/Select.svelte

@@ -13,7 +13,7 @@ const sizes = {
     lg: 'text-base py-3 px-4'
 };
 let selectClass;
-$: selectClass = twMerge(common, underline ? underlineClass : defaultClass, sizes[size], underline && '!px-0', $$restProps.class);
+$: selectClass = twMerge(common, underline ? underlineClass : defaultClass, sizes[size], underline && '!px-0', $$props.class);
 </script>
 
 <select {...$$restProps} bind:value class={selectClass} on:change on:contextmenu on:input>

package/dist/forms/Toggle.svelte

@@ -27,10 +27,18 @@ const sizes = {
     custom: customSize
 };
 let divClass;
-$: divClass = twMerge(common, background ? 'dark:bg-gray-600 dark:border-gray-500' : 'dark:bg-gray-700 dark:border-gray-600', colors[$$restProps.color ?? 'primary'], sizes[size], 'relative');
+$: divClass = twMerge(common, background ? 'dark:bg-gray-600 dark:border-gray-500' : 'dark:bg-gray-700 dark:border-gray-600', colors[$$restProps.color ?? 'primary'], sizes[size], 'relative', $$props.class);
 </script>
 
-<Checkbox custom {...$$restProps} class={$$props.class} {value} bind:checked bind:group on:click on:change>
+<Checkbox
+  custom
+  {...$$restProps}
+  class={$$props.classCheckbox}
+  {value}
+  bind:checked
+  bind:group
+  on:click
+  on:change>
   <span class={divClass} />
   <slot />
 </Checkbox>

package/dist/forms/Toggle.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Toggle.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/forms/Toggle.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA+DD,QAAA,MAAM,SAAS;;;;;;kBAD6M,OAAO,GAAG,SAAS;;;;;;;;;;;;CACjK,CAAC;AAC/E,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACjD,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACnD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEjD;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,oBAAoB,CAAC,WAAW,EAAE,YAAY,EAAE,WAAW,CAAC;CAC/F"}
+{"version":3,"file":"Toggle.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/forms/Toggle.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAgED,QAAA,MAAM,SAAS;;;;;;kBAD6M,OAAO,GAAG,SAAS;;;;;;;;;;;;CACjK,CAAC;AAC/E,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACjD,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACnD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEjD;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,oBAAoB,CAAC,WAAW,EAAE,YAAY,EAAE,WAAW,CAAC;CAC/F"}

package/dist/gallery/Gallery.svelte

@@ -11,7 +11,7 @@ function init(node) {
 <div {...$$restProps} class={divClass} use:init>
   {#each items as item}
     <slot {item}>
-      <div><img src={item.src} alt={item.alt} class={imgClass} /></div>
+      <div><img src={item.src} alt={item.alt} class={twMerge(imgClass, $$props.classImg)} /></div>
     </slot>
   {:else}
     <slot item={items[0]} />

package/dist/megamenu/MegaMenu.svelte

@@ -6,7 +6,7 @@ export let open = false;
 let wrapperClass;
 $: wrapperClass = twMerge(full && 'border-y w-full', $$props.class);
 let ulClass;
-$: ulClass = twMerge('grid grid-flow-row gap-y-4 md:gap-x-0 auto-col-max auto-row-max', full && $$slots.extra ? 'grid-cols-2' : 'grid-cols-2 md:grid-cols-3', 'text-sm font-medium', full && $$slots.extra && 'md:w-2/3');
+$: ulClass = twMerge('grid grid-flow-row gap-y-4 md:gap-x-0 auto-col-max auto-row-max', full && $$slots.extra ? 'grid-cols-2' : 'grid-cols-2 md:grid-cols-3', 'text-sm font-medium', full && $$slots.extra && 'md:w-2/3', $$props.classUl);
 </script>
 
 <Popper

package/dist/megamenu/MegaMenu.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MegaMenu.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/megamenu/MegaMenu.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAED,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AA+CzC,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACnD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACrD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEnD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AACH,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,oBAAoB,CAAC,aAAa,EAAE,cAAc,EAAE,aAAa,CAAC;CACvG"}
+{"version":3,"file":"MegaMenu.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/megamenu/MegaMenu.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAED,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAgDzC,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACnD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACrD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEnD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AACH,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,oBAAoB,CAAC,aAAa,EAAE,cAAc,EAAE,aAAa,CAAC;CACvG"}

package/dist/modals/Modal.svelte

@@ -9,7 +9,7 @@ export let size = 'md';
 export let placement = 'center';
 export let autoclose = false;
 export let permanent = false;
-export let backdropClasses = 'bg-gray-900 bg-opacity-50 dark:bg-opacity-80';
+export let backdropClass = 'bg-gray-900 bg-opacity-50 dark:bg-opacity-80';
 export let defaultClass = 'relative flex flex-col mx-auto';
 export let outsideclose = false;
 const dispatch = createEventDispatcher();
@@ -78,6 +78,7 @@ const isScrollable = (e) => [
     e.scrollWidth > e.clientWidth && ['scroll', 'auto'].indexOf(getComputedStyle(e).overflowX) >= 0,
     e.scrollHeight > e.clientHeight && ['scroll', 'auto'].indexOf(getComputedStyle(e).overflowY) >= 0
 ];
+let backdropCls = twMerge(backdropClass, $$props.classBackdrop);
 function handleKeys(e) {
     if (e.key === 'Escape' && !permanent)
         return hide(e);
@@ -86,7 +87,7 @@ function handleKeys(e) {
 
 {#if open}
   <!-- backdrop -->
-  <div class={twMerge('fixed inset-0 z-40', backdropClasses)} />
+  <div class={twMerge('fixed inset-0 z-40', backdropCls)} />
   <!-- dialog -->
   <div
     on:keydown={handleKeys}
@@ -162,7 +163,7 @@ function handleKeys(e) {
   @prop placement: ModalPlacementType = 'center';
   @prop autoclose: boolean = false;
   @prop permanent: boolean = false;
-  @prop backdropClasses: string = 'bg-gray-900 bg-opacity-50 dark:bg-opacity-80';
+  @prop backdropClass: string = 'bg-gray-900 bg-opacity-50 dark:bg-opacity-80';
   @prop defaultClass: string = 'relative flex flex-col mx-auto';
   @prop outsideclose: boolean = false; 
   ## Example

package/dist/modals/Modal.svelte.d.ts

@@ -248,7 +248,7 @@ declare const __propDef: {
         placement?: "top-left" | "top-center" | "top-right" | "center-left" | "center" | "center-right" | "bottom-left" | "bottom-center" | "bottom-right" | undefined;
         autoclose?: boolean | undefined;
         permanent?: boolean | undefined;
-        backdropClasses?: string | undefined;
+        backdropClass?: string | undefined;
         defaultClass?: string | undefined;
         outsideclose?: boolean | undefined;
     };
@@ -286,7 +286,7 @@ export type ModalSlots = typeof __propDef.slots;
  * @prop placement: ModalPlacementType = 'center';
  * @prop autoclose: boolean = false;
  * @prop permanent: boolean = false;
- * @prop backdropClasses: string = 'bg-gray-900 bg-opacity-50 dark:bg-opacity-80';
+ * @prop backdropClass: string = 'bg-gray-900 bg-opacity-50 dark:bg-opacity-80';
  * @prop defaultClass: string = 'relative flex flex-col mx-auto';
  * @prop outsideclose: boolean = false;
  * ## Example

package/dist/modals/Modal.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/modals/Modal.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAMD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAsK3C,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAwC,CAAC;AACxD,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAChD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAClD,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEhD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,oBAAoB,CAAC,UAAU,EAAE,WAAW,EAAE,UAAU,CAAC;CAC3F"}
+{"version":3,"file":"Modal.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/modals/Modal.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAMD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAwK3C,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAwC,CAAC;AACxD,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAChD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAClD,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEhD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,oBAAoB,CAAC,UAAU,EAAE,WAAW,EAAE,UAAU,CAAC;CAC3F"}

package/dist/navbar/NavDropdown.svelte

@@ -1,5 +1,6 @@
-<script>import { clickOutside } from '../utils/clickOutside';
-export let liButtonClass = 'flex items-center justify-between w-full';
+<script>import { twMerge } from 'tailwind-merge';
+import { clickOutside } from '../utils/clickOutside';
+export let liBtnClass = 'flex items-center justify-between w-full';
 export let name;
 export let child = [];
 export let dropdownDiv = '';
@@ -14,8 +15,8 @@ const handleDropdown = () => {
 let liClass = 'flex justify-center py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-primary-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700';
 </script>
 
-<li use:clickOutside={() => !hidden && handleDropdown()} class={liClass}>
-  <button on:click={() => handleDropdown()} class={liButtonClass}
+<li use:clickOutside={() => !hidden && handleDropdown()} class={twMerge(liClass, $$props.classLi)}>
+  <button on:click={() => handleDropdown()} class={twMerge(liBtnClass, $$props.classBtn)}
     >{name}
     <svg class="ml-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
       ><path
@@ -55,7 +56,7 @@ let liClass = 'flex justify-center py-2 pr-4 pl-3 text-gray-700 border-b border-
   @component
   [Go to Navbar](https://flowbite-svelte.com/docs/components/navbar)
   ## Props
-  @prop liButtonClass: string = 'flex items-center justify-between w-full';
+  @prop liBtnClass: string = 'flex items-center justify-between w-full';
   @prop name: string;
   @prop child: NavbarType[] = [];
   @prop dropdownDiv: string = '';