flowbite-svelte 1.6.3 → 1.6.5

package/dist/forms/button-toggle/CheckIcon.svelte

@@ -11,7 +11,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[CheckIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L387)
+[CheckIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L388)
 ## Props
 @prop class: className
 @prop ...restProps

package/dist/forms/button-toggle/CheckIcon.svelte.d.ts

@@ -2,7 +2,7 @@ import { type CheckIconProps } from "../..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [CheckIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L387)
+ * [CheckIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L388)
  * ## Props
  * @prop class: className
  * @prop ...restProps

package/dist/forms/checkbox/CheckboxButton.svelte

@@ -54,7 +54,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[CheckboxButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L694)
+[CheckboxButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L696)
 ## Props
 @prop children
 @prop class: className

package/dist/forms/checkbox/CheckboxButton.svelte.d.ts

@@ -2,7 +2,7 @@ import { type CheckboxButtonProps } from "../..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [CheckboxButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L694)
+ * [CheckboxButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L696)
  * ## Props
  * @prop children
  * @prop class: className

package/dist/forms/dropzone/Dropzone.svelte

@@ -60,7 +60,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[DropzoneProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L707)
+[DropzoneProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L709)
 ## Props
 @prop children
 @prop files = $bindable<FileList | null>()

package/dist/forms/dropzone/Dropzone.svelte.d.ts

@@ -2,7 +2,7 @@ import { type DropzoneProps } from "../..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [DropzoneProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L707)
+ * [DropzoneProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L709)
  * ## Props
  * @prop children
  * @prop files = $bindable<FileList | null>()

package/dist/forms/fileupload/Fileupload.svelte

@@ -26,7 +26,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[FileuploadProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L713)
+[FileuploadProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L715)
 ## Props
 @prop files = $bindable()
 @prop size = "md"

package/dist/forms/fileupload/Fileupload.svelte.d.ts

@@ -2,7 +2,7 @@ import { type FileuploadProps } from "../..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [FileuploadProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L713)
+ * [FileuploadProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L715)
  * ## Props
  * @prop files = $bindable()
  * @prop size = "md"

package/dist/forms/floating-label/FloatingLabelInput.svelte

@@ -157,7 +157,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[FloatingLabelInputProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L727)
+[FloatingLabelInputProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L729)
 ## Props
 @prop children
 @prop id = idGenerator()

package/dist/forms/floating-label/FloatingLabelInput.svelte.d.ts

@@ -2,7 +2,7 @@ import { type FloatingLabelInputProps } from "../..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [FloatingLabelInputProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L727)
+ * [FloatingLabelInputProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L729)
  * ## Props
  * @prop children
  * @prop id = idGenerator()

package/dist/forms/helper/Helper.svelte

@@ -15,7 +15,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[HelperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L750)
+[HelperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L752)
 ## Props
 @prop children
 @prop class: className

package/dist/forms/helper/Helper.svelte.d.ts

@@ -2,7 +2,7 @@ import { type HelperProps } from "../..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [HelperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L750)
+ * [HelperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L752)
  * ## Props
  * @prop children
  * @prop class: className

package/dist/forms/input-addon/InputAddon.svelte

@@ -39,7 +39,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[InputAddonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L784)
+[InputAddonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L786)
 ## Props
 @prop children
 @prop class: className

package/dist/forms/input-addon/InputAddon.svelte.d.ts

@@ -2,7 +2,7 @@ import { type InputAddonProps } from "../..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [InputAddonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L784)
+ * [InputAddonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L786)
  * ## Props
  * @prop children
  * @prop class: className

package/dist/forms/label/Label.svelte

@@ -19,7 +19,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[LabelProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L790)
+[LabelProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L792)
 ## Props
 @prop children
 @prop color = "gray"

package/dist/forms/label/Label.svelte.d.ts

@@ -2,7 +2,7 @@ import { type LabelProps } from "../..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [LabelProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L790)
+ * [LabelProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L792)
  * ## Props
  * @prop children
  * @prop color = "gray"

package/dist/forms/range/Range.svelte

@@ -13,7 +13,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[RangeProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L818)
+[RangeProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L820)
 ## Props
 @prop value = $bindable()
 @prop appearance = "none"

