@povio/ui 2.3.3 → 3.0.0-rc.1

package/dist/components/table/PaginatedTable.js

@@ -1,28 +1,94 @@
 import { Pagination } from "../shared/pagination/Pagination.js";
 import { Table } from "./Table.js";
+import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/table/PaginatedTable.tsx
-var PaginatedTable = ({ pagination, setPagination, items, totalItems, ...rest }) => {
-	return /* @__PURE__ */ jsxs("div", {
-		className: "flex flex-col gap-4",
-		children: [/* @__PURE__ */ jsx(Table, {
+var PaginatedTable = (t0) => {
+	const $ = c(24);
+	let items;
+	let pagination;
+	let rest;
+	let setPagination;
+	let totalItems;
+	if ($[0] !== t0) {
+		({pagination, setPagination, items, totalItems, ...rest} = t0);
+		$[0] = t0;
+		$[1] = items;
+		$[2] = pagination;
+		$[3] = rest;
+		$[4] = setPagination;
+		$[5] = totalItems;
+	} else {
+		items = $[1];
+		pagination = $[2];
+		rest = $[3];
+		setPagination = $[4];
+		totalItems = $[5];
+	}
+	let t1;
+	if ($[6] !== items) {
+		t1 = items ?? [];
+		$[6] = items;
+		$[7] = t1;
+	} else t1 = $[7];
+	let t2;
+	if ($[8] !== rest || $[9] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Table, {
 			...rest,
-			items: items ?? []
-		}), /* @__PURE__ */ jsx(Pagination, {
+			items: t1
+		});
+		$[8] = rest;
+		$[9] = t1;
+		$[10] = t2;
+	} else t2 = $[10];
+	const t3 = totalItems ?? 0;
+	let t4;
+	let t5;
+	if ($[11] !== pagination || $[12] !== setPagination) {
+		t4 = (page) => setPagination({
+			...pagination,
+			pageIndex: page
+		});
+		t5 = (pageSize) => setPagination({
+			...pagination,
+			pageSize,
+			pageIndex: 1
+		});
+		$[11] = pagination;
+		$[12] = setPagination;
+		$[13] = t4;
+		$[14] = t5;
+	} else {
+		t4 = $[13];
+		t5 = $[14];
+	}
+	let t6;
+	if ($[15] !== pagination.pageIndex || $[16] !== pagination.pageSize || $[17] !== t3 || $[18] !== t4 || $[19] !== t5) {
+		t6 = /* @__PURE__ */ jsx(Pagination, {
 			page: pagination.pageIndex,
 			pageSize: pagination.pageSize,
-			totalItems: totalItems ?? 0,
-			onPageChange: (page) => setPagination({
-				...pagination,
-				pageIndex: page
-			}),
-			onPageSizeChange: (pageSize) => setPagination({
-				...pagination,
-				pageSize,
-				pageIndex: 1
-			})
-		})]
-	});
+			totalItems: t3,
+			onPageChange: t4,
+			onPageSizeChange: t5
+		});
+		$[15] = pagination.pageIndex;
+		$[16] = pagination.pageSize;
+		$[17] = t3;
+		$[18] = t4;
+		$[19] = t5;
+		$[20] = t6;
+	} else t6 = $[20];
+	let t7;
+	if ($[21] !== t2 || $[22] !== t6) {
+		t7 = /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-4",
+			children: [t2, t6]
+		});
+		$[21] = t2;
+		$[22] = t6;
+		$[23] = t7;
+	} else t7 = $[23];
+	return t7;
 };
 //#endregion
 export { PaginatedTable };

package/dist/components/table/Table.js

@@ -1,9 +1,10 @@
+"use no memo";
 import { ChevronDownIcon } from "../../assets/icons/ChevronDown.js";
 import { ChevronUpIcon } from "../../assets/icons/ChevronUp.js";
-import { UIStyle } from "../../config/uiStyle.context.js";
+import { UIOverrides } from "../../config/uiOverrides.context.js";
 import { InlineIconButton } from "../buttons/InlineIconButton/InlineIconButton.js";
 import { useIntersectionObserver } from "../../hooks/useIntersectionObserver.js";
-import { tableData, tableHeadData, tableHeadRow, tableRow } from "./table.cva.js";
+import { tableDataDefinition, tableHeadDataDefinition, tableHeadRowDefinition, tableRowDefinition } from "./table.cva.js";
 import { CellText } from "./CellText.js";
 import { DragIndicatorIcon } from "../../assets/icons/DragIndicator.js";
 import { HeaderText } from "./HeaderText.js";
