@astryxdesign/cli 0.4.6 → 0.4.7-canary.29be96d

package/assets/templates/blocks/components/Dialog/DialogAdaptivePresentation.tsx

@@ -0,0 +1,167 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useState, type ReactNode} from 'react';
+import {BottomSheet} from '@astryxdesign/core/BottomSheet';
+import {Button} from '@astryxdesign/core/Button';
+import {
+  Dialog,
+  DialogHeader,
+  type DialogPurpose,
+} from '@astryxdesign/core/Dialog';
+import {Heading} from '@astryxdesign/core/Heading';
+import {
+  HStack,
+  Layout,
+  LayoutContent,
+  LayoutFooter,
+  VStack,
+} from '@astryxdesign/core/Layout';
+import {Text} from '@astryxdesign/core/Text';
+import {TextArea} from '@astryxdesign/core/TextArea';
+import {TextInput} from '@astryxdesign/core/TextInput';
+import {useMediaQuery} from '@astryxdesign/core/hooks';
+
+const TOUCH_ORIENTED_LG_QUERY =
+  '(max-width: 1024px) and (pointer: coarse) and (hover: none)';
+
+type AdaptivePresentation = 'dialog' | 'fullscreen' | 'bottom-sheet';
+
+type AdaptiveDialogProps = {
+  isOpen: boolean;
+  onOpenChange: (isOpen: boolean) => void;
+  title: string;
+  children: ReactNode;
+  footer?: ReactNode;
+  purpose?: DialogPurpose;
+  width?: number | string;
+  maxHeight?: number | string;
+  touchPresentation?: AdaptivePresentation;
+  presentation?: AdaptivePresentation;
+  bottomSheetHeight?: 'hug' | 'capped' | 'tall' | number | string;
+};
+
+function AdaptiveDialog({
+  isOpen,
+  onOpenChange,
+  title,
+  children,
+  footer,
+  purpose = 'info',
+  width = 480,
+  maxHeight = '75dvh',
+  touchPresentation = 'dialog',
+  presentation,
+  bottomSheetHeight = 'capped',
+}: AdaptiveDialogProps) {
+  const isTouchOrientedLargeOrBelow = useMediaQuery(TOUCH_ORIENTED_LG_QUERY);
+  const resolvedPresentation =
+    presentation ??
+    (isTouchOrientedLargeOrBelow ? touchPresentation : 'dialog');
+
+  if (resolvedPresentation === 'bottom-sheet') {
+    return (
+      <BottomSheet
+        isOpen={isOpen}
+        onOpenChange={onOpenChange}
+        label={title}
+        purpose={purpose}
+        height={bottomSheetHeight}>
+        <VStack gap={4} style={{padding: 'var(--spacing-4)'}}>
+          <Heading level={3}>{title}</Heading>
+          {children}
+          {footer}
+        </VStack>
+      </BottomSheet>
+    );
+  }
+
+  const dialogContent = (
+    <Layout
+      header={<DialogHeader title={title} onOpenChange={onOpenChange} />}
+      content={<LayoutContent>{children}</LayoutContent>}
+      footer={footer ? <LayoutFooter>{footer}</LayoutFooter> : undefined}
+    />
+  );
+
+  return (
+    <Dialog
+      isOpen={isOpen}
+      onOpenChange={onOpenChange}
+      purpose={purpose}
+      width={width}
+      maxHeight={maxHeight}
+      variant={
+        resolvedPresentation === 'fullscreen' ? 'fullscreen' : 'standard'
+      }>
+      {dialogContent}
+    </Dialog>
+  );
+}
+
+export default function DialogAdaptivePresentation() {
+  const [isOpen, setIsOpen] = useState(false);
+  const [name, setName] = useState('Ruby Cheung');
+  const [email, setEmail] = useState('ruby@example.com');
+  const [notes, setNotes] = useState('');
+
+  return (
+    <>
+      <Button label="Edit profile" onClick={() => setIsOpen(true)} />
+      {/*
+        touchPresentation examples:
+        - "dialog" keeps Dialog even in touch-oriented <=lg contexts.
+        - "fullscreen" uses fullscreen Dialog there.
+        - "bottom-sheet" uses BottomSheet there.
+        presentation="dialog" | "fullscreen" | "bottom-sheet" overrides
+        the media query for tests and unusual environments.
+      */}
+      <AdaptiveDialog
+        isOpen={isOpen}
+        onOpenChange={setIsOpen}
+        title="Edit profile"
+        purpose="form"
+        touchPresentation="bottom-sheet"
+        bottomSheetHeight="tall"
+        footer={
+          <HStack gap={2} hAlign="end" wrap="wrap">
+            <Button
+              label="Cancel"
+              variant="secondary"
+              onClick={() => setIsOpen(false)}
+            />
+            <Button
+              label="Save profile"
+              variant="primary"
+              onClick={() => setIsOpen(false)}
+            />
+          </HStack>
+        }>
+        <VStack gap={4}>
+          <Text type="supporting" color="secondary">
+            Dialog remains the default presentation. This example explicitly
+            opts into a Bottom Sheet only at lg and below when the device has a
+            coarse pointer and no hover. Pass the presentation prop to make
+            tests or unusual environments deterministic.
+          </Text>
+          <Text type="supporting" color="secondary">
+            In Bottom Sheet presentation, purpose="form" blocks scrim clicks and
+            swipe dismissal while preserving Escape. Use this opt-in only when
+            that contract is acceptable; keep AlertDialog/destructive
+            confirmations on Dialog unless a product deliberately chooses
+            otherwise.
+          </Text>
+          <TextInput label="Name" value={name} onChange={setName} />
+          <TextInput
+            label="Email"
+            type="email"
+            value={email}
+            onChange={setEmail}
+          />
+          <TextArea label="Notes" rows={6} value={notes} onChange={setNotes} />
+        </VStack>
+      </AdaptiveDialog>
+    </>
+  );
+}

