@crewlethq/ui 0.61.0 → 0.62.0

package/README.md

@@ -205,6 +205,14 @@ places:
 - A surface that pans or zooms dispatches `LAYER_REPOSITION_EVENT` on its host
   when the content beneath it moves, and every panel anchored inside follows.
 
+## Changes in 0.62.0
+
+**`ValueField`, a labelled value with the control its kind needs.** `FormField` with the control and the rules every form holding configuration values otherwise rewrites, in one component (`ValueField`, `ValueFieldKind`, `ValueFieldChoice`, `ValueFieldLabels`, `ValueFieldProps`). `kind` picks the control: `text`, `id`, `email` and `url` are a text field, `secret` a password field, `multiline` a `Textarea`, and `choice` and `handle` the `Select` listbox. A `secret` is masked unless its value is exactly one `${NAME}` reference, which reads as a name in the `reference` appearance. Typing `$` in a one-line field offers the names in `references`, ranked closest first and written in as a whole `${NAME}` (`onReferencesNeeded` is called as the list opens, so a caller can refresh it). A `url` wears an `https://` `InputAffix`, read as part of the value, which steps aside for `http://` and for a reference. `url`, `id` and `email` drop whitespace; no kind sets `type="email"`, so a reference is never refused by the browser. Required is the unmarked default: `required={false}` says "(optional)", and `markRequired` says "(required)" where it is news. A choice's `hint` is drawn under its option and joins the help line once chosen, and a stored answer the list no longer offers keeps a row of its own. `isReference` replaces the default `${NAME}` grammar, `mark` draws a logo before the label, `helperOnFocus` is passed to `FormField`, and `labels` replaces the list's name ("Secrets") and the choice placeholder ("Choose one").
+
+**The completion helpers are exported with it**: `referenceAt`, `rankReferences`, `completeReference`, `isWholeReference`, `urlSchemeOf`, `REFERENCE_NAME_PATTERN` and the `ReferenceQuery` type, for a field that completes references in a control of its own.
+
+**`Combobox` on a password field is a combobox only while its list is open.** HTML allows no ARIA role on `type="password"`, so a masked field carried an invalid `role="combobox"` (and `aria-autocomplete` and `aria-expanded`) at rest. It now takes those only while it has options to show. Every other field is unchanged.
+
 ## Changes in 0.58.0
 
 **`Spinner` turns at a calm pace, and its arc breathes.** It turned once per `--motion-duration-slow` (300ms), a transition step, so every running mark (a pending `Button`, `RunChip` while it thinks or works, a running step in `StepList`, `StepStateMark`) spun more than three times a second and read as alarm rather than as work. It now turns once a second (`--motion-duration-turn`, linear) while its arc eases between a quarter and three quarters of the ring on a slower cycle (`--motion-duration-sweep`, 1.5s), with soft ends. The stroke is still one 2px border in the current ink at every size (`em`, `xs`, `sm`, `md`); the arc is cut by a mask, so no side of the border is transparent any more. Under reduced motion it stops as before and keeps its open quarter. The arc's length is a registered custom property (`@property --crewlet-spinner-arc`); a browser without `@property` support steps between the two lengths rather than easing.

package/dist/Combobox/index.js

@@ -1,4 +1,4 @@
-export { Combobox } from '../chunk-VC2M2E7N.js';
+export { Combobox } from '../chunk-PK2P2QH6.js';
 import '../chunk-7KHM2FZH.js';
 import '../chunk-TLIJG4TP.js';
 import '../chunk-PGCLHYVP.js';

package/dist/PrincipalPicker/index.js

@@ -1,5 +1,5 @@
-export { PrincipalPicker } from '../chunk-RPHQNXE5.js';
-import '../chunk-VC2M2E7N.js';
+export { PrincipalPicker } from '../chunk-IOZFPFQS.js';
+import '../chunk-PK2P2QH6.js';
 import '../chunk-7KHM2FZH.js';
 import '../chunk-CI3VPIJN.js';
 import '../chunk-5AQBPHZD.js';

package/dist/ValueField/ValueField.d.ts

