@povio/ui 2.3.3 → 3.0.0-rc.2

package/dist/components/inputs/File/shared/InputUploadContent.js

@@ -1,55 +1,169 @@
-import { UIStyle } from "../../../../config/uiStyle.context.js";
+import { UIOverrides } from "../../../../config/uiOverrides.context.js";
 import { Typography } from "../../../text/Typography/Typography.js";
 import { Button as Button$1 } from "../../../buttons/Button/Button.js";
 import "../../../../config/i18n.js";
 import { TextButton } from "../../../buttons/TextButton/TextButton.js";
-import { inputSize } from "../../shared/input.cva.js";
+import { inputSizeDefinition } from "../../shared/input.cva.js";
 import { UploadIcon } from "../../../../assets/icons/Upload.js";
 import { inputButtonSizeMapping } from "../inputUpload.types.js";
 import { inputUploadButton, inputUploadDropZone } from "./inputUploadButton.cva.js";
+import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { DropZone, FileTrigger } from "react-aria-components";
 import { useTranslation } from "react-i18next";
 //#region src/components/inputs/File/shared/InputUploadContent.tsx
 var InputUploadContent = (props) => {
-	const { variant, isDisabled, error, placeholder, buttonText, size, ...rest } = props;
+	const $ = c(46);
+	let buttonText;
+	let error;
+	let isDisabled;
+	let placeholder;
+	let rest;
+	let size;
+	let variant;
+	if ($[0] !== props) {
+		({variant, isDisabled, error, placeholder, buttonText, size, ...rest} = props);
+		$[0] = props;
+		$[1] = buttonText;
+		$[2] = error;
+		$[3] = isDisabled;
+		$[4] = placeholder;
+		$[5] = rest;
+		$[6] = size;
+		$[7] = variant;
+	} else {
+		buttonText = $[1];
+		error = $[2];
+		isDisabled = $[3];
+		placeholder = $[4];
+		rest = $[5];
+		size = $[6];
+		variant = $[7];
+	}
 	const { t } = useTranslation("ui");
-	const inputSizeCva = UIStyle.useCva("input.sizeCva", inputSize);
-	return /* @__PURE__ */ jsx(FileTrigger, {
-		...rest,
-		children: /* @__PURE__ */ jsxs("div", {
+	const inputSizeCva = UIOverrides.useCva("input.sizeCva", inputSizeDefinition);
+	const t0 = isDisabled || void 0;
+	const t1 = isDisabled || void 0;
+	const t2 = !!error || void 0;
+	let t3;
+	if ($[8] !== variant) {
+		t3 = inputUploadButton({
+			variant,
+			className: "group/input-upload"
+		});
+		$[8] = variant;
+		$[9] = t3;
+	} else t3 = $[9];
+	let t4;
+	if ($[10] !== inputSizeCva || $[11] !== size || $[12] !== variant) {
+		t4 = clsx(inputUploadDropZone({ variant }), inputSizeCva({ size }));
+		$[10] = inputSizeCva;
+		$[11] = size;
+		$[12] = variant;
+		$[13] = t4;
+	} else t4 = $[13];
+	let t5;
+	if ($[14] !== placeholder || $[15] !== t) {
+		t5 = placeholder ?? t(_temp);
+		$[14] = placeholder;
+		$[15] = t;
+		$[16] = t5;
+	} else t5 = $[16];
+	let t6;
+	if ($[17] !== t5) {
+		t6 = /* @__PURE__ */ jsx(Typography, {
+			variant: "default",
+			size: "label-1",
+			as: "span",
+			className: "min-w-0 flex-fill select-none truncate text-text-default-3",
+			children: t5
+		});
+		$[17] = t5;
+		$[18] = t6;
+	} else t6 = $[18];
+	let t7;
+	if ($[19] !== buttonText || $[20] !== isDisabled || $[21] !== t || $[22] !== variant) {
+		t7 = variant === "nested" && /* @__PURE__ */ jsx(TextButton, {
+			isDisabled,
+			icon: UploadIcon,
+			children: buttonText ?? t(_temp2)
+		});
+		$[19] = buttonText;
+		$[20] = isDisabled;
+		$[21] = t;
+		$[22] = variant;
+		$[23] = t7;
+	} else t7 = $[23];
+	let t8;
+	if ($[24] !== isDisabled || $[25] !== rest || $[26] !== t4 || $[27] !== t6 || $[28] !== t7) {
+		t8 = /* @__PURE__ */ jsxs(DropZone, {
+			...rest,
+			isDisabled,
+			className: t4,
+			children: [t6, t7]
+		});
+		$[24] = isDisabled;
+		$[25] = rest;
+		$[26] = t4;
+		$[27] = t6;
+		$[28] = t7;
+		$[29] = t8;
+	} else t8 = $[29];
+	let t9;
+	if ($[30] !== buttonText || $[31] !== isDisabled || $[32] !== size || $[33] !== t || $[34] !== variant) {
+		t9 = variant !== "nested" && /* @__PURE__ */ jsx(Button$1, {
+			size: inputButtonSizeMapping[size ?? "default"],
+			width: "hug",
+			isDisabled,
+			className: "truncate",
+			children: buttonText ?? t(_temp3)
+		});
+		$[30] = buttonText;
+		$[31] = isDisabled;
+		$[32] = size;
+		$[33] = t;
+		$[34] = variant;
+		$[35] = t9;
+	} else t9 = $[35];
+	let t10;
+	if ($[36] !== t0 || $[37] !== t1 || $[38] !== t2 || $[39] !== t3 || $[40] !== t8 || $[41] !== t9) {
+		t10 = /* @__PURE__ */ jsxs("div", {
 			"data-rac": "",
-			"data-disabled": isDisabled || void 0,
-			"data-invalid": !!error || void 0,
-			className: inputUploadButton({
-				variant,
-				className: "group/input-upload"
-			}),
-			children: [/* @__PURE__ */ jsxs(DropZone, {
-				...rest,
-				isDisabled,
-				className: clsx(inputUploadDropZone({ variant }), inputSizeCva({ size })),
-				children: [/* @__PURE__ */ jsx(Typography, {
-					variant: "default",
-					size: "label-1",
-					as: "span",
-					className: "min-w-0 flex-fill select-none truncate text-text-default-3",
-					children: placeholder ?? t(($) => $.ui.fileUpload.emptyText)
-				}), variant === "nested" && /* @__PURE__ */ jsx(TextButton, {
-					isDisabled,
-					icon: UploadIcon,
-					children: buttonText ?? t(($) => $.ui.fileUpload.upload)
-				})]
-			}), variant !== "nested" && /* @__PURE__ */ jsx(Button$1, {
-				size: inputButtonSizeMapping[size ?? "default"],
-				width: "hug",
-				isDisabled,
-				className: "truncate",
-				children: buttonText ?? t(($) => $.ui.fileUpload.uploadFile)
-			})]
-		})
-	});
+			"data-disabled": t0,
+			"data-is-disabled": t1,
+			"data-invalid": t2,
+			className: t3,
+			children: [t8, t9]
+		});
+		$[36] = t0;
+		$[37] = t1;
+		$[38] = t2;
+		$[39] = t3;
+		$[40] = t8;
+		$[41] = t9;
+		$[42] = t10;
+	} else t10 = $[42];
+	let t11;
+	if ($[43] !== rest || $[44] !== t10) {
+		t11 = /* @__PURE__ */ jsx(FileTrigger, {
+			...rest,
+			children: t10
+		});
+		$[43] = rest;
+		$[44] = t10;
+		$[45] = t11;
+	} else t11 = $[45];
+	return t11;
 };
