@kanso-labs/kanso-ui 0.8.1 → 0.9.0

package/dist/components/link/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/link/index.tsx"],"sourcesContent":["import { useRender } from '@base-ui/react/use-render';\nimport * as stylex from '@stylexjs/stylex';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii } from '../../tokens/design.tokens.stylex';\n\n// Deliberately sets no font size or family. A link is nearly always a run of\n// words inside something else — a paragraph, a list, a table cell — so its\n// type is the surrounding text's decision. What is here is only what makes it\n// read as a link: the colour, the rule under it, and the focus ring.\n//\n// The underline is on by default rather than an opt-in. Colour alone fails\n// anyone who cannot separate the two hues, so a link in prose that is not\n// underlined is only distinguishable to some readers.\nconst styles = {\n  base: {\n    kaIpWk: \"x1tfhd1\",\n    kkrTdU: \"x1ypdohk\",\n    kjBf7l: \"xrgy624\",\n    kInvED: \"x1hl8ikr\",\n    k3XXqK: \"x9v5kkp x1t137rt\",\n    kMeerF: \"x1de99jn\",\n    kNySMw: \"xyi4chj\",\n    kcSHmL: \"x1ohr1zr\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"xz1df8t\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  }\n};\n\n// Each tone gets a hover that means something. `primary` is already the accent\n// colour, so hovering it deepens the rule instead of restating the colour;\n// `inherit` sits in body text, so hovering moves it to the accent — which is\n// what tells the reader the words are a link and not emphasis.\nconst tones = {\n  inherit: {\n    kMwMTN: \"x1aetzt3 x1heor9g\",\n    k1TLXF: \"x1rdisx9 x1dbr5dg\",\n    $$css: true\n  },\n  primary: {\n    kMwMTN: \"x1mxwv8y\",\n    k1TLXF: \"x1rdisx9 xfhk6l2\",\n    $$css: true\n  }\n};\nconst underlines = {\n  always: {\n    kMnn75: \"xujl8zx\",\n    $$css: true\n  },\n  hover: {\n    kMnn75: \"x1sur9pj xkrqix3\",\n    $$css: true\n  },\n  none: {\n    kMnn75: \"xkrqix3\",\n    $$css: true\n  }\n};\ntype LinkProps = {\n  /**\n   * Which colour role to render in. `primary` marks the link out from the\n   * text around it; `inherit` takes the surrounding colour and leans on the\n   * underline alone, for a link in a place already understood to be links —\n   * a footer, a breadcrumb, a nav.\n   * @default 'primary'\n   */\n  tone?: LinkTone;\n  /**\n   * When to draw the rule. Leave it at `always` in prose: without it, colour\n   * is the only thing separating the link from the sentence, which some\n   * readers cannot see. `hover` and `none` are for links whose position\n   * already announces them, such as a row of footer links.\n   * @default 'always'\n   */\n  underline?: LinkUnderline;\n} & useRender.ComponentProps<'a'>;\ntype LinkTone = 'inherit' | 'primary';\ntype LinkUnderline = 'always' | 'hover' | 'none';\n\n/**\n * A navigational link. It renders an `<a>` and sets no type of its own, so it\n * takes the size and face of the text it sits in.\n */\nfunction Link({\n  render,\n  tone = 'primary',\n  underline = 'always',\n  ...props\n}: LinkProps) {\n  // stylex.props() spreads after `props` for the same reason Text and Currency\n  // do it: it wins over a consumer-supplied className rather than merging with\n  // one, so which of the two applies is not left to stylesheet order.\n  return useRender({\n    defaultTagName: 'a',\n    props: {\n      ...props,\n      ...stylex.props(styles.base, tones[tone], underlines[underline])\n    },\n    render\n  });\n}\nexport type { LinkProps };\nexport default Link;"],"mappings":";;;AAaA,MAAM,SAAS,EACb,MAAM;CACJ,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,OAAO;AACT,EACF;AAMA,MAAM,QAAQ;CACZ,SAAS;EACP,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF;AACA,MAAM,aAAa;CACjB,QAAQ;EACN,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,OAAO;CACT;AACF;;;;;AA0BA,SAAS,KAAK,EACZ,QACA,OAAO,WACP,YAAY,UACZ,GAAG,WACS;CAIZ,OAAO,UAAU;EACf,gBAAgB;EAChB,OAAO;GACL,GAAG;GACH,GAAG,MAAa,OAAO,MAAM,MAAM,OAAO,WAAW,UAAU;EACjE;EACA;CACF,CAAC;AACH"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/link/index.tsx"],"sourcesContent":["import { useRender } from '@base-ui/react/use-render';\nimport * as stylex from '@stylexjs/stylex';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii } from '../../tokens/design.tokens.stylex';\n\n// Deliberately sets no font size or family. A link is nearly always a run of\n// words inside something else — a paragraph, a list, a table cell — so its\n// type is the surrounding text's decision. What is here is only what makes it\n// read as a link: the colour, the rule under it, and the focus ring.\n//\n// The underline is on by default rather than an opt-in. Colour alone fails\n// anyone who cannot separate the two hues, so a link in prose that is not\n// underlined is only distinguishable to some readers.\nconst styles = {\n  base: {\n    kaIpWk: \"x1tfhd1\",\n    kB7OPa: \"x9f619\",\n    kkrTdU: \"x1ypdohk\",\n    kjBf7l: \"xrgy624\",\n    kInvED: \"x1hl8ikr\",\n    k3XXqK: \"x9v5kkp x1t137rt\",\n    kMeerF: \"x1de99jn\",\n    kNySMw: \"xyi4chj\",\n    kcSHmL: \"x1ohr1zr\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"xz1df8t\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  }\n};\n\n// Each tone gets a hover that means something. `primary` is already the accent\n// colour, so hovering it deepens the rule instead of restating the colour;\n// `inherit` sits in body text, so hovering moves it to the accent — which is\n// what tells the reader the words are a link and not emphasis.\nconst tones = {\n  inherit: {\n    kMwMTN: \"x1aetzt3 x1heor9g\",\n    k1TLXF: \"x1rdisx9 x1dbr5dg\",\n    $$css: true\n  },\n  primary: {\n    kMwMTN: \"x1mxwv8y\",\n    k1TLXF: \"x1rdisx9 xfhk6l2\",\n    $$css: true\n  }\n};\nconst underlines = {\n  always: {\n    kMnn75: \"xujl8zx\",\n    $$css: true\n  },\n  hover: {\n    kMnn75: \"x1sur9pj xkrqix3\",\n    $$css: true\n  },\n  none: {\n    kMnn75: \"xkrqix3\",\n    $$css: true\n  }\n};\ntype LinkProps = {\n  /**\n   * Which colour role to render in. `primary` marks the link out from the\n   * text around it; `inherit` takes the surrounding colour and leans on the\n   * underline alone, for a link in a place already understood to be links —\n   * a footer, a breadcrumb, a nav.\n   * @default 'primary'\n   */\n  tone?: LinkTone;\n  /**\n   * When to draw the rule. Leave it at `always` in prose: without it, colour\n   * is the only thing separating the link from the sentence, which some\n   * readers cannot see. `hover` and `none` are for links whose position\n   * already announces them, such as a row of footer links.\n   * @default 'always'\n   */\n  underline?: LinkUnderline;\n} & useRender.ComponentProps<'a'>;\ntype LinkTone = 'inherit' | 'primary';\ntype LinkUnderline = 'always' | 'hover' | 'none';\n\n/**\n * A navigational link. It renders an `<a>` and sets no type of its own, so it\n * takes the size and face of the text it sits in.\n */\nfunction Link({\n  render,\n  tone = 'primary',\n  underline = 'always',\n  ...props\n}: LinkProps) {\n  return useRender({\n    defaultTagName: 'a',\n    props: {\n      ...props,\n      ...mergeStyles(stylex.props(styles.base, tones[tone], underlines[underline]), props)\n    },\n    render\n  });\n}\nexport type { LinkProps };\nexport default Link;"],"mappings":";;;;AAcA,MAAM,SAAS,EACb,MAAM;CACJ,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,OAAO;AACT,EACF;AAMA,MAAM,QAAQ;CACZ,SAAS;EACP,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF;AACA,MAAM,aAAa;CACjB,QAAQ;EACN,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,OAAO;CACT;AACF;;;;;AA0BA,SAAS,KAAK,EACZ,QACA,OAAO,WACP,YAAY,UACZ,GAAG,WACS;CACZ,OAAO,UAAU;EACf,gBAAgB;EAChB,OAAO;GACL,GAAG;GACH,GAAG,YAAY,MAAa,OAAO,MAAM,MAAM,OAAO,WAAW,UAAU,GAAG,OAAK;EACrF;EACA;CACF,CAAC;AACH"}

package/dist/components/list-detail/index.js

@@ -1,3 +1,4 @@
+import { mergeStyles } from "../../styles/merge.js";
 import { useRender } from "@base-ui/react/use-render";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/list-detail/index.tsx
@@ -20,18 +21,18 @@ function ListDetail({ detail, list, render, showing = "list", ...props }) {
 			...props,
 			children: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
 				...{
-					0: { className: "xeuugli" },
-					1: { className: "xeuugli x1s85apg x9a4l8x" }
+					0: { className: "x9f619 xeuugli" },
+					1: { className: "x9f619 xeuugli x1s85apg x9a4l8x" }
 				}[!!(showing === "detail") << 0],
 				children: list
 			}), /* @__PURE__ */ jsx("div", {
 				...{
-					0: { className: "xeuugli" },
-					1: { className: "xeuugli x1s85apg x9a4l8x" }
+					0: { className: "x9f619 xeuugli" },
+					1: { className: "x9f619 xeuugli x1s85apg x9a4l8x" }
 				}[!!(showing === "list") << 0],
 				children: detail
 			})] }),
-			className: "xrvj5dj xj2l1yv x1mkdm3x xkgydl7 xxxc7o5"
+			...mergeStyles({ className: "x9f619 xrvj5dj xj2l1yv x1mkdm3x xkgydl7 xxxc7o5" }, props)
 		},
 		render
 	});

