@jonmilner/ui 0.8.1 → 0.9.0

package/dist/Avatar/Avatar.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.avatar{.o8rb9b0{border-width:var(--space-1);border-style:solid;border-color:#0000}.o8rb9b1{border-color:var(--color-border)}.o8rb9b3{inline-size:var(--space-20);block-size:var(--space-20)}.o8rb9b4{inline-size:calc(var(--space-24) + var(--space-4));block-size:calc(var(--space-24) + var(--space-4))}.o8rb9b5{inline-size:var(--space-40);block-size:var(--space-40)}.o8rb9b6{color:#000}.o8rb9b7{color:#fff}@media (forced-colors:active){.o8rb9b0,.o8rb9b1{border-color:canvastext}}}

package/dist/Avatar/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 { ComponentPropsWithRef } from "react";
 //#region src/Avatar/index.d.ts
 export type AvatarOwnProps = {

package/dist/Avatar/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 { Text as n } from "../Text/index.mjs";
 import { avatar as r, inkBlack as i, inkWhite as a, root as o } from "./Avatar.css.mjs";
 import { fillFor as s, inkFor as c } from "./ink.mjs";

package/dist/Badge/Badge.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.badge{._1ixfil10{border-width:var(--space-1);border-style:solid;border-color:#0000}@media (forced-colors:active){._1ixfil10{color:canvastext;background-color:canvas;border-color:canvastext}}}

package/dist/Badge/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/Badge/index.d.ts

package/dist/Badge/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 { Text as n } from "../Text/index.mjs";
 import { subtleFills as r } from "../styles/subtle-fills.mjs";
 import { badge as i, root as a } from "./Badge.css.mjs";

package/dist/Box/Box.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.box{._11caph0{box-sizing:border-box}}

package/dist/Box/ResponsiveCheck.mjs

@@ -0,0 +1,17 @@
+"use client";
+import { useEffect as e } from "react";
+//#region src/Box/ResponsiveCheck.tsx
+var t = "--jmui-responsive-css", n = !1;
+function r() {
+	getComputedStyle(document.documentElement).getPropertyValue(t).trim() || console.warn("@jonmilner/ui: a responsive style prop rendered without the breakpoint rules, so only its `base` value applies. Add `import '@jonmilner/ui/responsive.css'` once at the app's root.");
+}
+function i() {
+	return e(() => {
+		if (n) return;
+		n = !0;
+		let e = () => requestAnimationFrame(r);
+		document.readyState === "complete" ? e() : window.addEventListener("load", e, { once: !0 });
+	}, []), null;
+}
+//#endregion
+export { i as ResponsiveCheck };

package/dist/Box/base.d.mts

@@ -0,0 +1,8 @@
+import { Sprinkles } from "../styles/atoms.css.mjs";
+import { PolymorphicProps } from "../types.mjs";
+import { ElementType } from "react";
+//#region src/Box/base.d.ts
+export type StyleProps = { [K in keyof Sprinkles]?: Sprinkles[K] | null | false; };
+export type BoxProps<T extends ElementType = "div"> = PolymorphicProps<T, StyleProps>;
+export declare function Box<T extends ElementType = "div">({ as, className, ...props }: BoxProps<T>): import("react").JSX.Element;
+//#endregion

package/dist/Box/base.mjs

@@ -0,0 +1,17 @@
+import { sprinkles as e } from "../styles/atoms.css.mjs";
+import { join as t } from "../styles/join.mjs";
+import { splitStyleProps as n } from "../styles/split-style-props.mjs";
+import { root as r } from "./Box.css.mjs";
+import { ResponsiveCheck as i } from "./ResponsiveCheck.mjs";
+import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/Box/base.tsx
+var c = (e) => typeof e == "object" && !!e && Object.entries(e).some(([e, t]) => e !== "base" && t != null && t !== !1);
+function l({ as: l, className: u, ...d }) {
+	let f = l ?? "div", [p, m] = n(d), h = Object.fromEntries(Object.entries(p).filter(([, e]) => e !== null && e !== !1)), g = /* @__PURE__ */ o(f, {
+		...m,
+		className: t(r, e(h), u)
+	});
+	return process.env.NODE_ENV !== "production" && Object.values(h).some(c) ? /* @__PURE__ */ s(a, { children: [g, /* @__PURE__ */ o(i, {})] }) : g;
+}
+//#endregion
+export { l as Box };

package/dist/Box/index.d.mts

@@ -1,8 +1,5 @@
-import { Sprinkles } from "../styles/atoms.css.mjs";
-import { PolymorphicProps } from "../types.mjs";
-import { ElementType } from "react";
+import { Box as Box$1, BoxProps, StyleProps } from "./base.mjs";
 //#region src/Box/index.d.ts
-export type StyleProps = { [K in keyof Sprinkles]?: Sprinkles[K] | null | false; };
-export type BoxProps<T extends ElementType = "div"> = PolymorphicProps<T, StyleProps>;
-export declare function Box<T extends ElementType = "div">({ as, className, ...props }: BoxProps<T>): import("react").JSX.Element;
-//#endregion
+export declare const Box: typeof Box$1;
+//#endregion
+export type { BoxProps, StyleProps };

package/dist/Box/index.mjs

@@ -1,15 +1,6 @@
-import { sprinkles as e } from "../styles/atoms.css.mjs";
-import { join as t } from "../styles/join.mjs";
-import { splitStyleProps as n } from "../styles/split-style-props.mjs";
-import { root as r } from "./Box.css.mjs";
-import { jsx as i } from "react/jsx-runtime";
+import { Box as e } from "./base.mjs";
+import "../styles/responsive.css.mjs";
 //#region src/Box/index.tsx
-function a({ as: a, className: o, ...s }) {
-	let c = a ?? "div", [l, u] = n(s), d = Object.fromEntries(Object.entries(l).filter(([, e]) => e !== null && e !== !1));
-	return /* @__PURE__ */ i(c, {
-		...u,
-		className: t(r, e(d), o)
-	});
-}
+var t = e;
 //#endregion
-export { a as Box };
+export { t as Box };

package/dist/Button/Button.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;
 @keyframes hkhd8a{to{opacity:.25}}@layer components.button{.hkhd80{border-width:var(--space-1);border-style:solid}.hkhd80[aria-disabled=true]{background-color:var(--color-bg-muted);border-color:var(--color-border-strong);color:var(--color-fg-muted);border-style:dashed}.hkhd80:not([aria-disabled=true]):not([aria-busy=true])[aria-expanded=true]{background-image:linear-gradient(color-mix(in srgb, var(--color-fg) 15%, transparent), color-mix(in srgb, var(--color-fg) 15%, transparent));box-shadow:inset 0 0 0 var(--space-1) currentColor}.hkhd82{border-color:#0000}.hkhd83{border-color:var(--color-border-strong)}.hkhd84{border-color:#0000}.hkhd88{justify-items:center}.hkhd89{grid-area:1/1}.hkhd80[aria-busy=true] .hkhd89{opacity:0}.hkhd8b{grid-area:1/1}.hkhd8c{animation-name:hkhd8a;animation-duration:var(--duration-slow);animation-timing-function:var(--easing-standard);animation-iteration-count:infinite;animation-direction:alternate}.hkhd8c:nth-child(2){animation-delay:calc(var(--duration-slow) / 3)}.hkhd8c:nth-child(3){animation-delay:calc(var(--duration-slow) * 2 / 3)}@media (hover:hover){.hkhd80:not([aria-disabled=true]):not([aria-busy=true]):hover{background-image:linear-gradient(color-mix(in srgb, var(--color-fg) 15%, transparent), color-mix(in srgb, var(--color-fg) 15%, transparent))}}@media (forced-colors:active){.hkhd80{forced-color-adjust:none}.hkhd80:not([aria-disabled=true]):not([aria-busy=true]):hover{background-image:none}.hkhd80[aria-disabled=true]{color:graytext;border-color:graytext}.hkhd80:not([aria-disabled=true]):not([aria-busy=true])[aria-expanded=true]{background-image:none}.hkhd84{--color-danger:var(--color-accent-fill);--color-danger-fg:var(--color-accent-fill-fg)}}@media (prefers-reduced-motion:reduce){.hkhd8c{animation-name:none}}}

package/dist/Button/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 { ClickableOwnProps } from "../Clickable/index.mjs";
 import { IconProps } from "../Icon/index.mjs";
 import { ComponentType, ElementType } from "react";

package/dist/Button/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 { Icon as r } from "../Icon/index.mjs";
 import { fills as i } from "../styles/button-fills.mjs";

package/dist/Checkbox/Checkbox.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.checkbox{._1tze2y80{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}._1tze2y80:focus-visible{outline:var(--space-2) solid var(--color-focus);outline-offset:var(--space-2)}._1tze2y80[aria-disabled=true]{cursor:not-allowed}._1tze2y80[aria-readonly=true]{cursor:default}._1tze2y81{inline-size:var(--space-16);block-size:var(--space-16);border:var(--space-1) solid var(--color-border-strong);border-radius:var(--radius-sm);background-color:var(--color-bg);color:var(--color-accent-fg);forced-color-adjust:none;place-items:center;display:grid}._1tze2y80:not([aria-checked=true],[aria-checked=mixed],[aria-invalid=true],[aria-disabled=true],[aria-readonly=true]):hover ._1tze2y81{border-color:var(--color-fg)}._1tze2y80:is([aria-checked=true],[aria-checked=mixed]) ._1tze2y81{background-color:var(--color-accent);border-color:var(--color-accent)}._1tze2y80[aria-readonly=true] ._1tze2y81{background-clip:padding-box;border-style:dotted}._1tze2y80[aria-disabled=true] ._1tze2y81{border-style:dashed;border-color:var(--color-border-strong);background-clip:border-box;background-color:var(--color-bg-muted);color:var(--color-fg-muted)}._1tze2y80[aria-invalid=true] ._1tze2y81{border-width:var(--space-2);border-color:var(--color-danger)}._1tze2y82{fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;block-size:100%;inline-size:100%}._1tze2y80[aria-checked=mixed] ._1tze2y83,._1tze2y80:not([aria-checked=mixed]) ._1tze2y84{display:none}}

package/dist/Checkbox/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 { box as r, dash as i, mark as a, root as o, tick as s } from "./Checkbox.css.mjs";
 import { jsx as c, jsxs as l } from "react/jsx-runtime";
 import { Checkbox as u } from "@base-ui/react/checkbox";

package/dist/Chip/Chip.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.chip{._1l071c80{border-width:var(--space-1);border-style:solid;border-color:var(--color-border-strong);transition:background-color var(--duration-fast) var(--easing-standard), color var(--duration-fast) var(--easing-standard)}._1l071c80[aria-disabled=true]{background-color:var(--color-bg-muted);border-color:var(--color-border-strong);color:var(--color-fg-muted);border-style:dashed}._1l071c80[aria-pressed=true]:not([aria-disabled=true]){background-color:var(--color-accent);color:var(--color-accent-fg);border-color:#0000}._1l071c84{display:none}[aria-pressed=true]>._1l071c84{display:inline-block}@media (hover:hover){._1l071c80:not([aria-disabled=true]):hover{background-image:linear-gradient(color-mix(in srgb, var(--color-fg) 15%, transparent), color-mix(in srgb, var(--color-fg) 15%, transparent))}}@media (forced-colors:active){._1l071c80{forced-color-adjust:none}._1l071c80:not([aria-disabled=true]):hover{background-image:none}._1l071c80[aria-disabled=true]{color:graytext;border-color:graytext}._1l071c80[aria-pressed=true]:not([aria-disabled=true]){color:highlighttext;background-color:highlight;border-color:highlight}}}

package/dist/Chip/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 { CheckIcon as a } from "../icons/CheckIcon.mjs";

package/dist/Clickable/Clickable.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.clickable{._10dxgnx0{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}._10dxgnx0:focus-visible{outline:var(--space-2) solid var(--color-focus);outline-offset:var(--space-2)}._10dxgnx0[aria-disabled=true]{cursor:not-allowed}._10dxgnx0[aria-busy=true]{cursor:progress}}@layer reset{._10dxgnx0{appearance:none;font:inherit;color:inherit;text-align:inherit;background:0 0;border:0;padding:0;text-decoration:none}}

package/dist/Clickable/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 { ElementType } from "react";
 //#region src/Clickable/index.d.ts
 export type ClickableOwnProps = {

package/dist/Clickable/index.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 { root as n } from "./Clickable.css.mjs";
 import { jsx as r } from "react/jsx-runtime";
 //#region src/Clickable/index.tsx

package/dist/ColorField/ColorField.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.color-field{.nmj5ie0{clip-path:inset(50%);white-space:nowrap;border:0;block-size:1px;inline-size:1px;margin:0;padding:0;position:absolute;overflow:hidden}.nmj5ie1{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;padding-block:0}.nmj5ie1::placeholder{color:var(--color-fg-muted);opacity:1}.nmj5ie1:focus-visible{outline:var(--space-2) solid var(--color-focus);outline-offset:var(--space-2)}.nmj5ie1:disabled{background-color:var(--color-bg-muted);color:var(--color-fg-muted);cursor:not-allowed;border-style:dashed}.nmj5ie1[aria-invalid=true]{border-color:var(--color-danger)}.nmj5ie2{block-size:var(--size-sm);padding-inline-start:calc(var(--size-sm) + var(--space-4));padding-inline-end:var(--space-8)}.nmj5ie3{block-size:var(--size-med);padding-inline-start:calc(var(--size-med) + var(--space-4));padding-inline-end:var(--space-12)}.nmj5ie4{block-size:var(--size-lg);padding-inline-start:calc(var(--size-lg) + var(--space-4));padding-inline-end:var(--space-16)}.nmj5ie5{appearance:none;border-width:var(--space-1);border-style:solid;border-color:var(--color-border-strong);border-radius:var(--radius-sm);cursor:pointer;background-color:#0000;grid-area:1/1;justify-self:start;padding:0;position:relative;inset-inline-start:var(--space-4)}.nmj5ie5::-webkit-color-swatch-wrapper{padding:0}.nmj5ie5::-webkit-color-swatch{border-radius:var(--radius-sm);forced-color-adjust:none;border:none}.nmj5ie5::-moz-color-swatch{border-radius:var(--radius-sm);forced-color-adjust:none;border:none}.nmj5ie5:focus-visible{outline:var(--space-2) solid var(--color-focus);outline-offset:var(--space-2)}.nmj5ie5:disabled{cursor:not-allowed;border-style:dashed}.nmj5ie6{inline-size:var(--size-xs);block-size:var(--size-xs)}.nmj5ie7{inline-size:var(--size-sm);block-size:var(--size-sm)}.nmj5ie8{inline-size:var(--size-med);block-size:var(--size-med)}@media (forced-colors:active){.nmj5ie1:disabled{color:graytext;border-color:graytext}.nmj5ie5{border-color:canvastext}.nmj5ie5:disabled{border-color:graytext}}}

package/dist/ColorField/client.mjs

@@ -1,34 +1,34 @@
 "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 { input as n, swatch as r } from "./ColorField.css.mjs";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
-import { useState as o } from "react";
+import { useState as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
 import { Input as s } from "@base-ui/react/input";
 //#region src/ColorField/client.tsx
 var c = /^#[0-9a-f]{6}$/i, l = (e) => c.test(e) ? e.toLowerCase() : "#000000";
 function u({ value: c, defaultValue: u, onValueChange: d, placeholder: f, size: p, disabled: m, required: h, name: g, swatchLabel: _, inputProps: v }) {
-	let [y, b] = o(u), x = c ?? y, S = (e) => {
+	let [y, b] = i(u), x = c ?? y, S = (e) => {
 		c === void 0 && b(e), d?.(e);
 	};
-	return /* @__PURE__ */ a(e, {
+	return /* @__PURE__ */ o(e, {
 		alignItems: "center",
 		display: "grid",
-		children: [/* @__PURE__ */ i("input", {
+		children: [/* @__PURE__ */ a("input", {
 			"aria-label": _,
 			className: r({ size: p }),
 			disabled: m,
 			onChange: (e) => S(e.currentTarget.value),
 			type: "color",
 			value: l(x)
-		}), /* @__PURE__ */ i(s, {
+		}), /* @__PURE__ */ a(s, {
 			spellCheck: !1,
 			...v,
 			name: g,
 			onValueChange: (e) => S(e),
 			pattern: "#[0-9a-fA-F]{6}",
 			placeholder: f,
-			render: /* @__PURE__ */ i(t, {
+			render: /* @__PURE__ */ a(t, {
 				as: "input",
 				className: n({ size: p }),
 				size: p

package/dist/ColorField/index.d.mts

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

package/dist/Dialog/Dialog.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.dialog{.iyoziv0{background-color:color-mix(in srgb, var(--color-shadow) 40%, transparent);transition:opacity var(--duration-med) var(--easing-standard);inset-block:0;inset-inline:0}.iyoziv0[data-starting-style],.iyoziv0[data-ending-style]{opacity:0}.iyoziv1{max-block-size:calc(100% - 2 * var(--space-16));border:var(--space-1) solid var(--color-border);transition:opacity var(--duration-med) var(--easing-standard), scale var(--duration-med) var(--easing-enter);inset-block:0;inset-inline:0}.iyoziv1:focus-visible{outline:var(--space-2) solid var(--color-focus);outline-offset:var(--space-2)}.iyoziv1[data-starting-style],.iyoziv1[data-ending-style]{opacity:0;scale:calc(1 - var(--scale-med))}.iyoziv2{inline-size:min(100% - 2 * var(--space-16), 6 * var(--space-64))}.iyoziv3{inline-size:min(100% - 2 * var(--space-16), 8 * var(--space-64))}.iyoziv4{inline-size:min(100% - 2 * var(--space-16), 10 * var(--space-64))}}

package/dist/Dialog/client.d.mts

@@ -1,4 +1,4 @@
-import "../Box/index.mjs";
+import "../Box/base.mjs";
 import { TriggerElementProps, TriggerLookProps } from "../popup/client.mjs";
 import "./index.mjs";
 import { Dialog } from "@base-ui/react/dialog";

package/dist/Dialog/client.mjs

@@ -1,7 +1,7 @@
 "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 { Box as n } from "../Box/base.mjs";
 import { PopupScope as r, triggerElement as i, useClosingRule as a, usePopupScope as o, useRecordOpenChange as s } from "../popup/client.mjs";
 import { jsx as c } from "react/jsx-runtime";
 import { Dialog as l } from "@base-ui/react/dialog";

package/dist/Dialog/index.d.mts

@@ -1,4 +1,4 @@
-import { BoxProps } from "../Box/index.mjs";
+import { BoxProps } from "../Box/base.mjs";
 import { PartProps } from "../styles/part-props.mjs";
 import { size as size$1 } from "./Dialog.css.mjs";
 import { DialogClose, DialogCloseProps, DialogTrigger, DialogTriggerProps } from "./client.mjs";

package/dist/Dialog/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 { Text as r } from "../Text/index.mjs";
 import { Heading as i } from "../Heading/index.mjs";
 import { DialogClose as a, DialogPopupFrame as o, DialogPortal as s, DialogRootScope as c, DialogTrigger as l } from "./client.mjs";

package/dist/Field/Field.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.field{._13w7r940[data-disabled]{color:var(--color-fg-muted)}._13w7r941{overflow-wrap:anywhere}._13w7r942{vertical-align:middle;margin-inline-end:var(--space-4);display:inline-block}}

package/dist/Field/client.mjs

@@ -1,6 +1,6 @@
 "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 { CircleAlertIcon as n } from "../icons/CircleAlertIcon.mjs";
 import { icon as r } from "./Field.css.mjs";
 import { jsx as i, jsxs as a } from "react/jsx-runtime";

package/dist/Field/index.mjs

@@ -1,38 +1,38 @@
 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 { splitTextProps as i } from "../styles/split-text-props.mjs";
 import { error as a, label as o } from "./Field.css.mjs";
 import { FieldErrorMessage as s } from "./client.mjs";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
-import { Children as u } from "react";
+import { Children as c } from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
 import { Field as d } from "@base-ui/react/field";
 //#region src/Field/index.tsx
 function f({ display: e = "flex", flexDirection: r = "column", gap: i = "8", className: a, style: o, ...s }) {
-	let [l, u] = t(s);
-	return /* @__PURE__ */ c(d.Root, {
+	let [c, u] = t(s);
+	return /* @__PURE__ */ l(d.Root, {
 		...u,
-		render: /* @__PURE__ */ c(n, {
+		render: /* @__PURE__ */ l(n, {
 			display: e,
 			flexDirection: r,
 			gap: i,
-			...l,
+			...c,
 			className: a,
 			style: o
 		})
 	});
 }
-function p({ nativeLabel: n = !0, size: a = "sm", font: s = "label", weight: l = "medium", className: u, style: f, ...p }) {
+function p({ nativeLabel: n = !0, size: a = "sm", font: s = "label", weight: c = "medium", className: u, style: f, ...p }) {
 	let [m, h] = i(p), [g, _] = t(h);
-	return /* @__PURE__ */ c(d.Label, {
+	return /* @__PURE__ */ l(d.Label, {
 		..._,
 		nativeLabel: n,
-		render: /* @__PURE__ */ c(r, {
+		render: /* @__PURE__ */ l(r, {
 			as: n ? "label" : "span",
 			font: s,
 			size: a,
-			weight: l,
+			weight: c,
 			...m,
 			...g,
 			className: e(o, u),
@@ -41,13 +41,13 @@ function p({ nativeLabel: n = !0, size: a = "sm", font: s = "label", weight: l =
 	});
 }
 function m({ size: e = "sm", color: n = "fgMuted", className: a, style: o, ...s }) {
-	let [l, u] = i(s), [f, p] = t(u);
-	return /* @__PURE__ */ c(d.Description, {
+	let [c, u] = i(s), [f, p] = t(u);
+	return /* @__PURE__ */ l(d.Description, {
 		...p,
-		render: /* @__PURE__ */ c(r, {
+		render: /* @__PURE__ */ l(r, {
 			color: n,
 			size: e,
-			...l,
+			...c,
 			...f,
 			className: a,
 			style: o
@@ -55,8 +55,8 @@ function m({ size: e = "sm", color: n = "fgMuted", className: a, style: o, ...s
 	});
 }
 function h({ children: n, match: o, size: d = "sm", color: f = "danger", className: p, style: m, ...h }) {
-	let [g, _] = i(h), [v, y] = t(_), b = u.toArray(n).some((e) => e !== "");
-	return /* @__PURE__ */ l(r, {
+	let [g, _] = i(h), [v, y] = t(_), b = c.toArray(n).some((e) => e !== "");
+	return /* @__PURE__ */ u(r, {
 		"aria-atomic": !0,
 		"aria-live": "assertive",
 		as: "div",
@@ -66,7 +66,7 @@ function h({ children: n, match: o, size: d = "sm", color: f = "danger", classNa
 		...v,
 		className: e(a, p),
 		style: m,
-		children: [/* @__PURE__ */ c(s, {
+		children: [/* @__PURE__ */ l(s, {
 			...y,
 			...b && { children: n },
 			match: o ?? (b || void 0),

package/dist/Heading/Heading.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.heading{.yaxwxv0{text-wrap:balance}}

package/dist/Icon/Icon.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.icon{.wz3ei00{flex-shrink:0}.wz3ei01{inline-size:var(--font-size-xs);block-size:var(--font-size-xs)}.wz3ei02{inline-size:var(--font-size-sm);block-size:var(--font-size-sm)}.wz3ei03{inline-size:var(--font-size-med);block-size:var(--font-size-med)}.wz3ei04{inline-size:var(--font-size-lg);block-size:var(--font-size-lg)}.wz3ei05{inline-size:var(--font-size-xl);block-size:var(--font-size-xl)}.wz3ei06{inline-size:var(--font-size-2xl);block-size:var(--font-size-2xl)}.wz3ei07{inline-size:var(--font-size-3xl);block-size:var(--font-size-3xl)}.wz3ei08{inline-size:var(--font-size-4xl);block-size:var(--font-size-4xl)}}

package/dist/IconButton/IconButton.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.icon-button{.n2fy8x0{border-width:var(--space-1);border-style:solid}.n2fy8x0[aria-disabled=true]{background-color:var(--color-bg-muted);border-color:var(--color-border-strong);color:var(--color-fg-muted);border-style:dashed}.n2fy8x0:not([aria-disabled=true]):not([aria-busy=true])[aria-expanded=true]{background-image:linear-gradient(color-mix(in srgb, var(--color-fg) 15%, transparent), color-mix(in srgb, var(--color-fg) 15%, transparent));box-shadow:inset 0 0 0 var(--space-1) currentColor}.n2fy8x2{border-color:#0000}.n2fy8x3{border-color:var(--color-border-strong)}@media (hover:hover){.n2fy8x0:not([aria-disabled=true]):not([aria-busy=true]):hover{background-image:linear-gradient(color-mix(in srgb, var(--color-fg) 15%, transparent), color-mix(in srgb, var(--color-fg) 15%, transparent))}}@media (forced-colors:active){.n2fy8x0{forced-color-adjust:none}.n2fy8x0:not([aria-disabled=true]):not([aria-busy=true]):hover{background-image:none}.n2fy8x0[aria-disabled=true]{color:graytext;border-color:graytext}.n2fy8x0:not([aria-disabled=true]):not([aria-busy=true])[aria-expanded=true]{background-image:none}}}

package/dist/IconButton/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 { ClickableOwnProps } from "../Clickable/index.mjs";
 import { IconProps } from "../Icon/index.mjs";
 import { ComponentType, ElementType } from "react";

package/dist/Inline/Inline.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.inline;

package/dist/Inline/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/Inline/index.d.ts
 type Gap = StyleProps["gap"];

package/dist/Menu/Menu.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 components.menu{._393eil1{border:var(--space-1) solid var(--color-border);transform-origin:var(--transform-origin);transition:opacity var(--duration-fast) var(--easing-standard), scale var(--duration-fast) var(--easing-enter)}._393eil1:focus-visible{outline:var(--space-2) solid var(--color-focus);outline-offset:var(--space-2)}._393eil1[data-starting-style],._393eil1[data-ending-style]{opacity:0;scale:calc(1 - var(--scale-med))}._393eil2{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}._393eil2:focus-visible{outline:var(--space-2) solid var(--color-focus);outline-offset:var(--space-2)}._393eil2[data-highlighted]{background-color:light-dark(var(--color-bg-muted),color-mix(in srgb, var(--color-fg) 10%, var(--color-bg-raised)))}._393eil2[aria-disabled=true]{color:var(--color-fg-muted);cursor:not-allowed}._393eil3{text-decoration:none}._393eil4{border-block-start-color:var(--color-border)}._393eil4:before{content:"";border-block-start:var(--space-1) solid;border-block-start-color:inherit;display:block}@media (forced-colors:active){._393eil2[data-highlighted]:not([aria-disabled=true]){forced-color-adjust:none;color:highlighttext;background-color:highlight}._393eil2[aria-disabled=true]{color:graytext}}}
+@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.menu{._393eil1{border:var(--space-1) solid var(--color-border);max-inline-size:var(--available-width);transform-origin:var(--transform-origin);transition:opacity var(--duration-fast) var(--easing-standard), scale var(--duration-fast) var(--easing-enter)}._393eil1:focus-visible{outline:var(--space-2) solid var(--color-focus);outline-offset:var(--space-2)}._393eil1[data-starting-style],._393eil1[data-ending-style]{opacity:0;scale:calc(1 - var(--scale-med))}._393eil2{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}._393eil2:focus-visible{outline:var(--space-2) solid var(--color-focus);outline-offset:calc(-1 * var(--space-2))}._393eil2[data-highlighted]{background-color:light-dark(var(--color-bg-muted),color-mix(in srgb, var(--color-fg) 10%, var(--color-bg-raised)))}._393eil2[aria-disabled=true]{color:var(--color-fg-muted);cursor:not-allowed}._393eil3{color:var(--color-fg-muted)}._393eil4{text-decoration:none}._393eil5{border-block-start-color:var(--color-border)}._393eil5:before{content:"";border-block-start:var(--space-1) solid;border-block-start-color:inherit;display:block}@media (forced-colors:active){._393eil2[data-highlighted]:not([aria-disabled=true]){forced-color-adjust:none;color:highlighttext;background-color:highlight}._393eil2[data-highlighted]:not([aria-disabled=true]):focus-visible{color:canvastext;background-color:canvas}._393eil2[aria-disabled=true]{color:graytext}._393eil3{color:inherit}}}

package/dist/Menu/Menu.css.mjs

@@ -3,6 +3,6 @@ import "./Menu.css";
 /* empty css                               */
 /* empty css                     */
 //#region src/Menu/Menu.css.ts
-var e = "_393eil0", t = "_393eil1", n = "_393eil2", r = "_393eil3", i = "_393eil4";
+var e = "_393eil0", t = "_393eil1", n = "_393eil2", r = "_393eil3", i = "_393eil4", a = "_393eil5";
 //#endregion
-export { n as item, r as linkItem, t as popup, e as positioner, i as separator };
+export { r as description, n as item, i as linkItem, t as popup, e as positioner, a as separator };

package/dist/Menu/client.d.mts

@@ -1,9 +1,24 @@
+import { IconProps } from "../Icon/index.mjs";
 import { TriggerElementProps, TriggerLookProps } from "../popup/client.mjs";
 import "./index.mjs";
+import { ComponentType, ReactNode } from "react";
 import { Menu } from "@base-ui/react/menu";
 //#region src/Menu/client.d.ts
 type TriggerOwnProps = Omit<Menu.Trigger.Props, "render" | "className" | "style" | "nativeButton">;
-export type MenuTriggerProps = TriggerOwnProps & TriggerLookProps & Omit<TriggerElementProps, keyof TriggerLookProps | keyof TriggerOwnProps>;
-export declare function MenuTrigger({ disabled, openOnHover, delay, closeDelay, handle, payload, ...props }: MenuTriggerProps): import("react").JSX.Element;
+type TriggerIconForm = {
+  "aria-label"?: never;
+  "aria-labelledby"?: never;
+  children?: never;
+  icon: ComponentType<IconProps>;
+  iconEnd?: never;
+  iconStart?: never;
+  label: string;
+};
+type TriggerTextForm = {
+  icon?: never;
+  label?: never;
+};
+export type MenuTriggerProps = TriggerOwnProps & TriggerLookProps & Omit<TriggerElementProps, keyof TriggerLookProps | keyof TriggerOwnProps> & (TriggerIconForm | TriggerTextForm);
+export declare function MenuTrigger({ disabled, openOnHover, delay, closeDelay, handle, payload, icon, label, ...props }: MenuTriggerProps): import("react").JSX.Element;
 //#endregion
 export {};