@optiaxiom/react 3.4.1 → 3.4.3

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

@@ -1,6 +1,6 @@
 import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
-import "./../../../../assets/layers.css.ts.vanilla-_0yplc22.css";
-import "./../../../../assets/DataTableHeaderCell.css.ts.vanilla-D4Q2K0L7.css";
+import "./../../../../assets/layers.css.ts.vanilla-CH9zlCwB.css";
+import "./../../../../assets/DataTableHeaderCell.css.ts.vanilla-B5CrNfuF.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"
-}, "debvws"] });
+}, "_1pb5kuo"] });
 var handle = recipeRuntime({
 	base: [{
 		h: "full",
 		z: "10"
-	}, "_1eouka5"],
+	}, "_8exjer"],
 	variants: { resizing: {
 		false: {},
 		true: { borderColor: "border.focus" }
@@ -28,10 +28,10 @@ var icon = recipeRuntime({
 		h: "12",
 		mx: "2",
 		transition: "opacity"
-	}, "vdt9tk"],
+	}, "_1p4bd9a"],
 	variants: { active: {
-		false: "p0g2c9",
-		true: "_1e02v9f"
+		false: "w6uc3r",
+		true: "_10elrrc"
 	} }
 });
 //#endregion

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

@@ -6,23 +6,42 @@ import { DataTableRowProvider } from "./DataTableRowContext.js";
 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";
+import { useId } 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 { focusRequestRef, highlightedIndex, setHighlightedIndex, table } = useDataTableContext("@optiaxiom/react/DataTableRow");
 	const [subHighlightedIndex, setSubHighlightedIndex] = useState(-1);
-	const labelId = useId$1();
+	const labelId = useId();
+	const [actions, setActions] = useState([]);
+	const primary = actions.find((action) => action.primary);
+	const [selector, setSelector] = useState();
+	const focusManaged = Boolean(selector || primary);
 	const innerRef = useRef(null);
 	const ref = useComposedRefs(innerRef, outerRef);
