@kanso-labs/kanso-ui 0.35.0 → 0.37.0

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","ReactNode","RefAttributes","ButtonRenderProps","ClassNameOrFunction","DOMRenderFunction","FocusableElement","StyleOrFunction","stylex","ButtonContext","Button","RACButton","Link","RACLink","ToggleButton","RACToggleButton","useSlottedContext","ButtonDOMProps","ButtonState","useRipple","ariaAttributesOf","buttonRenderer","linkRenderer","toggleButtonRenderer","refCallback","focus","mergeStatefulStyles","colors","motion","radii","sizing","stateLayerOpacity","ProgressIndicator","Ripple","ReturnType","FORCED_COLORS","TARGET_SIZE","styles","base","k6CgDc","kGNEyG","kVAM5u","kaIpWk","ksu8eU","kMzoRj","kB7OPa","kkrTdU","k1xSpc","kmuXW","kjj79g","kmVPX3","kVAEAm","kybGjl","kIyJzY","k1ekBW","kAMwcw","$$css","disabled","filled","kWkggS","kMwMTN","filledDisabled","filledToggle","filledToggleSelected","label","labelPending","k33iCy","lg","kZKoxP","kGuDYH","kzqmXN","md","kgeoSG","kFcpXp","kEoFBp","outlined","outlinedDisabled","outlinedToggleSelected","pending","kpwlN0","standard","standardDisabled","standardToggleSelected","tonal","tonalDisabled","tonalToggleSelected","xl","xs","xxl","outlineWidths","selectedShapes","toggleStyles","selected","unselected","disabledStyles","IconButtonProps","children","className","IconButtonState","defaultSelected","disableRipple","href","isSelected","onChange","pendingLabel","rel","render","size","IconButtonSize","style","target","variant","IconButtonVariant","Omit","buttonContent","ripple","state","isPending","surface","IconButton","t0","$","t1","isDisabled","t2","onClick","onContextMenu","onKeyDown","onKeyUp","onPointerCancel","onPointerDown","onPointerLeave","onPointerUp","t3","ref","t4","t5","props","undefined","context","slot","t6","element","aria","t7","forwarded","t8","t9","handlers","t10","toggleStyleProps","t11","toggleContent","ring","styleProps","T0","t12","_c","props","RACToggleButton","stylex.props","RACLink","RACButton"],"sources":["../../../src/components/icon-button/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode, RefAttributes } from 'react';\nimport type { ButtonRenderProps, ClassNameOrFunction, DOMRenderFunction, FocusableElement, StyleOrFunction } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { ButtonContext, Button as RACButton, Link as RACLink, ToggleButton as RACToggleButton, useSlottedContext } from 'react-aria-components';\nimport type { ButtonDOMProps, ButtonState } from '../button';\nimport { useRipple } from '../../hooks/useRipple';\nimport { ariaAttributesOf, buttonRenderer, linkRenderer, toggleButtonRenderer } from '../../render/aria';\nimport { refCallback } from '../../render/ref';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, sizing, stateLayerOpacity } from '../../tokens/design.tokens.stylex';\nimport ProgressIndicator from '../progress-indicator';\n\n// Each variant composites an 'on-color' over its own container at the\n// interaction state's opacity, rather than swapping in a separate hover\n// color. The pairs are the icon buttons spec page's: filled on primary,\n// tonal on secondary container, outlined with an outline variant border and\n// an on-surface-variant icon, standard on surface variant over nothing.\n// calc(<opacity> * 100%) turns the token's unitless 0-1 ratio into the\n// percentage color-mix() takes. Inlined at each property rather than factored\n// into a helper: @stylexjs/babel-plugin only statically recognizes\n// expressions written directly as property values.\n//\n// Disabled is a style of its own per variant rather than a `:disabled`\n// branch inside each property, for the reason Button's comment gives: given\n// `href` this renders as a link, which React Aria turns into a <span> while\n// disabled, and neither matches the pseudo-class. Applied last from the\n// render state, the disabled styles replace each property whole, hover and\n// pressed branches included.\n//\n// **The outlined border thickens with the size, and the widths are Button's\n// rather than this page's.** The icon buttons page keeps them in a size token\n// set its widget will not open to a script, and the two components already\n// share their five heights on purpose — a 96dp icon button beside a 96dp\n// outlined button with a different border weight would read as a mistake.\n//\n// **A toggle is the same button reporting a state.** Given `isSelected`,\n// `defaultSelected` or `onChange` it is React Aria's `ToggleButton` instead\n// of its `Button`, which announces the state through `aria-pressed` rather\n// than a role of its own — every variant and size still applies. The page\n// gives each style a second pair of colour roles for it, and they are not\n// the plain button's: a filled toggle rests on surface container with an\n// on-surface-variant icon and takes primary once chosen, a tonal one rests\n// on secondary container and takes secondary, and a standard one is\n// transparent throughout with the icon going from on-surface-variant to\n// primary, and an outlined one swaps its border for the inverse surface\n// pair. So a chosen filled toggle looks like a plain filled button, and an\n// unchosen one does not.\n//\n// A toggle is never a link and never pending. React Aria's `ToggleButton`\n// takes neither, and neither means anything for a control whose whole job is\n// to report which of two states it is in.\n//\n// The corner softens from a circle to a rounded square while pressed, which\n// is the shape morph the icon buttons spec page gives this control, at the\n// pressed corner its size token set names: 8 for the two small sizes, 12 at\n// medium, 16 at the two large. Each size carries its own pressed radius, since\n// StyleX replaces the property whole. The two transitioned properties take\n// different curves — the colour change is linear-ish and the shape change is\n// emphasized — so the timing functions are a matching comma list rather than\n// one value.\n//\n// A chosen toggle rests at that same pressed corner, which is the page's\n// shape morph: a toggle icon button moves from round while unchosen to\n// square once chosen. The square shape's own corner sits in a token set the\n// page keeps behind its size menu, but the page also says both shapes press\n// to the same radius — so the size's pressed corner is the value it already\n// assigns to that size, used here at rest rather than invented.\n//\n// **Under forced colours a container is drawn as a rule, and a chosen toggle\n// as the mode's own chosen pair.** That mode paints author backgrounds in a\n// system colour and forces the icon's, which left a filled or tonal icon\n// button as an icon with nothing round it and a chosen toggle the same as an\n// unchosen one. `base` draws a 1px `ButtonText` border there, as Button's\n// does. Outlined keeps its own rule, and standard stays without one, as the\n// page draws it. A chosen toggle of any style is filled `Highlight` with its\n// icon in `HighlightText`. A disabled button's icon and edge are `GrayText`,\n// for the reason Button's comment gives: the browser greys a disabled\n// `<button>` there, but not the `<span>` a disabled link is.\ntype Ripple = ReturnType<typeof useRipple<FocusableElement>>;\n\n// Windows High Contrast and the rest of the forced-colours modes. Spelled\n// here rather than imported, for the reason src/field/styles.ts records: the\n// StyleX compiler resolves a constant across files only out of a `.stylex.ts`\n// module, and the generated one holds design tokens rather than queries.\nconst FORCED_COLORS = '@media (forced-colors: active)';\n\n/**\n * The press area the page requires of its two smallest sizes. A literal\n * rather than `sizing.controlMd`, which holds the same number: that is a step\n * of the control scale, and a consumer resizing their medium controls should\n * not shrink a target the page states as a floor.\n */\nconst TARGET_SIZE = '48px';\nconst styles = {\n  base: {\n    k6CgDc: \"x12w9bfk\",\n    kGNEyG: \"x6s0dn4\",\n    kVAM5u: \"x1ylmb6m\",\n    kaIpWk: \"x1dkaolv\",\n    ksu8eU: \"xx61lck\",\n    kMzoRj: \"xc342km x13rsnn2\",\n    kB7OPa: \"x9f619\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x3nfvp2\",\n    kmuXW: \"x2lah0s\",\n    kjj79g: \"xl56j7k\",\n    kmVPX3: \"x1717udv\",\n    kVAEAm: \"x1n2onr6\",\n    kybGjl: \"x1hl2dhg\",\n    kIyJzY: \"x1iuyhda\",\n    k1ekBW: \"xb5u718\",\n    kAMwcw: \"x15l9jch\",\n    $$css: true\n  },\n  disabled: {\n    kaIpWk: \"x1dkaolv\",\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  filled: {\n    kWkggS: \"xpky1to xyf7a0q xnety89\",\n    kMwMTN: \"xwjo7ld\",\n    $$css: true\n  },\n  filledDisabled: {\n    kWkggS: \"xepofeg\",\n    kVAM5u: \"xmnqt3w\",\n    kMwMTN: \"x1xj74d8 x1bhcspo\",\n    $$css: true\n  },\n  filledToggle: {\n    kWkggS: \"xbck2fw x1h1ujn1 x1mjdul6\",\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  },\n  filledToggleSelected: {\n    kWkggS: \"xpky1to xyf7a0q xnety89 x1jzqe4\",\n    kMwMTN: \"xwjo7ld x1k5gbb1\",\n    $$css: true\n  },\n  label: {\n    k1xSpc: \"xjp7ctv\",\n    $$css: true\n  },\n  labelPending: {\n    k33iCy: \"xlshs6z\",\n    $$css: true\n  },\n  lg: {\n    kZKoxP: \"xs1ryiz\",\n    kaIpWk: \"xtt5grq x1dkaolv\",\n    kGuDYH: \"x1pvqxga\",\n    kzqmXN: \"x1fh0d6s\",\n    $$css: true\n  },\n  md: {\n    kgeoSG: \"x1cpjm7i\",\n    kFcpXp: \"x1q69gdh\",\n    kEoFBp: \"x1hmns74\",\n    kZKoxP: \"x1rv7mn0\",\n    kaIpWk: \"x1r81nxe x1dkaolv\",\n    kGuDYH: \"x1pvqxga\",\n    kzqmXN: \"x1eujcsb\",\n    $$css: true\n  },\n  outlined: {\n    kWkggS: \"x1dg9itu x1728qcm xjbqb8w\",\n    kVAM5u: \"x133yhug\",\n    ksu8eU: \"x1y0btm7\",\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  },\n  outlinedDisabled: {\n    kWkggS: \"xjbqb8w\",\n    kVAM5u: \"xrh88j3 xmnqt3w\",\n    kMwMTN: \"x1xj74d8 x1bhcspo\",\n    $$css: true\n  },\n  outlinedToggleSelected: {\n    kWkggS: \"x1q27o6y x1v1ylhe x1c5gpgi x1jzqe4\",\n    kVAM5u: \"x9r1u3d x1n2ykn\",\n    kMwMTN: \"x1girmi0 x1k5gbb1\",\n    $$css: true\n  },\n  pending: {\n    kGNEyG: \"x6s0dn4\",\n    k1xSpc: \"x78zum5\",\n    kpwlN0: \"x10a8y8t\",\n    kjj79g: \"xl56j7k\",\n    kVAEAm: \"x10l6tqk\",\n    $$css: true\n  },\n  standard: {\n    kWkggS: \"x1dg9itu x1728qcm xjbqb8w\",\n    kMzoRj: \"xc342km\",\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  },\n  standardDisabled: {\n    kWkggS: \"xjbqb8w\",\n    kMwMTN: \"x1xj74d8 x1bhcspo\",\n    $$css: true\n  },\n  standardToggleSelected: {\n    kWkggS: \"x12vej0r x14dcer4 xjbqb8w x1jzqe4\",\n    kMzoRj: \"xc342km\",\n    kMwMTN: \"x1mxwv8y x1k5gbb1\",\n    $$css: true\n  },\n  tonal: {\n    kWkggS: \"xnqsvhv xlizrex x15dekr4\",\n    kMwMTN: \"x1sawysd\",\n    $$css: true\n  },\n  tonalDisabled: {\n    kWkggS: \"xepofeg\",\n    kVAM5u: \"xmnqt3w\",\n    kMwMTN: \"x1xj74d8 x1bhcspo\",\n    $$css: true\n  },\n  tonalToggleSelected: {\n    kWkggS: \"x1q841l6 x1ofvui0 x167r6xl x1jzqe4\",\n    kMwMTN: \"x1lba3jz x1k5gbb1\",\n    $$css: true\n  },\n  xl: {\n    kZKoxP: \"x1xaimp3\",\n    kaIpWk: \"x11f6t2b x1dkaolv\",\n    kGuDYH: \"x1s3cmhv\",\n    kzqmXN: \"xszbqgh\",\n    $$css: true\n  },\n  xs: {\n    kgeoSG: \"x1cpjm7i\",\n    kFcpXp: \"x1n6cgzf\",\n    kEoFBp: \"x1hmns74\",\n    kZKoxP: \"xig8zya\",\n    kaIpWk: \"x1r81nxe x1dkaolv\",\n    kGuDYH: \"xwsyq91\",\n    kzqmXN: \"x11ts1a5\",\n    $$css: true\n  },\n  xxl: {\n    kZKoxP: \"x173yhrv\",\n    kaIpWk: \"x11f6t2b x1dkaolv\",\n    kGuDYH: \"x1tgwohi\",\n    kzqmXN: \"xz1kjiq\",\n    $$css: true\n  }\n};\n\n// The outlined border thickens with the size, as Button's does: 1dp up to M,\n// 2dp at XL, 3dp at XXL. A style per size rather than a value in the size\n// style, since a border on a filled button would draw in the icon's colour.\nconst outlineWidths = {\n  lg: {\n    kMzoRj: \"xmkeg23\",\n    $$css: true\n  },\n  md: {\n    kMzoRj: \"xmkeg23\",\n    $$css: true\n  },\n  xl: {\n    kMzoRj: \"xdh2fpr\",\n    $$css: true\n  },\n  xs: {\n    kMzoRj: \"xmkeg23\",\n    $$css: true\n  },\n  xxl: {\n    kMzoRj: \"x9r2w2z\",\n    $$css: true\n  }\n};\n\n// A chosen toggle rests at the corner its size presses to, which is the\n// page's round-to-square morph. A style per size rather than a value inside\n// each size style, since StyleX replaces the property whole and this one has\n// to beat both the size's `:active` branch and the disabled style's circle.\nconst selectedShapes = {\n  lg: {\n    kaIpWk: \"x62ce2h\",\n    $$css: true\n  },\n  md: {\n    kaIpWk: \"x1xdvaa9\",\n    $$css: true\n  },\n  xl: {\n    kaIpWk: \"xhpdng0\",\n    $$css: true\n  },\n  xs: {\n    kaIpWk: \"x1xdvaa9\",\n    $$css: true\n  },\n  xxl: {\n    kaIpWk: \"xhpdng0\",\n    $$css: true\n  }\n};\n\n// Which container a toggle draws, chosen and not. Two of the six are the\n// plain button's own styles: an unchosen tonal or standard toggle is the\n// tonal or standard button. A chosen filled toggle takes the filled button's\n// colours from a style of its own, which adds the forced-colours pair.\nconst toggleStyles = {\n  filled: {\n    selected: styles.filledToggleSelected,\n    unselected: styles.filledToggle\n  },\n  outlined: {\n    selected: styles.outlinedToggleSelected,\n    unselected: styles.outlined\n  },\n  standard: {\n    selected: styles.standardToggleSelected,\n    unselected: styles.standard\n  },\n  tonal: {\n    selected: styles.tonalToggleSelected,\n    unselected: styles.tonal\n  }\n};\nconst disabledStyles = {\n  filled: styles.filledDisabled,\n  outlined: styles.outlinedDisabled,\n  standard: styles.standardDisabled,\n  tonal: styles.tonalDisabled\n};\ntype IconButtonProps = {\n  /**\n   * What the button does, in words. Required rather than optional: an icon\n   * on its own has no accessible name, so without this the control announces\n   * nothing at all.\n   */\n  'aria-label': string;\n  children?: ReactNode;\n  /** A function may compute the class from the button's render state. */\n  className?: ClassNameOrFunction<IconButtonState>;\n  /**\n   * Whether a toggle starts chosen, when it keeps its own state. Passing\n   * this, `isSelected` or `onChange` is what makes the button a toggle.\n   */\n  defaultSelected?: boolean;\n  /**\n   * Disables the press ripple. The hover and pressed state layers are\n   * unaffected.\n   * @default false\n   */\n  disableRipple?: boolean;\n  /**\n   * Where the button leads. Given one, the button is rendered as a link —\n   * an `<a>`, announced as the link it is — with the same styles and ripple.\n   * `render`, `type`, and the form and pending props apply to the button\n   * form only, and a toggle is never a link.\n   */\n  href?: string;\n  /**\n   * Whether a toggle is chosen, when the call site holds the state. Pass it\n   * with `onChange`; passing this, `defaultSelected` or `onChange` is what\n   * makes the button a toggle.\n   */\n  isSelected?: boolean;\n  /**\n   * Called with the new state when a toggle is pressed. Passing this,\n   * `isSelected` or `defaultSelected` is what makes the button a toggle.\n   */\n  onChange?: (isSelected: boolean) => void;\n  /**\n   * The name of the ring shown while the button is pending, for a screen\n   * reader. The label it replaces is hidden while it shows.\n   * @default 'Loading'\n   */\n  pendingLabel?: string;\n  /** The link's `rel`, when `href` is set. */\n  rel?: string;\n  /**\n   * The element to render, given the props it would have carried. React\n   * Aria's own form: it has to return the element the component would have\n   * rendered itself.\n   */\n  render?: DOMRenderFunction<'button', IconButtonState>;\n  /**\n   * Control size: `xs` 32px, `md` 40px, `lg` 56px, `xl` 96px, `xxl` 136px —\n   * the icon buttons spec page's XS to XL, and the same heights `Button`\n   * uses, so the two line up beside each other in a row. The icon is 20px,\n   * 24px, 24px, 32px and 40px in turn.\n   * @default 'md'\n   */\n  size?: IconButtonSize;\n  /** A function may compute the style from the button's render state. */\n  style?: StyleOrFunction<IconButtonState>;\n  /** The link's `target`, when `href` is set. */\n  target?: string;\n  /**\n   * `standard` is transparent and tints what it sits on; `outlined` is\n   * transparent with a rule around it; `filled` and `tonal` carry a container\n   * of their own.\n   * @default 'standard'\n   */\n  variant?: IconButtonVariant;\n} & Omit<ButtonDOMProps, 'render'>;\ntype IconButtonSize = 'lg' | 'md' | 'xl' | 'xs' | 'xxl';\n\n// The render state a call site's `className`, `style` or `render` function is\n// handed. `isSelected` is optional because only the toggle form has one, and\n// one function has to be accepted by both: React Aria hands the plain button\n// a state without it and the toggle a state with it, and a parameter type\n// this wide accepts either.\ntype IconButtonState = ButtonState & {\n  isSelected?: boolean;\n};\ntype IconButtonVariant = 'filled' | 'outlined' | 'standard' | 'tonal';\n\n// What the button draws: its label, hidden while the button is pending, with\n// the ring over it. The ring takes the button's own content colour rather\n// than the progress page's primary, which on a filled button is the fill\n// itself and so invisible. The label stays in the flow so the button keeps its\n// width, which is what stops a form jumping the moment it is submitted.\n// React Aria wants the progress bar in the accessibility tree as soon as the\n// button goes pending, so it is rendered from the render state rather than\n// after a delay.\n//\n// Built by a call rather than written inline at the prop, which is what\n// react-perf's no-new-function-as-prop is after; the React Compiler\n// memoises the result on its inputs.\nfunction buttonContent(children: ReactNode, pendingLabel: string, ripple: Ripple) {\n  return (state: ButtonRenderProps) => <>\n      <span {...{\n      0: {\n        className: \"xjp7ctv\"\n      },\n      1: {\n        className: \"xjp7ctv xlshs6z\"\n      }\n    }[!!state.isPending << 0]}>\n        {children}\n      </span>\n      {state.isPending ? <span className=\"x6s0dn4 x78zum5 x10a8y8t xl56j7k x10l6tqk\">\n          <ProgressIndicator aria-label={pendingLabel} isIndeterminate size=\"1em\" tone=\"inherit\" variant=\"circular\" />\n        </span> : null}\n      {ripple.surface}\n    </>;\n}\n/**\n * A button that is an icon, at five control heights. Given `href` it is a\n * link with the same appearance. Every `aria-*` prop is forwarded to the\n * element; React Aria alone would keep only the labelling ones.\n *\n * Given `isSelected`, `defaultSelected` or `onChange` it is a toggle, which\n * reports its state through `aria-pressed` and draws the page's second pair\n * of colour roles for its variant. A toggle takes neither `href` nor the\n * pending props.\n *\n * ```tsx\n * <IconButton aria-label=\"Label\" defaultSelected variant=\"tonal\">\n *   <StarIcon />\n * </IconButton>\n * ```\n */\nfunction IconButton({\n  children,\n  defaultSelected,\n  disableRipple = false,\n  href,\n  isDisabled,\n  isPending = false,\n  isSelected,\n  onChange,\n  onClick,\n  onContextMenu,\n  onKeyDown,\n  onKeyUp,\n  onPointerCancel,\n  onPointerDown,\n  onPointerLeave,\n  onPointerUp,\n  pendingLabel = 'Loading',\n  ref,\n  rel,\n  render,\n  size = 'md',\n  target,\n  variant = 'standard',\n  ...props\n}: IconButtonProps & RefAttributes<HTMLAnchorElement | HTMLButtonElement>) {\n  // A field's context may disable the button — a number field's stepper at\n  // the end of its range, a search field's clear button with the field — and\n  // React Aria takes a prop over its context, so a default of `false` here\n  // would keep every one of them enabled. The call site's own prop still\n  // wins where it is given; the context is read for the ripple, which has\n  // to know before the render state does.\n  const context = useSlottedContext(ButtonContext, props.slot);\n  const disabled = isDisabled ?? context?.isDisabled ?? false;\n\n  // `props` (className/style, etc.) is spread separately: `className` and\n  // `style` there may be functions of render state, which ripple's own\n  // handler-only merge doesn't need to know about. It is also why the styles\n  // below merge through mergeStatefulStyles rather than the plain\n  // mergeStyles. The ripple is off while disabled, and while pending, as in\n  // Button — and pending for the same second reason given there: React Aria\n  // suppresses the click that would end a press but not the pointer events\n  // that start one, so a ripple begun while pending was never ended.\n  const ripple = useRipple<FocusableElement>(!disableRipple && !disabled && !isPending, {\n    onClick,\n    onContextMenu,\n    onPointerCancel,\n    onPointerDown,\n    onPointerLeave,\n    onPointerUp\n  });\n  const element = {\n    aria: ariaAttributesOf(props),\n    onKeyDown,\n    onKeyUp\n  };\n  // The element is a toggle, a link or a button, so the ref is typed as a link\n  // or a button and handed to each as the callback all three accept — see\n  // src/render/ref.ts.\n  const forwarded = refCallback(ref);\n\n  // The three props that make this a toggle. Read together rather than behind\n  // a `toggle` word of its own, the way `href` already turns the button into\n  // a link: a button given none of them has no state to report, and one given\n  // any of them has nothing else it could mean.\n  if (defaultSelected !== undefined || isSelected !== undefined || onChange !== undefined) {\n    return <RACToggleButton defaultSelected={defaultSelected} isDisabled={disabled} isSelected={isSelected} onChange={onChange} ref={forwarded} render={toggleButtonRenderer(element, render)} {...ripple.handlers} {...props} {...mergeStatefulStyles(toggleStyleProps(size, variant), props)}>\n        {toggleContent(children, ripple)}\n      </RACToggleButton>;\n  }\n  const styleProps = mergeStatefulStyles((state: ButtonState) => stylex.props(styles.base, focus.ring, styles[variant], styles[size], variant === 'outlined' && outlineWidths[size], state.isDisabled && styles.disabled, state.isDisabled && disabledStyles[variant]), props);\n  if (href !== undefined) {\n    return <RACLink href={href} isDisabled={disabled} ref={forwarded} rel={rel} render={linkRenderer(element)} target={target} {...ripple.handlers} {...props} {...styleProps}>\n        {children}\n        {ripple.surface}\n      </RACLink>;\n  }\n  return <RACButton isDisabled={disabled} isPending={isPending} ref={forwarded} render={buttonRenderer(element, render)} {...ripple.handlers} {...props} {...styleProps}>\n      {buttonContent(children, pendingLabel, ripple)}\n    </RACButton>;\n}\n\n// What a toggle draws: its icon and the ripple. No pending ring — React\n// Aria's toggle button has no pending state, and a control reporting which of\n// two states it is in has nothing to be pending about.\n//\n// Built by a call rather than written inline at the prop, which is what\n// react-perf's no-new-function-as-prop is after; the React Compiler memoises\n// the result on its inputs.\nfunction toggleContent(children: ReactNode, ripple: Ripple) {\n  return () => <>\n      {children}\n      {ripple.surface}\n    </>;\n}\n\n// A toggle's styles, from React Aria's render state. The chosen shape is\n// applied after the disabled styles so it survives them: which of the two\n// states a disabled toggle is in should still be readable, and the disabled\n// style otherwise forces the circle back.\nfunction toggleStyleProps(size: IconButtonSize, variant: IconButtonVariant) {\n  return (state: IconButtonState) => stylex.props(styles.base, focus.ring, state.isSelected === true ? toggleStyles[variant].selected : toggleStyles[variant].unselected, styles[size],\n  // A chosen outlined toggle has a container rather than a rule, so the\n  // width goes on only while it is unchosen.\n  variant === 'outlined' && state.isSelected !== true && outlineWidths[size], state.isDisabled && styles.disabled, state.isDisabled && disabledStyles[variant], state.isSelected === true && selectedShapes[size]);\n}\nexport type { IconButtonProps, IconButtonSize, IconButtonState, IconButtonVariant };\nexport default IconButton;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["c","_c","ReactNode","RefAttributes","ClassNameOrFunction","DOMRenderFunction","StyleOrFunction","stylex","useContext","ToggleGroupStateContext","ButtonDOMProps","ButtonState","ButtonGroupItem","ButtonBase","ToggleButtonBase","ButtonGroupItemContext","groupPressHandlers","focus","colors","motion","radii","sizing","stateLayerOpacity","FORCED_COLORS","TARGET_SIZE","styles","base","k6CgDc","kGNEyG","kVAM5u","kaIpWk","ksu8eU","kMzoRj","kB7OPa","kkrTdU","k1xSpc","kmuXW","kjj79g","kmVPX3","kVAEAm","kybGjl","kIyJzY","k1ekBW","kAMwcw","$$css","disabled","filled","kWkggS","kMwMTN","filledDisabled","filledToggle","filledToggleSelected","lg","kZKoxP","kGuDYH","kzqmXN","md","kgeoSG","kFcpXp","kEoFBp","outlined","outlinedDisabled","outlinedToggleSelected","standard","standardDisabled","standardToggleSelected","tonal","tonalDisabled","tonalToggleSelected","xl","xs","xxl","hovered","focused","pressed","outlineWidths","EDGES","controlLg","controlSm","controlXl","controlXs","controlXxl","_temp","shifted","width","value","val","undefined","selectedShapes","toggleStyles","selected","unselected","toggleContainers","const","disabledStyles","IconButtonProps","children","className","IconButtonState","defaultSelected","disableRipple","href","isSelected","onChange","pendingLabel","rel","render","size","IconButtonSize","style","target","variant","IconButtonVariant","Omit","groupStyles","group","state","shift","IconButton","t0","$","isPending","ownSize","t1","props","inSelectingGroup","press","onPressStart","onPressEnd","t2","toggleStyleProps","t3","iconButtonClasses","ring","isHovered","isFocusVisible","isPressed","isDisabled","container","_c","stylex.props"],"sources":["../../../src/components/icon-button/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode, RefAttributes } from 'react';\nimport type { ClassNameOrFunction, DOMRenderFunction, StyleOrFunction } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { useContext } from 'react';\nimport { ToggleGroupStateContext } from 'react-aria-components';\nimport type { ButtonDOMProps, ButtonState } from '../../button';\nimport type { ButtonGroupItem } from '../../button/context';\nimport { ButtonBase, ToggleButtonBase } from '../../button';\nimport { ButtonGroupItemContext } from '../../button/context';\nimport { groupPressHandlers } from '../../button/group';\nimport { focus } from '../../styles/focus';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, sizing, stateLayerOpacity } from '../../tokens/design.tokens.stylex';\n\n// Each variant composites an 'on-color' over its own container at the\n// interaction state's opacity, rather than swapping in a separate hover\n// color. The pairs are the icon buttons spec page's: filled on primary,\n// tonal on secondary container, outlined with an outline variant border and\n// an on-surface-variant icon, standard on surface variant over nothing.\n// calc(<opacity> * 100%) turns the token's unitless 0-1 ratio into the\n// percentage color-mix() takes. Inlined at each property rather than factored\n// into a helper: @stylexjs/babel-plugin only statically recognizes\n// expressions written directly as property values.\n//\n// Disabled is a style of its own per variant rather than a `:disabled`\n// branch inside each property, for the reason Button's comment gives: given\n// `href` this renders as a link, which React Aria turns into a <span> while\n// disabled, and neither matches the pseudo-class. Applied last from the\n// render state, the disabled styles replace each property whole, hover and\n// pressed branches included.\n//\n// **The outlined border thickens with the size, and the widths are Button's\n// rather than this page's.** The icon buttons page keeps them in a size token\n// set its widget will not open to a script, and the two components already\n// share their five heights on purpose — a 96dp icon button beside a 96dp\n// outlined button with a different border weight would read as a mistake.\n//\n// **A toggle is the same button reporting a state.** Given `isSelected`,\n// `defaultSelected` or `onChange` it is React Aria's `ToggleButton` instead\n// of its `Button`, which announces the state through `aria-pressed` rather\n// than a role of its own — every variant and size still applies. The page\n// gives each style a second pair of colour roles for it, and they are not\n// the plain button's: a filled toggle rests on surface container with an\n// on-surface-variant icon and takes primary once chosen, a tonal one rests\n// on secondary container and takes secondary, and a standard one is\n// transparent throughout with the icon going from on-surface-variant to\n// primary, and an outlined one swaps its border for the inverse surface\n// pair. So a chosen filled toggle looks like a plain filled button, and an\n// unchosen one does not.\n//\n// A toggle is never a link and never pending. React Aria's `ToggleButton`\n// takes neither, and neither means anything for a control whose whole job is\n// to report which of two states it is in.\n//\n// The corner softens from a circle to a rounded square while pressed, which\n// is the shape morph the icon buttons spec page gives this control, at the\n// pressed corner its size token set names: 8 for the two small sizes, 12 at\n// medium, 16 at the two large. Each size carries its own pressed radius, since\n// StyleX replaces the property whole. The two transitioned properties take\n// different curves — the colour change is linear-ish and the shape change is\n// emphasized — so the timing functions are a matching comma list rather than\n// one value.\n//\n// A chosen toggle rests at that same pressed corner, which is the page's\n// shape morph: a toggle icon button moves from round while unchosen to\n// square once chosen. The square shape's own corner sits in a token set the\n// page keeps behind its size menu, but the page also says both shapes press\n// to the same radius — so the size's pressed corner is the value it already\n// assigns to that size, used here at rest rather than invented.\n//\n// **Under forced colours a container is drawn as a rule, and a chosen toggle\n// as the mode's own chosen pair.** That mode paints author backgrounds in a\n// system colour and forces the icon's, which left a filled or tonal icon\n// button as an icon with nothing round it and a chosen toggle the same as an\n// unchosen one. `base` draws a 1px `ButtonText` border there, as Button's\n// does. Outlined keeps its own rule, and standard stays without one, as the\n// page draws it. A chosen toggle of any style is filled `Highlight` with its\n// icon in `HighlightText`. A disabled button's icon and edge are `GrayText`,\n// for the reason Button's comment gives: the browser greys a disabled\n// `<button>` there, but not the `<span>` a disabled link is.\n//\n// What every button does past its own styles — the ripple, the link and\n// toggle forms, the pending ring, a parent's disabled state — is\n// `src/button`'s, shared with Button.\n\n// Windows High Contrast and the rest of the forced-colours modes. Spelled\n// here rather than imported, for the reason src/field/styles.ts records: the\n// StyleX compiler resolves a constant across files only out of a `.stylex.ts`\n// module, and the generated one holds design tokens rather than queries.\nconst FORCED_COLORS = '@media (forced-colors: active)';\n\n/**\n * The press area the page requires of its two smallest sizes. A literal\n * rather than `sizing.controlMd`, which holds the same number: that is a step\n * of the control scale, and a consumer resizing their medium controls should\n * not shrink a target the page states as a floor.\n */\nconst TARGET_SIZE = '48px';\nconst styles = {\n  base: {\n    k6CgDc: \"x12w9bfk\",\n    kGNEyG: \"x6s0dn4\",\n    kVAM5u: \"x1ylmb6m\",\n    kaIpWk: \"x1dkaolv\",\n    ksu8eU: \"xx61lck\",\n    kMzoRj: \"xc342km x13rsnn2\",\n    kB7OPa: \"x9f619\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x3nfvp2\",\n    kmuXW: \"x2lah0s\",\n    kjj79g: \"xl56j7k\",\n    kmVPX3: \"x1717udv\",\n    kVAEAm: \"x1n2onr6\",\n    kybGjl: \"x1hl2dhg\",\n    kIyJzY: \"x9w8ftz\",\n    k1ekBW: \"x1n0k3g7\",\n    kAMwcw: \"x1hu1jz6\",\n    $$css: true\n  },\n  disabled: {\n    kaIpWk: \"x1dkaolv\",\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  filled: {\n    kWkggS: \"xnety89\",\n    kMwMTN: \"xwjo7ld\",\n    $$css: true\n  },\n  filledDisabled: {\n    kWkggS: \"xepofeg\",\n    kVAM5u: \"xmnqt3w\",\n    kMwMTN: \"x1xj74d8 x1bhcspo\",\n    $$css: true\n  },\n  filledToggle: {\n    kWkggS: \"x1mjdul6\",\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  },\n  filledToggleSelected: {\n    kWkggS: \"xnety89 x1jzqe4\",\n    kMwMTN: \"xwjo7ld x1k5gbb1\",\n    $$css: true\n  },\n  lg: {\n    kZKoxP: \"xs1ryiz\",\n    kaIpWk: \"x1dkaolv\",\n    kGuDYH: \"x1pvqxga\",\n    kzqmXN: \"x1fh0d6s\",\n    $$css: true\n  },\n  md: {\n    kgeoSG: \"x1cpjm7i\",\n    kFcpXp: \"x1q69gdh\",\n    kEoFBp: \"x1hmns74\",\n    kZKoxP: \"x1rv7mn0\",\n    kaIpWk: \"x1dkaolv\",\n    kGuDYH: \"x1pvqxga\",\n    kzqmXN: \"x1eujcsb\",\n    $$css: true\n  },\n  outlined: {\n    kWkggS: \"xjbqb8w\",\n    kVAM5u: \"x133yhug\",\n    ksu8eU: \"x1y0btm7\",\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  },\n  outlinedDisabled: {\n    kWkggS: \"xjbqb8w\",\n    kVAM5u: \"xrh88j3 xmnqt3w\",\n    kMwMTN: \"x1xj74d8 x1bhcspo\",\n    $$css: true\n  },\n  outlinedToggleSelected: {\n    kWkggS: \"x1c5gpgi x1jzqe4\",\n    kVAM5u: \"x9r1u3d x1n2ykn\",\n    kMwMTN: \"x1girmi0 x1k5gbb1\",\n    $$css: true\n  },\n  standard: {\n    kWkggS: \"xjbqb8w\",\n    kMzoRj: \"xc342km\",\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  },\n  standardDisabled: {\n    kWkggS: \"xjbqb8w\",\n    kMwMTN: \"x1xj74d8 x1bhcspo\",\n    $$css: true\n  },\n  standardToggleSelected: {\n    kWkggS: \"xjbqb8w x1jzqe4\",\n    kMzoRj: \"xc342km\",\n    kMwMTN: \"x1mxwv8y x1k5gbb1\",\n    $$css: true\n  },\n  tonal: {\n    kWkggS: \"x15dekr4\",\n    kMwMTN: \"x1sawysd\",\n    $$css: true\n  },\n  tonalDisabled: {\n    kWkggS: \"xepofeg\",\n    kVAM5u: \"xmnqt3w\",\n    kMwMTN: \"x1xj74d8 x1bhcspo\",\n    $$css: true\n  },\n  tonalToggleSelected: {\n    kWkggS: \"x167r6xl x1jzqe4\",\n    kMwMTN: \"x1lba3jz x1k5gbb1\",\n    $$css: true\n  },\n  xl: {\n    kZKoxP: \"x1xaimp3\",\n    kaIpWk: \"x1dkaolv\",\n    kGuDYH: \"x1s3cmhv\",\n    kzqmXN: \"xszbqgh\",\n    $$css: true\n  },\n  xs: {\n    kgeoSG: \"x1cpjm7i\",\n    kFcpXp: \"x1n6cgzf\",\n    kEoFBp: \"x1hmns74\",\n    kZKoxP: \"xig8zya\",\n    kaIpWk: \"x1dkaolv\",\n    kGuDYH: \"xwsyq91\",\n    kzqmXN: \"x11ts1a5\",\n    $$css: true\n  },\n  xxl: {\n    kZKoxP: \"x173yhrv\",\n    kaIpWk: \"x1dkaolv\",\n    kGuDYH: \"x1tgwohi\",\n    kzqmXN: \"xz1kjiq\",\n    $$css: true\n  }\n};\n\n// The hover, focus and pressed layers, one style per container, applied from\n// React Aria's render state rather than from `:hover`, `:focus-visible` and\n// `:active`, for Button's reasons — see its header: a hover layer stayed on\n// after a tap, and no pressed layer or corner showed for a press made from\n// the keyboard. In the order they are applied, so where two hold the later\n// wins, as the page draws one layer at a time: focus over hover, and a press\n// over both. A chosen toggle's layer keeps its forced-colours `Highlight`,\n// since a later style replaces the property whole.\nconst hovered = {\n  filled: {\n    kWkggS: \"xo1ct44\",\n    $$css: true\n  },\n  filledToggle: {\n    kWkggS: \"xtxe0ya\",\n    $$css: true\n  },\n  filledToggleSelected: {\n    kWkggS: \"xo1ct44 x1jzqe4\",\n    $$css: true\n  },\n  outlined: {\n    kWkggS: \"x14noynh\",\n    $$css: true\n  },\n  outlinedToggleSelected: {\n    kWkggS: \"x1hxzsxp x1jzqe4\",\n    $$css: true\n  },\n  standard: {\n    kWkggS: \"x14noynh\",\n    $$css: true\n  },\n  standardToggleSelected: {\n    kWkggS: \"x659ado x1jzqe4\",\n    $$css: true\n  },\n  tonal: {\n    kWkggS: \"x1fctxn6\",\n    $$css: true\n  },\n  tonalToggleSelected: {\n    kWkggS: \"x12r95rf x1jzqe4\",\n    $$css: true\n  }\n};\nconst focused = {\n  filled: {\n    kWkggS: \"xhodiby\",\n    $$css: true\n  },\n  filledToggle: {\n    kWkggS: \"x1ppcb1\",\n    $$css: true\n  },\n  filledToggleSelected: {\n    kWkggS: \"xhodiby x1jzqe4\",\n    $$css: true\n  },\n  outlined: {\n    kWkggS: \"x19p5drm\",\n    $$css: true\n  },\n  outlinedToggleSelected: {\n    kWkggS: \"xn4e5mw x1jzqe4\",\n    $$css: true\n  },\n  standard: {\n    kWkggS: \"x19p5drm\",\n    $$css: true\n  },\n  standardToggleSelected: {\n    kWkggS: \"x1sog3nf x1jzqe4\",\n    $$css: true\n  },\n  tonal: {\n    kWkggS: \"x1s5x49g\",\n    $$css: true\n  },\n  tonalToggleSelected: {\n    kWkggS: \"x16tkg7c x1jzqe4\",\n    $$css: true\n  }\n};\nconst pressed = {\n  filled: {\n    kWkggS: \"x7b25lv\",\n    $$css: true\n  },\n  filledToggle: {\n    kWkggS: \"x1qdfkg1\",\n    $$css: true\n  },\n  filledToggleSelected: {\n    kWkggS: \"x7b25lv x1jzqe4\",\n    $$css: true\n  },\n  outlined: {\n    kWkggS: \"x123fei2\",\n    $$css: true\n  },\n  outlinedToggleSelected: {\n    kWkggS: \"x167cdfs x1jzqe4\",\n    $$css: true\n  },\n  standard: {\n    kWkggS: \"x123fei2\",\n    $$css: true\n  },\n  standardToggleSelected: {\n    kWkggS: \"x1dvjsmr x1jzqe4\",\n    $$css: true\n  },\n  tonal: {\n    kWkggS: \"xzpauq9\",\n    $$css: true\n  },\n  tonalToggleSelected: {\n    kWkggS: \"x12o6fnv x1jzqe4\",\n    $$css: true\n  }\n};\n\n// The outlined border thickens with the size, as Button's does: 1dp up to M,\n// 2dp at XL, 3dp at XXL. A style per size rather than a value in the size\n// style, since a border on a filled button would draw in the icon's colour.\nconst outlineWidths = {\n  lg: {\n    kMzoRj: \"xmkeg23\",\n    $$css: true\n  },\n  md: {\n    kMzoRj: \"xmkeg23\",\n    $$css: true\n  },\n  xl: {\n    kMzoRj: \"xdh2fpr\",\n    $$css: true\n  },\n  xs: {\n    kMzoRj: \"xmkeg23\",\n    $$css: true\n  },\n  xxl: {\n    kMzoRj: \"x9r2w2z\",\n    $$css: true\n  }\n};\n\n// Each size's edge again, for the one place it is read at runtime: a standard\n// ButtonGroup widening a pressed button by adding to it. The size styles\n// above write the same values.\nconst EDGES = {\n  lg: sizing.controlLg,\n  md: sizing.controlSm,\n  xl: sizing.controlXl,\n  xs: sizing.controlXs,\n  xxl: sizing.controlXxl\n};\n\n// The width a standard group sets while it widens or narrows the button.\nconst _temp = {\n  kzqmXN: \"x1uyokj7\",\n  \"$$css\": true\n};\nconst shifted = {\n  width: (value: string) => [_temp, {\n    \"--x-inlineSize\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(value)\n  }]\n};\n\n// The corner each size presses to, which is the page's round-to-square\n// morph, and the corner a chosen toggle rests at. A style per size rather than\n// a value inside each size style, since StyleX replaces the property whole:\n// it comes after the size's circle while pressed, and after the disabled\n// style's circle too for a chosen toggle, which keeps its corner disabled.\nconst selectedShapes = {\n  lg: {\n    kaIpWk: \"x62ce2h\",\n    $$css: true\n  },\n  md: {\n    kaIpWk: \"x1xdvaa9\",\n    $$css: true\n  },\n  xl: {\n    kaIpWk: \"xhpdng0\",\n    $$css: true\n  },\n  xs: {\n    kaIpWk: \"x1xdvaa9\",\n    $$css: true\n  },\n  xxl: {\n    kaIpWk: \"xhpdng0\",\n    $$css: true\n  }\n};\n\n// Which container a toggle draws, chosen and not. Two of the six are the\n// plain button's own styles: an unchosen tonal or standard toggle is the\n// tonal or standard button. A chosen filled toggle takes the filled button's\n// colours from a style of its own, which adds the forced-colours pair.\nconst toggleStyles = {\n  filled: {\n    selected: styles.filledToggleSelected,\n    unselected: styles.filledToggle\n  },\n  outlined: {\n    selected: styles.outlinedToggleSelected,\n    unselected: styles.outlined\n  },\n  standard: {\n    selected: styles.standardToggleSelected,\n    unselected: styles.standard\n  },\n  tonal: {\n    selected: styles.tonalToggleSelected,\n    unselected: styles.tonal\n  }\n};\n\n// The same containers by name, for the layers above.\nconst toggleContainers = {\n  filled: {\n    selected: 'filledToggleSelected',\n    unselected: 'filledToggle'\n  },\n  outlined: {\n    selected: 'outlinedToggleSelected',\n    unselected: 'outlined'\n  },\n  standard: {\n    selected: 'standardToggleSelected',\n    unselected: 'standard'\n  },\n  tonal: {\n    selected: 'tonalToggleSelected',\n    unselected: 'tonal'\n  }\n} as const;\nconst disabledStyles = {\n  filled: styles.filledDisabled,\n  outlined: styles.outlinedDisabled,\n  standard: styles.standardDisabled,\n  tonal: styles.tonalDisabled\n};\ntype IconButtonProps = {\n  /**\n   * What the button does, in words. Required rather than optional: an icon\n   * on its own has no accessible name, so without this the control announces\n   * nothing at all.\n   *\n   * `undefined` is for a button inside a React Aria component that names it\n   * itself — a search field's clear button, a number field's steppers. React\n   * Aria takes a prop over its context, so a name written here would replace\n   * the one it gives in the reader's locale, and undefined leaves that stand.\n   */\n  'aria-label': string | undefined;\n  children?: ReactNode;\n  /** A function may compute the class from the button's render state. */\n  className?: ClassNameOrFunction<IconButtonState>;\n  /**\n   * Whether a toggle starts chosen, when it keeps its own state. Passing\n   * this, `isSelected` or `onChange` is what makes the button a toggle.\n   */\n  defaultSelected?: boolean;\n  /**\n   * Disables the press ripple. The hover and pressed state layers are\n   * unaffected.\n   * @default false\n   */\n  disableRipple?: boolean;\n  /**\n   * Where the button leads. Given one, the button is rendered as a link —\n   * an `<a>`, announced as the link it is — with the same styles and ripple.\n   * `render`, `type`, and the form and pending props apply to the button\n   * form only, and a toggle is never a link.\n   */\n  href?: string;\n  /**\n   * Whether a toggle is chosen, when the call site holds the state. Pass it\n   * with `onChange`; passing this, `defaultSelected` or `onChange` is what\n   * makes the button a toggle.\n   */\n  isSelected?: boolean;\n  /**\n   * Called with the new state when a toggle is pressed. Passing this,\n   * `isSelected` or `defaultSelected` is what makes the button a toggle.\n   */\n  onChange?: (isSelected: boolean) => void;\n  /**\n   * The name of the ring shown while the button is pending, for a screen\n   * reader. The label it replaces is hidden while it shows. Left out, it is\n   * the word for it in the I18nProvider's locale — \"Loading\" in English.\n   */\n  pendingLabel?: string;\n  /** The link's `rel`, when `href` is set. */\n  rel?: string;\n  /**\n   * The element to render, given the props it would have carried. React\n   * Aria's own form: it has to return the element the component would have\n   * rendered itself.\n   */\n  render?: DOMRenderFunction<'button', IconButtonState>;\n  /**\n   * Control size: `xs` 32px, `md` 40px, `lg` 56px, `xl` 96px, `xxl` 136px —\n   * the icon buttons spec page's XS to XL, and the same heights `Button`\n   * uses, so the two line up beside each other in a row. The icon is 20px,\n   * 24px, 24px, 32px and 40px in turn.\n   * @default 'md'\n   */\n  size?: IconButtonSize;\n  /** A function may compute the style from the button's render state. */\n  style?: StyleOrFunction<IconButtonState>;\n  /** The link's `target`, when `href` is set. */\n  target?: string;\n  /**\n   * `standard` is transparent and tints what it sits on; `outlined` is\n   * transparent with a rule around it; `filled` and `tonal` carry a container\n   * of their own.\n   * @default 'standard'\n   */\n  variant?: IconButtonVariant;\n} & Omit<ButtonDOMProps, 'render'>;\ntype IconButtonSize = 'lg' | 'md' | 'xl' | 'xs' | 'xxl';\n\n// The render state a call site's `className`, `style` or `render` function is\n// handed: the one every button shares, whose `isSelected` only the toggle\n// form fills in — see `ButtonState` in src/button.\ntype IconButtonState = ButtonState;\ntype IconButtonVariant = 'filled' | 'outlined' | 'standard' | 'tonal';\n\n// What a group lays over the button: its own styles for the button's state,\n// last so a connected group's corners hold whatever the button's own shape\n// would be, and the standard group's widening or narrowing as extra width.\nfunction groupStyles(group: ButtonGroupItem | null, size: IconButtonSize, state: ButtonState) {\n  if (group === null) {\n    return null;\n  }\n  return [group.styles?.(state), group.shift !== 0 && shifted.width(`calc(${EDGES[size]} + ${group.shift}px)`)];\n}\n\n/**\n * A button that is an icon, at five control heights. Given `href` it is a\n * link with the same appearance. Every `aria-*` prop is forwarded to the\n * element; React Aria alone would keep only the labelling ones.\n *\n * Given `isSelected`, `defaultSelected` or `onChange` it is a toggle, which\n * reports its state through `aria-pressed` and draws the page's second pair\n * of colour roles for its variant. A toggle takes neither `href` nor the\n * pending props.\n *\n * ```tsx\n * <IconButton aria-label=\"Label\" defaultSelected variant=\"tonal\">\n *   <StarIcon />\n * </IconButton>\n * ```\n */\nfunction IconButton({\n  defaultSelected,\n  href,\n  isPending,\n  isSelected,\n  onChange,\n  pendingLabel,\n  rel,\n  size: ownSize,\n  target,\n  variant = 'standard',\n  ...props\n}: IconButtonProps & RefAttributes<HTMLAnchorElement | HTMLButtonElement>) {\n  // A ButtonGroup around the button hands it a size, its shape at the\n  // group's inner edges and the press interaction, as it does Button's; see\n  // src/button/context.ts. A size named here still wins.\n  const group = useContext(ButtonGroupItemContext);\n  const size = ownSize ?? group?.size ?? 'md';\n  const inSelectingGroup = useContext(ToggleGroupStateContext) !== null;\n  const press = groupPressHandlers(group, props.onPressStart, props.onPressEnd);\n\n  // The three props that make this a toggle. Read together rather than behind\n  // a `toggle` word of its own, the way `href` already turns the button into\n  // a link: a button given none of them has no state to report, and one given\n  // any of them has nothing else it could mean. A selecting ButtonGroup\n  // around it makes it one as well, to take part in the group's selection.\n  if (inSelectingGroup || defaultSelected !== undefined || isSelected !== undefined || onChange !== undefined) {\n    return <ToggleButtonBase {...props} {...press} classes={toggleStyleProps(size, variant, group)} defaultSelected={defaultSelected} isPending={isPending} isSelected={isSelected} onChange={onChange} />;\n  }\n  return <ButtonBase {...props} {...press} classes={iconButtonClasses(size, variant, group)} href={href} isPending={isPending} pendingLabel={pendingLabel} rel={rel} target={target} />;\n}\n\n// The plain button's classes, from React Aria's render state — see the hover\n// and pressed layers above for why that and not the pseudo-classes. Built by\n// a call rather than written inline at the prop, which is what react-perf's\n// no-new-function-as-prop is after; the React Compiler memoises the result on\n// its inputs.\nfunction iconButtonClasses(size: IconButtonSize, variant: IconButtonVariant, group: ButtonGroupItem | null) {\n  return (state: ButtonState) => stylex.props(styles.base, focus.ring, styles[variant], styles[size], variant === 'outlined' && outlineWidths[size], state.isHovered && hovered[variant], state.isFocusVisible && focused[variant], state.isPressed && pressed[variant], state.isPressed && selectedShapes[size], state.isDisabled && styles.disabled, state.isDisabled && disabledStyles[variant], groupStyles(group, size, state));\n}\n\n// A toggle's styles, from React Aria's render state. The chosen shape is\n// applied after the disabled styles so it survives them: which of the two\n// states a disabled toggle is in should still be readable, and the disabled\n// style otherwise forces the circle back.\nfunction toggleStyleProps(size: IconButtonSize, variant: IconButtonVariant, group: ButtonGroupItem | null) {\n  return (state: IconButtonState) => {\n    const container = toggleContainers[variant][state.isSelected === true ? 'selected' : 'unselected'];\n    return stylex.props(styles.base, focus.ring, state.isSelected === true ? toggleStyles[variant].selected : toggleStyles[variant].unselected, styles[size],\n    // A chosen outlined toggle has a container rather than a rule, so the\n    // width goes on only while it is unchosen.\n    variant === 'outlined' && state.isSelected !== true && outlineWidths[size], state.isHovered && hovered[container], state.isFocusVisible && focused[container], state.isPressed && pressed[container], state.isPressed && selectedShapes[size], state.isDisabled && styles.disabled, state.isDisabled && disabledStyles[variant], state.isSelected === true && selectedShapes[size], groupStyles(group, size, state));\n  };\n}\nexport type { IconButtonProps, IconButtonSize, IconButtonState, IconButtonVariant };\nexport default IconButton;"],"mappings":";;;;;;;;;;;;AAoGA,MAAMyB,SAAS;CACbC,MAAM;EACJC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;EACPC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;CACT;CACAC,UAAU;EACRf,QAAQ;EACRI,QAAQ;EACRU,OAAO;CACT;CACAE,QAAQ;EACNC,QAAQ;EACRC,QAAQ;EACRJ,OAAO;CACT;CACAK,gBAAgB;EACdF,QAAQ;EACRlB,QAAQ;EACRmB,QAAQ;EACRJ,OAAO;CACT;CACAM,cAAc;EACZH,QAAQ;EACRC,QAAQ;EACRJ,OAAO;CACT;CACAO,sBAAsB;EACpBJ,QAAQ;EACRC,QAAQ;EACRJ,OAAO;CACT;CACAQ,IAAI;EACFC,QAAQ;EACRvB,QAAQ;EACRwB,QAAQ;EACRC,QAAQ;EACRX,OAAO;CACT;CACAY,IAAI;EACFC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRN,QAAQ;EACRvB,QAAQ;EACRwB,QAAQ;EACRC,QAAQ;EACRX,OAAO;CACT;CACAgB,UAAU;EACRb,QAAQ;EACRlB,QAAQ;EACRE,QAAQ;EACRiB,QAAQ;EACRJ,OAAO;CACT;CACAiB,kBAAkB;EAChBd,QAAQ;EACRlB,QAAQ;EACRmB,QAAQ;EACRJ,OAAO;CACT;CACAkB,wBAAwB;EACtBf,QAAQ;EACRlB,QAAQ;EACRmB,QAAQ;EACRJ,OAAO;CACT;CACAmB,UAAU;EACRhB,QAAQ;EACRf,QAAQ;EACRgB,QAAQ;EACRJ,OAAO;CACT;CACAoB,kBAAkB;EAChBjB,QAAQ;EACRC,QAAQ;EACRJ,OAAO;CACT;CACAqB,wBAAwB;EACtBlB,QAAQ;EACRf,QAAQ;EACRgB,QAAQ;EACRJ,OAAO;CACT;CACAsB,OAAO;EACLnB,QAAQ;EACRC,QAAQ;EACRJ,OAAO;CACT;CACAuB,eAAe;EACbpB,QAAQ;EACRlB,QAAQ;EACRmB,QAAQ;EACRJ,OAAO;CACT;CACAwB,qBAAqB;EACnBrB,QAAQ;EACRC,QAAQ;EACRJ,OAAO;CACT;CACAyB,IAAI;EACFhB,QAAQ;EACRvB,QAAQ;EACRwB,QAAQ;EACRC,QAAQ;EACRX,OAAO;CACT;CACA0B,IAAI;EACFb,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRN,QAAQ;EACRvB,QAAQ;EACRwB,QAAQ;EACRC,QAAQ;EACRX,OAAO;CACT;CACA2B,KAAK;EACHlB,QAAQ;EACRvB,QAAQ;EACRwB,QAAQ;EACRC,QAAQ;EACRX,OAAO;CACT;AACF;AAUA,MAAM4B,UAAU;CACd1B,QAAQ;EACNC,QAAQ;EACRH,OAAO;CACT;CACAM,cAAc;EACZH,QAAQ;EACRH,OAAO;CACT;CACAO,sBAAsB;EACpBJ,QAAQ;EACRH,OAAO;CACT;CACAgB,UAAU;EACRb,QAAQ;EACRH,OAAO;CACT;CACAkB,wBAAwB;EACtBf,QAAQ;EACRH,OAAO;CACT;CACAmB,UAAU;EACRhB,QAAQ;EACRH,OAAO;CACT;CACAqB,wBAAwB;EACtBlB,QAAQ;EACRH,OAAO;CACT;CACAsB,OAAO;EACLnB,QAAQ;EACRH,OAAO;CACT;CACAwB,qBAAqB;EACnBrB,QAAQ;EACRH,OAAO;CACT;AACF;AACA,MAAM6B,UAAU;CACd3B,QAAQ;EACNC,QAAQ;EACRH,OAAO;CACT;CACAM,cAAc;EACZH,QAAQ;EACRH,OAAO;CACT;CACAO,sBAAsB;EACpBJ,QAAQ;EACRH,OAAO;CACT;CACAgB,UAAU;EACRb,QAAQ;EACRH,OAAO;CACT;CACAkB,wBAAwB;EACtBf,QAAQ;EACRH,OAAO;CACT;CACAmB,UAAU;EACRhB,QAAQ;EACRH,OAAO;CACT;CACAqB,wBAAwB;EACtBlB,QAAQ;EACRH,OAAO;CACT;CACAsB,OAAO;EACLnB,QAAQ;EACRH,OAAO;CACT;CACAwB,qBAAqB;EACnBrB,QAAQ;EACRH,OAAO;CACT;AACF;AACA,MAAM8B,UAAU;CACd5B,QAAQ;EACNC,QAAQ;EACRH,OAAO;CACT;CACAM,cAAc;EACZH,QAAQ;EACRH,OAAO;CACT;CACAO,sBAAsB;EACpBJ,QAAQ;EACRH,OAAO;CACT;CACAgB,UAAU;EACRb,QAAQ;EACRH,OAAO;CACT;CACAkB,wBAAwB;EACtBf,QAAQ;EACRH,OAAO;CACT;CACAmB,UAAU;EACRhB,QAAQ;EACRH,OAAO;CACT;CACAqB,wBAAwB;EACtBlB,QAAQ;EACRH,OAAO;CACT;CACAsB,OAAO;EACLnB,QAAQ;EACRH,OAAO;CACT;CACAwB,qBAAqB;EACnBrB,QAAQ;EACRH,OAAO;CACT;AACF;AAKA,MAAM+B,gBAAgB;CACpBvB,IAAI;EACFpB,QAAQ;EACRY,OAAO;CACT;CACAY,IAAI;EACFxB,QAAQ;EACRY,OAAO;CACT;CACAyB,IAAI;EACFrC,QAAQ;EACRY,OAAO;CACT;CACA0B,IAAI;EACFtC,QAAQ;EACRY,OAAO;CACT;CACA2B,KAAK;EACHvC,QAAQ;EACRY,OAAO;CACT;AACF;AAKA,MAAMgC,QAAQ;CACZxB,IAAI/B,OAAOwD;CACXrB,IAAInC,OAAOyD;CACXT,IAAIhD,OAAO0D;CACXT,IAAIjD,OAAO2D;CACXT,KAAKlD,OAAO4D;AACd;AAGA,MAAMC,QAAQ;CACZ3B,QAAQ;CACR,SAAS;AACX;AACA,MAAM4B,UAAU,EACdC,QAAQC,UAAkB,CAACH,OAAO,EAChC,oBAAmBI,QAAO,OAAOA,QAAQ,WAAWA,MAAM,OAAOA,OAAO,OAAOA,MAAMC,KAAAA,EAAAA,CAAWF,KAAK,EACvG,CAAC,EACH;AAOA,MAAMG,iBAAiB;CACrBpC,IAAI;EACFtB,QAAQ;EACRc,OAAO;CACT;CACAY,IAAI;EACF1B,QAAQ;EACRc,OAAO;CACT;CACAyB,IAAI;EACFvC,QAAQ;EACRc,OAAO;CACT;CACA0B,IAAI;EACFxC,QAAQ;EACRc,OAAO;CACT;CACA2B,KAAK;EACHzC,QAAQ;EACRc,OAAO;CACT;AACF;AAMA,MAAM6C,eAAe;CACnB3C,QAAQ;EACN4C,UAAUjE,OAAO0B;EACjBwC,YAAYlE,OAAOyB;CACrB;CACAU,UAAU;EACR8B,UAAUjE,OAAOqC;EACjB6B,YAAYlE,OAAOmC;CACrB;CACAG,UAAU;EACR2B,UAAUjE,OAAOwC;EACjB0B,YAAYlE,OAAOsC;CACrB;CACAG,OAAO;EACLwB,UAAUjE,OAAO2C;EACjBuB,YAAYlE,OAAOyC;CACrB;AACF;AAGA,MAAM0B,mBAAmB;CACvB9C,QAAQ;EACN4C,UAAU;EACVC,YAAY;CACd;CACA/B,UAAU;EACR8B,UAAU;EACVC,YAAY;CACd;CACA5B,UAAU;EACR2B,UAAU;EACVC,YAAY;CACd;CACAzB,OAAO;EACLwB,UAAU;EACVC,YAAY;CACd;AACF;AACA,MAAMG,iBAAiB;CACrBhD,QAAQrB,OAAOwB;CACfW,UAAUnC,OAAOoC;CACjBE,UAAUtC,OAAOuC;CACjBE,OAAOzC,OAAO0C;AAChB;AA0FA,SAAS+C,YAAYC,OAA+BR,MAAsBS,OAAoB;CAC5F,IAAID,UAAU,MACZ,OAAO;CAET,OAAO,CAACA,MAAM1F,SAAS2F,KAAK,GAAGD,MAAME,UAAU,KAAKlC,QAAQC,MAAM,QAAQR,MAAM+B,MAAK,KAAMQ,MAAME,MAAK,IAAK,CAAC;AAC9G;;;;;;;;;;;;;;;;;AAkBA,SAAAC,WAAAC,IAAA;CAAA,MAAAC,IAAAvH,EAAA,EAAA;CAAoB,MAAA,EAAAkG,iBAAAE,MAAAoB,WAAAnB,YAAAC,UAAAC,cAAAC,KAAAE,MAAAe,SAAAZ,QAAAC,SAAAY,IAAA,GAAAC,UAAAL;CAUlB,MAAAR,UAAAY,OAAApC,KAAAA,IAAA,aAAAoC;CAMA,MAAAR,QAAc3G,WAAWO,sBAAsB;CAC/C,MAAA4F,OAAae,WAAWP,OAAKR,QAAhB;CACb,MAAAkB,mBAAyBrH,WAAWC,uBAAuB,MAAM;CACjE,MAAAqH,QAAc9G,mBAAmBmG,OAAOS,MAAKG,cAAeH,MAAKI,UAAW;CAO5E,IAAIH,oBAAoB1B,oBAAoBZ,KAAAA,KAAae,eAAef,KAAAA,KAAagB,aAAahB,KAAAA,GAAS;EAAA,IAAA0C;EAAA,IAAAT,EAAA,OAAAL,SAAAK,EAAA,OAAAb,QAAAa,EAAA,OAAAT,SAAA;GACjDkB,KAAAC,iBAAiBvB,MAAMI,SAASI,KAAK;GAACK,EAAA,KAAAL;GAAAK,EAAA,KAAAb;GAAAa,EAAA,KAAAT;GAAAS,EAAA,KAAAS;EAAA,OAAAA,KAAAT,EAAA;EAAA,IAAAW;EAAA,IAAAX,EAAA,OAAArB,mBAAAqB,EAAA,OAAAC,aAAAD,EAAA,OAAAlB,cAAAkB,EAAA,OAAAjB,YAAAiB,EAAA,OAAAM,SAAAN,EAAA,OAAAI,SAAAJ,EAAA,QAAAS,IAAA;GAAvFE,KAAA,oBAAC,kBAAD;IAAiB,GAAKP;IAAK,GAAME;IAAgB,SAAAG;IAAyD9B;IAA4BsB;IAAuBnB;IAAsBC;GAAQ,CAAA;GAAIiB,EAAA,KAAArB;GAAAqB,EAAA,KAAAC;GAAAD,EAAA,KAAAlB;GAAAkB,EAAA,KAAAjB;GAAAiB,EAAA,KAAAM;GAAAN,EAAA,KAAAI;GAAAJ,EAAA,MAAAS;GAAAT,EAAA,MAAAW;EAAA,OAAAA,KAAAX,EAAA;EAAA,OAA/LW;CAA+L;CACvM,IAAAF;CAAA,IAAAT,EAAA,QAAAL,SAAAK,EAAA,QAAAb,QAAAa,EAAA,QAAAT,SAAA;EACiDkB,KAAAG,kBAAkBzB,MAAMI,SAASI,KAAK;EAACK,EAAA,MAAAL;EAAAK,EAAA,MAAAb;EAAAa,EAAA,MAAAT;EAAAS,EAAA,MAAAS;CAAA,OAAAA,KAAAT,EAAA;CAAA,IAAAW;CAAA,IAAAX,EAAA,QAAAnB,QAAAmB,EAAA,QAAAC,aAAAD,EAAA,QAAAhB,gBAAAgB,EAAA,QAAAM,SAAAN,EAAA,QAAAI,SAAAJ,EAAA,QAAAf,OAAAe,EAAA,QAAAS,MAAAT,EAAA,QAAAV,QAAA;EAAlFqB,KAAA,oBAAC,YAAD;GAAW,GAAKP;GAAK,GAAME;GAAgB,SAAAG;GAA+C5B;GAAiBoB;GAAyBjB;GAAmBC;GAAaK;EAAM,CAAA;EAAIU,EAAA,MAAAnB;EAAAmB,EAAA,MAAAC;EAAAD,EAAA,MAAAhB;EAAAgB,EAAA,MAAAM;EAAAN,EAAA,MAAAI;EAAAJ,EAAA,MAAAf;EAAAe,EAAA,MAAAS;EAAAT,EAAA,MAAAV;EAAAU,EAAA,MAAAW;CAAA,OAAAA,KAAAX,EAAA;CAAA,OAA9KW;AAA8K;AAQvL,SAASC,kBAAkBzB,MAAsBI,SAA4BI,OAA+B;CAC1G,QAAQC,UAAuB7G,MAAakB,OAAOC,MAAMT,MAAMoH,MAAM5G,OAAOsF,UAAUtF,OAAOkF,OAAOI,YAAY,cAAcpC,cAAcgC,OAAOS,MAAMkB,aAAa9D,QAAQuC,UAAUK,MAAMmB,kBAAkB9D,QAAQsC,UAAUK,MAAMoB,aAAa9D,QAAQqC,UAAUK,MAAMoB,aAAahD,eAAemB,OAAOS,MAAMqB,cAAchH,OAAOoB,UAAUuE,MAAMqB,cAAc3C,eAAeiB,UAAUG,YAAYC,OAAOR,MAAMS,KAAK,CAAC;AACna;AAMA,SAASc,iBAAiBvB,MAAsBI,SAA4BI,OAA+B;CACzG,QAAQC,UAA2B;EACjC,MAAMsB,YAAY9C,iBAAiBmB,QAAQ,CAACK,MAAMd,eAAe,OAAO,aAAa;EACrF,OAAO/F,MAAakB,OAAOC,MAAMT,MAAMoH,MAAMjB,MAAMd,eAAe,OAAOb,aAAasB,QAAQ,CAACrB,WAAWD,aAAasB,QAAQ,CAACpB,YAAYlE,OAAOkF,OAGnJI,YAAY,cAAcK,MAAMd,eAAe,QAAQ3B,cAAcgC,OAAOS,MAAMkB,aAAa9D,QAAQkE,YAAYtB,MAAMmB,kBAAkB9D,QAAQiE,YAAYtB,MAAMoB,aAAa9D,QAAQgE,YAAYtB,MAAMoB,aAAahD,eAAemB,OAAOS,MAAMqB,cAAchH,OAAOoB,UAAUuE,MAAMqB,cAAc3C,eAAeiB,UAAUK,MAAMd,eAAe,QAAQd,eAAemB,OAAOO,YAAYC,OAAOR,MAAMS,KAAK,CAAC;CACrZ;AACF"}

