@kanso-labs/kanso-ui 0.26.2 → 0.26.3

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

@@ -6,6 +6,7 @@ import { overlay } from "../../styles/overlay.js";
 import { picker } from "../../styles/picker.js";
 import ColorSlider$1 from "../color-slider/index.js";
 import ColorSwatch$1 from "../color-swatch/index.js";
+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
@@ -33,52 +34,154 @@ import { Button, ColorPicker, Dialog, DialogTrigger, Popover } from "react-aria-
 * The call site's `className` and `style` land on the trigger, which is the
 * element a layout positions.
 */
-function ColorPicker$1({ alpha = false, children, className, defaultOpen, isDisabled = false, isOpen, label, onOpenChange, style, ...props$1 }) {
-	return /* @__PURE__ */ jsx(ColorPicker, {
-		...props$1,
-		children: /* @__PURE__ */ jsxs(DialogTrigger, {
+function ColorPicker$1(t0) {
+	const $ = c(36);
+	let children;
+	let className;
+	let defaultOpen;
+	let isOpen;
+	let label;
+	let onOpenChange;
+	let props$1;
+	let style;
+	let t1;
+	let t2;
+	if ($[0] !== t0) {
+		({alpha: t1, children, className, defaultOpen, isDisabled: t2, isOpen, label, onOpenChange, style, ...props$1} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = defaultOpen;
+		$[4] = isOpen;
+		$[5] = label;
+		$[6] = onOpenChange;
+		$[7] = props$1;
+		$[8] = style;
+		$[9] = t1;
+		$[10] = t2;
+	} else {
+		children = $[1];
+		className = $[2];
+		defaultOpen = $[3];
+		isOpen = $[4];
+		label = $[5];
+		onOpenChange = $[6];
+		props$1 = $[7];
+		style = $[8];
+		t1 = $[9];
+		t2 = $[10];
+	}
+	const alpha = t1 === void 0 ? false : t1;
+	const isDisabled = t2 === void 0 ? false : t2;
+	let t3;
+	if ($[11] !== className || $[12] !== style) {
+		t3 = mergeStatefulStyles(_temp, {
+			className,
+			style
+		});
+		$[11] = className;
+		$[12] = style;
+		$[13] = t3;
+	} else t3 = $[13];
+	let t4;
+	if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = /* @__PURE__ */ jsx(ColorSwatch$1, { className: "xxk0z11 x2lah0s xvy4d1p" });
+		$[14] = t4;
+	} else t4 = $[14];
+	let t5;
+	if ($[15] !== isDisabled || $[16] !== label || $[17] !== t3) {
+		t5 = /* @__PURE__ */ jsxs(Button, {
+			isDisabled,
+			...t3,
+			children: [t4, label]
+		});
+		$[15] = isDisabled;
+		$[16] = label;
+		$[17] = t3;
+		$[18] = t5;
+	} else t5 = $[18];
+	let t6;
+	if ($[19] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = props(overlay.popup, picker.popover);
+		$[19] = t6;
+	} else t6 = $[19];
+	let t7;
+	if ($[20] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = props(overlay.popupDialog);
+		$[20] = t7;
+	} else t7 = $[20];
+	let t8;
+	if ($[21] !== alpha || $[22] !== children || $[23] !== label) {
+		t8 = children ?? /* @__PURE__ */ jsxs("div", {
+			className: "x9f619 x78zum5 xdt5ytf x1gka490 x1dz1jew x193iq5w xgc26li",
+			children: [
+				/* @__PURE__ */ jsx(ColorArea$1, {
+					"aria-label": label,
+					colorSpace: "hsl",
+					xChannel: "saturation",
+					yChannel: "lightness"
+				}),
+				/* @__PURE__ */ jsx(ColorSlider$1, {
+					channel: "hue",
+					colorSpace: "hsl",
+					label: "Hue"
+				}),
+				alpha ? /* @__PURE__ */ jsx(ColorSlider$1, {
+					channel: "alpha",
+					label: "Alpha"
+				}) : null,
+				/* @__PURE__ */ jsx(ColorField$1, { label })
+			]
+		});
+		$[21] = alpha;
+		$[22] = children;
+		$[23] = label;
+		$[24] = t8;
+	} else t8 = $[24];
+	let t9;
+	if ($[25] !== t8) {
+		t9 = /* @__PURE__ */ jsx(Popover, {
+			...t6,
+			children: /* @__PURE__ */ jsx(Dialog, {
+				...t7,
+				children: t8
+			})
+		});
+		$[25] = t8;
+		$[26] = t9;
+	} else t9 = $[26];
+	let t10;
+	if ($[27] !== defaultOpen || $[28] !== isOpen || $[29] !== onOpenChange || $[30] !== t5 || $[31] !== t9) {
+		t10 = /* @__PURE__ */ jsxs(DialogTrigger, {
 			defaultOpen,
 			isOpen,
 			onOpenChange,
-			children: [/* @__PURE__ */ jsxs(Button, {
-				isDisabled,
-				...mergeStatefulStyles((state) => ({
-					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], {
-					className,
-					style
-				}),
-				children: [/* @__PURE__ */ jsx(ColorSwatch$1, { className: "xxk0z11 x2lah0s xvy4d1p" }), label]
-			}), /* @__PURE__ */ jsx(Popover, {
-				...props(overlay.popup, picker.popover),
-				children: /* @__PURE__ */ jsx(Dialog, {
-					...props(overlay.popupDialog),
-					children: children ?? /* @__PURE__ */ jsxs("div", {
-						className: "x9f619 x78zum5 xdt5ytf x1gka490 x1dz1jew x193iq5w xgc26li",
-						children: [
-							/* @__PURE__ */ jsx(ColorArea$1, {
-								"aria-label": label,
-								colorSpace: "hsl",
-								xChannel: "saturation",
-								yChannel: "lightness"
-							}),
-							/* @__PURE__ */ jsx(ColorSlider$1, {
-								channel: "hue",
-								colorSpace: "hsl",
-								label: "Hue"
-							}),
-							alpha ? /* @__PURE__ */ jsx(ColorSlider$1, {
-								channel: "alpha",
-								label: "Alpha"
-							}) : null,
-							/* @__PURE__ */ jsx(ColorField$1, { label })
-						]
-					})
-				})
-			})]
-		})
-	});
+			children: [t5, t9]
+		});
+		$[27] = defaultOpen;
+		$[28] = isOpen;
+		$[29] = onOpenChange;
+		$[30] = t5;
+		$[31] = t9;
+		$[32] = t10;
+	} else t10 = $[32];
+	let t11;
+	if ($[33] !== props$1 || $[34] !== t10) {
+		t11 = /* @__PURE__ */ jsx(ColorPicker, {
+			...props$1,
+			children: t10
+		});
+		$[33] = props$1;
+		$[34] = t10;
+		$[35] = t11;
+	} else t11 = $[35];
+	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];
 }
 //#endregion
 export { ColorPicker$1 as default };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8FA,SAAS,cAAY,EACnB,QAAQ,OACR,UACA,WACA,aACA,aAAa,OACb,QACA,OACA,cACA,OACA,GAAG,WACgB;CACnB,OAAO,oBAAC,aAAD;EAAgB,GAAI;EACvB,UAAA,qBAAC,eAAD;GAA+B;GAAqB;GAAsB;GAA1E,UAAA,CACE,qBAAC,QAAD;IAAuB;IAAY,GAAI,qBAKxC,WAA8B;KAC7B,GAAG,EACD,WAAW,sMACb;KACA,GAAG,EACD,WAAW,sLACb;IACF,EAAA,CAAG,CAAC,CAAC,MAAM,cAAc,IAAI;KAC3B;KACA;IACF,CAAC;IAfC,UAAA,CAgBE,oBAAC,eAAD,EAAa,WAAU,0BAAyB,CAAA,GAC/C,KACQ;GACX,CAAA,GAAA,oBAAC,SAAD;IAAY,GAAI,MAAa,QAAQ,OAAO,OAAO,OAAO;IACxD,UAAA,oBAAC,QAAD;KAAW,GAAI,MAAa,QAAQ,WAAW;KAC5C,UAAA,YAAY,qBAAC,OAAD;MAAK,WAAU;MAAf,UAAA;OACT,oBAAC,aAAD;QAAW,cAAY;QAAO,YAAW;QAAM,UAAS;QAAa,UAAS;OAAW,CAAA;OACzF,oBAAC,eAAD;QAAa,SAAQ;QAAM,YAAW;QAAM,OAAM;OAAK,CAAA;OACtD,QAAQ,oBAAC,eAAD;QAAa,SAAQ;QAAQ,OAAM;OAAO,CAAA,IAAM;OACzD,oBAAC,cAAD,EAAmB,MAAM,CAAA;MACtB;;IACE,CAAA;GACD,CAAA,CACI;;CACJ,CAAA;AACpB"}
+{"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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"}

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

@@ -3,6 +3,7 @@ import { mergeStatefulStyles } from "../../styles/merge.js";
 import { FieldLabel } from "../../field/index.js";
 import { thumbClassName } from "../../styles/color.js";
 import { chequer } from "../../styles/chequer.js";
+import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ColorSlider, ColorThumb, SliderOutput, SliderTrack } from "react-aria-components";
 //#region src/components/color-slider/index.tsx
