@kanso-labs/kanso-ui 0.8.1 → 0.9.0

package/dist/components/stack/index.js

@@ -0,0 +1,131 @@
+import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
+import { mergeStyles } from "../../styles/merge.js";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/stack/index.tsx
+const alignments = {
+	baseline: {
+		kGNEyG: "x1pha0wt",
+		$$css: true
+	},
+	center: {
+		kGNEyG: "x6s0dn4",
+		$$css: true
+	},
+	end: {
+		kGNEyG: "xuk3077",
+		$$css: true
+	},
+	start: {
+		kGNEyG: "x1cy8zhl",
+		$$css: true
+	},
+	stretch: {
+		kGNEyG: "x1qjc9v5",
+		$$css: true
+	}
+};
+const gaps = {
+	lg: {
+		kOIVth: "xxj4525",
+		$$css: true
+	},
+	md: {
+		kOIVth: "x1gka490",
+		$$css: true
+	},
+	none: {
+		kOIVth: "xxhr3t",
+		$$css: true
+	},
+	sm: {
+		kOIVth: "x126z3so",
+		$$css: true
+	},
+	xl: {
+		kOIVth: "xj2l1yv",
+		$$css: true
+	},
+	xs: {
+		kOIVth: "xzoy561",
+		$$css: true
+	},
+	xxl: {
+		kOIVth: "xghv2kt",
+		$$css: true
+	},
+	xxs: {
+		kOIVth: "x14qo01y",
+		$$css: true
+	},
+	xxxl: {
+		kOIVth: "xvm9ira",
+		$$css: true
+	}
+};
+const justifications = {
+	around: {
+		kjj79g: "x1l1ennw",
+		$$css: true
+	},
+	between: {
+		kjj79g: "x1qughib",
+		$$css: true
+	},
+	center: {
+		kjj79g: "xl56j7k",
+		$$css: true
+	},
+	end: {
+		kjj79g: "x13a6bvl",
+		$$css: true
+	},
+	start: {
+		kjj79g: "x1nhvcw1",
+		$$css: true
+	}
+};
+const styles = {
+	base: {
+		kB7OPa: "x9f619",
+		k1xSpc: "x78zum5",
+		$$css: true
+	},
+	column: {
+		kXwgrk: "xdt5ytf",
+		$$css: true
+	},
+	row: {
+		kXwgrk: "x1q0g3np",
+		$$css: true
+	},
+	wrap: {
+		kwnvtZ: "x1a02dak",
+		$$css: true
+	}
+};
+/**
+* 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>`.
+*/
+function Stack({ align, direction = "column", gap = "md", justify, render, wrap = false, ...props$1 }) {
+	return useRender({
+		defaultTagName: "div",
+		props: {
+			...props$1,
+			...mergeStyles(props(styles.base, styles[direction], gaps[gap], align !== void 0 && alignments[align], justify !== void 0 && justifications[justify], wrap && styles.wrap), props$1)
+		},
+		render
+	});
+}
+//#endregion
+export { Stack as default };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/stack/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 { spacing } from '../../tokens/design.tokens.stylex';\n\n// Short names rather than the CSS values they map to, so a call site reads\n// `align=\"start\"` instead of `align=\"flex-start\"`. A lookup is unavoidable\n// either way — `alignItems` takes `flex-start` and `justifyContent` takes\n// `space-between`, neither of which is a word anyone wants in a prop.\nconst alignments = {\n  baseline: {\n    kGNEyG: \"x1pha0wt\",\n    $$css: true\n  },\n  center: {\n    kGNEyG: \"x6s0dn4\",\n    $$css: true\n  },\n  end: {\n    kGNEyG: \"xuk3077\",\n    $$css: true\n  },\n  start: {\n    kGNEyG: \"x1cy8zhl\",\n    $$css: true\n  },\n  stretch: {\n    kGNEyG: \"x1qjc9v5\",\n    $$css: true\n  }\n};\n\n// One key per step of the spacing scale, named exactly as the token group\n// names it, so `gaps[gap]` indexes straight off the prop with no lookup table\n// to keep in sync — the same arrangement Text's type scale uses.\n//\n// `none` is the one key with no token behind it, and deliberately so: zero is\n// the absence of a spacing decision rather than a step of the scale, so there\n// is nothing for the scale to name. It exists because a stack that only wants\n// the direction and the alignment is otherwise a plain flex container written\n// out by hand.\nconst gaps = {\n  lg: {\n    kOIVth: \"xxj4525\",\n    $$css: true\n  },\n  md: {\n    kOIVth: \"x1gka490\",\n    $$css: true\n  },\n  none: {\n    kOIVth: \"xxhr3t\",\n    $$css: true\n  },\n  sm: {\n    kOIVth: \"x126z3so\",\n    $$css: true\n  },\n  xl: {\n    kOIVth: \"xj2l1yv\",\n    $$css: true\n  },\n  xs: {\n    kOIVth: \"xzoy561\",\n    $$css: true\n  },\n  xxl: {\n    kOIVth: \"xghv2kt\",\n    $$css: true\n  },\n  xxs: {\n    kOIVth: \"x14qo01y\",\n    $$css: true\n  },\n  xxxl: {\n    kOIVth: \"xvm9ira\",\n    $$css: true\n  }\n};\nconst justifications = {\n  around: {\n    kjj79g: \"x1l1ennw\",\n    $$css: true\n  },\n  between: {\n    kjj79g: \"x1qughib\",\n    $$css: true\n  },\n  center: {\n    kjj79g: \"xl56j7k\",\n    $$css: true\n  },\n  end: {\n    kjj79g: \"x13a6bvl\",\n    $$css: true\n  },\n  start: {\n    kjj79g: \"x1nhvcw1\",\n    $$css: true\n  }\n};\nconst styles = {\n  base: {\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    $$css: true\n  },\n  column: {\n    kXwgrk: \"xdt5ytf\",\n    $$css: true\n  },\n  row: {\n    kXwgrk: \"x1q0g3np\",\n    $$css: true\n  },\n  wrap: {\n    kwnvtZ: \"x1a02dak\",\n    $$css: true\n  }\n};\ntype StackAlign = 'baseline' | 'center' | 'end' | 'start' | 'stretch';\ntype StackGap = 'lg' | 'md' | 'none' | 'sm' | 'xl' | 'xs' | 'xxl' | 'xxs' | 'xxxl';\ntype StackJustify = 'around' | 'between' | 'center' | 'end' | 'start';\ntype StackProps = {\n  /**\n   * How the children line up across the stack: down the inline axis of a\n   * column, down the block axis of a row. Left unset, they stretch, which is\n   * what makes every card in a column the same width.\n   *\n   * `start` is what an inline-sized child needs in a column — a Badge or a\n   * Chip spans the whole width otherwise.\n   */\n  align?: StackAlign;\n  /**\n   * Which way the children run.\n   * @default 'column'\n   */\n  direction?: 'column' | 'row';\n  /**\n   * The space between children, as a step of the spacing scale. `none` closes\n   * it entirely.\n   *\n   * Worth setting. The default is a middle step, and how much air a group of\n   * things wants is the one thing a stack cannot work out for itself.\n   * @default 'md'\n   */\n  gap?: StackGap;\n  /**\n   * How leftover space is distributed along the stack. Left unset, the\n   * children sit at the start and the space collects after them.\n   *\n   * `between` is the one that puts a headline at one end of a row and its\n   * actions at the other.\n   */\n  justify?: StackJustify;\n  /**\n   * Lets a row wrap onto further lines rather than overflowing. Has no effect\n   * on a column, which has as many lines as it has children.\n   * @default false\n   */\n  wrap?: boolean;\n} & useRender.ComponentProps<'div'>;\n\n/**\n * A row or a column of children with one gap between them, taken from the\n * spacing scale.\n *\n * Layout only — it paints no surface and wraps no child, so each child is a\n * flex item exactly as it was written. It is the answer to spacing a group of\n * things, which is why no component here carries a margin of its own: the\n * space between two things belongs to whatever holds both of them.\n *\n * `render` swaps the element, for a stack that should be a `<ul>`, a `<nav>`,\n * or a `<section>` rather than a `<div>`.\n */\nfunction Stack({\n  align,\n  direction = 'column',\n  gap = 'md',\n  justify,\n  render,\n  wrap = false,\n  ...props\n}: StackProps) {\n  return useRender({\n    defaultTagName: 'div',\n    props: {\n      ...props,\n      ...mergeStyles(stylex.props(styles.base, styles[direction], gaps[gap], align !== undefined && alignments[align], justify !== undefined && justifications[justify], wrap && styles.wrap), props)\n    },\n    render\n  });\n}\nexport type { StackAlign, StackGap, StackJustify, StackProps };\nexport default Stack;"],"mappings":";;;;AAUA,MAAM,aAAa;CACjB,UAAU;EACR,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,OAAO;CACT;CACA,KAAK;EACH,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,OAAO;CACT;AACF;AAWA,MAAM,OAAO;CACX,IAAI;EACF,QAAQ;EACR,OAAO;CACT;CACA,IAAI;EACF,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,OAAO;CACT;CACA,IAAI;EACF,QAAQ;EACR,OAAO;CACT;CACA,IAAI;EACF,QAAQ;EACR,OAAO;CACT;CACA,IAAI;EACF,QAAQ;EACR,OAAO;CACT;CACA,KAAK;EACH,QAAQ;EACR,OAAO;CACT;CACA,KAAK;EACH,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,OAAO;CACT;AACF;AACA,MAAM,iBAAiB;CACrB,QAAQ;EACN,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,OAAO;CACT;CACA,KAAK;EACH,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,OAAO;CACT;AACF;AACA,MAAM,SAAS;CACb,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,OAAO;CACT;CACA,KAAK;EACH,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,OAAO;CACT;AACF;;;;;;;;;;;;;AAwDA,SAAS,MAAM,EACb,OACA,YAAY,UACZ,MAAM,MACN,SACA,QACA,OAAO,OACP,GAAG,WACU;CACb,OAAO,UAAU;EACf,gBAAgB;EAChB,OAAO;GACL,GAAG;GACH,GAAG,YAAY,MAAa,OAAO,MAAM,OAAO,YAAY,KAAK,MAAM,UAAU,KAAA,KAAa,WAAW,QAAQ,YAAY,KAAA,KAAa,eAAe,UAAU,QAAQ,OAAO,IAAI,GAAG,OAAK;EAChM;EACA;CACF,CAAC;AACH"}

package/dist/components/supporting-pane/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";
 import { c } from "react/compiler-runtime";
