@crewlethq/ui 0.75.4 → 0.76.1

package/dist/chunk-5EFLA6BW.js

@@ -0,0 +1,205 @@
+import { Stepper } from './chunk-RJWO2PC5.js';
+import { PageHeader } from './chunk-FPDIHEM4.js';
+import { Disclosure } from './chunk-222VILSP.js';
+import { useHeadingLevel, nextHeadingLevel, headingTag, HeadingLevelProvider } from './chunk-PQADV6P6.js';
+import { useMediaMatch } from './chunk-RTPQDNW3.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './SetupWizard-Y2PFPBCZ.css';
+import { useId, useRef, useState, useEffect, useCallback, 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",
+  stepsRow: "All steps, scrolls sideways"
+};
+var PHONE = `(width < ${breakpoint.phone})`;
+var STILL_ROW = { overflows: false, left: false, right: false };
+function stepRowOf(scroller) {
+  const steps = scroller.querySelectorAll("li");
+  if (steps.length === 0) return STILL_ROW;
+  const box = scroller.getBoundingClientRect();
+  const boxes = [...steps].map((step) => step.getBoundingClientRect());
+  const left = Math.min(...boxes.map((r) => r.left)) < box.left - 0.5;
+  const right = Math.max(...boxes.map((r) => r.right)) > box.right + 0.5;
+  return { overflows: scroller.scrollWidth > scroller.clientWidth + 0.5 || left || right, left, right };
+}
+function clearOfFade(scroller, step) {
+  const fade = Number.parseFloat(getComputedStyle(scroller).scrollPaddingInlineStart) || 0;
+  const box = scroller.getBoundingClientRect();
+  const drawn = step.getBoundingClientRect();
+  const pastRight = drawn.right - (box.right - fade);
+  const pastLeft = box.left + fade - drawn.left;
+  if (pastRight > 0) scroller.scrollLeft += pastRight;
+  else if (pastLeft > 0) scroller.scrollLeft -= pastLeft;
+}
+function SetupWizard({
+  title,
+  headingLevel,
+  trail,
+  status,
+  actions,
+  steps,
+  current,
+  reached,
+  onSelect,
+  stepsLabel,
+  heading,
+  lead,
+  children,
+  aside,
+  asideLabel,
+  footer,
+  primaryAction,
+  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 stepsRef = useRef(null);
+  const [row, setRow] = useState(STILL_ROW);
+  const shown = useRef(current);
+  useEffect(() => {
+    if (shown.current === current) return;
+    shown.current = current;
+    headingRef.current?.focus();
+  }, [current]);
+  const measure = useCallback(() => {
+    const scroller = stepsRef.current;
+    if (!scroller) return;
+    const next = stepRowOf(scroller);
+    setRow((was) => was.overflows === next.overflows && was.left === next.left && was.right === next.right ? was : next);
+  }, []);
+  useEffect(() => {
+    if (!phone) return;
+    const scroller = stepsRef.current;
+    const here = scroller?.querySelector('[aria-current="step"]')?.closest("li");
+    if (!scroller || !here) return;
+    const box = scroller.getBoundingClientRect();
+    const step2 = here.getBoundingClientRect();
+    scroller.scrollLeft += step2.left + step2.width / 2 - (box.left + box.width / 2);
+    measure();
+  }, [phone, current, measure]);
+  useEffect(() => {
+    if (!phone) return;
+    window.addEventListener("resize", measure);
+    return () => window.removeEventListener("resize", measure);
+  }, [phone, measure]);
+  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(Fragment, { children: [
+            /* @__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 })
+            ] }),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "crewlet-setup-wizard__progress",
+                "aria-hidden": "true",
+                style: { "--crewlet-setup-wizard-progress": String((position + 1) / steps.length) }
+              }
+            )
+          ] }) : null,
+          phone ? (
+            // A ROW THAT OVERFLOWS IS A SCROLLER THE KEYBOARD CAN REACH: it
+            // takes focus and a name only while it hides steps, since a pill
+            // that only labels its step takes no focus of its own. Its focus
+            // ring is drawn by the frame around it, which the edge fade does
+            // not reach (SetupWizard.css).
+            /* @__PURE__ */ jsx("div", { className: "crewlet-setup-wizard__steps-frame", children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                ref: stepsRef,
+                className: "crewlet-setup-wizard__steps",
+                "data-fade-left": row.left ? "" : void 0,
+                "data-fade-right": row.right ? "" : void 0,
+                onScroll: measure,
+                onFocus: (event) => {
+                  const step2 = event.target.closest("li");
+                  if (event.target === event.currentTarget || !step2 || !event.currentTarget.contains(step2)) return;
+                  clearOfFade(event.currentTarget, step2);
+                  measure();
+                },
+                ...row.overflows ? { tabIndex: 0, role: "group", "aria-label": text.stepsRow } : {},
+                children: stepper
+              }
+            ) })
+          ) : 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__ */ jsxs("div", { className: "crewlet-setup-wizard__footer-end", children: [
+            footer,
+            primaryAction ? /* @__PURE__ */ jsx("span", { className: "crewlet-setup-wizard__primary", children: primaryAction }) : null
+          ] })
+        ] })
+      ] })
+    }
+  );
+}
+
+export { SetupWizard };

