@kanso-labs/kanso-ui 0.26.3 → 0.26.5

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","Key","TabsProps","RACTabsProps","TabListProps","TabPanelProps","TabPanelsProps","TabProps","TabRenderProps","stylex","createContext","useCallback","useContext","useEffect","useState","SelectionIndicator","RACSelectionIndicator","TabPanels","RACTabPanels","Tabs","RACTabs","Tab","TabList","TabPanel","mergeStatefulStyles","mergeStyles","colors","motion","radii","spacing","stateLayerOpacity","typography","NO_PANELS","ReadonlySet","Set","PanelsContext","RegisterPanelContext","id","Omit","children","tabContent","state","defaultChildren","tabRenderer","hasPanel","render","NonNullable","domProps","adjusted","undefined","t0","$","_c","props","panels","setPanels","t1","Symbol","for","previous","has","next","add","previous_0","next_0","delete","register","t2","t3","TabsList","className","TabsPanel","TabsPanels","TabsTab","T0","tabStyles","t4","isSelected","isDisabled","List","Panel","Panels","TabsListProps","TabsPanelProps","TabsPanelsProps","TabsTabProps"],"sources":["../../../src/components/tabs/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { Key, TabsProps as RACTabsProps, TabListProps, TabPanelProps, TabPanelsProps, TabProps, TabRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { createContext, useCallback, useContext, useEffect, useState } from 'react';\nimport { SelectionIndicator as RACSelectionIndicator, TabPanels as RACTabPanels, Tabs as RACTabs, Tab, TabList, TabPanel } from 'react-aria-components';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\n\n// The tabs page's primary tabs: a 48dp bar on the surface, divided into equal\n// sections, with a 1dp outline-variant divider inside the bar along its\n// bottom edge and, under the active tab's label, a 3dp primary indicator\n// rounded along its top. The indicator follows the label rather than the\n// tab, inset 2dp from the label's ends and never shorter than 24dp, which is\n// what the page draws.\n//\n// The indicator is React Aria's `SelectionIndicator`, which is a shared\n// element: it is rendered inside every tab but drawn in the selected one,\n// and on a change it keeps the old one until it has finished moving to the\n// new one's place. No `SharedElementTransition` is rendered here — `Tab`\n// scopes its own, and one added around the list changes nothing, which is\n// worth knowing because the primitive throws outside a scope when it is put\n// anywhere else.\n//\n// The label is wrapped in a span of its own so the indicator has the label's\n// width to follow: it is the span's `::after`, and the span is as tall as the\n// tab so the indicator reaches the bottom of the bar. Which tab carries it\n// comes from React Aria's render state rather than a selector, since StyleX\n// cannot target [data-selected] on the element it is styling.\n\nconst NO_PANELS: ReadonlySet<Key> = new Set();\n\n// Which panels are mounted, by id. React Aria points a selected tab's\n// `aria-controls` at the panel it would control whether or not one exists,\n// and a strip used on its own — tabs that filter the content below rather\n// than swapping a panel — then references an id nothing carries, which axe\n// reports as an invalid attribute value. Each panel registers itself here so\n// a tab can leave the attribute off when its panel is not there.\nconst PanelsContext = createContext<ReadonlySet<Key>>(NO_PANELS);\nconst RegisterPanelContext = createContext<(id: Key) => () => void>(() => () => {});\n\n// `children` is narrowed to nodes. React Aria also accepts a function there,\n// to hand the children the tabs' render state, and that form cannot be\n// wrapped in a context provider without calling it first — which would be\n// doing React Aria's job with none of its state. Nothing here needs it, so\n// the narrower type says so rather than leaving a signature that type-checks\n// and then fails to render.\ntype TabsProps = Omit<RACTabsProps, 'children'> & {\n  children?: ReactNode;\n};\n\n// The label, wrapped so the indicator has its width to follow. Built by a\n// call for the same reason as `tabRenderer` below; React Aria hands the\n// function the tab's state, and it is passed on when the children are a\n// function too.\nfunction tabContent(children: TabProps['children']) {\n  return (state: TabRenderProps & {\n    defaultChildren: ReactNode;\n  }) => <span className=\"x6s0dn4 x5yr21d x9f619 x3nfvp2 x1n2onr6\">\n      {typeof children === 'function' ? children(state) : children}\n      <RACSelectionIndicator className=\"x12w9bfk xnety89 xuoj239 x13dhofw xz4iguh x9f619 x17v02zk x1ey2m1c x17y0mx6 xvueqy4 xnei2rj x10l6tqk xioksi3 x1mxbss1 x1seskgd\" />\n    </span>;\n}\n\n// React Aria renders a tab with `href` as an anchor and any other as a div,\n// and expects a `render` function to return the same element it would have.\n// Built by a call rather than written inline at the prop, which is what\n// react-perf's no-new-function-as-prop is after; the React Compiler memoises\n// the result on its two inputs. See PanelsContext for why the attribute is\n// dropped.\nfunction tabRenderer(hasPanel: boolean, render: TabProps['render']): NonNullable<TabProps['render']> {\n  return (domProps, state) => {\n    const adjusted = hasPanel ? domProps : {\n      ...domProps,\n      'aria-controls': undefined\n    };\n    if (render !== undefined) {\n      return render(adjusted, state);\n    }\n    if ('href' in adjusted) {\n      // oxlint-disable-next-line jsx-a11y/anchor-has-content -- filled by React Aria\n      return <a {...adjusted} />;\n    }\n    return <div {...adjusted} />;\n  };\n}\n\n/**\n * A tab bar and its panels. Selection is React Aria's `selectedKey`: pass\n * it with `onSelectionChange` to control it, or `defaultSelectedKey` to let\n * it keep its own. Each `Tabs.Tab` names the `Tabs.Panel` it controls through\n * a shared `id`, and a strip may stand alone without panels.\n *\n * Composed rather than configured by props, because the number of tabs and\n * what each panel holds are the call site's to decide — the parts are\n * `Tabs.List`, `Tabs.Tab`, and `Tabs.Panel`.\n */\nfunction Tabs({\n  children,\n  ...props\n}: TabsProps) {\n  const [panels, setPanels] = useState<ReadonlySet<Key>>(NO_PANELS);\n  const register = useCallback((id: Key) => {\n    setPanels(previous => {\n      if (previous.has(id)) {\n        return previous;\n      }\n      const next = new Set(previous);\n      next.add(id);\n      return next;\n    });\n    return () => {\n      setPanels(previous => {\n        if (!previous.has(id)) {\n          return previous;\n        }\n        const next = new Set(previous);\n        next.delete(id);\n        return next;\n      });\n    };\n  }, []);\n  return <RACTabs {...props}>\n      <RegisterPanelContext value={register}>\n        <PanelsContext value={panels}>{children}</PanelsContext>\n      </RegisterPanelContext>\n    </RACTabs>;\n}\nfunction TabsList(props: TabsListProps) {\n  return <TabList {...props} {...mergeStatefulStyles({\n    className: \"xp05xdj x9f619 x78zum5\"\n  }, props)} />;\n}\nfunction TabsPanel(props: TabsPanelProps) {\n  const register = useContext(RegisterPanelContext);\n  const {\n    id\n  } = props;\n  useEffect(() => {\n    if (id === undefined) {\n      return undefined;\n    }\n    return register(id);\n  }, [id, register]);\n  return <TabPanel {...props} {...mergeStatefulStyles({\n    className: \"x9f619 xrgy624 x1hl8ikr x9v5kkp x1t137rt x1de99jn\"\n  }, props)} />;\n}\n\n/**\n * An optional box around the panels, which animates its height as one panel\n * gives way to the next. Without it the panels still work; the box around\n * them simply jumps from one height to the other.\n */\nfunction TabsPanels(props: TabsPanelsProps) {\n  return <RACTabPanels {...props} {...mergeStyles({\n    className: \"x12w9bfk x1t2j4n3 x9f619 xb3r6kr xioksi3 x1f55p5c x1seskgd\"\n  }, props)} />;\n}\nfunction TabsTab({\n  children,\n  render,\n  ...props\n}: TabsTabProps) {\n  const panels = useContext(PanelsContext);\n  const hasPanel = props.id !== undefined && panels.has(props.id);\n  return <Tab {...props} render={tabRenderer(hasPanel, render)} {...mergeStatefulStyles(tabStyles, props)}>\n      {tabContent(children)}\n    </Tab>;\n}\n\n// StyleX cannot target [data-selected] on the element it is styling, so the\n// active tab cannot be chosen in CSS. React Aria's answer is a className that\n// is a function of the tab's own state, the same mechanism Chip uses —\n// mergeStatefulStyles wraps this one so a tab still keeps a className the call\n// site passed.\nfunction tabStyles(state: TabRenderProps) {\n  return {\n    0: {\n      className: \"x6s0dn4 xsdox4t xc342km x9f619 x1ypdohk x78zum5 x1r8uery x1iyjqo2 xs83m0k xrgwony x12s497w x1szcwkt xl56j7k xo803ec xyl1r0q xeuugli xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn xt970qd x790zyz x1n2onr6 x1hl2dhg x1qno0dh xs2xxs2 xpc4ca7 x12vej0r x1p2om7n xjbqb8w x1w5n3ug\"\n    },\n    2: {\n      className: \"x6s0dn4 xsdox4t xc342km x9f619 x1ypdohk x78zum5 x1r8uery x1iyjqo2 xs83m0k xrgwony x12s497w x1szcwkt xl56j7k xo803ec xyl1r0q xeuugli xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn xt970qd x790zyz x1n2onr6 x1hl2dhg x1qno0dh xs2xxs2 xpc4ca7 x12vej0r x14dcer4 xjbqb8w x1mxwv8y\"\n    },\n    1: {\n      className: \"x6s0dn4 xsdox4t xc342km x9f619 x78zum5 x1r8uery x1iyjqo2 xs83m0k xrgwony x12s497w x1szcwkt xl56j7k xo803ec xyl1r0q xeuugli xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn xt970qd x790zyz x1n2onr6 x1hl2dhg x1qno0dh xs2xxs2 xpc4ca7 xjbqb8w x1xj74d8 x1h6gzvc\"\n    },\n    3: {\n      className: \"x6s0dn4 xsdox4t xc342km x9f619 x78zum5 x1r8uery x1iyjqo2 xs83m0k xrgwony x12s497w x1szcwkt xl56j7k xo803ec xyl1r0q xeuugli xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn xt970qd x790zyz x1n2onr6 x1hl2dhg x1qno0dh xs2xxs2 xpc4ca7 xjbqb8w x1xj74d8 x1h6gzvc\"\n    }\n  }[!!state.isSelected << 1 | !!state.isDisabled << 0];\n}\nTabs.List = TabsList;\nTabs.Panel = TabsPanel;\nTabs.Panels = TabsPanels;\nTabs.Tab = TabsTab;\ntype TabsListProps = TabListProps<object>;\ntype TabsPanelProps = TabPanelProps;\ntype TabsPanelsProps = Omit<TabPanelsProps<object>, 'children'> & {\n  children?: ReactNode;\n};\ntype TabsTabProps = TabProps;\nexport type { TabsListProps, TabsPanelProps, TabsPanelsProps, TabsProps, TabsTabProps };\nexport default Tabs;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ReactNode","Key","TabsProps","RACTabsProps","TabListProps","TabPanelProps","TabPanelsProps","TabProps","TabRenderProps","stylex","createContext","useCallback","useContext","useEffect","useState","SelectionIndicator","RACSelectionIndicator","TabPanels","RACTabPanels","Tabs","RACTabs","Tab","TabList","TabPanel","focus","mergeStatefulStyles","mergeStyles","colors","motion","radii","spacing","stateLayerOpacity","typography","styles","panel","kB7OPa","$$css","NO_PANELS","ReadonlySet","Set","PanelsContext","RegisterPanelContext","id","Omit","children","tabContent","state","defaultChildren","tabRenderer","hasPanel","render","NonNullable","domProps","adjusted","undefined","t0","$","_c","props","panels","setPanels","t1","Symbol","for","previous","has","next","add","previous_0","next_0","delete","register","t2","t3","TabsList","className","TabsPanel","ring","TabsPanels","TabsTab","T0","tabStyles","t4","isSelected","isDisabled","List","Panel","Panels","TabsListProps","TabsPanelProps","TabsPanelsProps","TabsTabProps"],"sources":["../../../src/components/tabs/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { Key, TabsProps as RACTabsProps, TabListProps, TabPanelProps, TabPanelsProps, TabProps, TabRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { createContext, useCallback, useContext, useEffect, useState } from 'react';\nimport { SelectionIndicator as RACSelectionIndicator, TabPanels as RACTabPanels, Tabs as RACTabs, Tab, TabList, TabPanel } from 'react-aria-components';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\n\n// The tabs page's primary tabs: a 48dp bar on the surface, divided into equal\n// sections, with a 1dp outline-variant divider inside the bar along its\n// bottom edge and, under the active tab's label, a 3dp primary indicator\n// rounded along its top. The indicator follows the label rather than the\n// tab, inset 2dp from the label's ends and never shorter than 24dp, which is\n// what the page draws.\n//\n// The indicator is React Aria's `SelectionIndicator`, which is a shared\n// element: it is rendered inside every tab but drawn in the selected one,\n// and on a change it keeps the old one until it has finished moving to the\n// new one's place. No `SharedElementTransition` is rendered here — `Tab`\n// scopes its own, and one added around the list changes nothing, which is\n// worth knowing because the primitive throws outside a scope when it is put\n// anywhere else.\n//\n// The label is wrapped in a span of its own so the indicator has the label's\n// width to follow: it is the span's `::after`, and the span is as tall as the\n// tab so the indicator reaches the bottom of the bar. Which tab carries it\n// comes from React Aria's render state rather than a selector, since StyleX\n// cannot target [data-selected] on the element it is styling.\nconst styles = {\n  panel: {\n    kB7OPa: \"x9f619\",\n    $$css: true\n  }\n};\nconst NO_PANELS: ReadonlySet<Key> = new Set();\n\n// Which panels are mounted, by id. React Aria points a selected tab's\n// `aria-controls` at the panel it would control whether or not one exists,\n// and a strip used on its own — tabs that filter the content below rather\n// than swapping a panel — then references an id nothing carries, which axe\n// reports as an invalid attribute value. Each panel registers itself here so\n// a tab can leave the attribute off when its panel is not there.\nconst PanelsContext = createContext<ReadonlySet<Key>>(NO_PANELS);\nconst RegisterPanelContext = createContext<(id: Key) => () => void>(() => () => {});\n\n// `children` is narrowed to nodes. React Aria also accepts a function there,\n// to hand the children the tabs' render state, and that form cannot be\n// wrapped in a context provider without calling it first — which would be\n// doing React Aria's job with none of its state. Nothing here needs it, so\n// the narrower type says so rather than leaving a signature that type-checks\n// and then fails to render.\ntype TabsProps = Omit<RACTabsProps, 'children'> & {\n  children?: ReactNode;\n};\n\n// The label, wrapped so the indicator has its width to follow. Built by a\n// call for the same reason as `tabRenderer` below; React Aria hands the\n// function the tab's state, and it is passed on when the children are a\n// function too.\nfunction tabContent(children: TabProps['children']) {\n  return (state: TabRenderProps & {\n    defaultChildren: ReactNode;\n  }) => <span className=\"x6s0dn4 x5yr21d x9f619 x3nfvp2 x1n2onr6\">\n      {typeof children === 'function' ? children(state) : children}\n      <RACSelectionIndicator className=\"x12w9bfk xnety89 xuoj239 x13dhofw xz4iguh x9f619 x17v02zk x1ey2m1c x17y0mx6 xvueqy4 xnei2rj x10l6tqk xioksi3 x1mxbss1 x1seskgd\" />\n    </span>;\n}\n\n// React Aria renders a tab with `href` as an anchor and any other as a div,\n// and expects a `render` function to return the same element it would have.\n// Built by a call rather than written inline at the prop, which is what\n// react-perf's no-new-function-as-prop is after; the React Compiler memoises\n// the result on its two inputs. See PanelsContext for why the attribute is\n// dropped.\nfunction tabRenderer(hasPanel: boolean, render: TabProps['render']): NonNullable<TabProps['render']> {\n  return (domProps, state) => {\n    const adjusted = hasPanel ? domProps : {\n      ...domProps,\n      'aria-controls': undefined\n    };\n    if (render !== undefined) {\n      return render(adjusted, state);\n    }\n    if ('href' in adjusted) {\n      // oxlint-disable-next-line jsx-a11y/anchor-has-content -- filled by React Aria\n      return <a {...adjusted} />;\n    }\n    return <div {...adjusted} />;\n  };\n}\n\n/**\n * A tab bar and its panels. Selection is React Aria's `selectedKey`: pass\n * it with `onSelectionChange` to control it, or `defaultSelectedKey` to let\n * it keep its own. Each `Tabs.Tab` names the `Tabs.Panel` it controls through\n * a shared `id`, and a strip may stand alone without panels.\n *\n * Composed rather than configured by props, because the number of tabs and\n * what each panel holds are the call site's to decide — the parts are\n * `Tabs.List`, `Tabs.Tab`, and `Tabs.Panel`.\n */\nfunction Tabs({\n  children,\n  ...props\n}: TabsProps) {\n  const [panels, setPanels] = useState<ReadonlySet<Key>>(NO_PANELS);\n  const register = useCallback((id: Key) => {\n    setPanels(previous => {\n      if (previous.has(id)) {\n        return previous;\n      }\n      const next = new Set(previous);\n      next.add(id);\n      return next;\n    });\n    return () => {\n      setPanels(previous => {\n        if (!previous.has(id)) {\n          return previous;\n        }\n        const next = new Set(previous);\n        next.delete(id);\n        return next;\n      });\n    };\n  }, []);\n  return <RACTabs {...props}>\n      <RegisterPanelContext value={register}>\n        <PanelsContext value={panels}>{children}</PanelsContext>\n      </RegisterPanelContext>\n    </RACTabs>;\n}\nfunction TabsList(props: TabsListProps) {\n  return <TabList {...props} {...mergeStatefulStyles({\n    className: \"xp05xdj x9f619 x78zum5\"\n  }, props)} />;\n}\nfunction TabsPanel(props: TabsPanelProps) {\n  const register = useContext(RegisterPanelContext);\n  const {\n    id\n  } = props;\n  useEffect(() => {\n    if (id === undefined) {\n      return undefined;\n    }\n    return register(id);\n  }, [id, register]);\n  return <TabPanel {...props} {...mergeStatefulStyles(stylex.props(styles.panel, focus.ring), props)} />;\n}\n\n/**\n * An optional box around the panels, which animates its height as one panel\n * gives way to the next. Without it the panels still work; the box around\n * them simply jumps from one height to the other.\n */\nfunction TabsPanels(props: TabsPanelsProps) {\n  return <RACTabPanels {...props} {...mergeStyles({\n    className: \"x12w9bfk x1t2j4n3 x9f619 xb3r6kr xioksi3 x1f55p5c x1seskgd\"\n  }, props)} />;\n}\nfunction TabsTab({\n  children,\n  render,\n  ...props\n}: TabsTabProps) {\n  const panels = useContext(PanelsContext);\n  const hasPanel = props.id !== undefined && panels.has(props.id);\n  return <Tab {...props} render={tabRenderer(hasPanel, render)} {...mergeStatefulStyles(tabStyles, props)}>\n      {tabContent(children)}\n    </Tab>;\n}\n\n// StyleX cannot target [data-selected] on the element it is styling, so the\n// active tab cannot be chosen in CSS. React Aria's answer is a className that\n// is a function of the tab's own state, the same mechanism Chip uses —\n// mergeStatefulStyles wraps this one so a tab still keeps a className the call\n// site passed.\nfunction tabStyles(state: TabRenderProps) {\n  return {\n    0: {\n      className: \"x6s0dn4 xsdox4t xc342km x9f619 x1ypdohk x78zum5 x1r8uery x1iyjqo2 xs83m0k xrgwony x12s497w x1szcwkt xl56j7k xo803ec xyl1r0q xeuugli xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn xt970qd x790zyz x1n2onr6 x1hl2dhg x1qno0dh xs2xxs2 xpc4ca7 x12vej0r x1p2om7n xjbqb8w x1w5n3ug\"\n    },\n    2: {\n      className: \"x6s0dn4 xsdox4t xc342km x9f619 x1ypdohk x78zum5 x1r8uery x1iyjqo2 xs83m0k xrgwony x12s497w x1szcwkt xl56j7k xo803ec xyl1r0q xeuugli xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn xt970qd x790zyz x1n2onr6 x1hl2dhg x1qno0dh xs2xxs2 xpc4ca7 x12vej0r x14dcer4 xjbqb8w x1mxwv8y\"\n    },\n    1: {\n      className: \"x6s0dn4 xsdox4t xc342km x9f619 x78zum5 x1r8uery x1iyjqo2 xs83m0k xrgwony x12s497w x1szcwkt xl56j7k xo803ec xyl1r0q xeuugli xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn xt970qd x790zyz x1n2onr6 x1hl2dhg x1qno0dh xs2xxs2 xpc4ca7 xjbqb8w x1xj74d8 x1h6gzvc\"\n    },\n    3: {\n      className: \"x6s0dn4 xsdox4t xc342km x9f619 x78zum5 x1r8uery x1iyjqo2 xs83m0k xrgwony x12s497w x1szcwkt xl56j7k xo803ec xyl1r0q xeuugli xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn xt970qd x790zyz x1n2onr6 x1hl2dhg x1qno0dh xs2xxs2 xpc4ca7 xjbqb8w x1xj74d8 x1h6gzvc\"\n    }\n  }[!!state.isSelected << 1 | !!state.isDisabled << 0];\n}\nTabs.List = TabsList;\nTabs.Panel = TabsPanel;\nTabs.Panels = TabsPanels;\nTabs.Tab = TabsTab;\ntype TabsListProps = TabListProps<object>;\ntype TabsPanelProps = TabPanelProps;\ntype TabsPanelsProps = Omit<TabPanelsProps<object>, 'children'> & {\n  children?: ReactNode;\n};\ntype TabsTabProps = TabProps;\nexport type { TabsListProps, TabsPanelProps, TabsPanelsProps, TabsProps, TabsTabProps };\nexport default Tabs;"],"mappings":"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"}

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

@@ -1,5 +1,6 @@
 import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { mergeStatefulStyles } from "../../styles/merge.js";
+import { focus } from "../../styles/focus.js";
 import { fieldStyles, invalidFrom } from "../../field/root.js";
 import { FieldBox, FieldMessage } from "../../field/index.js";
 import { chipStyles } from "../../chip/styles.js";
@@ -18,7 +19,7 @@ function isPopulated(value) {
 }
 function tokenContent(renderToken) {
 	return (segment) => /* @__PURE__ */ jsx(Token, {
-		...props(chipStyles.base, chipStyles.unselected, styles.token),
+		...props(chipStyles.base, focus.ring, chipStyles.unselected, styles.token),
 		children: renderToken === void 0 ? segment.text : renderToken(segment)
 	});
 }

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

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

package/dist/components/tree/index.js

@@ -1,6 +1,7 @@
 import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { mergeStatefulStyles, mergeStyles } from "../../styles/merge.js";
 import { ChevronEndGlyph } from "../../glyphs/index.js";
+import { focus } from "../../styles/focus.js";
 import ProgressIndicator from "../progress-indicator/index.js";
 import Checkbox from "../checkbox/index.js";
 import { rowStyles } from "../../row/styles.js";
@@ -11,12 +12,28 @@ import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Button, Tree, TreeHeader, TreeItem, TreeItemContent, TreeLoadMoreItem, TreeSection } from "react-aria-components";
 //#region src/components/tree/index.tsx
 const SelectLabelContext = createContext("Select");
