@kanso-labs/kanso-ui 0.19.0 → 0.20.0

package/dist/chip/styles.js

@@ -0,0 +1,86 @@
+//#region src/chip/styles.ts
+const chipStyles = {
+	base: {
+		kGNEyG: "x6s0dn4",
+		kZKoxP: "x10w6t97",
+		kaIpWk: "x1xdvaa9",
+		ksu8eU: "x1y0btm7",
+		kMzoRj: "xmkeg23",
+		kB7OPa: "x9f619",
+		kkrTdU: "x1ypdohk",
+		k1xSpc: "x3nfvp2",
+		kmuXW: "x2lah0s",
+		kMv6JI: "xkknnkr",
+		kGuDYH: "x14zspaw",
+		k63SB2: "x1v9cpvo",
+		kOIVth: "x126z3so",
+		kb6lSQ: "x155f00i",
+		kLWn49: "x1lz68p4",
+		kjBf7l: "xrgy624",
+		kInvED: "x1hl8ikr",
+		k3XXqK: "x9v5kkp x1t137rt",
+		kMeerF: "x1de99jn",
+		k8WAf4: "xt970qd",
+		kg3NbH: "x790zyz",
+		kIyJzY: "x1qno0dh",
+		k1ekBW: "x1eaenvl",
+		kAMwcw: "xpc4ca7",
+		$$css: true
+	},
+	disabled: {
+		kMwMTN: "x1xj74d8",
+		kkrTdU: "x1h6gzvc",
+		$$css: true
+	},
+	disabledSelected: {
+		kWkggS: "xepofeg",
+		$$css: true
+	},
+	disabledUnselected: {
+		kWkggS: "xjbqb8w",
+		kVAM5u: "xrh88j3",
+		$$css: true
+	},
+	remove: {
+		kGNEyG: "x6s0dn4",
+		kWkggS: "xy3r1oc x15a1ka xjbqb8w",
+		kZKoxP: "xmix8c7",
+		kaIpWk: "x3y1ksm",
+		kMzoRj: "xc342km",
+		kB7OPa: "x9f619",
+		kMwMTN: "x1heor9g",
+		kkrTdU: "x1ypdohk",
+		k1xSpc: "x3nfvp2",
+		kmuXW: "x2lah0s",
+		kzqmXN: "x1xp8n7a",
+		kjj79g: "xl56j7k",
+		k71WvV: "x1kfc2zf",
+		kjBf7l: "x14ytart",
+		kInvED: "x1y3gkto",
+		k3XXqK: "x9v5kkp x1t137rt",
+		kMeerF: "x1de99jn",
+		kmVPX3: "x1717udv",
+		$$css: true
+	},
+	removeGlyph: {
+		kZKoxP: "xmix8c7",
+		kzqmXN: "x1xp8n7a",
+		$$css: true
+	},
+	selected: {
+		kWkggS: "xnqsvhv xlizrex x15dekr4",
+		kVAM5u: "x9r1u3d",
+		kMwMTN: "x1sawysd",
+		$$css: true
+	},
+	unselected: {
+		kWkggS: "x83qkoq x1p2om7n xjbqb8w",
+		kVAM5u: "x133yhug",
+		kMwMTN: "x1w5n3ug",
+		$$css: true
+	}
+};
+//#endregion
+export { chipStyles };
+
+//# sourceMappingURL=styles.js.map

package/dist/chip/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","names":[],"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// 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    kjBf7l: \"xrgy624\",\n    kInvED: \"x1hl8ikr\",\n    k3XXqK: \"x9v5kkp x1t137rt\",\n    kMeerF: \"x1de99jn\",\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  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":";AA+BA,MAAM,aAAa;CACjB,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,kBAAkB;EAChB,QAAQ;EACR,OAAO;CACT;CACA,oBAAoB;EAClB,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,YAAY;EACV,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF"}

package/dist/components/autocomplete/index.d.ts

