@optiaxiom/react 3.1.1 → 3.1.3

package/dist/esm/packages/react/src/card/CardHeader-css.js

@@ -1,6 +1,6 @@
 import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
-import "./../../../../assets/src/layers/layers.css.ts.vanilla-DRoTvdmB.css";
-import "./../../../../assets/src/card/CardHeader.css.ts.vanilla-72-4Dzo-.css";
+import "./../../../../assets/src/layers/layers.css.ts.vanilla-BEh1Y_X9.css";
+import "./../../../../assets/src/card/CardHeader.css.ts.vanilla-DySSvmAO.css";
 //#region src/card/CardHeader.css.ts
 var addon = recipeRuntime({
 	base: [{
@@ -8,15 +8,15 @@ var addon = recipeRuntime({
 		gap: "8"
 	}],
 	variants: { slot: {
-		after: "_1tlbo5a",
-		before: "_1wq3oiw"
+		after: "lmgpm8",
+		before: "skmgig"
 	} }
 });
-var content = recipeRuntime({ base: [{ flex: "1" }, "fp22x4"] });
+var content = recipeRuntime({ base: [{ flex: "1" }, "_5d06f"] });
 var header = recipeRuntime({ base: [{
 	alignSelf: "stretch",
 	gap: "12",
 	justifyContent: "space-between"
-}, "_1ph0i9g"] });
+}, "_10pf82s"] });
 //#endregion
 export { addon, content, header };

package/dist/esm/packages/react/src/card/CardImage-css.js

@@ -1,5 +1,5 @@
 import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
-import "./../../../../assets/src/layers/layers.css.ts.vanilla-DRoTvdmB.css";
+import "./../../../../assets/src/layers/layers.css.ts.vanilla-BEh1Y_X9.css";
 //#region src/card/CardImage.css.ts
 var image = recipeRuntime({ base: {
 	objectFit: "cover",

package/dist/esm/packages/react/src/card/CardPreview-css.js

@@ -1,15 +1,15 @@
 import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
-import "./../../../../assets/src/layers/layers.css.ts.vanilla-DRoTvdmB.css";
-import "./../../../../assets/src/card/CardPreview.css.ts.vanilla-DttQz5Ra.css";
+import "./../../../../assets/src/layers/layers.css.ts.vanilla-BEh1Y_X9.css";
+import "./../../../../assets/src/card/CardPreview.css.ts.vanilla-Di44Ry5e.css";
 //#region src/card/CardPreview.css.ts
 var overlay = recipeRuntime({ base: [{
 	display: "flex",
 	flexWrap: "wrap"
-}, "pewxc7"] });
+}, "x4zuhx"] });
 var preview = recipeRuntime({ base: [{
 	alignSelf: "stretch",
 	display: "grid",
 	placeItems: "center"
-}, "_1u7fsb3"] });
+}, "kdvx6u"] });
 //#endregion
 export { overlay, preview };

package/dist/esm/packages/react/src/checkbox/CheckboxControl-css.js

@@ -1,21 +1,21 @@
 import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
-import "./../../../../assets/src/layers/layers.css.ts.vanilla-DRoTvdmB.css";
-import "./../../../../assets/src/button/ButtonGroup.css.ts.vanilla-DTAA6K_o.css";
-import "./../../../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-BvhzuMj7.css";
-import "./../../../../assets/src/checkbox/CheckboxControl.css.ts.vanilla-BEXmlS1b.css";
+import "./../../../../assets/src/layers/layers.css.ts.vanilla-BEh1Y_X9.css";
+import "./../../../../assets/src/avatar/AvatarGroup.css.ts.vanilla-BGcUazpt.css";
+import "./../../../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-3r8xRmjD.css";
+import "./../../../../assets/src/checkbox/CheckboxControl.css.ts.vanilla-Ck7HL8Rb.css";
 //#region src/checkbox/CheckboxControl.css.ts
 var control = recipeRuntime({
 	base: [{
 		display: "grid",
 		rounded: "md",
 		size: "sm"
-	}, "h9omuq"],
+	}, "_1qnp5vx"],
 	variants: { shift: {
 		false: {},
-		true: "fcw3hp"
+		true: "_8f8jeo"
 	} }
 });