@@ -16,77 +17,84 @@ import { c } from "react/compiler-runtime";
 * screen.
 */
 function SupportingPane(t0) {
-	const $ = c(19);
-	let main;
-	let props;
+	const $ = c(22);
 	let render;
-	let supporting;
-	if ($[0] !== t0) {
-		({main, render, supporting, ...props} = t0);
-		$[0] = t0;
-		$[1] = main;
-		$[2] = props;
-		$[3] = render;
-		$[4] = supporting;
-	} else {
-		main = $[1];
-		props = $[2];
-		render = $[3];
-		supporting = $[4];
-	}
 	let t1;
-	if ($[5] !== main) {
-		t1 = /* @__PURE__ */ jsx("div", {
-			className: "xeuugli",
-			children: main
-		});
-		$[5] = main;
-		$[6] = t1;
-	} else t1 = $[6];
 	let t2;
-	if ($[7] !== supporting) {
-		t2 = /* @__PURE__ */ jsx("div", {
-			className: "xeuugli",
-			children: supporting
-		});
-		$[7] = supporting;
-		$[8] = t2;
-	} else t2 = $[8];
 	let t3;
-	if ($[9] !== t1 || $[10] !== t2) {
-		t3 = /* @__PURE__ */ jsxs(Fragment, { children: [t1, t2] });
-		$[9] = t1;
-		$[10] = t2;
-		$[11] = t3;
-	} else t3 = $[11];
 	let t4;
-	if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
-		t4 = { className: "xrvj5dj xj2l1yv x1mkdm3x xj1h9sb x1bg1yrb" };
-		$[12] = t4;
-	} else t4 = $[12];
 	let t5;
-	if ($[13] !== props || $[14] !== t3) {
-		t5 = {
-			...props,
-			children: t3,
-			...t4
-		};
-		$[13] = props;
-		$[14] = t3;
-		$[15] = t5;
-	} else t5 = $[15];
+	if ($[0] !== t0) {
+		const { main, render: t6, supporting, ...props } = t0;
+		render = t6;
+		t5 = useRender;
+		t4 = "div";
+		t1 = props;
+		let t7;
+		if ($[7] !== main) {
+			t7 = /* @__PURE__ */ jsx("div", {
+				className: "x9f619 xeuugli",
+				children: main
+			});
+			$[7] = main;
+			$[8] = t7;
+		} else t7 = $[8];
+		let t8;
+		if ($[9] !== supporting) {
+			t8 = /* @__PURE__ */ jsx("div", {
+				className: "x9f619 xeuugli",
+				children: supporting
+			});
+			$[9] = supporting;
+			$[10] = t8;
+		} else t8 = $[10];
+		if ($[11] !== t7 || $[12] !== t8) {
+			t2 = /* @__PURE__ */ jsxs(Fragment, { children: [t7, t8] });
+			$[11] = t7;
+			$[12] = t8;
+			$[13] = t2;
+		} else t2 = $[13];
+		t3 = mergeStyles({ className: "x9f619 xrvj5dj xj2l1yv x1mkdm3x xj1h9sb x1bg1yrb" }, props);
+		$[0] = t0;
+		$[1] = render;
+		$[2] = t1;
+		$[3] = t2;
+		$[4] = t3;
+		$[5] = t4;
+		$[6] = t5;
+	} else {
+		render = $[1];
+		t1 = $[2];
+		t2 = $[3];
+		t3 = $[4];
+		t4 = $[5];
+		t5 = $[6];
+	}
 	let t6;
-	if ($[16] !== render || $[17] !== t5) {
+	if ($[14] !== t1 || $[15] !== t2 || $[16] !== t3) {
 		t6 = {
-			defaultTagName: "div",
-			props: t5,
+			...t1,
+			children: t2,
+			...t3
+		};
+		$[14] = t1;
+		$[15] = t2;
+		$[16] = t3;
+		$[17] = t6;
+	} else t6 = $[17];
+	let t7;
+	if ($[18] !== render || $[19] !== t4 || $[20] !== t6) {
+		t7 = {
+			defaultTagName: t4,
+			props: t6,
 			render
 		};
-		$[16] = render;
-		$[17] = t5;
-		$[18] = t6;
-	} else t6 = $[18];
-	return useRender(t6);
+		$[18] = render;
+		$[19] = t4;
+		$[20] = t6;
+		$[21] = t7;
+	} else t7 = $[21];
+	return t5(t7);
 }
 //#endregion
 export { SupportingPane as default };

package/dist/components/supporting-pane/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["main","supporting"],"sources":["../../../src/components/supporting-pane/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// One of Material 3's canonical layouts. The supporting pane holds content\n// that only means anything next to the main pane — reviewer comments, related\n// items, a tool panel — which is what separates it from list-detail, where\n// the second pane stands on its own.\n//\n// M3 gives this layout three shapes across the breakpoints, and all three are\n// reachable in CSS because none of them depends on what the reader selected:\n// stacked at compact, an even split at medium, two thirds to one third from\n// expanded up. Stacking is M3's \"reflow\" strategy, where the supporting pane\n// moves under the main one rather than being dismissed. The spec's other\n// compact option is a bottom sheet, which is a different component's job —\n// reach for Sheet at the call site when the supporting content should be\n// summoned rather than scrolled to.\n//\n\ntype SupportingPaneProps = Omit<useRender.ComponentProps<'div'>, 'children'> & {\n  /** The primary content. Takes two thirds of the width from expanded up. */\n  main?: ReactNode;\n  /**\n   * Content that only means something beside `main`. Sits below it at compact,\n   * and beside it from medium up.\n   */\n  supporting?: ReactNode;\n};\n\n/**\n * Material 3's supporting pane layout: a main pane and a companion that\n * reflows underneath it when there is no room beside it.\n *\n * Layout only — neither pane paints a surface or a border of its own, so what\n * goes in them is composed at the call site out of Cards, lists, or plain\n * content. `render` swaps the container's element, for a layout that should\n * 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 SupportingPane({\n  main,\n  render,\n  supporting,\n  ...props\n}: SupportingPaneProps) {\n  return useRender({\n    defaultTagName: 'div',\n    props: {\n      ...props,\n      children: <>\n          <div className=\"xeuugli\">{main}</div>\n          <div className=\"xeuugli\">{supporting}</div>\n        </>,\n      ...{\n        className: \"xrvj5dj xj2l1yv x1mkdm3x xj1h9sb x1bg1yrb\"\n      }\n    },\n    render\n  });\n}\nexport type { SupportingPaneProps };\nexport default SupportingPane;"],"mappings":";;;;;;;;;;;;;;;;;AA4CA,SAAA,eAAA,IAAA;CAAA,MAAA,IAAA,EAAA,EAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,IAAA;EAAwB,CAAA,CAAA,MAAA,QAAA,YAAA,GAAA,SAAA;EAKF,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA;EAAA,OAAA,EAAA;EAAA,QAAA,EAAA;EAAA,SAAA,EAAA;EAAA,aAAA,EAAA;CAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,MAAA;EAMZ,KAAA,oBAAA,OAAA;GAAe,WAAA;GAAW,UAAA;EAAW,CAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,YAAA;EACrC,KAAA,oBAAA,OAAA;GAAe,WAAA;GAAW,UAAA;EAAiB,CAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,MAAA,EAAA,QAAA,IAAA;EAFrC,KAAA,qBAAA,UAAA,EAAA,UAAA,CACN,IACA,EAA2C,EAAA,CAAA;EAC1C,EAAA,KAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,QAAA,OAAA,IAAA,2BAAA,GAAA;EACF,KAAA,EAAA,WACU,4CACb;EAAC,EAAA,MAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,QAAA,SAAA,EAAA,QAAA,IAAA;EARI,KAAA;GAAA,GACF;GAAK,UACE;GAGL,GACF;EAGL;EAAC,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,QAAA,UAAA,EAAA,QAAA,IAAA;EAXc,KAAA;GAAA,gBACC;GAAK,OACd;GASN;EAEH;EAAC,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OAbM,UAAU,EAahB;AAAC"}
+{"version":3,"file":"index.js","names":["useRender","props","main","supporting"],"sources":["../../../src/components/supporting-pane/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// One of Material 3's canonical layouts. The supporting pane holds content\n// that only means anything next to the main pane — reviewer comments, related\n// items, a tool panel — which is what separates it from list-detail, where\n// the second pane stands on its own.\n//\n// M3 gives this layout three shapes across the breakpoints, and all three are\n// reachable in CSS because none of them depends on what the reader selected:\n// stacked at compact, an even split at medium, two thirds to one third from\n// expanded up. Stacking is M3's \"reflow\" strategy, where the supporting pane\n// moves under the main one rather than being dismissed. The spec's other\n// compact option is a bottom sheet, which is a different component's job —\n// reach for Sheet at the call site when the supporting content should be\n// summoned rather than scrolled to.\n//\n\ntype SupportingPaneProps = Omit<useRender.ComponentProps<'div'>, 'children'> & {\n  /** The primary content. Takes two thirds of the width from expanded up. */\n  main?: ReactNode;\n  /**\n   * Content that only means something beside `main`. Sits below it at compact,\n   * and beside it from medium up.\n   */\n  supporting?: ReactNode;\n};\n\n/**\n * Material 3's supporting pane layout: a main pane and a companion that\n * reflows underneath it when there is no room beside it.\n *\n * Layout only — neither pane paints a surface or a border of its own, so what\n * goes in them is composed at the call site out of Cards, lists, or plain\n * content. `render` swaps the container's element, for a layout that should\n * 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 SupportingPane({\n  main,\n  render,\n  supporting,\n  ...props\n}: SupportingPaneProps) {\n  return useRender({\n    defaultTagName: 'div',\n    props: {\n      ...props,\n      children: <>\n          <div className=\"x9f619 xeuugli\">{main}</div>\n          <div className=\"x9f619 xeuugli\">{supporting}</div>\n        </>,\n      ...mergeStyles({\n        className: \"x9f619 xrvj5dj xj2l1yv x1mkdm3x xj1h9sb x1bg1yrb\"\n      }, props)\n    },\n    render\n  });\n}\nexport type { SupportingPaneProps };\nexport default SupportingPane;"],"mappings":";;;;;;;;;;;;;;;;;;AA6CA,SAAA,eAAA,IAAA;CAAA,MAAA,IAAA,EAAA,EAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,IAAA;EAAwB,MAAA,EAAA,MAAA,QAAA,IAAA,YAAA,GAAA,UAAA;EAAA,SAAA;EAMfA,KAAA;EACW,KAAA;EAEXC,KAAA;EAAK,IAAA;EAAA,IAAA,EAAA,OAAA,MAAA;GAEJ,KAAA,oBAAA,OAAA;IAAe,WAAA;IAAkB,UAAA;GAAW,CAAA;GAAA,EAAA,KAAA;GAAA,EAAA,KAAA;EAAA,OAAA,KAAA,EAAA;EAAA,IAAA;EAAA,IAAA,EAAA,OAAA,YAAA;GAC5C,KAAA,oBAAA,OAAA;IAAe,WAAA;IAAkB,UAAA;GAAiB,CAAA;GAAA,EAAA,KAAA;GAAA,EAAA,MAAA;EAAA,OAAA,KAAA,EAAA;EAAA,IAAA,EAAA,QAAA,MAAA,EAAA,QAAA,IAAA;GAF5C,KAAA,qBAAA,UAAA,EAAA,UAAA,CACN,IACA,EAAkD,EAAA,CAAA;GACjD,EAAA,MAAA;GAAA,EAAA,MAAA;GAAA,EAAA,MAAA;EAAA,OAAA,KAAA,EAAA;EACF,KAAA,YAAY,EAAA,WACF,mDACb,GAAG,KAAK;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA;EAAA,SAAA,EAAA;EAAA,KAAA,EAAA;EAAA,KAAA,EAAA;EAAA,KAAA,EAAA;EAAA,KAAA,EAAA;EAAA,KAAA,EAAA;CAAA;CAAA,IAAA;CAAA,IAAA,EAAA,QAAA,MAAA,EAAA,QAAA,MAAA,EAAA,QAAA,IAAA;EARJ,KAAA;GAAA,GACFA;GAAK,UACE;GAGL,GACF;EAGL;EAAC,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,QAAA,UAAA,EAAA,QAAA,MAAA,EAAA,QAAA,IAAA;EAXc,KAAA;GAAA,gBACC;GAAK,OACd;GASN;EAEH;EAAC,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OAbMD,GAAU,EAahB;AAAC"}