package/dist/forms/range/Range.svelte.d.ts

@@ -2,7 +2,7 @@ import { type RangeProps } from "../..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [RangeProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L818)
+ * [RangeProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L820)
  * ## Props
  * @prop value = $bindable()
  * @prop appearance = "none"

package/dist/forms/search/Search.svelte

@@ -36,7 +36,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[SearchProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L824)
+[SearchProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L826)
 ## Props
 @prop children
 @prop inputClass

package/dist/forms/search/Search.svelte.d.ts

@@ -2,7 +2,7 @@ import { type SearchProps } from "../..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [SearchProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L824)
+ * [SearchProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L826)
  * ## Props
  * @prop children
  * @prop inputClass

package/dist/forms/tags/Tags.svelte

@@ -65,7 +65,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[TagsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L876)
+[TagsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L878)
 ## Props
 @prop value = $bindable([])
 @prop itemClass

package/dist/forms/tags/Tags.svelte.d.ts

@@ -2,7 +2,7 @@ import { type TagsProps } from "../..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [TagsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L876)
+ * [TagsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L878)
  * ## Props
  * @prop value = $bindable([])
  * @prop itemClass

package/dist/forms/textarea/Textarea.svelte

@@ -54,7 +54,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[TextareaProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L922)
+[TextareaProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L925)
 ## Props
 @prop header
 @prop footer

package/dist/forms/textarea/Textarea.svelte.d.ts

@@ -2,7 +2,7 @@ import { type TextareaProps } from "../..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [TextareaProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L922)
+ * [TextareaProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L925)
  * ## Props
  * @prop header
  * @prop footer

package/dist/forms/timepicker/Timepicker.svelte

@@ -1,12 +1,13 @@
 <script lang="ts">
-  import { Dropdown, DropdownItem, Button, Input, ButtonGroup, Select, InputAddon, Label, Toggle, type TimepickerProps, type TimePickerOption, cn } from "../..";
+  import { Dropdown, DropdownItem, Button, Input, ButtonGroup, Select, Label, Toggle, type TimepickerProps, type TimePickerOption, cn } from "../..";
+  import { twMerge } from "tailwind-merge";
 
   // Props
-  let { id = "time", endId = "end-time", value = $bindable("00:00"), endValue = $bindable("00:00"), min = "", max = "", required = true, disabled = false, inputColor, buttonColor = "primary", Icon, type = "default", optionLabel = "Options", options = [], size = "md", divClass, inputClass, selectClass, timerangeLabel = "Choose time range", timerangeButtonLabel = "Save time", timeIntervals = [], columns = 2, onselect }: TimepickerProps = $props();
+  let { id = "time", endId = "end-time", value = $bindable("00:00"), endValue = $bindable("00:00"), min = "", max = "", required = true, disabled = false, inputColor, buttonColor = "primary", Icon, iconClass = "h-5 w-5 text-gray-500 dark:text-gray-400", type = "default", optionLabel = "Options", options = [], size = "md", divClass, inputClass, selectClass, timerangeLabel = "Choose time range", timerangeButtonLabel = "Save time", timeIntervals = [], columns = 2, onselect }: TimepickerProps = $props();
 
   const defaultDivClass = "inline-flex rounded-lg shadow-sm";
   const acturalDivCls = cn(defaultDivClass, divClass);
-  const defaultInputClass = "block disabled:cursor-not-allowed disabled:opacity-50 rtl:text-right focus:ring-0 focus:outline-none border-r-0";
+  const defaultInputClass = "block disabled:cursor-not-allowed disabled:opacity-50 rtl:text-right focus:ring-0 focus:outline-none rounded-e-lg";
   const inputCls = cn(defaultInputClass, inputClass);
   const defaultSelectClass = "text-gray-900 disabled:text-gray-400 bg-gray-50 border border-gray-300 rounded-r-lg rounded-l-none focus:ring-0 focus:outline-none block w-full border-l-1 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:disabled:text-gray-500 dark:focus:ring-primary-500 dark:focus:border-primary-500";
   const selectCls = cn(defaultSelectClass, selectClass);
