@12-apps/ui 6.77.1 → 6.78.0

package/dist/user-avatar.js

@@ -1,7 +1,7 @@
 import {
   UserAvatar,
   UserMenu
-} from "./chunk-3FDSXSEP.js";
+} from "./chunk-OE3SQOZV.js";
 import "./chunk-UDQSIRAP.js";
 import "./chunk-KARMRTTM.js";
 import "./chunk-7XSCEHGA.js";
@@ -15,17 +15,17 @@ import "./chunk-FKUYRQSP.js";
 import "./chunk-PLB6WWXW.js";
 import "./chunk-HDBP55R3.js";
 import "./chunk-BA4RHQ3B.js";
-import "./chunk-364NH2NY.js";
-import "./chunk-PPEHBI5O.js";
+import "./chunk-5USHYSCO.js";
+import "./chunk-KXTNTDRD.js";
 import "./chunk-G2FUZALJ.js";
 import "./chunk-TAMIZE4Q.js";
 import "./chunk-AJBRO76D.js";
 import "./chunk-36VXZCJT.js";
 import "./chunk-TYJR4GOF.js";
-import "./chunk-RGVNXES5.js";
-import "./chunk-GDN2LUTZ.js";
+import "./chunk-QQHZBJMU.js";
 import "./chunk-7ZADLRLP.js";
 import "./chunk-3NGE6NE6.js";
+import "./chunk-GDN2LUTZ.js";
 import "./chunk-2FBGDSGC.js";
 import "./chunk-VBP46YP4.js";
 import "./chunk-44BD7SFH.js";

package/dist/utility/WorkflowStep.js

@@ -6,17 +6,17 @@ import "../chunk-VNVV6Y2X.js";
 import "../chunk-SV6IQ2YO.js";
 import "../chunk-XKSA4L2X.js";
 import "../chunk-B7ZHEOQQ.js";
-import "../chunk-BRHRK7BK.js";
+import "../chunk-ENRB6PIN.js";
 import "../chunk-25MSGLNU.js";
 import "../chunk-GAXHYRX6.js";
 import "../chunk-NP6SHLQ3.js";
 import "../chunk-TZ23DNKY.js";
 import "../chunk-7ZPUN7TV.js";
 import "../chunk-PT6TCWIW.js";
-import "../chunk-RGVNXES5.js";
-import "../chunk-GDN2LUTZ.js";
+import "../chunk-QQHZBJMU.js";
 import "../chunk-7ZADLRLP.js";
 import "../chunk-3NGE6NE6.js";
+import "../chunk-GDN2LUTZ.js";
 import "../chunk-2FBGDSGC.js";
 import "../chunk-VBP46YP4.js";
 import "../chunk-44BD7SFH.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@12-apps/ui",
-  "version": "6.77.1",
+  "version": "6.78.0",
   "license": "MIT",
   "packageManager": "pnpm@10.34.5",
   "type": "module",
@@ -320,6 +320,10 @@
       "types": "./dist/types/components/feedback/Sonner/index.d.ts",
       "default": "./dist/feedback/Sonner.js"
     },