package/dist/components/tabs/index.js

@@ -1,15 +1,8 @@
+import { mergeStatefulStyles } from "../../styles/merge.js";
 import { jsx } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
 import { Tabs } from "@base-ui/react/tabs";
 //#region src/components/tabs/index.tsx
-function tabClassName(state) {
-	return {
-		0: { className: "x6s0dn4 x10w6t97 x1xdvaa9 xc342km x1ypdohk x3nfvp2 x2lah0s xkknnkr x14zspaw x1v9cpvo xl56j7k x155f00i x1lz68p4 xrgy624 x1hl8ikr x9v5kkp x1t137rt x1de99jn xt970qd x18fpw6u x1qno0dh xs2xxs2 xpc4ca7 x1p2om7n xjbqb8w x1w5n3ug" },
-		2: { className: "x6s0dn4 x10w6t97 x1xdvaa9 xc342km x1ypdohk x3nfvp2 x2lah0s xkknnkr x14zspaw x1v9cpvo xl56j7k x155f00i x1lz68p4 xrgy624 x1hl8ikr x9v5kkp x1t137rt x1de99jn xt970qd x18fpw6u x1qno0dh xs2xxs2 xpc4ca7 x1hei0q8 xp89om9 xscdzaa" },
-		1: { className: "x6s0dn4 x10w6t97 x1xdvaa9 xc342km x3nfvp2 x2lah0s xkknnkr x14zspaw x1v9cpvo xl56j7k x155f00i x1lz68p4 xrgy624 x1hl8ikr x9v5kkp x1t137rt x1de99jn xt970qd x18fpw6u x1qno0dh xs2xxs2 xpc4ca7 xjbqb8w x1xj74d8 x1h6gzvc" },
-		3: { className: "x6s0dn4 x10w6t97 x1xdvaa9 xc342km x3nfvp2 x2lah0s xkknnkr x14zspaw x1v9cpvo xl56j7k x155f00i x1lz68p4 xrgy624 x1hl8ikr x9v5kkp x1t137rt x1de99jn xt970qd x18fpw6u x1qno0dh xs2xxs2 xpc4ca7 xjbqb8w x1xj74d8 x1h6gzvc" }
-	}[!!state.active << 1 | !!state.disabled << 0].className;
-}
 /**
 * A tab strip and its panels. Selection is Base UI's `value`: pass `value`
 * with `onValueChange` to control it, or `defaultValue` to let it keep its
@@ -30,43 +23,72 @@ function Tabs$1(props) {
 	return t0;
 }
 function TabsList(props) {
-	const $ = c(2);
+	const $ = c(5);
 	let t0;
 	if ($[0] !== props) {
-		t0 = /* @__PURE__ */ jsx(Tabs.List, {
-			...props,
-			className: "x78zum5 x14qo01y"
-		});
+		t0 = mergeStatefulStyles({ className: "x9f619 x78zum5 x14qo01y" }, props);
 		$[0] = props;
 		$[1] = t0;
 	} else t0 = $[1];