package/dist/components/index.d.ts

@@ -2,64 +2,73 @@ import { FieldVariant } from "../field/index.js";
 import AppBar, { AppBarProps } from "./app-bar/index.js";
 import Autocomplete, { AutocompleteFilter, AutocompleteProps } from "./autocomplete/index.js";
 import Avatar, { AvatarProps } from "./avatar/index.js";
-import Breadcrumbs, { BreadcrumbsItemProps, BreadcrumbsProps } from "./breadcrumbs/index.js";
-import Button, { ButtonProps, ButtonSize, ButtonVariant } from "./button/index.js";
+import Badge, { BadgeProps } from "./badge/index.js";
+import Breadcrumbs, { BreadcrumbsItem, BreadcrumbsItemProps, BreadcrumbsProps } from "./breadcrumbs/index.js";
+import Button, { ButtonProps, ButtonShape, ButtonSize, ButtonVariant } from "./button/index.js";
+import ButtonGroup, { ButtonGroupProps, ButtonGroupVariant } from "./button-group/index.js";
 import Calendar, { CalendarProps } from "./calendar/index.js";
-import Card, { CardProps } from "./card/index.js";
+import Card, { CardProps, CardVariant } from "./card/index.js";
 import Checkbox, { CheckboxProps } from "./checkbox/index.js";
 import CheckboxGroup, { CheckboxGroupProps } from "./checkbox-group/index.js";
