@kanso-labs/kanso-ui 0.44.1 → 0.45.0

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","HTMLAttributes","ReactNode","RefAttributes","ClassNameOrFunction","DialogProps","DialogTriggerProps","HeadingProps","ModalOverlayProps","ModalRenderProps","StyleOrFunction","stylex","useMemo","useRef","Dialog","DialogTrigger","Heading","HeadingContext","Modal","ModalOverlay","useSlottedContext","useHoldBottomEdge","useScrollStop","OverlayScope","mergeRefs","mergeStatefulStyles","mergeStyles","overlay","colors","media","motion","radii","shadows","spacing","typography","FORCED_COLORS","slideInFromEnd","slideInFromStart","slideInFromBottom","styles","body","kB7OPa","k1xSpc","kXwgrk","kzQI83","kOIVth","kHjlTd","kORKVm","k8WAf4","kg3NbH","$$css","SheetProps","Omit","children","Sheet","t0","$","props","t1","SheetBody","ref","callerRef","title","scrollStop","label","id","undefined","t2","merged","t3","modalBodyRing","t4","SheetContent","className","container","defaultOpen","isKeyboardDismissDisabled","isOpen","onOpenChange","style","isDismissable","Symbol","for","scrim","modalDialog","t5","t6","t7","SheetFooter","SheetHandle","SheetHeader","SheetTitle","Body","Content","Footer","Handle","Header","Title","SheetContentProps","Pick","Element","SheetTitleProps","_c","props","stylex.props"],"sources":["../../../src/components/sheet/index.tsx"],"sourcesContent":["'use client';\n\nimport type { HTMLAttributes, ReactNode, RefAttributes } from 'react';\nimport type { ClassNameOrFunction, DialogProps, DialogTriggerProps, HeadingProps, ModalOverlayProps, ModalRenderProps, StyleOrFunction } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { useMemo, useRef } from 'react';\nimport { Dialog, DialogTrigger, Heading, HeadingContext, Modal, ModalOverlay, useSlottedContext } from 'react-aria-components';\nimport { useHoldBottomEdge } from '../../hooks/useBottomEdge';\nimport { useScrollStop } from '../../hooks/useScrollStop';\nimport { OverlayScope } from '../../overlay';\nimport { mergeRefs } from '../../render/ref';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport { overlay } from '../../styles/overlay';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, media, motion, radii, shadows, spacing, typography } from '../../tokens/design.tokens.stylex';\n\n// Windows High Contrast and the rest of the forced-colours modes. Spelled\n// here rather than imported, for the reason src/field/styles.ts records: the\n// StyleX compiler resolves a constant across files only out of a `.stylex.ts`\n// module, and the generated one holds design tokens rather than queries.\nconst FORCED_COLORS = '@media (forced-colors: active)';\n\n// One component, two presentations. Above the medium breakpoint it is a side\n// sheet pinned to the inline end of the viewport; below it, the same panel\n// becomes a bottom sheet. That is the pairing the Material Design pages draw\n// rather than two components: a sheet that stayed on the right at 375px would\n// be a drawer covering the whole screen.\n//\n// The two differ in five things and no more: which edges they are pinned to,\n// which two corners are rounded, which axis they arrive along, how much of\n// the viewport they may take, and the drag handle, which is the bottom\n// sheets page's element alone. Everything inside the panel — the 24 of start\n// and end padding, the 12 between the header's elements, the actions area —\n// comes from the side sheets page and is drawn the same in both.\n\n// The side sheet arrives along the inline axis, and it takes two keyframes to\n// do that rather than one. Which edge the panel rests against is logical —\n// `insetInlineEnd` puts it on the right under a left-to-right document and on\n// the left under a right-to-left one — but `translateX` is physical and flips\n// with nothing. One keyframe would therefore have the panel arrive from the\n// far side of where it comes to rest under one of the two.\nconst slideInFromEnd = \"x17cjob-B\";\nconst slideInFromStart = \"x18x3npg-B\";\nconst slideInFromBottom = \"x15b941j-B\";\n\n// Entry only, so there is no exit animation to wait for and closing is\n// immediate: React Aria keeps a closing panel mounted only while an animation\n// is running on it, and finds none. See the comment on `SheetContent` for why\n// that is a design call rather than a limit of StyleX.\n//\n// React Aria's overlay is three nested elements — the scrim, the panel, and\n// the dialog inside it — so the styles are split the same way: the overlay\n// module's scrim on the first, `content` on the panel, its modal dialog style\n// on the element that carries the role. The scrim and that dialog style are\n// shared with every modal overlay; the panel is the sheet's own, since which\n// edge it is pinned to is what makes it a sheet.\nconst styles = {\n  body: {\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kXwgrk: \"xdt5ytf\",\n    kzQI83: \"x1iyjqo2\",\n    kOIVth: \"xxj4525\",\n    kHjlTd: \"xj0a0fe\",\n    kORKVm: \"x1odjw0f\",\n    k8WAf4: \"xp6hjv6\",\n    kg3NbH: \"xg0ps1x\",\n    $$css: true\n  }\n};\ntype SheetProps = Omit<DialogTriggerProps, 'children'> & {\n  children?: ReactNode;\n};\n\n/**\n * A modal panel that arrives from the edge of the screen — a side sheet on a\n * wide viewport, a bottom sheet on a narrow one. Open state is React Aria's:\n * pass `isOpen` with `onOpenChange` to control it, or `defaultOpen` to let it\n * keep its own.\n *\n * Composed rather than configured by props, because a sheet's header, body,\n * and footer all take arbitrary content — the parts are `Sheet.Content`,\n * `Sheet.Header`, `Sheet.Title`, `Sheet.Body`, and `Sheet.Footer`. A\n * `Button` or `IconButton` placed directly inside `Sheet` opens it, and one\n * given `slot=\"close\"` anywhere inside the content closes it; neither needs\n * a part of its own.\n *\n * `Sheet` is the trigger's half, so a sheet nothing on the page opens — one\n * a route shows, or a menu item raises — leaves it out and passes `isOpen`\n * and `onOpenChange` to `Sheet.Content` instead. Wrapped in `Sheet` with no\n * button inside it, React Aria warns that its press responder found nothing\n * to press.\n */\nfunction Sheet({\n  children,\n  ...props\n}: SheetProps) {\n  return <DialogTrigger {...props}>{children}</DialogTrigger>;\n}\nfunction SheetBody({\n  ref: callerRef,\n  ...props\n}: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>) {\n  const ref = useRef<HTMLDivElement>(null);\n  // A body its content runs past is a tab stop named by the title, so a\n  // keyboard can scroll it, when nothing inside it takes focus; a call\n  // site's own name, role and tabIndex still win. See useScrollStop.\n  const title = useSlottedContext(HeadingContext, 'title');\n  const scrollStop = useScrollStop(ref, {\n    label: props['aria-label'],\n    title: title?.id\n  });\n  // The body measures itself through its own ref, and the call site's lands\n  // on the same element.\n  const merged = useMemo(() => mergeRefs(ref, callerRef ?? undefined), [callerRef]);\n  return <div {...scrollStop} {...props} ref={merged} {...mergeStyles(stylex.props(styles.body, overlay.modalBodyRing), props)} />;\n}\n\n/**\n * The panel itself, and the scrim behind it. Everything the sheet shows goes\n * in here; the trigger stays outside it, since the trigger lives in the page\n * while this is portalled out to the end of the body.\n *\n * A press on the scrim closes the sheet unless `isDismissable` says\n * otherwise — React Aria's own default is the reverse, and a sheet that\n * ignores a tap outside it reads as stuck.\n *\n * Inside `Sheet`, the open state is the trigger's. On its own, with no\n * trigger, it is this part's: `isOpen` with `onOpenChange` controls it, and\n * a `slot=\"close\"` button, Escape and the scrim all report through\n * `onOpenChange`, as they would to `Sheet`.\n *\n * The scrim draws at `z-index: 900`, over any page content layered below\n * that, such as a sticky header, and the panel draws inside it. A\n * `Snackbar` draws at 1000, so a toast raised from inside the sheet is read\n * over it, and React Aria's popovers and menus draw above both.\n */\nfunction SheetContent({\n  children,\n  className,\n  container,\n  defaultOpen,\n  isDismissable = true,\n  isKeyboardDismissDisabled,\n  isOpen,\n  onOpenChange,\n  ref,\n  style,\n  ...props\n}: RefAttributes<HTMLDivElement> & SheetContentProps) {\n  return <OverlayScope>\n      <ModalOverlay defaultOpen={defaultOpen} isDismissable={isDismissable} isKeyboardDismissDisabled={isKeyboardDismissDisabled} isOpen={isOpen} onOpenChange={onOpenChange}\n    // oxlint-disable-next-line typescript/no-deprecated -- its replacement, UNSAFE_PortalProvider, is not exported by react-aria-components\n    UNSTABLE_portalContainer={container} {...stylex.props(overlay.scrim)}>\n        <Modal\n      // The panel, where the call site's class and style land, rather than\n      // the dialog inside it, which takes the rest of the props.\n      ref={ref} {...mergeStatefulStyles({\n        className: \"x1n1nwrg x1u6grsq x1ioi8j8 xu2fq7p x18ihq2d x16dv9tl x1vnz5z6 x19dwuzr xuz63mn x1lym3mf xkducg2 xrzall9 xb0nsol xjslfuv x1gbqego x1cfajip xjg5lhu x1a37zkv xys6ro8 x6xk272 x9t1vth x19efjv6 x9f619 x139gbkf x78zum5 xdt5ytf x1l2rt3b xwvxfow x1ey2m1c x13vifvy xmpip4z xtijo5x xhi6v0a x1upgybz x7ab17h x11ijow0 xb3r6kr x1a148e8 x1mrd0q x5ubeis x1lodr2j x1uhho1l x19b5e0v xg4bq00 xg4jtgg xsds98l xixxii4\"\n      }, {\n        className,\n        style\n      })}>\n          <Dialog {...props} {...stylex.props(overlay.modalDialog)}>\n            {children}\n          </Dialog>\n        </Modal>\n      </ModalOverlay>\n    </OverlayScope>;\n}\n\n/**\n * The sheet's actions. The panel is pinned to the window's bottom edge in\n * both presentations, so they sit on that edge, and a toast rises clear of\n * them while the sheet is open rather than lying over its buttons. A side\n * sheet's are included: the toast is centred in the window, and on any\n * window narrower than about 1376px its 576 reach into the sheet's 400.\n */\nfunction SheetFooter({\n  ref: callerRef,\n  ...props\n}: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>) {\n  const ref = useRef<HTMLDivElement>(null);\n  useHoldBottomEdge(ref, true);\n  // The footer measures itself through its own ref, and the call site's\n  // lands on the same element.\n  const merged = useMemo(() => mergeRefs(ref, callerRef ?? undefined), [callerRef]);\n  return <div {...props} ref={merged} {...mergeStyles({\n    className: \"x12smttz x13fuv20 x178xt8z x9f619 x78zum5 x2lah0s x1a02dak x126z3so x1nhvcw1 x1qafhyn x8i8c5o x1clyivc xg0ps1x\"\n  }, props)} />;\n}\n\n/**\n * The bottom sheets page's drag handle: a short bar above the sheet's\n * content, saying the panel is a bottom sheet. Place it first inside\n * `Sheet.Content`; above the medium breakpoint the panel is a side sheet and\n * this draws nothing.\n *\n * It is decoration rather than a control, and hidden from assistive\n * technology. Material's own handle drags a sheet between a collapsed and an\n * expanded height and dismisses it from the collapsed one; this panel has\n * one height and cannot be dragged, so a control that only looked draggable\n * would promise what it cannot do. Closing is already the scrim, Escape, and\n * any button given `slot=\"close\"`.\n */\nfunction SheetHandle(props: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>) {\n  return <div aria-hidden=\"true\" {...props} {...mergeStyles({\n    className: \"x6s0dn4 x9f619 x1s85apg x37i4ze x2lah0s xl56j7k x1xg6qyv\"\n  }, props)}>\n      <span className=\"x1ccu2yh xwvh9j7 xqu0tyb x1dkaolv x9f619 x1g12otp x1td3qas\" />\n    </div>;\n}\nfunction SheetHeader(props: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>) {\n  return <div {...props} {...mergeStyles({\n    className: \"x6s0dn4 x1j6faob x1q0q8m5 xso031l x9f619 x78zum5 x2lah0s x1gka490 x1qughib x1cmllll xg0ps1x\"\n  }, props)} />;\n}\n\n/**\n * Names the sheet. Rendered through React Aria's title slot, which is what\n * points the dialog's `aria-labelledby` at it — a sheet without one announces\n * itself as an unnamed dialog.\n */\nfunction SheetTitle(props: RefAttributes<HTMLHeadingElement> & SheetTitleProps) {\n  return <Heading slot=\"title\" {...props} {...mergeStyles({\n    className: \"x9f619 x1w5n3ug xdy5w5q xete2z3 x14ijtet xug9e1u x2divse x1ghz6dp xeuugli xj0a0fe\"\n  }, props)} />;\n}\nSheet.Body = SheetBody;\nSheet.Content = SheetContent;\nSheet.Footer = SheetFooter;\nSheet.Handle = SheetHandle;\nSheet.Header = SheetHeader;\nSheet.Title = SheetTitle;\n\n// The dialog's own props, plus the scrim's open state and dismissal settings\n// and the panel's styling. A call site has no reason to know there are three\n// elements: `className` and `style` reach the panel, which is the one worth\n// restyling and positioning, the open state and the dismissal settings reach\n// the scrim, and everything else lands on the dialog.\n//\n// `isDismissable` is declared here rather than picked with its siblings,\n// since the picked one carries React Aria's documentation, whose default is\n// the reverse of this component's.\ntype SheetContentProps = Omit<DialogProps, 'className' | 'style'> & Pick<ModalOverlayProps, 'defaultOpen' | 'isKeyboardDismissDisabled' | 'isOpen' | 'onOpenChange'> & {\n  /** A function may compute the class from the panel's render state. */\n  className?: ClassNameOrFunction<ModalRenderProps>;\n  /**\n   * Where to portal the panel and scrim. Defaults to the container of the\n   * `ThemeScope` around it, which keeps the sheet on that scope's tokens, or\n   * to the end of `<body>` where there is none. A subtree themed through the\n   * `themeScope` class has no container of its own, so point this inside it,\n   * or the sheet renders outside and keeps the page's tokens.\n   */\n  container?: Element;\n  /**\n   * Whether a press on the scrim, outside the panel, closes the sheet.\n   * `true` here where React Aria's own default is `false`, since a sheet\n   * that ignores a tap outside it reads as stuck. Escape is\n   * `isKeyboardDismissDisabled`'s, and this says nothing about it.\n   * @default true\n   */\n  isDismissable?: boolean;\n  /** A function may compute the style from the panel's render state. */\n  style?: StyleOrFunction<ModalRenderProps>;\n};\ntype SheetTitleProps = HeadingProps;\nexport type { SheetContentProps, SheetProps, SheetTitleProps };\nexport { SheetBody, SheetContent, SheetFooter, SheetHandle, SheetHeader, SheetTitle };\nexport default Sheet;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["c","_c","HTMLAttributes","KeyboardEvent","ReactNode","RefAttributes","RefObject","ClassNameOrFunction","DialogProps","DialogTriggerProps","HeadingProps","ModalOverlayProps","PressEvent","SheetRenderProps","StyleOrFunction","OverlayTriggerState","stylex","createContext","useContext","useLayoutEffect","useMemo","useRef","useSyncExternalStore","Heading","HeadingContext","OverlayTriggerStateContext","Button","RACButton","Sheet","RACSheet","SheetContent","RACSheetContent","SheetBackdrop","SheetOverlay","SheetTrigger","useSlottedContext","useHoldBottomEdge","useScrollStop","useMessages","OverlayScope","mergeRefs","layers","mergeStatefulStyles","mergeStyles","overlay","colors","media","radii","shadows","spacing","typography","FORCED_COLORS","scrimIn","BOTTOM_SHEET","REDUCED_MOTION","TO_THE_FIRST_SNAP_POINT","end","styles","body","kB7OPa","k1xSpc","kXwgrk","kzQI83","kOIVth","kAzted","kHjlTd","kORKVm","k8WAf4","kg3NbH","$$css","bodyHeld","isBottomSheet","window","matchMedia","matches","isReducedMotion","moveToNextSnapPoint","target","scroller","closest","HTMLElement","origin","getBoundingClientRect","top","scrollTop","stops","querySelectorAll","map","marker","Number","parseFloat","getComputedStyle","scrollMarginTop","length","distances","stop","Math","abs","at","indexOf","min","scrollTo","behavior","onServer","panelStyles","position","className","subscribeTo","query","listener","list","addEventListener","removeEventListener","subscribeToBottomSheet","subscribeToReducedMotion","SnapState","SnapContext","escapeKeyOn","escape","state","render","NonNullable","props","renderProps","next","onKeyDown","event","key","nativeEvent","isComposing","Node","currentTarget","contains","stopPropagation","preventDefault","close","undefined","t0","$","children","t1","SheetBody","ref","callerRef","snap","title","scrollStop","label","id","t2","merged","t3","modalBodyRing","t4","container","defaultOpen","isOpen","onOpenChange","snapPoints","style","isDismissable","isKeyboardDismissDisabled","isBottom","isReduced","heights","overlayRef","useRestOnTurn","t5","t6","Symbol","for","backdrop","t7","t8","t9","t10","isExpanded","t11","SheetDialog","modalDialog","SheetFooter","SheetHandle","messages","bar","dragHandle","SheetHeader","SheetTitle","previous","current","layer","querySelector","edge","dataset","scrollHeight","left","scrollWidth","Body","Content","Footer","Handle","Header","Title","SheetContentProps","Omit","Pick","Element","Array","SheetProps","SheetTitleProps","Sheet","_c","props","stylex.props","SheetContent","RACSheet","RACSheetContent","RACButton"],"sources":["../../../src/components/sheet/index.tsx"],"sourcesContent":["'use client';\n\nimport type { HTMLAttributes, KeyboardEvent, ReactNode, RefAttributes, RefObject } from 'react';\nimport type { ClassNameOrFunction, DialogProps, DialogTriggerProps, HeadingProps, ModalOverlayProps, PressEvent, SheetRenderProps, StyleOrFunction } from 'react-aria-components';\nimport type { OverlayTriggerState } from 'react-stately';\nimport * as stylex from '@stylexjs/stylex';\nimport { createContext, useContext, useLayoutEffect, useMemo, useRef, useSyncExternalStore } from 'react';\nimport { Heading, HeadingContext, OverlayTriggerStateContext, Button as RACButton, Sheet as RACSheet, SheetContent as RACSheetContent, SheetBackdrop, SheetOverlay, SheetTrigger, useSlottedContext } from 'react-aria-components';\nimport { useHoldBottomEdge } from '../../hooks/useBottomEdge';\nimport { useScrollStop } from '../../hooks/useScrollStop';\nimport { useMessages } from '../../i18n';\nimport { OverlayScope } from '../../overlay';\nimport { mergeRefs } from '../../render/ref';\nimport '../../styles/layers.stylex';\nimport { layers } from '../../styles/layers.stylex';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport { overlay } from '../../styles/overlay';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, media, radii, shadows, spacing, typography } from '../../tokens/design.tokens.stylex';\n\n// Windows High Contrast and the rest of the forced-colours modes. Spelled\n// here rather than imported, for the reason src/field/styles.ts records: the\n// StyleX compiler resolves a constant across files only out of a `.stylex.ts`\n// module, and the generated one holds design tokens rather than queries.\nconst FORCED_COLORS = '@media (forced-colors: active)';\n\n// One component, two presentations. Above the medium breakpoint it is a side\n// sheet pinned to the inline end of the viewport; below it, the same panel\n// becomes a bottom sheet. That is the pairing the Material Design pages draw\n// rather than two components: a sheet that stayed on the right at 375px would\n// be a drawer covering the whole screen.\n//\n// The two differ in five things and no more: which edge they rest on, which\n// two corners are rounded, which axis they arrive and leave along, how much\n// of the viewport they may take, and the drag handle, which is the bottom\n// sheets page's element alone. Everything inside the panel — the 24 of start\n// and end padding, the 12 between the header's elements, the actions area —\n// comes from the side sheets page and is drawn the same in both.\n//\n// **It is React Aria's `Sheet`.** The panel sits on a scroller a viewport\n// longer than the window along the axis it arrives on, and the browser's own\n// scrolling moves it: a swipe toward the edge it rests on scrolls it out of\n// view, which closes it, as the bottom sheets page's swipe down and the side\n// sheets page's slide off the edge do. Which edge is a prop rather than a\n// style, so the breakpoint is read here in JavaScript, as Dialog's full screen\n// is, and the styles below are keyed on the edge React Aria reports rather\n// than on the media query. `end` is the right, or the left in a right-to-left\n// locale: React Aria reads the locale's direction, not the document's, so a\n// right-to-left page sets it through `I18nProvider`, as it does for anything\n// drawn in a popover.\n//\n// **It moves at the browser's pace.** Entry and exit are a smooth scroll, so\n// they take the browser's own duration and easing rather than the\n// side sheets page's medium 1 and emphasized decelerate: a scroll position is\n// what a swipe moves, and timing it in CSS would leave the panel somewhere\n// the scroller is not. Under reduced motion React Aria scrolls without\n// smoothing, so the panel arrives and leaves in place. The scrim follows the\n// scroll through the backdrop's swipe animation, darkening as the panel comes\n// in and lifting as a swipe takes it out, and keeps the shared fade under\n// reduced motion — see `backdrop` in src/styles/overlay.ts.\nconst scrimIn = \"x18re5ia-B\";\n\n// The window sizes the panel is drawn at as a bottom sheet: the medium\n// breakpoint, as `media.belowMedium` spells it for the handle below.\nconst BOTTOM_SHEET = '(width < 600px)';\nconst REDUCED_MOTION = '(prefers-reduced-motion: reduce)';\n\n// The scrim's range along a sheet with snap points: from closed to the first\n// of them, as React Aria counts its swipe animation's range in snap points.\nconst TO_THE_FIRST_SNAP_POINT = {\n  end: 0\n};\n\n// React Aria's overlay is a layer holding the scrim and a scroller, the\n// scroller holds the panel, and the panel holds the dialog. The styles are\n// split the same way: the layer and the scrim, `panel` and the edge's own\n// styles on the panel, and the overlay module's modal dialog style on the\n// element that carries the role.\nconst styles = {\n  body: {\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kXwgrk: \"xdt5ytf\",\n    kzQI83: \"x1iyjqo2\",\n    kOIVth: \"xxj4525\",\n    kAzted: \"x2lwn1j\",\n    kHjlTd: \"xj0a0fe\",\n    kORKVm: \"x1odjw0f\",\n    k8WAf4: \"xp6hjv6\",\n    kg3NbH: \"xg0ps1x\",\n    $$css: true\n  },\n  bodyHeld: {\n    kORKVm: \"x1s73dr8\",\n    $$css: true\n  }\n};\n\n// Whether the window is at the size the bottom sheet is drawn at, and whether\n// its reader asked for less motion, each kept current. False on the server,\n// where there is no window and nothing is open.\nfunction isBottomSheet() {\n  return window.matchMedia(BOTTOM_SHEET).matches;\n}\nfunction isReducedMotion() {\n  return window.matchMedia(REDUCED_MOTION).matches;\n}\n\n/**\n * Moves the sheet whose handle was pressed to its next snap point, or from\n * the last back to the first. React Aria offers no call that moves a sheet,\n * so this scrolls its scroller as React Aria does to open the sheet at the\n * first: React Aria places a marker in the panel for each snap point, and a\n * scroll that rests a marker one viewport below the scroller's top leaves\n * that snap point showing. The markers are `[data-sheet-detent]`, in the\n * order the snap points were given, and they are React Aria's markup rather\n * than its API — a release that renames them leaves the handle pressing\n * nothing, which the handle's tests are there to say.\n *\n * Which snap point the sheet is at is the marker whose resting scroll lies\n * nearest the scroller's own, so a press after a swipe moves on from where\n * the swipe left the sheet.\n */\nfunction moveToNextSnapPoint({\n  target\n}: PressEvent) {\n  const scroller = target.closest('[data-sheet-scroll]');\n  if (!(scroller instanceof HTMLElement)) {\n    return;\n  }\n  // Where the scroller's content starts, in the window's coordinates.\n  const origin = scroller.getBoundingClientRect().top - scroller.scrollTop;\n  const stops = [...scroller.querySelectorAll('[data-sheet-detent]')].map(marker => marker.getBoundingClientRect().top - origin - Number.parseFloat(getComputedStyle(marker).scrollMarginTop));\n  if (stops.length === 0) {\n    return;\n  }\n  const distances = stops.map(stop => Math.abs(stop - scroller.scrollTop));\n  const at = distances.indexOf(Math.min(...distances));\n  scroller.scrollTo({\n    behavior: isReducedMotion() ? 'auto' : 'smooth',\n    top: stops[(at + 1) % stops.length]\n  });\n}\nfunction onServer() {\n  return false;\n}\n\n// The panel's styles for the edge React Aria rests it on. `top` and `center`\n// are positions React Aria offers and this never asks for.\nfunction panelStyles({\n  position\n}: SheetRenderProps) {\n  return {\n    0: {\n      className: \"x1vnz5z6 x19efjv6 x9f619 x139gbkf x78zum5 xdt5ytf x7giv3 x5yr21d xrzall9 xjslfuv x1gbqego xjg5lhu x6xk272 x1l2rt3b x1a148e8 x1mrd0q\"\n    },\n    4: {\n      className: \"x1vnz5z6 x19efjv6 x9f619 x139gbkf x78zum5 xdt5ytf x7giv3 x19dwuzr x4z998w x1lym3mf x1u81hx7 x1uop38w xh8yej3 xv4ka1z x1a148e8 x196z7tn xg4jtgg\"\n    },\n    2: {\n      className: \"x1vnz5z6 x19efjv6 x9f619 x139gbkf x78zum5 xdt5ytf x7giv3 x5yr21d xrzall9 xjslfuv x1gbqego xjg5lhu x6xk272 x1l2rt3b x1a148e8 x1mrd0q x196z7tn\"\n    },\n    6: {\n      className: \"x1vnz5z6 x19efjv6 x9f619 x139gbkf x78zum5 xdt5ytf x7giv3 x19dwuzr x4z998w x1lym3mf x1u81hx7 x1uop38w xh8yej3 xv4ka1z x1a148e8 xg4jtgg x196z7tn\"\n    },\n    1: {\n      className: \"x1vnz5z6 x19efjv6 x9f619 x139gbkf x78zum5 xdt5ytf x7giv3 x5yr21d xrzall9 xjslfuv x1gbqego xjg5lhu x6xk272 x1l2rt3b x1a148e8 x1mrd0q xg4jtgg\"\n    },\n    5: {\n      className: \"x1vnz5z6 x19efjv6 x9f619 x139gbkf x78zum5 xdt5ytf x7giv3 x19dwuzr x4z998w x1lym3mf x1u81hx7 x1uop38w xh8yej3 xv4ka1z x1a148e8 x196z7tn xg4jtgg\"\n    },\n    3: {\n      className: \"x1vnz5z6 x19efjv6 x9f619 x139gbkf x78zum5 xdt5ytf x7giv3 x5yr21d xrzall9 xjslfuv x1gbqego xjg5lhu x6xk272 x1l2rt3b x1a148e8 x1mrd0q x196z7tn xg4jtgg\"\n    },\n    7: {\n      className: \"x1vnz5z6 x19efjv6 x9f619 x139gbkf x78zum5 xdt5ytf x7giv3 x19dwuzr x4z998w x1lym3mf x1u81hx7 x1uop38w xh8yej3 xv4ka1z x1a148e8 x196z7tn xg4jtgg\"\n    }\n  }[!!(position === 'bottom') << 2 | !!(position === 'left') << 1 | !!(position === 'right') << 0];\n}\nfunction subscribeTo(query: string) {\n  return (listener: () => void) => {\n    const list = window.matchMedia(query);\n    list.addEventListener('change', listener);\n    return () => {\n      list.removeEventListener('change', listener);\n    };\n  };\n}\nconst subscribeToBottomSheet = subscribeTo(BOTTOM_SHEET);\nconst subscribeToReducedMotion = subscribeTo(REDUCED_MOTION);\n\n// Where a bottom sheet with snap points rests: at its last, `expanded`, or\n// short of it, `collapsed`. Content sets it from React Aria's render state,\n// and the handle and the body read it. Null in a sheet without snap points,\n// whose handle is decoration and whose body always scrolls.\ntype SnapState = 'collapsed' | 'expanded' | null;\nconst SnapContext = createContext<SnapState>(null);\n\n/**\n * The dialog's element, given a key handler for Escape. React Aria's sheet\n * has one switch for every way out, so where this sheet's two settings\n * disagree about Escape the handler answers for it: `close` closes the sheet\n * React Aria is holding open, and `hold` keeps Escape from the overlay that\n * would close it. Either way the key goes no further, as it would not have\n * from React Aria's own handler.\n */\nfunction escapeKeyOn(escape: 'close' | 'hold', state: null | OverlayTriggerState, render: DialogProps['render']): NonNullable<DialogProps['render']> {\n  return (props, renderProps) => {\n    const next = {\n      ...props,\n      onKeyDown: (event: KeyboardEvent<HTMLElement>) => {\n        props.onKeyDown?.(event);\n        if (event.key !== 'Escape' || event.nativeEvent.isComposing ||\n        // A key from an overlay opened inside this one reaches here through\n        // React's tree, though that overlay is portalled out over this one,\n        // and is that overlay's to answer.\n        !(event.target instanceof Node && event.currentTarget.contains(event.target))) {\n          return;\n        }\n        event.stopPropagation();\n        if (escape === 'close') {\n          event.preventDefault();\n          state?.close();\n        }\n      }\n    };\n    return render === undefined ? <section {...next} /> : render(next, renderProps);\n  };\n}\n\n/**\n * A modal panel that arrives from the edge of the screen — a side sheet on a\n * wide viewport, a bottom sheet on a narrow one. Open state is React Aria's:\n * pass `isOpen` with `onOpenChange` to control it, or `defaultOpen` to let it\n * keep its own.\n *\n * Composed rather than configured by props, because a sheet's header, body,\n * and footer all take arbitrary content — the parts are `Sheet.Content`,\n * `Sheet.Header`, `Sheet.Title`, `Sheet.Body`, and `Sheet.Footer`. A\n * `Button` or `IconButton` placed directly inside `Sheet` opens it, and one\n * given `slot=\"close\"` anywhere inside the content closes it; neither needs\n * a part of its own.\n *\n * ```tsx\n * <Sheet>\n *   <Button>Open</Button>\n *   <Sheet.Content>\n *     <Sheet.Handle />\n *     <Sheet.Header>\n *       <Sheet.Title>Headline</Sheet.Title>\n *     </Sheet.Header>\n *     <Sheet.Body>Supporting line</Sheet.Body>\n *     <Sheet.Footer>\n *       <Button slot=\"close\">Close</Button>\n *     </Sheet.Footer>\n *   </Sheet.Content>\n * </Sheet>\n * ```\n *\n * `Sheet` is the trigger's half, so a sheet nothing on the page opens — one\n * a route shows, or a menu item raises — leaves it out and passes `isOpen`\n * and `onOpenChange` to `Sheet.Content` instead. Wrapped in `Sheet` with no\n * button inside it, React Aria warns that its press responder found nothing\n * to press.\n *\n * ```tsx\n * <Sheet.Content isOpen={isOpen} onOpenChange={setOpen}>\n *   …\n * </Sheet.Content>\n * ```\n *\n * Tab stays inside an open sheet, so a `Snackbar` shown meanwhile is reached\n * with F6, which React Aria uses to move between landmarks. Tabbing on past\n * the snackbar's last control leads back into the sheet.\n */\nfunction Sheet({\n  children,\n  ...props\n}: SheetProps) {\n  return <SheetTrigger {...props}>{children}</SheetTrigger>;\n}\nfunction SheetBody({\n  ref: callerRef,\n  ...props\n}: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>) {\n  const ref = useRef<HTMLDivElement>(null);\n  const snap = useContext(SnapContext);\n  // A body its content runs past is a tab stop named by the title, so a\n  // keyboard can scroll it, when nothing inside it takes focus; a call\n  // site's own name, role and tabIndex still win. See useScrollStop.\n  const title = useSlottedContext(HeadingContext, 'title');\n  const scrollStop = useScrollStop(ref, {\n    label: props['aria-label'],\n    title: title?.id\n  });\n  // The body measures itself through its own ref, and the call site's lands\n  // on the same element.\n  const merged = useMemo(() => mergeRefs(ref, callerRef ?? undefined), [callerRef]);\n  return <div {...scrollStop} {...props} ref={merged} {...mergeStyles(stylex.props(styles.body, snap === 'collapsed' && styles.bodyHeld, overlay.modalBodyRing), props)} />;\n}\n\n/**\n * The panel itself, and the scrim behind it. Everything the sheet shows goes\n * in here; the trigger stays outside it, since the trigger lives in the page\n * while this is portalled out to the end of the body.\n *\n * A swipe toward the edge the panel rests on closes it — down on a bottom\n * sheet, toward the screen's edge on a side sheet — as do a press on the\n * scrim, Escape and a `slot=\"close\"` button. `isDismissable` holds the first\n * two, and `isKeyboardDismissDisabled` holds Escape. React Aria's default for\n * the scrim is the reverse of this one: a sheet that ignores a tap outside it\n * reads as stuck.\n *\n * Inside `Sheet`, the open state is the trigger's. On its own, with no\n * trigger, it is this part's: `isOpen` with `onOpenChange` controls it, and\n * a swipe, a `slot=\"close\"` button, Escape and the scrim all report through\n * `onOpenChange`, as they would to `Sheet`.\n *\n * The sheet draws at `z-index: 900`, the scrim and the panel over it, over\n * any page content layered below that, such as a sticky header. A\n * `Snackbar` draws at 1000, so a toast raised from inside the sheet is read\n * over it, and React Aria's popovers and menus draw above both.\n *\n * React Aria lays the sheet over the page from the page's own top-left\n * corner rather than fixing it to the window, so a `container` inside a\n * positioned element holds the sheet to that element instead.\n */\nfunction SheetContent({\n  children,\n  className,\n  container,\n  defaultOpen,\n  isDismissable = true,\n  isKeyboardDismissDisabled = false,\n  isOpen,\n  onOpenChange,\n  ref,\n  snapPoints,\n  style,\n  ...props\n}: RefAttributes<HTMLDivElement> & SheetContentProps) {\n  const isBottom = useSyncExternalStore(subscribeToBottomSheet, isBottomSheet, onServer);\n  const isReduced = useSyncExternalStore(subscribeToReducedMotion, isReducedMotion, onServer);\n  const position = isBottom ? 'bottom' : 'end';\n  // The heights are the bottom sheet's alone; a side sheet has one width.\n  const heights = isBottom && snapPoints !== undefined && snapPoints.length > 0 ? snapPoints : undefined;\n  const overlayRef = useRef<HTMLDivElement>(null);\n  useRestOnTurn(overlayRef, position);\n  // React Aria holds Escape whenever it holds the scrim and the swipe, so\n  // the two settings disagreeing is where the dialog answers for Escape.\n  let escape: 'close' | 'hold' | undefined;\n  if (isDismissable === isKeyboardDismissDisabled) {\n    escape = isKeyboardDismissDisabled ? 'hold' : 'close';\n  }\n  return <OverlayScope>\n      <SheetOverlay defaultOpen={defaultOpen} isOpen={isOpen} onOpenChange={onOpenChange} position={position} preventDismissal={!isDismissable} ref={overlayRef} snapPoints={heights}\n    // oxlint-disable-next-line typescript/no-deprecated -- its replacement, UNSAFE_PortalProvider, is not exported by react-aria-components\n    UNSTABLE_portalContainer={container} className=\"x9f619 x125h2g0\">\n        <SheetBackdrop\n      // The shared fade instead under reduced motion, where the panel\n      // arrives without moving and the scrim is all that says so.\n      swipeAnimation={isReduced ? undefined : scrimIn}\n      // Whole once the panel reaches its first snap point rather than\n      // only once all of it shows, so a collapsed sheet holds the page\n      // behind the same scrim an expanded one does, and a swipe below\n      // that point is what lifts it.\n      swipeAnimationRange={heights === undefined ? undefined : TO_THE_FIRST_SNAP_POINT} {...stylex.props(overlay.backdrop)} />\n        <RACSheet\n      // The panel, where the call site's class and style land, rather than\n      // the dialog inside it, which takes the rest of the props.\n      ref={ref} {...mergeStatefulStyles(panelStyles, {\n        className,\n        style\n      })}>\n          {({\n          isExpanded\n        }) => {\n          let snap: SnapState = null;\n          if (heights !== undefined) {\n            snap = isExpanded ? 'expanded' : 'collapsed';\n          }\n          return <SnapContext value={snap}>\n                <SheetDialog escape={escape} {...props}>\n                  {children}\n                </SheetDialog>\n              </SnapContext>;\n        }}\n        </RACSheet>\n      </SheetOverlay>\n    </OverlayScope>;\n}\n\n// The element with the dialog role, inside the overlay so it can reach the\n// open state React Aria holds there.\nfunction SheetDialog({\n  escape,\n  render,\n  ...props\n}: DialogProps & {\n  escape: 'close' | 'hold' | undefined;\n}) {\n  const state = useContext(OverlayTriggerStateContext);\n  return <RACSheetContent {...props} render={escape === undefined ? render : escapeKeyOn(escape, state, render)} {...stylex.props(overlay.modalDialog)} />;\n}\n\n/**\n * The sheet's actions. The panel rests on the window's bottom edge in both\n * presentations, so they sit on that edge, and a toast rises clear of them\n * while the sheet is open rather than lying over its buttons. A side sheet's\n * are included: the toast is centred in the window, and on any window\n * narrower than about 1376px its 576 reach into the sheet's 400.\n */\nfunction SheetFooter({\n  ref: callerRef,\n  ...props\n}: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>) {\n  const ref = useRef<HTMLDivElement>(null);\n  useHoldBottomEdge(ref, true);\n  // The footer measures itself through its own ref, and the call site's\n  // lands on the same element.\n  const merged = useMemo(() => mergeRefs(ref, callerRef ?? undefined), [callerRef]);\n  return <div {...props} ref={merged} {...mergeStyles({\n    className: \"x12smttz x13fuv20 x178xt8z x9f619 x78zum5 x2lah0s x1a02dak x126z3so x1nhvcw1 x1qafhyn x8i8c5o x1clyivc xg0ps1x\"\n  }, props)} />;\n}\n\n/**\n * The bottom sheets page's drag handle: a short bar above the sheet's\n * content, saying the panel is a bottom sheet that a swipe moves. Place it\n * first inside `Sheet.Content`; above the medium breakpoint the panel is a\n * side sheet and this draws nothing.\n *\n * On a sheet given `snapPoints` it is a button, as the bottom sheets page\n * asks of a handle that moves the sheet between heights: a press, from a\n * pointer, a keyboard or assistive technology, moves the sheet to its next\n * snap point, from the last back to the first, and `aria-expanded` says\n * whether it rests at the last. It is called \"Drag handle\" in the locale's\n * own words, and a call site's `aria-label` names it instead. Its 48 square\n * is the page's target, centred over the bar.\n *\n * On a sheet without them it is decoration, hidden from assistive\n * technology: the panel has one height, and the swipe the bar points at\n * takes it from anywhere on the panel, so a control here would offer\n * nothing a swipe, the scrim, Escape or a `slot=\"close\"` button does not.\n */\nfunction SheetHandle({\n  'aria-label': label,\n  ...props\n}: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>) {\n  const snap = useContext(SnapContext);\n  const messages = useMessages();\n  const bar = <span className=\"x1ccu2yh xwvh9j7 xqu0tyb x1dkaolv x9f619 x1g12otp x1td3qas\" />;\n  if (snap === null) {\n    return <div aria-hidden=\"true\" aria-label={label} {...props} {...mergeStyles({\n      className: \"x6s0dn4 x9f619 x1s85apg x37i4ze x2lah0s xl56j7k x1xg6qyv\"\n    }, props)}>\n        {bar}\n      </div>;\n  }\n  return <div {...props} {...mergeStyles({\n    className: \"x6s0dn4 x9f619 x1s85apg x37i4ze x2lah0s xl56j7k xt970qd\"\n  }, props)}>\n      <RACButton aria-expanded={snap === 'expanded'} aria-label={label ?? messages.dragHandle} onPress={moveToNextSnapPoint} className=\"x6s0dn4 xjbqb8w xsdox4t x1dkaolv xng3xce x9f619 x1ypdohk x78zum5 x1useyqa xl56j7k x1ghz6dp xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn x1717udv\">\n        {bar}\n      </RACButton>\n    </div>;\n}\nfunction SheetHeader(props: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>) {\n  return <div {...props} {...mergeStyles({\n    className: \"x6s0dn4 x1j6faob x1q0q8m5 xso031l x9f619 x78zum5 x2lah0s x1gka490 x1qughib x1cmllll xg0ps1x\"\n  }, props)} />;\n}\n\n/**\n * Names the sheet. Rendered through React Aria's title slot, which is what\n * points the dialog's `aria-labelledby` at it — a sheet without one announces\n * itself as an unnamed dialog.\n */\nfunction SheetTitle(props: RefAttributes<HTMLHeadingElement> & SheetTitleProps) {\n  return <Heading slot=\"title\" {...props} {...mergeStyles({\n    className: \"x9f619 x1w5n3ug xdy5w5q xete2z3 x14ijtet xug9e1u x2divse x1ghz6dp xeuugli xj0a0fe\"\n  }, props)} />;\n}\n\n/**\n * Puts an open panel back where it rests when the window crosses the\n * breakpoint. Its scroller runs along the axis the panel arrives on, so a\n * side sheet turned into a bottom sheet kept the side sheet's scroll, which on\n * the new axis is the closed position: the panel stayed open below the\n * window, and its scrim went on holding the page. A panel resting against the\n * end of its scroller — a bottom sheet, a sheet on the right — goes to the\n * end, and a sheet on the left to the start, without the smooth scroll its\n * arrival takes, since it is not arriving.\n *\n * A layout effect, so the panel is back before the frame is drawn and before\n * React Aria's observer can see it gone; the parent's, so it runs after\n * React Aria has set the scroller up for the new edge.\n */\nfunction useRestOnTurn(overlayRef: RefObject<HTMLDivElement | null>, position: 'bottom' | 'end') {\n  const previous = useRef(position);\n  useLayoutEffect(() => {\n    if (previous.current === position) {\n      return;\n    }\n    previous.current = position;\n    const layer = overlayRef.current;\n    const scroller = layer?.querySelector('[data-sheet-scroll]');\n    if (!(layer instanceof HTMLElement && scroller instanceof HTMLElement)) {\n      return;\n    }\n    const edge = layer.dataset.position;\n    if (edge === 'bottom') {\n      scroller.scrollTo({\n        top: scroller.scrollHeight\n      });\n    } else {\n      scroller.scrollTo({\n        left: edge === 'left' ? 0 : scroller.scrollWidth\n      });\n    }\n  }, [overlayRef, position]);\n}\nSheet.Body = SheetBody;\nSheet.Content = SheetContent;\nSheet.Footer = SheetFooter;\nSheet.Handle = SheetHandle;\nSheet.Header = SheetHeader;\nSheet.Title = SheetTitle;\n\n// The dialog's own props, plus the overlay's open state and dismissal\n// settings and the panel's styling. A call site has no reason to know there\n// are four elements: `className` and `style` reach the panel, which is the\n// one worth restyling, the open state and the dismissal settings reach the\n// overlay, and everything else lands on the dialog.\n//\n// The two dismissal settings are declared here rather than picked with their\n// siblings, since React Aria's sheet has neither: one switch holds every way\n// out of it, and these split the keyboard from the pointer as the rest of the\n// library's modals do.\ntype SheetContentProps = Omit<DialogProps, 'className' | 'style'> & Pick<ModalOverlayProps, 'defaultOpen' | 'isOpen' | 'onOpenChange'> & {\n  /** A function may compute the class from the panel's render state. */\n  className?: ClassNameOrFunction<SheetRenderProps>;\n  /**\n   * Where to portal the panel and scrim. Defaults to the container of the\n   * `ThemeScope` around it, which keeps the sheet on that scope's tokens, or\n   * to the end of `<body>` where there is none. A subtree themed through the\n   * `themeScope` class has no container of its own, so point this inside it,\n   * or the sheet renders outside and keeps the page's tokens.\n   */\n  container?: Element;\n  /**\n   * Whether a press on the scrim, outside the panel, or a swipe toward the\n   * edge it rests on closes the sheet. `true` here where React Aria's own\n   * default for the scrim is `false`, since a sheet that ignores a tap\n   * outside it reads as stuck. Escape is `isKeyboardDismissDisabled`'s, and\n   * this says nothing about it.\n   * @default true\n   */\n  isDismissable?: boolean;\n  /**\n   * Whether Escape is kept from closing the sheet. The scrim and the swipe\n   * are `isDismissable`'s, and this says nothing about them.\n   * @default false\n   */\n  isKeyboardDismissDisabled?: boolean;\n  /**\n   * The heights a bottom sheet rests at, each the amount of the panel\n   * showing: a number of pixels, or a percentage of the panel's own\n   * height. The sheet opens at the first, a swipe moves it between them,\n   * and a press on `Sheet.Handle` moves it to the next, from the last\n   * back to the first. React Aria's own prop, under its own name.\n   *\n   * End on `'100%'` for a sheet that can show all of itself: its body\n   * scrolls only while the whole panel is showing, and short of that a\n   * swipe on the body moves the sheet instead. The side sheet has one\n   * width and ignores them.\n   */\n  snapPoints?: Array<number | string>;\n  /** A function may compute the style from the panel's render state. */\n  style?: StyleOrFunction<SheetRenderProps>;\n};\ntype SheetProps = Omit<DialogTriggerProps, 'children'> & {\n  children?: ReactNode;\n};\ntype SheetTitleProps = HeadingProps;\nexport type { SheetContentProps, SheetProps, SheetTitleProps };\nexport { SheetBody, SheetContent, SheetFooter, SheetHandle, SheetHeader, SheetTitle };\nexport default Sheet;"],"mappings":";;;;;;;;;;;;;;AA4DA,MAAMoD,UAAU;AAIhB,MAAMC,eAAe;AACrB,MAAMC,iBAAiB;AAIvB,MAAMC,0BAA0B,EAC9BC,KAAK,EACP;AAOA,MAAMC,SAAS;CACbC,MAAM;EACJC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;CACT;CACAC,UAAU;EACRJ,QAAQ;EACRG,OAAO;CACT;AACF;AAKA,SAASE,gBAAgB;CACvB,OAAOC,OAAOC,WAAWpB,YAAY,CAAC,CAACqB;AACzC;AACA,SAASC,kBAAkB;CACzB,OAAOH,OAAOC,WAAWnB,cAAc,CAAC,CAACoB;AAC3C;;;;;;;;;;;;;;;;AAiBA,SAASE,oBAAoB,EAC3BC,UACa;CACb,MAAMC,WAAWD,OAAOE,QAAQ,qBAAqB;CACrD,IAAI,EAAED,oBAAoBE,cACxB;CAGF,MAAMC,SAASH,SAASI,sBAAsB,CAAC,CAACC,MAAML,SAASM;CAC/D,MAAMC,QAAQ,CAAC,GAAGP,SAASQ,iBAAiB,qBAAqB,CAAC,CAAC,CAACC,KAAIC,WAAUA,OAAON,sBAAsB,CAAC,CAACC,MAAMF,SAASQ,OAAOC,WAAWC,iBAAiBH,MAAM,CAAC,CAACI,eAAe,CAAC;CAC3L,IAAIP,MAAMQ,WAAW,GACnB;CAEF,MAAMC,YAAYT,MAAME,KAAIQ,SAAQC,KAAKC,IAAIF,OAAOjB,SAASM,SAAS,CAAC;CACvE,MAAMc,KAAKJ,UAAUK,QAAQH,KAAKI,IAAI,GAAGN,SAAS,CAAC;CACnDhB,SAASuB,SAAS;EAChBC,UAAU3B,gBAAgB,IAAI,SAAS;EACvCQ,KAAKE,OAAOa,KAAK,KAAKb,MAAMQ;CAC9B,CAAC;AACH;AACA,SAASU,WAAW;CAClB,OAAO;AACT;AAIA,SAASC,YAAY,EACnBC,YACmB;CACnB,OAAO;EACL,GAAG,EACDC,WAAW,sIACb;EACA,GAAG,EACDA,WAAW,iJACb;EACA,GAAG,EACDA,WAAW,+IACb;EACA,GAAG,EACDA,WAAW,iJACb;EACA,GAAG,EACDA,WAAW,8IACb;EACA,GAAG,EACDA,WAAW,iJACb;EACA,GAAG,EACDA,WAAW,uJACb;EACA,GAAG,EACDA,WAAW,iJACb;CACF,EAAE,CAAC,EAAED,aAAa,aAAa,IAAI,CAAC,EAAEA,aAAa,WAAW,IAAI,CAAC,EAAEA,aAAa,YAAY;AAChG;AACA,SAASE,YAAYC,OAAe;CAClC,QAAQC,aAAyB;EAC/B,MAAMC,OAAOtC,OAAOC,WAAWmC,KAAK;EACpCE,KAAKC,iBAAiB,UAAUF,QAAQ;EACxC,aAAa;GACXC,KAAKE,oBAAoB,UAAUH,QAAQ;EAC7C;CACF;AACF;AACA,MAAMI,yBAAyBN,YAAYtD,YAAY;AACvD,MAAM6D,2BAA2BP,YAAYrD,cAAc;AAO3D,MAAM8D,cAAcnG,cAAyB,IAAI;;;;;;;;;AAUjD,SAASoG,YAAYC,QAA0BC,OAAmCC,QAAmE;CACnJ,QAAQE,OAAOC,gBAAgB;EAC7B,MAAMC,OAAO;GACX,GAAGF;GACHG,YAAYC,UAAsC;IAChDJ,MAAMG,YAAYC,KAAK;IACvB,IAAIA,MAAMC,QAAQ,YAAYD,MAAME,YAAYC,eAIhD,EAAEH,MAAMjD,kBAAkBqD,QAAQJ,MAAMK,cAAcC,SAASN,MAAMjD,MAAM,IACzE;IAEFiD,MAAMO,gBAAgB;IACtB,IAAIf,WAAW,SAAS;KACtBQ,MAAMQ,eAAe;KACrBf,OAAOgB,MAAM;IACf;GACF;EACF;EACA,OAAOf,WAAWgB,KAAAA,IAAY,oBAAC,WAAD,EAAS,GAAIZ,KAAK,CAAA,IAAMJ,OAAOI,MAAMD,WAAW;CAChF;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+CA,SAAA/F,QAAA6G,IAAA;CAAA,MAAAC,IAAAzI,EAAA,CAAA;CAAA,IAAA0I;CAAA,IAAAjB;CAAA,IAAAgB,EAAA,OAAAD,IAAA;EAAe,CAAA,CAAAE,UAAA,GAAAjB,SAAAe;EAGFC,EAAA,KAAAD;EAAAC,EAAA,KAAAC;EAAAD,EAAA,KAAAhB;CAAA,OAAA;EAAAiB,WAAAD,EAAA;EAAAhB,QAAAgB,EAAA;CAAA;CAAA,IAAAE;CAAA,IAAAF,EAAA,OAAAC,YAAAD,EAAA,OAAAhB,OAAA;EACJkB,KAAA,oBAAC,cAAD;GAAa,GAAKlB;GAAQiB;EAAb,CAAA;EAAqCD,EAAA,KAAAC;EAAAD,EAAA,KAAAhB;EAAAgB,EAAA,KAAAE;CAAA,OAAAA,KAAAF,EAAA;CAAA,OAAlDE;AAAkD;AAE3D,SAAAC,UAAAJ,IAAA;CAAA,MAAAC,IAAAzI,EAAA,CAAA;CAAmB,MAAA,EAAA6I,KAAAC,WAAA,GAAArB,YAAAe;CAIjB,MAAAK,MAAYzH,OAAuB,IAAI;CACvC,MAAA2H,OAAa9H,WAAWkG,WAAW;CAInC,MAAA6B,QAAc9G,kBAAkBX,gBAAgB,OAAO;CACvD,MAAA0H,aAAmB7G,cAAcyG,KAAK;EAAAK,OAC7BzB,QAAM;EAAauB,OACnBA,OAAKG;CACd,CAAC;CAG2C,MAAAR,KAAAG,aAAAP,KAAAA;CAAsB,IAAAa;CAAA,IAAAX,EAAA,OAAAE,IAAA;EAArCS,KAAA7G,UAAUsG,KAAKF,EAAsB;EAACF,EAAA,KAAAE;EAAAF,EAAA,KAAAW;CAAA,OAAAA,KAAAX,EAAA;CAAnE,MAAAY,SAA6BD;CAC2B,MAAAE,KAAA5G,YAAY3B,MAAayC,OAAMC,MAAOsF,SAAS,eAAevF,OAAMa,UAAW1B,QAAO4G,aAAc,GAAG9B,OAAK;CAAC,IAAA+B;CAAA,IAAAf,EAAA,OAAAY,UAAAZ,EAAA,OAAAhB,WAAAgB,EAAA,OAAAQ,cAAAR,EAAA,OAAAa,IAAA;EAA9JE,KAAA,oBAAA,OAAA;GAAkK,GAAzJP;GAAU,GAAMxB;GAAY4B,KAAAA;GAAM,GAAMC;EAA6G,CAAA;EAAIb,EAAA,KAAAY;EAAAZ,EAAA,KAAAhB;EAAAgB,EAAA,KAAAQ;EAAAR,EAAA,KAAAa;EAAAb,EAAA,KAAAe;CAAA,OAAAA,KAAAf,EAAA;CAAA,OAAlKe;AAAkK;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6B3K,SAAA3H,eAAA2G,IAAA;CAAA,MAAAC,IAAAzI,EAAA,EAAA;CAAA,IAAA0I;CAAA,IAAAjC;CAAA,IAAAgD;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAnC;CAAA,IAAAoB;CAAA,IAAAgB;CAAA,IAAAC;CAAA,IAAAnB;CAAA,IAAAS;CAAA,IAAAX,EAAA,OAAAD,IAAA;EAAsB,CAAA,CAAAE,UAAAjC,WAAAgD,WAAAC,aAAAK,eAAApB,IAAAqB,2BAAAZ,IAAAO,QAAAC,cAAAf,KAAAgB,YAAAC,OAAA,GAAArC,WAAAe;EAa8BC,EAAA,KAAAD;EAAAC,EAAA,KAAAC;EAAAD,EAAA,KAAAhC;EAAAgC,EAAA,KAAAgB;EAAAhB,EAAA,KAAAiB;EAAAjB,EAAA,KAAAkB;EAAAlB,EAAA,KAAAmB;EAAAnB,EAAA,KAAAhB;EAAAgB,EAAA,KAAAI;EAAAJ,EAAA,KAAAoB;EAAApB,EAAA,MAAAqB;EAAArB,EAAA,MAAAE;EAAAF,EAAA,MAAAW;CAAA,OAAA;EAAAV,WAAAD,EAAA;EAAAhC,YAAAgC,EAAA;EAAAgB,YAAAhB,EAAA;EAAAiB,cAAAjB,EAAA;EAAAkB,SAAAlB,EAAA;EAAAmB,eAAAnB,EAAA;EAAAhB,UAAAgB,EAAA;EAAAI,MAAAJ,EAAA;EAAAoB,aAAApB,EAAA;EAAAqB,QAAArB,EAAA;EAAAE,KAAAF,EAAA;EAAAW,KAAAX,EAAA;CAAA;CARlD,MAAAsB,gBAAApB,OAAAJ,KAAAA,IAAA,OAAAI;CACA,MAAAqB,4BAAAZ,OAAAb,KAAAA,IAAA,QAAAa;CAQA,MAAAa,WAAiB5I,qBAAqB2F,wBAAwB1C,eAAegC,QAAQ;CACrF,MAAA4D,YAAkB7I,qBAAqB4F,0BAA0BvC,iBAAiB4B,QAAQ;CAC1F,MAAAE,WAAiByD,WAAA,WAAA;CAEjB,MAAAE,UAAgBF,YAAYJ,eAAetB,KAAAA,KAAasB,WAAUjE,SAAU,IAA5DiE,aAAAtB,KAAAA;CAChB,MAAA6B,aAAmBhJ,OAAuB,IAAI;CAC9CiJ,cAAcD,YAAY5D,QAAQ;CAAC,IAAAa;CAAA,IAAAoB,EAAA,QAAAsB,iBAAAtB,EAAA,QAAAuB,2BAAA;EAInC,IAAID,kBAAkBC,2BACpB3C,SAAS2C,4BAAA,SAAA;EACVvB,EAAA,MAAAsB;EAAAtB,EAAA,MAAAuB;EAAAvB,EAAA,MAAApB;CAAA,OAAAA,SAAAoB,EAAA;CAE6H,MAAAa,KAAA,CAACS;CAM3G,MAAAP,KAAAU,YAAA3B,KAAAA,IAAApF;CAKK,MAAAmH,KAAAH,YAAY5B,KAAAA,IAAZA,KAAAA,IAAAjF;CAA2D,IAAAiH;CAAA,IAAA9B,EAAA,QAAA+B,OAAAC,IAAA,2BAAA,GAAA;EAAMF,KAAAxJ,MAAa4B,QAAO+H,QAAS;EAACjC,EAAA,MAAA8B;CAAA,OAAAA,KAAA9B,EAAA;CAAA,IAAAkC;CAAA,IAAAlC,EAAA,QAAAe,MAAAf,EAAA,QAAA6B,IAAA;EARlHK,KAAA,oBAAC,eAAD;GAGc,gBAAAnB;GAKK,qBAAAc;GAA2D,GAAMC;EAA8B,CAAA;EAAI9B,EAAA,MAAAe;EAAAf,EAAA,MAAA6B;EAAA7B,EAAA,MAAAkC;CAAA,OAAAA,KAAAlC,EAAA;CAAA,IAAAmC;CAAA,IAAAnC,EAAA,QAAAhC,aAAAgC,EAAA,QAAAqB,OAAA;EAI1Gc,KAAAnI,oBAAoB8D,aAAa;GAAAE;GAAAqD;EAG/C,CAAC;EAACrB,EAAA,MAAAhC;EAAAgC,EAAA,MAAAqB;EAAArB,EAAA,MAAAmC;CAAA,OAAAA,KAAAnC,EAAA;CAAA,IAAAoC;CAAA,IAAApC,EAAA,QAAAC,YAAAD,EAAA,QAAApB,UAAAoB,EAAA,QAAA0B,WAAA1B,EAAA,QAAAhB,SAAA;EACGoD,MAAAC,QAAA;GAAC,MAAA,EAAAC,eAAAD;GAGF,IAAA/B,OAAsB;GACtB,IAAIoB,YAAY5B,KAAAA,GACdQ,OAAOgC,aAAA,aAAA;GACR,OACM,oBAAC,aAAD;IAAoBhC,OAAAA;IACrB,UAAA,oBAAC,aAAD;KAAqB1B;KAAM,GAAMI;KAC9BiB;IADS,CAAA;GADC,CAAA;EAID;EACnBD,EAAA,MAAAC;EAAAD,EAAA,MAAApB;EAAAoB,EAAA,MAAA0B;EAAA1B,EAAA,MAAAhB;EAAAgB,EAAA,MAAAoC;CAAA,OAAAA,KAAApC,EAAA;CAAA,IAAAqC;CAAA,IAAArC,EAAA,QAAAI,OAAAJ,EAAA,QAAAmC,MAAAnC,EAAA,QAAAoC,IAAA;EAnBDC,MAAA,oBAACuC,OAAD;GAGGxE;GAAG,GAAM+B;GAITC,UAAAA;EAPM,CAAA;EAoBEpC,EAAA,MAAAI;EAAAJ,EAAA,MAAAmC;EAAAnC,EAAA,MAAAoC;EAAApC,EAAA,MAAAqC;CAAA,OAAAA,MAAArC,EAAA;CAAA,IAAAuC;CAAA,IAAAvC,EAAA,QAAAgB,aAAAhB,EAAA,QAAAiB,eAAAjB,EAAA,QAAA0B,WAAA1B,EAAA,QAAAkB,UAAAlB,EAAA,QAAAmB,gBAAAnB,EAAA,QAAAjC,YAAAiC,EAAA,QAAAqC,OAAArC,EAAA,QAAAa,MAAAb,EAAA,QAAAkC,IAAA;EAjCVK,MAAA,oBAAC,cAAD,EAAA,UACH,qBAAC,cAAD;GAA2BtB;GAAqBC;GAAsBC;GAAwBpD;GAA4B,kBAAA8C;GAAqBc,KAAAA;GAAwBD,YAAAA;GAE/IV,0BAAAA;GAAqB,WAAA;GAF7C,UAAA,CAGEkB,IASAG,GAZW;EADG,CAAA,EAAA,CAAA;EAmCHrC,EAAA,MAAAgB;EAAAhB,EAAA,MAAAiB;EAAAjB,EAAA,MAAA0B;EAAA1B,EAAA,MAAAkB;EAAAlB,EAAA,MAAAmB;EAAAnB,EAAA,MAAAjC;EAAAiC,EAAA,MAAAqC;EAAArC,EAAA,MAAAa;EAAAb,EAAA,MAAAkC;EAAAlC,EAAA,MAAAuC;CAAA,OAAAA,MAAAvC,EAAA;CAAA,OAnCVuC;AAmCU;AAKnB,SAAAC,YAAAzC,IAAA;CAAA,MAAAC,IAAAzI,EAAA,EAAA;CAAA,IAAAqH;CAAA,IAAAI;CAAA,IAAAF;CAAA,IAAAkB,EAAA,OAAAD,IAAA;EAAqB,CAAA,CAAAnB,QAAAE,QAAA,GAAAE,WAAAe;EAMpBC,EAAA,KAAAD;EAAAC,EAAA,KAAApB;EAAAoB,EAAA,KAAAhB;EAAAgB,EAAA,KAAAlB;CAAA,OAAA;EAAAF,SAAAoB,EAAA;EAAAhB,UAAAgB,EAAA;EAAAlB,SAAAkB,EAAA;CAAA;CACC,MAAAnB,QAAcrG,WAAWO,0BAA0B;CAAE,IAAAmH;CAAA,IAAAF,EAAA,OAAApB,UAAAoB,EAAA,OAAAlB,UAAAkB,EAAA,OAAAnB,OAAA;EACVqB,KAAAtB,WAAWkB,KAAAA,IAAXhB,SAAgCH,YAAYC,QAAQC,OAAOC,MAAM;EAACkB,EAAA,KAAApB;EAAAoB,EAAA,KAAAlB;EAAAkB,EAAA,KAAAnB;EAAAmB,EAAA,KAAAE;CAAA,OAAAA,KAAAF,EAAA;CAAA,IAAAW;CAAA,IAAAX,EAAA,OAAA+B,OAAAC,IAAA,2BAAA,GAAA;EAAMrB,KAAArI,MAAa4B,QAAOuI,WAAY;EAACzC,EAAA,KAAAW;CAAA,OAAAA,KAAAX,EAAA;CAAA,IAAAa;CAAA,IAAAb,EAAA,OAAAhB,WAAAgB,EAAA,QAAAE,IAAA;EAA7IW,KAAA,oBAACgE,cAAD;GAAgB,GAAK7F;GAAe,QAAAkB;GAAkE,GAAMS;EAAiC,CAAA;EAAIX,EAAA,KAAAhB;EAAAgB,EAAA,MAAAE;EAAAF,EAAA,MAAAa;CAAA,OAAAA,KAAAb,EAAA;CAAA,OAAjJa;AAAiJ;;;;;;;;AAU1J,SAAA6B,YAAA3C,IAAA;CAAA,MAAAC,IAAAzI,EAAA,CAAA;CAAqB,MAAA,EAAA6I,KAAAC,WAAA,GAAArB,UAAAe;CAInB,MAAAK,MAAYzH,OAAuB,IAAI;CACvCe,kBAAkB0G,KAAK,IAAI;CAGiB,MAAAF,KAAAG,aAAAP,KAAAA;CAAsB,IAAAa;CAAA,IAAAX,EAAA,OAAAE,IAAA;EAArCS,KAAA7G,UAAUsG,KAAKF,EAAsB;EAACF,EAAA,KAAAE;EAAAF,EAAA,KAAAW;CAAA,OAAAA,KAAAX,EAAA;CAAnE,MAAAY,SAA6BD;CACW,MAAAE,KAAA5G,YAAY,EAAA+D,WACvC,iHACb,GAAGgB,KAAK;CAAC,IAAA+B;CAAA,IAAAf,EAAA,OAAAY,UAAAZ,EAAA,OAAAhB,SAAAgB,EAAA,OAAAa,IAAA;EAFFE,KAAA,oBAAA,OAAA;GAEM,GAFG/B;GAAY4B,KAAAA;GAAM,GAAMC;EAE/B,CAAA;EAAIb,EAAA,KAAAY;EAAAZ,EAAA,KAAAhB;EAAAgB,EAAA,KAAAa;EAAAb,EAAA,KAAAe;CAAA,OAAAA,KAAAf,EAAA;CAAA,OAFNe;AAEM;;;;;;;;;;;;;;;;;;;;AAsBf,SAAA4B,YAAA5C,IAAA;CAAA,MAAAC,IAAAzI,EAAA,CAAA;CAAqB,MAAA,EAAA,cAAAkJ,OAAA,GAAAzB,UAAAe;CAInB,MAAAO,OAAa9H,WAAWkG,WAAW;CACnC,MAAAkE,WAAiBhJ,YAAY;CAAE,IAAAsG;CAAA,IAAAF,EAAA,OAAA+B,OAAAC,IAAA,2BAAA,GAAA;EACnB9B,KAAA,oBAAA,QAAA,EAAgB,WAAA,6DAA4D,CAAA;EAAGF,EAAA,KAAAE;CAAA,OAAAA,KAAAF,EAAA;CAA3F,MAAA6C,MAAY3C;CACZ,IAAII,SAAS,MAAI,OACR,oBAAA,OAAA;EAAiB,eAAA;EAAmBG,cAAAA;EAAK,GAAMzB;EAAK,GAAM/E,YAAY,EAAA+D,WAChE,2DACb,GAAGgB,KAAK;EACH6D,UAAAA;CACG,CAAA;CAEiB,MAAAlC,KAAA1G,YAAY,EAAA+D,WAC1B,0DACb,GAAGgB,KAAK;CACsB,MAAA6B,KAAAP,SAAS;CAAwB,MAAAS,KAAAN,SAASmC,SAAQE;CAAW,IAAAjB;CAAA,IAAA7B,EAAA,OAAA6C,OAAA7C,EAAA,OAAAa,MAAAb,EAAA,OAAAe,IAAA;EAAvFc,KAAA,oBAACiD,QAAD;GAA0B,iBAAAjE;GAAiC,cAAAE;GAAuC7E,SAAAA;GAA+B,WAAA;GAC9H2G,UAAAA;EADO,CAAA;EAEE7C,EAAA,KAAA6C;EAAA7C,EAAA,KAAAa;EAAAb,EAAA,KAAAe;EAAAf,EAAA,KAAA6B;CAAA,OAAAA,KAAA7B,EAAA;CAAA,IAAA8B;CAAA,IAAA9B,EAAA,OAAAhB,SAAAgB,EAAA,OAAAW,MAAAX,EAAA,OAAA6B,IAAA;EALTC,KAAA,oBAAA,OAAA;GAMC,GANQ9C;GAAK,GAAM2B;GAGvBkB,UAAAA;EAGI,CAAA;EAAA7B,EAAA,KAAAhB;EAAAgB,EAAA,KAAAW;EAAAX,EAAA,KAAA6B;EAAA7B,EAAA,KAAA8B;CAAA,OAAAA,KAAA9B,EAAA;CAAA,OAND8B;AAMC;AAEV,SAAAiB,YAAA/D,OAAA;CAAA,MAAAgB,IAAAzI,EAAA,CAAA;CAAA,IAAAwI;CAAA,IAAAC,EAAA,OAAAhB,OAAA;EAC6Be,KAAA9F,YAAY,EAAA+D,WAC1B,8FACb,GAAGgB,KAAK;EAACgB,EAAA,KAAAhB;EAAAgB,EAAA,KAAAD;CAAA,OAAAA,KAAAC,EAAA;CAAA,IAAAE;CAAA,IAAAF,EAAA,OAAAhB,SAAAgB,EAAA,OAAAD,IAAA;EAFFG,KAAA,oBAAA,OAAA;GAEM,GAFGlB;GAAK,GAAMe;EAElB,CAAA;EAAIC,EAAA,KAAAhB;EAAAgB,EAAA,KAAAD;EAAAC,EAAA,KAAAE;CAAA,OAAAA,KAAAF,EAAA;CAAA,OAFNE;AAEM;;;;;;AAQf,SAAA8C,WAAAhE,OAAA;CAAA,MAAAgB,IAAAzI,EAAA,CAAA;CAAA,IAAAwI;CAAA,IAAAC,EAAA,OAAAhB,OAAA;EAC8Ce,KAAA9F,YAAY,EAAA+D,WAC3C,oFACb,GAAGgB,KAAK;EAACgB,EAAA,KAAAhB;EAAAgB,EAAA,KAAAD;CAAA,OAAAA,KAAAC,EAAA;CAAA,IAAAE;CAAA,IAAAF,EAAA,OAAAhB,SAAAgB,EAAA,OAAAD,IAAA;EAFFG,KAAA,oBAAC,SAAD;GAAc,MAAA;GAAO,GAAKlB;GAAK,GAAMe;EAEnC,CAAA;EAAIC,EAAA,KAAAhB;EAAAgB,EAAA,KAAAD;EAAAC,EAAA,KAAAE;CAAA,OAAAA,KAAAF,EAAA;CAAA,OAFNE;AAEM;;;;;;;;;;;;;;;AAiBf,SAAA0B,cAAAD,YAAA5D,UAAA;CAAA,MAAAiC,IAAAzI,EAAA,CAAA;CACE,MAAA0L,WAAiBtK,OAAOoF,QAAQ;CAAE,IAAAgC;CAAA,IAAAG;CAAA,IAAAF,EAAA,OAAA2B,cAAA3B,EAAA,OAAAjC,UAAA;EAClBgC,WAAA;GACd,IAAIkD,SAAQC,YAAanF,UAAQ;GAGjCkF,SAAQC,UAAWnF;GACnB,MAAAoF,QAAcxB,WAAUuB;GACxB,MAAA9G,WAAiB+G,OAAKC,cAAgB,qBAAqB;GAC3D,IAAI,EAAED,iBAAiB7G,eAAeF,oBAAoBE,cAAY;GAGtE,MAAA+G,OAAaF,MAAKG,QAAQvF;GAC1B,IAAIsF,SAAS,UACXjH,SAAQuB,SAAU,EAAAlB,KACXL,SAAQmH,aACf,CAAC;QAEDnH,SAAQuB,SAAU,EAAA6F,MACVH,SAAS,SAAT,IAAsBjH,SAAQqH,YACtC,CAAC;EACF;EACAvD,KAAA,CAACyB,YAAY5D,QAAQ;EAACiC,EAAA,KAAA2B;EAAA3B,EAAA,KAAAjC;EAAAiC,EAAA,KAAAD;EAAAC,EAAA,KAAAE;CAAA,OAAA;EAAAH,KAAAC,EAAA;EAAAE,KAAAF,EAAA;CAAA;CApBzBvH,gBAAgBsH,IAoBbG,EAAsB;AAAC;AAE5BhH,QAAMwK,OAAOvD;AACbjH,QAAMyK,UAAUvK;AAChBF,QAAM0K,SAASlB;AACfxJ,QAAM2K,SAASlB;AACfzJ,QAAM4K,SAASf;AACf7J,QAAM6K,QAAQf"}

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