@@ -0,0 +1,45 @@
+import { ReactNode } from "react";
+import { AutocompleteProps } from "react-aria-components";
+//#region src/components/autocomplete/index.d.ts
+type AutocompleteFilter<T extends object = object> = NonNullable<AutocompleteProps<T>['filter']>;
+type AutocompleteProps$1<T extends object = object> = {
+  /**
+   * The search input and the collection it filters, in whatever the page
+   * puts around them. React Aria needs both somewhere inside.
+   */
+  children?: ReactNode;
+  /**
+   * Which options a search keeps. Defaults to a locale-aware contains match
+   * on each option's text — React Aria's own default is to filter nothing,
+   * which is right for a collection that arrives filtered and wrong for one
+   * written out in the page.
+   */
+  filter?: AutocompleteFilter<T>;
+} & Omit<AutocompleteProps<T>, 'children' | 'filter'>;
+/**
+ * A search input that filters the collection under it. Its value is React
+ * Aria's: pass `inputValue` with `onInputChange` to control what has been
+ * typed, or `defaultInputValue` to let it keep its own.
+ *
+ * ```tsx
+ * <Autocomplete>
+ *   <SearchField label="Search" placeholder="Search" />
+ *   <ListBox aria-label="Results">
+ *     <ListBox.Item id="first">First item</ListBox.Item>
+ *   </ListBox>
+ * </Autocomplete>
+ * ```
+ *
+ * It renders no element of its own, so the input and the collection sit
+ * wherever the page puts them — side by side in a panel, in a `Menu.Content`,
+ * or in a `Dialog` as a command palette. That is also why it takes no
+ * `className` or `style`: there is nothing for them to land on.
+ *
+ * Keyboard focus stays in the input while the arrow keys move through the
+ * collection, which is React Aria's virtual focus. `disableVirtualFocus`
+ * turns that off and makes the collection tabbable instead.
+ */
+declare function Autocomplete$1<T extends object = object>({ children, filter, ...props }: AutocompleteProps$1<T>): import("react").JSX.Element;
+//#endregion
+export { type AutocompleteFilter, type AutocompleteProps$1 as AutocompleteProps, Autocomplete$1 as default };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/autocomplete/index.js

