@kanso-labs/kanso-ui 0.40.3 → 0.40.5

package/dist/components/list-item/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","HTMLAttributes","ReactNode","RefAttributes","stylex","useRipple","refCallback","RowContent","rowStyles","mergeStyles","ListItemProps","children","interactive","isDisabled","leading","overline","supporting","trailing","HTMLElement","ListItem","t0","$","t1","t2","onClick","onContextMenu","onPointerCancel","onPointerDown","onPointerLeave","onPointerUp","ref","props","undefined","t3","ripple","extraLines","twoLine","threeLine","t4","forwarded","t5","content","handlers","base","list","disabled","t6","t7","t8","interactiveLayers","t9","surface","_c","props","stylex.props"],"sources":["../../../src/components/list-item/index.tsx"],"sourcesContent":["'use client';\n\nimport type { HTMLAttributes, ReactNode, RefAttributes } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport { useRipple } from '../../hooks/useRipple';\nimport { refCallback } from '../../render/ref';\nimport { RowContent } from '../../row';\nimport { rowStyles } from '../../row/styles';\nimport { mergeStyles } from '../../styles/merge';\ntype ListItemProps = {\n  /** The row's headline — the one thing it is mostly about. */\n  children?: ReactNode;\n  /**\n   * Renders a `<button>` that ripples and tints on hover, for a row that is\n   * itself pressable. Leave it off for a row that only presents.\n   * @default false\n   */\n  interactive?: boolean;\n  /**\n   * Draws the row disabled, in the treatment every row in the library shares:\n   * its text fades to on-surface at the disabled content opacity, overline\n   * and supporting line included. An interactive row's button is disabled\n   * outright: it takes no focus, no hover tint, no press and no ripple. A row\n   * that only presents has nothing to disable, and is marked `aria-disabled`\n   * instead so the state it draws is announced as well.\n   * @default false\n   */\n  isDisabled?: boolean;\n  /** Content before the headline: an avatar, an icon, a checkbox. */\n  leading?: ReactNode;\n  /**\n   * A line above the headline, in the page's label-small and the same muted\n   * role the supporting line takes — a category, a date, a status. Given\n   * alongside `supporting` it makes the row the page's three-line item.\n   */\n  overline?: ReactNode;\n  /** A second line under the headline, in the muted role. */\n  supporting?: ReactNode;\n  /** Content after the headline, such as an amount or a control. */\n  trailing?: ReactNode;\n} & HTMLAttributes<HTMLElement>;\n\n/**\n * A static row: the row every list draws, on its own, as the lists spec page\n * gives it — a 56px one-line container, a body-large headline and a\n * body-medium supporting line. A second line takes it to the page's 72px\n * two-line container; an `overline` puts that second line above the headline\n * instead of below it, and an overline with a supporting line makes the\n * page's three-line item, an 88px container with the leading and trailing\n * slots held at the top rather than centred. The layout and the states are\n * the row module's in `src/row`, shared with every collection item; what is\n * here is the element around them — a `<div>` that presents, or a `<button>`\n * that ripples — and the props that fill the slots.\n */\nfunction ListItem({\n  children,\n  interactive = false,\n  isDisabled = false,\n  leading,\n  onClick,\n  onContextMenu,\n  onPointerCancel,\n  onPointerDown,\n  onPointerLeave,\n  onPointerUp,\n  overline,\n  ref,\n  supporting,\n  trailing,\n  ...props\n}: ListItemProps & RefAttributes<HTMLButtonElement | HTMLDivElement>) {\n  // The consumer's own pointer handlers are handed to useRipple to merge\n  // rather than left in `props` to be spread over its handlers afterwards,\n  // which is what Card and Button do and for the same reason: a plain spread\n  // means whichever object comes last silently wins, so an onClick on the\n  // call site would replace the one that ends the press and the row would\n  // stay visibly pressed. The hook runs its own handler first and the\n  // consumer's second, and hands them straight back when the ripple is off,\n  // which is what puts them on the presenting <div> below. The host is\n  // `HTMLElement` rather than the button: the same handlers now reach both\n  // elements, and only the type `ListItemProps` already declares is assignable\n  // to a <div>'s props as well as a <button>'s.\n  //\n  // Off on a disabled row as well as on one that only presents. A press on a\n  // disabled button still delivers its pointerdown and pointerup, and\n  // withholds only the click, which is what ends a press — so a ripple left\n  // on would start and then stay drawn.\n  const ripple = useRipple<HTMLElement>(interactive && !isDisabled, {\n    onClick,\n    onContextMenu,\n    onPointerCancel,\n    onPointerDown,\n    onPointerLeave,\n    onPointerUp\n  });\n\n  // Which of the page's three items this row is, read from the content rather\n  // than taken as a prop: a row holding all three lines already says it is\n  // three lines, and a word for it would be a second place to get it wrong.\n  // A line that wraps grows the row past its container height on its own and\n  // keeps its slots centred, which is the shorter item made taller rather\n  // than the next one along.\n  //\n  // The three-line item is the only row whose slots move, which is why it\n  // alone carries an alignment as well as a height.\n  const extraLines = (overline === undefined ? 0 : 1) + (supporting === undefined ? 0 : 1);\n  const twoLine = extraLines === 1;\n  const threeLine = extraLines === 2;\n\n  // A presenting row is a <div> and an interactive one a <button>, so the\n  // ref is typed as either and handed to each as the callback both accept —\n  // see src/render/ref.ts.\n  const forwarded = refCallback(ref);\n  const content = <RowContent isDisabled={isDisabled} leading={leading} overline={overline} supporting={supporting} trailing={trailing}>\n      {children}\n    </RowContent>;\n\n  // `disabled` goes last in both lists. On the button that is what lets it\n  // win over the interactive style, as it does on every collection item:\n  // StyleX replaces a property whole, which takes the hover and pressed tints\n  // and the pointer cursor with it.\n  if (!interactive) {\n    return <div aria-disabled={isDisabled || undefined} ref={forwarded} {...props} {...ripple.handlers} {...mergeStyles(stylex.props(rowStyles.base, rowStyles.list, twoLine && rowStyles.twoLine, threeLine && rowStyles.threeLine, isDisabled && rowStyles.disabled), props)}>\n        {content}\n      </div>;\n  }\n  return <button disabled={isDisabled} ref={forwarded} type=\"button\" {...ripple.handlers} {...props} {...mergeStyles(stylex.props(rowStyles.base, rowStyles.list, rowStyles.interactive, rowStyles.interactiveLayers, twoLine && rowStyles.twoLine, threeLine && rowStyles.threeLine, isDisabled && rowStyles.disabled), props)}>\n      {content}\n      {ripple.surface}\n    </button>;\n}\nexport type { ListItemProps };\nexport default ListItem;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["c","_c","HTMLAttributes","ReactNode","RefAttributes","stylex","useRipple","hasContent","refCallback","RowContent","rowStyles","mergeStyles","ListItemProps","children","interactive","isDisabled","leading","overline","supporting","trailing","HTMLElement","ListItem","t0","$","t1","t2","onClick","onContextMenu","onPointerCancel","onPointerDown","onPointerLeave","onPointerUp","ref","props","undefined","t3","ripple","extraLines","twoLine","threeLine","t4","forwarded","t5","content","handlers","base","list","disabled","t6","t7","t8","interactiveLayers","t9","surface","_c","props","stylex.props"],"sources":["../../../src/components/list-item/index.tsx"],"sourcesContent":["'use client';\n\nimport type { HTMLAttributes, ReactNode, RefAttributes } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport { useRipple } from '../../hooks/useRipple';\nimport { hasContent } from '../../render/content';\nimport { refCallback } from '../../render/ref';\nimport { RowContent } from '../../row';\nimport { rowStyles } from '../../row/styles';\nimport { mergeStyles } from '../../styles/merge';\ntype ListItemProps = {\n  /** The row's headline — the one thing it is mostly about. */\n  children?: ReactNode;\n  /**\n   * Renders a `<button>` that ripples and tints on hover, for a row that is\n   * itself pressable. Leave it off for a row that only presents.\n   * @default false\n   */\n  interactive?: boolean;\n  /**\n   * Draws the row disabled, in the treatment every row in the library shares:\n   * its text fades to on-surface at the disabled content opacity, overline\n   * and supporting line included. An interactive row's button is disabled\n   * outright: it takes no focus, no hover tint, no press and no ripple. A row\n   * that only presents has nothing to disable, and is marked `aria-disabled`\n   * instead so the state it draws is announced as well.\n   * @default false\n   */\n  isDisabled?: boolean;\n  /** Content before the headline: an avatar, an icon, a checkbox. */\n  leading?: ReactNode;\n  /**\n   * A line above the headline, in the page's label-small and the same muted\n   * role the supporting line takes — a category, a date, a status. Given\n   * alongside `supporting` it makes the row the page's three-line item.\n   */\n  overline?: ReactNode;\n  /** A second line under the headline, in the muted role. */\n  supporting?: ReactNode;\n  /** Content after the headline, such as an amount or a control. */\n  trailing?: ReactNode;\n} & HTMLAttributes<HTMLElement>;\n\n/**\n * A static row: the row every list draws, on its own, as the lists spec page\n * gives it — a 56px one-line container, a body-large headline and a\n * body-medium supporting line. A second line takes it to the page's 72px\n * two-line container; an `overline` puts that second line above the headline\n * instead of below it, and an overline with a supporting line makes the\n * page's three-line item, an 88px container with the leading and trailing\n * slots held at the top rather than centred. The layout and the states are\n * the row module's in `src/row`, shared with every collection item; what is\n * here is the element around them — a `<div>` that presents, or a `<button>`\n * that ripples — and the props that fill the slots.\n */\nfunction ListItem({\n  children,\n  interactive = false,\n  isDisabled = false,\n  leading,\n  onClick,\n  onContextMenu,\n  onPointerCancel,\n  onPointerDown,\n  onPointerLeave,\n  onPointerUp,\n  overline,\n  ref,\n  supporting,\n  trailing,\n  ...props\n}: ListItemProps & RefAttributes<HTMLButtonElement | HTMLDivElement>) {\n  // The consumer's own pointer handlers are handed to useRipple to merge\n  // rather than left in `props` to be spread over its handlers afterwards,\n  // which is what Card and Button do and for the same reason: a plain spread\n  // means whichever object comes last silently wins, so an onClick on the\n  // call site would replace the one that ends the press and the row would\n  // stay visibly pressed. The hook runs its own handler first and the\n  // consumer's second, and hands them straight back when the ripple is off,\n  // which is what puts them on the presenting <div> below. The host is\n  // `HTMLElement` rather than the button: the same handlers now reach both\n  // elements, and only the type `ListItemProps` already declares is assignable\n  // to a <div>'s props as well as a <button>'s.\n  //\n  // Off on a disabled row as well as on one that only presents. A press on a\n  // disabled button still delivers its pointerdown and pointerup, and\n  // withholds only the click, which is what ends a press — so a ripple left\n  // on would start and then stay drawn.\n  const ripple = useRipple<HTMLElement>(interactive && !isDisabled, {\n    onClick,\n    onContextMenu,\n    onPointerCancel,\n    onPointerDown,\n    onPointerLeave,\n    onPointerUp\n  });\n\n  // Which of the page's three items this row is, read from the content rather\n  // than taken as a prop: a row holding all three lines already says it is\n  // three lines, and a word for it would be a second place to get it wrong.\n  // A line that wraps grows the row past its container height on its own and\n  // keeps its slots centred, which is the shorter item made taller rather\n  // than the next one along.\n  //\n  // The three-line item is the only row whose slots move, which is why it\n  // alone carries an alignment as well as a height.\n  const extraLines = (hasContent(overline) ? 1 : 0) + (hasContent(supporting) ? 1 : 0);\n  const twoLine = extraLines === 1;\n  const threeLine = extraLines === 2;\n\n  // A presenting row is a <div> and an interactive one a <button>, so the\n  // ref is typed as either and handed to each as the callback both accept —\n  // see src/render/ref.ts.\n  const forwarded = refCallback(ref);\n  const content = <RowContent isDisabled={isDisabled} leading={leading} overline={overline} supporting={supporting} trailing={trailing}>\n      {children}\n    </RowContent>;\n\n  // `disabled` goes last in both lists. On the button that is what lets it\n  // win over the interactive style, as it does on every collection item:\n  // StyleX replaces a property whole, which takes the hover and pressed tints\n  // and the pointer cursor with it.\n  if (!interactive) {\n    return <div aria-disabled={isDisabled || undefined} ref={forwarded} {...props} {...ripple.handlers} {...mergeStyles(stylex.props(rowStyles.base, rowStyles.list, twoLine && rowStyles.twoLine, threeLine && rowStyles.threeLine, isDisabled && rowStyles.disabled), props)}>\n        {content}\n      </div>;\n  }\n  return <button disabled={isDisabled} ref={forwarded} type=\"button\" {...ripple.handlers} {...props} {...mergeStyles(stylex.props(rowStyles.base, rowStyles.list, rowStyles.interactive, rowStyles.interactiveLayers, twoLine && rowStyles.twoLine, threeLine && rowStyles.threeLine, isDisabled && rowStyles.disabled), props)}>\n      {content}\n      {ripple.surface}\n    </button>;\n}\nexport type { ListItemProps };\nexport default ListItem;"],"mappings":"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"}

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

@@ -33,7 +33,10 @@ type MenuContentProps<T extends object = object> = {
    * drops anything else, so an input written beside them disappears.
    *
    * To filter with it, wrap this whole part in `Autocomplete`, which puts
-   * the bar and the items inside one wrapper.
+   * the bar and the items inside one wrapper. The bar takes focus as the
+   * menu opens, however it was opened, so typing filters straight away,
+   * and its query is cleared as the menu closes, so a reopened menu shows
+   * every item.
    */
   search?: ReactNode;
   /**

package/dist/components/menu/index.js

@@ -10,8 +10,9 @@ import { rowStyles } from "../../row/styles.js";
 import { RowContent } from "../../row/index.js";
 import Separator$1 from "../separator/index.js";
 import { c } from "react/compiler-runtime";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Header, Keyboard, Menu, MenuItem, MenuLoadMoreItem, MenuSection, MenuTrigger, Popover, SubmenuTrigger, Text } from "react-aria-components";
+import { useContext, useEffect, useRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { AutocompleteStateContext, Header, Keyboard, Menu, MenuItem, MenuLoadMoreItem, MenuSection, MenuTrigger, Popover, SubmenuTrigger, Text } from "react-aria-components";
 //#region src/components/menu/index.tsx
 const styles = { content: {
 	kWkggS: "x1vnz5z6",
@@ -23,7 +24,7 @@ const styles = { content: {
 	$$css: true
 } };
 function itemContent(children, leading, shortcut, trailing, ripple) {
-	return (state) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(RowContent, {
+	return (state) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(RowContent, {
 		isDisabled: state.isDisabled,
 		isSelected: state.isSelected,
 		leading,
@@ -151,10 +152,7 @@ function MenuContent(t0) {
 	} else t2 = $[16];
 	let t3;
 	if ($[17] !== search) {
-		t3 = search === void 0 ? null : /* @__PURE__ */ jsx("div", {
-			className: "x9f619 xqf7pud xn60lsn",
-			children: search
-		});
+		t3 = search === void 0 ? null : /* @__PURE__ */ jsx(SearchSlot, { children: search });
 		$[17] = search;
 		$[18] = t3;
 	} else t3 = $[18];
@@ -190,6 +188,7 @@ function MenuContent(t0) {
 	} else t5 = $[29];
 	return t5;
 }