-import Chip, { ChipProps } from "./chip/index.js";
-import ChipGroup, { ChipGroupChipProps, ChipGroupProps } from "./chip-group/index.js";
+import Chip, { ChipActionProps, ChipFilterProps, ChipProps, ChipVariant } from "./chip/index.js";
+import ChipGroup, { ChipGroupChip, ChipGroupChipProps, ChipGroupProps } from "./chip-group/index.js";
 import Code, { CodeProps } from "./code/index.js";
 import ColorArea, { ColorAreaProps } from "./color-area/index.js";
 import ColorField, { ColorFieldProps } from "./color-field/index.js";
 import ColorPicker, { ColorPickerProps } from "./color-picker/index.js";
 import ColorSlider, { ColorSliderProps } from "./color-slider/index.js";
 import ColorSwatch, { ColorSwatchProps } from "./color-swatch/index.js";
-import ColorSwatchPicker, { ColorSwatchPickerItemProps, ColorSwatchPickerProps } from "./color-swatch-picker/index.js";
+import ColorSwatchPicker, { ColorSwatchPickerItem, ColorSwatchPickerItemProps, ColorSwatchPickerProps } from "./color-swatch-picker/index.js";
 import ColorWheel, { ColorWheelProps } from "./color-wheel/index.js";
 import ComboBox, { ComboBoxProps, ComboBoxSelectionMode } from "./combo-box/index.js";
 import Container, { ContainerProps } from "./container/index.js";
 import CopyField, { CopyFieldProps } from "./copy-field/index.js";
