flowbite-svelte 0.38.1 → 0.38.2

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

@@ -2,10 +2,8 @@
 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';
 setContext('navType', navType);
 const outerDivClasses = {
     default: 'bottom-0 left-0 h-16 bg-white border-t',
@@ -15,8 +13,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 +23,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 +49,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

@@ -3,11 +3,9 @@ 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;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -32,8 +30,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;AAoED,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,12 +1,7 @@
 <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';
 const navType = getContext('navType');
 const btnClasses = {
     default: 'inline-flex flex-col items-center justify-center px-5 hover:bg-gray-50 dark:hover:bg-gray-800 group',
@@ -16,8 +11,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 +21,15 @@ 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);
+$: btnClass = twMerge(btnClasses[navType], appBtnClasses[appBtnPosition], $$props.btnClass);
+$: spanClass = twMerge(spanClasses[navType], $$props.spanClass);
 </script>
 
 <button

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

@@ -3,12 +3,7 @@ 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;
     };
     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;AAuED,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"}

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/carousels/Caption.svelte

@@ -1,9 +1,10 @@
 <script>export let caption = '';
 export let captionClass = '';
+export let pClass = 'text-gray-900 dark:text-white';
 </script>
 
 <div class={captionClass}>
-  <p id="caption" class="text-gray-900 dark:text-white">{caption}</p>
+  <p id="caption" class={pClass}>{caption}</p>
 </div>
 
 <!--

package/dist/carousels/Caption.svelte.d.ts

