@kanso-labs/kanso-ui 0.26.4 → 0.26.6

package/dist/components/checkbox/index.js

@@ -1,7 +1,10 @@
 import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { mergeStatefulStyles } from "../../styles/merge.js";
 import { CheckGlyph, IndeterminateGlyph } from "../../glyphs/index.js";
+import { focus } from "../../styles/focus.js";
 import { useRipple } from "../../hooks/useRipple.js";
+import { controlStyles } from "../../control/styles.js";
+import { ControlLabel } from "../../control/index.js";
 import { invalidFrom, useFieldValidationBehavior } from "../../field/root.js";
 import { FieldMessage } from "../../field/index.js";
 import { c } from "react/compiler-runtime";
@@ -57,36 +60,7 @@ const styles = {
 		$$css: true
 	},
 	control: {
-		kGNEyG: "x6s0dn4",
-		kWkggS: "xjbqb8w",
-		kZKoxP: "x1vqgdyp",
-		kaIpWk: "x3y1ksm",
-		kB7OPa: "x9f619",
 		kMwMTN: "x139gbkf",
-		kkrTdU: "x1ypdohk",
-		k1xSpc: "x78zum5",
-		kmuXW: "x2lah0s",
-		kzqmXN: "x100vrsf",
-		kjj79g: "xl56j7k",
-		kVAEAm: "x1n2onr6",
-		kIyJzY: "x1qno0dh",
-		k1ekBW: "x15406qy",
-		kAMwcw: "xpc4ca7",
-		$$css: true
-	},
-	controlDisabled: {
-		kkrTdU: "x1h6gzvc",
-		$$css: true
-	},
-	controlFocused: {
-		kjBf7l: "xrgy624",
-		kInvED: "x1hl8ikr",
-		k3XXqK: "xaatb59",
-		kMeerF: "x1de99jn",
-		$$css: true
-	},
-	controlReadOnly: {
-		kkrTdU: "xt0e3qv",
 		$$css: true
 	}
 };
@@ -126,18 +100,13 @@ function buttonContent(children, ripple) {
 		const active = state.isHovered || state.isPressed || state.isFocusVisible;
 		return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("span", {
 			...interactive ? ripple.handlers : {},
-			...props(styles.control, state.isReadOnly && styles.controlReadOnly, state.isDisabled && styles.controlDisabled, interactive && state.isHovered && hoverLayers[tone], interactive && state.isPressed && pressedLayers[tone], state.isFocusVisible && styles.controlFocused),
+			...props(controlStyles.disc, styles.control, state.isReadOnly && controlStyles.controlReadOnly, state.isDisabled && controlStyles.controlDisabled, interactive && state.isHovered && hoverLayers[tone], interactive && state.isPressed && pressedLayers[tone], state.isFocusVisible && focus.ringVisible),
 			children: [/* @__PURE__ */ jsx("span", {
 				...props(styles.box, marked && styles.boxMarked, !marked && state.isInvalid && styles.boxUnmarkedError, !marked && !state.isInvalid && interactive && active && styles.boxUnmarkedActive, marked && state.isInvalid && styles.boxMarkedError, state.isDisabled && (marked ? styles.boxMarkedDisabled : styles.boxUnmarkedDisabled)),
 				children: state.isIndeterminate ? /* @__PURE__ */ jsx(IndeterminateGlyph, { className: "xmix8c7 x1lliihq x1xp8n7a" }) : state.isSelected ? /* @__PURE__ */ jsx(CheckGlyph, { className: "xmix8c7 x1lliihq x1xp8n7a" }) : null
 			}), interactive ? ripple.surface : null]
-		}), children === void 0 ? null : /* @__PURE__ */ jsx("span", {
-			...{
-				0: { className: "x9f619 x139gbkf x1ypdohk x16svsjw x1848etk x1c52epr x1qn8t5l xh7dzej x1cmllll" },
-				2: { className: "x9f619 x139gbkf x16svsjw x1848etk x1c52epr x1qn8t5l xh7dzej x1cmllll xt0e3qv" },
-				1: { className: "x9f619 x16svsjw x1848etk x1c52epr x1qn8t5l xh7dzej x1cmllll x1xj74d8 x1h6gzvc" },
-				3: { className: "x9f619 x16svsjw x1848etk x1c52epr x1qn8t5l xh7dzej x1cmllll x1xj74d8 x1h6gzvc" }
-			}[!!state.isReadOnly << 1 | !!state.isDisabled << 0],
+		}), /* @__PURE__ */ jsx(ControlLabel, {
+			state,
 			children
 		})] });
 	};