-import Currency, { CurrencyProps } from "./currency/index.js";
+import Currency, { CurrencyProps, CurrencySignDisplay, CurrencyTone } from "./currency/index.js";
 import DateField, { DateFieldProps } from "./date-field/index.js";
 import DatePicker, { DatePickerProps } from "./date-picker/index.js";
 import DateRangePicker, { DateRangePickerProps } from "./date-range-picker/index.js";
-import Dialog, { DialogContentProps, DialogProps, DialogTitleProps } from "./dialog/index.js";
-import Disclosure, { DisclosureHeaderProps, DisclosurePanelProps, DisclosureProps } from "./disclosure/index.js";
+import Dialog, { DialogBody, DialogContent, DialogContentProps, DialogFooter, DialogHeader, DialogProps, DialogTitle, DialogTitleProps } from "./dialog/index.js";
+import Disclosure, { DisclosureHeader, DisclosureHeaderProps, DisclosurePanel, DisclosurePanelProps, DisclosureProps } from "./disclosure/index.js";
 import DisclosureGroup, { DisclosureGroupProps } from "./disclosure-group/index.js";
 import DropZone, { DropZoneProps, FileTrigger, FileTriggerProps } from "./drop-zone/index.js";
+import Fab, { FabProps, FabSize, FabTone, FabVariant } from "./fab/index.js";
+import FabMenu, { FabMenuItem, FabMenuItemProps, FabMenuProps } from "./fab-menu/index.js";
 import Feed, { FeedProps } from "./feed/index.js";
 import Form, { FormProps } from "./form/index.js";
 import IconButton, { IconButtonProps, IconButtonSize, IconButtonVariant } from "./icon-button/index.js";
 import Keycap, { KeycapProps } from "./keycap/index.js";
 import Link, { LinkProps, LinkTone, LinkUnderline } from "./link/index.js";