package/assets/templates/blocks/components/Dialog/DialogScrollingContent.tsx

@@ -69,7 +69,7 @@ function Content({onClose}: {onClose: () => void}) {
 
 // Remove isInline for production — dialogs should be modal.
 export default function DialogScrollingContent() {
-  const dialog = useImperativeDialog({maxHeight: '50vh'});
+  const dialog = useImperativeDialog({maxHeight: '50dvh'});
 
   return (
     <>

package/assets/templates/blocks/components/Step/StepContent.doc.mjs

@@ -0,0 +1,14 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('@astryxdesign/cli/authoring').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'Step',
+  name: 'Step — Content Slot',
+  displayName: 'Step — Content Slot',
+  description:
+    'Children passed to a Step render below its description, indented to line up with the label rather than the indicator, and stay outside the clickable label area so buttons inside remain their own targets. In a full flow you gate the slot on the step being active — that is what turns a vertical stepper into an expanding one.',
+  isReady: true,
+  aspectRatio: 4 / 3,
+  componentsUsed: ['Stepper', 'Step', 'TextInput', 'Button'],
+};

package/assets/templates/blocks/components/Step/StepContent.tsx

@@ -0,0 +1,32 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {Stepper, Step} from '@astryxdesign/core/Stepper';
+import {TextInput} from '@astryxdesign/core/TextInput';
+import {Button} from '@astryxdesign/core/Button';
+
+export default function StepContent() {
+  // Anything passed as children renders below the description, indented to line
+  // up with the label rather than the indicator. In a full flow you would gate
+  // this on the step being active; here it is a single Step so the slot is
+  // always shown.
+  return (
+    <div style={{width: 400}}>
+      <Stepper activeStep={1} orientation="vertical">
+        <Step
+          step={1}
+          label="Billing address"
+          description="Used for invoices and tax calculation">
+          <div style={{display: 'flex', flexDirection: 'column', gap: 12}}>
+            <TextInput label="Street" placeholder="1 Hacker Way" value="" />
+            <TextInput label="City" placeholder="Menlo Park" value="" />
+            <div>
+              <Button label="Save address" variant="primary" />
+            </div>
+          </div>
+        </Step>
+      </Stepper>
+    </div>
+  );
+}

package/assets/templates/blocks/components/Step/StepIndicator.doc.mjs

@@ -0,0 +1,14 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('@astryxdesign/cli/authoring').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'Step',
+  name: 'Step — Indicator',
+  displayName: 'Step — Indicator',
+  description:
+    'Everything the indicator prop accepts: the auto default, an always-number badge, a custom ReactNode, and none — each on its own completed Step so the prop is the only difference between them. Every variant occupies the same 16px box, so a step swapping its number for a check as it completes never shifts the label beside it. The last cell shows that a custom node can be live rather than static: a Spinner on a step that is in progress, shaded `inherit` so it picks up the step\u2019s own tint like any other glyph.',
+  isReady: true,
+  aspectRatio: 4 / 3,
+  componentsUsed: ['Stepper', 'Step', 'Icon', 'Spinner', 'Text'],
+};

package/assets/templates/blocks/components/Step/StepIndicator.tsx

@@ -0,0 +1,60 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {Stepper, Step} from '@astryxdesign/core/Stepper';
+import {Text} from '@astryxdesign/core/Text';
+import {Icon} from '@astryxdesign/core/Icon';
+import {Spinner} from '@astryxdesign/core/Spinner';
+
+export default function StepIndicator() {
+  // The first four steps are all completed — same progress, so the indicator
+  // prop is the only difference between them. `auto` is the one that reacts to
+  // progress: a numbered badge until the step is reached, then a check. The
+  // last step is in progress instead, because the node it passes to `indicator`
+  // is a spinner and a spinner only makes sense on work that is running.
+  return (
+    <div style={{display: 'flex', flexWrap: 'wrap', gap: 24}}>
+      <div style={{width: 190}}>
+        <Text type="label">auto (default)</Text>
+        <Stepper activeStep={1} orientation="vertical">
+          <Step step={0} label="Verify email" />
+        </Stepper>
+      </div>
+      <div style={{width: 190}}>
+        <Text type="label">number</Text>
+        <Stepper activeStep={1} orientation="vertical">
+          <Step step={0} label="Verify email" indicator="number" />
+        </Stepper>
+      </div>
+      <div style={{width: 190}}>
+        <Text type="label">Custom node</Text>
+        <Stepper activeStep={1} orientation="vertical">
+          <Step
+            step={0}
+            label="Verify email"
+            indicator={<Icon icon="wrench" size="sm" />}
+          />
+        </Stepper>
+      </div>
+      <div style={{width: 190}}>
+        <Text type="label">none</Text>
+        <Stepper activeStep={1} orientation="vertical">
+          <Step step={0} label="Verify email" indicator="none" />
+        </Stepper>
+      </div>
+      <div style={{width: 190}}>
+        <Text type="label">Spinner (in progress)</Text>
+        <Stepper activeStep={0} orientation="vertical">
+          <Step
+            step={0}
+            label="Verify email"
+            // `inherit` picks up the indicator's own tint, so the spinner is
+            // colored by the step's progress and status like any other glyph.
+            indicator={<Spinner size="md" shade="inherit" />}
+          />
+        </Stepper>
+      </div>
+    </div>
+  );
+}

package/assets/templates/blocks/components/Step/StepShowcase.doc.mjs

@@ -0,0 +1,15 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('@astryxdesign/cli/authoring').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'Step',
+  name: 'Step',
+  displayName: 'Step',
+  description:
+    'A single Step, with every part it can render: the indicator, the label with its optional marker and trailing endContent, and the description beneath. A Step never sets its own completed/current state — it declares its index and derives the rest from the parent Stepper, so one Step in one Stepper is a complete example.',
+  isReady: true,
+  isShowcase: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['Stepper', 'Step', 'Text'],
+};

