@optiaxiom/react 3.2.0 → 3.3.0

package/dist/esm/packages/react/src/sub-nav/SubNav-css.js

@@ -1,6 +1,6 @@
 import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
-import "./../../../../assets/layers.css.ts.vanilla-BdZnAqgW.css";
-import "./../../../../assets/SubNav.css.ts.vanilla-KmPcekj6.css";
+import "./../../../../assets/layers.css.ts.vanilla-DD7saQYy.css";
+import "./../../../../assets/SubNav.css.ts.vanilla-CitRHMnA.css";
 //#region src/sub-nav/SubNav.css.ts
 var nav = recipeRuntime({ base: [{
 	bg: "bg.default",
@@ -9,6 +9,6 @@ var nav = recipeRuntime({ base: [{
 	gap: "0",
 	overflow: "hidden",
 	py: "16"
-}, "_1yz9deu"] });
+}, "en9txh"] });
 //#endregion
 export { nav };

package/dist/esm/packages/react/src/switch/Switch-css.js

@@ -1,25 +1,25 @@
 import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
-import "./../../../../assets/layers.css.ts.vanilla-BdZnAqgW.css";
-import "./../../../../assets/AvatarGroup.css.ts.vanilla-hJyKbxYK.css";
-import "./../../../../assets/ToggleInput.css.ts.vanilla-BF4JLCYy.css";
-import "./../../../../assets/Switch.css.ts.vanilla-3_4AdHgF.css";
+import "./../../../../assets/layers.css.ts.vanilla-DD7saQYy.css";
+import "./../../../../assets/AvatarGroup.css.ts.vanilla-BKGbg4bv.css";
+import "./../../../../assets/ToggleInput.css.ts.vanilla-eOzUU8G3.css";
+import "./../../../../assets/Switch.css.ts.vanilla-CVe04kwi.css";
 //#region src/switch/Switch.css.ts
 var control = recipeRuntime({
 	base: [{
 		display: "grid",
 		rounded: "full"
-	}, "mv78ok"],
+	}, "t2bpr4"],
 	variants: { size: {
-		md: [{ mt: "2" }, "_1l5e9sq"],
-		lg: ["_1jxb08g"]
+		md: [{ mt: "2" }, "_1t574s2"],
+		lg: ["_18wiz17"]
 	} }
 });
-var input = recipeRuntime({ base: "hqplcg" });
-var root = recipeRuntime({ base: ["_1lvk8pl", "ld0gtv"] });
+var input = recipeRuntime({ base: "z1u4p8" });
+var root = recipeRuntime({ base: ["q7eng", "wofjr"] });
 var thumb = recipeRuntime({ base: [{
 	display: "block",
 	rounded: "full",
 	transition: "all"
-}, "_1aiqfgl"] });
+}, "_1o0do9b"] });
 //#endregion
 export { control, input, root, thumb };

package/dist/esm/packages/react/src/table/Table-css.js

@@ -1,16 +1,16 @@
 import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
-import "./../../../../assets/layers.css.ts.vanilla-BdZnAqgW.css";
-import "./../../../../assets/Table.css.ts.vanilla-REfO2UJZ.css";
+import "./../../../../assets/layers.css.ts.vanilla-DD7saQYy.css";
+import "./../../../../assets/Table.css.ts.vanilla-DGtwqUCV.css";
 //#region src/table/Table.css.ts
 var table = recipeRuntime({
 	base: [{
 		color: "fg.default",
 		fontSize: "md",
 		w: "full"
-	}, "_19p8i3u"],
+	}, "ymholh"],
 	variants: { layout: {
-		auto: ["_6fcsx1"],
-		fixed: [{ display: "grid" }, "_7zn5ch"]
+		auto: ["_1boyqzg"],
+		fixed: [{ display: "grid" }, "_1k32k0f"]
 	} }
 });
 var wrapper = recipeRuntime({ base: [{
@@ -20,6 +20,6 @@ var wrapper = recipeRuntime({ base: [{
 	maxW: "full",
 	overflow: "auto",
 	rounded: "xl"
-}, "hnziiv"] });
+}, "_1qcgtg0"] });
 //#endregion
 export { table, wrapper };