+    "./feedback/SequenceResolver": {
+      "types": "./dist/types/components/feedback/SequenceResolver/index.d.ts",
+      "default": "./dist/feedback/SequenceResolver.js"
+    },
     "./feedback/StackedModal": {
       "types": "./dist/types/components/feedback/StackedModal/index.d.ts",
       "default": "./dist/feedback/StackedModal.js"

package/src/components/feedback/SequenceResolver/SequenceResolver.md

@@ -0,0 +1,136 @@
+# SequenceResolver
+
+Resolve a **queue of problems one at a time** in one dialog whose body is replaced step by
+step. The component owns the run — which step is on screen, what was answered or skipped,
+where Back returns to, when the end screen shows — and nothing about the domain: every
+step body, every word and every server call is the host's (FUT-3671).
+
+```
+┌──────────────────────────────────────────────┐
+│ ‹ Back   Problem 3 of 13 · Purchase       ×  │  header: back (once a previous step exists), label, close
+│ ▓▓▓▓▓▓▓░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ │  progress: steps left behind / total
+│ Red Bull 250ml                               │  ┐
+│ Register the purchase                        │  │ the host's step (renderStep)
+│ No stock. Last purchase: 24 u for $ 163.20   │  ┘
+│ It was a stock count                         │  tertiary (text button, optional)
+│ ──────────────────────────────────────────── │
+│                    [Not bought yet] [Save]   │  footer: secondary (skip by default) + primary
+└──────────────────────────────────────────────┘
+```
+
+**When to use it.** A list of things that each need a decision (a stock screen's "N problems
+to solve", a product's subproducts to restock), resolved in order, where Back must undo the
+previous answer. **Not** `StackedModal` — that stacks nested dialogs, and thirteen problems
+would be thirteen layers with a back button that closes a layer instead of undoing an
+answer. **Not** `Stepper` — that shows a known, short list of named steps; this queue is
+data-sized and shrinks while you go.
+
+## Surfaces
+
+- **≥ 600px (`sm`)**: a centred `Dialog` (`size="sm"`), capped by the viewport.
+- **Either way the body is the only scroll region**: the handle, header and progress stay
+  put while a long step scrolls under them, so it is never cut off and Back/close never
+  scroll away.
+- **< 600px**: the `Dialog` inset `bottom-sheet` variant, at most 95% of the dynamic
+  viewport, scrolling inside; a drag handle on top is decoration only (the sheet does not
+  drag). Every header and footer target is at least 44px tall there.
+
+## Props
+
+| Prop | Type | Description |
+|---|---|---|
+| `open` | `boolean` | Shows the resolver. Every opening — with an intro or without — starts a fresh run. |
+| `onClose` | `(summary) => void` | Close button, Esc and the end screen's button. Gets `{ resolved, skipped, total, alsoResolved }`; a close toast counts `resolved + alsoResolved` (and shows only when that is above 0). Clicking the veil does nothing (as approved). |
+| `intro` | `SequenceIntro?` | While given, the intro shows instead of the run: `title`, `description`, `categories` (`label`, `description`, `count`, `onPick`), `startAllLabel`, `onStartAll`. The host drops it and sets `queue` in the same update as a pick. |
+| `queue` | `readonly I[]` (`I extends { key; kindLabel }`) | The problems, in order. Live data: it may shrink (siblings answered together) or grow mid-run. |
+| `renderStep` | `(item, api) => SequenceStep` | The current step: `content`, `primary?`, `secondary?` (default: skip with `labels.skip`; `false` removes it), `tertiary?`, `footer?` (`'end'` default — right-aligned over a hairline; `'split'` — two equal columns, no hairline; on a phone the actions always share the row without a hairline). |
+| `onBack` | `(item, result) => Promise<void> \| void` | The host's server inverse, awaited before Back shows the previous step again. Called only when that step was RESOLVED. |
+| `canGoBack` | `boolean` (default `true`) | Offer Back at all. It shows only once a previous step exists — on steps and on the end screen, never on the intro. |
+| `done` | `SequenceDone \| (summary) => SequenceDone` | The end screen: `title`, `description?`, `confirmLabel`. |
+| `labels` | `SequenceResolverLabels` | Every chrome word: `back`, `backAccessible?`, `close`, `skip`, `step(position, total, item)`, `introStep`, `doneStep`, `progress`, `failed`. **Required — the package ships no copy.** |
+| `dataTestId` | `string` (default `sequence-resolver`) | Parts: `-back`, `-close`, `-step-label`, `-progress`, `-handle`, `-category-<n>`, `-start-all`, `-primary`, `-secondary`, `-tertiary`, `-footer`, `-error`, `-done`, `-done-confirm`. |
+
+### The step API
+
+| `api.` | |
+|---|---|
+| `resolve(result \| promise, { alsoResolved? })` | Answer and move on. `alsoResolved` counts OTHER problems this answer resolved too ("apply to every sibling") for the close summary; Back over the step takes them off again. Given the PROMISE of the host's write, the step stays on screen and `busy` until it settles (even if the host's refetch drops the entry first); a rejection keeps it and shows the rejection's message. |
+| `skip()` | Leave it unanswered and move on. |
+| `back()` | Same as the header's Back. |
+| `busy` | True while a `resolve` promise or an `onBack` is pending. The footer, tertiary and Back are disabled by the component; disable the step's own answers with it. |
+| `titleProps` | **Spread on the step's title** (the item's name). It names the dialog and takes focus on every advance. |
+
+## Behaviour
+
+- **Index.** The run is not an index into `queue`. Visited steps are kept in visit order,
+  the steps ahead in queue order. A new `queue` drops the steps ahead it no longer has
+  (resolved elsewhere — "apply to every sibling") and appends entries it has not seen; the
+  total follows. The run never goes past the end: with nothing ahead the end screen shows.
+- **An empty queue at the start shows the end screen.** Do not open the resolver (past the
+  intro) before the problems have loaded.
+- **Back** pops the last visited step. Over a resolved step it awaits `onBack(item, result)`
+  first; over a skipped one it returns at once. A rejected `onBack` keeps the current step
+  and shows the message (`labels.failed` when the rejection has none). Every step Back
+  returned to is held on screen while the host's refetch has not put it back yet — two Backs
+  before one refetch hold both — and is released once the queue has it again.
+- **`onBack` receives the item as it was when the step was answered** (with that answer's
+  result), not a fresher copy from a later queue.
+- **The close summary counts what has settled.** An answer whose write is still pending
+  when the reader closes is not in `resolved`.
+- **An error belongs to its step**: once the run moves to another step (an answer, a skip,
+  or a queue change), it is gone.
+- **Busy** blocks every verb: a second tap, or a skip during a pending write, is ignored.
+- **Focus** moves to the screen's title on open and on every advance or return; Tab is
+  trapped in the dialog; Esc closes (a popup inside a step that handles its own Esc keeps it).
+- **Labelling.** `role="dialog"`, `aria-modal`, `aria-labelledby` = the intro title, the
+  step title (`api.titleProps`) or the end title. The progress bar is named by
+  `labels.progress`.
+
+## Writing a step
+
+The pattern the owner approved — **the item's name first** (large), the question second, the
+facts third. Footer: the secondary is "Skip for now" (or a step-specific word), the primary
+is the step's verb; two actions at most, plus at most ONE tertiary, which sits as a text
+button above the footer.
+
+```tsx
+<SequenceResolver<Problem, Answer>
+  open={open}
+  onClose={(summary) => { setOpen(false); toastResolved(summary); }}
+  intro={showIntro ? intro : undefined}
+  queue={problems}
+  renderStep={(item, api) => stepFor(item, api)}
+  onBack={(item, answer) => api.undo(answer.undoId)}
+  done={(s) => ({
+    title: s.resolved === s.total ? copy.allSolved : copy.someSolved(s.resolved, s.total),
+    description: copy.doneHint,
+    confirmLabel: copy.finish,
+  })}
+  labels={copy.resolver}
+/>
+```
+
+### Four step kinds, as a stock screen plugs them in
+
+| Kind (`kindLabel`) | `content` | `primary` | `secondary` | `tertiary` / `footer` |
+|---|---|---|---|---|
+| **Limits** — no minimum/maximum | name; "How much stays on display?"; facts; min/max steppers (`NumberField`); "Apply to every subproduct of X (N)" checkbox | "Save limits" → `api.resolve(saveLimits(...))`; with the checkbox the host's refetch drops the siblings' steps, and `{ alsoResolved: N }` counts them | skip | `footer: 'split'` |
+| **Purchase** — out of stock | name; "Register purchase"; last purchase; quantity / total paid (`NumberField`), supplier (`CreatableSelect`), destination; "Also put N on display" | "Register and display N" → `api.resolve(registerPurchase(...))` | `{ label: 'Not bought yet', onClick: api.skip }` | `footer: 'split'` |
+| **Restock** — display below its rule | name; "How many to take?"; total / displayed / stored; the 0→max bar; − / + | "Take N" → `api.resolve(restock(...))` | skip | `footer: 'end'` |
+| **Unexplained loss** — a write-off with no reason | name; "Why did these N leave?"; quick reasons + "Other reason" (each answers with `api.resolve`, disabled while `api.busy`); "Different reasons? Split the N" | — (the reason buttons answer); while splitting: "Save N reasons" | skip; while splitting: `{ label: 'One reason only', ... }` | "It was a stock count, not a loss" |
+
+Each `resolve` returns what `onBack` needs to undo it (an undo id from the server), so Back
+is one call to the host's inverse.
+
+## Accessibility
+
+- Dialog role, labelled title, focus trap (MUI's, via `Dialog`), Esc to close.
+- Focus to the title on every screen change, so a screen reader announces the new problem.
+- 44px+ targets below 600px (`lg` buttons, a 44px close).
+- Errors are an assertive `Alert`; `aria-busy` marks the step while a write is pending.
+
+## Related
+
+- `Dialog` — the surface (default and inset `bottom-sheet` variants).
+- `Progress` — the bar.
+- `StackedModal`, `Stepper` — see "When to use it".

package/src/components/feedback/SequenceResolver/SequenceResolver.metrics.ts

@@ -0,0 +1,26 @@
+/**
+ * THE RESOLVER'S NUMBERS — the approved prototype's, in px. The web reads
+ * them through `rem`/`sxRem` so a density mode scales them (FUT-3671).
+ */
+export const 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,
+} as const;

