@12-apps/ui 6.77.2 → 6.78.0

package/dist/chunk-E53MMMDA.js

@@ -0,0 +1,209 @@
+import {
+  actionSx,
+  backButtonSx,
+  categoryDescriptionSx,
+  categoryRowSx,
+  categoryTextSx,
+  closeButtonSx,
+  countBadgeSx,
+  doneConfirmSx,
+  doneIconSx,
+  doneSx,
+  doneTitleSx,
+  footerSx,
+  handleSx,
+  headerStartSx,
+  headerSx,
+  introListSx,
+  startAllSx,
+  stepLabelSx,
+  tertiarySx,
+  titleSx
+} from "./chunk-CHP3QIS3.js";
+import {
+  Progress
+} from "./chunk-3V3Z4EML.js";
+import {
+  Alert
+} from "./chunk-NQCTANF3.js";
+import {
+  Button
+} from "./chunk-5USHYSCO.js";
+
+// src/components/feedback/SequenceResolver/SequenceResolver.parts.tsx
+import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
+import ChevronRightIcon from "@mui/icons-material/ChevronRight";
+import CheckCircleOutlineIcon from "@mui/icons-material/CheckCircleOutline";
+import CloseIcon from "@mui/icons-material/Close";
+import Box from "@mui/material/Box/index.js";
+import ButtonBase from "@mui/material/ButtonBase/index.js";
+import IconButton from "@mui/material/IconButton/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import { useEffect, useRef } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function SequenceHeader(props) {
+  const { touch, label, back, closeLabel, onClose, progress, progressLabel, testId } = props;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    touch ? /* @__PURE__ */ jsx(Box, { "aria-hidden": true, sx: handleSx, "data-testid": `${testId}-handle` }) : null,
+    /* @__PURE__ */ jsxs(Box, { sx: headerSx, children: [
+      /* @__PURE__ */ jsxs(Box, { sx: headerStartSx, children: [
+        back ? /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "text",
+            color: "primary",
+            size: "md",
+            icon: /* @__PURE__ */ jsx(ChevronLeftIcon, {}),
+            "aria-label": back.accessible,
+            onClick: back.onClick,
+            disabled: back.disabled,
+            sx: backButtonSx(touch),
+            dataTestId: `${testId}-back`,
+            children: back.label
+          }
+        ) : null,
+        /* @__PURE__ */ jsx(Typography, { component: "span", sx: stepLabelSx, "data-testid": `${testId}-step-label`, children: label })
+      ] }),
+      /* @__PURE__ */ jsx(IconButton, { "aria-label": closeLabel, onClick: onClose, sx: closeButtonSx(touch), "data-testid": `${testId}-close`, children: /* @__PURE__ */ jsx(CloseIcon, {}) })
+    ] }),
+    /* @__PURE__ */ jsx(
+      Progress,
+      {
+        variant: "linear",
+        size: "md",
+        color: "warning",
+        value: progress,
+        "aria-label": progressLabel,
+        dataTestId: `${testId}-progress`
+      }
+    )
+  ] });
+}
+function useFocusOnScreen(screenKey, target, fallback) {
+  useEffect(() => {
+    (target.current ?? fallback.current)?.focus();
+  }, [screenKey, target, fallback]);
+}
+function useKeepFocusWhileBusy(busy, body) {
+  useEffect(() => {
+    if (!busy) return void 0;
+    const rescue = () => {
+      const node = body.current;
+      const active = node?.ownerDocument.activeElement;
+      if (node && (!active || active === node.ownerDocument.body)) node.focus();
+    };
+    rescue();
+    const frame = requestAnimationFrame(rescue);
+    return () => cancelAnimationFrame(frame);
+  }, [busy, body]);
+}
+function SequenceIntroBody({ intro, titleId, testId, screenKey }) {
+  const titleRef = useRef(null);
+  useFocusOnScreen(screenKey, titleRef, titleRef);
+  const last = intro.categories.length - 1;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "column", gap: 0.5 }, children: [
+      /* @__PURE__ */ jsx(Typography, { component: "h2", id: titleId, tabIndex: -1, ref: titleRef, sx: titleSx, children: intro.title }),
+      intro.description ? /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", children: intro.description }) : null
+    ] }),
+    /* @__PURE__ */ jsx(Box, { component: "ul", sx: introListSx, children: intro.categories.map((category, index) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+      ButtonBase,
+      {
+        onClick: category.onPick,
+        sx: categoryRowSx(index === last),
+        "data-testid": `${testId}-category-${index}`,
+        children: [
+          /* @__PURE__ */ jsx(Box, { component: "span", sx: countBadgeSx, children: category.count }),
+          /* @__PURE__ */ jsxs(Box, { component: "span", sx: categoryTextSx, children: [
+            /* @__PURE__ */ jsx(Typography, { component: "span", variant: "body2", fontWeight: 500, children: category.label }),
+            category.description ? /* @__PURE__ */ jsx(Typography, { component: "span", sx: categoryDescriptionSx, children: category.description }) : null
+          ] }),
+          /* @__PURE__ */ jsx(ChevronRightIcon, { "aria-hidden": true, sx: { color: "text.secondary" } })
+        ]
+      }
+    ) }, `${index}-${category.label}`)) }),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "solid",
+        color: "primary",
+        size: "lg",
+        fullWidth: true,
+        onClick: intro.onStartAll,
+        dataTestId: `${testId}-start-all`,
+        sx: startAllSx,
+        children: intro.startAllLabel
+      }
+    )
+  ] });
+}
+function ActionButton({
+  action,
+  busy,
+  touch,
+  variant,
+  testId
+}) {
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      variant,
+      color: variant === "outline" ? "neutral" : "primary",
+      size: "md",
+      onClick: action.onClick,
+      disabled: busy || action.disabled,
+      dataTestId: testId,
+      sx: variant === "text" ? tertiarySx(touch) : actionSx(touch),
+      children: action.label
+    }
+  );
+}
+function SequenceStepBody(props) {
+  const { step, skip, busy, error, touch, testId, screenKey, titleRef } = props;
+  const bodyRef = useRef(null);
+  useFocusOnScreen(screenKey, titleRef, bodyRef);
+  useKeepFocusWhileBusy(busy, bodyRef);
+  const secondary = step.secondary === false ? void 0 : step.secondary ?? skip;
+  const hasFooter = Boolean(secondary || step.primary);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Box, { ref: bodyRef, tabIndex: -1, "aria-busy": busy, sx: { outline: "none", minWidth: 0 }, children: step.content }),
+    error ? /* @__PURE__ */ jsx(Alert, { variant: "danger", announce: "assertive", description: error, dataTestId: `${testId}-error` }) : null,
+    step.tertiary ? /* @__PURE__ */ jsx(ActionButton, { action: step.tertiary, busy, touch, variant: "text", testId: `${testId}-tertiary` }) : null,
+    hasFooter ? /* @__PURE__ */ jsxs(Box, { sx: footerSx(touch, step.footer ?? "end"), "data-testid": `${testId}-footer`, children: [
+      secondary ? /* @__PURE__ */ jsx(ActionButton, { action: secondary, busy, touch, variant: "outline", testId: `${testId}-secondary` }) : null,
+      step.primary ? /* @__PURE__ */ jsx(ActionButton, { action: step.primary, busy, touch, variant: "solid", testId: `${testId}-primary` }) : null
+    ] }) : null
+  ] });
+}
+function SequenceDoneBody({ done, titleId, error, touch, onConfirm, testId, screenKey }) {
+  const titleRef = useRef(null);
+  useFocusOnScreen(screenKey, titleRef, titleRef);
+  return /* @__PURE__ */ jsxs(Box, { sx: doneSx, "data-testid": `${testId}-done`, children: [
+    /* @__PURE__ */ jsx(CheckCircleOutlineIcon, { "aria-hidden": true, sx: doneIconSx }),
+    /* @__PURE__ */ jsx(Typography, { component: "h2", id: titleId, tabIndex: -1, ref: titleRef, sx: doneTitleSx, children: done.title }),
+    done.description ? /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", children: done.description }) : null,
+    error ? /* @__PURE__ */ jsx(Alert, { variant: "danger", announce: "assertive", description: error, dataTestId: `${testId}-error` }) : null,
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "solid",
+        color: "primary",
+        size: "md",
+        fullWidth: touch,
+        onClick: onConfirm,
+        dataTestId: `${testId}-done-confirm`,
+        sx: doneConfirmSx(),
+        children: done.confirmLabel
+      }
+    )
+  ] });
+}
+
+export {
+  SequenceHeader,
+  useFocusOnScreen,
+  SequenceIntroBody,
+  SequenceStepBody,
+  SequenceDoneBody
+};
+//# sourceMappingURL=chunk-E53MMMDA.js.map