package/dist/esm/packages/react/src/table/TableBody-css.js

@@ -1,7 +1,7 @@
 import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
-import "./../../../../assets/layers.css.ts.vanilla-BdZnAqgW.css";
-import "./../../../../assets/TableBody.css.ts.vanilla-BY9k29hi.css";
+import "./../../../../assets/layers.css.ts.vanilla-DD7saQYy.css";
+import "./../../../../assets/TableBody.css.ts.vanilla-nJgkImXm.css";
 //#region src/table/TableBody.css.ts
-var body = recipeRuntime({ base: ["_1x42g41"] });
+var body = recipeRuntime({ base: ["_1jvt3c2"] });
 //#endregion
 export { body };

package/dist/esm/packages/react/src/table/TableCell-css.js

@@ -1,16 +1,16 @@
 import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
-import "./../../../../assets/layers.css.ts.vanilla-BdZnAqgW.css";
-import "./../../../../assets/TableRow.css.ts.vanilla-LHrzTC_I.css";
-import "./../../../../assets/TableCell.css.ts.vanilla-D1VISlx3.css";
+import "./../../../../assets/layers.css.ts.vanilla-DD7saQYy.css";
+import "./../../../../assets/TableRow.css.ts.vanilla-BIqEL9Oi.css";
+import "./../../../../assets/TableCell.css.ts.vanilla-BeZAb_AO.css";
 //#region src/table/TableCell.css.ts
 var cell = recipeRuntime({
 	base: [{
 		borderColor: "border.tertiary",
 		p: "16"
-	}, "_1wumgd7"],
+	}, "_1wwo3lz"],
 	variants: { pinned: {
-		false: "xyzsdv",
-		true: "av39ei"
+		false: "_1kzheq5",
+		true: "oiuz6l"
 	} }
 });
 //#endregion

package/dist/esm/packages/react/src/table/TableHeader-css.js

@@ -1,10 +1,10 @@
 import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
-import "./../../../../assets/layers.css.ts.vanilla-BdZnAqgW.css";
-import "./../../../../assets/TableHeader.css.ts.vanilla-BH-kdOPH.css";
+import "./../../../../assets/layers.css.ts.vanilla-DD7saQYy.css";
+import "./../../../../assets/TableHeader.css.ts.vanilla-CuyVR2YY.css";
 //#region src/table/TableHeader.css.ts
 var header = recipeRuntime({ variants: { pinned: {
 	false: {},
-	true: "_5cq16n"
+	true: "q5squr"
 } } });
 //#endregion
 export { header };

package/dist/esm/packages/react/src/table/TableHeaderCell-css.js

@@ -1,12 +1,12 @@
 import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
-import "./../../../../assets/layers.css.ts.vanilla-BdZnAqgW.css";
-import "./../../../../assets/TableHeaderCell.css.ts.vanilla-ytyyVXvG.css";
+import "./../../../../assets/layers.css.ts.vanilla-DD7saQYy.css";
+import "./../../../../assets/TableHeaderCell.css.ts.vanilla-CDZgDleI.css";
 //#region src/table/TableHeaderCell.css.ts
 var cell = recipeRuntime({
-	base: [{ borderColor: "border.tertiary" }, "_1m2f76f"],
+	base: [{ borderColor: "border.tertiary" }, "_1u2uo0f"],
 	variants: { pinned: {
-		false: "xt2uqa",
-		true: "_1h39o8a"
+		false: "wzvpuy",
+		true: "zj669z"
 	} }
 });
 var content = recipeRuntime({ base: [{
@@ -19,6 +19,6 @@ var content = recipeRuntime({ base: [{
 	fontWeight: "400",
 	size: "full",
 	textTransform: "uppercase"
-}, "_4lvai5"] });
+}, "_4hc4ht"] });
 //#endregion
 export { cell, content };

package/dist/esm/packages/react/src/table/TableRow-css.js

@@ -1,14 +1,14 @@
 import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
