@kanso-labs/kanso-ui 0.28.1 → 0.28.3

package/README.md

@@ -1,5 +1,10 @@
 # Kanso UI
 
+[![npm version][npm-version-shield]][npm]
+[![npm downloads][npm-downloads-shield]][npm]
+[![License][license-shield]][license] [![Build][build-shield]][build-workflow]
+[![Test][test-shield]][test-workflow] [![Coverage][coverage-shield]][codecov]
+
 A React component library built on [StyleX](https://stylexjs.com) and
 [React Aria Components](https://react-aria.adobe.com), with design tokens
 sourced from a single
@@ -234,3 +239,20 @@ need them exported.
   `src/tokens/design.tokens.json`
 - `npm test` — Storybook story tests (vitest, headless Chromium)
 - `npm run build` — build the publishable package into `dist/`
+
+[build-shield]:
+  https://img.shields.io/github/actions/workflow/status/kanso-labs/kanso-ui/build.yaml?branch=main&label=Build
+[build-workflow]:
+  https://github.com/kanso-labs/kanso-ui/actions/workflows/build.yaml
+[codecov]: https://codecov.io/gh/kanso-labs/kanso-ui
+[coverage-shield]:
+  https://img.shields.io/codecov/c/github/kanso-labs/kanso-ui?label=Coverage
+[license]: ./LICENSE
+[license-shield]: https://img.shields.io/github/license/kanso-labs/kanso-ui
+[npm]: https://www.npmjs.com/package/@kanso-labs/kanso-ui
+[npm-downloads-shield]: https://img.shields.io/npm/dm/@kanso-labs/kanso-ui
+[npm-version-shield]: https://img.shields.io/npm/v/@kanso-labs/kanso-ui
+[test-shield]:
+  https://img.shields.io/github/actions/workflow/status/kanso-labs/kanso-ui/test.yaml?branch=main&label=Test
+[test-workflow]:
+  https://github.com/kanso-labs/kanso-ui/actions/workflows/test.yaml

package/dist/components/combo-box/index.js

@@ -222,8 +222,8 @@ function ComboToggle() {
 	let t1;
 	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
 		t1 = {
-			0: { className: "xxk0z11 xvy4d1p x1iffjtl xx6bhzk x11xpdln" },
-			1: { className: "xxk0z11 xvy4d1p xx6bhzk x11xpdln x9tu13d" }
+			0: { className: "xxk0z11 xvy4d1p x1iffjtl xkzkux9 x11xpdln xpc4ca7" },
+			1: { className: "xxk0z11 xvy4d1p xkzkux9 x11xpdln xpc4ca7 x9tu13d" }
 		};
 		$[1] = t1;
 	} else t1 = $[1];

package/dist/components/combo-box/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","ComboBoxProps","RACComboBoxProps","stylex","useContext","useRef","ComboBoxStateContext","Button","RACButton","ComboBox","RACComboBox","ComboBoxValue","RACComboBoxValue","Popover","RACPopover","FieldVariant","FieldBox","FieldInput","FieldMessage","FieldValue","fieldStyles","invalidFrom","useFieldValidationBehavior","ChevronEndGlyph","focus","mergeStatefulStyles","overlay","colors","radii","spacing","ListBox","TOGGLE","styles","list","kWkggS","kaIpWk","kzqmXN","kskxy","ks0D6T","k7Eaqz","kORKVm","k8WAf4","$$css","toggle","kGNEyG","kZKoxP","kMzoRj","kB7OPa","kMwMTN","kkrTdU","k1xSpc","kjj79g","kmVPX3","ComboBoxSelectionMode","container","Element","description","error","floatingLabel","label","leadingIcon","options","variant","Omit","T","M","ChosenValues","$","_c","t0","Symbol","for","t1","isDisabled","t2","t3","props","undefined","validationBehavior","boxRef","T0","t4","t5","root","t6","t7","selectionMode","t8","t9","t10","t11","popup","t12","t13","t14","ComboToggle","state","ring","0","className","1","isOpen"],"sources":["../../../src/components/combo-box/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { ComboBoxProps as RACComboBoxProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { useContext, useRef } from 'react';\nimport { ComboBoxStateContext, Button as RACButton, ComboBox as RACComboBox, ComboBoxValue as RACComboBoxValue, Popover as RACPopover } from 'react-aria-components';\nimport type { FieldVariant } from '../../field';\nimport { FieldBox, FieldInput, FieldMessage, FieldValue } from '../../field';\nimport { fieldStyles, invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { ChevronEndGlyph } from '../../glyphs';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport { overlay } from '../../styles/overlay';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, spacing } from '../../tokens/design.tokens.stylex';\nimport ListBox from '../list-box';\n\n// The text fields page's autocomplete text field: a text field that filters a\n// list as it is typed. Everything above the list is the field chrome in\n// `src/field` — the same box, label, supporting line and error treatment\n// every other field draws — and the list is ListBox on the shared overlay\n// surface, positioned and sized against the box exactly as Select's is.\n//\n// It is Select's shape with two differences.\n//\n// The control is a real input, so the box is not a press target — typing has\n// to reach the input — and only the chevron at the end opens the list. That\n// is what the page draws too: an autocomplete text field is a text field,\n// with a button on it.\n//\n// And the field is an element tree rather than a function of React Aria's\n// render state, which every other component here writes. React Aria builds a\n// combo box's collection by walking its children for options, and a function\n// is opaque to that walk: with one, the collection is empty until the list\n// has been opened, so a `defaultSelectedKey` resolves to no text and the\n// field starts blank. What needed the render state — whether the list is\n// open — reads the combo box's own state from context instead.\n//\n// Two more things are this component's own.\n//\n// **Filtering is React Aria's, and stays theirs.** `defaultFilter` takes a\n// predicate, and the package re-exports `useFilter` for a locale-aware one;\n// `items` with `useAsyncList` is how a list that is fetched rather than\n// listed gets in. None of that is wrapped, because a combo box's whole job\n// is which options it shows and a wrapper would be a second place to decide\n// it.\n//\n// **A value that is not in the list is allowed or refused, not corrected.**\n// `allowsCustomValue` is React Aria's, and with it off the input reverts to\n// the last chosen option on blur rather than keeping text that means nothing.\n//\n// Choosing more than one is `selectionMode=\"multiple\"`, which draws the\n// chosen options before the input through React Aria's `ComboBoxValue`. For\n// a field that draws each of them as a removable chip, the coverage plan has\n// TokenField.\n\n// Hoisted so it is not a new element on every render, which is what\n// react-perf's jsx-no-jsx-as-prop is after.\nconst TOGGLE = <ComboToggle />;\nconst styles = {\n  list: {\n    kWkggS: \"x1vnz5z6\",\n    kaIpWk: \"x1tfhd1\",\n    kzqmXN: \"xlvufjm\",\n    kskxy: \"xedcshv\",\n    ks0D6T: \"x1x1rfll\",\n    k7Eaqz: \"xeuugli\",\n    kORKVm: \"x1odjw0f\",\n    k8WAf4: \"x1cmllll\",\n    $$css: true\n  },\n  toggle: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kZKoxP: \"xxk0z11\",\n    kaIpWk: \"x3y1ksm\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1heor9g\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x3nfvp2\",\n    kzqmXN: \"xvy4d1p\",\n    kjj79g: \"xl56j7k\",\n    kmVPX3: \"x1717udv\",\n    $$css: true\n  }\n};\ntype ComboBoxProps<T extends object = object, M extends ComboBoxSelectionMode = 'single'> = {\n  /**\n   * Where to portal the list. Defaults to the end of `<body>`, which is\n   * right for an app that sets its StyleX theme on `:root`. An app that\n   * scopes the theme to a subtree has to point this at an element inside it,\n   * or the list renders outside the theme and falls back to the tokens'\n   * `prefers-color-scheme` default.\n   */\n  container?: Element;\n  /**\n   * A hint shown under the field. Replaced by `error` when there is one, so\n   * the two never stack.\n   */\n  description?: string;\n  /**\n   * The problem with the current value, in words. Its presence is what puts\n   * the field in its error state — the message, the red underline, and\n   * `aria-invalid` all follow from it.\n   */\n  error?: string;\n  /**\n   * Whether the label sits in the empty box and floats to the top once the\n   * field is focused or holds a value. `false` keeps it small at the top in\n   * every state.\n   * @default true\n   */\n  floatingLabel?: boolean;\n  /**\n   * What the field is for. Required rather than optional: a combo box with\n   * no label is a box a screen reader cannot name.\n   */\n  label: string;\n  /**\n   * An icon at the start of the box, before the label and the value: the\n   * page's 24dp leading icon, in the muted role.\n   */\n  leadingIcon?: ReactNode;\n  /**\n   * The options. `ListBox.Item` for each, and `ListBox.Section` to group\n   * them — the list inside is a ListBox, and takes everything one does.\n   */\n  options?: ReactNode;\n  /**\n   * The filled box, or the outlined one, as the text fields page draws them.\n   * @default 'filled'\n   */\n  variant?: FieldVariant;\n} & Omit<RACComboBoxProps<T, M>, 'children' | 'defaultSelectedKey' | 'isInvalid' | 'onSelectionChange' | 'selectedKey' | 'validationBehavior'>;\n\n// React Aria's combo box takes its own two-value selection mode rather than\n// the collection-wide one, which also has `none`; that type is local to its\n// module, so the two values are named again here.\ntype ComboBoxSelectionMode = 'multiple' | 'single';\n\n/**\n * The chosen options, drawn before the input when more than one may be\n * chosen. The chrome's `FieldValue` is the styled element and React Aria's\n * `ComboBoxValue` sits inside it, as it does in Select.\n */\nfunction ChosenValues() {\n  return <FieldValue className=\"x2lah0s\">\n      <RACComboBoxValue />\n    </FieldValue>;\n}\n\n/**\n * A labelled text field that filters a list as it is typed. Its value is\n * React Aria's: pass `value` with `onChange` to control which option is\n * chosen, `inputValue` with `onInputChange` to control the text, or the\n * `default` forms of either to let it keep its own. React Aria's older\n * `selectedKey` names are deprecated and are left out of this component's\n * props rather than passed through.\n *\n * ```tsx\n * <ComboBox\n *   label=\"Label\"\n *   options={\n *     <>\n *       <ListBox.Item id=\"first\">First item</ListBox.Item>\n *       <ListBox.Item id=\"second\">Second item</ListBox.Item>\n *     </>\n *   }\n * />\n * ```\n *\n * Filtering is React Aria's: `defaultFilter` takes a predicate, `useFilter`\n * is re-exported for a locale-aware one, and `items` with `useAsyncList`\n * feeds a list that is fetched rather than listed. `allowsCustomValue` lets\n * the field keep text that matches nothing.\n *\n * The box, label, input, supporting line and error are the field chrome in\n * `src/field`, shared with every other field; the list is ListBox on the\n * overlay surface every anchored panel here draws.\n *\n * The call site's `className` and `style` land on the field as a whole,\n * which is the element a layout positions.\n */\nfunction ComboBox<T extends object = object, M extends ComboBoxSelectionMode = 'single'>({\n  container,\n  description,\n  error,\n  floatingLabel = true,\n  isDisabled = false,\n  label,\n  leadingIcon,\n  options,\n  variant = 'filled',\n  ...props\n}: ComboBoxProps<T, M>) {\n  const validationBehavior = useFieldValidationBehavior();\n  // What the list is anchored to and takes its width from: the box, not the\n  // button inside it, which is a 24dp icon.\n  const boxRef = useRef<HTMLDivElement>(null);\n  return <RACComboBox<T, M> isDisabled={isDisabled} isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(fieldStyles.root), props)}>\n      <FieldBox floatingLabel={floatingLabel}\n    // React Aria's `TextField` hands its group the field's disabled and\n    // invalid state through context; its `ComboBox` does not, so the box\n    // is told outright or its label and its underline never turn.\n    isDisabled={isDisabled} isInvalid={invalidFrom(error)} label={label} leading={leadingIcon} ref={boxRef} trailing={TOGGLE} variant={variant}>\n        {props.selectionMode === 'multiple' ? <ChosenValues /> : null}\n        <FieldInput />\n      </FieldBox>\n      <FieldMessage description={description} error={error} />\n      <RACPopover triggerRef={boxRef}\n    // oxlint-disable-next-line typescript/no-deprecated -- its replacement, UNSAFE_PortalProvider, is not exported by react-aria-components\n    UNSTABLE_portalContainer={container} {...stylex.props(overlay.popup, styles.list)}>\n        <ListBox>{options}</ListBox>\n      </RACPopover>\n    </RACComboBox>;\n}\n\n/**\n * The button that opens the list. It takes its press behaviour from the\n * combo box around it through React Aria's button context, and reads whether\n * the list is open from the combo box's state rather than from a render prop\n * — the whole field cannot be a render function, since React Aria builds its\n * collection by walking the children and a function is opaque to that walk.\n */\nfunction ComboToggle() {\n  const state = useContext(ComboBoxStateContext);\n  return <RACButton {...stylex.props(styles.toggle, focus.ring)}>\n      <ChevronEndGlyph {...{\n      0: {\n        className: \"xxk0z11 xvy4d1p x1iffjtl xx6bhzk x11xpdln\"\n      },\n      1: {\n        className: \"xxk0z11 xvy4d1p xx6bhzk x11xpdln x9tu13d\"\n      }\n    }[!!(state?.isOpen === true) << 0]} />\n    </RACButton>;\n}\nexport type { ComboBoxProps, ComboBoxSelectionMode };\nexport default ComboBox;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ReactNode","ComboBoxProps","RACComboBoxProps","stylex","useContext","useRef","ComboBoxStateContext","Button","RACButton","ComboBox","RACComboBox","ComboBoxValue","RACComboBoxValue","Popover","RACPopover","FieldVariant","FieldBox","FieldInput","FieldMessage","FieldValue","fieldStyles","invalidFrom","useFieldValidationBehavior","ChevronEndGlyph","focus","mergeStatefulStyles","overlay","colors","motion","radii","spacing","ListBox","TOGGLE","styles","list","kWkggS","kaIpWk","kzqmXN","kskxy","ks0D6T","k7Eaqz","kORKVm","k8WAf4","$$css","toggle","kGNEyG","kZKoxP","kMzoRj","kB7OPa","kMwMTN","kkrTdU","k1xSpc","kjj79g","kmVPX3","ComboBoxSelectionMode","container","Element","description","error","floatingLabel","label","leadingIcon","options","variant","Omit","T","M","ChosenValues","$","_c","t0","Symbol","for","t1","isDisabled","t2","t3","props","undefined","validationBehavior","boxRef","T0","t4","t5","root","t6","t7","selectionMode","t8","t9","t10","t11","popup","t12","t13","t14","ComboToggle","state","ring","0","className","1","isOpen"],"sources":["../../../src/components/combo-box/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { ComboBoxProps as RACComboBoxProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { useContext, useRef } from 'react';\nimport { ComboBoxStateContext, Button as RACButton, ComboBox as RACComboBox, ComboBoxValue as RACComboBoxValue, Popover as RACPopover } from 'react-aria-components';\nimport type { FieldVariant } from '../../field';\nimport { FieldBox, FieldInput, FieldMessage, FieldValue } from '../../field';\nimport { fieldStyles, invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { ChevronEndGlyph } from '../../glyphs';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport { overlay } from '../../styles/overlay';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, spacing } from '../../tokens/design.tokens.stylex';\nimport ListBox from '../list-box';\n\n// The text fields page's autocomplete text field: a text field that filters a\n// list as it is typed. Everything above the list is the field chrome in\n// `src/field` — the same box, label, supporting line and error treatment\n// every other field draws — and the list is ListBox on the shared overlay\n// surface, positioned and sized against the box exactly as Select's is.\n//\n// It is Select's shape with two differences.\n//\n// The control is a real input, so the box is not a press target — typing has\n// to reach the input — and only the chevron at the end opens the list. That\n// is what the page draws too: an autocomplete text field is a text field,\n// with a button on it.\n//\n// And the field is an element tree rather than a function of React Aria's\n// render state, which every other component here writes. React Aria builds a\n// combo box's collection by walking its children for options, and a function\n// is opaque to that walk: with one, the collection is empty until the list\n// has been opened, so a `defaultSelectedKey` resolves to no text and the\n// field starts blank. What needed the render state — whether the list is\n// open — reads the combo box's own state from context instead.\n//\n// Two more things are this component's own.\n//\n// **Filtering is React Aria's, and stays theirs.** `defaultFilter` takes a\n// predicate, and the package re-exports `useFilter` for a locale-aware one;\n// `items` with `useAsyncList` is how a list that is fetched rather than\n// listed gets in. None of that is wrapped, because a combo box's whole job\n// is which options it shows and a wrapper would be a second place to decide\n// it.\n//\n// **A value that is not in the list is allowed or refused, not corrected.**\n// `allowsCustomValue` is React Aria's, and with it off the input reverts to\n// the last chosen option on blur rather than keeping text that means nothing.\n//\n// Choosing more than one is `selectionMode=\"multiple\"`, which draws the\n// chosen options before the input through React Aria's `ComboBoxValue`. For\n// a field that draws each of them as a removable chip, the coverage plan has\n// TokenField.\n\n// Hoisted so it is not a new element on every render, which is what\n// react-perf's jsx-no-jsx-as-prop is after.\nconst TOGGLE = <ComboToggle />;\nconst styles = {\n  list: {\n    kWkggS: \"x1vnz5z6\",\n    kaIpWk: \"x1tfhd1\",\n    kzqmXN: \"xlvufjm\",\n    kskxy: \"xedcshv\",\n    ks0D6T: \"x1x1rfll\",\n    k7Eaqz: \"xeuugli\",\n    kORKVm: \"x1odjw0f\",\n    k8WAf4: \"x1cmllll\",\n    $$css: true\n  },\n  toggle: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kZKoxP: \"xxk0z11\",\n    kaIpWk: \"x3y1ksm\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1heor9g\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x3nfvp2\",\n    kzqmXN: \"xvy4d1p\",\n    kjj79g: \"xl56j7k\",\n    kmVPX3: \"x1717udv\",\n    $$css: true\n  }\n};\ntype ComboBoxProps<T extends object = object, M extends ComboBoxSelectionMode = 'single'> = {\n  /**\n   * Where to portal the list. Defaults to the end of `<body>`, which is\n   * right for an app that sets its StyleX theme on `:root`. An app that\n   * scopes the theme to a subtree has to point this at an element inside it,\n   * or the list renders outside the theme and falls back to the tokens'\n   * `prefers-color-scheme` default.\n   */\n  container?: Element;\n  /**\n   * A hint shown under the field. Replaced by `error` when there is one, so\n   * the two never stack.\n   */\n  description?: string;\n  /**\n   * The problem with the current value, in words. Its presence is what puts\n   * the field in its error state — the message, the red underline, and\n   * `aria-invalid` all follow from it.\n   */\n  error?: string;\n  /**\n   * Whether the label sits in the empty box and floats to the top once the\n   * field is focused or holds a value. `false` keeps it small at the top in\n   * every state.\n   * @default true\n   */\n  floatingLabel?: boolean;\n  /**\n   * What the field is for. Required rather than optional: a combo box with\n   * no label is a box a screen reader cannot name.\n   */\n  label: string;\n  /**\n   * An icon at the start of the box, before the label and the value: the\n   * page's 24dp leading icon, in the muted role.\n   */\n  leadingIcon?: ReactNode;\n  /**\n   * The options. `ListBox.Item` for each, and `ListBox.Section` to group\n   * them — the list inside is a ListBox, and takes everything one does.\n   */\n  options?: ReactNode;\n  /**\n   * The filled box, or the outlined one, as the text fields page draws them.\n   * @default 'filled'\n   */\n  variant?: FieldVariant;\n} & Omit<RACComboBoxProps<T, M>, 'children' | 'defaultSelectedKey' | 'isInvalid' | 'onSelectionChange' | 'selectedKey' | 'validationBehavior'>;\n\n// React Aria's combo box takes its own two-value selection mode rather than\n// the collection-wide one, which also has `none`; that type is local to its\n// module, so the two values are named again here.\ntype ComboBoxSelectionMode = 'multiple' | 'single';\n\n/**\n * The chosen options, drawn before the input when more than one may be\n * chosen. The chrome's `FieldValue` is the styled element and React Aria's\n * `ComboBoxValue` sits inside it, as it does in Select.\n */\nfunction ChosenValues() {\n  return <FieldValue className=\"x2lah0s\">\n      <RACComboBoxValue />\n    </FieldValue>;\n}\n\n/**\n * A labelled text field that filters a list as it is typed. Its value is\n * React Aria's: pass `value` with `onChange` to control which option is\n * chosen, `inputValue` with `onInputChange` to control the text, or the\n * `default` forms of either to let it keep its own. React Aria's older\n * `selectedKey` names are deprecated and are left out of this component's\n * props rather than passed through.\n *\n * ```tsx\n * <ComboBox\n *   label=\"Label\"\n *   options={\n *     <>\n *       <ListBox.Item id=\"first\">First item</ListBox.Item>\n *       <ListBox.Item id=\"second\">Second item</ListBox.Item>\n *     </>\n *   }\n * />\n * ```\n *\n * Filtering is React Aria's: `defaultFilter` takes a predicate, `useFilter`\n * is re-exported for a locale-aware one, and `items` with `useAsyncList`\n * feeds a list that is fetched rather than listed. `allowsCustomValue` lets\n * the field keep text that matches nothing.\n *\n * The box, label, input, supporting line and error are the field chrome in\n * `src/field`, shared with every other field; the list is ListBox on the\n * overlay surface every anchored panel here draws.\n *\n * The call site's `className` and `style` land on the field as a whole,\n * which is the element a layout positions.\n */\nfunction ComboBox<T extends object = object, M extends ComboBoxSelectionMode = 'single'>({\n  container,\n  description,\n  error,\n  floatingLabel = true,\n  isDisabled = false,\n  label,\n  leadingIcon,\n  options,\n  variant = 'filled',\n  ...props\n}: ComboBoxProps<T, M>) {\n  const validationBehavior = useFieldValidationBehavior();\n  // What the list is anchored to and takes its width from: the box, not the\n  // button inside it, which is a 24dp icon.\n  const boxRef = useRef<HTMLDivElement>(null);\n  return <RACComboBox<T, M> isDisabled={isDisabled} isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(fieldStyles.root), props)}>\n      <FieldBox floatingLabel={floatingLabel}\n    // React Aria's `TextField` hands its group the field's disabled and\n    // invalid state through context; its `ComboBox` does not, so the box\n    // is told outright or its label and its underline never turn.\n    isDisabled={isDisabled} isInvalid={invalidFrom(error)} label={label} leading={leadingIcon} ref={boxRef} trailing={TOGGLE} variant={variant}>\n        {props.selectionMode === 'multiple' ? <ChosenValues /> : null}\n        <FieldInput />\n      </FieldBox>\n      <FieldMessage description={description} error={error} />\n      <RACPopover triggerRef={boxRef}\n    // oxlint-disable-next-line typescript/no-deprecated -- its replacement, UNSAFE_PortalProvider, is not exported by react-aria-components\n    UNSTABLE_portalContainer={container} {...stylex.props(overlay.popup, styles.list)}>\n        <ListBox>{options}</ListBox>\n      </RACPopover>\n    </RACComboBox>;\n}\n\n/**\n * The button that opens the list. It takes its press behaviour from the\n * combo box around it through React Aria's button context, and reads whether\n * the list is open from the combo box's state rather than from a render prop\n * — the whole field cannot be a render function, since React Aria builds its\n * collection by walking the children and a function is opaque to that walk.\n */\nfunction ComboToggle() {\n  const state = useContext(ComboBoxStateContext);\n  return <RACButton {...stylex.props(styles.toggle, focus.ring)}>\n      <ChevronEndGlyph {...{\n      0: {\n        className: \"xxk0z11 xvy4d1p x1iffjtl xkzkux9 x11xpdln xpc4ca7\"\n      },\n      1: {\n        className: \"xxk0z11 xvy4d1p xkzkux9 x11xpdln xpc4ca7 x9tu13d\"\n      }\n    }[!!(state?.isOpen === true) << 0]} />\n    </RACButton>;\n}\nexport type { ComboBoxProps, ComboBoxSelectionMode };\nexport default ComboBox;"],"mappings":"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"}

package/dist/components/currency/index.js

@@ -96,12 +96,21 @@ function Currency(t0) {
 	} else t7 = $[19];
 	return t5(t7);
 }
+const formatters = /* @__PURE__ */ new Map();
 function formatCurrency(value, options) {
-	return new Intl.NumberFormat(options.locale, {
-		currency: options.currency,
-		signDisplay: options.sign,
+	return formatterFor(options.locale, options.currency, options.sign).formatToParts(value).map((part) => part.type === "minusSign" ? MINUS_SIGN : part.value).join("");
+}
+function formatterFor(locale, currency, sign) {
+	const key = `${locale ?? ""}|${currency}|${sign}`;
+	const cached = formatters.get(key);
+	if (cached) return cached;
+	const formatter = new Intl.NumberFormat(locale, {
+		currency,
+		signDisplay: sign,
 		style: "currency"
-	}).formatToParts(value).map((part) => part.type === "minusSign" ? MINUS_SIGN : part.value).join("");
+	});
+	formatters.set(key, formatter);
+	return formatter;
 }
 function resolveTone(value, tone) {
 	if (tone !== "auto") return tone;

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["stylex","RenderComponentProps","useRender","mergeStyles","colors","typography","styles","base","kB7OPa","kMv6JI","kcqcaj","k63SB2","$$css","tones","negative","kMwMTN","neutral","positive","MINUS_SIGN","CurrencyProps","Omit","currency","locale","sign","SignDisplay","tone","Tone","value","Currency","t0","$","_c","render","t1","t2","t3","t4","t5","t6","t7","t8","t9","props","undefined","formatCurrency","resolveTone","children","defaultTagName","options","Intl","NumberFormat","signDisplay","style","formatToParts","map","part","type","join"],"sources":["../../../src/components/currency/index.tsx"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport type { RenderComponentProps } from '../../render/useRender';\nimport { useRender } from '../../render/useRender';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, typography } from '../../tokens/design.tokens.stylex';\n\n// Deliberately sets no font-size. The same value turns up at several sizes —\n// inside a list row, as a heading-scale figure, as a total — differing in\n// nothing else, so the size is the container's decision. What must never vary\n// is here: the mono face, tabular figures so a column of them lines up on the\n// decimal point, and the medium weight that separates a figure from the prose\n// around it.\n//\n// No Material Design page draws an amount. It is type alone: the mono face\n// and medium weight from the type tokens, tabular figures, and the on surface\n// role for the neutral tone. Positive and negative are the library's own\n// roles, the pair Tag draws from as well.\nconst styles = {\n  base: {\n    kB7OPa: \"x9f619\",\n    kMv6JI: \"xbppi91\",\n    kcqcaj: \"xss6m8b\",\n    k63SB2: \"x1bf3uqz\",\n    $$css: true\n  }\n};\nconst tones = {\n  negative: {\n    kMwMTN: \"x12gp0t\",\n    $$css: true\n  },\n  neutral: {\n    kMwMTN: \"x139gbkf\",\n    $$css: true\n  },\n  positive: {\n    kMwMTN: \"x4no3js\",\n    $$css: true\n  }\n};\n\n// U+2212 MINUS SIGN, not the U+002D hyphen Intl actually emits. The hyphen is\n// a typographic stand-in: it is narrower than the plus it pairs with and does\n// not sit on the same optical centre as the digits, which shows up as a\n// wobbling column the moment amounts are stacked.\nconst MINUS_SIGN = '−';\ntype CurrencyProps = Omit<RenderComponentProps<'span'>, 'children'> & {\n  /**\n   * ISO 4217 code for the currency to format in.\n   * @default 'USD'\n   */\n  currency?: string;\n  /**\n   * BCP 47 locale to format for. Defaults to the runtime's own locale, so an\n   * app that has not chosen one still formats the way its reader expects.\n   */\n  locale?: string;\n  /**\n   * When to show the sign. `auto` shows one only on negatives, `always` also\n   * prefixes positives with a plus, and `never` shows neither — which leaves\n   * colour as the only thing separating a credit from a debt, so reach for it\n   * only where the direction is already stated some other way.\n   * @default 'auto'\n   */\n  sign?: SignDisplay;\n  /**\n   * Which colour role to render in. `auto` follows the sign of `value`, with\n   * zero reading as neutral.\n   * @default 'auto'\n   */\n  tone?: Tone;\n  /** The amount, in the currency's major units. */\n  value: number;\n};\ntype SignDisplay = 'always' | 'auto' | 'never';\ntype Tone = 'auto' | 'negative' | 'neutral' | 'positive';\nfunction Currency({\n  currency = 'USD',\n  locale,\n  render,\n  sign = 'auto',\n  tone = 'auto',\n  value,\n  ...props\n}: CurrencyProps) {\n  return useRender({\n    defaultTagName: 'span',\n    props: {\n      ...props,\n      children: formatCurrency(value, {\n        currency,\n        locale,\n        sign\n      }),\n      ...mergeStyles(stylex.props(styles.base, tones[resolveTone(value, tone)]), props)\n    },\n    render\n  });\n}\n\n// formatToParts rather than a replace over the formatted string, so only the\n// sign is substituted. A blind replace would also hit a hyphen inside a\n// locale's currency name or grouping, and locales that wrap negatives in\n// parentheses have no minus to swap at all — both of which this leaves alone.\nfunction formatCurrency(value: number, options: {\n  currency: string;\n  locale: string | undefined;\n  sign: SignDisplay;\n}) {\n  return new Intl.NumberFormat(options.locale, {\n    currency: options.currency,\n    signDisplay: options.sign,\n    style: 'currency'\n  }).formatToParts(value).map(part => part.type === 'minusSign' ? MINUS_SIGN : part.value).join('');\n}\n\n// Zero is neither owed nor owing, so it takes the neutral role rather than\n// being forced into one of the two. Negative zero lands here too, which is\n// what a rounded-away debt should read as.\nfunction resolveTone(value: number, tone: Tone) {\n  if (tone !== 'auto') {\n    return tone;\n  }\n  if (value > 0) {\n    return 'positive';\n  }\n  if (value < 0) {\n    return 'negative';\n  }\n  return 'neutral';\n}\nexport type { CurrencyProps };\nexport default Currency;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["stylex","RenderComponentProps","useRender","mergeStyles","colors","typography","styles","base","kB7OPa","kMv6JI","kcqcaj","k63SB2","$$css","tones","negative","kMwMTN","neutral","positive","MINUS_SIGN","CurrencyProps","Omit","currency","locale","sign","SignDisplay","tone","Tone","value","Currency","t0","$","_c","render","t1","t2","t3","t4","t5","t6","t7","t8","t9","props","undefined","formatCurrency","resolveTone","children","defaultTagName","formatters","Map","Intl","NumberFormat","options","formatterFor","formatToParts","map","part","type","join","key","cached","get","formatter","signDisplay","style","set"],"sources":["../../../src/components/currency/index.tsx"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport type { RenderComponentProps } from '../../render/useRender';\nimport { useRender } from '../../render/useRender';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, typography } from '../../tokens/design.tokens.stylex';\n\n// Deliberately sets no font-size. The same value turns up at several sizes —\n// inside a list row, as a heading-scale figure, as a total — differing in\n// nothing else, so the size is the container's decision. What must never vary\n// is here: the mono face, tabular figures so a column of them lines up on the\n// decimal point, and the medium weight that separates a figure from the prose\n// around it.\n//\n// No Material Design page draws an amount. It is type alone: the mono face\n// and medium weight from the type tokens, tabular figures, and the on surface\n// role for the neutral tone. Positive and negative are the library's own\n// roles, the pair Tag draws from as well.\nconst styles = {\n  base: {\n    kB7OPa: \"x9f619\",\n    kMv6JI: \"xbppi91\",\n    kcqcaj: \"xss6m8b\",\n    k63SB2: \"x1bf3uqz\",\n    $$css: true\n  }\n};\nconst tones = {\n  negative: {\n    kMwMTN: \"x12gp0t\",\n    $$css: true\n  },\n  neutral: {\n    kMwMTN: \"x139gbkf\",\n    $$css: true\n  },\n  positive: {\n    kMwMTN: \"x4no3js\",\n    $$css: true\n  }\n};\n\n// U+2212 MINUS SIGN, not the U+002D hyphen Intl actually emits. The hyphen is\n// a typographic stand-in: it is narrower than the plus it pairs with and does\n// not sit on the same optical centre as the digits, which shows up as a\n// wobbling column the moment amounts are stacked.\nconst MINUS_SIGN = '−';\ntype CurrencyProps = Omit<RenderComponentProps<'span'>, 'children'> & {\n  /**\n   * ISO 4217 code for the currency to format in.\n   * @default 'USD'\n   */\n  currency?: string;\n  /**\n   * BCP 47 locale to format for. Defaults to the runtime's own locale, so an\n   * app that has not chosen one still formats the way its reader expects.\n   */\n  locale?: string;\n  /**\n   * When to show the sign. `auto` shows one only on negatives, `always` also\n   * prefixes positives with a plus, and `never` shows neither — which leaves\n   * colour as the only thing separating a credit from a debt, so reach for it\n   * only where the direction is already stated some other way.\n   * @default 'auto'\n   */\n  sign?: SignDisplay;\n  /**\n   * Which colour role to render in. `auto` follows the sign of `value`, with\n   * zero reading as neutral.\n   * @default 'auto'\n   */\n  tone?: Tone;\n  /** The amount, in the currency's major units. */\n  value: number;\n};\ntype SignDisplay = 'always' | 'auto' | 'never';\ntype Tone = 'auto' | 'negative' | 'neutral' | 'positive';\nfunction Currency({\n  currency = 'USD',\n  locale,\n  render,\n  sign = 'auto',\n  tone = 'auto',\n  value,\n  ...props\n}: CurrencyProps) {\n  return useRender({\n    defaultTagName: 'span',\n    props: {\n      ...props,\n      children: formatCurrency(value, {\n        currency,\n        locale,\n        sign\n      }),\n      ...mergeStyles(stylex.props(styles.base, tones[resolveTone(value, tone)]), props)\n    },\n    render\n  });\n}\n\n// Constructing an Intl.NumberFormat resolves the locale, loads the currency's\n// data and builds the pattern; formatToParts on one already built skips all\n// three, which measures about ten times cheaper per value. An instance is\n// stateless once constructed, so one can be shared across every component\n// asking for the same three options.\n//\n// What this saves is a mount and a changing amount, not an idle re-render:\n// the React Compiler already memoises the call below on the four things it\n// reads, so a component re-rendered with the same props never reaches here.\n// That cache belongs to one component instance and counts `value` among its\n// keys, which leaves two cases it cannot cover — a column of rows, where every\n// instance has a cache of its own and each builds a formatter, and a single\n// amount that ticks, where each new value misses.\n//\n// Unbounded on purpose. The keys are the option sets an app actually uses —\n// its locales times its currencies times the three sign settings — so the map\n// settles at that size rather than growing with renders or with values.\nconst formatters = new Map<string, Intl.NumberFormat>();\n\n// formatToParts rather than a replace over the formatted string, so only the\n// sign is substituted. A blind replace would also hit a hyphen inside a\n// locale's currency name or grouping, and locales that wrap negatives in\n// parentheses have no minus to swap at all — both of which this leaves alone.\nfunction formatCurrency(value: number, options: {\n  currency: string;\n  locale: string | undefined;\n  sign: SignDisplay;\n}) {\n  return formatterFor(options.locale, options.currency, options.sign).formatToParts(value).map(part => part.type === 'minusSign' ? MINUS_SIGN : part.value).join('');\n}\nfunction formatterFor(locale: string | undefined, currency: string, sign: SignDisplay) {\n  // Neither a BCP 47 locale nor an ISO 4217 code can contain a vertical bar\n  // and `sign` is one of three known words, so joining on one cannot make two\n  // different option sets share a key.\n  const key = `${locale ?? ''}|${currency}|${sign}`;\n  const cached = formatters.get(key);\n  if (cached) {\n    return cached;\n  }\n  const formatter = new Intl.NumberFormat(locale, {\n    currency,\n    signDisplay: sign,\n    style: 'currency'\n  });\n  formatters.set(key, formatter);\n  return formatter;\n}\n\n// Zero is neither owed nor owing, so it takes the neutral role rather than\n// being forced into one of the two. Negative zero lands here too, which is\n// what a rounded-away debt should read as.\nfunction resolveTone(value: number, tone: Tone) {\n  if (tone !== 'auto') {\n    return tone;\n  }\n  if (value > 0) {\n    return 'positive';\n  }\n  if (value < 0) {\n    return 'negative';\n  }\n  return 'neutral';\n}\nexport type { CurrencyProps };\nexport default Currency;"],"mappings":";;;;;AAkBA,MAAMM,SAAS,EACbC,MAAM;CACJC,QAAQ;CACRC,QAAQ;CACRC,QAAQ;CACRC,QAAQ;CACRC,OAAO;AACT,EACF;AACA,MAAMC,QAAQ;CACZC,UAAU;EACRC,QAAQ;EACRH,OAAO;CACT;CACAI,SAAS;EACPD,QAAQ;EACRH,OAAO;CACT;CACAK,UAAU;EACRF,QAAQ;EACRH,OAAO;CACT;AACF;AAMA,MAAMM,aAAa;AA+BnB,SAAAU,SAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAP,EAAA,OAAAD,IAAA;EAAkB,MAAA,EAAAR,UAAAiB,IAAAhB,QAAAU,QAAAO,IAAAhB,MAAAiB,IAAAf,MAAAgB,IAAAd,OAAA,GAAAe,YAAAb;EAAAG,SAAAO;EAChB,MAAAlB,WAAAiB,OAAAK,KAAAA,IAAA,QAAAL;EAGA,MAAAf,OAAAiB,OAAAG,KAAAA,IAAA,SAAAH;EACA,MAAAf,OAAAgB,OAAAE,KAAAA,IAAA,SAAAF;EAIOvC,KAAAA;EACWkC,KAAA;EAEXM,KAAAA;EAAK,IAAAZ,EAAA,OAAAT,YAAAS,EAAA,OAAAR,UAAAQ,EAAA,OAAAP,QAAAO,EAAA,QAAAH,OAAA;GACEO,KAAAU,eAAejB,OAAO;IAAAN;IAAAC;IAAAC;GAIhC,CAAC;GAACO,EAAA,KAAAT;GAAAS,EAAA,KAAAR;GAAAQ,EAAA,KAAAP;GAAAO,EAAA,MAAAH;GAAAG,EAAA,MAAAI;EAAA,OAAAA,KAAAJ,EAAA;EACCK,KAAAhC,YAAYH,MAAaM,OAAMC,MAAOM,MAAMgC,YAAYlB,OAAOF,IAAI,EAAE,GAAGiB,OAAK;EAACZ,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;EAAAL,EAAA,KAAAM;EAAAN,EAAA,KAAAO;CAAA,OAAA;EAAAL,SAAAF,EAAA;EAAAG,KAAAH,EAAA;EAAAI,KAAAJ,EAAA;EAAAK,KAAAL,EAAA;EAAAM,KAAAN,EAAA;EAAAO,KAAAP,EAAA;CAAA;CAAA,IAAAQ;CAAA,IAAAR,EAAA,QAAAG,MAAAH,EAAA,QAAAI,MAAAJ,EAAA,QAAAK,IAAA;EAP5EG,KAAA;GAAA,GACFI;GAAKI,UACEZ;GAIR,GACCC;EACL;EAACL,EAAA,MAAAG;EAAAH,EAAA,MAAAI;EAAAJ,EAAA,MAAAK;EAAAL,EAAA,MAAAQ;CAAA,OAAAA,KAAAR,EAAA;CAAA,IAAAS;CAAA,IAAAT,EAAA,QAAAE,UAAAF,EAAA,QAAAM,MAAAN,EAAA,QAAAQ,IAAA;EAVcC,KAAA;GAAAQ,gBACCX;GAAMM,OACfJ;GAQNN;EAEH;EAACF,EAAA,MAAAE;EAAAF,EAAA,MAAAM;EAAAN,EAAA,MAAAQ;EAAAR,EAAA,MAAAS;CAAA,OAAAA,KAAAT,EAAA;CAAA,OAZM5B,GAAUqC,EAYhB;AAAC;AAoBJ,MAAMS,6BAAa,IAAIC,IAA+B;AAMtD,SAASL,eAAejB,OAAeyB,SAIpC;CACD,OAAOC,aAAaD,QAAQ9B,QAAQ8B,QAAQ/B,UAAU+B,QAAQ7B,IAAI,CAAC,CAAC+B,cAAc3B,KAAK,CAAC,CAAC4B,KAAIC,SAAQA,KAAKC,SAAS,cAAcvC,aAAasC,KAAK7B,KAAK,CAAC,CAAC+B,KAAK,EAAE;AACnK;AACA,SAASL,aAAa/B,QAA4BD,UAAkBE,MAAmB;CAIrF,MAAMoC,MAAM,GAAGrC,UAAU,GAAE,GAAID,SAAQ,GAAIE;CAC3C,MAAMqC,SAASZ,WAAWa,IAAIF,GAAG;CACjC,IAAIC,QACF,OAAOA;CAET,MAAME,YAAY,IAAIZ,KAAKC,aAAa7B,QAAQ;EAC9CD;EACA0C,aAAaxC;EACbyC,OAAO;CACT,CAAC;CACDhB,WAAWiB,IAAIN,KAAKG,SAAS;CAC7B,OAAOA;AACT;AAKA,SAASjB,YAAYlB,OAAeF,MAAY;CAC9C,IAAIA,SAAS,QACX,OAAOA;CAET,IAAIE,QAAQ,GACV,OAAO;CAET,IAAIA,QAAQ,GACV,OAAO;CAET,OAAO;AACT"}

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

@@ -1,5 +1,6 @@
 import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { mergeStatefulStyles } from "../../styles/merge.js";
+import { spacing, typography } from "../../tokens/design.tokens.stylex.js";
 import { MinusGlyph, PlusGlyph } from "../../glyphs/index.js";
 import { fieldStyles, invalidFrom, useFieldValidationBehavior } from "../../field/root.js";
 import { FieldBox, FieldInput, FieldMessage } from "../../field/index.js";
@@ -8,11 +9,13 @@ import { c } from "react/compiler-runtime";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Button, NumberField } from "react-aria-components";
 //#region src/components/number-field/index.tsx
+`${spacing.sm}${typography.bodySmallLineHeight}${typography.bodyLargeLineHeight}`;
+`${spacing.lg}${typography.bodyLargeLineHeight}`;
 const styles = {
 	stepper: {
 		kGNEyG: "x6s0dn4",
 		kWkggS: "xjbqb8w",
-		kZKoxP: "x1fgtraw",
+		kZKoxP: "x1viytl0",
 		kaIpWk: "x2u8bby",
 		kMzoRj: "xc342km",
 		kB7OPa: "x9f619",
@@ -48,6 +51,10 @@ const styles = {
 		kWkggS: "x14noynh",
 		$$css: true
 	},
+	stepperOutlined: {
+		kZKoxP: "x1o675yb",
+		$$css: true
+	},
 	stepperPressed: {
 		kWkggS: "x123fei2",
 		$$css: true
@@ -238,7 +245,7 @@ function StackedStepper(t0) {
 	return t2;
 }
 function stepperStyles(top, outlined) {
-	return (state) => props(styles.stepper, top && styles.stepperTop, !top && outlined && styles.stepperBottomOutlined, state.isHovered && !state.isDisabled && styles.stepperHovered, state.isPressed && !state.isDisabled && styles.stepperPressed, state.isFocusVisible && styles.stepperFocused, state.isDisabled && styles.stepperDisabled);
+	return (state) => props(styles.stepper, outlined && styles.stepperOutlined, top && styles.stepperTop, !top && outlined && styles.stepperBottomOutlined, state.isHovered && !state.isDisabled && styles.stepperHovered, state.isPressed && !state.isDisabled && styles.stepperPressed, state.isFocusVisible && styles.stepperFocused, state.isDisabled && styles.stepperDisabled);
 }
 //#endregion
 export { NumberField$1 as default };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","ButtonRenderProps","NumberFieldProps","RACNumberFieldProps","stylex","Button","RACButton","NumberField","RACNumberField","FieldVariant","FieldBox","FieldInput","FieldMessage","fieldStyles","invalidFrom","useFieldValidationBehavior","MinusGlyph","PlusGlyph","mergeStatefulStyles","colors","motion","radii","spacing","stateLayerOpacity","IconButton","styles","stepper","kGNEyG","kWkggS","kZKoxP","kaIpWk","kMzoRj","kB7OPa","kMwMTN","kkrTdU","k1xSpc","kzqmXN","kjj79g","kjBf7l","kInvED","k3XXqK","kMeerF","kmVPX3","kIyJzY","k1ekBW","kAMwcw","$$css","stepperBottomOutlined","kT0f0o","stepperDisabled","stepperFocused","stepperHovered","stepperPressed","stepperTop","kfmiAY","decrementLabel","description","error","floatingLabel","incrementLabel","label","numeric","steppers","variant","Omit","t0","$","_c","t1","t2","t3","isDisabled","t4","t5","t6","t7","props","undefined","inline","validationBehavior","T0","t8","t9","root","t10","Symbol","for","0","className","1","t11","t12","t13","2","3","t14","t15","t16","t17","t18","t19","t20","StackedStepper","children","outlined","slot","stepperStyles","top","state","isHovered","isPressed","isFocusVisible"],"sources":["../../../src/components/number-field/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { ButtonRenderProps, NumberFieldProps as RACNumberFieldProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Button as RACButton, NumberField as RACNumberField } from 'react-aria-components';\nimport type { FieldVariant } from '../../field';\nimport { FieldBox, FieldInput, FieldMessage } from '../../field';\nimport { fieldStyles, invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { MinusGlyph, PlusGlyph } from '../../glyphs';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, spacing, stateLayerOpacity } from '../../tokens/design.tokens.stylex';\nimport IconButton from '../icon-button';\n\n// The text fields page's field, holding a number: the same box, floating\n// label, underline and message as TextField, with the value in the mono\n// face and tabular figures by default, since a number is what those are\n// for, and two steppers at the trailing end.\n//\n// The steppers come in two layouts. Stacked, the plus over the minus, they\n// are a column flush with the box's top, end and bottom, each half of the\n// box's 56dp and 32dp wide, drawn here since the smallest icon button is\n// 32dp and two of those do not fit; the glyph is the icon buttons page's\n// 20dp for that size, and the hover, pressed, focus and disabled treatments\n// are the standard icon button's. Side by side, they are extra-small icon\n// buttons, the page's trailing icons in the library's own control, 12dp\n// from the end where the page puts a field's icons — the box's 16dp of\n// padding less the 4dp they pull back.\n//\n// React Aria's `NumberField` is the root and the box is its `Group`, which\n// is what names the box and the two steppers as one control; the steppers\n// are its increment and decrement buttons through context, disabled at the\n// ends of the range and kept out of the tab order, and the formatting is its\n// `formatOptions`.\nconst styles = {\n  stepper: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kZKoxP: \"x1fgtraw\",\n    kaIpWk: \"x2u8bby\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1w5n3ug\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x78zum5\",\n    kzqmXN: \"x1td3qas\",\n    kjj79g: \"xl56j7k\",\n    kjBf7l: \"xrgy624\",\n    kInvED: \"x2ssjo2\",\n    k3XXqK: \"x1t137rt\",\n    kMeerF: \"x1de99jn\",\n    kmVPX3: \"x1717udv\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"xs2xxs2\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  stepperBottomOutlined: {\n    kT0f0o: \"x4gcak0\",\n    $$css: true\n  },\n  stepperDisabled: {\n    kMwMTN: \"x1xj74d8\",\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  stepperFocused: {\n    k3XXqK: \"xaatb59\",\n    $$css: true\n  },\n  stepperHovered: {\n    kWkggS: \"x14noynh\",\n    $$css: true\n  },\n  stepperPressed: {\n    kWkggS: \"x123fei2\",\n    $$css: true\n  },\n  stepperTop: {\n    kfmiAY: \"xirz1nw\",\n    $$css: true\n  }\n};\ntype NumberFieldProps = {\n  /**\n   * The name of the stepper that lowers the value, for a screen reader.\n   * @default 'Decrease'\n   */\n  decrementLabel?: string;\n  /**\n   * A hint shown under the field. Replaced by `error` when there is one, so\n   * the two never stack.\n   */\n  description?: string;\n  /**\n   * The problem with the current value, in words. Its presence is what puts\n   * the field in its error state — the message, the red underline, and\n   * `aria-invalid` all follow from it.\n   */\n  error?: string;\n  /**\n   * Whether the label sits in the empty box and floats to the top once the\n   * field is focused or holds a value, as the text fields page draws it.\n   * `false` keeps it small at the top in every state.\n   * @default true\n   */\n  floatingLabel?: boolean;\n  /**\n   * The name of the stepper that raises the value, for a screen reader.\n   * @default 'Increase'\n   */\n  incrementLabel?: string;\n  /**\n   * What the field is for. Required rather than optional: a field with no\n   * label is a box a screen reader cannot name.\n   */\n  label: string;\n  /**\n   * Renders the value in the mono face with tabular figures, for amounts and\n   * other numbers meant to be compared down a column. On by default, since a\n   * number field holds nothing else.\n   * @default true\n   */\n  numeric?: boolean;\n  /**\n   * How the two steppers sit at the end of the box: stacked, the plus over\n   * the minus, flush with the box's edge, or side by side as extra-small\n   * icon buttons.\n   * @default 'vertical'\n   */\n  steppers?: 'horizontal' | 'vertical';\n  /**\n   * The filled box, or the outlined one: no fill, an outline that thickens\n   * and takes the primary role while focused, and the label cutting it once\n   * it floats — the text fields page's two fields.\n   * @default 'filled'\n   */\n  variant?: FieldVariant;\n} & Omit<RACNumberFieldProps, 'children' | 'isInvalid' | 'validationBehavior'>;\n\n/**\n * A labelled number input with steppers. Its value is React Aria's: pass\n * `value` with `onChange` to control it, or `defaultValue` to let it keep\n * its own — and `onChange` is handed the number, `NaN` while the field is\n * empty. `minValue`, `maxValue` and `step` shape it, and `formatOptions`\n * says how it reads, in the locale the page is in: a currency, a percentage,\n * a unit. Arrow keys step the value, and Page Up and Page Down by ten steps.\n *\n * The call site's `className` and `style` land on the field as a whole,\n * which is the element a layout positions. The box, label, input and message\n * are the field chrome in `src/field`, shared with every other field.\n */\nfunction NumberField({\n  decrementLabel = 'Decrease',\n  description,\n  error,\n  floatingLabel = true,\n  incrementLabel = 'Increase',\n  isDisabled = false,\n  label,\n  numeric = true,\n  steppers = 'vertical',\n  variant = 'filled',\n  ...props\n}: NumberFieldProps) {\n  const inline = steppers === 'horizontal';\n  const validationBehavior = useFieldValidationBehavior();\n  return <RACNumberField isDisabled={isDisabled} isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(fieldStyles.root), props)}>\n      <FieldBox floatingLabel={floatingLabel} label={label} variant={variant}>\n        <div {...{\n        0: {\n          className: \"x1cy8zhl x9f619 x78zum5 x126z3so\"\n        },\n        1: {\n          className: \"x9f619 x78zum5 x126z3so x6s0dn4\"\n        }\n      }[!!inline << 0]}>\n          <FieldInput numeric={numeric} />\n          <div {...{\n          0: {\n            className: \"x78zum5 xdt5ytf x2lah0s x1motrhk xk4mfur\"\n          },\n          2: {\n            className: \"x78zum5 x2lah0s x1q0g3np xdj266r x1tn5xpv\"\n          },\n          1: {\n            className: \"x78zum5 xdt5ytf x2lah0s xk4mfur x17v9ssf\"\n          },\n          3: {\n            className: \"x78zum5 x2lah0s x1q0g3np x1tn5xpv x17v9ssf\"\n          }\n        }[!!inline << 1 | !!(!inline && variant === 'outlined') << 0]}>\n            {inline ? <>\n                <IconButton aria-label={decrementLabel} size=\"xs\" slot=\"decrement\">\n                  <MinusGlyph className=\"xlzyvqe x1lliihq x15vhz18\" />\n                </IconButton>\n                <IconButton aria-label={incrementLabel} size=\"xs\" slot=\"increment\">\n                  <PlusGlyph className=\"xlzyvqe x1lliihq x15vhz18\" />\n                </IconButton>\n              </> : <>\n                <StackedStepper label={incrementLabel} outlined={variant === 'outlined'} slot=\"increment\">\n                  <PlusGlyph className=\"x1qx5ct2 x1lliihq xw4jnvo\" />\n                </StackedStepper>\n                <StackedStepper label={decrementLabel} outlined={variant === 'outlined'} slot=\"decrement\">\n                  <MinusGlyph className=\"x1qx5ct2 x1lliihq xw4jnvo\" />\n                </StackedStepper>\n              </>}\n          </div>\n        </div>\n      </FieldBox>\n      <FieldMessage description={description} error={error} />\n    </RACNumberField>;\n}\nfunction StackedStepper({\n  children,\n  label,\n  outlined,\n  slot\n}: {\n  children: ReactNode;\n  label: string;\n  outlined: boolean;\n  slot: 'decrement' | 'increment';\n}) {\n  return <RACButton aria-label={label} slot={slot} {...mergeStatefulStyles(stepperStyles(slot === 'increment', outlined), {})}>\n      {children}\n    </RACButton>;\n}\n\n// A stacked stepper: React Aria's button with the slot the field's context\n// looks for, drawn from its render state. Built by a call rather than\n// written inline at the prop, which is what react-perf's\n// no-new-function-as-prop is after.\nfunction stepperStyles(top: boolean, outlined: boolean) {\n  return (state: ButtonRenderProps) => stylex.props(styles.stepper, top && styles.stepperTop, !top && outlined && styles.stepperBottomOutlined, state.isHovered && !state.isDisabled && styles.stepperHovered, state.isPressed && !state.isDisabled && styles.stepperPressed, state.isFocusVisible && styles.stepperFocused, state.isDisabled && styles.stepperDisabled);\n}\nexport type { NumberFieldProps };\nexport default NumberField;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ReactNode","ButtonRenderProps","NumberFieldProps","RACNumberFieldProps","stylex","Button","RACButton","NumberField","RACNumberField","FieldVariant","FieldBox","FieldInput","FieldMessage","fieldStyles","invalidFrom","useFieldValidationBehavior","MinusGlyph","PlusGlyph","mergeStatefulStyles","colors","motion","radii","spacing","stateLayerOpacity","typography","IconButton","BOX_HALF","sm","bodySmallLineHeight","bodyLargeLineHeight","BOX_OUTLINED_HALF","lg","styles","stepper","kGNEyG","kWkggS","kZKoxP","kaIpWk","kMzoRj","kB7OPa","kMwMTN","kkrTdU","k1xSpc","kzqmXN","kjj79g","kjBf7l","kInvED","k3XXqK","kMeerF","kmVPX3","kIyJzY","k1ekBW","kAMwcw","$$css","stepperBottomOutlined","kT0f0o","stepperDisabled","stepperFocused","stepperHovered","stepperOutlined","stepperPressed","stepperTop","kfmiAY","decrementLabel","description","error","floatingLabel","incrementLabel","label","numeric","steppers","variant","Omit","t0","$","_c","t1","t2","t3","isDisabled","t4","t5","t6","t7","props","undefined","inline","validationBehavior","T0","t8","t9","root","t10","Symbol","for","0","className","1","t11","t12","t13","2","3","t14","t15","t16","t17","t18","t19","t20","StackedStepper","children","outlined","slot","stepperStyles","top","state","isHovered","isPressed","isFocusVisible"],"sources":["../../../src/components/number-field/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { ButtonRenderProps, NumberFieldProps as RACNumberFieldProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Button as RACButton, NumberField as RACNumberField } from 'react-aria-components';\nimport type { FieldVariant } from '../../field';\nimport { FieldBox, FieldInput, FieldMessage } from '../../field';\nimport { fieldStyles, invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { MinusGlyph, PlusGlyph } from '../../glyphs';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\nimport IconButton from '../icon-button';\n\n// The text fields page's field, holding a number: the same box, floating\n// label, underline and message as TextField, with the value in the mono\n// face and tabular figures by default, since a number is what those are\n// for, and two steppers at the trailing end.\n//\n// The steppers come in two layouts. Stacked, the plus over the minus, they\n// are a column flush with the box's top, end and bottom, each half of the\n// box's 56dp and 32dp wide, drawn here since the smallest icon button is\n// 32dp and two of those do not fit; the glyph is the icon buttons page's\n// 20dp for that size, and the hover, pressed, focus and disabled treatments\n// are the standard icon button's. Side by side, they are extra-small icon\n// buttons, the page's trailing icons in the library's own control, 12dp\n// from the end where the page puts a field's icons — the box's 16dp of\n// padding less the 4dp they pull back.\n//\n// React Aria's `NumberField` is the root and the box is its `Group`, which\n// is what names the box and the two steppers as one control; the steppers\n// are its increment and decrement buttons through context, disabled at the\n// ends of the range and kept out of the tab order, and the formatting is its\n// `formatOptions`.\n// Half the box, spelled from the same tokens the box derives its height\n// from rather than as the 28 that half of 56 comes to. A theme with a longer\n// body line makes the box taller — `Editorial` in src/theming/themes.ts does\n// — and a stated half leaves the pair short of the bottom edge they are\n// flush with.\n//\n// Written here rather than imported from src/field/styles.ts, which spells\n// the same two expressions: the StyleX compiler resolves a constant across\n// files only out of a `.stylex.ts` module, the same reason that file gives\n// for re-declaring the forced-colours query. The two have to move together.\nconst BOX_HALF = `calc((2 * ${spacing.sm} + ${typography.bodySmallLineHeight} + ${typography.bodyLargeLineHeight}) / 2)`;\nconst BOX_OUTLINED_HALF = `calc((2 * ${spacing.lg} + ${typography.bodyLargeLineHeight}) / 2)`;\nconst styles = {\n  stepper: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kZKoxP: \"x1viytl0\",\n    kaIpWk: \"x2u8bby\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1w5n3ug\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x78zum5\",\n    kzqmXN: \"x1td3qas\",\n    kjj79g: \"xl56j7k\",\n    kjBf7l: \"xrgy624\",\n    kInvED: \"x2ssjo2\",\n    k3XXqK: \"x1t137rt\",\n    kMeerF: \"x1de99jn\",\n    kmVPX3: \"x1717udv\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"xs2xxs2\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  stepperBottomOutlined: {\n    kT0f0o: \"x4gcak0\",\n    $$css: true\n  },\n  stepperDisabled: {\n    kMwMTN: \"x1xj74d8\",\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  stepperFocused: {\n    k3XXqK: \"xaatb59\",\n    $$css: true\n  },\n  stepperHovered: {\n    kWkggS: \"x14noynh\",\n    $$css: true\n  },\n  stepperOutlined: {\n    kZKoxP: \"x1o675yb\",\n    $$css: true\n  },\n  stepperPressed: {\n    kWkggS: \"x123fei2\",\n    $$css: true\n  },\n  stepperTop: {\n    kfmiAY: \"xirz1nw\",\n    $$css: true\n  }\n};\ntype NumberFieldProps = {\n  /**\n   * The name of the stepper that lowers the value, for a screen reader.\n   * @default 'Decrease'\n   */\n  decrementLabel?: string;\n  /**\n   * A hint shown under the field. Replaced by `error` when there is one, so\n   * the two never stack.\n   */\n  description?: string;\n  /**\n   * The problem with the current value, in words. Its presence is what puts\n   * the field in its error state — the message, the red underline, and\n   * `aria-invalid` all follow from it.\n   */\n  error?: string;\n  /**\n   * Whether the label sits in the empty box and floats to the top once the\n   * field is focused or holds a value, as the text fields page draws it.\n   * `false` keeps it small at the top in every state.\n   * @default true\n   */\n  floatingLabel?: boolean;\n  /**\n   * The name of the stepper that raises the value, for a screen reader.\n   * @default 'Increase'\n   */\n  incrementLabel?: string;\n  /**\n   * What the field is for. Required rather than optional: a field with no\n   * label is a box a screen reader cannot name.\n   */\n  label: string;\n  /**\n   * Renders the value in the mono face with tabular figures, for amounts and\n   * other numbers meant to be compared down a column. On by default, since a\n   * number field holds nothing else.\n   * @default true\n   */\n  numeric?: boolean;\n  /**\n   * How the two steppers sit at the end of the box: stacked, the plus over\n   * the minus, flush with the box's edge, or side by side as extra-small\n   * icon buttons.\n   * @default 'vertical'\n   */\n  steppers?: 'horizontal' | 'vertical';\n  /**\n   * The filled box, or the outlined one: no fill, an outline that thickens\n   * and takes the primary role while focused, and the label cutting it once\n   * it floats — the text fields page's two fields.\n   * @default 'filled'\n   */\n  variant?: FieldVariant;\n} & Omit<RACNumberFieldProps, 'children' | 'isInvalid' | 'validationBehavior'>;\n\n/**\n * A labelled number input with steppers. Its value is React Aria's: pass\n * `value` with `onChange` to control it, or `defaultValue` to let it keep\n * its own — and `onChange` is handed the number, `NaN` while the field is\n * empty. `minValue`, `maxValue` and `step` shape it, and `formatOptions`\n * says how it reads, in the locale the page is in: a currency, a percentage,\n * a unit. Arrow keys step the value, and Page Up and Page Down by ten steps.\n *\n * The call site's `className` and `style` land on the field as a whole,\n * which is the element a layout positions. The box, label, input and message\n * are the field chrome in `src/field`, shared with every other field.\n */\nfunction NumberField({\n  decrementLabel = 'Decrease',\n  description,\n  error,\n  floatingLabel = true,\n  incrementLabel = 'Increase',\n  isDisabled = false,\n  label,\n  numeric = true,\n  steppers = 'vertical',\n  variant = 'filled',\n  ...props\n}: NumberFieldProps) {\n  const inline = steppers === 'horizontal';\n  const validationBehavior = useFieldValidationBehavior();\n  return <RACNumberField isDisabled={isDisabled} isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(fieldStyles.root), props)}>\n      <FieldBox floatingLabel={floatingLabel} label={label} variant={variant}>\n        <div {...{\n        0: {\n          className: \"x1cy8zhl x9f619 x78zum5 x126z3so\"\n        },\n        1: {\n          className: \"x9f619 x78zum5 x126z3so x6s0dn4\"\n        }\n      }[!!inline << 0]}>\n          <FieldInput numeric={numeric} />\n          <div {...{\n          0: {\n            className: \"x78zum5 xdt5ytf x2lah0s x1motrhk xk4mfur\"\n          },\n          2: {\n            className: \"x78zum5 x2lah0s x1q0g3np xdj266r x1tn5xpv\"\n          },\n          1: {\n            className: \"x78zum5 xdt5ytf x2lah0s xk4mfur x17v9ssf\"\n          },\n          3: {\n            className: \"x78zum5 x2lah0s x1q0g3np x1tn5xpv x17v9ssf\"\n          }\n        }[!!inline << 1 | !!(!inline && variant === 'outlined') << 0]}>\n            {inline ? <>\n                <IconButton aria-label={decrementLabel} size=\"xs\" slot=\"decrement\">\n                  <MinusGlyph className=\"xlzyvqe x1lliihq x15vhz18\" />\n                </IconButton>\n                <IconButton aria-label={incrementLabel} size=\"xs\" slot=\"increment\">\n                  <PlusGlyph className=\"xlzyvqe x1lliihq x15vhz18\" />\n                </IconButton>\n              </> : <>\n                <StackedStepper label={incrementLabel} outlined={variant === 'outlined'} slot=\"increment\">\n                  <PlusGlyph className=\"x1qx5ct2 x1lliihq xw4jnvo\" />\n                </StackedStepper>\n                <StackedStepper label={decrementLabel} outlined={variant === 'outlined'} slot=\"decrement\">\n                  <MinusGlyph className=\"x1qx5ct2 x1lliihq xw4jnvo\" />\n                </StackedStepper>\n              </>}\n          </div>\n        </div>\n      </FieldBox>\n      <FieldMessage description={description} error={error} />\n    </RACNumberField>;\n}\nfunction StackedStepper({\n  children,\n  label,\n  outlined,\n  slot\n}: {\n  children: ReactNode;\n  label: string;\n  outlined: boolean;\n  slot: 'decrement' | 'increment';\n}) {\n  return <RACButton aria-label={label} slot={slot} {...mergeStatefulStyles(stepperStyles(slot === 'increment', outlined), {})}>\n      {children}\n    </RACButton>;\n}\n\n// A stacked stepper: React Aria's button with the slot the field's context\n// looks for, drawn from its render state. Built by a call rather than\n// written inline at the prop, which is what react-perf's\n// no-new-function-as-prop is after.\nfunction stepperStyles(top: boolean, outlined: boolean) {\n  return (state: ButtonRenderProps) => stylex.props(styles.stepper, outlined && styles.stepperOutlined, top && styles.stepperTop, !top && outlined && styles.stepperBottomOutlined, state.isHovered && !state.isDisabled && styles.stepperHovered, state.isPressed && !state.isDisabled && styles.stepperPressed, state.isFocusVisible && styles.stepperFocused, state.isDisabled && styles.stepperDisabled);\n}\nexport type { NumberFieldProps };\nexport default NumberField;"],"mappings":"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"}

package/dist/components/select/index.js

@@ -13,8 +13,8 @@ import { Popover, Select, SelectStateContext, SelectValue } from "react-aria-com
 const TRIGGER = /* @__PURE__ */ jsx(FieldTrigger, {});
 function chevronFor(isOpen) {
 	return /* @__PURE__ */ jsx(ChevronEndGlyph, { ...{
-		0: { className: "xxk0z11 xvy4d1p x1iffjtl xx6bhzk x11xpdln" },
-		1: { className: "xxk0z11 xvy4d1p xx6bhzk x11xpdln x9tu13d" }
+		0: { className: "xxk0z11 xvy4d1p x1iffjtl xkzkux9 x11xpdln xpc4ca7" },
+		1: { className: "xxk0z11 xvy4d1p xkzkux9 x11xpdln xpc4ca7 x9tu13d" }
 	}[!!isOpen << 0] });
 }
 const styles = { list: {

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","RefObject","SelectProps","RACSelectProps","SelectRenderProps","stylex","useContext","useRef","Popover","RACPopover","Select","RACSelect","SelectValue","RACSelectValue","SelectStateContext","FieldVariant","FieldBox","FieldMessage","FieldTrigger","FieldValue","fieldStyles","invalidFrom","useFieldValidationBehavior","ChevronEndGlyph","mergeStatefulStyles","overlay","colors","radii","spacing","ListBox","TRIGGER","chevronFor","isOpen","className","styles","list","kWkggS","kaIpWk","kzqmXN","kskxy","ks0D6T","k7Eaqz","kORKVm","k8WAf4","$$css","container","Element","description","error","floatingLabel","label","leadingIcon","options","variant","Omit","T","t0","$","_c","t1","isDisabled","t2","t3","props","undefined","validationBehavior","boxRef","T0","t4","t5","root","t6","selectContent","t7","HTMLDivElement","state","isInvalid","isFocused","popup","SelectedValue","isPlaceholder","selectionManager","selectedKeys","size","Symbol","for"],"sources":["../../../src/components/select/index.tsx"],"sourcesContent":["import type { ReactNode, RefObject } from 'react';\nimport type { SelectProps as RACSelectProps, SelectRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { useContext, useRef } from 'react';\nimport { Popover as RACPopover, Select as RACSelect, SelectValue as RACSelectValue, SelectStateContext } from 'react-aria-components';\nimport type { FieldVariant } from '../../field';\nimport { FieldBox, FieldMessage, FieldTrigger, FieldValue } from '../../field';\nimport { fieldStyles, invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { ChevronEndGlyph } from '../../glyphs';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport { overlay } from '../../styles/overlay';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, spacing } from '../../tokens/design.tokens.stylex';\nimport ListBox from '../list-box';\n\n// The menus page's exposed dropdown menu: a text field that opens a list\n// rather than taking a keystroke. Everything above the list is the field\n// chrome in `src/field` — the same box, label, supporting line and error\n// treatment every other field draws — and the list is ListBox on the shared\n// overlay surface. What is here is React Aria's `Select` around the two, and\n// the three things that are this component's own.\n//\n// **The whole box opens the list.** The chrome's `FieldTrigger` covers the\n// box rather than sitting on the value's line, so the padding, the label and\n// the icons all open it, which is what the page draws and what a native\n// select does. It draws nothing itself: the box already carries the fill,\n// the underline and the focus indicator.\n//\n// **The chevron turns.** The page's trailing icon points down while the list\n// is closed and up while it is open. React Aria reports which through the\n// select's render state, so it is drawn from that rather than swapped for a\n// second glyph.\n//\n// **The list is the field's width.** The page draws it under the field and\n// as wide as it, which React Aria reports as `--trigger-width` — of whatever\n// it is anchored to. Left alone that is the button, which fills the box's\n// value column rather than the box, so the list came out narrower than the\n// field by the icons either side of it. Pointing the popover's `triggerRef`\n// at the box is what makes the two agree. The overlay's own 112 to 280 range\n// is a menu opened from a button rather than from a field, so it goes.\n//\n// A select's value is chosen rather than typed, which the chrome had no\n// notion of until this component: `useFieldPopulated` now reads the select's\n// own state, so the floating label floats once something is chosen.\n\n// Hoisted, and the chevron built by a call, so neither is a new element on\n// every render — which is what react-perf's jsx-no-jsx-as-prop is after.\nconst TRIGGER = <FieldTrigger />;\nfunction chevronFor(isOpen: boolean) {\n  return <ChevronEndGlyph {...{\n    0: {\n      className: \"xxk0z11 xvy4d1p x1iffjtl xx6bhzk x11xpdln\"\n    },\n    1: {\n      className: \"xxk0z11 xvy4d1p xx6bhzk x11xpdln x9tu13d\"\n    }\n  }[!!isOpen << 0]} />;\n}\nconst styles = {\n  list: {\n    kWkggS: \"x1vnz5z6\",\n    kaIpWk: \"x1tfhd1\",\n    kzqmXN: \"xlvufjm\",\n    kskxy: \"xedcshv\",\n    ks0D6T: \"x1x1rfll\",\n    k7Eaqz: \"xeuugli\",\n    kORKVm: \"x1odjw0f\",\n    k8WAf4: \"x1cmllll\",\n    $$css: true\n  }\n};\ntype SelectProps<T extends object = object> = {\n  /**\n   * Where to portal the list. Defaults to the end of `<body>`, which is\n   * right for an app that sets its StyleX theme on `:root`. An app that\n   * scopes the theme to a subtree has to point this at an element inside it,\n   * or the list renders outside the theme and falls back to the tokens'\n   * `prefers-color-scheme` default.\n   */\n  container?: Element;\n  /**\n   * A hint shown under the field. Replaced by `error` when there is one, so\n   * the two never stack.\n   */\n  description?: string;\n  /**\n   * The problem with the current value, in words. Its presence is what puts\n   * the field in its error state — the message, the red underline, and\n   * `aria-invalid` all follow from it.\n   */\n  error?: string;\n  /**\n   * Whether the label sits in the empty box and floats to the top once the\n   * field is focused or something is chosen. `false` keeps it small at the\n   * top in every state.\n   * @default true\n   */\n  floatingLabel?: boolean;\n  /**\n   * What the field is for. Required rather than optional: a select with no\n   * label is a box a screen reader cannot name.\n   */\n  label: string;\n  /**\n   * An icon at the start of the box, before the label and the value: the\n   * page's 24dp leading icon, in the muted role.\n   */\n  leadingIcon?: ReactNode;\n  /**\n   * The options. `ListBox.Item` for each, and `ListBox.Section` to group\n   * them — the list inside is a ListBox, and takes everything one does.\n   */\n  options?: ReactNode;\n  /**\n   * The filled box, or the outlined one, as the text fields page draws them.\n   * @default 'filled'\n   */\n  variant?: FieldVariant;\n} & Omit<RACSelectProps<T>, 'children' | 'defaultSelectedKey' | 'isInvalid' | 'onSelectionChange' | 'selectedKey' | 'validationBehavior'>;\n\n/**\n * A labelled field that opens a list to choose from. Its value is React\n * Aria's: pass `value` with `onChange` to control it, or `defaultValue` to\n * let it keep its own. The value is an option's `id`, so give every option\n * one. React Aria's older `selectedKey` names are deprecated and are left\n * out of this component's props rather than passed through.\n *\n * ```tsx\n * <Select\n *   label=\"Label\"\n *   options={\n *     <>\n *       <ListBox.Item id=\"first\">First item</ListBox.Item>\n *       <ListBox.Item id=\"second\">Second item</ListBox.Item>\n *     </>\n *   }\n * />\n * ```\n *\n * The box, label, supporting line and error are the field chrome in\n * `src/field`, shared with every other field; the list is ListBox on the\n * overlay surface every anchored panel here draws.\n *\n * The call site's `className` and `style` land on the field as a whole,\n * which is the element a layout positions.\n */\nfunction Select<T extends object = object>({\n  container,\n  description,\n  error,\n  floatingLabel = true,\n  isDisabled = false,\n  label,\n  leadingIcon,\n  options,\n  variant = 'filled',\n  ...props\n}: SelectProps<T>) {\n  const validationBehavior = useFieldValidationBehavior();\n  // What the list is anchored to and takes its width from — see the note at\n  // the top of the file.\n  const boxRef = useRef<HTMLDivElement>(null);\n  return <RACSelect<T> isDisabled={isDisabled} isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(fieldStyles.root), props)}>\n      {selectContent(label, leadingIcon, floatingLabel, variant, description, error, options, container, boxRef)}\n    </RACSelect>;\n}\n\n// What the field draws, from React Aria's render state. Built by a call\n// 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\n// on its inputs.\n//\n// The state is read for the chevron alone — which way it points — since\n// everything else the box shows it reads from its own focus and validity.\nfunction selectContent(label: string, leadingIcon: ReactNode, floatingLabel: boolean, variant: FieldVariant, description: string | undefined, error: string | undefined, options: ReactNode, container: Element | undefined, boxRef: RefObject<HTMLDivElement | null>) {\n  return (state: SelectRenderProps) => <>\n      <FieldBox floatingLabel={floatingLabel}\n    // React Aria's `TextField` hands its group the field's disabled and\n    // invalid state through context; its `Select` does not, so the box is\n    // told outright or its label and its underline never turn.\n    isDisabled={state.isDisabled} isInvalid={state.isInvalid} label={label} leading={leadingIcon} ref={boxRef} trailing={chevronFor(state.isOpen)} trigger={TRIGGER} variant={variant}>\n        <SelectedValue isFocused={state.isFocused} />\n      </FieldBox>\n      <FieldMessage description={description} error={error} />\n      <RACPopover triggerRef={boxRef}\n    // oxlint-disable-next-line typescript/no-deprecated -- its replacement, UNSAFE_PortalProvider, is not exported by react-aria-components\n    UNSTABLE_portalContainer={container} {...stylex.props(overlay.popup, styles.list)}>\n        <ListBox>{options}</ListBox>\n      </RACPopover>\n    </>;\n}\n\n/**\n * What has been chosen, drawn on the value's line. The chrome's `FieldValue`\n * is the styled element and React Aria's `SelectValue` sits inside it, since\n * the wrapper is the box's flex item.\n */\nfunction SelectedValue({\n  isFocused\n}: {\n  isFocused: boolean;\n}) {\n  const state = useContext(SelectStateContext);\n  const isPlaceholder = (state?.selectionManager.selectedKeys.size ?? 0) === 0;\n  return <FieldValue isFocused={isFocused} isPlaceholder={isPlaceholder}>\n      <RACSelectValue />\n    </FieldValue>;\n}\nexport type { SelectProps };\nexport default Select;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ReactNode","RefObject","SelectProps","RACSelectProps","SelectRenderProps","stylex","useContext","useRef","Popover","RACPopover","Select","RACSelect","SelectValue","RACSelectValue","SelectStateContext","FieldVariant","FieldBox","FieldMessage","FieldTrigger","FieldValue","fieldStyles","invalidFrom","useFieldValidationBehavior","ChevronEndGlyph","mergeStatefulStyles","overlay","colors","motion","radii","spacing","ListBox","TRIGGER","chevronFor","isOpen","className","styles","list","kWkggS","kaIpWk","kzqmXN","kskxy","ks0D6T","k7Eaqz","kORKVm","k8WAf4","$$css","container","Element","description","error","floatingLabel","label","leadingIcon","options","variant","Omit","T","t0","$","_c","t1","isDisabled","t2","t3","props","undefined","validationBehavior","boxRef","T0","t4","t5","root","t6","selectContent","t7","HTMLDivElement","state","isInvalid","isFocused","popup","SelectedValue","isPlaceholder","selectionManager","selectedKeys","size","Symbol","for"],"sources":["../../../src/components/select/index.tsx"],"sourcesContent":["import type { ReactNode, RefObject } from 'react';\nimport type { SelectProps as RACSelectProps, SelectRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { useContext, useRef } from 'react';\nimport { Popover as RACPopover, Select as RACSelect, SelectValue as RACSelectValue, SelectStateContext } from 'react-aria-components';\nimport type { FieldVariant } from '../../field';\nimport { FieldBox, FieldMessage, FieldTrigger, FieldValue } from '../../field';\nimport { fieldStyles, invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { ChevronEndGlyph } from '../../glyphs';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport { overlay } from '../../styles/overlay';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, spacing } from '../../tokens/design.tokens.stylex';\nimport ListBox from '../list-box';\n\n// The menus page's exposed dropdown menu: a text field that opens a list\n// rather than taking a keystroke. Everything above the list is the field\n// chrome in `src/field` — the same box, label, supporting line and error\n// treatment every other field draws — and the list is ListBox on the shared\n// overlay surface. What is here is React Aria's `Select` around the two, and\n// the three things that are this component's own.\n//\n// **The whole box opens the list.** The chrome's `FieldTrigger` covers the\n// box rather than sitting on the value's line, so the padding, the label and\n// the icons all open it, which is what the page draws and what a native\n// select does. It draws nothing itself: the box already carries the fill,\n// the underline and the focus indicator.\n//\n// **The chevron turns.** The page's trailing icon points down while the list\n// is closed and up while it is open. React Aria reports which through the\n// select's render state, so it is drawn from that rather than swapped for a\n// second glyph.\n//\n// **The list is the field's width.** The page draws it under the field and\n// as wide as it, which React Aria reports as `--trigger-width` — of whatever\n// it is anchored to. Left alone that is the button, which fills the box's\n// value column rather than the box, so the list came out narrower than the\n// field by the icons either side of it. Pointing the popover's `triggerRef`\n// at the box is what makes the two agree. The overlay's own 112 to 280 range\n// is a menu opened from a button rather than from a field, so it goes.\n//\n// A select's value is chosen rather than typed, which the chrome had no\n// notion of until this component: `useFieldPopulated` now reads the select's\n// own state, so the floating label floats once something is chosen.\n\n// Hoisted, and the chevron built by a call, so neither is a new element on\n// every render — which is what react-perf's jsx-no-jsx-as-prop is after.\nconst TRIGGER = <FieldTrigger />;\nfunction chevronFor(isOpen: boolean) {\n  return <ChevronEndGlyph {...{\n    0: {\n      className: \"xxk0z11 xvy4d1p x1iffjtl xkzkux9 x11xpdln xpc4ca7\"\n    },\n    1: {\n      className: \"xxk0z11 xvy4d1p xkzkux9 x11xpdln xpc4ca7 x9tu13d\"\n    }\n  }[!!isOpen << 0]} />;\n}\nconst styles = {\n  list: {\n    kWkggS: \"x1vnz5z6\",\n    kaIpWk: \"x1tfhd1\",\n    kzqmXN: \"xlvufjm\",\n    kskxy: \"xedcshv\",\n    ks0D6T: \"x1x1rfll\",\n    k7Eaqz: \"xeuugli\",\n    kORKVm: \"x1odjw0f\",\n    k8WAf4: \"x1cmllll\",\n    $$css: true\n  }\n};\ntype SelectProps<T extends object = object> = {\n  /**\n   * Where to portal the list. Defaults to the end of `<body>`, which is\n   * right for an app that sets its StyleX theme on `:root`. An app that\n   * scopes the theme to a subtree has to point this at an element inside it,\n   * or the list renders outside the theme and falls back to the tokens'\n   * `prefers-color-scheme` default.\n   */\n  container?: Element;\n  /**\n   * A hint shown under the field. Replaced by `error` when there is one, so\n   * the two never stack.\n   */\n  description?: string;\n  /**\n   * The problem with the current value, in words. Its presence is what puts\n   * the field in its error state — the message, the red underline, and\n   * `aria-invalid` all follow from it.\n   */\n  error?: string;\n  /**\n   * Whether the label sits in the empty box and floats to the top once the\n   * field is focused or something is chosen. `false` keeps it small at the\n   * top in every state.\n   * @default true\n   */\n  floatingLabel?: boolean;\n  /**\n   * What the field is for. Required rather than optional: a select with no\n   * label is a box a screen reader cannot name.\n   */\n  label: string;\n  /**\n   * An icon at the start of the box, before the label and the value: the\n   * page's 24dp leading icon, in the muted role.\n   */\n  leadingIcon?: ReactNode;\n  /**\n   * The options. `ListBox.Item` for each, and `ListBox.Section` to group\n   * them — the list inside is a ListBox, and takes everything one does.\n   */\n  options?: ReactNode;\n  /**\n   * The filled box, or the outlined one, as the text fields page draws them.\n   * @default 'filled'\n   */\n  variant?: FieldVariant;\n} & Omit<RACSelectProps<T>, 'children' | 'defaultSelectedKey' | 'isInvalid' | 'onSelectionChange' | 'selectedKey' | 'validationBehavior'>;\n\n/**\n * A labelled field that opens a list to choose from. Its value is React\n * Aria's: pass `value` with `onChange` to control it, or `defaultValue` to\n * let it keep its own. The value is an option's `id`, so give every option\n * one. React Aria's older `selectedKey` names are deprecated and are left\n * out of this component's props rather than passed through.\n *\n * ```tsx\n * <Select\n *   label=\"Label\"\n *   options={\n *     <>\n *       <ListBox.Item id=\"first\">First item</ListBox.Item>\n *       <ListBox.Item id=\"second\">Second item</ListBox.Item>\n *     </>\n *   }\n * />\n * ```\n *\n * The box, label, supporting line and error are the field chrome in\n * `src/field`, shared with every other field; the list is ListBox on the\n * overlay surface every anchored panel here draws.\n *\n * The call site's `className` and `style` land on the field as a whole,\n * which is the element a layout positions.\n */\nfunction Select<T extends object = object>({\n  container,\n  description,\n  error,\n  floatingLabel = true,\n  isDisabled = false,\n  label,\n  leadingIcon,\n  options,\n  variant = 'filled',\n  ...props\n}: SelectProps<T>) {\n  const validationBehavior = useFieldValidationBehavior();\n  // What the list is anchored to and takes its width from — see the note at\n  // the top of the file.\n  const boxRef = useRef<HTMLDivElement>(null);\n  return <RACSelect<T> isDisabled={isDisabled} isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(fieldStyles.root), props)}>\n      {selectContent(label, leadingIcon, floatingLabel, variant, description, error, options, container, boxRef)}\n    </RACSelect>;\n}\n\n// What the field draws, from React Aria's render state. Built by a call\n// 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\n// on its inputs.\n//\n// The state is read for the chevron alone — which way it points — since\n// everything else the box shows it reads from its own focus and validity.\nfunction selectContent(label: string, leadingIcon: ReactNode, floatingLabel: boolean, variant: FieldVariant, description: string | undefined, error: string | undefined, options: ReactNode, container: Element | undefined, boxRef: RefObject<HTMLDivElement | null>) {\n  return (state: SelectRenderProps) => <>\n      <FieldBox floatingLabel={floatingLabel}\n    // React Aria's `TextField` hands its group the field's disabled and\n    // invalid state through context; its `Select` does not, so the box is\n    // told outright or its label and its underline never turn.\n    isDisabled={state.isDisabled} isInvalid={state.isInvalid} label={label} leading={leadingIcon} ref={boxRef} trailing={chevronFor(state.isOpen)} trigger={TRIGGER} variant={variant}>\n        <SelectedValue isFocused={state.isFocused} />\n      </FieldBox>\n      <FieldMessage description={description} error={error} />\n      <RACPopover triggerRef={boxRef}\n    // oxlint-disable-next-line typescript/no-deprecated -- its replacement, UNSAFE_PortalProvider, is not exported by react-aria-components\n    UNSTABLE_portalContainer={container} {...stylex.props(overlay.popup, styles.list)}>\n        <ListBox>{options}</ListBox>\n      </RACPopover>\n    </>;\n}\n\n/**\n * What has been chosen, drawn on the value's line. The chrome's `FieldValue`\n * is the styled element and React Aria's `SelectValue` sits inside it, since\n * the wrapper is the box's flex item.\n */\nfunction SelectedValue({\n  isFocused\n}: {\n  isFocused: boolean;\n}) {\n  const state = useContext(SelectStateContext);\n  const isPlaceholder = (state?.selectionManager.selectedKeys.size ?? 0) === 0;\n  return <FieldValue isFocused={isFocused} isPlaceholder={isPlaceholder}>\n      <RACSelectValue />\n    </FieldValue>;\n}\nexport type { SelectProps };\nexport default Select;"],"mappings":"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"}

package/dist/field/styles.js

@@ -1,4 +1,7 @@
+import { spacing, typography } from "../tokens/design.tokens.stylex.js";
 //#region src/field/styles.ts
+`${spacing.sm}${typography.bodySmallLineHeight}${typography.bodyLargeLineHeight}`;
+`${spacing.lg}${typography.bodyLargeLineHeight}`;
 const fieldChromeStyles = {
 	affix: {
 		kmuXW: "x2lah0s",
@@ -30,7 +33,7 @@ const fieldChromeStyles = {
 	box: {
 		kGNEyG: "x1cy8zhl",
 		kWkggS: "x1rrhr5q",
-		kZKoxP: "xnnlda6",
+		kZKoxP: "x4v968r",
 		kfdmCh: "xe3zi7u",
 		kt9PQ7: "x15anc7y",
 		kT0f0o: "x16uus16",
@@ -77,7 +80,7 @@ const fieldChromeStyles = {
 		kGuDYH: "x52kfa xys1t9b x1848etk",
 		k63SB2: "xz4f7ai xn9xqko x1c52epr",
 		kb6lSQ: "x19wmx12 x1t00fh7 x1qn8t5l",
-		kLWn49: "xsv50tp x1f5c3pk x181fmp8",
+		kLWn49: "xsv50tp x1f5c3pk x1mv3dpe",
 		$$css: true
 	},
 	boxLabel: {
@@ -109,12 +112,13 @@ const fieldChromeStyles = {
 	},
 	boxMultiline: {
 		kZKoxP: "xt7dq6l",
-		kAzted: "xbktkl8",
+		kAzted: "x9ep9ug",
 		kGO01o: "xqf7pud",
 		$$css: true
 	},
 	boxOutlined: {
 		kWkggS: "xjbqb8w",
+		kZKoxP: "xnqhc4v",
 		kfdmCh: "xs07zst",
 		kT0f0o: "x4gcak0",
 		kVL7Gh: "xqs30sb",
@@ -136,7 +140,7 @@ const fieldChromeStyles = {
 		$$css: true
 	},
 	boxOutlinedFloating: {
-		kLWn49: "xsv50tp x1f5c3pk xay82u3",
+		kLWn49: "xsv50tp x1f5c3pk x1rzm7h7",
 		$$css: true
 	},
 	boxTrailing: {

package/dist/field/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","names":["stylex","colors","motion","radii","spacing","stateLayerOpacity","typography","FORCED_COLORS","fieldChromeStyles","affix","kmuXW","kMv6JI","kGuDYH","k63SB2","kb6lSQ","kLWn49","kIyJzY","k1ekBW","kAMwcw","khDVqt","$$css","affixLine","kGNEyG","k1xSpc","kOIVth","autosize","autosizeCell","kJuA4N","box","kWkggS","kZKoxP","kfdmCh","kt9PQ7","kT0f0o","kVL7Gh","kfmiAY","krdFHd","kGVxlE","kB7OPa","kjBf7l","kInvED","k3XXqK","kMeerF","kGO01o","kLKAdn","kg3NbH","kVAEAm","boxDisabled","kL6WhQ","boxError","boxFixed","boxFloating","boxLabel","k87sOh","kLqNvP","boxLabelFloated","boxLabelOutlined","boxLabelOutlinedFloated","boxLeading","kZCmMZ","boxMultiline","kAzted","boxOutlined","kMwMTN","boxOutlinedDisabled","boxOutlinedError","boxOutlinedFloating","boxTrailing","kwRFfy","column","kzQI83","k7Eaqz","columnDisabled","columnDisabledFloating","columnFloating","counter","kcqcaj","keTefX","icon","kSGwAc","kjj79g","keoZOQ","iconDisabled","iconError","input","k8Qsv1","kMzoRj","kzqmXN","kmVPX3","inputDisabled","inputUnderFloatingLabel","inputUnderLabel","label","labelDisabled","labelError","labelFocused","message","kqGvvJ","messageError","messageInset","kUOVxO","messageLine","numeric","outline","kVAM5u","kaIpWk","ksu8eU","kpwlN0","kogj98","k8WAf4","kfzvcC","outlineFocused","outlineLeading","outlineNotch","ks0D6T","kVQacm","k33iCy","outlineNotchOpen","replica","kHjlTd","textArea","kHenm0","textAreaAutosize","trigger","kkrTdU","value","kg5iWk","valuePlaceholder","valuePlaceholderHidden","groupStyles","root","kXwgrk"],"sources":["../../src/field/styles.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport '../tokens/design.tokens.stylex';\nimport { colors, motion, radii, spacing, stateLayerOpacity, typography } from '../tokens/design.tokens.stylex';\n\n// Windows High Contrast and the rest of the forced-colours modes. Declared\n// here rather than imported from src/styles/ripple.ts, which spells the same\n// query: the StyleX compiler resolves a constant across files only out of a\n// `.stylex.ts` module, and the one this repository has is generated from the\n// design tokens, where a user-preference query does not belong beside the\n// window size classes.\nconst FORCED_COLORS = '@media (forced-colors: active)';\n\n// The chrome's styles. Apart from the parts in ./index.tsx so that file\n// exports components alone, which is what keeps fast refresh working for it —\n// the same reason ./root.ts gives for the root style beside it.\n//\n// The focus indicator is an inset box-shadow on the bottom edge rather than a\n// border that thickens. A real border going 1px -> 2px on focus grows the\n// box, which pushes every sibling below it down by a pixel — so a form\n// twitches each time focus moves between its fields. A shadow is drawn inside\n// the box and changes nothing about its size.\n//\n// The label floats, as the text fields page draws it: body-large and centred\n// in an empty, unfocused box, body-small at the top once the field is focused\n// or holds a value. `floatingLabel={false}` keeps it small at the top in\n// every state instead.\n//\n// Where the label sits depends on the box's state, and a child cannot select\n// on its parent's state while the box can select on its own. So the label's\n// type is set on the box and inherited: the box changes the font size and\n// line height it hands down when focus is within it, or when its control\n// shows something other than its placeholder, and the label transitions\n// between the two. Resting, the line is the box less its padding, which is\n// what centres the label without a position to move — the move to the top is\n// a change of type alone. The control sets its own type, so none of this\n// reaches it.\n//\n// The label's colour follows the control's focus the same way: the box is\n// React Aria's Group, which reports focus within it as render state, and the\n// label takes `labelFocused` from that.\n//\n// The box is a row: an icon slot at either end, if the field has one, with\n// the label and control between them. The page gives the icons 24dp, 12dp\n// from the box's edge and 16dp from the text, centred in the box's height;\n// the slot cancels the box's top padding and stretches to its full height,\n// so it centres whatever it holds — a 24dp icon, or an icon button around\n// one. The label and the control sit in a column of their own, which is\n// what the label is positioned against, so it moves past a leading icon\n// with the text.\n//\n// A prefix or suffix sits on the control's line, in the control's type and\n// the muted role, and shows only while the field is focused or holds a\n// value, as the placeholder does — at rest the label is where it would be.\n// It is the column's colour it takes, inherited, since the column can\n// select on its own focus and content and the affix cannot select on\n// either.\n//\n// The outlined variant is the page's outlined text field: no fill, a 1dp\n// outline in the outline role with 4dp corners all round, 2dp and primary\n// while focused, on surface while hovered, the error role with an error,\n// and the label cutting the outline once it floats, with the page's 4dp\n// beside it. The value is centred, 16dp from the top and bottom, and the\n// label rests on its line and moves up onto the outline — a move, where the\n// filled label only changes type.\n//\n// The outline is a fieldset laid over the box: a browser draws a fieldset's\n// border around its legend, so a legend holding a copy of the label, in the\n// label's floated type, is what cuts the outline to the label's width with\n// nothing measured. Empty, it cuts nothing, which is the closed notch.\nconst fieldChromeStyles = {\n  affix: {\n    kmuXW: \"x2lah0s\",\n    kMv6JI: \"x16svsjw\",\n    kGuDYH: \"x1848etk\",\n    k63SB2: \"x1c52epr\",\n    kb6lSQ: \"x1qn8t5l\",\n    kLWn49: \"xh7dzej\",\n    kIyJzY: \"xkzkux9\",\n    k1ekBW: \"xt3l3uh\",\n    kAMwcw: \"xpc4ca7\",\n    khDVqt: \"xuxw1ft\",\n    $$css: true\n  },\n  affixLine: {\n    kGNEyG: \"x1pha0wt\",\n    k1xSpc: \"x78zum5\",\n    kOIVth: \"x14qo01y\",\n    $$css: true\n  },\n  autosize: {\n    k1xSpc: \"xrvj5dj\",\n    $$css: true\n  },\n  autosizeCell: {\n    kJuA4N: \"x1b1wf8y\",\n    $$css: true\n  },\n  box: {\n    kGNEyG: \"x1cy8zhl\",\n    kWkggS: \"x1rrhr5q\",\n    kZKoxP: \"xnnlda6\",\n    kfdmCh: \"xe3zi7u\",\n    kt9PQ7: \"x15anc7y\",\n    kT0f0o: \"x16uus16\",\n    kVL7Gh: \"xbiv7yw\",\n    kfmiAY: \"xirz1nw\",\n    krdFHd: \"xzcck0f\",\n    kGVxlE: \"x89kqus x18rfq6m\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kOIVth: \"xxj4525\",\n    kjBf7l: \"x1x84bn5\",\n    kInvED: \"x12iqurn\",\n    k3XXqK: \"xi9ts3s\",\n    kMeerF: \"x1jrff4x\",\n    kGO01o: \"x18d9i69\",\n    kLKAdn: \"xi7mcox\",\n    kg3NbH: \"x790zyz\",\n    kVAEAm: \"x1n2onr6\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"xkdsq27\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  boxDisabled: {\n    kWkggS: \"xepofeg\",\n    kL6WhQ: \"x1fxan2a\",\n    kGVxlE: \"x1pqbjc1\",\n    $$css: true\n  },\n  boxError: {\n    kGVxlE: \"x1lxxh4i x1d6xoej\",\n    $$css: true\n  },\n  boxFixed: {\n    kMv6JI: \"xp6n8n2\",\n    kGuDYH: \"xkucv67\",\n    k63SB2: \"x14hhc5u\",\n    kb6lSQ: \"x12utw95\",\n    kLWn49: \"xvzb9hk\",\n    $$css: true\n  },\n  boxFloating: {\n    kMv6JI: \"x1ps135g xnc7ww3 x16svsjw\",\n    kGuDYH: \"x52kfa xys1t9b x1848etk\",\n    k63SB2: \"xz4f7ai xn9xqko x1c52epr\",\n    kb6lSQ: \"x19wmx12 x1t00fh7 x1qn8t5l\",\n    kLWn49: \"xsv50tp x1f5c3pk x181fmp8\",\n    $$css: true\n  },\n  boxLabel: {\n    k87sOh: \"x13vifvy\",\n    kLqNvP: \"x1o0tod\",\n    kVAEAm: \"x10l6tqk\",\n    $$css: true\n  },\n  boxLabelFloated: {\n    kMv6JI: \"x1yicsit\",\n    kGuDYH: \"x1b35g6e\",\n    k63SB2: \"x9d6959\",\n    kb6lSQ: \"xwth0xh\",\n    kLWn49: \"xybisxh\",\n    $$css: true\n  },\n  boxLabelOutlined: {\n    kLqNvP: \"x10k232c\",\n    kg3NbH: \"ximhkdq\",\n    $$css: true\n  },\n  boxLabelOutlinedFloated: {\n    k87sOh: \"x1qjp6zz\",\n    $$css: true\n  },\n  boxLeading: {\n    kZCmMZ: \"xwde665\",\n    $$css: true\n  },\n  boxMultiline: {\n    kZKoxP: \"xt7dq6l\",\n    kAzted: \"xbktkl8\",\n    kGO01o: \"xqf7pud\",\n    $$css: true\n  },\n  boxOutlined: {\n    kWkggS: \"xjbqb8w\",\n    kfdmCh: \"xs07zst\",\n    kT0f0o: \"x4gcak0\",\n    kVL7Gh: \"xqs30sb\",\n    kGVxlE: \"x1gnnqk1\",\n    kMwMTN: \"x158cnre x1igw6b7 x1sa41d3\",\n    kGO01o: \"xzfxn0k\",\n    kLKAdn: \"x1clyivc\",\n    kVAEAm: \"x1n2onr6\",\n    $$css: true\n  },\n  boxOutlinedDisabled: {\n    kWkggS: \"xjbqb8w\",\n    kGVxlE: \"x1gnnqk1\",\n    kMwMTN: \"x1ldq0ta x1bhcspo\",\n    $$css: true\n  },\n  boxOutlinedError: {\n    kMwMTN: \"x12voer2 x1h298ve x4ii1qj\",\n    $$css: true\n  },\n  boxOutlinedFloating: {\n    kLWn49: \"xsv50tp x1f5c3pk xay82u3\",\n    $$css: true\n  },\n  boxTrailing: {\n    kwRFfy: \"xk163s\",\n    $$css: true\n  },\n  column: {\n    kMwMTN: \"x1w5n3ug\",\n    kzQI83: \"x1iyjqo2\",\n    k7Eaqz: \"xeuugli\",\n    kVAEAm: \"x1n2onr6\",\n    $$css: true\n  },\n  columnDisabled: {\n    kMwMTN: \"x1xj74d8\",\n    $$css: true\n  },\n  columnDisabledFloating: {\n    kMwMTN: \"xspc5gk x19co3pv\",\n    $$css: true\n  },\n  columnFloating: {\n    kMwMTN: \"x1dfuzvz x6phwhp x19co3pv\",\n    $$css: true\n  },\n  counter: {\n    kmuXW: \"x2lah0s\",\n    kcqcaj: \"xss6m8b\",\n    keTefX: \"xvc5jky\",\n    khDVqt: \"xuxw1ft\",\n    $$css: true\n  },\n  icon: {\n    kGNEyG: \"x6s0dn4\",\n    kSGwAc: \"xkh2ocl\",\n    kMwMTN: \"x1w5n3ug\",\n    k1xSpc: \"x78zum5\",\n    kmuXW: \"x2lah0s\",\n    kGuDYH: \"x1pvqxga\",\n    kjj79g: \"xl56j7k\",\n    keoZOQ: \"x1motrhk\",\n    kIyJzY: \"xkzkux9\",\n    k1ekBW: \"xt3l3uh\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  iconDisabled: {\n    kMwMTN: \"x1xj74d8\",\n    $$css: true\n  },\n  iconError: {\n    kMwMTN: \"x4ii1qj\",\n    $$css: true\n  },\n  input: {\n    k8Qsv1: \"x1hgeflb\",\n    kWkggS: \"xjbqb8w\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x139gbkf\",\n    kMv6JI: \"x16svsjw\",\n    kGuDYH: \"x1848etk\",\n    k63SB2: \"x1c52epr\",\n    kzqmXN: \"xh8yej3\",\n    kb6lSQ: \"x1qn8t5l\",\n    kLWn49: \"xh7dzej\",\n    k3XXqK: \"x1t137rt\",\n    kmVPX3: \"x1717udv\",\n    $$css: true\n  },\n  inputDisabled: {\n    k8Qsv1: \"x7ip5l3\",\n    kMwMTN: \"x1xj74d8\",\n    $$css: true\n  },\n  inputUnderFloatingLabel: {\n    k8Qsv1: \"x1mvm7v4 xxqzaim\",\n    $$css: true\n  },\n  inputUnderLabel: {\n    keoZOQ: \"xwuztrq\",\n    $$css: true\n  },\n  label: {\n    kMwMTN: \"x1w5n3ug\",\n    kIyJzY: \"xkzkux9\",\n    k1ekBW: \"xixa3zk\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  labelDisabled: {\n    kMwMTN: \"x1xj74d8\",\n    $$css: true\n  },\n  labelError: {\n    kMwMTN: \"x4ii1qj\",\n    $$css: true\n  },\n  labelFocused: {\n    kMwMTN: \"x1mxwv8y\",\n    $$css: true\n  },\n  message: {\n    kMwMTN: \"x1w5n3ug\",\n    kMv6JI: \"x1yicsit\",\n    kGuDYH: \"x1b35g6e\",\n    k63SB2: \"x9d6959\",\n    kb6lSQ: \"xwth0xh\",\n    kLWn49: \"xybisxh\",\n    kqGvvJ: \"x10im51j\",\n    $$css: true\n  },\n  messageError: {\n    kMwMTN: \"x4ii1qj\",\n    $$css: true\n  },\n  messageInset: {\n    kUOVxO: \"xboopgi\",\n    $$css: true\n  },\n  messageLine: {\n    kGNEyG: \"x1pha0wt\",\n    k1xSpc: \"x78zum5\",\n    kOIVth: \"xxj4525\",\n    keoZOQ: \"x1y88zpp\",\n    kAzted: \"x17jz683\",\n    $$css: true\n  },\n  numeric: {\n    kMv6JI: \"xbppi91\",\n    kcqcaj: \"xss6m8b\",\n    $$css: true\n  },\n  outline: {\n    kVAM5u: \"x1r7ld26\",\n    kaIpWk: \"x1tfhd1\",\n    ksu8eU: \"x1y0btm7\",\n    kMzoRj: \"xmkeg23\",\n    kB7OPa: \"x9f619\",\n    kMv6JI: \"x1yicsit\",\n    kGuDYH: \"x1b35g6e\",\n    k63SB2: \"x9d6959\",\n    kpwlN0: \"x10a8y8t\",\n    kb6lSQ: \"xwth0xh\",\n    kogj98: \"x1ghz6dp\",\n    k7Eaqz: \"xeuugli\",\n    k8WAf4: \"xt970qd\",\n    kg3NbH: \"x1mhv0kc\",\n    kfzvcC: \"x47corl\",\n    kVAEAm: \"x10l6tqk\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"x1aqzbqr\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  outlineFocused: {\n    kMzoRj: \"xdh2fpr\",\n    $$css: true\n  },\n  outlineLeading: {\n    kZCmMZ: \"x167ah0f\",\n    $$css: true\n  },\n  outlineNotch: {\n    kZKoxP: \"xqtp20y\",\n    kLWn49: \"x14ju556\",\n    ks0D6T: \"x193iq5w\",\n    kVQacm: \"xb3r6kr\",\n    kmVPX3: \"x1717udv\",\n    k33iCy: \"xlshs6z\",\n    khDVqt: \"xuxw1ft\",\n    $$css: true\n  },\n  outlineNotchOpen: {\n    kg3NbH: \"ximhkdq\",\n    $$css: true\n  },\n  replica: {\n    kHjlTd: \"x1mzt3pk\",\n    k33iCy: \"xlshs6z\",\n    khDVqt: \"x126k92a\",\n    $$css: true\n  },\n  textArea: {\n    k1xSpc: \"x1lliihq\",\n    kVQacm: \"xysyzu8\",\n    kHenm0: \"xtt52l0\",\n    $$css: true\n  },\n  textAreaAutosize: {\n    kVQacm: \"xb3r6kr\",\n    $$css: true\n  },\n  trigger: {\n    kWkggS: \"xjbqb8w\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kkrTdU: \"x1ypdohk\",\n    kpwlN0: \"x10a8y8t\",\n    k3XXqK: \"x1t137rt\",\n    kmVPX3: \"x1717udv\",\n    kVAEAm: \"x10l6tqk\",\n    $$css: true\n  },\n  value: {\n    kGNEyG: \"x6s0dn4\",\n    k1xSpc: \"x78zum5\",\n    kVQacm: \"xb3r6kr\",\n    kg5iWk: \"xlyipyv\",\n    khDVqt: \"xuxw1ft\",\n    $$css: true\n  },\n  valuePlaceholder: {\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  },\n  valuePlaceholderHidden: {\n    kMwMTN: \"x19co3pv\",\n    $$css: true\n  }\n};\n\n// The chrome a label sitting above a group takes, rather than inside a box.\n// CheckboxGroup, ChipGroup, RadioGroup, Slider and ColorSlider each wrote both\n// of these out: the type override on the label, and the column its label and\n// control sit in.\n//\n// The label is label-large, the role a field's label takes at rest, since a\n// group has no box to float it in.\n//\n// The two sliders compose an inline size of their own on the root, since a\n// slider fills the width it is given where a group of controls does not.\nconst groupStyles = {\n  label: {\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    $$css: true\n  },\n  root: {\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kXwgrk: \"xdt5ytf\",\n    kOIVth: \"xzoy561\",\n    $$css: true\n  }\n};\nexport { fieldChromeStyles, groupStyles };"],"mappings":"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"}
+{"version":3,"file":"styles.js","names":["stylex","colors","motion","radii","spacing","stateLayerOpacity","typography","FORCED_COLORS","BOX_BLOCK_SIZE","sm","bodySmallLineHeight","bodyLargeLineHeight","BOX_OUTLINED_BLOCK_SIZE","lg","fieldChromeStyles","affix","kmuXW","kMv6JI","kGuDYH","k63SB2","kb6lSQ","kLWn49","kIyJzY","k1ekBW","kAMwcw","khDVqt","$$css","affixLine","kGNEyG","k1xSpc","kOIVth","autosize","autosizeCell","kJuA4N","box","kWkggS","kZKoxP","kfdmCh","kt9PQ7","kT0f0o","kVL7Gh","kfmiAY","krdFHd","kGVxlE","kB7OPa","kjBf7l","kInvED","k3XXqK","kMeerF","kGO01o","kLKAdn","kg3NbH","kVAEAm","boxDisabled","kL6WhQ","boxError","boxFixed","boxFloating","boxLabel","k87sOh","kLqNvP","boxLabelFloated","boxLabelOutlined","boxLabelOutlinedFloated","boxLeading","kZCmMZ","boxMultiline","kAzted","boxOutlined","kMwMTN","boxOutlinedDisabled","boxOutlinedError","boxOutlinedFloating","boxTrailing","kwRFfy","column","kzQI83","k7Eaqz","columnDisabled","columnDisabledFloating","columnFloating","counter","kcqcaj","keTefX","icon","kSGwAc","kjj79g","keoZOQ","iconDisabled","iconError","input","k8Qsv1","kMzoRj","kzqmXN","kmVPX3","inputDisabled","inputUnderFloatingLabel","inputUnderLabel","label","labelDisabled","labelError","labelFocused","message","kqGvvJ","messageError","messageInset","kUOVxO","messageLine","numeric","outline","kVAM5u","kaIpWk","ksu8eU","kpwlN0","kogj98","k8WAf4","kfzvcC","outlineFocused","outlineLeading","outlineNotch","ks0D6T","kVQacm","k33iCy","outlineNotchOpen","replica","kHjlTd","textArea","kHenm0","textAreaAutosize","trigger","kkrTdU","value","kg5iWk","valuePlaceholder","valuePlaceholderHidden","groupStyles","root","kXwgrk"],"sources":["../../src/field/styles.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport '../tokens/design.tokens.stylex';\nimport { colors, motion, radii, spacing, stateLayerOpacity, typography } from '../tokens/design.tokens.stylex';\n\n// Windows High Contrast and the rest of the forced-colours modes. Declared\n// here rather than imported from src/styles/ripple.ts, which spells the same\n// query: the StyleX compiler resolves a constant across files only out of a\n// `.stylex.ts` module, and the one this repository has is generated from the\n// design tokens, where a user-preference query does not belong beside the\n// window size classes.\nconst FORCED_COLORS = '@media (forced-colors: active)';\n\n// What the box is tall enough for, rather than the 56dp the text fields page\n// draws it at. The page's number is the sum of these under the default\n// tokens, and stating it instead made the box right only there: a theme with\n// a longer body line — `Editorial` in src/theming/themes.ts, at body-small\n// 20 and body-large 28 on a 10dp `sm` — needs 68, and in a fixed 56 the\n// value's line ran past the underline with nothing left beneath it.\n//\n// The filled box holds its padding twice over, the floated label's line and\n// the control's; the outlined box holds its own padding twice and the\n// control's line alone, since its label sits on the outline rather than\n// above the value. The two agree at 56 under the default tokens, which is\n// what keeps the default stories' snapshots where they are.\n//\n// The resting label's line is written against the same expressions below, so\n// one derivation feeds both the box and the label that centres in it.\nconst BOX_BLOCK_SIZE = `calc(2 * ${spacing.sm} + ${typography.bodySmallLineHeight} + ${typography.bodyLargeLineHeight})`;\nconst BOX_OUTLINED_BLOCK_SIZE = `calc(2 * ${spacing.lg} + ${typography.bodyLargeLineHeight})`;\n\n// The chrome's styles. Apart from the parts in ./index.tsx so that file\n// exports components alone, which is what keeps fast refresh working for it —\n// the same reason ./root.ts gives for the root style beside it.\n//\n// The focus indicator is an inset box-shadow on the bottom edge rather than a\n// border that thickens. A real border going 1px -> 2px on focus grows the\n// box, which pushes every sibling below it down by a pixel — so a form\n// twitches each time focus moves between its fields. A shadow is drawn inside\n// the box and changes nothing about its size.\n//\n// The label floats, as the text fields page draws it: body-large and centred\n// in an empty, unfocused box, body-small at the top once the field is focused\n// or holds a value. `floatingLabel={false}` keeps it small at the top in\n// every state instead.\n//\n// Where the label sits depends on the box's state, and a child cannot select\n// on its parent's state while the box can select on its own. So the label's\n// type is set on the box and inherited: the box changes the font size and\n// line height it hands down when focus is within it, or when its control\n// shows something other than its placeholder, and the label transitions\n// between the two. Resting, the line is the box less its padding, which is\n// what centres the label without a position to move — the move to the top is\n// a change of type alone. The control sets its own type, so none of this\n// reaches it.\n//\n// The label's colour follows the control's focus the same way: the box is\n// React Aria's Group, which reports focus within it as render state, and the\n// label takes `labelFocused` from that.\n//\n// The box is a row: an icon slot at either end, if the field has one, with\n// the label and control between them. The page gives the icons 24dp, 12dp\n// from the box's edge and 16dp from the text, centred in the box's height;\n// the slot cancels the box's top padding and stretches to its full height,\n// so it centres whatever it holds — a 24dp icon, or an icon button around\n// one. The label and the control sit in a column of their own, which is\n// what the label is positioned against, so it moves past a leading icon\n// with the text.\n//\n// A prefix or suffix sits on the control's line, in the control's type and\n// the muted role, and shows only while the field is focused or holds a\n// value, as the placeholder does — at rest the label is where it would be.\n// It is the column's colour it takes, inherited, since the column can\n// select on its own focus and content and the affix cannot select on\n// either.\n//\n// The outlined variant is the page's outlined text field: no fill, a 1dp\n// outline in the outline role with 4dp corners all round, 2dp and primary\n// while focused, on surface while hovered, the error role with an error,\n// and the label cutting the outline once it floats, with the page's 4dp\n// beside it. The value is centred, 16dp from the top and bottom, and the\n// label rests on its line and moves up onto the outline — a move, where the\n// filled label only changes type.\n//\n// The outline is a fieldset laid over the box: a browser draws a fieldset's\n// border around its legend, so a legend holding a copy of the label, in the\n// label's floated type, is what cuts the outline to the label's width with\n// nothing measured. Empty, it cuts nothing, which is the closed notch.\nconst fieldChromeStyles = {\n  affix: {\n    kmuXW: \"x2lah0s\",\n    kMv6JI: \"x16svsjw\",\n    kGuDYH: \"x1848etk\",\n    k63SB2: \"x1c52epr\",\n    kb6lSQ: \"x1qn8t5l\",\n    kLWn49: \"xh7dzej\",\n    kIyJzY: \"xkzkux9\",\n    k1ekBW: \"xt3l3uh\",\n    kAMwcw: \"xpc4ca7\",\n    khDVqt: \"xuxw1ft\",\n    $$css: true\n  },\n  affixLine: {\n    kGNEyG: \"x1pha0wt\",\n    k1xSpc: \"x78zum5\",\n    kOIVth: \"x14qo01y\",\n    $$css: true\n  },\n  autosize: {\n    k1xSpc: \"xrvj5dj\",\n    $$css: true\n  },\n  autosizeCell: {\n    kJuA4N: \"x1b1wf8y\",\n    $$css: true\n  },\n  box: {\n    kGNEyG: \"x1cy8zhl\",\n    kWkggS: \"x1rrhr5q\",\n    kZKoxP: \"x4v968r\",\n    kfdmCh: \"xe3zi7u\",\n    kt9PQ7: \"x15anc7y\",\n    kT0f0o: \"x16uus16\",\n    kVL7Gh: \"xbiv7yw\",\n    kfmiAY: \"xirz1nw\",\n    krdFHd: \"xzcck0f\",\n    kGVxlE: \"x89kqus x18rfq6m\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kOIVth: \"xxj4525\",\n    kjBf7l: \"x1x84bn5\",\n    kInvED: \"x12iqurn\",\n    k3XXqK: \"xi9ts3s\",\n    kMeerF: \"x1jrff4x\",\n    kGO01o: \"x18d9i69\",\n    kLKAdn: \"xi7mcox\",\n    kg3NbH: \"x790zyz\",\n    kVAEAm: \"x1n2onr6\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"xkdsq27\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  boxDisabled: {\n    kWkggS: \"xepofeg\",\n    kL6WhQ: \"x1fxan2a\",\n    kGVxlE: \"x1pqbjc1\",\n    $$css: true\n  },\n  boxError: {\n    kGVxlE: \"x1lxxh4i x1d6xoej\",\n    $$css: true\n  },\n  boxFixed: {\n    kMv6JI: \"xp6n8n2\",\n    kGuDYH: \"xkucv67\",\n    k63SB2: \"x14hhc5u\",\n    kb6lSQ: \"x12utw95\",\n    kLWn49: \"xvzb9hk\",\n    $$css: true\n  },\n  boxFloating: {\n    kMv6JI: \"x1ps135g xnc7ww3 x16svsjw\",\n    kGuDYH: \"x52kfa xys1t9b x1848etk\",\n    k63SB2: \"xz4f7ai xn9xqko x1c52epr\",\n    kb6lSQ: \"x19wmx12 x1t00fh7 x1qn8t5l\",\n    kLWn49: \"xsv50tp x1f5c3pk x1mv3dpe\",\n    $$css: true\n  },\n  boxLabel: {\n    k87sOh: \"x13vifvy\",\n    kLqNvP: \"x1o0tod\",\n    kVAEAm: \"x10l6tqk\",\n    $$css: true\n  },\n  boxLabelFloated: {\n    kMv6JI: \"x1yicsit\",\n    kGuDYH: \"x1b35g6e\",\n    k63SB2: \"x9d6959\",\n    kb6lSQ: \"xwth0xh\",\n    kLWn49: \"xybisxh\",\n    $$css: true\n  },\n  boxLabelOutlined: {\n    kLqNvP: \"x10k232c\",\n    kg3NbH: \"ximhkdq\",\n    $$css: true\n  },\n  boxLabelOutlinedFloated: {\n    k87sOh: \"x1qjp6zz\",\n    $$css: true\n  },\n  boxLeading: {\n    kZCmMZ: \"xwde665\",\n    $$css: true\n  },\n  boxMultiline: {\n    kZKoxP: \"xt7dq6l\",\n    kAzted: \"x9ep9ug\",\n    kGO01o: \"xqf7pud\",\n    $$css: true\n  },\n  boxOutlined: {\n    kWkggS: \"xjbqb8w\",\n    kZKoxP: \"xnqhc4v\",\n    kfdmCh: \"xs07zst\",\n    kT0f0o: \"x4gcak0\",\n    kVL7Gh: \"xqs30sb\",\n    kGVxlE: \"x1gnnqk1\",\n    kMwMTN: \"x158cnre x1igw6b7 x1sa41d3\",\n    kGO01o: \"xzfxn0k\",\n    kLKAdn: \"x1clyivc\",\n    kVAEAm: \"x1n2onr6\",\n    $$css: true\n  },\n  boxOutlinedDisabled: {\n    kWkggS: \"xjbqb8w\",\n    kGVxlE: \"x1gnnqk1\",\n    kMwMTN: \"x1ldq0ta x1bhcspo\",\n    $$css: true\n  },\n  boxOutlinedError: {\n    kMwMTN: \"x12voer2 x1h298ve x4ii1qj\",\n    $$css: true\n  },\n  boxOutlinedFloating: {\n    kLWn49: \"xsv50tp x1f5c3pk x1rzm7h7\",\n    $$css: true\n  },\n  boxTrailing: {\n    kwRFfy: \"xk163s\",\n    $$css: true\n  },\n  column: {\n    kMwMTN: \"x1w5n3ug\",\n    kzQI83: \"x1iyjqo2\",\n    k7Eaqz: \"xeuugli\",\n    kVAEAm: \"x1n2onr6\",\n    $$css: true\n  },\n  columnDisabled: {\n    kMwMTN: \"x1xj74d8\",\n    $$css: true\n  },\n  columnDisabledFloating: {\n    kMwMTN: \"xspc5gk x19co3pv\",\n    $$css: true\n  },\n  columnFloating: {\n    kMwMTN: \"x1dfuzvz x6phwhp x19co3pv\",\n    $$css: true\n  },\n  counter: {\n    kmuXW: \"x2lah0s\",\n    kcqcaj: \"xss6m8b\",\n    keTefX: \"xvc5jky\",\n    khDVqt: \"xuxw1ft\",\n    $$css: true\n  },\n  icon: {\n    kGNEyG: \"x6s0dn4\",\n    kSGwAc: \"xkh2ocl\",\n    kMwMTN: \"x1w5n3ug\",\n    k1xSpc: \"x78zum5\",\n    kmuXW: \"x2lah0s\",\n    kGuDYH: \"x1pvqxga\",\n    kjj79g: \"xl56j7k\",\n    keoZOQ: \"x1motrhk\",\n    kIyJzY: \"xkzkux9\",\n    k1ekBW: \"xt3l3uh\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  iconDisabled: {\n    kMwMTN: \"x1xj74d8\",\n    $$css: true\n  },\n  iconError: {\n    kMwMTN: \"x4ii1qj\",\n    $$css: true\n  },\n  input: {\n    k8Qsv1: \"x1hgeflb\",\n    kWkggS: \"xjbqb8w\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x139gbkf\",\n    kMv6JI: \"x16svsjw\",\n    kGuDYH: \"x1848etk\",\n    k63SB2: \"x1c52epr\",\n    kzqmXN: \"xh8yej3\",\n    kb6lSQ: \"x1qn8t5l\",\n    kLWn49: \"xh7dzej\",\n    k3XXqK: \"x1t137rt\",\n    kmVPX3: \"x1717udv\",\n    $$css: true\n  },\n  inputDisabled: {\n    k8Qsv1: \"x7ip5l3\",\n    kMwMTN: \"x1xj74d8\",\n    $$css: true\n  },\n  inputUnderFloatingLabel: {\n    k8Qsv1: \"x1mvm7v4 xxqzaim\",\n    $$css: true\n  },\n  inputUnderLabel: {\n    keoZOQ: \"xwuztrq\",\n    $$css: true\n  },\n  label: {\n    kMwMTN: \"x1w5n3ug\",\n    kIyJzY: \"xkzkux9\",\n    k1ekBW: \"xixa3zk\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  labelDisabled: {\n    kMwMTN: \"x1xj74d8\",\n    $$css: true\n  },\n  labelError: {\n    kMwMTN: \"x4ii1qj\",\n    $$css: true\n  },\n  labelFocused: {\n    kMwMTN: \"x1mxwv8y\",\n    $$css: true\n  },\n  message: {\n    kMwMTN: \"x1w5n3ug\",\n    kMv6JI: \"x1yicsit\",\n    kGuDYH: \"x1b35g6e\",\n    k63SB2: \"x9d6959\",\n    kb6lSQ: \"xwth0xh\",\n    kLWn49: \"xybisxh\",\n    kqGvvJ: \"x10im51j\",\n    $$css: true\n  },\n  messageError: {\n    kMwMTN: \"x4ii1qj\",\n    $$css: true\n  },\n  messageInset: {\n    kUOVxO: \"xboopgi\",\n    $$css: true\n  },\n  messageLine: {\n    kGNEyG: \"x1pha0wt\",\n    k1xSpc: \"x78zum5\",\n    kOIVth: \"xxj4525\",\n    keoZOQ: \"x1y88zpp\",\n    kAzted: \"x17jz683\",\n    $$css: true\n  },\n  numeric: {\n    kMv6JI: \"xbppi91\",\n    kcqcaj: \"xss6m8b\",\n    $$css: true\n  },\n  outline: {\n    kVAM5u: \"x1r7ld26\",\n    kaIpWk: \"x1tfhd1\",\n    ksu8eU: \"x1y0btm7\",\n    kMzoRj: \"xmkeg23\",\n    kB7OPa: \"x9f619\",\n    kMv6JI: \"x1yicsit\",\n    kGuDYH: \"x1b35g6e\",\n    k63SB2: \"x9d6959\",\n    kpwlN0: \"x10a8y8t\",\n    kb6lSQ: \"xwth0xh\",\n    kogj98: \"x1ghz6dp\",\n    k7Eaqz: \"xeuugli\",\n    k8WAf4: \"xt970qd\",\n    kg3NbH: \"x1mhv0kc\",\n    kfzvcC: \"x47corl\",\n    kVAEAm: \"x10l6tqk\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"x1aqzbqr\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  outlineFocused: {\n    kMzoRj: \"xdh2fpr\",\n    $$css: true\n  },\n  outlineLeading: {\n    kZCmMZ: \"x167ah0f\",\n    $$css: true\n  },\n  outlineNotch: {\n    kZKoxP: \"xqtp20y\",\n    kLWn49: \"x14ju556\",\n    ks0D6T: \"x193iq5w\",\n    kVQacm: \"xb3r6kr\",\n    kmVPX3: \"x1717udv\",\n    k33iCy: \"xlshs6z\",\n    khDVqt: \"xuxw1ft\",\n    $$css: true\n  },\n  outlineNotchOpen: {\n    kg3NbH: \"ximhkdq\",\n    $$css: true\n  },\n  replica: {\n    kHjlTd: \"x1mzt3pk\",\n    k33iCy: \"xlshs6z\",\n    khDVqt: \"x126k92a\",\n    $$css: true\n  },\n  textArea: {\n    k1xSpc: \"x1lliihq\",\n    kVQacm: \"xysyzu8\",\n    kHenm0: \"xtt52l0\",\n    $$css: true\n  },\n  textAreaAutosize: {\n    kVQacm: \"xb3r6kr\",\n    $$css: true\n  },\n  trigger: {\n    kWkggS: \"xjbqb8w\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kkrTdU: \"x1ypdohk\",\n    kpwlN0: \"x10a8y8t\",\n    k3XXqK: \"x1t137rt\",\n    kmVPX3: \"x1717udv\",\n    kVAEAm: \"x10l6tqk\",\n    $$css: true\n  },\n  value: {\n    kGNEyG: \"x6s0dn4\",\n    k1xSpc: \"x78zum5\",\n    kVQacm: \"xb3r6kr\",\n    kg5iWk: \"xlyipyv\",\n    khDVqt: \"xuxw1ft\",\n    $$css: true\n  },\n  valuePlaceholder: {\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  },\n  valuePlaceholderHidden: {\n    kMwMTN: \"x19co3pv\",\n    $$css: true\n  }\n};\n\n// The chrome a label sitting above a group takes, rather than inside a box.\n// CheckboxGroup, ChipGroup, RadioGroup, Slider and ColorSlider each wrote both\n// of these out: the type override on the label, and the column its label and\n// control sit in.\n//\n// The label is label-large, the role a field's label takes at rest, since a\n// group has no box to float it in.\n//\n// The two sliders compose an inline size of their own on the root, since a\n// slider fills the width it is given where a group of controls does not.\nconst groupStyles = {\n  label: {\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    $$css: true\n  },\n  root: {\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kXwgrk: \"xdt5ytf\",\n    kOIVth: \"xzoy561\",\n    $$css: true\n  }\n};\nexport { fieldChromeStyles, groupStyles };"],"mappings":"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"}

package/dist/styles.css

@@ -1467,12 +1467,12 @@
     line-height: 32px;
   }
 
-  .xay82u3 {
-    line-height: calc(56px - 2 * var(--x3km7fe));
+  .x1rzm7h7 {
+    line-height: calc(calc(2 * var(--x3km7fe) + var(--xol8812)) - 2 * var(--x3km7fe));
   }
 
-  .x181fmp8 {
-    line-height: calc(56px - 2 * var(--xod9tvo));
+  .x1mv3dpe {
+    line-height: calc(calc(2 * var(--xod9tvo) + var(--x1lrg4gv) + var(--xol8812)) - 2 * var(--xod9tvo));
   }
 
   .xv61bfh {
@@ -1815,10 +1815,6 @@
     transition-duration: .105s;
   }
 
-  .xx6bhzk {
-    transition-duration: .15s;
-  }
-
   .x1rvut6x {
     transition-duration: .25s;
   }
@@ -2531,6 +2527,22 @@
     height: auto;
   }
 
+  .x1o675yb {
+    height: calc((2 * var(--x3km7fe) + var(--xol8812)) / 2);
+  }
+
+  .x1viytl0 {
+    height: calc((2 * var(--xod9tvo) + var(--x1lrg4gv) + var(--xol8812)) / 2);
+  }
+
+  .xnqhc4v {
+    height: calc(2 * var(--x3km7fe) + var(--xol8812));
+  }
+
+  .x4v968r {
+    height: calc(2 * var(--xod9tvo) + var(--x1lrg4gv) + var(--xol8812));
+  }
+
   .x1t2j4n3 {
     height: var(--tab-panel-height, auto);
   }
@@ -2659,6 +2671,10 @@
     min-height: 88px;
   }
 
+  .x9ep9ug {
+    min-height: calc(2 * var(--xod9tvo) + var(--x1lrg4gv) + var(--xol8812));
+  }
+
   .x1chvrdh {
     min-height: var(--x-minBlockSize);
   }

package/dist/tokens/design.tokens.stylex.js

@@ -59,6 +59,90 @@ const colors = {
 	tertiaryFixedDim: "var(--x1or1uxx)",
 	__varGroupHash__: "x1qza42b"
 };
+const typography = {
+	bodyLargeFont: "var(--x1ygl7cg)",
+	bodyLargeLineHeight: "var(--xol8812)",
+	bodyLargeSize: "var(--xjulk4j)",
+	bodyLargeTracking: "var(--x10nh56i)",
+	bodyLargeWeight: "var(--x16erikp)",
+	bodyMediumFont: "var(--x1q0k4yu)",
+	bodyMediumLineHeight: "var(--x1j54qr5)",
+	bodyMediumSize: "var(--x1gawvsv)",
+	bodyMediumTracking: "var(--x1wq3zjd)",
+	bodyMediumWeight: "var(--x1ayguju)",
+	bodySmallFont: "var(--x15dz6tq)",
+	bodySmallLineHeight: "var(--x1lrg4gv)",
+	bodySmallSize: "var(--x18q7aov)",
+	bodySmallTracking: "var(--xw822is)",
+	bodySmallWeight: "var(--x1ok1j4r)",
+	displayLargeFont: "var(--x134eq0n)",
+	displayLargeLineHeight: "var(--xhofdxx)",
+	displayLargeSize: "var(--x17lio9c)",
+	displayLargeTracking: "var(--x1gxj0qs)",
+	displayLargeWeight: "var(--xe5fuv)",
+	displayMediumFont: "var(--xyhb918)",
+	displayMediumLineHeight: "var(--xb6v12a)",
+	displayMediumSize: "var(--xtenqmo)",
+	displayMediumTracking: "var(--x116sb5h)",
+	displayMediumWeight: "var(--xoezdz5)",
+	displaySmallFont: "var(--xdjewjw)",
+	displaySmallLineHeight: "var(--x1pjhsc4)",
+	displaySmallSize: "var(--xa0mhat)",
+	displaySmallTracking: "var(--x1p2yclr)",
+	displaySmallWeight: "var(--xhws6hb)",
+	fontFamilyBrand: "var(--x1dvys7s)",
+	fontFamilyMono: "var(--xawtrnj)",
+	fontFamilyPlain: "var(--xa58n4l)",
+	headlineLargeFont: "var(--xof041q)",
+	headlineLargeLineHeight: "var(--xurq05k)",
+	headlineLargeSize: "var(--xb8fm24)",
+	headlineLargeTracking: "var(--xl627c)",
+	headlineLargeWeight: "var(--xvbu8tx)",
+	headlineMediumFont: "var(--xsd729e)",
+	headlineMediumLineHeight: "var(--x1tcnfxo)",
+	headlineMediumSize: "var(--xt0lczk)",
+	headlineMediumTracking: "var(--xpyu5e0)",
+	headlineMediumWeight: "var(--x9gskfq)",
+	headlineSmallFont: "var(--x1jqfzdj)",
+	headlineSmallLineHeight: "var(--xkj6wu1)",
+	headlineSmallSize: "var(--x1oc1922)",
+	headlineSmallTracking: "var(--x1te0yyg)",
+	headlineSmallWeight: "var(--x1lrnn0r)",
+	labelLargeFont: "var(--xnff2fy)",
+	labelLargeLineHeight: "var(--x9imlvm)",
+	labelLargeSize: "var(--xl3tx9q)",
+	labelLargeTracking: "var(--x14fmv7u)",
+	labelLargeWeight: "var(--xwguucb)",
+	labelMediumFont: "var(--xbejnr)",
+	labelMediumLineHeight: "var(--xqehqp9)",
+	labelMediumSize: "var(--x48e3yn)",
+	labelMediumTracking: "var(--xe8jatf)",
+	labelMediumWeight: "var(--x1a51kfj)",
+	labelSmallFont: "var(--xm0ylhd)",
+	labelSmallLineHeight: "var(--xt3caw9)",
+	labelSmallSize: "var(--x5h3z1j)",
+	labelSmallTracking: "var(--x2j42vm)",
+	labelSmallWeight: "var(--xj1uwei)",
+	titleLargeFont: "var(--xr826oj)",
+	titleLargeLineHeight: "var(--xuc6kgf)",
+	titleLargeSize: "var(--xs4cscp)",
+	titleLargeTracking: "var(--xt8l743)",
+	titleLargeWeight: "var(--x1i0wwws)",
+	titleMediumFont: "var(--x1bjiv9x)",
+	titleMediumLineHeight: "var(--x3j91oh)",
+	titleMediumSize: "var(--x1yypmzp)",
+	titleMediumTracking: "var(--x1b77t50)",
+	titleMediumWeight: "var(--x3ehn1q)",
+	titleSmallFont: "var(--x1kgqo6c)",
+	titleSmallLineHeight: "var(--x1l4af85)",
+	titleSmallSize: "var(--x1hrxtmi)",
+	titleSmallTracking: "var(--xn7tcr9)",
+	titleSmallWeight: "var(--xj437rg)",
+	weightBold: "var(--xlvbdhw)",
+	weightMedium: "var(--x1vg17ag)",
+	weightRegular: "var(--xgz8ay1)",
+	__varGroupHash__: "x1q1jnkv"
+};
 const spacing = {
 	lg: "var(--x3km7fe)",
 	md: "var(--x6borv4)",
@@ -71,6 +155,6 @@ const spacing = {
 	__varGroupHash__: "x1egpaah"
 };
 //#endregion
-export { colors, spacing };
+export { colors, spacing, typography };
 
 //# sourceMappingURL=design.tokens.stylex.js.map

package/dist/tokens/design.tokens.stylex.js.map

@@ -1 +1 @@
-{"version":3,"file":"design.tokens.stylex.js","names":["stylex","DARK","colors","background","error","errorContainer","inverseOnSurface","inversePrimary","inverseSurface","negative","negativeContainer","onBackground","onError","onErrorContainer","onNegative","onNegativeContainer","onPositive","onPositiveContainer","onPrimary","onPrimaryContainer","onPrimaryFixed","onPrimaryFixedVariant","onSecondary","onSecondaryContainer","onSecondaryFixed","onSecondaryFixedVariant","onSurface","onSurfaceVariant","onTertiary","onTertiaryContainer","onTertiaryFixed","onTertiaryFixedVariant","outline","outlineVariant","positive","positiveContainer","primary","primaryContainer","primaryFixed","primaryFixedDim","scrim","secondary","secondaryContainer","secondaryFixed","secondaryFixedDim","shadow","surface","surfaceBright","surfaceContainer","surfaceContainerHigh","surfaceContainerHighest","surfaceContainerLow","surfaceContainerLowest","surfaceDim","surfaceTint","surfaceVariant","tertiary","tertiaryContainer","tertiaryFixed","tertiaryFixedDim","__varGroupHash__","colorsLightTheme","x1qza42b","$$css","colorsDarkTheme","typography","bodyLargeFont","bodyLargeLineHeight","bodyLargeSize","bodyLargeTracking","bodyLargeWeight","bodyMediumFont","bodyMediumLineHeight","bodyMediumSize","bodyMediumTracking","bodyMediumWeight","bodySmallFont","bodySmallLineHeight","bodySmallSize","bodySmallTracking","bodySmallWeight","displayLargeFont","displayLargeLineHeight","displayLargeSize","displayLargeTracking","displayLargeWeight","displayMediumFont","displayMediumLineHeight","displayMediumSize","displayMediumTracking","displayMediumWeight","displaySmallFont","displaySmallLineHeight","displaySmallSize","displaySmallTracking","displaySmallWeight","fontFamilyBrand","fontFamilyMono","fontFamilyPlain","headlineLargeFont","headlineLargeLineHeight","headlineLargeSize","headlineLargeTracking","headlineLargeWeight","headlineMediumFont","headlineMediumLineHeight","headlineMediumSize","headlineMediumTracking","headlineMediumWeight","headlineSmallFont","headlineSmallLineHeight","headlineSmallSize","headlineSmallTracking","headlineSmallWeight","labelLargeFont","labelLargeLineHeight","labelLargeSize","labelLargeTracking","labelLargeWeight","labelMediumFont","labelMediumLineHeight","labelMediumSize","labelMediumTracking","labelMediumWeight","labelSmallFont","labelSmallLineHeight","labelSmallSize","labelSmallTracking","labelSmallWeight","titleLargeFont","titleLargeLineHeight","titleLargeSize","titleLargeTracking","titleLargeWeight","titleMediumFont","titleMediumLineHeight","titleMediumSize","titleMediumTracking","titleMediumWeight","titleSmallFont","titleSmallLineHeight","titleSmallSize","titleSmallTracking","titleSmallWeight","weightBold","weightMedium","weightRegular","spacing","lg","md","sm","xl","xs","xxl","xxs","xxxl","radii","full","none","shadows","elevation1","elevation2","elevation3","elevation4","elevation5","stateLayerOpacity","disabledContainer","disabledContent","dragged","focus","hover","pressed","motion","durationLong1","durationLong2","durationLong3","durationMedium1","durationMedium2","durationMedium3","durationShort1","durationShort2","durationShort3","easingEmphasized","easingEmphasizedAccelerate","easingEmphasizedDecelerate","easingSpringFast","easingSpringSlow","easingStandard","breakpoints","compact","expanded","extraLarge","large","medium","media","belowExpanded","belowExtraLarge","belowLarge","belowMedium"],"sources":["../../src/tokens/design.tokens.stylex.ts"],"sourcesContent":["// AUTO-GENERATED by scripts/build-tokens.mjs from the sibling design.tokens.json.\n// Do not hand-edit — change design.tokens.json and run `npm run tokens:build`.\n// The .stylex.ts suffix is required by @stylexjs/babel-plugin for cross-file\n// variable resolution — see the comment at the top of build-tokens.mjs.\n\nimport * as stylex from '@stylexjs/stylex';\nconst DARK = '@media (prefers-color-scheme: dark)';\nconst colors = {\n  background: \"var(--xm52p6p)\",\n  error: \"var(--x12p1wyw)\",\n  errorContainer: \"var(--x7wk2f4)\",\n  inverseOnSurface: \"var(--x1balm44)\",\n  inversePrimary: \"var(--x1v1ejj2)\",\n  inverseSurface: \"var(--x1614qkl)\",\n  negative: \"var(--x1m9zerx)\",\n  negativeContainer: \"var(--x1sa9icp)\",\n  onBackground: \"var(--xwr0q4)\",\n  onError: \"var(--xwloagh)\",\n  onErrorContainer: \"var(--xqsbqtq)\",\n  onNegative: \"var(--x1ey4ils)\",\n  onNegativeContainer: \"var(--x1snvm1r)\",\n  onPositive: \"var(--xyvlj6c)\",\n  onPositiveContainer: \"var(--xn09qcj)\",\n  onPrimary: \"var(--x1f7qwsz)\",\n  onPrimaryContainer: \"var(--x1p425jc)\",\n  onPrimaryFixed: \"var(--x7fing4)\",\n  onPrimaryFixedVariant: \"var(--x9qmz6i)\",\n  onSecondary: \"var(--xkltk4j)\",\n  onSecondaryContainer: \"var(--x1bo8p7i)\",\n  onSecondaryFixed: \"var(--xs1em01)\",\n  onSecondaryFixedVariant: \"var(--xpj09jl)\",\n  onSurface: \"var(--xn0syi6)\",\n  onSurfaceVariant: \"var(--x28n2pw)\",\n  onTertiary: \"var(--x7tegcs)\",\n  onTertiaryContainer: \"var(--x1pzkjol)\",\n  onTertiaryFixed: \"var(--xl08771)\",\n  onTertiaryFixedVariant: \"var(--x1b7jmlf)\",\n  outline: \"var(--x1ridy1o)\",\n  outlineVariant: \"var(--x7dbk6n)\",\n  positive: \"var(--xiob6mg)\",\n  positiveContainer: \"var(--x1xvl3py)\",\n  primary: \"var(--x1cjupv7)\",\n  primaryContainer: \"var(--x17f4f9w)\",\n  primaryFixed: \"var(--x1irt4fq)\",\n  primaryFixedDim: \"var(--x1ver3t)\",\n  scrim: \"var(--x1khq28e)\",\n  secondary: \"var(--x189y34t)\",\n  secondaryContainer: \"var(--xliov21)\",\n  secondaryFixed: \"var(--xmiml2p)\",\n  secondaryFixedDim: \"var(--x1lc0aek)\",\n  shadow: \"var(--xj3yx3l)\",\n  surface: \"var(--x1dzgr7y)\",\n  surfaceBright: \"var(--x1ghurj8)\",\n  surfaceContainer: \"var(--x3cqee7)\",\n  surfaceContainerHigh: \"var(--x1xbp8h6)\",\n  surfaceContainerHighest: \"var(--x13o0mym)\",\n  surfaceContainerLow: \"var(--xi1exwt)\",\n  surfaceContainerLowest: \"var(--x1b34qje)\",\n  surfaceDim: \"var(--xo1km0t)\",\n  surfaceTint: \"var(--x1jo8snc)\",\n  surfaceVariant: \"var(--x17proku)\",\n  tertiary: \"var(--x1bb0p1w)\",\n  tertiaryContainer: \"var(--x1p33ujy)\",\n  tertiaryFixed: \"var(--x9erpvp)\",\n  tertiaryFixedDim: \"var(--x1or1uxx)\",\n  __varGroupHash__: \"x1qza42b\"\n};\nexport { colors };\nconst colorsLightTheme = {\n  x1qza42b: \"xxs7l4q x1qza42b\",\n  $$css: true\n};\nexport { colorsLightTheme };\nconst colorsDarkTheme = {\n  x1qza42b: \"x1let8bq x1qza42b\",\n  $$css: true\n};\nexport { colorsDarkTheme };\nconst typography = {\n  bodyLargeFont: \"var(--x1ygl7cg)\",\n  bodyLargeLineHeight: \"var(--xol8812)\",\n  bodyLargeSize: \"var(--xjulk4j)\",\n  bodyLargeTracking: \"var(--x10nh56i)\",\n  bodyLargeWeight: \"var(--x16erikp)\",\n  bodyMediumFont: \"var(--x1q0k4yu)\",\n  bodyMediumLineHeight: \"var(--x1j54qr5)\",\n  bodyMediumSize: \"var(--x1gawvsv)\",\n  bodyMediumTracking: \"var(--x1wq3zjd)\",\n  bodyMediumWeight: \"var(--x1ayguju)\",\n  bodySmallFont: \"var(--x15dz6tq)\",\n  bodySmallLineHeight: \"var(--x1lrg4gv)\",\n  bodySmallSize: \"var(--x18q7aov)\",\n  bodySmallTracking: \"var(--xw822is)\",\n  bodySmallWeight: \"var(--x1ok1j4r)\",\n  displayLargeFont: \"var(--x134eq0n)\",\n  displayLargeLineHeight: \"var(--xhofdxx)\",\n  displayLargeSize: \"var(--x17lio9c)\",\n  displayLargeTracking: \"var(--x1gxj0qs)\",\n  displayLargeWeight: \"var(--xe5fuv)\",\n  displayMediumFont: \"var(--xyhb918)\",\n  displayMediumLineHeight: \"var(--xb6v12a)\",\n  displayMediumSize: \"var(--xtenqmo)\",\n  displayMediumTracking: \"var(--x116sb5h)\",\n  displayMediumWeight: \"var(--xoezdz5)\",\n  displaySmallFont: \"var(--xdjewjw)\",\n  displaySmallLineHeight: \"var(--x1pjhsc4)\",\n  displaySmallSize: \"var(--xa0mhat)\",\n  displaySmallTracking: \"var(--x1p2yclr)\",\n  displaySmallWeight: \"var(--xhws6hb)\",\n  fontFamilyBrand: \"var(--x1dvys7s)\",\n  fontFamilyMono: \"var(--xawtrnj)\",\n  fontFamilyPlain: \"var(--xa58n4l)\",\n  headlineLargeFont: \"var(--xof041q)\",\n  headlineLargeLineHeight: \"var(--xurq05k)\",\n  headlineLargeSize: \"var(--xb8fm24)\",\n  headlineLargeTracking: \"var(--xl627c)\",\n  headlineLargeWeight: \"var(--xvbu8tx)\",\n  headlineMediumFont: \"var(--xsd729e)\",\n  headlineMediumLineHeight: \"var(--x1tcnfxo)\",\n  headlineMediumSize: \"var(--xt0lczk)\",\n  headlineMediumTracking: \"var(--xpyu5e0)\",\n  headlineMediumWeight: \"var(--x9gskfq)\",\n  headlineSmallFont: \"var(--x1jqfzdj)\",\n  headlineSmallLineHeight: \"var(--xkj6wu1)\",\n  headlineSmallSize: \"var(--x1oc1922)\",\n  headlineSmallTracking: \"var(--x1te0yyg)\",\n  headlineSmallWeight: \"var(--x1lrnn0r)\",\n  labelLargeFont: \"var(--xnff2fy)\",\n  labelLargeLineHeight: \"var(--x9imlvm)\",\n  labelLargeSize: \"var(--xl3tx9q)\",\n  labelLargeTracking: \"var(--x14fmv7u)\",\n  labelLargeWeight: \"var(--xwguucb)\",\n  labelMediumFont: \"var(--xbejnr)\",\n  labelMediumLineHeight: \"var(--xqehqp9)\",\n  labelMediumSize: \"var(--x48e3yn)\",\n  labelMediumTracking: \"var(--xe8jatf)\",\n  labelMediumWeight: \"var(--x1a51kfj)\",\n  labelSmallFont: \"var(--xm0ylhd)\",\n  labelSmallLineHeight: \"var(--xt3caw9)\",\n  labelSmallSize: \"var(--x5h3z1j)\",\n  labelSmallTracking: \"var(--x2j42vm)\",\n  labelSmallWeight: \"var(--xj1uwei)\",\n  titleLargeFont: \"var(--xr826oj)\",\n  titleLargeLineHeight: \"var(--xuc6kgf)\",\n  titleLargeSize: \"var(--xs4cscp)\",\n  titleLargeTracking: \"var(--xt8l743)\",\n  titleLargeWeight: \"var(--x1i0wwws)\",\n  titleMediumFont: \"var(--x1bjiv9x)\",\n  titleMediumLineHeight: \"var(--x3j91oh)\",\n  titleMediumSize: \"var(--x1yypmzp)\",\n  titleMediumTracking: \"var(--x1b77t50)\",\n  titleMediumWeight: \"var(--x3ehn1q)\",\n  titleSmallFont: \"var(--x1kgqo6c)\",\n  titleSmallLineHeight: \"var(--x1l4af85)\",\n  titleSmallSize: \"var(--x1hrxtmi)\",\n  titleSmallTracking: \"var(--xn7tcr9)\",\n  titleSmallWeight: \"var(--xj437rg)\",\n  weightBold: \"var(--xlvbdhw)\",\n  weightMedium: \"var(--x1vg17ag)\",\n  weightRegular: \"var(--xgz8ay1)\",\n  __varGroupHash__: \"x1q1jnkv\"\n};\nexport { typography };\nconst spacing = {\n  lg: \"var(--x3km7fe)\",\n  md: \"var(--x6borv4)\",\n  sm: \"var(--xod9tvo)\",\n  xl: \"var(--x196ey9q)\",\n  xs: \"var(--xbmbo34)\",\n  xxl: \"var(--xi3mssk)\",\n  xxs: \"var(--x1ug6acx)\",\n  xxxl: \"var(--xqgx294)\",\n  __varGroupHash__: \"x1egpaah\"\n};\nexport { spacing };\nconst radii = {\n  full: \"var(--x1kmbna2)\",\n  lg: \"var(--xf3l8oo)\",\n  md: \"var(--x1m0y4ip)\",\n  none: \"var(--x1lckk6t)\",\n  sm: \"var(--xslt97v)\",\n  xl: \"var(--x1w5u0jm)\",\n  xs: \"var(--x1qkrqlv)\",\n  __varGroupHash__: \"xhnz8s7\"\n};\nexport { radii };\nconst shadows = {\n  elevation1: \"var(--xt04dnm)\",\n  elevation2: \"var(--x14ermby)\",\n  elevation3: \"var(--x1tlgjf0)\",\n  elevation4: \"var(--x1vx95kd)\",\n  elevation5: \"var(--x4ackbv)\",\n  __varGroupHash__: \"x1j0lhbx\"\n};\nexport { shadows };\nconst stateLayerOpacity = {\n  disabledContainer: \"var(--x1cq03z9)\",\n  disabledContent: \"var(--xu361ij)\",\n  dragged: \"var(--x1uapny3)\",\n  focus: \"var(--x124j18r)\",\n  hover: \"var(--x8z5t6h)\",\n  pressed: \"var(--xhaltwz)\",\n  __varGroupHash__: \"x1dldgtb\"\n};\nexport { stateLayerOpacity };\nconst motion = {\n  durationLong1: \"var(--x1f45rvw)\",\n  durationLong2: \"var(--x13xtsm0)\",\n  durationLong3: \"var(--xyz43tr)\",\n  durationMedium1: \"var(--x1neymab)\",\n  durationMedium2: \"var(--x1v2b4mt)\",\n  durationMedium3: \"var(--x1vta88b)\",\n  durationShort1: \"var(--x1xkwyvg)\",\n  durationShort2: \"var(--x12wc0xg)\",\n  durationShort3: \"var(--xaryv6b)\",\n  easingEmphasized: \"var(--x1naowyp)\",\n  easingEmphasizedAccelerate: \"var(--xm20gsr)\",\n  easingEmphasizedDecelerate: \"var(--xtxwhk6)\",\n  easingSpringFast: \"var(--x1m2kglw)\",\n  easingSpringSlow: \"var(--xhdhzmf)\",\n  easingStandard: \"var(--x77wm8g)\",\n  __varGroupHash__: \"x1dv3b2k\"\n};\nexport { motion };\nconst breakpoints = {\n  compact: \"0px\",\n  expanded: \"840px\",\n  extraLarge: \"1600px\",\n  large: \"1200px\",\n  medium: \"600px\"\n};\nexport { breakpoints };\nconst media = {\n  belowExpanded: \"@media (width < 840px)\",\n  belowExtraLarge: \"@media (width < 1600px)\",\n  belowLarge: \"@media (width < 1200px)\",\n  belowMedium: \"@media (width < 600px)\",\n  expanded: \"@media (width >= 840px)\",\n  extraLarge: \"@media (width >= 1600px)\",\n  large: \"@media (width >= 1200px)\",\n  medium: \"@media (width >= 600px)\"\n};\nexport { media };"],"mappings":";AAOA,MAAME,SAAS;CACbC,YAAY;CACZC,OAAO;CACPC,gBAAgB;CAChBC,kBAAkB;CAClBC,gBAAgB;CAChBC,gBAAgB;CAChBC,UAAU;CACVC,mBAAmB;CACnBC,cAAc;CACdC,SAAS;CACTC,kBAAkB;CAClBC,YAAY;CACZC,qBAAqB;CACrBC,YAAY;CACZC,qBAAqB;CACrBC,WAAW;CACXC,oBAAoB;CACpBC,gBAAgB;CAChBC,uBAAuB;CACvBC,aAAa;CACbC,sBAAsB;CACtBC,kBAAkB;CAClBC,yBAAyB;CACzBC,WAAW;CACXC,kBAAkB;CAClBC,YAAY;CACZC,qBAAqB;CACrBC,iBAAiB;CACjBC,wBAAwB;CACxBC,SAAS;CACTC,gBAAgB;CAChBC,UAAU;CACVC,mBAAmB;CACnBC,SAAS;CACTC,kBAAkB;CAClBC,cAAc;CACdC,iBAAiB;CACjBC,OAAO;CACPC,WAAW;CACXC,oBAAoB;CACpBC,gBAAgB;CAChBC,mBAAmB;CACnBC,QAAQ;CACRC,SAAS;CACTC,eAAe;CACfC,kBAAkB;CAClBC,sBAAsB;CACtBC,yBAAyB;CACzBC,qBAAqB;CACrBC,wBAAwB;CACxBC,YAAY;CACZC,aAAa;CACbC,gBAAgB;CAChBC,UAAU;CACVC,mBAAmB;CACnBC,eAAe;CACfC,kBAAkB;CAClBC,kBAAkB;AACpB;AAiGA,MAAMuF,UAAU;CACdC,IAAI;CACJC,IAAI;CACJC,IAAI;CACJC,IAAI;CACJC,IAAI;CACJC,KAAK;CACLC,KAAK;CACLC,MAAM;CACN/F,kBAAkB;AACpB"}
+{"version":3,"file":"design.tokens.stylex.js","names":["stylex","DARK","colors","background","error","errorContainer","inverseOnSurface","inversePrimary","inverseSurface","negative","negativeContainer","onBackground","onError","onErrorContainer","onNegative","onNegativeContainer","onPositive","onPositiveContainer","onPrimary","onPrimaryContainer","onPrimaryFixed","onPrimaryFixedVariant","onSecondary","onSecondaryContainer","onSecondaryFixed","onSecondaryFixedVariant","onSurface","onSurfaceVariant","onTertiary","onTertiaryContainer","onTertiaryFixed","onTertiaryFixedVariant","outline","outlineVariant","positive","positiveContainer","primary","primaryContainer","primaryFixed","primaryFixedDim","scrim","secondary","secondaryContainer","secondaryFixed","secondaryFixedDim","shadow","surface","surfaceBright","surfaceContainer","surfaceContainerHigh","surfaceContainerHighest","surfaceContainerLow","surfaceContainerLowest","surfaceDim","surfaceTint","surfaceVariant","tertiary","tertiaryContainer","tertiaryFixed","tertiaryFixedDim","__varGroupHash__","colorsLightTheme","x1qza42b","$$css","colorsDarkTheme","typography","bodyLargeFont","bodyLargeLineHeight","bodyLargeSize","bodyLargeTracking","bodyLargeWeight","bodyMediumFont","bodyMediumLineHeight","bodyMediumSize","bodyMediumTracking","bodyMediumWeight","bodySmallFont","bodySmallLineHeight","bodySmallSize","bodySmallTracking","bodySmallWeight","displayLargeFont","displayLargeLineHeight","displayLargeSize","displayLargeTracking","displayLargeWeight","displayMediumFont","displayMediumLineHeight","displayMediumSize","displayMediumTracking","displayMediumWeight","displaySmallFont","displaySmallLineHeight","displaySmallSize","displaySmallTracking","displaySmallWeight","fontFamilyBrand","fontFamilyMono","fontFamilyPlain","headlineLargeFont","headlineLargeLineHeight","headlineLargeSize","headlineLargeTracking","headlineLargeWeight","headlineMediumFont","headlineMediumLineHeight","headlineMediumSize","headlineMediumTracking","headlineMediumWeight","headlineSmallFont","headlineSmallLineHeight","headlineSmallSize","headlineSmallTracking","headlineSmallWeight","labelLargeFont","labelLargeLineHeight","labelLargeSize","labelLargeTracking","labelLargeWeight","labelMediumFont","labelMediumLineHeight","labelMediumSize","labelMediumTracking","labelMediumWeight","labelSmallFont","labelSmallLineHeight","labelSmallSize","labelSmallTracking","labelSmallWeight","titleLargeFont","titleLargeLineHeight","titleLargeSize","titleLargeTracking","titleLargeWeight","titleMediumFont","titleMediumLineHeight","titleMediumSize","titleMediumTracking","titleMediumWeight","titleSmallFont","titleSmallLineHeight","titleSmallSize","titleSmallTracking","titleSmallWeight","weightBold","weightMedium","weightRegular","spacing","lg","md","sm","xl","xs","xxl","xxs","xxxl","radii","full","none","shadows","elevation1","elevation2","elevation3","elevation4","elevation5","stateLayerOpacity","disabledContainer","disabledContent","dragged","focus","hover","pressed","motion","durationLong1","durationLong2","durationLong3","durationMedium1","durationMedium2","durationMedium3","durationShort1","durationShort2","durationShort3","easingEmphasized","easingEmphasizedAccelerate","easingEmphasizedDecelerate","easingSpringFast","easingSpringSlow","easingStandard","breakpoints","compact","expanded","extraLarge","large","medium","media","belowExpanded","belowExtraLarge","belowLarge","belowMedium"],"sources":["../../src/tokens/design.tokens.stylex.ts"],"sourcesContent":["// AUTO-GENERATED by scripts/build-tokens.mjs from the sibling design.tokens.json.\n// Do not hand-edit — change design.tokens.json and run `npm run tokens:build`.\n// The .stylex.ts suffix is required by @stylexjs/babel-plugin for cross-file\n// variable resolution — see the comment at the top of build-tokens.mjs.\n\nimport * as stylex from '@stylexjs/stylex';\nconst DARK = '@media (prefers-color-scheme: dark)';\nconst colors = {\n  background: \"var(--xm52p6p)\",\n  error: \"var(--x12p1wyw)\",\n  errorContainer: \"var(--x7wk2f4)\",\n  inverseOnSurface: \"var(--x1balm44)\",\n  inversePrimary: \"var(--x1v1ejj2)\",\n  inverseSurface: \"var(--x1614qkl)\",\n  negative: \"var(--x1m9zerx)\",\n  negativeContainer: \"var(--x1sa9icp)\",\n  onBackground: \"var(--xwr0q4)\",\n  onError: \"var(--xwloagh)\",\n  onErrorContainer: \"var(--xqsbqtq)\",\n  onNegative: \"var(--x1ey4ils)\",\n  onNegativeContainer: \"var(--x1snvm1r)\",\n  onPositive: \"var(--xyvlj6c)\",\n  onPositiveContainer: \"var(--xn09qcj)\",\n  onPrimary: \"var(--x1f7qwsz)\",\n  onPrimaryContainer: \"var(--x1p425jc)\",\n  onPrimaryFixed: \"var(--x7fing4)\",\n  onPrimaryFixedVariant: \"var(--x9qmz6i)\",\n  onSecondary: \"var(--xkltk4j)\",\n  onSecondaryContainer: \"var(--x1bo8p7i)\",\n  onSecondaryFixed: \"var(--xs1em01)\",\n  onSecondaryFixedVariant: \"var(--xpj09jl)\",\n  onSurface: \"var(--xn0syi6)\",\n  onSurfaceVariant: \"var(--x28n2pw)\",\n  onTertiary: \"var(--x7tegcs)\",\n  onTertiaryContainer: \"var(--x1pzkjol)\",\n  onTertiaryFixed: \"var(--xl08771)\",\n  onTertiaryFixedVariant: \"var(--x1b7jmlf)\",\n  outline: \"var(--x1ridy1o)\",\n  outlineVariant: \"var(--x7dbk6n)\",\n  positive: \"var(--xiob6mg)\",\n  positiveContainer: \"var(--x1xvl3py)\",\n  primary: \"var(--x1cjupv7)\",\n  primaryContainer: \"var(--x17f4f9w)\",\n  primaryFixed: \"var(--x1irt4fq)\",\n  primaryFixedDim: \"var(--x1ver3t)\",\n  scrim: \"var(--x1khq28e)\",\n  secondary: \"var(--x189y34t)\",\n  secondaryContainer: \"var(--xliov21)\",\n  secondaryFixed: \"var(--xmiml2p)\",\n  secondaryFixedDim: \"var(--x1lc0aek)\",\n  shadow: \"var(--xj3yx3l)\",\n  surface: \"var(--x1dzgr7y)\",\n  surfaceBright: \"var(--x1ghurj8)\",\n  surfaceContainer: \"var(--x3cqee7)\",\n  surfaceContainerHigh: \"var(--x1xbp8h6)\",\n  surfaceContainerHighest: \"var(--x13o0mym)\",\n  surfaceContainerLow: \"var(--xi1exwt)\",\n  surfaceContainerLowest: \"var(--x1b34qje)\",\n  surfaceDim: \"var(--xo1km0t)\",\n  surfaceTint: \"var(--x1jo8snc)\",\n  surfaceVariant: \"var(--x17proku)\",\n  tertiary: \"var(--x1bb0p1w)\",\n  tertiaryContainer: \"var(--x1p33ujy)\",\n  tertiaryFixed: \"var(--x9erpvp)\",\n  tertiaryFixedDim: \"var(--x1or1uxx)\",\n  __varGroupHash__: \"x1qza42b\"\n};\nexport { colors };\nconst colorsLightTheme = {\n  x1qza42b: \"xxs7l4q x1qza42b\",\n  $$css: true\n};\nexport { colorsLightTheme };\nconst colorsDarkTheme = {\n  x1qza42b: \"x1let8bq x1qza42b\",\n  $$css: true\n};\nexport { colorsDarkTheme };\nconst typography = {\n  bodyLargeFont: \"var(--x1ygl7cg)\",\n  bodyLargeLineHeight: \"var(--xol8812)\",\n  bodyLargeSize: \"var(--xjulk4j)\",\n  bodyLargeTracking: \"var(--x10nh56i)\",\n  bodyLargeWeight: \"var(--x16erikp)\",\n  bodyMediumFont: \"var(--x1q0k4yu)\",\n  bodyMediumLineHeight: \"var(--x1j54qr5)\",\n  bodyMediumSize: \"var(--x1gawvsv)\",\n  bodyMediumTracking: \"var(--x1wq3zjd)\",\n  bodyMediumWeight: \"var(--x1ayguju)\",\n  bodySmallFont: \"var(--x15dz6tq)\",\n  bodySmallLineHeight: \"var(--x1lrg4gv)\",\n  bodySmallSize: \"var(--x18q7aov)\",\n  bodySmallTracking: \"var(--xw822is)\",\n  bodySmallWeight: \"var(--x1ok1j4r)\",\n  displayLargeFont: \"var(--x134eq0n)\",\n  displayLargeLineHeight: \"var(--xhofdxx)\",\n  displayLargeSize: \"var(--x17lio9c)\",\n  displayLargeTracking: \"var(--x1gxj0qs)\",\n  displayLargeWeight: \"var(--xe5fuv)\",\n  displayMediumFont: \"var(--xyhb918)\",\n  displayMediumLineHeight: \"var(--xb6v12a)\",\n  displayMediumSize: \"var(--xtenqmo)\",\n  displayMediumTracking: \"var(--x116sb5h)\",\n  displayMediumWeight: \"var(--xoezdz5)\",\n  displaySmallFont: \"var(--xdjewjw)\",\n  displaySmallLineHeight: \"var(--x1pjhsc4)\",\n  displaySmallSize: \"var(--xa0mhat)\",\n  displaySmallTracking: \"var(--x1p2yclr)\",\n  displaySmallWeight: \"var(--xhws6hb)\",\n  fontFamilyBrand: \"var(--x1dvys7s)\",\n  fontFamilyMono: \"var(--xawtrnj)\",\n  fontFamilyPlain: \"var(--xa58n4l)\",\n  headlineLargeFont: \"var(--xof041q)\",\n  headlineLargeLineHeight: \"var(--xurq05k)\",\n  headlineLargeSize: \"var(--xb8fm24)\",\n  headlineLargeTracking: \"var(--xl627c)\",\n  headlineLargeWeight: \"var(--xvbu8tx)\",\n  headlineMediumFont: \"var(--xsd729e)\",\n  headlineMediumLineHeight: \"var(--x1tcnfxo)\",\n  headlineMediumSize: \"var(--xt0lczk)\",\n  headlineMediumTracking: \"var(--xpyu5e0)\",\n  headlineMediumWeight: \"var(--x9gskfq)\",\n  headlineSmallFont: \"var(--x1jqfzdj)\",\n  headlineSmallLineHeight: \"var(--xkj6wu1)\",\n  headlineSmallSize: \"var(--x1oc1922)\",\n  headlineSmallTracking: \"var(--x1te0yyg)\",\n  headlineSmallWeight: \"var(--x1lrnn0r)\",\n  labelLargeFont: \"var(--xnff2fy)\",\n  labelLargeLineHeight: \"var(--x9imlvm)\",\n  labelLargeSize: \"var(--xl3tx9q)\",\n  labelLargeTracking: \"var(--x14fmv7u)\",\n  labelLargeWeight: \"var(--xwguucb)\",\n  labelMediumFont: \"var(--xbejnr)\",\n  labelMediumLineHeight: \"var(--xqehqp9)\",\n  labelMediumSize: \"var(--x48e3yn)\",\n  labelMediumTracking: \"var(--xe8jatf)\",\n  labelMediumWeight: \"var(--x1a51kfj)\",\n  labelSmallFont: \"var(--xm0ylhd)\",\n  labelSmallLineHeight: \"var(--xt3caw9)\",\n  labelSmallSize: \"var(--x5h3z1j)\",\n  labelSmallTracking: \"var(--x2j42vm)\",\n  labelSmallWeight: \"var(--xj1uwei)\",\n  titleLargeFont: \"var(--xr826oj)\",\n  titleLargeLineHeight: \"var(--xuc6kgf)\",\n  titleLargeSize: \"var(--xs4cscp)\",\n  titleLargeTracking: \"var(--xt8l743)\",\n  titleLargeWeight: \"var(--x1i0wwws)\",\n  titleMediumFont: \"var(--x1bjiv9x)\",\n  titleMediumLineHeight: \"var(--x3j91oh)\",\n  titleMediumSize: \"var(--x1yypmzp)\",\n  titleMediumTracking: \"var(--x1b77t50)\",\n  titleMediumWeight: \"var(--x3ehn1q)\",\n  titleSmallFont: \"var(--x1kgqo6c)\",\n  titleSmallLineHeight: \"var(--x1l4af85)\",\n  titleSmallSize: \"var(--x1hrxtmi)\",\n  titleSmallTracking: \"var(--xn7tcr9)\",\n  titleSmallWeight: \"var(--xj437rg)\",\n  weightBold: \"var(--xlvbdhw)\",\n  weightMedium: \"var(--x1vg17ag)\",\n  weightRegular: \"var(--xgz8ay1)\",\n  __varGroupHash__: \"x1q1jnkv\"\n};\nexport { typography };\nconst spacing = {\n  lg: \"var(--x3km7fe)\",\n  md: \"var(--x6borv4)\",\n  sm: \"var(--xod9tvo)\",\n  xl: \"var(--x196ey9q)\",\n  xs: \"var(--xbmbo34)\",\n  xxl: \"var(--xi3mssk)\",\n  xxs: \"var(--x1ug6acx)\",\n  xxxl: \"var(--xqgx294)\",\n  __varGroupHash__: \"x1egpaah\"\n};\nexport { spacing };\nconst radii = {\n  full: \"var(--x1kmbna2)\",\n  lg: \"var(--xf3l8oo)\",\n  md: \"var(--x1m0y4ip)\",\n  none: \"var(--x1lckk6t)\",\n  sm: \"var(--xslt97v)\",\n  xl: \"var(--x1w5u0jm)\",\n  xs: \"var(--x1qkrqlv)\",\n  __varGroupHash__: \"xhnz8s7\"\n};\nexport { radii };\nconst shadows = {\n  elevation1: \"var(--xt04dnm)\",\n  elevation2: \"var(--x14ermby)\",\n  elevation3: \"var(--x1tlgjf0)\",\n  elevation4: \"var(--x1vx95kd)\",\n  elevation5: \"var(--x4ackbv)\",\n  __varGroupHash__: \"x1j0lhbx\"\n};\nexport { shadows };\nconst stateLayerOpacity = {\n  disabledContainer: \"var(--x1cq03z9)\",\n  disabledContent: \"var(--xu361ij)\",\n  dragged: \"var(--x1uapny3)\",\n  focus: \"var(--x124j18r)\",\n  hover: \"var(--x8z5t6h)\",\n  pressed: \"var(--xhaltwz)\",\n  __varGroupHash__: \"x1dldgtb\"\n};\nexport { stateLayerOpacity };\nconst motion = {\n  durationLong1: \"var(--x1f45rvw)\",\n  durationLong2: \"var(--x13xtsm0)\",\n  durationLong3: \"var(--xyz43tr)\",\n  durationMedium1: \"var(--x1neymab)\",\n  durationMedium2: \"var(--x1v2b4mt)\",\n  durationMedium3: \"var(--x1vta88b)\",\n  durationShort1: \"var(--x1xkwyvg)\",\n  durationShort2: \"var(--x12wc0xg)\",\n  durationShort3: \"var(--xaryv6b)\",\n  easingEmphasized: \"var(--x1naowyp)\",\n  easingEmphasizedAccelerate: \"var(--xm20gsr)\",\n  easingEmphasizedDecelerate: \"var(--xtxwhk6)\",\n  easingSpringFast: \"var(--x1m2kglw)\",\n  easingSpringSlow: \"var(--xhdhzmf)\",\n  easingStandard: \"var(--x77wm8g)\",\n  __varGroupHash__: \"x1dv3b2k\"\n};\nexport { motion };\nconst breakpoints = {\n  compact: \"0px\",\n  expanded: \"840px\",\n  extraLarge: \"1600px\",\n  large: \"1200px\",\n  medium: \"600px\"\n};\nexport { breakpoints };\nconst media = {\n  belowExpanded: \"@media (width < 840px)\",\n  belowExtraLarge: \"@media (width < 1600px)\",\n  belowLarge: \"@media (width < 1200px)\",\n  belowMedium: \"@media (width < 600px)\",\n  expanded: \"@media (width >= 840px)\",\n  extraLarge: \"@media (width >= 1600px)\",\n  large: \"@media (width >= 1200px)\",\n  medium: \"@media (width >= 600px)\"\n};\nexport { media };"],"mappings":";AAOA,MAAME,SAAS;CACbC,YAAY;CACZC,OAAO;CACPC,gBAAgB;CAChBC,kBAAkB;CAClBC,gBAAgB;CAChBC,gBAAgB;CAChBC,UAAU;CACVC,mBAAmB;CACnBC,cAAc;CACdC,SAAS;CACTC,kBAAkB;CAClBC,YAAY;CACZC,qBAAqB;CACrBC,YAAY;CACZC,qBAAqB;CACrBC,WAAW;CACXC,oBAAoB;CACpBC,gBAAgB;CAChBC,uBAAuB;CACvBC,aAAa;CACbC,sBAAsB;CACtBC,kBAAkB;CAClBC,yBAAyB;CACzBC,WAAW;CACXC,kBAAkB;CAClBC,YAAY;CACZC,qBAAqB;CACrBC,iBAAiB;CACjBC,wBAAwB;CACxBC,SAAS;CACTC,gBAAgB;CAChBC,UAAU;CACVC,mBAAmB;CACnBC,SAAS;CACTC,kBAAkB;CAClBC,cAAc;CACdC,iBAAiB;CACjBC,OAAO;CACPC,WAAW;CACXC,oBAAoB;CACpBC,gBAAgB;CAChBC,mBAAmB;CACnBC,QAAQ;CACRC,SAAS;CACTC,eAAe;CACfC,kBAAkB;CAClBC,sBAAsB;CACtBC,yBAAyB;CACzBC,qBAAqB;CACrBC,wBAAwB;CACxBC,YAAY;CACZC,aAAa;CACbC,gBAAgB;CAChBC,UAAU;CACVC,mBAAmB;CACnBC,eAAe;CACfC,kBAAkB;CAClBC,kBAAkB;AACpB;AAYA,MAAMK,aAAa;CACjBC,eAAe;CACfC,qBAAqB;CACrBC,eAAe;CACfC,mBAAmB;CACnBC,iBAAiB;CACjBC,gBAAgB;CAChBC,sBAAsB;CACtBC,gBAAgB;CAChBC,oBAAoB;CACpBC,kBAAkB;CAClBC,eAAe;CACfC,qBAAqB;CACrBC,eAAe;CACfC,mBAAmB;CACnBC,iBAAiB;CACjBC,kBAAkB;CAClBC,wBAAwB;CACxBC,kBAAkB;CAClBC,sBAAsB;CACtBC,oBAAoB;CACpBC,mBAAmB;CACnBC,yBAAyB;CACzBC,mBAAmB;CACnBC,uBAAuB;CACvBC,qBAAqB;CACrBC,kBAAkB;CAClBC,wBAAwB;CACxBC,kBAAkB;CAClBC,sBAAsB;CACtBC,oBAAoB;CACpBC,iBAAiB;CACjBC,gBAAgB;CAChBC,iBAAiB;CACjBC,mBAAmB;CACnBC,yBAAyB;CACzBC,mBAAmB;CACnBC,uBAAuB;CACvBC,qBAAqB;CACrBC,oBAAoB;CACpBC,0BAA0B;CAC1BC,oBAAoB;CACpBC,wBAAwB;CACxBC,sBAAsB;CACtBC,mBAAmB;CACnBC,yBAAyB;CACzBC,mBAAmB;CACnBC,uBAAuB;CACvBC,qBAAqB;CACrBC,gBAAgB;CAChBC,sBAAsB;CACtBC,gBAAgB;CAChBC,oBAAoB;CACpBC,kBAAkB;CAClBC,iBAAiB;CACjBC,uBAAuB;CACvBC,iBAAiB;CACjBC,qBAAqB;CACrBC,mBAAmB;CACnBC,gBAAgB;CAChBC,sBAAsB;CACtBC,gBAAgB;CAChBC,oBAAoB;CACpBC,kBAAkB;CAClBC,gBAAgB;CAChBC,sBAAsB;CACtBC,gBAAgB;CAChBC,oBAAoB;CACpBC,kBAAkB;CAClBC,iBAAiB;CACjBC,uBAAuB;CACvBC,iBAAiB;CACjBC,qBAAqB;CACrBC,mBAAmB;CACnBC,gBAAgB;CAChBC,sBAAsB;CACtBC,gBAAgB;CAChBC,oBAAoB;CACpBC,kBAAkB;CAClBC,YAAY;CACZC,cAAc;CACdC,eAAe;CACftF,kBAAkB;AACpB;AAEA,MAAMuF,UAAU;CACdC,IAAI;CACJC,IAAI;CACJC,IAAI;CACJC,IAAI;CACJC,IAAI;CACJC,KAAK;CACLC,KAAK;CACLC,MAAM;CACN/F,kBAAkB;AACpB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kanso-labs/kanso-ui",
-  "version": "0.28.1",
+  "version": "0.28.3",
   "description": "A React component library built on React Aria Components primitives and styled with StyleX, with design tokens sourced from a single W3C DTCG file and compiled via Style Dictionary",
   "keywords": [
     "react",