@@ -116,21 +117,21 @@
 {#if type !== "inline-buttons"}
   <ButtonGroup {size} class={acturalDivCls}>
     {#if type === "default"}
-      <Input {id} color={inputColor} type="time" {min} {max} {required} {disabled} class={cn("rounded-l-lg", inputCls)} bind:value onchange={(e) => handleTimeChange(e)} />
-      <InputAddon class="rounded-r-lg">
+      <Input {id} color={inputColor} type="time" {min} {max} {required} {disabled} class={cn("relative px-2 pr-8", inputCls)} bind:value onchange={(e) => handleTimeChange(e)} />
+      <div class="pointer-events-none absolute inset-y-0 end-0 top-0 flex items-center pe-3.5">
         {#if Icon}
-          <Icon class="h-4 w-4 text-gray-500 dark:text-gray-400" />
+          <Icon class={iconClass} />
         {:else}
           <svg class="h-4 w-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
             <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6v4l3.276 3.276M19 10a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
           </svg>
         {/if}
-      </InputAddon>
+      </div>
     {:else if type === "select"}
-      <Input {id} color={inputColor} type="time" {min} {max} {required} {disabled} class={cn("w-1/3 rounded-l-lg", inputCls)} bind:value onchange={(e) => handleTimeChange(e)} />
+      <Input {id} color={inputColor} type="time" {min} {max} {required} {disabled} class={twMerge(cn("w-1/3 rounded-l-lg", inputCls), "rounded-e-none")} bind:value onchange={(e) => handleTimeChange(e)} />
       <Select selectClass={selectCls} onchange={handleOptionSelect} items={options} value={selectedOption} />
     {:else if type === "dropdown"}
-      <Input {id} color={inputColor} type="time" {min} {max} {required} {disabled} class={cn("rounded-l-lg", inputCls)} bind:value onchange={(e) => handleTimeChange(e)} />
+      <Input {id} color={inputColor} type="time" {min} {max} {required} {disabled} class={twMerge(cn("rounded-l-lg", inputCls), "rounded-e-none")} bind:value onchange={(e) => handleTimeChange(e)} />
       <Button color={buttonColor} class="!rounded-r-lg">
         {optionLabel}
         <svg class="ml-2 h-4 w-4" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
@@ -143,27 +144,31 @@
         {/each}
       </Dropdown>
     {:else if type === "range"}
-      <Input {id} color={inputColor} type="time" {min} {max} {required} {disabled} class={cn("rounded-l-lg", inputCls)} bind:value onchange={(e) => handleTimeChange(e)} />
-      <InputAddon class="rounded-none">
-        {#if Icon}
-          <Icon class="h-4 w-4 text-gray-500 dark:text-gray-400" />
-        {:else}
-          <svg class="h-4 w-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
-            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6v4l3.276 3.276M19 10a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
-          </svg>
-        {/if}
-      </InputAddon>
+      <div class="relative">
+        <Input {id} color={inputColor} type="time" {min} {max} {required} {disabled} class={twMerge(cn("relative pr-8", inputCls))} bind:value onchange={(e) => handleTimeChange(e)} />
+        <button type="button" class="pointer-events-none absolute inset-y-0 top-0 right-0 flex items-center border-0 bg-transparent pe-3.5" onclick={() => document.getElementById(id)?.click()} aria-label="Open time picker">
+          {#if Icon}
+            <Icon class={iconClass} />
+          {:else}
+            <svg class="h-4 w-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
+              <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6v4l3.276 3.276M19 10a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
+            </svg>
+          {/if}
+        </button>
+      </div>
       <span class="flex items-center justify-center px-2 text-gray-500 dark:text-gray-400">-</span>
-      <Input id={endId} color={inputColor} type="time" {min} {max} {required} {disabled} class={cn("rounded-none", inputCls)} bind:value={endValue} onchange={(e) => handleTimeChange(e, true)} />
-      <InputAddon class="rounded-r-lg">
-        {#if Icon}
-          <Icon class="h-4 w-4 text-gray-500 dark:text-gray-400" />
-        {:else}
-          <svg class="h-4 w-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
-            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6v4l3.276 3.276M19 10a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
-          </svg>
-        {/if}
-      </InputAddon>
+      <div class="relative">
+        <Input id={endId} color={inputColor} type="time" {min} {max} {required} {disabled} class={cn(inputCls, "relative pr-8")} bind:value={endValue} onchange={(e) => handleTimeChange(e, true)} />
+        <button type="button" class="pointer-events-none absolute inset-y-0 top-0 right-0 flex items-center border-0 bg-transparent pe-3.5" onclick={() => document.getElementById(endId)?.click()} aria-label="Open end time picker">
+          {#if Icon}
+            <Icon class={iconClass} />
+          {:else}
+            <svg class="h-4 w-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
+              <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6v4l3.276 3.276M19 10a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
+            </svg>
+          {/if}
+        </button>
+      </div>
     {:else if type === "timerange-dropdown"}
       <Button color={buttonColor} {size} class="!rounded-r-lg">
         {timerangeLabel}
@@ -174,11 +179,11 @@
           <div class="flex space-x-4">
             <div class="flex flex-col">
               <Label for={id}>Start time:</Label>
-              <Input {id} color={inputColor} type="time" {min} {max} {required} {disabled} class={cn("w-24 rounded-l-lg !border-r", inputCls)} bind:value onchange={(e) => handleTimeChange(e)} />
+              <Input {id} color={inputColor} type="time" {min} {max} {required} {disabled} class={cn("w-24 rounded-l-lg !border-r px-2", inputCls)} bind:value onchange={(e) => handleTimeChange(e)} />
             </div>
             <div class="flex flex-col">
               <Label for={endId}>End time:</Label>
-              <Input id={endId} color={inputColor} type="time" {min} {max} {required} {disabled} class={cn("w-24 rounded-l-lg !border-r", inputCls)} bind:value={endValue} onchange={(e) => handleTimeChange(e, true)} />
+              <Input id={endId} color={inputColor} type="time" {min} {max} {required} {disabled} class={cn("w-24 rounded-l-lg !border-r px-2", inputCls)} bind:value={endValue} onchange={(e) => handleTimeChange(e, true)} />
             </div>
           </div>
           <Button color={buttonColor} class="w-full !rounded-l-lg" onclick={applyTimerange}>
@@ -195,11 +200,11 @@
           <div class="flex space-x-4 p-2.5">
             <div class="flex flex-col">
               <Label for={id}>Start time:</Label>
-              <Input {id} color={inputColor} type="time" {min} {max} {required} {disabled} class={cn("w-24 rounded-lg !border-r", inputCls)} bind:value onchange={(e) => handleTimeChange(e)} />
+              <Input {id} color={inputColor} type="time" {min} {max} {required} {disabled} class={cn("w-24 rounded-lg !border-r px-2", inputCls)} bind:value onchange={(e) => handleTimeChange(e)} />
             </div>
             <div class="flex flex-col">
               <Label for={endId}>End time:</Label>
-              <Input id={endId} color={inputColor} type="time" {min} {max} {required} {disabled} class={cn("w-24 rounded-lg !border-r", inputCls)} bind:value={endValue} onchange={(e) => handleTimeChange(e, true)} />
+              <Input id={endId} color={inputColor} type="time" {min} {max} {required} {disabled} class={cn("w-24 rounded-lg !border-r px-2", inputCls)} bind:value={endValue} onchange={(e) => handleTimeChange(e, true)} />
             </div>
           </div>
         {/if}
@@ -220,7 +225,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[TimepickerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L894)
+[TimepickerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L896)
 ## Props
 @prop id = "time"
 @prop endId = "end-time"
@@ -233,6 +238,7 @@
 @prop inputColor
 @prop buttonColor = "primary"
 @prop Icon
+@prop iconClass = "h-5 w-5 text-gray-500 dark:text-gray-400"
 @prop type = "default"
 @prop optionLabel = "Options"
 @prop options = []

package/dist/forms/timepicker/Timepicker.svelte.d.ts

@@ -2,7 +2,7 @@ import { type TimepickerProps } from "../..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [TimepickerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L894)
+ * [TimepickerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L896)
  * ## Props
  * @prop id = "time"
  * @prop endId = "end-time"
@@ -15,6 +15,7 @@ import { type TimepickerProps } from "../..";
  * @prop inputColor
  * @prop buttonColor = "primary"
  * @prop Icon
+ * @prop iconClass = "h-5 w-5 text-gray-500 dark:text-gray-400"
  * @prop type = "default"
  * @prop optionLabel = "Options"
  * @prop options = []

package/dist/forms/toggle/Toggle.svelte

@@ -22,7 +22,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ToggleProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L944)
+[ToggleProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L947)
 ## Props
 @prop children
 @prop size = "default"

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

@@ -2,7 +2,7 @@ import { type ToggleProps } from "../..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [ToggleProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L944)
+ * [ToggleProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L947)
  * ## Props
  * @prop children
  * @prop size = "default"

package/dist/gallery/Gallery.svelte

@@ -35,7 +35,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[GalleryProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L961)
+[GalleryProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L964)
 ## Props
 @prop children
 @prop figure

package/dist/gallery/Gallery.svelte.d.ts

@@ -2,7 +2,7 @@ import { type GalleryProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [GalleryProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L961)
+ * [GalleryProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L964)
  * ## Props
  * @prop children
  * @prop figure

package/dist/indicator/Indicator.svelte

@@ -28,7 +28,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[IndicatorProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L972)
+[IndicatorProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L975)
 ## Props
 @prop children
 @prop color = "primary"

package/dist/indicator/Indicator.svelte.d.ts

@@ -2,7 +2,7 @@ import { type IndicatorProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [IndicatorProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L972)
+ * [IndicatorProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L975)
  * ## Props
  * @prop children
  * @prop color = "primary"

package/dist/kbd/Kbd.svelte

@@ -14,7 +14,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[KbdProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L983)
+[KbdProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L986)
 ## Props
 @prop children
 @prop class: className

package/dist/kbd/Kbd.svelte.d.ts

@@ -2,7 +2,7 @@ import { type KbdProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [KbdProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L983)
+ * [KbdProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L986)
  * ## Props
  * @prop children
  * @prop class: className

package/dist/list-group/Listgroup.svelte

@@ -42,7 +42,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ListgroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1002)
+[ListgroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1005)
 ## Props
 @prop children
 @prop items

package/dist/list-group/Listgroup.svelte.d.ts

@@ -2,7 +2,7 @@ import { type ListgroupProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [ListgroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1002)
+ * [ListgroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1005)
  * ## Props
  * @prop children
  * @prop items

package/dist/list-group/ListgroupItem.svelte

@@ -41,7 +41,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ListgroupItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1013)
+[ListgroupItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1016)
 ## Props
 @prop children
 @prop active

package/dist/list-group/ListgroupItem.svelte.d.ts

@@ -2,7 +2,7 @@ import { type ListgroupItemProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [ListgroupItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1013)
+ * [ListgroupItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1016)
  * ## Props
  * @prop children
  * @prop active

package/dist/mega-menu/MegaMenu.svelte

@@ -31,7 +31,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[MegaMenuProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1024)
+[MegaMenuProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1027)
 ## Props
 @prop children
 @prop extra

package/dist/mega-menu/MegaMenu.svelte.d.ts

@@ -2,7 +2,7 @@ import { type MegaMenuProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [MegaMenuProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1024)
+ * [MegaMenuProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1027)
  * ## Props
  * @prop children
  * @prop extra

package/dist/modal/Modal.svelte

@@ -91,7 +91,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ModalProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1035)
+[ModalProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1038)
 ## Props
 @prop children
 @prop oncancel

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

@@ -2,7 +2,7 @@ import { type ModalProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [ModalProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1035)
+ * [ModalProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1038)
  * ## Props
  * @prop children
  * @prop oncancel

package/dist/navbar/Menu.svelte

@@ -33,7 +33,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[MenuProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1053)
+[MenuProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1056)
 ## Props
 @prop size = "24"
 @prop color = "currentColor"

package/dist/navbar/Menu.svelte.d.ts

@@ -2,7 +2,7 @@ import type { MenuProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [MenuProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1053)
+ * [MenuProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1056)
  * ## Props
  * @prop size = "24"
  * @prop color = "currentColor"

package/dist/navbar/NavBrand.svelte

@@ -15,7 +15,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[NavBrandProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1073)
+[NavBrandProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1076)
 ## Props
 @prop children
 @prop class: className