@kanso-labs/kanso-ui 0.40.8 → 0.40.9

package/dist/components/segmented-button/index.d.ts

@@ -5,6 +5,15 @@ import { ToggleButtonGroupProps, ToggleButtonProps } from "react-aria-components
 type SegmentedButtonProps = LabelledByAttribute & Omit<ToggleButtonGroupProps, 'className' | 'orientation' | 'style'> & {
   /** A function may compute the class from the set's render state. */
   className?: ToggleButtonGroupProps['className'];
+  /**
+   * Whether the chosen segment stays chosen when it is pressed again. On
+   * by default while one is chosen, since a radio group always holds a
+   * choice; `false` lets a press clear it, as React Aria's own default
+   * does. Off by default while several may be, where any of them can be
+   * turned off.
+   * @default true while one is chosen, false while several may be
+   */
+  disallowEmptySelection?: boolean;
   /**
    * Whether a chosen segment draws a check before its label, as the page
    * has it. `false` leaves the segment's own icon in place while selected,
@@ -57,10 +66,17 @@ type SegmentedButtonSegmentProps = Omit<ToggleButtonProps, 'children' | 'classNa
  * how the chosen container moves: it slides between segments while one is
  * chosen, and fades in place while several may be.
  *
+ * Choosing one behaves as a radio group too, which React Aria's
+ * `ToggleButtonGroup` does not. The chosen segment stays chosen when it is
+ * pressed again, unless `disallowEmptySelection` is `false`. The arrow keys
+ * move to a segment and choose it, wrapping at either end, and Home and End
+ * choose the first and last. Choosing several keeps React Aria's keys: the
+ * arrows move between segments, and Space or Enter toggles the focused one.
+ *
  * The call site's `className` and `style` land on the track, which is the
  * element a layout positions.
  */
-declare function SegmentedButton({ selectionMode, showSelectedIcon, ...props }: RefAttributes<HTMLDivElement> & SegmentedButtonProps): import("react").JSX.Element;
+declare function SegmentedButton({ disallowEmptySelection, render, selectionMode, showSelectedIcon, ...props }: RefAttributes<HTMLDivElement> & SegmentedButtonProps): import("react").JSX.Element;
 declare namespace SegmentedButton {
   var Segment: typeof SegmentedButtonSegment;
 }

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

@@ -8,12 +8,57 @@ import { focus } from "../../styles/focus.js";
 import { useToggleGroupDisabled } from "../../hooks/useToggleGroupDisabled.js";
 import { useRipple } from "../../hooks/useRipple.js";
 import { c } from "react/compiler-runtime";
-import { createContext, useContext } from "react";
+import { createContext, createElement, useContext } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { SelectionIndicator, ToggleButton, ToggleButtonGroup } from "react-aria-components";
 //#region src/components/segmented-button/index.tsx
 const ShowSelectedIconContext = createContext(true);
 const SelectionModeContext = createContext("single");
+function keyOf(segment) {
+	const written = segment.dataset.key;
+	if (written === void 0) return null;
+	const key = JSON.parse(written);
+	return typeof key === "string" || typeof key === "number" ? key : null;
+}
+function radioGroupRenderer(render) {
+	return (domProps, renderProps) => {
+		const merged = {
+			...domProps,
+			onKeyDownCapture: radioKeys(renderProps.state, domProps.onKeyDownCapture)
+		};
+		return render === void 0 ? createElement("div", merged) : render(merged, renderProps);
+	};
+}
+function radioKeys(state, toolbar) {
+	return (event) => {
+		const group = event.currentTarget;
+		const segments = [...group.querySelectorAll("[data-key]:not([data-disabled])")].filter((segment) => segment.closest("[role=\"radiogroup\"]") === group);
+		const from = segments.findIndex((segment) => segment === event.target);
+		const step = event.altKey || event.ctrlKey || event.metaKey ? null : stepOf(event.key, getComputedStyle(group).direction === "rtl");
+		if (from === -1 || step === null) {
+			toolbar?.(event);
+			return;
+		}
+		event.preventDefault();
+		event.stopPropagation();
+		const segment = segments[step === "first" ? 0 : step === "last" ? segments.length - 1 : (from + step + segments.length) % segments.length];
+		const key = keyOf(segment);
+		if (key === null) return;
+		segment.focus();
+		state.setSelected(key, true);
+	};
+}
+function stepOf(key, rtl) {
+	switch (key) {
+		case "ArrowDown": return 1;
+		case "ArrowLeft": return rtl ? 1 : -1;
+		case "ArrowRight": return rtl ? -1 : 1;
+		case "ArrowUp": return -1;
+		case "End": return "last";
+		case "Home": return "first";
+		default: return null;
+	}
+}
 `${spacing.sm}`;
 `${spacing.sm}`;
 const styles = {
@@ -181,11 +226,18 @@ function segmentContent(children, icon, ripple, selectionMode, showSelectedIcon)
 * how the chosen container moves: it slides between segments while one is
 * chosen, and fades in place while several may be.
 *
+* Choosing one behaves as a radio group too, which React Aria's
+* `ToggleButtonGroup` does not. The chosen segment stays chosen when it is
+* pressed again, unless `disallowEmptySelection` is `false`. The arrow keys
+* move to a segment and choose it, wrapping at either end, and Home and End
+* choose the first and last. Choosing several keeps React Aria's keys: the
+* arrows move between segments, and Space or Enter toggles the focused one.
+*
 * The call site's `className` and `style` land on the track, which is the
 * element a layout positions.
 */
 function SegmentedButton(t0) {
-	const $ = c(22);
+	const $ = c(29);
 	let T0;
 	let T1;
 	let T2;
@@ -194,18 +246,28 @@ function SegmentedButton(t0) {
 	let t3;
 	let t4;
 	let t5;
+	let t6;
+	let t7;
 	if ($[0] !== t0) {
-		const { selectionMode: t6, showSelectedIcon: t7, ...props } = t0;
-		const selectionMode = t6 === void 0 ? "single" : t6;
-		const showSelectedIcon = t7 === void 0 ? true : t7;
+		const { disallowEmptySelection, render, selectionMode: t8, showSelectedIcon: t9, ...props } = t0;
+		const selectionMode = t8 === void 0 ? "single" : t8;
+		const showSelectedIcon = t9 === void 0 ? true : t9;
+		const single = selectionMode === "single";
 		T2 = ShowSelectedIconContext;
-		t5 = showSelectedIcon;
+		t7 = showSelectedIcon;
 		T1 = SelectionModeContext;
-		t4 = selectionMode;
+		t6 = selectionMode;
 		T0 = ToggleButtonGroup;
 		t1 = props;
-		t2 = selectionMode;
-		t3 = mergeStatefulStyles({ className: "x9f619 xwz0xwf xu6a5m6 x1mt1orb xc8icb0" }, props);
+		t2 = disallowEmptySelection ?? single;
+		if ($[11] !== render || $[12] !== single) {
+			t3 = single ? radioGroupRenderer(render) : render;
+			$[11] = render;
+			$[12] = single;
+			$[13] = t3;
+		} else t3 = $[13];
+		t4 = selectionMode;
+		t5 = mergeStatefulStyles({ className: "x9f619 xwz0xwf xu6a5m6 x1mt1orb xc8icb0" }, props);
 		$[0] = t0;
 		$[1] = T0;
 		$[2] = T1;
@@ -215,6 +277,8 @@ function SegmentedButton(t0) {
 		$[6] = t3;
 		$[7] = t4;
 		$[8] = t5;
+		$[9] = t6;
+		$[10] = t7;
 	} else {
 		T0 = $[1];
 		T1 = $[2];
@@ -224,43 +288,49 @@ function SegmentedButton(t0) {
 		t3 = $[6];
 		t4 = $[7];
 		t5 = $[8];
+		t6 = $[9];
+		t7 = $[10];
 	}
-	let t6;
-	if ($[9] !== T0 || $[10] !== t1 || $[11] !== t2 || $[12] !== t3) {
-		t6 = /* @__PURE__ */ jsx(T0, {
+	let t8;
+	if ($[14] !== T0 || $[15] !== t1 || $[16] !== t2 || $[17] !== t3 || $[18] !== t4 || $[19] !== t5) {
+		t8 = /* @__PURE__ */ jsx(T0, {
 			...t1,
-			selectionMode: t2,
-			...t3
+			disallowEmptySelection: t2,
+			render: t3,
+			selectionMode: t4,
+			...t5
 		});
-		$[9] = T0;
-		$[10] = t1;
-		$[11] = t2;
-		$[12] = t3;
-		$[13] = t6;
-	} else t6 = $[13];
-	let t7;
-	if ($[14] !== T1 || $[15] !== t4 || $[16] !== t6) {
-		t7 = /* @__PURE__ */ jsx(T1, {
-			value: t4,
-			children: t6
+		$[14] = T0;
+		$[15] = t1;
+		$[16] = t2;
+		$[17] = t3;
+		$[18] = t4;
+		$[19] = t5;
+		$[20] = t8;
+	} else t8 = $[20];
+	let t9;
+	if ($[21] !== T1 || $[22] !== t6 || $[23] !== t8) {
+		t9 = /* @__PURE__ */ jsx(T1, {
+			value: t6,
+			children: t8
 		});
-		$[14] = T1;
-		$[15] = t4;
-		$[16] = t6;
-		$[17] = t7;
-	} else t7 = $[17];
-	let t8;
-	if ($[18] !== T2 || $[19] !== t5 || $[20] !== t7) {
-		t8 = /* @__PURE__ */ jsx(T2, {
-			value: t5,
-			children: t7
+		$[21] = T1;
+		$[22] = t6;
+		$[23] = t8;
+		$[24] = t9;
+	} else t9 = $[24];
+	let t10;
+	if ($[25] !== T2 || $[26] !== t7 || $[27] !== t9) {
+		t10 = /* @__PURE__ */ jsx(T2, {
+			value: t7,
+			children: t9
 		});
-		$[18] = T2;
-		$[19] = t5;
-		$[20] = t7;
-		$[21] = t8;
-	} else t8 = $[21];
-	return t8;
+		$[25] = T2;
+		$[26] = t7;
+		$[27] = t9;
+		$[28] = t10;
+	} else t10 = $[28];
+	return t10;
 }
 /**
 * One segment. Its `id` is what selection is reported by, and its label is
@@ -268,7 +338,7 @@ function SegmentedButton(t0) {
 * unchosen one draws whatever `icon` holds, if anything.
 */
 function SegmentedButtonSegment(t0) {
-	const $ = c(20);
+	const $ = c(21);
 	const { children, disableRipple: t1, icon, onClick, onContextMenu, onKeyDown, onKeyUp, onPointerCancel, onPointerDown, onPointerLeave, onPointerUp, render, ...props } = t0;
 	const disableRipple = t1 === void 0 ? false : t1;
 	const selectionMode = useContext(SelectionModeContext);
@@ -299,37 +369,40 @@ function SegmentedButtonSegment(t0) {
 	} else t2 = $[6];
 	const ripple = useRipple(!disableRipple && props.isDisabled !== true && !disabledByGroup, t2);
 	const T0 = ToggleButton;
-	const t3 = toggleButtonRenderer(element, render);
-	const t4 = ripple.handlers;
-	const t5 = mergeStatefulStyles(segmentStyles(showSelectedIcon), props);
-	let t6;
+	const t3 = selectionMode === "single" && props.id !== void 0 ? JSON.stringify(props.id) : void 0;
+	const t4 = toggleButtonRenderer(element, render);
+	const t5 = ripple.handlers;
+	const t6 = mergeStatefulStyles(segmentStyles(showSelectedIcon), props);
+	let t7;
 	if ($[7] !== children || $[8] !== icon || $[9] !== ripple || $[10] !== selectionMode || $[11] !== showSelectedIcon) {
-		t6 = segmentContent(children, icon, ripple, selectionMode, showSelectedIcon);
+		t7 = segmentContent(children, icon, ripple, selectionMode, showSelectedIcon);
 		$[7] = children;
 		$[8] = icon;
 		$[9] = ripple;
 		$[10] = selectionMode;
 		$[11] = showSelectedIcon;
-		$[12] = t6;
-	} else t6 = $[12];
-	let t7;
-	if ($[13] !== T0 || $[14] !== props || $[15] !== ripple.handlers || $[16] !== t3 || $[17] !== t5 || $[18] !== t6) {
-		t7 = /* @__PURE__ */ jsx(T0, {
-			render: t3,
-			...t4,
-			...props,
+		$[12] = t7;
+	} else t7 = $[12];
+	let t8;
+	if ($[13] !== T0 || $[14] !== props || $[15] !== ripple.handlers || $[16] !== t3 || $[17] !== t4 || $[18] !== t6 || $[19] !== t7) {
+		t8 = /* @__PURE__ */ jsx(T0, {
+			"data-key": t3,
+			render: t4,
 			...t5,
-			children: t6
+			...props,
+			...t6,
+			children: t7
 		});
 		$[13] = T0;
 		$[14] = props;
 		$[15] = ripple.handlers;
 		$[16] = t3;
-		$[17] = t5;
+		$[17] = t4;
 		$[18] = t6;
 		$[19] = t7;
-	} else t7 = $[19];
-	return t7;
+		$[20] = t8;
+	} else t8 = $[20];
+	return t8;
 }
 function segmentStyles(showSelectedIcon) {
 	return (state) => props(styles.segment, focus.ring, state.isSelected ? styles.segmentSelected : styles.segmentUnselected, state.isSelected && !showSelectedIcon && styles.segmentSelectedUnmarked, state.isDisabled && styles.segmentDisabled);

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","ReactNode","RefAttributes","FocusableElement","ToggleButtonGroupProps","RACToggleButtonGroupProps","ToggleButtonProps","RACToggleButtonProps","SharedElementRenderProps","ToggleButtonRenderProps","stylex","createContext","useContext","SelectionIndicator","RACSelectionIndicator","ToggleButton","RACToggleButton","ToggleButtonGroup","RACToggleButtonGroup","LabelledByAttribute","CheckGlyph","useRipple","useToggleGroupDisabled","ariaAttributesOf","toggleButtonRenderer","focus","mergeStatefulStyles","colors","motion","radii","sizing","spacing","stateLayerOpacity","typography","ShowSelectedIconContext","SelectionModeContext","SelectionMode","Ripple","ReturnType","NonNullable","GLYPH_SIZE","GLYPH_RESERVE","sm","GLYPH_RESERVE_HALF","FORCED_COLORS","styles","label","k6CgDc","k7Eaqz","kVQacm","kg5iWk","kIyJzY","k1ekBW","kAMwcw","khDVqt","$$css","labelChosen","kAXs8y","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","segmentSelectedUnmarked","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","$","T0","T1","T2","t1","t2","t3","t4","t5","t6","t7","t8","SegmentedButtonSegment","onClick","onContextMenu","onKeyDown","onKeyUp","onPointerCancel","onPointerDown","onPointerLeave","onPointerUp","render","element","aria","disabledByGroup","id","handlers","segmentStyles","ring","Segment","RACSelectionIndicator","stylex.props","_c","RACToggleButtonGroup","RACToggleButton"],"sources":["../../../src/components/segmented-button/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode, RefAttributes } 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 type { LabelledByAttribute } from '../../render/name';\nimport { CheckGlyph } from '../../glyphs';\nimport { useRipple } from '../../hooks/useRipple';\nimport { useToggleGroupDisabled } from '../../hooks/useToggleGroupDisabled';\nimport { ariaAttributesOf, toggleButtonRenderer } from '../../render/aria';\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// Without the check, the page's chosen container is the only cue, and it is\n// about 1.2:1 against the page in the light theme, with the same label\n// colour either way — under WCAG's 3:1 for a state. So a set with the check\n// off draws its chosen segment on the secondary role instead, with the label\n// on it, which clears that comfortably. A departure from the page, taken\n// only where the page's own cue has been turned off; with the check drawn,\n// the chosen segment is the page's.\n//\n// Under forced colours a fill is painted in the page's own `Canvas`, so the\n// chosen container is `Highlight` with its label in `HighlightText` — the\n// pair the mode gives whatever is chosen — and a disabled chosen one keeps\n// a `GrayText` ring rather than a fill, which leaves its `GrayText` label\n// readable.\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)`;\n\n// Windows High Contrast and the rest of the forced-colours modes. Spelled\n// here rather than imported, for the reason src/field/styles.ts records: the\n// StyleX compiler resolves a constant across files only out of a `.stylex.ts`\n// module, and the generated one holds design tokens rather than queries.\nconst FORCED_COLORS = '@media (forced-colors: active)';\nconst styles = {\n  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  labelChosen: {\n    kAXs8y: \"x1g12otp\",\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 x1bhcspo\",\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  segmentSelected: {\n    kMwMTN: \"x1sawysd x1k5gbb1\",\n    $$css: true\n  },\n  segmentSelectedUnmarked: {\n    kMwMTN: \"x1lba3jz x1k5gbb1\",\n    $$css: true\n  },\n  segmentUnselected: {\n    kMwMTN: \"x139gbkf\",\n    $$css: true\n  }\n};\ntype SegmentedButtonProps = LabelledByAttribute & 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   * and draws the chosen segment on the stronger secondary container, since\n   * the page's own is too faint to say which is chosen by itself.\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, showSelectedIcon: boolean): (state: SharedElementRenderProps) => string {\n  return state => ({\n    0: {\n      className: \"x15dekr4 x1jzqe4 xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk xioksi3 x1c42kcb x1seskgd\"\n    },\n    8: {\n      className: \"x15dekr4 x1jzqe4 xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk x1qno0dh x19991ni xpc4ca7\"\n    },\n    4: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk xioksi3 x1c42kcb x1seskgd x167r6xl x1jzqe4\"\n    },\n    12: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk x1qno0dh x19991ni xpc4ca7 x167r6xl x1jzqe4\"\n    },\n    2: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk xioksi3 x1c42kcb x1seskgd xepofeg x9yvj25 xmnqt3w xx61lck x2h6xq1\"\n    },\n    10: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk x1qno0dh x19991ni xpc4ca7 xepofeg x9yvj25 xmnqt3w xx61lck x2h6xq1\"\n    },\n    6: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk xioksi3 x1c42kcb x1seskgd xepofeg x9yvj25 xmnqt3w xx61lck x2h6xq1\"\n    },\n    14: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk x1qno0dh x19991ni xpc4ca7 xepofeg x9yvj25 xmnqt3w xx61lck x2h6xq1\"\n    },\n    1: {\n      className: \"x15dekr4 x1jzqe4 xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk xioksi3 x1c42kcb x1seskgd xg01cxk\"\n    },\n    9: {\n      className: \"x15dekr4 x1jzqe4 xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk x1qno0dh x19991ni xpc4ca7 xg01cxk\"\n    },\n    5: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk xioksi3 x1c42kcb x1seskgd x167r6xl x1jzqe4 xg01cxk\"\n    },\n    13: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk x1qno0dh x19991ni xpc4ca7 x167r6xl x1jzqe4 xg01cxk\"\n    },\n    3: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk xioksi3 x1c42kcb x1seskgd xepofeg x9yvj25 xmnqt3w xx61lck x2h6xq1 xg01cxk\"\n    },\n    11: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk x1qno0dh x19991ni xpc4ca7 xepofeg x9yvj25 xmnqt3w xx61lck x2h6xq1 xg01cxk\"\n    },\n    7: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk xioksi3 x1c42kcb x1seskgd xepofeg x9yvj25 xmnqt3w xx61lck x2h6xq1 xg01cxk\"\n    },\n    15: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk x1qno0dh x19991ni xpc4ca7 xepofeg x9yvj25 xmnqt3w xx61lck x2h6xq1 xg01cxk\"\n    }\n  })[!!(selectionMode === 'multiple') << 3 | !!!showSelectedIcon << 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, showSelectedIcon)} />\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), state.isSelected && !state.isDisabled && styles.labelChosen)}>\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`, one of which the\n * props require — nothing here labels it for you, and a set with no name is\n * a group a screen reader cannot 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}: RefAttributes<HTMLDivElement> & 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  onClick,\n  onContextMenu,\n  onKeyDown,\n  onKeyUp,\n  onPointerCancel,\n  onPointerDown,\n  onPointerLeave,\n  onPointerUp,\n  render,\n  ...props\n}: RefAttributes<HTMLButtonElement> & SegmentedButtonSegmentProps) {\n  const selectionMode = useContext(SelectionModeContext);\n  const showSelectedIcon = useContext(ShowSelectedIconContext);\n  // The `aria-*` props React Aria would drop and the keyboard handlers it\n  // would wrap go on the element itself, as they do on Chip, Button and\n  // IconButton; see src/render/aria.tsx.\n  const element = {\n    aria: ariaAttributesOf(props),\n    onKeyDown,\n    onKeyUp\n  };\n  // Off while disabled, as in Button: a control that cannot be pressed\n  // should not answer a press with an animation. A disabled set disables\n  // its segments through React Aria's group state rather than their props,\n  // so the group is read as well.\n  const disabledByGroup = useToggleGroupDisabled(props.id);\n  // The call site's pointer handlers go through the ripple, which calls\n  // them after its own. Spread beside the ripple's, one of the two sets\n  // would write over the other.\n  const ripple = useRipple<FocusableElement>(!disableRipple && props.isDisabled !== true && !disabledByGroup, {\n    onClick,\n    onContextMenu,\n    onPointerCancel,\n    onPointerDown,\n    onPointerLeave,\n    onPointerUp\n  });\n  return <RACToggleButton render={toggleButtonRenderer(element, render)} {...ripple.handlers} {...props} {...mergeStatefulStyles(segmentStyles(showSelectedIcon), 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. Built by a call, since a set that draws no check labels its\n// chosen segment for the container it draws instead.\nfunction segmentStyles(showSelectedIcon: boolean) {\n  return (state: ToggleButtonRenderProps) => stylex.props(styles.segment, focus.ring, state.isSelected ? styles.segmentSelected : styles.segmentUnselected, state.isSelected && !showSelectedIcon && styles.segmentSelectedUnmarked, state.isDisabled && styles.segmentDisabled);\n}\nSegmentedButton.Segment = SegmentedButtonSegment;\nexport type { SegmentedButtonProps, SegmentedButtonSegmentProps };\nexport { SegmentedButtonSegment };\nexport default SegmentedButton;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["c","_c","KeyboardEventHandler","ReactNode","RefAttributes","FocusableElement","Key","ToggleButtonGroupProps","RACToggleButtonGroupProps","ToggleButtonProps","RACToggleButtonProps","SharedElementRenderProps","ToggleButtonRenderProps","ToggleGroupState","stylex","createContext","createElement","useContext","SelectionIndicator","RACSelectionIndicator","ToggleButton","RACToggleButton","ToggleButtonGroup","RACToggleButtonGroup","LabelledByAttribute","CheckGlyph","useRipple","useToggleGroupDisabled","ariaAttributesOf","toggleButtonRenderer","focus","mergeStatefulStyles","colors","motion","radii","sizing","spacing","stateLayerOpacity","typography","ShowSelectedIconContext","SelectionModeContext","SelectionMode","GroupRender","Ripple","ReturnType","NonNullable","keyOf","segment","HTMLElement","written","dataset","key","undefined","JSON","parse","radioGroupRenderer","render","domProps","renderProps","merged","onKeyDownCapture","radioKeys","state","toolbar","HTMLDivElement","event","group","currentTarget","segments","querySelectorAll","filter","closest","from","findIndex","target","step","altKey","ctrlKey","metaKey","stepOf","getComputedStyle","direction","preventDefault","stopPropagation","to","length","setSelected","rtl","GLYPH_SIZE","GLYPH_RESERVE","sm","GLYPH_RESERVE_HALF","FORCED_COLORS","styles","label","k6CgDc","k7Eaqz","kVQacm","kg5iWk","kIyJzY","k1ekBW","kAMwcw","khDVqt","$$css","labelChosen","kAXs8y","labelReserved","k71WvV","keTefX","labelShifted","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","segmentSelectedUnmarked","segmentUnselected","SegmentedButtonProps","Omit","className","disallowEmptySelection","showSelectedIcon","style","SegmentedButtonSegmentProps","children","disableRipple","icon","glyphFor","isSelected","indicatorClassName","isDisabled","selectionMode","isEntering","isExiting","segmentContent","ripple","reserves","glyph","isHovered","isFocusVisible","isPressed","props","surface","SegmentedButton","t0","$","T0","T1","T2","t1","t2","t3","t4","t5","t6","t7","t8","t9","single","t10","SegmentedButtonSegment","onClick","onContextMenu","onKeyDown","onKeyUp","onPointerCancel","onPointerDown","onPointerLeave","onPointerUp","element","aria","disabledByGroup","id","stringify","handlers","segmentStyles","ring","Segment","RACSelectionIndicator","stylex.props","_c","RACToggleButtonGroup","RACToggleButton"],"sources":["../../../src/components/segmented-button/index.tsx"],"sourcesContent":["'use client';\n\nimport type { KeyboardEventHandler, ReactNode, RefAttributes } from 'react';\nimport type { FocusableElement, Key, ToggleButtonGroupProps as RACToggleButtonGroupProps, ToggleButtonProps as RACToggleButtonProps, SharedElementRenderProps, ToggleButtonRenderProps, ToggleGroupState } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { createContext, createElement, useContext } from 'react';\nimport { SelectionIndicator as RACSelectionIndicator, ToggleButton as RACToggleButton, ToggleButtonGroup as RACToggleButtonGroup } from 'react-aria-components';\nimport type { LabelledByAttribute } from '../../render/name';\nimport { CheckGlyph } from '../../glyphs';\nimport { useRipple } from '../../hooks/useRipple';\nimport { useToggleGroupDisabled } from '../../hooks/useToggleGroupDisabled';\nimport { ariaAttributesOf, toggleButtonRenderer } from '../../render/aria';\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// React Aria stops at the name, though: its single mode is announced as a\n// radio group and behaves as a toolbar. So that mode takes the rest of the\n// radio group pattern from the ARIA Authoring Practices, a deliberate\n// departure from React Aria's `ToggleButtonGroup`, in two parts. The chosen\n// segment cannot be pressed off, since a radio group always holds a choice\n// and the page's single-select set always keeps one segment chosen;\n// `disallowEmptySelection={false}` gives React Aria's default back. And the\n// arrow keys choose as they move, wrapping at either end, with Home and End\n// choosing the first and last segment. Under React Aria the arrows moved\n// focus alone and stopped at the ends, so a screen reader reached each radio\n// without it being checked, and choosing one took a separate Space. Choosing\n// several keeps React Aria's toolbar keys, where the arrows only move between\n// buttons and Space toggles one.\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// Without the check, the page's chosen container is the only cue, and it is\n// about 1.2:1 against the page in the light theme, with the same label\n// colour either way — under WCAG's 3:1 for a state. So a set with the check\n// off draws its chosen segment on the secondary role instead, with the label\n// on it, which clears that comfortably. A departure from the page, taken\n// only where the page's own cue has been turned off; with the check drawn,\n// the chosen segment is the page's.\n//\n// Under forced colours a fill is painted in the page's own `Canvas`, so the\n// chosen container is `Highlight` with its label in `HighlightText` — the\n// pair the mode gives whatever is chosen — and a disabled chosen one keeps\n// a `GrayText` ring rather than a fill, which leaves its `GrayText` label\n// readable.\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 GroupRender = RACToggleButtonGroupProps['render'];\ntype Ripple = ReturnType<typeof useRipple<FocusableElement>>;\ntype SelectionMode = NonNullable<RACToggleButtonGroupProps['selectionMode']>;\n\n// A segment's key, back from the attribute `SegmentedButtonSegment` writes\n// it into. JSON rather than the key as written, so a numeric key comes back\n// a number and matches the one React Aria's selection holds.\nfunction keyOf(segment: HTMLElement): Key | null {\n  const written = segment.dataset.key;\n  if (written === undefined) {\n    return null;\n  }\n  const key: unknown = JSON.parse(written);\n  return typeof key === 'string' || typeof key === 'number' ? key : null;\n}\n\n// The group's element, with `radioKeys` in place of React Aria's keyboard\n// handler, then handed to the call site's own `render` if it passed one.\nfunction radioGroupRenderer(render: GroupRender): NonNullable<GroupRender> {\n  return (domProps, renderProps) => {\n    const merged = {\n      ...domProps,\n      onKeyDownCapture: radioKeys(renderProps.state, domProps.onKeyDownCapture)\n    };\n    return render === undefined ? createElement('div', merged) : render(merged, renderProps);\n  };\n}\n\n// The radio group's keys, taken ahead of React Aria's toolbar ones on the\n// same capture listener: the arrows, Home and End move focus to a segment\n// and choose it, wrapping at the ends and passing over a disabled segment,\n// which is what the toolbar's own handler would otherwise do with focus\n// alone. Everything else — Tab, and an arrow held with a modifier the\n// browser may want — is handed to the toolbar as before.\nfunction radioKeys(state: ToggleGroupState, toolbar: KeyboardEventHandler<HTMLDivElement> | undefined): KeyboardEventHandler<HTMLDivElement> {\n  return event => {\n    const group = event.currentTarget;\n    const segments = [...group.querySelectorAll<HTMLElement>('[data-key]:not([data-disabled])')].filter(segment => segment.closest('[role=\"radiogroup\"]') === group);\n    const from = segments.findIndex(segment => segment === event.target);\n    const step = event.altKey || event.ctrlKey || event.metaKey ? null : stepOf(event.key, getComputedStyle(group).direction === 'rtl');\n    if (from === -1 || step === null) {\n      toolbar?.(event);\n      return;\n    }\n    event.preventDefault();\n    event.stopPropagation();\n    const to = step === 'first' ? 0 : step === 'last' ? segments.length - 1 : (from + step + segments.length) % segments.length;\n    const segment = segments[to];\n    const key = keyOf(segment);\n    if (key === null) {\n      return;\n    }\n    segment.focus();\n    state.setSelected(key, true);\n  };\n}\n\n// Where a key moves the choice in a radio group: one segment on, one back,\n// or to either end. Right and left follow the direction the track is drawn\n// in, read off the track itself rather than the locale, so a `dir` on a\n// wrapper turns them over as it turns the track over; up and down, and Home\n// and End, follow the document order whatever the direction.\nfunction stepOf(key: string, rtl: boolean): -1 | 1 | 'first' | 'last' | null {\n  switch (key) {\n    case 'ArrowDown':\n      {\n        return 1;\n      }\n    case 'ArrowLeft':\n      {\n        return rtl ? 1 : -1;\n      }\n    case 'ArrowRight':\n      {\n        return rtl ? -1 : 1;\n      }\n    case 'ArrowUp':\n      {\n        return -1;\n      }\n    case 'End':\n      {\n        return 'last';\n      }\n    case 'Home':\n      {\n        return 'first';\n      }\n    default:\n      {\n        return null;\n      }\n  }\n}\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)`;\n\n// Windows High Contrast and the rest of the forced-colours modes. Spelled\n// here rather than imported, for the reason src/field/styles.ts records: the\n// StyleX compiler resolves a constant across files only out of a `.stylex.ts`\n// module, and the generated one holds design tokens rather than queries.\nconst FORCED_COLORS = '@media (forced-colors: active)';\nconst styles = {\n  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  labelChosen: {\n    kAXs8y: \"x1g12otp\",\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 x1bhcspo\",\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  segmentSelected: {\n    kMwMTN: \"x1sawysd x1k5gbb1\",\n    $$css: true\n  },\n  segmentSelectedUnmarked: {\n    kMwMTN: \"x1lba3jz x1k5gbb1\",\n    $$css: true\n  },\n  segmentUnselected: {\n    kMwMTN: \"x139gbkf\",\n    $$css: true\n  }\n};\ntype SegmentedButtonProps = LabelledByAttribute & 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 the chosen segment stays chosen when it is pressed again. On\n   * by default while one is chosen, since a radio group always holds a\n   * choice; `false` lets a press clear it, as React Aria's own default\n   * does. Off by default while several may be, where any of them can be\n   * turned off.\n   * @default true while one is chosen, false while several may be\n   */\n  disallowEmptySelection?: boolean;\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   * and draws the chosen segment on the stronger secondary container, since\n   * the page's own is too faint to say which is chosen by itself.\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, showSelectedIcon: boolean): (state: SharedElementRenderProps) => string {\n  return state => ({\n    0: {\n      className: \"x15dekr4 x1jzqe4 xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk xioksi3 x1c42kcb x1seskgd\"\n    },\n    8: {\n      className: \"x15dekr4 x1jzqe4 xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk x1qno0dh x19991ni xpc4ca7\"\n    },\n    4: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk xioksi3 x1c42kcb x1seskgd x167r6xl x1jzqe4\"\n    },\n    12: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk x1qno0dh x19991ni xpc4ca7 x167r6xl x1jzqe4\"\n    },\n    2: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk xioksi3 x1c42kcb x1seskgd xepofeg x9yvj25 xmnqt3w xx61lck x2h6xq1\"\n    },\n    10: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk x1qno0dh x19991ni xpc4ca7 xepofeg x9yvj25 xmnqt3w xx61lck x2h6xq1\"\n    },\n    6: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk xioksi3 x1c42kcb x1seskgd xepofeg x9yvj25 xmnqt3w xx61lck x2h6xq1\"\n    },\n    14: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk x1qno0dh x19991ni xpc4ca7 xepofeg x9yvj25 xmnqt3w xx61lck x2h6xq1\"\n    },\n    1: {\n      className: \"x15dekr4 x1jzqe4 xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk xioksi3 x1c42kcb x1seskgd xg01cxk\"\n    },\n    9: {\n      className: \"x15dekr4 x1jzqe4 xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk x1qno0dh x19991ni xpc4ca7 xg01cxk\"\n    },\n    5: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk xioksi3 x1c42kcb x1seskgd x167r6xl x1jzqe4 xg01cxk\"\n    },\n    13: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk x1qno0dh x19991ni xpc4ca7 x167r6xl x1jzqe4 xg01cxk\"\n    },\n    3: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk xioksi3 x1c42kcb x1seskgd xepofeg x9yvj25 xmnqt3w xx61lck x2h6xq1 xg01cxk\"\n    },\n    11: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk x1qno0dh x19991ni xpc4ca7 xepofeg x9yvj25 xmnqt3w xx61lck x2h6xq1 xg01cxk\"\n    },\n    7: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk xioksi3 x1c42kcb x1seskgd xepofeg x9yvj25 xmnqt3w xx61lck x2h6xq1 xg01cxk\"\n    },\n    15: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk x1qno0dh x19991ni xpc4ca7 xepofeg x9yvj25 xmnqt3w xx61lck x2h6xq1 xg01cxk\"\n    }\n  })[!!(selectionMode === 'multiple') << 3 | !!!showSelectedIcon << 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, showSelectedIcon)} />\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), state.isSelected && !state.isDisabled && styles.labelChosen)}>\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`, one of which the\n * props require — nothing here labels it for you, and a set with no name is\n * a group a screen reader cannot 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 * Choosing one behaves as a radio group too, which React Aria's\n * `ToggleButtonGroup` does not. The chosen segment stays chosen when it is\n * pressed again, unless `disallowEmptySelection` is `false`. The arrow keys\n * move to a segment and choose it, wrapping at either end, and Home and End\n * choose the first and last. Choosing several keeps React Aria's keys: the\n * arrows move between segments, and Space or Enter toggles the focused one.\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  disallowEmptySelection,\n  render,\n  selectionMode = 'single',\n  showSelectedIcon = true,\n  ...props\n}: RefAttributes<HTMLDivElement> & SegmentedButtonProps) {\n  const single = selectionMode === 'single';\n  return <ShowSelectedIconContext value={showSelectedIcon}>\n      <SelectionModeContext value={selectionMode}>\n        <RACToggleButtonGroup {...props} disallowEmptySelection={disallowEmptySelection ?? single} render={single ? radioGroupRenderer(render) : render} 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  onClick,\n  onContextMenu,\n  onKeyDown,\n  onKeyUp,\n  onPointerCancel,\n  onPointerDown,\n  onPointerLeave,\n  onPointerUp,\n  render,\n  ...props\n}: RefAttributes<HTMLButtonElement> & SegmentedButtonSegmentProps) {\n  const selectionMode = useContext(SelectionModeContext);\n  const showSelectedIcon = useContext(ShowSelectedIconContext);\n  // The `aria-*` props React Aria would drop and the keyboard handlers it\n  // would wrap go on the element itself, as they do on Chip, Button and\n  // IconButton; see src/render/aria.tsx.\n  const element = {\n    aria: ariaAttributesOf(props),\n    onKeyDown,\n    onKeyUp\n  };\n  // Off while disabled, as in Button: a control that cannot be pressed\n  // should not answer a press with an animation. A disabled set disables\n  // its segments through React Aria's group state rather than their props,\n  // so the group is read as well.\n  const disabledByGroup = useToggleGroupDisabled(props.id);\n  // The call site's pointer handlers go through the ripple, which calls\n  // them after its own. Spread beside the ripple's, one of the two sets\n  // would write over the other.\n  const ripple = useRipple<FocusableElement>(!disableRipple && props.isDisabled !== true && !disabledByGroup, {\n    onClick,\n    onContextMenu,\n    onPointerCancel,\n    onPointerDown,\n    onPointerLeave,\n    onPointerUp\n  });\n  return <RACToggleButton\n  // The key the radio group's arrow keys choose this segment by; see\n  // `radioKeys`. React Aria keeps a segment's key off its element.\n  data-key={selectionMode === 'single' && props.id !== undefined ? JSON.stringify(props.id) : undefined} render={toggleButtonRenderer(element, render)} {...ripple.handlers} {...props} {...mergeStatefulStyles(segmentStyles(showSelectedIcon), 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. Built by a call, since a set that draws no check labels its\n// chosen segment for the container it draws instead.\nfunction segmentStyles(showSelectedIcon: boolean) {\n  return (state: ToggleButtonRenderProps) => stylex.props(styles.segment, focus.ring, state.isSelected ? styles.segmentSelected : styles.segmentUnselected, state.isSelected && !showSelectedIcon && styles.segmentSelectedUnmarked, state.isDisabled && styles.segmentDisabled);\n}\nSegmentedButton.Segment = SegmentedButtonSegment;\nexport type { SegmentedButtonProps, SegmentedButtonSegmentProps };\nexport { SegmentedButtonSegment };\nexport default SegmentedButton;"],"mappings":";;;;;;;;;;;;;;AAwJA,MAAMuC,0BAA0BxB,cAAc,IAAI;AAKlD,MAAMyB,uBAAuBzB,cAA6B,QAAQ;AAQlE,SAAS+B,MAAMC,SAAkC;CAC/C,MAAME,UAAUF,QAAQG,QAAQC;CAChC,IAAIF,YAAYG,KAAAA,GACd,OAAO;CAET,MAAMD,MAAeE,KAAKC,MAAML,OAAO;CACvC,OAAO,OAAOE,QAAQ,YAAY,OAAOA,QAAQ,WAAWA,MAAM;AACpE;AAIA,SAASI,mBAAmBC,QAA+C;CACzE,QAAQC,UAAUC,gBAAgB;EAChC,MAAMC,SAAS;GACb,GAAGF;GACHG,kBAAkBC,UAAUH,YAAYI,OAAOL,SAASG,gBAAgB;EAC1E;EACA,OAAOJ,WAAWJ,KAAAA,IAAYpC,cAAc,OAAO2C,MAAM,IAAIH,OAAOG,QAAQD,WAAW;CACzF;AACF;AAQA,SAASG,UAAUC,OAAyBC,SAAiG;CAC3I,QAAOE,UAAS;EACd,MAAMC,QAAQD,MAAME;EACpB,MAAMC,WAAW,CAAC,GAAGF,MAAMG,iBAA8B,iCAAiC,CAAC,CAAC,CAACC,QAAOvB,YAAWA,QAAQwB,QAAQ,uBAAqB,MAAML,KAAK;EAC/J,MAAMM,OAAOJ,SAASK,WAAU1B,YAAWA,YAAYkB,MAAMS,MAAM;EACnE,MAAMC,OAAOV,MAAMW,UAAUX,MAAMY,WAAWZ,MAAMa,UAAU,OAAOC,OAAOd,MAAMd,KAAK6B,iBAAiBd,KAAK,CAAC,CAACe,cAAc,KAAK;EAClI,IAAIT,SAAS,MAAMG,SAAS,MAAM;GAChCZ,UAAUE,KAAK;GACf;EACF;EACAA,MAAMiB,eAAe;EACrBjB,MAAMkB,gBAAgB;EAEtB,MAAMpC,UAAUqB,SADLO,SAAS,UAAU,IAAIA,SAAS,SAASP,SAASiB,SAAS,KAAKb,OAAOG,OAAOP,SAASiB,UAAUjB,SAASiB;EAErH,MAAMlC,MAAML,MAAMC,OAAO;EACzB,IAAII,QAAQ,MACV;EAEFJ,QAAQjB,MAAM;EACdgC,MAAMwB,YAAYnC,KAAK,IAAI;CAC7B;AACF;AAOA,SAAS4B,OAAO5B,KAAaoC,KAAgD;CAC3E,QAAQpC,KAAR;EACE,KAAK,aAED,OAAO;EAEX,KAAK,aAED,OAAOoC,MAAM,IAAI;EAErB,KAAK,cAED,OAAOA,MAAM,KAAK;EAEtB,KAAK,WAED,OAAO;EAEX,KAAK,OAED,OAAO;EAEX,KAAK,QAED,OAAO;EAEX,SAEI,OAAO;CAEb;AACF;AAOsB,GAAwBnD,QAAQsD;AAC3B,GAAyBtD,QAAQsD;AAO5D,MAAMG,SAAS;CACbC,OAAO;EACLC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;CACT;CACAC,aAAa;EACXC,QAAQ;EACRF,OAAO;CACT;CACAG,eAAe;EACbC,QAAQ;EACRC,QAAQ;EACRL,OAAO;CACT;CACAM,cAAc;EACZF,QAAQ;EACRC,QAAQ;EACRL,OAAO;CACT;CACAxD,SAAS;EACP,kCAAkC;EAClC,oCAAoC;EACpC+D,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRlB,QAAQ;EACRmB,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;EACRrC,QAAQ;EACRsC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRrC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRE,OAAO;CACT;CACAkC,iBAAiB;EACfpB,QAAQ;EACRqB,QAAQ;EACRZ,QAAQ;EACRvB,OAAO;CACT;CACAoC,iBAAiB;EACfD,QAAQ;EACRnC,OAAO;CACT;CACAqC,yBAAyB;EACvBF,QAAQ;EACRnC,OAAO;CACT;CACAsC,mBAAmB;EACjBH,QAAQ;EACRnC,OAAO;CACT;AACF;;;;;;;;AAoDA,SAASiD,SAAS1F,OAAgCyF,MAAiBL,kBAAsC;CACvG,IAAIpF,MAAM2F,cAAcP,kBACtB,OAAO,oBAAC,YAAD,EAAY,WAAU,2BAA0B,CAAA;CAEzD,OAAOK,QAAQ;AACjB;AAMA,SAASG,mBAAmBC,YAAqBC,eAA8BV,kBAAwE;CACrJ,QAAOpF,WAAU;EACf,GAAG,EACDkF,WAAW,iIACb;EACA,GAAG,EACDA,WAAW,iIACb;EACA,GAAG,EACDA,WAAW,iIACb;EACA,IAAI,EACFA,WAAW,iIACb;EACA,GAAG,EACDA,WAAW,wJACb;EACA,IAAI,EACFA,WAAW,wJACb;EACA,GAAG,EACDA,WAAW,wJACb;EACA,IAAI,EACFA,WAAW,wJACb;EACA,GAAG,EACDA,WAAW,yIACb;EACA,GAAG,EACDA,WAAW,yIACb;EACA,GAAG,EACDA,WAAW,yIACb;EACA,IAAI,EACFA,WAAW,yIACb;EACA,GAAG,EACDA,WAAW,gKACb;EACA,IAAI,EACFA,WAAW,gKACb;EACA,GAAG,EACDA,WAAW,gKACb;EACA,IAAI,EACFA,WAAW,gKACb;CACF,EAAA,CAAG,CAAC,EAAEY,kBAAkB,eAAe,IAAI,CAAC,CAAC,CAACV,oBAAoB,IAAI,CAAC,CAACS,cAAc,IAAI,CAAC,EAAE7F,MAAM+F,cAAc/F,MAAMgG,cAAc,EAAE,CAACd,aAAa;AACvJ;AAMA,SAASe,eAAeV,UAAqBE,MAAiBS,QAAgBJ,eAA8BV,kBAA2B;CAKrI,MAAMe,WAAWf,oBAAoBK,SAASnG,KAAAA;CAC9C,QAAQU,UAAmC;EACzC,MAAMoG,QAAQV,SAAS1F,OAAOyF,MAAML,gBAAgB;EACpD,OAAO,qBAAA,YAAA,EAAA,UAAA;GACH,oBAACyD,oBAAD,EAAuB,WAAWjD,mBAAmB5F,MAAM6F,YAAYC,eAAeV,gBAAgB,EAAE,CAAA;GACxG,oBAAC,QAAD,EAAM,GAAI;IACV,GAAG,EACDF,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,CAAClF,MAAMqG,aAAa,IAAI,CAAC,CAACrG,MAAMsG,kBAAkB,IAAI,CAAC,CAACtG,MAAMuG,aAAa,GAAG,CAAA;GAC9EJ,YAAY,oBAAC,QAAD;IAAM,GAAI;KACvB,GAAG,EACDjB,WAAW,sIACb;KACA,GAAG,EACDA,WAAW,uIACb;IACF,EAAE,CAAC,EAAEkB,UAAU,SAAS;IACjBA,UAAAA;GACG,CAAA;GACR,oBAAC,QAAD;IAAM,GAAIpJ,MAAa+E,OAAOC,OAAOmE,aAAaC,UAAU,OAAOrE,OAAOa,gBAAgBb,OAAOgB,eAAe/C,MAAM2F,cAAc,CAAC3F,MAAM6F,cAAc9D,OAAOW,WAAW;IACxK6C;GACG,CAAA;GACLW,OAAOO;EACV,EAAA,CAAA;CACJ;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiCA,SAAAC,gBAAAC,IAAA;CAAA,MAAAC,IAAAzK,EAAA,EAAA;CAAA,IAAA0K;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAV,EAAA,OAAAD,IAAA;EAAyB,MAAA,EAAAxB,wBAAAzF,QAAAoG,eAAAyB,IAAAnC,kBAAAoC,IAAA,GAAAhB,UAAAG;EAGvB,MAAAb,gBAAAyB,OAAAjI,KAAAA,IAAA,WAAAiI;EACA,MAAAnC,mBAAAoC,OAAAlI,KAAAA,IAAA,OAAAkI;EAGA,MAAAC,SAAe3B,kBAAkB;EACzBiB,KAAAtI;EAA+B2G,KAAAA;EAClC0B,KAAApI;EAA4BoH,KAAAA;EAC1Be,KAAApJ;EAAyB+I,KAAAA;EAA+BS,KAAA9B,0BAAAsC;EAAgC,IAAAb,EAAA,QAAAlH,UAAAkH,EAAA,QAAAa,QAAA;GAAUP,KAAAO,SAAShI,mBAAmBC,MAAe,IAA3CA;GAA4CkH,EAAA,MAAAlH;GAAAkH,EAAA,MAAAa;GAAAb,EAAA,MAAAM;EAAA,OAAAA,KAAAN,EAAA;EAAiBd,KAAAA;EAAmBsB,KAAAnJ,oBAAoB,EAAAiH,WAC5L,0CACb,GAAGsB,KAAK;EAACI,EAAA,KAAAD;EAAAC,EAAA,KAAAC;EAAAD,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;EAAAL,EAAA,KAAAM;EAAAN,EAAA,KAAAO;EAAAP,EAAA,KAAAQ;EAAAR,EAAA,KAAAS;EAAAT,EAAA,MAAAU;CAAA,OAAA;EAAAT,KAAAD,EAAA;EAAAE,KAAAF,EAAA;EAAAG,KAAAH,EAAA;EAAAI,KAAAJ,EAAA;EAAAK,KAAAL,EAAA;EAAAM,KAAAN,EAAA;EAAAO,KAAAP,EAAA;EAAAQ,KAAAR,EAAA;EAAAS,KAAAT,EAAA;EAAAU,KAAAV,EAAA;CAAA;CAAA,IAAAW;CAAA,IAAAX,EAAA,QAAAC,MAAAD,EAAA,QAAAI,MAAAJ,EAAA,QAAAK,MAAAL,EAAA,QAAAM,MAAAN,EAAA,QAAAO,MAAAP,EAAA,QAAAQ,IAAA;EAFPG,KAAA,oBAAC,IAAD;GAAqB,GAAKf;GAA+B,wBAAAS;GAA0C,QAAAC;GAA6DpB,eAAAA;GAAa,GAAMsB;EAE5K,CAAA;EAAIR,EAAA,MAAAC;EAAAD,EAAA,MAAAI;EAAAJ,EAAA,MAAAK;EAAAL,EAAA,MAAAM;EAAAN,EAAA,MAAAO;EAAAP,EAAA,MAAAQ;EAAAR,EAAA,MAAAW;CAAA,OAAAA,KAAAX,EAAA;CAAA,IAAAY;CAAA,IAAAZ,EAAA,QAAAE,MAAAF,EAAA,QAAAS,MAAAT,EAAA,QAAAW,IAAA;EAHbC,KAAA,oBAAC,IAAD;GAA6B1B,OAAAA;GAC3ByB,UAAAA;EADmB,CAAA;EAIEX,EAAA,MAAAE;EAAAF,EAAA,MAAAS;EAAAT,EAAA,MAAAW;EAAAX,EAAA,MAAAY;CAAA,OAAAA,KAAAZ,EAAA;CAAA,IAAAc;CAAA,IAAAd,EAAA,QAAAG,MAAAH,EAAA,QAAAU,MAAAV,EAAA,QAAAY,IAAA;EALpBE,MAAA,oBAAC,IAAD;GAAgCtC,OAAAA;GACnCoC,UAAAA;EAD2B,CAAA;EAMHZ,EAAA,MAAAG;EAAAH,EAAA,MAAAU;EAAAV,EAAA,MAAAY;EAAAZ,EAAA,MAAAc;CAAA,OAAAA,MAAAd,EAAA;CAAA,OANrBc;AAMqB;;;;;;AAQ9B,SAAAC,uBAAAhB,IAAA;CAAA,MAAAC,IAAAzK,EAAA,EAAA;CAAgC,MAAA,EAAAoJ,UAAAC,eAAAwB,IAAAvB,MAAAmC,SAAAC,eAAAC,WAAAC,SAAAC,iBAAAC,eAAAC,gBAAAC,aAAAzI,QAAA,GAAA8G,UAAAG;CAE9B,MAAAnB,gBAAAwB,OAAA1H,KAAAA,IAAA,QAAA0H;CAaA,MAAAlB,gBAAsB3I,WAAWuB,oBAAoB;CACrD,MAAA0G,mBAAyBjI,WAAWsB,uBAAuB;CAI3D,MAAA2J,UAAgB;EAAAC,MACRvK,iBAAiB0I,KAAK;EAACsB;EAAAC;CAG/B;CAKA,MAAAO,kBAAwBzK,uBAAuB2I,MAAK+B,EAAG;CAAE,IAAAtB;CAAA,IAAAL,EAAA,OAAAgB,WAAAhB,EAAA,OAAAiB,iBAAAjB,EAAA,OAAAoB,mBAAApB,EAAA,OAAAqB,iBAAArB,EAAA,OAAAsB,kBAAAtB,EAAA,OAAAuB,aAAA;EAImDlB,KAAA;GAAAW;GAAAC;GAAAG;GAAAC;GAAAC;GAAAC;EAO5G;EAACvB,EAAA,KAAAgB;EAAAhB,EAAA,KAAAiB;EAAAjB,EAAA,KAAAoB;EAAApB,EAAA,KAAAqB;EAAArB,EAAA,KAAAsB;EAAAtB,EAAA,KAAAuB;EAAAvB,EAAA,KAAAK;CAAA,OAAAA,KAAAL,EAAA;CAPD,MAAAV,SAAetI,UAA4B,CAAC4H,iBAAiBgB,MAAKX,eAAgB,QAAvC,CAAgDyC,iBAAiBrB,EAO3G;CACO,MAAAJ,KAAAtJ;CAGE,MAAA2J,KAAApB,kBAAkB,YAAYU,MAAK+B,OAAQjJ,KAAAA,IAAYC,KAAIiJ,UAAWhC,MAAK+B,EAAe,IAA1FjJ,KAAAA;CAAqG,MAAA6H,KAAApJ,qBAAqBqK,SAAS1I,MAAM;CAAO,MAAA0H,KAAAlB,OAAMuC;CAA0B,MAAApB,KAAApJ,oBAAoByK,cAActD,gBAAgB,GAAGoB,KAAK;CAAC,IAAAc;CAAA,IAAAV,EAAA,OAAArB,YAAAqB,EAAA,OAAAnB,QAAAmB,EAAA,OAAAV,UAAAU,EAAA,QAAAd,iBAAAc,EAAA,QAAAxB,kBAAA;EAChPkC,KAAArB,eAAeV,UAAUE,MAAMS,QAAQJ,eAAeV,gBAAgB;EAACwB,EAAA,KAAArB;EAAAqB,EAAA,KAAAnB;EAAAmB,EAAA,KAAAV;EAAAU,EAAA,MAAAd;EAAAc,EAAA,MAAAxB;EAAAwB,EAAA,MAAAU;CAAA,OAAAA,KAAAV,EAAA;CAAA,IAAAW;CAAA,IAAAX,EAAA,QAAAC,MAAAD,EAAA,QAAAJ,SAAAI,EAAA,QAAAV,OAAAuC,YAAA7B,EAAA,QAAAM,MAAAN,EAAA,QAAAO,MAAAP,EAAA,QAAAS,MAAAT,EAAA,QAAAU,IAAA;EAJrEC,KAAA,oBAAC,IAAD;GAGG,YAAAL;GAAqG,QAAAC;GAAqC,GAAMC;GAAe,GAAMZ;GAAK,GAAMa;GACrLC,UAAAA;EAJkB,CAAA;EAKHV,EAAA,MAAAC;EAAAD,EAAA,MAAAJ;EAAAI,EAAA,MAAAV,OAAAuC;EAAA7B,EAAA,MAAAM;EAAAN,EAAA,MAAAO;EAAAP,EAAA,MAAAS;EAAAT,EAAA,MAAAU;EAAAV,EAAA,MAAAW;CAAA,OAAAA,KAAAX,EAAA;CAAA,OALbW;AAKa;AAQtB,SAASmB,cAActD,kBAA2B;CAChD,QAAQpF,UAAmChD,MAAa+E,OAAO9C,SAASjB,MAAM2K,MAAM3I,MAAM2F,aAAa5D,OAAO8C,kBAAkB9C,OAAOgD,mBAAmB/E,MAAM2F,cAAc,CAACP,oBAAoBrD,OAAO+C,yBAAyB9E,MAAM6F,cAAc9D,OAAO4C,eAAe;AAC/Q;AACA+B,gBAAgBkC,UAAUjB"}