-var icon = recipeRuntime({ base: [{ transition: "all" }, "_1gd1zl2"] });
+var icon = recipeRuntime({ base: [{ transition: "all" }, "_180ffrp"] });
 var indicator = recipeRuntime({ base: [{
 	alignItems: "center",
 	display: "flex",

package/dist/esm/packages/react/src/clock/Clock.js

@@ -1,5 +1,6 @@
 "use client";
 import { Group } from "../group/Group.js";
+import { useLocaleContext } from "../locale/LocaleContext.js";
 import { Select } from "../select/Select.js";
 import { SelectContent } from "../select/SelectContent.js";
 import { SelectTrigger } from "../select/SelectTrigger.js";
@@ -9,6 +10,8 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useControllableState } from "@radix-ui/react-use-controllable-state";
 //#region src/clock/Clock.tsx
 const Clock = forwardRef(({ defaultValue = "", onValueChange, step = "60", value: valueProp, ...props }, ref) => {
+	const { locale } = useLocaleContext("@optiaxiom/react/Clock");
+	const hour24 = is24Hour(locale);
 	const [value, setValue] = useControllableState({
 		caller: "@optiaxiom/react/Clock",
 		defaultProp: defaultValue,
@@ -16,8 +19,8 @@ const Clock = forwardRef(({ defaultValue = "", onValueChange, step = "60", value
 		prop: valueProp
 	});
 	const stepInMinutes = (typeof step === "string" ? parseInt(step) : step) / 60;
-	const parsed = parse(value, stepInMinutes);
-	const hours = is24Hour ? range(0, 23).map((hour) => hour.padStart(2, "0")) : range(1, 12);
+	const parsed = parse(hour24, value, stepInMinutes);
+	const hours = hour24 ? range(0, 23).map((hour) => hour.padStart(2, "0")) : range(1, 12);
 	const minutes = range(0, 59, stepInMinutes).map((minute) => minute.padStart(2, "0"));
 	const periods = ["AM", "PM"];
 	return /* @__PURE__ */ jsxs(Group, {
@@ -26,12 +29,12 @@ const Clock = forwardRef(({ defaultValue = "", onValueChange, step = "60", value
 		...props,
 		children: [
 			/* @__PURE__ */ jsxs(Select, {
-				onValueChange: (hour) => hour && setValue(format({
+				onValueChange: (hour) => hour && setValue(format(hour24, {
 					...parsed,
 					hour
 				})),
 				options: hours.map((hour) => ({
-					label: toLabel(hour),
+					label: toLabel(locale, hour),
 					value: hour
 				})),
 				value: parsed.hour,
@@ -42,13 +45,13 @@ const Clock = forwardRef(({ defaultValue = "", onValueChange, step = "60", value
 				}), /* @__PURE__ */ jsx(SelectContent, {})]
 			}),
 			/* @__PURE__ */ jsxs(Select, {
-				onValueChange: (minute) => minute && setValue(format({
+				onValueChange: (minute) => minute && setValue(format(hour24, {
 					...parsed,
 					minute
 				})),
 				options: minutes.map((minute) => ({
 					ariaLabel: `${parseInt(minute)}`,
-					label: toLabel(minute),
+					label: toLabel(locale, minute),
 					value: minute
 				})),
 				value: parsed.minute,
@@ -58,13 +61,13 @@ const Clock = forwardRef(({ defaultValue = "", onValueChange, step = "60", value
 					placeholder: "MM"
 				}), /* @__PURE__ */ jsx(SelectContent, {})]
 			}),
-			!is24Hour && /* @__PURE__ */ jsxs(Select, {
-				onValueChange: (meridiem) => (meridiem === "AM" || meridiem === "PM") && setValue(format({
+			!hour24 && /* @__PURE__ */ jsxs(Select, {
+				onValueChange: (meridiem) => (meridiem === "AM" || meridiem === "PM") && setValue(format(hour24, {
 					...parsed,
 					meridiem
 				})),
 				options: periods.map((period) => ({
-					label: toMeridiemLabel(period),
+					label: toMeridiemLabel(locale, period),
 					value: period
 				})),
 				value: parsed.meridiem,

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

@@ -1,30 +1,40 @@
+import { memoize } from "../utils/memoize.js";
 //#region src/clock/utils.ts
-const language = typeof navigator !== "undefined" ? navigator.language : "en-US";
-const locale = new Intl.Locale(language);
-const is24Hour = ("getHourCycles" in locale && typeof locale.getHourCycles === "function" ? locale.getHourCycles() : ["h12"])[0] === "h23";
-const numberFormatter = new Intl.NumberFormat(language, { useGrouping: false });
+/**
+* `Intl` construction is expensive, so we memoize per locale. Values are stable
+* for a given locale.
+*/
+const localeData = memoize((locale) => {
+	const intlLocale = new Intl.Locale(locale);
+	const hourCycles = "getHourCycles" in intlLocale && typeof intlLocale.getHourCycles === "function" ? intlLocale.getHourCycles() : ["h12"];
+	return {
+		dayPeriodFormatter: new Intl.DateTimeFormat(locale, {
+			hour: "numeric",
+			hour12: true
+		}),
+		is24Hour: hourCycles[0] === "h23",
+		numberFormatter: new Intl.NumberFormat(locale, { useGrouping: false })
+	};
+});
+const is24Hour = (locale) => localeData(locale).is24Hour;
 /**
 * Transliterates the digits of an already-formatted numeric string (e.g.
-* `"05"`) into the browser locale's numbering system (e.g. `"०५"` for `mr-IN`),
+* `"05"`) into the locale's numbering system (e.g. `"०५"` for `mr-IN`),
 * preserving any existing padding. This is digit transliteration rather than a
 * date format because the clock's value is a `HH:mm` string, not a `Date` — the
 * underlying Latin value stays unchanged so the time contract is preserved.
 */
-const toLabel = (value) => value.split("").map((digit) => numberFormatter.format(Number(digit))).join("");
-const dayPeriodFormatter = new Intl.DateTimeFormat(language, {
-	hour: "numeric",
-	hour12: true
-});
+const toLabel = (locale, value) => value.split("").map((digit) => localeData(locale).numberFormatter.format(Number(digit))).join("");
 /**
 * Returns the localized AM/PM label — date-fns's `aaa` token, via `Intl`. Yields
 * `"ص"`/`"م"` for `ar`, but still `"AM"`/`"PM"` for locales like `mr` that use
 * them by convention.
 */
-const toMeridiemLabel = (meridiem) => dayPeriodFormatter.formatToParts(new Date(2025, 0, 1, meridiem === "AM" ? 9 : 21)).find((part) => part.type === "dayPeriod")?.value ?? meridiem;
-const format = ({ hour, meridiem, minute }) => {
+const toMeridiemLabel = (locale, meridiem) => localeData(locale).dayPeriodFormatter.formatToParts(new Date(2025, 0, 1, meridiem === "AM" ? 9 : 21)).find((part) => part.type === "dayPeriod")?.value ?? meridiem;
+const format = (is24Hour, { hour, meridiem, minute }) => {
 	return (is24Hour ? hour : ((parseInt(hour) === 12 ? 0 : parseInt(hour)) + (meridiem === "PM" ? 12 : 0)).toString().padStart(2, "0")) + ":" + minute;
 };
-const parse = (value, step = 1) => {
+const parse = (is24Hour, value, step = 1) => {
 	const now = /* @__PURE__ */ new Date();
 	const [hour, minute] = (value ? value : `${now.getHours()}:${now.getMinutes()}`).split(":");
 	return {

package/dist/esm/packages/react/src/code/Code-css.js

@@ -1,7 +1,7 @@
 import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
-import "./../../../../assets/src/layers/layers.css.ts.vanilla-DRoTvdmB.css";
-import "./../../../../assets/src/code/Code.css.ts.vanilla-CeDpLK8a.css";
+import "./../../../../assets/src/layers/layers.css.ts.vanilla-BEh1Y_X9.css";
+import "./../../../../assets/src/code/Code.css.ts.vanilla-C5G3ReS8.css";
 //#region src/code/Code.css.ts
-var code = recipeRuntime({ base: [{ fontWeight: "600" }, "oh7exo"] });
+var code = recipeRuntime({ base: [{ fontWeight: "600" }, "_1e6ufhz"] });
 //#endregion
 export { code };

package/dist/esm/packages/react/src/command/CommandItem-css.js

@@ -1,7 +1,7 @@
 import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
-import "./../../../../assets/src/layers/layers.css.ts.vanilla-DRoTvdmB.css";
-import "./../../../../assets/src/command/CommandItem.css.ts.vanilla-CNh4a3rl.css";
+import "./../../../../assets/src/layers/layers.css.ts.vanilla-BEh1Y_X9.css";
+import "./../../../../assets/src/command/CommandItem.css.ts.vanilla-CpvKc_ps.css";
 //#region src/command/CommandItem.css.ts
-var detail = recipeRuntime({ base: [{ color: "fg.secondary" }, "_1v1w5rg"] });
+var detail = recipeRuntime({ base: [{ color: "fg.secondary" }, "_1abi100"] });
 //#endregion
 export { detail };

package/dist/esm/packages/react/src/cover/Cover-css.js

@@ -1,15 +1,15 @@
 import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
-import "./../../../../assets/src/layers/layers.css.ts.vanilla-DRoTvdmB.css";
-import "./../../../../assets/src/cover/Cover.css.ts.vanilla-DTkW5cH8.css";
+import "./../../../../assets/src/layers/layers.css.ts.vanilla-BEh1Y_X9.css";
+import "./../../../../assets/src/cover/Cover.css.ts.vanilla-BXCeLX0V.css";
 //#region src/cover/Cover.css.ts
 var cover = recipeRuntime({ variants: {
 	disabled: {
-		false: ["_13nf1gt", "dp9mp6"],
+		false: ["bfmdi1", "_13booy3"],
 		true: {}
 	},
 	inset: {
-		false: "pmg3dy",
-		true: "udvxgh"
+		false: "ti3arc",
+		true: "_117116b"
 	}
 } });
 //#endregion

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

@@ -1,39 +1,39 @@
 import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
-import "./../../../../assets/src/layers/layers.css.ts.vanilla-DRoTvdmB.css";
-import "./../../../../assets/src/table/TableRow.css.ts.vanilla-Bw8zZIWn.css";
-import "./../../../../assets/src/data-table/DataTableBody.css.ts.vanilla-BRGCDqf7.css";
+import "./../../../../assets/src/layers/layers.css.ts.vanilla-BEh1Y_X9.css";
+import "./../../../../assets/src/table/TableRow.css.ts.vanilla-BXXfGgvX.css";
+import "./../../../../assets/src/data-table/DataTableBody.css.ts.vanilla-B3qY91Z2.css";
 //#region src/data-table/DataTableBody.css.ts
 var cell = recipeRuntime({
 	base: [{
 		alignItems: "start",
 		display: "flex"
-	}, "wwc4uo"],
+	}, "u9f96a"],
 	variants: {
 		pinned: {
-			left: "nlaln8",
-			right: "_6egdh6"
+			left: "_1ikupm0",
+			right: "r6a4kc"
 		},
 		pinnedType: {
-			body: "_19lnjn5",
+			body: "_11xle34",
 			header: {}
 		},
 		resizable: {
 			false: {},
-			true: "d9jdj8"
+			true: "_592uh2"
 		}
 	}
 });
-var cellOffsetVar = "var(--a4382i)";
-var cellSizeVar = "var(--qek82y)";
-var leftTotalSizeVar = "var(--_22ig5a)";
-var rightTotalSizeVar = "var(--t2om6h)";
+var cellOffsetVar = "var(--l88ogr)";
+var cellSizeVar = "var(--_1st4f5h)";
+var leftTotalSizeVar = "var(--pnod1p)";
+var rightTotalSizeVar = "var(--_1kwq9y7)";
 var root = recipeRuntime({ base: [{
 	display: "flex",
 	flexDirection: "column",
 	maxW: "full",
 	overflow: "hidden",
 	rounded: "lg"
-}, "ov7jol"] });
-var totalSizeVar = "var(--_1dwdwe5)";
+}, "m6dl0x"] });
+var totalSizeVar = "var(--v6iuui)";
 //#endregion
 export { cell, cellOffsetVar, cellSizeVar, leftTotalSizeVar, rightTotalSizeVar, root, totalSizeVar };

package/dist/esm/packages/react/src/data-table/DataTableCheckbox.js

@@ -3,11 +3,11 @@ import { Checkbox } from "../checkbox/Checkbox.js";
 import { useDataTableContext } from "./DataTableContext.js";
 import { useDataTableRowContext } from "./DataTableRowContext.js";
 import { DataTableAction } from "./DataTableAction.js";
-import { useId } from "@radix-ui/react-id";
 import { forwardRef, useEffect, useRef } from "react";
 import clsx from "clsx";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { useComposedRefs } from "@radix-ui/react-compose-refs";
+import { useId as useId$1 } from "@radix-ui/react-id";
 import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
 //#region src/data-table/DataTableCheckbox.tsx
 /**
@@ -16,7 +16,7 @@ import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
 const DataTableCheckbox = forwardRef(({ children, disabled, visible, ...props }, outerRef) => {
 	const { table } = useDataTableContext("@optiaxiom/react/DataTableCheckbox");
 	const { labelId, row, setSelector } = useDataTableRowContext("@optiaxiom/react/DataTableCheckbox");
-	const labelPrefixId = useId();
+	const labelPrefixId = useId$1();
 	const innerRef = useRef(null);
 	const ref = useComposedRefs(innerRef, outerRef);
 	useEffect(() => {

package/dist/esm/packages/react/src/data-table/DataTableExpandableCell.js

@@ -4,10 +4,10 @@ import { Group } from "../group/Group.js";
 import { Button } from "../button/Button.js";
 import { useDataTableRowContext } from "./DataTableRowContext.js";
 import { IconAngleDown, IconChevronRight } from "@optiaxiom/icons";
-import { useId } from "@radix-ui/react-id";
 import "react";
 import clsx from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useId as useId$1 } from "@radix-ui/react-id";
 //#region src/data-table/DataTableExpandableCell.tsx
 /**
 * Table cell component with expandable row functionality.
@@ -16,7 +16,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * @experimental
 */
 function DataTableExpandableCell({ children, getValue, row }) {
-	const labelPrefixId = useId();
+	const labelPrefixId = useId$1();
 	const { labelId } = useDataTableRowContext("@optiaxiom/react/DataTableExpandableCell");
 	return /* @__PURE__ */ jsxs(Group, {
 		alignItems: "start",

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

@@ -1,9 +1,9 @@
 import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
-import "./../../../../assets/src/layers/layers.css.ts.vanilla-DRoTvdmB.css";
-import "./../../../../assets/src/data-table/DataTableFooter.css.ts.vanilla-CqKMXS0g.css";
+import "./../../../../assets/src/layers/layers.css.ts.vanilla-BEh1Y_X9.css";
+import "./../../../../assets/src/data-table/DataTableFooter.css.ts.vanilla-Dt0qIdSx.css";
 //#region src/data-table/DataTableFooter.css.ts
 var addon = recipeRuntime({
-	base: "_7jotqr",
+	base: "_1h8ecfn",
 	variants: { slot: {
 		after: { textAlign: "end" },
 		before: {}

package/dist/esm/packages/react/src/data-table/DataTableFooter.js

@@ -1,16 +1,16 @@
 "use client";
 import { Box } from "../box/Box.js";
-import { Text } from "../text/Text.js";
 import { Group } from "../group/Group.js";
+import { Text } from "../text/Text.js";
 import { useDataTableContext } from "./DataTableContext.js";
 import { Pagination } from "../pagination/Pagination.js";
 import { Select } from "../select/Select.js";
 import { SelectContent } from "../select/SelectContent.js";
 import { SelectTrigger } from "../select/SelectTrigger.js";
 import { addon } from "./DataTableFooter-css.js";
-import { useId } from "@radix-ui/react-id";
 import { forwardRef } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useId as useId$1 } from "@radix-ui/react-id";
 //#region src/data-table/DataTableFooter.tsx
 const DEFAULT_PAGE_SIZES = [
 	"10",
@@ -28,7 +28,7 @@ const DEFAULT_PAGE_SIZES = [
 const DataTableFooter = forwardRef(({ pageSizeOptions = DEFAULT_PAGE_SIZES, showPageSizeOptions, ...props }, ref) => {
 	const { table } = useDataTableContext("@optiaxiom/react/DataTableFooter");
 	const { pagination } = table.getState();
-	const pageSizeId = useId();
+	const pageSizeId = useId$1();
 	return /* @__PURE__ */ jsxs(Group, {
 		alignSelf: "stretch",
 		fontSize: "md",

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

@@ -1,6 +1,6 @@
 import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
-import "./../../../../assets/src/layers/layers.css.ts.vanilla-DRoTvdmB.css";
-import "./../../../../assets/src/data-table/DataTableHeaderCell.css.ts.vanilla-gEEpswiR.css";
+import "./../../../../assets/src/layers/layers.css.ts.vanilla-BEh1Y_X9.css";
+import "./../../../../assets/src/data-table/DataTableHeaderCell.css.ts.vanilla-Dt1Rwub3.css";
 //#region src/data-table/DataTableHeaderCell.css.ts
 var button = recipeRuntime({ base: [{
 	alignItems: "center",
@@ -12,12 +12,12 @@ var button = recipeRuntime({ base: [{
 	textTransform: "uppercase",
 	transition: "colors",
 	w: "full"
-}, "_54kdq2"] });
+}, "_1qlqy6k"] });
 var handle = recipeRuntime({
 	base: [{
 		h: "full",
 		z: "10"
-	}, "_12s0qt7"],
+	}, "_7acfjw"],
 	variants: { resizing: {
 		false: {},
 		true: { borderColor: "border.focus" }
@@ -28,10 +28,10 @@ var icon = recipeRuntime({
 		h: "12",
 		mx: "2",
 		transition: "opacity"
-	}, "_110nywa"],
+	}, "_1mkvem7"],
 	variants: { active: {
-		false: "_1mbmv1g",
-		true: "zpe758"
+		false: "_1ca9s0g",
+		true: "a85h1"
 	} }
 });
 //#endregion

package/dist/esm/packages/react/src/data-table/DataTableRow.js

@@ -3,15 +3,15 @@ import { useEffectEvent } from "../hooks/useEffectEvent.js";
 import { useDataTableContext } from "./DataTableContext.js";
 import { TableRow } from "../table/TableRow.js";
 import { DataTableRowProvider } from "./DataTableRowContext.js";
-import { useId } from "@radix-ui/react-id";
 import { forwardRef, useEffect, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 import { useComposedRefs } from "@radix-ui/react-compose-refs";
+import { useId as useId$1 } from "@radix-ui/react-id";
 //#region src/data-table/DataTableRow.tsx
 const DataTableRow = forwardRef(({ children, index, row, ...props }, outerRef) => {
 	const { highlightedIndex, setHighlightedIndex, table } = useDataTableContext("@optiaxiom/react/DataTableRow");
 	const [subHighlightedIndex, setSubHighlightedIndex] = useState(-1);
-	const labelId = useId();
+	const labelId = useId$1();
 	const innerRef = useRef(null);
 	const ref = useComposedRefs(innerRef, outerRef);
 	useEffect(() => {

package/dist/esm/packages/react/src/date-input/DateInput-css.js

@@ -1,10 +1,10 @@
 import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
-import "./../../../../assets/src/layers/layers.css.ts.vanilla-DRoTvdmB.css";
-import "./../../../../assets/src/date-input/DateInput.css.ts.vanilla-DYp7fILN.css";
+import "./../../../../assets/src/layers/layers.css.ts.vanilla-BEh1Y_X9.css";
+import "./../../../../assets/src/date-input/DateInput.css.ts.vanilla-32smovZF.css";
 //#region src/date-input/DateInput.css.ts
-var clear = recipeRuntime({ base: [{ size: "sm" }, "sixyn2"] });
-var date = recipeRuntime({ base: "_16g3xc2" });
-var input = recipeRuntime({ base: "bw6src" });
-var picker = recipeRuntime({ base: "_1687x90" });
+var clear = recipeRuntime({ base: [{ size: "sm" }, "_1inmutq"] });
+var date = recipeRuntime({ base: "gqscd1" });
+var input = recipeRuntime({ base: "_8e6z8p" });
+var picker = recipeRuntime({ base: "kgjlxa" });
 //#endregion
 export { clear, date, input, picker };

package/dist/esm/packages/react/src/date-input/DateInput.js

@@ -14,12 +14,12 @@ import { Input } from "../input/Input.js";
 import { Calendar } from "../calendar/Calendar.js";
 import { clear, date, input, picker } from "./DateInput-css.js";
 import { IconCalendar, IconXmark } from "@optiaxiom/icons";
-import { useId } from "@radix-ui/react-id";
 import { forwardRef, useRef, useState } from "react";
 import clsx from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useComposedRefs } from "@radix-ui/react-compose-refs";
 import { useControllableState } from "@radix-ui/react-use-controllable-state";
+import { useId as useId$1 } from "@radix-ui/react-id";
 //#region src/date-input/DateInput.tsx
 /**
 * Input field with calendar that lets user enter dates.
@@ -36,7 +36,7 @@ import { useControllableState } from "@radix-ui/react-use-controllable-state";
 */
 const DateInput = forwardRef(({ className, disabled, holiday, max: maxProp, min: minProp, onChange, placeholder, step, type = "date", weekend, ...props }, outerRef) => {
 	const { labelId: fieldLabelId } = useFieldContext("@optiaxiom/react/DateInput");
-	const labelId = useId();
+	const labelId = useId$1();
 	const [open, setOpen] = useState(false);
 	const hasInteractedOutsideRef = useRef(false);
 	const pickerRef = useRef(null);

package/dist/esm/packages/react/src/date-range-picker/DateRangePickerContent-css.js

@@ -1,5 +1,5 @@
 import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
-import "./../../../../assets/src/layers/layers.css.ts.vanilla-DRoTvdmB.css";
+import "./../../../../assets/src/layers/layers.css.ts.vanilla-BEh1Y_X9.css";
 //#region src/date-range-picker/DateRangePickerContent.css.ts
 var panels = recipeRuntime({ base: [{
 	alignItems: "stretch",

package/dist/esm/packages/react/src/date-range-picker/DateRangePickerContent.js

@@ -6,10 +6,10 @@ import { PopoverContent } from "../popover/PopoverContent.js";
 import { Calendar } from "../calendar/Calendar.js";
 import { useDateRangePickerContext } from "./DateRangePickerContext.js";
 import { panels } from "./DateRangePickerContent-css.js";
-import { useId } from "@radix-ui/react-id";
 import { forwardRef } from "react";
 import clsx from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useId as useId$1 } from "@radix-ui/react-id";
 //#region src/date-range-picker/DateRangePickerContent.tsx
 /**
 * @group DateRangePicker
@@ -17,7 +17,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 const DateRangePickerContent = forwardRef(({ addonAfter, addonBefore, "aria-label": ariaLabel, children, holiday, max, min, today, weekend, ...props }, ref) => {
 	const { labelId: fieldLabelId } = useFieldContext("@optiaxiom/react/DateRangePickerContent");
 	const { setFrom, setOpen, setValue, triggerRef, value } = useDateRangePickerContext("@optiaxiom/react/DateRangePickerContent");
-	const labelId = useId();
+	const labelId = useId$1();
 	return /* @__PURE__ */ jsxs(PopoverContent, {
 		"aria-labelledby": clsx(fieldLabelId ?? triggerRef.current?.id, labelId),
 		gap: "8",

package/dist/esm/packages/react/src/date-range-picker/DateRangePickerTrigger.js

@@ -1,29 +1,32 @@
 "use client";
 import { Box } from "../box/Box.js";
+import { memoize } from "../utils/memoize.js";
 import { useFieldLabelTrigger } from "../hooks/useFieldLabelTrigger.js";
+import { useLocaleContext } from "../locale/LocaleContext.js";
 import { PopoverTrigger } from "../popover/PopoverTrigger.js";
 import { useDateRangePickerContext } from "./DateRangePickerContext.js";
 import { IconCalendar } from "@optiaxiom/icons";
-import { useId } from "@radix-ui/react-id";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
 import { useComposedRefs } from "@radix-ui/react-compose-refs";
+import { useId as useId$1 } from "@radix-ui/react-id";
 //#region src/date-range-picker/DateRangePickerTrigger.tsx
-const dateFormatter = new Intl.DateTimeFormat(void 0, {
+const dateFormatterFor = memoize((locale) => new Intl.DateTimeFormat(locale, {
 	day: "numeric",
 	month: "short",
 	year: "numeric"
-});
+}));
 /**
 * @group DateRangePicker
 * @extends Button
 */
 const DateRangePickerTrigger = forwardRef(({ "aria-labelledby": ariaLabelledBy, children, formatRange, placeholder = "Pick a date", ...props }, outerRef) => {
 	const { disabled, triggerRef, value } = useDateRangePickerContext("@optiaxiom/react/DateRangePickerTrigger");
-	const id = useId();
+	const { locale } = useLocaleContext("@optiaxiom/react/DateRangePickerTrigger");
+	const id = useId$1();
 	const ref = useComposedRefs(outerRef, triggerRef);
 	const labelId = useFieldLabelTrigger(triggerRef, ariaLabelledBy);
-	const formatter = formatRange ? { formatRange } : dateFormatter;
+	const formatter = formatRange ? { formatRange } : dateFormatterFor(locale);
 	return /* @__PURE__ */ jsx(PopoverTrigger, {
 		"aria-labelledby": labelId,
 		disabled,

package/dist/esm/packages/react/src/details-panel/DetailsPanel-css.js

@@ -1,6 +1,6 @@
 import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
-import "./../../../../assets/src/layers/layers.css.ts.vanilla-DRoTvdmB.css";
-import "./../../../../assets/src/details-panel/DetailsPanel.css.ts.vanilla-atfUu_qI.css";
+import "./../../../../assets/src/layers/layers.css.ts.vanilla-BEh1Y_X9.css";
+import "./../../../../assets/src/details-panel/DetailsPanel.css.ts.vanilla-gzy4VygP.css";
 //#region src/details-panel/DetailsPanel.css.ts
 var root = recipeRuntime({ base: [{
 	bg: "bg.default",
@@ -9,6 +9,6 @@ var root = recipeRuntime({ base: [{
 	flexDirection: "column",
 	h: "full",
 	overflow: "auto"
-}, "_5ohzvg"] });
+}, "_6lw43k"] });
 //#endregion
 export { root };

package/dist/esm/packages/react/src/details-panel/DetailsPanel.js

@@ -2,10 +2,10 @@
 import { Box } from "../box/Box.js";
 import { root } from "./DetailsPanel-css.js";
 import { DetailsPanelProvider } from "./DetailsPanelContext.js";
-import { useId } from "@radix-ui/react-id";
 import { forwardRef } from "react";
 import { createSlot } from "@radix-ui/react-slot";
 import { jsx } from "react/jsx-runtime";
+import { useId as useId$1 } from "@radix-ui/react-id";
 //#region src/details-panel/DetailsPanel.tsx
 const Slot = createSlot("@optiaxiom/react/DetailsPanel");
 /**
@@ -18,8 +18,8 @@ const Slot = createSlot("@optiaxiom/react/DetailsPanel");
 */
 const DetailsPanel = forwardRef(({ asChild, children, className, ...props }, ref) => {
 	const Comp = asChild ? Slot : "aside";
-	const labelId = useId();
-	const descriptionId = useId();
+	const labelId = useId$1();
+	const descriptionId = useId$1();
 	return /* @__PURE__ */ jsx(DetailsPanelProvider, {
 		descriptionId,
 		labelId,

package/dist/esm/packages/react/src/details-panel/DetailsPanelFooter-css.js

@@ -1,12 +1,12 @@
 import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
-import "./../../../../assets/src/layers/layers.css.ts.vanilla-DRoTvdmB.css";
-import "./../../../../assets/src/details-panel/DetailsPanelFooter.css.ts.vanilla-BniltHwk.css";
+import "./../../../../assets/src/layers/layers.css.ts.vanilla-BEh1Y_X9.css";
+import "./../../../../assets/src/details-panel/DetailsPanelFooter.css.ts.vanilla-BHIePo-e.css";
 //#region src/details-panel/DetailsPanelFooter.css.ts
 var footer = recipeRuntime({ base: [{
 	bg: "bg.default",
 	gap: "8",
 	p: "16",
 	pt: "8"
-}, "px0v4c"] });
+}, "fgf11e"] });
 //#endregion
 export { footer };