+const SEARCH_CONTROL = "input, textarea, [contenteditable=\"true\"]";
 /**
 * One action. Its slots are the row's: `leading` before the label, the label
 * as children, and `trailing` after it, with `shortcut` at the end. An item
@@ -385,15 +384,71 @@ function MenuSubmenu(props) {
 	} else t0 = $[1];
 	return t0;
 }
+/**
+* The search bar above a menu's items, mounted only while the menu is open.
+*
+* Its field takes focus as it mounts. React Aria's popover otherwise took
+* focus itself whenever a pointer opened the menu, so typing went nowhere
+* and only a keyboard's Enter happened to land in the field. Mounted before
+* the items, so the popover finds focus already inside it and leaves it.
+*
+* The query is cleared as it unmounts. The `Autocomplete` that filters the
+* items wraps this whole part and outlives the popover, so its query did
+* too: a menu filtered, used and reopened came back filtered.
+*/
+function SearchSlot(t0) {
+	const $ = c(6);
+	const { children } = t0;
+	const ref = useRef(null);
+	const autocomplete = useContext(AutocompleteStateContext);
+	const latest = useRef(autocomplete);
+	let t1;
+	if ($[0] !== autocomplete) {
+		t1 = () => {
+			latest.current = autocomplete;
+		};
+		$[0] = autocomplete;
+		$[1] = t1;
+	} else t1 = $[1];
+	useEffect(t1);
+	let t2;
+	let t3;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = () => {
+			ref.current?.querySelector(SEARCH_CONTROL)?.focus();
+			return () => {
+				latest.current?.setInputValue("");
+			};
+		};
+		t3 = [];
+		$[2] = t2;
+		$[3] = t3;
+	} else {
+		t2 = $[2];
+		t3 = $[3];
+	}
+	useEffect(t2, t3);
+	let t4;
+	if ($[4] !== children) {
+		t4 = /* @__PURE__ */ jsx("div", {
+			ref,
+			className: "x9f619 xqf7pud xn60lsn",
+			children
+		});
+		$[4] = children;
+		$[5] = t4;
+	} else t4 = $[5];
+	return t4;
+}
 function surfaceStyles(state) {
 	return props(overlay.popup, styles.content, popupOrigin(state.placement));
 }
 /** What sits after the label: the call site's content, then the shortcut or
 * the submenu's chevron. */
 function trailingOf(state, shortcut, trailing) {
-	if (state.hasSubmenu) return /* @__PURE__ */ jsxs(Fragment, { children: [trailing, /* @__PURE__ */ jsx(ChevronEndGlyph, { className: "x1qx5ct2 xw4jnvo x19axjrm x1c071of" })] });
+	if (state.hasSubmenu) return /* @__PURE__ */ jsxs(Fragment$1, { children: [trailing, /* @__PURE__ */ jsx(ChevronEndGlyph, { className: "x1qx5ct2 xw4jnvo x19axjrm x1c071of" })] });
 	if (shortcut === void 0 && trailing === void 0) return;
-	return /* @__PURE__ */ jsxs(Fragment, { children: [trailing, shortcut === void 0 ? null : /* @__PURE__ */ jsx(Keyboard, {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [trailing, shortcut === void 0 ? null : /* @__PURE__ */ jsx(Keyboard, {
 		...{
 			0: { className: "x1w5n3ug" },
 			1: { className: "x1heor9g" }

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","ComponentProps","ReactElement","ReactNode","RefAttributes","ClassNameOrFunction","MenuItemRenderProps","PopoverRenderProps","MenuItemProps","RACMenuItemProps","MenuLoadMoreItemProps","RACMenuLoadMoreItemProps","MenuProps","RACMenuProps","MenuSectionProps","RACMenuSectionProps","MenuTriggerProps","RACMenuTriggerProps","StyleOrFunction","stylex","Header","Keyboard","Menu","RACMenu","MenuItem","RACMenuItem","MenuLoadMoreItem","RACMenuLoadMoreItem","MenuSection","RACMenuSection","MenuTrigger","RACMenuTrigger","Popover","RACPopover","SubmenuTrigger","RACSubmenuTrigger","Text","OverlayAlign","OverlaySide","CollectionLoadMore","textOf","ChevronEndGlyph","useRipple","RowContent","rowStyles","mergeStatefulStyles","mergeStyles","overlay","placementOf","popupOrigin","colors","radii","sizing","spacing","typography","Separator","MENU_MIN","MENU_MAX","styles","content","kWkggS","kaIpWk","ks0D6T","k7Eaqz","k3XXqK","k8WAf4","$$css","MenuAlign","MenuContentProps","align","alignOffset","className","container","Element","search","side","MenuSide","sideOffset","style","Omit","T","children","leading","shortcut","trailing","MenuLoadMoreProps","label","header","MenuSeparatorProps","MenuSubmenuProps","trigger","delay","itemContent","ripple","state","isDisabled","isSelected","trailingOf","itemStyles","props","base","menu","selectedMenu","isHovered","hovered","isFocusVisible","focusVisible","isPressed","pressed","disabled","t0","$","t1","MenuContent","ref","undefined","t2","surfaceStyles","t3","t4","t5","onContextMenu","onPointerCancel","onPointerDown","onPointerLeave","onPointerUp","textValue","T0","handlers","surface","t6","MenuLoadMore","MenuSeparator","MenuSubmenu","popup","placement","hasSubmenu","Content","Item","LoadMore","Section","Submenu","stylex.props","Menu","_c","RACMenuTrigger","RACMenu","RACPopover","MenuItem","RACMenuItem","RACMenuLoadMoreItem","MenuSection","RACMenuSection","Separator","RACSubmenuTrigger"],"sources":["../../../src/components/menu/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ComponentProps, ReactElement, ReactNode, RefAttributes } from 'react';\nimport type { ClassNameOrFunction, MenuItemRenderProps, PopoverRenderProps, MenuItemProps as RACMenuItemProps, MenuLoadMoreItemProps as RACMenuLoadMoreItemProps, MenuProps as RACMenuProps, MenuSectionProps as RACMenuSectionProps, MenuTriggerProps as RACMenuTriggerProps, StyleOrFunction } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Header, Keyboard, Menu as RACMenu, MenuItem as RACMenuItem, MenuLoadMoreItem as RACMenuLoadMoreItem, MenuSection as RACMenuSection, MenuTrigger as RACMenuTrigger, Popover as RACPopover, SubmenuTrigger as RACSubmenuTrigger, Text } from 'react-aria-components';\nimport type { OverlayAlign, OverlaySide } from '../../styles/overlay';\nimport { CollectionLoadMore } from '../../collection';\nimport { textOf } from '../../collection/text';\nimport { ChevronEndGlyph } from '../../glyphs';\nimport { useRipple } from '../../hooks/useRipple';\nimport { RowContent } from '../../row';\nimport { rowStyles } from '../../row/styles';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport { overlay, placementOf, popupOrigin } from '../../styles/overlay';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, sizing, spacing, typography } from '../../tokens/design.tokens.stylex';\nimport Separator from '../separator';\n\n// The menus page's menu: a surface between 112 and 280 wide with a 4dp\n// corner and 8dp above and below its items, holding rows of the row module's\n// menu variant — 48dp tall, a label-large label, tertiary container when\n// selected. The surface itself is the overlay module's, shared with Popover\n// and Sheet, with the two things the menus page decides differently applied\n// over it: the corner, which is the extra-small step rather than the\n// medium one every other overlay takes, and the container colour, which is\n// the Expressive column's surface container low rather than the baseline's\n// surface container.\n//\n// Six parts, because everything a menu holds takes arbitrary content:\n// `Menu.Content`, `Menu.Item`, `Menu.Section`, `Menu.Separator`,\n// `Menu.Submenu` and `Menu.LoadMore`. A `Button` or `IconButton` placed\n// directly inside `Menu` is the trigger, wired through React Aria's context\n// rather than a part of ours — the same arrangement Sheet and Popover use.\n//\n// Four things are worth knowing about how this maps onto React Aria.\n//\n// **The item's styles are a function of its render state.** StyleX cannot\n// target `[data-selected]` on the element it is styling, so selection,\n// disabled and the rest are read from the state React Aria hands the\n// `className` function, wrapped in `mergeStatefulStyles` so a call site's own\n// `className` survives.\n//\n// **A shortcut goes through React Aria's `Keyboard` slot**, and the label\n// through its `Text` slot. The second is what makes the first work: React\n// Aria points the item's `aria-labelledby` at the labelled text, so a screen\n// reader reads the label alone and announces the keystroke separately. Left\n// as plain content, the item's name is its whole text and the shortcut is\n// read as part of what the item does. The keycap itself is the library's.\n//\n// **A submenu's arrow is drawn from render state, not from a prop.** React\n// Aria reports `hasSubmenu` on the item inside a `SubmenuTrigger`, so an item\n// that opens one gets the chevron without the call site saying so twice. The\n// glyph carries no direction of its own, so the style mirrors it under a\n// right-to-left writing mode.\n//\n// **A menu's children are a collection**, so anything that is not an item is\n// dropped: React Aria walks them looking for items and finds a search input\n// no place to be. `Menu.Content` therefore takes a `search` slot, drawn on\n// the surface above the items — which is also what puts the bar and the\n// items inside one `Autocomplete` when the menu is filtered.\n//\n// **A separator needs no slot from the call site.** React Aria's menu\n// provides the separator context, which is what `Menu.Separator` picks up —\n// that is why Separator moved onto React Aria in Phase 0. What is added here\n// is the menus page's 8dp either side of the rule.\n\nconst MENU_MIN = '112px';\nconst MENU_MAX = '280px';\nconst styles = {\n  content: {\n    kWkggS: \"x1vnz5z6\",\n    kaIpWk: \"x1tfhd1\",\n    ks0D6T: \"x1jkqq1h\",\n    k7Eaqz: \"x1c7vg25\",\n    k3XXqK: \"x1t137rt\",\n    k8WAf4: \"x1cmllll\",\n    $$css: true\n  }\n};\ntype MenuAlign = OverlayAlign;\ntype MenuContentProps<T extends object = object> = {\n  /**\n   * Where the menu lines up along that side. Left out, a menu lines up with\n   * the start of its trigger, and a submenu with the top of the item that\n   * opens it.\n   */\n  align?: MenuAlign;\n  /** Moves the menu along that side, in pixels. */\n  alignOffset?: number;\n  /**\n   * Lands on the surface, which is the element a layout positions. A\n   * function may compute the class from the surface's render state.\n   */\n  className?: ClassNameOrFunction<PopoverRenderProps>;\n  /**\n   * Where to portal the menu. Defaults to the container of the `ThemeScope`\n   * around it, which keeps the menu on that scope's tokens, or to the end of\n   * `<body>` where there is none. A subtree themed through the `themeScope`\n   * class has no container of its own, so point this inside it, or the menu\n   * renders outside and keeps the page's tokens.\n   */\n  container?: Element;\n  /**\n   * Content drawn on the surface above the items — a search bar that filters\n   * them, usually. It goes here rather than among the children because a\n   * menu's children are a collection: React Aria walks them for items and\n   * drops anything else, so an input written beside them disappears.\n   *\n   * To filter with it, wrap this whole part in `Autocomplete`, which puts\n   * the bar and the items inside one wrapper.\n   */\n  search?: ReactNode;\n  /**\n   * Which side of the trigger the menu opens on. Left out, a menu opens below\n   * its trigger and a submenu at the inline end of the item that opens it,\n   * where the item's chevron points — the places React Aria gives each.\n   * Given `align` alone, the side is `bottom`.\n   */\n  side?: MenuSide;\n  /**\n   * How far the menu sits from the trigger, in pixels. Left out, React Aria's:\n   * 8, or 0 for a menu opened with `trigger=\"contextMenu\"`.\n   */\n  sideOffset?: number;\n  /** Lands on the surface, as `className` does. */\n  style?: StyleOrFunction<PopoverRenderProps>;\n} & Omit<RACMenuProps<T>, 'className' | 'style'>;\ntype MenuItemProps<T extends object = object> = {\n  /** The item's label — what it does. */\n  children?: ReactNode;\n  /** A function may compute the class from the item's render state. */\n  className?: RACMenuItemProps<T>['className'];\n  /** Content before the label, usually an icon. */\n  leading?: ReactNode;\n  /**\n   * The keystroke that runs the item, drawn as a keycap at the end. Goes\n   * through React Aria's keyboard slot, so a screen reader announces it\n   * apart from the label rather than reading the two as one name.\n   */\n  shortcut?: ReactNode;\n  /** A function may compute the style from the item's render state. */\n  style?: RACMenuItemProps<T>['style'];\n  /** Content after the label, before the shortcut. */\n  trailing?: ReactNode;\n} & Omit<RACMenuItemProps<T>, 'children' | 'className' | 'style'>;\ntype MenuLoadMoreProps = Omit<RACMenuLoadMoreItemProps, 'children'> & {\n  /**\n   * What the row says while it is loading. Read by a screen reader; the ring\n   * itself carries no text.\n   * Left out, it is the word for it in the I18nProvider's locale — \"Loading\n   * more\" in English.\n   */\n  label?: string;\n};\n\n// `children` is optional here where React Aria makes it required, so the\n// type reads the way Sheet's and Popover's do: a root that composes rather\n// than one that has to be handed something. Sheet does the same for the same\n// reason.\ntype MenuProps = Omit<RACMenuTriggerProps, 'children'> & {\n  /** The trigger, then the `Menu.Content` it opens. */\n  children?: ReactNode;\n};\ntype MenuSectionProps<T extends object = object> = Omit<RACMenuSectionProps<T>, 'children'> & {\n  /**\n   * The items in the section. A section built from data puts React Aria's\n   * `Collection` in here rather than a render function, since the header is\n   * an element beside them.\n   */\n  children?: ReactNode;\n  /**\n   * The section's heading, rendered through React Aria's header so the\n   * section is named by it. A section without one is a group with no name.\n   */\n  header?: ReactNode;\n};\ntype MenuSeparatorProps = Omit<ComponentProps<typeof Separator>, 'orientation'>;\ntype MenuSide = OverlaySide;\ntype MenuSubmenuProps = {\n  /**\n   * The item that opens the submenu, then the `Menu.Content` it opens.\n   * Exactly those two, in that order. The count is the type's to enforce;\n   * the order is not, since every JSX element has the same type.\n   */\n  children: [trigger: ReactElement, content: ReactElement];\n  /**\n   * How long the pointer rests on the item before the submenu opens, in\n   * milliseconds.\n   * @default 200\n   */\n  delay?: number;\n};\n\n// What the item draws, from React Aria's render state. Built by a call\n// rather than written inline at the prop, which is what react-perf's\n// no-new-function-as-prop is after; the React Compiler memoises the result\n// on its inputs.\n//\n// The render state decides two things: the chevron, which an item inside a\n// SubmenuTrigger gets without the call site asking twice, and the supporting\n// line's colour, which the row module takes from whether the row is selected\n// or disabled.\nfunction itemContent(children: ReactNode, leading: ReactNode, shortcut: ReactNode, trailing: ReactNode, ripple: ReactNode) {\n  return (state: MenuItemRenderProps) => <>\n      <RowContent isDisabled={state.isDisabled} isSelected={state.isSelected} leading={leading} trailing={trailingOf(state, shortcut, trailing)} variant=\"menu\">\n        <Text slot=\"label\">{children}</Text>\n      </RowContent>\n      {state.isDisabled ? null : ripple}\n    </>;\n}\n\n// StyleX cannot target `[data-selected]` on the element it is styling, so an\n// item's state comes from the render state React Aria hands its className.\n// The order matters: `disabled` is applied last so its ground and colour\n// win over the selected container's. The state layers come from the render\n// state as well — see `focusVisible` in src/row/styles.ts — and React Aria\n// reports none of them on a disabled item, so nothing has to outrank them.\n// No overline, and so no three-line row: the menus page gives one item\n// height and one line of text. `List.Item` and `ListBox.Item` take the prop\n// because the lists page is what they draw, and this row is 48dp rather than\n// that page's 56.\nfunction itemStyles(state: MenuItemRenderProps) {\n  return stylex.props(rowStyles.base, rowStyles.menu, state.isSelected && rowStyles.selectedMenu, state.isHovered && rowStyles.hovered, state.isFocusVisible && rowStyles.focusVisible, state.isPressed && rowStyles.pressed, state.isDisabled && rowStyles.disabled);\n}\n\n/**\n * A list of actions opened from a control. Open state is React Aria's: pass\n * `isOpen` with `onOpenChange` to control it, or `defaultOpen` to let it keep\n * its own.\n *\n * A `Button` or `IconButton` placed directly inside opens it; everything the\n * menu shows goes in `Menu.Content`, since the trigger lives in the page\n * while the menu is portalled out to the end of the body.\n *\n * ```tsx\n * <Menu>\n *   <Button>Open</Button>\n *   <Menu.Content aria-label=\"Label\">\n *     <Menu.Item id=\"first\">First item</Menu.Item>\n *   </Menu.Content>\n * </Menu>\n * ```\n */\nfunction Menu({\n  children,\n  ...props\n}: MenuProps) {\n  return <RACMenuTrigger {...props}>{children}</RACMenuTrigger>;\n}\n\n/**\n * The menu itself, and the surface it is drawn on. React Aria names it after\n * the control that opened it, so `aria-label` here is ignored — name the\n * trigger instead.\n *\n * The call site's `className` and `style` land on the surface, which is the\n * element a layout positions.\n *\n * The placement and the offsets are passed on only where the call site gives\n * them. React Aria hands the popover a placement of its own through context —\n * below the trigger for a menu, at the item's inline end for a submenu — and\n * a prop set here replaces it, so a default written here opened every\n * submenu below its item, over the rest of the menu it came from.\n */\nfunction MenuContent<T extends object = object>({\n  align,\n  alignOffset,\n  className,\n  container,\n  ref,\n  search,\n  side,\n  sideOffset,\n  style,\n  ...props\n}: MenuContentProps<T> & RefAttributes<HTMLElement>) {\n  return <RACPopover crossOffset={alignOffset} offset={sideOffset} placement={side === undefined && align === undefined ? undefined : placementOf(side ?? 'bottom', align ?? 'start')}\n  // The surface, where the call site's class and style land, rather than\n  // the menu inside it, which takes the rest of the props.\n  ref={ref}\n  // oxlint-disable-next-line typescript/no-deprecated -- its replacement, UNSAFE_PortalProvider, is not exported by react-aria-components\n  UNSTABLE_portalContainer={container} {...mergeStatefulStyles(surfaceStyles, {\n    className,\n    style\n  })}>\n      {search === undefined ? null : <div className=\"x9f619 xqf7pud xn60lsn\">{search}</div>}\n      <RACMenu<T> {...props} className=\"x9f619 x78zum5 xdt5ytf x1t137rt\" />\n    </RACPopover>;\n}\n\n/**\n * One action. Its slots are the row's: `leading` before the label, the label\n * as children, and `trailing` after it, with `shortcut` at the end. An item\n * that opens a submenu draws the chevron itself.\n */\nfunction MenuItem<T extends object = object>({\n  children,\n  leading,\n  onContextMenu,\n  onPointerCancel,\n  onPointerDown,\n  onPointerLeave,\n  onPointerUp,\n  shortcut,\n  textValue,\n  trailing,\n  ...props\n}: MenuItemProps<T> & RefAttributes<HTMLDivElement>) {\n  // The press ripple List's rows draw — see ListItem there.\n  const ripple = useRipple<HTMLDivElement>(true, {\n    onContextMenu,\n    onPointerCancel,\n    onPointerDown,\n    onPointerLeave,\n    onPointerUp\n  }, true);\n  return <RACMenuItem textValue={textValue ?? textOf(children)} {...ripple.handlers} {...props} {...mergeStatefulStyles(itemStyles, props)}>\n      {itemContent(children, leading, shortcut, trailing, ripple.surface)}\n    </RACMenuItem>;\n}\n\n/**\n * The row shown while more items are being fetched. React Aria calls\n * `onLoadMore` when it comes into view, and draws it only while `isLoading`.\n */\nfunction MenuLoadMore({\n  label,\n  ...props\n}: MenuLoadMoreProps & RefAttributes<HTMLDivElement>) {\n  return <RACMenuLoadMoreItem {...props} {...mergeStyles({\n    className: \"x6s0dn4 x9f619 x78zum5 xl56j7k x1ddmzdj\"\n  }, props)}>\n      <CollectionLoadMore diameter=\"20px\" label={label} />\n    </RACMenuLoadMoreItem>;\n}\n\n/**\n * A named group of items. `header` names it, and is what a screen reader\n * reads before the items inside.\n */\nfunction MenuSection<T extends object = object>({\n  children,\n  header,\n  ...props\n}: MenuSectionProps<T> & RefAttributes<HTMLElement>) {\n  return <RACMenuSection {...props}>\n      {header === undefined ? null : <Header className=\"x9f619 x1w5n3ug xrgwony x12s497w x1szcwkt xo803ec xyl1r0q xw3mh6e x6gmt8y x790zyz\">{header}</Header>}\n      {children}\n    </RACMenuSection>;\n}\n\n/**\n * A rule between groups of items. It takes its role from the menu around it,\n * so it needs no slot from the call site.\n */\nfunction MenuSeparator(props: MenuSeparatorProps) {\n  return <Separator {...props} {...mergeStyles({\n    className: \"xwpi13i\"\n  }, props)} />;\n}\n\n/**\n * An item that opens a menu of its own. Takes exactly two children: the\n * `Menu.Item` that opens it, then the `Menu.Content` it opens.\n */\nfunction MenuSubmenu(props: MenuSubmenuProps) {\n  return <RACSubmenuTrigger {...props} />;\n}\n\n// The surface grows from the edge it is anchored by, which is what makes it\n// read as coming out of the trigger. Built by a call rather than written\n// inline at the prop, which is what react-perf's no-new-function-as-prop is\n// after.\nfunction surfaceStyles(state: PopoverRenderProps) {\n  return stylex.props(overlay.popup, styles.content, popupOrigin(state.placement));\n}\n\n/** What sits after the label: the call site's content, then the shortcut or\n * the submenu's chevron. */\nfunction trailingOf(state: MenuItemRenderProps, shortcut: ReactNode, trailing: ReactNode) {\n  if (state.hasSubmenu) {\n    return <>\n        {trailing}\n        <ChevronEndGlyph className=\"x1qx5ct2 xw4jnvo x19axjrm x1c071of\" />\n      </>;\n  }\n  if (shortcut === undefined && trailing === undefined) {\n    return undefined;\n  }\n  return <>\n      {trailing}\n      {shortcut === undefined ? null : <Keyboard {...{\n      0: {\n        className: \"x1w5n3ug\"\n      },\n      1: {\n        className: \"x1heor9g\"\n      }\n    }[!!state.isDisabled << 0]}>\n          {shortcut}\n        </Keyboard>}\n    </>;\n}\nMenu.Content = MenuContent;\nMenu.Item = MenuItem;\nMenu.LoadMore = MenuLoadMore;\nMenu.Section = MenuSection;\nMenu.Separator = MenuSeparator;\nMenu.Submenu = MenuSubmenu;\nexport type { MenuAlign, MenuContentProps, MenuItemProps, MenuLoadMoreProps, MenuProps, MenuSectionProps, MenuSeparatorProps, MenuSide, MenuSubmenuProps };\nexport { MenuContent, MenuItem, MenuLoadMore, MenuSection, MenuSeparator, MenuSubmenu };\nexport default Menu;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["c","_c","ComponentProps","ReactElement","ReactNode","RefAttributes","ClassNameOrFunction","MenuItemRenderProps","PopoverRenderProps","MenuItemProps","RACMenuItemProps","MenuLoadMoreItemProps","RACMenuLoadMoreItemProps","MenuProps","RACMenuProps","MenuSectionProps","RACMenuSectionProps","MenuTriggerProps","RACMenuTriggerProps","StyleOrFunction","stylex","useContext","useEffect","useRef","AutocompleteStateContext","Header","Keyboard","Menu","RACMenu","MenuItem","RACMenuItem","MenuLoadMoreItem","RACMenuLoadMoreItem","MenuSection","RACMenuSection","MenuTrigger","RACMenuTrigger","Popover","RACPopover","SubmenuTrigger","RACSubmenuTrigger","Text","OverlayAlign","OverlaySide","CollectionLoadMore","textOf","ChevronEndGlyph","useRipple","RowContent","rowStyles","mergeStatefulStyles","mergeStyles","overlay","placementOf","popupOrigin","colors","radii","sizing","spacing","typography","Separator","MENU_MIN","MENU_MAX","styles","content","kWkggS","kaIpWk","ks0D6T","k7Eaqz","k3XXqK","k8WAf4","$$css","MenuAlign","MenuContentProps","align","alignOffset","className","container","Element","search","side","MenuSide","sideOffset","style","Omit","T","children","leading","shortcut","trailing","MenuLoadMoreProps","label","header","MenuSeparatorProps","MenuSubmenuProps","trigger","delay","itemContent","ripple","state","isDisabled","isSelected","trailingOf","itemStyles","props","base","menu","selectedMenu","isHovered","hovered","isFocusVisible","focusVisible","isPressed","pressed","disabled","t0","$","t1","MenuContent","ref","undefined","t2","surfaceStyles","t3","t4","t5","SEARCH_CONTROL","onContextMenu","onPointerCancel","onPointerDown","onPointerLeave","onPointerUp","textValue","T0","handlers","surface","t6","MenuLoadMore","MenuSeparator","MenuSubmenu","SearchSlot","autocomplete","latest","current","Symbol","for","querySelector","focus","setInputValue","popup","placement","hasSubmenu","Content","Item","LoadMore","Section","Submenu","stylex.props","Menu","_c","RACMenuTrigger","RACMenu","RACPopover","MenuItem","RACMenuItem","RACMenuLoadMoreItem","MenuSection","RACMenuSection","Separator","RACSubmenuTrigger"],"sources":["../../../src/components/menu/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ComponentProps, ReactElement, ReactNode, RefAttributes } from 'react';\nimport type { ClassNameOrFunction, MenuItemRenderProps, PopoverRenderProps, MenuItemProps as RACMenuItemProps, MenuLoadMoreItemProps as RACMenuLoadMoreItemProps, MenuProps as RACMenuProps, MenuSectionProps as RACMenuSectionProps, MenuTriggerProps as RACMenuTriggerProps, StyleOrFunction } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { useContext, useEffect, useRef } from 'react';\nimport { AutocompleteStateContext, Header, Keyboard, Menu as RACMenu, MenuItem as RACMenuItem, MenuLoadMoreItem as RACMenuLoadMoreItem, MenuSection as RACMenuSection, MenuTrigger as RACMenuTrigger, Popover as RACPopover, SubmenuTrigger as RACSubmenuTrigger, Text } from 'react-aria-components';\nimport type { OverlayAlign, OverlaySide } from '../../styles/overlay';\nimport { CollectionLoadMore } from '../../collection';\nimport { textOf } from '../../collection/text';\nimport { ChevronEndGlyph } from '../../glyphs';\nimport { useRipple } from '../../hooks/useRipple';\nimport { RowContent } from '../../row';\nimport { rowStyles } from '../../row/styles';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport { overlay, placementOf, popupOrigin } from '../../styles/overlay';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, sizing, spacing, typography } from '../../tokens/design.tokens.stylex';\nimport Separator from '../separator';\n\n// The menus page's menu: a surface between 112 and 280 wide with a 4dp\n// corner and 8dp above and below its items, holding rows of the row module's\n// menu variant — 48dp tall, a label-large label, tertiary container when\n// selected. The surface itself is the overlay module's, shared with Popover\n// and Sheet, with the two things the menus page decides differently applied\n// over it: the corner, which is the extra-small step rather than the\n// medium one every other overlay takes, and the container colour, which is\n// the Expressive column's surface container low rather than the baseline's\n// surface container.\n//\n// Six parts, because everything a menu holds takes arbitrary content:\n// `Menu.Content`, `Menu.Item`, `Menu.Section`, `Menu.Separator`,\n// `Menu.Submenu` and `Menu.LoadMore`. A `Button` or `IconButton` placed\n// directly inside `Menu` is the trigger, wired through React Aria's context\n// rather than a part of ours — the same arrangement Sheet and Popover use.\n//\n// Four things are worth knowing about how this maps onto React Aria.\n//\n// **The item's styles are a function of its render state.** StyleX cannot\n// target `[data-selected]` on the element it is styling, so selection,\n// disabled and the rest are read from the state React Aria hands the\n// `className` function, wrapped in `mergeStatefulStyles` so a call site's own\n// `className` survives.\n//\n// **A shortcut goes through React Aria's `Keyboard` slot**, and the label\n// through its `Text` slot. The second is what makes the first work: React\n// Aria points the item's `aria-labelledby` at the labelled text, so a screen\n// reader reads the label alone and announces the keystroke separately. Left\n// as plain content, the item's name is its whole text and the shortcut is\n// read as part of what the item does. The keycap itself is the library's.\n//\n// **A submenu's arrow is drawn from render state, not from a prop.** React\n// Aria reports `hasSubmenu` on the item inside a `SubmenuTrigger`, so an item\n// that opens one gets the chevron without the call site saying so twice. The\n// glyph carries no direction of its own, so the style mirrors it under a\n// right-to-left writing mode.\n//\n// **A menu's children are a collection**, so anything that is not an item is\n// dropped: React Aria walks them looking for items and finds a search input\n// no place to be. `Menu.Content` therefore takes a `search` slot, drawn on\n// the surface above the items — which is also what puts the bar and the\n// items inside one `Autocomplete` when the menu is filtered.\n//\n// **A separator needs no slot from the call site.** React Aria's menu\n// provides the separator context, which is what `Menu.Separator` picks up —\n// that is why Separator moved onto React Aria in Phase 0. What is added here\n// is the menus page's 8dp either side of the rule.\n\nconst MENU_MIN = '112px';\nconst MENU_MAX = '280px';\nconst styles = {\n  content: {\n    kWkggS: \"x1vnz5z6\",\n    kaIpWk: \"x1tfhd1\",\n    ks0D6T: \"x1jkqq1h\",\n    k7Eaqz: \"x1c7vg25\",\n    k3XXqK: \"x1t137rt\",\n    k8WAf4: \"x1cmllll\",\n    $$css: true\n  }\n};\ntype MenuAlign = OverlayAlign;\ntype MenuContentProps<T extends object = object> = {\n  /**\n   * Where the menu lines up along that side. Left out, a menu lines up with\n   * the start of its trigger, and a submenu with the top of the item that\n   * opens it.\n   */\n  align?: MenuAlign;\n  /** Moves the menu along that side, in pixels. */\n  alignOffset?: number;\n  /**\n   * Lands on the surface, which is the element a layout positions. A\n   * function may compute the class from the surface's render state.\n   */\n  className?: ClassNameOrFunction<PopoverRenderProps>;\n  /**\n   * Where to portal the menu. Defaults to the container of the `ThemeScope`\n   * around it, which keeps the menu on that scope's tokens, or to the end of\n   * `<body>` where there is none. A subtree themed through the `themeScope`\n   * class has no container of its own, so point this inside it, or the menu\n   * renders outside and keeps the page's tokens.\n   */\n  container?: Element;\n  /**\n   * Content drawn on the surface above the items — a search bar that filters\n   * them, usually. It goes here rather than among the children because a\n   * menu's children are a collection: React Aria walks them for items and\n   * drops anything else, so an input written beside them disappears.\n   *\n   * To filter with it, wrap this whole part in `Autocomplete`, which puts\n   * the bar and the items inside one wrapper. The bar takes focus as the\n   * menu opens, however it was opened, so typing filters straight away,\n   * and its query is cleared as the menu closes, so a reopened menu shows\n   * every item.\n   */\n  search?: ReactNode;\n  /**\n   * Which side of the trigger the menu opens on. Left out, a menu opens below\n   * its trigger and a submenu at the inline end of the item that opens it,\n   * where the item's chevron points — the places React Aria gives each.\n   * Given `align` alone, the side is `bottom`.\n   */\n  side?: MenuSide;\n  /**\n   * How far the menu sits from the trigger, in pixels. Left out, React Aria's:\n   * 8, or 0 for a menu opened with `trigger=\"contextMenu\"`.\n   */\n  sideOffset?: number;\n  /** Lands on the surface, as `className` does. */\n  style?: StyleOrFunction<PopoverRenderProps>;\n} & Omit<RACMenuProps<T>, 'className' | 'style'>;\ntype MenuItemProps<T extends object = object> = {\n  /** The item's label — what it does. */\n  children?: ReactNode;\n  /** A function may compute the class from the item's render state. */\n  className?: RACMenuItemProps<T>['className'];\n  /** Content before the label, usually an icon. */\n  leading?: ReactNode;\n  /**\n   * The keystroke that runs the item, drawn as a keycap at the end. Goes\n   * through React Aria's keyboard slot, so a screen reader announces it\n   * apart from the label rather than reading the two as one name.\n   */\n  shortcut?: ReactNode;\n  /** A function may compute the style from the item's render state. */\n  style?: RACMenuItemProps<T>['style'];\n  /** Content after the label, before the shortcut. */\n  trailing?: ReactNode;\n} & Omit<RACMenuItemProps<T>, 'children' | 'className' | 'style'>;\ntype MenuLoadMoreProps = Omit<RACMenuLoadMoreItemProps, 'children'> & {\n  /**\n   * What the row says while it is loading. Read by a screen reader; the ring\n   * itself carries no text.\n   * Left out, it is the word for it in the I18nProvider's locale — \"Loading\n   * more\" in English.\n   */\n  label?: string;\n};\n\n// `children` is optional here where React Aria makes it required, so the\n// type reads the way Sheet's and Popover's do: a root that composes rather\n// than one that has to be handed something. Sheet does the same for the same\n// reason.\ntype MenuProps = Omit<RACMenuTriggerProps, 'children'> & {\n  /** The trigger, then the `Menu.Content` it opens. */\n  children?: ReactNode;\n};\ntype MenuSectionProps<T extends object = object> = Omit<RACMenuSectionProps<T>, 'children'> & {\n  /**\n   * The items in the section. A section built from data puts React Aria's\n   * `Collection` in here rather than a render function, since the header is\n   * an element beside them.\n   */\n  children?: ReactNode;\n  /**\n   * The section's heading, rendered through React Aria's header so the\n   * section is named by it. A section without one is a group with no name.\n   */\n  header?: ReactNode;\n};\ntype MenuSeparatorProps = Omit<ComponentProps<typeof Separator>, 'orientation'>;\ntype MenuSide = OverlaySide;\ntype MenuSubmenuProps = {\n  /**\n   * The item that opens the submenu, then the `Menu.Content` it opens.\n   * Exactly those two, in that order. The count is the type's to enforce;\n   * the order is not, since every JSX element has the same type.\n   */\n  children: [trigger: ReactElement, content: ReactElement];\n  /**\n   * How long the pointer rests on the item before the submenu opens, in\n   * milliseconds.\n   * @default 200\n   */\n  delay?: number;\n};\n\n// What the item draws, from React Aria's render state. Built by a call\n// rather than written inline at the prop, which is what react-perf's\n// no-new-function-as-prop is after; the React Compiler memoises the result\n// on its inputs.\n//\n// The render state decides two things: the chevron, which an item inside a\n// SubmenuTrigger gets without the call site asking twice, and the supporting\n// line's colour, which the row module takes from whether the row is selected\n// or disabled.\nfunction itemContent(children: ReactNode, leading: ReactNode, shortcut: ReactNode, trailing: ReactNode, ripple: ReactNode) {\n  return (state: MenuItemRenderProps) => <>\n      <RowContent isDisabled={state.isDisabled} isSelected={state.isSelected} leading={leading} trailing={trailingOf(state, shortcut, trailing)} variant=\"menu\">\n        <Text slot=\"label\">{children}</Text>\n      </RowContent>\n      {state.isDisabled ? null : ripple}\n    </>;\n}\n\n// StyleX cannot target `[data-selected]` on the element it is styling, so an\n// item's state comes from the render state React Aria hands its className.\n// The order matters: `disabled` is applied last so its ground and colour\n// win over the selected container's. The state layers come from the render\n// state as well — see `focusVisible` in src/row/styles.ts — and React Aria\n// reports none of them on a disabled item, so nothing has to outrank them.\n// No overline, and so no three-line row: the menus page gives one item\n// height and one line of text. `List.Item` and `ListBox.Item` take the prop\n// because the lists page is what they draw, and this row is 48dp rather than\n// that page's 56. A label longer than the surface's 280dp still wraps, and\n// breaks inside a word that is wider than that, rather than running out of\n// the surface and under the shortcut — the shared row's rule, which nothing\n// here truncates.\nfunction itemStyles(state: MenuItemRenderProps) {\n  return stylex.props(rowStyles.base, rowStyles.menu, state.isSelected && rowStyles.selectedMenu, state.isHovered && rowStyles.hovered, state.isFocusVisible && rowStyles.focusVisible, state.isPressed && rowStyles.pressed, state.isDisabled && rowStyles.disabled);\n}\n\n/**\n * A list of actions opened from a control. Open state is React Aria's: pass\n * `isOpen` with `onOpenChange` to control it, or `defaultOpen` to let it keep\n * its own.\n *\n * A `Button` or `IconButton` placed directly inside opens it; everything the\n * menu shows goes in `Menu.Content`, since the trigger lives in the page\n * while the menu is portalled out to the end of the body.\n *\n * ```tsx\n * <Menu>\n *   <Button>Open</Button>\n *   <Menu.Content aria-label=\"Label\">\n *     <Menu.Item id=\"first\">First item</Menu.Item>\n *   </Menu.Content>\n * </Menu>\n * ```\n */\nfunction Menu({\n  children,\n  ...props\n}: MenuProps) {\n  return <RACMenuTrigger {...props}>{children}</RACMenuTrigger>;\n}\n\n/**\n * The menu itself, and the surface it is drawn on. React Aria names it after\n * the control that opened it, so `aria-label` here is ignored — name the\n * trigger instead.\n *\n * The call site's `className` and `style` land on the surface, which is the\n * element a layout positions.\n *\n * The placement and the offsets are passed on only where the call site gives\n * them. React Aria hands the popover a placement of its own through context —\n * below the trigger for a menu, at the item's inline end for a submenu — and\n * a prop set here replaces it, so a default written here opened every\n * submenu below its item, over the rest of the menu it came from.\n */\nfunction MenuContent<T extends object = object>({\n  align,\n  alignOffset,\n  className,\n  container,\n  ref,\n  search,\n  side,\n  sideOffset,\n  style,\n  ...props\n}: MenuContentProps<T> & RefAttributes<HTMLElement>) {\n  return <RACPopover crossOffset={alignOffset} offset={sideOffset} placement={side === undefined && align === undefined ? undefined : placementOf(side ?? 'bottom', align ?? 'start')}\n  // The surface, where the call site's class and style land, rather than\n  // the menu inside it, which takes the rest of the props.\n  ref={ref}\n  // oxlint-disable-next-line typescript/no-deprecated -- its replacement, UNSAFE_PortalProvider, is not exported by react-aria-components\n  UNSTABLE_portalContainer={container} {...mergeStatefulStyles(surfaceStyles, {\n    className,\n    style\n  })}>\n      {search === undefined ? null : <SearchSlot>{search}</SearchSlot>}\n      <RACMenu<T> {...props} className=\"x9f619 x78zum5 xdt5ytf x1t137rt\" />\n    </RACPopover>;\n}\n\n// What a press on the search slot focuses: its field's own control.\nconst SEARCH_CONTROL = 'input, textarea, [contenteditable=\"true\"]';\n\n/**\n * One action. Its slots are the row's: `leading` before the label, the label\n * as children, and `trailing` after it, with `shortcut` at the end. An item\n * that opens a submenu draws the chevron itself.\n */\nfunction MenuItem<T extends object = object>({\n  children,\n  leading,\n  onContextMenu,\n  onPointerCancel,\n  onPointerDown,\n  onPointerLeave,\n  onPointerUp,\n  shortcut,\n  textValue,\n  trailing,\n  ...props\n}: MenuItemProps<T> & RefAttributes<HTMLDivElement>) {\n  // The press ripple List's rows draw — see ListItem there.\n  const ripple = useRipple<HTMLDivElement>(true, {\n    onContextMenu,\n    onPointerCancel,\n    onPointerDown,\n    onPointerLeave,\n    onPointerUp\n  }, true);\n  return <RACMenuItem textValue={textValue ?? textOf(children)} {...ripple.handlers} {...props} {...mergeStatefulStyles(itemStyles, props)}>\n      {itemContent(children, leading, shortcut, trailing, ripple.surface)}\n    </RACMenuItem>;\n}\n\n/**\n * The row shown while more items are being fetched. React Aria calls\n * `onLoadMore` when it comes into view, and draws it only while `isLoading`.\n */\nfunction MenuLoadMore({\n  label,\n  ...props\n}: MenuLoadMoreProps & RefAttributes<HTMLDivElement>) {\n  return <RACMenuLoadMoreItem {...props} {...mergeStyles({\n    className: \"x6s0dn4 x9f619 x78zum5 xl56j7k x1ddmzdj\"\n  }, props)}>\n      <CollectionLoadMore diameter=\"20px\" label={label} />\n    </RACMenuLoadMoreItem>;\n}\n\n/**\n * A named group of items. `header` names it, and is what a screen reader\n * reads before the items inside.\n */\nfunction MenuSection<T extends object = object>({\n  children,\n  header,\n  ...props\n}: MenuSectionProps<T> & RefAttributes<HTMLElement>) {\n  return <RACMenuSection {...props}>\n      {header === undefined ? null : <Header className=\"x9f619 x1w5n3ug xrgwony x12s497w x1szcwkt xo803ec xyl1r0q xw3mh6e x6gmt8y x790zyz\">{header}</Header>}\n      {children}\n    </RACMenuSection>;\n}\n\n/**\n * A rule between groups of items. It takes its role from the menu around it,\n * so it needs no slot from the call site.\n */\nfunction MenuSeparator(props: MenuSeparatorProps) {\n  return <Separator {...props} {...mergeStyles({\n    className: \"xwpi13i\"\n  }, props)} />;\n}\n\n/**\n * An item that opens a menu of its own. Takes exactly two children: the\n * `Menu.Item` that opens it, then the `Menu.Content` it opens.\n */\nfunction MenuSubmenu(props: MenuSubmenuProps) {\n  return <RACSubmenuTrigger {...props} />;\n}\n\n/**\n * The search bar above a menu's items, mounted only while the menu is open.\n *\n * Its field takes focus as it mounts. React Aria's popover otherwise took\n * focus itself whenever a pointer opened the menu, so typing went nowhere\n * and only a keyboard's Enter happened to land in the field. Mounted before\n * the items, so the popover finds focus already inside it and leaves it.\n *\n * The query is cleared as it unmounts. The `Autocomplete` that filters the\n * items wraps this whole part and outlives the popover, so its query did\n * too: a menu filtered, used and reopened came back filtered.\n */\nfunction SearchSlot({\n  children\n}: {\n  children: ReactNode;\n}) {\n  const ref = useRef<HTMLDivElement>(null);\n  const autocomplete = useContext(AutocompleteStateContext);\n  // The latest state, for the cleanup below to clear: the state object is a\n  // new one on every render, and the effect that mounts the bar runs once.\n  const latest = useRef(autocomplete);\n  useEffect(() => {\n    latest.current = autocomplete;\n  });\n  useEffect(() => {\n    ref.current?.querySelector<HTMLElement>(SEARCH_CONTROL)?.focus();\n    return () => {\n      latest.current?.setInputValue('');\n    };\n  }, []);\n  return <div ref={ref} className=\"x9f619 xqf7pud xn60lsn\">\n      {children}\n    </div>;\n}\n\n// The surface grows from the edge it is anchored by, which is what makes it\n// read as coming out of the trigger. Built by a call rather than written\n// inline at the prop, which is what react-perf's no-new-function-as-prop is\n// after.\nfunction surfaceStyles(state: PopoverRenderProps) {\n  return stylex.props(overlay.popup, styles.content, popupOrigin(state.placement));\n}\n\n/** What sits after the label: the call site's content, then the shortcut or\n * the submenu's chevron. */\nfunction trailingOf(state: MenuItemRenderProps, shortcut: ReactNode, trailing: ReactNode) {\n  if (state.hasSubmenu) {\n    return <>\n        {trailing}\n        <ChevronEndGlyph className=\"x1qx5ct2 xw4jnvo x19axjrm x1c071of\" />\n      </>;\n  }\n  if (shortcut === undefined && trailing === undefined) {\n    return undefined;\n  }\n  return <>\n      {trailing}\n      {shortcut === undefined ? null : <Keyboard {...{\n      0: {\n        className: \"x1w5n3ug\"\n      },\n      1: {\n        className: \"x1heor9g\"\n      }\n    }[!!state.isDisabled << 0]}>\n          {shortcut}\n        </Keyboard>}\n    </>;\n}\nMenu.Content = MenuContent;\nMenu.Item = MenuItem;\nMenu.LoadMore = MenuLoadMore;\nMenu.Section = MenuSection;\nMenu.Separator = MenuSeparator;\nMenu.Submenu = MenuSubmenu;\nexport type { MenuAlign, MenuContentProps, MenuItemProps, MenuLoadMoreProps, MenuProps, MenuSectionProps, MenuSeparatorProps, MenuSide, MenuSubmenuProps };\nexport { MenuContent, MenuItem, MenuLoadMore, MenuSection, MenuSeparator, MenuSubmenu };\nexport default Menu;"],"mappings":"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"}

package/dist/components/text/index.js

@@ -8,6 +8,7 @@ const styles = {
 	base: {
 		kB7OPa: "x9f619",
 		kogj98: "x1ghz6dp",
+		kHjlTd: "x1mzt3pk",
 		$$css: true
 	},
 	bodyLarge: {

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","stylex","RenderComponentProps","useRender","mergeStyles","colors","typography","styles","base","kB7OPa","kogj98","$$css","bodyLarge","kMv6JI","kGuDYH","k63SB2","kb6lSQ","kLWn49","bodyMedium","bodySmall","displayLarge","displayMedium","displaySmall","headlineLarge","headlineMedium","headlineSmall","labelLarge","labelMedium","labelSmall","titleLarge","titleMedium","titleSmall","tones","error","kMwMTN","inherit","muted","negative","neutral","positive","primary","TextProps","block","tone","variant","Text","t0","$","render","t1","t2","t3","t4","t5","t6","t7","t8","props","undefined","defaultTagName","_c","props","stylex.props"],"sources":["../../../src/components/text/index.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport type { RenderComponentProps } from '../../render/useRender';\nimport { useRender } from '../../render/useRender';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, typography } from '../../tokens/design.tokens.stylex';\n\n// The type scale on Material Design's typography pages: fifteen styles, the\n// display, headline, title, body and label roles at large, medium and small.\n// Each is a size, a line height, a tracking, a weight and a typeface — the\n// scale's brand face for display, headline and the large title, its plain\n// face for the rest. The values are the tokens', which carry the scale's own\n// numbers, so no style here writes one down.\n//\n// One key per style in the 15-entry type scale, named exactly as the token\n// group names it, so `styles[variant]` indexes straight off the prop with no\n// lookup table to keep in sync. Every style sets all five fields the scale\n// defines rather than inheriting any of them: a Text nested inside another\n// Text would otherwise pick up the outer line-height or tracking, which is\n// the kind of drift the scale exists to prevent.\n//\n// `margin: 0` is the one UA reset here. Text renders a <span> by default, but\n// `block` renders a <p> and `render` is how a consumer reaches for any other\n// semantic markup — `<Text render={<h2 />}>` — and the UA margin on either\n// would then vary the spacing around otherwise identical type. The space\n// between two blocks of text is the job of whatever holds them, which is\n// where it can come from the spacing scale.\nconst styles = {\n  base: {\n    kB7OPa: \"x9f619\",\n    kogj98: \"x1ghz6dp\",\n    $$css: true\n  },\n  bodyLarge: {\n    kMv6JI: \"x16svsjw\",\n    kGuDYH: \"x1848etk\",\n    k63SB2: \"x1c52epr\",\n    kb6lSQ: \"x1qn8t5l\",\n    kLWn49: \"xh7dzej\",\n    $$css: true\n  },\n  bodyMedium: {\n    kMv6JI: \"xpo2rfv\",\n    kGuDYH: \"x193rfdd\",\n    k63SB2: \"x1hews6w\",\n    kb6lSQ: \"xn43zvd\",\n    kLWn49: \"xv61bfh\",\n    $$css: true\n  },\n  bodySmall: {\n    kMv6JI: \"x1yicsit\",\n    kGuDYH: \"x1b35g6e\",\n    k63SB2: \"x9d6959\",\n    kb6lSQ: \"xwth0xh\",\n    kLWn49: \"xybisxh\",\n    $$css: true\n  },\n  displayLarge: {\n    kMv6JI: \"xjaampf\",\n    kGuDYH: \"xuyiek4\",\n    k63SB2: \"x1n2oj23\",\n    kb6lSQ: \"x1hxa6v5\",\n    kLWn49: \"x1iwmiir\",\n    $$css: true\n  },\n  displayMedium: {\n    kMv6JI: \"x1gi70vc\",\n    kGuDYH: \"xlzzeuu\",\n    k63SB2: \"xh9quta\",\n    kb6lSQ: \"x148mp24\",\n    kLWn49: \"xs5hucj\",\n    $$css: true\n  },\n  displaySmall: {\n    kMv6JI: \"x1eslvzl\",\n    kGuDYH: \"x1g52wnc\",\n    k63SB2: \"x1x664hp\",\n    kb6lSQ: \"x1rnjaw4\",\n    kLWn49: \"x92ldg4\",\n    $$css: true\n  },\n  headlineLarge: {\n    kMv6JI: \"x1vsmgmf\",\n    kGuDYH: \"xh9c4x\",\n    k63SB2: \"x1y15vu6\",\n    kb6lSQ: \"xoqu3bc\",\n    kLWn49: \"x10x9d6x\",\n    $$css: true\n  },\n  headlineMedium: {\n    kMv6JI: \"x18s19nt\",\n    kGuDYH: \"xcohea8\",\n    k63SB2: \"x1mtpwof\",\n    kb6lSQ: \"x1kuyk5j\",\n    kLWn49: \"xucx483\",\n    $$css: true\n  },\n  headlineSmall: {\n    kMv6JI: \"x1fz0g89\",\n    kGuDYH: \"xkb6epg\",\n    k63SB2: \"x76yrz5\",\n    kb6lSQ: \"x1s1qhaa\",\n    kLWn49: \"x1voeury\",\n    $$css: true\n  },\n  labelLarge: {\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    $$css: true\n  },\n  labelMedium: {\n    kMv6JI: \"xp6n8n2\",\n    kGuDYH: \"xkucv67\",\n    k63SB2: \"x14hhc5u\",\n    kb6lSQ: \"x12utw95\",\n    kLWn49: \"xvzb9hk\",\n    $$css: true\n  },\n  labelSmall: {\n    kMv6JI: \"xs1w0rn\",\n    kGuDYH: \"x1n35her\",\n    k63SB2: \"x1su64ma\",\n    kb6lSQ: \"xdlnduh\",\n    kLWn49: \"xaomhve\",\n    $$css: true\n  },\n  titleLarge: {\n    kMv6JI: \"xdy5w5q\",\n    kGuDYH: \"xete2z3\",\n    k63SB2: \"x14ijtet\",\n    kb6lSQ: \"xug9e1u\",\n    kLWn49: \"x2divse\",\n    $$css: true\n  },\n  titleMedium: {\n    kMv6JI: \"x46eyla\",\n    kGuDYH: \"x5ehqhr\",\n    k63SB2: \"xrf6cl6\",\n    kb6lSQ: \"x1g135zh\",\n    kLWn49: \"x1ggk5va\",\n    $$css: true\n  },\n  titleSmall: {\n    kMv6JI: \"xrgwony\",\n    kGuDYH: \"x12s497w\",\n    k63SB2: \"x1szcwkt\",\n    kb6lSQ: \"xo803ec\",\n    kLWn49: \"xyl1r0q\",\n    $$css: true\n  }\n};\n\n// Tone is a separate axis from variant so the two compose freely — any of the\n// 15 scale styles in any of these colors. Kept to the roles text actually\n// takes on a surface; a consumer needing something outside this set uses\n// `inherit` and colors the parent, rather than this growing a case per role.\nconst tones = {\n  error: {\n    kMwMTN: \"x4ii1qj\",\n    $$css: true\n  },\n  inherit: {\n    kMwMTN: \"x1heor9g\",\n    $$css: true\n  },\n  muted: {\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  },\n  negative: {\n    kMwMTN: \"x12gp0t\",\n    $$css: true\n  },\n  neutral: {\n    kMwMTN: \"x139gbkf\",\n    $$css: true\n  },\n  positive: {\n    kMwMTN: \"x4no3js\",\n    $$css: true\n  },\n  primary: {\n    kMwMTN: \"x1mxwv8y\",\n    $$css: true\n  }\n};\ntype TextProps = {\n  /**\n   * Renders a `<p>` rather than the default `<span>`, for a block of prose\n   * rather than a run of text inside one.\n   *\n   * The paragraph carries no margin of its own, the same as every other Text.\n   * The space between two paragraphs belongs to whatever holds both of them,\n   * which is where it can be a step of the spacing scale rather than a\n   * browser default.\n   *\n   * Ignored when `render` is given, since that names the element outright.\n   * @default false\n   */\n  block?: boolean;\n  /**\n   * The color role to render in. `neutral` is the on-surface role, as it is\n   * on `Currency`; `inherit` takes the color of the nearest colored ancestor\n   * instead of setting one.\n   *\n   * Every role here is guaranteed legible on the surface family, which is\n   * what the library's own tokens and every demo scheme are held to. Over a\n   * container of its own — a selected row, a filled card — `positive`,\n   * `negative` and `error` are one colour family on top of another and are\n   * not guaranteed, so a custom theme placing text there has to check that\n   * pair itself. `inherit` is the way out: it takes the container's own\n   * on-colour rather than setting one.\n   * @default 'neutral'\n   */\n  tone?: 'error' | 'inherit' | 'muted' | 'negative' | 'neutral' | 'positive' | 'primary';\n  /**\n   * Which style of the type scale to render.\n   * @default 'bodyMedium'\n   */\n  variant?: 'bodyLarge' | 'bodyMedium' | 'bodySmall' | 'displayLarge' | 'displayMedium' | 'displaySmall' | 'headlineLarge' | 'headlineMedium' | 'headlineSmall' | 'labelLarge' | 'labelMedium' | 'labelSmall' | 'titleLarge' | 'titleMedium' | 'titleSmall';\n} & RenderComponentProps<'span'>;\n\n/**\n * A run of text in one style of Material Design's type scale and one colour\n * role. It renders a `<span>`, a `<p>` with `block`, or with `render` any\n * element, which is how a heading keeps its own level while taking the\n * scale's look.\n *\n * ```tsx\n * <Text render={<h2 />} variant=\"titleLarge\">\n *   Headline\n * </Text>\n * ```\n *\n * It carries no margin, whatever it renders, so the space between two blocks\n * of text belongs to whatever holds both of them.\n *\n * The call site's `className` and `style` land on the element it renders.\n */\nfunction Text({\n  block = false,\n  render,\n  tone = 'neutral',\n  variant = 'bodyMedium',\n  ...props\n}: TextProps) {\n  return useRender({\n    // Card switches its default element the same way, and the props type\n    // stays the span's for the same reason: the two differ only in the ref's\n    // element interface, and neither adds anything a call site reaches for.\n    defaultTagName: block ? 'p' : 'span',\n    props: {\n      ...props,\n      ...mergeStyles(stylex.props(styles.base, styles[variant], tones[tone]), props)\n    },\n    render\n  });\n}\nexport type { TextProps };\nexport default Text;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["c","_c","stylex","RenderComponentProps","useRender","mergeStyles","colors","typography","styles","base","kB7OPa","kogj98","kHjlTd","$$css","bodyLarge","kMv6JI","kGuDYH","k63SB2","kb6lSQ","kLWn49","bodyMedium","bodySmall","displayLarge","displayMedium","displaySmall","headlineLarge","headlineMedium","headlineSmall","labelLarge","labelMedium","labelSmall","titleLarge","titleMedium","titleSmall","tones","error","kMwMTN","inherit","muted","negative","neutral","positive","primary","TextProps","block","tone","variant","Text","t0","$","render","t1","t2","t3","t4","t5","t6","t7","t8","props","undefined","defaultTagName","_c","props","stylex.props"],"sources":["../../../src/components/text/index.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport type { RenderComponentProps } from '../../render/useRender';\nimport { useRender } from '../../render/useRender';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, typography } from '../../tokens/design.tokens.stylex';\n\n// The type scale on Material Design's typography pages: fifteen styles, the\n// display, headline, title, body and label roles at large, medium and small.\n// Each is a size, a line height, a tracking, a weight and a typeface — the\n// scale's brand face for display, headline and the large title, its plain\n// face for the rest. The values are the tokens', which carry the scale's own\n// numbers, so no style here writes one down.\n//\n// One key per style in the 15-entry type scale, named exactly as the token\n// group names it, so `styles[variant]` indexes straight off the prop with no\n// lookup table to keep in sync. Every style sets all five fields the scale\n// defines rather than inheriting any of them: a Text nested inside another\n// Text would otherwise pick up the outer line-height or tracking, which is\n// the kind of drift the scale exists to prevent.\n//\n// `margin: 0` is the one UA reset here. Text renders a <span> by default, but\n// `block` renders a <p> and `render` is how a consumer reaches for any other\n// semantic markup — `<Text render={<h2 />}>` — and the UA margin on either\n// would then vary the spacing around otherwise identical type. The space\n// between two blocks of text is the job of whatever holds them, which is\n// where it can come from the spacing scale.\nconst styles = {\n  base: {\n    kB7OPa: \"x9f619\",\n    kogj98: \"x1ghz6dp\",\n    kHjlTd: \"x1mzt3pk\",\n    $$css: true\n  },\n  bodyLarge: {\n    kMv6JI: \"x16svsjw\",\n    kGuDYH: \"x1848etk\",\n    k63SB2: \"x1c52epr\",\n    kb6lSQ: \"x1qn8t5l\",\n    kLWn49: \"xh7dzej\",\n    $$css: true\n  },\n  bodyMedium: {\n    kMv6JI: \"xpo2rfv\",\n    kGuDYH: \"x193rfdd\",\n    k63SB2: \"x1hews6w\",\n    kb6lSQ: \"xn43zvd\",\n    kLWn49: \"xv61bfh\",\n    $$css: true\n  },\n  bodySmall: {\n    kMv6JI: \"x1yicsit\",\n    kGuDYH: \"x1b35g6e\",\n    k63SB2: \"x9d6959\",\n    kb6lSQ: \"xwth0xh\",\n    kLWn49: \"xybisxh\",\n    $$css: true\n  },\n  displayLarge: {\n    kMv6JI: \"xjaampf\",\n    kGuDYH: \"xuyiek4\",\n    k63SB2: \"x1n2oj23\",\n    kb6lSQ: \"x1hxa6v5\",\n    kLWn49: \"x1iwmiir\",\n    $$css: true\n  },\n  displayMedium: {\n    kMv6JI: \"x1gi70vc\",\n    kGuDYH: \"xlzzeuu\",\n    k63SB2: \"xh9quta\",\n    kb6lSQ: \"x148mp24\",\n    kLWn49: \"xs5hucj\",\n    $$css: true\n  },\n  displaySmall: {\n    kMv6JI: \"x1eslvzl\",\n    kGuDYH: \"x1g52wnc\",\n    k63SB2: \"x1x664hp\",\n    kb6lSQ: \"x1rnjaw4\",\n    kLWn49: \"x92ldg4\",\n    $$css: true\n  },\n  headlineLarge: {\n    kMv6JI: \"x1vsmgmf\",\n    kGuDYH: \"xh9c4x\",\n    k63SB2: \"x1y15vu6\",\n    kb6lSQ: \"xoqu3bc\",\n    kLWn49: \"x10x9d6x\",\n    $$css: true\n  },\n  headlineMedium: {\n    kMv6JI: \"x18s19nt\",\n    kGuDYH: \"xcohea8\",\n    k63SB2: \"x1mtpwof\",\n    kb6lSQ: \"x1kuyk5j\",\n    kLWn49: \"xucx483\",\n    $$css: true\n  },\n  headlineSmall: {\n    kMv6JI: \"x1fz0g89\",\n    kGuDYH: \"xkb6epg\",\n    k63SB2: \"x76yrz5\",\n    kb6lSQ: \"x1s1qhaa\",\n    kLWn49: \"x1voeury\",\n    $$css: true\n  },\n  labelLarge: {\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    $$css: true\n  },\n  labelMedium: {\n    kMv6JI: \"xp6n8n2\",\n    kGuDYH: \"xkucv67\",\n    k63SB2: \"x14hhc5u\",\n    kb6lSQ: \"x12utw95\",\n    kLWn49: \"xvzb9hk\",\n    $$css: true\n  },\n  labelSmall: {\n    kMv6JI: \"xs1w0rn\",\n    kGuDYH: \"x1n35her\",\n    k63SB2: \"x1su64ma\",\n    kb6lSQ: \"xdlnduh\",\n    kLWn49: \"xaomhve\",\n    $$css: true\n  },\n  titleLarge: {\n    kMv6JI: \"xdy5w5q\",\n    kGuDYH: \"xete2z3\",\n    k63SB2: \"x14ijtet\",\n    kb6lSQ: \"xug9e1u\",\n    kLWn49: \"x2divse\",\n    $$css: true\n  },\n  titleMedium: {\n    kMv6JI: \"x46eyla\",\n    kGuDYH: \"x5ehqhr\",\n    k63SB2: \"xrf6cl6\",\n    kb6lSQ: \"x1g135zh\",\n    kLWn49: \"x1ggk5va\",\n    $$css: true\n  },\n  titleSmall: {\n    kMv6JI: \"xrgwony\",\n    kGuDYH: \"x12s497w\",\n    k63SB2: \"x1szcwkt\",\n    kb6lSQ: \"xo803ec\",\n    kLWn49: \"xyl1r0q\",\n    $$css: true\n  }\n};\n\n// Tone is a separate axis from variant so the two compose freely — any of the\n// 15 scale styles in any of these colors. Kept to the roles text actually\n// takes on a surface; a consumer needing something outside this set uses\n// `inherit` and colors the parent, rather than this growing a case per role.\nconst tones = {\n  error: {\n    kMwMTN: \"x4ii1qj\",\n    $$css: true\n  },\n  inherit: {\n    kMwMTN: \"x1heor9g\",\n    $$css: true\n  },\n  muted: {\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  },\n  negative: {\n    kMwMTN: \"x12gp0t\",\n    $$css: true\n  },\n  neutral: {\n    kMwMTN: \"x139gbkf\",\n    $$css: true\n  },\n  positive: {\n    kMwMTN: \"x4no3js\",\n    $$css: true\n  },\n  primary: {\n    kMwMTN: \"x1mxwv8y\",\n    $$css: true\n  }\n};\ntype TextProps = {\n  /**\n   * Renders a `<p>` rather than the default `<span>`, for a block of prose\n   * rather than a run of text inside one.\n   *\n   * The paragraph carries no margin of its own, the same as every other Text.\n   * The space between two paragraphs belongs to whatever holds both of them,\n   * which is where it can be a step of the spacing scale rather than a\n   * browser default.\n   *\n   * Ignored when `render` is given, since that names the element outright.\n   * @default false\n   */\n  block?: boolean;\n  /**\n   * The color role to render in. `neutral` is the on-surface role, as it is\n   * on `Currency`; `inherit` takes the color of the nearest colored ancestor\n   * instead of setting one.\n   *\n   * Every role here is guaranteed legible on the surface family, which is\n   * what the library's own tokens and every demo scheme are held to. Over a\n   * container of its own — a selected row, a filled card — `positive`,\n   * `negative` and `error` are one colour family on top of another and are\n   * not guaranteed, so a custom theme placing text there has to check that\n   * pair itself. `inherit` is the way out: it takes the container's own\n   * on-colour rather than setting one.\n   * @default 'neutral'\n   */\n  tone?: 'error' | 'inherit' | 'muted' | 'negative' | 'neutral' | 'positive' | 'primary';\n  /**\n   * Which style of the type scale to render.\n   * @default 'bodyMedium'\n   */\n  variant?: 'bodyLarge' | 'bodyMedium' | 'bodySmall' | 'displayLarge' | 'displayMedium' | 'displaySmall' | 'headlineLarge' | 'headlineMedium' | 'headlineSmall' | 'labelLarge' | 'labelMedium' | 'labelSmall' | 'titleLarge' | 'titleMedium' | 'titleSmall';\n} & RenderComponentProps<'span'>;\n\n/**\n * A run of text in one style of Material Design's type scale and one colour\n * role. It renders a `<span>`, a `<p>` with `block`, or with `render` any\n * element, which is how a heading keeps its own level while taking the\n * scale's look.\n *\n * ```tsx\n * <Text render={<h2 />} variant=\"titleLarge\">\n *   Headline\n * </Text>\n * ```\n *\n * It carries no margin, whatever it renders, so the space between two blocks\n * of text belongs to whatever holds both of them.\n *\n * The call site's `className` and `style` land on the element it renders.\n */\nfunction Text({\n  block = false,\n  render,\n  tone = 'neutral',\n  variant = 'bodyMedium',\n  ...props\n}: TextProps) {\n  return useRender({\n    // Card switches its default element the same way, and the props type\n    // stays the span's for the same reason: the two differ only in the ref's\n    // element interface, and neither adds anything a call site reaches for.\n    defaultTagName: block ? 'p' : 'span',\n    props: {\n      ...props,\n      ...mergeStyles(stylex.props(styles.base, styles[variant], tones[tone]), props)\n    },\n    render\n  });\n}\nexport type { TextProps };\nexport default Text;"],"mappings":"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"}

package/dist/control/styles.js

@@ -34,7 +34,8 @@ const controlStyles = {
 		kB7OPa: "x9f619",
 		k1C7PZ: "xpr5407",
 		k1xSpc: "xrvj5dj",
-		kumcoG: "x1pmbctz",
+		kumcoG: "x1rkzygb",
+		k7Eaqz: "xeuugli",
 		$$css: true
 	},
 	label: {
@@ -46,6 +47,8 @@ const controlStyles = {
 		k63SB2: "x1c52epr",
 		kb6lSQ: "x1qn8t5l",
 		kLWn49: "xh7dzej",
+		k7Eaqz: "xeuugli",
+		kHjlTd: "xj0a0fe",
 		k8WAf4: "x18r0n19",
 		$$css: true
 	},
@@ -59,7 +62,10 @@ const controlStyles = {
 		$$css: true
 	},
 	messages: {
+		kB7OPa: "x9f619",
 		kEXP64: "x1xdureb",
+		k7Eaqz: "xeuugli",
+		kHjlTd: "xj0a0fe",
 		$$css: true
 	}
 };

package/dist/control/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","names":["stylex","colors","motion","radii","spacing","stateLayerOpacity","typography","FORCED_COLORS","LAYER_SIZE","TARGET_SIZE","TARGET_REACH","controlStyles","controlDisabled","kkrTdU","$$css","controlReadOnly","disc","kgeoSG","kFcpXp","kEoFBp","k6CgDc","kGNEyG","kWkggS","kZKoxP","kaIpWk","kB7OPa","k1xSpc","kmuXW","kzqmXN","kjj79g","kVAEAm","kIyJzY","k1ekBW","kAMwcw","field","k1C7PZ","kumcoG","label","kMwMTN","kMv6JI","kGuDYH","k63SB2","kb6lSQ","kLWn49","k8WAf4","labelDisabled","labelReadOnly","messages","kEXP64"],"sources":["../../src/control/styles.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport '../tokens/design.tokens.stylex';\nimport { colors, motion, radii, spacing, stateLayerOpacity, typography } from '../tokens/design.tokens.stylex';\n\n// Windows High Contrast and the rest of the forced-colours modes. Spelled\n// here rather than imported, for the reason src/field/styles.ts records: the\n// StyleX compiler resolves a constant across files only out of a `.stylex.ts`\n// module, and the generated one holds design tokens rather than queries.\nconst FORCED_COLORS = '@media (forced-colors: active)';\n\n// The row a selection control draws, shared by Checkbox, Switch and Radio.\n// Each wrote it out in full: the two-column grid, the body-large label with\n// its disabled and read-only fades, the messages cell under the text, and the\n// cursors the control takes in those two states. Switch's own comment already\n// said it drew \"the two-column grid the checkbox uses\" while keeping a second\n// copy, so the coupling was recorded in prose rather than in code — the same\n// thing src/field and src/row were extracted to stop.\n//\n// The set is closed at three. React Aria Components has no fourth component\n// drawing this row, and CheckboxGroup is a container rather than a control.\n// What this is worth is that the three cannot drift apart, and that the\n// repository's own convention — a style more than one component draws lives\n// beside src/components, not inside it — holds here too.\n//\n// Two things deliberately stay with each component.\n//\n// The state layers are three different shapes rather than one shape with\n// three sets of key names. Checkbox carries an `error` key Radio has no\n// equivalent for, Checkbox's pressed set inverts its own key names, and\n// Switch deliberately does not invert at all. One style keyed on a `marked`\n// boolean would have to encode an error branch one caller uses, an inversion\n// another uses, and a documented non-inversion for the third, which costs a\n// reader more than the three short `stylex.create` calls it would replace.\n//\n// And the disc's colour. Checkbox draws it in `onSurface` and Radio in\n// `onSurfaceVariant`, which is the one declaration their otherwise identical\n// discs disagree on, so `disc` holds the other fourteen and each component\n// composes its own colour after.\n// The two sizes the checkbox, radio button and switch pages each give, and\n// the decision the three of them share.\n//\n// Every one of those pages lists them as separate measurements — a 40dp state\n// layer and a 48dp target — and all three components here recorded the pair in\n// their header comments while drawing only the first. The target is what the\n// pages ask a press to reach, so it is drawn: `disc` carries a transparent\n// `::before` that reaches the 4dp either side, taking the press because a\n// pseudo-element is part of the element it belongs to. Nothing moves, since\n// that box is out of flow — the alternative, a 48dp disc, would have grown\n// every form in every consuming app by 8dp a row.\n//\n// Switch composes neither of these. Its track is its own 52 by 40, so it\n// carries the same `::before` in its own file, over the one axis that is\n// short.\n//\n// The layer is also what the label centres its first line on, and the two\n// have to agree: a disc resized without the label following it would put the\n// control off its own label again, which is the drift this row already had\n// once. The target is deliberately not in that sum — a label centred on an\n// invisible box would sit 4dp below the disc a reader can see.\n//\n// Literals rather than `sizing.controlSm` and `controlMd`, which happen to\n// hold the same two numbers. Those are steps of the control scale, spent on\n// button heights; these are one page's state layer and one page's target, and\n// a consumer resizing their buttons should not move either.\nconst LAYER_SIZE = '40px';\nconst TARGET_SIZE = '48px';\n\n/** How far the target reaches past the layer on each side: 4dp. */\nconst TARGET_REACH = `calc((${LAYER_SIZE} - ${TARGET_SIZE}) / 2)`;\nconst controlStyles = {\n  controlDisabled: {\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  controlReadOnly: {\n    kkrTdU: \"xt0e3qv\",\n    $$css: true\n  },\n  disc: {\n    kgeoSG: \"x1cpjm7i\",\n    kFcpXp: \"x15kbrqr\",\n    kEoFBp: \"x1hmns74\",\n    k6CgDc: \"x12w9bfk\",\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kZKoxP: \"x1vqgdyp\",\n    kaIpWk: \"x16fbrrb\",\n    kB7OPa: \"x9f619\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x78zum5\",\n    kmuXW: \"x2lah0s\",\n    kzqmXN: \"x100vrsf\",\n    kjj79g: \"xl56j7k\",\n    kVAEAm: \"x1n2onr6\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"x15406qy\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  field: {\n    kGNEyG: \"x7a106z\",\n    kB7OPa: \"x9f619\",\n    k1C7PZ: \"xpr5407\",\n    k1xSpc: \"xrvj5dj\",\n    kumcoG: \"x1pmbctz\",\n    $$css: true\n  },\n  label: {\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x139gbkf\",\n    kkrTdU: \"x1ypdohk\",\n    kMv6JI: \"x16svsjw\",\n    kGuDYH: \"x1848etk\",\n    k63SB2: \"x1c52epr\",\n    kb6lSQ: \"x1qn8t5l\",\n    kLWn49: \"xh7dzej\",\n    k8WAf4: \"x18r0n19\",\n    $$css: true\n  },\n  labelDisabled: {\n    kMwMTN: \"x1xj74d8 x1bhcspo\",\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  labelReadOnly: {\n    kkrTdU: \"xt0e3qv\",\n    $$css: true\n  },\n  messages: {\n    kEXP64: \"x1xdureb\",\n    $$css: true\n  }\n};\nexport { controlStyles };"],"mappings":";AAqEA,MAAMW,gBAAgB;CACpBC,iBAAiB;EACfC,QAAQ;EACRC,OAAO;CACT;CACAC,iBAAiB;EACfF,QAAQ;EACRC,OAAO;CACT;CACAE,MAAM;EACJC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRZ,QAAQ;EACRa,QAAQ;EACRC,OAAO;EACPC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRnB,OAAO;CACT;CACAoB,OAAO;EACLb,QAAQ;EACRI,QAAQ;EACRU,QAAQ;EACRT,QAAQ;EACRU,QAAQ;EACRtB,OAAO;CACT;CACAuB,OAAO;EACLZ,QAAQ;EACRa,QAAQ;EACRzB,QAAQ;EACR0B,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACR9B,OAAO;CACT;CACA+B,eAAe;EACbP,QAAQ;EACRzB,QAAQ;EACRC,OAAO;CACT;CACAgC,eAAe;EACbjC,QAAQ;EACRC,OAAO;CACT;CACAiC,UAAU;EACRC,QAAQ;EACRlC,OAAO;CACT;AACF"}
+{"version":3,"file":"styles.js","names":["stylex","colors","motion","radii","spacing","stateLayerOpacity","typography","FORCED_COLORS","LAYER_SIZE","TARGET_SIZE","TARGET_REACH","controlStyles","controlDisabled","kkrTdU","$$css","controlReadOnly","disc","kgeoSG","kFcpXp","kEoFBp","k6CgDc","kGNEyG","kWkggS","kZKoxP","kaIpWk","kB7OPa","k1xSpc","kmuXW","kzqmXN","kjj79g","kVAEAm","kIyJzY","k1ekBW","kAMwcw","field","k1C7PZ","kumcoG","k7Eaqz","label","kMwMTN","kMv6JI","kGuDYH","k63SB2","kb6lSQ","kLWn49","kHjlTd","k8WAf4","labelDisabled","labelReadOnly","messages","kEXP64"],"sources":["../../src/control/styles.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport '../tokens/design.tokens.stylex';\nimport { colors, motion, radii, spacing, stateLayerOpacity, typography } from '../tokens/design.tokens.stylex';\n\n// Windows High Contrast and the rest of the forced-colours modes. Spelled\n// here rather than imported, for the reason src/field/styles.ts records: the\n// StyleX compiler resolves a constant across files only out of a `.stylex.ts`\n// module, and the generated one holds design tokens rather than queries.\nconst FORCED_COLORS = '@media (forced-colors: active)';\n\n// The row a selection control draws, shared by Checkbox, Switch and Radio.\n// Each wrote it out in full: the two-column grid, the body-large label with\n// its disabled and read-only fades, the messages cell under the text, and the\n// cursors the control takes in those two states. Switch's own comment already\n// said it drew \"the two-column grid the checkbox uses\" while keeping a second\n// copy, so the coupling was recorded in prose rather than in code — the same\n// thing src/field and src/row were extracted to stop.\n//\n// The set is closed at three. React Aria Components has no fourth component\n// drawing this row, and CheckboxGroup is a container rather than a control.\n// What this is worth is that the three cannot drift apart, and that the\n// repository's own convention — a style more than one component draws lives\n// beside src/components, not inside it — holds here too.\n//\n// Two things deliberately stay with each component.\n//\n// The state layers are three different shapes rather than one shape with\n// three sets of key names. Checkbox carries an `error` key Radio has no\n// equivalent for, Checkbox's pressed set inverts its own key names, and\n// Switch deliberately does not invert at all. One style keyed on a `marked`\n// boolean would have to encode an error branch one caller uses, an inversion\n// another uses, and a documented non-inversion for the third, which costs a\n// reader more than the three short `stylex.create` calls it would replace.\n//\n// And the disc's colour. Checkbox draws it in `onSurface` and Radio in\n// `onSurfaceVariant`, which is the one declaration their otherwise identical\n// discs disagree on, so `disc` holds the other fourteen and each component\n// composes its own colour after.\n// The two sizes the checkbox, radio button and switch pages each give, and\n// the decision the three of them share.\n//\n// Every one of those pages lists them as separate measurements — a 40dp state\n// layer and a 48dp target — and all three components here recorded the pair in\n// their header comments while drawing only the first. The target is what the\n// pages ask a press to reach, so it is drawn: `disc` carries a transparent\n// `::before` that reaches the 4dp either side, taking the press because a\n// pseudo-element is part of the element it belongs to. Nothing moves, since\n// that box is out of flow — the alternative, a 48dp disc, would have grown\n// every form in every consuming app by 8dp a row.\n//\n// Switch composes neither of these. Its track is its own 52 by 40, so it\n// carries the same `::before` in its own file, over the one axis that is\n// short.\n//\n// The layer is also what the label centres its first line on, and the two\n// have to agree: a disc resized without the label following it would put the\n// control off its own label again, which is the drift this row already had\n// once. The target is deliberately not in that sum — a label centred on an\n// invisible box would sit 4dp below the disc a reader can see.\n//\n// Literals rather than `sizing.controlSm` and `controlMd`, which happen to\n// hold the same two numbers. Those are steps of the control scale, spent on\n// button heights; these are one page's state layer and one page's target, and\n// a consumer resizing their buttons should not move either.\nconst LAYER_SIZE = '40px';\nconst TARGET_SIZE = '48px';\n\n/** How far the target reaches past the layer on each side: 4dp. */\nconst TARGET_REACH = `calc((${LAYER_SIZE} - ${TARGET_SIZE}) / 2)`;\nconst controlStyles = {\n  controlDisabled: {\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  controlReadOnly: {\n    kkrTdU: \"xt0e3qv\",\n    $$css: true\n  },\n  disc: {\n    kgeoSG: \"x1cpjm7i\",\n    kFcpXp: \"x15kbrqr\",\n    kEoFBp: \"x1hmns74\",\n    k6CgDc: \"x12w9bfk\",\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kZKoxP: \"x1vqgdyp\",\n    kaIpWk: \"x16fbrrb\",\n    kB7OPa: \"x9f619\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x78zum5\",\n    kmuXW: \"x2lah0s\",\n    kzqmXN: \"x100vrsf\",\n    kjj79g: \"xl56j7k\",\n    kVAEAm: \"x1n2onr6\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"x15406qy\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  field: {\n    kGNEyG: \"x7a106z\",\n    kB7OPa: \"x9f619\",\n    k1C7PZ: \"xpr5407\",\n    k1xSpc: \"xrvj5dj\",\n    kumcoG: \"x1rkzygb\",\n    k7Eaqz: \"xeuugli\",\n    $$css: true\n  },\n  label: {\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x139gbkf\",\n    kkrTdU: \"x1ypdohk\",\n    kMv6JI: \"x16svsjw\",\n    kGuDYH: \"x1848etk\",\n    k63SB2: \"x1c52epr\",\n    kb6lSQ: \"x1qn8t5l\",\n    kLWn49: \"xh7dzej\",\n    k7Eaqz: \"xeuugli\",\n    kHjlTd: \"xj0a0fe\",\n    k8WAf4: \"x18r0n19\",\n    $$css: true\n  },\n  labelDisabled: {\n    kMwMTN: \"x1xj74d8 x1bhcspo\",\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  labelReadOnly: {\n    kkrTdU: \"xt0e3qv\",\n    $$css: true\n  },\n  messages: {\n    kB7OPa: \"x9f619\",\n    kEXP64: \"x1xdureb\",\n    k7Eaqz: \"xeuugli\",\n    kHjlTd: \"xj0a0fe\",\n    $$css: true\n  }\n};\nexport { controlStyles };"],"mappings":";AAqEA,MAAMW,gBAAgB;CACpBC,iBAAiB;EACfC,QAAQ;EACRC,OAAO;CACT;CACAC,iBAAiB;EACfF,QAAQ;EACRC,OAAO;CACT;CACAE,MAAM;EACJC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRZ,QAAQ;EACRa,QAAQ;EACRC,OAAO;EACPC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRnB,OAAO;CACT;CACAoB,OAAO;EACLb,QAAQ;EACRI,QAAQ;EACRU,QAAQ;EACRT,QAAQ;EACRU,QAAQ;EACRC,QAAQ;EACRvB,OAAO;CACT;CACAwB,OAAO;EACLb,QAAQ;EACRc,QAAQ;EACR1B,QAAQ;EACR2B,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRP,QAAQ;EACRQ,QAAQ;EACRC,QAAQ;EACRhC,OAAO;CACT;CACAiC,eAAe;EACbR,QAAQ;EACR1B,QAAQ;EACRC,OAAO;CACT;CACAkC,eAAe;EACbnC,QAAQ;EACRC,OAAO;CACT;CACAmC,UAAU;EACRxB,QAAQ;EACRyB,QAAQ;EACRb,QAAQ;EACRQ,QAAQ;EACR/B,OAAO;CACT;AACF"}

package/dist/field/styles.js

@@ -281,6 +281,7 @@ const fieldChromeStyles = {
 	label: {
 		k6CgDc: "x12w9bfk",
 		kMwMTN: "x1w5n3ug",
+		kHjlTd: "xj0a0fe",
 		kIyJzY: "xkzkux9",
 		k1ekBW: "xixa3zk",
 		kAMwcw: "xpc4ca7",
@@ -306,6 +307,7 @@ const fieldChromeStyles = {
 		kb6lSQ: "xwth0xh",
 		kLWn49: "xybisxh",
 		kqGvvJ: "x10im51j",
+		kHjlTd: "xj0a0fe",
 		$$css: true
 	},
 	messageError: {