@jonmilner/ui 0.8.2 → 0.9.1

package/dist/Toast/client.mjs

@@ -1,6 +1,6 @@
 "use client";
 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 { Button as i } from "../Button/index.mjs";
@@ -10,8 +10,8 @@ import { XIcon as s } from "../icons/XIcon.mjs";
 import { CircleCheckIcon as c } from "../icons/CircleCheckIcon.mjs";
 import { InfoIcon as l } from "../icons/InfoIcon.mjs";
 import { announcer as u, close as d, content as f, list as p, root as m, toast as h, viewport as g } from "./Toast.css.mjs";
-import { jsx as _, jsxs as v } from "react/jsx-runtime";
-import { createContext as y, use as b, useCallback as x, useEffect as S, useLayoutEffect as C, useMemo as w, useRef as T, useState as E } from "react";
+import { createContext as _, use as v, useCallback as y, useEffect as b, useLayoutEffect as x, useMemo as S, useRef as C, useState as w } from "react";
+import { jsx as T, jsxs as E } from "react/jsx-runtime";
 import { Toast as D } from "@base-ui/react/toast";
 //#region src/Toast/client.tsx
 var O = {
@@ -27,29 +27,29 @@ var O = {
 		Icon: o,
 		color: "danger"
 	}
-}, k = y(null), A = y(null), j = (e) => e !== void 0 && Object.hasOwn(O, e);
+}, k = _(null), A = _(null), j = (e) => e !== void 0 && Object.hasOwn(O, e);
 function M({ limit: e = 3, closeLabel: n = "Dismiss", regionLabel: r = "Notifications", className: i, style: o, children: s }) {
-	let { container: c, ref: l } = a(), [u] = E(D.createToastManager);
-	return /* @__PURE__ */ _(D.Provider, {
+	let { container: c, ref: l } = a(), [u] = w(D.createToastManager);
+	return /* @__PURE__ */ T(D.Provider, {
 		limit: e,
 		toastManager: u,
-		children: /* @__PURE__ */ v(k, {
+		children: /* @__PURE__ */ E(k, {
 			value: u,
 			children: [
-				/* @__PURE__ */ _(t, {
+				/* @__PURE__ */ T(t, {
 					as: "span",
 					hidden: !0,
 					ref: l
 				}),
 				s,
-				/* @__PURE__ */ _(P, {}),
-				/* @__PURE__ */ _(D.Portal, {
+				/* @__PURE__ */ T(P, {}),
+				/* @__PURE__ */ T(D.Portal, {
 					container: c,
-					children: /* @__PURE__ */ _(N, {
+					children: /* @__PURE__ */ T(N, {
 						className: i,
 						regionLabel: r,
 						style: o,
-						children: /* @__PURE__ */ _(F, { closeLabel: n })
+						children: /* @__PURE__ */ T(F, { closeLabel: n })
 					})
 				})
 			]
@@ -57,8 +57,8 @@ function M({ limit: e = 3, closeLabel: n = "Dismiss", regionLabel: r = "Notifica
 	});
 }
 function N({ regionLabel: n, className: r, style: i, children: a }) {
-	let o = T(null), s = T(null);
-	return S(() => {
+	let o = C(null), s = C(null);
+	return b(() => {
 		let e = s.current;
 		if (!e) return;
 		let t = e.ownerDocument, n = !1, r = (t) => {
@@ -73,7 +73,7 @@ function N({ regionLabel: n, className: r, style: i, children: a }) {
 		return t.addEventListener("mouseover", r), t.addEventListener("mouseout", i), () => {
 			t.removeEventListener("mouseover", r), t.removeEventListener("mouseout", i);
 		};
-	}, []), /* @__PURE__ */ _(D.Viewport, {
+	}, []), /* @__PURE__ */ T(D.Viewport, {
 		"aria-atomic": void 0,
 		"aria-label": n,
 		"aria-live": "off",
@@ -83,15 +83,15 @@ function N({ regionLabel: n, className: r, style: i, children: a }) {
 			t && !e.currentTarget.contains(t) && (o.current = t);
 		},
 		ref: s,
-		render: /* @__PURE__ */ _(t, {
+		render: /* @__PURE__ */ T(t, {
 			className: e(g, r),
 			position: "fixed",
 			style: i,
 			zIndex: "toast"
 		}),
-		children: /* @__PURE__ */ _("div", {
+		children: /* @__PURE__ */ T("div", {
 			className: p,
-			children: /* @__PURE__ */ _(A, {
+			children: /* @__PURE__ */ T(A, {
 				value: o,
 				children: a
 			})
@@ -99,19 +99,19 @@ function N({ regionLabel: n, className: r, style: i, children: a }) {
 	});
 }
 function P() {
-	let { toasts: e } = D.useToastManager(), t = (t) => e.filter((e) => e.type === "error" === t).map((e) => /* @__PURE__ */ v("div", { children: [
+	let { toasts: e } = D.useToastManager(), t = (t) => e.filter((e) => e.type === "error" === t).map((e) => /* @__PURE__ */ E("div", { children: [
 		e.title,
 		" ",
 		e.description
 	] }, e.id));
-	return /* @__PURE__ */ v("div", {
+	return /* @__PURE__ */ E("div", {
 		className: u,
-		children: [/* @__PURE__ */ _("div", {
+		children: [/* @__PURE__ */ T("div", {
 			"aria-atomic": !1,
 			"aria-live": "polite",
 			role: "status",
 			children: t(!1)
-		}), /* @__PURE__ */ _("div", {
+		}), /* @__PURE__ */ T("div", {
 			"aria-atomic": !1,
 			"aria-live": "assertive",
 			role: "alert",
@@ -121,16 +121,16 @@ function P() {
 }
 function F({ closeLabel: e }) {
 	let { toasts: t } = D.useToastManager();
-	return t.map((t) => /* @__PURE__ */ _(I, {
+	return t.map((t) => /* @__PURE__ */ T(I, {
 		closeLabel: e,
 		toast: t
 	}, t.id));
 }
 function I({ toast: a, closeLabel: o }) {
-	let c = j(a.type) ? a.type : "info", { Icon: l, color: u } = O[c], p = b(k), g = b(A), [y, S] = E(!1), w = x((e) => {
-		e && S(getComputedStyle(e).direction === "rtl");
-	}, []), M = T(!1), N = a.transitionStatus === "ending";
-	return C(() => {
+	let c = j(a.type) ? a.type : "info", { Icon: l, color: u } = O[c], p = v(k), g = v(A), [_, b] = w(!1), S = y((e) => {
+		e && b(getComputedStyle(e).direction === "rtl");
+	}, []), M = C(!1), N = a.transitionStatus === "ending";
+	return x(() => {
 		let e = a.ref?.current, t = e?.ownerDocument.activeElement;
 		if (!N || M.current || !t || !e.contains(t)) return;
 		let n = g?.current;
@@ -139,10 +139,10 @@ function I({ toast: a, closeLabel: o }) {
 		N,
 		g,
 		a.ref
-	]), /* @__PURE__ */ v(D.Root, {
+	]), /* @__PURE__ */ E(D.Root, {
 		"aria-modal": void 0,
-		ref: w,
-		render: /* @__PURE__ */ _(t, {
+		ref: S,
+		render: /* @__PURE__ */ T(t, {
 			alignItems: "start",
 			backgroundColor: "bgRaised",
 			borderRadius: "med",
@@ -153,16 +153,16 @@ function I({ toast: a, closeLabel: o }) {
 			padding: "12"
 		}),
 		role: "group",
-		swipeDirection: ["down", y ? "left" : "right"],
+		swipeDirection: ["down", _ ? "left" : "right"],
 		toast: a,
 		children: [
-			/* @__PURE__ */ _(t, {
+			/* @__PURE__ */ T(t, {
 				display: "flex",
 				flexShrink: 0,
 				paddingBlock: "2",
-				children: /* @__PURE__ */ _(l, { color: u })
+				children: /* @__PURE__ */ T(l, { color: u })
 			}),
-			/* @__PURE__ */ v(t, {
+			/* @__PURE__ */ E(t, {
 				alignItems: "start",
 				className: f,
 				display: "flex",
@@ -170,22 +170,22 @@ function I({ toast: a, closeLabel: o }) {
 				flexGrow: 1,
 				gap: "8",
 				children: [
-					/* @__PURE__ */ _(D.Title, { render: /* @__PURE__ */ _(r, {
+					/* @__PURE__ */ T(D.Title, { render: /* @__PURE__ */ T(r, {
 						as: "div",
 						weight: "medium"
 					}) }),
-					/* @__PURE__ */ _(D.Description, { render: /* @__PURE__ */ _(r, {
+					/* @__PURE__ */ T(D.Description, { render: /* @__PURE__ */ T(r, {
 						as: "div",
 						color: "fgMuted",
 						size: "sm"
 					}) }),
-					/* @__PURE__ */ _(D.Action, { render: /* @__PURE__ */ _(i, {
+					/* @__PURE__ */ T(D.Action, { render: /* @__PURE__ */ T(i, {
 						size: "sm",
 						variant: "secondary"
 					}) })
 				]
 			}),
-			/* @__PURE__ */ _(D.Close, {
+			/* @__PURE__ */ T(D.Close, {
 				"aria-hidden": !1,
 				"aria-label": o,
 				onClick: (e) => {
@@ -195,13 +195,13 @@ function I({ toast: a, closeLabel: o }) {
 						n.isConnected && n.focus();
 					}));
 				},
-				render: /* @__PURE__ */ _(n, {
+				render: /* @__PURE__ */ T(n, {
 					borderRadius: "sm",
 					className: d,
 					flexShrink: 0,
 					padding: "4"
 				}),
-				children: /* @__PURE__ */ _(s, {})
+				children: /* @__PURE__ */ T(s, {})
 			})
 		]
 	});
@@ -211,9 +211,9 @@ function L(e) {
 	return (t(e.nextElementSibling, !0) ?? t(e.previousElementSibling, !1))?.querySelector(`.${d}`);
 }
 function R() {
-	let e = b(k);
+	let e = v(k);
 	if (!e) throw Error("useToast must be called under Toast.Provider.");
-	return w(() => {
+	return S(() => {
 		let t = (t) => e.close(t);
 		return {
 			add: ({ title: n, description: r, variant: i = "info", duration: a = i === "error" ? 0 : 5e3, action: o }) => {

package/dist/VisuallyHidden/VisuallyHidden.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.visually-hidden{._1qk18b30{clip-path:inset(50%);white-space:nowrap;border:0;block-size:1px;inline-size:1px;margin:0;padding:0;position:absolute;overflow:hidden}}

package/dist/base.css

@@ -1,4 +1,4 @@
-@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 tokens{:root{--space-0:0rem;--space-1:.0625rem;--space-2:.125rem;--space-4:.25rem;--space-6:.375rem;--space-8:.5rem;--space-12:.75rem;--space-16:1rem;--space-20:1.25rem;--space-24:1.5rem;--space-32:2rem;--space-40:2.5rem;--space-48:3rem;--space-64:4rem;--space-80:5rem;--space-96:6rem;--size-xs:1.5rem;--size-sm:2rem;--size-med:2.5rem;--size-lg:3rem;--size-xl:3.5rem;--container-prose:40rem;--container-page:64rem;--container-wide:80rem;--radius-none:0;--radius-sm:.25rem;--radius-med:.5rem;--radius-lg:.75rem;--radius-xl:1rem;--radius-full:9999px;--font-size-xs:.75rem;--font-size-sm:.875rem;--font-size-med:1rem;--font-size-lg:1.125rem;--font-size-xl:1.25rem;--font-size-2xl:1.5rem;--font-size-3xl:1.875rem;--font-size-4xl:2.25rem;--font-weight-regular:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--line-height-sm:1.25;--line-height-med:1.5;--line-height-lg:1.75;--z-index-base:0;--z-index-raised:1;--z-index-dropdown:1000;--z-index-sticky:1100;--z-index-overlay:1200;--z-index-modal:1300;--z-index-popover:1400;--z-index-toast:1500;--z-index-tooltip:1600;--duration-fast:.12s;--duration-med:.2s;--duration-slow:.32s;--easing-standard:cubic-bezier(.2, 0, 0, 1);--easing-enter:cubic-bezier(0, 0, 0, 1);--easing-exit:cubic-bezier(.3, 0, 1, 1);--distance-sm:.25rem;--distance-med:.5rem;--distance-lg:1rem;--scale-sm:.02;--scale-med:.05;--scale-lg:.1}[data-brand]{--shadow-sm:0 1px 2px color-mix(in srgb, var(--color-shadow) 12%, transparent);--shadow-med:0 2px 8px color-mix(in srgb, var(--color-shadow) 14%, transparent), 0 1px 2px color-mix(in srgb, var(--color-shadow) 8%, transparent);--shadow-lg:0 8px 24px color-mix(in srgb, var(--color-shadow) 16%, transparent), 0 2px 6px color-mix(in srgb, var(--color-shadow) 8%, transparent)}[data-brand][data-mode=light]{color-scheme:light}[data-brand][data-mode=dark]{--shadow-sm:0 0 0 1px color-mix(in srgb, var(--color-fg) 10%, transparent), 0 1px 2px color-mix(in srgb, var(--color-shadow) 40%, transparent);--shadow-med:0 0 0 1px color-mix(in srgb, var(--color-fg) 10%, transparent), 0 2px 8px color-mix(in srgb, var(--color-shadow) 48%, transparent), 0 1px 2px color-mix(in srgb, var(--color-shadow) 32%, transparent);--shadow-lg:0 0 0 1px color-mix(in srgb, var(--color-fg) 10%, transparent), 0 8px 24px color-mix(in srgb, var(--color-shadow) 56%, transparent), 0 2px 6px color-mix(in srgb, var(--color-shadow) 32%, transparent);color-scheme:dark}[data-brand][data-mode=system]{color-scheme:light dark}:dir(ltr){--dir:1}:dir(rtl){--dir:-1}@media (prefers-color-scheme:dark){[data-brand][data-mode=system]{--shadow-sm:0 0 0 1px color-mix(in srgb, var(--color-fg) 10%, transparent), 0 1px 2px color-mix(in srgb, var(--color-shadow) 40%, transparent);--shadow-med:0 0 0 1px color-mix(in srgb, var(--color-fg) 10%, transparent), 0 2px 8px color-mix(in srgb, var(--color-shadow) 48%, transparent), 0 1px 2px color-mix(in srgb, var(--color-shadow) 32%, transparent);--shadow-lg:0 0 0 1px color-mix(in srgb, var(--color-fg) 10%, transparent), 0 8px 24px color-mix(in srgb, var(--color-shadow) 56%, transparent), 0 2px 6px color-mix(in srgb, var(--color-shadow) 32%, transparent)}}@media (prefers-reduced-motion:reduce){:root{--distance-sm:0rem;--distance-med:0rem;--distance-lg:0rem;--scale-sm:0;--scale-med:0;--scale-lg:0;--duration-fast:.12s;--duration-med:.12s;--duration-slow:.12s}}}
 
 @font-face{src:local(Arial),local(ArialMT);font-weight:400;font-style:normal;size-adjust:101.568%;ascent-override:95.3892%;descent-override:23.7511%;line-gap-override:0%;font-family:Inter Fallback Arial}@font-face{src:local(Arial Bold),local(Arial-BoldMT);font-weight:700;font-style:normal;size-adjust:101.637%;ascent-override:95.3241%;descent-override:23.7349%;line-gap-override:0%;font-family:Inter Fallback Arial}@font-face{src:local(Arial Italic),local(Arial-ItalicMT);font-weight:400;font-style:italic;size-adjust:101.637%;ascent-override:95.3241%;descent-override:23.7349%;line-gap-override:0%;font-family:Inter Fallback Arial}@font-face{src:local(Arial Bold Italic),local(Arial-BoldItalicMT);font-weight:700;font-style:italic;size-adjust:101.706%;ascent-override:95.2591%;descent-override:23.7187%;line-gap-override:0%;font-family:Inter Fallback Arial}@font-face{src:local(Menlo Regular),local(Menlo-Regular);font-weight:400;font-style:normal;size-adjust:100.137%;ascent-override:101.871%;descent-override:29.9621%;line-gap-override:0%;font-family:JetBrains Mono Fallback Menlo}@font-face{src:local(Menlo Bold),local(Menlo-Bold);font-weight:700;font-style:normal;size-adjust:100.003%;ascent-override:102.007%;descent-override:30.0022%;line-gap-override:0%;font-family:JetBrains Mono Fallback Menlo}@font-face{src:local(Menlo Italic),local(Menlo-Italic);font-weight:400;font-style:italic;size-adjust:100.137%;ascent-override:101.871%;descent-override:29.9621%;line-gap-override:0%;font-family:JetBrains Mono Fallback Menlo}@font-face{src:local(Menlo Bold Italic),local(Menlo-BoldItalic);font-weight:700;font-style:italic;size-adjust:100.003%;ascent-override:102.007%;descent-override:30.0022%;line-gap-override:0%;font-family:JetBrains Mono Fallback Menlo}@font-face{src:local(Consolas);font-weight:400;font-style:normal;size-adjust:114.387%;ascent-override:89.1798%;descent-override:26.2293%;line-gap-override:0%;font-family:JetBrains Mono Fallback Consolas}@font-face{src:local(Consolas Bold),local(Consolas-Bold);font-weight:700;font-style:normal;size-adjust:114.387%;ascent-override:89.1798%;descent-override:26.2293%;line-gap-override:0%;font-family:JetBrains Mono Fallback Consolas}@font-face{src:local(Consolas Italic),local(Consolas-Italic);font-weight:400;font-style:italic;size-adjust:114.387%;ascent-override:89.1798%;descent-override:26.2293%;line-gap-override:0%;font-family:JetBrains Mono Fallback Consolas}@font-face{src:local(Consolas Bold Italic),local(Consolas-BoldItalic);font-weight:700;font-style:italic;size-adjust:114.387%;ascent-override:89.1798%;descent-override:26.2293%;line-gap-override:0%;font-family:JetBrains Mono Fallback Consolas}@font-face{src:local(Courier New),local(CourierNewPSMT);font-weight:400;font-style:normal;size-adjust:127.781%;ascent-override:79.8319%;descent-override:23.48%;line-gap-override:0%;font-family:JetBrains Mono Fallback Courier New}@font-face{src:local(Courier New Bold),local(CourierNewPS-BoldMT);font-weight:700;font-style:normal;size-adjust:123.353%;ascent-override:82.6977%;descent-override:24.3229%;line-gap-override:0%;font-family:JetBrains Mono Fallback Courier New}@font-face{src:local(Courier New Italic),local(CourierNewPS-ItalicMT);font-weight:400;font-style:italic;size-adjust:127.781%;ascent-override:79.8319%;descent-override:23.48%;line-gap-override:0%;font-family:JetBrains Mono Fallback Courier New}@font-face{src:local(Courier New Bold Italic),local(CourierNewPS-BoldItalicMT);font-weight:700;font-style:italic;size-adjust:123.353%;ascent-override:82.6977%;descent-override:24.3229%;line-gap-override:0%;font-family:JetBrains Mono Fallback Courier New}@layer tokens{[data-brand=default]{--color-bg:light-dark(oklch(100% 0 0),oklch(14.5% .006 265));--color-bg-muted:light-dark(oklch(96.8% .004 265),oklch(27% .01 265));--color-bg-raised:light-dark(oklch(100% 0 0),oklch(20.5% .008 265));--color-fg:light-dark(oklch(14.5% .006 265),oklch(98.5% .002 265));--color-fg-muted:light-dark(oklch(44.5% .014 265),oklch(71% .012 265));--color-border:light-dark(oklch(92.5% .006 265),oklch(27% .01 265));--color-border-strong:oklch(55.5% .014 265);--color-accent:light-dark(oklch(54.6% .19 258),oklch(70.7% .14 258));--color-accent-fg:light-dark(oklch(100% 0 0),oklch(14.5% .006 265));--color-accent-fill:light-dark(oklch(54.6% .19 258),oklch(48.8% .18 258));--color-accent-fill-fg:oklch(100% 0 0);--color-danger:light-dark(oklch(56% .2 25),oklch(70.4% .17 25));--color-danger-fg:light-dark(oklch(100% 0 0),oklch(14.5% .006 265));--color-success:light-dark(oklch(52% .135 150),oklch(76% .15 150));--color-success-fg:light-dark(oklch(100% 0 0),oklch(14.5% .006 265));--color-warning:light-dark(oklch(53% .11 75),oklch(81% .145 75));--color-warning-fg:light-dark(oklch(100% 0 0),oklch(14.5% .006 265));--color-done:light-dark(oklch(55% .2 295),oklch(72% .15 295));--color-done-fg:light-dark(oklch(100% 0 0),oklch(14.5% .006 265));--color-neutral-subtle:light-dark(oklch(96.8% .004 265),oklch(27% .01 265));--color-neutral-subtle-fg:light-dark(oklch(37% .013 265),oklch(92.5% .006 265));--color-accent-subtle:light-dark(oklch(93.2% .032 258),oklch(28.2% .09 258));--color-accent-subtle-fg:light-dark(oklch(48.8% .18 258),oklch(80.9% .095 258));--color-success-subtle:light-dark(oklch(94.5% .04 150),oklch(26% .06 150));--color-success-subtle-fg:light-dark(oklch(46.5% .12 150),oklch(84% .115 150));--color-warning-subtle:light-dark(oklch(95.5% .03 75),oklch(27% .05 75));--color-warning-subtle-fg:light-dark(oklch(47.5% .1 75),oklch(86% .105 75));--color-danger-subtle:light-dark(oklch(93.6% .032 25),oklch(25.8% .085 25));--color-danger-subtle-fg:light-dark(oklch(50.5% .19 25),oklch(80.8% .105 25));--color-done-subtle:light-dark(oklch(93.8% .032 295),oklch(28% .095 295));--color-done-subtle-fg:light-dark(oklch(49% .19 295),oklch(81.5% .1 295));--color-focus:light-dark(oklch(54.6% .19 258),oklch(70.7% .14 258));--color-shadow:light-dark(oklch(14.5% .006 265),oklch(0% 0 0));--font-body:"Inter", "Inter Fallback Arial", sans-serif;--font-heading:"Inter", "Inter Fallback Arial", sans-serif;--font-display:"Inter", "Inter Fallback Arial", sans-serif;--font-label:"Inter", "Inter Fallback Arial", sans-serif;--font-mono:"JetBrains Mono", "JetBrains Mono Fallback Menlo", "JetBrains Mono Fallback Consolas", "JetBrains Mono Fallback Courier New", monospace;--font-trim-body-cap:.36377;--font-trim-body-baseline:.36377;--font-trim-heading-cap:.36377;--font-trim-heading-baseline:.36377;--font-trim-display-cap:.36377;--font-trim-display-baseline:.36377;--font-trim-label-cap:.36377;--font-trim-label-baseline:.36377;--font-trim-mono-cap:.37;--font-trim-mono-baseline:.36}@media (forced-colors:active){[data-brand][data-brand]{--color-bg:Canvas;--color-bg-muted:Canvas;--color-bg-raised:Canvas;--color-fg:CanvasText;--color-fg-muted:CanvasText;--color-border:CanvasText;--color-border-strong:CanvasText;--color-accent:LinkText;--color-accent-fg:Canvas;--color-accent-fill:LinkText;--color-accent-fill-fg:Canvas;--color-danger:CanvasText;--color-danger-fg:Canvas;--color-success:CanvasText;--color-success-fg:Canvas;--color-warning:CanvasText;--color-warning-fg:Canvas;--color-done:CanvasText;--color-done-fg:Canvas;--color-neutral-subtle:Canvas;--color-neutral-subtle-fg:CanvasText;--color-accent-subtle:Canvas;--color-accent-subtle-fg:CanvasText;--color-success-subtle:Canvas;--color-success-subtle-fg:CanvasText;--color-warning-subtle:Canvas;--color-warning-subtle-fg:CanvasText;--color-danger-subtle:Canvas;--color-danger-subtle-fg:CanvasText;--color-done-subtle:Canvas;--color-done-subtle-fg:CanvasText;--color-focus:Highlight;--color-shadow:CanvasText}}}

package/dist/docs/Box.md

@@ -22,6 +22,9 @@ The base element every component builds on: one element, chosen with `as`, style
 - Properties are logical: `paddingInline`, `marginBlockStart`, `inlineSize`. There is no `paddingLeft` or `width`.
 - Sizing keys `xs`, `sm`, `med`, `lg` and `xl` are control heights, 24 to 56px: `maxInlineSize="lg"` is 48px wide. For a page or panel width use a container width, on `inlineSize`, `minInlineSize` and `maxInlineSize` only: `prose` (40rem, a reading column), `page` (64rem) or `wide` (80rem). `full`, `fit`, `min`, `max` and `auto` work on every sizing prop.
 - Only layout props are responsive: `{ base: "none", med: "flex" }` with breakpoints `sm`, `med`, `lg`, `xl`. Color and the rest take one value.
+- The style-prop CSS ships in two files (decision 0111). Every component brings the base rules. The `sm`, `med`, `lg` and `xl` rules are `@jonmilner/ui/responsive.css`, which only Box, Stack and Inline import, so a Button alone ships none of them, whether imported from `@jonmilner/ui/Button` or from `@jonmilner/ui`.
+- A responsive value on any other component (`<Button marginBlock={{ base: "8", med: "16" }}>`) keeps only its `base` value unless `responsive.css` is on the page. A Box, Stack or Inline on the page brings it, but one on another route only does if that route loaded first. So an app that sets one imports it once, as a JS import, in its root module beside `base.css`.
+- In development a console warning names the missing import, but only where the rules are really absent: in development the root `@jonmilner/ui` import loads every component, Box included, so there the value works and the warning stays silent, and only the production build drops it.
 - There are no hover, focus or active props; states belong in component CSS.
 - `null` and `false` leave a prop unset, so `paddingInline={dense && "8"}` works.
 - The consumer's `className` comes last and `style` is passed through, so consumer values win.
@@ -46,6 +49,12 @@ The base element every component builds on: one element, chosen with `as`, style
 </Box>
 ```
 
+```ts
+// app root: responsive values on components other than Box, Stack and Inline.
+import "@jonmilner/ui/base.css";
+import "@jonmilner/ui/responsive.css";
+```
+
 ## Don't
 
 ```tsx
@@ -63,6 +72,12 @@ The base element every component builds on: one element, chosen with `as`, style
 <Box style={{ color: "#333" }} />
 ```
 
+```tsx
+// Without `responsive.css` imported at the app root, the `med` margin applies only if a Box,
+// Stack or Inline happened to load the rules first.
+<Button marginBlock={{ base: "8", med: "16" }}>Save</Button>
+```
+
 ```tsx
 // A clickable Box has no focus ring, role or keyboard support.
 <Box onClick={open}>Open</Box>

package/dist/docs/manifest.json

@@ -1,7 +1,7 @@
 {
   "$schema": "./manifest.schema.json",
   "package": "@jonmilner/ui",
-  "version": "0.8.2",
+  "version": "0.9.1",
   "components": [
     {
       "name": "AlertDialog",

package/dist/docs/migrations/0.9.0.md

@@ -0,0 +1,27 @@
+# 0.9.0
+
+The style-prop atoms are split by breakpoint (decision 0111): `atoms.css` keeps the base rules, and the `sm`, `med`, `lg` and `xl` rules move to `@jonmilner/ui/responsive.css`, which only Box, Stack and Inline import. A responsive style prop on any other component (`<Button marginBlock={{ base: "8", med: "16" }}>`) keeps only its `base` value unless `responsive.css` is on the page. No prop, value, breakpoint or existing import path changes.
+
+## Find
+
+In the app's source (`*.tsx`), every responsive style-prop value: regex `=\{\{\s*(base|sm|med|lg|xl)\s*:`. A match on an element other than `Box`, `Stack` or `Inline` needs the import below, unless every page that renders it also renders a Box, Stack or Inline from `@jonmilner/ui`. Values built elsewhere and spread in (`{...layout}`) are not found by the regex; search for the breakpoint keys `\b(sm|med|lg|xl)\s*:` near style props too.
+
+In development, the browser console also shows `@jonmilner/ui: a responsive style prop rendered without the breakpoint rules` on any page that misses it.
+
+## Replace
+
+Import the breakpoint rules once, as a JS import, in the app's root module (the root layout or entry), beside any `@jonmilner/ui/base.css` import. A CSS `@import` may be inlined into a second copy, so use the JS form.
+
+```ts
+// before
+import "@jonmilner/ui/base.css";
+// after
+import "@jonmilner/ui/base.css";
+import "@jonmilner/ui/responsive.css";
+```
+
+An app with no responsive value outside Box, Stack and Inline needs no change; the import is still safe, since it is the same file those three load.
+
+## Verify
+
+Run the app in development and load each page that has a responsive value outside Box, Stack and Inline; the console shows no `@jonmilner/ui: a responsive style prop rendered without the breakpoint rules` warning, and at a viewport of 48em or wider a `med` value applies (for example, the computed `margin-block` of the Button above is 16px).

package/dist/index.d.mts

@@ -1,4 +1,4 @@
-import { Box, BoxProps, StyleProps } from "./Box/index.mjs";
+import { BoxProps, StyleProps } from "./Box/base.mjs";
 import { Clickable, ClickableProps } from "./Clickable/index.mjs";
 import { Icon, IconProps } from "./Icon/index.mjs";
 import { Button, ButtonProps } from "./Button/index.mjs";
@@ -7,6 +7,7 @@ import { DialogCloseProps, DialogTriggerProps } from "./Dialog/client.mjs";
 import { AlertDialog, AlertDialogProps, AlertDialogTriggerProps } from "./AlertDialog/index.mjs";
 import { Avatar, AvatarProps } from "./Avatar/index.mjs";
 import { Badge, BadgeProps } from "./Badge/index.mjs";
+import { Box } from "./Box/index.mjs";
 import { Checkbox, CheckboxProps } from "./Checkbox/index.mjs";
 import { Chip, ChipGroup, ChipGroupProps, ChipProps } from "./Chip/index.mjs";
 import { SearchFieldInputProps } from "./SearchField/client.mjs";

package/dist/index.mjs

@@ -1,13 +1,13 @@
-import { Box as e } from "./Box/index.mjs";
-import { Clickable as t } from "./Clickable/index.mjs";
-import { Icon as n } from "./Icon/index.mjs";
-import { Text as r } from "./Text/index.mjs";
-import { Button as i } from "./Button/index.mjs";
-import { Heading as a } from "./Heading/index.mjs";
-import { Dialog as o } from "./Dialog/index.mjs";
-import { AlertDialog as s } from "./AlertDialog/index.mjs";
-import { Avatar as c } from "./Avatar/index.mjs";
-import { Badge as l } from "./Badge/index.mjs";
+import { Clickable as e } from "./Clickable/index.mjs";
+import { Icon as t } from "./Icon/index.mjs";
+import { Text as n } from "./Text/index.mjs";
+import { Button as r } from "./Button/index.mjs";
+import { Heading as i } from "./Heading/index.mjs";
+import { Dialog as a } from "./Dialog/index.mjs";
+import { AlertDialog as o } from "./AlertDialog/index.mjs";
+import { Avatar as s } from "./Avatar/index.mjs";
+import { Badge as c } from "./Badge/index.mjs";
+import { Box as l } from "./Box/index.mjs";
 import { Checkbox as u } from "./Checkbox/index.mjs";
 import { Chip as d, ChipGroup as f } from "./Chip/index.mjs";
 import { Field as p } from "./Field/index.mjs";
@@ -26,4 +26,4 @@ import { ThemeProvider as T } from "./theme/ThemeProvider.mjs";
 import { useToast as E } from "./Toast/client.mjs";
 import { Toast as D } from "./Toast/index.mjs";
 import { VisuallyHidden as O } from "./VisuallyHidden/index.mjs";
-export { s as AlertDialog, c as Avatar, l as Badge, e as Box, i as Button, u as Checkbox, d as Chip, f as ChipGroup, t as Clickable, m as ColorField, o as Dialog, p as Field, a as Heading, n as Icon, h as IconButton, g as Inline, _ as Menu, v as MultiSelect, y as SearchField, b as Stack, x as Tabs, S as Tag, r as Text, C as TextField, T as ThemeProvider, D as Toast, O as VisuallyHidden, w as defineTheme, E as useToast };
+export { o as AlertDialog, s as Avatar, c as Badge, l as Box, r as Button, u as Checkbox, d as Chip, f as ChipGroup, e as Clickable, m as ColorField, a as Dialog, p as Field, i as Heading, t as Icon, h as IconButton, g as Inline, _ as Menu, v as MultiSelect, y as SearchField, b as Stack, x as Tabs, S as Tag, n as Text, C as TextField, T as ThemeProvider, D as Toast, O as VisuallyHidden, w as defineTheme, E as useToast };

package/dist/popup/client.mjs

@@ -2,44 +2,44 @@
 import { Clickable as e } from "../Clickable/index.mjs";
 import { Button as t } from "../Button/index.mjs";
 import { useThemeContainer as n } from "../theme/use-theme-container.mjs";
-import { jsx as r } from "react/jsx-runtime";
-import { createContext as i, use as a, useCallback as o, useLayoutEffect as s, useRef as c } from "react";
+import { createContext as r, use as i, useCallback as a, useLayoutEffect as o, useRef as s } from "react";
+import { jsx as c } from "react/jsx-runtime";
 //#region src/popup/client.tsx
-var l = i({
+var l = r({
 	container: { current: null },
 	ref: () => {},
 	trigger: { current: null }
-}), u = i({ current: {
+}), u = r({ current: {
 	keyboard: !1,
 	opener: null
 } });
 function d({ children: e }) {
-	let t = c({
+	let t = s({
 		keyboard: !1,
 		opener: null
 	});
-	return /* @__PURE__ */ r(l, {
+	return /* @__PURE__ */ c(l, {
 		value: n(),
-		children: /* @__PURE__ */ r(u, {
+		children: /* @__PURE__ */ c(u, {
 			value: t,
 			children: e
 		})
 	});
 }
 function f() {
-	return a(l);
+	return i(l);
 }
-function p({ variant: n, size: i, iconStart: a, iconEnd: o, ...s }) {
-	return n || i || a || o ? /* @__PURE__ */ r(t, {
-		...s,
+function p({ variant: n, size: r, iconStart: i, iconEnd: a, ...o }) {
+	return n || r || i || a ? /* @__PURE__ */ c(t, {
+		...o,
 		variant: n,
-		size: i,
-		iconStart: a,
-		iconEnd: o
-	}) : /* @__PURE__ */ r(e, { ...s });
+		size: r,
+		iconStart: i,
+		iconEnd: a
+	}) : /* @__PURE__ */ c(e, { ...o });
 }
 function m(e) {
-	let t = a(u);
+	let t = i(u);
 	return (n, r) => {
 		t.current = n ? {
 			keyboard: !1,
@@ -73,14 +73,14 @@ function v(e) {
 	} })), _;
 }
 function y(e, { finalFocus: t, modal: n = !1, open: r }) {
-	let { trigger: i } = f(), l = a(u), d = c(null), p = o((t) => {
+	let { trigger: c } = f(), l = i(u), d = s(null), p = a((t) => {
 		d.current = t;
 		let n = h(e, t);
 		return () => {
 			d.current = null, n();
 		};
 	}, [e]);
-	return s(() => {
+	return o(() => {
 		let e = d.current;
 		if (!r || !e || l.current.recorded) return;
 		let { activeElement: t, body: n } = e.ownerDocument, i = t === n || e.contains(t) ? null : t;
@@ -88,19 +88,19 @@ function y(e, { finalFocus: t, modal: n = !1, open: r }) {
 			keyboard: !1,
 			opener: i
 		};
-	}, [r, l]), s(() => {
+	}, [r, l]), o(() => {
 		let e = d.current;
 		if (!e) return;
 		if (r) {
 			e.inert = !1;
 			return;
 		}
-		let { reason: a, keyboard: o, opener: s } = l.current;
+		let { reason: i, keyboard: a, opener: o } = l.current;
 		l.current.recorded = !1;
-		let c = s?.isConnected ? s : i.current, { activeElement: u } = e.ownerDocument, f = n && a === "outside-press" && v(e.ownerDocument);
-		if (!t && c instanceof HTMLElement && (f || e.contains(u) && !g.has(a ?? ""))) {
+		let s = o?.isConnected ? o : c.current, { activeElement: u } = e.ownerDocument, f = n && i === "outside-press" && v(e.ownerDocument);
+		if (!t && s instanceof HTMLElement && (f || e.contains(u) && !g.has(i ?? ""))) {
 			let e = { preventScroll: !0 };
-			o && (e.focusVisible = !0), c.focus(e);
+			a && (e.focusVisible = !0), s.focus(e);
 		}
 		e.inert = !0;
 	}, [
@@ -108,7 +108,7 @@ function y(e, { finalFocus: t, modal: n = !1, open: r }) {
 		t,
 		n,
 		l,
-		i
+		c
 	]), {
 		"aria-hidden": !r || void 0,
 		ref: p