@povio/ui 2.3.3 → 3.0.0

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 };

package/dist/components/inputs/Selection/shared/SelectDesktop.js

@@ -1,5 +1,5 @@
-import { UIStyle } from "../../../../config/uiStyle.context.js";
-import { popover } from "../../../shared/popover.cva.js";
+import { UIOverrides } from "../../../../config/uiOverrides.context.js";
+import { popoverDefinition } from "../../../shared/popover.cva.js";
 import { FormField } from "../../FormField/FormField.js";
 import { TooltipWrapper } from "../../shared/TooltipWrapper.js";
 import "./useSelectItems.js";
@@ -15,7 +15,7 @@ import { mergeRefs } from "@react-aria/utils";
 //#region src/components/inputs/Selection/shared/SelectDesktop.tsx
 var SelectDesktop = ({ ref, error, ignoreTriggerWidth, showSelectionContent, inputClassName, containerClassName, customTrigger, onBlur, ...props }) => {
 	const { label, tooltipText, helperText, isRequired, rightContent, isHeaderHidden, headerClassName, errorClassName, placeholder, variant, isDisabled, className, hideLabel, hideDropdownIcon, isSearchable, isClearable, isLoading, as, size, collapseAfter, selectedTagsType } = props;
-	const popoverCva = UIStyle.useCva("popover.cva", popover);
+	const popoverCva = UIOverrides.useCva("popover.cva", popoverDefinition);
 	const formFieldProps = {
 		error,
 		label,

package/dist/components/inputs/Selection/shared/SelectInput.js

@@ -1,10 +1,10 @@
 import { ArrowDropDownIcon } from "../../../../assets/icons/ArrowDropDown.js";
-import { UIStyle } from "../../../../config/uiStyle.context.js";
+import { UIOverrides } from "../../../../config/uiOverrides.context.js";
 import { Typography } from "../../../text/Typography/Typography.js";
 import "../../../../config/i18n.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 { SelectInputTags } from "./SelectInputTags.js";
 import { SelectContext } from "./select.context.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -15,8 +15,8 @@ import { useFocusVisible, useFocusWithin, useHover } from "react-aria";
 import { useTranslation } from "react-i18next";
 //#region src/components/inputs/Selection/shared/SelectInput.tsx
 var SelectInput = ({ ref, placeholder, variant, as, size, isDisabled, isInvalid, className, hideDropdownIcon, isSearchable, isClearable, showSelectionContent, inputClassName, fieldProps, headerProps, selectedTagsType, collapseAfter, onCloseComboBox, onBlur, ...props }) => {
-	const inputSizeCva = UIStyle.useCva("input.sizeCva", inputSize);
-	const inputBaseCva = UIStyle.useCva("input.baseCva", inputBase);
+	const inputSizeCva = UIOverrides.useCva("input.sizeCva", inputSizeDefinition);
+	const inputBaseCva = UIOverrides.useCva("input.baseCva", inputBaseDefinition);
 	const { t } = useTranslation("ui");
 	const state = use(ComboBoxStateContext);
 	const { hoverProps, isHovered } = useHover({ isDisabled });

package/dist/components/inputs/Selection/shared/SelectListBoxItem.js

@@ -1,15 +1,15 @@
-import { UIStyle } from "../../../../config/uiStyle.context.js";
+import { UIOverrides } from "../../../../config/uiOverrides.context.js";
 import "../../../../config/i18n.js";
 import { CheckboxCheckmark } from "../../Checkbox/CheckboxCheckmark.js";
 import { SelectContext } from "./select.context.js";
-import { selectListBoxItemCva } from "./selectItem.cva.js";
+import { selectListBoxItemDefinition } from "./selectItem.cva.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useMemo, useRef } from "react";
 import { ListBoxItem } from "react-aria-components";
 import { useTranslation } from "react-i18next";
 //#region src/components/inputs/Selection/shared/SelectListBoxItem.tsx
 var SelectListBoxItem = ({ isSearchable, isNewItem, newItemRender, id, label, content, isDisabled }) => {
-	const selectListItemCva = UIStyle.useCva("select.listBoxItemCva", selectListBoxItemCva);
+	const selectListItemCva = UIOverrides.useCva("select.listBoxItemCva", selectListBoxItemDefinition);
 	const ref = useRef(null);
 	const { t } = useTranslation("ui");
 	const { selectedIds, isMultiple } = SelectContext.useSelect();

package/dist/components/inputs/Selection/shared/SelectListBoxItemSelectAll.js

@@ -1,15 +1,15 @@
-import { UIStyle } from "../../../../config/uiStyle.context.js";
+import { UIOverrides } from "../../../../config/uiOverrides.context.js";
 import "../../../../config/i18n.js";
 import { CheckboxCheckmark } from "../../Checkbox/CheckboxCheckmark.js";
 import { SelectContext } from "./select.context.js";
-import { selectListBoxItemCva } from "./selectItem.cva.js";
+import { selectListBoxItemDefinition } from "./selectItem.cva.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useRef } from "react";
 import { ListBoxItem } from "react-aria-components";
 import { useTranslation } from "react-i18next";
 //#region src/components/inputs/Selection/shared/SelectListBoxItemSelectAll.tsx
 var SelectListBoxItemSelectAll = ({ id, label, isDisabled }) => {
-	const selectListItemCva = UIStyle.useCva("select.listBoxItemCva", selectListBoxItemCva);
+	const selectListItemCva = UIOverrides.useCva("select.listBoxItemCva", selectListBoxItemDefinition);
 	const ref = useRef(null);
 	const { t } = useTranslation("ui");
 	const { selectableListItems, selectedIds } = SelectContext.useSelect();

package/dist/components/inputs/Selection/shared/SelectListBoxLoadingItem.js

@@ -1,8 +1,8 @@
-import { UIStyle } from "../../../../config/uiStyle.context.js";
+import { UIOverrides } from "../../../../config/uiOverrides.context.js";
 import { Loader } from "../../../status/Loader/Loader.js";
 import "../../../../config/i18n.js";
 import { SelectContext } from "./select.context.js";
-import { selectListBoxItemCva } from "./selectItem.cva.js";
+import { selectListBoxItemDefinition } from "./selectItem.cva.js";
 import { useIntersectionObserver } from "../../../../hooks/useIntersectionObserver.js";
 import { jsx } from "react/jsx-runtime";
 import { useCallback } from "react";
@@ -10,7 +10,7 @@ import { ListBoxItem } from "react-aria-components";
 import { useTranslation } from "react-i18next";
 //#region src/components/inputs/Selection/shared/SelectListBoxLoadingItem.tsx
 var SelectListBoxLoadingItem = ({ id, label, onLoadMore }) => {
-	const selectListItemCva = UIStyle.useCva("select.listBoxItemCva", selectListBoxItemCva);
+	const selectListItemCva = UIOverrides.useCva("select.listBoxItemCva", selectListBoxItemDefinition);
 	const { t } = useTranslation("ui");
 	const { isDebouncing, isLoading, hasLoadMore } = SelectContext.useSelect();
 	const { ref } = useIntersectionObserver({

package/dist/components/inputs/Selection/shared/selectItem.cva.d.ts

@@ -1,6 +1,16 @@
-import { VariantProps } from 'class-variance-authority';
-export declare const selectListBoxItemCva: (props?: ({
-    isSingle?: boolean | null | undefined;
-    isNewItem?: boolean | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export type SelectListBoxItemCva = VariantProps<typeof selectListBoxItemCva>;
+import { UIOverrides } from '../../../../config/uiOverrides.context';
+export declare const selectListBoxItemDefinition: {
+    base: string[];
+    config: import("../../../../utils/style-merge.util").StyleMergeUtils.Config<{
+        readonly isSingle: {
+            readonly true: "selected:bg-interactive-contained-primary-idle selected:text-interactive-contained-primary-on-idle";
+        };
+        readonly isNewItem: {
+            readonly true: "text-interactive-text-primary-idle";
+            readonly false: "text-interactive-text-secondary-idle";
+        };
+    }>;
+};
+export type SelectListBoxItemConfig = NonNullable<typeof selectListBoxItemDefinition.config>;
+export interface SelectListBoxItemCva extends UIOverrides.VariantProps<SelectListBoxItemConfig> {
+}

package/dist/components/inputs/Selection/shared/selectItem.cva.js

@@ -1,21 +1,24 @@
-import { cva } from "class-variance-authority";
+import { UIOverrides } from "../../../../config/uiOverrides.context.js";
 //#region src/components/inputs/Selection/shared/selectItem.cva.ts
-var selectListBoxItemCva = cva([
-	"group flex cursor-pointer items-center gap-2 px-list-side-item-left py-list-height-item",
-	"border-b border-b-elevation-outline-default-1 outline-none",
-	"font-labels-default text-label-2",
-	"hover:text-interactive-text-secondary-hover",
-	"focus-visible:bg-interactive-contained-primary-focus focus-visible:text-interactive-text-secondary-idle-inverted",
-	"disabled:cursor-default disabled:text-interactive-text-secondary-disabled"
-], {
-	variants: {
-		isSingle: { true: "selected:bg-interactive-contained-primary-idle selected:text-interactive-contained-primary-on-idle" },
-		isNewItem: {
-			true: "text-interactive-text-primary-idle",
-			false: "text-interactive-text-secondary-idle"
-		}
-	},
-	defaultVariants: { isNewItem: false }
+var selectListBoxItemDefinition = UIOverrides.defineConfig({
+	base: [
+		"group flex cursor-pointer items-center gap-2 px-list-side-item-left py-list-height-item",
+		"border-b border-b-elevation-outline-default-1 outline-none",
+		"font-labels-default text-label-2",
+		"hover:text-interactive-text-secondary-hover",
+		"focus-visible:bg-interactive-contained-primary-focus focus-visible:text-interactive-text-secondary-idle-inverted",
+		"disabled:cursor-default disabled:text-interactive-text-secondary-disabled"
+	],
+	config: {
+		variants: {
+			isSingle: { true: "selected:bg-interactive-contained-primary-idle selected:text-interactive-contained-primary-on-idle" },
+			isNewItem: {
+				true: "text-interactive-text-primary-idle",
+				false: "text-interactive-text-secondary-idle"
+			}
+		},
+		defaultVariants: { isNewItem: false }
+	}
 });
 //#endregion
-export { selectListBoxItemCva };
+export { selectListBoxItemDefinition };

package/dist/components/inputs/TextEditor/TextEditor.js

@@ -1,8 +1,8 @@
-import { UIStyle } from "../../../config/uiStyle.context.js";
+import { UIOverrides } from "../../../config/uiOverrides.context.js";
 import { isEqual } from "../../../utils/isEqual.js";
 import { uiOutlineClass } from "../../outline.clsx.js";
 import { FormFieldLabel } from "../FormField/FormFieldLabel.js";
-import { inputSide } from "../shared/input.cva.js";
+import { inputSideDefinition } from "../shared/input.cva.js";
 import { FormField } from "../FormField/FormField.js";
 import { TextEditorToolbar } from "./Toolbar/TextEditorToolbar.js";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -43,7 +43,7 @@ var TextEditorBase = ({ ref, as = "default", placeholder, label, hideLabel, tool
 	const [isFocused, setIsFocused] = useState(false);
 	const { focusWithinProps } = useFocusWithin({ onFocusWithinChange: setIsFocused });
 	const { isFocusVisible } = useFocusVisible();
-	const inputSideCva = UIStyle.useCva("input.sideCva", inputSide);
+	const inputSideCva = UIOverrides.useCva("input.sideCva", inputSideDefinition);
 	const formFieldProps = {
 		error,
 		label,

package/dist/components/inputs/TextEditor/Toolbar/ColorPickerDropdown.js

@@ -1,8 +1,8 @@
 import { ArrowDropDownIcon } from "../../../../assets/icons/ArrowDropDown.js";
-import { UIStyle } from "../../../../config/uiStyle.context.js";
+import { UIOverrides } from "../../../../config/uiOverrides.context.js";
 import { Typography } from "../../../text/Typography/Typography.js";
 import { useInputCva } from "../../shared/input.cva.js";
-import { popover } from "../../../shared/popover.cva.js";
+import { popoverDefinition } from "../../../shared/popover.cva.js";
 import { ColorPicker } from "./ColorPicker.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
@@ -11,7 +11,7 @@ import { Button, Dialog, DialogTrigger, Popover } from "react-aria-components";
 //#region src/components/inputs/TextEditor/Toolbar/ColorPickerDropdown.tsx
 var ColorPickerDropdown = ({ colors, value, onChange, isDisabled, children }) => {
 	const inputCva = useInputCva();
-	const popoverCva = UIStyle.useCva("popover.cva", popover);
+	const popoverCva = UIOverrides.useCva("popover.cva", popoverDefinition);
 	const [isOpen, setIsOpen] = useState(false);
 	const handleChange = (color) => {
 		onChange(color);

package/dist/components/inputs/Toggle/Toggle.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 { FormFieldError } from "../FormField/FormFieldError.js";
 import { CheckContent } from "../shared/CheckContent.js";
-import { toggle, toggleTypography } from "./toggle.cva.js";
+import { toggleDefinition, toggleTypography } from "./toggle.cva.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { Switch } from "react-aria-components";
@@ -11,8 +11,8 @@ import { Controller } from "react-hook-form";
 //#region src/components/inputs/Toggle/Toggle.tsx
 var ToggleBase = (props) => {
 	const ui = UIConfig.useConfig();
-	const toggleCva = UIStyle.useCva("toggle.cva", toggle);
-	const toggleTypographyMap = UIStyle.useMapper("toggle.typography", toggleTypography);
+	const toggleCva = UIOverrides.useCva("toggle.cva", toggleDefinition);
+	const toggleTypographyMap = UIOverrides.useMapper("toggle.typography", toggleTypography);
 	const { className, children, isDisabled, error, variant = ui.toggle.variant, ...rest } = props;
 	const formFieldErrorProps = {
 		error,

package/dist/components/inputs/Toggle/toggle.cva.d.ts

@@ -1,10 +1,16 @@
-import { VariantProps } from 'class-variance-authority';
 import { TypographyVariantProps } from '../../text/Typography/typography.cva';
-export declare const toggle: (props?: ({
-    variant?: "default" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export interface ToggleVariantProps extends VariantProps<typeof toggle> {
+import { UIOverrides } from '../../../config/uiOverrides.context';
+export declare const toggleDefinition: {
+    base: string[];
+    config: import("../../../utils/style-merge.util").StyleMergeUtils.Config<{
+        readonly variant: {
+            readonly default: ["bg-interactive-contained-secondary-idle", "group-disabled:bg-interactive-contained-secondary-disabled", "group-hover:bg-interactive-contained-secondary-hover", "group-pressed:bg-interactive-contained-secondary-pressed", "group-selected:bg-interactive-contained-primary-idle", "group-selected:group-hover:bg-interactive-contained-primary-hover", "group-selected:group-pressed:bg-interactive-contained-primary-pressed", "group-focus-visible:outline-interactive-text-secondary-focus", "before:bg-interactive-contained-secondary-on-idle", "group-hover:before:bg-interactive-contained-secondary-on-hover", "group-disabled:before:bg-interactive-contained-secondary-on-disabled", "group-selected:before:bg-interactive-contained-primary-on-idle", "group-selected:group-hover:before:bg-interactive-contained-primary-on-hover", "group-selected:group-pressed:before:bg-interactive-contained-primary-on-pressed", "group-selected:group-disabled:bg-interactive-contained-primary-disabled"];
+        };
+    }>;
+};
+export type ToggleConfig = NonNullable<typeof toggleDefinition.config>;
+export interface ToggleVariantProps extends UIOverrides.VariantProps<ToggleConfig> {
 }
 export declare const toggleTypography: (props: {
-    variant?: "default" | null | undefined;
+    readonly variant?: "default" | null | undefined;
 }) => TypographyVariantProps | undefined;

package/dist/components/inputs/Toggle/toggle.cva.js

@@ -1,26 +1,29 @@
+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/Toggle/toggle.cva.ts
-var toggle = cva(["h-6 w-10 rounded-full before:m-0-5 before:block before:aspect-square before:h-5 before:rounded-full before:transition-transform before:content-[''] group-selected:before:translate-x-4", uiGroupOutlineClass], {
-	variants: { variant: { default: [
-		"bg-interactive-contained-secondary-idle",
-		"group-disabled:bg-interactive-contained-secondary-disabled",
-		"group-hover:bg-interactive-contained-secondary-hover",
-		"group-pressed:bg-interactive-contained-secondary-pressed",
-		"group-selected:bg-interactive-contained-primary-idle",
-		"group-selected:group-hover:bg-interactive-contained-primary-hover",
-		"group-selected:group-pressed:bg-interactive-contained-primary-pressed",
-		"group-focus-visible:outline-interactive-text-secondary-focus",
-		"before:bg-interactive-contained-secondary-on-idle",
-		"group-hover:before:bg-interactive-contained-secondary-on-hover",
-		"group-disabled:before:bg-interactive-contained-secondary-on-disabled",
-		"group-selected:before:bg-interactive-contained-primary-on-idle",
-		"group-selected:group-hover:before:bg-interactive-contained-primary-on-hover",
-		"group-selected:group-pressed:before:bg-interactive-contained-primary-on-pressed",
-		"group-selected:group-disabled:bg-interactive-contained-primary-disabled"
-	] } },
-	defaultVariants: { variant: "default" }
+var toggleDefinition = UIOverrides.defineConfig({
+	base: ["h-6 w-10 rounded-full before:m-0-5 before:block before:aspect-square before:h-5 before:rounded-full before:transition-transform before:content-[''] group-selected:before:translate-x-4", uiGroupOutlineClass],
+	config: {
+		variants: { variant: { default: [
+			"bg-interactive-contained-secondary-idle",
+			"group-disabled:bg-interactive-contained-secondary-disabled",
+			"group-hover:bg-interactive-contained-secondary-hover",
+			"group-pressed:bg-interactive-contained-secondary-pressed",
+			"group-selected:bg-interactive-contained-primary-idle",
+			"group-selected:group-hover:bg-interactive-contained-primary-hover",
+			"group-selected:group-pressed:bg-interactive-contained-primary-pressed",
+			"group-focus-visible:outline-interactive-text-secondary-focus",
+			"before:bg-interactive-contained-secondary-on-idle",
+			"group-hover:before:bg-interactive-contained-secondary-on-hover",
+			"group-disabled:before:bg-interactive-contained-secondary-on-disabled",
+			"group-selected:before:bg-interactive-contained-primary-on-idle",
+			"group-selected:group-hover:before:bg-interactive-contained-primary-on-hover",
+			"group-selected:group-pressed:before:bg-interactive-contained-primary-on-pressed",
+			"group-selected:group-disabled:bg-interactive-contained-primary-disabled"
+		] } },
+		defaultVariants: { variant: "default" }
+	}
 });
 var toggleTypography = compoundMapper({ default: {
 	size: "label-1",
@@ -28,4 +31,4 @@ var toggleTypography = compoundMapper({ default: {
 	variant: "default"
 } });
 //#endregion
-export { toggle, toggleTypography };
+export { toggleDefinition, toggleTypography };