@crewlethq/ui 0.49.1 → 0.51.0

package/dist/Stepper-QEJI5RGX.css

@@ -0,0 +1,355 @@
+/*
+ * The stepper: where a sequence has got to (Stepper.tsx).
+ *
+ * THE APPROVED DESIGN'S STEP ROW. Each step is a 20px pill inside the default
+ * hairline, the 11px step at the medium weight, 8px inside each end and 5px
+ * between a mark and the word; two pills are joined by a 10px rule in the
+ * strong hairline's colour with 6px either side of it. A finished step is the
+ * secondary ink behind a check, the current step its tone's soft tint under
+ * its ink behind its dot, and a step still to come the tertiary ink.
+ *
+ * EVERY INK IS A MEASURED PAIR. The secondary and tertiary steps are held to
+ * 4.5:1 on every opaque rung, and each tone's ink to 4.5:1 on its own soft
+ * tint over every rung, by the palette suite in @crewlethq/tokens; the pill
+ * draws nothing else. The current pill is the design's `work-soft` under
+ * `work-ink` in the default tone, and a Tag's colours in every tone, which is
+ * what a chip naming a state is in this kit.
+ */
+
+.crewlet-stepper {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  /* The design's 6px between a pill and the rule beside it: a step and a half. */
+  gap: calc(var(--spacing-1) * 1.5);
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.crewlet-stepper__step {
+  display: inline-flex;
+  align-items: center;
+  gap: calc(var(--spacing-1) * 1.5);
+  min-width: 0;
+}
+
+/*
+ * THE RULE BETWEEN TWO STEPS is drawn by the second of them, so a sequence of
+ * one draws none and nothing trails the last. A pseudo-element, because it is
+ * furniture: it carries nothing a reader has to be told, and the list already
+ * says the steps are in order. 10px by a hairline, the measure of this one
+ * mark, and fixed at every density as a hairline is.
+ */
+.crewlet-stepper__step + .crewlet-stepper__step::before {
+  content: '';
+  flex: none;
+  width: 10px;
+  height: 1px;
+  background: var(--color-border-strong);
+}
+
+.crewlet-stepper__chip {
+  display: inline-flex;
+  align-items: center;
+  /* The design's 5px between the check or the dot and the word. */
+  gap: calc(var(--spacing-1) * 1.25);
+  box-sizing: border-box;
+  /* The design's 20px pill, which follows the density with every other step
+     height in the kit. It labels and takes no press, so the 24px target floor
+     is not its to clear. */
+  height: calc(20px * var(--density, 1));
+  max-width: 100%;
+  padding: 0 var(--spacing-2);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-pill);
+  color: var(--color-text-tertiary);
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-2xs);
+  font-weight: var(--font-weight-medium);
+  line-height: 1;
+  white-space: nowrap;
+}
+
+.crewlet-stepper__label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.crewlet-stepper__check {
+  flex: none;
+}
+
+.crewlet-stepper__step--done > .crewlet-stepper__chip {
+  color: var(--color-text-secondary);
+}
+
+/*
+ * THE CURRENT STEP, in its tone: the pill in a row, the mark in a column. The
+ * hairline goes transparent rather than away, so the pill keeps its box and
+ * the row does not move by a pixel as the current step advances along it, and
+ * so forced-colors mode, which draws a transparent border in the system's own
+ * colour, still outlines it.
+ */
+.crewlet-stepper--info .crewlet-stepper__step--current > .crewlet-stepper__chip,
+.crewlet-stepper--info .crewlet-stepper__step--current .crewlet-stepper__mark {
+  border-color: transparent;
+  background: var(--color-feedback-info-soft);
+  color: var(--color-feedback-info-ink);
+}
+
+.crewlet-stepper--success .crewlet-stepper__step--current > .crewlet-stepper__chip,
+.crewlet-stepper--success .crewlet-stepper__step--current .crewlet-stepper__mark {
+  border-color: transparent;
+  background: var(--color-feedback-success-soft);
+  color: var(--color-feedback-success-ink);
+}
+
+.crewlet-stepper--warning .crewlet-stepper__step--current > .crewlet-stepper__chip,
+.crewlet-stepper--warning .crewlet-stepper__step--current .crewlet-stepper__mark {
+  border-color: transparent;
+  background: var(--color-feedback-warning-soft);
+  color: var(--color-feedback-warning-ink);
+}
+
+.crewlet-stepper--danger .crewlet-stepper__step--current > .crewlet-stepper__chip,
+.crewlet-stepper--danger .crewlet-stepper__step--current .crewlet-stepper__mark {
+  border-color: transparent;
+  background: var(--color-feedback-danger-soft);
+  color: var(--color-feedback-danger-ink);
+}
+
+.crewlet-stepper--brand .crewlet-stepper__step--current > .crewlet-stepper__chip,
+.crewlet-stepper--brand .crewlet-stepper__step--current .crewlet-stepper__mark {
+  border-color: transparent;
+  background: var(--color-brand-accent-soft);
+  color: var(--color-brand-accent-ink);
+}
+
+/*
+ * A STEP THAT NEEDS ATTENTION is the warning tint under the warning ink, the
+ * pair the palette suite holds to 4.5:1 over every rung, with the warning
+ * glyph: the pill of a step that is not current, and the mark of any step in
+ * a column. A CURRENT pill keeps its tone, so the row still says which step
+ * the reader is on, and carries the glyph in that tone's ink.
+ */
+.crewlet-stepper .crewlet-stepper__step--attention:not(.crewlet-stepper__step--current) > .crewlet-stepper__chip,
+.crewlet-stepper .crewlet-stepper__step--attention .crewlet-stepper__mark {
+  border-color: transparent;
+  background: var(--color-feedback-warning-soft);
+  color: var(--color-feedback-warning-ink);
+}
+
+.crewlet-stepper__warning {
+  flex: none;
+}
+
+/*
+ * INSIDE THE PILL THE DOT IS THE PILL'S OWN INK, as a Tag's is, and for the
+ * Tag's reason: StatusDot paints the fill step, measured as a mark on the
+ * opaque rungs, and here it stands on the tone's soft tint instead, where
+ * nothing measures it. The ink is the step that IS measured on that tint, at
+ * 4.5:1, and the colour of the word beside it. A pulsing dot keeps
+ * StatusDot's halo, the same soft step drawn once more over the pill, which
+ * stands dE 3.92 off it at the least (the light warning pill on the frame).
+ *
+ * Two classes deep, so it beats StatusDot's own tone rule whichever order the
+ * bundle writes the two files in.
+ */
+.crewlet-stepper .crewlet-stepper__dot {
+  background: currentColor;
+}
+
+/*
+ * FORCED COLORS repaints every background to Canvas, which takes the current
+ * step's tint and its dot, so the one step the row is about would read like
+ * any other. The current pill is drawn as the system draws a selection,
+ * HighlightText on Highlight, with its dot in the same ink, and the rule
+ * between two steps in GrayText; the chips' hairlines are borders, which the
+ * mode keeps in its own colour.
+ *
+ * THE CURRENT PILL OPTS OUT OF THE ADJUSTMENT, which is safe only because
+ * every colour it draws in that mode is a system colour. Left to it, Chromium
+ * paints a Canvas backplate behind every run of text, and HighlightText is
+ * written for Highlight, not for Canvas: in a dark high-contrast theme the
+ * step's words drew black on black (measured in Chromium 153 with the mode
+ * emulated). Opting out also keeps shadows, so the pulsing dot's halo, which
+ * is the tone's soft tint and no system colour, is held still inside it.
+ */
+/*
+ * A STEP THAT CAN BE PICKED is a button with no look of its own: the pill or
+ * the row it carries draws it, and a hover lays the kit's hover overlay over
+ * a step at rest. The current step keeps its tint under the pointer, since a
+ * tone rule weighs more than the hover. The ring sits inside the step's own
+ * box, over the pill's hairline rather than a second line beside it.
+ */
+.crewlet-stepper__target {
+  appearance: none;
+  margin: 0;
+  background: transparent;
+  font: inherit;
+  text-align: start;
+  cursor: pointer;
+}
+
+.crewlet-stepper__chip.crewlet-stepper__target {
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-2xs);
+  font-weight: var(--font-weight-medium);
+  line-height: 1;
+}
+
+.crewlet-stepper__target:hover {
+  background: var(--color-surface-hover);
+}
+
+.crewlet-stepper__target:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+/*
+ * THE COLUMN, a setup wizard's rail. Each step is a row: a 20px mark (the
+ * check, the dot, the warning glyph, or the step's number for one still to
+ * come) and beside it the label, with the description and the status words
+ * under it. A hairline in the strong hairline's colour joins one mark to the
+ * next, 4px clear of each, drawn by the step it leaves so nothing trails the
+ * last. The mark is the pills' 20px, following the density as they do, and
+ * the label's line is the mark's height so the two stand level. The row's words follow the same three inks as the pills: the current
+ * step primary and medium, a finished one secondary, the rest tertiary.
+ */
+.crewlet-stepper--vertical {
+  flex-direction: column;
+  flex-wrap: nowrap;
+  align-items: stretch;
+  gap: 0;
+}
+
+.crewlet-stepper--vertical .crewlet-stepper__step {
+  position: relative;
+  display: block;
+}
+
+.crewlet-stepper--vertical .crewlet-stepper__step + .crewlet-stepper__step::before {
+  content: none;
+}
+
+.crewlet-stepper--vertical .crewlet-stepper__step:not(:last-child)::after {
+  content: '';
+  position: absolute;
+  top: calc(var(--spacing-2) + 20px * var(--density, 1) + 4px);
+  bottom: calc(4px - var(--spacing-2));
+  left: calc(var(--spacing-2) + 10px * var(--density, 1));
+  width: 1px;
+  background: var(--color-border-strong);
+  pointer-events: none;
+}
+
+.crewlet-stepper__row {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-3);
+  box-sizing: border-box;
+  width: 100%;
+  padding: var(--spacing-2);
+  border: 0;
+  border-radius: var(--radius-md);
+  color: var(--color-text-tertiary);
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-sm);
+}
+
+.crewlet-stepper__mark {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: calc(20px * var(--density, 1));
+  height: calc(20px * var(--density, 1));
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-pill);
+  font-size: var(--font-size-2xs);
+  font-weight: var(--font-weight-medium);
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+}
+
+.crewlet-stepper__text {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+  min-width: 0;
+}
+
+.crewlet-stepper__title {
+  line-height: calc(20px * var(--density, 1));
+  overflow-wrap: anywhere;
+}
+
+.crewlet-stepper__row .crewlet-stepper__label {
+  overflow: visible;
+}
+
+.crewlet-stepper__description,
+.crewlet-stepper__note {
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-xs);
+  line-height: var(--font-line-height-snug);
+}
+
+.crewlet-stepper__step--attention .crewlet-stepper__note {
+  color: var(--color-text-secondary);
+}
+
+.crewlet-stepper__step--done > .crewlet-stepper__row {
+  color: var(--color-text-secondary);
+}
+
+/*
+ * THE CURRENT ROW is lifted as the rail's current row is (SidebarNav): the
+ * elevated rung inside a one-pixel hairline drawn as an outline, so forced
+ * colors keeps it, and it does not move the row by a pixel.
+ */
+.crewlet-stepper__step--current > .crewlet-stepper__row {
+  outline: 1px solid var(--color-border-default);
+  outline-offset: -1px;
+  background: var(--color-surface-elevated);
+  color: var(--color-text-primary);
+  font-weight: var(--font-weight-medium);
+}
+
+.crewlet-stepper__step--current .crewlet-stepper__description,
+.crewlet-stepper__step--current .crewlet-stepper__note {
+  font-weight: var(--font-weight-regular);
+}
+
+@media (forced-colors: active) {
+  .crewlet-stepper .crewlet-stepper__step--current > .crewlet-stepper__chip,
+  .crewlet-stepper .crewlet-stepper__step--current .crewlet-stepper__mark {
+    forced-color-adjust: none;
+    border-color: Highlight;
+    background: Highlight;
+    color: HighlightText;
+  }
+
+  .crewlet-stepper .crewlet-stepper__dot {
+    background: HighlightText;
+  }
+
+  .crewlet-stepper .crewlet-stepper__dot.is-pulsing::after {
+    animation: none;
+  }
+
+  .crewlet-stepper__step + .crewlet-stepper__step::before,
+  .crewlet-stepper--vertical .crewlet-stepper__step:not(:last-child)::after {
+    background: GrayText;
+  }
+
+  .crewlet-stepper__target:hover {
+    outline: 1px solid Highlight;
+    outline-offset: var(--size-focus-ring-inset-offset);
+  }
+}

