@optiaxiom/react 3.1.1 → 3.1.3

package/dist/esm/packages/react/src/button/ButtonRoot-css.js

@@ -1,119 +1,143 @@
 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/button/ButtonRoot.css.ts.vanilla-DstkN7uL.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/button/ButtonRoot.css.ts.vanilla-DD7nw0Ji.css";
 //#region src/button/ButtonRoot.css.ts
-var buttonBase = recipeRuntime({
-	base: [
-		"xkndtx",
-		{
-			alignItems: "center",
-			display: "inline-flex",
-			flexDirection: "row",
-			fontWeight: "500",
-			justifyContent: "flex-start",
-			transition: "colors"
-		},
-		"ob5dm1"
-	],
-	variants: {
-		intent: {
-			danger: "_1chk1c3",
-			neutral: "_1u0o41m",
-			primary: "_1gzngt3"
-		},
-		size: {
-			sm: {
-				fontSize: "sm",
-				h: "sm"
+var buttonBase = recipeRuntime(function() {
+	var x = {
+		base: [
+			"_9htss0",
+			{
+				alignItems: "center",
+				display: "inline-flex",
+				flexDirection: "row",
+				fontWeight: "500",
+				justifyContent: "flex-start",
+				transition: "colors"
 			},
-			md: {
-				fontSize: "md",
-				h: "md"
+			"op2512"
+		],
+		variants: {
+			addon: {
+				both: {},
+				end: {},
+				none: {},
+				only: {},
+				start: {}
 			},
-			lg: {
-				fontSize: "lg",
-				h: "lg"
-			}
-		},
-		square: {
-			false: {},
-			true: {}
-		},
-		variant: {
-			outline: "_10z4w6i",
-			"outline-opal": "_1jgi0vp",
-			strong: "zga5j2",
-			subtle: "_1rcy5ex"
-		}
-	},
-	variantsCompounded: [
-		{
-			style: [{ pl: "6" }, "zj2had"],
-			variants: {
-				intent: "primary",
-				size: "lg",
-				square: false,
-				variant: "strong"
-			}
-		},
-		{
-			style: { w: "sm" },
-			variants: {
-				size: "sm",
-				square: true
-			}
-		},
-		{
-			style: "chx89z",
-			variants: {
-				size: "sm",
-				square: false,
-				variant: [
-					"outline",
-					"strong",
-					"subtle"
-				]
-			}
-		},
-		{
-			style: "_1r5cn4l",
-			variants: {
-				size: "sm",
-				square: false,
-				variant: "outline-opal"
-			}
-		},
-		{
-			style: { w: "md" },
-			variants: {
-				size: "md",
-				square: true
-			}
-		},
-		{
-			style: "yvocqv",
-			variants: {
-				size: "md",
-				square: false
-			}
-		},
-		{
-			style: { w: "lg" },
-			variants: {
-				size: "lg",
-				square: true
+			intent: {
+				danger: "_1anssui",
+				neutral: "dqne24",
+				primary: "_1as1pn2"
+			},
+			size: {
+				sm: {
+					fontSize: "sm",
+					h: "sm"
+				},
+				md: {
+					fontSize: "md",
+					h: "md"
+				},
+				lg: {
+					fontSize: "lg",
+					h: "lg"
+				}
+			},
+			variant: {
+				outline: "_1w9pvj7",
+				"outline-opal": "_1mzq287",
+				strong: "_1sqdsxe",
+				subtle: "i9h49e"
 			}
 		},
-		{
-			style: "xnz8ws",
-			variants: {
-				size: "lg",
-				square: false
+		variantsCompounded: [
+			{
+				style: "p36ovs",
+				variants: {
+					addon: [
+						"both",
+						"end",
+						"none",
+						"start"
+					],
+					intent: "primary",
+					size: "lg",
+					variant: "strong"
+				}
+			},
+			{
+				style: "krvpio",
+				variants: {
+					addon: ["both", "start"],
+					intent: "primary",
+					size: "lg",
+					variant: "strong"
+				}
+			},
+			{
+				style: { w: "sm" },
+				variants: {
+					addon: "only",
+					size: "sm"
+				}
+			},
+			{
+				style: "_83em5y",
+				variants: {
+					addon: void 0,
+					size: "sm",
+					variant: [
+						"outline",
+						"strong",
+						"subtle"
+					]
+				}
+			},
+			{
+				style: "_19roukt",
+				variants: {
+					addon: void 0,
+					size: "sm",
+					variant: "outline-opal"
+				}
+			},
+			{
+				style: { w: "md" },
+				variants: {
+					addon: "only",
+					size: "md"
+				}
+			},
+			{
+				style: "_14528si",
+				variants: {
+					addon: void 0,
+					size: "md"
+				}
+			},
+			{
+				style: { w: "lg" },
+				variants: {
+					addon: "only",
+					size: "lg"
+				}
+			},
+			{
+				style: "_15k1lp5",
+				variants: {
+					addon: void 0,
+					size: "lg"
+				}
 			}
-		}
-	]
-});
-var spinner = recipeRuntime({ base: [{ size: "2xs" }, "p09k8c"] });
+		]
+	};
+	x.variantsCompounded[3].variants.addon = x.variantsCompounded[0].variants.addon;
+	x.variantsCompounded[4].variants.addon = x.variantsCompounded[0].variants.addon;
+	x.variantsCompounded[6].variants.addon = x.variantsCompounded[0].variants.addon;
+	x.variantsCompounded[8].variants.addon = x.variantsCompounded[0].variants.addon;
+	return x;
+}());
+var spinner = recipeRuntime({ base: [{ size: "2xs" }, "_3gr866"] });
 //#endregion
 export { buttonBase, spinner };

package/dist/esm/packages/react/src/button/ButtonRoot.js

@@ -52,7 +52,7 @@ const appearances = {
 		variant: "subtle"
 	}
 };
-const ButtonRoot = forwardRef(({ appearance = "default", asChild, children, className, disabled, loading, size = "md", square, ...props }, ref) => {
+const ButtonRoot = forwardRef(({ addon = "none", appearance = "default", asChild, children, className, disabled, loading, size = "md", square, ...props }, ref) => {
 	const Comp = asChild ? Slot : "button";
 	const { boxProps, restProps } = extractBoxProps(props);
 	const { intent, variant: resolvedVariant } = appearances[appearance];
@@ -62,9 +62,9 @@ const ButtonRoot = forwardRef(({ appearance = "default", asChild, children, clas
 		"data-disabled": disabled ? "" : void 0,
 		"data-loading": loading ? "" : void 0,
 		...buttonBase({
+			addon: square ? "only" : addon,
 			intent,
 			size,
-			square: Boolean(square),
 			variant
 		}, className),
 		...boxProps,

package/dist/esm/packages/react/src/calendar/Calendar-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/calendar/Calendar.css.ts.vanilla-Lt2sqYJF.css";
+import "./../../../../assets/src/layers/layers.css.ts.vanilla-BEh1Y_X9.css";
+import "./../../../../assets/src/calendar/Calendar.css.ts.vanilla-ZQiB3lWJ.css";
 //#region src/calendar/Calendar.css.ts
 var picker = recipeRuntime({ variants: { side: {
 	bottom: {},
 	left: {},
 	right: {},
-	top: "_27fgbs"
+	top: "_1nspi3x"
 } } });
 //#endregion
 export { picker };

package/dist/esm/packages/react/src/calendar/Calendar.js

@@ -1,11 +1,12 @@
 "use client";
 import { Box } from "../box/Box.js";
+import { Group } from "../group/Group.js";
 import { formatDate } from "../utils/formatDate.js";
 import { toInstant } from "../utils/toInstant.js";
 import { toPlainDate } from "../utils/toPlainDate.js";
 import { toPlainTime } from "../utils/toPlainTime.js";
 import { Text } from "../text/Text.js";
-import { Group } from "../group/Group.js";
+import { useLocaleContext } from "../locale/LocaleContext.js";
 import { usePopoverContentContext } from "../popover/PopoverContentContext.js";
 import { Clock } from "../clock/Clock.js";
 import { picker } from "./Calendar-css.js";
@@ -29,16 +30,13 @@ import { useComposedRefs } from "@radix-ui/react-compose-refs";
 import { useControllableState } from "@radix-ui/react-use-controllable-state";
 import { DayPicker } from "react-day-picker";
 //#region src/calendar/Calendar.tsx
-const locale = new Intl.Locale(typeof navigator !== "undefined" ? navigator.language : "en-US");
-const weekStartsOn = ("getWeekInfo" in locale && typeof locale.getWeekInfo === "function" ? locale.getWeekInfo() : { firstDay: 0 }).firstDay % 7;
 /**
-* Override `react-day-picker`'s default formatters with locale-aware ones so the
-* calendar localizes to the browser locale without a date-fns locale object.
+* Derive the first day of the week from the locale via `Intl.Locale`, falling
+* back to Sunday when `getWeekInfo` is unavailable.
 */
-const formatters = {
-	formatCaption: (month) => formatDate(month, "LLLL yyyy"),
-	formatDay: (day) => formatDate(day, "d"),
-	formatWeekdayName: (weekday) => formatDate(weekday, "ccccc")
+const weekStartsOnFor = (locale) => {
+	const intlLocale = new Intl.Locale(locale);
+	return ("getWeekInfo" in intlLocale && typeof intlLocale.getWeekInfo === "function" ? intlLocale.getWeekInfo() : { firstDay: 0 }).firstDay % 7;
 };
 const components = {
 	CaptionLabel: CalendarCaptionLabel,
@@ -63,6 +61,17 @@ const components = {
 */
 const Calendar = forwardRef(({ defaultValue = null, holiday, max, min, mode = "single", onDateSelect, onValueChange, placeholder, step, today, type = "date", value: valueProp, weekend, ...props }, outerRef) => {
 	const { side } = usePopoverContentContext("@optiaxiom/react/Calendar");
+	const { locale } = useLocaleContext("@optiaxiom/react/Calendar");
+	const weekStartsOn = weekStartsOnFor(locale);
+	/**
+	* Override `react-day-picker`'s default formatters with locale-aware ones so
+	* the calendar localizes without a date-fns locale object.
+	*/
+	const formatters = {
+		formatCaption: (month) => formatDate(locale, month, "LLLL yyyy"),
+		formatDay: (day) => formatDate(locale, day, "d"),
+		formatWeekdayName: (weekday) => formatDate(locale, weekday, "ccccc")
+	};
 	const [view, setView] = useState("day");
 	const [value, setValue] = useControllableState({
 		caller: "@optiaxiom/react/Calendar",
@@ -174,7 +183,7 @@ const Calendar = forwardRef(({ defaultValue = null, holiday, max, min, mode = "s
 					fontSize: "sm",
 					textAlign: "center",
 					w: "full",
-					children: toTimeZoneName(value instanceof Date ? value : placeholderDate)
+					children: toTimeZoneName(locale, value instanceof Date ? value : placeholderDate)
 				})]
 			})]
 		})

package/dist/esm/packages/react/src/calendar/CalendarCaptionLabel.js

@@ -2,6 +2,7 @@
 import { formatDate } from "../utils/formatDate.js";
 import { Button } from "../button/Button.js";
 import { VisuallyHidden } from "../visually-hidden/VisuallyHidden.js";
+import { useLocaleContext } from "../locale/LocaleContext.js";
 import { useCalendarContext } from "./CalendarContext.js";
 import { withYear } from "./utils.js";
 import { IconAngleDown } from "@optiaxiom/icons";
@@ -10,6 +11,7 @@ import { CaptionLabel } from "react-day-picker";
 //#region src/calendar/CalendarCaptionLabel.tsx
 function CalendarCaptionLabel({ children, ...props }) {
 	const { month, setView, view } = useCalendarContext("@optiaxiom/react/CalendarCaptionLabel");
+	const { locale } = useLocaleContext("@optiaxiom/react/CalendarCaptionLabel");
 	return /* @__PURE__ */ jsxs(Button, {
 		appearance: "subtle",
 		icon: /* @__PURE__ */ jsx(IconAngleDown, {}),
@@ -21,11 +23,11 @@ function CalendarCaptionLabel({ children, ...props }) {
 		children: [/* @__PURE__ */ jsx(CaptionLabel, {
 			...props,
 			children: view === "year" ? /* @__PURE__ */ jsxs(Fragment, { children: [
-				formatDate(month, "yyyy"),
+				formatDate(locale, month, "yyyy"),
 				" -",
 				" ",
-				formatDate(withYear(month, month.getFullYear() + 11), "yyyy")
-			] }) : view === "month" ? formatDate(month, "yyyy") : children
+				formatDate(locale, withYear(month, month.getFullYear() + 11), "yyyy")
+			] }) : view === "month" ? formatDate(locale, month, "yyyy") : children
 		}), /* @__PURE__ */ jsx(VisuallyHidden, { children: view === "month" ? "change year" : "change month" })]
 	});
 }

package/dist/esm/packages/react/src/calendar/CalendarDayButton-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/calendar/CalendarDayButton.css.ts.vanilla-CReIQu1T.css";
+import "./../../../../assets/src/layers/layers.css.ts.vanilla-BEh1Y_X9.css";
+import "./../../../../assets/src/calendar/CalendarDayButton.css.ts.vanilla-Dmx9acnJ.css";
 //#region src/calendar/CalendarDayButton.css.ts
 var button = recipeRuntime({
 	base: [{
@@ -8,25 +8,25 @@ var button = recipeRuntime({
 		fontSize: "md",
 		size: "md",
 		transition: "colors"
-	}, "_1ky0o14"],
+	}, "_1pu91lu"],
 	variants: {
 		appearance: {
-			"default": "_1mtkeyb",
-			holiday: [{ color: "fg.error" }, "vx9o2s"],
-			range_middle: "_1flt9cj",
-			selected: ["_1pdu5i7"],
-			weekend: [{ color: "fg.tertiary" }, "_17lt11x"]
+			"default": "_1o884c2",
+			holiday: [{ color: "fg.error" }, "_1oelz6w"],
+			range_middle: "bxquxo",
+			selected: ["_1uie7ce"],
+			weekend: [{ color: "fg.tertiary" }, "w7hy0o"]
 		},
 		range: {
-			end: ["qibx9p"],
-			middle: ["_12832w7"],
-			start: ["_1rz8zez"]
+			end: ["_1rpz7pj"],
+			middle: ["_1ipzhq5"],
+			start: ["_1ep3umq"]
 		}
 	}
 });
 var today = recipeRuntime({ base: [{
 	mx: "auto",
 	rounded: "full"
-}, "_57to2v"] });
+}, "_1j6sykt"] });
 //#endregion
 export { button, today };

package/dist/esm/packages/react/src/calendar/CalendarGrid-css.js

@@ -1,11 +1,11 @@
 import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
-import "./../../../../assets/src/layers/layers.css.ts.vanilla-DRoTvdmB.css";
-import "./../../../../assets/src/calendar/CalendarGrid.css.ts.vanilla-DkU4TLC8.css";
+import "./../../../../assets/src/layers/layers.css.ts.vanilla-BEh1Y_X9.css";
+import "./../../../../assets/src/calendar/CalendarGrid.css.ts.vanilla-DhiG6Dms.css";
 //#region src/calendar/CalendarGrid.css.ts
 var grid = recipeRuntime({ base: [{
 	display: "flex",
 	flexDirection: "column",
 	gap: "2"
-}, "h0x82d"] });
+}, "_18hu68c"] });
 //#endregion
 export { grid };

package/dist/esm/packages/react/src/calendar/CalendarMonthGrid.js

@@ -1,6 +1,7 @@
 "use client";
 import { Box } from "../box/Box.js";
 import { formatDate } from "../utils/formatDate.js";
+import { useLocaleContext } from "../locale/LocaleContext.js";
 import { useCalendarContext } from "./CalendarContext.js";
 import { withMonth, withYear } from "./utils.js";
 import { CalendarGrid } from "./CalendarGrid.js";
@@ -8,12 +9,13 @@ import { useEffect, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
 import { MonthGrid } from "react-day-picker";
 //#region src/calendar/CalendarMonthGrid.tsx
-const months = Array.from({ length: 12 }, (_, month) => {
-	const date = new Date(2e3, month, 1);
-	return [formatDate(date, "LLL"), formatDate(date, "LLLL")];
-});
 function CalendarMonthGrid({ children, ...props }) {
 	const { month, setMonth, setView, view } = useCalendarContext("@optiaxiom/react/CalendarMonthGrid");
+	const { locale } = useLocaleContext("@optiaxiom/react/CalendarMonthGrid");
+	const months = Array.from({ length: 12 }, (_, month) => {
+		const date = new Date(2e3, month, 1);
+		return [formatDate(locale, date, "LLL"), formatDate(locale, date, "LLLL")];
+	});
 	const ref = useRef(null);
 	const lastMonthRef = useRef();
 	const lastViewRef = useRef();
@@ -39,11 +41,15 @@ function CalendarMonthGrid({ children, ...props }) {
 				scale: 1
 			}], { duration: 150 });
 			const days = Array.from(ref.current?.querySelectorAll("tbody button:not([disabled])") ?? []);
-			(days.find((day) => day.textContent === formatDate(month, "d")) ?? days[0])?.focus();
+			(days.find((day) => day.textContent === formatDate(locale, month, "d")) ?? days[0])?.focus();
 		}
 		lastMonthRef.current = month;
 		lastViewRef.current = view;
-	}, [month, view]);
+	}, [
+		locale,
+		month,
+		view
+	]);
 	if (view === "year") return /* @__PURE__ */ jsx(CalendarGrid, {
 		onPageChange: (dir) => {
 			setMonth(withYear(month, month.getFullYear() + dir * 12));
@@ -53,7 +59,7 @@ function CalendarMonthGrid({ children, ...props }) {
 			setView("month");
 		},
 		options: Array.from({ length: 12 }).map((_, index) => {
-			const year = formatDate(withYear(month, month.getFullYear() + index), "yyyy");
+			const year = formatDate(locale, withYear(month, month.getFullYear() + index), "yyyy");
 			return [year, year];
 		}),
 		value: 0

package/dist/esm/packages/react/src/calendar/CalendarMonths-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/calendar/CalendarMonths.css.ts.vanilla-CidL8xkI.css";
+import "./../../../../assets/src/layers/layers.css.ts.vanilla-BEh1Y_X9.css";
+import "./../../../../assets/src/calendar/CalendarMonths.css.ts.vanilla-Dkk4Y7HL.css";
 //#region src/calendar/CalendarMonths.css.ts
 var months = recipeRuntime({ base: [{
 	alignItems: "start",
 	gap: "16"
-}, "wp8aca"] });
+}, "_1505frq"] });
 //#endregion
 export { months };

