@crewlethq/ui 0.15.1 → 0.17.0

package/dist/ObjectHeader-UNVYM2KD.css

@@ -0,0 +1,174 @@
+/*
+ * The header of an object: its eyebrow, its head row and its fact line.
+ */
+.crewlet-object-header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+  min-width: 0;
+  padding: var(--spacing-4) 0 var(--spacing-3);
+}
+
+.crewlet-object-header--peek {
+  padding: var(--spacing-3) 0 var(--spacing-2);
+}
+
+.crewlet-object-header__eyebrow {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  min-width: 0;
+  font-size: var(--font-size-2xs);
+  letter-spacing: var(--font-letter-spacing-wide);
+  text-transform: uppercase;
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-object-header__icon {
+  display: inline-flex;
+  flex: none;
+}
+
+/* A key or a name keeps its own case: in capitals a name is a shout. */
+.crewlet-object-header__id {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  letter-spacing: normal;
+  text-transform: none;
+}
+
+.crewlet-object-header__id--mono {
+  font-family: var(--font-family-mono);
+}
+
+/* The head row wraps: the marks and the actions take a line under the title
+   rather than every pill on the row giving up a few characters. */
+.crewlet-object-header__head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-2);
+  min-width: 0;
+}
+
+/* TWO LINES, AND THAT IS THE CEILING, which catches a title written as a
+   paragraph and holds every real one. */
+.crewlet-object-header__title {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  overflow: hidden;
+  flex: 0 1 auto;
+  min-width: 0;
+  margin: 0;
+  font-size: var(--font-size-xl);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--font-line-height-snug);
+  color: var(--color-text-primary);
+}
+
+.crewlet-object-header--peek .crewlet-object-header__title {
+  font-size: var(--font-size-lg);
+}
+
+/* The state keeps its width: a pill squeezed to "13 pro…" says something
+   else. The marks travel together when the row wraps. */
+.crewlet-object-header__status,
+.crewlet-object-header__actions {
+  display: flex;
+  flex: 0 0 auto;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-1);
+}
+
+.crewlet-object-header__actions {
+  margin-left: auto;
+}
+
+/* ── the fact line ─────────────────────────────────────────────────────── */
+
+/* THE TRACK FLOOR IS 7.5rem, which fits seven facts on one line at 1280px and
+   still holds every label and a two-line value. */
+.crewlet-fact-line {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(min(7.5rem, 100%), 1fr));
+  column-gap: var(--spacing-4);
+  row-gap: var(--spacing-3);
+  padding-top: var(--spacing-1);
+}
+
+/* Two bands: the label, then the value with its footnotes in one cell. */
+.crewlet-fact-line__fact {
+  display: grid;
+  grid-template-rows: subgrid;
+  grid-row: span 2;
+  row-gap: 0;
+  min-width: 0;
+}
+
+/* A token and a set of chips take two tracks. */
+.crewlet-fact-line__fact--token,
+.crewlet-fact-line__fact--set {
+  grid-column: span 2;
+}
+
+.crewlet-fact-line__body {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.crewlet-fact-line__label {
+  font-size: var(--font-size-2xs);
+  letter-spacing: var(--font-letter-spacing-wide);
+  text-transform: uppercase;
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-fact-line__value {
+  min-width: 0;
+  font-size: var(--font-size-compact);
+  color: var(--color-text-primary);
+  overflow-wrap: anywhere;
+}
+
+.crewlet-fact-line__value--clamp {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  overflow: hidden;
+}
+
+/* One token, one line, cut with an ellipsis where two tracks are too narrow;
+   its title carries the whole of it. */
+.crewlet-fact-line__value--token {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow-wrap: normal;
+}
+
+/* A footnote may not set its column's width: the track does, and the note
+   wraps inside it, balanced so the wrap reads as deliberate. */
+.crewlet-fact-line__note,
+.crewlet-fact-line__set-by {
+  font-size: var(--font-size-2xs);
+  color: var(--color-text-tertiary);
+  text-wrap: balance;
+}
+
+/* ── the by-line ───────────────────────────────────────────────────────── */
+
+/* The word and its arrow are one atomic box, so the arrow never takes a line
+   of its own. */
+.crewlet-set-by__turn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25em;
+}

package/dist/OrgLabel/index.js

@@ -1,4 +1,4 @@
-export { OrgLabel } from '../chunk-22M7OXKW.js';
-import '../chunk-ZPWUVVIB.js';
-import '../chunk-HI6Q2UXQ.js';
+export { OrgLabel } from '../chunk-AKEZ3G5V.js';
+import '../chunk-UAN5NE7M.js';
+import '../chunk-5OM447RW.js';
 import '../chunk-ODEQTPFM.js';

package/dist/OrgNode/index.js

@@ -1,5 +1,5 @@
-export { OrgNodeDisclosure, OrgNodeLabel, OrgNodeLead } from '../chunk-FY2R4U4Q.js';
-import '../chunk-22M7OXKW.js';
-import '../chunk-ZPWUVVIB.js';
-import '../chunk-HI6Q2UXQ.js';
+export { OrgNodeDisclosure, OrgNodeLabel, OrgNodeLead } from '../chunk-TBMDMXEX.js';
+import '../chunk-AKEZ3G5V.js';
+import '../chunk-UAN5NE7M.js';
+import '../chunk-5OM447RW.js';
 import '../chunk-ODEQTPFM.js';

package/dist/OrgTable/index.js

@@ -1,13 +1,13 @@
-export { OrgTable, OrgTableActions, OrgTableAdd, OrgTableName } from '../chunk-YYBD73OI.js';
+export { OrgTable, OrgTableActions, OrgTableAdd, OrgTableName } from '../chunk-L4ZLXYPO.js';
 import '../chunk-B2Z2CDM5.js';
 import '../chunk-MY374UUD.js';
-import '../chunk-22M7OXKW.js';
+import '../chunk-AKEZ3G5V.js';
 import '../chunk-VYOKRN2I.js';
 import '../chunk-TROLVEZY.js';
 import '../chunk-4FQT6ZAY.js';
-import '../chunk-ZPWUVVIB.js';
+import '../chunk-UAN5NE7M.js';
 import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-BZFWDIV6.js';
-import '../chunk-HI6Q2UXQ.js';
+import '../chunk-5OM447RW.js';
 import '../chunk-ODEQTPFM.js';

package/dist/QrCode/QrCode.d.ts

@@ -0,0 +1,58 @@
+/**
+ * A QR code, drawn as inline SVG from the encoder's module matrix.
+ *
+ * INLINE SVG AND NOTHING ELSE. The encoder answers a matrix of booleans and
+ * this draws it as one `<path>` on one `<rect>`: not an `<img>` with a `data:`
+ * URI, not markup set as HTML, and nothing fetched. A strict
+ * Content-Security-Policy admits each of those only by being widened, and the
+ * value a QR code carries is often a credential (a second factor's seed),
+ * which must not leave the DOM it is shown in.
+ *
+ * BLACK ON A WHITE PLATE, IN EVERY THEME. A QR code is a symbol a camera reads,
+ * and its two inks are part of the symbol rather than colours of the palette.
+ * A code is specified dark on light, and some authenticator apps do not read
+ * one inverted for a dark theme, so it is never inverted. The inks are the
+ * `color.qr` tokens, which are the same in every palette, and they are written
+ * as the SVG's own fill attributes so the code draws correctly with no
+ * stylesheet at all. The plate keeps its inks under forced colours too.
+ *
+ * FOUR MODULES OF QUIET ZONE, AND LEVEL M. The margin a reader needs to find
+ * the finder patterns is four light modules on every side, the standard's own
+ * figure. Error correction is M, which still reads with 15% of the symbol
+ * lost and is the level authenticator codes are conventionally drawn at.
+ */
+/** Light modules around the symbol, on every side. */
+export declare const QR_QUIET_ZONE = 4;
+/** The dark modules' ink: the `color.qr.dark` token. */
+export declare const QR_DARK: string;
+/** The plate's ink, the quiet zone included: the `color.qr.light` token. */
+export declare const QR_LIGHT: string;
+/**
+ * The symbol's modules for `value`, `true` for dark, row by row, or null for
+ * a value too long for any QR code to hold.
+ *
+ * NULL RATHER THAN A THROW. The encoder refuses an oversized value with a
+ * `RangeError`, and a code that cannot be drawn is an aid missing rather than
+ * a screen that should fall over: whoever renders one keeps the value's other
+ * forms beside it. Any other error is a fault and is not caught.
+ */
+export declare function qrModules(value: string): boolean[][] | null;
+/**
+ * The dark modules as one SVG path in module units: one rectangle per
+ * horizontal run of dark modules, so adjacent modules share an edge rather
+ * than meeting at two anti-aliased ones.
+ */
+export declare function qrModulePath(modules: readonly (readonly boolean[])[]): string;
+export interface QrCodeProps {
+    /** What the code encodes, exactly. */
+    value: string;
+    /** The image's accessible name: what the code is for, never the value itself. */
+    label: string;
+    className?: string | undefined;
+}
+/**
+ * `value` as a QR code, named by `label`, or nothing for a value no QR code
+ * can hold. Keep the value's other forms (a key to type, a link to open)
+ * beside it: a code is an aid, and not every reader has a camera.
+ */
+export declare function QrCode({ value, label, className }: QrCodeProps): import("react").JSX.Element | null;

package/dist/QrCode/index.d.ts

@@ -0,0 +1,3 @@
+import './QrCode.css';
+export { QR_DARK, QR_LIGHT, QR_QUIET_ZONE, QrCode, qrModulePath, qrModules } from './QrCode.js';
+export type { QrCodeProps } from './QrCode.js';

package/dist/QrCode/index.js

@@ -0,0 +1,2 @@
+export { QR_DARK, QR_LIGHT, QR_QUIET_ZONE, QrCode, qrModulePath, qrModules } from '../chunk-Y56FM3K4.js';
+import '../chunk-ODEQTPFM.js';

package/dist/QrCode-JWJTWMU5.css

@@ -0,0 +1,19 @@
+/*
+ * A QR code on its own plate.
+ *
+ * A FIXED BOX, because a camera needs modules of a readable size: at 208px a
+ * second factor's code (a version 7 symbol and its quiet zone) draws each
+ * module at about 4.3px. A consumer that needs another size sets the variable.
+ *
+ * ITS INKS ARE KEPT UNDER FORCED COLOURS. A high-contrast mode repaints fills
+ * to system colours, and a plate repainted dark is a code no scanner reads.
+ */
+.crewlet-qr-code {
+  --crewlet-qr-code-size: 208px;
+  display: block;
+  flex: none;
+  width: var(--crewlet-qr-code-size);
+  height: var(--crewlet-qr-code-size);
+  border-radius: var(--radius-sm);
+  forced-color-adjust: none;
+}

package/dist/Switcher/index.js

@@ -1,14 +1,14 @@
-export { Switcher } from '../chunk-LCF4WPYS.js';
+export { Switcher } from '../chunk-FA2V2VT6.js';
 import '../chunk-W5J7R5EB.js';
-import '../chunk-K4VORB64.js';
+import '../chunk-DEEVA6TV.js';
 import '../chunk-F73MC7EZ.js';
-import '../chunk-FTEJPHBI.js';
+import '../chunk-4GB57WIT.js';
 import '../chunk-FYTIJM2T.js';
 import '../chunk-OG6CL3EB.js';
-import '../chunk-PQADV6P6.js';
 import '../chunk-RSAQOKH3.js';
 import '../chunk-IG75YMUN.js';
 import '../chunk-4FQT6ZAY.js';
+import '../chunk-PQADV6P6.js';
 import '../chunk-BWRGFKJP.js';
 import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';

package/dist/Text/Text.d.ts

@@ -20,7 +20,13 @@ export type TextVariant =
 /** A page title. */
  | 'display'
 /** A single measured number, the size a stat card sets it at. */
- | 'stat';
+ | 'stat'
+/**
+ * The register of the words around it: their size, weight and ink. For a
+ * run inside a sentence or a chip that changes one thing about it, with
+ * `mono` for a literal (a login, a header name) or `numeric` for a figure.
+ */
+ | 'inherit';
 /**
  * Which ink. There is deliberately no decoration step here: the decoration
  * ink is measured into the 2.8 to 4.5:1 band on purpose, so it carries a

package/dist/Text/index.js

@@ -1,2 +1,2 @@
-export { Text } from '../chunk-23DHIMJA.js';
+export { Text } from '../chunk-IKBK4A5O.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{Text-XIPYYZX2.css → Text-S3Q4O3IG.css}

@@ -49,6 +49,17 @@
   color: var(--color-text-primary);
 }
 
+/*
+ * The register around it: nothing is set, so the run keeps its sentence's
+ * size, weight, tracking and ink, and only a modifier (mono, numeric) or a
+ * tone changes it.
+ */
+.crewlet-text--inherit {
+  font-size: inherit;
+  line-height: inherit;
+  color: inherit;
+}
+
 .crewlet-text--body {
   font-size: var(--font-size-sm);
   line-height: var(--font-line-height-normal);

package/dist/TimeWindowPicker/index.js

@@ -1,11 +1,11 @@
-export { DEFAULT_TIME_WINDOW_LABELS, TIME_WINDOW_SPANS, TimeWindowPicker, describeTimeWindow, isTimeWindowSet, parseTimeWindowDuration, resolveTimeWindow, timeWindowMatchesPreset } from '../chunk-DY77H372.js';
+export { DEFAULT_TIME_WINDOW_LABELS, TIME_WINDOW_SPANS, TimeWindowPicker, describeTimeWindow, isTimeWindowSet, parseTimeWindowDuration, resolveTimeWindow, timeWindowMatchesPreset } from '../chunk-JF7X673Z.js';
 import '../chunk-FC4YTTFJ.js';
 import '../chunk-F73MC7EZ.js';
-import '../chunk-FTEJPHBI.js';
-import '../chunk-OG6CL3EB.js';
+import '../chunk-4GB57WIT.js';
 import '../chunk-GXQ3B46I.js';
-import '../chunk-PQADV6P6.js';
+import '../chunk-OG6CL3EB.js';
 import '../chunk-4FQT6ZAY.js';
+import '../chunk-PQADV6P6.js';
 import '../chunk-BWRGFKJP.js';
 import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';

package/dist/{chunk-FTEJPHBI.js → chunk-4GB57WIT.js}

@@ -1,8 +1,8 @@
-import { useHeadingLevel, headingTag, HeadingLevelProvider, nextHeadingLevel } from './chunk-PQADV6P6.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
+import { useHeadingLevel, headingTag, HeadingLevelProvider, nextHeadingLevel } from './chunk-PQADV6P6.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './Input-RAKNQJCV.css';
+import './Input-3KVSNUO5.css';
 import { forwardRef, useRef, useState, useImperativeHandle, useEffect, useId } from 'react';
 import { XGlyph } from '@crewlethq/icons/glyphs';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';

package/dist/{chunk-DDTDN5L2.js → chunk-4KWOKX2B.js}

@@ -1,4 +1,4 @@
-import { Avatar } from './chunk-HI6Q2UXQ.js';
+import { Avatar } from './chunk-5OM447RW.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './EntityChip-LUCPZBBG.css';
 import { Children, isValidElement, cloneElement } from 'react';

package/dist/{chunk-NN62JQLR.js → chunk-5CLW2CXT.js}

@@ -1,11 +1,12 @@
 import { cx } from './chunk-ODEQTPFM.js';
-import './InlineCode-6WSR5COL.css';
+import './InlineCode-ASYHLN3E.css';
 import { jsx } from 'react/jsx-runtime';
 
 function InlineCode({
   variant = "default",
   tone = "default",
   truncate = false,
+  whole = false,
   className,
   children,
   ...rest
@@ -19,6 +20,7 @@ function InlineCode({
         `crewlet-inline-code--${variant}`,
         tone === "inherit" && "crewlet-inline-code--inherit",
         truncate && "crewlet-inline-code--truncate",
+        whole && "crewlet-inline-code--whole",
         className
       ),
       children

package/dist/{chunk-HI6Q2UXQ.js → chunk-5OM447RW.js}

@@ -11,6 +11,12 @@ var AVATAR_STATUS_LABELS = {
 };
 var AVATAR_SIZES = { xs: 20, sm: 26, md: 32, lg: 40 };
 var AVATAR_CORNER_RATIO = 0.29;
+var AGENT_WORD = /^agent(?:[\s._-]+)(?=\S)/i;
+function avatarInitialsName(name, kind) {
+  if (name === void 0 || kind !== "agent") return name;
+  const rest = name.replace(AGENT_WORD, "");
+  return rest.trim() ? rest : name;
+}
 var AVATAR_CHARACTER_FULL_DETAIL = 56;
 var getInitials = (name) => {
   if (!name) return "?";
@@ -45,10 +51,13 @@ var Avatar = ({
   tone = "neutral",
   ring,
   status,
+  mark,
+  markLabel,
   decorative = false,
   colorSeed,
   character,
   hue,
+  icon,
   className,
   style,
   ...rest
@@ -64,9 +73,11 @@ var Avatar = ({
     fontSize: Math.max(9, Math.round(pixels * 0.36))
   } : {};
   const seeded = tone === "seeded" ? avatarTint(colorSeed ?? name ?? "") : null;
-  const framed = status !== void 0;
+  const marked = status === void 0 && mark !== void 0 && mark !== null;
+  const framed = status !== void 0 || marked;
+  const corner = status !== void 0 ? AVATAR_STATUS_LABELS[status] : marked ? markLabel : void 0;
   const label = name ? `${name} avatar` : "Avatar";
-  const spoken = framed ? `${label}, ${AVATAR_STATUS_LABELS[status]}` : label;
+  const spoken = corner ? `${label}, ${corner}` : label;
   const classes = cx(
     "crewlet-avatar",
     `crewlet-avatar--${kind}`,
@@ -110,7 +121,7 @@ var Avatar = ({
           className: cx(classes, "crewlet-avatar--image"),
           style: faceStyle,
           src,
-          alt: decorative ? "" : framed ? `${name ?? ""}, ${AVATAR_STATUS_LABELS[status]}` : name ?? "",
+          alt: decorative ? "" : corner ? `${name ?? ""}, ${corner}` : name ?? "",
           "aria-hidden": decorative ? true : void 0,
           onError: () => setImageFailed(true)
         }
@@ -124,13 +135,14 @@ var Avatar = ({
           classes,
           "crewlet-avatar--fallback",
           `crewlet-avatar--${tone}`,
-          seeded === null ? null : `crewlet-avatar--tint-${seeded}`
+          seeded === null ? null : `crewlet-avatar--tint-${seeded}`,
+          icon === void 0 || icon === null ? null : "crewlet-avatar--icon"
         ),
         style: faceStyle,
         role: decorative ? void 0 : "img",
         "aria-hidden": decorative ? true : void 0,
         "aria-label": decorative ? void 0 : spoken,
-        children: getInitials(name)
+        children: icon === void 0 || icon === null ? getInitials(avatarInitialsName(name, kind)) : /* @__PURE__ */ jsx("span", { className: "crewlet-avatar__icon", "aria-hidden": "true", children: icon })
       }
     );
   }
@@ -143,7 +155,7 @@ var Avatar = ({
       style: { "--crewlet-avatar-size": `${pixels}px`, ...style },
       children: [
         face,
-        /* @__PURE__ */ jsx("span", { className: `crewlet-avatar__status crewlet-avatar__status--${status}`, "aria-hidden": "true", children: STATUS_GLYPHS[status] })
+        status !== void 0 ? /* @__PURE__ */ jsx("span", { className: `crewlet-avatar__status crewlet-avatar__status--${status}`, "aria-hidden": "true", children: STATUS_GLYPHS[status] }) : /* @__PURE__ */ jsx("span", { className: "crewlet-avatar__status crewlet-avatar__status--mark", "aria-hidden": "true", children: mark })
       ]
     }
   );
@@ -166,4 +178,4 @@ var STATUS_GLYPHS = {
   stopped: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 14 14", focusable: "false", children: /* @__PURE__ */ jsx("rect", { x: "4.6", y: "4.6", width: "4.8", height: "4.8", rx: ".7", fill: "currentColor" }) })
 };
 
-export { AVATAR_CHARACTER_FULL_DETAIL, AVATAR_CORNER_RATIO, AVATAR_SIZES, AVATAR_STATUSES, AVATAR_STATUS_LABELS, Avatar, avatarCorner, avatarPixels, avatarTint, getInitials };
+export { AVATAR_CHARACTER_FULL_DETAIL, AVATAR_CORNER_RATIO, AVATAR_SIZES, AVATAR_STATUSES, AVATAR_STATUS_LABELS, Avatar, avatarCorner, avatarInitialsName, avatarPixels, avatarTint, getInitials };

package/dist/{chunk-YXMCUKFI.js → chunk-5PSXBL73.js}

@@ -1,5 +1,5 @@
 import { useRoving, tabStop } from './chunk-CBOICT64.js';
-import { Avatar } from './chunk-HI6Q2UXQ.js';
+import { Avatar } from './chunk-5OM447RW.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import { CREWLET_CHARACTERS, CREWLET_CHARACTER_GEOMETRY } from '@crewlethq/icons/characters';
 import { jsx } from 'react/jsx-runtime';

package/dist/{chunk-QSLIN64M.js → chunk-6NIMZ5XC.js}

@@ -1,5 +1,5 @@
 import { Kbd } from './chunk-SMBKXWML.js';
-import { Textarea } from './chunk-FTEJPHBI.js';
+import { Textarea } from './chunk-4GB57WIT.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './Composer-ABGJIAIR.css';
 import { forwardRef } from 'react';

package/dist/{chunk-YCTMKKRA.js → chunk-75CLJNDQ.js}

@@ -1,5 +1,6 @@
+import { FormField } from './chunk-4GB57WIT.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './Checkbox-UE7TEPAM.css';
+import './Checkbox-KT7RS6QQ.css';
 import { forwardRef, useId, useRef, useCallback, useEffect } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -70,5 +71,14 @@ var Checkbox = forwardRef(function Checkbox2({
     }
   );
 });
+function hasChildren(children) {
+  if (children === null || children === void 0 || children === false) return false;
+  if (Array.isArray(children)) return children.some(hasChildren);
+  return true;
+}
+function CheckboxGroup({ legend, helper, error, emptyMessage, children, className }) {
+  const empty = !hasChildren(children);
+  return /* @__PURE__ */ jsx(FormField, { as: "fieldset", label: legend, helper, error, className: cx("crewlet-checkbox-group", className), children: empty ? emptyMessage ? /* @__PURE__ */ jsx("p", { className: "crewlet-checkbox-group__empty", children: emptyMessage }) : null : /* @__PURE__ */ jsx("div", { className: "crewlet-checkbox-group__options", children }) });
+}
 
-export { Checkbox };
+export { Checkbox, CheckboxGroup };

package/dist/chunk-7QFAORCY.js

@@ -0,0 +1,37 @@
+import { BrandLockup } from './chunk-7KBNFFM3.js';
+import { Card } from './chunk-EG6NYWVK.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './AuthLayout-ODHBUPHQ.css';
+import { useId } from 'react';
+import { CrewletIcon } from '@crewlethq/icons';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function AuthLayout({
+  title,
+  description,
+  productName = "Crewlet",
+  mark,
+  homeHref,
+  children,
+  className
+}) {
+  const heading = useId();
+  return /* @__PURE__ */ jsx("main", { className: cx("crewlet-auth-layout", className), children: /* @__PURE__ */ jsxs("div", { className: "crewlet-auth-layout__column", children: [
+    /* @__PURE__ */ jsx(
+      BrandLockup,
+      {
+        className: "crewlet-auth-layout__brand",
+        name: productName,
+        mark: mark ?? /* @__PURE__ */ jsx(CrewletIcon, {}),
+        href: homeHref
+      }
+    ),
+    /* @__PURE__ */ jsxs(Card, { as: "section", padding: "lg", "aria-labelledby": heading, children: [
+      /* @__PURE__ */ jsx(Card.Title, { as: "h1", id: heading, children: title }),
+      description ? /* @__PURE__ */ jsx(Card.Description, { children: description }) : null,
+      children === void 0 || children === null || children === false ? null : /* @__PURE__ */ jsx("div", { className: "crewlet-auth-layout__body", children })
+    ] })
+  ] }) });
+}
+
+export { AuthLayout };

package/dist/{chunk-22M7OXKW.js → chunk-AKEZ3G5V.js}

@@ -1,4 +1,4 @@
-import { Avatar } from './chunk-HI6Q2UXQ.js';
+import { Avatar } from './chunk-5OM447RW.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './OrgLabel-R5KY7C3W.css';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';

package/dist/chunk-BJCFNRGH.js

@@ -0,0 +1,53 @@
+import { useDownload, safeFilename } from './chunk-F6NZOVWL.js';
+import { Button } from './chunk-OG6CL3EB.js';
+import { VisuallyHidden } from './chunk-BZFWDIV6.js';
+import { useMemo, useCallback } from 'react';
+import { CheckGlyph, CircleAlertGlyph, SaveGlyph } from '@crewlethq/icons/glyphs';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function downloadGlyph(state) {
+  if (state === "started") return /* @__PURE__ */ jsx(CheckGlyph, { size: "sm" });
+  if (state === "failed") return /* @__PURE__ */ jsx(CircleAlertGlyph, { size: "sm" });
+  return /* @__PURE__ */ jsx(SaveGlyph, { size: "sm" });
+}
+function DownloadButton({
+  text,
+  filename,
+  mime,
+  label = "Download",
+  startedLabel = "Downloading",
+  failedLabel = "Download failed",
+  startedMessage,
+  failedMessage = "the browser refused the download",
+  size = "small",
+  variant = "ghost",
+  title,
+  disabled,
+  resetMs,
+  failedResetMs = null,
+  className
+}) {
+  const { state, attempt, download } = useDownload({ resetMs, failedResetMs });
+  const name = useMemo(() => safeFilename(filename), [filename]);
+  const onClick = useCallback(() => {
+    void download(text, filename, mime);
+  }, [download, text, filename, mime]);
+  const said = state === "started" ? startedMessage ?? `download started: ${name}` : state === "failed" ? failedMessage : "";
+  return /* @__PURE__ */ jsxs("span", { className, children: [
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        size,
+        variant,
+        leadingIcon: downloadGlyph(state),
+        onClick,
+        disabled,
+        title: state === "failed" ? failedMessage : title,
+        children: state === "started" ? startedLabel : state === "failed" ? failedLabel : label
+      }
+    ),
+    /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx("span", { role: "status", children: /* @__PURE__ */ jsx("span", { children: said }, attempt) }) })
+  ] });
+}
+
+export { DownloadButton };