@@ -0,0 +1,77 @@
+import { jsx } from "react/jsx-runtime";
+import { c } from "react/compiler-runtime";
+import { Autocomplete, useFilter } from "react-aria-components";
+//#region src/components/autocomplete/index.tsx
+/**
+* A search input that filters the collection under it. Its value is React
+* Aria's: pass `inputValue` with `onInputChange` to control what has been
+* typed, or `defaultInputValue` to let it keep its own.
+*
+* ```tsx
+* <Autocomplete>
+*   <SearchField label="Search" placeholder="Search" />
+*   <ListBox aria-label="Results">
+*     <ListBox.Item id="first">First item</ListBox.Item>
+*   </ListBox>
+* </Autocomplete>
+* ```
+*
+* It renders no element of its own, so the input and the collection sit
+* wherever the page puts them — side by side in a panel, in a `Menu.Content`,
+* or in a `Dialog` as a command palette. That is also why it takes no
+* `className` or `style`: there is nothing for them to land on.
+*
+* Keyboard focus stays in the input while the arrow keys move through the
+* collection, which is React Aria's virtual focus. `disableVirtualFocus`
+* turns that off and makes the collection tabbable instead.
+*/
+function Autocomplete$1(t0) {
+	const $ = c(12);
+	let children;
+	let filter;
+	let props;
+	if ($[0] !== t0) {
+		({children, filter, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = filter;
+		$[3] = props;
+	} else {
+		children = $[1];
+		filter = $[2];
+		props = $[3];
+	}
+	let t1;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = { sensitivity: "base" };
+		$[4] = t1;
+	} else t1 = $[4];
+	const { contains } = useFilter(t1);
+	let t2;
+	if ($[5] !== contains || $[6] !== filter) {
+		t2 = filter ?? containsFilter(contains);
+		$[5] = contains;
+		$[6] = filter;
+		$[7] = t2;
+	} else t2 = $[7];
+	let t3;
+	if ($[8] !== children || $[9] !== props || $[10] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Autocomplete, {
+			filter: t2,
+			...props,
+			children
+		});
+		$[8] = children;
+		$[9] = props;
+		$[10] = t2;
+		$[11] = t3;
+	} else t3 = $[11];
+	return t3;
+}
+function containsFilter(contains) {
+	return (textValue, inputValue) => contains(textValue, inputValue);
+}
+//#endregion
+export { Autocomplete$1 as default };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["children"],"sources":["../../../src/components/autocomplete/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\nimport type { AutocompleteProps as RACAutocompleteProps } from 'react-aria-components'\n\nimport {\n  Autocomplete as RACAutocomplete,\n  useFilter,\n} from 'react-aria-components'\n\n// The search page's search with suggestions, as the wrapper React Aria makes\n// it: a search input over a collection, where typing narrows what the\n// collection shows. It draws nothing of its own — the input is SearchField,\n// the collection is ListBox or Menu, and where the two sit is the page's\n// business, which is what lets the same wrapper be a searchable list, a\n// filtered menu and a command palette inside a Dialog.\n//\n// Every other component here is a shape; this one is a behaviour, so it\n// renders no element and takes no `className` or `style`. There is nothing\n// for them to land on, and a wrapper element added to give them somewhere\n// would be a layout decision this component has no business making — the\n// three shapes above want three different ones.\n//\n// One thing is added to React Aria's. **Filtering is on by default.** Their\n// wrapper filters nothing unless it is handed a predicate, on the grounds\n// that a collection fed from a server may already be filtered. A collection\n// written out in the page is the common case here, and a search box that\n// does not search is a puzzle rather than a default, so `filter` falls back\n// to the same locale-aware contains match ComboBox uses. A collection that\n// filters itself passes a predicate that always returns true.\n\n// React Aria's own filter signature. Taken from the prop rather than written\n// out, since its third parameter is a collection node whose type this package\n// does not depend on directly.\ntype AutocompleteFilter<T extends object = object> = NonNullable<\n  RACAutocompleteProps<T>['filter']\n>\n\ntype AutocompleteProps<T extends object = object> = {\n  /**\n   * The search input and the collection it filters, in whatever the page\n   * puts around them. React Aria needs both somewhere inside.\n   */\n  children?: ReactNode\n  /**\n   * Which options a search keeps. Defaults to a locale-aware contains match\n   * on each option's text — React Aria's own default is to filter nothing,\n   * which is right for a collection that arrives filtered and wrong for one\n   * written out in the page.\n   */\n  filter?: AutocompleteFilter<T>\n} & Omit<RACAutocompleteProps<T>, 'children' | 'filter'>\n\n/**\n * A search input that filters the collection under it. Its value is React\n * Aria's: pass `inputValue` with `onInputChange` to control what has been\n * typed, or `defaultInputValue` to let it keep its own.\n *\n * ```tsx\n * <Autocomplete>\n *   <SearchField label=\"Search\" placeholder=\"Search\" />\n *   <ListBox aria-label=\"Results\">\n *     <ListBox.Item id=\"first\">First item</ListBox.Item>\n *   </ListBox>\n * </Autocomplete>\n * ```\n *\n * It renders no element of its own, so the input and the collection sit\n * wherever the page puts them — side by side in a panel, in a `Menu.Content`,\n * or in a `Dialog` as a command palette. That is also why it takes no\n * `className` or `style`: there is nothing for them to land on.\n *\n * Keyboard focus stays in the input while the arrow keys move through the\n * collection, which is React Aria's virtual focus. `disableVirtualFocus`\n * turns that off and makes the collection tabbable instead.\n */\nfunction Autocomplete<T extends object = object>({\n  children,\n  filter,\n  ...props\n}: AutocompleteProps<T>) {\n  const { contains } = useFilter({ sensitivity: 'base' })\n\n  return (\n    <RACAutocomplete<T> filter={filter ?? containsFilter(contains)} {...props}>\n      {children}\n    </RACAutocomplete>\n  )\n}\n\n// React Aria's filter is handed the node as well as the two strings, which a\n// contains match has no use for. Built by a call rather than written inline\n// at the prop, which is what react-perf's no-new-function-as-prop is after;\n// the React Compiler memoises the result on its input.\nfunction containsFilter(\n  contains: (textValue: string, inputValue: string) => boolean,\n) {\n  return (textValue: string, inputValue: string) =>\n    contains(textValue, inputValue)\n}\n\nexport type { AutocompleteFilter, AutocompleteProps }\n\nexport default Autocomplete\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA0EA,SAAA,eAAA,IAAA;CAAA,MAAA,IAAA,EAAA,EAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,IAAA;EAAiD,CAAA,CAAA,UAAA,QAAA,GAAA,SAAA;EAI1B,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA;EAAA,WAAA,EAAA;EAAA,SAAA,EAAA;EAAA,QAAA,EAAA;CAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,OAAA,IAAA,2BAAA,GAAA;EACU,KAAA,EAAA,aAAe,OAAO;EAAC,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAtD,MAAA,EAAA,aAAqB,UAAU,EAAuB;CAAC,IAAA;CAAA,IAAA,EAAA,OAAA,YAAA,EAAA,OAAA,QAAA;EAGzB,KAAA,UAAU,eAAe,QAAQ;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,YAAA,EAAA,OAAA,SAAA,EAAA,QAAA,IAAA;EAA9D,KAAA,oBAAC,cAAD;GAA4B,QAAA;GAAkC,GAAM;GACjE;EADa,CAAA;EAEE,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OAFlB;AAEkB;AAQtB,SAAS,eACP,UACA;CACA,QAAQ,WAAmB,eACzB,SAAS,WAAW,UAAU;AAClC"}

package/dist/components/breadcrumbs/index.d.ts