package/dist/chunk-E53MMMDA.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/feedback/SequenceResolver/SequenceResolver.parts.tsx"],"sourcesContent":["import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';\nimport ChevronRightIcon from '@mui/icons-material/ChevronRight';\nimport CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';\nimport CloseIcon from '@mui/icons-material/Close';\nimport Box from '@mui/material/Box/index.js';\nimport ButtonBase from '@mui/material/ButtonBase/index.js';\nimport IconButton from '@mui/material/IconButton/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport React, { useEffect, useRef } from 'react';\n\nimport { Alert } from '../../data-display/Alert';\nimport { Progress } from '../../data-display/Progress';\nimport { Button } from '../../form/Button';\nimport {\n  actionSx,\n  backButtonSx,\n  categoryDescriptionSx,\n  categoryRowSx,\n  categoryTextSx,\n  closeButtonSx,\n  countBadgeSx,\n  doneConfirmSx,\n  doneIconSx,\n  doneSx,\n  doneTitleSx,\n  footerSx,\n  handleSx,\n  headerStartSx,\n  headerSx,\n  introListSx,\n  stepLabelSx,\n  startAllSx,\n  tertiarySx,\n  titleSx,\n} from './SequenceResolver.styles';\nimport type { SequenceAction, SequenceDone, SequenceIntro, SequenceStep } from './SequenceResolver.types';\n\ninterface HeaderProps {\n  touch: boolean;\n  label: string;\n  /** Absent: no back button (intro, first step, or the host turned it off). */\n  back?: { label: string; accessible?: string; onClick: () => void; disabled: boolean };\n  closeLabel: string;\n  onClose: () => void;\n  progress: number;\n  progressLabel: string;\n  testId: string;\n}\n\n/** The drag handle (phone), the header row and the progress bar. */\nexport function SequenceHeader(props: HeaderProps): React.JSX.Element {\n  const { touch, label, back, closeLabel, onClose, progress, progressLabel, testId } = props;\n  return (\n    <>\n      {touch ? <Box aria-hidden sx={handleSx} data-testid={`${testId}-handle`} /> : null}\n      <Box sx={headerSx}>\n        <Box sx={headerStartSx}>\n          {back ? (\n            <Button\n              variant=\"text\"\n              color=\"primary\"\n              size=\"md\"\n              icon={<ChevronLeftIcon />}\n              aria-label={back.accessible}\n              onClick={back.onClick}\n              disabled={back.disabled}\n              sx={backButtonSx(touch)}\n              dataTestId={`${testId}-back`}\n            >\n              {back.label}\n            </Button>\n          ) : null}\n          <Typography component=\"span\" sx={stepLabelSx} data-testid={`${testId}-step-label`}>\n            {label}\n          </Typography>\n        </Box>\n        <IconButton aria-label={closeLabel} onClick={onClose} sx={closeButtonSx(touch)} data-testid={`${testId}-close`}>\n          <CloseIcon />\n        </IconButton>\n      </Box>\n      <Progress\n        variant=\"linear\"\n        size=\"md\"\n        color=\"warning\"\n        value={progress}\n        aria-label={progressLabel}\n        dataTestId={`${testId}-progress`}\n      />\n    </>\n  );\n}\n\n/**\n * Moves focus to `target` (else `fallback`) whenever `screenKey` changes — and\n * on mount, which happens inside the dialog's portal, before MUI's focus trap\n * looks: finding focus already inside, the trap and `focusDialogOnEntered`\n * both leave it there.\n */\nexport function useFocusOnScreen(\n  screenKey: string,\n  target: React.RefObject<HTMLElement | null>,\n  fallback: React.RefObject<HTMLElement | null>,\n): void {\n  useEffect(() => {\n    (target.current ?? fallback.current)?.focus();\n  }, [screenKey, target, fallback]);\n}\n\n/**\n * A button that disables itself under the pointer drops focus to the page\n * behind the dialog. While busy, focus that fell out lands on the step body\n * (`aria-busy`) instead, so a screen reader stays in the dialog.\n */\nfunction useKeepFocusWhileBusy(busy: boolean, body: React.RefObject<HTMLElement | null>): void {\n  useEffect(() => {\n    if (!busy) return undefined;\n    const rescue = (): void => {\n      const node = body.current;\n      const active = node?.ownerDocument.activeElement;\n      if (node && (!active || active === node.ownerDocument.body)) node.focus();\n    };\n    rescue();\n    const frame = requestAnimationFrame(rescue);\n    return () => cancelAnimationFrame(frame);\n  }, [busy, body]);\n}\n\ninterface IntroProps {\n  intro: SequenceIntro;\n  titleId: string;\n  testId: string;\n  screenKey: string;\n}\n\n/** The kinds with their counts, and \"resolve them all\". */\nexport function SequenceIntroBody({ intro, titleId, testId, screenKey }: IntroProps): React.JSX.Element {\n  const titleRef = useRef<HTMLHeadingElement | null>(null);\n  useFocusOnScreen(screenKey, titleRef, titleRef);\n  const last = intro.categories.length - 1;\n  return (\n    <>\n      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.5 }}>\n        <Typography component=\"h2\" id={titleId} tabIndex={-1} ref={titleRef} sx={titleSx}>\n          {intro.title}\n        </Typography>\n        {intro.description ? (\n          <Typography variant=\"body2\" color=\"text.secondary\">\n            {intro.description}\n          </Typography>\n        ) : null}\n      </Box>\n      <Box component=\"ul\" sx={introListSx}>\n        {intro.categories.map((category, index) => (\n          <li key={`${index}-${category.label}`}>\n            <ButtonBase\n              onClick={category.onPick}\n              sx={categoryRowSx(index === last)}\n              data-testid={`${testId}-category-${index}`}\n            >\n              <Box component=\"span\" sx={countBadgeSx}>\n                {category.count}\n              </Box>\n              <Box component=\"span\" sx={categoryTextSx}>\n                <Typography component=\"span\" variant=\"body2\" fontWeight={500}>\n                  {category.label}\n                </Typography>\n                {category.description ? (\n                  <Typography component=\"span\" sx={categoryDescriptionSx}>\n                    {category.description}\n                  </Typography>\n                ) : null}\n              </Box>\n              <ChevronRightIcon aria-hidden sx={{ color: 'text.secondary' }} />\n            </ButtonBase>\n          </li>\n        ))}\n      </Box>\n      <Button\n        variant=\"solid\"\n        color=\"primary\"\n        size=\"lg\"\n        fullWidth\n        onClick={intro.onStartAll}\n        dataTestId={`${testId}-start-all`}\n        sx={startAllSx}\n      >\n        {intro.startAllLabel}\n      </Button>\n    </>\n  );\n}\n\ninterface StepProps {\n  step: SequenceStep;\n  /** The default secondary: skip. */\n  skip: SequenceAction;\n  busy: boolean;\n  error: string | null;\n  touch: boolean;\n  testId: string;\n  screenKey: string;\n  titleRef: React.RefObject<HTMLElement | null>;\n}\n\nfunction ActionButton({\n  action,\n  busy,\n  touch,\n  variant,\n  testId,\n}: {\n  action: SequenceAction;\n  busy: boolean;\n  touch: boolean;\n  variant: 'solid' | 'outline' | 'text';\n  testId: string;\n}): React.JSX.Element {\n  return (\n    <Button\n      variant={variant}\n      color={variant === 'outline' ? 'neutral' : 'primary'}\n      size=\"md\"\n      onClick={action.onClick}\n      disabled={busy || action.disabled}\n      dataTestId={testId}\n      sx={variant === 'text' ? tertiarySx(touch) : actionSx(touch)}\n    >\n      {action.label}\n    </Button>\n  );\n}\n\n/** The host's body, its error, the tertiary text button and the footer. */\nexport function SequenceStepBody(props: StepProps): React.JSX.Element {\n  const { step, skip, busy, error, touch, testId, screenKey, titleRef } = props;\n  const bodyRef = useRef<HTMLDivElement | null>(null);\n  useFocusOnScreen(screenKey, titleRef, bodyRef);\n  useKeepFocusWhileBusy(busy, bodyRef);\n  const secondary = step.secondary === false ? undefined : (step.secondary ?? skip);\n  const hasFooter = Boolean(secondary || step.primary);\n  return (\n    <>\n      <Box ref={bodyRef} tabIndex={-1} aria-busy={busy} sx={{ outline: 'none', minWidth: 0 }}>\n        {step.content}\n      </Box>\n      {error ? (\n        <Alert variant=\"danger\" announce=\"assertive\" description={error} dataTestId={`${testId}-error`} />\n      ) : null}\n      {step.tertiary ? (\n        <ActionButton action={step.tertiary} busy={busy} touch={touch} variant=\"text\" testId={`${testId}-tertiary`} />\n      ) : null}\n      {hasFooter ? (\n        <Box sx={footerSx(touch, step.footer ?? 'end')} data-testid={`${testId}-footer`}>\n          {secondary ? (\n            <ActionButton action={secondary} busy={busy} touch={touch} variant=\"outline\" testId={`${testId}-secondary`} />\n          ) : null}\n          {step.primary ? (\n            <ActionButton action={step.primary} busy={busy} touch={touch} variant=\"solid\" testId={`${testId}-primary`} />\n          ) : null}\n        </Box>\n      ) : null}\n    </>\n  );\n}\n\ninterface DoneProps {\n  done: SequenceDone;\n  titleId: string;\n  error: string | null;\n  touch: boolean;\n  onConfirm: () => void;\n  testId: string;\n  screenKey: string;\n}\n\n/** The end screen: a check, the host's title and sentence, one button that closes. */\nexport function SequenceDoneBody({ done, titleId, error, touch, onConfirm, testId, screenKey }: DoneProps): React.JSX.Element {\n  const titleRef = useRef<HTMLHeadingElement | null>(null);\n  useFocusOnScreen(screenKey, titleRef, titleRef);\n  return (\n    <Box sx={doneSx} data-testid={`${testId}-done`}>\n      <CheckCircleOutlineIcon aria-hidden sx={doneIconSx} />\n      <Typography component=\"h2\" id={titleId} tabIndex={-1} ref={titleRef} sx={doneTitleSx}>\n        {done.title}\n      </Typography>\n      {done.description ? (\n        <Typography variant=\"body2\" color=\"text.secondary\">\n          {done.description}\n        </Typography>\n      ) : null}\n      {error ? (\n        <Alert variant=\"danger\" announce=\"assertive\" description={error} dataTestId={`${testId}-error`} />\n      ) : null}\n      <Button\n        variant=\"solid\"\n        color=\"primary\"\n        size=\"md\"\n        fullWidth={touch}\n        onClick={onConfirm}\n        dataTestId={`${testId}-done-confirm`}\n        sx={doneConfirmSx()}\n      >\n        {done.confirmLabel}\n      </Button>\n    </Box>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,qBAAqB;AAC5B,OAAO,sBAAsB;AAC7B,OAAO,4BAA4B;AACnC,OAAO,eAAe;AACtB,OAAO,SAAS;AAChB,OAAO,gBAAgB;AACvB,OAAO,gBAAgB;AACvB,OAAO,gBAAgB;AACvB,SAAgB,WAAW,cAAc;AA6CrC,mBACW,KAEP,YAHJ;AAHG,SAAS,eAAe,OAAuC;AACpE,QAAM,EAAE,OAAO,OAAO,MAAM,YAAY,SAAS,UAAU,eAAe,OAAO,IAAI;AACrF,SACE,iCACG;AAAA,YAAQ,oBAAC,OAAI,eAAW,MAAC,IAAI,UAAU,eAAa,GAAG,MAAM,WAAW,IAAK;AAAA,IAC9E,qBAAC,OAAI,IAAI,UACP;AAAA,2BAAC,OAAI,IAAI,eACN;AAAA,eACC;AAAA,UAAC;AAAA;AAAA,YACC,SAAQ;AAAA,YACR,OAAM;AAAA,YACN,MAAK;AAAA,YACL,MAAM,oBAAC,mBAAgB;AAAA,YACvB,cAAY,KAAK;AAAA,YACjB,SAAS,KAAK;AAAA,YACd,UAAU,KAAK;AAAA,YACf,IAAI,aAAa,KAAK;AAAA,YACtB,YAAY,GAAG,MAAM;AAAA,YAEpB,eAAK;AAAA;AAAA,QACR,IACE;AAAA,QACJ,oBAAC,cAAW,WAAU,QAAO,IAAI,aAAa,eAAa,GAAG,MAAM,eACjE,iBACH;AAAA,SACF;AAAA,MACA,oBAAC,cAAW,cAAY,YAAY,SAAS,SAAS,IAAI,cAAc,KAAK,GAAG,eAAa,GAAG,MAAM,UACpG,8BAAC,aAAU,GACb;AAAA,OACF;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,SAAQ;AAAA,QACR,MAAK;AAAA,QACL,OAAM;AAAA,QACN,OAAO;AAAA,QACP,cAAY;AAAA,QACZ,YAAY,GAAG,MAAM;AAAA;AAAA,IACvB;AAAA,KACF;AAEJ;AAQO,SAAS,iBACd,WACA,QACA,UACM;AACN,YAAU,MAAM;AACd,KAAC,OAAO,WAAW,SAAS,UAAU,MAAM;AAAA,EAC9C,GAAG,CAAC,WAAW,QAAQ,QAAQ,CAAC;AAClC;AAOA,SAAS,sBAAsB,MAAe,MAAiD;AAC7F,YAAU,MAAM;AACd,QAAI,CAAC,KAAM,QAAO;AAClB,UAAM,SAAS,MAAY;AACzB,YAAM,OAAO,KAAK;AAClB,YAAM,SAAS,MAAM,cAAc;AACnC,UAAI,SAAS,CAAC,UAAU,WAAW,KAAK,cAAc,MAAO,MAAK,MAAM;AAAA,IAC1E;AACA,WAAO;AACP,UAAM,QAAQ,sBAAsB,MAAM;AAC1C,WAAO,MAAM,qBAAqB,KAAK;AAAA,EACzC,GAAG,CAAC,MAAM,IAAI,CAAC;AACjB;AAUO,SAAS,kBAAkB,EAAE,OAAO,SAAS,QAAQ,UAAU,GAAkC;AACtG,QAAM,WAAW,OAAkC,IAAI;AACvD,mBAAiB,WAAW,UAAU,QAAQ;AAC9C,QAAM,OAAO,MAAM,WAAW,SAAS;AACvC,SACE,iCACE;AAAA,yBAAC,OAAI,IAAI,EAAE,SAAS,QAAQ,eAAe,UAAU,KAAK,IAAI,GAC5D;AAAA,0BAAC,cAAW,WAAU,MAAK,IAAI,SAAS,UAAU,IAAI,KAAK,UAAU,IAAI,SACtE,gBAAM,OACT;AAAA,MACC,MAAM,cACL,oBAAC,cAAW,SAAQ,SAAQ,OAAM,kBAC/B,gBAAM,aACT,IACE;AAAA,OACN;AAAA,IACA,oBAAC,OAAI,WAAU,MAAK,IAAI,aACrB,gBAAM,WAAW,IAAI,CAAC,UAAU,UAC/B,oBAAC,QACC;AAAA,MAAC;AAAA;AAAA,QACC,SAAS,SAAS;AAAA,QAClB,IAAI,cAAc,UAAU,IAAI;AAAA,QAChC,eAAa,GAAG,MAAM,aAAa,KAAK;AAAA,QAExC;AAAA,8BAAC,OAAI,WAAU,QAAO,IAAI,cACvB,mBAAS,OACZ;AAAA,UACA,qBAAC,OAAI,WAAU,QAAO,IAAI,gBACxB;AAAA,gCAAC,cAAW,WAAU,QAAO,SAAQ,SAAQ,YAAY,KACtD,mBAAS,OACZ;AAAA,YACC,SAAS,cACR,oBAAC,cAAW,WAAU,QAAO,IAAI,uBAC9B,mBAAS,aACZ,IACE;AAAA,aACN;AAAA,UACA,oBAAC,oBAAiB,eAAW,MAAC,IAAI,EAAE,OAAO,iBAAiB,GAAG;AAAA;AAAA;AAAA,IACjE,KApBO,GAAG,KAAK,IAAI,SAAS,KAAK,EAqBnC,CACD,GACH;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,SAAQ;AAAA,QACR,OAAM;AAAA,QACN,MAAK;AAAA,QACL,WAAS;AAAA,QACT,SAAS,MAAM;AAAA,QACf,YAAY,GAAG,MAAM;AAAA,QACrB,IAAI;AAAA,QAEH,gBAAM;AAAA;AAAA,IACT;AAAA,KACF;AAEJ;AAcA,SAAS,aAAa;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAMsB;AACpB,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,OAAO,YAAY,YAAY,YAAY;AAAA,MAC3C,MAAK;AAAA,MACL,SAAS,OAAO;AAAA,MAChB,UAAU,QAAQ,OAAO;AAAA,MACzB,YAAY;AAAA,MACZ,IAAI,YAAY,SAAS,WAAW,KAAK,IAAI,SAAS,KAAK;AAAA,MAE1D,iBAAO;AAAA;AAAA,EACV;AAEJ;AAGO,SAAS,iBAAiB,OAAqC;AACpE,QAAM,EAAE,MAAM,MAAM,MAAM,OAAO,OAAO,QAAQ,WAAW,SAAS,IAAI;AACxE,QAAM,UAAU,OAA8B,IAAI;AAClD,mBAAiB,WAAW,UAAU,OAAO;AAC7C,wBAAsB,MAAM,OAAO;AACnC,QAAM,YAAY,KAAK,cAAc,QAAQ,SAAa,KAAK,aAAa;AAC5E,QAAM,YAAY,QAAQ,aAAa,KAAK,OAAO;AACnD,SACE,iCACE;AAAA,wBAAC,OAAI,KAAK,SAAS,UAAU,IAAI,aAAW,MAAM,IAAI,EAAE,SAAS,QAAQ,UAAU,EAAE,GAClF,eAAK,SACR;AAAA,IACC,QACC,oBAAC,SAAM,SAAQ,UAAS,UAAS,aAAY,aAAa,OAAO,YAAY,GAAG,MAAM,UAAU,IAC9F;AAAA,IACH,KAAK,WACJ,oBAAC,gBAAa,QAAQ,KAAK,UAAU,MAAY,OAAc,SAAQ,QAAO,QAAQ,GAAG,MAAM,aAAa,IAC1G;AAAA,IACH,YACC,qBAAC,OAAI,IAAI,SAAS,OAAO,KAAK,UAAU,KAAK,GAAG,eAAa,GAAG,MAAM,WACnE;AAAA,kBACC,oBAAC,gBAAa,QAAQ,WAAW,MAAY,OAAc,SAAQ,WAAU,QAAQ,GAAG,MAAM,cAAc,IAC1G;AAAA,MACH,KAAK,UACJ,oBAAC,gBAAa,QAAQ,KAAK,SAAS,MAAY,OAAc,SAAQ,SAAQ,QAAQ,GAAG,MAAM,YAAY,IACzG;AAAA,OACN,IACE;AAAA,KACN;AAEJ;AAaO,SAAS,iBAAiB,EAAE,MAAM,SAAS,OAAO,OAAO,WAAW,QAAQ,UAAU,GAAiC;AAC5H,QAAM,WAAW,OAAkC,IAAI;AACvD,mBAAiB,WAAW,UAAU,QAAQ;AAC9C,SACE,qBAAC,OAAI,IAAI,QAAQ,eAAa,GAAG,MAAM,SACrC;AAAA,wBAAC,0BAAuB,eAAW,MAAC,IAAI,YAAY;AAAA,IACpD,oBAAC,cAAW,WAAU,MAAK,IAAI,SAAS,UAAU,IAAI,KAAK,UAAU,IAAI,aACtE,eAAK,OACR;AAAA,IACC,KAAK,cACJ,oBAAC,cAAW,SAAQ,SAAQ,OAAM,kBAC/B,eAAK,aACR,IACE;AAAA,IACH,QACC,oBAAC,SAAM,SAAQ,UAAS,UAAS,aAAY,aAAa,OAAO,YAAY,GAAG,MAAM,UAAU,IAC9F;AAAA,IACJ;AAAA,MAAC;AAAA;AAAA,QACC,SAAQ;AAAA,QACR,OAAM;AAAA,QACN,MAAK;AAAA,QACL,WAAW;AAAA,QACX,SAAS;AAAA,QACT,YAAY,GAAG,MAAM;AAAA,QACrB,IAAI,cAAc;AAAA,QAEjB,eAAK;AAAA;AAAA,IACR;AAAA,KACF;AAEJ;","names":[]}

package/dist/{chunk-C2NNJMVY.js → chunk-EBCEDBHX.js}

@@ -1,12 +1,12 @@
 import {
   useSummaryInfo
-} from "./chunk-X2GWR75Q.js";
+} from "./chunk-AEYLFBZT.js";
 import {
   PendingSpinner,
   SaveError,
   SettingHeader,
   partTestId
-} from "./chunk-3EIRRLCQ.js";
+} from "./chunk-HTGK7QCX.js";
 import {
   clampStyles,
   descriptionStyles
@@ -87,4 +87,4 @@ export {
   useSettingSwitchIds,
   SettingSwitchBlock
 };
-//# sourceMappingURL=chunk-C2NNJMVY.js.map
+//# sourceMappingURL=chunk-EBCEDBHX.js.map

package/dist/{chunk-BRHRK7BK.js → chunk-ENRB6PIN.js}

@@ -17,7 +17,7 @@ import {
 import {
   fieldOverrides,
   mergeMuiComponents
-} from "./chunk-RGVNXES5.js";
+} from "./chunk-QQHZBJMU.js";
 import {
   densityFieldHeight,
   densityFontSize,
@@ -66,4 +66,4 @@ export {
   useDensity,
   densityThemeOptions
 };
-//# sourceMappingURL=chunk-BRHRK7BK.js.map
+//# sourceMappingURL=chunk-ENRB6PIN.js.map

package/dist/{chunk-HHFVDOA7.js → chunk-F6IMOMA3.js}

@@ -1,7 +1,7 @@
 import {
   useColumnsWithActions,
   useRenderedColumns
-} from "./chunk-5WUXJDFP.js";
+} from "./chunk-ZTPB7PVI.js";
 import {
   filterRows
 } from "./chunk-YGQX7BNI.js";
@@ -12,7 +12,7 @@ import {
 import {
   computeActiveFilterCount,
   defaultSortFields
-} from "./chunk-5IIHAYFF.js";
+} from "./chunk-QCQWOSSD.js";
 import {
   serverDerived,
   useServerQuery
@@ -172,4 +172,4 @@ function useDataViewsState({
 export {
   useDataViewsState
 };
-//# sourceMappingURL=chunk-HHFVDOA7.js.map
+//# sourceMappingURL=chunk-F6IMOMA3.js.map

package/dist/{chunk-YTDUIU7X.js → chunk-F6LZHF4O.js}

@@ -4,7 +4,7 @@ import {
   radioCardSx,
   segmentButtonSx,
   segmentContainerSx
-} from "./chunk-75FHDUJW.js";
+} from "./chunk-2D4WKET2.js";
 import {
   muiSize
 } from "./chunk-7ZPUN7TV.js";
@@ -249,4 +249,4 @@ export {
   SegmentRadios,
   GroupLabel
 };
-//# sourceMappingURL=chunk-YTDUIU7X.js.map
+//# sourceMappingURL=chunk-F6LZHF4O.js.map

package/dist/{chunk-NZXRPWPW.js → chunk-FAIQCGSL.js}

@@ -1,21 +1,21 @@
 import {
   DataViewsDisplayPanel
-} from "./chunk-5M7T36AT.js";
+} from "./chunk-VBGC7G4F.js";
 import {
   DataViewsExportMenu
-} from "./chunk-4NG3LTRX.js";
+} from "./chunk-VJG43WKU.js";
 import {
   STICKY_BAR_ATTR
 } from "./chunk-4IE66GY2.js";
 import {
   renderBulkActions
-} from "./chunk-5IIHAYFF.js";
+} from "./chunk-QCQWOSSD.js";
 import {
   useDataViewsCopy
 } from "./chunk-KHG57NAE.js";
 import {
   FilterTrigger
-} from "./chunk-M5DBOM7R.js";
+} from "./chunk-ICRVLGWD.js";
 import {
   ContentToolbar
 } from "./chunk-SFLNHCA2.js";
