@kanso-labs/kanso-ui 0.28.2 → 0.28.4

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

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

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

@@ -115,8 +115,8 @@ function TokenField$1(t0) {
 	let t5;
 	if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
 		t5 = {
-			0: { className: "x9f619 x139gbkf x1lliihq x16svsjw x1848etk x1c52epr xh8yej3 x1qn8t5l xcgk4ki x21xpn4 x1t137rt xqf7pud x126k92a" },
-			1: { className: "x9f619 x139gbkf x1lliihq x16svsjw x1848etk x1c52epr xh8yej3 x1qn8t5l xcgk4ki x21xpn4 x1t137rt xqf7pud x126k92a xwuztrq" }
+			0: { className: "x9f619 x139gbkf x1lliihq x16svsjw x1848etk x1c52epr xh8yej3 x1qn8t5l xcgk4ki x21xpn4 x1t137rt x126k92a" },
+			1: { className: "x9f619 x139gbkf x1lliihq x16svsjw x1848etk x1c52epr xh8yej3 x1qn8t5l xcgk4ki x1t137rt x126k92a xhm3zzy xczxdwi" }
 		};
 		$[16] = t5;
 	} else t5 = $[16];

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","TokenFieldProps","RACTokenFieldProps","TokenInputProps","RACTokenInputProps","stylex","Token","RACToken","TokenField","RACTokenField","TokenInput","RACTokenInput","TokenFieldValue","FieldVariant","chipStyles","FieldBox","FieldMessage","fieldStyles","invalidFrom","focus","mergeStatefulStyles","colors","spacing","typography","styles","token","kfSwDN","kXLuUW","$$css","className","T","description","error","floatingLabel","label","leadingIcon","renderToken","segment","TokenSegment","style","trailingIcon","variant","Omit","Parameters","isPopulated","value","undefined","segments","some","text","length","tokenContent","props","base","ring","unselected","t0","$","_c","T0","populated","t1","t2","t3","t4","t5","t6","t7","t8","t9","t10","t11","defaultValue","root","isDisabled","Symbol","for","0","1"],"sources":["../../../src/components/token-field/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { TokenFieldProps as RACTokenFieldProps, TokenInputProps as RACTokenInputProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Token as RACToken, TokenField as RACTokenField, TokenInput as RACTokenInput, TokenFieldValue } from 'react-aria-components';\nimport type { FieldVariant } from '../../field';\nimport { chipStyles } from '../../chip/styles';\nimport { FieldBox, FieldMessage } from '../../field';\nimport { fieldStyles, invalidFrom } from '../../field/root';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, spacing, typography } from '../../tokens/design.tokens.stylex';\n\n// The chips page's input chips inside a text field: a field whose value is\n// text with pills in it — a tag input, a mention field, a structured search\n// box. The box, label, supporting line and error are the field chrome in\n// `src/field`, shared with every other field; the pill is the chip module's\n// in `src/chip`, shared with Chip and ChipGroup. What is here is React Aria's\n// `TokenField` around them.\n//\n// The value is React Aria's `TokenFieldValue`, a list of text and token\n// segments rather than a string, and this component does not wrap it. What\n// counts as a token is the whole question a token field exists to answer — a\n// hash tag, an @ mention, a chosen contact — and a wrapper would be a second\n// place to decide it. The class is re-exported from the package so a call\n// site can subclass it and override `tokenize`.\n//\n// Three things are worth knowing.\n//\n// **The editable area is not an input.** React Aria draws a contenteditable\n// element, since a token cannot live inside an `<input>`. So the box is drawn\n// `multiline` and grows with what it holds, and the chrome is told whether it\n// is populated rather than reading an input's value — a token field is the\n// third control the chrome cannot ask, after a select and a picker.\n//\n// **The box's whole height is the editable area.** A press anywhere in the\n// box has to put the caret in the text, so the box is not covered by a press\n// target the way Select's is; React Aria's own element fills the control's\n// place and takes the press.\n//\n// **A token is drawn by the call site, or by this.** `renderToken` takes a\n// segment and returns what the pill holds; without it the pill holds the\n// segment's own text. Either way the pill is the page's, so a token here and\n// a chip elsewhere cannot drift.\n\nconst styles = {\n  token: {\n    kfSwDN: \"x87ps6o\",\n    kXLuUW: \"xxymvpz\",\n    $$css: true\n  }\n};\ntype TokenFieldProps<T extends TokenFieldValue = TokenFieldValue> = {\n  /** A function may compute the class from the field's render state. */\n  className?: RACTokenFieldProps<T>['className'];\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 and the red underline both\n   * 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 something. `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 field 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   * What each token holds. Given a segment, return what to draw inside its\n   * pill; without it the pill holds the segment's own text.\n   */\n  renderToken?: (segment: TokenSegment) => ReactNode;\n  /** A function may compute the style from the field's render state. */\n  style?: RACTokenFieldProps<T>['style'];\n  /**\n   * An icon at the end of the box, after the value: the page's 24dp trailing\n   * icon, in the muted role and the error role once the field has an error.\n   */\n  trailingIcon?: 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<RACTokenFieldProps<T>, 'children' | 'className' | 'style'>;\n\n// One token, as React Aria hands it to the editable area's render function.\n// Taken from that prop rather than imported, since the type lives in\n// `react-stately`, which this package does not depend on directly.\ntype TokenSegment = Parameters<RACTokenInputProps['children']>[0];\n\n// Whether the field holds anything, for the floating label. A token field's\n// editable area is a contenteditable element rather than an input, so the\n// chrome cannot read a value off it and is told instead.\nfunction isPopulated(value: TokenFieldValue | undefined) {\n  if (value === undefined) {\n    return undefined;\n  }\n  return value.segments.some(segment => segment.text.length > 0);\n}\n\n// What each token draws. Built by a call rather than written inline at the\n// prop, which is what react-perf's no-new-function-as-prop is after; the\n// React Compiler memoises the result on its input.\nfunction tokenContent(renderToken: TokenFieldProps['renderToken']) {\n  return (segment: TokenSegment) => <RACToken {...stylex.props(chipStyles.base, focus.ring, chipStyles.unselected, styles.token)}>\n      {renderToken === undefined ? segment.text : renderToken(segment)}\n    </RACToken>;\n}\n\n/**\n * A labelled field whose value is text with inline tokens — a tag input, a\n * mention field, a structured search box. Its value is React Aria's\n * `TokenFieldValue`: pass `value` with `onChange` to control it, or\n * `defaultValue` to let it keep its own.\n *\n * ```tsx\n * const [value, setValue] = useState(new TokenFieldValue([]))\n *\n * <TokenField label=\"Label\" onChange={setValue} value={value} />\n * ```\n *\n * What counts as a token is the call site's: subclass `TokenFieldValue` and\n * override `tokenize`, which the package re-exports for that. `renderToken`\n * decides what each pill holds; without it, the segment's own text.\n *\n * The box, label, supporting line and error are the field chrome in\n * `src/field`, and the pill is the chip module's, shared with Chip and\n * ChipGroup.\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 TokenField<T extends TokenFieldValue = TokenFieldValue>({\n  description,\n  error,\n  floatingLabel = true,\n  label,\n  leadingIcon,\n  renderToken,\n  trailingIcon,\n  variant = 'filled',\n  ...props\n}: TokenFieldProps<T>) {\n  const populated = isPopulated(props.value ?? props.defaultValue);\n  return <RACTokenField<T> {...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 `TokenField` does not, so the\n    // box is told outright or its label and its underline never turn.\n    isDisabled={props.isDisabled} isInvalid={invalidFrom(error)} isPopulated={populated} label={label} leading={leadingIcon} multiline trailing={trailingIcon} variant={variant}>\n        <RACTokenInput<T> {...{\n        0: {\n          className: \"x9f619 x139gbkf x1lliihq x16svsjw x1848etk x1c52epr xh8yej3 x1qn8t5l xcgk4ki x21xpn4 x1t137rt xqf7pud x126k92a\"\n        },\n        1: {\n          className: \"x9f619 x139gbkf x1lliihq x16svsjw x1848etk x1c52epr xh8yej3 x1qn8t5l xcgk4ki x21xpn4 x1t137rt xqf7pud x126k92a xwuztrq\"\n        }\n      }[!!(variant === 'filled') << 0]}>\n          {tokenContent(renderToken)}\n        </RACTokenInput>\n      </FieldBox>\n      <FieldMessage description={description} error={error} />\n    </RACTokenField>;\n}\nexport type { TokenFieldProps, TokenSegment };\nexport default TokenField;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ReactNode","TokenFieldProps","RACTokenFieldProps","TokenInputProps","RACTokenInputProps","stylex","Token","RACToken","TokenField","RACTokenField","TokenInput","RACTokenInput","TokenFieldValue","FieldVariant","chipStyles","FieldBox","FieldMessage","fieldStyles","invalidFrom","focus","mergeStatefulStyles","colors","typography","TOKEN_LINE","styles","token","kfSwDN","kXLuUW","$$css","className","T","description","error","floatingLabel","label","leadingIcon","renderToken","segment","TokenSegment","style","trailingIcon","variant","Omit","Parameters","isPopulated","value","undefined","segments","some","text","length","tokenContent","props","base","ring","unselected","t0","$","_c","T0","populated","t1","t2","t3","t4","t5","t6","t7","t8","t9","t10","t11","defaultValue","root","isDisabled","Symbol","for","0","1"],"sources":["../../../src/components/token-field/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { TokenFieldProps as RACTokenFieldProps, TokenInputProps as RACTokenInputProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Token as RACToken, TokenField as RACTokenField, TokenInput as RACTokenInput, TokenFieldValue } from 'react-aria-components';\nimport type { FieldVariant } from '../../field';\nimport { chipStyles } from '../../chip/styles';\nimport { FieldBox, FieldMessage } from '../../field';\nimport { fieldStyles, invalidFrom } from '../../field/root';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, typography } from '../../tokens/design.tokens.stylex';\n\n// The chips page's input chips inside a text field: a field whose value is\n// text with pills in it — a tag input, a mention field, a structured search\n// box. The box, label, supporting line and error are the field chrome in\n// `src/field`, shared with every other field; the pill is the chip module's\n// in `src/chip`, shared with Chip and ChipGroup. What is here is React Aria's\n// `TokenField` around them.\n//\n// The value is React Aria's `TokenFieldValue`, a list of text and token\n// segments rather than a string, and this component does not wrap it. What\n// counts as a token is the whole question a token field exists to answer — a\n// hash tag, an @ mention, a chosen contact — and a wrapper would be a second\n// place to decide it. The class is re-exported from the package so a call\n// site can subclass it and override `tokenize`.\n//\n// Three things are worth knowing.\n//\n// **The editable area is not an input.** React Aria draws a contenteditable\n// element, since a token cannot live inside an `<input>`. So the box is drawn\n// `multiline` and grows with what it holds, and the chrome is told whether it\n// is populated rather than reading an input's value — a token field is the\n// third control the chrome cannot ask, after a select and a picker.\n//\n// **The box's whole height is the editable area.** A press anywhere in the\n// box has to put the caret in the text, so the box is not covered by a press\n// target the way Select's is; React Aria's own element fills the control's\n// place and takes the press.\n//\n// **A token is drawn by the call site, or by this.** `renderToken` takes a\n// segment and returns what the pill holds; without it the pill holds the\n// segment's own text. Either way the pill is the page's, so a token here and\n// a chip elsewhere cannot drift.\n\n// A token's pill is 32dp tall inside a body line of 24, so the control's\n// line makes room for it or the pills overlap once the value wraps. Stated\n// once because the control's floor and its line have to agree, and the\n// clearance under the label is measured from it.\nconst TOKEN_LINE = '32px';\nconst styles = {\n  token: {\n    kfSwDN: \"x87ps6o\",\n    kXLuUW: \"xxymvpz\",\n    $$css: true\n  }\n};\ntype TokenFieldProps<T extends TokenFieldValue = TokenFieldValue> = {\n  /** A function may compute the class from the field's render state. */\n  className?: RACTokenFieldProps<T>['className'];\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 and the red underline both\n   * 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 something. `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 field 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   * What each token holds. Given a segment, return what to draw inside its\n   * pill; without it the pill holds the segment's own text.\n   */\n  renderToken?: (segment: TokenSegment) => ReactNode;\n  /** A function may compute the style from the field's render state. */\n  style?: RACTokenFieldProps<T>['style'];\n  /**\n   * An icon at the end of the box, after the value: the page's 24dp trailing\n   * icon, in the muted role and the error role once the field has an error.\n   */\n  trailingIcon?: 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<RACTokenFieldProps<T>, 'children' | 'className' | 'style'>;\n\n// One token, as React Aria hands it to the editable area's render function.\n// Taken from that prop rather than imported, since the type lives in\n// `react-stately`, which this package does not depend on directly.\ntype TokenSegment = Parameters<RACTokenInputProps['children']>[0];\n\n// Whether the field holds anything, for the floating label. A token field's\n// editable area is a contenteditable element rather than an input, so the\n// chrome cannot read a value off it and is told instead.\nfunction isPopulated(value: TokenFieldValue | undefined) {\n  if (value === undefined) {\n    return undefined;\n  }\n  return value.segments.some(segment => segment.text.length > 0);\n}\n\n// What each token draws. Built by a call rather than written inline at the\n// prop, which is what react-perf's no-new-function-as-prop is after; the\n// React Compiler memoises the result on its input.\nfunction tokenContent(renderToken: TokenFieldProps['renderToken']) {\n  return (segment: TokenSegment) => <RACToken {...stylex.props(chipStyles.base, focus.ring, chipStyles.unselected, styles.token)}>\n      {renderToken === undefined ? segment.text : renderToken(segment)}\n    </RACToken>;\n}\n\n/**\n * A labelled field whose value is text with inline tokens — a tag input, a\n * mention field, a structured search box. Its value is React Aria's\n * `TokenFieldValue`: pass `value` with `onChange` to control it, or\n * `defaultValue` to let it keep its own.\n *\n * ```tsx\n * const [value, setValue] = useState(new TokenFieldValue([]))\n *\n * <TokenField label=\"Label\" onChange={setValue} value={value} />\n * ```\n *\n * What counts as a token is the call site's: subclass `TokenFieldValue` and\n * override `tokenize`, which the package re-exports for that. `renderToken`\n * decides what each pill holds; without it, the segment's own text.\n *\n * The box, label, supporting line and error are the field chrome in\n * `src/field`, and the pill is the chip module's, shared with Chip and\n * ChipGroup.\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 TokenField<T extends TokenFieldValue = TokenFieldValue>({\n  description,\n  error,\n  floatingLabel = true,\n  label,\n  leadingIcon,\n  renderToken,\n  trailingIcon,\n  variant = 'filled',\n  ...props\n}: TokenFieldProps<T>) {\n  const populated = isPopulated(props.value ?? props.defaultValue);\n  return <RACTokenField<T> {...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 `TokenField` does not, so the\n    // box is told outright or its label and its underline never turn.\n    isDisabled={props.isDisabled} isInvalid={invalidFrom(error)} isPopulated={populated} label={label} leading={leadingIcon} multiline trailing={trailingIcon} variant={variant}>\n        <RACTokenInput<T> {...{\n        0: {\n          className: \"x9f619 x139gbkf x1lliihq x16svsjw x1848etk x1c52epr xh8yej3 x1qn8t5l xcgk4ki x21xpn4 x1t137rt x126k92a\"\n        },\n        1: {\n          className: \"x9f619 x139gbkf x1lliihq x16svsjw x1848etk x1c52epr xh8yej3 x1qn8t5l xcgk4ki x1t137rt x126k92a xhm3zzy xczxdwi\"\n        }\n      }[!!(variant === 'filled') << 0]}>\n          {tokenContent(renderToken)}\n        </RACTokenInput>\n      </FieldBox>\n      <FieldMessage description={description} error={error} />\n    </RACTokenField>;\n}\nexport type { TokenFieldProps, TokenSegment };\nexport default TokenField;"],"mappings":"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"}