@@ -3,6 +3,7 @@ declare const __propDef: {
     props: {
         caption?: string | undefined;
         captionClass?: string | undefined;
+        pClass?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/carousels/Caption.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Caption.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/carousels/Caption.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAcD,QAAA,MAAM,SAAS;;;;;;;;;CAAwC,CAAC;AACxD,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAClD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACpD,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAElD;;;;;;;GAOG;AACH,MAAM,CAAC,OAAO,OAAO,OAAQ,SAAQ,oBAAoB,CAAC,YAAY,EAAE,aAAa,EAAE,YAAY,CAAC;CACnG"}
+{"version":3,"file":"Caption.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/carousels/Caption.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAeD,QAAA,MAAM,SAAS;;;;;;;;;;CAAwC,CAAC;AACxD,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAClD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACpD,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAElD;;;;;;;GAOG;AACH,MAAM,CAAC,OAAO,OAAO,OAAQ,SAAQ,oBAAoB,CAAC,YAAY,EAAE,aAAa,EAAE,YAAY,CAAC;CACnG"}

package/dist/carousels/Carousel.svelte

@@ -1,7 +1,9 @@
-<script>import Slide from './Slide.svelte';
+<script>import { twMerge } from 'tailwind-merge';
+import Slide from './Slide.svelte';
 import Thumbnail from './Thumbnail.svelte';
 import Caption from './Caption.svelte';
 import Indicator from './Indicator.svelte';
+export let id = 'default-carousel';
 export let showIndicators = true;
 export let showCaptions = true;
 export let showThumbs = true;
@@ -9,13 +11,18 @@ export let images;
 export let slideControls = true;
 export let loop = false;
 export let duration = 2000;
+export let thumbClass = 'opacity-40';
 // Carousel
 export let divClass = 'overflow-hidden relative h-56 rounded-lg sm:h-64 xl:h-80 2xl:h-96';
+let divCls = twMerge(divClass, $$props.classDiv);
 export let indicatorDivClass = 'flex absolute bottom-5 left-1/2 z-30 space-x-3 -translate-x-1/2';
+let indicatorDivCls = twMerge(indicatorDivClass, $$props.classIndicatorDiv);
 // Caption
 export let captionClass = 'h-10 bg-gray-300 dark:bg-gray-700 dark:text-white p-2 my-2 text-center';
+let captionCls = twMerge(captionClass, $$props.classCaption);
 // Indicator
 export let indicatorClass = 'w-3 h-3 rounded-full bg-gray-100 hover:bg-gray-300 opacity-60';
+let indicatorCls = twMerge(indicatorClass, $$props.classIndicator);
 // Slide
 export let slideClass = '';
 let imageShowingIndex = 0;
@@ -44,19 +51,19 @@ if (loop) {
 }
 </script>
 
-<div id="default-carousel" class="relative">
-  <div class={divClass}>
+<div {id} class="relative">
+  <div class={divCls}>
     <Slide image={image.imgurl} altTag={image.name} attr={image.attribution} {slideClass} />
   </div>
   {#if showIndicators}
     <!-- Slider indicators -->
-    <div class={indicatorDivClass}>
+    <div class={indicatorDivCls}>
       {#each images as { id, imgurl, name, attribution }}
         <Indicator
           {name}
           selected={imageShowingIndex === id}
           on:click={() => goToSlide(id)}
-          {indicatorClass} />
+          indicatorClass={indicatorCls} />
       {/each}
     </div>
   {/if}
@@ -114,13 +121,14 @@ if (loop) {
 </div>
 
 {#if showCaptions}
-  <Caption caption={images[imageShowingIndex].name} {captionClass} />
+  <Caption caption={images[imageShowingIndex].name} captionClass={captionCls} />
 {/if}
 
 {#if showThumbs}
   <div class="flex flex-row justify-center bg-gray-100">
     {#each images as { id, imgurl, name, attribution }}
       <Thumbnail
+        {thumbClass}
         thumbImg={imgurl}
         altTag={name}
         titleLink={attribution}
@@ -155,7 +163,7 @@ if (loop) {
   @prop slideControls: boolean = true;
   @prop loop: boolean = false;
   @prop duration: number = 2000;
-
+  @prop thumbClass: string = 'opacity-40';
   ### Carousel
   @prop divClass: string = 'overflow-hidden relative h-56 rounded-lg sm:h-64 xl:h-80 2xl:h-96';
   @prop indicatorDivClass: string = 'flex absolute bottom-5 left-1/2 z-30 space-x-3 -translate-x-1/2';

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

@@ -1,6 +1,8 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        [x: string]: any;
+        id?: string | undefined;
         showIndicators?: boolean | undefined;
         showCaptions?: boolean | undefined;
         showThumbs?: boolean | undefined;
@@ -8,6 +10,7 @@ declare const __propDef: {
         slideControls?: boolean | undefined;
         loop?: boolean | undefined;
         duration?: number | undefined;
+        thumbClass?: string | undefined;
         divClass?: string | undefined;
         indicatorDivClass?: string | undefined;
         captionClass?: string | undefined;
@@ -48,7 +51,7 @@ export type CarouselSlots = typeof __propDef.slots;
  * @prop slideControls: boolean = true;
  * @prop loop: boolean = false;
  * @prop duration: number = 2000;
- *
+ * @prop thumbClass: string = 'opacity-40';
  * ### Carousel
  * @prop divClass: string = 'overflow-hidden relative h-56 rounded-lg sm:h-64 xl:h-80 2xl:h-96';
  * @prop indicatorDivClass: string = 'flex absolute bottom-5 left-1/2 z-30 space-x-3 -translate-x-1/2';

package/dist/carousels/Carousel.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Carousel.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/carousels/Carousel.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA+GD,QAAA,MAAM,SAAS;;;;;gBADiZ,GAAG,EAAE;;;;;;;;;;;;;;;;;CAC9W,CAAC;AACxD,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":"Carousel.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/carousels/Carousel.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAuHD,QAAA,MAAM,SAAS;;;;;;;gBADgc,GAAG,EAAE;;;;;;;;;;;;;;;;;;CACtY,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/carousels/CarouselTransition.svelte

@@ -1,4 +1,5 @@
-<script>import { fade, blur, fly, slide } from 'svelte/transition';
+<script>import { twMerge } from 'tailwind-merge';
+import { fade, blur, fly, slide } from 'svelte/transition';
 import Slide from './Slide.svelte';
 import Thumbnail from './Thumbnail.svelte';
 import Caption from './Caption.svelte';
@@ -12,13 +13,18 @@ export let transitionType = 'fade';
 export let transitionParams = {};
 export let loop = false;
 export let duration = 2000;
+export let thumbClass = 'opacity-40';
 // Carousel
 export let divClass = 'overflow-hidden relative h-56 rounded-lg sm:h-64 xl:h-80 2xl:h-96';
+let divCls = twMerge(divClass, $$props.classDiv);
 export let indicatorDivClass = 'flex absolute bottom-5 left-1/2 z-30 space-x-3 -translate-x-1/2';
+let indicatorDivCls = twMerge(indicatorDivClass, $$props.classIndicatorDiv);
 // Caption
 export let captionClass = 'h-10 bg-gray-300 dark:bg-gray-700 dark:text-white p-2 my-2 text-center';
+let captionCls = twMerge(captionClass, $$props.classCaption);
 // Indicator
 export let indicatorClass = 'w-3 h-3 rounded-full bg-gray-100 hover:bg-gray-300 opacity-60';
+let indicatorCls = twMerge(indicatorClass, $$props.classIndicator);
 // have a custom transition function that returns the desired transition
 const multiple = (node, params) => {
     switch (transitionType) {
@@ -61,7 +67,7 @@ if (loop) {
 </script>
 
 <div id="default-carousel" class="relative">
-  <div class={divClass}>
+  <div class={divCls}>
     {#each images as { id, imgurl, name, attribution }}
       {#if imageShowingIndex === id}
         <div transition:multiple={transitionParams}>
@@ -73,13 +79,13 @@ if (loop) {
 
   {#if showIndicators}
     <!-- Slider indicators -->
-    <div class={indicatorDivClass}>
+    <div class={indicatorDivCls}>
       {#each images as { id, imgurl, name, attribution }}
         <Indicator
           {name}
           selected={imageShowingIndex === id}
           on:click={() => goToSlide(id)}
-          {indicatorClass} />
+          indicatorClass={indicatorCls} />
       {/each}
     </div>
   {/if}
@@ -137,13 +143,14 @@ if (loop) {
 </div>
 
 {#if showCaptions}
-  <Caption caption={images[imageShowingIndex].name} {captionClass} />
+  <Caption caption={images[imageShowingIndex].name} captionClass={captionCls} />
 {/if}
 
 {#if showThumbs}
   <div class="flex flex-row justify-center bg-gray-100">
     {#each images as { id, imgurl, name, attribution }}
       <Thumbnail
+        {thumbClass}
         thumbImg={imgurl}
         altTag={name}
         titleLink={attribution}
@@ -180,6 +187,7 @@ if (loop) {
   @prop transitionParams: TransitionParamTypes = {};
   @prop loop: boolean = false;
   @prop duration: number = 2000;
+  @prop thumbClass: string = 'opacity-40';
   ### Carousel
   @prop divClass: string = 'overflow-hidden relative h-56 rounded-lg sm:h-64 xl:h-80 2xl:h-96';
   @prop indicatorDivClass: string = 'flex absolute bottom-5 left-1/2 z-30 space-x-3 -translate-x-1/2';

package/dist/carousels/CarouselTransition.svelte.d.ts

@@ -2,6 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 import type { TransitionTypes, TransitionParamTypes } from '../types';
 declare const __propDef: {
     props: {
+        [x: string]: any;
         showIndicators?: boolean | undefined;
         showCaptions?: boolean | undefined;
         showThumbs?: boolean | undefined;
@@ -11,6 +12,7 @@ declare const __propDef: {
         transitionParams?: TransitionParamTypes | undefined;
         loop?: boolean | undefined;
         duration?: number | undefined;
+        thumbClass?: string | undefined;
         divClass?: string | undefined;
         indicatorDivClass?: string | undefined;
         captionClass?: string | undefined;
@@ -52,6 +54,7 @@ export type CarouselTransitionSlots = typeof __propDef.slots;
  * @prop transitionParams: TransitionParamTypes = {};
  * @prop loop: boolean = false;
  * @prop duration: number = 2000;
+ * @prop thumbClass: string = 'opacity-40';
  * ### Carousel
  * @prop divClass: string = 'overflow-hidden relative h-56 rounded-lg sm:h-64 xl:h-80 2xl:h-96';
  * @prop indicatorDivClass: string = 'flex absolute bottom-5 left-1/2 z-30 space-x-3 -translate-x-1/2';

package/dist/carousels/CarouselTransition.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CarouselTransition.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/carousels/CarouselTransition.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAED,OAAO,KAAK,EAAE,eAAe,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AA0ItE,QAAA,MAAM,SAAS;;;;;gBAD8b,GAAG,EAAE;;;;;;;;;;;;;;;;;;CAC3Z,CAAC;AACxD,MAAM,MAAM,uBAAuB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAC7D,MAAM,MAAM,wBAAwB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC/D,MAAM,MAAM,uBAAuB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAE7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AACH,MAAM,CAAC,OAAO,OAAO,kBAAmB,SAAQ,oBAAoB,CAAC,uBAAuB,EAAE,wBAAwB,EAAE,uBAAuB,CAAC;CAC/I"}
+{"version":3,"file":"CarouselTransition.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/carousels/CarouselTransition.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAGD,OAAO,KAAK,EAAE,eAAe,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AA6ItE,QAAA,MAAM,SAAS;;;;;;gBADud,GAAG,EAAE;;;;;;;;;;;;;;;;;;;CAC7Z,CAAC;AAC/E,MAAM,MAAM,uBAAuB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAC7D,MAAM,MAAM,wBAAwB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC/D,MAAM,MAAM,uBAAuB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAE7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,MAAM,CAAC,OAAO,OAAO,kBAAmB,SAAQ,oBAAoB,CAAC,uBAAuB,EAAE,wBAAwB,EAAE,uBAAuB,CAAC;CAC/I"}

package/dist/carousels/Thumbnail.svelte

@@ -4,12 +4,13 @@ export let titleLink = '';
 export let id;
 export let thumbWidth = 100;
 export let selected = false;
+export let thumbClass = '';
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <button on:click aria-label="Click to view image">
   <img
-    class="opacity-40"
+    class={thumbClass}
     class:active={selected}
     id={id.toString()}
     src={thumbImg}

package/dist/carousels/Thumbnail.svelte.d.ts

@@ -7,6 +7,7 @@ declare const __propDef: {
         id: number;
         thumbWidth?: number | undefined;
         selected?: boolean | undefined;
+        thumbClass?: string | undefined;
     };
     events: {
         click: MouseEvent;

package/dist/carousels/Thumbnail.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Thumbnail.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/carousels/Thumbnail.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAqBD,QAAA,MAAM,SAAS;;;;;YADqL,MAAM;;;;;;;;;;CACnJ,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;;;;;;;;;;GAUG;AACH,MAAM,CAAC,OAAO,OAAO,SAAU,SAAQ,oBAAoB,CAAC,cAAc,EAAE,eAAe,EAAE,cAAc,CAAC;CAC3G"}
+{"version":3,"file":"Thumbnail.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/carousels/Thumbnail.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAsBD,QAAA,MAAM,SAAS;;;;;YAD8M,MAAM;;;;;;;;;;;CAC5K,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;;;;;;;;;;GAUG;AACH,MAAM,CAAC,OAAO,OAAO,SAAU,SAAQ,oBAAoB,CAAC,cAAc,EAAE,eAAe,EAAE,cAAc,CAAC;CAC3G"}