@kanso-labs/kanso-ui 0.26.2 → 0.26.3

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["validationBehavior"],"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,SAAA,gBAAA,IAAA;CAAA,MAAA,IAAA,EAAA,EAAA;CAAuB,MAAA,EAAA,UAAA,aAAA,OAAA,OAAA,GAAA,UAAA;CAOrB,MAAA,qBAA2B,2BAA2B;CAC9C,MAAA,KAAA;CAAgB,IAAA;CAAA,IAAA,EAAA,OAAA,OAAA;EAAY,KAAA,YAAY,KAAK;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAyD,MAAA,KAAA,oBAAoB,EAAA,WACtH,iCACb,GAAG,KAAK;CAAC,IAAA;CAAA,IAAA,EAAA,OAAA,YAAA,EAAA,OAAA,eAAA,EAAA,OAAA,SAAA,EAAA,OAAA,OAAA;EACJ,KAAA,aAAa,OAAO,UAAU,aAAa,KAAK;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,MAAA,EAAA,OAAA,SAAA,EAAA,OAAA,MAAA,EAAA,QAAA,MAAA,EAAA,QAAA,MAAA,EAAA,QAAA,oBAAA;EAH/C,KAAA,oBAAC,IAAD;GAA6B,WAAA;GAAwC;GAAkB,GAAM;GAAK,GAAM;GAG1G,UAAA;EAHmB,CAAA;EAIH,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OAJd;AAIc;AAOvB,SAAS,aAAa,OAAe,UAAqB,aAAiC,OAA2B;CACpH,QAAQ,UAAoC,qBAAA,UAAA,EAAA,UAAA;EACxC,oBAAC,YAAD;GAAmB;GAAO,WAAU;GACjC,UAAA;EACS,CAAA;EACZ,oBAAC,OAAD;GAAK,WAAU;GAAmB;EAAc,CAAA;EAChD,oBAAC,cAAD;GAA2B;GAAoB;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","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"}

package/dist/components/chip/index.js

@@ -1,8 +1,8 @@
 import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { mergeStatefulStyles } from "../../styles/merge.js";
 import { chipStyles } from "../../chip/styles.js";