-import List, { ListLoadMoreProps, ListProps, ListRowProps, ListSectionProps } from "./list/index.js";
-import ListBox, { ListBoxItemProps, ListBoxLoadMoreProps, ListBoxProps, ListBoxSectionProps } from "./list-box/index.js";
+import List, { ListLoadMore, ListLoadMoreProps, ListProps, ListRow, ListRowProps, ListSection, ListSectionProps } from "./list/index.js";
+import ListBox, { ListBoxItem, ListBoxItemProps, ListBoxLoadMore, ListBoxLoadMoreProps, ListBoxProps, ListBoxSection, ListBoxSectionProps } from "./list-box/index.js";
 import ListDetail, { ListDetailProps } from "./list-detail/index.js";
 import ListItem, { ListItemProps } from "./list-item/index.js";
 import Separator, { SeparatorInset, SeparatorProps } from "./separator/index.js";
-import Menu, { MenuAlign, MenuContentProps, MenuItemProps, MenuLoadMoreProps, MenuProps, MenuSectionProps, MenuSeparatorProps, MenuSide, MenuSubmenuProps } from "./menu/index.js";
+import Menu, { MenuAlign, MenuContent, MenuContentProps, MenuItem, MenuItemProps, MenuLoadMore, MenuLoadMoreProps, MenuProps, MenuSection, MenuSectionProps, MenuSeparator, MenuSeparatorProps, MenuSide, MenuSubmenu, MenuSubmenuProps } from "./menu/index.js";
 import Meter, { MeterProps, MeterTone } from "./meter/index.js";