+	/**
+	* A row mounted by the virtualizer only becomes focusable once its actions
+	* register, so wait for `focusManaged` before moving focus to it.
+	*/
 	useEffect(() => {
 		if (highlightedIndex !== index) return;
-		if (!innerRef.current?.contains(document.activeElement)) innerRef.current?.focus();
+		if (focusManaged && focusRequestRef.current) {
+			focusRequestRef.current = false;
+			innerRef.current?.focus();
+		}
 		return () => setSubHighlightedIndex(-1);
-	}, [highlightedIndex, index]);
-	const [actions, setActions] = useState([]);
-	const primary = actions.find((action) => action.primary);
-	const [selector, setSelector] = useState();
-	const focusManaged = Boolean(selector || primary);
+	}, [
+		focusManaged,
+		focusRequestRef,
+		highlightedIndex,
+		index
+	]);
+	/**
+	* Keep the highlight on the focused row when data changes move it to a new
+	* index, so arrow keys and `tabIndex` follow the row.
+	*/
+	useEffect(() => {
+		if (innerRef.current?.contains(document.activeElement)) setHighlightedIndex(index);
+	}, [index, setHighlightedIndex]);
 	const onActionMount = useEvent(({ primary, ref }) => {
 		setActions((actions) => [...actions, {
 			primary,
@@ -70,6 +89,7 @@ const DataTableRow = forwardRef(({ children, index, row, ...props }, outerRef) =
 				const nextIndex = event.key === "ArrowDown" ? highlightedIndex + 1 : highlightedIndex - 1;
 				if (nextIndex >= 0 && nextIndex <= rows.length - 1) {
 					event.preventDefault();
+					focusRequestRef.current = true;
 					setHighlightedIndex(nextIndex);
 					if (selector) {
 						const nextRow = rows[nextIndex];

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

@@ -1,10 +1,10 @@
 import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
-import "./../../../../assets/layers.css.ts.vanilla-_0yplc22.css";
-import "./../../../../assets/DateInput.css.ts.vanilla-D-JyBp1f.css";
+import "./../../../../assets/layers.css.ts.vanilla-CH9zlCwB.css";
+import "./../../../../assets/DateInput.css.ts.vanilla-DAOdMIWj.css";
 //#region src/date-input/DateInput.css.ts
-var clear = recipeRuntime({ base: [{ size: "sm" }, "_1ntcdul"] });
-var date = recipeRuntime({ base: "_1casvb2" });
-var input = recipeRuntime({ base: "_1ewmdem" });
-var picker = recipeRuntime({ base: "_17iq7yk" });
+var clear = recipeRuntime({ base: [{ size: "sm" }, "_180osue"] });
+var date = recipeRuntime({ base: "_1d4x4qd" });
+var input = recipeRuntime({ base: "_197495c" });
+var picker = recipeRuntime({ base: "_1uoa3z5" });
 //#endregion
 export { clear, date, input, picker };

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

@@ -19,7 +19,7 @@ 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";
+import { useId } 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 { useId as useId$1 } from "@radix-ui/react-id";
 */
 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$1();
+	const labelId = useId();
 	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/layers.css.ts.vanilla-_0yplc22.css";
+import "./../../../../assets/layers.css.ts.vanilla-CH9zlCwB.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

@@ -9,7 +9,7 @@ import { panels } from "./DateRangePickerContent-css.js";
 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";
+import { useId } from "@radix-ui/react-id";
 //#region src/date-range-picker/DateRangePickerContent.tsx
 /**
 * @group DateRangePicker
@@ -17,7 +17,7 @@ import { useId as useId$1 } from "@radix-ui/react-id";
 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$1();
+	const labelId = useId();
 	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

@@ -9,7 +9,7 @@ import { IconCalendar } from "@optiaxiom/icons";
 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";
+import { useId } from "@radix-ui/react-id";
 //#region src/date-range-picker/DateRangePickerTrigger.tsx
 const dateFormatterFor = memoize((locale) => new Intl.DateTimeFormat(locale, {
 	day: "numeric",
@@ -23,7 +23,7 @@ const dateFormatterFor = memoize((locale) => new Intl.DateTimeFormat(locale, {
 const DateRangePickerTrigger = forwardRef(({ "aria-labelledby": ariaLabelledBy, children, formatRange, placeholder = "Pick a date", ...props }, outerRef) => {
 	const { disabled, triggerRef, value } = useDateRangePickerContext("@optiaxiom/react/DateRangePickerTrigger");
 	const { locale } = useLocaleContext("@optiaxiom/react/DateRangePickerTrigger");
-	const id = useId$1();
+	const id = useId();
 	const ref = useComposedRefs(outerRef, triggerRef);
 	const labelId = useFieldLabelTrigger(triggerRef, ariaLabelledBy);
 	const formatter = formatRange ? { formatRange } : dateFormatterFor(locale);

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

@@ -1,6 +1,6 @@
 import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
-import "./../../../../assets/layers.css.ts.vanilla-_0yplc22.css";
-import "./../../../../assets/DetailsPanel.css.ts.vanilla-DXFNOyvv.css";
+import "./../../../../assets/layers.css.ts.vanilla-CH9zlCwB.css";
+import "./../../../../assets/DetailsPanel.css.ts.vanilla-WKcp-Juf.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"
-}, "_1wvn3z5"] });
+}, "hediij"] });
 //#endregion
 export { root };

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

@@ -5,7 +5,7 @@ import { DetailsPanelProvider } from "./DetailsPanelContext.js";
 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";
+import { useId } 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$1();
-	const descriptionId = useId$1();
+	const labelId = useId();
+	const descriptionId = useId();
 	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/layers.css.ts.vanilla-_0yplc22.css";
-import "./../../../../assets/DetailsPanelFooter.css.ts.vanilla-CR8YbWHj.css";
+import "./../../../../assets/layers.css.ts.vanilla-CH9zlCwB.css";
+import "./../../../../assets/DetailsPanelFooter.css.ts.vanilla-C8iro7y_.css";
 //#region src/details-panel/DetailsPanelFooter.css.ts
 var footer = recipeRuntime({ base: [{
 	bg: "bg.default",
 	gap: "8",
 	p: "16",
 	pt: "8"
-}, "_1y6vn9k"] });
+}, "tl456p"] });
 //#endregion
 export { footer };

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

@@ -1,6 +1,6 @@
 import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
-import "./../../../../assets/layers.css.ts.vanilla-_0yplc22.css";
-import "./../../../../assets/DetailsPanelHeader.css.ts.vanilla-oeA_GeRH.css";
+import "./../../../../assets/layers.css.ts.vanilla-CH9zlCwB.css";
+import "./../../../../assets/DetailsPanelHeader.css.ts.vanilla-ePGrw5aM.css";
 //#region src/details-panel/DetailsPanelHeader.css.ts
 var header = recipeRuntime({ base: [{
 	alignItems: "center",
@@ -9,6 +9,6 @@ var header = recipeRuntime({ base: [{
 	flexWrap: "wrap",
 	p: "16",
 	pb: "8"
-}, "e8yju4"] });
+}, "_9gcyaq"] });
 //#endregion
 export { header };

package/dist/esm/packages/react/src/dialog/DialogBody-css.js

@@ -1,6 +1,6 @@
 import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
-import "./../../../../assets/layers.css.ts.vanilla-_0yplc22.css";
-import "./../../../../assets/ButtonGroup.css.ts.vanilla-A3sMS8iF.css";
+import "./../../../../assets/layers.css.ts.vanilla-CH9zlCwB.css";
+import "./../../../../assets/ButtonGroup.css.ts.vanilla-D20kX7Jg.css";
 //#region src/dialog/DialogBody.css.ts
 var body = recipeRuntime({ base: [{
 	flex: "1",
@@ -10,6 +10,6 @@ var body = recipeRuntime({ base: [{
 	px: "24",
 	py: "16",
 	z: "0"
-}, "azc06"] });
+}, "_116wd82"] });
 //#endregion
 export { body };

package/dist/esm/packages/react/src/dialog/DialogContent-css.js

@@ -1,8 +1,8 @@
 import { __exportAll } from "../../../../_virtual/_rolldown/runtime.js";
 import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
-import "./../../../../assets/layers.css.ts.vanilla-_0yplc22.css";
-import "./../../../../assets/ButtonGroup.css.ts.vanilla-A3sMS8iF.css";
-import "./../../../../assets/DialogContent.css.ts.vanilla-B8eeLdfR.css";
+import "./../../../../assets/layers.css.ts.vanilla-CH9zlCwB.css";
+import "./../../../../assets/ButtonGroup.css.ts.vanilla-D20kX7Jg.css";
+import "./../../../../assets/DialogContent.css.ts.vanilla-mrbiEz55.css";
 //#region src/dialog/DialogContent.css.ts
 var DialogContent_css_exports = /* @__PURE__ */ __exportAll({
 	backdrop: () => backdrop,
@@ -13,7 +13,7 @@ var DialogContent_css_exports = /* @__PURE__ */ __exportAll({
 });
 var backdrop = recipeRuntime({ variants: { hidden: {
 	false: {},
-	true: "_19zo4u3"
+	true: "_1m9b3s0"
 } } });
 var content = recipeRuntime({
 	base: [{
@@ -21,16 +21,16 @@ var content = recipeRuntime({
 		display: "flex",
 		flexDirection: "column",
 		overflow: "auto"
-	}, "niohax"],
+	}, "_47yllt"],
 	variants: { size: {
-		sm: "lcphi4",
-		md: "_7cma13",
-		lg: "_13mf8gp",
-		fullscreen: "_1qmgkg3"
+		sm: "_1kfmnsb",
+		md: "wtbqa3",
+		lg: "_15lli02",
+		fullscreen: "_62uked"
 	} }
 });
-var nestedDialogCountVar = "var(--_7larhd)";
-var scrollPaddingBottomVar = "var(--jkzzxz)";
-var scrollPaddingTopVar = "var(--_1njpq8r)";
+var nestedDialogCountVar = "var(--_1crxmle)";
+var scrollPaddingBottomVar = "var(--_92r7pe)";
+var scrollPaddingTopVar = "var(--_13ha27t)";
 //#endregion
 export { DialogContent_css_exports, backdrop, content, nestedDialogCountVar, scrollPaddingBottomVar, scrollPaddingTopVar };

package/dist/esm/packages/react/src/dialog/DialogFooter-css.js

@@ -1,6 +1,6 @@
 import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
-import "./../../../../assets/layers.css.ts.vanilla-_0yplc22.css";
-import "./../../../../assets/DialogFooter.css.ts.vanilla-DwGjhEe4.css";
+import "./../../../../assets/layers.css.ts.vanilla-CH9zlCwB.css";
+import "./../../../../assets/DialogFooter.css.ts.vanilla-DcWtz1Pi.css";
 //#region src/dialog/DialogFooter.css.ts
 var footer = recipeRuntime({ base: [{
 	bg: "bg.default",
@@ -10,6 +10,6 @@ var footer = recipeRuntime({ base: [{
 	justifyContent: "flex-end",
 	px: "24",
 	py: "20"
-}, "pgczxr"] });
+}, "_18w9f4w"] });
 //#endregion
 export { footer };

package/dist/esm/packages/react/src/dialog/DialogHeader-css.js

@@ -1,15 +1,15 @@
 import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
-import "./../../../../assets/layers.css.ts.vanilla-_0yplc22.css";
-import "./../../../../assets/DialogHeader.css.ts.vanilla-C-CEDbo8.css";
+import "./../../../../assets/layers.css.ts.vanilla-CH9zlCwB.css";
+import "./../../../../assets/DialogHeader.css.ts.vanilla-DJvCfzjh.css";
 //#region src/dialog/DialogHeader.css.ts
-var actions = recipeRuntime({ base: [{ gap: "8" }, "z0efs5"] });
-var close = recipeRuntime({ base: ["_1avapby"] });
+var actions = recipeRuntime({ base: [{ gap: "8" }, "_1gde9cu"] });
+var close = recipeRuntime({ base: ["_1wdq8wv"] });
 var description = recipeRuntime({ base: [{
 	color: "fg.secondary",
 	fontSize: "md",
 	fontWeight: "400",
 	w: "full"
-}, "wh023s"] });
+}, "_1a9hcye"] });
 var header = recipeRuntime({ base: [{
 	alignItems: "center",
 	bg: "bg.default",
@@ -19,10 +19,10 @@ var header = recipeRuntime({ base: [{
 	p: "24",
 	pb: "16",
 	z: "10"
-}, "merpls"] });
+}, "pfhf7b"] });
 var title = recipeRuntime({ base: [{
 	flex: "1",
 	fontWeight: "600"
-}, "i6dalt"] });
+}, "_17z1qjv"] });
 //#endregion
 export { actions, close, description, header, title };

package/dist/esm/packages/react/src/disclosure/DisclosureContent-css.js

@@ -1,12 +1,12 @@
 import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
-import "./../../../../assets/layers.css.ts.vanilla-_0yplc22.css";
-import "./../../../../assets/DisclosureContent.css.ts.vanilla-Dpxena11.css";
+import "./../../../../assets/layers.css.ts.vanilla-CH9zlCwB.css";
+import "./../../../../assets/DisclosureContent.css.ts.vanilla-BGXueSgW.css";
 //#region src/disclosure/DisclosureContent.css.ts
-var inner = recipeRuntime({ base: ["ymai2f"] });
+var inner = recipeRuntime({ base: ["_76ywz3"] });
 var outer = recipeRuntime({
-	base: [{ display: "grid" }, "wjagey"],
+	base: [{ display: "grid" }, "a5r1sp"],
 	variants: { scale: {
-		false: "jpcwna",
+		false: "_2ssj1b",
 		true: {}
 	} }
 });

package/dist/esm/packages/react/src/disclosure/DisclosureTrigger-css.js

@@ -1,18 +1,18 @@
 import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
-import "./../../../../assets/layers.css.ts.vanilla-_0yplc22.css";
-import "./../../../../assets/DisclosureTrigger.css.ts.vanilla-Dg-PvN6M.css";
+import "./../../../../assets/layers.css.ts.vanilla-CH9zlCwB.css";
+import "./../../../../assets/DisclosureTrigger.css.ts.vanilla-BVrP_pqz.css";
 //#region src/disclosure/DisclosureTrigger.css.ts
 var icon = recipeRuntime({ base: [{
 	flex: "none",
 	size: "sm",
 	transition: "transform"
-}, "_17397wz"] });
+}, "a7zufp"] });
 var root = recipeRuntime({ base: [{
 	fontSize: "md",
 	gap: "8",
 	py: "8",
 	transition: "colors"
-}, "o7yhm3"] });
+}, "_1p187me"] });
 var trigger = recipeRuntime({ base: [{
 	fontSize: "inherit",
 	fontWeight: "inherit",
@@ -20,6 +20,6 @@ var trigger = recipeRuntime({ base: [{
 	rounded: "md",
 	textAlign: "start",
 	w: "full"
-}, "rq2sgg"] });
+}, "_1wxxyk3"] });
 //#endregion
 export { icon, root, trigger };