@@ -0,0 +1,117 @@
+import { type ReactNode } from 'react';
+/**
+ * What a value field holds, which decides its control and what it does to a
+ * value on its way through.
+ *
+ * - `text`: free text, spaces kept.
+ * - `multiline`: prose in a textarea, every space and newline kept, spell check on.
+ * - `secret`: a credential, masked unless the value is a whole reference.
+ * - `url`: an address, wearing an `https://` affix, whitespace dropped.
+ * - `id` and `email`: one token, whitespace dropped.
+ * - `choice` and `handle`: one of `choices`, picked from a listbox.
+ */
+export type ValueFieldKind = 'text' | 'multiline' | 'secret' | 'url' | 'id' | 'choice' | 'handle' | 'email';
+/** One option of a `choice` or `handle` field. */
+export interface ValueFieldChoice {
+    value: string;
+    label: string;
+    /** A sentence saying what picking this one does: drawn under the option, and on the help line once chosen. */
+    hint?: string | undefined;
+}
+/** The words a value field draws itself. */
+export interface ValueFieldLabels {
+    /** Names the completion list. "Secrets" by default. */
+    references: string;
+    /** The choice placeholder while nothing is chosen. "Choose one" by default. */
+    choose: string;
+}
+export interface ValueFieldProps {
+    label: string;
+    /** A mark drawn before the label, such as a third party's own logo. */
+    mark?: ReactNode;
+    kind?: ValueFieldKind | undefined;
+    value: string;
+    onChange: (value: string) => void;
+    /** Where the value comes from, or what shape it takes. */
+    help?: ReactNode;
+    /** Why the last value was refused. */
+    error?: ReactNode;
+    placeholder?: string | undefined;
+    /** What a `choice` or `handle` field offers; ignored by every other kind. */
+    choices?: readonly ValueFieldChoice[] | undefined;
+    disabled?: boolean | undefined;
+    /**
+     * Whether an answer is required. REQUIRED IS THE UNMARKED DEFAULT: `false`
+     * says "(optional)" beside the label, `true` sets `aria-required` and draws
+     * nothing unless `markRequired` says the requiredness is news. Most fields
+     * on a form are required, and marking them all is noise that teaches a
+     * reader to skip the note.
+     */
+    required?: boolean | undefined;
+    /**
+     * Says "(required)" beside the label, for a field whose requiredness is
+     * NEWS: one that appeared because of an answer above it. Read only with
+     * `required`.
+     */
+    markRequired?: boolean | undefined;
+    autoFocus?: boolean | undefined;
+    /**
+     * The stored entry names offered when somebody types `$`, completed into a
+     * whole `${NAME}`. NAMES ONLY: a value never reaches the field, so a list
+     * that could not be assembled leaves the field exactly as it was.
+     */
+    references?: readonly string[] | undefined;
+    /**
+     * Called as the completion list is about to open, so the caller can make
+     * sure the names are current. On the way in only, never per keystroke.
+     */
+    onReferencesNeeded?: (() => void) | undefined;
+    /**
+     * Whether a value is exactly one reference, which keeps a `secret` field
+     * readable and lets a `url` field's affix step aside. [isWholeReference]
+     * by default; a product with its own reference grammar passes it here.
+     */
+    isReference?: ((value: string) => boolean) | undefined;
+    /** How many lines a `multiline` field shows before it scrolls. Three by default. */
+    rows?: number | undefined;
+    /** Show the help line only while the field has focus. See [FormField]. */
+    helperOnFocus?: boolean | undefined;
+    labels?: Partial<ValueFieldLabels> | undefined;
+    className?: string | undefined;
+}
+/**
+ * A labelled value: [FormField] with the control a kind of value needs, and
+ * the rules every form holding such values otherwise rewrites.
+ *
+ * A SECRET FIELD IS A PASSWORD FIELD, and that is not decoration: `type` is
+ * what keeps the value out of an autofill store, out of a screenshot and out
+ * of the accessibility tree as text.
+ *
+ * A REFERENCE IS NOT A CREDENTIAL, so it is not masked. A secret whose value
+ * is wholly a `${NAME}` holds the NAME of a stored entry, and the reader has
+ * to be able to see which entry it points at. Typing over it masks again the
+ * moment it stops being a whole reference, so a credential is never on screen.
+ *
+ * TYPING `$` OFFERS THE STORED ENTRIES, from `references`, ranked closest
+ * first and written in as a whole `${NAME}` with the caret after it. Tab and
+ * Enter take the highlighted name, Escape closes the list and keeps what was
+ * typed, and a press outside closes only the list.
+ *
+ * A URL FIELD WEARS ITS SCHEME. An `https://` affix sits inside the box, is
+ * read once as part of the value, and is written into it. It steps aside for
+ * a value that carries `http://` and for one starting with `$` (a reference
+ * carries its own scheme once it resolves), and a pasted `https://` is not
+ * doubled onto it.
+ *
+ * A SINGLE TOKEN TAKES NO WHITESPACE. A `url`, `id` or `email` drops it as it
+ * is typed or pasted: a space around one is invisible in the box and fatal
+ * wherever it is used. No field asserts `type="email"`, because the browser
+ * would refuse a reference for having no "@" in it; `inputMode` still offers
+ * the right keyboard.
+ *
+ * A CHOICE IS THE LISTBOX, which can draw each choice's hint under it. The
+ * chosen one's hint also joins the help line, and a stored answer the list
+ * no longer offers keeps a row of its own rather than vanishing into a
+ * different selection.
+ */
+export declare function ValueField({ label, mark, kind, value, onChange, help, error, placeholder, choices, disabled, required, markRequired, autoFocus, references, onReferencesNeeded, isReference, rows, helperOnFocus, labels, className, }: ValueFieldProps): import("react").JSX.Element;

package/dist/ValueField/index.d.ts

@@ -0,0 +1,10 @@
+import '../Input/Input.css';
+import '../VisuallyHidden/VisuallyHidden.css';
+import '../HitArea/HitArea.css';
+import '../Combobox/Combobox.css';
+import '../Select/Select.css';
+import './ValueField.css';
+export { ValueField } from './ValueField.js';
+export type { ValueFieldChoice, ValueFieldKind, ValueFieldLabels, ValueFieldProps } from './ValueField.js';
+export { REFERENCE_NAME_PATTERN, completeReference, isWholeReference, rankReferences, referenceAt, urlSchemeOf, } from './references.js';
+export type { ReferenceQuery } from './references.js';

package/dist/ValueField/index.js

@@ -0,0 +1,15 @@
+export { REFERENCE_NAME_PATTERN, ValueField, completeReference, isWholeReference, rankReferences, referenceAt, urlSchemeOf } from '../chunk-OD3Z6QKN.js';
+import '../chunk-XQZ6EWOE.js';
+import '../chunk-PK2P2QH6.js';
+import '../chunk-7KHM2FZH.js';
+import '../chunk-TLIJG4TP.js';
+import '../chunk-PGCLHYVP.js';
+import '../chunk-PQADV6P6.js';
+import '../chunk-2G355KDJ.js';
+import '../chunk-OMV5W53A.js';
+import '../chunk-2YTOOH3A.js';
+import '../chunk-H5XTJ7GJ.js';
+import '../chunk-2XWFWNDT.js';
+import '../chunk-NUZHC6MM.js';
+import '../chunk-UT6CW3C7.js';
+import '../chunk-ODEQTPFM.js';

package/dist/ValueField/references.d.ts