-import "./../../../../assets/layers.css.ts.vanilla-BdZnAqgW.css";
-import "./../../../../assets/TableRow.css.ts.vanilla-LHrzTC_I.css";
+import "./../../../../assets/layers.css.ts.vanilla-DD7saQYy.css";
+import "./../../../../assets/TableRow.css.ts.vanilla-BIqEL9Oi.css";
 //#region src/table/TableRow.css.ts
 var row = recipeRuntime({ base: [
-	"_1hv9v6n",
+	"sh7f2y",
 	{
 		transition: "colors",
 		w: "full"
 	},
-	"slk42c"
+	"_19xqtco"
 ] });
 //#endregion
 export { row };

package/dist/esm/packages/react/src/tabs/Tabs-css.js

@@ -1,7 +1,7 @@
 import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
-import "./../../../../assets/layers.css.ts.vanilla-BdZnAqgW.css";
-import "./../../../../assets/Tabs.css.ts.vanilla-CVHcRocO.css";
+import "./../../../../assets/layers.css.ts.vanilla-DD7saQYy.css";
+import "./../../../../assets/Tabs.css.ts.vanilla-CkAPqfaj.css";
 //#region src/tabs/Tabs.css.ts
-var tabs = recipeRuntime({ base: [{ display: "flex" }, "_1fd4c29"] });
+var tabs = recipeRuntime({ base: [{ display: "flex" }, "f0oypz"] });
 //#endregion
 export { tabs };

package/dist/esm/packages/react/src/tabs/TabsList-css.js

@@ -1,10 +1,10 @@
 import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
-import "./../../../../assets/layers.css.ts.vanilla-BdZnAqgW.css";
-import "./../../../../assets/TabsList.css.ts.vanilla-BrAOJvF3.css";
+import "./../../../../assets/layers.css.ts.vanilla-DD7saQYy.css";
+import "./../../../../assets/TabsList.css.ts.vanilla-5mv0FUYL.css";
 //#region src/tabs/TabsList.css.ts
 var list = recipeRuntime({ base: [{
 	borderColor: "border.tertiary",
 	display: "flex"
-}, "_150szp8"] });
+}, "_117gf5p"] });
 //#endregion
 export { list };

package/dist/esm/packages/react/src/tabs/TabsTrigger-css.js

@@ -1,6 +1,6 @@
 import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