package/dist/esm/packages/react/src/calendar/CalendarNextMonthButton-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/calendar/CalendarNextMonthButton.css.ts.vanilla-BdxB6tog.css";
+import "./../../../../assets/src/layers/layers.css.ts.vanilla-BEh1Y_X9.css";
+import "./../../../../assets/src/calendar/CalendarNextMonthButton.css.ts.vanilla-Bnr2MFZD.css";
 //#region src/calendar/CalendarNextMonthButton.css.ts
-var button = recipeRuntime({ base: "_1b7j98e" });
+var button = recipeRuntime({ base: "snf1e8" });
 //#endregion
 export { button };

package/dist/esm/packages/react/src/calendar/CalendarPreviousMonthButton-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/calendar/CalendarPreviousMonthButton.css.ts.vanilla-zLqDRG_c.css";
+import "./../../../../assets/src/layers/layers.css.ts.vanilla-BEh1Y_X9.css";
+import "./../../../../assets/src/calendar/CalendarPreviousMonthButton.css.ts.vanilla-ZAMzMAHR.css";
 //#region src/calendar/CalendarPreviousMonthButton.css.ts
-var button = recipeRuntime({ base: "sufly1" });
+var button = recipeRuntime({ base: "vuur36" });
 //#endregion
 export { button };

