@kanso-labs/kanso-ui 0.43.7 → 0.44.1

package/dist/components/app-bar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","ReactNode","stylex","createElement","RenderComponentProps","COLLAPSED_BLOCK_SIZE","hasContent","useRender","layers","mergeStyles","colors","motion","sizing","spacing","Text","ICON_BUTTON_TARGET","ICON_SIZE","GLYPH_INSET","HEIGHTS","lg","plain","withSubtitle","md","sm","const","COLLAPSED_HEIGHT","FORCED_COLORS","styles","pinned","k87sOh","kVAEAm","kY2c9j","$$css","root","k6CgDc","kGNEyG","kWkggS","kB7OPa","k1xSpc","kjj79g","kIyJzY","k1ekBW","kAMwcw","row","kOIVth","kzqmXN","kUOVxO","scrolled","kL6WhQ","kfdmCh","kt9PQ7","HEADLINE_VARIANT","HEADINGS","heading","level","known","Number","isInteger","PARAGRAPH","_temp","kAzted","heightStyles","minBlockSize","val","undefined","_temp2","ks0D6T","rowStyles","start","end","maxInlineSize","kwRFfy","kZCmMZ","AppBarProps","Omit","align","collapsed","contentInset","contentMaxInlineSize","headingLevel","headline","leading","size","subtitle","trailing","AppBar","t0","$","render","t1","t2","t3","t4","t5","t6","t7","t8","t9","t10","t11","t12","t13","t14","props","collapse","expandedHeight","height","hasLeading","hasTrailing","t15","edgePadding","t16","t17","Symbol","for","0","className","1","t18","t19","t20","t21","t22","children","defaultTagName","hasSlot","inset","trim","_c","props","stylex.props"],"sources":["../../../src/components/app-bar/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport { createElement } from 'react';\nimport type { RenderComponentProps } from '../../render/useRender';\nimport { COLLAPSED_BLOCK_SIZE } from '../../hooks/useAppBarScroll';\nimport { hasContent } from '../../render/content';\nimport { useRender } from '../../render/useRender';\nimport '../../styles/layers.stylex';\nimport { layers } from '../../styles/layers.stylex';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, sizing, spacing } from '../../tokens/design.tokens.stylex';\nimport Text from '../text';\n\n// Material Design's app bar, in the three sizes the spec recommends.\n//\n// `md` and `lg` are Material Design's medium and large *flexible* bars, the\n// newer of the two sets the spec gives and the one it recommends, which is why\n// those two steps are theirs.\n//\n// Material Design also merged the old center-aligned variant into small as a\n// configuration rather than a variant, which is why alignment is a prop here\n// and applies to every size.\n//\n// Heights are Material Design's, and they are minimums rather than fixed. The\n// spec says the flexible bars \"hug the text contents\" and gives them multi-line\n// support and text wrapping, so a headline long enough to wrap has to be able\n// to make its bar taller. Fixing the height would truncate exactly the case\n// the variant was redesigned for.\n\n// The geometry Material Design lays a bar's icon buttons out on. Its tokens\n// give a 4dp leading and trailing space between the bar's edge and the first\n// button's 48dp target, no space between one target and the next, and a 24dp\n// icon centred in each — so a glyph lands 4 + 12 = 16dp in, on the page's own\n// margin.\n//\n// The library's icon button draws a 40dp box with its 48dp target out of\n// flow, so a slot pads half the difference either side and puts the whole\n// difference between two buttons, which lays the targets edge to edge as the\n// tokens do. The target is IconButton's TARGET_SIZE, a literal there for the\n// reason it gives: it is a floor the page states, not a step of the control\n// scale.\nconst ICON_BUTTON_TARGET = '48px';\nconst ICON_SIZE = '24px';\n\n// How far an icon sits inside its target, which is how much less than the\n// content inset the row is padded on an edge that holds a slot. That is what\n// puts a leading glyph, rather than the edge of its target, at the inset.\nconst GLYPH_INSET = `(${ICON_BUTTON_TARGET} - ${ICON_SIZE}) / 2`;\nconst HEIGHTS = {\n  lg: {\n    plain: '120px',\n    withSubtitle: '152px'\n  },\n  md: {\n    plain: '112px',\n    withSubtitle: '136px'\n  },\n  sm: {\n    plain: `${COLLAPSED_BLOCK_SIZE}px`,\n    withSubtitle: `${COLLAPSED_BLOCK_SIZE}px`\n  }\n} as const;\n\n// What a flexible bar collapses to, which is the small bar exactly. Material\n// Design does not describe the collapsed large bar as a state of its own — it\n// describes it as becoming the small bar, which is why this reads off the same\n// table rather than being a fourth height.\nconst COLLAPSED_HEIGHT = HEIGHTS.sm.plain;\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)';\nconst styles = {\n  pinned: {\n    k87sOh: \"x13vifvy\",\n    kVAEAm: \"x7wzq59\",\n    kY2c9j: \"xfj7q76\",\n    $$css: true\n  },\n  root: {\n    k6CgDc: \"x12w9bfk\",\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"x14s9m32\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kjj79g: \"xl56j7k\",\n    kIyJzY: \"xioksi3\",\n    k1ekBW: \"x8u3r54\",\n    kAMwcw: \"x1seskgd\",\n    $$css: true\n  },\n  row: {\n    kGNEyG: \"x6s0dn4\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kOIVth: \"xzoy561\",\n    kzqmXN: \"xh8yej3\",\n    kUOVxO: \"xvueqy4\",\n    $$css: true\n  },\n  scrolled: {\n    kWkggS: \"x1mjdul6\",\n    kL6WhQ: \"xszdk7l\",\n    kfdmCh: \"xe3zi7u\",\n    kt9PQ7: \"x15anc7y\",\n    $$css: true\n  }\n};\n\n// One entry per size, and each names a type role rather than a figure.\n// Material Design's own tokens are `md.comp.app-bar.<size>.title.font`,\n// aliases onto the type scale rather than sizes of their own, so this maps to\n// the scale the same way and lets Text apply it.\nconst HEADLINE_VARIANT = {\n  lg: 'headlineMedium',\n  md: 'headlineSmall',\n  sm: 'titleLarge'\n} as const;\n\n// The headline is the page's title in Material Design's model, so it is the\n// page's <h1> unless the call site says otherwise. `headingLevel` is what says\n// otherwise, and a bar drawn beside another bar — one per pane in a\n// `ListDetail` or a `SupportingPane` — or under a page heading of its own\n// should lower it.\n//\n// Built here rather than kept as a constant per level: `headline` becomes the\n// heading's children, so a call site cannot demote the heading by passing one\n// of its own. `headline={<h2>…</h2>}` renders an h2 inside the h1 — two\n// headings where one was wanted, which React does not warn about.\n//\n// The level is looked up rather than interpolated into a tag name. `h7` is a\n// custom element as far as React is concerned, so it renders without a word\n// said and leaves the outline worse than the default would have. The prop's\n// type is the six levels, and a value outside them from a call site the type\n// does not reach — `NaN`, which rounded and clamped to no element at all and\n// took the headline out of the outline — falls back to the default h1.\n// Disclosure's own `headingLevel` hands the number to React Aria, which is\n// why that one needs no equivalent.\nconst HEADINGS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] as const;\nfunction heading(level: number) {\n  const known = Number.isInteger(level) && level >= 1 && level <= 6;\n  return createElement(known ? HEADINGS[level - 1] : HEADINGS[0]);\n}\nconst PARAGRAPH = <p />;\n\n// Height is the one value the call site does not choose, and it depends on two\n// props at once, so it is a function style rather than one key per\n// combination. StyleX writes it to a custom property inline, the same\n// mechanism Feed uses for its cell minimum.\nconst _temp = {\n  kAzted: \"x1chvrdh\",\n  \"$$css\": true\n};\nconst heightStyles = {\n  root: (minBlockSize: string) => [_temp, {\n    \"--x-minBlockSize\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(minBlockSize)\n  }]\n};\n\n// The row's measure and inset both come from the call site, so both are\n// function styles too. Each edge is worked out on its own: where it holds a\n// slot the row stops short of the inset by GLYPH_INSET, so the glyph rather\n// than its target is what sits at the inset, and where it holds none the\n// headline itself starts there. Clamped at zero, since an inset smaller than\n// a glyph's own room would otherwise ask for a negative padding, which CSS\n// throws away whole.\nconst _temp2 = {\n  ks0D6T: \"x13i5qev\",\n  \"$$css\": true\n};\nconst rowStyles = {\n  root: (start: string, end: string, maxInlineSize: string) => [_temp2, {\n    kwRFfy: end != null ? \"x120eax6\" : end,\n    kZCmMZ: start != null ? \"xnvo3vl\" : start,\n    $$css: true\n  }, {\n    \"--x-maxInlineSize\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(maxInlineSize),\n    \"--x-paddingInlineEnd\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(end),\n    \"--x-paddingInlineStart\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(start)\n  }]\n};\ntype AppBarProps = Omit<RenderComponentProps<'header'>, 'children'> & {\n  /**\n   * Which of Material Design's alignments the text takes. `center` is the\n   * configuration that replaced the old center-aligned variant.\n   * @default 'start'\n   */\n  align?: 'center' | 'start';\n  /**\n   * Collapses a flexible bar to the height and headline of the small one, for\n   * a bar `pinned` over content that has been scrolled. Material Design\n   * specifies it for the flexible sizes, and without it a pinned `lg` costs\n   * 152px of the viewport for as long as the page is open.\n   *\n   * Controlled, and for the same reason `scrolled` is: only the app knows\n   * which element scrolls, and how far into it the bar should have finished\n   * collapsing. `useAppBarScroll` derives both from that element's scroll,\n   * and is the way to set them unless the app needs a rule of its own.\n   *\n   * Ignored on `sm`, which is already the height this collapses to. The\n   * subtitle goes with the height, since there is no room for a second line\n   * in the small bar.\n   *\n   * Collapsing hands the page back the height the bar gives up, and a bar\n   * whose state is read off the scroll offset can then undo itself in two\n   * ways. Both move the offset back under the threshold, so the bar expands,\n   * the page regains its height, and the two take turns for as long as the\n   * reader stays there.\n   *\n   * - **Scroll anchoring.** Browsers answer a change in height above the\n   *   viewport by moving the offset by the same amount, to keep the content\n   *   in place. Give the scroll container `overflow-anchor: none`, which is\n   *   also the movement you want: the content follows the bar's bottom edge\n   *   up rather than standing still while the bar shrinks behind it.\n   * - **The shorter page.** A page that overflows by less than the threshold\n   *   plus the height the bar gives back cannot scroll that far once the bar\n   *   has collapsed, so the browser pulls the offset back inside it. No\n   *   threshold avoids this, since the band moves with it; what does is not\n   *   collapsing on such a page, which is the rule `useAppBarScroll` applies.\n   * @default false\n   */\n  collapsed?: boolean;\n  /**\n   * Where the bar's content starts on each edge: the headline where nothing\n   * comes before it, and the leading icon's glyph where something does, with\n   * the headline after the icon button's target. The trailing edge is the\n   * same mirrored. Any length works, `0` included, for a bar drawn flush.\n   *\n   * The default is Material Design's own margin for a top app bar, the\n   * spacing scale's `lg` step, which is also the margin it gives body\n   * content, so a bar and the page beneath line up without either being told\n   * about the other. Set it to the page's gutter where that differs.\n   * @default spacing.lg\n   */\n  contentInset?: string;\n  /**\n   * How wide the bar's contents may run before they stop growing, with the\n   * row centred in whatever is left. The bar's own surface still paints edge\n   * to edge.\n   *\n   * This is what lines a full-bleed bar up with a page whose content sits in\n   * a measure: give it the page's measure, and `contentInset` the page's\n   * gutter. Unset, the row is as wide as the bar.\n   */\n  contentMaxInlineSize?: string;\n  /**\n   * Where the headline sits in the page's outline, as one of the six heading\n   * levels. A screen reader moves between headings, so a bar drawn beside\n   * another bar, or under a page heading of its own, should lower it. A value\n   * outside the six that reaches it untyped falls back to 1.\n   * @default 1\n   */\n  headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;\n  /** The page's title. Wraps rather than truncating, and grows the bar with it. */\n  headline?: ReactNode;\n  /** Usually a back or menu icon button. Sits before the text. */\n  leading?: ReactNode;\n  /**\n   * Holds the bar at the top of its scroll container while the content\n   * scrolls beneath it, and keeps it painted over that content. The bar\n   * still needs a scrolling ancestor to stick inside: the window, or an\n   * element with its own overflow. A pinned bar is the one `collapsed` and\n   * `scrolled` are for.\n   * @default false\n   */\n  pinned?: boolean;\n  /**\n   * Whether the content beneath has been scrolled. Material Design separates\n   * a bar from scrolled content with a fill colour rather than a shadow, and\n   * this is what applies it.\n   *\n   * Controlled, with no listener of its own: only the app knows which element\n   * scrolls, and a bar that watched the window would be wrong inside every\n   * pane and dialog that scrolls independently.\n   * @default false\n   */\n  scrolled?: boolean;\n  /**\n   * Height and headline size, as steps of the library's size scale. `sm` is\n   * Material Design's small bar, a fixed 64px; `md` and `lg` are its medium\n   * and large flexible bars, which hug their text.\n   * @default 'sm'\n   */\n  size?: 'lg' | 'md' | 'sm';\n  /** A second line under the headline. Makes `md` and `lg` taller. */\n  subtitle?: ReactNode;\n  /** Actions, at the far end. Usually icon buttons. */\n  trailing?: ReactNode;\n};\n\n/**\n * Material Design's app bar: the container at the top of a page carrying its\n * title, one or two actions, and the way back out.\n *\n * Three sizes. `sm` is a fixed 64px bar for a page whose title is a label;\n * `md` and `lg` are the flexible bars, which give the headline a larger\n * type role and grow to fit a subtitle or a headline that wraps.\n *\n * It paints its own surface, unlike the layout components, because separating\n * itself from the content beneath is the job — which is also why `scrolled`\n * and `collapsed` exist. Neither watches the page: only the app knows which\n * element scrolls, so both are set from its own scroll handler.\n */\nfunction AppBar({\n  align = 'start',\n  collapsed = false,\n  contentInset = spacing.lg,\n  contentMaxInlineSize = 'none',\n  headingLevel = 1,\n  headline,\n  leading,\n  pinned = false,\n  render,\n  scrolled = false,\n  size = 'sm',\n  subtitle,\n  trailing,\n  ...props\n}: AppBarProps) {\n  // `sm` is already what the flexible bars collapse to, so collapsing it is\n  // a no-op rather than an error. A bar whose size is chosen at the call site\n  // from a breakpoint would otherwise have to guard the prop as well.\n  const collapse = collapsed && size !== 'sm';\n  const expandedHeight = hasContent(subtitle) ? HEIGHTS[size].withSubtitle : HEIGHTS[size].plain;\n  const height = collapse ? COLLAPSED_HEIGHT : expandedHeight;\n  const hasLeading = hasContent(leading);\n  const hasTrailing = hasContent(trailing);\n  return useRender({\n    defaultTagName: 'header',\n    props: {\n      ...props,\n      children: <div {...stylex.props(styles.row, rowStyles.root(edgePadding(contentInset, hasLeading), edgePadding(contentInset, hasTrailing), contentMaxInlineSize))}>\n          {!hasLeading ? null : <div className=\"x6s0dn4 x9f619 x78zum5 x2lah0s x1r8zjiw x1let9r4\">{leading}</div>}\n          <div {...{\n          0: {\n            className: \"x9f619 x78zum5 xdt5ytf x1iyjqo2 xkjl1po xl56j7k xeuugli xj0a0fe x1cmllll\"\n          },\n          1: {\n            className: \"x9f619 x78zum5 xdt5ytf x1iyjqo2 xkjl1po xl56j7k xeuugli xj0a0fe x1cmllll x2b8uid\"\n          }\n        }[!!(align === 'center') << 0]}>\n            {!hasContent(headline) ? null : <Text className=\"x12w9bfk xioksi3 x1nxaspg x1seskgd\" render={heading(headingLevel)} variant={collapse ? HEADLINE_VARIANT.sm : HEADLINE_VARIANT[size]}>\n                {headline}\n              </Text>}\n            {!hasContent(subtitle) || collapse ? null : <Text render={PARAGRAPH} tone=\"muted\" variant=\"bodyMedium\">\n                {subtitle}\n              </Text>}\n          </div>\n          {!hasTrailing ? null : <div className=\"x6s0dn4 x9f619 x78zum5 x2lah0s x1r8zjiw x1let9r4\">{trailing}</div>}\n        </div>,\n      ...mergeStyles(stylex.props(styles.root, heightStyles.root(height), scrolled && styles.scrolled, pinned && styles.pinned), props)\n    },\n    render\n  });\n}\n\n/**\n * The row's padding on one edge, for the inset the call site gave.\n *\n * A bare `0` is the one length CSS accepts without a unit, and the one it\n * rejects inside `max()`, where it reads as a number, so it is given its\n * unit before the arithmetic sees it.\n */\nfunction edgePadding(contentInset: string, hasSlot: boolean) {\n  const inset = contentInset.trim() === '0' ? '0px' : contentInset;\n  return hasSlot ? `max(0px, ${inset} - ${GLYPH_INSET})` : inset;\n}\nexport type { AppBarProps };\nexport default AppBar;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["c","_c","ReactNode","stylex","createElement","useLayoutEffect","useRef","RenderComponentProps","COLLAPSED_BLOCK_SIZE","hasContent","useRender","layers","mergeStyles","colors","motion","sizing","spacing","motionDurationMs","motionEasing","Text","ICON_BUTTON_TARGET","ICON_SIZE","GLYPH_INSET","HEIGHTS","lg","plain","withSubtitle","md","sm","const","COLLAPSED_HEIGHT","FORCED_COLORS","styles","pinned","k87sOh","kVAEAm","kY2c9j","$$css","root","k6CgDc","kGNEyG","kWkggS","kB7OPa","k1xSpc","kjj79g","kIyJzY","k1ekBW","kAMwcw","row","kfiyM8","kC13JO","kumcoG","kzqmXN","kUOVxO","scrolled","kL6WhQ","kfdmCh","kt9PQ7","text","kSGwAc","kXwgrk","kJuA4N","kE4Cay","k7Eaqz","kHjlTd","k8WAf4","textBelow","textCenter","k9WMMc","twoRows","kTDh7v","k4zj60","kWgvks","k5JduY","kVb13B","k5jvz2","HEADLINE_VARIANT","SUBTITLE_VARIANT","HEADINGS","heading","level","known","Number","isInteger","PARAGRAPH","_temp","kAzted","heightStyles","minBlockSize","val","undefined","_temp2","ks0D6T","rowStyles","start","end","maxInlineSize","kwRFfy","kZCmMZ","tracks","gridTemplateRows","k9llMU","_temp3","keoZOQ","textStyles","inset","reach","marginBlockStart","UNDER_TARGETS","AppBarProps","Omit","align","collapsed","contentInset","contentMaxInlineSize","headingLevel","headline","leading","size","subtitle","trailing","LINES","Geometry","height","lines","Line","x","y","AppBar","t0","$","t1","t2","t3","t4","t5","t6","render","t7","t8","props","collapse","below","expandedHeight","hasLeading","hasTrailing","textRef","useCollapseMotion","t9","t10","edgePadding","t11","t12","glyphRoom","t13","t14","t15","t16","t17","t18","t19","children","t20","defaultTagName","drawnAt","bar","HTMLElement","settled","getBoundingClientRect","map","selector","index","line","element","querySelector","moved","matrixOf","a","e","f","hasSlot","withUnit","geometryOf","frame","box","edge","left","right","isRightToLeft","parseFloat","getComputedStyle","fontSize","glyphTopOf","top","Element","range","document","createRange","selectNodeContents","first","getClientRects","item","direction","DOMMatrixReadOnly","transform","originOf","glyphs","prefersReducedMotion","window","matchMedia","matches","collapsedBefore","Symbol","for","animations","current","parentElement","moving","some","_temp4","last","from","animation_0","animation","cancel","to","timing","duration","medium1","easing","emphasized","heights","animate","blockSize","clipPath","entries","was","is","origin","push","transformOrigin","playState","trim","_c","props","stylex.props"],"sources":["../../../src/components/app-bar/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport { createElement, useLayoutEffect, useRef } from 'react';\nimport type { RenderComponentProps } from '../../render/useRender';\nimport { COLLAPSED_BLOCK_SIZE } from '../../hooks/useAppBarScroll';\nimport { hasContent } from '../../render/content';\nimport { useRender } from '../../render/useRender';\nimport '../../styles/layers.stylex';\nimport { layers } from '../../styles/layers.stylex';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, sizing, spacing } from '../../tokens/design.tokens.stylex';\nimport { motionDurationMs, motionEasing } from '../../tokens/values';\nimport Text from '../text';\n\n// Material Design's app bar, in the three sizes the spec recommends.\n//\n// `md` and `lg` are Material Design's medium and large *flexible* bars, the\n// newer of the two sets the spec gives and the one it recommends, which is why\n// those two steps are theirs: their heights, their two rows, and their type\n// roles, which HEADLINE_VARIANT and SUBTITLE_VARIANT name.\n//\n// Material Design also merged the old center-aligned variant into small as a\n// configuration rather than a variant, which is why alignment is a prop here\n// and applies to every size.\n//\n// Heights are Material Design's, and they are minimums rather than fixed. The\n// spec says the flexible bars \"hug the text contents\" and gives them multi-line\n// support and text wrapping, so a headline long enough to wrap has to be able\n// to make its bar taller. Fixing the height would truncate exactly the case\n// the variant was redesigned for.\n//\n// The small bar is one row: the leading slot, the text and the trailing slot\n// side by side in a 64px strip. The flexible bars are two, as Material Design\n// lays them out. The first is that same strip holding the slots alone, and the\n// second runs the text under it across the whole measure, so a long headline\n// wraps against the bar's width rather than against what the slots leave.\n// Collapsing moves the text up into the strip, which is the small bar exactly,\n// and the slots never move: they are in the strip in both states.\n\n// The geometry Material Design lays a bar's icon buttons out on. Its tokens\n// give a 4dp leading and trailing space between the bar's edge and the first\n// button's 48dp target, no space between one target and the next, and a 24dp\n// icon centred in each — so a glyph lands 4 + 12 = 16dp in, on the page's own\n// margin.\n//\n// The library's icon button draws a 40dp box with its 48dp target out of\n// flow, so a slot pads half the difference either side and puts the whole\n// difference between two buttons, which lays the targets edge to edge as the\n// tokens do. The target is IconButton's TARGET_SIZE, a literal there for the\n// reason it gives: it is a floor the page states, not a step of the control\n// scale.\nconst ICON_BUTTON_TARGET = '48px';\nconst ICON_SIZE = '24px';\n\n// How far an icon sits inside its target, which is how much less than the\n// content inset the row is padded on an edge that holds a slot. That is what\n// puts a leading glyph, rather than the edge of its target, at the inset.\nconst GLYPH_INSET = `(${ICON_BUTTON_TARGET} - ${ICON_SIZE}) / 2`;\nconst HEIGHTS = {\n  lg: {\n    plain: '120px',\n    withSubtitle: '152px'\n  },\n  md: {\n    plain: '112px',\n    withSubtitle: '136px'\n  },\n  sm: {\n    plain: `${COLLAPSED_BLOCK_SIZE}px`,\n    withSubtitle: `${COLLAPSED_BLOCK_SIZE}px`\n  }\n} as const;\n\n// What a flexible bar collapses to, which is the small bar exactly. Material\n// Design does not describe the collapsed large bar as a state of its own — it\n// describes it as becoming the small bar, which is why this reads off the same\n// table rather than being a fourth height.\nconst COLLAPSED_HEIGHT = HEIGHTS.sm.plain;\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)';\nconst styles = {\n  pinned: {\n    k87sOh: \"x13vifvy\",\n    kVAEAm: \"x7wzq59\",\n    kY2c9j: \"xfj7q76\",\n    $$css: true\n  },\n  root: {\n    k6CgDc: \"x12w9bfk\",\n    kGNEyG: \"x1qjc9v5\",\n    kWkggS: \"x14s9m32\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kjj79g: \"xl56j7k\",\n    kIyJzY: \"xioksi3\",\n    k1ekBW: \"x15406qy\",\n    kAMwcw: \"x1seskgd\",\n    $$css: true\n  },\n  row: {\n    kfiyM8: \"x10ukxgv\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"xrvj5dj\",\n    kC13JO: \"x97ohe\",\n    kumcoG: \"xx9t13c\",\n    kzqmXN: \"xh8yej3\",\n    kUOVxO: \"xvueqy4\",\n    $$css: true\n  },\n  scrolled: {\n    kWkggS: \"x1mjdul6\",\n    kL6WhQ: \"xszdk7l\",\n    kfdmCh: \"xe3zi7u\",\n    kt9PQ7: \"x15anc7y\",\n    $$css: true\n  },\n  text: {\n    kSGwAc: \"xamitd3\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kXwgrk: \"xdt5ytf\",\n    kJuA4N: \"x12gd1sl\",\n    kE4Cay: \"xkjl1po\",\n    k7Eaqz: \"xeuugli\",\n    kHjlTd: \"xj0a0fe\",\n    k8WAf4: \"x1cmllll\",\n    $$css: true\n  },\n  textBelow: {\n    kSGwAc: \"xnav3zx\",\n    k8WAf4: \"xt970qd\",\n    $$css: true\n  },\n  textCenter: {\n    k9WMMc: \"x2b8uid\",\n    $$css: true\n  }\n};\n\n// The flexible bars' two rows: the strip with the slots at either end, and the\n// text under it across all three columns. The second row takes whatever height\n// the bar has beyond the strip, and the text sits at its bottom.\n//\n// Material Design places that text by its last baseline, 28px above the large\n// bar's bottom edge and 24px above the medium one's, and that is the reading\n// that makes the heights above come out, together with the reach textStyles\n// gives the text: the same figures as padding under the line box would make a\n// plain large bar 64 + 44 + 28 = 136px rather than 120px. CSS gives a box no\n// margin below its baseline, so the strut does it.\n// An empty box in the same grid area, aligned on its last baseline with the\n// text, has its baseline at its own bottom edge and the margin under that, so\n// the pair is held that far off the row's end. Literals rather than tokens,\n// like HEIGHTS: they are measurements the spec gives this component, not steps\n// of the spacing scale, which has no 28.\nconst twoRows = {\n  lg: {\n    kTDh7v: \"x1mna9mr\",\n    k4zj60: \"x1gmr53x\",\n    kWgvks: \"xx38sju\",\n    k5JduY: \"x1s928wv\",\n    kVb13B: \"x1vlsijy\",\n    k5jvz2: \"x1fh8phi\",\n    kC13JO: \"xc3o5yk\",\n    $$css: true\n  },\n  md: {\n    kTDh7v: \"x1mna9mr\",\n    k4zj60: \"x1gmr53x\",\n    kWgvks: \"xx38sju\",\n    k5JduY: \"x1s928wv\",\n    kVb13B: \"x1vlsijy\",\n    k5jvz2: \"x1v6yq59\",\n    kC13JO: \"xc3o5yk\",\n    $$css: true\n  }\n};\n\n// One entry per size, and each names a type role rather than a figure.\n// Material Design's own tokens are `md.comp.app-bar.<size>.title.font`,\n// aliases onto the type scale rather than sizes of their own, so this maps to\n// the scale the same way and lets Text apply it. The roles are the flexible\n// bars': headlineMedium on medium and displaySmall on large, which is a step\n// up from what the spec's other medium and large bars take, and the small\n// bar's titleLarge.\nconst HEADLINE_VARIANT = {\n  lg: 'displaySmall',\n  md: 'headlineMedium',\n  sm: 'titleLarge'\n} as const;\n\n// The subtitle's role, by the same tokens' `subtitle.font`. Material Design\n// gives each size its own rather than one role at every size, and a collapsed\n// bar takes the small bar's, as it takes its headline's.\nconst SUBTITLE_VARIANT = {\n  lg: 'titleMedium',\n  md: 'labelLarge',\n  sm: 'labelMedium'\n} as const;\n\n// The headline is the page's title in Material Design's model, so it is the\n// page's <h1> unless the call site says otherwise. `headingLevel` is what says\n// otherwise, and a bar drawn beside another bar — one per pane in a\n// `ListDetail` or a `SupportingPane` — or under a page heading of its own\n// should lower it.\n//\n// Built here rather than kept as a constant per level: `headline` becomes the\n// heading's children, so a call site cannot demote the heading by passing one\n// of its own. `headline={<h2>…</h2>}` renders an h2 inside the h1 — two\n// headings where one was wanted, which React does not warn about.\n//\n// The level is looked up rather than interpolated into a tag name. `h7` is a\n// custom element as far as React is concerned, so it renders without a word\n// said and leaves the outline worse than the default would have. The prop's\n// type is the six levels, and a value outside them from a call site the type\n// does not reach — `NaN`, which rounded and clamped to no element at all and\n// took the headline out of the outline — falls back to the default h1.\n// Disclosure's own `headingLevel` hands the number to React Aria, which is\n// why that one needs no equivalent.\nconst HEADINGS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] as const;\nfunction heading(level: number) {\n  const known = Number.isInteger(level) && level >= 1 && level <= 6;\n  return createElement(known ? HEADINGS[level - 1] : HEADINGS[0]);\n}\nconst PARAGRAPH = <p />;\n\n// Height is the one value the call site does not choose, and it depends on two\n// props at once, so it is a function style rather than one key per\n// combination. StyleX writes it to a custom property inline, the same\n// mechanism Feed uses for its cell minimum.\n//\n// The row takes it too, and that is for the collapse's motion. The bar's\n// height is animated, and a row that only stretched to it would be laid out\n// at every height the bar passed through: the second row is the room the bar\n// has beyond the strip, so its text would ride up and down with the bar\n// rather than holding the place the animation moves it to. With the minimum\n// of its own, the row is laid out once, at the height the bar is heading for,\n// and the bar clips it until it gets there.\nconst _temp = {\n  kAzted: \"x1chvrdh\",\n  \"$$css\": true\n};\nconst heightStyles = {\n  root: (minBlockSize: string) => [_temp, {\n    \"--x-minBlockSize\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(minBlockSize)\n  }]\n};\n\n// The row's measure and inset both come from the call site, so both are\n// function styles too. Each edge is worked out on its own: where it holds a\n// slot the row stops short of the inset by GLYPH_INSET, so the glyph rather\n// than its target is what sits at the inset, and where it holds none the\n// headline itself starts there. Clamped at zero, since an inset smaller than\n// a glyph's own room would otherwise ask for a negative padding, which CSS\n// throws away whole.\n//\n// The tracks are a function style for a different reason: the strip is the\n// small bar's height, which is the hook's constant, and the compiler cannot\n// read a constant out of another module — see FORCED_COLORS.\nconst _temp2 = {\n  ks0D6T: \"x13i5qev\",\n  \"$$css\": true\n};\nconst rowStyles = {\n  root: (start: string, end: string, maxInlineSize: string) => [_temp2, {\n    kwRFfy: end != null ? \"x120eax6\" : end,\n    kZCmMZ: start != null ? \"xnvo3vl\" : start,\n    $$css: true\n  }, {\n    \"--x-maxInlineSize\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(maxInlineSize),\n    \"--x-paddingInlineEnd\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(end),\n    \"--x-paddingInlineStart\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(start)\n  }],\n  tracks: (gridTemplateRows: string) => [{\n    k9llMU: gridTemplateRows != null ? \"x1xxtoay\" : gridTemplateRows,\n    $$css: true\n  }, {\n    \"--x-gridTemplateRows\": gridTemplateRows != null ? gridTemplateRows : undefined\n  }]\n};\n\n// The text in the second row runs under the slots as well as between them, so\n// it puts back what the row's padding held off an edge for a slot's glyph, and\n// the headline starts on the inset again. A function style for the reason the\n// row's padding is one.\n//\n// It also reaches up into the strip, by the band under the slots' targets,\n// and Material Design's heights depend on that. A large bar's 36/44 headline\n// with its baseline 28px above a 120px bar's edge has the top of its line box\n// inside the strip, and so does the medium bar's 28/36 one: measured, the two\n// bars came out 126px and 115px tall without it. What reaches in is the line's\n// leading and the room above its capitals rather than any glyph, and it stops\n// where the targets do, so nothing a reader can press is under it. A function\n// style because the strip's height is the hook's constant — see rowStyles.\nconst _temp3 = {\n  keoZOQ: \"x1vhfslr\",\n  \"$$css\": true\n};\nconst textStyles = {\n  inset: (start: string, end: string) => [{\n    kwRFfy: end != null ? \"x120eax6\" : end,\n    kZCmMZ: start != null ? \"xnvo3vl\" : start,\n    $$css: true\n  }, {\n    \"--x-paddingInlineEnd\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(end),\n    \"--x-paddingInlineStart\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(start)\n  }],\n  reach: (marginBlockStart: string) => [_temp3, {\n    \"--x-marginBlockStart\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(marginBlockStart)\n  }]\n};\n\n// How far the strip runs on below the slots' targets, which are centred in it.\nconst UNDER_TARGETS = `calc((${COLLAPSED_HEIGHT} - ${ICON_BUTTON_TARGET}) / 2)`;\ntype AppBarProps = Omit<RenderComponentProps<'header'>, 'children'> & {\n  /**\n   * Which of Material Design's alignments the text takes. `center` is the\n   * configuration that replaced the old center-aligned variant.\n   * @default 'start'\n   */\n  align?: 'center' | 'start';\n  /**\n   * Collapses a flexible bar to the height and headline of the small one, for\n   * a bar `pinned` over content that has been scrolled. Material Design\n   * specifies it for the flexible sizes, and without it a pinned `lg` costs\n   * 152px of the viewport for as long as the page is open.\n   *\n   * Controlled, and for the same reason `scrolled` is: only the app knows\n   * which element scrolls, and how far into it the bar should have finished\n   * collapsing. `useAppBarScroll` derives both from that element's scroll,\n   * and is the way to set them unless the app needs a rule of its own.\n   *\n   * Ignored on `sm`, which is already the height this collapses to. The\n   * headline and the subtitle move up into the row the slots sit in and take\n   * the small bar's type roles, which fit both lines in its 64px, and the\n   * slots never leave that row: they stay where they are while the bar\n   * shrinks under them.\n   *\n   * Collapsing hands the page back the height the bar gives up, and a bar\n   * whose state is read off the scroll offset can then undo itself in two\n   * ways. Both move the offset back under the threshold, so the bar expands,\n   * the page regains its height, and the two take turns for as long as the\n   * reader stays there.\n   *\n   * - **Scroll anchoring.** Browsers answer a change in height above the\n   *   viewport by moving the offset by the same amount, to keep the content\n   *   in place. Give the scroll container `overflow-anchor: none`, which is\n   *   also the movement you want: the content follows the bar's bottom edge\n   *   up rather than standing still while the bar shrinks behind it.\n   * - **The shorter page.** A page that overflows by less than the threshold\n   *   plus the height the bar gives back cannot scroll that far once the bar\n   *   has collapsed, so the browser pulls the offset back inside it. No\n   *   threshold avoids this, since the band moves with it; what does is not\n   *   collapsing on such a page, which is the rule `useAppBarScroll` applies.\n   * @default false\n   */\n  collapsed?: boolean;\n  /**\n   * Where the bar's content starts on each edge: the headline where nothing\n   * comes before it, and the leading icon's glyph where something does, with\n   * the headline after the icon button's target. The trailing edge is the\n   * same mirrored. Any length works, `0` included, for a bar drawn flush.\n   *\n   * The default is Material Design's own margin for a top app bar, the\n   * spacing scale's `lg` step, which is also the margin it gives body\n   * content, so a bar and the page beneath line up without either being told\n   * about the other. Set it to the page's gutter where that differs.\n   * @default spacing.lg\n   */\n  contentInset?: string;\n  /**\n   * How wide the bar's contents may run before they stop growing, with the\n   * row centred in whatever is left. The bar's own surface still paints edge\n   * to edge.\n   *\n   * This is what lines a full-bleed bar up with a page whose content sits in\n   * a measure: give it the page's measure, and `contentInset` the page's\n   * gutter. Unset, the row is as wide as the bar.\n   */\n  contentMaxInlineSize?: string;\n  /**\n   * Where the headline sits in the page's outline, as one of the six heading\n   * levels. A screen reader moves between headings, so a bar drawn beside\n   * another bar, or under a page heading of its own, should lower it. A value\n   * outside the six that reaches it untyped falls back to 1.\n   * @default 1\n   */\n  headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;\n  /** The page's title. Wraps rather than truncating, and grows the bar with it. */\n  headline?: ReactNode;\n  /** Usually a back or menu icon button. Sits before the text. */\n  leading?: ReactNode;\n  /**\n   * Holds the bar at the top of its scroll container while the content\n   * scrolls beneath it, and keeps it painted over that content. The bar\n   * still needs a scrolling ancestor to stick inside: the window, or an\n   * element with its own overflow. A pinned bar is the one `collapsed` and\n   * `scrolled` are for.\n   * @default false\n   */\n  pinned?: boolean;\n  /**\n   * Whether the content beneath has been scrolled. Material Design separates\n   * a bar from scrolled content with a fill colour rather than a shadow, and\n   * this is what applies it.\n   *\n   * Controlled, with no listener of its own: only the app knows which element\n   * scrolls, and a bar that watched the window would be wrong inside every\n   * pane and dialog that scrolls independently.\n   * @default false\n   */\n  scrolled?: boolean;\n  /**\n   * Height and headline size, as steps of the library's size scale. `sm` is\n   * Material Design's small bar, a fixed 64px row; `md` and `lg` are its\n   * medium and large flexible bars, which put the text in a row of its own\n   * under the slots and hug it.\n   * @default 'sm'\n   */\n  size?: 'lg' | 'md' | 'sm';\n  /** A second line under the headline. Makes `md` and `lg` taller. */\n  subtitle?: ReactNode;\n  /** Actions, at the far end. Usually icon buttons. */\n  trailing?: ReactNode;\n};\n\n// The text block's two lines: the headline, and the subtitle beside it. The\n// block holds nothing else, and each is drawn as one kind of element.\nconst LINES = [':scope > :is(h1, h2, h3, h4, h5, h6)', ':scope > p'] as const;\n\n/**\n * What collapsing moves, and so what its animation runs between: the bar's\n * height, and each of the text's lines, in the order LINES gives them, with\n * `null` for a line the bar does not draw.\n */\ntype Geometry = {\n  height: number;\n  lines: (Line | null)[];\n};\n\n/**\n * Where one of the text's lines is drawn: the point its glyphs hang from,\n * measured from the bar's own corner, and its type size. The point is the\n * top of the line's first glyphs, on the edge the text hangs from.\n */\ntype Line = {\n  size: number;\n  x: number;\n  y: number;\n};\n\n/**\n * Material Design's app bar: the container at the top of a page carrying its\n * title, one or two actions, and the way back out.\n *\n * Three sizes. `sm` is a fixed 64px bar for a page whose title is a label;\n * `md` and `lg` are the flexible bars, which give the headline a larger\n * type role in a row of its own under the slots, and grow to fit a subtitle\n * or a headline that wraps.\n *\n * It paints its own surface, unlike the layout components, because separating\n * itself from the content beneath is the job — which is also why `scrolled`\n * and `collapsed` exist. Neither watches the page: only the app knows which\n * element scrolls, so both are set from its own scroll handler.\n */\nfunction AppBar({\n  align = 'start',\n  collapsed = false,\n  contentInset = spacing.lg,\n  contentMaxInlineSize = 'none',\n  headingLevel = 1,\n  headline,\n  leading,\n  pinned = false,\n  render,\n  scrolled = false,\n  size = 'sm',\n  subtitle,\n  trailing,\n  ...props\n}: AppBarProps) {\n  // `sm` is already what the flexible bars collapse to, so collapsing it is\n  // a no-op rather than an error. A bar whose size is chosen at the call site\n  // from a breakpoint would otherwise have to guard the prop as well.\n  const collapse = collapsed && size !== 'sm';\n  // The flexible bars at their full height are the only state with a second\n  // row. Collapsed, they are the small bar.\n  const below = size !== 'sm' && !collapse;\n  const expandedHeight = hasContent(subtitle) ? HEIGHTS[size].withSubtitle : HEIGHTS[size].plain;\n  const height = collapse ? COLLAPSED_HEIGHT : expandedHeight;\n  const hasLeading = hasContent(leading);\n  const hasTrailing = hasContent(trailing);\n  const textRef = useCollapseMotion(collapse, align);\n  return useRender({\n    defaultTagName: 'header',\n    props: {\n      ...props,\n      children: <div {...stylex.props(styles.row, rowStyles.root(edgePadding(contentInset, hasLeading), edgePadding(contentInset, hasTrailing), contentMaxInlineSize), rowStyles.tracks(below ? `minmax(${COLLAPSED_HEIGHT}, auto) 1fr` : `minmax(${COLLAPSED_HEIGHT}, auto)`), heightStyles.root(height), below && twoRows[size])}>\n          {!hasLeading ? null : <div className=\"x6s0dn4 xamitd3 x9f619 x78zum5 x1r8zjiw x1let9r4 x1kxrqrs x15ir4sr\">{leading}</div>}\n          <div {...stylex.props(styles.text, below && styles.textBelow, below && textStyles.inset(glyphRoom(contentInset, hasLeading), glyphRoom(contentInset, hasTrailing)), below && textStyles.reach(`calc(-1 * ${UNDER_TARGETS})`), align === 'center' && styles.textCenter)} ref={textRef}>\n            {!hasContent(headline) ? null : <Text render={heading(headingLevel)} variant={collapse ? HEADLINE_VARIANT.sm : HEADLINE_VARIANT[size]}>\n                {headline}\n              </Text>}\n            {!hasContent(subtitle) ? null : <Text render={PARAGRAPH} tone=\"muted\" variant={collapse ? SUBTITLE_VARIANT.sm : SUBTITLE_VARIANT[size]}>\n                {subtitle}\n              </Text>}\n          </div>\n          {!hasTrailing ? null : <div className=\"x6s0dn4 xamitd3 x9f619 x78zum5 x1r8zjiw x1let9r4 x1txd71x x6aqprb\">\n              {trailing}\n            </div>}\n        </div>,\n      ...mergeStyles(stylex.props(styles.root, heightStyles.root(height), scrolled && styles.scrolled, pinned && styles.pinned), props)\n    },\n    render\n  });\n}\n\n/**\n * Where an animation still under way has the bar and the text drawn: the\n * height it holds the bar at, and each line where its transform has taken it\n * and at the size its scale has reached. A line scales about the point it\n * hangs from, so the transform's translation is how far that point has moved.\n */\nfunction drawnAt(bar: HTMLElement, text: HTMLElement, settled: Geometry): Geometry {\n  return {\n    height: bar.getBoundingClientRect().height,\n    lines: LINES.map((selector, index) => {\n      const line = settled.lines[index];\n      const element = text.querySelector(selector);\n      if (line === null || element === null) {\n        return null;\n      }\n      const moved = matrixOf(element);\n      return {\n        size: line.size * moved.a,\n        x: line.x + moved.e,\n        y: line.y + moved.f\n      };\n    })\n  };\n}\n\n/** The row's padding on one edge, for the inset the call site gave. */\nfunction edgePadding(contentInset: string, hasSlot: boolean) {\n  const inset = withUnit(contentInset);\n  return hasSlot ? `max(0px, ${inset} - ${GLYPH_INSET})` : inset;\n}\n\n/**\n * Where the bar and each of the text's lines are drawn. A line's point is on\n * the edge its text hangs from: the middle when it is centred, and the start\n * edge otherwise, which is the right edge in a right-to-left page. Each line\n * is as wide as the text block, so that edge is its box's.\n */\nfunction geometryOf(bar: HTMLElement, text: HTMLElement, align: 'center' | 'start'): Geometry {\n  const frame = bar.getBoundingClientRect();\n  return {\n    height: frame.height,\n    lines: LINES.map(selector => {\n      const element = text.querySelector(selector);\n      if (element === null) {\n        return null;\n      }\n      const box = element.getBoundingClientRect();\n      const edge = align === 'center' ? (box.left + box.right) / 2 : isRightToLeft(element) ? box.right : box.left;\n      return {\n        size: Number.parseFloat(getComputedStyle(element).fontSize),\n        x: edge - frame.left,\n        y: glyphTopOf(element) - frame.top\n      };\n    })\n  };\n}\n\n/**\n * What the row's padding held back on one edge for a slot's glyph, which the\n * text in the second row puts back: the inset less `edgePadding`, so the\n * smaller of the inset and GLYPH_INSET.\n */\nfunction glyphRoom(contentInset: string, hasSlot: boolean) {\n  return hasSlot ? `min(${withUnit(contentInset)}, ${GLYPH_INSET})` : '0px';\n}\n\n/**\n * Where an element's first glyphs start, which is below its box's top by\n * half its line's leading. The leading is a share of the line height, and\n * the two roles a line moves between do not keep line height and type size\n * in one ratio, so a line scaled by its type size from its box's corner\n * starts its glyphs off where they were drawn: about a pixel, for a large\n * bar's headline.\n */\nfunction glyphTopOf(element: Element) {\n  const range = document.createRange();\n  range.selectNodeContents(element);\n  const first = range.getClientRects().item(0);\n  return first === null ? element.getBoundingClientRect().top : first.top;\n}\n\n/** Whether the text runs right to left, which decides the edge it hangs from. */\nfunction isRightToLeft(element: Element) {\n  return getComputedStyle(element).direction === 'rtl';\n}\n\n/** The transform an element is drawn with, `none` reading as no change. */\nfunction matrixOf(element: Element) {\n  return new DOMMatrixReadOnly(getComputedStyle(element).transform);\n}\n\n/**\n * The point a line scales about, in its own box: the top of its glyphs, on\n * the edge its text hangs from.\n */\nfunction originOf(element: Element, align: 'center' | 'start') {\n  const edge = align === 'center' ? 'center' : isRightToLeft(element) ? 'right' : 'left';\n  const glyphs = glyphTopOf(element) - element.getBoundingClientRect().top;\n  return `${edge} ${glyphs}px`;\n}\n\n/**\n * Read when the bar changes state rather than once at mount, so a reader who\n * changes the setting is answered by the next collapse.\n */\nfunction prefersReducedMotion() {\n  return window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n}\n\n/**\n * Animates a flexible bar between its two states, and returns the ref for the\n * text block whose lines it moves.\n *\n * Collapsing changes the bar's layout rather than a value — the text leaves\n * the second row for the strip, both lines take the small bar's type roles,\n * and the bar's height drops from a minimum to whatever its content takes —\n * so there is nothing for a CSS transition to interpolate. This plays it the\n * other way round: the change has already been laid out when the effect runs,\n * so the bar is animated from the height it had to the one it has, and each\n * line from where and how large it was drawn to where and how large it is,\n * by a transform that starts at the difference and ends at none. A line\n * scales about the point its glyphs hang from, which is what lands its first\n * frame on the glyphs it replaces — see glyphTopOf. A scale rather than a\n * transition of the type itself, which would lay the text out again on every\n * frame and move it away from the place it was measured at. Each line moves\n * on its own rather than with the block, since the subtitle starts under the\n * headline's line, whose height changes with its role. The slots need\n * nothing: they are in the strip in both states.\n *\n * The bar's height is animated through `min-block-size` as well as its\n * height, since the minimum would otherwise hold an expanding bar at its new\n * height from the first frame, and it is clipped while it moves, since an\n * expanding bar's second row is laid out at full height from the start.\n *\n * Where the text was is measured after every commit that leaves the state\n * alone, so it is current when the state does change. A change that lands\n * while the last one is still moving starts from where the bar and the text\n * are drawn at that moment, read off the running animations, so reversing\n * mid-way turns round rather than jumping to the end first.\n *\n * Its timing is the root's `background-color` transition's, the `medium1`\n * duration and the emphasized curve, so the fill and the height move as one.\n * Those come from tokens/values rather than the theme, since `animate()`\n * throws on a var(), and the motion is skipped under reduced motion, as the\n * root's transition is.\n */\nfunction useCollapseMotion(collapse: boolean, align: 'center' | 'start') {\n  const textRef = useRef<HTMLDivElement>(null);\n  const settled = useRef<Geometry | null>(null);\n  const collapsedBefore = useRef(collapse);\n  const animations = useRef<Animation[]>([]);\n  useLayoutEffect(() => {\n    const text = textRef.current;\n    const bar = text?.parentElement?.parentElement;\n    if (text == null || bar == null) {\n      return;\n    }\n    const moving = animations.current.some(animation => animation.playState === 'running');\n    if (collapsedBefore.current === collapse) {\n      if (!moving) {\n        settled.current = geometryOf(bar, text, align);\n      }\n      return;\n    }\n    collapsedBefore.current = collapse;\n    const last = settled.current;\n    const from = moving && last !== null ? drawnAt(bar, text, last) : last;\n    for (const animation of animations.current) {\n      animation.cancel();\n    }\n    animations.current = [];\n    const to = geometryOf(bar, text, align);\n    settled.current = to;\n    if (from === null || prefersReducedMotion()) {\n      return;\n    }\n    const timing = {\n      duration: motionDurationMs.medium1,\n      easing: motionEasing.emphasized\n    };\n    const heights = [`${from.height}px`, `${to.height}px`];\n    animations.current = [bar.animate({\n      blockSize: heights,\n      clipPath: ['inset(0)', 'inset(0)'],\n      minBlockSize: heights\n    }, timing)];\n    for (const [index, selector] of LINES.entries()) {\n      const element = text.querySelector(selector);\n      const was = from.lines[index];\n      const is = to.lines[index];\n      if (element === null || was == null || is == null || is.size === 0) {\n        continue;\n      }\n      const origin = originOf(element, align);\n      animations.current.push(element.animate({\n        transform: [`translate(${was.x - is.x}px, ${was.y - is.y}px) scale(${was.size / is.size})`, 'none'],\n        transformOrigin: [origin, origin]\n      }, timing));\n    }\n  });\n  return textRef;\n}\n\n/**\n * The inset as a length CSS arithmetic accepts. A bare `0` is the one length\n * CSS takes without a unit, and the one it rejects inside `max()` and `min()`,\n * where it reads as a number.\n */\nfunction withUnit(contentInset: string) {\n  return contentInset.trim() === '0' ? '0px' : contentInset;\n}\nexport type { AppBarProps };\nexport default AppBar;"],"mappings":";;;;;;;;;;;;AAsDA,MAAMoB,qBAAqB;AAM3B,MAAME,cAAc,IAAIF,mBAAkB;AAC1C,MAAMG,UAAU;CACdC,IAAI;EACFC,OAAO;EACPC,cAAc;CAChB;CACAC,IAAI;EACFF,OAAO;EACPC,cAAc;CAChB;CACAE,IAAI;EACFH,OAAO;EACPC,cAAc;CAChB;AACF;AAMA,MAAMI,mBAAmBP,QAAQK,GAAGH;AAOpC,MAAMO,SAAS;CACbC,QAAQ;EACNC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;CACT;CACAC,MAAM;EACJC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRV,OAAO;CACT;CACAW,KAAK;EACHC,QAAQ;EACRP,QAAQ;EACRC,QAAQ;EACRO,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRhB,OAAO;CACT;CACAiB,UAAU;EACRb,QAAQ;EACRc,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRpB,OAAO;CACT;CACAqB,MAAM;EACJC,QAAQ;EACRjB,QAAQ;EACRC,QAAQ;EACRiB,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACR5B,OAAO;CACT;CACA6B,WAAW;EACTP,QAAQ;EACRM,QAAQ;EACR5B,OAAO;CACT;CACA8B,YAAY;EACVC,QAAQ;EACR/B,OAAO;CACT;AACF;AAiBA,MAAMgC,UAAU;CACd7C,IAAI;EACF8C,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRzB,QAAQ;EACRb,OAAO;CACT;CACAV,IAAI;EACF2C,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRzB,QAAQ;EACRb,OAAO;CACT;AACF;AASA,MAAMuC,mBAAmB;CACvBpD,IAAI;CACJG,IAAI;CACJC,IAAI;AACN;AAKA,MAAMiD,mBAAmB;CACvBrD,IAAI;CACJG,IAAI;CACJC,IAAI;AACN;AAqBA,MAAMkD,WAAW;CAAC;CAAM;CAAM;CAAM;CAAM;CAAM;AAAI;AACpD,SAASC,QAAQC,OAAe;CAE9B,OAAO5E,cADO8E,OAAOC,UAAUH,KAAK,KAAKA,SAAS,KAAKA,SAAS,IACnCF,SAASE,QAAQ,KAAKF,SAAS,EAAE;AAChE;AACA,MAAMM,YAAY,oBAAC,KAAD,CAAE,CAAA;AAcpB,MAAMC,QAAQ;CACZC,QAAQ;CACR,SAAS;AACX;AACA,MAAMC,eAAe,EACnBjD,OAAOkD,iBAAyB,CAACH,OAAO,EACtC,sBAAqBI,QAAO,OAAOA,QAAQ,WAAWA,MAAM,OAAOA,OAAO,OAAOA,MAAMC,KAAAA,EAAAA,CAAWF,YAAY,EAChH,CAAC,EACH;AAaA,MAAMG,SAAS;CACbC,QAAQ;CACR,SAAS;AACX;AACA,MAAMC,YAAY;CAChBvD,OAAOwD,OAAeC,KAAaC,kBAA0B;EAACL;EAAQ;GACpEM,QAAQF,OAAO,OAAO,aAAaA;GACnCG,QAAQJ,SAAS,OAAO,YAAYA;GACpCzD,OAAO;EACT;EAAG;GACD,uBAAsBoD,QAAO,OAAOA,QAAQ,WAAWA,MAAM,OAAOA,OAAO,OAAOA,MAAMC,KAAAA,EAAAA,CAAWM,aAAa;GAChH,0BAAyBP,QAAO,OAAOA,QAAQ,WAAWA,MAAM,OAAOA,OAAO,OAAOA,MAAMC,KAAAA,EAAAA,CAAWK,GAAG;GACzG,4BAA2BN,QAAO,OAAOA,QAAQ,WAAWA,MAAM,OAAOA,OAAO,OAAOA,MAAMC,KAAAA,EAAAA,CAAWI,KAAK;EAC/G;CAAC;CACDK,SAASC,qBAA6B,CAAC;EACrCC,QAAQD,oBAAoB,OAAO,aAAaA;EAChD/D,OAAO;CACT,GAAG,EACD,wBAAwB+D,oBAAoB,OAAOA,mBAAmBV,KAAAA,EACxE,CAAC;AACH;AAeA,MAAMY,SAAS;CACbC,QAAQ;CACR,SAAS;AACX;AACA,MAAMC,aAAa;CACjBC,QAAQX,OAAeC,QAAgB,CAAC;EACtCE,QAAQF,OAAO,OAAO,aAAaA;EACnCG,QAAQJ,SAAS,OAAO,YAAYA;EACpCzD,OAAO;CACT,GAAG;EACD,0BAAyBoD,QAAO,OAAOA,QAAQ,WAAWA,MAAM,OAAOA,OAAO,OAAOA,MAAMC,KAAAA,EAAAA,CAAWK,GAAG;EACzG,4BAA2BN,QAAO,OAAOA,QAAQ,WAAWA,MAAM,OAAOA,OAAO,OAAOA,MAAMC,KAAAA,EAAAA,CAAWI,KAAK;CAC/G,CAAC;CACDY,QAAQC,qBAA6B,CAACL,QAAQ,EAC5C,0BAAyBb,QAAO,OAAOA,QAAQ,WAAWA,MAAM,OAAOA,OAAO,OAAOA,MAAMC,KAAAA,EAAAA,CAAWiB,gBAAgB,EACxH,CAAC;AACH;AAGA,MAAMC,gBAAgB,SAAS9E,iBAAgB,KAAMV,mBAAkB;AAmHvE,MAAMqG,QAAQ,CAAC,wCAAwC,YAAY;;;;;;;;;;;;;;;AAqCnE,SAAAO,OAAAC,IAAA;CAAA,MAAAC,IAAAjI,EAAA,EAAA;CAAgB,MAAA,EAAA8G,OAAAoB,IAAAnB,WAAAoB,IAAAnB,cAAAoB,IAAAnB,sBAAAoB,IAAAnB,cAAAoB,IAAAnB,UAAAC,SAAApF,QAAAuG,IAAAC,QAAAnF,UAAAoF,IAAApB,MAAAqB,IAAApB,UAAAC,UAAA,GAAAoB,YAAAX;CACd,MAAAlB,QAAAoB,OAAAzC,KAAAA,IAAA,UAAAyC;CACA,MAAAnB,YAAAoB,OAAA1C,KAAAA,IAAA,QAAA0C;CACA,MAAAnB,eAAAoB,OAAA3C,KAAAA,IAAe1E,QAAOQ,KAAtB6G;CACA,MAAAnB,uBAAAoB,OAAA5C,KAAAA,IAAA,SAAA4C;CACA,MAAAnB,eAAAoB,OAAA7C,KAAAA,IAAA,IAAA6C;CAGA,MAAAtG,SAAAuG,OAAA9C,KAAAA,IAAA,QAAA8C;CAEA,MAAAlF,WAAAoF,OAAAhD,KAAAA,IAAA,QAAAgD;CACA,MAAApB,OAAAqB,OAAAjD,KAAAA,IAAA,OAAAiD;CAQA,MAAAE,WAAiB7B,aAAaM,SAAS;CAGvC,MAAAwB,QAAcxB,SAAS,QAAT,CAAkBuB;CAChC,MAAAE,iBAAuBtI,WAAW8G,QAA2D,IAA/ChG,QAAQ+F,KAAK,CAAA5F,eAAgBH,QAAQ+F,KAAK,CAAA7F;CACxF,MAAAkG,SAAekB,WAAA/G,mBAAAiH;CACf,MAAAC,aAAmBvI,WAAW4G,OAAO;CACrC,MAAA4B,cAAoBxI,WAAW+G,QAAQ;CACvC,MAAA0B,UAAgBC,kBAAkBN,UAAU9B,KAAK;CAE/B,MAAAqC,KAAA;CAGK,MAAAC,MAAAlJ,MAAa6B,OAAMgB,KAAM6C,UAASvD,KAAMgH,YAAYrC,cAAc+B,UAAU,GAAGM,YAAYrC,cAAcgC,WAAW,GAAG/B,oBAAoB,GAAGrB,UAASM,OAAQ2C,QAAA,UAAkBhH,iBAAgB,eAAlC,UAA4DA,iBAAgB,QAAS,GAAGyD,aAAYjD,KAAMqF,MAAM,GAAGmB,SAASzE,QAAQiD,KAAK;CACtT,MAAAiC,MAAA,CAACP,aAAD,OAAqB,oBAAA,OAAA;EAAe,WAAA;EAAsE3B,UAAAA;CAAc,CAAA;CAChH,MAAAmC,MAAArJ,MAAa6B,OAAM0B,MAAOoF,SAAS9G,OAAMkC,WAAY4E,SAAStC,WAAUC,MAAOgD,UAAUxC,cAAc+B,UAAU,GAAGS,UAAUxC,cAAcgC,WAAW,CAAC,GAAGH,SAAStC,WAAUE,MAAO,aAAaE,cAAa,EAAG,GAAGG,UAAU,YAAY/E,OAAMmC,UAAW;CAAC,IAAAuF;CAAA,IAAAxB,EAAA,OAAAW,YAAAX,EAAA,OAAAf,gBAAAe,EAAA,OAAAd,YAAAc,EAAA,OAAAZ,MAAA;EACnQoC,MAAA,CAACjJ,WAAW2G,QAAQ,IAApB,OAA+B,oBAAC,MAAD;GAAc,QAAArC,QAAQoC,YAAY;GAAY,SAAA0B,WAAWjE,iBAAgBhD,KAAMgD,iBAAiB0C;GAC3HF,UAAAA;EADgC,CAAA;EAE5Bc,EAAA,KAAAW;EAAAX,EAAA,KAAAf;EAAAe,EAAA,KAAAd;EAAAc,EAAA,KAAAZ;EAAAY,EAAA,KAAAwB;CAAA,OAAAA,MAAAxB,EAAA;CAAA,IAAAyB;CAAA,IAAAzB,EAAA,OAAAW,YAAAX,EAAA,OAAAZ,QAAAY,EAAA,OAAAX,UAAA;EACRoC,MAAA,CAAClJ,WAAW8G,QAAQ,IAApB,OAA+B,oBAAC,MAAD;GAAcnC,QAAAA;GAAgB,MAAA;GAAiB,SAAAyD,WAAWhE,iBAAgBjD,KAAMiD,iBAAiByC;GAC5HC,UAAAA;EADgC,CAAA;EAE5BW,EAAA,KAAAW;EAAAX,EAAA,KAAAZ;EAAAY,EAAA,KAAAX;EAAAW,EAAA,KAAAyB;CAAA,OAAAA,MAAAzB,EAAA;CAAA,IAAA0B;CAAA,IAAA1B,EAAA,OAAAsB,OAAAtB,EAAA,QAAAwB,OAAAxB,EAAA,QAAAyB,OAAAzB,EAAA,QAAAgB,SAAA;EANXU,MAAA,qBAAA,OAAA;GAOM,GAPGJ;GAAoQN,KAAAA;GAA7Q,UAAA,CACGQ,KAGAC,GAGG;;EAAAzB,EAAA,KAAAsB;EAAAtB,EAAA,MAAAwB;EAAAxB,EAAA,MAAAyB;EAAAzB,EAAA,MAAAgB;EAAAhB,EAAA,MAAA0B;CAAA,OAAAA,MAAA1B,EAAA;CAAA,IAAA2B;CAAA,IAAA3B,EAAA,QAAAe,eAAAf,EAAA,QAAAV,UAAA;EACLqC,MAAA,CAACZ,cAAD,OAAsB,oBAAA,OAAA;GAAe,WAAA;GACjCzB,UAAAA;EACG,CAAA;EAAAU,EAAA,MAAAe;EAAAf,EAAA,MAAAV;EAAAU,EAAA,MAAA2B;CAAA,OAAAA,MAAA3B,EAAA;CAAA,IAAA4B;CAAA,IAAA5B,EAAA,QAAAmB,OAAAnB,EAAA,QAAAqB,OAAArB,EAAA,QAAA0B,OAAA1B,EAAA,QAAA2B,KAAA;EAZFC,MAAA,qBAAA,OAAA;GAaF,GAbWT;GAAT,UAAA;IACLE;IACDK;IAQCC;GAGG;;EAAA3B,EAAA,MAAAmB;EAAAnB,EAAA,MAAAqB;EAAArB,EAAA,MAAA0B;EAAA1B,EAAA,MAAA2B;EAAA3B,EAAA,MAAA4B;CAAA,OAAAA,MAAA5B,EAAA;CACL,MAAA6B,MAAAnJ,YAAYT,MAAa6B,OAAMM,MAAOiD,aAAYjD,KAAMqF,MAAM,GAAGrE,YAAYtB,OAAMsB,UAAWrB,UAAUD,OAAMC,MAAO,GAAG2G,OAAK;CAAC,IAAAoB;CAAA,IAAA9B,EAAA,QAAAU,WAAAV,EAAA,QAAA4B,OAAA5B,EAAA,QAAA6B,KAAA;EAhB5HC,MAAA;GAAA,GACFpB;GAAKqB,UACEH;GAaF,GACLC;EACL;EAAC7B,EAAA,MAAAU;EAAAV,EAAA,MAAA4B;EAAA5B,EAAA,MAAA6B;EAAA7B,EAAA,MAAA8B;CAAA,OAAAA,MAAA9B,EAAA;CAAA,IAAAgC;CAAA,IAAAhC,EAAA,QAAAO,UAAAP,EAAA,QAAA8B,KAAA;EAnBcE,MAAA;GAAAC,gBACCf;GAAQR,OACjBoB;GAiBNvB;EAEH;EAACP,EAAA,MAAAO;EAAAP,EAAA,MAAA8B;EAAA9B,EAAA,MAAAgC;CAAA,OAAAA,MAAAhC,EAAA;CAAA,OArBMxH,UAAUwJ,GAqBhB;AAAC;;;;;;;AASJ,SAASE,QAAQC,KAAkB3G,MAAmB6G,SAA6B;CACjF,OAAO;EACL5C,QAAQ0C,IAAIG,sBAAsB,CAAC,CAAC7C;EACpCC,OAAOH,MAAMgD,KAAKC,UAAUC,UAAU;GACpC,MAAMC,OAAOL,QAAQ3C,MAAM+C;GAC3B,MAAME,UAAUnH,KAAKoH,cAAcJ,QAAQ;GAC3C,IAAIE,SAAS,QAAQC,YAAY,MAC/B,OAAO;GAET,MAAME,QAAQC,SAASH,OAAO;GAC9B,OAAO;IACLvD,MAAMsD,KAAKtD,OAAOyD,MAAME;IACxBnD,GAAG8C,KAAK9C,IAAIiD,MAAMG;IAClBnD,GAAG6C,KAAK7C,IAAIgD,MAAMI;GACpB;EACF,CAAC;CACH;AACF;;AAGA,SAAS7B,YAAYrC,cAAsBmE,SAAkB;CAC3D,MAAM3E,QAAQ4E,SAASpE,YAAY;CACnC,OAAOmE,UAAU,YAAY3E,MAAK,KAAMnF,YAAW,KAAMmF;AAC3D;;;;;;;AAQA,SAAS6E,WAAWjB,KAAkB3G,MAAmBqD,OAAqC;CAC5F,MAAMwE,QAAQlB,IAAIG,sBAAsB;CACxC,OAAO;EACL7C,QAAQ4D,MAAM5D;EACdC,OAAOH,MAAMgD,KAAIC,aAAY;GAC3B,MAAMG,UAAUnH,KAAKoH,cAAcJ,QAAQ;GAC3C,IAAIG,YAAY,MACd,OAAO;GAET,MAAMW,MAAMX,QAAQL,sBAAsB;GAC1C,MAAMiB,OAAO1E,UAAU,YAAYyE,IAAIE,OAAOF,IAAIG,SAAS,IAAIC,cAAcf,OAAO,IAAIW,IAAIG,QAAQH,IAAIE;GACxG,OAAO;IACLpE,MAAMpC,OAAO2G,WAAWC,iBAAiBjB,OAAO,CAAC,CAACkB,QAAQ;IAC1DjE,GAAG2D,OAAOF,MAAMG;IAChB3D,GAAGiE,WAAWnB,OAAO,IAAIU,MAAMU;GACjC;EACF,CAAC;CACH;AACF;;;;;;AAOA,SAASxC,UAAUxC,cAAsBmE,SAAkB;CACzD,OAAOA,UAAU,OAAOC,SAASpE,YAAY,EAAC,IAAK3F,YAAW,KAAM;AACtE;;;;;;;;;AAUA,SAAS0K,WAAWnB,SAAkB;CACpC,MAAMsB,QAAQC,SAASC,YAAY;CACnCF,MAAMG,mBAAmBzB,OAAO;CAChC,MAAM0B,QAAQJ,MAAMK,eAAe,CAAC,CAACC,KAAK,CAAC;CAC3C,OAAOF,UAAU,OAAO1B,QAAQL,sBAAsB,CAAC,CAACyB,MAAMM,MAAMN;AACtE;;AAGA,SAASL,cAAcf,SAAkB;CACvC,OAAOiB,iBAAiBjB,OAAO,CAAC,CAAC6B,cAAc;AACjD;;AAGA,SAAS1B,SAASH,SAAkB;CAClC,OAAO,IAAI8B,kBAAkBb,iBAAiBjB,OAAO,CAAC,CAAC+B,SAAS;AAClE;;;;;AAMA,SAASC,SAAShC,SAAkB9D,OAA2B;CAG7D,OAAO,GAFMA,UAAU,WAAW,WAAW6E,cAAcf,OAAO,IAAI,UAAU,OAElE,GADCmB,WAAWnB,OAAO,IAAIA,QAAQL,sBAAsB,CAAC,CAACyB,IAC7C;AAC1B;;;;;AAMA,SAASc,uBAAuB;CAC9B,OAAOC,OAAOC,WAAW,kCAAkC,CAAC,CAACC;AAC/D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuCA,SAAA/D,kBAAAN,UAAA9B,OAAA;CAAA,MAAAmB,IAAAjI,EAAA,CAAA;CACE,MAAAiJ,UAAgB5I,OAAuB,IAAI;CAC3C,MAAAiK,UAAgBjK,OAAwB,IAAI;CAC5C,MAAA6M,kBAAwB7M,OAAOuI,QAAQ;CAAE,IAAAZ;CAAA,IAAAC,EAAA,OAAAkF,OAAAC,IAAA,2BAAA,GAAA;EACFpF,KAAA,CAAA;EAAEC,EAAA,KAAAD;CAAA,OAAAA,KAAAC,EAAA;CAAzC,MAAAoF,aAAmBhN,OAAoB2H,EAAE;CAAE,IAAAE;CAAA,IAAAD,EAAA,OAAAnB,SAAAmB,EAAA,OAAAW,UAAA;EAC3BV,WAAA;GACd,MAAAzE,OAAawF,QAAOqE;GACpB,MAAAlD,MAAY3G,MAAI8J,eAA8BA;GAC9C,IAAI9J,QAAQ,QAAQ2G,OAAO,MAAI;GAG/B,MAAAoD,SAAeH,WAAUC,QAAQG,KAAMC,MAA8C;GACrF,IAAIR,gBAAeI,YAAa1E,UAAQ;IACtC,IAAI,CAAC4E,QACHlD,QAAOgD,UAAWjC,WAAWjB,KAAK3G,MAAMqD,KAAK;IAC9C;GAAA;GAGHoG,gBAAeI,UAAW1E;GAC1B,MAAA+E,OAAarD,QAAOgD;GACpB,MAAAM,OAAaJ,UAAUG,SAAS,OAAOxD,QAAQC,KAAK3G,MAAMkK,IAAW,IAAxDA;GACb,KAAK,MAAAE,eAAmBR,WAAUC,SAChCQ,YAASC,OAAQ;GAEnBV,WAAUC,UAAW,CAAA;GACrB,MAAAU,KAAW3C,WAAWjB,KAAK3G,MAAMqD,KAAK;GACtCwD,QAAOgD,UAAWU;GAClB,IAAIJ,SAAS,QAAQd,qBAAqB,GAAC;GAG3C,MAAAmB,SAAe;IAAAC,UACHlN,iBAAgBmN;IAAQC,QAC1BnN,aAAYoN;GACtB;GACA,MAAAC,UAAgB,CAAC,GAAGV,KAAIlG,OAAO,KAAM,GAAGsG,GAAEtG,OAAO,GAAI;GACrD2F,WAAUC,UAAW,CAAClD,IAAGmE,QAAS;IAAAC,WACrBF;IAAOG,UACR,CAAC,YAAY,UAAU;IAAClJ,cACpB+I;GAChB,GAAGL,MAAM,CAAC;GACV,KAAK,MAAA,CAAAvD,OAAAD,aAA2BjD,MAAKkH,QAAS,GAAC;IAC7C,MAAA9D,UAAgBnH,KAAIoH,cAAeJ,QAAQ;IAC3C,MAAAkE,MAAYf,KAAIjG,MAAO+C;IACvB,MAAAkE,KAAWZ,GAAErG,MAAO+C;IACpB,IAAIE,YAAY,QAAQ+D,OAAO,QAAQC,MAAM,QAAQA,GAAEvH,SAAU,GAC/D;IAEF,MAAAwH,SAAejC,SAAShC,SAAS9D,KAAK;IACtCuG,WAAUC,QAAQwB,KAAMlE,QAAO2D,QAAS;KAAA5B,WAC3B,CAAC,aAAagC,IAAG9G,IAAK+G,GAAE/G,EAAE,MAAO8G,IAAG7G,IAAK8G,GAAE9G,EAAE,YAAa6G,IAAGtH,OAAQuH,GAAEvH,KAAK,IAAK,MAAM;KAAC0H,iBAClF,CAACF,QAAQA,MAAM;IAClC,GAAGZ,MAAM,CAAC;GAAC;EACZ;EACFhG,EAAA,KAAAnB;EAAAmB,EAAA,KAAAW;EAAAX,EAAA,KAAAC;CAAA,OAAAA,KAAAD,EAAA;CAhDD7H,gBAAgB8H,EAgDf;CAAC,OACKe;AAAO;;;;;;AAtDhB,SAAAyE,OAAAI,WAAA;CAAA,OAWwDA,UAASkB,cAAe;AAAS;AAmDzF,SAAS5D,SAASpE,cAAsB;CACtC,OAAOA,aAAaiI,KAAK,MAAM,MAAM,QAAQjI;AAC/C"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","ReactNode","RefAttributes","ClassNameOrFunction","StyleOrFunction","stylex","useContext","ToggleGroupStateContext","ButtonClassesState","ButtonDOMProps","ButtonLinkForm","ButtonPressForm","ButtonState","ButtonToggleForm","ButtonGroupItem","ButtonBase","ToggleButtonBase","ButtonGroupItemContext","groupPressHandlers","useSelection","pressThen","focus","colors","motion","radii","shadows","sizing","spacing","stateLayerOpacity","typography","TARGET_SIZE","FORCED_COLORS","styles","base","kGNEyG","kVAM5u","ksu8eU","kMzoRj","kB7OPa","kkrTdU","k1xSpc","kMv6JI","kGuDYH","k63SB2","kOIVth","kjj79g","kb6lSQ","kLWn49","ks0D6T","kHjlTd","kVAEAm","k9WMMc","kybGjl","kIyJzY","k1ekBW","kAMwcw","$$css","disabled","elevated","kWkggS","kGVxlE","kMwMTN","elevatedDisabled","elevatedToggleSelected","filled","filledDisabled","filledToggle","filledToggleSelected","icon","kmuXW","lg","kAzted","k8WAf4","kg3NbH","md","kgeoSG","kGOzcv","kpsdNU","kEoFBp","outlined","outlinedDisabled","outlinedToggleSelected","pending","text","textDisabled","tonal","tonalDisabled","tonalToggleSelected","xl","xs","xxl","OUTLINE_WIDTHS","const","outlinedSizes","iconSizes","PADDINGS","shifted","padding","value","val","undefined","roundShapes","kaIpWk","squareShapes","pressedShapes","hovered","focused","pressed","disabledStyles","toggleContainers","selected","unselected","ButtonProps","variant","Exclude","ButtonVariant","children","className","disableRipple","pendingLabel","shape","ButtonShape","size","ButtonSize","style","ToggleVariant","Button","t0","$","defaultSelected","href","isPending","isSelected","onChange","rel","t1","ownSize","target","t2","props","group","inSelectingGroup","press","onPressStart","onPressEnd","t3","selection","t4","content","t5","buttonClasses","toggleClasses","isToggle","T0","t6","t7","onPress","toggle","t8","state","ring","isHovered","isFocusVisible","isPressed","groupStyles","isDisabled","border","shift","container","Button","_c","props","stylex.props"],"sources":["../../../src/components/button/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode, RefAttributes } from 'react';\nimport type { ClassNameOrFunction, StyleOrFunction } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { useContext } from 'react';\nimport { ToggleGroupStateContext } from 'react-aria-components';\nimport type { ButtonClassesState, ButtonDOMProps, ButtonLinkForm, ButtonPressForm, ButtonState, ButtonToggleForm } from '../../button';\nimport type { ButtonGroupItem } from '../../button/context';\nimport { ButtonBase, ToggleButtonBase } from '../../button';\nimport { ButtonGroupItemContext } from '../../button/context';\nimport { groupPressHandlers } from '../../button/group';\nimport { useSelection } from '../../button/hooks';\nimport { pressThen } from '../../button/toggle';\nimport { focus } from '../../styles/focus';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, shadows, sizing, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\n\n// Each variant composites its label colour over its container at the\n// interaction state's opacity, rather than swapping in a separate\n// hover/pressed color: filled and tonal paint the 'on-color' over the\n// container, outlined, text and elevated paint the label colour over their\n// own. The pairs are the buttons spec page's newer values: tonal on\n// secondary container, outlined with an outline variant border and an\n// on-surface-variant label, text on primary, elevated on surface container\n// low with a primary label.\n//\n// **Elevated is the one variant whose shadow is part of its identity.** The\n// page rests it at elevation 1 rather than flat, raises it on hover and\n// returns it to 1 while pressed — where filled and tonal rest flat and lift\n// only on hover. Disabled drops it to none, since a shadow says a control is\n// available to press.\n// calc(<opacity> * 100%) turns the token's unitless 0-1 ratio into the\n// percentage color-mix() takes. Inlined rather than factored into a helper:\n// @stylexjs/babel-plugin only statically recognizes expressions written\n// directly as property values, and a call to an externally-defined function\n// isn't one of them.\n//\n// The hover, focus and pressed layers come from React Aria's render state,\n// `isHovered`, `isFocusVisible` and `isPressed`, rather than from `:hover`,\n// `:focus-visible` and `:active`. On a touch screen Chromium leaves `:hover`\n// on the last element tapped, so the layer and its lifted shadow stayed on a\n// button after the tap had ended, where React Aria ignores the emulated mouse\n// events that follow a touch. And React Aria prevents the default of the\n// keydown that presses a button with Space or Enter, so `:active` never\n// matched a keyboard press, which `isPressed` reports like any other.\n//\n// Disabled is a style of its own per variant rather than a `:disabled`\n// branch inside each property: a button given `href` renders as a link,\n// which React Aria turns into a <span> while disabled, and neither matches\n// the pseudo-class. The disabled styles are applied last from the render\n// state's `isDisabled`, and StyleX replaces a property whole, so they win\n// over any state layer applied before them.\n//\n// **Under forced colours a container is drawn as a rule.** That mode drops\n// the shadow and paints author backgrounds in a system colour, which left a\n// filled, tonal or elevated button as a label with nothing round it. `base`\n// draws a 1px `ButtonText` border there instead. Outlined keeps its own rule,\n// and text stays without one, as the page draws it. The mode repaints a\n// disabled button's fade at full strength as well. Chromium greys a disabled\n// `<button>` there by itself, but not the `<span>` React Aria renders for a\n// disabled link, so the disabled styles name `GrayText` for the label and\n// the edge rather than leave it to the browser.\n//\n// Two independent axes, applied base -> variant -> size. The variant carries\n// colour and the size carries geometry, so the two never argue: inline\n// padding belongs to the size alone, and every size declares its own.\n//\n// That is deliberate rather than incidental. The buttons page gives padding\n// per size — its Small button padding is 16dp, the 24dp beside it being the\n// older value the page marks as not recommended — and gives the five colour\n// styles no padding of their own. A text button is therefore as wide as a\n// filled one at the same size, which is what the code draws.\n//\n// This did once read the other way, with `md` declaring no padding so a\n// medium button fell through to its variant's. `fix(button)!: the spec's\n// five sizes` replaced that when the component took the page's sizes, since\n// a per-variant padding had nowhere to sit once every size carried one. The\n// comment describing the old cascade outlived it by some months, which is\n// how it came to say `text` keeps a tighter padding it has never had — back\n// then `text` declared 16dp while a filled `md` declared none at all, so the\n// text button was the wider of the two.\n//\n// **A toggle is the same button reporting a state.** Given `isSelected`,\n// `defaultSelected` or `onChange` it is React Aria's `ToggleButton`, which\n// announces the state through `aria-pressed`, as IconButton's toggle does.\n// The page gives four of the five styles a second pair of colour roles for\n// it: a filled toggle rests on surface container with an on-surface-variant\n// label and takes primary once selected, a tonal one moves from the\n// secondary container pair to secondary, an elevated one keeps its low\n// surface until it takes primary, and an outlined one swaps its rule for the\n// inverse surface pair. Under forced colours a selected toggle of any style\n// is filled `Highlight`, as IconButton's is. The page gives text no pair, so\n// a text button given those props stays a plain one.\n//\n// **The corner is a shape the button morphs between**, from the page's size\n// token sets. `round` rests at half the container's height, which is the pill\n// for a label on one line, and `square` at the size's square corner: 12dp up\n// to the page's S, 16dp at M and 28dp above. A press tightens either to the\n// size's pressed corner, 8dp, 12dp or 16dp, and a toggle trades its shape for\n// the other once selected — a round one for the square corner, a square one\n// for the round. The corner eases over the motion tokens' short duration, as\n// the container, label and rule colours and the shadow do between states, and\n// all of them move at once for a reader who asks for reduced motion.\n//\n// The round corner is a length rather than the pill token's 9999px, because\n// the browser draws a corner no larger than half the box and eases the value\n// as written. From 9999px a press spent all but the last frame or two of its\n// 150ms above the 20dp a medium button can show, so the corner held round and\n// then jumped. From half the height every frame of the ease is one the eye\n// can see. A label that wraps makes a button taller than that, and its ends a\n// little less than round, as a connected ButtonGroup's already are.\n//\n// What every button does past its own styles — the ripple, the link and\n// toggle forms, the pending ring and `aria-busy`, a parent's disabled state\n// — is `src/button`'s, shared with IconButton.\n\n/**\n * The press area the buttons page requires, which its two smallest sizes are\n * drawn under. A literal rather than `sizing.controlMd`, which holds the same\n * number, for the reason IconButton's `TARGET_SIZE` gives: a consumer\n * resizing their medium controls should not shrink a target the page states\n * as a floor.\n */\nconst TARGET_SIZE = '48px';\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)';\nconst styles = {\n  base: {\n    kGNEyG: \"x6s0dn4\",\n    kVAM5u: \"x1ylmb6m\",\n    ksu8eU: \"xx61lck\",\n    kMzoRj: \"xc342km x13rsnn2\",\n    kB7OPa: \"x9f619\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x3nfvp2\",\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kOIVth: \"x126z3so\",\n    kjj79g: \"xl56j7k\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    ks0D6T: \"x193iq5w\",\n    kHjlTd: \"xj0a0fe\",\n    kVAEAm: \"x1n2onr6\",\n    k9WMMc: \"x2b8uid\",\n    kybGjl: \"x1hl2dhg\",\n    kIyJzY: \"x4ukx00 x12w9bfk\",\n    k1ekBW: \"xidvh3d\",\n    kAMwcw: \"xmg88ys\",\n    $$css: true\n  },\n  disabled: {\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  elevated: {\n    kWkggS: \"x1vnz5z6\",\n    kGVxlE: \"x19efjv6\",\n    kMwMTN: \"x1mxwv8y\",\n    $$css: true\n  },\n  elevatedDisabled: {\n    kWkggS: \"xepofeg\",\n    kVAM5u: \"xmnqt3w\",\n    kGVxlE: \"x1gnnqk1\",\n    kMwMTN: \"x1xj74d8 x1bhcspo\",\n    $$css: true\n  },\n  elevatedToggleSelected: {\n    kWkggS: \"xnety89 x1jzqe4\",\n    kMwMTN: \"xwjo7ld x1k5gbb1\",\n    $$css: true\n  },\n  filled: {\n    kWkggS: \"xnety89\",\n    kGVxlE: \"x1gnnqk1\",\n    kMwMTN: \"xwjo7ld\",\n    $$css: true\n  },\n  filledDisabled: {\n    kWkggS: \"xepofeg\",\n    kVAM5u: \"xmnqt3w\",\n    kGVxlE: \"x1gnnqk1\",\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  icon: {\n    kGNEyG: \"x6s0dn4\",\n    k1xSpc: \"x3nfvp2\",\n    kmuXW: \"x2lah0s\",\n    kjj79g: \"xl56j7k\",\n    $$css: true\n  },\n  lg: {\n    kMv6JI: \"x46eyla\",\n    kGuDYH: \"x5ehqhr\",\n    k63SB2: \"xrf6cl6\",\n    kb6lSQ: \"x1g135zh\",\n    kLWn49: \"x1ggk5va\",\n    kAzted: \"xdovgog\",\n    k8WAf4: \"x1uvvd8r\",\n    kg3NbH: \"xg0ps1x\",\n    $$css: true\n  },\n  md: {\n    kgeoSG: \"x1cpjm7i\",\n    kGOzcv: \"xun2zgk\",\n    kpsdNU: \"xm4btww\",\n    kEoFBp: \"x1hmns74\",\n    kAzted: \"x1cio8j0\",\n    k8WAf4: \"x1cmllll\",\n    kg3NbH: \"x790zyz\",\n    $$css: true\n  },\n  outlined: {\n    kWkggS: \"xjbqb8w\",\n    kVAM5u: \"x133yhug\",\n    ksu8eU: \"x1y0btm7\",\n    kMzoRj: \"xmkeg23\",\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  },\n  outlinedDisabled: {\n    kWkggS: \"xjbqb8w\",\n    kVAM5u: \"xrh88j3 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  pending: {\n    kkrTdU: \"x19v85br\",\n    $$css: true\n  },\n  text: {\n    kWkggS: \"xjbqb8w\",\n    kMzoRj: \"xc342km\",\n    kMwMTN: \"x1mxwv8y\",\n    $$css: true\n  },\n  textDisabled: {\n    kWkggS: \"xjbqb8w\",\n    kMwMTN: \"x1xj74d8 x1bhcspo\",\n    $$css: true\n  },\n  tonal: {\n    kWkggS: \"x15dekr4\",\n    kGVxlE: \"x1gnnqk1\",\n    kMwMTN: \"x1sawysd\",\n    $$css: true\n  },\n  tonalDisabled: {\n    kWkggS: \"xepofeg\",\n    kVAM5u: \"xmnqt3w\",\n    kGVxlE: \"x1gnnqk1\",\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    kMv6JI: \"x1fz0g89\",\n    kGuDYH: \"xkb6epg\",\n    k63SB2: \"x76yrz5\",\n    kOIVth: \"x1gka490\",\n    kb6lSQ: \"x1s1qhaa\",\n    kLWn49: \"x1voeury\",\n    kAzted: \"x112cvos\",\n    k8WAf4: \"xny1cbh\",\n    kg3NbH: \"x1sdxjpb\",\n    $$css: true\n  },\n  xs: {\n    kgeoSG: \"x1cpjm7i\",\n    kGOzcv: \"xun2zgk\",\n    kpsdNU: \"x1ecwmwu\",\n    kEoFBp: \"x1hmns74\",\n    kAzted: \"xlzjxrf\",\n    k8WAf4: \"xmqoko8\",\n    kg3NbH: \"x18fpw6u\",\n    $$css: true\n  },\n  xxl: {\n    kMv6JI: \"x1vsmgmf\",\n    kGuDYH: \"xh9c4x\",\n    k63SB2: \"x1y15vu6\",\n    kOIVth: \"xxj4525\",\n    kb6lSQ: \"xoqu3bc\",\n    kLWn49: \"x10x9d6x\",\n    kAzted: \"xldltni\",\n    k8WAf4: \"x1lrxzt4\",\n    kg3NbH: \"x1dao9b2\",\n    $$css: true\n  }\n};\n\n// The outlined button's border thickens with the size, as the page's size\n// tokens have it: 1dp up to M, 2dp at L, 3dp at XL. A style per size rather\n// than a value in the size style, since a border on a filled button would\n// draw in the label colour.\nconst OUTLINE_WIDTHS = {\n  lg: '1px',\n  md: '1px',\n  xl: '2px',\n  xs: '1px',\n  xxl: '3px'\n} as const;\n\n// The outlined button draws its rule inside the width the other variants\n// take, as the page's buttons do: the padding gives up what the border takes,\n// so an outlined and a filled button with one label are one width, and a\n// group mixing them lines up. The height needs nothing, since it is a floor\n// the border already counts towards.\nconst outlinedSizes = {\n  lg: {\n    kMzoRj: \"xmkeg23\",\n    kg3NbH: \"xfeiziq\",\n    $$css: true\n  },\n  md: {\n    kMzoRj: \"xmkeg23\",\n    kg3NbH: \"x1uvede8\",\n    $$css: true\n  },\n  xl: {\n    kMzoRj: \"xdh2fpr\",\n    kg3NbH: \"xrhf21y\",\n    $$css: true\n  },\n  xs: {\n    kMzoRj: \"xmkeg23\",\n    kg3NbH: \"x9t8nta\",\n    $$css: true\n  },\n  xxl: {\n    kMzoRj: \"x9r2w2z\",\n    kg3NbH: \"x1wz3vkj\",\n    $$css: true\n  }\n};\n\n// The icon each size draws, from the page's size token sets: 20dp for the\n// two small sizes, then 24, 32 and 40. The gap before it is the size's own,\n// which `base`, `xl` and `xxl` already set as the page gives them.\nconst iconSizes = {\n  lg: {\n    kGuDYH: \"x1pvqxga\",\n    $$css: true\n  },\n  md: {\n    kGuDYH: \"xwsyq91\",\n    $$css: true\n  },\n  xl: {\n    kGuDYH: \"x1s3cmhv\",\n    $$css: true\n  },\n  xs: {\n    kGuDYH: \"xwsyq91\",\n    $$css: true\n  },\n  xxl: {\n    kGuDYH: \"x1tgwohi\",\n    $$css: true\n  }\n};\n\n// Each size's inline padding again, for the one place it is read at runtime:\n// a standard ButtonGroup widening a pressed button by adding to it. The size\n// styles above write the same values, and an outlined button's border comes\n// off them here as it does in `outlinedSizes`.\nconst PADDINGS = {\n  lg: spacing.xl,\n  md: spacing.lg,\n  xl: '48px',\n  xs: spacing.md,\n  xxl: '64px'\n};\n\n// The padding a standard group sets while it widens or narrows the button.\nconst shifted = {\n  padding: (value: string) => [{\n    kg3NbH: value != null ? \"x30g6up\" : value,\n    $$css: true\n  }, {\n    \"--x-paddingInline\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(value)\n  }]\n};\n\n// The round corner each size rests at, and a square toggle once selected:\n// half the container's height — see the header for why not the pill's\n// 9999px. `min()` leaves the pill token in charge below that, so a scheme\n// that sets `--kui-radius-pill` small still draws round buttons at its corner.\nconst roundShapes = {\n  lg: {\n    kaIpWk: \"x1j5kmnq\",\n    $$css: true\n  },\n  md: {\n    kaIpWk: \"x1y5wlyh\",\n    $$css: true\n  },\n  xl: {\n    kaIpWk: \"x39tcx0\",\n    $$css: true\n  },\n  xs: {\n    kaIpWk: \"xcslhsm\",\n    $$css: true\n  },\n  xxl: {\n    kaIpWk: \"xjy9rn5\",\n    $$css: true\n  }\n};\n\n// The square corner each size rests at, and a round toggle once selected.\nconst squareShapes = {\n  lg: {\n    kaIpWk: \"xhpdng0\",\n    $$css: true\n  },\n  md: {\n    kaIpWk: \"x62ce2h\",\n    $$css: true\n  },\n  xl: {\n    kaIpWk: \"x19pkqky\",\n    $$css: true\n  },\n  xs: {\n    kaIpWk: \"x62ce2h\",\n    $$css: true\n  },\n  xxl: {\n    kaIpWk: \"x19pkqky\",\n    $$css: true\n  }\n};\n\n// The corner each size presses to, whatever its shape. Applied after the\n// resting and selected shapes, so a press is felt whichever the button rests\n// at.\nconst pressedShapes = {\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// The interaction state layers, one style per variant for each state, applied\n// from React Aria's render state — see the header for why that and not the\n// pseudo-classes. 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. Hover lifts filled and tonal off the page and raises elevated a\n// level, and a press brings each back to where it rests.\n//\n// A toggle's containers carry a layer of their own, each the label colour\n// over that container, applied after the variant's so the variant still\n// decides the shadow. A selected toggle's keeps its forced-colours\n// `Highlight`, since a later style replaces the property whole.\nconst hovered = {\n  elevated: {\n    kWkggS: \"xltxkvm\",\n    kGVxlE: \"x1os83gw\",\n    $$css: true\n  },\n  elevatedToggleSelected: {\n    kWkggS: \"xo1ct44 x1jzqe4\",\n    $$css: true\n  },\n  filled: {\n    kWkggS: \"xo1ct44\",\n    kGVxlE: \"x19efjv6\",\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  text: {\n    kWkggS: \"x659ado\",\n    $$css: true\n  },\n  tonal: {\n    kWkggS: \"x1fctxn6\",\n    kGVxlE: \"x19efjv6\",\n    $$css: true\n  },\n  tonalToggleSelected: {\n    kWkggS: \"x12r95rf x1jzqe4\",\n    $$css: true\n  }\n};\nconst focused = {\n  elevated: {\n    kWkggS: \"xcn1wy9\",\n    $$css: true\n  },\n  elevatedToggleSelected: {\n    kWkggS: \"xhodiby x1jzqe4\",\n    $$css: true\n  },\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  text: {\n    kWkggS: \"x1sog3nf\",\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  elevated: {\n    kWkggS: \"x1d33wxb\",\n    kGVxlE: \"x19efjv6\",\n    $$css: true\n  },\n  elevatedToggleSelected: {\n    kWkggS: \"x7b25lv x1jzqe4\",\n    $$css: true\n  },\n  filled: {\n    kWkggS: \"x7b25lv\",\n    kGVxlE: \"x1gnnqk1\",\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  text: {\n    kWkggS: \"x1dvjsmr\",\n    $$css: true\n  },\n  tonal: {\n    kWkggS: \"xzpauq9\",\n    kGVxlE: \"x1gnnqk1\",\n    $$css: true\n  },\n  tonalToggleSelected: {\n    kWkggS: \"x12o6fnv x1jzqe4\",\n    $$css: true\n  }\n};\nconst disabledStyles = {\n  elevated: styles.elevatedDisabled,\n  filled: styles.filledDisabled,\n  outlined: styles.outlinedDisabled,\n  text: styles.textDisabled,\n  tonal: styles.tonalDisabled\n};\n\n// Which container a toggle draws, selected and not, by its name in the\n// tables above. Three of the eight are the plain button's own: an unselected\n// tonal, elevated or outlined toggle is the tonal, elevated or outlined\n// button.\nconst toggleContainers = {\n  elevated: {\n    selected: 'elevatedToggleSelected',\n    unselected: 'elevated'\n  },\n  filled: {\n    selected: 'filledToggleSelected',\n    unselected: 'filledToggle'\n  },\n  outlined: {\n    selected: 'outlinedToggleSelected',\n    unselected: 'outlined'\n  },\n  tonal: {\n    selected: 'tonalToggleSelected',\n    unselected: 'tonal'\n  }\n} as const;\ntype ButtonProps = ButtonDOMProps & (ButtonLinkForm | ButtonPressForm | (ButtonToggleForm & {\n  /**\n   * A toggle takes any variant but `text`, which the page gives no\n   * selected colours.\n   */\n  variant?: Exclude<ButtonVariant, 'text'>;\n})) & {\n  children?: ReactNode;\n  /** A function may compute the class from the button's render state. */\n  className?: ClassNameOrFunction<ButtonState>;\n  /**\n   * Disables the press ripple. The hover/pressed background state layer is\n   * unaffected.\n   * @default false\n   */\n  disableRipple?: boolean;\n  /**\n   * An icon before the label, at the page's icon size for the button's size:\n   * 20px at `xs` and `md`, 24px at `lg`, 32px at `xl` and 40px at `xxl`. Draw\n   * it `1em` square in `currentColor`, as every icon here is, and it follows.\n   * Hidden with the label while the button is pending.\n   */\n  icon?: ReactNode;\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  /**\n   * The corner the button rests at: `round` is the pill, `square` the\n   * page's rounded rectangle, 12px up to `md`, 16px at `lg` and 28px above.\n   * Either tightens while pressed, and a toggle trades one for the other\n   * once selected.\n   * @default 'round'\n   */\n  shape?: ButtonShape;\n  /**\n   * Control height: `xs` 32px, `md` 40px, `lg` 56px, `xl` 96px, `xxl` 136px —\n   * the buttons spec page's XS, S, M, L and XL, each with its own inline\n   * padding and type role. `md` is the page's default.\n   * @default 'md'\n   */\n  size?: ButtonSize;\n  /** A function may compute the style from the button's render state. */\n  style?: StyleOrFunction<ButtonState>;\n  /**\n   * How much weight the button pulls. `filled` and `tonal` carry a container\n   * of their own; `outlined` and `text` sit on the page; `elevated` sits on\n   * a low surface and lifts off it with a shadow, for a button that has to\n   * separate from a busy background rather than from the page.\n   * @default 'filled'\n   */\n  variant?: ButtonVariant;\n};\ntype ButtonShape = 'round' | 'square';\ntype ButtonSize = 'lg' | 'md' | 'xl' | 'xs' | 'xxl';\ntype ButtonVariant = 'elevated' | 'filled' | 'outlined' | 'text' | 'tonal';\n\n// The four styles the page gives a toggle's colour pairs; see the header.\ntype ToggleVariant = keyof typeof toggleContainers;\n\n/**\n * The design's button, at five emphasis levels and five control heights,\n * round or square. Given `href` it is a link with the same appearance. Every\n * `aria-*` prop is forwarded to the element; React Aria alone would keep only\n * 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. The three forms are exclusive, so a toggle\n * given `href` does not compile, and nor does a `text` toggle, which the page\n * gives no selected colours — a `text` button in a selecting `ButtonGroup`\n * is the one that toggles, for the group's sake. A toggle may be pending,\n * for a state saved somewhere slow: the ring replaces its label and a press\n * changes nothing until it clears.\n *\n * ```tsx\n * <Button defaultSelected variant=\"tonal\">\n *   Label\n * </Button>\n * ```\n */\nfunction Button({\n  children,\n  defaultSelected,\n  href,\n  icon,\n  isPending,\n  isSelected,\n  onChange,\n  pendingLabel,\n  rel,\n  shape = 'round',\n  size: ownSize,\n  target,\n  variant = 'filled',\n  ...props\n}: ButtonProps & RefAttributes<HTMLAnchorElement | HTMLButtonElement>) {\n  // A ButtonGroup or a SplitButton around the button hands it a size, its\n  // shape at the group's inner edges and the press interaction; 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  // A group that selects is React Aria's ToggleButtonGroup, whose buttons\n  // have to be toggles to take part in its selection.\n  const inSelectingGroup = useContext(ToggleGroupStateContext) !== null;\n  const press = groupPressHandlers(group, props.onPressStart, props.onPressEnd);\n  const selection = useSelection({\n    defaultSelected,\n    isSelected,\n    onChange\n  });\n\n  // The icon goes in with the label, inside what ButtonBase hides while the\n  // button is pending, so the ring takes the place of both.\n  const content = icon === undefined ? children : <>\n        <span {...stylex.props(styles.icon, iconSizes[size])}>{icon}</span>\n        {children}\n      </>;\n\n  // A selecting ButtonGroup around it makes it React Aria's ToggleButton, to\n  // take part in the group's selection — a text button too, which draws its\n  // selection by nothing but the group's shape. Whether a button sits in one\n  // does not change from one render to the next.\n  if (inSelectingGroup) {\n    return <ToggleButtonBase {...props} {...press} classes={variant === 'text' ? buttonClasses(shape, size, variant, group) : toggleClasses(shape, size, variant, group)} isPending={isPending}>\n        {content}\n      </ToggleButtonBase>;\n  }\n\n  // The three props that make this a toggle on its own, read as IconButton\n  // reads them, and on the same component as the plain button so a toggle\n  // whose `isSelected` is still loading stays one element when it arrives.\n  // The types keep them off a `text` button; the check here keeps a call\n  // site that slipped past them a plain button, as it always was.\n  const isToggle = variant !== 'text' && (defaultSelected !== undefined || isSelected !== undefined || onChange !== undefined);\n  return <ButtonBase {...props} {...press} classes={isToggle ? toggleClasses(shape, size, variant, group) : buttonClasses(shape, size, variant, group)} href={href} isPending={isPending} isSelected={isToggle ? selection.selected : undefined} onPress={isToggle ? pressThen(props.onPress, selection.toggle) : props.onPress} pendingLabel={pendingLabel} rel={rel} target={target}>\n      {content}\n    </ButtonBase>;\n}\n\n// The button's own classes, from React Aria's render state — see the header\n// for why that and not the pseudo-classes. Built by a call rather than\n// 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 buttonClasses(shape: ButtonShape, size: ButtonSize, variant: ButtonVariant, group: ButtonGroupItem | null) {\n  return (state: ButtonClassesState) => stylex.props(styles.base, focus.ring, styles[variant], styles[size], shape === 'square' ? squareShapes[size] : roundShapes[size], variant === 'outlined' && outlinedSizes[size], state.isHovered && hovered[variant], state.isFocusVisible && focused[variant], state.isPressed && pressed[variant], state.isPressed && pressedShapes[size], groupStyles(group, size, variant, state), state.isPending === true && styles.pending, state.isDisabled && styles.disabled, state.isDisabled && disabledStyles[variant]);\n}\n\n// What a group lays over the button: its own styles for the button's state,\n// and the standard group's widening or narrowing as extra inline padding,\n// half of the shift on either side.\nfunction groupStyles(group: ButtonGroupItem | null, size: ButtonSize, variant: ButtonVariant, state: ButtonState) {\n  if (group === null) {\n    return null;\n  }\n  const border = variant === 'outlined' ? OUTLINE_WIDTHS[size] : '0px';\n  return [group.styles?.(state), group.shift !== 0 && shifted.padding(`calc(${PADDINGS[size]} - ${border} + ${group.shift / 2}px)`)];\n}\n\n// A toggle's classes: the plain button's, with the container and its layers\n// swapped for the toggle's pair, and the selected shape between the resting\n// and the pressed one. The variant's own style and layers still go first, for\n// the shadow and the rule they carry. Built by a call for the reason\n// `buttonClasses` is.\nfunction toggleClasses(shape: ButtonShape, size: ButtonSize, variant: ToggleVariant, group: ButtonGroupItem | null) {\n  return (state: ButtonClassesState) => {\n    const isSelected = state.isSelected === true;\n    const container = toggleContainers[variant][isSelected ? 'selected' : 'unselected'];\n    return stylex.props(styles.base, focus.ring, styles[variant], styles[container], styles[size], shape === 'square' ? squareShapes[size] : roundShapes[size], isSelected && (shape === 'square' ? roundShapes[size] : squareShapes[size]), variant === 'outlined' && outlinedSizes[size], state.isHovered && hovered[variant], state.isHovered && hovered[container], state.isFocusVisible && focused[variant], state.isFocusVisible && focused[container], state.isPressed && pressed[variant], state.isPressed && pressed[container], state.isPressed && pressedShapes[size], groupStyles(group, size, variant, state), state.isPending === true && styles.pending, state.isDisabled && styles.disabled, state.isDisabled && disabledStyles[variant]);\n  };\n}\nexport type { ButtonDOMProps, ButtonProps, ButtonShape, ButtonSize, ButtonState, ButtonVariant };\nexport default Button;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["c","_c","ReactNode","RefAttributes","ClassNameOrFunction","StyleOrFunction","stylex","useContext","ToggleGroupStateContext","ButtonClassesState","ButtonDOMProps","ButtonLinkForm","ButtonPressForm","ButtonState","ButtonToggleForm","ButtonGroupItem","ButtonBase","ToggleButtonBase","ButtonGroupItemContext","groupPressHandlers","useSelection","pressThen","focus","colors","motion","radii","shadows","sizing","spacing","stateLayerOpacity","typography","TARGET_SIZE","FORCED_COLORS","styles","base","kGNEyG","kVAM5u","ksu8eU","kMzoRj","kB7OPa","kkrTdU","k1xSpc","kMv6JI","kGuDYH","k63SB2","kOIVth","kjj79g","kb6lSQ","kLWn49","ks0D6T","kHjlTd","kVAEAm","k9WMMc","kybGjl","kIyJzY","k1ekBW","kAMwcw","$$css","disabled","elevated","kWkggS","kGVxlE","kMwMTN","elevatedDisabled","elevatedToggleSelected","filled","filledDisabled","filledToggle","filledToggleSelected","icon","kmuXW","lg","kAzted","k8WAf4","kg3NbH","md","kgeoSG","kGOzcv","kpsdNU","kEoFBp","outlined","outlinedDisabled","outlinedToggleSelected","pending","text","textDisabled","tonal","tonalDisabled","tonalToggleSelected","xl","xs","xxl","OUTLINE_WIDTHS","const","outlinedSizes","iconSizes","PADDINGS","shifted","padding","value","val","undefined","roundShapes","kaIpWk","squareShapes","pressedShapes","hovered","focused","pressed","disabledStyles","toggleContainers","selected","unselected","ButtonProps","variant","Exclude","ButtonVariant","children","className","disableRipple","pendingLabel","shape","ButtonShape","size","ButtonSize","style","ToggleVariant","Button","t0","$","defaultSelected","href","isPending","isSelected","onChange","rel","t1","ownSize","target","t2","props","group","inSelectingGroup","press","onPressStart","onPressEnd","t3","selection","t4","content","t5","buttonClasses","toggleClasses","isToggle","T0","t6","t7","onPress","toggle","t8","state","ring","isHovered","isFocusVisible","isPressed","groupStyles","isDisabled","border","shift","container","Button","_c","props","stylex.props"],"sources":["../../../src/components/button/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode, RefAttributes } from 'react';\nimport type { ClassNameOrFunction, StyleOrFunction } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { useContext } from 'react';\nimport { ToggleGroupStateContext } from 'react-aria-components';\nimport type { ButtonClassesState, ButtonDOMProps, ButtonLinkForm, ButtonPressForm, ButtonState, ButtonToggleForm } from '../../button';\nimport type { ButtonGroupItem } from '../../button/context';\nimport { ButtonBase, ToggleButtonBase } from '../../button';\nimport { ButtonGroupItemContext } from '../../button/context';\nimport { groupPressHandlers } from '../../button/group';\nimport { useSelection } from '../../button/hooks';\nimport { pressThen } from '../../button/toggle';\nimport { focus } from '../../styles/focus';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, shadows, sizing, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\n\n// Each variant composites its label colour over its container at the\n// interaction state's opacity, rather than swapping in a separate\n// hover/pressed color: filled and tonal paint the 'on-color' over the\n// container, outlined, text and elevated paint the label colour over their\n// own. The pairs are the buttons spec page's newer values: tonal on\n// secondary container, outlined with an outline variant border and an\n// on-surface-variant label, text on primary, elevated on surface container\n// low with a primary label.\n//\n// **The outlined rule is faint on purpose.** Outline variant sits at about\n// 1.6:1 against the surface in the light theme and 2:1 in the dark, under the\n// 3:1 WCAG asks of a boundary that identifies a control. The rule is not that\n// boundary: the label identifies the button, in on-surface-variant at about\n// 9:1, and the rule only shows how far the button reaches. IconButton's\n// outlined variant draws its rule in the same role for the same reason.\n//\n// **Elevated is the one variant whose shadow is part of its identity.** The\n// page rests it at elevation 1 rather than flat, raises it on hover and\n// returns it to 1 while pressed — where filled and tonal rest flat and lift\n// only on hover. Disabled drops it to none, since a shadow says a control is\n// available to press.\n// calc(<opacity> * 100%) turns the token's unitless 0-1 ratio into the\n// percentage color-mix() takes. Inlined rather than factored into a helper:\n// @stylexjs/babel-plugin only statically recognizes expressions written\n// directly as property values, and a call to an externally-defined function\n// isn't one of them.\n//\n// The hover, focus and pressed layers come from React Aria's render state,\n// `isHovered`, `isFocusVisible` and `isPressed`, rather than from `:hover`,\n// `:focus-visible` and `:active`. On a touch screen Chromium leaves `:hover`\n// on the last element tapped, so the layer and its lifted shadow stayed on a\n// button after the tap had ended, where React Aria ignores the emulated mouse\n// events that follow a touch. And React Aria prevents the default of the\n// keydown that presses a button with Space or Enter, so `:active` never\n// matched a keyboard press, which `isPressed` reports like any other.\n//\n// Disabled is a style of its own per variant rather than a `:disabled`\n// branch inside each property: a button given `href` renders as a link,\n// which React Aria turns into a <span> while disabled, and neither matches\n// the pseudo-class. The disabled styles are applied last from the render\n// state's `isDisabled`, and StyleX replaces a property whole, so they win\n// over any state layer applied before them.\n//\n// **Under forced colours a container is drawn as a rule.** That mode drops\n// the shadow and paints author backgrounds in a system colour, which left a\n// filled, tonal or elevated button as a label with nothing round it. `base`\n// draws a 1px `ButtonText` border there instead. Outlined keeps its own rule,\n// and text stays without one, as the page draws it. The mode repaints a\n// disabled button's fade at full strength as well. Chromium greys a disabled\n// `<button>` there by itself, but not the `<span>` React Aria renders for a\n// disabled link, so the disabled styles name `GrayText` for the label and\n// the edge rather than leave it to the browser.\n//\n// Two independent axes, applied base -> variant -> size. The variant carries\n// colour and the size carries geometry, so the two never argue: inline\n// padding belongs to the size alone, and every size declares its own.\n//\n// That is deliberate rather than incidental. The buttons page gives padding\n// per size — its Small button padding is 16dp, the 24dp beside it being the\n// older value the page marks as not recommended — and gives the five colour\n// styles no padding of their own. A text button is therefore as wide as a\n// filled one at the same size, which is what the code draws.\n//\n// This did once read the other way, with `md` declaring no padding so a\n// medium button fell through to its variant's. `fix(button)!: the spec's\n// five sizes` replaced that when the component took the page's sizes, since\n// a per-variant padding had nowhere to sit once every size carried one. The\n// comment describing the old cascade outlived it by some months, which is\n// how it came to say `text` keeps a tighter padding it has never had — back\n// then `text` declared 16dp while a filled `md` declared none at all, so the\n// text button was the wider of the two.\n//\n// **A toggle is the same button reporting a state.** Given `isSelected`,\n// `defaultSelected` or `onChange` it is React Aria's `ToggleButton`, which\n// announces the state through `aria-pressed`, as IconButton's toggle does.\n// The page gives four of the five styles a second pair of colour roles for\n// it: a filled toggle rests on surface container with an on-surface-variant\n// label and takes primary once selected, a tonal one moves from the\n// secondary container pair to secondary, an elevated one keeps its low\n// surface until it takes primary, and an outlined one swaps its rule for the\n// inverse surface pair. Under forced colours a selected toggle of any style\n// is filled `Highlight`, as IconButton's is. The page gives text no pair, so\n// a text button given those props stays a plain one.\n//\n// **The corner is a shape the button morphs between**, from the page's size\n// token sets. `round` rests at half the container's height, which is the pill\n// for a label on one line, and `square` at the size's square corner: 12dp up\n// to the page's S, 16dp at M and 28dp above. A press tightens either to the\n// size's pressed corner, 8dp, 12dp or 16dp, and a toggle trades its shape for\n// the other once selected — a round one for the square corner, a square one\n// for the round. The corner eases over the motion tokens' short duration, as\n// the container, label and rule colours and the shadow do between states, and\n// all of them move at once for a reader who asks for reduced motion.\n//\n// The round corner is a length rather than the pill token's 9999px, because\n// the browser draws a corner no larger than half the box and eases the value\n// as written. From 9999px a press spent all but the last frame or two of its\n// 150ms above the 20dp a medium button can show, so the corner held round and\n// then jumped. From half the height every frame of the ease is one the eye\n// can see. A label that wraps makes a button taller than that, and its ends a\n// little less than round, as a connected ButtonGroup's already are.\n//\n// What every button does past its own styles — the ripple, the link and\n// toggle forms, the pending ring and `aria-busy`, a parent's disabled state\n// — is `src/button`'s, shared with IconButton.\n\n/**\n * The press area the buttons page requires, which its two smallest sizes are\n * drawn under. A literal rather than `sizing.controlMd`, which holds the same\n * number, for the reason IconButton's `TARGET_SIZE` gives: a consumer\n * resizing their medium controls should not shrink a target the page states\n * as a floor.\n */\nconst TARGET_SIZE = '48px';\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)';\nconst styles = {\n  base: {\n    kGNEyG: \"x6s0dn4\",\n    kVAM5u: \"x1ylmb6m\",\n    ksu8eU: \"xx61lck\",\n    kMzoRj: \"xc342km x13rsnn2\",\n    kB7OPa: \"x9f619\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x3nfvp2\",\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kOIVth: \"x126z3so\",\n    kjj79g: \"xl56j7k\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    ks0D6T: \"x193iq5w\",\n    kHjlTd: \"xj0a0fe\",\n    kVAEAm: \"x1n2onr6\",\n    k9WMMc: \"x2b8uid\",\n    kybGjl: \"x1hl2dhg\",\n    kIyJzY: \"x4ukx00 x12w9bfk\",\n    k1ekBW: \"xidvh3d\",\n    kAMwcw: \"xmg88ys\",\n    $$css: true\n  },\n  disabled: {\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  elevated: {\n    kWkggS: \"x1vnz5z6\",\n    kGVxlE: \"x19efjv6\",\n    kMwMTN: \"x1mxwv8y\",\n    $$css: true\n  },\n  elevatedDisabled: {\n    kWkggS: \"xepofeg\",\n    kVAM5u: \"xmnqt3w\",\n    kGVxlE: \"x1gnnqk1\",\n    kMwMTN: \"x1xj74d8 x1bhcspo\",\n    $$css: true\n  },\n  elevatedToggleSelected: {\n    kWkggS: \"xnety89 x1jzqe4\",\n    kMwMTN: \"xwjo7ld x1k5gbb1\",\n    $$css: true\n  },\n  filled: {\n    kWkggS: \"xnety89\",\n    kGVxlE: \"x1gnnqk1\",\n    kMwMTN: \"xwjo7ld\",\n    $$css: true\n  },\n  filledDisabled: {\n    kWkggS: \"xepofeg\",\n    kVAM5u: \"xmnqt3w\",\n    kGVxlE: \"x1gnnqk1\",\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  icon: {\n    kGNEyG: \"x6s0dn4\",\n    k1xSpc: \"x3nfvp2\",\n    kmuXW: \"x2lah0s\",\n    kjj79g: \"xl56j7k\",\n    $$css: true\n  },\n  lg: {\n    kMv6JI: \"x46eyla\",\n    kGuDYH: \"x5ehqhr\",\n    k63SB2: \"xrf6cl6\",\n    kb6lSQ: \"x1g135zh\",\n    kLWn49: \"x1ggk5va\",\n    kAzted: \"xdovgog\",\n    k8WAf4: \"x1uvvd8r\",\n    kg3NbH: \"xg0ps1x\",\n    $$css: true\n  },\n  md: {\n    kgeoSG: \"x1cpjm7i\",\n    kGOzcv: \"xun2zgk\",\n    kpsdNU: \"xm4btww\",\n    kEoFBp: \"x1hmns74\",\n    kAzted: \"x1cio8j0\",\n    k8WAf4: \"x1cmllll\",\n    kg3NbH: \"x790zyz\",\n    $$css: true\n  },\n  outlined: {\n    kWkggS: \"xjbqb8w\",\n    kVAM5u: \"x133yhug\",\n    ksu8eU: \"x1y0btm7\",\n    kMzoRj: \"xmkeg23\",\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  },\n  outlinedDisabled: {\n    kWkggS: \"xjbqb8w\",\n    kVAM5u: \"xrh88j3 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  pending: {\n    kkrTdU: \"x19v85br\",\n    $$css: true\n  },\n  text: {\n    kWkggS: \"xjbqb8w\",\n    kMzoRj: \"xc342km\",\n    kMwMTN: \"x1mxwv8y\",\n    $$css: true\n  },\n  textDisabled: {\n    kWkggS: \"xjbqb8w\",\n    kMwMTN: \"x1xj74d8 x1bhcspo\",\n    $$css: true\n  },\n  tonal: {\n    kWkggS: \"x15dekr4\",\n    kGVxlE: \"x1gnnqk1\",\n    kMwMTN: \"x1sawysd\",\n    $$css: true\n  },\n  tonalDisabled: {\n    kWkggS: \"xepofeg\",\n    kVAM5u: \"xmnqt3w\",\n    kGVxlE: \"x1gnnqk1\",\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    kMv6JI: \"x1fz0g89\",\n    kGuDYH: \"xkb6epg\",\n    k63SB2: \"x76yrz5\",\n    kOIVth: \"x1gka490\",\n    kb6lSQ: \"x1s1qhaa\",\n    kLWn49: \"x1voeury\",\n    kAzted: \"x112cvos\",\n    k8WAf4: \"xny1cbh\",\n    kg3NbH: \"x1sdxjpb\",\n    $$css: true\n  },\n  xs: {\n    kgeoSG: \"x1cpjm7i\",\n    kGOzcv: \"xun2zgk\",\n    kpsdNU: \"x1ecwmwu\",\n    kEoFBp: \"x1hmns74\",\n    kAzted: \"xlzjxrf\",\n    k8WAf4: \"xmqoko8\",\n    kg3NbH: \"x18fpw6u\",\n    $$css: true\n  },\n  xxl: {\n    kMv6JI: \"x1vsmgmf\",\n    kGuDYH: \"xh9c4x\",\n    k63SB2: \"x1y15vu6\",\n    kOIVth: \"xxj4525\",\n    kb6lSQ: \"xoqu3bc\",\n    kLWn49: \"x10x9d6x\",\n    kAzted: \"xldltni\",\n    k8WAf4: \"x1lrxzt4\",\n    kg3NbH: \"x1dao9b2\",\n    $$css: true\n  }\n};\n\n// The outlined button's border thickens with the size, as the page's size\n// tokens have it: 1dp up to M, 2dp at L, 3dp at XL. A style per size rather\n// than a value in the size style, since a border on a filled button would\n// draw in the label colour.\nconst OUTLINE_WIDTHS = {\n  lg: '1px',\n  md: '1px',\n  xl: '2px',\n  xs: '1px',\n  xxl: '3px'\n} as const;\n\n// The outlined button draws its rule inside the width the other variants\n// take, as the page's buttons do: the padding gives up what the border takes,\n// so an outlined and a filled button with one label are one width, and a\n// group mixing them lines up. The height needs nothing, since it is a floor\n// the border already counts towards.\nconst outlinedSizes = {\n  lg: {\n    kMzoRj: \"xmkeg23\",\n    kg3NbH: \"xfeiziq\",\n    $$css: true\n  },\n  md: {\n    kMzoRj: \"xmkeg23\",\n    kg3NbH: \"x1uvede8\",\n    $$css: true\n  },\n  xl: {\n    kMzoRj: \"xdh2fpr\",\n    kg3NbH: \"xrhf21y\",\n    $$css: true\n  },\n  xs: {\n    kMzoRj: \"xmkeg23\",\n    kg3NbH: \"x9t8nta\",\n    $$css: true\n  },\n  xxl: {\n    kMzoRj: \"x9r2w2z\",\n    kg3NbH: \"x1wz3vkj\",\n    $$css: true\n  }\n};\n\n// The icon each size draws, from the page's size token sets: 20dp for the\n// two small sizes, then 24, 32 and 40. The gap before it is the size's own,\n// which `base`, `xl` and `xxl` already set as the page gives them.\nconst iconSizes = {\n  lg: {\n    kGuDYH: \"x1pvqxga\",\n    $$css: true\n  },\n  md: {\n    kGuDYH: \"xwsyq91\",\n    $$css: true\n  },\n  xl: {\n    kGuDYH: \"x1s3cmhv\",\n    $$css: true\n  },\n  xs: {\n    kGuDYH: \"xwsyq91\",\n    $$css: true\n  },\n  xxl: {\n    kGuDYH: \"x1tgwohi\",\n    $$css: true\n  }\n};\n\n// Each size's inline padding again, for the one place it is read at runtime:\n// a standard ButtonGroup widening a pressed button by adding to it. The size\n// styles above write the same values, and an outlined button's border comes\n// off them here as it does in `outlinedSizes`.\nconst PADDINGS = {\n  lg: spacing.xl,\n  md: spacing.lg,\n  xl: '48px',\n  xs: spacing.md,\n  xxl: '64px'\n};\n\n// The padding a standard group sets while it widens or narrows the button.\nconst shifted = {\n  padding: (value: string) => [{\n    kg3NbH: value != null ? \"x30g6up\" : value,\n    $$css: true\n  }, {\n    \"--x-paddingInline\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(value)\n  }]\n};\n\n// The round corner each size rests at, and a square toggle once selected:\n// half the container's height — see the header for why not the pill's\n// 9999px. `min()` leaves the pill token in charge below that, so a scheme\n// that sets `--kui-radius-pill` small still draws round buttons at its corner.\nconst roundShapes = {\n  lg: {\n    kaIpWk: \"x1j5kmnq\",\n    $$css: true\n  },\n  md: {\n    kaIpWk: \"x1y5wlyh\",\n    $$css: true\n  },\n  xl: {\n    kaIpWk: \"x39tcx0\",\n    $$css: true\n  },\n  xs: {\n    kaIpWk: \"xcslhsm\",\n    $$css: true\n  },\n  xxl: {\n    kaIpWk: \"xjy9rn5\",\n    $$css: true\n  }\n};\n\n// The square corner each size rests at, and a round toggle once selected.\nconst squareShapes = {\n  lg: {\n    kaIpWk: \"xhpdng0\",\n    $$css: true\n  },\n  md: {\n    kaIpWk: \"x62ce2h\",\n    $$css: true\n  },\n  xl: {\n    kaIpWk: \"x19pkqky\",\n    $$css: true\n  },\n  xs: {\n    kaIpWk: \"x62ce2h\",\n    $$css: true\n  },\n  xxl: {\n    kaIpWk: \"x19pkqky\",\n    $$css: true\n  }\n};\n\n// The corner each size presses to, whatever its shape. Applied after the\n// resting and selected shapes, so a press is felt whichever the button rests\n// at.\nconst pressedShapes = {\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// The interaction state layers, one style per variant for each state, applied\n// from React Aria's render state — see the header for why that and not the\n// pseudo-classes. 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. Hover lifts filled and tonal off the page and raises elevated a\n// level, and a press brings each back to where it rests.\n//\n// A toggle's containers carry a layer of their own, each the label colour\n// over that container, applied after the variant's so the variant still\n// decides the shadow. A selected toggle's keeps its forced-colours\n// `Highlight`, since a later style replaces the property whole.\nconst hovered = {\n  elevated: {\n    kWkggS: \"xltxkvm\",\n    kGVxlE: \"x1os83gw\",\n    $$css: true\n  },\n  elevatedToggleSelected: {\n    kWkggS: \"xo1ct44 x1jzqe4\",\n    $$css: true\n  },\n  filled: {\n    kWkggS: \"xo1ct44\",\n    kGVxlE: \"x19efjv6\",\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  text: {\n    kWkggS: \"x659ado\",\n    $$css: true\n  },\n  tonal: {\n    kWkggS: \"x1fctxn6\",\n    kGVxlE: \"x19efjv6\",\n    $$css: true\n  },\n  tonalToggleSelected: {\n    kWkggS: \"x12r95rf x1jzqe4\",\n    $$css: true\n  }\n};\nconst focused = {\n  elevated: {\n    kWkggS: \"xcn1wy9\",\n    $$css: true\n  },\n  elevatedToggleSelected: {\n    kWkggS: \"xhodiby x1jzqe4\",\n    $$css: true\n  },\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  text: {\n    kWkggS: \"x1sog3nf\",\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  elevated: {\n    kWkggS: \"x1d33wxb\",\n    kGVxlE: \"x19efjv6\",\n    $$css: true\n  },\n  elevatedToggleSelected: {\n    kWkggS: \"x7b25lv x1jzqe4\",\n    $$css: true\n  },\n  filled: {\n    kWkggS: \"x7b25lv\",\n    kGVxlE: \"x1gnnqk1\",\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  text: {\n    kWkggS: \"x1dvjsmr\",\n    $$css: true\n  },\n  tonal: {\n    kWkggS: \"xzpauq9\",\n    kGVxlE: \"x1gnnqk1\",\n    $$css: true\n  },\n  tonalToggleSelected: {\n    kWkggS: \"x12o6fnv x1jzqe4\",\n    $$css: true\n  }\n};\nconst disabledStyles = {\n  elevated: styles.elevatedDisabled,\n  filled: styles.filledDisabled,\n  outlined: styles.outlinedDisabled,\n  text: styles.textDisabled,\n  tonal: styles.tonalDisabled\n};\n\n// Which container a toggle draws, selected and not, by its name in the\n// tables above. Three of the eight are the plain button's own: an unselected\n// tonal, elevated or outlined toggle is the tonal, elevated or outlined\n// button.\nconst toggleContainers = {\n  elevated: {\n    selected: 'elevatedToggleSelected',\n    unselected: 'elevated'\n  },\n  filled: {\n    selected: 'filledToggleSelected',\n    unselected: 'filledToggle'\n  },\n  outlined: {\n    selected: 'outlinedToggleSelected',\n    unselected: 'outlined'\n  },\n  tonal: {\n    selected: 'tonalToggleSelected',\n    unselected: 'tonal'\n  }\n} as const;\ntype ButtonProps = ButtonDOMProps & (ButtonLinkForm | ButtonPressForm | (ButtonToggleForm & {\n  /**\n   * A toggle takes any variant but `text`, which the page gives no\n   * selected colours.\n   */\n  variant?: Exclude<ButtonVariant, 'text'>;\n})) & {\n  children?: ReactNode;\n  /** A function may compute the class from the button's render state. */\n  className?: ClassNameOrFunction<ButtonState>;\n  /**\n   * Disables the press ripple. The hover/pressed background state layer is\n   * unaffected.\n   * @default false\n   */\n  disableRipple?: boolean;\n  /**\n   * An icon before the label, at the page's icon size for the button's size:\n   * 20px at `xs` and `md`, 24px at `lg`, 32px at `xl` and 40px at `xxl`. Draw\n   * it `1em` square in `currentColor`, as every icon here is, and it follows.\n   * Hidden with the label while the button is pending.\n   */\n  icon?: ReactNode;\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  /**\n   * The corner the button rests at: `round` is the pill, `square` the\n   * page's rounded rectangle, 12px up to `md`, 16px at `lg` and 28px above.\n   * Either tightens while pressed, and a toggle trades one for the other\n   * once selected.\n   * @default 'round'\n   */\n  shape?: ButtonShape;\n  /**\n   * Control height: `xs` 32px, `md` 40px, `lg` 56px, `xl` 96px, `xxl` 136px —\n   * the buttons spec page's XS, S, M, L and XL, each with its own inline\n   * padding and type role. `md` is the page's default.\n   * @default 'md'\n   */\n  size?: ButtonSize;\n  /** A function may compute the style from the button's render state. */\n  style?: StyleOrFunction<ButtonState>;\n  /**\n   * How much weight the button pulls. `filled` and `tonal` carry a container\n   * of their own; `outlined` and `text` sit on the page; `elevated` sits on\n   * a low surface and lifts off it with a shadow, for a button that has to\n   * separate from a busy background rather than from the page.\n   * @default 'filled'\n   */\n  variant?: ButtonVariant;\n};\ntype ButtonShape = 'round' | 'square';\ntype ButtonSize = 'lg' | 'md' | 'xl' | 'xs' | 'xxl';\ntype ButtonVariant = 'elevated' | 'filled' | 'outlined' | 'text' | 'tonal';\n\n// The four styles the page gives a toggle's colour pairs; see the header.\ntype ToggleVariant = keyof typeof toggleContainers;\n\n/**\n * The design's button, at five emphasis levels and five control heights,\n * round or square. Given `href` it is a link with the same appearance. Every\n * `aria-*` prop is forwarded to the element; React Aria alone would keep only\n * 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. The three forms are exclusive, so a toggle\n * given `href` does not compile, and nor does a `text` toggle, which the page\n * gives no selected colours — a `text` button in a selecting `ButtonGroup`\n * is the one that toggles, for the group's sake. A toggle may be pending,\n * for a state saved somewhere slow: the ring replaces its label and a press\n * changes nothing until it clears.\n *\n * ```tsx\n * <Button defaultSelected variant=\"tonal\">\n *   Label\n * </Button>\n * ```\n */\nfunction Button({\n  children,\n  defaultSelected,\n  href,\n  icon,\n  isPending,\n  isSelected,\n  onChange,\n  pendingLabel,\n  rel,\n  shape = 'round',\n  size: ownSize,\n  target,\n  variant = 'filled',\n  ...props\n}: ButtonProps & RefAttributes<HTMLAnchorElement | HTMLButtonElement>) {\n  // A ButtonGroup or a SplitButton around the button hands it a size, its\n  // shape at the group's inner edges and the press interaction; 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  // A group that selects is React Aria's ToggleButtonGroup, whose buttons\n  // have to be toggles to take part in its selection.\n  const inSelectingGroup = useContext(ToggleGroupStateContext) !== null;\n  const press = groupPressHandlers(group, props.onPressStart, props.onPressEnd);\n  const selection = useSelection({\n    defaultSelected,\n    isSelected,\n    onChange\n  });\n\n  // The icon goes in with the label, inside what ButtonBase hides while the\n  // button is pending, so the ring takes the place of both.\n  const content = icon === undefined ? children : <>\n        <span {...stylex.props(styles.icon, iconSizes[size])}>{icon}</span>\n        {children}\n      </>;\n\n  // A selecting ButtonGroup around it makes it React Aria's ToggleButton, to\n  // take part in the group's selection — a text button too, which draws its\n  // selection by nothing but the group's shape. Whether a button sits in one\n  // does not change from one render to the next.\n  if (inSelectingGroup) {\n    return <ToggleButtonBase {...props} {...press} classes={variant === 'text' ? buttonClasses(shape, size, variant, group) : toggleClasses(shape, size, variant, group)} isPending={isPending}>\n        {content}\n      </ToggleButtonBase>;\n  }\n\n  // The three props that make this a toggle on its own, read as IconButton\n  // reads them, and on the same component as the plain button so a toggle\n  // whose `isSelected` is still loading stays one element when it arrives.\n  // The types keep them off a `text` button; the check here keeps a call\n  // site that slipped past them a plain button, as it always was.\n  const isToggle = variant !== 'text' && (defaultSelected !== undefined || isSelected !== undefined || onChange !== undefined);\n  return <ButtonBase {...props} {...press} classes={isToggle ? toggleClasses(shape, size, variant, group) : buttonClasses(shape, size, variant, group)} href={href} isPending={isPending} isSelected={isToggle ? selection.selected : undefined} onPress={isToggle ? pressThen(props.onPress, selection.toggle) : props.onPress} pendingLabel={pendingLabel} rel={rel} target={target}>\n      {content}\n    </ButtonBase>;\n}\n\n// The button's own classes, from React Aria's render state — see the header\n// for why that and not the pseudo-classes. Built by a call rather than\n// 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 buttonClasses(shape: ButtonShape, size: ButtonSize, variant: ButtonVariant, group: ButtonGroupItem | null) {\n  return (state: ButtonClassesState) => stylex.props(styles.base, focus.ring, styles[variant], styles[size], shape === 'square' ? squareShapes[size] : roundShapes[size], variant === 'outlined' && outlinedSizes[size], state.isHovered && hovered[variant], state.isFocusVisible && focused[variant], state.isPressed && pressed[variant], state.isPressed && pressedShapes[size], groupStyles(group, size, variant, state), state.isPending === true && styles.pending, state.isDisabled && styles.disabled, state.isDisabled && disabledStyles[variant]);\n}\n\n// What a group lays over the button: its own styles for the button's state,\n// and the standard group's widening or narrowing as extra inline padding,\n// half of the shift on either side.\nfunction groupStyles(group: ButtonGroupItem | null, size: ButtonSize, variant: ButtonVariant, state: ButtonState) {\n  if (group === null) {\n    return null;\n  }\n  const border = variant === 'outlined' ? OUTLINE_WIDTHS[size] : '0px';\n  return [group.styles?.(state), group.shift !== 0 && shifted.padding(`calc(${PADDINGS[size]} - ${border} + ${group.shift / 2}px)`)];\n}\n\n// A toggle's classes: the plain button's, with the container and its layers\n// swapped for the toggle's pair, and the selected shape between the resting\n// and the pressed one. The variant's own style and layers still go first, for\n// the shadow and the rule they carry. Built by a call for the reason\n// `buttonClasses` is.\nfunction toggleClasses(shape: ButtonShape, size: ButtonSize, variant: ToggleVariant, group: ButtonGroupItem | null) {\n  return (state: ButtonClassesState) => {\n    const isSelected = state.isSelected === true;\n    const container = toggleContainers[variant][isSelected ? 'selected' : 'unselected'];\n    return stylex.props(styles.base, focus.ring, styles[variant], styles[container], styles[size], shape === 'square' ? squareShapes[size] : roundShapes[size], isSelected && (shape === 'square' ? roundShapes[size] : squareShapes[size]), variant === 'outlined' && outlinedSizes[size], state.isHovered && hovered[variant], state.isHovered && hovered[container], state.isFocusVisible && focused[variant], state.isFocusVisible && focused[container], state.isPressed && pressed[variant], state.isPressed && pressed[container], state.isPressed && pressedShapes[size], groupStyles(group, size, variant, state), state.isPending === true && styles.pending, state.isDisabled && styles.disabled, state.isDisabled && disabledStyles[variant]);\n  };\n}\nexport type { ButtonDOMProps, ButtonProps, ButtonShape, ButtonSize, ButtonState, ButtonVariant };\nexport default Button;"],"mappings":"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"}

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