@@ -26,8 +27,8 @@ var CustomCellContext = (context) => {
 		value: context.getValue()
 	};
 };
-var CellRender = (Comp, props) => {
-	const rendered = typeof Comp === "function" ? Comp(props) : Comp;
+var renderCell = (Comp, props) => {
+	const rendered = flexRender(Comp, props);
 	return typeof rendered === "string" ? /* @__PURE__ */ jsx(CellText, { children: rendered }) : rendered;
 };
 var RowDragHandleCell = ({ rowId }) => {
@@ -68,16 +69,16 @@ var DraggableRow = ({ row, showCellBorder, onRowClick, onDoubleClick, tableRowCv
 			return /* @__PURE__ */ jsx("td", {
 				tabIndex: -1,
 				className: clsx(tableDataCva({ hasRightBorder: cellIndex > 0 && showCellBorder }), columnMeta.cellClass, columnMeta.width),
-				children: CellRender(cell.column.columnDef.cell, CustomCellContext(cell.getContext()))
+				children: renderCell(cell.column.columnDef.cell, CustomCellContext(cell.getContext()))
 			}, cell.id);
 		})
 	});
 };
 var Table = ({ items, showCellBorder, columns, onRowClick, onDoubleClick, className, sorting, setSorting, columnOrder, setColumnOrder, columnVisibility, setColumnVisibility, bulkSelectionActions: ActionHeader, enableDragDrop = false, onDragEnd, onReorder, getRowId, enableRowSelection, enableMultiRowSelection = false, defaultSelectedRows, onRowSelectionChange, ...props }) => {
-	const tableRowCva = UIStyle.useCva("table.rowCva", tableRow);
-	const tableHeadRowCva = UIStyle.useCva("table.headRowCva", tableHeadRow);
-	const tableHeadDataCva = UIStyle.useCva("table.headDataCva", tableHeadData);
-	const tableDataCva = UIStyle.useCva("table.dataCva", tableData);
+	const tableRowCva = UIOverrides.useCva("table.rowCva", tableRowDefinition);
+	const tableHeadRowCva = UIOverrides.useCva("table.headRowCva", tableHeadRowDefinition);
+	const tableHeadDataCva = UIOverrides.useCva("table.headDataCva", tableHeadDataDefinition);
+	const tableDataCva = UIOverrides.useCva("table.dataCva", tableDataDefinition);
 	const ref = useRef(null);
 	const { listeners } = useTableNav();
 	const getCoreRowModelCallback = useCallback(getCoreRowModel, []);
@@ -154,8 +155,8 @@ var Table = ({ items, showCellBorder, columns, onRowClick, onDoubleClick, classN
 		if (!active || !over || active.id === over.id) return;
 		if (getRowId && (onReorder || onDragEnd)) {
 			if (onReorder) {
-				const oldIndex = items.findIndex((item) => getRowId(item) === active.id);
-				const newIndex = items.findIndex((item) => getRowId(item) === over.id);
+				const oldIndex = items.findIndex((item_0) => getRowId(item_0) === active.id);
+				const newIndex = items.findIndex((item_1) => getRowId(item_1) === over.id);
 				if (oldIndex !== -1 && newIndex !== -1) onReorder(arrayMove(items, oldIndex, newIndex));
 			}
 			onDragEnd?.(event);
@@ -185,18 +186,18 @@ var Table = ({ items, showCellBorder, columns, onRowClick, onDoubleClick, classN
 				children: headerGroup.headers.filter((header) => {
 					if (isAnyRowSelected && header.index > 0) return false;
 					return header.column.getIsVisible();
-				}).map((header, index) => {
-					const columnMeta = header.column.columnDef.meta ?? {};
+				}).map((header_0, index) => {
+					const columnMeta = header_0.column.columnDef.meta ?? {};
 					return /* @__PURE__ */ jsx("th", {
-						colSpan: isAnyRowSelected ? columnCount : header.colSpan,
+						colSpan: isAnyRowSelected ? columnCount : header_0.colSpan,
 						tabIndex: -1,
 						className: clsx(tableHeadDataCva({ hasRightBorder: index > 0 && showCellBorder }), columnMeta.headerClass, columnMeta.width),
 						children: isAnyRowSelected ? /* @__PURE__ */ jsx(ActionHeader, { table }) : /* @__PURE__ */ jsxs("button", {
 							type: "button",
 							"aria-label": "Sort column",
-							className: clsx("flex select-none items-center gap-1 text-text-default-1", header.column.getCanSort() ? "h-6 cursor-pointer rounded-xs px-1 hover:bg-elevation-fill-default-2" : "cursor-default", columnMeta.sortClass),
-							onClick: header.column.getToggleSortingHandler(),
-							children: [typeof header.column.columnDef.header === "function" ? flexRender(header.column.columnDef.header, header.getContext()) : /* @__PURE__ */ jsx(HeaderText, { children: header.column.columnDef.header }), {
+							className: clsx("flex select-none items-center gap-1 text-text-default-1", header_0.column.getCanSort() ? "h-6 cursor-pointer rounded-xs px-1 hover:bg-elevation-fill-default-2" : "cursor-default", columnMeta.sortClass),
+							onClick: header_0.column.getToggleSortingHandler(),
+							children: [typeof header_0.column.columnDef.header === "function" ? flexRender(header_0.column.columnDef.header, header_0.getContext()) : /* @__PURE__ */ jsx(HeaderText, { children: header_0.column.columnDef.header }), {
 								asc: /* @__PURE__ */ jsx(ChevronUpIcon, {
 									width: 18,
 									height: 18
@@ -205,9 +206,9 @@ var Table = ({ items, showCellBorder, columns, onRowClick, onDoubleClick, classN
 									width: 18,
 									height: 18
 								})
-							}[header.column.getIsSorted()] ?? null]
+							}[header_0.column.getIsSorted()] ?? null]
 						})
-					}, header.id);
+					}, header_0.id);
 				})
 			}, headerGroup.id))]
 		}), /* @__PURE__ */ jsx("tbody", {
@@ -216,8 +217,8 @@ var Table = ({ items, showCellBorder, columns, onRowClick, onDoubleClick, classN
 			children: enableDragDrop ? /* @__PURE__ */ jsx(SortableContext, {
 				items: dataIds,
 				strategy: verticalListSortingStrategy,
-				children: table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx(DraggableRow, {
-					row,
+				children: table.getRowModel().rows.map((row_0) => /* @__PURE__ */ jsx(DraggableRow, {
+					row: row_0,
 					showCellBorder,
 					onRowClick,
 					onDoubleClick,
@@ -226,29 +227,29 @@ var Table = ({ items, showCellBorder, columns, onRowClick, onDoubleClick, classN
 					tableDataCva,
 					hasOnClick,
 					...props
-				}, row.id))
-			}) : table.getRowModel().rows.map((row) => {
+				}, row_0.id))
+			}) : table.getRowModel().rows.map((row_1) => {
 				return /* @__PURE__ */ jsx("tr", {
 					className: clsx(tableRowCva({ ...props })),
 					onClick: () => {
 						if (onRowClick) {
-							onRowClick(row.original);
+							onRowClick(row_1.original);
 							return;
 						}
-						if (row.getCanSelect()) row.toggleSelected();
+						if (row_1.getCanSelect()) row_1.toggleSelected();
 					},
-					onDoubleClick: () => onDoubleClick?.(row.original),
-					"data-clickable": hasOnClick || row.getCanSelect() || void 0,
-					"data-selected": row.getIsSelected() || void 0,
-					children: row.getVisibleCells().map((cell, cellIndex) => {
-						const columnMeta = cell.column.columnDef.meta ?? {};
+					onDoubleClick: () => onDoubleClick?.(row_1.original),
+					"data-clickable": hasOnClick || row_1.getCanSelect() || void 0,
+					"data-selected": row_1.getIsSelected() || void 0,
+					children: row_1.getVisibleCells().map((cell, cellIndex) => {
+						const columnMeta_0 = cell.column.columnDef.meta ?? {};
 						return /* @__PURE__ */ jsx("td", {
 							tabIndex: -1,
-							className: clsx(tableDataCva({ hasRightBorder: cellIndex > 0 && showCellBorder }), columnMeta.cellClass, columnMeta.width),
-							children: CellRender(cell.column.columnDef.cell, CustomCellContext(cell.getContext()))
+							className: clsx(tableDataCva({ hasRightBorder: cellIndex > 0 && showCellBorder }), columnMeta_0.cellClass, columnMeta_0.width),
+							children: renderCell(cell.column.columnDef.cell, CustomCellContext(cell.getContext()))
 						}, cell.id);
 					})
-				}, row.id);
+				}, row_1.id);
 			})
 		})]
 	});

