@crewlethq/ui 0.51.0 → 0.52.0

package/dist/{LogoSlot-T2UFOJXU.css → LogoSlot-ETD74ELF.css}

@@ -124,6 +124,13 @@
   opacity: 0.5;
 }
 
+.crewlet-logo-slot__notes {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+  min-width: 0;
+}
+
 .crewlet-logo-slot__empty {
   margin: 0;
   color: var(--color-text-tertiary);
@@ -157,3 +164,94 @@
   color: var(--color-text-tertiary);
   font-size: var(--font-size-xs);
 }
+
+/*
+ * A GROUP OF SLOTS, aligned row by row (LogoSlotGroup.tsx). Each slot is a
+ * subgrid spanning the group's four rows: its name and description, its
+ * stage, what is said under it, and its actions. A row holds the tallest of
+ * its parts across the slots, so every stage, note and action row starts on
+ * one line. The steps between the parts are margins rather than the grid's
+ * gap, so a row no slot uses (no notes anywhere) takes no room at all.
+ */
+.crewlet-logo-slot-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3);
+  min-width: 0;
+}
+
+.crewlet-logo-slot-group__slots {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(min(14rem, 100%), 1fr));
+  column-gap: var(--spacing-5);
+  row-gap: var(--spacing-6);
+}
+
+.crewlet-logo-slot-group__slots > .crewlet-logo-slot {
+  display: grid;
+  grid-row: span 4;
+  grid-template-rows: subgrid;
+  row-gap: 0;
+  align-content: start;
+}
+
+.crewlet-logo-slot-group__slots > .crewlet-logo-slot > .crewlet-logo-slot__head {
+  grid-row: 1;
+  margin-block-end: var(--spacing-2);
+}
+
+.crewlet-logo-slot-group__slots > .crewlet-logo-slot > :is(.crewlet-logo-slot__stage, .crewlet-file-drop) {
+  grid-row: 2;
+}
+
+.crewlet-logo-slot-group__slots > .crewlet-logo-slot > .crewlet-logo-slot__notes {
+  grid-row: 3;
+  margin-block-start: var(--spacing-2);
+}
+
+.crewlet-logo-slot-group__slots > .crewlet-logo-slot > .crewlet-logo-slot__foot {
+  grid-row: 4;
+  margin-block-start: var(--spacing-2);
+}
+
+.crewlet-logo-slot-group__hint {
+  margin: 0;
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-xs);
+  line-height: var(--font-line-height-normal);
+}
+
+/*
+ * SMALL: a thumbnail of the slot for a summary of what is set. The stage
+ * keeps its ground, its edge and the space the logo keeps, at half the height
+ * with a tighter inset, and the words step down to the summary's sizes.
+ */
+.crewlet-logo-slot--sm {
+  --crewlet-logo-slot-height: calc(var(--size-row-lg) * 1.5);
+  --crewlet-logo-slot-padding: var(--spacing-2);
+  --crewlet-logo-slot-clear: var(--spacing-1);
+
+  gap: var(--spacing-1);
+}
+
+.crewlet-logo-slot--sm .crewlet-logo-slot__label {
+  font-size: var(--font-size-xs);
+}
+
+.crewlet-logo-slot--sm .crewlet-logo-slot__description,
+.crewlet-logo-slot--sm .crewlet-logo-slot__empty {
+  font-size: var(--font-size-2xs);
+}
+
+.crewlet-logo-slot--sm .crewlet-logo-slot__stage {
+  border-radius: var(--radius-md);
+}
+
+.crewlet-logo-slot--sm .crewlet-logo-slot__placeholder {
+  width: calc(var(--size-row-lg) * 1.5);
+  height: var(--size-row-sm);
+}
+
+.crewlet-logo-slot--sm .crewlet-logo-slot__stage--square .crewlet-logo-slot__placeholder {
+  width: var(--size-row-sm);
+}

package/dist/PrincipalPicker/index.js

@@ -1,10 +1,10 @@
-export { PrincipalPicker } from '../chunk-KHZYAEGZ.js';
-import '../chunk-P5JBDHWC.js';
+export { PrincipalPicker } from '../chunk-G5SUSCWL.js';
+import '../chunk-C6Z3MLSA.js';
 import '../chunk-7KHM2FZH.js';
 import '../chunk-CI3VPIJN.js';
 import '../chunk-5AQBPHZD.js';
 import '../chunk-PZKHBB7D.js';
-import '../chunk-EXRRTKWT.js';
+import '../chunk-LJHH4WWB.js';
 import '../chunk-XCUUI7E7.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-RSAQOKH3.js';

package/dist/RichEditor/index.js

@@ -1,4 +1,4 @@
-export { RichEditor, preloadRichEditor } from '../chunk-KHP7TJF7.js';
+export { RichEditor, preloadRichEditor } from '../chunk-KFR75JOK.js';
 export { RICH_EDITOR_LABELS, richEditorLabels } from '../chunk-CSQTDGTS.js';
 import '../chunk-BAKPMH3S.js';
 import '../chunk-BPCY7ZID.js';

