@deepnoid/ui 0.1.98 → 0.1.100

package/dist/{chunk-C5FUPNE4.mjs → chunk-AATFH6PB.mjs}

@@ -1,7 +1,10 @@
 "use client";
+import {
+  progress_default
+} from "./chunk-5FFTHFBX.mjs";
 import {
   input_default
-} from "./chunk-VFFLJN5N.mjs";
+} from "./chunk-FESRJFPF.mjs";
 import {
   button_default
 } from "./chunk-IW57F7WZ.mjs";
@@ -17,10 +20,12 @@ function FileUpload({
   buttonText,
   maxSizeMB = 10,
   placeholder,
+  errorMessage,
   accept = [],
   acceptErrorMessage = "The file type is not allowed.",
   sizeErrorMessage = `File is too large.`,
   onFileUpload,
+  onCancelUpload,
   helperMessage,
   showProgress,
   name,
@@ -30,7 +35,7 @@ function FileUpload({
   const uploadIntervalRef = useRef(null);
   const [file, setFile] = useState(null);
   const [uploadProgress, setUploadProgress] = useState(0);
-  const [errorMessage, setErrorMessage] = useState("");
+  const [message, setMessage] = useState(errorMessage);
   const slots = fileUploadStyle();
   const handleButtonClick = () => {
     var _a;
@@ -64,12 +69,12 @@ function FileUpload({
     if (!selectedFile) return;
     const error = validateFile(selectedFile);
     if (error) {
-      setErrorMessage(error);
+      setMessage(error);
       setFile(null);
       return;
     }
     setFile(selectedFile);
-    setErrorMessage("");
+    setMessage("");
     startUploadSimulation(selectedFile);
   };
   const handleCancelUpload = () => {
@@ -78,7 +83,8 @@ function FileUpload({
     }
     setFile(null);
     setUploadProgress(0);
-    setErrorMessage("");
+    setMessage("");
+    if (onCancelUpload) onCancelUpload();
   };
   useEffect(() => {
     return () => {
@@ -87,10 +93,24 @@ function FileUpload({
       }
     };
   }, []);
+  useEffect(() => {
+    setMessage(errorMessage);
+  }, [setMessage, errorMessage]);
   return /* @__PURE__ */ jsxs("div", { className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
     /* @__PURE__ */ jsxs("div", { className: slots.container({ class: classNames == null ? void 0 : classNames.container }), children: [
       /* @__PURE__ */ jsxs("div", { className: slots.inputWrapper(), children: [
-        /* @__PURE__ */ jsx(input_default, { name, readOnly: true, variant: "outline", full: true, placeholder, defaultValue: file == null ? void 0 : file.name }),
+        /* @__PURE__ */ jsx(
+          input_default,
+          {
+            name,
+            readOnly: true,
+            variant: "outline",
+            full: true,
+            placeholder,
+            defaultValue: file == null ? void 0 : file.name,
+            errorMessage: message
+          }
+        ),
         file && /* @__PURE__ */ jsx(
           icon_button_default,
           {
@@ -106,9 +126,8 @@ function FileUpload({
       /* @__PURE__ */ jsx(button_default, { type: "button", variant: "outline", onClick: handleButtonClick, children: buttonText }),
       /* @__PURE__ */ jsx("input", { ref: fileInputRef, type: "file", hidden: true, accept: accept.join(","), onChange: handleFileChange })
     ] }),
-    showProgress && file && uploadProgress < 100 && /* @__PURE__ */ jsx("div", { className: slots.progressBarContainer(), children: /* @__PURE__ */ jsx("div", { className: slots.progressBar(), style: { width: `${uploadProgress}%` } }) }),
-    !errorMessage && helperMessage && /* @__PURE__ */ jsx("p", { className: slots.helperMessage(), children: helperMessage }),
-    errorMessage && /* @__PURE__ */ jsx("p", { className: slots.errorMessage(), children: errorMessage })
+    showProgress && file && uploadProgress < 100 && /* @__PURE__ */ jsx(progress_default, { value: uploadProgress }),
+    !message && helperMessage && /* @__PURE__ */ jsx("p", { className: slots.helperMessage(), children: helperMessage })
   ] });
 }
 FileUpload.displayName = "FileUpload";
@@ -116,11 +135,9 @@ var fileUpload_default = FileUpload;
 var fileUploadStyle = tv({
   slots: {
     base: ["flex", "flex-col", "gap-[5px]"],
-    container: ["flex", "items-center", "gap-[10px]"],
+    container: ["flex", "gap-[10px]"],
     inputWrapper: ["relative", "flex-1"],
     cancelButton: ["absolute", "top-1/2", "right-0", "-translate-y-1/2"],
-    progressBarContainer: ["w-full", "h-[5px]", "bg-neutral-light", "rounded-full", "overflow-hidden"],
-    progressBar: ["h-full", "bg-primary-main", "transition-all"],
     errorMessage: ["text-danger-main", "text-sm"],
     helperMessage: ["text-neutral-main", "text-sm"]
   }

package/dist/{chunk-VFFLJN5N.mjs → chunk-FESRJFPF.mjs}

@@ -185,12 +185,10 @@ var inputStyle = tv(
       errorMessage: ["text-danger-main"],
       readonlyWrapper: [
         "pointer-events-none",
-        "!text-body-foreground",
-        "placeholder:!text-body-foreground",
-        "group-has-[p.error]/input:!text-danger-main",
-        "group-has-[p.error]/input:placeholder:!text-danger-main",
-        "[&>input]:!text-body-foreground",
-        "[&>input]:placeholder:!text-body-foreground"
+        "text-body-foreground",
+        "placeholder:text-body-foreground",
+        "[&>input]:text-body-foreground",
+        "[&>input]:placeholder:text-body-foreground"
       ],
       readonly: []
     },
@@ -299,6 +297,16 @@ var inputStyle = tv(
           helperMessage: ["!text-neutral-light"],
           errorMessage: ["!text-danger-light"]
         }
+      },
+      readonly: {
+        true: {
+          readonlyWrapper: ["pointer-events-none"],
+          input: [
+            "group-has-[p.error]/input:!text-danger-main",
+            "group-has-[p.error]/input:placeholder:!text-danger-main"
+          ],
+          content: ["group-has-[p.error]/input:!text-danger-main"]
+        }
       }
     },
     compoundVariants: [
@@ -368,6 +376,22 @@ var inputStyle = tv(
             "group-has-[p.error]/input:placeholder:!text-danger-light"
           ]
         }
+      },
+      {
+        readonly: true,
+        color: "primary",
+        class: {
+          input: ["!text-primary-main", "placeholder:!text-primary-main"],
+          content: ["!text-primary-main"]
+        }
+      },
+      {
+        readonly: true,
+        color: "secondary",
+        class: {
+          input: ["!text-secondary-main", "placeholder:!text-secondary-main"],
+          content: ["!text-secondary-main"]
+        }
       }
     ],
     defaultVariants: {

package/dist/{chunk-45N5ZAIJ.mjs → chunk-JN6ELUAT.mjs}

@@ -4,7 +4,7 @@ import {
 } from "./chunk-F3HENRVM.mjs";
 import {
   input_default
-} from "./chunk-VFFLJN5N.mjs";
+} from "./chunk-FESRJFPF.mjs";
 import {
   Icon_default
 } from "./chunk-SCZB4QC7.mjs";

package/dist/{chunk-VIEBF2WH.mjs → chunk-ZAHEKJIU.mjs}

@@ -7,7 +7,7 @@ import {
 } from "./chunk-M37VBNB3.mjs";
 import {
   pagination_default
-} from "./chunk-45N5ZAIJ.mjs";
+} from "./chunk-JN6ELUAT.mjs";
 import {
   checkbox_default
 } from "./chunk-XZ5DXOJQ.mjs";

package/dist/components/fileUpload/fileUpload.d.mts

@@ -7,16 +7,18 @@ type FileUploadProps = {
     buttonText: string;
     maxSizeMB?: number;
     placeholder?: string;
+    errorMessage?: string;
     accept?: string[];
     acceptErrorMessage?: string;
     sizeErrorMessage?: string;
     onFileUpload?: (file: File) => void;
+    onCancelUpload?: () => void;
     helperMessage?: string;
     showProgress?: boolean;
     name?: string;
     classNames?: SlotsToClasses<FileUploadSlots>;
 };
-declare function FileUpload({ buttonText, maxSizeMB, placeholder, accept, acceptErrorMessage, sizeErrorMessage, onFileUpload, helperMessage, showProgress, name, classNames, }: FileUploadProps): react_jsx_runtime.JSX.Element;
+declare function FileUpload({ buttonText, maxSizeMB, placeholder, errorMessage, accept, acceptErrorMessage, sizeErrorMessage, onFileUpload, onCancelUpload, helperMessage, showProgress, name, classNames, }: FileUploadProps): react_jsx_runtime.JSX.Element;
 declare namespace FileUpload {
     var displayName: string;
 }
@@ -30,8 +32,6 @@ declare const fileUploadStyle: tailwind_variants.TVReturnType<{
             errorMessage?: tailwind_merge.ClassNameValue;
             inputWrapper?: tailwind_merge.ClassNameValue;
             cancelButton?: tailwind_merge.ClassNameValue;
-            progressBarContainer?: tailwind_merge.ClassNameValue;
-            progressBar?: tailwind_merge.ClassNameValue;
         };
     };
 } | {
@@ -43,8 +43,6 @@ declare const fileUploadStyle: tailwind_variants.TVReturnType<{
             errorMessage?: tailwind_merge.ClassNameValue;
             inputWrapper?: tailwind_merge.ClassNameValue;
             cancelButton?: tailwind_merge.ClassNameValue;
-            progressBarContainer?: tailwind_merge.ClassNameValue;
-            progressBar?: tailwind_merge.ClassNameValue;
         };
     };
 } | {}, {
@@ -52,8 +50,6 @@ declare const fileUploadStyle: tailwind_variants.TVReturnType<{
     container: string[];
     inputWrapper: string[];
     cancelButton: string[];
-    progressBarContainer: string[];
-    progressBar: string[];
     errorMessage: string[];
     helperMessage: string[];
 }, undefined, {
@@ -65,8 +61,6 @@ declare const fileUploadStyle: tailwind_variants.TVReturnType<{
             errorMessage?: tailwind_merge.ClassNameValue;
             inputWrapper?: tailwind_merge.ClassNameValue;
             cancelButton?: tailwind_merge.ClassNameValue;
-            progressBarContainer?: tailwind_merge.ClassNameValue;
-            progressBar?: tailwind_merge.ClassNameValue;
         };
     };
 } | {}, {
@@ -74,8 +68,6 @@ declare const fileUploadStyle: tailwind_variants.TVReturnType<{
     container: string[];
     inputWrapper: string[];
     cancelButton: string[];
-    progressBarContainer: string[];
-    progressBar: string[];
     errorMessage: string[];
     helperMessage: string[];
 }, tailwind_variants.TVReturnType<unknown, {
@@ -83,8 +75,6 @@ declare const fileUploadStyle: tailwind_variants.TVReturnType<{
     container: string[];
     inputWrapper: string[];
     cancelButton: string[];
-    progressBarContainer: string[];
-    progressBar: string[];
     errorMessage: string[];
     helperMessage: string[];
 }, undefined, unknown, unknown, undefined>>;

package/dist/components/fileUpload/fileUpload.d.ts

@@ -7,16 +7,18 @@ type FileUploadProps = {
     buttonText: string;
     maxSizeMB?: number;
     placeholder?: string;
+    errorMessage?: string;
     accept?: string[];
     acceptErrorMessage?: string;
     sizeErrorMessage?: string;
     onFileUpload?: (file: File) => void;
+    onCancelUpload?: () => void;
     helperMessage?: string;
     showProgress?: boolean;
     name?: string;
     classNames?: SlotsToClasses<FileUploadSlots>;
 };
-declare function FileUpload({ buttonText, maxSizeMB, placeholder, accept, acceptErrorMessage, sizeErrorMessage, onFileUpload, helperMessage, showProgress, name, classNames, }: FileUploadProps): react_jsx_runtime.JSX.Element;
+declare function FileUpload({ buttonText, maxSizeMB, placeholder, errorMessage, accept, acceptErrorMessage, sizeErrorMessage, onFileUpload, onCancelUpload, helperMessage, showProgress, name, classNames, }: FileUploadProps): react_jsx_runtime.JSX.Element;
 declare namespace FileUpload {
     var displayName: string;
 }
@@ -30,8 +32,6 @@ declare const fileUploadStyle: tailwind_variants.TVReturnType<{
             errorMessage?: tailwind_merge.ClassNameValue;
             inputWrapper?: tailwind_merge.ClassNameValue;
             cancelButton?: tailwind_merge.ClassNameValue;
-            progressBarContainer?: tailwind_merge.ClassNameValue;
-            progressBar?: tailwind_merge.ClassNameValue;
         };
     };
 } | {
@@ -43,8 +43,6 @@ declare const fileUploadStyle: tailwind_variants.TVReturnType<{
             errorMessage?: tailwind_merge.ClassNameValue;
             inputWrapper?: tailwind_merge.ClassNameValue;
             cancelButton?: tailwind_merge.ClassNameValue;
-            progressBarContainer?: tailwind_merge.ClassNameValue;
-            progressBar?: tailwind_merge.ClassNameValue;
         };
     };
 } | {}, {
@@ -52,8 +50,6 @@ declare const fileUploadStyle: tailwind_variants.TVReturnType<{
     container: string[];
     inputWrapper: string[];
     cancelButton: string[];
-    progressBarContainer: string[];
-    progressBar: string[];
     errorMessage: string[];
     helperMessage: string[];
 }, undefined, {
@@ -65,8 +61,6 @@ declare const fileUploadStyle: tailwind_variants.TVReturnType<{
             errorMessage?: tailwind_merge.ClassNameValue;
             inputWrapper?: tailwind_merge.ClassNameValue;
             cancelButton?: tailwind_merge.ClassNameValue;
-            progressBarContainer?: tailwind_merge.ClassNameValue;
-            progressBar?: tailwind_merge.ClassNameValue;
         };
     };
 } | {}, {
@@ -74,8 +68,6 @@ declare const fileUploadStyle: tailwind_variants.TVReturnType<{
     container: string[];
     inputWrapper: string[];
     cancelButton: string[];
-    progressBarContainer: string[];
-    progressBar: string[];
     errorMessage: string[];
     helperMessage: string[];
 }, tailwind_variants.TVReturnType<unknown, {
@@ -83,8 +75,6 @@ declare const fileUploadStyle: tailwind_variants.TVReturnType<{
     container: string[];
     inputWrapper: string[];
     cancelButton: string[];
-    progressBarContainer: string[];
-    progressBar: string[];
     errorMessage: string[];
     helperMessage: string[];
 }, undefined, unknown, unknown, undefined>>;

package/dist/components/fileUpload/fileUpload.js

@@ -107,8 +107,8 @@ __export(fileUpload_exports, {
   fileUploadStyle: () => fileUploadStyle
 });
 module.exports = __toCommonJS(fileUpload_exports);
-var import_react5 = require("react");
-var import_tailwind_variants5 = require("tailwind-variants");
+var import_react7 = require("react");
+var import_tailwind_variants6 = require("tailwind-variants");
 
 // src/components/input/input.tsx
 var import_react = require("react");
@@ -5198,12 +5198,10 @@ var inputStyle = tv(
       errorMessage: ["text-danger-main"],
       readonlyWrapper: [
         "pointer-events-none",
-        "!text-body-foreground",
-        "placeholder:!text-body-foreground",
-        "group-has-[p.error]/input:!text-danger-main",
-        "group-has-[p.error]/input:placeholder:!text-danger-main",
-        "[&>input]:!text-body-foreground",
-        "[&>input]:placeholder:!text-body-foreground"
+        "text-body-foreground",
+        "placeholder:text-body-foreground",
+        "[&>input]:text-body-foreground",
+        "[&>input]:placeholder:text-body-foreground"
       ],
       readonly: []
     },
@@ -5312,6 +5310,16 @@ var inputStyle = tv(
           helperMessage: ["!text-neutral-light"],
           errorMessage: ["!text-danger-light"]
         }
+      },
+      readonly: {
+        true: {
+          readonlyWrapper: ["pointer-events-none"],
+          input: [
+            "group-has-[p.error]/input:!text-danger-main",
+            "group-has-[p.error]/input:placeholder:!text-danger-main"
+          ],
+          content: ["group-has-[p.error]/input:!text-danger-main"]
+        }
       }
     },
     compoundVariants: [
@@ -5381,6 +5389,22 @@ var inputStyle = tv(
             "group-has-[p.error]/input:placeholder:!text-danger-light"
           ]
         }
+      },
+      {
+        readonly: true,
+        color: "primary",
+        class: {
+          input: ["!text-primary-main", "placeholder:!text-primary-main"],
+          content: ["!text-primary-main"]
+        }
+      },
+      {
+        readonly: true,
+        color: "secondary",
+        class: {
+          input: ["!text-secondary-main", "placeholder:!text-secondary-main"],
+          content: ["!text-secondary-main"]
+        }
       }
     ],
     defaultVariants: {
@@ -6248,26 +6272,176 @@ var iconButtonStyle = tv({
   }
 });
 
-// src/components/fileUpload/fileUpload.tsx
+// src/components/progress/progress.tsx
+var import_react6 = require("react");
+
+// src/hooks/useIsMounted.ts
+var import_react5 = require("react");
+function useIsMounted(props = {}) {
+  const { rerender = false, delay = 0 } = props;
+  const isMountedRef = (0, import_react5.useRef)(false);
+  const [isMounted, setIsMounted] = (0, import_react5.useState)(false);
+  (0, import_react5.useEffect)(() => {
+    isMountedRef.current = true;
+    let timer = null;
+    if (rerender) {
+      if (delay > 0) {
+        timer = setTimeout(() => {
+          setIsMounted(true);
+        }, delay);
+      } else {
+        setIsMounted(true);
+      }
+    }
+    return () => {
+      isMountedRef.current = false;
+      if (rerender) {
+        setIsMounted(false);
+      }
+      if (timer) {
+        clearTimeout(timer);
+      }
+    };
+  }, [rerender]);
+  return [(0, import_react5.useCallback)(() => isMountedRef.current, []), isMounted];
+}
+
+// src/components/progress/progress.tsx
 var import_jsx_runtime7 = require("react/jsx-runtime");
+var Progress = (originalProps) => {
+  const [props, variantProps] = mapPropsVariants(originalProps, progressStyle.variantKeys);
+  const { children, classNames, value = 0, minValue = 0, maxValue = 100, ...progressProps } = props;
+  const isIndeterminate = originalProps.isIndeterminate;
+  const [, isMounted] = useIsMounted({
+    rerender: true,
+    delay: 100
+  });
+  const selfMounted = variantProps.disableAnimation ? true : isMounted;
+  const percentage = (0, import_react6.useMemo)(
+    () => isIndeterminate || !selfMounted ? void 0 : clampPercentage((value - minValue) / (maxValue - minValue) * 100),
+    [selfMounted, isIndeterminate, value, minValue, maxValue]
+  );
+  const slots = (0, import_react6.useMemo)(() => progressStyle({ ...variantProps }), [variantProps]);
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: slots.track({ class: classNames == null ? void 0 : classNames.track }), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    "div",
+    {
+      className: slots.indicator({ class: classNames == null ? void 0 : classNames.indicator }),
+      style: {
+        transform: `translateX(-${100 - (percentage || 0)}%)`
+      }
+    }
+  ) }) });
+};
+var progress_default = Progress;
+var progressStyle = tv({
+  slots: {
+    base: ["flex flex-col gap-2 w-full"],
+    track: ["z-0", "relative", "bg-neutral-soft", "overflow-hidden", "rtl:rotate-180"],
+    indicator: ["h-full"],
+    value: ""
+  },
+  variants: {
+    color: {
+      primary: {
+        indicator: ["bg-gradient-to-r from-primary-light via-primary-light to-primary-main"]
+      },
+      secondary: {
+        indicator: ["bg-gradient-to-r from-secondary-light via-secondary-light to-secondary-main"]
+      },
+      neutral: {
+        indicator: ["bg-gradient-to-r from-neutral-light via-neutral-light to-neutral-main"]
+      },
+      info: {
+        indicator: ["bg-gradient-to-r from-info-light via-info-light to-info-main"]
+      },
+      success: {
+        indicator: ["bg-gradient-to-r from-success-light via-success-light to-success-main"]
+      },
+      warning: {
+        indicator: ["bg-gradient-to-r from-warning-light via-warning-light to-warning-main"]
+      },
+      danger: {
+        indicator: ["bg-gradient-to-r from-danger-light via-danger-light to-danger-main"]
+      }
+    },
+    size: {
+      sm: {
+        track: ["h-[4px]", "rounded-sm"],
+        indicator: "rounded-sm"
+      },
+      md: {
+        track: ["h-[6px]", "rounded-md"],
+        indicator: "rounded-md"
+      },
+      lg: {
+        track: ["h-[8px]", "rounded-lg"],
+        indicator: "rounded-lg"
+      },
+      xl: {
+        track: ["h-[10px]", "rounded-xl"],
+        indicator: "rounded-xl"
+      }
+    },
+    isDisabled: {
+      true: {
+        base: "opacity-disabled cursor-not-allowed"
+      }
+    },
+    disableAnimation: {
+      true: {},
+      false: {
+        indicator: "transition-transform !duration-500"
+      }
+    },
+    isIndeterminate: {
+      true: {
+        indicator: ["absolute", "w-full", "origin-left", "animate-indeterminate-bar"]
+      }
+    }
+  },
+  defaultVariants: {
+    color: "primary",
+    size: "md",
+    isDisabled: false,
+    disableAnimation: false,
+    isIndeterminate: false
+  },
+  compoundVariants: [
+    {
+      isIndeterminate: true,
+      disableAnimation: false,
+      className: {
+        indicator: "!transition-none motion-reduce:transition-none"
+      }
+    }
+  ]
+});
+var clampPercentage = (value) => {
+  return Math.min(100, Math.max(0, value));
+};
+
+// src/components/fileUpload/fileUpload.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
 function FileUpload({
   buttonText,
   maxSizeMB = 10,
   placeholder,
+  errorMessage,
   accept = [],
   acceptErrorMessage = "The file type is not allowed.",
   sizeErrorMessage = `File is too large.`,
   onFileUpload,
+  onCancelUpload,
   helperMessage,
   showProgress,
   name,
   classNames
 }) {
-  const fileInputRef = (0, import_react5.useRef)(null);
-  const uploadIntervalRef = (0, import_react5.useRef)(null);
-  const [file, setFile] = (0, import_react5.useState)(null);
-  const [uploadProgress, setUploadProgress] = (0, import_react5.useState)(0);
-  const [errorMessage, setErrorMessage] = (0, import_react5.useState)("");
+  const fileInputRef = (0, import_react7.useRef)(null);
+  const uploadIntervalRef = (0, import_react7.useRef)(null);
+  const [file, setFile] = (0, import_react7.useState)(null);
+  const [uploadProgress, setUploadProgress] = (0, import_react7.useState)(0);
+  const [message, setMessage] = (0, import_react7.useState)(errorMessage);
   const slots = fileUploadStyle();
   const handleButtonClick = () => {
     var _a;
@@ -6301,12 +6475,12 @@ function FileUpload({
     if (!selectedFile) return;
     const error = validateFile(selectedFile);
     if (error) {
-      setErrorMessage(error);
+      setMessage(error);
       setFile(null);
       return;
     }
     setFile(selectedFile);
-    setErrorMessage("");
+    setMessage("");
     startUploadSimulation(selectedFile);
   };
   const handleCancelUpload = () => {
@@ -6315,20 +6489,35 @@ function FileUpload({
     }
     setFile(null);
     setUploadProgress(0);
-    setErrorMessage("");
+    setMessage("");
+    if (onCancelUpload) onCancelUpload();
   };
-  (0, import_react5.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     return () => {
       if (uploadIntervalRef.current) {
         clearInterval(uploadIntervalRef.current);
       }
     };
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: slots.container({ class: classNames == null ? void 0 : classNames.container }), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: slots.inputWrapper(), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(input_default, { name, readOnly: true, variant: "outline", full: true, placeholder, defaultValue: file == null ? void 0 : file.name }),
-        file && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  (0, import_react7.useEffect)(() => {
+    setMessage(errorMessage);
+  }, [setMessage, errorMessage]);
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: slots.container({ class: classNames == null ? void 0 : classNames.container }), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: slots.inputWrapper(), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          input_default,
+          {
+            name,
+            readOnly: true,
+            variant: "outline",
+            full: true,
+            placeholder,
+            defaultValue: file == null ? void 0 : file.name,
+            errorMessage: message
+          }
+        ),
+        file && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           icon_button_default,
           {
             name: "close",
@@ -6340,24 +6529,21 @@ function FileUpload({
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(button_default, { type: "button", variant: "outline", onClick: handleButtonClick, children: buttonText }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("input", { ref: fileInputRef, type: "file", hidden: true, accept: accept.join(","), onChange: handleFileChange })
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(button_default, { type: "button", variant: "outline", onClick: handleButtonClick, children: buttonText }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("input", { ref: fileInputRef, type: "file", hidden: true, accept: accept.join(","), onChange: handleFileChange })
     ] }),
-    showProgress && file && uploadProgress < 100 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: slots.progressBarContainer(), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: slots.progressBar(), style: { width: `${uploadProgress}%` } }) }),
-    !errorMessage && helperMessage && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: slots.helperMessage(), children: helperMessage }),
-    errorMessage && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: slots.errorMessage(), children: errorMessage })
+    showProgress && file && uploadProgress < 100 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(progress_default, { value: uploadProgress }),
+    !message && helperMessage && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: slots.helperMessage(), children: helperMessage })
   ] });
 }
 FileUpload.displayName = "FileUpload";
 var fileUpload_default = FileUpload;
-var fileUploadStyle = (0, import_tailwind_variants5.tv)({
+var fileUploadStyle = (0, import_tailwind_variants6.tv)({
   slots: {
     base: ["flex", "flex-col", "gap-[5px]"],
-    container: ["flex", "items-center", "gap-[10px]"],
+    container: ["flex", "gap-[10px]"],
     inputWrapper: ["relative", "flex-1"],
     cancelButton: ["absolute", "top-1/2", "right-0", "-translate-y-1/2"],
-    progressBarContainer: ["w-full", "h-[5px]", "bg-neutral-light", "rounded-full", "overflow-hidden"],
-    progressBar: ["h-full", "bg-primary-main", "transition-all"],
     errorMessage: ["text-danger-main", "text-sm"],
     helperMessage: ["text-neutral-main", "text-sm"]
   }