-import NavigationTree, { NavigationTreeHeaderProps, NavigationTreeItemProps, NavigationTreeProps, NavigationTreeSectionProps } from "./navigation-tree/index.js";
+import { NavigationItemProps } from "../navigation/index.js";
+import NavigationBar, { NavigationBarItem, NavigationBarProps } from "./navigation-bar/index.js";
+import NavigationRail, { NavigationRailItem, NavigationRailProps } from "./navigation-rail/index.js";
+import NavigationTree, { NavigationTreeItem, NavigationTreeItemProps, NavigationTreeProps, NavigationTreeSection, NavigationTreeSectionProps } from "./navigation-tree/index.js";
 import NumberField, { NumberFieldProps } from "./number-field/index.js";
-import Popover, { PopoverAlign, PopoverContentProps, PopoverDescriptionProps, PopoverProps, PopoverSide, PopoverSize, PopoverTitleProps, PopoverTrigger } from "./popover/index.js";
+import Popover, { PopoverAlign, PopoverContent, PopoverContentProps, PopoverDescription, PopoverDescriptionProps, PopoverProps, PopoverSide, PopoverSize, PopoverTitle, PopoverTitleProps, PopoverTrigger } from "./popover/index.js";
 import ProductIcon, { ProductIconProps } from "./product-icon/index.js";
 import ProgressIndicator, { ProgressIndicatorProps, ProgressIndicatorTone, ProgressIndicatorVariant } from "./progress-indicator/index.js";
 import RadioGroup, { Radio, RadioGroupProps, RadioProps } from "./radio-group/index.js";
 import RangeCalendar, { RangeCalendarProps } from "./range-calendar/index.js";
 import SearchField, { SearchFieldProps } from "./search-field/index.js";