@@ -143,4 +143,4 @@ function GridToolbar(props) {
 export {
   GridToolbar
 };
-//# sourceMappingURL=chunk-NZXRPWPW.js.map
+//# sourceMappingURL=chunk-FAIQCGSL.js.map

package/dist/{chunk-HMWSMRLM.js → chunk-FTDGFWB5.js}

@@ -1,13 +1,13 @@
+import {
+  useAsyncSwitch
+} from "./chunk-SALQ65SM.js";
 import {
   SettingSwitchBlock,
   useSettingSwitchIds
-} from "./chunk-C2NNJMVY.js";
+} from "./chunk-EBCEDBHX.js";
 import {
   useSettingGroup
 } from "./chunk-XJQNSMGA.js";
-import {
-  useAsyncSwitch
-} from "./chunk-SALQ65SM.js";
 import {
   flatStyles,
   surfaceStyles,
@@ -44,4 +44,4 @@ SettingToggle.displayName = "SettingToggle";
 export {
   SettingToggle
 };
-//# sourceMappingURL=chunk-HMWSMRLM.js.map
+//# sourceMappingURL=chunk-FTDGFWB5.js.map

package/dist/{chunk-ZE4HF3KC.js → chunk-GFXS5PJL.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-7TCOYCD7.js";
 import {
   CardBody
-} from "./chunk-ZCXQ4ZB6.js";
+} from "./chunk-XYSE2QZN.js";
 import {
   toGridExpansion
 } from "./chunk-O5UGAL2V.js";
@@ -12,7 +12,7 @@ import {
 } from "./chunk-4IE66GY2.js";
 import {
   SelectAllStrip
-} from "./chunk-OY437NRJ.js";
+} from "./chunk-QYX4567K.js";
 import {
   ListCardGroup
 } from "./chunk-BBBHPK2Q.js";