package/dist/{chunk-ITI2Z44C.js → chunk-2UFUP2ZH.js}

@@ -1,6 +1,6 @@
 import { FileDrop, FilePickButton } from './chunk-THDGBD6Y.js';
-import { contrastRatio } from './chunk-B235ANDO.js';
-import { normalizeHex } from './chunk-UZMNR366.js';
+import { contrastRatio } from './chunk-WW7TU6HE.js';
+import { normalizeHex } from './chunk-7W3LYIOC.js';
 import { Button } from './chunk-OG6CL3EB.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';

package/dist/{chunk-4A4QG6UC.js → chunk-34C7NYIQ.js}

@@ -1,4 +1,4 @@
-import { Callout } from './chunk-SZZRIHGT.js';
+import { Callout } from './chunk-BPCY7ZID.js';
 import { Button } from './chunk-OG6CL3EB.js';
 import { isComposing } from './chunk-H5XTJ7GJ.js';
 import { cx } from './chunk-ODEQTPFM.js';

package/dist/chunk-6GTTRJWJ.js

@@ -0,0 +1,24 @@
+import { normalizeHex } from './chunk-7W3LYIOC.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './ColorChip-A5XHTH3J.css';
+import { jsx } from 'react/jsx-runtime';
+
+function ColorChip({ value, size = "xs", shape = "round", className }) {
+  const hex = normalizeHex(value);
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cx(
+        "crewlet-color-chip",
+        `crewlet-color-chip--${size}`,
+        `crewlet-color-chip--${shape}`,
+        !hex && "is-empty",
+        className
+      ),
+      style: hex ? { "--crewlet-color-chip-value": hex } : void 0,
+      "aria-hidden": "true"
+    }
+  );
+}
+
+export { ColorChip };

