@kanso-labs/kanso-ui 0.43.7 → 0.44.0

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","ReactNode","RefAttributes","TreeItemProps","RACTreeItemProps","TreeLoadMoreItemProps","RACTreeLoadMoreItemProps","TreeProps","RACTreeProps","TreeItemRenderProps","stylex","createContext","useContext","Button","RACButton","Tree","RACTree","TreeHeader","RACTreeHeader","TreeItem","RACTreeItem","TreeItemContent","RACTreeItemContent","TreeLoadMoreItem","RACTreeLoadMoreItem","TreeSection","RACTreeSection","CollectionLoadMore","collectionStyles","containerClasses","rowItemStyles","ChevronEndGlyph","useRipple","RowContent","focus","mergeStatefulStyles","mergeStyles","colors","motion","radii","spacing","Checkbox","RACTreeSectionProps","Parameters","T","SelectLabelContext","undefined","styles","chevron","kGNEyG","kWkggS","kaIpWk","kMzoRj","kB7OPa","kMwMTN","kkrTdU","k1xSpc","kmuXW","kjj79g","kmVPX3","$$css","indent","kZCmMZ","TreeHeaderProps","children","Omit","TreeItemText","className","leading","style","supporting","trailing","headline","textValue","TreeLoadMoreProps","label","selectLabel","TreeSectionProps","header","chevronClassName","props","ring","chevronFor","state","hasChildItems","isExpanded","itemContent","ripple","isDisabled","isSelected","leadingFor","selects","selectionBehavior","selectionMode","textValueFor","t0","$","T0","T1","t1","t2","t3","t4","t5","Symbol","for","onContextMenu","onPointerCancel","onPointerDown","onPointerLeave","onPointerUp","handlers","surface","t6","t7","TreeLoadMore","loading","section","Item","LoadMore","Section","stylex.props","RACButton","Tree","_c","RACTree","TreeHeader","RACTreeHeader","TreeItem","RACTreeItem","RACTreeItemContent","props","RACTreeLoadMoreItem","TreeSection","RACTreeSection"],"sources":["../../../src/components/tree/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode, RefAttributes } from 'react';\nimport type { TreeItemProps as RACTreeItemProps, TreeLoadMoreItemProps as RACTreeLoadMoreItemProps, TreeProps as RACTreeProps, TreeItemRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { createContext, useContext } from 'react';\nimport { Button as RACButton, Tree as RACTree, TreeHeader as RACTreeHeader, TreeItem as RACTreeItem, TreeItemContent as RACTreeItemContent, TreeLoadMoreItem as RACTreeLoadMoreItem, TreeSection as RACTreeSection } from 'react-aria-components';\nimport { CollectionLoadMore } from '../../collection';\nimport { collectionStyles, containerClasses, rowItemStyles } from '../../collection/styles';\nimport { ChevronEndGlyph } from '../../glyphs';\nimport { useRipple } from '../../hooks/useRipple';\nimport { RowContent } from '../../row';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, spacing } from '../../tokens/design.tokens.stylex';\nimport Checkbox from '../checkbox';\n\n// A list whose rows nest. Each row is the row every list here draws —\n// `src/row`, shared with ListItem, ListBox, List and Disclosure — so its\n// 56dp floor, body-large headline, body-medium supporting line, state layers\n// and disabled treatment are that module's, and a tree beside a list cannot\n// drift from it.\n//\n// The lists page gives no nesting: it draws one flat list. So the two things\n// a tree adds beyond that row are the library's own, and both are written\n// here with their reasons. The rest — the row, the selection colours, the\n// checkbox — is the page's, through the shared module.\n//\n// Four things are this component's own.\n//\n// **A level indents by one chevron's width.** React Aria puts the depth on\n// each row as a custom property, so the inset is one `calc` against the\n// row's own inline padding rather than a style per level. 24dp is the size\n// the menus page gives that glyph, which makes a level of nesting exactly as\n// wide as the caret that opens it.\n//\n// **The caret is a button, and React Aria names it.** A `slot=\"chevron\"`\n// button is what expands and collapses; React Aria labels it Expand or\n// Collapse and composes that with the row, so nothing here names it. It is\n// drawn only on a row that has children, since a caret on a leaf says the\n// row opens when it does not.\n//\n// **A selecting tree draws a checkbox, before whatever the row was given.**\n// Same rule as List: React Aria reports the mode on each row, so a tree that\n// toggles draws one without the call site repeating it, and it always sits\n// in the same place so a column of rows reads down.\n//\n// **`TreeItemContent` has no class to style.** React Aria renders it as a\n// `display: contents` gridcell with nothing on it, so the row's own layout\n// is drawn by what goes inside rather than by that wrapper.\n\n// `TreeSection`'s props are not re-exported from the package index, only its\n// component is — so the type is taken off the component rather than imported\n// by a name that is not there to import.\ntype RACTreeSectionProps<T> = Parameters<typeof RACTreeSection<T>>[0];\n\n// What each row's selection checkbox is called. A context rather than a prop\n// on the row, since it is the tree's decision and repeating it per row is\n// how the two drift. Undefined unless the tree is given one, which leaves\n// the name React Aria gives in the reader's locale.\nconst SelectLabelContext = createContext<string | undefined>(undefined);\nconst styles = {\n  chevron: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kaIpWk: \"x1dkaolv\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1w5n3ug\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x78zum5\",\n    kmuXW: \"x2lah0s\",\n    kjj79g: \"xl56j7k\",\n    kmVPX3: \"x1717udv\",\n    $$css: true\n  },\n  indent: {\n    kZCmMZ: \"x1187sqy\",\n    $$css: true\n  }\n};\ntype TreeHeaderProps = {\n  /** The section's heading. */\n  children?: ReactNode;\n};\ntype TreeItemProps<T extends object = object> = Omit<RACTreeItemProps<T>, 'children' | 'className' | 'style' | 'textValue'> & TreeItemText & {\n  /** The rows nested under this one, as further `Tree.Item` entries. */\n  children?: ReactNode;\n  /** A function may compute the class from the row's render state. */\n  className?: RACTreeItemProps<T>['className'];\n  /** Content before the headline: an avatar, an icon. */\n  leading?: ReactNode;\n  /** A function may compute the style from the row's render state. */\n  style?: RACTreeItemProps<T>['style'];\n  /** A second line under the headline, in the muted role. */\n  supporting?: ReactNode;\n  /** Content after the headline, such as a count or a control. */\n  trailing?: ReactNode;\n};\n\n// What the row is worth as text, which React Aria requires: a tree row wraps\n// its headline in elements, so it cannot read one off the children the way a\n// plain-string child would give it. A string headline is taken as the value,\n// which is the common case; anything else has to say what it is worth, and\n// this is what makes the compiler ask rather than leaving a row unnamed.\ntype TreeItemText = {\n  /** The row's headline — the one thing it is mostly about. */\n  headline: string;\n  /** What typeahead matches the row on. Defaults to the headline. */\n  textValue?: string;\n} | {\n  /** The row's headline, as something other than a plain string. */\n  headline?: ReactNode;\n  /** What typeahead matches the row on, and what names it. */\n  textValue: string;\n};\ntype TreeLoadMoreProps = Omit<RACTreeLoadMoreItemProps, '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};\ntype TreeProps<T extends object = object> = {\n  /** A function may compute the class from the tree's render state. */\n  className?: RACTreeProps<T>['className'];\n  /**\n   * What each row's selection checkbox is called, for a screen reader. The\n   * row's own text is what names the row; this names the box inside it.\n   * Left out, React Aria names it in the reader's locale — \"Select\" in\n   * English.\n   */\n  selectLabel?: string;\n  /** A function may compute the style from the tree's render state. */\n  style?: RACTreeProps<T>['style'];\n} & Omit<RACTreeProps<T>, 'className' | 'style'>;\ntype TreeSectionProps<T extends object = object> = Omit<RACTreeSectionProps<T>, 'children'> & {\n  /**\n   * The rows 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};\n\n// The button itself never turns — the glyph inside it does, so the press\n// target stays a square whichever way the row is pointing.\nfunction chevronClassName() {\n  return stylex.props(styles.chevron, focus.ring).className ?? '';\n}\n\n// The caret, or the space it would have taken. Written as a call rather than\n// inline at the prop, which is what react-perf's no-new-function-as-prop and\n// jsx-no-jsx-as-prop are after; the React Compiler memoises the result on\n// its inputs.\n//\n// A leaf gets the space rather than nothing, so its headline lines up with\n// the headline of a sibling that opens.\nfunction chevronFor(state: TreeItemRenderProps): ReactNode {\n  if (!state.hasChildItems) {\n    return <span className=\"xxk0z11 x2lah0s xvy4d1p\" />;\n  }\n  return <RACButton className={chevronClassName} slot=\"chevron\">\n      <ChevronEndGlyph {...{\n      0: {\n        className: \"x12w9bfk xxk0z11 xvy4d1p xu3v78v x1c071of xkzkux9 x11xpdln xpc4ca7\"\n      },\n      1: {\n        className: \"x12w9bfk xxk0z11 xvy4d1p xkzkux9 x11xpdln xpc4ca7 xaaet9u x1iffjtl\"\n      }\n    }[!!state.isExpanded << 0]} />\n    </RACButton>;\n}\n\n// What a row draws, from React Aria's render state. The caret comes first,\n// then the selection checkbox, then whatever the row was given — one order,\n// always, which is what keeps a column of rows reading down.\nfunction itemContent(headline: ReactNode, leading: ReactNode, supporting: ReactNode, trailing: ReactNode, selectLabel: string | undefined, ripple: ReactNode) {\n  return (state: TreeItemRenderProps): ReactNode => <>\n      <RowContent isDisabled={state.isDisabled} isSelected={state.isSelected} leading={leadingFor(state, leading, selectLabel)} supporting={supporting} trailing={trailing}>\n        {headline}\n      </RowContent>\n      {state.isDisabled ? null : ripple}\n    </>;\n}\n\n// StyleX cannot target `[data-selected]` on the element it is styling, so a\n// row'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 row, so nothing has to outrank them.\n//\n// A supporting line moves the row from the page's one-line container height\n// to its two-line one, which is a floor rather than something the row's own\n// box arrives at — see `twoLine` in `src/row/styles.ts`. Taken as an\n// argument rather than read from the render state, since React Aria reports\n// what a row is doing and not what it holds; the row is built by a call for\n// the same reason `itemContent` is.\n/**\n * The caret, the selection checkbox, then whatever the row was given. Its\n * return type is written out rather than inferred: `ReactNode` is a union\n * that includes a promise, and a function inferred as returning one has to\n * be `async`.\n */\nfunction leadingFor(state: TreeItemRenderProps, leading: ReactNode, selectLabel: string | undefined): ReactNode {\n  const selects = state.selectionBehavior === 'toggle' && state.selectionMode !== 'none';\n  return <>\n      {chevronFor(state)}\n      {selects ? <Checkbox aria-label={selectLabel} slot=\"selection\" /> : null}\n      {leading}\n    </>;\n}\n\n// What React Aria matches typeahead on, and what names the row. `TreeItemText`\n// makes one of the two a string, so the last branch is unreachable through the\n// public type — it is there because destructuring the two apart is what loses\n// the narrowing, not because a row can arrive without either.\nfunction textValueFor(textValue: string | undefined, headline: ReactNode) {\n  if (textValue !== undefined) {\n    return textValue;\n  }\n  return typeof headline === 'string' ? headline : '';\n}\n\n/**\n * A list whose rows nest. Which rows are open is React Aria's: pass\n * `expandedKeys` with `onExpandedChange` to control it, or\n * `defaultExpandedKeys` to let it keep its own. Selection is React Aria's\n * too — set `selectionMode` to `single` or `multiple`.\n *\n * ```tsx\n * <Tree aria-label=\"Label\">\n *   <Tree.Item headline=\"First item\" id=\"first\">\n *     <Tree.Item headline=\"Second item\" id=\"second\" />\n *   </Tree.Item>\n * </Tree>\n * ```\n *\n * Each row is the row every list here draws, indented by its depth, with a\n * caret on the rows that have children. Name the tree with `aria-label` or\n * `aria-labelledby` — nothing here labels it for you.\n *\n * The call site's `className` and `style` land on the container, which is\n * the element a layout positions.\n */\nfunction Tree<T extends object>({\n  selectLabel,\n  ...props\n}: RefAttributes<HTMLDivElement> & TreeProps<T>) {\n  return <SelectLabelContext value={selectLabel}>\n      <RACTree<T> {...props} {...mergeStatefulStyles(containerClasses, props)} />\n    </SelectLabelContext>;\n}\n\n/**\n * A named group of rows. `header` names it, and is what a screen reader\n * reads before the rows inside.\n */\nfunction TreeHeader({\n  children\n}: TreeHeaderProps) {\n  return <RACTreeHeader {...stylex.props(collectionStyles.header)}>\n      {children}\n    </RACTreeHeader>;\n}\n\n/**\n * One row, and the rows under it. Its slots are the row's: `leading`, the\n * `headline`, `supporting` under it, and `trailing`. Give every row an `id`\n * — that is the key selection and expansion are reported by.\n *\n * Rows nested as `children` are what make it a branch; a row with none is a\n * leaf and draws no caret. `textValue` is what typeahead matches on, and is\n * taken from a plain-string headline when it is not given.\n */\nfunction TreeItem<T extends object = object>({\n  children,\n  headline,\n  leading,\n  onContextMenu,\n  onPointerCancel,\n  onPointerDown,\n  onPointerLeave,\n  onPointerUp,\n  supporting,\n  textValue,\n  trailing,\n  ...props\n}: RefAttributes<HTMLDivElement> & TreeItemProps<T>) {\n  const selectLabel = useContext(SelectLabelContext);\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 <RACTreeItem<T> textValue={textValueFor(textValue, headline)} {...ripple.handlers} {...props} {...mergeStatefulStyles(\n  // No overline: a tree row takes the list variant's metrics because it\n  // looks like a list row, but it follows its own page, and that page\n  // gives a headline and a supporting line. The three-line item belongs\n  // to the lists page, which `List.Item` and `ListBox.Item` draw.\n  rowItemStyles(supporting, undefined, styles.indent), props)}>\n      <RACTreeItemContent>\n        {itemContent(headline, leading, supporting, trailing, selectLabel, ripple.surface)}\n      </RACTreeItemContent>\n      {children}\n    </RACTreeItem>;\n}\n\n/**\n * The row the tree shows while it is fetching more. React Aria calls\n * `onLoadMore` when this comes into view, and draws it only while\n * `isLoading`.\n */\nfunction TreeLoadMore({\n  label,\n  ...props\n}: RefAttributes<HTMLDivElement> & TreeLoadMoreProps) {\n  return <RACTreeLoadMoreItem {...props} {...mergeStatefulStyles(stylex.props(collectionStyles.loading), props)}>\n      <CollectionLoadMore diameter=\"24px\" label={label} />\n    </RACTreeLoadMoreItem>;\n}\n\n/**\n * A named group of rows, with its heading above them.\n */\nfunction TreeSection<T extends object = object>({\n  children,\n  header,\n  ...props\n}: TreeSectionProps<T>) {\n  return <RACTreeSection<T> {...props} {...mergeStyles(stylex.props(collectionStyles.section), props)}>\n      {header === undefined ? null : <TreeHeader>{header}</TreeHeader>}\n      {children}\n    </RACTreeSection>;\n}\nTree.Item = TreeItem;\nTree.LoadMore = TreeLoadMore;\nTree.Section = TreeSection;\nexport type { TreeItemProps, TreeLoadMoreProps, TreeProps, TreeSectionProps };\nexport { TreeItem, TreeLoadMore, TreeSection };\nexport default Tree;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["c","_c","ReactNode","RefAttributes","TreeItemProps","RACTreeItemProps","TreeLoadMoreItemProps","RACTreeLoadMoreItemProps","TreeProps","RACTreeProps","TreeItemRenderProps","stylex","createContext","useContext","Button","RACButton","Tree","RACTree","TreeHeader","RACTreeHeader","TreeItem","RACTreeItem","TreeItemContent","RACTreeItemContent","TreeLoadMoreItem","RACTreeLoadMoreItem","TreeSection","RACTreeSection","CollectionLoadMore","collectionStyles","containerClasses","rowItemStyles","ChevronEndGlyph","useRipple","RowContent","focus","mergeStatefulStyles","mergeStyles","colors","motion","radii","spacing","Checkbox","RACTreeSectionProps","Parameters","T","SelectLabelContext","undefined","styles","chevron","kGNEyG","kWkggS","kaIpWk","kMzoRj","kB7OPa","kMwMTN","kkrTdU","k1xSpc","kmuXW","kjj79g","kmVPX3","$$css","indent","kZCmMZ","TreeHeaderProps","children","Omit","TreeItemText","className","leading","style","supporting","trailing","headline","textValue","TreeLoadMoreProps","label","selectionBehavior","selectLabel","TreeSectionProps","header","chevronClassName","props","ring","chevronFor","state","hasChildItems","isExpanded","itemContent","ripple","isDisabled","isSelected","leadingFor","selects","selectionMode","textValueFor","t0","$","T0","T1","t1","t2","t3","t4","t5","t6","Symbol","for","onContextMenu","onPointerCancel","onPointerDown","onPointerLeave","onPointerUp","handlers","surface","t7","TreeLoadMore","loading","section","Item","LoadMore","Section","stylex.props","RACButton","Tree","_c","RACTree","TreeHeader","RACTreeHeader","TreeItem","RACTreeItem","RACTreeItemContent","props","RACTreeLoadMoreItem","TreeSection","RACTreeSection"],"sources":["../../../src/components/tree/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode, RefAttributes } from 'react';\nimport type { TreeItemProps as RACTreeItemProps, TreeLoadMoreItemProps as RACTreeLoadMoreItemProps, TreeProps as RACTreeProps, TreeItemRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { createContext, useContext } from 'react';\nimport { Button as RACButton, Tree as RACTree, TreeHeader as RACTreeHeader, TreeItem as RACTreeItem, TreeItemContent as RACTreeItemContent, TreeLoadMoreItem as RACTreeLoadMoreItem, TreeSection as RACTreeSection } from 'react-aria-components';\nimport { CollectionLoadMore } from '../../collection';\nimport { collectionStyles, containerClasses, rowItemStyles } from '../../collection/styles';\nimport { ChevronEndGlyph } from '../../glyphs';\nimport { useRipple } from '../../hooks/useRipple';\nimport { RowContent } from '../../row';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, spacing } from '../../tokens/design.tokens.stylex';\nimport Checkbox from '../checkbox';\n\n// A list whose rows nest. Each row is the row every list here draws —\n// `src/row`, shared with ListItem, ListBox, List and Disclosure — so its\n// 56dp floor, body-large headline, body-medium supporting line, state layers\n// and disabled treatment are that module's, and a tree beside a list cannot\n// drift from it.\n//\n// The lists page gives no nesting: it draws one flat list. So the two things\n// a tree adds beyond that row are the library's own, and both are written\n// here with their reasons. The rest — the row, the selection colours, the\n// checkbox — is the page's, through the shared module.\n//\n// Four things are this component's own.\n//\n// **A level indents by one chevron's width.** React Aria puts the depth on\n// each row as a custom property, so the inset is one `calc` against the\n// row's own inline padding rather than a style per level. 24dp is the size\n// the menus page gives that glyph, which makes a level of nesting exactly as\n// wide as the caret that opens it.\n//\n// **The caret is a button, and React Aria names it.** A `slot=\"chevron\"`\n// button is what expands and collapses; React Aria labels it Expand or\n// Collapse and composes that with the row, so nothing here names it. It is\n// drawn only on a row that has children, since a caret on a leaf says the\n// row opens when it does not.\n//\n// **A selecting tree draws a checkbox, before whatever the row was given.**\n// Same rule as List: React Aria reports the mode on each row, so a tree that\n// toggles draws one without the call site repeating it, and it always sits\n// in the same place so a column of rows reads down.\n//\n// **`TreeItemContent` has no class to style.** React Aria renders it as a\n// `display: contents` gridcell with nothing on it, so the row's own layout\n// is drawn by what goes inside rather than by that wrapper.\n\n// `TreeSection`'s props are not re-exported from the package index, only its\n// component is — so the type is taken off the component rather than imported\n// by a name that is not there to import.\ntype RACTreeSectionProps<T> = Parameters<typeof RACTreeSection<T>>[0];\n\n// What each row's selection checkbox is called. A context rather than a prop\n// on the row, since it is the tree's decision and repeating it per row is\n// how the two drift. Undefined unless the tree is given one, which leaves\n// the name React Aria gives in the reader's locale.\nconst SelectLabelContext = createContext<string | undefined>(undefined);\nconst styles = {\n  chevron: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kaIpWk: \"x1dkaolv\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1w5n3ug\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x78zum5\",\n    kmuXW: \"x2lah0s\",\n    kjj79g: \"xl56j7k\",\n    kmVPX3: \"x1717udv\",\n    $$css: true\n  },\n  indent: {\n    kZCmMZ: \"x1187sqy\",\n    $$css: true\n  }\n};\ntype TreeHeaderProps = {\n  /** The section's heading. */\n  children?: ReactNode;\n};\ntype TreeItemProps<T extends object = object> = Omit<RACTreeItemProps<T>, 'children' | 'className' | 'style' | 'textValue'> & TreeItemText & {\n  /** The rows nested under this one, as further `Tree.Item` entries. */\n  children?: ReactNode;\n  /** A function may compute the class from the row's render state. */\n  className?: RACTreeItemProps<T>['className'];\n  /** Content before the headline: an avatar, an icon. */\n  leading?: ReactNode;\n  /** A function may compute the style from the row's render state. */\n  style?: RACTreeItemProps<T>['style'];\n  /** A second line under the headline, in the muted role. */\n  supporting?: ReactNode;\n  /** Content after the headline, such as a count or a control. */\n  trailing?: ReactNode;\n};\n\n// What the row is worth as text, which React Aria requires: a tree row wraps\n// its headline in elements, so it cannot read one off the children the way a\n// plain-string child would give it. A string headline is taken as the value,\n// which is the common case; anything else has to say what it is worth, and\n// this is what makes the compiler ask rather than leaving a row unnamed.\ntype TreeItemText = {\n  /** The row's headline — the one thing it is mostly about. */\n  headline: string;\n  /** What typeahead matches the row on. Defaults to the headline. */\n  textValue?: string;\n} | {\n  /** The row's headline, as something other than a plain string. */\n  headline?: ReactNode;\n  /** What typeahead matches the row on, and what names it. */\n  textValue: string;\n};\ntype TreeLoadMoreProps = Omit<RACTreeLoadMoreItemProps, '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};\ntype TreeProps<T extends object = object> = {\n  /** A function may compute the class from the tree's render state. */\n  className?: RACTreeProps<T>['className'];\n  /**\n   * How a press selects. `toggle` draws a checkbox on every row, and a press\n   * adds that row to the selection or takes it out. `replace` draws none, a\n   * press makes that row the selection, and the arrow keys carry the\n   * selection with the focus; where rows also take an action, a click\n   * selects and a double click acts. Left out, a `single` tree replaces and\n   * any other toggles, since a single choice drawn as checkboxes unticks one\n   * box whenever another is ticked.\n   */\n  selectionBehavior?: RACTreeProps<T>['selectionBehavior'];\n  /**\n   * What each row's selection checkbox is called, for a screen reader. The\n   * row's own text is what names the row; this names the box inside it.\n   * Left out, React Aria names it in the reader's locale — \"Select\" in\n   * English.\n   */\n  selectLabel?: string;\n  /** A function may compute the style from the tree's render state. */\n  style?: RACTreeProps<T>['style'];\n} & Omit<RACTreeProps<T>, 'className' | 'selectionBehavior' | 'style'>;\ntype TreeSectionProps<T extends object = object> = Omit<RACTreeSectionProps<T>, 'children'> & {\n  /**\n   * The rows 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};\n\n// The button itself never turns — the glyph inside it does, so the press\n// target stays a square whichever way the row is pointing.\nfunction chevronClassName() {\n  return stylex.props(styles.chevron, focus.ring).className ?? '';\n}\n\n// The caret, or the space it would have taken. Written as a call rather than\n// inline at the prop, which is what react-perf's no-new-function-as-prop and\n// jsx-no-jsx-as-prop are after; the React Compiler memoises the result on\n// its inputs.\n//\n// A leaf gets the space rather than nothing, so its headline lines up with\n// the headline of a sibling that opens.\nfunction chevronFor(state: TreeItemRenderProps): ReactNode {\n  if (!state.hasChildItems) {\n    return <span className=\"xxk0z11 x2lah0s xvy4d1p\" />;\n  }\n  return <RACButton className={chevronClassName} slot=\"chevron\">\n      <ChevronEndGlyph {...{\n      0: {\n        className: \"x12w9bfk xxk0z11 xvy4d1p xu3v78v x1c071of xkzkux9 x11xpdln xpc4ca7\"\n      },\n      1: {\n        className: \"x12w9bfk xxk0z11 xvy4d1p xkzkux9 x11xpdln xpc4ca7 xaaet9u x1iffjtl\"\n      }\n    }[!!state.isExpanded << 0]} />\n    </RACButton>;\n}\n\n// What a row draws, from React Aria's render state. The caret comes first,\n// then the selection checkbox, then whatever the row was given — one order,\n// always, which is what keeps a column of rows reading down.\nfunction itemContent(headline: ReactNode, leading: ReactNode, supporting: ReactNode, trailing: ReactNode, selectLabel: string | undefined, ripple: ReactNode) {\n  return (state: TreeItemRenderProps): ReactNode => <>\n      <RowContent isDisabled={state.isDisabled} isSelected={state.isSelected} leading={leadingFor(state, leading, selectLabel)} supporting={supporting} trailing={trailing}>\n        {headline}\n      </RowContent>\n      {state.isDisabled ? null : ripple}\n    </>;\n}\n\n// StyleX cannot target `[data-selected]` on the element it is styling, so a\n// row'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 row, so nothing has to outrank them.\n//\n// A supporting line moves the row from the page's one-line container height\n// to its two-line one, which is a floor rather than something the row's own\n// box arrives at — see `twoLine` in `src/row/styles.ts`. Taken as an\n// argument rather than read from the render state, since React Aria reports\n// what a row is doing and not what it holds; the row is built by a call for\n// the same reason `itemContent` is.\n/**\n * The caret, the selection checkbox, then whatever the row was given. Its\n * return type is written out rather than inferred: `ReactNode` is a union\n * that includes a promise, and a function inferred as returning one has to\n * be `async`.\n */\nfunction leadingFor(state: TreeItemRenderProps, leading: ReactNode, selectLabel: string | undefined): ReactNode {\n  const selects = state.selectionBehavior === 'toggle' && state.selectionMode !== 'none';\n  return <>\n      {chevronFor(state)}\n      {selects ? <Checkbox aria-label={selectLabel} slot=\"selection\" /> : null}\n      {leading}\n    </>;\n}\n\n// What React Aria matches typeahead on, and what names the row. `TreeItemText`\n// makes one of the two a string, so the last branch is unreachable through the\n// public type — it is there because destructuring the two apart is what loses\n// the narrowing, not because a row can arrive without either.\nfunction textValueFor(textValue: string | undefined, headline: ReactNode) {\n  if (textValue !== undefined) {\n    return textValue;\n  }\n  return typeof headline === 'string' ? headline : '';\n}\n\n/**\n * A list whose rows nest. Which rows are open is React Aria's: pass\n * `expandedKeys` with `onExpandedChange` to control it, or\n * `defaultExpandedKeys` to let it keep its own. Selection is React Aria's\n * too — set `selectionMode` to `single` or `multiple`. A `multiple` tree\n * draws a checkbox on every row and a `single` one draws none, as a `List`\n * does; `selectionBehavior` overrides either.\n *\n * ```tsx\n * <Tree aria-label=\"Label\">\n *   <Tree.Item headline=\"First item\" id=\"first\">\n *     <Tree.Item headline=\"Second item\" id=\"second\" />\n *   </Tree.Item>\n * </Tree>\n * ```\n *\n * Each row is the row every list here draws, indented by its depth, with a\n * caret on the rows that have children. Name the tree with `aria-label` or\n * `aria-labelledby` — nothing here labels it for you.\n *\n * The call site's `className` and `style` land on the container, which is\n * the element a layout positions.\n */\nfunction Tree<T extends object>({\n  selectionBehavior,\n  selectLabel,\n  ...props\n}: RefAttributes<HTMLDivElement> & TreeProps<T>) {\n  return <SelectLabelContext value={selectLabel}>\n      <RACTree<T> {...props} {...mergeStatefulStyles(containerClasses, props)}\n    // React Aria's own default is `toggle` in every mode. Read with `??`\n    // rather than placed before the spread, so a wrapper forwarding an\n    // unset prop still gets the default.\n    selectionBehavior={selectionBehavior ?? (props.selectionMode === 'single' ? 'replace' : 'toggle')} />\n    </SelectLabelContext>;\n}\n\n/**\n * A named group of rows. `header` names it, and is what a screen reader\n * reads before the rows inside.\n */\nfunction TreeHeader({\n  children\n}: TreeHeaderProps) {\n  return <RACTreeHeader {...stylex.props(collectionStyles.header)}>\n      {children}\n    </RACTreeHeader>;\n}\n\n/**\n * One row, and the rows under it. Its slots are the row's: `leading`, the\n * `headline`, `supporting` under it, and `trailing`. Give every row an `id`\n * — that is the key selection and expansion are reported by.\n *\n * Rows nested as `children` are what make it a branch; a row with none is a\n * leaf and draws no caret. `textValue` is what typeahead matches on, and is\n * taken from a plain-string headline when it is not given.\n */\nfunction TreeItem<T extends object = object>({\n  children,\n  headline,\n  leading,\n  onContextMenu,\n  onPointerCancel,\n  onPointerDown,\n  onPointerLeave,\n  onPointerUp,\n  supporting,\n  textValue,\n  trailing,\n  ...props\n}: RefAttributes<HTMLDivElement> & TreeItemProps<T>) {\n  const selectLabel = useContext(SelectLabelContext);\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 <RACTreeItem<T> textValue={textValueFor(textValue, headline)} {...ripple.handlers} {...props} {...mergeStatefulStyles(\n  // No overline: a tree row takes the list variant's metrics because it\n  // looks like a list row, but it follows its own page, and that page\n  // gives a headline and a supporting line. The three-line item belongs\n  // to the lists page, which `List.Item` and `ListBox.Item` draw.\n  rowItemStyles(supporting, undefined, styles.indent), props)}>\n      <RACTreeItemContent>\n        {itemContent(headline, leading, supporting, trailing, selectLabel, ripple.surface)}\n      </RACTreeItemContent>\n      {children}\n    </RACTreeItem>;\n}\n\n/**\n * The row the tree shows while it is fetching more. React Aria calls\n * `onLoadMore` when this comes into view, and draws it only while\n * `isLoading`.\n */\nfunction TreeLoadMore({\n  label,\n  ...props\n}: RefAttributes<HTMLDivElement> & TreeLoadMoreProps) {\n  return <RACTreeLoadMoreItem {...props} {...mergeStatefulStyles(stylex.props(collectionStyles.loading), props)}>\n      <CollectionLoadMore diameter=\"24px\" label={label} />\n    </RACTreeLoadMoreItem>;\n}\n\n/**\n * A named group of rows, with its heading above them.\n */\nfunction TreeSection<T extends object = object>({\n  children,\n  header,\n  ...props\n}: TreeSectionProps<T>) {\n  return <RACTreeSection<T> {...props} {...mergeStyles(stylex.props(collectionStyles.section), props)}>\n      {header === undefined ? null : <TreeHeader>{header}</TreeHeader>}\n      {children}\n    </RACTreeSection>;\n}\nTree.Item = TreeItem;\nTree.LoadMore = TreeLoadMore;\nTree.Section = TreeSection;\nexport type { TreeItemProps, TreeLoadMoreProps, TreeProps, TreeSectionProps };\nexport { TreeItem, TreeLoadMore, TreeSection };\nexport default Tree;"],"mappings":"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"}