@@ -74,7 +74,7 @@ type SnackbarProps = {
   queue: SnackbarQueue;
   /** A function may compute the style from the region's render state. */
   style?: ToastRegionProps<SnackbarMessage>['style'];
-} & Omit<ToastRegionProps<SnackbarMessage>, 'children' | 'className' | 'queue' | 'style'>;
+} & Omit<ToastRegionProps<SnackbarMessage>, 'aria-label' | 'children' | 'className' | 'queue' | 'style'>;
 /**
  * The queue a snackbar is shown from. Make one where the app can reach it —
  * a module of its own is the usual place — mount `Snackbar` once with it,
@@ -128,6 +128,13 @@ declare class SnackbarQueue {
  * While a full-screen `Dialog` or a `Sheet` with a footer is open, the region
  * rises to sit above those actions rather than over them, since they share
  * the bottom edge of the window and the snackbar is drawn above both.
+ *
+ * While a `Dialog` or a `Sheet` is open, Tab stays inside it and never
+ * reaches the snackbar. F6 does: React Aria moves focus between landmarks
+ * with it, so it lands on the region, Tab then reaches the message and its
+ * action, and tabbing on past the last of them leads back into the dialog. A
+ * message with an action stays until it is answered, so a keyboard user has
+ * the time that route takes.
  */
 declare function Snackbar({ closeLabel, queue, ...props }: RefAttributes<HTMLDivElement> & SnackbarProps): import("react").JSX.Element;
 declare namespace Snackbar {

package/dist/components/snackbar/index.js

@@ -224,6 +224,13 @@ function readableTimeout(timeout) {
 * While a full-screen `Dialog` or a `Sheet` with a footer is open, the region
 * rises to sit above those actions rather than over them, since they share
 * the bottom edge of the window and the snackbar is drawn above both.
+*
+* While a `Dialog` or a `Sheet` is open, Tab stays inside it and never
+* reaches the snackbar. F6 does: React Aria moves focus between landmarks
+* with it, so it lands on the region, Tab then reaches the message and its
+* action, and tabbing on past the last of them leads back into the dialog. A
+* message with an action stays until it is answered, so a keyboard user has
+* the time that route takes.
 */
 function Snackbar(t0) {
 	const $ = c(9);

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","ReactNode","RefAttributes","FocusableElement","ToastRegionProps","RACToastRegionProps","ToastRegionRenderProps","stylex","useSyncExternalStore","Button","RACButton","UNSTABLE_Toast","RACToast","UNSTABLE_ToastContent","RACToastContent","UNSTABLE_ToastQueue","RACToastQueue","UNSTABLE_ToastRegion","RACToastRegion","Text","CloseGlyph","useBottomEdgeClearance","useRipple","layers","mergeStatefulStyles","colors","motion","radii","shadows","sizing","spacing","stateLayerOpacity","typography","MESSAGE_MS","MINIMUM_MS","UNTIL_CLOSED","EXIT_MS","WIDE","rise","fadeOut","FORCED_COLORS","TARGET_SIZE","_temp","krVfgx","kGO01o","styles","action","kgeoSG","kGOzcv","kpsdNU","kEoFBp","kMwMTN","kMv6JI","kGuDYH","k63SB2","kb6lSQ","kLWn49","kAzted","k8WAf4","kg3NbH","$$css","close","kZKoxP","kzqmXN","kmVPX3","control","kGNEyG","kWkggS","kaIpWk","kMzoRj","kB7OPa","kkrTdU","k1xSpc","kmuXW","kjj79g","kjBf7l","kInvED","k3XXqK","kMeerF","kVAEAm","controlFocused","controlHovered","controlPressed","region","kXwgrk","kOIVth","kkqhue","kLKAdn","kE3dHu","kpe85a","kfzvcC","kY2c9j","risen","clearance","val","undefined","SnackbarAction","label","onPress","SnackbarMessage","message","showCloseButton","SnackbarOptions","onClose","timeout","SnackbarProps","className","closeLabel","queue","SnackbarQueue","style","Omit","SnackbarToastItem","FadingToastQueue","fading","Set","listeners","onClosing","key","constructor","maxVisibleToasts","add","setTimeout","delete","listener","isFading","has","subscribeToFading","rac","open","Map","toasts","closing","options","clear","readableTimeout","set","keys","#closing","get","actionPress","closeToast","controlClassName","StyleXStyles","state","isFocusVisible","isHovered","isPressed","props","Math","max","Snackbar","t0","$","T0","t1","t2","t3","snackbarContent","t4","SnackbarButton","children","ripple","handlers","surface","toast","SnackbarControls","SnackbarToast","content","useFading","Symbol","for","0","1","t5","_temp2","Queue","SnackbarRegionRenderProps","RACToastQueue","stylex.props","_c","props","RACToastRegion","RACButton","RACToastContent","RACToast"],"sources":["../../../src/components/snackbar/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode, RefAttributes } from 'react';\nimport type { FocusableElement, ToastRegionProps as RACToastRegionProps, ToastRegionRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { useSyncExternalStore } from 'react';\nimport { Button as RACButton, UNSTABLE_Toast as RACToast, UNSTABLE_ToastContent as RACToastContent, UNSTABLE_ToastQueue as RACToastQueue, UNSTABLE_ToastRegion as RACToastRegion, Text } from 'react-aria-components';\nimport { CloseGlyph } from '../../glyphs';\nimport { useBottomEdgeClearance } from '../../hooks/useBottomEdge';\nimport { useRipple } from '../../hooks/useRipple';\nimport '../../styles/layers.stylex';\nimport { layers } from '../../styles/layers.stylex';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, shadows, sizing, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\n\n// The snackbar page's brief message at the bottom of the screen, with an\n// optional action beside it and an optional close button after that. The\n// page's container is the inverse surface at a 4dp corner and elevation 3,\n// its supporting text is body-medium in inverse on surface, its action label\n// is inverse primary, and its close icon takes the supporting text's colour.\n// The measurements are the page's too: 8dp of margin from the edges of the\n// screen, 8dp of padding inside the container with another 8dp either side\n// of the message, 14dp above and below on a single line, and between 320 and\n// 576dp wide above the page's 600dp breakpoint — full width below it.\n//\n// One at a time. The page shows a single snackbar and replaces it rather\n// than stacking, so a message added while another is up closes that one —\n// its `onClose` runs — and takes its place. Nothing waits behind it: React\n// Aria's queue, left to itself, kept every message and showed the one it had\n// replaced again once the newer closed, so an Undo could come back long after\n// the thing it undid.\n//\n// React Aria's toast is the behaviour: the region is a landmark that holds\n// the message, moves focus into it for a keyboard, and pauses every timer\n// while it is hovered or focused, so a message never expires while it is\n// being read or acted on.\n//\n// Three things are decided here rather than taken from React Aria or from\n// the page.\n//\n// **The queue is ours, not React Aria's.** React Aria's toast is still\n// `UNSTABLE_`, and `SnackbarQueue` is what keeps that name out of a\n// consumer's code — an upstream rename is this file rather than every call\n// site. It wraps their queue, defaults it to one visible message, and takes\n// the message and its options as one call.\n//\n// **The action and the close button are drawn here rather than through\n// Button and IconButton.** The page colours them inverse primary and inverse\n// on surface, which no variant of either carries, and a colour pushed in\n// from outside through `className` is the merge hazard AGENTS.md describes:\n// StyleX decides between two atomic classes by their order in the compiled\n// stylesheet, not by the order they are applied. Both are React Aria's\n// `Button` with the same ripple and the same state layers, over\n// `currentColor` so each takes the colour the snackbar gives it.\n//\n// **There is no `container` prop.** Every other overlay here takes one,\n// because React Aria's `Modal` and `Popover` accept a portal container, and\n// `src/components/portal-container.test.tsx` is what keeps that true.\n// Its toast region does not: it reads a portal provider that\n// `react-aria-components` does not export, so the region always lands at the\n// end of `<body>`. An app that scopes its StyleX theme to a subtree has to\n// put the theme on `:root` for the snackbar to be drawn in it.\n\n// How long a message is shown when the call site names no `timeout`. The\n// specs page gives no duration, so these come from the snackbar's guidelines\n// and accessibility pages.\n//\n// A message alone leaves after five seconds. The pages allow four to ten, and\n// React Aria's toast docs set five as the least a reader should be given.\n//\n// A call site's own `timeout` is held to the pages' four. A shorter one is\n// lengthened to that, since a message gone in a second cannot be read, and the\n// web gives a reader no setting to slow it down with — the same reason the\n// paragraph below gives. `0` is left alone: it is no timer at all.\n//\n// A message with an action stays until the action is taken or something\n// closes it, as the pages ask of every actionable snackbar. No timer can know\n// how long a reader needs to act: a screen reader user hears the message\n// first and has to reach the region before the action is any use, and the\n// pause while the region is hovered or focused only starts once they have.\n// Android's snackbar can keep shorter defaults because the platform lengthens\n// them from each user's accessibility settings, and the web has no such\n// setting to read.\nconst MESSAGE_MS = 5000;\nconst MINIMUM_MS = 4000;\nconst UNTIL_CLOSED = 0;\n\n// How long a closing snackbar takes to fade, and so how long it stays in the\n// document once something has closed it: `durationShort2`, the token the fade\n// below runs for. A theme that lengthens that token has its fade cut short\n// here, since the queue cannot read a duration out of the stylesheet.\nconst EXIT_MS = 150;\n\n// Below the page's 600dp breakpoint the snackbar runs the width of the\n// screen; above it, it takes between 320 and 576.\nconst WIDE = '@media (min-width: 600px)';\n\n// The page's own is a fade, in and out. It rises a little as it arrives too,\n// which is what the page draws and what says the message came from the edge\n// of the screen rather than appearing over it. It leaves by the fade alone,\n// and quicker than it came, on the curve for something going away: once it is\n// closed there is nothing left on it to read.\nconst rise = \"x15b941j-B\";\nconst fadeOut = \"x1jn504y-B\";\n\n// Windows High Contrast and the rest of the forced-colours modes. Spelled\n// here rather than imported, for the reason src/field/styles.ts records: the\n// StyleX compiler resolves a constant across files only out of a `.stylex.ts`\n// module, and the generated one holds design tokens rather than queries.\nconst FORCED_COLORS = '@media (forced-colors: active)';\n\n// The least press area the action keeps, as Button's medium size does. A\n// literal rather than a token, for the reason Button's `TARGET_SIZE` gives: a\n// consumer resizing their controls should not shrink a floor the page states.\nconst TARGET_SIZE = '48px';\nconst _temp = {\n  krVfgx: \"xiicpxy\",\n  kGO01o: \"xqf7pud\",\n  \"$$css\": true\n};\nconst styles = {\n  action: {\n    kgeoSG: \"x1cpjm7i\",\n    kGOzcv: \"xun2zgk\",\n    kpsdNU: \"xm4btww\",\n    kEoFBp: \"x1hmns74\",\n    kMwMTN: \"x16bex6i\",\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    kAzted: \"x1cio8j0\",\n    k8WAf4: \"x1cmllll\",\n    kg3NbH: \"x18fpw6u\",\n    $$css: true\n  },\n  close: {\n    kZKoxP: \"xbg5kjn\",\n    kMwMTN: \"x1girmi0\",\n    kzqmXN: \"xoqf9c6\",\n    kmVPX3: \"x1717udv\",\n    $$css: true\n  },\n  control: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kaIpWk: \"x1dkaolv\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x3nfvp2\",\n    kmuXW: \"x2lah0s\",\n    kjj79g: \"xl56j7k\",\n    kjBf7l: \"x14ytart\",\n    kInvED: \"xr2mjdv\",\n    k3XXqK: \"x9v5kkp x1t137rt\",\n    kMeerF: \"x1de99jn\",\n    kVAEAm: \"x1n2onr6\",\n    $$css: true\n  },\n  controlFocused: {\n    kWkggS: \"x1mbb5iu\",\n    $$css: true\n  },\n  controlHovered: {\n    kWkggS: \"x930l3l\",\n    $$css: true\n  },\n  controlPressed: {\n    kWkggS: \"xsykwg8\",\n    $$css: true\n  },\n  region: {\n    kGNEyG: \"x6s0dn4\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kXwgrk: \"xdt5ytf\",\n    kOIVth: \"x126z3so\",\n    krVfgx: \"x1ey2m1c\",\n    kkqhue: \"x17y0mx6\",\n    k3XXqK: \"x1t137rt\",\n    kGO01o: \"x1u7mh7p\",\n    kLKAdn: \"xi7mcox\",\n    kE3dHu: \"xbpsoft\",\n    kpe85a: \"xq5vm52\",\n    kfzvcC: \"x47corl\",\n    kVAEAm: \"xixxii4\",\n    kY2c9j: \"x1bk8fjm\",\n    $$css: true\n  },\n  risen: (clearance: string) => [_temp, {\n    \"--x-insetBlockEnd\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(clearance)\n  }]\n};\ntype SnackbarAction = {\n  /** What the action says. The page gives it a single word where it can. */\n  label: string;\n  /** Run when the action is pressed, just before the snackbar closes. */\n  onPress: () => void;\n};\n\n/** What a snackbar carries: its message, and what may sit beside it. */\ntype SnackbarMessage = {\n  action: SnackbarAction | undefined;\n  message: ReactNode;\n  showCloseButton: boolean;\n};\ntype SnackbarOptions = {\n  /**\n   * A single action shown after the message. Pressing it runs `onPress` and\n   * closes the snackbar, which is what the page draws.\n   */\n  action?: SnackbarAction;\n  /**\n   * Run when the snackbar closes, however it was closed: by its timer, its\n   * action or close button, `close`, `clear`, or a newer message added in its\n   * place. It runs as the snackbar starts to fade out, not once it has gone.\n   */\n  onClose?: () => void;\n  /**\n   * Whether a close button is shown at the end. The page draws one for a\n   * message a reader may want out of the way before it expires.\n   *\n   * Named for what it draws rather than `isDismissable`, which on `Sheet`,\n   * `Dialog` and React Aria's modals is whether a press outside them closes\n   * them — a snackbar has no outside to press.\n   * @default false\n   */\n  showCloseButton?: boolean;\n  /**\n   * How long the snackbar is shown, in milliseconds. Defaults to five seconds\n   * for a message alone. A message with an action defaults to `0` and stays\n   * until the action is taken or something closes it, as Material Design asks\n   * of an actionable snackbar, since a reader may need longer to reach the\n   * action than any timer allows. The timer is paused while the region is\n   * hovered or focused, so a message never expires while it is being read.\n   *\n   * A timer shorter than four seconds, the least Material Design allows, is\n   * lengthened to four, since a message gone sooner cannot be read.\n   *\n   * `0` is the page's indefinite length: the snackbar stays until something\n   * closes it. Give one of those an action or `showCloseButton`, or there is no\n   * way to be rid of it.\n   */\n  timeout?: number;\n};\ntype SnackbarProps = {\n  /**\n   * What a screen reader calls the region holding the snackbar. Left out,\n   * React Aria names the region itself: a count of the messages it holds, in\n   * the reader's own locale — \"1 notification.\" in English, and one of some\n   * thirty languages otherwise. Pass a name only to replace that, and pass a\n   * translated one, since whatever is passed is read as written.\n   */\n  'aria-label'?: string;\n  /** A function may compute the class from the region's render state. */\n  className?: RACToastRegionProps<SnackbarMessage>['className'];\n  /**\n   * What a screen reader calls the button that dismisses a snackbar. It sits\n   * here rather than on a message's own options because it does not vary by\n   * message, so putting it there would make every `add` call repeat it. Left\n   * out, React Aria names it in the reader's locale — \"Close\" in English.\n   */\n  closeLabel?: string;\n  /** The queue the region shows messages from. */\n  queue: SnackbarQueue;\n  /** A function may compute the style from the region's render state. */\n  style?: RACToastRegionProps<SnackbarMessage>['style'];\n} & Omit<RACToastRegionProps<SnackbarMessage>, 'children' | 'className' | 'queue' | 'style'>;\n\n// One entry of the queue, as React Aria hands it to the region's render\n// function. Taken from its render state rather than imported from\n// `react-stately`, which this package does not depend on.\ntype SnackbarToastItem = ToastRegionRenderProps<SnackbarMessage>['visibleToasts'][number];\n\n/**\n * React Aria's queue, made to keep a closing snackbar on screen while it\n * fades. React Aria drops a toast from its list the moment it closes, and the\n * region unmounts with its last toast, so a closing strip has no state of its\n * own to be drawn in. Every close reaches `close` here — React Aria's timer and\n * its close button call it on the queue they were handed, as `SnackbarQueue`\n * does — so this one override covers all of them: the strip is marked as\n * fading, and React Aria closes it once the fade has run.\n */\nclass FadingToastQueue extends RACToastQueue<SnackbarMessage> {\n  // The strips fading out.\n  readonly #fading = new Set<string>();\n  readonly #listeners = new Set<() => void>();\n\n  // Run as a strip starts to close — see `SnackbarQueue`.\n  readonly #onClosing: (key: string) => void;\n  constructor(onClosing: (key: string) => void) {\n    // One at a time, which is what the page shows. React Aria shows the\n    // newest, so a message added while another is up or fading takes its\n    // place at once, and the older one runs out its fade unseen.\n    super({\n      maxVisibleToasts: 1\n    });\n    this.#onClosing = onClosing;\n  }\n\n  /** Starts a toast fading, and closes it once the fade has run. */\n  override close(key: string) {\n    this.#onClosing(key);\n    this.#fading.add(key);\n    setTimeout(() => {\n      this.#fading.delete(key);\n      super.close(key);\n    }, EXIT_MS);\n    for (const listener of this.#listeners) {\n      listener();\n    }\n  }\n\n  /** Whether a toast is fading out. */\n  isFading(key: string) {\n    return this.#fading.has(key);\n  }\n\n  /** Calls `listener` whenever a toast starts to fade. */\n  subscribeToFading(listener: () => void) {\n    this.#listeners.add(listener);\n    return () => {\n      this.#listeners.delete(listener);\n    };\n  }\n}\n\n/**\n * The queue a snackbar is shown from. Make one where the app can reach it —\n * a module of its own is the usual place — mount `Snackbar` once with it,\n * and call `add` from anywhere.\n *\n * ```ts\n * const messages = new Snackbar.Queue()\n * messages.add('Label', { action: { label: 'Undo', onPress: undo } })\n * ```\n *\n * It wraps React Aria's toast queue rather than exposing it, which is what\n * keeps that API's `UNSTABLE_` name out of a consumer's code.\n */\nclass SnackbarQueue {\n  /**\n   * React Aria's queue, which `Snackbar` subscribes to. Not part of the\n   * package's API — read it and an upstream release may break the call site.\n   */\n  readonly rac: RACToastQueue<SnackbarMessage>;\n\n  // The snackbars not yet closed, each with its `onClose`, which `add` and\n  // `clear` close. Kept here because React Aria keeps its own list private,\n  // and its own `clear` empties that list without running a single `onClose`.\n  readonly #open = new Map<string, (() => void) | undefined>();\n\n  // `rac` as the class it is, which `rac` itself is not declared as so that\n  // the subclass stays out of the package's API.\n  readonly #toasts: FadingToastQueue;\n  constructor() {\n    this.#toasts = new FadingToastQueue(key => {\n      this.#closing(key);\n    });\n    this.rac = this.#toasts;\n  }\n\n  /**\n   * Shows a message in place of the one on screen, and returns the key that\n   * closes it. The message it replaces is closed, so its `onClose` runs, and\n   * it does not come back.\n   */\n  add(message: ReactNode, options: SnackbarOptions = {}) {\n    const {\n      action,\n      onClose,\n      showCloseButton = false,\n      timeout\n    } = options;\n    this.clear();\n    const key = this.#toasts.add({\n      action,\n      message,\n      showCloseButton\n    }, {\n      timeout: readableTimeout(timeout ?? (action === undefined ? MESSAGE_MS : UNTIL_CLOSED))\n    });\n    this.#open.set(key, onClose);\n    return key;\n  }\n\n  /** Closes the snackbar on screen, running its `onClose`. */\n  clear() {\n    // Each close runs that message's `onClose`, which deletes its own key\n    // from the map — the entry being visited, which a Map allows.\n    for (const key of this.#open.keys()) {\n      this.#toasts.close(key);\n    }\n  }\n\n  /** Closes one snackbar, by the key `add` returned. */\n  close(key: string) {\n    this.#toasts.close(key);\n  }\n\n  // A snackbar starting to close, however it was closed — its timer runs\n  // inside React Aria's queue, past this one — leaves the open map and runs\n  // its `onClose` on the way out.\n  #closing(key: string) {\n    const onClose = this.#open.get(key);\n    if (this.#open.delete(key)) {\n      onClose?.();\n    }\n  }\n}\n\n// The three handlers the snackbar hands to something below it, each built by\n// a call rather than written inline at the prop, which is what react-perf's\n// no-new-function-as-prop is after; the React Compiler memoises the result on\n// its inputs.\nfunction actionPress(action: SnackbarAction, close: () => void) {\n  return () => {\n    action.onPress();\n    close();\n  };\n}\nfunction closeToast(queue: SnackbarQueue, key: string) {\n  return () => {\n    queue.close(key);\n  };\n}\n\n// A control's classes, from its own render state — see `controlFocused`.\nfunction controlClassName(style: stylex.StyleXStyles) {\n  return (state: {\n    isFocusVisible: boolean;\n    isHovered: boolean;\n    isPressed: boolean;\n  }) => stylex.props(styles.control, style, state.isHovered && styles.controlHovered, state.isFocusVisible && styles.controlFocused, state.isPressed && styles.controlPressed).className ?? '';\n}\n\n// A timer the reader has time to read by — see the durations at the top of\n// this file. Only a timer is held to the minimum: React Aria runs none for `0`\n// or below, which keep the message until something closes it.\nfunction readableTimeout(timeout: number) {\n  return timeout > UNTIL_CLOSED ? Math.max(timeout, MINIMUM_MS) : timeout;\n}\n\n/**\n * A brief message at the bottom of the screen, with an optional action. Mount\n * one of these with a `Snackbar.Queue`, and call the queue's `add` to show a\n * message from anywhere.\n *\n * ```tsx\n * const messages = new Snackbar.Queue()\n *\n * <Snackbar queue={messages} />\n * ```\n *\n * The region is portalled to the end of `<body>` and renders nothing while\n * the queue is empty. It is one region rather than one per message, so mount\n * it once, near the root.\n *\n * The call site's `className` and `style` land on that region, which is the\n * element a layout positions.\n *\n * While a full-screen `Dialog` or a `Sheet` with a footer is open, the region\n * rises to sit above those actions rather than over them, since they share\n * the bottom edge of the window and the snackbar is drawn above both.\n */\nfunction Snackbar({\n  closeLabel,\n  queue,\n  ...props\n}: RefAttributes<HTMLDivElement> & SnackbarProps) {\n  const clearance = useBottomEdgeClearance();\n  return <RACToastRegion<SnackbarMessage> queue={queue.rac} {...props} {...mergeStatefulStyles(stylex.props(styles.region, clearance > 0 && styles.risen(`${clearance}px`)), props)}>\n      {snackbarContent(queue, closeLabel)}\n    </RACToastRegion>;\n}\n\n/**\n * One of the snackbar's two controls. React Aria's `Button` rather than the\n * library's, for the colour reason in the comment at the top of this file;\n * the ripple and the state layers are the same ones every other control\n * here draws, over `currentColor`.\n */\nfunction SnackbarButton({\n  children,\n  style,\n  ...props\n}: {\n  'aria-label'?: string;\n  children: ReactNode;\n  onPress?: () => void;\n  slot?: string;\n  style: stylex.StyleXStyles;\n}) {\n  const ripple = useRipple<FocusableElement>();\n  return <RACButton {...ripple.handlers} {...props} className={controlClassName(style)}>\n      {children}\n      {ripple.surface}\n    </RACButton>;\n}\nfunction snackbarContent(queue: SnackbarQueue, closeLabel: string | undefined) {\n  return ({\n    toast\n  }: {\n    toast: SnackbarToastItem;\n  }) => <SnackbarToast close={closeToast(queue, toast.key)} closeLabel={closeLabel} queue={queue} toast={toast} />;\n}\n\n/**\n * The action, the close button, or nothing, after the message — together, so\n * they move beneath it together.\n */\nfunction SnackbarControls({\n  action,\n  close,\n  closeLabel,\n  fading,\n  showCloseButton\n}: {\n  action: SnackbarAction | undefined;\n  close: () => void;\n  closeLabel: string | undefined;\n  fading: boolean;\n  showCloseButton: boolean;\n}) {\n  if (action === undefined && !showCloseButton) {\n    return null;\n  }\n  return <div className=\"x6s0dn4 x9f619 x78zum5 x2lah0s xvc5jky\">\n      {action === undefined ? null :\n    // Nothing on a fading strip answers a press: its action has already\n    // run, and an Undo pressed twice would undo twice.\n    <SnackbarButton onPress={fading ? undefined : actionPress(action, close)} style={styles.action}>\n          {action.label}\n        </SnackbarButton>}\n      {showCloseButton ? <SnackbarButton aria-label={closeLabel} slot=\"close\" style={styles.close}>\n          <CloseGlyph className=\"xxk0z11 xvy4d1p\" />\n        </SnackbarButton> : null}\n    </div>;\n}\n\n/** One snackbar: its message, then whatever sits after it. */\nfunction SnackbarToast({\n  close,\n  closeLabel,\n  queue,\n  toast\n}: {\n  close: () => void;\n  closeLabel: string | undefined;\n  queue: SnackbarQueue;\n  toast: SnackbarToastItem;\n}) {\n  const {\n    action,\n    message,\n    showCloseButton\n  } = toast.content;\n  const fading = useFading(queue, toast.key);\n  return <RACToast toast={toast} {...{\n    0: {\n      className: \"x6s0dn4 x1n1nwrg x1u6grsq x1dwmuk9 x16dv9tl x1c5gpgi x1w1tqly x1tfhd1 xx61lck x13rsnn2 x1udv5rz x9f619 x78zum5 x1a02dak xh8yej3 x1x1rfll xlx31pv x1dry9sr xeuugli xuq8xha x1ulcdur xr2mjdv x9v5kkp x1t137rt x1de99jn xt970qd xn60lsn x67bb7w\"\n    },\n    1: {\n      className: \"x6s0dn4 x1c5gpgi x1w1tqly x1tfhd1 xx61lck x13rsnn2 x1udv5rz x9f619 x78zum5 x1a02dak xh8yej3 x1x1rfll xlx31pv x1dry9sr xeuugli xuq8xha x1ulcdur xr2mjdv x9v5kkp x1t137rt x1de99jn xt970qd xn60lsn x1vhuh8u x1u6grsq x10e4vud xxp0q0x xi22y15 x47corl\"\n    }\n  }[!!fading << 0]}>\n      <RACToastContent className=\"x9f619 x1girmi0 x4pfjvb x1iyjqo2 xpo2rfv x193rfdd x1hews6w xkjl1po xn43zvd xv61bfh xz158ff xeuugli xj0a0fe xxlmvz2\">\n        <Text slot=\"title\">{message}</Text>\n      </RACToastContent>\n      <SnackbarControls action={action} close={close} closeLabel={closeLabel} fading={fading} showCloseButton={showCloseButton} />\n    </RACToast>;\n}\n\n/**\n * Whether a snackbar is fading out of its queue. `rac` is always the queue\n * that fades, but is declared as React Aria's, so it is narrowed back here.\n */\nfunction useFading(queue: SnackbarQueue, key: string) {\n  const toasts = queue.rac instanceof FadingToastQueue ? queue.rac : undefined;\n  return useSyncExternalStore(listener => toasts?.subscribeToFading(listener) ?? (() => {}), () => toasts?.isFading(key) ?? false);\n}\nSnackbar.Queue = SnackbarQueue;\n\n// The queue is reached as `Snackbar.Queue` rather than exported beside the\n// component: this file would otherwise export something that is not a\n// component, which is what turns fast refresh off for it.\nexport type { SnackbarAction, SnackbarMessage, SnackbarOptions, SnackbarProps, SnackbarQueue, ToastRegionRenderProps as SnackbarRegionRenderProps };\nexport default Snackbar;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["c","_c","ReactNode","RefAttributes","FocusableElement","ToastRegionProps","RACToastRegionProps","ToastRegionRenderProps","stylex","useSyncExternalStore","Button","RACButton","UNSTABLE_Toast","RACToast","UNSTABLE_ToastContent","RACToastContent","UNSTABLE_ToastQueue","RACToastQueue","UNSTABLE_ToastRegion","RACToastRegion","Text","CloseGlyph","useBottomEdgeClearance","useRipple","layers","mergeStatefulStyles","colors","motion","radii","shadows","sizing","spacing","stateLayerOpacity","typography","MESSAGE_MS","MINIMUM_MS","UNTIL_CLOSED","EXIT_MS","WIDE","rise","fadeOut","FORCED_COLORS","TARGET_SIZE","_temp","krVfgx","kGO01o","styles","action","kgeoSG","kGOzcv","kpsdNU","kEoFBp","kMwMTN","kMv6JI","kGuDYH","k63SB2","kb6lSQ","kLWn49","kAzted","k8WAf4","kg3NbH","$$css","close","kZKoxP","kzqmXN","kmVPX3","control","kGNEyG","kWkggS","kaIpWk","kMzoRj","kB7OPa","kkrTdU","k1xSpc","kmuXW","kjj79g","kjBf7l","kInvED","k3XXqK","kMeerF","kVAEAm","controlFocused","controlHovered","controlPressed","region","kXwgrk","kOIVth","kkqhue","kLKAdn","kE3dHu","kpe85a","kfzvcC","kY2c9j","risen","clearance","val","undefined","SnackbarAction","label","onPress","SnackbarMessage","message","showCloseButton","SnackbarOptions","onClose","timeout","SnackbarProps","className","closeLabel","queue","SnackbarQueue","style","Omit","SnackbarToastItem","FadingToastQueue","fading","Set","listeners","onClosing","key","constructor","maxVisibleToasts","add","setTimeout","delete","listener","isFading","has","subscribeToFading","rac","open","Map","toasts","closing","options","clear","readableTimeout","set","keys","#closing","get","actionPress","closeToast","controlClassName","StyleXStyles","state","isFocusVisible","isHovered","isPressed","props","Math","max","Snackbar","t0","$","T0","t1","t2","t3","snackbarContent","t4","SnackbarButton","children","ripple","handlers","surface","toast","SnackbarControls","SnackbarToast","content","useFading","Symbol","for","0","1","t5","_temp2","Queue","SnackbarRegionRenderProps","RACToastQueue","stylex.props","_c","props","RACToastRegion","RACButton","RACToastContent","RACToast"],"sources":["../../../src/components/snackbar/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode, RefAttributes } from 'react';\nimport type { FocusableElement, ToastRegionProps as RACToastRegionProps, ToastRegionRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { useSyncExternalStore } from 'react';\nimport { Button as RACButton, UNSTABLE_Toast as RACToast, UNSTABLE_ToastContent as RACToastContent, UNSTABLE_ToastQueue as RACToastQueue, UNSTABLE_ToastRegion as RACToastRegion, Text } from 'react-aria-components';\nimport { CloseGlyph } from '../../glyphs';\nimport { useBottomEdgeClearance } from '../../hooks/useBottomEdge';\nimport { useRipple } from '../../hooks/useRipple';\nimport '../../styles/layers.stylex';\nimport { layers } from '../../styles/layers.stylex';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, shadows, sizing, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\n\n// The snackbar page's brief message at the bottom of the screen, with an\n// optional action beside it and an optional close button after that. The\n// page's container is the inverse surface at a 4dp corner and elevation 3,\n// its supporting text is body-medium in inverse on surface, its action label\n// is inverse primary, and its close icon takes the supporting text's colour.\n// The measurements are the page's too: 8dp of margin from the edges of the\n// screen, 8dp of padding inside the container with another 8dp either side\n// of the message, 14dp above and below on a single line, and between 320 and\n// 576dp wide above the page's 600dp breakpoint — full width below it.\n//\n// One at a time. The page shows a single snackbar and replaces it rather\n// than stacking, so a message added while another is up closes that one —\n// its `onClose` runs — and takes its place. Nothing waits behind it: React\n// Aria's queue, left to itself, kept every message and showed the one it had\n// replaced again once the newer closed, so an Undo could come back long after\n// the thing it undid.\n//\n// React Aria's toast is the behaviour: the region is a landmark that holds\n// the message, moves focus into it for a keyboard, and pauses every timer\n// while it is hovered or focused, so a message never expires while it is\n// being read or acted on.\n//\n// Three things are decided here rather than taken from React Aria or from\n// the page.\n//\n// **The queue is ours, not React Aria's.** React Aria's toast is still\n// `UNSTABLE_`, and `SnackbarQueue` is what keeps that name out of a\n// consumer's code — an upstream rename is this file rather than every call\n// site. It wraps their queue, defaults it to one visible message, and takes\n// the message and its options as one call.\n//\n// **The action and the close button are drawn here rather than through\n// Button and IconButton.** The page colours them inverse primary and inverse\n// on surface, which no variant of either carries, and a colour pushed in\n// from outside through `className` is the merge hazard AGENTS.md describes:\n// StyleX decides between two atomic classes by their order in the compiled\n// stylesheet, not by the order they are applied. Both are React Aria's\n// `Button` with the same ripple and the same state layers, over\n// `currentColor` so each takes the colour the snackbar gives it.\n//\n// **There is no `container` prop.** Every other overlay here takes one,\n// because React Aria's `Modal` and `Popover` accept a portal container, and\n// `src/components/portal-container.test.tsx` is what keeps that true.\n// Its toast region does not: it reads a portal provider that\n// `react-aria-components` does not export, so the region always lands at the\n// end of `<body>`. An app that scopes its StyleX theme to a subtree has to\n// put the theme on `:root` for the snackbar to be drawn in it.\n\n// How long a message is shown when the call site names no `timeout`. The\n// specs page gives no duration, so these come from the snackbar's guidelines\n// and accessibility pages.\n//\n// A message alone leaves after five seconds. The pages allow four to ten, and\n// React Aria's toast docs set five as the least a reader should be given.\n//\n// A call site's own `timeout` is held to the pages' four. A shorter one is\n// lengthened to that, since a message gone in a second cannot be read, and the\n// web gives a reader no setting to slow it down with — the same reason the\n// paragraph below gives. `0` is left alone: it is no timer at all.\n//\n// A message with an action stays until the action is taken or something\n// closes it, as the pages ask of every actionable snackbar. No timer can know\n// how long a reader needs to act: a screen reader user hears the message\n// first and has to reach the region before the action is any use, and the\n// pause while the region is hovered or focused only starts once they have.\n// Android's snackbar can keep shorter defaults because the platform lengthens\n// them from each user's accessibility settings, and the web has no such\n// setting to read.\nconst MESSAGE_MS = 5000;\nconst MINIMUM_MS = 4000;\nconst UNTIL_CLOSED = 0;\n\n// How long a closing snackbar takes to fade, and so how long it stays in the\n// document once something has closed it: `durationShort2`, the token the fade\n// below runs for. A theme that lengthens that token has its fade cut short\n// here, since the queue cannot read a duration out of the stylesheet.\nconst EXIT_MS = 150;\n\n// Below the page's 600dp breakpoint the snackbar runs the width of the\n// screen; above it, it takes between 320 and 576.\nconst WIDE = '@media (min-width: 600px)';\n\n// The page's own is a fade, in and out. It rises a little as it arrives too,\n// which is what the page draws and what says the message came from the edge\n// of the screen rather than appearing over it. It leaves by the fade alone,\n// and quicker than it came, on the curve for something going away: once it is\n// closed there is nothing left on it to read.\nconst rise = \"x15b941j-B\";\nconst fadeOut = \"x1jn504y-B\";\n\n// Windows High Contrast and the rest of the forced-colours modes. Spelled\n// here rather than imported, for the reason src/field/styles.ts records: the\n// StyleX compiler resolves a constant across files only out of a `.stylex.ts`\n// module, and the generated one holds design tokens rather than queries.\nconst FORCED_COLORS = '@media (forced-colors: active)';\n\n// The least press area the action keeps, as Button's medium size does. A\n// literal rather than a token, for the reason Button's `TARGET_SIZE` gives: a\n// consumer resizing their controls should not shrink a floor the page states.\nconst TARGET_SIZE = '48px';\nconst _temp = {\n  krVfgx: \"xiicpxy\",\n  kGO01o: \"xqf7pud\",\n  \"$$css\": true\n};\nconst styles = {\n  action: {\n    kgeoSG: \"x1cpjm7i\",\n    kGOzcv: \"xun2zgk\",\n    kpsdNU: \"xm4btww\",\n    kEoFBp: \"x1hmns74\",\n    kMwMTN: \"x16bex6i\",\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    kAzted: \"x1cio8j0\",\n    k8WAf4: \"x1cmllll\",\n    kg3NbH: \"x18fpw6u\",\n    $$css: true\n  },\n  close: {\n    kZKoxP: \"xbg5kjn\",\n    kMwMTN: \"x1girmi0\",\n    kzqmXN: \"xoqf9c6\",\n    kmVPX3: \"x1717udv\",\n    $$css: true\n  },\n  control: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kaIpWk: \"x1dkaolv\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x3nfvp2\",\n    kmuXW: \"x2lah0s\",\n    kjj79g: \"xl56j7k\",\n    kjBf7l: \"x14ytart\",\n    kInvED: \"xr2mjdv\",\n    k3XXqK: \"x9v5kkp x1t137rt\",\n    kMeerF: \"x1de99jn\",\n    kVAEAm: \"x1n2onr6\",\n    $$css: true\n  },\n  controlFocused: {\n    kWkggS: \"x1mbb5iu\",\n    $$css: true\n  },\n  controlHovered: {\n    kWkggS: \"x930l3l\",\n    $$css: true\n  },\n  controlPressed: {\n    kWkggS: \"xsykwg8\",\n    $$css: true\n  },\n  region: {\n    kGNEyG: \"x6s0dn4\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kXwgrk: \"xdt5ytf\",\n    kOIVth: \"x126z3so\",\n    krVfgx: \"x1ey2m1c\",\n    kkqhue: \"x17y0mx6\",\n    k3XXqK: \"x1t137rt\",\n    kGO01o: \"x1u7mh7p\",\n    kLKAdn: \"xi7mcox\",\n    kE3dHu: \"xbpsoft\",\n    kpe85a: \"xq5vm52\",\n    kfzvcC: \"x47corl\",\n    kVAEAm: \"xixxii4\",\n    kY2c9j: \"x1bk8fjm\",\n    $$css: true\n  },\n  risen: (clearance: string) => [_temp, {\n    \"--x-insetBlockEnd\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(clearance)\n  }]\n};\ntype SnackbarAction = {\n  /** What the action says. The page gives it a single word where it can. */\n  label: string;\n  /** Run when the action is pressed, just before the snackbar closes. */\n  onPress: () => void;\n};\n\n/** What a snackbar carries: its message, and what may sit beside it. */\ntype SnackbarMessage = {\n  action: SnackbarAction | undefined;\n  message: ReactNode;\n  showCloseButton: boolean;\n};\ntype SnackbarOptions = {\n  /**\n   * A single action shown after the message. Pressing it runs `onPress` and\n   * closes the snackbar, which is what the page draws.\n   */\n  action?: SnackbarAction;\n  /**\n   * Run when the snackbar closes, however it was closed: by its timer, its\n   * action or close button, `close`, `clear`, or a newer message added in its\n   * place. It runs as the snackbar starts to fade out, not once it has gone.\n   */\n  onClose?: () => void;\n  /**\n   * Whether a close button is shown at the end. The page draws one for a\n   * message a reader may want out of the way before it expires.\n   *\n   * Named for what it draws rather than `isDismissable`, which on `Sheet`,\n   * `Dialog` and React Aria's modals is whether a press outside them closes\n   * them — a snackbar has no outside to press.\n   * @default false\n   */\n  showCloseButton?: boolean;\n  /**\n   * How long the snackbar is shown, in milliseconds. Defaults to five seconds\n   * for a message alone. A message with an action defaults to `0` and stays\n   * until the action is taken or something closes it, as Material Design asks\n   * of an actionable snackbar, since a reader may need longer to reach the\n   * action than any timer allows. The timer is paused while the region is\n   * hovered or focused, so a message never expires while it is being read.\n   *\n   * A timer shorter than four seconds, the least Material Design allows, is\n   * lengthened to four, since a message gone sooner cannot be read.\n   *\n   * `0` is the page's indefinite length: the snackbar stays until something\n   * closes it. Give one of those an action or `showCloseButton`, or there is no\n   * way to be rid of it.\n   */\n  timeout?: number;\n};\ntype SnackbarProps = {\n  /**\n   * What a screen reader calls the region holding the snackbar. Left out,\n   * React Aria names the region itself: a count of the messages it holds, in\n   * the reader's own locale — \"1 notification.\" in English, and one of some\n   * thirty languages otherwise. Pass a name only to replace that, and pass a\n   * translated one, since whatever is passed is read as written.\n   */\n  'aria-label'?: string;\n  /** A function may compute the class from the region's render state. */\n  className?: RACToastRegionProps<SnackbarMessage>['className'];\n  /**\n   * What a screen reader calls the button that dismisses a snackbar. It sits\n   * here rather than on a message's own options because it does not vary by\n   * message, so putting it there would make every `add` call repeat it. Left\n   * out, React Aria names it in the reader's locale — \"Close\" in English.\n   */\n  closeLabel?: string;\n  /** The queue the region shows messages from. */\n  queue: SnackbarQueue;\n  /** A function may compute the style from the region's render state. */\n  style?: RACToastRegionProps<SnackbarMessage>['style'];\n} & Omit<RACToastRegionProps<SnackbarMessage>, 'aria-label' | 'children' | 'className' | 'queue' | 'style'>;\n\n// One entry of the queue, as React Aria hands it to the region's render\n// function. Taken from its render state rather than imported from\n// `react-stately`, which this package does not depend on.\ntype SnackbarToastItem = ToastRegionRenderProps<SnackbarMessage>['visibleToasts'][number];\n\n/**\n * React Aria's queue, made to keep a closing snackbar on screen while it\n * fades. React Aria drops a toast from its list the moment it closes, and the\n * region unmounts with its last toast, so a closing strip has no state of its\n * own to be drawn in. Every close reaches `close` here — React Aria's timer and\n * its close button call it on the queue they were handed, as `SnackbarQueue`\n * does — so this one override covers all of them: the strip is marked as\n * fading, and React Aria closes it once the fade has run.\n */\nclass FadingToastQueue extends RACToastQueue<SnackbarMessage> {\n  // The strips fading out.\n  readonly #fading = new Set<string>();\n  readonly #listeners = new Set<() => void>();\n\n  // Run as a strip starts to close — see `SnackbarQueue`.\n  readonly #onClosing: (key: string) => void;\n  constructor(onClosing: (key: string) => void) {\n    // One at a time, which is what the page shows. React Aria shows the\n    // newest, so a message added while another is up or fading takes its\n    // place at once, and the older one runs out its fade unseen.\n    super({\n      maxVisibleToasts: 1\n    });\n    this.#onClosing = onClosing;\n  }\n\n  /** Starts a toast fading, and closes it once the fade has run. */\n  override close(key: string) {\n    this.#onClosing(key);\n    this.#fading.add(key);\n    setTimeout(() => {\n      this.#fading.delete(key);\n      super.close(key);\n    }, EXIT_MS);\n    for (const listener of this.#listeners) {\n      listener();\n    }\n  }\n\n  /** Whether a toast is fading out. */\n  isFading(key: string) {\n    return this.#fading.has(key);\n  }\n\n  /** Calls `listener` whenever a toast starts to fade. */\n  subscribeToFading(listener: () => void) {\n    this.#listeners.add(listener);\n    return () => {\n      this.#listeners.delete(listener);\n    };\n  }\n}\n\n/**\n * The queue a snackbar is shown from. Make one where the app can reach it —\n * a module of its own is the usual place — mount `Snackbar` once with it,\n * and call `add` from anywhere.\n *\n * ```ts\n * const messages = new Snackbar.Queue()\n * messages.add('Label', { action: { label: 'Undo', onPress: undo } })\n * ```\n *\n * It wraps React Aria's toast queue rather than exposing it, which is what\n * keeps that API's `UNSTABLE_` name out of a consumer's code.\n */\nclass SnackbarQueue {\n  /**\n   * React Aria's queue, which `Snackbar` subscribes to. Not part of the\n   * package's API — read it and an upstream release may break the call site.\n   */\n  readonly rac: RACToastQueue<SnackbarMessage>;\n\n  // The snackbars not yet closed, each with its `onClose`, which `add` and\n  // `clear` close. Kept here because React Aria keeps its own list private,\n  // and its own `clear` empties that list without running a single `onClose`.\n  readonly #open = new Map<string, (() => void) | undefined>();\n\n  // `rac` as the class it is, which `rac` itself is not declared as so that\n  // the subclass stays out of the package's API.\n  readonly #toasts: FadingToastQueue;\n  constructor() {\n    this.#toasts = new FadingToastQueue(key => {\n      this.#closing(key);\n    });\n    this.rac = this.#toasts;\n  }\n\n  /**\n   * Shows a message in place of the one on screen, and returns the key that\n   * closes it. The message it replaces is closed, so its `onClose` runs, and\n   * it does not come back.\n   */\n  add(message: ReactNode, options: SnackbarOptions = {}) {\n    const {\n      action,\n      onClose,\n      showCloseButton = false,\n      timeout\n    } = options;\n    this.clear();\n    const key = this.#toasts.add({\n      action,\n      message,\n      showCloseButton\n    }, {\n      timeout: readableTimeout(timeout ?? (action === undefined ? MESSAGE_MS : UNTIL_CLOSED))\n    });\n    this.#open.set(key, onClose);\n    return key;\n  }\n\n  /** Closes the snackbar on screen, running its `onClose`. */\n  clear() {\n    // Each close runs that message's `onClose`, which deletes its own key\n    // from the map — the entry being visited, which a Map allows.\n    for (const key of this.#open.keys()) {\n      this.#toasts.close(key);\n    }\n  }\n\n  /** Closes one snackbar, by the key `add` returned. */\n  close(key: string) {\n    this.#toasts.close(key);\n  }\n\n  // A snackbar starting to close, however it was closed — its timer runs\n  // inside React Aria's queue, past this one — leaves the open map and runs\n  // its `onClose` on the way out.\n  #closing(key: string) {\n    const onClose = this.#open.get(key);\n    if (this.#open.delete(key)) {\n      onClose?.();\n    }\n  }\n}\n\n// The three handlers the snackbar hands to something below it, each built by\n// a call rather than written inline at the prop, which is what react-perf's\n// no-new-function-as-prop is after; the React Compiler memoises the result on\n// its inputs.\nfunction actionPress(action: SnackbarAction, close: () => void) {\n  return () => {\n    action.onPress();\n    close();\n  };\n}\nfunction closeToast(queue: SnackbarQueue, key: string) {\n  return () => {\n    queue.close(key);\n  };\n}\n\n// A control's classes, from its own render state — see `controlFocused`.\nfunction controlClassName(style: stylex.StyleXStyles) {\n  return (state: {\n    isFocusVisible: boolean;\n    isHovered: boolean;\n    isPressed: boolean;\n  }) => stylex.props(styles.control, style, state.isHovered && styles.controlHovered, state.isFocusVisible && styles.controlFocused, state.isPressed && styles.controlPressed).className ?? '';\n}\n\n// A timer the reader has time to read by — see the durations at the top of\n// this file. Only a timer is held to the minimum: React Aria runs none for `0`\n// or below, which keep the message until something closes it.\nfunction readableTimeout(timeout: number) {\n  return timeout > UNTIL_CLOSED ? Math.max(timeout, MINIMUM_MS) : timeout;\n}\n\n/**\n * A brief message at the bottom of the screen, with an optional action. Mount\n * one of these with a `Snackbar.Queue`, and call the queue's `add` to show a\n * message from anywhere.\n *\n * ```tsx\n * const messages = new Snackbar.Queue()\n *\n * <Snackbar queue={messages} />\n * ```\n *\n * The region is portalled to the end of `<body>` and renders nothing while\n * the queue is empty. It is one region rather than one per message, so mount\n * it once, near the root.\n *\n * The call site's `className` and `style` land on that region, which is the\n * element a layout positions.\n *\n * While a full-screen `Dialog` or a `Sheet` with a footer is open, the region\n * rises to sit above those actions rather than over them, since they share\n * the bottom edge of the window and the snackbar is drawn above both.\n *\n * While a `Dialog` or a `Sheet` is open, Tab stays inside it and never\n * reaches the snackbar. F6 does: React Aria moves focus between landmarks\n * with it, so it lands on the region, Tab then reaches the message and its\n * action, and tabbing on past the last of them leads back into the dialog. A\n * message with an action stays until it is answered, so a keyboard user has\n * the time that route takes.\n */\nfunction Snackbar({\n  closeLabel,\n  queue,\n  ...props\n}: RefAttributes<HTMLDivElement> & SnackbarProps) {\n  const clearance = useBottomEdgeClearance();\n  return <RACToastRegion<SnackbarMessage> queue={queue.rac} {...props} {...mergeStatefulStyles(stylex.props(styles.region, clearance > 0 && styles.risen(`${clearance}px`)), props)}>\n      {snackbarContent(queue, closeLabel)}\n    </RACToastRegion>;\n}\n\n/**\n * One of the snackbar's two controls. React Aria's `Button` rather than the\n * library's, for the colour reason in the comment at the top of this file;\n * the ripple and the state layers are the same ones every other control\n * here draws, over `currentColor`.\n */\nfunction SnackbarButton({\n  children,\n  style,\n  ...props\n}: {\n  'aria-label'?: string;\n  children: ReactNode;\n  onPress?: () => void;\n  slot?: string;\n  style: stylex.StyleXStyles;\n}) {\n  const ripple = useRipple<FocusableElement>();\n  return <RACButton {...ripple.handlers} {...props} className={controlClassName(style)}>\n      {children}\n      {ripple.surface}\n    </RACButton>;\n}\nfunction snackbarContent(queue: SnackbarQueue, closeLabel: string | undefined) {\n  return ({\n    toast\n  }: {\n    toast: SnackbarToastItem;\n  }) => <SnackbarToast close={closeToast(queue, toast.key)} closeLabel={closeLabel} queue={queue} toast={toast} />;\n}\n\n/**\n * The action, the close button, or nothing, after the message — together, so\n * they move beneath it together.\n */\nfunction SnackbarControls({\n  action,\n  close,\n  closeLabel,\n  fading,\n  showCloseButton\n}: {\n  action: SnackbarAction | undefined;\n  close: () => void;\n  closeLabel: string | undefined;\n  fading: boolean;\n  showCloseButton: boolean;\n}) {\n  if (action === undefined && !showCloseButton) {\n    return null;\n  }\n  return <div className=\"x6s0dn4 x9f619 x78zum5 x2lah0s xvc5jky\">\n      {action === undefined ? null :\n    // Nothing on a fading strip answers a press: its action has already\n    // run, and an Undo pressed twice would undo twice.\n    <SnackbarButton onPress={fading ? undefined : actionPress(action, close)} style={styles.action}>\n          {action.label}\n        </SnackbarButton>}\n      {showCloseButton ? <SnackbarButton aria-label={closeLabel} slot=\"close\" style={styles.close}>\n          <CloseGlyph className=\"xxk0z11 xvy4d1p\" />\n        </SnackbarButton> : null}\n    </div>;\n}\n\n/** One snackbar: its message, then whatever sits after it. */\nfunction SnackbarToast({\n  close,\n  closeLabel,\n  queue,\n  toast\n}: {\n  close: () => void;\n  closeLabel: string | undefined;\n  queue: SnackbarQueue;\n  toast: SnackbarToastItem;\n}) {\n  const {\n    action,\n    message,\n    showCloseButton\n  } = toast.content;\n  const fading = useFading(queue, toast.key);\n  return <RACToast toast={toast} {...{\n    0: {\n      className: \"x6s0dn4 x1n1nwrg x1u6grsq x1dwmuk9 x16dv9tl x1c5gpgi x1w1tqly x1tfhd1 xx61lck x13rsnn2 x1udv5rz x9f619 x78zum5 x1a02dak xh8yej3 x1x1rfll xlx31pv x1dry9sr xeuugli xuq8xha x1ulcdur xr2mjdv x9v5kkp x1t137rt x1de99jn xt970qd xn60lsn x67bb7w\"\n    },\n    1: {\n      className: \"x6s0dn4 x1c5gpgi x1w1tqly x1tfhd1 xx61lck x13rsnn2 x1udv5rz x9f619 x78zum5 x1a02dak xh8yej3 x1x1rfll xlx31pv x1dry9sr xeuugli xuq8xha x1ulcdur xr2mjdv x9v5kkp x1t137rt x1de99jn xt970qd xn60lsn x1vhuh8u x1u6grsq x10e4vud xxp0q0x xi22y15 x47corl\"\n    }\n  }[!!fading << 0]}>\n      <RACToastContent className=\"x9f619 x1girmi0 x4pfjvb x1iyjqo2 xpo2rfv x193rfdd x1hews6w xkjl1po xn43zvd xv61bfh xz158ff xeuugli xj0a0fe xxlmvz2\">\n        <Text slot=\"title\">{message}</Text>\n      </RACToastContent>\n      <SnackbarControls action={action} close={close} closeLabel={closeLabel} fading={fading} showCloseButton={showCloseButton} />\n    </RACToast>;\n}\n\n/**\n * Whether a snackbar is fading out of its queue. `rac` is always the queue\n * that fades, but is declared as React Aria's, so it is narrowed back here.\n */\nfunction useFading(queue: SnackbarQueue, key: string) {\n  const toasts = queue.rac instanceof FadingToastQueue ? queue.rac : undefined;\n  return useSyncExternalStore(listener => toasts?.subscribeToFading(listener) ?? (() => {}), () => toasts?.isFading(key) ?? false);\n}\nSnackbar.Queue = SnackbarQueue;\n\n// The queue is reached as `Snackbar.Queue` rather than exported beside the\n// component: this file would otherwise export something that is not a\n// component, which is what turns fast refresh off for it.\nexport type { SnackbarAction, SnackbarMessage, SnackbarOptions, SnackbarProps, SnackbarQueue, ToastRegionRenderProps as SnackbarRegionRenderProps };\nexport default Snackbar;"],"mappings":"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"}

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

@@ -5,12 +5,16 @@ type StackGap = 'lg' | 'md' | 'none' | 'sm' | 'xl' | 'xs' | 'xxl' | 'xxs' | 'xxx
 type StackJustify = 'around' | 'between' | 'center' | 'end' | 'start';
 type StackProps = {
   /**
-   * How the children line up across the stack: down the inline axis of a
-   * column, down the block axis of a row. Left unset, they stretch, which is
+   * How the children line up across the stack: along the inline axis of a
+   * column, along the block axis of a row. Left unset, they stretch, which is
    * what makes every card in a column the same width.
    *
    * `start` is what an inline-sized child needs in a column — a Tag or a
-   * Chip spans the whole width otherwise.
+   * Chip spans the whole width otherwise. `center` is what a row of controls
+   * usually wants: stretched, every button grows to the tallest one, so a
+   * label wrapping onto a second line makes its neighbours taller too.
+   * `baseline` lines the children up on their first line of text, and only
+   * means something in a row; in a column it places them as `start` does.
    */
   align?: StackAlign;
   /**
@@ -36,8 +40,10 @@ type StackProps = {
    */
   justify?: StackJustify;
   /**
-   * Lets a row wrap onto further lines rather than overflowing. Has no effect
-   * on a column, which has as many lines as it has children.
+   * Lets the children wrap onto further lines rather than overflowing. A row
+   * wraps once its children are wider than it is, and the gap then spaces
+   * the lines as well as the children. A column wraps only when the stack is
+   * given a fixed height, and then flows into further columns.
    * @default false
    */
   wrap?: boolean;
@@ -59,6 +65,16 @@ type StackProps = {
  * instead. A `render` function returns an element the stack cannot see
  * before it renders, so a list returned from one wants the role written on
  * it.
+ *
+ * ```tsx
+ * <Stack gap="sm" render={<ul />}>
+ *   <li>First item</li>
+ *   <li>Second item</li>
+ *   <li>Third item</li>
+ * </Stack>
+ * ```
+ *
+ * That renders a `<ul role="list">` with its items spaced by `sm`.
  */
 declare function Stack({ align, direction, gap, justify, render, wrap, ...props }: StackProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 //#endregion

package/dist/components/stack/index.js

@@ -129,6 +129,16 @@ function listRole(render) {
 * instead. A `render` function returns an element the stack cannot see
 * before it renders, so a list returned from one wants the role written on
 * it.
+*
+* ```tsx
+* <Stack gap="sm" render={<ul />}>
+*   <li>First item</li>
+*   <li>Second item</li>
+*   <li>Third item</li>
+* </Stack>
+* ```
+*
+* That renders a `<ul role="list">` with its items spaced by `sm`.
 */
 function Stack(t0) {
 	const $ = c(17);

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","stylex","isValidElement","RenderComponentProps","useRender","mergeStyles","spacing","alignments","baseline","kGNEyG","$$css","center","end","start","stretch","gaps","lg","kOIVth","md","none","sm","xl","xs","xxl","xxs","xxxl","justifications","around","kjj79g","between","styles","base","kB7OPa","k1xSpc","kH6xsr","kogj98","kmVPX3","column","kXwgrk","row","wrap","kwnvtZ","StackAlign","StackGap","StackJustify","StackProps","align","direction","gap","justify","listRole","render","type","undefined","Stack","t0","$","t1","t2","t3","t4","t5","t6","t7","t8","t9","props","role","defaultTagName","_c","props","stylex.props"],"sources":["../../../src/components/stack/index.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { isValidElement } from 'react';\nimport type { RenderComponentProps } from '../../render/useRender';\nimport { useRender } from '../../render/useRender';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { spacing } from '../../tokens/design.tokens.stylex';\n\n// Short names rather than the CSS values they map to, so a call site reads\n// `align=\"start\"` instead of `align=\"flex-start\"`. A lookup is unavoidable\n// either way — `alignItems` takes `flex-start` and `justifyContent` takes\n// `space-between`, neither of which is a word anyone wants in a prop.\n//\n// No Material Design page draws a stack. Its gaps are the spacing tokens,\n// the 4dp grid the layout pages space elements on, and `xl` is their 24dp\n// spacer between panes.\nconst alignments = {\n  baseline: {\n    kGNEyG: \"x1pha0wt\",\n    $$css: true\n  },\n  center: {\n    kGNEyG: \"x6s0dn4\",\n    $$css: true\n  },\n  end: {\n    kGNEyG: \"xuk3077\",\n    $$css: true\n  },\n  start: {\n    kGNEyG: \"x1cy8zhl\",\n    $$css: true\n  },\n  stretch: {\n    kGNEyG: \"x1qjc9v5\",\n    $$css: true\n  }\n};\n\n// One key per step of the spacing scale, named exactly as the token group\n// names it, so `gaps[gap]` indexes straight off the prop with no lookup table\n// to keep in sync — the same arrangement Text's type scale uses.\n//\n// `none` is the one key with no token behind it, and deliberately so: zero is\n// the absence of a spacing decision rather than a step of the scale, so there\n// is nothing for the scale to name. It exists because a stack that only wants\n// the direction and the alignment is otherwise a plain flex container written\n// out by hand.\nconst gaps = {\n  lg: {\n    kOIVth: \"xxj4525\",\n    $$css: true\n  },\n  md: {\n    kOIVth: \"x1gka490\",\n    $$css: true\n  },\n  none: {\n    kOIVth: \"xxhr3t\",\n    $$css: true\n  },\n  sm: {\n    kOIVth: \"x126z3so\",\n    $$css: true\n  },\n  xl: {\n    kOIVth: \"xj2l1yv\",\n    $$css: true\n  },\n  xs: {\n    kOIVth: \"xzoy561\",\n    $$css: true\n  },\n  xxl: {\n    kOIVth: \"xghv2kt\",\n    $$css: true\n  },\n  xxs: {\n    kOIVth: \"x14qo01y\",\n    $$css: true\n  },\n  xxxl: {\n    kOIVth: \"xvm9ira\",\n    $$css: true\n  }\n};\nconst justifications = {\n  around: {\n    kjj79g: \"x1l1ennw\",\n    $$css: true\n  },\n  between: {\n    kjj79g: \"x1qughib\",\n    $$css: true\n  },\n  center: {\n    kjj79g: \"xl56j7k\",\n    $$css: true\n  },\n  end: {\n    kjj79g: \"x13a6bvl\",\n    $$css: true\n  },\n  start: {\n    kjj79g: \"x1nhvcw1\",\n    $$css: true\n  }\n};\n\n// `margin`, `padding` and `listStyleType` are the UA resets. A stack renders\n// a <div> by default, which has none of them, but `render` is how one becomes\n// a <ul>, and a list keeps a block margin above and below, an inline-start\n// padding and a marker on every item — a column 40px off its own gap, and\n// spaced from its neighbours by the UA rather than by whatever holds it.\n// Breadcrumbs clears the same three on the list it renders, and Text clears\n// the margin for the same reason.\n//\n// Clearing the markers costs a list its role in Safari, whose VoiceOver stops\n// announcing a list once its markers are gone, so a stack rendered as a <ul>\n// or an <ol> gives the role back itself — see `listRole`.\nconst styles = {\n  base: {\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kH6xsr: \"x3ct3a4\",\n    kogj98: \"x1ghz6dp\",\n    kmVPX3: \"x1717udv\",\n    $$css: true\n  },\n  column: {\n    kXwgrk: \"xdt5ytf\",\n    $$css: true\n  },\n  row: {\n    kXwgrk: \"x1q0g3np\",\n    $$css: true\n  },\n  wrap: {\n    kwnvtZ: \"x1a02dak\",\n    $$css: true\n  }\n};\ntype StackAlign = 'baseline' | 'center' | 'end' | 'start' | 'stretch';\ntype StackGap = 'lg' | 'md' | 'none' | 'sm' | 'xl' | 'xs' | 'xxl' | 'xxs' | 'xxxl';\ntype StackJustify = 'around' | 'between' | 'center' | 'end' | 'start';\ntype StackProps = {\n  /**\n   * How the children line up across the stack: down the inline axis of a\n   * column, down the block axis of a row. Left unset, they stretch, which is\n   * what makes every card in a column the same width.\n   *\n   * `start` is what an inline-sized child needs in a column — a Tag or a\n   * Chip spans the whole width otherwise.\n   */\n  align?: StackAlign;\n  /**\n   * Which way the children run.\n   * @default 'column'\n   */\n  direction?: 'column' | 'row';\n  /**\n   * The space between children, as a step of the spacing scale. `none` closes\n   * it entirely.\n   *\n   * Worth setting. The default is a middle step, and how much air a group of\n   * things wants is the one thing a stack cannot work out for itself.\n   * @default 'md'\n   */\n  gap?: StackGap;\n  /**\n   * How leftover space is distributed along the stack. Left unset, the\n   * children sit at the start and the space collects after them.\n   *\n   * `between` is the one that puts a headline at one end of a row and its\n   * actions at the other.\n   */\n  justify?: StackJustify;\n  /**\n   * Lets a row wrap onto further lines rather than overflowing. Has no effect\n   * on a column, which has as many lines as it has children.\n   * @default false\n   */\n  wrap?: boolean;\n} & RenderComponentProps<'div'>;\n\n// The role a list rendered through an element form of `render` is given\n// back, since the stack cleared the markers that carried it. Put under the\n// call site's props, and under the element's own as `useRender` merges them,\n// so a `role` written on either wins.\nfunction listRole(render: StackProps['render']) {\n  return isValidElement(render) && (render.type === 'ul' || render.type === 'ol') ? 'list' : undefined;\n}\n\n/**\n * A row or a column of children with one gap between them, taken from the\n * spacing scale.\n *\n * Layout only — it paints no surface and wraps no child, so each child is a\n * flex item exactly as it was written. It is the answer to spacing a group of\n * things, which is why no component here carries a margin of its own: the\n * space between two things belongs to whatever holds both of them.\n *\n * `render` swaps the element, for a stack that should be a `<ul>`, a `<nav>`,\n * or a `<section>` rather than a `<div>`. A list comes without its UA margin,\n * padding and markers, and with `role=\"list\"`: Safari's VoiceOver stops\n * announcing a list once its markers are gone, and the role puts it back. A\n * `role` the call site writes, on the stack or on the element, is kept\n * instead. A `render` function returns an element the stack cannot see\n * before it renders, so a list returned from one wants the role written on\n * it.\n */\nfunction Stack({\n  align,\n  direction = 'column',\n  gap = 'md',\n  justify,\n  render,\n  wrap = false,\n  ...props\n}: StackProps) {\n  return useRender({\n    defaultTagName: 'div',\n    props: {\n      role: listRole(render),\n      ...props,\n      ...mergeStyles(stylex.props(styles.base, styles[direction], gaps[gap], align !== undefined && alignments[align], justify !== undefined && justifications[justify], wrap && styles.wrap), props)\n    },\n    render\n  });\n}\nexport type { StackAlign, StackGap, StackJustify, StackProps };\nexport default Stack;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["c","_c","stylex","isValidElement","RenderComponentProps","useRender","mergeStyles","spacing","alignments","baseline","kGNEyG","$$css","center","end","start","stretch","gaps","lg","kOIVth","md","none","sm","xl","xs","xxl","xxs","xxxl","justifications","around","kjj79g","between","styles","base","kB7OPa","k1xSpc","kH6xsr","kogj98","kmVPX3","column","kXwgrk","row","wrap","kwnvtZ","StackAlign","StackGap","StackJustify","StackProps","align","direction","gap","justify","listRole","render","type","undefined","Stack","t0","$","t1","t2","t3","t4","t5","t6","t7","t8","t9","props","role","defaultTagName","_c","props","stylex.props"],"sources":["../../../src/components/stack/index.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { isValidElement } from 'react';\nimport type { RenderComponentProps } from '../../render/useRender';\nimport { useRender } from '../../render/useRender';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { spacing } from '../../tokens/design.tokens.stylex';\n\n// Short names rather than the CSS values they map to, so a call site reads\n// `align=\"start\"` instead of `align=\"flex-start\"`. A lookup is unavoidable\n// either way — `alignItems` takes `flex-start` and `justifyContent` takes\n// `space-between`, neither of which is a word anyone wants in a prop.\n//\n// No Material Design page draws a stack. Its gaps are the spacing tokens,\n// the 4dp grid the layout pages space elements on, and `xl` is their 24dp\n// spacer between panes.\nconst alignments = {\n  baseline: {\n    kGNEyG: \"x1pha0wt\",\n    $$css: true\n  },\n  center: {\n    kGNEyG: \"x6s0dn4\",\n    $$css: true\n  },\n  end: {\n    kGNEyG: \"xuk3077\",\n    $$css: true\n  },\n  start: {\n    kGNEyG: \"x1cy8zhl\",\n    $$css: true\n  },\n  stretch: {\n    kGNEyG: \"x1qjc9v5\",\n    $$css: true\n  }\n};\n\n// One key per step of the spacing scale, named exactly as the token group\n// names it, so `gaps[gap]` indexes straight off the prop with no lookup table\n// to keep in sync — the same arrangement Text's type scale uses.\n//\n// `none` is the one key with no token behind it, and deliberately so: zero is\n// the absence of a spacing decision rather than a step of the scale, so there\n// is nothing for the scale to name. It exists because a stack that only wants\n// the direction and the alignment is otherwise a plain flex container written\n// out by hand.\nconst gaps = {\n  lg: {\n    kOIVth: \"xxj4525\",\n    $$css: true\n  },\n  md: {\n    kOIVth: \"x1gka490\",\n    $$css: true\n  },\n  none: {\n    kOIVth: \"xxhr3t\",\n    $$css: true\n  },\n  sm: {\n    kOIVth: \"x126z3so\",\n    $$css: true\n  },\n  xl: {\n    kOIVth: \"xj2l1yv\",\n    $$css: true\n  },\n  xs: {\n    kOIVth: \"xzoy561\",\n    $$css: true\n  },\n  xxl: {\n    kOIVth: \"xghv2kt\",\n    $$css: true\n  },\n  xxs: {\n    kOIVth: \"x14qo01y\",\n    $$css: true\n  },\n  xxxl: {\n    kOIVth: \"xvm9ira\",\n    $$css: true\n  }\n};\nconst justifications = {\n  around: {\n    kjj79g: \"x1l1ennw\",\n    $$css: true\n  },\n  between: {\n    kjj79g: \"x1qughib\",\n    $$css: true\n  },\n  center: {\n    kjj79g: \"xl56j7k\",\n    $$css: true\n  },\n  end: {\n    kjj79g: \"x13a6bvl\",\n    $$css: true\n  },\n  start: {\n    kjj79g: \"x1nhvcw1\",\n    $$css: true\n  }\n};\n\n// `margin`, `padding` and `listStyleType` are the UA resets. A stack renders\n// a <div> by default, which has none of them, but `render` is how one becomes\n// a <ul>, and a list keeps a block margin above and below, an inline-start\n// padding and a marker on every item — a column 40px off its own gap, and\n// spaced from its neighbours by the UA rather than by whatever holds it.\n// Breadcrumbs clears the same three on the list it renders, and Text clears\n// the margin for the same reason.\n//\n// Clearing the markers costs a list its role in Safari, whose VoiceOver stops\n// announcing a list once its markers are gone, so a stack rendered as a <ul>\n// or an <ol> gives the role back itself — see `listRole`.\nconst styles = {\n  base: {\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kH6xsr: \"x3ct3a4\",\n    kogj98: \"x1ghz6dp\",\n    kmVPX3: \"x1717udv\",\n    $$css: true\n  },\n  column: {\n    kXwgrk: \"xdt5ytf\",\n    $$css: true\n  },\n  row: {\n    kXwgrk: \"x1q0g3np\",\n    $$css: true\n  },\n  wrap: {\n    kwnvtZ: \"x1a02dak\",\n    $$css: true\n  }\n};\ntype StackAlign = 'baseline' | 'center' | 'end' | 'start' | 'stretch';\ntype StackGap = 'lg' | 'md' | 'none' | 'sm' | 'xl' | 'xs' | 'xxl' | 'xxs' | 'xxxl';\ntype StackJustify = 'around' | 'between' | 'center' | 'end' | 'start';\ntype StackProps = {\n  /**\n   * How the children line up across the stack: along the inline axis of a\n   * column, along the block axis of a row. Left unset, they stretch, which is\n   * what makes every card in a column the same width.\n   *\n   * `start` is what an inline-sized child needs in a column — a Tag or a\n   * Chip spans the whole width otherwise. `center` is what a row of controls\n   * usually wants: stretched, every button grows to the tallest one, so a\n   * label wrapping onto a second line makes its neighbours taller too.\n   * `baseline` lines the children up on their first line of text, and only\n   * means something in a row; in a column it places them as `start` does.\n   */\n  align?: StackAlign;\n  /**\n   * Which way the children run.\n   * @default 'column'\n   */\n  direction?: 'column' | 'row';\n  /**\n   * The space between children, as a step of the spacing scale. `none` closes\n   * it entirely.\n   *\n   * Worth setting. The default is a middle step, and how much air a group of\n   * things wants is the one thing a stack cannot work out for itself.\n   * @default 'md'\n   */\n  gap?: StackGap;\n  /**\n   * How leftover space is distributed along the stack. Left unset, the\n   * children sit at the start and the space collects after them.\n   *\n   * `between` is the one that puts a headline at one end of a row and its\n   * actions at the other.\n   */\n  justify?: StackJustify;\n  /**\n   * Lets the children wrap onto further lines rather than overflowing. A row\n   * wraps once its children are wider than it is, and the gap then spaces\n   * the lines as well as the children. A column wraps only when the stack is\n   * given a fixed height, and then flows into further columns.\n   * @default false\n   */\n  wrap?: boolean;\n} & RenderComponentProps<'div'>;\n\n// The role a list rendered through an element form of `render` is given\n// back, since the stack cleared the markers that carried it. Put under the\n// call site's props, and under the element's own as `useRender` merges them,\n// so a `role` written on either wins.\nfunction listRole(render: StackProps['render']) {\n  return isValidElement(render) && (render.type === 'ul' || render.type === 'ol') ? 'list' : undefined;\n}\n\n/**\n * A row or a column of children with one gap between them, taken from the\n * spacing scale.\n *\n * Layout only — it paints no surface and wraps no child, so each child is a\n * flex item exactly as it was written. It is the answer to spacing a group of\n * things, which is why no component here carries a margin of its own: the\n * space between two things belongs to whatever holds both of them.\n *\n * `render` swaps the element, for a stack that should be a `<ul>`, a `<nav>`,\n * or a `<section>` rather than a `<div>`. A list comes without its UA margin,\n * padding and markers, and with `role=\"list\"`: Safari's VoiceOver stops\n * announcing a list once its markers are gone, and the role puts it back. A\n * `role` the call site writes, on the stack or on the element, is kept\n * instead. A `render` function returns an element the stack cannot see\n * before it renders, so a list returned from one wants the role written on\n * it.\n *\n * ```tsx\n * <Stack gap=\"sm\" render={<ul />}>\n *   <li>First item</li>\n *   <li>Second item</li>\n *   <li>Third item</li>\n * </Stack>\n * ```\n *\n * That renders a `<ul role=\"list\">` with its items spaced by `sm`.\n */\nfunction Stack({\n  align,\n  direction = 'column',\n  gap = 'md',\n  justify,\n  render,\n  wrap = false,\n  ...props\n}: StackProps) {\n  return useRender({\n    defaultTagName: 'div',\n    props: {\n      role: listRole(render),\n      ...props,\n      ...mergeStyles(stylex.props(styles.base, styles[direction], gaps[gap], align !== undefined && alignments[align], justify !== undefined && justifications[justify], wrap && styles.wrap), props)\n    },\n    render\n  });\n}\nexport type { StackAlign, StackGap, StackJustify, StackProps };\nexport default Stack;"],"mappings":"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"}

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

@@ -53,6 +53,18 @@ type SwitchProps = {
  * keep its own. A switch takes effect as it is flipped, which is what sets
  * it apart from a checkbox in a form.
  *
+ * Where the row around it already says what it turns on, it takes
+ * `aria-label` in place of a label, and draws the track alone.
+ *
+ * ```tsx
+ * const [selected, setSelected] = useState(false)
+ *
+ * <Switch isSelected={selected} onChange={setSelected}>
+ *   Label
+ * </Switch>
+ * <Switch aria-label="Label" defaultSelected />
+ * ```
+ *
  * The call site's `className` and `style` land on the field as a whole,
  * which is the element a layout positions.
  */

package/dist/components/switch/index.js

@@ -272,6 +272,18 @@ function fieldContent(button, description, error) {
 * keep its own. A switch takes effect as it is flipped, which is what sets
 * it apart from a checkbox in a form.
 *
+* Where the row around it already says what it turns on, it takes
+* `aria-label` in place of a label, and draws the track alone.
+*
+* ```tsx
+* const [selected, setSelected] = useState(false)
+*
+* <Switch isSelected={selected} onChange={setSelected}>
+*   Label
+* </Switch>
+* <Switch aria-label="Label" defaultSelected />
+* ```
+*
 * The call site's `className` and `style` land on the field as a whole,
 * which is the element a layout positions.
 */