package/dist/components/table/table.cva.d.ts

@@ -1,25 +1,58 @@
-import { VariantProps } from 'class-variance-authority';
-export declare const tableRow: (props?: ({
-    alternatingBackground?: "even" | "odd" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export interface TableRowVariantProps extends VariantProps<typeof tableRow> {
+import { UIOverrides } from '../../config/uiOverrides.context';
+export declare const tableRowDefinition: {
+    base: string[];
+    config: import("../../utils/style-merge.util").StyleMergeUtils.Config<{
+        readonly alternatingBackground: {
+            readonly even: "even:bg-elevation-fill-inverted-4/5";
+            readonly odd: "odd:bg-elevation-fill-inverted-4/5";
+        };
+    }>;
+};
+export type TableRowConfig = NonNullable<typeof tableRowDefinition.config>;
+export interface TableRowVariantProps extends UIOverrides.VariantProps<TableRowConfig> {
 }
-export declare const tableHeadRow: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
-export interface TableHeadRowVariantProps extends VariantProps<typeof tableHeadRow> {
+export declare const tableHeadRowDefinition: {
+    base: string[];
+    config?: import("../../utils/style-merge.util").StyleMergeUtils.Config<Record<never, never>>;
+};
+export type TableHeadRowConfig = NonNullable<typeof tableHeadRowDefinition.config>;
+export interface TableHeadRowVariantProps extends UIOverrides.VariantProps<TableHeadRowConfig> {
 }
-export declare const tableHeadData: (props?: ({
-    hasRightBorder?: boolean | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export interface TableHeadDataVariantProps extends VariantProps<typeof tableHeadData> {
+export declare const tableHeadDataDefinition: {
+    base: string[];
+    config: import("../../utils/style-merge.util").StyleMergeUtils.Config<{
+        readonly hasRightBorder: {
+            readonly true: "border-l border-l-elevation-outline-default-1 border-solid";
+            readonly false: "";
+        };
+    }>;
+};
+export type TableHeadDataConfig = NonNullable<typeof tableHeadDataDefinition.config>;
+export interface TableHeadDataVariantProps extends UIOverrides.VariantProps<TableHeadDataConfig> {
 }
-export declare const tableData: (props?: ({
-    hasRightBorder?: boolean | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export interface TableDataVariantProps extends VariantProps<typeof tableData> {
+export declare const tableDataDefinition: {
+    base: string[];
+    config: import("../../utils/style-merge.util").StyleMergeUtils.Config<{
+        readonly hasRightBorder: {
+            readonly true: "border-l border-l-elevation-outline-default-1";
+            readonly false: "";
+        };
+    }>;
+};
+export type TableDataConfig = NonNullable<typeof tableDataDefinition.config>;
+export interface TableDataVariantProps extends UIOverrides.VariantProps<TableDataConfig> {
 }
-export declare const tableHeaderText: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
-export interface TableHeaderTextVariantProps extends VariantProps<typeof tableHeaderText> {
+export declare const tableHeaderTextDefinition: {
+    base: string[];
+    config?: import("../../utils/style-merge.util").StyleMergeUtils.Config<Record<never, never>>;
+};
+export type TableHeaderTextConfig = NonNullable<typeof tableHeaderTextDefinition.config>;
+export interface TableHeaderTextVariantProps extends UIOverrides.VariantProps<TableHeaderTextConfig> {
 }
-export declare const tableCellText: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
-export interface TableCellTextVariantProps extends VariantProps<typeof tableCellText> {
+export declare const tableCellTextDefinition: {
+    base: string[];
+    config?: import("../../utils/style-merge.util").StyleMergeUtils.Config<Record<never, never>>;
+};
+export type TableCellTextConfig = NonNullable<typeof tableCellTextDefinition.config>;
+export interface TableCellTextVariantProps extends UIOverrides.VariantProps<TableCellTextConfig> {
 }

package/dist/components/table/table.cva.js

@@ -1,39 +1,48 @@
-import { cva } from "class-variance-authority";
+import { UIOverrides } from "../../config/uiOverrides.context.js";
 //#region src/components/table/table.cva.ts
-var tableRow = cva([
-	"h-9 max-h-12",
-	"hover:bg-elevation-fill-default-2",
-	"disabled:opacity-50",
-	"selected:bg-elevation-fill-default-2",
-	"hover:selected:bg-interactive-subtle-secondary-hover",
-	"data-clickable:cursor-pointer",
-	"focus-within:bg-elevation-fill-default-2"
-], { variants: { alternatingBackground: {
-	even: "even:bg-elevation-fill-inverted-4/5",
-	odd: "odd:bg-elevation-fill-inverted-4/5"
-} } });
-var tableHeadRow = cva(["h-8 w-full"]);
-var tableHeadData = cva(["border-b border-b-elevation-outline-default-1 border-solid px-table-header-cell-container-side-default py-table-header-cell-container-height-default text-left", "group-data-[is-sticky=true]/table-head:bg-elevation-fill-default-1"], {
-	variants: { hasRightBorder: {
-		true: "border-l border-l-elevation-outline-default-1 border-solid",
-		false: ""
-	} },
-	defaultVariants: { hasRightBorder: true }
+var tableRowDefinition = UIOverrides.defineConfig({
+	base: [
+		"h-9 max-h-12",
+		"hover:bg-elevation-fill-default-2",
+		"disabled:opacity-50",
+		"selected:bg-elevation-fill-default-2",
+		"hover:selected:bg-interactive-subtle-secondary-hover",
+		"data-clickable:cursor-pointer",
+		"focus-within:bg-elevation-fill-default-2"
+	],
+	config: { variants: { alternatingBackground: {
+		even: "even:bg-elevation-fill-inverted-4/5",
+		odd: "odd:bg-elevation-fill-inverted-4/5"
+	} } }
 });
-var tableData = cva([
-	"relative h-0-5 overflow-hidden text-ellipsis whitespace-nowrap border-t border-t-transparent px-2",
-	"border-b border-b-elevation-outline-default-1",
-	"has-[*>[data-hovered]:not([data-disabled])]:hover:border-b-input-outlined-outline-hover",
-	"has-[*>[data-invalid]]:border-b-input-outlined-outline-error!",
-	"has-[*>[data-focused]]:border-b-input-outlined-outline-active"
-], {
-	variants: { hasRightBorder: {
-		true: "border-l border-l-elevation-outline-default-1",
-		false: ""
-	} },
-	defaultVariants: { hasRightBorder: true }
+var tableHeadRowDefinition = UIOverrides.defineConfig({ base: ["h-8 w-full"] });
+var tableHeadDataDefinition = UIOverrides.defineConfig({
+	base: ["border-b border-b-elevation-outline-default-1 border-solid px-table-header-cell-container-side-default py-table-header-cell-container-height-default text-left", "group-data-[is-sticky=true]/table-head:bg-elevation-fill-default-1"],
+	config: {
+		variants: { hasRightBorder: {
+			true: "border-l border-l-elevation-outline-default-1 border-solid",
+			false: ""
+		} },
+		defaultVariants: { hasRightBorder: true }
+	}
 });
-var tableHeaderText = cva(["overflow-hidden text-ellipsis px-table-cell-content-side-m py-table-cell-content-height-m text-text-default-1"]);
-var tableCellText = cva(["block overflow-hidden text-ellipsis text-text-default-2"]);
+var tableDataDefinition = UIOverrides.defineConfig({
+	base: [
+		"relative h-0-5 overflow-hidden text-ellipsis whitespace-nowrap border-t border-t-transparent px-2",
+		"border-b border-b-elevation-outline-default-1",
+		"has-[*>[data-hovered]:not([data-disabled])]:hover:border-b-input-outlined-outline-hover",
+		"has-[*>[data-invalid]]:border-b-input-outlined-outline-error!",
+		"has-[*>[data-focused]]:border-b-input-outlined-outline-active"
+	],
+	config: {
+		variants: { hasRightBorder: {
+			true: "border-l border-l-elevation-outline-default-1",
+			false: ""
+		} },
+		defaultVariants: { hasRightBorder: true }
+	}
+});
+var tableHeaderTextDefinition = UIOverrides.defineConfig({ base: ["overflow-hidden text-ellipsis px-table-cell-content-side-m py-table-cell-content-height-m text-text-default-1"] });
+var tableCellTextDefinition = UIOverrides.defineConfig({ base: ["block overflow-hidden text-ellipsis text-text-default-2"] });
 //#endregion
-export { tableCellText, tableData, tableHeadData, tableHeadRow, tableHeaderText, tableRow };
+export { tableCellTextDefinition, tableDataDefinition, tableHeadDataDefinition, tableHeadRowDefinition, tableHeaderTextDefinition, tableRowDefinition };

package/dist/components/text/Link/Link.js

@@ -1,21 +1,33 @@
-import { UIStyle } from "../../../config/uiStyle.context.js";
+import { UIOverrides } from "../../../config/uiOverrides.context.js";
 import { LinkContext } from "../../../config/link.context.js";
-import { link } from "./link.cva.js";
+import { linkDefinition } from "./link.cva.js";
+import { c } from "react/compiler-runtime";
 import { jsx } from "react/jsx-runtime";
 import { Link } from "react-aria-components";
 //#region src/components/text/Link/Link.tsx
-var Link$1 = ({ variant, ...props }) => {
+var Link$1 = (t0) => {
+	const $ = c(4);
+	const { variant, ...props } = t0;
 	const linkContext = LinkContext.useLinkContext();
-	const linkCva = UIStyle.useCva("link.cva", link);
+	const linkCva = UIOverrides.useCva("link.cva", linkDefinition);
 	const LinkComponent = linkContext?.LinkComponent ?? Link;
 	if (!props.to && props.href) props.to = props.href;
-	return /* @__PURE__ */ jsx(LinkComponent, {
-		...props,
-		className: linkCva({
-			variant,
-			className: props.className
-		})
+	const t1 = linkCva({
+		variant,
+		className: props.className
 	});
+	let t2;
+	if ($[0] !== LinkComponent || $[1] !== props || $[2] !== t1) {
+		t2 = /* @__PURE__ */ jsx(LinkComponent, {
+			...props,
+			className: t1
+		});
+		$[0] = LinkComponent;
+		$[1] = props;
+		$[2] = t1;
+		$[3] = t2;
+	} else t2 = $[3];
+	return t2;
 };
 //#endregion
 export { Link$1 as Link };

package/dist/components/text/Link/link.cva.d.ts

@@ -1,6 +1,12 @@
-import { VariantProps } from 'class-variance-authority';
-export declare const link: (props?: ({
-    variant?: "default" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export interface LinkVariantProps extends VariantProps<typeof link> {
+import { UIOverrides } from '../../../config/uiOverrides.context';
+export declare const linkDefinition: {
+    base: string[];
+    config: import("../../../utils/style-merge.util").StyleMergeUtils.Config<{
+        readonly variant: {
+            readonly default: ["text-interactive-text-primary-idle focus-visible:outline-interactive-text-primary-focus", "hover:text-interactive-text-primary-hover focus-visible:text-interactive-text-primary-focus active:text-interactive-text-primary-pressed"];
+        };
+    }>;
+};
+export type LinkConfig = NonNullable<typeof linkDefinition.config>;
+export interface LinkVariantProps extends UIOverrides.VariantProps<LinkConfig> {
 }

package/dist/components/text/Link/link.cva.js

@@ -1,9 +1,12 @@
+import { UIOverrides } from "../../../config/uiOverrides.context.js";
 import { uiOutlineClass } from "../../outline.clsx.js";
-import { cva } from "class-variance-authority";
 //#region src/components/text/Link/link.cva.ts
-var link = cva(["underline", uiOutlineClass], {
-	variants: { variant: { default: ["text-interactive-text-primary-idle focus-visible:outline-interactive-text-primary-focus", "hover:text-interactive-text-primary-hover focus-visible:text-interactive-text-primary-focus active:text-interactive-text-primary-pressed"] } },
-	defaultVariants: { variant: "default" }
+var linkDefinition = UIOverrides.defineConfig({
+	base: ["underline", uiOutlineClass],
+	config: {
+		variants: { variant: { default: ["text-interactive-text-primary-idle focus-visible:outline-interactive-text-primary-focus", "hover:text-interactive-text-primary-hover focus-visible:text-interactive-text-primary-focus active:text-interactive-text-primary-pressed"] } },
+		defaultVariants: { variant: "default" }
+	}
 });
 //#endregion
-export { link };
+export { linkDefinition };

package/dist/components/text/Tag/Tag.js

@@ -1,9 +1,9 @@
 import { CloseIcon } from "../../../assets/icons/Close.js";
-import { UIStyle } from "../../../config/uiStyle.context.js";
+import { UIOverrides } from "../../../config/uiOverrides.context.js";
 import { Typography } from "../Typography/Typography.js";
 import { UIConfig } from "../../../config/uiConfig.context.js";
 import "../../../config/i18n.js";
-import { tag } from "./tag.cva.js";
+import { tagDefinition } from "./tag.cva.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { Button } from "react-aria-components";
@@ -12,7 +12,7 @@ import { useTranslation } from "react-i18next";
 var Tag = ({ className, children, dismissable, isDisabled, onDismiss, contentRef, ...props }) => {
 	const uiConfig = UIConfig.useConfig();
 	const { textVariant = uiConfig.tag.textVariant, textSize = uiConfig.tag.textSize } = props;
-	const tagCva = UIStyle.useCva("tag.cva", tag);
+	const tagCva = UIOverrides.useCva("tag.cva", tagDefinition);
 	const { t } = useTranslation("ui");
 	const buttonProps = {
 		isDisabled,

package/dist/components/text/Tag/tag.cva.d.ts

@@ -1,6 +1,16 @@
-import { VariantProps } from 'class-variance-authority';
-export declare const tag: (props?: ({
-    color?: "primary" | "secondary" | "success" | "warning" | "error" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export interface TagVariantProps extends VariantProps<typeof tag> {
+import { UIOverrides } from '../../../config/uiOverrides.context';
+export declare const tagDefinition: {
+    base: string[];
+    config: import("../../../utils/style-merge.util").StyleMergeUtils.Config<{
+        readonly color: {
+            readonly primary: ["bg-interactive-subtle-primary-idle text-interactive-subtle-primary-on-idle", "hover:bg-interactive-subtle-primary-hover hover:text-interactive-subtle-primary-on-hover", "pressed:bg-interactive-subtle-primary-pressed pressed:text-interactive-subtle-primary-on-pressed", "disabled:bg-interactive-subtle-primary-disabled disabled:text-interactive-subtle-primary-on-disabled", "focus-visible:outline-interactive-contained-primary-focus"];
+            readonly secondary: ["bg-interactive-subtle-secondary-idle text-interactive-subtle-secondary-on-idle", "hover:bg-interactive-subtle-secondary-hover hover:text-interactive-subtle-secondary-on-hover", "pressed:bg-interactive-subtle-secondary-pressed pressed:text-interactive-subtle-secondary-on-pressed", "disabled:bg-interactive-subtle-secondary-disabled disabled:text-interactive-subtle-secondary-on-disabled", "focus-visible:outline-interactive-contained-primary-focus"];
+            readonly success: ["bg-interactive-subtle-success-idle text-interactive-subtle-success-on-idle", "hover:bg-interactive-subtle-success-hover hover:text-interactive-subtle-success-on-hover", "pressed:bg-interactive-subtle-success-pressed pressed:text-interactive-subtle-success-on-pressed", "disabled:bg-interactive-subtle-success-disabled disabled:text-interactive-subtle-success-on-disabled", "focus-visible:outline-interactive-contained-primary-focus"];
+            readonly warning: ["bg-interactive-subtle-warning-idle text-interactive-subtle-warning-on-idle", "hover:bg-interactive-subtle-warning-hover hover:text-interactive-subtle-warning-on-hover", "pressed:bg-interactive-subtle-warning-pressed pressed:text-interactive-subtle-warning-on-pressed", "disabled:bg-interactive-subtle-warning-disabled disabled:text-interactive-subtle-warning-on-disabled", "focus-visible:outline-interactive-contained-primary-focus"];
+            readonly error: ["bg-interactive-subtle-error-idle text-interactive-subtle-error-on-idle", "hover:bg-interactive-subtle-error-hover hover:text-interactive-subtle-error-on-hover", "pressed:bg-interactive-subtle-error-pressed pressed:text-interactive-subtle-error-on-pressed", "disabled:bg-interactive-subtle-error-disabled disabled:text-interactive-subtle-error-on-disabled", "focus-visible:outline-interactive-contained-primary-focus"];
+        };
+    }>;
+};
+export type TagConfig = NonNullable<typeof tagDefinition.config>;
+export interface TagVariantProps extends UIOverrides.VariantProps<TagConfig> {
 }