@kanso-labs/kanso-ui 0.26.2 → 0.26.4

package/dist/components/color-wheel/index.js

@@ -1,6 +1,7 @@
 import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { mergeStyles } from "../../styles/merge.js";
 import { thumbClassName } from "../../styles/color.js";
+import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ColorThumb, ColorWheel, ColorWheelTrack } from "react-aria-components";
 //#region src/components/color-wheel/index.tsx
@@ -41,22 +42,85 @@ const styles = {
 * The call site's `className` and `style` land on the wheel, which is the
 * element a layout positions. Its size comes from `outerRadius`.
 */
-function ColorWheel$1({ className, isDisabled = false, outerRadius = DEFAULT_OUTER_RADIUS, style, thickness = DEFAULT_THICKNESS, ...props$1 }) {
-	const innerRadius = Math.max(0, outerRadius - thickness);
-	return /* @__PURE__ */ jsxs(ColorWheel, {
-		innerRadius,
-		isDisabled,
-		outerRadius,
-		...props$1,
-		...mergeStyles({
+function ColorWheel$1(t0) {
+	const $ = c(24);
+	let className;
+	let props$1;
+	let style;
+	let t1;
+	let t2;
+	let t3;
+	if ($[0] !== t0) {
+		({className, isDisabled: t1, outerRadius: t2, style, thickness: t3, ...props$1} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props$1;
+		$[3] = style;
+		$[4] = t1;
+		$[5] = t2;
+		$[6] = t3;
+	} else {
+		className = $[1];
+		props$1 = $[2];
+		style = $[3];
+		t1 = $[4];
+		t2 = $[5];
+		t3 = $[6];
+	}
+	const isDisabled = t1 === void 0 ? false : t1;
+	const outerRadius = t2 === void 0 ? DEFAULT_OUTER_RADIUS : t2;
+	const innerRadius = Math.max(0, outerRadius - (t3 === void 0 ? DEFAULT_THICKNESS : t3));
+	let t4;
+	if ($[7] !== className || $[8] !== isDisabled || $[9] !== style) {
+		t4 = mergeStyles({
 			0: { className: "x9f619 x1rg5ohu x14ju556" },
 			1: { className: "x9f619 x1rg5ohu x14ju556 x1ppv7y9" }
 		}[!!isDisabled << 0], {
 			className,
 			style
-		}),
-		children: [/* @__PURE__ */ jsx(ColorWheelTrack, { ...props(styles.track, styles.trackRing(innerRadius), isDisabled && styles.trackDisabled) }), /* @__PURE__ */ jsx(ColorThumb, { className: thumbClassName })]
-	});
+		});
+		$[7] = className;
+		$[8] = isDisabled;
+		$[9] = style;
+		$[10] = t4;
+	} else t4 = $[10];
+	let t5;
+	if ($[11] !== innerRadius || $[12] !== isDisabled) {
+		t5 = props(styles.track, styles.trackRing(innerRadius), isDisabled && styles.trackDisabled);
+		$[11] = innerRadius;
+		$[12] = isDisabled;
+		$[13] = t5;
+	} else t5 = $[13];
+	let t6;
+	if ($[14] !== t5) {
+		t6 = /* @__PURE__ */ jsx(ColorWheelTrack, { ...t5 });
+		$[14] = t5;
+		$[15] = t6;
+	} else t6 = $[15];
+	let t7;
+	if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = /* @__PURE__ */ jsx(ColorThumb, { className: thumbClassName });
+		$[16] = t7;
+	} else t7 = $[16];
+	let t8;
+	if ($[17] !== innerRadius || $[18] !== isDisabled || $[19] !== outerRadius || $[20] !== props$1 || $[21] !== t4 || $[22] !== t6) {
+		t8 = /* @__PURE__ */ jsxs(ColorWheel, {
+			innerRadius,
+			isDisabled,
+			outerRadius,
+			...props$1,
+			...t4,
+			children: [t6, t7]
+		});
+		$[17] = innerRadius;
+		$[18] = isDisabled;
+		$[19] = outerRadius;
+		$[20] = props$1;
+		$[21] = t4;
+		$[22] = t6;
+		$[23] = t8;
+	} else t8 = $[23];
+	return t8;
 }
 //#endregion
 export { ColorWheel$1 as default };

package/dist/components/color-wheel/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/color-wheel/index.tsx"],"sourcesContent":["import type { ColorWheelProps as RACColorWheelProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { ColorThumb as RACColorThumb, ColorWheel as RACColorWheel, ColorWheelTrack as RACColorWheelTrack } from 'react-aria-components';\nimport { thumbClassName } from '../../styles/color';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { stateLayerOpacity } from '../../tokens/design.tokens.stylex';\n\n// Hue as a ring. React Aria paints the conic gradient on the track's own\n// inline `background` and sizes it from `outerRadius`, so what is here is\n// the hole in the middle and the handle `ColorSlider` already draws, from\n// `src/styles/color.ts`.\n//\n// The design carries no page for this. Three things follow, each a choice\n// rather than a reading.\n//\n// **The ring's thickness is the sliders page's 16dp track.** A hue wheel and\n// a hue slider are the same control in two shapes, so the band a reader\n// drags along is the same width in both.\n//\n// **The thickness is a prop and the inner radius is not.** React Aria takes\n// both radii and would accept an inner one larger than the outer, which\n// draws nothing at all; deriving it is what stops the two disagreeing.\n//\n// **The hole is cut with a mask, not drawn with a disc on top.** A disc in\n// the wheel's own surface colour would be opaque, so anything the wheel is\n// placed over — a card, a photograph, another control — would be hidden by\n// a circle nothing explains. The mask leaves the middle genuinely empty,\n// which is also what lets a swatch or an area sit inside one.\n\nconst DEFAULT_OUTER_RADIUS = 100;\n// The sliders page's track, which is what a hue slider draws.\nconst DEFAULT_THICKNESS = 16;\nconst _temp = {\n  kX1K2I: \"xwjwp01\",\n  \"$$css\": true\n};\nconst styles = {\n  track: {\n    kkrTdU: \"x1ypdohk\",\n    $$css: true\n  },\n  trackDisabled: {\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  trackRing: (inner: number) => [_temp, {\n    \"--x-maskImage\": `radial-gradient(circle at center, transparent ${Math.max(0, inner - 0.5)}px, #000 ${inner + 0.5}px)` != null ? `radial-gradient(circle at center, transparent ${Math.max(0, inner - 0.5)}px, #000 ${inner + 0.5}px)` : undefined\n  }]\n};\ntype ColorWheelProps = Omit<RACColorWheelProps, 'children' | 'className' | 'innerRadius' | 'outerRadius' | 'style'> & {\n  /** A function may compute the class from the wheel's render state. */\n  className?: string;\n  /**\n   * How far the ring reaches from the centre, in pixels. The wheel is twice\n   * this across.\n   * @default 100\n   */\n  outerRadius?: number;\n  /** Lands on the wheel, as `className` does. */\n  style?: React.CSSProperties;\n  /**\n   * How wide the band is, in pixels. The inner radius is this in from\n   * `outerRadius`, so the two cannot disagree.\n   * @default 16\n   */\n  thickness?: number;\n};\n\n/**\n * Hue as a ring, with a handle on it. The value is React Aria's: pass\n * `value` with `onChange` to control it, or `defaultValue`, as a CSS colour\n * string or a `Color` from `parseColor`, which this package re-exports.\n *\n * ```tsx\n * <ColorWheel defaultValue=\"hsl(200, 100%, 50%)\" />\n * ```\n *\n * A wheel slides hue and nothing else, so unlike `ColorSlider` and\n * `ColorArea` it names no channel and there is no space for one to be\n * missing from — a hex value works here.\n *\n * The middle is genuinely empty rather than filled, so a `ColorArea` or a\n * `ColorSwatch` can sit inside one. React Aria names the handle \"Hue\" and\n * announces the value; pass `aria-label` to say something else.\n *\n * The call site's `className` and `style` land on the wheel, which is the\n * element a layout positions. Its size comes from `outerRadius`.\n */\nfunction ColorWheel({\n  className,\n  isDisabled = false,\n  outerRadius = DEFAULT_OUTER_RADIUS,\n  style,\n  thickness = DEFAULT_THICKNESS,\n  ...props\n}: ColorWheelProps) {\n  const innerRadius = Math.max(0, outerRadius - thickness);\n  return <RACColorWheel innerRadius={innerRadius} isDisabled={isDisabled} outerRadius={outerRadius} {...props} {...mergeStyles({\n    0: {\n      className: \"x9f619 x1rg5ohu x14ju556\"\n    },\n    1: {\n      className: \"x9f619 x1rg5ohu x14ju556 x1ppv7y9\"\n    }\n  }[!!isDisabled << 0], {\n    className,\n    style\n  })}>\n      <RACColorWheelTrack {...stylex.props(styles.track, styles.trackRing(innerRadius), isDisabled && styles.trackDisabled)} />\n      <RACColorThumb className={thumbClassName} />\n    </RACColorWheel>;\n}\nexport type { ColorWheelProps };\nexport default ColorWheel;"],"mappings":";;;;;;AA8BA,MAAM,uBAAuB;AAE7B,MAAM,oBAAoB;AAC1B,MAAM,QAAQ;CACZ,QAAQ;CACR,SAAS;AACX;AACA,MAAM,SAAS;CACb,OAAO;EACL,QAAQ;EACR,OAAO;CACT;CACA,eAAe;EACb,QAAQ;EACR,OAAO;CACT;CACA,YAAY,UAAkB,CAAC,OAAO,EACpC,iBAAiB,iDAAiD,KAAK,IAAI,GAAG,QAAQ,EAAG,EAAC,WAAY,QAAQ,GAAG,QAAS,OAAO,iDAAiD,KAAK,IAAI,GAAG,QAAQ,EAAG,EAAC,WAAY,QAAQ,GAAG,OAAQ,KAAA,EAC3O,CAAC;AACH;;;;;;;;;;;;;;;;;;;;;AAwCA,SAAS,aAAW,EAClB,WACA,aAAa,OACb,cAAc,sBACd,OACA,YAAY,mBACZ,GAAG,WACe;CAClB,MAAM,cAAc,KAAK,IAAI,GAAG,cAAc,SAAS;CACvD,OAAO,qBAAC,YAAD;EAA4B;EAAyB;EAAyB;EAAa,GAAI;EAAO,GAAI,YAAY;GAC3H,GAAG,EACD,WAAW,2BACb;GACA,GAAG,EACD,WAAW,oCACb;EACF,EAAE,CAAC,CAAC,cAAc,IAAI;GACpB;GACA;EACF,CAAC;EAVM,UAAA,CAWH,oBAAC,iBAAD,EAAoB,GAAI,MAAa,OAAO,OAAO,OAAO,UAAU,WAAW,GAAG,cAAc,OAAO,aAAa,EAAE,CAAA,GACtH,oBAAC,YAAD,EAAe,WAAW,eAAe,CAAA,CAC5B;;AACnB"}
+{"version":3,"file":"index.js","names":["ColorWheelProps","RACColorWheelProps","stylex","ColorThumb","RACColorThumb","ColorWheel","RACColorWheel","ColorWheelTrack","RACColorWheelTrack","thumbClassName","mergeStyles","stateLayerOpacity","DEFAULT_OUTER_RADIUS","DEFAULT_THICKNESS","_temp","kX1K2I","styles","track","kkrTdU","$$css","trackDisabled","trackRing","inner","Math","max","undefined","Omit","className","outerRadius","style","React","CSSProperties","thickness","t0","$","_c","props","t1","t2","t3","isDisabled","innerRadius","t4","0","1","t5","t6","t7","Symbol","for","t8"],"sources":["../../../src/components/color-wheel/index.tsx"],"sourcesContent":["import type { ColorWheelProps as RACColorWheelProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { ColorThumb as RACColorThumb, ColorWheel as RACColorWheel, ColorWheelTrack as RACColorWheelTrack } from 'react-aria-components';\nimport { thumbClassName } from '../../styles/color';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { stateLayerOpacity } from '../../tokens/design.tokens.stylex';\n\n// Hue as a ring. React Aria paints the conic gradient on the track's own\n// inline `background` and sizes it from `outerRadius`, so what is here is\n// the hole in the middle and the handle `ColorSlider` already draws, from\n// `src/styles/color.ts`.\n//\n// The design carries no page for this. Three things follow, each a choice\n// rather than a reading.\n//\n// **The ring's thickness is the sliders page's 16dp track.** A hue wheel and\n// a hue slider are the same control in two shapes, so the band a reader\n// drags along is the same width in both.\n//\n// **The thickness is a prop and the inner radius is not.** React Aria takes\n// both radii and would accept an inner one larger than the outer, which\n// draws nothing at all; deriving it is what stops the two disagreeing.\n//\n// **The hole is cut with a mask, not drawn with a disc on top.** A disc in\n// the wheel's own surface colour would be opaque, so anything the wheel is\n// placed over — a card, a photograph, another control — would be hidden by\n// a circle nothing explains. The mask leaves the middle genuinely empty,\n// which is also what lets a swatch or an area sit inside one.\n\nconst DEFAULT_OUTER_RADIUS = 100;\n// The sliders page's track, which is what a hue slider draws.\nconst DEFAULT_THICKNESS = 16;\nconst _temp = {\n  kX1K2I: \"xwjwp01\",\n  \"$$css\": true\n};\nconst styles = {\n  track: {\n    kkrTdU: \"x1ypdohk\",\n    $$css: true\n  },\n  trackDisabled: {\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  trackRing: (inner: number) => [_temp, {\n    \"--x-maskImage\": `radial-gradient(circle at center, transparent ${Math.max(0, inner - 0.5)}px, #000 ${inner + 0.5}px)` != null ? `radial-gradient(circle at center, transparent ${Math.max(0, inner - 0.5)}px, #000 ${inner + 0.5}px)` : undefined\n  }]\n};\ntype ColorWheelProps = Omit<RACColorWheelProps, 'children' | 'className' | 'innerRadius' | 'outerRadius' | 'style'> & {\n  /** A function may compute the class from the wheel's render state. */\n  className?: string;\n  /**\n   * How far the ring reaches from the centre, in pixels. The wheel is twice\n   * this across.\n   * @default 100\n   */\n  outerRadius?: number;\n  /** Lands on the wheel, as `className` does. */\n  style?: React.CSSProperties;\n  /**\n   * How wide the band is, in pixels. The inner radius is this in from\n   * `outerRadius`, so the two cannot disagree.\n   * @default 16\n   */\n  thickness?: number;\n};\n\n/**\n * Hue as a ring, with a handle on it. The value is React Aria's: pass\n * `value` with `onChange` to control it, or `defaultValue`, as a CSS colour\n * string or a `Color` from `parseColor`, which this package re-exports.\n *\n * ```tsx\n * <ColorWheel defaultValue=\"hsl(200, 100%, 50%)\" />\n * ```\n *\n * A wheel slides hue and nothing else, so unlike `ColorSlider` and\n * `ColorArea` it names no channel and there is no space for one to be\n * missing from — a hex value works here.\n *\n * The middle is genuinely empty rather than filled, so a `ColorArea` or a\n * `ColorSwatch` can sit inside one. React Aria names the handle \"Hue\" and\n * announces the value; pass `aria-label` to say something else.\n *\n * The call site's `className` and `style` land on the wheel, which is the\n * element a layout positions. Its size comes from `outerRadius`.\n */\nfunction ColorWheel({\n  className,\n  isDisabled = false,\n  outerRadius = DEFAULT_OUTER_RADIUS,\n  style,\n  thickness = DEFAULT_THICKNESS,\n  ...props\n}: ColorWheelProps) {\n  const innerRadius = Math.max(0, outerRadius - thickness);\n  return <RACColorWheel innerRadius={innerRadius} isDisabled={isDisabled} outerRadius={outerRadius} {...props} {...mergeStyles({\n    0: {\n      className: \"x9f619 x1rg5ohu x14ju556\"\n    },\n    1: {\n      className: \"x9f619 x1rg5ohu x14ju556 x1ppv7y9\"\n    }\n  }[!!isDisabled << 0], {\n    className,\n    style\n  })}>\n      <RACColorWheelTrack {...stylex.props(styles.track, styles.trackRing(innerRadius), isDisabled && styles.trackDisabled)} />\n      <RACColorThumb className={thumbClassName} />\n    </RACColorWheel>;\n}\nexport type { ColorWheelProps };\nexport default ColorWheel;"],"mappings":"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"}

package/dist/components/combo-box/index.js

@@ -5,9 +5,9 @@ import { fieldStyles, invalidFrom, useFieldValidationBehavior } from "../../fiel
 import { FieldBox, FieldInput, FieldMessage, FieldValue } from "../../field/index.js";
 import { overlay } from "../../styles/overlay.js";
 import ListBox$1 from "../list-box/index.js";
+import { c } from "react/compiler-runtime";
 import { useContext, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { c } from "react/compiler-runtime";
 import { Button, ComboBox, ComboBoxStateContext, ComboBoxValue, Popover } from "react-aria-components";
 //#region src/components/combo-box/index.tsx
 const TOGGLE = /* @__PURE__ */ jsx(ComboToggle, {});
@@ -71,39 +71,120 @@ function ChosenValues() {
 * The call site's `className` and `style` land on the field as a whole,
 * which is the element a layout positions.
 */
-function ComboBox$1({ container, description, error, floatingLabel = true, isDisabled = false, label, leadingIcon, options, variant = "filled", ...props$1 }) {
+function ComboBox$1(t0) {
+	const $ = c(34);
+	const { container, description, error, floatingLabel: t1, isDisabled: t2, label, leadingIcon, options, variant: t3, ...props$1 } = t0;
+	const floatingLabel = t1 === void 0 ? true : t1;
+	const isDisabled = t2 === void 0 ? false : t2;
+	const variant = t3 === void 0 ? "filled" : t3;
 	const validationBehavior = useFieldValidationBehavior();
 	const boxRef = useRef(null);
-	return /* @__PURE__ */ jsxs(ComboBox, {
-		isDisabled,
-		isInvalid: invalidFrom(error),
-		validationBehavior,
-		...props$1,
-		...mergeStatefulStyles(props(fieldStyles.root), props$1),
-		children: [
-			/* @__PURE__ */ jsxs(FieldBox, {
-				floatingLabel,
-				isDisabled,
-				isInvalid: invalidFrom(error),
-				label,
-				leading: leadingIcon,
-				ref: boxRef,
-				trailing: TOGGLE,
-				variant,
-				children: [props$1.selectionMode === "multiple" ? /* @__PURE__ */ jsx(ChosenValues, {}) : null, /* @__PURE__ */ jsx(FieldInput, {})]
-			}),
-			/* @__PURE__ */ jsx(FieldMessage, {
-				description,
-				error
-			}),
-			/* @__PURE__ */ jsx(Popover, {
-				triggerRef: boxRef,
-				UNSTABLE_portalContainer: container,
-				...props(overlay.popup, styles.list),
-				children: /* @__PURE__ */ jsx(ListBox$1, { children: options })
-			})
-		]
-	});
+	const T0 = ComboBox;
+	let t4;
+	if ($[0] !== error) {
+		t4 = invalidFrom(error);
+		$[0] = error;
+		$[1] = t4;
+	} else t4 = $[1];
+	const t5 = mergeStatefulStyles(props(fieldStyles.root), props$1);
+	let t6;
+	if ($[2] !== error) {
+		t6 = invalidFrom(error);
+		$[2] = error;
+		$[3] = t6;
+	} else t6 = $[3];
+	let t7;
+	if ($[4] !== props$1.selectionMode) {
+		t7 = props$1.selectionMode === "multiple" ? /* @__PURE__ */ jsx(ChosenValues, {}) : null;
+		$[4] = props$1.selectionMode;
+		$[5] = t7;
+	} else t7 = $[5];
+	let t8;
+	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+		t8 = /* @__PURE__ */ jsx(FieldInput, {});
+		$[6] = t8;
+	} else t8 = $[6];
+	let t9;
+	if ($[7] !== floatingLabel || $[8] !== isDisabled || $[9] !== label || $[10] !== leadingIcon || $[11] !== t6 || $[12] !== t7 || $[13] !== variant) {
+		t9 = /* @__PURE__ */ jsxs(FieldBox, {
+			floatingLabel,
+			isDisabled,
+			isInvalid: t6,
+			label,
+			leading: leadingIcon,
+			ref: boxRef,
+			trailing: TOGGLE,
+			variant,
+			children: [t7, t8]
+		});
+		$[7] = floatingLabel;
+		$[8] = isDisabled;
+		$[9] = label;
+		$[10] = leadingIcon;
+		$[11] = t6;
+		$[12] = t7;
+		$[13] = variant;
+		$[14] = t9;
+	} else t9 = $[14];
+	let t10;
+	if ($[15] !== description || $[16] !== error) {
+		t10 = /* @__PURE__ */ jsx(FieldMessage, {
+			description,
+			error
+		});
+		$[15] = description;
+		$[16] = error;
+		$[17] = t10;
+	} else t10 = $[17];
+	let t11;
+	if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
+		t11 = props(overlay.popup, styles.list);
+		$[18] = t11;
+	} else t11 = $[18];
+	let t12;
+	if ($[19] !== options) {
+		t12 = /* @__PURE__ */ jsx(ListBox$1, { children: options });
+		$[19] = options;
+		$[20] = t12;
+	} else t12 = $[20];
+	let t13;
+	if ($[21] !== container || $[22] !== t12) {
+		t13 = /* @__PURE__ */ jsx(Popover, {
+			triggerRef: boxRef,
+			UNSTABLE_portalContainer: container,
+			...t11,
+			children: t12
+		});
+		$[21] = container;
+		$[22] = t12;
+		$[23] = t13;
+	} else t13 = $[23];
+	let t14;
+	if ($[24] !== T0 || $[25] !== isDisabled || $[26] !== props$1 || $[27] !== t10 || $[28] !== t13 || $[29] !== t4 || $[30] !== t5 || $[31] !== t9 || $[32] !== validationBehavior) {
+		t14 = /* @__PURE__ */ jsxs(T0, {
+			isDisabled,
+			isInvalid: t4,
+			validationBehavior,
+			...props$1,
+			...t5,
+			children: [
+				t9,
+				t10,
+				t13
+			]
+		});
+		$[24] = T0;
+		$[25] = isDisabled;
+		$[26] = props$1;
+		$[27] = t10;
+		$[28] = t13;
+		$[29] = t4;
+		$[30] = t5;
+		$[31] = t9;
+		$[32] = validationBehavior;
+		$[33] = t14;
+	} else t14 = $[33];
+	return t14;
 }
 /**
 * The button that opens the list. It takes its press behaviour from the

package/dist/components/combo-box/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/combo-box/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { ComboBoxProps as RACComboBoxProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { useContext, useRef } from 'react';\nimport { ComboBoxStateContext, Button as RACButton, ComboBox as RACComboBox, ComboBoxValue as RACComboBoxValue, Popover as RACPopover } from 'react-aria-components';\nimport type { FieldVariant } from '../../field';\nimport { FieldBox, FieldInput, FieldMessage, FieldValue } from '../../field';\nimport { fieldStyles, invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { ChevronEndGlyph } from '../../glyphs';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport { overlay } from '../../styles/overlay';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, spacing } from '../../tokens/design.tokens.stylex';\nimport ListBox from '../list-box';\n\n// The text fields page's autocomplete text field: a text field that filters a\n// list as it is typed. Everything above the list is the field chrome in\n// `src/field` — the same box, label, supporting line and error treatment\n// every other field draws — and the list is ListBox on the shared overlay\n// surface, positioned and sized against the box exactly as Select's is.\n//\n// It is Select's shape with two differences.\n//\n// The control is a real input, so the box is not a press target — typing has\n// to reach the input — and only the chevron at the end opens the list. That\n// is what the page draws too: an autocomplete text field is a text field,\n// with a button on it.\n//\n// And the field is an element tree rather than a function of React Aria's\n// render state, which every other component here writes. React Aria builds a\n// combo box's collection by walking its children for options, and a function\n// is opaque to that walk: with one, the collection is empty until the list\n// has been opened, so a `defaultSelectedKey` resolves to no text and the\n// field starts blank. What needed the render state — whether the list is\n// open — reads the combo box's own state from context instead.\n//\n// Two more things are this component's own.\n//\n// **Filtering is React Aria's, and stays theirs.** `defaultFilter` takes a\n// predicate, and the package re-exports `useFilter` for a locale-aware one;\n// `items` with `useAsyncList` is how a list that is fetched rather than\n// listed gets in. None of that is wrapped, because a combo box's whole job\n// is which options it shows and a wrapper would be a second place to decide\n// it.\n//\n// **A value that is not in the list is allowed or refused, not corrected.**\n// `allowsCustomValue` is React Aria's, and with it off the input reverts to\n// the last chosen option on blur rather than keeping text that means nothing.\n//\n// Choosing more than one is `selectionMode=\"multiple\"`, which draws the\n// chosen options before the input through React Aria's `ComboBoxValue`. For\n// a field that draws each of them as a removable chip, the coverage plan has\n// TokenField.\n\n// Hoisted so it is not a new element on every render, which is what\n// react-perf's jsx-no-jsx-as-prop is after.\nconst TOGGLE = <ComboToggle />;\nconst styles = {\n  list: {\n    kWkggS: \"x1vnz5z6\",\n    kaIpWk: \"x1tfhd1\",\n    kzqmXN: \"xlvufjm\",\n    kskxy: \"xedcshv\",\n    ks0D6T: \"x1x1rfll\",\n    k7Eaqz: \"xeuugli\",\n    kORKVm: \"x1odjw0f\",\n    k8WAf4: \"x1cmllll\",\n    $$css: true\n  }\n};\ntype ComboBoxProps<T extends object = object, M extends ComboBoxSelectionMode = 'single'> = {\n  /**\n   * Where to portal the list. Defaults to the end of `<body>`, which is\n   * right for an app that sets its StyleX theme on `:root`. An app that\n   * scopes the theme to a subtree has to point this at an element inside it,\n   * or the list renders outside the theme and falls back to the tokens'\n   * `prefers-color-scheme` default.\n   */\n  container?: Element;\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   * Whether the label sits in the empty box and floats to the top once the\n   * field is focused or holds a value. `false` keeps it small at the top in\n   * every state.\n   * @default true\n   */\n  floatingLabel?: boolean;\n  /**\n   * What the field is for. Required rather than optional: a combo box with\n   * no label is a box a screen reader cannot name.\n   */\n  label: string;\n  /**\n   * An icon at the start of the box, before the label and the value: the\n   * page's 24dp leading icon, in the muted role.\n   */\n  leadingIcon?: ReactNode;\n  /**\n   * The options. `ListBox.Item` for each, and `ListBox.Section` to group\n   * them — the list inside is a ListBox, and takes everything one does.\n   */\n  options?: ReactNode;\n  /**\n   * The filled box, or the outlined one, as the text fields page draws them.\n   * @default 'filled'\n   */\n  variant?: FieldVariant;\n} & Omit<RACComboBoxProps<T, M>, 'children' | 'defaultSelectedKey' | 'isInvalid' | 'onSelectionChange' | 'selectedKey' | 'validationBehavior'>;\n\n// React Aria's combo box takes its own two-value selection mode rather than\n// the collection-wide one, which also has `none`; that type is local to its\n// module, so the two values are named again here.\ntype ComboBoxSelectionMode = 'multiple' | 'single';\n\n/**\n * The chosen options, drawn before the input when more than one may be\n * chosen. The chrome's `FieldValue` is the styled element and React Aria's\n * `ComboBoxValue` sits inside it, as it does in Select.\n */\nfunction ChosenValues() {\n  return <FieldValue className=\"x2lah0s\">\n      <RACComboBoxValue />\n    </FieldValue>;\n}\n\n/**\n * A labelled text field that filters a list as it is typed. Its value is\n * React Aria's: pass `value` with `onChange` to control which option is\n * chosen, `inputValue` with `onInputChange` to control the text, or the\n * `default` forms of either to let it keep its own. React Aria's older\n * `selectedKey` names are deprecated and are left out of this component's\n * props rather than passed through.\n *\n * ```tsx\n * <ComboBox\n *   label=\"Label\"\n *   options={\n *     <>\n *       <ListBox.Item id=\"first\">First item</ListBox.Item>\n *       <ListBox.Item id=\"second\">Second item</ListBox.Item>\n *     </>\n *   }\n * />\n * ```\n *\n * Filtering is React Aria's: `defaultFilter` takes a predicate, `useFilter`\n * is re-exported for a locale-aware one, and `items` with `useAsyncList`\n * feeds a list that is fetched rather than listed. `allowsCustomValue` lets\n * the field keep text that matches nothing.\n *\n * The box, label, input, supporting line and error are the field chrome in\n * `src/field`, shared with every other field; the list is ListBox on the\n * overlay surface every anchored panel here draws.\n *\n * The call site's `className` and `style` land on the field as a whole,\n * which is the element a layout positions.\n */\nfunction ComboBox<T extends object = object, M extends ComboBoxSelectionMode = 'single'>({\n  container,\n  description,\n  error,\n  floatingLabel = true,\n  isDisabled = false,\n  label,\n  leadingIcon,\n  options,\n  variant = 'filled',\n  ...props\n}: ComboBoxProps<T, M>) {\n  const validationBehavior = useFieldValidationBehavior();\n  // What the list is anchored to and takes its width from: the box, not the\n  // button inside it, which is a 24dp icon.\n  const boxRef = useRef<HTMLDivElement>(null);\n  return <RACComboBox<T, M> isDisabled={isDisabled} isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(fieldStyles.root), props)}>\n      <FieldBox floatingLabel={floatingLabel}\n    // React Aria's `TextField` hands its group the field's disabled and\n    // invalid state through context; its `ComboBox` does not, so the box\n    // is told outright or its label and its underline never turn.\n    isDisabled={isDisabled} isInvalid={invalidFrom(error)} label={label} leading={leadingIcon} ref={boxRef} trailing={TOGGLE} variant={variant}>\n        {props.selectionMode === 'multiple' ? <ChosenValues /> : null}\n        <FieldInput />\n      </FieldBox>\n      <FieldMessage description={description} error={error} />\n      <RACPopover triggerRef={boxRef}\n    // oxlint-disable-next-line typescript/no-deprecated -- its replacement, UNSAFE_PortalProvider, is not exported by react-aria-components\n    UNSTABLE_portalContainer={container} {...stylex.props(overlay.popup, styles.list)}>\n        <ListBox>{options}</ListBox>\n      </RACPopover>\n    </RACComboBox>;\n}\n\n/**\n * The button that opens the list. It takes its press behaviour from the\n * combo box around it through React Aria's button context, and reads whether\n * the list is open from the combo box's state rather than from a render prop\n * — the whole field cannot be a render function, since React Aria builds its\n * collection by walking the children and a function is opaque to that walk.\n */\nfunction ComboToggle() {\n  const state = useContext(ComboBoxStateContext);\n  return <RACButton className=\"x6s0dn4 xjbqb8w xxk0z11 x3y1ksm xc342km x9f619 x1heor9g x1ypdohk x3nfvp2 xvy4d1p xl56j7k xrgy624 x1hl8ikr x9v5kkp x1t137rt x1de99jn x1717udv\">\n      <ChevronEndGlyph {...{\n      0: {\n        className: \"xxk0z11 xvy4d1p x1iffjtl xx6bhzk x11xpdln\"\n      },\n      1: {\n        className: \"xxk0z11 xvy4d1p xx6bhzk x11xpdln x9tu13d\"\n      }\n    }[!!(state?.isOpen === true) << 0]} />\n    </RACButton>;\n}\nexport type { ComboBoxProps, ComboBoxSelectionMode };\nexport default ComboBox;"],"mappings":";;;;;;;;;;;;AAwDA,MAAM,SAAS,oBAAC,aAAD,CAAY,CAAA;AAC3B,MAAM,SAAS,EACb,MAAM;CACJ,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,OAAO;CACP,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,OAAO;AACT,EACF;;;;;;AA4DA,SAAA,eAAA;CAAA,MAAA,IAAA,EAAA,CAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,OAAA,IAAA,2BAAA,GAAA;EACS,KAAA,oBAAC,YAAD;GAAsB,WAAA;GACzB,UAAA,oBAAC,eAAD,CAAiB,CAAA;EADH,CAAA;EAEH,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OAFR;AAEQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCjB,SAAS,WAAgF,EACvF,WACA,aACA,OACA,gBAAgB,MAChB,aAAa,OACb,OACA,aACA,SACA,UAAU,UACV,GAAG,WACmB;CACtB,MAAM,qBAAqB,2BAA2B;CAGtD,MAAM,SAAS,OAAuB,IAAI;CAC1C,OAAO,qBAAC,UAAD;EAA+B;EAAY,WAAW,YAAY,KAAK;EAAuB;EAAoB,GAAI;EAAO,GAAI,oBAAoB,MAAa,YAAY,IAAI,GAAG,OAAK;EAA1L,UAAA;GACH,qBAAC,UAAD;IAAyB;IAIf;IAAY,WAAW,YAAY,KAAK;IAAU;IAAO,SAAS;IAAa,KAAK;IAAQ,UAAU;IAAiB;IAJjI,UAAA,CAKG,QAAM,kBAAkB,aAAa,oBAAC,cAAD,CAAa,CAAA,IAAM,MACzD,oBAAC,YAAD,CAAW,CAAA,CACH;;GACV,oBAAC,cAAD;IAA2B;IAAoB;GAAM,CAAA;GACrD,oBAAC,SAAD;IAAY,YAAY;IAE1B,0BAA0B;IAAW,GAAI,MAAa,QAAQ,OAAO,OAAO,IAAI;IAC5E,UAAA,oBAAC,WAAD,EAAA,UAAU,QAAiB,CAAA;GACjB,CAAA;EACD;;AACjB;;;;;;;;AASA,SAAA,cAAA;CAAA,MAAA,IAAA,EAAA,CAAA;CACE,MAAA,QAAc,WAAW,oBAAoB;CAAE,IAAA;CAAA,IAAA,EAAA,OAAA,OAAA,IAAA,2BAAA,GAAA;EAEtB,KAAA;GAAA,GAClB,EAAA,WACU,4CACb;GAAC,GACE,EAAA,WACU,2CACb;EACF;EAAC,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAPsB,MAAA,KAAA,GAOrB,CAAC,EAAE,OAAK,WAAa,SAAS;CAAE,IAAA;CAAA,IAAA,EAAA,OAAA,IAAA;EAR7B,KAAA,oBAAC,QAAD;GAAqB,WAAA;GACxB,UAAA,oBAAC,iBAAD,EAAgB,GAAK,GAOW,CAAA;EARnB,CAAA;EASH,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OATP;AASO"}
+{"version":3,"file":"index.js","names":["ReactNode","ComboBoxProps","RACComboBoxProps","stylex","useContext","useRef","ComboBoxStateContext","Button","RACButton","ComboBox","RACComboBox","ComboBoxValue","RACComboBoxValue","Popover","RACPopover","FieldVariant","FieldBox","FieldInput","FieldMessage","FieldValue","fieldStyles","invalidFrom","useFieldValidationBehavior","ChevronEndGlyph","mergeStatefulStyles","overlay","colors","radii","spacing","ListBox","TOGGLE","styles","list","kWkggS","kaIpWk","kzqmXN","kskxy","ks0D6T","k7Eaqz","kORKVm","k8WAf4","$$css","ComboBoxSelectionMode","container","Element","description","error","floatingLabel","label","leadingIcon","options","variant","Omit","T","M","ChosenValues","$","_c","t0","Symbol","for","t1","isDisabled","t2","t3","props","undefined","validationBehavior","boxRef","T0","t4","t5","root","t6","t7","selectionMode","t8","t9","t10","t11","popup","t12","t13","t14","ComboToggle","state","0","className","1","isOpen"],"sources":["../../../src/components/combo-box/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { ComboBoxProps as RACComboBoxProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { useContext, useRef } from 'react';\nimport { ComboBoxStateContext, Button as RACButton, ComboBox as RACComboBox, ComboBoxValue as RACComboBoxValue, Popover as RACPopover } from 'react-aria-components';\nimport type { FieldVariant } from '../../field';\nimport { FieldBox, FieldInput, FieldMessage, FieldValue } from '../../field';\nimport { fieldStyles, invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { ChevronEndGlyph } from '../../glyphs';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport { overlay } from '../../styles/overlay';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, spacing } from '../../tokens/design.tokens.stylex';\nimport ListBox from '../list-box';\n\n// The text fields page's autocomplete text field: a text field that filters a\n// list as it is typed. Everything above the list is the field chrome in\n// `src/field` — the same box, label, supporting line and error treatment\n// every other field draws — and the list is ListBox on the shared overlay\n// surface, positioned and sized against the box exactly as Select's is.\n//\n// It is Select's shape with two differences.\n//\n// The control is a real input, so the box is not a press target — typing has\n// to reach the input — and only the chevron at the end opens the list. That\n// is what the page draws too: an autocomplete text field is a text field,\n// with a button on it.\n//\n// And the field is an element tree rather than a function of React Aria's\n// render state, which every other component here writes. React Aria builds a\n// combo box's collection by walking its children for options, and a function\n// is opaque to that walk: with one, the collection is empty until the list\n// has been opened, so a `defaultSelectedKey` resolves to no text and the\n// field starts blank. What needed the render state — whether the list is\n// open — reads the combo box's own state from context instead.\n//\n// Two more things are this component's own.\n//\n// **Filtering is React Aria's, and stays theirs.** `defaultFilter` takes a\n// predicate, and the package re-exports `useFilter` for a locale-aware one;\n// `items` with `useAsyncList` is how a list that is fetched rather than\n// listed gets in. None of that is wrapped, because a combo box's whole job\n// is which options it shows and a wrapper would be a second place to decide\n// it.\n//\n// **A value that is not in the list is allowed or refused, not corrected.**\n// `allowsCustomValue` is React Aria's, and with it off the input reverts to\n// the last chosen option on blur rather than keeping text that means nothing.\n//\n// Choosing more than one is `selectionMode=\"multiple\"`, which draws the\n// chosen options before the input through React Aria's `ComboBoxValue`. For\n// a field that draws each of them as a removable chip, the coverage plan has\n// TokenField.\n\n// Hoisted so it is not a new element on every render, which is what\n// react-perf's jsx-no-jsx-as-prop is after.\nconst TOGGLE = <ComboToggle />;\nconst styles = {\n  list: {\n    kWkggS: \"x1vnz5z6\",\n    kaIpWk: \"x1tfhd1\",\n    kzqmXN: \"xlvufjm\",\n    kskxy: \"xedcshv\",\n    ks0D6T: \"x1x1rfll\",\n    k7Eaqz: \"xeuugli\",\n    kORKVm: \"x1odjw0f\",\n    k8WAf4: \"x1cmllll\",\n    $$css: true\n  }\n};\ntype ComboBoxProps<T extends object = object, M extends ComboBoxSelectionMode = 'single'> = {\n  /**\n   * Where to portal the list. Defaults to the end of `<body>`, which is\n   * right for an app that sets its StyleX theme on `:root`. An app that\n   * scopes the theme to a subtree has to point this at an element inside it,\n   * or the list renders outside the theme and falls back to the tokens'\n   * `prefers-color-scheme` default.\n   */\n  container?: Element;\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   * Whether the label sits in the empty box and floats to the top once the\n   * field is focused or holds a value. `false` keeps it small at the top in\n   * every state.\n   * @default true\n   */\n  floatingLabel?: boolean;\n  /**\n   * What the field is for. Required rather than optional: a combo box with\n   * no label is a box a screen reader cannot name.\n   */\n  label: string;\n  /**\n   * An icon at the start of the box, before the label and the value: the\n   * page's 24dp leading icon, in the muted role.\n   */\n  leadingIcon?: ReactNode;\n  /**\n   * The options. `ListBox.Item` for each, and `ListBox.Section` to group\n   * them — the list inside is a ListBox, and takes everything one does.\n   */\n  options?: ReactNode;\n  /**\n   * The filled box, or the outlined one, as the text fields page draws them.\n   * @default 'filled'\n   */\n  variant?: FieldVariant;\n} & Omit<RACComboBoxProps<T, M>, 'children' | 'defaultSelectedKey' | 'isInvalid' | 'onSelectionChange' | 'selectedKey' | 'validationBehavior'>;\n\n// React Aria's combo box takes its own two-value selection mode rather than\n// the collection-wide one, which also has `none`; that type is local to its\n// module, so the two values are named again here.\ntype ComboBoxSelectionMode = 'multiple' | 'single';\n\n/**\n * The chosen options, drawn before the input when more than one may be\n * chosen. The chrome's `FieldValue` is the styled element and React Aria's\n * `ComboBoxValue` sits inside it, as it does in Select.\n */\nfunction ChosenValues() {\n  return <FieldValue className=\"x2lah0s\">\n      <RACComboBoxValue />\n    </FieldValue>;\n}\n\n/**\n * A labelled text field that filters a list as it is typed. Its value is\n * React Aria's: pass `value` with `onChange` to control which option is\n * chosen, `inputValue` with `onInputChange` to control the text, or the\n * `default` forms of either to let it keep its own. React Aria's older\n * `selectedKey` names are deprecated and are left out of this component's\n * props rather than passed through.\n *\n * ```tsx\n * <ComboBox\n *   label=\"Label\"\n *   options={\n *     <>\n *       <ListBox.Item id=\"first\">First item</ListBox.Item>\n *       <ListBox.Item id=\"second\">Second item</ListBox.Item>\n *     </>\n *   }\n * />\n * ```\n *\n * Filtering is React Aria's: `defaultFilter` takes a predicate, `useFilter`\n * is re-exported for a locale-aware one, and `items` with `useAsyncList`\n * feeds a list that is fetched rather than listed. `allowsCustomValue` lets\n * the field keep text that matches nothing.\n *\n * The box, label, input, supporting line and error are the field chrome in\n * `src/field`, shared with every other field; the list is ListBox on the\n * overlay surface every anchored panel here draws.\n *\n * The call site's `className` and `style` land on the field as a whole,\n * which is the element a layout positions.\n */\nfunction ComboBox<T extends object = object, M extends ComboBoxSelectionMode = 'single'>({\n  container,\n  description,\n  error,\n  floatingLabel = true,\n  isDisabled = false,\n  label,\n  leadingIcon,\n  options,\n  variant = 'filled',\n  ...props\n}: ComboBoxProps<T, M>) {\n  const validationBehavior = useFieldValidationBehavior();\n  // What the list is anchored to and takes its width from: the box, not the\n  // button inside it, which is a 24dp icon.\n  const boxRef = useRef<HTMLDivElement>(null);\n  return <RACComboBox<T, M> isDisabled={isDisabled} isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(fieldStyles.root), props)}>\n      <FieldBox floatingLabel={floatingLabel}\n    // React Aria's `TextField` hands its group the field's disabled and\n    // invalid state through context; its `ComboBox` does not, so the box\n    // is told outright or its label and its underline never turn.\n    isDisabled={isDisabled} isInvalid={invalidFrom(error)} label={label} leading={leadingIcon} ref={boxRef} trailing={TOGGLE} variant={variant}>\n        {props.selectionMode === 'multiple' ? <ChosenValues /> : null}\n        <FieldInput />\n      </FieldBox>\n      <FieldMessage description={description} error={error} />\n      <RACPopover triggerRef={boxRef}\n    // oxlint-disable-next-line typescript/no-deprecated -- its replacement, UNSAFE_PortalProvider, is not exported by react-aria-components\n    UNSTABLE_portalContainer={container} {...stylex.props(overlay.popup, styles.list)}>\n        <ListBox>{options}</ListBox>\n      </RACPopover>\n    </RACComboBox>;\n}\n\n/**\n * The button that opens the list. It takes its press behaviour from the\n * combo box around it through React Aria's button context, and reads whether\n * the list is open from the combo box's state rather than from a render prop\n * — the whole field cannot be a render function, since React Aria builds its\n * collection by walking the children and a function is opaque to that walk.\n */\nfunction ComboToggle() {\n  const state = useContext(ComboBoxStateContext);\n  return <RACButton className=\"x6s0dn4 xjbqb8w xxk0z11 x3y1ksm xc342km x9f619 x1heor9g x1ypdohk x3nfvp2 xvy4d1p xl56j7k xrgy624 x1hl8ikr x9v5kkp x1t137rt x1de99jn x1717udv\">\n      <ChevronEndGlyph {...{\n      0: {\n        className: \"xxk0z11 xvy4d1p x1iffjtl xx6bhzk x11xpdln\"\n      },\n      1: {\n        className: \"xxk0z11 xvy4d1p xx6bhzk x11xpdln x9tu13d\"\n      }\n    }[!!(state?.isOpen === true) << 0]} />\n    </RACButton>;\n}\nexport type { ComboBoxProps, ComboBoxSelectionMode };\nexport default ComboBox;"],"mappings":"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"}

package/dist/components/container/index.js

@@ -1,6 +1,7 @@
 import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { useRender } from "../../render/useRender.js";
 import { mergeStyles } from "../../styles/merge.js";
+import { c } from "react/compiler-runtime";
 //#region src/components/container/index.tsx
 const DEFAULT_MAX_INLINE_SIZE = "960px";
 const _temp = {
@@ -32,16 +33,58 @@ const styles = {
 * `render` swaps the element, for a container that should be a `<main>` or a
 * `<section>` rather than a `<div>`.
 */
-function Container({ maxInlineSize = DEFAULT_MAX_INLINE_SIZE, padding = "default", render, ...props$1 }) {
-	const padded = padding === "none" ? styles.paddingNone : styles.paddingDefault;
-	return useRender({
-		defaultTagName: "div",
-		props: {
-			...props$1,
-			...mergeStyles(props(styles.root(maxInlineSize), padded), props$1)
-		},
-		render
-	});
+function Container(t0) {
+	const $ = c(13);
+	let render;
+	let t1;
+	let t2;
+	let t3;
+	let t4;
+	if ($[0] !== t0) {
+		const { maxInlineSize: t5, padding: t6, render: t7, ...props$1 } = t0;
+		render = t7;
+		const maxInlineSize = t5 === void 0 ? DEFAULT_MAX_INLINE_SIZE : t5;
+		const padded = (t6 === void 0 ? "default" : t6) === "none" ? styles.paddingNone : styles.paddingDefault;
+		t4 = useRender;
+		t3 = "div";
+		t1 = props$1;
+		t2 = mergeStyles(props(styles.root(maxInlineSize), padded), props$1);
+		$[0] = t0;
+		$[1] = render;
+		$[2] = t1;
+		$[3] = t2;
+		$[4] = t3;
+		$[5] = t4;
+	} else {
+		render = $[1];
+		t1 = $[2];
+		t2 = $[3];
+		t3 = $[4];
+		t4 = $[5];
+	}
+	let t5;
+	if ($[6] !== t1 || $[7] !== t2) {
+		t5 = {
+			...t1,
+			...t2
+		};
+		$[6] = t1;
+		$[7] = t2;
+		$[8] = t5;
+	} else t5 = $[8];
+	let t6;
+	if ($[9] !== render || $[10] !== t3 || $[11] !== t5) {
+		t6 = {
+			defaultTagName: t3,
+			props: t5,
+			render
+		};
+		$[9] = render;
+		$[10] = t3;
+		$[11] = t5;
+		$[12] = t6;
+	} else t6 = $[12];
+	return t4(t6);
 }
 //#endregion
 export { Container as default };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/container/index.tsx"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport type { RenderComponentProps } from '../../render/useRender';\nimport { useRender } from '../../render/useRender';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { spacing } from '../../tokens/design.tokens.stylex';\n\n// The width fourteen of this library's own story files already centre their\n// page on, which is what makes it the default rather than a number picked\n// here. A measure is a property of the content: 960px suits a page of mixed\n// components, and prose wants something nearer 58ch, which is what the story\n// files that hold prose use. Say which one you mean rather than taking this.\nconst DEFAULT_MAX_INLINE_SIZE = '960px';\n\n// One pixel of the layout pages' own breakpoint: a compact window is below\n// 600, and a medium window starts at it.\nconst MEDIUM_WINDOW = '@media (width >= 600px)';\n\n// A dynamic style rather than a static one, for the same reason Feed's is:\n// the measure comes from the call site and StyleX compiles its classes ahead\n// of time, so the value is written to a custom property inline instead.\n//\n// No Material Design page draws a page container; the layout pages give the\n// margins one keeps. The gutter is the margin those pages give a window of\n// each size — 16dp while the window is compact, 24dp from medium up — and\n// the measure is the call site's, since the pages leave a pane's width to\n// its content.\nconst _temp = {\n  kB7OPa: \"x9f619\",\n  kzqmXN: \"xh8yej3\",\n  kUOVxO: \"xvueqy4\",\n  ks0D6T: \"x13i5qev\",\n  \"$$css\": true\n};\nconst styles = {\n  paddingDefault: {\n    kg3NbH: \"x790zyz x1njmi9r\",\n    $$css: true\n  },\n  paddingNone: {\n    kg3NbH: \"xnjsko4\",\n    $$css: true\n  },\n  root: (maxInlineSize: string) => [_temp, {\n    \"--x-maxInlineSize\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(maxInlineSize)\n  }]\n};\ntype ContainerProps = RenderComponentProps<'div'> & {\n  /**\n   * How wide the content may run before it stops growing. The container is\n   * centred in whatever space is left over.\n   *\n   * Worth setting. The default suits a page of mixed components; prose wants\n   * a measure in `ch`, since what makes a line hard to read is how many\n   * characters it holds rather than how many pixels.\n   * @default '960px'\n   */\n  maxInlineSize?: string;\n  /**\n   * Inline padding, which is what keeps the content off the edge of the\n   * window once it is narrower than the measure. `none` is for a container\n   * nested inside one that already has it.\n   * @default 'default'\n   */\n  padding?: 'default' | 'none';\n};\n\n/**\n * A centred measure for a page or a section of one: content grows to a width\n * and stops, with the leftover space split evenly either side.\n *\n * Layout only — it paints no surface and gives its children no container of\n * their own, which is what separates it from Card. It sets no gaps either, so\n * reach for Stack inside it for the rhythm between sections.\n *\n * `render` swaps the element, for a container that should be a `<main>` or a\n * `<section>` rather than a `<div>`.\n */\nfunction Container({\n  maxInlineSize = DEFAULT_MAX_INLINE_SIZE,\n  padding = 'default',\n  render,\n  ...props\n}: ContainerProps) {\n  const padded = padding === 'none' ? styles.paddingNone : styles.paddingDefault;\n  return useRender({\n    defaultTagName: 'div',\n    props: {\n      ...props,\n      ...mergeStyles(stylex.props(styles.root(maxInlineSize), padded), props)\n    },\n    render\n  });\n}\nexport type { ContainerProps };\nexport default Container;"],"mappings":";;;;AAYA,MAAM,0BAA0B;AAehC,MAAM,QAAQ;CACZ,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,SAAS;AACX;AACA,MAAM,SAAS;CACb,gBAAgB;EACd,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,QAAQ;EACR,OAAO;CACT;CACA,OAAO,kBAA0B,CAAC,OAAO,EACvC,uBAAsB,QAAO,OAAO,QAAQ,WAAW,MAAM,OAAO,OAAO,OAAO,MAAM,KAAA,EAAA,CAAW,aAAa,EAClH,CAAC;AACH;;;;;;;;;;;;AAgCA,SAAS,UAAU,EACjB,gBAAgB,yBAChB,UAAU,WACV,QACA,GAAG,WACc;CACjB,MAAM,SAAS,YAAY,SAAS,OAAO,cAAc,OAAO;CAChE,OAAO,UAAU;EACf,gBAAgB;EAChB,OAAO;GACL,GAAG;GACH,GAAG,YAAY,MAAa,OAAO,KAAK,aAAa,GAAG,MAAM,GAAG,OAAK;EACxE;EACA;CACF,CAAC;AACH"}
+{"version":3,"file":"index.js","names":["stylex","RenderComponentProps","useRender","mergeStyles","spacing","DEFAULT_MAX_INLINE_SIZE","MEDIUM_WINDOW","_temp","kB7OPa","kzqmXN","kUOVxO","ks0D6T","styles","paddingDefault","kg3NbH","$$css","paddingNone","root","maxInlineSize","val","undefined","ContainerProps","padding","Container","t0","$","_c","render","t1","t2","t3","t4","t5","t6","t7","props","padded","defaultTagName"],"sources":["../../../src/components/container/index.tsx"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport type { RenderComponentProps } from '../../render/useRender';\nimport { useRender } from '../../render/useRender';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { spacing } from '../../tokens/design.tokens.stylex';\n\n// The width fourteen of this library's own story files already centre their\n// page on, which is what makes it the default rather than a number picked\n// here. A measure is a property of the content: 960px suits a page of mixed\n// components, and prose wants something nearer 58ch, which is what the story\n// files that hold prose use. Say which one you mean rather than taking this.\nconst DEFAULT_MAX_INLINE_SIZE = '960px';\n\n// One pixel of the layout pages' own breakpoint: a compact window is below\n// 600, and a medium window starts at it.\nconst MEDIUM_WINDOW = '@media (width >= 600px)';\n\n// A dynamic style rather than a static one, for the same reason Feed's is:\n// the measure comes from the call site and StyleX compiles its classes ahead\n// of time, so the value is written to a custom property inline instead.\n//\n// No Material Design page draws a page container; the layout pages give the\n// margins one keeps. The gutter is the margin those pages give a window of\n// each size — 16dp while the window is compact, 24dp from medium up — and\n// the measure is the call site's, since the pages leave a pane's width to\n// its content.\nconst _temp = {\n  kB7OPa: \"x9f619\",\n  kzqmXN: \"xh8yej3\",\n  kUOVxO: \"xvueqy4\",\n  ks0D6T: \"x13i5qev\",\n  \"$$css\": true\n};\nconst styles = {\n  paddingDefault: {\n    kg3NbH: \"x790zyz x1njmi9r\",\n    $$css: true\n  },\n  paddingNone: {\n    kg3NbH: \"xnjsko4\",\n    $$css: true\n  },\n  root: (maxInlineSize: string) => [_temp, {\n    \"--x-maxInlineSize\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(maxInlineSize)\n  }]\n};\ntype ContainerProps = RenderComponentProps<'div'> & {\n  /**\n   * How wide the content may run before it stops growing. The container is\n   * centred in whatever space is left over.\n   *\n   * Worth setting. The default suits a page of mixed components; prose wants\n   * a measure in `ch`, since what makes a line hard to read is how many\n   * characters it holds rather than how many pixels.\n   * @default '960px'\n   */\n  maxInlineSize?: string;\n  /**\n   * Inline padding, which is what keeps the content off the edge of the\n   * window once it is narrower than the measure. `none` is for a container\n   * nested inside one that already has it.\n   * @default 'default'\n   */\n  padding?: 'default' | 'none';\n};\n\n/**\n * A centred measure for a page or a section of one: content grows to a width\n * and stops, with the leftover space split evenly either side.\n *\n * Layout only — it paints no surface and gives its children no container of\n * their own, which is what separates it from Card. It sets no gaps either, so\n * reach for Stack inside it for the rhythm between sections.\n *\n * `render` swaps the element, for a container that should be a `<main>` or a\n * `<section>` rather than a `<div>`.\n */\nfunction Container({\n  maxInlineSize = DEFAULT_MAX_INLINE_SIZE,\n  padding = 'default',\n  render,\n  ...props\n}: ContainerProps) {\n  const padded = padding === 'none' ? styles.paddingNone : styles.paddingDefault;\n  return useRender({\n    defaultTagName: 'div',\n    props: {\n      ...props,\n      ...mergeStyles(stylex.props(styles.root(maxInlineSize), padded), props)\n    },\n    render\n  });\n}\nexport type { ContainerProps };\nexport default Container;"],"mappings":";;;;;AAYA,MAAMK,0BAA0B;AAehC,MAAME,QAAQ;CACZC,QAAQ;CACRC,QAAQ;CACRC,QAAQ;CACRC,QAAQ;CACR,SAAS;AACX;AACA,MAAMC,SAAS;CACbC,gBAAgB;EACdC,QAAQ;EACRC,OAAO;CACT;CACAC,aAAa;EACXF,QAAQ;EACRC,OAAO;CACT;CACAE,OAAOC,kBAA0B,CAACX,OAAO,EACvC,uBAAsBY,QAAO,OAAOA,QAAQ,WAAWA,MAAM,OAAOA,OAAO,OAAOA,MAAMC,KAAAA,EAAAA,CAAWF,aAAa,EAClH,CAAC;AACH;;;;;;;;;;;;AAgCA,SAAAK,UAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAN,EAAA,OAAAD,IAAA;EAAmB,MAAA,EAAAN,eAAAc,IAAAV,SAAAW,IAAAN,QAAAO,IAAA,GAAAC,YAAAX;EAAAG,SAAAO;EACjB,MAAAhB,gBAAAc,OAAAZ,KAAAA,IAAAf,0BAAA2B;EAKA,MAAAI,UAJAH,OAAAb,KAAAA,IAAA,YAAAa,QAI2B,SAASrB,OAAMI,cAAeJ,OAAMC;EACxDX,KAAAA;EACW4B,KAAA;EAEXK,KAAAA;EACAN,KAAA1B,YAAYH,MAAaY,OAAMK,KAAMC,aAAa,GAAGkB,MAAM,GAAGD,OAAK;EAACV,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;EAAAL,EAAA,KAAAM;CAAA,OAAA;EAAAJ,SAAAF,EAAA;EAAAG,KAAAH,EAAA;EAAAI,KAAAJ,EAAA;EAAAK,KAAAL,EAAA;EAAAM,KAAAN,EAAA;CAAA;CAAA,IAAAO;CAAA,IAAAP,EAAA,OAAAG,MAAAH,EAAA,OAAAI,IAAA;EAFlEG,KAAA;GAAA,GACFG;GAAK,GACLN;EACL;EAACJ,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAO;CAAA,OAAAA,KAAAP,EAAA;CAAA,IAAAQ;CAAA,IAAAR,EAAA,OAAAE,UAAAF,EAAA,QAAAK,MAAAL,EAAA,QAAAO,IAAA;EALcC,KAAA;GAAAI,gBACCP;GAAKK,OACdH;GAGNL;EAEH;EAACF,EAAA,KAAAE;EAAAF,EAAA,MAAAK;EAAAL,EAAA,MAAAO;EAAAP,EAAA,MAAAQ;CAAA,OAAAA,KAAAR,EAAA;CAAA,OAPMvB,GAAU+B,EAOhB;AAAC"}

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

@@ -1,7 +1,8 @@
 import { mergeStyles } from "../../styles/merge.js";
 import Button from "../button/index.js";
 import Code from "../code/index.js";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { c } from "react/compiler-runtime";
+import { useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/copy-field/index.tsx
 const COPIED_RESET_MS = 2e3;
@@ -10,49 +11,103 @@ const COPIED_RESET_MS = 2e3;
 * It shows the value in the mono face and copies it on request, confirming
 * on the button itself.
 */
-function CopyField({ copiedLabel = "Copied", copyLabel = "Copy", onCopied, value, ...props }) {
+function CopyField(t0) {
+	const $ = c(18);
+	const { copiedLabel: t1, copyLabel: t2, onCopied, value, ...props } = t0;
+	const copiedLabel = t1 === void 0 ? "Copied" : t1;
+	const copyLabel = t2 === void 0 ? "Copy" : t2;
 	const [copied, setCopied] = useState(false);
 	const timer = useRef(void 0);
-	useEffect(() => () => {
-		clearTimeout(timer.current);
-	}, []);
-	const handleCopy = useCallback(() => {
-		const write = async () => {
-			try {
-				await navigator.clipboard.writeText(value);
-			} catch {
-				setCopied(false);
-				return;
-			}
-			setCopied(true);
-			onCopied?.(value);
+	let t3;
+	let t4;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = () => () => {
 			clearTimeout(timer.current);
-			timer.current = setTimeout(() => {
-				setCopied(false);
-			}, COPIED_RESET_MS);
 		};
-		write();
-	}, [onCopied, value]);
-	return /* @__PURE__ */ jsxs("div", {
-		...props,
-		...mergeStyles({ className: "x6s0dn4 x14s9m32 x1fwvt7v x1xdvaa9 x1y0btm7 xmkeg23 x9f619 x78zum5 x126z3so xmqoko8 x18fpw6u" }, props),
-		children: [
-			/* @__PURE__ */ jsx("span", {
-				className: "x1iyjqo2 x1b35g6e xeuugli",
-				children: /* @__PURE__ */ jsx(Code, { children: value })
-			}),
-			/* @__PURE__ */ jsx(Button, {
-				onClick: handleCopy,
-				size: "xs",
-				variant: "text",
-				children: copied ? copiedLabel : copyLabel
-			}),
-			/* @__PURE__ */ jsx("output", {
-				className: "xjm9jq1 x1hyvwdk x1i1rx1s xb3r6kr x10l6tqk xuxw1ft",
-				children: copied ? copiedLabel : ""
-			})
-		]
-	});
+		t4 = [];
+		$[0] = t3;
+		$[1] = t4;
+	} else {
+		t3 = $[0];
+		t4 = $[1];
+	}
+	useEffect(t3, t4);
+	let t5;
+	if ($[2] !== onCopied || $[3] !== value) {
+		t5 = () => {
+			const write = async () => {
+				try {
+					await navigator.clipboard.writeText(value);
+				} catch {
+					setCopied(false);
+					return;
+				}
+				setCopied(true);
+				onCopied?.(value);
+				clearTimeout(timer.current);
+				timer.current = setTimeout(() => {
+					setCopied(false);
+				}, COPIED_RESET_MS);
+			};
+			write();
+		};
+		$[2] = onCopied;
+		$[3] = value;
+		$[4] = t5;
+	} else t5 = $[4];
+	const handleCopy = t5;
+	const t6 = mergeStyles({ className: "x6s0dn4 x14s9m32 x1fwvt7v x1xdvaa9 x1y0btm7 xmkeg23 x9f619 x78zum5 x126z3so xmqoko8 x18fpw6u" }, props);
+	let t7;
+	if ($[5] !== value) {
+		t7 = /* @__PURE__ */ jsx("span", {
+			className: "x1iyjqo2 x1b35g6e xeuugli",
+			children: /* @__PURE__ */ jsx(Code, { children: value })
+		});
+		$[5] = value;
+		$[6] = t7;
+	} else t7 = $[6];
+	const t8 = copied ? copiedLabel : copyLabel;
+	let t9;
+	if ($[7] !== handleCopy || $[8] !== t8) {
+		t9 = /* @__PURE__ */ jsx(Button, {
+			onClick: handleCopy,
+			size: "xs",
+			variant: "text",
+			children: t8
+		});
+		$[7] = handleCopy;
+		$[8] = t8;
+		$[9] = t9;
+	} else t9 = $[9];
+	const t10 = copied ? copiedLabel : "";
+	let t11;
+	if ($[10] !== t10) {
+		t11 = /* @__PURE__ */ jsx("output", {
+			className: "xjm9jq1 x1hyvwdk x1i1rx1s xb3r6kr x10l6tqk xuxw1ft",
+			children: t10
+		});
+		$[10] = t10;
+		$[11] = t11;
+	} else t11 = $[11];
+	let t12;
+	if ($[12] !== props || $[13] !== t11 || $[14] !== t6 || $[15] !== t7 || $[16] !== t9) {
+		t12 = /* @__PURE__ */ jsxs("div", {
+			...props,
+			...t6,
+			children: [
+				t7,
+				t9,
+				t11
+			]
+		});
+		$[12] = props;
+		$[13] = t11;
+		$[14] = t6;
+		$[15] = t7;
+		$[16] = t9;
+		$[17] = t12;
+	} else t12 = $[17];
+	return t12;
 }
 //#endregion
 export { CopyField as default };