@crewlethq/ui 0.50.0 → 0.52.0

package/dist/chunk-EJWPYEG4.js

@@ -0,0 +1,38 @@
+import { toISO, useNow, formatRelative } from './chunk-3CZ7XAVY.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './EditingStatus-YU7EGM6Y.css';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var LABELS = {
+  editing: "Editing",
+  unsaved: "Unsaved changes",
+  saving: "Saving",
+  saved: "Saved"
+};
+function EditingStatus({ dirty, saving = false, savedAt, labels, className }) {
+  const text = { ...LABELS, ...labels };
+  const showSaved = !saving && !dirty && savedAt !== void 0 && savedAt !== null && toISO(savedAt) !== null;
+  const state = saving ? text.saving : dirty ? text.unsaved : showSaved ? text.saved : null;
+  return /* @__PURE__ */ jsxs("span", { className: cx("crewlet-editing-status", dirty && "crewlet-editing-status--dirty", className), children: [
+    /* @__PURE__ */ jsx("span", { className: "crewlet-editing-status__dot", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsxs("span", { className: "crewlet-editing-status__text", children: [
+      /* @__PURE__ */ jsxs("span", { role: "status", "aria-live": "polite", className: "crewlet-editing-status__live", children: [
+        /* @__PURE__ */ jsx("span", { className: "crewlet-editing-status__label", children: text.editing }),
+        state ? " " : null,
+        state ? /* @__PURE__ */ jsx("span", { className: "crewlet-editing-status__state", children: state }) : null
+      ] }),
+      showSaved ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        " ",
+        /* @__PURE__ */ jsx(SavedAgo, { at: savedAt })
+      ] }) : null
+    ] })
+  ] });
+}
+function SavedAgo({ at }) {
+  const now = useNow();
+  const ago = formatRelative(at, now);
+  if (ago === null) return null;
+  return /* @__PURE__ */ jsx("time", { className: "crewlet-editing-status__ago", dateTime: toISO(at) ?? void 0, children: ago });
+}
+
+export { EditingStatus };

package/dist/{chunk-H7NMJ5AI.js → chunk-EZ43L6T7.js}

@@ -1,7 +1,7 @@
 import { PrincipalAvatar } from './chunk-CI3VPIJN.js';
 import { toInstant, RelativeTime, formatExact, toISO } from './chunk-3CZ7XAVY.js';
 import { Document } from './chunk-PWG3VHRQ.js';
-import { Composer } from './chunk-GHY63X4C.js';
+import { Composer } from './chunk-UJ4VVK7R.js';
 import { Count } from './chunk-BHHIIK3M.js';
 import { useHeadingLevel, headingTag } from './chunk-PQADV6P6.js';
 import { Button } from './chunk-OG6CL3EB.js';

package/dist/{chunk-627KFRON.js → chunk-FNPZ3LLQ.js}

@@ -1,5 +1,5 @@
 import { useReorder } from './chunk-XJ2QEBMM.js';
-import { Input } from './chunk-EXRRTKWT.js';
+import { Input } from './chunk-LJHH4WWB.js';
 import { Menu } from './chunk-TMM32U7D.js';
 import { IconButton } from './chunk-LACA4JGC.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';

package/dist/{chunk-M4QM477B.js → chunk-FXHWOXGD.js}

@@ -1,7 +1,7 @@
 import { Card } from './chunk-INHXF2CL.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './FolderTile-FDT5Y63Z.css';
+import './FolderTile-MIUEB7SO.css';
 import { useId } from 'react';
 import { FolderGlyph } from '@crewlethq/icons/glyphs';
 import { jsxs, jsx } from 'react/jsx-runtime';

package/dist/{chunk-KHZYAEGZ.js → chunk-G5SUSCWL.js}

@@ -1,4 +1,4 @@
-import { Combobox } from './chunk-P5JBDHWC.js';
+import { Combobox } from './chunk-C6Z3MLSA.js';
 import { PRINCIPAL_KINDS, PrincipalAvatar } from './chunk-CI3VPIJN.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './PrincipalPicker-7NNZTGUP.css';

package/dist/{chunk-VBIM6HFC.js → chunk-GPZXBJFU.js}