package/dist/{chunk-7P336RA5.js → chunk-6RMZH7P7.js}

@@ -1,4 +1,4 @@
-import { EditingStatus } from './chunk-MULOZYHL.js';
+import { EditingStatus } from './chunk-EJWPYEG4.js';
 import { Kbd } from './chunk-SMBKXWML.js';
 import { Button } from './chunk-OG6CL3EB.js';
 import { isComposing } from './chunk-H5XTJ7GJ.js';

package/dist/{chunk-W6FOEBIL.js → chunk-73WHPLWQ.js}

@@ -1,16 +1,20 @@
-import { normalizeHex } from './chunk-UZMNR366.js';
-import { FormField, Input } from './chunk-EXRRTKWT.js';
+import { normalizeHex, parseColourInput } from './chunk-7W3LYIOC.js';
+import { FormField, Input, InputAffix } from './chunk-EXRRTKWT.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './ColorField-2OIOWT3Z.css';
 import { useId, useState } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 var LABELS = {
-  invalid: "Enter the colour as # and six hex digits, such as #5b3df5.",
+  invalid: "Enter six hex digits, such as 5b3df5, or rgb(91, 61, 245).",
   missing: "Choose a colour.",
   picker: (label) => `Pick the ${label} colour`,
-  placeholder: "#rrggbb"
+  placeholder: "rrggbb",
+  prefix: "Hex colour, after #"
 };