-const styles = { indent: {
-	kZCmMZ: "x1187sqy",
-	$$css: true
-} };
+const styles = {
+	chevron: {
+		kGNEyG: "x6s0dn4",
+		kWkggS: "xjbqb8w",
+		kaIpWk: "x3y1ksm",
+		kMzoRj: "xc342km",
+		kB7OPa: "x9f619",
+		kMwMTN: "x1w5n3ug",
+		kkrTdU: "x1ypdohk",
+		k1xSpc: "x78zum5",
+		kmuXW: "x2lah0s",
+		kjj79g: "xl56j7k",
+		kmVPX3: "x1717udv",
+		$$css: true
+	},
+	indent: {
+		kZCmMZ: "x1187sqy",
+		$$css: true
+	}
+};
 function chevronClassName() {
-	return { className: "x6s0dn4 xjbqb8w x3y1ksm xc342km x9f619 x1w5n3ug x1ypdohk x78zum5 x2lah0s xl56j7k xrgy624 x1hl8ikr x9v5kkp x1t137rt x1de99jn x1717udv" }.className ?? "";
+	return props(styles.chevron, focus.ring).className ?? "";
 }
 function chevronFor(state) {
 	if (!state.hasChildItems) return /* @__PURE__ */ jsx("span", { className: "xxk0z11 x2lah0s xvy4d1p" });

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","TreeItemProps","RACTreeItemProps","TreeLoadMoreItemProps","RACTreeLoadMoreItemProps","TreeProps","RACTreeProps","TreeItemRenderProps","stylex","createContext","useContext","Button","RACButton","Tree","RACTree","TreeHeader","RACTreeHeader","TreeItem","RACTreeItem","TreeItemContent","RACTreeItemContent","TreeLoadMoreItem","RACTreeLoadMoreItem","TreeSection","RACTreeSection","ChevronEndGlyph","RowContent","rowStyles","mergeStatefulStyles","mergeStyles","colors","motion","radii","spacing","typography","Checkbox","ProgressIndicator","RACTreeSectionProps","Parameters","T","SelectLabelContext","styles","indent","kZCmMZ","$$css","TreeHeaderProps","children","Omit","TreeItemText","className","leading","style","supporting","trailing","headline","textValue","TreeLoadMoreProps","label","selectLabel","TreeSectionProps","header","chevronClassName","chevronFor","state","hasChildItems","isExpanded","itemContent","isDisabled","isSelected","leadingFor","itemStyles","props","base","list","interactive","undefined","twoLine","selectedList","disabled","selects","selectionBehavior","selectionMode","textValueFor","t0","$","_c","T0","T1","t1","t2","t3","t4","t5","TreeLoadMore","Item","LoadMore","Section"],"sources":["../../../src/components/tree/index.tsx"],"sourcesContent":["import type { ReactNode } 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 { ChevronEndGlyph } from '../../glyphs';\nimport { RowContent } from '../../row';\nimport { rowStyles } from '../../row/styles';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, spacing, typography } from '../../tokens/design.tokens.stylex';\nimport Checkbox from '../checkbox';\nimport ProgressIndicator from '../progress-indicator';\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.\nconst SelectLabelContext = createContext('Select');\nconst styles = {\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   * @default 'Loading more'\n   */\n  label?: string;\n};\ntype TreeProps<T extends object> = Omit<RACTreeProps<T>, 'className' | 'style'> & {\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   * @default 'Select'\n   */\n  selectLabel?: string;\n  /** A function may compute the style from the tree's render state. */\n  style?: RACTreeProps<T>['style'];\n};\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 {\n    className: \"x6s0dn4 xjbqb8w x3y1ksm xc342km x9f619 x1w5n3ug x1ypdohk x78zum5 x2lah0s xl56j7k xrgy624 x1hl8ikr x9v5kkp x1t137rt x1de99jn x1717udv\"\n  }.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: \"xxk0z11 xvy4d1p x19axjrm x1c071of xkzkux9 x11xpdln xpc4ca7\"\n      },\n      1: {\n        className: \"xxk0z11 xvy4d1p xkzkux9 x11xpdln xpc4ca7 x1y10d4b 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) {\n  return (state: TreeItemRenderProps): ReactNode => <RowContent isDisabled={state.isDisabled} isSelected={state.isSelected} leading={leadingFor(state, leading, selectLabel)} supporting={supporting} trailing={trailing}>\n      {headline}\n    </RowContent>;\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 it wins over both the\n// interactive and the selected branches, and StyleX replaces a property\n// whole, so it takes their hover states with it.\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.\nfunction itemStyles(supporting: ReactNode) {\n  return (state: TreeItemRenderProps) => stylex.props(rowStyles.base, rowStyles.list, rowStyles.interactive, styles.indent, supporting !== undefined && rowStyles.twoLine, state.isSelected && rowStyles.selectedList, state.isDisabled && rowStyles.disabled);\n}\n\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): 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 = 'Select',\n  ...props\n}: TreeProps<T>) {\n  return <SelectLabelContext value={selectLabel}>\n      <RACTree<T> {...props} {...mergeStatefulStyles({\n      className: \"x9f619 x78zum5 xdt5ytf x1t137rt x1cmllll\"\n    }, 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 className=\"x9f619 x1w5n3ug xrgwony x12s497w x1szcwkt xo803ec xyl1r0q xw3mh6e x1clyivc x790zyz\">{children}</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  supporting,\n  textValue,\n  trailing,\n  ...props\n}: TreeItemProps<T>) {\n  const selectLabel = useContext(SelectLabelContext);\n  return <RACTreeItem<T> textValue={textValueFor(textValue, headline)} {...props} {...mergeStatefulStyles(itemStyles(supporting), props)}>\n      <RACTreeItemContent>\n        {itemContent(headline, leading, supporting, trailing, selectLabel)}\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 = 'Loading more',\n  ...props\n}: TreeLoadMoreProps) {\n  return <RACTreeLoadMoreItem {...props} {...mergeStatefulStyles({\n    className: \"x6s0dn4 x9f619 x78zum5 xl56j7k xbktkl8\"\n  }, props)}>\n      <ProgressIndicator aria-label={label} isIndeterminate size=\"24px\" variant=\"circular\" />\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({\n    className: \"x9f619 x78zum5 xdt5ytf\"\n  }, props)}>\n      {header === undefined ? null : <TreeHeader>{header}</TreeHeader>}\n      {children}\n    </RACTreeSection>;\n}\nTree.Item = TreeItem;\nTree.LoadMore = TreeLoadMore;\nTree.Section = TreeSection;\nexport type { TreeHeaderProps, TreeItemProps, TreeLoadMoreProps, TreeProps, TreeSectionProps };\nexport default Tree;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ReactNode","TreeItemProps","RACTreeItemProps","TreeLoadMoreItemProps","RACTreeLoadMoreItemProps","TreeProps","RACTreeProps","TreeItemRenderProps","stylex","createContext","useContext","Button","RACButton","Tree","RACTree","TreeHeader","RACTreeHeader","TreeItem","RACTreeItem","TreeItemContent","RACTreeItemContent","TreeLoadMoreItem","RACTreeLoadMoreItem","TreeSection","RACTreeSection","ChevronEndGlyph","RowContent","rowStyles","focus","mergeStatefulStyles","mergeStyles","colors","motion","radii","spacing","typography","Checkbox","ProgressIndicator","RACTreeSectionProps","Parameters","T","SelectLabelContext","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","isDisabled","isSelected","leadingFor","itemStyles","base","list","interactive","undefined","twoLine","selectedList","disabled","selects","selectionBehavior","selectionMode","textValueFor","t0","$","_c","T0","T1","t1","t2","t3","t4","t5","TreeLoadMore","Item","LoadMore","Section"],"sources":["../../../src/components/tree/index.tsx"],"sourcesContent":["import type { ReactNode } 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 { ChevronEndGlyph } from '../../glyphs';\nimport { RowContent } from '../../row';\nimport { rowStyles } from '../../row/styles';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, spacing, typography } from '../../tokens/design.tokens.stylex';\nimport Checkbox from '../checkbox';\nimport ProgressIndicator from '../progress-indicator';\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.\nconst SelectLabelContext = createContext('Select');\nconst styles = {\n  chevron: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kaIpWk: \"x3y1ksm\",\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   * @default 'Loading more'\n   */\n  label?: string;\n};\ntype TreeProps<T extends object> = Omit<RACTreeProps<T>, 'className' | 'style'> & {\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   * @default 'Select'\n   */\n  selectLabel?: string;\n  /** A function may compute the style from the tree's render state. */\n  style?: RACTreeProps<T>['style'];\n};\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: \"xxk0z11 xvy4d1p x19axjrm x1c071of xkzkux9 x11xpdln xpc4ca7\"\n      },\n      1: {\n        className: \"xxk0z11 xvy4d1p xkzkux9 x11xpdln xpc4ca7 x1y10d4b 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) {\n  return (state: TreeItemRenderProps): ReactNode => <RowContent isDisabled={state.isDisabled} isSelected={state.isSelected} leading={leadingFor(state, leading, selectLabel)} supporting={supporting} trailing={trailing}>\n      {headline}\n    </RowContent>;\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 it wins over both the\n// interactive and the selected branches, and StyleX replaces a property\n// whole, so it takes their hover states with it.\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.\nfunction itemStyles(supporting: ReactNode) {\n  return (state: TreeItemRenderProps) => stylex.props(rowStyles.base, rowStyles.list, rowStyles.interactive, styles.indent, supporting !== undefined && rowStyles.twoLine, state.isSelected && rowStyles.selectedList, state.isDisabled && rowStyles.disabled);\n}\n\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): 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 = 'Select',\n  ...props\n}: TreeProps<T>) {\n  return <SelectLabelContext value={selectLabel}>\n      <RACTree<T> {...props} {...mergeStatefulStyles({\n      className: \"x9f619 x78zum5 xdt5ytf x1t137rt x1cmllll\"\n    }, 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 className=\"x9f619 x1w5n3ug xrgwony x12s497w x1szcwkt xo803ec xyl1r0q xw3mh6e x1clyivc x790zyz\">{children}</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  supporting,\n  textValue,\n  trailing,\n  ...props\n}: TreeItemProps<T>) {\n  const selectLabel = useContext(SelectLabelContext);\n  return <RACTreeItem<T> textValue={textValueFor(textValue, headline)} {...props} {...mergeStatefulStyles(itemStyles(supporting), props)}>\n      <RACTreeItemContent>\n        {itemContent(headline, leading, supporting, trailing, selectLabel)}\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 = 'Loading more',\n  ...props\n}: TreeLoadMoreProps) {\n  return <RACTreeLoadMoreItem {...props} {...mergeStatefulStyles({\n    className: \"x6s0dn4 x9f619 x78zum5 xl56j7k xbktkl8\"\n  }, props)}>\n      <ProgressIndicator aria-label={label} isIndeterminate size=\"24px\" variant=\"circular\" />\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({\n    className: \"x9f619 x78zum5 xdt5ytf\"\n  }, props)}>\n      {header === undefined ? null : <TreeHeader>{header}</TreeHeader>}\n      {children}\n    </RACTreeSection>;\n}\nTree.Item = TreeItem;\nTree.LoadMore = TreeLoadMore;\nTree.Section = TreeSection;\nexport type { TreeHeaderProps, TreeItemProps, TreeLoadMoreProps, TreeProps, TreeSectionProps };\nexport default Tree;"],"mappings":";;;;;;;;;;;;;AAyDA,MAAMyC,qBAAqBhC,cAAc,QAAQ;AACjD,MAAMiC,SAAS;CACbC,SAAS;EACPC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;EACPC,QAAQ;EACRC,QAAQ;EACRC,OAAO;CACT;CACAC,QAAQ;EACNC,QAAQ;EACRF,OAAO;CACT;AACF;AAwEA,SAASmB,mBAAmB;CAC1B,OAAOlE,MAAakC,OAAOC,SAASf,MAAMgD,IAAI,CAAC,CAACd,aAAa;AAC/D;AASA,SAASe,WAAWC,OAAuC;CACzD,IAAI,CAACA,MAAMC,eACT,OAAO,oBAAC,QAAD,EAAM,WAAU,0BAAyB,CAAA;CAElD,OAAO,oBAAC,QAAD;EAAW,WAAWL;EAAkB,MAAK;EAChD,UAAA,oBAAC,iBAAD,EAAiB,GAAI;GACrB,GAAG,EACDZ,WAAW,6DACb;GACA,GAAG,EACDA,WAAW,6DACb;EACF,EAAE,CAAC,CAACgB,MAAME,cAAc,GAAG,CAAA;CAChB,CAAA;AACf;AAKA,SAASC,YAAYd,UAAqBJ,SAAoBE,YAAuBC,UAAqBK,aAAqB;CAC7H,QAAQO,UAA0C,oBAAC,YAAD;EAAY,YAAYA,MAAMI;EAAY,YAAYJ,MAAMK;EAAY,SAASC,WAAWN,OAAOf,SAASQ,WAAW;EAAeN;EAAsBC;EACzMC,UAAAA;CACS,CAAA;AAChB;AAcA,SAASkB,WAAWpB,YAAuB;CACzC,QAAQa,UAA+BtE,MAAamB,UAAU2D,MAAM3D,UAAU4D,MAAM5D,UAAU6D,aAAa9C,OAAOc,QAAQS,eAAewB,KAAAA,KAAa9D,UAAU+D,SAASZ,MAAMK,cAAcxD,UAAUgE,cAAcb,MAAMI,cAAcvD,UAAUiE,QAAQ;AAC7P;;;;;;;AAQA,SAASR,WAAWN,OAA4Bf,SAAoBQ,aAAgC;CAClG,MAAMsB,UAAUf,MAAMgB,sBAAsB,YAAYhB,MAAMiB,kBAAkB;CAChF,OAAO,qBAAA,YAAA,EAAA,UAAA;EACFlB,WAAWC,KAAK;EAChBe,UAAU,oBAAC,UAAD;GAAU,cAAYtB;GAAa,MAAK;EAAW,CAAA,IAAM;EACnER;CACH,EAAA,CAAA;AACJ;AAMA,SAASiC,aAAa5B,WAA+BD,UAAqB;CACxE,IAAIC,cAAcqB,KAAAA,GAChB,OAAOrB;CAET,OAAO,OAAOD,aAAa,WAAWA,WAAW;AACnD;;;;;;;;;;;;;;;;;;;;;;AAuBA,SAAAtD,OAAAoF,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAN,EAAA,OAAAD,IAAA;EAAgC,MAAA,EAAA1B,aAAAkC,IAAA,GAAA9B,UAAAsB;EAC9B,MAAA1B,cAAAkC,OAAAhB,KAAAA,IAAA,WAAAgB;EAGQJ,KAAA5D;EAA0B8B,KAAAA;EAC7B6B,KAAAtF;EAAe6D,KAAAA;EAAW4B,KAAA1E,oBAAoB,EAAAiC,WACpC,2CACb,GAAGa,KAAK;EAACuB,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;EAAAL,EAAA,KAAAM;CAAA,OAAA;EAAAJ,KAAAF,EAAA;EAAAG,KAAAH,EAAA;EAAAI,KAAAJ,EAAA;EAAAK,KAAAL,EAAA;EAAAM,KAAAN,EAAA;CAAA;CAAA,IAAAO;CAAA,IAAAP,EAAA,OAAAE,MAAAF,EAAA,OAAAI,MAAAJ,EAAA,OAAAK,IAAA;EAFPE,KAAA,oBAAC,IAAD;GAAQ,GAAQ9B;GAAK,GAAM4B;EAEpB,CAAA;EAAIL,EAAA,KAAAE;EAAAF,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;EAAAL,EAAA,KAAAO;CAAA,OAAAA,KAAAP,EAAA;CAAA,IAAAQ;CAAA,IAAAR,EAAA,QAAAG,MAAAH,EAAA,QAAAM,MAAAN,EAAA,QAAAO,IAAA;EAHRC,KAAA,oBAAC,IAAD;GAA2BnC,OAAAA;GAC9BkC,UAAAA;EADsB,CAAA;EAIHP,EAAA,MAAAG;EAAAH,EAAA,MAAAM;EAAAN,EAAA,MAAAO;EAAAP,EAAA,MAAAQ;CAAA,OAAAA,KAAAR,EAAA;CAAA,OAJhBQ;AAIgB;;;;;AAOzB,SAAA3F,aAAAkF,IAAA;CAAA,MAAAC,IAAAC,EAAA,CAAA;CAAoB,MAAA,EAAAxC,aAAAsC;CAEF,IAAAK;CAAA,IAAAJ,EAAA,OAAAvC,UAAA;EACT2C,KAAA,oBAAC,YAAD;GAAyB,WAAA;GAAsF3C;EAAjG,CAAA;EAA0HuC,EAAA,KAAAvC;EAAAuC,EAAA,KAAAI;CAAA,OAAAA,KAAAJ,EAAA;CAAA,OAAxII;AAAwI;;;;;;;;;;AAYjJ,SAAArF,WAAAgF,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAA6C,MAAA,EAAAxC,UAAAQ,UAAAJ,SAAAE,YAAAG,WAAAF,UAAA,GAAAS,UAAAsB;CAS3C,MAAA1B,cAAoB7D,WAAW+B,kBAAkB;CACzC,MAAA2D,KAAAlF;CAAW,IAAAoF;CAAA,IAAAJ,EAAA,OAAA/B,YAAA+B,EAAA,OAAA9B,WAAA;EAAekC,KAAAN,aAAa5B,WAAWD,QAAQ;EAAC+B,EAAA,KAAA/B;EAAA+B,EAAA,KAAA9B;EAAA8B,EAAA,KAAAI;CAAA,OAAAA,KAAAJ,EAAA;CAAiB,MAAAK,KAAA1E,oBAAoBwD,WAAWpB,UAAU,GAAGU,KAAK;CAAC,IAAA6B;CAAA,IAAAN,EAAA,OAAA/B,YAAA+B,EAAA,OAAAnC,WAAAmC,EAAA,OAAA3B,eAAA2B,EAAA,OAAAjC,cAAAiC,EAAA,OAAAhC,UAAA;EAE/HsC,KAAAvB,YAAYd,UAAUJ,SAASE,YAAYC,UAAUK,WAAW;EAAC2B,EAAA,KAAA/B;EAAA+B,EAAA,KAAAnC;EAAAmC,EAAA,KAAA3B;EAAA2B,EAAA,KAAAjC;EAAAiC,EAAA,KAAAhC;EAAAgC,EAAA,KAAAM;CAAA,OAAAA,KAAAN,EAAA;CAAA,IAAAO;CAAA,IAAAP,EAAA,OAAAM,IAAA;EADpEC,KAAA,oBAAC,iBAAD,EAAA,UACGD,GADgB,CAAA;EAEEN,EAAA,KAAAM;EAAAN,EAAA,MAAAO;CAAA,OAAAA,KAAAP,EAAA;CAAA,IAAAQ;CAAA,IAAAR,EAAA,QAAAE,MAAAF,EAAA,QAAAvC,YAAAuC,EAAA,QAAAvB,SAAAuB,EAAA,QAAAI,MAAAJ,EAAA,QAAAK,MAAAL,EAAA,QAAAO,IAAA;EAHlBC,KAAA,qBAAC,IAAD;GAA2B,WAAAJ;GAAiC,GAAM3B;GAAK,GAAM4B;GAA7E,UAAA,CACHE,IAGC9C,QAJc;;EAKHuC,EAAA,MAAAE;EAAAF,EAAA,MAAAvC;EAAAuC,EAAA,MAAAvB;EAAAuB,EAAA,MAAAI;EAAAJ,EAAA,MAAAK;EAAAL,EAAA,MAAAO;EAAAP,EAAA,MAAAQ;CAAA,OAAAA,KAAAR,EAAA;CAAA,OALTQ;AAKS;;;;;;AAQlB,SAAAC,aAAAV,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAA9B;CAAA,IAAAgC;CAAA,IAAAC;CAAA,IAAAL,EAAA,OAAAD,IAAA;EAAsB,MAAA,EAAA3B,OAAAkC,IAAA,GAAA7B,UAAAsB;EACpB3B,QAAAkC,OAAAf,KAAAA,IAAA,iBAAAe;EAGQJ,KAAA9E;EAAwBqD,KAAAA;EAAW4B,KAAA1E,oBAAoB,EAAAiC,WAClD,yCACb,GAAGa,KAAK;EAACuB,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,KAAA5B;EAAA4B,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;CAAA,OAAA;EAAAH,KAAAF,EAAA;EAAA5B,QAAA4B,EAAA;EAAAI,KAAAJ,EAAA;EAAAK,KAAAL,EAAA;CAAA;CAAA,IAAAM;CAAA,IAAAN,EAAA,OAAA5B,OAAA;EACLkC,KAAA,oBAAC,mBAAD;GAA+BlC,cAAAA;GAAO,iBAAA;GAAqB,MAAA;GAAe,SAAA;EAAU,CAAA;EAAG4B,EAAA,KAAA5B;EAAA4B,EAAA,KAAAM;CAAA,OAAAA,KAAAN,EAAA;CAAA,IAAAO;CAAA,IAAAP,EAAA,OAAAE,MAAAF,EAAA,OAAAI,MAAAJ,EAAA,OAAAK,MAAAL,EAAA,QAAAM,IAAA;EAHpFC,KAAA,oBAAC,IAAD;GAAoB,GAAK9B;GAAK,GAAM4B;GAGvCC,UAAAA;EAHuB,CAAA;EAIHN,EAAA,KAAAE;EAAAF,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;EAAAL,EAAA,MAAAM;EAAAN,EAAA,MAAAO;CAAA,OAAAA,KAAAP,EAAA;CAAA,OAJjBO;AAIiB;;;;AAM1B,SAAAlF,cAAA0E,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAAzC;CAAA,IAAAc;CAAA,IAAA6B;CAAA,IAAAC;CAAA,IAAAL,EAAA,OAAAD,IAAA;EAAgD,MAAA,EAAAtC,UAAA6C,IAAA/B,QAAAgC,IAAA,GAAA9B,UAAAsB;EAAAtC,WAAA6C;EAAA/B,SAAAgC;EAKtCL,KAAA5E;EAAsBmD,KAAAA;EAAW4B,KAAAzE,YAAY,EAAAgC,WACxC,yBACb,GAAGa,KAAK;EAACuB,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,KAAAvC;EAAAuC,EAAA,KAAAzB;EAAAyB,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;CAAA,OAAA;EAAAH,KAAAF,EAAA;EAAAvC,WAAAuC,EAAA;EAAAzB,SAAAyB,EAAA;EAAAI,KAAAJ,EAAA;EAAAK,KAAAL,EAAA;CAAA;CAAA,IAAAM;CAAA,IAAAN,EAAA,OAAAzB,QAAA;EACJ+B,KAAA/B,WAAWgB,KAAAA,IAAX,OAA8B,oBAAC,cAAD,EAAA,UAAahB,OAAF,CAAA;EAAsByB,EAAA,KAAAzB;EAAAyB,EAAA,KAAAM;CAAA,OAAAA,KAAAN,EAAA;CAAA,IAAAO;CAAA,IAAAP,EAAA,OAAAE,MAAAF,EAAA,OAAAvC,YAAAuC,EAAA,QAAAI,MAAAJ,EAAA,QAAAK,MAAAL,EAAA,QAAAM,IAAA;EAH7DC,KAAA,qBAAC,IAAD;GAAe,GAAQ9B;GAAK,GAAM4B;GAAlC,UAAA,CAGFC,IACA7C,QAJiB;;EAKHuC,EAAA,KAAAE;EAAAF,EAAA,KAAAvC;EAAAuC,EAAA,MAAAI;EAAAJ,EAAA,MAAAK;EAAAL,EAAA,MAAAM;EAAAN,EAAA,MAAAO;CAAA,OAAAA,KAAAP,EAAA;CAAA,OALZO;AAKY;AAErB5F,OAAK+F,OAAO3F;AACZJ,OAAKgG,WAAWF;AAChB9F,OAAKiG,UAAUvF"}

