@kanso-labs/kanso-ui 0.34.11 → 0.34.13

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","ToggleButtonProps","RACToggleButtonProps","ToggleButtonRenderProps","stylex","ToggleButton","chipGlyph","chipLabel","chipStyles","ariaAttributesOf","toggleButtonRenderer","focus","mergeStatefulStyles","ChipProps","Omit","children","Chip","t0","$","_c","T0","t1","t2","t3","t4","onKeyDown","onKeyUp","render","props","element","aria","propsFor","chipContent","t5","state","isSelected","base","target","ring","selected","unselected","isDisabled","disabled","disabledSelected","disabledUnselected"],"sources":["../../../src/components/chip/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { ToggleButtonProps as RACToggleButtonProps, ToggleButtonRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { ToggleButton } from 'react-aria-components';\nimport { chipGlyph, chipLabel } from '../../chip';\nimport { chipStyles } from '../../chip/styles';\nimport { ariaAttributesOf, toggleButtonRenderer } from '../../render/aria';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\n\n// The pill, its two containers, its check and its disabled treatment are the\n// chip module's in `src/chip`, shared with the chips a ChipGroup draws; what\n// is 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//\n// Two of the call site's props go on the element through `src/render/aria`\n// rather than through that spread, as `Button` and `IconButton` do. React\n// Aria builds a button's attributes from an allowlist that holds only the\n// labelling `aria-*` and the state it manages itself, so any other one — a\n// shortcut, an owned element — is dropped before it reaches the DOM. And it\n// wraps a keyboard handler it is given so that the event stops there unless\n// the handler asks otherwise, which is its convention rather than the DOM's;\n// on the element the handler bubbles, so an Escape pressed on a chip inside\n// a dialog still reaches the dialog.\n\ntype ChipProps = Omit<RACToggleButtonProps, 'children'> & {\n  /**\n   * The chip's label. A node rather than React Aria's node-or-function,\n   * since the chip puts its own check before whatever this is and a function\n   * would be handed a `defaultChildren` the chip never rendered. ChipGroup's\n   * chip narrows it the same way, for the same reason.\n   */\n  children?: ReactNode;\n};\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  onKeyDown,\n  onKeyUp,\n  render,\n  ...props\n}: ChipProps) {\n  const element = {\n    aria: ariaAttributesOf(props),\n    onKeyDown,\n    onKeyUp\n  };\n  return <ToggleButton render={toggleButtonRenderer(element, render)} {...props} {...mergeStatefulStyles(propsFor, props)}>\n      {chipContent(children)}\n    </ToggleButton>;\n}\n\n// What the chip draws, from React Aria's render state: the check while it is\n// selected, then the label. Built by a call rather than written inline at\n// the prop, which is what react-perf's no-new-function-as-prop is after; the\n// React Compiler memoises the result on its input.\nfunction chipContent(children: ReactNode) {\n  return (state: ToggleButtonRenderProps) => <>\n      {chipGlyph(state.isSelected)}\n      {chipLabel(children)}\n    </>;\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, chipStyles.target, focus.ring, state.isSelected ? chipStyles.selected : chipStyles.unselected, state.isDisabled && chipStyles.disabled, state.isDisabled && (state.isSelected ? chipStyles.disabledSelected : chipStyles.disabledUnselected));\n}\nexport type { ChipProps };\nexport default Chip;"],"mappings":";;;;;;;;;;;;;;;;AAyCA,SAAAgB,KAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAAL;CAAA,IAAAM;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAL,EAAA,OAAAD,IAAA;EAAc,MAAA,EAAAF,UAAAS,IAAAC,WAAAC,SAAAC,QAAA,GAAAC,UAAAX;EAAAF,WAAAS;EAOZ,MAAAK,UAAgB;GAAAC,MACRrB,iBAAiBmB,KAAK;GAACH;GAAAC;EAG/B;EACQN,KAAAf;EAAqBgB,KAAAX,qBAAqBmB,SAASF,MAAM;EAAOC,KAAAA;EAAWL,KAAAX,oBAAoBmB,UAAUH,KAAK;EAACV,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,KAAAH;EAAAG,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;CAAA,OAAA;EAAAH,KAAAF,EAAA;EAAAH,WAAAG,EAAA;EAAAG,KAAAH,EAAA;EAAAI,KAAAJ,EAAA;EAAAK,KAAAL,EAAA;CAAA;CAAA,IAAAM;CAAA,IAAAN,EAAA,OAAAH,UAAA;EAClHS,KAAAQ,YAAYjB,QAAQ;EAACG,EAAA,KAAAH;EAAAG,EAAA,KAAAM;CAAA,OAAAA,KAAAN,EAAA;CAAA,IAAAe;CAAA,IAAAf,EAAA,OAAAE,MAAAF,EAAA,OAAAG,MAAAH,EAAA,QAAAI,MAAAJ,EAAA,QAAAK,MAAAL,EAAA,QAAAM,IAAA;EADnBS,KAAA,oBAAC,IAAD;GAAsB,QAAAZ;GAAqC,GAAMO;GAAK,GAAML;GAC9EC,UAAAA;EADe,CAAA;EAEHN,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,MAAAI;EAAAJ,EAAA,MAAAK;EAAAL,EAAA,MAAAM;EAAAN,EAAA,MAAAe;CAAA,OAAAA,KAAAf,EAAA;CAAA,OAFVe;AAEU;AAOnB,SAASD,YAAYjB,UAAqB;CACxC,QAAQmB,UAAmC,qBAAA,UAAA,EAAA,UAAA,CACtC5B,UAAU4B,MAAMC,UAAU,GAC1B5B,UAAUQ,QAAQ,CACrB,EAAA,CAAA;AACJ;AAUA,SAASgB,SAASG,OAAgC;CAChD,OAAO9B,MAAaI,WAAW4B,MAAM5B,WAAW6B,QAAQ1B,MAAM2B,MAAMJ,MAAMC,aAAa3B,WAAW+B,WAAW/B,WAAWgC,YAAYN,MAAMO,cAAcjC,WAAWkC,UAAUR,MAAMO,eAAeP,MAAMC,aAAa3B,WAAWmC,mBAAmBnC,WAAWoC,mBAAmB;AACnR"}
+{"version":3,"file":"index.js","names":["ReactNode","ToggleButtonProps","RACToggleButtonProps","ToggleButtonRenderProps","stylex","ToggleButton","chipGlyph","chipLabel","chipStyles","ariaAttributesOf","toggleButtonRenderer","focus","mergeStatefulStyles","ChipProps","Omit","children","Chip","t0","$","_c","T0","t1","t2","t3","t4","onKeyDown","onKeyUp","render","props","element","aria","propsFor","chipContent","t5","state","isSelected","base","target","ring","selected","unselected","isDisabled","disabled","disabledSelected","disabledUnselected","_c","stylex.props"],"sources":["../../../src/components/chip/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { ToggleButtonProps as RACToggleButtonProps, ToggleButtonRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { ToggleButton } from 'react-aria-components';\nimport { chipGlyph, chipLabel } from '../../chip';\nimport { chipStyles } from '../../chip/styles';\nimport { ariaAttributesOf, toggleButtonRenderer } from '../../render/aria';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\n\n// The pill, its two containers, its check and its disabled treatment are the\n// chip module's in `src/chip`, shared with the chips a ChipGroup draws; what\n// is 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//\n// Two of the call site's props go on the element through `src/render/aria`\n// rather than through that spread, as `Button` and `IconButton` do. React\n// Aria builds a button's attributes from an allowlist that holds only the\n// labelling `aria-*` and the state it manages itself, so any other one — a\n// shortcut, an owned element — is dropped before it reaches the DOM. And it\n// wraps a keyboard handler it is given so that the event stops there unless\n// the handler asks otherwise, which is its convention rather than the DOM's;\n// on the element the handler bubbles, so an Escape pressed on a chip inside\n// a dialog still reaches the dialog.\n\ntype ChipProps = Omit<RACToggleButtonProps, 'children'> & {\n  /**\n   * The chip's label. A node rather than React Aria's node-or-function,\n   * since the chip puts its own check before whatever this is and a function\n   * would be handed a `defaultChildren` the chip never rendered. ChipGroup's\n   * chip narrows it the same way, for the same reason.\n   */\n  children?: ReactNode;\n};\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  onKeyDown,\n  onKeyUp,\n  render,\n  ...props\n}: ChipProps) {\n  const element = {\n    aria: ariaAttributesOf(props),\n    onKeyDown,\n    onKeyUp\n  };\n  return <ToggleButton render={toggleButtonRenderer(element, render)} {...props} {...mergeStatefulStyles(propsFor, props)}>\n      {chipContent(children)}\n    </ToggleButton>;\n}\n\n// What the chip draws, from React Aria's render state: the check while it is\n// selected, then the label. Built by a call rather than written inline at\n// the prop, which is what react-perf's no-new-function-as-prop is after; the\n// React Compiler memoises the result on its input.\nfunction chipContent(children: ReactNode) {\n  return (state: ToggleButtonRenderProps) => <>\n      {chipGlyph(state.isSelected)}\n      {chipLabel(children)}\n    </>;\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, chipStyles.target, focus.ring, state.isSelected ? chipStyles.selected : chipStyles.unselected, state.isDisabled && chipStyles.disabled, state.isDisabled && (state.isSelected ? chipStyles.disabledSelected : chipStyles.disabledUnselected));\n}\nexport type { ChipProps };\nexport default Chip;"],"mappings":";;;;;;;;;;;;;;;;AAyCA,SAAAgB,KAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAAL;CAAA,IAAAM;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAL,EAAA,OAAAD,IAAA;EAAc,MAAA,EAAAF,UAAAS,IAAAC,WAAAC,SAAAC,QAAA,GAAAC,UAAAX;EAAAF,WAAAS;EAOZ,MAAAK,UAAgB;GAAAC,MACRrB,iBAAiBmB,KAAK;GAACH;GAAAC;EAG/B;EACQN,KAAAf;EAAqBgB,KAAAX,qBAAqBmB,SAASF,MAAM;EAAOC,KAAAA;EAAWL,KAAAX,oBAAoBmB,UAAUH,KAAK;EAACV,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,KAAAH;EAAAG,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;CAAA,OAAA;EAAAH,KAAAF,EAAA;EAAAH,WAAAG,EAAA;EAAAG,KAAAH,EAAA;EAAAI,KAAAJ,EAAA;EAAAK,KAAAL,EAAA;CAAA;CAAA,IAAAM;CAAA,IAAAN,EAAA,OAAAH,UAAA;EAClHS,KAAAQ,YAAYjB,QAAQ;EAACG,EAAA,KAAAH;EAAAG,EAAA,KAAAM;CAAA,OAAAA,KAAAN,EAAA;CAAA,IAAAe;CAAA,IAAAf,EAAA,OAAAE,MAAAF,EAAA,OAAAG,MAAAH,EAAA,QAAAI,MAAAJ,EAAA,QAAAK,MAAAL,EAAA,QAAAM,IAAA;EADnBS,KAAA,oBAAC,IAAD;GAAsB,QAAAZ;GAAqC,GAAMO;GAAK,GAAML;GAC9EC,UAAAA;EADe,CAAA;EAEHN,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,MAAAI;EAAAJ,EAAA,MAAAK;EAAAL,EAAA,MAAAM;EAAAN,EAAA,MAAAe;CAAA,OAAAA,KAAAf,EAAA;CAAA,OAFVe;AAEU;AAOnB,SAASD,YAAYjB,UAAqB;CACxC,QAAQmB,UAAmC,qBAAA,UAAA,EAAA,UAAA,CACtC5B,UAAU4B,MAAMC,UAAU,GAC1B5B,UAAUQ,QAAQ,CACrB,EAAA,CAAA;AACJ;AAUA,SAASgB,SAASG,OAAgC;CAChD,OAAO9B,MAAaI,WAAW4B,MAAM5B,WAAW6B,QAAQ1B,MAAM2B,MAAMJ,MAAMC,aAAa3B,WAAW+B,WAAW/B,WAAWgC,YAAYN,MAAMO,cAAcjC,WAAWkC,UAAUR,MAAMO,eAAeP,MAAMC,aAAa3B,WAAWmC,mBAAmBnC,WAAWoC,mBAAmB;AACnR"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","TagGroupProps","RACTagGroupProps","TagListProps","RACTagListProps","TagProps","RACTagProps","TagRenderProps","stylex","createContext","useContext","Button","RACButton","Tag","RACTag","TagGroup","RACTagGroup","TagList","RACTagList","chipGlyph","chipLabel","chipStyles","textOf","FieldLabel","FieldMessage","invalidFrom","groupStyles","CloseGlyph","focus","mergeStatefulStyles","mergeStyles","spacing","ChipGroupChipProps","Omit","children","className","style","ChipGroupProps","description","error","label","removeLabel","Pick","T","chipContent","state","isSelected","allowsRemoving","props","remove","removeGlyph","RemoveLabelContext","LABEL_STATE_VALID","isInvalid","LABEL_STATE_INVALID","ChipGroup","t0","$","_c","T0","invalid","items","renderEmptyState","t1","t2","t3","t4","t5","t6","t7","t8","t9","undefined","root","ChipGroupChip","textValue","chipPropsFor","base","target","targetInGroup","ring","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 { chipGlyph, chipLabel } from '../../chip';\nimport { chipStyles } from '../../chip/styles';\nimport { textOf } from '../../collection/text';\nimport { FieldLabel, FieldMessage } from '../../field';\nimport { invalidFrom } from '../../field/root';\nimport { groupStyles } from '../../field/styles';\nimport { CloseGlyph } from '../../glyphs';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { spacing } from '../../tokens/design.tokens.stylex';\n\n// The chips page's filter and input chips as a set: one or more chosen from a\n// row, each one removable. The pill is the chip module's in `src/chip`,\n// shared with the standalone Chip, so the two cannot drift; what is here is\n// the group around them.\n//\n// Three things it adds over a row of Chips.\n//\n// **It is a group, not a row of buttons.** React Aria's `TagGroup` names the\n// set, describes it, reports it invalid as a whole, and moves between its\n// chips with the arrow keys rather than making each one a tab stop — which\n// is what a set of a dozen filters needs. The label, the supporting line and\n// the error are the field chrome's, so a group reads like the fields beside\n// it, exactly as CheckboxGroup and RadioGroup do.\n//\n// **A chip can be removed.** Give the group `onRemove` and each chip draws\n// the page's trailing close target, an 18dp glyph in a target of its own so a\n// press there removes rather than toggles. Backspace and Delete remove the\n// focused chip too, which is React Aria's. A chosen chip's check sits at the\n// other end, so a chip that is both selected and removable carries one glyph\n// on each side of its label.\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   * Outside a `Form` the message line arrives with the message, so the\n   * field grows when this does and moves what is under it. A `Form` holds\n   * that space from the start; so does a permanent `description`.\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 check is the chip module's, so a chip in a group and a chip on its own\n// draw the same one. The close target is drawn only where the group allows\n// removing, which React Aria reports rather than the call site saying so on\n// every chip.\nfunction chipContent(children: ReactNode, removeLabel: string) {\n  return (state: TagRenderProps) => <>\n      {chipGlyph(state.isSelected)}\n      {chipLabel(children)}\n      {state.allowsRemoving ? <RACButton aria-label={removeLabel} slot=\"remove\" {...stylex.props(chipStyles.remove)}>\n          <CloseGlyph {...stylex.props(chipStyles.removeGlyph)} />\n        </RACButton> : null}\n    </>;\n}\n\n/**\n * A labelled set of chips, one or more of which can be chosen, each of which\n * can be removed. Selection is React Aria's: set `selectionMode` to `single`\n * or `multiple` and pass `selectedKeys` with `onSelectionChange` to control\n * it, or `defaultSelectedKeys` to let it keep its own.\n *\n * ```tsx\n * <ChipGroup label=\"Label\" selectionMode=\"multiple\" onRemove={remove}>\n *   <ChipGroup.Chip id=\"first\">First item</ChipGroup.Chip>\n * </ChipGroup>\n * ```\n *\n * Give the group `onRemove` and each chip draws a close target. The arrow\n * keys move between chips, so a set of many is one tab stop rather than many.\n *\n * A chip that toggles nothing else is Chip; this is for a set that shares a\n * value.\n *\n * The call site's `className` and `style` land on the group as a whole,\n * which is the element a layout positions.\n */\n// What each chip calls its close target. A context rather than a prop on the\n// chip, since it is the group's decision and repeating it on every chip is\n// how the two drift.\nconst RemoveLabelContext = createContext('Remove');\n\n// Hoisted so neither is a new object on every render.\nconst LABEL_STATE_VALID = {\n  isInvalid: false\n};\nconst LABEL_STATE_INVALID = {\n  isInvalid: true\n};\nfunction ChipGroup<T extends object = object>({\n  children,\n  description,\n  error,\n  items,\n  label,\n  removeLabel = 'Remove',\n  renderEmptyState,\n  ...props\n}: ChipGroupProps<T>) {\n  const invalid = invalidFrom(error);\n  return <RACTagGroup {...props} {...mergeStyles(stylex.props(groupStyles.root), props)}>\n      {/* React Aria's tag group has no disabled state of its own — a chip is\n          disabled through the group's `disabledKeys` — so the label follows\n          validity alone. */}\n      <FieldLabel state={invalid ? LABEL_STATE_INVALID : LABEL_STATE_VALID} variant=\"group\">\n        {label}\n      </FieldLabel>\n      <RemoveLabelContext value={removeLabel}>\n        <RACTagList<T> items={items} renderEmptyState={renderEmptyState} className=\"x9f619 x78zum5 x1a02dak x126z3so x1t137rt\">\n          {children}\n        </RACTagList>\n      </RemoveLabelContext>\n      <FieldMessage description={description} error={error} inset={false} />\n    </RACTagGroup>;\n}\n\n/**\n * One chip. Give every chip an `id` — that is the key selection and removal\n * are reported by.\n */\nfunction ChipGroupChip({\n  children,\n  ...props\n}: ChipGroupChipProps) {\n  const removeLabel = useContext(RemoveLabelContext);\n  return <RACTag textValue={props.textValue ?? textOf(children)} {...props} {...mergeStatefulStyles(chipPropsFor, props)}>\n      {chipContent(children, removeLabel)}\n    </RACTag>;\n}\n\n// StyleX cannot target `[data-selected]` on the element it is styling, so a\n// chip's state comes from the render state React Aria hands its className.\n// Disabled is applied last so it wins over both containers, and StyleX\n// replaces a property whole, so it takes their hover branches with it.\nfunction chipPropsFor(state: TagRenderProps) {\n  return stylex.props(chipStyles.base, chipStyles.target, chipStyles.targetInGroup, focus.ring, state.isSelected ? chipStyles.selected : chipStyles.unselected, state.isDisabled && chipStyles.disabled, state.isDisabled && (state.isSelected ? chipStyles.disabledSelected : chipStyles.disabledUnselected));\n}\nChipGroup.Chip = ChipGroupChip;\nexport type { ChipGroupChipProps, ChipGroupProps };\nexport default ChipGroup;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ReactNode","TagGroupProps","RACTagGroupProps","TagListProps","RACTagListProps","TagProps","RACTagProps","TagRenderProps","stylex","createContext","useContext","Button","RACButton","Tag","RACTag","TagGroup","RACTagGroup","TagList","RACTagList","chipGlyph","chipLabel","chipStyles","textOf","FieldLabel","FieldMessage","invalidFrom","groupStyles","CloseGlyph","focus","mergeStatefulStyles","mergeStyles","spacing","ChipGroupChipProps","Omit","children","className","style","ChipGroupProps","description","error","label","removeLabel","Pick","T","chipContent","state","isSelected","allowsRemoving","props","remove","removeGlyph","RemoveLabelContext","LABEL_STATE_VALID","isInvalid","LABEL_STATE_INVALID","ChipGroup","t0","$","_c","T0","invalid","items","renderEmptyState","t1","t2","t3","t4","t5","t6","t7","t8","t9","undefined","root","ChipGroupChip","textValue","chipPropsFor","base","target","targetInGroup","ring","selected","unselected","isDisabled","disabled","disabledSelected","disabledUnselected","Chip","RACButton","stylex.props","_c","props","RACTagGroup","RACTagList","RACTag"],"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 { chipGlyph, chipLabel } from '../../chip';\nimport { chipStyles } from '../../chip/styles';\nimport { textOf } from '../../collection/text';\nimport { FieldLabel, FieldMessage } from '../../field';\nimport { invalidFrom } from '../../field/root';\nimport { groupStyles } from '../../field/styles';\nimport { CloseGlyph } from '../../glyphs';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { spacing } from '../../tokens/design.tokens.stylex';\n\n// The chips page's filter and input chips as a set: one or more chosen from a\n// row, each one removable. The pill is the chip module's in `src/chip`,\n// shared with the standalone Chip, so the two cannot drift; what is here is\n// the group around them.\n//\n// Three things it adds over a row of Chips.\n//\n// **It is a group, not a row of buttons.** React Aria's `TagGroup` names the\n// set, describes it, reports it invalid as a whole, and moves between its\n// chips with the arrow keys rather than making each one a tab stop — which\n// is what a set of a dozen filters needs. The label, the supporting line and\n// the error are the field chrome's, so a group reads like the fields beside\n// it, exactly as CheckboxGroup and RadioGroup do.\n//\n// **A chip can be removed.** Give the group `onRemove` and each chip draws\n// the page's trailing close target, an 18dp glyph in a target of its own so a\n// press there removes rather than toggles. Backspace and Delete remove the\n// focused chip too, which is React Aria's. A chosen chip's check sits at the\n// other end, so a chip that is both selected and removable carries one glyph\n// on each side of its label.\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   * Outside a `Form` the message line arrives with the message, so the\n   * field grows when this does and moves what is under it. A `Form` holds\n   * that space from the start; so does a permanent `description`.\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 check is the chip module's, so a chip in a group and a chip on its own\n// draw the same one. The close target is drawn only where the group allows\n// removing, which React Aria reports rather than the call site saying so on\n// every chip.\nfunction chipContent(children: ReactNode, removeLabel: string) {\n  return (state: TagRenderProps) => <>\n      {chipGlyph(state.isSelected)}\n      {chipLabel(children)}\n      {state.allowsRemoving ? <RACButton aria-label={removeLabel} slot=\"remove\" {...stylex.props(chipStyles.remove)}>\n          <CloseGlyph {...stylex.props(chipStyles.removeGlyph)} />\n        </RACButton> : null}\n    </>;\n}\n\n/**\n * A labelled set of chips, one or more of which can be chosen, each of which\n * can be removed. Selection is React Aria's: set `selectionMode` to `single`\n * or `multiple` and pass `selectedKeys` with `onSelectionChange` to control\n * it, or `defaultSelectedKeys` to let it keep its own.\n *\n * ```tsx\n * <ChipGroup label=\"Label\" selectionMode=\"multiple\" onRemove={remove}>\n *   <ChipGroup.Chip id=\"first\">First item</ChipGroup.Chip>\n * </ChipGroup>\n * ```\n *\n * Give the group `onRemove` and each chip draws a close target. The arrow\n * keys move between chips, so a set of many is one tab stop rather than many.\n *\n * A chip that toggles nothing else is Chip; this is for a set that shares a\n * value.\n *\n * The call site's `className` and `style` land on the group as a whole,\n * which is the element a layout positions.\n */\n// What each chip calls its close target. A context rather than a prop on the\n// chip, since it is the group's decision and repeating it on every chip is\n// how the two drift.\nconst RemoveLabelContext = createContext('Remove');\n\n// Hoisted so neither is a new object on every render.\nconst LABEL_STATE_VALID = {\n  isInvalid: false\n};\nconst LABEL_STATE_INVALID = {\n  isInvalid: true\n};\nfunction ChipGroup<T extends object = object>({\n  children,\n  description,\n  error,\n  items,\n  label,\n  removeLabel = 'Remove',\n  renderEmptyState,\n  ...props\n}: ChipGroupProps<T>) {\n  const invalid = invalidFrom(error);\n  return <RACTagGroup {...props} {...mergeStyles(stylex.props(groupStyles.root), props)}>\n      {/* React Aria's tag group has no disabled state of its own — a chip is\n          disabled through the group's `disabledKeys` — so the label follows\n          validity alone. */}\n      <FieldLabel state={invalid ? LABEL_STATE_INVALID : LABEL_STATE_VALID} variant=\"group\">\n        {label}\n      </FieldLabel>\n      <RemoveLabelContext value={removeLabel}>\n        <RACTagList<T> items={items} renderEmptyState={renderEmptyState} className=\"x9f619 x78zum5 x1a02dak x126z3so x1t137rt\">\n          {children}\n        </RACTagList>\n      </RemoveLabelContext>\n      <FieldMessage description={description} error={error} inset={false} />\n    </RACTagGroup>;\n}\n\n/**\n * One chip. Give every chip an `id` — that is the key selection and removal\n * are reported by.\n */\nfunction ChipGroupChip({\n  children,\n  ...props\n}: ChipGroupChipProps) {\n  const removeLabel = useContext(RemoveLabelContext);\n  return <RACTag textValue={props.textValue ?? textOf(children)} {...props} {...mergeStatefulStyles(chipPropsFor, props)}>\n      {chipContent(children, removeLabel)}\n    </RACTag>;\n}\n\n// StyleX cannot target `[data-selected]` on the element it is styling, so a\n// chip's state comes from the render state React Aria hands its className.\n// Disabled is applied last so it wins over both containers, and StyleX\n// replaces a property whole, so it takes their hover branches with it.\nfunction chipPropsFor(state: TagRenderProps) {\n  return stylex.props(chipStyles.base, chipStyles.target, chipStyles.targetInGroup, focus.ring, state.isSelected ? chipStyles.selected : chipStyles.unselected, state.isDisabled && chipStyles.disabled, state.isDisabled && (state.isSelected ? chipStyles.disabledSelected : chipStyles.disabledUnselected));\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":["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"}
+{"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","_c"],"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.map

@@ -1 +1 @@
-{"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"}
+{"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","ColorArea","_c","RACColorThumb","RACColorArea"],"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,oBAACK,YAAD,EAA0B1B,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,oBAACK,WAAD;GAA0Bf;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.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","ColorFieldProps","RACColorFieldProps","stylex","ColorField","RACColorField","FieldVariant","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 type { FieldVariant } from '../../field';\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  /**\n   * The message shown instead of the description, which also marks the\n   * field invalid.\n   *\n   * Outside a `Form` the message line arrives with the message, so the\n   * field grows when this does and moves what is under it. A `Form` holds\n   * that space from the start; so does a permanent `description`.\n   */\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  /**\n   * An icon at the box's leading end, in the page's 24dp size. A\n   * `ColorSwatch` shows the value. An icon drawn in `em` takes that size\n   * from the slot.\n   */\n  leadingIcon?: ReactNode;\n  /** A function may compute the style from the field's render state. */\n  style?: RACColorFieldProps['style'];\n  /**\n   * An icon at the box's trailing end, in the page's 24dp size. An icon\n   * drawn in `em` takes that size from the slot.\n   */\n  trailingIcon?: ReactNode;\n  /**\n   * Which of the text fields page's two boxes to draw.\n   * @default 'filled'\n   */\n  variant?: FieldVariant;\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":";;;;;;;;;;;;;;;;;;;;;;;;;AAuFA,SAAAI,aAAAoB,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,KAAA7B;CAAa,IAAA8B;CAAA,IAAAV,EAAA,OAAAR,OAAA;EAAoCkB,KAAAxB,YAAYM,KAAK;EAACQ,EAAA,KAAAR;EAAAQ,EAAA,KAAAU;CAAA,OAAAA,KAAAV,EAAA;CAAyD,MAAAW,KAAAvB,oBAAoBV,MAAaO,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"}
+{"version":3,"file":"index.js","names":["ReactNode","ColorFieldProps","RACColorFieldProps","stylex","ColorField","RACColorField","FieldVariant","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","ColorField","_c","props","RACColorField","stylex.props"],"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 type { FieldVariant } from '../../field';\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  /**\n   * The message shown instead of the description, which also marks the\n   * field invalid.\n   *\n   * Outside a `Form` the message line arrives with the message, so the\n   * field grows when this does and moves what is under it. A `Form` holds\n   * that space from the start; so does a permanent `description`.\n   */\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  /**\n   * An icon at the box's leading end, in the page's 24dp size. A\n   * `ColorSwatch` shows the value. An icon drawn in `em` takes that size\n   * from the slot.\n   */\n  leadingIcon?: ReactNode;\n  /** A function may compute the style from the field's render state. */\n  style?: RACColorFieldProps['style'];\n  /**\n   * An icon at the box's trailing end, in the page's 24dp size. An icon\n   * drawn in `em` takes that size from the slot.\n   */\n  trailingIcon?: ReactNode;\n  /**\n   * Which of the text fields page's two boxes to draw.\n   * @default 'filled'\n   */\n  variant?: FieldVariant;\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":";;;;;;;;;;;;;;;;;;;;;;;;;AAuFA,SAAAI,aAAAoB,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,KAAA7B;CAAa,IAAA8B;CAAA,IAAAV,EAAA,OAAAR,OAAA;EAAoCkB,KAAAxB,YAAYM,KAAK;EAACQ,EAAA,KAAAR;EAAAQ,EAAA,KAAAU;CAAA,OAAAA,KAAAV,EAAA;CAAyD,MAAAW,KAAAvB,oBAAoBV,MAAaO,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"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["CSSProperties","ReactNode","ButtonRenderProps","ColorPickerProps","RACColorPickerProps","stylex","Button","RACButton","ColorPicker","RACColorPicker","Dialog","RACDialog","DialogTrigger","RACDialogTrigger","Popover","RACPopover","focus","mergeStatefulStyles","overlay","picker","colors","radii","spacing","stateLayerOpacity","typography","ColorArea","ColorField","ColorSlider","ColorSwatch","triggerStyles","base","kGNEyG","kWkggS","kaIpWk","kMzoRj","kB7OPa","kMwMTN","kkrTdU","k1xSpc","kMv6JI","kGuDYH","k63SB2","kOIVth","kb6lSQ","kLWn49","k8WAf4","kg3NbH","$$css","disabled","Omit","alpha","children","className","container","Element","defaultOpen","isDisabled","isOpen","label","onOpenChange","style","t0","$","_c","props","t1","t2","undefined","t3","_temp","t4","Symbol","for","t5","t6","popup","popover","t7","popupDialog","ring","t8","t9","t10","t11","t12","state"],"sources":["../../../src/components/color-picker/index.tsx"],"sourcesContent":["import type { CSSProperties, ReactNode } from 'react';\nimport type { ButtonRenderProps, ColorPickerProps as RACColorPickerProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Button as RACButton, ColorPicker as RACColorPicker, Dialog as RACDialog, DialogTrigger as RACDialogTrigger, Popover as RACPopover } from 'react-aria-components';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport { overlay } from '../../styles/overlay';\nimport { picker } from '../../styles/picker';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\nimport ColorArea from '../color-area';\nimport ColorField from '../color-field';\nimport ColorSlider from '../color-slider';\nimport ColorSwatch from '../color-swatch';\n\n// Everything in this phase, in one control: a swatch and a label as the\n// trigger, and a plane, a hue slider, an alpha slider and a text field on\n// the surface it opens. React Aria's `ColorPicker` renders nothing of its\n// own — it is the state the five share — so what is here is the trigger,\n// the overlay and the arrangement inside it.\n//\n// The design carries no page for a colour picker. What it does carry is the\n// text fields page, which the field inside this one already draws through,\n// and the overlay surface every popover here shares. Three choices are the\n// library's own.\n//\n// **The trigger is a swatch beside a name, not a swatch alone.** A swatch\n// on its own is a coloured square with no affordance — nothing says it can\n// be pressed, and a screen reader is told a colour rather than an action.\n// The label is what makes it a button.\n//\n// **Hue is a slider rather than a wheel here.** A wheel and the plane want\n// the same space and would make the surface square and large; the strip\n// sits under the plane at the width it already has. `ColorWheel` is for a\n// picker that wants to be round, which is a different shape rather than a\n// different control.\n//\n// **It is docked above the medium breakpoint and modal below it**, centred\n// over a scrim there — the same swap `DatePicker` makes, at the width `Sheet`\n// changes presentation too, and the shared one in `src/styles/picker.ts`\n// rather than a third copy. A 280dp surface anchored to a trigger is\n// unreachable at 375px.\n//\n// One thing the picker has to do that its parts do not. **The plane and the\n// hue strip are pinned to HSL.** A channel has to belong to the value's own\n// space or React Aria throws, and a hex parses as RGB, which has no\n// saturation — so `<ColorPicker defaultValue=\"#6750A4\" />`, the call anyone\n// writes first, would throw outright. Converting here is what makes the\n// picker take any notation, and it costs the caller nothing: the value\n// handed back is still in whatever they passed.\n\nconst triggerStyles = {\n  base: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xu5m21g x5r8g2b x1vnz5z6\",\n    kaIpWk: \"x1dkaolv\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x139gbkf\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x3nfvp2\",\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kOIVth: \"x126z3so\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    k8WAf4: \"x1cmllll\",\n    kg3NbH: \"x18fpw6u\",\n    $$css: true\n  },\n  disabled: {\n    kWkggS: \"x19v6zzp\",\n    kMwMTN: \"x1xj74d8\",\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  }\n};\ntype ColorPickerProps = Omit<RACColorPickerProps, 'children'> & {\n  /** Whether the alpha strip is drawn under the hue one. @default false */\n  alpha?: boolean;\n  /** Replaces everything on the surface, for a picker that arranges its own parts. */\n  children?: ReactNode;\n  /** Lands on the trigger, which is the element a layout positions. */\n  className?: string;\n  /**\n   * Where to portal the surface. Defaults to the end of `<body>`, which is\n   * right for an app that sets its StyleX theme on `:root`. An app that\n   * scopes the theme to a subtree has to point this at an element inside it,\n   * or the surface renders outside the theme and falls back to the tokens'\n   * `prefers-color-scheme` default.\n   */\n  container?: Element;\n  /** Whether the surface starts open. Uncontrolled; pair `isOpen` with `onOpenChange` instead. */\n  defaultOpen?: boolean;\n  /**\n   * Whether the whole picker is inert — the trigger, and the plane, strips\n   * and field on the surface, which can be on screen while disabled since\n   * the surface opens independently of the trigger. An arrangement passed\n   * as `children` is the call site's own to disable.\n   * @default false\n   */\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?: 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  container,\n  defaultOpen,\n  isDisabled = false,\n  isOpen,\n  label,\n  onOpenChange,\n  style,\n  ...props\n}: ColorPickerProps) {\n  return <RACColorPicker {...props}>\n      <RACDialogTrigger defaultOpen={defaultOpen} isOpen={isOpen} onOpenChange={onOpenChange}>\n        <RACButton isDisabled={isDisabled} {...mergeStatefulStyles(\n      // A function of the state rather than a fixed class, since the\n      // trigger is the element a layout positions and the call site's\n      // own class has to merge into it — a plain `className` would\n      // overwrite one or the other.\n      (state: ButtonRenderProps) => stylex.props(triggerStyles.base, focus.ring, state.isDisabled && triggerStyles.disabled), {\n        className,\n        style\n      })}>\n          <ColorSwatch className=\"xxk0z11 x2lah0s xvy4d1p\" />\n          {label}\n        </RACButton>\n        <RACPopover\n      // oxlint-disable-next-line typescript/no-deprecated -- its replacement, UNSAFE_PortalProvider, is not exported by react-aria-components\n      UNSTABLE_portalContainer={container} {...stylex.props(overlay.popup, picker.popover)}>\n          <RACDialog {...stylex.props(overlay.popupDialog, focus.ring)}>\n            {/*\n              Disabled reaches every control here, not only the trigger.\n              React Aria's colour picker carries no disabled state of its\n              own — react-stately's `useColorPickerState` has no such\n              concept — so nothing hands it down the way a field's context\n              would. And the surface opens independently of the trigger, so\n              a disabled picker can still be on screen: already open when a\n              form disables it, or opened from outside. Without this the\n              plane could be dragged, the strips moved with the arrow keys\n              and the field typed into, all changing the value of something\n              documented as inert.\n               An arrangement a call site passes as `children` is its own to\n              disable; there is no context to reach it through.\n             */}\n            {children ?? <div className=\"x9f619 x78zum5 xdt5ytf x1gka490 x1dz1jew x193iq5w xgc26li\">\n                <ColorArea aria-label={label} colorSpace=\"hsl\" isDisabled={isDisabled} xChannel=\"saturation\" yChannel=\"lightness\" />\n                <ColorSlider channel=\"hue\" colorSpace=\"hsl\" isDisabled={isDisabled} label=\"Hue\" />\n                {alpha ? <ColorSlider channel=\"alpha\" isDisabled={isDisabled} label=\"Alpha\" /> : null}\n                <ColorField isDisabled={isDisabled} label={label} />\n              </div>}\n          </RACDialog>\n        </RACPopover>\n      </RACDialogTrigger>\n    </RACColorPicker>;\n}\nexport type { ColorPickerProps };\nexport default ColorPicker;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["CSSProperties","ReactNode","ButtonRenderProps","ColorPickerProps","RACColorPickerProps","stylex","Button","RACButton","ColorPicker","RACColorPicker","Dialog","RACDialog","DialogTrigger","RACDialogTrigger","Popover","RACPopover","focus","mergeStatefulStyles","overlay","picker","colors","radii","spacing","stateLayerOpacity","typography","ColorArea","ColorField","ColorSlider","ColorSwatch","triggerStyles","base","kGNEyG","kWkggS","kaIpWk","kMzoRj","kB7OPa","kMwMTN","kkrTdU","k1xSpc","kMv6JI","kGuDYH","k63SB2","kOIVth","kb6lSQ","kLWn49","k8WAf4","kg3NbH","$$css","disabled","Omit","alpha","children","className","container","Element","defaultOpen","isDisabled","isOpen","label","onOpenChange","style","t0","$","_c","props","t1","t2","undefined","t3","_temp","t4","Symbol","for","t5","t6","popup","popover","t7","popupDialog","ring","t8","t9","t10","t11","t12","state","ColorPicker","_c","props","ColorSwatch","RACButton","stylex.props","ColorArea","ColorSlider","ColorField","RACDialog","RACPopover","RACDialogTrigger","RACColorPicker"],"sources":["../../../src/components/color-picker/index.tsx"],"sourcesContent":["import type { CSSProperties, ReactNode } from 'react';\nimport type { ButtonRenderProps, ColorPickerProps as RACColorPickerProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Button as RACButton, ColorPicker as RACColorPicker, Dialog as RACDialog, DialogTrigger as RACDialogTrigger, Popover as RACPopover } from 'react-aria-components';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport { overlay } from '../../styles/overlay';\nimport { picker } from '../../styles/picker';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\nimport ColorArea from '../color-area';\nimport ColorField from '../color-field';\nimport ColorSlider from '../color-slider';\nimport ColorSwatch from '../color-swatch';\n\n// Everything in this phase, in one control: a swatch and a label as the\n// trigger, and a plane, a hue slider, an alpha slider and a text field on\n// the surface it opens. React Aria's `ColorPicker` renders nothing of its\n// own — it is the state the five share — so what is here is the trigger,\n// the overlay and the arrangement inside it.\n//\n// The design carries no page for a colour picker. What it does carry is the\n// text fields page, which the field inside this one already draws through,\n// and the overlay surface every popover here shares. Three choices are the\n// library's own.\n//\n// **The trigger is a swatch beside a name, not a swatch alone.** A swatch\n// on its own is a coloured square with no affordance — nothing says it can\n// be pressed, and a screen reader is told a colour rather than an action.\n// The label is what makes it a button.\n//\n// **Hue is a slider rather than a wheel here.** A wheel and the plane want\n// the same space and would make the surface square and large; the strip\n// sits under the plane at the width it already has. `ColorWheel` is for a\n// picker that wants to be round, which is a different shape rather than a\n// different control.\n//\n// **It is docked above the medium breakpoint and modal below it**, centred\n// over a scrim there — the same swap `DatePicker` makes, at the width `Sheet`\n// changes presentation too, and the shared one in `src/styles/picker.ts`\n// rather than a third copy. A 280dp surface anchored to a trigger is\n// unreachable at 375px.\n//\n// One thing the picker has to do that its parts do not. **The plane and the\n// hue strip are pinned to HSL.** A channel has to belong to the value's own\n// space or React Aria throws, and a hex parses as RGB, which has no\n// saturation — so `<ColorPicker defaultValue=\"#6750A4\" />`, the call anyone\n// writes first, would throw outright. Converting here is what makes the\n// picker take any notation, and it costs the caller nothing: the value\n// handed back is still in whatever they passed.\n\nconst triggerStyles = {\n  base: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xu5m21g x5r8g2b x1vnz5z6\",\n    kaIpWk: \"x1dkaolv\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x139gbkf\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x3nfvp2\",\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kOIVth: \"x126z3so\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    k8WAf4: \"x1cmllll\",\n    kg3NbH: \"x18fpw6u\",\n    $$css: true\n  },\n  disabled: {\n    kWkggS: \"x19v6zzp\",\n    kMwMTN: \"x1xj74d8\",\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  }\n};\ntype ColorPickerProps = Omit<RACColorPickerProps, 'children'> & {\n  /** Whether the alpha strip is drawn under the hue one. @default false */\n  alpha?: boolean;\n  /** Replaces everything on the surface, for a picker that arranges its own parts. */\n  children?: ReactNode;\n  /** Lands on the trigger, which is the element a layout positions. */\n  className?: string;\n  /**\n   * Where to portal the surface. Defaults to the end of `<body>`, which is\n   * right for an app that sets its StyleX theme on `:root`. An app that\n   * scopes the theme to a subtree has to point this at an element inside it,\n   * or the surface renders outside the theme and falls back to the tokens'\n   * `prefers-color-scheme` default.\n   */\n  container?: Element;\n  /** Whether the surface starts open. Uncontrolled; pair `isOpen` with `onOpenChange` instead. */\n  defaultOpen?: boolean;\n  /**\n   * Whether the whole picker is inert — the trigger, and the plane, strips\n   * and field on the surface, which can be on screen while disabled since\n   * the surface opens independently of the trigger. An arrangement passed\n   * as `children` is the call site's own to disable.\n   * @default false\n   */\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?: 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  container,\n  defaultOpen,\n  isDisabled = false,\n  isOpen,\n  label,\n  onOpenChange,\n  style,\n  ...props\n}: ColorPickerProps) {\n  return <RACColorPicker {...props}>\n      <RACDialogTrigger defaultOpen={defaultOpen} isOpen={isOpen} onOpenChange={onOpenChange}>\n        <RACButton isDisabled={isDisabled} {...mergeStatefulStyles(\n      // A function of the state rather than a fixed class, since the\n      // trigger is the element a layout positions and the call site's\n      // own class has to merge into it — a plain `className` would\n      // overwrite one or the other.\n      (state: ButtonRenderProps) => stylex.props(triggerStyles.base, focus.ring, state.isDisabled && triggerStyles.disabled), {\n        className,\n        style\n      })}>\n          <ColorSwatch className=\"xxk0z11 x2lah0s xvy4d1p\" />\n          {label}\n        </RACButton>\n        <RACPopover\n      // oxlint-disable-next-line typescript/no-deprecated -- its replacement, UNSAFE_PortalProvider, is not exported by react-aria-components\n      UNSTABLE_portalContainer={container} {...stylex.props(overlay.popup, picker.popover)}>\n          <RACDialog {...stylex.props(overlay.popupDialog, focus.ring)}>\n            {/*\n              Disabled reaches every control here, not only the trigger.\n              React Aria's colour picker carries no disabled state of its\n              own — react-stately's `useColorPickerState` has no such\n              concept — so nothing hands it down the way a field's context\n              would. And the surface opens independently of the trigger, so\n              a disabled picker can still be on screen: already open when a\n              form disables it, or opened from outside. Without this the\n              plane could be dragged, the strips moved with the arrow keys\n              and the field typed into, all changing the value of something\n              documented as inert.\n               An arrangement a call site passes as `children` is its own to\n              disable; there is no context to reach it through.\n             */}\n            {children ?? <div className=\"x9f619 x78zum5 xdt5ytf x1gka490 x1dz1jew x193iq5w xgc26li\">\n                <ColorArea aria-label={label} colorSpace=\"hsl\" isDisabled={isDisabled} xChannel=\"saturation\" yChannel=\"lightness\" />\n                <ColorSlider channel=\"hue\" colorSpace=\"hsl\" isDisabled={isDisabled} label=\"Hue\" />\n                {alpha ? <ColorSlider channel=\"alpha\" isDisabled={isDisabled} label=\"Alpha\" /> : null}\n                <ColorField isDisabled={isDisabled} 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.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ColorSliderProps","RACColorSliderProps","stylex","ColorSlider","RACColorSlider","ColorThumb","RACColorThumb","SliderOutput","RACSliderOutput","SliderTrack","RACSliderTrack","FieldLabel","groupStyles","chequer","thumbClassName","mergeStatefulStyles","colors","radii","spacing","stateLayerOpacity","typography","styles","root","kzqmXN","$$css","trackGround","kZKoxP","kaIpWk","kB7OPa","kqGvvJ","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 { groupStyles } from '../../field/styles';\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  root: {\n    kzqmXN: \"xh8yej3\",\n    $$css: true\n  },\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(stylex.props(groupStyles.root, styles.root), props)}>\n      <div className=\"x1pha0wt x78zum5 x126z3so\">\n        {label === undefined ? null : <FieldLabel variant=\"group\">{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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"}
+{"version":3,"file":"index.js","names":["ColorSliderProps","RACColorSliderProps","stylex","ColorSlider","RACColorSlider","ColorThumb","RACColorThumb","SliderOutput","RACSliderOutput","SliderTrack","RACSliderTrack","FieldLabel","groupStyles","chequer","thumbClassName","mergeStatefulStyles","colors","radii","spacing","stateLayerOpacity","typography","styles","root","kzqmXN","$$css","trackGround","kZKoxP","kaIpWk","kB7OPa","kqGvvJ","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","ColorSlider","_c","props","RACColorSlider","stylex.props","RACSliderOutput","RACColorThumb","RACSliderTrack"],"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 { groupStyles } from '../../field/styles';\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  root: {\n    kzqmXN: \"xh8yej3\",\n    $$css: true\n  },\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(stylex.props(groupStyles.root, styles.root), props)}>\n      <div className=\"x1pha0wt x78zum5 x126z3so\">\n        {label === undefined ? null : <FieldLabel variant=\"group\">{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.map

@@ -1 +1 @@
-{"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"}
+{"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","ColorSwatch","_c","props","stylex.props","RACColorSwatch"],"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,oBAACM,aAAD;GAAe,GAAKR;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.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","ColorSwatchPickerItemProps","RACColorSwatchPickerItemProps","ColorSwatchPickerProps","RACColorSwatchPickerProps","stylex","ColorSwatchPicker","RACColorSwatchPicker","ColorSwatchPickerItem","RACColorSwatchPickerItem","mergeStatefulStyles","colors","radii","spacing","stateLayerOpacity","ColorSwatch","FORCED_COLORS","styles","item","kaIpWk","kB7OPa","kkrTdU","k1xSpc","kjBf7l","kInvED","k3XXqK","kMeerF","$$css","itemDisabled","kSiTet","itemFocused","itemHovered","itemPressed","itemSelected","Omit","children","className","style","props","$","_c","t0","t1","T0","t2","t3","itemStyles","t4","state","isDisabled","isFocusVisible","isHovered","isPressed","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//\n// **Hover and press are a ring too, in the slot selection would take.** Every\n// other interactive element here answers the pointer with a state layer, but\n// a state layer is a fill and a swatch's fill is the colour being chosen:\n// behind it the tint is hidden, over it the tint changes the colour. So an\n// unselected swatch under the pointer takes a ring at the selection ring's\n// offset, drawn in the outline roles rather than primary so it cannot be read\n// as chosen — outline variant while a pointer is over it, and outline while a\n// touch or a pen holds it. Those are the only presses anyone sees: React Aria\n// chooses a swatch the moment a mouse or a key presses it, and on release for\n// a touch, so that press is the one a reader waits through before the swatch\n// is theirs. Under forced colours both roles become one system colour, so the\n// ring turns dashed there, where the selection ring stays solid.\n\nconst FORCED_COLORS = '@media (forced-colors: active)';\nconst styles = {\n  item: {\n    kaIpWk: \"x1tfhd1\",\n    kB7OPa: \"x9f619\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x3nfvp2\",\n    kjBf7l: \"xrgy624\",\n    kInvED: \"x1hl8ikr\",\n    k3XXqK: \"x1t137rt\",\n    kMeerF: \"x1de99jn\",\n    $$css: true\n  },\n  itemDisabled: {\n    kkrTdU: \"xt0e3qv\",\n    kSiTet: \"x1ppv7y9\",\n    $$css: true\n  },\n  itemFocused: {\n    kjBf7l: \"xrgy624\",\n    kInvED: \"x8wkva7\",\n    k3XXqK: \"xaatb59\",\n    $$css: true\n  },\n  itemHovered: {\n    kjBf7l: \"x1wab145\",\n    kInvED: \"x1hl8ikr\",\n    k3XXqK: \"xaatb59 xq4115o\",\n    $$css: true\n  },\n  itemPressed: {\n    kjBf7l: \"x5ma03c\",\n    kInvED: \"x1hl8ikr\",\n    k3XXqK: \"xaatb59 xq4115o\",\n    $$css: true\n  },\n  itemSelected: {\n    kjBf7l: \"xrgy624\",\n    kInvED: \"x1hl8ikr\",\n    k3XXqK: \"xaatb59\",\n    $$css: true\n  }\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} {...mergeStatefulStyles(itemStyles, props)}>\n      {children ?? <ColorSwatch />}\n    </RACColorSwatchPickerItem>;\n}\n\n// The item's styles, 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. The hover and press rings come before both, so a chosen or focused\n// swatch keeps the ring that says so. `disabled` is last, so it takes the\n// cursor with it; React Aria reports neither hover nor press on one.\nfunction itemStyles(state: {\n  isDisabled: boolean;\n  isFocusVisible: boolean;\n  isHovered: boolean;\n  isPressed: boolean;\n  isSelected: boolean;\n}) {\n  return stylex.props(styles.item, state.isHovered && styles.itemHovered, state.isPressed && styles.itemPressed, state.isSelected && styles.itemSelected, state.isFocusVisible && styles.itemFocused, state.isDisabled && styles.itemDisabled);\n}\nColorSwatchPicker.Item = ColorSwatchPickerItem;\nexport type { ColorSwatchPickerItemProps, ColorSwatchPickerProps };\nexport default ColorSwatchPicker;"],"mappings":";;;;;;;AA6CA,MAAMiB,SAAS;CACbC,MAAM;EACJC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;CACT;CACAC,cAAc;EACZP,QAAQ;EACRQ,QAAQ;EACRF,OAAO;CACT;CACAG,aAAa;EACXP,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRE,OAAO;CACT;CACAI,aAAa;EACXR,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRE,OAAO;CACT;CACAK,aAAa;EACXT,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRE,OAAO;CACT;CACAM,cAAc;EACZV,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRE,OAAO;CACT;AACF;;;;;;;;;;;;;;;;;;;;;AAoCA,SAAArB,oBAAAgC,OAAA;CAAA,MAAAC,IAAAC,EAAA,CAAA;CAAA,IAAAC;CAAA,IAAAF,EAAA,OAAAD,OAAA;EAC8CG,KAAA/B,oBAAoB,EAAA0B,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,SAAAlC,wBAAAiC,IAAA;CAAA,MAAAF,IAAAC,EAAA,EAAA;CAAA,IAAAG;CAAA,IAAAR;CAAA,IAAAO;CAAA,IAAAE;CAAA,IAAAL,EAAA,OAAAE,IAAA;EAA+B,MAAA,EAAAN,UAAAU,IAAA,GAAAP,UAAAG;EAAAN,WAAAU;EAIrBF,KAAAlC;EAA6B6B,KAAAA;EAAWM,KAAAlC,oBAAoBoC,YAAYR,KAAK;EAACC,EAAA,KAAAE;EAAAF,EAAA,KAAAI;EAAAJ,EAAA,KAAAJ;EAAAI,EAAA,KAAAG;EAAAH,EAAA,KAAAK;CAAA,OAAA;EAAAD,KAAAJ,EAAA;EAAAJ,WAAAI,EAAA;EAAAG,KAAAH,EAAA;EAAAK,KAAAL,EAAA;CAAA;CAAA,IAAAM;CAAA,IAAAN,EAAA,OAAAJ,UAAA;EACjFU,KAAAV,YAAY,oBAAC,eAAD,CAAY,CAAA;EAAGI,EAAA,KAAAJ;EAAAI,EAAA,KAAAM;CAAA,OAAAA,KAAAN,EAAA;CAAA,IAAAQ;CAAA,IAAAR,EAAA,OAAAI,MAAAJ,EAAA,OAAAG,MAAAH,EAAA,OAAAK,MAAAL,EAAA,QAAAM,IAAA;EADzBE,KAAA,oBAAC,IAAD;GAAyB,GAAKT;GAAK,GAAMM;GAC3CC,UAAAA;EAD2B,CAAA;EAEHN,EAAA,KAAAI;EAAAJ,EAAA,KAAAG;EAAAH,EAAA,KAAAK;EAAAL,EAAA,MAAAM;EAAAN,EAAA,MAAAQ;CAAA,OAAAA,KAAAR,EAAA;CAAA,OAFtBQ;AAEsB;AAa/B,SAASD,WAAWE,OAMjB;CACD,OAAO3C,MAAaY,OAAOC,MAAM8B,MAAMG,aAAalC,OAAOc,aAAaiB,MAAMI,aAAanC,OAAOe,aAAagB,MAAMK,cAAcpC,OAAOgB,cAAce,MAAME,kBAAkBjC,OAAOa,aAAakB,MAAMC,cAAchC,OAAOW,YAAY;AAC7O;AACAtB,oBAAkBgD,OAAO9C"}
+{"version":3,"file":"index.js","names":["ReactNode","ColorSwatchPickerItemProps","RACColorSwatchPickerItemProps","ColorSwatchPickerProps","RACColorSwatchPickerProps","stylex","ColorSwatchPicker","RACColorSwatchPicker","ColorSwatchPickerItem","RACColorSwatchPickerItem","mergeStatefulStyles","colors","radii","spacing","stateLayerOpacity","ColorSwatch","FORCED_COLORS","styles","item","kaIpWk","kB7OPa","kkrTdU","k1xSpc","kjBf7l","kInvED","k3XXqK","kMeerF","$$css","itemDisabled","kSiTet","itemFocused","itemHovered","itemPressed","itemSelected","Omit","children","className","style","props","$","_c","t0","t1","T0","t2","t3","itemStyles","t4","state","isDisabled","isFocusVisible","isHovered","isPressed","isSelected","Item","ColorSwatchPicker","_c","RACColorSwatchPicker","ColorSwatchPickerItem","RACColorSwatchPickerItem","ColorSwatch","stylex.props"],"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//\n// **Hover and press are a ring too, in the slot selection would take.** Every\n// other interactive element here answers the pointer with a state layer, but\n// a state layer is a fill and a swatch's fill is the colour being chosen:\n// behind it the tint is hidden, over it the tint changes the colour. So an\n// unselected swatch under the pointer takes a ring at the selection ring's\n// offset, drawn in the outline roles rather than primary so it cannot be read\n// as chosen — outline variant while a pointer is over it, and outline while a\n// touch or a pen holds it. Those are the only presses anyone sees: React Aria\n// chooses a swatch the moment a mouse or a key presses it, and on release for\n// a touch, so that press is the one a reader waits through before the swatch\n// is theirs. Under forced colours both roles become one system colour, so the\n// ring turns dashed there, where the selection ring stays solid.\n\nconst FORCED_COLORS = '@media (forced-colors: active)';\nconst styles = {\n  item: {\n    kaIpWk: \"x1tfhd1\",\n    kB7OPa: \"x9f619\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x3nfvp2\",\n    kjBf7l: \"xrgy624\",\n    kInvED: \"x1hl8ikr\",\n    k3XXqK: \"x1t137rt\",\n    kMeerF: \"x1de99jn\",\n    $$css: true\n  },\n  itemDisabled: {\n    kkrTdU: \"xt0e3qv\",\n    kSiTet: \"x1ppv7y9\",\n    $$css: true\n  },\n  itemFocused: {\n    kjBf7l: \"xrgy624\",\n    kInvED: \"x8wkva7\",\n    k3XXqK: \"xaatb59\",\n    $$css: true\n  },\n  itemHovered: {\n    kjBf7l: \"x1wab145\",\n    kInvED: \"x1hl8ikr\",\n    k3XXqK: \"xaatb59 xq4115o\",\n    $$css: true\n  },\n  itemPressed: {\n    kjBf7l: \"x5ma03c\",\n    kInvED: \"x1hl8ikr\",\n    k3XXqK: \"xaatb59 xq4115o\",\n    $$css: true\n  },\n  itemSelected: {\n    kjBf7l: \"xrgy624\",\n    kInvED: \"x1hl8ikr\",\n    k3XXqK: \"xaatb59\",\n    $$css: true\n  }\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} {...mergeStatefulStyles(itemStyles, props)}>\n      {children ?? <ColorSwatch />}\n    </RACColorSwatchPickerItem>;\n}\n\n// The item's styles, 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. The hover and press rings come before both, so a chosen or focused\n// swatch keeps the ring that says so. `disabled` is last, so it takes the\n// cursor with it; React Aria reports neither hover nor press on one.\nfunction itemStyles(state: {\n  isDisabled: boolean;\n  isFocusVisible: boolean;\n  isHovered: boolean;\n  isPressed: boolean;\n  isSelected: boolean;\n}) {\n  return stylex.props(styles.item, state.isHovered && styles.itemHovered, state.isPressed && styles.itemPressed, state.isSelected && styles.itemSelected, state.isFocusVisible && styles.itemFocused, state.isDisabled && styles.itemDisabled);\n}\nColorSwatchPicker.Item = ColorSwatchPickerItem;\nexport type { ColorSwatchPickerItemProps, ColorSwatchPickerProps };\nexport default ColorSwatchPicker;"],"mappings":";;;;;;;AA6CA,MAAMiB,SAAS;CACbC,MAAM;EACJC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;CACT;CACAC,cAAc;EACZP,QAAQ;EACRQ,QAAQ;EACRF,OAAO;CACT;CACAG,aAAa;EACXP,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRE,OAAO;CACT;CACAI,aAAa;EACXR,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRE,OAAO;CACT;CACAK,aAAa;EACXT,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRE,OAAO;CACT;CACAM,cAAc;EACZV,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRE,OAAO;CACT;AACF;;;;;;;;;;;;;;;;;;;;;AAoCA,SAAArB,oBAAAgC,OAAA;CAAA,MAAAC,IAAAC,EAAA,CAAA;CAAA,IAAAC;CAAA,IAAAF,EAAA,OAAAD,OAAA;EAC8CG,KAAA/B,oBAAoB,EAAA0B,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,oBAACe,mBAAD;GAAqB,GAAKnB;GAAK,GAAMG;EAEnC,CAAA;EAAIF,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,KAAAG;CAAA,OAAAA,KAAAH,EAAA;CAAA,OAFNG;AAEM;;;;;AAOf,SAAAlC,wBAAAiC,IAAA;CAAA,MAAAF,IAAAC,EAAA,EAAA;CAAA,IAAAG;CAAA,IAAAR;CAAA,IAAAO;CAAA,IAAAE;CAAA,IAAAL,EAAA,OAAAE,IAAA;EAA+B,MAAA,EAAAN,UAAAU,IAAA,GAAAP,UAAAG;EAAAN,WAAAU;EAIrBF,KAAAlC;EAA6B6B,KAAAA;EAAWM,KAAAlC,oBAAoBoC,YAAYR,KAAK;EAACC,EAAA,KAAAE;EAAAF,EAAA,KAAAI;EAAAJ,EAAA,KAAAJ;EAAAI,EAAA,KAAAG;EAAAH,EAAA,KAAAK;CAAA,OAAA;EAAAD,KAAAJ,EAAA;EAAAJ,WAAAI,EAAA;EAAAG,KAAAH,EAAA;EAAAK,KAAAL,EAAA;CAAA;CAAA,IAAAM;CAAA,IAAAN,EAAA,OAAAJ,UAAA;EACjFU,KAAAV,YAAY,oBAACyB,eAAD,CAAY,CAAA;EAAGrB,EAAA,KAAAJ;EAAAI,EAAA,KAAAM;CAAA,OAAAA,KAAAN,EAAA;CAAA,IAAAQ;CAAA,IAAAR,EAAA,OAAAI,MAAAJ,EAAA,OAAAG,MAAAH,EAAA,OAAAK,MAAAL,EAAA,QAAAM,IAAA;EADzBE,KAAA,oBAAC,IAAD;GAAyB,GAAKT;GAAK,GAAMM;GAC3CC,UAAAA;EAD2B,CAAA;EAEHN,EAAA,KAAAI;EAAAJ,EAAA,KAAAG;EAAAH,EAAA,KAAAK;EAAAL,EAAA,MAAAM;EAAAN,EAAA,MAAAQ;CAAA,OAAAA,KAAAR,EAAA;CAAA,OAFtBQ;AAEsB;AAa/B,SAASD,WAAWE,OAMjB;CACD,OAAO3C,MAAaY,OAAOC,MAAM8B,MAAMG,aAAalC,OAAOc,aAAaiB,MAAMI,aAAanC,OAAOe,aAAagB,MAAMK,cAAcpC,OAAOgB,cAAce,MAAME,kBAAkBjC,OAAOa,aAAakB,MAAMC,cAAchC,OAAOW,YAAY;AAC7O;AACAtB,oBAAkBgD,OAAO9C"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ColorWheelProps","RACColorWheelProps","stylex","ColorThumb","RACColorThumb","ColorWheel","RACColorWheel","ColorWheelTrack","RACColorWheelTrack","thumbClassName","mergeStatefulStyles","stateLayerOpacity","DEFAULT_OUTER_RADIUS","DEFAULT_THICKNESS","_temp","kX1K2I","styles","track","kkrTdU","$$css","trackDisabled","trackRing","inner","Math","max","undefined","Omit","className","outerRadius","style","thickness","t0","$","_c","props","t1","t2","t3","isDisabled","innerRadius","t4","0","1","t5","t6","t7","Symbol","for","t8"],"sources":["../../../src/components/color-wheel/index.tsx"],"sourcesContent":["import type { ColorWheelProps as RACColorWheelProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { ColorThumb as RACColorThumb, ColorWheel as RACColorWheel, ColorWheelTrack as RACColorWheelTrack } from 'react-aria-components';\nimport { thumbClassName } from '../../styles/color';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { stateLayerOpacity } from '../../tokens/design.tokens.stylex';\n\n// Hue as a ring. React Aria paints the conic gradient on the track's own\n// inline `background` and sizes it from `outerRadius`, so what is here is\n// the hole in the middle and the handle `ColorSlider` already draws, from\n// `src/styles/color.ts`.\n//\n// The design carries no page for this. Three things follow, each a choice\n// rather than a reading.\n//\n// **The ring's thickness is the sliders page's 16dp track.** A hue wheel and\n// a hue slider are the same control in two shapes, so the band a reader\n// drags along is the same width in both.\n//\n// **The thickness is a prop and the inner radius is not.** React Aria takes\n// both radii and would accept an inner one larger than the outer, which\n// draws nothing at all; deriving it is what stops the two disagreeing.\n//\n// **The hole is cut with a mask, not drawn with a disc on top.** A disc in\n// the wheel's own surface colour would be opaque, so anything the wheel is\n// placed over — a card, a photograph, another control — would be hidden by\n// a circle nothing explains. The mask leaves the middle genuinely empty,\n// which is also what lets a swatch or an area sit inside one.\n\nconst DEFAULT_OUTER_RADIUS = 100;\n// The sliders page's track, which is what a hue slider draws.\nconst DEFAULT_THICKNESS = 16;\nconst _temp = {\n  kX1K2I: \"xwjwp01\",\n  \"$$css\": true\n};\nconst styles = {\n  track: {\n    kkrTdU: \"x1ypdohk\",\n    $$css: true\n  },\n  trackDisabled: {\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  trackRing: (inner: number) => [_temp, {\n    \"--x-maskImage\": `radial-gradient(circle at center, transparent ${Math.max(0, inner - 0.5)}px, #000 ${inner + 0.5}px)` != null ? `radial-gradient(circle at center, transparent ${Math.max(0, inner - 0.5)}px, #000 ${inner + 0.5}px)` : undefined\n  }]\n};\ntype ColorWheelProps = Omit<RACColorWheelProps, 'children' | 'className' | 'innerRadius' | 'outerRadius' | 'style'> & {\n  /** A function may compute the class from the wheel's render state. */\n  className?: RACColorWheelProps['className'];\n  /**\n   * How far the ring reaches from the centre, in pixels. The wheel is twice\n   * this across.\n   * @default 100\n   */\n  outerRadius?: number;\n  /** A function may compute the style from the wheel's render state. */\n  style?: RACColorWheelProps['style'];\n  /**\n   * How wide the band is, in pixels. The inner radius is this in from\n   * `outerRadius`, so the two cannot disagree.\n   * @default 16\n   */\n  thickness?: number;\n};\n\n/**\n * Hue as a ring, with a handle on it. The value is React Aria's: pass\n * `value` with `onChange` to control it, or `defaultValue`, as a CSS colour\n * string or a `Color` from `parseColor`, which this package re-exports.\n *\n * ```tsx\n * <ColorWheel defaultValue=\"hsl(200, 100%, 50%)\" />\n * ```\n *\n * A wheel slides hue and nothing else, so unlike `ColorSlider` and\n * `ColorArea` it names no channel and there is no space for one to be\n * missing from — a hex value works here.\n *\n * The middle is genuinely empty rather than filled, so a `ColorArea` or a\n * `ColorSwatch` can sit inside one. React Aria names the handle \"Hue\" and\n * announces the value; pass `aria-label` to say something else.\n *\n * The call site's `className` and `style` land on the wheel, which is the\n * element a layout positions. Its size comes from `outerRadius`.\n */\nfunction ColorWheel({\n  className,\n  isDisabled = false,\n  outerRadius = DEFAULT_OUTER_RADIUS,\n  style,\n  thickness = DEFAULT_THICKNESS,\n  ...props\n}: ColorWheelProps) {\n  const innerRadius = Math.max(0, outerRadius - thickness);\n  return <RACColorWheel innerRadius={innerRadius} isDisabled={isDisabled} outerRadius={outerRadius} {...props} {...mergeStatefulStyles({\n    0: {\n      className: \"x9f619 x1rg5ohu x14ju556\"\n    },\n    1: {\n      className: \"x9f619 x1rg5ohu x14ju556 x1ppv7y9\"\n    }\n  }[!!isDisabled << 0], {\n    className,\n    style\n  })}>\n      <RACColorWheelTrack {...stylex.props(styles.track, styles.trackRing(innerRadius), isDisabled && styles.trackDisabled)} />\n      <RACColorThumb className={thumbClassName} />\n    </RACColorWheel>;\n}\nexport type { ColorWheelProps };\nexport default ColorWheel;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ColorWheelProps","RACColorWheelProps","stylex","ColorThumb","RACColorThumb","ColorWheel","RACColorWheel","ColorWheelTrack","RACColorWheelTrack","thumbClassName","mergeStatefulStyles","stateLayerOpacity","DEFAULT_OUTER_RADIUS","DEFAULT_THICKNESS","_temp","kX1K2I","styles","track","kkrTdU","$$css","trackDisabled","trackRing","inner","Math","max","undefined","Omit","className","outerRadius","style","thickness","t0","$","_c","props","t1","t2","t3","isDisabled","innerRadius","t4","0","1","t5","t6","t7","Symbol","for","t8","ColorWheel","_c","props","stylex.props","RACColorWheelTrack","RACColorThumb","RACColorWheel"],"sources":["../../../src/components/color-wheel/index.tsx"],"sourcesContent":["import type { ColorWheelProps as RACColorWheelProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { ColorThumb as RACColorThumb, ColorWheel as RACColorWheel, ColorWheelTrack as RACColorWheelTrack } from 'react-aria-components';\nimport { thumbClassName } from '../../styles/color';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { stateLayerOpacity } from '../../tokens/design.tokens.stylex';\n\n// Hue as a ring. React Aria paints the conic gradient on the track's own\n// inline `background` and sizes it from `outerRadius`, so what is here is\n// the hole in the middle and the handle `ColorSlider` already draws, from\n// `src/styles/color.ts`.\n//\n// The design carries no page for this. Three things follow, each a choice\n// rather than a reading.\n//\n// **The ring's thickness is the sliders page's 16dp track.** A hue wheel and\n// a hue slider are the same control in two shapes, so the band a reader\n// drags along is the same width in both.\n//\n// **The thickness is a prop and the inner radius is not.** React Aria takes\n// both radii and would accept an inner one larger than the outer, which\n// draws nothing at all; deriving it is what stops the two disagreeing.\n//\n// **The hole is cut with a mask, not drawn with a disc on top.** A disc in\n// the wheel's own surface colour would be opaque, so anything the wheel is\n// placed over — a card, a photograph, another control — would be hidden by\n// a circle nothing explains. The mask leaves the middle genuinely empty,\n// which is also what lets a swatch or an area sit inside one.\n\nconst DEFAULT_OUTER_RADIUS = 100;\n// The sliders page's track, which is what a hue slider draws.\nconst DEFAULT_THICKNESS = 16;\nconst _temp = {\n  kX1K2I: \"xwjwp01\",\n  \"$$css\": true\n};\nconst styles = {\n  track: {\n    kkrTdU: \"x1ypdohk\",\n    $$css: true\n  },\n  trackDisabled: {\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  trackRing: (inner: number) => [_temp, {\n    \"--x-maskImage\": `radial-gradient(circle at center, transparent ${Math.max(0, inner - 0.5)}px, #000 ${inner + 0.5}px)` != null ? `radial-gradient(circle at center, transparent ${Math.max(0, inner - 0.5)}px, #000 ${inner + 0.5}px)` : undefined\n  }]\n};\ntype ColorWheelProps = Omit<RACColorWheelProps, 'children' | 'className' | 'innerRadius' | 'outerRadius' | 'style'> & {\n  /** A function may compute the class from the wheel's render state. */\n  className?: RACColorWheelProps['className'];\n  /**\n   * How far the ring reaches from the centre, in pixels. The wheel is twice\n   * this across.\n   * @default 100\n   */\n  outerRadius?: number;\n  /** A function may compute the style from the wheel's render state. */\n  style?: RACColorWheelProps['style'];\n  /**\n   * How wide the band is, in pixels. The inner radius is this in from\n   * `outerRadius`, so the two cannot disagree.\n   * @default 16\n   */\n  thickness?: number;\n};\n\n/**\n * Hue as a ring, with a handle on it. The value is React Aria's: pass\n * `value` with `onChange` to control it, or `defaultValue`, as a CSS colour\n * string or a `Color` from `parseColor`, which this package re-exports.\n *\n * ```tsx\n * <ColorWheel defaultValue=\"hsl(200, 100%, 50%)\" />\n * ```\n *\n * A wheel slides hue and nothing else, so unlike `ColorSlider` and\n * `ColorArea` it names no channel and there is no space for one to be\n * missing from — a hex value works here.\n *\n * The middle is genuinely empty rather than filled, so a `ColorArea` or a\n * `ColorSwatch` can sit inside one. React Aria names the handle \"Hue\" and\n * announces the value; pass `aria-label` to say something else.\n *\n * The call site's `className` and `style` land on the wheel, which is the\n * element a layout positions. Its size comes from `outerRadius`.\n */\nfunction ColorWheel({\n  className,\n  isDisabled = false,\n  outerRadius = DEFAULT_OUTER_RADIUS,\n  style,\n  thickness = DEFAULT_THICKNESS,\n  ...props\n}: ColorWheelProps) {\n  const innerRadius = Math.max(0, outerRadius - thickness);\n  return <RACColorWheel innerRadius={innerRadius} isDisabled={isDisabled} outerRadius={outerRadius} {...props} {...mergeStatefulStyles({\n    0: {\n      className: \"x9f619 x1rg5ohu x14ju556\"\n    },\n    1: {\n      className: \"x9f619 x1rg5ohu x14ju556 x1ppv7y9\"\n    }\n  }[!!isDisabled << 0], {\n    className,\n    style\n  })}>\n      <RACColorWheelTrack {...stylex.props(styles.track, styles.trackRing(innerRadius), isDisabled && styles.trackDisabled)} />\n      <RACColorThumb className={thumbClassName} />\n    </RACColorWheel>;\n}\nexport type { ColorWheelProps };\nexport default ColorWheel;"],"mappings":"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"}