@@ -153,8 +122,8 @@ function buttonContent(children, ripple) {
 * which is the element a layout positions.
 */
 function Checkbox(t0) {
-	const $ = c(18);
-	const { children, description, error, ...props } = t0;
+	const $ = c(19);
+	const { children, description, error, ...props$1 } = t0;
 	const ripple = useRipple();
 	const validationBehavior = useFieldValidationBehavior();
 	const T0 = CheckboxField;
@@ -164,7 +133,7 @@ function Checkbox(t0) {
 		$[0] = error;
 		$[1] = t1;
 	} else t1 = $[1];
-	const t2 = mergeStatefulStyles({ className: "x7a106z x9f619 xpr5407 xrvj5dj x1pmbctz" }, props);
+	const t2 = mergeStatefulStyles(props(controlStyles.field), props$1);
 	let t3;
 	if ($[2] !== children || $[3] !== ripple) {
 		t3 = buttonContent(children, ripple);
@@ -182,38 +151,43 @@ function Checkbox(t0) {
 		$[6] = t4;
 	} else t4 = $[6];
 	let t5;
-	if ($[7] !== description || $[8] !== error) {
-		t5 = /* @__PURE__ */ jsx("div", {
-			className: "x1xdureb",
+	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = props(controlStyles.messages);
+		$[7] = t5;
+	} else t5 = $[7];
+	let t6;
+	if ($[8] !== description || $[9] !== error) {
+		t6 = /* @__PURE__ */ jsx("div", {
+			...t5,
 			children: /* @__PURE__ */ jsx(FieldMessage, {
 				description,
 				error,
 				inset: false
 			})
 		});
-		$[7] = description;
-		$[8] = error;
-		$[9] = t5;
-	} else t5 = $[9];
-	let t6;
-	if ($[10] !== T0 || $[11] !== props || $[12] !== t1 || $[13] !== t2 || $[14] !== t4 || $[15] !== t5 || $[16] !== validationBehavior) {
-		t6 = /* @__PURE__ */ jsxs(T0, {
+		$[8] = description;
+		$[9] = error;
+		$[10] = t6;
+	} else t6 = $[10];
+	let t7;
+	if ($[11] !== T0 || $[12] !== props$1 || $[13] !== t1 || $[14] !== t2 || $[15] !== t4 || $[16] !== t6 || $[17] !== validationBehavior) {
+		t7 = /* @__PURE__ */ jsxs(T0, {
 			isInvalid: t1,
 			validationBehavior,
-			...props,
+			...props$1,
 			...t2,
-			children: [t4, t5]
+			children: [t4, t6]
 		});
-		$[10] = T0;
-		$[11] = props;
-		$[12] = t1;
-		$[13] = t2;
-		$[14] = t4;
-		$[15] = t5;
-		$[16] = validationBehavior;
-		$[17] = t6;
-	} else t6 = $[17];
-	return t6;
+		$[11] = T0;
+		$[12] = props$1;
+		$[13] = t1;
+		$[14] = t2;
+		$[15] = t4;
+		$[16] = t6;
+		$[17] = validationBehavior;
+		$[18] = t7;
+	} else t7 = $[18];
+	return t7;
 }
 //#endregion
 export { Checkbox as default };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","CheckboxButtonRenderProps","CheckboxFieldProps","RACCheckboxFieldProps","stylex","CheckboxButton","CheckboxField","FieldMessage","invalidFrom","useFieldValidationBehavior","CheckGlyph","IndeterminateGlyph","useRipple","mergeStatefulStyles","colors","motion","radii","spacing","stateLayerOpacity","typography","styles","box","kGNEyG","kWkggS","kZKoxP","kVAM5u","kaIpWk","ksu8eU","kMzoRj","kB7OPa","kMwMTN","k1xSpc","kzqmXN","kjj79g","kIyJzY","k1ekBW","kAMwcw","$$css","boxMarked","boxMarkedDisabled","boxMarkedError","boxUnmarkedActive","boxUnmarkedDisabled","boxUnmarkedError","control","kkrTdU","kmuXW","kVAEAm","controlDisabled","controlFocused","kjBf7l","kInvED","k3XXqK","kMeerF","controlReadOnly","hoverLayers","error","marked","unmarked","pressedLayers","CheckboxProps","children","description","Omit","Ripple","ReturnType","HTMLSpanElement","Tone","buttonContent","ripple","state","isSelected","isIndeterminate","interactive","isDisabled","isReadOnly","tone","isInvalid","active","isHovered","isPressed","isFocusVisible","handlers","props","surface","undefined","className","Checkbox","t0","$","_c","validationBehavior","T0","t1","t2","t3","t4","t5","t6"],"sources":["../../../src/components/checkbox/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { CheckboxButtonRenderProps, CheckboxFieldProps as RACCheckboxFieldProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { CheckboxButton, CheckboxField } from 'react-aria-components';\nimport { FieldMessage } from '../../field';\nimport { invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { CheckGlyph, IndeterminateGlyph } from '../../glyphs';\nimport { useRipple } from '../../hooks/useRipple';\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 checkbox page: an 18dp box with a 2dp corner and an 18dp glyph, inside\n// a 40dp state layer, with a 48dp target. Unselected, the box is a 2dp rule\n// in on surface variant that turns on surface while hovered, pressed or\n// focused; selected or indeterminate, it fills with primary and the glyph\n// takes on primary. The error pair is error and on error, and disabled is\n// on surface at the disabled opacity for the rule or the fill, with the\n// glyph in surface. The state layer is on surface over an unselected box and\n// primary over a selected one while hovered, and the two swap once pressed.\n//\n// React Aria's `CheckboxField` is the root, a div holding the description\n// and error slots; its `CheckboxButton` is the label around a visually\n// hidden input, and everything drawn is that label's children, chosen from\n// the render state React Aria hands them. The field is a two-column grid —\n// the control, then the text — and the label is `display: contents`, so the\n// control and the label text each take a column and the description and\n// error line up under the text rather than under the box.\n//\n// The adjacent label is body-large on surface, which the page keeps the same\n// whether or not the box is selected. The corner is a literal: the page's\n// 2dp is a step the shape scale does not carry.\nconst styles = {\n  box: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kZKoxP: \"xmix8c7\",\n    kVAM5u: \"x1is7jjm\",\n    kaIpWk: \"x1cum3z5\",\n    ksu8eU: \"x1y0btm7\",\n    kMzoRj: \"xdh2fpr\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"xwjo7ld\",\n    k1xSpc: \"x78zum5\",\n    kzqmXN: \"x1xp8n7a\",\n    kjj79g: \"xl56j7k\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"xts7igz\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  boxMarked: {\n    kWkggS: \"xnety89\",\n    kVAM5u: \"x9r1u3d\",\n    $$css: true\n  },\n  boxMarkedDisabled: {\n    kWkggS: \"x1crcgwy\",\n    kVAM5u: \"x9r1u3d\",\n    kMwMTN: \"xrpadme\",\n    $$css: true\n  },\n  boxMarkedError: {\n    kWkggS: \"xwi4nbo\",\n    kVAM5u: \"x9r1u3d\",\n    kMwMTN: \"x1l7c2jh\",\n    $$css: true\n  },\n  boxUnmarkedActive: {\n    kVAM5u: \"x1pacwz9\",\n    $$css: true\n  },\n  boxUnmarkedDisabled: {\n    kVAM5u: \"xp1r3on\",\n    $$css: true\n  },\n  boxUnmarkedError: {\n    kVAM5u: \"xx78ee7\",\n    $$css: true\n  },\n  control: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kZKoxP: \"x1vqgdyp\",\n    kaIpWk: \"x3y1ksm\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x139gbkf\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x78zum5\",\n    kmuXW: \"x2lah0s\",\n    kzqmXN: \"x100vrsf\",\n    kjj79g: \"xl56j7k\",\n    kVAEAm: \"x1n2onr6\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"x15406qy\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  controlDisabled: {\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  controlFocused: {\n    kjBf7l: \"xrgy624\",\n    kInvED: \"x1hl8ikr\",\n    k3XXqK: \"xaatb59\",\n    kMeerF: \"x1de99jn\",\n    $$css: true\n  },\n  controlReadOnly: {\n    kkrTdU: \"xt0e3qv\",\n    $$css: true\n  }\n};\n\n// The state layer's colour follows the box: on surface over an unmarked box\n// and primary over a marked one while hovered, the two swapped once pressed,\n// and error throughout while invalid.\nconst hoverLayers = {\n  error: {\n    kWkggS: \"x55e1u4\",\n    $$css: true\n  },\n  marked: {\n    kWkggS: \"x659ado\",\n    $$css: true\n  },\n  unmarked: {\n    kWkggS: \"x1b18xnh\",\n    $$css: true\n  }\n};\nconst pressedLayers = {\n  error: {\n    kWkggS: \"x3czxiy\",\n    $$css: true\n  },\n  marked: {\n    kWkggS: \"xjeeohs\",\n    $$css: true\n  },\n  unmarked: {\n    kWkggS: \"x1dvjsmr\",\n    $$css: true\n  }\n};\ntype CheckboxProps = {\n  /**\n   * The label, beside the box. A checkbox that a row labels some other way\n   * leaves it out and passes `aria-label` instead.\n   */\n  children?: ReactNode;\n  /**\n   * A hint under the label. Replaced by `error` when there is one, so the\n   * two never stack.\n   */\n  description?: string;\n  /**\n   * The problem with the current value, in words. Its presence is what puts\n   * the checkbox in its error state — the message, the error colours and\n   * `aria-invalid` all follow from it.\n   */\n  error?: string;\n} & Omit<RACCheckboxFieldProps, 'children' | 'isInvalid' | 'validationBehavior'>;\ntype Ripple = ReturnType<typeof useRipple<HTMLSpanElement>>;\ntype Tone = 'error' | 'marked' | 'unmarked';\n\n// What the label draws, chosen from the render state React Aria hands it.\n// Built by a call rather than written inline at the prop, which is what\n// react-perf's no-new-function-as-prop is after; the React Compiler memoises\n// the result on its inputs. The ripple's handlers and surface go on the\n// control while the checkbox can change, and are left off while it cannot,\n// since a press that changes nothing should not look like one.\nfunction buttonContent(children: ReactNode, ripple: Ripple) {\n  return (state: CheckboxButtonRenderProps) => {\n    const marked = state.isSelected || state.isIndeterminate;\n    const interactive = !state.isDisabled && !state.isReadOnly;\n    const tone: Tone = state.isInvalid ? 'error' : marked ? 'marked' : 'unmarked';\n    const active = state.isHovered || state.isPressed || state.isFocusVisible;\n    return <>\n        <span {...interactive ? ripple.handlers : {}} {...stylex.props(styles.control, state.isReadOnly && styles.controlReadOnly, state.isDisabled && styles.controlDisabled, interactive && state.isHovered && hoverLayers[tone], interactive && state.isPressed && pressedLayers[tone], state.isFocusVisible && styles.controlFocused)}>\n          <span {...stylex.props(styles.box, marked && styles.boxMarked, !marked && state.isInvalid && styles.boxUnmarkedError, !marked && !state.isInvalid && interactive && active && styles.boxUnmarkedActive, marked && state.isInvalid && styles.boxMarkedError, state.isDisabled && (marked ? styles.boxMarkedDisabled : styles.boxUnmarkedDisabled))}>\n            {state.isIndeterminate ? <IndeterminateGlyph className=\"xmix8c7 x1lliihq x1xp8n7a\" /> : state.isSelected ? <CheckGlyph className=\"xmix8c7 x1lliihq x1xp8n7a\" /> : null}\n          </span>\n          {interactive ? ripple.surface : null}\n        </span>\n        {children === undefined ? null : <span {...{\n        0: {\n          className: \"x9f619 x139gbkf x1ypdohk x16svsjw x1848etk x1c52epr x1qn8t5l xh7dzej x1cmllll\"\n        },\n        2: {\n          className: \"x9f619 x139gbkf x16svsjw x1848etk x1c52epr x1qn8t5l xh7dzej x1cmllll xt0e3qv\"\n        },\n        1: {\n          className: \"x9f619 x16svsjw x1848etk x1c52epr x1qn8t5l xh7dzej x1cmllll x1xj74d8 x1h6gzvc\"\n        },\n        3: {\n          className: \"x9f619 x16svsjw x1848etk x1c52epr x1qn8t5l xh7dzej x1cmllll x1xj74d8 x1h6gzvc\"\n        }\n      }[!!state.isReadOnly << 1 | !!state.isDisabled << 0]}>\n            {children}\n          </span>}\n      </>;\n  };\n}\n\n/**\n * A checkbox with its label, and optionally a description or an error under\n * it. Its state is React Aria's: pass `isSelected` with `onChange` to\n * control it, or `defaultSelected` to let it keep its own; `isIndeterminate`\n * draws the dash for a box that stands for a partly selected set. Inside a\n * `CheckboxGroup` it takes its `value` and the group's selection instead.\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 Checkbox({\n  children,\n  description,\n  error,\n  ...props\n}: CheckboxProps) {\n  const ripple = useRipple<HTMLSpanElement>();\n  const validationBehavior = useFieldValidationBehavior();\n  return <CheckboxField isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles({\n    className: \"x7a106z x9f619 xpr5407 xrvj5dj x1pmbctz\"\n  }, props)}>\n      <CheckboxButton className=\"xjp7ctv\">\n        {buttonContent(children, ripple)}\n      </CheckboxButton>\n      <div className=\"x1xdureb\">\n        <FieldMessage description={description} error={error} inset={false} />\n      </div>\n    </CheckboxField>;\n}\nexport type { CheckboxProps };\nexport default Checkbox;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ReactNode","CheckboxButtonRenderProps","CheckboxFieldProps","RACCheckboxFieldProps","stylex","CheckboxButton","CheckboxField","ControlLabel","controlStyles","FieldMessage","invalidFrom","useFieldValidationBehavior","CheckGlyph","IndeterminateGlyph","useRipple","focus","mergeStatefulStyles","colors","motion","stateLayerOpacity","styles","box","kGNEyG","kWkggS","kZKoxP","kVAM5u","kaIpWk","ksu8eU","kMzoRj","kB7OPa","kMwMTN","k1xSpc","kzqmXN","kjj79g","kIyJzY","k1ekBW","kAMwcw","$$css","boxMarked","boxMarkedDisabled","boxMarkedError","boxUnmarkedActive","boxUnmarkedDisabled","boxUnmarkedError","control","hoverLayers","error","marked","unmarked","pressedLayers","CheckboxProps","children","description","Omit","Ripple","ReturnType","HTMLSpanElement","Tone","buttonContent","ripple","state","isSelected","isIndeterminate","interactive","isDisabled","isReadOnly","tone","isInvalid","active","isHovered","isPressed","isFocusVisible","handlers","props","disc","controlReadOnly","controlDisabled","ringVisible","surface","Checkbox","t0","$","_c","validationBehavior","T0","t1","t2","field","t3","t4","t5","Symbol","for","messages","t6","t7"],"sources":["../../../src/components/checkbox/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { CheckboxButtonRenderProps, CheckboxFieldProps as RACCheckboxFieldProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { CheckboxButton, CheckboxField } from 'react-aria-components';\nimport { ControlLabel } from '../../control';\nimport { controlStyles } from '../../control/styles';\nimport { FieldMessage } from '../../field';\nimport { invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { CheckGlyph, IndeterminateGlyph } from '../../glyphs';\nimport { useRipple } from '../../hooks/useRipple';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, stateLayerOpacity } from '../../tokens/design.tokens.stylex';\n\n// The checkbox page: an 18dp box with a 2dp corner and an 18dp glyph, inside\n// a 40dp state layer, with a 48dp target. Unselected, the box is a 2dp rule\n// in on surface variant that turns on surface while hovered, pressed or\n// focused; selected or indeterminate, it fills with primary and the glyph\n// takes on primary. The error pair is error and on error, and disabled is\n// on surface at the disabled opacity for the rule or the fill, with the\n// glyph in surface. The state layer is on surface over an unselected box and\n// primary over a selected one while hovered, and the two swap once pressed.\n//\n// React Aria's `CheckboxField` is the root, a div holding the description\n// and error slots; its `CheckboxButton` is the label around a visually\n// hidden input, and everything drawn is that label's children, chosen from\n// the render state React Aria hands them. The field is a two-column grid —\n// the control, then the text — and the label is `display: contents`, so the\n// control and the label text each take a column and the description and\n// error line up under the text rather than under the box.\n//\n// The adjacent label is body-large on surface, which the page keeps the same\n// whether or not the box is selected. The corner is a literal: the page's\n// 2dp is a step the shape scale does not carry.\nconst styles = {\n  box: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kZKoxP: \"xmix8c7\",\n    kVAM5u: \"x1is7jjm\",\n    kaIpWk: \"x1cum3z5\",\n    ksu8eU: \"x1y0btm7\",\n    kMzoRj: \"xdh2fpr\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"xwjo7ld\",\n    k1xSpc: \"x78zum5\",\n    kzqmXN: \"x1xp8n7a\",\n    kjj79g: \"xl56j7k\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"xts7igz\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  boxMarked: {\n    kWkggS: \"xnety89\",\n    kVAM5u: \"x9r1u3d\",\n    $$css: true\n  },\n  boxMarkedDisabled: {\n    kWkggS: \"x1crcgwy\",\n    kVAM5u: \"x9r1u3d\",\n    kMwMTN: \"xrpadme\",\n    $$css: true\n  },\n  boxMarkedError: {\n    kWkggS: \"xwi4nbo\",\n    kVAM5u: \"x9r1u3d\",\n    kMwMTN: \"x1l7c2jh\",\n    $$css: true\n  },\n  boxUnmarkedActive: {\n    kVAM5u: \"x1pacwz9\",\n    $$css: true\n  },\n  boxUnmarkedDisabled: {\n    kVAM5u: \"xp1r3on\",\n    $$css: true\n  },\n  boxUnmarkedError: {\n    kVAM5u: \"xx78ee7\",\n    $$css: true\n  },\n  control: {\n    kMwMTN: \"x139gbkf\",\n    $$css: true\n  }\n};\n\n// The state layer's colour follows the box: on surface over an unmarked box\n// and primary over a marked one while hovered, the two swapped once pressed,\n// and error throughout while invalid.\nconst hoverLayers = {\n  error: {\n    kWkggS: \"x55e1u4\",\n    $$css: true\n  },\n  marked: {\n    kWkggS: \"x659ado\",\n    $$css: true\n  },\n  unmarked: {\n    kWkggS: \"x1b18xnh\",\n    $$css: true\n  }\n};\nconst pressedLayers = {\n  error: {\n    kWkggS: \"x3czxiy\",\n    $$css: true\n  },\n  marked: {\n    kWkggS: \"xjeeohs\",\n    $$css: true\n  },\n  unmarked: {\n    kWkggS: \"x1dvjsmr\",\n    $$css: true\n  }\n};\ntype CheckboxProps = {\n  /**\n   * The label, beside the box. A checkbox that a row labels some other way\n   * leaves it out and passes `aria-label` instead.\n   */\n  children?: ReactNode;\n  /**\n   * A hint under the label. Replaced by `error` when there is one, so the\n   * two never stack.\n   */\n  description?: string;\n  /**\n   * The problem with the current value, in words. Its presence is what puts\n   * the checkbox in its error state — the message, the error colours and\n   * `aria-invalid` all follow from it.\n   */\n  error?: string;\n} & Omit<RACCheckboxFieldProps, 'children' | 'isInvalid' | 'validationBehavior'>;\ntype Ripple = ReturnType<typeof useRipple<HTMLSpanElement>>;\ntype Tone = 'error' | 'marked' | 'unmarked';\n\n// What the label draws, chosen from the render state React Aria hands it.\n// Built by a call rather than written inline at the prop, which is what\n// react-perf's no-new-function-as-prop is after; the React Compiler memoises\n// the result on its inputs. The ripple's handlers and surface go on the\n// control while the checkbox can change, and are left off while it cannot,\n// since a press that changes nothing should not look like one.\nfunction buttonContent(children: ReactNode, ripple: Ripple) {\n  return (state: CheckboxButtonRenderProps) => {\n    const marked = state.isSelected || state.isIndeterminate;\n    const interactive = !state.isDisabled && !state.isReadOnly;\n    const tone: Tone = state.isInvalid ? 'error' : marked ? 'marked' : 'unmarked';\n    const active = state.isHovered || state.isPressed || state.isFocusVisible;\n    return <>\n        <span {...interactive ? ripple.handlers : {}} {...stylex.props(controlStyles.disc, styles.control, state.isReadOnly && controlStyles.controlReadOnly, state.isDisabled && controlStyles.controlDisabled, interactive && state.isHovered && hoverLayers[tone], interactive && state.isPressed && pressedLayers[tone], state.isFocusVisible && focus.ringVisible)}>\n          <span {...stylex.props(styles.box, marked && styles.boxMarked, !marked && state.isInvalid && styles.boxUnmarkedError, !marked && !state.isInvalid && interactive && active && styles.boxUnmarkedActive, marked && state.isInvalid && styles.boxMarkedError, state.isDisabled && (marked ? styles.boxMarkedDisabled : styles.boxUnmarkedDisabled))}>\n            {state.isIndeterminate ? <IndeterminateGlyph className=\"xmix8c7 x1lliihq x1xp8n7a\" /> : state.isSelected ? <CheckGlyph className=\"xmix8c7 x1lliihq x1xp8n7a\" /> : null}\n          </span>\n          {interactive ? ripple.surface : null}\n        </span>\n        <ControlLabel state={state}>{children}</ControlLabel>\n      </>;\n  };\n}\n\n/**\n * A checkbox with its label, and optionally a description or an error under\n * it. Its state is React Aria's: pass `isSelected` with `onChange` to\n * control it, or `defaultSelected` to let it keep its own; `isIndeterminate`\n * draws the dash for a box that stands for a partly selected set. Inside a\n * `CheckboxGroup` it takes its `value` and the group's selection instead.\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 Checkbox({\n  children,\n  description,\n  error,\n  ...props\n}: CheckboxProps) {\n  const ripple = useRipple<HTMLSpanElement>();\n  const validationBehavior = useFieldValidationBehavior();\n  return <CheckboxField isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(controlStyles.field), props)}>\n      <CheckboxButton className=\"xjp7ctv\">\n        {buttonContent(children, ripple)}\n      </CheckboxButton>\n      <div {...stylex.props(controlStyles.messages)}>\n        <FieldMessage description={description} error={error} inset={false} />\n      </div>\n    </CheckboxField>;\n}\nexport type { CheckboxProps };\nexport default Checkbox;"],"mappings":"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"}

package/dist/components/checkbox-group/index.js

@@ -1,5 +1,7 @@
+import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { mergeStatefulStyles } from "../../styles/merge.js";
 import { invalidFrom, useFieldValidationBehavior } from "../../field/root.js";
+import { groupStyles } from "../../field/styles.js";
 import { FieldLabel, FieldMessage } from "../../field/index.js";
 import { c } from "react/compiler-runtime";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -17,7 +19,7 @@ import { CheckboxGroup } from "react-aria-components";
 */
 function CheckboxGroup$1(t0) {
 	const $ = c(14);
-	const { children, description, error, label, ...props } = t0;
+	const { children, description, error, label, ...props$1 } = t0;
 	const validationBehavior = useFieldValidationBehavior();
 	const T0 = CheckboxGroup;
 	let t1;
@@ -26,7 +28,7 @@ function CheckboxGroup$1(t0) {
 		$[0] = error;
 		$[1] = t1;
 	} else t1 = $[1];
-	const t2 = mergeStatefulStyles({ className: "x9f619 x78zum5 xdt5ytf xzoy561" }, props);
+	const t2 = mergeStatefulStyles(props(groupStyles.root), props$1);
 	let t3;
 	if ($[2] !== children || $[3] !== description || $[4] !== error || $[5] !== label) {
 		t3 = groupContent(label, children, description, error);
@@ -37,16 +39,16 @@ function CheckboxGroup$1(t0) {
 		$[6] = t3;
 	} else t3 = $[6];
 	let t4;
-	if ($[7] !== T0 || $[8] !== props || $[9] !== t1 || $[10] !== t2 || $[11] !== t3 || $[12] !== validationBehavior) {
+	if ($[7] !== T0 || $[8] !== props$1 || $[9] !== t1 || $[10] !== t2 || $[11] !== t3 || $[12] !== validationBehavior) {
 		t4 = /* @__PURE__ */ jsx(T0, {
 			isInvalid: t1,
 			validationBehavior,
-			...props,
+			...props$1,
 			...t2,
 			children: t3
 		});
 		$[7] = T0;
-		$[8] = props;
+		$[8] = props$1;
 		$[9] = t1;
 		$[10] = t2;
 		$[11] = t3;
@@ -59,7 +61,7 @@ function groupContent(label, children, description, error) {
 	return (state) => /* @__PURE__ */ jsxs(Fragment, { children: [
 		/* @__PURE__ */ jsx(FieldLabel, {
 			state,
-			className: "xkknnkr x14zspaw x1v9cpvo x155f00i x1lz68p4",
+			variant: "group",
 			children: label
 		}),
 		/* @__PURE__ */ jsx("div", {

package/dist/components/checkbox-group/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","CheckboxGroupRenderProps","CheckboxGroupProps","RACCheckboxGroupProps","stylex","CheckboxGroup","RACCheckboxGroup","FieldLabel","FieldMessage","invalidFrom","useFieldValidationBehavior","mergeStatefulStyles","spacing","typography","children","description","error","label","Omit","t0","$","_c","props","validationBehavior","T0","t1","t2","className","t3","groupContent","t4","state"],"sources":["../../../src/components/checkbox-group/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { CheckboxGroupRenderProps, CheckboxGroupProps as RACCheckboxGroupProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { CheckboxGroup as RACCheckboxGroup } from 'react-aria-components';\nimport { FieldLabel, FieldMessage } from '../../field';\nimport { invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { spacing, typography } from '../../tokens/design.tokens.stylex';\n\n// A labelled set of checkboxes sharing one value. The checkbox page draws\n// the boxes; the group is what the ARIA pattern asks for around them — a\n// group named by its label, described by its description, and invalid as a\n// whole — and its label, description and error are the field chrome's, so a\n// group reads like the fields beside it. The label is label-large, the role\n// a field's label takes at rest, since a group has no box to float it in.\n\ntype CheckboxGroupProps = {\n  /** The checkboxes, each with a `value` of its own. */\n  children?: ReactNode;\n  /**\n   * A hint under the group. Replaced by `error` when there is one, so the\n   * two never stack.\n   */\n  description?: string;\n  /**\n   * The problem with the current selection, in words. Its presence is what\n   * puts the group in its error state — the message, the boxes' error\n   * colours and `aria-invalid` all follow from it.\n   */\n  error?: string;\n  /**\n   * What the group is for. Required rather than optional: a group of\n   * checkboxes with no name is a set of boxes a screen reader cannot\n   * introduce.\n   */\n  label: string;\n} & Omit<RACCheckboxGroupProps, 'children' | 'isInvalid' | 'validationBehavior'>;\n\n/**\n * A labelled set of checkboxes with one value between them. The value is\n * React Aria's: pass `value` with `onChange` to control it, or\n * `defaultValue` to let the group keep its own, and each `Checkbox` inside\n * names the entry it stands for with `value`. Disabled, read-only and the\n * error state reach every checkbox from here.\n *\n * The call site's `className` and `style` land on the group as a whole,\n * which is the element a layout positions.\n */\nfunction CheckboxGroup({\n  children,\n  description,\n  error,\n  label,\n  ...props\n}: CheckboxGroupProps) {\n  const validationBehavior = useFieldValidationBehavior();\n  return <RACCheckboxGroup isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles({\n    className: \"x9f619 x78zum5 xdt5ytf xzoy561\"\n  }, props)}>\n      {groupContent(label, children, description, error)}\n    </RACCheckboxGroup>;\n}\n\n// Built by a call rather than written inline at the prop, which is what\n// react-perf's no-new-function-as-prop is after; the React Compiler memoises\n// the result on its inputs. The label takes the group's render state, so\n// its colour follows disabled and invalid the way a field's follows its box.\nfunction groupContent(label: string, children: ReactNode, description: string | undefined, error: string | undefined) {\n  return (state: CheckboxGroupRenderProps) => <>\n      <FieldLabel state={state} className=\"xkknnkr x14zspaw x1v9cpvo x155f00i x1lz68p4\">\n        {label}\n      </FieldLabel>\n      <div className=\"x78zum5 xdt5ytf\">{children}</div>\n      <FieldMessage description={description} error={error} inset={false} />\n    </>;\n}\nexport type { CheckboxGroupProps };\nexport default CheckboxGroup;"],"mappings":";;;;;;;;;;;;;;;;;AAiDA,SAAAK,gBAAAc,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAuB,MAAA,EAAAP,UAAAC,aAAAC,OAAAC,OAAA,GAAAK,UAAAH;CAOrB,MAAAI,qBAA2Bb,2BAA2B;CAC9C,MAAAc,KAAAlB;CAAgB,IAAAmB;CAAA,IAAAL,EAAA,OAAAJ,OAAA;EAAYS,KAAAhB,YAAYO,KAAK;EAACI,EAAA,KAAAJ;EAAAI,EAAA,KAAAK;CAAA,OAAAA,KAAAL,EAAA;CAAyD,MAAAM,KAAAf,oBAAoB,EAAAgB,WACtH,iCACb,GAAGL,KAAK;CAAC,IAAAM;CAAA,IAAAR,EAAA,OAAAN,YAAAM,EAAA,OAAAL,eAAAK,EAAA,OAAAJ,SAAAI,EAAA,OAAAH,OAAA;EACJW,KAAAC,aAAaZ,OAAOH,UAAUC,aAAaC,KAAK;EAACI,EAAA,KAAAN;EAAAM,EAAA,KAAAL;EAAAK,EAAA,KAAAJ;EAAAI,EAAA,KAAAH;EAAAG,EAAA,KAAAQ;CAAA,OAAAA,KAAAR,EAAA;CAAA,IAAAU;CAAA,IAAAV,EAAA,OAAAI,MAAAJ,EAAA,OAAAE,SAAAF,EAAA,OAAAK,MAAAL,EAAA,QAAAM,MAAAN,EAAA,QAAAQ,MAAAR,EAAA,QAAAG,oBAAA;EAH/CO,KAAA,oBAAC,IAAD;GAA6B,WAAAL;GAAwCF;GAAkB,GAAMD;GAAK,GAAMI;GAG1GE,UAAAA;EAHmB,CAAA;EAIHR,EAAA,KAAAI;EAAAJ,EAAA,KAAAE;EAAAF,EAAA,KAAAK;EAAAL,EAAA,MAAAM;EAAAN,EAAA,MAAAQ;EAAAR,EAAA,MAAAG;EAAAH,EAAA,MAAAU;CAAA,OAAAA,KAAAV,EAAA;CAAA,OAJdU;AAIc;AAOvB,SAASD,aAAaZ,OAAeH,UAAqBC,aAAiCC,OAA2B;CACpH,QAAQe,UAAoC,qBAAA,UAAA,EAAA,UAAA;EACxC,oBAAC,YAAD;GAAmBA;GAAO,WAAU;GACjCd,UAAAA;EACS,CAAA;EACZ,oBAAC,OAAD;GAAK,WAAU;GAAmBH;EAAc,CAAA;EAChD,oBAAC,cAAD;GAA2BC;GAAoBC;GAAO,OAAO;EAAM,CAAA;CACrE,EAAA,CAAA;AACJ"}
+{"version":3,"file":"index.js","names":["ReactNode","CheckboxGroupRenderProps","CheckboxGroupProps","RACCheckboxGroupProps","stylex","CheckboxGroup","RACCheckboxGroup","FieldLabel","FieldMessage","invalidFrom","useFieldValidationBehavior","groupStyles","mergeStatefulStyles","children","description","error","label","Omit","t0","$","_c","props","validationBehavior","T0","t1","t2","root","t3","groupContent","t4","state"],"sources":["../../../src/components/checkbox-group/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { CheckboxGroupRenderProps, CheckboxGroupProps as RACCheckboxGroupProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { CheckboxGroup as RACCheckboxGroup } from 'react-aria-components';\nimport { FieldLabel, FieldMessage } from '../../field';\nimport { invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { groupStyles } from '../../field/styles';\nimport { mergeStatefulStyles } from '../../styles/merge';\n\n// A labelled set of checkboxes sharing one value. The checkbox page draws\n// the boxes; the group is what the ARIA pattern asks for around them — a\n// group named by its label, described by its description, and invalid as a\n// whole — and its label, description and error are the field chrome's, so a\n// group reads like the fields beside it. The label is label-large, the role\n// a field's label takes at rest, since a group has no box to float it in.\n\ntype CheckboxGroupProps = {\n  /** The checkboxes, each with a `value` of its own. */\n  children?: ReactNode;\n  /**\n   * A hint under the group. Replaced by `error` when there is one, so the\n   * two never stack.\n   */\n  description?: string;\n  /**\n   * The problem with the current selection, in words. Its presence is what\n   * puts the group in its error state — the message, the boxes' error\n   * colours and `aria-invalid` all follow from it.\n   */\n  error?: string;\n  /**\n   * What the group is for. Required rather than optional: a group of\n   * checkboxes with no name is a set of boxes a screen reader cannot\n   * introduce.\n   */\n  label: string;\n} & Omit<RACCheckboxGroupProps, 'children' | 'isInvalid' | 'validationBehavior'>;\n\n/**\n * A labelled set of checkboxes with one value between them. The value is\n * React Aria's: pass `value` with `onChange` to control it, or\n * `defaultValue` to let the group keep its own, and each `Checkbox` inside\n * names the entry it stands for with `value`. Disabled, read-only and the\n * error state reach every checkbox from here.\n *\n * The call site's `className` and `style` land on the group as a whole,\n * which is the element a layout positions.\n */\nfunction CheckboxGroup({\n  children,\n  description,\n  error,\n  label,\n  ...props\n}: CheckboxGroupProps) {\n  const validationBehavior = useFieldValidationBehavior();\n  return <RACCheckboxGroup isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(groupStyles.root), props)}>\n      {groupContent(label, children, description, error)}\n    </RACCheckboxGroup>;\n}\n\n// Built by a call rather than written inline at the prop, which is what\n// react-perf's no-new-function-as-prop is after; the React Compiler memoises\n// the result on its inputs. The label takes the group's render state, so\n// its colour follows disabled and invalid the way a field's follows its box.\nfunction groupContent(label: string, children: ReactNode, description: string | undefined, error: string | undefined) {\n  return (state: CheckboxGroupRenderProps) => <>\n      <FieldLabel state={state} variant=\"group\">\n        {label}\n      </FieldLabel>\n      <div className=\"x78zum5 xdt5ytf\">{children}</div>\n      <FieldMessage description={description} error={error} inset={false} />\n    </>;\n}\nexport type { CheckboxGroupProps };\nexport default CheckboxGroup;"],"mappings":";;;;;;;;;;;;;;;;;;;AAgDA,SAAAK,gBAAAa,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAuB,MAAA,EAAAP,UAAAC,aAAAC,OAAAC,OAAA,GAAAK,YAAAH;CAOrB,MAAAI,qBAA2BZ,2BAA2B;CAC9C,MAAAa,KAAAjB;CAAgB,IAAAkB;CAAA,IAAAL,EAAA,OAAAJ,OAAA;EAAYS,KAAAf,YAAYM,KAAK;EAACI,EAAA,KAAAJ;EAAAI,EAAA,KAAAK;CAAA,OAAAA,KAAAL,EAAA;CAAyD,MAAAM,KAAAb,oBAAoBR,MAAaO,YAAWe,IAAK,GAAGL,OAAK;CAAC,IAAAM;CAAA,IAAAR,EAAA,OAAAN,YAAAM,EAAA,OAAAL,eAAAK,EAAA,OAAAJ,SAAAI,EAAA,OAAAH,OAAA;EACpKW,KAAAC,aAAaZ,OAAOH,UAAUC,aAAaC,KAAK;EAACI,EAAA,KAAAN;EAAAM,EAAA,KAAAL;EAAAK,EAAA,KAAAJ;EAAAI,EAAA,KAAAH;EAAAG,EAAA,KAAAQ;CAAA,OAAAA,KAAAR,EAAA;CAAA,IAAAU;CAAA,IAAAV,EAAA,OAAAI,MAAAJ,EAAA,OAAAE,WAAAF,EAAA,OAAAK,MAAAL,EAAA,QAAAM,MAAAN,EAAA,QAAAQ,MAAAR,EAAA,QAAAG,oBAAA;EAD/CO,KAAA,oBAAC,IAAD;GAA6B,WAAAL;GAAwCF;GAAkB,GAAMD;GAAK,GAAMI;GAC1GE,UAAAA;EADmB,CAAA;EAEHR,EAAA,KAAAI;EAAAJ,EAAA,KAAAE;EAAAF,EAAA,KAAAK;EAAAL,EAAA,MAAAM;EAAAN,EAAA,MAAAQ;EAAAR,EAAA,MAAAG;EAAAH,EAAA,MAAAU;CAAA,OAAAA,KAAAV,EAAA;CAAA,OAFdU;AAEc;AAOvB,SAASD,aAAaZ,OAAeH,UAAqBC,aAAiCC,OAA2B;CACpH,QAAQe,UAAoC,qBAAA,UAAA,EAAA,UAAA;EACxC,oBAAC,YAAD;GAAmBA;GAAO,SAAQ;GAC/Bd,UAAAA;EACS,CAAA;EACZ,oBAAC,OAAD;GAAK,WAAU;GAAmBH;EAAc,CAAA;EAChD,oBAAC,cAAD;GAA2BC;GAAoBC;GAAO,OAAO;EAAM,CAAA;CACrE,EAAA,CAAA;AACJ"}

package/dist/components/chip/index.js

@@ -1,5 +1,6 @@
 import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { mergeStatefulStyles } from "../../styles/merge.js";
+import { focus } from "../../styles/focus.js";
 import { chipStyles } from "../../chip/styles.js";
 import { c } from "react/compiler-runtime";
 import { jsx } from "react/jsx-runtime";
@@ -50,7 +51,7 @@ function Chip(t0) {
 	return t3;
 }
 function propsFor(state) {
-	return props(chipStyles.base, state.isSelected ? chipStyles.selected : chipStyles.unselected, state.isDisabled && chipStyles.disabled, state.isDisabled && (state.isSelected ? chipStyles.disabledSelected : chipStyles.disabledUnselected));
+	return props(chipStyles.base, focus.ring, state.isSelected ? chipStyles.selected : chipStyles.unselected, state.isDisabled && chipStyles.disabled, state.isDisabled && (state.isSelected ? chipStyles.disabledSelected : chipStyles.disabledUnselected));
 }
 //#endregion
 export { Chip as default };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ToggleButtonProps","ToggleButtonRenderProps","stylex","ToggleButton","chipStyles","mergeStatefulStyles","ChipProps","Chip","t0","$","_c","T0","children","t1","t2","t3","props","propsFor","state","base","isSelected","selected","unselected","isDisabled","disabled","disabledSelected","disabledUnselected"],"sources":["../../../src/components/chip/index.tsx"],"sourcesContent":["import type { ToggleButtonProps, ToggleButtonRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { ToggleButton } from 'react-aria-components';\nimport { chipStyles } from '../../chip/styles';\nimport { mergeStatefulStyles } from '../../styles/merge';\n\n// The pill, its two containers and its disabled treatment are the chip\n// module's in `src/chip`, shared with the chips a ChipGroup draws; what is\n// here is React Aria's `ToggleButton` around them, which is what makes a\n// standalone chip a two-state button rather than one of a set.\n\ntype ChipProps = ToggleButtonProps;\n\n/**\n * A chip is a two-state button, so its selected state is React Aria's\n * `isSelected`: pass it with `onChange` to control it, or `defaultSelected` to\n * let it keep its own state. Selection is announced through `aria-pressed`\n * rather than a role of its own.\n */\nfunction Chip({\n  children,\n  ...props\n}: ChipProps) {\n  return <ToggleButton {...props} {...mergeStatefulStyles(propsFor, props)}>\n      {children}\n    </ToggleButton>;\n}\n\n// StyleX has no way to target [data-selected] on the element it is styling,\n// so the selected styles cannot be chosen in CSS. React Aria's answer is to\n// let className and style be functions of the component's own render state,\n// which is what this is — and it is why an uncontrolled chip styles itself\n// correctly without this component keeping a copy of the state.\n//\n// mergeStatefulStyles takes the function rather than a computed result for\n// exactly that reason, and combines it with whatever the call site passed.\nfunction propsFor(state: ToggleButtonRenderProps) {\n  return stylex.props(chipStyles.base, state.isSelected ? chipStyles.selected : chipStyles.unselected, state.isDisabled && chipStyles.disabled, state.isDisabled && (state.isSelected ? chipStyles.disabledSelected : chipStyles.disabledUnselected));\n}\nexport type { ChipProps };\nexport default Chip;"],"mappings":";;;;;;;;;;;;;AAmBA,SAAAO,KAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAL,EAAA,OAAAD,IAAA;EAAc,MAAA,EAAAI,UAAAG,IAAA,GAAAC,UAAAR;EAAAI,WAAAG;EAIJJ,KAAAR;EAAiBa,KAAAA;EAAWF,KAAAT,oBAAoBY,UAAUD,KAAK;EAACP,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;CAAA,OAAA;EAAAH,KAAAF,EAAA;EAAAG,WAAAH,EAAA;EAAAI,KAAAJ,EAAA;EAAAK,KAAAL,EAAA;CAAA;CAAA,IAAAM;CAAA,IAAAN,EAAA,OAAAE,MAAAF,EAAA,OAAAG,YAAAH,EAAA,OAAAI,MAAAJ,EAAA,OAAAK,IAAA;EAAjEC,KAAA,oBAAC,IAAD;GAAa,GAAKC;GAAK,GAAMF;GAC/BF;EADe,CAAA;EAEHH,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;EAAAL,EAAA,KAAAM;CAAA,OAAAA,KAAAN,EAAA;CAAA,OAFVM;AAEU;AAWnB,SAASE,SAASC,OAAgC;CAChD,OAAOhB,MAAaE,WAAWe,MAAMD,MAAME,aAAahB,WAAWiB,WAAWjB,WAAWkB,YAAYJ,MAAMK,cAAcnB,WAAWoB,UAAUN,MAAMK,eAAeL,MAAME,aAAahB,WAAWqB,mBAAmBrB,WAAWsB,mBAAmB;AACpP"}
+{"version":3,"file":"index.js","names":["ToggleButtonProps","ToggleButtonRenderProps","stylex","ToggleButton","chipStyles","focus","mergeStatefulStyles","ChipProps","Chip","t0","$","_c","T0","children","t1","t2","t3","props","propsFor","state","base","ring","isSelected","selected","unselected","isDisabled","disabled","disabledSelected","disabledUnselected"],"sources":["../../../src/components/chip/index.tsx"],"sourcesContent":["import type { ToggleButtonProps, ToggleButtonRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { ToggleButton } from 'react-aria-components';\nimport { chipStyles } from '../../chip/styles';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\n\n// The pill, its two containers and its disabled treatment are the chip\n// module's in `src/chip`, shared with the chips a ChipGroup draws; what is\n// here is React Aria's `ToggleButton` around them, which is what makes a\n// standalone chip a two-state button rather than one of a set.\n\ntype ChipProps = ToggleButtonProps;\n\n/**\n * A chip is a two-state button, so its selected state is React Aria's\n * `isSelected`: pass it with `onChange` to control it, or `defaultSelected` to\n * let it keep its own state. Selection is announced through `aria-pressed`\n * rather than a role of its own.\n */\nfunction Chip({\n  children,\n  ...props\n}: ChipProps) {\n  return <ToggleButton {...props} {...mergeStatefulStyles(propsFor, props)}>\n      {children}\n    </ToggleButton>;\n}\n\n// StyleX has no way to target [data-selected] on the element it is styling,\n// so the selected styles cannot be chosen in CSS. React Aria's answer is to\n// let className and style be functions of the component's own render state,\n// which is what this is — and it is why an uncontrolled chip styles itself\n// correctly without this component keeping a copy of the state.\n//\n// mergeStatefulStyles takes the function rather than a computed result for\n// exactly that reason, and combines it with whatever the call site passed.\nfunction propsFor(state: ToggleButtonRenderProps) {\n  return stylex.props(chipStyles.base, focus.ring, state.isSelected ? chipStyles.selected : chipStyles.unselected, state.isDisabled && chipStyles.disabled, state.isDisabled && (state.isSelected ? chipStyles.disabledSelected : chipStyles.disabledUnselected));\n}\nexport type { ChipProps };\nexport default Chip;"],"mappings":";;;;;;;;;;;;;;AAoBA,SAAAQ,KAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAL,EAAA,OAAAD,IAAA;EAAc,MAAA,EAAAI,UAAAG,IAAA,GAAAC,UAAAR;EAAAI,WAAAG;EAIJJ,KAAAT;EAAiBc,KAAAA;EAAWF,KAAAT,oBAAoBY,UAAUD,KAAK;EAACP,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;CAAA,OAAA;EAAAH,KAAAF,EAAA;EAAAG,WAAAH,EAAA;EAAAI,KAAAJ,EAAA;EAAAK,KAAAL,EAAA;CAAA;CAAA,IAAAM;CAAA,IAAAN,EAAA,OAAAE,MAAAF,EAAA,OAAAG,YAAAH,EAAA,OAAAI,MAAAJ,EAAA,OAAAK,IAAA;EAAjEC,KAAA,oBAAC,IAAD;GAAa,GAAKC;GAAK,GAAMF;GAC/BF;EADe,CAAA;EAEHH,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;EAAAL,EAAA,KAAAM;CAAA,OAAAA,KAAAN,EAAA;CAAA,OAFVM;AAEU;AAWnB,SAASE,SAASC,OAAgC;CAChD,OAAOjB,MAAaE,WAAWgB,MAAMf,MAAMgB,MAAMF,MAAMG,aAAalB,WAAWmB,WAAWnB,WAAWoB,YAAYL,MAAMM,cAAcrB,WAAWsB,UAAUP,MAAMM,eAAeN,MAAMG,aAAalB,WAAWuB,mBAAmBvB,WAAWwB,mBAAmB;AAChQ"}

package/dist/components/chip-group/index.js

@@ -1,7 +1,9 @@
 import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { mergeStatefulStyles, mergeStyles } from "../../styles/merge.js";
 import { CloseGlyph } from "../../glyphs/index.js";
+import { focus } from "../../styles/focus.js";
 import { invalidFrom } from "../../field/root.js";
+import { groupStyles } from "../../field/styles.js";
 import { FieldLabel, FieldMessage } from "../../field/index.js";
 import { chipStyles } from "../../chip/styles.js";
 import { c } from "react/compiler-runtime";
@@ -55,7 +57,7 @@ function ChipGroup(t0) {
 	let t1;
 	let t2;
 	if ($[0] !== t0) {
-		const { children: t3, description: t4, error: t5, items: t6, label: t7, removeLabel: t8, renderEmptyState: t9, ...props } = t0;
+		const { children: t3, description: t4, error: t5, items: t6, label: t7, removeLabel: t8, renderEmptyState: t9, ...props$1 } = t0;
 		children = t3;
 		description = t4;
 		error = t5;
@@ -65,8 +67,8 @@ function ChipGroup(t0) {
 		removeLabel = t8 === void 0 ? "Remove" : t8;
 		invalid = invalidFrom(error);
 		T0 = TagGroup;
-		t1 = props;
-		t2 = mergeStyles({ className: "x9f619 x78zum5 xdt5ytf xzoy561" }, props);
+		t1 = props$1;
+		t2 = mergeStyles(props(groupStyles.root), props$1);
 		$[0] = t0;
 		$[1] = T0;
 		$[2] = children;
@@ -97,7 +99,7 @@ function ChipGroup(t0) {
 	if ($[12] !== label || $[13] !== t3) {
 		t4 = /* @__PURE__ */ jsx(FieldLabel, {
 			state: t3,
-			className: "xkknnkr x14zspaw x1v9cpvo x155f00i x1lz68p4",
+			variant: "group",
 			children: label
 		});
 		$[12] = label;
@@ -195,7 +197,7 @@ function ChipGroupChip(t0) {
 	return t4;
 }
 function chipPropsFor(state) {
-	return props(chipStyles.base, state.isSelected ? chipStyles.selected : chipStyles.unselected, state.isDisabled && chipStyles.disabled, state.isDisabled && (state.isSelected ? chipStyles.disabledSelected : chipStyles.disabledUnselected));
+	return props(chipStyles.base, focus.ring, state.isSelected ? chipStyles.selected : chipStyles.unselected, state.isDisabled && chipStyles.disabled, state.isDisabled && (state.isSelected ? chipStyles.disabledSelected : chipStyles.disabledUnselected));
 }
 function textOf(children) {
 	return typeof children === "string" ? children : void 0;

package/dist/components/chip-group/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","TagGroupProps","RACTagGroupProps","TagListProps","RACTagListProps","TagProps","RACTagProps","TagRenderProps","stylex","createContext","useContext","Button","RACButton","Tag","RACTag","TagGroup","RACTagGroup","TagList","RACTagList","chipStyles","FieldLabel","FieldMessage","invalidFrom","CloseGlyph","mergeStatefulStyles","mergeStyles","spacing","typography","ChipGroupChipProps","Omit","children","className","style","ChipGroupProps","description","error","label","removeLabel","Pick","T","chipContent","state","allowsRemoving","props","remove","removeGlyph","RemoveLabelContext","LABEL_STATE_VALID","isInvalid","LABEL_STATE_INVALID","ChipGroup","t0","$","_c","T0","invalid","items","renderEmptyState","t1","t2","t3","t4","t5","t6","t7","t8","t9","undefined","ChipGroupChip","textValue","textOf","chipPropsFor","base","isSelected","selected","unselected","isDisabled","disabled","disabledSelected","disabledUnselected","Chip"],"sources":["../../../src/components/chip-group/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { TagGroupProps as RACTagGroupProps, TagListProps as RACTagListProps, TagProps as RACTagProps, TagRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { createContext, useContext } from 'react';\nimport { Button as RACButton, Tag as RACTag, TagGroup as RACTagGroup, TagList as RACTagList } from 'react-aria-components';\nimport { chipStyles } from '../../chip/styles';\nimport { FieldLabel, FieldMessage } from '../../field';\nimport { invalidFrom } from '../../field/root';\nimport { CloseGlyph } from '../../glyphs';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { spacing, typography } from '../../tokens/design.tokens.stylex';\n\n// The chips page's filter and input chips as a set: one or more chosen from a\n// row, each one removable. The pill is the chip module's in `src/chip`,\n// shared with the standalone Chip, so the two cannot drift; what is here is\n// the group around them.\n//\n// Three things it adds over a row of Chips.\n//\n// **It is a group, not a row of buttons.** React Aria's `TagGroup` names the\n// set, describes it, reports it invalid as a whole, and moves between its\n// chips with the arrow keys rather than making each one a tab stop — which\n// is what a set of a dozen filters needs. The label, the supporting line and\n// the error are the field chrome's, so a group reads like the fields beside\n// it, exactly as CheckboxGroup and RadioGroup do.\n//\n// **A chip can be removed.** Give the group `onRemove` and each chip draws\n// the page's trailing close target, an 18dp glyph in a target of its own so a\n// press there removes rather than toggles. Backspace and Delete remove the\n// focused chip too, which is React Aria's.\n//\n// **Selection is the group's, not each chip's.** `selectionMode` and\n// `selectedKeys` live on the group, so a set that chooses one of its chips\n// and a set that chooses several are the same component with a different\n// word. A chip on its own that toggles nothing else is still Chip.\n//\n// One thing is worth knowing about how this maps onto React Aria. A chip's\n// text value is read off its children and found only when they are a plain\n// string, and a chip here is always an element — the label sits beside a\n// close target. So a plain-string label is passed through as the text value,\n// which is what typeahead and a screen reader's announcement are made of;\n// see ListBox.Item, where the same thing bit.\n\ntype ChipGroupChipProps = Omit<RACTagProps, 'children' | 'className' | 'style'> & {\n  /** The chip's label. */\n  children?: ReactNode;\n  /** A function may compute the class from the chip's render state. */\n  className?: RACTagProps['className'];\n  /** A function may compute the style from the chip's render state. */\n  style?: RACTagProps['style'];\n};\ntype ChipGroupProps<T extends object = object> = {\n  /** The chips, each with an `id` of its own. */\n  children?: ReactNode;\n  /**\n   * A hint under the group. Replaced by `error` when there is one, so the\n   * two never stack.\n   */\n  description?: string;\n  /**\n   * The problem with the current selection, in words. Its presence is what\n   * puts the group in its error state — the message and `aria-invalid` both\n   * follow from it.\n   */\n  error?: string;\n  /**\n   * What the group is for. Required rather than optional: a set of chips\n   * with no name is a row a screen reader cannot introduce.\n   */\n  label: string;\n  /**\n   * What the close target on each chip is called, for a screen reader. React\n   * Aria adds the chip's own label after it, so this is the verb rather than\n   * the whole phrase — \"Remove\" becomes \"Remove First item\".\n   * @default 'Remove'\n   */\n  removeLabel?: string;\n} & Omit<RACTagGroupProps, 'children'> & Pick<RACTagListProps<T>, 'items' | 'renderEmptyState'>;\n\n// What the chip draws, from React Aria's render state. Built by a call rather\n// than written inline at the prop, which is what react-perf's\n// no-new-function-as-prop is after; the React Compiler memoises the result on\n// its inputs.\n//\n// The close target is drawn only where the group allows removing, which React\n// Aria reports rather than the call site saying so on every chip.\nfunction chipContent(children: ReactNode, removeLabel: string) {\n  return (state: TagRenderProps) => <>\n      {children}\n      {state.allowsRemoving ? <RACButton aria-label={removeLabel} slot=\"remove\" {...stylex.props(chipStyles.remove)}>\n          <CloseGlyph {...stylex.props(chipStyles.removeGlyph)} />\n        </RACButton> : null}\n    </>;\n}\n\n/**\n * A labelled set of chips, one or more of which can be chosen, each of which\n * can be removed. Selection is React Aria's: set `selectionMode` to `single`\n * or `multiple` and pass `selectedKeys` with `onSelectionChange` to control\n * it, or `defaultSelectedKeys` to let it keep its own.\n *\n * ```tsx\n * <ChipGroup label=\"Label\" selectionMode=\"multiple\" onRemove={remove}>\n *   <ChipGroup.Chip id=\"first\">First item</ChipGroup.Chip>\n * </ChipGroup>\n * ```\n *\n * Give the group `onRemove` and each chip draws a close target. The arrow\n * keys move between chips, so a set of many is one tab stop rather than many.\n *\n * A chip that toggles nothing else is Chip; this is for a set that shares a\n * value.\n *\n * The call site's `className` and `style` land on the group as a whole,\n * which is the element a layout positions.\n */\n// What each chip calls its close target. A context rather than a prop on the\n// chip, since it is the group's decision and repeating it on every chip is\n// how the two drift.\nconst RemoveLabelContext = createContext('Remove');\n\n// Hoisted so neither is a new object on every render.\nconst LABEL_STATE_VALID = {\n  isInvalid: false\n};\nconst LABEL_STATE_INVALID = {\n  isInvalid: true\n};\nfunction ChipGroup<T extends object = object>({\n  children,\n  description,\n  error,\n  items,\n  label,\n  removeLabel = 'Remove',\n  renderEmptyState,\n  ...props\n}: ChipGroupProps<T>) {\n  const invalid = invalidFrom(error);\n  return <RACTagGroup {...props} {...mergeStyles({\n    className: \"x9f619 x78zum5 xdt5ytf xzoy561\"\n  }, props)}>\n      {/* React Aria's tag group has no disabled state of its own — a chip is\n          disabled through the group's `disabledKeys` — so the label follows\n          validity alone. */}\n      <FieldLabel state={invalid ? LABEL_STATE_INVALID : LABEL_STATE_VALID} className=\"xkknnkr x14zspaw x1v9cpvo x155f00i x1lz68p4\">\n        {label}\n      </FieldLabel>\n      <RemoveLabelContext value={removeLabel}>\n        <RACTagList<T> items={items} renderEmptyState={renderEmptyState} className=\"x9f619 x78zum5 x1a02dak x126z3so x1t137rt\">\n          {children}\n        </RACTagList>\n      </RemoveLabelContext>\n      <FieldMessage description={description} error={error} inset={false} />\n    </RACTagGroup>;\n}\n\n/**\n * One chip. Give every chip an `id` — that is the key selection and removal\n * are reported by.\n */\nfunction ChipGroupChip({\n  children,\n  ...props\n}: ChipGroupChipProps) {\n  const removeLabel = useContext(RemoveLabelContext);\n  return <RACTag textValue={props.textValue ?? textOf(children)} {...props} {...mergeStatefulStyles(chipPropsFor, props)}>\n      {chipContent(children, removeLabel)}\n    </RACTag>;\n}\n\n// StyleX cannot target `[data-selected]` on the element it is styling, so a\n// chip's state comes from the render state React Aria hands its className.\n// Disabled is applied last so it wins over both containers, and StyleX\n// replaces a property whole, so it takes their hover branches with it.\nfunction chipPropsFor(state: TagRenderProps) {\n  return stylex.props(chipStyles.base, state.isSelected ? chipStyles.selected : chipStyles.unselected, state.isDisabled && chipStyles.disabled, state.isDisabled && (state.isSelected ? chipStyles.disabledSelected : chipStyles.disabledUnselected));\n}\n\n// What the chip is worth as text, for the typeahead React Aria drives from a\n// chip's words and for what a screen reader announces. It reads it off the\n// children when they are a string and finds nothing when they are not — and a\n// chip here is always an element once it can be removed. So a plain-string\n// label becomes the text value, and anything else has to say what it is worth\n// through `textValue`.\nfunction textOf(children: ReactNode) {\n  return typeof children === 'string' ? children : undefined;\n}\nChipGroup.Chip = ChipGroupChip;\nexport type { ChipGroupChipProps, ChipGroupProps };\nexport default ChipGroup;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ReactNode","TagGroupProps","RACTagGroupProps","TagListProps","RACTagListProps","TagProps","RACTagProps","TagRenderProps","stylex","createContext","useContext","Button","RACButton","Tag","RACTag","TagGroup","RACTagGroup","TagList","RACTagList","chipStyles","FieldLabel","FieldMessage","invalidFrom","groupStyles","CloseGlyph","focus","mergeStatefulStyles","mergeStyles","spacing","ChipGroupChipProps","Omit","children","className","style","ChipGroupProps","description","error","label","removeLabel","Pick","T","chipContent","state","allowsRemoving","props","remove","removeGlyph","RemoveLabelContext","LABEL_STATE_VALID","isInvalid","LABEL_STATE_INVALID","ChipGroup","t0","$","_c","T0","invalid","items","renderEmptyState","t1","t2","t3","t4","t5","t6","t7","t8","t9","undefined","root","ChipGroupChip","textValue","textOf","chipPropsFor","base","ring","isSelected","selected","unselected","isDisabled","disabled","disabledSelected","disabledUnselected","Chip"],"sources":["../../../src/components/chip-group/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { TagGroupProps as RACTagGroupProps, TagListProps as RACTagListProps, TagProps as RACTagProps, TagRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { createContext, useContext } from 'react';\nimport { Button as RACButton, Tag as RACTag, TagGroup as RACTagGroup, TagList as RACTagList } from 'react-aria-components';\nimport { chipStyles } from '../../chip/styles';\nimport { FieldLabel, FieldMessage } from '../../field';\nimport { invalidFrom } from '../../field/root';\nimport { groupStyles } from '../../field/styles';\nimport { CloseGlyph } from '../../glyphs';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { spacing } from '../../tokens/design.tokens.stylex';\n\n// The chips page's filter and input chips as a set: one or more chosen from a\n// row, each one removable. The pill is the chip module's in `src/chip`,\n// shared with the standalone Chip, so the two cannot drift; what is here is\n// the group around them.\n//\n// Three things it adds over a row of Chips.\n//\n// **It is a group, not a row of buttons.** React Aria's `TagGroup` names the\n// set, describes it, reports it invalid as a whole, and moves between its\n// chips with the arrow keys rather than making each one a tab stop — which\n// is what a set of a dozen filters needs. The label, the supporting line and\n// the error are the field chrome's, so a group reads like the fields beside\n// it, exactly as CheckboxGroup and RadioGroup do.\n//\n// **A chip can be removed.** Give the group `onRemove` and each chip draws\n// the page's trailing close target, an 18dp glyph in a target of its own so a\n// press there removes rather than toggles. Backspace and Delete remove the\n// focused chip too, which is React Aria's.\n//\n// **Selection is the group's, not each chip's.** `selectionMode` and\n// `selectedKeys` live on the group, so a set that chooses one of its chips\n// and a set that chooses several are the same component with a different\n// word. A chip on its own that toggles nothing else is still Chip.\n//\n// One thing is worth knowing about how this maps onto React Aria. A chip's\n// text value is read off its children and found only when they are a plain\n// string, and a chip here is always an element — the label sits beside a\n// close target. So a plain-string label is passed through as the text value,\n// which is what typeahead and a screen reader's announcement are made of;\n// see ListBox.Item, where the same thing bit.\n\ntype ChipGroupChipProps = Omit<RACTagProps, 'children' | 'className' | 'style'> & {\n  /** The chip's label. */\n  children?: ReactNode;\n  /** A function may compute the class from the chip's render state. */\n  className?: RACTagProps['className'];\n  /** A function may compute the style from the chip's render state. */\n  style?: RACTagProps['style'];\n};\ntype ChipGroupProps<T extends object = object> = {\n  /** The chips, each with an `id` of its own. */\n  children?: ReactNode;\n  /**\n   * A hint under the group. Replaced by `error` when there is one, so the\n   * two never stack.\n   */\n  description?: string;\n  /**\n   * The problem with the current selection, in words. Its presence is what\n   * puts the group in its error state — the message and `aria-invalid` both\n   * follow from it.\n   */\n  error?: string;\n  /**\n   * What the group is for. Required rather than optional: a set of chips\n   * with no name is a row a screen reader cannot introduce.\n   */\n  label: string;\n  /**\n   * What the close target on each chip is called, for a screen reader. React\n   * Aria adds the chip's own label after it, so this is the verb rather than\n   * the whole phrase — \"Remove\" becomes \"Remove First item\".\n   * @default 'Remove'\n   */\n  removeLabel?: string;\n} & Omit<RACTagGroupProps, 'children'> & Pick<RACTagListProps<T>, 'items' | 'renderEmptyState'>;\n\n// What the chip draws, from React Aria's render state. Built by a call rather\n// than written inline at the prop, which is what react-perf's\n// no-new-function-as-prop is after; the React Compiler memoises the result on\n// its inputs.\n//\n// The close target is drawn only where the group allows removing, which React\n// Aria reports rather than the call site saying so on every chip.\nfunction chipContent(children: ReactNode, removeLabel: string) {\n  return (state: TagRenderProps) => <>\n      {children}\n      {state.allowsRemoving ? <RACButton aria-label={removeLabel} slot=\"remove\" {...stylex.props(chipStyles.remove)}>\n          <CloseGlyph {...stylex.props(chipStyles.removeGlyph)} />\n        </RACButton> : null}\n    </>;\n}\n\n/**\n * A labelled set of chips, one or more of which can be chosen, each of which\n * can be removed. Selection is React Aria's: set `selectionMode` to `single`\n * or `multiple` and pass `selectedKeys` with `onSelectionChange` to control\n * it, or `defaultSelectedKeys` to let it keep its own.\n *\n * ```tsx\n * <ChipGroup label=\"Label\" selectionMode=\"multiple\" onRemove={remove}>\n *   <ChipGroup.Chip id=\"first\">First item</ChipGroup.Chip>\n * </ChipGroup>\n * ```\n *\n * Give the group `onRemove` and each chip draws a close target. The arrow\n * keys move between chips, so a set of many is one tab stop rather than many.\n *\n * A chip that toggles nothing else is Chip; this is for a set that shares a\n * value.\n *\n * The call site's `className` and `style` land on the group as a whole,\n * which is the element a layout positions.\n */\n// What each chip calls its close target. A context rather than a prop on the\n// chip, since it is the group's decision and repeating it on every chip is\n// how the two drift.\nconst RemoveLabelContext = createContext('Remove');\n\n// Hoisted so neither is a new object on every render.\nconst LABEL_STATE_VALID = {\n  isInvalid: false\n};\nconst LABEL_STATE_INVALID = {\n  isInvalid: true\n};\nfunction ChipGroup<T extends object = object>({\n  children,\n  description,\n  error,\n  items,\n  label,\n  removeLabel = 'Remove',\n  renderEmptyState,\n  ...props\n}: ChipGroupProps<T>) {\n  const invalid = invalidFrom(error);\n  return <RACTagGroup {...props} {...mergeStyles(stylex.props(groupStyles.root), props)}>\n      {/* React Aria's tag group has no disabled state of its own — a chip is\n          disabled through the group's `disabledKeys` — so the label follows\n          validity alone. */}\n      <FieldLabel state={invalid ? LABEL_STATE_INVALID : LABEL_STATE_VALID} variant=\"group\">\n        {label}\n      </FieldLabel>\n      <RemoveLabelContext value={removeLabel}>\n        <RACTagList<T> items={items} renderEmptyState={renderEmptyState} className=\"x9f619 x78zum5 x1a02dak x126z3so x1t137rt\">\n          {children}\n        </RACTagList>\n      </RemoveLabelContext>\n      <FieldMessage description={description} error={error} inset={false} />\n    </RACTagGroup>;\n}\n\n/**\n * One chip. Give every chip an `id` — that is the key selection and removal\n * are reported by.\n */\nfunction ChipGroupChip({\n  children,\n  ...props\n}: ChipGroupChipProps) {\n  const removeLabel = useContext(RemoveLabelContext);\n  return <RACTag textValue={props.textValue ?? textOf(children)} {...props} {...mergeStatefulStyles(chipPropsFor, props)}>\n      {chipContent(children, removeLabel)}\n    </RACTag>;\n}\n\n// StyleX cannot target `[data-selected]` on the element it is styling, so a\n// chip's state comes from the render state React Aria hands its className.\n// Disabled is applied last so it wins over both containers, and StyleX\n// replaces a property whole, so it takes their hover branches with it.\nfunction chipPropsFor(state: TagRenderProps) {\n  return stylex.props(chipStyles.base, focus.ring, state.isSelected ? chipStyles.selected : chipStyles.unselected, state.isDisabled && chipStyles.disabled, state.isDisabled && (state.isSelected ? chipStyles.disabledSelected : chipStyles.disabledUnselected));\n}\n\n// What the chip is worth as text, for the typeahead React Aria drives from a\n// chip's words and for what a screen reader announces. It reads it off the\n// children when they are a string and finds nothing when they are not — and a\n// chip here is always an element once it can be removed. So a plain-string\n// label becomes the text value, and anything else has to say what it is worth\n// through `textValue`.\nfunction textOf(children: ReactNode) {\n  return typeof children === 'string' ? children : undefined;\n}\nChipGroup.Chip = ChipGroupChip;\nexport type { ChipGroupChipProps, ChipGroupProps };\nexport default ChipGroup;"],"mappings":"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"}

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

@@ -1,5 +1,6 @@
 import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { mergeStatefulStyles } from "../../styles/merge.js";
+import { focus } from "../../styles/focus.js";
 import ColorArea$1 from "../color-area/index.js";
 import ColorField$1 from "../color-field/index.js";
 import { overlay } from "../../styles/overlay.js";
@@ -10,6 +11,33 @@ import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Button, ColorPicker, Dialog, DialogTrigger, Popover } from "react-aria-components";
 //#region src/components/color-picker/index.tsx
+const triggerStyles = {
+	base: {
+		kGNEyG: "x6s0dn4",
+		kWkggS: "xu5m21g x5r8g2b x1vnz5z6",
+		kaIpWk: "x3y1ksm",
+		kMzoRj: "xc342km",
+		kB7OPa: "x9f619",
+		kMwMTN: "x139gbkf",
+		kkrTdU: "x1ypdohk",
+		k1xSpc: "x3nfvp2",
+		kMv6JI: "xkknnkr",
+		kGuDYH: "x14zspaw",
+		k63SB2: "x1v9cpvo",
+		kOIVth: "x126z3so",
+		kb6lSQ: "x155f00i",
+		kLWn49: "x1lz68p4",
+		k8WAf4: "x1cmllll",
+		kg3NbH: "x18fpw6u",
+		$$css: true
+	},
+	disabled: {
+		kWkggS: "x19v6zzp",
+		kMwMTN: "x1xj74d8",
+		kkrTdU: "x1h6gzvc",
+		$$css: true
+	}
+};
 /**
 * A colour picked from a plane, a hue strip and a text field, behind a
 * trigger showing the colour. The value is React Aria's: pass `value` with
@@ -107,7 +135,7 @@ function ColorPicker$1(t0) {
 	} else t6 = $[19];
 	let t7;
 	if ($[20] === Symbol.for("react.memo_cache_sentinel")) {
-		t7 = props(overlay.popupDialog);
+		t7 = props(overlay.popupDialog, focus.ring);
 		$[20] = t7;
 	} else t7 = $[20];
 	let t8;
@@ -178,10 +206,7 @@ function ColorPicker$1(t0) {
 	return t11;
 }
 function _temp(state) {
-	return {
-		0: { className: "x6s0dn4 xu5m21g x5r8g2b x1vnz5z6 x3y1ksm xc342km x9f619 x139gbkf x1ypdohk x3nfvp2 xkknnkr x14zspaw x1v9cpvo x126z3so x155f00i x1lz68p4 xrgy624 x1hl8ikr x9v5kkp x1t137rt x1de99jn x1cmllll x18fpw6u" },
-		1: { className: "x6s0dn4 x3y1ksm xc342km x9f619 x3nfvp2 xkknnkr x14zspaw x1v9cpvo x126z3so x155f00i x1lz68p4 xrgy624 x1hl8ikr x9v5kkp x1t137rt x1de99jn x1cmllll x18fpw6u x19v6zzp x1xj74d8 x1h6gzvc" }
-	}[!!state.isDisabled << 0];
+	return props(triggerStyles.base, focus.ring, state.isDisabled && triggerStyles.disabled);
 }
 //#endregion
 export { ColorPicker$1 as default };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","ButtonRenderProps","ColorPickerProps","RACColorPickerProps","stylex","Button","RACButton","ColorPicker","RACColorPicker","Dialog","RACDialog","DialogTrigger","RACDialogTrigger","Popover","RACPopover","mergeStatefulStyles","overlay","picker","colors","radii","spacing","stateLayerOpacity","typography","ColorArea","ColorField","ColorSlider","ColorSwatch","Omit","alpha","children","className","defaultOpen","isDisabled","isOpen","label","onOpenChange","style","React","CSSProperties","t0","$","_c","props","t1","t2","undefined","t3","_temp","t4","Symbol","for","t5","t6","popup","popover","t7","popupDialog","t8","t9","t10","t11","state","0","1"],"sources":["../../../src/components/color-picker/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { ButtonRenderProps, ColorPickerProps as RACColorPickerProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Button as RACButton, ColorPicker as RACColorPicker, Dialog as RACDialog, DialogTrigger as RACDialogTrigger, Popover as RACPopover } from 'react-aria-components';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport { overlay } from '../../styles/overlay';\nimport { picker } from '../../styles/picker';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\nimport ColorArea from '../color-area';\nimport ColorField from '../color-field';\nimport ColorSlider from '../color-slider';\nimport ColorSwatch from '../color-swatch';\n\n// Everything in this phase, in one control: a swatch and a label as the\n// trigger, and a plane, a hue slider, an alpha slider and a text field on\n// the surface it opens. React Aria's `ColorPicker` renders nothing of its\n// own — it is the state the five share — so what is here is the trigger,\n// the overlay and the arrangement inside it.\n//\n// The design carries no page for a colour picker. What it does carry is the\n// text fields page, which the field inside this one already draws through,\n// and the overlay surface every popover here shares. Three choices are the\n// library's own.\n//\n// **The trigger is a swatch beside a name, not a swatch alone.** A swatch\n// on its own is a coloured square with no affordance — nothing says it can\n// be pressed, and a screen reader is told a colour rather than an action.\n// The label is what makes it a button.\n//\n// **Hue is a slider rather than a wheel here.** A wheel and the plane want\n// the same space and would make the surface square and large; the strip\n// sits under the plane at the width it already has. `ColorWheel` is for a\n// picker that wants to be round, which is a different shape rather than a\n// different control.\n//\n// **It is docked above the medium breakpoint and modal below it**, which is\n// the same swap `DatePicker` and `Sheet` make — the shared one in\n// `src/styles/picker.ts` rather than a third copy. A 280dp surface anchored\n// to a trigger is unreachable at 375px.\n//\n// One thing the picker has to do that its parts do not. **The plane and the\n// hue strip are pinned to HSL.** A channel has to belong to the value's own\n// space or React Aria throws, and a hex parses as RGB, which has no\n// saturation — so `<ColorPicker defaultValue=\"#6750A4\" />`, the call anyone\n// writes first, would throw outright. Converting here is what makes the\n// picker take any notation, and it costs the caller nothing: the value\n// handed back is still in whatever they passed.\n\ntype ColorPickerProps = Omit<RACColorPickerProps, 'children'> & {\n  /** Whether the alpha strip is drawn under the hue one. @default false */\n  alpha?: boolean;\n  /** Replaces everything on the surface, for a picker that arranges its own parts. */\n  children?: ReactNode;\n  /** Lands on the trigger, which is the element a layout positions. */\n  className?: string;\n  /** Whether the surface starts open. Uncontrolled; pair `isOpen` with `onOpenChange` instead. */\n  defaultOpen?: boolean;\n  /** Whether the whole picker is inert. @default false */\n  isDisabled?: boolean;\n  /** Whether the surface is open. Controlled; needs `onOpenChange`. */\n  isOpen?: boolean;\n  /** What the trigger says beside its swatch. Always rendered; it is the button's name. */\n  label: string;\n  /** Called when the surface opens or closes. */\n  onOpenChange?: (isOpen: boolean) => void;\n  /** Lands on the trigger, as `className` does. */\n  style?: React.CSSProperties;\n};\n\n/**\n * A colour picked from a plane, a hue strip and a text field, behind a\n * trigger showing the colour. The value is React Aria's: pass `value` with\n * `onChange` to control it, or `defaultValue`, as a CSS colour string or a\n * `Color` from `parseColor`, which this package re-exports.\n *\n * ```tsx\n * <ColorPicker defaultValue=\"#6750A4\" label=\"Label\" />\n * ```\n *\n * `alpha` adds the transparency strip. Above the medium breakpoint the\n * surface is docked to the trigger; below it, it opens centred, the same\n * swap `DatePicker` makes. `defaultOpen`, `isOpen` and `onOpenChange` reach\n * the overlay, since the picker itself carries no open state — React Aria\n * keeps that on the dialog trigger this renders inside.\n *\n * Every part inside is this package's own — `ColorArea`, `ColorSlider`,\n * `ColorField` and `ColorSwatch` — and they share the picker's value\n * through React Aria's context rather than props. Passing `children`\n * replaces all of them, for a picker that wants a different arrangement.\n *\n * The call site's `className` and `style` land on the trigger, which is the\n * element a layout positions.\n */\nfunction ColorPicker({\n  alpha = false,\n  children,\n  className,\n  defaultOpen,\n  isDisabled = false,\n  isOpen,\n  label,\n  onOpenChange,\n  style,\n  ...props\n}: ColorPickerProps) {\n  return <RACColorPicker {...props}>\n      <RACDialogTrigger defaultOpen={defaultOpen} isOpen={isOpen} onOpenChange={onOpenChange}>\n        <RACButton isDisabled={isDisabled} {...mergeStatefulStyles(\n      // A function of the state rather than a fixed class, since the\n      // trigger is the element a layout positions and the call site's\n      // own class has to merge into it — a plain `className` would\n      // overwrite one or the other.\n      (state: ButtonRenderProps) => ({\n        0: {\n          className: \"x6s0dn4 xu5m21g x5r8g2b x1vnz5z6 x3y1ksm xc342km x9f619 x139gbkf x1ypdohk x3nfvp2 xkknnkr x14zspaw x1v9cpvo x126z3so x155f00i x1lz68p4 xrgy624 x1hl8ikr x9v5kkp x1t137rt x1de99jn x1cmllll x18fpw6u\"\n        },\n        1: {\n          className: \"x6s0dn4 x3y1ksm xc342km x9f619 x3nfvp2 xkknnkr x14zspaw x1v9cpvo x126z3so x155f00i x1lz68p4 xrgy624 x1hl8ikr x9v5kkp x1t137rt x1de99jn x1cmllll x18fpw6u x19v6zzp x1xj74d8 x1h6gzvc\"\n        }\n      })[!!state.isDisabled << 0], {\n        className,\n        style\n      })}>\n          <ColorSwatch className=\"xxk0z11 x2lah0s xvy4d1p\" />\n          {label}\n        </RACButton>\n        <RACPopover {...stylex.props(overlay.popup, picker.popover)}>\n          <RACDialog {...stylex.props(overlay.popupDialog)}>\n            {children ?? <div className=\"x9f619 x78zum5 xdt5ytf x1gka490 x1dz1jew x193iq5w xgc26li\">\n                <ColorArea aria-label={label} colorSpace=\"hsl\" xChannel=\"saturation\" yChannel=\"lightness\" />\n                <ColorSlider channel=\"hue\" colorSpace=\"hsl\" label=\"Hue\" />\n                {alpha ? <ColorSlider channel=\"alpha\" label=\"Alpha\" /> : null}\n                <ColorField label={label} />\n              </div>}\n          </RACDialog>\n        </RACPopover>\n      </RACDialogTrigger>\n    </RACColorPicker>;\n}\nexport type { ColorPickerProps };\nexport default ColorPicker;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ReactNode","ButtonRenderProps","ColorPickerProps","RACColorPickerProps","stylex","Button","RACButton","ColorPicker","RACColorPicker","Dialog","RACDialog","DialogTrigger","RACDialogTrigger","Popover","RACPopover","focus","mergeStatefulStyles","overlay","picker","colors","radii","spacing","stateLayerOpacity","typography","ColorArea","ColorField","ColorSlider","ColorSwatch","triggerStyles","base","kGNEyG","kWkggS","kaIpWk","kMzoRj","kB7OPa","kMwMTN","kkrTdU","k1xSpc","kMv6JI","kGuDYH","k63SB2","kOIVth","kb6lSQ","kLWn49","k8WAf4","kg3NbH","$$css","disabled","Omit","alpha","children","className","defaultOpen","isDisabled","isOpen","label","onOpenChange","style","React","CSSProperties","t0","$","_c","props","t1","t2","undefined","t3","_temp","t4","Symbol","for","t5","t6","popup","popover","t7","popupDialog","ring","t8","t9","t10","t11","state"],"sources":["../../../src/components/color-picker/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { ButtonRenderProps, ColorPickerProps as RACColorPickerProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Button as RACButton, ColorPicker as RACColorPicker, Dialog as RACDialog, DialogTrigger as RACDialogTrigger, Popover as RACPopover } from 'react-aria-components';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport { overlay } from '../../styles/overlay';\nimport { picker } from '../../styles/picker';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\nimport ColorArea from '../color-area';\nimport ColorField from '../color-field';\nimport ColorSlider from '../color-slider';\nimport ColorSwatch from '../color-swatch';\n\n// Everything in this phase, in one control: a swatch and a label as the\n// trigger, and a plane, a hue slider, an alpha slider and a text field on\n// the surface it opens. React Aria's `ColorPicker` renders nothing of its\n// own — it is the state the five share — so what is here is the trigger,\n// the overlay and the arrangement inside it.\n//\n// The design carries no page for a colour picker. What it does carry is the\n// text fields page, which the field inside this one already draws through,\n// and the overlay surface every popover here shares. Three choices are the\n// library's own.\n//\n// **The trigger is a swatch beside a name, not a swatch alone.** A swatch\n// on its own is a coloured square with no affordance — nothing says it can\n// be pressed, and a screen reader is told a colour rather than an action.\n// The label is what makes it a button.\n//\n// **Hue is a slider rather than a wheel here.** A wheel and the plane want\n// the same space and would make the surface square and large; the strip\n// sits under the plane at the width it already has. `ColorWheel` is for a\n// picker that wants to be round, which is a different shape rather than a\n// different control.\n//\n// **It is docked above the medium breakpoint and modal below it**, which is\n// the same swap `DatePicker` and `Sheet` make — the shared one in\n// `src/styles/picker.ts` rather than a third copy. A 280dp surface anchored\n// to a trigger is unreachable at 375px.\n//\n// One thing the picker has to do that its parts do not. **The plane and the\n// hue strip are pinned to HSL.** A channel has to belong to the value's own\n// space or React Aria throws, and a hex parses as RGB, which has no\n// saturation — so `<ColorPicker defaultValue=\"#6750A4\" />`, the call anyone\n// writes first, would throw outright. Converting here is what makes the\n// picker take any notation, and it costs the caller nothing: the value\n// handed back is still in whatever they passed.\n\nconst triggerStyles = {\n  base: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xu5m21g x5r8g2b x1vnz5z6\",\n    kaIpWk: \"x3y1ksm\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x139gbkf\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x3nfvp2\",\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kOIVth: \"x126z3so\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    k8WAf4: \"x1cmllll\",\n    kg3NbH: \"x18fpw6u\",\n    $$css: true\n  },\n  disabled: {\n    kWkggS: \"x19v6zzp\",\n    kMwMTN: \"x1xj74d8\",\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  }\n};\ntype ColorPickerProps = Omit<RACColorPickerProps, 'children'> & {\n  /** Whether the alpha strip is drawn under the hue one. @default false */\n  alpha?: boolean;\n  /** Replaces everything on the surface, for a picker that arranges its own parts. */\n  children?: ReactNode;\n  /** Lands on the trigger, which is the element a layout positions. */\n  className?: string;\n  /** Whether the surface starts open. Uncontrolled; pair `isOpen` with `onOpenChange` instead. */\n  defaultOpen?: boolean;\n  /** Whether the whole picker is inert. @default false */\n  isDisabled?: boolean;\n  /** Whether the surface is open. Controlled; needs `onOpenChange`. */\n  isOpen?: boolean;\n  /** What the trigger says beside its swatch. Always rendered; it is the button's name. */\n  label: string;\n  /** Called when the surface opens or closes. */\n  onOpenChange?: (isOpen: boolean) => void;\n  /** Lands on the trigger, as `className` does. */\n  style?: React.CSSProperties;\n};\n\n/**\n * A colour picked from a plane, a hue strip and a text field, behind a\n * trigger showing the colour. The value is React Aria's: pass `value` with\n * `onChange` to control it, or `defaultValue`, as a CSS colour string or a\n * `Color` from `parseColor`, which this package re-exports.\n *\n * ```tsx\n * <ColorPicker defaultValue=\"#6750A4\" label=\"Label\" />\n * ```\n *\n * `alpha` adds the transparency strip. Above the medium breakpoint the\n * surface is docked to the trigger; below it, it opens centred, the same\n * swap `DatePicker` makes. `defaultOpen`, `isOpen` and `onOpenChange` reach\n * the overlay, since the picker itself carries no open state — React Aria\n * keeps that on the dialog trigger this renders inside.\n *\n * Every part inside is this package's own — `ColorArea`, `ColorSlider`,\n * `ColorField` and `ColorSwatch` — and they share the picker's value\n * through React Aria's context rather than props. Passing `children`\n * replaces all of them, for a picker that wants a different arrangement.\n *\n * The call site's `className` and `style` land on the trigger, which is the\n * element a layout positions.\n */\nfunction ColorPicker({\n  alpha = false,\n  children,\n  className,\n  defaultOpen,\n  isDisabled = false,\n  isOpen,\n  label,\n  onOpenChange,\n  style,\n  ...props\n}: ColorPickerProps) {\n  return <RACColorPicker {...props}>\n      <RACDialogTrigger defaultOpen={defaultOpen} isOpen={isOpen} onOpenChange={onOpenChange}>\n        <RACButton isDisabled={isDisabled} {...mergeStatefulStyles(\n      // A function of the state rather than a fixed class, since the\n      // trigger is the element a layout positions and the call site's\n      // own class has to merge into it — a plain `className` would\n      // overwrite one or the other.\n      (state: ButtonRenderProps) => stylex.props(triggerStyles.base, focus.ring, state.isDisabled && triggerStyles.disabled), {\n        className,\n        style\n      })}>\n          <ColorSwatch className=\"xxk0z11 x2lah0s xvy4d1p\" />\n          {label}\n        </RACButton>\n        <RACPopover {...stylex.props(overlay.popup, picker.popover)}>\n          <RACDialog {...stylex.props(overlay.popupDialog, focus.ring)}>\n            {children ?? <div className=\"x9f619 x78zum5 xdt5ytf x1gka490 x1dz1jew x193iq5w xgc26li\">\n                <ColorArea aria-label={label} colorSpace=\"hsl\" xChannel=\"saturation\" yChannel=\"lightness\" />\n                <ColorSlider channel=\"hue\" colorSpace=\"hsl\" label=\"Hue\" />\n                {alpha ? <ColorSlider channel=\"alpha\" label=\"Alpha\" /> : null}\n                <ColorField label={label} />\n              </div>}\n          </RACDialog>\n        </RACPopover>\n      </RACDialogTrigger>\n    </RACColorPicker>;\n}\nexport type { ColorPickerProps };\nexport default ColorPicker;"],"mappings":"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"}