@@ -250,4 +250,4 @@ function GridMain(props) {
 export {
   GridMain
 };
-//# sourceMappingURL=chunk-ZE4HF3KC.js.map
+//# sourceMappingURL=chunk-GFXS5PJL.js.map

package/dist/{chunk-YEKPQAOW.js → chunk-GQ2T44BC.js}

@@ -9,7 +9,7 @@ import {
 } from "./chunk-RTSK5OZT.js";
 import {
   useUiTheme
-} from "./chunk-Q3HYEAVQ.js";
+} from "./chunk-N3ZOZWP5.js";
 import {
   resolveTestId
 } from "./chunk-TYJR4GOF.js";
@@ -48,4 +48,4 @@ Icon.displayName = "Icon";
 export {
   Icon
 };
-//# sourceMappingURL=chunk-YEKPQAOW.js.map
+//# sourceMappingURL=chunk-GQ2T44BC.js.map

package/dist/{chunk-ZAZOBTVS.js → chunk-GSXYXMCV.js}

@@ -2,7 +2,7 @@ import {
   MoreGroup,
   MoreQuick,
   fieldClearing
-} from "./chunk-NPSARV2I.js";
+} from "./chunk-7P5PNRBT.js";
 import {
   useDataViewsCopy
 } from "./chunk-KHG57NAE.js";