@@ -3,7 +3,7 @@ import { useListbox, useOptionKeys } from './chunk-7KHM2FZH.js';
 import { Popover } from './chunk-KHJIEPZV.js';
 import { KeyChip, highlightMatch } from './chunk-FYTIJM2T.js';
 import { Skeleton } from './chunk-TEUQWOWZ.js';
-import { Input } from './chunk-EXRRTKWT.js';
+import { Input } from './chunk-LJHH4WWB.js';
 import { announce } from './chunk-RSAQOKH3.js';
 import { useMediaMatch } from './chunk-RTPQDNW3.js';
 import { focusables, isComposing } from './chunk-H5XTJ7GJ.js';

package/dist/{chunk-NAWUXCBC.js → chunk-GRKGLZFM.js}

@@ -1,12 +1,12 @@
 import { PageHeader } from './chunk-DKB73KZI.js';
+import { DataTable } from './chunk-5O72FSOK.js';
 import { DateTimePicker } from './chunk-ZFM5L7M4.js';
-import { DataTable } from './chunk-WQ7S7CKZ.js';
 import { useListbox, useOptionKeys } from './chunk-7KHM2FZH.js';
 import { Toolbar } from './chunk-NR4CPM4T.js';
 import { Popover } from './chunk-KHJIEPZV.js';
 import { RelativeTime } from './chunk-3CZ7XAVY.js';
 import { Kbd } from './chunk-SMBKXWML.js';
-import { Input } from './chunk-EXRRTKWT.js';
+import { Input } from './chunk-LJHH4WWB.js';
 import { Count } from './chunk-BHHIIK3M.js';
 import { Menu } from './chunk-TMM32U7D.js';
 import { Button } from './chunk-OG6CL3EB.js';

package/dist/{chunk-VTSJMDGP.js → chunk-J53T2QAH.js}

@@ -2,9 +2,9 @@ import { Select } from './chunk-XQZ6EWOE.js';
 import { SHEET_LABELS, SHEET_COLUMN_TYPES, optionHue, retypeColumn } from './chunk-LFSIKGRQ.js';
 import { HueSwatch } from './chunk-34RMTXDZ.js';
 import { NODE_HUES, NODE_HUE_NAMES } from './chunk-AYKXMIOR.js';
-import { Checkbox } from './chunk-NCHKKYPQ.js';
+import { Checkbox } from './chunk-RQI43UJ7.js';
 import { Kbd } from './chunk-SMBKXWML.js';
-import { FormField, Input } from './chunk-EXRRTKWT.js';
+import { FormField, Input } from './chunk-LJHH4WWB.js';
 import { Menu } from './chunk-TMM32U7D.js';
 import { Button } from './chunk-OG6CL3EB.js';
 import { IconButton } from './chunk-LACA4JGC.js';

package/dist/{chunk-JWNYI7UD.js → chunk-KFR75JOK.js}

@@ -1,5 +1,5 @@
 import { richEditorLabels } from './chunk-CSQTDGTS.js';
-import { Callout } from './chunk-SZZRIHGT.js';
+import { Callout } from './chunk-BPCY7ZID.js';
 import { Skeleton } from './chunk-TEUQWOWZ.js';
 import { Button } from './chunk-OG6CL3EB.js';
 import './RichEditor-NPD2KAPS.css';