@@ -0,0 +1,66 @@
+/**
+ * Completing a `${NAME}` reference from a list of stored entry names.
+ *
+ * A value field takes either a value or a reference to one, and the reference
+ * has to be typed exactly: a name off by a character resolves to nothing,
+ * which reads as configured on every surface while whatever it feeds refuses
+ * every use. These helpers are what lets a field offer the names it knows
+ * rather than leaving the reader to copy one across from another screen.
+ */
+/** The shape of a reference's name: a letter or underscore, then letters, digits and underscores. */
+export declare const REFERENCE_NAME_PATTERN = "[A-Za-z_][A-Za-z0-9_]*";
+/**
+ * Whether a value is exactly one `${NAME}` reference, trimmed first.
+ *
+ * This is the default a [ValueField] asks when deciding whether a secret's
+ * value is a name (readable) or a credential (masked). A product whose
+ * reference grammar is stricter passes its own predicate as `isReference`.
+ */
+export declare function isWholeReference(value: string): boolean;
+/** Where a reference is being typed, and what has been typed of it. */
+export interface ReferenceQuery {
+    /** Index of the `$` that opens it. */
+    start: number;
+    /** What follows the `$`, with any `{` stripped. */
+    query: string;
+}
+/**
+ * The `${...}` under the caret, or null.
+ *
+ * IT SCANS BACK FROM THE CARET rather than matching the whole value, because
+ * a field can hold a reference among other text and the one being edited is
+ * the one being completed. The scan stops at whitespace and at a `}`: the
+ * first because no name contains one, the second because a reference that is
+ * already closed is finished, and offering to complete it again would replace
+ * a name somebody had chosen.
+ */
+export declare function referenceAt(value: string, caret: number): ReferenceQuery | null;
+/**
+ * The names ordered by how closely they match what has been typed.
+ *
+ * Three tiers, in the order somebody means them: a name that STARTS with the
+ * query, then one that CONTAINS it, then one whose letters appear in order.
+ * Case is ignored, because a name is upper snake case and nobody holds shift
+ * to filter a list. An empty query keeps every name in the order given: the
+ * point of typing `$` alone is to see what there is.
+ */
+export declare function rankReferences(names: readonly string[], query: string): string[];
+/**
+ * The value with the chosen name written in as a whole `${NAME}`, and where
+ * the caret goes.
+ *
+ * CLOSED BRACES, always, and the caret lands after them: a reference resolves
+ * only when it is whole, and a half-written one is a literal that reaches its
+ * destination as the characters somebody typed.
+ */
+export declare function completeReference(value: string, caret: number, at: ReferenceQuery, name: string): {
+    value: string;
+    caret: number;
+};
+/**
+ * The scheme a value already carries, `https://`, `http://` or empty.
+ *
+ * Matched without regard to case, because a pasted address is whatever the
+ * address bar had.
+ */
+export declare function urlSchemeOf(value: string): '' | 'https://' | 'http://';

package/dist/ValueField-EIBD6RYS.css

@@ -0,0 +1,13 @@
+/*
+ * ValueField: a labelled value with the control its kind needs.
+ *
+ * The row is FormField's and every control is the package's own; what is
+ * drawn here is the mark a label may carry, such as a third party's logo,
+ * set on the label's line ahead of its words.
+ */
+
+.crewlet-value-field__label {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-1);
+}

package/dist/{chunk-RPHQNXE5.js → chunk-IOZFPFQS.js}

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

package/dist/chunk-OD3Z6QKN.js