@@ -11,7 +11,7 @@ import {
 } from "./chunk-6DPAWXZ3.js";
 import {
   Button
-} from "./chunk-YOXYSAUI.js";
+} from "./chunk-5USHYSCO.js";
 import {
   Text
 } from "./chunk-AJBRO76D.js";
@@ -193,4 +193,4 @@ function MoreFilters({
 export {
   MoreFilters
 };
-//# sourceMappingURL=chunk-ZAZOBTVS.js.map
+//# sourceMappingURL=chunk-GSXYXMCV.js.map

package/dist/{chunk-IZ7JTG3Z.js → chunk-GTT5UKKO.js}

@@ -2,19 +2,19 @@ import {
   PickerSheetHead,
   PickerSheetList,
   PickerSheetSearch
-} from "./chunk-IDRVQVDL.js";
+} from "./chunk-TNDTEI6D.js";
 import {
   bodySx,
   dialogPaperSx,
   footSx,
   sheetPaperSx
-} from "./chunk-LZJHHMOF.js";
+} from "./chunk-DRJL3JHR.js";
 import {
   usePickerSheet
 } from "./chunk-WSMUOFWF.js";
 import {
   METRICS
-} from "./chunk-VPGDYI63.js";
+} from "./chunk-AKBL7S7A.js";
 import {
   stackedOverlayZIndex
 } from "./chunk-MFU4Y25U.js";
