@povio/ui 2.3.3 → 3.0.0

package/dist/components/buttons/shared/buttonContent.cva.js

@@ -1,12 +1,5 @@
 import { cva } from "class-variance-authority";
-cva("flex w-full items-center justify-center", {
-	variants: { iconPosition: {
-		left: "flex-row",
-		right: "flex-row-reverse",
-		none: "flex-row"
-	} },
-	defaultVariants: { iconPosition: "left" }
-});
+//#region src/components/buttons/shared/buttonContent.cva.ts
 var buttonContentLabel = cva("hyphens-auto md:truncate", {
 	variants: {
 		iconPosition: {

package/dist/components/inputs/Checkbox/Checkbox.js

@@ -1,4 +1,4 @@
-import { UIStyle } from "../../../config/uiStyle.context.js";
+import { UIOverrides } from "../../../config/uiOverrides.context.js";
 import { UIConfig } from "../../../config/uiConfig.context.js";
 import { checkboxIndicatorClass, checkboxTypography } from "./checkbox.cva.js";
 import { FormFieldError } from "../FormField/FormFieldError.js";
@@ -12,7 +12,7 @@ import { Controller } from "react-hook-form";
 //#region src/components/inputs/Checkbox/Checkbox.tsx
 var CheckboxBase = (props) => {
 	const ui = UIConfig.useConfig();
-	const checkboxTypographyMap = UIStyle.useMapper("checkbox.typography", checkboxTypography);
+	const checkboxTypographyMap = UIOverrides.useMapper("checkbox.typography", checkboxTypography);
 	const { className, children, isDisabled, error, variant = ui.checkbox.variant, hideLabel = ui.input.hideLabel, ...rest } = props;
 	const formFieldErrorProps = {
 		error,

package/dist/components/inputs/Checkbox/CheckboxCheckmark.js

@@ -1,12 +1,12 @@
 import { CheckboxCheckmarkIcon } from "../../../assets/icons/CheckboxCheckmark.js";
 import { CheckboxIndeterminateIcon } from "../../../assets/icons/CheckboxIndeterminate.js";
-import { UIStyle } from "../../../config/uiStyle.context.js";
-import { checkbox, checkboxIcon } from "./checkbox.cva.js";
+import { UIOverrides } from "../../../config/uiOverrides.context.js";
+import { checkboxDefinition, checkboxIconDefinition } from "./checkbox.cva.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/inputs/Checkbox/CheckboxCheckmark.tsx
 var CheckboxCheckmark = ({ variant, className, selectedIcon: SelectedIcon = CheckboxCheckmarkIcon, indeterminateIcon: IndeterminateIcon = CheckboxIndeterminateIcon, ...props }) => {
-	const checkboxCva = UIStyle.useCva("checkbox.cva", checkbox);
-	const checkboxIconCva = UIStyle.useCva("checkbox.iconCva", checkboxIcon);
+	const checkboxCva = UIOverrides.useCva("checkbox.cva", checkboxDefinition);
+	const checkboxIconCva = UIOverrides.useCva("checkbox.iconCva", checkboxIconDefinition);
 	return /* @__PURE__ */ jsxs("div", {
 		className: checkboxCva({
 			variant,

package/dist/components/inputs/Checkbox/checkbox.cva.d.ts

@@ -1,16 +1,29 @@
-import { VariantProps } from 'class-variance-authority';
 import { TypographyVariantProps } from '../../text/Typography/typography.cva';
-export declare const checkbox: (props?: ({
-    variant?: "default" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export interface CheckboxVariantProps extends VariantProps<typeof checkbox> {
+import { UIOverrides } from '../../../config/uiOverrides.context';
+export declare const checkboxDefinition: {
+    base: string[];
+    config: import("../../../utils/style-merge.util").StyleMergeUtils.Config<{
+        readonly variant: {
+            readonly default: ["m-1 border-interactive-outlined-secondary-on-idle", "text-interactive-contained-primary-on-idle", "group-hover:text-interactive-contained-primary-on-hover", "group-pressed:text-interactive-contained-primary-on-pressed", "group-disabled:text-interactive-contained-primary-on-disabled", "group-disabled:border-interactive-outlined-secondary-on-disabled", "group-hover:border-interactive-outlined-secondary-on-hover", "group-pressed:border-interactive-outlined-secondary-on-pressed", "group-selected:border-interactive-contained-primary-idle", "group-selected:bg-interactive-contained-primary-idle", "group-selected:group-hover:bg-interactive-contained-primary-hover", "group-selected:group-hover:border-interactive-contained-primary-hover", "group-selected:group-pressed:bg-interactive-contained-primary-pressed", "group-selected:group-pressed:border-interactive-contained-primary-pressed", "group-selected:group-disabled:bg-interactive-contained-primary-disabled", "group-selected:group-disabled:border-interactive-contained-primary-disabled", "group-indeterminate:border-interactive-contained-primary-idle", "group-indeterminate:bg-interactive-contained-primary-idle", "group-indeterminate:group-hover:bg-interactive-contained-primary-hover", "group-indeterminate:group-hover:border-interactive-contained-primary-hover", "group-indeterminate:group-pressed:bg-interactive-contained-primary-pressed", "group-indeterminate:group-pressed:border-interactive-contained-primary-pressed", "group-invalid:border-interactive-outlined-error-on-idle", "group-focus-visible:outline-interactive-contained-primary-focus"];
+        };
+    }>;
+};
+export type CheckboxConfig = NonNullable<typeof checkboxDefinition.config>;
+export interface CheckboxVariantProps extends UIOverrides.VariantProps<CheckboxConfig> {
 }
 export declare const checkboxIndicatorClass = "group flex items-center gap-2";
 export declare const checkboxTypography: (props: {
-    variant?: "default" | null | undefined;
+    readonly variant?: "default" | null | undefined;
 }) => TypographyVariantProps | undefined;
-export declare const checkboxIcon: (props?: ({
-    iconVariant?: "selected" | "indeterminate" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export interface CheckboxIconVariantProps extends VariantProps<typeof checkboxIcon> {
+export declare const checkboxIconDefinition: {
+    base: string[];
+    config: import("../../../utils/style-merge.util").StyleMergeUtils.Config<{
+        readonly iconVariant: {
+            readonly selected: ["group-selected:block"];
+            readonly indeterminate: ["group-indeterminate:block"];
+        };
+    }>;
+};
+export type CheckboxIconConfig = NonNullable<typeof checkboxIconDefinition.config>;
+export interface CheckboxIconVariantProps extends UIOverrides.VariantProps<CheckboxIconConfig> {
 }

package/dist/components/inputs/Checkbox/checkbox.cva.js

@@ -1,39 +1,42 @@
+import { UIOverrides } from "../../../config/uiOverrides.context.js";
 import { uiGroupOutlineClass } from "../../outline.clsx.js";
 import { compoundMapper } from "../../../utils/compoundMapper.js";
-import { cva } from "class-variance-authority";
 //#region src/components/inputs/Checkbox/checkbox.cva.ts
-var checkbox = cva([
-	"flex items-center justify-center border-2",
-	"relative size-4 shrink-0 rounded-xs p-1",
-	uiGroupOutlineClass
-], {
-	variants: { variant: { default: [
-		"m-1 border-interactive-outlined-secondary-on-idle",
-		"text-interactive-contained-primary-on-idle",
-		"group-hover:text-interactive-contained-primary-on-hover",
-		"group-pressed:text-interactive-contained-primary-on-pressed",
-		"group-disabled:text-interactive-contained-primary-on-disabled",
-		"group-disabled:border-interactive-outlined-secondary-on-disabled",
-		"group-hover:border-interactive-outlined-secondary-on-hover",
-		"group-pressed:border-interactive-outlined-secondary-on-pressed",
-		"group-selected:border-interactive-contained-primary-idle",
-		"group-selected:bg-interactive-contained-primary-idle",
-		"group-selected:group-hover:bg-interactive-contained-primary-hover",
-		"group-selected:group-hover:border-interactive-contained-primary-hover",
-		"group-selected:group-pressed:bg-interactive-contained-primary-pressed",
-		"group-selected:group-pressed:border-interactive-contained-primary-pressed",
-		"group-selected:group-disabled:bg-interactive-contained-primary-disabled",
-		"group-selected:group-disabled:border-interactive-contained-primary-disabled",
-		"group-indeterminate:border-interactive-contained-primary-idle",
-		"group-indeterminate:bg-interactive-contained-primary-idle",
-		"group-indeterminate:group-hover:bg-interactive-contained-primary-hover",
-		"group-indeterminate:group-hover:border-interactive-contained-primary-hover",
-		"group-indeterminate:group-pressed:bg-interactive-contained-primary-pressed",
-		"group-indeterminate:group-pressed:border-interactive-contained-primary-pressed",
-		"group-invalid:border-interactive-outlined-error-on-idle",
-		"group-focus-visible:outline-interactive-contained-primary-focus"
-	] } },
-	defaultVariants: { variant: "default" }
+var checkboxDefinition = UIOverrides.defineConfig({
+	base: [
+		"flex items-center justify-center border-2",
+		"relative size-4 shrink-0 rounded-xs p-1",
+		uiGroupOutlineClass
+	],
+	config: {
+		variants: { variant: { default: [
+			"m-1 border-interactive-outlined-secondary-on-idle",
+			"text-interactive-contained-primary-on-idle",
+			"group-hover:text-interactive-contained-primary-on-hover",
+			"group-pressed:text-interactive-contained-primary-on-pressed",
+			"group-disabled:text-interactive-contained-primary-on-disabled",
+			"group-disabled:border-interactive-outlined-secondary-on-disabled",
+			"group-hover:border-interactive-outlined-secondary-on-hover",
+			"group-pressed:border-interactive-outlined-secondary-on-pressed",
+			"group-selected:border-interactive-contained-primary-idle",
+			"group-selected:bg-interactive-contained-primary-idle",
+			"group-selected:group-hover:bg-interactive-contained-primary-hover",
+			"group-selected:group-hover:border-interactive-contained-primary-hover",
+			"group-selected:group-pressed:bg-interactive-contained-primary-pressed",
+			"group-selected:group-pressed:border-interactive-contained-primary-pressed",
+			"group-selected:group-disabled:bg-interactive-contained-primary-disabled",
+			"group-selected:group-disabled:border-interactive-contained-primary-disabled",
+			"group-indeterminate:border-interactive-contained-primary-idle",
+			"group-indeterminate:bg-interactive-contained-primary-idle",
+			"group-indeterminate:group-hover:bg-interactive-contained-primary-hover",
+			"group-indeterminate:group-hover:border-interactive-contained-primary-hover",
+			"group-indeterminate:group-pressed:bg-interactive-contained-primary-pressed",
+			"group-indeterminate:group-pressed:border-interactive-contained-primary-pressed",
+			"group-invalid:border-interactive-outlined-error-on-idle",
+			"group-focus-visible:outline-interactive-contained-primary-focus"
+		] } },
+		defaultVariants: { variant: "default" }
+	}
 });
 var checkboxIndicatorClass = "group flex items-center gap-2";
 var checkboxTypography = compoundMapper({ default: {
@@ -41,12 +44,15 @@ var checkboxTypography = compoundMapper({ default: {
 	sizeMobile: "label-1",
 	variant: "default"
 } });
-var checkboxIcon = cva(["absolute hidden size-3"], {
-	variants: { iconVariant: {
-		selected: ["group-selected:block"],
-		indeterminate: ["group-indeterminate:block"]
-	} },
-	defaultVariants: { iconVariant: "selected" }
+var checkboxIconDefinition = UIOverrides.defineConfig({
+	base: ["absolute hidden size-3"],
+	config: {
+		variants: { iconVariant: {
+			selected: ["group-selected:block"],
+			indeterminate: ["group-indeterminate:block"]
+		} },
+		defaultVariants: { iconVariant: "selected" }
+	}
 });
 //#endregion
-export { checkbox, checkboxIcon, checkboxIndicatorClass, checkboxTypography };
+export { checkboxDefinition, checkboxIconDefinition, checkboxIndicatorClass, checkboxTypography };

package/dist/components/inputs/DateTime/shared/DatePickerInput.js

@@ -1,6 +1,6 @@
 import { CalendarIcon } from "../../../../assets/icons/Calendar.js";
 import { DateTimeIcon } from "../../../../assets/icons/DateTime.js";
-import { UIStyle } from "../../../../config/uiStyle.context.js";
+import { UIOverrides } from "../../../../config/uiOverrides.context.js";
 import { Typography } from "../../../text/Typography/Typography.js";
 import { IconButton } from "../../../buttons/IconButton/IconButton.js";
 import { InlineIconButton } from "../../../buttons/InlineIconButton/InlineIconButton.js";
@@ -8,7 +8,7 @@ import { TodayIcon } from "../../../../assets/icons/Today.js";
 import { DateField } from "./DateField.js";
 import { FormFieldLabel } from "../../FormField/FormFieldLabel.js";
 import { InputClear } from "../../shared/InputClear.js";
-import { inputBase, inputSize } from "../../shared/input.cva.js";
+import { inputBaseDefinition, inputSizeDefinition } from "../../shared/input.cva.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { useCallback, useImperativeHandle, useRef, useState } from "react";
@@ -19,8 +19,8 @@ import { getLocalTimeZone, now, toCalendarDateTime, today } from "@international
 var DatePickerInput = ({ ref, as, groupProps, fieldProps, endFieldProps, buttonProps, isDisabled, isInvalid, disableDropdown, variant, size, isDateTime, isClearable, headerProps, todayIcon, isDirty, isRequired, disableManualEntry, placeholder, className, onOpenDropdown, dateGranularity = "day", timeZone, autoFixYear, isTimeOptional = false, format, ...props }) => {
 	let effectiveTimeZone = getLocalTimeZone();
 	if (timeZone) effectiveTimeZone = timeZone;
-	const inputBaseCva = UIStyle.useCva("input.baseCva", inputBase);
-	const inputSizeCva = UIStyle.useCva("input.sizeCva", inputSize);
+	const inputBaseCva = UIOverrides.useCva("input.baseCva", inputBaseDefinition);
+	const inputSizeCva = UIOverrides.useCva("input.sizeCva", inputSizeDefinition);
 	const [canClear, setCanClear] = useState(false);
 	const { hoverProps, isHovered } = useHover({ isDisabled });
 	const [isFocused, setIsFocused] = useState(false);

package/dist/components/inputs/DateTime/shared/DateTimeDialog.js

@@ -1,13 +1,13 @@
-import { UIStyle } from "../../../../config/uiStyle.context.js";
+import { UIOverrides } from "../../../../config/uiOverrides.context.js";
 import { BottomSheet } from "../../../overlays/BottomSheet/BottomSheet.js";
 import { useBreakpoint } from "../../../../hooks/useBreakpoint.js";
-import { popover } from "../../../shared/popover.cva.js";
+import { popoverDefinition } from "../../../shared/popover.cva.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import clsx$1 from "clsx";
 import { Dialog, Popover } from "react-aria-components";
 //#region src/components/inputs/DateTime/shared/DateTimeDialog.tsx
 var DateTimeDialog = ({ hideSidebar, children, footer, sidebar, label, isOpen, triggerRef, dialogProps, onOpenChange }) => {
-	const popoverCva = UIStyle.useCva("popover.cva", popover);
+	const popoverCva = UIOverrides.useCva("popover.cva", popoverDefinition);
 	if (useBreakpoint("md")) {
 		if (!isOpen) return null;
 		return /* @__PURE__ */ jsx(Popover, {

package/dist/components/inputs/DateTime/shared/TimePickerInput.js

@@ -1,10 +1,10 @@
 import { ClockIcon } from "../../../../assets/icons/Clock.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 { FormFieldLabel } from "../../FormField/FormFieldLabel.js";
 import { InputClear } from "../../shared/InputClear.js";
-import { inputBase, inputSize } from "../../shared/input.cva.js";
+import { inputBaseDefinition, inputSizeDefinition } from "../../shared/input.cva.js";
 import { TimeField } from "./TimeField.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
@@ -13,8 +13,8 @@ import { Button } from "react-aria-components";
 import { useFocusVisible, useFocusWithin, useHover } from "react-aria";
 //#region src/components/inputs/DateTime/shared/TimePickerInput.tsx
 var TimePickerInput = ({ ref, as, fieldProps, state, isDisabled, isDirty, isInvalid, disableDropdown, variant, size, isClearable, headerProps, disableManualEntry, placeholder, className, onPress, ...props }) => {
-	const inputBaseCva = UIStyle.useCva("input.baseCva", inputBase);
-	const inputSizeCva = UIStyle.useCva("input.sizeCva", inputSize);
+	const inputBaseCva = UIOverrides.useCva("input.baseCva", inputBaseDefinition);
+	const inputSizeCva = UIOverrides.useCva("input.sizeCva", inputSizeDefinition);
 	const { hoverProps, isHovered } = useHover({ isDisabled });
 	const [isFocused, setIsFocused] = useState(false);
 	const { focusWithinProps } = useFocusWithin({ onFocusWithinChange: setIsFocused });

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

@@ -1,9 +1,9 @@
-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";
@@ -15,7 +15,7 @@ import { useTranslation } from "react-i18next";
 var InputUploadContent = (props) => {
 	const { variant, isDisabled, error, placeholder, buttonText, size, ...rest } = props;
 	const { t } = useTranslation("ui");
-	const inputSizeCva = UIStyle.useCva("input.sizeCva", inputSize);
+	const inputSizeCva = UIOverrides.useCva("input.sizeCva", inputSizeDefinition);
 	return /* @__PURE__ */ jsx(FileTrigger, {
 		...rest,
 		children: /* @__PURE__ */ jsxs("div", {

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

@@ -1,14 +1,14 @@
 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 { 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 })),
+		className: clsx("flex items-center rounded-input-rounding-default border border-input-outlined-outline-idle border-solid bg-input-outlined-idle", UIOverrides.useCva("input.sizeCva", inputSizeDefinition)({ size })),
 		children: [/* @__PURE__ */ jsx(Typography, {
 			variant: "default",
 			size: "label-1",

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/FormFieldError.js

@@ -1,11 +1,11 @@
-import { UIStyle } from "../../../config/uiStyle.context.js";
-import { formFieldError } from "./formFieldError.cva.js";
+import { UIOverrides } from "../../../config/uiOverrides.context.js";
+import { formFieldErrorDefinition } from "./formFieldError.cva.js";
 import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
 //#region src/components/inputs/FormField/FormFieldError.tsx
 var FormFieldError = ({ error, isDisabled, isHidden, className }) => {
 	return /* @__PURE__ */ jsx("p", {
-		className: clsx(UIStyle.useCva("formField.errorLabelCva", formFieldError)({ visible: !!error && !isDisabled && !isHidden }), className),
+		className: clsx(UIOverrides.useCva("formField.errorLabelCva", formFieldErrorDefinition)({ visible: !!error && !isDisabled && !isHidden }), className),
 		children: error
 	});
 };

package/dist/components/inputs/FormField/FormFieldHelper.js

@@ -1,11 +1,11 @@
-import { UIStyle } from "../../../config/uiStyle.context.js";
-import { formFieldHelper } from "./formFieldHelper.cva.js";
+import { UIOverrides } from "../../../config/uiOverrides.context.js";
+import { formFieldHelperDefinition } from "./formFieldHelper.cva.js";
 import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
 //#region src/components/inputs/FormField/FormFieldHelper.tsx
 var FormFieldHelper = ({ helperText, isDisabled, isHidden, hasError, className }) => {
 	return /* @__PURE__ */ jsx("p", {
-		className: clsx(UIStyle.useCva("formField.helperLabelCva", formFieldHelper)({ visible: !!helperText && !isDisabled && !isHidden && !hasError }), className),
+		className: clsx(UIOverrides.useCva("formField.helperLabelCva", formFieldHelperDefinition)({ visible: !!helperText && !isDisabled && !isHidden && !hasError }), className),
 		slot: "description",
 		children: helperText
 	});

package/dist/components/inputs/FormField/FormFieldLabel.js

@@ -1,14 +1,14 @@
-import { UIStyle } from "../../../config/uiStyle.context.js";
-import { typography } from "../../text/Typography/typography.cva.js";
-import { labelBase, labelTypography } from "../shared/label.cva.js";
+import { UIOverrides } from "../../../config/uiOverrides.context.js";
+import { typographyDefinition } from "../../text/Typography/typography.cva.js";
+import { labelDefinition, labelTypography } from "../shared/label.cva.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { Label } from "react-aria-components";
 //#region src/components/inputs/FormField/FormFieldLabel.tsx
 var FormFieldLabel = ({ ref, as, label, isRequired, isDisabled, labelProps, className }) => {
-	const typographyCva = UIStyle.useCva("typography.cva", typography);
-	const labelTypographyMap = UIStyle.useMapper("label.typography", labelTypography);
-	const labelBaseCva = UIStyle.useCva("label.cva", labelBase);
+	const typographyCva = UIOverrides.useCva("typography.cva", typographyDefinition);
+	const labelTypographyMap = UIOverrides.useMapper("label.typography", labelTypography);
+	const labelBaseCva = UIOverrides.useCva("label.cva", labelDefinition);
 	return /* @__PURE__ */ jsxs(Label, {
 		...labelProps,
 		ref,