package/assets/templates/blocks/components/Step/StepShowcase.tsx

@@ -0,0 +1,26 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {Stepper, Step} from '@astryxdesign/core/Stepper';
+import {Text} from '@astryxdesign/core/Text';
+
+export default function StepShowcase() {
+  // One Step, and every part it renders: the indicator, the label with its
+  // optional marker and trailing slot, and the description beneath. A Step is
+  // always wrapped in a Stepper — that is where it reads its progress from —
+  // so a single Step in a single Stepper is the smallest complete example.
+  return (
+    <div style={{width: 380}}>
+      <Stepper activeStep={1} orientation="vertical">
+        <Step
+          step={1}
+          label="Connect a repository"
+          description="Astryx reads your build settings from the default branch"
+          endContent={<Text type="supporting">2 min</Text>}
+          isOptional
+        />
+      </Stepper>
+    </div>
+  );
+}

package/assets/templates/blocks/components/Step/StepStates.doc.mjs

@@ -0,0 +1,14 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('@astryxdesign/cli/authoring').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'Step',
+  name: 'Step — States',
+  displayName: 'Step — States',
+  description:
+    'Every state a single Step can land in, each shown as one Step in its own Stepper. Completed, current, and upcoming are derived by comparing the step index against the parent activeStep, so they are never set directly; isDisabled and status are the two a step declares itself. Status is a separate axis from progress, which is why a completed step can still carry a warning.',
+  isReady: true,
+  aspectRatio: 4 / 3,
+  componentsUsed: ['Stepper', 'Step', 'Text'],
+};