-import SegmentedButton, { SegmentedButtonProps, SegmentedButtonSegmentProps } from "./segmented-button/index.js";
+import SearchView, { SearchViewContent, SearchViewContentProps, SearchViewProps } from "./search-view/index.js";
+import SegmentedButton, { SegmentedButtonProps, SegmentedButtonSegment, SegmentedButtonSegmentProps } from "./segmented-button/index.js";
 import Select, { SelectProps } from "./select/index.js";
-import Sheet, { SheetContentProps, SheetProps, SheetTitleProps } from "./sheet/index.js";
+import Sheet, { SheetBody, SheetContent, SheetContentProps, SheetFooter, SheetHandle, SheetHeader, SheetProps, SheetTitle, SheetTitleProps } from "./sheet/index.js";
 import Slider, { SliderProps } from "./slider/index.js";
 import Snackbar, { SnackbarAction, SnackbarMessage, SnackbarOptions, SnackbarProps, SnackbarQueue, SnackbarRegionRenderProps as ToastRegionRenderProps } from "./snackbar/index.js";
+import SplitButton, { SplitButtonAction, SplitButtonActionProps, SplitButtonMenu, SplitButtonMenuProps, SplitButtonProps, SplitButtonVariant } from "./split-button/index.js";
 import Stack, { StackAlign, StackGap, StackJustify, StackProps } from "./stack/index.js";
 import SupportingPane, { SupportingPaneProps } from "./supporting-pane/index.js";
 import Switch, { SwitchProps } from "./switch/index.js";
-import Table, { TableBodyProps, TableCellProps, TableColumnProps, TableFooterProps, TableHeaderProps, TableLoadMoreProps, TableProps, TableRowProps } from "./table/index.js";
-import Tabs, { TabsListProps, TabsPanelProps, TabsPanelsProps, TabsProps, TabsTabProps } from "./tabs/index.js";
-import Tag, { TagProps } from "./tag/index.js";
+import Table, { TableBody, TableBodyProps, TableCell, TableCellProps, TableColumn, TableColumnProps, TableFooter, TableFooterProps, TableHeader, TableHeaderProps, TableLoadMore, TableLoadMoreProps, TableProps, TableRow, TableRowProps } from "./table/index.js";
+import Tabs, { TabsLayout, TabsList, TabsListProps, TabsPanel, TabsPanelProps, TabsPanels, TabsPanelsProps, TabsProps, TabsTab, TabsTabProps, TabsVariant } from "./tabs/index.js";
+import Tag, { TagProps, TagTone, TagVariant } from "./tag/index.js";
 import Text, { TextProps } from "./text/index.js";
 import TextArea, { TextAreaProps } from "./text-area/index.js";
 import TextField, { TextFieldProps } from "./text-field/index.js";
@@ -67,5 +76,5 @@ import TimeField, { TimeFieldProps } from "./time-field/index.js";
 import TokenField, { TokenFieldProps, TokenSegment } from "./token-field/index.js";
 import Toolbar, { ToolbarProps, ToolbarTone } from "./toolbar/index.js";
 import Tooltip, { TooltipAlign, TooltipProps, TooltipSide } from "./tooltip/index.js";
-import Tree, { TreeHeaderProps, TreeItemProps, TreeLoadMoreProps, TreeProps, TreeSectionProps } from "./tree/index.js";
-export { AppBar, type AppBarProps, Autocomplete, type AutocompleteFilter, type AutocompleteProps, Avatar, type AvatarProps, Breadcrumbs, type BreadcrumbsItemProps, type BreadcrumbsProps, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Calendar, type CalendarProps, Card, type CardProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, Chip, ChipGroup, type ChipGroupChipProps, type ChipGroupProps, type ChipProps, Code, type CodeProps, ColorArea, type ColorAreaProps, ColorField, type ColorFieldProps, ColorPicker, type ColorPickerProps, ColorSlider, type ColorSliderProps, ColorSwatch, ColorSwatchPicker, type ColorSwatchPickerItemProps, type ColorSwatchPickerProps, type ColorSwatchProps, ColorWheel, type ColorWheelProps, ComboBox, type ComboBoxProps, type ComboBoxSelectionMode, Container, type ContainerProps, CopyField, type CopyFieldProps, Currency, type CurrencyProps, DateField, type DateFieldProps, DatePicker, type DatePickerProps, DateRangePicker, type DateRangePickerProps, Dialog, type DialogContentProps, type DialogProps, type DialogTitleProps, Disclosure, DisclosureGroup, type DisclosureGroupProps, type DisclosureHeaderProps, type DisclosurePanelProps, type DisclosureProps, DropZone, type DropZoneProps, Feed, type FeedProps, type FieldVariant, FileTrigger, type FileTriggerProps, Form, type FormProps, IconButton, type IconButtonProps, type IconButtonSize, type IconButtonVariant, Keycap, type KeycapProps, Link, type LinkProps, type LinkTone, type LinkUnderline, List, ListBox, type ListBoxItemProps, type ListBoxLoadMoreProps, type ListBoxProps, type ListBoxSectionProps, ListDetail, type ListDetailProps, ListItem, type ListItemProps, type ListLoadMoreProps, type ListProps, type ListRowProps, type ListSectionProps, Menu, type MenuAlign, type MenuContentProps, type MenuItemProps, type MenuLoadMoreProps, type MenuProps, type MenuSectionProps, type MenuSeparatorProps, type MenuSide, type MenuSubmenuProps, Meter, type MeterProps, type MeterTone, NavigationTree, type NavigationTreeHeaderProps, type NavigationTreeItemProps, type NavigationTreeProps, type NavigationTreeSectionProps, NumberField, type NumberFieldProps, Popover, type PopoverAlign, type PopoverContentProps, type PopoverDescriptionProps, type PopoverProps, type PopoverSide, type PopoverSize, type PopoverTitleProps, type PopoverTrigger, ProductIcon, type ProductIconProps, ProgressIndicator, type ProgressIndicatorProps, type ProgressIndicatorTone, type ProgressIndicatorVariant, Radio, RadioGroup, type RadioGroupProps, type RadioProps, RangeCalendar, type RangeCalendarProps, SearchField, type SearchFieldProps, SegmentedButton, type SegmentedButtonProps, type SegmentedButtonSegmentProps, Select, type SelectProps, Separator, type SeparatorInset, type SeparatorProps, Sheet, type SheetContentProps, type SheetProps, type SheetTitleProps, Slider, type SliderProps, Snackbar, type SnackbarAction, type SnackbarMessage, type SnackbarOptions, type SnackbarProps, type SnackbarQueue, type ToastRegionRenderProps as SnackbarRegionRenderProps, Stack, type StackAlign, type StackGap, type StackJustify, type StackProps, SupportingPane, type SupportingPaneProps, Switch, type SwitchProps, Table, type TableBodyProps, type TableCellProps, type TableColumnProps, type TableFooterProps, type TableHeaderProps, type TableLoadMoreProps, type TableProps, type TableRowProps, Tabs, type TabsListProps, type TabsPanelProps, type TabsPanelsProps, type TabsProps, type TabsTabProps, Tag, type TagProps, Text, TextArea, type TextAreaProps, TextField, type TextFieldProps, type TextProps, TimeField, type TimeFieldProps, TokenField, type TokenFieldProps, type TokenSegment, Toolbar, type ToolbarProps, type ToolbarTone, Tooltip, type TooltipAlign, type TooltipProps, type TooltipSide, Tree, type TreeHeaderProps, type TreeItemProps, type TreeLoadMoreProps, type TreeProps, type TreeSectionProps };
+import Tree, { TreeItem, TreeItemProps, TreeLoadMore, TreeLoadMoreProps, TreeProps, TreeSection, TreeSectionProps } from "./tree/index.js";
+export { AppBar, type AppBarProps, Autocomplete, type AutocompleteFilter, type AutocompleteProps, Avatar, type AvatarProps, Badge, type BadgeProps, Breadcrumbs, BreadcrumbsItem, type BreadcrumbsItemProps, type BreadcrumbsProps, Button, ButtonGroup, type ButtonGroupProps, type ButtonGroupVariant, type ButtonProps, type ButtonShape, type ButtonSize, type ButtonVariant, Calendar, type CalendarProps, Card, type CardProps, type CardVariant, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, Chip, type ChipActionProps, type ChipFilterProps, ChipGroup, ChipGroupChip, type ChipGroupChipProps, type ChipGroupProps, type ChipProps, type ChipVariant, Code, type CodeProps, ColorArea, type ColorAreaProps, ColorField, type ColorFieldProps, ColorPicker, type ColorPickerProps, ColorSlider, type ColorSliderProps, ColorSwatch, ColorSwatchPicker, ColorSwatchPickerItem, type ColorSwatchPickerItemProps, type ColorSwatchPickerProps, type ColorSwatchProps, ColorWheel, type ColorWheelProps, ComboBox, type ComboBoxProps, type ComboBoxSelectionMode, Container, type ContainerProps, CopyField, type CopyFieldProps, Currency, type CurrencyProps, type CurrencySignDisplay, type CurrencyTone, DateField, type DateFieldProps, DatePicker, type DatePickerProps, DateRangePicker, type DateRangePickerProps, Dialog, DialogBody, DialogContent, type DialogContentProps, DialogFooter, DialogHeader, type DialogProps, DialogTitle, type DialogTitleProps, Disclosure, DisclosureGroup, type DisclosureGroupProps, DisclosureHeader, type DisclosureHeaderProps, DisclosurePanel, type DisclosurePanelProps, type DisclosureProps, DropZone, type DropZoneProps, Fab, FabMenu, FabMenuItem, type FabMenuItemProps, type FabMenuProps, type FabProps, type FabSize, type FabTone, type FabVariant, Feed, type FeedProps, type FieldVariant, FileTrigger, type FileTriggerProps, Form, type FormProps, IconButton, type IconButtonProps, type IconButtonSize, type IconButtonVariant, Keycap, type KeycapProps, Link, type LinkProps, type LinkTone, type LinkUnderline, List, ListBox, ListBoxItem, type ListBoxItemProps, ListBoxLoadMore, type ListBoxLoadMoreProps, type ListBoxProps, ListBoxSection, type ListBoxSectionProps, ListDetail, type ListDetailProps, ListItem, type ListItemProps, ListLoadMore, type ListLoadMoreProps, type ListProps, ListRow, type ListRowProps, ListSection, type ListSectionProps, Menu, type MenuAlign, MenuContent, type MenuContentProps, MenuItem, type MenuItemProps, MenuLoadMore, type MenuLoadMoreProps, type MenuProps, MenuSection, type MenuSectionProps, MenuSeparator, type MenuSeparatorProps, type MenuSide, MenuSubmenu, type MenuSubmenuProps, Meter, type MeterProps, type MeterTone, NavigationBar, NavigationBarItem, type NavigationItemProps as NavigationBarItemProps, type NavigationBarProps, NavigationRail, NavigationRailItem, type NavigationItemProps as NavigationRailItemProps, type NavigationRailProps, NavigationTree, NavigationTreeItem, type NavigationTreeItemProps, type NavigationTreeProps, NavigationTreeSection, type NavigationTreeSectionProps, NumberField, type NumberFieldProps, Popover, type PopoverAlign, PopoverContent, type PopoverContentProps, PopoverDescription, type PopoverDescriptionProps, type PopoverProps, type PopoverSide, type PopoverSize, PopoverTitle, type PopoverTitleProps, type PopoverTrigger, ProductIcon, type ProductIconProps, ProgressIndicator, type ProgressIndicatorProps, type ProgressIndicatorTone, type ProgressIndicatorVariant, Radio, RadioGroup, type RadioGroupProps, type RadioProps, RangeCalendar, type RangeCalendarProps, SearchField, type SearchFieldProps, SearchView, SearchViewContent, type SearchViewContentProps, type SearchViewProps, SegmentedButton, type SegmentedButtonProps, SegmentedButtonSegment, type SegmentedButtonSegmentProps, Select, type SelectProps, Separator, type SeparatorInset, type SeparatorProps, Sheet, SheetBody, SheetContent, type SheetContentProps, SheetFooter, SheetHandle, SheetHeader, type SheetProps, SheetTitle, type SheetTitleProps, Slider, type SliderProps, Snackbar, type SnackbarAction, type SnackbarMessage, type SnackbarOptions, type SnackbarProps, type SnackbarQueue, type ToastRegionRenderProps as SnackbarRegionRenderProps, SplitButton, SplitButtonAction, type SplitButtonActionProps, SplitButtonMenu, type SplitButtonMenuProps, type SplitButtonProps, type SplitButtonVariant, Stack, type StackAlign, type StackGap, type StackJustify, type StackProps, SupportingPane, type SupportingPaneProps, Switch, type SwitchProps, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableColumn, type TableColumnProps, TableFooter, type TableFooterProps, TableHeader, type TableHeaderProps, TableLoadMore, type TableLoadMoreProps, type TableProps, TableRow, type TableRowProps, Tabs, type TabsLayout, TabsList, type TabsListProps, TabsPanel, type TabsPanelProps, TabsPanels, type TabsPanelsProps, type TabsProps, TabsTab, type TabsTabProps, type TabsVariant, Tag, type TagProps, type TagTone, type TagVariant, Text, TextArea, type TextAreaProps, TextField, type TextFieldProps, type TextProps, TimeField, type TimeFieldProps, TokenField, type TokenFieldProps, type TokenSegment, Toolbar, type ToolbarProps, type ToolbarTone, Tooltip, type TooltipAlign, type TooltipProps, type TooltipSide, Tree, TreeItem, type TreeItemProps, TreeLoadMore, type TreeLoadMoreProps, type TreeProps, TreeSection, type TreeSectionProps };

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