@@ -125,4 +125,4 @@ function PickerSheet(props) {
 export {
   PickerSheet
 };
-//# sourceMappingURL=chunk-IZ7JTG3Z.js.map
+//# sourceMappingURL=chunk-GTT5UKKO.js.map

package/dist/{chunk-WDSJ6SVY.js → chunk-GXSHLMT4.js}

@@ -1,7 +1,7 @@
 import {
   METRICS,
   footerSx
-} from "./chunk-VPGDYI63.js";
+} from "./chunk-AKBL7S7A.js";
 import {
   fieldRadiusPx
 } from "./chunk-GDN2LUTZ.js";
@@ -84,4 +84,4 @@ export {
   CategoryMultiFoot,
   CategorySingleFoot
 };
-//# sourceMappingURL=chunk-WDSJ6SVY.js.map
+//# sourceMappingURL=chunk-GXSHLMT4.js.map

package/dist/chunk-HHPFWEJY.js

@@ -0,0 +1,28 @@
+// src/components/feedback/SequenceResolver/SequenceResolver.metrics.ts
+var SEQUENCE_METRICS = {
+  /** Below this width the dialog is the inset bottom sheet, and targets are 44px+. */
+  sheetBreakpoint: "sm",
+  /** The sheet never grows past this share of the viewport; the paper scrolls inside it. */
+  sheetMaxHeightPercent: 95,
+  /** The smallest a control may be below the sheet breakpoint, and the end screen's button everywhere. */
+  touchTarget: 44,
+  /** The intro's "all in sequence" button, at least. */
+  startAllHeight: 48,
+  /** Header icon button: 40px on a pointer, 44px on a phone. */
+  closeSize: { pointer: 40, touch: 44 },
+  /** The drag handle — decoration only, the sheet does not drag. */
+  handle: { width: 40, height: 4 },
+  title: 22,
+  stepLabel: 13,
+  categoryDescription: 13,
+  categoryMinHeight: 56,
+  countBadge: 32,
+  listRadius: 12,
+  doneIcon: 44,
+  doneTitle: 20
+};
+
+export {
+  SEQUENCE_METRICS
+};
+//# sourceMappingURL=chunk-HHPFWEJY.js.map