package/dist/{chunk-VLGGLLKH.js → chunk-624X3RVA.js}

@@ -1,4 +1,4 @@
-import { StatusDot } from './chunk-WIATRXEJ.js';
+import { StatusDot } from './chunk-CYQBDZ6M.js';
 import { toISO, useNow, formatRelative } from './chunk-EJNJMHQG.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './EditingStatus-TMGT265J.css';

package/dist/{chunk-LWFOX3PB.js → chunk-63GBSOLU.js}

@@ -1,6 +1,6 @@
 import { ThemeSwatch } from './chunk-3XQUEF5C.js';
 import { useHighlightRest } from './chunk-7KHM2FZH.js';
-import { Tag } from './chunk-I5OIKDX2.js';
+import { Tag } from './chunk-VERJCAJ4.js';
 import { useRoving, tabStop } from './chunk-EGMQURBR.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './ThemeGallery-UEFZRT6W.css';

package/dist/{chunk-ZUBFVK6B.js → chunk-6EWNMSS4.js}

@@ -1,5 +1,5 @@
 import { useListbox, useOptionKeys } from './chunk-7KHM2FZH.js';
-import { Input } from './chunk-ETSF7SU6.js';
+import { Input } from './chunk-FB3TCNQP.js';
 import { HIT_AREA_CLASS } from './chunk-2YTOOH3A.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './HitArea-QUOS6ZDJ.css';

package/dist/{chunk-7IW3P6FH.js → chunk-6G6WHTC7.js}

@@ -1,4 +1,4 @@
-import { StatusCard } from './chunk-NTQPJJAN.js';
+import { StatusCard } from './chunk-RTMNULTL.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './EntityList-DT3BQLUW.css';
 import { jsx, jsxs } from 'react/jsx-runtime';

package/dist/{chunk-JXJNX7QQ.js → chunk-6LXS3X7A.js}

@@ -1,6 +1,6 @@
 import { Table } from './chunk-75NQV4R4.js';
 import { DownloadButton } from './chunk-EHFQMY3B.js';
-import { StatusCard } from './chunk-NTQPJJAN.js';
+import { StatusCard } from './chunk-RTMNULTL.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './ResultTableCard-AP355LQM.css';
 import { useState } from 'react';

package/dist/{chunk-NQABJAUY.js → chunk-6RW2MUTY.js}

@@ -1,18 +1,20 @@
 import { HIT_AREA_CLASS } from './chunk-2YTOOH3A.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './HitArea-QUOS6ZDJ.css';
