@crewlethq/ui 0.32.0 → 0.33.0

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

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

package/dist/{chunk-EBNI36UQ.js → chunk-T46NR3WP.js}

@@ -1,10 +1,10 @@
-import { useMediaMatch } from './chunk-IG75YMUN.js';
-import { Menu } from './chunk-2HIOJ4YZ.js';
+import { useMediaMatch } from './chunk-RTPQDNW3.js';
+import { Menu } from './chunk-3EB2AV3H.js';
 import { useModalLayer, focusables } from './chunk-R25RGPUB.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './AppShell-GCM4TDVY.css';
+import './AppShell-JTSEOA57.css';
 import { createContext, forwardRef, useContext, useId, useState, useRef, useCallback, useEffect, useLayoutEffect } from 'react';
 import { breakpoint } from '@crewlethq/tokens';
 import { ChevronUpGlyph, ChevronsUpDownGlyph, ChevronRightGlyph, MenuGlyph } from '@crewlethq/icons/glyphs';

package/dist/{chunk-FPS3JIPQ.js → chunk-TC7DJTXI.js}

@@ -1,5 +1,5 @@
 import { cx } from './chunk-ODEQTPFM.js';
-import './EditingStatus-L6THUAN7.css';
+import './EditingStatus-NNA2CKIL.css';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var LABELS = {

package/dist/{chunk-W5J7R5EB.js → chunk-TEUQWOWZ.js}

@@ -30,7 +30,7 @@ var Placeholder = ({
           style: {
             height: typeof height === "number" ? `${height}px` : height,
             width: typeof width === "number" ? `${width}px` : width,
-            borderRadius: `${borderRadius}px`
+            borderRadius: typeof borderRadius === "number" ? `${borderRadius}px` : borderRadius
           },
           children: /* @__PURE__ */ jsx("div", { className: "crewlet-skeleton__glow-wave" })
         }

package/dist/chunk-THROPJZC.js

@@ -0,0 +1,115 @@
+import { SlideNav } from './chunk-6VOS2GMB.js';
+import { SlideStage, SLIDE_WIDTH, SLIDE_HEIGHT } from './chunk-LV4APO72.js';
+import { Eyebrow } from './chunk-RK4XPHVG.js';
+import { Button } from './chunk-OG6CL3EB.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './PresenterView-T3EXIQ5S.css';
+import { useRef, useState, useEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var LABELS = {
+  current: (position, total, title) => `Slide ${position} of ${total}, ${title}`,
+  next: (title) => `Next, ${title}`,
+  onScreen: "Current",
+  upNext: "Next",
+  end: "End of the deck",
+  notes: "Speaker notes",
+  noNotes: "No notes for this slide.",
+  timer: "Time presenting",
+  pause: "Pause",
+  resume: "Resume",
+  reset: "Reset",
+  previous: "Previous slide",
+  forward: "Next slide",
+  position: (position, total) => `${position} of ${total}`
+};
+function formatStopwatch(ms) {
+  const total = Math.max(0, Math.floor(ms / 1e3));
+  const h = Math.floor(total / 3600);
+  const m = Math.floor(total % 3600 / 60);
+  const s = total % 60;
+  const ss = String(s).padStart(2, "0");
+  return h > 0 ? `${h}:${String(m).padStart(2, "0")}:${ss}` : `${m}:${ss}`;
+}
+function PresenterView({
+  current,
+  currentTitle,
+  next,
+  nextTitle = "",
+  notes,
+  position,
+  total,
+  onNext,
+  onPrevious,
+  now = Date.now,
+  className,
+  labels
+}) {
+  const text = { ...LABELS, ...labels };
+  const clock = useRef(now);
+  clock.current = now;
+  const [banked, setBanked] = useState(0);
+  const [runningSince, setRunningSince] = useState(() => now());
+  const [tick, setTick] = useState(0);
+  useEffect(() => {
+    if (runningSince === null) return void 0;
+    const id = setInterval(() => setTick((t) => t + 1), 1e3);
+    return () => clearInterval(id);
+  }, [runningSince]);
+  const elapsed = banked + (runningSince === null ? 0 : clock.current() - runningSince);
+  const pause = () => {
+    if (runningSince === null) {
+      setRunningSince(clock.current());
+    } else {
+      setBanked(elapsed);
+      setRunningSince(null);
+    }
+  };
+  const reset = () => {
+    setBanked(0);
+    setRunningSince(runningSince === null ? null : clock.current());
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cx("crewlet-presenter", className),
+      style: { "--crewlet-presenter-ratio": SLIDE_WIDTH / SLIDE_HEIGHT },
+      children: [
+        /* @__PURE__ */ jsxs("section", { className: "crewlet-presenter__main", "aria-label": text.onScreen, children: [
+          /* @__PURE__ */ jsx(Eyebrow, { as: "p", className: "crewlet-presenter__caption", children: text.onScreen }),
+          /* @__PURE__ */ jsxs("div", { className: "crewlet-presenter__screen", children: [
+            /* @__PURE__ */ jsx(SlideStage, { label: text.current(position, total, currentTitle), framed: true, children: current }),
+            /* @__PURE__ */ jsx(
+              SlideNav,
+              {
+                className: "crewlet-presenter__controls",
+                position,
+                total,
+                onPrevious,
+                onNext,
+                labels: { previous: text.previous, next: text.forward, end: text.end, position: text.position }
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("aside", { className: "crewlet-presenter__side", children: [
+          /* @__PURE__ */ jsxs("section", { className: "crewlet-presenter__next", "aria-label": text.upNext, children: [
+            /* @__PURE__ */ jsx(Eyebrow, { as: "p", className: "crewlet-presenter__caption", children: text.upNext }),
+            next ? /* @__PURE__ */ jsx(SlideStage, { label: text.next(nextTitle), framed: true, children: next }) : /* @__PURE__ */ jsx("p", { className: "crewlet-presenter__end", children: text.end })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "crewlet-presenter__timer", children: [
+            /* @__PURE__ */ jsx("span", { role: "timer", "aria-label": text.timer, className: "crewlet-presenter__elapsed", children: formatStopwatch(elapsed) }),
+            /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", onClick: pause, children: runningSince === null ? text.resume : text.pause }),
+            /* @__PURE__ */ jsx(Button, { size: "small", variant: "ghost", onClick: reset, children: text.reset })
+          ] }),
+          /* @__PURE__ */ jsxs("section", { className: "crewlet-presenter__notes", "aria-label": text.notes, children: [
+            /* @__PURE__ */ jsx(Eyebrow, { as: "p", className: "crewlet-presenter__caption", children: text.notes }),
+            /* @__PURE__ */ jsx("div", { className: "crewlet-presenter__notes-body", children: notes ? /* @__PURE__ */ jsx("p", { children: notes }) : /* @__PURE__ */ jsx("p", { className: "crewlet-presenter__empty", children: text.noNotes }) })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+
+export { PresenterView, formatStopwatch };

package/dist/{chunk-IDBHX5SR.js → chunk-TRQCHF2F.js}

@@ -1,4 +1,4 @@
-import { readMarkdown, writeMarkdown } from './chunk-YFW4MTK4.js';
+import { readMarkdown, writeMarkdown } from './chunk-C7DKX453.js';
 
 // src/RichEditor/roundtrip.ts
 function roundTripMarkdown(markdown) {

package/dist/{chunk-M3LUNN7F.js → chunk-TYKQ33CL.js}

@@ -1,5 +1,5 @@
 import { cx } from './chunk-ODEQTPFM.js';
-import './Document-G3YTZIUL.css';
+import './Document-JUGCSQ4L.css';
 import { jsx } from 'react/jsx-runtime';
 
 function Document({ as: Tag = "div", size = "md", measure = "normal", className, children, ...rest }) {
@@ -20,5 +20,16 @@ function Document({ as: Tag = "div", size = "md", measure = "normal", className,
 function DocumentTitle({ as: Tag = "h1", className, children, ...rest }) {
   return /* @__PURE__ */ jsx(Tag, { ...rest, className: cx("crewlet-document-title", className), children });
 }
+function DocumentTitleField({ error = false, className, ...rest }) {
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      ...rest,
+      type: "text",
+      "aria-invalid": error || void 0,
+      className: cx("crewlet-document-title", "crewlet-document-title-field", className)
+    }
+  );
+}
 
-export { Document, DocumentTitle };
+export { Document, DocumentTitle, DocumentTitleField };

package/dist/{chunk-VVRL27HM.js → chunk-ULPL26BU.js}

@@ -1,4 +1,4 @@
-import { Modal } from './chunk-I3KKZ2O3.js';
+import { Modal } from './chunk-XEGZHHRH.js';
 import { useListbox, useHighlightRest } from './chunk-F73MC7EZ.js';
 import { Input } from './chunk-6QFAK2WV.js';
 import { Kbd } from './chunk-SMBKXWML.js';
@@ -6,7 +6,7 @@ import { Count } from './chunk-BHHIIK3M.js';
 import { isComposing } from './chunk-R25RGPUB.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './CommandPalette-HBTNKHZQ.css';
+import './CommandPalette-7CFGVBND.css';
 import { useId, useMemo, useRef, useEffect, useState } from 'react';
 import { ChevronLeftGlyph, SearchGlyph } from '@crewlethq/icons/glyphs';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';

package/dist/{chunk-6AH2XJ3Q.js → chunk-UNXLTJU7.js}

@@ -1,8 +1,8 @@
-import { Document } from './chunk-M3LUNN7F.js';
-import { ArtifactKindGlyph } from './chunk-GOSQXEZU.js';
+import { Document } from './chunk-TYKQ33CL.js';
+import { ArtifactKindGlyph } from './chunk-DFZMYB5X.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './ArtifactCover-D4MBEJ5H.css';
-import './DashboardCover-RMINBODB.css';
+import './DashboardCover-KYGYMRKW.css';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 function DocCover({ children, className }) {

package/dist/{chunk-FC4YTTFJ.js → chunk-UQGFHNDI.js}

@@ -1,5 +1,5 @@
 import { useListbox, useOptionKeys, useHighlightRest } from './chunk-F73MC7EZ.js';
-import { useLayerContainer, viewportBounds, outsideBounds, placePopup, LAYER_GAP, LAYER_REPOSITION_EVENT } from './chunk-HMPFGIWM.js';
+import { useLayerContainer, viewportBounds, anchorGone, placePopup, LAYER_GAP, LAYER_REPOSITION_EVENT } from './chunk-OMV5W53A.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './Select-2P7AWUE4.css';
 import { forwardRef, useId, useMemo, useState, useRef, useCallback, useEffect, useLayoutEffect } from 'react';
@@ -310,8 +310,7 @@ var ListboxSelect = forwardRef(function ListboxSelect2({
       width: rect.width,
       height: rect.height
     };
-    const whole = { x: 0, y: 0, width: host.width, height: host.height };
-    if (outsideBounds(local, whole)) {
+    if (anchorGone(rect, host, inHost)) {
       close(panel.current?.contains(document.activeElement) ?? false);
       return;
     }

package/dist/{chunk-EBJREOKS.js → chunk-UXXJDIYE.js}

@@ -1,14 +1,14 @@
 import { useClipboard } from './chunk-STJ7QBC3.js';
-import { Modal } from './chunk-I3KKZ2O3.js';
-import { Checkbox } from './chunk-7T42VQQT.js';
+import { Modal } from './chunk-XEGZHHRH.js';
+import { Checkbox } from './chunk-CPEPST4S.js';
 import { EmptyValue } from './chunk-EUCC37WY.js';
 import { useCardHeaderSlot } from './chunk-AV2DXAEL.js';
-import { Menu } from './chunk-2HIOJ4YZ.js';
+import { Menu } from './chunk-3EB2AV3H.js';
 import { Button } from './chunk-OG6CL3EB.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './DataTable-WZK3V62B.css';
+import './DataTable-NL2YWAIA.css';
 import React, { useState, useCallback, useMemo, useRef, useLayoutEffect, useEffect, useId } from 'react';
 import { createPortal } from 'react-dom';
 import { CheckGlyph, CircleAlertGlyph, CopyGlyph, ChevronsLeftGlyph, ChevronLeftGlyph, ChevronRightGlyph, ChevronsRightGlyph, SettingsGlyph, GripVerticalGlyph, ChevronUpGlyph, ChevronDownGlyph, TrashGlyph, ArrowUpGlyph, ArrowDownGlyph, ChevronsUpDownGlyph, RotateCcwGlyph } from '@crewlethq/icons/glyphs';

package/dist/{chunk-5LUI3WQP.js → chunk-V43UVX4H.js}

@@ -1,6 +1,6 @@
 import { Switch } from './chunk-A722MUNR.js';
 import { useReorder } from './chunk-XJ2QEBMM.js';
-import { Checkbox } from './chunk-7T42VQQT.js';
+import { Checkbox } from './chunk-CPEPST4S.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';

package/dist/{chunk-W4XYY73O.js → chunk-VHZ3AXJD.js}

@@ -1,5 +1,5 @@
 import { Timeline } from './chunk-AUQPBL4O.js';
-import { PrincipalAvatar } from './chunk-4KP4RC3O.js';
+import { PrincipalAvatar } from './chunk-CI3VPIJN.js';
 import { RelativeTime } from './chunk-3CZ7XAVY.js';
 import { Button } from './chunk-OG6CL3EB.js';
 import { cx } from './chunk-ODEQTPFM.js';

package/dist/{chunk-HJEVSQN6.js → chunk-VL6CUNSX.js}

@@ -2,8 +2,8 @@ import { useRoving, tabStop } from './chunk-RKKO7QHH.js';
 import { Count } from './chunk-BHHIIK3M.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './Tabs-CJGO35BH.css';
-import React, { useRef, useLayoutEffect } from 'react';
+import './Tabs-MMZXV5EF.css';
+import React, { useRef, useImperativeHandle, useLayoutEffect } from 'react';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 
 function tabId(panelId, value) {
@@ -26,9 +26,12 @@ function Tabs({
   value,
   onValueChange,
   panelId,
-  renderItem
+  renderItem,
+  trailing,
+  ref
 }) {
   const navRef = useRef(null);
+  useImperativeHandle(ref, () => navRef.current, []);
   const { buttons, onKeyDown } = useRoving(items.length, null);
   useLayoutEffect(() => {
     if (variant !== "underline") return;
@@ -81,7 +84,7 @@ function Tabs({
       item.marker ? item.marker.tone === "danger" ? /* @__PURE__ */ jsxs("span", { className: "crewlet-tabs__marker crewlet-tabs__marker--danger", children: [
         /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: item.marker.count }),
         /* @__PURE__ */ jsx(VisuallyHidden, { children: item.marker.label })
-      ] }) : /* @__PURE__ */ jsx("span", { className: `crewlet-tabs__marker crewlet-tabs__marker--${item.marker.tone}`, children: /* @__PURE__ */ jsx(VisuallyHidden, { children: item.marker.label }) }) : item.count != null ? /* @__PURE__ */ jsx(Count, { value: item.count }) : null
+      ] }) : /* @__PURE__ */ jsx("span", { className: `crewlet-tabs__marker crewlet-tabs__marker--${item.marker.tone}`, children: /* @__PURE__ */ jsx(VisuallyHidden, { children: item.marker.label }) }) : item.count != null && item.count !== "" ? /* @__PURE__ */ jsx(Count, { value: item.count }) : null
     ] });
     const onSelect = () => {
       if (item.disabled) return;
@@ -112,7 +115,10 @@ function Tabs({
     );
   });
   if (renderItem) {
-    return /* @__PURE__ */ jsx("nav", { ref: navRef, className: rootClass, "aria-label": ariaLabel, children: rows });
+    return /* @__PURE__ */ jsxs("nav", { ref: navRef, className: rootClass, "aria-label": ariaLabel, children: [
+      rows,
+      trailing
+    ] });
   }
   return /* @__PURE__ */ jsx("div", { ref: navRef, className: rootClass, "aria-label": ariaLabel, role: "tablist", children: rows });
 }

package/dist/{chunk-XDTYBF2F.js → chunk-W5XCNEZC.js}

@@ -32,5 +32,43 @@ function useFullscreen(ref) {
   }, [enter, exit, ref]);
   return { supported, active, enter, exit, toggle };
 }
+var IDLE_AFTER_MS = 2500;
+function useIdle(ref, enabled, timeout = IDLE_AFTER_MS) {
+  const [idle, setIdle] = useState(false);
+  useEffect(() => {
+    const el = ref.current;
+    if (!el || !enabled) {
+      setIdle(false);
+      return void 0;
+    }
+    let timer;
+    const rest = () => {
+      clearTimeout(timer);
+      timer = setTimeout(() => {
+        const focused = document.activeElement;
+        if (focused instanceof HTMLElement && focused !== el && el.contains(focused) && focused.matches(":focus-visible")) {
+          rest();
+          return;
+        }
+        setIdle(true);
+      }, timeout);
+    };
+    const wake = () => {
+      setIdle(false);
+      rest();
+    };
+    rest();
+    el.addEventListener("pointermove", wake);
+    el.addEventListener("pointerdown", wake);
+    el.addEventListener("focusin", wake);
+    return () => {
+      clearTimeout(timer);
+      el.removeEventListener("pointermove", wake);
+      el.removeEventListener("pointerdown", wake);
+      el.removeEventListener("focusin", wake);
+    };
+  }, [ref, enabled, timeout]);
+  return enabled && idle;
+}
 
-export { useFullscreen };
+export { IDLE_AFTER_MS, useFullscreen, useIdle };

package/dist/{chunk-LDJ3J4TQ.js → chunk-WGD2HX2A.js}

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

package/dist/{chunk-FQCLKD7U.js → chunk-WKEPORNM.js}

@@ -1,2 +1,2 @@
-import './Tabs-CJGO35BH.css';
+import './Tabs-MMZXV5EF.css';
 import './SegmentedControl-FLI45IOW.css';

package/dist/{chunk-I3KKZ2O3.js → chunk-XEGZHHRH.js}

@@ -1,10 +1,10 @@
 import { HeadingLevelProvider } from './chunk-PQADV6P6.js';
-import { useLayerContainer } from './chunk-HMPFGIWM.js';
+import { useLayerContainer } from './chunk-OMV5W53A.js';
 import { focusables, useModalLayer, useBodyScrollLock } from './chunk-R25RGPUB.js';
 import { Button } from './chunk-OG6CL3EB.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './Modal-XOSV6FAH.css';
+import './Modal-7MWRCWAI.css';
 import { useId, useRef, useCallback } from 'react';
 import { createPortal } from 'react-dom';
 import { ChevronLeftGlyph, XGlyph } from '@crewlethq/icons/glyphs';
@@ -104,40 +104,49 @@ function ModalFrame({
   };
   const closes = banded && showCloseButton;
   const content = /* @__PURE__ */ jsxs(Fragment, { children: [
-    banded && (given(title) || given(subtitle) || given(headerActions) || closes || onBack) ? /* @__PURE__ */ jsxs("div", { className: cx("crewlet-modal__header", sheet ? "crewlet-modal__header--sheet" : void 0), children: [
-      onBack ? /* @__PURE__ */ jsx(
-        IconButton,
-        {
-          className: "crewlet-modal__back",
-          label: backLabel,
-          icon: /* @__PURE__ */ jsx(ChevronLeftGlyph, { size: "md" }),
-          onClick: onBack
-        }
-      ) : null,
-      given(icon) ? /* @__PURE__ */ jsx("span", { className: "crewlet-modal__icon", "aria-hidden": "true", children: icon }) : null,
-      /* @__PURE__ */ jsxs("div", { className: "crewlet-modal__heading", children: [
-        given(title) ? /* @__PURE__ */ jsx(
-          "p",
-          {
-            className: cx("crewlet-modal__title", sheet ? "crewlet-modal__title--sheet" : void 0),
-            id: titleId,
-            children: title
-          }
-        ) : null,
-        given(subtitle) ? /* @__PURE__ */ jsx("p", { className: "crewlet-modal__subtitle", id: subtitleId, children: subtitle }) : null
-      ] }),
-      given(headerActions) ? /* @__PURE__ */ jsx("div", { className: "crewlet-modal__actions", children: headerActions }) : null,
-      closes ? /* @__PURE__ */ jsx(
-        IconButton,
-        {
-          className: "crewlet-modal__close",
-          label: closeLabel,
-          icon: /* @__PURE__ */ jsx(XGlyph, { size: "md" }),
-          onClick: onClose,
-          disabledReason: dismissable ? void 0 : closeDisabledReason
-        }
-      ) : null
-    ] }) : null,
+    banded && (given(title) || given(subtitle) || given(headerActions) || closes || onBack) ? /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cx(
+          "crewlet-modal__header",
+          sheet ? "crewlet-modal__header--sheet" : given(subtitle) ? "crewlet-modal__header--subtitled" : void 0
+        ),
+        children: [
+          onBack ? /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              className: "crewlet-modal__back",
+              label: backLabel,
+              icon: /* @__PURE__ */ jsx(ChevronLeftGlyph, { size: "md" }),
+              onClick: onBack
+            }
+          ) : null,
+          given(icon) ? /* @__PURE__ */ jsx("span", { className: "crewlet-modal__icon", "aria-hidden": "true", children: icon }) : null,
+          /* @__PURE__ */ jsxs("div", { className: "crewlet-modal__heading", children: [
+            given(title) ? /* @__PURE__ */ jsx(
+              "p",
+              {
+                className: cx("crewlet-modal__title", sheet ? "crewlet-modal__title--sheet" : void 0),
+                id: titleId,
+                children: title
+              }
+            ) : null,
+            given(subtitle) ? /* @__PURE__ */ jsx("p", { className: "crewlet-modal__subtitle", id: subtitleId, children: subtitle }) : null
+          ] }),
+          given(headerActions) ? /* @__PURE__ */ jsx("div", { className: "crewlet-modal__actions", children: headerActions }) : null,
+          closes ? /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              className: "crewlet-modal__close",
+              label: closeLabel,
+              icon: /* @__PURE__ */ jsx(XGlyph, { size: "md" }),
+              onClick: onClose,
+              disabledReason: dismissable ? void 0 : closeDisabledReason
+            }
+          ) : null
+        ]
+      }
+    ) : null,
     given(children) || prompt && given(title) ? /* @__PURE__ */ jsxs(
       "div",
       {

package/dist/{chunk-IKB6HFGK.js → chunk-XO7PUL4F.js}

@@ -1,16 +1,18 @@
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './StatCard-KPAFD4E2.css';
+import './StatCard-4T7TMWMN.css';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
 var StatCard = ({
   label,
+  hideLabel = false,
   value,
   unit,
   sub,
   subTone = "neutral",
   delta,
   trend,
+  trendPlacement = "end",
   icon,
   tone = "neutral",
   loading = false,
@@ -28,16 +30,16 @@ var StatCard = ({
       className: cx("crewlet-statcard", `crewlet-statcard--${tone}`, flush && "crewlet-statcard--flush", className),
       "aria-busy": loading || void 0,
       children: [
-        /* @__PURE__ */ jsxs("div", { className: "crewlet-statcard__label", children: [
+        hideLabel ? /* @__PURE__ */ jsx(VisuallyHidden, { children: label }) : /* @__PURE__ */ jsxs("div", { className: "crewlet-statcard__label", children: [
           icon ? /* @__PURE__ */ jsx("span", { className: "crewlet-statcard__icon", "aria-hidden": true, children: icon }) : null,
           label
         ] }),
-        /* @__PURE__ */ jsxs("div", { className: "crewlet-statcard__reading", children: [
+        /* @__PURE__ */ jsxs("div", { className: cx("crewlet-statcard__reading", trendPlacement === "below" && "crewlet-statcard__reading--below"), children: [
           /* @__PURE__ */ jsx("div", { className: "crewlet-statcard__value", children: loading ? /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx("span", { className: "crewlet-statcard__placeholder", "aria-hidden": true }),
             /* @__PURE__ */ jsx(VisuallyHidden, { children: loadingLabel })
           ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-            value,
+            /* @__PURE__ */ jsx("span", { className: "crewlet-statcard__number", children: value }),
             unit ? /* @__PURE__ */ jsx("span", { className: "crewlet-statcard__unit", children: unit }) : null
           ] }) }),
           trend && !loading ? /* @__PURE__ */ jsx("div", { className: "crewlet-statcard__trend", children: trend }) : null