package/dist/components/list-detail/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/list-detail/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { useRender } from '@base-ui/react/use-render';\nimport * as stylex from '@stylexjs/stylex';\nimport '../../tokens/design.tokens.stylex';\nimport { media, spacing } from '../../tokens/design.tokens.stylex';\n\n// Material 3's recommended snap widths for a fixed pane. The list is the\n// fixed one here — M3 points a fixed pane at \"lists with light information\n// density\" — and the detail pane is the flexible one that absorbs whatever is\n// left, which satisfies the spec's rule that every layout carry at least one\n// flexible pane.\nconst LIST_PANE = '360px';\nconst LIST_PANE_EXTRA_LARGE = '412px';\n\n// One of Material 3's canonical layouts, and the fixed-and-flexible shape of\n// its two-pane layouts. Unlike SupportingPane, the detail pane here stands on\n// its own: a message, a product, a file. That is what makes showing it\n// *instead of* the list a coherent thing to do when only one pane fits, and\n// why this layout has to be told which pane is showing while SupportingPane\n// does not.\n//\n// M3 puts the second pane on screen from expanded up. Below that the spec\n// shows one pane at a time, with selecting an item swapping to the detail and\n// back returning to the list — app navigation rather than layout, which is\n// why `showing` is controlled rather than held here.\n\ntype ListDetailProps = {\n  /**\n   * The selected item's content. Stands on its own, and takes the flexible\n   * pane.\n   */\n  detail?: ReactNode;\n  /**\n   * The items to choose between. Takes the fixed pane — 360px wide, 412px at\n   * extra-large.\n   */\n  list?: ReactNode;\n  /**\n   * Which pane to show while only one fits, below the expanded breakpoint.\n   * Both are shown from expanded up, where this is ignored.\n   *\n   * Controlled, with no uncontrolled fallback: the layout cannot know that an\n   * item was selected or that the reader went back, so holding that state\n   * here would only ever be wrong.\n   * @default 'list'\n   */\n  showing?: 'detail' | 'list';\n} & Omit<useRender.ComponentProps<'div'>, 'children'>;\n\n/**\n * Material 3's list-detail layout: a fixed list pane beside a flexible detail\n * pane, collapsing to one pane at a time below the expanded breakpoint.\n *\n * Layout only — neither pane paints a surface of its own, so what goes inside\n * them is composed at the call site. `render` swaps the container's element,\n * for a layout that should be a `<main>` rather than a `<div>`.\n *\n * The panes are written to the DOM in the order they are shown, which is what\n * M3 asks of co-planar panes: focus order has to match the arrangement on\n * screen.\n */\nfunction ListDetail({\n  detail,\n  list,\n  render,\n  showing = 'list',\n  ...props\n}: ListDetailProps) {\n  return useRender({\n    defaultTagName: 'div',\n    props: {\n      ...props,\n      children: <>\n          <div {...{\n          0: {\n            className: \"xeuugli\"\n          },\n          1: {\n            className: \"xeuugli x1s85apg x9a4l8x\"\n          }\n        }[!!(showing === 'detail') << 0]}>\n            {list}\n          </div>\n          <div {...{\n          0: {\n            className: \"xeuugli\"\n          },\n          1: {\n            className: \"xeuugli x1s85apg x9a4l8x\"\n          }\n        }[!!(showing === 'list') << 0]}>\n            {detail}\n          </div>\n        </>,\n      ...{\n        className: \"xrvj5dj xj2l1yv x1mkdm3x xkgydl7 xxxc7o5\"\n      }\n    },\n    render\n  });\n}\nexport type { ListDetailProps };\nexport default ListDetail;"],"mappings":";;;;;;;;;;;;;;;AA6DA,SAAS,WAAW,EAClB,QACA,MACA,QACA,UAAU,QACV,GAAG,SACe;CAClB,OAAO,UAAU;EACf,gBAAgB;EAChB,OAAO;GACL,GAAG;GACH,UAAU,qBAAA,UAAA,EAAA,UAAA,CACN,oBAAC,OAAD;IAAK,GAAI;KACT,GAAG,EACD,WAAW,UACb;KACA,GAAG,EACD,WAAW,2BACb;IACF,EAAE,CAAC,EAAE,YAAY,aAAa;IACzB,UAAA;GACE,CAAA,GACL,oBAAC,OAAD;IAAK,GAAI;KACT,GAAG,EACD,WAAW,UACb;KACA,GAAG,EACD,WAAW,2BACb;IACF,EAAE,CAAC,EAAE,YAAY,WAAW;IACvB,UAAA;GACE,CAAA,CACP,EAAA,CAAA;GAEA,WAAW;EAEf;EACA;CACF,CAAC;AACH"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/list-detail/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { useRender } from '@base-ui/react/use-render';\nimport * as stylex from '@stylexjs/stylex';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { media, spacing } from '../../tokens/design.tokens.stylex';\n\n// Material 3's recommended snap widths for a fixed pane. The list is the\n// fixed one here — M3 points a fixed pane at \"lists with light information\n// density\" — and the detail pane is the flexible one that absorbs whatever is\n// left, which satisfies the spec's rule that every layout carry at least one\n// flexible pane.\nconst LIST_PANE = '360px';\nconst LIST_PANE_EXTRA_LARGE = '412px';\n\n// One of Material 3's canonical layouts, and the fixed-and-flexible shape of\n// its two-pane layouts. Unlike SupportingPane, the detail pane here stands on\n// its own: a message, a product, a file. That is what makes showing it\n// *instead of* the list a coherent thing to do when only one pane fits, and\n// why this layout has to be told which pane is showing while SupportingPane\n// does not.\n//\n// M3 puts the second pane on screen from expanded up. Below that the spec\n// shows one pane at a time, with selecting an item swapping to the detail and\n// back returning to the list — app navigation rather than layout, which is\n// why `showing` is controlled rather than held here.\n\ntype ListDetailProps = {\n  /**\n   * The selected item's content. Stands on its own, and takes the flexible\n   * pane.\n   */\n  detail?: ReactNode;\n  /**\n   * The items to choose between. Takes the fixed pane — 360px wide, 412px at\n   * extra-large.\n   */\n  list?: ReactNode;\n  /**\n   * Which pane to show while only one fits, below the expanded breakpoint.\n   * Both are shown from expanded up, where this is ignored.\n   *\n   * Controlled, with no uncontrolled fallback: the layout cannot know that an\n   * item was selected or that the reader went back, so holding that state\n   * here would only ever be wrong.\n   * @default 'list'\n   */\n  showing?: 'detail' | 'list';\n} & Omit<useRender.ComponentProps<'div'>, 'children'>;\n\n/**\n * Material 3's list-detail layout: a fixed list pane beside a flexible detail\n * pane, collapsing to one pane at a time below the expanded breakpoint.\n *\n * Layout only — neither pane paints a surface of its own, so what goes inside\n * them is composed at the call site. `render` swaps the container's element,\n * for a layout that should be a `<main>` rather than a `<div>`.\n *\n * The panes are written to the DOM in the order they are shown, which is what\n * M3 asks of co-planar panes: focus order has to match the arrangement on\n * screen.\n */\nfunction ListDetail({\n  detail,\n  list,\n  render,\n  showing = 'list',\n  ...props\n}: ListDetailProps) {\n  return useRender({\n    defaultTagName: 'div',\n    props: {\n      ...props,\n      children: <>\n          <div {...{\n          0: {\n            className: \"x9f619 xeuugli\"\n          },\n          1: {\n            className: \"x9f619 xeuugli x1s85apg x9a4l8x\"\n          }\n        }[!!(showing === 'detail') << 0]}>\n            {list}\n          </div>\n          <div {...{\n          0: {\n            className: \"x9f619 xeuugli\"\n          },\n          1: {\n            className: \"x9f619 xeuugli x1s85apg x9a4l8x\"\n          }\n        }[!!(showing === 'list') << 0]}>\n            {detail}\n          </div>\n        </>,\n      ...mergeStyles({\n        className: \"x9f619 xrvj5dj xj2l1yv x1mkdm3x xkgydl7 xxxc7o5\"\n      }, props)\n    },\n    render\n  });\n}\nexport type { ListDetailProps };\nexport default ListDetail;"],"mappings":";;;;;;;;;;;;;;;;AA8DA,SAAS,WAAW,EAClB,QACA,MACA,QACA,UAAU,QACV,GAAG,SACe;CAClB,OAAO,UAAU;EACf,gBAAgB;EAChB,OAAO;GACL,GAAG;GACH,UAAU,qBAAA,UAAA,EAAA,UAAA,CACN,oBAAC,OAAD;IAAK,GAAI;KACT,GAAG,EACD,WAAW,iBACb;KACA,GAAG,EACD,WAAW,kCACb;IACF,EAAE,CAAC,EAAE,YAAY,aAAa;IACzB,UAAA;GACE,CAAA,GACL,oBAAC,OAAD;IAAK,GAAI;KACT,GAAG,EACD,WAAW,iBACb;KACA,GAAG,EACD,WAAW,kCACb;IACF,EAAE,CAAC,EAAE,YAAY,WAAW;IACvB,UAAA;GACE,CAAA,CACP,EAAA,CAAA;GACF,GAAG,YAAY,EACb,WAAW,kDACb,GAAG,KAAK;EACV;EACA;CACF,CAAC;AACH"}

package/dist/components/list-item/index.js

@@ -1,3 +1,4 @@
+import { mergeStyles } from "../../styles/merge.js";
 import { useRipple } from "../../hooks/useRipple.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/list-item/index.tsx
@@ -25,14 +26,14 @@ function ListItem({ children, interactive = false, leading, supporting, trailing
 	] });
 	if (!interactive) return /* @__PURE__ */ jsx("div", {
 		...props,
-		className: "x6s0dn4 xjbqb8w xc342km x139gbkf x78zum5 xxj4525 xh8yej3 xbktkl8 x1uvvd8r x790zyz x1n2onr6 x1yc453h",
+		...mergeStyles({ className: "x6s0dn4 xjbqb8w xc342km x9f619 x139gbkf x78zum5 xxj4525 xh8yej3 xbktkl8 x1uvvd8r x790zyz x1n2onr6 x1yc453h" }, props),
 		children: content
 	});
 	return /* @__PURE__ */ jsxs("button", {
 		type: "button",
 		...ripple.handlers,
 		...props,
-		className: "x6s0dn4 xc342km x139gbkf x78zum5 xxj4525 xh8yej3 xbktkl8 x1uvvd8r x790zyz x1n2onr6 x1yc453h x83qkoq x1p2om7n xjbqb8w x1ypdohk xln7xf2 xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn",
+		...mergeStyles({ className: "x6s0dn4 xc342km x9f619 x139gbkf x78zum5 xxj4525 xh8yej3 xbktkl8 x1uvvd8r x790zyz x1n2onr6 x1yc453h x83qkoq x1p2om7n xjbqb8w x1ypdohk xln7xf2 xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn" }, props),
 		children: [content, ripple.surface]
 	});
 }