@@ -4,6 +4,13 @@ import { CalendarProps, DateValue } from "react-aria-components";
 type CalendarProps$1<T extends DateValue = DateValue> = {
   /** A function may compute the class from the calendar's render state. */
   className?: CalendarProps<T>['className'];
+  /**
+   * The message shown under the months, which also marks the calendar
+   * invalid: the date it holds turns to the error container colours, and
+   * React Aria points that date's description at the message. `isInvalid`
+   * on its own marks the date with no message.
+   */
+  error?: string;
   /**
    * Whether the header draws the month and the year as menu buttons, each
    * opening a list of them in the grid's place, as the docked date picker's
@@ -42,7 +49,7 @@ type CalendarProps$1<T extends DateValue = DateValue> = {
  * The call site's `className` and `style` land on the container, which is the
  * element a layout positions.
  */
-declare function Calendar$1<T extends DateValue>({ showMonthYearMenus, ...props }: CalendarProps$1<T> & RefAttributes<HTMLDivElement>): import("react").JSX.Element;
+declare function Calendar$1<T extends DateValue>({ error, showMonthYearMenus, ...props }: CalendarProps$1<T> & RefAttributes<HTMLDivElement>): import("react").JSX.Element;
 //#endregion
 export { type CalendarProps$1 as CalendarProps, Calendar$1 as default };
 //# sourceMappingURL=index.d.ts.map