@@ -0,0 +1,237 @@
+import { Select } from './chunk-XQZ6EWOE.js';
+import { Combobox } from './chunk-PK2P2QH6.js';
+import { FormField, Textarea, InputAffix } from './chunk-TLIJG4TP.js';
+import './Input-GMOWHZRG.css';
+import './VisuallyHidden-AOEXU5EB.css';
+import './HitArea-QUOS6ZDJ.css';
+import './Combobox-GBCWXWEB.css';
+import './Select-F526HLNR.css';
+import './ValueField-EIBD6RYS.css';
+import { useId, useRef, useState } from 'react';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+// src/ValueField/references.ts
+var REFERENCE_NAME_PATTERN = "[A-Za-z_][A-Za-z0-9_]*";
+var WHOLE_REFERENCE = new RegExp(`^\\$\\{${REFERENCE_NAME_PATTERN}\\}$`);
+function isWholeReference(value) {
+  return WHOLE_REFERENCE.test(value.trim());
+}
+function referenceAt(value, caret) {
+  const head = value.slice(0, caret);
+  for (let i = head.length - 1; i >= 0; i--) {
+    const ch = head.charAt(i);
+    if (ch === "$") {
+      const rest = head.slice(i + 1);
+      const name = rest.startsWith("{") ? rest.slice(1) : rest;
+      if (!/^[A-Za-z0-9_]*$/.test(name)) return null;
+      return { start: i, query: name };
+    }
+    if (/\s/.test(ch) || ch === "}") return null;
+  }
+  return null;
+}
+function rankReferences(names, query) {
+  const q = query.toLowerCase();
+  if (q === "") return [...names];
+  const scored = [];
+  names.forEach((name, index) => {
+    const lower = name.toLowerCase();
+    if (lower.startsWith(q)) scored.push({ name, tier: 0, index });
+    else if (lower.includes(q)) scored.push({ name, tier: 1, index });
+    else if (isSubsequence(lower, q)) scored.push({ name, tier: 2, index });
+  });
+  return scored.sort((a, b) => a.tier - b.tier || a.index - b.index).map((s) => s.name);
+}
+function isSubsequence(s, q) {
+  let at = 0;
+  for (const ch of q) {
+    at = s.indexOf(ch, at);
+    if (at < 0) return false;
+    at += 1;
+  }
+  return true;
+}
+function completeReference(value, caret, at, name) {
+  const written = "${" + name + "}";
+  const head = value.slice(0, at.start);
+  const tail = value.slice(caret).replace(/^\}/, "");
+  return { value: head + written + tail, caret: head.length + written.length };
+}
+function urlSchemeOf(value) {
+  const lower = value.toLowerCase();
+  if (lower.startsWith("https://")) return "https://";
+  if (lower.startsWith("http://")) return "http://";
+  return "";
+}
+var DEFAULT_LABELS = {
+  references: "Secrets",
+  choose: "Choose one"
+};
+function ValueField({
+  label,
+  mark,
+  kind = "text",
+  value,
+  onChange,
+  help,
+  error,
+  placeholder,
+  choices,
+  disabled,
+  required,
+  markRequired,
+  autoFocus,
+  references,
+  onReferencesNeeded,
+  isReference = isWholeReference,
+  rows = 3,
+  helperOnFocus,
+  labels,
+  className
+}) {
+  const words = { ...DEFAULT_LABELS, ...labels };
+  const id = useId();
+  const affixId = `${id}-affix`;
+  const picker = kind === "choice" || kind === "handle";
+  const reference = isReference(value);
+  const masked = kind === "secret" && !reference;
+  const tight = kind === "url" || kind === "id" || kind === "email";
+  const own = kind === "url" ? urlSchemeOf(value) : "";
+  const referenceBase = own === "" && value.trimStart().startsWith("$");
+  const affix = kind === "url" && own !== "http://" && !referenceBase ? "https://" : "";
+  const shown = affix ? value.slice(own.length) : value;
+  const box = useRef(null);
+  const [typing, setTyping] = useState(null);
+  const offered = typing && references?.length ? rankReferences(references, typing.query) : [];
+  function reconsider(text, caretAt) {
+    if (affix) return;
+    const caret = masked || caretAt === null ? text.length : caretAt;
+    const next = referenceAt(text, caret);
+    if (next && !typing) onReferencesNeeded?.();
+    setTyping(next);
+  }
+  function reconsiderFrom(input) {
+    reconsider(input.value, masked ? null : input.selectionStart);
+  }
+  function choose(name) {
+    const input = box.current;
+    if (!input || !typing) return;
+    const caret = masked ? input.value.length : input.selectionStart ?? input.value.length;
+    const next = completeReference(input.value, caret, typing, name);
+    setTyping(null);
+    onChange(next.value);
+    queueMicrotask(() => {
+      input.setSelectionRange(next.caret, next.caret);
+      input.focus();
+    });
+  }
+  function changed(raw) {
+    const typed = tight ? raw.replace(/\s+/g, "") : raw;
+    let next = typed;
+    if (affix) {
+      const carried = urlSchemeOf(typed);
+      const escapes = carried === "http://" || own === "" && typed.trimStart().startsWith("$");
+      next = escapes ? typed : affix + typed.slice(carried.length);
+    }
+    onChange(next);
+    return next;
+  }
+  const options = picker ? choiceOptions(choices, value) : [];
+  const chosen = picker ? choices?.find((choice) => choice.value === value) : void 0;
+  const helper = chosen?.hint && help ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    help,
+    " ",
+    chosen.hint
+  ] }) : chosen?.hint ?? help;
+  return /* @__PURE__ */ jsx(
+    FormField,
+    {
+      htmlFor: id,
+      className,
+      label: mark ? /* @__PURE__ */ jsxs("span", { className: "crewlet-value-field__label", children: [
+        mark,
+        label
+      ] }) : label,
+      optional: required === false,
+      requiredNews: required === true && markRequired === true,
+      helper,
+      helperOnFocus,
+      error,
+      describedBy: affix ? affixId : void 0,
+      children: (field) => picker ? /* @__PURE__ */ jsx(
+        Select,
+        {
+          id: field.id,
+          value,
+          onChange: (next) => onChange(String(next)),
+          options,
+          placeholder: words.choose,
+          disabled: disabled === true,
+          autoFocus,
+          error: field.invalid,
+          required: required === true,
+          "aria-describedby": field.describedBy
+        }
+      ) : kind === "multiline" ? /* @__PURE__ */ jsx(
+        Textarea,
+        {
+          id: field.id,
+          rows,
+          value,
+          placeholder,
+          disabled,
+          autoComplete: "off",
+          spellCheck: true,
+          autoFocus,
+          "aria-describedby": field.describedBy,
+          "aria-required": required === true || void 0,
+          error: field.invalid,
+          onChange: (event) => onChange(event.target.value)
+        }
+      ) : /* @__PURE__ */ jsx(
+        Combobox,
+        {
+          id: field.id,
+          ref: box,
+          appearance: reference ? "reference" : "default",
+          type: masked ? "password" : "text",
+          inputMode: kind === "email" ? "email" : kind === "url" ? "url" : void 0,
+          value: shown,
+          placeholder,
+          disabled,
+          autoFocus,
+          error: field.invalid,
+          "aria-describedby": field.describedBy,
+          "aria-required": required === true || void 0,
+          leading: affix ? /* @__PURE__ */ jsx(InputAffix, { text: affix, id: affixId }) : void 0,
+          label: words.references,
+          mono: true,
+          tabCommits: true,
+          options: offered.map((name) => ({ value: name })),
+          onCommit: (option) => choose(option.value),
+          open: offered.length > 0,
+          onOpenChange: (open) => {
+            if (!open) setTyping(null);
+          },
+          onValueChange: (raw) => {
+            const next = changed(raw);
+            reconsider(next, box.current?.selectionStart ?? null);
+          },
+          onKeyUp: (event) => reconsiderFrom(event.currentTarget),
+          onClick: (event) => reconsiderFrom(event.currentTarget),
+          onBlur: () => setTyping(null)
+        }
+      )
+    }
+  );
+}
+function choiceOptions(choices, value) {
+  const all = choices ?? [];
+  const rows = all.map((choice) => ({ value: choice.value, label: choice.label, description: choice.hint }));
+  if (value !== "" && !all.some((choice) => choice.value === value)) {
+    return [{ value, label: value }, ...rows];
+  }
+  return rows;
+}
+
+export { REFERENCE_NAME_PATTERN, ValueField, completeReference, isWholeReference, rankReferences, referenceAt, urlSchemeOf };

package/dist/{chunk-VC2M2E7N.js → chunk-PK2P2QH6.js}

@@ -160,6 +160,7 @@ var Combobox = forwardRef(function Combobox2({
       ] })
     ] });
   }