-	return t0;
+	let t1;
+	if ($[2] !== props || $[3] !== t0) {
+		t1 = /* @__PURE__ */ jsx(Tabs.List, {
+			...props,
+			...t0
+		});
+		$[2] = props;
+		$[3] = t0;
+		$[4] = t1;
+	} else t1 = $[4];
+	return t1;
 }
 function TabsPanel(props) {
-	const $ = c(2);
+	const $ = c(5);
 	let t0;
 	if ($[0] !== props) {
-		t0 = /* @__PURE__ */ jsx(Tabs.Panel, {
-			...props,
-			className: "xrgy624 x1hl8ikr x9v5kkp x1t137rt x1de99jn"
-		});
+		t0 = mergeStatefulStyles({ className: "x9f619 xrgy624 x1hl8ikr x9v5kkp x1t137rt x1de99jn" }, props);
 		$[0] = props;
 		$[1] = t0;
 	} else t0 = $[1];
-	return t0;
+	let t1;
+	if ($[2] !== props || $[3] !== t0) {
+		t1 = /* @__PURE__ */ jsx(Tabs.Panel, {
+			...props,
+			...t0
+		});
+		$[2] = props;
+		$[3] = t0;
+		$[4] = t1;
+	} else t1 = $[4];
+	return t1;
 }
 function TabsTab(props) {
-	const $ = c(2);
+	const $ = c(5);
 	let t0;
 	if ($[0] !== props) {
-		t0 = /* @__PURE__ */ jsx(Tabs.Tab, {
-			...props,
-			className: tabClassName
-		});
+		t0 = mergeStatefulStyles(tabStyles, props);
 		$[0] = props;
 		$[1] = t0;
 	} else t0 = $[1];
-	return t0;
+	let t1;
+	if ($[2] !== props || $[3] !== t0) {
+		t1 = /* @__PURE__ */ jsx(Tabs.Tab, {
+			...props,
+			...t0
+		});
+		$[2] = props;
+		$[3] = t0;
+		$[4] = t1;
+	} else t1 = $[4];
+	return t1;
+}
+function tabStyles(state) {
+	return {
+		0: { className: "x6s0dn4 x10w6t97 x1xdvaa9 xc342km x9f619 x1ypdohk x3nfvp2 x2lah0s xkknnkr x14zspaw x1v9cpvo xl56j7k x155f00i x1lz68p4 xrgy624 x1hl8ikr x9v5kkp x1t137rt x1de99jn xt970qd x18fpw6u x1qno0dh xs2xxs2 xpc4ca7 x1p2om7n xjbqb8w x1w5n3ug" },
+		2: { className: "x6s0dn4 x10w6t97 x1xdvaa9 xc342km x9f619 x1ypdohk x3nfvp2 x2lah0s xkknnkr x14zspaw x1v9cpvo xl56j7k x155f00i x1lz68p4 xrgy624 x1hl8ikr x9v5kkp x1t137rt x1de99jn xt970qd x18fpw6u x1qno0dh xs2xxs2 xpc4ca7 x1hei0q8 xp89om9 xscdzaa" },
+		1: { className: "x6s0dn4 x10w6t97 x1xdvaa9 xc342km x9f619 x3nfvp2 x2lah0s xkknnkr x14zspaw x1v9cpvo xl56j7k x155f00i x1lz68p4 xrgy624 x1hl8ikr x9v5kkp x1t137rt x1de99jn xt970qd x18fpw6u x1qno0dh xs2xxs2 xpc4ca7 xjbqb8w x1xj74d8 x1h6gzvc" },
+		3: { className: "x6s0dn4 x10w6t97 x1xdvaa9 xc342km x9f619 x3nfvp2 x2lah0s xkknnkr x14zspaw x1v9cpvo xl56j7k x155f00i x1lz68p4 xrgy624 x1hl8ikr x9v5kkp x1t137rt x1de99jn xt970qd x18fpw6u x1qno0dh xs2xxs2 xpc4ca7 xjbqb8w x1xj74d8 x1h6gzvc" }
+	}[!!state.active << 1 | !!state.disabled << 0];
 }
 Tabs$1.List = TabsList;
 Tabs$1.Panel = TabsPanel;

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["tabClassName"],"sources":["../../../src/components/tabs/index.tsx"],"sourcesContent":["import type { TabsListProps as BaseUITabsListProps, TabsPanelProps as BaseUITabsPanelProps, TabsRootProps as BaseUITabsRootProps, TabsTabProps as BaseUITabsTabProps, TabsTabState as BaseUITabsTabState } from '@base-ui/react/tabs';\nimport { Tabs as BaseUITabs } from '@base-ui/react/tabs';\nimport * as stylex from '@stylexjs/stylex';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\n\n// A tinted pill marks the active tab, not the underline Material draws. That\n// is what the source design uses, and the two are different controls wearing\n// the same name: an underline belongs to a full-width tab bar, while a row of\n// pills reads as a segmented control sitting inside a section.\n//\n// The pill takes the same height, radius, and type as Chip. Both are\n// pill-shaped selection controls, and a row of tabs above a row of chips\n// looks wrong the moment the two disagree about either.\n\n// StyleX cannot target [data-selected] on the element it is styling, so the\n// active pill cannot be chosen in CSS. Base UI's answer is a className that is\n// a function of the tab's own state, the same mechanism Chip uses — declared\n// at module scope so it is one stable reference rather than a fresh closure\n// per render.\nfunction tabClassName(state: BaseUITabsTabState) {\n  return {\n    0: {\n      className: \"x6s0dn4 x10w6t97 x1xdvaa9 xc342km x1ypdohk x3nfvp2 x2lah0s xkknnkr x14zspaw x1v9cpvo xl56j7k x155f00i x1lz68p4 xrgy624 x1hl8ikr x9v5kkp x1t137rt x1de99jn xt970qd x18fpw6u x1qno0dh xs2xxs2 xpc4ca7 x1p2om7n xjbqb8w x1w5n3ug\"\n    },\n    2: {\n      className: \"x6s0dn4 x10w6t97 x1xdvaa9 xc342km x1ypdohk x3nfvp2 x2lah0s xkknnkr x14zspaw x1v9cpvo xl56j7k x155f00i x1lz68p4 xrgy624 x1hl8ikr x9v5kkp x1t137rt x1de99jn xt970qd x18fpw6u x1qno0dh xs2xxs2 xpc4ca7 x1hei0q8 xp89om9 xscdzaa\"\n    },\n    1: {\n      className: \"x6s0dn4 x10w6t97 x1xdvaa9 xc342km x3nfvp2 x2lah0s xkknnkr x14zspaw x1v9cpvo xl56j7k x155f00i x1lz68p4 xrgy624 x1hl8ikr x9v5kkp x1t137rt x1de99jn xt970qd x18fpw6u x1qno0dh xs2xxs2 xpc4ca7 xjbqb8w x1xj74d8 x1h6gzvc\"\n    },\n    3: {\n      className: \"x6s0dn4 x10w6t97 x1xdvaa9 xc342km x3nfvp2 x2lah0s xkknnkr x14zspaw x1v9cpvo xl56j7k x155f00i x1lz68p4 xrgy624 x1hl8ikr x9v5kkp x1t137rt x1de99jn xt970qd x18fpw6u x1qno0dh xs2xxs2 xpc4ca7 xjbqb8w x1xj74d8 x1h6gzvc\"\n    }\n  }[!!state.active << 1 | !!state.disabled << 0].className;\n}\n\n/**\n * A tab strip and its panels. Selection is Base UI's `value`: pass `value`\n * with `onValueChange` to control it, or `defaultValue` to let it keep its\n * own.\n *\n * Composed rather than configured by props, because the number of tabs and\n * what each panel holds are the call site's to decide — the parts are\n * `Tabs.List`, `Tabs.Tab`, and `Tabs.Panel`.\n */\nfunction Tabs(props: BaseUITabsRootProps) {\n  return <BaseUITabs.Root {...props} />;\n}\nfunction TabsList(props: BaseUITabsListProps) {\n  return <BaseUITabs.List {...props} className=\"x78zum5 x14qo01y\" />;\n}\nfunction TabsPanel(props: BaseUITabsPanelProps) {\n  return <BaseUITabs.Panel {...props} className=\"xrgy624 x1hl8ikr x9v5kkp x1t137rt x1de99jn\" />;\n}\nfunction TabsTab(props: BaseUITabsTabProps) {\n  return <BaseUITabs.Tab {...props} className={tabClassName} />;\n}\nTabs.List = TabsList;\nTabs.Panel = TabsPanel;\nTabs.Tab = TabsTab;\ntype TabsListProps = BaseUITabsListProps;\ntype TabsPanelProps = BaseUITabsPanelProps;\ntype TabsProps = BaseUITabsRootProps;\ntype TabsTabProps = BaseUITabsTabProps;\nexport type { TabsListProps, TabsPanelProps, TabsProps, TabsTabProps };\nexport default Tabs;"],"mappings":";;;;AAoBA,SAAS,aAAa,OAA2B;CAC/C,OAAO;EACL,GAAG,EACD,WAAW,gOACb;EACA,GAAG,EACD,WAAW,+NACb;EACA,GAAG,EACD,WAAW,uNACb;EACA,GAAG,EACD,WAAW,uNACb;CACF,EAAE,CAAC,CAAC,MAAM,UAAU,IAAI,CAAC,CAAC,MAAM,YAAY,EAAE,CAAC;AACjD;;;;;;;;;;AAWA,SAAA,OAAA,OAAA;CAAA,MAAA,IAAA,EAAA,CAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,OAAA;EACS,KAAA,oBAAA,KAAA,MAAA,EAAA,GAAqB,MAAK,CAAA;EAAI,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OAA9B;AAA8B;AAEvC,SAAA,SAAA,OAAA;CAAA,MAAA,IAAA,EAAA,CAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,OAAA;EACS,KAAA,oBAAA,KAAA,MAAA;GAAA,GAAqB;GAAiB,WAAA;EAAkB,CAAA;EAAG,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OAA3D;AAA2D;AAEpE,SAAA,UAAA,OAAA;CAAA,MAAA,IAAA,EAAA,CAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,OAAA;EACS,KAAA,oBAAA,KAAA,OAAA;GAAA,GAAsB;GAAiB,WAAA;EAA4C,CAAA;EAAG,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OAAtF;AAAsF;AAE/F,SAAA,QAAA,OAAA;CAAA,MAAA,IAAA,EAAA,CAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,OAAA;EACS,KAAA,oBAAA,KAAA,KAAA;GAAA,GAAoB;GAAkBA,WAAA;EAAY,CAAA;EAAI,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OAAtD;AAAsD;AAE/D,OAAK,OAAO;AACZ,OAAK,QAAQ;AACb,OAAK,MAAM"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/tabs/index.tsx"],"sourcesContent":["import type { TabsListProps as BaseUITabsListProps, TabsPanelProps as BaseUITabsPanelProps, TabsRootProps as BaseUITabsRootProps, TabsTabProps as BaseUITabsTabProps, TabsTabState as BaseUITabsTabState } from '@base-ui/react/tabs';\nimport { Tabs as BaseUITabs } from '@base-ui/react/tabs';\nimport * as stylex from '@stylexjs/stylex';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\n\n// A tinted pill marks the active tab, not the underline Material draws. That\n// is what the source design uses, and the two are different controls wearing\n// the same name: an underline belongs to a full-width tab bar, while a row of\n// pills reads as a segmented control sitting inside a section.\n//\n// The pill takes the same height, radius, and type as Chip. Both are\n// pill-shaped selection controls, and a row of tabs above a row of chips\n// looks wrong the moment the two disagree about either.\n\n/**\n * A tab strip and its panels. Selection is Base UI's `value`: pass `value`\n * with `onValueChange` to control it, or `defaultValue` to let it keep its\n * own.\n *\n * Composed rather than configured by props, because the number of tabs and\n * what each panel holds are the call site's to decide — the parts are\n * `Tabs.List`, `Tabs.Tab`, and `Tabs.Panel`.\n */\nfunction Tabs(props: BaseUITabsRootProps) {\n  return <BaseUITabs.Root {...props} />;\n}\nfunction TabsList(props: BaseUITabsListProps) {\n  return <BaseUITabs.List {...props} {...mergeStatefulStyles({\n    className: \"x9f619 x78zum5 x14qo01y\"\n  }, props)} />;\n}\nfunction TabsPanel(props: BaseUITabsPanelProps) {\n  return <BaseUITabs.Panel {...props} {...mergeStatefulStyles({\n    className: \"x9f619 xrgy624 x1hl8ikr x9v5kkp x1t137rt x1de99jn\"\n  }, props)} />;\n}\nfunction TabsTab(props: BaseUITabsTabProps) {\n  return <BaseUITabs.Tab {...props} {...mergeStatefulStyles(tabStyles, props)} />;\n}\n\n// StyleX cannot target [data-selected] on the element it is styling, so the\n// active pill cannot be chosen in CSS. Base UI's answer is a className that is\n// a function of the tab's own state, the same mechanism Chip uses —\n// mergeStatefulStyles wraps this one so a tab still keeps a className the call\n// site passed.\nfunction tabStyles(state: BaseUITabsTabState) {\n  return {\n    0: {\n      className: \"x6s0dn4 x10w6t97 x1xdvaa9 xc342km x9f619 x1ypdohk x3nfvp2 x2lah0s xkknnkr x14zspaw x1v9cpvo xl56j7k x155f00i x1lz68p4 xrgy624 x1hl8ikr x9v5kkp x1t137rt x1de99jn xt970qd x18fpw6u x1qno0dh xs2xxs2 xpc4ca7 x1p2om7n xjbqb8w x1w5n3ug\"\n    },\n    2: {\n      className: \"x6s0dn4 x10w6t97 x1xdvaa9 xc342km x9f619 x1ypdohk x3nfvp2 x2lah0s xkknnkr x14zspaw x1v9cpvo xl56j7k x155f00i x1lz68p4 xrgy624 x1hl8ikr x9v5kkp x1t137rt x1de99jn xt970qd x18fpw6u x1qno0dh xs2xxs2 xpc4ca7 x1hei0q8 xp89om9 xscdzaa\"\n    },\n    1: {\n      className: \"x6s0dn4 x10w6t97 x1xdvaa9 xc342km x9f619 x3nfvp2 x2lah0s xkknnkr x14zspaw x1v9cpvo xl56j7k x155f00i x1lz68p4 xrgy624 x1hl8ikr x9v5kkp x1t137rt x1de99jn xt970qd x18fpw6u x1qno0dh xs2xxs2 xpc4ca7 xjbqb8w x1xj74d8 x1h6gzvc\"\n    },\n    3: {\n      className: \"x6s0dn4 x10w6t97 x1xdvaa9 xc342km x9f619 x3nfvp2 x2lah0s xkknnkr x14zspaw x1v9cpvo xl56j7k x155f00i x1lz68p4 xrgy624 x1hl8ikr x9v5kkp x1t137rt x1de99jn xt970qd x18fpw6u x1qno0dh xs2xxs2 xpc4ca7 xjbqb8w x1xj74d8 x1h6gzvc\"\n    }\n  }[!!state.active << 1 | !!state.disabled << 0];\n}\nTabs.List = TabsList;\nTabs.Panel = TabsPanel;\nTabs.Tab = TabsTab;\ntype TabsListProps = BaseUITabsListProps;\ntype TabsPanelProps = BaseUITabsPanelProps;\ntype TabsProps = BaseUITabsRootProps;\ntype TabsTabProps = BaseUITabsTabProps;\nexport type { TabsListProps, TabsPanelProps, TabsProps, TabsTabProps };\nexport default Tabs;"],"mappings":";;;;;;;;;;;;;;AAyBA,SAAA,OAAA,OAAA;CAAA,MAAA,IAAA,EAAA,CAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,OAAA;EACS,KAAA,oBAAA,KAAA,MAAA,EAAA,GAAqB,MAAK,CAAA;EAAI,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OAA9B;AAA8B;AAEvC,SAAA,SAAA,OAAA;CAAA,MAAA,IAAA,EAAA,CAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,OAAA;EACyC,KAAA,oBAAoB,EAAA,WAC9C,0BACb,GAAG,KAAK;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,SAAA,EAAA,OAAA,IAAA;EAFF,KAAA,oBAAA,KAAA,MAAA;GAAA,GAAqB;GAAK,GAAM;EAE9B,CAAA;EAAI,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OAFN;AAEM;AAEf,SAAA,UAAA,OAAA;CAAA,MAAA,IAAA,EAAA,CAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,OAAA;EAC0C,KAAA,oBAAoB,EAAA,WAC/C,oDACb,GAAG,KAAK;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,SAAA,EAAA,OAAA,IAAA;EAFF,KAAA,oBAAA,KAAA,OAAA;GAAA,GAAsB;GAAK,GAAM;EAE/B,CAAA;EAAI,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OAFN;AAEM;AAEf,SAAA,QAAA,OAAA;CAAA,MAAA,IAAA,EAAA,CAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,OAAA;EACwC,KAAA,oBAAoB,WAAW,KAAK;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,SAAA,EAAA,OAAA,IAAA;EAApE,KAAA,oBAAA,KAAA,KAAA;GAAA,GAAoB;GAAK,GAAM;EAAqC,CAAA;EAAI,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OAAxE;AAAwE;AAQjF,SAAS,UAAU,OAA2B;CAC5C,OAAO;EACL,GAAG,EACD,WAAW,uOACb;EACA,GAAG,EACD,WAAW,sOACb;EACA,GAAG,EACD,WAAW,8NACb;EACA,GAAG,EACD,WAAW,8NACb;CACF,EAAE,CAAC,CAAC,MAAM,UAAU,IAAI,CAAC,CAAC,MAAM,YAAY;AAC9C;AACA,OAAK,OAAO;AACZ,OAAK,QAAQ;AACb,OAAK,MAAM"}

package/dist/components/text/index.js

@@ -1,8 +1,10 @@
 import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