package/src/components/feedback/SequenceResolver/SequenceResolver.parts.tsx

@@ -0,0 +1,307 @@
+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 React, { useEffect, useRef } from 'react';
+
+import { Alert } from '../../data-display/Alert';
+import { Progress } from '../../data-display/Progress';
+import { Button } from '../../form/Button';
+import {
+  actionSx,
+  backButtonSx,
+  categoryDescriptionSx,
+  categoryRowSx,
+  categoryTextSx,
+  closeButtonSx,
+  countBadgeSx,
+  doneConfirmSx,
+  doneIconSx,
+  doneSx,
+  doneTitleSx,
+  footerSx,
+  handleSx,
+  headerStartSx,
+  headerSx,
+  introListSx,
+  stepLabelSx,
+  startAllSx,
+  tertiarySx,
+  titleSx,
+} from './SequenceResolver.styles';
+import type { SequenceAction, SequenceDone, SequenceIntro, SequenceStep } from './SequenceResolver.types';
+
+interface HeaderProps {
+  touch: boolean;
+  label: string;
+  /** Absent: no back button (intro, first step, or the host turned it off). */
+  back?: { label: string; accessible?: string; onClick: () => void; disabled: boolean };
+  closeLabel: string;
+  onClose: () => void;
+  progress: number;
+  progressLabel: string;
+  testId: string;
+}
+
+/** The drag handle (phone), the header row and the progress bar. */
+export function SequenceHeader(props: HeaderProps): React.JSX.Element {
+  const { touch, label, back, closeLabel, onClose, progress, progressLabel, testId } = props;
+  return (
+    <>
+      {touch ? <Box aria-hidden sx={handleSx} data-testid={`${testId}-handle`} /> : null}
+      <Box sx={headerSx}>
+        <Box sx={headerStartSx}>
+          {back ? (
+            <Button
+              variant="text"
+              color="primary"
+              size="md"
+              icon={<ChevronLeftIcon />}
+              aria-label={back.accessible}
+              onClick={back.onClick}
+              disabled={back.disabled}
+              sx={backButtonSx(touch)}
+              dataTestId={`${testId}-back`}
+            >
+              {back.label}
+            </Button>
+          ) : null}
+          <Typography component="span" sx={stepLabelSx} data-testid={`${testId}-step-label`}>
+            {label}
+          </Typography>
+        </Box>
+        <IconButton aria-label={closeLabel} onClick={onClose} sx={closeButtonSx(touch)} data-testid={`${testId}-close`}>
+          <CloseIcon />
+        </IconButton>
+      </Box>
+      <Progress
+        variant="linear"
+        size="md"
+        color="warning"
+        value={progress}
+        aria-label={progressLabel}
+        dataTestId={`${testId}-progress`}
+      />
+    </>
+  );
+}
+
+/**
+ * Moves focus to `target` (else `fallback`) whenever `screenKey` changes — and
+ * on mount, which happens inside the dialog's portal, before MUI's focus trap
+ * looks: finding focus already inside, the trap and `focusDialogOnEntered`
+ * both leave it there.
+ */
+export function useFocusOnScreen(
+  screenKey: string,
+  target: React.RefObject<HTMLElement | null>,
+  fallback: React.RefObject<HTMLElement | null>,
+): void {
+  useEffect(() => {
+    (target.current ?? fallback.current)?.focus();
+  }, [screenKey, target, fallback]);
+}
+
+/**
+ * A button that disables itself under the pointer drops focus to the page
+ * behind the dialog. While busy, focus that fell out lands on the step body
+ * (`aria-busy`) instead, so a screen reader stays in the dialog.
+ */
+function useKeepFocusWhileBusy(busy: boolean, body: React.RefObject<HTMLElement | null>): void {
+  useEffect(() => {
+    if (!busy) return undefined;
+    const rescue = (): void => {
+      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]);
+}
+
+interface IntroProps {
+  intro: SequenceIntro;
+  titleId: string;
+  testId: string;
+  screenKey: string;
+}
+
+/** The kinds with their counts, and "resolve them all". */
+export function SequenceIntroBody({ intro, titleId, testId, screenKey }: IntroProps): React.JSX.Element {
+  const titleRef = useRef<HTMLHeadingElement | null>(null);
+  useFocusOnScreen(screenKey, titleRef, titleRef);
+  const last = intro.categories.length - 1;
+  return (
+    <>
+      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.5 }}>
+        <Typography component="h2" id={titleId} tabIndex={-1} ref={titleRef} sx={titleSx}>
+          {intro.title}
+        </Typography>
+        {intro.description ? (
+          <Typography variant="body2" color="text.secondary">
+            {intro.description}
+          </Typography>
+        ) : null}
+      </Box>
+      <Box component="ul" sx={introListSx}>
+        {intro.categories.map((category, index) => (
+          <li key={`${index}-${category.label}`}>
+            <ButtonBase
+              onClick={category.onPick}
+              sx={categoryRowSx(index === last)}
+              data-testid={`${testId}-category-${index}`}
+            >
+              <Box component="span" sx={countBadgeSx}>
+                {category.count}
+              </Box>
+              <Box component="span" sx={categoryTextSx}>
+                <Typography component="span" variant="body2" fontWeight={500}>
+                  {category.label}
+                </Typography>
+                {category.description ? (
+                  <Typography component="span" sx={categoryDescriptionSx}>
+                    {category.description}
+                  </Typography>
+                ) : null}
+              </Box>
+              <ChevronRightIcon aria-hidden sx={{ color: 'text.secondary' }} />
+            </ButtonBase>
+          </li>
+        ))}
+      </Box>
+      <Button
+        variant="solid"
+        color="primary"
+        size="lg"
+        fullWidth
+        onClick={intro.onStartAll}
+        dataTestId={`${testId}-start-all`}
+        sx={startAllSx}
+      >
+        {intro.startAllLabel}
+      </Button>
+    </>
+  );
+}
+
+interface StepProps {
+  step: SequenceStep;
+  /** The default secondary: skip. */
+  skip: SequenceAction;
+  busy: boolean;
+  error: string | null;
+  touch: boolean;
+  testId: string;
+  screenKey: string;
+  titleRef: React.RefObject<HTMLElement | null>;
+}
+
+function ActionButton({
+  action,
+  busy,
+  touch,
+  variant,
+  testId,
+}: {
+  action: SequenceAction;
+  busy: boolean;
+  touch: boolean;
+  variant: 'solid' | 'outline' | 'text';
+  testId: string;
+}): React.JSX.Element {
+  return (
+    <Button
+      variant={variant}
+      color={variant === 'outline' ? 'neutral' : 'primary'}
+      size="md"
+      onClick={action.onClick}
+      disabled={busy || action.disabled}
+      dataTestId={testId}
+      sx={variant === 'text' ? tertiarySx(touch) : actionSx(touch)}
+    >
+      {action.label}
+    </Button>
+  );
+}
+
+/** The host's body, its error, the tertiary text button and the footer. */
+export function SequenceStepBody(props: StepProps): React.JSX.Element {
+  const { step, skip, busy, error, touch, testId, screenKey, titleRef } = props;
+  const bodyRef = useRef<HTMLDivElement | null>(null);
+  useFocusOnScreen(screenKey, titleRef, bodyRef);
+  useKeepFocusWhileBusy(busy, bodyRef);
+  const secondary = step.secondary === false ? undefined : (step.secondary ?? skip);
+  const hasFooter = Boolean(secondary || step.primary);
+  return (
+    <>
+      <Box ref={bodyRef} tabIndex={-1} aria-busy={busy} sx={{ outline: 'none', minWidth: 0 }}>
+        {step.content}
+      </Box>
+      {error ? (
+        <Alert variant="danger" announce="assertive" description={error} dataTestId={`${testId}-error`} />
+      ) : null}
+      {step.tertiary ? (
+        <ActionButton action={step.tertiary} busy={busy} touch={touch} variant="text" testId={`${testId}-tertiary`} />
+      ) : null}
+      {hasFooter ? (
+        <Box sx={footerSx(touch, step.footer ?? 'end')} data-testid={`${testId}-footer`}>
+          {secondary ? (
+            <ActionButton action={secondary} busy={busy} touch={touch} variant="outline" testId={`${testId}-secondary`} />
+          ) : null}
+          {step.primary ? (
+            <ActionButton action={step.primary} busy={busy} touch={touch} variant="solid" testId={`${testId}-primary`} />
+          ) : null}
+        </Box>
+      ) : null}
+    </>
+  );
+}
+
+interface DoneProps {
+  done: SequenceDone;
+  titleId: string;
+  error: string | null;
+  touch: boolean;
+  onConfirm: () => void;
+  testId: string;
+  screenKey: string;
+}
+
+/** The end screen: a check, the host's title and sentence, one button that closes. */
+export function SequenceDoneBody({ done, titleId, error, touch, onConfirm, testId, screenKey }: DoneProps): React.JSX.Element {
+  const titleRef = useRef<HTMLHeadingElement | null>(null);
+  useFocusOnScreen(screenKey, titleRef, titleRef);
+  return (
+    <Box sx={doneSx} data-testid={`${testId}-done`}>
+      <CheckCircleOutlineIcon aria-hidden sx={doneIconSx} />
+      <Typography component="h2" id={titleId} tabIndex={-1} ref={titleRef} sx={doneTitleSx}>
+        {done.title}
+      </Typography>
+      {done.description ? (
+        <Typography variant="body2" color="text.secondary">
+          {done.description}
+        </Typography>
+      ) : null}
+      {error ? (
+        <Alert variant="danger" announce="assertive" description={error} dataTestId={`${testId}-error`} />
+      ) : null}
+      <Button
+        variant="solid"
+        color="primary"
+        size="md"
+        fullWidth={touch}
+        onClick={onConfirm}
+        dataTestId={`${testId}-done-confirm`}
+        sx={doneConfirmSx()}
+      >
+        {done.confirmLabel}
+      </Button>
+    </Box>
+  );
+}