@povio/ui 3.4.0-rc.2 → 3.4.0-rc.22

package/dist/FileUpload-Cb--_Mbk.js

@@ -0,0 +1,766 @@
+import { t as createLucideIcon } from "./createLucideIcon-CskCrR9z.js";
+import { t as UIConfig } from "./uiConfig.context-SBtRegKv.js";
+import { t as FormField } from "./FormField-DoGaUqFm.js";
+import { n as $cb088e721efb9218$export$3c6489d84dc98b6, r as Upload, t as $1e2864c73f66a4da$export$6fb4a10d2c950550 } from "./FileTrigger-eHfAkdXd.js";
+import { t as X } from "./x-BYOEO0gW.js";
+import { t as clsx } from "./clsx-CnD0nOiA.js";
+import { z as $5dc95899b306f630$export$c9058316764c140e } from "./useHover-DwfnacVy.js";
+import { t as $313b98861ee5dd6c$export$d6875122194c7b44 } from "./useLabels-B3G1H2cw.js";
+import { t as UIOverrides } from "./uiOverrides.context-Bfm2n-n8.js";
+import { t as Typography } from "./Typography-AcUd9df8.js";
+import { t as Button } from "./Button-Dlm1NyTJ.js";
+import { InlineIconButton } from "./components/inline-icon-button.js";
+import "./i18n-C2TBJvnh.js";
+import { TextButton } from "./components/text-button.js";
+import { t as FieldController } from "./form.binding-DyZ4fH8l.js";
+import { t as FileUtils } from "./file.utils-DqQxnuAm.js";
+import { t as ProgressBar } from "./ProgressBar-C8dtVA-1.js";
+import { memo, useCallback, useMemo, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+/**
+* @license lucide-react v1.28.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
+const CircleAlert = createLucideIcon("circle-alert", [
+	["circle", {
+		cx: "12",
+		cy: "12",
+		r: "10",
+		key: "1mglay"
+	}],
+	["line", {
+		x1: "12",
+		x2: "12",
+		y1: "8",
+		y2: "12",
+		key: "1pkeuh"
+	}],
+	["line", {
+		x1: "12",
+		x2: "12.01",
+		y1: "16",
+		y2: "16",
+		key: "4dfq90"
+	}]
+]);
+/**
+* @license lucide-react v1.28.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
+const CircleCheckBig = createLucideIcon("circle-check-big", [["path", {
+	d: "M21.801 10A10 10 0 1 1 17 3.335",
+	key: "yps3ct"
+}], ["path", {
+	d: "m9 11 3 3L22 4",
+	key: "1pflzl"
+}]]);
+/**
+* @license lucide-react v1.28.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
+const File = createLucideIcon("file", [["path", {
+	d: "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z",
+	key: "1oefj6"
+}], ["path", {
+	d: "M14 2v5a1 1 0 0 0 1 1h5",
+	key: "wfsgrz"
+}]]);
+//#endregion
+//#region src/components/inputs/File/shared/FileUploadContentError.tsx
+const FileUploadContentError = ({ variant, as, isDisabled, state, browseText, fileTriggerProps, removeWithIcon = false, singleFile, onRemove, browseButtonProps }) => {
+	const { t } = useTranslation("ui");
+	const { size: browseButtonSize = "xs", variant: browseButtonVariant = "outlined", width: browseButtonWidth = "hug", ...browseButtonRestProps } = browseButtonProps ?? {};
+	return /* @__PURE__ */ jsx("div", {
+		className: clsx("flex w-full flex-fill flex-col items-start"),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: clsx("flex w-full items-center", {
+				"flex-row gap-file-upload-content-gap-left-to-right-content": variant === "horizontal",
+				"flex-col": variant === "vertical",
+				"gap-file-upload-content-gap-content-to-button": variant === "vertical" && as === "button",
+				"gap-file-upload-content-gap-text-to-text": variant === "vertical" && as === "link"
+			}),
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: clsx("flex min-w-0 max-w-full flex-grow items-center gap-file-upload-content-gap-icon-to-content", {
+					"flex-col": variant === "vertical",
+					"flex-row": variant === "horizontal",
+					"opacity-50": isDisabled
+				}),
+				children: [/* @__PURE__ */ jsx(CircleAlert, { className: "h-6 w-6 text-elevation-fill-warning-1" }), /* @__PURE__ */ jsxs("div", {
+					className: clsx("flex flex-col gap-file-upload-content-gap-text-to-text", {
+						"max-w-full items-center": variant === "vertical",
+						"max-w-[calc(100%_-_32px)]": variant === "horizontal"
+					}),
+					children: [/* @__PURE__ */ jsx(Typography, {
+						variant: "prominent-1",
+						size: "label-1",
+						as: "span",
+						className: clsx("self-stretch truncate text-text-default-1", { "text-center": variant === "vertical" }),
+						children: state.file?.name ?? state.displayName ?? ""
+					}), /* @__PURE__ */ jsx(Typography, {
+						variant: "default",
+						size: singleFile ? "label-2" : "label-3",
+						as: "span",
+						className: clsx("text-text-default-2", { "text-center": variant === "vertical" }),
+						children: state.error?.serverMessage ?? state.error?.message
+					})]
+				})]
+			}), /* @__PURE__ */ jsx("div", {
+				className: clsx("flex flex-none items-center justify-end", {
+					"flex-col": variant === "vertical" && as === "button",
+					"gap-file-upload-content-gap-text-to-text": as === "link",
+					"gap-file-upload-content-gap-content-to-button": as === "button"
+				}),
+				children: as === "link" ? /* @__PURE__ */ jsxs(Fragment$1, { children: [fileTriggerProps && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx($1e2864c73f66a4da$export$6fb4a10d2c950550, {
+					...fileTriggerProps,
+					children: /* @__PURE__ */ jsx(TextButton, {
+						className: "text-interactive-text-primary-idle",
+						children: browseText ?? ""
+					})
+				}), /* @__PURE__ */ jsx(Typography, {
+					variant: "default",
+					size: "label-2",
+					as: "span",
+					className: "text-text-default-2",
+					children: t(($) => $.ui.fileUpload.or)
+				})] }), removeWithIcon ? /* @__PURE__ */ jsx(InlineIconButton, {
+					label: "Cancel",
+					color: "secondary",
+					onPress: () => {
+						onRemove(state.id ?? "");
+					},
+					icon: X
+				}) : /* @__PURE__ */ jsx(TextButton, {
+					className: "text-interactive-text-primary-idle lowercase",
+					onPress: () => {
+						onRemove(state.id ?? "");
+					},
+					children: t(($) => $.ui.fileUpload.removeFile)
+				})] }) : /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center justify-center gap-file-upload-content-gap-button-to-button self-stretch",
+					children: [fileTriggerProps && /* @__PURE__ */ jsx($1e2864c73f66a4da$export$6fb4a10d2c950550, {
+						...fileTriggerProps,
+						children: /* @__PURE__ */ jsx(Button, {
+							variant: browseButtonVariant,
+							size: browseButtonSize,
+							width: browseButtonWidth,
+							...browseButtonRestProps,
+							isDisabled,
+							children: browseText ?? ""
+						})
+					}), removeWithIcon ? /* @__PURE__ */ jsx(InlineIconButton, {
+						label: "Cancel",
+						color: "secondary",
+						onPress: () => {
+							onRemove(state.id ?? "");
+						},
+						icon: X
+					}) : /* @__PURE__ */ jsx(TextButton, {
+						color: "secondary",
+						onPress: () => {
+							onRemove(state.id ?? "");
+						},
+						children: t(($) => $.ui.fileUpload.removeFile)
+					})]
+				})
+			})]
+		})
+	});
+};
+//#endregion
+//#region src/components/inputs/File/shared/FileUploadContentFilled.tsx
+const FileUploadContentFilled = ({ variant, as, isDisabled, state, browseText, fileTriggerProps, removeWithIcon = false, singleFile, onRemove, browseButtonProps }) => {
+	const { t } = useTranslation("ui");
+	const { size: browseButtonSize = "xs", variant: browseButtonVariant = "outlined", width: browseButtonWidth = "hug", ...browseButtonRestProps } = browseButtonProps ?? {};
+	return /* @__PURE__ */ jsx("div", {
+		className: clsx("flex w-full flex-fill flex-col items-start"),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: clsx("flex w-full items-center", {
+				"flex-row gap-file-upload-content-gap-left-to-right-content": variant === "horizontal",
+				"flex-col": variant === "vertical",
+				"gap-file-upload-content-gap-content-to-button": variant === "vertical" && as === "button",
+				"gap-file-upload-content-gap-text-to-text": variant === "vertical" && as === "link"
+			}),
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: clsx("flex min-w-0 max-w-full grow items-center gap-file-upload-content-gap-icon-to-content", {
+					"flex-col": variant === "vertical",
+					"flex-row": variant === "horizontal",
+					"opacity-50": isDisabled
+				}),
+				children: [/* @__PURE__ */ jsx(CircleCheckBig, { className: "h-6 w-6 text-text-default-1" }), /* @__PURE__ */ jsxs("div", {
+					className: clsx("flex flex-col gap-file-upload-content-gap-text-to-text", {
+						"max-w-full items-center": variant === "vertical",
+						"max-w-[calc(100%-32px)]": variant === "horizontal"
+					}),
+					children: [/* @__PURE__ */ jsx(Typography, {
+						variant: "prominent-1",
+						size: "label-1",
+						as: "span",
+						className: "self-stretch truncate text-center text-text-default-1",
+						children: state.file?.name ?? state.displayName ?? ""
+					}), /* @__PURE__ */ jsx(Typography, {
+						variant: "default",
+						size: singleFile ? "label-2" : "label-3",
+						as: "span",
+						className: "text-text-default-2",
+						children: FileUtils.getFileDisplaySize(state)
+					})]
+				})]
+			}), /* @__PURE__ */ jsx("div", {
+				className: clsx("flex flex-none items-center justify-end", {
+					"flex-col": variant === "vertical" && as === "button",
+					"gap-file-upload-content-gap-text-to-text": as === "link" && variant === "vertical",
+					"gap-file-upload-content-gap-content-to-button": as === "button" && variant === "vertical",
+					"gap-file-upload-content-gap-button-to-button": variant === "horizontal"
+				}),
+				children: as === "link" ? /* @__PURE__ */ jsxs(Fragment$1, { children: [fileTriggerProps && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx($1e2864c73f66a4da$export$6fb4a10d2c950550, {
+					...fileTriggerProps,
+					children: /* @__PURE__ */ jsx(TextButton, {
+						className: clsx("text-interactive-text-primary-idle", { "[&>span>span]:font-medium!": variant === "vertical" }),
+						children: browseText ?? ""
+					})
+				}), variant === "vertical" && /* @__PURE__ */ jsx(Typography, {
+					variant: "default",
+					size: "label-2",
+					as: "span",
+					className: "text-text-default-2",
+					children: t(($) => $.ui.fileUpload.or)
+				})] }), removeWithIcon ? /* @__PURE__ */ jsx(InlineIconButton, {
+					label: "Cancel",
+					color: "secondary",
+					onPress: () => {
+						onRemove(state.id ?? "");
+					},
+					icon: X
+				}) : /* @__PURE__ */ jsx(TextButton, {
+					className: clsx(variant === "vertical" && "text-interactive-text-primary-idle lowercase [&>span>span]:font-medium!"),
+					color: variant === "horizontal" ? "secondary" : "primary",
+					onPress: () => {
+						onRemove(state.id ?? "");
+					},
+					children: t(($) => $.ui.fileUpload.removeFile)
+				})] }) : /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center justify-center gap-file-upload-content-gap-button-to-button self-stretch",
+					children: [fileTriggerProps && /* @__PURE__ */ jsx($1e2864c73f66a4da$export$6fb4a10d2c950550, {
+						...fileTriggerProps,
+						children: /* @__PURE__ */ jsx(Button, {
+							variant: browseButtonVariant,
+							size: browseButtonSize,
+							width: browseButtonWidth,
+							...browseButtonRestProps,
+							isDisabled,
+							children: browseText ?? ""
+						})
+					}), removeWithIcon ? /* @__PURE__ */ jsx(InlineIconButton, {
+						label: "Cancel",
+						color: "secondary",
+						onPress: () => {
+							onRemove(state.id ?? "");
+						},
+						icon: X,
+						isDisabled
+					}) : /* @__PURE__ */ jsx(TextButton, {
+						color: "secondary",
+						onPress: () => {
+							onRemove(state.id ?? "");
+						},
+						isDisabled,
+						children: t(($) => $.ui.fileUpload.removeFile)
+					})]
+				})
+			})]
+		})
+	});
+};
+//#endregion
+//#region src/components/inputs/File/shared/FileUploadContentLoading.tsx
+const FileUploadContentLoading = ({ index, variant, as, state, isDisabled, singleFile, onCancel, cancelButtonProps }) => {
+	const { t } = useTranslation("ui");
+	const { color: cancelButtonColor = "secondary", size: cancelButtonSize = "xs", variant: cancelButtonVariant = "outlined", width: cancelButtonWidth = "hug", ...cancelButtonRestProps } = cancelButtonProps ?? {};
+	return /* @__PURE__ */ jsxs("div", {
+		className: clsx("flex w-full flex-col items-center", {
+			"flex-col": variant === "vertical",
+			"flex-row": variant === "horizontal",
+			"gap-file-upload-content-gap-content-to-button": as === "button"
+		}),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: clsx("flex w-full items-center justify-between", {
+				"flex-col gap-file-upload-content-gap-text-to-progress": variant === "vertical",
+				"flex-row gap-file-upload-content-gap-left-to-right-content": variant === "horizontal",
+				"opacity-50": isDisabled
+			}),
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: clsx("flex items-center gap-file-upload-content-gap-icon-to-content", {
+					"w-full flex-col": variant === "vertical",
+					"w-1/2": variant === "horizontal"
+				}),
+				children: [/* @__PURE__ */ jsx(File, { className: "h-6 w-6 text-text-default-1" }), /* @__PURE__ */ jsxs("div", {
+					className: clsx("flex flex-col", {
+						"max-w-full gap-file-upload-content-gap-icon-to-content text-center": variant === "vertical",
+						"max-w-[calc(100%-32px)] gap-file-upload-content-gap-text-to-text": variant === "horizontal"
+					}),
+					children: [/* @__PURE__ */ jsx(Typography, {
+						variant: "prominent-1",
+						size: "label-1",
+						as: "span",
+						className: "self-stretch truncate text-center text-text-default-1",
+						children: state.file?.name ?? state.displayName ?? ""
+					}), /* @__PURE__ */ jsx(Typography, {
+						variant: "default",
+						size: singleFile ? "label-2" : "label-3",
+						as: "span",
+						className: "text-text-default-2",
+						children: FileUtils.getFileDisplaySize(state)
+					})]
+				})]
+			}), /* @__PURE__ */ jsxs("div", {
+				className: clsx("flex items-center gap-1", {
+					"w-1/2": variant === "horizontal",
+					"w-full": variant === "vertical"
+				}),
+				children: [/* @__PURE__ */ jsx(ProgressBar, { progress: state.progress }), (as === "link" || variant === "horizontal") && /* @__PURE__ */ jsx(InlineIconButton, {
+					label: "Cancel",
+					color: "secondary",
+					onPress: () => {
+						onCancel(index);
+					},
+					icon: X
+				})]
+			})]
+		}), as === "button" && variant === "vertical" && /* @__PURE__ */ jsx(Button, {
+			variant: cancelButtonVariant,
+			size: cancelButtonSize,
+			color: cancelButtonColor,
+			width: cancelButtonWidth,
+			...cancelButtonRestProps,
+			onPress: () => {
+				onCancel(index);
+			},
+			children: t(($) => $.ui.fileUpload.cancel)
+		})]
+	});
+};
+//#endregion
+//#region src/components/inputs/File/shared/FileCard.tsx
+const FileCardComponent = ({ index, as, state, onRemove, isDisabled, browseButtonProps, cancelButtonProps, onCancel }) => {
+	const content = useMemo(() => {
+		if (state.state === "uploading") return /* @__PURE__ */ jsx(FileUploadContentLoading, {
+			index,
+			variant: "horizontal",
+			as,
+			isDisabled,
+			state,
+			cancelButtonProps,
+			onCancel: () => onCancel?.(index)
+		});
+		if (state.state === "error") return /* @__PURE__ */ jsx(FileUploadContentError, {
+			as,
+			removeWithIcon: true,
+			variant: "horizontal",
+			isDisabled,
+			state,
+			browseButtonProps,
+			onRemove: () => {
+				onCancel?.(index);
+			}
+		});
+		return /* @__PURE__ */ jsx(FileUploadContentFilled, {
+			as,
+			removeWithIcon: true,
+			variant: "horizontal",
+			isDisabled,
+			state,
+			browseButtonProps,
+			onRemove: () => {
+				onRemove?.(state.id ?? "");
+			}
+		});
+	}, [
+		state,
+		index,
+		as,
+		isDisabled,
+		browseButtonProps,
+		cancelButtonProps,
+		onCancel,
+		onRemove
+	]);
+	return /* @__PURE__ */ jsx("div", {
+		className: clsx("flex items-center self-stretch", "bg-elevation-fill-default-1", "px-file-upload-file-card-side-default", "py-4", "rounded-file-upload-file-card-rounding-default border border-elevation-outline-default-1 border-solid"),
+		children: content
+	});
+};
+const FileCard = memo(FileCardComponent);
+//#endregion
+//#region src/components/inputs/File/shared/FileCardList.tsx
+const FileCardList = memo(({ uploadState, as, isDisabled, browseButtonProps, cancelButtonProps, className, onRemove, onCancel }) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: clsx("mt-10 flex flex-col items-start gap-4 self-stretch", className),
+		children: uploadState.map((state, index) => /* @__PURE__ */ jsx(FileCard, {
+			index,
+			as,
+			state,
+			isDisabled,
+			browseButtonProps,
+			cancelButtonProps,
+			onRemove,
+			onCancel
+		}, state.file?.name ?? state.displayName ?? state.id ?? state.src))
+	});
+});
+//#endregion
+//#region src/components/inputs/File/shared/FileUploadContentEmpty.tsx
+const FileUploadContentEmpty = ({ variant, as, isDisabled, title, browseText, uploadText, singleFile, hideButton = false, className, browseButtonProps }) => {
+	const { size: browseButtonSize = "xs", variant: browseButtonVariant = "outlined", width: browseButtonWidth = "hug", ...browseButtonRestProps } = browseButtonProps ?? {};
+	return /* @__PURE__ */ jsxs("div", {
+		className: clsx("flex w-full items-center gap-file-upload-content-gap-text-to-text", className, {
+			"flex-col": variant === "vertical",
+			"min-h-11 flex-row justify-between": variant === "horizontal"
+		}),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: clsx("flex items-center gap-file-upload-content-gap-icon-to-content", {
+				"flex-col": variant === "vertical",
+				"flex-row": variant === "horizontal",
+				"opacity-50": isDisabled
+			}),
+			children: [/* @__PURE__ */ jsx(Upload, { className: "h-6 w-6 text-text-default-1" }), /* @__PURE__ */ jsx(Typography, {
+				variant: "prominent-1",
+				size: "label-1",
+				as: "span",
+				className: clsx("self-stretch text-text-default-1", { "text-center": variant === "vertical" }),
+				children: title
+			})]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: clsx("flex items-center justify-center", {
+				"flex-col": variant === "vertical" && as === "button",
+				"gap-file-upload-content-gap-text-to-text": as === "link",
+				"gap-file-upload-content-gap-content-to-button": as === "button"
+			}),
+			children: [/* @__PURE__ */ jsx(Typography, {
+				variant: "default",
+				size: singleFile ? "label-2" : "label-3",
+				as: "span",
+				className: clsx("text-text-default-2", {
+					"text-center": variant === "vertical",
+					"opacity-50": isDisabled
+				}),
+				children: uploadText
+			}), !hideButton && browseText && (as === "link" ? /* @__PURE__ */ jsx(TextButton, {
+				className: "text-interactive-text-primary-idle lowercase",
+				children: browseText
+			}) : /* @__PURE__ */ jsx(Button, {
+				variant: browseButtonVariant,
+				size: browseButtonSize,
+				width: browseButtonWidth,
+				...browseButtonRestProps,
+				isDisabled,
+				children: browseText
+			}))]
+		})]
+	});
+};
+//#endregion
+//#region src/components/inputs/File/shared/FileUploadContent.tsx
+const FileUploadContent = ({ variant, as, isDisabled, browseText, uploadText, emptyText, uploadState, browseButtonProps, cancelButtonProps, handleCancelUpload, handleRemove, acceptedFileTypes, allowsMultiple, handleSelect, ...rest }) => {
+	const currentState = uploadState.at(0);
+	const fileTriggerProps = {
+		...rest,
+		acceptedFileTypes,
+		allowsMultiple,
+		onSelect: handleSelect
+	};
+	if (!allowsMultiple && currentState) {
+		if (currentState.state === "uploading") return /* @__PURE__ */ jsx(FileUploadContentLoading, {
+			index: 0,
+			variant,
+			as,
+			singleFile: true,
+			isDisabled,
+			state: currentState,
+			cancelButtonProps,
+			onCancel: handleCancelUpload
+		});
+		if (currentState.state === "uploaded") return /* @__PURE__ */ jsx(FileUploadContentFilled, {
+			as,
+			variant,
+			singleFile: true,
+			isDisabled,
+			state: currentState,
+			browseText,
+			browseButtonProps,
+			fileTriggerProps,
+			onRemove: () => {
+				handleRemove(currentState.id ?? "");
+			}
+		});
+		if (currentState.state === "error") return /* @__PURE__ */ jsx(FileUploadContentError, {
+			as,
+			variant,
+			singleFile: true,
+			isDisabled,
+			state: currentState,
+			browseButtonProps,
+			onRemove: () => {
+				handleRemove(currentState.id ?? "");
+			}
+		});
+	}
+	return /* @__PURE__ */ jsx($1e2864c73f66a4da$export$6fb4a10d2c950550, {
+		...fileTriggerProps,
+		children: /* @__PURE__ */ jsx(FileUploadContentEmpty, {
+			as,
+			variant,
+			singleFile: true,
+			isDisabled,
+			title: emptyText,
+			uploadText,
+			browseText,
+			browseButtonProps
+		})
+	});
+};
+//#endregion
+//#region src/components/inputs/File/shared/fileUpload.cva.ts
+const fileUploadDropZoneDefinition = UIOverrides.defineConfig({
+	base: ["relative w-full rounded-file-upload-container-rounding-default"],
+	config: {
+		variants: {
+			variant: {
+				vertical: ["flex-col justify-center"],
+				horizontal: ["flex-row justify-between"]
+			},
+			isContainer: {
+				true: [
+					"data-[drop-target]:before:content-['']",
+					"data-[drop-target]:before:absolute",
+					"data-[drop-target]:before:z-drop-target",
+					"data-[drop-target]:before:width-full",
+					"data-[drop-target]:before:height-full",
+					"data-[drop-target]:before:top-0",
+					"data-[drop-target]:before:left-0",
+					"data-[drop-target]:border data-[drop-target]:border-dashed",
+					"data-[drop-target]:border-elevation-outline-default-2",
+					"data-[drop-target]:before:pointer-events-none data-[drop-target]:before:inset-0",
+					"data-[drop-target]:before:bg-elevation-fill-default-2"
+				],
+				false: [
+					"flex items-center",
+					"py-file-upload-container-height-top-bottom",
+					"px-file-upload-container-side-default",
+					"gap-gap-file-upload-content-gap-icon-to-content",
+					"border border-input-outlined-outline-idle border-dashed bg-input-outlined-idle",
+					"hover:border-elevation-outline-default-2 hover:bg-elevation-fill-default-2",
+					"invalid:border invalid:border-input-outlined-outline-error",
+					"data-[drop-target]:border-elevation-outline-default-2 data-[drop-target]:bg-elevation-fill-default-2",
+					"data-[has-files]:border-solid"
+				]
+			}
+		},
+		defaultVariants: { variant: "vertical" }
+	}
+});
+//#endregion
+//#region src/components/inputs/File/FileUpload.tsx
+const FileUploadBase = (props) => {
+	const { t } = useTranslation("ui");
+	const { ref: _ref, label, tooltipText, variant = "vertical", as = "button", helperText, isRequired, isDisabled, headerClassName, errorClassName, isHeaderHidden, error, className, allowsMultiple = false, hideLabel, acceptedFileTypes, clearOnSuccess, emptyText = t(($) => $.ui.fileUpload.emptyText), uploadText = t(($) => $.ui.fileUpload.uploadText), browseText = t(($) => $.ui.fileUpload.browse), fileUpload, fileRemove, children, listRenderer, browseButtonProps, cancelButtonProps, onInvalidFileType, defaultState, ...rest } = props;
+	const ui = UIConfig.useConfig();
+	const fileUploadDropZoneCva = UIOverrides.useCva("fileUpload.dropZoneCva", fileUploadDropZoneDefinition);
+	const getInitialState = () => {
+		if (props.value != null && props.value.length > 0) return props.value;
+		if (!defaultState?.length) return [];
+		const items = defaultState.map((item, index) => ({
+			state: "uploaded",
+			displayName: item.name,
+			displaySize: item.size,
+			displayType: item.type,
+			id: item.id ?? `default-${index}`
+		}));
+		return allowsMultiple ? items : items.slice(0, 1);
+	};
+	const [uploadState, setUploadState] = useState(getInitialState);
+	const formFieldProps = {
+		error,
+		label,
+		tooltipText,
+		helperText,
+		isRequired,
+		isHeaderHidden,
+		hideLabel: hideLabel ?? ui.input.hideLabel,
+		isDisabled,
+		headerClassName,
+		errorClassName
+	};
+	const labelProps = $313b98861ee5dd6c$export$d6875122194c7b44({ "aria-label": label });
+	const handleUpload = async (inputFiles) => {
+		const acceptedFiles = inputFiles.filter((file) => FileUtils.isFileTypeAccepted(file, acceptedFileTypes));
+		const invalidFiles = inputFiles.filter((file) => !FileUtils.isFileTypeAccepted(file, acceptedFileTypes));
+		if (invalidFiles.length > 0) if (allowsMultiple) onInvalidFileType?.(invalidFiles.map((file) => file.name));
+		else onInvalidFileType?.(invalidFiles[0].name);
+		if (acceptedFiles.length === 0 || !fileUpload) return;
+		if (!allowsMultiple) setUploadState([]);
+		const newUploadState = [];
+		acceptedFiles.forEach((file) => {
+			newUploadState.push({
+				state: "uploading",
+				progress: 0,
+				file,
+				abortController: new AbortController()
+			});
+		});
+		const startIndex = allowsMultiple ? uploadState.length : 0;
+		setUploadState((prev) => [...prev, ...newUploadState]);
+		const promises = [];
+		acceptedFiles.forEach(async (file, index) => {
+			promises.push(fileUpload({ data: {
+				resourceName: file.name,
+				fileName: file.name,
+				fileSize: file.size,
+				method: "put"
+			} }, file, {
+				onUploadProgress: ({ loaded, total }) => {
+					if (total == null) return;
+					const progress = Math.round(loaded / total * 100);
+					setUploadState((prev) => prev.map((state, i) => i === startIndex + index ? {
+						...state,
+						progress
+					} : state));
+				},
+				abortController: newUploadState[index]?.abortController
+			}));
+		});
+		try {
+			(await Promise.all(promises)).forEach((res, index) => {
+				setUploadState((prev) => prev.map((state, i) => i === startIndex + index ? {
+					...state,
+					state: "uploaded",
+					id: res.id
+				} : state));
+			});
+			if (clearOnSuccess) setUploadState([]);
+		} catch (error) {
+			setUploadState((prev) => prev.filter((_, i) => i < startIndex));
+			throw error;
+		}
+	};
+	const handleSelect = (inputFiles) => {
+		if (!inputFiles) return;
+		const filesArray = Array.from(inputFiles);
+		handleUpload(filesArray);
+	};
+	const handleDrop = async (e) => {
+		if (!e.items) return;
+		const promises = [];
+		e.items.forEach((item) => {
+			if (item.kind === "file") promises.push(item.getFile());
+		});
+		const inputFiles = await Promise.all(promises);
+		handleUpload(inputFiles);
+	};
+	const handleRemove = useCallback((id) => {
+		fileRemove?.({ id });
+		setUploadState((prev) => prev.filter((state) => state.id !== id));
+	}, [fileRemove]);
+	const handleCancelUpload = useCallback((index) => {
+		const findState = uploadState[index];
+		if (findState) {
+			findState.abortController?.abort("canceled by user");
+			setUploadState((prev) => prev.filter((_, i) => i !== index));
+		}
+	}, [uploadState]);
+	return /* @__PURE__ */ jsxs(FormField, {
+		...formFieldProps,
+		labelProps,
+		className: clsx("w-full", className),
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "flex w-full items-center justify-between gap-input-gap-input-to-button-gap",
+			children: /* @__PURE__ */ jsx($cb088e721efb9218$export$3c6489d84dc98b6, {
+				...rest,
+				"data-rac": "",
+				"data-disabled": isDisabled || void 0,
+				"data-is-disabled": isDisabled || void 0,
+				"data-invalid": !!error || void 0,
+				"data-multiple": allowsMultiple || void 0,
+				"data-has-files": uploadState.length > 0 || void 0,
+				isDisabled,
+				onDrop: handleDrop,
+				className: fileUploadDropZoneCva({
+					variant,
+					isContainer: !!children,
+					className: "group/file-upload-drop-zone"
+				}),
+				children: children ? /* @__PURE__ */ jsxs(Fragment$1, { children: [children({
+					files: uploadState,
+					onRemove: handleRemove,
+					onCancel: handleCancelUpload
+				}), /* @__PURE__ */ jsx(FileUploadContentEmpty, {
+					as,
+					variant,
+					singleFile: true,
+					hideButton: true,
+					isDisabled,
+					title: emptyText,
+					uploadText,
+					browseText,
+					browseButtonProps,
+					className: "group-drop-target/file-upload-drop-zone:flex! absolute top-1/2 left-1/2 z-overlay-above hidden -translate-x-1/2 -translate-y-1/2 flex-col"
+				})] }) : /* @__PURE__ */ jsx(FileUploadContent, {
+					...rest,
+					variant,
+					as,
+					isDisabled,
+					browseText,
+					uploadText,
+					emptyText,
+					browseButtonProps,
+					cancelButtonProps,
+					uploadState,
+					handleSelect,
+					handleCancelUpload,
+					handleRemove,
+					acceptedFileTypes,
+					allowsMultiple
+				})
+			})
+		}), !children && allowsMultiple && uploadState.length > 0 && (listRenderer ? listRenderer({
+			files: uploadState,
+			onRemove: handleRemove,
+			onCancel: handleCancelUpload
+		}) : /* @__PURE__ */ jsx(FileCardList, {
+			as,
+			uploadState,
+			isDisabled,
+			browseButtonProps,
+			cancelButtonProps,
+			onRemove: handleRemove,
+			onCancel: handleCancelUpload
+		}))]
+	});
+};
+const FileUploadComponent = (props) => {
+	if ("field" in props && props.field) {
+		const { field, ref, ...innerProps } = props;
+		return /* @__PURE__ */ jsx(FieldController, {
+			control: field.form,
+			name: field.name,
+			render: ({ field, fieldState: { error } }) => /* @__PURE__ */ jsx(FileUploadBase, {
+				...innerProps,
+				ref: $5dc95899b306f630$export$c9058316764c140e(ref, field.ref),
+				value: field.value,
+				onChange: field.onChange,
+				isDisabled: field.disabled || props.isDisabled,
+				error: props.error ?? error?.message
+			})
+		});
+	}
+	return /* @__PURE__ */ jsx(FileUploadBase, { ...props });
+};
+const FileUpload = memo(FileUploadComponent);
+//#endregion
+export { fileUploadDropZoneDefinition as n, FileUpload as t };