package/dist/SheetColumnEditor/index.js

@@ -1,4 +1,4 @@
-export { SHEET_COLUMN_EDITOR_LABELS, SheetColumnEditor, SheetColumnTypeGlyph } from '../chunk-VTSJMDGP.js';
+export { SHEET_COLUMN_EDITOR_LABELS, SheetColumnEditor, SheetColumnTypeGlyph } from '../chunk-J53T2QAH.js';
 import '../chunk-XQZ6EWOE.js';
 import '../chunk-FFMCMSJB.js';
 import '../chunk-7KHM2FZH.js';
@@ -10,9 +10,9 @@ import '../chunk-6FVGSWLS.js';
 import '../chunk-ILFEWRLG.js';
 import '../chunk-WIATRXEJ.js';
 import '../chunk-EGMQURBR.js';
-import '../chunk-NCHKKYPQ.js';
+import '../chunk-RQI43UJ7.js';
 import '../chunk-SMBKXWML.js';
-import '../chunk-EXRRTKWT.js';
+import '../chunk-LJHH4WWB.js';
 import '../chunk-XCUUI7E7.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-PQADV6P6.js';

package/dist/Switcher/index.js

@@ -1,10 +1,10 @@
-export { Switcher } from '../chunk-VBIM6HFC.js';
+export { Switcher } from '../chunk-GPZXBJFU.js';
 import '../chunk-YCC2S7DF.js';
 import '../chunk-7KHM2FZH.js';
 import '../chunk-KHJIEPZV.js';
 import '../chunk-FYTIJM2T.js';
 import '../chunk-TEUQWOWZ.js';
-import '../chunk-EXRRTKWT.js';
+import '../chunk-LJHH4WWB.js';
 import '../chunk-XCUUI7E7.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-RSAQOKH3.js';

package/dist/TimeWindowPicker/index.js

@@ -1,9 +1,9 @@
-export { DEFAULT_TIME_WINDOW_LABELS, TIME_WINDOW_SPANS, TimeWindowPicker, describeTimeWindow, isTimeWindowSet, parseTimeWindowDuration, resolveTimeWindow, timeWindowMatchesPreset } from '../chunk-R6R2UHVG.js';
+export { DEFAULT_TIME_WINDOW_LABELS, TIME_WINDOW_SPANS, TimeWindowPicker, describeTimeWindow, isTimeWindowSet, parseTimeWindowDuration, resolveTimeWindow, timeWindowMatchesPreset } from '../chunk-6VQA2LZC.js';
 import '../chunk-XQZ6EWOE.js';
 import '../chunk-7KHM2FZH.js';
 import '../chunk-GXQ3B46I.js';
 import '../chunk-KHJIEPZV.js';
-import '../chunk-EXRRTKWT.js';
+import '../chunk-LJHH4WWB.js';
 import '../chunk-XCUUI7E7.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-RSAQOKH3.js';

package/dist/{chunk-ZCIL5IHU.js → chunk-2GIWL7IS.js}

@@ -1,5 +1,5 @@
 import { InlineCode } from './chunk-5CLW2CXT.js';
-import { FormField, Input } from './chunk-EXRRTKWT.js';
+import { FormField, Input } from './chunk-LJHH4WWB.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 function confirmMatches(typed, phrase) {

package/dist/{chunk-V7GOOXPK.js → chunk-3NXWH5NC.js}

@@ -1,7 +1,7 @@
 import { Timeline } from './chunk-AUQPBL4O.js';
 import { Section } from './chunk-JQ7IFSF6.js';
 import { Disclosure } from './chunk-OGXHZHRX.js';
-import { Composer } from './chunk-GHY63X4C.js';
+import { Composer } from './chunk-UJ4VVK7R.js';
 import { ArtifactPanel } from './chunk-NBDN5JZV.js';
 import { Button } from './chunk-OG6CL3EB.js';
 import { cx } from './chunk-ODEQTPFM.js';

package/dist/{chunk-WQ7S7CKZ.js → chunk-5O72FSOK.js}

@@ -2,7 +2,7 @@ import { Modal } from './chunk-YCC2S7DF.js';
 import { useClipboard } from './chunk-STJ7QBC3.js';
 import { EmptyValue } from './chunk-EUCC37WY.js';
 import { useCardHeaderSlot } from './chunk-AV2DXAEL.js';
-import { Checkbox } from './chunk-NCHKKYPQ.js';
+import { Checkbox } from './chunk-RQI43UJ7.js';
 import { Menu } from './chunk-TMM32U7D.js';
 import { Button } from './chunk-OG6CL3EB.js';
 import { IconButton } from './chunk-LACA4JGC.js';

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

@@ -1,5 +1,5 @@
 import { normalizeHex, parseColourInput } from './chunk-7W3LYIOC.js';
-import { FormField, Input, InputAffix } from './chunk-EXRRTKWT.js';
+import { FormField, Input, InputAffix } from './chunk-LJHH4WWB.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './ColorField-2OIOWT3Z.css';
 import { useId, useState } from 'react';