+  const announcesRole = rest.type !== "password" || lists;
   return /* @__PURE__ */ jsxs("div", { className: cx("crewlet-combobox", containerClassName), ref: listbox.anchorRef, children: [
     /* @__PURE__ */ jsx(
       Input,
@@ -169,9 +170,9 @@ var Combobox = forwardRef(function Combobox2({
         id: fieldId,
         className,
         value,
-        role: "combobox",
-        "aria-autocomplete": "list",
-        "aria-expanded": lists,
+        role: announcesRole ? "combobox" : void 0,
+        "aria-autocomplete": announcesRole ? "list" : void 0,
+        "aria-expanded": announcesRole ? lists : void 0,
         "aria-controls": lists ? listbox.listId : void 0,
         "aria-activedescendant": lists && offered.length > 0 ? listbox.optionId(listbox.active) : void 0,
         autoComplete: "off",

package/dist/generated/index.d.ts

@@ -219,6 +219,7 @@ export * from '../Tree/index.js';
 export * from '../TreeCanvas/index.js';
 export * from '../TreeGrid/index.js';
 export * from '../TypeSpecimen/index.js';
+export * from '../ValueField/index.js';
 export * from '../VersionCompare/index.js';
 export * from '../VersionTimeline/index.js';
 export * from '../VisuallyHidden/index.js';

package/dist/generated/index.js

@@ -1,41 +1,42 @@
-import '../chunk-OXZKRUGM.js';
+import '../chunk-UOTNQV6D.js';
+export { VersionTimeline } from '../chunk-TUNEMQXF.js';
 export { WidgetFrame } from '../chunk-3DMPZZQ6.js';
 export { ElementToPngError, elementToPng, parseCsv, serializeElement, toCsv } from '../chunk-FEJANUZK.js';
 export { TreeCanvas } from '../chunk-5NJ4BIUA.js';
 export { TypeSpecimen } from '../chunk-JKAFEFFC.js';
 export { VERSION_COMPARE_LABELS, VERSION_COMPARE_LENSES, VersionCompare } from '../chunk-NL72YZWF.js';
-export { VersionTimeline } from '../chunk-TUNEMQXF.js';
+export { REFERENCE_NAME_PATTERN, ValueField, completeReference, isWholeReference, rankReferences, referenceAt, urlSchemeOf } from '../chunk-OD3Z6QKN.js';
+export { DensitySwitcher, ThemeSwitcher } from '../chunk-53NTMTRM.js';
 export { ThemeToggle } from '../chunk-RLFPBRN4.js';
+export { applyStoredPreferences, resolveTheme, useDensityPreference, useSystemTheme, useThemePreference } from '../chunk-Z24ZUSTX.js';
 export { ThinkingIndicator } from '../chunk-E2MIUNUU.js';
 export { TileGrid } from '../chunk-Q6CQMS6R.js';
 export { TIME_RANGE_CUSTOM, TIME_RANGE_PICKER_LABELS, TimeRangePicker, timeRangeFieldKey, timeRangeProblem } from '../chunk-LND6XSXN.js';
 export { DEFAULT_TIME_WINDOW_LABELS, TIME_WINDOW_SPANS, TimeWindowPicker, describeTimeWindow, isTimeWindowSet, parseTimeWindowDuration, resolveTimeWindow, timeWindowMatchesPreset } from '../chunk-SG2375ZY.js';
 export { ToastProvider, Toaster, toasterInsetStyle, useToast } from '../chunk-XQBLBJN4.js';
+export { TABLE_TAGS_CELL_LABELS, TableDateCell, TableEntityCell, TableKeyCell, TableNumberCell, TableStatusCell, TableTagsCell, TableTextCell } from '../chunk-U4AXQI6U.js';
 export { TagsInput } from '../chunk-VSTD65SL.js';
 export { ThemeGallery } from '../chunk-ESUZ27TS.js';
 export { ThemeSwatch } from '../chunk-MNFU2RNT.js';
-export { DensitySwitcher, ThemeSwitcher } from '../chunk-53NTMTRM.js';
-export { applyStoredPreferences, resolveTheme, useDensityPreference, useSystemTheme, useThemePreference } from '../chunk-Z24ZUSTX.js';
-export { StatGroup } from '../chunk-OUD75UB2.js';
+export { Statement } from '../chunk-MZJKPTA5.js';
 export { SuggestionList, SuggestionRow } from '../chunk-YBI7M2JH.js';
 export { Switcher } from '../chunk-ZRKUTFYE.js';
-export { TABLE_TAGS_CELL_LABELS, TableDateCell, TableEntityCell, TableKeyCell, TableNumberCell, TableStatusCell, TableTagsCell, TableTextCell } from '../chunk-U4AXQI6U.js';
-export { SLIDE_COMPARE_LABELS, SlideCompare } from '../chunk-W2Q5DZJB.js';
+export { SlideFilmstrip } from '../chunk-XLJPLCK6.js';
 export { SlideGrid } from '../chunk-3V5T5K5H.js';
 export { SOURCE_EDITOR_KEYS, SourceEditor, lineStart } from '../chunk-CVDK3LDB.js';
 export { StatCard } from '../chunk-VO2PDDRE.js';
-export { Statement } from '../chunk-MZJKPTA5.js';
+export { StatGroup } from '../chunk-OUD75UB2.js';
 export { SHEET_COLUMN_EDITOR_LABELS, SheetColumnEditor, SheetColumnTypeGlyph } from '../chunk-5PMFRAGL.js';
 export { CellDisplay, CellEditor, CheckboxCell, DateCell, LongTextCell, MultiSelectCell, NumberCell, PersonCell, RatingCell, SelectCell, SheetCell, SheetGrid, StatusCell, TextCell, UrlCell } from '../chunk-WXSGCYZO.js';
 export { TagGroup } from '../chunk-4U2D6BPR.js';
 export { matchesShortcut, useShortcut } from '../chunk-AYHIF6DH.js';
 import '../chunk-73GUXYYE.js';
-export { SlideFilmstrip } from '../chunk-XLJPLCK6.js';
+export { SLIDE_COMPARE_LABELS, SlideCompare } from '../chunk-W2Q5DZJB.js';
 export { SegmentedMeter, segmentedMeterLabel } from '../chunk-4AK52VHB.js';
 export { SelectionBar } from '../chunk-6Z4JZHRB.js';
 export { SEND_BUTTON_LABELS, SendButton } from '../chunk-PBR5C5MX.js';
-export { SettingsTable, SettingsTableRow } from '../chunk-4RKTZSEW.js';
 export { SetupWizard } from '../chunk-T4THNJ6E.js';
+export { SettingsTable, SettingsTableRow } from '../chunk-4RKTZSEW.js';
 export { ARTIFACT_ROLES, SHAREABLE_ROLES, ShareDialog, roleAtLeast } from '../chunk-B5ZHJWAZ.js';
 export { Select } from '../chunk-XQZ6EWOE.js';
 export { ReviewList } from '../chunk-OJ2QULVH.js';
@@ -49,22 +50,22 @@ export { FRAME_HELLO_TIMEOUT_MS, FRAME_LOAD_GRACE_MS, SandboxedFrame, SandboxedF
 export { SearchTrigger } from '../chunk-YZR57QGE.js';
 export { SectionFrame, SectionFrameBody, SectionFrameNav } from '../chunk-SHLP2BNA.js';
 export { NavGroup, NavItem, SidebarNav } from '../chunk-B53FUJ53.js';
+export { QR_DARK, QR_LIGHT, QR_QUIET_ZONE, QrCode, qrModulePath, qrModules } from '../chunk-Y56FM3K4.js';
 export { ReadingPane, ReadingPaneByline, ReadingPaneLead, ReadingPaneOutcome, ReadingPaneQuote, ReadingPaneReasoning, ReadingPaneSection, ReadingPaneTitle } from '../chunk-ZAJHGDAW.js';
-export { Prose } from '../chunk-DVVP27OD.js';
 export { REFUSAL_CARD_LABELS, RefusalCard } from '../chunk-JE4FCRVL.js';
 export { RelatedRow } from '../chunk-MYJZCSMA.js';
 export { Text } from '../chunk-QP2P6GDQ.js';
 export { RESULT_TABLE_CARD_LABELS, RESULT_TABLE_COLLAPSED_ROWS, RESULT_TABLE_MAX_ROWS, ResultTableCard } from '../chunk-OM6CPZB7.js';
 export { Table } from '../chunk-5DJMFRSZ.js';
+export { PresenceStack } from '../chunk-FGRJXZUU.js';
+export { PricingCard } from '../chunk-U3ILLCR2.js';
 export { PresenterView, formatStopwatch } from '../chunk-P5S2SPTK.js';
 export { SLIDE_NAV_LABELS, SlideNav } from '../chunk-DEAFAK3U.js';
 export { SLIDE_HEIGHT, SLIDE_WIDTH, SlideStage, useSlideKeys } from '../chunk-RMEBFYL7.js';
-export { PresenceStack } from '../chunk-FGRJXZUU.js';
-export { PricingCard } from '../chunk-U3ILLCR2.js';
-export { PrincipalPicker } from '../chunk-RPHQNXE5.js';
+export { PrincipalPicker } from '../chunk-IOZFPFQS.js';
 export { PropertyList } from '../chunk-VBYRA3W6.js';
 export { PROPOSAL_CARD_LABELS, PROPOSAL_FAILURE_OUTCOMES, PROPOSAL_STATES, ProposalCard } from '../chunk-PFXUEEHT.js';
-export { QR_DARK, QR_LIGHT, QR_QUIET_ZONE, QrCode, qrModulePath, qrModules } from '../chunk-Y56FM3K4.js';
+export { Prose } from '../chunk-DVVP27OD.js';
 export { PageNote } from '../chunk-CV4NES3P.js';
 export { PEEK_RAIL_LABELS, PEEK_RAIL_MAX_WIDTH, PEEK_RAIL_MIN_WIDTH, PEEK_RAIL_WIDTH, PeekHost, PeekNeighbours, PeekRail, isPlainPress, peekClickHandler, peekRowActivation, usePeekNeighbours, usePeekOrder, usePeekStep } from '../chunk-VBO2GYWX.js';
 export { PEOPLE_RAIL_LABELS, PeopleRail, peopleRailKey } from '../chunk-EFIURN3U.js';
@@ -75,11 +76,11 @@ export { FactLine, ObjectHeader, SetByLine } from '../chunk-4MC2EEGO.js';
 export { OPEN_IN_APP_CARD_LABELS, OpenInAppCard } from '../chunk-I43D5K6A.js';
 export { REFUSAL_STRIP_LABELS, ReceiptStrip, RefusalStrip } from '../chunk-NLI7OVO2.js';
 export { OrgNodeDisclosure, OrgNodeLabel, OrgNodeLead } from '../chunk-YA3AWELW.js';
-export { Outline, scrollToHeading, useActiveHeading } from '../chunk-A5YKNRG6.js';
 export { OrgTable, OrgTableActions, OrgTableAdd, OrgTableName } from '../chunk-PGKETYGL.js';
 export { TreeGrid } from '../chunk-Q4DNAO3O.js';
 export { SIZE_EPSILON, TYPE_AHEAD_RESET_MS, createTreeModel, isTypeAheadKey, layoutConnectors, layoutForest, placeGroups, treeAllExpandable, treeAncestors, treeCollapseOrAscend, treeExpandOrDescend, treeExpandTo, treeExpandable, treeFirst, treeFirstChild, treeItemAction, treeLast, treeLevel, treeNext, treeParent, treePosInSet, treePrevious, treeSetSize, treeStep, treeTypeAhead, treeVisible, typeAheadBuffer, useLayoutAnchor, useMeasuredSizes, useTreeState } from '../chunk-MY374UUD.js';
 export { OrgLabel } from '../chunk-ONQKKHON.js';
+export { Outline, scrollToHeading, useActiveHeading } from '../chunk-A5YKNRG6.js';
 export { MARKDOWN_CALLOUT_NAMES, MARKDOWN_CALLOUT_TONES, markdownBreaks, markdownClosesFence, markdownCodeText, markdownFenceOf, markdownHeadingOf, markdownInline, markdownLines, parseMarkdown, parseMarkdownSpans, safeHref } from '../chunk-BAKPMH3S.js';
 export { MARKDOWN_FORMATS, MarkdownEditor, formatMarkdown, insertMarkdown, markdownWords } from '../chunk-VRPDQSXZ.js';
 export { MERGE_CONFLICTS_LABELS, MergeConflicts } from '../chunk-5G76O23M.js';
@@ -148,7 +149,7 @@ export { ColorSwatch } from '../chunk-KA2GAB3N.js';
 export { CopyButton, Copyable } from '../chunk-IOTN23FZ.js';
 export { useClipboard, writeClipboard } from '../chunk-STJ7QBC3.js';
 export { useOutcome } from '../chunk-DTIW4CHZ.js';
-export { Combobox } from '../chunk-VC2M2E7N.js';
+export { Combobox } from '../chunk-PK2P2QH6.js';
 export { CommandPalette } from '../chunk-I74C4TM6.js';
 export { ConfirmModal, Modal } from '../chunk-KVWZDCTQ.js';
 export { HIGHLIGHT_REST_MS, TYPE_AHEAD_WINDOW, useHighlightRest, useListbox, useOptionKeys } from '../chunk-7KHM2FZH.js';

package/dist/index.js

@@ -1,41 +1,42 @@
-import './chunk-OXZKRUGM.js';
+import './chunk-UOTNQV6D.js';
+export { VersionTimeline } from './chunk-TUNEMQXF.js';
 export { WidgetFrame } from './chunk-3DMPZZQ6.js';
 export { ElementToPngError, elementToPng, parseCsv, serializeElement, toCsv } from './chunk-FEJANUZK.js';
 export { TreeCanvas } from './chunk-5NJ4BIUA.js';
 export { TypeSpecimen } from './chunk-JKAFEFFC.js';
 export { VERSION_COMPARE_LABELS, VERSION_COMPARE_LENSES, VersionCompare } from './chunk-NL72YZWF.js';
-export { VersionTimeline } from './chunk-TUNEMQXF.js';
+export { REFERENCE_NAME_PATTERN, ValueField, completeReference, isWholeReference, rankReferences, referenceAt, urlSchemeOf } from './chunk-OD3Z6QKN.js';
+export { DensitySwitcher, ThemeSwitcher } from './chunk-53NTMTRM.js';
 export { ThemeToggle } from './chunk-RLFPBRN4.js';
+export { applyStoredPreferences, resolveTheme, useDensityPreference, useSystemTheme, useThemePreference } from './chunk-Z24ZUSTX.js';
 export { ThinkingIndicator } from './chunk-E2MIUNUU.js';
 export { TileGrid } from './chunk-Q6CQMS6R.js';
 export { TIME_RANGE_CUSTOM, TIME_RANGE_PICKER_LABELS, TimeRangePicker, timeRangeFieldKey, timeRangeProblem } from './chunk-LND6XSXN.js';
 export { DEFAULT_TIME_WINDOW_LABELS, TIME_WINDOW_SPANS, TimeWindowPicker, describeTimeWindow, isTimeWindowSet, parseTimeWindowDuration, resolveTimeWindow, timeWindowMatchesPreset } from './chunk-SG2375ZY.js';
 export { ToastProvider, Toaster, toasterInsetStyle, useToast } from './chunk-XQBLBJN4.js';
+export { TABLE_TAGS_CELL_LABELS, TableDateCell, TableEntityCell, TableKeyCell, TableNumberCell, TableStatusCell, TableTagsCell, TableTextCell } from './chunk-U4AXQI6U.js';
 export { TagsInput } from './chunk-VSTD65SL.js';
 export { ThemeGallery } from './chunk-ESUZ27TS.js';
 export { ThemeSwatch } from './chunk-MNFU2RNT.js';
-export { DensitySwitcher, ThemeSwitcher } from './chunk-53NTMTRM.js';
-export { applyStoredPreferences, resolveTheme, useDensityPreference, useSystemTheme, useThemePreference } from './chunk-Z24ZUSTX.js';
-export { StatGroup } from './chunk-OUD75UB2.js';
+export { Statement } from './chunk-MZJKPTA5.js';
 export { SuggestionList, SuggestionRow } from './chunk-YBI7M2JH.js';
 export { Switcher } from './chunk-ZRKUTFYE.js';
-export { TABLE_TAGS_CELL_LABELS, TableDateCell, TableEntityCell, TableKeyCell, TableNumberCell, TableStatusCell, TableTagsCell, TableTextCell } from './chunk-U4AXQI6U.js';
-export { SLIDE_COMPARE_LABELS, SlideCompare } from './chunk-W2Q5DZJB.js';
+export { SlideFilmstrip } from './chunk-XLJPLCK6.js';
 export { SlideGrid } from './chunk-3V5T5K5H.js';
 export { SOURCE_EDITOR_KEYS, SourceEditor, lineStart } from './chunk-CVDK3LDB.js';
 export { StatCard } from './chunk-VO2PDDRE.js';
-export { Statement } from './chunk-MZJKPTA5.js';
+export { StatGroup } from './chunk-OUD75UB2.js';
 export { SHEET_COLUMN_EDITOR_LABELS, SheetColumnEditor, SheetColumnTypeGlyph } from './chunk-5PMFRAGL.js';
 export { CellDisplay, CellEditor, CheckboxCell, DateCell, LongTextCell, MultiSelectCell, NumberCell, PersonCell, RatingCell, SelectCell, SheetCell, SheetGrid, StatusCell, TextCell, UrlCell } from './chunk-WXSGCYZO.js';
 export { TagGroup } from './chunk-4U2D6BPR.js';
 export { matchesShortcut, useShortcut } from './chunk-AYHIF6DH.js';
 import './chunk-73GUXYYE.js';
-export { SlideFilmstrip } from './chunk-XLJPLCK6.js';
+export { SLIDE_COMPARE_LABELS, SlideCompare } from './chunk-W2Q5DZJB.js';
 export { SegmentedMeter, segmentedMeterLabel } from './chunk-4AK52VHB.js';
 export { SelectionBar } from './chunk-6Z4JZHRB.js';
 export { SEND_BUTTON_LABELS, SendButton } from './chunk-PBR5C5MX.js';
-export { SettingsTable, SettingsTableRow } from './chunk-4RKTZSEW.js';
 export { SetupWizard } from './chunk-T4THNJ6E.js';
+export { SettingsTable, SettingsTableRow } from './chunk-4RKTZSEW.js';
 export { ARTIFACT_ROLES, SHAREABLE_ROLES, ShareDialog, roleAtLeast } from './chunk-B5ZHJWAZ.js';
 export { Select } from './chunk-XQZ6EWOE.js';
 export { ReviewList } from './chunk-OJ2QULVH.js';
@@ -49,22 +50,22 @@ export { FRAME_HELLO_TIMEOUT_MS, FRAME_LOAD_GRACE_MS, SandboxedFrame, SandboxedF
 export { SearchTrigger } from './chunk-YZR57QGE.js';
 export { SectionFrame, SectionFrameBody, SectionFrameNav } from './chunk-SHLP2BNA.js';
 export { NavGroup, NavItem, SidebarNav } from './chunk-B53FUJ53.js';
+export { QR_DARK, QR_LIGHT, QR_QUIET_ZONE, QrCode, qrModulePath, qrModules } from './chunk-Y56FM3K4.js';
 export { ReadingPane, ReadingPaneByline, ReadingPaneLead, ReadingPaneOutcome, ReadingPaneQuote, ReadingPaneReasoning, ReadingPaneSection, ReadingPaneTitle } from './chunk-ZAJHGDAW.js';
-export { Prose } from './chunk-DVVP27OD.js';
 export { REFUSAL_CARD_LABELS, RefusalCard } from './chunk-JE4FCRVL.js';
 export { RelatedRow } from './chunk-MYJZCSMA.js';
 export { Text } from './chunk-QP2P6GDQ.js';
 export { RESULT_TABLE_CARD_LABELS, RESULT_TABLE_COLLAPSED_ROWS, RESULT_TABLE_MAX_ROWS, ResultTableCard } from './chunk-OM6CPZB7.js';
 export { Table } from './chunk-5DJMFRSZ.js';
+export { PresenceStack } from './chunk-FGRJXZUU.js';
+export { PricingCard } from './chunk-U3ILLCR2.js';
 export { PresenterView, formatStopwatch } from './chunk-P5S2SPTK.js';
 export { SLIDE_NAV_LABELS, SlideNav } from './chunk-DEAFAK3U.js';
 export { SLIDE_HEIGHT, SLIDE_WIDTH, SlideStage, useSlideKeys } from './chunk-RMEBFYL7.js';
-export { PresenceStack } from './chunk-FGRJXZUU.js';
-export { PricingCard } from './chunk-U3ILLCR2.js';
-export { PrincipalPicker } from './chunk-RPHQNXE5.js';
+export { PrincipalPicker } from './chunk-IOZFPFQS.js';
 export { PropertyList } from './chunk-VBYRA3W6.js';
 export { PROPOSAL_CARD_LABELS, PROPOSAL_FAILURE_OUTCOMES, PROPOSAL_STATES, ProposalCard } from './chunk-PFXUEEHT.js';
-export { QR_DARK, QR_LIGHT, QR_QUIET_ZONE, QrCode, qrModulePath, qrModules } from './chunk-Y56FM3K4.js';
+export { Prose } from './chunk-DVVP27OD.js';
 export { PageNote } from './chunk-CV4NES3P.js';
 export { PEEK_RAIL_LABELS, PEEK_RAIL_MAX_WIDTH, PEEK_RAIL_MIN_WIDTH, PEEK_RAIL_WIDTH, PeekHost, PeekNeighbours, PeekRail, isPlainPress, peekClickHandler, peekRowActivation, usePeekNeighbours, usePeekOrder, usePeekStep } from './chunk-VBO2GYWX.js';
 export { PEOPLE_RAIL_LABELS, PeopleRail, peopleRailKey } from './chunk-EFIURN3U.js';
@@ -75,11 +76,11 @@ export { FactLine, ObjectHeader, SetByLine } from './chunk-4MC2EEGO.js';
 export { OPEN_IN_APP_CARD_LABELS, OpenInAppCard } from './chunk-I43D5K6A.js';
 export { REFUSAL_STRIP_LABELS, ReceiptStrip, RefusalStrip } from './chunk-NLI7OVO2.js';
 export { OrgNodeDisclosure, OrgNodeLabel, OrgNodeLead } from './chunk-YA3AWELW.js';
-export { Outline, scrollToHeading, useActiveHeading } from './chunk-A5YKNRG6.js';
 export { OrgTable, OrgTableActions, OrgTableAdd, OrgTableName } from './chunk-PGKETYGL.js';
 export { TreeGrid } from './chunk-Q4DNAO3O.js';
 export { SIZE_EPSILON, TYPE_AHEAD_RESET_MS, createTreeModel, isTypeAheadKey, layoutConnectors, layoutForest, placeGroups, treeAllExpandable, treeAncestors, treeCollapseOrAscend, treeExpandOrDescend, treeExpandTo, treeExpandable, treeFirst, treeFirstChild, treeItemAction, treeLast, treeLevel, treeNext, treeParent, treePosInSet, treePrevious, treeSetSize, treeStep, treeTypeAhead, treeVisible, typeAheadBuffer, useLayoutAnchor, useMeasuredSizes, useTreeState } from './chunk-MY374UUD.js';
 export { OrgLabel } from './chunk-ONQKKHON.js';
+export { Outline, scrollToHeading, useActiveHeading } from './chunk-A5YKNRG6.js';
 export { MARKDOWN_CALLOUT_NAMES, MARKDOWN_CALLOUT_TONES, markdownBreaks, markdownClosesFence, markdownCodeText, markdownFenceOf, markdownHeadingOf, markdownInline, markdownLines, parseMarkdown, parseMarkdownSpans, safeHref } from './chunk-BAKPMH3S.js';
 export { MARKDOWN_FORMATS, MarkdownEditor, formatMarkdown, insertMarkdown, markdownWords } from './chunk-VRPDQSXZ.js';
 export { MERGE_CONFLICTS_LABELS, MergeConflicts } from './chunk-5G76O23M.js';
@@ -148,7 +149,7 @@ export { ColorSwatch } from './chunk-KA2GAB3N.js';
 export { CopyButton, Copyable } from './chunk-IOTN23FZ.js';
 export { useClipboard, writeClipboard } from './chunk-STJ7QBC3.js';
 export { useOutcome } from './chunk-DTIW4CHZ.js';
-export { Combobox } from './chunk-VC2M2E7N.js';
+export { Combobox } from './chunk-PK2P2QH6.js';
 export { CommandPalette } from './chunk-I74C4TM6.js';
 export { ConfirmModal, Modal } from './chunk-KVWZDCTQ.js';
 export { HIGHLIGHT_REST_MS, TYPE_AHEAD_WINDOW, useHighlightRest, useListbox, useOptionKeys } from './chunk-7KHM2FZH.js';

package/dist/styles.css

@@ -38567,6 +38567,22 @@ svg.crewlet-time-window__tick {
 }
 
 
+/* ValueField-EIBD6RYS.css */
+/*
+ * ValueField: a labelled value with the control its kind needs.
+ *
+ * The row is FormField's and every control is the package's own; what is
+ * drawn here is the mark a label may carry, such as a third party's logo,
+ * set on the label's line ahead of its words.
+ */
+
+.crewlet-value-field__label {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-1);
+}
+
+
 /* VersionCompare-UUZOPTQO.css */
 /* VersionCompare: a head naming the two versions with the lens switch at its
    end, then the changes or the two versions. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crewlethq/ui",
-  "version": "0.61.0",
+  "version": "0.62.0",
   "description": "Crewlet shared React components built on @crewlethq/tokens and @crewlethq/icons.",
   "license": "MIT",
   "repository": {
@@ -42,8 +42,8 @@
     "clean": "rm -rf dist src/generated"
   },
   "dependencies": {
-    "@crewlethq/icons": "0.61.0",
-    "@crewlethq/tokens": "0.61.0",
+    "@crewlethq/icons": "0.62.0",
+    "@crewlethq/tokens": "0.62.0",
     "prosemirror-commands": "1.7.2",
     "prosemirror-gapcursor": "1.4.1",
     "prosemirror-history": "1.5.1",