-import "./../../../../assets/layers.css.ts.vanilla-BdZnAqgW.css";
-import "./../../../../assets/TabsTrigger.css.ts.vanilla-0xMa8Rzm.css";
+import "./../../../../assets/layers.css.ts.vanilla-DD7saQYy.css";
+import "./../../../../assets/TabsTrigger.css.ts.vanilla-Byjb-kVJ.css";
 //#region src/tabs/TabsTrigger.css.ts
 var content = recipeRuntime({ base: [{
 	gap: "8",
@@ -8,9 +8,9 @@ var content = recipeRuntime({ base: [{
 	py: "6",
 	rounded: "sm",
 	transition: "colors"
-}, "_1jl0a5s"] });
+}, "_6yzr07"] });
 var trigger = recipeRuntime({ base: [
-	"u6m2ps",
+	"_137fuwa",
 	{
 		flex: ["1", "initial"],
 		fontSize: "md",
@@ -18,7 +18,7 @@ var trigger = recipeRuntime({ base: [
 		py: "4",
 		transition: "colors"
 	},
-	"l9vlze"
+	"_1810evt"
 ] });
 //#endregion
 export { content, trigger };

package/dist/esm/packages/react/src/text/Text-css.js

@@ -1,38 +1,38 @@
 import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
-import "./../../../../assets/layers.css.ts.vanilla-BdZnAqgW.css";
-import "./../../../../assets/Text.css.ts.vanilla-CgRvbJs-.css";
+import "./../../../../assets/layers.css.ts.vanilla-DD7saQYy.css";
+import "./../../../../assets/Text.css.ts.vanilla-DBQsArQA.css";
 //#region src/text/Text.css.ts
 var text = recipeRuntime(function() {
 	var x = { variants: {
 		lineClamp: {
 			"1": [
 				{ overflow: "hidden" },
-				"zrcod7",
-				"_87c81s",
-				"vpwxqk"
+				"_1ozbq7x",
+				"_1tqt4ba",
+				"_3u7533"
 			],
 			"2": [
 				void 0,
-				"zrcod7",
-				"_87c81s",
-				"tejpdi"
+				"_1ozbq7x",
+				"_1tqt4ba",
+				"ujd1dk"
 			],
 			"3": [
 				void 0,
-				"zrcod7",
-				"_87c81s",
-				"q1i9uj"
+				"_1ozbq7x",
+				"_1tqt4ba",
+				"ejh6sm"
 			],
 			"4": [
 				void 0,
-				"zrcod7",
-				"_87c81s",
-				"u2tfpw"
+				"_1ozbq7x",
+				"_1tqt4ba",
+				"_1d2yoxu"
 			]
 		},
 		truncate: { true: [
 			void 0,
-			"zrcod7",
+			"_1ozbq7x",
 			{ whiteSpace: "nowrap" }
 		] }
 	} };

package/dist/esm/packages/react/src/textarea/Textarea-css.js

@@ -1,7 +1,7 @@
 import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
-import "./../../../../assets/layers.css.ts.vanilla-BdZnAqgW.css";
-import "./../../../../assets/Textarea.css.ts.vanilla-B_RF2EL-.css";
+import "./../../../../assets/layers.css.ts.vanilla-DD7saQYy.css";
+import "./../../../../assets/Textarea.css.ts.vanilla-BI8roE3h.css";
 //#region src/textarea/Textarea.css.ts
-var addon = recipeRuntime({ base: "_1bt76oo" });
+var addon = recipeRuntime({ base: "xn5mlk" });
 //#endregion
 export { addon };

package/dist/esm/packages/react/src/textarea/TextareaAutosize-css.js

@@ -1,10 +1,10 @@
 import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
-import "./../../../../assets/layers.css.ts.vanilla-BdZnAqgW.css";
-import "./../../../../assets/TextareaAutosize.css.ts.vanilla-BkIFUR0M.css";
+import "./../../../../assets/layers.css.ts.vanilla-DD7saQYy.css";
+import "./../../../../assets/TextareaAutosize.css.ts.vanilla-OR0t62cc.css";
 //#region src/textarea/TextareaAutosize.css.ts
-var shadow = recipeRuntime({ base: ["_17k34v0", "_7q8bh0"] });
+var shadow = recipeRuntime({ base: ["_1lfqror", "f819gb"] });
 var textarea = recipeRuntime({
-	base: ["_17k34v0", "_1avwbhj"],
+	base: ["_1lfqror", "_15p9rhk"],
 	variants: { resize: {
 		auto: { overflow: "hidden" },
 		none: {},
@@ -19,16 +19,16 @@ var wrapper = recipeRuntime({
 	},
 	variants: {
 		maxRows: {
-			"1": ["_1o4498c", "_1o159zq"],
-			"2": ["_1o4498c", "teslnn"],
-			"3": ["_1o4498c", "_11yrres"],
-			"4": ["_1o4498c", "axsflq"],
-			"5": ["_1o4498c", "xc8dug"]
+			"1": ["_1wngtio", "uc35z7"],
+			"2": ["_1wngtio", "untkxa"],
+			"3": ["_1wngtio", "e4kjsw"],
+			"4": ["_1wngtio", "_3k4j9r"],
+			"5": ["_1wngtio", "_1gngya8"]
 		},
 		resize: {
 			auto: {},
 			none: {},
-			vertical: "_15kz899"
+			vertical: "lzmoue"
 		}
 	}
 });

package/dist/esm/packages/react/src/theme-provider/ThemeProvider.js

@@ -1,4 +1,6 @@
 "use client";
+import { mapValues } from "../utils/mapValues.js";
+import { rem } from "../utils/rem.js";
 import { PortalProvider } from "../portal/PortalContext.js";
 import { theme as theme$1 } from "../layers/layers-css.js";
 import { useEffect, useRef, useState } from "react";
@@ -11,6 +13,16 @@ import { assignInlineVars } from "@vanilla-extract/dynamic";
 */
 const lightColors = Object.fromEntries(Object.entries(tokens.colors).map(([k, v]) => [k, v.slice(v.indexOf("(") + 1, v.indexOf(","))]));
 /**
+* `screens` stays in plain rem since breakpoints feed media queries.
+*/
+const scaledTokens = {
+	...tokens,
+	borderRadius: mapValues(tokens.borderRadius, rem),
+	fontSize: mapValues(tokens.fontSize, (value) => mapValues(value, rem)),
+	maxSize: mapValues(tokens.maxSize, rem),
+	size: mapValues(tokens.size, rem)
+};
+/**
 * Provider component for theme tokens and styles. This is included in
 * AxiomProvider by default - you only need to use this component directly for
 * advanced customization.
@@ -32,8 +44,9 @@ function ThemeProvider({ children }) {
 			children: `
         @layer ${theme$1} {
           ${selector} {
+            --ax-styles-scale: 1rem;
             ${assignInlineVars(theme, {
-				...tokens,
+				...scaledTokens,
 				colors: lightColors
 			})}
           }

package/dist/esm/packages/react/src/toast/Toast-css.js

@@ -1,16 +1,16 @@
 import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
-import "./../../../../assets/layers.css.ts.vanilla-BdZnAqgW.css";
-import "./../../../../assets/ToastProvider.css.ts.vanilla-ZX-lxPyx.css";
-import "./../../../../assets/Toast.css.ts.vanilla-Bjym43Ho.css";
+import "./../../../../assets/layers.css.ts.vanilla-DD7saQYy.css";
+import "./../../../../assets/ToastProvider.css.ts.vanilla-CCRUgN9W.css";
+import "./../../../../assets/Toast.css.ts.vanilla-BOsGYVhv.css";
 //#region src/toast/Toast.css.ts
 var icon = recipeRuntime({ base: [{
 	alignSelf: "start",
 	mt: "4"
-}, "_1ay3auh"] });
-var offsetVar = "var(--c91f37)";
+}, "ebo8r2"] });
+var offsetVar = "var(--ua5c89)";
 var root = recipeRuntime({
 	base: [
-		"_16riy2l",
+		"_18pzx8j",
 		{
 			alignItems: "center",
 			bg: "bg.default.inverse",
@@ -25,14 +25,14 @@ var root = recipeRuntime({
 			shadow: "md",
 			w: ["full", "max"]
 		},
-		"var35k"
+		"otmrxl"
 	],
 	variants: { intent: {
-		danger: "_6omhjt",
-		information: "_1i4a4bh",
-		neutral: "_5qkdkz",
-		success: "_3gpla3",
-		warning: "ojtjc3"
+		danger: "e822mn",
+		information: "xg4qpk",
+		neutral: "_13ycvry",
+		success: "_1tjj68h",
+		warning: "_1lzjy5j"
 	} }
 });
 //#endregion

package/dist/esm/packages/react/src/toast/ToastProvider-css.js

@@ -1,6 +1,6 @@
 import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
-import "./../../../../assets/layers.css.ts.vanilla-BdZnAqgW.css";
-import "./../../../../assets/ToastProvider.css.ts.vanilla-ZX-lxPyx.css";
+import "./../../../../assets/layers.css.ts.vanilla-DD7saQYy.css";
+import "./../../../../assets/ToastProvider.css.ts.vanilla-CCRUgN9W.css";
 var viewport = recipeRuntime({
 	base: [{
 		flexDirection: "column",
@@ -11,14 +11,14 @@ var viewport = recipeRuntime({
 		p: "24",
 		w: ["full", "384"],
 		z: "toast"
-	}, "_1ffiljj"],
+	}, "_1rmvnzs"],
 	variants: { position: {
-		bottom: "_1xdslm5",
-		"bottom-left": "ml9peb",
-		"bottom-right": ["right-scroll-bar-position", "_65tfnb"],
-		top: "kzrin9",
-		"top-left": "_1ymseq6",
-		"top-right": ["right-scroll-bar-position", "_7x4v8u"]
+		bottom: "z2r1bb",
+		"bottom-left": "_7yo9sh",
+		"bottom-right": ["right-scroll-bar-position", "_1p5e1wu"],
+		top: "p3k96u",
+		"top-left": "_18beuru",
+		"top-right": ["right-scroll-bar-position", "a6k5mn"]
 	} }
 });
 //#endregion

package/dist/esm/packages/react/src/toast/ToastTitle-css.js

@@ -1,7 +1,7 @@
 import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
-import "./../../../../assets/layers.css.ts.vanilla-BdZnAqgW.css";
-import "./../../../../assets/ToastTitle.css.ts.vanilla-BcP4VmAw.css";
+import "./../../../../assets/layers.css.ts.vanilla-DD7saQYy.css";
+import "./../../../../assets/ToastTitle.css.ts.vanilla-BnB_RN4-.css";
 //#region src/toast/ToastTitle.css.ts
-var title = recipeRuntime({ base: [{ flex: "1" }, "_17h3xeq"] });
+var title = recipeRuntime({ base: [{ flex: "1" }, "ni30f0"] });
 //#endregion
 export { title };

package/dist/esm/packages/react/src/toggle-input/ToggleInput-css.js

@@ -1,16 +1,16 @@
 import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
-import "./../../../../assets/layers.css.ts.vanilla-BdZnAqgW.css";
-import "./../../../../assets/AvatarGroup.css.ts.vanilla-hJyKbxYK.css";
-import "./../../../../assets/ToggleInput.css.ts.vanilla-BF4JLCYy.css";
+import "./../../../../assets/layers.css.ts.vanilla-DD7saQYy.css";
+import "./../../../../assets/AvatarGroup.css.ts.vanilla-BKGbg4bv.css";
+import "./../../../../assets/ToggleInput.css.ts.vanilla-eOzUU8G3.css";
 //#region src/toggle-input/ToggleInput.css.ts
 var toggleInput = recipeRuntime({ base: [
-	"sq73gz",
+	"_1igrvzb",
 	{
 		alignItems: "start",
 		display: "inline-flex",
 		gap: "8"
 	},
-	"_1y9n6pt"
+	"ykloe6"
 ] });
 //#endregion
 export { toggleInput };

package/dist/esm/packages/react/src/toggle-input/ToggleInputControl-css.js

@@ -1,9 +1,9 @@
 import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
-import "./../../../../assets/layers.css.ts.vanilla-BdZnAqgW.css";
-import "./../../../../assets/AvatarGroup.css.ts.vanilla-hJyKbxYK.css";
-import "./../../../../assets/ToggleInput.css.ts.vanilla-BF4JLCYy.css";
-import "./../../../../assets/ToggleInputControl.css.ts.vanilla-Blw55uI3.css";
+import "./../../../../assets/layers.css.ts.vanilla-DD7saQYy.css";
+import "./../../../../assets/AvatarGroup.css.ts.vanilla-BKGbg4bv.css";
+import "./../../../../assets/ToggleInput.css.ts.vanilla-eOzUU8G3.css";
+import "./../../../../assets/ToggleInputControl.css.ts.vanilla-kIR9dP2o.css";
 //#region src/toggle-input/ToggleInputControl.css.ts
-var control = recipeRuntime({ base: ["ao7fmz"] });
+var control = recipeRuntime({ base: ["umzk4j"] });
 //#endregion
 export { control };

package/dist/esm/packages/react/src/toggle-input/ToggleInputHiddenInput-css.js

@@ -1,6 +1,6 @@
-import "./../../../../assets/layers.css.ts.vanilla-BdZnAqgW.css";
-import "./../../../../assets/AvatarGroup.css.ts.vanilla-hJyKbxYK.css";
+import "./../../../../assets/layers.css.ts.vanilla-DD7saQYy.css";
+import "./../../../../assets/AvatarGroup.css.ts.vanilla-BKGbg4bv.css";
 //#region src/toggle-input/ToggleInputHiddenInput.css.ts
-var className = "u2xpat";
+var className = "_724933";
 //#endregion
 export { className };

package/dist/esm/packages/react/src/tooltip/TooltipContent-css.js

@@ -1,5 +1,5 @@
 import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
-import "./../../../../assets/layers.css.ts.vanilla-BdZnAqgW.css";
+import "./../../../../assets/layers.css.ts.vanilla-DD7saQYy.css";
 //#region src/tooltip/TooltipContent.css.ts
 var content = recipeRuntime({
 	base: [{

package/dist/esm/packages/react/src/transition/Transition-css.js

@@ -1,13 +1,13 @@
 import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
-import "./../../../../assets/layers.css.ts.vanilla-BdZnAqgW.css";
-import "./../../../../assets/Transition.css.ts.vanilla-BQb8advB.css";
+import "./../../../../assets/layers.css.ts.vanilla-DD7saQYy.css";
+import "./../../../../assets/Transition.css.ts.vanilla-StzZ0_r9.css";
 //#region src/transition/Transition.css.ts
 var transition = recipeRuntime({
-	base: "_1x8c36u",
+	base: "_1wse07q",
 	variants: { duration: {
-		sm: "_7bsygh",
-		md: "hgi042",
-		lg: "_13uzj12"
+		sm: "_1gdi5zg",
+		md: "o7eoqf",
+		lg: "_33ldh9"
 	} }
 });
 //#endregion

package/dist/esm/packages/react/src/utils/rem.js

@@ -0,0 +1,13 @@
+//#region src/utils/rem.ts
+/**
+* `--ax-styles-scale` defaults to `1rem` in ThemeProvider. Consumers can set it
+* (e.g. `16px`) on the same `:root` or `:host` as the theme to decouple sizing
+* from the page's root font size. Media queries can't read custom properties,
+* so breakpoints must use plain `rem` instead.
+*/
+const rem = (value) => {
+	const units = value.endsWith("px") ? parseFloat(value) / 16 : value.endsWith("rem") ? parseFloat(value) : null;
+	return units === null ? value : `calc(${parseFloat(units.toFixed(4))} * var(--ax-styles-scale))`;
+};
+//#endregion
+export { rem };

package/package.json

@@ -7,7 +7,7 @@
     "url": "git+https://github.com/optimizely-axiom/optiaxiom.git"
   },
   "type": "module",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "files": [
     "dist/**",
     "LICENSE"
@@ -46,7 +46,7 @@
     "@dnd-kit/helpers": "^0.1.21",
     "@dnd-kit/react": "^0.1.21",
     "@optiaxiom/globals": "^3.0.7",
-    "@optiaxiom/icons": "^1.7.0",
+    "@optiaxiom/icons": "^1.7.1",
     "@radix-ui/react-arrow": "^1.1.7",
     "@radix-ui/react-avatar": "^1.1.10",
     "@radix-ui/react-collapsible": "^1.1.12",

package/dist/cjs/assets/Alert.css.ts.vanilla-BGgJNRGn.css

@@ -1,6 +0,0 @@
-@layer optiaxiom.wxbe8u;
-@layer optiaxiom.wxbe8u {
-  ._1ipe76j {
-    min-height: var(--ax-size-sm);
-  }
-}

package/dist/cjs/assets/AlertDialogContent.css.ts.vanilla-Cn6JwZVL.css

@@ -1,30 +0,0 @@
-@layer optiaxiom.wxbe8u;
-@layer optiaxiom.wxbe8u {
-  .lk4jip {
-    opacity: 0;
-  }
-  ._680pr9 {
-    inset: 0;
-    position: fixed;
-  }
-  ._1j0car6 {
-    max-height: 50dvh;
-    max-width: calc(100dvw - 2 * 24px);
-    transform: 
-      translateY(calc(1rem * var(--zxzwik)))
-      scale(calc(1 - 0.06 * var(--zxzwik)))
-    ;
-  }
-  ._1j0car6:focus-visible {
-    outline: none;
-  }
-  ._1a3rq17 {
-    width: 400px;
-  }
-  ._1yq3jvt {
-    width: 600px;
-  }
-  ._1o2nwxx {
-    width: 800px;
-  }
-}

package/dist/cjs/assets/AlertDialogHeader.css.ts.vanilla-iKZV6BQP.css

@@ -1,7 +0,0 @@
-@layer optiaxiom.wxbe8u;
-@layer optiaxiom.wxbe8u {
-  ._1tkyguo {
-    position: sticky;
-    top: 0;
-  }
-}