@@ -5,22 +5,24 @@ type ListLoadMoreProps = Omit<GridListLoadMoreItemProps, 'children'> & {
   /**
    * What the row says while it is loading. Read by a screen reader; the ring
    * itself carries no text.
-   * @default 'Loading more'
+   * Left out, it is the word for it in the I18nProvider's locale — "Loading
+   * more" in English.
    */
   label?: string;
 };
-type ListProps<T extends object = object> = Omit<GridListProps<T>, 'className' | 'style'> & {
+type ListProps<T extends object = object> = {
   /** A function may compute the class from the list's render state. */
   className?: GridListProps<T>['className'];
   /**
    * What each row's selection checkbox is called, for a screen reader. The
    * row's own text is what names the row; this names the box inside it.
-   * @default 'Select'
+   * Left out, React Aria names it in the reader's locale — "Select" in
+   * English.
    */
   selectLabel?: string;
   /** A function may compute the style from the list's render state. */
   style?: GridListProps<T>['style'];
-};
+} & Omit<GridListProps<T>, 'className' | 'style'>;
 type ListRowProps<T extends object = object> = {
   /** The row's headline — the one thing it is mostly about. */
   children?: ReactNode;
@@ -74,10 +76,16 @@ type ListSectionProps<T extends object = object> = Omit<GridListSectionProps<T>,
  */
 declare function List<T extends object>({ selectLabel, ...props }: ListProps<T> & RefAttributes<HTMLDivElement>): import("react").JSX.Element;
 declare namespace List {
-  var Item: typeof ListItem;
+  var Item: typeof ListRow;
   var LoadMore: typeof ListLoadMore;
   var Section: typeof ListSection;
 }
+/**
+ * The row the list shows while it is fetching more. React Aria calls
+ * `onLoadMore` when this comes into view, and draws it only while
+ * `isLoading`.
+ */
+declare function ListLoadMore({ label, ...props }: ListLoadMoreProps): import("react").JSX.Element;
 /**
  * One row. Its slots are the row's: `leading`, the headline as children,
  * `supporting` under it, and `trailing`. Give every row an `id` — that is
@@ -86,18 +94,12 @@ declare namespace List {
  * A list that selects with checkboxes draws one before whatever `leading`
  * holds, from the state React Aria reports rather than from a prop here.
  */
-declare function ListItem<T extends object = object>({ children, leading, onContextMenu, onPointerCancel, onPointerDown, onPointerLeave, onPointerUp, overline, supporting, textValue, trailing, ...props }: ListRowProps<T>): import("react").JSX.Element;
-/**
- * The row the list shows while it is fetching more. React Aria calls
- * `onLoadMore` when this comes into view, and draws it only while
- * `isLoading`.
- */
-declare function ListLoadMore({ label, ...props }: ListLoadMoreProps): import("react").JSX.Element;
+declare function ListRow<T extends object = object>({ children, leading, onContextMenu, onPointerCancel, onPointerDown, onPointerLeave, onPointerUp, overline, supporting, textValue, trailing, ...props }: ListRowProps<T>): import("react").JSX.Element;
 /**
  * A named group of rows. `header` names it, and is what a screen reader
  * reads before the rows inside.
  */
 declare function ListSection<T extends object = object>({ children, header, ...props }: ListSectionProps<T>): import("react").JSX.Element;
 //#endregion
-export { type ListLoadMoreProps, type ListProps, type ListRowProps, type ListSectionProps, List as default };
+export { ListLoadMore, type ListLoadMoreProps, type ListProps, ListRow, type ListRowProps, ListSection, type ListSectionProps, List as default };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/list/index.js

@@ -5,14 +5,14 @@ import { useRipple } from "../../hooks/useRipple.js";
 import Checkbox from "../checkbox/index.js";
 import { textOf } from "../../collection/text.js";
 import { CollectionLoadMore } from "../../collection/index.js";
-import { collectionStyles, rowItemStyles } from "../../collection/styles.js";
+import { collectionStyles, containerClasses, rowItemStyles } from "../../collection/styles.js";
 import { RowContent } from "../../row/index.js";
 import { c } from "react/compiler-runtime";
 import { createContext, useContext } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { GridList, GridListHeader, GridListItem, GridListLoadMoreItem, GridListSection } from "react-aria-components";
 //#region src/components/list/index.tsx
-const SelectLabelContext = createContext("Select");
+const SelectLabelContext = createContext(void 0);
 function itemContent(children, leading, overline, supporting, trailing, selectLabel, ripple) {
 	return (state) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(RowContent, {
 		isDisabled: state.isDisabled,
@@ -62,13 +62,12 @@ function List(t0) {
 	let t2;
 	let t3;
 	if ($[0] !== t0) {
-		const { selectLabel: t4, ...props$3 } = t0;
-		const selectLabel = t4 === void 0 ? "Select" : t4;
+		const { selectLabel, ...props } = t0;
 		T1 = SelectLabelContext;
 		t3 = selectLabel;
 		T0 = GridList;
-		t1 = props$3;
-		t2 = mergeStatefulStyles(props(collectionStyles.container), props$3);
+		t1 = props;
+		t2 = mergeStatefulStyles(containerClasses, props);
 		$[0] = t0;
 		$[1] = T0;
 		$[2] = T1;
@@ -107,6 +106,58 @@ function List(t0) {
 	return t5;
 }
 /**
+* The row the list shows while it is fetching more. React Aria calls
+* `onLoadMore` when this comes into view, and draws it only while
+* `isLoading`.
+*/
+function ListLoadMore(t0) {
+	const $ = c(12);
+	let T0;
+	let label;
+	let t1;
+	let t2;
+	if ($[0] !== t0) {
+		const { label: t3, ...props$1 } = t0;
+		label = t3;
+		T0 = GridListLoadMoreItem;
+		t1 = props$1;
+		t2 = mergeStyles(props(collectionStyles.loading), props$1);
+		$[0] = t0;
+		$[1] = T0;
+		$[2] = label;
+		$[3] = t1;
+		$[4] = t2;
+	} else {
+		T0 = $[1];
+		label = $[2];
+		t1 = $[3];
+		t2 = $[4];
+	}
+	let t3;
+	if ($[5] !== label) {
+		t3 = /* @__PURE__ */ jsx(CollectionLoadMore, {
+			label,
+			size: "24px"
+		});
+		$[5] = label;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== T0 || $[8] !== t1 || $[9] !== t2 || $[10] !== t3) {
+		t4 = /* @__PURE__ */ jsx(T0, {
+			...t1,
+			...t2,
+			children: t3
+		});
+		$[7] = T0;
+		$[8] = t1;
+		$[9] = t2;
+		$[10] = t3;
+		$[11] = t4;
+	} else t4 = $[11];
+	return t4;
+}
+/**
 * One row. Its slots are the row's: `leading`, the headline as children,
 * `supporting` under it, and `trailing`. Give every row an `id` — that is
 * the key selection is reported by.
@@ -114,7 +165,7 @@ function List(t0) {
 * A list that selects with checkboxes draws one before whatever `leading`
 * holds, from the state React Aria reports rather than from a prop here.
 */
-function ListItem(t0) {
+function ListRow(t0) {
 	const $ = c(24);
 	const { children, leading, onContextMenu, onPointerCancel, onPointerDown, onPointerLeave, onPointerUp, overline, supporting, textValue, trailing, ...props } = t0;
 	const selectLabel = useContext(SelectLabelContext);
@@ -177,58 +228,6 @@ function ListItem(t0) {
 	return t6;
 }
 /**
-* The row the list shows while it is fetching more. React Aria calls
-* `onLoadMore` when this comes into view, and draws it only while
-* `isLoading`.
-*/
-function ListLoadMore(t0) {
-	const $ = c(12);
-	let T0;
-	let label;
-	let t1;
-	let t2;
-	if ($[0] !== t0) {
-		const { label: t3, ...props$1 } = t0;
-		label = t3 === void 0 ? "Loading more" : t3;
-		T0 = GridListLoadMoreItem;
-		t1 = props$1;
-		t2 = mergeStyles(props(collectionStyles.loading), props$1);
-		$[0] = t0;
-		$[1] = T0;
-		$[2] = label;
-		$[3] = t1;
-		$[4] = t2;
-	} else {
-		T0 = $[1];
-		label = $[2];
-		t1 = $[3];
-		t2 = $[4];
-	}
-	let t3;
-	if ($[5] !== label) {
-		t3 = /* @__PURE__ */ jsx(CollectionLoadMore, {
-			label,
-			size: "24px"
-		});
-		$[5] = label;
-		$[6] = t3;
-	} else t3 = $[6];
-	let t4;
-	if ($[7] !== T0 || $[8] !== t1 || $[9] !== t2 || $[10] !== t3) {
-		t4 = /* @__PURE__ */ jsx(T0, {
-			...t1,
-			...t2,
-			children: t3
-		});
-		$[7] = T0;
-		$[8] = t1;
-		$[9] = t2;
-		$[10] = t3;
-		$[11] = t4;
-	} else t4 = $[11];
-	return t4;
-}
-/**
 * A named group of rows. `header` names it, and is what a screen reader
 * reads before the rows inside.
 */
@@ -284,10 +283,10 @@ function ListSection(t0) {
 	} else t4 = $[13];
 	return t4;
 }
-List.Item = ListItem;
+List.Item = ListRow;
 List.LoadMore = ListLoadMore;
 List.Section = ListSection;
 //#endregion
-export { List as default };
+export { ListLoadMore, ListRow, ListSection, List as default };
 
 //# sourceMappingURL=index.js.map