@@ -41,28 +42,122 @@ const styles = {
 * The call site's `className` and `style` land on the slider as a whole,
 * which is the element a layout positions.
 */
-function ColorSlider$1({ isDisabled = false, label, showValue = true, ...props$1 }) {
-	return /* @__PURE__ */ jsxs(ColorSlider, {
-		isDisabled,
-		...props$1,
-		...mergeStatefulStyles({ className: "x9f619 x78zum5 xdt5ytf xzoy561 xh8yej3" }, props$1),
-		children: [/* @__PURE__ */ jsxs("div", {
+function ColorSlider$1(t0) {
+	const $ = c(31);
+	let T0;
+	let isDisabled;
+	let label;
+	let showValue;
+	let t1;
+	let t2;
+	let t3;
+	if ($[0] !== t0) {
+		const { isDisabled: t4, label: t5, showValue: t6, ...props } = t0;
+		label = t5;
+		isDisabled = t4 === void 0 ? false : t4;
+		showValue = t6 === void 0 ? true : t6;
+		T0 = ColorSlider;
+		t1 = isDisabled;
+		t2 = props;
+		t3 = mergeStatefulStyles({ className: "x9f619 x78zum5 xdt5ytf xzoy561 xh8yej3" }, props);
+		$[0] = t0;
+		$[1] = T0;
+		$[2] = isDisabled;
+		$[3] = label;
+		$[4] = showValue;
+		$[5] = t1;
+		$[6] = t2;
+		$[7] = t3;
+	} else {
+		T0 = $[1];
+		isDisabled = $[2];
+		label = $[3];
+		showValue = $[4];
+		t1 = $[5];
+		t2 = $[6];
+		t3 = $[7];
+	}
+	let t4;
+	if ($[8] !== label) {
+		t4 = label === void 0 ? null : /* @__PURE__ */ jsx(FieldLabel, {
+			className: "xkknnkr x14zspaw x1v9cpvo x155f00i x1lz68p4",
+			children: label
+		});
+		$[8] = label;
+		$[9] = t4;
+	} else t4 = $[9];
+	let t5;
+	if ($[10] !== showValue) {
+		t5 = showValue ? /* @__PURE__ */ jsx(SliderOutput, { className: "x1w5n3ug x1yicsit x1b35g6e xwth0xh xybisxh xvc5jky" }) : null;
+		$[10] = showValue;
+		$[11] = t5;
+	} else t5 = $[11];
+	let t6;
+	if ($[12] !== t4 || $[13] !== t5) {
+		t6 = /* @__PURE__ */ jsxs("div", {
 			className: "x1pha0wt x78zum5 x126z3so",
-			children: [label === void 0 ? null : /* @__PURE__ */ jsx(FieldLabel, {
-				className: "xkknnkr x14zspaw x1v9cpvo x155f00i x1lz68p4",
-				children: label
-			}), showValue ? /* @__PURE__ */ jsx(SliderOutput, { className: "x1w5n3ug x1yicsit x1b35g6e xwth0xh xybisxh xvc5jky" }) : null]
-		}), /* @__PURE__ */ jsx("div", {
-			...props(chequer.ground, styles.trackGround, isDisabled && styles.trackGroundDisabled),
-			children: /* @__PURE__ */ jsx(SliderTrack, {
-				...{
-					0: { className: "x1cpjm7i x1mtdikz xm4btww x1hmns74 x5yr21d x9f619 x1ypdohk xh8yej3 x1n2onr6" },
-					1: { className: "x1cpjm7i x1mtdikz xm4btww x1hmns74 x5yr21d x9f619 xh8yej3 x1n2onr6 x1h6gzvc" }
-				}[!!isDisabled << 0],
-				children: /* @__PURE__ */ jsx(ColorThumb, { className: thumbClassName })
-			})
-		})]
-	});
+			children: [t4, t5]
+		});
+		$[12] = t4;
+		$[13] = t5;
+		$[14] = t6;
+	} else t6 = $[14];
+	let t7;
+	if ($[15] !== isDisabled) {
+		t7 = props(chequer.ground, styles.trackGround, isDisabled && styles.trackGroundDisabled);
+		$[15] = isDisabled;
+		$[16] = t7;
+	} else t7 = $[16];
+	let t8;
+	if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
+		t8 = {
+			0: { className: "x1cpjm7i x1mtdikz xm4btww x1hmns74 x5yr21d x9f619 x1ypdohk xh8yej3 x1n2onr6" },
+			1: { className: "x1cpjm7i x1mtdikz xm4btww x1hmns74 x5yr21d x9f619 xh8yej3 x1n2onr6 x1h6gzvc" }
+		};
+		$[17] = t8;
+	} else t8 = $[17];
+	const t9 = t8[!!isDisabled << 0];
+	let t10;
+	if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
+		t10 = /* @__PURE__ */ jsx(ColorThumb, { className: thumbClassName });
+		$[18] = t10;
+	} else t10 = $[18];
+	let t11;
+	if ($[19] !== t9) {
+		t11 = /* @__PURE__ */ jsx(SliderTrack, {
+			...t9,
+			children: t10
+		});
+		$[19] = t9;
+		$[20] = t11;
+	} else t11 = $[20];
+	let t12;
+	if ($[21] !== t11 || $[22] !== t7) {
+		t12 = /* @__PURE__ */ jsx("div", {
+			...t7,
+			children: t11
+		});
+		$[21] = t11;
+		$[22] = t7;
+		$[23] = t12;
+	} else t12 = $[23];
+	let t13;
+	if ($[24] !== T0 || $[25] !== t1 || $[26] !== t12 || $[27] !== t2 || $[28] !== t3 || $[29] !== t6) {
+		t13 = /* @__PURE__ */ jsxs(T0, {
+			isDisabled: t1,
+			...t2,
+			...t3,
+			children: [t6, t12]
+		});
+		$[24] = T0;
+		$[25] = t1;
+		$[26] = t12;
+		$[27] = t2;
+		$[28] = t3;
+		$[29] = t6;
+		$[30] = t13;
+	} else t13 = $[30];
+	return t13;
 }
 //#endregion
 export { ColorSlider$1 as default };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/color-slider/index.tsx"],"sourcesContent":["import type { ColorSliderProps as RACColorSliderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { ColorSlider as RACColorSlider, ColorThumb as RACColorThumb, SliderOutput as RACSliderOutput, SliderTrack as RACSliderTrack } from 'react-aria-components';\nimport { FieldLabel } from '../../field';\nimport { chequer } from '../../styles/chequer';\nimport { thumbClassName } from '../../styles/color';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\n\n// The sliders page's track, carrying one channel of a colour instead of an\n// active and an inactive part: the page's 16dp strip with its 8dp corner,\n// centred in the 44dp a handle takes, and the same label-large label above\n// it. React Aria paints the gradient itself, on the track's own inline\n// `background`, so what runs along the strip is the channel rather than\n// anything chosen here.\n//\n// Three things depart from the page, each because a colour slider shows a\n// value the page's slider does not have.\n//\n// **The handle is a circle carrying the colour, not the page's 4dp bar.**\n// The page's handle is a mark on a track whose colour it already knows; this\n// one has to show the value it sits on, and 4dp of a colour is not a colour\n// anyone can read. It keeps the page's 44dp of height as the target it is\n// centred in.\n//\n// **The handle is ringed rather than filled with primary.** Its fill is the\n// value, so the ring is what has to read against it — and against every\n// other colour the track runs through. It is a surface-coloured ring with a\n// hairline outside it, which reads on a light track and a dark one alike.\n//\n// **There is no stop at the inactive end.** The page puts one 6dp from the\n// end of the inactive part; a channel has no inactive part, so there is no\n// end for it to mark.\n//\n// The alpha channel is the one that needs a chequer, for the reason\n// `src/styles/chequer.ts` gives: a track fading to transparent over a light\n// surface and one fading to white are the same pixels without it.\n\nconst styles = {\n  trackGround: {\n    kZKoxP: \"xlup9mm\",\n    kaIpWk: \"x1xdvaa9\",\n    kB7OPa: \"x9f619\",\n    kzqmXN: \"xh8yej3\",\n    kqGvvJ: \"x2k5q2m\",\n    $$css: true\n  },\n  trackGroundDisabled: {\n    kSiTet: \"x1ppv7y9\",\n    $$css: true\n  }\n};\ntype ColorSliderProps = Omit<RACColorSliderProps, 'children' | 'className' | 'style'> & {\n  /** A function may compute the class from the slider's render state. */\n  className?: RACColorSliderProps['className'];\n  /** What the slider is for. Always rendered; React Aria names the channel otherwise. */\n  label?: string;\n  /**\n   * Whether the value React Aria announces is also shown, at the end of the\n   * label's line.\n   * @default true\n   */\n  showValue?: boolean;\n  /** A function may compute the style from the slider's render state. */\n  style?: RACColorSliderProps['style'];\n};\n\n/**\n * A slider over one channel of a colour — hue, saturation, lightness, alpha\n * and the rest. The value is React Aria's: pass `value` with `onChange` to\n * control it, or `defaultValue`, as a CSS colour string or a `Color` from\n * `parseColor`, which this package re-exports.\n *\n * ```tsx\n * <ColorSlider channel=\"hue\" defaultValue=\"hsl(200, 100%, 50%)\" label=\"Label\" />\n * ```\n *\n * **`channel` has to name a channel the value's own space has.** A hex or\n * `rgb()` value parses as RGB, which has no hue, so `channel=\"hue\"` against\n * one throws rather than converting — pass `colorSpace=\"hsl\"` to convert it,\n * or give the value in the space you mean to slide.\n *\n * React Aria paints the gradient and names the value — \"200°, cyan blue\" —\n * so the readout beside the label is what it announces.\n *\n * The call site's `className` and `style` land on the slider as a whole,\n * which is the element a layout positions.\n */\nfunction ColorSlider({\n  isDisabled = false,\n  label,\n  showValue = true,\n  ...props\n}: ColorSliderProps) {\n  return <RACColorSlider isDisabled={isDisabled} {...props} {...mergeStatefulStyles({\n    className: \"x9f619 x78zum5 xdt5ytf xzoy561 xh8yej3\"\n  }, props)}>\n      <div className=\"x1pha0wt x78zum5 x126z3so\">\n        {label === undefined ? null : <FieldLabel className=\"xkknnkr x14zspaw x1v9cpvo x155f00i x1lz68p4\">{label}</FieldLabel>}\n        {showValue ? <RACSliderOutput className=\"x1w5n3ug x1yicsit x1b35g6e xwth0xh xybisxh xvc5jky\" /> : null}\n      </div>\n      <div {...stylex.props(chequer.ground, styles.trackGround, isDisabled && styles.trackGroundDisabled)}>\n        <RACSliderTrack {...{\n        0: {\n          className: \"x1cpjm7i x1mtdikz xm4btww x1hmns74 x5yr21d x9f619 x1ypdohk xh8yej3 x1n2onr6\"\n        },\n        1: {\n          className: \"x1cpjm7i x1mtdikz xm4btww x1hmns74 x5yr21d x9f619 xh8yej3 x1n2onr6 x1h6gzvc\"\n        }\n      }[!!isDisabled << 0]}>\n          <RACColorThumb className={thumbClassName} />\n        </RACSliderTrack>\n      </div>\n    </RACColorSlider>;\n}\nexport type { ColorSliderProps };\nexport default ColorSlider;"],"mappings":";;;;;;;;AAuCA,MAAM,SAAS;CACb,aAAa;EACX,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,qBAAqB;EACnB,QAAQ;EACR,OAAO;CACT;AACF;;;;;;;;;;;;;;;;;;;;;;AAqCA,SAAS,cAAY,EACnB,aAAa,OACb,OACA,YAAY,MACZ,GAAG,WACgB;CACnB,OAAO,qBAAC,aAAD;EAA4B;EAAY,GAAI;EAAO,GAAI,oBAAoB,EAChF,WAAW,yCACb,GAAG,OAAK;EAFD,UAAA,CAGH,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACG,UAAU,KAAA,IAAY,OAAO,oBAAC,YAAD;IAAY,WAAU;IAA+C,UAAA;GAAkB,CAAA,GACpH,YAAY,oBAAC,cAAD,EAAiB,WAAU,qDAAoD,CAAA,IAAM,IAC/F;EACL,CAAA,GAAA,oBAAC,OAAD;GAAK,GAAI,MAAa,QAAQ,QAAQ,OAAO,aAAa,cAAc,OAAO,mBAAmB;GAChG,UAAA,oBAAC,aAAD;IAAgB,GAAI;KACpB,GAAG,EACD,WAAW,8EACb;KACA,GAAG,EACD,WAAW,8EACb;IACF,EAAE,CAAC,CAAC,cAAc;IACd,UAAA,oBAAC,YAAD,EAAe,WAAW,eAAe,CAAA;GAC3B,CAAA;EACb,CAAA,CACS;;AACpB"}
+{"version":3,"file":"index.js","names":["ColorSliderProps","RACColorSliderProps","stylex","ColorSlider","RACColorSlider","ColorThumb","RACColorThumb","SliderOutput","RACSliderOutput","SliderTrack","RACSliderTrack","FieldLabel","chequer","thumbClassName","mergeStatefulStyles","colors","radii","spacing","stateLayerOpacity","typography","styles","trackGround","kZKoxP","kaIpWk","kB7OPa","kzqmXN","kqGvvJ","$$css","trackGroundDisabled","kSiTet","Omit","className","label","showValue","style","t0","$","_c","T0","isDisabled","t1","t2","t3","t4","t5","t6","props","undefined","t7","ground","t8","Symbol","for","0","1","t9","t10","t11","t12","t13"],"sources":["../../../src/components/color-slider/index.tsx"],"sourcesContent":["import type { ColorSliderProps as RACColorSliderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { ColorSlider as RACColorSlider, ColorThumb as RACColorThumb, SliderOutput as RACSliderOutput, SliderTrack as RACSliderTrack } from 'react-aria-components';\nimport { FieldLabel } from '../../field';\nimport { chequer } from '../../styles/chequer';\nimport { thumbClassName } from '../../styles/color';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\n\n// The sliders page's track, carrying one channel of a colour instead of an\n// active and an inactive part: the page's 16dp strip with its 8dp corner,\n// centred in the 44dp a handle takes, and the same label-large label above\n// it. React Aria paints the gradient itself, on the track's own inline\n// `background`, so what runs along the strip is the channel rather than\n// anything chosen here.\n//\n// Three things depart from the page, each because a colour slider shows a\n// value the page's slider does not have.\n//\n// **The handle is a circle carrying the colour, not the page's 4dp bar.**\n// The page's handle is a mark on a track whose colour it already knows; this\n// one has to show the value it sits on, and 4dp of a colour is not a colour\n// anyone can read. It keeps the page's 44dp of height as the target it is\n// centred in.\n//\n// **The handle is ringed rather than filled with primary.** Its fill is the\n// value, so the ring is what has to read against it — and against every\n// other colour the track runs through. It is a surface-coloured ring with a\n// hairline outside it, which reads on a light track and a dark one alike.\n//\n// **There is no stop at the inactive end.** The page puts one 6dp from the\n// end of the inactive part; a channel has no inactive part, so there is no\n// end for it to mark.\n//\n// The alpha channel is the one that needs a chequer, for the reason\n// `src/styles/chequer.ts` gives: a track fading to transparent over a light\n// surface and one fading to white are the same pixels without it.\n\nconst styles = {\n  trackGround: {\n    kZKoxP: \"xlup9mm\",\n    kaIpWk: \"x1xdvaa9\",\n    kB7OPa: \"x9f619\",\n    kzqmXN: \"xh8yej3\",\n    kqGvvJ: \"x2k5q2m\",\n    $$css: true\n  },\n  trackGroundDisabled: {\n    kSiTet: \"x1ppv7y9\",\n    $$css: true\n  }\n};\ntype ColorSliderProps = Omit<RACColorSliderProps, 'children' | 'className' | 'style'> & {\n  /** A function may compute the class from the slider's render state. */\n  className?: RACColorSliderProps['className'];\n  /** What the slider is for. Always rendered; React Aria names the channel otherwise. */\n  label?: string;\n  /**\n   * Whether the value React Aria announces is also shown, at the end of the\n   * label's line.\n   * @default true\n   */\n  showValue?: boolean;\n  /** A function may compute the style from the slider's render state. */\n  style?: RACColorSliderProps['style'];\n};\n\n/**\n * A slider over one channel of a colour — hue, saturation, lightness, alpha\n * and the rest. The value is React Aria's: pass `value` with `onChange` to\n * control it, or `defaultValue`, as a CSS colour string or a `Color` from\n * `parseColor`, which this package re-exports.\n *\n * ```tsx\n * <ColorSlider channel=\"hue\" defaultValue=\"hsl(200, 100%, 50%)\" label=\"Label\" />\n * ```\n *\n * **`channel` has to name a channel the value's own space has.** A hex or\n * `rgb()` value parses as RGB, which has no hue, so `channel=\"hue\"` against\n * one throws rather than converting — pass `colorSpace=\"hsl\"` to convert it,\n * or give the value in the space you mean to slide.\n *\n * React Aria paints the gradient and names the value — \"200°, cyan blue\" —\n * so the readout beside the label is what it announces.\n *\n * The call site's `className` and `style` land on the slider as a whole,\n * which is the element a layout positions.\n */\nfunction ColorSlider({\n  isDisabled = false,\n  label,\n  showValue = true,\n  ...props\n}: ColorSliderProps) {\n  return <RACColorSlider isDisabled={isDisabled} {...props} {...mergeStatefulStyles({\n    className: \"x9f619 x78zum5 xdt5ytf xzoy561 xh8yej3\"\n  }, props)}>\n      <div className=\"x1pha0wt x78zum5 x126z3so\">\n        {label === undefined ? null : <FieldLabel className=\"xkknnkr x14zspaw x1v9cpvo x155f00i x1lz68p4\">{label}</FieldLabel>}\n        {showValue ? <RACSliderOutput className=\"x1w5n3ug x1yicsit x1b35g6e xwth0xh xybisxh xvc5jky\" /> : null}\n      </div>\n      <div {...stylex.props(chequer.ground, styles.trackGround, isDisabled && styles.trackGroundDisabled)}>\n        <RACSliderTrack {...{\n        0: {\n          className: \"x1cpjm7i x1mtdikz xm4btww x1hmns74 x5yr21d x9f619 x1ypdohk xh8yej3 x1n2onr6\"\n        },\n        1: {\n          className: \"x1cpjm7i x1mtdikz xm4btww x1hmns74 x5yr21d x9f619 xh8yej3 x1n2onr6 x1h6gzvc\"\n        }\n      }[!!isDisabled << 0]}>\n          <RACColorThumb className={thumbClassName} />\n        </RACSliderTrack>\n      </div>\n    </RACColorSlider>;\n}\nexport type { ColorSliderProps };\nexport default ColorSlider;"],"mappings":"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"}

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

@@ -1,8 +1,8 @@
 import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { mergeStyles } from "../../styles/merge.js";
 import { chequer } from "../../styles/chequer.js";
-import { jsx } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
 import { ColorSwatch } from "react-aria-components";
 //#region src/components/color-swatch/index.tsx
 const styles = { ground: {

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/color-swatch/index.tsx"],"sourcesContent":["import type { CSSProperties } from 'react';\nimport type { ColorSwatchProps as RACColorSwatchProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { ColorSwatch as RACColorSwatch } from 'react-aria-components';\nimport { chequer } from '../../styles/chequer';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii } from '../../tokens/design.tokens.stylex';\n\n// A single colour, drawn as a square. The design carries no page for this —\n// its colour guidance is about the roles a component takes, not about\n// showing a colour as a value — so the shape here is the library's own,\n// built from what the rest of it already uses.\n//\n// Three things follow from that, and each is a choice rather than a reading.\n//\n// **A swatch is outlined.** Its own colour is the content, so it cannot\n// carry a contrasting one — and a white swatch on a light surface, or a\n// near-black one in dark mode, would otherwise have no edge at all. The\n// outline is the same hairline a field's box takes.\n//\n// **Transparency is drawn against a chequer rather than against the page.**\n// A half-transparent red over a white surface and an opaque pink are the\n// same pixels; the chequer is what tells them apart. It is built from two\n// surface tokens, so it follows the theme rather than being a fixed grey.\n//\n// **The chequer is a layer behind the swatch, not a background on it.**\n// React Aria sets the colour through the element's own inline\n// `background-color`, and CSS paints a background image over a background\n// colour rather than under it — so a chequer on the same element would\n// cover the colour it is there to reveal.\n\nconst SQUARE = '40px';\nconst styles = {\n  ground: {\n    kZKoxP: \"x1vqgdyp\",\n    kaIpWk: \"x1tfhd1\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x1rg5ohu\",\n    kzqmXN: \"x100vrsf\",\n    kVQacm: \"xb3r6kr\",\n    $$css: true\n  }\n};\ntype ColorSwatchProps = Omit<RACColorSwatchProps, 'className' | 'style'> & {\n  /**\n   * Lands on the square around the swatch, 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 swatch, as `className` does. */\n  style?: CSSProperties;\n};\n\n/**\n * A colour shown as a value: a square of it, with a chequer behind so\n * transparency reads as transparency. The colour is React Aria's — a CSS\n * string, or a `Color` from `parseColor`, which this package re-exports.\n *\n * ```tsx\n * import { parseColor } from '@kanso-labs/kanso-ui'\n *\n * <ColorSwatch color={parseColor('hsla(200, 100%, 50%, 0.4)')} />\n * ```\n *\n * React Aria names it from the colour itself — \"light vibrant cyan blue, 60%\n * transparent\" — so it needs no label. Pass `colorName` to say something\n * else instead.\n *\n * The call site's `className` and `style` land on the square around the\n * swatch rather than on the swatch itself, which is what makes setting a\n * size from outside work — the colour fills whatever square it is given.\n * React Aria's function forms are not taken here, since a swatch has no\n * interactive state for one to read.\n */\nfunction ColorSwatch({\n  className,\n  style,\n  ...props\n}: ColorSwatchProps) {\n  return <span {...mergeStyles(stylex.props(chequer.ground, styles.ground), {\n    className,\n    style\n  })}>\n      <RACColorSwatch {...props} className=\"x5yr21d x1tfhd1 xbd69nm x9f619 x1lliihq xh8yej3\" />\n    </span>;\n}\nexport type { ColorSwatchProps };\nexport default ColorSwatch;"],"mappings":";;;;;;;AAiCA,MAAM,SAAS,EACb,QAAQ;CACN,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,OAAO;AACT,EACF;;;;;;;;;;;;;;;;;;;;;;AAgCA,SAAA,cAAA,IAAA;CAAA,MAAA,IAAA,EAAA,EAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,IAAA;EAAqB,CAAA,CAAA,WAAA,OAAA,GAAA,WAAA;EAIF,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA;EAAA,YAAA,EAAA;EAAA,UAAA,EAAA;EAAA,QAAA,EAAA;CAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,aAAA,EAAA,OAAA,OAAA;EACA,KAAA,YAAY,MAAa,QAAO,QAAS,OAAM,MAAO,GAAG;GAAA;GAAA;EAG1E,CAAC;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,SAAA;EACE,KAAA,oBAAC,aAAD;GAAe,GAAK;GAAiB,WAAA;EAAiD,CAAA;EAAG,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,MAAA,EAAA,QAAA,IAAA;EAJtF,KAAA,oBAAA,QAAA;GAKE,GALQ;GAIb,UAAA;EACK,CAAA;EAAA,EAAA,KAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OALF;AAKE"}
+{"version":3,"file":"index.js","names":["CSSProperties","ColorSwatchProps","RACColorSwatchProps","stylex","ColorSwatch","RACColorSwatch","chequer","mergeStyles","colors","radii","SQUARE","styles","ground","kZKoxP","kaIpWk","kB7OPa","k1xSpc","kzqmXN","kVQacm","$$css","Omit","className","style","t0","$","_c","props","t1","t2","t3"],"sources":["../../../src/components/color-swatch/index.tsx"],"sourcesContent":["import type { CSSProperties } from 'react';\nimport type { ColorSwatchProps as RACColorSwatchProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { ColorSwatch as RACColorSwatch } from 'react-aria-components';\nimport { chequer } from '../../styles/chequer';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii } from '../../tokens/design.tokens.stylex';\n\n// A single colour, drawn as a square. The design carries no page for this —\n// its colour guidance is about the roles a component takes, not about\n// showing a colour as a value — so the shape here is the library's own,\n// built from what the rest of it already uses.\n//\n// Three things follow from that, and each is a choice rather than a reading.\n//\n// **A swatch is outlined.** Its own colour is the content, so it cannot\n// carry a contrasting one — and a white swatch on a light surface, or a\n// near-black one in dark mode, would otherwise have no edge at all. The\n// outline is the same hairline a field's box takes.\n//\n// **Transparency is drawn against a chequer rather than against the page.**\n// A half-transparent red over a white surface and an opaque pink are the\n// same pixels; the chequer is what tells them apart. It is built from two\n// surface tokens, so it follows the theme rather than being a fixed grey.\n//\n// **The chequer is a layer behind the swatch, not a background on it.**\n// React Aria sets the colour through the element's own inline\n// `background-color`, and CSS paints a background image over a background\n// colour rather than under it — so a chequer on the same element would\n// cover the colour it is there to reveal.\n\nconst SQUARE = '40px';\nconst styles = {\n  ground: {\n    kZKoxP: \"x1vqgdyp\",\n    kaIpWk: \"x1tfhd1\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x1rg5ohu\",\n    kzqmXN: \"x100vrsf\",\n    kVQacm: \"xb3r6kr\",\n    $$css: true\n  }\n};\ntype ColorSwatchProps = Omit<RACColorSwatchProps, 'className' | 'style'> & {\n  /**\n   * Lands on the square around the swatch, 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 swatch, as `className` does. */\n  style?: CSSProperties;\n};\n\n/**\n * A colour shown as a value: a square of it, with a chequer behind so\n * transparency reads as transparency. The colour is React Aria's — a CSS\n * string, or a `Color` from `parseColor`, which this package re-exports.\n *\n * ```tsx\n * import { parseColor } from '@kanso-labs/kanso-ui'\n *\n * <ColorSwatch color={parseColor('hsla(200, 100%, 50%, 0.4)')} />\n * ```\n *\n * React Aria names it from the colour itself — \"light vibrant cyan blue, 60%\n * transparent\" — so it needs no label. Pass `colorName` to say something\n * else instead.\n *\n * The call site's `className` and `style` land on the square around the\n * swatch rather than on the swatch itself, which is what makes setting a\n * size from outside work — the colour fills whatever square it is given.\n * React Aria's function forms are not taken here, since a swatch has no\n * interactive state for one to read.\n */\nfunction ColorSwatch({\n  className,\n  style,\n  ...props\n}: ColorSwatchProps) {\n  return <span {...mergeStyles(stylex.props(chequer.ground, styles.ground), {\n    className,\n    style\n  })}>\n      <RACColorSwatch {...props} className=\"x5yr21d x1tfhd1 xbd69nm x9f619 x1lliihq xh8yej3\" />\n    </span>;\n}\nexport type { ColorSwatchProps };\nexport default ColorSwatch;"],"mappings":";;;;;;;AAiCA,MAAMW,SAAS,EACbC,QAAQ;CACNC,QAAQ;CACRC,QAAQ;CACRC,QAAQ;CACRC,QAAQ;CACRC,QAAQ;CACRC,QAAQ;CACRC,OAAO;AACT,EACF;;;;;;;;;;;;;;;;;;;;;;AAgCA,SAAAf,cAAAmB,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAJ;CAAA,IAAAK;CAAA,IAAAJ;CAAA,IAAAE,EAAA,OAAAD,IAAA;EAAqB,CAAA,CAAAF,WAAAC,OAAA,GAAAI,WAAAH;EAIFC,EAAA,KAAAD;EAAAC,EAAA,KAAAH;EAAAG,EAAA,KAAAE;EAAAF,EAAA,KAAAF;CAAA,OAAA;EAAAD,YAAAG,EAAA;EAAAE,UAAAF,EAAA;EAAAF,QAAAE,EAAA;CAAA;CAAA,IAAAG;CAAA,IAAAH,EAAA,OAAAH,aAAAG,EAAA,OAAAF,OAAA;EACAK,KAAApB,YAAYJ,MAAaG,QAAOM,QAASD,OAAMC,MAAO,GAAG;GAAAS;GAAAC;EAG1E,CAAC;EAACE,EAAA,KAAAH;EAAAG,EAAA,KAAAF;EAAAE,EAAA,KAAAG;CAAA,OAAAA,KAAAH,EAAA;CAAA,IAAAI;CAAA,IAAAJ,EAAA,OAAAE,SAAA;EACEE,KAAA,oBAAC,aAAD;GAAe,GAAKF;GAAiB,WAAA;EAAiD,CAAA;EAAGF,EAAA,KAAAE;EAAAF,EAAA,KAAAI;CAAA,OAAAA,KAAAJ,EAAA;CAAA,IAAAK;CAAA,IAAAL,EAAA,OAAAG,MAAAH,EAAA,QAAAI,IAAA;EAJtFC,KAAA,oBAAA,QAAA;GAKE,GALQF;GAIbC,UAAAA;EACK,CAAA;EAAAJ,EAAA,KAAAG;EAAAH,EAAA,MAAAI;EAAAJ,EAAA,MAAAK;CAAA,OAAAA,KAAAL,EAAA;CAAA,OALFK;AAKE"}

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

@@ -1,7 +1,7 @@
 import { mergeStatefulStyles } from "../../styles/merge.js";
 import ColorSwatch$1 from "../color-swatch/index.js";
-import { jsx } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
 import { ColorSwatchPicker, ColorSwatchPickerItem } from "react-aria-components";
 //#region src/components/color-swatch-picker/index.tsx
 /**

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["itemClassName"],"sources":["../../../src/components/color-swatch-picker/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { ColorSwatchPickerItemProps as RACColorSwatchPickerItemProps, ColorSwatchPickerProps as RACColorSwatchPickerProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { ColorSwatchPicker as RACColorSwatchPicker, ColorSwatchPickerItem as RACColorSwatchPickerItem } from 'react-aria-components';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, spacing, stateLayerOpacity } from '../../tokens/design.tokens.stylex';\nimport ColorSwatch from '../color-swatch';\n\n// A row of colours to choose one from. React Aria makes it a listbox of\n// swatches, so it is a selection control rather than a palette: arrow keys\n// move between colours and one of them is selected.\n//\n// The design carries no page for this either, so what an item looks like\n// when it is chosen is the library's own. Three choices, each with its\n// reason.\n//\n// **Selection is a ring around the swatch, not a mark on it.** A tick drawn\n// over a colour has to be readable against every colour in the row, which no\n// single ink is; a ring sits outside the swatch and needs only to read\n// against the surface behind it.\n//\n// **The ring is the primary role, and offset.** It is the same weight and\n// colour the focus ring takes elsewhere, one step out from the swatch so the\n// colour stays whole — a ring drawn on the swatch would eat two pixels of\n// the thing being chosen.\n//\n// **Focus and selection are drawn at different offsets.** A focused\n// selected swatch would otherwise paint one ring over the other and lose\n// whichever came second, so the focus ring sits outside the selection one.\n\ntype ColorSwatchPickerItemProps = Omit<RACColorSwatchPickerItemProps, 'children' | 'className' | 'style'> & {\n  /** What the item draws. A `ColorSwatch` with no `color` of its own by default. */\n  children?: ReactNode;\n  /** A function may compute the class from the item's render state. */\n  className?: RACColorSwatchPickerItemProps['className'];\n  /** A function may compute the style from the item's render state. */\n  style?: RACColorSwatchPickerItemProps['style'];\n};\ntype ColorSwatchPickerProps = Omit<RACColorSwatchPickerProps, 'className' | 'style'> & {\n  /** A function may compute the class from the picker's render state. */\n  className?: RACColorSwatchPickerProps['className'];\n  /** A function may compute the style from the picker's render state. */\n  style?: RACColorSwatchPickerProps['style'];\n};\n\n/**\n * A row of colours to choose one from, drawn as swatches. The value is React\n * Aria's — pass `value` with `onChange` to control it, or `defaultValue` —\n * as a CSS colour string or a `Color` from `parseColor`, which this package\n * re-exports.\n *\n * ```tsx\n * <ColorSwatchPicker defaultValue=\"#6750A4\">\n *   <ColorSwatchPicker.Item color=\"#6750A4\" />\n *   <ColorSwatchPicker.Item color=\"#625B71\" />\n * </ColorSwatchPicker>\n * ```\n *\n * It is a listbox, so arrow keys move between colours and the chosen one\n * carries a ring. Name it with `aria-label` or `aria-labelledby`; React Aria\n * calls it \"Color swatches\" otherwise.\n *\n * The call site's `className` and `style` land on the picker, which is the\n * element a layout positions.\n */\nfunction ColorSwatchPicker(props: ColorSwatchPickerProps) {\n  return <RACColorSwatchPicker {...props} {...mergeStatefulStyles({\n    className: \"x9f619 x78zum5 x1a02dak x126z3so x1t137rt\"\n  }, props)} />;\n}\n\n/**\n * One swatch in a {@link ColorSwatchPicker}. Renders a `ColorSwatch` of its\n * own `color` unless given different children.\n */\nfunction ColorSwatchPickerItem({\n  children,\n  ...props\n}: ColorSwatchPickerItemProps) {\n  return <RACColorSwatchPickerItem {...props} className={itemClassName}>\n      {children ?? <ColorSwatch />}\n    </RACColorSwatchPickerItem>;\n}\n\n// The item's classes, from React Aria's render state. StyleX cannot target\n// `[data-selected]` on the element it is styling, so the state comes from\n// what React Aria hands the className.\n//\n// The order matters. `focused` is applied after `selected`, and StyleX\n// replaces a property whole, so a swatch that is both takes the focus ring's\n// outer offset — which is what keeps the two rings from landing on each\n// other. `disabled` is last, so it takes the cursor with it.\nfunction itemClassName(state: {\n  isDisabled: boolean;\n  isFocusVisible: boolean;\n  isSelected: boolean;\n}) {\n  return {\n    0: {\n      className: \"x1tfhd1 x9f619 x1ypdohk x3nfvp2 xrgy624 x1hl8ikr x1t137rt x1de99jn\"\n    },\n    4: {\n      className: \"x1tfhd1 x9f619 x1ypdohk x3nfvp2 xrgy624 x1de99jn x1hl8ikr xaatb59\"\n    },\n    2: {\n      className: \"x1tfhd1 x9f619 x1ypdohk x3nfvp2 x1de99jn xrgy624 x8wkva7 xaatb59\"\n    },\n    6: {\n      className: \"x1tfhd1 x9f619 x1ypdohk x3nfvp2 x1de99jn xrgy624 x8wkva7 xaatb59\"\n    },\n    1: {\n      className: \"x1tfhd1 x9f619 x3nfvp2 xrgy624 x1hl8ikr x1t137rt x1de99jn xt0e3qv x1ppv7y9\"\n    },\n    5: {\n      className: \"x1tfhd1 x9f619 x3nfvp2 xrgy624 x1de99jn x1hl8ikr xaatb59 xt0e3qv x1ppv7y9\"\n    },\n    3: {\n      className: \"x1tfhd1 x9f619 x3nfvp2 x1de99jn xrgy624 x8wkva7 xaatb59 xt0e3qv x1ppv7y9\"\n    },\n    7: {\n      className: \"x1tfhd1 x9f619 x3nfvp2 x1de99jn xrgy624 x8wkva7 xaatb59 xt0e3qv x1ppv7y9\"\n    }\n  }[!!state.isSelected << 2 | !!state.isFocusVisible << 1 | !!state.isDisabled << 0].className ?? '';\n}\nColorSwatchPicker.Item = ColorSwatchPickerItem;\nexport type { ColorSwatchPickerItemProps, ColorSwatchPickerProps };\nexport default ColorSwatchPicker;"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAkEA,SAAA,oBAAA,OAAA;CAAA,MAAA,IAAA,EAAA,CAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,OAAA;EAC8C,KAAA,oBAAoB,EAAA,WACnD,4CACb,GAAG,KAAK;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,SAAA,EAAA,OAAA,IAAA;EAFF,KAAA,oBAAC,mBAAD;GAAqB,GAAK;GAAK,GAAM;EAEnC,CAAA;EAAI,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OAFN;AAEM;;;;;AAOf,SAAA,wBAAA,IAAA;CAAA,MAAA,IAAA,EAAA,CAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,IAAA;EAA+B,CAAA,CAAA,UAAA,GAAA,SAAA;EAGF,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA;EAAA,WAAA,EAAA;EAAA,QAAA,EAAA;CAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,UAAA;EAEtB,KAAA,YAAY,oBAAC,eAAD,CAAY,CAAA;EAAG,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,SAAA,EAAA,OAAA,IAAA;EADzB,KAAA,oBAAC,uBAAD;GAAyB,GAAK;GAAkBA,WAAA;GAClD,UAAA;EAD2B,CAAA;EAEH,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OAFtB;AAEsB;AAW/B,SAAS,cAAc,OAIpB;CACD,OAAO;EACL,GAAG,EACD,WAAW,qEACb;EACA,GAAG,EACD,WAAW,oEACb;EACA,GAAG,EACD,WAAW,mEACb;EACA,GAAG,EACD,WAAW,mEACb;EACA,GAAG,EACD,WAAW,6EACb;EACA,GAAG,EACD,WAAW,4EACb;EACA,GAAG,EACD,WAAW,2EACb;EACA,GAAG,EACD,WAAW,2EACb;CACF,EAAE,CAAC,CAAC,MAAM,cAAc,IAAI,CAAC,CAAC,MAAM,kBAAkB,IAAI,CAAC,CAAC,MAAM,cAAc,EAAE,CAAC,aAAa;AAClG;AACA,oBAAkB,OAAO"}
+{"version":3,"file":"index.js","names":["ReactNode","ColorSwatchPickerItemProps","RACColorSwatchPickerItemProps","ColorSwatchPickerProps","RACColorSwatchPickerProps","stylex","ColorSwatchPicker","RACColorSwatchPicker","ColorSwatchPickerItem","RACColorSwatchPickerItem","mergeStatefulStyles","colors","radii","spacing","stateLayerOpacity","ColorSwatch","Omit","children","className","style","props","$","_c","t0","t1","t2","itemClassName","state","isDisabled","isFocusVisible","isSelected","Item"],"sources":["../../../src/components/color-swatch-picker/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { ColorSwatchPickerItemProps as RACColorSwatchPickerItemProps, ColorSwatchPickerProps as RACColorSwatchPickerProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { ColorSwatchPicker as RACColorSwatchPicker, ColorSwatchPickerItem as RACColorSwatchPickerItem } from 'react-aria-components';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, spacing, stateLayerOpacity } from '../../tokens/design.tokens.stylex';\nimport ColorSwatch from '../color-swatch';\n\n// A row of colours to choose one from. React Aria makes it a listbox of\n// swatches, so it is a selection control rather than a palette: arrow keys\n// move between colours and one of them is selected.\n//\n// The design carries no page for this either, so what an item looks like\n// when it is chosen is the library's own. Three choices, each with its\n// reason.\n//\n// **Selection is a ring around the swatch, not a mark on it.** A tick drawn\n// over a colour has to be readable against every colour in the row, which no\n// single ink is; a ring sits outside the swatch and needs only to read\n// against the surface behind it.\n//\n// **The ring is the primary role, and offset.** It is the same weight and\n// colour the focus ring takes elsewhere, one step out from the swatch so the\n// colour stays whole — a ring drawn on the swatch would eat two pixels of\n// the thing being chosen.\n//\n// **Focus and selection are drawn at different offsets.** A focused\n// selected swatch would otherwise paint one ring over the other and lose\n// whichever came second, so the focus ring sits outside the selection one.\n\ntype ColorSwatchPickerItemProps = Omit<RACColorSwatchPickerItemProps, 'children' | 'className' | 'style'> & {\n  /** What the item draws. A `ColorSwatch` with no `color` of its own by default. */\n  children?: ReactNode;\n  /** A function may compute the class from the item's render state. */\n  className?: RACColorSwatchPickerItemProps['className'];\n  /** A function may compute the style from the item's render state. */\n  style?: RACColorSwatchPickerItemProps['style'];\n};\ntype ColorSwatchPickerProps = Omit<RACColorSwatchPickerProps, 'className' | 'style'> & {\n  /** A function may compute the class from the picker's render state. */\n  className?: RACColorSwatchPickerProps['className'];\n  /** A function may compute the style from the picker's render state. */\n  style?: RACColorSwatchPickerProps['style'];\n};\n\n/**\n * A row of colours to choose one from, drawn as swatches. The value is React\n * Aria's — pass `value` with `onChange` to control it, or `defaultValue` —\n * as a CSS colour string or a `Color` from `parseColor`, which this package\n * re-exports.\n *\n * ```tsx\n * <ColorSwatchPicker defaultValue=\"#6750A4\">\n *   <ColorSwatchPicker.Item color=\"#6750A4\" />\n *   <ColorSwatchPicker.Item color=\"#625B71\" />\n * </ColorSwatchPicker>\n * ```\n *\n * It is a listbox, so arrow keys move between colours and the chosen one\n * carries a ring. Name it with `aria-label` or `aria-labelledby`; React Aria\n * calls it \"Color swatches\" otherwise.\n *\n * The call site's `className` and `style` land on the picker, which is the\n * element a layout positions.\n */\nfunction ColorSwatchPicker(props: ColorSwatchPickerProps) {\n  return <RACColorSwatchPicker {...props} {...mergeStatefulStyles({\n    className: \"x9f619 x78zum5 x1a02dak x126z3so x1t137rt\"\n  }, props)} />;\n}\n\n/**\n * One swatch in a {@link ColorSwatchPicker}. Renders a `ColorSwatch` of its\n * own `color` unless given different children.\n */\nfunction ColorSwatchPickerItem({\n  children,\n  ...props\n}: ColorSwatchPickerItemProps) {\n  return <RACColorSwatchPickerItem {...props} className={itemClassName}>\n      {children ?? <ColorSwatch />}\n    </RACColorSwatchPickerItem>;\n}\n\n// The item's classes, from React Aria's render state. StyleX cannot target\n// `[data-selected]` on the element it is styling, so the state comes from\n// what React Aria hands the className.\n//\n// The order matters. `focused` is applied after `selected`, and StyleX\n// replaces a property whole, so a swatch that is both takes the focus ring's\n// outer offset — which is what keeps the two rings from landing on each\n// other. `disabled` is last, so it takes the cursor with it.\nfunction itemClassName(state: {\n  isDisabled: boolean;\n  isFocusVisible: boolean;\n  isSelected: boolean;\n}) {\n  return {\n    0: {\n      className: \"x1tfhd1 x9f619 x1ypdohk x3nfvp2 xrgy624 x1hl8ikr x1t137rt x1de99jn\"\n    },\n    4: {\n      className: \"x1tfhd1 x9f619 x1ypdohk x3nfvp2 xrgy624 x1de99jn x1hl8ikr xaatb59\"\n    },\n    2: {\n      className: \"x1tfhd1 x9f619 x1ypdohk x3nfvp2 x1de99jn xrgy624 x8wkva7 xaatb59\"\n    },\n    6: {\n      className: \"x1tfhd1 x9f619 x1ypdohk x3nfvp2 x1de99jn xrgy624 x8wkva7 xaatb59\"\n    },\n    1: {\n      className: \"x1tfhd1 x9f619 x3nfvp2 xrgy624 x1hl8ikr x1t137rt x1de99jn xt0e3qv x1ppv7y9\"\n    },\n    5: {\n      className: \"x1tfhd1 x9f619 x3nfvp2 xrgy624 x1de99jn x1hl8ikr xaatb59 xt0e3qv x1ppv7y9\"\n    },\n    3: {\n      className: \"x1tfhd1 x9f619 x3nfvp2 x1de99jn xrgy624 x8wkva7 xaatb59 xt0e3qv x1ppv7y9\"\n    },\n    7: {\n      className: \"x1tfhd1 x9f619 x3nfvp2 x1de99jn xrgy624 x8wkva7 xaatb59 xt0e3qv x1ppv7y9\"\n    }\n  }[!!state.isSelected << 2 | !!state.isFocusVisible << 1 | !!state.isDisabled << 0].className ?? '';\n}\nColorSwatchPicker.Item = ColorSwatchPickerItem;\nexport type { ColorSwatchPickerItemProps, ColorSwatchPickerProps };\nexport default ColorSwatchPicker;"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAkEA,SAAAM,oBAAAc,OAAA;CAAA,MAAAC,IAAAC,EAAA,CAAA;CAAA,IAAAC;CAAA,IAAAF,EAAA,OAAAD,OAAA;EAC8CG,KAAAb,oBAAoB,EAAAQ,WACnD,4CACb,GAAGE,KAAK;EAACC,EAAA,KAAAD;EAAAC,EAAA,KAAAE;CAAA,OAAAA,KAAAF,EAAA;CAAA,IAAAG;CAAA,IAAAH,EAAA,OAAAD,SAAAC,EAAA,OAAAE,IAAA;EAFFC,KAAA,oBAAC,mBAAD;GAAqB,GAAKJ;GAAK,GAAMG;EAEnC,CAAA;EAAIF,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,KAAAG;CAAA,OAAAA,KAAAH,EAAA;CAAA,OAFNG;AAEM;;;;;AAOf,SAAAhB,wBAAAe,IAAA;CAAA,MAAAF,IAAAC,EAAA,CAAA;CAAA,IAAAL;CAAA,IAAAG;CAAA,IAAAC,EAAA,OAAAE,IAAA;EAA+B,CAAA,CAAAN,UAAA,GAAAG,SAAAG;EAGFF,EAAA,KAAAE;EAAAF,EAAA,KAAAJ;EAAAI,EAAA,KAAAD;CAAA,OAAA;EAAAH,WAAAI,EAAA;EAAAD,QAAAC,EAAA;CAAA;CAAA,IAAAG;CAAA,IAAAH,EAAA,OAAAJ,UAAA;EAEtBO,KAAAP,YAAY,oBAAC,eAAD,CAAY,CAAA;EAAGI,EAAA,KAAAJ;EAAAI,EAAA,KAAAG;CAAA,OAAAA,KAAAH,EAAA;CAAA,IAAAI;CAAA,IAAAJ,EAAA,OAAAD,SAAAC,EAAA,OAAAG,IAAA;EADzBC,KAAA,oBAAC,uBAAD;GAAyB,GAAKL;GAAkBM,WAAAA;GAClDF,UAAAA;EAD2B,CAAA;EAEHH,EAAA,KAAAD;EAAAC,EAAA,KAAAG;EAAAH,EAAA,KAAAI;CAAA,OAAAA,KAAAJ,EAAA;CAAA,OAFtBI;AAEsB;AAW/B,SAASC,cAAcC,OAIpB;CACD,OAAO;EACL,GAAG,EACDT,WAAW,qEACb;EACA,GAAG,EACDA,WAAW,oEACb;EACA,GAAG,EACDA,WAAW,mEACb;EACA,GAAG,EACDA,WAAW,mEACb;EACA,GAAG,EACDA,WAAW,6EACb;EACA,GAAG,EACDA,WAAW,4EACb;EACA,GAAG,EACDA,WAAW,2EACb;EACA,GAAG,EACDA,WAAW,2EACb;CACF,EAAE,CAAC,CAACS,MAAMG,cAAc,IAAI,CAAC,CAACH,MAAME,kBAAkB,IAAI,CAAC,CAACF,MAAMC,cAAc,EAAE,CAACV,aAAa;AAClG;AACAZ,oBAAkByB,OAAOvB"}