flowbite-svelte 2.0.0-next.2 → 2.0.0-next.4

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

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

package/dist/footer/FooterCopyright.svelte

@@ -3,7 +3,7 @@
   import { footerCopyright } from "./theme";
   import clsx from "clsx";
   import type { FooterCopyrightProps } from "..";
-  import { getTheme } from "../theme/themeUtils";
+  import { getTheme } from "../theme-provider/themeUtils";
 
   let { href, by, copyrightMessage = "All Rights Reserved.", year, classes, class: className, ...restProps }: FooterCopyrightProps = $props();
 
@@ -32,7 +32,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[FooterCopyrightProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L695)
+[FooterCopyrightProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L702)
 ## Props
 @prop href
 @prop by

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

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

package/dist/footer/FooterIcon.svelte

@@ -2,7 +2,7 @@
   import { footerIcon } from "./theme";
   import clsx from "clsx";
   import type { FooterIconProps } from "..";
-  import { getTheme } from "../theme/themeUtils";
+  import { getTheme } from "../theme-provider/themeUtils";
 
   let { children, href, ariaLabel, class: className, ...restProps }: FooterIconProps = $props();
 
@@ -21,7 +21,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[FooterIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L702)
+[FooterIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L709)
 ## Props
 @prop children
 @prop href

package/dist/footer/FooterIcon.svelte.d.ts

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

package/dist/footer/FooterLink.svelte

@@ -2,7 +2,7 @@
   import { footerLink } from "./theme";
   import clsx from "clsx";
   import type { FooterLinkProps } from "..";
-  import { getTheme } from "../theme/themeUtils";
+  import { getTheme } from "../theme-provider/themeUtils";
 
   let { children, href, classes, class: className, ...restProps }: FooterLinkProps = $props();
 
@@ -23,7 +23,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[FooterLinkProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L712)
+[FooterLinkProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L719)
 ## Props
 @prop children
 @prop href

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

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

package/dist/footer/FooterLinkGroup.svelte

@@ -2,7 +2,7 @@
   import { footerLinkGroup } from "./theme";
   import clsx from "clsx";
   import type { FooterLinkGroupProps } from "..";
-  import { getTheme } from "../theme/themeUtils";
+  import { getTheme } from "../theme-provider/themeUtils";
 
   let { class: className, children, ...restProps }: FooterLinkGroupProps = $props();
 
@@ -17,7 +17,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[FooterLinkGroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L708)
+[FooterLinkGroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L715)
 ## Props
 @prop class: className
 @prop children

package/dist/footer/FooterLinkGroup.svelte.d.ts

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

package/dist/footer/theme.d.ts

@@ -1,5 +1,5 @@
 import { type VariantProps } from "tailwind-variants";