package/dist/esm/packages/react/src/calendar/toTimeZoneName.js

@@ -1,7 +1,11 @@
+import { memoize } from "../utils/memoize.js";
 //#region src/calendar/toTimeZoneName.ts
-const formatter = new Intl.DateTimeFormat(void 0, { timeZoneName: "long" });
-const toTimeZoneName = (date) => {
-	return formatter.formatToParts(date).find((part) => part.type === "timeZoneName")?.value ?? "";
+/**
+* `Intl` construction is expensive, so we memoize the formatter per locale.
+*/
+const formatterFor = memoize((locale) => new Intl.DateTimeFormat(locale, { timeZoneName: "long" }));
+const toTimeZoneName = (locale, date) => {
+	return formatterFor(locale).formatToParts(date).find((part) => part.type === "timeZoneName")?.value ?? "";
 };
 //#endregion
 export { toTimeZoneName };

package/dist/esm/packages/react/src/card/Card-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/cover/Cover.css.ts.vanilla-DTkW5cH8.css";
-import "./../../../../assets/src/card/Card.css.ts.vanilla-49h0vl9G.css";
+import "./../../../../assets/src/layers/layers.css.ts.vanilla-BEh1Y_X9.css";
+import "./../../../../assets/src/cover/Cover.css.ts.vanilla-BXCeLX0V.css";
+import "./../../../../assets/src/card/Card.css.ts.vanilla-BI0770LM.css";
 //#region src/card/Card.css.ts
 var card = recipeRuntime({ base: [
-	"_7q0o04",
+	"_1cwcxe6",
 	{
 		alignItems: "start",
 		bg: "bg.default",
@@ -16,7 +16,7 @@ var card = recipeRuntime({ base: [
 		gap: "8",
 		p: "16"
 	},
-	"_1u10pqj"
+	"ybpp8o"
 ] });
 //#endregion
 export { card };

package/dist/esm/packages/react/src/card/Card.js

@@ -3,9 +3,9 @@ import { Group } from "../group/Group.js";
 import { ActionsRoot } from "../actions/ActionsRoot.js";
 import { card } from "./Card-css.js";
 import { CardProvider } from "./CardContext.js";
-import { useId } from "@radix-ui/react-id";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
+import { useId as useId$1 } from "@radix-ui/react-id";
 //#region src/card/Card.tsx
 /**
 * Generic container for grouping related components together.
@@ -16,8 +16,8 @@ import { jsx } from "react/jsx-runtime";
 */
 const Card = forwardRef(({ children, className, ...props }, ref) => {
 	return /* @__PURE__ */ jsx(CardProvider, {
-		descriptionId: useId(),
-		labelId: useId(),
+		descriptionId: useId$1(),
+		labelId: useId$1(),
 		children: /* @__PURE__ */ jsx(ActionsRoot, {
 			asChild: true,
 			children: /* @__PURE__ */ jsx(Group, {

package/dist/esm/packages/react/src/card/CardCheckbox-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/card/CardCheckbox.css.ts.vanilla-TzqzSHrL.css";
+import "./../../../../assets/src/layers/layers.css.ts.vanilla-BEh1Y_X9.css";
+import "./../../../../assets/src/card/CardCheckbox.css.ts.vanilla-CZIOGw9R.css";
 //#region src/card/CardCheckbox.css.ts
-var checkbox = recipeRuntime({ base: ["_1pib0ew"] });
+var checkbox = recipeRuntime({ base: ["tkfcbm"] });
 //#endregion
 export { checkbox };

package/dist/esm/packages/react/src/card/CardCheckbox.js

@@ -3,18 +3,18 @@ import { VisuallyHidden } from "../visually-hidden/VisuallyHidden.js";
 import { Checkbox } from "../checkbox/Checkbox.js";
 import { useCardContext } from "./CardContext.js";
 import { checkbox } from "./CardCheckbox-css.js";
-import { useId } from "@radix-ui/react-id";
 import { forwardRef } from "react";
 import clsx from "clsx";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { useControllableState } from "@radix-ui/react-use-controllable-state";
+import { useId as useId$1 } from "@radix-ui/react-id";
 //#region src/card/CardCheckbox.tsx
 /**
 * @extends Checkbox
 * @group Card
 */
 const CardCheckbox = forwardRef(({ className, onChange, ...props }, ref) => {
-	const labelPrefixId = useId();
+	const labelPrefixId = useId$1();
 	const { labelId } = useCardContext("@optiaxiom/react/CardCheckbox");
 	const [checked, setChecked] = useControllableState({
 		caller: "@optiaxiom/react/CardCheckbox",