package/dist/{chunk-R6R2UHVG.js → chunk-6VQA2LZC.js}

@@ -1,7 +1,7 @@
 import { Select } from './chunk-XQZ6EWOE.js';
 import { today, shiftMonth, CalendarGrid, compareDays } from './chunk-GXQ3B46I.js';
 import { Popover } from './chunk-KHJIEPZV.js';
-import { Input } from './chunk-EXRRTKWT.js';
+import { Input } from './chunk-LJHH4WWB.js';
 import { Button } from './chunk-OG6CL3EB.js';
 import { isComposing } from './chunk-H5XTJ7GJ.js';
 import { IconButton } from './chunk-LACA4JGC.js';

package/dist/{chunk-FB5CFQTG.js → chunk-7PE56HHD.js}

@@ -1,4 +1,4 @@
-import { Checkbox } from './chunk-NCHKKYPQ.js';
+import { Checkbox } from './chunk-RQI43UJ7.js';
 import { EmptyState } from './chunk-PPUR46MK.js';
 import { useMediaMatch } from './chunk-RTPQDNW3.js';
 import { Button } from './chunk-OG6CL3EB.js';

package/dist/{chunk-P5JBDHWC.js → chunk-C6Z3MLSA.js}

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

package/dist/{chunk-UUTEWGO6.js → chunk-CQEYF3UW.js}

@@ -1,13 +1,13 @@
 import { useReorder } from './chunk-XJ2QEBMM.js';
 import { Kbd } from './chunk-SMBKXWML.js';
-import { FormField, Textarea } from './chunk-EXRRTKWT.js';
+import { FormField, Textarea } from './chunk-LJHH4WWB.js';
 import { characterCountState, CharacterCount, countCharacters } from './chunk-XCUUI7E7.js';
 import { announce } from './chunk-RSAQOKH3.js';
 import { Button } from './chunk-OG6CL3EB.js';
 import { isComposing } from './chunk-H5XTJ7GJ.js';
 import { IconButton } from './chunk-LACA4JGC.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './ListInput-P2ECUQJ2.css';
+import './ListInput-RLQND5QK.css';
 import { forwardRef, useState, useRef, useImperativeHandle, useLayoutEffect, useId } from 'react';
 import { GripVerticalGlyph, ArrowUpGlyph, ArrowDownGlyph, XGlyph } from '@crewlethq/icons/glyphs';
 import { jsx, jsxs } from 'react/jsx-runtime';
@@ -41,7 +41,8 @@ var ListInput = forwardRef(function ListInput2({
   maxLength,
   undoRemove = false,
   itemError,
-  fullMessage = (max) => `The list is full at ${max}. Remove one to add another.`,
+  fullMessage = () => "That's the most. Remove one to add another.",
+  tallyLabel = (count, max) => `${count} of ${max}`,
   addLabel = (name) => `Add ${name}`,
   addText = "Add",
   itemLabel = (name, position) => `${name} ${position}`,
@@ -240,7 +241,7 @@ var ListInput = forwardRef(function ListInput2({
   const addControl = /* @__PURE__ */ jsx(
     Button,
     {
-      size: "small",
+      size: "medium",
       variant: "secondary",
       "aria-label": addLabel(itemName),
       disabled: disabled || full || draftRefused,
@@ -258,6 +259,7 @@ var ListInput = forwardRef(function ListInput2({
       helper,
       helperOnFocus,
       error,
+      tally: maxItems === void 0 ? void 0 : tallyLabel(count, maxItems),
       className: "crewlet-list-input",
       children: [
         full ? (

package/dist/{chunk-S63QOMXC.js → chunk-CUL5XV6O.js}

@@ -4,7 +4,7 @@ import { RelativeTime } from './chunk-3CZ7XAVY.js';
 import { AvatarStack } from './chunk-5AQBPHZD.js';
 import { ArtifactKindGround } from './chunk-RV6XB5UV.js';
 import { Card } from './chunk-INHXF2CL.js';
-import { Checkbox } from './chunk-NCHKKYPQ.js';
+import { Checkbox } from './chunk-RQI43UJ7.js';
 import { ArtifactAccessGlyph } from './chunk-BGLKLXL3.js';
 import { ArtifactKindGlyph } from './chunk-RSKW25Y5.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';

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-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-WX6IJJ4U.js → chunk-GRKGLZFM.js}

@@ -1,12 +1,12 @@
 import { PageHeader } from './chunk-DKB73KZI.js';
-import { DataTable } from './chunk-WQ7S7CKZ.js';
+import { DataTable } from './chunk-5O72FSOK.js';
 import { DateTimePicker } from './chunk-ZFM5L7M4.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-KHP7TJF7.js → chunk-KFR75JOK.js}

@@ -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-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-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-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-2UFUP2ZH.js → chunk-UKE7LTFZ.js}

@@ -4,12 +4,25 @@ 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-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 };