+import { mergeStyles } from "../../styles/merge.js";
 import { useRender } from "@base-ui/react/use-render";
 //#region src/components/text/index.tsx
 const styles = {
 	base: {
+		kB7OPa: "x9f619",
 		kogj98: "x1ghz6dp",
 		$$css: true
 	},
@@ -162,7 +164,7 @@ function Text({ render, tone = "default", variant = "bodyMedium", ...props$1 })
 		defaultTagName: "span",
 		props: {
 			...props$1,
-			...props(styles.base, styles[variant], tones[tone])
+			...mergeStyles(props(styles.base, styles[variant], tones[tone]), props$1)
 		},
 		render
 	});

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/text/index.tsx"],"sourcesContent":["import { useRender } from '@base-ui/react/use-render';\nimport * as stylex from '@stylexjs/stylex';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, typography } from '../../tokens/design.tokens.stylex';\n\n// One key per style in the 15-entry type scale, named exactly as the token\n// group names it, so `styles[variant]` indexes straight off the prop with no\n// lookup table to keep in sync. Every style sets all five fields the scale\n// defines rather than inheriting any of them: a Text nested inside another\n// Text would otherwise pick up the outer line-height or tracking, which is\n// the kind of drift the scale exists to prevent.\n//\n// `margin: 0` is the one UA reset here. Text renders a <span> by default, but\n// `render` is how a consumer reaches for semantic markup — `<Text\n// render={<h2 />}>` — and an h2's UA margin would then vary the spacing\n// around otherwise identical type.\nconst styles = {\n  base: {\n    kogj98: \"x1ghz6dp\",\n    $$css: true\n  },\n  bodyLarge: {\n    kMv6JI: \"x16svsjw\",\n    kGuDYH: \"x1848etk\",\n    k63SB2: \"x1c52epr\",\n    kb6lSQ: \"x1qn8t5l\",\n    kLWn49: \"xh7dzej\",\n    $$css: true\n  },\n  bodyMedium: {\n    kMv6JI: \"xpo2rfv\",\n    kGuDYH: \"x193rfdd\",\n    k63SB2: \"x1hews6w\",\n    kb6lSQ: \"xn43zvd\",\n    kLWn49: \"xv61bfh\",\n    $$css: true\n  },\n  bodySmall: {\n    kMv6JI: \"x1yicsit\",\n    kGuDYH: \"x1b35g6e\",\n    k63SB2: \"x9d6959\",\n    kb6lSQ: \"xwth0xh\",\n    kLWn49: \"xybisxh\",\n    $$css: true\n  },\n  displayLarge: {\n    kMv6JI: \"xjaampf\",\n    kGuDYH: \"xuyiek4\",\n    k63SB2: \"x1n2oj23\",\n    kb6lSQ: \"x1hxa6v5\",\n    kLWn49: \"x1iwmiir\",\n    $$css: true\n  },\n  displayMedium: {\n    kMv6JI: \"x1gi70vc\",\n    kGuDYH: \"xlzzeuu\",\n    k63SB2: \"xh9quta\",\n    kb6lSQ: \"x148mp24\",\n    kLWn49: \"xs5hucj\",\n    $$css: true\n  },\n  displaySmall: {\n    kMv6JI: \"x1eslvzl\",\n    kGuDYH: \"x1g52wnc\",\n    k63SB2: \"x1x664hp\",\n    kb6lSQ: \"x1rnjaw4\",\n    kLWn49: \"x92ldg4\",\n    $$css: true\n  },\n  headlineLarge: {\n    kMv6JI: \"x1vsmgmf\",\n    kGuDYH: \"xh9c4x\",\n    k63SB2: \"x1y15vu6\",\n    kb6lSQ: \"xoqu3bc\",\n    kLWn49: \"x10x9d6x\",\n    $$css: true\n  },\n  headlineMedium: {\n    kMv6JI: \"x18s19nt\",\n    kGuDYH: \"xcohea8\",\n    k63SB2: \"x1mtpwof\",\n    kb6lSQ: \"x1kuyk5j\",\n    kLWn49: \"xucx483\",\n    $$css: true\n  },\n  headlineSmall: {\n    kMv6JI: \"x1fz0g89\",\n    kGuDYH: \"xkb6epg\",\n    k63SB2: \"x76yrz5\",\n    kb6lSQ: \"x1s1qhaa\",\n    kLWn49: \"x1voeury\",\n    $$css: true\n  },\n  labelLarge: {\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    $$css: true\n  },\n  labelMedium: {\n    kMv6JI: \"xp6n8n2\",\n    kGuDYH: \"xkucv67\",\n    k63SB2: \"x14hhc5u\",\n    kb6lSQ: \"x12utw95\",\n    kLWn49: \"xvzb9hk\",\n    $$css: true\n  },\n  labelSmall: {\n    kMv6JI: \"xs1w0rn\",\n    kGuDYH: \"x1n35her\",\n    k63SB2: \"x1su64ma\",\n    kb6lSQ: \"xdlnduh\",\n    kLWn49: \"xaomhve\",\n    $$css: true\n  },\n  titleLarge: {\n    kMv6JI: \"xdy5w5q\",\n    kGuDYH: \"xete2z3\",\n    k63SB2: \"x14ijtet\",\n    kb6lSQ: \"xug9e1u\",\n    kLWn49: \"x2divse\",\n    $$css: true\n  },\n  titleMedium: {\n    kMv6JI: \"x46eyla\",\n    kGuDYH: \"x5ehqhr\",\n    k63SB2: \"xrf6cl6\",\n    kb6lSQ: \"x1g135zh\",\n    kLWn49: \"x1ggk5va\",\n    $$css: true\n  },\n  titleSmall: {\n    kMv6JI: \"xrgwony\",\n    kGuDYH: \"x12s497w\",\n    k63SB2: \"x1szcwkt\",\n    kb6lSQ: \"xo803ec\",\n    kLWn49: \"xyl1r0q\",\n    $$css: true\n  }\n};\n\n// Tone is a separate axis from variant so the two compose freely — any of the\n// 15 scale styles in any of these colors. Kept to the roles text actually\n// takes on a surface; a consumer needing something outside this set uses\n// `inherit` and colors the parent, rather than this growing a case per role.\nconst tones = {\n  default: {\n    kMwMTN: \"x139gbkf\",\n    $$css: true\n  },\n  error: {\n    kMwMTN: \"x4ii1qj\",\n    $$css: true\n  },\n  inherit: {\n    kMwMTN: \"x1heor9g\",\n    $$css: true\n  },\n  muted: {\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  },\n  negative: {\n    kMwMTN: \"x12gp0t\",\n    $$css: true\n  },\n  positive: {\n    kMwMTN: \"x4no3js\",\n    $$css: true\n  },\n  primary: {\n    kMwMTN: \"x1mxwv8y\",\n    $$css: true\n  }\n};\ntype TextProps = useRender.ComponentProps<'span'> & {\n  /**\n   * The color role to render in. `inherit` takes the color of the nearest\n   * colored ancestor instead of setting one.\n   * @default 'default'\n   */\n  tone?: 'default' | 'error' | 'inherit' | 'muted' | 'negative' | 'positive' | 'primary';\n  /**\n   * Which style of the type scale to render.\n   * @default 'bodyMedium'\n   */\n  variant?: 'bodyLarge' | 'bodyMedium' | 'bodySmall' | 'displayLarge' | 'displayMedium' | 'displaySmall' | 'headlineLarge' | 'headlineMedium' | 'headlineSmall' | 'labelLarge' | 'labelMedium' | 'labelSmall' | 'titleLarge' | 'titleMedium' | 'titleSmall';\n};\nfunction Text({\n  render,\n  tone = 'default',\n  variant = 'bodyMedium',\n  ...props\n}: TextProps) {\n  // stylex.props() spreads after `props` for the same reason Button does it:\n  // it wins over a consumer-supplied className/style rather than merging with\n  // one. useRender would otherwise join the two class strings, and which of\n  // the two won would come down to stylesheet order rather than anything the\n  // call site can see.\n  return useRender({\n    defaultTagName: 'span',\n    props: {\n      ...props,\n      ...stylex.props(styles.base, styles[variant], tones[tone])\n    },\n    render\n  });\n}\nexport type { TextProps };\nexport default Text;"],"mappings":";;;AAgBA,MAAM,SAAS;CACb,MAAM;EACJ,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,YAAY;EACV,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,cAAc;EACZ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,eAAe;EACb,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,cAAc;EACZ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,eAAe;EACb,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,gBAAgB;EACd,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,eAAe;EACb,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,YAAY;EACV,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,YAAY;EACV,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,YAAY;EACV,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,YAAY;EACV,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF;AAMA,MAAM,QAAQ;CACZ,SAAS;EACP,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,OAAO;CACT;AACF;AAcA,SAAS,KAAK,EACZ,QACA,OAAO,WACP,UAAU,cACV,GAAG,WACS;CAMZ,OAAO,UAAU;EACf,gBAAgB;EAChB,OAAO;GACL,GAAG;GACH,GAAG,MAAa,OAAO,MAAM,OAAO,UAAU,MAAM,KAAK;EAC3D;EACA;CACF,CAAC;AACH"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/text/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, typography } from '../../tokens/design.tokens.stylex';\n\n// One key per style in the 15-entry type scale, named exactly as the token\n// group names it, so `styles[variant]` indexes straight off the prop with no\n// lookup table to keep in sync. Every style sets all five fields the scale\n// defines rather than inheriting any of them: a Text nested inside another\n// Text would otherwise pick up the outer line-height or tracking, which is\n// the kind of drift the scale exists to prevent.\n//\n// `margin: 0` is the one UA reset here. Text renders a <span> by default, but\n// `render` is how a consumer reaches for semantic markup — `<Text\n// render={<h2 />}>` — and an h2's UA margin would then vary the spacing\n// around otherwise identical type.\nconst styles = {\n  base: {\n    kB7OPa: \"x9f619\",\n    kogj98: \"x1ghz6dp\",\n    $$css: true\n  },\n  bodyLarge: {\n    kMv6JI: \"x16svsjw\",\n    kGuDYH: \"x1848etk\",\n    k63SB2: \"x1c52epr\",\n    kb6lSQ: \"x1qn8t5l\",\n    kLWn49: \"xh7dzej\",\n    $$css: true\n  },\n  bodyMedium: {\n    kMv6JI: \"xpo2rfv\",\n    kGuDYH: \"x193rfdd\",\n    k63SB2: \"x1hews6w\",\n    kb6lSQ: \"xn43zvd\",\n    kLWn49: \"xv61bfh\",\n    $$css: true\n  },\n  bodySmall: {\n    kMv6JI: \"x1yicsit\",\n    kGuDYH: \"x1b35g6e\",\n    k63SB2: \"x9d6959\",\n    kb6lSQ: \"xwth0xh\",\n    kLWn49: \"xybisxh\",\n    $$css: true\n  },\n  displayLarge: {\n    kMv6JI: \"xjaampf\",\n    kGuDYH: \"xuyiek4\",\n    k63SB2: \"x1n2oj23\",\n    kb6lSQ: \"x1hxa6v5\",\n    kLWn49: \"x1iwmiir\",\n    $$css: true\n  },\n  displayMedium: {\n    kMv6JI: \"x1gi70vc\",\n    kGuDYH: \"xlzzeuu\",\n    k63SB2: \"xh9quta\",\n    kb6lSQ: \"x148mp24\",\n    kLWn49: \"xs5hucj\",\n    $$css: true\n  },\n  displaySmall: {\n    kMv6JI: \"x1eslvzl\",\n    kGuDYH: \"x1g52wnc\",\n    k63SB2: \"x1x664hp\",\n    kb6lSQ: \"x1rnjaw4\",\n    kLWn49: \"x92ldg4\",\n    $$css: true\n  },\n  headlineLarge: {\n    kMv6JI: \"x1vsmgmf\",\n    kGuDYH: \"xh9c4x\",\n    k63SB2: \"x1y15vu6\",\n    kb6lSQ: \"xoqu3bc\",\n    kLWn49: \"x10x9d6x\",\n    $$css: true\n  },\n  headlineMedium: {\n    kMv6JI: \"x18s19nt\",\n    kGuDYH: \"xcohea8\",\n    k63SB2: \"x1mtpwof\",\n    kb6lSQ: \"x1kuyk5j\",\n    kLWn49: \"xucx483\",\n    $$css: true\n  },\n  headlineSmall: {\n    kMv6JI: \"x1fz0g89\",\n    kGuDYH: \"xkb6epg\",\n    k63SB2: \"x76yrz5\",\n    kb6lSQ: \"x1s1qhaa\",\n    kLWn49: \"x1voeury\",\n    $$css: true\n  },\n  labelLarge: {\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    $$css: true\n  },\n  labelMedium: {\n    kMv6JI: \"xp6n8n2\",\n    kGuDYH: \"xkucv67\",\n    k63SB2: \"x14hhc5u\",\n    kb6lSQ: \"x12utw95\",\n    kLWn49: \"xvzb9hk\",\n    $$css: true\n  },\n  labelSmall: {\n    kMv6JI: \"xs1w0rn\",\n    kGuDYH: \"x1n35her\",\n    k63SB2: \"x1su64ma\",\n    kb6lSQ: \"xdlnduh\",\n    kLWn49: \"xaomhve\",\n    $$css: true\n  },\n  titleLarge: {\n    kMv6JI: \"xdy5w5q\",\n    kGuDYH: \"xete2z3\",\n    k63SB2: \"x14ijtet\",\n    kb6lSQ: \"xug9e1u\",\n    kLWn49: \"x2divse\",\n    $$css: true\n  },\n  titleMedium: {\n    kMv6JI: \"x46eyla\",\n    kGuDYH: \"x5ehqhr\",\n    k63SB2: \"xrf6cl6\",\n    kb6lSQ: \"x1g135zh\",\n    kLWn49: \"x1ggk5va\",\n    $$css: true\n  },\n  titleSmall: {\n    kMv6JI: \"xrgwony\",\n    kGuDYH: \"x12s497w\",\n    k63SB2: \"x1szcwkt\",\n    kb6lSQ: \"xo803ec\",\n    kLWn49: \"xyl1r0q\",\n    $$css: true\n  }\n};\n\n// Tone is a separate axis from variant so the two compose freely — any of the\n// 15 scale styles in any of these colors. Kept to the roles text actually\n// takes on a surface; a consumer needing something outside this set uses\n// `inherit` and colors the parent, rather than this growing a case per role.\nconst tones = {\n  default: {\n    kMwMTN: \"x139gbkf\",\n    $$css: true\n  },\n  error: {\n    kMwMTN: \"x4ii1qj\",\n    $$css: true\n  },\n  inherit: {\n    kMwMTN: \"x1heor9g\",\n    $$css: true\n  },\n  muted: {\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  },\n  negative: {\n    kMwMTN: \"x12gp0t\",\n    $$css: true\n  },\n  positive: {\n    kMwMTN: \"x4no3js\",\n    $$css: true\n  },\n  primary: {\n    kMwMTN: \"x1mxwv8y\",\n    $$css: true\n  }\n};\ntype TextProps = useRender.ComponentProps<'span'> & {\n  /**\n   * The color role to render in. `inherit` takes the color of the nearest\n   * colored ancestor instead of setting one.\n   * @default 'default'\n   */\n  tone?: 'default' | 'error' | 'inherit' | 'muted' | 'negative' | 'positive' | 'primary';\n  /**\n   * Which style of the type scale to render.\n   * @default 'bodyMedium'\n   */\n  variant?: 'bodyLarge' | 'bodyMedium' | 'bodySmall' | 'displayLarge' | 'displayMedium' | 'displaySmall' | 'headlineLarge' | 'headlineMedium' | 'headlineSmall' | 'labelLarge' | 'labelMedium' | 'labelSmall' | 'titleLarge' | 'titleMedium' | 'titleSmall';\n};\nfunction Text({\n  render,\n  tone = 'default',\n  variant = 'bodyMedium',\n  ...props\n}: TextProps) {\n  return useRender({\n    defaultTagName: 'span',\n    props: {\n      ...props,\n      ...mergeStyles(stylex.props(styles.base, styles[variant], tones[tone]), props)\n    },\n    render\n  });\n}\nexport type { TextProps };\nexport default Text;"],"mappings":";;;;AAiBA,MAAM,SAAS;CACb,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,YAAY;EACV,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,cAAc;EACZ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,eAAe;EACb,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,cAAc;EACZ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,eAAe;EACb,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,gBAAgB;EACd,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,eAAe;EACb,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,YAAY;EACV,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,YAAY;EACV,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,YAAY;EACV,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,YAAY;EACV,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF;AAMA,MAAM,QAAQ;CACZ,SAAS;EACP,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,OAAO;CACT;AACF;AAcA,SAAS,KAAK,EACZ,QACA,OAAO,WACP,UAAU,cACV,GAAG,WACS;CACZ,OAAO,UAAU;EACf,gBAAgB;EAChB,OAAO;GACL,GAAG;GACH,GAAG,YAAY,MAAa,OAAO,MAAM,OAAO,UAAU,MAAM,KAAK,GAAG,OAAK;EAC/E;EACA;CACF,CAAC;AACH"}