package/dist/styles/focus.js

@@ -0,0 +1,21 @@
+//#region src/styles/focus.ts
+const focus = {
+	ring: {
+		kjBf7l: "xrgy624",
+		kInvED: "x1hl8ikr",
+		k3XXqK: "x9v5kkp x1t137rt",
+		kMeerF: "x1de99jn",
+		$$css: true
+	},
+	ringVisible: {
+		kjBf7l: "xrgy624",
+		kInvED: "x1hl8ikr",
+		k3XXqK: "xaatb59",
+		kMeerF: "x1de99jn",
+		$$css: true
+	}
+};
+//#endregion
+export { focus };
+
+//# sourceMappingURL=focus.js.map

package/dist/styles/focus.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"focus.js","names":["stylex","colors","focus","ring","kjBf7l","kInvED","k3XXqK","kMeerF","$$css","ringVisible"],"sources":["../../src/styles/focus.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport '../tokens/design.tokens.stylex';\nimport { colors } from '../tokens/design.tokens.stylex';\n\n// The focus ring, drawn once. Eighteen components spelled the same four\n// declarations out, which made a change to the ring eighteen edits with\n// nothing failing if one were missed.\n//\n// Only these two forms are shared, and the difference is who decides the\n// element has focus. `ring` lets the browser decide, through\n// `:focus-visible`, which is what a natively focusable element wants.\n// `ringVisible` is always solid, for a component that computes focus from\n// React Aria's render state and applies this style only when that state says\n// so — a checkbox, radio or switch, where the ring belongs on the drawn\n// control rather than on the input that actually holds focus.\n//\n// What deliberately stays with its component is every ring that differs, and\n// each of those already carries a comment saying why:\n//\n// - A different colour, because the surface underneath is not the default\n//   one: Snackbar's action and close, and Chip's remove.\n// - A negative offset, drawing the ring inside the element rather than\n//   around it: DropZone, NumberField, Table, a Tab, and the shared row.\n// - An offset of its own, sized to what the ring surrounds: the colour\n//   thumb at 4px, the swatch at 6px, Chip's remove at 1px.\n// - A base of `outlineStyle: 'none'` that a separate style turns solid,\n//   which is a different mechanism rather than a different value: the slider\n//   thumb, the colour swatch picker, and the shared colour styles.\nconst focus = {\n  ring: {\n    kjBf7l: \"xrgy624\",\n    kInvED: \"x1hl8ikr\",\n    k3XXqK: \"x9v5kkp x1t137rt\",\n    kMeerF: \"x1de99jn\",\n    $$css: true\n  },\n  ringVisible: {\n    kjBf7l: \"xrgy624\",\n    kInvED: \"x1hl8ikr\",\n    k3XXqK: \"xaatb59\",\n    kMeerF: \"x1de99jn\",\n    $$css: true\n  }\n};\nexport { focus };"],"mappings":";AA4BA,MAAME,QAAQ;CACZC,MAAM;EACJC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;CACT;CACAC,aAAa;EACXL,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;CACT;AACF"}