package/assets/templates/blocks/components/Step/StepStates.tsx

@@ -0,0 +1,46 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {Stepper, Step} from '@astryxdesign/core/Stepper';
+import {Text} from '@astryxdesign/core/Text';
+
+export default function StepStates() {
+  // A Step holds no state of its own — it compares its `step` index against the
+  // Stepper's `activeStep`. Each state below is therefore one Step in its own
+  // Stepper, with activeStep placed on one side of it or the other.
+  return (
+    <div style={{display: 'flex', flexWrap: 'wrap', gap: 32}}>
+      <div style={{width: 220}}>
+        <Text type="label">Completed</Text>
+        <Stepper activeStep={1} orientation="vertical">
+          <Step step={0} label="Verify email" />
+        </Stepper>
+      </div>
+      <div style={{width: 220}}>
+        <Text type="label">Current</Text>
+        <Stepper activeStep={0} orientation="vertical">
+          <Step step={0} label="Verify email" />
+        </Stepper>
+      </div>
+      <div style={{width: 220}}>
+        <Text type="label">Upcoming</Text>
+        <Stepper activeStep={0} orientation="vertical">
+          <Step step={1} label="Add a payment method" />
+        </Stepper>
+      </div>
+      <div style={{width: 220}}>
+        <Text type="label">Disabled</Text>
+        <Stepper activeStep={0} orientation="vertical" onStepClick={() => {}}>
+          <Step step={1} label="Add a payment method" isDisabled />
+        </Stepper>
+      </div>
+      <div style={{width: 220}}>
+        <Text type="label">Completed, with a status</Text>
+        <Stepper activeStep={1} orientation="vertical">
+          <Step step={0} label="Verify email" status="warning" />
+        </Stepper>
+      </div>
+    </div>
+  );
+}

package/assets/templates/blocks/components/Stepper/StepperCustomContent.doc.mjs

@@ -0,0 +1,22 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('@astryxdesign/cli/authoring').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'Stepper',
+  name: 'Stepper — Custom Content',
+  displayName: 'Stepper — Custom Content',
+  description:
+    'A vertical stepper where each step owns a slice of the page. The content slot takes any node — form fields, a summary panel, a banner — so a stepper is not limited to multi-step forms. Rendering the slot only for the active step is what makes the flow expand one step at a time.',
+  isReady: true,
+  aspectRatio: 4 / 3,
+  componentsUsed: [
+    'Stepper',
+    'TextInput',
+    'Button',
+    'Text',
+    'Card',
+    'Badge',
+    'Banner',
+  ],
+};