@@ -0,0 +1,57 @@
+import { ReactNode } from "react";
+import { BreadcrumbProps, BreadcrumbsProps } from "react-aria-components";
+//#region src/components/breadcrumbs/index.d.ts
+type BreadcrumbsItemProps = Omit<BreadcrumbProps, 'children' | 'className' | 'style'> & {
+  /** The item's label. */
+  children?: ReactNode;
+  /** A function may compute the class from the item's render state. */
+  className?: BreadcrumbProps['className'];
+  /**
+   * Where the item leads. Leave it out on an item the page handles through
+   * the trail's `onAction`, and on the current one, which is never a link.
+   */
+  href?: string;
+  /** The link's `rel`. */
+  rel?: string;
+  /** A function may compute the style from the item's render state. */
+  style?: BreadcrumbProps['style'];
+  /** The link's `target`. */
+  target?: string;
+};
+type BreadcrumbsProps$1<T extends object = object> = Omit<BreadcrumbsProps<T>, 'children'> & {
+  /** The trail, as `Breadcrumbs.Item` entries. */
+  children?: ReactNode;
+};
+/**
+ * A trail of links back up a hierarchy, ending at the page you are on.
+ * React Aria makes the last item the current one and marks it
+ * `aria-current="page"`; everything before it is a link.
+ *
+ * ```tsx
+ * <Breadcrumbs aria-label="Label">
+ *   <Breadcrumbs.Item href="#first">First item</Breadcrumbs.Item>
+ *   <Breadcrumbs.Item href="#second">Second item</Breadcrumbs.Item>
+ *   <Breadcrumbs.Item>Third item</Breadcrumbs.Item>
+ * </Breadcrumbs>
+ * ```
+ *
+ * Name it with `aria-label` or `aria-labelledby`. A page that navigates
+ * without an `href` gives each item an `id` and the trail an `onAction`,
+ * which is React Aria's and reports the key that was pressed.
+ *
+ * The call site's `className` and `style` land on the list, which is the
+ * element a layout positions.
+ */
+declare function Breadcrumbs$1<T extends object = object>(props: BreadcrumbsProps$1<T>): import("react").JSX.Element;
+declare namespace Breadcrumbs$1 {
+  var Item: typeof BreadcrumbsItem;
+}
+/**
+ * One entry in the trail. Give it an `href` to navigate, or an `id` and let
+ * the trail's `onAction` handle it. The last entry is the current page and
+ * is drawn as text rather than a link, whatever it is given.
+ */
+declare function BreadcrumbsItem({ children, href, rel, target, ...props }: BreadcrumbsItemProps): import("react").JSX.Element;
+//#endregion
+export { type BreadcrumbsItemProps, type BreadcrumbsProps$1 as BreadcrumbsProps, Breadcrumbs$1 as default };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/breadcrumbs/index.js

