@kanso-labs/kanso-ui 0.28.5 → 0.29.0

package/{LICENSE → LICENSE.md}

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2025 Kanso
+Copyright (c) 2026 Kanso Labs
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of
 this software and associated documentation files (the "Software"), to deal in

package/README.md

@@ -214,12 +214,64 @@ them unless told which the app supports; React Aria's
 [`@react-aria/optimize-locales-plugin`](https://www.npmjs.com/package/@react-aria/optimize-locales-plugin)
 is how an app says so.
 
+### Icons
+
+The package ships no glyph icons, so every icon comes from the app — an icon
+set, or an inline SVG of its own. Three things are asked of it:
+
+- **`aria-hidden`**, since the control around it carries the name. An
+  `IconButton` takes its name from `aria-label`, and a field's icon is
+  decoration beside a label that already says what the field is for.
+- **`currentColor`** for `fill` or `stroke`, so the icon takes the colour the
+  slot sets — muted in a field, the on-container role inside a filled button,
+  and the disabled fade in either.
+- **`1em` square**, which is what makes one icon serve every size.
+
+```tsx
+function StarIcon() {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="currentColor"
+      height="1em"
+      viewBox="0 0 24 24"
+      width="1em"
+    >
+      <path d="m12 3 2.6 5.6 6.1.8-4.5 4.2 1.2 6-5.4-3-5.4 3 1.2-6L3.3 9.4l6.1-.8z" />
+    </svg>
+  )
+}
+```
+
+`1em` works because the slots that own an icon's size set it as a font size, and
+the icon inherits it:
+
+| Slot                                       | Size an `em` icon takes                              |
+| ------------------------------------------ | ---------------------------------------------------- |
+| `IconButton`                               | 20px, 24px, 24px, 32px and 40px across `xs` to `xxl` |
+| A field's `leadingIcon` and `trailingIcon` | 24px                                                 |
+| `SegmentedButton.Segment`'s `icon`         | 18px                                                 |
+
+**The `leading` and `trailing` slots on a row are different.** A list item, a
+menu item, a tree item and an app bar set no icon size, so an icon there takes
+the size of the text beside it — 16px in a list row. Give an icon in one of
+those a size of its own:
+
+```tsx
+<ListItem leading={<StarIcon height="24" width="24" />}>Headline</ListItem>
+```
+
+An SVG with a `viewBox` and no size at all has no size to shrink from, so what
+it does next belongs to the slot rather than to the icon. In an `IconButton` it
+fills the button edge to edge; in a field's icon slot it collapses and draws
+nothing. Sizing it is what avoids both.
+
 ## Theming
 
-Every design token — color, spacing, radii, shadows, typography, state-layer
-opacity — is backed by a CSS custom property under the `--kui-*` namespace.
-Override any of them in your own stylesheet to retheme every Kanso component,
-independent of your app's build tooling:
+Every design token — color, spacing, radii, sizing, shadows, typography,
+state-layer opacity — is backed by a CSS custom property under the `--kui-*`
+namespace. Override any of them in your own stylesheet to retheme every Kanso
+component, independent of your app's build tooling:
 
 ```css
 :root {
@@ -254,19 +306,65 @@ import '@kanso-labs/kanso-ui/tokens.css'
 If your app also uses StyleX, theme with
 [`stylex.createTheme()`](https://stylexjs.com/docs/learn/theming/) instead — it
 produces a scoped override class rather than a global one. The token objects
-themselves (`colors`, `spacing`, `typography`, `radii`, `shadows`,
-`stateLayerOpacity`) aren't part of the public API yet; open an issue if you
-need them exported.
+themselves (`colors`, `typography`, `spacing`, `radii`, `sizing`, `shadows`,
+`stateLayerOpacity` and `motion`) aren't part of the public API yet; open an
+issue if you need them exported.
 
 ## Development
 
-- `npm run storybook` — component playground
-- `npm run build-storybook` — build that playground as a static site, the same
-  way the `Deploy Storybook` workflow does
-- `npm run tokens:build` — regenerate `src/tokens/design.tokens.*` from
-  `src/tokens/design.tokens.json`
-- `npm test` — Storybook story tests (vitest, headless Chromium)
-- `npm run build` — build the publishable package into `dist/`
+Fork, then clone the repository:
+
+```shell
+git clone https://github.com/your-username/kanso-ui.git
+```
+
+Install with the Node version in [`.tool-versions`](.tool-versions). CI resolves
+it from that file, and an older npm rewrites `package-lock.json` as it installs.
+If `node --version` disagrees:
+
+```shell
+mise exec node@"$(awk '/^nodejs/{print $2}' .tool-versions)" -- npm install
+```
+
+`npm install` also fetches the Playwright browsers the tests run in, through the
+`prepare` script.
+
+### The commands CI runs
+
+Between them these are the whole gate:
+
+```shell
+npm run lint   # oxlint, then ESLint, then oxfmt --check
+npm run build  # tsc -b, then tsdown into dist/
+npm test       # Storybook story tests, vitest in headless Chromium
+```
+
+`npm run package:check` runs publint over `dist/`, so it needs a build first.
+
+**oxfmt formats this repository, not Prettier**, and it covers Markdown, JSON
+and YAML as well as TypeScript. `npm run lint -- --fix` will not reformat
+anything — reach for `npm run format`.
+
+### Everything else
+
+| Command                           | What it does                                          |
+| --------------------------------- | ----------------------------------------------------- |
+| `npm run storybook`               | the component playground (`npm run dev` is an alias)  |
+| `npm run build-storybook`         | that playground as a static site, as CI publishes it  |
+| `npm run test:coverage`           | the suite with v8 coverage, written to `coverage/`    |
+| `npm run tokens:build`            | regenerate `src/tokens/design.tokens.*` from the JSON |
+| `npm run component:new -- <name>` | scaffold `src/components/<name>` and its entries      |
+
+[`AGENTS.md`](AGENTS.md) carries the conventions every component follows, the
+reasoning behind them, and the traps. It is written for coding agents and is
+equally the fullest thing a human contributor can read.
+
+Contribution guidelines for the organization are in
+[`kanso-labs/.github`](https://github.com/kanso-labs/.github).
+
+## License
+
+MIT
 
 [build-shield]:
   https://img.shields.io/github/actions/workflow/status/kanso-labs/kanso-ui/build.yaml?branch=main&label=Build
@@ -275,7 +373,7 @@ need them exported.
 [codecov]: https://codecov.io/gh/kanso-labs/kanso-ui
 [coverage-shield]:
   https://img.shields.io/codecov/c/github/kanso-labs/kanso-ui?label=Coverage
-[license]: ./LICENSE
+[license]: ./LICENSE.md
 [license-shield]: https://img.shields.io/github/license/kanso-labs/kanso-ui
 [npm]: https://www.npmjs.com/package/@kanso-labs/kanso-ui
 [npm-downloads-shield]: https://img.shields.io/npm/dm/@kanso-labs/kanso-ui

package/dist/calendar/styles.js

@@ -4,7 +4,7 @@ const calendarStyles = {
 		kGNEyG: "x6s0dn4",
 		kWkggS: "x83qkoq x1p2om7n xjbqb8w",
 		kZKoxP: "x1vqgdyp",
-		kaIpWk: "x3y1ksm",
+		kaIpWk: "x16fbrrb",
 		kB7OPa: "x9f619",
 		kMwMTN: "x139gbkf",
 		kkrTdU: "x1ypdohk",
@@ -34,13 +34,13 @@ const calendarStyles = {
 		$$css: true
 	},
 	cellRangeEnd: {
-		kT0f0o: "x1mh50ju",
-		kfmiAY: "x13dhofw",
+		kT0f0o: "x187kppt",
+		kfmiAY: "x1fpsnkq",
 		$$css: true
 	},
 	cellRangeStart: {
-		kVL7Gh: "xqmr837",
-		krdFHd: "xz4iguh",
+		kVL7Gh: "x17kgqx",
+		krdFHd: "x1uni95s",
 		$$css: true
 	},
 	cellSelected: {

package/dist/calendar/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","names":["stylex","colors","radii","spacing","stateLayerOpacity","typography","ROW_BLOCK_SIZE","WEEKS_HELD","calendarStyles","cell","kGNEyG","kWkggS","kZKoxP","kaIpWk","kB7OPa","kMwMTN","kkrTdU","k1xSpc","kMv6JI","kGuDYH","k63SB2","kzqmXN","kjj79g","kb6lSQ","kLWn49","kUOVxO","$$css","cellDisabled","cellInRange","cellRangeEnd","kT0f0o","kfmiAY","cellRangeStart","kVL7Gh","krdFHd","cellSelected","cellToday","kVAM5u","ksu8eU","kMzoRj","chevron","chevronGlyph","k3aq6I","chevronGlyphPrevious","grid","kLvRdT","kheTzg","header","kOIVth","kAzted","headerCell","heading","kogj98","k9WMMc","months","root","kXwgrk","k7Eaqz","kmVPX3"],"sources":["../../src/calendar/styles.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport '../tokens/design.tokens.stylex';\nimport { colors, radii, spacing, stateLayerOpacity, typography } from '../tokens/design.tokens.stylex';\n\n// The styles Calendar and RangeCalendar both draw. Apart from either\n// component so the two cannot drift, and outside `src/components` because a\n// directory there is a public component with stories, a barrel entry and a\n// `styling.test.tsx` case — which shared styles are none of.\n//\n// The values are the date pickers page's docked calendar, named in\n// `src/components/calendar/index.tsx` along with the departures from it. What\n// is only a range's — the band between the two ends — is marked as the\n// library's own where it is defined, since the page tokenises no such thing.\n\n// One row of the grid. The weekday row and every week of dates are the same\n// 40dp, so `cell`, `headerCell` and the room `months` reserves are all this\n// one number — a date resized without the reservation following it would put\n// the calendar's height back on its month.\nconst ROW_BLOCK_SIZE = '40px';\n\n// The weeks the grid holds room for, which is the most any month occupies: a\n// 31-day month beginning on the last day of a week runs one day, then four\n// whole weeks, then two days. February 2026 is the other end at four. Holding\n// six draws every month in the box the longest one fills.\nconst WEEKS_HELD = 6;\nconst calendarStyles = {\n  cell: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"x83qkoq x1p2om7n xjbqb8w\",\n    kZKoxP: \"x1vqgdyp\",\n    kaIpWk: \"x3y1ksm\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x139gbkf\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x78zum5\",\n    kMv6JI: \"x16svsjw\",\n    kGuDYH: \"x1848etk\",\n    k63SB2: \"x1c52epr\",\n    kzqmXN: \"x100vrsf\",\n    kjj79g: \"xl56j7k\",\n    kb6lSQ: \"x1qn8t5l\",\n    kLWn49: \"xh7dzej\",\n    kUOVxO: \"x34s64n\",\n    $$css: true\n  },\n  cellDisabled: {\n    kWkggS: \"xjbqb8w\",\n    kMwMTN: \"x9w6zvh\",\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  cellInRange: {\n    kWkggS: \"x1mpme18 x1q7sp4o x15dekr4\",\n    kaIpWk: \"x2u8bby\",\n    kMwMTN: \"x1sawysd\",\n    kzqmXN: \"xh8yej3\",\n    kUOVxO: \"xrxpjvj\",\n    $$css: true\n  },\n  cellRangeEnd: {\n    kT0f0o: \"x1mh50ju\",\n    kfmiAY: \"x13dhofw\",\n    $$css: true\n  },\n  cellRangeStart: {\n    kVL7Gh: \"xqmr837\",\n    krdFHd: \"xz4iguh\",\n    $$css: true\n  },\n  cellSelected: {\n    kWkggS: \"x1nik15g x1q2w5h1 xnety89\",\n    kMwMTN: \"xwjo7ld\",\n    $$css: true\n  },\n  cellToday: {\n    kVAM5u: \"x1uajy3w\",\n    ksu8eU: \"x1y0btm7\",\n    kMzoRj: \"xmkeg23\",\n    kMwMTN: \"x1mxwv8y\",\n    $$css: true\n  },\n  chevron: {\n    kUOVxO: \"x34s64n\",\n    $$css: true\n  },\n  chevronGlyph: {\n    kZKoxP: \"xxk0z11\",\n    kzqmXN: \"xvy4d1p\",\n    k3aq6I: \"x19axjrm x1c071of\",\n    $$css: true\n  },\n  chevronGlyphPrevious: {\n    k3aq6I: \"xdg80k9 xpk2tj9\",\n    $$css: true\n  },\n  grid: {\n    kLvRdT: \"x1vathgz\",\n    kheTzg: \"x1gukg7c\",\n    kzqmXN: \"xh8yej3\",\n    $$css: true\n  },\n  header: {\n    kGNEyG: \"x6s0dn4\",\n    k1xSpc: \"x78zum5\",\n    kOIVth: \"x126z3so\",\n    kjj79g: \"x1qughib\",\n    kAzted: \"x1ba4aug\",\n    $$css: true\n  },\n  headerCell: {\n    kZKoxP: \"x1vqgdyp\",\n    kMwMTN: \"x139gbkf\",\n    kMv6JI: \"x16svsjw\",\n    kGuDYH: \"x1848etk\",\n    k63SB2: \"x1c52epr\",\n    kb6lSQ: \"x1qn8t5l\",\n    kLWn49: \"xh7dzej\",\n    $$css: true\n  },\n  heading: {\n    kMwMTN: \"x1w5n3ug\",\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    kogj98: \"x1ghz6dp\",\n    k9WMMc: \"x2b8uid\",\n    $$css: true\n  },\n  months: {\n    kGNEyG: \"x7a106z\",\n    k1xSpc: \"x78zum5\",\n    kOIVth: \"xj2l1yv\",\n    kAzted: \"x1fivsg2\",\n    $$css: true\n  },\n  root: {\n    kWkggS: \"xvkjz1l\",\n    kaIpWk: \"xhpdng0\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x139gbkf\",\n    k1xSpc: \"x78zum5\",\n    kXwgrk: \"xdt5ytf\",\n    kOIVth: \"x1gka490\",\n    kzqmXN: \"xeq5yr9\",\n    k7Eaqz: \"x1gvwcb\",\n    kmVPX3: \"xa36j16\",\n    $$css: true\n  }\n};\nexport { calendarStyles };"],"mappings":";AAyBA,MAAMQ,iBAAiB;CACrBC,MAAM;EACJC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;CACT;CACAC,cAAc;EACZhB,QAAQ;EACRI,QAAQ;EACRC,QAAQ;EACRU,OAAO;CACT;CACAE,aAAa;EACXjB,QAAQ;EACRE,QAAQ;EACRE,QAAQ;EACRM,QAAQ;EACRI,QAAQ;EACRC,OAAO;CACT;CACAG,cAAc;EACZC,QAAQ;EACRC,QAAQ;EACRL,OAAO;CACT;CACAM,gBAAgB;EACdC,QAAQ;EACRC,QAAQ;EACRR,OAAO;CACT;CACAS,cAAc;EACZxB,QAAQ;EACRI,QAAQ;EACRW,OAAO;CACT;CACAU,WAAW;EACTC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRxB,QAAQ;EACRW,OAAO;CACT;CACAc,SAAS;EACPf,QAAQ;EACRC,OAAO;CACT;CACAe,cAAc;EACZ7B,QAAQ;EACRS,QAAQ;EACRqB,QAAQ;EACRhB,OAAO;CACT;CACAiB,sBAAsB;EACpBD,QAAQ;EACRhB,OAAO;CACT;CACAkB,MAAM;EACJC,QAAQ;EACRC,QAAQ;EACRzB,QAAQ;EACRK,OAAO;CACT;CACAqB,QAAQ;EACNrC,QAAQ;EACRO,QAAQ;EACR+B,QAAQ;EACR1B,QAAQ;EACR2B,QAAQ;EACRvB,OAAO;CACT;CACAwB,YAAY;EACVtC,QAAQ;EACRG,QAAQ;EACRG,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRG,QAAQ;EACRC,QAAQ;EACRE,OAAO;CACT;CACAyB,SAAS;EACPpC,QAAQ;EACRG,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRG,QAAQ;EACRC,QAAQ;EACR4B,QAAQ;EACRC,QAAQ;EACR3B,OAAO;CACT;CACA4B,QAAQ;EACN5C,QAAQ;EACRO,QAAQ;EACR+B,QAAQ;EACRC,QAAQ;EACRvB,OAAO;CACT;CACA6B,MAAM;EACJ5C,QAAQ;EACRE,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRE,QAAQ;EACRuC,QAAQ;EACRR,QAAQ;EACR3B,QAAQ;EACRoC,QAAQ;EACRC,QAAQ;EACRhC,OAAO;CACT;AACF"}
+{"version":3,"file":"styles.js","names":["stylex","colors","radii","spacing","stateLayerOpacity","typography","ROW_BLOCK_SIZE","WEEKS_HELD","calendarStyles","cell","kGNEyG","kWkggS","kZKoxP","kaIpWk","kB7OPa","kMwMTN","kkrTdU","k1xSpc","kMv6JI","kGuDYH","k63SB2","kzqmXN","kjj79g","kb6lSQ","kLWn49","kUOVxO","$$css","cellDisabled","cellInRange","cellRangeEnd","kT0f0o","kfmiAY","cellRangeStart","kVL7Gh","krdFHd","cellSelected","cellToday","kVAM5u","ksu8eU","kMzoRj","chevron","chevronGlyph","k3aq6I","chevronGlyphPrevious","grid","kLvRdT","kheTzg","header","kOIVth","kAzted","headerCell","heading","kogj98","k9WMMc","months","root","kXwgrk","k7Eaqz","kmVPX3"],"sources":["../../src/calendar/styles.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport '../tokens/design.tokens.stylex';\nimport { colors, radii, spacing, stateLayerOpacity, typography } from '../tokens/design.tokens.stylex';\n\n// The styles Calendar and RangeCalendar both draw. Apart from either\n// component so the two cannot drift, and outside `src/components` because a\n// directory there is a public component with stories, a barrel entry and a\n// `styling.test.tsx` case — which shared styles are none of.\n//\n// The values are the date pickers page's docked calendar, named in\n// `src/components/calendar/index.tsx` along with the departures from it. What\n// is only a range's — the band between the two ends — is marked as the\n// library's own where it is defined, since the page tokenises no such thing.\n\n// One row of the grid. The weekday row and every week of dates are the same\n// 40dp, so `cell`, `headerCell` and the room `months` reserves are all this\n// one number — a date resized without the reservation following it would put\n// the calendar's height back on its month.\nconst ROW_BLOCK_SIZE = '40px';\n\n// The weeks the grid holds room for, which is the most any month occupies: a\n// 31-day month beginning on the last day of a week runs one day, then four\n// whole weeks, then two days. February 2026 is the other end at four. Holding\n// six draws every month in the box the longest one fills.\nconst WEEKS_HELD = 6;\nconst calendarStyles = {\n  cell: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"x83qkoq x1p2om7n xjbqb8w\",\n    kZKoxP: \"x1vqgdyp\",\n    kaIpWk: \"x16fbrrb\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x139gbkf\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x78zum5\",\n    kMv6JI: \"x16svsjw\",\n    kGuDYH: \"x1848etk\",\n    k63SB2: \"x1c52epr\",\n    kzqmXN: \"x100vrsf\",\n    kjj79g: \"xl56j7k\",\n    kb6lSQ: \"x1qn8t5l\",\n    kLWn49: \"xh7dzej\",\n    kUOVxO: \"x34s64n\",\n    $$css: true\n  },\n  cellDisabled: {\n    kWkggS: \"xjbqb8w\",\n    kMwMTN: \"x9w6zvh\",\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  cellInRange: {\n    kWkggS: \"x1mpme18 x1q7sp4o x15dekr4\",\n    kaIpWk: \"x2u8bby\",\n    kMwMTN: \"x1sawysd\",\n    kzqmXN: \"xh8yej3\",\n    kUOVxO: \"xrxpjvj\",\n    $$css: true\n  },\n  cellRangeEnd: {\n    kT0f0o: \"x187kppt\",\n    kfmiAY: \"x1fpsnkq\",\n    $$css: true\n  },\n  cellRangeStart: {\n    kVL7Gh: \"x17kgqx\",\n    krdFHd: \"x1uni95s\",\n    $$css: true\n  },\n  cellSelected: {\n    kWkggS: \"x1nik15g x1q2w5h1 xnety89\",\n    kMwMTN: \"xwjo7ld\",\n    $$css: true\n  },\n  cellToday: {\n    kVAM5u: \"x1uajy3w\",\n    ksu8eU: \"x1y0btm7\",\n    kMzoRj: \"xmkeg23\",\n    kMwMTN: \"x1mxwv8y\",\n    $$css: true\n  },\n  chevron: {\n    kUOVxO: \"x34s64n\",\n    $$css: true\n  },\n  chevronGlyph: {\n    kZKoxP: \"xxk0z11\",\n    kzqmXN: \"xvy4d1p\",\n    k3aq6I: \"x19axjrm x1c071of\",\n    $$css: true\n  },\n  chevronGlyphPrevious: {\n    k3aq6I: \"xdg80k9 xpk2tj9\",\n    $$css: true\n  },\n  grid: {\n    kLvRdT: \"x1vathgz\",\n    kheTzg: \"x1gukg7c\",\n    kzqmXN: \"xh8yej3\",\n    $$css: true\n  },\n  header: {\n    kGNEyG: \"x6s0dn4\",\n    k1xSpc: \"x78zum5\",\n    kOIVth: \"x126z3so\",\n    kjj79g: \"x1qughib\",\n    kAzted: \"x1ba4aug\",\n    $$css: true\n  },\n  headerCell: {\n    kZKoxP: \"x1vqgdyp\",\n    kMwMTN: \"x139gbkf\",\n    kMv6JI: \"x16svsjw\",\n    kGuDYH: \"x1848etk\",\n    k63SB2: \"x1c52epr\",\n    kb6lSQ: \"x1qn8t5l\",\n    kLWn49: \"xh7dzej\",\n    $$css: true\n  },\n  heading: {\n    kMwMTN: \"x1w5n3ug\",\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    kogj98: \"x1ghz6dp\",\n    k9WMMc: \"x2b8uid\",\n    $$css: true\n  },\n  months: {\n    kGNEyG: \"x7a106z\",\n    k1xSpc: \"x78zum5\",\n    kOIVth: \"xj2l1yv\",\n    kAzted: \"x1fivsg2\",\n    $$css: true\n  },\n  root: {\n    kWkggS: \"xvkjz1l\",\n    kaIpWk: \"xhpdng0\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x139gbkf\",\n    k1xSpc: \"x78zum5\",\n    kXwgrk: \"xdt5ytf\",\n    kOIVth: \"x1gka490\",\n    kzqmXN: \"xeq5yr9\",\n    k7Eaqz: \"x1gvwcb\",\n    kmVPX3: \"xa36j16\",\n    $$css: true\n  }\n};\nexport { calendarStyles };"],"mappings":";AAyBA,MAAMQ,iBAAiB;CACrBC,MAAM;EACJC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;CACT;CACAC,cAAc;EACZhB,QAAQ;EACRI,QAAQ;EACRC,QAAQ;EACRU,OAAO;CACT;CACAE,aAAa;EACXjB,QAAQ;EACRE,QAAQ;EACRE,QAAQ;EACRM,QAAQ;EACRI,QAAQ;EACRC,OAAO;CACT;CACAG,cAAc;EACZC,QAAQ;EACRC,QAAQ;EACRL,OAAO;CACT;CACAM,gBAAgB;EACdC,QAAQ;EACRC,QAAQ;EACRR,OAAO;CACT;CACAS,cAAc;EACZxB,QAAQ;EACRI,QAAQ;EACRW,OAAO;CACT;CACAU,WAAW;EACTC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRxB,QAAQ;EACRW,OAAO;CACT;CACAc,SAAS;EACPf,QAAQ;EACRC,OAAO;CACT;CACAe,cAAc;EACZ7B,QAAQ;EACRS,QAAQ;EACRqB,QAAQ;EACRhB,OAAO;CACT;CACAiB,sBAAsB;EACpBD,QAAQ;EACRhB,OAAO;CACT;CACAkB,MAAM;EACJC,QAAQ;EACRC,QAAQ;EACRzB,QAAQ;EACRK,OAAO;CACT;CACAqB,QAAQ;EACNrC,QAAQ;EACRO,QAAQ;EACR+B,QAAQ;EACR1B,QAAQ;EACR2B,QAAQ;EACRvB,OAAO;CACT;CACAwB,YAAY;EACVtC,QAAQ;EACRG,QAAQ;EACRG,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRG,QAAQ;EACRC,QAAQ;EACRE,OAAO;CACT;CACAyB,SAAS;EACPpC,QAAQ;EACRG,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRG,QAAQ;EACRC,QAAQ;EACR4B,QAAQ;EACRC,QAAQ;EACR3B,OAAO;CACT;CACA4B,QAAQ;EACN5C,QAAQ;EACRO,QAAQ;EACR+B,QAAQ;EACRC,QAAQ;EACRvB,OAAO;CACT;CACA6B,MAAM;EACJ5C,QAAQ;EACRE,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRE,QAAQ;EACRuC,QAAQ;EACRR,QAAQ;EACR3B,QAAQ;EACRoC,QAAQ;EACRC,QAAQ;EACRhC,OAAO;CACT;AACF"}

package/dist/chip/styles.js

@@ -2,7 +2,7 @@
 const chipStyles = {
 	base: {
 		kGNEyG: "x6s0dn4",
-		kZKoxP: "x10w6t97",
+		kZKoxP: "xig8zya",
 		kaIpWk: "x1xdvaa9",
 		ksu8eU: "x1y0btm7",
 		kMzoRj: "xmkeg23",
@@ -57,7 +57,7 @@ const chipStyles = {
 		kGNEyG: "x6s0dn4",
 		kWkggS: "xy3r1oc x15a1ka xjbqb8w",
 		kZKoxP: "xmix8c7",
-		kaIpWk: "x3y1ksm",
+		kaIpWk: "x1dkaolv",
 		kMzoRj: "xc342km",
 		kB7OPa: "x9f619",
 		kMwMTN: "x1heor9g",

package/dist/chip/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","names":["stylex","colors","motion","radii","spacing","stateLayerOpacity","typography","chipStyles","base","kGNEyG","kZKoxP","kaIpWk","ksu8eU","kMzoRj","kB7OPa","kkrTdU","k1xSpc","kmuXW","kMv6JI","kGuDYH","k63SB2","kOIVth","kb6lSQ","kLWn49","k8WAf4","kg3NbH","kIyJzY","k1ekBW","kAMwcw","$$css","disabled","kMwMTN","disabledSelected","kWkggS","disabledUnselected","kVAM5u","glyph","kzqmXN","kjj79g","keTefX","glyphSvg","remove","k71WvV","kjBf7l","kInvED","k3XXqK","kMeerF","kmVPX3","removeGlyph","selected","unselected"],"sources":["../../src/chip/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 pill the chips page draws, shared by the two components that draw one:\n// Chip, which is a toggle on its own, and ChipGroup's chip, which is one of a\n// set that can also be removed. The measurements and roles are the page's\n// filter chip — a 32dp container with an 8dp corner and 16dp of inline\n// padding, an outline variant border while unselected, the secondary\n// container pair once selected.\n//\n// Each state composites an on-colour over its own container at the\n// interaction state's opacity rather than swapping in a separate hover\n// colour. `calc(<opacity> * 100%)` turns the token's unitless 0-1 ratio into\n// the percentage `color-mix()` takes, and it is inlined at each property\n// because @stylexjs/babel-plugin only statically recognises expressions\n// written directly as property values.\n//\n// The selected chip drops its border rather than recolouring it: it has a\n// container of its own to define its edge, and a border on top of that reads\n// as a second, competing outline.\n//\n// Disabled is applied from render state rather than from `:disabled`. Chip is\n// a button and would match the pseudo-class; a chip in a group is React\n// Aria's `Tag`, which is a div and never will. One mechanism serves both, and\n// StyleX replaces a property whole, so the disabled styles take the hover and\n// pressed branches of whichever state they are applied over.\n//\n// A selected chip carries the page's check before its label, which is what\n// makes the selection legible without colour. The two containers differ in\n// colour alone, and under a scheme whose secondary container sits close to\n// the surface — or for a reader who does not see colour — that is no\n// difference at all.\n//\n// The chip widens when the check appears, and that is the page's behaviour\n// rather than a cost of drawing it: a chip is flow content, laid out in a\n// row that wraps, so nothing around it has a width to hold. A segmented\n// button's segments are equal columns of one track, which is a different\n// geometry answering a different question, and the two should not be read\n// across.\n//\n// Apart from any component so a chip in a group and a chip on its own cannot\n// drift; see `src/row` for the same arrangement around a list's row.\n\nconst chipStyles = {\n  base: {\n    kGNEyG: \"x6s0dn4\",\n    kZKoxP: \"x10w6t97\",\n    kaIpWk: \"x1xdvaa9\",\n    ksu8eU: \"x1y0btm7\",\n    kMzoRj: \"xmkeg23\",\n    kB7OPa: \"x9f619\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x3nfvp2\",\n    kmuXW: \"x2lah0s\",\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kOIVth: \"x126z3so\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    k8WAf4: \"xt970qd\",\n    kg3NbH: \"x790zyz\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"x1eaenvl\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  disabled: {\n    kMwMTN: \"x1xj74d8\",\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  disabledSelected: {\n    kWkggS: \"xepofeg\",\n    $$css: true\n  },\n  disabledUnselected: {\n    kWkggS: \"xjbqb8w\",\n    kVAM5u: \"xrh88j3\",\n    $$css: true\n  },\n  glyph: {\n    kGNEyG: \"x6s0dn4\",\n    kZKoxP: \"xmix8c7\",\n    k1xSpc: \"x3nfvp2\",\n    kmuXW: \"x2lah0s\",\n    kGuDYH: \"xosj86m\",\n    kzqmXN: \"x1xp8n7a\",\n    kjj79g: \"xl56j7k\",\n    keTefX: \"xxuhe3a\",\n    $$css: true\n  },\n  glyphSvg: {\n    kZKoxP: \"x5yr21d\",\n    kzqmXN: \"xh8yej3\",\n    $$css: true\n  },\n  remove: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xy3r1oc x15a1ka xjbqb8w\",\n    kZKoxP: \"xmix8c7\",\n    kaIpWk: \"x3y1ksm\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1heor9g\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x3nfvp2\",\n    kmuXW: \"x2lah0s\",\n    kzqmXN: \"x1xp8n7a\",\n    kjj79g: \"xl56j7k\",\n    k71WvV: \"x1kfc2zf\",\n    kjBf7l: \"x14ytart\",\n    kInvED: \"x1y3gkto\",\n    k3XXqK: \"x9v5kkp x1t137rt\",\n    kMeerF: \"x1de99jn\",\n    kmVPX3: \"x1717udv\",\n    $$css: true\n  },\n  removeGlyph: {\n    kZKoxP: \"xmix8c7\",\n    kzqmXN: \"x1xp8n7a\",\n    $$css: true\n  },\n  selected: {\n    kWkggS: \"xnqsvhv xlizrex x15dekr4\",\n    kVAM5u: \"x9r1u3d\",\n    kMwMTN: \"x1sawysd\",\n    $$css: true\n  },\n  unselected: {\n    kWkggS: \"x83qkoq x1p2om7n xjbqb8w\",\n    kVAM5u: \"x133yhug\",\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  }\n};\nexport { chipStyles };"],"mappings":";AA4CA,MAAMO,aAAa;CACjBC,MAAM;EACJC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;EACPC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;CACT;CACAC,UAAU;EACRC,QAAQ;EACRhB,QAAQ;EACRc,OAAO;CACT;CACAG,kBAAkB;EAChBC,QAAQ;EACRJ,OAAO;CACT;CACAK,oBAAoB;EAClBD,QAAQ;EACRE,QAAQ;EACRN,OAAO;CACT;CACAO,OAAO;EACL3B,QAAQ;EACRC,QAAQ;EACRM,QAAQ;EACRC,OAAO;EACPE,QAAQ;EACRkB,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRV,OAAO;CACT;CACAW,UAAU;EACR9B,QAAQ;EACR2B,QAAQ;EACRR,OAAO;CACT;CACAY,QAAQ;EACNhC,QAAQ;EACRwB,QAAQ;EACRvB,QAAQ;EACRC,QAAQ;EACRE,QAAQ;EACRC,QAAQ;EACRiB,QAAQ;EACRhB,QAAQ;EACRC,QAAQ;EACRC,OAAO;EACPoB,QAAQ;EACRC,QAAQ;EACRI,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRlB,OAAO;CACT;CACAmB,aAAa;EACXtC,QAAQ;EACR2B,QAAQ;EACRR,OAAO;CACT;CACAoB,UAAU;EACRhB,QAAQ;EACRE,QAAQ;EACRJ,QAAQ;EACRF,OAAO;CACT;CACAqB,YAAY;EACVjB,QAAQ;EACRE,QAAQ;EACRJ,QAAQ;EACRF,OAAO;CACT;AACF"}
+{"version":3,"file":"styles.js","names":["stylex","colors","motion","radii","sizing","spacing","stateLayerOpacity","typography","chipStyles","base","kGNEyG","kZKoxP","kaIpWk","ksu8eU","kMzoRj","kB7OPa","kkrTdU","k1xSpc","kmuXW","kMv6JI","kGuDYH","k63SB2","kOIVth","kb6lSQ","kLWn49","k8WAf4","kg3NbH","kIyJzY","k1ekBW","kAMwcw","$$css","disabled","kMwMTN","disabledSelected","kWkggS","disabledUnselected","kVAM5u","glyph","kzqmXN","kjj79g","keTefX","glyphSvg","remove","k71WvV","kjBf7l","kInvED","k3XXqK","kMeerF","kmVPX3","removeGlyph","selected","unselected"],"sources":["../../src/chip/styles.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport '../tokens/design.tokens.stylex';\nimport { colors, motion, radii, sizing, spacing, stateLayerOpacity, typography } from '../tokens/design.tokens.stylex';\n\n// The pill the chips page draws, shared by the three components that draw\n// one: Chip, which is a toggle on its own; ChipGroup's chip, which is one of\n// a set that can also be removed; and TokenField's token, which takes `base`\n// and `unselected` alone — a token is not selectable, so it reaches for\n// neither the selected container nor the check below. The measurements and\n// roles are the page's filter chip — a 32dp container with an 8dp corner and 16dp of inline\n// padding, an outline variant border while unselected, the secondary\n// container pair once selected.\n//\n// Each state composites an on-colour over its own container at the\n// interaction state's opacity rather than swapping in a separate hover\n// colour. `calc(<opacity> * 100%)` turns the token's unitless 0-1 ratio into\n// the percentage `color-mix()` takes, and it is inlined at each property\n// because @stylexjs/babel-plugin only statically recognises expressions\n// written directly as property values.\n//\n// The selected chip drops its border rather than recolouring it: it has a\n// container of its own to define its edge, and a border on top of that reads\n// as a second, competing outline.\n//\n// Disabled is applied from render state rather than from `:disabled`. Chip is\n// a button and would match the pseudo-class; a chip in a group is React\n// Aria's `Tag`, which is a div and never will. One mechanism serves both, and\n// StyleX replaces a property whole, so the disabled styles take the hover and\n// pressed branches of whichever state they are applied over.\n//\n// A selected chip carries the page's check before its label, which is what\n// makes the selection legible without colour. The two containers differ in\n// colour alone, and under a scheme whose secondary container sits close to\n// the surface — or for a reader who does not see colour — that is no\n// difference at all.\n//\n// The chip widens when the check appears, and that is the page's behaviour\n// rather than a cost of drawing it: a chip is flow content, laid out in a\n// row that wraps, so nothing around it has a width to hold. A segmented\n// button's segments are equal columns of one track, which is a different\n// geometry answering a different question, and the two should not be read\n// across.\n//\n// Apart from any component so a chip in a group and a chip on its own cannot\n// drift; see `src/row` for the same arrangement around a list's row.\n\nconst chipStyles = {\n  base: {\n    kGNEyG: \"x6s0dn4\",\n    kZKoxP: \"xig8zya\",\n    kaIpWk: \"x1xdvaa9\",\n    ksu8eU: \"x1y0btm7\",\n    kMzoRj: \"xmkeg23\",\n    kB7OPa: \"x9f619\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x3nfvp2\",\n    kmuXW: \"x2lah0s\",\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kOIVth: \"x126z3so\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    k8WAf4: \"xt970qd\",\n    kg3NbH: \"x790zyz\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"x1eaenvl\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  disabled: {\n    kMwMTN: \"x1xj74d8\",\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  disabledSelected: {\n    kWkggS: \"xepofeg\",\n    $$css: true\n  },\n  disabledUnselected: {\n    kWkggS: \"xjbqb8w\",\n    kVAM5u: \"xrh88j3\",\n    $$css: true\n  },\n  glyph: {\n    kGNEyG: \"x6s0dn4\",\n    kZKoxP: \"xmix8c7\",\n    k1xSpc: \"x3nfvp2\",\n    kmuXW: \"x2lah0s\",\n    kGuDYH: \"xosj86m\",\n    kzqmXN: \"x1xp8n7a\",\n    kjj79g: \"xl56j7k\",\n    keTefX: \"xxuhe3a\",\n    $$css: true\n  },\n  glyphSvg: {\n    kZKoxP: \"x5yr21d\",\n    kzqmXN: \"xh8yej3\",\n    $$css: true\n  },\n  remove: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xy3r1oc x15a1ka xjbqb8w\",\n    kZKoxP: \"xmix8c7\",\n    kaIpWk: \"x1dkaolv\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1heor9g\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x3nfvp2\",\n    kmuXW: \"x2lah0s\",\n    kzqmXN: \"x1xp8n7a\",\n    kjj79g: \"xl56j7k\",\n    k71WvV: \"x1kfc2zf\",\n    kjBf7l: \"x14ytart\",\n    kInvED: \"x1y3gkto\",\n    k3XXqK: \"x9v5kkp x1t137rt\",\n    kMeerF: \"x1de99jn\",\n    kmVPX3: \"x1717udv\",\n    $$css: true\n  },\n  removeGlyph: {\n    kZKoxP: \"xmix8c7\",\n    kzqmXN: \"x1xp8n7a\",\n    $$css: true\n  },\n  selected: {\n    kWkggS: \"xnqsvhv xlizrex x15dekr4\",\n    kVAM5u: \"x9r1u3d\",\n    kMwMTN: \"x1sawysd\",\n    $$css: true\n  },\n  unselected: {\n    kWkggS: \"x83qkoq x1p2om7n xjbqb8w\",\n    kVAM5u: \"x133yhug\",\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  }\n};\nexport { chipStyles };"],"mappings":";AA8CA,MAAMQ,aAAa;CACjBC,MAAM;EACJC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;EACPC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;CACT;CACAC,UAAU;EACRC,QAAQ;EACRhB,QAAQ;EACRc,OAAO;CACT;CACAG,kBAAkB;EAChBC,QAAQ;EACRJ,OAAO;CACT;CACAK,oBAAoB;EAClBD,QAAQ;EACRE,QAAQ;EACRN,OAAO;CACT;CACAO,OAAO;EACL3B,QAAQ;EACRC,QAAQ;EACRM,QAAQ;EACRC,OAAO;EACPE,QAAQ;EACRkB,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRV,OAAO;CACT;CACAW,UAAU;EACR9B,QAAQ;EACR2B,QAAQ;EACRR,OAAO;CACT;CACAY,QAAQ;EACNhC,QAAQ;EACRwB,QAAQ;EACRvB,QAAQ;EACRC,QAAQ;EACRE,QAAQ;EACRC,QAAQ;EACRiB,QAAQ;EACRhB,QAAQ;EACRC,QAAQ;EACRC,OAAO;EACPoB,QAAQ;EACRC,QAAQ;EACRI,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRlB,OAAO;CACT;CACAmB,aAAa;EACXtC,QAAQ;EACR2B,QAAQ;EACRR,OAAO;CACT;CACAoB,UAAU;EACRhB,QAAQ;EACRE,QAAQ;EACRJ,QAAQ;EACRF,OAAO;CACT;CACAqB,YAAY;EACVjB,QAAQ;EACRE,QAAQ;EACRJ,QAAQ;EACRF,OAAO;CACT;AACF"}

package/dist/collection/styles.js

@@ -28,7 +28,7 @@ const collectionStyles = {
 		kB7OPa: "x9f619",
 		k1xSpc: "x78zum5",
 		kjj79g: "xl56j7k",
-		kAzted: "xbktkl8",
+		kAzted: "xyax5pk",
 		$$css: true
 	},
 	section: {

package/dist/collection/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","names":["ReactNode","stylex","rowStyles","colors","spacing","typography","collectionStyles","container","kB7OPa","k1xSpc","kXwgrk","k3XXqK","k8WAf4","$$css","header","kMwMTN","kMv6JI","kGuDYH","k63SB2","kb6lSQ","kLWn49","kGO01o","kLKAdn","kg3NbH","loading","kGNEyG","kjj79g","kAzted","section","CollectionItemState","isDisabled","isSelected","rowItemStyles","supporting","overline","extra","StyleXStyles","lines","undefined","state","props","base","list","interactive","twoLine","threeLine","selectedList","disabled"],"sources":["../../src/collection/styles.ts"],"sourcesContent":["import type { ReactNode } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport { rowStyles } from '../row/styles';\nimport '../tokens/design.tokens.stylex';\nimport { colors, spacing, typography } from '../tokens/design.tokens.stylex';\n\n// The chrome around the row. `src/row` was extracted so a list, menu, tree and\n// drawer draw the same row; everything wrapped around it stayed behind in each\n// component, so a change to the subhead over a list was three edits with\n// nothing failing if one were missed.\n//\n// Two of these are shared by four components and two by three, and the split\n// is the Material Design spec pages rather than convenience:\n//\n// - `container` and `section` are the box and the grouping, which List,\n//   ListBox, Tree and NavigationTree all draw the same way.\n// - `header` and `loading` are the lists page's, so they are shared by the\n//   three components that follow it. Menu and NavigationTree keep their own,\n//   because the menus page and the navigation drawer page give different\n//   values — a subhead tighter to the items above it, a label role rather\n//   than a title role, and an inset that lines up with pill-shaped rows.\n//   Those are the specs disagreeing rather than the code drifting, so each\n//   stays where its comment explaining it is.\nconst collectionStyles = {\n  container: {\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kXwgrk: \"xdt5ytf\",\n    k3XXqK: \"x1t137rt\",\n    k8WAf4: \"x1cmllll\",\n    $$css: true\n  },\n  header: {\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1w5n3ug\",\n    kMv6JI: \"xrgwony\",\n    kGuDYH: \"x12s497w\",\n    k63SB2: \"x1szcwkt\",\n    kb6lSQ: \"xo803ec\",\n    kLWn49: \"xyl1r0q\",\n    kGO01o: \"xw3mh6e\",\n    kLKAdn: \"x1clyivc\",\n    kg3NbH: \"x790zyz\",\n    $$css: true\n  },\n  loading: {\n    kGNEyG: \"x6s0dn4\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kjj79g: \"xl56j7k\",\n    kAzted: \"xbktkl8\",\n    $$css: true\n  },\n  section: {\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kXwgrk: \"xdt5ytf\",\n    $$css: true\n  }\n};\n\n/**\n * The render state every collection item this covers reports. Each of React\n * Aria's own is wider than this, and this is the part the three share.\n */\ntype CollectionItemState = {\n  isDisabled: boolean;\n  isSelected: boolean;\n};\n\n/**\n * The styles a selectable row in a list takes, as the function React Aria's\n * `className` prop wants.\n *\n * Which of the lists page's three items the row is, read from the content\n * rather than taken as a prop: a row holding all three lines already says it\n * is three lines, and a word for it would be a second place to get it wrong.\n * `ListItem` does the same arithmetic for the static row, and this is where\n * the collection forms share it.\n *\n * The three-line item is the only row whose slots move, which is why it alone\n * carries an alignment as well as a height.\n *\n * `extra` is the one difference between the three callers — Tree passes its\n * indent, which is why it sits where Tree already had it rather than at the\n * end. NavigationTree is not a caller: it draws the drawer variant, branches\n * on an ancestor being current, and reads `isCurrent` where these read\n * `isSelected`.\n */\nfunction rowItemStyles(supporting: ReactNode, overline: ReactNode, extra?: stylex.StyleXStyles) {\n  const lines = (overline === undefined ? 0 : 1) + (supporting === undefined ? 0 : 1);\n  return (state: CollectionItemState) => stylex.props(rowStyles.base, rowStyles.list, rowStyles.interactive, extra, lines === 1 && rowStyles.twoLine, lines === 2 && rowStyles.threeLine, state.isSelected && rowStyles.selectedList, state.isDisabled && rowStyles.disabled);\n}\nexport type { CollectionItemState };\nexport { collectionStyles, rowItemStyles };"],"mappings":";;;AAuBA,MAAMM,mBAAmB;CACvBC,WAAW;EACTC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;CACT;CACAC,QAAQ;EACNN,QAAQ;EACRO,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRV,OAAO;CACT;CACAW,SAAS;EACPC,QAAQ;EACRjB,QAAQ;EACRC,QAAQ;EACRiB,QAAQ;EACRC,QAAQ;EACRd,OAAO;CACT;CACAe,SAAS;EACPpB,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRG,OAAO;CACT;AACF;;;;;;;;;;;;;;;;;;;;AA8BA,SAASmB,cAAcC,YAAuBC,UAAqBC,OAA6B;CAC9F,MAAME,SAASH,aAAaI,KAAAA,IAAY,IAAI,MAAML,eAAeK,KAAAA,IAAY,IAAI;CACjF,QAAQC,UAA+BtC,MAAaC,UAAUuC,MAAMvC,UAAUwC,MAAMxC,UAAUyC,aAAaR,OAAOE,UAAU,KAAKnC,UAAU0C,SAASP,UAAU,KAAKnC,UAAU2C,WAAWN,MAAMR,cAAc7B,UAAU4C,cAAcP,MAAMT,cAAc5B,UAAU6C,QAAQ;AAC5Q"}
+{"version":3,"file":"styles.js","names":["ReactNode","stylex","rowStyles","colors","sizing","spacing","typography","collectionStyles","container","kB7OPa","k1xSpc","kXwgrk","k3XXqK","k8WAf4","$$css","header","kMwMTN","kMv6JI","kGuDYH","k63SB2","kb6lSQ","kLWn49","kGO01o","kLKAdn","kg3NbH","loading","kGNEyG","kjj79g","kAzted","section","CollectionItemState","isDisabled","isSelected","rowItemStyles","supporting","overline","extra","StyleXStyles","lines","undefined","state","props","base","list","interactive","twoLine","threeLine","selectedList","disabled"],"sources":["../../src/collection/styles.ts"],"sourcesContent":["import type { ReactNode } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport { rowStyles } from '../row/styles';\nimport '../tokens/design.tokens.stylex';\nimport { colors, sizing, spacing, typography } from '../tokens/design.tokens.stylex';\n\n// The chrome around the row. `src/row` was extracted so a list, menu, tree and\n// drawer draw the same row; everything wrapped around it stayed behind in each\n// component, so a change to the subhead over a list was three edits with\n// nothing failing if one were missed.\n//\n// Two of these are shared by four components and two by three, and the split\n// is the Material Design spec pages rather than convenience:\n//\n// - `container` and `section` are the box and the grouping, which List,\n//   ListBox, Tree and NavigationTree all draw the same way.\n// - `header` and `loading` are the lists page's, so they are shared by the\n//   three components that follow it. Menu and NavigationTree keep their own,\n//   because the menus page and the navigation drawer page give different\n//   values — a subhead tighter to the items above it, a label role rather\n//   than a title role, and an inset that lines up with pill-shaped rows.\n//   Those are the specs disagreeing rather than the code drifting, so each\n//   stays where its comment explaining it is.\nconst collectionStyles = {\n  container: {\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kXwgrk: \"xdt5ytf\",\n    k3XXqK: \"x1t137rt\",\n    k8WAf4: \"x1cmllll\",\n    $$css: true\n  },\n  header: {\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1w5n3ug\",\n    kMv6JI: \"xrgwony\",\n    kGuDYH: \"x12s497w\",\n    k63SB2: \"x1szcwkt\",\n    kb6lSQ: \"xo803ec\",\n    kLWn49: \"xyl1r0q\",\n    kGO01o: \"xw3mh6e\",\n    kLKAdn: \"x1clyivc\",\n    kg3NbH: \"x790zyz\",\n    $$css: true\n  },\n  loading: {\n    kGNEyG: \"x6s0dn4\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kjj79g: \"xl56j7k\",\n    kAzted: \"xyax5pk\",\n    $$css: true\n  },\n  section: {\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kXwgrk: \"xdt5ytf\",\n    $$css: true\n  }\n};\n\n/**\n * The render state every collection item this covers reports. Each of React\n * Aria's own is wider than this, and this is the part the three share.\n */\ntype CollectionItemState = {\n  isDisabled: boolean;\n  isSelected: boolean;\n};\n\n/**\n * The styles a selectable row in a list takes, as the function React Aria's\n * `className` prop wants.\n *\n * Which of the lists page's three items the row is, read from the content\n * rather than taken as a prop: a row holding all three lines already says it\n * is three lines, and a word for it would be a second place to get it wrong.\n * `ListItem` does the same arithmetic for the static row, and this is where\n * the collection forms share it.\n *\n * The three-line item is the only row whose slots move, which is why it alone\n * carries an alignment as well as a height.\n *\n * `extra` is the one difference between the three callers — Tree passes its\n * indent, which is why it sits where Tree already had it rather than at the\n * end. NavigationTree is not a caller: it draws the drawer variant, branches\n * on an ancestor being current, and reads `isCurrent` where these read\n * `isSelected`.\n */\nfunction rowItemStyles(supporting: ReactNode, overline: ReactNode, extra?: stylex.StyleXStyles) {\n  const lines = (overline === undefined ? 0 : 1) + (supporting === undefined ? 0 : 1);\n  return (state: CollectionItemState) => stylex.props(rowStyles.base, rowStyles.list, rowStyles.interactive, extra, lines === 1 && rowStyles.twoLine, lines === 2 && rowStyles.threeLine, state.isSelected && rowStyles.selectedList, state.isDisabled && rowStyles.disabled);\n}\nexport type { CollectionItemState };\nexport { collectionStyles, rowItemStyles };"],"mappings":";;;AAuBA,MAAMO,mBAAmB;CACvBC,WAAW;EACTC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;CACT;CACAC,QAAQ;EACNN,QAAQ;EACRO,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRV,OAAO;CACT;CACAW,SAAS;EACPC,QAAQ;EACRjB,QAAQ;EACRC,QAAQ;EACRiB,QAAQ;EACRC,QAAQ;EACRd,OAAO;CACT;CACAe,SAAS;EACPpB,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRG,OAAO;CACT;AACF;;;;;;;;;;;;;;;;;;;;AA8BA,SAASmB,cAAcC,YAAuBC,UAAqBC,OAA6B;CAC9F,MAAME,SAASH,aAAaI,KAAAA,IAAY,IAAI,MAAML,eAAeK,KAAAA,IAAY,IAAI;CACjF,QAAQC,UAA+BvC,MAAaC,UAAUwC,MAAMxC,UAAUyC,MAAMzC,UAAU0C,aAAaR,OAAOE,UAAU,KAAKpC,UAAU2C,SAASP,UAAU,KAAKpC,UAAU4C,WAAWN,MAAMR,cAAc9B,UAAU6C,cAAcP,MAAMT,cAAc7B,UAAU8C,QAAQ;AAC5Q"}

package/dist/components/avatar/index.js

@@ -8,7 +8,7 @@ import { jsx } from "react/jsx-runtime";
 const styles = {
 	base: {
 		kGNEyG: "x6s0dn4",
-		kaIpWk: "x3y1ksm",
+		kaIpWk: "x16fbrrb",
 		kB7OPa: "x9f619",
 		k1xSpc: "x3nfvp2",
 		kmuXW: "x2lah0s",

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["stylex","RenderComponentProps","useImageLoadingStatus","useRender","mergeStyles","colors","radii","typography","styles","base","kGNEyG","kaIpWk","kB7OPa","k1xSpc","kmuXW","kMv6JI","k63SB2","kjj79g","kVQacm","kfSwDN","$$css","image","kZKoxP","kzqmXN","kVIFPx","lg","kGuDYH","md","negative","kWkggS","kMwMTN","positive","primary","secondary","sm","tertiary","AvatarProps","Omit","name","size","src","tone","Avatar","t0","$","_c","render","t1","t2","props","undefined","status","t3","t4","t5","initialsFrom","t6","t7","role","children","t8","defaultTagName","words","split","filter","Boolean","length","first","Array","from","last","at","toLocaleUpperCase"],"sources":["../../../src/components/avatar/index.tsx"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport type { RenderComponentProps } from '../../render/useRender';\nimport { useImageLoadingStatus } from '../../hooks/useImageLoadingStatus';\nimport { useRender } from '../../render/useRender';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, typography } from '../../tokens/design.tokens.stylex';\n\n// Tones are container/on-container pairs rather than one colour each, so the\n// initials are always a role's own foreground and can't end up unreadable on\n// a tint they were never paired with. Which tone a given person gets is the\n// consuming app's decision — the design cycles colours per person, and that\n// cycle belongs where the list of people is, not in this component.\n//\n// Sizes carry their own type size but not their own weight or family: the\n// label face at medium weight holds across all three, so a large avatar is\n// bigger initials rather than differently-styled ones.\nconst styles = {\n  base: {\n    kGNEyG: \"x6s0dn4\",\n    kaIpWk: \"x3y1ksm\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x3nfvp2\",\n    kmuXW: \"x2lah0s\",\n    kMv6JI: \"xkknnkr\",\n    k63SB2: \"x1bf3uqz\",\n    kjj79g: \"xl56j7k\",\n    kVQacm: \"xb3r6kr\",\n    kfSwDN: \"x87ps6o\",\n    $$css: true\n  },\n  image: {\n    kZKoxP: \"x5yr21d\",\n    kzqmXN: \"xh8yej3\",\n    kVIFPx: \"xl1xv1r\",\n    $$css: true\n  },\n  lg: {\n    kZKoxP: \"xnnlda6\",\n    kGuDYH: \"x1848etk\",\n    kzqmXN: \"x15yg21f\",\n    $$css: true\n  },\n  md: {\n    kZKoxP: \"x1vqgdyp\",\n    kGuDYH: \"x14zspaw\",\n    kzqmXN: \"x100vrsf\",\n    $$css: true\n  },\n  negative: {\n    kWkggS: \"xkz0cvf\",\n    kMwMTN: \"xylzu7l\",\n    $$css: true\n  },\n  positive: {\n    kWkggS: \"xa3zu90\",\n    kMwMTN: \"x1di7zbg\",\n    $$css: true\n  },\n  primary: {\n    kWkggS: \"xp89om9\",\n    kMwMTN: \"xscdzaa\",\n    $$css: true\n  },\n  secondary: {\n    kWkggS: \"x15dekr4\",\n    kMwMTN: \"x1sawysd\",\n    $$css: true\n  },\n  sm: {\n    kZKoxP: \"xc9qbxq\",\n    kGuDYH: \"xkucv67\",\n    kzqmXN: \"x14qfxbe\",\n    $$css: true\n  },\n  tertiary: {\n    kWkggS: \"xs6yvni\",\n    kMwMTN: \"x3cbcwg\",\n    $$css: true\n  }\n};\ntype AvatarProps = Omit<RenderComponentProps<'span'>, 'children'> & {\n  /**\n   * The person this represents. Supplies both the initials and the accessible\n   * name, so a screen reader announces who it is rather than reading two\n   * letters aloud.\n   */\n  name: string;\n  /**\n   * Diameter: `sm` 36px, `md` 40px, `lg` 56px.\n   * @default 'md'\n   */\n  size?: 'lg' | 'md' | 'sm';\n  /**\n   * A photo to show in place of the initials. The initials stay until it has\n   * loaded, and come back if it fails.\n   */\n  src?: string;\n  /**\n   * Which container/on-container colour pair to tint with.\n   * @default 'primary'\n   */\n  tone?: 'negative' | 'positive' | 'primary' | 'secondary' | 'tertiary';\n};\nfunction Avatar({\n  name,\n  render,\n  size = 'md',\n  src,\n  tone = 'primary',\n  ...props\n}: AvatarProps) {\n  // The photo is shown only once it has loaded, and the initials stay until\n  // then and come back if it fails — see useImageLoadingStatus.\n  const status = useImageLoadingStatus(src);\n\n  // role/aria-label rather than letting the initials be read: \"AL\" is not\n  // what anyone means to announce. Marking the root as an image also makes\n  // its contents presentational, so the photo and the initials can't be\n  // announced a second time underneath the name. A span rather than an\n  // <img>, which is void: this element's whole job is to hold the initials\n  // shown when there is no photo, or none has loaded yet.\n  return useRender({\n    defaultTagName: 'span',\n    props: {\n      'aria-label': name,\n      role: 'img',\n      ...props,\n      children: status === 'loaded' ? <img alt=\"\" src={src} className=\"x5yr21d xh8yej3 xl1xv1r\" /> : initialsFrom(name),\n      ...mergeStyles(stylex.props(styles.base, styles[size], styles[tone]), props)\n    },\n    render\n  });\n}\n\n// First letter of the first and last word, which handles both \"Ada\" and \"Ada\n// Lovelace\" without a separate prop for how many to take. Array.from rather\n// than indexing, so a name starting outside the Basic Multilingual Plane\n// yields its whole first character instead of half a surrogate pair.\nfunction initialsFrom(name: string) {\n  const words = name.split(/\\s+/u).filter(Boolean);\n  if (words.length === 0) {\n    return '';\n  }\n  const first = Array.from(words[0] ?? '')[0] ?? '';\n  const last = words.length > 1 ? Array.from(words.at(-1) ?? '')[0] ?? '' : '';\n  return `${first}${last}`.toLocaleUpperCase();\n}\nexport type { AvatarProps };\nexport default Avatar;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["stylex","RenderComponentProps","useImageLoadingStatus","useRender","mergeStyles","colors","radii","typography","styles","base","kGNEyG","kaIpWk","kB7OPa","k1xSpc","kmuXW","kMv6JI","k63SB2","kjj79g","kVQacm","kfSwDN","$$css","image","kZKoxP","kzqmXN","kVIFPx","lg","kGuDYH","md","negative","kWkggS","kMwMTN","positive","primary","secondary","sm","tertiary","AvatarProps","Omit","name","size","src","tone","Avatar","t0","$","_c","render","t1","t2","props","undefined","status","t3","t4","t5","initialsFrom","t6","t7","role","children","t8","defaultTagName","words","split","filter","Boolean","length","first","Array","from","last","at","toLocaleUpperCase"],"sources":["../../../src/components/avatar/index.tsx"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport type { RenderComponentProps } from '../../render/useRender';\nimport { useImageLoadingStatus } from '../../hooks/useImageLoadingStatus';\nimport { useRender } from '../../render/useRender';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, typography } from '../../tokens/design.tokens.stylex';\n\n// Tones are container/on-container pairs rather than one colour each, so the\n// initials are always a role's own foreground and can't end up unreadable on\n// a tint they were never paired with. Which tone a given person gets is the\n// consuming app's decision — the design cycles colours per person, and that\n// cycle belongs where the list of people is, not in this component.\n//\n// Sizes carry their own type size but not their own weight or family: the\n// label face at medium weight holds across all three, so a large avatar is\n// bigger initials rather than differently-styled ones.\n//\n// The three are the library's own rather than a spec page's — no Material\n// Design page gives a measurement for one in text; the lists page draws its\n// leading elements in a diagram and tabulates only their padding. So they are\n// stated against the scale the library already has. `md` is 40dp, which is\n// Button's and IconButton's own `md` height, so an avatar and a control line\n// up in a row. `lg` is 56dp. `sm` is 36dp, between the 32dp a chip and an\n// `xs` control take and that 40dp default, for a row that wants a person\n// smaller than the button beside them.\n//\n// ProductIcon takes the same three, so a mark and a person fill the same\n// slot.\nconst styles = {\n  base: {\n    kGNEyG: \"x6s0dn4\",\n    kaIpWk: \"x16fbrrb\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x3nfvp2\",\n    kmuXW: \"x2lah0s\",\n    kMv6JI: \"xkknnkr\",\n    k63SB2: \"x1bf3uqz\",\n    kjj79g: \"xl56j7k\",\n    kVQacm: \"xb3r6kr\",\n    kfSwDN: \"x87ps6o\",\n    $$css: true\n  },\n  image: {\n    kZKoxP: \"x5yr21d\",\n    kzqmXN: \"xh8yej3\",\n    kVIFPx: \"xl1xv1r\",\n    $$css: true\n  },\n  lg: {\n    kZKoxP: \"xnnlda6\",\n    kGuDYH: \"x1848etk\",\n    kzqmXN: \"x15yg21f\",\n    $$css: true\n  },\n  md: {\n    kZKoxP: \"x1vqgdyp\",\n    kGuDYH: \"x14zspaw\",\n    kzqmXN: \"x100vrsf\",\n    $$css: true\n  },\n  negative: {\n    kWkggS: \"xkz0cvf\",\n    kMwMTN: \"xylzu7l\",\n    $$css: true\n  },\n  positive: {\n    kWkggS: \"xa3zu90\",\n    kMwMTN: \"x1di7zbg\",\n    $$css: true\n  },\n  primary: {\n    kWkggS: \"xp89om9\",\n    kMwMTN: \"xscdzaa\",\n    $$css: true\n  },\n  secondary: {\n    kWkggS: \"x15dekr4\",\n    kMwMTN: \"x1sawysd\",\n    $$css: true\n  },\n  sm: {\n    kZKoxP: \"xc9qbxq\",\n    kGuDYH: \"xkucv67\",\n    kzqmXN: \"x14qfxbe\",\n    $$css: true\n  },\n  tertiary: {\n    kWkggS: \"xs6yvni\",\n    kMwMTN: \"x3cbcwg\",\n    $$css: true\n  }\n};\ntype AvatarProps = Omit<RenderComponentProps<'span'>, 'children'> & {\n  /**\n   * The person this represents. Supplies both the initials and the accessible\n   * name, so a screen reader announces who it is rather than reading two\n   * letters aloud.\n   */\n  name: string;\n  /**\n   * Diameter: `sm` 36px, `md` 40px, `lg` 56px.\n   * @default 'md'\n   */\n  size?: 'lg' | 'md' | 'sm';\n  /**\n   * A photo to show in place of the initials. The initials stay until it has\n   * loaded, and come back if it fails.\n   */\n  src?: string;\n  /**\n   * Which container/on-container colour pair to tint with.\n   * @default 'primary'\n   */\n  tone?: 'negative' | 'positive' | 'primary' | 'secondary' | 'tertiary';\n};\nfunction Avatar({\n  name,\n  render,\n  size = 'md',\n  src,\n  tone = 'primary',\n  ...props\n}: AvatarProps) {\n  // The photo is shown only once it has loaded, and the initials stay until\n  // then and come back if it fails — see useImageLoadingStatus.\n  const status = useImageLoadingStatus(src);\n\n  // role/aria-label rather than letting the initials be read: \"AL\" is not\n  // what anyone means to announce. Marking the root as an image also makes\n  // its contents presentational, so the photo and the initials can't be\n  // announced a second time underneath the name. A span rather than an\n  // <img>, which is void: this element's whole job is to hold the initials\n  // shown when there is no photo, or none has loaded yet.\n  return useRender({\n    defaultTagName: 'span',\n    props: {\n      'aria-label': name,\n      role: 'img',\n      ...props,\n      children: status === 'loaded' ? <img alt=\"\" src={src} className=\"x5yr21d xh8yej3 xl1xv1r\" /> : initialsFrom(name),\n      ...mergeStyles(stylex.props(styles.base, styles[size], styles[tone]), props)\n    },\n    render\n  });\n}\n\n// First letter of the first and last word, which handles both \"Ada\" and \"Ada\n// Lovelace\" without a separate prop for how many to take. Array.from rather\n// than indexing, so a name starting outside the Basic Multilingual Plane\n// yields its whole first character instead of half a surrogate pair.\nfunction initialsFrom(name: string) {\n  const words = name.split(/\\s+/u).filter(Boolean);\n  if (words.length === 0) {\n    return '';\n  }\n  const first = Array.from(words[0] ?? '')[0] ?? '';\n  const last = words.length > 1 ? Array.from(words.at(-1) ?? '')[0] ?? '' : '';\n  return `${first}${last}`.toLocaleUpperCase();\n}\nexport type { AvatarProps };\nexport default Avatar;"],"mappings":"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"}

package/dist/components/button/index.js

@@ -11,7 +11,7 @@ import { Button, Link } from "react-aria-components";
 const styles = {
 	base: {
 		kGNEyG: "x6s0dn4",
-		kaIpWk: "x3y1ksm",
+		kaIpWk: "x1dkaolv",
 		kMzoRj: "xc342km",
 		kB7OPa: "x9f619",
 		kkrTdU: "x1ypdohk",
@@ -63,7 +63,7 @@ const styles = {
 		$$css: true
 	},
 	lg: {
-		kZKoxP: "xnnlda6",
+		kZKoxP: "xs1ryiz",
 		kMv6JI: "x46eyla",
 		kGuDYH: "x5ehqhr",
 		k63SB2: "xrf6cl6",
@@ -73,7 +73,7 @@ const styles = {
 		$$css: true
 	},
 	md: {
-		kZKoxP: "x1vqgdyp",
+		kZKoxP: "x1rv7mn0",
 		kg3NbH: "x790zyz",
 		$$css: true
 	},
@@ -122,7 +122,7 @@ const styles = {
 		$$css: true
 	},
 	xl: {
-		kZKoxP: "xjp8j0k",
+		kZKoxP: "x1xaimp3",
 		kMv6JI: "x1fz0g89",
 		kGuDYH: "xkb6epg",
 		k63SB2: "x76yrz5",
@@ -133,12 +133,12 @@ const styles = {
 		$$css: true
 	},
 	xs: {
-		kZKoxP: "x10w6t97",
+		kZKoxP: "xig8zya",
 		kg3NbH: "x790zyz",
 		$$css: true
 	},
 	xxl: {
-		kZKoxP: "xn866dk",
+		kZKoxP: "x173yhrv",
 		kMv6JI: "x1vsmgmf",
 		kGuDYH: "xh9c4x",
 		k63SB2: "x1y15vu6",

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["DOMAttributes","ReactNode","ButtonRenderProps","ClassNameOrFunction","FocusableElement","ButtonProps","RACButtonProps","StyleOrFunction","stylex","Button","RACButton","Link","RACLink","useRipple","ariaAttributesOf","buttonRenderer","linkRenderer","focus","mergeStatefulStyles","colors","radii","shadows","spacing","stateLayerOpacity","typography","ProgressIndicator","Ripple","ReturnType","styles","base","kGNEyG","kaIpWk","kMzoRj","kB7OPa","kkrTdU","k1xSpc","kMv6JI","kGuDYH","k63SB2","kOIVth","kb6lSQ","kLWn49","kVAEAm","kybGjl","$$css","disabled","elevated","kWkggS","kGVxlE","kMwMTN","elevatedDisabled","filled","filledDisabled","label","labelPending","k33iCy","lg","kZKoxP","kg3NbH","md","outlined","kVAM5u","ksu8eU","outlinedDisabled","pending","kpwlN0","kjj79g","text","textDisabled","tonal","tonalDisabled","xl","xs","xxl","outlineWidths","disabledStyles","ButtonDOMProps","Omit","GlobalEventKey","Pick","HTMLElement","children","className","ButtonState","disableRipple","href","pendingLabel","rel","size","ButtonSize","style","target","variant","ButtonVariant","Exclude","t0","$","_c","t1","isDisabled","t2","onClick","onContextMenu","onKeyDown","onKeyUp","onPointerCancel","onPointerDown","onPointerLeave","onPointerUp","t3","render","t4","t5","props","undefined","t6","ripple","t7","state","ring","styleProps","element","aria","handlers","surface","T0","t8","t9","t10","buttonContent","t11","isPending"],"sources":["../../../src/components/button/index.tsx"],"sourcesContent":["import type { DOMAttributes, ReactNode } from 'react';\nimport type { ButtonRenderProps, ClassNameOrFunction, FocusableElement, ButtonProps as RACButtonProps, StyleOrFunction } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Button as RACButton, Link as RACLink } from 'react-aria-components';\nimport { useRipple } from '../../hooks/useRipple';\nimport { ariaAttributesOf, buttonRenderer, linkRenderer } from '../../render/aria';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, shadows, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\nimport ProgressIndicator from '../progress-indicator';\n\n// Each variant composites its label colour over its container at the\n// interaction state's opacity, rather than swapping in a separate\n// hover/pressed color: filled and tonal paint the 'on-color' over the\n// container, outlined, text and elevated paint the label colour over their\n// own. The pairs are the buttons spec page's newer values: tonal on\n// secondary container, outlined with an outline variant border and an\n// on-surface-variant label, text on primary, elevated on surface container\n// low with a primary label.\n//\n// **Elevated is the one variant whose shadow is part of its identity.** The\n// page rests it at elevation 1 rather than flat, raises it on hover and\n// returns it to 1 while pressed — where filled and tonal rest flat and lift\n// only on hover. Disabled drops it to none, since a shadow says a control is\n// available to press.\n// calc(<opacity> * 100%) turns the token's unitless 0-1 ratio into the\n// percentage color-mix() takes. Inlined rather than factored into a helper:\n// @stylexjs/babel-plugin only statically recognizes expressions written\n// directly as property values, and a call to an externally-defined function\n// isn't one of them.\n//\n// Disabled is a style of its own per variant rather than a `:disabled`\n// branch inside each property: a button given `href` renders as a link,\n// which React Aria turns into a <span> while disabled, and neither matches\n// the pseudo-class. The disabled styles are applied last from the render\n// state's `isDisabled`, and StyleX replaces a property whole, so they also\n// take the hover and pressed branches with them — which is what keeps a\n// hovered disabled button from lighting up.\n//\n// Two independent axes, applied base -> variant -> size. The variant carries\n// colour and the size carries geometry, so the two never argue: inline\n// padding belongs to the size alone, and every size declares its own.\n//\n// That is deliberate rather than incidental. The buttons page gives padding\n// per size — its Small button padding is 16dp, the 24dp beside it being the\n// older value the page marks as not recommended — and gives the five colour\n// styles no padding of their own. A text button is therefore as wide as a\n// filled one at the same size, which is what the code draws.\n//\n// This did once read the other way, with `md` declaring no padding so a\n// medium button fell through to its variant's. `fix(button)!: the spec's\n// five sizes` replaced that when the component took the page's sizes, since\n// a per-variant padding had nowhere to sit once every size carried one. The\n// comment describing the old cascade outlived it by some months, which is\n// how it came to say `text` keeps a tighter padding it has never had — back\n// then `text` declared 16dp while a filled `md` declared none at all, so the\n// text button was the wider of the two.\ntype Ripple = ReturnType<typeof useRipple<FocusableElement>>;\nconst styles = {\n  base: {\n    kGNEyG: \"x6s0dn4\",\n    kaIpWk: \"x3y1ksm\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x3nfvp2\",\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kOIVth: \"x126z3so\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    kVAEAm: \"x1n2onr6\",\n    kybGjl: \"x1hl2dhg\",\n    $$css: true\n  },\n  disabled: {\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  elevated: {\n    kWkggS: \"x1k1wbbp x3k5p2v xf9j7ge x1vnz5z6\",\n    kGVxlE: \"x1g60mc1 x1fzngjt x19efjv6\",\n    kMwMTN: \"x1mxwv8y\",\n    $$css: true\n  },\n  elevatedDisabled: {\n    kWkggS: \"xepofeg\",\n    kGVxlE: \"x1gnnqk1\",\n    kMwMTN: \"x1xj74d8\",\n    $$css: true\n  },\n  filled: {\n    kWkggS: \"xpky1to x16z974x xyf7a0q xnety89\",\n    kGVxlE: \"xpk4wdd x1955hzl x1gnnqk1\",\n    kMwMTN: \"xwjo7ld\",\n    $$css: true\n  },\n  filledDisabled: {\n    kWkggS: \"xepofeg\",\n    kGVxlE: \"x1gnnqk1\",\n    kMwMTN: \"x1xj74d8\",\n    $$css: true\n  },\n  label: {\n    k1xSpc: \"xjp7ctv\",\n    $$css: true\n  },\n  labelPending: {\n    k33iCy: \"xlshs6z\",\n    $$css: true\n  },\n  lg: {\n    kZKoxP: \"xnnlda6\",\n    kMv6JI: \"x46eyla\",\n    kGuDYH: \"x5ehqhr\",\n    k63SB2: \"xrf6cl6\",\n    kb6lSQ: \"x1g135zh\",\n    kLWn49: \"x1ggk5va\",\n    kg3NbH: \"xg0ps1x\",\n    $$css: true\n  },\n  md: {\n    kZKoxP: \"x1vqgdyp\",\n    kg3NbH: \"x790zyz\",\n    $$css: true\n  },\n  outlined: {\n    kWkggS: \"x1dg9itu x1yu1589 x1728qcm xjbqb8w\",\n    kVAM5u: \"x133yhug\",\n    ksu8eU: \"x1y0btm7\",\n    kMzoRj: \"xmkeg23\",\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  },\n  outlinedDisabled: {\n    kWkggS: \"xjbqb8w\",\n    kVAM5u: \"xrh88j3\",\n    kMwMTN: \"x1xj74d8\",\n    $$css: true\n  },\n  pending: {\n    kGNEyG: \"x6s0dn4\",\n    k1xSpc: \"x78zum5\",\n    kpwlN0: \"x10a8y8t\",\n    kjj79g: \"xl56j7k\",\n    kVAEAm: \"x10l6tqk\",\n    $$css: true\n  },\n  text: {\n    kWkggS: \"x12vej0r x598nmq x14dcer4 xjbqb8w\",\n    kMwMTN: \"x1mxwv8y\",\n    $$css: true\n  },\n  textDisabled: {\n    kWkggS: \"xjbqb8w\",\n    kMwMTN: \"x1xj74d8\",\n    $$css: true\n  },\n  tonal: {\n    kWkggS: \"xnqsvhv xc87fxa xlizrex x15dekr4\",\n    kGVxlE: \"xpk4wdd x1955hzl x1gnnqk1\",\n    kMwMTN: \"x1sawysd\",\n    $$css: true\n  },\n  tonalDisabled: {\n    kWkggS: \"xepofeg\",\n    kGVxlE: \"x1gnnqk1\",\n    kMwMTN: \"x1xj74d8\",\n    $$css: true\n  },\n  xl: {\n    kZKoxP: \"xjp8j0k\",\n    kMv6JI: \"x1fz0g89\",\n    kGuDYH: \"xkb6epg\",\n    k63SB2: \"x76yrz5\",\n    kOIVth: \"x1gka490\",\n    kb6lSQ: \"x1s1qhaa\",\n    kLWn49: \"x1voeury\",\n    kg3NbH: \"x1sdxjpb\",\n    $$css: true\n  },\n  xs: {\n    kZKoxP: \"x10w6t97\",\n    kg3NbH: \"x790zyz\",\n    $$css: true\n  },\n  xxl: {\n    kZKoxP: \"xn866dk\",\n    kMv6JI: \"x1vsmgmf\",\n    kGuDYH: \"xh9c4x\",\n    k63SB2: \"x1y15vu6\",\n    kOIVth: \"xxj4525\",\n    kb6lSQ: \"xoqu3bc\",\n    kLWn49: \"x10x9d6x\",\n    kg3NbH: \"x1dao9b2\",\n    $$css: true\n  }\n};\n\n// The outlined button's border thickens with the size, as the page's size\n// tokens have it: 1dp up to M, 2dp at L, 3dp at XL. A style per size rather\n// than a value in the size style, since a border on a filled button would\n// draw in the label colour.\nconst outlineWidths = {\n  lg: {\n    kMzoRj: \"xmkeg23\",\n    $$css: true\n  },\n  md: {\n    kMzoRj: \"xmkeg23\",\n    $$css: true\n  },\n  xl: {\n    kMzoRj: \"xdh2fpr\",\n    $$css: true\n  },\n  xs: {\n    kMzoRj: \"xmkeg23\",\n    $$css: true\n  },\n  xxl: {\n    kMzoRj: \"x9r2w2z\",\n    $$css: true\n  }\n};\nconst disabledStyles = {\n  elevated: styles.elevatedDisabled,\n  filled: styles.filledDisabled,\n  outlined: styles.outlinedDisabled,\n  text: styles.textDisabled,\n  tonal: styles.tonalDisabled\n};\ntype ButtonDOMProps = Omit<RACButtonProps, 'children' | 'className' | 'style' | GlobalEventKey> & Pick<DOMAttributes<HTMLElement>, GlobalEventKey>;\ntype ButtonProps = {\n  children?: ReactNode;\n  /** A function may compute the class from the button's render state. */\n  className?: ClassNameOrFunction<ButtonState>;\n  /**\n   * Disables the press ripple. The hover/pressed background state layer is\n   * unaffected.\n   * @default false\n   */\n  disableRipple?: boolean;\n  /**\n   * Where the button leads. Given one, the button is rendered as a link —\n   * an `<a>`, announced as the link it is — with the same styles and ripple.\n   * `render`, `type`, and the form and pending props apply to the button\n   * form only.\n   */\n  href?: string;\n  /**\n   * The name of the ring shown while the button is pending, for a screen\n   * reader. The label it replaces is hidden while it shows.\n   * @default 'Loading'\n   */\n  pendingLabel?: string;\n  /** The link's `rel`, when `href` is set. */\n  rel?: string;\n  /**\n   * Control height: `xs` 32px, `md` 40px, `lg` 56px, `xl` 96px, `xxl` 136px —\n   * the buttons spec page's XS, S, M, L and XL, each with its own inline\n   * padding and type role. `md` is the page's default.\n   * @default 'md'\n   */\n  size?: ButtonSize;\n  /** A function may compute the style from the button's render state. */\n  style?: StyleOrFunction<ButtonState>;\n  /** The link's `target`, when `href` is set. */\n  target?: string;\n  /**\n   * How much weight the button pulls. `filled` and `tonal` carry a container\n   * of their own; `outlined` and `text` sit on the page; `elevated` sits on\n   * a low surface and lifts off it with a shadow, for a button that has to\n   * separate from a busy background rather than from the page.\n   * @default 'filled'\n   */\n  variant?: ButtonVariant;\n} & ButtonDOMProps;\ntype ButtonSize = 'lg' | 'md' | 'xl' | 'xs' | 'xxl';\n\n// The render state both of React Aria's elements share. A className or\n// style function written against it serves the button and the link alike;\n// `isPending` belongs to the button alone, and `isCurrent` to the link, so\n// neither is here: a `className` written against this state serves both\n// elements. What the button draws while pending is decided in\n// `buttonContent`, which sees React Aria's own state rather than this one.\ntype ButtonState = Pick<ButtonRenderProps, 'isDisabled' | 'isFocused' | 'isFocusVisible' | 'isHovered' | 'isPressed'>;\ntype ButtonVariant = 'elevated' | 'filled' | 'outlined' | 'text' | 'tonal';\n\n// React Aria types the global DOM events — pointer, mouse, touch, wheel and\n// the rest — against the element each component renders, and a handler\n// written for a <button> does not type-check against an <a>. The keys are\n// retyped against HTMLElement here so one set of props serves both forms;\n// the events React Aria defines itself (press, focus, keyboard) keep its\n// types, since it hands those its own event objects.\ntype GlobalEventKey = Exclude<keyof DOMAttributes<HTMLElement> & keyof RACButtonProps, 'onBlur' | 'onClick' | 'onFocus'>;\n\n/**\n * The design's button, at five emphasis levels and five control heights.\n * Given `href` it is a link with the same appearance. Every `aria-*` prop is\n * forwarded to the element; React Aria alone would keep only the labelling\n * ones.\n */\nfunction Button({\n  children,\n  disableRipple = false,\n  href,\n  isDisabled = false,\n  onClick,\n  onContextMenu,\n  onKeyDown,\n  onKeyUp,\n  onPointerCancel,\n  onPointerDown,\n  onPointerLeave,\n  onPointerUp,\n  pendingLabel = 'Loading',\n  rel,\n  render,\n  size = 'md',\n  target,\n  variant = 'filled',\n  ...props\n}: ButtonProps) {\n  // `props` (className/style, etc.) is spread separately: `className` and\n  // `style` there may be functions of render state, which ripple's own\n  // handler-only merge doesn't need to know about. It is also why the styles\n  // below merge through mergeStatefulStyles rather than the plain\n  // mergeStyles. The ripple is off while disabled: React Aria still forwards\n  // pointer events to a disabled element, and a press that changes nothing\n  // should not look like one.\n  const ripple = useRipple<FocusableElement>(!disableRipple && !isDisabled, {\n    onClick,\n    onContextMenu,\n    onPointerCancel,\n    onPointerDown,\n    onPointerLeave,\n    onPointerUp\n  });\n  const styleProps = mergeStatefulStyles((state: ButtonState) => stylex.props(styles.base, focus.ring, styles[variant], styles[size], variant === 'outlined' && outlineWidths[size], state.isDisabled && styles.disabled, state.isDisabled && disabledStyles[variant]), props);\n  const element = {\n    aria: ariaAttributesOf(props),\n    onKeyDown,\n    onKeyUp\n  };\n  if (href !== undefined) {\n    return <RACLink href={href} isDisabled={isDisabled} rel={rel} render={linkRenderer(element)} target={target} {...ripple.handlers} {...props} {...styleProps}>\n        {children}\n        {ripple.surface}\n      </RACLink>;\n  }\n  return <RACButton isDisabled={isDisabled} render={buttonRenderer(element, render)} {...ripple.handlers} {...props} {...styleProps}>\n      {buttonContent(children, pendingLabel, ripple)}\n    </RACButton>;\n}\n// What the button draws: its label, hidden while the button is pending, with\n// the ring over it. The ring takes the button's own content colour rather\n// than the progress page's primary, which on a filled button is the fill\n// itself and so invisible. The label stays in the flow so the button keeps its\n// width, which is what stops a form jumping the moment it is submitted.\n// React Aria wants the progress bar in the accessibility tree as soon as the\n// button goes pending, so it is rendered from the render state rather than\n// after a delay.\n//\n// Built by a call rather than written inline at the prop, which is what\n// react-perf's no-new-function-as-prop is after; the React Compiler\n// memoises the result on its inputs.\nfunction buttonContent(children: ReactNode, pendingLabel: string, ripple: Ripple) {\n  return (state: ButtonRenderProps) => <>\n      <span {...{\n      0: {\n        className: \"xjp7ctv\"\n      },\n      1: {\n        className: \"xjp7ctv xlshs6z\"\n      }\n    }[!!state.isPending << 0]}>\n        {children}\n      </span>\n      {state.isPending ? <span className=\"x6s0dn4 x78zum5 x10a8y8t xl56j7k x10l6tqk\">\n          <ProgressIndicator aria-label={pendingLabel} isIndeterminate size=\"1em\" tone=\"inherit\" variant=\"circular\" />\n        </span> : null}\n      {ripple.surface}\n    </>;\n}\nexport type { ButtonDOMProps, ButtonProps, ButtonSize, ButtonState, ButtonVariant };\nexport default Button;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["DOMAttributes","ReactNode","ButtonRenderProps","ClassNameOrFunction","FocusableElement","ButtonProps","RACButtonProps","StyleOrFunction","stylex","Button","RACButton","Link","RACLink","useRipple","ariaAttributesOf","buttonRenderer","linkRenderer","focus","mergeStatefulStyles","colors","radii","shadows","sizing","spacing","stateLayerOpacity","typography","ProgressIndicator","Ripple","ReturnType","styles","base","kGNEyG","kaIpWk","kMzoRj","kB7OPa","kkrTdU","k1xSpc","kMv6JI","kGuDYH","k63SB2","kOIVth","kb6lSQ","kLWn49","kVAEAm","kybGjl","$$css","disabled","elevated","kWkggS","kGVxlE","kMwMTN","elevatedDisabled","filled","filledDisabled","label","labelPending","k33iCy","lg","kZKoxP","kg3NbH","md","outlined","kVAM5u","ksu8eU","outlinedDisabled","pending","kpwlN0","kjj79g","text","textDisabled","tonal","tonalDisabled","xl","xs","xxl","outlineWidths","disabledStyles","ButtonDOMProps","Omit","GlobalEventKey","Pick","HTMLElement","children","className","ButtonState","disableRipple","href","pendingLabel","rel","size","ButtonSize","style","target","variant","ButtonVariant","Exclude","t0","$","_c","t1","isDisabled","t2","onClick","onContextMenu","onKeyDown","onKeyUp","onPointerCancel","onPointerDown","onPointerLeave","onPointerUp","t3","render","t4","t5","props","undefined","t6","ripple","t7","state","ring","styleProps","element","aria","handlers","surface","T0","t8","t9","t10","buttonContent","t11","isPending"],"sources":["../../../src/components/button/index.tsx"],"sourcesContent":["import type { DOMAttributes, ReactNode } from 'react';\nimport type { ButtonRenderProps, ClassNameOrFunction, FocusableElement, ButtonProps as RACButtonProps, StyleOrFunction } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Button as RACButton, Link as RACLink } from 'react-aria-components';\nimport { useRipple } from '../../hooks/useRipple';\nimport { ariaAttributesOf, buttonRenderer, linkRenderer } from '../../render/aria';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, shadows, sizing, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\nimport ProgressIndicator from '../progress-indicator';\n\n// Each variant composites its label colour over its container at the\n// interaction state's opacity, rather than swapping in a separate\n// hover/pressed color: filled and tonal paint the 'on-color' over the\n// container, outlined, text and elevated paint the label colour over their\n// own. The pairs are the buttons spec page's newer values: tonal on\n// secondary container, outlined with an outline variant border and an\n// on-surface-variant label, text on primary, elevated on surface container\n// low with a primary label.\n//\n// **Elevated is the one variant whose shadow is part of its identity.** The\n// page rests it at elevation 1 rather than flat, raises it on hover and\n// returns it to 1 while pressed — where filled and tonal rest flat and lift\n// only on hover. Disabled drops it to none, since a shadow says a control is\n// available to press.\n// calc(<opacity> * 100%) turns the token's unitless 0-1 ratio into the\n// percentage color-mix() takes. Inlined rather than factored into a helper:\n// @stylexjs/babel-plugin only statically recognizes expressions written\n// directly as property values, and a call to an externally-defined function\n// isn't one of them.\n//\n// Disabled is a style of its own per variant rather than a `:disabled`\n// branch inside each property: a button given `href` renders as a link,\n// which React Aria turns into a <span> while disabled, and neither matches\n// the pseudo-class. The disabled styles are applied last from the render\n// state's `isDisabled`, and StyleX replaces a property whole, so they also\n// take the hover and pressed branches with them — which is what keeps a\n// hovered disabled button from lighting up.\n//\n// Two independent axes, applied base -> variant -> size. The variant carries\n// colour and the size carries geometry, so the two never argue: inline\n// padding belongs to the size alone, and every size declares its own.\n//\n// That is deliberate rather than incidental. The buttons page gives padding\n// per size — its Small button padding is 16dp, the 24dp beside it being the\n// older value the page marks as not recommended — and gives the five colour\n// styles no padding of their own. A text button is therefore as wide as a\n// filled one at the same size, which is what the code draws.\n//\n// This did once read the other way, with `md` declaring no padding so a\n// medium button fell through to its variant's. `fix(button)!: the spec's\n// five sizes` replaced that when the component took the page's sizes, since\n// a per-variant padding had nowhere to sit once every size carried one. The\n// comment describing the old cascade outlived it by some months, which is\n// how it came to say `text` keeps a tighter padding it has never had — back\n// then `text` declared 16dp while a filled `md` declared none at all, so the\n// text button was the wider of the two.\ntype Ripple = ReturnType<typeof useRipple<FocusableElement>>;\nconst styles = {\n  base: {\n    kGNEyG: \"x6s0dn4\",\n    kaIpWk: \"x1dkaolv\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x3nfvp2\",\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kOIVth: \"x126z3so\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    kVAEAm: \"x1n2onr6\",\n    kybGjl: \"x1hl2dhg\",\n    $$css: true\n  },\n  disabled: {\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  elevated: {\n    kWkggS: \"x1k1wbbp x3k5p2v xf9j7ge x1vnz5z6\",\n    kGVxlE: \"x1g60mc1 x1fzngjt x19efjv6\",\n    kMwMTN: \"x1mxwv8y\",\n    $$css: true\n  },\n  elevatedDisabled: {\n    kWkggS: \"xepofeg\",\n    kGVxlE: \"x1gnnqk1\",\n    kMwMTN: \"x1xj74d8\",\n    $$css: true\n  },\n  filled: {\n    kWkggS: \"xpky1to x16z974x xyf7a0q xnety89\",\n    kGVxlE: \"xpk4wdd x1955hzl x1gnnqk1\",\n    kMwMTN: \"xwjo7ld\",\n    $$css: true\n  },\n  filledDisabled: {\n    kWkggS: \"xepofeg\",\n    kGVxlE: \"x1gnnqk1\",\n    kMwMTN: \"x1xj74d8\",\n    $$css: true\n  },\n  label: {\n    k1xSpc: \"xjp7ctv\",\n    $$css: true\n  },\n  labelPending: {\n    k33iCy: \"xlshs6z\",\n    $$css: true\n  },\n  lg: {\n    kZKoxP: \"xs1ryiz\",\n    kMv6JI: \"x46eyla\",\n    kGuDYH: \"x5ehqhr\",\n    k63SB2: \"xrf6cl6\",\n    kb6lSQ: \"x1g135zh\",\n    kLWn49: \"x1ggk5va\",\n    kg3NbH: \"xg0ps1x\",\n    $$css: true\n  },\n  md: {\n    kZKoxP: \"x1rv7mn0\",\n    kg3NbH: \"x790zyz\",\n    $$css: true\n  },\n  outlined: {\n    kWkggS: \"x1dg9itu x1yu1589 x1728qcm xjbqb8w\",\n    kVAM5u: \"x133yhug\",\n    ksu8eU: \"x1y0btm7\",\n    kMzoRj: \"xmkeg23\",\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  },\n  outlinedDisabled: {\n    kWkggS: \"xjbqb8w\",\n    kVAM5u: \"xrh88j3\",\n    kMwMTN: \"x1xj74d8\",\n    $$css: true\n  },\n  pending: {\n    kGNEyG: \"x6s0dn4\",\n    k1xSpc: \"x78zum5\",\n    kpwlN0: \"x10a8y8t\",\n    kjj79g: \"xl56j7k\",\n    kVAEAm: \"x10l6tqk\",\n    $$css: true\n  },\n  text: {\n    kWkggS: \"x12vej0r x598nmq x14dcer4 xjbqb8w\",\n    kMwMTN: \"x1mxwv8y\",\n    $$css: true\n  },\n  textDisabled: {\n    kWkggS: \"xjbqb8w\",\n    kMwMTN: \"x1xj74d8\",\n    $$css: true\n  },\n  tonal: {\n    kWkggS: \"xnqsvhv xc87fxa xlizrex x15dekr4\",\n    kGVxlE: \"xpk4wdd x1955hzl x1gnnqk1\",\n    kMwMTN: \"x1sawysd\",\n    $$css: true\n  },\n  tonalDisabled: {\n    kWkggS: \"xepofeg\",\n    kGVxlE: \"x1gnnqk1\",\n    kMwMTN: \"x1xj74d8\",\n    $$css: true\n  },\n  xl: {\n    kZKoxP: \"x1xaimp3\",\n    kMv6JI: \"x1fz0g89\",\n    kGuDYH: \"xkb6epg\",\n    k63SB2: \"x76yrz5\",\n    kOIVth: \"x1gka490\",\n    kb6lSQ: \"x1s1qhaa\",\n    kLWn49: \"x1voeury\",\n    kg3NbH: \"x1sdxjpb\",\n    $$css: true\n  },\n  xs: {\n    kZKoxP: \"xig8zya\",\n    kg3NbH: \"x790zyz\",\n    $$css: true\n  },\n  xxl: {\n    kZKoxP: \"x173yhrv\",\n    kMv6JI: \"x1vsmgmf\",\n    kGuDYH: \"xh9c4x\",\n    k63SB2: \"x1y15vu6\",\n    kOIVth: \"xxj4525\",\n    kb6lSQ: \"xoqu3bc\",\n    kLWn49: \"x10x9d6x\",\n    kg3NbH: \"x1dao9b2\",\n    $$css: true\n  }\n};\n\n// The outlined button's border thickens with the size, as the page's size\n// tokens have it: 1dp up to M, 2dp at L, 3dp at XL. A style per size rather\n// than a value in the size style, since a border on a filled button would\n// draw in the label colour.\nconst outlineWidths = {\n  lg: {\n    kMzoRj: \"xmkeg23\",\n    $$css: true\n  },\n  md: {\n    kMzoRj: \"xmkeg23\",\n    $$css: true\n  },\n  xl: {\n    kMzoRj: \"xdh2fpr\",\n    $$css: true\n  },\n  xs: {\n    kMzoRj: \"xmkeg23\",\n    $$css: true\n  },\n  xxl: {\n    kMzoRj: \"x9r2w2z\",\n    $$css: true\n  }\n};\nconst disabledStyles = {\n  elevated: styles.elevatedDisabled,\n  filled: styles.filledDisabled,\n  outlined: styles.outlinedDisabled,\n  text: styles.textDisabled,\n  tonal: styles.tonalDisabled\n};\ntype ButtonDOMProps = Omit<RACButtonProps, 'children' | 'className' | 'style' | GlobalEventKey> & Pick<DOMAttributes<HTMLElement>, GlobalEventKey>;\ntype ButtonProps = {\n  children?: ReactNode;\n  /** A function may compute the class from the button's render state. */\n  className?: ClassNameOrFunction<ButtonState>;\n  /**\n   * Disables the press ripple. The hover/pressed background state layer is\n   * unaffected.\n   * @default false\n   */\n  disableRipple?: boolean;\n  /**\n   * Where the button leads. Given one, the button is rendered as a link —\n   * an `<a>`, announced as the link it is — with the same styles and ripple.\n   * `render`, `type`, and the form and pending props apply to the button\n   * form only.\n   */\n  href?: string;\n  /**\n   * The name of the ring shown while the button is pending, for a screen\n   * reader. The label it replaces is hidden while it shows.\n   * @default 'Loading'\n   */\n  pendingLabel?: string;\n  /** The link's `rel`, when `href` is set. */\n  rel?: string;\n  /**\n   * Control height: `xs` 32px, `md` 40px, `lg` 56px, `xl` 96px, `xxl` 136px —\n   * the buttons spec page's XS, S, M, L and XL, each with its own inline\n   * padding and type role. `md` is the page's default.\n   * @default 'md'\n   */\n  size?: ButtonSize;\n  /** A function may compute the style from the button's render state. */\n  style?: StyleOrFunction<ButtonState>;\n  /** The link's `target`, when `href` is set. */\n  target?: string;\n  /**\n   * How much weight the button pulls. `filled` and `tonal` carry a container\n   * of their own; `outlined` and `text` sit on the page; `elevated` sits on\n   * a low surface and lifts off it with a shadow, for a button that has to\n   * separate from a busy background rather than from the page.\n   * @default 'filled'\n   */\n  variant?: ButtonVariant;\n} & ButtonDOMProps;\ntype ButtonSize = 'lg' | 'md' | 'xl' | 'xs' | 'xxl';\n\n// The render state both of React Aria's elements share. A className or\n// style function written against it serves the button and the link alike;\n// `isPending` belongs to the button alone, and `isCurrent` to the link, so\n// neither is here: a `className` written against this state serves both\n// elements. What the button draws while pending is decided in\n// `buttonContent`, which sees React Aria's own state rather than this one.\ntype ButtonState = Pick<ButtonRenderProps, 'isDisabled' | 'isFocused' | 'isFocusVisible' | 'isHovered' | 'isPressed'>;\ntype ButtonVariant = 'elevated' | 'filled' | 'outlined' | 'text' | 'tonal';\n\n// React Aria types the global DOM events — pointer, mouse, touch, wheel and\n// the rest — against the element each component renders, and a handler\n// written for a <button> does not type-check against an <a>. The keys are\n// retyped against HTMLElement here so one set of props serves both forms;\n// the events React Aria defines itself (press, focus, keyboard) keep its\n// types, since it hands those its own event objects.\ntype GlobalEventKey = Exclude<keyof DOMAttributes<HTMLElement> & keyof RACButtonProps, 'onBlur' | 'onClick' | 'onFocus'>;\n\n/**\n * The design's button, at five emphasis levels and five control heights.\n * Given `href` it is a link with the same appearance. Every `aria-*` prop is\n * forwarded to the element; React Aria alone would keep only the labelling\n * ones.\n */\nfunction Button({\n  children,\n  disableRipple = false,\n  href,\n  isDisabled = false,\n  onClick,\n  onContextMenu,\n  onKeyDown,\n  onKeyUp,\n  onPointerCancel,\n  onPointerDown,\n  onPointerLeave,\n  onPointerUp,\n  pendingLabel = 'Loading',\n  rel,\n  render,\n  size = 'md',\n  target,\n  variant = 'filled',\n  ...props\n}: ButtonProps) {\n  // `props` (className/style, etc.) is spread separately: `className` and\n  // `style` there may be functions of render state, which ripple's own\n  // handler-only merge doesn't need to know about. It is also why the styles\n  // below merge through mergeStatefulStyles rather than the plain\n  // mergeStyles. The ripple is off while disabled: React Aria still forwards\n  // pointer events to a disabled element, and a press that changes nothing\n  // should not look like one.\n  const ripple = useRipple<FocusableElement>(!disableRipple && !isDisabled, {\n    onClick,\n    onContextMenu,\n    onPointerCancel,\n    onPointerDown,\n    onPointerLeave,\n    onPointerUp\n  });\n  const styleProps = mergeStatefulStyles((state: ButtonState) => stylex.props(styles.base, focus.ring, styles[variant], styles[size], variant === 'outlined' && outlineWidths[size], state.isDisabled && styles.disabled, state.isDisabled && disabledStyles[variant]), props);\n  const element = {\n    aria: ariaAttributesOf(props),\n    onKeyDown,\n    onKeyUp\n  };\n  if (href !== undefined) {\n    return <RACLink href={href} isDisabled={isDisabled} rel={rel} render={linkRenderer(element)} target={target} {...ripple.handlers} {...props} {...styleProps}>\n        {children}\n        {ripple.surface}\n      </RACLink>;\n  }\n  return <RACButton isDisabled={isDisabled} render={buttonRenderer(element, render)} {...ripple.handlers} {...props} {...styleProps}>\n      {buttonContent(children, pendingLabel, ripple)}\n    </RACButton>;\n}\n// What the button draws: its label, hidden while the button is pending, with\n// the ring over it. The ring takes the button's own content colour rather\n// than the progress page's primary, which on a filled button is the fill\n// itself and so invisible. The label stays in the flow so the button keeps its\n// width, which is what stops a form jumping the moment it is submitted.\n// React Aria wants the progress bar in the accessibility tree as soon as the\n// button goes pending, so it is rendered from the render state rather than\n// after a delay.\n//\n// Built by a call rather than written inline at the prop, which is what\n// react-perf's no-new-function-as-prop is after; the React Compiler\n// memoises the result on its inputs.\nfunction buttonContent(children: ReactNode, pendingLabel: string, ripple: Ripple) {\n  return (state: ButtonRenderProps) => <>\n      <span {...{\n      0: {\n        className: \"xjp7ctv\"\n      },\n      1: {\n        className: \"xjp7ctv xlshs6z\"\n      }\n    }[!!state.isPending << 0]}>\n        {children}\n      </span>\n      {state.isPending ? <span className=\"x6s0dn4 x78zum5 x10a8y8t xl56j7k x10l6tqk\">\n          <ProgressIndicator aria-label={pendingLabel} isIndeterminate size=\"1em\" tone=\"inherit\" variant=\"circular\" />\n        </span> : null}\n      {ripple.surface}\n    </>;\n}\nexport type { ButtonDOMProps, ButtonProps, ButtonSize, ButtonState, ButtonVariant };\nexport default Button;"],"mappings":"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"}

package/dist/components/color-field/index.d.ts

@@ -17,11 +17,18 @@ type ColorFieldProps$1 = Omit<ColorFieldProps, 'children' | 'className' | 'style
   floatingLabel?: boolean;
   /** What the field is for. Always rendered; never a placeholder. */
   label: string;
-  /** An icon at the box's leading end. A `ColorSwatch` shows the value. */
+  /**
+   * An icon at the box's leading end, in the page's 24dp size. A
+   * `ColorSwatch` shows the value. An icon drawn in `em` takes that size
+   * from the slot.
+   */
   leadingIcon?: ReactNode;
   /** A function may compute the style from the field's render state. */
   style?: ColorFieldProps['style'];
-  /** An icon at the box's trailing end. */
+  /**
+   * An icon at the box's trailing end, in the page's 24dp size. An icon
+   * drawn in `em` takes that size from the slot.
+   */
   trailingIcon?: ReactNode;
   /**
    * Which of the text fields page's two boxes to draw.

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","ColorFieldProps","RACColorFieldProps","stylex","ColorField","RACColorField","FieldVariant","FieldBox","FieldInput","FieldMessage","fieldStyles","invalidFrom","useFieldValidationBehavior","mergeStatefulStyles","Omit","className","description","error","floatingLabel","label","leadingIcon","style","trailingIcon","variant","t0","$","_c","t1","isDisabled","t2","t3","props","undefined","validationBehavior","T0","t4","t5","root","t6","Symbol","for","t7","t8","t9"],"sources":["../../../src/components/color-field/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { ColorFieldProps as RACColorFieldProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { ColorField as RACColorField } from 'react-aria-components';\nimport type { FieldVariant } from '../../field';\nimport { FieldBox, FieldInput, FieldMessage } from '../../field';\nimport { fieldStyles, invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { mergeStatefulStyles } from '../../styles/merge';\n\n// A colour typed rather than picked. React Aria renders a plain text input\n// holding the colour's own notation, so this is the text fields page's box\n// with nothing added — the same chrome `TextField` draws through, which is\n// what makes a colour field on a form the same shape as the field beside\n// it.\n//\n// Two things are worth knowing about what it holds.\n//\n// **`channel` turns it from a colour into a number.** Without one the field\n// holds the whole colour — `#6750A4` — and parses what is typed. With one\n// it holds that channel alone, as a number a reader can step, which is what\n// a picker's three boxes beside a plane are.\n//\n// **A swatch is the natural leading icon.** The field's value is a colour,\n// and the chrome already has a slot for something at the box's leading end;\n// passing a `ColorSwatch` there is what makes the field show the colour it\n// holds. It is left to the call site rather than drawn here, since a field\n// inside a picker sits beside a swatch already.\n\ntype ColorFieldProps = Omit<RACColorFieldProps, 'children' | 'className' | 'style'> & {\n  /** A function may compute the class from the field's render state. */\n  className?: RACColorFieldProps['className'];\n  /** Supporting text under the field. */\n  description?: string;\n  /** The message shown instead of the description, which also marks the field invalid. */\n  error?: string;\n  /**\n   * Whether the label floats into the box's top once the field holds a\n   * value, rather than sitting above it.\n   * @default true\n   */\n  floatingLabel?: boolean;\n  /** What the field is for. Always rendered; never a placeholder. */\n  label: string;\n  /** An icon at the box's leading end. A `ColorSwatch` shows the value. */\n  leadingIcon?: ReactNode;\n  /** A function may compute the style from the field's render state. */\n  style?: RACColorFieldProps['style'];\n  /** An icon at the box's trailing end. */\n  trailingIcon?: ReactNode;\n  /**\n   * Which of the text fields page's two boxes to draw.\n   * @default 'filled'\n   */\n  variant?: FieldVariant;\n};\n\n/**\n * A colour typed into a field. The value is React Aria's — pass `value` with\n * `onChange` to control it, or `defaultValue` — as a CSS colour string or a\n * `Color` from `parseColor`, which this package re-exports.\n *\n * ```tsx\n * <ColorField defaultValue=\"#6750A4\" label=\"Label\" />\n * ```\n *\n * Without `channel` the field holds the whole colour and parses what is\n * typed; with one it holds that channel alone as a number. `colorSpace`\n * decides which space a channel belongs to, the same as on `ColorSlider`.\n *\n * The box, label and message are the field chrome in `src/field`, shared\n * with every other field. The call site's `className` and `style` land on\n * the field as a whole, which is the element a layout positions.\n */\nfunction ColorField({\n  description,\n  error,\n  floatingLabel = true,\n  isDisabled = false,\n  label,\n  leadingIcon,\n  trailingIcon,\n  variant = 'filled',\n  ...props\n}: ColorFieldProps) {\n  const validationBehavior = useFieldValidationBehavior();\n  return <RACColorField isDisabled={isDisabled} isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(fieldStyles.root), props)}>\n      <FieldBox floatingLabel={floatingLabel} label={label} leading={leadingIcon} trailing={trailingIcon} variant={variant}>\n        <FieldInput />\n      </FieldBox>\n      <FieldMessage description={description} error={error} />\n    </RACColorField>;\n}\nexport type { ColorFieldProps };\nexport default ColorField;"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAyEA,SAAAI,aAAAoB,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAoB,MAAA,EAAAV,aAAAC,OAAAC,eAAAS,IAAAC,YAAAC,IAAAV,OAAAC,aAAAE,cAAAC,SAAAO,IAAA,GAAAC,YAAAP;CAGlB,MAAAN,gBAAAS,OAAAK,KAAAA,IAAA,OAAAL;CACA,MAAAC,aAAAC,OAAAG,KAAAA,IAAA,QAAAH;CAIA,MAAAN,UAAAO,OAAAE,KAAAA,IAAA,WAAAF;CAGA,MAAAG,qBAA2BrB,2BAA2B;CAC9C,MAAAsB,KAAA7B;CAAa,IAAA8B;CAAA,IAAAV,EAAA,OAAAR,OAAA;EAAoCkB,KAAAxB,YAAYM,KAAK;EAACQ,EAAA,KAAAR;EAAAQ,EAAA,KAAAU;CAAA,OAAAA,KAAAV,EAAA;CAAyD,MAAAW,KAAAvB,oBAAoBV,MAAaO,YAAW2B,IAAK,GAAGN,OAAK;CAAC,IAAAO;CAAA,IAAAb,EAAA,OAAAc,OAAAC,IAAA,2BAAA,GAAA;EAExLF,KAAA,oBAAC,YAAD,CAAW,CAAA;EAAGb,EAAA,KAAAa;CAAA,OAAAA,KAAAb,EAAA;CAAA,IAAAgB;CAAA,IAAAhB,EAAA,OAAAP,iBAAAO,EAAA,OAAAN,SAAAM,EAAA,OAAAL,eAAAK,EAAA,OAAAH,gBAAAG,EAAA,OAAAF,SAAA;EADhBkB,KAAA,oBAAC,UAAD;GAAyBvB;GAAsBC;GAAgBC,SAAAA;GAAuBE,UAAAA;GAAuBC;GAC3Ge,UAAAA;EADO,CAAA;EAEEb,EAAA,KAAAP;EAAAO,EAAA,KAAAN;EAAAM,EAAA,KAAAL;EAAAK,EAAA,KAAAH;EAAAG,EAAA,KAAAF;EAAAE,EAAA,KAAAgB;CAAA,OAAAA,KAAAhB,EAAA;CAAA,IAAAiB;CAAA,IAAAjB,EAAA,OAAAT,eAAAS,EAAA,QAAAR,OAAA;EACXyB,KAAA,oBAAC,cAAD;GAA2B1B;GAAoBC;EAAK,CAAA;EAAIQ,EAAA,KAAAT;EAAAS,EAAA,MAAAR;EAAAQ,EAAA,MAAAiB;CAAA,OAAAA,KAAAjB,EAAA;CAAA,IAAAkB;CAAA,IAAAlB,EAAA,QAAAS,MAAAT,EAAA,QAAAG,cAAAH,EAAA,QAAAM,WAAAN,EAAA,QAAAU,MAAAV,EAAA,QAAAW,MAAAX,EAAA,QAAAgB,MAAAhB,EAAA,QAAAiB,MAAAjB,EAAA,QAAAQ,oBAAA;EAJrDU,KAAA,qBAAC,IAAD;GAA2Bf;GAAuB,WAAAO;GAAwCF;GAAkB,GAAMF;GAAK,GAAMK;GAA7H,UAAA,CACHK,IAGAC,EAJiB;;EAKHjB,EAAA,MAAAS;EAAAT,EAAA,MAAAG;EAAAH,EAAA,MAAAM;EAAAN,EAAA,MAAAU;EAAAV,EAAA,MAAAW;EAAAX,EAAA,MAAAgB;EAAAhB,EAAA,MAAAiB;EAAAjB,EAAA,MAAAQ;EAAAR,EAAA,MAAAkB;CAAA,OAAAA,KAAAlB,EAAA;CAAA,OALXkB;AAKW"}
+{"version":3,"file":"index.js","names":["ReactNode","ColorFieldProps","RACColorFieldProps","stylex","ColorField","RACColorField","FieldVariant","FieldBox","FieldInput","FieldMessage","fieldStyles","invalidFrom","useFieldValidationBehavior","mergeStatefulStyles","Omit","className","description","error","floatingLabel","label","leadingIcon","style","trailingIcon","variant","t0","$","_c","t1","isDisabled","t2","t3","props","undefined","validationBehavior","T0","t4","t5","root","t6","Symbol","for","t7","t8","t9"],"sources":["../../../src/components/color-field/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { ColorFieldProps as RACColorFieldProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { ColorField as RACColorField } from 'react-aria-components';\nimport type { FieldVariant } from '../../field';\nimport { FieldBox, FieldInput, FieldMessage } from '../../field';\nimport { fieldStyles, invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { mergeStatefulStyles } from '../../styles/merge';\n\n// A colour typed rather than picked. React Aria renders a plain text input\n// holding the colour's own notation, so this is the text fields page's box\n// with nothing added — the same chrome `TextField` draws through, which is\n// what makes a colour field on a form the same shape as the field beside\n// it.\n//\n// Two things are worth knowing about what it holds.\n//\n// **`channel` turns it from a colour into a number.** Without one the field\n// holds the whole colour — `#6750A4` — and parses what is typed. With one\n// it holds that channel alone, as a number a reader can step, which is what\n// a picker's three boxes beside a plane are.\n//\n// **A swatch is the natural leading icon.** The field's value is a colour,\n// and the chrome already has a slot for something at the box's leading end;\n// passing a `ColorSwatch` there is what makes the field show the colour it\n// holds. It is left to the call site rather than drawn here, since a field\n// inside a picker sits beside a swatch already.\n\ntype ColorFieldProps = Omit<RACColorFieldProps, 'children' | 'className' | 'style'> & {\n  /** A function may compute the class from the field's render state. */\n  className?: RACColorFieldProps['className'];\n  /** Supporting text under the field. */\n  description?: string;\n  /** The message shown instead of the description, which also marks the field invalid. */\n  error?: string;\n  /**\n   * Whether the label floats into the box's top once the field holds a\n   * value, rather than sitting above it.\n   * @default true\n   */\n  floatingLabel?: boolean;\n  /** What the field is for. Always rendered; never a placeholder. */\n  label: string;\n  /**\n   * An icon at the box's leading end, in the page's 24dp size. A\n   * `ColorSwatch` shows the value. An icon drawn in `em` takes that size\n   * from the slot.\n   */\n  leadingIcon?: ReactNode;\n  /** A function may compute the style from the field's render state. */\n  style?: RACColorFieldProps['style'];\n  /**\n   * An icon at the box's trailing end, in the page's 24dp size. An icon\n   * drawn in `em` takes that size from the slot.\n   */\n  trailingIcon?: ReactNode;\n  /**\n   * Which of the text fields page's two boxes to draw.\n   * @default 'filled'\n   */\n  variant?: FieldVariant;\n};\n\n/**\n * A colour typed into a field. The value is React Aria's — pass `value` with\n * `onChange` to control it, or `defaultValue` — as a CSS colour string or a\n * `Color` from `parseColor`, which this package re-exports.\n *\n * ```tsx\n * <ColorField defaultValue=\"#6750A4\" label=\"Label\" />\n * ```\n *\n * Without `channel` the field holds the whole colour and parses what is\n * typed; with one it holds that channel alone as a number. `colorSpace`\n * decides which space a channel belongs to, the same as on `ColorSlider`.\n *\n * The box, label and message are the field chrome in `src/field`, shared\n * with every other field. The call site's `className` and `style` land on\n * the field as a whole, which is the element a layout positions.\n */\nfunction ColorField({\n  description,\n  error,\n  floatingLabel = true,\n  isDisabled = false,\n  label,\n  leadingIcon,\n  trailingIcon,\n  variant = 'filled',\n  ...props\n}: ColorFieldProps) {\n  const validationBehavior = useFieldValidationBehavior();\n  return <RACColorField isDisabled={isDisabled} isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(fieldStyles.root), props)}>\n      <FieldBox floatingLabel={floatingLabel} label={label} leading={leadingIcon} trailing={trailingIcon} variant={variant}>\n        <FieldInput />\n      </FieldBox>\n      <FieldMessage description={description} error={error} />\n    </RACColorField>;\n}\nexport type { ColorFieldProps };\nexport default ColorField;"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAgFA,SAAAI,aAAAoB,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAoB,MAAA,EAAAV,aAAAC,OAAAC,eAAAS,IAAAC,YAAAC,IAAAV,OAAAC,aAAAE,cAAAC,SAAAO,IAAA,GAAAC,YAAAP;CAGlB,MAAAN,gBAAAS,OAAAK,KAAAA,IAAA,OAAAL;CACA,MAAAC,aAAAC,OAAAG,KAAAA,IAAA,QAAAH;CAIA,MAAAN,UAAAO,OAAAE,KAAAA,IAAA,WAAAF;CAGA,MAAAG,qBAA2BrB,2BAA2B;CAC9C,MAAAsB,KAAA7B;CAAa,IAAA8B;CAAA,IAAAV,EAAA,OAAAR,OAAA;EAAoCkB,KAAAxB,YAAYM,KAAK;EAACQ,EAAA,KAAAR;EAAAQ,EAAA,KAAAU;CAAA,OAAAA,KAAAV,EAAA;CAAyD,MAAAW,KAAAvB,oBAAoBV,MAAaO,YAAW2B,IAAK,GAAGN,OAAK;CAAC,IAAAO;CAAA,IAAAb,EAAA,OAAAc,OAAAC,IAAA,2BAAA,GAAA;EAExLF,KAAA,oBAAC,YAAD,CAAW,CAAA;EAAGb,EAAA,KAAAa;CAAA,OAAAA,KAAAb,EAAA;CAAA,IAAAgB;CAAA,IAAAhB,EAAA,OAAAP,iBAAAO,EAAA,OAAAN,SAAAM,EAAA,OAAAL,eAAAK,EAAA,OAAAH,gBAAAG,EAAA,OAAAF,SAAA;EADhBkB,KAAA,oBAAC,UAAD;GAAyBvB;GAAsBC;GAAgBC,SAAAA;GAAuBE,UAAAA;GAAuBC;GAC3Ge,UAAAA;EADO,CAAA;EAEEb,EAAA,KAAAP;EAAAO,EAAA,KAAAN;EAAAM,EAAA,KAAAL;EAAAK,EAAA,KAAAH;EAAAG,EAAA,KAAAF;EAAAE,EAAA,KAAAgB;CAAA,OAAAA,KAAAhB,EAAA;CAAA,IAAAiB;CAAA,IAAAjB,EAAA,OAAAT,eAAAS,EAAA,QAAAR,OAAA;EACXyB,KAAA,oBAAC,cAAD;GAA2B1B;GAAoBC;EAAK,CAAA;EAAIQ,EAAA,KAAAT;EAAAS,EAAA,MAAAR;EAAAQ,EAAA,MAAAiB;CAAA,OAAAA,KAAAjB,EAAA;CAAA,IAAAkB;CAAA,IAAAlB,EAAA,QAAAS,MAAAT,EAAA,QAAAG,cAAAH,EAAA,QAAAM,WAAAN,EAAA,QAAAU,MAAAV,EAAA,QAAAW,MAAAX,EAAA,QAAAgB,MAAAhB,EAAA,QAAAiB,MAAAjB,EAAA,QAAAQ,oBAAA;EAJrDU,KAAA,qBAAC,IAAD;GAA2Bf;GAAuB,WAAAO;GAAwCF;GAAkB,GAAMF;GAAK,GAAMK;GAA7H,UAAA,CACHK,IAGAC,EAJiB;;EAKHjB,EAAA,MAAAS;EAAAT,EAAA,MAAAG;EAAAH,EAAA,MAAAM;EAAAN,EAAA,MAAAU;EAAAV,EAAA,MAAAW;EAAAX,EAAA,MAAAgB;EAAAhB,EAAA,MAAAiB;EAAAjB,EAAA,MAAAQ;EAAAR,EAAA,MAAAkB;CAAA,OAAAA,KAAAlB,EAAA;CAAA,OALXkB;AAKW"}