@povio/ui 2.3.3 → 3.0.0-rc.1

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

@@ -1,45 +1,127 @@
 import { FormFieldError } from "./FormFieldError.js";
 import { FormFieldHeader } from "./FormFieldHeader.js";
 import { FormFieldHelper } from "./FormFieldHelper.js";
+import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/inputs/FormField/FormField.tsx
-var FormField = ({ ref, as, label, tooltipText, helperText, isRequired, rightContent, isDisabled, error, hideLabel, headerClassName, errorClassName, children, className, labelProps, isHeaderHidden, tabIndex, onMouseEnter, onFocusCapture }) => {
-	const headerProps = {
-		label,
-		tooltipText,
-		helperText,
-		isRequired,
-		rightContent,
-		isHeaderHidden: hideLabel || isHeaderHidden,
-		isDisabled,
-		className: headerClassName,
-		labelProps
-	};
-	const helperProps = {
-		helperText,
-		isDisabled,
-		isHidden: !["filter", "floating"].includes(as ?? ""),
-		hasError: !!error
-	};
-	const errorProps = {
-		error,
-		isDisabled,
-		isHidden: ["filter", "inline"].includes(as ?? ""),
-		className: errorClassName
-	};
-	return /* @__PURE__ */ jsxs("div", {
-		ref,
-		className,
-		tabIndex,
-		onMouseEnter,
-		onFocusCapture,
-		children: [
-			!["filter", "floating"].includes(as ?? "") && /* @__PURE__ */ jsx(FormFieldHeader, { ...headerProps }),
-			children,
-			/* @__PURE__ */ jsx(FormFieldHelper, { ...helperProps }),
-			/* @__PURE__ */ jsx(FormFieldError, { ...errorProps })
-		]
-	});
+var FormField = (t0) => {
+	const $ = c(39);
+	const { ref, as, label, tooltipText, helperText, isRequired, rightContent, isDisabled, error, hideLabel, headerClassName, errorClassName, children, className, labelProps, isHeaderHidden, tabIndex, onMouseEnter, onFocusCapture } = t0;
+	const t1 = hideLabel || isHeaderHidden;
+	let t2;
+	if ($[0] !== headerClassName || $[1] !== helperText || $[2] !== isDisabled || $[3] !== isRequired || $[4] !== label || $[5] !== labelProps || $[6] !== rightContent || $[7] !== t1 || $[8] !== tooltipText) {
+		t2 = {
+			label,
+			tooltipText,
+			helperText,
+			isRequired,
+			rightContent,
+			isHeaderHidden: t1,
+			isDisabled,
+			className: headerClassName,
+			labelProps
+		};
+		$[0] = headerClassName;
+		$[1] = helperText;
+		$[2] = isDisabled;
+		$[3] = isRequired;
+		$[4] = label;
+		$[5] = labelProps;
+		$[6] = rightContent;
+		$[7] = t1;
+		$[8] = tooltipText;
+		$[9] = t2;
+	} else t2 = $[9];
+	const headerProps = t2;
+	let t3;
+	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = ["filter", "floating"];
+		$[10] = t3;
+	} else t3 = $[10];
+	const t4 = !t3.includes(as ?? "");
+	const t5 = !!error;
+	let t6;
+	if ($[11] !== helperText || $[12] !== isDisabled || $[13] !== t4 || $[14] !== t5) {
+		t6 = {
+			helperText,
+			isDisabled,
+			isHidden: t4,
+			hasError: t5
+		};
+		$[11] = helperText;
+		$[12] = isDisabled;
+		$[13] = t4;
+		$[14] = t5;
+		$[15] = t6;
+	} else t6 = $[15];
+	const helperProps = t6;
+	let t7;
+	if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = ["filter", "inline"];
+		$[16] = t7;
+	} else t7 = $[16];
+	const t8 = t7.includes(as ?? "");
+	let t9;
+	if ($[17] !== error || $[18] !== errorClassName || $[19] !== isDisabled || $[20] !== t8) {
+		t9 = {
+			error,
+			isDisabled,
+			isHidden: t8,
+			className: errorClassName
+		};
+		$[17] = error;
+		$[18] = errorClassName;
+		$[19] = isDisabled;
+		$[20] = t8;
+		$[21] = t9;
+	} else t9 = $[21];
+	const errorProps = t9;
+	let t10;
+	if ($[22] !== as || $[23] !== headerProps) {
+		t10 = !["filter", "floating"].includes(as ?? "") && /* @__PURE__ */ jsx(FormFieldHeader, { ...headerProps });
+		$[22] = as;
+		$[23] = headerProps;
+		$[24] = t10;
+	} else t10 = $[24];
+	let t11;
+	if ($[25] !== helperProps) {
+		t11 = /* @__PURE__ */ jsx(FormFieldHelper, { ...helperProps });
+		$[25] = helperProps;
+		$[26] = t11;
+	} else t11 = $[26];
+	let t12;
+	if ($[27] !== errorProps) {
+		t12 = /* @__PURE__ */ jsx(FormFieldError, { ...errorProps });
+		$[27] = errorProps;
+		$[28] = t12;
+	} else t12 = $[28];
+	let t13;
+	if ($[29] !== children || $[30] !== className || $[31] !== onFocusCapture || $[32] !== onMouseEnter || $[33] !== ref || $[34] !== t10 || $[35] !== t11 || $[36] !== t12 || $[37] !== tabIndex) {
+		t13 = /* @__PURE__ */ jsxs("div", {
+			ref,
+			className,
+			tabIndex,
+			onMouseEnter,
+			onFocusCapture,
+			children: [
+				t10,
+				children,
+				t11,
+				t12
+			]
+		});
+		$[29] = children;
+		$[30] = className;
+		$[31] = onFocusCapture;
+		$[32] = onMouseEnter;
+		$[33] = ref;
+		$[34] = t10;
+		$[35] = t11;
+		$[36] = t12;
+		$[37] = tabIndex;
+		$[38] = t13;
+	} else t13 = $[38];
+	return t13;
 };
 //#endregion
 export { FormField };

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

