flowbite-svelte 0.38.3 → 0.38.5

package/dist/forms/Checkbox.svelte

@@ -45,7 +45,7 @@ function onChange() {
 }
 </script>
 
-<Label class={labelClass(inline, $$props.class)} show={!!$$slots.default}>
+<Label class={labelClass(inline, $$props.classLabel)} show={!!$$slots.default}>
   <input
     use:init={group}
     type="checkbox"

package/dist/forms/Radio.svelte

@@ -27,7 +27,7 @@ export let value = '';
 let background = getContext('background');
 </script>
 
-<Label class={labelClass(inline, $$props.class)} show={$$slots.default}>
+<Label class={labelClass(inline, $$props.classLabel)} show={$$slots.default}>
   <input
     type="radio"
     bind:group

package/dist/megamenu/MegaMenu.svelte

@@ -3,10 +3,11 @@ import Popper from '../utils/Popper.svelte';
 export let items = [];
 export let full = false;
 export let open = false;
+export let ulClass = 'grid grid-flow-row gap-y-4 md:gap-x-0 auto-col-max auto-row-max';
 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', $$props.classUl);
+let ulCls;
+$: ulCls = twMerge(ulClass, 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
@@ -23,7 +24,7 @@ $: ulClass = twMerge('grid grid-flow-row gap-y-4 md:gap-x-0 auto-col-max auto-ro
   on:show
   bind:open>
   <div class="flex flex-col md:flex-row p-4 max-w-screen-md justify-center mx-auto mt-2">
-    <ul class={ulClass}>
+    <ul class={ulCls}>
       {#each items as item, index}
         <li>
           <slot {item} {index} />

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

@@ -8,6 +8,7 @@ declare const __propDef: {
         })[] | undefined;
         full?: boolean | undefined;
         open?: boolean | undefined;
+        ulClass?: string | undefined;
     };
     events: {
         show: CustomEvent<any>;

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;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"}
+{"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;AAiDzC,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/ratings/AdvancedRating.svelte

@@ -1,10 +1,16 @@
-<script>export let ratings = [];
+<script>import { twMerge } from 'tailwind-merge';
+export let ratings = [];
 export let divClass = 'flex items-center mt-4';
 export let labelClass = 'text-sm font-medium text-gray-600 dark:text-gray-500';
 export let ratingDivClass = 'mx-4 w-2/4 h-5 bg-gray-200 rounded dark:bg-gray-700';
 export let ratingClass = 'h-5 bg-yellow-400 rounded';
 export let rightLabelClass = 'text-sm font-medium text-gray-600 dark:text-gray-500';
 export let unit = '%';
+let divCls = twMerge(divClass, $$props.classDiv);
+let labelCls = twMerge(labelClass, $$props.classLabel);
+let ratingDivCls = twMerge(ratingDivClass, $$props.classRatingDiv);
+let ratingCls = twMerge(ratingClass, $$props.classRating);
+let rightLabelCls = twMerge(rightLabelClass, $$props.classRightLabel);
 </script>
 
 {#if $$slots.rating}
@@ -14,12 +20,12 @@ export let unit = '%';
   <slot name="globalText" />
 {/if}
 {#each ratings as { label, rating }}
-  <div class={divClass}>
-    <span class={labelClass}>{label}</span>
-    <div class={ratingDivClass}>
-      <div class={ratingClass} style="width: {rating}%" />
+  <div class={divCls}>
+    <span class={labelCls}>{label}</span>
+    <div class={ratingDivCls}>
+      <div class={ratingCls} style="width: {rating}%" />
     </div>
-    <span class={rightLabelClass}>{rating}{unit}</span>
+    <span class={rightLabelCls}>{rating}{unit}</span>
   </div>
 {/each}
 

package/dist/ratings/AdvancedRating.svelte.d.ts

@@ -1,6 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        [x: string]: any;
         ratings?: {
             label: string;
             rating: number;

package/dist/ratings/AdvancedRating.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AdvancedRating.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/ratings/AdvancedRating.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA+BD,QAAA,MAAM,SAAS;;;mBADqM,MAAM;oBAAU,MAAM;;;;;;;;;;;;;;;;CACnL,CAAC;AACxD,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;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,OAAO,OAAO,cAAe,SAAQ,oBAAoB,CAAC,mBAAmB,EAAE,oBAAoB,EAAE,mBAAmB,CAAC;CAC/H"}
+{"version":3,"file":"AdvancedRating.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/ratings/AdvancedRating.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAwCD,QAAA,MAAM,SAAS;;;;mBADqM,MAAM;oBAAU,MAAM;;;;;;;;;;;;;;;;CAC5J,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;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,OAAO,OAAO,cAAe,SAAQ,oBAAoB,CAAC,mBAAmB,EAAE,oBAAoB,EAAE,mBAAmB,CAAC;CAC/H"}

package/dist/timeline/Activity.svelte

@@ -1,7 +1,9 @@
-<script>export let olClass = 'relative border-l border-gray-200 dark:border-gray-700';
+<script>import { twMerge } from 'tailwind-merge';
+export let olClass = 'relative border-l border-gray-200 dark:border-gray-700';
+let olCls = twMerge(olClass, $$props.class);
 </script>
 
-<ol class={olClass}>
+<ol class={olCls}>
   <slot />
 </ol>
 

package/dist/timeline/Activity.svelte.d.ts

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

package/dist/timeline/Activity.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Activity.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/timeline/Activity.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAaD,QAAA,MAAM,SAAS;;;;;;;;;;CAAwC,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AACH,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,oBAAoB,CAAC,aAAa,EAAE,cAAc,EAAE,aAAa,CAAC;CACvG"}
+{"version":3,"file":"Activity.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/timeline/Activity.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAiBD,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AACH,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,oBAAoB,CAAC,aAAa,EAAE,cAAc,EAAE,aAAa,CAAC;CACvG"}

package/dist/timeline/ActivityItem.svelte

@@ -1,23 +1,37 @@
-<script>export let activities;
+<script>import { twMerge } from 'tailwind-merge';
+export let activities;
+export let liClass = 'mb-10 ml-6';
+export let spanClass = 'flex absolute -left-3 justify-center items-center w-6 h-6 bg-blue-200 rounded-full ring-8 ring-white dark:ring-gray-900 dark:bg-blue-900';
+export let imgClass = 'rounded-full shadow-lg';
+export let outerDivClass = 'p-4 bg-white rounded-lg border border-gray-200 shadow-sm dark:bg-gray-700 dark:border-gray-600';
+export let innerDivClass = 'justify-between items-center mb-3 sm:flex';
+export let timeClass = 'mb-1 text-xs font-normal text-gray-400 sm:order-last sm:mb-0';
+export let titleClass = 'text-sm font-normal text-gray-500 lex dark:text-gray-300';
+export let textClass = 'p-3 text-xs italic font-normal text-gray-500 bg-gray-50 rounded-lg border border-gray-200 dark:bg-gray-600 dark:border-gray-500 dark:text-gray-300';
+let liCls = twMerge(liClass, $$props.classLi);
+let spanCls = twMerge(spanClass, $$props.classSpan);
+let imgCls = twMerge(imgClass, $$props.classImg);
+let outerDivCls = twMerge(outerDivClass, $$props.classOuterDiv);
+let innerDivCls = twMerge(innerDivClass, $$props.classInnerDiv);
+let timeCls = twMerge(timeClass, $$props.classTime);
+let titleCls = twMerge(titleClass, $$props.classTitle);
+let textCls = twMerge(textClass, $$props.classText);
 </script>
 
 {#each activities as { title, date, src, alt, text }}
-  <li class="mb-10 ml-6">
-    <span
-      class="flex absolute -left-3 justify-center items-center w-6 h-6 bg-blue-200 rounded-full ring-8 ring-white dark:ring-gray-900 dark:bg-blue-900">
-      <img class="rounded-full shadow-lg" {src} {alt} />
+  <li class={liCls}>
+    <span class={spanCls}>
+      <img class={imgCls} {src} {alt} />
     </span>
-    <div
-      class="p-4 bg-white rounded-lg border border-gray-200 shadow-sm dark:bg-gray-700 dark:border-gray-600">
-      <div class="justify-between items-center mb-3 sm:flex">
-        <time class="mb-1 text-xs font-normal text-gray-400 sm:order-last sm:mb-0">{date}</time>
-        <div class="text-sm font-normal text-gray-500 lex dark:text-gray-300">
+    <div class={outerDivCls}>
+      <div class={innerDivCls}>
+        <time class={timeCls}>{date}</time>
+        <div class={titleCls}>
           {@html title}
         </div>
       </div>
       {#if text}
-        <div
-          class="p-3 text-xs italic font-normal text-gray-500 bg-gray-50 rounded-lg border border-gray-200 dark:bg-gray-600 dark:border-gray-500 dark:text-gray-300">
+        <div class={textCls}>
           {@html text}
         </div>
       {/if}
@@ -37,6 +51,14 @@
   - Grouped timeline
   ## Props
   @prop activities: ActivityType[];
+  @prop liClass: string';
+  @prop spanClass: string;
+  @prop imgClass: string;
+  @prop outerDivClass: string;
+  @prop innerDivClass: string;
+  @prop timeClass
+  @prop titleClass
+  @prop textClass
   ## Example
   ```
   <script>

package/dist/timeline/ActivityItem.svelte.d.ts

@@ -2,7 +2,16 @@ import { SvelteComponentTyped } from "svelte";
 import type { ActivityType } from '../types';
 declare const __propDef: {
     props: {
+        [x: string]: any;
         activities: ActivityType[];
+        liClass?: string | undefined;
+        spanClass?: string | undefined;
+        imgClass?: string | undefined;
+        outerDivClass?: string | undefined;
+        innerDivClass?: string | undefined;
+        timeClass?: string | undefined;
+        titleClass?: string | undefined;
+        textClass?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -23,6 +32,14 @@ export type ActivityItemSlots = typeof __propDef.slots;
  * - Grouped timeline
  * ## Props
  * @prop activities: ActivityType[];
+ * @prop liClass: string';
+ * @prop spanClass: string;
+ * @prop imgClass: string;
+ * @prop outerDivClass: string;
+ * @prop innerDivClass: string;
+ * @prop timeClass
+ * @prop titleClass
+ * @prop textClass
  * ## Example
  * ```
  * <script>

package/dist/timeline/ActivityItem.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ActivityItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/timeline/ActivityItem.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AACD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAgC7C,QAAA,MAAM,SAAS;;oBAD0C,YAAY,EAAE;;;;;;CAChB,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AACH,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,oBAAoB,CAAC,iBAAiB,EAAE,kBAAkB,EAAE,iBAAiB,CAAC;CACvH"}
+{"version":3,"file":"ActivityItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/timeline/ActivityItem.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAED,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAsD7C,QAAA,MAAM,SAAS;;;oBAD8O,YAAY,EAAE;;;;;;;;;;;;;;CAC7L,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmDG;AACH,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,oBAAoB,CAAC,iBAAiB,EAAE,kBAAkB,EAAE,iBAAiB,CAAC;CACvH"}

package/dist/timeline/Group.svelte

@@ -1,11 +1,16 @@
-<script>export let divClass = 'p-5 mb-4 bg-gray-50 rounded-lg border border-gray-100 dark:bg-gray-800 dark:border-gray-700';
+<script>import { twMerge } from 'tailwind-merge';
+export let divClass = 'p-5 mb-4 bg-gray-50 rounded-lg border border-gray-100 dark:bg-gray-800 dark:border-gray-700';
 export let timeClass = 'text-lg font-semibold text-gray-900 dark:text-white';
 export let date;
+export let olClass = 'mt-3 divide-y divider-gray-200 dark:divide-gray-700';
+let divCls = twMerge(divClass, $$props.classDiv);
+let timeCls = twMerge(timeClass, $$props.classTime);
+let olCls = twMerge(olClass, $$props.classOl);
 </script>
 
-<div class={divClass}>
-  <time class={timeClass}>{date}</time>
-  <ol class="mt-3 divide-y divider-gray-200 dark:divide-gray-700">
+<div class={divCls}>
+  <time class={timeCls}>{date}</time>
+  <ol class={olCls}>
     <slot />
   </ol>
 </div>
@@ -21,9 +26,10 @@ export let date;
   - Activity Log
   - Grouped timeline
   ## Props
-  @prop divClass: string = 'p-5 mb-4 bg-gray-50 rounded-lg border border-gray-100 dark:bg-gray-800 dark:border-gray-700';
-  @prop timeClass: string = 'text-lg font-semibold text-gray-900 dark:text-white';
+  @prop divClass: string;
+  @prop timeClass: string;
   @prop date: Date | string;
+  @prop olClass: string;
   ## Example
   ```
   <script>

package/dist/timeline/Group.svelte.d.ts

@@ -1,9 +1,11 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        [x: string]: any;
         divClass?: string | undefined;
         timeClass?: string | undefined;
         date: Date | string;
+        olClass?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -25,9 +27,10 @@ export type GroupSlots = typeof __propDef.slots;
  * - Activity Log
  * - Grouped timeline
  * ## Props
- * @prop divClass: string = 'p-5 mb-4 bg-gray-50 rounded-lg border border-gray-100 dark:bg-gray-800 dark:border-gray-700';
- * @prop timeClass: string = 'text-lg font-semibold text-gray-900 dark:text-white';
+ * @prop divClass: string;
+ * @prop timeClass: string;
  * @prop date: Date | string;
+ * @prop olClass: string;
  * ## Example
  * ```
  * <script>

package/dist/timeline/Group.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Group.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/timeline/Group.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAmBD,QAAA,MAAM,SAAS;;;;cAD2G,IAAI,GAAG,MAAM;;;;;;;;CAChF,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AACH,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,oBAAoB,CAAC,UAAU,EAAE,WAAW,EAAE,UAAU,CAAC;CAC3F"}
+{"version":3,"file":"Group.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/timeline/Group.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA0BD,QAAA,MAAM,SAAS;;;;;cAD8H,IAAI,GAAG,MAAM;;;;;;;;;CAC5E,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,oBAAoB,CAAC,UAAU,EAAE,WAAW,EAAE,UAAU,CAAC;CAC3F"}

package/dist/timeline/GroupItem.svelte

@@ -1,18 +1,29 @@
-<script>export let timelines;
+<script>import { twMerge } from 'tailwind-merge';
+export let timelines;
+export let aClass = 'block items-center p-3 sm:flex hover:bg-gray-100 dark:hover:bg-gray-700';
+export let imgClass = 'mr-3 mb-3 w-12 h-12 rounded-full sm:mb-0';
+export let divClass = 'text-gray-600 dark:text-gray-400';
+export let titleClass = 'text-base font-normal';
+export let spanClass = 'inline-flex items-center text-xs font-normal text-gray-500 dark:text-gray-400';
+let aCls = twMerge(aClass, $$props.classA);
+let imgCls = twMerge(imgClass, $$props.classImg);
+let divCls = twMerge(divClass, $$props.classDiv);
+let titleCls = twMerge(titleClass, $$props.classTitle);
+let spanCls = twMerge(spanClass, $$props.classSpan);
 </script>
 
 {#each timelines as { title, src, alt, isPrivate, href, comment }}
   <li>
-    <a {href} class="block items-center p-3 sm:flex hover:bg-gray-100 dark:hover:bg-gray-700">
-      <img class="mr-3 mb-3 w-12 h-12 rounded-full sm:mb-0" {src} {alt} />
-      <div class="text-gray-600 dark:text-gray-400">
-        <div class="text-base font-normal">
+    <a {href} class={aCls}>
+      <img class={imgCls} {src} {alt} />
+      <div class={divCls}>
+        <div class={titleCls}>
           {@html title}
         </div>
         {#if comment}
           <div class="text-sm font-normal">{comment}</div>
         {/if}
-        <span class="inline-flex items-center text-xs font-normal text-gray-500 dark:text-gray-400">
+        <span class={spanCls}>
           {#if isPrivate}
             <svg
               class="mr-1 w-3 h-3"
@@ -55,6 +66,12 @@
   - Grouped timeline
   ## Props
   @prop timelines: GroupTimelineType[];
+  @prop aClass: string
+  @prop imgClass: string;
+  @prop divClass: string;
+  @prop titleClass: string;
+  @prop spanClass: string;
+
   ## Example
   ```
   <script>

package/dist/timeline/GroupItem.svelte.d.ts

@@ -2,7 +2,13 @@ import { SvelteComponentTyped } from "svelte";
 import type { GroupTimelineType } from '../types';
 declare const __propDef: {
     props: {
+        [x: string]: any;
         timelines: GroupTimelineType[];
+        aClass?: string | undefined;
+        imgClass?: string | undefined;
+        divClass?: string | undefined;
+        titleClass?: string | undefined;
+        spanClass?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -23,6 +29,12 @@ export type GroupItemSlots = typeof __propDef.slots;
  * - Grouped timeline
  * ## Props
  * @prop timelines: GroupTimelineType[];
+ * @prop aClass: string
+ * @prop imgClass: string;
+ * @prop divClass: string;
+ * @prop titleClass: string;
+ * @prop spanClass: string;
+ *
  * ## Example
  * ```
  * <script>

package/dist/timeline/GroupItem.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GroupItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/timeline/GroupItem.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AACD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAkClD,QAAA,MAAM,SAAS;;mBADuC,iBAAiB,EAAE;;;;;;CAClB,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,MAAM,CAAC,OAAO,OAAO,SAAU,SAAQ,oBAAoB,CAAC,cAAc,EAAE,eAAe,EAAE,cAAc,CAAC;CAC3G"}
+{"version":3,"file":"GroupItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/timeline/GroupItem.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAED,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAgDlD,QAAA,MAAM,SAAS;;;mBADkJ,iBAAiB,EAAE;;;;;;;;;;;CACtG,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AACH,MAAM,CAAC,OAAO,OAAO,SAAU,SAAQ,oBAAoB,CAAC,cAAc,EAAE,eAAe,EAAE,cAAc,CAAC;CAC3G"}

package/dist/timeline/Timeline.svelte

@@ -1,5 +1,5 @@
-<script>import { setContext } from 'svelte';
-export let customClass = '';
+<script>import { twMerge } from 'tailwind-merge';
+import { setContext } from 'svelte';
 export let order = 'default';
 setContext('order', order);
 let olClasses = {
@@ -7,12 +7,11 @@ let olClasses = {
     horizontal: 'sm:flex',
     activity: 'relative border-l border-gray-200 dark:border-gray-700',
     vertical: 'relative border-l border-gray-200 dark:border-gray-700',
-    default: 'relative border-l border-gray-200 dark:border-gray-700',
-    custom: customClass
+    default: 'relative border-l border-gray-200 dark:border-gray-700'
 };
 </script>
 
-<ol class={olClasses[order]}>
+<ol class={twMerge(olClasses[order], $$props.class)}>
   <slot />
 </ol>
 

package/dist/timeline/Timeline.svelte.d.ts

@@ -1,8 +1,8 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        customClass?: string | undefined;
-        order?: "default" | "group" | "horizontal" | "vertical" | "custom" | "activity" | undefined;
+        [x: string]: any;
+        order?: "default" | "group" | "horizontal" | "vertical" | "activity" | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/timeline/Timeline.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Timeline.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/timeline/Timeline.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA2BD,QAAA,MAAM,SAAS;;;;;;;;;;;CAAwC,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AACH,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,oBAAoB,CAAC,aAAa,EAAE,cAAc,EAAE,aAAa,CAAC;CACvG"}
+{"version":3,"file":"Timeline.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/timeline/Timeline.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA2BD,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/timeline/TimelineHorizontal.svelte

@@ -1,7 +1,9 @@
-<script>export let olClass = 'sm:flex';
+<script>import { twMerge } from 'tailwind-merge';
+export let olClass = 'sm:flex';
+let olCls = twMerge(olClass, $$props.class);
 </script>
 
-<ol class={olClass}>
+<ol class={olCls}>
   <slot />
 </ol>
 

package/dist/timeline/TimelineHorizontal.svelte.d.ts

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

package/dist/timeline/TimelineHorizontal.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TimelineHorizontal.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/timeline/TimelineHorizontal.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAaD,QAAA,MAAM,SAAS;;;;;;;;;;CAAwC,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2DG;AACH,MAAM,CAAC,OAAO,OAAO,kBAAmB,SAAQ,oBAAoB,CAAC,uBAAuB,EAAE,wBAAwB,EAAE,uBAAuB,CAAC;CAC/I"}
+{"version":3,"file":"TimelineHorizontal.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/timeline/TimelineHorizontal.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAkBD,QAAA,MAAM,SAAS;;;;;;;;;;;CAA+D,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2DG;AACH,MAAM,CAAC,OAAO,OAAO,kBAAmB,SAAQ,oBAAoB,CAAC,uBAAuB,EAAE,wBAAwB,EAAE,uBAAuB,CAAC;CAC/I"}

package/dist/timeline/TimelineItem.svelte

@@ -1,10 +1,7 @@
-<script>import { twJoin } from 'tailwind-merge';
+<script>import { twMerge } from 'tailwind-merge';
 import { getContext } from 'svelte';
 export let title = '';
 export let date = '';
-export let customDiv = '';
-export let customTimeClass = '';
-export let customLiClass = '';
 export let svgClass = 'w-3 h-3 text-primary-600 dark:text-primary-400';
 let order = 'default';
 order = getContext('order');
@@ -13,44 +10,44 @@ const liClasses = {
     vertical: 'mb-10 ml-6',
     horizontal: 'relative mb-6 sm:mb-0',
     activity: 'mb-10 ml-6',
-    group: '',
-    custom: customLiClass
+    group: ''
 };
 const divClasses = {
     default: 'absolute w-3 h-3 bg-gray-200 rounded-full mt-1.5 -left-1.5 border border-white dark:border-gray-900 dark:bg-gray-700',
     vertical: 'flex absolute -left-3 justify-center items-center w-6 h-6 bg-primary-200 rounded-full ring-8 ring-white dark:ring-gray-900 dark:bg-primary-900',
     horizontal: 'flex items-center',
     activity: 'flex absolute -left-3 justify-center items-center w-6 h-6 bg-primary-200 rounded-full ring-8 ring-white dark:ring-gray-900 dark:bg-primary-900',
-    group: 'p-5 mb-4 bg-gray-50 rounded-lg border border-gray-100 dark:bg-gray-800 dark:border-gray-700',
-    custom: customDiv
+    group: 'p-5 mb-4 bg-gray-50 rounded-lg border border-gray-100 dark:bg-gray-800 dark:border-gray-700'
 };
 const timeClasses = {
     default: 'mb-1 text-sm font-normal leading-none text-gray-400 dark:text-gray-500',
     vertical: 'block mb-2 text-sm font-normal leading-none text-gray-400 dark:text-gray-500',
     horizontal: 'block mb-2 text-sm font-normal leading-none text-gray-400 dark:text-gray-500',
     activity: 'mb-1 text-xs font-normal text-gray-400 sm:order-last sm:mb-0',
-    group: 'text-lg font-semibold text-gray-900 dark:text-white',
-    custom: customTimeClass
+    group: 'text-lg font-semibold text-gray-900 dark:text-white'
 };
-const h3Class = twJoin(order === 'vertical'
+let liCls = twMerge(liClasses[order], $$props.classLi);
+let divCls = twMerge(divClasses[order], $$props.classDiv);
+let timeCls = twMerge(timeClasses[order], $$props.classTime);
+const h3Cls = twMerge(order === 'vertical'
     ? 'flex items-center mb-1 text-lg font-semibold text-gray-900 dark:text-white'
-    : 'text-lg font-semibold text-gray-900 dark:text-white');
+    : 'text-lg font-semibold text-gray-900 dark:text-white', $$props.classH3);
 </script>
 
-<li class={liClasses[order]}>
+<li class={liCls}>
   {#if order === 'default'}
-    <div class={divClasses[order]} />
+    <div class={divCls} />
     {#if date}
-      <time class={timeClasses[order]}>{date}</time>
+      <time class={timeCls}>{date}</time>
     {/if}
     {#if title}
-      <h3 class={h3Class}>
+      <h3 class={h3Cls}>
         {title}
       </h3>
     {/if}
     <slot />
   {:else if order === 'vertical'}
-    <div class={divClasses[order]} />
+    <div class={divCls} />
     {#if $$slots.icon}
       <slot name="icon" />
     {:else}
@@ -66,16 +63,16 @@ const h3Class = twJoin(order === 'vertical'
           clip-rule="evenodd" /></svg>
     {/if}
     {#if title}
-      <h3 class={h3Class}>
+      <h3 class={h3Cls}>
         {title}
       </h3>
     {/if}
     {#if date}
-      <time class={timeClasses[order]}>{date}</time>
+      <time class={timeCls}>{date}</time>
     {/if}
     <slot />
   {:else if order === 'horizontal'}
-    <div class={divClasses[order]} />
+    <div class={divCls} />
     {#if $$slots.icon}
       <slot name="icon" />
     {:else}
@@ -91,16 +88,16 @@ const h3Class = twJoin(order === 'vertical'
           clip-rule="evenodd" /></svg>
     {/if}
     {#if title}
-      <h3 class={h3Class}>
+      <h3 class={h3Cls}>
         {title}
       </h3>
     {/if}
     {#if date}
-      <time class={timeClasses[order]}>{date}</time>
+      <time class={timeCls}>{date}</time>
     {/if}
     <slot />
   {:else}
-    <div class={divClasses[order]} />
+    <div class={divCls} />
     {#if $$slots.icon}
       <slot name="icon" />
     {:else}
@@ -116,12 +113,12 @@ const h3Class = twJoin(order === 'vertical'
           clip-rule="evenodd" /></svg>
     {/if}
     {#if title}
-      <h3 class={h3Class}>
+      <h3 class={h3Cls}>
         {title}
       </h3>
     {/if}
     {#if date}
-      <time class={timeClasses[order]}>{date}</time>
+      <time class={timeCls}>{date}</time>
     {/if}
     <slot />
   {/if}
@@ -140,9 +137,6 @@ const h3Class = twJoin(order === 'vertical'
   ## Props
   @prop title: string = '';
   @prop date: string = '';
-  @prop customDiv: string = '';
-  @prop customTimeClass: string = '';
-  @prop customLiClass: string ='';
   @prop svgCl
   ## Example
   ```

package/dist/timeline/TimelineItem.svelte.d.ts

@@ -1,11 +1,9 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        [x: string]: any;
         title?: string | undefined;
         date?: string | undefined;
-        customDiv?: string | undefined;
-        customTimeClass?: string | undefined;
-        customLiClass?: string | undefined;
         svgClass?: string | undefined;
     };
     events: {
@@ -31,9 +29,6 @@ export type TimelineItemSlots = typeof __propDef.slots;
  * ## Props
  * @prop title: string = '';
  * @prop date: string = '';
- * @prop customDiv: string = '';
- * @prop customTimeClass: string = '';
- * @prop customLiClass: string ='';
  * @prop svgCl
  * ## Example
  * ```

package/dist/timeline/TimelineItem.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TimelineItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/timeline/TimelineItem.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAwHD,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsDG;AACH,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,oBAAoB,CAAC,iBAAiB,EAAE,kBAAkB,EAAE,iBAAiB,CAAC;CACvH"}
+{"version":3,"file":"TimelineItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/timeline/TimelineItem.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAsHD,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmDG;AACH,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,oBAAoB,CAAC,iBAAiB,EAAE,kBAAkB,EAAE,iBAAiB,CAAC;CACvH"}

package/dist/timeline/TimelineItemHorizontal.svelte

@@ -1,17 +1,29 @@
 <script>// import type { TimelineItemHorizontalType } from '../types';
 // export let timelineItems: TimelineItemHorizontalType[];
+import { twMerge } from 'tailwind-merge';
 export let title;
 export let date;
 export let href;
 export let text;
+export let liClass = 'relative mb-6 sm:mb-0';
+export let divClass = 'flex z-10 justify-center items-center w-6 h-6 bg-blue-200 rounded-full ring-0 ring-white dark:bg-blue-900 sm:ring-8 dark:ring-gray-900 shrink-0';
+export let h3Class = 'text-lg font-semibold text-gray-900 dark:text-white';
+export let timeClass = 'block mb-2 text-sm font-normal leading-none text-gray-400 dark:text-gray-500';
+export let pClass = 'text-base font-normal text-gray-500 dark:text-gray-400';
+export let aClass = 'inline-flex items-center py-2 px-4 text-sm font-medium text-gray-900 bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:outline-none focus:ring-gray-200 focus:text-blue-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-gray-700';
 export let linkname;
 export let icon;
+let liCls = twMerge(liClass, $$props.classLi);
+let divCls = twMerge(divClass, $$props.classDiv);
+let h3Cls = twMerge(h3Class, $$props.classH3);
+let timeCls = twMerge(timeClass, $$props.classTime);
+let pCls = twMerge(pClass, $$props.classP);
+let aCls = twMerge(aClass, $$props.classA);
 </script>
 
-<li class="relative mb-6 sm:mb-0">
+<li class={liCls}>
   <div class="flex items-center">
-    <div
-      class="flex z-10 justify-center items-center w-6 h-6 bg-blue-200 rounded-full ring-0 ring-white dark:bg-blue-900 sm:ring-8 dark:ring-gray-900 shrink-0">
+    <div class={divCls}>
       {#if icon}
         {@html icon}
       {:else}
@@ -29,16 +41,14 @@ export let icon;
     <div class="hidden sm:flex w-full bg-gray-200 h-0.5 dark:bg-gray-700" />
   </div>
   <div class="mt-3 sm:pr-8">
-    <h3 class="text-lg font-semibold text-gray-900 dark:text-white">{title}</h3>
-    <time class="block mb-2 text-sm font-normal leading-none text-gray-400 dark:text-gray-500">{date}</time>
-    <p class="text-base font-normal text-gray-500 dark:text-gray-400">
+    <h3 class={h3Cls}>{title}</h3>
+    <time class={timeCls}>{date}</time>
+    <p class={pCls}>
       {text}
     </p>
   </div>
   {#if href}
-    <a
-      {href}
-      class="inline-flex items-center py-2 px-4 text-sm font-medium text-gray-900 bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:outline-none focus:ring-gray-200 focus:text-blue-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-gray-700"
+    <a {href} class={aCls}
       >{linkname}
       <svg class="ml-2 w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
         ><path
@@ -66,6 +76,11 @@ export let icon;
   @prop text: string;
   @prop linkname: string;
   @prop icon: string;  
+  @prop liClass: string;
+  @prop divClass: string;
+  @prop timeClass: string;
+  @prop pClass: string;
+  @prop aClass: string;
   ## Example
   ```
   <script>

package/dist/timeline/TimelineItemHorizontal.svelte.d.ts

@@ -1,10 +1,17 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        [x: string]: any;
         title: string;
         date: string;
         href: string;
         text: string;
+        liClass?: string | undefined;
+        divClass?: string | undefined;
+        h3Class?: string | undefined;
+        timeClass?: string | undefined;
+        pClass?: string | undefined;
+        aClass?: string | undefined;
         linkname: string;
         icon: string;
     };
@@ -32,6 +39,11 @@ export type TimelineItemHorizontalSlots = typeof __propDef.slots;
  * @prop text: string;
  * @prop linkname: string;
  * @prop icon: string;
+ * @prop liClass: string;
+ * @prop divClass: string;
+ * @prop timeClass: string;
+ * @prop pClass: string;
+ * @prop aClass: string;
  * ## Example
  * ```
  * <script>

package/dist/timeline/TimelineItemHorizontal.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TimelineItemHorizontal.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/timeline/TimelineItemHorizontal.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAwCD,QAAA,MAAM,SAAS;;eADoG,MAAM;cAAQ,MAAM;cAAQ,MAAM;cAAQ,MAAM;kBAAY,MAAM;cAAQ,MAAM;;;;;;CAC5I,CAAC;AACxD,MAAM,MAAM,2BAA2B,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACjE,MAAM,MAAM,4BAA4B,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACnE,MAAM,MAAM,2BAA2B,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEjE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgEG;AACH,MAAM,CAAC,OAAO,OAAO,sBAAuB,SAAQ,oBAAoB,CAAC,2BAA2B,EAAE,4BAA4B,EAAE,2BAA2B,CAAC;CAC/J"}
+{"version":3,"file":"TimelineItemHorizontal.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/timeline/TimelineItemHorizontal.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA4DD,QAAA,MAAM,SAAS;;;eADwN,MAAM;cAAQ,MAAM;cAAQ,MAAM;cAAQ,MAAM;;;;;;;kBAAyH,MAAM;cAAQ,MAAM;;;;;;CACtV,CAAC;AAC/E,MAAM,MAAM,2BAA2B,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACjE,MAAM,MAAM,4BAA4B,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACnE,MAAM,MAAM,2BAA2B,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEjE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqEG;AACH,MAAM,CAAC,OAAO,OAAO,sBAAuB,SAAQ,oBAAoB,CAAC,2BAA2B,EAAE,4BAA4B,EAAE,2BAA2B,CAAC;CAC/J"}

package/dist/timeline/TimelineItemVertical.svelte

@@ -1,12 +1,18 @@
-<script>// import type { TimelineItemVerticalType } from '../types';
-// export let timelineItems: TimelineItemVerticalType[];
+<script>import { twMerge } from 'tailwind-merge';
 export let title;
 export let date;
+export let liClass = 'mb-10 ml-6';
+export let spanClass = 'flex absolute -left-3 justify-center items-center w-6 h-6 bg-blue-200 rounded-full ring-8 ring-white dark:ring-gray-900 dark:bg-blue-900';
+export let h3Class = 'flex items-center mb-1 text-lg font-semibold text-gray-900 dark:text-white';
+export let timeClass = 'block mb-2 text-sm font-normal leading-none text-gray-400 dark:text-gray-500';
+let liCls = twMerge(liClass, $$props.classLi);
+let spanCls = twMerge(spanClass, $$props.classSpan);
+let h3Cls = twMerge(h3Class, $$props.classH3);
+let timeCls = twMerge(timeClass, $$props.classTime);
 </script>
 
-<li class="mb-10 ml-6">
-  <span
-    class="flex absolute -left-3 justify-center items-center w-6 h-6 bg-blue-200 rounded-full ring-8 ring-white dark:ring-gray-900 dark:bg-blue-900">
+<li class={liCls}>
+  <span class={spanCls}>
     {#if $$slots.icon}
       <slot name="icon" />
     {:else}
@@ -24,10 +30,10 @@ export let date;
     {/if}
   </span>
 
-  <h3 class="flex items-center mb-1 text-lg font-semibold text-gray-900 dark:text-white">
+  <h3 class={h3Cls}>
     {title}
   </h3>
-  <time class="block mb-2 text-sm font-normal leading-none text-gray-400 dark:text-gray-500">{date}</time>
+  <time class={timeCls}>{date}</time>
   <slot />
 </li>
 
@@ -44,6 +50,10 @@ export let date;
   ## Props
   @prop title: string;
   @prop date: string;
+  @prop liClass: string;
+  @prop spanClass: string;
+  @prop h3Class: string;
+  @prop timeClass: string;
   ## Example
   ```
   <script>

package/dist/timeline/TimelineItemVertical.svelte.d.ts

@@ -1,8 +1,13 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        [x: string]: any;
         title: string;
         date: string;
+        liClass?: string | undefined;
+        spanClass?: string | undefined;
+        h3Class?: string | undefined;
+        timeClass?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -27,6 +32,10 @@ export type TimelineItemVerticalSlots = typeof __propDef.slots;
  * ## Props
  * @prop title: string;
  * @prop date: string;
+ * @prop liClass: string;
+ * @prop spanClass: string;
+ * @prop h3Class: string;
+ * @prop timeClass: string;
  * ## Example
  * ```
  * <script>

package/dist/timeline/TimelineItemVertical.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TimelineItemVertical.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/timeline/TimelineItemVertical.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA4BD,QAAA,MAAM,SAAS;;eADwC,MAAM;cAAQ,MAAM;;;;;;;;;CACpB,CAAC;AACxD,MAAM,MAAM,yBAAyB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAC/D,MAAM,MAAM,0BAA0B,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACjE,MAAM,MAAM,yBAAyB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAE/D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoFG;AACH,MAAM,CAAC,OAAO,OAAO,oBAAqB,SAAQ,oBAAoB,CAAC,yBAAyB,EAAE,0BAA0B,EAAE,yBAAyB,CAAC;CACvJ"}
+{"version":3,"file":"TimelineItemVertical.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/timeline/TimelineItemVertical.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAwCD,QAAA,MAAM,SAAS;;;eAD4H,MAAM;cAAQ,MAAM;;;;;;;;;;;;;CACjF,CAAC;AAC/E,MAAM,MAAM,yBAAyB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAC/D,MAAM,MAAM,0BAA0B,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACjE,MAAM,MAAM,yBAAyB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAE/D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwFG;AACH,MAAM,CAAC,OAAO,OAAO,oBAAqB,SAAQ,oBAAoB,CAAC,yBAAyB,EAAE,0BAA0B,EAAE,yBAAyB,CAAC;CACvJ"}

package/dist/toolbar/ToolbarGroup.svelte

@@ -1,11 +1,12 @@
-<script>import { getContext } from 'svelte';
+<script>import { twMerge } from 'tailwind-merge';
+import { getContext } from 'svelte';
 export let divClass = 'flex items-center space-x-1 sm:pr-4 sm:pl-4 first:sm:pl-0 last:sm:pr-0';
 const options = getContext('toolbar');
 if (options)
     $options = true;
 </script>
 
-<div class={divClass}>
+<div class={twMerge(divClass, $$props.class)}>
   <slot />
 </div>
 

package/dist/toolbar/ToolbarGroup.svelte.d.ts

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

package/dist/toolbar/ToolbarGroup.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToolbarGroup.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/toolbar/ToolbarGroup.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAqBD,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;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,oBAAoB,CAAC,iBAAiB,EAAE,kBAAkB,EAAE,iBAAiB,CAAC;CACvH"}
+{"version":3,"file":"ToolbarGroup.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/toolbar/ToolbarGroup.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAuBD,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;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,oBAAoB,CAAC,iBAAiB,EAAE,kBAAkB,EAAE,iBAAiB,CAAC;CACvH"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.38.3",
+  "version": "0.38.5",
   "description": "Flowbite components for Svelte",
   "main": "dist/index.js",
   "author": {