@povio/ui 2.3.3 → 3.0.0

package/dist/components/navigation/Stepper/stepper.cva.d.ts

@@ -1,37 +1,93 @@
-import { VariantProps } from 'class-variance-authority';
-export declare const stepperCva: (props?: ({
-    orientation?: "horizontal" | "vertical" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export interface StepperVariantProps extends VariantProps<typeof stepperCva> {
+import { UIOverrides } from '../../../config/uiOverrides.context';
+export declare const stepperDefinition: {
+    base: string[];
+    config: import("../../../utils/style-merge.util").StyleMergeUtils.Config<{
+        readonly orientation: {
+            readonly horizontal: "flex flex-row items-center gap-stepper-gap-step-to-line-horizontal";
+            readonly vertical: "inline-flex flex-col gap-stepper-gap-step-to-line-vertical";
+        };
+    }>;
+};
+export type StepperConfig = NonNullable<typeof stepperDefinition.config>;
+export interface StepperVariantProps extends UIOverrides.VariantProps<StepperConfig> {
 }
-export declare const stepperItemCva: (props?: ({
-    contentOrientation?: "horizontal" | "vertical" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export interface StepperItemVariantProps extends VariantProps<typeof stepperItemCva> {
+export declare const stepperItemDefinition: {
+    base: string[];
+    config: import("../../../utils/style-merge.util").StyleMergeUtils.Config<{
+        readonly contentOrientation: {
+            readonly horizontal: "flex-row items-center gap-stepper-gap-icon-to-text-horizontal text-left";
+            readonly vertical: "flex-col items-center gap-stepper-gap-icon-to-text-vertical text-center";
+        };
+    }>;
+};
+export type StepperItemConfig = NonNullable<typeof stepperItemDefinition.config>;
+export interface StepperItemVariantProps extends UIOverrides.VariantProps<StepperItemConfig> {
 }
-export declare const stepperIconCva: (props?: ({
-    status?: "completed" | "active" | "todo" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export interface StepperIconVariantProps extends VariantProps<typeof stepperIconCva> {
+export declare const stepperIconDefinition: {
+    base: string[];
+    config: import("../../../utils/style-merge.util").StyleMergeUtils.Config<{
+        readonly status: {
+            readonly completed: ["border border-interactive-outlined-primary-outline-idle border-solid bg-interactive-contained-primary-idle", "group-hover:border-interactive-outlined-primary-outline-hover group-hover:bg-interactive-contained-primary-hover", "group-pressed:border-interactive-outlined-primary-outline-pressed group-pressed:bg-interactive-contained-primary-pressed"];
+            readonly active: "border border-interactive-outlined-primary-on-idle border-solid bg-interactive-outlined-primary-idle";
+            readonly todo: "border border-interactive-outlined-primary-outline-disabled border-solid bg-interactive-outlined-primary-disabled";
+        };
+    }>;
+};
+export type StepperIconConfig = NonNullable<typeof stepperIconDefinition.config>;
+export interface StepperIconVariantProps extends UIOverrides.VariantProps<StepperIconConfig> {
 }
-export declare const stepperNumberCva: (props?: ({
-    status?: "completed" | "active" | "todo" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export interface StepperNumberVariantProps extends VariantProps<typeof stepperNumberCva> {
+export declare const stepperNumberDefinition: {
+    base: string[];
+    config: import("../../../utils/style-merge.util").StyleMergeUtils.Config<{
+        readonly status: {
+            readonly completed: "";
+            readonly active: "text-interactive-outlined-primary-on-idle";
+            readonly todo: "text-interactive-outlined-primary-on-disabled";
+        };
+    }>;
+};
+export type StepperNumberConfig = NonNullable<typeof stepperNumberDefinition.config>;
+export interface StepperNumberVariantProps extends UIOverrides.VariantProps<StepperNumberConfig> {
 }
-export declare const stepperTitleCva: (props?: ({
-    status?: "completed" | "active" | "todo" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export interface StepperTitleVariantProps extends VariantProps<typeof stepperTitleCva> {
+export declare const stepperTitleDefinition: {
+    base: string[];
+    config: import("../../../utils/style-merge.util").StyleMergeUtils.Config<{
+        readonly status: {
+            readonly completed: ["text-interactive-text-secondary-idle", "group-hover:text-interactive-text-secondary-hover", "group-pressed:text-interactive-text-secondary-pressed"];
+            readonly active: "text-interactive-text-primary-idle";
+            readonly todo: "text-interactive-text-secondary-disabled";
+        };
+    }>;
+};
+export type StepperTitleConfig = NonNullable<typeof stepperTitleDefinition.config>;
+export interface StepperTitleVariantProps extends UIOverrides.VariantProps<StepperTitleConfig> {
 }
-export declare const stepperSubtextCva: (props?: ({
-    status?: "completed" | "active" | "todo" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export interface StepperSubtextVariantProps extends VariantProps<typeof stepperSubtextCva> {
+export declare const stepperSubtextDefinition: {
+    base: string[];
+    config: import("../../../utils/style-merge.util").StyleMergeUtils.Config<{
+        readonly status: {
+            readonly completed: ["text-interactive-text-secondary-idle", "group-hover:text-interactive-text-secondary-hover", "group-pressed:text-interactive-text-secondary-pressed"];
+            readonly active: "text-interactive-text-secondary-idle";
+            readonly todo: "text-interactive-text-secondary-disabled";
+        };
+    }>;
+};
+export type StepperSubtextConfig = NonNullable<typeof stepperSubtextDefinition.config>;
+export interface StepperSubtextVariantProps extends UIOverrides.VariantProps<StepperSubtextConfig> {
 }
-export declare const stepperSeparatorCva: (props?: ({
-    orientation?: "horizontal" | "vertical" | null | undefined;
-    contentOrientation?: "horizontal" | "vertical" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export interface StepperSeparatorVariantProps extends VariantProps<typeof stepperSeparatorCva> {
+export declare const stepperSeparatorDefinition: {
+    base: string[];
+    config: import("../../../utils/style-merge.util").StyleMergeUtils.Config<{
+        readonly orientation: {
+            readonly horizontal: "h-px min-w-4 flex-1";
+            readonly vertical: "min-h-16 w-px";
+        };
+        readonly contentOrientation: {
+            readonly horizontal: "";
+            readonly vertical: "";
+        };
+    }>;
+};
+export type StepperSeparatorConfig = NonNullable<typeof stepperSeparatorDefinition.config>;
+export interface StepperSeparatorVariantProps extends UIOverrides.VariantProps<StepperSeparatorConfig> {
 }

package/dist/components/navigation/Stepper/stepper.cva.js

@@ -1,95 +1,116 @@
-import { cva } from "class-variance-authority";
+import { UIOverrides } from "../../../config/uiOverrides.context.js";
 //#region src/components/navigation/Stepper/stepper.cva.ts
-var stepperCva = cva("", {
-	variants: { orientation: {
-		horizontal: "flex flex-row items-center gap-stepper-gap-step-to-line-horizontal",
-		vertical: "inline-flex flex-col gap-stepper-gap-step-to-line-vertical"
-	} },
-	defaultVariants: { orientation: "horizontal" }
+var stepperDefinition = UIOverrides.defineConfig({
+	base: [""],
+	config: {
+		variants: { orientation: {
+			horizontal: "flex flex-row items-center gap-stepper-gap-step-to-line-horizontal",
+			vertical: "inline-flex flex-col gap-stepper-gap-step-to-line-vertical"
+		} },
+		defaultVariants: { orientation: "horizontal" }
+	}
 });
-var stepperItemCva = cva("flex shrink-0", {
-	variants: { contentOrientation: {
-		horizontal: "flex-row items-center gap-stepper-gap-icon-to-text-horizontal text-left",
-		vertical: "flex-col items-center gap-stepper-gap-icon-to-text-vertical text-center"
-	} },
-	defaultVariants: { contentOrientation: "horizontal" }
+var stepperItemDefinition = UIOverrides.defineConfig({
+	base: ["flex shrink-0"],
+	config: {
+		variants: { contentOrientation: {
+			horizontal: "flex-row items-center gap-stepper-gap-icon-to-text-horizontal text-left",
+			vertical: "flex-col items-center gap-stepper-gap-icon-to-text-vertical text-center"
+		} },
+		defaultVariants: { contentOrientation: "horizontal" }
+	}
 });
-var stepperIconCva = cva("inline-flex size-5 shrink-0 items-center justify-center rounded-stepper-rounding-icon", {
-	variants: { status: {
-		completed: [
-			"border border-interactive-outlined-primary-outline-idle border-solid bg-interactive-contained-primary-idle",
-			"group-hover:border-interactive-outlined-primary-outline-hover group-hover:bg-interactive-contained-primary-hover",
-			"group-pressed:border-interactive-outlined-primary-outline-pressed group-pressed:bg-interactive-contained-primary-pressed"
-		],
-		active: "border border-interactive-outlined-primary-on-idle border-solid bg-interactive-outlined-primary-idle",
-		todo: "border border-interactive-outlined-primary-outline-disabled border-solid bg-interactive-outlined-primary-disabled"
-	} },
-	defaultVariants: { status: "todo" }
+var stepperIconDefinition = UIOverrides.defineConfig({
+	base: ["inline-flex size-5 shrink-0 items-center justify-center rounded-stepper-rounding-icon"],
+	config: {
+		variants: { status: {
+			completed: [
+				"border border-interactive-outlined-primary-outline-idle border-solid bg-interactive-contained-primary-idle",
+				"group-hover:border-interactive-outlined-primary-outline-hover group-hover:bg-interactive-contained-primary-hover",
+				"group-pressed:border-interactive-outlined-primary-outline-pressed group-pressed:bg-interactive-contained-primary-pressed"
+			],
+			active: "border border-interactive-outlined-primary-on-idle border-solid bg-interactive-outlined-primary-idle",
+			todo: "border border-interactive-outlined-primary-outline-disabled border-solid bg-interactive-outlined-primary-disabled"
+		} },
+		defaultVariants: { status: "todo" }
+	}
 });
-var stepperNumberCva = cva("text-center align-middle", {
-	variants: { status: {
-		completed: "",
-		active: "text-interactive-outlined-primary-on-idle",
-		todo: "text-interactive-outlined-primary-on-disabled"
-	} },
-	defaultVariants: { status: "todo" }
+var stepperNumberDefinition = UIOverrides.defineConfig({
+	base: ["text-center align-middle"],
+	config: {
+		variants: { status: {
+			completed: "",
+			active: "text-interactive-outlined-primary-on-idle",
+			todo: "text-interactive-outlined-primary-on-disabled"
+		} },
+		defaultVariants: { status: "todo" }
+	}
 });
-var stepperTitleCva = cva("", {
-	variants: { status: {
-		completed: [
-			"text-interactive-text-secondary-idle",
-			"group-hover:text-interactive-text-secondary-hover",
-			"group-pressed:text-interactive-text-secondary-pressed"
-		],
-		active: "text-interactive-text-primary-idle",
-		todo: "text-interactive-text-secondary-disabled"
-	} },
-	defaultVariants: { status: "todo" }
+var stepperTitleDefinition = UIOverrides.defineConfig({
+	base: [""],
+	config: {
+		variants: { status: {
+			completed: [
+				"text-interactive-text-secondary-idle",
+				"group-hover:text-interactive-text-secondary-hover",
+				"group-pressed:text-interactive-text-secondary-pressed"
+			],
+			active: "text-interactive-text-primary-idle",
+			todo: "text-interactive-text-secondary-disabled"
+		} },
+		defaultVariants: { status: "todo" }
+	}
 });
-var stepperSubtextCva = cva("", {
-	variants: { status: {
-		completed: [
-			"text-interactive-text-secondary-idle",
-			"group-hover:text-interactive-text-secondary-hover",
-			"group-pressed:text-interactive-text-secondary-pressed"
-		],
-		active: "text-interactive-text-secondary-idle",
-		todo: "text-interactive-text-secondary-disabled"
-	} },
-	defaultVariants: { status: "todo" }
+var stepperSubtextDefinition = UIOverrides.defineConfig({
+	base: [""],
+	config: {
+		variants: { status: {
+			completed: [
+				"text-interactive-text-secondary-idle",
+				"group-hover:text-interactive-text-secondary-hover",
+				"group-pressed:text-interactive-text-secondary-pressed"
+			],
+			active: "text-interactive-text-secondary-idle",
+			todo: "text-interactive-text-secondary-disabled"
+		} },
+		defaultVariants: { status: "todo" }
+	}
 });
-var stepperSeparatorCva = cva("bg-elevation-outline-default-1", {
-	variants: {
-		orientation: {
-			horizontal: "h-px min-w-4 flex-1",
-			vertical: "min-h-16 w-px"
+var stepperSeparatorDefinition = UIOverrides.defineConfig({
+	base: ["bg-elevation-outline-default-1"],
+	config: {
+		variants: {
+			orientation: {
+				horizontal: "h-px min-w-4 flex-1",
+				vertical: "min-h-16 w-px"
+			},
+			contentOrientation: {
+				horizontal: "",
+				vertical: ""
+			}
 		},
-		contentOrientation: {
-			horizontal: "",
-			vertical: ""
-		}
-	},
-	defaultVariants: {
-		orientation: "horizontal",
-		contentOrientation: "horizontal"
-	},
-	compoundVariants: [
-		{
+		defaultVariants: {
 			orientation: "horizontal",
-			contentOrientation: "vertical",
-			className: "mt-stepper-horizontal-line-top self-start"
+			contentOrientation: "horizontal"
 		},
-		{
-			orientation: "vertical",
-			contentOrientation: "vertical",
-			className: "self-center"
-		},
-		{
-			orientation: "vertical",
-			contentOrientation: "horizontal",
-			className: "ml-stepper-vertical-line-side"
-		}
-	]
+		compoundVariants: [
+			{
+				orientation: "horizontal",
+				contentOrientation: "vertical",
+				className: "mt-stepper-horizontal-line-top self-start"
+			},
+			{
+				orientation: "vertical",
+				contentOrientation: "vertical",
+				className: "self-center"
+			},
+			{
+				orientation: "vertical",
+				contentOrientation: "horizontal",
+				className: "ml-stepper-vertical-line-side"
+			}
+		]
+	}
 });
 //#endregion
-export { stepperCva, stepperIconCva, stepperItemCva, stepperNumberCva, stepperSeparatorCva, stepperSubtextCva, stepperTitleCva };
+export { stepperDefinition, stepperIconDefinition, stepperItemDefinition, stepperNumberDefinition, stepperSeparatorDefinition, stepperSubtextDefinition, stepperTitleDefinition };

package/dist/components/overlays/Modal/Modal.js

@@ -1,8 +1,8 @@
 import { CloseIcon } from "../../../assets/icons/Close.js";
-import { UIStyle } from "../../../config/uiStyle.context.js";
+import { UIOverrides } from "../../../config/uiOverrides.context.js";
 import { InlineIconButton } from "../../buttons/InlineIconButton/InlineIconButton.js";
 import "../../../config/i18n.js";
-import { modalContent, modalMain, modalOverlay } from "./modal.cva.js";
+import { modalContentDefinition, modalMainDefinition, modalOverlayDefinition } from "./modal.cva.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { Dialog, Modal, ModalOverlay } from "react-aria-components";
@@ -10,9 +10,9 @@ import { useTranslation } from "react-i18next";
 //#region src/components/overlays/Modal/Modal.tsx
 var Modal$1 = ({ isOpen, portalContainerRef, onClose, aside, children, modalClassName, closeIconClassName, overlayClassName, showCloseIcon, isDismissable = true, isKeyboardDismissable, shouldCloseOnInteractOutside }) => {
 	const { t } = useTranslation("ui");
-	const modalMainCva = UIStyle.useCva("modal.mainCva", modalMain);
-	const modalContentCva = UIStyle.useCva("modal.contentCva", modalContent);
-	const modalOverlayCva = UIStyle.useCva("modal.overlayCva", modalOverlay);
+	const modalMainCva = UIOverrides.useCva("modal.mainCva", modalMainDefinition);
+	const modalContentCva = UIOverrides.useCva("modal.contentCva", modalContentDefinition);
+	const modalOverlayCva = UIOverrides.useCva("modal.overlayCva", modalOverlayDefinition);
 	return /* @__PURE__ */ jsx(ModalOverlay, {
 		UNSTABLE_portalContainer: portalContainerRef?.current,
 		className: modalOverlayCva({

package/dist/components/overlays/Modal/modal.cva.d.ts

@@ -1,12 +1,37 @@
-import { VariantProps } from 'class-variance-authority';
-export interface ModalVariantProps extends VariantProps<typeof modalContent> {
+import { UIOverrides } from '../../../config/uiOverrides.context';
+export declare const modalContentDefinition: {
+    base: string[];
+    config: import("../../../utils/style-merge.util").StyleMergeUtils.Config<{
+        readonly aside: {
+            readonly left: "h-screen rounded-none border-r";
+            readonly right: "h-screen rounded-none border-l";
+            readonly center: "rounded-modal-rounding-default border";
+        };
+    }>;
+};
+export type ModalConfig = NonNullable<typeof modalContentDefinition.config>;
+export interface ModalVariantProps extends UIOverrides.VariantProps<ModalConfig> {
 }
-export declare const modalContent: (props?: ({
-    aside?: "left" | "right" | "center" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const modalOverlayDefinition: {
+    base: string[];
+    config: import("../../../utils/style-merge.util").StyleMergeUtils.Config<{
+        readonly aside: {
+            readonly left: "p-0";
+            readonly right: "p-0";
+            readonly center: "p-4";
+        };
+    }>;
+};
 export declare const modalOverlay: (props?: ({
-    aside?: "left" | "right" | "center" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export declare const modalMain: (props?: ({
-    aside?: "left" | "right" | "center" | null | undefined;
+    readonly aside?: "left" | "right" | "center" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const modalMainDefinition: {
+    base: string[];
+    config: import("../../../utils/style-merge.util").StyleMergeUtils.Config<{
+        readonly aside: {
+            readonly left: "entering:animate-drawer-enter-left exiting:animate-drawer-exit-left justify-start";
+            readonly right: "entering:animate-drawer-enter-right exiting:animate-drawer-exit-right justify-end";
+            readonly center: "justify-center";
+        };
+    }>;
+};

package/dist/components/overlays/Modal/modal.cva.js

@@ -1,33 +1,44 @@
+import { UIOverrides } from "../../../config/uiOverrides.context.js";
 import { cva } from "class-variance-authority";
 //#region src/components/overlays/Modal/modal.cva.ts
-var modalContent = cva([
-	"relative flex flex-col items-center gap-modal-gap-content px-modal-side-mobile py-modal-height-mobile md:px-modal-side-desktop md:py-modal-height-desktop",
-	"w-fit max-w-full [&>*]:max-w-full",
-	"border-elevation-outline-default-1 bg-elevation-fill-default-1 outline-none",
-	"pointer-events-auto"
-], {
-	variants: { aside: {
-		left: "h-screen rounded-none border-r",
-		right: "h-screen rounded-none border-l",
-		center: "rounded-modal-rounding-default border"
-	} },
-	defaultVariants: { aside: "center" }
+var modalContentDefinition = UIOverrides.defineConfig({
+	base: [
+		"relative flex flex-col items-center gap-modal-gap-content px-modal-side-mobile py-modal-height-mobile md:px-modal-side-desktop md:py-modal-height-desktop",
+		"w-fit max-w-full [&>*]:max-w-full",
+		"border-elevation-outline-default-1 bg-elevation-fill-default-1 outline-none",
+		"pointer-events-auto"
+	],
+	config: {
+		variants: { aside: {
+			left: "h-screen rounded-none border-r",
+			right: "h-screen rounded-none border-l",
+			center: "rounded-modal-rounding-default border"
+		} },
+		defaultVariants: { aside: "center" }
+	}
 });
-var modalOverlay = cva(["fixed inset-0 z-10 flex h-(--visual-viewport-height) w-screen overflow-y-auto bg-support-overlay"], {
-	variants: { aside: {
-		left: "p-0",
-		right: "p-0",
-		center: "p-4"
-	} },
-	defaultVariants: { aside: "center" }
+var modalOverlayDefinition = UIOverrides.defineConfig({
+	base: ["fixed inset-0 z-10 flex h-(--visual-viewport-height) w-screen overflow-y-auto bg-support-overlay"],
+	config: {
+		variants: { aside: {
+			left: "p-0",
+			right: "p-0",
+			center: "p-4"
+		} },
+		defaultVariants: { aside: "center" }
+	}
 });
-var modalMain = cva(["pointer-events-none my-auto flex w-full"], {
-	variants: { aside: {
-		left: "entering:animate-drawer-enter-left exiting:animate-drawer-exit-left justify-start",
-		right: "entering:animate-drawer-enter-right exiting:animate-drawer-exit-right justify-end",
-		center: "justify-center"
-	} },
-	defaultVariants: { aside: "center" }
+var modalOverlay = cva(modalOverlayDefinition.base, modalOverlayDefinition.config);
+var modalMainDefinition = UIOverrides.defineConfig({
+	base: ["pointer-events-none my-auto flex w-full"],
+	config: {
+		variants: { aside: {
+			left: "entering:animate-drawer-enter-left exiting:animate-drawer-exit-left justify-start",
+			right: "entering:animate-drawer-enter-right exiting:animate-drawer-exit-right justify-end",
+			center: "justify-center"
+		} },
+		defaultVariants: { aside: "center" }
+	}
 });
 //#endregion
-export { modalContent, modalMain, modalOverlay };
+export { modalContentDefinition, modalMainDefinition, modalOverlay, modalOverlayDefinition };

package/dist/components/overlays/ResponsivePopover/ResponsivePopover.js

@@ -1,13 +1,13 @@
-import { UIStyle } from "../../../config/uiStyle.context.js";
+import { UIOverrides } from "../../../config/uiOverrides.context.js";
 import { BottomSheet } from "../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 } from "clsx";
 import { Dialog, DialogTrigger, Popover } from "react-aria-components";
 //#region src/components/overlays/ResponsivePopover/ResponsivePopover.tsx
 var ResponsivePopover = ({ trigger, isOpen, onOpenChange, children, popoverClassName, sheetLabel }) => {
-	const popoverCva = UIStyle.useCva("popover.cva", popover);
+	const popoverCva = UIOverrides.useCva("popover.cva", popoverDefinition);
 	if (!useBreakpoint("md")) return /* @__PURE__ */ jsx(BottomSheet, {
 		isOpen,
 		onOpenChange,

package/dist/components/overlays/Tooltip/Tooltip.js

@@ -1,7 +1,7 @@
 import { PointerHorizontalIcon } from "../../../assets/icons/PointerHorizontal.js";
 import { PointerVerticalIcon } from "../../../assets/icons/PointerVertical.js";
-import { UIStyle } from "../../../config/uiStyle.context.js";
-import { tooltipCva, tooltipPointerHorizontalCva, tooltipPointerVerticalCva, tooltipTextCva } from "./tooltip.cva.js";
+import { UIOverrides } from "../../../config/uiOverrides.context.js";
+import { tooltipDefinition, tooltipPointerHorizontalDefinition, tooltipPointerVerticalDefinition, tooltipTextDefinition } from "./tooltip.cva.js";
 import { Typography } from "../../text/Typography/Typography.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
@@ -21,10 +21,10 @@ var CustomTrigger = ({ children, className, tabIndex }) => {
 	});
 };
 var Tooltip$1 = ({ children, text, isDisabled, delay, closeDelay, color, isNonInteractiveTrigger, triggerClassName, triggerTabIndex, ...tooltipProps }) => {
-	const tooltipCva$1 = UIStyle.useCva("tooltip.cva", tooltipCva);
-	const tooltipPointerHorizontalCva$1 = UIStyle.useCva("tooltip.pointerHorizontalCva", tooltipPointerHorizontalCva);
-	const tooltipPointerVerticalCva$1 = UIStyle.useCva("tooltip.pointerVerticalCva", tooltipPointerVerticalCva);
-	const tooltipTextCva$1 = UIStyle.useCva("tooltip.textCva", tooltipTextCva);
+	const tooltipCva = UIOverrides.useCva("tooltip.cva", tooltipDefinition);
+	const tooltipPointerHorizontalCva = UIOverrides.useCva("tooltip.pointerHorizontalCva", tooltipPointerHorizontalDefinition);
+	const tooltipPointerVerticalCva = UIOverrides.useCva("tooltip.pointerVerticalCva", tooltipPointerVerticalDefinition);
+	const tooltipTextCva = UIOverrides.useCva("tooltip.textCva", tooltipTextDefinition);
 	const Trigger = isNonInteractiveTrigger ? CustomTrigger : Fragment$1;
 	return /* @__PURE__ */ jsxs(TooltipTrigger, {
 		delay: delay ?? 0,
@@ -36,15 +36,15 @@ var Tooltip$1 = ({ children, text, isDisabled, delay, closeDelay, color, isNonIn
 			children
 		}) : /* @__PURE__ */ jsx(Trigger, { children }), /* @__PURE__ */ jsxs(Tooltip, {
 			...tooltipProps,
-			className: tooltipCva$1({
+			className: tooltipCva({
 				color,
 				className: tooltipProps.className
 			}),
 			offset: 13,
-			children: [/* @__PURE__ */ jsxs(OverlayArrow, { children: [/* @__PURE__ */ jsx(PointerHorizontalIcon, { className: tooltipPointerHorizontalCva$1({ color }) }), /* @__PURE__ */ jsx(PointerVerticalIcon, { className: tooltipPointerVerticalCva$1({ color }) })] }), /* @__PURE__ */ jsx(Typography, {
+			children: [/* @__PURE__ */ jsxs(OverlayArrow, { children: [/* @__PURE__ */ jsx(PointerHorizontalIcon, { className: tooltipPointerHorizontalCva({ color }) }), /* @__PURE__ */ jsx(PointerVerticalIcon, { className: tooltipPointerVerticalCva({ color }) })] }), /* @__PURE__ */ jsx(Typography, {
 				size: "body-4",
 				variant: "prominent-1",
-				className: tooltipTextCva$1({ color }),
+				className: tooltipTextCva({ color }),
 				children: text
 			})]
 		})]

package/dist/components/overlays/Tooltip/tooltip.cva.d.ts

@@ -1,21 +1,49 @@
-import { VariantProps } from 'class-variance-authority';
-export declare const tooltipCva: (props?: ({
-    color?: "default" | "error" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export interface TooltipVariantProps extends VariantProps<typeof tooltipCva> {
+import { UIOverrides } from '../../../config/uiOverrides.context';
+export declare const tooltipDefinition: {
+    base: string[];
+    config: import("../../../utils/style-merge.util").StyleMergeUtils.Config<{
+        readonly color: {
+            readonly default: ["bg-interactive-contained-secondary-idle"];
+            readonly error: ["w-max bg-elevation-fill-error-1"];
+        };
+    }>;
+};
+export type TooltipConfig = NonNullable<typeof tooltipDefinition.config>;
+export interface TooltipVariantProps extends UIOverrides.VariantProps<TooltipConfig> {
 }
-export declare const tooltipPointerHorizontalCva: (props?: ({
-    color?: "default" | "error" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export interface TooltipPointerHorizontalVariantProps extends VariantProps<typeof tooltipPointerHorizontalCva> {
+export declare const tooltipPointerHorizontalDefinition: {
+    base: string[];
+    config: import("../../../utils/style-merge.util").StyleMergeUtils.Config<{
+        readonly color: {
+            readonly default: ["text-interactive-contained-secondary-idle"];
+            readonly error: ["text-elevation-fill-error-1"];
+        };
+    }>;
+};
+export type TooltipPointerHorizontalConfig = NonNullable<typeof tooltipPointerHorizontalDefinition.config>;
+export interface TooltipPointerHorizontalVariantProps extends UIOverrides.VariantProps<TooltipPointerHorizontalConfig> {
 }
-export declare const tooltipPointerVerticalCva: (props?: ({
-    color?: "default" | "error" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export interface TooltipPointerVerticalVariantProps extends VariantProps<typeof tooltipPointerVerticalCva> {
+export declare const tooltipPointerVerticalDefinition: {
+    base: string[];
+    config: import("../../../utils/style-merge.util").StyleMergeUtils.Config<{
+        readonly color: {
+            readonly default: ["text-interactive-contained-secondary-idle"];
+            readonly error: ["text-elevation-fill-error-1"];
+        };
+    }>;
+};
+export type TooltipPointerVerticalConfig = NonNullable<typeof tooltipPointerVerticalDefinition.config>;
+export interface TooltipPointerVerticalVariantProps extends UIOverrides.VariantProps<TooltipPointerVerticalConfig> {
 }
-export declare const tooltipTextCva: (props?: ({
-    color?: "default" | "error" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export interface TooltipTextVariantProps extends VariantProps<typeof tooltipTextCva> {
+export declare const tooltipTextDefinition: {
+    base: string[];
+    config: import("../../../utils/style-merge.util").StyleMergeUtils.Config<{
+        readonly color: {
+            readonly default: ["text-interactive-contained-secondary-on-idle"];
+            readonly error: ["text-text-error-inverted-1"];
+        };
+    }>;
+};
+export type TooltipTextConfig = NonNullable<typeof tooltipTextDefinition.config>;
+export interface TooltipTextVariantProps extends UIOverrides.VariantProps<TooltipTextConfig> {
 }