flowbite-svelte 0.38.1 → 0.38.3

package/dist/accordion/Accordion.svelte

@@ -6,13 +6,13 @@ import { twMerge } from 'tailwind-merge';
 import { setContext } from 'svelte';
 export let multiple = false;
 export let flush = false;
-export let activeClasses = '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 inactiveClasses = 'text-gray-500 dark:text-gray-400 hover:bg-gray-100 hover:dark:bg-gray-800';
+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';
 const ctx = {
     flush,
-    activeClasses,
-    inactiveClasses,
+    activeClass: twMerge(activeClass, $$props.classActive),
+    inactiveClass: twMerge(inactiveClass, $$props.classInactive),
     selected: multiple ? undefined : writable()
 };
 setContext('ctx', ctx);

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

@@ -2,9 +2,11 @@ import { SvelteComponentTyped } from "svelte";
 import { type Writable } from 'svelte/store';
 export interface AccordionCtxType {
     flush: boolean;
-    activeClasses: string;
-    inactiveClasses: string;
+    activeClass: string;
+    inactiveClass: string;
     selected?: Writable<object>;
+    classActive?: string;
+    classInactive?: string;
 }
 declare const __propDef: {
     props: {
@@ -251,9 +253,11 @@ declare const __propDef: {
         options?: object | undefined;
         multiple?: boolean | undefined;
         flush?: boolean | undefined;
-        activeClasses?: string | undefined;
-        inactiveClasses?: string | undefined;
+        activeClass?: string | undefined;
+        inactiveClass?: string | undefined;
         defaultClass?: string | undefined;
+        classActive?: string | undefined;
+        classInactive?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -1 +1 @@
-{"version":3,"file":"Accordion.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/accordion/Accordion.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AACC,OAAO,EAAY,KAAK,QAAQ,EAAE,MAAM,cAAc,CAAC;AAEvD,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,OAAO,CAAC;IACf,aAAa,EAAE,MAAM,CAAC;IACtB,eAAe,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC;CAC7B;AAkDH,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAwC,CAAC;AACxD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACpD,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACtD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEpD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,MAAM,CAAC,OAAO,OAAO,SAAU,SAAQ,oBAAoB,CAAC,cAAc,EAAE,eAAe,EAAE,cAAc,CAAC;CAC3G"}
+{"version":3,"file":"Accordion.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/accordion/Accordion.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AACC,OAAO,EAAY,KAAK,QAAQ,EAAE,MAAM,cAAc,CAAC;AAEvD,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,OAAO,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC;IAC5B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAoDH,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAwC,CAAC;AACxD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACpD,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACtD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEpD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,MAAM,CAAC,OAAO,OAAO,SAAU,SAAQ,oBAAoB,CAAC,cAAc,EAAE,eAAe,EAAE,cAAc,CAAC;CAC3G"}

package/dist/accordion/AccordionItem.svelte

@@ -5,8 +5,8 @@ import { getContext, onMount } from 'svelte';
 import { writable } from 'svelte/store';
 import { fade, blur, fly, slide } from 'svelte/transition';
 export let open = false;
-export let activeClasses = undefined;
-export let inactiveClasses = undefined;
+export let activeClass = undefined;
+export let inactiveClass = undefined;
 export let defaultClass = 'flex items-center justify-between w-full font-medium text-left group-first:rounded-t-xl border-gray-200 dark:border-gray-700';
 export let transitionType = 'slide';
 export let transitionParams = {};
@@ -18,6 +18,10 @@ export let borderClass = 'border-l border-r group-first:border-t';
 export let borderOpenClass = 'border-l border-r';
 export let borderBottomClass = 'border-b';
 export let borderSharedClass = 'border-gray-200 dark:border-gray-700';
+export let classActive = undefined;
+export let classInactive = undefined;
+let activeCls = twMerge(activeClass, classActive);
+let inactiveCls = twMerge(inactiveClass, classInactive);
 // make a custom transition function that returns the desired transition
 const multiple = (node, params) => {
     switch (transitionType) {
@@ -45,7 +49,16 @@ onMount(() => {
 });
 const handleToggle = (_) => selected.set(open ? {} : self);
 let buttonClass;
-$: buttonClass = twMerge(defaultClass, ctx.flush || borderClass, borderBottomClass, borderSharedClass, ctx.flush ? paddingFlush : paddingDefault, open && (ctx.flush ? textFlushOpen : activeClasses || ctx.activeClasses), !open && (ctx.flush ? textFlushDefault : inactiveClasses || ctx.inactiveClasses), $$props.class);
+$: buttonClass = twMerge([
+    defaultClass,
+    ctx.flush || borderClass,
+    borderBottomClass,
+    borderSharedClass,
+    ctx.flush ? paddingFlush : paddingDefault,
+    open && (ctx.flush ? textFlushOpen : activeCls || ctx.activeClass),
+    !open && (ctx.flush ? textFlushDefault : inactiveCls || ctx.inactiveClass),
+    $$props.class
+]);
 </script>
 
 <h2 class="group">
@@ -82,8 +95,8 @@ $: buttonClass = twMerge(defaultClass, ctx.flush || borderClass, borderBottomCla
 
   ## Props
   @prop open: boolean = false;
-  @prop activeClasses: string | undefined = undefined;
-  @prop inactiveClasses: string | undefined = undefined;
+  @prop activeClass: string | undefined = undefined;
+  @prop inactiveClass: string | undefined = undefined;
   @prop defaultClass: string = 'flex items-center justify-between w-full font-medium text-left group-first:rounded-t-xl border-gray-200 dark:border-gray-700';
   @prop transitionType: TransitionTypes = 'slide';
   @prop transitionParams: TransitionParamTypes = {};

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

@@ -4,8 +4,8 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         open?: boolean | undefined;
-        activeClasses?: string | undefined;
-        inactiveClasses?: string | undefined;
+        activeClass?: string | undefined;
+        inactiveClass?: string | undefined;
         defaultClass?: string | undefined;
         transitionType?: TransitionTypes | undefined;
         transitionParams?: TransitionParamTypes | undefined;
@@ -17,6 +17,8 @@ declare const __propDef: {
         borderOpenClass?: string | undefined;
         borderBottomClass?: string | undefined;
         borderSharedClass?: string | undefined;
+        classActive?: string | undefined;
+        classInactive?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -43,8 +45,8 @@ export type AccordionItemSlots = typeof __propDef.slots;
  *
  * ## Props
  * @prop open: boolean = false;
- * @prop activeClasses: string | undefined = undefined;
- * @prop inactiveClasses: string | undefined = undefined;
+ * @prop activeClass: string | undefined = undefined;
+ * @prop inactiveClass: string | undefined = undefined;
  * @prop defaultClass: string = 'flex items-center justify-between w-full font-medium text-left group-first:rounded-t-xl border-gray-200 dark:border-gray-700';
  * @prop transitionType: TransitionTypes = 'slide';
  * @prop transitionParams: TransitionParamTypes = {};

package/dist/accordion/AccordionItem.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/accordion/AccordionItem.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAOD,OAAO,KAAK,EAAE,eAAe,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAkGtE,QAAA,MAAM,SAAS;;;;wBADqe,MAAM,GAAG,SAAS;0BAAoB,MAAM,GAAG,SAAS;;;;;;;;;;;;;;;;;;;;;;CAC9d,CAAC;AAC/E,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACxD,MAAM,MAAM,mBAAmB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC1D,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAExD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,CAAC,OAAO,OAAO,aAAc,SAAQ,oBAAoB,CAAC,kBAAkB,EAAE,mBAAmB,EAAE,kBAAkB,CAAC;CAC3H"}
+{"version":3,"file":"AccordionItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/accordion/AccordionItem.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAOD,OAAO,KAAK,EAAE,eAAe,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAwGtE,QAAA,MAAM,SAAS;;;;sBADqhB,MAAM,GAAG,SAAS;wBAAkB,MAAM,GAAG,SAAS;;;;;;;;;;;;sBAA6T,MAAM,GAAG,SAAS;wBAAkB,MAAM,GAAG,SAAS;;;;;;;;;;;CAC/3B,CAAC;AAC/E,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACxD,MAAM,MAAM,mBAAmB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC1D,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAExD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,CAAC,OAAO,OAAO,aAAc,SAAQ,oBAAoB,CAAC,kBAAkB,EAAE,mBAAmB,EAAE,kBAAkB,CAAC;CAC3H"}

package/dist/alerts/Alert.svelte

@@ -91,4 +91,4 @@ $: {
     <span class="font-medium">Danger alert!</span> Change a few things up and try submitting again.
   </Alert>
   ```
--->
+-->

package/dist/alerts/Alert.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/alerts/Alert.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAoED,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,oBAAoB,CAAC,UAAU,EAAE,WAAW,EAAE,UAAU,CAAC;CAC3F"}
+{"version":3,"file":"Alert.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/alerts/Alert.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAiED,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,oBAAoB,CAAC,UAAU,EAAE,WAAW,EAAE,UAAU,CAAC;CAC3F"}

package/dist/avatar/Avatar.svelte

@@ -30,7 +30,7 @@ $: avatarClass = twMerge(rounded ? 'rounded' : 'rounded-full', border && 'p-1 ri
     {#if src}
       <img {alt} {src} class={rounded ? 'rounded' : 'rounded-full'} />
     {:else}
-      <slot><AvatarPlaceholder {rounded} /></slot>
+      <slot><AvatarPlaceholder {rounded} class={twMerge($$props.classPlaceholder)} /></slot>
     {/if}
     {#if dot}
       <Indicator border offset={rounded} {...dot} />

package/dist/avatar/Placeholder.svelte

@@ -1,11 +1,9 @@
-<script>export let rounded = false;
+<script>import { twMerge } from 'tailwind-merge';
+export let rounded = false;
+let svgClass = twMerge('text-gray-400 bg-gray-100 dark:bg-gray-600', rounded ? 'rounded' : 'rounded-full', $$props.class);
 </script>
 
-<svg
-  class="text-gray-400 bg-gray-100 dark:bg-gray-600 {rounded ? 'rounded' : 'rounded-full'}"
-  fill="currentColor"
-  viewBox="0 0 16 16"
-  xmlns="http://www.w3.org/2000/svg">
+<svg class={svgClass} fill="currentColor" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
   <path fill-rule="evenodd" d="M8 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd" />
 </svg>
 

package/dist/avatar/Placeholder.svelte.d.ts

@@ -1,6 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        [x: string]: any;
         rounded?: boolean | undefined;
     };
     events: {

package/dist/avatar/Placeholder.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Placeholder.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/avatar/Placeholder.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAaD,QAAA,MAAM,SAAS;;;;;;;;CAAwC,CAAC;AACxD,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;;;;GAIG;AACH,MAAM,CAAC,OAAO,OAAO,WAAY,SAAQ,oBAAoB,CAAC,gBAAgB,EAAE,iBAAiB,EAAE,gBAAgB,CAAC;CACnH"}
+{"version":3,"file":"Placeholder.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/avatar/Placeholder.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAqBD,QAAA,MAAM,SAAS;;;;;;;;;CAA+D,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;;;;GAIG;AACH,MAAM,CAAC,OAAO,OAAO,WAAY,SAAQ,oBAAoB,CAAC,gBAAgB,EAAE,iBAAiB,EAAE,gBAAgB,CAAC;CACnH"}

package/dist/badges/Badge.svelte.d.ts

@@ -2,7 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        color?: "red" | "yellow" | "green" | "indigo" | "purple" | "pink" | "blue" | "dark" | "none" | undefined;
+        color?: "red" | "yellow" | "green" | "indigo" | "purple" | "pink" | "blue" | "dark" | "primary" | "none" | undefined;
         large?: boolean | undefined;
         border?: boolean | undefined;
         href?: string | undefined;

package/dist/badges/Badge.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/badges/Badge.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAmID,QAAA,MAAM,SAAS;;;;;;eADsQ,MAAM,GAAG,SAAS;;;;;;;;;;;;;;;;CACzN,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,oBAAoB,CAAC,UAAU,EAAE,WAAW,EAAE,UAAU,CAAC;CAC3F"}
+{"version":3,"file":"Badge.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/badges/Badge.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAqJD,QAAA,MAAM,SAAS;;;;;;eADyC,MAAM,GAAG,SAAS;;;;;;;;;;;;;;;;CACI,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,oBAAoB,CAAC,UAAU,EAAE,WAAW,EAAE,UAAU,CAAC;CAC3F"}

package/dist/banner/Banner.svelte

@@ -4,26 +4,24 @@ export let id = 'sticky-banner';
 export let position = 'sticky';
 export let dismissable = true;
 export let bannerType = 'default';
-export let divDefault = 'z-10 flex justify-between p-4 dark:bg-gray-700 dark:border-gray-600';
-export let insideDiv = 'flex';
+export let divClass = 'z-10 flex justify-between p-4 dark:bg-gray-700 dark:border-gray-600';
+export let innerClass = 'flex';
 const divClasses = {
     default: 'top-0 left-0 w-full border-b border-gray-200 bg-gray-50',
     bottom: 'bottom-0 left-0 w-full border-t border-gray-200 bg-gray-50',
     cta: 'flex-col md:flex-row  w-[calc(100%-2rem)] -translate-x-1/2 bg-white border border-gray-100 rounded-lg shadow-sm lg:max-w-7xl left-1/2 top-6',
     signup: 'top-0 left-0 w-full border-b border-gray-200 bg-gray-50',
-    info: 'top-0 left-0 flex-col w-full border-b border-gray-200 md:flex-row bg-gray-50',
-    custom: ''
+    info: 'top-0 left-0 flex-col w-full border-b border-gray-200 md:flex-row bg-gray-50'
 };
 const insideDivClasses = {
     default: 'items-center mx-auto',
     bottom: 'items-center mx-auto',
     cta: 'flex-col items-start mb-3 mr-4 md:items-center md:flex-row md:mb-0',
     signup: 'items-center flex-shrink-0 w-full mx-auto sm:w-auto',
-    info: 'items-center flex-shrink-0',
-    custom: ''
+    info: 'items-center flex-shrink-0'
 };
-$: divClass = twMerge(position, divDefault, divClasses[bannerType], $$props.outerDiv);
-$: div2Class = twMerge(insideDiv, insideDivClasses[bannerType], $$props.innerDiv);
+$: divClass = twMerge(position, divClass, divClasses[bannerType], $$props.classDiv);
+$: div2Class = twMerge(innerClass, insideDivClasses[bannerType], $$props.classInner);
 let show = true;
 $: handleHide = () => {
     show = !show;
@@ -69,8 +67,8 @@ $: handleHide = () => {
   @prop id: string = 'sticky-banner';
   @prop position: 'static' | 'fixed' | 'absolute' | 'relative' | 'sticky' = 'sticky';
   @prop dismissable: boolean = true;
-  @prop bannerType: 'default' | 'bottom' | 'cta' | 'signup' | 'info' | 'custom' = 'default';
-  @prop divDefault: string = 'z-10 flex justify-between p-4 dark:bg-gray-700 dark:border-gray-600';
+  @prop bannerType: 'default' | 'bottom' | 'cta' | 'signup' | 'info' = 'default';
+  @prop divClass: string = 'z-10 flex justify-between p-4 dark:bg-gray-700 dark:border-gray-600';
   @prop insideDiv: string = 'flex';
   ## Event
   - on:click

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

@@ -5,9 +5,9 @@ declare const __propDef: {
         id?: string | undefined;
         position?: "static" | "fixed" | "absolute" | "relative" | "sticky" | undefined;
         dismissable?: boolean | undefined;
-        bannerType?: "default" | "custom" | "bottom" | "cta" | "signup" | "info" | undefined;
-        divDefault?: string | undefined;
-        insideDiv?: string | undefined;
+        bannerType?: "default" | "bottom" | "cta" | "signup" | "info" | undefined;
+        divClass?: string | undefined;
+        innerClass?: string | undefined;
     };
     events: {
         click: MouseEvent;
@@ -42,8 +42,8 @@ export type BannerSlots = typeof __propDef.slots;
  * @prop id: string = 'sticky-banner';
  * @prop position: 'static' | 'fixed' | 'absolute' | 'relative' | 'sticky' = 'sticky';
  * @prop dismissable: boolean = true;
- * @prop bannerType: 'default' | 'bottom' | 'cta' | 'signup' | 'info' | 'custom' = 'default';
- * @prop divDefault: string = 'z-10 flex justify-between p-4 dark:bg-gray-700 dark:border-gray-600';
+ * @prop bannerType: 'default' | 'bottom' | 'cta' | 'signup' | 'info' = 'default';
+ * @prop divClass: string = 'z-10 flex justify-between p-4 dark:bg-gray-700 dark:border-gray-600';
  * @prop insideDiv: string = 'flex';
  * ## Event
  * - on:click

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

@@ -1 +1 @@
-{"version":3,"file":"Banner.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/banner/Banner.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA2DD,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AACH,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,oBAAoB,CAAC,WAAW,EAAE,YAAY,EAAE,WAAW,CAAC;CAC/F"}
+{"version":3,"file":"Banner.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/banner/Banner.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAyDD,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AACH,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,oBAAoB,CAAC,WAAW,EAAE,YAAY,EAAE,WAAW,CAAC;CAC/F"}

package/dist/bottom-nav/BottomNav.svelte

@@ -1,12 +1,16 @@
+<script context="module">export {};
+</script>
+
 <script>import { setContext } from 'svelte';
 import { twMerge } from 'tailwind-merge';
 export let position = 'fixed';
 export let navType = 'default';
-export let outerDefault = 'w-full z-50 border-gray-200 dark:bg-gray-700 dark:border-gray-600';
-export let innerDefault = 'grid h-full max-w-lg mx-auto';
-export let outerCustom = '';
-export let innerCustom = '';
+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';
+let activeCls = twMerge(activeClass, $$props.classActive);
 setContext('navType', navType);
+setContext('bottomNavType', { activeClass: activeCls });
 const outerDivClasses = {
     default: 'bottom-0 left-0 h-16 bg-white border-t',
     border: 'bottom-0 left-0 h-16 bg-white border-t',
@@ -15,8 +19,7 @@ const outerDivClasses = {
     group: 'bottom-0 -translate-x-1/2 bg-white border-t left-1/2',
     card: 'bottom-0 left-0 h-16 bg-white border-t',
     meeting: 'bottom-0 left-0 grid h-16 grid-cols-1 px-8 bg-white border-t md:grid-cols-3',
-    video: 'bottom-0 left-0 grid h-24 grid-cols-1 px-8 bg-white border-t md:grid-cols-3',
-    custom: outerCustom
+    video: 'bottom-0 left-0 grid h-24 grid-cols-1 px-8 bg-white border-t md:grid-cols-3'
 };
 const innerDivClasses = {
     default: '',
@@ -26,16 +29,15 @@ const innerDivClasses = {
     group: '',
     card: '',
     meeting: 'flex items-center justify-center mx-auto',
-    video: 'flex items-center w-full',
-    custom: innerCustom
+    video: 'flex items-center w-full'
 };
-$: outerClass = twMerge(position, outerDefault, outerDivClasses[navType], $$props.outerDiv);
-$: innerClass = twMerge(innerDefault, innerDivClasses[navType], $$props.innerDiv);
+$: outerCls = twMerge(position, outerClass, outerDivClasses[navType], $$props.classOuter);
+$: innerCls = twMerge(innerClass, innerDivClasses[navType], $$props.classInner);
 </script>
 
-<div {...$$restProps} class={outerClass}>
+<div {...$$restProps} class={outerCls}>
   <slot name="header" />
-  <div class={innerClass}>
+  <div class={innerCls}>
     <slot />
   </div>
 </div>
@@ -53,8 +55,8 @@ $: innerClass = twMerge(innerDefault, innerDivClasses[navType], $$props.innerDiv
   ## Props
   @prop position: 'static' | 'fixed' | 'absolute' | 'relative' | 'sticky' = 'fixed';
   @prop navType:| 'default' | 'border' | 'application' | 'pagination' | 'group' | 'card' | 'meeting' | 'video' | 'custom' = 'default';
-  @prop outerDefault: string = 'w-full z-50 border-gray-200 dark:bg-gray-700 dark:border-gray-600';
-  @prop innerDefault: string = 'grid h-full max-w-lg mx-auto';
+  @prop outerClass: string = 'w-full z-50 border-gray-200 dark:bg-gray-700 dark:border-gray-600';
+  @prop innerClass: string = 'grid h-full max-w-lg mx-auto';
   @prop outerCustom: string = '';
   @prop innerCustom: string = '';
   ## Example

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

@@ -1,13 +1,15 @@
 import { SvelteComponentTyped } from "svelte";
+export type BottomNavLiType = {
+    activeClass: string;
+};
 declare const __propDef: {
     props: {
         [x: string]: any;
         position?: "static" | "fixed" | "absolute" | "relative" | "sticky" | undefined;
-        navType?: "default" | "border" | "application" | "group" | "custom" | "pagination" | "card" | "meeting" | "video" | undefined;
-        outerDefault?: string | undefined;
-        innerDefault?: string | undefined;
-        outerCustom?: string | undefined;
-        innerCustom?: string | undefined;
+        navType?: "default" | "border" | "application" | "group" | "pagination" | "card" | "meeting" | "video" | undefined;
+        outerClass?: string | undefined;
+        innerClass?: string | undefined;
+        activeClass?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -32,8 +34,8 @@ export type BottomNavSlots = typeof __propDef.slots;
  * ## Props
  * @prop position: 'static' | 'fixed' | 'absolute' | 'relative' | 'sticky' = 'fixed';
  * @prop navType:| 'default' | 'border' | 'application' | 'pagination' | 'group' | 'card' | 'meeting' | 'video' | 'custom' = 'default';
- * @prop outerDefault: string = 'w-full z-50 border-gray-200 dark:bg-gray-700 dark:border-gray-600';
- * @prop innerDefault: string = 'grid h-full max-w-lg mx-auto';
+ * @prop outerClass: string = 'w-full z-50 border-gray-200 dark:bg-gray-700 dark:border-gray-600';
+ * @prop innerClass: string = 'grid h-full max-w-lg mx-auto';
  * @prop outerCustom: string = '';
  * @prop innerCustom: string = '';
  * ## Example

package/dist/bottom-nav/BottomNav.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BottomNav.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/bottom-nav/BottomNav.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA0ED,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACpD,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACtD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEpD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CG;AACH,MAAM,CAAC,OAAO,OAAO,SAAU,SAAQ,oBAAoB,CAAC,cAAc,EAAE,eAAe,EAAE,cAAc,CAAC;CAC3G"}
+{"version":3,"file":"BottomNav.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/bottom-nav/BottomNav.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AACC,MAAM,MAAM,eAAe,GAAG;IAC5B,WAAW,EAAE,MAAM,CAAC;CACrB,CAAC;AA2EJ,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACpD,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACtD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEpD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CG;AACH,MAAM,CAAC,OAAO,OAAO,SAAU,SAAQ,oBAAoB,CAAC,cAAc,EAAE,eAAe,EAAE,cAAc,CAAC;CAC3G"}

package/dist/bottom-nav/BottomNavHeader.svelte

@@ -1,9 +1,10 @@
-<script>export let outerClass = 'w-full';
+<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';
 </script>
 
-<div class={outerClass} {...$$restProps}>
-  <div class={innerClass} role="group">
+<div class={twMerge(outerClass, $$props.classOuter)} {...$$restProps}>
+  <div class={twMerge(innerClass, $$props.classInner)} role="group">
     <slot />
   </div>
 </div>

package/dist/bottom-nav/BottomNavHeader.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BottomNavHeader.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/bottom-nav/BottomNavHeader.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAiBD,QAAA,MAAM,SAAS;;;;;;;;;;;;CAA+D,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;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,CAAC,OAAO,OAAO,eAAgB,SAAQ,oBAAoB,CAAC,oBAAoB,EAAE,qBAAqB,EAAE,oBAAoB,CAAC;CACnI"}
+{"version":3,"file":"BottomNavHeader.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/bottom-nav/BottomNavHeader.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAoBD,QAAA,MAAM,SAAS;;;;;;;;;;;;CAA+D,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;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,CAAC,OAAO,OAAO,eAAgB,SAAQ,oBAAoB,CAAC,oBAAoB,EAAE,qBAAqB,EAAE,oBAAoB,CAAC;CACnI"}

package/dist/bottom-nav/BottomNavHeaderItem.svelte

@@ -1,11 +1,12 @@
-<script>export let itemName = '';
+<script>import { twMerge } from 'tailwind-merge';
+export let itemName = '';
 export let active = false;
 export let defaultClass = 'px-5 py-1.5 text-xs font-medium text-gray-900 hover:bg-gray-200 dark:text-white dark:hover:bg-gray-700 rounded-lg';
 export let activeClass = 'px-5 py-1.5 text-xs font-medium text-white bg-gray-900 dark:bg-gray-300 dark:text-gray-900 rounded-lg';
 $: btnClass = active ? activeClass : defaultClass;
 </script>
 
-<button class={btnClass} {...$$restProps}>
+<button class={twMerge(btnClass, $$props.class)} {...$$restProps}>
   {itemName}
 </button>
 

package/dist/bottom-nav/BottomNavHeaderItem.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BottomNavHeaderItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/bottom-nav/BottomNavHeaderItem.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAoBD,QAAA,MAAM,SAAS;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,wBAAwB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAC9D,MAAM,MAAM,yBAAyB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAChE,MAAM,MAAM,wBAAwB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAE9D;;;;;;;;GAQG;AACH,MAAM,CAAC,OAAO,OAAO,mBAAoB,SAAQ,oBAAoB,CAAC,wBAAwB,EAAE,yBAAyB,EAAE,wBAAwB,CAAC;CACnJ"}
+{"version":3,"file":"BottomNavHeaderItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/bottom-nav/BottomNavHeaderItem.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAuBD,QAAA,MAAM,SAAS;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,wBAAwB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAC9D,MAAM,MAAM,yBAAyB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAChE,MAAM,MAAM,wBAAwB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAE9D;;;;;;;;GAQG;AACH,MAAM,CAAC,OAAO,OAAO,mBAAoB,SAAQ,oBAAoB,CAAC,wBAAwB,EAAE,yBAAyB,EAAE,wBAAwB,CAAC;CACnJ"}

package/dist/bottom-nav/BottomNavItem.svelte

@@ -1,13 +1,11 @@
 <script>import { getContext } from 'svelte';
 import { twMerge } from 'tailwind-merge';
 export let btnName = '';
-export let appBtnPosition = 'custom';
-export let btnDefault = '';
-export let spanDefault = '';
-export let btnCustom = '';
-export let spanCustom = '';
-export let appCustom = '';
+export let appBtnPosition = 'middle';
+export let activeClass = undefined;
+export let active = false;
 const navType = getContext('navType');
+const context = getContext('bottomNavType') ?? {};
 const btnClasses = {
     default: 'inline-flex flex-col items-center justify-center px-5 hover:bg-gray-50 dark:hover:bg-gray-800 group',
     border: 'inline-flex flex-col items-center justify-center px-5 border-gray-200 border-x hover:bg-gray-50 dark:hover:bg-gray-800 group dark:border-gray-600',
@@ -16,8 +14,7 @@ const btnClasses = {
     group: 'inline-flex flex-col items-center justify-center p-4 hover:bg-gray-50 dark:hover:bg-gray-800 group',
     card: 'inline-flex flex-col items-center justify-center px-5 hover:bg-gray-50 dark:hover:bg-gray-800 group',
     meeting: '',
-    video: '',
-    custom: btnCustom
+    video: ''
 };
 const spanClasses = {
     default: 'text-sm text-gray-500 dark:text-gray-400 group-hover:text-primary-600 dark:group-hover:text-primary-500',
@@ -27,17 +24,17 @@ const spanClasses = {
     group: 'sr-only',
     card: 'text-sm text-gray-500 dark:text-gray-400 group-hover:text-primary-600 dark:group-hover:text-primary-500',
     meeting: '',
-    video: '',
-    custom: spanCustom
+    video: ''
 };
 const appBtnClasses = {
     left: 'inline-flex flex-col items-center justify-center px-5 rounded-l-full hover:bg-gray-50 dark:hover:bg-gray-800 group',
     middle: 'inline-flex flex-col items-center justify-center px-5 hover:bg-gray-50 dark:hover:bg-gray-800 group',
-    right: 'inline-flex flex-col items-center justify-center px-5 rounded-r-full hover:bg-gray-50 dark:hover:bg-gray-800 group',
-    custom: appCustom
+    right: 'inline-flex flex-col items-center justify-center px-5 rounded-r-full hover:bg-gray-50 dark:hover:bg-gray-800 group'
 };
-$: btnClass = twMerge(btnDefault, btnClasses[navType], appBtnClasses[appBtnPosition], $$props.btnClass);
-$: spanClass = twMerge(spanDefault, spanClasses[navType], $$props.spanClass);
+let btnClass;
+$: btnClass = twMerge(btnClasses[navType], appBtnClasses[appBtnPosition], active && (activeClass ?? context.activeClass), $$props.btnClass);
+let spanClass;
+$: spanClass = twMerge(spanClasses[navType], active && (activeClass ?? context.activeClass), $$props.spanClass);
 </script>
 
 <button

package/dist/bottom-nav/BottomNavItem.svelte.d.ts

@@ -3,12 +3,9 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         btnName?: string | undefined;
-        appBtnPosition?: "custom" | "left" | "middle" | "right" | undefined;
-        btnDefault?: string | undefined;
-        spanDefault?: string | undefined;
-        btnCustom?: string | undefined;
-        spanCustom?: string | undefined;
-        appCustom?: string | undefined;
+        appBtnPosition?: "left" | "middle" | "right" | undefined;
+        activeClass?: string | undefined;
+        active?: boolean | undefined;
     };
     events: {
         click: MouseEvent;

package/dist/bottom-nav/BottomNavItem.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BottomNavItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/bottom-nav/BottomNavItem.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAgFD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACxD,MAAM,MAAM,mBAAmB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC1D,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAExD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,CAAC,OAAO,OAAO,aAAc,SAAQ,oBAAoB,CAAC,kBAAkB,EAAE,mBAAmB,EAAE,kBAAkB,CAAC;CAC3H"}
+{"version":3,"file":"BottomNavItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/bottom-nav/BottomNavItem.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAwFD,QAAA,MAAM,SAAS;;;;;sBADmL,MAAM,GAAG,SAAS;;;;;;;;;;;;;;;;;;CACtI,CAAC;AAC/E,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACxD,MAAM,MAAM,mBAAmB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC1D,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAExD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,CAAC,OAAO,OAAO,aAAc,SAAQ,oBAAoB,CAAC,kBAAkB,EAAE,mBAAmB,EAAE,kBAAkB,CAAC;CAC3H"}

package/dist/breadcrumbs/BreadcrumbItem.svelte

@@ -1,13 +1,14 @@
-<script>export let home = false;
+<script>import { twMerge } from 'tailwind-merge';
+export let home = false;
 export let href = undefined;
 export let linkClass = 'ml-1 text-sm font-medium text-gray-700 hover:text-gray-900 md:ml-2 dark:text-gray-400 dark:hover:text-white';
 export let spanClass = 'ml-1 text-sm font-medium text-gray-500 md:ml-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';
 </script>
 
-<li class="inline-flex items-center" {...$$restProps}>
+<li class={twMerge('inline-flex items-center', $$props.class)} {...$$restProps}>
   {#if home}
-    <a class={homeClass} {href}>
+    <a class={twMerge(homeClass, $$props.classHome)} {href}>
       {#if $$slots.icon}
         <slot name="icon" />
       {:else}
@@ -32,11 +33,11 @@ export let homeClass = 'inline-flex items-center text-sm font-medium text-gray-7
           clip-rule="evenodd" /></svg>
     {/if}
     {#if href}
-      <a class={linkClass} {href}>
+      <a class={twMerge(linkClass, $$props.classLink)} {href}>
         <slot />
       </a>
     {:else}
-      <span class={spanClass}>
+      <span class={twMerge(spanClass, $$props.classSpan)}>
         <slot />
       </span>
     {/if}

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

@@ -1 +1 @@
-{"version":3,"file":"BreadcrumbItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/breadcrumbs/BreadcrumbItem.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA2CD,QAAA,MAAM,SAAS;;;;eAD2H,MAAM,GAAG,SAAS;;;;;;;;;;;;CAC9E,CAAC;AAC/E,MAAM,MAAM,mBAAmB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACzD,MAAM,MAAM,oBAAoB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC3D,MAAM,MAAM,mBAAmB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEzD;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,OAAO,OAAO,cAAe,SAAQ,oBAAoB,CAAC,mBAAmB,EAAE,oBAAoB,EAAE,mBAAmB,CAAC;CAC/H"}
+{"version":3,"file":"BreadcrumbItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/breadcrumbs/BreadcrumbItem.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA8CD,QAAA,MAAM,SAAS;;;;eAD2H,MAAM,GAAG,SAAS;;;;;;;;;;;;CAC9E,CAAC;AAC/E,MAAM,MAAM,mBAAmB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACzD,MAAM,MAAM,oBAAoB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC3D,MAAM,MAAM,mBAAmB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEzD;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,OAAO,OAAO,cAAe,SAAQ,oBAAoB,CAAC,mBAAmB,EAAE,oBAAoB,EAAE,mBAAmB,CAAC;CAC/H"}

package/dist/buttons/Button.svelte

@@ -5,7 +5,6 @@ export let pill = false;
 export let outline = false;
 export let size = group ? 'sm' : 'md';
 export let href = undefined;
-export let btnClass = undefined;
 export let type = 'button';
 export let color = group ? (outline ? 'dark' : 'alternative') : 'primary';
 export let shadow = false;
@@ -66,16 +65,14 @@ const sizeClasses = {
 };
 const hasBorder = () => outline || color === 'alternative' || color === 'light';
 let buttonClass;
-$: buttonClass = btnClass
-    ? btnClass
-    : twMerge('text-center font-medium', group ? 'focus:ring-2' : 'focus:ring-4', group && 'focus:z-10', group || 'focus:outline-none', 'inline-flex items-center justify-center ' + sizeClasses[size], outline ? outlineClasses[color] : colorClasses[color], color === 'alternative' &&
-        (group
-            ? 'dark:bg-gray-700 dark:text-white dark:border-gray-700 dark:hover:border-gray-600 dark:hover:bg-gray-600'
-            : 'dark:bg-transparent dark:border-gray-600 dark:hover:border-gray-700'), outline &&
-        color === 'dark' &&
-        (group ? 'dark:text-white dark:border-white' : 'dark:text-gray-400 dark:border-gray-700'), coloredFocusClasses[color], hasBorder() && group && 'border-l-0 first:border-l', group
-        ? (pill && 'first:rounded-l-full last:rounded-r-full') || 'first:rounded-l-lg last:rounded-r-lg'
-        : (pill && 'rounded-full') || 'rounded-lg', shadow && 'shadow-lg', shadow && coloredShadowClasses[color], $$props.disabled && 'cursor-not-allowed opacity-50', $$props.class);
+$: buttonClass = twMerge('text-center font-medium', group ? 'focus:ring-2' : 'focus:ring-4', group && 'focus:z-10', group || 'focus:outline-none', 'inline-flex items-center justify-center ' + sizeClasses[size], outline ? outlineClasses[color] : colorClasses[color], color === 'alternative' &&
+    (group
+        ? 'dark:bg-gray-700 dark:text-white dark:border-gray-700 dark:hover:border-gray-600 dark:hover:bg-gray-600'
+        : 'dark:bg-transparent dark:border-gray-600 dark:hover:border-gray-700'), outline &&
+    color === 'dark' &&
+    (group ? 'dark:text-white dark:border-white' : 'dark:text-gray-400 dark:border-gray-700'), coloredFocusClasses[color], hasBorder() && group && 'border-l-0 first:border-l', group
+    ? (pill && 'first:rounded-l-full last:rounded-r-full') || 'first:rounded-l-lg last:rounded-r-lg'
+    : (pill && 'rounded-full') || 'rounded-lg', shadow && 'shadow-lg', shadow && coloredShadowClasses[color], $$props.disabled && 'cursor-not-allowed opacity-50', $$props.class);
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->

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

@@ -7,7 +7,6 @@ declare const __propDef: {
         outline?: boolean | undefined;
         size?: "xs" | "sm" | "lg" | "xl" | "md" | undefined;
         href?: string | undefined;
-        btnClass?: string | undefined;
         type?: ButtonType | undefined;
         color?: "red" | "yellow" | "green" | "purple" | "blue" | "light" | "dark" | "primary" | "none" | "alternative" | undefined;
         shadow?: boolean | undefined;

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

@@ -1 +1 @@
-{"version":3,"file":"Button.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/buttons/Button.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAGD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAkI3C,QAAA,MAAM,SAAS;;;;;;eADoN,MAAM,GAAG,SAAS;mBAAa,MAAM,GAAG,SAAS;;;;;;;;;;;;;;;;;;;;;CACtM,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgDG;AACH,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,oBAAoB,CAAC,WAAW,EAAE,YAAY,EAAE,WAAW,CAAC;CAC/F"}
+{"version":3,"file":"Button.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/buttons/Button.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAGD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AA+H3C,QAAA,MAAM,SAAS;;;;;;eAD+L,MAAM,GAAG,SAAS;;;;;;;;;;;;;;;;;;;;;CAClJ,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgDG;AACH,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,oBAAoB,CAAC,WAAW,EAAE,YAAY,EAAE,WAAW,CAAC;CAC/F"}