@@ -1,13 +1,33 @@
-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 { c } from "react/compiler-runtime";
 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),
-		children: error
-	});
+var FormFieldError = (t0) => {
+	const $ = c(7);
+	const { error, isDisabled, isHidden, className } = t0;
+	const formFieldErrorCva = UIOverrides.useCva("formField.errorLabelCva", formFieldErrorDefinition);
+	const visible = !!error && !isDisabled && !isHidden;
+	let t1;
+	if ($[0] !== className || $[1] !== formFieldErrorCva || $[2] !== visible) {
+		t1 = clsx(formFieldErrorCva({ visible }), className);
+		$[0] = className;
+		$[1] = formFieldErrorCva;
+		$[2] = visible;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== error || $[5] !== t1) {
+		t2 = /* @__PURE__ */ jsx("p", {
+			className: t1,
+			children: error
+		});
+		$[4] = error;
+		$[5] = t1;
+		$[6] = t2;
+	} else t2 = $[6];
+	return t2;
 };
 //#endregion
 export { FormFieldError };

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

@@ -1,5 +1,5 @@
 import { DOMAttributes } from '@react-types/shared';
-import { ReactNode } from 'react';
+import { LabelHTMLAttributes, ReactNode } from 'react';
 export interface FormFieldHeaderProps {
     label: string;
     tooltipText?: string;
@@ -9,6 +9,6 @@ export interface FormFieldHeaderProps {
     isHeaderHidden?: boolean;
     isDisabled?: boolean;
     className?: string;
-    labelProps?: DOMAttributes<HTMLLabelElement>;
+    labelProps?: DOMAttributes<HTMLLabelElement> & LabelHTMLAttributes<HTMLLabelElement>;
 }
 export declare const FormFieldHeader: ({ label, tooltipText, helperText, isRequired, rightContent, isHeaderHidden, isDisabled, className, labelProps, }: FormFieldHeaderProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,38 +1,97 @@
 import { InfoIcon } from "../../../assets/icons/Info.js";
+import { UIOverrides } from "../../../config/uiOverrides.context.js";
 import { Typography } from "../../text/Typography/Typography.js";
 import { Tooltip as Tooltip$1 } from "../../overlays/Tooltip/Tooltip.js";
 import { FormFieldLabel } from "./FormFieldLabel.js";
+import { formFieldHeader } from "./formFieldHeader.cva.js";
+import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { Focusable } from "react-aria-components";
 //#region src/components/inputs/FormField/FormFieldHeader.tsx
-var FormFieldHeader = ({ label, tooltipText, helperText, isRequired, rightContent, isHeaderHidden, isDisabled, className, labelProps }) => {
-	return /* @__PURE__ */ jsxs("div", {
-		className: clsx(isHeaderHidden ? "sr-only" : "mb-1", className),
-		children: [/* @__PURE__ */ jsxs("div", {
+var FormFieldHeader = (t0) => {
+	const $ = c(24);
+	const { label, tooltipText, helperText, isRequired, rightContent, isHeaderHidden, isDisabled, className, labelProps } = t0;
+	const formFieldHeaderCva = UIOverrides.useCva("formField.headerCva", formFieldHeader);
+	const t1 = !isHeaderHidden;
+	let t2;
+	if ($[0] !== className || $[1] !== formFieldHeaderCva || $[2] !== t1) {
+		t2 = clsx(formFieldHeaderCva({ visible: t1 }), className);
+		$[0] = className;
+		$[1] = formFieldHeaderCva;
+		$[2] = t1;
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	if ($[4] !== isDisabled || $[5] !== isRequired || $[6] !== label || $[7] !== labelProps) {
+		t3 = /* @__PURE__ */ jsx(FormFieldLabel, {
+			label,
+			isRequired,
+			isDisabled,
+			labelProps
+		});
+		$[4] = isDisabled;
+		$[5] = isRequired;
+		$[6] = label;
+		$[7] = labelProps;
+		$[8] = t3;
+	} else t3 = $[8];
+	let t4;
+	if ($[9] !== isDisabled || $[10] !== tooltipText) {
+		t4 = tooltipText && /* @__PURE__ */ jsx(Tooltip$1, {
+			text: tooltipText,
+			children: /* @__PURE__ */ jsx(Focusable, { children: /* @__PURE__ */ jsx(InfoIcon, {
+				className: clsx("size-6", isDisabled ? "text-interactive-text-secondary-disabled" : "text-interactive-text-secondary-idle hover:text-interactive-text-secondary-hover"),
+				tabIndex: 0
+			}) })
+		});
+		$[9] = isDisabled;
+		$[10] = tooltipText;
+		$[11] = t4;
+	} else t4 = $[11];
+	let t5;
+	if ($[12] !== t3 || $[13] !== t4) {
+		t5 = /* @__PURE__ */ jsxs("div", {
+			className: "flex items-start gap-1",
+			children: [t3, t4]
+		});
+		$[12] = t3;
+		$[13] = t4;
+		$[14] = t5;
+	} else t5 = $[14];
+	let t6;
+	if ($[15] !== rightContent || $[16] !== t5) {
+		t6 = /* @__PURE__ */ jsxs("div", {
 			className: "flex items-start justify-between",
-			children: [/* @__PURE__ */ jsxs("div", {
-				className: "flex items-start gap-1",
-				children: [/* @__PURE__ */ jsx(FormFieldLabel, {
-					label,
-					isRequired,
-					isDisabled,
-					labelProps
-				}), tooltipText && /* @__PURE__ */ jsx(Tooltip$1, {
-					text: tooltipText,
-					children: /* @__PURE__ */ jsx(Focusable, { children: /* @__PURE__ */ jsx(InfoIcon, {
-						className: clsx("size-6", isDisabled ? "text-interactive-text-secondary-disabled" : "text-interactive-text-secondary-idle hover:text-interactive-text-secondary-hover"),
-						tabIndex: 0
-					}) })
-				})]
-			}), rightContent]
-		}), helperText && /* @__PURE__ */ jsx(Typography, {
+			children: [t5, rightContent]
+		});
+		$[15] = rightContent;
+		$[16] = t5;
+		$[17] = t6;
+	} else t6 = $[17];
+	let t7;
+	if ($[18] !== helperText) {
+		t7 = helperText && /* @__PURE__ */ jsx(Typography, {
 			slot: "description",
 			size: "label-2",
 			className: "text-text-default-2",
 			children: helperText
-		})]
-	});
+		});
+		$[18] = helperText;
+		$[19] = t7;
+	} else t7 = $[19];
+	let t8;
+	if ($[20] !== t2 || $[21] !== t6 || $[22] !== t7) {
+		t8 = /* @__PURE__ */ jsxs("div", {
+			className: t2,
+			children: [t6, t7]
+		});
+		$[20] = t2;
+		$[21] = t6;
+		$[22] = t7;
+		$[23] = t8;
+	} else t8 = $[23];
+	return t8;
 };
 //#endregion
 export { FormFieldHeader };

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

@@ -1,17 +1,41 @@
 import { CloseIcon } from "../../../assets/icons/Close.js";
 import "../../../config/i18n.js";
+import { c } from "react/compiler-runtime";
 import { jsx } from "react/jsx-runtime";
 import { Button } from "react-aria-components";
 import { useTranslation } from "react-i18next";
 //#region src/components/inputs/FormField/FormFieldHeaderClose.tsx
-var FormFieldHeaderClose = ({ onClose }) => {
+var FormFieldHeaderClose = (t0) => {
+	const $ = c(6);
+	const { onClose } = t0;
 	const { t } = useTranslation("ui");
-	return /* @__PURE__ */ jsx(Button, {
-		onPress: onClose,
-		"aria-label": t(($) => $.ui.closeAlt),
-		className: "shrink-0 focus-visible:outline-interactive-text-secondary-focus",
-		children: /* @__PURE__ */ jsx(CloseIcon, { className: "size-6 text-interactive-text-secondary-idle" })
-	});
+	let t1;
+	if ($[0] !== t) {
+		t1 = t(_temp);
+		$[0] = t;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsx(CloseIcon, { className: "size-6 text-interactive-text-secondary-idle" });
+		$[2] = t2;
+	} else t2 = $[2];
+	let t3;
+	if ($[3] !== onClose || $[4] !== t1) {
+		t3 = /* @__PURE__ */ jsx(Button, {
+			onPress: onClose,
+			"aria-label": t1,
+			className: "shrink-0 focus-visible:outline-interactive-text-secondary-focus",
+			children: t2
+		});
+		$[3] = onClose;
+		$[4] = t1;
+		$[5] = t3;
+	} else t3 = $[5];
+	return t3;
 };
+function _temp($) {
+	return $.ui.closeAlt;
+}
 //#endregion
 export { FormFieldHeaderClose };

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

@@ -1,14 +1,34 @@
-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 { c } from "react/compiler-runtime";
 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),
-		slot: "description",
-		children: helperText
-	});
+var FormFieldHelper = (t0) => {
+	const $ = c(7);
+	const { helperText, isDisabled, isHidden, hasError, className } = t0;
+	const formFieldHelperCva = UIOverrides.useCva("formField.helperLabelCva", formFieldHelperDefinition);
+	const visible = !!helperText && !isDisabled && !isHidden && !hasError;
+	let t1;
+	if ($[0] !== className || $[1] !== formFieldHelperCva || $[2] !== visible) {
+		t1 = clsx(formFieldHelperCva({ visible }), className);
+		$[0] = className;
+		$[1] = formFieldHelperCva;
+		$[2] = visible;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== helperText || $[5] !== t1) {
+		t2 = /* @__PURE__ */ jsx("p", {
+			className: t1,
+			slot: "description",
+			children: helperText
+		});
+		$[4] = helperText;
+		$[5] = t1;
+		$[6] = t2;
+	} else t2 = $[6];
+	return t2;
 };
 //#endregion
 export { FormFieldHelper };

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

@@ -1,5 +1,5 @@
 import { DOMAttributes } from '@react-types/shared';
-import { RefCallback } from 'react';
+import { LabelHTMLAttributes, RefCallback } from 'react';
 import { InputSizeProps } from '../shared/input.cva';
 import { LabelBaseProps } from '../shared/label.cva';
 export interface FormFieldLabelProps extends LabelBaseProps, InputSizeProps {
@@ -7,7 +7,7 @@ export interface FormFieldLabelProps extends LabelBaseProps, InputSizeProps {
     isRequired?: boolean;
     isDisabled?: boolean;
     ref?: RefCallback<HTMLOrSVGElement>;
-    labelProps?: DOMAttributes<HTMLLabelElement>;
+    labelProps?: DOMAttributes<HTMLLabelElement> & LabelHTMLAttributes<HTMLLabelElement>;
     className?: string;
 }
 export declare const FormFieldLabel: ({ ref, as, label, isRequired, isDisabled, labelProps, className, }: FormFieldLabelProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,28 +1,59 @@
-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 { c } from "react/compiler-runtime";
 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);
-	return /* @__PURE__ */ jsxs(Label, {
-		...labelProps,
-		ref,
-		className: clsx(typographyCva({
+var FormFieldLabel = (t0) => {
+	const $ = c(16);
+	const { ref, as, label, isRequired, isDisabled, labelProps, className } = t0;
+	const typographyCva = UIOverrides.useCva("typography.cva", typographyDefinition);
+	const labelTypographyMap = UIOverrides.useMapper("label.typography", labelTypography);
+	const labelBaseCva = UIOverrides.useCva("label.cva", labelDefinition);
+	let t1;
+	if ($[0] !== as || $[1] !== className || $[2] !== labelBaseCva || $[3] !== labelProps?.className || $[4] !== labelTypographyMap || $[5] !== typographyCva) {
+		t1 = clsx(typographyCva({
 			size: "label-2",
 			sizeMobile: "label-2",
 			variant: "prominent-1",
 			...labelTypographyMap({ as })
-		}), labelBaseCva({ as }), className, labelProps?.className),
-		children: [label, isRequired && /* @__PURE__ */ jsx("span", {
+		}), labelBaseCva({ as }), className, labelProps?.className);
+		$[0] = as;
+		$[1] = className;
+		$[2] = labelBaseCva;
+		$[3] = labelProps?.className;
+		$[4] = labelTypographyMap;
+		$[5] = typographyCva;
+		$[6] = t1;
+	} else t1 = $[6];
+	let t2;
+	if ($[7] !== isDisabled || $[8] !== isRequired) {
+		t2 = isRequired && /* @__PURE__ */ jsx("span", {
 			className: clsx(!isDisabled && "text-text-error-1"),
 			children: "*"
-		})]
-	});
+		});
+		$[7] = isDisabled;
+		$[8] = isRequired;
+		$[9] = t2;
+	} else t2 = $[9];
+	let t3;
+	if ($[10] !== label || $[11] !== labelProps || $[12] !== ref || $[13] !== t1 || $[14] !== t2) {
+		t3 = /* @__PURE__ */ jsxs(Label, {
+			...labelProps,
+			ref,
+			className: t1,
+			children: [label, t2]
+		});
+		$[10] = label;
+		$[11] = labelProps;
+		$[12] = ref;
+		$[13] = t1;
+		$[14] = t2;
+		$[15] = t3;
+	} else t3 = $[15];
+	return t3;
 };
 //#endregion
 export { FormFieldLabel };

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/formFieldHeader.cva.d.ts

@@ -0,0 +1,22 @@
+import { UIOverrides } from '../../../config/uiOverrides.context';
+export declare const formFieldHeaderDefinition: {
+    base: string[];
+    config: import("../../../utils/style-merge.util").StyleMergeUtils.Config<{
+        readonly visible: {
+            readonly true: "mb-1";
+            readonly false: "sr-only";
+        };
+    }>;
+};
+export declare const formFieldHeader: {
+    base: string[];
+    config: import("../../../utils/style-merge.util").StyleMergeUtils.Config<{
+        readonly visible: {
+            readonly true: "mb-1";
+            readonly false: "sr-only";
+        };
+    }>;
+};
+export type FormFieldHeaderConfig = NonNullable<typeof formFieldHeaderDefinition.config>;
+export interface FormFieldHeaderVariantProps extends UIOverrides.VariantProps<FormFieldHeaderConfig> {
+}

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

@@ -0,0 +1,13 @@
+import { UIOverrides } from "../../../config/uiOverrides.context.js";
+var formFieldHeader = UIOverrides.defineConfig({
+	base: [""],
+	config: {
+		variants: { visible: {
+			true: "mb-1",
+			false: "sr-only"
+		} },
+		defaultVariants: { visible: true }
+	}
+});
+//#endregion
+export { formFieldHeader };

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