package/dist/chunk-HHPFWEJY.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/feedback/SequenceResolver/SequenceResolver.metrics.ts"],"sourcesContent":["/**\n * THE RESOLVER'S NUMBERS — the approved prototype's, in px. The web reads\n * them through `rem`/`sxRem` so a density mode scales them (FUT-3671).\n */\nexport const SEQUENCE_METRICS = {\n  /** Below this width the dialog is the inset bottom sheet, and targets are 44px+. */\n  sheetBreakpoint: 'sm',\n  /** The sheet never grows past this share of the viewport; the paper scrolls inside it. */\n  sheetMaxHeightPercent: 95,\n  /** The smallest a control may be below the sheet breakpoint, and the end screen's button everywhere. */\n  touchTarget: 44,\n  /** The intro's \"all in sequence\" button, at least. */\n  startAllHeight: 48,\n  /** Header icon button: 40px on a pointer, 44px on a phone. */\n  closeSize: { pointer: 40, touch: 44 },\n  /** The drag handle — decoration only, the sheet does not drag. */\n  handle: { width: 40, height: 4 },\n  title: 22,\n  stepLabel: 13,\n  categoryDescription: 13,\n  categoryMinHeight: 56,\n  countBadge: 32,\n  listRadius: 12,\n  doneIcon: 44,\n  doneTitle: 20,\n} as const;\n"],"mappings":";AAIO,IAAM,mBAAmB;AAAA;AAAA,EAE9B,iBAAiB;AAAA;AAAA,EAEjB,uBAAuB;AAAA;AAAA,EAEvB,aAAa;AAAA;AAAA,EAEb,gBAAgB;AAAA;AAAA,EAEhB,WAAW,EAAE,SAAS,IAAI,OAAO,GAAG;AAAA;AAAA,EAEpC,QAAQ,EAAE,OAAO,IAAI,QAAQ,EAAE;AAAA,EAC/B,OAAO;AAAA,EACP,WAAW;AAAA,EACX,qBAAqB;AAAA,EACrB,mBAAmB;AAAA,EACnB,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,WAAW;AACb;","names":[]}