package/dist/esm/packages/react/src/field/Field.js

@@ -8,7 +8,7 @@ import { FieldLabel } from "./FieldLabel.js";
 import { IconTriangleExclamation } from "@optiaxiom/icons";
 import { forwardRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useId as useId$1 } from "@radix-ui/react-id";
+import { useId } from "@radix-ui/react-id";
 //#region src/field/Field.tsx
 /**
 * Wrapper for inputs to provide context such as label/help/required etc.
@@ -17,10 +17,10 @@ import { useId as useId$1 } from "@radix-ui/react-id";
 * @since 0.1.0
 */
 const Field = forwardRef(({ children, description, error, info, inputId: inputIdProp, label, labelId: labelIdProp, required, ...props }, ref) => {
-	const inputId = useId$1(inputIdProp);
-	const descriptionId = useId$1();
-	const errorId = useId$1();
-	const labelId = useId$1(labelIdProp);
+	const inputId = useId(inputIdProp);
+	const descriptionId = useId();
+	const errorId = useId();
+	const labelId = useId(labelIdProp);
 	return /* @__PURE__ */ jsxs(Group, {
 		flexDirection: "column",
 		gap: "4",

package/dist/esm/packages/react/src/field/FieldLabel.js

@@ -8,15 +8,15 @@ import { VisuallyHidden } from "../visually-hidden/VisuallyHidden.js";
 import { IconCircleQuestion } from "@optiaxiom/icons";
 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";
+import { useId } from "@radix-ui/react-id";
 import * as RadixLabel from "@radix-ui/react-label";
 //#region src/field/FieldLabel.tsx
 /**
 * @group Field
 */
 const FieldLabel = forwardRef(({ children, info, inputId: inputIdProp, labelId: labelIdProp, required, ...props }, ref) => {
-	const inputId = useId$1(inputIdProp);
-	const labelId = useId$1(labelIdProp);
+	const inputId = useId(inputIdProp);
+	const labelId = useId(labelIdProp);
 	return /* @__PURE__ */ jsxs(Group, {
 		gap: "4",
 		ref,

package/dist/esm/packages/react/src/file-upload/FileUpload-css.js

@@ -1,11 +1,11 @@
 import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
-import "./../../../../assets/layers.css.ts.vanilla-_0yplc22.css";
-import "./../../../../assets/FileUpload.css.ts.vanilla-DQ8v3FUt.css";
+import "./../../../../assets/layers.css.ts.vanilla-CH9zlCwB.css";
+import "./../../../../assets/FileUpload.css.ts.vanilla-DywlbgL1.css";
 //#region src/file-upload/FileUpload.css.ts
 var upload = recipeRuntime({ base: [{
 	color: "fg.default",
 	display: "flex",
 	flexDirection: "column"
-}, "_1hqwqt2"] });
+}, "_1latk42"] });
 //#endregion
 export { upload };

package/dist/esm/packages/react/src/file-upload/FileUploadDropzone-css.js

@@ -1,6 +1,6 @@
 import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
-import "./../../../../assets/layers.css.ts.vanilla-_0yplc22.css";
-import "./../../../../assets/FileUploadDropzone.css.ts.vanilla-H6wJ37RB.css";
+import "./../../../../assets/layers.css.ts.vanilla-CH9zlCwB.css";
+import "./../../../../assets/FileUploadDropzone.css.ts.vanilla-x-36yUQI.css";
 //#region src/file-upload/FileUploadDropzone.css.ts
 var dropzone = recipeRuntime({
 	base: [{
@@ -13,19 +13,19 @@ var dropzone = recipeRuntime({
 		rounded: "md",
 		textAlign: "center",
 		transition: "colors"
-	}, "_54bck2"],
+	}, "_1471frz"],
 	variants: {
 		drag: {
 			false: {},
-			true: ["briq48"]
+			true: ["_1wm7gci"]
 		},
 		hidden: {
-			false: "fue30k",
-			true: "_918i9v"
+			false: "_1nid5fe",
+			true: "uknp5t"
 		},
 		overlay: {
 			false: { flex: "1" },
-			true: [{ z: "10" }, "_1yp727a"]
+			true: [{ z: "10" }, "qf2pyg"]
 		}
 	}
 });
@@ -37,7 +37,7 @@ var label = recipeRuntime({
 	}],
 	variants: { disabled: {
 		false: {},
-		true: "mo33ih"
+		true: "cbwjya"
 	} }
 });
 //#endregion

package/dist/esm/packages/react/src/file-upload/FileUploadListItem-css.js

@@ -1,6 +1,6 @@
 import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
-import "./../../../../assets/layers.css.ts.vanilla-_0yplc22.css";
-import "./../../../../assets/FileUploadListItem.css.ts.vanilla-CQ6KBhcX.css";
+import "./../../../../assets/layers.css.ts.vanilla-CH9zlCwB.css";
+import "./../../../../assets/FileUploadListItem.css.ts.vanilla-Dgo0j1BG.css";
 //#region src/file-upload/FileUploadListItem.css.ts
 var item = recipeRuntime({ base: [{
 	alignItems: "center",
@@ -10,10 +10,10 @@ var item = recipeRuntime({ base: [{
 	p: "6",
 	rounded: "md",
 	transition: "colors"
-}, "_1oerf7c"] });
+}, "_1vhm32o"] });
 var name = recipeRuntime({ base: [{
 	rounded: "md",
 	textAlign: "start"
-}, "giv0rz"] });
+}, "_84vcb8"] });
 //#endregion
 export { item, name };

