@jonmilner/ui 0.8.1 → 0.9.0

package/dist/Menu/client.mjs

@@ -1,48 +1,91 @@
 "use client";
 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 { PopupScope as r, triggerElement as i, useClosingRule as a, usePopupScope as o, useRecordOpenChange as s } from "../popup/client.mjs";
-import { positioner as c } from "./Menu.css.mjs";
-import { jsx as l } from "react/jsx-runtime";
-import { Menu as u } from "@base-ui/react/menu";
+import { Box as n } from "../Box/base.mjs";
+import { Text as r } from "../Text/index.mjs";
+import { PopupScope as i, triggerElement as a, useClosingRule as o, usePopupScope as s, useRecordOpenChange as c } from "../popup/client.mjs";
+import { IconButton as l } from "../IconButton/index.mjs";
+import { description as u, positioner as d } from "./Menu.css.mjs";
+import { useId as f } from "react";
+import { Fragment as p, jsx as m, jsxs as h } from "react/jsx-runtime";
+import { Menu as g } from "@base-ui/react/menu";
 //#region src/Menu/client.tsx
-function d({ disabled: e = !1, openOnHover: t, delay: n, closeDelay: r, handle: a, payload: s, ...c }) {
-	let { ref: d } = o();
-	return /* @__PURE__ */ l(u.Trigger, {
+function _({ disabled: e = !1, openOnHover: t, delay: n, closeDelay: r, handle: i, payload: o, icon: c, label: u, ...d }) {
+	let { ref: f } = s();
+	return /* @__PURE__ */ m(g.Trigger, {
 		disabled: e,
 		openOnHover: t,
 		delay: n,
 		closeDelay: r,
-		handle: a,
-		payload: s,
-		ref: d,
-		render: i(c)
+		handle: i,
+		payload: o,
+		ref: f,
+		render: c ? /* @__PURE__ */ m(l, {
+			...d,
+			icon: c,
+			label: u
+		}) : a(d)
 	});
 }
-function f({ children: e }) {
-	let { container: t } = o();
-	return /* @__PURE__ */ l(u.Portal, {
+function v(e, t, i) {
+	let a = f();
+	return t === void 0 ? { content: e } : {
+		aria: { "aria-describedby": i ? `${a} ${i}` : a },
+		content: /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ m(n, {
+			alignItems: "center",
+			as: "span",
+			display: "flex",
+			gap: "8",
+			children: e
+		}), /* @__PURE__ */ m(r, {
+			"aria-hidden": !0,
+			as: "span",
+			className: u,
+			id: a,
+			size: "xs",
+			children: t
+		})] })
+	};
+}
+function y({ description: e, children: t, ...n }) {
+	let { aria: r, content: i } = v(t, e, n["aria-describedby"]);
+	return /* @__PURE__ */ m(g.Item, {
+		...n,
+		...r,
+		children: i
+	});
+}
+function b({ description: e, children: t, ...n }) {
+	let { aria: r, content: i } = v(t, e, n["aria-describedby"]);
+	return /* @__PURE__ */ m(g.LinkItem, {
+		...n,
+		...r,
+		children: i
+	});
+}
+function x({ children: e }) {
+	let { container: t } = s();
+	return /* @__PURE__ */ m(g.Portal, {
 		container: t,
 		children: e
 	});
 }
-function p(e) {
-	return /* @__PURE__ */ l(r, { children: /* @__PURE__ */ l(m, { ...e }) });
+function S(e) {
+	return /* @__PURE__ */ m(i, { children: /* @__PURE__ */ m(C, { ...e }) });
 }
-function m({ onOpenChange: e, ...t }) {
-	return /* @__PURE__ */ l(u.Root, {
+function C({ onOpenChange: e, ...t }) {
+	return /* @__PURE__ */ m(g.Root, {
 		...t,
-		onOpenChange: s(e)
+		onOpenChange: c(e)
 	});
 }
-function h({ finalFocus: e, ...n }) {
-	return /* @__PURE__ */ l(u.Positioner, {
+function w({ finalFocus: e, ...n }) {
+	return /* @__PURE__ */ m(g.Positioner, {
 		...n,
 		collisionPadding: 8,
 		render: (n, { open: r }) => {
 			let [, i] = t(n);
-			return /* @__PURE__ */ l(g, {
+			return /* @__PURE__ */ m(T, {
 				...i,
 				finalFocus: e,
 				open: r
@@ -51,16 +94,16 @@ function h({ finalFocus: e, ...n }) {
 		sideOffset: 4
 	});
 }
-function g({ open: t, finalFocus: r, ref: i, className: o, ...s }) {
-	return /* @__PURE__ */ l(n, {
+function T({ open: t, finalFocus: r, ref: i, className: a, ...s }) {
+	return /* @__PURE__ */ m(n, {
 		...s,
-		...a(i, {
+		...o(i, {
 			finalFocus: r,
 			open: t
 		}),
-		className: e(c, o),
+		className: e(d, a),
 		zIndex: "popover"
 	});
 }
 //#endregion
-export { f as MenuPortal, h as MenuPositioner, p as MenuRootScope, d as MenuTrigger };
+export { y as MenuItemPart, b as MenuLinkItemPart, x as MenuPortal, w as MenuPositioner, S as MenuRootScope, _ as MenuTrigger };

package/dist/Menu/index.d.mts

@@ -1,4 +1,4 @@
-import { StyleProps } from "../Box/index.mjs";
+import { StyleProps } from "../Box/base.mjs";
 import { MenuTrigger, MenuTriggerProps } from "./client.mjs";
 import { CSSProperties, ReactNode } from "react";
 import { Menu as Menu$1 } from "@base-ui/react/menu";
@@ -11,10 +11,13 @@ export type MenuProps = Pick<Menu$1.Root.Props, "open" | "defaultOpen" | "onOpen
   children?: ReactNode;
 };
 export type MenuPopupProps = PartProps<Menu$1.Popup.Props> & Pick<Menu$1.Positioner.Props, "side" | "align">;
-export type MenuItemProps = PartProps<Menu$1.Item.Props> & {
+type ItemDescription = {
+  description?: ReactNode;
+};
+export type MenuItemProps = PartProps<Menu$1.Item.Props> & ItemDescription & {
   variant?: "neutral" | "danger";
 };
-export type MenuLinkItemProps = PartProps<Menu$1.LinkItem.Props> & {
+export type MenuLinkItemProps = PartProps<Menu$1.LinkItem.Props> & ItemDescription & {
   disabled?: boolean;
   href: string;
 };
@@ -24,8 +27,8 @@ export type MenuGroupProps = PartProps<Menu$1.Group.Props> & {
 };
 declare function MenuRoot(props: MenuProps): import("react").JSX.Element;
 declare function MenuPopup({ side, align, backgroundColor, borderRadius, boxShadow, padding, className, style, ...props }: MenuPopupProps): import("react").JSX.Element;
-declare function MenuItem({ variant, display, alignItems, gap, minBlockSize, paddingInline, borderRadius, color, className, style, children, ...props }: MenuItemProps): import("react").JSX.Element;
-declare function MenuLinkItem({ href, disabled, closeOnClick, onClick, display, alignItems, gap, minBlockSize, paddingInline, borderRadius, color, className, style, children, ...props }: MenuLinkItemProps): import("react").JSX.Element;
+declare function MenuItem({ variant, description, display, minBlockSize, paddingInline, borderRadius, color, className, style, children, ...props }: MenuItemProps): import("react").JSX.Element;
+declare function MenuLinkItem({ href, disabled, closeOnClick, onClick, description, display, minBlockSize, paddingInline, borderRadius, color, className, style, children, ...props }: MenuLinkItemProps): import("react").JSX.Element;
 declare function MenuSeparator({ paddingBlock, paddingInline, className, style, ...props }: MenuSeparatorProps): import("react").JSX.Element;
 declare function MenuGroup({ label, className, style, children, ...props }: MenuGroupProps): import("react").JSX.Element;
 export declare const Menu: typeof MenuRoot & {

package/dist/Menu/index.mjs

@@ -1,92 +1,104 @@
 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 { MenuPortal as c, MenuPositioner as l, MenuRootScope as u, MenuTrigger as d } from "./client.mjs";
-import { jsx as f, jsxs as p } from "react/jsx-runtime";
+import { MenuItemPart as c, MenuLinkItemPart as l, MenuPortal as u, MenuPositioner as d, MenuRootScope as f, MenuTrigger as p } from "./client.mjs";
 import { Children as m } from "react";
-import { Menu as h } from "@base-ui/react/menu";
+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 g(e) {
-	return /* @__PURE__ */ f(u, { ...e });
+function v(e) {
+	return /* @__PURE__ */ h(f, { ...e });
 }
-function _({ side: r = "bottom", align: i = "start", backgroundColor: a = "bgRaised", borderRadius: s = "med", boxShadow: u = "med", padding: d = "4", className: p, style: m, ...g }) {
-	let [_, v] = t(g);
-	return /* @__PURE__ */ f(c, { children: /* @__PURE__ */ f(l, {
+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__ */ f(h.Popup, {
+		children: /* @__PURE__ */ h(_.Popup, {
 			...v,
-			render: /* @__PURE__ */ f(n, {
+			render: /* @__PURE__ */ h(n, {
 				backgroundColor: a,
 				borderRadius: s,
-				boxShadow: u,
-				padding: d,
-				..._,
-				className: e(o, p),
-				style: m
+				boxShadow: c,
+				padding: l,
+				...g,
+				className: e(o, f),
+				style: p
 			})
 		})
 	}) });
 }
-function v(e) {
-	return m.map(e, (e) => typeof e == "string" || typeof e == "number" ? /* @__PURE__ */ f(r, {
+function b(e) {
+	return m.map(e, (e) => typeof e == "string" || typeof e == "number" ? /* @__PURE__ */ h(r, {
 		as: "span",
 		font: "label",
 		size: "sm",
 		children: e
 	}) : e);
 }
-function y({ variant: r = "neutral", display: a = "flex", alignItems: o = "center", gap: s = "8", minBlockSize: c = "sm", paddingInline: l = "12", borderRadius: u = "sm", color: d = r === "danger" ? "danger" : "fg", className: p, style: m, children: g, ..._ }) {
-	let [y, b] = t(_);
-	return /* @__PURE__ */ f(h.Item, {
-		...b,
-		render: /* @__PURE__ */ f(n, {
-			display: a,
-			alignItems: o,
-			gap: s,
-			minBlockSize: c,
+var x = (e) => e == null || e === !1 || e === "" ? void 0 : e, S = (e, t) => t !== void 0 && (typeof e == "string" || typeof e == "number") ? String(e) : void 0, C = (e) => e ? {
+	flexDirection: "column",
+	alignItems: "stretch",
+	justifyContent: "center",
+	gap: "4",
+	paddingBlock: "8"
+} : {
+	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: m, ...g }) {
+	let [_, v] = t(g), y = x(a);
+	return /* @__PURE__ */ h(c, {
+		label: S(m, y),
+		...v,
+		description: y,
+		render: /* @__PURE__ */ h(n, {
+			...C(y !== void 0),
+			display: o,
+			minBlockSize: s,
 			paddingInline: l,
 			borderRadius: u,
 			color: d,
-			...y,
-			className: e(i, p),
-			style: m
+			..._,
+			className: e(i, f),
+			style: p
 		}),
-		children: v(g)
+		children: b(m)
 	});
 }
-function b({ href: r, disabled: o = !1, closeOnClick: s = !0, onClick: c, display: l = "flex", alignItems: u = "center", gap: d = "8", minBlockSize: p = "sm", paddingInline: m = "12", borderRadius: g = "sm", color: _ = "fg", className: y, style: b, children: x, ...S }) {
-	let [C, w] = t(S);
-	return /* @__PURE__ */ f(h.LinkItem, {
-		...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__ */ h(l, {
+		label: S(y, D),
+		...E,
 		"aria-disabled": o || void 0,
 		closeOnClick: !o && s,
+		description: D,
 		href: o ? void 0 : r,
 		onClick: o ? void 0 : c,
-		render: /* @__PURE__ */ f(n, {
+		render: /* @__PURE__ */ h(n, {
 			as: "a",
-			display: l,
-			alignItems: u,
-			gap: d,
-			minBlockSize: p,
-			paddingInline: m,
-			borderRadius: g,
-			color: _,
-			...C,
-			className: e(i, a, y),
-			style: b
+			...C(D !== void 0),
+			display: d,
+			minBlockSize: f,
+			paddingInline: p,
+			borderRadius: m,
+			color: g,
+			...T,
+			className: e(i, a, _),
+			style: v
 		}),
-		children: v(x)
+		children: b(y)
 	});
 }
-function x({ paddingBlock: r = "4", paddingInline: i = "8", className: a, style: o, ...c }) {
+function E({ paddingBlock: r = "4", paddingInline: i = "8", className: a, style: o, ...c }) {
 	let [l, u] = t(c);
-	return /* @__PURE__ */ f(h.Separator, {
+	return /* @__PURE__ */ h(_.Separator, {
 		...u,
-		render: /* @__PURE__ */ f(n, {
+		render: /* @__PURE__ */ h(n, {
 			paddingBlock: r,
 			paddingInline: i,
 			...l,
@@ -95,17 +107,17 @@ function x({ paddingBlock: r = "4", paddingInline: i = "8", className: a, style:
 		})
 	});
 }
-function S({ label: e, className: i, style: a, children: o, ...s }) {
+function D({ label: e, className: i, style: a, children: o, ...s }) {
 	let [c, l] = t(s);
-	return /* @__PURE__ */ p(h.Group, {
+	return /* @__PURE__ */ g(_.Group, {
 		...l,
-		render: /* @__PURE__ */ f(n, {
+		render: /* @__PURE__ */ h(n, {
 			...c,
 			className: i,
 			style: a
 		}),
-		children: [/* @__PURE__ */ f(h.GroupLabel, {
-			render: /* @__PURE__ */ f(r, {
+		children: [/* @__PURE__ */ h(_.GroupLabel, {
+			render: /* @__PURE__ */ h(r, {
 				as: "div",
 				color: "fgMuted",
 				font: "label",
@@ -117,13 +129,13 @@ function S({ label: e, className: i, style: a, children: o, ...s }) {
 		}), o]
 	});
 }
-var C = Object.assign(g, {
-	Trigger: d,
-	Popup: _,
-	Item: y,
-	LinkItem: b,
-	Separator: x,
-	Group: S
+var O = Object.assign(v, {
+	Trigger: p,
+	Popup: y,
+	Item: w,
+	LinkItem: T,
+	Separator: E,
+	Group: D
 });
 //#endregion
-export { C as Menu };
+export { O as Menu };

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";