+var digits = (colour) => colour.replace(/^#/, "");
+var typedText = (value) => value.replace(/^\s*#/, "");
+var SIX_DIGITS = /^[0-9a-f]{6}$/i;
 var PICKER_START = "#000000";
 function ColorField({
   label,
@@ -30,30 +34,34 @@ function ColorField({
   const autoId = useId();
   const fieldId = id ?? autoId;
   const committed = normalizeHex(value) ?? "";
-  const [draft, setDraft] = useState(committed);
+  const [draft, setDraft] = useState(digits(committed));
   const [seen, setSeen] = useState(committed);
   const [left, setLeft] = useState(false);
   if (committed !== seen) {
     setSeen(committed);
-    if ((normalizeHex(draft) ?? "") !== committed) {
-      setDraft(committed);
+    if ((parseColourInput(draft) ?? "") !== committed) {
+      setDraft(digits(committed));
       setLeft(false);
     }
   }
   const typed = draft.trim();
-  const reads = normalizeHex(typed);
+  const reads = parseColourInput(typed);
   const refusal = typed === "" ? required ? text.missing : null : reads === null ? text.invalid : null;
   const shown = error ?? (left ? refusal : null);
   const swatch = reads ?? (typed === "" ? null : committed || null);
+  const functional = /^rgb/i.test(typed);
+  const prefixId = `${fieldId}-prefix`;
   const take = (next) => {
-    setDraft(next);
-    const colour = normalizeHex(next);
-    if (colour !== null) onChange(colour);
-    else if (next.trim() === "" && !required) onChange("");
+    const held = typedText(next);
+    setDraft(held);
+    if (SIX_DIGITS.test(held.trim())) onChange(normalizeHex(`#${held.trim()}`));
+    else if (held.trim() === "" && !required) onChange("");
   };
   const settle = () => {
     setLeft(true);
-    if (reads !== null && reads !== draft) setDraft(reads);
+    if (reads === null) return;
+    if (reads !== committed) onChange(reads);
+    if (digits(reads) !== draft) setDraft(digits(reads));
   };
   return /* @__PURE__ */ jsx(
     FormField,
@@ -96,13 +104,14 @@ function ColorField({
             width: "sm",
             value: draft,
             placeholder: text.placeholder,
-            maxLength: 9,
+            leading: functional ? void 0 : /* @__PURE__ */ jsx(InputAffix, { text: "#", id: prefixId, sentence: text.prefix }),
+            maxLength: 24,
             spellCheck: false,
             autoComplete: "off",
             autoCapitalize: "off",
             disabled,
             error: Boolean(shown),
-            "aria-describedby": field.describedBy,
+            "aria-describedby": [functional ? null : prefixId, field.describedBy].filter(Boolean).join(" ") || void 0,
             "aria-required": required || void 0,
             onChange: (event) => take(event.target.value),
             onBlur: settle,

package/dist/chunk-7W3LYIOC.js

@@ -0,0 +1,27 @@
+import { parseHex } from '@crewlethq/tokens';
+
+// src/utils/hexColour.ts
+function normalizeHex(value) {
+  if (typeof value !== "string") return null;
+  return parseHex(value) === null ? null : value.trim().toLowerCase();
+}
+var SIX = /^#?([0-9a-f]{6})$/i;
+var THREE = /^#?([0-9a-f])([0-9a-f])([0-9a-f])$/i;
+var RGB = /^rgb\(\s*(\d{1,3})(?:\s*,\s*|\s+)(\d{1,3})(?:\s*,\s*|\s+)(\d{1,3})\s*\)$/i;
+function parseColourInput(value) {
+  if (typeof value !== "string") return null;
+  const text = value.trim();
+  const six = SIX.exec(text);
+  if (six) return normalizeHex(`#${six[1]}`);
+  const three = THREE.exec(text);
+  if (three) return normalizeHex(`#${three[1]}${three[1]}${three[2]}${three[2]}${three[3]}${three[3]}`);
+  const rgb = RGB.exec(text);
+  if (rgb) {
+    const channels = [rgb[1], rgb[2], rgb[3]].map(Number);
+    if (channels.some((channel) => channel > 255)) return null;
+    return normalizeHex(`#${channels.map((channel) => channel.toString(16).padStart(2, "0")).join("")}`);
+  }
+  return null;
+}
+
+export { normalizeHex, parseColourInput };

package/dist/{chunk-OEEYL2CM.js → chunk-AVMQMY66.js}

@@ -1,5 +1,5 @@
-import { BrandScope } from './chunk-P3OIM6OC.js';
-import { normalizeHex } from './chunk-UZMNR366.js';
+import { BrandScope } from './chunk-X7WEE3EK.js';
+import { normalizeHex } from './chunk-7W3LYIOC.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './BrandSample-G5V7GKR2.css';
 import { jsx, jsxs } from 'react/jsx-runtime';

package/dist/{chunk-SZZRIHGT.js → chunk-BPCY7ZID.js}

@@ -1,5 +1,5 @@
 import { cx } from './chunk-ODEQTPFM.js';
-import './Callout-ZAVG3P66.css';
+import './Callout-G3N3IE6M.css';
 import { CircleAlertGlyph, TriangleAlertGlyph, CircleCheckGlyph, InfoGlyph } from '@crewlethq/icons/glyphs';
 import { jsxs, jsx } from 'react/jsx-runtime';
 

package/dist/chunk-DTSZUH6H.js

@@ -0,0 +1,124 @@
+import { Stepper } from './chunk-LDGQIDIZ.js';
+import { PageHeader } from './chunk-DKB73KZI.js';
+import { Disclosure } from './chunk-OGXHZHRX.js';
+import { useHeadingLevel, nextHeadingLevel, headingTag, HeadingLevelProvider } from './chunk-PQADV6P6.js';
+import { useMediaMatch } from './chunk-RTPQDNW3.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './SetupWizard-GZK5UDKC.css';
+import { useId, useRef, useEffect, createElement } from 'react';
+import { breakpoint } from '@crewlethq/tokens';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var LABELS = {
+  progress: (position, total) => `Step ${position} of ${total}`,
+  asideToggle: "Preview"
+};
+var PHONE = `(width < ${breakpoint.phone})`;
+function SetupWizard({
+  title,
+  headingLevel,
+  trail,
+  status,
+  actions,
+  steps,
+  current,
+  reached,
+  onSelect,
+  stepsLabel,
+  heading,
+  lead,
+  children,
+  aside,
+  asideLabel,
+  footer,
+  footerStart,
+  wide = false,
+  labels,
+  className,
+  ...rest
+}) {
+  const text = { ...LABELS, ...labels };
+  const phone = useMediaMatch(PHONE);
+  const context = useHeadingLevel();
+  const titleLevel = headingLevel ?? context;
+  const stepLevel = nextHeadingLevel(titleLevel);
+  const contentLevel = nextHeadingLevel(stepLevel);
+  const headingId = useId();
+  const headingRef = useRef(null);
+  const shown = useRef(current);
+  useEffect(() => {
+    if (shown.current === current) return;
+    shown.current = current;
+    headingRef.current?.focus();
+  }, [current]);
+  if (aside !== void 0 && aside !== null && !asideLabel) {
+    throw new TypeError("SetupWizard needs an asideLabel with an aside: it names the aside\u2019s landmark");
+  }
+  const position = steps.findIndex((step2) => step2.id === current);
+  const step = steps[position];
+  const stepper = /* @__PURE__ */ jsx(
+    Stepper,
+    {
+      label: stepsLabel,
+      steps,
+      current,
+      reached,
+      onSelect,
+      tone: "brand",
+      orientation: phone ? "horizontal" : "vertical"
+    }
+  );
+  const asideBlock = aside === void 0 || aside === null ? null : /* @__PURE__ */ jsx("aside", { className: "crewlet-setup-wizard__aside", "aria-label": asideLabel, children: /* @__PURE__ */ jsx(HeadingLevelProvider, { level: contentLevel, children: aside }) });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...rest,
+      className: cx(
+        "crewlet-setup-wizard",
+        asideBlock === null && "crewlet-setup-wizard--no-aside",
+        wide && "crewlet-setup-wizard--wide",
+        className
+      ),
+      children: /* @__PURE__ */ jsxs("div", { className: "crewlet-setup-wizard__frame", children: [
+        /* @__PURE__ */ jsxs("div", { className: "crewlet-setup-wizard__head", children: [
+          trail ? /* @__PURE__ */ jsx("div", { className: "crewlet-setup-wizard__trail", children: trail }) : null,
+          /* @__PURE__ */ jsx(
+            PageHeader,
+            {
+              title,
+              headingLevel: titleLevel,
+              actions: status || actions ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                status ? /* @__PURE__ */ jsx("span", { className: "crewlet-setup-wizard__status", children: status }) : null,
+                actions
+              ] }) : void 0
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("nav", { className: "crewlet-setup-wizard__rail", "aria-label": stepsLabel, children: [
+          phone && step ? /* @__PURE__ */ jsxs("p", { className: "crewlet-setup-wizard__position", children: [
+            text.progress(position + 1, steps.length),
+            /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: " \xB7 " }),
+            /* @__PURE__ */ jsx("span", { className: "crewlet-setup-wizard__position-step", children: step.label })
+          ] }) : null,
+          stepper
+        ] }),
+        /* @__PURE__ */ jsxs("section", { className: "crewlet-setup-wizard__content", "aria-labelledby": headingId, children: [
+          createElement(
+            headingTag(stepLevel),
+            { id: headingId, ref: headingRef, tabIndex: -1, className: "crewlet-setup-wizard__heading" },
+            heading
+          ),
+          lead ? /* @__PURE__ */ jsx("p", { className: "crewlet-setup-wizard__lead", children: lead }) : null,
+          /* @__PURE__ */ jsx("div", { className: "crewlet-setup-wizard__body", children: /* @__PURE__ */ jsx(HeadingLevelProvider, { level: contentLevel, children }) })
+        ] }),
+        asideBlock === null ? null : phone ? /* @__PURE__ */ jsx(Disclosure, { className: "crewlet-setup-wizard__preview", title: text.asideToggle, headingLevel: stepLevel, children: asideBlock }) : asideBlock,
+        /* @__PURE__ */ jsxs("footer", { className: "crewlet-setup-wizard__footer", children: [
+          footerStart ? /* @__PURE__ */ jsx("div", { className: "crewlet-setup-wizard__footer-start", children: footerStart }) : null,
+          /* @__PURE__ */ jsx("div", { className: "crewlet-setup-wizard__footer-end", children: footer })
+        ] })
+      ] })
+    }
+  );
+}
+
+export { SetupWizard };