package/dist/components/text-field/index.js

@@ -1,3 +1,4 @@
+import { mergeStatefulStyles } from "../../styles/merge.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback } from "react";
 import { Field } from "@base-ui/react/field";
@@ -17,25 +18,25 @@ function TextField({ description, disabled = false, error, label, numeric = fals
 	return /* @__PURE__ */ jsxs(Field.Root, {
 		disabled,
 		invalid,
-		className: "x78zum5 xdt5ytf",
+		className: "x9f619 x78zum5 xdt5ytf",
 		children: [/* @__PURE__ */ jsxs("div", {
 			...{
-				0: { className: "x1rrhr5q xnnlda6 x16uus16 xbiv7yw xirz1nw xzcck0f x89kqus x18rfq6m x18d9i69 xi7mcox x790zyz x1n2onr6 x1qno0dh xkdsq27 xpc4ca7" },
-				2: { className: "x1rrhr5q xnnlda6 x16uus16 xbiv7yw xirz1nw xzcck0f x18d9i69 xi7mcox x790zyz x1n2onr6 x1qno0dh xkdsq27 xpc4ca7 x1lxxh4i x1d6xoej" },
-				1: { className: "xnnlda6 x16uus16 xbiv7yw xirz1nw xzcck0f x18d9i69 xi7mcox x790zyz x1n2onr6 x1qno0dh xkdsq27 xpc4ca7 xepofeg x1pqbjc1" },
-				3: { className: "xnnlda6 x16uus16 xbiv7yw xirz1nw xzcck0f x18d9i69 xi7mcox x790zyz x1n2onr6 x1qno0dh xkdsq27 xpc4ca7 xepofeg x1pqbjc1" }
+				0: { className: "x1rrhr5q xnnlda6 x16uus16 xbiv7yw xirz1nw xzcck0f x89kqus x18rfq6m x9f619 x18d9i69 xi7mcox x790zyz x1n2onr6 x1qno0dh xkdsq27 xpc4ca7" },
+				2: { className: "x1rrhr5q xnnlda6 x16uus16 xbiv7yw xirz1nw xzcck0f x9f619 x18d9i69 xi7mcox x790zyz x1n2onr6 x1qno0dh xkdsq27 xpc4ca7 x1lxxh4i x1d6xoej" },
+				1: { className: "xnnlda6 x16uus16 xbiv7yw xirz1nw xzcck0f x9f619 x18d9i69 xi7mcox x790zyz x1n2onr6 x1qno0dh xkdsq27 xpc4ca7 xepofeg x1pqbjc1" },
+				3: { className: "xnnlda6 x16uus16 xbiv7yw xirz1nw xzcck0f x9f619 x18d9i69 xi7mcox x790zyz x1n2onr6 x1qno0dh xkdsq27 xpc4ca7 xepofeg x1pqbjc1" }
 			}[!!invalid << 1 | !!disabled << 0],
 			children: [/* @__PURE__ */ jsx(Field.Label, {
 				className: labelClassName,
 				children: label
 			}), /* @__PURE__ */ jsx(Field.Control, {
 				...props,
-				...{
-					0: { className: "xjbqb8w xc342km x139gbkf x16svsjw x1848etk x1c52epr xh8yej3 x1qn8t5l xh7dzej x1hmvnq2 x1t137rt x1717udv" },
-					2: { className: "xjbqb8w xc342km x139gbkf x1848etk x1c52epr xh8yej3 x1qn8t5l xh7dzej x1hmvnq2 x1t137rt x1717udv xbppi91 xss6m8b" },
-					1: { className: "xjbqb8w xc342km x16svsjw x1848etk x1c52epr xh8yej3 x1qn8t5l xh7dzej x1hmvnq2 x1t137rt x1717udv x1xj74d8" },
-					3: { className: "xjbqb8w xc342km x1848etk x1c52epr xh8yej3 x1qn8t5l xh7dzej x1hmvnq2 x1t137rt x1717udv xbppi91 xss6m8b x1xj74d8" }
-				}[!!numeric << 1 | !!disabled << 0]
+				...mergeStatefulStyles({
+					0: { className: "xjbqb8w xc342km x9f619 x139gbkf x16svsjw x1848etk x1c52epr xh8yej3 x1qn8t5l xh7dzej x1hmvnq2 x1t137rt x1717udv" },
+					2: { className: "xjbqb8w xc342km x9f619 x139gbkf x1848etk x1c52epr xh8yej3 x1qn8t5l xh7dzej x1hmvnq2 x1t137rt x1717udv xbppi91 xss6m8b" },
+					1: { className: "xjbqb8w xc342km x9f619 x16svsjw x1848etk x1c52epr xh8yej3 x1qn8t5l xh7dzej x1hmvnq2 x1t137rt x1717udv x1xj74d8" },
+					3: { className: "xjbqb8w xc342km x9f619 x1848etk x1c52epr xh8yej3 x1qn8t5l xh7dzej x1hmvnq2 x1t137rt x1717udv xbppi91 xss6m8b x1xj74d8" }
+				}[!!numeric << 1 | !!disabled << 0], props)
 			})]
 		}), invalid ? /* @__PURE__ */ jsx(Field.Error, {
 			match: true,

package/dist/components/text-field/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/text-field/index.tsx"],"sourcesContent":["import type { FieldControlProps as BaseUIFieldControlProps, FieldLabelState as BaseUIFieldLabelState } from '@base-ui/react/field';\nimport { Field as BaseUIField } from '@base-ui/react/field';\nimport * as stylex from '@stylexjs/stylex';\nimport { useCallback } from 'react';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\n\n// The focus indicator is an inset box-shadow on the bottom edge rather than a\n// border that thickens. A real border going 1px -> 2px on focus grows the\n// box, which pushes every sibling below it down by a pixel — so a form\n// twitches each time focus moves between its fields. A shadow is drawn inside\n// the box and changes nothing about its size.\n//\n// The label sits at a fixed size at the top rather than floating up out of\n// the input on focus: the design draws it small and in place at all times, so\n// there is no transition between two positions to get right.\n\ntype TextFieldProps = {\n  /**\n   * A hint shown under the field. Replaced by `error` when there is one, so\n   * the two never stack.\n   */\n  description?: string;\n  /**\n   * The problem with the current value, in words. Its presence is what puts\n   * the field in its error state — the message, the red underline, and\n   * `aria-invalid` all follow from it.\n   */\n  error?: string;\n  /**\n   * What the field is for. Required rather than optional: a text field with\n   * no label is a box a screen reader cannot name.\n   */\n  label: string;\n  /**\n   * Renders the value in the mono face with tabular figures, for amounts and\n   * other numbers meant to be compared down a column.\n   * @default false\n   */\n  numeric?: boolean;\n} & Omit<BaseUIFieldControlProps, 'render'>;\nfunction TextField({\n  description,\n  disabled = false,\n  error,\n  label,\n  numeric = false,\n  ...props\n}: TextFieldProps) {\n  const invalid = error !== undefined;\n\n  // The label's colour follows the field's focus, which is a state only Base\n  // UI knows — StyleX cannot express `.box:focus-within .label`, because the\n  // label is the input's sibling rather than its ancestor. useCallback keeps\n  // it one reference between renders, which is what react-perf is after.\n  const labelClassName = useCallback((state: BaseUIFieldLabelState) => ({\n    0: {\n      className: \"x1w5n3ug xp6n8n2 xkucv67 x14hhc5u x1we8soy x19v39ok x12utw95 xvzb9hk x10l6tqk x1qno0dh xt3l3uh xpc4ca7\"\n    },\n    4: {\n      className: \"xp6n8n2 xkucv67 x14hhc5u x1we8soy x19v39ok x12utw95 xvzb9hk x10l6tqk x1qno0dh xt3l3uh xpc4ca7 x1xj74d8\"\n    },\n    2: {\n      className: \"xp6n8n2 xkucv67 x14hhc5u x1we8soy x19v39ok x12utw95 xvzb9hk x10l6tqk x1qno0dh xt3l3uh xpc4ca7 x4ii1qj\"\n    },\n    6: {\n      className: \"xp6n8n2 xkucv67 x14hhc5u x1we8soy x19v39ok x12utw95 xvzb9hk x10l6tqk x1qno0dh xt3l3uh xpc4ca7 x4ii1qj\"\n    },\n    1: {\n      className: \"xp6n8n2 xkucv67 x14hhc5u x1we8soy x19v39ok x12utw95 xvzb9hk x10l6tqk x1qno0dh xt3l3uh xpc4ca7 x1mxwv8y\"\n    },\n    5: {\n      className: \"xp6n8n2 xkucv67 x14hhc5u x1we8soy x19v39ok x12utw95 xvzb9hk x10l6tqk x1qno0dh xt3l3uh xpc4ca7 x1mxwv8y\"\n    },\n    3: {\n      className: \"xp6n8n2 xkucv67 x14hhc5u x1we8soy x19v39ok x12utw95 xvzb9hk x10l6tqk x1qno0dh xt3l3uh xpc4ca7 x1mxwv8y\"\n    },\n    7: {\n      className: \"xp6n8n2 xkucv67 x14hhc5u x1we8soy x19v39ok x12utw95 xvzb9hk x10l6tqk x1qno0dh xt3l3uh xpc4ca7 x1mxwv8y\"\n    }\n  })[!!disabled << 2 | !!invalid << 1 | !!(!disabled && !invalid && state.focused) << 0].className, [disabled, invalid]);\n  return <BaseUIField.Root disabled={disabled} invalid={invalid} className=\"x78zum5 xdt5ytf\">\n      <div {...{\n      0: {\n        className: \"x1rrhr5q xnnlda6 x16uus16 xbiv7yw xirz1nw xzcck0f x89kqus x18rfq6m x18d9i69 xi7mcox x790zyz x1n2onr6 x1qno0dh xkdsq27 xpc4ca7\"\n      },\n      2: {\n        className: \"x1rrhr5q xnnlda6 x16uus16 xbiv7yw xirz1nw xzcck0f x18d9i69 xi7mcox x790zyz x1n2onr6 x1qno0dh xkdsq27 xpc4ca7 x1lxxh4i x1d6xoej\"\n      },\n      1: {\n        className: \"xnnlda6 x16uus16 xbiv7yw xirz1nw xzcck0f x18d9i69 xi7mcox x790zyz x1n2onr6 x1qno0dh xkdsq27 xpc4ca7 xepofeg x1pqbjc1\"\n      },\n      3: {\n        className: \"xnnlda6 x16uus16 xbiv7yw xirz1nw xzcck0f x18d9i69 xi7mcox x790zyz x1n2onr6 x1qno0dh xkdsq27 xpc4ca7 xepofeg x1pqbjc1\"\n      }\n    }[!!invalid << 1 | !!disabled << 0]}>\n        <BaseUIField.Label className={labelClassName}>\n          {label}\n        </BaseUIField.Label>\n        <BaseUIField.Control {...props} {...{\n        0: {\n          className: \"xjbqb8w xc342km x139gbkf x16svsjw x1848etk x1c52epr xh8yej3 x1qn8t5l xh7dzej x1hmvnq2 x1t137rt x1717udv\"\n        },\n        2: {\n          className: \"xjbqb8w xc342km x139gbkf x1848etk x1c52epr xh8yej3 x1qn8t5l xh7dzej x1hmvnq2 x1t137rt x1717udv xbppi91 xss6m8b\"\n        },\n        1: {\n          className: \"xjbqb8w xc342km x16svsjw x1848etk x1c52epr xh8yej3 x1qn8t5l xh7dzej x1hmvnq2 x1t137rt x1717udv x1xj74d8\"\n        },\n        3: {\n          className: \"xjbqb8w xc342km x1848etk x1c52epr xh8yej3 x1qn8t5l xh7dzej x1hmvnq2 x1t137rt x1717udv xbppi91 xss6m8b x1xj74d8\"\n        }\n      }[!!numeric << 1 | !!disabled << 0]} />\n      </div>\n      {invalid ? <BaseUIField.Error match className=\"x1yicsit x1b35g6e x9d6959 xwth0xh xybisxh x10im51j x1y88zpp xboopgi x4ii1qj\">\n          {error}\n        </BaseUIField.Error> : description === undefined ? null : <BaseUIField.Description className=\"x1w5n3ug x1yicsit x1b35g6e x9d6959 xwth0xh xybisxh x10im51j x1y88zpp xboopgi\">\n          {description}\n        </BaseUIField.Description>}\n    </BaseUIField.Root>;\n}\nexport type { TextFieldProps };\nexport default TextField;"],"mappings":";;;;AAyCA,SAAS,UAAU,EACjB,aACA,WAAW,OACX,OACA,OACA,UAAU,OACV,GAAG,SACc;CACjB,MAAM,UAAU,UAAU,KAAA;CAM1B,MAAM,iBAAiB,aAAa,WAAkC;EACpE,GAAG,EACD,WAAW,yGACb;EACA,GAAG,EACD,WAAW,yGACb;EACA,GAAG,EACD,WAAW,wGACb;EACA,GAAG,EACD,WAAW,wGACb;EACA,GAAG,EACD,WAAW,yGACb;EACA,GAAG,EACD,WAAW,yGACb;EACA,GAAG,EACD,WAAW,yGACb;EACA,GAAG,EACD,WAAW,yGACb;CACF,EAAA,CAAG,CAAC,CAAC,YAAY,IAAI,CAAC,CAAC,WAAW,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,WAAW,MAAM,YAAY,EAAE,CAAC,WAAW,CAAC,UAAU,OAAO,CAAC;CACrH,OAAO,qBAAC,MAAY,MAAb;EAA4B;EAAmB;EAAS,WAAU;EAAlE,UAAA,CACH,qBAAC,OAAD;GAAK,GAAI;IACT,GAAG,EACD,WAAW,gIACb;IACA,GAAG,EACD,WAAW,iIACb;IACA,GAAG,EACD,WAAW,uHACb;IACA,GAAG,EACD,WAAW,uHACb;GACF,EAAE,CAAC,CAAC,WAAW,IAAI,CAAC,CAAC,YAAY;GAb/B,UAAA,CAcE,oBAAC,MAAY,OAAb;IAAmB,WAAW;IAC3B,UAAA;GACgB,CAAA,GACnB,oBAAC,MAAY,SAAb;IAAqB,GAAI;IAAO,GAAI;KACpC,GAAG,EACD,WAAW,0GACb;KACA,GAAG,EACD,WAAW,iHACb;KACA,GAAG,EACD,WAAW,0GACb;KACA,GAAG,EACD,WAAW,iHACb;IACF,EAAE,CAAC,CAAC,WAAW,IAAI,CAAC,CAAC,YAAY;GAAG,CAAA,CAC/B;EACJ,CAAA,GAAA,UAAU,oBAAC,MAAY,OAAb;GAAmB,OAAA;GAAM,WAAU;GACzC,UAAA;EACgB,CAAA,IAAI,gBAAgB,KAAA,IAAY,OAAO,oBAAC,MAAY,aAAb;GAAyB,WAAU;GAC1F,UAAA;EACsB,CAAA,CACX;;AACtB"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/text-field/index.tsx"],"sourcesContent":["import type { FieldControlProps as BaseUIFieldControlProps, FieldLabelState as BaseUIFieldLabelState } from '@base-ui/react/field';\nimport { Field as BaseUIField } from '@base-ui/react/field';\nimport * as stylex from '@stylexjs/stylex';\nimport { useCallback } from 'react';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\n\n// The focus indicator is an inset box-shadow on the bottom edge rather than a\n// border that thickens. A real border going 1px -> 2px on focus grows the\n// box, which pushes every sibling below it down by a pixel — so a form\n// twitches each time focus moves between its fields. A shadow is drawn inside\n// the box and changes nothing about its size.\n//\n// The label sits at a fixed size at the top rather than floating up out of\n// the input on focus: the design draws it small and in place at all times, so\n// there is no transition between two positions to get right.\n\ntype TextFieldProps = {\n  /**\n   * A hint shown under the field. Replaced by `error` when there is one, so\n   * the two never stack.\n   */\n  description?: string;\n  /**\n   * The problem with the current value, in words. Its presence is what puts\n   * the field in its error state — the message, the red underline, and\n   * `aria-invalid` all follow from it.\n   */\n  error?: string;\n  /**\n   * What the field is for. Required rather than optional: a text field with\n   * no label is a box a screen reader cannot name.\n   */\n  label: string;\n  /**\n   * Renders the value in the mono face with tabular figures, for amounts and\n   * other numbers meant to be compared down a column.\n   * @default false\n   */\n  numeric?: boolean;\n} & Omit<BaseUIFieldControlProps, 'render'>;\nfunction TextField({\n  description,\n  disabled = false,\n  error,\n  label,\n  numeric = false,\n  ...props\n}: TextFieldProps) {\n  const invalid = error !== undefined;\n\n  // The label's colour follows the field's focus, which is a state only Base\n  // UI knows — StyleX cannot express `.box:focus-within .label`, because the\n  // label is the input's sibling rather than its ancestor. useCallback keeps\n  // it one reference between renders, which is what react-perf is after.\n  const labelClassName = useCallback((state: BaseUIFieldLabelState) => ({\n    0: {\n      className: \"x1w5n3ug xp6n8n2 xkucv67 x14hhc5u x1we8soy x19v39ok x12utw95 xvzb9hk x10l6tqk x1qno0dh xt3l3uh xpc4ca7\"\n    },\n    4: {\n      className: \"xp6n8n2 xkucv67 x14hhc5u x1we8soy x19v39ok x12utw95 xvzb9hk x10l6tqk x1qno0dh xt3l3uh xpc4ca7 x1xj74d8\"\n    },\n    2: {\n      className: \"xp6n8n2 xkucv67 x14hhc5u x1we8soy x19v39ok x12utw95 xvzb9hk x10l6tqk x1qno0dh xt3l3uh xpc4ca7 x4ii1qj\"\n    },\n    6: {\n      className: \"xp6n8n2 xkucv67 x14hhc5u x1we8soy x19v39ok x12utw95 xvzb9hk x10l6tqk x1qno0dh xt3l3uh xpc4ca7 x4ii1qj\"\n    },\n    1: {\n      className: \"xp6n8n2 xkucv67 x14hhc5u x1we8soy x19v39ok x12utw95 xvzb9hk x10l6tqk x1qno0dh xt3l3uh xpc4ca7 x1mxwv8y\"\n    },\n    5: {\n      className: \"xp6n8n2 xkucv67 x14hhc5u x1we8soy x19v39ok x12utw95 xvzb9hk x10l6tqk x1qno0dh xt3l3uh xpc4ca7 x1mxwv8y\"\n    },\n    3: {\n      className: \"xp6n8n2 xkucv67 x14hhc5u x1we8soy x19v39ok x12utw95 xvzb9hk x10l6tqk x1qno0dh xt3l3uh xpc4ca7 x1mxwv8y\"\n    },\n    7: {\n      className: \"xp6n8n2 xkucv67 x14hhc5u x1we8soy x19v39ok x12utw95 xvzb9hk x10l6tqk x1qno0dh xt3l3uh xpc4ca7 x1mxwv8y\"\n    }\n  })[!!disabled << 2 | !!invalid << 1 | !!(!disabled && !invalid && state.focused) << 0].className, [disabled, invalid]);\n  return <BaseUIField.Root disabled={disabled} invalid={invalid} className=\"x9f619 x78zum5 xdt5ytf\">\n      <div {...{\n      0: {\n        className: \"x1rrhr5q xnnlda6 x16uus16 xbiv7yw xirz1nw xzcck0f x89kqus x18rfq6m x9f619 x18d9i69 xi7mcox x790zyz x1n2onr6 x1qno0dh xkdsq27 xpc4ca7\"\n      },\n      2: {\n        className: \"x1rrhr5q xnnlda6 x16uus16 xbiv7yw xirz1nw xzcck0f x9f619 x18d9i69 xi7mcox x790zyz x1n2onr6 x1qno0dh xkdsq27 xpc4ca7 x1lxxh4i x1d6xoej\"\n      },\n      1: {\n        className: \"xnnlda6 x16uus16 xbiv7yw xirz1nw xzcck0f x9f619 x18d9i69 xi7mcox x790zyz x1n2onr6 x1qno0dh xkdsq27 xpc4ca7 xepofeg x1pqbjc1\"\n      },\n      3: {\n        className: \"xnnlda6 x16uus16 xbiv7yw xirz1nw xzcck0f x9f619 x18d9i69 xi7mcox x790zyz x1n2onr6 x1qno0dh xkdsq27 xpc4ca7 xepofeg x1pqbjc1\"\n      }\n    }[!!invalid << 1 | !!disabled << 0]}>\n        <BaseUIField.Label className={labelClassName}>\n          {label}\n        </BaseUIField.Label>\n        {/* `props` is the control's, which is what TextFieldProps extends,\n            so a className or style from the call site lands on the <input>\n            rather than on the wrapper around it. */}\n        <BaseUIField.Control {...props} {...mergeStatefulStyles({\n        0: {\n          className: \"xjbqb8w xc342km x9f619 x139gbkf x16svsjw x1848etk x1c52epr xh8yej3 x1qn8t5l xh7dzej x1hmvnq2 x1t137rt x1717udv\"\n        },\n        2: {\n          className: \"xjbqb8w xc342km x9f619 x139gbkf x1848etk x1c52epr xh8yej3 x1qn8t5l xh7dzej x1hmvnq2 x1t137rt x1717udv xbppi91 xss6m8b\"\n        },\n        1: {\n          className: \"xjbqb8w xc342km x9f619 x16svsjw x1848etk x1c52epr xh8yej3 x1qn8t5l xh7dzej x1hmvnq2 x1t137rt x1717udv x1xj74d8\"\n        },\n        3: {\n          className: \"xjbqb8w xc342km x9f619 x1848etk x1c52epr xh8yej3 x1qn8t5l xh7dzej x1hmvnq2 x1t137rt x1717udv xbppi91 xss6m8b x1xj74d8\"\n        }\n      }[!!numeric << 1 | !!disabled << 0], props)} />\n      </div>\n      {invalid ? <BaseUIField.Error match className=\"x1yicsit x1b35g6e x9d6959 xwth0xh xybisxh x10im51j x1y88zpp xboopgi x4ii1qj\">\n          {error}\n        </BaseUIField.Error> : description === undefined ? null : <BaseUIField.Description className=\"x1w5n3ug x1yicsit x1b35g6e x9d6959 xwth0xh xybisxh x10im51j x1y88zpp xboopgi\">\n          {description}\n        </BaseUIField.Description>}\n    </BaseUIField.Root>;\n}\nexport type { TextFieldProps };\nexport default TextField;"],"mappings":";;;;;AA0CA,SAAS,UAAU,EACjB,aACA,WAAW,OACX,OACA,OACA,UAAU,OACV,GAAG,SACc;CACjB,MAAM,UAAU,UAAU,KAAA;CAM1B,MAAM,iBAAiB,aAAa,WAAkC;EACpE,GAAG,EACD,WAAW,yGACb;EACA,GAAG,EACD,WAAW,yGACb;EACA,GAAG,EACD,WAAW,wGACb;EACA,GAAG,EACD,WAAW,wGACb;EACA,GAAG,EACD,WAAW,yGACb;EACA,GAAG,EACD,WAAW,yGACb;EACA,GAAG,EACD,WAAW,yGACb;EACA,GAAG,EACD,WAAW,yGACb;CACF,EAAA,CAAG,CAAC,CAAC,YAAY,IAAI,CAAC,CAAC,WAAW,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,WAAW,MAAM,YAAY,EAAE,CAAC,WAAW,CAAC,UAAU,OAAO,CAAC;CACrH,OAAO,qBAAC,MAAY,MAAb;EAA4B;EAAmB;EAAS,WAAU;EAAlE,UAAA,CACH,qBAAC,OAAD;GAAK,GAAI;IACT,GAAG,EACD,WAAW,uIACb;IACA,GAAG,EACD,WAAW,wIACb;IACA,GAAG,EACD,WAAW,8HACb;IACA,GAAG,EACD,WAAW,8HACb;GACF,EAAE,CAAC,CAAC,WAAW,IAAI,CAAC,CAAC,YAAY;GAb/B,UAAA,CAcE,oBAAC,MAAY,OAAb;IAAmB,WAAW;IAC3B,UAAA;GACgB,CAAA,GAInB,oBAAC,MAAY,SAAb;IAAqB,GAAI;IAAO,GAAI,oBAAoB;KACxD,GAAG,EACD,WAAW,iHACb;KACA,GAAG,EACD,WAAW,wHACb;KACA,GAAG,EACD,WAAW,iHACb;KACA,GAAG,EACD,WAAW,wHACb;IACF,EAAE,CAAC,CAAC,WAAW,IAAI,CAAC,CAAC,YAAY,IAAI,KAAK;GAAE,CAAA,CACvC;EACJ,CAAA,GAAA,UAAU,oBAAC,MAAY,OAAb;GAAmB,OAAA;GAAM,WAAU;GACzC,UAAA;EACgB,CAAA,IAAI,gBAAgB,KAAA,IAAY,OAAO,oBAAC,MAAY,aAAb;GAAyB,WAAU;GAC1F,UAAA;EACsB,CAAA,CACX;;AACtB"}

package/dist/index.d.ts

@@ -5,6 +5,7 @@ import Button, { ButtonProps } from "./components/button/index.js";
 import Card, { CardProps } from "./components/card/index.js";
 import Chip, { ChipProps } from "./components/chip/index.js";
 import Code, { CodeProps } from "./components/code/index.js";
+import Container, { ContainerProps } from "./components/container/index.js";
 import CopyField, { CopyFieldProps } from "./components/copy-field/index.js";
 import Currency, { CurrencyProps } from "./components/currency/index.js";
 import Feed, { FeedProps } from "./components/feed/index.js";
@@ -16,9 +17,11 @@ import ListItem, { ListItemProps } from "./components/list-item/index.js";
 import ProductIcon, { ProductIconProps } from "./components/product-icon/index.js";
 import Separator, { SeparatorProps } from "./components/separator/index.js";
 import Sheet, { SheetProps } from "./components/sheet/index.js";
+import Stack, { StackAlign, StackGap, StackJustify, StackProps } from "./components/stack/index.js";
 import SupportingPane, { SupportingPaneProps } from "./components/supporting-pane/index.js";
 import Tabs, { TabsProps } from "./components/tabs/index.js";
 import Text, { TextProps } from "./components/text/index.js";
 import TextField, { TextFieldProps } from "./components/text-field/index.js";
 import "./components/index.js";
-export { AppBar, type AppBarProps, Avatar, type AvatarProps, Badge, type BadgeProps, Button, type ButtonProps, Card, type CardProps, Chip, type ChipProps, Code, type CodeProps, CopyField, type CopyFieldProps, Currency, type CurrencyProps, Feed, type FeedProps, IconButton, type IconButtonProps, Keycap, type KeycapProps, Link, type LinkProps, ListDetail, type ListDetailProps, ListItem, type ListItemProps, ProductIcon, type ProductIconProps, Separator, type SeparatorProps, Sheet, type SheetProps, SupportingPane, type SupportingPaneProps, Tabs, type TabsProps, Text, TextField, type TextFieldProps, type TextProps };
+import "./styles.css";
+export { AppBar, type AppBarProps, Avatar, type AvatarProps, Badge, type BadgeProps, Button, type ButtonProps, Card, type CardProps, Chip, type ChipProps, Code, type CodeProps, Container, type ContainerProps, CopyField, type CopyFieldProps, Currency, type CurrencyProps, Feed, type FeedProps, IconButton, type IconButtonProps, Keycap, type KeycapProps, Link, type LinkProps, ListDetail, type ListDetailProps, ListItem, type ListItemProps, ProductIcon, type ProductIconProps, Separator, type SeparatorProps, Sheet, type SheetProps, Stack, type StackAlign, type StackGap, type StackJustify, type StackProps, SupportingPane, type SupportingPaneProps, Tabs, type TabsProps, Text, TextField, type TextFieldProps, type TextProps };