@@ -9,7 +9,7 @@ import { jsx } from 'react/jsx-runtime';
 var engine = null;
 var loading = null;
 function loadEngine() {
-  loading ??= import('./Editor-MLGK3KOG.js').then(
+  loading ??= import('./Editor-SZFWVDAU.js').then(
     (module) => {
       engine = module.Editor;
       return engine;

package/dist/chunk-KIRQZG3G.js

@@ -0,0 +1,53 @@
+import { ContrastLevelTag } from './chunk-WW7TU6HE.js';
+import { Popover } from './chunk-KHJIEPZV.js';
+import { IconButton } from './chunk-LACA4JGC.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './ContrastHelp-MZCAW5WQ.css';
+import { InfoGlyph } from '@crewlethq/icons/glyphs';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var LABELS = {
+  trigger: "About contrast levels",
+  title: "Contrast levels",
+  intro: "Contrast compares two colours, from 1:1 to 21:1.",
+  aa: { term: "AA", meaning: "At least 4.5:1 for text, 3:1 for large text, icons and buttons." },
+  aaa: { term: "AAA", meaning: "At least 7:1 for text, 4.5:1 for large text." },
+  low: { term: "Low or Fails", meaning: "Below AA." }
+};
+function ContrastHelp({ align = "start", className, labels }) {
+  const text = { ...LABELS, ...labels };
+  return /* @__PURE__ */ jsx(
+    Popover,
+    {
+      role: "dialog",
+      label: text.title,
+      align,
+      className: cx("crewlet-contrast-help__panel", className),
+      trigger: (_, toggle) => /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          size: "sm",
+          variant: "ghost",
+          label: text.trigger,
+          icon: /* @__PURE__ */ jsx(InfoGlyph, { size: "sm" }),
+          className: "crewlet-contrast-help__trigger",
+          onClick: toggle
+        }
+      ),
+      children: /* @__PURE__ */ jsxs("div", { className: "crewlet-contrast-help", children: [
+        /* @__PURE__ */ jsx("p", { className: "crewlet-contrast-help__title", children: text.title }),
+        /* @__PURE__ */ jsx("p", { className: "crewlet-contrast-help__intro", children: text.intro }),
+        /* @__PURE__ */ jsxs("dl", { className: "crewlet-contrast-help__levels", children: [
+          /* @__PURE__ */ jsx("dt", { children: /* @__PURE__ */ jsx(ContrastLevelTag, { level: "aa", children: text.aa.term }) }),
+          /* @__PURE__ */ jsx("dd", { children: text.aa.meaning }),
+          /* @__PURE__ */ jsx("dt", { children: /* @__PURE__ */ jsx(ContrastLevelTag, { level: "aaa", children: text.aaa.term }) }),
+          /* @__PURE__ */ jsx("dd", { children: text.aaa.meaning }),
+          /* @__PURE__ */ jsx("dt", { children: /* @__PURE__ */ jsx(ContrastLevelTag, { level: "low", children: text.low.term }) }),
+          /* @__PURE__ */ jsx("dd", { children: text.low.meaning })
+        ] })
+      ] })
+    }
+  );
+}
+
+export { ContrastHelp };

package/dist/{chunk-EXRRTKWT.js → chunk-LJHH4WWB.js}

@@ -6,7 +6,7 @@ import { IconButton } from './chunk-LACA4JGC.js';
 import { useFocusModality } from './chunk-NUZHC6MM.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './Input-VDSV7VWJ.css';
+import './Input-GMOWHZRG.css';
 import './VisuallyHidden-L552H7OA.css';
 import { forwardRef, useRef, useState, useImperativeHandle, useEffect, useId } from 'react';
 import { XGlyph } from '@crewlethq/icons/glyphs';
@@ -208,6 +208,7 @@ var FormField = ({
   helperOnFocus = false,
   error,
   limit,
+  tally,
   labelAction,
   hideLabel = false,
   as = "div",
@@ -222,9 +223,11 @@ var FormField = ({
   const helperId = helper ? `${id}-helper` : void 0;
   const errorId = error ? `${id}-error` : void 0;
   const countId = limit ? `${id}-count` : void 0;
+  const hasTally = tally !== void 0 && tally !== null && tally !== false;
+  const tallyId = hasTally ? `${id}-tally` : void 0;
   const over = limit !== void 0 && characterCountState(limit.length, limit.max) === "over";
   const extra = describedBy === void 0 ? [] : typeof describedBy === "string" ? [describedBy] : [...describedBy];
-  const described = [...extra, helperId, countId, errorId].filter(Boolean).join(" ");
+  const described = [...extra, helperId, tallyId, countId, errorId].filter(Boolean).join(" ");
   const invalid = Boolean(error) || over;
   const field = {
     id,
@@ -235,9 +238,10 @@ var FormField = ({
   const help = helper ? /* @__PURE__ */ jsx("div", { id: helperId, className: "crewlet-form-field__helper", children: helper }) : null;
   const body = /* @__PURE__ */ jsxs(Fragment, { children: [
     typeof children === "function" ? children(field) : children,
-    limit ? /* @__PURE__ */ jsxs("div", { className: "crewlet-form-field__meta", children: [
+    limit || hasTally ? /* @__PURE__ */ jsxs("div", { className: "crewlet-form-field__meta", children: [
       help ?? /* @__PURE__ */ jsx("span", { className: "crewlet-form-field__meta-spacer" }),
-      /* @__PURE__ */ jsx(CharacterCount, { id: countId, length: limit.length, max: limit.max, labels: limit.labels })
+      hasTally ? /* @__PURE__ */ jsx("span", { id: tallyId, className: "crewlet-form-field__tally", children: tally }) : null,
+      limit ? /* @__PURE__ */ jsx(CharacterCount, { id: countId, length: limit.length, max: limit.max, labels: limit.labels }) : null
     ] }) : help,
     error ? /* @__PURE__ */ jsx("div", { id: errorId, className: "crewlet-form-field__error", role: "alert", children: error }) : null
   ] });

package/dist/{chunk-MIEBOO7Y.js → chunk-NMR7AJSB.js}

@@ -1,7 +1,7 @@
 import { Modal } from './chunk-YCC2S7DF.js';
 import { useListbox, useHighlightRest } from './chunk-7KHM2FZH.js';
 import { Kbd } from './chunk-SMBKXWML.js';
-import { Input } from './chunk-EXRRTKWT.js';
+import { Input } from './chunk-LJHH4WWB.js';
 import { Count } from './chunk-BHHIIK3M.js';
 import { HIT_AREA_CLASS } from './chunk-2YTOOH3A.js';
 import { isComposing } from './chunk-H5XTJ7GJ.js';

package/dist/{chunk-JFDIMO3A.js → chunk-PGYIDNGG.js}

@@ -1,7 +1,7 @@
 import { Select } from './chunk-XQZ6EWOE.js';
 import { Modal } from './chunk-YCC2S7DF.js';
 import { CopyButton } from './chunk-7SHAFLEX.js';
-import { Callout } from './chunk-SZZRIHGT.js';
+import { Callout } from './chunk-BPCY7ZID.js';
 import { PrincipalAvatar } from './chunk-CI3VPIJN.js';
 import { useHeadingLevel, headingTag } from './chunk-PQADV6P6.js';
 import { useMediaMatch } from './chunk-RTPQDNW3.js';

package/dist/{chunk-WLSEAIVC.js → chunk-RHPBTE3F.js}

@@ -1,5 +1,5 @@
 import { Copyable } from './chunk-7SHAFLEX.js';
-import { normalizeHex } from './chunk-UZMNR366.js';
+import { normalizeHex } from './chunk-7W3LYIOC.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './ColorSwatch-DNMUFHNS.css';
 import { jsxs, jsx } from 'react/jsx-runtime';

package/dist/{chunk-NCHKKYPQ.js → chunk-RQI43UJ7.js}

@@ -1,4 +1,4 @@
-import { FormField } from './chunk-EXRRTKWT.js';
+import { FormField } from './chunk-LJHH4WWB.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './Checkbox-MB22OW6P.css';

package/dist/{chunk-H55D66IK.js → chunk-SSHDQBHR.js}

@@ -1,6 +1,6 @@
 import { Switch } from './chunk-A722MUNR.js';
 import { useReorder } from './chunk-XJ2QEBMM.js';
-import { Checkbox } from './chunk-NCHKKYPQ.js';
+import { Checkbox } from './chunk-RQI43UJ7.js';
 import { IconButton } from './chunk-LACA4JGC.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';

package/dist/{chunk-GP4YWZFO.js → chunk-U3LNU4B2.js}

@@ -1,6 +1,6 @@
 import { ConfirmModal } from './chunk-YCC2S7DF.js';
 import { InlineCode } from './chunk-5CLW2CXT.js';
-import { Callout } from './chunk-SZZRIHGT.js';
+import { Callout } from './chunk-BPCY7ZID.js';
 import './LinkInterstitial-ET4MSVSV.css';
 import { jsx, jsxs } from 'react/jsx-runtime';
 

package/dist/{chunk-GHY63X4C.js → chunk-UJ4VVK7R.js}

@@ -1,5 +1,5 @@
 import { Kbd } from './chunk-SMBKXWML.js';
-import { Textarea } from './chunk-EXRRTKWT.js';
+import { Textarea } from './chunk-LJHH4WWB.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './Composer-TXULCPPV.css';
 import { forwardRef } from 'react';

package/dist/{chunk-BEAXJARF.js → chunk-UKE7LTFZ.js}

@@ -1,15 +1,28 @@
 import { FileDrop, FilePickButton } from './chunk-THDGBD6Y.js';
-import { contrastRatio } from './chunk-NSSOWQCJ.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';
-import './LogoSlot-T2UFOJXU.css';
-import { useId } from 'react';
+import './LogoSlot-ETD74ELF.css';
+import { createContext, useId, useContext } from 'react';
 import { ImageGlyph, CircleAlertGlyph, UploadGlyph, TrashGlyph } from '@crewlethq/icons/glyphs';
 import { themes } from '@crewlethq/tokens';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
+var LogoSlotGroupContext = createContext(null);
+function useLogoSlotGroup() {
+  return useContext(LogoSlotGroupContext);
+}
+function LogoSlotGroup({ children, label, hint, className, ...rest }) {
+  const id = useId();
+  const hasHint = hint !== void 0 && hint !== null && hint !== false;
+  const hintId = hasHint ? `${id}-hint` : void 0;
+  return /* @__PURE__ */ jsx(LogoSlotGroupContext.Provider, { value: { hintId }, children: /* @__PURE__ */ jsxs("div", { ...rest, role: "group", "aria-label": label, className: cx("crewlet-logo-slot-group", className), children: [
+    /* @__PURE__ */ jsx("div", { className: "crewlet-logo-slot-group__slots", children }),
+    hasHint ? /* @__PURE__ */ jsx("p", { id: hintId, className: "crewlet-logo-slot-group__hint", children: hint }) : null
+  ] }) });
+}
 var LABELS = {
   choose: "Choose a file",
   replace: "Replace",
@@ -42,6 +55,7 @@ function LogoSlot({
   ground,
   groundColor,
   shape = "wide",
+  size = "md",
   src,
   alt,
   guide = true,
@@ -57,6 +71,7 @@ function LogoSlot({
   labels
 }) {
   const text = { ...LABELS, ...labels };
+  const group = useLogoSlotGroup();
   const labelId = useId();
   const descriptionId = useId();
   const groundValue = normalizeHex(groundColor) ?? DEFAULT_GROUNDS[ground];
@@ -86,7 +101,7 @@ function LogoSlot({
       "aria-labelledby": labelId,
       "aria-describedby": description ? descriptionId : void 0,
       "aria-busy": uploading || void 0,
-      className: cx("crewlet-logo-slot", className),
+      className: cx("crewlet-logo-slot", size === "sm" && "crewlet-logo-slot--sm", className),
       children: [
         /* @__PURE__ */ jsxs("div", { className: "crewlet-logo-slot__head", children: [
           /* @__PURE__ */ jsxs("span", { className: "crewlet-logo-slot__words", children: [
@@ -96,10 +111,12 @@ function LogoSlot({
           download && filled ? /* @__PURE__ */ jsx("span", { className: "crewlet-logo-slot__download", children: download }) : null
         ] }),
         editable ? /* @__PURE__ */ jsx(FileDrop, { title: text.drop, onFiles: take, disabled: uploading, children: stage }) : stage,
-        !filled && (!editable || emptyNote) ? /* @__PURE__ */ jsx("p", { className: "crewlet-logo-slot__empty", children: emptyNote ?? text.empty }) : null,
-        error ? /* @__PURE__ */ jsxs("p", { className: "crewlet-logo-slot__error", role: "alert", children: [
-          /* @__PURE__ */ jsx(CircleAlertGlyph, { size: "sm", "aria-hidden": "true" }),
-          /* @__PURE__ */ jsx("span", { children: error })
+        !filled && (!editable || emptyNote) || error ? /* @__PURE__ */ jsxs("div", { className: "crewlet-logo-slot__notes", children: [
+          !filled && (!editable || emptyNote) ? /* @__PURE__ */ jsx("p", { className: "crewlet-logo-slot__empty", children: emptyNote ?? text.empty }) : null,
+          error ? /* @__PURE__ */ jsxs("p", { className: "crewlet-logo-slot__error", role: "alert", children: [
+            /* @__PURE__ */ jsx(CircleAlertGlyph, { size: "sm", "aria-hidden": "true" }),
+            /* @__PURE__ */ jsx("span", { children: error })
+          ] }) : null
         ] }) : null,
         editable ? /* @__PURE__ */ jsxs("div", { className: "crewlet-logo-slot__foot", children: [
           /* @__PURE__ */ jsx(
@@ -111,7 +128,7 @@ function LogoSlot({
               accept,
               multiple: false,
               loading: uploading,
-              "aria-describedby": labelId,
+              "aria-describedby": [labelId, group?.hintId].filter(Boolean).join(" "),
               onFiles: take,
               children: filled ? text.replace : text.choose
             }
@@ -128,7 +145,7 @@ function LogoSlot({
               children: text.remove
             }
           ) : null,
-          /* @__PURE__ */ jsx("span", { className: "crewlet-logo-slot__hint", children: text.hint })
+          group ? null : /* @__PURE__ */ jsx("span", { className: "crewlet-logo-slot__hint", children: text.hint })
         ] }) : null,
         /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx("span", { role: "status", children: uploading ? text.uploading : "" }) })
       ]
@@ -136,4 +153,4 @@ function LogoSlot({
   );
 }
 
-export { LogoSlot };
+export { LogoSlot, LogoSlotGroup };

package/dist/{chunk-356JNSER.js → chunk-WQQ5T5SA.js}

@@ -1,5 +1,5 @@
 import { frameThemeMessage, readFrameHello, frameOriginMatches, negotiateBridge, FRAME_MESSAGE, portTargetOrigin, checkFrameSandbox, httpOrigin, isFrameNonce, frameFragment, readOpenLink, externalUrl, isFocusExit } from './chunk-F6V2PTN6.js';
-import { Callout } from './chunk-SZZRIHGT.js';
+import { Callout } from './chunk-BPCY7ZID.js';
 import { Skeleton } from './chunk-TEUQWOWZ.js';
 import { Button } from './chunk-OG6CL3EB.js';
 import { cx } from './chunk-ODEQTPFM.js';

package/dist/{chunk-NSSOWQCJ.js → chunk-WW7TU6HE.js}

@@ -1,11 +1,11 @@
 import { Tag } from './chunk-KYIAFNU7.js';
-import { normalizeHex } from './chunk-UZMNR366.js';
+import { normalizeHex } from './chunk-7W3LYIOC.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './ContrastBadge-CBZPGG3G.css';
 import { CircleAlertGlyph, TriangleAlertGlyph, CircleCheckGlyph } from '@crewlethq/icons/glyphs';
 import { WCAG_CONTRAST, parseHex, contrast } from '@crewlethq/tokens';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 function contrastLevel(ratio, scale = "body") {
   if (scale === "large") {
@@ -40,6 +40,17 @@ var TONE = {
   fail: "danger",
   low: "warning"
 };
+function ContrastLevelTag({ level, children }) {
+  return /* @__PURE__ */ jsx(
+    Tag,
+    {
+      size: "xs",
+      variant: TONE[level],
+      leadingIcon: level === "fail" ? /* @__PURE__ */ jsx(CircleAlertGlyph, { size: "xs" }) : level === "aa-large" || level === "low" ? /* @__PURE__ */ jsx(TriangleAlertGlyph, { size: "xs" }) : /* @__PURE__ */ jsx(CircleCheckGlyph, { size: "xs" }),
+      children
+    }
+  );
+}
 function ContrastBadge({
   foreground,
   background,
@@ -65,17 +76,9 @@ function ContrastBadge({
         /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: `${printed}:1` }),
         /* @__PURE__ */ jsx(VisuallyHidden, { children: text.ratio(printed) })
       ] }),
-      /* @__PURE__ */ jsx(
-        Tag,
-        {
-          size: "xs",
-          variant: TONE[level],
-          leadingIcon: level === "fail" ? /* @__PURE__ */ jsx(CircleAlertGlyph, { size: "xs" }) : level === "aa-large" || level === "low" ? /* @__PURE__ */ jsx(TriangleAlertGlyph, { size: "xs" }) : /* @__PURE__ */ jsx(CircleCheckGlyph, { size: "xs" }),
-          children: text.levels[level]
-        }
-      )
+      /* @__PURE__ */ jsx(ContrastLevelTag, { level, children: text.levels[level] })
     ] }) : /* @__PURE__ */ jsx("span", { className: "crewlet-contrast-badge__unmeasured", children: text.unmeasured })
   ] });
 }
 
-export { ContrastBadge, contrastLevel, contrastRatio, formatContrastRatio };
+export { ContrastBadge, ContrastLevelTag, contrastLevel, contrastRatio, formatContrastRatio };

package/dist/chunk-WXRH7NZW.js

@@ -0,0 +1,80 @@
+import { VisuallyHidden } from './chunk-BZFWDIV6.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './ChoiceButtons-HWXEF2H3.css';
+import { useId } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+function ChoiceButtons({
+  label,
+  options,
+  recommended,
+  recommendedLabel = "Recommended",
+  onChoose,
+  pending,
+  disabledReason,
+  size = "md",
+  chosen,
+  className,
+  ...rest
+}) {
+  const reasonId = useId();
+  const first = options.find((o) => o.value === recommended);
+  const ordered = first ? [first, ...options.filter((o) => o !== first)] : options;
+  const busy = pending !== void 0 && pending !== null;
+  const inert = busy || disabledReason !== void 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...rest,
+      role: "group",
+      "aria-label": label,
+      className: cx("crewlet-choice-buttons", size === "sm" && "crewlet-choice-buttons--sm", className),
+      children: [
+        ordered.map((option) => {
+          const isRecommended = option === first;
+          const isChosen = chosen !== void 0 && chosen !== null && option.value === chosen;
+          return /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              className: cx(
+                "crewlet-choice-buttons__option",
+                isRecommended && "crewlet-choice-buttons__option--recommended",
+                isChosen && "is-chosen"
+              ),
+              "aria-pressed": chosen === void 0 ? void 0 : isChosen,
+              "aria-disabled": inert || void 0,
+              "aria-busy": pending === option.value || void 0,
+              "aria-describedby": disabledReason === void 0 ? void 0 : reasonId,
+              onClick: (event) => {
+                if (inert) {
+                  event.preventDefault();
+                  return;
+                }
+                onChoose(option.value);
+              },
+              children: [
+                option.media === void 0 || option.media === null ? null : /* @__PURE__ */ jsx("span", { className: "crewlet-choice-buttons__media", "aria-hidden": "true", children: option.media }),
+                /* @__PURE__ */ jsxs("span", { className: "crewlet-choice-buttons__text", children: [
+                  /* @__PURE__ */ jsx("span", { className: "crewlet-choice-buttons__label", children: option.label }),
+                  option.detail === void 0 ? null : /* @__PURE__ */ jsxs(Fragment, { children: [
+                    " ",
+                    /* @__PURE__ */ jsx("span", { className: "crewlet-choice-buttons__detail", children: option.detail })
+                  ] })
+                ] }),
+                isRecommended ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                  " ",
+                  /* @__PURE__ */ jsx("span", { className: "crewlet-choice-buttons__note", children: recommendedLabel })
+                ] }) : null
+              ]
+            },
+            option.value
+          );
+        }),
+        disabledReason === void 0 ? null : /* @__PURE__ */ jsx(VisuallyHidden, { id: reasonId, children: disabledReason })
+      ]
+    }
+  );
+}
+
+export { ChoiceButtons };

package/dist/{chunk-P3OIM6OC.js → chunk-X7WEE3EK.js}

@@ -1,5 +1,5 @@
 import { safeFontFamily, fontStack } from './chunk-5SGHW42B.js';
-import { normalizeHex } from './chunk-UZMNR366.js';
+import { normalizeHex } from './chunk-7W3LYIOC.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import '@crewlethq/tokens/css/brand-scope';
 import './BrandScope-H2KZHGT7.css';

package/dist/generated/index.d.ts

@@ -45,6 +45,7 @@ export * from '../Checkbox/index.js';
 export * from '../ChoiceButtons/index.js';
 export * from '../ChoiceList/index.js';
 export * from '../CodeBlock/index.js';
+export * from '../ColorChip/index.js';
 export * from '../ColorField/index.js';
 export * from '../ColorSwatch/index.js';
 export * from '../Combobox/index.js';
@@ -55,6 +56,7 @@ export * from '../ConfirmField/index.js';
 export * from '../ConflictNote/index.js';
 export * from '../Container/index.js';
 export * from '../ContrastBadge/index.js';
+export * from '../ContrastHelp/index.js';
 export * from '../Copyable/index.js';
 export * from '../Count/index.js';
 export * from '../CursorFlag/index.js';