@kanso-labs/kanso-ui 0.43.6 → 0.44.0

package/dist/components/dialog/index.js

@@ -4,12 +4,13 @@ import { mergeRefs } from "../../render/ref.js";
 import { mergeStatefulStyles, mergeStyles } from "../../styles/merge.js";
 import { overlay } from "../../styles/overlay.js";
 import { useHoldBottomEdge } from "../../hooks/useBottomEdge.js";
-import { useScrollable } from "../../hooks/useScrollable.js";
+import { useScrollStop } from "../../hooks/useScrollStop.js";
 import { OverlayScope } from "../../overlay/index.js";
+import { InsideModalContext } from "../../overlay/modal.js";
 import { c } from "react/compiler-runtime";
-import { createContext, useContext, useRef, useSyncExternalStore } from "react";
+import { createContext, useContext, useId, useLayoutEffect, useRef, useState, useSyncExternalStore } from "react";
 import { jsx } from "react/jsx-runtime";
-import { Dialog, DialogTrigger, Heading, Modal, ModalOverlay } from "react-aria-components";
+import { Dialog, DialogTrigger, Heading, HeadingContext, Modal, ModalOverlay, useSlottedContext } from "react-aria-components";
 //#region src/components/dialog/index.tsx
 const FULL_SCREEN = "(width < 600px)";
 const styles = {
@@ -25,6 +26,7 @@ const styles = {
 		kOIVth: "xxj4525",
 		kb6lSQ: "xn43zvd",
 		kLWn49: "xv61bfh",
+		kHjlTd: "xj0a0fe",
 		kORKVm: "x1odjw0f",
 		kGO01o: "x1az23kl x18d9i69",
 		kLKAdn: "x886u18 xexx8yu x3reb9c",
@@ -50,6 +52,7 @@ const basic = {
 	}
 };
 const BasicContext = createContext(false);
+const DescriptionContext = createContext(null);
 /**
 * A modal dialog centred over the page, and the same dialog filling the
 * window below the medium breakpoint — the dialogs page's basic and
@@ -97,11 +100,25 @@ function Dialog$1(t0) {
 	return t1;
 }
 function DialogBody(t0) {
-	const $ = c(7);
+	const $ = c(8);
 	const { ref: callerRef, ...props$2 } = t0;
 	const isBasic = useContext(BasicContext);
+	const describe = useContext(DescriptionContext);
+	const generated = useId();
+	const id = props$2.id ?? (describe === null ? void 0 : generated);
+	useLayoutEffect(() => {
+		if (describe === null || id === void 0) return;
+		describe(id);
+		return () => {
+			describe(void 0);
+		};
+	}, [describe, id]);
 	const ref = useRef(null);
-	const scrollable = useScrollable(ref);
+	const title = useSlottedContext(HeadingContext, "title");
+	const scrollStop = useScrollStop(ref, {
+		label: props$2["aria-label"],
+		title: title?.id
+	});
 	const t1 = callerRef ?? void 0;
 	let t2;
 	if ($[0] !== t1) {
@@ -110,23 +127,24 @@ function DialogBody(t0) {
 		$[1] = t2;
 	} else t2 = $[1];
 	const merged = t2;
-	const t3 = scrollable ? 0 : void 0;
-	const t4 = mergeStyles(props(styles.body, isBasic && basic.body, overlay.modalBodyRing), props$2);
-	let t5;
-	if ($[2] !== merged || $[3] !== props$2 || $[4] !== t3 || $[5] !== t4) {
-		t5 = /* @__PURE__ */ jsx("div", {
-			tabIndex: t3,
+	const t3 = mergeStyles(props(styles.body, isBasic && basic.body, overlay.modalBodyRing), props$2);
+	let t4;
+	if ($[2] !== id || $[3] !== merged || $[4] !== props$2 || $[5] !== scrollStop || $[6] !== t3) {
+		t4 = /* @__PURE__ */ jsx("div", {
+			...scrollStop,
+			id,
 			...props$2,
 			ref: merged,
-			...t4
+			...t3
 		});
-		$[2] = merged;
-		$[3] = props$2;
-		$[4] = t3;
-		$[5] = t4;
-		$[6] = t5;
-	} else t5 = $[6];
-	return t5;
+		$[2] = id;
+		$[3] = merged;
+		$[4] = props$2;
+		$[5] = scrollStop;
+		$[6] = t3;
+		$[7] = t4;
+	} else t4 = $[7];
+	return t4;
 }
 /**
 * The dialog itself, and the scrim behind it. Everything the dialog shows
@@ -137,7 +155,9 @@ function DialogBody(t0) {
 * something that has to be answered before the page carries on — a screen
 * reader announces it rather than waiting to be asked. It also keeps the
 * dialog the basic one below the medium breakpoint, centred and sized to its
-* content, where a dialog of the default role fills the window.
+* content, where a dialog of the default role fills the window. Its
+* `Dialog.Body` is its description, so the message is read out with the
+* title; an `aria-describedby` of the call site's own names another.
 *
 * A press on the scrim closes the dialog unless `isDismissable` says
 * otherwise, which is the same default `Sheet` takes and the reverse of
@@ -157,7 +177,7 @@ function DialogBody(t0) {
 * over it, and React Aria's popovers and menus draw above both.
 */
 function DialogContent(t0) {
-	const $ = c(38);
+	const $ = c(43);
 	let children;
 	let className;
 	let container;
@@ -198,87 +218,107 @@ function DialogContent(t0) {
 	}
 	const isDismissable = t1 === void 0 ? true : t1;
 	const isBasic = props$1.role === "alertdialog";
-	let t2;
-	if ($[12] !== isBasic) {
-		t2 = props(overlay.scrim, styles.centre, isBasic && basic.centre);
-		$[12] = isBasic;
-		$[13] = t2;
-	} else t2 = $[13];
+	const [body, setBody] = useState();
+	const overModal = useContext(InsideModalContext);
+	const t2 = isBasic ? setBody : null;
 	let t3;
-	if ($[14] !== className || $[15] !== isBasic || $[16] !== style) {
-		t3 = mergeStatefulStyles({
+	if ($[12] !== isBasic || $[13] !== overModal) {
+		t3 = props(overlay.scrim, overModal && overlay.scrimOverModal, styles.centre, isBasic && basic.centre);
+		$[12] = isBasic;
+		$[13] = overModal;
+		$[14] = t3;
+	} else t3 = $[14];
+	let t4;
+	if ($[15] !== className || $[16] !== isBasic || $[17] !== style) {
+		t4 = mergeStatefulStyles({
 			0: { className: "x1n1nwrg x1u6grsq xbhiib0 x1ebxanj x16dv9tl xvkjz1l xt7dq6l x1ju3lih x1w1tqly x19pkqky x1f120ba xx61lck x1gb867b x13rsnn2 x1udv5rz x9f619 x139gbkf x78zum5 xdt5ytf xh8yej3 xmz0i5r x27kpxv x6iovhr x1u2d2a2 xxzqys8 xb3r6kr x9xqwrn xg8iv3o x19b5e0v xsds98l" },
 			1: { className: "x1n1nwrg x1u6grsq x16dv9tl xvkjz1l x1w1tqly x13rsnn2 x1udv5rz x9f619 x139gbkf x78zum5 xdt5ytf xh8yej3 xmz0i5r xb3r6kr xbhiib0 xt7dq6l x19pkqky xx61lck x27kpxv x1u2d2a2" }
 		}[!!isBasic << 0], {
 			className,
 			style
 		});
-		$[14] = className;
-		$[15] = isBasic;
-		$[16] = style;
-		$[17] = t3;
-	} else t3 = $[17];
-	let t4;
-	if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
-		t4 = props(overlay.modalDialog);
+		$[15] = className;
+		$[16] = isBasic;
+		$[17] = style;
 		$[18] = t4;
 	} else t4 = $[18];
-	let t5;
-	if ($[19] !== children || $[20] !== props$1) {
-		t5 = /* @__PURE__ */ jsx(Dialog, {
-			...props$1,
-			...t4,
-			children
-		});
-		$[19] = children;
-		$[20] = props$1;
-		$[21] = t5;
-	} else t5 = $[21];
+	const t5 = props$1["aria-describedby"] ?? (isBasic ? body : void 0);
 	let t6;
-	if ($[22] !== ref || $[23] !== t3 || $[24] !== t5) {
-		t6 = /* @__PURE__ */ jsx(Modal, {
+	if ($[19] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = props(overlay.modalDialog);
+		$[19] = t6;
+	} else t6 = $[19];
+	let t7;
+	if ($[20] !== children || $[21] !== props$1 || $[22] !== t5) {
+		t7 = /* @__PURE__ */ jsx(InsideModalContext, {
+			value: true,
+			children: /* @__PURE__ */ jsx(Dialog, {
+				...props$1,
+				"aria-describedby": t5,
+				...t6,
+				children
+			})
+		});
+		$[20] = children;
+		$[21] = props$1;
+		$[22] = t5;
+		$[23] = t7;
+	} else t7 = $[23];
+	let t8;
+	if ($[24] !== ref || $[25] !== t4 || $[26] !== t7) {
+		t8 = /* @__PURE__ */ jsx(Modal, {
 			ref,
-			...t3,
-			children: t5
+			...t4,
+			children: t7
 		});
-		$[22] = ref;
-		$[23] = t3;
-		$[24] = t5;
-		$[25] = t6;
-	} else t6 = $[25];
-	let t7;
-	if ($[26] !== container || $[27] !== defaultOpen || $[28] !== isDismissable || $[29] !== isKeyboardDismissDisabled || $[30] !== isOpen || $[31] !== onOpenChange || $[32] !== t2 || $[33] !== t6) {
-		t7 = /* @__PURE__ */ jsx(OverlayScope, { children: /* @__PURE__ */ jsx(ModalOverlay, {
+		$[24] = ref;
+		$[25] = t4;
+		$[26] = t7;
+		$[27] = t8;
+	} else t8 = $[27];
+	let t9;
+	if ($[28] !== container || $[29] !== defaultOpen || $[30] !== isDismissable || $[31] !== isKeyboardDismissDisabled || $[32] !== isOpen || $[33] !== onOpenChange || $[34] !== t3 || $[35] !== t8) {
+		t9 = /* @__PURE__ */ jsx(OverlayScope, { children: /* @__PURE__ */ jsx(ModalOverlay, {
 			defaultOpen,
 			isDismissable,
 			isKeyboardDismissDisabled,
 			isOpen,
 			onOpenChange,
 			UNSTABLE_portalContainer: container,
-			...t2,
-			children: t6
+			...t3,
+			children: t8
 		}) });
-		$[26] = container;
-		$[27] = defaultOpen;
-		$[28] = isDismissable;
-		$[29] = isKeyboardDismissDisabled;
-		$[30] = isOpen;
-		$[31] = onOpenChange;
-		$[32] = t2;
-		$[33] = t6;
-		$[34] = t7;
-	} else t7 = $[34];
-	let t8;
-	if ($[35] !== isBasic || $[36] !== t7) {
-		t8 = /* @__PURE__ */ jsx(BasicContext, {
+		$[28] = container;
+		$[29] = defaultOpen;
+		$[30] = isDismissable;
+		$[31] = isKeyboardDismissDisabled;
+		$[32] = isOpen;
+		$[33] = onOpenChange;
+		$[34] = t3;
+		$[35] = t8;
+		$[36] = t9;
+	} else t9 = $[36];
+	let t10;
+	if ($[37] !== t2 || $[38] !== t9) {
+		t10 = /* @__PURE__ */ jsx(DescriptionContext, {
+			value: t2,
+			children: t9
+		});
+		$[37] = t2;
+		$[38] = t9;
+		$[39] = t10;
+	} else t10 = $[39];
+	let t11;
+	if ($[40] !== isBasic || $[41] !== t10) {
+		t11 = /* @__PURE__ */ jsx(BasicContext, {
 			value: isBasic,
-			children: t7
+			children: t10
 		});
-		$[35] = isBasic;
-		$[36] = t7;
-		$[37] = t8;
-	} else t8 = $[37];
-	return t8;
+		$[40] = isBasic;
+		$[41] = t10;
+		$[42] = t11;
+	} else t11 = $[42];
+	return t11;
 }
 /**
 * The dialog's actions. Full screen they are the action bar on the window's

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","HTMLAttributes","ReactNode","RefAttributes","ClassNameOrFunction","DialogTriggerProps","HeadingProps","ModalOverlayProps","ModalRenderProps","DialogProps","RACDialogProps","StyleOrFunction","stylex","createContext","useContext","useMemo","useRef","useSyncExternalStore","DialogTrigger","Heading","Modal","ModalOverlay","Dialog","RACDialog","useHoldBottomEdge","useScrollable","OverlayScope","mergeRefs","mergeStatefulStyles","mergeStyles","overlay","colors","media","motion","radii","shadows","spacing","typography","FORCED_COLORS","FULL_SCREEN","scaleIn","slideInFromBottom","styles","body","kB7OPa","kMwMTN","k1xSpc","kXwgrk","kzQI83","kMv6JI","kGuDYH","k63SB2","kOIVth","kb6lSQ","kLWn49","kORKVm","kGO01o","kLKAdn","kg3NbH","$$css","centre","kGNEyG","kjj79g","kmVPX3","basic","BasicContext","Omit","children","t0","$","props","t1","DialogBody","ref","callerRef","isBasic","scrollable","undefined","t2","merged","t3","t4","modalBodyRing","t5","DialogContent","className","container","defaultOpen","isKeyboardDismissDisabled","isOpen","onOpenChange","style","isDismissable","role","scrim","0","1","Symbol","for","modalDialog","t6","t7","t8","DialogFooter","useFullScreen","DialogHeader","DialogTitle","isFullScreen","window","matchMedia","matches","isFullScreenOnServer","subscribeToFullScreen","listener","query","addEventListener","removeEventListener","Body","Content","Footer","Header","Title","DialogContentProps","Element","Pick","DialogTitleProps","Dialog","_c","props","stylex.props","RACDialog"],"sources":["../../../src/components/dialog/index.tsx"],"sourcesContent":["'use client';\n\nimport type { HTMLAttributes, ReactNode, RefAttributes } from 'react';\nimport type { ClassNameOrFunction, DialogTriggerProps, HeadingProps, ModalOverlayProps, ModalRenderProps, DialogProps as RACDialogProps, StyleOrFunction } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { createContext, useContext, useMemo, useRef, useSyncExternalStore } from 'react';\nimport { DialogTrigger, Heading, Modal, ModalOverlay, Dialog as RACDialog } from 'react-aria-components';\nimport { useHoldBottomEdge } from '../../hooks/useBottomEdge';\nimport { useScrollable } from '../../hooks/useScrollable';\nimport { OverlayScope } from '../../overlay';\nimport { mergeRefs } from '../../render/ref';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport { overlay } from '../../styles/overlay';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, media, motion, radii, shadows, spacing, typography } from '../../tokens/design.tokens.stylex';\n\n// Windows High Contrast and the rest of the forced-colours modes. Spelled\n// here rather than imported, for the reason src/field/styles.ts records: the\n// StyleX compiler resolves a constant across files only out of a `.stylex.ts`\n// module, and the generated one holds design tokens rather than queries.\nconst FORCED_COLORS = '@media (forced-colors: active)';\n\n// The window size the full-screen dialog is drawn at, which the styles read\n// as `media.belowMedium`. Spelled again for `matchMedia`, which is the one\n// thing in this file that has to know it outside a stylesheet: the footer\n// holds the window's bottom edge only there. See `useFullScreen`.\nconst FULL_SCREEN = '(width < 600px)';\n\n// The dialogs page's two dialogs, which are one component here for the same\n// reason Sheet's two presentations are: the page pairs them by window size\n// rather than offering a choice. Above the medium breakpoint it is the basic\n// dialog — a container on surface container high with a 28dp corner, between\n// 280 and 560dp wide, centred over the scrim, with 24dp of padding all round,\n// 16dp between the headline and the body and 24dp between the body and the\n// actions. Below it the same dialog fills the window as the page's\n// full-screen dialog: square corners, a 56dp header with the headline and a\n// divider under it, and a 56dp action bar with a divider over it.\n//\n// The pairing is for a dialog that is a task, which needs the room. An alert\n// dialog is a question with two or three answers, and the page keeps the\n// full-screen dialog for tasks, so `role=\"alertdialog\"` stays the basic dialog\n// at every width. Filled to a phone's window it read as a headline at the top\n// of the screen and its answers at the bottom, with nothing between them but\n// the chrome. The `basic` styles below are how: each restates, without the\n// breakpoint, the properties the paired styles change below it.\n//\n// The headline is headline-small on surface, the body body-medium on surface\n// variant, and the buttons are the call site's — the page draws text buttons\n// there, which is `Button`'s `text` variant.\n//\n// Two things the page draws are the call site's rather than the component's.\n// The optional icon above the headline, which the page centres the headline\n// and body with when it is there, is anything a `Dialog.Header` is given; a\n// dialog that wants it centres its own header. And the dividers a basic\n// dialog may show around a scrolling body are left out, since the page has\n// them only for that case and the body here scrolls with the header and\n// footer pinned either side of it, which is what they were marking.\n//\n// React Aria's overlay is three nested elements — the scrim, the container,\n// and the dialog inside it — so the styles split the same way, and the scrim\n// and the element carrying the dialog role are the ones every modal overlay\n// shares.\nconst scaleIn = \"xnirehn-B\";\nconst slideInFromBottom = \"x1itx4s0-B\";\nconst styles = {\n  body: {\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1w5n3ug\",\n    k1xSpc: \"x78zum5\",\n    kXwgrk: \"xdt5ytf\",\n    kzQI83: \"x1iyjqo2\",\n    kMv6JI: \"xpo2rfv\",\n    kGuDYH: \"x193rfdd\",\n    k63SB2: \"x1hews6w\",\n    kOIVth: \"xxj4525\",\n    kb6lSQ: \"xn43zvd\",\n    kLWn49: \"xv61bfh\",\n    kORKVm: \"x1odjw0f\",\n    kGO01o: \"x1az23kl x18d9i69\",\n    kLKAdn: \"x886u18 xexx8yu x3reb9c\",\n    kg3NbH: \"xg0ps1x\",\n    $$css: true\n  },\n  centre: {\n    kGNEyG: \"x6s0dn4\",\n    k1xSpc: \"x78zum5\",\n    kjj79g: \"xl56j7k\",\n    kmVPX3: \"x1apw6a7 xd76zvj\",\n    $$css: true\n  }\n};\n\n// The basic dialog at every width, for an alert dialog. Each entry is the\n// above-breakpoint value of every property its namesake in `styles` changes\n// below the breakpoint, laid over that namesake, so a property it leaves out\n// is the same in both presentations already. A value changed above the\n// breakpoint there has to change here too, which `index.test.tsx` checks by\n// comparing an alert dialog on a phone with any dialog on a desktop.\nconst basic = {\n  body: {\n    kLKAdn: \"x886u18 xexx8yu\",\n    $$css: true\n  },\n  centre: {\n    kmVPX3: \"x1apw6a7\",\n    $$css: true\n  }\n};\n\n// Whether this dialog is the basic one at every width. Content decides it from\n// the role and the parts read it, since each part carries its own share of\n// the full-screen presentation.\nconst BasicContext = createContext(false);\ntype DialogProps = Omit<DialogTriggerProps, 'children'> & {\n  children?: ReactNode;\n};\n\n/**\n * A modal dialog centred over the page, and the same dialog filling the\n * window below the medium breakpoint — the dialogs page's basic and\n * full-screen dialogs, paired by window size as the page pairs them. An\n * alert dialog stays the basic one at every width. Open state is React\n * Aria's: pass `isOpen` with `onOpenChange` to control it, or\n * `defaultOpen` to let it keep its own.\n *\n * Composed rather than configured by props, as `Sheet` is, since a dialog's\n * header, body and actions all take arbitrary content — the parts are\n * `Dialog.Content`, `Dialog.Header`, `Dialog.Title`, `Dialog.Body` and\n * `Dialog.Footer`. A `Button` or `IconButton` placed directly inside\n * `Dialog` opens it, and one given `slot=\"close\"` anywhere inside the\n * content closes it; neither needs a part of its own.\n *\n * `Dialog` is the trigger's half, so a dialog nothing on the page opens — one\n * a route shows, or a menu item raises — leaves it out and passes `isOpen`\n * and `onOpenChange` to `Dialog.Content` instead. Wrapped in `Dialog` with no\n * button inside it, React Aria warns that its press responder found nothing\n * to press.\n */\nfunction Dialog({\n  children,\n  ...props\n}: DialogProps) {\n  return <DialogTrigger {...props}>{children}</DialogTrigger>;\n}\nfunction DialogBody({\n  ref: callerRef,\n  ...props\n}: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>) {\n  const isBasic = useContext(BasicContext);\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  // The body measures itself through its own ref, and the call site's lands\n  // on the same element.\n  const merged = useMemo(() => mergeRefs(ref, callerRef ?? undefined), [callerRef]);\n  return <div\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={merged} {...mergeStyles(stylex.props(styles.body, isBasic && basic.body, overlay.modalBodyRing), props)} />;\n}\n\n/**\n * The dialog itself, and the scrim behind it. Everything the dialog shows\n * goes in here; the trigger stays outside it, since the trigger lives in the\n * page while this is portalled out to the end of the body.\n *\n * `role=\"alertdialog\"` is React Aria's, for a dialog interrupting with\n * something that has to be answered before the page carries on — a screen\n * reader announces it rather than waiting to be asked. It also keeps the\n * dialog the basic one below the medium breakpoint, centred and sized to its\n * content, where a dialog of the default role fills the window.\n *\n * A press on the scrim closes the dialog unless `isDismissable` says\n * otherwise, which is the same default `Sheet` takes and the reverse of\n * React Aria's own. Escape is a separate prop, `isKeyboardDismissDisabled`,\n * and `isDismissable` says nothing about it — so a dialog that has to be\n * answered from one of its actions, as an alert dialog usually does, turns\n * off both.\n *\n * Inside `Dialog`, the open state is the trigger's. On its own, with no\n * trigger, it is this part's: `isOpen` with `onOpenChange` controls it, and\n * a `slot=\"close\"` button, Escape and the scrim all report through\n * `onOpenChange`, as they would to `Dialog`.\n *\n * The scrim draws at `z-index: 900`, over any page content layered below\n * that, such as a sticky header, and the panel draws inside it. A\n * `Snackbar` draws at 1000, so a toast raised from inside the dialog is read\n * over it, and React Aria's popovers and menus draw above both.\n */\nfunction DialogContent({\n  children,\n  className,\n  container,\n  defaultOpen,\n  isDismissable = true,\n  isKeyboardDismissDisabled,\n  isOpen,\n  onOpenChange,\n  ref,\n  style,\n  ...props\n}: DialogContentProps & RefAttributes<HTMLDivElement>) {\n  const isBasic = props.role === 'alertdialog';\n  return <BasicContext value={isBasic}>\n      <OverlayScope>\n        <ModalOverlay defaultOpen={defaultOpen} isDismissable={isDismissable} isKeyboardDismissDisabled={isKeyboardDismissDisabled} isOpen={isOpen} onOpenChange={onOpenChange}\n      // oxlint-disable-next-line typescript/no-deprecated -- its replacement, UNSAFE_PortalProvider, is not exported by react-aria-components\n      UNSTABLE_portalContainer={container} {...stylex.props(overlay.scrim, styles.centre, isBasic && basic.centre)}>\n          <Modal\n        // The panel, where the call site's class and style land, rather\n        // than the dialog inside it, which takes the rest of the props.\n        ref={ref} {...mergeStatefulStyles({\n          0: {\n            className: \"x1n1nwrg x1u6grsq xbhiib0 x1ebxanj x16dv9tl xvkjz1l xt7dq6l x1ju3lih x1w1tqly x19pkqky x1f120ba xx61lck x1gb867b x13rsnn2 x1udv5rz x9f619 x139gbkf x78zum5 xdt5ytf xh8yej3 xmz0i5r x27kpxv x6iovhr x1u2d2a2 xxzqys8 xb3r6kr x9xqwrn xg8iv3o x19b5e0v xsds98l\"\n          },\n          1: {\n            className: \"x1n1nwrg x1u6grsq x16dv9tl xvkjz1l x1w1tqly x13rsnn2 x1udv5rz x9f619 x139gbkf x78zum5 xdt5ytf xh8yej3 xmz0i5r xb3r6kr xbhiib0 xt7dq6l x19pkqky xx61lck x27kpxv x1u2d2a2\"\n          }\n        }[!!isBasic << 0], {\n          className,\n          style\n        })}>\n            <RACDialog {...props} {...stylex.props(overlay.modalDialog)}>\n              {children}\n            </RACDialog>\n          </Modal>\n        </ModalOverlay>\n      </OverlayScope>\n    </BasicContext>;\n}\n\n/**\n * The dialog's actions. Full screen they are the action bar on the window's\n * bottom edge, which a toast rises clear of while the dialog is open, so a\n * tap meant for one of them never lands on the toast's own action instead.\n */\nfunction DialogFooter({\n  ref: callerRef,\n  ...props\n}: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>) {\n  const isBasic = useContext(BasicContext);\n  const ref = useRef<HTMLDivElement>(null);\n  useHoldBottomEdge(ref, useFullScreen() && !isBasic);\n  // The footer measures itself through its own ref, and the call site's\n  // lands on the same element.\n  const merged = useMemo(() => mergeRefs(ref, callerRef ?? undefined), [callerRef]);\n  return <div {...props} ref={merged} {...mergeStyles({\n    0: {\n      className: \"x6s0dn4 x12smttz x1ejq31n x1vv4zg8 x178xt8z x9f619 x78zum5 x2lah0s x1a02dak x126z3so x13a6bvl xnvi70j x8i8c5o x1pr6p50 x13h71tw xs3zajk xg0ps1x\"\n    },\n    1: {\n      className: \"x6s0dn4 x12smttz x178xt8z x9f619 x78zum5 x2lah0s x1a02dak x126z3so x13a6bvl xg0ps1x x1ejq31n x8i8c5o x13h71tw\"\n    }\n  }[!!isBasic << 0], props)} />;\n}\nfunction DialogHeader(props: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>) {\n  const isBasic = useContext(BasicContext);\n  return <div {...props} {...mergeStyles({\n    0: {\n      className: \"x6s0dn4 x1j6faob x1sy0etr xf6te7g xso031l x9f619 x78zum5 x2lah0s x1gka490 x1qughib xnvi70j xzfxn0k x1pr6p50 x13h71tw xs3zajk xg0ps1x\"\n    },\n    1: {\n      className: \"x6s0dn4 x1j6faob xso031l x9f619 x78zum5 x2lah0s x1gka490 x1qughib xg0ps1x x1sy0etr xzfxn0k x13h71tw\"\n    }\n  }[!!isBasic << 0], props)} />;\n}\n\n/**\n * Names the dialog. Rendered through React Aria's title slot, which is what\n * points the dialog's `aria-labelledby` at it — a dialog without one\n * announces itself unnamed.\n */\nfunction DialogTitle(props: DialogTitleProps & RefAttributes<HTMLHeadingElement>) {\n  const isBasic = useContext(BasicContext);\n  return <Heading slot=\"title\" {...props} {...mergeStyles({\n    0: {\n      className: \"x9f619 x139gbkf x1fz0g89 xl849ld xkb6epg xcji80f x76yrz5 x6ksu6j x1s1qhaa x1khanjg x1voeury xrr2tf9 x1ghz6dp xeuugli xj0a0fe\"\n    },\n    1: {\n      className: \"x9f619 x139gbkf x1ghz6dp xeuugli xj0a0fe x1fz0g89 xkb6epg x76yrz5 x1s1qhaa x1voeury\"\n    }\n  }[!!isBasic << 0], props)} />;\n}\n\n// Whether the window is at the size the full-screen dialog is drawn at, kept\n// current as it resizes. False on the server, where there is no window and\n// nothing is open.\nfunction isFullScreen() {\n  return window.matchMedia(FULL_SCREEN).matches;\n}\nfunction isFullScreenOnServer() {\n  return false;\n}\nfunction subscribeToFullScreen(listener: () => void) {\n  const query = window.matchMedia(FULL_SCREEN);\n  query.addEventListener('change', listener);\n  return () => {\n    query.removeEventListener('change', listener);\n  };\n}\nfunction useFullScreen() {\n  return useSyncExternalStore(subscribeToFullScreen, isFullScreen, isFullScreenOnServer);\n}\nDialog.Body = DialogBody;\nDialog.Content = DialogContent;\nDialog.Footer = DialogFooter;\nDialog.Header = DialogHeader;\nDialog.Title = DialogTitle;\n\n// The dialog's own props, plus the scrim's open state and dismissal settings\n// and the container's styling. A call site has no reason to know there are\n// three elements: `className` and `style` reach the container, which is the\n// one worth restyling, the open state and the dismissal settings reach the\n// scrim, and everything else lands on the dialog.\n//\n// `isDismissable` is declared here rather than picked with its siblings,\n// since the picked one carries React Aria's documentation, whose default is\n// the reverse of this component's.\ntype DialogContentProps = {\n  /** A function may compute the class from the container's render state. */\n  className?: ClassNameOrFunction<ModalRenderProps>;\n  /**\n   * Where to portal the dialog and scrim. Defaults to the container of the\n   * `ThemeScope` around it, which keeps the dialog on that scope's tokens, or\n   * to the end of `<body>` where there is none. A subtree themed through the\n   * `themeScope` class has no container of its own, so point this inside it, or\n   * the dialog renders outside and keeps the page's tokens.\n   */\n  container?: Element;\n  /**\n   * Whether a press on the scrim, outside the container, closes the\n   * dialog. `true` here where React Aria's own default is `false`, the\n   * same default `Sheet` takes. Escape is `isKeyboardDismissDisabled`'s,\n   * and this says nothing about it — an alert dialog, which has to be\n   * answered from one of its actions, turns off both.\n   * @default true\n   */\n  isDismissable?: boolean;\n  /** A function may compute the style from the container's render state. */\n  style?: StyleOrFunction<ModalRenderProps>;\n} & Omit<RACDialogProps, 'className' | 'style'> & Pick<ModalOverlayProps, 'defaultOpen' | 'isKeyboardDismissDisabled' | 'isOpen' | 'onOpenChange'>;\ntype DialogTitleProps = HeadingProps;\nexport type { DialogContentProps, DialogProps, DialogTitleProps };\nexport { DialogBody, DialogContent, DialogFooter, DialogHeader, DialogTitle };\nexport default Dialog;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["c","_c","HTMLAttributes","ReactNode","RefAttributes","ClassNameOrFunction","DialogTriggerProps","HeadingProps","ModalOverlayProps","ModalRenderProps","DialogProps","RACDialogProps","StyleOrFunction","stylex","createContext","useContext","useId","useLayoutEffect","useMemo","useRef","useState","useSyncExternalStore","DialogTrigger","Heading","HeadingContext","Modal","ModalOverlay","Dialog","RACDialog","useSlottedContext","useHoldBottomEdge","useScrollStop","OverlayScope","InsideModalContext","mergeRefs","mergeStatefulStyles","mergeStyles","overlay","colors","media","motion","radii","shadows","spacing","typography","FORCED_COLORS","FULL_SCREEN","scaleIn","slideInFromBottom","styles","body","kB7OPa","kMwMTN","k1xSpc","kXwgrk","kzQI83","kMv6JI","kGuDYH","k63SB2","kOIVth","kb6lSQ","kLWn49","kHjlTd","kORKVm","kGO01o","kLKAdn","kg3NbH","$$css","centre","kGNEyG","kjj79g","kmVPX3","basic","BasicContext","DescriptionContext","id","Omit","children","t0","$","props","t1","DialogBody","ref","callerRef","isBasic","describe","generated","undefined","title","scrollStop","label","t2","merged","t3","modalBodyRing","t4","DialogContent","className","container","defaultOpen","isKeyboardDismissDisabled","isOpen","onOpenChange","style","isDismissable","role","setBody","overModal","scrim","scrimOverModal","0","1","t5","t6","Symbol","for","modalDialog","t7","t8","t9","t10","t11","DialogFooter","useFullScreen","DialogHeader","DialogTitle","isFullScreen","window","matchMedia","matches","isFullScreenOnServer","subscribeToFullScreen","listener","query","addEventListener","removeEventListener","Body","Content","Footer","Header","Title","DialogContentProps","Element","Pick","DialogTitleProps","Dialog","_c","props","stylex.props","RACDialog"],"sources":["../../../src/components/dialog/index.tsx"],"sourcesContent":["'use client';\n\nimport type { HTMLAttributes, ReactNode, RefAttributes } from 'react';\nimport type { ClassNameOrFunction, DialogTriggerProps, HeadingProps, ModalOverlayProps, ModalRenderProps, DialogProps as RACDialogProps, StyleOrFunction } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { createContext, useContext, useId, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from 'react';\nimport { DialogTrigger, Heading, HeadingContext, Modal, ModalOverlay, Dialog as RACDialog, useSlottedContext } from 'react-aria-components';\nimport { useHoldBottomEdge } from '../../hooks/useBottomEdge';\nimport { useScrollStop } from '../../hooks/useScrollStop';\nimport { OverlayScope } from '../../overlay';\nimport { InsideModalContext } from '../../overlay/modal';\nimport { mergeRefs } from '../../render/ref';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport { overlay } from '../../styles/overlay';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, media, motion, radii, shadows, spacing, typography } from '../../tokens/design.tokens.stylex';\n\n// Windows High Contrast and the rest of the forced-colours modes. Spelled\n// here rather than imported, for the reason src/field/styles.ts records: the\n// StyleX compiler resolves a constant across files only out of a `.stylex.ts`\n// module, and the generated one holds design tokens rather than queries.\nconst FORCED_COLORS = '@media (forced-colors: active)';\n\n// The window size the full-screen dialog is drawn at, which the styles read\n// as `media.belowMedium`. Spelled again for `matchMedia`, which is the one\n// thing in this file that has to know it outside a stylesheet: the footer\n// holds the window's bottom edge only there. See `useFullScreen`.\nconst FULL_SCREEN = '(width < 600px)';\n\n// The dialogs page's two dialogs, which are one component here for the same\n// reason Sheet's two presentations are: the page pairs them by window size\n// rather than offering a choice. Above the medium breakpoint it is the basic\n// dialog — a container on surface container high with a 28dp corner, between\n// 280 and 560dp wide, centred over the scrim, with 24dp of padding all round,\n// 16dp between the headline and the body and 24dp between the body and the\n// actions. Below it the same dialog fills the window as the page's\n// full-screen dialog: square corners, a 56dp header with the headline and a\n// divider under it, and a 56dp action bar with a divider over it.\n//\n// The pairing is for a dialog that is a task, which needs the room. An alert\n// dialog is a question with two or three answers, and the page keeps the\n// full-screen dialog for tasks, so `role=\"alertdialog\"` stays the basic dialog\n// at every width. Filled to a phone's window it read as a headline at the top\n// of the screen and its answers at the bottom, with nothing between them but\n// the chrome. The `basic` styles below are how: each restates, without the\n// breakpoint, the properties the paired styles change below it.\n//\n// The headline is headline-small on surface, the body body-medium on surface\n// variant, and the buttons are the call site's — the page draws text buttons\n// there, which is `Button`'s `text` variant.\n//\n// Two things the page draws are the call site's rather than the component's.\n// The optional icon above the headline, which the page centres the headline\n// and body with when it is there, is anything a `Dialog.Header` is given; a\n// dialog that wants it centres its own header. And the dividers a basic\n// dialog may show around a scrolling body are left out, since the page has\n// them only for that case and the body here scrolls with the header and\n// footer pinned either side of it, which is what they were marking.\n//\n// React Aria's overlay is three nested elements — the scrim, the container,\n// and the dialog inside it — so the styles split the same way, and the scrim\n// and the element carrying the dialog role are the ones every modal overlay\n// shares.\nconst scaleIn = \"xnirehn-B\";\nconst slideInFromBottom = \"x1itx4s0-B\";\nconst styles = {\n  body: {\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1w5n3ug\",\n    k1xSpc: \"x78zum5\",\n    kXwgrk: \"xdt5ytf\",\n    kzQI83: \"x1iyjqo2\",\n    kMv6JI: \"xpo2rfv\",\n    kGuDYH: \"x193rfdd\",\n    k63SB2: \"x1hews6w\",\n    kOIVth: \"xxj4525\",\n    kb6lSQ: \"xn43zvd\",\n    kLWn49: \"xv61bfh\",\n    kHjlTd: \"xj0a0fe\",\n    kORKVm: \"x1odjw0f\",\n    kGO01o: \"x1az23kl x18d9i69\",\n    kLKAdn: \"x886u18 xexx8yu x3reb9c\",\n    kg3NbH: \"xg0ps1x\",\n    $$css: true\n  },\n  centre: {\n    kGNEyG: \"x6s0dn4\",\n    k1xSpc: \"x78zum5\",\n    kjj79g: \"xl56j7k\",\n    kmVPX3: \"x1apw6a7 xd76zvj\",\n    $$css: true\n  }\n};\n\n// The basic dialog at every width, for an alert dialog. Each entry is the\n// above-breakpoint value of every property its namesake in `styles` changes\n// below the breakpoint, laid over that namesake, so a property it leaves out\n// is the same in both presentations already. A value changed above the\n// breakpoint there has to change here too, which `index.test.tsx` checks by\n// comparing an alert dialog on a phone with any dialog on a desktop.\nconst basic = {\n  body: {\n    kLKAdn: \"x886u18 xexx8yu\",\n    $$css: true\n  },\n  centre: {\n    kmVPX3: \"x1apw6a7\",\n    $$css: true\n  }\n};\n\n// Whether this dialog is the basic one at every width. Content decides it from\n// the role and the parts read it, since each part carries its own share of\n// the full-screen presentation.\nconst BasicContext = createContext(false);\n\n// Where an alert dialog's body hands Content its id, so the dialog can name\n// the body as its description: the message an alert dialog interrupts with\n// is what a screen reader should read out with the title. Null in a dialog\n// of any other role, whose body may hold a form or a long document rather\n// than one message.\nconst DescriptionContext = createContext<((id: string | undefined) => void) | null>(null);\ntype DialogProps = Omit<DialogTriggerProps, 'children'> & {\n  children?: ReactNode;\n};\n\n/**\n * A modal dialog centred over the page, and the same dialog filling the\n * window below the medium breakpoint — the dialogs page's basic and\n * full-screen dialogs, paired by window size as the page pairs them. An\n * alert dialog stays the basic one at every width. Open state is React\n * Aria's: pass `isOpen` with `onOpenChange` to control it, or\n * `defaultOpen` to let it keep its own.\n *\n * Composed rather than configured by props, as `Sheet` is, since a dialog's\n * header, body and actions all take arbitrary content — the parts are\n * `Dialog.Content`, `Dialog.Header`, `Dialog.Title`, `Dialog.Body` and\n * `Dialog.Footer`. A `Button` or `IconButton` placed directly inside\n * `Dialog` opens it, and one given `slot=\"close\"` anywhere inside the\n * content closes it; neither needs a part of its own.\n *\n * `Dialog` is the trigger's half, so a dialog nothing on the page opens — one\n * a route shows, or a menu item raises — leaves it out and passes `isOpen`\n * and `onOpenChange` to `Dialog.Content` instead. Wrapped in `Dialog` with no\n * button inside it, React Aria warns that its press responder found nothing\n * to press.\n */\nfunction Dialog({\n  children,\n  ...props\n}: DialogProps) {\n  return <DialogTrigger {...props}>{children}</DialogTrigger>;\n}\nfunction DialogBody({\n  ref: callerRef,\n  ...props\n}: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>) {\n  const isBasic = useContext(BasicContext);\n  const describe = useContext(DescriptionContext);\n  const generated = useId();\n  // An alert dialog's body describes the dialog, so it carries an id for the\n  // dialog to point at: the call site's own, or one of its own. In a layout\n  // effect, so the dialog carries its description from its first paint.\n  const id = props.id ?? (describe === null ? undefined : generated);\n  useLayoutEffect(() => {\n    if (describe === null || id === undefined) {\n      return undefined;\n    }\n    describe(id);\n    return () => {\n      describe(undefined);\n    };\n  }, [describe, id]);\n  const ref = useRef<HTMLDivElement>(null);\n  // A body its content runs past is a tab stop named by the title, so a\n  // keyboard can scroll it, when nothing inside it takes focus; a call\n  // site's own name, role and tabIndex still win. See useScrollStop.\n  const title = useSlottedContext(HeadingContext, 'title');\n  const scrollStop = useScrollStop(ref, {\n    label: props['aria-label'],\n    title: title?.id\n  });\n  // The body measures itself through its own ref, and the call site's lands\n  // on the same element.\n  const merged = useMemo(() => mergeRefs(ref, callerRef ?? undefined), [callerRef]);\n  return <div {...scrollStop} id={id} {...props} ref={merged} {...mergeStyles(stylex.props(styles.body, isBasic && basic.body, overlay.modalBodyRing), props)} />;\n}\n\n/**\n * The dialog itself, and the scrim behind it. Everything the dialog shows\n * goes in here; the trigger stays outside it, since the trigger lives in the\n * page while this is portalled out to the end of the body.\n *\n * `role=\"alertdialog\"` is React Aria's, for a dialog interrupting with\n * something that has to be answered before the page carries on — a screen\n * reader announces it rather than waiting to be asked. It also keeps the\n * dialog the basic one below the medium breakpoint, centred and sized to its\n * content, where a dialog of the default role fills the window. Its\n * `Dialog.Body` is its description, so the message is read out with the\n * title; an `aria-describedby` of the call site's own names another.\n *\n * A press on the scrim closes the dialog unless `isDismissable` says\n * otherwise, which is the same default `Sheet` takes and the reverse of\n * React Aria's own. Escape is a separate prop, `isKeyboardDismissDisabled`,\n * and `isDismissable` says nothing about it — so a dialog that has to be\n * answered from one of its actions, as an alert dialog usually does, turns\n * off both.\n *\n * Inside `Dialog`, the open state is the trigger's. On its own, with no\n * trigger, it is this part's: `isOpen` with `onOpenChange` controls it, and\n * a `slot=\"close\"` button, Escape and the scrim all report through\n * `onOpenChange`, as they would to `Dialog`.\n *\n * The scrim draws at `z-index: 900`, over any page content layered below\n * that, such as a sticky header, and the panel draws inside it. A\n * `Snackbar` draws at 1000, so a toast raised from inside the dialog is read\n * over it, and React Aria's popovers and menus draw above both.\n */\nfunction DialogContent({\n  children,\n  className,\n  container,\n  defaultOpen,\n  isDismissable = true,\n  isKeyboardDismissDisabled,\n  isOpen,\n  onOpenChange,\n  ref,\n  style,\n  ...props\n}: DialogContentProps & RefAttributes<HTMLDivElement>) {\n  const isBasic = props.role === 'alertdialog';\n  // The id of the body, which an alert dialog is described by unless the\n  // call site names a description of its own.\n  const [body, setBody] = useState<string>();\n  const overModal = useContext(InsideModalContext);\n  return <BasicContext value={isBasic}>\n      <DescriptionContext value={isBasic ? setBody : null}>\n        <OverlayScope>\n          <ModalOverlay defaultOpen={defaultOpen} isDismissable={isDismissable} isKeyboardDismissDisabled={isKeyboardDismissDisabled} isOpen={isOpen} onOpenChange={onOpenChange}\n        // oxlint-disable-next-line typescript/no-deprecated -- its replacement, UNSAFE_PortalProvider, is not exported by react-aria-components\n        UNSTABLE_portalContainer={container} {...stylex.props(overlay.scrim, overModal && overlay.scrimOverModal, styles.centre, isBasic && basic.centre)}>\n            <Modal\n          // The panel, where the call site's class and style land, rather\n          // than the dialog inside it, which takes the rest of the props.\n          ref={ref} {...mergeStatefulStyles({\n            0: {\n              className: \"x1n1nwrg x1u6grsq xbhiib0 x1ebxanj x16dv9tl xvkjz1l xt7dq6l x1ju3lih x1w1tqly x19pkqky x1f120ba xx61lck x1gb867b x13rsnn2 x1udv5rz x9f619 x139gbkf x78zum5 xdt5ytf xh8yej3 xmz0i5r x27kpxv x6iovhr x1u2d2a2 xxzqys8 xb3r6kr x9xqwrn xg8iv3o x19b5e0v xsds98l\"\n            },\n            1: {\n              className: \"x1n1nwrg x1u6grsq x16dv9tl xvkjz1l x1w1tqly x13rsnn2 x1udv5rz x9f619 x139gbkf x78zum5 xdt5ytf xh8yej3 xmz0i5r xb3r6kr xbhiib0 xt7dq6l x19pkqky xx61lck x27kpxv x1u2d2a2\"\n            }\n          }[!!isBasic << 0], {\n            className,\n            style\n          })}>\n              <InsideModalContext value>\n                <RACDialog {...props} aria-describedby={props['aria-describedby'] ?? (isBasic ? body : undefined)} {...stylex.props(overlay.modalDialog)}>\n                  {children}\n                </RACDialog>\n              </InsideModalContext>\n            </Modal>\n          </ModalOverlay>\n        </OverlayScope>\n      </DescriptionContext>\n    </BasicContext>;\n}\n\n/**\n * The dialog's actions. Full screen they are the action bar on the window's\n * bottom edge, which a toast rises clear of while the dialog is open, so a\n * tap meant for one of them never lands on the toast's own action instead.\n */\nfunction DialogFooter({\n  ref: callerRef,\n  ...props\n}: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>) {\n  const isBasic = useContext(BasicContext);\n  const ref = useRef<HTMLDivElement>(null);\n  useHoldBottomEdge(ref, useFullScreen() && !isBasic);\n  // The footer measures itself through its own ref, and the call site's\n  // lands on the same element.\n  const merged = useMemo(() => mergeRefs(ref, callerRef ?? undefined), [callerRef]);\n  return <div {...props} ref={merged} {...mergeStyles({\n    0: {\n      className: \"x6s0dn4 x12smttz x1ejq31n x1vv4zg8 x178xt8z x9f619 x78zum5 x2lah0s x1a02dak x126z3so x13a6bvl xnvi70j x8i8c5o x1pr6p50 x13h71tw xs3zajk xg0ps1x\"\n    },\n    1: {\n      className: \"x6s0dn4 x12smttz x178xt8z x9f619 x78zum5 x2lah0s x1a02dak x126z3so x13a6bvl xg0ps1x x1ejq31n x8i8c5o x13h71tw\"\n    }\n  }[!!isBasic << 0], props)} />;\n}\nfunction DialogHeader(props: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>) {\n  const isBasic = useContext(BasicContext);\n  return <div {...props} {...mergeStyles({\n    0: {\n      className: \"x6s0dn4 x1j6faob x1sy0etr xf6te7g xso031l x9f619 x78zum5 x2lah0s x1gka490 x1qughib xnvi70j xzfxn0k x1pr6p50 x13h71tw xs3zajk xg0ps1x\"\n    },\n    1: {\n      className: \"x6s0dn4 x1j6faob xso031l x9f619 x78zum5 x2lah0s x1gka490 x1qughib xg0ps1x x1sy0etr xzfxn0k x13h71tw\"\n    }\n  }[!!isBasic << 0], props)} />;\n}\n\n/**\n * Names the dialog. Rendered through React Aria's title slot, which is what\n * points the dialog's `aria-labelledby` at it — a dialog without one\n * announces itself unnamed.\n */\nfunction DialogTitle(props: DialogTitleProps & RefAttributes<HTMLHeadingElement>) {\n  const isBasic = useContext(BasicContext);\n  return <Heading slot=\"title\" {...props} {...mergeStyles({\n    0: {\n      className: \"x9f619 x139gbkf x1fz0g89 xl849ld xkb6epg xcji80f x76yrz5 x6ksu6j x1s1qhaa x1khanjg x1voeury xrr2tf9 x1ghz6dp xeuugli xj0a0fe\"\n    },\n    1: {\n      className: \"x9f619 x139gbkf x1ghz6dp xeuugli xj0a0fe x1fz0g89 xkb6epg x76yrz5 x1s1qhaa x1voeury\"\n    }\n  }[!!isBasic << 0], props)} />;\n}\n\n// Whether the window is at the size the full-screen dialog is drawn at, kept\n// current as it resizes. False on the server, where there is no window and\n// nothing is open.\nfunction isFullScreen() {\n  return window.matchMedia(FULL_SCREEN).matches;\n}\nfunction isFullScreenOnServer() {\n  return false;\n}\nfunction subscribeToFullScreen(listener: () => void) {\n  const query = window.matchMedia(FULL_SCREEN);\n  query.addEventListener('change', listener);\n  return () => {\n    query.removeEventListener('change', listener);\n  };\n}\nfunction useFullScreen() {\n  return useSyncExternalStore(subscribeToFullScreen, isFullScreen, isFullScreenOnServer);\n}\nDialog.Body = DialogBody;\nDialog.Content = DialogContent;\nDialog.Footer = DialogFooter;\nDialog.Header = DialogHeader;\nDialog.Title = DialogTitle;\n\n// The dialog's own props, plus the scrim's open state and dismissal settings\n// and the container's styling. A call site has no reason to know there are\n// three elements: `className` and `style` reach the container, which is the\n// one worth restyling, the open state and the dismissal settings reach the\n// scrim, and everything else lands on the dialog.\n//\n// `isDismissable` is declared here rather than picked with its siblings,\n// since the picked one carries React Aria's documentation, whose default is\n// the reverse of this component's.\ntype DialogContentProps = {\n  /** A function may compute the class from the container's render state. */\n  className?: ClassNameOrFunction<ModalRenderProps>;\n  /**\n   * Where to portal the dialog and scrim. Defaults to the container of the\n   * `ThemeScope` around it, which keeps the dialog on that scope's tokens, or\n   * to the end of `<body>` where there is none. A subtree themed through the\n   * `themeScope` class has no container of its own, so point this inside it, or\n   * the dialog renders outside and keeps the page's tokens.\n   */\n  container?: Element;\n  /**\n   * Whether a press on the scrim, outside the container, closes the\n   * dialog. `true` here where React Aria's own default is `false`, the\n   * same default `Sheet` takes. Escape is `isKeyboardDismissDisabled`'s,\n   * and this says nothing about it — an alert dialog, which has to be\n   * answered from one of its actions, turns off both.\n   * @default true\n   */\n  isDismissable?: boolean;\n  /** A function may compute the style from the container's render state. */\n  style?: StyleOrFunction<ModalRenderProps>;\n} & Omit<RACDialogProps, 'className' | 'style'> & Pick<ModalOverlayProps, 'defaultOpen' | 'isKeyboardDismissDisabled' | 'isOpen' | 'onOpenChange'>;\ntype DialogTitleProps = HeadingProps;\nexport type { DialogContentProps, DialogProps, DialogTitleProps };\nexport { DialogBody, DialogContent, DialogFooter, DialogHeader, DialogTitle };\nexport default Dialog;"],"mappings":"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"}

package/dist/components/disclosure-group/index.js

@@ -76,7 +76,7 @@ function DisclosureGroup$1(t0) {
 	return t4;
 }
 function dividedChildren(children) {
-	return flatten(children).map((section, index) => /* @__PURE__ */ jsxs(Fragment, { children: [index === 0 ? null : /* @__PURE__ */ jsx(Separator$1, {}), section] }, keyOf(section, index)));
+	return flatten(children).map((section, index) => /* @__PURE__ */ jsxs(Fragment, { children: [index === 0 ? null : /* @__PURE__ */ jsx(Separator$1, { decorative: true }), section] }, keyOf(section, index)));
 }
 function flatten(children) {
 	return Children.toArray(children).flatMap((child) => {

package/dist/components/disclosure-group/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","ReactNode","RefAttributes","DisclosureGroupProps","RACDisclosureGroupProps","stylex","Children","Fragment","isValidElement","DisclosureGroup","RACDisclosureGroup","mergeStatefulStyles","Separator","Omit","children","divided","t0","$","T0","t1","t2","t3","t4","props","undefined","className","dividedChildren","sections","flatten","map","section","index","keyOf","toArray","flatMap","child","type","key","String","DisclosureGroup","_c","RACDisclosureGroup","Separator"],"sources":["../../../src/components/disclosure-group/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode, RefAttributes } from 'react';\nimport type { DisclosureGroupProps as RACDisclosureGroupProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Children, Fragment, isValidElement } from 'react';\nimport { DisclosureGroup as RACDisclosureGroup } from 'react-aria-components';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport Separator from '../separator';\n\n// A stack of Disclosures that agree with each other about what is open —\n// the lists page's accordion. The sections are the library's own\n// `Disclosure`, unchanged: this adds only the agreement between them and the\n// rule that divides them.\n//\n// Give each section an `id`, which is the key the group reports as expanded.\n// Whether one opens at a time or several is `allowsMultipleExpanded`, and it\n// is React Aria's rather than two components — a group that closes the last\n// section when a new one opens is the same stack with a different word.\n//\n// Two things are this component's own.\n//\n// **A rule between the sections, and none at the ends.** The group renders\n// the library's `Separator` between each pair rather than asking each\n// section to draw a border, so a section drawn on its own and a section in a\n// group stay the same component. `divided={false}` leaves them undivided,\n// for a stack sitting on cards of its own.\n//\n// **Nothing else is added.** The group draws no container, no corner and no\n// colour: an accordion inside a card and one running down a page want\n// different surroundings, and the page is what knows which it is.\n//\n// The lists page keeps its expand-interaction tokens behind a token-set menu\n// that does not open to a script, so what is drawn here is what the page\n// states in words plus what `Disclosure` already carries; see that\n// component's comment for the same note.\n\ntype DisclosureGroupProps = Omit<RACDisclosureGroupProps, 'children'> & {\n  /** The sections, as `Disclosure` elements each given an `id`. */\n  children?: ReactNode;\n  /**\n   * Whether a rule is drawn between the sections. There is never one above\n   * the first or below the last.\n   * @default true\n   */\n  divided?: boolean;\n};\n\n/**\n * A stack of `Disclosure` sections that agree about what is open. Which are\n * expanded is React Aria's: pass `expandedKeys` with `onExpandedChange` to\n * control it, or `defaultExpandedKeys` to let the group keep its own.\n *\n * ```tsx\n * <DisclosureGroup defaultExpandedKeys={FIRST}>\n *   <Disclosure id=\"first\">\n *     <Disclosure.Header>Headline</Disclosure.Header>\n *     <Disclosure.Panel>Supporting line</Disclosure.Panel>\n *   </Disclosure>\n * </DisclosureGroup>\n * ```\n *\n * One section opens at a time unless `allowsMultipleExpanded` says otherwise.\n * Give every section an `id` — that is the key the group reports.\n *\n * The call site's `className` and `style` land on the container, which is the\n * element a layout positions.\n */\nfunction DisclosureGroup({\n  children,\n  divided = true,\n  ...props\n}: DisclosureGroupProps & RefAttributes<HTMLDivElement>) {\n  return <RACDisclosureGroup {...props} {...mergeStatefulStyles({\n    className: \"x9f619 x78zum5 xdt5ytf\"\n  }, props)}>\n      {divided ? dividedChildren(children) : children}\n    </RACDisclosureGroup>;\n}\n\n// The sections with a rule between each pair, and none at the ends.\nfunction dividedChildren(children: ReactNode) {\n  const sections = flatten(children);\n  return sections.map((section, index) => <Fragment key={keyOf(section, index)}>\n      {index === 0 ? null : <Separator />}\n      {section}\n    </Fragment>);\n}\n\n// The sections, with any fragment around them opened up first.\n// `Children.toArray` flattens arrays but hands back a fragment as one child,\n// and a call site that writes its sections inside one — or maps over data and\n// wraps the result — would otherwise get a single entry and no rules at all.\n// Recursive, since a fragment may hold another.\nfunction flatten(children: ReactNode): ReactNode[] {\n  return Children.toArray(children).flatMap(child => {\n    if (isValidElement<{\n      children?: ReactNode;\n    }>(child)) {\n      if (child.type === Fragment) {\n        return flatten(child.props.children);\n      }\n    }\n    return [child];\n  });\n}\n\n// The key `Children.toArray` put on the entry, falling back to its position\n// for anything that is not an element — a string between two sections is not\n// a thing this component expects, but it should render rather than throw.\nfunction keyOf(section: ReactNode, index: number) {\n  if (isValidElement(section)) {\n    return section.key ?? String(index);\n  }\n  return String(index);\n}\nexport type { DisclosureGroupProps };\nexport default DisclosureGroup;"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoEA,SAAAU,kBAAAO,IAAA;CAAA,MAAAC,IAAAjB,EAAA,EAAA;CAAA,IAAAkB;CAAA,IAAAJ;CAAA,IAAAC;CAAA,IAAAI;CAAA,IAAAC;CAAA,IAAAH,EAAA,OAAAD,IAAA;EAAyB,MAAA,EAAAF,UAAAO,IAAAN,SAAAO,IAAA,GAAAC,UAAAP;EAAAF,WAAAO;EAEvBN,UAAAO,OAAAE,KAAAA,IAAA,OAAAF;EAGQJ,KAAAR;EAAuBa,KAAAA;EAAWH,KAAAT,oBAAoB,EAAAc,WACjD,yBACb,GAAGF,KAAK;EAACN,EAAA,KAAAD;EAAAC,EAAA,KAAAC;EAAAD,EAAA,KAAAH;EAAAG,EAAA,KAAAF;EAAAE,EAAA,KAAAE;EAAAF,EAAA,KAAAG;CAAA,OAAA;EAAAF,KAAAD,EAAA;EAAAH,WAAAG,EAAA;EAAAF,UAAAE,EAAA;EAAAE,KAAAF,EAAA;EAAAG,KAAAH,EAAA;CAAA;CAAA,IAAAI;CAAA,IAAAJ,EAAA,OAAAH,YAAAG,EAAA,OAAAF,SAAA;EACJM,KAAAN,UAAUW,gBAAgBZ,QAAmB,IAA7CA;EAA8CG,EAAA,KAAAH;EAAAG,EAAA,KAAAF;EAAAE,EAAA,KAAAI;CAAA,OAAAA,KAAAJ,EAAA;CAAA,IAAAK;CAAA,IAAAL,EAAA,OAAAC,MAAAD,EAAA,QAAAE,MAAAF,EAAA,QAAAG,MAAAH,EAAA,QAAAI,IAAA;EAH5CC,KAAA,oBAAC,IAAD;GAAmB,GAAKC;GAAK,GAAMH;GAGrCC,UAAAA;EAHqB,CAAA;EAIHJ,EAAA,KAAAC;EAAAD,EAAA,MAAAE;EAAAF,EAAA,MAAAG;EAAAH,EAAA,MAAAI;EAAAJ,EAAA,MAAAK;CAAA,OAAAA,KAAAL,EAAA;CAAA,OAJhBK;AAIgB;AAIzB,SAASI,gBAAgBZ,UAAqB;CAE5C,OADiBc,QAAQd,QAClBa,CAAQ,CAACE,KAAKC,SAASC,UAAU,qBAAC,UAAD,EAAA,UAAA,CACnCA,UAAU,IAAI,OAAO,oBAACW,aAAD,CAAU,CAAA,GAC/BZ,OACO,EAAA,GAH2CE,MAAMF,SAASC,KAAK,CAG/D,CAAC;AACf;AAOA,SAASH,QAAQd,UAAkC;CACjD,OAAOR,SAAS2B,QAAQnB,QAAQ,CAAC,CAACoB,SAAQC,UAAS;EACjD,IAAI3B,eAED2B,KAAK,GACFA;OAAAA,MAAMC,SAAS7B,UACjB,OAAOqB,QAAQO,MAAMZ,MAAMT,QAAQ;EAAA;EAGvC,OAAO,CAACqB,KAAK;CACf,CAAC;AACH;AAKA,SAASH,MAAMF,SAAoBC,OAAe;CAChD,IAAIvB,eAAesB,OAAO,GACxB,OAAOA,QAAQO,OAAOC,OAAOP,KAAK;CAEpC,OAAOO,OAAOP,KAAK;AACrB"}
+{"version":3,"file":"index.js","names":["c","_c","ReactNode","RefAttributes","DisclosureGroupProps","RACDisclosureGroupProps","stylex","Children","Fragment","isValidElement","DisclosureGroup","RACDisclosureGroup","mergeStatefulStyles","Separator","Omit","children","divided","t0","$","T0","t1","t2","t3","t4","props","undefined","className","dividedChildren","sections","flatten","map","section","index","keyOf","toArray","flatMap","child","type","key","String","DisclosureGroup","_c","RACDisclosureGroup","Separator"],"sources":["../../../src/components/disclosure-group/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode, RefAttributes } from 'react';\nimport type { DisclosureGroupProps as RACDisclosureGroupProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Children, Fragment, isValidElement } from 'react';\nimport { DisclosureGroup as RACDisclosureGroup } from 'react-aria-components';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport Separator from '../separator';\n\n// A stack of Disclosures that agree with each other about what is open —\n// the lists page's accordion. The sections are the library's own\n// `Disclosure`, unchanged: this adds only the agreement between them and the\n// rule that divides them.\n//\n// Give each section an `id`, which is the key the group reports as expanded.\n// Whether one opens at a time or several is `allowsMultipleExpanded`, and it\n// is React Aria's rather than two components — a group that closes the last\n// section when a new one opens is the same stack with a different word.\n//\n// Two things are this component's own.\n//\n// **A rule between the sections, and none at the ends.** The group renders\n// the library's `Separator` between each pair rather than asking each\n// section to draw a border, so a section drawn on its own and a section in a\n// group stay the same component. `divided={false}` leaves them undivided,\n// for a stack sitting on cards of its own.\n//\n// **Nothing else is added.** The group draws no container, no corner and no\n// colour: an accordion inside a card and one running down a page want\n// different surroundings, and the page is what knows which it is.\n//\n// The lists page keeps its expand-interaction tokens behind a token-set menu\n// that does not open to a script, so what is drawn here is what the page\n// states in words plus what `Disclosure` already carries; see that\n// component's comment for the same note.\n\ntype DisclosureGroupProps = Omit<RACDisclosureGroupProps, 'children'> & {\n  /** The sections, as `Disclosure` elements each given an `id`. */\n  children?: ReactNode;\n  /**\n   * Whether a rule is drawn between the sections. There is never one above\n   * the first or below the last.\n   * @default true\n   */\n  divided?: boolean;\n};\n\n/**\n * A stack of `Disclosure` sections that agree about what is open. Which are\n * expanded is React Aria's: pass `expandedKeys` with `onExpandedChange` to\n * control it, or `defaultExpandedKeys` to let the group keep its own.\n *\n * ```tsx\n * <DisclosureGroup defaultExpandedKeys={FIRST}>\n *   <Disclosure id=\"first\">\n *     <Disclosure.Header>Headline</Disclosure.Header>\n *     <Disclosure.Panel>Supporting line</Disclosure.Panel>\n *   </Disclosure>\n * </DisclosureGroup>\n * ```\n *\n * One section opens at a time unless `allowsMultipleExpanded` says otherwise.\n * Give every section an `id` — that is the key the group reports.\n *\n * The call site's `className` and `style` land on the container, which is the\n * element a layout positions.\n */\nfunction DisclosureGroup({\n  children,\n  divided = true,\n  ...props\n}: DisclosureGroupProps & RefAttributes<HTMLDivElement>) {\n  return <RACDisclosureGroup {...props} {...mergeStatefulStyles({\n    className: \"x9f619 x78zum5 xdt5ytf\"\n  }, props)}>\n      {divided ? dividedChildren(children) : children}\n    </RACDisclosureGroup>;\n}\n\n// The sections with a rule between each pair, and none at the ends. The\n// rules are decorative: each section opens on a heading holding its button,\n// which already tells a reader where it starts, so a \"separator\" announced\n// between every pair would only repeat it.\nfunction dividedChildren(children: ReactNode) {\n  const sections = flatten(children);\n  return sections.map((section, index) => <Fragment key={keyOf(section, index)}>\n      {index === 0 ? null : <Separator decorative />}\n      {section}\n    </Fragment>);\n}\n\n// The sections, with any fragment around them opened up first.\n// `Children.toArray` flattens arrays but hands back a fragment as one child,\n// and a call site that writes its sections inside one — or maps over data and\n// wraps the result — would otherwise get a single entry and no rules at all.\n// Recursive, since a fragment may hold another.\nfunction flatten(children: ReactNode): ReactNode[] {\n  return Children.toArray(children).flatMap(child => {\n    if (isValidElement<{\n      children?: ReactNode;\n    }>(child)) {\n      if (child.type === Fragment) {\n        return flatten(child.props.children);\n      }\n    }\n    return [child];\n  });\n}\n\n// The key `Children.toArray` put on the entry, falling back to its position\n// for anything that is not an element — a string between two sections is not\n// a thing this component expects, but it should render rather than throw.\nfunction keyOf(section: ReactNode, index: number) {\n  if (isValidElement(section)) {\n    return section.key ?? String(index);\n  }\n  return String(index);\n}\nexport type { DisclosureGroupProps };\nexport default DisclosureGroup;"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoEA,SAAAU,kBAAAO,IAAA;CAAA,MAAAC,IAAAjB,EAAA,EAAA;CAAA,IAAAkB;CAAA,IAAAJ;CAAA,IAAAC;CAAA,IAAAI;CAAA,IAAAC;CAAA,IAAAH,EAAA,OAAAD,IAAA;EAAyB,MAAA,EAAAF,UAAAO,IAAAN,SAAAO,IAAA,GAAAC,UAAAP;EAAAF,WAAAO;EAEvBN,UAAAO,OAAAE,KAAAA,IAAA,OAAAF;EAGQJ,KAAAR;EAAuBa,KAAAA;EAAWH,KAAAT,oBAAoB,EAAAc,WACjD,yBACb,GAAGF,KAAK;EAACN,EAAA,KAAAD;EAAAC,EAAA,KAAAC;EAAAD,EAAA,KAAAH;EAAAG,EAAA,KAAAF;EAAAE,EAAA,KAAAE;EAAAF,EAAA,KAAAG;CAAA,OAAA;EAAAF,KAAAD,EAAA;EAAAH,WAAAG,EAAA;EAAAF,UAAAE,EAAA;EAAAE,KAAAF,EAAA;EAAAG,KAAAH,EAAA;CAAA;CAAA,IAAAI;CAAA,IAAAJ,EAAA,OAAAH,YAAAG,EAAA,OAAAF,SAAA;EACJM,KAAAN,UAAUW,gBAAgBZ,QAAmB,IAA7CA;EAA8CG,EAAA,KAAAH;EAAAG,EAAA,KAAAF;EAAAE,EAAA,KAAAI;CAAA,OAAAA,KAAAJ,EAAA;CAAA,IAAAK;CAAA,IAAAL,EAAA,OAAAC,MAAAD,EAAA,QAAAE,MAAAF,EAAA,QAAAG,MAAAH,EAAA,QAAAI,IAAA;EAH5CC,KAAA,oBAAC,IAAD;GAAmB,GAAKC;GAAK,GAAMH;GAGrCC,UAAAA;EAHqB,CAAA;EAIHJ,EAAA,KAAAC;EAAAD,EAAA,MAAAE;EAAAF,EAAA,MAAAG;EAAAH,EAAA,MAAAI;EAAAJ,EAAA,MAAAK;CAAA,OAAAA,KAAAL,EAAA;CAAA,OAJhBK;AAIgB;AAOzB,SAASI,gBAAgBZ,UAAqB;CAE5C,OADiBc,QAAQd,QAClBa,CAAQ,CAACE,KAAKC,SAASC,UAAU,qBAAC,UAAD,EAAA,UAAA,CACnCA,UAAU,IAAI,OAAO,oBAACW,aAAD,EAAW,YAAA,KAAU,CAAA,GAC1CZ,OACO,EAAA,GAH2CE,MAAMF,SAASC,KAAK,CAG/D,CAAC;AACf;AAOA,SAASH,QAAQd,UAAkC;CACjD,OAAOR,SAAS2B,QAAQnB,QAAQ,CAAC,CAACoB,SAAQC,UAAS;EACjD,IAAI3B,eAED2B,KAAK,GACFA;OAAAA,MAAMC,SAAS7B,UACjB,OAAOqB,QAAQO,MAAMZ,MAAMT,QAAQ;EAAA;EAGvC,OAAO,CAACqB,KAAK;CACf,CAAC;AACH;AAKA,SAASH,MAAMF,SAAoBC,OAAe;CAChD,IAAIvB,eAAesB,OAAO,GACxB,OAAOA,QAAQO,OAAOC,OAAOP,KAAK;CAEpC,OAAOO,OAAOP,KAAK;AACrB"}

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

@@ -90,6 +90,10 @@ const styles = {
 		kMwMTN: "x1girmi0 x1k5gbb1",
 		$$css: true
 	},
+	outlinedToggleSelectedDisabled: {
+		kWkggS: "xepofeg",
+		$$css: true
+	},
 	pending: {
 		kkrTdU: "x19v85br",
 		$$css: true
@@ -111,6 +115,13 @@ const styles = {
 		kMwMTN: "x1mxwv8y x1k5gbb1",
 		$$css: true
 	},
+	standardToggleSelectedDisabled: {
+		kWkggS: "x19v6zzp",
+		kVAM5u: "xmnqt3w",
+		ksu8eU: "xx61lck",
+		kMzoRj: "xc342km x13rsnn2",
+		$$css: true
+	},
 	tonal: {
 		kWkggS: "x15dekr4",
 		kMwMTN: "x1sawysd",
@@ -383,6 +394,12 @@ const disabledStyles = {
 	standard: styles.standardDisabled,
 	tonal: styles.tonalDisabled
 };
+const selectedDisabledStyles = {
+	filled: null,
+	outlined: styles.outlinedToggleSelectedDisabled,
+	standard: styles.standardToggleSelectedDisabled,
+	tonal: null
+};
 function groupStyles(group, size, state) {
 	if (group === null) return null;
 	return [group.styles?.(state), group.shift !== 0 && shifted.width(`calc(${EDGES[size]} + ${group.shift}px)`)];
@@ -490,7 +507,7 @@ function iconButtonClasses(size, variant, group) {
 function toggleStyleProps(size, variant, group) {
 	return (state) => {
 		const container = toggleContainers[variant][state.isSelected === true ? "selected" : "unselected"];
-		return props(styles.base, focus.ring, state.isSelected === true ? toggleStyles[variant].selected : toggleStyles[variant].unselected, styles[size], roundShapes[size], variant === "outlined" && state.isSelected !== true && outlineWidths[size], state.isHovered && hovered[container], state.isFocusVisible && focused[container], state.isPressed && pressed[container], state.isPressed && selectedShapes[size], state.isPending === true && styles.pending, state.isDisabled && styles.disabled, state.isDisabled && roundShapes[size], state.isDisabled && disabledStyles[variant], state.isSelected === true && selectedShapes[size], groupStyles(group, size, state));
+		return props(styles.base, focus.ring, state.isSelected === true ? toggleStyles[variant].selected : toggleStyles[variant].unselected, styles[size], roundShapes[size], variant === "outlined" && state.isSelected !== true && outlineWidths[size], state.isHovered && hovered[container], state.isFocusVisible && focused[container], state.isPressed && pressed[container], state.isPressed && selectedShapes[size], state.isPending === true && styles.pending, state.isDisabled && styles.disabled, state.isDisabled && roundShapes[size], state.isDisabled && disabledStyles[variant], state.isDisabled && state.isSelected === true && selectedDisabledStyles[variant], state.isSelected === true && selectedShapes[size], groupStyles(group, size, state));
 	};
 }
 //#endregion