+function _temp($) {
+	return $.ui.fileUpload.emptyText;
+}
+function _temp2($_0) {
+	return $_0.ui.fileUpload.upload;
+}
+function _temp3($_1) {
+	return $_1.ui.fileUpload.uploadFile;
+}
 //#endregion
 export { InputUploadContent };

package/dist/components/inputs/File/shared/InputUploadFilled.js

@@ -1,28 +1,69 @@
 import { CloseIcon } from "../../../../assets/icons/Close.js";
-import { UIStyle } from "../../../../config/uiStyle.context.js";
+import { UIOverrides } from "../../../../config/uiOverrides.context.js";
 import { Typography } from "../../../text/Typography/Typography.js";
 import { InlineIconButton } from "../../../buttons/InlineIconButton/InlineIconButton.js";
-import { inputSize } from "../../shared/input.cva.js";
+import { inputSizeDefinition } from "../../shared/input.cva.js";
+import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 //#region src/components/inputs/File/shared/InputUploadFilled.tsx
-var InputUploadFilled = ({ files, onRemove, isDisabled, size }) => {
-	return /* @__PURE__ */ jsxs("div", {
-		className: clsx("flex items-center rounded-input-rounding-default border border-input-outlined-outline-idle border-solid bg-input-outlined-idle", UIStyle.useCva("input.sizeCva", inputSize)({ size })),
-		children: [/* @__PURE__ */ jsx(Typography, {
+var InputUploadFilled = (t0) => {
+	const $ = c(14);
+	const { files, onRemove, isDisabled, size } = t0;
+	const inputSizeCva = UIOverrides.useCva("input.sizeCva", inputSizeDefinition);
+	let t1;
+	if ($[0] !== inputSizeCva || $[1] !== size) {
+		t1 = clsx("flex items-center rounded-input-rounding-default border border-input-outlined-outline-idle border-solid bg-input-outlined-idle", inputSizeCva({ size }));
+		$[0] = inputSizeCva;
+		$[1] = size;
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== files) {
+		t2 = files.map(_temp).join(", ");
+		$[3] = files;
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Typography, {
 			variant: "default",
 			size: "label-1",
 			as: "span",
 			className: "flex-fill select-none truncate text-ellipsis text-text-default-1 input-disabled:text-text-default-3",
-			children: files.map((file) => file.name).join(", ")
-		}), /* @__PURE__ */ jsx(InlineIconButton, {
+			children: t2
+		});
+		$[5] = t2;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== isDisabled || $[8] !== onRemove) {
+		t4 = /* @__PURE__ */ jsx(InlineIconButton, {
 			label: "Remove files",
 			color: "secondary",
 			icon: CloseIcon,
 			isDisabled,
 			onPress: onRemove
-		})]
-	});
+		});
+		$[7] = isDisabled;
+		$[8] = onRemove;
+		$[9] = t4;
+	} else t4 = $[9];
+	let t5;
+	if ($[10] !== t1 || $[11] !== t3 || $[12] !== t4) {
+		t5 = /* @__PURE__ */ jsxs("div", {
+			className: t1,
+			children: [t3, t4]
+		});
+		$[10] = t1;
+		$[11] = t3;
+		$[12] = t4;
+		$[13] = t5;
+	} else t5 = $[13];
+	return t5;
 };