package/dist/components/list-item/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/list-item/index.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport { useRipple } from '../../hooks/useRipple';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\n\n// Laid out with flex rather than the grid the design draws. The design's\n// three columns are `auto 1fr auto`, which is what flex does natively — and\n// unlike a fixed three-column grid it stays correct when a row has no leading\n// or no trailing content, where the remaining children would otherwise slide\n// into the wrong columns.\n//\n// Rows align with each other through their leading content being the same\n// size, not through a fixed column width: a list of Avatars all at one size\n// lines up, and that is the same thing the design's 40px column achieves.\n//\n// The state layer composites over `transparent` rather than over a container\n// colour, because a row's own background is transparent and it therefore\n// tints whatever it happens to be sitting on — a card, or the page.\n\ntype ListItemProps = {\n  /** The row's headline — the one thing it is mostly about. */\n  children?: ReactNode;\n  /**\n   * Renders a `<button>` that ripples and tints on hover, for a row that is\n   * itself pressable. Leave it off for a row that only presents.\n   * @default false\n   */\n  interactive?: boolean;\n  /** Content before the headline: an avatar, an icon, a checkbox. */\n  leading?: ReactNode;\n  /** A second line under the headline, in the muted role. */\n  supporting?: ReactNode;\n  /** Content after the headline, such as an amount or a control. */\n  trailing?: ReactNode;\n} & HTMLAttributes<HTMLElement>;\nfunction ListItem({\n  children,\n  interactive = false,\n  leading,\n  supporting,\n  trailing,\n  ...props\n}: ListItemProps) {\n  const ripple = useRipple<HTMLButtonElement>(interactive);\n  const content = <>\n      {leading === undefined ? null : <span className=\"x6s0dn4 x78zum5 x2lah0s\">{leading}</span>}\n      <span className=\"x78zum5 xdt5ytf x1iyjqo2 x14qo01y xeuugli\">\n        <span className=\"xkknnkr x14zspaw x1v9cpvo x155f00i x1lz68p4\">{children}</span>\n        {supporting === undefined ? null : <span className=\"x1w5n3ug x1yicsit x1b35g6e x9d6959 xwth0xh xybisxh\">{supporting}</span>}\n      </span>\n      {trailing === undefined ? null : <span className=\"x6s0dn4 x78zum5 x2lah0s\">{trailing}</span>}\n    </>;\n  if (!interactive) {\n    return <div {...props} className=\"x6s0dn4 xjbqb8w xc342km x139gbkf x78zum5 xxj4525 xh8yej3 xbktkl8 x1uvvd8r x790zyz x1n2onr6 x1yc453h\">\n        {content}\n      </div>;\n  }\n  return <button type=\"button\" {...ripple.handlers} {...props} className=\"x6s0dn4 xc342km x139gbkf x78zum5 xxj4525 xh8yej3 xbktkl8 x1uvvd8r x790zyz x1n2onr6 x1yc453h x83qkoq x1p2om7n xjbqb8w x1ypdohk xln7xf2 xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn\">\n      {content}\n      {ripple.surface}\n    </button>;\n}\nexport type { ListItemProps };\nexport default ListItem;"],"mappings":";;;AAoCA,SAAS,SAAS,EAChB,UACA,cAAc,OACd,SACA,YACA,UACA,GAAG,SACa;CAChB,MAAM,SAAS,UAA6B,WAAW;CACvD,MAAM,UAAU,qBAAA,UAAA,EAAA,UAAA;EACX,YAAY,KAAA,IAAY,OAAO,oBAAC,QAAD;GAAM,WAAU;GAA2B,UAAA;EAAc,CAAA;EACzF,qBAAC,QAAD;GAAM,WAAU;GAAhB,UAAA,CACE,oBAAC,QAAD;IAAM,WAAU;IAA+C;GAAe,CAAA,GAC7E,eAAe,KAAA,IAAY,OAAO,oBAAC,QAAD;IAAM,WAAU;IAAsD,UAAA;GAAiB,CAAA,CACtH;;EACL,aAAa,KAAA,IAAY,OAAO,oBAAC,QAAD;GAAM,WAAU;GAA2B,UAAA;EAAe,CAAA;CAC7F,EAAA,CAAA;CACF,IAAI,CAAC,aACH,OAAO,oBAAC,OAAD;EAAK,GAAI;EAAO,WAAU;EAC5B,UAAA;CACE,CAAA;CAET,OAAO,qBAAC,UAAD;EAAQ,MAAK;EAAS,GAAI,OAAO;EAAU,GAAI;EAAO,WAAU;EAAhE,UAAA,CACF,SACA,OAAO,OACF;;AACZ"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/list-item/index.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport { useRipple } from '../../hooks/useRipple';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\n\n// Laid out with flex rather than the grid the design draws. The design's\n// three columns are `auto 1fr auto`, which is what flex does natively — and\n// unlike a fixed three-column grid it stays correct when a row has no leading\n// or no trailing content, where the remaining children would otherwise slide\n// into the wrong columns.\n//\n// Rows align with each other through their leading content being the same\n// size, not through a fixed column width: a list of Avatars all at one size\n// lines up, and that is the same thing the design's 40px column achieves.\n//\n// The state layer composites over `transparent` rather than over a container\n// colour, because a row's own background is transparent and it therefore\n// tints whatever it happens to be sitting on — a card, or the page.\n\ntype ListItemProps = {\n  /** The row's headline — the one thing it is mostly about. */\n  children?: ReactNode;\n  /**\n   * Renders a `<button>` that ripples and tints on hover, for a row that is\n   * itself pressable. Leave it off for a row that only presents.\n   * @default false\n   */\n  interactive?: boolean;\n  /** Content before the headline: an avatar, an icon, a checkbox. */\n  leading?: ReactNode;\n  /** A second line under the headline, in the muted role. */\n  supporting?: ReactNode;\n  /** Content after the headline, such as an amount or a control. */\n  trailing?: ReactNode;\n} & HTMLAttributes<HTMLElement>;\nfunction ListItem({\n  children,\n  interactive = false,\n  leading,\n  supporting,\n  trailing,\n  ...props\n}: ListItemProps) {\n  const ripple = useRipple<HTMLButtonElement>(interactive);\n  const content = <>\n      {leading === undefined ? null : <span className=\"x6s0dn4 x78zum5 x2lah0s\">{leading}</span>}\n      <span className=\"x78zum5 xdt5ytf x1iyjqo2 x14qo01y xeuugli\">\n        <span className=\"xkknnkr x14zspaw x1v9cpvo x155f00i x1lz68p4\">{children}</span>\n        {supporting === undefined ? null : <span className=\"x1w5n3ug x1yicsit x1b35g6e x9d6959 xwth0xh xybisxh\">{supporting}</span>}\n      </span>\n      {trailing === undefined ? null : <span className=\"x6s0dn4 x78zum5 x2lah0s\">{trailing}</span>}\n    </>;\n  if (!interactive) {\n    return <div {...props} {...mergeStyles({\n      className: \"x6s0dn4 xjbqb8w xc342km x9f619 x139gbkf x78zum5 xxj4525 xh8yej3 xbktkl8 x1uvvd8r x790zyz x1n2onr6 x1yc453h\"\n    }, props)}>\n        {content}\n      </div>;\n  }\n  return <button type=\"button\" {...ripple.handlers} {...props} {...mergeStyles({\n    className: \"x6s0dn4 xc342km x9f619 x139gbkf x78zum5 xxj4525 xh8yej3 xbktkl8 x1uvvd8r x790zyz x1n2onr6 x1yc453h x83qkoq x1p2om7n xjbqb8w x1ypdohk xln7xf2 xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn\"\n  }, props)}>\n      {content}\n      {ripple.surface}\n    </button>;\n}\nexport type { ListItemProps };\nexport default ListItem;"],"mappings":";;;;AAqCA,SAAS,SAAS,EAChB,UACA,cAAc,OACd,SACA,YACA,UACA,GAAG,SACa;CAChB,MAAM,SAAS,UAA6B,WAAW;CACvD,MAAM,UAAU,qBAAA,UAAA,EAAA,UAAA;EACX,YAAY,KAAA,IAAY,OAAO,oBAAC,QAAD;GAAM,WAAU;GAA2B,UAAA;EAAc,CAAA;EACzF,qBAAC,QAAD;GAAM,WAAU;GAAhB,UAAA,CACE,oBAAC,QAAD;IAAM,WAAU;IAA+C;GAAe,CAAA,GAC7E,eAAe,KAAA,IAAY,OAAO,oBAAC,QAAD;IAAM,WAAU;IAAsD,UAAA;GAAiB,CAAA,CACtH;;EACL,aAAa,KAAA,IAAY,OAAO,oBAAC,QAAD;GAAM,WAAU;GAA2B,UAAA;EAAe,CAAA;CAC7F,EAAA,CAAA;CACF,IAAI,CAAC,aACH,OAAO,oBAAC,OAAD;EAAK,GAAI;EAAO,GAAI,YAAY,EACrC,WAAW,6GACb,GAAG,KAAK;EACH,UAAA;CACE,CAAA;CAET,OAAO,qBAAC,UAAD;EAAQ,MAAK;EAAS,GAAI,OAAO;EAAU,GAAI;EAAO,GAAI,YAAY,EAC3E,WAAW,yLACb,GAAG,KAAK;EAFD,UAAA,CAGF,SACA,OAAO,OACF;;AACZ"}

package/dist/components/product-icon/index.js

@@ -1,4 +1,5 @@
 import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
+import { mergeStatefulStyles } from "../../styles/merge.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Avatar } from "@base-ui/react/avatar";
 //#region src/components/product-icon/index.tsx