-import { jsx } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
 import { ToggleButton } from "react-aria-components";
 //#region src/components/chip/index.tsx
 /**

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["props","children"],"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,SAAA,KAAA,IAAA;CAAA,MAAA,IAAA,EAAA,EAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,IAAA;EAAc,MAAA,EAAA,UAAA,IAAA,GAAA,UAAA;EAAA,WAAA;EAIJ,KAAA;EAAiBA,KAAA;EAAW,KAAA,oBAAoB,UAAU,KAAK;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA;EAAA,KAAA,EAAA;EAAA,WAAA,EAAA;EAAA,KAAA,EAAA;EAAA,KAAA,EAAA;CAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,MAAA,EAAA,OAAA,YAAA,EAAA,OAAA,MAAA,EAAA,OAAA,IAAA;EAAjE,KAAA,oBAAC,IAAD;GAAa,GAAKA;GAAK,GAAM;GAC/B;EADe,CAAA;EAEH,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OAFV;AAEU;AAWnB,SAAS,SAAS,OAAgC;CAChD,OAAO,MAAa,WAAW,MAAM,MAAM,aAAa,WAAW,WAAW,WAAW,YAAY,MAAM,cAAc,WAAW,UAAU,MAAM,eAAe,MAAM,aAAa,WAAW,mBAAmB,WAAW,mBAAmB;AACpP"}
+{"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"}

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

@@ -4,9 +4,9 @@ import { CloseGlyph } from "../../glyphs/index.js";
 import { invalidFrom } from "../../field/root.js";
 import { FieldLabel, FieldMessage } from "../../field/index.js";
 import { chipStyles } from "../../chip/styles.js";
+import { c } from "react/compiler-runtime";
 import { createContext, useContext } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { c } from "react/compiler-runtime";
 import { Button, Tag, TagGroup, TagList } from "react-aria-components";
 //#region src/components/chip-group/index.tsx
 function chipContent(children, removeLabel) {
@@ -41,33 +41,123 @@ function chipContent(children, removeLabel) {
 const RemoveLabelContext = createContext("Remove");
 const LABEL_STATE_VALID = { isInvalid: false };
 const LABEL_STATE_INVALID = { isInvalid: true };
-function ChipGroup({ children, description, error, items, label, removeLabel = "Remove", renderEmptyState, ...props }) {
-	const invalid = invalidFrom(error);
-	return /* @__PURE__ */ jsxs(TagGroup, {
-		...props,
-		...mergeStyles({ className: "x9f619 x78zum5 xdt5ytf xzoy561" }, props),
-		children: [
-			/* @__PURE__ */ jsx(FieldLabel, {
-				state: invalid ? LABEL_STATE_INVALID : LABEL_STATE_VALID,
-				className: "xkknnkr x14zspaw x1v9cpvo x155f00i x1lz68p4",
-				children: label
-			}),
-			/* @__PURE__ */ jsx(RemoveLabelContext, {
-				value: removeLabel,
-				children: /* @__PURE__ */ jsx(TagList, {
-					items,
-					renderEmptyState,
-					className: "x9f619 x78zum5 x1a02dak x126z3so x1t137rt",
-					children
-				})
-			}),
-			/* @__PURE__ */ jsx(FieldMessage, {
-				description,
-				error,
-				inset: false
-			})
-		]
-	});
+function ChipGroup(t0) {
+	const $ = c(32);
+	let T0;
+	let children;
+	let description;
+	let error;
+	let invalid;
+	let items;
+	let label;
+	let removeLabel;
+	let renderEmptyState;
+	let t1;
+	let t2;
+	if ($[0] !== t0) {
+		const { children: t3, description: t4, error: t5, items: t6, label: t7, removeLabel: t8, renderEmptyState: t9, ...props } = t0;
+		children = t3;
+		description = t4;
+		error = t5;
+		items = t6;
+		label = t7;
+		renderEmptyState = t9;
+		removeLabel = t8 === void 0 ? "Remove" : t8;
+		invalid = invalidFrom(error);
+		T0 = TagGroup;
+		t1 = props;
+		t2 = mergeStyles({ className: "x9f619 x78zum5 xdt5ytf xzoy561" }, props);
+		$[0] = t0;
+		$[1] = T0;
+		$[2] = children;
+		$[3] = description;
+		$[4] = error;
+		$[5] = invalid;
+		$[6] = items;
+		$[7] = label;
+		$[8] = removeLabel;
+		$[9] = renderEmptyState;
+		$[10] = t1;
+		$[11] = t2;
+	} else {
+		T0 = $[1];
+		children = $[2];
+		description = $[3];
+		error = $[4];
+		invalid = $[5];
+		items = $[6];
+		label = $[7];
+		removeLabel = $[8];
+		renderEmptyState = $[9];
+		t1 = $[10];
+		t2 = $[11];
+	}
+	const t3 = invalid ? LABEL_STATE_INVALID : LABEL_STATE_VALID;
+	let t4;
+	if ($[12] !== label || $[13] !== t3) {
+		t4 = /* @__PURE__ */ jsx(FieldLabel, {
+			state: t3,
+			className: "xkknnkr x14zspaw x1v9cpvo x155f00i x1lz68p4",
+			children: label
+		});
+		$[12] = label;
+		$[13] = t3;
+		$[14] = t4;
+	} else t4 = $[14];
+	let t5;
+	if ($[15] !== children || $[16] !== items || $[17] !== renderEmptyState) {
+		t5 = /* @__PURE__ */ jsx(TagList, {
+			items,
+			renderEmptyState,
+			className: "x9f619 x78zum5 x1a02dak x126z3so x1t137rt",
+			children
+		});
+		$[15] = children;
+		$[16] = items;
+		$[17] = renderEmptyState;
+		$[18] = t5;
+	} else t5 = $[18];
+	let t6;
+	if ($[19] !== removeLabel || $[20] !== t5) {
+		t6 = /* @__PURE__ */ jsx(RemoveLabelContext, {
+			value: removeLabel,
+			children: t5
+		});
+		$[19] = removeLabel;
+		$[20] = t5;
+		$[21] = t6;
+	} else t6 = $[21];
+	let t7;
+	if ($[22] !== description || $[23] !== error) {
+		t7 = /* @__PURE__ */ jsx(FieldMessage, {
+			description,
+			error,
+			inset: false
+		});
+		$[22] = description;
+		$[23] = error;
+		$[24] = t7;
+	} else t7 = $[24];
+	let t8;
+	if ($[25] !== T0 || $[26] !== t1 || $[27] !== t2 || $[28] !== t4 || $[29] !== t6 || $[30] !== t7) {
+		t8 = /* @__PURE__ */ jsxs(T0, {
+			...t1,
+			...t2,
+			children: [
+				t4,
+				t6,
+				t7
+			]
+		});
+		$[25] = T0;
+		$[26] = t1;
+		$[27] = t2;
+		$[28] = t4;
+		$[29] = t6;
+		$[30] = t7;
+		$[31] = t8;
+	} else t8 = $[31];
+	return t8;
 }
 /**
 * One chip. Give every chip an `id` — that is the key selection and removal

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"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":";;;;;;;;;;;AAuFA,SAAS,YAAY,UAAqB,aAAqB;CAC7D,QAAQ,UAA0B,qBAAA,YAAA,EAAA,UAAA,CAC7B,UACA,MAAM,iBAAiB,oBAAC,QAAD;EAAW,cAAY;EAAa,MAAK;EAAS,GAAI,MAAa,WAAW,MAAM;EACxG,UAAA,oBAAC,YAAD,EAAY,GAAI,MAAa,WAAW,WAAW,EAAE,CAAA;CAC5C,CAAA,IAAI,IACnB,EAAA,CAAA;AACJ;;;;;;;;;;;;;;;;;;;;;;AA0BA,MAAM,qBAAqB,cAAc,QAAQ;AAGjD,MAAM,oBAAoB,EACxB,WAAW,MACb;AACA,MAAM,sBAAsB,EAC1B,WAAW,KACb;AACA,SAAS,UAAqC,EAC5C,UACA,aACA,OACA,OACA,OACA,cAAc,UACd,kBACA,GAAG,SACiB;CACpB,MAAM,UAAU,YAAY,KAAK;CACjC,OAAO,qBAAC,UAAD;EAAa,GAAI;EAAO,GAAI,YAAY,EAC7C,WAAW,iCACb,GAAG,KAAK;EAFD,UAAA;GAMH,oBAAC,YAAD;IAAY,OAAO,UAAU,sBAAsB;IAAmB,WAAU;IAC7E,UAAA;GACS,CAAA;GACZ,oBAAC,oBAAD;IAAoB,OAAO;IACzB,UAAA,oBAAC,SAAD;KAAsB;KAAyB;KAAkB,WAAU;KACxE;IACS,CAAA;GACM,CAAA;GACpB,oBAAC,cAAD;IAA2B;IAAoB;IAAO,OAAO;GAAM,CAAA;EACxD;;AACjB;;;;;AAMA,SAAA,cAAA,IAAA;CAAA,MAAA,IAAA,EAAA,CAAA;CAAuB,MAAA,EAAA,UAAA,GAAA,UAAA;CAIrB,MAAA,cAAoB,WAAW,kBAAkB;CACzC,MAAA,KAAA;CAAkB,MAAA,KAAA,MAAK,aAAc,OAAO,QAAQ;CAAkB,MAAA,KAAA,oBAAoB,cAAc,KAAK;CAAC,IAAA;CAAA,IAAA,EAAA,OAAA,YAAA,EAAA,OAAA,aAAA;EACjH,KAAA,YAAY,UAAU,WAAW;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,MAAA,EAAA,OAAA,SAAA,EAAA,OAAA,MAAA,EAAA,OAAA,MAAA,EAAA,OAAA,IAAA;EADhC,KAAA,oBAAC,IAAD;GAAmB,WAAA;GAAmC,GAAM;GAAK,GAAM;GACzE,UAAA;EADS,CAAA;EAEH,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OAFJ;AAEI;AAOb,SAAS,aAAa,OAAuB;CAC3C,OAAO,MAAa,WAAW,MAAM,MAAM,aAAa,WAAW,WAAW,WAAW,YAAY,MAAM,cAAc,WAAW,UAAU,MAAM,eAAe,MAAM,aAAa,WAAW,mBAAmB,WAAW,mBAAmB;AACpP;AAQA,SAAS,OAAO,UAAqB;CACnC,OAAO,OAAO,aAAa,WAAW,WAAW,KAAA;AACnD;AACA,UAAU,OAAO"}
+{"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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"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["useRender","props"],"sources":["../../../src/components/code/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 { colors, typography } from '../../tokens/design.tokens.stylex';\n\n// Sized in em rather than px, so a fragment of code takes the scale of\n// whatever it interrupts. A mono face at the same nominal size as the prose\n// around it reads a little larger — its glyphs are wider and its x-height\n// taller — so 0.875em is what makes the two look level rather than what makes\n// them measure the same.\n//\n// No background. The mono face against the serif and sans faces the rest of\n// the system uses is already an unmistakable signal, and a tint here would\n// introduce a second surface inside Card and Sheet, competing with the\n// hierarchy those already establish. A call site wanting one can wrap this.\n//\n// No Material Design page draws inline code. What it follows is the type it\n// interrupts: the role and the on surface colour of the prose around it, at\n// the ratio above, in the mono face the type tokens carry.\n\ntype CodeProps = RenderComponentProps<'code'>;\n\n/**\n * A fragment of code, a path, or an identifier set in the mono face. It\n * renders a `<code>` and takes its scale from the text around it.\n */\nfunction Code({\n  render,\n  ...props\n}: CodeProps) {\n  return useRender({\n    defaultTagName: 'code',\n    props: {\n      ...props,\n      ...mergeStyles({\n        className: \"x9f619 x139gbkf xbppi91 x1s8wshw xj0a0fe\"\n      }, props)\n    },\n    render\n  });\n}\nexport type { CodeProps };\nexport default Code;"],"mappings":";;;;;;;;AA4BA,SAAA,KAAA,IAAA;CAAA,MAAA,IAAA,EAAA,EAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,IAAA;EAAc,MAAA,EAAA,QAAA,IAAA,GAAA,UAAA;EAAA,SAAA;EAILA,KAAA;EACW,KAAA;EAEXC,KAAA;EACA,KAAA,YAAY,EAAA,WACF,2CACb,GAAG,KAAK;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA;EAAA,SAAA,EAAA;EAAA,KAAA,EAAA;EAAA,KAAA,EAAA;EAAA,KAAA,EAAA;EAAA,KAAA,EAAA;CAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,MAAA,EAAA,OAAA,IAAA;EAJJ,KAAA;GAAA,GACFA;GAAK,GACL;EAGL;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,UAAA,EAAA,QAAA,MAAA,EAAA,QAAA,IAAA;EAPc,KAAA;GAAA,gBACC;GAAM,OACf;GAKN;EAEH;EAAC,EAAA,KAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OATMD,GAAU,EAShB;AAAC"}
+{"version":3,"file":"index.js","names":["stylex","RenderComponentProps","useRender","mergeStyles","colors","typography","CodeProps","Code","t0","$","_c","render","t1","t2","t3","t4","t5","props","className","t6","defaultTagName"],"sources":["../../../src/components/code/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 { colors, typography } from '../../tokens/design.tokens.stylex';\n\n// Sized in em rather than px, so a fragment of code takes the scale of\n// whatever it interrupts. A mono face at the same nominal size as the prose\n// around it reads a little larger — its glyphs are wider and its x-height\n// taller — so 0.875em is what makes the two look level rather than what makes\n// them measure the same.\n//\n// No background. The mono face against the serif and sans faces the rest of\n// the system uses is already an unmistakable signal, and a tint here would\n// introduce a second surface inside Card and Sheet, competing with the\n// hierarchy those already establish. A call site wanting one can wrap this.\n//\n// No Material Design page draws inline code. What it follows is the type it\n// interrupts: the role and the on surface colour of the prose around it, at\n// the ratio above, in the mono face the type tokens carry.\n\ntype CodeProps = RenderComponentProps<'code'>;\n\n/**\n * A fragment of code, a path, or an identifier set in the mono face. It\n * renders a `<code>` and takes its scale from the text around it.\n */\nfunction Code({\n  render,\n  ...props\n}: CodeProps) {\n  return useRender({\n    defaultTagName: 'code',\n    props: {\n      ...props,\n      ...mergeStyles({\n        className: \"x9f619 x139gbkf xbppi91 x1s8wshw xj0a0fe\"\n      }, props)\n    },\n    render\n  });\n}\nexport type { CodeProps };\nexport default Code;"],"mappings":";;;;;;;;AA4BA,SAAAO,KAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAN,EAAA,OAAAD,IAAA;EAAc,MAAA,EAAAG,QAAAK,IAAA,GAAAC,UAAAT;EAAAG,SAAAK;EAILd,KAAAA;EACWY,KAAA;EAEXG,KAAAA;EACAJ,KAAAV,YAAY,EAAAe,WACF,2CACb,GAAGD,KAAK;EAACR,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;EAJJG,KAAA;GAAA,GACFC;GAAK,GACLJ;EAGL;EAACJ,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAO;CAAA,OAAAA,KAAAP,EAAA;CAAA,IAAAU;CAAA,IAAAV,EAAA,OAAAE,UAAAF,EAAA,QAAAK,MAAAL,EAAA,QAAAO,IAAA;EAPcG,KAAA;GAAAC,gBACCN;GAAMG,OACfD;GAKNL;EAEH;EAACF,EAAA,KAAAE;EAAAF,EAAA,MAAAK;EAAAL,EAAA,MAAAO;EAAAP,EAAA,MAAAU;CAAA,OAAAA,KAAAV,EAAA;CAAA,OATMP,GAAUiB,EAShB;AAAC"}

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

@@ -1,5 +1,6 @@
 import { mergeStyles } from "../../styles/merge.js";
 import { thumbClassName } from "../../styles/color.js";
+import { c } from "react/compiler-runtime";
 import { jsx } from "react/jsx-runtime";
 import { ColorArea, ColorThumb } from "react-aria-components";
 //#region src/components/color-area/index.tsx
@@ -37,25 +38,78 @@ import { ColorArea, ColorThumb } from "react-aria-components";
 * reason `ColorSwatch` does not take them: the element they would read
 * state for is not the one a layout reaches.
 */
-function ColorArea$1({ className, isDisabled = false, style, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
-		...mergeStyles({
+function ColorArea$1(t0) {
+	const $ = c(18);
+	let className;
+	let props;
+	let style;
+	let t1;
+	if ($[0] !== t0) {
+		({className, isDisabled: t1, style, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+		$[3] = style;
+		$[4] = t1;
+	} else {
+		className = $[1];
+		props = $[2];
+		style = $[3];
+		t1 = $[4];
+	}
+	const isDisabled = t1 === void 0 ? false : t1;
+	let t2;
+	if ($[5] !== className || $[6] !== isDisabled || $[7] !== style) {
+		t2 = mergeStyles({
 			0: { className: "x1plog1 x1xdvaa9 x9f619 xh8yej3" },
 			1: { className: "x1plog1 x1xdvaa9 x9f619 xh8yej3 x1ppv7y9" }
 		}[!!isDisabled << 0], {
 			className,
 			style
-		}),
-		children: /* @__PURE__ */ jsx(ColorArea, {
+		});
+		$[5] = className;
+		$[6] = isDisabled;
+		$[7] = style;
+		$[8] = t2;
+	} else t2 = $[8];
+	let t3;
+	if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = {
+			0: { className: "x5yr21d x1xdvaa9 x9f619 xsid9ct xh8yej3 x5ve5x3" },
+			1: { className: "x5yr21d x1xdvaa9 x9f619 xh8yej3 x5ve5x3 x1h6gzvc" }
+		};
+		$[9] = t3;
+	} else t3 = $[9];
+	const t4 = t3[!!isDisabled << 0];
+	let t5;
+	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = /* @__PURE__ */ jsx(ColorThumb, { className: thumbClassName });
+		$[10] = t5;
+	} else t5 = $[10];
+	let t6;
+	if ($[11] !== isDisabled || $[12] !== props || $[13] !== t4) {
+		t6 = /* @__PURE__ */ jsx(ColorArea, {
 			isDisabled,
 			...props,
-			...{
-				0: { className: "x5yr21d x1xdvaa9 x9f619 xsid9ct xh8yej3 x5ve5x3" },
-				1: { className: "x5yr21d x1xdvaa9 x9f619 xh8yej3 x5ve5x3 x1h6gzvc" }
-			}[!!isDisabled << 0],
-			children: /* @__PURE__ */ jsx(ColorThumb, { className: thumbClassName })
-		})
-	});
+			...t4,
+			children: t5
+		});
+		$[11] = isDisabled;
+		$[12] = props;
+		$[13] = t4;
+		$[14] = t6;
+	} else t6 = $[14];
+	let t7;
+	if ($[15] !== t2 || $[16] !== t6) {
+		t7 = /* @__PURE__ */ jsx("div", {
+			...t2,
+			children: t6
+		});
+		$[15] = t2;
+		$[16] = t6;
+		$[17] = t7;
+	} else t7 = $[17];
+	return t7;
 }
 //#endregion
 export { ColorArea$1 as default };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/color-area/index.tsx"],"sourcesContent":["import type { CSSProperties } from 'react';\nimport type { ColorAreaProps as RACColorAreaProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { ColorArea as RACColorArea, ColorThumb as RACColorThumb } from 'react-aria-components';\nimport { thumbClassName } from '../../styles/color';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { radii, stateLayerOpacity } from '../../tokens/design.tokens.stylex';\n\n// Two channels of a colour at once, as a plane: one runs along the inline\n// axis and one along the block axis, and the handle sits where they meet.\n// React Aria paints both gradients on the plane's own inline `background`\n// and moves the handle in two axes, so what is here is the plane's shape and\n// the handle `ColorSlider` already draws, from `src/styles/color.ts`.\n//\n// The design carries no page for this, so the two choices below are the\n// library's own.\n//\n// **It is square, and takes the width it is given.** A plane has no natural\n// size, and a box that was not square would give its two channels unequal\n// travel — the same drag would move one further than the other, which is a\n// difference a reader cannot see and would feel as the control being wrong.\n//\n// **It carries no chequer, unlike a swatch or a colour slider's alpha\n// track.** Those two show the surface behind them where a colour thins out,\n// and a plane does not: React Aria stacks its gradients so the topmost is\n// opaque across the whole box, so nothing laid behind the plane is ever\n// seen. A chequer here was written first and then taken out, because it\n// could not be made to show under any pairing tried — including the RGB\n// alpha pairing whose gradient really does carry a `rgba(0, 0, 0, 0)` stop.\n//\n// **Alpha is a channel here only in RGB, and even there it does not thin\n// the plane.** Asked for it in HSL, React Aria draws the saturation and\n// lightness plane instead and says nothing — the gradients come out\n// identical to the pair it would have drawn anyway. It does not throw the\n// way an unknown channel does, so the only sign is a plane that will not\n// change, which is why it is written down here.\n\ntype ColorAreaProps = Omit<RACColorAreaProps, 'children' | 'className' | 'style'> & {\n  /**\n   * Lands on the square around the plane, which is the element a layout\n   * positions and the one that carries its size.\n   */\n  className?: string;\n  /** Lands on the square around the plane, as `className` does. */\n  style?: CSSProperties;\n};\n\n/**\n * Two channels of a colour as a plane, with a handle where they meet. The\n * value is React Aria's: pass `value` with `onChange` to control it, or\n * `defaultValue`, as a CSS colour string or a `Color` from `parseColor`,\n * which this package re-exports.\n *\n * ```tsx\n * <ColorArea\n *   defaultValue=\"hsl(200, 100%, 50%)\"\n *   xChannel=\"saturation\"\n *   yChannel=\"lightness\"\n * />\n * ```\n *\n * **`xChannel` and `yChannel` have to name channels the value's own space\n * has.** A hex or `rgb()` value parses as RGB, which has no saturation, so\n * naming one against it throws rather than converting — pass `colorSpace` to\n * convert it, or give the value in the space you mean to work in. The same\n * trap `ColorSlider` documents.\n *\n * **`alpha` is a channel here only in RGB.** Asked for it in HSL, React Aria\n * quietly draws the saturation and lightness plane instead, so a plane that\n * will not fade is the only sign anything was ignored.\n *\n * React Aria names the handle \"Color picker\" and announces both channels;\n * pass `aria-label` to say what the plane is for instead.\n *\n * The call site's `className` and `style` land on the square around the\n * plane rather than on the plane itself, so setting an `inlineSize` is what\n * resizes one — and it stays square, since two channels sharing a box want\n * equal travel. React Aria's function forms are not taken here for the same\n * reason `ColorSwatch` does not take them: the element they would read\n * state for is not the one a layout reaches.\n */\nfunction ColorArea({\n  className,\n  isDisabled = false,\n  style,\n  ...props\n}: ColorAreaProps) {\n  return <div {...mergeStyles({\n    0: {\n      className: \"x1plog1 x1xdvaa9 x9f619 xh8yej3\"\n    },\n    1: {\n      className: \"x1plog1 x1xdvaa9 x9f619 xh8yej3 x1ppv7y9\"\n    }\n  }[!!isDisabled << 0], {\n    className,\n    style\n  })}>\n      <RACColorArea isDisabled={isDisabled} {...props} {...{\n      0: {\n        className: \"x5yr21d x1xdvaa9 x9f619 xsid9ct xh8yej3 x5ve5x3\"\n      },\n      1: {\n        className: \"x5yr21d x1xdvaa9 x9f619 xh8yej3 x5ve5x3 x1h6gzvc\"\n      }\n    }[!!isDisabled << 0]}>\n        <RACColorThumb className={thumbClassName} />\n      </RACColorArea>\n    </div>;\n}\nexport type { ColorAreaProps };\nexport default ColorArea;"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkFA,SAAS,YAAU,EACjB,WACA,aAAa,OACb,OACA,GAAG,SACc;CACjB,OAAO,oBAAC,OAAD;EAAK,GAAI,YAAY;GAC1B,GAAG,EACD,WAAW,kCACb;GACA,GAAG,EACD,WAAW,2CACb;EACF,EAAE,CAAC,CAAC,cAAc,IAAI;GACpB;GACA;EACF,CAAC;EACG,UAAA,oBAAC,WAAD;GAA0B;GAAY,GAAI;GAAO,GAAI;IACrD,GAAG,EACD,WAAW,kDACb;IACA,GAAG,EACD,WAAW,mDACb;GACF,EAAE,CAAC,CAAC,cAAc;GACd,UAAA,oBAAC,YAAD,EAAe,WAAW,eAAe,CAAA;EAC7B,CAAA;CACX,CAAA;AACT"}
+{"version":3,"file":"index.js","names":["CSSProperties","ColorAreaProps","RACColorAreaProps","stylex","ColorArea","RACColorArea","ColorThumb","RACColorThumb","thumbClassName","mergeStyles","radii","stateLayerOpacity","Omit","className","style","t0","$","_c","props","t1","isDisabled","undefined","t2","0","1","t3","Symbol","for","t4","t5","t6","t7"],"sources":["../../../src/components/color-area/index.tsx"],"sourcesContent":["import type { CSSProperties } from 'react';\nimport type { ColorAreaProps as RACColorAreaProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { ColorArea as RACColorArea, ColorThumb as RACColorThumb } from 'react-aria-components';\nimport { thumbClassName } from '../../styles/color';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { radii, stateLayerOpacity } from '../../tokens/design.tokens.stylex';\n\n// Two channels of a colour at once, as a plane: one runs along the inline\n// axis and one along the block axis, and the handle sits where they meet.\n// React Aria paints both gradients on the plane's own inline `background`\n// and moves the handle in two axes, so what is here is the plane's shape and\n// the handle `ColorSlider` already draws, from `src/styles/color.ts`.\n//\n// The design carries no page for this, so the two choices below are the\n// library's own.\n//\n// **It is square, and takes the width it is given.** A plane has no natural\n// size, and a box that was not square would give its two channels unequal\n// travel — the same drag would move one further than the other, which is a\n// difference a reader cannot see and would feel as the control being wrong.\n//\n// **It carries no chequer, unlike a swatch or a colour slider's alpha\n// track.** Those two show the surface behind them where a colour thins out,\n// and a plane does not: React Aria stacks its gradients so the topmost is\n// opaque across the whole box, so nothing laid behind the plane is ever\n// seen. A chequer here was written first and then taken out, because it\n// could not be made to show under any pairing tried — including the RGB\n// alpha pairing whose gradient really does carry a `rgba(0, 0, 0, 0)` stop.\n//\n// **Alpha is a channel here only in RGB, and even there it does not thin\n// the plane.** Asked for it in HSL, React Aria draws the saturation and\n// lightness plane instead and says nothing — the gradients come out\n// identical to the pair it would have drawn anyway. It does not throw the\n// way an unknown channel does, so the only sign is a plane that will not\n// change, which is why it is written down here.\n\ntype ColorAreaProps = Omit<RACColorAreaProps, 'children' | 'className' | 'style'> & {\n  /**\n   * Lands on the square around the plane, which is the element a layout\n   * positions and the one that carries its size.\n   */\n  className?: string;\n  /** Lands on the square around the plane, as `className` does. */\n  style?: CSSProperties;\n};\n\n/**\n * Two channels of a colour as a plane, with a handle where they meet. The\n * value is React Aria's: pass `value` with `onChange` to control it, or\n * `defaultValue`, as a CSS colour string or a `Color` from `parseColor`,\n * which this package re-exports.\n *\n * ```tsx\n * <ColorArea\n *   defaultValue=\"hsl(200, 100%, 50%)\"\n *   xChannel=\"saturation\"\n *   yChannel=\"lightness\"\n * />\n * ```\n *\n * **`xChannel` and `yChannel` have to name channels the value's own space\n * has.** A hex or `rgb()` value parses as RGB, which has no saturation, so\n * naming one against it throws rather than converting — pass `colorSpace` to\n * convert it, or give the value in the space you mean to work in. The same\n * trap `ColorSlider` documents.\n *\n * **`alpha` is a channel here only in RGB.** Asked for it in HSL, React Aria\n * quietly draws the saturation and lightness plane instead, so a plane that\n * will not fade is the only sign anything was ignored.\n *\n * React Aria names the handle \"Color picker\" and announces both channels;\n * pass `aria-label` to say what the plane is for instead.\n *\n * The call site's `className` and `style` land on the square around the\n * plane rather than on the plane itself, so setting an `inlineSize` is what\n * resizes one — and it stays square, since two channels sharing a box want\n * equal travel. React Aria's function forms are not taken here for the same\n * reason `ColorSwatch` does not take them: the element they would read\n * state for is not the one a layout reaches.\n */\nfunction ColorArea({\n  className,\n  isDisabled = false,\n  style,\n  ...props\n}: ColorAreaProps) {\n  return <div {...mergeStyles({\n    0: {\n      className: \"x1plog1 x1xdvaa9 x9f619 xh8yej3\"\n    },\n    1: {\n      className: \"x1plog1 x1xdvaa9 x9f619 xh8yej3 x1ppv7y9\"\n    }\n  }[!!isDisabled << 0], {\n    className,\n    style\n  })}>\n      <RACColorArea isDisabled={isDisabled} {...props} {...{\n      0: {\n        className: \"x5yr21d x1xdvaa9 x9f619 xsid9ct xh8yej3 x5ve5x3\"\n      },\n      1: {\n        className: \"x5yr21d x1xdvaa9 x9f619 xh8yej3 x5ve5x3 x1h6gzvc\"\n      }\n    }[!!isDisabled << 0]}>\n        <RACColorThumb className={thumbClassName} />\n      </RACColorArea>\n    </div>;\n}\nexport type { ColorAreaProps };\nexport default ColorArea;"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkFA,SAAAI,YAAAW,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAJ;CAAA,IAAAK;CAAA,IAAAJ;CAAA,IAAAK;CAAA,IAAAH,EAAA,OAAAD,IAAA;EAAmB,CAAA,CAAAF,WAAAO,YAAAD,IAAAL,OAAA,GAAAI,SAAAH;EAKFC,EAAA,KAAAD;EAAAC,EAAA,KAAAH;EAAAG,EAAA,KAAAE;EAAAF,EAAA,KAAAF;EAAAE,EAAA,KAAAG;CAAA,OAAA;EAAAN,YAAAG,EAAA;EAAAE,QAAAF,EAAA;EAAAF,QAAAE,EAAA;EAAAG,KAAAH,EAAA;CAAA;CAHf,MAAAI,aAAAD,OAAAE,KAAAA,IAAA,QAAAF;CAAkB,IAAAG;CAAA,IAAAN,EAAA,OAAAH,aAAAG,EAAA,OAAAI,cAAAJ,EAAA,OAAAF,OAAA;EAIFQ,KAAAb,YAAY;GAAAc,GACvB,EAAAV,WACU,kCACb;GAACW,GACE,EAAAX,WACU,2CACb;EACF,EAAE,CAAC,CAACO,cAAc,IAAI;GAAAP;GAAAC;EAGtB,CAAC;EAACE,EAAA,KAAAH;EAAAG,EAAA,KAAAI;EAAAJ,EAAA,KAAAF;EAAAE,EAAA,KAAAM;CAAA,OAAAA,KAAAN,EAAA;CAAA,IAAAS;CAAA,IAAAT,EAAA,OAAAU,OAAAC,IAAA,2BAAA,GAAA;EACuDF,KAAA;GAAAF,GAClD,EAAAV,WACU,kDACb;GAACW,GACE,EAAAX,WACU,mDACb;EACF;EAACG,EAAA,KAAAS;CAAA,OAAAA,KAAAT,EAAA;CAPsD,MAAAY,KAAAH,GAOrD,CAAC,CAACL,cAAc;CAAE,IAAAS;CAAA,IAAAb,EAAA,QAAAU,OAAAC,IAAA,2BAAA,GAAA;EAChBE,KAAA,oBAAC,YAAD,EAA0BrB,WAAAA,eAAc,CAAA;EAAIQ,EAAA,MAAAa;CAAA,OAAAA,KAAAb,EAAA;CAAA,IAAAc;CAAA,IAAAd,EAAA,QAAAI,cAAAJ,EAAA,QAAAE,SAAAF,EAAA,QAAAY,IAAA;EAR9CE,KAAA,oBAAC,WAAD;GAA0BV;GAAU,GAAMF;GAAK,GAAMU;GAQnDC,UAAAA;EARW,CAAA;EASEb,EAAA,MAAAI;EAAAJ,EAAA,MAAAE;EAAAF,EAAA,MAAAY;EAAAZ,EAAA,MAAAc;CAAA,OAAAA,KAAAd,EAAA;CAAA,IAAAe;CAAA,IAAAf,EAAA,QAAAM,MAAAN,EAAA,QAAAc,IAAA;EApBZC,KAAA,oBAAA,OAAA;GAqBC,GArBQT;GAWZQ,UAAAA;EAUI,CAAA;EAAAd,EAAA,MAAAM;EAAAN,EAAA,MAAAc;EAAAd,EAAA,MAAAe;CAAA,OAAAA,KAAAf,EAAA;CAAA,OArBDe;AAqBC"}

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

@@ -2,6 +2,7 @@ import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { mergeStatefulStyles } from "../../styles/merge.js";
 import { fieldStyles, invalidFrom, useFieldValidationBehavior } from "../../field/root.js";
 import { FieldBox, FieldInput, FieldMessage } from "../../field/index.js";
+import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ColorField } from "react-aria-components";
 //#region src/components/color-field/index.tsx
@@ -22,26 +23,74 @@ import { ColorField } from "react-aria-components";
 * with every other field. The call site's `className` and `style` land on
 * the field as a whole, which is the element a layout positions.
 */
-function ColorField$1({ description, error, floatingLabel = true, isDisabled = false, label, leadingIcon, trailingIcon, variant = "filled", ...props$1 }) {
+function ColorField$1(t0) {
+	const $ = c(21);
+	const { description, error, floatingLabel: t1, isDisabled: t2, label, leadingIcon, trailingIcon, 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();
-	return /* @__PURE__ */ jsxs(ColorField, {
-		isDisabled,
-		isInvalid: invalidFrom(error),
-		validationBehavior,
-		...props$1,
-		...mergeStatefulStyles(props(fieldStyles.root), props$1),
-		children: [/* @__PURE__ */ jsx(FieldBox, {
+	const T0 = ColorField;
+	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] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = /* @__PURE__ */ jsx(FieldInput, {});
+		$[2] = t6;
+	} else t6 = $[2];
+	let t7;
+	if ($[3] !== floatingLabel || $[4] !== label || $[5] !== leadingIcon || $[6] !== trailingIcon || $[7] !== variant) {
+		t7 = /* @__PURE__ */ jsx(FieldBox, {
 			floatingLabel,
 			label,
 			leading: leadingIcon,
 			trailing: trailingIcon,
 			variant,
-			children: /* @__PURE__ */ jsx(FieldInput, {})
-		}), /* @__PURE__ */ jsx(FieldMessage, {
+			children: t6
+		});
+		$[3] = floatingLabel;
+		$[4] = label;
+		$[5] = leadingIcon;
+		$[6] = trailingIcon;
+		$[7] = variant;
+		$[8] = t7;
+	} else t7 = $[8];
+	let t8;
+	if ($[9] !== description || $[10] !== error) {
+		t8 = /* @__PURE__ */ jsx(FieldMessage, {
 			description,
 			error
-		})]
-	});
+		});
+		$[9] = description;
+		$[10] = error;
+		$[11] = t8;
+	} else t8 = $[11];
+	let t9;
+	if ($[12] !== T0 || $[13] !== isDisabled || $[14] !== props$1 || $[15] !== t4 || $[16] !== t5 || $[17] !== t7 || $[18] !== t8 || $[19] !== validationBehavior) {
+		t9 = /* @__PURE__ */ jsxs(T0, {
+			isDisabled,
+			isInvalid: t4,
+			validationBehavior,
+			...props$1,
+			...t5,
+			children: [t7, t8]
+		});
+		$[12] = T0;
+		$[13] = isDisabled;
+		$[14] = props$1;
+		$[15] = t4;
+		$[16] = t5;
+		$[17] = t7;
+		$[18] = t8;
+		$[19] = validationBehavior;
+		$[20] = t9;
+	} else t9 = $[20];
+	return t9;
 }
 //#endregion
 export { ColorField$1 as default };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/color-field/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { ColorFieldProps as RACColorFieldProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { ColorField as RACColorField } from 'react-aria-components';\nimport { FieldBox, FieldInput, FieldMessage } from '../../field';\nimport { fieldStyles, invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { mergeStatefulStyles } from '../../styles/merge';\n\n// A colour typed rather than picked. React Aria renders a plain text input\n// holding the colour's own notation, so this is the text fields page's box\n// with nothing added — the same chrome `TextField` draws through, which is\n// what makes a colour field on a form the same shape as the field beside\n// it.\n//\n// Two things are worth knowing about what it holds.\n//\n// **`channel` turns it from a colour into a number.** Without one the field\n// holds the whole colour — `#6750A4` — and parses what is typed. With one\n// it holds that channel alone, as a number a reader can step, which is what\n// a picker's three boxes beside a plane are.\n//\n// **A swatch is the natural leading icon.** The field's value is a colour,\n// and the chrome already has a slot for something at the box's leading end;\n// passing a `ColorSwatch` there is what makes the field show the colour it\n// holds. It is left to the call site rather than drawn here, since a field\n// inside a picker sits beside a swatch already.\n\ntype ColorFieldProps = Omit<RACColorFieldProps, 'children' | 'className' | 'style'> & {\n  /** A function may compute the class from the field's render state. */\n  className?: RACColorFieldProps['className'];\n  /** Supporting text under the field. */\n  description?: string;\n  /** The message shown instead of the description, which also marks the field invalid. */\n  error?: string;\n  /**\n   * Whether the label floats into the box's top once the field holds a\n   * value, rather than sitting above it.\n   * @default true\n   */\n  floatingLabel?: boolean;\n  /** What the field is for. Always rendered; never a placeholder. */\n  label: string;\n  /** An icon at the box's leading end. A `ColorSwatch` shows the value. */\n  leadingIcon?: ReactNode;\n  /** A function may compute the style from the field's render state. */\n  style?: RACColorFieldProps['style'];\n  /** An icon at the box's trailing end. */\n  trailingIcon?: ReactNode;\n  /**\n   * Which of the text fields page's two boxes to draw.\n   * @default 'filled'\n   */\n  variant?: 'filled' | 'outlined';\n};\n\n/**\n * A colour typed into a field. 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 * <ColorField defaultValue=\"#6750A4\" label=\"Label\" />\n * ```\n *\n * Without `channel` the field holds the whole colour and parses what is\n * typed; with one it holds that channel alone as a number. `colorSpace`\n * decides which space a channel belongs to, the same as on `ColorSlider`.\n *\n * The box, label and message are the field chrome in `src/field`, shared\n * with every other field. The call site's `className` and `style` land on\n * the field as a whole, which is the element a layout positions.\n */\nfunction ColorField({\n  description,\n  error,\n  floatingLabel = true,\n  isDisabled = false,\n  label,\n  leadingIcon,\n  trailingIcon,\n  variant = 'filled',\n  ...props\n}: ColorFieldProps) {\n  const validationBehavior = useFieldValidationBehavior();\n  return <RACColorField isDisabled={isDisabled} isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(fieldStyles.root), props)}>\n      <FieldBox floatingLabel={floatingLabel} label={label} leading={leadingIcon} trailing={trailingIcon} variant={variant}>\n        <FieldInput />\n      </FieldBox>\n      <FieldMessage description={description} error={error} />\n    </RACColorField>;\n}\nexport type { ColorFieldProps };\nexport default ColorField;"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAwEA,SAAS,aAAW,EAClB,aACA,OACA,gBAAgB,MAChB,aAAa,OACb,OACA,aACA,cACA,UAAU,UACV,GAAG,WACe;CAClB,MAAM,qBAAqB,2BAA2B;CACtD,OAAO,qBAAC,YAAD;EAA2B;EAAY,WAAW,YAAY,KAAK;EAAuB;EAAoB,GAAI;EAAO,GAAI,oBAAoB,MAAa,YAAY,IAAI,GAAG,OAAK;EAAtL,UAAA,CACH,oBAAC,UAAD;GAAyB;GAAsB;GAAO,SAAS;GAAa,UAAU;GAAuB;GAC3G,UAAA,oBAAC,YAAD,CAAW,CAAA;EACH,CAAA,GACV,oBAAC,cAAD;GAA2B;GAAoB;EAAM,CAAA,CACxC;;AACnB"}
+{"version":3,"file":"index.js","names":["ReactNode","ColorFieldProps","RACColorFieldProps","stylex","ColorField","RACColorField","FieldBox","FieldInput","FieldMessage","fieldStyles","invalidFrom","useFieldValidationBehavior","mergeStatefulStyles","Omit","className","description","error","floatingLabel","label","leadingIcon","style","trailingIcon","variant","t0","$","_c","t1","isDisabled","t2","t3","props","undefined","validationBehavior","T0","t4","t5","root","t6","Symbol","for","t7","t8","t9"],"sources":["../../../src/components/color-field/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { ColorFieldProps as RACColorFieldProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { ColorField as RACColorField } from 'react-aria-components';\nimport { FieldBox, FieldInput, FieldMessage } from '../../field';\nimport { fieldStyles, invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { mergeStatefulStyles } from '../../styles/merge';\n\n// A colour typed rather than picked. React Aria renders a plain text input\n// holding the colour's own notation, so this is the text fields page's box\n// with nothing added — the same chrome `TextField` draws through, which is\n// what makes a colour field on a form the same shape as the field beside\n// it.\n//\n// Two things are worth knowing about what it holds.\n//\n// **`channel` turns it from a colour into a number.** Without one the field\n// holds the whole colour — `#6750A4` — and parses what is typed. With one\n// it holds that channel alone, as a number a reader can step, which is what\n// a picker's three boxes beside a plane are.\n//\n// **A swatch is the natural leading icon.** The field's value is a colour,\n// and the chrome already has a slot for something at the box's leading end;\n// passing a `ColorSwatch` there is what makes the field show the colour it\n// holds. It is left to the call site rather than drawn here, since a field\n// inside a picker sits beside a swatch already.\n\ntype ColorFieldProps = Omit<RACColorFieldProps, 'children' | 'className' | 'style'> & {\n  /** A function may compute the class from the field's render state. */\n  className?: RACColorFieldProps['className'];\n  /** Supporting text under the field. */\n  description?: string;\n  /** The message shown instead of the description, which also marks the field invalid. */\n  error?: string;\n  /**\n   * Whether the label floats into the box's top once the field holds a\n   * value, rather than sitting above it.\n   * @default true\n   */\n  floatingLabel?: boolean;\n  /** What the field is for. Always rendered; never a placeholder. */\n  label: string;\n  /** An icon at the box's leading end. A `ColorSwatch` shows the value. */\n  leadingIcon?: ReactNode;\n  /** A function may compute the style from the field's render state. */\n  style?: RACColorFieldProps['style'];\n  /** An icon at the box's trailing end. */\n  trailingIcon?: ReactNode;\n  /**\n   * Which of the text fields page's two boxes to draw.\n   * @default 'filled'\n   */\n  variant?: 'filled' | 'outlined';\n};\n\n/**\n * A colour typed into a field. 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 * <ColorField defaultValue=\"#6750A4\" label=\"Label\" />\n * ```\n *\n * Without `channel` the field holds the whole colour and parses what is\n * typed; with one it holds that channel alone as a number. `colorSpace`\n * decides which space a channel belongs to, the same as on `ColorSlider`.\n *\n * The box, label and message are the field chrome in `src/field`, shared\n * with every other field. The call site's `className` and `style` land on\n * the field as a whole, which is the element a layout positions.\n */\nfunction ColorField({\n  description,\n  error,\n  floatingLabel = true,\n  isDisabled = false,\n  label,\n  leadingIcon,\n  trailingIcon,\n  variant = 'filled',\n  ...props\n}: ColorFieldProps) {\n  const validationBehavior = useFieldValidationBehavior();\n  return <RACColorField isDisabled={isDisabled} isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(fieldStyles.root), props)}>\n      <FieldBox floatingLabel={floatingLabel} label={label} leading={leadingIcon} trailing={trailingIcon} variant={variant}>\n        <FieldInput />\n      </FieldBox>\n      <FieldMessage description={description} error={error} />\n    </RACColorField>;\n}\nexport type { ColorFieldProps };\nexport default ColorField;"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAwEA,SAAAI,aAAAmB,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAoB,MAAA,EAAAV,aAAAC,OAAAC,eAAAS,IAAAC,YAAAC,IAAAV,OAAAC,aAAAE,cAAAC,SAAAO,IAAA,GAAAC,YAAAP;CAGlB,MAAAN,gBAAAS,OAAAK,KAAAA,IAAA,OAAAL;CACA,MAAAC,aAAAC,OAAAG,KAAAA,IAAA,QAAAH;CAIA,MAAAN,UAAAO,OAAAE,KAAAA,IAAA,WAAAF;CAGA,MAAAG,qBAA2BrB,2BAA2B;CAC9C,MAAAsB,KAAA5B;CAAa,IAAA6B;CAAA,IAAAV,EAAA,OAAAR,OAAA;EAAoCkB,KAAAxB,YAAYM,KAAK;EAACQ,EAAA,KAAAR;EAAAQ,EAAA,KAAAU;CAAA,OAAAA,KAAAV,EAAA;CAAyD,MAAAW,KAAAvB,oBAAoBT,MAAaM,YAAW2B,IAAK,GAAGN,OAAK;CAAC,IAAAO;CAAA,IAAAb,EAAA,OAAAc,OAAAC,IAAA,2BAAA,GAAA;EAExLF,KAAA,oBAAC,YAAD,CAAW,CAAA;EAAGb,EAAA,KAAAa;CAAA,OAAAA,KAAAb,EAAA;CAAA,IAAAgB;CAAA,IAAAhB,EAAA,OAAAP,iBAAAO,EAAA,OAAAN,SAAAM,EAAA,OAAAL,eAAAK,EAAA,OAAAH,gBAAAG,EAAA,OAAAF,SAAA;EADhBkB,KAAA,oBAAC,UAAD;GAAyBvB;GAAsBC;GAAgBC,SAAAA;GAAuBE,UAAAA;GAAuBC;GAC3Ge,UAAAA;EADO,CAAA;EAEEb,EAAA,KAAAP;EAAAO,EAAA,KAAAN;EAAAM,EAAA,KAAAL;EAAAK,EAAA,KAAAH;EAAAG,EAAA,KAAAF;EAAAE,EAAA,KAAAgB;CAAA,OAAAA,KAAAhB,EAAA;CAAA,IAAAiB;CAAA,IAAAjB,EAAA,OAAAT,eAAAS,EAAA,QAAAR,OAAA;EACXyB,KAAA,oBAAC,cAAD;GAA2B1B;GAAoBC;EAAK,CAAA;EAAIQ,EAAA,KAAAT;EAAAS,EAAA,MAAAR;EAAAQ,EAAA,MAAAiB;CAAA,OAAAA,KAAAjB,EAAA;CAAA,IAAAkB;CAAA,IAAAlB,EAAA,QAAAS,MAAAT,EAAA,QAAAG,cAAAH,EAAA,QAAAM,WAAAN,EAAA,QAAAU,MAAAV,EAAA,QAAAW,MAAAX,EAAA,QAAAgB,MAAAhB,EAAA,QAAAiB,MAAAjB,EAAA,QAAAQ,oBAAA;EAJrDU,KAAA,qBAAC,IAAD;GAA2Bf;GAAuB,WAAAO;GAAwCF;GAAkB,GAAMF;GAAK,GAAMK;GAA7H,UAAA,CACHK,IAGAC,EAJiB;;EAKHjB,EAAA,MAAAS;EAAAT,EAAA,MAAAG;EAAAH,EAAA,MAAAM;EAAAN,EAAA,MAAAU;EAAAV,EAAA,MAAAW;EAAAX,EAAA,MAAAgB;EAAAhB,EAAA,MAAAiB;EAAAjB,EAAA,MAAAQ;EAAAR,EAAA,MAAAkB;CAAA,OAAAA,KAAAlB,EAAA;CAAA,OALXkB;AAKW"}