package/dist/esm/packages/react/src/heading/Heading-css.js

@@ -1,20 +1,20 @@
 import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
-import "./../../../../assets/layers.css.ts.vanilla-_0yplc22.css";
-import "./../../../../assets/Heading.css.ts.vanilla-ChNjYHoz.css";
+import "./../../../../assets/layers.css.ts.vanilla-CH9zlCwB.css";
+import "./../../../../assets/Heading.css.ts.vanilla-ZMCXykT6.css";
 //#region src/heading/Heading.css.ts
 var heading = recipeRuntime({
 	base: { fontFamily: "heading" },
 	variants: {
 		level: {
-			"1": "inf7y2",
-			"2": "ew0unt",
-			"3": "_2anr3b",
-			"4": "_17fatti"
+			"1": "wrjzv4",
+			"2": "_1gi4cgz",
+			"3": "_8n3cga",
+			"4": "_1gejbcz"
 		},
 		tracking: {
-			wide: "_15jto2k",
-			wider: "_137nb9s",
-			widest: "np5wb8"
+			wide: "_5vhho",
+			wider: "_14q1w99",
+			widest: "_1wca7tr"
 		}
 	}
 });

package/dist/esm/packages/react/src/highlight/Highlight-css.js

@@ -1,7 +1,7 @@
 import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