-import './ChoiceList-Q772QLFX.css';
+import './ChoiceList-JN4PPNFW.css';
 import { useId } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 function ChoiceList({ options, value, onChange, label, footer, disabled, className }) {
   const name = useId();
   return /* @__PURE__ */ jsxs("div", { className: cx("crewlet-choice-list", disabled && "is-disabled", className), children: [
-    /* @__PURE__ */ jsx("div", { role: "radiogroup", "aria-label": label, className: "crewlet-choice-list__group", children: options.map((option) => {
-      const id = `${name}-${option.value}`;
+    /* @__PURE__ */ jsx("div", { role: "radiogroup", "aria-label": label, className: "crewlet-choice-list__group", children: options.map((option, index) => {
+      const id = `${name}-${index}`;
       const checked = option.value === value;
+      const off = disabled || option.disabled;
+      const reasonId = option.disabled && option.disabledReason ? `${id}-reason` : void 0;
       return /* @__PURE__ */ jsxs("div", { className: cx("crewlet-choice-list__item", option.separated && "is-separated"), children: [
-        /* @__PURE__ */ jsxs("label", { className: cx("crewlet-choice-list__row", HIT_AREA_CLASS, option.media != null && "has-media", checked && "is-checked"), htmlFor: id, children: [
+        /* @__PURE__ */ jsxs("label", { className: cx("crewlet-choice-list__row", HIT_AREA_CLASS, option.media != null && "has-media", checked && "is-checked", option.disabled && "is-disabled"), htmlFor: id, children: [
           /* @__PURE__ */ jsx(
             "input",
             {
@@ -21,17 +23,22 @@ function ChoiceList({ options, value, onChange, label, footer, disabled, classNa
               name,
               value: option.value,
               checked,
-              disabled,
+              disabled: off,
+              "aria-labelledby": reasonId ? [`${id}-label`, option.detail ? `${id}-detail` : null, option.tag ? `${id}-tag` : null].filter(Boolean).join(" ") : void 0,
+              "aria-describedby": reasonId,
               onChange: () => onChange(option.value),
               className: "crewlet-choice-list__radio"
             }
           ),
           option.media != null ? /* @__PURE__ */ jsx("span", { className: "crewlet-choice-list__media", "aria-hidden": true, children: option.media }) : null,
           /* @__PURE__ */ jsxs("span", { className: "crewlet-choice-list__text", children: [
-            /* @__PURE__ */ jsx("span", { className: "crewlet-choice-list__label", children: option.label }),
-            option.detail ? /* @__PURE__ */ jsx("span", { className: "crewlet-choice-list__detail", children: option.detail }) : null
+            /* @__PURE__ */ jsx("span", { id: `${id}-label`, className: "crewlet-choice-list__label", children: option.label }),
+            option.detail || reasonId ? /* @__PURE__ */ jsxs("span", { className: "crewlet-choice-list__detail", children: [
+              option.detail ? /* @__PURE__ */ jsx("span", { id: `${id}-detail`, children: option.detail }) : null,
+              reasonId ? /* @__PURE__ */ jsx("span", { id: reasonId, className: "crewlet-choice-list__reason", children: option.disabledReason }) : null
+            ] }) : null
           ] }),
-          option.tag ? /* @__PURE__ */ jsx("span", { className: "crewlet-choice-list__tag", children: option.tag }) : null
+          option.tag ? /* @__PURE__ */ jsx("span", { id: `${id}-tag`, className: "crewlet-choice-list__tag", children: option.tag }) : null
         ] }),
         checked && option.panel ? /* @__PURE__ */ jsx("div", { className: "crewlet-choice-list__panel", children: option.panel }) : null
       ] }, option.value);

package/dist/{chunk-IPUEVTRJ.js → chunk-6THG44LI.js}

@@ -1,5 +1,5 @@
 import { useRoving, tabStop } from './chunk-EGMQURBR.js';
-import { StatusDot } from './chunk-WIATRXEJ.js';
+import { StatusDot } from './chunk-CYQBDZ6M.js';
 import { Count } from './chunk-MLDTLZAO.js';
 import { Menu } from './chunk-OQG4P5KU.js';
 import { HIT_AREA_CLASS } from './chunk-2YTOOH3A.js';

package/dist/{chunk-KWLH45YC.js → chunk-7PJFUQMY.js}

@@ -1,5 +1,5 @@
 import { normalizeHex } from './chunk-7W3LYIOC.js';
-import { Tag } from './chunk-I5OIKDX2.js';
+import { Tag } from './chunk-VERJCAJ4.js';
 import { VisuallyHidden } from './chunk-UT6CW3C7.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './ContrastBadge-CBZPGG3G.css';

package/dist/{chunk-AB6F5YXX.js → chunk-ADGNISEI.js}

@@ -1,7 +1,7 @@
 import { PrincipalAvatar } from './chunk-N2BF272H.js';
 import { toInstant, RelativeTime, formatExact, toISO } from './chunk-EJNJMHQG.js';
 import { Document } from './chunk-BXCL6P5Z.js';
-import { Composer } from './chunk-5OFRDX66.js';
+import { Composer } from './chunk-E35HYQMK.js';
 import { Count } from './chunk-MLDTLZAO.js';
 import { useHeadingLevel, headingTag } from './chunk-PQADV6P6.js';
 import { Button } from './chunk-DGXZ635L.js';

package/dist/{chunk-WQRSZMN4.js → chunk-BBD7PTBG.js}

@@ -1,5 +1,5 @@
 import { DiffList } from './chunk-LR4IWUWQ.js';
-import { Tag } from './chunk-I5OIKDX2.js';
+import { Tag } from './chunk-VERJCAJ4.js';
 import { Disclosure } from './chunk-222VILSP.js';
 import { VisuallyHidden } from './chunk-UT6CW3C7.js';
 import { cx } from './chunk-ODEQTPFM.js';

package/dist/{chunk-TYIHFDMP.js → chunk-BKXUZCZX.js}

@@ -1,4 +1,4 @@
-import { tabId } from './chunk-IPUEVTRJ.js';
+import { tabId } from './chunk-6THG44LI.js';
 import { useRoving, tabStop } from './chunk-EGMQURBR.js';
 import { Count } from './chunk-MLDTLZAO.js';
 import { HIT_AREA_CLASS } from './chunk-2YTOOH3A.js';

package/dist/{chunk-NU5RUT7Y.js → chunk-CFTBESST.js}

@@ -1,4 +1,4 @@
-import { Combobox } from './chunk-ZUBFVK6B.js';
+import { Combobox } from './chunk-6EWNMSS4.js';
 import { PRINCIPAL_KINDS, PrincipalAvatar } from './chunk-N2BF272H.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './PrincipalPicker-P6UYHDJR.css';

package/dist/{chunk-WIATRXEJ.js → chunk-CYQBDZ6M.js}

@@ -1,5 +1,5 @@
 import { cx } from './chunk-ODEQTPFM.js';
-import './StatusDot-7OMCQCZF.css';
+import './StatusDot-FJND3CZY.css';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 function StatusDot({ tone = "neutral", pulse = false, children, className }) {

package/dist/{chunk-ZKIEOWR6.js → chunk-D7G2QGET.js}

@@ -1,4 +1,4 @@
-import { Tag } from './chunk-I5OIKDX2.js';
+import { Tag } from './chunk-VERJCAJ4.js';
 import './PricingCard-BXMLP7KD.css';
 import { forwardRef } from 'react';
 import { jsx } from 'react/jsx-runtime';

package/dist/{chunk-3EY5SEGH.js → chunk-DSMQTED5.js}

@@ -1,7 +1,7 @@
 import { RefusalStrip, ReceiptStrip } from './chunk-ZWCK4N4L.js';
-import { ChangeList } from './chunk-WQRSZMN4.js';
-import { StatusCard } from './chunk-NTQPJJAN.js';
-import { Checkbox } from './chunk-PBCNINMB.js';
+import { ChangeList } from './chunk-BBD7PTBG.js';
+import { StatusCard } from './chunk-RTMNULTL.js';
+import { Checkbox } from './chunk-LMQG3VPG.js';
 import { Disclosure } from './chunk-222VILSP.js';
 import { Button } from './chunk-DGXZ635L.js';
 import { Spinner } from './chunk-XSPCITPN.js';

package/dist/{chunk-5OFRDX66.js → chunk-E35HYQMK.js}

@@ -1,5 +1,5 @@
 import { Kbd } from './chunk-ANTAQAR4.js';
-import { Textarea } from './chunk-ETSF7SU6.js';
+import { Textarea } from './chunk-FB3TCNQP.js';
 import { isComposing } from './chunk-H5XTJ7GJ.js';
 import { VisuallyHidden } from './chunk-UT6CW3C7.js';
 import { cx } from './chunk-ODEQTPFM.js';

package/dist/{chunk-ETSF7SU6.js → chunk-FB3TCNQP.js}

@@ -6,7 +6,7 @@ import { IconButton } from './chunk-UAUP6XGK.js';
 import { useFocusModality } from './chunk-NUZHC6MM.js';
 import { VisuallyHidden } from './chunk-UT6CW3C7.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './Input-GEFFMKBS.css';
+import './Input-WSMB7JG2.css';
 import './VisuallyHidden-AOEXU5EB.css';
 import { forwardRef, useRef, useState, useImperativeHandle, useEffect, useId } from 'react';
 import { XGlyph } from '@crewlethq/icons/glyphs';

package/dist/{chunk-BWAUL5MB.js → chunk-GHQG4VZA.js}

@@ -1,7 +1,7 @@
 import { Select } from './chunk-VK45YJLH.js';
-import { Combobox } from './chunk-ZUBFVK6B.js';
-import { FormField, Textarea, InputAffix } from './chunk-ETSF7SU6.js';
-import './Input-GEFFMKBS.css';
+import { Combobox } from './chunk-6EWNMSS4.js';
+import { FormField, Textarea, InputAffix } from './chunk-FB3TCNQP.js';
+import './Input-WSMB7JG2.css';
 import './VisuallyHidden-AOEXU5EB.css';
 import './HitArea-QUOS6ZDJ.css';
 import './Combobox-GBCWXWEB.css';

package/dist/{chunk-PIAGTZY3.js → chunk-GPFYITOF.js}

@@ -1,4 +1,4 @@
-import { StepStateMark } from './chunk-HJBHP66O.js';
+import { StepStateMark } from './chunk-RJWO2PC5.js';
 import { DisclosureAnatomy } from './chunk-IVTQWOXV.js';
 import { VisuallyHidden } from './chunk-UT6CW3C7.js';
 import { cx } from './chunk-ODEQTPFM.js';

package/dist/{chunk-R6K62EXV.js → chunk-H22SR76M.js}

@@ -1,4 +1,4 @@
-import { Tag } from './chunk-I5OIKDX2.js';
+import { Tag } from './chunk-VERJCAJ4.js';
 import { RelativeTime } from './chunk-EJNJMHQG.js';
 import { HIT_AREA_CLASS } from './chunk-2YTOOH3A.js';
 import { VisuallyHidden } from './chunk-UT6CW3C7.js';

package/dist/{chunk-IO374IX6.js → chunk-HQOEAUDJ.js}

@@ -1,4 +1,4 @@
-import { ContrastLevelTag } from './chunk-KWLH45YC.js';
+import { ContrastLevelTag } from './chunk-7PJFUQMY.js';
 import { Popover } from './chunk-KHJIEPZV.js';
 import { IconButton } from './chunk-UAUP6XGK.js';
 import { cx } from './chunk-ODEQTPFM.js';

package/dist/{chunk-J5WWMC35.js → chunk-HWPP22XG.js}

@@ -1,13 +1,13 @@
 import { PageHeader } from './chunk-FPDIHEM4.js';
 import { FilterPill } from './chunk-K4LZXSKZ.js';
-import { DataTable } from './chunk-BWFJB5JD.js';
 import { DateTimePicker } from './chunk-HPI5J6AR.js';
+import { DataTable } from './chunk-HZDI2CCS.js';
 import { useListbox, useOptionKeys } from './chunk-7KHM2FZH.js';
 import { Toolbar } from './chunk-NR4CPM4T.js';
 import { Popover } from './chunk-KHJIEPZV.js';
 import { RelativeTime } from './chunk-EJNJMHQG.js';
 import { Kbd } from './chunk-ANTAQAR4.js';
-import { Input } from './chunk-ETSF7SU6.js';
+import { Input } from './chunk-FB3TCNQP.js';
 import { Count } from './chunk-MLDTLZAO.js';
 import { Menu } from './chunk-OQG4P5KU.js';
 import { Button } from './chunk-DGXZ635L.js';

package/dist/{chunk-BWFJB5JD.js → chunk-HZDI2CCS.js}

@@ -2,7 +2,7 @@ import { Modal } from './chunk-C667GCU7.js';
 import { useClipboard } from './chunk-STJ7QBC3.js';
 import { EmptyValue } from './chunk-RE3FBGQQ.js';
 import { useCardHeaderSlot } from './chunk-AV2DXAEL.js';
-import { Checkbox } from './chunk-PBCNINMB.js';
+import { Checkbox } from './chunk-LMQG3VPG.js';
 import { Menu } from './chunk-OQG4P5KU.js';
 import { Button } from './chunk-DGXZ635L.js';
 import { IconButton } from './chunk-UAUP6XGK.js';

package/dist/{chunk-3WN5HUAK.js → chunk-I3G5FJ54.js}

@@ -1,4 +1,4 @@
-import { SegmentedControl } from './chunk-TYIHFDMP.js';
+import { SegmentedControl } from './chunk-BKXUZCZX.js';
 import { Button } from './chunk-DGXZ635L.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './MergeConflicts-HCXPRQVR.css';

package/dist/{chunk-TKBFRGUV.js → chunk-IPBSCJIZ.js}

@@ -1,5 +1,5 @@
 import { Tooltip } from './chunk-I33UIUZD.js';
-import { SegmentedControl } from './chunk-TYIHFDMP.js';
+import { SegmentedControl } from './chunk-BKXUZCZX.js';
 import { ArtifactIcon } from './chunk-AVL52EME.js';
 import { isApplePlatform, Kbd } from './chunk-ANTAQAR4.js';
 import { Menu } from './chunk-OQG4P5KU.js';

package/dist/{chunk-ERFXYGRF.js → chunk-IQMWMT4V.js}

@@ -1,6 +1,6 @@
 import { Toolbar } from './chunk-NR4CPM4T.js';
-import { SegmentedControl } from './chunk-TYIHFDMP.js';
-import { tabId } from './chunk-IPUEVTRJ.js';
+import { SegmentedControl } from './chunk-BKXUZCZX.js';
+import { tabId } from './chunk-6THG44LI.js';
 import { IconButton } from './chunk-UAUP6XGK.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './MarkdownEditor-BLCJRGDC.css';

package/dist/{chunk-GT2OG2XM.js → chunk-JMTBK55P.js}

@@ -1,7 +1,7 @@
-import { safeHref } from './chunk-KBZO4B33.js';
 import { IconTile } from './chunk-3LI4TRUR.js';
+import { safeHref } from './chunk-KBZO4B33.js';
 import { ReceiptStrip } from './chunk-ZWCK4N4L.js';
-import { StatusCard } from './chunk-NTQPJJAN.js';
+import { StatusCard } from './chunk-RTMNULTL.js';
 import { ButtonLink, Button } from './chunk-DGXZ635L.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './OpenInAppCard-CKHCK7DO.css';

package/dist/{chunk-FURJVZCT.js → chunk-LCZULGMB.js}

@@ -1,4 +1,4 @@
-import { Checkbox } from './chunk-PBCNINMB.js';
+import { Checkbox } from './chunk-LMQG3VPG.js';
 import { EmptyState } from './chunk-PPUR46MK.js';
 import { useMediaMatch } from './chunk-RTPQDNW3.js';
 import { Button } from './chunk-DGXZ635L.js';

package/dist/{chunk-PBCNINMB.js → chunk-LMQG3VPG.js}

@@ -1,4 +1,4 @@
-import { FormField } from './chunk-ETSF7SU6.js';
+import { FormField } from './chunk-FB3TCNQP.js';
 import { VisuallyHidden } from './chunk-UT6CW3C7.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './Checkbox-GAMV2XD7.css';

package/dist/chunk-MKFEVHSR.js

@@ -0,0 +1,83 @@
+import { StatusDot } from './chunk-CYQBDZ6M.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './ChoiceCards-HAGJMK6Q.css';
+import { useId } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function ChoiceCards({ label, options, value, onChange, minCardWidth = "md", className }) {
+  const name = useId();
+  const described = options.some((o) => o.description != null && o.description !== false && o.description !== "");
+  const facts = Math.max(0, ...options.map((o) => o.facts?.length ?? 0));
+  const inFact = (o) => o.disabledReasonAt !== void 0 && o.disabledReasonAt >= 0 && o.disabledReasonAt < (o.facts?.length ?? 0);
+  const reasons = options.some((o) => o.disabled && o.disabledReason && !inFact(o)) ? 1 : 0;
+  const rows = { "--crewlet-choice-cards-rows": 1 + (described ? 1 : 0) + facts + reasons };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "radiogroup",
+      "aria-label": label,
+      className: cx("crewlet-choice-cards", `crewlet-choice-cards--${minCardWidth}`, className),
+      style: rows,
+      children: options.map((option, index) => {
+        const id = `${name}-${index}`;
+        const checked = option.value === value;
+        const part = (what) => `${id}-${what}`;
+        const reason = option.disabled && option.disabledReason ? part("reason") : null;
+        const reasonAt = reason && inFact(option) ? option.disabledReasonAt : -1;
+        const labelledBy = [part("label"), option.tag ? part("tag") : null].filter(Boolean).join(" ");
+        const describedBy = [
+          option.description ? part("description") : null,
+          ...(option.facts ?? []).map((_, at) => at === reasonAt ? reason : part(`fact-${at}`)),
+          reasonAt < 0 ? reason : null
+        ].filter(Boolean).join(" ");
+        return /* @__PURE__ */ jsxs(
+          "label",
+          {
+            htmlFor: id,
+            className: cx("crewlet-choice-cards__card", checked && "is-checked", option.disabled && "is-disabled"),
+            children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  id,
+                  type: "radio",
+                  name,
+                  value: option.value,
+                  checked,
+                  disabled: option.disabled,
+                  "aria-labelledby": labelledBy,
+                  "aria-describedby": describedBy || void 0,
+                  onChange: () => onChange(option.value),
+                  className: "crewlet-choice-cards__radio"
+                }
+              ),
+              /* @__PURE__ */ jsxs("span", { className: "crewlet-choice-cards__title", children: [
+                option.media != null ? /* @__PURE__ */ jsx("span", { className: "crewlet-choice-cards__media", "aria-hidden": true, children: option.media }) : null,
+                /* @__PURE__ */ jsx("span", { id: part("label"), className: "crewlet-choice-cards__label", children: option.label }),
+                option.tag ? /* @__PURE__ */ jsx("span", { id: part("tag"), className: "crewlet-choice-cards__tag", children: option.tag }) : null
+              ] }),
+              option.description ? /* @__PURE__ */ jsx("span", { id: part("description"), className: "crewlet-choice-cards__description", children: option.description }) : described ? /* @__PURE__ */ jsx("span", { className: "crewlet-choice-cards__description", "aria-hidden": true }) : null,
+              option.facts && option.facts.length > 0 ? /* @__PURE__ */ jsx("span", { className: "crewlet-choice-cards__facts", children: option.facts.map((fact, at) => /* @__PURE__ */ jsxs(
+                "span",
+                {
+                  id: at === reasonAt ? reason : part(`fact-${at}`),
+                  className: cx("crewlet-choice-cards__fact", at === reasonAt && "is-reason"),
+                  children: [
+                    /* @__PURE__ */ jsx("span", { className: "crewlet-choice-cards__fact-label", children: fact.label }),
+                    " ",
+                    /* @__PURE__ */ jsx("span", { className: "crewlet-choice-cards__fact-value", children: fact.tone ? /* @__PURE__ */ jsx(StatusDot, { tone: fact.tone, children: at === reasonAt ? option.disabledReason : fact.value }) : at === reasonAt ? option.disabledReason : fact.value })
+                  ]
+                },
+                at
+              )) }) : null,
+              reason && reasonAt < 0 ? /* @__PURE__ */ jsx("span", { id: reason, className: "crewlet-choice-cards__reason", children: option.disabledReason }) : null
+            ]
+          },
+          option.value
+        );
+      })
+    }
+  );
+}
+
+export { ChoiceCards };

package/dist/{chunk-JPQSVECQ.js → chunk-MP7DGKB6.js}

@@ -9,7 +9,7 @@ import { jsx } from 'react/jsx-runtime';
 var engine = null;
 var loading = null;
 function loadEngine() {
-  loading ??= import('./Editor-VW5CRDKY.js').then(
+  loading ??= import('./Editor-BXOWAV46.js').then(
     (module) => {
       engine = module.Editor;
       return engine;

package/dist/{chunk-DO4J4TBZ.js → chunk-NKBKQEKS.js}

@@ -1,5 +1,5 @@
 import { IconTile } from './chunk-3LI4TRUR.js';
-import { Tag } from './chunk-I5OIKDX2.js';
+import { Tag } from './chunk-VERJCAJ4.js';
 import { useHeadingLevel, headingTag } from './chunk-PQADV6P6.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './ReviewList-2IZA67EX.css';

package/dist/{chunk-4MVLED6E.js → chunk-OCGIQGYJ.js}

@@ -1,7 +1,7 @@
 import { Modal } from './chunk-C667GCU7.js';
 import { Callout } from './chunk-BPCY7ZID.js';
-import { SegmentedControl } from './chunk-TYIHFDMP.js';
-import { FormField, Input } from './chunk-ETSF7SU6.js';
+import { SegmentedControl } from './chunk-BKXUZCZX.js';
+import { FormField, Input } from './chunk-FB3TCNQP.js';
 import { Button } from './chunk-DGXZ635L.js';
 import { useState } from 'react';
 import { ClockGlyph } from '@crewlethq/icons/glyphs';

package/dist/{chunk-EOXI3CRG.js → chunk-OOLMTUCO.js}

@@ -1,5 +1,5 @@
 import { diffLines, diffStat, collapseDiff, DiffSummary, DiffView } from './chunk-AOFVXE6V.js';
-import { SegmentedControl } from './chunk-TYIHFDMP.js';
+import { SegmentedControl } from './chunk-BKXUZCZX.js';
 import { EmptyState } from './chunk-PPUR46MK.js';
 import { useHeadingLevel, headingTag, nextHeadingLevel, HeadingLevelProvider } from './chunk-PQADV6P6.js';
 import { cx } from './chunk-ODEQTPFM.js';