@povio/ui 2.3.2 → 3.0.0

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,

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

@@ -1,6 +1,13 @@
-import { VariantProps } from 'class-variance-authority';
-export declare const formFieldError: (props?: ({
-    visible?: boolean | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export interface FormFieldErrorVariantProps extends VariantProps<typeof formFieldError> {
+import { UIOverrides } from '../../../config/uiOverrides.context';
+export declare const formFieldErrorDefinition: {
+    base: string[];
+    config: import("../../../utils/style-merge.util").StyleMergeUtils.Config<{
+        readonly visible: {
+            readonly true: "mt-1-5";
+            readonly false: "sr-only";
+        };
+    }>;
+};
+export type FormFieldErrorConfig = NonNullable<typeof formFieldErrorDefinition.config>;
+export interface FormFieldErrorVariantProps extends UIOverrides.VariantProps<FormFieldErrorConfig> {
 }

package/dist/components/inputs/FormField/formFieldError.cva.js

@@ -1,11 +1,14 @@
-import { cva } from "class-variance-authority";
+import { UIOverrides } from "../../../config/uiOverrides.context.js";
 //#region src/components/inputs/FormField/formFieldError.cva.ts
-var formFieldError = cva("text-label-3 text-text-error-1", {
-	variants: { visible: {
-		true: "mt-1-5",
-		false: "sr-only"
-	} },
-	defaultVariants: { visible: false }
+var formFieldErrorDefinition = UIOverrides.defineConfig({
+	base: ["text-label-3 text-text-error-1"],
+	config: {
+		variants: { visible: {
+			true: "mt-1-5",
+			false: "sr-only"
+		} },
+		defaultVariants: { visible: false }
+	}
 });
 //#endregion
-export { formFieldError };
+export { formFieldErrorDefinition };

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

@@ -1,6 +1,13 @@
-import { VariantProps } from 'class-variance-authority';
-export declare const formFieldHelper: (props?: ({
-    visible?: boolean | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export interface FormFieldHelperVariantProps extends VariantProps<typeof formFieldHelper> {
+import { UIOverrides } from '../../../config/uiOverrides.context';
+export declare const formFieldHelperDefinition: {
+    base: string[];
+    config: import("../../../utils/style-merge.util").StyleMergeUtils.Config<{
+        readonly visible: {
+            readonly true: "mt-1-5";
+            readonly false: "sr-only";
+        };
+    }>;
+};
+export type FormFieldHelperConfig = NonNullable<typeof formFieldHelperDefinition.config>;
+export interface FormFieldHelperVariantProps extends UIOverrides.VariantProps<FormFieldHelperConfig> {
 }

package/dist/components/inputs/FormField/formFieldHelper.cva.js

@@ -1,11 +1,14 @@
-import { cva } from "class-variance-authority";
+import { UIOverrides } from "../../../config/uiOverrides.context.js";
 //#region src/components/inputs/FormField/formFieldHelper.cva.ts
-var formFieldHelper = cva("text-label-3 text-text-default-2", {
-	variants: { visible: {
-		true: "mt-1-5",
-		false: "sr-only"
-	} },
-	defaultVariants: { visible: false }
+var formFieldHelperDefinition = UIOverrides.defineConfig({
+	base: ["text-label-3 text-text-default-2"],
+	config: {
+		variants: { visible: {
+			true: "mt-1-5",
+			false: "sr-only"
+		} },
+		defaultVariants: { visible: false }
+	}
 });
 //#endregion
-export { formFieldHelper };
+export { formFieldHelperDefinition };

package/dist/components/inputs/Input/NumberInput/NumberInput.js

@@ -1,6 +1,6 @@
-import { UIStyle } from "../../../../config/uiStyle.context.js";
+import { UIOverrides } from "../../../../config/uiOverrides.context.js";
 import { UIConfig } from "../../../../config/uiConfig.context.js";
-import { inputBase } from "../../shared/input.cva.js";
+import { inputBaseDefinition } from "../../shared/input.cva.js";
 import { FormField } from "../../FormField/FormField.js";
 import { TooltipWrapper } from "../../shared/TooltipWrapper.js";
 import { InputContent } from "../shared/InputContent.js";
@@ -15,7 +15,7 @@ import { useNumberFieldState } from "react-stately";
 //#region src/components/inputs/Input/NumberInput/NumberInput.tsx
 var NumberInputBase = (props) => {
 	const ui = UIConfig.useConfig();
-	const inputBaseCva = UIStyle.useCva("input.baseCva", inputBase);
+	const inputBaseCva = UIOverrides.useCva("input.baseCva", inputBaseDefinition);
 	const inputRef = useRef(null);
 	const { ref, inputClassName, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, className, unit, isLoading, action, leadingIcon, trailingIcon, value, onChange, onBlur, formatOptions = ui.numberInput.formatOptions, variant = ui.input.variant, as = ui.input.as, size = ui.input.size, hideLabel = ui.input.hideLabel, isClearable = ui.input.isClearable, ...rest } = props;
 	const numberFieldRef = useRef(null);

package/dist/components/inputs/Input/TextArea/TextArea.js

@@ -1,8 +1,8 @@
-import { UIStyle } from "../../../../config/uiStyle.context.js";
+import { UIOverrides } from "../../../../config/uiOverrides.context.js";
 import { UIConfig } from "../../../../config/uiConfig.context.js";
 import { FormFieldLabel } from "../../FormField/FormFieldLabel.js";
 import { InputClear } from "../../shared/InputClear.js";
-import { inputSide, inputSize, useInputCva } from "../../shared/input.cva.js";
+import { inputSideDefinition, inputSizeDefinition, useInputCva } from "../../shared/input.cva.js";
 import { FormField } from "../../FormField/FormField.js";
 import { TooltipWrapper } from "../../shared/TooltipWrapper.js";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -16,8 +16,8 @@ import { Controller } from "react-hook-form";
 var TextAreaBase = (props) => {
 	const ui = UIConfig.useConfig();
 	const inputCva = useInputCva();
-	const inputSizeCva = UIStyle.useCva("input.sizeCva", inputSize);
-	const inputSideCva = UIStyle.useCva("input.sideCva", inputSide);
+	const inputSizeCva = UIOverrides.useCva("input.sizeCva", inputSizeDefinition);
+	const inputSideCva = UIOverrides.useCva("input.sideCva", inputSideDefinition);
 	const { ref, className, inputClassName, error, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, value, onChange, onBlur, as = ui.input.as, hideLabel = ui.input.hideLabel, variant = ui.input.variant, isClearable = ui.input.isClearable, ...rest } = props;
 	const textFieldRef = useRef(null);
 	const { labelProps, inputProps } = useTextField({

package/dist/components/inputs/Input/TextInput/TextInput.js

@@ -1,6 +1,6 @@
-import { UIStyle } from "../../../../config/uiStyle.context.js";
+import { UIOverrides } from "../../../../config/uiOverrides.context.js";
 import { UIConfig } from "../../../../config/uiConfig.context.js";
-import { inputBase } from "../../shared/input.cva.js";
+import { inputBaseDefinition } from "../../shared/input.cva.js";
 import { FormField } from "../../FormField/FormField.js";
 import { TooltipWrapper } from "../../shared/TooltipWrapper.js";
 import { InputContent } from "../shared/InputContent.js";
@@ -14,7 +14,7 @@ import { Controller } from "react-hook-form";
 //#region src/components/inputs/Input/TextInput/TextInput.tsx
 var TextInputBase = (props) => {
 	const ui = UIConfig.useConfig();
-	const inputBaseCva = UIStyle.useCva("input.baseCva", inputBase);
+	const inputBaseCva = UIOverrides.useCva("input.baseCva", inputBaseDefinition);
 	const inputRef = useRef(null);
 	const { ref, inputClassName, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, className, unit, isLoading, action, leadingIcon, trailingIcon, value, onChange, onBlur, as = ui.input.as, hideLabel = ui.input.hideLabel, variant = ui.input.variant, size = ui.input.size, isClearable = ui.input.isClearable, ...rest } = props;
 	const textFieldRef = useRef(null);

package/dist/components/inputs/Input/shared/InputContent.js

@@ -1,17 +1,17 @@
-import { UIStyle } from "../../../../config/uiStyle.context.js";
-import { typography } from "../../../text/Typography/typography.cva.js";
+import { UIOverrides } from "../../../../config/uiOverrides.context.js";
+import { typographyDefinition } from "../../../text/Typography/typography.cva.js";
 import { Loader } from "../../../status/Loader/Loader.js";
 import { InlineIconButton } from "../../../buttons/InlineIconButton/InlineIconButton.js";
 import { FormFieldLabel } from "../../FormField/FormFieldLabel.js";
 import { InputClear } from "../../shared/InputClear.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";
 import { isValidElement } from "react";
 //#region src/components/inputs/Input/shared/InputContent.tsx
 var InputContent = ({ leadingIcon: LeadingIcon, trailingIcon: TrailingIcon, unit, isLoading, isDisabled, action, isClearable, value, onChange, onBlur, children, headerProps, as, size }) => {
-	const typographyCva = UIStyle.useCva("typography.cva", typography);
-	const inputSizeCva = UIStyle.useCva("input.sizeCva", inputSize);
+	const typographyCva = UIOverrides.useCva("typography.cva", typographyDefinition);
+	const inputSizeCva = UIOverrides.useCva("input.sizeCva", inputSizeDefinition);
 	const isLeadingIconElement = LeadingIcon && isValidElement(LeadingIcon);
 	const isTrailingIconElement = TrailingIcon && isValidElement(TrailingIcon);
 	const showClear = value != null && value !== "" && !isDisabled;

package/dist/components/inputs/RadioGroup/RadioGroup.js

@@ -1,8 +1,8 @@
-import { UIStyle } from "../../../config/uiStyle.context.js";
+import { UIOverrides } from "../../../config/uiOverrides.context.js";
 import { UIConfig } from "../../../config/uiConfig.context.js";
 import { CheckContent } from "../shared/CheckContent.js";
 import { FormField } from "../FormField/FormField.js";
-import { radio, radioIndicatorClass, radioTypography } from "./radio.cva.js";
+import { radioDefinition, radioIndicatorClass, radioTypography } from "./radio.cva.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { Radio, RadioGroup } from "react-aria-components";
@@ -11,8 +11,8 @@ import { Controller } from "react-hook-form";
 //#region src/components/inputs/RadioGroup/RadioGroup.tsx
 var RadioGroupBase = (props) => {
 	const ui = UIConfig.useConfig();
-	const radioCva = UIStyle.useCva("radio.cva", radio);
-	const radioTypographyMap = UIStyle.useMapper("radio.typography", radioTypography);
+	const radioCva = UIOverrides.useCva("radio.cva", radioDefinition);
+	const radioTypographyMap = UIOverrides.useMapper("radio.typography", radioTypography);
 	const { label, tooltipText, helperText, isDirty, isRequired, rightContent, isDisabled, headerClassName, errorClassName, labelClassName, inputClassName, isHeaderHidden, error, className, options, variant = ui.radioGroup.variant, hideLabel = ui.radioGroup.hideLabel, ...rest } = props;
 	const formFieldProps = {
 		className,

package/dist/components/inputs/RadioGroup/radio.cva.d.ts

@@ -1,11 +1,17 @@
-import { VariantProps } from 'class-variance-authority';
 import { TypographyVariantProps } from '../../text/Typography/typography.cva';
-export declare const radio: (props?: ({
-    variant?: "default" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export interface RadioVariantProps extends VariantProps<typeof radio> {
+import { UIOverrides } from '../../../config/uiOverrides.context';
+export declare const radioDefinition: {
+    base: string[];
+    config: import("../../../utils/style-merge.util").StyleMergeUtils.Config<{
+        readonly variant: {
+            readonly default: ["border-interactive-outlined-secondary-on-idle", "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-disabled:bg-interactive-contained-primary-disabled", "group-selected:group-disabled:border-interactive-contained-primary-disabled", "group-invalid:border-interactive-outlined-error-on-idle", "group-focus-visible:outline-interactive-contained-primary-focus", "before:bg-interactive-contained-primary-on-idle", "group-hover:before:bg-interactive-contained-primary-on-hover", "group-selected:before:block"];
+        };
+    }>;
+};
+export type RadioConfig = NonNullable<typeof radioDefinition.config>;
+export interface RadioVariantProps extends UIOverrides.VariantProps<RadioConfig> {
 }
 export declare const radioIndicatorClass = "group flex items-center gap-2";
 export declare const radioTypography: (props: {
-    variant?: "default" | null | undefined;
+    readonly variant?: "default" | null | undefined;
 }) => TypographyVariantProps | undefined;

package/dist/components/inputs/RadioGroup/radio.cva.js

@@ -1,29 +1,32 @@
+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/RadioGroup/radio.cva.ts
-var radio = cva([
-	"flex items-center justify-center border-2",
-	"relative size-3-5 rounded-full p-1-5",
-	"before:absolute before:hidden before:size-1 before:rounded-full",
-	uiGroupOutlineClass
-], {
-	variants: { variant: { default: [
-		"border-interactive-outlined-secondary-on-idle",
-		"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-disabled:bg-interactive-contained-primary-disabled",
-		"group-selected:group-disabled:border-interactive-contained-primary-disabled",
-		"group-invalid:border-interactive-outlined-error-on-idle",
-		"group-focus-visible:outline-interactive-contained-primary-focus",
-		"before:bg-interactive-contained-primary-on-idle",
-		"group-hover:before:bg-interactive-contained-primary-on-hover",
-		"group-selected:before:block"
-	] } },
-	defaultVariants: { variant: "default" }
+var radioDefinition = UIOverrides.defineConfig({
+	base: [
+		"flex items-center justify-center border-2",
+		"relative size-3-5 rounded-full p-1-5",
+		"before:absolute before:hidden before:size-1 before:rounded-full",
+		uiGroupOutlineClass
+	],
+	config: {
+		variants: { variant: { default: [
+			"border-interactive-outlined-secondary-on-idle",
+			"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-disabled:bg-interactive-contained-primary-disabled",
+			"group-selected:group-disabled:border-interactive-contained-primary-disabled",
+			"group-invalid:border-interactive-outlined-error-on-idle",
+			"group-focus-visible:outline-interactive-contained-primary-focus",
+			"before:bg-interactive-contained-primary-on-idle",
+			"group-hover:before:bg-interactive-contained-primary-on-hover",
+			"group-selected:before:block"
+		] } },
+		defaultVariants: { variant: "default" }
+	}
 });
 var radioIndicatorClass = "group flex items-center gap-2";
 var radioTypography = compoundMapper({ default: {
@@ -32,4 +35,4 @@ var radioTypography = compoundMapper({ default: {
 	variant: "default"
 } });
 //#endregion
-export { radio, radioIndicatorClass, radioTypography };
+export { radioDefinition, radioIndicatorClass, radioTypography };