-import "./../../../../assets/layers.css.ts.vanilla-_0yplc22.css";
-import "./../../../../assets/Highlight.css.ts.vanilla-Dc34CTma.css";
+import "./../../../../assets/layers.css.ts.vanilla-CH9zlCwB.css";
+import "./../../../../assets/Highlight.css.ts.vanilla-Cs79Pv4C.css";
 //#region src/highlight/Highlight.css.ts
-var mark = recipeRuntime({ base: "mw7boc" });
+var mark = recipeRuntime({ base: "id5fnr" });
 //#endregion
 export { mark };

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

@@ -1,7 +1,7 @@
 import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
-import "./../../../../assets/layers.css.ts.vanilla-_0yplc22.css";
-import "./../../../../assets/HoverCardTrigger.css.ts.vanilla-BtkSO3Z0.css";
+import "./../../../../assets/layers.css.ts.vanilla-CH9zlCwB.css";
+import "./../../../../assets/HoverCardTrigger.css.ts.vanilla-CDNCAXpv.css";
 //#region src/hover-card/HoverCardTrigger.css.ts
-var trigger = recipeRuntime({ base: "_1jk2tok" });
+var trigger = recipeRuntime({ base: "_1clww39" });
 //#endregion
 export { trigger };

package/dist/esm/packages/react/src/icon/Icon-css.js

@@ -1,7 +1,7 @@
 import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
-import "./../../../../assets/layers.css.ts.vanilla-_0yplc22.css";
-import "./../../../../assets/Icon.css.ts.vanilla-NytibwC_.css";
+import "./../../../../assets/layers.css.ts.vanilla-CH9zlCwB.css";
+import "./../../../../assets/Icon.css.ts.vanilla-ilG8U1EG.css";
 //#region src/icon/Icon.css.ts
-var icon = recipeRuntime({ base: [{ flex: "none" }, "at2wxe"] });
+var icon = recipeRuntime({ base: [{ flex: "none" }, "voaei0"] });
 //#endregion
 export { icon };