package/assets/templates/blocks/components/Stepper/StepperCustomContent.tsx

@@ -0,0 +1,126 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useState} from 'react';
+import {Stepper, Step} from '@astryxdesign/core/Stepper';
+import {TextInput} from '@astryxdesign/core/TextInput';
+import {Button} from '@astryxdesign/core/Button';
+import {Text} from '@astryxdesign/core/Text';
+import {Card} from '@astryxdesign/core/Card';
+import {Badge} from '@astryxdesign/core/Badge';
+import {Banner} from '@astryxdesign/core/Banner';
+
+export default function StepperCustomContent() {
+  const [active, setActive] = useState(0);
+  // The content slot takes any node, not just form fields — a panel, a summary,
+  // a notice. Gating it on `active` is what makes the flow expand a step at a
+  // time.
+  return (
+    <div style={{width: 680}}>
+      <Stepper
+        activeStep={active}
+        orientation="vertical"
+        onStepClick={setActive}>
+        <Step
+          step={0}
+          label="Project details"
+          description="Name it and point us at the source"
+          indicator="number">
+          {active === 0 && (
+            <div style={{display: 'flex', flexDirection: 'column', gap: 12}}>
+              <div style={{display: 'flex', gap: 12}}>
+                <TextInput
+                  label="Project name"
+                  placeholder="My awesome project"
+                  value=""
+                  width="100%"
+                />
+                <TextInput
+                  label="Repository URL"
+                  placeholder="https://github.com/..."
+                  value=""
+                  width="100%"
+                />
+              </div>
+              <div>
+                <Button
+                  label="Continue"
+                  variant="primary"
+                  onClick={() => setActive(1)}
+                />
+              </div>
+            </div>
+          )}
+        </Step>
+        <Step
+          step={1}
+          label="Review the build"
+          description="What we detected from your default branch"
+          indicator="number">
+          {active === 1 && (
+            <div style={{display: 'flex', flexDirection: 'column', gap: 12}}>
+              <Card variant="muted" padding={3}>
+                <div style={{display: 'flex', flexDirection: 'column', gap: 8}}>
+                  <div
+                    style={{
+                      display: 'flex',
+                      alignItems: 'center',
+                      gap: 8,
+                    }}>
+                    <Text type="label">Next.js 15</Text>
+                    <Badge variant="success" label="Detected" />
+                  </div>
+                  <Text type="supporting">
+                    Build command <code>next build</code> · Output{' '}
+                    <code>.next</code> · Node 20
+                  </Text>
+                </div>
+              </Card>
+              <div style={{display: 'flex', gap: 8}}>
+                <Button
+                  label="Back"
+                  variant="secondary"
+                  onClick={() => setActive(0)}
+                />
+                <Button
+                  label="Looks right"
+                  variant="primary"
+                  onClick={() => setActive(2)}
+                />
+              </div>
+            </div>
+          )}
+        </Step>
+        <Step
+          step={2}
+          label="Deploy"
+          description="Ships to production"
+          indicator="number">
+          {active === 2 && (
+            <div style={{display: 'flex', flexDirection: 'column', gap: 12}}>
+              <Banner
+                status="info"
+                title="First deploy takes a few minutes"
+                description="Later deploys reuse the build cache and finish in under a minute."
+              />
+              <div style={{display: 'flex', gap: 8}}>
+                <Button
+                  label="Back"
+                  variant="secondary"
+                  onClick={() => setActive(1)}
+                />
+                <Button
+                  label="Deploy now"
+                  variant="primary"
+                  onClick={() => setActive(3)}
+                />
+              </div>
+            </div>
+          )}
+        </Step>
+        <Step step={3} label="Live" indicator="number" />
+      </Stepper>
+    </div>
+  );
+}

package/assets/templates/blocks/components/Stepper/StepperIndicatorModes.doc.mjs