@@ -6,6 +7,7 @@ const styles = {
 	base: {
 		kGNEyG: "x6s0dn4",
 		kaIpWk: "x1xdvaa9",
+		kB7OPa: "x9f619",
 		k1xSpc: "x3nfvp2",
 		kmuXW: "x2lah0s",
 		kMv6JI: "xkknnkr",
@@ -81,7 +83,7 @@ function ProductIcon({ name, size = "md", src, tone = "primary", ...props$1 }) {
 		"aria-label": name,
 		role: "img",
 		...props$1,
-		...props(styles.base, styles[size], styles[tone]),
+		...mergeStatefulStyles(props(styles.base, styles[size], styles[tone]), props$1),
 		children: [src === void 0 ? null : /* @__PURE__ */ jsx(Avatar.Image, {
 			alt: "",
 			src,

package/dist/components/product-icon/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/product-icon/index.tsx"],"sourcesContent":["import type { AvatarRootProps as BaseUIAvatarRootProps } from '@base-ui/react/avatar';\nimport { Avatar as BaseUIAvatar } from '@base-ui/react/avatar';\nimport * as stylex from '@stylexjs/stylex';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, typography } from '../../tokens/design.tokens.stylex';\n\n// The counterpart to Avatar: Avatar stands for a person, this stands for\n// everything else — an application, a service, a brand. The two are the same\n// three sizes so either can fill a leading slot without moving what sits\n// beside it, and they differ in the two ways that matter for a mark rather\n// than a face.\n//\n// A rounded square rather than a circle. A logo is drawn to its own bounding\n// box, and a circle crops the corners it was composed with.\n//\n// `contain` rather than `cover`. Cropping a face to fill a circle loses\n// nothing anyone minds; cropping a wordmark loses the word. The cost is\n// letterboxing — a wide mark leaves space above and below — and that is the\n// right trade for a mark whose whole job is to be recognised.\nconst styles = {\n  base: {\n    kGNEyG: \"x6s0dn4\",\n    kaIpWk: \"x1xdvaa9\",\n    k1xSpc: \"x3nfvp2\",\n    kmuXW: \"x2lah0s\",\n    kMv6JI: \"xkknnkr\",\n    k63SB2: \"x1bf3uqz\",\n    kjj79g: \"xl56j7k\",\n    kVQacm: \"xb3r6kr\",\n    kfSwDN: \"x87ps6o\",\n    $$css: true\n  },\n  image: {\n    kZKoxP: \"x5yr21d\",\n    kzqmXN: \"xh8yej3\",\n    kVIFPx: \"x19kjcj4\",\n    $$css: true\n  },\n  lg: {\n    kZKoxP: \"xnnlda6\",\n    kGuDYH: \"x1848etk\",\n    kzqmXN: \"x15yg21f\",\n    $$css: true\n  },\n  md: {\n    kZKoxP: \"x1vqgdyp\",\n    kGuDYH: \"x14zspaw\",\n    kzqmXN: \"x100vrsf\",\n    $$css: true\n  },\n  negative: {\n    kWkggS: \"xkz0cvf\",\n    kMwMTN: \"xylzu7l\",\n    $$css: true\n  },\n  positive: {\n    kWkggS: \"xa3zu90\",\n    kMwMTN: \"x1di7zbg\",\n    $$css: true\n  },\n  primary: {\n    kWkggS: \"xp89om9\",\n    kMwMTN: \"xscdzaa\",\n    $$css: true\n  },\n  secondary: {\n    kWkggS: \"x15dekr4\",\n    kMwMTN: \"x1sawysd\",\n    $$css: true\n  },\n  sm: {\n    kZKoxP: \"xc9qbxq\",\n    kGuDYH: \"xkucv67\",\n    kzqmXN: \"x14qfxbe\",\n    $$css: true\n  },\n  tertiary: {\n    kWkggS: \"xs6yvni\",\n    kMwMTN: \"x3cbcwg\",\n    $$css: true\n  }\n};\ntype ProductIconProps = Omit<BaseUIAvatarRootProps, 'children'> & {\n  /**\n   * What this identifies. Supplies both the fallback initial and the\n   * accessible name, so a screen reader announces the thing rather than\n   * reading a letter aloud.\n   */\n  name: string;\n  /**\n   * Edge length: `sm` 36px, `md` 40px, `lg` 56px. The same three Avatar uses,\n   * so the two are interchangeable wherever one leads a row or a card.\n   * @default 'md'\n   */\n  size?: 'lg' | 'md' | 'sm';\n  /**\n   * The mark to show in place of the initial. The initial stays until it has\n   * loaded, and comes back if it fails.\n   */\n  src?: string;\n  /**\n   * Which container/on-container colour pair to tint the fallback with. Has\n   * no effect once `src` has loaded, since the mark covers it.\n   * @default 'primary'\n   */\n  tone?: 'negative' | 'positive' | 'primary' | 'secondary' | 'tertiary';\n};\n\n// One letter, where Avatar takes two. A person has a first name and a last\n// name to initialise; a thing usually has neither, so the same rule applied\n// to \"Second Item\" would produce \"SI\" — a pair of initials for something that\n// was never two words in that sense. Array.from rather than indexing, so a\n// name starting outside the Basic Multilingual Plane yields its whole first\n// character instead of half a surrogate pair.\nfunction initialFrom(name: string) {\n  const trimmed = name.trim();\n  return (Array.from(trimmed)[0] ?? '').toLocaleUpperCase();\n}\n\n/**\n * A small square mark identifying something that is not a person — an\n * application, a service, a brand. Reach for Avatar when it is a person.\n *\n * The mark is letterboxed rather than cropped, so a logo of any aspect ratio\n * can be handed over as it was drawn.\n */\nfunction ProductIcon({\n  name,\n  size = 'md',\n  src,\n  tone = 'primary',\n  ...props\n}: ProductIconProps) {\n  return (\n    // role/aria-label rather than letting the fallback letter be read: \"B\" is\n    // not what anyone means to announce. Marking the root as an image also\n    // makes its contents presentational, so neither the mark nor the letter\n    // is announced a second time underneath the name.\n    //\n    // The lint rule below wants a real <img> tag instead of the role, which\n    // cannot work here: an <img> is void, and this element's whole job is to\n    // hold the letter shown when there is no mark, or none has loaded yet.\n    <BaseUIAvatar.Root aria-label={name}\n    // oxlint-disable-next-line jsx-a11y/prefer-tag-over-role -- <img> takes no children\n    role=\"img\" {...props} {...stylex.props(styles.base, styles[size], styles[tone])}>\n      {src === undefined ? null : <BaseUIAvatar.Image alt=\"\" src={src} className=\"x5yr21d xh8yej3 x19kjcj4\" />}\n      <BaseUIAvatar.Fallback>{initialFrom(name)}</BaseUIAvatar.Fallback>\n    </BaseUIAvatar.Root>\n  );\n}\nexport type { ProductIconProps };\nexport default ProductIcon;"],"mappings":";;;;AAmBA,MAAM,SAAS;CACb,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,IAAI;EACF,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,IAAI;EACF,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,IAAI;EACF,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF;AAiCA,SAAS,YAAY,MAAc;CACjC,MAAM,UAAU,KAAK,KAAK;CAC1B,QAAQ,MAAM,KAAK,OAAO,CAAC,CAAC,MAAM,GAAA,CAAI,kBAAkB;AAC1D;;;;;;;;AASA,SAAS,YAAY,EACnB,MACA,OAAO,MACP,KACA,OAAO,WACP,GAAG,WACgB;CACnB,OASE,qBAAC,OAAa,MAAd;EAAmB,cAAY;EAE/B,MAAK;EAAM,GAAI;EAAO,GAAI,MAAa,OAAO,MAAM,OAAO,OAAO,OAAO,KAAK;EAF9E,UAAA,CAGG,QAAQ,KAAA,IAAY,OAAO,oBAAC,OAAa,OAAd;GAAoB,KAAI;GAAQ;GAAK,WAAU;EAA0B,CAAA,GACrG,oBAAC,OAAa,UAAd,EAAA,UAAwB,YAAY,IAAI,EAAyB,CAAA,CAChD;;AAEvB"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/product-icon/index.tsx"],"sourcesContent":["import type { AvatarRootProps as BaseUIAvatarRootProps } from '@base-ui/react/avatar';\nimport { Avatar as BaseUIAvatar } from '@base-ui/react/avatar';\nimport * as stylex from '@stylexjs/stylex';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, typography } from '../../tokens/design.tokens.stylex';\n\n// The counterpart to Avatar: Avatar stands for a person, this stands for\n// everything else — an application, a service, a brand. The two are the same\n// three sizes so either can fill a leading slot without moving what sits\n// beside it, and they differ in the two ways that matter for a mark rather\n// than a face.\n//\n// A rounded square rather than a circle. A logo is drawn to its own bounding\n// box, and a circle crops the corners it was composed with.\n//\n// `contain` rather than `cover`. Cropping a face to fill a circle loses\n// nothing anyone minds; cropping a wordmark loses the word. The cost is\n// letterboxing — a wide mark leaves space above and below — and that is the\n// right trade for a mark whose whole job is to be recognised.\nconst styles = {\n  base: {\n    kGNEyG: \"x6s0dn4\",\n    kaIpWk: \"x1xdvaa9\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x3nfvp2\",\n    kmuXW: \"x2lah0s\",\n    kMv6JI: \"xkknnkr\",\n    k63SB2: \"x1bf3uqz\",\n    kjj79g: \"xl56j7k\",\n    kVQacm: \"xb3r6kr\",\n    kfSwDN: \"x87ps6o\",\n    $$css: true\n  },\n  image: {\n    kZKoxP: \"x5yr21d\",\n    kzqmXN: \"xh8yej3\",\n    kVIFPx: \"x19kjcj4\",\n    $$css: true\n  },\n  lg: {\n    kZKoxP: \"xnnlda6\",\n    kGuDYH: \"x1848etk\",\n    kzqmXN: \"x15yg21f\",\n    $$css: true\n  },\n  md: {\n    kZKoxP: \"x1vqgdyp\",\n    kGuDYH: \"x14zspaw\",\n    kzqmXN: \"x100vrsf\",\n    $$css: true\n  },\n  negative: {\n    kWkggS: \"xkz0cvf\",\n    kMwMTN: \"xylzu7l\",\n    $$css: true\n  },\n  positive: {\n    kWkggS: \"xa3zu90\",\n    kMwMTN: \"x1di7zbg\",\n    $$css: true\n  },\n  primary: {\n    kWkggS: \"xp89om9\",\n    kMwMTN: \"xscdzaa\",\n    $$css: true\n  },\n  secondary: {\n    kWkggS: \"x15dekr4\",\n    kMwMTN: \"x1sawysd\",\n    $$css: true\n  },\n  sm: {\n    kZKoxP: \"xc9qbxq\",\n    kGuDYH: \"xkucv67\",\n    kzqmXN: \"x14qfxbe\",\n    $$css: true\n  },\n  tertiary: {\n    kWkggS: \"xs6yvni\",\n    kMwMTN: \"x3cbcwg\",\n    $$css: true\n  }\n};\ntype ProductIconProps = Omit<BaseUIAvatarRootProps, 'children'> & {\n  /**\n   * What this identifies. Supplies both the fallback initial and the\n   * accessible name, so a screen reader announces the thing rather than\n   * reading a letter aloud.\n   */\n  name: string;\n  /**\n   * Edge length: `sm` 36px, `md` 40px, `lg` 56px. The same three Avatar uses,\n   * so the two are interchangeable wherever one leads a row or a card.\n   * @default 'md'\n   */\n  size?: 'lg' | 'md' | 'sm';\n  /**\n   * The mark to show in place of the initial. The initial stays until it has\n   * loaded, and comes back if it fails.\n   */\n  src?: string;\n  /**\n   * Which container/on-container colour pair to tint the fallback with. Has\n   * no effect once `src` has loaded, since the mark covers it.\n   * @default 'primary'\n   */\n  tone?: 'negative' | 'positive' | 'primary' | 'secondary' | 'tertiary';\n};\n\n// One letter, where Avatar takes two. A person has a first name and a last\n// name to initialise; a thing usually has neither, so the same rule applied\n// to \"Second Item\" would produce \"SI\" — a pair of initials for something that\n// was never two words in that sense. Array.from rather than indexing, so a\n// name starting outside the Basic Multilingual Plane yields its whole first\n// character instead of half a surrogate pair.\nfunction initialFrom(name: string) {\n  const trimmed = name.trim();\n  return (Array.from(trimmed)[0] ?? '').toLocaleUpperCase();\n}\n\n/**\n * A small square mark identifying something that is not a person — an\n * application, a service, a brand. Reach for Avatar when it is a person.\n *\n * The mark is letterboxed rather than cropped, so a logo of any aspect ratio\n * can be handed over as it was drawn.\n */\nfunction ProductIcon({\n  name,\n  size = 'md',\n  src,\n  tone = 'primary',\n  ...props\n}: ProductIconProps) {\n  return (\n    // role/aria-label rather than letting the fallback letter be read: \"B\" is\n    // not what anyone means to announce. Marking the root as an image also\n    // makes its contents presentational, so neither the mark nor the letter\n    // is announced a second time underneath the name.\n    //\n    // The lint rule below wants a real <img> tag instead of the role, which\n    // cannot work here: an <img> is void, and this element's whole job is to\n    // hold the letter shown when there is no mark, or none has loaded yet.\n    <BaseUIAvatar.Root aria-label={name}\n    // oxlint-disable-next-line jsx-a11y/prefer-tag-over-role -- <img> takes no children\n    role=\"img\" {...props} {...mergeStatefulStyles(stylex.props(styles.base, styles[size], styles[tone]), props)}>\n      {src === undefined ? null : <BaseUIAvatar.Image alt=\"\" src={src} className=\"x5yr21d xh8yej3 x19kjcj4\" />}\n      <BaseUIAvatar.Fallback>{initialFrom(name)}</BaseUIAvatar.Fallback>\n    </BaseUIAvatar.Root>\n  );\n}\nexport type { ProductIconProps };\nexport default ProductIcon;"],"mappings":";;;;;AAoBA,MAAM,SAAS;CACb,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,IAAI;EACF,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,IAAI;EACF,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,IAAI;EACF,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF;AAiCA,SAAS,YAAY,MAAc;CACjC,MAAM,UAAU,KAAK,KAAK;CAC1B,QAAQ,MAAM,KAAK,OAAO,CAAC,CAAC,MAAM,GAAA,CAAI,kBAAkB;AAC1D;;;;;;;;AASA,SAAS,YAAY,EACnB,MACA,OAAO,MACP,KACA,OAAO,WACP,GAAG,WACgB;CACnB,OASE,qBAAC,OAAa,MAAd;EAAmB,cAAY;EAE/B,MAAK;EAAM,GAAI;EAAO,GAAI,oBAAoB,MAAa,OAAO,MAAM,OAAO,OAAO,OAAO,KAAK,GAAG,OAAK;EAF1G,UAAA,CAGG,QAAQ,KAAA,IAAY,OAAO,oBAAC,OAAa,OAAd;GAAoB,KAAI;GAAQ;GAAK,WAAU;EAA0B,CAAA,GACrG,oBAAC,OAAa,UAAd,EAAA,UAAwB,YAAY,IAAI,EAAyB,CAAA,CAChD;;AAEvB"}

package/dist/components/separator/index.js

@@ -1,4 +1,5 @@
 import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
+import { mergeStatefulStyles } from "../../styles/merge.js";
 import { jsx } from "react/jsx-runtime";
 import { Separator } from "@base-ui/react/separator";
 //#region src/components/separator/index.tsx
@@ -6,6 +7,7 @@ const styles = {
 	base: {
 		kWkggS: "x1l12bh",
 		kMzoRj: "xc342km",
+		kB7OPa: "x9f619",
 		kmuXW: "x2lah0s",
 		kogj98: "x1ghz6dp",
 		$$css: true
@@ -25,7 +27,7 @@ function Separator$1({ orientation = "horizontal", ...props$1 }) {
 	return /* @__PURE__ */ jsx(Separator, {
 		orientation,
 		...props$1,
-		...props(styles.base, styles[orientation])
+		...mergeStatefulStyles(props(styles.base, styles[orientation]), props$1)
 	});
 }
 //#endregion

package/dist/components/separator/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/separator/index.tsx"],"sourcesContent":["import type { SeparatorProps as BaseUISeparatorProps } from '@base-ui/react/separator';\nimport { Separator as BaseUISeparator } from '@base-ui/react/separator';\nimport * as stylex from '@stylexjs/stylex';\nimport '../../tokens/design.tokens.stylex';\nimport { colors } from '../../tokens/design.tokens.stylex';\n\n// A divider is the same colour as a border, so it draws from outlineVariant\n// rather than a role of its own — the design system treats the two as one\n// decision, and a separator that drifted from the borders around it would\n// read as a mistake.\n//\n// Drawn as a background on a 1px box rather than as a border, so the rule is\n// the element itself. A border would leave the element's own box at zero\n// size, which makes it invisible to flex `gap` and to anything measuring it.\n//\n// Vertical has no length of its own. `alignSelf: stretch` takes it from the\n// flex or grid parent, since a divider between two rows should match\n// whatever they turn out to be rather than being told a height at the call\n// site. In a plain block parent there is nothing to stretch to and it will\n// have no height — that is the documented cost of the prop.\nconst styles = {\n  base: {\n    kWkggS: \"x1l12bh\",\n    kMzoRj: \"xc342km\",\n    kmuXW: \"x2lah0s\",\n    kogj98: \"x1ghz6dp\",\n    $$css: true\n  },\n  horizontal: {\n    kZKoxP: \"xjm9jq1\",\n    kzqmXN: \"xh8yej3\",\n    $$css: true\n  },\n  vertical: {\n    kSGwAc: \"xkh2ocl\",\n    kzqmXN: \"x1i1rx1s\",\n    $$css: true\n  }\n};\ntype SeparatorProps = Omit<BaseUISeparatorProps, 'orientation'> & {\n  /**\n   * Which way the rule runs. A vertical separator takes its length from a\n   * flex or grid parent and has none of its own.\n   * @default 'horizontal'\n   */\n  orientation?: 'horizontal' | 'vertical';\n};\nfunction Separator({\n  orientation = 'horizontal',\n  ...props\n}: SeparatorProps) {\n  return <BaseUISeparator orientation={orientation} {...props} {...stylex.props(styles.base, styles[orientation])} />;\n}\nexport type { SeparatorProps };\nexport default Separator;"],"mappings":";;;;AAoBA,MAAM,SAAS;CACb,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,OAAO;CACT;CACA,YAAY;EACV,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF;AASA,SAAS,YAAU,EACjB,cAAc,cACd,GAAG,WACc;CACjB,OAAO,oBAAC,WAAD;EAA8B;EAAa,GAAI;EAAO,GAAI,MAAa,OAAO,MAAM,OAAO,YAAY;CAAE,CAAA;AAClH"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/separator/index.tsx"],"sourcesContent":["import type { SeparatorProps as BaseUISeparatorProps } from '@base-ui/react/separator';\nimport { Separator as BaseUISeparator } from '@base-ui/react/separator';\nimport * as stylex from '@stylexjs/stylex';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors } from '../../tokens/design.tokens.stylex';\n\n// A divider is the same colour as a border, so it draws from outlineVariant\n// rather than a role of its own — the design system treats the two as one\n// decision, and a separator that drifted from the borders around it would\n// read as a mistake.\n//\n// Drawn as a background on a 1px box rather than as a border, so the rule is\n// the element itself. A border would leave the element's own box at zero\n// size, which makes it invisible to flex `gap` and to anything measuring it.\n//\n// Vertical has no length of its own. `alignSelf: stretch` takes it from the\n// flex or grid parent, since a divider between two rows should match\n// whatever they turn out to be rather than being told a height at the call\n// site. In a plain block parent there is nothing to stretch to and it will\n// have no height — that is the documented cost of the prop.\nconst styles = {\n  base: {\n    kWkggS: \"x1l12bh\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kmuXW: \"x2lah0s\",\n    kogj98: \"x1ghz6dp\",\n    $$css: true\n  },\n  horizontal: {\n    kZKoxP: \"xjm9jq1\",\n    kzqmXN: \"xh8yej3\",\n    $$css: true\n  },\n  vertical: {\n    kSGwAc: \"xkh2ocl\",\n    kzqmXN: \"x1i1rx1s\",\n    $$css: true\n  }\n};\ntype SeparatorProps = Omit<BaseUISeparatorProps, 'orientation'> & {\n  /**\n   * Which way the rule runs. A vertical separator takes its length from a\n   * flex or grid parent and has none of its own.\n   * @default 'horizontal'\n   */\n  orientation?: 'horizontal' | 'vertical';\n};\nfunction Separator({\n  orientation = 'horizontal',\n  ...props\n}: SeparatorProps) {\n  return <BaseUISeparator orientation={orientation} {...props} {...mergeStatefulStyles(stylex.props(styles.base, styles[orientation]), props)} />;\n}\nexport type { SeparatorProps };\nexport default Separator;"],"mappings":";;;;;AAqBA,MAAM,SAAS;CACb,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,OAAO;CACT;CACA,YAAY;EACV,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF;AASA,SAAS,YAAU,EACjB,cAAc,cACd,GAAG,WACc;CACjB,OAAO,oBAAC,WAAD;EAA8B;EAAa,GAAI;EAAO,GAAI,oBAAoB,MAAa,OAAO,MAAM,OAAO,YAAY,GAAG,OAAK;CAAE,CAAA;AAC9I"}

package/dist/components/sheet/index.js

@@ -1,4 +1,5 @@
 import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
+import { mergeStatefulStyles, mergeStyles } from "../../styles/merge.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
 import { createContext, useContext } from "react";
@@ -15,6 +16,7 @@ const styles = {
 		$$css: true
 	},
 	body: {
+		kB7OPa: "x9f619",
 		k1xSpc: "x78zum5",
 		kXwgrk: "xdt5ytf",
 		kzQI83: "x1iyjqo2",
@@ -33,6 +35,7 @@ const styles = {
 		kfmiAY: "x1a37zkv xys6ro8",
 		krdFHd: "x6xk272 x9t1vth",
 		kGVxlE: "x19efjv6",
+		kB7OPa: "x9f619",
 		kMwMTN: "x139gbkf",
 		k1xSpc: "x78zum5",
 		kXwgrk: "xdt5ytf",
@@ -49,6 +52,7 @@ const styles = {
 		kLZC3w: "x12smttz",
 		kPef9Z: "x13fuv20",
 		kEafiO: "x178xt8z",
+		kB7OPa: "x9f619",
 		k1xSpc: "x78zum5",
 		kmuXW: "x2lah0s",
 		kOIVth: "x126z3so",
@@ -62,6 +66,7 @@ const styles = {
 		kL6WhQ: "x1j6faob",
 		kfdmCh: "x1q0q8m5",
 		kt9PQ7: "xso031l",
+		kB7OPa: "x9f619",
 		k1xSpc: "x78zum5",
 		kmuXW: "x2lah0s",
 		kOIVth: "x1gka490",
@@ -79,6 +84,7 @@ const styles = {
 		$$css: true
 	},
 	title: {
+		kB7OPa: "x9f619",
 		kMwMTN: "x139gbkf",
 		kMv6JI: "xdy5w5q",
 		kGuDYH: "xete2z3",
@@ -111,17 +117,24 @@ function Sheet({ children, size = "md", ...props }) {
 	});
 }
 function SheetBody(props) {
-	const $ = c(2);
+	const $ = c(5);
 	let t0;
 	if ($[0] !== props) {
-		t0 = /* @__PURE__ */ jsx("div", {
-			...props,
-			className: "x78zum5 xdt5ytf x1iyjqo2 xxj4525 x1odjw0f xgc26li"
-		});
+		t0 = mergeStyles({ className: "x9f619 x78zum5 xdt5ytf x1iyjqo2 xxj4525 x1odjw0f xgc26li" }, props);
 		$[0] = props;
 		$[1] = t0;
 	} else t0 = $[1];
-	return t0;
+	let t1;
+	if ($[2] !== props || $[3] !== t0) {
+		t1 = /* @__PURE__ */ jsx("div", {
+			...props,
+			...t0
+		});
+		$[2] = props;
+		$[3] = t0;
+		$[4] = t1;
+	} else t1 = $[4];
+	return t1;
 }
 /**
 * Closes the sheet when pressed. Carries no styling of its own, so give it
@@ -144,82 +157,83 @@ function SheetClose(props) {
 * page while this is portalled out to the end of the body.
 */
 function SheetContent(t0) {
-	const $ = c(14);
-	let children;
-	let container;
-	let props$1;
-	if ($[0] !== t0) {
-		({children, container, ...props$1} = t0);
-		$[0] = t0;
-		$[1] = children;
-		$[2] = container;
-		$[3] = props$1;
-	} else {
-		children = $[1];
-		container = $[2];
-		props$1 = $[3];
-	}
+	const $ = c(11);
+	const { children, container, ...props$1 } = t0;
 	const size = useContext(SheetSizeContext);
-	let t1;
-	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
-		t1 = /* @__PURE__ */ jsx(Dialog.Backdrop, { className: "x1vhuh8u xqcmdr3 x1yujl0p x1iqbvzf x10a8y8t xixxii4" });
-		$[4] = t1;
-	} else t1 = $[4];
+	const t1 = Dialog;
 	let t2;
-	if ($[5] !== size) {
-		t2 = props(styles.content, styles[size]);
-		$[5] = size;
-		$[6] = t2;
-	} else t2 = $[6];
-	let t3;
-	if ($[7] !== children || $[8] !== props$1 || $[9] !== t2) {
-		t3 = /* @__PURE__ */ jsx(Dialog.Popup, {
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsx(Dialog.Backdrop, { className: "x1vhuh8u xqcmdr3 x1yujl0p x1iqbvzf x10a8y8t xixxii4" });
+		$[0] = t2;
+	} else t2 = $[0];
+	const t3 = Dialog;
+	const t4 = mergeStatefulStyles(props(styles.content, styles[size]), props$1);
+	let t5;
+	if ($[1] !== children || $[2] !== props$1 || $[3] !== t3.Popup || $[4] !== t4) {
+		t5 = /* @__PURE__ */ jsx(t3.Popup, {
 			...props$1,
-			...t2,
+			...t4,
 			children
 		});
-		$[7] = children;
-		$[8] = props$1;
-		$[9] = t2;
-		$[10] = t3;
-	} else t3 = $[10];
-	let t4;
-	if ($[11] !== container || $[12] !== t3) {
-		t4 = /* @__PURE__ */ jsxs(Dialog.Portal, {
+		$[1] = children;
+		$[2] = props$1;
+		$[3] = t3.Popup;
+		$[4] = t4;
+		$[5] = t5;
+	} else t5 = $[5];
+	let t6;
+	if ($[6] !== container || $[7] !== t1.Portal || $[8] !== t2 || $[9] !== t5) {
+		t6 = /* @__PURE__ */ jsxs(t1.Portal, {
 			container,
-			children: [t1, t3]
+			children: [t2, t5]
 		});
-		$[11] = container;
-		$[12] = t3;
-		$[13] = t4;
-	} else t4 = $[13];
-	return t4;
+		$[6] = container;
+		$[7] = t1.Portal;
+		$[8] = t2;
+		$[9] = t5;
+		$[10] = t6;
+	} else t6 = $[10];
+	return t6;
 }
 function SheetFooter(props) {
-	const $ = c(2);
+	const $ = c(5);
 	let t0;
 	if ($[0] !== props) {
-		t0 = /* @__PURE__ */ jsx("div", {
-			...props,
-			className: "x12smttz x13fuv20 x178xt8z x78zum5 x2lah0s x126z3so x13a6bvl x1uvvd8r x790zyz"
-		});
+		t0 = mergeStyles({ className: "x12smttz x13fuv20 x178xt8z x9f619 x78zum5 x2lah0s x126z3so x13a6bvl x1uvvd8r x790zyz" }, props);
 		$[0] = props;
 		$[1] = t0;
 	} else t0 = $[1];
-	return t0;
+	let t1;
+	if ($[2] !== props || $[3] !== t0) {
+		t1 = /* @__PURE__ */ jsx("div", {
+			...props,
+			...t0
+		});
+		$[2] = props;
+		$[3] = t0;
+		$[4] = t1;
+	} else t1 = $[4];
+	return t1;
 }
 function SheetHeader(props) {
-	const $ = c(2);
+	const $ = c(5);
 	let t0;
 	if ($[0] !== props) {
-		t0 = /* @__PURE__ */ jsx("div", {
-			...props,
-			className: "x6s0dn4 x1j6faob x1q0q8m5 xso031l x78zum5 x2lah0s x1gka490 x1qughib x1cmllll x790zyz"
-		});
+		t0 = mergeStyles({ className: "x6s0dn4 x1j6faob x1q0q8m5 xso031l x9f619 x78zum5 x2lah0s x1gka490 x1qughib x1cmllll x790zyz" }, props);
 		$[0] = props;
 		$[1] = t0;
 	} else t0 = $[1];
-	return t0;
+	let t1;
+	if ($[2] !== props || $[3] !== t0) {
+		t1 = /* @__PURE__ */ jsx("div", {
+			...props,
+			...t0
+		});
+		$[2] = props;
+		$[3] = t0;
+		$[4] = t1;
+	} else t1 = $[4];
+	return t1;
 }
 /**
 * Names the sheet. Rendered through Base UI's title part, which is what
@@ -227,17 +241,24 @@ function SheetHeader(props) {
 * itself as an unnamed dialog.
 */
 function SheetTitle(props) {
-	const $ = c(2);
+	const $ = c(5);
 	let t0;
 	if ($[0] !== props) {
-		t0 = /* @__PURE__ */ jsx(Dialog.Title, {
-			...props,
-			className: "x139gbkf xdy5w5q xete2z3 x14ijtet xug9e1u x2divse x1ghz6dp"
-		});
+		t0 = mergeStatefulStyles({ className: "x9f619 x139gbkf xdy5w5q xete2z3 x14ijtet xug9e1u x2divse x1ghz6dp" }, props);
 		$[0] = props;
 		$[1] = t0;
 	} else t0 = $[1];
-	return t0;
+	let t1;
+	if ($[2] !== props || $[3] !== t0) {
+		t1 = /* @__PURE__ */ jsx(Dialog.Title, {
+			...props,
+			...t0
+		});
+		$[2] = props;
+		$[3] = t0;
+		$[4] = t1;
+	} else t1 = $[4];
+	return t1;
 }
 /**
 * Opens the sheet when pressed. Unstyled like `Sheet.Close`, so pass the

package/dist/components/sheet/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["children","container"],"sources":["../../../src/components/sheet/index.tsx"],"sourcesContent":["import type { DialogCloseProps as BaseUIDialogCloseProps, DialogPopupProps as BaseUIDialogPopupProps, DialogPortalProps as BaseUIDialogPortalProps, DialogRootProps as BaseUIDialogRootProps, DialogTitleProps as BaseUIDialogTitleProps, DialogTriggerProps as BaseUIDialogTriggerProps } from '@base-ui/react/dialog';\nimport type { HTMLAttributes, ReactNode } from 'react';\nimport { Dialog as BaseUIDialog } from '@base-ui/react/dialog';\nimport * as stylex from '@stylexjs/stylex';\nimport { createContext, useContext } from 'react';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, media, motion, radii, shadows, spacing, typography } from '../../tokens/design.tokens.stylex';\n\n// One component, two presentations. Above the medium breakpoint it is a side\n// sheet pinned to the inline end of the viewport; below it, the same panel\n// becomes a bottom sheet. That is M3's own pairing rather than two components,\n// and it is why nothing here takes a `side` prop — a sheet that stayed on the\n// right at 375px would be a drawer covering the whole screen.\n//\n// The two differ in three things and no more: which edges they are pinned to,\n// which two corners are rounded, and which axis they arrive along.\nconst slideInFromEnd = \"x17cjob-B\";\nconst slideInFromBottom = \"x15b941j-B\";\nconst fadeIn = \"x18re5ia-B\";\n\n// Entry only, so there is no exit animation to wait for and closing is\n// immediate. See the comment on `SheetContent` for why that is a design call\n// rather than a limit of StyleX.\nconst styles = {\n  backdrop: {\n    k44tkh: \"x1vhuh8u\",\n    kKVMdj: \"xqcmdr3\",\n    kyAemX: \"x1yujl0p\",\n    kWkggS: \"x1iqbvzf\",\n    kpwlN0: \"x10a8y8t\",\n    kVAEAm: \"xixxii4\",\n    $$css: true\n  },\n  body: {\n    k1xSpc: \"x78zum5\",\n    kXwgrk: \"xdt5ytf\",\n    kzQI83: \"x1iyjqo2\",\n    kOIVth: \"xxj4525\",\n    kORKVm: \"x1odjw0f\",\n    kmVPX3: \"xgc26li\",\n    $$css: true\n  },\n  content: {\n    k44tkh: \"x1n1nwrg\",\n    kKVMdj: \"xu2fq7p x18ihq2d\",\n    kyAemX: \"x16dv9tl\",\n    kWkggS: \"x1vnz5z6\",\n    kT0f0o: \"xkducg2\",\n    kVL7Gh: \"xrzall9 xb0nsol\",\n    kfmiAY: \"x1a37zkv xys6ro8\",\n    krdFHd: \"x6xk272 x9t1vth\",\n    kGVxlE: \"x19efjv6\",\n    kMwMTN: \"x139gbkf\",\n    k1xSpc: \"x78zum5\",\n    kXwgrk: \"xdt5ytf\",\n    krVfgx: \"x1ey2m1c\",\n    k87sOh: \"x13vifvy xmpip4z\",\n    kt4wiu: \"xtijo5x\",\n    kLqNvP: \"xhi6v0a x1upgybz\",\n    kskxy: \"x7ab17h x1dexy1j\",\n    kVQacm: \"xb3r6kr\",\n    kVAEAm: \"xixxii4\",\n    $$css: true\n  },\n  footer: {\n    kLZC3w: \"x12smttz\",\n    kPef9Z: \"x13fuv20\",\n    kEafiO: \"x178xt8z\",\n    k1xSpc: \"x78zum5\",\n    kmuXW: \"x2lah0s\",\n    kOIVth: \"x126z3so\",\n    kjj79g: \"x13a6bvl\",\n    k8WAf4: \"x1uvvd8r\",\n    kg3NbH: \"x790zyz\",\n    $$css: true\n  },\n  header: {\n    kGNEyG: \"x6s0dn4\",\n    kL6WhQ: \"x1j6faob\",\n    kfdmCh: \"x1q0q8m5\",\n    kt9PQ7: \"xso031l\",\n    k1xSpc: \"x78zum5\",\n    kmuXW: \"x2lah0s\",\n    kOIVth: \"x1gka490\",\n    kjj79g: \"x1qughib\",\n    k8WAf4: \"x1cmllll\",\n    kg3NbH: \"x790zyz\",\n    $$css: true\n  },\n  md: {\n    kzqmXN: \"x1l2rt3b xwvxfow\",\n    $$css: true\n  },\n  sm: {\n    kzqmXN: \"x1m258z3 xwvxfow\",\n    $$css: true\n  },\n  title: {\n    kMwMTN: \"x139gbkf\",\n    kMv6JI: \"xdy5w5q\",\n    kGuDYH: \"xete2z3\",\n    k63SB2: \"x14ijtet\",\n    kb6lSQ: \"xug9e1u\",\n    kLWn49: \"x2divse\",\n    kogj98: \"x1ghz6dp\",\n    $$css: true\n  }\n};\ntype SheetSize = 'md' | 'sm';\n\n// `size` is declared on the root, where a reader expects to set the shape of\n// the whole sheet, but it is `Sheet.Content` that has to apply it. One string\n// through context rather than making the call site repeat it on both.\nconst SheetSizeContext = createContext<SheetSize>('md');\n\n// `children` is narrowed to nodes. Base UI also accepts a function there, to\n// hand the sheet a payload passed by whichever trigger opened it, and that\n// form cannot be wrapped in a context provider without calling it first —\n// which would be doing Base UI's job with none of its state. Nothing in this\n// component needs the payload, so the narrower type says so rather than\n// leaving a signature that type-checks and then fails to render.\ntype SheetProps = Omit<BaseUIDialogRootProps, 'children'> & {\n  children?: ReactNode;\n  /**\n   * Panel width on the side-sheet presentation: `sm` 320px, `md` 400px.\n   * Ignored below the medium breakpoint, where the sheet is full width.\n   * @default 'md'\n   */\n  size?: SheetSize;\n};\n\n/**\n * A modal panel that arrives from the edge of the screen — a side sheet on a\n * wide viewport, a bottom sheet on a narrow one. Open state is Base UI's:\n * pass `open` with `onOpenChange` to control it, or `defaultOpen` to let it\n * keep its own.\n *\n * Composed rather than configured by props, because a sheet's header, body,\n * and footer all take arbitrary content — the parts are `Sheet.Trigger`,\n * `Sheet.Content`, `Sheet.Header`, `Sheet.Title`, `Sheet.Body`,\n * `Sheet.Footer`, and `Sheet.Close`.\n */\nfunction Sheet({\n  children,\n  size = 'md',\n  ...props\n}: SheetProps) {\n  return <BaseUIDialog.Root {...props}>\n      <SheetSizeContext value={size}>{children}</SheetSizeContext>\n    </BaseUIDialog.Root>;\n}\nfunction SheetBody(props: HTMLAttributes<HTMLDivElement>) {\n  return <div {...props} className=\"x78zum5 xdt5ytf x1iyjqo2 xxj4525 x1odjw0f xgc26li\" />;\n}\n\n/**\n * Closes the sheet when pressed. Carries no styling of its own, so give it\n * the control it should be through `render` — an `IconButton` in the header,\n * a `Button` in the footer.\n */\nfunction SheetClose(props: BaseUIDialogCloseProps) {\n  return <BaseUIDialog.Close {...props} />;\n}\n\n/**\n * The panel itself, and the scrim behind it. Everything the sheet shows goes\n * in here; `Sheet.Trigger` stays outside it, since the trigger lives in the\n * page while this is portalled out to the end of the body.\n */\nfunction SheetContent({\n  children,\n  container,\n  ...props\n}: SheetContentProps) {\n  const size = useContext(SheetSizeContext);\n  return <BaseUIDialog.Portal container={container}>\n      <BaseUIDialog.Backdrop className=\"x1vhuh8u xqcmdr3 x1yujl0p x1iqbvzf x10a8y8t xixxii4\" />\n      <BaseUIDialog.Popup {...props} {...stylex.props(styles.content, styles[size])}>\n        {children}\n      </BaseUIDialog.Popup>\n    </BaseUIDialog.Portal>;\n}\nfunction SheetFooter(props: HTMLAttributes<HTMLDivElement>) {\n  return <div {...props} className=\"x12smttz x13fuv20 x178xt8z x78zum5 x2lah0s x126z3so x13a6bvl x1uvvd8r x790zyz\" />;\n}\nfunction SheetHeader(props: HTMLAttributes<HTMLDivElement>) {\n  return <div {...props} className=\"x6s0dn4 x1j6faob x1q0q8m5 xso031l x78zum5 x2lah0s x1gka490 x1qughib x1cmllll x790zyz\" />;\n}\n\n/**\n * Names the sheet. Rendered through Base UI's title part, which is what\n * points the dialog's `aria-labelledby` at it — a sheet without one announces\n * itself as an unnamed dialog.\n */\nfunction SheetTitle(props: BaseUIDialogTitleProps) {\n  return <BaseUIDialog.Title {...props} className=\"x139gbkf xdy5w5q xete2z3 x14ijtet xug9e1u x2divse x1ghz6dp\" />;\n}\n\n/**\n * Opens the sheet when pressed. Unstyled like `Sheet.Close`, so pass the\n * control through `render`.\n */\nfunction SheetTrigger(props: BaseUIDialogTriggerProps) {\n  return <BaseUIDialog.Trigger {...props} />;\n}\nSheet.Body = SheetBody;\nSheet.Close = SheetClose;\nSheet.Content = SheetContent;\nSheet.Footer = SheetFooter;\nSheet.Header = SheetHeader;\nSheet.Title = SheetTitle;\nSheet.Trigger = SheetTrigger;\ntype SheetCloseProps = BaseUIDialogCloseProps;\ntype SheetContentProps = BaseUIDialogPopupProps & {\n  /**\n   * Where to portal the panel and scrim. Defaults to the end of `<body>`,\n   * which is right for an app that sets its StyleX theme on `:root`. An app\n   * that scopes the theme to a subtree has to point this at an element inside\n   * it, or the sheet renders outside the theme and falls back to the tokens'\n   * `prefers-color-scheme` default.\n   */\n  container?: BaseUIDialogPortalProps['container'];\n};\ntype SheetTitleProps = BaseUIDialogTitleProps;\ntype SheetTriggerProps = BaseUIDialogTriggerProps;\nexport type { SheetCloseProps, SheetContentProps, SheetProps, SheetSize, SheetTitleProps, SheetTriggerProps };\nexport default Sheet;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["children","container"],"sources":["../../../src/components/sheet/index.tsx"],"sourcesContent":["import type { DialogCloseProps as BaseUIDialogCloseProps, DialogPopupProps as BaseUIDialogPopupProps, DialogPortalProps as BaseUIDialogPortalProps, DialogRootProps as BaseUIDialogRootProps, DialogTitleProps as BaseUIDialogTitleProps, DialogTriggerProps as BaseUIDialogTriggerProps } from '@base-ui/react/dialog';\nimport type { HTMLAttributes, ReactNode } from 'react';\nimport { Dialog as BaseUIDialog } from '@base-ui/react/dialog';\nimport * as stylex from '@stylexjs/stylex';\nimport { createContext, useContext } from 'react';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, media, motion, radii, shadows, spacing, typography } from '../../tokens/design.tokens.stylex';\n\n// One component, two presentations. Above the medium breakpoint it is a side\n// sheet pinned to the inline end of the viewport; below it, the same panel\n// becomes a bottom sheet. That is M3's own pairing rather than two components,\n// and it is why nothing here takes a `side` prop — a sheet that stayed on the\n// right at 375px would be a drawer covering the whole screen.\n//\n// The two differ in three things and no more: which edges they are pinned to,\n// which two corners are rounded, and which axis they arrive along.\nconst slideInFromEnd = \"x17cjob-B\";\nconst slideInFromBottom = \"x15b941j-B\";\nconst fadeIn = \"x18re5ia-B\";\n\n// Entry only, so there is no exit animation to wait for and closing is\n// immediate. See the comment on `SheetContent` for why that is a design call\n// rather than a limit of StyleX.\nconst styles = {\n  backdrop: {\n    k44tkh: \"x1vhuh8u\",\n    kKVMdj: \"xqcmdr3\",\n    kyAemX: \"x1yujl0p\",\n    kWkggS: \"x1iqbvzf\",\n    kpwlN0: \"x10a8y8t\",\n    kVAEAm: \"xixxii4\",\n    $$css: true\n  },\n  body: {\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kXwgrk: \"xdt5ytf\",\n    kzQI83: \"x1iyjqo2\",\n    kOIVth: \"xxj4525\",\n    kORKVm: \"x1odjw0f\",\n    kmVPX3: \"xgc26li\",\n    $$css: true\n  },\n  content: {\n    k44tkh: \"x1n1nwrg\",\n    kKVMdj: \"xu2fq7p x18ihq2d\",\n    kyAemX: \"x16dv9tl\",\n    kWkggS: \"x1vnz5z6\",\n    kT0f0o: \"xkducg2\",\n    kVL7Gh: \"xrzall9 xb0nsol\",\n    kfmiAY: \"x1a37zkv xys6ro8\",\n    krdFHd: \"x6xk272 x9t1vth\",\n    kGVxlE: \"x19efjv6\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x139gbkf\",\n    k1xSpc: \"x78zum5\",\n    kXwgrk: \"xdt5ytf\",\n    krVfgx: \"x1ey2m1c\",\n    k87sOh: \"x13vifvy xmpip4z\",\n    kt4wiu: \"xtijo5x\",\n    kLqNvP: \"xhi6v0a x1upgybz\",\n    kskxy: \"x7ab17h x1dexy1j\",\n    kVQacm: \"xb3r6kr\",\n    kVAEAm: \"xixxii4\",\n    $$css: true\n  },\n  footer: {\n    kLZC3w: \"x12smttz\",\n    kPef9Z: \"x13fuv20\",\n    kEafiO: \"x178xt8z\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kmuXW: \"x2lah0s\",\n    kOIVth: \"x126z3so\",\n    kjj79g: \"x13a6bvl\",\n    k8WAf4: \"x1uvvd8r\",\n    kg3NbH: \"x790zyz\",\n    $$css: true\n  },\n  header: {\n    kGNEyG: \"x6s0dn4\",\n    kL6WhQ: \"x1j6faob\",\n    kfdmCh: \"x1q0q8m5\",\n    kt9PQ7: \"xso031l\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kmuXW: \"x2lah0s\",\n    kOIVth: \"x1gka490\",\n    kjj79g: \"x1qughib\",\n    k8WAf4: \"x1cmllll\",\n    kg3NbH: \"x790zyz\",\n    $$css: true\n  },\n  md: {\n    kzqmXN: \"x1l2rt3b xwvxfow\",\n    $$css: true\n  },\n  sm: {\n    kzqmXN: \"x1m258z3 xwvxfow\",\n    $$css: true\n  },\n  title: {\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x139gbkf\",\n    kMv6JI: \"xdy5w5q\",\n    kGuDYH: \"xete2z3\",\n    k63SB2: \"x14ijtet\",\n    kb6lSQ: \"xug9e1u\",\n    kLWn49: \"x2divse\",\n    kogj98: \"x1ghz6dp\",\n    $$css: true\n  }\n};\ntype SheetSize = 'md' | 'sm';\n\n// `size` is declared on the root, where a reader expects to set the shape of\n// the whole sheet, but it is `Sheet.Content` that has to apply it. One string\n// through context rather than making the call site repeat it on both.\nconst SheetSizeContext = createContext<SheetSize>('md');\n\n// `children` is narrowed to nodes. Base UI also accepts a function there, to\n// hand the sheet a payload passed by whichever trigger opened it, and that\n// form cannot be wrapped in a context provider without calling it first —\n// which would be doing Base UI's job with none of its state. Nothing in this\n// component needs the payload, so the narrower type says so rather than\n// leaving a signature that type-checks and then fails to render.\ntype SheetProps = Omit<BaseUIDialogRootProps, 'children'> & {\n  children?: ReactNode;\n  /**\n   * Panel width on the side-sheet presentation: `sm` 320px, `md` 400px.\n   * Ignored below the medium breakpoint, where the sheet is full width.\n   * @default 'md'\n   */\n  size?: SheetSize;\n};\n\n/**\n * A modal panel that arrives from the edge of the screen — a side sheet on a\n * wide viewport, a bottom sheet on a narrow one. Open state is Base UI's:\n * pass `open` with `onOpenChange` to control it, or `defaultOpen` to let it\n * keep its own.\n *\n * Composed rather than configured by props, because a sheet's header, body,\n * and footer all take arbitrary content — the parts are `Sheet.Trigger`,\n * `Sheet.Content`, `Sheet.Header`, `Sheet.Title`, `Sheet.Body`,\n * `Sheet.Footer`, and `Sheet.Close`.\n */\nfunction Sheet({\n  children,\n  size = 'md',\n  ...props\n}: SheetProps) {\n  return <BaseUIDialog.Root {...props}>\n      <SheetSizeContext value={size}>{children}</SheetSizeContext>\n    </BaseUIDialog.Root>;\n}\nfunction SheetBody(props: HTMLAttributes<HTMLDivElement>) {\n  return <div {...props} {...mergeStyles({\n    className: \"x9f619 x78zum5 xdt5ytf x1iyjqo2 xxj4525 x1odjw0f xgc26li\"\n  }, props)} />;\n}\n\n/**\n * Closes the sheet when pressed. Carries no styling of its own, so give it\n * the control it should be through `render` — an `IconButton` in the header,\n * a `Button` in the footer.\n */\nfunction SheetClose(props: BaseUIDialogCloseProps) {\n  return <BaseUIDialog.Close {...props} />;\n}\n\n/**\n * The panel itself, and the scrim behind it. Everything the sheet shows goes\n * in here; `Sheet.Trigger` stays outside it, since the trigger lives in the\n * page while this is portalled out to the end of the body.\n */\nfunction SheetContent({\n  children,\n  container,\n  ...props\n}: SheetContentProps) {\n  const size = useContext(SheetSizeContext);\n  return <BaseUIDialog.Portal container={container}>\n      <BaseUIDialog.Backdrop className=\"x1vhuh8u xqcmdr3 x1yujl0p x1iqbvzf x10a8y8t xixxii4\" />\n      <BaseUIDialog.Popup {...props} {...mergeStatefulStyles(stylex.props(styles.content, styles[size]), props)}>\n        {children}\n      </BaseUIDialog.Popup>\n    </BaseUIDialog.Portal>;\n}\nfunction SheetFooter(props: HTMLAttributes<HTMLDivElement>) {\n  return <div {...props} {...mergeStyles({\n    className: \"x12smttz x13fuv20 x178xt8z x9f619 x78zum5 x2lah0s x126z3so x13a6bvl x1uvvd8r x790zyz\"\n  }, props)} />;\n}\nfunction SheetHeader(props: HTMLAttributes<HTMLDivElement>) {\n  return <div {...props} {...mergeStyles({\n    className: \"x6s0dn4 x1j6faob x1q0q8m5 xso031l x9f619 x78zum5 x2lah0s x1gka490 x1qughib x1cmllll x790zyz\"\n  }, props)} />;\n}\n\n/**\n * Names the sheet. Rendered through Base UI's title part, which is what\n * points the dialog's `aria-labelledby` at it — a sheet without one announces\n * itself as an unnamed dialog.\n */\nfunction SheetTitle(props: BaseUIDialogTitleProps) {\n  return <BaseUIDialog.Title {...props} {...mergeStatefulStyles({\n    className: \"x9f619 x139gbkf xdy5w5q xete2z3 x14ijtet xug9e1u x2divse x1ghz6dp\"\n  }, props)} />;\n}\n\n/**\n * Opens the sheet when pressed. Unstyled like `Sheet.Close`, so pass the\n * control through `render`.\n */\nfunction SheetTrigger(props: BaseUIDialogTriggerProps) {\n  return <BaseUIDialog.Trigger {...props} />;\n}\nSheet.Body = SheetBody;\nSheet.Close = SheetClose;\nSheet.Content = SheetContent;\nSheet.Footer = SheetFooter;\nSheet.Header = SheetHeader;\nSheet.Title = SheetTitle;\nSheet.Trigger = SheetTrigger;\ntype SheetCloseProps = BaseUIDialogCloseProps;\ntype SheetContentProps = BaseUIDialogPopupProps & {\n  /**\n   * Where to portal the panel and scrim. Defaults to the end of `<body>`,\n   * which is right for an app that sets its StyleX theme on `:root`. An app\n   * that scopes the theme to a subtree has to point this at an element inside\n   * it, or the sheet renders outside the theme and falls back to the tokens'\n   * `prefers-color-scheme` default.\n   */\n  container?: BaseUIDialogPortalProps['container'];\n};\ntype SheetTitleProps = BaseUIDialogTitleProps;\ntype SheetTriggerProps = BaseUIDialogTriggerProps;\nexport type { SheetCloseProps, SheetContentProps, SheetProps, SheetSize, SheetTitleProps, SheetTriggerProps };\nexport default Sheet;"],"mappings":"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"}

package/dist/components/stack/index.d.ts

@@ -0,0 +1,60 @@
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/stack/index.d.ts
+type StackAlign = 'baseline' | 'center' | 'end' | 'start' | 'stretch';
+type StackGap = 'lg' | 'md' | 'none' | 'sm' | 'xl' | 'xs' | 'xxl' | 'xxs' | 'xxxl';
+type StackJustify = 'around' | 'between' | 'center' | 'end' | 'start';
+type StackProps = {
+  /**
+   * How the children line up across the stack: down the inline axis of a
+   * column, down the block axis of a row. Left unset, they stretch, which is
+   * what makes every card in a column the same width.
+   *
+   * `start` is what an inline-sized child needs in a column — a Badge or a
+   * Chip spans the whole width otherwise.
+   */
+  align?: StackAlign;
+  /**
+   * Which way the children run.
+   * @default 'column'
+   */
+  direction?: 'column' | 'row';
+  /**
+   * The space between children, as a step of the spacing scale. `none` closes
+   * it entirely.
+   *
+   * Worth setting. The default is a middle step, and how much air a group of
+   * things wants is the one thing a stack cannot work out for itself.
+   * @default 'md'
+   */
+  gap?: StackGap;
+  /**
+   * How leftover space is distributed along the stack. Left unset, the
+   * children sit at the start and the space collects after them.
+   *
+   * `between` is the one that puts a headline at one end of a row and its
+   * actions at the other.
+   */
+  justify?: StackJustify;
+  /**
+   * Lets a row wrap onto further lines rather than overflowing. Has no effect
+   * on a column, which has as many lines as it has children.
+   * @default false
+   */
+  wrap?: boolean;
+} & useRender.ComponentProps<'div'>;
+/**
+ * A row or a column of children with one gap between them, taken from the
+ * spacing scale.
+ *
+ * Layout only — it paints no surface and wraps no child, so each child is a
+ * flex item exactly as it was written. It is the answer to spacing a group of
+ * things, which is why no component here carries a margin of its own: the
+ * space between two things belongs to whatever holds both of them.
+ *
+ * `render` swaps the element, for a stack that should be a `<ul>`, a `<nav>`,
+ * or a `<section>` rather than a `<div>`.
+ */
+declare function Stack({ align, direction, gap, justify, render, wrap, ...props }: StackProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+//#endregion
+export { type StackAlign, type StackGap, type StackJustify, type StackProps, Stack as default };
+//# sourceMappingURL=index.d.ts.map