-import type { Classes } from "../theme/themeUtils";
+import type { Classes } from "../theme-provider/themeUtils";
 export declare const footer: import("tailwind-variants").TVReturnType<{
     footerType: {
         default: string;
@@ -30,16 +30,16 @@ export declare const footerBrand: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-merge").ClassNameValue | {
             base?: import("tailwind-merge").ClassNameValue;
-            span?: import("tailwind-merge").ClassNameValue;
             img?: import("tailwind-merge").ClassNameValue;
+            span?: import("tailwind-merge").ClassNameValue;
         };
     };
 } | {
     [x: string]: {
         [x: string]: import("tailwind-merge").ClassNameValue | {
             base?: import("tailwind-merge").ClassNameValue;
-            span?: import("tailwind-merge").ClassNameValue;
             img?: import("tailwind-merge").ClassNameValue;
+            span?: import("tailwind-merge").ClassNameValue;
         };
     };
 } | {}, {
@@ -50,8 +50,8 @@ export declare const footerBrand: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-merge").ClassNameValue | {
             base?: import("tailwind-merge").ClassNameValue;
-            span?: import("tailwind-merge").ClassNameValue;
             img?: import("tailwind-merge").ClassNameValue;
+            span?: import("tailwind-merge").ClassNameValue;
         };
     };
 } | {}, {

package/dist/forms/checkbox/Checkbox.svelte

@@ -3,7 +3,7 @@
   import clsx from "clsx";
   import { type CheckboxProps } from "../..";
   import Label from "../label/Label.svelte";
-  import { getTheme } from "../../theme/themeUtils";
+  import { getTheme } from "../../theme-provider/themeUtils";
 
   let {
     children,

package/dist/forms/checkbox/CheckboxButton.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { CheckboxButtonProps } from "../..";
   import Button from "../../buttons/Button.svelte";
-  import { getTheme } from "../../theme/themeUtils";
+  import { getTheme } from "../../theme-provider/themeUtils";
   import clsx from "clsx";
   import Checkbox from "./Checkbox.svelte";
   import { checkboxButton } from "./theme";
@@ -22,7 +22,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[CheckboxButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L738)
+[CheckboxButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L745)
 ## 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#L738)
+ * [CheckboxButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L745)
  * ## Props
  * @prop children
  * @prop class: className

package/dist/forms/checkbox/theme.d.ts

@@ -1,5 +1,5 @@
 import { type VariantProps } from "tailwind-variants";
-import type { Classes } from "../../theme/themeUtils";
+import type { Classes } from "../../theme-provider/themeUtils";
 export declare const checkbox: import("tailwind-variants").TVReturnType<{
     color: {
         brand: {

package/dist/forms/dropzone/Dropzone.svelte

@@ -3,7 +3,7 @@
   import { dropzone } from "./theme";
   import clsx from "clsx";
   import type { DropzoneProps } from "../..";
-  import { getTheme } from "../../theme/themeUtils";
+  import { getTheme } from "../../theme-provider/themeUtils";
 
   type HTMLInputElementWithFiles = HTMLInputElement & { files: FileList | null };
 
@@ -56,7 +56,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[DropzoneProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L748)
+[DropzoneProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L755)
 ## 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#L748)
+ * [DropzoneProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L755)
  * ## Props
  * @prop children
  * @prop files = $bindable<FileList | null>()

package/dist/forms/fileupload/Fileupload.svelte

@@ -3,10 +3,10 @@
   import clsx from "clsx";
   import type { FileuploadProps } from "../..";
   import CloseButton from "../../utils/CloseButton.svelte";
-  import { getTheme } from "../../theme/themeUtils";
+  import { getTheme } from "../../theme-provider/themeUtils";
   import { createDismissableContext } from "../../utils/dismissable";
 
-  let { files = $bindable(), size = "md", clearable = false, elementRef = $bindable(), class: className, classes, clearableColor = "none", clearableOnClick, ...restProps }: FileuploadProps = $props();
+  let { files = $bindable(), size = "md", clearable = false, elementRef = $bindable(), class: className, classes, clearableOnClick, closeButtonProps, ...restProps }: FileuploadProps = $props();
 
   const styling = $derived(classes);
 
@@ -36,12 +36,22 @@
 
   // Check if we should show the clear button
   const showClearButton = $derived(clearable && files && files.length > 0);
+
+  const finalCloseProps = $derived({
+    class: close({ class: clsx(theme?.close, styling?.close) }),
+    color: closeButtonProps?.color ?? "gray",
+    ariaLabel: closeButtonProps?.ariaLabel ?? "Clear selected files",
+    size: closeButtonProps?.size,
+    classes: closeButtonProps?.classes ?? { svg: clsx(theme?.svg, styling?.svg) },
+    name: closeButtonProps?.name,
+    onclick: closeButtonProps?.onclick
+  });
 </script>
 
 <div class={wrapper({ class: clsx(theme?.wrapper, styling?.wrapper) })}>
   <input type="file" onchange={handleChange} bind:this={elementRef} {...restProps} class={base({ size, class: clsx(theme?.base, className) })} />
   {#if showClearButton}
-    <CloseButton class={close({ class: clsx(theme?.close, styling?.close) })} color={clearableColor} ariaLabel="Clear selected files" svgClass={clsx(theme?.svg, styling?.svg)} />
+    <CloseButton {...finalCloseProps} />
   {/if}
 </div>
 
@@ -49,7 +59,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[FileuploadProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L757)
+[FileuploadProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L764)
 ## Props
 @prop files = $bindable()
 @prop size = "md"
@@ -57,7 +67,7 @@
 @prop elementRef = $bindable()
 @prop class: className
 @prop classes
-@prop clearableColor = "none"
 @prop clearableOnClick
+@prop closeButtonProps
 @prop ...restProps
 -->

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#L757)
+ * [FileuploadProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L764)
  * ## Props
  * @prop files = $bindable()
  * @prop size = "md"
@@ -10,8 +10,8 @@ import type { FileuploadProps } from "../..";
  * @prop elementRef = $bindable()
  * @prop class: className
  * @prop classes
- * @prop clearableColor = "none"
  * @prop clearableOnClick
+ * @prop closeButtonProps
  * @prop ...restProps
  */
 declare const Fileupload: import("svelte").Component<FileuploadProps, {}, "elementRef" | "files">;

package/dist/forms/fileupload/theme.d.ts

@@ -1,5 +1,5 @@
 import { type VariantProps } from "tailwind-variants";
-import type { Classes } from "../../theme/themeUtils";
+import type { Classes } from "../../theme-provider/themeUtils";
 export type FileuploadViariants = VariantProps<typeof fileupload> & Classes<typeof fileupload>;
 export declare const fileupload: import("tailwind-variants").TVReturnType<{
     size: {

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

@@ -4,7 +4,7 @@
   import clsx from "clsx";
   import type { FloatingLabelInputProps } from "../..";
   import CloseButton from "../../utils/CloseButton.svelte";
-  import { getTheme } from "../../theme/themeUtils";
+  import { getTheme } from "../../theme-provider/themeUtils";
   import { createDismissableContext } from "../../utils/dismissable";
 
   let {
@@ -20,12 +20,12 @@
     class: className,
     classes,
     clearable,
-    clearableColor = "none",
     clearableOnClick,
     data = [],
     maxSuggestions = 5,
     onSelect,
     placeholder,
+    closeButtonProps,
     ...restProps
   }: FloatingLabelInputProps = $props();
 
@@ -160,6 +160,16 @@
   }
 
   createDismissableContext(clearAll);
+
+  const finalCloseProps = $derived({
+    class: close({ class: clsx(theme?.close, styling?.close) }),
+    color: closeButtonProps?.color ?? "gray",
+    ariaLabel: closeButtonProps?.ariaLabel ?? "Clear search value",
+    size: closeButtonProps?.size,
+    classes: closeButtonProps?.classes ?? { svg: clsx(theme?.svg, styling?.svg) },
+    name: closeButtonProps?.name,
+    onclick: closeButtonProps?.onclick
+  });
 </script>
 
 {#if clearable}
@@ -181,7 +191,7 @@
     onkeydown={handleKeydown}
   />
   {#if showClearButton}
-    <CloseButton class={close({ class: clsx(theme?.close, styling?.close) })} color={clearableColor} ariaLabel="Clear search value" svgClass={clsx(styling?.svg)} />
+    <CloseButton {...finalCloseProps} />
   {/if}
   <label for={id} class={label({ class: clsx(theme?.label, styling?.label) })}>
     {@render children()}
@@ -207,7 +217,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[FloatingLabelInputProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L768)
+[FloatingLabelInputProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L775)
 ## Props
 @prop children
 @prop id = idGenerator()
@@ -221,11 +231,11 @@
 @prop class: className
 @prop classes
 @prop clearable
-@prop clearableColor = "none"
 @prop clearableOnClick
 @prop data = []
 @prop maxSuggestions = 5
 @prop onSelect
 @prop placeholder
+@prop closeButtonProps
 @prop ...restProps
 -->

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#L768)
+ * [FloatingLabelInputProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L775)
  * ## Props
  * @prop children
  * @prop id = idGenerator()
@@ -16,12 +16,12 @@ import type { FloatingLabelInputProps } from "../..";
  * @prop class: className
  * @prop classes
  * @prop clearable
- * @prop clearableColor = "none"
  * @prop clearableOnClick
  * @prop data = []
  * @prop maxSuggestions = 5
  * @prop onSelect
  * @prop placeholder
+ * @prop closeButtonProps
  * @prop ...restProps
  */
 declare const FloatingLabelInput: import("svelte").Component<FloatingLabelInputProps, {}, "value" | "elementRef">;

package/dist/forms/floating-label/theme.d.ts

@@ -1,5 +1,5 @@
 import { type VariantProps } from "tailwind-variants";
-import type { Classes } from "../../theme/themeUtils";
+import type { Classes } from "../../theme-provider/themeUtils";
 export type FloatingLabelInputVaratiants = VariantProps<typeof floatingLabelInput> & Classes<typeof floatingLabelInput>;
 export declare const floatingLabelInput: import("tailwind-variants").TVReturnType<{
     variant: {

package/dist/forms/helper/Helper.svelte

@@ -2,7 +2,7 @@
   import { helper } from "./theme";
   import type { HelperProps } from "../..";
   import clsx from "clsx";
-  import { getTheme } from "../../theme/themeUtils";
+  import { getTheme } from "../../theme-provider/themeUtils";
 
   let { children, class: className, color = "brand", ...restProps }: HelperProps = $props();
 
@@ -19,7 +19,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[HelperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L789)
+[HelperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L796)
 ## 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#L789)
+ * [HelperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L796)
  * ## Props
  * @prop children
  * @prop class: className

package/dist/forms/helper/theme.d.ts

@@ -4,6 +4,8 @@ export declare const helper: import("tailwind-variants").TVReturnType<{
     color: {
         disabled: string;
         brand: string;
+        success: string;
+        danger: string;
         primary: string;
         secondary: string;
         green: string;
@@ -29,6 +31,8 @@ export declare const helper: import("tailwind-variants").TVReturnType<{
     color: {
         disabled: string;
         brand: string;
+        success: string;
+        danger: string;
         primary: string;
         secondary: string;
         green: string;
@@ -54,6 +58,8 @@ export declare const helper: import("tailwind-variants").TVReturnType<{
     color: {
         disabled: string;
         brand: string;
+        success: string;
+        danger: string;
         primary: string;
         secondary: string;
         green: string;

package/dist/forms/helper/theme.js

@@ -5,6 +5,8 @@ export const helper = tv({
         color: {
             disabled: "text-gray-400 dark:text-gray-500",
             brand: "text-body",
+            success: "text-fg-success-strong",
+            danger: "text-fg-danger-strong",
             primary: "text-primary-500 dark:text-primary-400",
             secondary: "text-secondary-500 dark:text-secondary-400",
             green: "text-green-500 dark:text-green-400",

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

@@ -5,7 +5,7 @@
   import { clampSize } from "../input-field";
   import { getButtonGroupContext } from "../../context";
   import { inputAddon } from "./theme";
-  import { getTheme } from "../../theme/themeUtils";
+  import { getTheme } from "../../theme-provider/themeUtils";
 
   let { children, class: className, size, ...restProps }: InputAddonProps = $props();
 
@@ -40,7 +40,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[InputAddonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L815)
+[InputAddonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L822)
 ## 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#L815)
+ * [InputAddonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L822)
  * ## Props
  * @prop children
  * @prop class: className

package/dist/forms/input-addon/theme.d.ts

@@ -1,5 +1,5 @@
 import { type VariantProps } from "tailwind-variants";
-import type { Classes } from "../../theme/themeUtils";
+import type { Classes } from "../../theme-provider/themeUtils";
 export type InputAddonVariants = VariantProps<typeof inputAddon> & Classes<typeof inputAddon>;
 export declare const inputAddon: import("tailwind-variants").TVReturnType<{
     size: {

package/dist/forms/input-field/Input.svelte

@@ -6,7 +6,7 @@
   import CloseButton from "../../utils/CloseButton.svelte";
   import { input } from "./theme";
   import { clampSize } from "./index";
-  import { getTheme } from "../../theme/themeUtils";
+  import { getTheme } from "../../theme-provider/themeUtils";
   import { createDismissableContext } from "../../utils/dismissable";
 
   let {
@@ -20,7 +20,6 @@
     color = "default",
     class: className,
     classes,
-    clearableColor = "none",
     clearableOnClick,
     data = [],
     maxSuggestions = 5,
@@ -29,6 +28,7 @@
     onfocus,
     onblur,
     onkeydown,
+    closeButtonProps,
     ...restProps
   }: InputProps<InputValue> = $props();
 
@@ -230,6 +230,16 @@
       elementRef.focus();
     }
   }
+
+  const finalCloseProps = $derived({
+    class: close({ class: clsx(theme?.close, styling?.close) }),
+    color: closeButtonProps?.color ?? "gray",
+    ariaLabel: closeButtonProps?.ariaLabel ?? "Clear search value",
+    size: closeButtonProps?.size,
+    classes: closeButtonProps?.classes ?? { svg: clsx(theme?.svg, styling?.svg) },
+    name: closeButtonProps?.name,
+    onclick: closeButtonProps?.onclick
+  });
 </script>
 
 {#if clearable}
@@ -284,7 +294,7 @@
       class={clsx(!wrapped && base(), inputCls({ class: clsx(theme?.input, className) }))}
     />
     {#if value !== undefined && value !== "" && clearable}
-      <CloseButton class={close({ class: clsx(theme?.close, styling?.close) })} color={clearableColor} aria-label="Clear search value" svgClass={clsx(styling?.svg)} />
+      <CloseButton {...finalCloseProps} />
     {/if}
   {/if}
 {/snippet}

package/dist/forms/input-field/theme.d.ts

@@ -1,5 +1,5 @@
 import { type VariantProps } from "tailwind-variants";
-import type { Classes } from "../../theme/themeUtils";
+import type { Classes } from "../../theme-provider/themeUtils";
 export type InputVariants = VariantProps<typeof input> & Classes<typeof input>;
 export declare const input: import("tailwind-variants").TVReturnType<{
     size: {

package/dist/forms/label/Label.svelte

@@ -2,7 +2,7 @@
   import { label } from "./theme";
   import clsx from "clsx";
   import type { LabelProps } from "../..";
-  import { getTheme } from "../../theme/themeUtils";
+  import { getTheme } from "../../theme-provider/themeUtils";
 
   let { children, color = "gray", show = true, class: className, ...restProps }: LabelProps = $props();
 
@@ -23,7 +23,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[LabelProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L830)
+[LabelProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L838)
 ## 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#L830)
+ * [LabelProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L838)
  * ## Props
  * @prop children
  * @prop color = "gray"