package/dist/styles/overlay.js

@@ -41,10 +41,6 @@ const overlay = {
 		k1xSpc: "x78zum5",
 		kXwgrk: "xdt5ytf",
 		kOIVth: "x126z3so",
-		kjBf7l: "xrgy624",
-		kInvED: "x1hl8ikr",
-		k3XXqK: "x9v5kkp x1t137rt",
-		kMeerF: "x1de99jn",
 		$$css: true
 	},
 	scrim: {

package/dist/styles/overlay.js.map

@@ -1 +1 @@
-{"version":3,"file":"overlay.js","names":["PopoverRenderProps","stylex","colors","motion","radii","shadows","spacing","fadeIn","scaleIn","overlay","fromBottom","k3nNDw","$$css","fromLeft","fromRight","fromTop","modalDialog","kZKoxP","kB7OPa","k1xSpc","kXwgrk","k3XXqK","popup","k44tkh","kKVMdj","kyAemX","kWkggS","kaIpWk","kGVxlE","kMwMTN","kORKVm","popupDialog","kOIVth","kjBf7l","kInvED","kMeerF","scrim","kpwlN0","kVAEAm","origins","bottom","center","left","right","top","OverlayAlign","OverlaySide","placementOf","side","align","const","popupOrigin","placement"],"sources":["../../src/styles/overlay.ts"],"sourcesContent":["import type { PopoverRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport '../tokens/design.tokens.stylex';\nimport { colors, motion, radii, shadows, spacing } from '../tokens/design.tokens.stylex';\n\n// What every overlay shares, drawn once. Popover's anchored surface and its\n// entry, Sheet's scrim, and the element that carries the dialog role inside\n// each of them; the coverage plan brings a dozen more overlays — Menu, Select,\n// ComboBox, Tooltip, the date pickers, Dialog — and each would otherwise have\n// written the same surface and the same scrim a second time. Geometry stays\n// with the component: how wide a popover is, which edge a sheet is pinned to,\n// where a dialog sits, are each overlay's own decision.\n//\n// Every one of these is portalled to the end of the body, which is why each\n// component takes a `container` prop and documents the same caveat: an app\n// that scopes its StyleX theme to a subtree has to point the portal inside it,\n// or the surface renders outside the theme and falls back to the tokens'\n// `prefers-color-scheme` default.\n//\n// Entry only, and no exit animation, for the same reason in every overlay:\n// React Aria keeps a closing surface mounted only while an animation is\n// running on it, and a popover in particular is dismissed far more often than\n// it is closed deliberately — usually by pressing something else, where a\n// lingering surface is in the way of whatever the press was for.\n\n// The scrim settles before the panel it sits behind arrives: shorter than\n// any panel's entry, so the two do not finish together.\nconst fadeIn = \"x18re5ia-B\";\n\n// An anchored surface grows from the edge it is anchored by rather than from\n// its own centre, which is what makes it read as coming out of the trigger.\n// The origin is a separate style, chosen from the placement React Aria\n// reports, so the same keyframes serve all four sides.\nconst scaleIn = \"x1k48ry3-B\";\nconst overlay = {\n  fromBottom: {\n    k3nNDw: \"x18ouj0k\",\n    $$css: true\n  },\n  fromLeft: {\n    k3nNDw: \"x1nf803f\",\n    $$css: true\n  },\n  fromRight: {\n    k3nNDw: \"xyibjs4\",\n    $$css: true\n  },\n  fromTop: {\n    k3nNDw: \"x1dp6rp6\",\n    $$css: true\n  },\n  modalDialog: {\n    kZKoxP: \"x5yr21d\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kXwgrk: \"xdt5ytf\",\n    k3XXqK: \"x1t137rt\",\n    $$css: true\n  },\n  popup: {\n    k44tkh: \"xvhm28k\",\n    kKVMdj: \"x97zbip\",\n    kyAemX: \"x16dv9tl\",\n    kWkggS: \"x1mjdul6\",\n    kaIpWk: \"x62ce2h\",\n    kGVxlE: \"x1os83gw\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x139gbkf\",\n    kORKVm: \"x1odjw0f\",\n    $$css: true\n  },\n  popupDialog: {\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kXwgrk: \"xdt5ytf\",\n    kOIVth: \"x126z3so\",\n    kjBf7l: \"xrgy624\",\n    kInvED: \"x1hl8ikr\",\n    k3XXqK: \"x9v5kkp x1t137rt\",\n    kMeerF: \"x1de99jn\",\n    $$css: true\n  },\n  scrim: {\n    k44tkh: \"x1vhuh8u\",\n    kKVMdj: \"xqcmdr3\",\n    kyAemX: \"x1yujl0p\",\n    kWkggS: \"x1iqbvzf\",\n    kpwlN0: \"x10a8y8t\",\n    kVAEAm: \"xixxii4\",\n    $$css: true\n  }\n};\n\n// Which side the surface opened on, and the origin its entry grows from.\n// Keyed on the placement React Aria reports rather than the one asked for,\n// since the surface flips to the opposite side when there is no room on its\n// own; `center` is the placement React Aria reports for an anchor it could\n// not place beside, and grows from the top like the default.\nconst origins = {\n  bottom: overlay.fromTop,\n  center: overlay.fromTop,\n  left: overlay.fromRight,\n  right: overlay.fromLeft,\n  top: overlay.fromBottom\n};\n\n/** Where along that side it lines up with the anchor. */\ntype OverlayAlign = 'center' | 'end' | 'start';\n\n/** Which side of the anchor a surface opens on. */\ntype OverlaySide = 'bottom' | 'left' | 'right' | 'top';\n\n/**\n * React Aria's placement, from the side and the alignment a call site names.\n * Its own vocabulary pairs a side with `top`/`bottom` on the inline sides and\n * `start`/`end` on the block ones; a call site should not have to know which\n * of the two it is asking for, so this maps one onto the other.\n *\n * Shared by every anchored overlay rather than kept in one, since which side\n * a surface opens on is the same question for a popover and a menu.\n */\nfunction placementOf(side: OverlaySide, align: OverlayAlign) {\n  if (align === 'center') {\n    return side;\n  }\n  if (side === 'top' || side === 'bottom') {\n    return `${side} ${align}` as const;\n  }\n  return `${side} ${align === 'start' ? 'top' : 'bottom'}` as const;\n}\n\n/**\n * The origin an anchored surface grows from, for the placement React Aria\n * reports through its render state. `null`, before the surface has been\n * placed, grows from the top as `bottom` does.\n */\nfunction popupOrigin(placement: PopoverRenderProps['placement']) {\n  return origins[placement ?? 'bottom'];\n}\nexport type { OverlayAlign, OverlaySide };\nexport { overlay, placementOf, popupOrigin };"],"mappings":";AAkCA,MAAMS,UAAU;CACdC,YAAY;EACVC,QAAQ;EACRC,OAAO;CACT;CACAC,UAAU;EACRF,QAAQ;EACRC,OAAO;CACT;CACAE,WAAW;EACTH,QAAQ;EACRC,OAAO;CACT;CACAG,SAAS;EACPJ,QAAQ;EACRC,OAAO;CACT;CACAI,aAAa;EACXC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRT,OAAO;CACT;CACAU,OAAO;EACLC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRV,QAAQ;EACRW,QAAQ;EACRC,QAAQ;EACRlB,OAAO;CACT;CACAmB,aAAa;EACXb,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRY,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRb,QAAQ;EACRc,QAAQ;EACRvB,OAAO;CACT;CACAwB,OAAO;EACLb,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRW,QAAQ;EACRC,QAAQ;EACR1B,OAAO;CACT;AACF;AAOA,MAAM2B,UAAU;CACdC,QAAQ/B,QAAQM;CAChB0B,QAAQhC,QAAQM;CAChB2B,MAAMjC,QAAQK;CACd6B,OAAOlC,QAAQI;CACf+B,KAAKnC,QAAQC;AACf;;;;;;;;;;AAiBA,SAASqC,YAAYC,MAAmBC,OAAqB;CAC3D,IAAIA,UAAU,UACZ,OAAOD;CAET,IAAIA,SAAS,SAASA,SAAS,UAC7B,OAAO,GAAGA,KAAI,GAAIC;CAEpB,OAAO,GAAGD,KAAI,GAAIC,UAAU,UAAU,QAAQ;AAChD;;;;;;AAOA,SAASE,YAAYC,WAA4C;CAC/D,OAAOb,QAAQa,aAAa;AAC9B"}
+{"version":3,"file":"overlay.js","names":["PopoverRenderProps","stylex","colors","motion","radii","shadows","spacing","fadeIn","scaleIn","overlay","fromBottom","k3nNDw","$$css","fromLeft","fromRight","fromTop","modalDialog","kZKoxP","kB7OPa","k1xSpc","kXwgrk","k3XXqK","popup","k44tkh","kKVMdj","kyAemX","kWkggS","kaIpWk","kGVxlE","kMwMTN","kORKVm","popupDialog","kOIVth","scrim","kpwlN0","kVAEAm","origins","bottom","center","left","right","top","OverlayAlign","OverlaySide","placementOf","side","align","const","popupOrigin","placement"],"sources":["../../src/styles/overlay.ts"],"sourcesContent":["import type { PopoverRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport '../tokens/design.tokens.stylex';\nimport { colors, motion, radii, shadows, spacing } from '../tokens/design.tokens.stylex';\n\n// What every overlay shares, drawn once. Popover's anchored surface and its\n// entry, Sheet's scrim, and the element that carries the dialog role inside\n// each of them; the coverage plan brings a dozen more overlays — Menu, Select,\n// ComboBox, Tooltip, the date pickers, Dialog — and each would otherwise have\n// written the same surface and the same scrim a second time. Geometry stays\n// with the component: how wide a popover is, which edge a sheet is pinned to,\n// where a dialog sits, are each overlay's own decision.\n//\n// Every one of these is portalled to the end of the body, which is why each\n// component takes a `container` prop and documents the same caveat: an app\n// that scopes its StyleX theme to a subtree has to point the portal inside it,\n// or the surface renders outside the theme and falls back to the tokens'\n// `prefers-color-scheme` default.\n//\n// Entry only, and no exit animation, for the same reason in every overlay:\n// React Aria keeps a closing surface mounted only while an animation is\n// running on it, and a popover in particular is dismissed far more often than\n// it is closed deliberately — usually by pressing something else, where a\n// lingering surface is in the way of whatever the press was for.\n\n// The scrim settles before the panel it sits behind arrives: shorter than\n// any panel's entry, so the two do not finish together.\nconst fadeIn = \"x18re5ia-B\";\n\n// An anchored surface grows from the edge it is anchored by rather than from\n// its own centre, which is what makes it read as coming out of the trigger.\n// The origin is a separate style, chosen from the placement React Aria\n// reports, so the same keyframes serve all four sides.\nconst scaleIn = \"x1k48ry3-B\";\nconst overlay = {\n  fromBottom: {\n    k3nNDw: \"x18ouj0k\",\n    $$css: true\n  },\n  fromLeft: {\n    k3nNDw: \"x1nf803f\",\n    $$css: true\n  },\n  fromRight: {\n    k3nNDw: \"xyibjs4\",\n    $$css: true\n  },\n  fromTop: {\n    k3nNDw: \"x1dp6rp6\",\n    $$css: true\n  },\n  modalDialog: {\n    kZKoxP: \"x5yr21d\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kXwgrk: \"xdt5ytf\",\n    k3XXqK: \"x1t137rt\",\n    $$css: true\n  },\n  popup: {\n    k44tkh: \"xvhm28k\",\n    kKVMdj: \"x97zbip\",\n    kyAemX: \"x16dv9tl\",\n    kWkggS: \"x1mjdul6\",\n    kaIpWk: \"x62ce2h\",\n    kGVxlE: \"x1os83gw\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x139gbkf\",\n    kORKVm: \"x1odjw0f\",\n    $$css: true\n  },\n  popupDialog: {\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kXwgrk: \"xdt5ytf\",\n    kOIVth: \"x126z3so\",\n    $$css: true\n  },\n  scrim: {\n    k44tkh: \"x1vhuh8u\",\n    kKVMdj: \"xqcmdr3\",\n    kyAemX: \"x1yujl0p\",\n    kWkggS: \"x1iqbvzf\",\n    kpwlN0: \"x10a8y8t\",\n    kVAEAm: \"xixxii4\",\n    $$css: true\n  }\n};\n\n// Which side the surface opened on, and the origin its entry grows from.\n// Keyed on the placement React Aria reports rather than the one asked for,\n// since the surface flips to the opposite side when there is no room on its\n// own; `center` is the placement React Aria reports for an anchor it could\n// not place beside, and grows from the top like the default.\nconst origins = {\n  bottom: overlay.fromTop,\n  center: overlay.fromTop,\n  left: overlay.fromRight,\n  right: overlay.fromLeft,\n  top: overlay.fromBottom\n};\n\n/** Where along that side it lines up with the anchor. */\ntype OverlayAlign = 'center' | 'end' | 'start';\n\n/** Which side of the anchor a surface opens on. */\ntype OverlaySide = 'bottom' | 'left' | 'right' | 'top';\n\n/**\n * React Aria's placement, from the side and the alignment a call site names.\n * Its own vocabulary pairs a side with `top`/`bottom` on the inline sides and\n * `start`/`end` on the block ones; a call site should not have to know which\n * of the two it is asking for, so this maps one onto the other.\n *\n * Shared by every anchored overlay rather than kept in one, since which side\n * a surface opens on is the same question for a popover and a menu.\n */\nfunction placementOf(side: OverlaySide, align: OverlayAlign) {\n  if (align === 'center') {\n    return side;\n  }\n  if (side === 'top' || side === 'bottom') {\n    return `${side} ${align}` as const;\n  }\n  return `${side} ${align === 'start' ? 'top' : 'bottom'}` as const;\n}\n\n/**\n * The origin an anchored surface grows from, for the placement React Aria\n * reports through its render state. `null`, before the surface has been\n * placed, grows from the top as `bottom` does.\n */\nfunction popupOrigin(placement: PopoverRenderProps['placement']) {\n  return origins[placement ?? 'bottom'];\n}\nexport type { OverlayAlign, OverlaySide };\nexport { overlay, placementOf, popupOrigin };"],"mappings":";AAkCA,MAAMS,UAAU;CACdC,YAAY;EACVC,QAAQ;EACRC,OAAO;CACT;CACAC,UAAU;EACRF,QAAQ;EACRC,OAAO;CACT;CACAE,WAAW;EACTH,QAAQ;EACRC,OAAO;CACT;CACAG,SAAS;EACPJ,QAAQ;EACRC,OAAO;CACT;CACAI,aAAa;EACXC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRT,OAAO;CACT;CACAU,OAAO;EACLC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRV,QAAQ;EACRW,QAAQ;EACRC,QAAQ;EACRlB,OAAO;CACT;CACAmB,aAAa;EACXb,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRY,QAAQ;EACRpB,OAAO;CACT;CACAqB,OAAO;EACLV,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRQ,QAAQ;EACRC,QAAQ;EACRvB,OAAO;CACT;AACF;AAOA,MAAMwB,UAAU;CACdC,QAAQ5B,QAAQM;CAChBuB,QAAQ7B,QAAQM;CAChBwB,MAAM9B,QAAQK;CACd0B,OAAO/B,QAAQI;CACf4B,KAAKhC,QAAQC;AACf;;;;;;;;;;AAiBA,SAASkC,YAAYC,MAAmBC,OAAqB;CAC3D,IAAIA,UAAU,UACZ,OAAOD;CAET,IAAIA,SAAS,SAASA,SAAS,UAC7B,OAAO,GAAGA,KAAI,GAAIC;CAEpB,OAAO,GAAGD,KAAI,GAAIC,UAAU,UAAU,QAAQ;AAChD;;;;;;AAOA,SAASE,YAAYC,WAA4C;CAC/D,OAAOb,QAAQa,aAAa;AAC9B"}

package/dist/styles/picker.js

@@ -1,3 +1,5 @@
+import { props } from "../node_modules/@stylexjs/stylex/lib/es/stylex.js";
+import { focus } from "./focus.js";
 //#region src/styles/picker.ts
 const picker = {
 	group: {
@@ -30,10 +32,6 @@ const picker = {
 		kmuXW: "x2lah0s",
 		kzqmXN: "x100vrsf",
 		kjj79g: "xl56j7k",
-		kjBf7l: "xrgy624",
-		kInvED: "x1hl8ikr",
-		k3XXqK: "x9v5kkp x1t137rt",
-		kMeerF: "x1de99jn",
 		kmVPX3: "x1717udv",
 		$$css: true
 	},
@@ -50,10 +48,7 @@ const picker = {
 	}
 };
 function triggerClassName(state) {
-	return {
-		0: { className: "x6s0dn4 x1dg9itu x1728qcm xjbqb8w x1vqgdyp x3y1ksm xc342km x9f619 x1w5n3ug x1ypdohk x78zum5 x2lah0s x100vrsf xl56j7k xrgy624 x1hl8ikr x9v5kkp x1t137rt x1de99jn x1717udv" },
-		1: { className: "x6s0dn4 x1vqgdyp x3y1ksm xc342km x9f619 x78zum5 x2lah0s x100vrsf xl56j7k xrgy624 x1hl8ikr x9v5kkp x1t137rt x1de99jn x1717udv xjbqb8w x1gpw424 xt0e3qv" }
-	}[!!state.isDisabled << 0].className ?? "";
+	return props(picker.trigger, focus.ring, state.isDisabled && picker.triggerDisabled).className ?? "";
 }
 //#endregion
 export { picker, triggerClassName };

package/dist/styles/picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"picker.js","names":["stylex","colors","media","radii","spacing","stateLayerOpacity","picker","group","kGNEyG","kB7OPa","k1xSpc","kOIVth","kzqmXN","k3XXqK","$$css","popover","k87sOh","kLqNvP","ks0D6T","kVAEAm","k3aq6I","trigger","kWkggS","kZKoxP","kaIpWk","kMzoRj","kMwMTN","kkrTdU","kmuXW","kjj79g","kjBf7l","kInvED","kMeerF","kmVPX3","triggerDisabled","triggerGlyph","triggerClassName","state","isDisabled","className"],"sources":["../../src/styles/picker.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport '../tokens/design.tokens.stylex';\nimport { colors, media, radii, spacing, stateLayerOpacity } from '../tokens/design.tokens.stylex';\n\n// What a date picker and a date range picker draw in common: the line the\n// segments and the trigger share, the trigger itself, and the surface the\n// calendar opens on. Both put the same three on screen, and the breakpoint\n// swap below is why they are here rather than written twice — a docked\n// picker and a range picker that disagreed about where the modal sits would\n// be two bugs rather than one.\n//\n// In `src/styles` rather than a `src/picker` of its own, since this is\n// styles more than one component draws, which is what that directory holds.\n// Geometry belonging to one picker alone stays with that picker.\n\nconst picker = {\n  group: {\n    kGNEyG: \"x6s0dn4\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kOIVth: \"x126z3so\",\n    kzqmXN: \"xh8yej3\",\n    k3XXqK: \"x1t137rt\",\n    $$css: true\n  },\n  popover: {\n    k87sOh: \"x80663w xifftmu\",\n    kLqNvP: \"xhi6v0a xel0e7d\",\n    ks0D6T: \"x1x1rfll x1gc1xii\",\n    kVAEAm: \"x10l6tqk xrdyt6x\",\n    k3aq6I: \"x1c071of xd6mrmt\",\n    $$css: true\n  },\n  trigger: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"x1dg9itu x1728qcm xjbqb8w\",\n    kZKoxP: \"x1vqgdyp\",\n    kaIpWk: \"x3y1ksm\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1w5n3ug\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x78zum5\",\n    kmuXW: \"x2lah0s\",\n    kzqmXN: \"x100vrsf\",\n    kjj79g: \"xl56j7k\",\n    kjBf7l: \"xrgy624\",\n    kInvED: \"x1hl8ikr\",\n    k3XXqK: \"x9v5kkp x1t137rt\",\n    kMeerF: \"x1de99jn\",\n    kmVPX3: \"x1717udv\",\n    $$css: true\n  },\n  triggerDisabled: {\n    kWkggS: \"xjbqb8w\",\n    kMwMTN: \"x1gpw424\",\n    kkrTdU: \"xt0e3qv\",\n    $$css: true\n  },\n  triggerGlyph: {\n    kZKoxP: \"xxk0z11\",\n    kzqmXN: \"xvy4d1p\",\n    $$css: true\n  }\n};\n\n// The trigger's classes, from React Aria's own render state. A picker's\n// trigger is disabled by the field around it rather than by a prop of its\n// own, so the fade comes off the state React Aria hands the className.\nfunction triggerClassName(state: {\n  isDisabled: boolean;\n}) {\n  return {\n    0: {\n      className: \"x6s0dn4 x1dg9itu x1728qcm xjbqb8w x1vqgdyp x3y1ksm xc342km x9f619 x1w5n3ug x1ypdohk x78zum5 x2lah0s x100vrsf xl56j7k xrgy624 x1hl8ikr x9v5kkp x1t137rt x1de99jn x1717udv\"\n    },\n    1: {\n      className: \"x6s0dn4 x1vqgdyp x3y1ksm xc342km x9f619 x78zum5 x2lah0s x100vrsf xl56j7k xrgy624 x1hl8ikr x9v5kkp x1t137rt x1de99jn x1717udv xjbqb8w x1gpw424 xt0e3qv\"\n    }\n  }[!!state.isDisabled << 0].className ?? '';\n}\nexport { picker, triggerClassName };"],"mappings":";AAeA,MAAMM,SAAS;CACbC,OAAO;EACLC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;CACT;CACAC,SAAS;EACPC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRN,OAAO;CACT;CACAO,SAAS;EACPb,QAAQ;EACRc,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRhB,QAAQ;EACRiB,QAAQ;EACRC,QAAQ;EACRjB,QAAQ;EACRkB,OAAO;EACPhB,QAAQ;EACRiB,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRlB,QAAQ;EACRmB,QAAQ;EACRC,QAAQ;EACRnB,OAAO;CACT;CACAoB,iBAAiB;EACfZ,QAAQ;EACRI,QAAQ;EACRC,QAAQ;EACRb,OAAO;CACT;CACAqB,cAAc;EACZZ,QAAQ;EACRX,QAAQ;EACRE,OAAO;CACT;AACF;AAKA,SAASsB,iBAAiBC,OAEvB;CACD,OAAO;EACL,GAAG,EACDE,WAAW,2KACb;EACA,GAAG,EACDA,WAAW,wJACb;CACF,EAAE,CAAC,CAACF,MAAMC,cAAc,EAAE,CAACC,aAAa;AAC1C"}
+{"version":3,"file":"picker.js","names":["stylex","colors","media","radii","spacing","stateLayerOpacity","focus","picker","group","kGNEyG","kB7OPa","k1xSpc","kOIVth","kzqmXN","k3XXqK","$$css","popover","k87sOh","kLqNvP","ks0D6T","kVAEAm","k3aq6I","trigger","kWkggS","kZKoxP","kaIpWk","kMzoRj","kMwMTN","kkrTdU","kmuXW","kjj79g","kmVPX3","triggerDisabled","triggerGlyph","triggerClassName","state","isDisabled","props","ring","className"],"sources":["../../src/styles/picker.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport '../tokens/design.tokens.stylex';\nimport { colors, media, radii, spacing, stateLayerOpacity } from '../tokens/design.tokens.stylex';\nimport { focus } from './focus';\n\n// What a date picker and a date range picker draw in common: the line the\n// segments and the trigger share, the trigger itself, and the surface the\n// calendar opens on. Both put the same three on screen, and the breakpoint\n// swap below is why they are here rather than written twice — a docked\n// picker and a range picker that disagreed about where the modal sits would\n// be two bugs rather than one.\n//\n// In `src/styles` rather than a `src/picker` of its own, since this is\n// styles more than one component draws, which is what that directory holds.\n// Geometry belonging to one picker alone stays with that picker.\n\nconst picker = {\n  group: {\n    kGNEyG: \"x6s0dn4\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kOIVth: \"x126z3so\",\n    kzqmXN: \"xh8yej3\",\n    k3XXqK: \"x1t137rt\",\n    $$css: true\n  },\n  popover: {\n    k87sOh: \"x80663w xifftmu\",\n    kLqNvP: \"xhi6v0a xel0e7d\",\n    ks0D6T: \"x1x1rfll x1gc1xii\",\n    kVAEAm: \"x10l6tqk xrdyt6x\",\n    k3aq6I: \"x1c071of xd6mrmt\",\n    $$css: true\n  },\n  trigger: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"x1dg9itu x1728qcm xjbqb8w\",\n    kZKoxP: \"x1vqgdyp\",\n    kaIpWk: \"x3y1ksm\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1w5n3ug\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x78zum5\",\n    kmuXW: \"x2lah0s\",\n    kzqmXN: \"x100vrsf\",\n    kjj79g: \"xl56j7k\",\n    kmVPX3: \"x1717udv\",\n    $$css: true\n  },\n  triggerDisabled: {\n    kWkggS: \"xjbqb8w\",\n    kMwMTN: \"x1gpw424\",\n    kkrTdU: \"xt0e3qv\",\n    $$css: true\n  },\n  triggerGlyph: {\n    kZKoxP: \"xxk0z11\",\n    kzqmXN: \"xvy4d1p\",\n    $$css: true\n  }\n};\n\n// The trigger's classes, from React Aria's own render state. A picker's\n// trigger is disabled by the field around it rather than by a prop of its\n// own, so the fade comes off the state React Aria hands the className.\nfunction triggerClassName(state: {\n  isDisabled: boolean;\n}) {\n  return stylex.props(picker.trigger, focus.ring, state.isDisabled && picker.triggerDisabled).className ?? '';\n}\nexport { picker, triggerClassName };"],"mappings":";;;AAgBA,MAAMO,SAAS;CACbC,OAAO;EACLC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;CACT;CACAC,SAAS;EACPC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRN,OAAO;CACT;CACAO,SAAS;EACPb,QAAQ;EACRc,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRhB,QAAQ;EACRiB,QAAQ;EACRC,QAAQ;EACRjB,QAAQ;EACRkB,OAAO;EACPhB,QAAQ;EACRiB,QAAQ;EACRC,QAAQ;EACRhB,OAAO;CACT;CACAiB,iBAAiB;EACfT,QAAQ;EACRI,QAAQ;EACRC,QAAQ;EACRb,OAAO;CACT;CACAkB,cAAc;EACZT,QAAQ;EACRX,QAAQ;EACRE,OAAO;CACT;AACF;AAKA,SAASmB,iBAAiBC,OAEvB;CACD,OAAOnC,MAAaO,OAAOe,SAAShB,MAAMgC,MAAMH,MAAMC,cAAc7B,OAAOyB,eAAe,CAAC,CAACO,aAAa;AAC3G"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kanso-labs/kanso-ui",
-  "version": "0.26.3",
+  "version": "0.26.5",
   "description": "A React component library built on React Aria Components primitives and styled with StyleX, with design tokens sourced from a single W3C DTCG file and compiled via Style Dictionary",
   "keywords": [
     "react",
@@ -73,7 +73,7 @@
     "@commitlint/cli": "21.2.2",
     "@commitlint/config-conventional": "21.2.2",
     "@eslint/js": "10.0.1",
-    "@kanso-labs/unplugin-style-dictionary": "0.4.27",
+    "@kanso-labs/unplugin-style-dictionary": "0.4.28",
     "@rolldown/plugin-babel": "0.2.4",
     "@storybook/addon-a11y": "10.6.0",
     "@storybook/addon-docs": "10.6.0",
@@ -90,7 +90,7 @@
     "babel-plugin-react-compiler": "1.0.0",
     "eslint": "10.10.0",
     "eslint-plugin-oxlint": "1.83.0",
-    "eslint-plugin-perfectionist": "5.11.0",
+    "eslint-plugin-perfectionist": "5.11.1",
     "eslint-plugin-react-hooks": "7.1.1",
     "eslint-plugin-react-refresh": "0.5.7",
     "eslint-plugin-storybook": "10.6.0",