package/dist/control/styles.js

@@ -42,7 +42,7 @@ const controlStyles = {
 		k63SB2: "x1c52epr",
 		kb6lSQ: "x1qn8t5l",
 		kLWn49: "xh7dzej",
-		k8WAf4: "x1cmllll",
+		k8WAf4: "x18r0n19",
 		$$css: true
 	},
 	labelDisabled: {

package/dist/control/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","names":["stylex","colors","motion","radii","spacing","stateLayerOpacity","typography","controlStyles","controlDisabled","kkrTdU","$$css","controlReadOnly","disc","kGNEyG","kWkggS","kZKoxP","kaIpWk","kB7OPa","k1xSpc","kmuXW","kzqmXN","kjj79g","kVAEAm","kIyJzY","k1ekBW","kAMwcw","field","k1C7PZ","kumcoG","label","kMwMTN","kMv6JI","kGuDYH","k63SB2","kb6lSQ","kLWn49","k8WAf4","labelDisabled","labelReadOnly","messages","kEXP64"],"sources":["../../src/control/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// The row a selection control draws, shared by Checkbox, Switch and Radio.\n// Each wrote it out in full: the two-column grid, the body-large label with\n// its disabled and read-only fades, the messages cell under the text, and the\n// cursors the control takes in those two states. Switch's own comment already\n// said it drew \"the two-column grid the checkbox uses\" while keeping a second\n// copy, so the coupling was recorded in prose rather than in code — the same\n// thing src/field and src/row were extracted to stop.\n//\n// The set is closed at three. React Aria Components has no fourth component\n// drawing this row, and CheckboxGroup is a container rather than a control.\n// What this is worth is that the three cannot drift apart, and that the\n// repository's own convention — a style more than one component draws lives\n// beside src/components, not inside it — holds here too.\n//\n// Two things deliberately stay with each component.\n//\n// The state layers are three different shapes rather than one shape with\n// three sets of key names. Checkbox carries an `error` key Radio has no\n// equivalent for, Checkbox's pressed set inverts its own key names, and\n// Switch deliberately does not invert at all. One style keyed on a `marked`\n// boolean would have to encode an error branch one caller uses, an inversion\n// another uses, and a documented non-inversion for the third, which costs a\n// reader more than the three short `stylex.create` calls it would replace.\n//\n// And the disc's colour. Checkbox draws it in `onSurface` and Radio in\n// `onSurfaceVariant`, which is the one declaration their otherwise identical\n// discs disagree on, so `disc` holds the other fourteen and each component\n// composes its own colour after.\nconst controlStyles = {\n  controlDisabled: {\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  controlReadOnly: {\n    kkrTdU: \"xt0e3qv\",\n    $$css: true\n  },\n  disc: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kZKoxP: \"x1vqgdyp\",\n    kaIpWk: \"x3y1ksm\",\n    kB7OPa: \"x9f619\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x78zum5\",\n    kmuXW: \"x2lah0s\",\n    kzqmXN: \"x100vrsf\",\n    kjj79g: \"xl56j7k\",\n    kVAEAm: \"x1n2onr6\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"x15406qy\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  field: {\n    kGNEyG: \"x7a106z\",\n    kB7OPa: \"x9f619\",\n    k1C7PZ: \"xpr5407\",\n    k1xSpc: \"xrvj5dj\",\n    kumcoG: \"x1pmbctz\",\n    $$css: true\n  },\n  label: {\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x139gbkf\",\n    kkrTdU: \"x1ypdohk\",\n    kMv6JI: \"x16svsjw\",\n    kGuDYH: \"x1848etk\",\n    k63SB2: \"x1c52epr\",\n    kb6lSQ: \"x1qn8t5l\",\n    kLWn49: \"xh7dzej\",\n    k8WAf4: \"x1cmllll\",\n    $$css: true\n  },\n  labelDisabled: {\n    kMwMTN: \"x1xj74d8\",\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  labelReadOnly: {\n    kkrTdU: \"xt0e3qv\",\n    $$css: true\n  },\n  messages: {\n    kEXP64: \"x1xdureb\",\n    $$css: true\n  }\n};\nexport { controlStyles };"],"mappings":";AAgCA,MAAMO,gBAAgB;CACpBC,iBAAiB;EACfC,QAAQ;EACRC,OAAO;CACT;CACAC,iBAAiB;EACfF,QAAQ;EACRC,OAAO;CACT;CACAE,MAAM;EACJC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRR,QAAQ;EACRS,QAAQ;EACRC,OAAO;EACPC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRf,OAAO;CACT;CACAgB,OAAO;EACLb,QAAQ;EACRI,QAAQ;EACRU,QAAQ;EACRT,QAAQ;EACRU,QAAQ;EACRlB,OAAO;CACT;CACAmB,OAAO;EACLZ,QAAQ;EACRa,QAAQ;EACRrB,QAAQ;EACRsB,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACR1B,OAAO;CACT;CACA2B,eAAe;EACbP,QAAQ;EACRrB,QAAQ;EACRC,OAAO;CACT;CACA4B,eAAe;EACb7B,QAAQ;EACRC,OAAO;CACT;CACA6B,UAAU;EACRC,QAAQ;EACR9B,OAAO;CACT;AACF"}
+{"version":3,"file":"styles.js","names":["stylex","colors","motion","radii","spacing","stateLayerOpacity","typography","TARGET_SIZE","controlStyles","controlDisabled","kkrTdU","$$css","controlReadOnly","disc","kGNEyG","kWkggS","kZKoxP","kaIpWk","kB7OPa","k1xSpc","kmuXW","kzqmXN","kjj79g","kVAEAm","kIyJzY","k1ekBW","kAMwcw","field","k1C7PZ","kumcoG","label","kMwMTN","kMv6JI","kGuDYH","k63SB2","kb6lSQ","kLWn49","k8WAf4","labelDisabled","labelReadOnly","messages","kEXP64"],"sources":["../../src/control/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// The row a selection control draws, shared by Checkbox, Switch and Radio.\n// Each wrote it out in full: the two-column grid, the body-large label with\n// its disabled and read-only fades, the messages cell under the text, and the\n// cursors the control takes in those two states. Switch's own comment already\n// said it drew \"the two-column grid the checkbox uses\" while keeping a second\n// copy, so the coupling was recorded in prose rather than in code — the same\n// thing src/field and src/row were extracted to stop.\n//\n// The set is closed at three. React Aria Components has no fourth component\n// drawing this row, and CheckboxGroup is a container rather than a control.\n// What this is worth is that the three cannot drift apart, and that the\n// repository's own convention — a style more than one component draws lives\n// beside src/components, not inside it — holds here too.\n//\n// Two things deliberately stay with each component.\n//\n// The state layers are three different shapes rather than one shape with\n// three sets of key names. Checkbox carries an `error` key Radio has no\n// equivalent for, Checkbox's pressed set inverts its own key names, and\n// Switch deliberately does not invert at all. One style keyed on a `marked`\n// boolean would have to encode an error branch one caller uses, an inversion\n// another uses, and a documented non-inversion for the third, which costs a\n// reader more than the three short `stylex.create` calls it would replace.\n//\n// And the disc's colour. Checkbox draws it in `onSurface` and Radio in\n// `onSurfaceVariant`, which is the one declaration their otherwise identical\n// discs disagree on, so `disc` holds the other fourteen and each component\n// composes its own colour after.\n// The control's target, which the disc draws at and the label centres its\n// first line on. Stated once because those two have to agree: a disc resized\n// without the label following it would put the control off its own label\n// again, which is the drift this row already had once.\nconst TARGET_SIZE = '40px';\nconst controlStyles = {\n  controlDisabled: {\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  controlReadOnly: {\n    kkrTdU: \"xt0e3qv\",\n    $$css: true\n  },\n  disc: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kZKoxP: \"x1vqgdyp\",\n    kaIpWk: \"x3y1ksm\",\n    kB7OPa: \"x9f619\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x78zum5\",\n    kmuXW: \"x2lah0s\",\n    kzqmXN: \"x100vrsf\",\n    kjj79g: \"xl56j7k\",\n    kVAEAm: \"x1n2onr6\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"x15406qy\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  field: {\n    kGNEyG: \"x7a106z\",\n    kB7OPa: \"x9f619\",\n    k1C7PZ: \"xpr5407\",\n    k1xSpc: \"xrvj5dj\",\n    kumcoG: \"x1pmbctz\",\n    $$css: true\n  },\n  label: {\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x139gbkf\",\n    kkrTdU: \"x1ypdohk\",\n    kMv6JI: \"x16svsjw\",\n    kGuDYH: \"x1848etk\",\n    k63SB2: \"x1c52epr\",\n    kb6lSQ: \"x1qn8t5l\",\n    kLWn49: \"xh7dzej\",\n    k8WAf4: \"x18r0n19\",\n    $$css: true\n  },\n  labelDisabled: {\n    kMwMTN: \"x1xj74d8\",\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  labelReadOnly: {\n    kkrTdU: \"xt0e3qv\",\n    $$css: true\n  },\n  messages: {\n    kEXP64: \"x1xdureb\",\n    $$css: true\n  }\n};\nexport { controlStyles };"],"mappings":";AAqCA,MAAMQ,gBAAgB;CACpBC,iBAAiB;EACfC,QAAQ;EACRC,OAAO;CACT;CACAC,iBAAiB;EACfF,QAAQ;EACRC,OAAO;CACT;CACAE,MAAM;EACJC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRR,QAAQ;EACRS,QAAQ;EACRC,OAAO;EACPC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRf,OAAO;CACT;CACAgB,OAAO;EACLb,QAAQ;EACRI,QAAQ;EACRU,QAAQ;EACRT,QAAQ;EACRU,QAAQ;EACRlB,OAAO;CACT;CACAmB,OAAO;EACLZ,QAAQ;EACRa,QAAQ;EACRrB,QAAQ;EACRsB,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACR1B,OAAO;CACT;CACA2B,eAAe;EACbP,QAAQ;EACRrB,QAAQ;EACRC,OAAO;CACT;CACA4B,eAAe;EACb7B,QAAQ;EACRC,OAAO;CACT;CACA6B,UAAU;EACRC,QAAQ;EACR9B,OAAO;CACT;AACF"}

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

@@ -275,6 +275,10 @@
     padding-block: 22px;
   }
 
+  .x18r0n19 {
+    padding-block: calc((40px - var(--xol8812)) / 2);
+  }
+
   .xpg5a72 {
     padding-block: var(--x1ug6acx);
   }
@@ -1467,12 +1471,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 +1819,6 @@
     transition-duration: .105s;
   }
 
-  .xx6bhzk {
-    transition-duration: .15s;
-  }
-
   .x1rvut6x {
     transition-duration: .25s;
   }
@@ -2531,6 +2531,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 +2675,14 @@
     min-height: 88px;
   }
 
+  .x9ep9ug {
+    min-height: calc(2 * var(--xod9tvo) + var(--x1lrg4gv) + var(--xol8812));
+  }
+
+  .xhm3zzy {
+    min-height: calc(32px + var(--x1lrg4gv));
+  }
+
   .x1chvrdh {
     min-height: var(--x-minBlockSize);
   }
@@ -2733,6 +2757,10 @@
     padding-top: var(--x196ey9q);
   }
 
+  .xczxdwi {
+    padding-top: var(--x1lrg4gv);
+  }
+
   .x1clyivc {
     padding-top: var(--x3km7fe);
   }

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