package/dist/control/index.js

@@ -20,42 +20,45 @@ import { Text } from "react-aria-components";
 * is where its error goes, and an option has only its hint to say.
 */
 function ControlDescription(t0) {
-	const $ = c(5);
-	const { children } = t0;
+	const $ = c(7);
+	const { children, isDisabled: t1 } = t0;
+	const isDisabled = t1 === void 0 ? false : t1;
 	if (children === void 0) return null;
-	let t1;
 	let t2;
+	let t3;
 	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-		t1 = props(controlStyles.messages);
-		t2 = props(fieldChromeStyles.message, fieldChromeStyles.messageLine);
-		$[0] = t1;
-		$[1] = t2;
+		t2 = props(controlStyles.messages);
+		t3 = props(fieldChromeStyles.message, fieldChromeStyles.messageLine);
+		$[0] = t2;
+		$[1] = t3;
 	} else {
-		t1 = $[0];
-		t2 = $[1];
+		t2 = $[0];
+		t3 = $[1];
 	}
-	let t3;
-	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
-		t3 = props(fieldChromeStyles.message);
-		$[2] = t3;
-	} else t3 = $[2];
 	let t4;
-	if ($[3] !== children) {
-		t4 = /* @__PURE__ */ jsx("div", {
-			...t1,
+	if ($[2] !== isDisabled) {
+		t4 = props(fieldChromeStyles.message, isDisabled && fieldChromeStyles.messageDisabled);
+		$[2] = isDisabled;
+		$[3] = t4;
+	} else t4 = $[3];
+	let t5;
+	if ($[4] !== children || $[5] !== t4) {
+		t5 = /* @__PURE__ */ jsx("div", {
+			...t2,
 			children: /* @__PURE__ */ jsx("div", {
-				...t2,
+				...t3,
 				children: /* @__PURE__ */ jsx(Text, {
 					slot: "description",
-					...t3,
+					...t4,
 					children
 				})
 			})
 		});
-		$[3] = children;
-		$[4] = t4;
-	} else t4 = $[4];
-	return t4;
+		$[4] = children;
+		$[5] = t4;
+		$[6] = t5;
+	} else t5 = $[6];
+	return t5;
 }
 const INTERACTIVE = "a[href], button, input, select, textarea, [role=\"button\"], [role=\"link\"]";
 /**

package/dist/control/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","SyntheticEvent","stylex","Text","RequiredMark","fieldChromeStyles","controlStyles","ControlDescriptionProps","children","ControlLabelProps","isRequired","state","ControlLabelState","isDisabled","isReadOnly","ControlDescription","t0","$","_c","undefined","t1","t2","Symbol","for","props","messages","message","messageLine","t3","t4","INTERACTIVE","ControlLabel","label","labelReadOnly","labelDisabled","keepToInteractive","event","HTMLSpanElement","currentTarget","target","interactive","Element","closest","contains","stopPropagation","_c","stylex.props"],"sources":["../../src/control/index.tsx"],"sourcesContent":["import type { ReactNode, SyntheticEvent } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport { Text } from 'react-aria-components';\nimport { RequiredMark } from '../field';\nimport { fieldChromeStyles } from '../field/styles';\nimport { controlStyles } from './styles';\ntype ControlDescriptionProps = {\n  /** The hint. Nothing renders when there is none. */\n  children: string | undefined;\n};\ntype ControlLabelProps = {\n  /** The label's text. Nothing renders when there is none. */\n  children: ReactNode;\n  /**\n   * Whether the control must be chosen, which ends the label in the asterisk\n   * every required field's label ends in.\n   * @default false\n   */\n  isRequired?: boolean;\n  /** The render state React Aria hands the component. */\n  state: ControlLabelState;\n};\n\n/**\n * The state a label reads. Each of React Aria's three render states carries\n * more than this, and this is the part all three share.\n */\ntype ControlLabelState = {\n  isDisabled: boolean;\n  isReadOnly: boolean;\n};\n\n/**\n * The hint under one option of a group, in the second column of its grid and\n * in the option's description slot, so it is read with the option.\n *\n * Not `FieldMessage`, which is the line under a whole field: it reads the\n * validation of the field around it and draws an error, or an empty line for\n * one to arrive in. An option sits inside its group's validation, so through\n * `FieldMessage` it took the group's error for its own — React Aria's\n * `FieldError` then rendered into the option's slots, which hold no error\n * slot, and threw — dropped its own hint whenever the group was invalid, and\n * drew an empty line under every option inside a `Form`. The group's own line\n * is where its error goes, and an option has only its hint to say.\n */\nfunction ControlDescription({\n  children\n}: ControlDescriptionProps) {\n  if (children === undefined) {\n    return null;\n  }\n  return <div {...stylex.props(controlStyles.messages)}>\n      <div {...stylex.props(fieldChromeStyles.message, fieldChromeStyles.messageLine)}>\n        <Text slot=\"description\" {...stylex.props(fieldChromeStyles.message)}>\n          {children}\n        </Text>\n      </div>\n    </div>;\n}\n\n// What a press inside a label belongs to rather than the control: anything\n// that acts on its own, where a native `<label>` leaves the press to it too.\nconst INTERACTIVE = 'a[href], button, input, select, textarea, [role=\"button\"], [role=\"link\"]';\n\n/**\n * The label beside a selection control, in the second column of its grid.\n *\n * Renders nothing without children, which is what a control labelled from\n * outside — by a group's legend, or an `aria-label` — needs.\n *\n * A link or a button inside it acts on its own rather than toggling the\n * control — see `keepToInteractive`.\n */\nfunction ControlLabel({\n  children,\n  isRequired = false,\n  state\n}: ControlLabelProps) {\n  if (children === undefined) {\n    return null;\n  }\n  return (\n    // The handlers only stop events on their way out of the label; they\n    // handle nothing themselves, which is what jsx-a11y cannot tell.\n    // oxlint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events\n    <span onClick={keepToInteractive} onKeyDown={keepToInteractive} onKeyUp={keepToInteractive} onMouseDown={keepToInteractive} onMouseUp={keepToInteractive} onPointerDown={keepToInteractive} onPointerUp={keepToInteractive} onTouchEnd={keepToInteractive} onTouchStart={keepToInteractive} {...stylex.props(controlStyles.label, state.isReadOnly && controlStyles.labelReadOnly, state.isDisabled && controlStyles.labelDisabled)}>\n      {children}\n      {isRequired ? <RequiredMark /> : null}\n    </span>\n  );\n}\n\n/**\n * Keeps a press or a key that starts in something interactive inside the\n * label — the link in \"I agree to the terms\" — from reaching the control's\n * own press handling, which sits on the element around the label. React Aria\n * took such a press as a press on the control, toggling it and stopping the\n * link's own default, so a click toggled the box and left the page where it\n * was, and Enter did neither. Stopped here, the event goes no further than\n * the label, and the browser's own default — following the link — is left\n * alone, as a native label leaves it. A press anywhere else in the label\n * still reaches the control and toggles it.\n */\nfunction keepToInteractive(event: SyntheticEvent<HTMLSpanElement>) {\n  const {\n    currentTarget,\n    target\n  } = event;\n  const interactive = target instanceof Element ? target.closest(INTERACTIVE) : null;\n  if (interactive !== null && currentTarget.contains(interactive)) {\n    event.stopPropagation();\n  }\n}\nexport type { ControlDescriptionProps, ControlLabelProps };\nexport { ControlDescription, ControlLabel };"],"mappings":";;;;;;;;;;;;;;;;;;;;;AA6CA,SAAAe,mBAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,CAAA;CAA4B,MAAA,EAAAV,aAAAQ;CAG1B,IAAIR,aAAaW,KAAAA,GAAS,OACjB;CACR,IAAAC;CAAA,IAAAC;CAAA,IAAAJ,EAAA,OAAAK,OAAAC,IAAA,2BAAA,GAAA;EACeH,KAAAlB,MAAaI,cAAamB,QAAS;EACtCJ,KAAAnB,MAAaG,kBAAiBqB,SAAUrB,kBAAiBsB,WAAY;EAACV,EAAA,KAAAG;EAAAH,EAAA,KAAAI;CAAA,OAAA;EAAAD,KAAAH,EAAA;EAAAI,KAAAJ,EAAA;CAAA;CAAA,IAAAW;CAAA,IAAAX,EAAA,OAAAK,OAAAC,IAAA,2BAAA,GAAA;EAChDK,KAAA1B,MAAaG,kBAAiBqB,OAAQ;EAACT,EAAA,KAAAW;CAAA,OAAAA,KAAAX,EAAA;CAAA,IAAAY;CAAA,IAAAZ,EAAA,OAAAT,UAAA;EAFnEqB,KAAA,oBAAA,OAAA;GAMC,GANQT;GACZ,UAAA,oBAAA,OAAA;IAIM,GAJGC;IACP,UAAA,oBAAC,MAAD;KAAW,MAAA;KAAa,GAAKO;KAC1BpB;IADE,CAAA;GAGD,CAAA;EACF,CAAA;EAAAS,EAAA,KAAAT;EAAAS,EAAA,KAAAY;CAAA,OAAAA,KAAAZ,EAAA;CAAA,OANDY;AAMC;AAKV,MAAMC,cAAc;;;;;;;;;;AAWpB,SAAAC,aAAAf,IAAA;CAAA,MAAAC,IAAAC,EAAA,CAAA;CAAsB,MAAA,EAAAV,UAAAE,YAAAU,IAAAT,UAAAK;CAEpB,MAAAN,aAAAU,OAAAD,KAAAA,IAAA,QAAAC;CAGA,IAAIZ,aAAaW,KAAAA,GAAS,OACjB;CACR,IAAAE;CAAA,IAAAJ,EAAA,OAAAN,MAAAE,cAAAI,EAAA,OAAAN,MAAAG,YAAA;EAKiSO,KAAAnB,MAAaI,cAAa0B,OAAQrB,MAAKG,cAAeR,cAAa2B,eAAgBtB,MAAKE,cAAeP,cAAa4B,aAAc;EAACjB,EAAA,KAAAN,MAAAE;EAAAI,EAAA,KAAAN,MAAAG;EAAAG,EAAA,KAAAI;CAAA,OAAAA,KAAAJ,EAAA;CAAA,IAAAW;CAAA,IAAAX,EAAA,OAAAP,YAAA;EAEhakB,KAAAlB,aAAa,oBAAC,cAAD,CAAa,CAAA,IAA1B;EAAoCO,EAAA,KAAAP;EAAAO,EAAA,KAAAW;CAAA,OAAAA,KAAAX,EAAA;CAAA,IAAAY;CAAA,IAAAZ,EAAA,OAAAT,YAAAS,EAAA,OAAAI,MAAAJ,EAAA,OAAAW,IAAA;EAFvCC,KAAA,qBAAA,QAAA;GAAeM,SAAAA;GAA8BA,WAAAA;GAA4BA,SAAAA;GAAgCA,aAAAA;GAA8BA,WAAAA;GAAkCA,eAAAA;GAAgCA,aAAAA;GAA+BA,YAAAA;GAAiCA,cAAAA;GAAiB,GAAMd;GAAhS,UAAA,CACGb,UACAoB,EACI;;EAAAX,EAAA,KAAAT;EAAAS,EAAA,KAAAI;EAAAJ,EAAA,KAAAW;EAAAX,EAAA,KAAAY;CAAA,OAAAA,KAAAZ,EAAA;CAAA,OAHPY;AAGO;;;;;;;;;;;;AAeX,SAASM,kBAAkBC,OAAwC;CACjE,MAAM,EACJE,eACAC,WACEH;CACJ,MAAMI,cAAcD,kBAAkBE,UAAUF,OAAOG,QAAQZ,WAAW,IAAI;CAC9E,IAAIU,gBAAgB,QAAQF,cAAcK,SAASH,WAAW,GAC5DJ,MAAMQ,gBAAgB;AAE1B"}
+{"version":3,"file":"index.js","names":["ReactNode","SyntheticEvent","stylex","Text","RequiredMark","fieldChromeStyles","controlStyles","ControlDescriptionProps","children","isDisabled","ControlLabelProps","isRequired","state","ControlLabelState","isReadOnly","ControlDescription","t0","$","_c","t1","undefined","t2","t3","Symbol","for","props","messages","message","messageLine","t4","messageDisabled","t5","INTERACTIVE","ControlLabel","label","labelReadOnly","labelDisabled","keepToInteractive","event","HTMLSpanElement","currentTarget","target","interactive","Element","closest","contains","stopPropagation","_c","stylex.props"],"sources":["../../src/control/index.tsx"],"sourcesContent":["import type { ReactNode, SyntheticEvent } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport { Text } from 'react-aria-components';\nimport { RequiredMark } from '../field';\nimport { fieldChromeStyles } from '../field/styles';\nimport { controlStyles } from './styles';\ntype ControlDescriptionProps = {\n  /** The hint. Nothing renders when there is none. */\n  children: string | undefined;\n  /**\n   * Whether the option is disabled, by itself or by its group, which fades\n   * the hint with the option's label.\n   * @default false\n   */\n  isDisabled?: boolean;\n};\ntype ControlLabelProps = {\n  /** The label's text. Nothing renders when there is none. */\n  children: ReactNode;\n  /**\n   * Whether the control must be chosen, which ends the label in the asterisk\n   * every required field's label ends in.\n   * @default false\n   */\n  isRequired?: boolean;\n  /** The render state React Aria hands the component. */\n  state: ControlLabelState;\n};\n\n/**\n * The state a label reads. Each of React Aria's three render states carries\n * more than this, and this is the part all three share.\n */\ntype ControlLabelState = {\n  isDisabled: boolean;\n  isReadOnly: boolean;\n};\n\n/**\n * The hint under one option of a group, in the second column of its grid and\n * in the option's description slot, so it is read with the option.\n *\n * Not `FieldMessage`, which is the line under a whole field: it reads the\n * validation of the field around it and draws an error, or an empty line for\n * one to arrive in. An option sits inside its group's validation, so through\n * `FieldMessage` it took the group's error for its own — React Aria's\n * `FieldError` then rendered into the option's slots, which hold no error\n * slot, and threw — dropped its own hint whenever the group was invalid, and\n * drew an empty line under every option inside a `Form`. The group's own line\n * is where its error goes, and an option has only its hint to say.\n */\nfunction ControlDescription({\n  children,\n  isDisabled = false\n}: ControlDescriptionProps) {\n  if (children === undefined) {\n    return null;\n  }\n  return <div {...stylex.props(controlStyles.messages)}>\n      <div {...stylex.props(fieldChromeStyles.message, fieldChromeStyles.messageLine)}>\n        <Text slot=\"description\" {...stylex.props(fieldChromeStyles.message, isDisabled && fieldChromeStyles.messageDisabled)}>\n          {children}\n        </Text>\n      </div>\n    </div>;\n}\n\n// What a press inside a label belongs to rather than the control: anything\n// that acts on its own, where a native `<label>` leaves the press to it too.\nconst INTERACTIVE = 'a[href], button, input, select, textarea, [role=\"button\"], [role=\"link\"]';\n\n/**\n * The label beside a selection control, in the second column of its grid.\n *\n * Renders nothing without children, which is what a control labelled from\n * outside — by a group's legend, or an `aria-label` — needs.\n *\n * A link or a button inside it acts on its own rather than toggling the\n * control — see `keepToInteractive`.\n */\nfunction ControlLabel({\n  children,\n  isRequired = false,\n  state\n}: ControlLabelProps) {\n  if (children === undefined) {\n    return null;\n  }\n  return (\n    // The handlers only stop events on their way out of the label; they\n    // handle nothing themselves, which is what jsx-a11y cannot tell.\n    // oxlint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events\n    <span onClick={keepToInteractive} onKeyDown={keepToInteractive} onKeyUp={keepToInteractive} onMouseDown={keepToInteractive} onMouseUp={keepToInteractive} onPointerDown={keepToInteractive} onPointerUp={keepToInteractive} onTouchEnd={keepToInteractive} onTouchStart={keepToInteractive} {...stylex.props(controlStyles.label, state.isReadOnly && controlStyles.labelReadOnly, state.isDisabled && controlStyles.labelDisabled)}>\n      {children}\n      {isRequired ? <RequiredMark /> : null}\n    </span>\n  );\n}\n\n/**\n * Keeps a press or a key that starts in something interactive inside the\n * label — the link in \"I agree to the terms\" — from reaching the control's\n * own press handling, which sits on the element around the label. React Aria\n * took such a press as a press on the control, toggling it and stopping the\n * link's own default, so a click toggled the box and left the page where it\n * was, and Enter did neither. Stopped here, the event goes no further than\n * the label, and the browser's own default — following the link — is left\n * alone, as a native label leaves it. A press anywhere else in the label\n * still reaches the control and toggles it.\n */\nfunction keepToInteractive(event: SyntheticEvent<HTMLSpanElement>) {\n  const {\n    currentTarget,\n    target\n  } = event;\n  const interactive = target instanceof Element ? target.closest(INTERACTIVE) : null;\n  if (interactive !== null && currentTarget.contains(interactive)) {\n    event.stopPropagation();\n  }\n}\nexport type { ControlDescriptionProps, ControlLabelProps };\nexport { ControlDescription, ControlLabel };"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAmDA,SAAAe,mBAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,CAAA;CAA4B,MAAA,EAAAV,UAAAC,YAAAU,OAAAH;CAE1B,MAAAP,aAAAU,OAAAC,KAAAA,IAAA,QAAAD;CAEA,IAAIX,aAAaY,KAAAA,GAAS,OACjB;CACR,IAAAC;CAAA,IAAAC;CAAA,IAAAL,EAAA,OAAAM,OAAAC,IAAA,2BAAA,GAAA;EACeH,KAAAnB,MAAaI,cAAaoB,QAAS;EACtCJ,KAAApB,MAAaG,kBAAiBsB,SAAUtB,kBAAiBuB,WAAY;EAACX,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;CAAA,OAAA;EAAAD,KAAAJ,EAAA;EAAAK,KAAAL,EAAA;CAAA;CAAA,IAAAY;CAAA,IAAAZ,EAAA,OAAAR,YAAA;EAChDoB,KAAA3B,MAAaG,kBAAiBsB,SAAUlB,cAAcJ,kBAAiByB,eAAgB;EAACb,EAAA,KAAAR;EAAAQ,EAAA,KAAAY;CAAA,OAAAA,KAAAZ,EAAA;CAAA,IAAAc;CAAA,IAAAd,EAAA,OAAAT,YAAAS,EAAA,OAAAY,IAAA;EAFpHE,KAAA,oBAAA,OAAA;GAMC,GANQV;GACZ,UAAA,oBAAA,OAAA;IAIM,GAJGC;IACP,UAAA,oBAAC,MAAD;KAAW,MAAA;KAAa,GAAKO;KAC1BrB;IADE,CAAA;GAGD,CAAA;EACF,CAAA;EAAAS,EAAA,KAAAT;EAAAS,EAAA,KAAAY;EAAAZ,EAAA,KAAAc;CAAA,OAAAA,KAAAd,EAAA;CAAA,OANDc;AAMC;AAKV,MAAMC,cAAc;;;;;;;;;;AAWpB,SAAAC,aAAAjB,IAAA;CAAA,MAAAC,IAAAC,EAAA,CAAA;CAAsB,MAAA,EAAAV,UAAAG,YAAAQ,IAAAP,UAAAI;CAEpB,MAAAL,aAAAQ,OAAAC,KAAAA,IAAA,QAAAD;CAGA,IAAIX,aAAaY,KAAAA,GAAS,OACjB;CACR,IAAAC;CAAA,IAAAJ,EAAA,OAAAL,MAAAH,cAAAQ,EAAA,OAAAL,MAAAE,YAAA;EAKiSO,KAAAnB,MAAaI,cAAa4B,OAAQtB,MAAKE,cAAeR,cAAa6B,eAAgBvB,MAAKH,cAAeH,cAAa8B,aAAc;EAACnB,EAAA,KAAAL,MAAAH;EAAAQ,EAAA,KAAAL,MAAAE;EAAAG,EAAA,KAAAI;CAAA,OAAAA,KAAAJ,EAAA;CAAA,IAAAK;CAAA,IAAAL,EAAA,OAAAN,YAAA;EAEhaW,KAAAX,aAAa,oBAAC,cAAD,CAAa,CAAA,IAA1B;EAAoCM,EAAA,KAAAN;EAAAM,EAAA,KAAAK;CAAA,OAAAA,KAAAL,EAAA;CAAA,IAAAY;CAAA,IAAAZ,EAAA,OAAAT,YAAAS,EAAA,OAAAI,MAAAJ,EAAA,OAAAK,IAAA;EAFvCO,KAAA,qBAAA,QAAA;GAAeQ,SAAAA;GAA8BA,WAAAA;GAA4BA,SAAAA;GAAgCA,aAAAA;GAA8BA,WAAAA;GAAkCA,eAAAA;GAAgCA,aAAAA;GAA+BA,YAAAA;GAAiCA,cAAAA;GAAiB,GAAMhB;GAAhS,UAAA,CACGb,UACAc,EACI;;EAAAL,EAAA,KAAAT;EAAAS,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;EAAAL,EAAA,KAAAY;CAAA,OAAAA,KAAAZ,EAAA;CAAA,OAHPY;AAGO;;;;;;;;;;;;AAeX,SAASQ,kBAAkBC,OAAwC;CACjE,MAAM,EACJE,eACAC,WACEH;CACJ,MAAMI,cAAcD,kBAAkBE,UAAUF,OAAOG,QAAQZ,WAAW,IAAI;CAC9E,IAAIU,gBAAgB,QAAQF,cAAcK,SAASH,WAAW,GAC5DJ,MAAMQ,gBAAgB;AAE1B"}

package/dist/control/styles.js

@@ -32,7 +32,6 @@ const controlStyles = {
 	field: {
 		kGNEyG: "x7a106z",
 		kB7OPa: "x9f619",
-		k1C7PZ: "xpr5407",
 		k1xSpc: "xrvj5dj",
 		kumcoG: "x1rkzygb",
 		k7Eaqz: "xeuugli",
@@ -50,6 +49,7 @@ const controlStyles = {
 		k7Eaqz: "xeuugli",
 		kHjlTd: "xj0a0fe",
 		k8WAf4: "x18r0n19",
+		kZCmMZ: "xdxifnh",
 		$$css: true
 	},
 	labelDisabled: {
@@ -66,6 +66,13 @@ const controlStyles = {
 		kEXP64: "x1xdureb",
 		k7Eaqz: "xeuugli",
 		kHjlTd: "xj0a0fe",
+		kZCmMZ: "xdxifnh",
+		$$css: true
+	},
+	stack: {
+		k1xSpc: "x78zum5",
+		kXwgrk: "xdt5ytf",
+		khm7nJ: "xtfsegk",
 		$$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","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"}
+{"version":3,"file":"styles.js","names":["stylex","colors","motion","radii","spacing","stateLayerOpacity","typography","FORCED_COLORS","LAYER_SIZE","TARGET_SIZE","TARGET_REACH","TARGET_GAP","controlStyles","controlDisabled","kkrTdU","$$css","controlReadOnly","disc","kgeoSG","kFcpXp","kEoFBp","k6CgDc","kGNEyG","kWkggS","kZKoxP","kaIpWk","kB7OPa","k1xSpc","kmuXW","kzqmXN","kjj79g","kVAEAm","kIyJzY","k1ekBW","kAMwcw","field","kumcoG","k7Eaqz","label","kMwMTN","kMv6JI","kGuDYH","k63SB2","kb6lSQ","kLWn49","kHjlTd","k8WAf4","kZCmMZ","labelDisabled","labelReadOnly","messages","kEXP64","stack","kXwgrk","khm7nJ"],"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. A lone control moves\n// nothing, since that box is out of flow — the alternative, a 48dp disc,\n// would have grown every form in every consuming app by 8dp a row.\n//\n// A group's rows are the exception, and `stack` is how. Rows on the 40dp\n// pitch of their layers put each target 8dp into the next row's, and the\n// later row is painted over the earlier, so a press on the bottom of one\n// row's visible layer went to the row below it. The pages ask that a target\n// not overlap its neighbour, so a group spaces its rows by the 8dp the two\n// sizes differ by, and the targets meet edge to edge on a 48dp pitch.\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)`;\n\n/** The room two targets need between their layers to meet without overlap. */\nconst TARGET_GAP = `calc(${TARGET_SIZE} - ${LAYER_SIZE})`;\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    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    kZCmMZ: \"xdxifnh\",\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    kZCmMZ: \"xdxifnh\",\n    $$css: true\n  },\n  stack: {\n    k1xSpc: \"x78zum5\",\n    kXwgrk: \"xdt5ytf\",\n    khm7nJ: \"xtfsegk\",\n    $$css: true\n  }\n};\nexport { controlStyles };"],"mappings":";AA+EA,MAAMY,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;EACRC,QAAQ;EACRS,QAAQ;EACRC,QAAQ;EACRtB,OAAO;CACT;CACAuB,OAAO;EACLZ,QAAQ;EACRa,QAAQ;EACRzB,QAAQ;EACR0B,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRP,QAAQ;EACRQ,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRhC,OAAO;CACT;CACAiC,eAAe;EACbT,QAAQ;EACRzB,QAAQ;EACRC,OAAO;CACT;CACAkC,eAAe;EACbnC,QAAQ;EACRC,OAAO;CACT;CACAmC,UAAU;EACRxB,QAAQ;EACRyB,QAAQ;EACRd,QAAQ;EACRQ,QAAQ;EACRE,QAAQ;EACRhC,OAAO;CACT;CACAqC,OAAO;EACLzB,QAAQ;EACR0B,QAAQ;EACRC,QAAQ;EACRvC,OAAO;CACT;AACF"}