@jonmilner/ui 0.8.2 → 0.9.0

package/dist/Menu/index.mjs

@@ -1,25 +1,25 @@
 import { join as e } from "../styles/join.mjs";
 import { splitStyleProps as t } from "../styles/split-style-props.mjs";
-import { Box as n } from "../Box/index.mjs";
+import { Box as n } from "../Box/base.mjs";
 import { Text as r } from "../Text/index.mjs";
 import { item as i, linkItem as a, popup as o, separator as s } from "./Menu.css.mjs";
 import { MenuItemPart as c, MenuLinkItemPart as l, MenuPortal as u, MenuPositioner as d, MenuRootScope as f, MenuTrigger as p } from "./client.mjs";
-import { jsx as m, jsxs as h } from "react/jsx-runtime";
-import { Children as g } from "react";
+import { Children as m } from "react";
+import { jsx as h, jsxs as g } from "react/jsx-runtime";
 import { Menu as _ } from "@base-ui/react/menu";
 //#region src/Menu/index.tsx
 function v(e) {
-	return /* @__PURE__ */ m(f, { ...e });
+	return /* @__PURE__ */ h(f, { ...e });
 }
-function y({ side: r = "bottom", align: i = "start", backgroundColor: a = "bgRaised", borderRadius: s = "med", boxShadow: c = "med", padding: l = "4", className: f, style: p, ...h }) {
-	let [g, v] = t(h);
-	return /* @__PURE__ */ m(u, { children: /* @__PURE__ */ m(d, {
+function y({ side: r = "bottom", align: i = "start", backgroundColor: a = "bgRaised", borderRadius: s = "med", boxShadow: c = "med", padding: l = "4", className: f, style: p, ...m }) {
+	let [g, v] = t(m);
+	return /* @__PURE__ */ h(u, { children: /* @__PURE__ */ h(d, {
 		align: i,
 		finalFocus: v.finalFocus !== void 0 && v.finalFocus !== !0,
 		side: r,
-		children: /* @__PURE__ */ m(_.Popup, {
+		children: /* @__PURE__ */ h(_.Popup, {
 			...v,
-			render: /* @__PURE__ */ m(n, {
+			render: /* @__PURE__ */ h(n, {
 				backgroundColor: a,
 				borderRadius: s,
 				boxShadow: c,
@@ -32,7 +32,7 @@ function y({ side: r = "bottom", align: i = "start", backgroundColor: a = "bgRai
 	}) });
 }
 function b(e) {
-	return g.map(e, (e) => typeof e == "string" || typeof e == "number" ? /* @__PURE__ */ m(r, {
+	return m.map(e, (e) => typeof e == "string" || typeof e == "number" ? /* @__PURE__ */ h(r, {
 		as: "span",
 		font: "label",
 		size: "sm",
@@ -49,13 +49,13 @@ var x = (e) => e == null || e === !1 || e === "" ? void 0 : e, S = (e, t) => t !
 	alignItems: "center",
 	gap: "8"
 };
-function w({ variant: r = "neutral", description: a, display: o = "flex", minBlockSize: s = "sm", paddingInline: l = "12", borderRadius: u = "sm", color: d = r === "danger" ? "danger" : "fg", className: f, style: p, children: h, ...g }) {
+function w({ variant: r = "neutral", description: a, display: o = "flex", minBlockSize: s = "sm", paddingInline: l = "12", borderRadius: u = "sm", color: d = r === "danger" ? "danger" : "fg", className: f, style: p, children: m, ...g }) {
 	let [_, v] = t(g), y = x(a);
-	return /* @__PURE__ */ m(c, {
-		label: S(h, y),
+	return /* @__PURE__ */ h(c, {
+		label: S(m, y),
 		...v,
 		description: y,
-		render: /* @__PURE__ */ m(n, {
+		render: /* @__PURE__ */ h(n, {
 			...C(y !== void 0),
 			display: o,
 			minBlockSize: s,
@@ -66,12 +66,12 @@ function w({ variant: r = "neutral", description: a, display: o = "flex", minBlo
 			className: e(i, f),
 			style: p
 		}),
-		children: b(h)
+		children: b(m)
 	});
 }
-function T({ href: r, disabled: o = !1, closeOnClick: s = !0, onClick: c, description: u, display: d = "flex", minBlockSize: f = "sm", paddingInline: p = "12", borderRadius: h = "sm", color: g = "fg", className: _, style: v, children: y, ...w }) {
+function T({ href: r, disabled: o = !1, closeOnClick: s = !0, onClick: c, description: u, display: d = "flex", minBlockSize: f = "sm", paddingInline: p = "12", borderRadius: m = "sm", color: g = "fg", className: _, style: v, children: y, ...w }) {
 	let [T, E] = t(w), D = x(u);
-	return /* @__PURE__ */ m(l, {
+	return /* @__PURE__ */ h(l, {
 		label: S(y, D),
 		...E,
 		"aria-disabled": o || void 0,
@@ -79,13 +79,13 @@ function T({ href: r, disabled: o = !1, closeOnClick: s = !0, onClick: c, descri
 		description: D,
 		href: o ? void 0 : r,
 		onClick: o ? void 0 : c,
-		render: /* @__PURE__ */ m(n, {
+		render: /* @__PURE__ */ h(n, {
 			as: "a",
 			...C(D !== void 0),
 			display: d,
 			minBlockSize: f,
 			paddingInline: p,
-			borderRadius: h,
+			borderRadius: m,
 			color: g,
 			...T,
 			className: e(i, a, _),
@@ -96,9 +96,9 @@ function T({ href: r, disabled: o = !1, closeOnClick: s = !0, onClick: c, descri
 }
 function E({ paddingBlock: r = "4", paddingInline: i = "8", className: a, style: o, ...c }) {
 	let [l, u] = t(c);
-	return /* @__PURE__ */ m(_.Separator, {
+	return /* @__PURE__ */ h(_.Separator, {
 		...u,
-		render: /* @__PURE__ */ m(n, {
+		render: /* @__PURE__ */ h(n, {
 			paddingBlock: r,
 			paddingInline: i,
 			...l,
@@ -109,15 +109,15 @@ function E({ paddingBlock: r = "4", paddingInline: i = "8", className: a, style:
 }
 function D({ label: e, className: i, style: a, children: o, ...s }) {
 	let [c, l] = t(s);
-	return /* @__PURE__ */ h(_.Group, {
+	return /* @__PURE__ */ g(_.Group, {
 		...l,
-		render: /* @__PURE__ */ m(n, {
+		render: /* @__PURE__ */ h(n, {
 			...c,
 			className: i,
 			style: a
 		}),
-		children: [/* @__PURE__ */ m(_.GroupLabel, {
-			render: /* @__PURE__ */ m(r, {
+		children: [/* @__PURE__ */ h(_.GroupLabel, {
+			render: /* @__PURE__ */ h(r, {
 				as: "div",
 				color: "fgMuted",
 				font: "label",

package/dist/MultiSelect/MultiSelect.css

@@ -1,2 +1,2 @@
-@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.avatar, components.badge, components.button, components.chip, components.field, components.color-field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
+@layer tokens, reset, atoms.base, atoms.sm, atoms.med, atoms.lg, atoms.xl, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.avatar, components.badge, components.button, components.chip, components.field, components.color-field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
 @layer components.multiselect{._1seauxl0{text-align:start;justify-content:stretch}:where(._1seauxl0) ._1gwwloa0{flex:auto;justify-items:stretch;min-inline-size:0}:where(._1seauxl0) ._1gwwloa1{min-inline-size:0}:where(._1seauxl0) ._1gwwloa2{flex:auto;min-inline-size:0}._1seauxl1{min-inline-size:0;display:block}._1seauxl1[data-placeholder]{color:var(--color-fg-muted)}._1seauxl2{min-inline-size:0;display:grid}._1seauxl3{grid-area:1/1}._1seauxl3[aria-hidden=true]{visibility:hidden}._1seauxl4{grid-area:1/1}._1seauxl5{border:var(--space-1) solid var(--color-border);min-inline-size:var(--anchor-width);max-block-size:var(--available-height);transform-origin:var(--transform-origin);transition:opacity var(--duration-fast) var(--easing-standard), scale var(--duration-fast) var(--easing-enter);overflow-y:auto}._1seauxl5:focus-visible{outline:var(--space-2) solid var(--color-focus);outline-offset:var(--space-2)}._1seauxl5[data-starting-style],._1seauxl5[data-ending-style]{opacity:0;scale:calc(1 - var(--scale-med))}._1seauxl6{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}._1seauxl6:focus-visible{outline:var(--space-2) solid var(--color-focus);outline-offset:calc(-1 * var(--space-2))}._1seauxl6[data-highlighted]{background-color:light-dark(var(--color-bg-muted),color-mix(in srgb, var(--color-fg) 10%, var(--color-bg-raised)))}._1seauxl6[aria-disabled=true]{color:var(--color-fg-muted);cursor:not-allowed}._1seauxl7{visibility:hidden;flex-shrink:0}._1seauxl6[aria-selected=true] ._1seauxl7{visibility:visible}@media (forced-colors:active){._1seauxl6[data-highlighted]{forced-color-adjust:none;color:highlighttext;background-color:highlight}._1seauxl6[data-highlighted]:focus-visible{color:canvastext;background-color:canvas}._1seauxl6[aria-disabled=true]{color:graytext}}}

package/dist/MultiSelect/client.mjs

@@ -1,18 +1,18 @@
 "use client";
 import { splitStyleProps as e } from "../styles/split-style-props.mjs";
-import { Box as t } from "../Box/index.mjs";
+import { Box as t } from "../Box/base.mjs";
 import { Text as n } from "../Text/index.mjs";
 import { PopupScope as r, triggerElement as i, useClosingRule as a, usePopupScope as o, useRecordOpenChange as s } from "../popup/client.mjs";
 import { Field as c } from "../Field/index.mjs";
 import { ChevronDownIcon as l } from "../icons/ChevronDownIcon.mjs";
 import { labels as u, popup as d, summary as f, trigger as p, value as m } from "./MultiSelect.css.mjs";
-import { jsx as h, jsxs as g } from "react/jsx-runtime";
-import { createContext as _, use as v, useId as y, useLayoutEffect as b, useMemo as x, useRef as S, useState as C } from "react";
+import { createContext as h, use as g, useId as _, useLayoutEffect as v, useMemo as y, useRef as b, useState as x } from "react";
+import { jsx as S, jsxs as C } from "react/jsx-runtime";
 import { Select as w } from "@base-ui/react/select";
 //#region src/MultiSelect/client.tsx
 function T({ options: e, placeholder: t, countLabel: n, disabled: r, size: a }) {
-	let { ref: s } = o(), c = x(() => new Map(e.map((e) => [e.value, e.label])), [e]);
-	return /* @__PURE__ */ h(w.Trigger, {
+	let { ref: s } = o(), c = y(() => new Map(e.map((e) => [e.value, e.label])), [e]);
+	return /* @__PURE__ */ S(w.Trigger, {
 		disabled: r,
 		ref: s,
 		render: i({
@@ -20,10 +20,10 @@ function T({ options: e, placeholder: t, countLabel: n, disabled: r, size: a })
 			size: a,
 			iconEnd: l,
 			className: p,
-			children: /* @__PURE__ */ h(w.Value, {
+			children: /* @__PURE__ */ S(w.Value, {
 				className: m,
 				placeholder: t,
-				children: (e) => e.length > 0 ? /* @__PURE__ */ h(E, {
+				children: (e) => e.length > 0 ? /* @__PURE__ */ S(E, {
 					count: n.replaceAll("{count}", String(e.length)),
 					labels: e.map((e) => c.get(e) ?? e)
 				}) : t
@@ -32,8 +32,8 @@ function T({ options: e, placeholder: t, countLabel: n, disabled: r, size: a })
 	});
 }
 function E({ labels: e, count: r }) {
-	let i = S(null), [a, o] = C(!0), s = e.join(", ");
-	b(() => {
+	let i = b(null), [a, o] = x(!0), s = e.join(", ");
+	v(() => {
 		let e = i.current;
 		if (!e) return;
 		let t = () => o(e.scrollWidth <= e.clientWidth);
@@ -42,17 +42,17 @@ function E({ labels: e, count: r }) {
 		return n.observe(e), () => n.disconnect();
 	}, [s]);
 	let c = !a && e.length > 1;
-	return /* @__PURE__ */ g(t, {
+	return /* @__PURE__ */ C(t, {
 		as: "span",
 		className: f,
-		children: [/* @__PURE__ */ h(n, {
+		children: [/* @__PURE__ */ S(n, {
 			"aria-hidden": c || void 0,
 			as: "span",
 			className: u,
 			ref: i,
 			truncate: "box",
 			children: s
-		}), c && /* @__PURE__ */ h(n, {
+		}), c && /* @__PURE__ */ S(n, {
 			as: "span",
 			className: "_1seauxl4",
 			truncate: "box",
@@ -60,31 +60,31 @@ function E({ labels: e, count: r }) {
 		})]
 	});
 }
-var D = _(void 0);
+var D = h(void 0);
 function O({ children: e }) {
-	return /* @__PURE__ */ h(r, { children: /* @__PURE__ */ h(D, {
-		value: y(),
+	return /* @__PURE__ */ S(r, { children: /* @__PURE__ */ S(D, {
+		value: _(),
 		children: e
 	}) });
 }
 function k(e) {
-	return /* @__PURE__ */ h(w.Root, {
+	return /* @__PURE__ */ S(w.Root, {
 		...e,
 		multiple: !0,
 		onOpenChange: s()
 	});
 }
 function A({ children: e }) {
-	return /* @__PURE__ */ h(c.Label, {
-		id: v(D),
+	return /* @__PURE__ */ S(c.Label, {
+		id: g(D),
 		nativeLabel: !1,
 		children: e
 	});
 }
 function j({ children: e }) {
-	return /* @__PURE__ */ h(w.Popup, {
-		"aria-labelledby": v(D),
-		render: /* @__PURE__ */ h(t, {
+	return /* @__PURE__ */ S(w.Popup, {
+		"aria-labelledby": g(D),
+		render: /* @__PURE__ */ S(t, {
 			backgroundColor: "bgRaised",
 			borderRadius: "med",
 			boxShadow: "med",
@@ -96,19 +96,19 @@ function j({ children: e }) {
 }
 function M({ children: e }) {
 	let { container: t } = o();
-	return /* @__PURE__ */ h(w.Portal, {
+	return /* @__PURE__ */ S(w.Portal, {
 		container: t,
 		children: e
 	});
 }
 function N({ children: t }) {
-	return /* @__PURE__ */ h(w.Positioner, {
+	return /* @__PURE__ */ S(w.Positioner, {
 		align: "start",
 		alignItemWithTrigger: !1,
 		collisionPadding: 8,
 		render: (t, { open: n }) => {
 			let [, r] = e(t);
-			return /* @__PURE__ */ h(P, {
+			return /* @__PURE__ */ S(P, {
 				...r,
 				open: n
 			});
@@ -119,7 +119,7 @@ function N({ children: t }) {
 	});
 }
 function P({ open: e, ref: n, ...r }) {
-	return /* @__PURE__ */ h(t, {
+	return /* @__PURE__ */ S(t, {
 		...r,
 		...a(n, {
 			finalFocus: !1,

package/dist/MultiSelect/index.d.mts

@@ -1,4 +1,4 @@
-import { StyleProps } from "../Box/index.mjs";
+import { StyleProps } from "../Box/base.mjs";
 import { Option } from "./client.mjs";
 import { CSSProperties, ReactNode } from "react";
 //#region src/MultiSelect/index.d.ts

package/dist/MultiSelect/index.mjs

@@ -1,4 +1,4 @@
-import { Box as e } from "../Box/index.mjs";
+import { Box as e } from "../Box/base.mjs";
 import { Text as t } from "../Text/index.mjs";
 import { CheckIcon as n } from "../icons/CheckIcon.mjs";
 import { Field as r } from "../Field/index.mjs";

package/dist/SearchField/SearchField.css

@@ -1,2 +1,2 @@
-@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.avatar, components.badge, components.button, components.chip, components.field, components.color-field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
+@layer tokens, reset, atoms.base, atoms.sm, atoms.med, atoms.lg, atoms.xl, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.avatar, components.badge, components.button, components.chip, components.field, components.color-field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
 @layer components.search-field{._1cj8r6g0{clip-path:inset(50%);white-space:nowrap;border:0;block-size:1px;inline-size:1px;margin:0;padding:0;position:absolute;overflow:hidden}._1cj8r6g2{grid-template-columns:var(--space-8) auto minmax(0, 1fr) auto var(--space-4)}._1cj8r6g3{grid-template-columns:var(--space-12) auto minmax(0, 1fr) auto var(--space-4)}._1cj8r6g4{grid-template-columns:var(--space-16) auto minmax(0, 1fr) auto var(--space-4)}._1cj8r6g5{appearance:none;border-width:var(--space-1);border-style:solid;border-color:var(--color-border-strong);border-radius:var(--radius-med);background-color:var(--color-bg);inline-size:100%;min-inline-size:0;color:var(--color-fg);grid-area:1/1/auto/-1;padding-block:0}._1cj8r6g5::placeholder{color:var(--color-fg-muted);opacity:1}._1cj8r6g5:focus-visible{outline:var(--space-2) solid var(--color-focus);outline-offset:var(--space-2)}._1cj8r6g5:disabled{background-color:var(--color-bg-muted);color:var(--color-fg-muted);cursor:not-allowed;border-style:dashed}._1cj8r6g5[aria-invalid=true]{border-color:var(--color-danger)}._1cj8r6g5::-webkit-search-cancel-button{appearance:none}._1cj8r6g5::-webkit-search-decoration{appearance:none}._1cj8r6g6{block-size:var(--size-sm);padding-inline-start:calc(var(--space-8) + var(--space-8) + var(--font-size-sm));padding-inline-end:var(--size-sm)}._1cj8r6g7{block-size:var(--size-med);padding-inline-start:calc(var(--space-12) + var(--space-8) + var(--font-size-med));padding-inline-end:var(--size-med)}._1cj8r6g8{block-size:var(--size-lg);padding-inline-start:calc(var(--space-16) + var(--space-8) + var(--font-size-lg));padding-inline-end:var(--size-lg)}._1cj8r6g9{pointer-events:none;color:var(--color-fg-muted);grid-area:1/2}._1cj8r6ga{border-color:#0000;grid-area:1/4}@media (forced-colors:active){._1cj8r6g5:disabled{color:graytext;border-color:graytext}}}

package/dist/SearchField/client.mjs

@@ -1,12 +1,12 @@
 "use client";
-import { Box as e } from "../Box/index.mjs";
+import { Box as e } from "../Box/base.mjs";
 import { Text as t } from "../Text/index.mjs";
 import { IconButton as n } from "../IconButton/index.mjs";
 import { SearchIcon as r } from "../icons/SearchIcon.mjs";
 import { XIcon as i } from "../icons/XIcon.mjs";
 import { icon as a, input as o, root as s } from "./SearchField.css.mjs";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
-import { useRef as u, useState as d } from "react";
+import { useRef as c, useState as l } from "react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
 import { Input as f } from "@base-ui/react/input";
 //#region src/SearchField/client.tsx
 var p = {
@@ -24,26 +24,26 @@ var p = {
 	}
 };
 function m({ value: m, defaultValue: h, onValueChange: g, placeholder: _, size: v, disabled: y, required: b, name: x, clearLabel: S, inputProps: { ref: C, onKeyDown: w, ...T } = {} }) {
-	let E = u(null), [D, O] = d(h), k = m ?? D, A = (e) => {
+	let E = c(null), [D, O] = l(h), k = m ?? D, A = (e) => {
 		m === void 0 && O(e), g?.(e);
 	}, j = k !== "" && (m === void 0 || g !== void 0), M = (e) => {
 		if (w?.(e), e.defaultPrevented) return;
 		let t = e.nativeEvent.isComposing || e.keyCode === 229;
 		e.key === "Escape" && j && !t && (e.preventDefault(), e.stopPropagation(), A(""));
 	}, N = p[v];
-	return /* @__PURE__ */ l(e, {
+	return /* @__PURE__ */ d(e, {
 		alignItems: "center",
 		className: s({ size: v }),
 		display: "grid",
 		children: [
-			/* @__PURE__ */ c(f, {
+			/* @__PURE__ */ u(f, {
 				...T,
 				name: x,
 				onKeyDown: M,
 				onValueChange: A,
 				placeholder: _,
 				ref: C,
-				render: /* @__PURE__ */ c(t, {
+				render: /* @__PURE__ */ u(t, {
 					as: "input",
 					className: o({ size: v }),
 					ref: E,
@@ -53,11 +53,11 @@ function m({ value: m, defaultValue: h, onValueChange: g, placeholder: _, size:
 				type: "search",
 				value: k
 			}),
-			/* @__PURE__ */ c(r, {
+			/* @__PURE__ */ u(r, {
 				className: a,
 				size: v
 			}),
-			k !== "" && !y && /* @__PURE__ */ c(n, {
+			k !== "" && !y && /* @__PURE__ */ u(n, {
 				className: "_1cj8r6ga",
 				icon: i,
 				label: S,

package/dist/SearchField/index.d.mts

@@ -1,4 +1,4 @@
-import { StyleProps } from "../Box/index.mjs";
+import { StyleProps } from "../Box/base.mjs";
 import { SearchFieldInputProps } from "./client.mjs";
 import { CSSProperties, ReactNode } from "react";
 //#region src/SearchField/index.d.ts

package/dist/Stack/Stack.css

@@ -1,2 +1,2 @@
-@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.avatar, components.badge, components.button, components.chip, components.field, components.color-field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
+@layer tokens, reset, atoms.base, atoms.sm, atoms.med, atoms.lg, atoms.xl, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.avatar, components.badge, components.button, components.chip, components.field, components.color-field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
 @layer components.stack;

package/dist/Stack/index.d.mts

@@ -1,5 +1,6 @@
 import { PolymorphicProps } from "../types.mjs";
-import { StyleProps } from "../Box/index.mjs";
+import { StyleProps } from "../Box/base.mjs";
+import "../Box/index.mjs";
 import { ElementType } from "react";
 //#region src/Stack/index.d.ts
 type Gap = StyleProps["gap"];

package/dist/Tabs/Tabs.css

@@ -1,2 +1,2 @@
-@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.avatar, components.badge, components.button, components.chip, components.field, components.color-field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
+@layer tokens, reset, atoms.base, atoms.sm, atoms.med, atoms.lg, atoms.xl, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.avatar, components.badge, components.button, components.chip, components.field, components.color-field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
 @layer components.tabs{.xowpd00{border-block-end:var(--space-1) solid var(--color-border)}.xowpd00[aria-orientation=vertical]{border-block-end:none;border-inline-end:var(--space-1) solid var(--color-border);flex-direction:column}.xowpd01{transition:color var(--duration-fast) var(--easing-standard)}.xowpd01[aria-selected=true]{color:var(--color-fg)}.xowpd01[aria-disabled=true]{opacity:.5}.xowpd02{border-block-end:var(--space-2) solid var(--color-accent);opacity:0;scale:calc(1 - var(--scale-lg)) 1;transition:opacity var(--duration-med) var(--easing-standard), scale var(--duration-med) var(--easing-standard);pointer-events:none;inset-block-end:calc(-1 * var(--space-1));inset-inline:0}[data-orientation=vertical]>.xowpd02{inset-inline:auto;border-block-end:none;border-inline-end:var(--space-2) solid var(--color-accent);scale:1 calc(1 - var(--scale-lg));inset-block:0;inset-inline-end:calc(-1 * var(--space-1))}[aria-selected=true]>.xowpd02{opacity:1;scale:1}.xowpd03:focus-visible{outline:var(--space-2) solid var(--color-focus);outline-offset:var(--space-2)}.xowpd03[data-orientation=vertical]{flex-basis:0}@media (hover:hover){.xowpd01:not([aria-disabled=true]):hover{color:var(--color-fg)}}@media (forced-colors:active){.xowpd01[aria-disabled=true]{color:graytext}.xowpd02{border-color:highlight}}}

package/dist/Tabs/index.mjs

@@ -1,6 +1,6 @@
 import { join as e } from "../styles/join.mjs";
 import { splitStyleProps as t } from "../styles/split-style-props.mjs";
-import { Box as n } from "../Box/index.mjs";
+import { Box as n } from "../Box/base.mjs";
 import { Clickable as r } from "../Clickable/index.mjs";
 import { Text as i } from "../Text/index.mjs";
 import { splitTextProps as a } from "../styles/split-text-props.mjs";

package/dist/Tag/Tag.css

@@ -1,2 +1,2 @@
-@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.avatar, components.badge, components.button, components.chip, components.field, components.color-field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
+@layer tokens, reset, atoms.base, atoms.sm, atoms.med, atoms.lg, atoms.xl, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.avatar, components.badge, components.button, components.chip, components.field, components.color-field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
 @layer components.tag{._1jsyd8s0{border-width:var(--space-1);border-style:solid;border-color:#0000}._1jsyd8s1{overflow-wrap:anywhere}._1jsyd8s0:hover ._1jsyd8s1,._1jsyd8s0:focus-within ._1jsyd8s1{padding-block:var(--space-4);margin-block:0}._1jsyd8s2{text-decoration:underline}._1jsyd8s3:hover{background-color:var(--color-bg)}@media (forced-colors:active){._1jsyd8s0{color:canvastext;background-color:canvas;border-color:canvastext}}}

package/dist/Tag/index.d.mts

@@ -1,5 +1,5 @@
 import { OmitEach } from "../types.mjs";
-import { StyleProps } from "../Box/index.mjs";
+import { StyleProps } from "../Box/base.mjs";
 import { Tone } from "../styles/subtle-fills.mjs";
 import { ComponentPropsWithRef } from "react";
 //#region src/Tag/index.d.ts

package/dist/Tag/index.mjs

@@ -1,5 +1,5 @@
 import { join as e } from "../styles/join.mjs";
-import { Box as t } from "../Box/index.mjs";
+import { Box as t } from "../Box/base.mjs";
 import { Clickable as n } from "../Clickable/index.mjs";
 import { Text as r } from "../Text/index.mjs";
 import { subtleFills as i } from "../styles/subtle-fills.mjs";

package/dist/Text/Text.css

@@ -1,2 +1,2 @@
-@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.avatar, components.badge, components.button, components.chip, components.field, components.color-field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
+@layer tokens, reset, atoms.base, atoms.sm, atoms.med, atoms.lg, atoms.xl, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.avatar, components.badge, components.button, components.chip, components.field, components.color-field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
 @layer components.text{._1mgdisq3{--_1mgdisq0:var(--line-height-med);--_1mgdisq1:calc((var(--font-trim-body-cap) - var(--_1mgdisq0) / 2) * 1em);--_1mgdisq2:calc((var(--font-trim-body-baseline) - var(--_1mgdisq0) / 2) * 1em);font-family:var(--font-body);font-size:var(--font-size-med);font-weight:var(--font-weight-regular);line-height:var(--_1mgdisq0)}._1mgdisq3:before{content:"";margin-block-end:var(--_1mgdisq1);display:table}._1mgdisq3:after{content:"";margin-block-start:var(--_1mgdisq2);display:table}:where(._1mgdisq3)>._1mgdisq3:where(a,abbr,b,bdi,bdo,cite,code,data,del,dfn,em,i,ins,kbd,label,mark,output,q,s,samp,small,span,strong,sub,sup,time,u,var){--_1mgdisq0:inherit;--_1mgdisq1:inherit;--_1mgdisq2:inherit;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;display:inline}:where(._1mgdisq3)>._1mgdisq3:where(a,abbr,b,bdi,bdo,cite,code,data,del,dfn,em,i,ins,kbd,label,mark,output,q,s,samp,small,span,strong,sub,sup,time,u,var):before,:where(._1mgdisq3)>._1mgdisq3:where(a,abbr,b,bdi,bdo,cite,code,data,del,dfn,em,i,ins,kbd,label,mark,output,q,s,samp,small,span,strong,sub,sup,time,u,var):after{content:none}._1mgdisq4{--_1mgdisq0:inherit;--_1mgdisq1:inherit;--_1mgdisq2:inherit;text-overflow:ellipsis;white-space:nowrap;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit}._1mgdisq4:before,._1mgdisq4:after{content:none}._1mgdisq5{--_1mgdisq1:calc((var(--font-trim-body-cap) - var(--_1mgdisq0) / 2) * 1em);--_1mgdisq2:calc((var(--font-trim-body-baseline) - var(--_1mgdisq0) / 2) * 1em);font-family:var(--font-body)}._1mgdisq6{--_1mgdisq1:calc((var(--font-trim-heading-cap) - var(--_1mgdisq0) / 2) * 1em);--_1mgdisq2:calc((var(--font-trim-heading-baseline) - var(--_1mgdisq0) / 2) * 1em);font-family:var(--font-heading)}._1mgdisq7{--_1mgdisq1:calc((var(--font-trim-display-cap) - var(--_1mgdisq0) / 2) * 1em);--_1mgdisq2:calc((var(--font-trim-display-baseline) - var(--_1mgdisq0) / 2) * 1em);font-family:var(--font-display)}._1mgdisq8{--_1mgdisq1:calc((var(--font-trim-label-cap) - var(--_1mgdisq0) / 2) * 1em);--_1mgdisq2:calc((var(--font-trim-label-baseline) - var(--_1mgdisq0) / 2) * 1em);font-family:var(--font-label)}._1mgdisq9{--_1mgdisq1:calc((var(--font-trim-mono-cap) - var(--_1mgdisq0) / 2) * 1em);--_1mgdisq2:calc((var(--font-trim-mono-baseline) - var(--_1mgdisq0) / 2) * 1em);font-family:var(--font-mono)}._1mgdisqa{font-size:var(--font-size-xs)}._1mgdisqb{font-size:var(--font-size-sm)}._1mgdisqc{font-size:var(--font-size-med)}._1mgdisqd{font-size:var(--font-size-lg)}._1mgdisqe{font-size:var(--font-size-xl)}._1mgdisqf{font-size:var(--font-size-2xl)}._1mgdisqg{font-size:var(--font-size-3xl)}._1mgdisqh{font-size:var(--font-size-4xl)}._1mgdisqi{font-weight:var(--font-weight-regular)}._1mgdisqj{font-weight:var(--font-weight-medium)}._1mgdisqk{font-weight:var(--font-weight-semibold)}._1mgdisql{font-weight:var(--font-weight-bold)}._1mgdisqm{--_1mgdisq0:var(--line-height-sm);line-height:var(--_1mgdisq0)}._1mgdisqn{--_1mgdisq0:var(--line-height-med);line-height:var(--_1mgdisq0)}._1mgdisqo{--_1mgdisq0:var(--line-height-lg);line-height:var(--_1mgdisq0)}._1mgdisqp{white-space:nowrap}._1mgdisqq{text-overflow:ellipsis;white-space:nowrap;margin-block-start:var(--_1mgdisq1);margin-block-end:var(--_1mgdisq2);padding-block-start:calc(-1 * var(--_1mgdisq1));padding-block-end:calc(-1 * var(--_1mgdisq2))}:where([data-text-reveal]:hover,[data-text-reveal]:focus-within) ._1mgdisqq{white-space:normal;text-overflow:clip}}

package/dist/Text/index.d.mts

@@ -1,5 +1,5 @@
 import { PolymorphicProps } from "../types.mjs";
-import { StyleProps } from "../Box/index.mjs";
+import { StyleProps } from "../Box/base.mjs";
 import { tokens } from "../tokens/scales.mjs";
 import { FontRole } from "../tokens/roles.mjs";
 import { ElementType } from "react";

package/dist/Text/index.mjs

@@ -1,5 +1,5 @@
 import { join as e } from "../styles/join.mjs";
-import { Box as t } from "../Box/index.mjs";
+import { Box as t } from "../Box/base.mjs";
 import { font as n, leading as r, root as i, size as a, weight as o, wrap as s } from "./Text.css.mjs";
 import { jsx as c } from "react/jsx-runtime";
 //#region src/Text/index.tsx

package/dist/TextField/TextField.css

@@ -1,2 +1,2 @@
-@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.avatar, components.badge, components.button, components.chip, components.field, components.color-field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
+@layer tokens, reset, atoms.base, atoms.sm, atoms.med, atoms.lg, atoms.xl, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.avatar, components.badge, components.button, components.chip, components.field, components.color-field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
 @layer components.text-field{._20at410{clip-path:inset(50%);white-space:nowrap;border:0;block-size:1px;inline-size:1px;margin:0;padding:0;position:absolute;overflow:hidden}._20at411{appearance:none;border-width:var(--space-1);border-style:solid;border-color:var(--color-border-strong);border-radius:var(--radius-med);background-color:var(--color-bg);inline-size:100%;min-inline-size:0;color:var(--color-fg);padding-block:0}._20at411::placeholder{color:var(--color-fg-muted);opacity:1}._20at411:focus-visible{outline:var(--space-2) solid var(--color-focus);outline-offset:var(--space-2)}._20at411:disabled{background-color:var(--color-bg-muted);color:var(--color-fg-muted);cursor:not-allowed;border-style:dashed}._20at411[aria-invalid=true]{border-color:var(--color-danger)}._20at412{block-size:var(--size-sm);padding-inline:var(--space-8)}._20at413{block-size:var(--size-med);padding-inline:var(--space-12)}._20at414{block-size:var(--size-lg);padding-inline:var(--space-16)}@media (forced-colors:active){._20at411:disabled{color:graytext;border-color:graytext}}}

package/dist/TextField/index.d.mts

@@ -1,4 +1,4 @@
-import { StyleProps } from "../Box/index.mjs";
+import { StyleProps } from "../Box/base.mjs";
 import { SearchFieldInputProps } from "../SearchField/client.mjs";
 import "../SearchField/index.mjs";
 import { CSSProperties, ComponentPropsWithRef, ReactNode } from "react";

package/dist/Toast/Toast.css

@@ -1,2 +1,2 @@
-@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.avatar, components.badge, components.button, components.chip, components.field, components.color-field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
+@layer tokens, reset, atoms.base, atoms.sm, atoms.med, atoms.lg, atoms.xl, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.avatar, components.badge, components.button, components.chip, components.field, components.color-field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
 @layer components.toast{.hcnvsc1{inline-size:min(100% - 2 * var(--space-16), 6 * var(--space-64));inset-block-end:var(--space-16);inset-inline-end:var(--space-16);container:hcnvsc0/inline-size}.hcnvsc1:focus-visible{outline:var(--space-2) solid var(--color-focus);outline-offset:var(--space-2)}.hcnvsc2{gap:var(--space-8);margin:calc(-1 * var(--space-16));padding:var(--space-16);overscroll-behavior:contain;flex-direction:column;max-block-size:100dvh;margin-inline-start:calc(-1 * var(--space-24));padding-inline-start:var(--space-24);display:flex;overflow:hidden auto}.hcnvsc2:empty{padding:0}.hcnvsc2:has([data-swiping],[data-swipe-direction=down]){overflow-y:hidden}.hcnvsc3{border:var(--space-1) solid var(--color-border);transform:translate(var(--toast-swipe-movement-x,0), var(--toast-swipe-movement-y,0));transition:opacity var(--duration-med) var(--easing-standard), translate var(--duration-med) var(--easing-enter), transform var(--duration-med) var(--easing-enter)}.hcnvsc3:focus-visible{outline:var(--space-2) solid var(--color-focus);outline-offset:var(--space-2)}.hcnvsc3[data-starting-style],.hcnvsc3[data-ending-style]{opacity:0;translate:0 var(--distance-med)}.hcnvsc3[data-swiping]{transition:none}.hcnvsc3[data-limited]{display:none}.hcnvsc4{overflow-wrap:anywhere}.hcnvsca{clip-path:inset(50%);white-space:nowrap;border:0;block-size:1px;inline-size:1px;margin:0;padding:0;position:absolute;inset-block-start:0;inset-inline-start:0;overflow:hidden}@container hcnvsc0 (inline-size<16rem){.hcnvsc3{flex-wrap:wrap}.hcnvsc4{flex-basis:100%;order:1}.hcnvsc5{margin-inline-start:auto}}}