@kanso-labs/kanso-ui 0.26.5 → 0.26.6

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","RadioGroupProps","RACRadioGroupProps","RadioButtonRenderProps","RadioFieldProps","RadioGroupRenderProps","stylex","RadioGroup","RACRadioGroup","RadioButton","RadioField","FieldLabel","FieldMessage","invalidFrom","useFieldValidationBehavior","useRipple","focus","mergeStatefulStyles","colors","motion","radii","spacing","stateLayerOpacity","typography","styles","control","kGNEyG","kWkggS","kZKoxP","kaIpWk","kB7OPa","kMwMTN","kkrTdU","k1xSpc","kmuXW","kzqmXN","kjj79g","kVAEAm","kIyJzY","k1ekBW","kAMwcw","$$css","controlDisabled","controlFocused","controlReadOnly","toneActive","toneDisabled","toneSelected","hoverLayers","selected","unselected","pressedLayers","children","description","error","label","Omit","RadioProps","Ripple","ReturnType","HTMLSpanElement","buttonContent","ripple","state","interactive","isDisabled","isReadOnly","tone","isSelected","active","isHovered","isPressed","isFocusVisible","handlers","props","ringVisible","surface","undefined","className","groupContent","horizontal","Radio","t0","$","_c","T0","t1","t2","t3","t4","t5","orientation","validationBehavior","t6"],"sources":["../../../src/components/radio-group/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { RadioGroupProps as RACRadioGroupProps, RadioButtonRenderProps, RadioFieldProps, RadioGroupRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { RadioGroup as RACRadioGroup, RadioButton, RadioField } from 'react-aria-components';\nimport { FieldLabel, FieldMessage } from '../../field';\nimport { invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { useRipple } from '../../hooks/useRipple';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\n\n// The radio button page: a 20dp ring inside a 40dp state layer, with a 48dp\n// target. Unselected, the ring is 2dp of on surface variant that turns on\n// surface while hovered, pressed or focused; selected, the ring and the 10dp\n// dot inside it are primary. Disabled is on surface at the disabled opacity\n// for both. The state layer is on surface over an unselected button and\n// primary over a selected one while hovered, and the two swap once pressed.\n// The page draws no error state for the button itself: an invalid group\n// says so through its label and message, and the buttons keep their colours.\n//\n// Two components from one module, since neither means anything without the\n// other: a radio button is a member of a group, and the group is what holds\n// the value. React Aria's `RadioGroup` is the group, a div with the label,\n// description and error slots; `RadioField` is one button's root, a div with\n// its description slot; and `RadioButton` is the label around the visually\n// hidden input, whose children draw the button from the render state React\n// Aria hands them. The field is the same two-column grid Checkbox uses, with\n// the label `display: contents` so the description lines up under the text.\n//\n// The adjacent label is body-large on surface, which the page keeps the same\n// whether or not the button is selected.\nconst styles = {\n  control: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kZKoxP: \"x1vqgdyp\",\n    kaIpWk: \"x3y1ksm\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1w5n3ug\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x78zum5\",\n    kmuXW: \"x2lah0s\",\n    kzqmXN: \"x100vrsf\",\n    kjj79g: \"xl56j7k\",\n    kVAEAm: \"x1n2onr6\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"x15406qy\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  controlDisabled: {\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  controlFocused: {\n    $$css: true\n  },\n  controlReadOnly: {\n    kkrTdU: \"xt0e3qv\",\n    $$css: true\n  },\n  toneActive: {\n    kMwMTN: \"x139gbkf\",\n    $$css: true\n  },\n  toneDisabled: {\n    kMwMTN: \"x1gpw424\",\n    $$css: true\n  },\n  toneSelected: {\n    kMwMTN: \"x1mxwv8y\",\n    $$css: true\n  }\n};\n\n// The group's label: label-large, the role a field's label takes at rest,\n// since a group has no box to float it in.\n\n// The state layer follows the button: on surface over an unselected one and\n// primary over a selected one while hovered, the two swapped once pressed.\nconst hoverLayers = {\n  selected: {\n    kWkggS: \"x659ado\",\n    $$css: true\n  },\n  unselected: {\n    kWkggS: \"x1b18xnh\",\n    $$css: true\n  }\n};\nconst pressedLayers = {\n  selected: {\n    kWkggS: \"xjeeohs\",\n    $$css: true\n  },\n  unselected: {\n    kWkggS: \"x1dvjsmr\",\n    $$css: true\n  }\n};\ntype RadioGroupProps = {\n  /** The radio buttons, 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 label's colour and\n   * `aria-invalid` on the group all follow from it.\n   */\n  error?: string;\n  /**\n   * What the group is for. Required rather than optional: a set of radio\n   * buttons with no name is a set a screen reader cannot introduce.\n   */\n  label: string;\n} & Omit<RACRadioGroupProps, 'children' | 'isInvalid' | 'validationBehavior'>;\ntype RadioProps = Omit<RadioFieldProps, 'children'> & {\n  /**\n   * The label, beside the button. A button that a row labels some other way\n   * leaves it out and passes `aria-label` instead.\n   */\n  children?: ReactNode;\n  /** A hint under the label, read with the button. */\n  description?: string;\n};\ntype Ripple = ReturnType<typeof useRipple<HTMLSpanElement>>;\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 button 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: RadioButtonRenderProps) => {\n    const interactive = !state.isDisabled && !state.isReadOnly;\n    const tone = state.isSelected ? 'selected' : 'unselected';\n    const active = state.isHovered || state.isPressed || state.isFocusVisible;\n    return <>\n        <span {...interactive ? ripple.handlers : {}} {...stylex.props(styles.control, state.isSelected && styles.toneSelected, !state.isSelected && interactive && active && styles.toneActive, state.isDisabled && styles.toneDisabled, state.isReadOnly && styles.controlReadOnly, state.isDisabled && styles.controlDisabled, interactive && state.isHovered && hoverLayers[tone], interactive && state.isPressed && pressedLayers[tone], state.isFocusVisible && styles.controlFocused, state.isFocusVisible && focus.ringVisible)}>\n          <span className=\"x6s0dn4 x1qx5ct2 x1r7ld26 x3y1ksm x1y0btm7 xdh2fpr x9f619 x78zum5 xw4jnvo xl56j7k x1qno0dh xshfolx xpc4ca7\">\n            {state.isSelected ? <span className=\"xtwfq29 x170jfvy x3y1ksm x1fsd2vl\" /> : null}\n          </span>\n          {interactive ? ripple.surface : null}\n        </span>\n        {children === undefined ? null : <span {...{\n        0: {\n          className: \"x9f619 x139gbkf x1ypdohk x16svsjw x1848etk x1c52epr x1qn8t5l xh7dzej x1cmllll\"\n        },\n        2: {\n          className: \"x9f619 x139gbkf x16svsjw x1848etk x1c52epr x1qn8t5l xh7dzej x1cmllll xt0e3qv\"\n        },\n        1: {\n          className: \"x9f619 x16svsjw x1848etk x1c52epr x1qn8t5l xh7dzej x1cmllll x1xj74d8 x1h6gzvc\"\n        },\n        3: {\n          className: \"x9f619 x16svsjw x1848etk x1c52epr x1qn8t5l xh7dzej x1cmllll x1xj74d8 x1h6gzvc\"\n        }\n      }[!!state.isReadOnly << 1 | !!state.isDisabled << 0]}>\n            {children}\n          </span>}\n      </>;\n  };\n}\n\n// The group's parts, from its render state: the label's colour follows\n// disabled and invalid the way a field's follows its box.\nfunction groupContent(label: string, children: ReactNode, description: string | undefined, error: string | undefined, horizontal: boolean) {\n  return (state: RadioGroupRenderProps) => <>\n      <FieldLabel state={state} className=\"xkknnkr x14zspaw x1v9cpvo x155f00i x1lz68p4\">\n        {label}\n      </FieldLabel>\n      <div {...{\n      0: {\n        className: \"x78zum5 xdt5ytf\"\n      },\n      1: {\n        className: \"x78zum5 xpamuu5 x1q0g3np x1a02dak\"\n      }\n    }[!!horizontal << 0]}>\n        {children}\n      </div>\n      <FieldMessage description={description} error={error} inset={false} />\n    </>;\n}\n\n/**\n * One option of a `RadioGroup`, with its label and optionally a description\n * under it. It names the entry it stands for with `value`; the selection is\n * the group's. Rendered on its own, outside a group, it has no state to\n * belong to.\n *\n * The call site's `className` and `style` land on the option as a whole,\n * which is the element a layout positions.\n */\nfunction Radio({\n  children,\n  description,\n  ...props\n}: RadioProps) {\n  const ripple = useRipple<HTMLSpanElement>();\n  return <RadioField {...props} {...mergeStatefulStyles({\n    className: \"x7a106z x9f619 xpr5407 xrvj5dj x1pmbctz\"\n  }, props)}>\n      <RadioButton className=\"xjp7ctv\">\n        {buttonContent(children, ripple)}\n      </RadioButton>\n      <div className=\"x1xdureb\">\n        <FieldMessage description={description} inset={false} />\n      </div>\n    </RadioField>;\n}\n\n/**\n * A labelled set of radio buttons with one selected value between them. The\n * value is React Aria's: pass `value` with `onChange` to control it, or\n * `defaultValue` to let the group keep its own, and each `Radio` inside\n * names the entry it stands for. Arrow keys move the selection; disabled,\n * read-only and the error state reach every button from here, and\n * `orientation=\"horizontal\"` lays the buttons along a line.\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 RadioGroup({\n  children,\n  description,\n  error,\n  label,\n  orientation = 'vertical',\n  ...props\n}: RadioGroupProps) {\n  const validationBehavior = useFieldValidationBehavior();\n  return <RACRadioGroup isInvalid={invalidFrom(error)} orientation={orientation} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles({\n    className: \"x9f619 x78zum5 xdt5ytf xzoy561\"\n  }, props)}>\n      {groupContent(label, children, description, error, orientation === 'horizontal')}\n    </RACRadioGroup>;\n}\nexport type { RadioGroupProps, RadioProps };\nexport { Radio };\nexport default RadioGroup;"],"mappings":";;;;;;;;;;AAgCA,MAAMwB,SAAS;CACbC,SAAS;EACPC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;EACPC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;CACT;CACAC,iBAAiB;EACfV,QAAQ;EACRS,OAAO;CACT;CACAE,gBAAgB,EACdF,OAAO,KACT;CACAG,iBAAiB;EACfZ,QAAQ;EACRS,OAAO;CACT;CACAI,YAAY;EACVd,QAAQ;EACRU,OAAO;CACT;CACAK,cAAc;EACZf,QAAQ;EACRU,OAAO;CACT;CACAM,cAAc;EACZhB,QAAQ;EACRU,OAAO;CACT;AACF;AAOA,MAAMO,cAAc;CAClBC,UAAU;EACRtB,QAAQ;EACRc,OAAO;CACT;CACAS,YAAY;EACVvB,QAAQ;EACRc,OAAO;CACT;AACF;AACA,MAAMU,gBAAgB;CACpBF,UAAU;EACRtB,QAAQ;EACRc,OAAO;CACT;CACAS,YAAY;EACVvB,QAAQ;EACRc,OAAO;CACT;AACF;AAsCA,SAASoB,cAAcT,UAAqBU,QAAgB;CAC1D,QAAQC,UAAkC;EACxC,MAAMC,cAAc,CAACD,MAAME,cAAc,CAACF,MAAMG;EAChD,MAAMC,OAAOJ,MAAMK,aAAa,aAAa;EAC7C,MAAMC,SAASN,MAAMO,aAAaP,MAAMQ,aAAaR,MAAMS;EAC3D,OAAO,qBAAA,UAAA,EAAA,UAAA,CACH,qBAAC,QAAD;GAAM,GAAIR,cAAcF,OAAOW,WAAW,CAAC;GAAG,GAAInE,MAAakB,OAAOC,SAASsC,MAAMK,cAAc5C,OAAOuB,cAAc,CAACgB,MAAMK,cAAcJ,eAAeK,UAAU7C,OAAOqB,YAAYkB,MAAME,cAAczC,OAAOsB,cAAciB,MAAMG,cAAc1C,OAAOoB,iBAAiBmB,MAAME,cAAczC,OAAOkB,iBAAiBsB,eAAeD,MAAMO,aAAatB,YAAYmB,OAAOH,eAAeD,MAAMQ,aAAapB,cAAcgB,OAAOJ,MAAMS,kBAAkBhD,OAAOmB,gBAAgBoB,MAAMS,kBAAkBxD,MAAM2D,WAAW;GAA9f,UAAA,CACE,oBAAC,QAAD;IAAM,WAAU;IACbZ,UAAAA,MAAMK,aAAa,oBAAC,QAAD,EAAM,WAAU,oCAAmC,CAAA,IAAM;GACzE,CAAA,GACLJ,cAAcF,OAAOc,UAAU,IAC5B;EACLxB,CAAAA,GAAAA,aAAayB,KAAAA,IAAY,OAAO,oBAAC,QAAD;GAAM,GAAI;IAC3C,GAAG,EACDC,WAAW,gFACb;IACA,GAAG,EACDA,WAAW,+EACb;IACA,GAAG,EACDA,WAAW,gFACb;IACA,GAAG,EACDA,WAAW,gFACb;GACF,EAAE,CAAC,CAACf,MAAMG,cAAc,IAAI,CAAC,CAACH,MAAME,cAAc;GAC3Cb;EACG,CAAA,CACV,EAAA,CAAA;CACJ;AACF;AAIA,SAAS2B,aAAaxB,OAAeH,UAAqBC,aAAiCC,OAA2B0B,YAAqB;CACzI,QAAQjB,UAAiC,qBAAA,UAAA,EAAA,UAAA;EACrC,oBAAC,YAAD;GAAmBA;GAAO,WAAU;GACjCR,UAAAA;EACS,CAAA;EACZ,oBAAC,OAAD;GAAK,GAAI;IACT,GAAG,EACDuB,WAAW,kBACb;IACA,GAAG,EACDA,WAAW,oCACb;GACF,EAAE,CAAC,CAACE,cAAc;GACb5B;EACE,CAAA;EACL,oBAAC,cAAD;GAA2BC;GAAoBC;GAAO,OAAO;EAAM,CAAA;CACrE,EAAA,CAAA;AACJ;;;;;;;;;;AAWA,SAAA2B,MAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAe,MAAA,EAAAhC,UAAAC,aAAA,GAAAqB,UAAAQ;CAKb,MAAApB,SAAe/C,UAA2B;CAClC,MAAAsE,KAAA3E;CAA0B,MAAA4E,KAAArE,oBAAoB,EAAA6D,WACzC,0CACb,GAAGJ,KAAK;CAAC,IAAAa;CAAA,IAAAJ,EAAA,OAAA/B,YAAA+B,EAAA,OAAArB,QAAA;EAEFyB,KAAA1B,cAAcT,UAAUU,MAAM;EAACqB,EAAA,KAAA/B;EAAA+B,EAAA,KAAArB;EAAAqB,EAAA,KAAAI;CAAA,OAAAA,KAAAJ,EAAA;CAAA,IAAAK;CAAA,IAAAL,EAAA,OAAAI,IAAA;EADlCC,KAAA,oBAAC,aAAD;GAAuB,WAAA;GACpBD,UAAAA;EADS,CAAA;EAEEJ,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;CAAA,OAAAA,KAAAL,EAAA;CAAA,IAAAM;CAAA,IAAAN,EAAA,OAAA9B,aAAA;EACdoC,KAAA,oBAAA,OAAA;GAAe,WAAA;GACb,UAAA,oBAAC,cAAD;IAA2BpC;IAAoB,OAAA;GAAK,CAAA;EAChD,CAAA;EAAA8B,EAAA,KAAA9B;EAAA8B,EAAA,KAAAM;CAAA,OAAAA,KAAAN,EAAA;CAAA,IAAAO;CAAA,IAAAP,EAAA,OAAAE,MAAAF,EAAA,OAAAT,SAAAS,EAAA,OAAAG,MAAAH,EAAA,QAAAK,MAAAL,EAAA,QAAAM,IAAA;EARHC,KAAA,qBAAC,IAAD;GAAW,GAAKhB;GAAK,GAAMY;GAA3B,UAAA,CAGHE,IAGAC,EANc;;EASHN,EAAA,KAAAE;EAAAF,EAAA,KAAAT;EAAAS,EAAA,KAAAG;EAAAH,EAAA,MAAAK;EAAAL,EAAA,MAAAM;EAAAN,EAAA,MAAAO;CAAA,OAAAA,KAAAP,EAAA;CAAA,OATRO;AASQ;;;;;;;;;;;;AAcjB,SAAAnF,aAAA2E,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAoB,MAAA,EAAAhC,UAAAC,aAAAC,OAAAC,OAAAoC,aAAAL,IAAA,GAAAZ,UAAAQ;CAKlB,MAAAS,cAAAL,OAAAT,KAAAA,IAAA,aAAAS;CAGA,MAAAM,qBAA2B9E,2BAA2B;CAC9C,MAAAuE,KAAA7E;CAAa,IAAA+E;CAAA,IAAAJ,EAAA,OAAA7B,OAAA;EAAYiC,KAAA1E,YAAYyC,KAAK;EAAC6B,EAAA,KAAA7B;EAAA6B,EAAA,KAAAI;CAAA,OAAAA,KAAAJ,EAAA;CAAmF,MAAAK,KAAAvE,oBAAoB,EAAA6D,WAC7I,iCACb,GAAGJ,KAAK;CAC+C,MAAAe,KAAAE,gBAAgB;CAAY,IAAAD;CAAA,IAAAP,EAAA,OAAA/B,YAAA+B,EAAA,OAAA9B,eAAA8B,EAAA,OAAA7B,SAAA6B,EAAA,OAAA5B,SAAA4B,EAAA,OAAAM,IAAA;EAA9EC,KAAAX,aAAaxB,OAAOH,UAAUC,aAAaC,OAAOmC,EAA4B;EAACN,EAAA,KAAA/B;EAAA+B,EAAA,KAAA9B;EAAA8B,EAAA,KAAA7B;EAAA6B,EAAA,KAAA5B;EAAA4B,EAAA,KAAAM;EAAAN,EAAA,KAAAO;CAAA,OAAAA,KAAAP,EAAA;CAAA,IAAAU;CAAA,IAAAV,EAAA,OAAAE,MAAAF,EAAA,OAAAQ,eAAAR,EAAA,QAAAT,SAAAS,EAAA,QAAAI,MAAAJ,EAAA,QAAAK,MAAAL,EAAA,QAAAO,MAAAP,EAAA,QAAAS,oBAAA;EAH7EC,KAAA,oBAAC,IAAD;GAA0B,WAAAN;GAAiCI;GAAiCC;GAAkB,GAAMlB;GAAK,GAAMc;GAGjIE,UAAAA;EAHgB,CAAA;EAIHP,EAAA,KAAAE;EAAAF,EAAA,KAAAQ;EAAAR,EAAA,MAAAT;EAAAS,EAAA,MAAAI;EAAAJ,EAAA,MAAAK;EAAAL,EAAA,MAAAO;EAAAP,EAAA,MAAAS;EAAAT,EAAA,MAAAU;CAAA,OAAAA,KAAAV,EAAA;CAAA,OAJXU;AAIW"}
+{"version":3,"file":"index.js","names":["ReactNode","RadioGroupProps","RACRadioGroupProps","RadioButtonRenderProps","RadioFieldProps","RadioGroupRenderProps","stylex","RadioGroup","RACRadioGroup","RadioButton","RadioField","ControlLabel","controlStyles","FieldLabel","FieldMessage","invalidFrom","useFieldValidationBehavior","groupStyles","fieldGroupStyles","useRipple","focus","mergeStatefulStyles","colors","motion","radii","spacing","stateLayerOpacity","styles","control","kMwMTN","$$css","toneActive","toneDisabled","toneSelected","hoverLayers","selected","kWkggS","unselected","pressedLayers","children","description","error","label","Omit","RadioProps","Ripple","ReturnType","HTMLSpanElement","buttonContent","ripple","state","interactive","isDisabled","isReadOnly","tone","isSelected","active","isHovered","isPressed","isFocusVisible","handlers","props","disc","controlReadOnly","controlDisabled","ringVisible","surface","groupContent","horizontal","className","Radio","t0","$","_c","T0","t1","field","t2","t3","t4","Symbol","for","messages","t5","t6","orientation","undefined","validationBehavior","root"],"sources":["../../../src/components/radio-group/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { RadioGroupProps as RACRadioGroupProps, RadioButtonRenderProps, RadioFieldProps, RadioGroupRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { RadioGroup as RACRadioGroup, RadioButton, RadioField } from 'react-aria-components';\nimport { ControlLabel } from '../../control';\nimport { controlStyles } from '../../control/styles';\nimport { FieldLabel, FieldMessage } from '../../field';\nimport { invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { groupStyles as fieldGroupStyles } from '../../field/styles';\nimport { useRipple } from '../../hooks/useRipple';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, spacing, stateLayerOpacity } from '../../tokens/design.tokens.stylex';\n\n// The radio button page: a 20dp ring inside a 40dp state layer, with a 48dp\n// target. Unselected, the ring is 2dp of on surface variant that turns on\n// surface while hovered, pressed or focused; selected, the ring and the 10dp\n// dot inside it are primary. Disabled is on surface at the disabled opacity\n// for both. The state layer is on surface over an unselected button and\n// primary over a selected one while hovered, and the two swap once pressed.\n// The page draws no error state for the button itself: an invalid group\n// says so through its label and message, and the buttons keep their colours.\n//\n// Two components from one module, since neither means anything without the\n// other: a radio button is a member of a group, and the group is what holds\n// the value. React Aria's `RadioGroup` is the group, a div with the label,\n// description and error slots; `RadioField` is one button's root, a div with\n// its description slot; and `RadioButton` is the label around the visually\n// hidden input, whose children draw the button from the render state React\n// Aria hands them. The field is the same two-column grid Checkbox uses, with\n// the label `display: contents` so the description lines up under the text.\n//\n// The adjacent label is body-large on surface, which the page keeps the same\n// whether or not the button is selected.\nconst styles = {\n  control: {\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  },\n  toneActive: {\n    kMwMTN: \"x139gbkf\",\n    $$css: true\n  },\n  toneDisabled: {\n    kMwMTN: \"x1gpw424\",\n    $$css: true\n  },\n  toneSelected: {\n    kMwMTN: \"x1mxwv8y\",\n    $$css: true\n  }\n};\n\n// The state layer follows the button: on surface over an unselected one and\n// primary over a selected one while hovered, the two swapped once pressed.\nconst hoverLayers = {\n  selected: {\n    kWkggS: \"x659ado\",\n    $$css: true\n  },\n  unselected: {\n    kWkggS: \"x1b18xnh\",\n    $$css: true\n  }\n};\nconst pressedLayers = {\n  selected: {\n    kWkggS: \"xjeeohs\",\n    $$css: true\n  },\n  unselected: {\n    kWkggS: \"x1dvjsmr\",\n    $$css: true\n  }\n};\ntype RadioGroupProps = {\n  /** The radio buttons, 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 label's colour and\n   * `aria-invalid` on the group all follow from it.\n   */\n  error?: string;\n  /**\n   * What the group is for. Required rather than optional: a set of radio\n   * buttons with no name is a set a screen reader cannot introduce.\n   */\n  label: string;\n} & Omit<RACRadioGroupProps, 'children' | 'isInvalid' | 'validationBehavior'>;\ntype RadioProps = Omit<RadioFieldProps, 'children'> & {\n  /**\n   * The label, beside the button. A button that a row labels some other way\n   * leaves it out and passes `aria-label` instead.\n   */\n  children?: ReactNode;\n  /** A hint under the label, read with the button. */\n  description?: string;\n};\ntype Ripple = ReturnType<typeof useRipple<HTMLSpanElement>>;\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 button 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: RadioButtonRenderProps) => {\n    const interactive = !state.isDisabled && !state.isReadOnly;\n    const tone = state.isSelected ? 'selected' : 'unselected';\n    const active = state.isHovered || state.isPressed || state.isFocusVisible;\n    return <>\n        <span {...interactive ? ripple.handlers : {}} {...stylex.props(controlStyles.disc, styles.control, state.isSelected && styles.toneSelected, !state.isSelected && interactive && active && styles.toneActive, state.isDisabled && styles.toneDisabled, state.isReadOnly && controlStyles.controlReadOnly, state.isDisabled && controlStyles.controlDisabled, interactive && state.isHovered && hoverLayers[tone], interactive && state.isPressed && pressedLayers[tone], state.isFocusVisible && focus.ringVisible)}>\n          <span className=\"x6s0dn4 x1qx5ct2 x1r7ld26 x3y1ksm x1y0btm7 xdh2fpr x9f619 x78zum5 xw4jnvo xl56j7k x1qno0dh xshfolx xpc4ca7\">\n            {state.isSelected ? <span className=\"xtwfq29 x170jfvy x3y1ksm x1fsd2vl\" /> : null}\n          </span>\n          {interactive ? ripple.surface : null}\n        </span>\n        <ControlLabel state={state}>{children}</ControlLabel>\n      </>;\n  };\n}\n\n// The group's parts, from its render state: the label's colour follows\n// disabled and invalid the way a field's follows its box.\nfunction groupContent(label: string, children: ReactNode, description: string | undefined, error: string | undefined, horizontal: boolean) {\n  return (state: RadioGroupRenderProps) => <>\n      <FieldLabel state={state} variant=\"group\">\n        {label}\n      </FieldLabel>\n      <div {...{\n      0: {\n        className: \"x78zum5 xdt5ytf\"\n      },\n      1: {\n        className: \"x78zum5 xpamuu5 x1q0g3np x1a02dak\"\n      }\n    }[!!horizontal << 0]}>\n        {children}\n      </div>\n      <FieldMessage description={description} error={error} inset={false} />\n    </>;\n}\n\n/**\n * One option of a `RadioGroup`, with its label and optionally a description\n * under it. It names the entry it stands for with `value`; the selection is\n * the group's. Rendered on its own, outside a group, it has no state to\n * belong to.\n *\n * The call site's `className` and `style` land on the option as a whole,\n * which is the element a layout positions.\n */\nfunction Radio({\n  children,\n  description,\n  ...props\n}: RadioProps) {\n  const ripple = useRipple<HTMLSpanElement>();\n  return <RadioField {...props} {...mergeStatefulStyles(stylex.props(controlStyles.field), props)}>\n      <RadioButton className=\"xjp7ctv\">\n        {buttonContent(children, ripple)}\n      </RadioButton>\n      <div {...stylex.props(controlStyles.messages)}>\n        <FieldMessage description={description} inset={false} />\n      </div>\n    </RadioField>;\n}\n\n/**\n * A labelled set of radio buttons with one selected value between them. The\n * value is React Aria's: pass `value` with `onChange` to control it, or\n * `defaultValue` to let the group keep its own, and each `Radio` inside\n * names the entry it stands for. Arrow keys move the selection; disabled,\n * read-only and the error state reach every button from here, and\n * `orientation=\"horizontal\"` lays the buttons along a line.\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 RadioGroup({\n  children,\n  description,\n  error,\n  label,\n  orientation = 'vertical',\n  ...props\n}: RadioGroupProps) {\n  const validationBehavior = useFieldValidationBehavior();\n  return <RACRadioGroup isInvalid={invalidFrom(error)} orientation={orientation} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(fieldGroupStyles.root), props)}>\n      {groupContent(label, children, description, error, orientation === 'horizontal')}\n    </RACRadioGroup>;\n}\nexport type { RadioGroupProps, RadioProps };\nexport { Radio };\nexport default RadioGroup;"],"mappings":"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"}

package/dist/components/sheet/index.js

@@ -108,7 +108,7 @@ function SheetContent(t0) {
 	} else t2 = $[8];
 	let t3;
 	if ($[9] !== className || $[10] !== style) {
-		t3 = mergeStatefulStyles({ className: "x1n1nwrg xu2fq7p x18ihq2d x16dv9tl x1vnz5z6 xkducg2 xrzall9 xb0nsol x1a37zkv xys6ro8 x6xk272 x9t1vth x19efjv6 x9f619 x139gbkf x78zum5 xdt5ytf x1l2rt3b xwvxfow x1ey2m1c x13vifvy xmpip4z xtijo5x xhi6v0a x1upgybz x7ab17h x11ijow0 xb3r6kr xixxii4" }, {
+		t3 = mergeStatefulStyles({ className: "x1n1nwrg x1u6grsq xu2fq7p x18ihq2d x16dv9tl x1vnz5z6 xkducg2 xrzall9 xb0nsol x1a37zkv xys6ro8 x6xk272 x9t1vth x19efjv6 x9f619 x139gbkf x78zum5 xdt5ytf x1l2rt3b xwvxfow x1ey2m1c x13vifvy xmpip4z xtijo5x xhi6v0a x1upgybz x7ab17h x11ijow0 xb3r6kr xixxii4" }, {
 			className,
 			style
 		});

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["HTMLAttributes","ReactNode","ClassNameOrFunction","DialogProps","DialogTriggerProps","HeadingProps","ModalOverlayProps","ModalRenderProps","StyleOrFunction","stylex","Dialog","DialogTrigger","Heading","Modal","ModalOverlay","mergeStatefulStyles","mergeStyles","overlay","colors","media","motion","radii","shadows","spacing","typography","slideInFromEnd","slideInFromBottom","SheetProps","Omit","children","Sheet","t0","$","_c","props","t1","SheetBody","className","SheetContent","container","isKeyboardDismissDisabled","style","isDismissable","undefined","t2","Symbol","for","scrim","t3","t4","modalDialog","t5","t6","t7","SheetFooter","SheetHandle","SheetHeader","SheetTitle","Body","Content","Footer","Handle","Header","Title","SheetContentProps","Pick","Element","SheetTitleProps"],"sources":["../../../src/components/sheet/index.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\nimport type { ClassNameOrFunction, DialogProps, DialogTriggerProps, HeadingProps, ModalOverlayProps, ModalRenderProps, StyleOrFunction } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Dialog, DialogTrigger, Heading, Modal, ModalOverlay } from 'react-aria-components';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport { overlay } from '../../styles/overlay';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, media, motion, radii, shadows, spacing, typography } from '../../tokens/design.tokens.stylex';\n\n// One component, two presentations. Above the medium breakpoint it is a side\n// sheet pinned to the inline end of the viewport; below it, the same panel\n// becomes a bottom sheet. That is the pairing the Material Design pages draw\n// rather than two components: a sheet that stayed on the right at 375px would\n// be a drawer covering the whole screen.\n//\n// The two differ in five things and no more: which edges they are pinned to,\n// which two corners are rounded, which axis they arrive along, how much of\n// the viewport they may take, and the drag handle, which is the bottom\n// sheets page's element alone. Everything inside the panel — the 24 of start\n// and end padding, the 12 between the header's elements, the actions area —\n// comes from the side sheets page and is drawn the same in both.\nconst slideInFromEnd = \"x17cjob-B\";\nconst slideInFromBottom = \"x15b941j-B\";\n\n// Entry only, so there is no exit animation to wait for and closing is\n// immediate: React Aria keeps a closing panel mounted only while an animation\n// is running on it, and finds none. See the comment on `SheetContent` for why\n// that is a design call rather than a limit of StyleX.\n//\n// React Aria's overlay is three nested elements — the scrim, the panel, and\n// the dialog inside it — so the styles are split the same way: the overlay\n// module's scrim on the first, `content` on the panel, its modal dialog style\n// on the element that carries the role. The scrim and that dialog style are\n// shared with every modal overlay; the panel is the sheet's own, since which\n// edge it is pinned to is what makes it a sheet.\n\ntype SheetProps = Omit<DialogTriggerProps, 'children'> & {\n  children?: ReactNode;\n};\n\n/**\n * A modal panel that arrives from the edge of the screen — a side sheet on a\n * wide viewport, a bottom sheet on a narrow one. Open state is React Aria's:\n * pass `isOpen` with `onOpenChange` to control it, or `defaultOpen` to let it\n * keep its own.\n *\n * Composed rather than configured by props, because a sheet's header, body,\n * and footer all take arbitrary content — the parts are `Sheet.Content`,\n * `Sheet.Header`, `Sheet.Title`, `Sheet.Body`, and `Sheet.Footer`. A\n * `Button` or `IconButton` placed directly inside `Sheet` opens it, and one\n * given `slot=\"close\"` anywhere inside the content closes it; neither needs\n * a part of its own.\n */\nfunction Sheet({\n  children,\n  ...props\n}: SheetProps) {\n  return <DialogTrigger {...props}>{children}</DialogTrigger>;\n}\nfunction SheetBody(props: HTMLAttributes<HTMLDivElement>) {\n  return <div {...props} {...mergeStyles({\n    className: \"x9f619 x78zum5 xdt5ytf x1iyjqo2 xxj4525 x1odjw0f xp6hjv6 xg0ps1x\"\n  }, props)} />;\n}\n\n/**\n * The panel itself, and the scrim behind it. Everything the sheet shows goes\n * in here; the trigger stays outside it, since the trigger lives in the page\n * while this is portalled out to the end of the body.\n *\n * A press on the scrim closes the sheet unless `isDismissable` says\n * otherwise — React Aria's own default is the reverse, and a sheet that\n * ignores a tap outside it reads as stuck.\n */\nfunction SheetContent({\n  children,\n  className,\n  container,\n  isDismissable = true,\n  isKeyboardDismissDisabled,\n  style,\n  ...props\n}: SheetContentProps) {\n  return <ModalOverlay isDismissable={isDismissable} isKeyboardDismissDisabled={isKeyboardDismissDisabled}\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.scrim)}>\n      <Modal {...mergeStatefulStyles({\n      className: \"x1n1nwrg xu2fq7p x18ihq2d x16dv9tl x1vnz5z6 xkducg2 xrzall9 xb0nsol x1a37zkv xys6ro8 x6xk272 x9t1vth x19efjv6 x9f619 x139gbkf x78zum5 xdt5ytf x1l2rt3b xwvxfow x1ey2m1c x13vifvy xmpip4z xtijo5x xhi6v0a x1upgybz x7ab17h x11ijow0 xb3r6kr xixxii4\"\n    }, {\n      className,\n      style\n    })}>\n        <Dialog {...props} {...stylex.props(overlay.modalDialog)}>\n          {children}\n        </Dialog>\n      </Modal>\n    </ModalOverlay>;\n}\nfunction SheetFooter(props: HTMLAttributes<HTMLDivElement>) {\n  return <div {...props} {...mergeStyles({\n    className: \"x12smttz x13fuv20 x178xt8z x9f619 x78zum5 x2lah0s x126z3so x1nhvcw1 x1qafhyn x8i8c5o x1clyivc xg0ps1x\"\n  }, props)} />;\n}\n\n/**\n * The bottom sheets page's drag handle: a short bar above the sheet's\n * content, saying the panel is a bottom sheet. Place it first inside\n * `Sheet.Content`; above the medium breakpoint the panel is a side sheet and\n * this draws nothing.\n *\n * It is decoration rather than a control, and hidden from assistive\n * technology. Material's own handle drags a sheet between a collapsed and an\n * expanded height and dismisses it from the collapsed one; this panel has\n * one height and cannot be dragged, so a control that only looked draggable\n * would promise what it cannot do. Closing is already the scrim, Escape, and\n * any button given `slot=\"close\"`.\n */\nfunction SheetHandle(props: HTMLAttributes<HTMLDivElement>) {\n  return <div aria-hidden=\"true\" {...props} {...mergeStyles({\n    className: \"x6s0dn4 x9f619 x1s85apg x37i4ze x2lah0s xl56j7k x1xg6qyv\"\n  }, props)}>\n      <span className=\"x1ccu2yh xqu0tyb x3y1ksm x9f619 x1td3qas\" />\n    </div>;\n}\nfunction SheetHeader(props: HTMLAttributes<HTMLDivElement>) {\n  return <div {...props} {...mergeStyles({\n    className: \"x6s0dn4 x1j6faob x1q0q8m5 xso031l x9f619 x78zum5 x2lah0s x1gka490 x1qughib x1cmllll xg0ps1x\"\n  }, props)} />;\n}\n\n/**\n * Names the sheet. Rendered through React Aria's title slot, which is what\n * points the dialog's `aria-labelledby` at it — a sheet without one announces\n * itself as an unnamed dialog.\n */\nfunction SheetTitle(props: SheetTitleProps) {\n  return <Heading slot=\"title\" {...props} {...mergeStyles({\n    className: \"x9f619 x1w5n3ug xdy5w5q xete2z3 x14ijtet xug9e1u x2divse x1ghz6dp\"\n  }, props)} />;\n}\nSheet.Body = SheetBody;\nSheet.Content = SheetContent;\nSheet.Footer = SheetFooter;\nSheet.Handle = SheetHandle;\nSheet.Header = SheetHeader;\nSheet.Title = SheetTitle;\n\n// The dialog's own props, plus the scrim's dismissal settings and the panel's\n// styling. A call site has no reason to know there are three elements:\n// `className` and `style` reach the panel, which is the one worth restyling\n// and positioning, and everything else lands on the dialog.\ntype SheetContentProps = Omit<DialogProps, 'className' | 'style'> & Pick<ModalOverlayProps, 'isDismissable' | 'isKeyboardDismissDisabled'> & {\n  /** A function may compute the class from the panel's render state. */\n  className?: ClassNameOrFunction<ModalRenderProps>;\n  /**\n   * Where to portal the panel and scrim. Defaults to the end of `<body>`,\n   * which is right for an app that sets its StyleX theme on `:root`. An app\n   * that scopes the theme to a subtree has to point this at an element inside\n   * it, or the sheet renders outside the theme and falls back to the tokens'\n   * `prefers-color-scheme` default.\n   */\n  container?: Element;\n  /** A function may compute the style from the panel's render state. */\n  style?: StyleOrFunction<ModalRenderProps>;\n};\ntype SheetTitleProps = HeadingProps;\nexport type { SheetContentProps, SheetProps, SheetTitleProps };\nexport default Sheet;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["HTMLAttributes","ReactNode","ClassNameOrFunction","DialogProps","DialogTriggerProps","HeadingProps","ModalOverlayProps","ModalRenderProps","StyleOrFunction","stylex","Dialog","DialogTrigger","Heading","Modal","ModalOverlay","mergeStatefulStyles","mergeStyles","overlay","colors","media","motion","radii","shadows","spacing","typography","slideInFromEnd","slideInFromBottom","SheetProps","Omit","children","Sheet","t0","$","_c","props","t1","SheetBody","className","SheetContent","container","isKeyboardDismissDisabled","style","isDismissable","undefined","t2","Symbol","for","scrim","t3","t4","modalDialog","t5","t6","t7","SheetFooter","SheetHandle","SheetHeader","SheetTitle","Body","Content","Footer","Handle","Header","Title","SheetContentProps","Pick","Element","SheetTitleProps"],"sources":["../../../src/components/sheet/index.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\nimport type { ClassNameOrFunction, DialogProps, DialogTriggerProps, HeadingProps, ModalOverlayProps, ModalRenderProps, StyleOrFunction } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Dialog, DialogTrigger, Heading, Modal, ModalOverlay } from 'react-aria-components';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport { overlay } from '../../styles/overlay';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, media, motion, radii, shadows, spacing, typography } from '../../tokens/design.tokens.stylex';\n\n// One component, two presentations. Above the medium breakpoint it is a side\n// sheet pinned to the inline end of the viewport; below it, the same panel\n// becomes a bottom sheet. That is the pairing the Material Design pages draw\n// rather than two components: a sheet that stayed on the right at 375px would\n// be a drawer covering the whole screen.\n//\n// The two differ in five things and no more: which edges they are pinned to,\n// which two corners are rounded, which axis they arrive along, how much of\n// the viewport they may take, and the drag handle, which is the bottom\n// sheets page's element alone. Everything inside the panel — the 24 of start\n// and end padding, the 12 between the header's elements, the actions area —\n// comes from the side sheets page and is drawn the same in both.\nconst slideInFromEnd = \"x17cjob-B\";\nconst slideInFromBottom = \"x15b941j-B\";\n\n// Entry only, so there is no exit animation to wait for and closing is\n// immediate: React Aria keeps a closing panel mounted only while an animation\n// is running on it, and finds none. See the comment on `SheetContent` for why\n// that is a design call rather than a limit of StyleX.\n//\n// React Aria's overlay is three nested elements — the scrim, the panel, and\n// the dialog inside it — so the styles are split the same way: the overlay\n// module's scrim on the first, `content` on the panel, its modal dialog style\n// on the element that carries the role. The scrim and that dialog style are\n// shared with every modal overlay; the panel is the sheet's own, since which\n// edge it is pinned to is what makes it a sheet.\n\ntype SheetProps = Omit<DialogTriggerProps, 'children'> & {\n  children?: ReactNode;\n};\n\n/**\n * A modal panel that arrives from the edge of the screen — a side sheet on a\n * wide viewport, a bottom sheet on a narrow one. Open state is React Aria's:\n * pass `isOpen` with `onOpenChange` to control it, or `defaultOpen` to let it\n * keep its own.\n *\n * Composed rather than configured by props, because a sheet's header, body,\n * and footer all take arbitrary content — the parts are `Sheet.Content`,\n * `Sheet.Header`, `Sheet.Title`, `Sheet.Body`, and `Sheet.Footer`. A\n * `Button` or `IconButton` placed directly inside `Sheet` opens it, and one\n * given `slot=\"close\"` anywhere inside the content closes it; neither needs\n * a part of its own.\n */\nfunction Sheet({\n  children,\n  ...props\n}: SheetProps) {\n  return <DialogTrigger {...props}>{children}</DialogTrigger>;\n}\nfunction SheetBody(props: HTMLAttributes<HTMLDivElement>) {\n  return <div {...props} {...mergeStyles({\n    className: \"x9f619 x78zum5 xdt5ytf x1iyjqo2 xxj4525 x1odjw0f xp6hjv6 xg0ps1x\"\n  }, props)} />;\n}\n\n/**\n * The panel itself, and the scrim behind it. Everything the sheet shows goes\n * in here; the trigger stays outside it, since the trigger lives in the page\n * while this is portalled out to the end of the body.\n *\n * A press on the scrim closes the sheet unless `isDismissable` says\n * otherwise — React Aria's own default is the reverse, and a sheet that\n * ignores a tap outside it reads as stuck.\n */\nfunction SheetContent({\n  children,\n  className,\n  container,\n  isDismissable = true,\n  isKeyboardDismissDisabled,\n  style,\n  ...props\n}: SheetContentProps) {\n  return <ModalOverlay isDismissable={isDismissable} isKeyboardDismissDisabled={isKeyboardDismissDisabled}\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.scrim)}>\n      <Modal {...mergeStatefulStyles({\n      className: \"x1n1nwrg x1u6grsq xu2fq7p x18ihq2d x16dv9tl x1vnz5z6 xkducg2 xrzall9 xb0nsol x1a37zkv xys6ro8 x6xk272 x9t1vth x19efjv6 x9f619 x139gbkf x78zum5 xdt5ytf x1l2rt3b xwvxfow x1ey2m1c x13vifvy xmpip4z xtijo5x xhi6v0a x1upgybz x7ab17h x11ijow0 xb3r6kr xixxii4\"\n    }, {\n      className,\n      style\n    })}>\n        <Dialog {...props} {...stylex.props(overlay.modalDialog)}>\n          {children}\n        </Dialog>\n      </Modal>\n    </ModalOverlay>;\n}\nfunction SheetFooter(props: HTMLAttributes<HTMLDivElement>) {\n  return <div {...props} {...mergeStyles({\n    className: \"x12smttz x13fuv20 x178xt8z x9f619 x78zum5 x2lah0s x126z3so x1nhvcw1 x1qafhyn x8i8c5o x1clyivc xg0ps1x\"\n  }, props)} />;\n}\n\n/**\n * The bottom sheets page's drag handle: a short bar above the sheet's\n * content, saying the panel is a bottom sheet. Place it first inside\n * `Sheet.Content`; above the medium breakpoint the panel is a side sheet and\n * this draws nothing.\n *\n * It is decoration rather than a control, and hidden from assistive\n * technology. Material's own handle drags a sheet between a collapsed and an\n * expanded height and dismisses it from the collapsed one; this panel has\n * one height and cannot be dragged, so a control that only looked draggable\n * would promise what it cannot do. Closing is already the scrim, Escape, and\n * any button given `slot=\"close\"`.\n */\nfunction SheetHandle(props: HTMLAttributes<HTMLDivElement>) {\n  return <div aria-hidden=\"true\" {...props} {...mergeStyles({\n    className: \"x6s0dn4 x9f619 x1s85apg x37i4ze x2lah0s xl56j7k x1xg6qyv\"\n  }, props)}>\n      <span className=\"x1ccu2yh xqu0tyb x3y1ksm x9f619 x1td3qas\" />\n    </div>;\n}\nfunction SheetHeader(props: HTMLAttributes<HTMLDivElement>) {\n  return <div {...props} {...mergeStyles({\n    className: \"x6s0dn4 x1j6faob x1q0q8m5 xso031l x9f619 x78zum5 x2lah0s x1gka490 x1qughib x1cmllll xg0ps1x\"\n  }, props)} />;\n}\n\n/**\n * Names the sheet. Rendered through React Aria's title slot, which is what\n * points the dialog's `aria-labelledby` at it — a sheet without one announces\n * itself as an unnamed dialog.\n */\nfunction SheetTitle(props: SheetTitleProps) {\n  return <Heading slot=\"title\" {...props} {...mergeStyles({\n    className: \"x9f619 x1w5n3ug xdy5w5q xete2z3 x14ijtet xug9e1u x2divse x1ghz6dp\"\n  }, props)} />;\n}\nSheet.Body = SheetBody;\nSheet.Content = SheetContent;\nSheet.Footer = SheetFooter;\nSheet.Handle = SheetHandle;\nSheet.Header = SheetHeader;\nSheet.Title = SheetTitle;\n\n// The dialog's own props, plus the scrim's dismissal settings and the panel's\n// styling. A call site has no reason to know there are three elements:\n// `className` and `style` reach the panel, which is the one worth restyling\n// and positioning, and everything else lands on the dialog.\ntype SheetContentProps = Omit<DialogProps, 'className' | 'style'> & Pick<ModalOverlayProps, 'isDismissable' | 'isKeyboardDismissDisabled'> & {\n  /** A function may compute the class from the panel's render state. */\n  className?: ClassNameOrFunction<ModalRenderProps>;\n  /**\n   * Where to portal the panel and scrim. Defaults to the end of `<body>`,\n   * which is right for an app that sets its StyleX theme on `:root`. An app\n   * that scopes the theme to a subtree has to point this at an element inside\n   * it, or the sheet renders outside the theme and falls back to the tokens'\n   * `prefers-color-scheme` default.\n   */\n  container?: Element;\n  /** A function may compute the style from the panel's render state. */\n  style?: StyleOrFunction<ModalRenderProps>;\n};\ntype SheetTitleProps = HeadingProps;\nexport type { SheetContentProps, SheetProps, SheetTitleProps };\nexport default Sheet;"],"mappings":"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"}

package/dist/components/slider/index.js

@@ -1,6 +1,7 @@
 import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { mergeStatefulStyles } from "../../styles/merge.js";
 import { spacing } from "../../tokens/design.tokens.stylex.js";
+import { groupStyles } from "../../field/styles.js";
 import { FieldLabel } from "../../field/index.js";
 import { c } from "react/compiler-runtime";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -39,6 +40,16 @@ const styles = {
 		krdFHd: "xr9e8f9",
 		$$css: true
 	},
+	root: {
+		kzqmXN: "xh8yej3",
+		$$css: true
+	},
+	rootVertical: {
+		kGNEyG: "x1cy8zhl",
+		kZKoxP: "x1u5z0ei",
+		kzqmXN: "x14atkfc",
+		$$css: true
+	},
 	segment: {
 		kWkggS: "x15dekr4",
 		kZKoxP: "xlup9mm",
@@ -146,18 +157,15 @@ function Slider$1(t0) {
 	let thumbLabels;
 	let vertical;
 	if ($[0] !== t0) {
-		const { label: t4, orientation: t5, thumbLabels: t6, ...props } = t0;
+		const { label: t4, orientation: t5, thumbLabels: t6, ...props$1 } = t0;
 		label = t4;
 		thumbLabels = t6;
 		const orientation = t5 === void 0 ? "horizontal" : t5;
 		vertical = orientation === "vertical";
 		T0 = Slider;
 		t1 = orientation;
-		t2 = props;
-		t3 = mergeStatefulStyles({
-			0: { className: "x9f619 x78zum5 xdt5ytf xzoy561 xh8yej3" },
-			1: { className: "x9f619 x78zum5 xdt5ytf xzoy561 x1cy8zhl x1u5z0ei x14atkfc" }
-		}[!!vertical << 0], props);
+		t2 = props$1;
+		t3 = mergeStatefulStyles(props(groupStyles.root, styles.root, vertical && styles.rootVertical), props$1);
 		$[0] = t0;
 		$[1] = T0;
 		$[2] = label;
@@ -178,7 +186,7 @@ function Slider$1(t0) {
 	let t4;
 	if ($[8] !== label) {
 		t4 = label === void 0 ? null : /* @__PURE__ */ jsx(FieldLabel, {
-			className: "xkknnkr x14zspaw x1v9cpvo x155f00i x1lz68p4",
+			variant: "group",
 			children: label
 		});
 		$[8] = label;

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["SliderProps","RACSliderProps","SliderThumbRenderProps","SliderTrackRenderProps","stylex","Slider","RACSlider","SliderOutput","SliderThumb","SliderTrack","FieldLabel","mergeStatefulStyles","colors","motion","radii","spacing","stateLayerOpacity","typography","styles","active","kWkggS","$$css","activeDisabled","inactiveDisabled","innerBlockEnd","kT0f0o","kVL7Gh","innerBlockStart","kfmiAY","krdFHd","innerInlineEnd","innerInlineStart","segment","kZKoxP","kaIpWk","kB7OPa","k87sOh","kVAEAm","segmentVertical","kzqmXN","kLqNvP","thumb","kkrTdU","kjBf7l","kInvED","k3XXqK","kMeerF","kIyJzY","k1ekBW","kAMwcw","thumbActive","thumbActiveVertical","thumbDisabled","thumbDragging","thumbFocused","thumbVertical","_temp","krVfgx","placements","block","start","end","val","undefined","inline","kt4wiu","Omit","label","orientation","thumbLabels","clearOf","percent","fromEnd","along","sm","t0","$","_c","T0","t1","t2","t3","vertical","t4","t5","t6","props","0","className","1","state","2","3","isDisabled","trackContent","t7","t8","thumbContent","index","isDragging","isFocusVisible","getThumbValueLabel","thumbStyles","percents","values","map","_","getThumbPercent","first","last","at","range","length","place","innerStart","innerEnd"],"sources":["../../../src/components/slider/index.tsx"],"sourcesContent":["import type { SliderProps as RACSliderProps, SliderThumbRenderProps, SliderTrackRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Slider as RACSlider, SliderOutput, SliderThumb, SliderTrack } from 'react-aria-components';\nimport { FieldLabel } from '../../field';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\n\n// The sliders page, at the size its tokens call extra-small: a 16dp track\n// with an 8dp corner, the active part in primary and the inactive part in\n// secondary container, a 4dp stop in on secondary container 6dp from the\n// inactive end, and a handle 4dp wide and 44dp tall in primary that narrows\n// to 2dp while pressed or focused. The track parts on each side of the\n// handle, with 6dp of space between them and it, and their corners\n// against the handle are 2dp where their outer ends are full. Disabled, the\n// active part and the handle are on surface at the disabled content opacity\n// and the inactive part at the disabled container opacity.\n//\n// The value indicator is the page's label: inverse surface under label-large\n// in inverse on surface, 44dp tall and at least 48dp wide, 12dp above the\n// handle. It shows while the handle is dragged or has keyboard focus, and it\n// is React Aria's `SliderOutput`, so what it shows is what the slider\n// announces.\n//\n// React Aria's `Slider` is the root, `SliderTrack` the strip the handles are\n// placed along by percent, and `SliderThumb` each handle around a visually\n// hidden range input. The track's parts are drawn here from those percents\n// rather than with `SliderFill`, since the page's parts stop short of the\n// handle on both sides and the fill runs up to it. A range slider is the\n// same track with two handles and the active part between them.\n//\n// Vertical, the same parts run along the block axis, with the active part\n// rising from the bottom and the indicator to the start side of the handle.\nconst styles = {\n  active: {\n    kWkggS: \"xnety89\",\n    $$css: true\n  },\n  activeDisabled: {\n    kWkggS: \"x1crcgwy\",\n    $$css: true\n  },\n  inactiveDisabled: {\n    kWkggS: \"x19v6zzp\",\n    $$css: true\n  },\n  innerBlockEnd: {\n    kT0f0o: \"x1ui04y5\",\n    kVL7Gh: \"x6en5u8\",\n    $$css: true\n  },\n  innerBlockStart: {\n    kfmiAY: \"x1e4oeot\",\n    krdFHd: \"xr9e8f9\",\n    $$css: true\n  },\n  innerInlineEnd: {\n    kT0f0o: \"x1ui04y5\",\n    kfmiAY: \"x1e4oeot\",\n    $$css: true\n  },\n  innerInlineStart: {\n    kVL7Gh: \"x6en5u8\",\n    krdFHd: \"xr9e8f9\",\n    $$css: true\n  },\n  segment: {\n    kWkggS: \"x15dekr4\",\n    kZKoxP: \"xlup9mm\",\n    kaIpWk: \"x1xdvaa9\",\n    kB7OPa: \"x9f619\",\n    k87sOh: \"xuivejd\",\n    kVAEAm: \"x10l6tqk\",\n    $$css: true\n  },\n  segmentVertical: {\n    kZKoxP: \"xt7dq6l\",\n    kzqmXN: \"x1kky2od\",\n    k87sOh: \"x80663w\",\n    kLqNvP: \"x9p6ekw\",\n    $$css: true\n  },\n  thumb: {\n    kWkggS: \"xnety89\",\n    kZKoxP: \"xn3w4p2\",\n    kaIpWk: \"x3y1ksm\",\n    kB7OPa: \"x9f619\",\n    kkrTdU: \"x1jm3nie\",\n    kzqmXN: \"x51ohtg\",\n    k87sOh: \"xwa60dl\",\n    kjBf7l: \"xrgy624\",\n    kInvED: \"x1hl8ikr\",\n    k3XXqK: \"x1t137rt\",\n    kMeerF: \"x1de99jn\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"xdl150w\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  thumbActive: {\n    kzqmXN: \"xfo62xy\",\n    $$css: true\n  },\n  thumbActiveVertical: {\n    kZKoxP: \"x36qwtl\",\n    kzqmXN: \"x187nhsf\",\n    $$css: true\n  },\n  thumbDisabled: {\n    kWkggS: \"x1crcgwy\",\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  thumbDragging: {\n    kkrTdU: \"xi9pz9s\",\n    $$css: true\n  },\n  thumbFocused: {\n    k3XXqK: \"xaatb59\",\n    $$css: true\n  },\n  thumbVertical: {\n    kZKoxP: \"xqu0tyb\",\n    kzqmXN: \"x187nhsf\",\n    k87sOh: \"x80663w\",\n    kLqNvP: \"xbudbmw\",\n    $$css: true\n  }\n};\n\n// Where each part of the track starts and ends, as insets from the track's\n// two ends: a percent of the way along, plus the 6dp of space and half the\n// handle's 4dp that keep it clear of the handle. Dynamic styles, since the\n// percents come from the value at render time and StyleX compiles its\n// classes ahead of time; each writes its insets to custom properties inline.\nconst _temp = {\n  krVfgx: \"xiicpxy\",\n  k87sOh: \"x5mnzd7\",\n  \"$$css\": true\n};\nconst placements = {\n  block: (start: string, end: string) => [_temp, {\n    \"--x-insetBlockEnd\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(start),\n    \"--x-insetBlockStart\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(end)\n  }],\n  inline: (start: string, end: string) => [{\n    kt4wiu: end != null ? \"xqxgn94\" : end,\n    kLqNvP: start != null ? \"x1lxsm33\" : start,\n    $$css: true\n  }, {\n    \"--x-insetInlineEnd\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(end),\n    \"--x-insetInlineStart\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(start)\n  }]\n};\ntype SliderProps = Omit<RACSliderProps, 'children' | 'orientation'> & {\n  /**\n   * What the slider sets. A slider that a row labels some other way leaves\n   * it out and passes `aria-label` instead.\n   */\n  label?: string;\n  /**\n   * Along which axis the handle moves. A vertical slider is 240px tall until\n   * `style` on the root says otherwise.\n   * @default 'horizontal'\n   */\n  orientation?: 'horizontal' | 'vertical';\n  /**\n   * A name for each handle of a range slider, in order, since two handles\n   * named by the same label cannot be told apart.\n   */\n  thumbLabels?: string[];\n};\n\n// The inset of a part's end from the track's end, clear of the handle at\n// `percent` of the way along. `spacing.sm` is the 6dp of space plus half the\n// handle's 4dp, which is what the page measures between the two.\nfunction clearOf(percent: number, fromEnd: boolean) {\n  const along = fromEnd ? 100 - percent : percent;\n  return `calc(${along}% + ${spacing.sm})`;\n}\n\n/**\n * A slider for one value, or for a range when the value is a pair. The value\n * is React Aria's: pass `value` with `onChange` to control it, or\n * `defaultValue` to let it keep its own, with `minValue`, `maxValue` and\n * `step` to shape it and `formatOptions` to say how it reads. Arrow keys\n * move a handle by a step, Page Up and Page Down by ten, Home and End to\n * the ends.\n *\n * The call site's `className` and `style` land on the slider as a whole,\n * which is the element a layout positions and the one that gives a vertical\n * slider its height.\n */\nfunction Slider({\n  label,\n  orientation = 'horizontal',\n  thumbLabels,\n  ...props\n}: SliderProps) {\n  const vertical = orientation === 'vertical';\n  return <RACSlider orientation={orientation} {...props} {...mergeStatefulStyles({\n    0: {\n      className: \"x9f619 x78zum5 xdt5ytf xzoy561 xh8yej3\"\n    },\n    1: {\n      className: \"x9f619 x78zum5 xdt5ytf xzoy561 x1cy8zhl x1u5z0ei x14atkfc\"\n    }\n  }[!!vertical << 0], props)}>\n      {label === undefined ? null : <FieldLabel className=\"xkknnkr x14zspaw x1v9cpvo x155f00i x1lz68p4\">{label}</FieldLabel>}\n      <SliderTrack {...mergeStatefulStyles((state: SliderTrackRenderProps) => ({\n      0: {\n        className: \"xn3w4p2 x9f619 x1ypdohk xh8yej3 x1n2onr6\"\n      },\n      2: {\n        className: \"x9f619 x1ypdohk x1n2onr6 x5yr21d x1iyjqo2 x187nhsf x2lwn1j\"\n      },\n      1: {\n        className: \"xn3w4p2 x9f619 xh8yej3 x1n2onr6 x1h6gzvc\"\n      },\n      3: {\n        className: \"x9f619 x1n2onr6 x5yr21d x1iyjqo2 x187nhsf x2lwn1j x1h6gzvc\"\n      }\n    })[!!vertical << 1 | !!state.isDisabled << 0], {})}>\n        {trackContent(vertical, thumbLabels)}\n      </SliderTrack>\n    </RACSlider>;\n}\n\n// What a handle draws: its value while it is dragged or has keyboard focus.\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.\nfunction thumbContent(index: number, vertical: boolean) {\n  return (state: SliderThumbRenderProps) => state.isDragging || state.isFocusVisible ? <SliderOutput {...{\n    0: {\n      className: \"x6s0dn4 x1c5gpgi xn3w4p2 x3y1ksm x9f619 x1girmi0 x78zum5 xkknnkr x14zspaw x1v9cpvo x3mk9i xbudbmw xl56j7k x155f00i x1lz68p4 x900493 x18fpw6u x10l6tqk xuuh30 xuxw1ft\"\n    },\n    1: {\n      className: \"x6s0dn4 x1c5gpgi xn3w4p2 x3y1ksm x9f619 x1girmi0 x78zum5 xkknnkr x14zspaw x1v9cpvo xl56j7k x155f00i x1lz68p4 x900493 x18fpw6u x10l6tqk xuxw1ft xdd4er5 xwa60dl x15zsqls xhi6v0a x1cb1t30\"\n    }\n  }[!!vertical << 0]}>\n        {state.state.getThumbValueLabel(index)}\n      </SliderOutput> : null;\n}\nfunction thumbStyles(vertical: boolean) {\n  return (state: SliderThumbRenderProps) => stylex.props(styles.thumb, vertical && styles.thumbVertical, (state.isDragging || state.isFocusVisible) && (vertical ? styles.thumbActiveVertical : styles.thumbActive), state.isDragging && styles.thumbDragging, state.isFocusVisible && styles.thumbFocused, state.isDisabled && styles.thumbDisabled);\n}\n\n// The track's parts and handles, from the slider's state: an inactive part\n// before the first handle of a range, the active part up to or between the\n// handles, and the inactive part after the last one carrying the stop.\nfunction trackContent(vertical: boolean, thumbLabels: string[] | undefined) {\n  return ({\n    isDisabled,\n    state\n  }: SliderTrackRenderProps) => {\n    const percents = state.values.map((_, index) => state.getThumbPercent(index) * 100);\n    const first = percents[0] ?? 0;\n    const last = percents.at(-1) ?? 0;\n    const range = percents.length > 1;\n    const place = vertical ? placements.block : placements.inline;\n    const innerStart = vertical ? styles.innerBlockStart : styles.innerInlineStart;\n    const innerEnd = vertical ? styles.innerBlockEnd : styles.innerInlineEnd;\n    return <>\n        {range ? <span {...stylex.props(styles.segment, vertical && styles.segmentVertical, isDisabled && styles.inactiveDisabled, innerEnd, place('0px', clearOf(first, true)))} /> : null}\n        <span {...stylex.props(styles.segment, vertical && styles.segmentVertical, styles.active, isDisabled && styles.activeDisabled, range && innerStart, innerEnd, place(range ? clearOf(first, false) : '0px', clearOf(last, true)))} />\n        <span {...stylex.props(styles.segment, vertical && styles.segmentVertical, isDisabled && styles.inactiveDisabled, innerStart, place(clearOf(last, false), '0px'))}>\n          <span {...{\n          0: {\n            className: \"x81krv7 xqu0tyb x3y1ksm x51ohtg x1atx4j1 x1f889gz x10l6tqk\"\n          },\n          2: {\n            className: \"x81krv7 xqu0tyb x3y1ksm x51ohtg x10l6tqk x1atx4j1 x1woyocn xrr41r3\"\n          },\n          1: {\n            className: \"xqu0tyb x3y1ksm x51ohtg x1atx4j1 x1f889gz x10l6tqk x1crcgwy\"\n          },\n          3: {\n            className: \"xqu0tyb x3y1ksm x51ohtg x10l6tqk x1atx4j1 x1woyocn xrr41r3 x1crcgwy\"\n          }\n        }[!!vertical << 1 | !!isDisabled << 0]} />\n        </span>\n        {percents.map((_, index) => <SliderThumb aria-label={thumbLabels?.[index]} index={index}\n      // oxlint-disable-next-line react/no-array-index-key -- a handle's position is its identity\n      key={index} {...mergeStatefulStyles(thumbStyles(vertical), {})}>\n            {thumbContent(index, vertical)}\n          </SliderThumb>)}\n      </>;\n  };\n}\nexport type { SliderProps };\nexport default Slider;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["SliderProps","RACSliderProps","SliderThumbRenderProps","SliderTrackRenderProps","stylex","Slider","RACSlider","SliderOutput","SliderThumb","SliderTrack","FieldLabel","groupStyles","mergeStatefulStyles","colors","motion","radii","spacing","stateLayerOpacity","typography","styles","active","kWkggS","$$css","activeDisabled","inactiveDisabled","innerBlockEnd","kT0f0o","kVL7Gh","innerBlockStart","kfmiAY","krdFHd","innerInlineEnd","innerInlineStart","root","kzqmXN","rootVertical","kGNEyG","kZKoxP","segment","kaIpWk","kB7OPa","k87sOh","kVAEAm","segmentVertical","kLqNvP","thumb","kkrTdU","kjBf7l","kInvED","k3XXqK","kMeerF","kIyJzY","k1ekBW","kAMwcw","thumbActive","thumbActiveVertical","thumbDisabled","thumbDragging","thumbFocused","thumbVertical","_temp","krVfgx","placements","block","start","end","val","undefined","inline","kt4wiu","Omit","label","orientation","thumbLabels","clearOf","percent","fromEnd","along","sm","t0","$","_c","T0","t1","t2","t3","vertical","t4","t5","t6","props","state","0","className","2","1","3","isDisabled","trackContent","t7","t8","thumbContent","index","isDragging","isFocusVisible","getThumbValueLabel","thumbStyles","percents","values","map","_","getThumbPercent","first","last","at","range","length","place","innerStart","innerEnd"],"sources":["../../../src/components/slider/index.tsx"],"sourcesContent":["import type { SliderProps as RACSliderProps, SliderThumbRenderProps, SliderTrackRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Slider as RACSlider, SliderOutput, SliderThumb, SliderTrack } from 'react-aria-components';\nimport { FieldLabel } from '../../field';\nimport { groupStyles } from '../../field/styles';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\n\n// The sliders page, at the size its tokens call extra-small: a 16dp track\n// with an 8dp corner, the active part in primary and the inactive part in\n// secondary container, a 4dp stop in on secondary container 6dp from the\n// inactive end, and a handle 4dp wide and 44dp tall in primary that narrows\n// to 2dp while pressed or focused. The track parts on each side of the\n// handle, with 6dp of space between them and it, and their corners\n// against the handle are 2dp where their outer ends are full. Disabled, the\n// active part and the handle are on surface at the disabled content opacity\n// and the inactive part at the disabled container opacity.\n//\n// The value indicator is the page's label: inverse surface under label-large\n// in inverse on surface, 44dp tall and at least 48dp wide, 12dp above the\n// handle. It shows while the handle is dragged or has keyboard focus, and it\n// is React Aria's `SliderOutput`, so what it shows is what the slider\n// announces.\n//\n// React Aria's `Slider` is the root, `SliderTrack` the strip the handles are\n// placed along by percent, and `SliderThumb` each handle around a visually\n// hidden range input. The track's parts are drawn here from those percents\n// rather than with `SliderFill`, since the page's parts stop short of the\n// handle on both sides and the fill runs up to it. A range slider is the\n// same track with two handles and the active part between them.\n//\n// Vertical, the same parts run along the block axis, with the active part\n// rising from the bottom and the indicator to the start side of the handle.\nconst styles = {\n  active: {\n    kWkggS: \"xnety89\",\n    $$css: true\n  },\n  activeDisabled: {\n    kWkggS: \"x1crcgwy\",\n    $$css: true\n  },\n  inactiveDisabled: {\n    kWkggS: \"x19v6zzp\",\n    $$css: true\n  },\n  innerBlockEnd: {\n    kT0f0o: \"x1ui04y5\",\n    kVL7Gh: \"x6en5u8\",\n    $$css: true\n  },\n  innerBlockStart: {\n    kfmiAY: \"x1e4oeot\",\n    krdFHd: \"xr9e8f9\",\n    $$css: true\n  },\n  innerInlineEnd: {\n    kT0f0o: \"x1ui04y5\",\n    kfmiAY: \"x1e4oeot\",\n    $$css: true\n  },\n  innerInlineStart: {\n    kVL7Gh: \"x6en5u8\",\n    krdFHd: \"xr9e8f9\",\n    $$css: true\n  },\n  root: {\n    kzqmXN: \"xh8yej3\",\n    $$css: true\n  },\n  rootVertical: {\n    kGNEyG: \"x1cy8zhl\",\n    kZKoxP: \"x1u5z0ei\",\n    kzqmXN: \"x14atkfc\",\n    $$css: true\n  },\n  segment: {\n    kWkggS: \"x15dekr4\",\n    kZKoxP: \"xlup9mm\",\n    kaIpWk: \"x1xdvaa9\",\n    kB7OPa: \"x9f619\",\n    k87sOh: \"xuivejd\",\n    kVAEAm: \"x10l6tqk\",\n    $$css: true\n  },\n  segmentVertical: {\n    kZKoxP: \"xt7dq6l\",\n    kzqmXN: \"x1kky2od\",\n    k87sOh: \"x80663w\",\n    kLqNvP: \"x9p6ekw\",\n    $$css: true\n  },\n  thumb: {\n    kWkggS: \"xnety89\",\n    kZKoxP: \"xn3w4p2\",\n    kaIpWk: \"x3y1ksm\",\n    kB7OPa: \"x9f619\",\n    kkrTdU: \"x1jm3nie\",\n    kzqmXN: \"x51ohtg\",\n    k87sOh: \"xwa60dl\",\n    kjBf7l: \"xrgy624\",\n    kInvED: \"x1hl8ikr\",\n    k3XXqK: \"x1t137rt\",\n    kMeerF: \"x1de99jn\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"xdl150w\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  thumbActive: {\n    kzqmXN: \"xfo62xy\",\n    $$css: true\n  },\n  thumbActiveVertical: {\n    kZKoxP: \"x36qwtl\",\n    kzqmXN: \"x187nhsf\",\n    $$css: true\n  },\n  thumbDisabled: {\n    kWkggS: \"x1crcgwy\",\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  thumbDragging: {\n    kkrTdU: \"xi9pz9s\",\n    $$css: true\n  },\n  thumbFocused: {\n    k3XXqK: \"xaatb59\",\n    $$css: true\n  },\n  thumbVertical: {\n    kZKoxP: \"xqu0tyb\",\n    kzqmXN: \"x187nhsf\",\n    k87sOh: \"x80663w\",\n    kLqNvP: \"xbudbmw\",\n    $$css: true\n  }\n};\n\n// Where each part of the track starts and ends, as insets from the track's\n// two ends: a percent of the way along, plus the 6dp of space and half the\n// handle's 4dp that keep it clear of the handle. Dynamic styles, since the\n// percents come from the value at render time and StyleX compiles its\n// classes ahead of time; each writes its insets to custom properties inline.\nconst _temp = {\n  krVfgx: \"xiicpxy\",\n  k87sOh: \"x5mnzd7\",\n  \"$$css\": true\n};\nconst placements = {\n  block: (start: string, end: string) => [_temp, {\n    \"--x-insetBlockEnd\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(start),\n    \"--x-insetBlockStart\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(end)\n  }],\n  inline: (start: string, end: string) => [{\n    kt4wiu: end != null ? \"xqxgn94\" : end,\n    kLqNvP: start != null ? \"x1lxsm33\" : start,\n    $$css: true\n  }, {\n    \"--x-insetInlineEnd\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(end),\n    \"--x-insetInlineStart\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(start)\n  }]\n};\ntype SliderProps = Omit<RACSliderProps, 'children' | 'orientation'> & {\n  /**\n   * What the slider sets. A slider that a row labels some other way leaves\n   * it out and passes `aria-label` instead.\n   */\n  label?: string;\n  /**\n   * Along which axis the handle moves. A vertical slider is 240px tall until\n   * `style` on the root says otherwise.\n   * @default 'horizontal'\n   */\n  orientation?: 'horizontal' | 'vertical';\n  /**\n   * A name for each handle of a range slider, in order, since two handles\n   * named by the same label cannot be told apart.\n   */\n  thumbLabels?: string[];\n};\n\n// The inset of a part's end from the track's end, clear of the handle at\n// `percent` of the way along. `spacing.sm` is the 6dp of space plus half the\n// handle's 4dp, which is what the page measures between the two.\nfunction clearOf(percent: number, fromEnd: boolean) {\n  const along = fromEnd ? 100 - percent : percent;\n  return `calc(${along}% + ${spacing.sm})`;\n}\n\n/**\n * A slider for one value, or for a range when the value is a pair. The value\n * is React Aria's: pass `value` with `onChange` to control it, or\n * `defaultValue` to let it keep its own, with `minValue`, `maxValue` and\n * `step` to shape it and `formatOptions` to say how it reads. Arrow keys\n * move a handle by a step, Page Up and Page Down by ten, Home and End to\n * the ends.\n *\n * The call site's `className` and `style` land on the slider as a whole,\n * which is the element a layout positions and the one that gives a vertical\n * slider its height.\n */\nfunction Slider({\n  label,\n  orientation = 'horizontal',\n  thumbLabels,\n  ...props\n}: SliderProps) {\n  const vertical = orientation === 'vertical';\n  return <RACSlider orientation={orientation} {...props} {...mergeStatefulStyles(stylex.props(groupStyles.root, styles.root, vertical && styles.rootVertical), props)}>\n      {label === undefined ? null : <FieldLabel variant=\"group\">{label}</FieldLabel>}\n      <SliderTrack {...mergeStatefulStyles((state: SliderTrackRenderProps) => ({\n      0: {\n        className: \"xn3w4p2 x9f619 x1ypdohk xh8yej3 x1n2onr6\"\n      },\n      2: {\n        className: \"x9f619 x1ypdohk x1n2onr6 x5yr21d x1iyjqo2 x187nhsf x2lwn1j\"\n      },\n      1: {\n        className: \"xn3w4p2 x9f619 xh8yej3 x1n2onr6 x1h6gzvc\"\n      },\n      3: {\n        className: \"x9f619 x1n2onr6 x5yr21d x1iyjqo2 x187nhsf x2lwn1j x1h6gzvc\"\n      }\n    })[!!vertical << 1 | !!state.isDisabled << 0], {})}>\n        {trackContent(vertical, thumbLabels)}\n      </SliderTrack>\n    </RACSlider>;\n}\n\n// What a handle draws: its value while it is dragged or has keyboard focus.\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.\nfunction thumbContent(index: number, vertical: boolean) {\n  return (state: SliderThumbRenderProps) => state.isDragging || state.isFocusVisible ? <SliderOutput {...{\n    0: {\n      className: \"x6s0dn4 x1c5gpgi xn3w4p2 x3y1ksm x9f619 x1girmi0 x78zum5 xkknnkr x14zspaw x1v9cpvo x3mk9i xbudbmw xl56j7k x155f00i x1lz68p4 x900493 x18fpw6u x10l6tqk xuuh30 xuxw1ft\"\n    },\n    1: {\n      className: \"x6s0dn4 x1c5gpgi xn3w4p2 x3y1ksm x9f619 x1girmi0 x78zum5 xkknnkr x14zspaw x1v9cpvo xl56j7k x155f00i x1lz68p4 x900493 x18fpw6u x10l6tqk xuxw1ft xdd4er5 xwa60dl x15zsqls xhi6v0a x1cb1t30\"\n    }\n  }[!!vertical << 0]}>\n        {state.state.getThumbValueLabel(index)}\n      </SliderOutput> : null;\n}\nfunction thumbStyles(vertical: boolean) {\n  return (state: SliderThumbRenderProps) => stylex.props(styles.thumb, vertical && styles.thumbVertical, (state.isDragging || state.isFocusVisible) && (vertical ? styles.thumbActiveVertical : styles.thumbActive), state.isDragging && styles.thumbDragging, state.isFocusVisible && styles.thumbFocused, state.isDisabled && styles.thumbDisabled);\n}\n\n// The track's parts and handles, from the slider's state: an inactive part\n// before the first handle of a range, the active part up to or between the\n// handles, and the inactive part after the last one carrying the stop.\nfunction trackContent(vertical: boolean, thumbLabels: string[] | undefined) {\n  return ({\n    isDisabled,\n    state\n  }: SliderTrackRenderProps) => {\n    const percents = state.values.map((_, index) => state.getThumbPercent(index) * 100);\n    const first = percents[0] ?? 0;\n    const last = percents.at(-1) ?? 0;\n    const range = percents.length > 1;\n    const place = vertical ? placements.block : placements.inline;\n    const innerStart = vertical ? styles.innerBlockStart : styles.innerInlineStart;\n    const innerEnd = vertical ? styles.innerBlockEnd : styles.innerInlineEnd;\n    return <>\n        {range ? <span {...stylex.props(styles.segment, vertical && styles.segmentVertical, isDisabled && styles.inactiveDisabled, innerEnd, place('0px', clearOf(first, true)))} /> : null}\n        <span {...stylex.props(styles.segment, vertical && styles.segmentVertical, styles.active, isDisabled && styles.activeDisabled, range && innerStart, innerEnd, place(range ? clearOf(first, false) : '0px', clearOf(last, true)))} />\n        <span {...stylex.props(styles.segment, vertical && styles.segmentVertical, isDisabled && styles.inactiveDisabled, innerStart, place(clearOf(last, false), '0px'))}>\n          <span {...{\n          0: {\n            className: \"x81krv7 xqu0tyb x3y1ksm x51ohtg x1atx4j1 x1f889gz x10l6tqk\"\n          },\n          2: {\n            className: \"x81krv7 xqu0tyb x3y1ksm x51ohtg x10l6tqk x1atx4j1 x1woyocn xrr41r3\"\n          },\n          1: {\n            className: \"xqu0tyb x3y1ksm x51ohtg x1atx4j1 x1f889gz x10l6tqk x1crcgwy\"\n          },\n          3: {\n            className: \"xqu0tyb x3y1ksm x51ohtg x10l6tqk x1atx4j1 x1woyocn xrr41r3 x1crcgwy\"\n          }\n        }[!!vertical << 1 | !!isDisabled << 0]} />\n        </span>\n        {percents.map((_, index) => <SliderThumb aria-label={thumbLabels?.[index]} index={index}\n      // oxlint-disable-next-line react/no-array-index-key -- a handle's position is its identity\n      key={index} {...mergeStatefulStyles(thumbStyles(vertical), {})}>\n            {thumbContent(index, vertical)}\n          </SliderThumb>)}\n      </>;\n  };\n}\nexport type { SliderProps };\nexport default Slider;"],"mappings":"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"}

package/dist/components/snackbar/index.js

@@ -291,7 +291,7 @@ function SnackbarToast(t0) {
 	if ($[6] !== t1 || $[7] !== t2 || $[8] !== toast) {
 		t3 = /* @__PURE__ */ jsxs(UNSTABLE_Toast, {
 			toast,
-			className: "x6s0dn4 x1n1nwrg x1dwmuk9 x16dv9tl x1c5gpgi x1tfhd1 x1udv5rz x9f619 x78zum5 xh8yej3 x1x1rfll xlx31pv x1wxaq2x xeuugli xuq8xha x1ulcdur x1hl8ikr x9v5kkp x1t137rt x1de99jn xt970qd xn60lsn x67bb7w",
+			className: "x6s0dn4 x1n1nwrg x1u6grsq x1dwmuk9 x16dv9tl x1c5gpgi x1tfhd1 x1udv5rz x9f619 x78zum5 xh8yej3 x1x1rfll xlx31pv x1wxaq2x xeuugli xuq8xha x1ulcdur x1hl8ikr x9v5kkp x1t137rt x1de99jn xt970qd xn60lsn x67bb7w",
 			children: [t1, t2]
 		});
 		$[6] = t1;

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","FocusableElement","ToastRegionProps","RACToastRegionProps","ToastRegionRenderProps","stylex","Button","RACButton","UNSTABLE_Toast","RACToast","UNSTABLE_ToastContent","RACToastContent","UNSTABLE_ToastQueue","RACToastQueue","UNSTABLE_ToastRegion","RACToastRegion","Text","CloseGlyph","useRipple","mergeStatefulStyles","colors","motion","radii","shadows","spacing","stateLayerOpacity","typography","SHORT_MS","LONG_MS","WIDE","rise","styles","action","kMwMTN","kMv6JI","kGuDYH","k63SB2","kb6lSQ","kLWn49","k8WAf4","kg3NbH","$$css","close","kZKoxP","kzqmXN","kmVPX3","control","kGNEyG","kWkggS","kaIpWk","kMzoRj","kB7OPa","kkrTdU","k1xSpc","kmuXW","kjj79g","kjBf7l","kInvED","k3XXqK","kMeerF","kVQacm","kVAEAm","SnackbarAction","label","onPress","SnackbarMessage","isDismissable","message","SnackbarOptions","onClose","timeout","SnackbarProps","Omit","className","queue","SnackbarQueue","style","SnackbarToastItem","rac","constructor","maxVisibleToasts","add","options","undefined","clear","key","actionPress","closeToast","Snackbar","t0","$","_c","T0","t1","t2","t3","t4","props","snackbarContent","t5","SnackbarButton","children","ripple","handlers","surface","toast","SnackbarControls","SnackbarToast","content","Queue","SnackbarRegionRenderProps"],"sources":["../../../src/components/snackbar/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { FocusableElement, ToastRegionProps as RACToastRegionProps, ToastRegionRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Button as RACButton, UNSTABLE_Toast as RACToast, UNSTABLE_ToastContent as RACToastContent, UNSTABLE_ToastQueue as RACToastQueue, UNSTABLE_ToastRegion as RACToastRegion, Text } from 'react-aria-components';\nimport { CloseGlyph } from '../../glyphs';\nimport { useRipple } from '../../hooks/useRipple';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, shadows, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\n\n// The snackbar page's brief message at the bottom of the screen, with an\n// optional action beside it and an optional close button after that. The\n// page's container is the inverse surface at a 4dp corner and elevation 3,\n// its supporting text is body-medium in inverse on surface, its action label\n// is inverse primary, and its close icon takes the supporting text's colour.\n// The measurements are the page's too: 8dp of margin from the edges of the\n// screen, 8dp of padding inside the container with another 8dp either side\n// of the message, 14dp above and below on a single line, and between 320 and\n// 576dp wide above the page's 600dp breakpoint — full width below it.\n//\n// One at a time. The page shows a single snackbar and replaces it rather\n// than stacking, which is `maxVisibleToasts: 1` on the queue.\n//\n// React Aria's toast is the behaviour: the region is a landmark that holds\n// the message, moves focus into it for a keyboard, and pauses every timer\n// while it is hovered or focused, so a message never expires while it is\n// being read or acted on.\n//\n// Three things are decided here rather than taken from React Aria or from\n// the page.\n//\n// **The queue is ours, not React Aria's.** React Aria's toast is still\n// `UNSTABLE_`, and `SnackbarQueue` is what keeps that name out of a\n// consumer's code — an upstream rename is this file rather than every call\n// site. It wraps their queue, defaults it to one visible message, and takes\n// the message and its options as one call.\n//\n// **The action and the close button are drawn here rather than through\n// Button and IconButton.** The page colours them inverse primary and inverse\n// on surface, which no variant of either carries, and a colour pushed in\n// from outside through `className` is the merge hazard AGENTS.md describes:\n// StyleX decides between two atomic classes by their order in the compiled\n// stylesheet, not by the order they are applied. Both are React Aria's\n// `Button` with the same ripple and the same state layers, over\n// `currentColor` so each takes the colour the snackbar gives it.\n//\n// **There is no `container` prop.** Every other overlay here takes one,\n// because React Aria's `Modal` and `Popover` accept a portal container.\n// Its toast region does not: it reads a portal provider that\n// `react-aria-components` does not export, so the region always lands at the\n// end of `<body>`. An app that scopes its StyleX theme to a subtree has to\n// put the theme on `:root` for the snackbar to be drawn in it.\n\n// The page's two durations, from the same implementation its measurements\n// come from: a message alone is shown for the short one, a message with an\n// action for the long one, since an action has to be read before it can be\n// taken.\nconst SHORT_MS = 1500;\nconst LONG_MS = 2750;\n\n// Below the page's 600dp breakpoint the snackbar runs the width of the\n// screen; above it, it takes between 320 and 576.\nconst WIDE = '@media (min-width: 600px)';\n\n// The page's own is a fade. It rises a little as it arrives too, which is\n// what the page draws and what says the message came from the edge of the\n// screen rather than appearing over it.\nconst rise = \"x15b941j-B\";\nconst styles = {\n  action: {\n    kMwMTN: \"x16bex6i\",\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    k8WAf4: \"x1cmllll\",\n    kg3NbH: \"x18fpw6u\",\n    $$css: true\n  },\n  close: {\n    kZKoxP: \"xsdox4t\",\n    kMwMTN: \"x1girmi0\",\n    kzqmXN: \"x1useyqa\",\n    kmVPX3: \"x1717udv\",\n    $$css: true\n  },\n  control: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xy3r1oc x1en43ny x15a1ka xjbqb8w\",\n    kaIpWk: \"x3y1ksm\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x3nfvp2\",\n    kmuXW: \"x2lah0s\",\n    kjj79g: \"xl56j7k\",\n    kjBf7l: \"x14ytart\",\n    kInvED: \"x1hl8ikr\",\n    k3XXqK: \"x9v5kkp x1t137rt\",\n    kMeerF: \"x1de99jn\",\n    kVQacm: \"xb3r6kr\",\n    kVAEAm: \"x1n2onr6\",\n    $$css: true\n  }\n};\ntype SnackbarAction = {\n  /** What the action says. The page gives it a single word where it can. */\n  label: string;\n  /** Run when the action is pressed, just before the snackbar closes. */\n  onPress: () => void;\n};\n\n/** What a snackbar carries: its message, and what may sit beside it. */\ntype SnackbarMessage = {\n  action: SnackbarAction | undefined;\n  isDismissable: boolean;\n  message: ReactNode;\n};\ntype SnackbarOptions = {\n  /**\n   * A single action shown after the message. Pressing it runs `onPress` and\n   * closes the snackbar, which is what the page draws.\n   */\n  action?: SnackbarAction;\n  /**\n   * Whether a close button is shown at the end. The page draws one for a\n   * message a reader may want out of the way before it expires.\n   * @default false\n   */\n  isDismissable?: boolean;\n  /** Run when the snackbar closes, however it was closed. */\n  onClose?: () => void;\n  /**\n   * How long the snackbar is shown, in milliseconds. Defaults to the page's\n   * short duration, or its long one when there is an action to read, and the\n   * timer is paused while the region is hovered or focused so a message never\n   * expires while it is being read.\n   *\n   * `0` is the page's indefinite length: the snackbar stays until something\n   * closes it. Give one of those an action or `isDismissable`, or there is no\n   * way to be rid of it.\n   */\n  timeout?: number;\n};\ntype SnackbarProps = Omit<RACToastRegionProps<SnackbarMessage>, 'children' | 'className' | 'queue' | 'style'> & {\n  /**\n   * What a screen reader calls the region holding the snackbar.\n   * @default 'Notifications'\n   */\n  'aria-label'?: string;\n  /** A function may compute the class from the region's render state. */\n  className?: RACToastRegionProps<SnackbarMessage>['className'];\n  /** The queue the region shows messages from. */\n  queue: SnackbarQueue;\n  /** A function may compute the style from the region's render state. */\n  style?: RACToastRegionProps<SnackbarMessage>['style'];\n};\n\n// One entry of the queue, as React Aria hands it to the region's render\n// function. Taken from its render state rather than imported from\n// `react-stately`, which this package does not depend on.\ntype SnackbarToastItem = ToastRegionRenderProps<SnackbarMessage>['visibleToasts'][number];\n\n/**\n * The queue a snackbar is shown from. Make one where the app can reach it —\n * a module of its own is the usual place — mount `Snackbar` once with it,\n * and call `add` from anywhere.\n *\n * ```ts\n * const messages = new Snackbar.Queue()\n * messages.add('Label', { action: { label: 'Undo', onPress: undo } })\n * ```\n *\n * It wraps React Aria's toast queue rather than exposing it, which is what\n * keeps that API's `UNSTABLE_` name out of a consumer's code.\n */\nclass SnackbarQueue {\n  /**\n   * React Aria's queue, which `Snackbar` subscribes to. Not part of the\n   * package's API — read it and an upstream release may break the call site.\n   */\n  readonly rac: RACToastQueue<SnackbarMessage>;\n  constructor() {\n    // One at a time, which is what the page shows: a second message replaces\n    // the first rather than stacking under it.\n    this.rac = new RACToastQueue<SnackbarMessage>({\n      maxVisibleToasts: 1\n    });\n  }\n\n  /**\n   * Shows a message, and returns the key that closes it.\n   */\n  add(message: ReactNode, options: SnackbarOptions = {}) {\n    const {\n      action,\n      isDismissable = false,\n      onClose,\n      timeout\n    } = options;\n    return this.rac.add({\n      action,\n      isDismissable,\n      message\n    }, {\n      onClose,\n      timeout: timeout ?? (action === undefined ? SHORT_MS : LONG_MS)\n    });\n  }\n\n  /** Closes every snackbar, shown or waiting. */\n  clear() {\n    this.rac.clear();\n  }\n\n  /** Closes one snackbar, by the key `add` returned. */\n  close(key: string) {\n    this.rac.close(key);\n  }\n}\n\n// The three handlers the snackbar hands to something below it, each built by\n// a call rather 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.\nfunction actionPress(action: SnackbarAction, close: () => void) {\n  return () => {\n    action.onPress();\n    close();\n  };\n}\nfunction closeToast(queue: SnackbarQueue, key: string) {\n  return () => {\n    queue.close(key);\n  };\n}\n\n/**\n * A brief message at the bottom of the screen, with an optional action. Mount\n * one of these with a `Snackbar.Queue`, and call the queue's `add` to show a\n * message from anywhere.\n *\n * ```tsx\n * const messages = new Snackbar.Queue()\n *\n * <Snackbar queue={messages} />\n * ```\n *\n * The region is portalled to the end of `<body>` and renders nothing while\n * the queue is empty. It is one region rather than one per message, so mount\n * it once, near the root.\n *\n * The call site's `className` and `style` land on that region, which is the\n * element a layout positions.\n */\nfunction Snackbar({\n  queue,\n  ...props\n}: SnackbarProps) {\n  return <RACToastRegion<SnackbarMessage> queue={queue.rac} {...props} {...mergeStatefulStyles({\n    className: \"x6s0dn4 x9f619 x78zum5 xdt5ytf x126z3so x1ey2m1c x17y0mx6 x1t137rt x1a7rqcl x47corl xixxii4 xfo81ep\"\n  }, props)}>\n      {snackbarContent(queue)}\n    </RACToastRegion>;\n}\n\n/**\n * One of the snackbar's two controls. React Aria's `Button` rather than the\n * library's, for the colour reason in the comment at the top of this file;\n * the ripple and the state layers are the same ones every other control\n * here draws, over `currentColor`.\n */\nfunction SnackbarButton({\n  children,\n  style,\n  ...props\n}: {\n  'aria-label'?: string;\n  children: ReactNode;\n  onPress?: () => void;\n  slot?: string;\n  style: stylex.StyleXStyles;\n}) {\n  const ripple = useRipple<FocusableElement>();\n  return <RACButton {...ripple.handlers} {...props} {...stylex.props(styles.control, style)}>\n      {children}\n      {ripple.surface}\n    </RACButton>;\n}\nfunction snackbarContent(queue: SnackbarQueue) {\n  return ({\n    toast\n  }: {\n    toast: SnackbarToastItem;\n  }) => <SnackbarToast close={closeToast(queue, toast.key)} toast={toast} />;\n}\n\n/** The action, the close button, or nothing, after the message. */\nfunction SnackbarControls({\n  action,\n  close,\n  isDismissable\n}: {\n  action: SnackbarAction | undefined;\n  close: () => void;\n  isDismissable: boolean;\n}) {\n  return <>\n      {action === undefined ? null : <SnackbarButton onPress={actionPress(action, close)} style={styles.action}>\n          {action.label}\n        </SnackbarButton>}\n      {isDismissable ? <SnackbarButton aria-label=\"Close\" slot=\"close\" style={styles.close}>\n          <CloseGlyph className=\"xxk0z11 xvy4d1p\" />\n        </SnackbarButton> : null}\n    </>;\n}\n\n/** One snackbar: its message, then whatever sits after it. */\nfunction SnackbarToast({\n  close,\n  toast\n}: {\n  close: () => void;\n  toast: SnackbarToastItem;\n}) {\n  const {\n    action,\n    isDismissable,\n    message\n  } = toast.content;\n  return <RACToast toast={toast} className=\"x6s0dn4 x1n1nwrg x1dwmuk9 x16dv9tl x1c5gpgi x1tfhd1 x1udv5rz x9f619 x78zum5 xh8yej3 x1x1rfll xlx31pv x1wxaq2x xeuugli xuq8xha x1ulcdur x1hl8ikr x9v5kkp x1t137rt x1de99jn xt970qd xn60lsn x67bb7w\">\n      <RACToastContent className=\"x9f619 x1girmi0 x1iyjqo2 xpo2rfv x193rfdd x1hews6w xn43zvd xv61bfh xz158ff xeuugli xxlmvz2\">\n        <Text slot=\"title\">{message}</Text>\n      </RACToastContent>\n      <SnackbarControls action={action} close={close} isDismissable={isDismissable} />\n    </RACToast>;\n}\nSnackbar.Queue = SnackbarQueue;\n\n// The queue is reached as `Snackbar.Queue` rather than exported beside the\n// component: this file would otherwise export something that is not a\n// component, which is what turns fast refresh off for it.\nexport type { SnackbarAction, SnackbarMessage, SnackbarOptions, SnackbarProps, SnackbarQueue, ToastRegionRenderProps as SnackbarRegionRenderProps };\nexport default Snackbar;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ReactNode","FocusableElement","ToastRegionProps","RACToastRegionProps","ToastRegionRenderProps","stylex","Button","RACButton","UNSTABLE_Toast","RACToast","UNSTABLE_ToastContent","RACToastContent","UNSTABLE_ToastQueue","RACToastQueue","UNSTABLE_ToastRegion","RACToastRegion","Text","CloseGlyph","useRipple","mergeStatefulStyles","colors","motion","radii","shadows","spacing","stateLayerOpacity","typography","SHORT_MS","LONG_MS","WIDE","rise","styles","action","kMwMTN","kMv6JI","kGuDYH","k63SB2","kb6lSQ","kLWn49","k8WAf4","kg3NbH","$$css","close","kZKoxP","kzqmXN","kmVPX3","control","kGNEyG","kWkggS","kaIpWk","kMzoRj","kB7OPa","kkrTdU","k1xSpc","kmuXW","kjj79g","kjBf7l","kInvED","k3XXqK","kMeerF","kVQacm","kVAEAm","SnackbarAction","label","onPress","SnackbarMessage","isDismissable","message","SnackbarOptions","onClose","timeout","SnackbarProps","Omit","className","queue","SnackbarQueue","style","SnackbarToastItem","rac","constructor","maxVisibleToasts","add","options","undefined","clear","key","actionPress","closeToast","Snackbar","t0","$","_c","T0","t1","t2","t3","t4","props","snackbarContent","t5","SnackbarButton","children","ripple","handlers","surface","toast","SnackbarControls","SnackbarToast","content","Queue","SnackbarRegionRenderProps"],"sources":["../../../src/components/snackbar/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { FocusableElement, ToastRegionProps as RACToastRegionProps, ToastRegionRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Button as RACButton, UNSTABLE_Toast as RACToast, UNSTABLE_ToastContent as RACToastContent, UNSTABLE_ToastQueue as RACToastQueue, UNSTABLE_ToastRegion as RACToastRegion, Text } from 'react-aria-components';\nimport { CloseGlyph } from '../../glyphs';\nimport { useRipple } from '../../hooks/useRipple';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, shadows, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\n\n// The snackbar page's brief message at the bottom of the screen, with an\n// optional action beside it and an optional close button after that. The\n// page's container is the inverse surface at a 4dp corner and elevation 3,\n// its supporting text is body-medium in inverse on surface, its action label\n// is inverse primary, and its close icon takes the supporting text's colour.\n// The measurements are the page's too: 8dp of margin from the edges of the\n// screen, 8dp of padding inside the container with another 8dp either side\n// of the message, 14dp above and below on a single line, and between 320 and\n// 576dp wide above the page's 600dp breakpoint — full width below it.\n//\n// One at a time. The page shows a single snackbar and replaces it rather\n// than stacking, which is `maxVisibleToasts: 1` on the queue.\n//\n// React Aria's toast is the behaviour: the region is a landmark that holds\n// the message, moves focus into it for a keyboard, and pauses every timer\n// while it is hovered or focused, so a message never expires while it is\n// being read or acted on.\n//\n// Three things are decided here rather than taken from React Aria or from\n// the page.\n//\n// **The queue is ours, not React Aria's.** React Aria's toast is still\n// `UNSTABLE_`, and `SnackbarQueue` is what keeps that name out of a\n// consumer's code — an upstream rename is this file rather than every call\n// site. It wraps their queue, defaults it to one visible message, and takes\n// the message and its options as one call.\n//\n// **The action and the close button are drawn here rather than through\n// Button and IconButton.** The page colours them inverse primary and inverse\n// on surface, which no variant of either carries, and a colour pushed in\n// from outside through `className` is the merge hazard AGENTS.md describes:\n// StyleX decides between two atomic classes by their order in the compiled\n// stylesheet, not by the order they are applied. Both are React Aria's\n// `Button` with the same ripple and the same state layers, over\n// `currentColor` so each takes the colour the snackbar gives it.\n//\n// **There is no `container` prop.** Every other overlay here takes one,\n// because React Aria's `Modal` and `Popover` accept a portal container.\n// Its toast region does not: it reads a portal provider that\n// `react-aria-components` does not export, so the region always lands at the\n// end of `<body>`. An app that scopes its StyleX theme to a subtree has to\n// put the theme on `:root` for the snackbar to be drawn in it.\n\n// The page's two durations, from the same implementation its measurements\n// come from: a message alone is shown for the short one, a message with an\n// action for the long one, since an action has to be read before it can be\n// taken.\nconst SHORT_MS = 1500;\nconst LONG_MS = 2750;\n\n// Below the page's 600dp breakpoint the snackbar runs the width of the\n// screen; above it, it takes between 320 and 576.\nconst WIDE = '@media (min-width: 600px)';\n\n// The page's own is a fade. It rises a little as it arrives too, which is\n// what the page draws and what says the message came from the edge of the\n// screen rather than appearing over it.\nconst rise = \"x15b941j-B\";\nconst styles = {\n  action: {\n    kMwMTN: \"x16bex6i\",\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    k8WAf4: \"x1cmllll\",\n    kg3NbH: \"x18fpw6u\",\n    $$css: true\n  },\n  close: {\n    kZKoxP: \"xsdox4t\",\n    kMwMTN: \"x1girmi0\",\n    kzqmXN: \"x1useyqa\",\n    kmVPX3: \"x1717udv\",\n    $$css: true\n  },\n  control: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xy3r1oc x1en43ny x15a1ka xjbqb8w\",\n    kaIpWk: \"x3y1ksm\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x3nfvp2\",\n    kmuXW: \"x2lah0s\",\n    kjj79g: \"xl56j7k\",\n    kjBf7l: \"x14ytart\",\n    kInvED: \"x1hl8ikr\",\n    k3XXqK: \"x9v5kkp x1t137rt\",\n    kMeerF: \"x1de99jn\",\n    kVQacm: \"xb3r6kr\",\n    kVAEAm: \"x1n2onr6\",\n    $$css: true\n  }\n};\ntype SnackbarAction = {\n  /** What the action says. The page gives it a single word where it can. */\n  label: string;\n  /** Run when the action is pressed, just before the snackbar closes. */\n  onPress: () => void;\n};\n\n/** What a snackbar carries: its message, and what may sit beside it. */\ntype SnackbarMessage = {\n  action: SnackbarAction | undefined;\n  isDismissable: boolean;\n  message: ReactNode;\n};\ntype SnackbarOptions = {\n  /**\n   * A single action shown after the message. Pressing it runs `onPress` and\n   * closes the snackbar, which is what the page draws.\n   */\n  action?: SnackbarAction;\n  /**\n   * Whether a close button is shown at the end. The page draws one for a\n   * message a reader may want out of the way before it expires.\n   * @default false\n   */\n  isDismissable?: boolean;\n  /** Run when the snackbar closes, however it was closed. */\n  onClose?: () => void;\n  /**\n   * How long the snackbar is shown, in milliseconds. Defaults to the page's\n   * short duration, or its long one when there is an action to read, and the\n   * timer is paused while the region is hovered or focused so a message never\n   * expires while it is being read.\n   *\n   * `0` is the page's indefinite length: the snackbar stays until something\n   * closes it. Give one of those an action or `isDismissable`, or there is no\n   * way to be rid of it.\n   */\n  timeout?: number;\n};\ntype SnackbarProps = Omit<RACToastRegionProps<SnackbarMessage>, 'children' | 'className' | 'queue' | 'style'> & {\n  /**\n   * What a screen reader calls the region holding the snackbar.\n   * @default 'Notifications'\n   */\n  'aria-label'?: string;\n  /** A function may compute the class from the region's render state. */\n  className?: RACToastRegionProps<SnackbarMessage>['className'];\n  /** The queue the region shows messages from. */\n  queue: SnackbarQueue;\n  /** A function may compute the style from the region's render state. */\n  style?: RACToastRegionProps<SnackbarMessage>['style'];\n};\n\n// One entry of the queue, as React Aria hands it to the region's render\n// function. Taken from its render state rather than imported from\n// `react-stately`, which this package does not depend on.\ntype SnackbarToastItem = ToastRegionRenderProps<SnackbarMessage>['visibleToasts'][number];\n\n/**\n * The queue a snackbar is shown from. Make one where the app can reach it —\n * a module of its own is the usual place — mount `Snackbar` once with it,\n * and call `add` from anywhere.\n *\n * ```ts\n * const messages = new Snackbar.Queue()\n * messages.add('Label', { action: { label: 'Undo', onPress: undo } })\n * ```\n *\n * It wraps React Aria's toast queue rather than exposing it, which is what\n * keeps that API's `UNSTABLE_` name out of a consumer's code.\n */\nclass SnackbarQueue {\n  /**\n   * React Aria's queue, which `Snackbar` subscribes to. Not part of the\n   * package's API — read it and an upstream release may break the call site.\n   */\n  readonly rac: RACToastQueue<SnackbarMessage>;\n  constructor() {\n    // One at a time, which is what the page shows: a second message replaces\n    // the first rather than stacking under it.\n    this.rac = new RACToastQueue<SnackbarMessage>({\n      maxVisibleToasts: 1\n    });\n  }\n\n  /**\n   * Shows a message, and returns the key that closes it.\n   */\n  add(message: ReactNode, options: SnackbarOptions = {}) {\n    const {\n      action,\n      isDismissable = false,\n      onClose,\n      timeout\n    } = options;\n    return this.rac.add({\n      action,\n      isDismissable,\n      message\n    }, {\n      onClose,\n      timeout: timeout ?? (action === undefined ? SHORT_MS : LONG_MS)\n    });\n  }\n\n  /** Closes every snackbar, shown or waiting. */\n  clear() {\n    this.rac.clear();\n  }\n\n  /** Closes one snackbar, by the key `add` returned. */\n  close(key: string) {\n    this.rac.close(key);\n  }\n}\n\n// The three handlers the snackbar hands to something below it, each built by\n// a call rather 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.\nfunction actionPress(action: SnackbarAction, close: () => void) {\n  return () => {\n    action.onPress();\n    close();\n  };\n}\nfunction closeToast(queue: SnackbarQueue, key: string) {\n  return () => {\n    queue.close(key);\n  };\n}\n\n/**\n * A brief message at the bottom of the screen, with an optional action. Mount\n * one of these with a `Snackbar.Queue`, and call the queue's `add` to show a\n * message from anywhere.\n *\n * ```tsx\n * const messages = new Snackbar.Queue()\n *\n * <Snackbar queue={messages} />\n * ```\n *\n * The region is portalled to the end of `<body>` and renders nothing while\n * the queue is empty. It is one region rather than one per message, so mount\n * it once, near the root.\n *\n * The call site's `className` and `style` land on that region, which is the\n * element a layout positions.\n */\nfunction Snackbar({\n  queue,\n  ...props\n}: SnackbarProps) {\n  return <RACToastRegion<SnackbarMessage> queue={queue.rac} {...props} {...mergeStatefulStyles({\n    className: \"x6s0dn4 x9f619 x78zum5 xdt5ytf x126z3so x1ey2m1c x17y0mx6 x1t137rt x1a7rqcl x47corl xixxii4 xfo81ep\"\n  }, props)}>\n      {snackbarContent(queue)}\n    </RACToastRegion>;\n}\n\n/**\n * One of the snackbar's two controls. React Aria's `Button` rather than the\n * library's, for the colour reason in the comment at the top of this file;\n * the ripple and the state layers are the same ones every other control\n * here draws, over `currentColor`.\n */\nfunction SnackbarButton({\n  children,\n  style,\n  ...props\n}: {\n  'aria-label'?: string;\n  children: ReactNode;\n  onPress?: () => void;\n  slot?: string;\n  style: stylex.StyleXStyles;\n}) {\n  const ripple = useRipple<FocusableElement>();\n  return <RACButton {...ripple.handlers} {...props} {...stylex.props(styles.control, style)}>\n      {children}\n      {ripple.surface}\n    </RACButton>;\n}\nfunction snackbarContent(queue: SnackbarQueue) {\n  return ({\n    toast\n  }: {\n    toast: SnackbarToastItem;\n  }) => <SnackbarToast close={closeToast(queue, toast.key)} toast={toast} />;\n}\n\n/** The action, the close button, or nothing, after the message. */\nfunction SnackbarControls({\n  action,\n  close,\n  isDismissable\n}: {\n  action: SnackbarAction | undefined;\n  close: () => void;\n  isDismissable: boolean;\n}) {\n  return <>\n      {action === undefined ? null : <SnackbarButton onPress={actionPress(action, close)} style={styles.action}>\n          {action.label}\n        </SnackbarButton>}\n      {isDismissable ? <SnackbarButton aria-label=\"Close\" slot=\"close\" style={styles.close}>\n          <CloseGlyph className=\"xxk0z11 xvy4d1p\" />\n        </SnackbarButton> : null}\n    </>;\n}\n\n/** One snackbar: its message, then whatever sits after it. */\nfunction SnackbarToast({\n  close,\n  toast\n}: {\n  close: () => void;\n  toast: SnackbarToastItem;\n}) {\n  const {\n    action,\n    isDismissable,\n    message\n  } = toast.content;\n  return <RACToast toast={toast} className=\"x6s0dn4 x1n1nwrg x1u6grsq x1dwmuk9 x16dv9tl x1c5gpgi x1tfhd1 x1udv5rz x9f619 x78zum5 xh8yej3 x1x1rfll xlx31pv x1wxaq2x xeuugli xuq8xha x1ulcdur x1hl8ikr x9v5kkp x1t137rt x1de99jn xt970qd xn60lsn x67bb7w\">\n      <RACToastContent className=\"x9f619 x1girmi0 x1iyjqo2 xpo2rfv x193rfdd x1hews6w xn43zvd xv61bfh xz158ff xeuugli xxlmvz2\">\n        <Text slot=\"title\">{message}</Text>\n      </RACToastContent>\n      <SnackbarControls action={action} close={close} isDismissable={isDismissable} />\n    </RACToast>;\n}\nSnackbar.Queue = SnackbarQueue;\n\n// The queue is reached as `Snackbar.Queue` rather than exported beside the\n// component: this file would otherwise export something that is not a\n// component, which is what turns fast refresh off for it.\nexport type { SnackbarAction, SnackbarMessage, SnackbarOptions, SnackbarProps, SnackbarQueue, ToastRegionRenderProps as SnackbarRegionRenderProps };\nexport default Snackbar;"],"mappings":"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"}

package/dist/components/switch/index.js

@@ -3,6 +3,8 @@ import { mergeStatefulStyles } from "../../styles/merge.js";
 import { CheckGlyph } from "../../glyphs/index.js";
 import { focus } from "../../styles/focus.js";
 import { useRipple } from "../../hooks/useRipple.js";
+import { controlStyles } from "../../control/styles.js";
+import { ControlLabel } from "../../control/index.js";
 import { invalidFrom, useFieldValidationBehavior } from "../../field/root.js";
 import { FieldMessage } from "../../field/index.js";
 import { c } from "react/compiler-runtime";
@@ -15,6 +17,17 @@ const _temp = {
 	"$$css": true
 };
 const styles = {
+	control: {
+		kGNEyG: "x6s0dn4",
+		kZKoxP: "x1vqgdyp",
+		kB7OPa: "x9f619",
+		kkrTdU: "x1ypdohk",
+		k1xSpc: "x78zum5",
+		kmuXW: "x2lah0s",
+		kzqmXN: "xvni27",
+		kjj79g: "xl56j7k",
+		$$css: true
+	},
 	handle: {
 		kGNEyG: "x6s0dn4",
 		kWkggS: "xp2scj5",
@@ -116,7 +129,6 @@ const styles = {
 		kVAM5u: "xrh88j3",
 		$$css: true
 	},
-	trackFocused: { $$css: true },
 	trackOn: {
 		kWkggS: "xnety89",
 		kVAM5u: "x1uajy3w",
@@ -156,14 +168,9 @@ function buttonContent(children, icon, ripple, drag) {
 		const dragging = interactive && drag.offset !== null;
 		const active = interactive && (state.isHovered || state.isPressed || state.isFocusVisible);
 		return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
-			...{
-				0: { className: "x6s0dn4 x1vqgdyp x9f619 x1ypdohk x78zum5 x2lah0s xvni27 xl56j7k" },
-				2: { className: "x6s0dn4 x1vqgdyp x9f619 x78zum5 x2lah0s xvni27 xl56j7k xt0e3qv" },
-				1: { className: "x6s0dn4 x1vqgdyp x9f619 x78zum5 x2lah0s xvni27 xl56j7k x1h6gzvc" },
-				3: { className: "x6s0dn4 x1vqgdyp x9f619 x78zum5 x2lah0s xvni27 xl56j7k x1h6gzvc" }
-			}[!!state.isReadOnly << 1 | !!state.isDisabled << 0],
+			...props(styles.control, state.isReadOnly && controlStyles.controlReadOnly, state.isDisabled && controlStyles.controlDisabled),
 			children: /* @__PURE__ */ jsx("span", {
-				...props(styles.track, on && styles.trackOn, state.isDisabled && (on ? styles.trackOnDisabled : styles.trackDisabled), state.isFocusVisible && styles.trackFocused, state.isFocusVisible && focus.ringVisible),
+				...props(styles.track, on && styles.trackOn, state.isDisabled && (on ? styles.trackOnDisabled : styles.trackDisabled), state.isFocusVisible && focus.ringVisible),
 				children: /* @__PURE__ */ jsxs("span", {
 					...interactive ? drag.handlers(on) : {},
 					...props(styles.seat, on && styles.seatOn, dragging && styles.seatDragging, dragging && styles.seatAt(drag.offset ?? 0)),
@@ -177,13 +184,8 @@ function buttonContent(children, icon, ripple, drag) {
 					})]
 				})
 			})
-		}), children === void 0 ? null : /* @__PURE__ */ jsx("span", {
-			...{
-				0: { className: "x9f619 x139gbkf x1ypdohk x16svsjw x1848etk x1c52epr x1qn8t5l xh7dzej x1cmllll" },
-				2: { className: "x9f619 x139gbkf x16svsjw x1848etk x1c52epr x1qn8t5l xh7dzej x1cmllll xt0e3qv" },
-				1: { className: "x9f619 x16svsjw x1848etk x1c52epr x1qn8t5l xh7dzej x1cmllll x1xj74d8 x1h6gzvc" },
-				3: { className: "x9f619 x16svsjw x1848etk x1c52epr x1qn8t5l xh7dzej x1cmllll x1xj74d8 x1h6gzvc" }
-			}[!!state.isReadOnly << 1 | !!state.isDisabled << 0],
+		}), /* @__PURE__ */ jsx(ControlLabel, {
+			state,
 			children
 		})] });
 	};
@@ -199,8 +201,8 @@ function buttonContent(children, icon, ripple, drag) {
 * which is the element a layout positions.
 */
 function Switch(t0) {
-	const $ = c(20);
-	const { children, description, error, icon: t1, ...props } = t0;
+	const $ = c(21);
+	const { children, description, error, icon: t1, ...props$1 } = t0;
 	const icon = t1 === void 0 ? false : t1;
 	const ripple = useRipple();
 	const drag = useHandleDrag();
@@ -212,7 +214,7 @@ function Switch(t0) {
 		$[0] = error;
 		$[1] = t2;
 	} else t2 = $[1];
-	const t3 = mergeStatefulStyles({ className: "x7a106z x9f619 xpr5407 xrvj5dj x1pmbctz" }, props);
+	const t3 = mergeStatefulStyles(props(controlStyles.field), props$1);
 	let t4;
 	if ($[2] !== children || $[3] !== drag || $[4] !== icon || $[5] !== ripple) {
 		t4 = buttonContent(children, icon, ripple, drag);
@@ -232,38 +234,43 @@ function Switch(t0) {
 		$[8] = t5;
 	} else t5 = $[8];
 	let t6;
-	if ($[9] !== description || $[10] !== error) {
-		t6 = /* @__PURE__ */ jsx("div", {
-			className: "x1xdureb",
+	if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = props(controlStyles.messages);
+		$[9] = t6;
+	} else t6 = $[9];
+	let t7;
+	if ($[10] !== description || $[11] !== error) {
+		t7 = /* @__PURE__ */ jsx("div", {
+			...t6,
 			children: /* @__PURE__ */ jsx(FieldMessage, {
 				description,
 				error,
 				inset: false
 			})
 		});
-		$[9] = description;
-		$[10] = error;
-		$[11] = t6;
-	} else t6 = $[11];
-	let t7;
-	if ($[12] !== T0 || $[13] !== props || $[14] !== t2 || $[15] !== t3 || $[16] !== t5 || $[17] !== t6 || $[18] !== validationBehavior) {
-		t7 = /* @__PURE__ */ jsxs(T0, {
+		$[10] = description;
+		$[11] = error;
+		$[12] = t7;
+	} else t7 = $[12];
+	let t8;
+	if ($[13] !== T0 || $[14] !== props$1 || $[15] !== t2 || $[16] !== t3 || $[17] !== t5 || $[18] !== t7 || $[19] !== validationBehavior) {
+		t8 = /* @__PURE__ */ jsxs(T0, {
 			isInvalid: t2,
 			validationBehavior,
-			...props,
+			...props$1,
 			...t3,
-			children: [t5, t6]
+			children: [t5, t7]
 		});
-		$[12] = T0;
-		$[13] = props;
-		$[14] = t2;
-		$[15] = t3;
-		$[16] = t5;
-		$[17] = t6;
-		$[18] = validationBehavior;
-		$[19] = t7;
-	} else t7 = $[19];
-	return t7;
+		$[13] = T0;
+		$[14] = props$1;
+		$[15] = t2;
+		$[16] = t3;
+		$[17] = t5;
+		$[18] = t7;
+		$[19] = validationBehavior;
+		$[20] = t8;
+	} else t8 = $[20];
+	return t8;
 }
 /**
 * The handle following a pointer across the track, as the switch page draws