@@ -0,0 +1,133 @@
+import { mergeStatefulStyles, mergeStyles } from "../../styles/merge.js";
+import { ChevronEndGlyph } from "../../glyphs/index.js";
+import Link$1 from "../link/index.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { c } from "react/compiler-runtime";
+import { Breadcrumb, Breadcrumbs } from "react-aria-components";
+//#region src/components/breadcrumbs/index.tsx
+/**
+* A trail of links back up a hierarchy, ending at the page you are on.
+* React Aria makes the last item the current one and marks it
+* `aria-current="page"`; everything before it is a link.
+*
+* ```tsx
+* <Breadcrumbs aria-label="Label">
+*   <Breadcrumbs.Item href="#first">First item</Breadcrumbs.Item>
+*   <Breadcrumbs.Item href="#second">Second item</Breadcrumbs.Item>
+*   <Breadcrumbs.Item>Third item</Breadcrumbs.Item>
+* </Breadcrumbs>
+* ```
+*
+* Name it with `aria-label` or `aria-labelledby`. A page that navigates
+* without an `href` gives each item an `id` and the trail an `onAction`,
+* which is React Aria's and reports the key that was pressed.
+*
+* The call site's `className` and `style` land on the list, which is the
+* element a layout positions.
+*/
+function Breadcrumbs$1(props) {
+	const $ = c(5);
+	let t0;
+	if ($[0] !== props) {
+		t0 = mergeStyles({ className: "x6s0dn4 x9f619 x1w5n3ug x78zum5 x1a02dak xkknnkr x14zspaw x1v9cpvo xzoy561 x155f00i x1lz68p4 xe8uvvx x1ghz6dp x1717udv" }, props);
+		$[0] = props;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== props || $[3] !== t0) {
+		t1 = /* @__PURE__ */ jsx(Breadcrumbs, {
+			...props,
+			...t0
+		});
+		$[2] = props;
+		$[3] = t0;
+		$[4] = t1;
+	} else t1 = $[4];
+	return t1;
+}
+/**
+* One entry in the trail. Give it an `href` to navigate, or an `id` and let
+* the trail's `onAction` handle it. The last entry is the current page and
+* is drawn as text rather than a link, whatever it is given.
+*/
+function BreadcrumbsItem(t0) {
+	const $ = c(18);
+	let T0;
+	let children;
+	let href;
+	let rel;
+	let t1;
+	let t2;
+	let target;
+	if ($[0] !== t0) {
+		const { children: t3, href: t4, rel: t5, target: t6, ...props } = t0;
+		children = t3;
+		href = t4;
+		rel = t5;
+		target = t6;
+		T0 = Breadcrumb;
+		t1 = props;
+		t2 = mergeStatefulStyles({ className: "x6s0dn4 x9f619 x78zum5 xzoy561" }, props);
+		$[0] = t0;
+		$[1] = T0;
+		$[2] = children;
+		$[3] = href;
+		$[4] = rel;
+		$[5] = t1;
+		$[6] = t2;
+		$[7] = target;
+	} else {
+		T0 = $[1];
+		children = $[2];
+		href = $[3];
+		rel = $[4];
+		t1 = $[5];
+		t2 = $[6];
+		target = $[7];
+	}
+	let t3;
+	if ($[8] !== children || $[9] !== href || $[10] !== rel || $[11] !== target) {
+		t3 = itemContent(children, href, rel, target);
+		$[8] = children;
+		$[9] = href;
+		$[10] = rel;
+		$[11] = target;
+		$[12] = t3;
+	} else t3 = $[12];
+	let t4;
+	if ($[13] !== T0 || $[14] !== t1 || $[15] !== t2 || $[16] !== t3) {
+		t4 = /* @__PURE__ */ jsx(T0, {
+			...t1,
+			...t2,
+			children: t3
+		});
+		$[13] = T0;
+		$[14] = t1;
+		$[15] = t2;
+		$[16] = t3;
+		$[17] = t4;
+	} else t4 = $[17];
+	return t4;
+}
+function itemContent(children, href, rel, target) {
+	return (state) => {
+		if (state.isCurrent) return /* @__PURE__ */ jsx("span", {
+			"aria-current": "page",
+			className: "x139gbkf",
+			children
+		});
+		return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Link$1, {
+			href,
+			rel,
+			target,
+			tone: "inherit",
+			underline: "hover",
+			children
+		}), /* @__PURE__ */ jsx(ChevronEndGlyph, { className: "xmix8c7 x2lah0s x1xp8n7a x19axjrm x1c071of" })] });
+	};
+}
+Breadcrumbs$1.Item = BreadcrumbsItem;
+//#endregion
+export { Breadcrumbs$1 as default };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["props"],"sources":["../../../src/components/breadcrumbs/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { BreadcrumbRenderProps, BreadcrumbProps as RACBreadcrumbProps, BreadcrumbsProps as RACBreadcrumbsProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Breadcrumb as RACBreadcrumb, Breadcrumbs as RACBreadcrumbs } from 'react-aria-components';\nimport { ChevronEndGlyph } from '../../glyphs';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, spacing, typography } from '../../tokens/design.tokens.stylex';\nimport Link from '../link';\n\n// A trail of links back up a hierarchy, ending at the page you are on. The\n// design system carries no breadcrumbs page, so the two nearest ones stand\n// in: the row takes the top app bar's muted content role, and each link the\n// text button's label-large type. Both are written down here rather than\n// guessed at each call site.\n//\n// React Aria decides which item is current — the last one — and marks it\n// `aria-current=\"page\"`. The trail is an ordered list, which is what a screen\n// reader reads it as, and `Breadcrumbs.Item` is one entry in it.\n//\n// Three things are this component's own.\n//\n// **The current item is text, not a link.** React Aria's own answer is a\n// disabled link, and a disabled link takes the library's disabled treatment\n// — the content role at 38%, which fades the one item the trail exists to\n// name. Here it is a span carrying `aria-current=\"page\"` instead, in the\n// full-strength content role, so the page you are on is the most legible\n// thing in the row rather than the least.\n//\n// **The chevron belongs to the item before it.** Each item that is not the\n// current one draws one after its link, which puts a separator between every\n// pair and none at the end. It says \"further in\" rather than \"to the right\",\n// so it mirrors under a right-to-left writing mode.\n//\n// **A link is drawn as a link in a place already understood to be links.**\n// `tone=\"inherit\"` takes the row's muted colour and `underline=\"hover\"`\n// leaves the rule for a pointer, which is what Link's own documentation\n// names this case for. The row's position is what announces them.\n//\n// `onAction` is React Aria's and is not wrapped: give each item an `id` and\n// the trail reports which one was pressed, for a page that navigates without\n// an `href`.\n\ntype BreadcrumbsItemProps = Omit<RACBreadcrumbProps, 'children' | 'className' | 'style'> & {\n  /** The item's label. */\n  children?: ReactNode;\n  /** A function may compute the class from the item's render state. */\n  className?: RACBreadcrumbProps['className'];\n  /**\n   * Where the item leads. Leave it out on an item the page handles through\n   * the trail's `onAction`, and on the current one, which is never a link.\n   */\n  href?: string;\n  /** The link's `rel`. */\n  rel?: string;\n  /** A function may compute the style from the item's render state. */\n  style?: RACBreadcrumbProps['style'];\n  /** The link's `target`. */\n  target?: string;\n};\ntype BreadcrumbsProps<T extends object = object> = Omit<RACBreadcrumbsProps<T>, 'children'> & {\n  /** The trail, as `Breadcrumbs.Item` entries. */\n  children?: ReactNode;\n};\n\n/**\n * A trail of links back up a hierarchy, ending at the page you are on.\n * React Aria makes the last item the current one and marks it\n * `aria-current=\"page\"`; everything before it is a link.\n *\n * ```tsx\n * <Breadcrumbs aria-label=\"Label\">\n *   <Breadcrumbs.Item href=\"#first\">First item</Breadcrumbs.Item>\n *   <Breadcrumbs.Item href=\"#second\">Second item</Breadcrumbs.Item>\n *   <Breadcrumbs.Item>Third item</Breadcrumbs.Item>\n * </Breadcrumbs>\n * ```\n *\n * Name it with `aria-label` or `aria-labelledby`. A page that navigates\n * without an `href` gives each item an `id` and the trail an `onAction`,\n * which is React Aria's and reports the key that was pressed.\n *\n * The call site's `className` and `style` land on the list, which is the\n * element a layout positions.\n */\nfunction Breadcrumbs<T extends object = object>(props: BreadcrumbsProps<T>) {\n  return <RACBreadcrumbs<T> {...props} {...mergeStyles({\n    className: \"x6s0dn4 x9f619 x1w5n3ug x78zum5 x1a02dak xkknnkr x14zspaw x1v9cpvo xzoy561 x155f00i x1lz68p4 xe8uvvx x1ghz6dp x1717udv\"\n  }, props)} />;\n}\n\n/**\n * One entry in the trail. Give it an `href` to navigate, or an `id` and let\n * the trail's `onAction` handle it. The last entry is the current page and\n * is drawn as text rather than a link, whatever it is given.\n */\nfunction BreadcrumbsItem({\n  children,\n  href,\n  rel,\n  target,\n  ...props\n}: BreadcrumbsItemProps) {\n  return <RACBreadcrumb {...props} {...mergeStatefulStyles({\n    className: \"x6s0dn4 x9f619 x78zum5 xzoy561\"\n  }, props)}>\n      {itemContent(children, href, rel, target)}\n    </RACBreadcrumb>;\n}\n\n// What an entry draws, from React Aria's render state. Built by a call rather\n// than written inline at the prop, which is what react-perf's\n// no-new-function-as-prop is after; the React Compiler memoises the result on\n// its inputs.\nfunction itemContent(children: ReactNode, href: string | undefined, rel: string | undefined, target: string | undefined) {\n  return (state: BreadcrumbRenderProps) => {\n    if (state.isCurrent) {\n      return <span aria-current=\"page\" className=\"x139gbkf\">\n          {children}\n        </span>;\n    }\n    return <>\n        <Link href={href} rel={rel} target={target} tone=\"inherit\" underline=\"hover\">\n          {children}\n        </Link>\n        <ChevronEndGlyph className=\"xmix8c7 x2lah0s x1xp8n7a x19axjrm x1c071of\" />\n      </>;\n  };\n}\nBreadcrumbs.Item = BreadcrumbsItem;\nexport type { BreadcrumbsItemProps, BreadcrumbsProps };\nexport default Breadcrumbs;"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAqFA,SAAA,cAAA,OAAA;CAAA,MAAA,IAAA,EAAA,CAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,OAAA;EAC2C,KAAA,YAAY,EAAA,WACxC,yHACb,GAAG,KAAK;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,SAAA,EAAA,OAAA,IAAA;EAFF,KAAA,oBAAC,aAAD;GAAe,GAAQ;GAAK,GAAM;EAEhC,CAAA;EAAI,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OAFN;AAEM;;;;;;AAQf,SAAA,gBAAA,IAAA;CAAA,MAAA,IAAA,EAAA,EAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,IAAA;EAAyB,MAAA,EAAA,UAAA,IAAA,MAAA,IAAA,KAAA,IAAA,QAAA,IAAA,GAAA,UAAA;EAAA,WAAA;EAAA,OAAA;EAAA,MAAA;EAAA,SAAA;EAOf,KAAA;EAAkBA,KAAA;EAAW,KAAA,oBAAoB,EAAA,WAC5C,iCACb,GAAG,KAAK;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA;EAAA,KAAA,EAAA;EAAA,WAAA,EAAA;EAAA,OAAA,EAAA;EAAA,MAAA,EAAA;EAAA,KAAA,EAAA;EAAA,KAAA,EAAA;EAAA,SAAA,EAAA;CAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,YAAA,EAAA,OAAA,QAAA,EAAA,QAAA,OAAA,EAAA,QAAA,QAAA;EACJ,KAAA,YAAY,UAAU,MAAM,KAAK,MAAM;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,QAAA,MAAA,EAAA,QAAA,MAAA,EAAA,QAAA,MAAA,EAAA,QAAA,IAAA;EAHtC,KAAA,oBAAC,IAAD;GAAc,GAAKA;GAAK,GAAM;GAGhC,UAAA;EAHgB,CAAA;EAIH,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OAJX;AAIW;AAOpB,SAAS,YAAY,UAAqB,MAA0B,KAAyB,QAA4B;CACvH,QAAQ,UAAiC;EACvC,IAAI,MAAM,WACR,OAAO,oBAAC,QAAD;GAAM,gBAAa;GAAO,WAAU;GACtC;EACG,CAAA;EAEV,OAAO,qBAAA,UAAA,EAAA,UAAA,CACH,oBAAC,QAAD;GAAY;GAAW;GAAa;GAAQ,MAAK;GAAU,WAAU;GAClE;EACG,CAAA,GACN,oBAAC,iBAAD,EAAiB,WAAU,6CAA4C,CAAA,CACzE,EAAA,CAAA;CACJ;AACF;AACA,cAAY,OAAO"}

package/dist/components/button/index.d.ts

@@ -38,15 +38,21 @@ type ButtonProps$1 = {
   style?: StyleOrFunction<ButtonState>;
   /** The link's `target`, when `href` is set. */
   target?: string;
-  /** @default 'filled' */
+  /**
+   * How much weight the button pulls. `filled` and `tonal` carry a container
+   * of their own; `outlined` and `text` sit on the page; `elevated` sits on
+   * a low surface and lifts off it with a shadow, for a button that has to
+   * separate from a busy background rather than from the page.
+   * @default 'filled'
+   */
   variant?: ButtonVariant;
 } & ButtonDOMProps;
 type ButtonSize = 'lg' | 'md' | 'xl' | 'xs' | 'xxl';
 type ButtonState = Pick<ButtonRenderProps, 'isDisabled' | 'isFocused' | 'isFocusVisible' | 'isHovered' | 'isPressed'>;
-type ButtonVariant = 'filled' | 'outlined' | 'text' | 'tonal';
+type ButtonVariant = 'elevated' | 'filled' | 'outlined' | 'text' | 'tonal';
 type GlobalEventKey = Exclude<keyof DOMAttributes<HTMLElement> & keyof ButtonProps, 'onBlur' | 'onClick' | 'onFocus'>;
 /**
- * The design's button, at four emphasis levels and five control heights.
+ * The design's button, at five emphasis levels and five control heights.
  * Given `href` it is a link with the same appearance. Every `aria-*` prop is
  * forwarded to the element; React Aria alone would keep only the labelling
  * ones.

package/dist/components/button/index.js

@@ -1,7 +1,7 @@
 import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { mergeStatefulStyles } from "../../styles/merge.js";
-import { useRipple } from "../../hooks/useRipple.js";
 import { ariaAttributesOf, buttonRenderer, linkRenderer } from "../../render/aria.js";
+import { useRipple } from "../../hooks/useRipple.js";
 import ProgressIndicator from "../progress-indicator/index.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Button, Link } from "react-aria-components";
@@ -32,6 +32,18 @@ const styles = {
 		kkrTdU: "x1h6gzvc",
 		$$css: true
 	},
+	elevated: {
+		kWkggS: "x1k1wbbp x3k5p2v xf9j7ge x1vnz5z6",
+		kGVxlE: "x1g60mc1 x1fzngjt x19efjv6",
+		kMwMTN: "x1mxwv8y",
+		$$css: true
+	},
+	elevatedDisabled: {
+		kWkggS: "xepofeg",
+		kGVxlE: "x1gnnqk1",
+		kMwMTN: "x1xj74d8",
+		$$css: true
+	},
 	filled: {
 		kWkggS: "xpky1to x16z974x xyf7a0q xnety89",
 		kGVxlE: "xpk4wdd x1955hzl x1gnnqk1",
@@ -162,13 +174,14 @@ const outlineWidths = {
 	}
 };
 const disabledStyles = {
+	elevated: styles.elevatedDisabled,
 	filled: styles.filledDisabled,
 	outlined: styles.outlinedDisabled,
 	text: styles.textDisabled,
 	tonal: styles.tonalDisabled
 };
 /**
-* The design's button, at four emphasis levels and five control heights.
+* The design's button, at five emphasis levels and five control heights.
 * Given `href` it is a link with the same appearance. Every `aria-*` prop is
 * forwarded to the element; React Aria alone would keep only the labelling
 * ones.

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"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 { 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 and text paint the label colour over a transparent\n// one. 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.\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 order is what\n// lets `text` keep its tighter inline padding at the default size while the\n// other sizes still set their own: `md` deliberately declares no\n// paddingInline, so a medium button falls through to whatever its variant\n// asked for, and every other size overrides it. That mirrors the source\n// design's own cascade, where the size classes are declared after the\n// variant ones and win on padding for exactly the same reason.\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    kjBf7l: \"xrgy624\",\n    kInvED: \"x1hl8ikr\",\n    k3XXqK: \"x9v5kkp x1t137rt\",\n    kMeerF: \"x1de99jn\",\n    kVAEAm: \"x1n2onr6\",\n    kybGjl: \"x1hl2dhg\",\n    $$css: true\n  },\n  disabled: {\n    kkrTdU: \"x1h6gzvc\",\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  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  /** @default 'filled' */\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 = '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 four 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, 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":[],"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 { 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 order is what\n// lets `text` keep its tighter inline padding at the default size while the\n// other sizes still set their own: `md` deliberately declares no\n// paddingInline, so a medium button falls through to whatever its variant\n// asked for, and every other size overrides it. That mirrors the source\n// design's own cascade, where the size classes are declared after the\n// variant ones and win on padding for exactly the same reason.\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    kjBf7l: \"xrgy624\",\n    kInvED: \"x1hl8ikr\",\n    k3XXqK: \"x9v5kkp x1t137rt\",\n    kMeerF: \"x1de99jn\",\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, 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/checkbox/index.js

@@ -1,9 +1,9 @@
 import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { mergeStatefulStyles } from "../../styles/merge.js";
+import { CheckGlyph, IndeterminateGlyph } from "../../glyphs/index.js";
 import { useRipple } from "../../hooks/useRipple.js";
 import { invalidFrom, useFieldValidationBehavior } from "../../field/root.js";
 import { FieldMessage } from "../../field/index.js";
-import { CheckGlyph, IndeterminateGlyph } from "../../glyphs/index.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
 import { CheckboxButton, CheckboxField } from "react-aria-components";

package/dist/components/chip/index.js

@@ -1,4 +1,6 @@
+import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { mergeStatefulStyles } from "../../styles/merge.js";
+import { chipStyles } from "../../chip/styles.js";
 import { jsx } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
 import { ToggleButton } from "react-aria-components";
@@ -48,10 +50,7 @@ function Chip(t0) {
 	return t3;
 }
 function propsFor(state) {
-	return {
-		0: { className: "x6s0dn4 x10w6t97 x1xdvaa9 x1y0btm7 xmkeg23 x9f619 x1s07b3s x1ypdohk x3nfvp2 x2lah0s xkknnkr x14zspaw x1v9cpvo x126z3so x155f00i x1lz68p4 xrgy624 x1hl8ikr x9v5kkp x1t137rt x1de99jn xt970qd x790zyz x1qno0dh x1eaenvl xpc4ca7 x1a42vn9 x6gcojk xjbqb8w xd8uu4e x133yhug xhfb3ry x1w5n3ug" },
-		1: { className: "x6s0dn4 x10w6t97 x1xdvaa9 x1y0btm7 xmkeg23 x9f619 x1s07b3s x1ypdohk x3nfvp2 x2lah0s xkknnkr x14zspaw x1v9cpvo x126z3so x155f00i x1lz68p4 xrgy624 x1hl8ikr x9v5kkp x1t137rt x1de99jn xt970qd x790zyz x1qno0dh x1eaenvl xpc4ca7 xctpbsp x1n0xrd1 x1qndd53 x15dekr4 x9r1u3d xhfb3ry x1sawysd" }
-	}[!!state.isSelected << 0];
+	return props(chipStyles.base, state.isSelected ? chipStyles.selected : chipStyles.unselected, state.isDisabled && chipStyles.disabled, state.isDisabled && (state.isSelected ? chipStyles.disabledSelected : chipStyles.disabledUnselected));
 }
 //#endregion
 export { Chip as default };