+function _temp(file) {
+	return file.name;
+}
 //#endregion
 export { InputUploadFilled };

package/dist/components/inputs/File/shared/ProgressBar.js

@@ -1,27 +1,66 @@
 import { Typography } from "../../../text/Typography/Typography.js";
+import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 import clsx$1 from "clsx";
 //#region src/components/inputs/File/shared/ProgressBar.tsx
-var ProgressBar = ({ progress = 0, valueLabel = "trailing" }) => {
-	return /* @__PURE__ */ jsxs("div", {
-		className: clsx$1("flex w-full items-center justify-center gap-file-upload-content-gap-progress-actions", valueLabel === "leading" && "flex-row-reverse"),
-		children: [/* @__PURE__ */ jsx("div", {
+var ProgressBar = (t0) => {
+	const $ = c(12);
+	const { progress: t1, valueLabel: t2 } = t0;
+	const progress = t1 === void 0 ? 0 : t1;
+	const valueLabel = t2 === void 0 ? "trailing" : t2;
+	const t3 = valueLabel === "leading" && "flex-row-reverse";
+	let t4;
+	if ($[0] !== t3) {
+		t4 = clsx$1("flex w-full items-center justify-center gap-file-upload-content-gap-progress-actions", t3);
+		$[0] = t3;
+		$[1] = t4;
+	} else t4 = $[1];
+	let t5;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = /* @__PURE__ */ jsx("div", { className: "h-1 w-full shrink-0 rounded-xs bg-input-filled-idle" });
+		$[2] = t5;
+	} else t5 = $[2];
+	const t6 = `${progress}%`;
+	let t7;
+	if ($[3] !== t6) {
+		t7 = /* @__PURE__ */ jsx("div", {
 			className: "flex flex-fill flex-col items-start gap-2 py-progress-height-height",
 			children: /* @__PURE__ */ jsxs("div", {
 				className: "relative h-1 w-full",
-				children: [/* @__PURE__ */ jsx("div", { className: "h-1 w-full shrink-0 rounded-xs bg-input-filled-idle" }), /* @__PURE__ */ jsx("div", {
+				children: [t5, /* @__PURE__ */ jsx("div", {
 					className: "absolute top-0 left-0 h-1 shrink-0 rounded-xs bg-interactive-contained-primary-idle transition-all duration-300",
-					style: { width: `${progress}%` }
+					style: { width: t6 }
 				})]
 			})
-		}), valueLabel !== "none" && /* @__PURE__ */ jsxs(Typography, {
+		});
+		$[3] = t6;
+		$[4] = t7;
+	} else t7 = $[4];
+	let t8;
+	if ($[5] !== progress || $[6] !== valueLabel) {
+		t8 = valueLabel !== "none" && /* @__PURE__ */ jsxs(Typography, {
 			variant: "default",
 			size: "label-2",
 			as: "span",
 			className: "text-center text-text-default-3",
 			children: [progress, "%"]
-		})]
-	});
+		});
+		$[5] = progress;
+		$[6] = valueLabel;
+		$[7] = t8;
+	} else t8 = $[7];
+	let t9;
+	if ($[8] !== t4 || $[9] !== t7 || $[10] !== t8) {
+		t9 = /* @__PURE__ */ jsxs("div", {
+			className: t4,
+			children: [t7, t8]
+		});
+		$[8] = t4;
+		$[9] = t7;
+		$[10] = t8;
+		$[11] = t9;
+	} else t9 = $[11];
+	return t9;
 };
 //#endregion
 export { ProgressBar };

package/dist/components/inputs/File/shared/fileUpload.cva.d.ts

@@ -1,11 +1,28 @@
-import { VariantProps } from 'class-variance-authority';
 import { ClassProp } from 'class-variance-authority/types';
-export declare const fileUploadDropZoneBase: (props?: ({
-    variant?: "horizontal" | "vertical" | null | undefined;
-    isContainer?: boolean | null | undefined;
-} & ClassProp) | undefined) => string;
-export type FileUploadDropZoneProps = VariantProps<typeof fileUploadDropZoneBase>;
+import { UIOverrides } from '../../../../config/uiOverrides.context';
+export declare const fileUploadDropZoneDefinition: {
+    base: string[];
+    config: import("../../../../utils/style-merge.util").StyleMergeUtils.Config<{
+        readonly variant: {
+            readonly vertical: ["flex-col justify-center"];
+            readonly horizontal: ["flex-row justify-between"];
+        };
+        readonly isContainer: {
+            readonly true: ["data-[drop-target]:before:content-['']", "data-[drop-target]:before:absolute", "data-[drop-target]:before:z-40", "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"];
+            readonly 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"];
+        };
+    }>;
+};
+export type FileUploadDropZoneConfig = NonNullable<typeof fileUploadDropZoneDefinition.config>;
+export interface FileUploadDropZoneProps extends UIOverrides.VariantProps<FileUploadDropZoneConfig> {
+}
 export declare const fileUploadDropZone: (props: FileUploadDropZoneProps & ClassProp) => string;
-export declare const fileCardList: (props?: ({
-    variant?: "horizontal" | "vertical" | null | undefined;
-} & ClassProp) | undefined) => string;
+export declare const fileCardListDefinition: {
+    base: string[];
+    config: import("../../../../utils/style-merge.util").StyleMergeUtils.Config<{
+        readonly variant: {
+            readonly vertical: ["flex-col"];
+            readonly horizontal: ["flex-row flex-wrap"];
+        };
+    }>;
+};

package/dist/components/inputs/File/shared/fileUpload.cva.js

@@ -1,51 +1,59 @@
+import { UIOverrides } from "../../../../config/uiOverrides.context.js";
 import { clsx } from "clsx";
 import { cva } from "class-variance-authority";
 //#region src/components/inputs/File/shared/fileUpload.cva.ts
-var fileUploadDropZoneBase = cva(["relative w-full rounded-file-upload-container-rounding-default"], {
-	variants: {
-		variant: {
-			vertical: ["flex-col justify-center"],
-			horizontal: ["flex-row justify-between"]
+var 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-40",
+					"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"
+				]
+			}
 		},
-		isContainer: {
-			true: [
-				"data-[drop-target]:before:content-['']",
-				"data-[drop-target]:before:absolute",
-				"data-[drop-target]:before:z-40",
-				"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" }
+		defaultVariants: { variant: "vertical" }
+	}
 });
+var fileUploadDropZoneBase = cva(fileUploadDropZoneDefinition.base, fileUploadDropZoneDefinition.config);
 var fileUploadDropZone = (props) => {
 	const { className, ...rest } = props;
 	return clsx(fileUploadDropZoneBase(rest), className);
 };
-cva(["flex gap-3"], {
-	variants: { variant: {
-		vertical: ["flex-col"],
-		horizontal: ["flex-row flex-wrap"]
-	} },
-	defaultVariants: { variant: "vertical" }
+var fileCardListDefinition = UIOverrides.defineConfig({
+	base: ["flex gap-3"],
+	config: {
+		variants: { variant: {
+			vertical: ["flex-col"],
+			horizontal: ["flex-row flex-wrap"]
+		} },
+		defaultVariants: { variant: "vertical" }
+	}
 });
 //#endregion
-export { fileUploadDropZone };
+export { fileCardListDefinition, fileUploadDropZone, fileUploadDropZoneDefinition };

package/dist/components/inputs/File/shared/inputUploadButton.cva.d.ts

@@ -1,10 +1,27 @@
-import { VariantProps } from 'class-variance-authority';
 import { ClassProp } from 'class-variance-authority/types';
-export declare const inputUploadButtonBase: (props?: ({
-    variant?: "default" | "nested" | null | undefined;
-} & ClassProp) | undefined) => string;
-export type InputUploadButtonProps = VariantProps<typeof inputUploadButtonBase>;
+import { UIOverrides } from '../../../../config/uiOverrides.context';
+export declare const inputUploadButtonDefinition: {
+    base: string[];
+    config: import("../../../../utils/style-merge.util").StyleMergeUtils.Config<{
+        readonly variant: {
+            readonly default: [];
+            readonly nested: [];
+        };
+    }>;
+};
+export type InputUploadButtonConfig = NonNullable<typeof inputUploadButtonDefinition.config>;
+export interface InputUploadButtonProps extends UIOverrides.VariantProps<InputUploadButtonConfig> {
+}
 export declare const inputUploadButton: (props: InputUploadButtonProps & ClassProp) => string;
+export declare const inputUploadDropZoneDefinition: {
+    base: string[];
+    config: import("../../../../utils/style-merge.util").StyleMergeUtils.Config<{
+        readonly variant: {
+            readonly default: ["rounded-input-rounding-default border border-input-outlined-outline-idle border-solid bg-input-outlined-idle"];
+            readonly nested: ["rounded-input-rounding-default border border-input-outlined-outline-idle border-solid bg-input-outlined-idle"];
+        };
+    }>;
+};
 export declare const inputUploadDropZone: (props?: ({
-    variant?: "default" | "nested" | null | undefined;
+    readonly variant?: "default" | "nested" | null | undefined;
 } & ClassProp) | undefined) => string;

package/dist/components/inputs/File/shared/inputUploadButton.cva.js

@@ -1,30 +1,39 @@
+import { UIOverrides } from "../../../../config/uiOverrides.context.js";
 import { clsx } from "clsx";
 import { cva } from "class-variance-authority";
 //#region src/components/inputs/File/shared/inputUploadButton.cva.ts
-var inputUploadButtonBase = cva(["flex w-full items-center justify-between gap-input-gap-input-to-button-gap"], {
-	variants: { variant: {
-		default: [],
-		nested: []
-	} },
-	defaultVariants: { variant: "default" }
+var inputUploadButtonDefinition = UIOverrides.defineConfig({
+	base: ["flex w-full items-center justify-between gap-input-gap-input-to-button-gap"],
+	config: {
+		variants: { variant: {
+			default: [],
+			nested: []
+		} },
+		defaultVariants: { variant: "default" }
+	}
 });
+var inputUploadButtonBase = cva(inputUploadButtonDefinition.base, inputUploadButtonDefinition.config);
 var inputUploadButton = (props) => {
 	const { className, ...rest } = props;
 	return clsx(inputUploadButtonBase(rest), className);
 };
-var inputUploadDropZone = cva([
-	"relative",
-	"min-w-0 flex-1",
-	"flex items-center",
-	"group-invalid/input-upload:border group-invalid/input-upload:border-input-outlined-outline-error",
-	"data-[drop-target]:border-input-outlined-outline-hover",
-	"hover:border-input-outlined-outline-hover"
-], {
-	variants: { variant: {
-		default: ["rounded-input-rounding-default border border-input-outlined-outline-idle border-solid bg-input-outlined-idle"],
-		nested: ["rounded-input-rounding-default border border-input-outlined-outline-idle border-solid bg-input-outlined-idle"]
-	} },
-	defaultVariants: { variant: "default" }
+var inputUploadDropZoneDefinition = UIOverrides.defineConfig({
+	base: [
+		"relative",
+		"min-w-0 flex-1",
+		"flex items-center",
+		"group-invalid/input-upload:border group-invalid/input-upload:border-input-outlined-outline-error",
+		"data-[drop-target]:border-input-outlined-outline-hover",
+		"hover:border-input-outlined-outline-hover"
+	],
+	config: {
+		variants: { variant: {
+			default: ["rounded-input-rounding-default border border-input-outlined-outline-idle border-solid bg-input-outlined-idle"],
+			nested: ["rounded-input-rounding-default border border-input-outlined-outline-idle border-solid bg-input-outlined-idle"]
+		} },
+		defaultVariants: { variant: "default" }
+	}
 });
+var inputUploadDropZone = cva(inputUploadDropZoneDefinition.base, inputUploadDropZoneDefinition.config);
 //#endregion
-export { inputUploadButton, inputUploadDropZone };
+export { inputUploadButton, inputUploadButtonDefinition, inputUploadDropZone, inputUploadDropZoneDefinition };

package/dist/components/inputs/FormField/FormField.d.ts

@@ -1,4 +1,4 @@
-import { PropsWithChildren, Ref } from 'react';
+import { FocusEventHandler, MouseEventHandler, PropsWithChildren, Ref } from 'react';
 import { FormFieldErrorProps } from './FormFieldError';
 import { FormFieldHeaderProps } from './FormFieldHeader';
 import { TextInputProps } from '../Input/TextInput/TextInput';
@@ -13,8 +13,8 @@ interface FormFieldComponentProps extends PropsWithChildren<FormFieldProps> {
     labelProps?: FormFieldHeaderProps["labelProps"];
     as?: TextInputProps["as"];
     tabIndex?: number;
-    onMouseEnter?: () => void;
-    onFocusCapture?: () => void;
+    onMouseEnter?: MouseEventHandler<HTMLDivElement>;
+    onFocusCapture?: FocusEventHandler<HTMLDivElement>;
 }
 export declare const FormField: ({ ref, as, label, tooltipText, helperText, isRequired, rightContent, isDisabled, error, hideLabel, headerClassName, errorClassName, children, className, labelProps, isHeaderHidden, tabIndex, onMouseEnter, onFocusCapture, }: FormFieldComponentProps) => import("react/jsx-runtime").JSX.Element;
 export {};