@kanso-labs/kanso-ui 0.34.11 → 0.34.13

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","FocusableElement","ToggleButtonGroupProps","RACToggleButtonGroupProps","ToggleButtonProps","RACToggleButtonProps","SharedElementRenderProps","ToggleButtonRenderProps","stylex","createContext","useContext","SelectionIndicator","RACSelectionIndicator","ToggleButton","RACToggleButton","ToggleButtonGroup","RACToggleButtonGroup","CheckGlyph","useRipple","focus","mergeStatefulStyles","colors","motion","radii","sizing","spacing","stateLayerOpacity","typography","ShowSelectedIconContext","SelectionModeContext","SelectionMode","Ripple","ReturnType","NonNullable","GLYPH_SIZE","GLYPH_RESERVE","sm","GLYPH_RESERVE_HALF","styles","label","k6CgDc","k7Eaqz","kVQacm","kg5iWk","kIyJzY","k1ekBW","kAMwcw","khDVqt","$$css","labelReserved","k71WvV","keTefX","labelShifted","segment","kgeoSG","kGOzcv","kpsdNU","kEoFBp","kGNEyG","kWkggS","kZKoxP","kVAM5u","kT0f0o","kVL7Gh","k2ei4v","kfmiAY","krdFHd","ksu8eU","kMzoRj","kB7OPa","kkrTdU","k1xSpc","kMv6JI","kGuDYH","k63SB2","kjj79g","kb6lSQ","kLWn49","k8WAf4","kg3NbH","kVAEAm","segmentDisabled","kMwMTN","segmentSelected","segmentUnselected","SegmentedButtonProps","Omit","className","showSelectedIcon","style","SegmentedButtonSegmentProps","children","disableRipple","icon","glyphFor","state","isSelected","indicatorClassName","isDisabled","selectionMode","isEntering","isExiting","segmentContent","ripple","reserves","undefined","glyph","isHovered","isFocusVisible","isPressed","props","surface","SegmentedButton","t0","$","_c","T0","T1","T2","t1","t2","t3","t4","t5","t6","t7","t8","SegmentedButtonSegment","handlers","segmentStyles","ring","Segment"],"sources":["../../../src/components/segmented-button/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { FocusableElement, ToggleButtonGroupProps as RACToggleButtonGroupProps, ToggleButtonProps as RACToggleButtonProps, SharedElementRenderProps, ToggleButtonRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { createContext, useContext } from 'react';\nimport { SelectionIndicator as RACSelectionIndicator, ToggleButton as RACToggleButton, ToggleButtonGroup as RACToggleButtonGroup } from 'react-aria-components';\nimport { CheckGlyph } from '../../glyphs';\nimport { useRipple } from '../../hooks/useRipple';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, sizing, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\n\n// The segmented buttons page's outlined segmented button: two to five\n// segments joined into one outlined track, of which one or several are\n// chosen. A segment is Button's default size and type role — a 40dp\n// container with a label-large label — which is what that page gives too.\n//\n// What a screen reader hears follows the selection mode, and React Aria\n// decides it rather than this component. Choosing one of the segments is a\n// radio group, so the track is a `radiogroup` and each segment a `radio`\n// reporting `aria-checked`; choosing several is a `toolbar` of buttons each\n// reporting `aria-pressed`. That is the right mapping for both, and it is\n// why the mode is a word on the group rather than two components.\n//\n// Six things are this component's own.\n//\n// **The segments are one track, not a row of buttons.** Every segment\n// carries the page's 1dp outline, and each one after the first drops its\n// leading edge so neighbours share a single rule rather than drawing two\n// against each other. The outer ends are the page's fully rounded shape and\n// the inner joins are square.\n//\n// **Every segment is the same width.** The page gives the segment width as\n// the container's divided by their number, so the track is a grid of equal\n// columns; the container itself is still as wide as its widest label asks,\n// plus the room described next.\n//\n// **A chosen segment says so with a check.** The page draws it in the icon\n// slot, so a segment given an `icon` shows the icon while unselected and the\n// check once chosen. `showSelectedIcon` turns it off for a set whose labels\n// already read as chosen or not.\n//\n// That slot is drawn out of flow, and every segment that could ever use it\n// keeps room for it whether or not it is drawing one. Laid out in flow it\n// was part of the segment's content size, so the widest segment was\n// whichever one was chosen and the whole track changed width with the\n// choice — moving every label, and moving the ground under the chosen\n// container while it was sliding across it. The mechanism is Angular\n// Material's button toggle: the slot is absolute at the leading padding\n// edge and opens from 0 to 18dp, and the label's own margins open the space\n// it lands in, both over `durationShort2`. Two things here are not theirs.\n// The room is a margin on the label rather than padding on the segment,\n// because padding would be part of the content size the equal columns are\n// measured from — which is the thing being fixed. And it is split across\n// both of the label's sides while nothing is drawn, so a bare label stays\n// centred; Angular Material has no such case, since its toggles are sized\n// by their own content rather than by the widest of them.\n//\n// The cost is that a track able to draw a check is 26dp per segment wider\n// than its labels alone would ask for. It is not wider than it used to\n// get, though, and that falls out rather than being arranged: the reserve\n// puts every column at the widest label plus the room, which is exactly\n// what the widest column already measured while its own segment was the\n// chosen one. What changes is that the track is always that, instead of\n// only while the longest label is the one chosen.\n//\n// Angular Material delays the check's own transition by 45ms so the space\n// opens before the glyph arrives. That is dropped rather than carried as a\n// literal: there is no motion token for it, and the slot here opens from its\n// centre rather than its leading edge, so the check and the label never\n// cross even when the two run together.\n//\n// **The chosen container is an element of its own, and it moves.** It is\n// React Aria's `SelectionIndicator`, a shared element rendered inside every\n// segment and drawn in the chosen one: on a change it keeps the old one\n// until it has finished moving, so two exist while it slides. No\n// `SharedElementTransition` is rendered here, because `ToggleButtonGroup`\n// wraps its children in one already — worth saying, since the primitive\n// throws outside a scope wherever else it is used.\n//\n// It is the page's chosen container rather than a smaller pill: it covers\n// the segment, which is the box a background painted, so the fill is all\n// that travels. Three things follow. It is drawn behind the segments rather\n// than inside one, or a container crossing a neighbour would pass over that\n// neighbour's label and the rule beside it. Its corners have to match\n// whichever segment it is in, which the segment hands down as a custom\n// property, because a child cannot read its own parent's place in the track.\n// And the state layers move onto a layer of their own above it, since a\n// container that slides away would otherwise take the hover with it and off\n// the segment under the pointer.\n//\n// **Choosing several animates differently, rather than the same way twice.**\n// A shared element is one element: it can move between segments, but with\n// several chosen there is no single segment for it to be at. So\n// `selectionMode=\"multiple\"` names only `opacity` in the transition, nothing\n// positional is snapshotted, and each container fades in and out where it\n// is; `single` names `translate` and `border-radius` as well, and the one\n// container travels between segments.\n//\n// **Two of the page's values are the library's instead**, both for\n// consistency with the controls beside them: the focus ring, which is\n// primary at 2dp offset 2dp everywhere here rather than the page's secondary\n// at 3dp, and the press, which is the library's ripple rather than a flat\n// state layer. The page names a ripple as the pressed state, so the second\n// is a departure only in how it is drawn.\n//\n// **The density steps are not drawn.** The page removes 4dp of height per\n// step down, for denser interfaces; nothing else in the library takes a\n// density, and one component that did would be the odd one out. A shorter\n// track is a `className` away.\n//\n// Vertical is React Aria's and is not passed through, since the page draws\n// one row and a column of joined segments is a different shape — the outer\n// corners, the shared rule and the equal columns would all have to mean\n// something else.\n\n// Whether a chosen segment draws the check. A context rather than a prop on\n// each segment, since it is the set's decision and repeating it on every\n// segment is how the two drift.\nconst ShowSelectedIconContext = createContext(true);\n\n// Which of the two animations the chosen container plays. Read from a\n// context for the same reason, and because React Aria's own state context\n// holds the mode in a shape this would have to narrow before using.\nconst SelectionModeContext = createContext<SelectionMode>('single');\ntype Ripple = ReturnType<typeof useRipple<FocusableElement>>;\ntype SelectionMode = NonNullable<RACToggleButtonGroupProps['selectionMode']>;\n\n// The page's 18dp icon slot, and the room a segment keeps for it: the slot\n// plus the gap between it and the label. Half of that room sits on each side\n// of the label while nothing is drawn, which is what keeps a bare label\n// centred; see `labelReserved`.\nconst GLYPH_SIZE = '18px';\nconst GLYPH_RESERVE = `calc(${GLYPH_SIZE} + ${spacing.sm})`;\nconst GLYPH_RESERVE_HALF = `calc((${GLYPH_SIZE} + ${spacing.sm}) / 2)`;\nconst styles = {\n  label: {\n    k6CgDc: \"x12w9bfk\",\n    k7Eaqz: \"xeuugli\",\n    kVQacm: \"xb3r6kr\",\n    kg5iWk: \"xlyipyv\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"x1ve1rmq\",\n    kAMwcw: \"xpc4ca7\",\n    khDVqt: \"xuxw1ft\",\n    $$css: true\n  },\n  labelReserved: {\n    k71WvV: \"x184gv5z\",\n    keTefX: \"x1mjqfaz\",\n    $$css: true\n  },\n  labelShifted: {\n    k71WvV: \"x14z9mp\",\n    keTefX: \"x1c5lys2\",\n    $$css: true\n  },\n  segment: {\n    \"--segment-indicator-radius-end\": \"x32u3vw x111hk5a\",\n    \"--segment-indicator-radius-start\": \"xatjrgw x1syycwj\",\n    kgeoSG: \"x1cpjm7i\",\n    kGOzcv: \"x17kqlg\",\n    kpsdNU: \"xm4btww\",\n    kEoFBp: \"x1hmns74\",\n    k6CgDc: \"x12w9bfk\",\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kZKoxP: \"x1rv7mn0\",\n    kVAM5u: \"x1fwvt7v\",\n    kT0f0o: \"x1fougng xkducg2\",\n    kVL7Gh: \"x1prwiuu x1uwupfv\",\n    k2ei4v: \"x120dh57 x14e42zd\",\n    kfmiAY: \"x17hb1p4 x1a37zkv\",\n    krdFHd: \"xwfph4i xb01x1j\",\n    ksu8eU: \"x1y0btm7\",\n    kMzoRj: \"xmkeg23\",\n    kB7OPa: \"x9f619\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x3nfvp2\",\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kjj79g: \"xl56j7k\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    k7Eaqz: \"xeuugli\",\n    k8WAf4: \"xt970qd\",\n    kg3NbH: \"x18fpw6u\",\n    kVAEAm: \"x1n2onr6\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"xt3l3uh\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  segmentDisabled: {\n    kVAM5u: \"xrh88j3\",\n    kMwMTN: \"x1xj74d8\",\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  segmentSelected: {\n    kMwMTN: \"x1sawysd\",\n    $$css: true\n  },\n  segmentUnselected: {\n    kMwMTN: \"x139gbkf\",\n    $$css: true\n  }\n};\ntype SegmentedButtonProps = Omit<RACToggleButtonGroupProps, 'className' | 'orientation' | 'style'> & {\n  /** A function may compute the class from the set's render state. */\n  className?: RACToggleButtonGroupProps['className'];\n  /**\n   * Whether a chosen segment draws a check before its label, as the page\n   * has it. `false` leaves the segment's own icon in place while selected.\n   * @default true\n   */\n  showSelectedIcon?: boolean;\n  /** A function may compute the style from the set's render state. */\n  style?: RACToggleButtonGroupProps['style'];\n};\ntype SegmentedButtonSegmentProps = Omit<RACToggleButtonProps, 'children' | 'className' | 'style'> & {\n  /** The segment's label. */\n  children?: ReactNode;\n  /** A function may compute the class from the segment's render state. */\n  className?: RACToggleButtonProps['className'];\n  /**\n   * Disables the press ripple. The hover and pressed state layers are\n   * unaffected.\n   * @default false\n   */\n  disableRipple?: boolean;\n  /**\n   * An icon before the label, in the page's 18dp size. Replaced by the check\n   * while the segment is chosen, unless the set turns that off. An icon drawn\n   * in `em` takes that size from the slot.\n   */\n  icon?: ReactNode;\n  /** A function may compute the style from the segment's render state. */\n  style?: RACToggleButtonProps['style'];\n};\n\n/**\n * What the glyph slot draws: the check on a chosen segment, or the segment's\n * own icon. `null` for a segment with neither, which leaves the slot empty\n * and closed rather than unrendered. Returns a node rather than letting the\n * type be inferred, since `ReactNode` is a union that includes a promise and\n * an inferred one has to be `async`.\n */\nfunction glyphFor(state: ToggleButtonRenderProps, icon: ReactNode, showSelectedIcon: boolean): ReactNode {\n  if (state.isSelected && showSelectedIcon) {\n    return <CheckGlyph className=\"x5yr21d x2lah0s x1xp8n7a\" />;\n  }\n  return icon ?? null;\n}\n\n// The chosen container's class, from the segment's own state and the shared\n// element's. A function, because React Aria hands the indicator the entering\n// and leaving states the fade is drawn from, and those are the only two the\n// element knows about itself.\nfunction indicatorClassName(isDisabled: boolean, selectionMode: SelectionMode): (state: SharedElementRenderProps) => string {\n  return state => ({\n    0: {\n      className: \"x15dekr4 xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk xioksi3 x1c42kcb x1seskgd\"\n    },\n    4: {\n      className: \"x15dekr4 xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk x1qno0dh x19991ni xpc4ca7\"\n    },\n    2: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk xioksi3 x1c42kcb x1seskgd xepofeg\"\n    },\n    6: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk x1qno0dh x19991ni xpc4ca7 xepofeg\"\n    },\n    1: {\n      className: \"x15dekr4 xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk xioksi3 x1c42kcb x1seskgd xg01cxk\"\n    },\n    5: {\n      className: \"x15dekr4 xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk x1qno0dh x19991ni xpc4ca7 xg01cxk\"\n    },\n    3: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk xioksi3 x1c42kcb x1seskgd xepofeg xg01cxk\"\n    },\n    7: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk x1qno0dh x19991ni xpc4ca7 xepofeg xg01cxk\"\n    }\n  })[!!(selectionMode === 'multiple') << 2 | !!isDisabled << 1 | !!(state.isEntering || state.isExiting) << 0].className ?? '';\n}\n\n// What a segment draws, from React Aria's render state. Built by a call\n// 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\n// on its inputs.\nfunction segmentContent(children: ReactNode, icon: ReactNode, ripple: Ripple, selectionMode: SelectionMode, showSelectedIcon: boolean) {\n  // Whether this segment can ever draw a glyph, and so whether it keeps room\n  // for one. A set that draws no check and a segment with no icon of its own\n  // never needs the slot, and reserving it there would be dead space in\n  // every segment of the track.\n  const reserves = showSelectedIcon || icon !== undefined;\n  return (state: ToggleButtonRenderProps) => {\n    const glyph = glyphFor(state, icon, showSelectedIcon);\n    return <>\n        <RACSelectionIndicator className={indicatorClassName(state.isDisabled, selectionMode)} />\n        <span {...{\n        0: {\n          className: \"x12w9bfk xtwfq29 x1pjcqnp x9f619 x1jz8bvi xg01cxk x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4\"\n        },\n        4: {\n          className: \"x12w9bfk xtwfq29 x1pjcqnp x9f619 x1jz8bvi x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4 xe2qvxb\"\n        },\n        2: {\n          className: \"x12w9bfk xtwfq29 x1pjcqnp x9f619 x1jz8bvi x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4 xcl2av\"\n        },\n        6: {\n          className: \"x12w9bfk xtwfq29 x1pjcqnp x9f619 x1jz8bvi x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4 xcl2av\"\n        },\n        1: {\n          className: \"x12w9bfk xtwfq29 x1pjcqnp x9f619 x1jz8bvi x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4 xjg27g\"\n        },\n        5: {\n          className: \"x12w9bfk xtwfq29 x1pjcqnp x9f619 x1jz8bvi x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4 xjg27g\"\n        },\n        3: {\n          className: \"x12w9bfk xtwfq29 x1pjcqnp x9f619 x1jz8bvi x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4 xjg27g\"\n        },\n        7: {\n          className: \"x12w9bfk xtwfq29 x1pjcqnp x9f619 x1jz8bvi x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4 xjg27g\"\n        }\n      }[!!state.isHovered << 2 | !!state.isFocusVisible << 1 | !!state.isPressed << 0]} />\n        {reserves && <span {...{\n        0: {\n          className: \"x12w9bfk x6s0dn4 xmix8c7 x3nfvp2 xosj86m xnalus7 xwa60dl x2xyl1b xl56j7k xb3r6kr x47corl x10l6tqk xmzmy3r x1qno0dh x1j4rzew xpc4ca7\"\n        },\n        1: {\n          className: \"x12w9bfk x6s0dn4 xmix8c7 x3nfvp2 xosj86m xwa60dl x2xyl1b xl56j7k xb3r6kr x47corl x10l6tqk xmzmy3r x1qno0dh x1j4rzew xpc4ca7 x1xp8n7a\"\n        }\n      }[!!(glyph !== null) << 0]}>\n            {glyph}\n          </span>}\n        <span {...stylex.props(styles.label, reserves && (glyph === null ? styles.labelReserved : styles.labelShifted))}>\n          {children}\n        </span>\n        {ripple.surface}\n      </>;\n  };\n}\n\n/**\n * A row of two to five joined segments, of which one — or with\n * `selectionMode=\"multiple\"`, several — is chosen. Selection is React Aria's:\n * pass `selectedKeys` with `onSelectionChange` to control it, or\n * `defaultSelectedKeys` to let it keep its own. Give every segment an `id`,\n * which is the key selection is reported by.\n *\n * ```tsx\n * <SegmentedButton aria-label=\"Label\" defaultSelectedKeys={['first']}>\n *   <SegmentedButton.Segment id=\"first\">First item</SegmentedButton.Segment>\n *   <SegmentedButton.Segment id=\"second\">Second item</SegmentedButton.Segment>\n * </SegmentedButton>\n * ```\n *\n * Name the set with `aria-label` or `aria-labelledby` — nothing here labels\n * it for you, and a set with no name is a group a screen reader cannot\n * announce. What it is announced as follows the selection mode: choosing one\n * is a radio group, choosing several a toolbar of two-state buttons. So does\n * how the chosen container moves: it slides between segments while one is\n * chosen, and fades in place while several may be.\n *\n * The call site's `className` and `style` land on the track, which is the\n * element a layout positions.\n */\nfunction SegmentedButton({\n  selectionMode = 'single',\n  showSelectedIcon = true,\n  ...props\n}: SegmentedButtonProps) {\n  return <ShowSelectedIconContext value={showSelectedIcon}>\n      <SelectionModeContext value={selectionMode}>\n        <RACToggleButtonGroup {...props} selectionMode={selectionMode} {...mergeStatefulStyles({\n        className: \"x9f619 xwz0xwf xu6a5m6 x1mt1orb xc8icb0\"\n      }, props)} />\n      </SelectionModeContext>\n    </ShowSelectedIconContext>;\n}\n\n/**\n * One segment. Its `id` is what selection is reported by, and its label is\n * what names it. A chosen segment draws a check before the label; an\n * unchosen one draws whatever `icon` holds, if anything.\n */\nfunction SegmentedButtonSegment({\n  children,\n  disableRipple = false,\n  icon,\n  ...props\n}: SegmentedButtonSegmentProps) {\n  const selectionMode = useContext(SelectionModeContext);\n  const showSelectedIcon = useContext(ShowSelectedIconContext);\n  // Off while disabled, as in Button: a control that cannot be pressed\n  // should not answer a press with an animation.\n  const ripple = useRipple<FocusableElement>(!disableRipple && props.isDisabled !== true);\n  return <RACToggleButton {...props} {...ripple.handlers} {...mergeStatefulStyles(segmentStyles, props)}>\n      {segmentContent(children, icon, ripple, selectionMode, showSelectedIcon)}\n    </RACToggleButton>;\n}\n\n// StyleX cannot target `[data-selected]` on the element it is styling, so a\n// segment's state comes from the render state React Aria hands its\n// className. `disabled` is applied last so its label colour wins over both\n// of the others.\nfunction segmentStyles(state: ToggleButtonRenderProps) {\n  return stylex.props(styles.segment, focus.ring, state.isSelected ? styles.segmentSelected : styles.segmentUnselected, state.isDisabled && styles.segmentDisabled);\n}\nSegmentedButton.Segment = SegmentedButtonSegment;\nexport type { SegmentedButtonProps, SegmentedButtonSegmentProps };\nexport default SegmentedButton;"],"mappings":";;;;;;;;;;;AAuHA,MAAM4B,0BAA0BnB,cAAc,IAAI;AAKlD,MAAMoB,uBAAuBpB,cAA6B,QAAQ;AAS5C,GAAwBgB,QAAQW;AAC3B,GAAyBX,QAAQW;AAC5D,MAAME,SAAS;CACbC,OAAO;EACLC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;CACT;CACAC,eAAe;EACbC,QAAQ;EACRC,QAAQ;EACRH,OAAO;CACT;CACAI,cAAc;EACZF,QAAQ;EACRC,QAAQ;EACRH,OAAO;CACT;CACAK,SAAS;EACP,kCAAkC;EAClC,oCAAoC;EACpCC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRjB,QAAQ;EACRkB,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRpC,QAAQ;EACRqC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRpC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRE,OAAO;CACT;CACAiC,iBAAiB;EACfpB,QAAQ;EACRqB,QAAQ;EACRZ,QAAQ;EACRtB,OAAO;CACT;CACAmC,iBAAiB;EACfD,QAAQ;EACRlC,OAAO;CACT;CACAoC,mBAAmB;EACjBF,QAAQ;EACRlC,OAAO;CACT;AACF;;;;;;;;AAyCA,SAAS8C,SAASC,OAAgCF,MAAiBL,kBAAsC;CACvG,IAAIO,MAAMC,cAAcR,kBACtB,OAAO,oBAAC,YAAD,EAAY,WAAU,2BAA0B,CAAA;CAEzD,OAAOK,QAAQ;AACjB;AAMA,SAASI,mBAAmBC,YAAqBC,eAA2E;CAC1H,QAAOJ,WAAU;EACf,GAAG,EACDR,WAAW,yHACb;EACA,GAAG,EACDA,WAAW,yHACb;EACA,GAAG,EACDA,WAAW,wHACb;EACA,GAAG,EACDA,WAAW,wHACb;EACA,GAAG,EACDA,WAAW,iIACb;EACA,GAAG,EACDA,WAAW,iIACb;EACA,GAAG,EACDA,WAAW,gIACb;EACA,GAAG,EACDA,WAAW,gIACb;CACF,EAAA,CAAG,CAAC,EAAEY,kBAAkB,eAAe,IAAI,CAAC,CAACD,cAAc,IAAI,CAAC,EAAEH,MAAMK,cAAcL,MAAMM,cAAc,EAAE,CAACd,aAAa;AAC5H;AAMA,SAASe,eAAeX,UAAqBE,MAAiBU,QAAgBJ,eAA8BX,kBAA2B;CAKrI,MAAMgB,WAAWhB,oBAAoBK,SAASY,KAAAA;CAC9C,QAAQV,UAAmC;EACzC,MAAMW,QAAQZ,SAASC,OAAOF,MAAML,gBAAgB;EACpD,OAAO,qBAAA,YAAA,EAAA,UAAA;GACH,oBAAC,oBAAD,EAAuB,WAAWS,mBAAmBF,MAAMG,YAAYC,aAAa,EAAE,CAAA;GACtF,oBAAC,QAAD,EAAM,GAAI;IACV,GAAG,EACDZ,WAAW,uGACb;IACA,GAAG,EACDA,WAAW,uGACb;IACA,GAAG,EACDA,WAAW,sGACb;IACA,GAAG,EACDA,WAAW,sGACb;IACA,GAAG,EACDA,WAAW,sGACb;IACA,GAAG,EACDA,WAAW,sGACb;IACA,GAAG,EACDA,WAAW,sGACb;IACA,GAAG,EACDA,WAAW,sGACb;GACF,EAAE,CAAC,CAACQ,MAAMY,aAAa,IAAI,CAAC,CAACZ,MAAMa,kBAAkB,IAAI,CAAC,CAACb,MAAMc,aAAa,GAAG,CAAA;GAC9EL,YAAY,oBAAC,QAAD;IAAM,GAAI;KACvB,GAAG,EACDjB,WAAW,sIACb;KACA,GAAG,EACDA,WAAW,uIACb;IACF,EAAE,CAAC,EAAEmB,UAAU,SAAS;IACjBA,UAAAA;GACG,CAAA;GACR,oBAAC,QAAD;IAAM,GAAIlG,MAAa8B,OAAOC,OAAOiE,aAAaE,UAAU,OAAOpE,OAAOW,gBAAgBX,OAAOc,aAAa;IAC3GuC;GACG,CAAA;GACLY,OAAOQ;EACV,EAAA,CAAA;CACJ;AACF;;;;;;;;;;;;;;;;;;;;;;;;;AA0BA,SAAAC,gBAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAT,EAAA,OAAAD,IAAA;EAAyB,MAAA,EAAAd,eAAAyB,IAAApC,kBAAAqC,IAAA,GAAAf,UAAAG;EACvB,MAAAd,gBAAAyB,OAAAnB,KAAAA,IAAA,WAAAmB;EACA,MAAApC,mBAAAqC,OAAApB,KAAAA,IAAA,OAAAoB;EAGQP,KAAA1F;EAA+B4D,KAAAA;EAClC6B,KAAAxF;EAA4BsE,KAAAA;EAC1BiB,KAAApG;EAAyB8F,KAAAA;EAAsBX,KAAAA;EAAmBsB,KAAArG,oBAAoB,EAAAmE,WAC5E,0CACb,GAAGuB,KAAK;EAACI,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;EAAAL,EAAA,KAAAM;EAAAN,EAAA,KAAAO;EAAAP,EAAA,KAAAQ;EAAAR,EAAA,KAAAS;CAAA,OAAA;EAAAP,KAAAF,EAAA;EAAAG,KAAAH,EAAA;EAAAI,KAAAJ,EAAA;EAAAK,KAAAL,EAAA;EAAAM,KAAAN,EAAA;EAAAO,KAAAP,EAAA;EAAAQ,KAAAR,EAAA;EAAAS,KAAAT,EAAA;CAAA;CAAA,IAAAU;CAAA,IAAAV,EAAA,OAAAE,MAAAF,EAAA,QAAAK,MAAAL,EAAA,QAAAM,MAAAN,EAAA,QAAAO,IAAA;EAFPG,KAAA,oBAAC,IAAD;GAAqB,GAAKd;GAAsBX,eAAAA;GAAa,GAAMsB;EAE5D,CAAA;EAAIP,EAAA,KAAAE;EAAAF,EAAA,MAAAK;EAAAL,EAAA,MAAAM;EAAAN,EAAA,MAAAO;EAAAP,EAAA,MAAAU;CAAA,OAAAA,KAAAV,EAAA;CAAA,IAAAW;CAAA,IAAAX,EAAA,QAAAG,MAAAH,EAAA,QAAAQ,MAAAR,EAAA,QAAAU,IAAA;EAHbC,KAAA,oBAAC,IAAD;GAA6B1B,OAAAA;GAC3ByB,UAAAA;EADmB,CAAA;EAIEV,EAAA,MAAAG;EAAAH,EAAA,MAAAQ;EAAAR,EAAA,MAAAU;EAAAV,EAAA,MAAAW;CAAA,OAAAA,KAAAX,EAAA;CAAA,IAAAY;CAAA,IAAAZ,EAAA,QAAAI,MAAAJ,EAAA,QAAAS,MAAAT,EAAA,QAAAW,IAAA;EALpBC,KAAA,oBAAC,IAAD;GAAgCtC,OAAAA;GACnCqC,UAAAA;EAD2B,CAAA;EAMHX,EAAA,MAAAI;EAAAJ,EAAA,MAAAS;EAAAT,EAAA,MAAAW;EAAAX,EAAA,MAAAY;CAAA,OAAAA,KAAAZ,EAAA;CAAA,OANrBY;AAMqB;;;;;;AAQ9B,SAAAC,uBAAAd,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAgC,MAAA,EAAAxB,UAAAC,eAAA2B,IAAA1B,MAAA,GAAAiB,UAAAG;CAE9B,MAAArB,gBAAA2B,OAAAd,KAAAA,IAAA,QAAAc;CAIA,MAAApB,gBAAsBzF,WAAWmB,oBAAoB;CACrD,MAAA2D,mBAAyB9E,WAAWkB,uBAAuB;CAG3D,MAAA2E,SAAerF,UAA4B,CAAC0E,iBAAiBkB,MAAKZ,eAAgB,IAAI;CAC9E,MAAAkB,KAAAtG;CAA+B,MAAA0G,KAAAjB,OAAMyB;CAAe,MAAAP,KAAArG,oBAAoB6G,eAAenB,KAAK;CAAC,IAAAY;CAAA,IAAAR,EAAA,OAAAvB,YAAAuB,EAAA,OAAArB,QAAAqB,EAAA,OAAAX,UAAAW,EAAA,OAAAf,iBAAAe,EAAA,OAAA1B,kBAAA;EAChGkC,KAAApB,eAAeX,UAAUE,MAAMU,QAAQJ,eAAeX,gBAAgB;EAAC0B,EAAA,KAAAvB;EAAAuB,EAAA,KAAArB;EAAAqB,EAAA,KAAAX;EAAAW,EAAA,KAAAf;EAAAe,EAAA,KAAA1B;EAAA0B,EAAA,KAAAQ;CAAA,OAAAA,KAAAR,EAAA;CAAA,IAAAS;CAAA,IAAAT,EAAA,OAAAE,MAAAF,EAAA,OAAAJ,SAAAI,EAAA,OAAAX,OAAAyB,YAAAd,EAAA,OAAAO,MAAAP,EAAA,QAAAQ,IAAA;EADrEC,KAAA,oBAAC,IAAD;GAAgB,GAAKb;GAAK,GAAMU;GAAe,GAAMC;GACvDC,UAAAA;EADkB,CAAA;EAEHR,EAAA,KAAAE;EAAAF,EAAA,KAAAJ;EAAAI,EAAA,KAAAX,OAAAyB;EAAAd,EAAA,KAAAO;EAAAP,EAAA,MAAAQ;EAAAR,EAAA,MAAAS;CAAA,OAAAA,KAAAT,EAAA;CAAA,OAFbS;AAEa;AAOtB,SAASM,cAAclC,OAAgC;CACrD,OAAOvF,MAAa8B,OAAOe,SAASlC,MAAM+G,MAAMnC,MAAMC,aAAa1D,OAAO6C,kBAAkB7C,OAAO8C,mBAAmBW,MAAMG,cAAc5D,OAAO2C,eAAe;AAClK;AACA+B,gBAAgBmB,UAAUJ"}
+{"version":3,"file":"index.js","names":["ReactNode","FocusableElement","ToggleButtonGroupProps","RACToggleButtonGroupProps","ToggleButtonProps","RACToggleButtonProps","SharedElementRenderProps","ToggleButtonRenderProps","stylex","createContext","useContext","SelectionIndicator","RACSelectionIndicator","ToggleButton","RACToggleButton","ToggleButtonGroup","RACToggleButtonGroup","CheckGlyph","useRipple","focus","mergeStatefulStyles","colors","motion","radii","sizing","spacing","stateLayerOpacity","typography","ShowSelectedIconContext","SelectionModeContext","SelectionMode","Ripple","ReturnType","NonNullable","GLYPH_SIZE","GLYPH_RESERVE","sm","GLYPH_RESERVE_HALF","styles","label","k6CgDc","k7Eaqz","kVQacm","kg5iWk","kIyJzY","k1ekBW","kAMwcw","khDVqt","$$css","labelReserved","k71WvV","keTefX","labelShifted","segment","kgeoSG","kGOzcv","kpsdNU","kEoFBp","kGNEyG","kWkggS","kZKoxP","kVAM5u","kT0f0o","kVL7Gh","k2ei4v","kfmiAY","krdFHd","ksu8eU","kMzoRj","kB7OPa","kkrTdU","k1xSpc","kMv6JI","kGuDYH","k63SB2","kjj79g","kb6lSQ","kLWn49","k8WAf4","kg3NbH","kVAEAm","segmentDisabled","kMwMTN","segmentSelected","segmentUnselected","SegmentedButtonProps","Omit","className","showSelectedIcon","style","SegmentedButtonSegmentProps","children","disableRipple","icon","glyphFor","state","isSelected","indicatorClassName","isDisabled","selectionMode","isEntering","isExiting","segmentContent","ripple","reserves","undefined","glyph","isHovered","isFocusVisible","isPressed","props","surface","SegmentedButton","t0","$","_c","T0","T1","T2","t1","t2","t3","t4","t5","t6","t7","t8","SegmentedButtonSegment","handlers","segmentStyles","ring","Segment","RACSelectionIndicator","stylex.props","_c","RACToggleButtonGroup","RACToggleButton"],"sources":["../../../src/components/segmented-button/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { FocusableElement, ToggleButtonGroupProps as RACToggleButtonGroupProps, ToggleButtonProps as RACToggleButtonProps, SharedElementRenderProps, ToggleButtonRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { createContext, useContext } from 'react';\nimport { SelectionIndicator as RACSelectionIndicator, ToggleButton as RACToggleButton, ToggleButtonGroup as RACToggleButtonGroup } from 'react-aria-components';\nimport { CheckGlyph } from '../../glyphs';\nimport { useRipple } from '../../hooks/useRipple';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, sizing, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\n\n// The segmented buttons page's outlined segmented button: two to five\n// segments joined into one outlined track, of which one or several are\n// chosen. A segment is Button's default size and type role — a 40dp\n// container with a label-large label — which is what that page gives too.\n//\n// What a screen reader hears follows the selection mode, and React Aria\n// decides it rather than this component. Choosing one of the segments is a\n// radio group, so the track is a `radiogroup` and each segment a `radio`\n// reporting `aria-checked`; choosing several is a `toolbar` of buttons each\n// reporting `aria-pressed`. That is the right mapping for both, and it is\n// why the mode is a word on the group rather than two components.\n//\n// Six things are this component's own.\n//\n// **The segments are one track, not a row of buttons.** Every segment\n// carries the page's 1dp outline, and each one after the first drops its\n// leading edge so neighbours share a single rule rather than drawing two\n// against each other. The outer ends are the page's fully rounded shape and\n// the inner joins are square.\n//\n// **Every segment is the same width.** The page gives the segment width as\n// the container's divided by their number, so the track is a grid of equal\n// columns; the container itself is still as wide as its widest label asks,\n// plus the room described next.\n//\n// **A chosen segment says so with a check.** The page draws it in the icon\n// slot, so a segment given an `icon` shows the icon while unselected and the\n// check once chosen. `showSelectedIcon` turns it off for a set whose labels\n// already read as chosen or not.\n//\n// That slot is drawn out of flow, and every segment that could ever use it\n// keeps room for it whether or not it is drawing one. Laid out in flow it\n// was part of the segment's content size, so the widest segment was\n// whichever one was chosen and the whole track changed width with the\n// choice — moving every label, and moving the ground under the chosen\n// container while it was sliding across it. The mechanism is Angular\n// Material's button toggle: the slot is absolute at the leading padding\n// edge and opens from 0 to 18dp, and the label's own margins open the space\n// it lands in, both over `durationShort2`. Two things here are not theirs.\n// The room is a margin on the label rather than padding on the segment,\n// because padding would be part of the content size the equal columns are\n// measured from — which is the thing being fixed. And it is split across\n// both of the label's sides while nothing is drawn, so a bare label stays\n// centred; Angular Material has no such case, since its toggles are sized\n// by their own content rather than by the widest of them.\n//\n// The cost is that a track able to draw a check is 26dp per segment wider\n// than its labels alone would ask for. It is not wider than it used to\n// get, though, and that falls out rather than being arranged: the reserve\n// puts every column at the widest label plus the room, which is exactly\n// what the widest column already measured while its own segment was the\n// chosen one. What changes is that the track is always that, instead of\n// only while the longest label is the one chosen.\n//\n// Angular Material delays the check's own transition by 45ms so the space\n// opens before the glyph arrives. That is dropped rather than carried as a\n// literal: there is no motion token for it, and the slot here opens from its\n// centre rather than its leading edge, so the check and the label never\n// cross even when the two run together.\n//\n// **The chosen container is an element of its own, and it moves.** It is\n// React Aria's `SelectionIndicator`, a shared element rendered inside every\n// segment and drawn in the chosen one: on a change it keeps the old one\n// until it has finished moving, so two exist while it slides. No\n// `SharedElementTransition` is rendered here, because `ToggleButtonGroup`\n// wraps its children in one already — worth saying, since the primitive\n// throws outside a scope wherever else it is used.\n//\n// It is the page's chosen container rather than a smaller pill: it covers\n// the segment, which is the box a background painted, so the fill is all\n// that travels. Three things follow. It is drawn behind the segments rather\n// than inside one, or a container crossing a neighbour would pass over that\n// neighbour's label and the rule beside it. Its corners have to match\n// whichever segment it is in, which the segment hands down as a custom\n// property, because a child cannot read its own parent's place in the track.\n// And the state layers move onto a layer of their own above it, since a\n// container that slides away would otherwise take the hover with it and off\n// the segment under the pointer.\n//\n// **Choosing several animates differently, rather than the same way twice.**\n// A shared element is one element: it can move between segments, but with\n// several chosen there is no single segment for it to be at. So\n// `selectionMode=\"multiple\"` names only `opacity` in the transition, nothing\n// positional is snapshotted, and each container fades in and out where it\n// is; `single` names `translate` and `border-radius` as well, and the one\n// container travels between segments.\n//\n// **Two of the page's values are the library's instead**, both for\n// consistency with the controls beside them: the focus ring, which is\n// primary at 2dp offset 2dp everywhere here rather than the page's secondary\n// at 3dp, and the press, which is the library's ripple rather than a flat\n// state layer. The page names a ripple as the pressed state, so the second\n// is a departure only in how it is drawn.\n//\n// **The density steps are not drawn.** The page removes 4dp of height per\n// step down, for denser interfaces; nothing else in the library takes a\n// density, and one component that did would be the odd one out. A shorter\n// track is a `className` away.\n//\n// Vertical is React Aria's and is not passed through, since the page draws\n// one row and a column of joined segments is a different shape — the outer\n// corners, the shared rule and the equal columns would all have to mean\n// something else.\n\n// Whether a chosen segment draws the check. A context rather than a prop on\n// each segment, since it is the set's decision and repeating it on every\n// segment is how the two drift.\nconst ShowSelectedIconContext = createContext(true);\n\n// Which of the two animations the chosen container plays. Read from a\n// context for the same reason, and because React Aria's own state context\n// holds the mode in a shape this would have to narrow before using.\nconst SelectionModeContext = createContext<SelectionMode>('single');\ntype Ripple = ReturnType<typeof useRipple<FocusableElement>>;\ntype SelectionMode = NonNullable<RACToggleButtonGroupProps['selectionMode']>;\n\n// The page's 18dp icon slot, and the room a segment keeps for it: the slot\n// plus the gap between it and the label. Half of that room sits on each side\n// of the label while nothing is drawn, which is what keeps a bare label\n// centred; see `labelReserved`.\nconst GLYPH_SIZE = '18px';\nconst GLYPH_RESERVE = `calc(${GLYPH_SIZE} + ${spacing.sm})`;\nconst GLYPH_RESERVE_HALF = `calc((${GLYPH_SIZE} + ${spacing.sm}) / 2)`;\nconst styles = {\n  label: {\n    k6CgDc: \"x12w9bfk\",\n    k7Eaqz: \"xeuugli\",\n    kVQacm: \"xb3r6kr\",\n    kg5iWk: \"xlyipyv\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"x1ve1rmq\",\n    kAMwcw: \"xpc4ca7\",\n    khDVqt: \"xuxw1ft\",\n    $$css: true\n  },\n  labelReserved: {\n    k71WvV: \"x184gv5z\",\n    keTefX: \"x1mjqfaz\",\n    $$css: true\n  },\n  labelShifted: {\n    k71WvV: \"x14z9mp\",\n    keTefX: \"x1c5lys2\",\n    $$css: true\n  },\n  segment: {\n    \"--segment-indicator-radius-end\": \"x32u3vw x111hk5a\",\n    \"--segment-indicator-radius-start\": \"xatjrgw x1syycwj\",\n    kgeoSG: \"x1cpjm7i\",\n    kGOzcv: \"x17kqlg\",\n    kpsdNU: \"xm4btww\",\n    kEoFBp: \"x1hmns74\",\n    k6CgDc: \"x12w9bfk\",\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kZKoxP: \"x1rv7mn0\",\n    kVAM5u: \"x1fwvt7v\",\n    kT0f0o: \"x1fougng xkducg2\",\n    kVL7Gh: \"x1prwiuu x1uwupfv\",\n    k2ei4v: \"x120dh57 x14e42zd\",\n    kfmiAY: \"x17hb1p4 x1a37zkv\",\n    krdFHd: \"xwfph4i xb01x1j\",\n    ksu8eU: \"x1y0btm7\",\n    kMzoRj: \"xmkeg23\",\n    kB7OPa: \"x9f619\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x3nfvp2\",\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kjj79g: \"xl56j7k\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    k7Eaqz: \"xeuugli\",\n    k8WAf4: \"xt970qd\",\n    kg3NbH: \"x18fpw6u\",\n    kVAEAm: \"x1n2onr6\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"xt3l3uh\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  segmentDisabled: {\n    kVAM5u: \"xrh88j3\",\n    kMwMTN: \"x1xj74d8\",\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  segmentSelected: {\n    kMwMTN: \"x1sawysd\",\n    $$css: true\n  },\n  segmentUnselected: {\n    kMwMTN: \"x139gbkf\",\n    $$css: true\n  }\n};\ntype SegmentedButtonProps = Omit<RACToggleButtonGroupProps, 'className' | 'orientation' | 'style'> & {\n  /** A function may compute the class from the set's render state. */\n  className?: RACToggleButtonGroupProps['className'];\n  /**\n   * Whether a chosen segment draws a check before its label, as the page\n   * has it. `false` leaves the segment's own icon in place while selected.\n   * @default true\n   */\n  showSelectedIcon?: boolean;\n  /** A function may compute the style from the set's render state. */\n  style?: RACToggleButtonGroupProps['style'];\n};\ntype SegmentedButtonSegmentProps = Omit<RACToggleButtonProps, 'children' | 'className' | 'style'> & {\n  /** The segment's label. */\n  children?: ReactNode;\n  /** A function may compute the class from the segment's render state. */\n  className?: RACToggleButtonProps['className'];\n  /**\n   * Disables the press ripple. The hover and pressed state layers are\n   * unaffected.\n   * @default false\n   */\n  disableRipple?: boolean;\n  /**\n   * An icon before the label, in the page's 18dp size. Replaced by the check\n   * while the segment is chosen, unless the set turns that off. An icon drawn\n   * in `em` takes that size from the slot.\n   */\n  icon?: ReactNode;\n  /** A function may compute the style from the segment's render state. */\n  style?: RACToggleButtonProps['style'];\n};\n\n/**\n * What the glyph slot draws: the check on a chosen segment, or the segment's\n * own icon. `null` for a segment with neither, which leaves the slot empty\n * and closed rather than unrendered. Returns a node rather than letting the\n * type be inferred, since `ReactNode` is a union that includes a promise and\n * an inferred one has to be `async`.\n */\nfunction glyphFor(state: ToggleButtonRenderProps, icon: ReactNode, showSelectedIcon: boolean): ReactNode {\n  if (state.isSelected && showSelectedIcon) {\n    return <CheckGlyph className=\"x5yr21d x2lah0s x1xp8n7a\" />;\n  }\n  return icon ?? null;\n}\n\n// The chosen container's class, from the segment's own state and the shared\n// element's. A function, because React Aria hands the indicator the entering\n// and leaving states the fade is drawn from, and those are the only two the\n// element knows about itself.\nfunction indicatorClassName(isDisabled: boolean, selectionMode: SelectionMode): (state: SharedElementRenderProps) => string {\n  return state => ({\n    0: {\n      className: \"x15dekr4 xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk xioksi3 x1c42kcb x1seskgd\"\n    },\n    4: {\n      className: \"x15dekr4 xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk x1qno0dh x19991ni xpc4ca7\"\n    },\n    2: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk xioksi3 x1c42kcb x1seskgd xepofeg\"\n    },\n    6: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk x1qno0dh x19991ni xpc4ca7 xepofeg\"\n    },\n    1: {\n      className: \"x15dekr4 xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk xioksi3 x1c42kcb x1seskgd xg01cxk\"\n    },\n    5: {\n      className: \"x15dekr4 xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk x1qno0dh x19991ni xpc4ca7 xg01cxk\"\n    },\n    3: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk xioksi3 x1c42kcb x1seskgd xepofeg xg01cxk\"\n    },\n    7: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk x1qno0dh x19991ni xpc4ca7 xepofeg xg01cxk\"\n    }\n  })[!!(selectionMode === 'multiple') << 2 | !!isDisabled << 1 | !!(state.isEntering || state.isExiting) << 0].className ?? '';\n}\n\n// What a segment draws, from React Aria's render state. Built by a call\n// 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\n// on its inputs.\nfunction segmentContent(children: ReactNode, icon: ReactNode, ripple: Ripple, selectionMode: SelectionMode, showSelectedIcon: boolean) {\n  // Whether this segment can ever draw a glyph, and so whether it keeps room\n  // for one. A set that draws no check and a segment with no icon of its own\n  // never needs the slot, and reserving it there would be dead space in\n  // every segment of the track.\n  const reserves = showSelectedIcon || icon !== undefined;\n  return (state: ToggleButtonRenderProps) => {\n    const glyph = glyphFor(state, icon, showSelectedIcon);\n    return <>\n        <RACSelectionIndicator className={indicatorClassName(state.isDisabled, selectionMode)} />\n        <span {...{\n        0: {\n          className: \"x12w9bfk xtwfq29 x1pjcqnp x9f619 x1jz8bvi xg01cxk x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4\"\n        },\n        4: {\n          className: \"x12w9bfk xtwfq29 x1pjcqnp x9f619 x1jz8bvi x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4 xe2qvxb\"\n        },\n        2: {\n          className: \"x12w9bfk xtwfq29 x1pjcqnp x9f619 x1jz8bvi x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4 xcl2av\"\n        },\n        6: {\n          className: \"x12w9bfk xtwfq29 x1pjcqnp x9f619 x1jz8bvi x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4 xcl2av\"\n        },\n        1: {\n          className: \"x12w9bfk xtwfq29 x1pjcqnp x9f619 x1jz8bvi x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4 xjg27g\"\n        },\n        5: {\n          className: \"x12w9bfk xtwfq29 x1pjcqnp x9f619 x1jz8bvi x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4 xjg27g\"\n        },\n        3: {\n          className: \"x12w9bfk xtwfq29 x1pjcqnp x9f619 x1jz8bvi x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4 xjg27g\"\n        },\n        7: {\n          className: \"x12w9bfk xtwfq29 x1pjcqnp x9f619 x1jz8bvi x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4 xjg27g\"\n        }\n      }[!!state.isHovered << 2 | !!state.isFocusVisible << 1 | !!state.isPressed << 0]} />\n        {reserves && <span {...{\n        0: {\n          className: \"x12w9bfk x6s0dn4 xmix8c7 x3nfvp2 xosj86m xnalus7 xwa60dl x2xyl1b xl56j7k xb3r6kr x47corl x10l6tqk xmzmy3r x1qno0dh x1j4rzew xpc4ca7\"\n        },\n        1: {\n          className: \"x12w9bfk x6s0dn4 xmix8c7 x3nfvp2 xosj86m xwa60dl x2xyl1b xl56j7k xb3r6kr x47corl x10l6tqk xmzmy3r x1qno0dh x1j4rzew xpc4ca7 x1xp8n7a\"\n        }\n      }[!!(glyph !== null) << 0]}>\n            {glyph}\n          </span>}\n        <span {...stylex.props(styles.label, reserves && (glyph === null ? styles.labelReserved : styles.labelShifted))}>\n          {children}\n        </span>\n        {ripple.surface}\n      </>;\n  };\n}\n\n/**\n * A row of two to five joined segments, of which one — or with\n * `selectionMode=\"multiple\"`, several — is chosen. Selection is React Aria's:\n * pass `selectedKeys` with `onSelectionChange` to control it, or\n * `defaultSelectedKeys` to let it keep its own. Give every segment an `id`,\n * which is the key selection is reported by.\n *\n * ```tsx\n * <SegmentedButton aria-label=\"Label\" defaultSelectedKeys={['first']}>\n *   <SegmentedButton.Segment id=\"first\">First item</SegmentedButton.Segment>\n *   <SegmentedButton.Segment id=\"second\">Second item</SegmentedButton.Segment>\n * </SegmentedButton>\n * ```\n *\n * Name the set with `aria-label` or `aria-labelledby` — nothing here labels\n * it for you, and a set with no name is a group a screen reader cannot\n * announce. What it is announced as follows the selection mode: choosing one\n * is a radio group, choosing several a toolbar of two-state buttons. So does\n * how the chosen container moves: it slides between segments while one is\n * chosen, and fades in place while several may be.\n *\n * The call site's `className` and `style` land on the track, which is the\n * element a layout positions.\n */\nfunction SegmentedButton({\n  selectionMode = 'single',\n  showSelectedIcon = true,\n  ...props\n}: SegmentedButtonProps) {\n  return <ShowSelectedIconContext value={showSelectedIcon}>\n      <SelectionModeContext value={selectionMode}>\n        <RACToggleButtonGroup {...props} selectionMode={selectionMode} {...mergeStatefulStyles({\n        className: \"x9f619 xwz0xwf xu6a5m6 x1mt1orb xc8icb0\"\n      }, props)} />\n      </SelectionModeContext>\n    </ShowSelectedIconContext>;\n}\n\n/**\n * One segment. Its `id` is what selection is reported by, and its label is\n * what names it. A chosen segment draws a check before the label; an\n * unchosen one draws whatever `icon` holds, if anything.\n */\nfunction SegmentedButtonSegment({\n  children,\n  disableRipple = false,\n  icon,\n  ...props\n}: SegmentedButtonSegmentProps) {\n  const selectionMode = useContext(SelectionModeContext);\n  const showSelectedIcon = useContext(ShowSelectedIconContext);\n  // Off while disabled, as in Button: a control that cannot be pressed\n  // should not answer a press with an animation.\n  const ripple = useRipple<FocusableElement>(!disableRipple && props.isDisabled !== true);\n  return <RACToggleButton {...props} {...ripple.handlers} {...mergeStatefulStyles(segmentStyles, props)}>\n      {segmentContent(children, icon, ripple, selectionMode, showSelectedIcon)}\n    </RACToggleButton>;\n}\n\n// StyleX cannot target `[data-selected]` on the element it is styling, so a\n// segment's state comes from the render state React Aria hands its\n// className. `disabled` is applied last so its label colour wins over both\n// of the others.\nfunction segmentStyles(state: ToggleButtonRenderProps) {\n  return stylex.props(styles.segment, focus.ring, state.isSelected ? styles.segmentSelected : styles.segmentUnselected, state.isDisabled && styles.segmentDisabled);\n}\nSegmentedButton.Segment = SegmentedButtonSegment;\nexport type { SegmentedButtonProps, SegmentedButtonSegmentProps };\nexport default SegmentedButton;"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","RefObject","SelectProps","RACSelectProps","SelectRenderProps","stylex","useContext","useRef","Popover","RACPopover","Select","RACSelect","SelectValue","RACSelectValue","SelectStateContext","FieldVariant","FieldBox","FieldMessage","FieldTrigger","FieldValue","fieldStyles","invalidFrom","useFieldValidationBehavior","ChevronEndGlyph","mergeStatefulStyles","overlay","colors","motion","radii","spacing","ListBox","TRIGGER","chevronFor","isOpen","className","styles","list","kWkggS","kaIpWk","kzqmXN","kskxy","ks0D6T","k7Eaqz","kORKVm","k8WAf4","$$css","container","Element","description","error","floatingLabel","label","leadingIcon","options","variant","Omit","T","t0","$","_c","t1","isDisabled","t2","t3","props","undefined","validationBehavior","boxRef","T0","t4","t5","root","t6","selectContent","t7","HTMLDivElement","state","isInvalid","isFocused","popup","SelectedValue","isPlaceholder","selectionManager","selectedKeys","size","Symbol","for"],"sources":["../../../src/components/select/index.tsx"],"sourcesContent":["import type { ReactNode, RefObject } from 'react';\nimport type { SelectProps as RACSelectProps, SelectRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { useContext, useRef } from 'react';\nimport { Popover as RACPopover, Select as RACSelect, SelectValue as RACSelectValue, SelectStateContext } from 'react-aria-components';\nimport type { FieldVariant } from '../../field';\nimport { FieldBox, FieldMessage, FieldTrigger, FieldValue } from '../../field';\nimport { fieldStyles, invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { ChevronEndGlyph } from '../../glyphs';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport { overlay } from '../../styles/overlay';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, spacing } from '../../tokens/design.tokens.stylex';\nimport ListBox from '../list-box';\n\n// The menus page's exposed dropdown menu: a text field that opens a list\n// rather than taking a keystroke. Everything above the list is the field\n// chrome in `src/field` — the same box, label, supporting line and error\n// treatment every other field draws — and the list is ListBox on the shared\n// overlay surface. What is here is React Aria's `Select` around the two, and\n// the three things that are this component's own.\n//\n// **The whole box opens the list.** The chrome's `FieldTrigger` covers the\n// box rather than sitting on the value's line, so the padding, the label and\n// the icons all open it, which is what the page draws and what a native\n// select does. It draws nothing itself: the box already carries the fill,\n// the underline and the focus indicator.\n//\n// **The chevron turns.** The page's trailing icon points down while the list\n// is closed and up while it is open. React Aria reports which through the\n// select's render state, so it is drawn from that rather than swapped for a\n// second glyph.\n//\n// **The list is the field's width.** The page draws it under the field and\n// as wide as it, which React Aria reports as `--trigger-width` — of whatever\n// it is anchored to. Left alone that is the button, which fills the box's\n// value column rather than the box, so the list came out narrower than the\n// field by the icons either side of it. Pointing the popover's `triggerRef`\n// at the box is what makes the two agree. The overlay's own 112 to 280 range\n// is a menu opened from a button rather than from a field, so it goes.\n//\n// A select's value is chosen rather than typed, which the chrome had no\n// notion of until this component: `useFieldPopulated` now reads the select's\n// own state, so the floating label floats once something is chosen.\n\n// Hoisted, and the chevron built by a call, so neither is a new element on\n// every render — which is what react-perf's jsx-no-jsx-as-prop is after.\nconst TRIGGER = <FieldTrigger />;\nfunction chevronFor(isOpen: boolean) {\n  return <ChevronEndGlyph {...{\n    0: {\n      className: \"x12w9bfk xxk0z11 xvy4d1p x1iffjtl xkzkux9 x11xpdln xpc4ca7\"\n    },\n    1: {\n      className: \"x12w9bfk xxk0z11 xvy4d1p xkzkux9 x11xpdln xpc4ca7 x9tu13d\"\n    }\n  }[!!isOpen << 0]} />;\n}\nconst styles = {\n  list: {\n    kWkggS: \"x1vnz5z6\",\n    kaIpWk: \"x1tfhd1\",\n    kzqmXN: \"xlvufjm\",\n    kskxy: \"xedcshv\",\n    ks0D6T: \"x1x1rfll\",\n    k7Eaqz: \"xeuugli\",\n    kORKVm: \"x1odjw0f\",\n    k8WAf4: \"x1cmllll\",\n    $$css: true\n  }\n};\ntype SelectProps<T extends object = object> = {\n  /**\n   * Where to portal the list. Defaults to the end of `<body>`, which is\n   * right for an app that sets its StyleX theme on `:root`. An app that\n   * scopes the theme to a subtree has to point this at an element inside it,\n   * or the list renders outside the theme and falls back to the tokens'\n   * `prefers-color-scheme` default.\n   */\n  container?: Element;\n  /**\n   * A hint shown under the field. Replaced by `error` when there is one, so\n   * the two never stack.\n   */\n  description?: string;\n  /**\n   * The problem with the current value, in words. Its presence is what puts\n   * the field in its error state — the message, the red underline, and\n   * `aria-invalid` all follow from it.\n   *\n   * Outside a `Form` the message line arrives with the message, so the\n   * field grows when this does and moves what is under it. A `Form` holds\n   * that space from the start; so does a permanent `description`.\n   */\n  error?: string;\n  /**\n   * Whether the label sits in the empty box and floats to the top once the\n   * field is focused or something is chosen. `false` keeps it small at the\n   * top in every state.\n   * @default true\n   */\n  floatingLabel?: boolean;\n  /**\n   * What the field is for. Required rather than optional: a select with no\n   * label is a box a screen reader cannot name.\n   */\n  label: string;\n  /**\n   * An icon at the start of the box, before the label and the value: the\n   * page's 24dp leading icon, in the muted role. An icon drawn in `em` takes\n   * that size from the slot.\n   */\n  leadingIcon?: ReactNode;\n  /**\n   * The options. `ListBox.Item` for each, and `ListBox.Section` to group\n   * them — the list inside is a ListBox, and takes everything one does.\n   */\n  options?: ReactNode;\n  /**\n   * The filled box, or the outlined one, as the text fields page draws them.\n   * @default 'filled'\n   */\n  variant?: FieldVariant;\n} & Omit<RACSelectProps<T>, 'children' | 'defaultSelectedKey' | 'isInvalid' | 'onSelectionChange' | 'selectedKey' | 'validationBehavior'>;\n\n/**\n * A labelled field that opens a list to choose from. Its value is React\n * Aria's: pass `value` with `onChange` to control it, or `defaultValue` to\n * let it keep its own. The value is an option's `id`, so give every option\n * one. React Aria's older `selectedKey` names are deprecated and are left\n * out of this component's props rather than passed through.\n *\n * ```tsx\n * <Select\n *   label=\"Label\"\n *   options={\n *     <>\n *       <ListBox.Item id=\"first\">First item</ListBox.Item>\n *       <ListBox.Item id=\"second\">Second item</ListBox.Item>\n *     </>\n *   }\n * />\n * ```\n *\n * The box, label, supporting line and error are the field chrome in\n * `src/field`, shared with every other field; the list is ListBox on the\n * overlay surface every anchored panel here draws.\n *\n * The call site's `className` and `style` land on the field as a whole,\n * which is the element a layout positions.\n */\nfunction Select<T extends object = object>({\n  container,\n  description,\n  error,\n  floatingLabel = true,\n  isDisabled = false,\n  label,\n  leadingIcon,\n  options,\n  variant = 'filled',\n  ...props\n}: SelectProps<T>) {\n  const validationBehavior = useFieldValidationBehavior();\n  // What the list is anchored to and takes its width from — see the note at\n  // the top of the file.\n  const boxRef = useRef<HTMLDivElement>(null);\n  return <RACSelect<T> isDisabled={isDisabled} isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(fieldStyles.root), props)}>\n      {selectContent(label, leadingIcon, floatingLabel, variant, description, error, options, container, boxRef)}\n    </RACSelect>;\n}\n\n// What the field draws, from React Aria's render state. Built by a call\n// 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\n// on its inputs.\n//\n// The state is read for the chevron alone — which way it points — since\n// everything else the box shows it reads from its own focus and validity.\nfunction selectContent(label: string, leadingIcon: ReactNode, floatingLabel: boolean, variant: FieldVariant, description: string | undefined, error: string | undefined, options: ReactNode, container: Element | undefined, boxRef: RefObject<HTMLDivElement | null>) {\n  return (state: SelectRenderProps) => <>\n      <FieldBox floatingLabel={floatingLabel}\n    // React Aria's `TextField` hands its group the field's disabled and\n    // invalid state through context; its `Select` does not, so the box is\n    // told outright or its label and its underline never turn.\n    isDisabled={state.isDisabled} isInvalid={state.isInvalid} label={label} leading={leadingIcon} ref={boxRef} trailing={chevronFor(state.isOpen)} trigger={TRIGGER} variant={variant}>\n        <SelectedValue isFocused={state.isFocused} />\n      </FieldBox>\n      <FieldMessage description={description} error={error} />\n      <RACPopover triggerRef={boxRef}\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.popup, styles.list)}>\n        <ListBox>{options}</ListBox>\n      </RACPopover>\n    </>;\n}\n\n/**\n * What has been chosen, drawn on the value's line. The chrome's `FieldValue`\n * is the styled element and React Aria's `SelectValue` sits inside it, since\n * the wrapper is the box's flex item.\n */\nfunction SelectedValue({\n  isFocused\n}: {\n  isFocused: boolean;\n}) {\n  const state = useContext(SelectStateContext);\n  const isPlaceholder = (state?.selectionManager.selectedKeys.size ?? 0) === 0;\n  return <FieldValue isFocused={isFocused} isPlaceholder={isPlaceholder}>\n      <RACSelectValue />\n    </FieldValue>;\n}\nexport type { SelectProps };\nexport default Select;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ReactNode","RefObject","SelectProps","RACSelectProps","SelectRenderProps","stylex","useContext","useRef","Popover","RACPopover","Select","RACSelect","SelectValue","RACSelectValue","SelectStateContext","FieldVariant","FieldBox","FieldMessage","FieldTrigger","FieldValue","fieldStyles","invalidFrom","useFieldValidationBehavior","ChevronEndGlyph","mergeStatefulStyles","overlay","colors","motion","radii","spacing","ListBox","TRIGGER","chevronFor","isOpen","className","styles","list","kWkggS","kaIpWk","kzqmXN","kskxy","ks0D6T","k7Eaqz","kORKVm","k8WAf4","$$css","container","Element","description","error","floatingLabel","label","leadingIcon","options","variant","Omit","T","t0","$","_c","t1","isDisabled","t2","t3","props","undefined","validationBehavior","boxRef","T0","t4","t5","root","t6","selectContent","t7","HTMLDivElement","state","isInvalid","isFocused","popup","SelectedValue","isPlaceholder","selectionManager","selectedKeys","size","Symbol","for","Select","_c","props","RACSelect","stylex.props","RACPopover","ListBox","RACSelectValue"],"sources":["../../../src/components/select/index.tsx"],"sourcesContent":["import type { ReactNode, RefObject } from 'react';\nimport type { SelectProps as RACSelectProps, SelectRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { useContext, useRef } from 'react';\nimport { Popover as RACPopover, Select as RACSelect, SelectValue as RACSelectValue, SelectStateContext } from 'react-aria-components';\nimport type { FieldVariant } from '../../field';\nimport { FieldBox, FieldMessage, FieldTrigger, FieldValue } from '../../field';\nimport { fieldStyles, invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { ChevronEndGlyph } from '../../glyphs';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport { overlay } from '../../styles/overlay';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, spacing } from '../../tokens/design.tokens.stylex';\nimport ListBox from '../list-box';\n\n// The menus page's exposed dropdown menu: a text field that opens a list\n// rather than taking a keystroke. Everything above the list is the field\n// chrome in `src/field` — the same box, label, supporting line and error\n// treatment every other field draws — and the list is ListBox on the shared\n// overlay surface. What is here is React Aria's `Select` around the two, and\n// the three things that are this component's own.\n//\n// **The whole box opens the list.** The chrome's `FieldTrigger` covers the\n// box rather than sitting on the value's line, so the padding, the label and\n// the icons all open it, which is what the page draws and what a native\n// select does. It draws nothing itself: the box already carries the fill,\n// the underline and the focus indicator.\n//\n// **The chevron turns.** The page's trailing icon points down while the list\n// is closed and up while it is open. React Aria reports which through the\n// select's render state, so it is drawn from that rather than swapped for a\n// second glyph.\n//\n// **The list is the field's width.** The page draws it under the field and\n// as wide as it, which React Aria reports as `--trigger-width` — of whatever\n// it is anchored to. Left alone that is the button, which fills the box's\n// value column rather than the box, so the list came out narrower than the\n// field by the icons either side of it. Pointing the popover's `triggerRef`\n// at the box is what makes the two agree. The overlay's own 112 to 280 range\n// is a menu opened from a button rather than from a field, so it goes.\n//\n// A select's value is chosen rather than typed, which the chrome had no\n// notion of until this component: `useFieldPopulated` now reads the select's\n// own state, so the floating label floats once something is chosen.\n\n// Hoisted, and the chevron built by a call, so neither is a new element on\n// every render — which is what react-perf's jsx-no-jsx-as-prop is after.\nconst TRIGGER = <FieldTrigger />;\nfunction chevronFor(isOpen: boolean) {\n  return <ChevronEndGlyph {...{\n    0: {\n      className: \"x12w9bfk xxk0z11 xvy4d1p x1iffjtl xkzkux9 x11xpdln xpc4ca7\"\n    },\n    1: {\n      className: \"x12w9bfk xxk0z11 xvy4d1p xkzkux9 x11xpdln xpc4ca7 x9tu13d\"\n    }\n  }[!!isOpen << 0]} />;\n}\nconst styles = {\n  list: {\n    kWkggS: \"x1vnz5z6\",\n    kaIpWk: \"x1tfhd1\",\n    kzqmXN: \"xlvufjm\",\n    kskxy: \"xedcshv\",\n    ks0D6T: \"x1x1rfll\",\n    k7Eaqz: \"xeuugli\",\n    kORKVm: \"x1odjw0f\",\n    k8WAf4: \"x1cmllll\",\n    $$css: true\n  }\n};\ntype SelectProps<T extends object = object> = {\n  /**\n   * Where to portal the list. Defaults to the end of `<body>`, which is\n   * right for an app that sets its StyleX theme on `:root`. An app that\n   * scopes the theme to a subtree has to point this at an element inside it,\n   * or the list renders outside the theme and falls back to the tokens'\n   * `prefers-color-scheme` default.\n   */\n  container?: Element;\n  /**\n   * A hint shown under the field. Replaced by `error` when there is one, so\n   * the two never stack.\n   */\n  description?: string;\n  /**\n   * The problem with the current value, in words. Its presence is what puts\n   * the field in its error state — the message, the red underline, and\n   * `aria-invalid` all follow from it.\n   *\n   * Outside a `Form` the message line arrives with the message, so the\n   * field grows when this does and moves what is under it. A `Form` holds\n   * that space from the start; so does a permanent `description`.\n   */\n  error?: string;\n  /**\n   * Whether the label sits in the empty box and floats to the top once the\n   * field is focused or something is chosen. `false` keeps it small at the\n   * top in every state.\n   * @default true\n   */\n  floatingLabel?: boolean;\n  /**\n   * What the field is for. Required rather than optional: a select with no\n   * label is a box a screen reader cannot name.\n   */\n  label: string;\n  /**\n   * An icon at the start of the box, before the label and the value: the\n   * page's 24dp leading icon, in the muted role. An icon drawn in `em` takes\n   * that size from the slot.\n   */\n  leadingIcon?: ReactNode;\n  /**\n   * The options. `ListBox.Item` for each, and `ListBox.Section` to group\n   * them — the list inside is a ListBox, and takes everything one does.\n   */\n  options?: ReactNode;\n  /**\n   * The filled box, or the outlined one, as the text fields page draws them.\n   * @default 'filled'\n   */\n  variant?: FieldVariant;\n} & Omit<RACSelectProps<T>, 'children' | 'defaultSelectedKey' | 'isInvalid' | 'onSelectionChange' | 'selectedKey' | 'validationBehavior'>;\n\n/**\n * A labelled field that opens a list to choose from. Its value is React\n * Aria's: pass `value` with `onChange` to control it, or `defaultValue` to\n * let it keep its own. The value is an option's `id`, so give every option\n * one. React Aria's older `selectedKey` names are deprecated and are left\n * out of this component's props rather than passed through.\n *\n * ```tsx\n * <Select\n *   label=\"Label\"\n *   options={\n *     <>\n *       <ListBox.Item id=\"first\">First item</ListBox.Item>\n *       <ListBox.Item id=\"second\">Second item</ListBox.Item>\n *     </>\n *   }\n * />\n * ```\n *\n * The box, label, supporting line and error are the field chrome in\n * `src/field`, shared with every other field; the list is ListBox on the\n * overlay surface every anchored panel here draws.\n *\n * The call site's `className` and `style` land on the field as a whole,\n * which is the element a layout positions.\n */\nfunction Select<T extends object = object>({\n  container,\n  description,\n  error,\n  floatingLabel = true,\n  isDisabled = false,\n  label,\n  leadingIcon,\n  options,\n  variant = 'filled',\n  ...props\n}: SelectProps<T>) {\n  const validationBehavior = useFieldValidationBehavior();\n  // What the list is anchored to and takes its width from — see the note at\n  // the top of the file.\n  const boxRef = useRef<HTMLDivElement>(null);\n  return <RACSelect<T> isDisabled={isDisabled} isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(fieldStyles.root), props)}>\n      {selectContent(label, leadingIcon, floatingLabel, variant, description, error, options, container, boxRef)}\n    </RACSelect>;\n}\n\n// What the field draws, from React Aria's render state. Built by a call\n// 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\n// on its inputs.\n//\n// The state is read for the chevron alone — which way it points — since\n// everything else the box shows it reads from its own focus and validity.\nfunction selectContent(label: string, leadingIcon: ReactNode, floatingLabel: boolean, variant: FieldVariant, description: string | undefined, error: string | undefined, options: ReactNode, container: Element | undefined, boxRef: RefObject<HTMLDivElement | null>) {\n  return (state: SelectRenderProps) => <>\n      <FieldBox floatingLabel={floatingLabel}\n    // React Aria's `TextField` hands its group the field's disabled and\n    // invalid state through context; its `Select` does not, so the box is\n    // told outright or its label and its underline never turn.\n    isDisabled={state.isDisabled} isInvalid={state.isInvalid} label={label} leading={leadingIcon} ref={boxRef} trailing={chevronFor(state.isOpen)} trigger={TRIGGER} variant={variant}>\n        <SelectedValue isFocused={state.isFocused} />\n      </FieldBox>\n      <FieldMessage description={description} error={error} />\n      <RACPopover triggerRef={boxRef}\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.popup, styles.list)}>\n        <ListBox>{options}</ListBox>\n      </RACPopover>\n    </>;\n}\n\n/**\n * What has been chosen, drawn on the value's line. The chrome's `FieldValue`\n * is the styled element and React Aria's `SelectValue` sits inside it, since\n * the wrapper is the box's flex item.\n */\nfunction SelectedValue({\n  isFocused\n}: {\n  isFocused: boolean;\n}) {\n  const state = useContext(SelectStateContext);\n  const isPlaceholder = (state?.selectionManager.selectedKeys.size ?? 0) === 0;\n  return <FieldValue isFocused={isFocused} isPlaceholder={isPlaceholder}>\n      <RACSelectValue />\n    </FieldValue>;\n}\nexport type { SelectProps };\nexport default Select;"],"mappings":";;;;;;;;;;;;AA+CA,MAAM+B,UAAU,oBAAC,cAAD,CAAa,CAAA;AAC7B,SAASC,WAAWC,QAAiB;CACnC,OAAO,oBAAC,iBAAD,EAAiB,GAAI;EAC1B,GAAG,EACDC,WAAW,6DACb;EACA,GAAG,EACDA,WAAW,4DACb;CACF,EAAE,CAAC,CAACD,UAAU,GAAG,CAAA;AACnB;AACA,MAAME,SAAS,EACbC,MAAM;CACJC,QAAQ;CACRC,QAAQ;CACRC,QAAQ;CACRC,OAAO;CACPC,QAAQ;CACRC,QAAQ;CACRC,QAAQ;CACRC,QAAQ;CACRC,OAAO;AACT,EACF;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiFA,SAAAnC,SAAA+C,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAA2C,MAAA,EAAAb,WAAAE,aAAAC,OAAAC,eAAAU,IAAAC,YAAAC,IAAAX,OAAAC,aAAAC,SAAAC,SAAAS,IAAA,GAAAC,YAAAP;CAIzC,MAAAP,gBAAAU,OAAAK,KAAAA,IAAA,OAAAL;CACA,MAAAC,aAAAC,OAAAG,KAAAA,IAAA,QAAAH;CAIA,MAAAR,UAAAS,OAAAE,KAAAA,IAAA,WAAAF;CAGA,MAAAG,qBAA2B5C,2BAA2B;CAGtD,MAAA6C,SAAe5D,OAAuB,IAAI;CAClC,MAAA6D,KAAAzD;CAAS,IAAA0D;CAAA,IAAAX,EAAA,OAAAT,OAAA;EAAuCoB,KAAAhD,YAAY4B,KAAK;EAACS,EAAA,KAAAT;EAAAS,EAAA,KAAAW;CAAA,OAAAA,KAAAX,EAAA;CAAyD,MAAAY,KAAA9C,oBAAoBnB,MAAae,YAAWmD,IAAK,GAAGP,OAAK;CAAC,IAAAQ;CAAA,IAAAd,EAAA,OAAAZ,aAAAY,EAAA,OAAAV,eAAAU,EAAA,OAAAT,SAAAS,EAAA,OAAAR,iBAAAQ,EAAA,OAAAP,SAAAO,EAAA,OAAAN,eAAAM,EAAA,OAAAL,WAAAK,EAAA,OAAAJ,SAAA;EACxLkB,KAAAC,cAActB,OAAOC,aAAaF,eAAeI,SAASN,aAAaC,OAAOI,SAASP,WAAWqB,MAAM;EAACT,EAAA,KAAAZ;EAAAY,EAAA,KAAAV;EAAAU,EAAA,KAAAT;EAAAS,EAAA,KAAAR;EAAAQ,EAAA,KAAAP;EAAAO,EAAA,KAAAN;EAAAM,EAAA,KAAAL;EAAAK,EAAA,KAAAJ;EAAAI,EAAA,MAAAc;CAAA,OAAAA,KAAAd,EAAA;CAAA,IAAAgB;CAAA,IAAAhB,EAAA,QAAAU,MAAAV,EAAA,QAAAG,cAAAH,EAAA,QAAAM,WAAAN,EAAA,QAAAW,MAAAX,EAAA,QAAAY,MAAAZ,EAAA,QAAAc,MAAAd,EAAA,QAAAQ,oBAAA;EADvGQ,KAAA,oBAAC,IAAD;GAA0Bb;GAAuB,WAAAQ;GAAwCH;GAAkB,GAAMF;GAAK,GAAMM;GAC9HE,UAAAA;EADY,CAAA;EAEHd,EAAA,MAAAU;EAAAV,EAAA,MAAAG;EAAAH,EAAA,MAAAM;EAAAN,EAAA,MAAAW;EAAAX,EAAA,MAAAY;EAAAZ,EAAA,MAAAc;EAAAd,EAAA,MAAAQ;EAAAR,EAAA,MAAAgB;CAAA,OAAAA,KAAAhB,EAAA;CAAA,OAFPgB;AAEO;AAUhB,SAASD,cAActB,OAAeC,aAAwBF,eAAwBI,SAAuBN,aAAiCC,OAA2BI,SAAoBP,WAAgCqB,QAA0C;CACrQ,QAAQS,UAA6B,qBAAA,YAAA,EAAA,UAAA;EACjC,oBAAC,UAAD;GAAyB1B;GAI3B,YAAY0B,MAAMf;GAAY,WAAWe,MAAMC;GAAkB1B;GAAO,SAASC;GAAa,KAAKe;GAAQ,UAAUnC,WAAW4C,MAAM3C,MAAM;GAAG,SAASF;GAAkBuB;GACtK,UAAA,oBAAC,eAAD,EAAe,WAAWsB,MAAME,UAAU,CAAA;EAClC,CAAA;EACV,oBAAC,cAAD;GAA2B9B;GAAoBC;EAAM,CAAA;EACrD,oBAAC2C,SAAD;GAAY,YAAYzB;GAE1B,0BAA0BrB;GAAW,GAAIzC,MAAaoB,QAAQsD,OAAO5C,OAAOC,IAAI;GAC5E,UAAA,oBAACyD,WAAD,EAAA,UAAUxC,QAAiB,CAAA;EACjB,CAAA;CACd,EAAA,CAAA;AACJ;;;;;;AAOA,SAAA2B,cAAAvB,IAAA;CAAA,MAAAC,IAAAC,EAAA,CAAA;CAAuB,MAAA,EAAAmB,cAAArB;CAMrB,MAAAwB,iBADc3E,WAAWQ,kBACF8D,CAAK,EAAAM,iBAA+BC,aAAKC,QAAzC,OAAoD;CAAE,IAAAxB;CAAA,IAAAF,EAAA,OAAA2B,OAAAC,IAAA,2BAAA,GAAA;EAEzE1B,KAAA,oBAACkC,aAAD,CAAe,CAAA;EAAGpC,EAAA,KAAAE;CAAA,OAAAA,KAAAF,EAAA;CAAA,IAAAI;CAAA,IAAAJ,EAAA,OAAAoB,aAAApB,EAAA,OAAAuB,eAAA;EADfnB,KAAA,oBAAC,YAAD;GAAuBgB;GAA0BG;GACpDrB,UAAAA;EADc,CAAA;EAEHF,EAAA,KAAAoB;EAAApB,EAAA,KAAAuB;EAAAvB,EAAA,KAAAI;CAAA,OAAAA,KAAAJ,EAAA;CAAA,OAFRI;AAEQ"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["SeparatorProps","RACSeparatorProps","stylex","Separator","RACSeparator","SeparatorContext","useSlottedContext","mergeStyles","colors","spacing","FORCED_COLORS","styles","base","kWkggS","kMzoRj","kB7OPa","kmuXW","kogj98","$$css","horizontal","kZKoxP","kLZC3w","kPef9Z","kEafiO","kzqmXN","vertical","kSGwAc","kGJrpR","kVhnKS","k2ei4v","horizontalInsets","both","k71WvV","keTefX","none","start","verticalInsets","k1K539","keoZOQ","insets","SeparatorInset","Omit","inset","orientation","t0","$","_c","t1","props","undefined","context","slot","resolved","T0","t2","t3"],"sources":["../../../src/components/separator/index.tsx"],"sourcesContent":["import type { SeparatorProps as RACSeparatorProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Separator as RACSeparator, SeparatorContext, useSlottedContext } from 'react-aria-components';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, spacing } 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// A divider is the same colour as a border, so it draws from outlineVariant\n// rather than a role of its own — the design system treats the two as one\n// decision, and a separator that drifted from the borders around it would\n// read as a mistake.\n//\n// Drawn as a background on a 1px box rather than as a border, so the rule is\n// the element itself. A border would leave the element's own box at zero\n// size, which makes it invisible to flex `gap` and to anything measuring it.\n// The horizontal element is an <hr>, which arrives with a border and a\n// margin of its own; both are zeroed here so it is the same 1px box a <div>\n// would be.\n//\n// Vertical has no length of its own. `alignSelf: stretch` takes it from the\n// flex or grid parent, since a divider between two rows should match\n// whatever they turn out to be rather than being told a height at the call\n// site. In a plain block parent there is nothing to stretch to and it will\n// have no height — that is the documented cost of the prop.\n//\n// The divider page gives three forms and this draws all three: full width,\n// inset by 16dp at the leading end, and middle-inset by 16dp at both. The\n// page names them \"inset\" and \"middle-inset\"; the prop says `start` and\n// `both` instead, since `inset=\"inset\"` reads as nothing at all and the two\n// words say which ends move.\n//\n// The inset is drawn as a margin on the logical axis the rule runs along, so\n// it follows the writing mode and works for a vertical rule as well — the\n// page only draws horizontal ones, but a shortened vertical rule between two\n// columns is the same idea and would otherwise have to be written at the\n// call site. An inset rule also drops its `100%` length: a margin sits\n// outside the box, so a full-width rule with one would overflow its parent\n// by exactly the inset.\n//\n// The orientation is resolved rather than defaulted eagerly, so a container\n// that sets one through React Aria's separator context reaches it. Toolbar\n// is what needs that: a rule between two controls in a row is vertical, and\n// a `Separator` written inside one should not have to say so. React Aria's\n// own `Toolbar` sets no such context — it puts the orientation on itself and\n// nothing else — so ours provides it, and this is the half that reads it.\nconst styles = {\n  base: {\n    kWkggS: \"x1l12bh\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kmuXW: \"x2lah0s\",\n    kogj98: \"x1ghz6dp\",\n    $$css: true\n  },\n  horizontal: {\n    kZKoxP: \"xjm9jq1\",\n    kLZC3w: \"x19dwuzr\",\n    kPef9Z: \"x4z998w\",\n    kEafiO: \"x1lym3mf\",\n    kzqmXN: \"xh8yej3\",\n    $$css: true\n  },\n  vertical: {\n    kSGwAc: \"xkh2ocl\",\n    kGJrpR: \"xjslfuv\",\n    kVhnKS: \"x1gbqego\",\n    k2ei4v: \"xjg5lhu\",\n    kzqmXN: \"x1i1rx1s\",\n    $$css: true\n  }\n};\n\n// The page's 16dp, on whichever axis the rule runs along. `auto` replaces the\n// `100%` a full-width rule takes, since a margin outside a 100% box overflows\n// the parent by the inset.\nconst horizontalInsets = {\n  both: {\n    kzqmXN: \"x14atkfc\",\n    k71WvV: \"xdf1gh2\",\n    keTefX: \"x1m7rnnc\",\n    $$css: true\n  },\n  none: {\n    $$css: true\n  },\n  start: {\n    kzqmXN: \"x14atkfc\",\n    keTefX: \"x1m7rnnc\",\n    $$css: true\n  }\n};\n\n// A vertical rule takes its length from the parent through `alignSelf`, so\n// the margin shortens it from the end it is on rather than moving it.\nconst verticalInsets = {\n  both: {\n    k1K539: \"xxkrg4w\",\n    keoZOQ: \"xwf6w2j\",\n    $$css: true\n  },\n  none: {\n    $$css: true\n  },\n  start: {\n    keoZOQ: \"xwf6w2j\",\n    $$css: true\n  }\n};\nconst insets = {\n  horizontal: horizontalInsets,\n  vertical: verticalInsets\n};\ntype SeparatorInset = 'both' | 'none' | 'start';\ntype SeparatorProps = Omit<RACSeparatorProps, 'orientation'> & {\n  /**\n   * How far the rule is held off the edges it runs between. `start` holds it\n   * 16dp off the leading end, which is the page's inset divider; `both`\n   * holds it off each end, which is its middle-inset one. The inset follows\n   * the writing mode rather than a fixed side.\n   * @default 'none'\n   */\n  inset?: SeparatorInset;\n  /**\n   * Which way the rule runs. A vertical separator takes its length from a\n   * flex or grid parent and has none of its own. Defaults to whatever the\n   * container asks for — a `Toolbar` asks for the rule across its own\n   * direction — and to horizontal outside one.\n   */\n  orientation?: 'horizontal' | 'vertical';\n};\n\n/**\n * A 1px rule between items. The orientation drives the accessibility tree as\n * well as which side the rule is drawn on: horizontal renders an `<hr>`,\n * whose role and orientation are implicit, and vertical a `<div>` given the\n * separator role and `aria-orientation=\"vertical\"`.\n *\n * `inset` holds the rule off the ends it runs between — `start` off the\n * leading one, `both` off each — which is what a rule between list rows\n * takes so it lines up with their text rather than the container's edge.\n *\n * React Aria's rather than a styled element of the library's own, so a\n * `Menu` or `Toolbar` around it reaches it through context — a separator\n * between menu items is part of the collection, and one in a toolbar takes\n * the rule across the toolbar's own direction. `elementType` picks a\n * different element, and `render` is React Aria's function form.\n */\nfunction Separator({\n  inset = 'none',\n  orientation,\n  ...props\n}: SeparatorProps) {\n  const context = useSlottedContext(SeparatorContext, props.slot);\n  const resolved = orientation ?? context?.orientation ?? 'horizontal';\n  return <RACSeparator orientation={resolved} {...props} {...mergeStyles(stylex.props(styles.base, styles[resolved], insets[resolved][inset]), props)} />;\n}\nexport type { SeparatorInset, SeparatorProps };\nexport default Separator;"],"mappings":";;;;;;AAmDA,MAAMW,SAAS;CACbC,MAAM;EACJC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;EACPC,QAAQ;EACRC,OAAO;CACT;CACAC,YAAY;EACVC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRN,OAAO;CACT;CACAO,UAAU;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRL,QAAQ;EACRN,OAAO;CACT;AACF;AAsCA,MAAMqB,SAAS;CACbpB,YAAYW;EAjCZC,MAAM;GACJP,QAAQ;GACRQ,QAAQ;GACRC,QAAQ;GACRf,OAAO;EACT;EACAgB,MAAM,EACJhB,OAAO,KACT;EACAiB,OAAO;GACLX,QAAQ;GACRS,QAAQ;GACRf,OAAO;EACT;CAoBYY;CACZL,UAAUW;EAfVL,MAAM;GACJM,QAAQ;GACRC,QAAQ;GACRpB,OAAO;EACT;EACAgB,MAAM,EACJhB,OAAO,KACT;EACAiB,OAAO;GACLG,QAAQ;GACRpB,OAAO;EACT;CAIUkB;AACZ;;;;;;;;;;;;;;;;;AAoCA,SAAAjC,YAAAyC,IAAA;CAAA,MAAAC,IAAAC,EAAA,CAAA;CAAmB,MAAA,EAAAJ,OAAAK,IAAAJ,aAAA,GAAAK,YAAAJ;CACjB,MAAAF,QAAAK,OAAAE,KAAAA,IAAA,SAAAF;CAIA,MAAAG,UAAgB5C,kBAAkBD,kBAAkB2C,QAAKG,IAAK;CAC9D,MAAAC,WAAiBT,eAAeO,SAAOP,eAAtB;CACT,MAAAU,KAAAjD;CAAmD,MAAAkD,KAAA/C,YAAYL,MAAaS,OAAMC,MAAOD,OAAOyC,WAAWb,OAAOa,SAAS,CAACV,MAAM,GAAGM,OAAK;CAAC,IAAAO;CAAA,IAAAV,EAAA,OAAAQ,MAAAR,EAAA,OAAAG,WAAAH,EAAA,OAAAO,YAAAP,EAAA,OAAAS,IAAA;EAA5IC,KAAA,oBAAC,IAAD;GAA2BH,aAAAA;GAAQ,GAAMJ;GAAK,GAAMM;EAAwF,CAAA;EAAIT,EAAA,KAAAQ;EAAAR,EAAA,KAAAG;EAAAH,EAAA,KAAAO;EAAAP,EAAA,KAAAS;EAAAT,EAAA,KAAAU;CAAA,OAAAA,KAAAV,EAAA;CAAA,OAAhJU;AAAgJ"}
+{"version":3,"file":"index.js","names":["SeparatorProps","RACSeparatorProps","stylex","Separator","RACSeparator","SeparatorContext","useSlottedContext","mergeStyles","colors","spacing","FORCED_COLORS","styles","base","kWkggS","kMzoRj","kB7OPa","kmuXW","kogj98","$$css","horizontal","kZKoxP","kLZC3w","kPef9Z","kEafiO","kzqmXN","vertical","kSGwAc","kGJrpR","kVhnKS","k2ei4v","horizontalInsets","both","k71WvV","keTefX","none","start","verticalInsets","k1K539","keoZOQ","insets","SeparatorInset","Omit","inset","orientation","t0","$","_c","t1","props","undefined","context","slot","resolved","T0","t2","t3","Separator","_c","props","RACSeparator","stylex.props"],"sources":["../../../src/components/separator/index.tsx"],"sourcesContent":["import type { SeparatorProps as RACSeparatorProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Separator as RACSeparator, SeparatorContext, useSlottedContext } from 'react-aria-components';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, spacing } 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// A divider is the same colour as a border, so it draws from outlineVariant\n// rather than a role of its own — the design system treats the two as one\n// decision, and a separator that drifted from the borders around it would\n// read as a mistake.\n//\n// Drawn as a background on a 1px box rather than as a border, so the rule is\n// the element itself. A border would leave the element's own box at zero\n// size, which makes it invisible to flex `gap` and to anything measuring it.\n// The horizontal element is an <hr>, which arrives with a border and a\n// margin of its own; both are zeroed here so it is the same 1px box a <div>\n// would be.\n//\n// Vertical has no length of its own. `alignSelf: stretch` takes it from the\n// flex or grid parent, since a divider between two rows should match\n// whatever they turn out to be rather than being told a height at the call\n// site. In a plain block parent there is nothing to stretch to and it will\n// have no height — that is the documented cost of the prop.\n//\n// The divider page gives three forms and this draws all three: full width,\n// inset by 16dp at the leading end, and middle-inset by 16dp at both. The\n// page names them \"inset\" and \"middle-inset\"; the prop says `start` and\n// `both` instead, since `inset=\"inset\"` reads as nothing at all and the two\n// words say which ends move.\n//\n// The inset is drawn as a margin on the logical axis the rule runs along, so\n// it follows the writing mode and works for a vertical rule as well — the\n// page only draws horizontal ones, but a shortened vertical rule between two\n// columns is the same idea and would otherwise have to be written at the\n// call site. An inset rule also drops its `100%` length: a margin sits\n// outside the box, so a full-width rule with one would overflow its parent\n// by exactly the inset.\n//\n// The orientation is resolved rather than defaulted eagerly, so a container\n// that sets one through React Aria's separator context reaches it. Toolbar\n// is what needs that: a rule between two controls in a row is vertical, and\n// a `Separator` written inside one should not have to say so. React Aria's\n// own `Toolbar` sets no such context — it puts the orientation on itself and\n// nothing else — so ours provides it, and this is the half that reads it.\nconst styles = {\n  base: {\n    kWkggS: \"x1l12bh\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kmuXW: \"x2lah0s\",\n    kogj98: \"x1ghz6dp\",\n    $$css: true\n  },\n  horizontal: {\n    kZKoxP: \"xjm9jq1\",\n    kLZC3w: \"x19dwuzr\",\n    kPef9Z: \"x4z998w\",\n    kEafiO: \"x1lym3mf\",\n    kzqmXN: \"xh8yej3\",\n    $$css: true\n  },\n  vertical: {\n    kSGwAc: \"xkh2ocl\",\n    kGJrpR: \"xjslfuv\",\n    kVhnKS: \"x1gbqego\",\n    k2ei4v: \"xjg5lhu\",\n    kzqmXN: \"x1i1rx1s\",\n    $$css: true\n  }\n};\n\n// The page's 16dp, on whichever axis the rule runs along. `auto` replaces the\n// `100%` a full-width rule takes, since a margin outside a 100% box overflows\n// the parent by the inset.\nconst horizontalInsets = {\n  both: {\n    kzqmXN: \"x14atkfc\",\n    k71WvV: \"xdf1gh2\",\n    keTefX: \"x1m7rnnc\",\n    $$css: true\n  },\n  none: {\n    $$css: true\n  },\n  start: {\n    kzqmXN: \"x14atkfc\",\n    keTefX: \"x1m7rnnc\",\n    $$css: true\n  }\n};\n\n// A vertical rule takes its length from the parent through `alignSelf`, so\n// the margin shortens it from the end it is on rather than moving it.\nconst verticalInsets = {\n  both: {\n    k1K539: \"xxkrg4w\",\n    keoZOQ: \"xwf6w2j\",\n    $$css: true\n  },\n  none: {\n    $$css: true\n  },\n  start: {\n    keoZOQ: \"xwf6w2j\",\n    $$css: true\n  }\n};\nconst insets = {\n  horizontal: horizontalInsets,\n  vertical: verticalInsets\n};\ntype SeparatorInset = 'both' | 'none' | 'start';\ntype SeparatorProps = Omit<RACSeparatorProps, 'orientation'> & {\n  /**\n   * How far the rule is held off the edges it runs between. `start` holds it\n   * 16dp off the leading end, which is the page's inset divider; `both`\n   * holds it off each end, which is its middle-inset one. The inset follows\n   * the writing mode rather than a fixed side.\n   * @default 'none'\n   */\n  inset?: SeparatorInset;\n  /**\n   * Which way the rule runs. A vertical separator takes its length from a\n   * flex or grid parent and has none of its own. Defaults to whatever the\n   * container asks for — a `Toolbar` asks for the rule across its own\n   * direction — and to horizontal outside one.\n   */\n  orientation?: 'horizontal' | 'vertical';\n};\n\n/**\n * A 1px rule between items. The orientation drives the accessibility tree as\n * well as which side the rule is drawn on: horizontal renders an `<hr>`,\n * whose role and orientation are implicit, and vertical a `<div>` given the\n * separator role and `aria-orientation=\"vertical\"`.\n *\n * `inset` holds the rule off the ends it runs between — `start` off the\n * leading one, `both` off each — which is what a rule between list rows\n * takes so it lines up with their text rather than the container's edge.\n *\n * React Aria's rather than a styled element of the library's own, so a\n * `Menu` or `Toolbar` around it reaches it through context — a separator\n * between menu items is part of the collection, and one in a toolbar takes\n * the rule across the toolbar's own direction. `elementType` picks a\n * different element, and `render` is React Aria's function form.\n */\nfunction Separator({\n  inset = 'none',\n  orientation,\n  ...props\n}: SeparatorProps) {\n  const context = useSlottedContext(SeparatorContext, props.slot);\n  const resolved = orientation ?? context?.orientation ?? 'horizontal';\n  return <RACSeparator orientation={resolved} {...props} {...mergeStyles(stylex.props(styles.base, styles[resolved], insets[resolved][inset]), props)} />;\n}\nexport type { SeparatorInset, SeparatorProps };\nexport default Separator;"],"mappings":";;;;;;AAmDA,MAAMW,SAAS;CACbC,MAAM;EACJC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;EACPC,QAAQ;EACRC,OAAO;CACT;CACAC,YAAY;EACVC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRN,OAAO;CACT;CACAO,UAAU;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRL,QAAQ;EACRN,OAAO;CACT;AACF;AAsCA,MAAMqB,SAAS;CACbpB,YAAYW;EAjCZC,MAAM;GACJP,QAAQ;GACRQ,QAAQ;GACRC,QAAQ;GACRf,OAAO;EACT;EACAgB,MAAM,EACJhB,OAAO,KACT;EACAiB,OAAO;GACLX,QAAQ;GACRS,QAAQ;GACRf,OAAO;EACT;CAoBYY;CACZL,UAAUW;EAfVL,MAAM;GACJM,QAAQ;GACRC,QAAQ;GACRpB,OAAO;EACT;EACAgB,MAAM,EACJhB,OAAO,KACT;EACAiB,OAAO;GACLG,QAAQ;GACRpB,OAAO;EACT;CAIUkB;AACZ;;;;;;;;;;;;;;;;;AAoCA,SAAAjC,YAAAyC,IAAA;CAAA,MAAAC,IAAAC,EAAA,CAAA;CAAmB,MAAA,EAAAJ,OAAAK,IAAAJ,aAAA,GAAAK,YAAAJ;CACjB,MAAAF,QAAAK,OAAAE,KAAAA,IAAA,SAAAF;CAIA,MAAAG,UAAgB5C,kBAAkBD,kBAAkB2C,QAAKG,IAAK;CAC9D,MAAAC,WAAiBT,eAAeO,SAAOP,eAAtB;CACT,MAAAU,KAAAjD;CAAmD,MAAAkD,KAAA/C,YAAYL,MAAaS,OAAMC,MAAOD,OAAOyC,WAAWb,OAAOa,SAAS,CAACV,MAAM,GAAGM,OAAK;CAAC,IAAAO;CAAA,IAAAV,EAAA,OAAAQ,MAAAR,EAAA,OAAAG,WAAAH,EAAA,OAAAO,YAAAP,EAAA,OAAAS,IAAA;EAA5IC,KAAA,oBAAC,IAAD;GAA2BH,aAAAA;GAAQ,GAAMJ;GAAK,GAAMM;EAAwF,CAAA;EAAIT,EAAA,KAAAQ;EAAAR,EAAA,KAAAG;EAAAH,EAAA,KAAAO;EAAAP,EAAA,KAAAS;EAAAT,EAAA,KAAAU;CAAA,OAAAA,KAAAV,EAAA;CAAA,OAAhJU;AAAgJ"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["HTMLAttributes","ReactNode","ClassNameOrFunction","DialogProps","DialogTriggerProps","HeadingProps","ModalOverlayProps","ModalRenderProps","StyleOrFunction","stylex","useRef","Dialog","DialogTrigger","Heading","Modal","ModalOverlay","useScrollable","mergeStatefulStyles","mergeStyles","overlay","colors","media","motion","radii","shadows","spacing","typography","FORCED_COLORS","slideInFromEnd","slideInFromStart","slideInFromBottom","styles","body","kB7OPa","k1xSpc","kXwgrk","kzQI83","kOIVth","kORKVm","k8WAf4","kg3NbH","$$css","SheetProps","Omit","children","Sheet","t0","$","_c","props","t1","SheetBody","ref","scrollable","undefined","modalBodyRing","t2","SheetContent","className","container","isKeyboardDismissDisabled","style","isDismissable","Symbol","for","scrim","t3","t4","modalDialog","t5","t6","t7","SheetFooter","SheetHandle","SheetHeader","SheetTitle","Body","Content","Footer","Handle","Header","Title","SheetContentProps","Pick","Element","SheetTitleProps"],"sources":["../../../src/components/sheet/index.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\nimport type { ClassNameOrFunction, DialogProps, DialogTriggerProps, HeadingProps, ModalOverlayProps, ModalRenderProps, StyleOrFunction } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { useRef } from 'react';\nimport { Dialog, DialogTrigger, Heading, Modal, ModalOverlay } from 'react-aria-components';\nimport { useScrollable } from '../../hooks/useScrollable';\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    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 */\nfunction Sheet({\n  children,\n  ...props\n}: SheetProps) {\n  return <DialogTrigger {...props}>{children}</DialogTrigger>;\n}\nfunction SheetBody(props: HTMLAttributes<HTMLDivElement>) {\n  const ref = useRef<HTMLDivElement>(null);\n  // A body its content runs past is a tab stop, so a keyboard can scroll it\n  // when nothing inside it takes focus; a call site's own tabIndex still\n  // wins. See useScrollable.\n  const scrollable = useScrollable(ref);\n  return <div\n  // oxlint-disable-next-line jsx-a11y/no-noninteractive-tabindex -- a scroll container with nothing focusable inside is otherwise out of a keyboard's reach, which axe's scrollable-region-focusable reports\n  tabIndex={scrollable ? 0 : undefined} {...props} ref={ref} {...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 */\nfunction SheetContent({\n  children,\n  className,\n  container,\n  isDismissable = true,\n  isKeyboardDismissDisabled,\n  style,\n  ...props\n}: SheetContentProps) {\n  return <ModalOverlay isDismissable={isDismissable} isKeyboardDismissDisabled={isKeyboardDismissDisabled}\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 {...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 xixxii4\"\n    }, {\n      className,\n      style\n    })}>\n        <Dialog {...props} {...stylex.props(overlay.modalDialog)}>\n          {children}\n        </Dialog>\n      </Modal>\n    </ModalOverlay>;\n}\nfunction SheetFooter(props: HTMLAttributes<HTMLDivElement>) {\n  return <div {...props} {...mergeStyles({\n    className: \"x12smttz x13fuv20 x178xt8z x9f619 x78zum5 x2lah0s 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>) {\n  return <div aria-hidden=\"true\" {...props} {...mergeStyles({\n    className: \"x6s0dn4 x9f619 x1s85apg x37i4ze x2lah0s xl56j7k x1xg6qyv\"\n  }, props)}>\n      <span className=\"x1ccu2yh xqu0tyb x1dkaolv x9f619 x1td3qas\" />\n    </div>;\n}\nfunction SheetHeader(props: HTMLAttributes<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: SheetTitleProps) {\n  return <Heading slot=\"title\" {...props} {...mergeStyles({\n    className: \"x9f619 x1w5n3ug xdy5w5q xete2z3 x14ijtet xug9e1u x2divse x1ghz6dp\"\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 dismissal settings and the panel's\n// styling. A call site has no reason to know there are three elements:\n// `className` and `style` reach the panel, which is the one worth restyling\n// and positioning, and everything else lands on the dialog.\n//\n// `isDismissable` is declared here rather than picked with its sibling, since\n// the picked one carries React Aria's documentation, whose default is the\n// reverse of this component's.\ntype SheetContentProps = Omit<DialogProps, 'className' | 'style'> & Pick<ModalOverlayProps, 'isKeyboardDismissDisabled'> & {\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 end of `<body>`,\n   * which is right for an app that sets its StyleX theme on `:root`. An app\n   * that scopes the theme to a subtree has to point this at an element inside\n   * it, or the sheet renders outside the theme and falls back to the tokens'\n   * `prefers-color-scheme` default.\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 default Sheet;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["HTMLAttributes","ReactNode","ClassNameOrFunction","DialogProps","DialogTriggerProps","HeadingProps","ModalOverlayProps","ModalRenderProps","StyleOrFunction","stylex","useRef","Dialog","DialogTrigger","Heading","Modal","ModalOverlay","useScrollable","mergeStatefulStyles","mergeStyles","overlay","colors","media","motion","radii","shadows","spacing","typography","FORCED_COLORS","slideInFromEnd","slideInFromStart","slideInFromBottom","styles","body","kB7OPa","k1xSpc","kXwgrk","kzQI83","kOIVth","kORKVm","k8WAf4","kg3NbH","$$css","SheetProps","Omit","children","Sheet","t0","$","_c","props","t1","SheetBody","ref","scrollable","undefined","modalBodyRing","t2","SheetContent","className","container","isKeyboardDismissDisabled","style","isDismissable","Symbol","for","scrim","t3","t4","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":["import type { HTMLAttributes, ReactNode } from 'react';\nimport type { ClassNameOrFunction, DialogProps, DialogTriggerProps, HeadingProps, ModalOverlayProps, ModalRenderProps, StyleOrFunction } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { useRef } from 'react';\nimport { Dialog, DialogTrigger, Heading, Modal, ModalOverlay } from 'react-aria-components';\nimport { useScrollable } from '../../hooks/useScrollable';\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    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 */\nfunction Sheet({\n  children,\n  ...props\n}: SheetProps) {\n  return <DialogTrigger {...props}>{children}</DialogTrigger>;\n}\nfunction SheetBody(props: HTMLAttributes<HTMLDivElement>) {\n  const ref = useRef<HTMLDivElement>(null);\n  // A body its content runs past is a tab stop, so a keyboard can scroll it\n  // when nothing inside it takes focus; a call site's own tabIndex still\n  // wins. See useScrollable.\n  const scrollable = useScrollable(ref);\n  return <div\n  // oxlint-disable-next-line jsx-a11y/no-noninteractive-tabindex -- a scroll container with nothing focusable inside is otherwise out of a keyboard's reach, which axe's scrollable-region-focusable reports\n  tabIndex={scrollable ? 0 : undefined} {...props} ref={ref} {...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 */\nfunction SheetContent({\n  children,\n  className,\n  container,\n  isDismissable = true,\n  isKeyboardDismissDisabled,\n  style,\n  ...props\n}: SheetContentProps) {\n  return <ModalOverlay isDismissable={isDismissable} isKeyboardDismissDisabled={isKeyboardDismissDisabled}\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 {...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 xixxii4\"\n    }, {\n      className,\n      style\n    })}>\n        <Dialog {...props} {...stylex.props(overlay.modalDialog)}>\n          {children}\n        </Dialog>\n      </Modal>\n    </ModalOverlay>;\n}\nfunction SheetFooter(props: HTMLAttributes<HTMLDivElement>) {\n  return <div {...props} {...mergeStyles({\n    className: \"x12smttz x13fuv20 x178xt8z x9f619 x78zum5 x2lah0s 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>) {\n  return <div aria-hidden=\"true\" {...props} {...mergeStyles({\n    className: \"x6s0dn4 x9f619 x1s85apg x37i4ze x2lah0s xl56j7k x1xg6qyv\"\n  }, props)}>\n      <span className=\"x1ccu2yh xqu0tyb x1dkaolv x9f619 x1td3qas\" />\n    </div>;\n}\nfunction SheetHeader(props: HTMLAttributes<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: SheetTitleProps) {\n  return <Heading slot=\"title\" {...props} {...mergeStyles({\n    className: \"x9f619 x1w5n3ug xdy5w5q xete2z3 x14ijtet xug9e1u x2divse x1ghz6dp\"\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 dismissal settings and the panel's\n// styling. A call site has no reason to know there are three elements:\n// `className` and `style` reach the panel, which is the one worth restyling\n// and positioning, and everything else lands on the dialog.\n//\n// `isDismissable` is declared here rather than picked with its sibling, since\n// the picked one carries React Aria's documentation, whose default is the\n// reverse of this component's.\ntype SheetContentProps = Omit<DialogProps, 'className' | 'style'> & Pick<ModalOverlayProps, 'isKeyboardDismissDisabled'> & {\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 end of `<body>`,\n   * which is right for an app that sets its StyleX theme on `:root`. An app\n   * that scopes the theme to a subtree has to point this at an element inside\n   * it, or the sheet renders outside the theme and falls back to the tokens'\n   * `prefers-color-scheme` default.\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 default Sheet;"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["SliderProps","RACSliderProps","SliderThumbRenderProps","SliderTrackRenderProps","stylex","Slider","RACSlider","SliderOutput","SliderThumb","SliderTrack","FieldLabel","groupStyles","mergeStatefulStyles","colors","motion","radii","spacing","stateLayerOpacity","typography","FORCED_COLORS","HANDLE_GAP","HANDLE_WIDTH","styles","active","kWkggS","$$css","activeDisabled","inactiveDisabled","innerBlockEnd","kT0f0o","kVL7Gh","innerBlockStart","kfmiAY","krdFHd","innerInlineEnd","innerInlineStart","root","kzqmXN","rootVertical","kGNEyG","kZKoxP","segment","kVAM5u","kaIpWk","ksu8eU","kMzoRj","kB7OPa","k87sOh","kVAEAm","segmentVertical","kLqNvP","thumb","k6CgDc","kkrTdU","kjBf7l","kInvED","k3XXqK","kMeerF","kIyJzY","k1ekBW","kAMwcw","thumbActive","thumbActiveVertical","thumbDisabled","thumbDragging","thumbFocused","thumbVertical","_temp","krVfgx","placements","block","start","end","val","undefined","inline","kt4wiu","Omit","label","orientation","thumbLabels","clearOf","percent","fromEnd","along","t0","$","_c","T0","t1","t2","t3","vertical","t4","t5","t6","props","state","0","className","2","1","3","isDisabled","trackContent","t7","t8","thumbContent","index","isDragging","isFocusVisible","getThumbValueLabel","thumbStyles","percents","values","map","_","getThumbPercent","first","last","at","range","length","place","innerStart","innerEnd"],"sources":["../../../src/components/slider/index.tsx"],"sourcesContent":["import type { SliderProps as RACSliderProps, SliderThumbRenderProps, SliderTrackRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Slider as RACSlider, SliderOutput, SliderThumb, SliderTrack } from 'react-aria-components';\nimport { FieldLabel } from '../../field';\nimport { groupStyles } from '../../field/styles';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\n\n// The sliders page, at the size its tokens call extra-small: a 16dp track\n// with an 8dp corner, the active part in primary and the inactive part in\n// secondary container, a 4dp stop in on secondary container 6dp from the\n// inactive end, and a handle 4dp wide and 44dp tall in primary that narrows\n// to 2dp while pressed or focused. The track parts on each side of the\n// handle, with 6dp of space between them and it, and their corners\n// against the handle are 2dp where their outer ends are full. Disabled, the\n// active part and the handle are on surface at the disabled content opacity\n// and the inactive part at the disabled container opacity.\n//\n// The value indicator is the page's label: inverse surface under label-large\n// in inverse on surface, 44dp tall and at least 48dp wide, 12dp above the\n// handle. It shows while the handle is dragged or has keyboard focus, and it\n// is React Aria's `SliderOutput`, so what it shows is what the slider\n// announces.\n//\n// React Aria's `Slider` is the root, `SliderTrack` the strip the handles are\n// placed along by percent, and `SliderThumb` each handle around a visually\n// hidden range input. The track's parts are drawn here from those percents\n// rather than with `SliderFill`, since the page's parts stop short of the\n// handle on both sides and the fill runs up to it. A range slider is the\n// same track with two handles and the active part between them.\n//\n// Vertical, the same parts run along the block axis, with the active part\n// rising from the bottom and the indicator to the start side of the handle.\n// The sliders page's own measurements, which are constants of the component\n// rather than steps of the consumer's spacing scale. `clearOf` below read the\n// gap off `spacing.sm` — true at its default 8, since 6 plus half the handle\n// comes to the same — so a theme moving that step opened the gap beside the\n// handle while the stop, written as the literal it is, stayed where the page\n// puts it.\n// Windows High Contrast and the rest of the forced-colours modes. Spelled\n// here rather than imported, for the reason src/field/styles.ts records: the\n// StyleX compiler resolves a constant across files only out of a `.stylex.ts`\n// module, and the generated one holds design tokens rather than queries.\nconst FORCED_COLORS = '@media (forced-colors: active)';\nconst HANDLE_GAP = '6px';\nconst HANDLE_WIDTH = '4px';\nconst styles = {\n  active: {\n    kWkggS: \"xnety89 x1jzqe4\",\n    $$css: true\n  },\n  activeDisabled: {\n    kWkggS: \"x1crcgwy\",\n    $$css: true\n  },\n  inactiveDisabled: {\n    kWkggS: \"x19v6zzp\",\n    $$css: true\n  },\n  innerBlockEnd: {\n    kT0f0o: \"x1ui04y5\",\n    kVL7Gh: \"x6en5u8\",\n    $$css: true\n  },\n  innerBlockStart: {\n    kfmiAY: \"x1e4oeot\",\n    krdFHd: \"xr9e8f9\",\n    $$css: true\n  },\n  innerInlineEnd: {\n    kT0f0o: \"x1ui04y5\",\n    kfmiAY: \"x1e4oeot\",\n    $$css: true\n  },\n  innerInlineStart: {\n    kVL7Gh: \"x6en5u8\",\n    krdFHd: \"xr9e8f9\",\n    $$css: true\n  },\n  root: {\n    kzqmXN: \"xh8yej3\",\n    $$css: true\n  },\n  rootVertical: {\n    kGNEyG: \"x1cy8zhl\",\n    kZKoxP: \"x1u5z0ei\",\n    kzqmXN: \"x14atkfc\",\n    $$css: true\n  },\n  segment: {\n    kWkggS: \"x15dekr4 x9yvj25\",\n    kZKoxP: \"xlup9mm\",\n    kVAM5u: \"x1ylmb6m\",\n    kaIpWk: \"x1xdvaa9\",\n    ksu8eU: \"xx61lck\",\n    kMzoRj: \"x13rsnn2\",\n    kB7OPa: \"x9f619\",\n    k87sOh: \"xuivejd\",\n    kVAEAm: \"x10l6tqk\",\n    $$css: true\n  },\n  segmentVertical: {\n    kZKoxP: \"xt7dq6l\",\n    kzqmXN: \"x1kky2od\",\n    k87sOh: \"x80663w\",\n    kLqNvP: \"x9p6ekw\",\n    $$css: true\n  },\n  thumb: {\n    k6CgDc: \"x12w9bfk\",\n    kWkggS: \"xnety89 x1jzqe4\",\n    kZKoxP: \"xn3w4p2\",\n    kVAM5u: \"x1ylmb6m\",\n    kaIpWk: \"x1dkaolv\",\n    ksu8eU: \"xx61lck\",\n    kMzoRj: \"x13rsnn2\",\n    kB7OPa: \"x9f619\",\n    kkrTdU: \"x1jm3nie\",\n    kzqmXN: \"x51ohtg\",\n    k87sOh: \"xwa60dl\",\n    kjBf7l: \"xrgy624 x1x84bn5\",\n    kInvED: \"x1hl8ikr\",\n    k3XXqK: \"x1t137rt\",\n    kMeerF: \"x1de99jn\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"xdl150w\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  thumbActive: {\n    kzqmXN: \"xfo62xy\",\n    $$css: true\n  },\n  thumbActiveVertical: {\n    kZKoxP: \"x36qwtl\",\n    kzqmXN: \"x187nhsf\",\n    $$css: true\n  },\n  thumbDisabled: {\n    kWkggS: \"x1crcgwy\",\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  thumbDragging: {\n    kkrTdU: \"xi9pz9s\",\n    $$css: true\n  },\n  thumbFocused: {\n    k3XXqK: \"xaatb59\",\n    $$css: true\n  },\n  thumbVertical: {\n    kZKoxP: \"xqu0tyb\",\n    kzqmXN: \"x187nhsf\",\n    k87sOh: \"x80663w\",\n    kLqNvP: \"xbudbmw\",\n    $$css: true\n  }\n};\n\n// Where each part of the track starts and ends, as insets from the track's\n// two ends: a percent of the way along, plus the 6dp of space and half the\n// handle's 4dp that keep it clear of the handle. Dynamic styles, since the\n// percents come from the value at render time and StyleX compiles its\n// classes ahead of time; each writes its insets to custom properties inline.\nconst _temp = {\n  krVfgx: \"xiicpxy\",\n  k87sOh: \"x5mnzd7\",\n  \"$$css\": true\n};\nconst placements = {\n  block: (start: string, end: string) => [_temp, {\n    \"--x-insetBlockEnd\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(start),\n    \"--x-insetBlockStart\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(end)\n  }],\n  inline: (start: string, end: string) => [{\n    kt4wiu: end != null ? \"xqxgn94\" : end,\n    kLqNvP: start != null ? \"x1lxsm33\" : start,\n    $$css: true\n  }, {\n    \"--x-insetInlineEnd\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(end),\n    \"--x-insetInlineStart\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(start)\n  }]\n};\ntype SliderProps = Omit<RACSliderProps, 'children' | 'orientation'> & {\n  /**\n   * What the slider sets. A slider that a row labels some other way leaves\n   * it out and passes `aria-label` instead.\n   */\n  label?: string;\n  /**\n   * Along which axis the handle moves. A vertical slider is 240px tall until\n   * `style` on the root says otherwise.\n   * @default 'horizontal'\n   */\n  orientation?: 'horizontal' | 'vertical';\n  /**\n   * A name for each handle of a range slider, in order, since two handles\n   * named by the same label cannot be told apart.\n   */\n  thumbLabels?: string[];\n};\n\n// The inset of a part's end from the track's end, clear of the handle at\n// `percent` of the way along. The percentage lands on the handle's centre,\n// so half the handle's width joins the page's gap to reach its edge.\nfunction clearOf(percent: number, fromEnd: boolean) {\n  const along = fromEnd ? 100 - percent : percent;\n  return `calc(${along}% + ${HANDLE_GAP} + ${HANDLE_WIDTH} / 2)`;\n}\n\n/**\n * A slider for one value, or for a range when the value is a pair. The value\n * is React Aria's: pass `value` with `onChange` to control it, or\n * `defaultValue` to let it keep its own, with `minValue`, `maxValue` and\n * `step` to shape it and `formatOptions` to say how it reads. Arrow keys\n * move a handle by a step, Page Up and Page Down by ten, Home and End to\n * the ends.\n *\n * The call site's `className` and `style` land on the slider as a whole,\n * which is the element a layout positions and the one that gives a vertical\n * slider its height.\n */\nfunction Slider({\n  label,\n  orientation = 'horizontal',\n  thumbLabels,\n  ...props\n}: SliderProps) {\n  const vertical = orientation === 'vertical';\n  return <RACSlider orientation={orientation} {...props} {...mergeStatefulStyles(stylex.props(groupStyles.root, styles.root, vertical && styles.rootVertical), props)}>\n      {label === undefined ? null : <FieldLabel variant=\"group\">{label}</FieldLabel>}\n      <SliderTrack {...mergeStatefulStyles((state: SliderTrackRenderProps) => ({\n      0: {\n        className: \"xn3w4p2 x9f619 x1ypdohk xh8yej3 x1n2onr6\"\n      },\n      2: {\n        className: \"x9f619 x1ypdohk x1n2onr6 x5yr21d x1iyjqo2 x187nhsf x2lwn1j\"\n      },\n      1: {\n        className: \"xn3w4p2 x9f619 xh8yej3 x1n2onr6 x1h6gzvc\"\n      },\n      3: {\n        className: \"x9f619 x1n2onr6 x5yr21d x1iyjqo2 x187nhsf x2lwn1j x1h6gzvc\"\n      }\n    })[!!vertical << 1 | !!state.isDisabled << 0], {})}>\n        {trackContent(vertical, thumbLabels)}\n      </SliderTrack>\n    </RACSlider>;\n}\n\n// What a handle draws: its value while it is dragged or has keyboard focus.\n// Built by a call rather than written inline at the prop, which is what\n// react-perf's no-new-function-as-prop is after; the React Compiler memoises\n// the result on its inputs.\nfunction thumbContent(index: number, vertical: boolean) {\n  return (state: SliderThumbRenderProps) => state.isDragging || state.isFocusVisible ? <SliderOutput {...{\n    0: {\n      className: \"x6s0dn4 x1c5gpgi xn3w4p2 x1dkaolv x9f619 x1girmi0 x78zum5 xkknnkr x14zspaw x1v9cpvo x3mk9i xbudbmw xl56j7k x155f00i x1lz68p4 x900493 x18fpw6u x10l6tqk xuuh30 xuxw1ft\"\n    },\n    1: {\n      className: \"x6s0dn4 x1c5gpgi xn3w4p2 x1dkaolv x9f619 x1girmi0 x78zum5 xkknnkr x14zspaw x1v9cpvo xl56j7k x155f00i x1lz68p4 x900493 x18fpw6u x10l6tqk xuxw1ft xdd4er5 xwa60dl x15zsqls xhi6v0a x1cb1t30\"\n    }\n  }[!!vertical << 0]}>\n        {state.state.getThumbValueLabel(index)}\n      </SliderOutput> : null;\n}\nfunction thumbStyles(vertical: boolean) {\n  return (state: SliderThumbRenderProps) => stylex.props(styles.thumb, vertical && styles.thumbVertical, (state.isDragging || state.isFocusVisible) && (vertical ? styles.thumbActiveVertical : styles.thumbActive), state.isDragging && styles.thumbDragging, state.isFocusVisible && styles.thumbFocused, state.isDisabled && styles.thumbDisabled);\n}\n\n// The track's parts and handles, from the slider's state: an inactive part\n// before the first handle of a range, the active part up to or between the\n// handles, and the inactive part after the last one carrying the stop.\nfunction trackContent(vertical: boolean, thumbLabels: string[] | undefined) {\n  return ({\n    isDisabled,\n    state\n  }: SliderTrackRenderProps) => {\n    const percents = state.values.map((_, index) => state.getThumbPercent(index) * 100);\n    const first = percents[0] ?? 0;\n    const last = percents.at(-1) ?? 0;\n    const range = percents.length > 1;\n    const place = vertical ? placements.block : placements.inline;\n    const innerStart = vertical ? styles.innerBlockStart : styles.innerInlineStart;\n    const innerEnd = vertical ? styles.innerBlockEnd : styles.innerInlineEnd;\n    return <>\n        {range ? <span {...stylex.props(styles.segment, vertical && styles.segmentVertical, isDisabled && styles.inactiveDisabled, innerEnd, place('0px', clearOf(first, true)))} /> : null}\n        <span {...stylex.props(styles.segment, vertical && styles.segmentVertical, styles.active, isDisabled && styles.activeDisabled, range && innerStart, innerEnd, place(range ? clearOf(first, false) : '0px', clearOf(last, true)))} />\n        <span {...stylex.props(styles.segment, vertical && styles.segmentVertical, isDisabled && styles.inactiveDisabled, innerStart, place(clearOf(last, false), '0px'))}>\n          <span {...{\n          0: {\n            className: \"x81krv7 x1tt9vl1 xqu0tyb x16fbrrb x51ohtg x1atx4j1 x1f889gz x10l6tqk\"\n          },\n          2: {\n            className: \"x81krv7 x1tt9vl1 xqu0tyb x16fbrrb x51ohtg x10l6tqk x1atx4j1 x1woyocn xrr41r3\"\n          },\n          1: {\n            className: \"xqu0tyb x16fbrrb x51ohtg x1atx4j1 x1f889gz x10l6tqk x1crcgwy\"\n          },\n          3: {\n            className: \"xqu0tyb x16fbrrb x51ohtg x10l6tqk x1atx4j1 x1woyocn xrr41r3 x1crcgwy\"\n          }\n        }[!!vertical << 1 | !!isDisabled << 0]} />\n        </span>\n        {percents.map((_, index) => <SliderThumb aria-label={thumbLabels?.[index]} index={index}\n      // oxlint-disable-next-line react/no-array-index-key -- a handle's position is its identity\n      key={index} {...mergeStatefulStyles(thumbStyles(vertical), {})}>\n            {thumbContent(index, vertical)}\n          </SliderThumb>)}\n      </>;\n  };\n}\nexport type { SliderProps };\nexport default Slider;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["SliderProps","RACSliderProps","SliderThumbRenderProps","SliderTrackRenderProps","stylex","Slider","RACSlider","SliderOutput","SliderThumb","SliderTrack","FieldLabel","groupStyles","mergeStatefulStyles","colors","motion","radii","spacing","stateLayerOpacity","typography","FORCED_COLORS","HANDLE_GAP","HANDLE_WIDTH","styles","active","kWkggS","$$css","activeDisabled","inactiveDisabled","innerBlockEnd","kT0f0o","kVL7Gh","innerBlockStart","kfmiAY","krdFHd","innerInlineEnd","innerInlineStart","root","kzqmXN","rootVertical","kGNEyG","kZKoxP","segment","kVAM5u","kaIpWk","ksu8eU","kMzoRj","kB7OPa","k87sOh","kVAEAm","segmentVertical","kLqNvP","thumb","k6CgDc","kkrTdU","kjBf7l","kInvED","k3XXqK","kMeerF","kIyJzY","k1ekBW","kAMwcw","thumbActive","thumbActiveVertical","thumbDisabled","thumbDragging","thumbFocused","thumbVertical","_temp","krVfgx","placements","block","start","end","val","undefined","inline","kt4wiu","Omit","label","orientation","thumbLabels","clearOf","percent","fromEnd","along","t0","$","_c","T0","t1","t2","t3","vertical","t4","t5","t6","props","state","0","className","2","1","3","isDisabled","trackContent","t7","t8","thumbContent","index","isDragging","isFocusVisible","getThumbValueLabel","thumbStyles","percents","values","map","_","getThumbPercent","first","last","at","range","length","place","innerStart","innerEnd","Slider","_c","props","RACSlider","stylex.props"],"sources":["../../../src/components/slider/index.tsx"],"sourcesContent":["import type { SliderProps as RACSliderProps, SliderThumbRenderProps, SliderTrackRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Slider as RACSlider, SliderOutput, SliderThumb, SliderTrack } from 'react-aria-components';\nimport { FieldLabel } from '../../field';\nimport { groupStyles } from '../../field/styles';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\n\n// The sliders page, at the size its tokens call extra-small: a 16dp track\n// with an 8dp corner, the active part in primary and the inactive part in\n// secondary container, a 4dp stop in on secondary container 6dp from the\n// inactive end, and a handle 4dp wide and 44dp tall in primary that narrows\n// to 2dp while pressed or focused. The track parts on each side of the\n// handle, with 6dp of space between them and it, and their corners\n// against the handle are 2dp where their outer ends are full. Disabled, the\n// active part and the handle are on surface at the disabled content opacity\n// and the inactive part at the disabled container opacity.\n//\n// The value indicator is the page's label: inverse surface under label-large\n// in inverse on surface, 44dp tall and at least 48dp wide, 12dp above the\n// handle. It shows while the handle is dragged or has keyboard focus, and it\n// is React Aria's `SliderOutput`, so what it shows is what the slider\n// announces.\n//\n// React Aria's `Slider` is the root, `SliderTrack` the strip the handles are\n// placed along by percent, and `SliderThumb` each handle around a visually\n// hidden range input. The track's parts are drawn here from those percents\n// rather than with `SliderFill`, since the page's parts stop short of the\n// handle on both sides and the fill runs up to it. A range slider is the\n// same track with two handles and the active part between them.\n//\n// Vertical, the same parts run along the block axis, with the active part\n// rising from the bottom and the indicator to the start side of the handle.\n// The sliders page's own measurements, which are constants of the component\n// rather than steps of the consumer's spacing scale. `clearOf` below read the\n// gap off `spacing.sm` — true at its default 8, since 6 plus half the handle\n// comes to the same — so a theme moving that step opened the gap beside the\n// handle while the stop, written as the literal it is, stayed where the page\n// puts it.\n// Windows High Contrast and the rest of the forced-colours modes. Spelled\n// here rather than imported, for the reason src/field/styles.ts records: the\n// StyleX compiler resolves a constant across files only out of a `.stylex.ts`\n// module, and the generated one holds design tokens rather than queries.\nconst FORCED_COLORS = '@media (forced-colors: active)';\nconst HANDLE_GAP = '6px';\nconst HANDLE_WIDTH = '4px';\nconst styles = {\n  active: {\n    kWkggS: \"xnety89 x1jzqe4\",\n    $$css: true\n  },\n  activeDisabled: {\n    kWkggS: \"x1crcgwy\",\n    $$css: true\n  },\n  inactiveDisabled: {\n    kWkggS: \"x19v6zzp\",\n    $$css: true\n  },\n  innerBlockEnd: {\n    kT0f0o: \"x1ui04y5\",\n    kVL7Gh: \"x6en5u8\",\n    $$css: true\n  },\n  innerBlockStart: {\n    kfmiAY: \"x1e4oeot\",\n    krdFHd: \"xr9e8f9\",\n    $$css: true\n  },\n  innerInlineEnd: {\n    kT0f0o: \"x1ui04y5\",\n    kfmiAY: \"x1e4oeot\",\n    $$css: true\n  },\n  innerInlineStart: {\n    kVL7Gh: \"x6en5u8\",\n    krdFHd: \"xr9e8f9\",\n    $$css: true\n  },\n  root: {\n    kzqmXN: \"xh8yej3\",\n    $$css: true\n  },\n  rootVertical: {\n    kGNEyG: \"x1cy8zhl\",\n    kZKoxP: \"x1u5z0ei\",\n    kzqmXN: \"x14atkfc\",\n    $$css: true\n  },\n  segment: {\n    kWkggS: \"x15dekr4 x9yvj25\",\n    kZKoxP: \"xlup9mm\",\n    kVAM5u: \"x1ylmb6m\",\n    kaIpWk: \"x1xdvaa9\",\n    ksu8eU: \"xx61lck\",\n    kMzoRj: \"x13rsnn2\",\n    kB7OPa: \"x9f619\",\n    k87sOh: \"xuivejd\",\n    kVAEAm: \"x10l6tqk\",\n    $$css: true\n  },\n  segmentVertical: {\n    kZKoxP: \"xt7dq6l\",\n    kzqmXN: \"x1kky2od\",\n    k87sOh: \"x80663w\",\n    kLqNvP: \"x9p6ekw\",\n    $$css: true\n  },\n  thumb: {\n    k6CgDc: \"x12w9bfk\",\n    kWkggS: \"xnety89 x1jzqe4\",\n    kZKoxP: \"xn3w4p2\",\n    kVAM5u: \"x1ylmb6m\",\n    kaIpWk: \"x1dkaolv\",\n    ksu8eU: \"xx61lck\",\n    kMzoRj: \"x13rsnn2\",\n    kB7OPa: \"x9f619\",\n    kkrTdU: \"x1jm3nie\",\n    kzqmXN: \"x51ohtg\",\n    k87sOh: \"xwa60dl\",\n    kjBf7l: \"xrgy624 x1x84bn5\",\n    kInvED: \"x1hl8ikr\",\n    k3XXqK: \"x1t137rt\",\n    kMeerF: \"x1de99jn\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"xdl150w\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  thumbActive: {\n    kzqmXN: \"xfo62xy\",\n    $$css: true\n  },\n  thumbActiveVertical: {\n    kZKoxP: \"x36qwtl\",\n    kzqmXN: \"x187nhsf\",\n    $$css: true\n  },\n  thumbDisabled: {\n    kWkggS: \"x1crcgwy\",\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  thumbDragging: {\n    kkrTdU: \"xi9pz9s\",\n    $$css: true\n  },\n  thumbFocused: {\n    k3XXqK: \"xaatb59\",\n    $$css: true\n  },\n  thumbVertical: {\n    kZKoxP: \"xqu0tyb\",\n    kzqmXN: \"x187nhsf\",\n    k87sOh: \"x80663w\",\n    kLqNvP: \"xbudbmw\",\n    $$css: true\n  }\n};\n\n// Where each part of the track starts and ends, as insets from the track's\n// two ends: a percent of the way along, plus the 6dp of space and half the\n// handle's 4dp that keep it clear of the handle. Dynamic styles, since the\n// percents come from the value at render time and StyleX compiles its\n// classes ahead of time; each writes its insets to custom properties inline.\nconst _temp = {\n  krVfgx: \"xiicpxy\",\n  k87sOh: \"x5mnzd7\",\n  \"$$css\": true\n};\nconst placements = {\n  block: (start: string, end: string) => [_temp, {\n    \"--x-insetBlockEnd\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(start),\n    \"--x-insetBlockStart\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(end)\n  }],\n  inline: (start: string, end: string) => [{\n    kt4wiu: end != null ? \"xqxgn94\" : end,\n    kLqNvP: start != null ? \"x1lxsm33\" : start,\n    $$css: true\n  }, {\n    \"--x-insetInlineEnd\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(end),\n    \"--x-insetInlineStart\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(start)\n  }]\n};\ntype SliderProps = Omit<RACSliderProps, 'children' | 'orientation'> & {\n  /**\n   * What the slider sets. A slider that a row labels some other way leaves\n   * it out and passes `aria-label` instead.\n   */\n  label?: string;\n  /**\n   * Along which axis the handle moves. A vertical slider is 240px tall until\n   * `style` on the root says otherwise.\n   * @default 'horizontal'\n   */\n  orientation?: 'horizontal' | 'vertical';\n  /**\n   * A name for each handle of a range slider, in order, since two handles\n   * named by the same label cannot be told apart.\n   */\n  thumbLabels?: string[];\n};\n\n// The inset of a part's end from the track's end, clear of the handle at\n// `percent` of the way along. The percentage lands on the handle's centre,\n// so half the handle's width joins the page's gap to reach its edge.\nfunction clearOf(percent: number, fromEnd: boolean) {\n  const along = fromEnd ? 100 - percent : percent;\n  return `calc(${along}% + ${HANDLE_GAP} + ${HANDLE_WIDTH} / 2)`;\n}\n\n/**\n * A slider for one value, or for a range when the value is a pair. The value\n * is React Aria's: pass `value` with `onChange` to control it, or\n * `defaultValue` to let it keep its own, with `minValue`, `maxValue` and\n * `step` to shape it and `formatOptions` to say how it reads. Arrow keys\n * move a handle by a step, Page Up and Page Down by ten, Home and End to\n * the ends.\n *\n * The call site's `className` and `style` land on the slider as a whole,\n * which is the element a layout positions and the one that gives a vertical\n * slider its height.\n */\nfunction Slider({\n  label,\n  orientation = 'horizontal',\n  thumbLabels,\n  ...props\n}: SliderProps) {\n  const vertical = orientation === 'vertical';\n  return <RACSlider orientation={orientation} {...props} {...mergeStatefulStyles(stylex.props(groupStyles.root, styles.root, vertical && styles.rootVertical), props)}>\n      {label === undefined ? null : <FieldLabel variant=\"group\">{label}</FieldLabel>}\n      <SliderTrack {...mergeStatefulStyles((state: SliderTrackRenderProps) => ({\n      0: {\n        className: \"xn3w4p2 x9f619 x1ypdohk xh8yej3 x1n2onr6\"\n      },\n      2: {\n        className: \"x9f619 x1ypdohk x1n2onr6 x5yr21d x1iyjqo2 x187nhsf x2lwn1j\"\n      },\n      1: {\n        className: \"xn3w4p2 x9f619 xh8yej3 x1n2onr6 x1h6gzvc\"\n      },\n      3: {\n        className: \"x9f619 x1n2onr6 x5yr21d x1iyjqo2 x187nhsf x2lwn1j x1h6gzvc\"\n      }\n    })[!!vertical << 1 | !!state.isDisabled << 0], {})}>\n        {trackContent(vertical, thumbLabels)}\n      </SliderTrack>\n    </RACSlider>;\n}\n\n// What a handle draws: its value while it is dragged or has keyboard focus.\n// Built by a call rather than written inline at the prop, which is what\n// react-perf's no-new-function-as-prop is after; the React Compiler memoises\n// the result on its inputs.\nfunction thumbContent(index: number, vertical: boolean) {\n  return (state: SliderThumbRenderProps) => state.isDragging || state.isFocusVisible ? <SliderOutput {...{\n    0: {\n      className: \"x6s0dn4 x1c5gpgi xn3w4p2 x1dkaolv x9f619 x1girmi0 x78zum5 xkknnkr x14zspaw x1v9cpvo x3mk9i xbudbmw xl56j7k x155f00i x1lz68p4 x900493 x18fpw6u x10l6tqk xuuh30 xuxw1ft\"\n    },\n    1: {\n      className: \"x6s0dn4 x1c5gpgi xn3w4p2 x1dkaolv x9f619 x1girmi0 x78zum5 xkknnkr x14zspaw x1v9cpvo xl56j7k x155f00i x1lz68p4 x900493 x18fpw6u x10l6tqk xuxw1ft xdd4er5 xwa60dl x15zsqls xhi6v0a x1cb1t30\"\n    }\n  }[!!vertical << 0]}>\n        {state.state.getThumbValueLabel(index)}\n      </SliderOutput> : null;\n}\nfunction thumbStyles(vertical: boolean) {\n  return (state: SliderThumbRenderProps) => stylex.props(styles.thumb, vertical && styles.thumbVertical, (state.isDragging || state.isFocusVisible) && (vertical ? styles.thumbActiveVertical : styles.thumbActive), state.isDragging && styles.thumbDragging, state.isFocusVisible && styles.thumbFocused, state.isDisabled && styles.thumbDisabled);\n}\n\n// The track's parts and handles, from the slider's state: an inactive part\n// before the first handle of a range, the active part up to or between the\n// handles, and the inactive part after the last one carrying the stop.\nfunction trackContent(vertical: boolean, thumbLabels: string[] | undefined) {\n  return ({\n    isDisabled,\n    state\n  }: SliderTrackRenderProps) => {\n    const percents = state.values.map((_, index) => state.getThumbPercent(index) * 100);\n    const first = percents[0] ?? 0;\n    const last = percents.at(-1) ?? 0;\n    const range = percents.length > 1;\n    const place = vertical ? placements.block : placements.inline;\n    const innerStart = vertical ? styles.innerBlockStart : styles.innerInlineStart;\n    const innerEnd = vertical ? styles.innerBlockEnd : styles.innerInlineEnd;\n    return <>\n        {range ? <span {...stylex.props(styles.segment, vertical && styles.segmentVertical, isDisabled && styles.inactiveDisabled, innerEnd, place('0px', clearOf(first, true)))} /> : null}\n        <span {...stylex.props(styles.segment, vertical && styles.segmentVertical, styles.active, isDisabled && styles.activeDisabled, range && innerStart, innerEnd, place(range ? clearOf(first, false) : '0px', clearOf(last, true)))} />\n        <span {...stylex.props(styles.segment, vertical && styles.segmentVertical, isDisabled && styles.inactiveDisabled, innerStart, place(clearOf(last, false), '0px'))}>\n          <span {...{\n          0: {\n            className: \"x81krv7 x1tt9vl1 xqu0tyb x16fbrrb x51ohtg x1atx4j1 x1f889gz x10l6tqk\"\n          },\n          2: {\n            className: \"x81krv7 x1tt9vl1 xqu0tyb x16fbrrb x51ohtg x10l6tqk x1atx4j1 x1woyocn xrr41r3\"\n          },\n          1: {\n            className: \"xqu0tyb x16fbrrb x51ohtg x1atx4j1 x1f889gz x10l6tqk x1crcgwy\"\n          },\n          3: {\n            className: \"xqu0tyb x16fbrrb x51ohtg x10l6tqk x1atx4j1 x1woyocn xrr41r3 x1crcgwy\"\n          }\n        }[!!vertical << 1 | !!isDisabled << 0]} />\n        </span>\n        {percents.map((_, index) => <SliderThumb aria-label={thumbLabels?.[index]} index={index}\n      // oxlint-disable-next-line react/no-array-index-key -- a handle's position is its identity\n      key={index} {...mergeStatefulStyles(thumbStyles(vertical), {})}>\n            {thumbContent(index, vertical)}\n          </SliderThumb>)}\n      </>;\n  };\n}\nexport type { SliderProps };\nexport default Slider;"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","FocusableElement","ToastRegionProps","RACToastRegionProps","ToastRegionRenderProps","stylex","Button","RACButton","UNSTABLE_Toast","RACToast","UNSTABLE_ToastContent","RACToastContent","UNSTABLE_ToastQueue","RACToastQueue","UNSTABLE_ToastRegion","RACToastRegion","Text","CloseGlyph","useRipple","mergeStatefulStyles","colors","motion","radii","shadows","sizing","spacing","stateLayerOpacity","typography","MESSAGE_MS","UNTIL_CLOSED","WIDE","rise","styles","action","kMwMTN","kMv6JI","kGuDYH","k63SB2","kb6lSQ","kLWn49","k8WAf4","kg3NbH","$$css","close","kZKoxP","kzqmXN","kmVPX3","control","kGNEyG","kWkggS","kaIpWk","kMzoRj","kB7OPa","kkrTdU","k1xSpc","kmuXW","kjj79g","kjBf7l","kInvED","k3XXqK","kMeerF","kVQacm","kVAEAm","SnackbarAction","label","onPress","SnackbarMessage","message","showCloseButton","SnackbarOptions","onClose","timeout","SnackbarProps","className","closeLabel","queue","SnackbarQueue","style","Omit","SnackbarToastItem","rac","constructor","maxVisibleToasts","add","options","undefined","clear","key","actionPress","closeToast","Snackbar","t0","$","_c","T0","t1","t2","t3","t4","t5","props","snackbarContent","SnackbarButton","children","ripple","handlers","surface","toast","SnackbarControls","SnackbarToast","content","Queue","SnackbarRegionRenderProps"],"sources":["../../../src/components/snackbar/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { FocusableElement, ToastRegionProps as RACToastRegionProps, ToastRegionRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\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 { useRipple } from '../../hooks/useRipple';\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, which is `maxVisibleToasts: 1` on the queue.\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 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 UNTIL_CLOSED = 0;\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. It rises a little as it arrives too, which is\n// what the page draws and what says the message came from the edge of the\n// screen rather than appearing over it.\nconst rise = \"x15b941j-B\";\nconst styles = {\n  action: {\n    kMwMTN: \"x16bex6i\",\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\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: \"xy3r1oc x1en43ny x15a1ka 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: \"x1hl8ikr\",\n    k3XXqK: \"x9v5kkp x1t137rt\",\n    kMeerF: \"x1de99jn\",\n    kVQacm: \"xb3r6kr\",\n    kVAEAm: \"x1n2onr6\",\n    $$css: true\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  /** Run when the snackbar closes, however it was closed. */\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   * `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.\n   * @default 'Close'\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 * 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  constructor() {\n    // One at a time, which is what the page shows: a second message replaces\n    // the first rather than stacking under it.\n    this.rac = new RACToastQueue<SnackbarMessage>({\n      maxVisibleToasts: 1\n    });\n  }\n\n  /**\n   * Shows a message, and returns the key that closes it.\n   */\n  add(message: ReactNode, options: SnackbarOptions = {}) {\n    const {\n      action,\n      onClose,\n      showCloseButton = false,\n      timeout\n    } = options;\n    return this.rac.add({\n      action,\n      message,\n      showCloseButton\n    }, {\n      onClose,\n      timeout: timeout ?? (action === undefined ? MESSAGE_MS : UNTIL_CLOSED)\n    });\n  }\n\n  /** Closes every snackbar, shown or waiting. */\n  clear() {\n    this.rac.clear();\n  }\n\n  /** Closes one snackbar, by the key `add` returned. */\n  close(key: string) {\n    this.rac.close(key);\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/**\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 */\nfunction Snackbar({\n  closeLabel = 'Close',\n  queue,\n  ...props\n}: SnackbarProps) {\n  return <RACToastRegion<SnackbarMessage> queue={queue.rac} {...props} {...mergeStatefulStyles({\n    className: \"x6s0dn4 x9f619 x78zum5 xdt5ytf x126z3so x1ey2m1c x17y0mx6 x1t137rt x1a7rqcl x47corl xixxii4 xfo81ep\"\n  }, 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} {...stylex.props(styles.control, style)}>\n      {children}\n      {ripple.surface}\n    </RACButton>;\n}\nfunction snackbarContent(queue: SnackbarQueue, closeLabel: string) {\n  return ({\n    toast\n  }: {\n    toast: SnackbarToastItem;\n  }) => <SnackbarToast close={closeToast(queue, toast.key)} closeLabel={closeLabel} toast={toast} />;\n}\n\n/** The action, the close button, or nothing, after the message. */\nfunction SnackbarControls({\n  action,\n  close,\n  closeLabel,\n  showCloseButton\n}: {\n  action: SnackbarAction | undefined;\n  close: () => void;\n  closeLabel: string;\n  showCloseButton: boolean;\n}) {\n  return <>\n      {action === undefined ? null : <SnackbarButton onPress={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    </>;\n}\n\n/** One snackbar: its message, then whatever sits after it. */\nfunction SnackbarToast({\n  close,\n  closeLabel,\n  toast\n}: {\n  close: () => void;\n  closeLabel: string;\n  toast: SnackbarToastItem;\n}) {\n  const {\n    action,\n    message,\n    showCloseButton\n  } = toast.content;\n  return <RACToast toast={toast} className=\"x6s0dn4 x1n1nwrg x1u6grsq x1dwmuk9 x16dv9tl x1c5gpgi x1tfhd1 x1udv5rz x9f619 x78zum5 xh8yej3 x1x1rfll xlx31pv x1dry9sr xeuugli xuq8xha x1ulcdur x1hl8ikr x9v5kkp x1t137rt x1de99jn xt970qd xn60lsn x67bb7w\">\n      <RACToastContent className=\"x9f619 x1girmi0 x1iyjqo2 xpo2rfv x193rfdd x1hews6w xn43zvd xv61bfh xz158ff xeuugli xxlmvz2\">\n        <Text slot=\"title\">{message}</Text>\n      </RACToastContent>\n      <SnackbarControls action={action} close={close} closeLabel={closeLabel} showCloseButton={showCloseButton} />\n    </RACToast>;\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":["ReactNode","FocusableElement","ToastRegionProps","RACToastRegionProps","ToastRegionRenderProps","stylex","Button","RACButton","UNSTABLE_Toast","RACToast","UNSTABLE_ToastContent","RACToastContent","UNSTABLE_ToastQueue","RACToastQueue","UNSTABLE_ToastRegion","RACToastRegion","Text","CloseGlyph","useRipple","mergeStatefulStyles","colors","motion","radii","shadows","sizing","spacing","stateLayerOpacity","typography","MESSAGE_MS","UNTIL_CLOSED","WIDE","rise","styles","action","kMwMTN","kMv6JI","kGuDYH","k63SB2","kb6lSQ","kLWn49","k8WAf4","kg3NbH","$$css","close","kZKoxP","kzqmXN","kmVPX3","control","kGNEyG","kWkggS","kaIpWk","kMzoRj","kB7OPa","kkrTdU","k1xSpc","kmuXW","kjj79g","kjBf7l","kInvED","k3XXqK","kMeerF","kVQacm","kVAEAm","SnackbarAction","label","onPress","SnackbarMessage","message","showCloseButton","SnackbarOptions","onClose","timeout","SnackbarProps","className","closeLabel","queue","SnackbarQueue","style","Omit","SnackbarToastItem","rac","constructor","maxVisibleToasts","add","options","undefined","clear","key","actionPress","closeToast","Snackbar","t0","$","_c","T0","t1","t2","t3","t4","t5","props","snackbarContent","SnackbarButton","children","ripple","handlers","surface","toast","SnackbarControls","SnackbarToast","content","Queue","SnackbarRegionRenderProps","RACToastQueue","_c","RACToastRegion","props","stylex.props","RACButton","RACToastContent","RACToast"],"sources":["../../../src/components/snackbar/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { FocusableElement, ToastRegionProps as RACToastRegionProps, ToastRegionRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\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 { useRipple } from '../../hooks/useRipple';\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, which is `maxVisibleToasts: 1` on the queue.\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 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 UNTIL_CLOSED = 0;\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. It rises a little as it arrives too, which is\n// what the page draws and what says the message came from the edge of the\n// screen rather than appearing over it.\nconst rise = \"x15b941j-B\";\nconst styles = {\n  action: {\n    kMwMTN: \"x16bex6i\",\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\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: \"xy3r1oc x1en43ny x15a1ka 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: \"x1hl8ikr\",\n    k3XXqK: \"x9v5kkp x1t137rt\",\n    kMeerF: \"x1de99jn\",\n    kVQacm: \"xb3r6kr\",\n    kVAEAm: \"x1n2onr6\",\n    $$css: true\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  /** Run when the snackbar closes, however it was closed. */\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   * `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.\n   * @default 'Close'\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 * 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  constructor() {\n    // One at a time, which is what the page shows: a second message replaces\n    // the first rather than stacking under it.\n    this.rac = new RACToastQueue<SnackbarMessage>({\n      maxVisibleToasts: 1\n    });\n  }\n\n  /**\n   * Shows a message, and returns the key that closes it.\n   */\n  add(message: ReactNode, options: SnackbarOptions = {}) {\n    const {\n      action,\n      onClose,\n      showCloseButton = false,\n      timeout\n    } = options;\n    return this.rac.add({\n      action,\n      message,\n      showCloseButton\n    }, {\n      onClose,\n      timeout: timeout ?? (action === undefined ? MESSAGE_MS : UNTIL_CLOSED)\n    });\n  }\n\n  /** Closes every snackbar, shown or waiting. */\n  clear() {\n    this.rac.clear();\n  }\n\n  /** Closes one snackbar, by the key `add` returned. */\n  close(key: string) {\n    this.rac.close(key);\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/**\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 */\nfunction Snackbar({\n  closeLabel = 'Close',\n  queue,\n  ...props\n}: SnackbarProps) {\n  return <RACToastRegion<SnackbarMessage> queue={queue.rac} {...props} {...mergeStatefulStyles({\n    className: \"x6s0dn4 x9f619 x78zum5 xdt5ytf x126z3so x1ey2m1c x17y0mx6 x1t137rt x1a7rqcl x47corl xixxii4 xfo81ep\"\n  }, 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} {...stylex.props(styles.control, style)}>\n      {children}\n      {ripple.surface}\n    </RACButton>;\n}\nfunction snackbarContent(queue: SnackbarQueue, closeLabel: string) {\n  return ({\n    toast\n  }: {\n    toast: SnackbarToastItem;\n  }) => <SnackbarToast close={closeToast(queue, toast.key)} closeLabel={closeLabel} toast={toast} />;\n}\n\n/** The action, the close button, or nothing, after the message. */\nfunction SnackbarControls({\n  action,\n  close,\n  closeLabel,\n  showCloseButton\n}: {\n  action: SnackbarAction | undefined;\n  close: () => void;\n  closeLabel: string;\n  showCloseButton: boolean;\n}) {\n  return <>\n      {action === undefined ? null : <SnackbarButton onPress={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    </>;\n}\n\n/** One snackbar: its message, then whatever sits after it. */\nfunction SnackbarToast({\n  close,\n  closeLabel,\n  toast\n}: {\n  close: () => void;\n  closeLabel: string;\n  toast: SnackbarToastItem;\n}) {\n  const {\n    action,\n    message,\n    showCloseButton\n  } = toast.content;\n  return <RACToast toast={toast} className=\"x6s0dn4 x1n1nwrg x1u6grsq x1dwmuk9 x16dv9tl x1c5gpgi x1tfhd1 x1udv5rz x9f619 x78zum5 xh8yej3 x1x1rfll xlx31pv x1dry9sr xeuugli xuq8xha x1ulcdur x1hl8ikr x9v5kkp x1t137rt x1de99jn xt970qd xn60lsn x67bb7w\">\n      <RACToastContent className=\"x9f619 x1girmi0 x1iyjqo2 xpo2rfv x193rfdd x1hews6w xn43zvd xv61bfh xz158ff xeuugli xxlmvz2\">\n        <Text slot=\"title\">{message}</Text>\n      </RACToastContent>\n      <SnackbarControls action={action} close={close} closeLabel={closeLabel} showCloseButton={showCloseButton} />\n    </RACToast>;\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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"}