package/dist/{chunk-3EIRRLCQ.js → chunk-HTGK7QCX.js}

@@ -15,10 +15,10 @@ import {
 } from "./chunk-NI67M453.js";
 import {
   Icon
-} from "./chunk-YEKPQAOW.js";
+} from "./chunk-GQ2T44BC.js";
 import {
   Button
-} from "./chunk-YOXYSAUI.js";
+} from "./chunk-5USHYSCO.js";
 import {
   BUTTON_SIZES
 } from "./chunk-G2FUZALJ.js";
@@ -139,4 +139,4 @@ export {
   PendingSpinner,
   LearnMore
 };
-//# sourceMappingURL=chunk-3EIRRLCQ.js.map
+//# sourceMappingURL=chunk-HTGK7QCX.js.map

package/dist/{chunk-Y3LK6ZQG.js → chunk-I2KAN3YB.js}

@@ -5,7 +5,7 @@ import {
   GroupLabel,
   SegmentRadios,
   testId
-} from "./chunk-YTDUIU7X.js";
+} from "./chunk-F6LZHF4O.js";
 import {
   withDefaults
 } from "./chunk-HPK33ACY.js";
@@ -96,4 +96,4 @@ RadioGroup.displayName = "RadioGroup";
 export {
   RadioGroup
 };
-//# sourceMappingURL=chunk-Y3LK6ZQG.js.map
+//# sourceMappingURL=chunk-I2KAN3YB.js.map

package/dist/{chunk-M5DBOM7R.js → chunk-ICRVLGWD.js}

@@ -1,6 +1,6 @@
 import {
   fieldHeight
-} from "./chunk-RGVNXES5.js";
+} from "./chunk-QQHZBJMU.js";
 import {
   fieldRadiusPx
 } from "./chunk-GDN2LUTZ.js";
@@ -77,4 +77,4 @@ function FilterTrigger({
 export {
   FilterTrigger
 };
-//# sourceMappingURL=chunk-M5DBOM7R.js.map
+//# sourceMappingURL=chunk-ICRVLGWD.js.map

package/dist/{chunk-FVNY5BNV.js → chunk-IQ2U5MVO.js}

@@ -1,26 +1,26 @@
 import {
   ClearAllControl,
   CloseSearchControl
-} from "./chunk-QLJU7UUI.js";
+} from "./chunk-YH7G44WL.js";
 import {
   MoreFilters
-} from "./chunk-ZAZOBTVS.js";
+} from "./chunk-GSXYXMCV.js";
 import {
   PillControl
-} from "./chunk-IWJTLCTF.js";
+} from "./chunk-VD72JGHA.js";
 import {
   QuickChip
-} from "./chunk-AT6UKTH4.js";
+} from "./chunk-MHFXJRLD.js";
 import {
   isQuickActive
 } from "./chunk-KYUEO2IO.js";
 import {
   CollapsedSearch,
   InlineKeyword
-} from "./chunk-ACBHZG3Z.js";
+} from "./chunk-M74YHHJE.js";
 import {
   RangePill
-} from "./chunk-3O2OJW4O.js";
+} from "./chunk-2QO3BKUQ.js";
 
 // src/components/data-display/DataViews/data-views-inline-bar.tsx
 import Box from "@mui/material/Box/index.js";
@@ -244,4 +244,4 @@ function FilterSlots({
 export {
   InlineFilterControls
 };
-//# sourceMappingURL=chunk-FVNY5BNV.js.map
+//# sourceMappingURL=chunk-IQ2U5MVO.js.map

package/dist/{chunk-LABIUXDM.js → chunk-J7C7FPVO.js}

@@ -7,7 +7,7 @@ import {
 } from "./chunk-Q4JWWTL4.js";
 import {
   Input
-} from "./chunk-RHVJ3L4U.js";
+} from "./chunk-MWPD2BXO.js";
 
 // src/components/form/NumberField/NumberField.tsx
 import React, { useCallback, useId } from "react";
@@ -82,4 +82,4 @@ NumberField.displayName = "NumberField";
 export {
   NumberField
 };
-//# sourceMappingURL=chunk-LABIUXDM.js.map
+//# sourceMappingURL=chunk-J7C7FPVO.js.map

package/dist/{chunk-CYH5QQUP.js → chunk-KHIUYLKY.js}

@@ -3,19 +3,19 @@ import {
 } from "./chunk-QKLSHNOH.js";
 import {
   useDateRangePicker
-} from "./chunk-CWCNLITK.js";
+} from "./chunk-AXZCCX7O.js";
 import {
   DateRangeQuickList
 } from "./chunk-6KKQHJE7.js";
 import {
   DateRangeFields
-} from "./chunk-BLINEMVO.js";
+} from "./chunk-3YLRR4JM.js";
 import {
   toLocalDay
 } from "./chunk-FRAVVI4A.js";
 import {
   Calendar
-} from "./chunk-7JKDB5J5.js";
+} from "./chunk-R53ZOW4B.js";
 
 // src/components/form/DateRangePicker/DateRangePicker.tsx
 import Box from "@mui/material/Box/index.js";
@@ -181,4 +181,4 @@ export {
   DateRangePicker,
   DateRangePicker_default
 };
-//# sourceMappingURL=chunk-CYH5QQUP.js.map
+//# sourceMappingURL=chunk-KHIUYLKY.js.map