@kanso-labs/kanso-ui 0.44.0 → 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/checkbox/index.js

@@ -121,7 +121,7 @@ function buttonContent(children, ripple, inGroup) {
 			...props(controlStyles.disc, styles.control, state.isReadOnly && controlStyles.controlReadOnly, state.isDisabled && controlStyles.controlDisabled, interactive && state.isHovered && hoverLayers[tone], interactive && state.isFocusVisible && focusLayers[tone], interactive && state.isPressed && pressedLayers[tone], state.isFocusVisible && focus.ringVisible),
 			children: [/* @__PURE__ */ jsx("span", {
 				...props(styles.box, marked && styles.boxMarked, !marked && state.isInvalid && styles.boxUnmarkedError, !marked && !state.isInvalid && interactive && active && styles.boxUnmarkedActive, marked && state.isInvalid && styles.boxMarkedError, state.isDisabled && (marked ? styles.boxMarkedDisabled : styles.boxUnmarkedDisabled)),
-				children: state.isIndeterminate ? /* @__PURE__ */ jsx(IndeterminateGlyph, { className: "xmix8c7 x1lliihq x1xp8n7a" }) : state.isSelected ? /* @__PURE__ */ jsx(CheckGlyph, { className: "xmix8c7 x1lliihq x1xp8n7a" }) : null
+				children: state.isIndeterminate ? /* @__PURE__ */ jsx(IndeterminateGlyph, { className: "xmix8c7 x1lliihq x2lah0s x1xp8n7a" }) : state.isSelected ? /* @__PURE__ */ jsx(CheckGlyph, { className: "xmix8c7 x1lliihq x2lah0s x1xp8n7a" }) : null
 			}), interactive ? ripple.surface : null]
 		}), /* @__PURE__ */ jsx(ControlLabel, {
 			isRequired: required,
@@ -210,6 +210,7 @@ function fieldContent(button, description, error, reserve) {
 		children: /* @__PURE__ */ jsx(FieldMessage, {
 			description,
 			error,
+			indent: true,
 			inset: false,
 			isDisabled,
 			reserve

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","ReactNode","RefAttributes","CheckboxButtonRenderProps","CheckboxFieldRenderProps","CheckboxFieldProps","RACCheckboxFieldProps","stylex","useContext","CheckboxButton","CheckboxField","CheckboxGroupStateContext","ControlLabel","controlStyles","FieldMessage","invalidFrom","useFieldValidationBehavior","CheckGlyph","IndeterminateGlyph","useRipple","focus","mergeStatefulStyles","colors","motion","stateLayerOpacity","FORCED_COLORS","styles","box","k6CgDc","kGNEyG","kWkggS","kZKoxP","kVAM5u","kaIpWk","ksu8eU","kMzoRj","kB7OPa","kMwMTN","k1xSpc","kzqmXN","kjj79g","kIyJzY","k1ekBW","kAMwcw","$$css","boxMarked","boxMarkedDisabled","boxMarkedError","boxUnmarkedActive","boxUnmarkedDisabled","boxUnmarkedError","control","hoverLayers","error","marked","unmarked","focusLayers","pressedLayers","CheckboxProps","children","description","Omit","Ripple","ReturnType","HTMLSpanElement","Tone","buttonContent","ripple","inGroup","state","required","isRequired","isSelected","isIndeterminate","interactive","isDisabled","isReadOnly","tone","isInvalid","active","isHovered","isPressed","isFocusVisible","handlers","props","disc","controlReadOnly","controlDisabled","ringVisible","surface","Checkbox","t0","$","validationBehavior","reachable","validate","undefined","name","T0","t1","t2","field","t3","t4","t5","fieldContent","t6","button","reserve","messages","stylex.props","_c","props"],"sources":["../../../src/components/checkbox/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode, RefAttributes } from 'react';\nimport type { CheckboxButtonRenderProps, CheckboxFieldRenderProps, CheckboxFieldProps as RACCheckboxFieldProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { useContext } from 'react';\nimport { CheckboxButton, CheckboxField, CheckboxGroupStateContext } from 'react-aria-components';\nimport { ControlLabel } from '../../control';\nimport { controlStyles } from '../../control/styles';\nimport { FieldMessage } from '../../field';\nimport { invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { CheckGlyph, IndeterminateGlyph } from '../../glyphs';\nimport { useRipple } from '../../hooks/useRipple';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, stateLayerOpacity } from '../../tokens/design.tokens.stylex';\n\n// The checkbox page: an 18dp box with a 2dp corner and an 18dp glyph, inside\n// a 40dp state layer, with a 48dp target. Unselected, the box is a 2dp rule\n// in on surface variant that turns on surface while hovered, pressed or\n// focused; selected or indeterminate, it fills with primary and the glyph\n// takes on primary. The error pair is error and on error, and disabled is\n// on surface at the disabled opacity for the rule or the fill, with the\n// glyph in surface. The state layer is on surface over an unselected box and\n// primary over a selected one while hovered, and the two swap once pressed.\n//\n// React Aria's `CheckboxField` is the root, a div holding the description\n// and error slots; its `CheckboxButton` is the label around a visually\n// hidden input, and everything drawn is that label's children, chosen from\n// the render state React Aria hands them. The field is a two-column grid —\n// the control, then the text — and the label is `display: contents`, so the\n// control and the label text each take a column and the description and\n// error line up under the text rather than under the box.\n//\n// The adjacent label is body-large on surface, which the page keeps the same\n// whether or not the box is selected. The corner is a literal: the page's\n// 2dp is a step the shape scale does not carry.\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  box: {\n    k6CgDc: \"x12w9bfk\",\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kZKoxP: \"xmix8c7\",\n    kVAM5u: \"x1is7jjm\",\n    kaIpWk: \"x1cum3z5\",\n    ksu8eU: \"x1y0btm7\",\n    kMzoRj: \"xdh2fpr\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"xwjo7ld\",\n    k1xSpc: \"x78zum5\",\n    kzqmXN: \"x1xp8n7a\",\n    kjj79g: \"xl56j7k\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"xts7igz\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  boxMarked: {\n    kWkggS: \"xnety89\",\n    kVAM5u: \"x9r1u3d\",\n    $$css: true\n  },\n  boxMarkedDisabled: {\n    kWkggS: \"x1crcgwy\",\n    kVAM5u: \"x9r1u3d xmnqt3w\",\n    kMwMTN: \"xrpadme x1bhcspo\",\n    $$css: true\n  },\n  boxMarkedError: {\n    kWkggS: \"xwi4nbo\",\n    kVAM5u: \"x9r1u3d\",\n    kMwMTN: \"x1l7c2jh\",\n    $$css: true\n  },\n  boxUnmarkedActive: {\n    kVAM5u: \"x1pacwz9\",\n    $$css: true\n  },\n  boxUnmarkedDisabled: {\n    kVAM5u: \"xp1r3on xmnqt3w\",\n    $$css: true\n  },\n  boxUnmarkedError: {\n    kVAM5u: \"xx78ee7\",\n    $$css: true\n  },\n  control: {\n    kMwMTN: \"x139gbkf\",\n    $$css: true\n  }\n};\n\n// The state layer's colour follows the box: on surface over an unmarked box\n// and primary over a marked one while hovered, the two swapped once pressed,\n// and error throughout while invalid.\nconst hoverLayers = {\n  error: {\n    kWkggS: \"x55e1u4\",\n    $$css: true\n  },\n  marked: {\n    kWkggS: \"x659ado\",\n    $$css: true\n  },\n  unmarked: {\n    kWkggS: \"x1b18xnh\",\n    $$css: true\n  }\n};\n\n// A keyboard's focus draws the hover layer's colour at the focus opacity.\nconst focusLayers = {\n  error: {\n    kWkggS: \"xyn212m\",\n    $$css: true\n  },\n  marked: {\n    kWkggS: \"x1sog3nf\",\n    $$css: true\n  },\n  unmarked: {\n    kWkggS: \"xwqhyid\",\n    $$css: true\n  }\n};\nconst pressedLayers = {\n  error: {\n    kWkggS: \"x3czxiy\",\n    $$css: true\n  },\n  marked: {\n    kWkggS: \"xjeeohs\",\n    $$css: true\n  },\n  unmarked: {\n    kWkggS: \"x1dvjsmr\",\n    $$css: true\n  }\n};\ntype CheckboxProps = {\n  /**\n   * The label, beside the box. A checkbox that a row labels some other way\n   * leaves it out and passes `aria-label` instead.\n   *\n   * A link or a button in it acts on its own, as in a native label: a press\n   * or Enter on \"the terms\" in \"I agree to the terms\" follows the link and\n   * leaves the checkbox as it was. A press anywhere else in the label\n   * toggles it.\n   */\n  children?: ReactNode;\n  /**\n   * A hint under the label. Replaced by `error` when there is one, so the\n   * two never stack.\n   */\n  description?: string;\n  /**\n   * The problem with the current value, in words. Its presence is what puts\n   * the checkbox in its error state — the message, the error colours and\n   * `aria-invalid` all follow from it.\n   *\n   * Outside a `Form` the message line arrives with the message, so the\n   * field grows when this does and moves what is under it. A `Form` holds\n   * that space from the start; so does a permanent `description`.\n   */\n  error?: string;\n} & Omit<RACCheckboxFieldProps, 'children' | 'isInvalid' | 'validationBehavior'>;\ntype Ripple = ReturnType<typeof useRipple<HTMLSpanElement>>;\ntype Tone = 'error' | 'marked' | 'unmarked';\n\n// What the label draws, chosen from the render state React Aria hands it.\n// Built by a call rather than written inline at the prop, which is what\n// react-perf's no-new-function-as-prop is after; the React Compiler memoises\n// the result on its inputs. The ripple's handlers and surface go on the\n// control while the checkbox can change, and are left off while it cannot,\n// since a press that changes nothing should not look like one.\nfunction buttonContent(children: ReactNode, ripple: Ripple, inGroup: boolean) {\n  return (state: CheckboxButtonRenderProps) => {\n    // A checkbox in a group is marked by the group's label rather than its\n    // own: the group is what has to have a choice made in it.\n    const required = state.isRequired && !inGroup;\n    const marked = state.isSelected || state.isIndeterminate;\n    const interactive = !state.isDisabled && !state.isReadOnly;\n    const tone: Tone = state.isInvalid ? 'error' : marked ? 'marked' : 'unmarked';\n    const active = state.isHovered || state.isPressed || state.isFocusVisible;\n    return <>\n        <span {...interactive ? ripple.handlers : {}} {...stylex.props(controlStyles.disc, styles.control, state.isReadOnly && controlStyles.controlReadOnly, state.isDisabled && controlStyles.controlDisabled, interactive && state.isHovered && hoverLayers[tone], interactive && state.isFocusVisible && focusLayers[tone], interactive && state.isPressed && pressedLayers[tone], state.isFocusVisible && focus.ringVisible)}>\n          <span {...stylex.props(styles.box, marked && styles.boxMarked, !marked && state.isInvalid && styles.boxUnmarkedError, !marked && !state.isInvalid && interactive && active && styles.boxUnmarkedActive, marked && state.isInvalid && styles.boxMarkedError, state.isDisabled && (marked ? styles.boxMarkedDisabled : styles.boxUnmarkedDisabled))}>\n            {state.isIndeterminate ? <IndeterminateGlyph className=\"xmix8c7 x1lliihq x1xp8n7a\" /> : state.isSelected ? <CheckGlyph className=\"xmix8c7 x1lliihq x1xp8n7a\" /> : null}\n          </span>\n          {interactive ? ripple.surface : null}\n        </span>\n        <ControlLabel isRequired={required} state={state}>\n          {children}\n        </ControlLabel>\n      </>;\n  };\n}\n\n/**\n * A checkbox with its label, and optionally a description or an error under\n * it. Its state is React Aria's: pass `isSelected` with `onChange` to\n * control it, or `defaultSelected` to let it keep its own; `isIndeterminate`\n * draws the dash for a box that stands for a partly selected set. Inside a\n * `CheckboxGroup` it takes its `value` and the group's selection instead.\n *\n * `isRequired` ends the label in the asterisk every required field's label\n * ends in. Inside a `CheckboxGroup` the group's label carries it instead,\n * since the group is what must have a choice made in it.\n *\n * The call site's `className` and `style` land on the field as a whole,\n * which is the element a layout positions.\n */\nfunction Checkbox({\n  children,\n  description,\n  error,\n  ...props\n}: CheckboxProps & RefAttributes<HTMLDivElement>) {\n  const ripple = useRipple<HTMLSpanElement>();\n  const validationBehavior = useFieldValidationBehavior();\n\n  // Whether a message can ever reach this checkbox, which is what a form\n  // keeps an empty line under a field for. One in a group cannot — the\n  // group owns the one message and keeps its own line for it — and one on\n  // its own can only where something can find it wanting: a requirement, a\n  // check of its own, or a name a form's errors can be keyed by. Without\n  // this every checkbox in a form sat a line taller than it draws, and a\n  // group of them in a form gained a line after every item.\n  const inGroup = useContext(CheckboxGroupStateContext) !== null;\n  const reachable = !inGroup && (props.isRequired === true || props.validate !== undefined || props.name !== undefined);\n  return <CheckboxField isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(controlStyles.field), props)}>\n      {fieldContent(<CheckboxButton className=\"xjp7ctv\">\n          {buttonContent(children, ripple, inGroup)}\n        </CheckboxButton>, description, error, reachable)}\n    </CheckboxField>;\n}\n\n// The button and the line under it, from the field's render state: the\n// description fades with a disabled checkbox, by itself or by its group, as\n// its label does. Built by a call for the same reason as `buttonContent`.\nfunction fieldContent(button: ReactNode, description: string | undefined, error: string | undefined, reserve: boolean) {\n  return ({\n    isDisabled\n  }: CheckboxFieldRenderProps) => <>\n      {button}\n      <div {...stylex.props(controlStyles.messages)}>\n        <FieldMessage description={description} error={error} inset={false} isDisabled={isDisabled} reserve={reserve} />\n      </div>\n    </>;\n}\nexport type { CheckboxProps };\nexport default Checkbox;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["c","_c","ReactNode","RefAttributes","CheckboxButtonRenderProps","CheckboxFieldRenderProps","CheckboxFieldProps","RACCheckboxFieldProps","stylex","useContext","CheckboxButton","CheckboxField","CheckboxGroupStateContext","ControlLabel","controlStyles","FieldMessage","invalidFrom","useFieldValidationBehavior","CheckGlyph","IndeterminateGlyph","useRipple","focus","mergeStatefulStyles","colors","motion","stateLayerOpacity","FORCED_COLORS","styles","box","k6CgDc","kGNEyG","kWkggS","kZKoxP","kVAM5u","kaIpWk","ksu8eU","kMzoRj","kB7OPa","kMwMTN","k1xSpc","kzqmXN","kjj79g","kIyJzY","k1ekBW","kAMwcw","$$css","boxMarked","boxMarkedDisabled","boxMarkedError","boxUnmarkedActive","boxUnmarkedDisabled","boxUnmarkedError","control","hoverLayers","error","marked","unmarked","focusLayers","pressedLayers","CheckboxProps","children","description","Omit","Ripple","ReturnType","HTMLSpanElement","Tone","buttonContent","ripple","inGroup","state","required","isRequired","isSelected","isIndeterminate","interactive","isDisabled","isReadOnly","tone","isInvalid","active","isHovered","isPressed","isFocusVisible","handlers","props","disc","controlReadOnly","controlDisabled","ringVisible","surface","Checkbox","t0","$","validationBehavior","reachable","validate","undefined","name","T0","t1","t2","field","t3","t4","t5","fieldContent","t6","button","reserve","messages","stylex.props","_c","props"],"sources":["../../../src/components/checkbox/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode, RefAttributes } from 'react';\nimport type { CheckboxButtonRenderProps, CheckboxFieldRenderProps, CheckboxFieldProps as RACCheckboxFieldProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { useContext } from 'react';\nimport { CheckboxButton, CheckboxField, CheckboxGroupStateContext } from 'react-aria-components';\nimport { ControlLabel } from '../../control';\nimport { controlStyles } from '../../control/styles';\nimport { FieldMessage } from '../../field';\nimport { invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { CheckGlyph, IndeterminateGlyph } from '../../glyphs';\nimport { useRipple } from '../../hooks/useRipple';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, stateLayerOpacity } from '../../tokens/design.tokens.stylex';\n\n// The checkbox page: an 18dp box with a 2dp corner and an 18dp glyph, inside\n// a 40dp state layer, with a 48dp target. Unselected, the box is a 2dp rule\n// in on surface variant that turns on surface while hovered, pressed or\n// focused; selected or indeterminate, it fills with primary and the glyph\n// takes on primary. The error pair is error and on error, and disabled is\n// on surface at the disabled opacity for the rule or the fill, with the\n// glyph in surface. The state layer is on surface over an unselected box and\n// primary over a selected one while hovered, and the two swap once pressed.\n//\n// React Aria's `CheckboxField` is the root, a div holding the description\n// and error slots; its `CheckboxButton` is the label around a visually\n// hidden input, and everything drawn is that label's children, chosen from\n// the render state React Aria hands them. The field is a two-column grid —\n// the control, then the text — and the label is `display: contents`, so the\n// control and the label text each take a column and the description and\n// error line up under the text rather than under the box.\n//\n// The adjacent label is body-large on surface, which the page keeps the same\n// whether or not the box is selected. The corner is a literal: the page's\n// 2dp is a step the shape scale does not carry.\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  box: {\n    k6CgDc: \"x12w9bfk\",\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kZKoxP: \"xmix8c7\",\n    kVAM5u: \"x1is7jjm\",\n    kaIpWk: \"x1cum3z5\",\n    ksu8eU: \"x1y0btm7\",\n    kMzoRj: \"xdh2fpr\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"xwjo7ld\",\n    k1xSpc: \"x78zum5\",\n    kzqmXN: \"x1xp8n7a\",\n    kjj79g: \"xl56j7k\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"xts7igz\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  boxMarked: {\n    kWkggS: \"xnety89\",\n    kVAM5u: \"x9r1u3d\",\n    $$css: true\n  },\n  boxMarkedDisabled: {\n    kWkggS: \"x1crcgwy\",\n    kVAM5u: \"x9r1u3d xmnqt3w\",\n    kMwMTN: \"xrpadme x1bhcspo\",\n    $$css: true\n  },\n  boxMarkedError: {\n    kWkggS: \"xwi4nbo\",\n    kVAM5u: \"x9r1u3d\",\n    kMwMTN: \"x1l7c2jh\",\n    $$css: true\n  },\n  boxUnmarkedActive: {\n    kVAM5u: \"x1pacwz9\",\n    $$css: true\n  },\n  boxUnmarkedDisabled: {\n    kVAM5u: \"xp1r3on xmnqt3w\",\n    $$css: true\n  },\n  boxUnmarkedError: {\n    kVAM5u: \"xx78ee7\",\n    $$css: true\n  },\n  control: {\n    kMwMTN: \"x139gbkf\",\n    $$css: true\n  }\n};\n\n// The state layer's colour follows the box: on surface over an unmarked box\n// and primary over a marked one while hovered, the two swapped once pressed,\n// and error throughout while invalid.\nconst hoverLayers = {\n  error: {\n    kWkggS: \"x55e1u4\",\n    $$css: true\n  },\n  marked: {\n    kWkggS: \"x659ado\",\n    $$css: true\n  },\n  unmarked: {\n    kWkggS: \"x1b18xnh\",\n    $$css: true\n  }\n};\n\n// A keyboard's focus draws the hover layer's colour at the focus opacity.\nconst focusLayers = {\n  error: {\n    kWkggS: \"xyn212m\",\n    $$css: true\n  },\n  marked: {\n    kWkggS: \"x1sog3nf\",\n    $$css: true\n  },\n  unmarked: {\n    kWkggS: \"xwqhyid\",\n    $$css: true\n  }\n};\nconst pressedLayers = {\n  error: {\n    kWkggS: \"x3czxiy\",\n    $$css: true\n  },\n  marked: {\n    kWkggS: \"xjeeohs\",\n    $$css: true\n  },\n  unmarked: {\n    kWkggS: \"x1dvjsmr\",\n    $$css: true\n  }\n};\ntype CheckboxProps = {\n  /**\n   * The label, beside the box. A checkbox that a row labels some other way\n   * leaves it out and passes `aria-label` instead.\n   *\n   * A link or a button in it acts on its own, as in a native label: a press\n   * or Enter on \"the terms\" in \"I agree to the terms\" follows the link and\n   * leaves the checkbox as it was. A press anywhere else in the label\n   * toggles it.\n   */\n  children?: ReactNode;\n  /**\n   * A hint under the label. Replaced by `error` when there is one, so the\n   * two never stack.\n   */\n  description?: string;\n  /**\n   * The problem with the current value, in words. Its presence is what puts\n   * the checkbox in its error state — the message, the error colours and\n   * `aria-invalid` all follow from it.\n   *\n   * Outside a `Form` the message line arrives with the message, so the\n   * field grows when this does and moves what is under it. A `Form` holds\n   * that space from the start; so does a permanent `description`.\n   */\n  error?: string;\n} & Omit<RACCheckboxFieldProps, 'children' | 'isInvalid' | 'validationBehavior'>;\ntype Ripple = ReturnType<typeof useRipple<HTMLSpanElement>>;\ntype Tone = 'error' | 'marked' | 'unmarked';\n\n// What the label draws, chosen from the render state React Aria hands it.\n// Built by a call rather than written inline at the prop, which is what\n// react-perf's no-new-function-as-prop is after; the React Compiler memoises\n// the result on its inputs. The ripple's handlers and surface go on the\n// control while the checkbox can change, and are left off while it cannot,\n// since a press that changes nothing should not look like one.\nfunction buttonContent(children: ReactNode, ripple: Ripple, inGroup: boolean) {\n  return (state: CheckboxButtonRenderProps) => {\n    // A checkbox in a group is marked by the group's label rather than its\n    // own: the group is what has to have a choice made in it.\n    const required = state.isRequired && !inGroup;\n    const marked = state.isSelected || state.isIndeterminate;\n    const interactive = !state.isDisabled && !state.isReadOnly;\n    const tone: Tone = state.isInvalid ? 'error' : marked ? 'marked' : 'unmarked';\n    const active = state.isHovered || state.isPressed || state.isFocusVisible;\n    return <>\n        <span {...interactive ? ripple.handlers : {}} {...stylex.props(controlStyles.disc, styles.control, state.isReadOnly && controlStyles.controlReadOnly, state.isDisabled && controlStyles.controlDisabled, interactive && state.isHovered && hoverLayers[tone], interactive && state.isFocusVisible && focusLayers[tone], interactive && state.isPressed && pressedLayers[tone], state.isFocusVisible && focus.ringVisible)}>\n          <span {...stylex.props(styles.box, marked && styles.boxMarked, !marked && state.isInvalid && styles.boxUnmarkedError, !marked && !state.isInvalid && interactive && active && styles.boxUnmarkedActive, marked && state.isInvalid && styles.boxMarkedError, state.isDisabled && (marked ? styles.boxMarkedDisabled : styles.boxUnmarkedDisabled))}>\n            {state.isIndeterminate ? <IndeterminateGlyph className=\"xmix8c7 x1lliihq x2lah0s x1xp8n7a\" /> : state.isSelected ? <CheckGlyph className=\"xmix8c7 x1lliihq x2lah0s x1xp8n7a\" /> : null}\n          </span>\n          {interactive ? ripple.surface : null}\n        </span>\n        <ControlLabel isRequired={required} state={state}>\n          {children}\n        </ControlLabel>\n      </>;\n  };\n}\n\n/**\n * A checkbox with its label, and optionally a description or an error under\n * it. Its state is React Aria's: pass `isSelected` with `onChange` to\n * control it, or `defaultSelected` to let it keep its own; `isIndeterminate`\n * draws the dash for a box that stands for a partly selected set. Inside a\n * `CheckboxGroup` it takes its `value` and the group's selection instead.\n *\n * `isRequired` ends the label in the asterisk every required field's label\n * ends in. Inside a `CheckboxGroup` the group's label carries it instead,\n * since the group is what must have a choice made in it.\n *\n * The call site's `className` and `style` land on the field as a whole,\n * which is the element a layout positions.\n */\nfunction Checkbox({\n  children,\n  description,\n  error,\n  ...props\n}: CheckboxProps & RefAttributes<HTMLDivElement>) {\n  const ripple = useRipple<HTMLSpanElement>();\n  const validationBehavior = useFieldValidationBehavior();\n\n  // Whether a message can ever reach this checkbox, which is what a form\n  // keeps an empty line under a field for. One in a group cannot — the\n  // group owns the one message and keeps its own line for it — and one on\n  // its own can only where something can find it wanting: a requirement, a\n  // check of its own, or a name a form's errors can be keyed by. Without\n  // this every checkbox in a form sat a line taller than it draws, and a\n  // group of them in a form gained a line after every item.\n  const inGroup = useContext(CheckboxGroupStateContext) !== null;\n  const reachable = !inGroup && (props.isRequired === true || props.validate !== undefined || props.name !== undefined);\n  return <CheckboxField isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(controlStyles.field), props)}>\n      {fieldContent(<CheckboxButton className=\"xjp7ctv\">\n          {buttonContent(children, ripple, inGroup)}\n        </CheckboxButton>, description, error, reachable)}\n    </CheckboxField>;\n}\n\n// The button and the line under it, from the field's render state: the\n// description fades with a disabled checkbox, by itself or by its group, as\n// its label does. Built by a call for the same reason as `buttonContent`.\nfunction fieldContent(button: ReactNode, description: string | undefined, error: string | undefined, reserve: boolean) {\n  return ({\n    isDisabled\n  }: CheckboxFieldRenderProps) => <>\n      {button}\n      <div {...stylex.props(controlStyles.messages)}>\n        <FieldMessage description={description} error={error} indent inset={false} isDisabled={isDisabled} reserve={reserve} />\n      </div>\n    </>;\n}\nexport type { CheckboxProps };\nexport default Checkbox;"],"mappings":"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"}

package/dist/components/dialog/index.js

@@ -6,7 +6,6 @@ import { overlay } from "../../styles/overlay.js";
 import { useHoldBottomEdge } from "../../hooks/useBottomEdge.js";
 import { useScrollStop } from "../../hooks/useScrollStop.js";
 import { OverlayScope } from "../../overlay/index.js";
-import { InsideModalContext } from "../../overlay/modal.js";
 import { c } from "react/compiler-runtime";
 import { createContext, useContext, useId, useLayoutEffect, useRef, useState, useSyncExternalStore } from "react";
 import { jsx } from "react/jsx-runtime";
@@ -101,11 +100,11 @@ function Dialog$1(t0) {
 }
 function DialogBody(t0) {
 	const $ = c(8);
-	const { ref: callerRef, ...props$2 } = t0;
+	const { ref: callerRef, ...props$1 } = t0;
 	const isBasic = useContext(BasicContext);
 	const describe = useContext(DescriptionContext);
 	const generated = useId();
-	const id = props$2.id ?? (describe === null ? void 0 : generated);
+	const id = props$1.id ?? (describe === null ? void 0 : generated);
 	useLayoutEffect(() => {
 		if (describe === null || id === void 0) return;
 		describe(id);
@@ -116,7 +115,7 @@ function DialogBody(t0) {
 	const ref = useRef(null);
 	const title = useSlottedContext(HeadingContext, "title");
 	const scrollStop = useScrollStop(ref, {
-		label: props$2["aria-label"],
+		label: props$1["aria-label"],
 		title: title?.id
 	});
 	const t1 = callerRef ?? void 0;
@@ -127,19 +126,19 @@ function DialogBody(t0) {
 		$[1] = t2;
 	} else t2 = $[1];
 	const merged = t2;
-	const t3 = mergeStyles(props(styles.body, isBasic && basic.body, overlay.modalBodyRing), props$2);
+	const t3 = mergeStyles(props(styles.body, isBasic && basic.body, overlay.modalBodyRing), props$1);
 	let t4;
-	if ($[2] !== id || $[3] !== merged || $[4] !== props$2 || $[5] !== scrollStop || $[6] !== t3) {
+	if ($[2] !== id || $[3] !== merged || $[4] !== props$1 || $[5] !== scrollStop || $[6] !== t3) {
 		t4 = /* @__PURE__ */ jsx("div", {
 			...scrollStop,
 			id,
-			...props$2,
+			...props$1,
 			ref: merged,
 			...t3
 		});
 		$[2] = id;
 		$[3] = merged;
-		$[4] = props$2;
+		$[4] = props$1;
 		$[5] = scrollStop;
 		$[6] = t3;
 		$[7] = t4;
@@ -177,7 +176,7 @@ function DialogBody(t0) {
 * over it, and React Aria's popovers and menus draw above both.
 */
 function DialogContent(t0) {
-	const $ = c(43);
+	const $ = c(42);
 	let children;
 	let className;
 	let container;
@@ -185,12 +184,12 @@ function DialogContent(t0) {
 	let isKeyboardDismissDisabled;
 	let isOpen;
 	let onOpenChange;
-	let props$1;
+	let props$2;
 	let ref;
 	let style;
 	let t1;
 	if ($[0] !== t0) {
-		({children, className, container, defaultOpen, isDismissable: t1, isKeyboardDismissDisabled, isOpen, onOpenChange, ref, style, ...props$1} = t0);
+		({children, className, container, defaultOpen, isDismissable: t1, isKeyboardDismissDisabled, isOpen, onOpenChange, ref, style, ...props$2} = t0);
 		$[0] = t0;
 		$[1] = children;
 		$[2] = className;
@@ -199,7 +198,7 @@ function DialogContent(t0) {
 		$[5] = isKeyboardDismissDisabled;
 		$[6] = isOpen;
 		$[7] = onOpenChange;
-		$[8] = props$1;
+		$[8] = props$2;
 		$[9] = ref;
 		$[10] = style;
 		$[11] = t1;
@@ -211,25 +210,23 @@ function DialogContent(t0) {
 		isKeyboardDismissDisabled = $[5];
 		isOpen = $[6];
 		onOpenChange = $[7];
-		props$1 = $[8];
+		props$2 = $[8];
 		ref = $[9];
 		style = $[10];
 		t1 = $[11];
 	}
 	const isDismissable = t1 === void 0 ? true : t1;
-	const isBasic = props$1.role === "alertdialog";
+	const isBasic = props$2.role === "alertdialog";
 	const [body, setBody] = useState();
-	const overModal = useContext(InsideModalContext);
 	const t2 = isBasic ? setBody : null;
 	let t3;
-	if ($[12] !== isBasic || $[13] !== overModal) {
-		t3 = props(overlay.scrim, overModal && overlay.scrimOverModal, styles.centre, isBasic && basic.centre);
+	if ($[12] !== isBasic) {
+		t3 = props(overlay.scrim, styles.centre, isBasic && basic.centre);
 		$[12] = isBasic;
-		$[13] = overModal;
-		$[14] = t3;
-	} else t3 = $[14];
+		$[13] = t3;
+	} else t3 = $[13];
 	let t4;
-	if ($[15] !== className || $[16] !== isBasic || $[17] !== style) {
+	if ($[14] !== className || $[15] !== isBasic || $[16] !== style) {
 		t4 = mergeStatefulStyles({
 			0: { className: "x1n1nwrg x1u6grsq xbhiib0 x1ebxanj x16dv9tl xvkjz1l xt7dq6l x1ju3lih x1w1tqly x19pkqky x1f120ba xx61lck x1gb867b x13rsnn2 x1udv5rz x9f619 x139gbkf x78zum5 xdt5ytf xh8yej3 xmz0i5r x27kpxv x6iovhr x1u2d2a2 xxzqys8 xb3r6kr x9xqwrn xg8iv3o x19b5e0v xsds98l" },
 			1: { className: "x1n1nwrg x1u6grsq x16dv9tl xvkjz1l x1w1tqly x13rsnn2 x1udv5rz x9f619 x139gbkf x78zum5 xdt5ytf xh8yej3 xmz0i5r xb3r6kr xbhiib0 xt7dq6l x19pkqky xx61lck x27kpxv x1u2d2a2" }
@@ -237,47 +234,44 @@ function DialogContent(t0) {
 			className,
 			style
 		});
-		$[15] = className;
-		$[16] = isBasic;
-		$[17] = style;
-		$[18] = t4;
-	} else t4 = $[18];
-	const t5 = props$1["aria-describedby"] ?? (isBasic ? body : void 0);
+		$[14] = className;
+		$[15] = isBasic;
+		$[16] = style;
+		$[17] = t4;
+	} else t4 = $[17];
+	const t5 = props$2["aria-describedby"] ?? (isBasic ? body : void 0);
 	let t6;
-	if ($[19] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
 		t6 = props(overlay.modalDialog);
-		$[19] = t6;
-	} else t6 = $[19];
+		$[18] = t6;
+	} else t6 = $[18];
 	let t7;
-	if ($[20] !== children || $[21] !== props$1 || $[22] !== t5) {
-		t7 = /* @__PURE__ */ jsx(InsideModalContext, {
-			value: true,
-			children: /* @__PURE__ */ jsx(Dialog, {
-				...props$1,
-				"aria-describedby": t5,
-				...t6,
-				children
-			})
+	if ($[19] !== children || $[20] !== props$2 || $[21] !== t5) {
+		t7 = /* @__PURE__ */ jsx(Dialog, {
+			...props$2,
+			"aria-describedby": t5,
+			...t6,
+			children
 		});
-		$[20] = children;
-		$[21] = props$1;
-		$[22] = t5;
-		$[23] = t7;
-	} else t7 = $[23];
+		$[19] = children;
+		$[20] = props$2;
+		$[21] = t5;
+		$[22] = t7;
+	} else t7 = $[22];
 	let t8;
-	if ($[24] !== ref || $[25] !== t4 || $[26] !== t7) {
+	if ($[23] !== ref || $[24] !== t4 || $[25] !== t7) {
 		t8 = /* @__PURE__ */ jsx(Modal, {
 			ref,
 			...t4,
 			children: t7
 		});
-		$[24] = ref;
-		$[25] = t4;
-		$[26] = t7;
-		$[27] = t8;
-	} else t8 = $[27];
+		$[23] = ref;
+		$[24] = t4;
+		$[25] = t7;
+		$[26] = t8;
+	} else t8 = $[26];
 	let t9;
-	if ($[28] !== container || $[29] !== defaultOpen || $[30] !== isDismissable || $[31] !== isKeyboardDismissDisabled || $[32] !== isOpen || $[33] !== onOpenChange || $[34] !== t3 || $[35] !== t8) {
+	if ($[27] !== container || $[28] !== defaultOpen || $[29] !== isDismissable || $[30] !== isKeyboardDismissDisabled || $[31] !== isOpen || $[32] !== onOpenChange || $[33] !== t3 || $[34] !== t8) {
 		t9 = /* @__PURE__ */ jsx(OverlayScope, { children: /* @__PURE__ */ jsx(ModalOverlay, {
 			defaultOpen,
 			isDismissable,
@@ -288,36 +282,36 @@ function DialogContent(t0) {
 			...t3,
 			children: t8
 		}) });
-		$[28] = container;
-		$[29] = defaultOpen;
-		$[30] = isDismissable;
-		$[31] = isKeyboardDismissDisabled;
-		$[32] = isOpen;
-		$[33] = onOpenChange;
-		$[34] = t3;
-		$[35] = t8;
-		$[36] = t9;
-	} else t9 = $[36];
+		$[27] = container;
+		$[28] = defaultOpen;
+		$[29] = isDismissable;
+		$[30] = isKeyboardDismissDisabled;
+		$[31] = isOpen;
+		$[32] = onOpenChange;
+		$[33] = t3;
+		$[34] = t8;
+		$[35] = t9;
+	} else t9 = $[35];
 	let t10;
-	if ($[37] !== t2 || $[38] !== t9) {
+	if ($[36] !== t2 || $[37] !== t9) {
 		t10 = /* @__PURE__ */ jsx(DescriptionContext, {
 			value: t2,
 			children: t9
 		});
-		$[37] = t2;
-		$[38] = t9;
-		$[39] = t10;
-	} else t10 = $[39];
+		$[36] = t2;
+		$[37] = t9;
+		$[38] = t10;
+	} else t10 = $[38];
 	let t11;
-	if ($[40] !== isBasic || $[41] !== t10) {
+	if ($[39] !== isBasic || $[40] !== t10) {
 		t11 = /* @__PURE__ */ jsx(BasicContext, {
 			value: isBasic,
 			children: t10
 		});
-		$[40] = isBasic;
-		$[41] = t10;
-		$[42] = t11;
-	} else t11 = $[42];
+		$[39] = isBasic;
+		$[40] = t10;
+		$[41] = t11;
+	} else t11 = $[41];
 	return t11;
 }
 /**