@@ -7,7 +7,7 @@ export const doc = {
   name: 'Stepper — Indicator Modes',
   displayName: 'Stepper — Indicator Modes',
   description:
-    'The indicator prop side by side: auto (check when done, ring when current, number ahead), always-number, and a custom icon per step.',
+    'The indicator prop side by side: none (the bar and label carry the progress on their own), auto (check when done, ring when current, number ahead), always-number, and a custom icon per step.',
   isReady: true,
   aspectRatio: 4 / 3,
   componentsUsed: ['Stepper', 'Text', 'Icon'],

package/assets/templates/blocks/components/Stepper/StepperIndicatorModes.tsx

@@ -3,7 +3,7 @@
 'use client';
 
 import {useState} from 'react';
-import {Stepper, Step} from '@astryxdesign/lab';
+import {Stepper, Step} from '@astryxdesign/core/Stepper';
 import {Text} from '@astryxdesign/core/Text';
 import {Icon} from '@astryxdesign/core/Icon';
 
@@ -11,6 +11,18 @@ export default function StepperIndicatorModes() {
   const [active, setActive] = useState(2);
   return (
     <div style={{display: 'flex', gap: 48, flexWrap: 'wrap'}}>
+      <div style={{maxWidth: 220}}>
+        <Text type="label">None</Text>
+        <Stepper
+          activeStep={active}
+          orientation="vertical"
+          onStepClick={setActive}>
+          <Step step={0} label="Account" indicator="none" />
+          <Step step={1} label="Profile" indicator="none" />
+          <Step step={2} label="Settings" indicator="none" />
+          <Step step={3} label="Review" indicator="none" />
+        </Stepper>
+      </div>
       <div style={{maxWidth: 220}}>
         <Text type="label">Auto</Text>
         <Stepper
@@ -44,22 +56,22 @@ export default function StepperIndicatorModes() {
           <Step
             step={0}
             label="Account"
-            icon={<Icon icon="info" size="sm" />}
+            indicator={<Icon icon="info" size="sm" />}
           />
           <Step
             step={1}
             label="Profile"
-            icon={<Icon icon="search" size="sm" />}
+            indicator={<Icon icon="search" size="sm" />}
           />
           <Step
             step={2}
             label="Settings"
-            icon={<Icon icon="wrench" size="sm" />}
+            indicator={<Icon icon="wrench" size="sm" />}
           />
           <Step
             step={3}
             label="Review"
-            icon={<Icon icon="check" size="sm" />}
+            indicator={<Icon icon="check" size="sm" />}
           />
         </Stepper>
       </div>

package/assets/templates/blocks/components/Stepper/StepperOnTrackHorizontal.doc.mjs

@@ -0,0 +1,14 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('@astryxdesign/cli/authoring').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'Stepper',
+  name: 'Stepper — On-Track Horizontal',
+  displayName: 'Stepper — On-Track Horizontal',
+  description:
+    'The on-track layout in horizontal orientation: instead of sitting beside the label, each indicator is slotted into the connector itself, so the numbered nodes read as beads on one continuous line. Labels center under their node.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['Stepper'],
+};

package/assets/templates/blocks/components/Stepper/StepperOnTrackHorizontal.tsx

@@ -0,0 +1,25 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useState} from 'react';
+import {Stepper, Step} from '@astryxdesign/core/Stepper';
+
+export default function StepperOnTrackHorizontal() {
+  const [active, setActive] = useState(2);
+  return (
+    <div style={{width: 560}}>
+      <Stepper
+        activeStep={active}
+        orientation="horizontal"
+        indicatorPosition="on-track"
+        onStepClick={setActive}>
+        <Step step={0} label="Workspace" indicator="number" />
+        <Step step={1} label="Team" indicator="number" />
+        <Step step={2} label="Integrations" indicator="number" />
+        <Step step={3} label="Import" indicator="number" />
+        <Step step={4} label="Launch" indicator="number" />
+      </Stepper>
+    </div>
+  );
+}