@crewlethq/ui 0.39.0 → 0.40.1

package/dist/DataGrid-AQKPJD7W.css

@@ -0,0 +1,482 @@
+/*
+ * DataGrid: a list as columns, one track list on the grid.
+ *
+ * THE GRID MAKES NO SCROLLPORT OF ITS OWN. `overflow: clip` rounds the rows off
+ * at the corner exactly as `hidden` would, and it is the difference between a
+ * sticky head that works and one that cannot: `hidden` makes a scroll
+ * container, a sticky box is confined to its nearest scrollport, and this one
+ * grows to its rows, so its offset is always 0. The head sticks against the
+ * page's own scroller; an application whose scroller carries a sticky bar of
+ * its own sets `--crewlet-data-grid-sticky-top` to that bar's height.
+ *
+ * THE COLUMNS BELONG TO THE GRID, NOT TO A ROW. The tracks are declared once,
+ * on the grid (its inline `grid-template-columns`), and the head, the body,
+ * the bands and the rows are `subgrid` passthroughs, so a head cell and a cell
+ * twenty rows down size the same track. Everything that is not a row of cells
+ * spans the whole width.
+ */
+
+.crewlet-data-grid {
+  display: grid;
+  min-width: 0;
+  border: 1px solid var(--color-border-hover);
+  border-radius: var(--radius-md);
+  overflow: clip;
+  background: var(--color-surface-subtle);
+}
+
+/*
+ * A CARD'S BODY (`flush`, and every grid straight in a Card or its body, told
+ * or not): the card is the frame, so the grid draws none of its own and one
+ * rule parts it from the card's head. Under the card's header, the header's
+ * own rule is that one.
+ */
+.crewlet-data-grid[data-flush],
+.crewlet-card > .crewlet-data-grid,
+.crewlet-card__body > .crewlet-data-grid {
+  border: 0;
+  border-top: 1px solid var(--color-border-default);
+  border-radius: var(--radius-none);
+  background: transparent;
+}
+
+.crewlet-card__header + .crewlet-data-grid {
+  border-top: 0;
+}
+
+/* A full-width band by default: the head, the body, the foot, the reset and
+   the empty state, which is the one child when the grid carries no tracks. */
+.crewlet-data-grid > * {
+  grid-column: 1 / -1;
+}
+
+.crewlet-data-grid__head,
+.crewlet-data-grid__body,
+.crewlet-data-grid__band,
+.crewlet-data-grid__row {
+  display: grid;
+  grid-template-columns: subgrid;
+  grid-column: 1 / -1;
+}
+
+.crewlet-data-grid__band-head,
+.crewlet-data-grid__band-foot {
+  grid-column: 1 / -1;
+}
+
+/*
+ * The head: a floor at the row height (density shrinks the padding, not the
+ * label), on the raised ground, sticky at the application's offset.
+ */
+.crewlet-data-grid__head {
+  align-items: center;
+  min-height: var(--size-row-md);
+  border-bottom: 1px solid var(--color-border-hover);
+  background: var(--color-surface-elevated);
+  position: sticky;
+  top: var(--crewlet-data-grid-sticky-top, var(--spacing-0));
+  z-index: var(--z-index-sticky);
+}
+
+/*
+ * THE LIST TABLE'S HEAD: the micro-label register every table takes, 11/500
+ * uppercase. A sortable head is a button with its chrome reset; the reset
+ * takes the focus ring with it, so the ring is restated below.
+ */
+.crewlet-data-grid__th {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  padding: var(--spacing-2) var(--spacing-3);
+  font-size: var(--font-size-2xs);
+  font-weight: var(--font-weight-medium);
+  text-transform: uppercase;
+  letter-spacing: var(--font-letter-spacing-wide);
+  color: var(--color-text-tertiary);
+  cursor: pointer;
+  min-width: 0;
+  transition: color var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+.crewlet-data-grid__th--plain {
+  cursor: default;
+}
+
+/* A sortable head's control fills the head: the whole cell is the target. */
+.crewlet-data-grid__sort {
+  all: unset;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  flex: 1 1 auto;
+  min-width: 0;
+  margin: calc(-1 * var(--spacing-2)) calc(-1 * var(--spacing-3));
+  padding: var(--spacing-2) var(--spacing-3);
+  cursor: pointer;
+}
+
+.crewlet-data-grid__th--right .crewlet-data-grid__sort {
+  justify-content: flex-end;
+}
+
+.crewlet-data-grid__th:not(.crewlet-data-grid__th--plain):hover,
+.crewlet-data-grid__th--sorted {
+  color: var(--color-text-primary);
+}
+
+.crewlet-data-grid__th--right {
+  justify-content: flex-end;
+}
+
+.crewlet-data-grid__sort:focus-visible,
+.crewlet-data-grid__cols-reset:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+.crewlet-data-grid__body {
+  min-width: 0;
+}
+
+.crewlet-data-grid__row {
+  align-items: center;
+  min-height: var(--size-row-md);
+  border-bottom: 1px solid var(--color-border-default);
+  color: inherit;
+  cursor: pointer;
+  /* The containing block for the row's link. */
+  position: relative;
+  transition: background var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+/* THE ROW'S OWN LINK, STRETCHED OVER IT, out of flow so it takes no track. */
+.crewlet-data-grid__row-link {
+  position: absolute;
+  inset: 0;
+}
+
+/* A button overlay (a row that acts and has no address) gives up the chrome a
+   button brings, and draws the focus ring inside the row. */
+button.crewlet-data-grid__row-link {
+  all: unset;
+  position: absolute;
+  inset: 0;
+  cursor: pointer;
+}
+
+.crewlet-data-grid__row-link:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+/*
+ * AND THE CELLS' OWN CONTROLS SIT ABOVE IT: positioned and later in the
+ * document than the overlay, they win the hit test in the same stacking
+ * context, with no z-index to reason about against the sticky head. A cell's
+ * element that is not a link or a button but must take its own clicks (a
+ * refusal sentence a reader selects) carries `data-above-row`.
+ */
+.crewlet-data-grid__row a:not(.crewlet-data-grid__row-link),
+.crewlet-data-grid__row button:not(.crewlet-data-grid__row-link),
+.crewlet-data-grid__row [data-above-row] {
+  position: relative;
+}
+
+.crewlet-data-grid__row:last-child {
+  border-bottom: none;
+}
+
+.crewlet-data-grid__row:hover {
+  background: var(--color-surface-hover);
+}
+
+.crewlet-data-grid__row--selected,
+.crewlet-data-grid__row--selected:hover {
+  background: var(--color-brand-accent-soft);
+}
+
+.crewlet-data-grid__row--cursor {
+  box-shadow: inset 2px 0 0 var(--color-brand-accent);
+}
+
+/* A FAILED ROW IS MARKED ON ITS EDGE, not tinted: the status column already
+   says so, and two signals for one fact teach a reader to trust neither. */
+.crewlet-data-grid__row--failed {
+  box-shadow: inset 2px 0 0 var(--color-feedback-danger-ink);
+}
+
+.crewlet-data-grid__cell {
+  padding: var(--spacing-1) var(--spacing-3);
+  font-size: var(--font-size-compact);
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+}
+
+/*
+ * A SHRINK COLUMN does not wrap inside its capped track, and does not paint
+ * outside it: a nowrap cell narrower than its content would spill over the
+ * column beside it. `clip`, since a scrollport here would cut the sticky head.
+ */
+.crewlet-data-grid__th--shrink,
+.crewlet-data-grid__cell--shrink {
+  white-space: nowrap;
+  overflow: clip;
+}
+
+.crewlet-data-grid__cell--right {
+  justify-content: flex-end;
+}
+
+.crewlet-data-grid__truncate {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.crewlet-data-grid__band + .crewlet-data-grid__band {
+  border-top: 1px solid var(--color-border-hover);
+}
+
+.crewlet-data-grid__band-head,
+.crewlet-data-grid__band-foot {
+  display: flex;
+}
+
+/* The band row's one cell lays its parts out on the row's own flex line. */
+.crewlet-data-grid__band-cell {
+  display: contents;
+}
+
+.crewlet-data-grid__band-head {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  padding: var(--spacing-2) var(--spacing-3);
+  background: var(--color-surface-elevated);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-semibold);
+  position: sticky;
+  /* Under the column heads, which are a row tall and parked at the offset;
+     confined to its own band, so it leaves with the band. Above the rows
+     (positioned for the row link) and below the heads. */
+  top: calc(var(--crewlet-data-grid-sticky-top, var(--spacing-0)) + var(--size-row-md));
+  z-index: var(--z-index-raised);
+}
+
+/* A SECOND AXIS IS A BAND INSIDE A BAND, inset and quieter, so it does not
+   read as its parent's sibling; and it draws no rule above itself. */
+.crewlet-data-grid__band .crewlet-data-grid__band > .crewlet-data-grid__band-head {
+  padding-left: calc(var(--spacing-3) + var(--spacing-4));
+  background: var(--color-surface-subtle);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-data-grid__band .crewlet-data-grid__band + .crewlet-data-grid__band {
+  border-top: none;
+}
+
+.crewlet-data-grid__band-count {
+  margin-left: auto;
+  color: var(--color-text-tertiary);
+  font-weight: var(--font-weight-regular);
+  font-variant-numeric: tabular-nums;
+}
+
+.crewlet-data-grid__band-foot {
+  padding: var(--spacing-1) var(--spacing-3);
+  font-size: var(--font-size-2xs);
+  color: var(--color-text-tertiary);
+  background: var(--color-surface-elevated);
+}
+
+.crewlet-data-grid__band-foot a {
+  color: var(--color-brand-accent-ink);
+}
+
+.crewlet-data-grid__band-foot a:hover {
+  color: var(--color-text-primary);
+}
+
+.crewlet-data-grid__foot {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  padding: var(--spacing-2) var(--spacing-3);
+  border-top: 1px solid var(--color-border-hover);
+  background: var(--color-surface-elevated);
+  font-size: var(--font-size-xs);
+}
+
+.crewlet-data-grid__foot-spacer {
+  flex: 1 1 auto;
+}
+
+.crewlet-data-grid__note {
+  font-size: var(--font-size-xs);
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-data-grid__cols-reset {
+  all: unset;
+  /* After the reset, which takes `grid-column` too. */
+  grid-column: 1 / -1;
+  padding: var(--spacing-1) var(--spacing-3);
+  font-size: var(--font-size-2xs);
+  color: var(--color-brand-accent-ink);
+  cursor: pointer;
+  text-align: left;
+}
+
+/* ---- The column chooser ------------------------------------------------ */
+
+.crewlet-column-chooser__label {
+  font-size: var(--font-size-2xs);
+  font-weight: var(--font-weight-medium);
+  letter-spacing: var(--font-letter-spacing-wide);
+  text-transform: uppercase;
+  color: var(--color-text-tertiary);
+}
+
+/* TWO COLUMNS: a single file of short words makes a menu as tall as the grid
+   has columns. */
+.crewlet-column-chooser__choices {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--spacing-1) var(--spacing-3);
+}
+
+/* The pointer target is the row, not the 13px box. */
+.crewlet-column-chooser__choice {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  min-height: var(--size-target-min);
+  font-size: var(--font-size-compact);
+  color: var(--color-text-secondary);
+  cursor: pointer;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-data-grid__th,
+  .crewlet-data-grid__row {
+    transition: none;
+  }
+}
+
+/* ---- A ROW IS A CARD ON A PHONE -----------------------------------------
+   A GRID IS COLUMNS, AND A PHONE DOES NOT HAVE THEM: the grid clips (for its
+   sticky head), so the columns past the edge were cut off with nothing to
+   scroll to, and a sideways scroller resolves every flexible track to zero. So
+   the head goes and each cell draws its own name beside its value
+   (`data-label`); the subgrid chain is unwound to blocks and each cell is a
+   flex line, label then value. A cell with nothing in it is no line
+   (`:empty`), and a cell that draws a marked absence has content and stays.
+   The sort is in the application's state, so a sorted list still arrives
+   sorted. */
+@media (width < 640px) {
+  .crewlet-data-grid {
+    display: block;
+  }
+
+  .crewlet-data-grid__head {
+    display: none;
+  }
+
+  .crewlet-data-grid__body,
+  .crewlet-data-grid__band {
+    display: block;
+  }
+
+  .crewlet-data-grid__row {
+    display: block;
+    padding: var(--spacing-2) var(--spacing-3);
+    min-height: 0;
+  }
+
+  /* A FIXED BASIS lines the names up without a track, and the name wraps
+     inside it rather than pushing its value past every other card line. */
+  .crewlet-data-grid__cell {
+    display: flex;
+    align-items: baseline;
+    gap: var(--spacing-3);
+    padding: 1px 0;
+    min-width: 0;
+  }
+
+  .crewlet-data-grid__cell:empty {
+    display: none;
+  }
+
+  .crewlet-data-grid__cell[data-label]::before {
+    content: attr(data-label);
+    flex: 0 0 7rem;
+    overflow-wrap: anywhere;
+    font-size: var(--font-size-2xs);
+    text-transform: uppercase;
+    letter-spacing: var(--font-letter-spacing-wide);
+    color: var(--color-text-tertiary);
+  }
+
+  /* `shrink` and `right` are column shapes, and there are no columns here. */
+  .crewlet-data-grid__cell--shrink,
+  .crewlet-data-grid__cell--right {
+    white-space: normal;
+    justify-content: flex-start;
+  }
+
+  .crewlet-data-grid__cell .crewlet-data-grid__truncate {
+    white-space: normal;
+    overflow: visible;
+    text-overflow: clip;
+    overflow-wrap: anywhere;
+  }
+
+  /* ---- THE COMPACT ROW (`phoneRows="compact"`) ---------------------------
+     TWO LINES, NO LABELS: what the row is, then its marks. One flex run that
+     breaks once: the lead cells first, a zero-height full-width `::after`
+     between them and the rest, then every other cell in column order. */
+  .crewlet-data-grid[data-phone-rows='compact'] .crewlet-data-grid__row {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--spacing-1) var(--spacing-2);
+  }
+
+  .crewlet-data-grid[data-phone-rows='compact'] .crewlet-data-grid__row::after {
+    content: '';
+    order: 1;
+    flex-basis: 100%;
+    height: 0;
+  }
+
+  .crewlet-data-grid[data-phone-rows='compact'] .crewlet-data-grid__cell {
+    order: 2;
+    padding: 0;
+    align-items: center;
+    gap: var(--spacing-1);
+  }
+
+  .crewlet-data-grid[data-phone-rows='compact'] .crewlet-data-grid__cell[data-lead] {
+    order: 0;
+  }
+
+  /* The title takes the rest of the first line, beside the key. */
+  .crewlet-data-grid[data-phone-rows='compact']
+    .crewlet-data-grid__cell[data-lead]:not(.crewlet-data-grid__cell--shrink) {
+    flex: 1 1 0;
+    min-width: 0;
+    font-weight: var(--font-weight-medium);
+  }
+
+  .crewlet-data-grid[data-phone-rows='compact'] .crewlet-data-grid__cell[data-label]::before {
+    content: none;
+  }
+
+  .crewlet-data-grid[data-phone-rows='compact'] .crewlet-data-grid__cell[data-phone-omit] {
+    display: none;
+  }
+}

package/dist/HuePicker/index.js

@@ -1,10 +1,17 @@
 import '../chunk-FFMCMSJB.js';
-export { HuePicker, HueSwatch } from '../chunk-F4LPQA4E.js';
+export { HuePicker, HueSwatch } from '../chunk-BA32AVKS.js';
 import '../chunk-AYKXMIOR.js';
-import '../chunk-2QZ2VPHR.js';
-import '../chunk-7SDUKCNW.js';
-import '../chunk-RKKO7QHH.js';
+import '../chunk-4OK4DX3V.js';
+import '../chunk-X4IXXLWM.js';
+import '../chunk-WIATRXEJ.js';
+import '../chunk-EGMQURBR.js';
 import '../chunk-BHHIIK3M.js';
+import '../chunk-D6FEHY5G.js';
+import '../chunk-OMV5W53A.js';
+import '../chunk-H5XTJ7GJ.js';
 import '../chunk-2YTOOH3A.js';
+import '../chunk-OG6CL3EB.js';
+import '../chunk-4FQT6ZAY.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/LayersList/index.js

@@ -1,3 +1,3 @@
-export { LAYERS_LIST_LABELS, LayersList } from '../chunk-46RL3E54.js';
-import '../chunk-RKKO7QHH.js';
+export { LAYERS_LIST_LABELS, LayersList } from '../chunk-M6NQ4XGK.js';
+import '../chunk-EGMQURBR.js';
 import '../chunk-ODEQTPFM.js';

package/dist/LockedLabel/LockedLabel.d.ts

@@ -0,0 +1,34 @@
+import type { ReactNode } from 'react';
+export interface LockedLabelProps {
+    /** What the place is called: a nav row's words, a tab's. */
+    children: ReactNode;
+    /**
+     * Why the reader cannot open it, as a sentence: "Needs Admin access". Left
+     * out, nothing is locked and the label is drawn as it is, with no mark.
+     */
+    reason?: string | undefined;
+    /**
+     * Draws the key. Off where the place stands under a heading that already
+     * carries it (a nav group whose every row is locked): the reason is still
+     * the title and still read after the name, and the key is drawn once, on
+     * the heading, rather than down every row.
+     */
+    mark?: boolean | undefined;
+    className?: string | undefined;
+}
+/**
+ * A place's name with the key after it, where the reader lacks the access it
+ * takes: the sidebar's rows, a section column's, a section tab's.
+ *
+ * LOCKED, NEVER HIDDEN. A place that vanished for a reader without its access
+ * is one they cannot know exists, and cannot ask an admin for; so the name
+ * stays, the key says it is closed, the pointer's title says why, and a
+ * screen reader hears the reason after the name (", Needs Admin access").
+ *
+ * ONE MARK WHEREVER A PLACE IS OFFERED, so a locked place reads the same in
+ * the rail, in a column of sections and in a row of tabs: a tab that drew no
+ * key looked open and then refused.
+ *
+ * Nothing but the label where nothing is missing.
+ */
+export declare function LockedLabel({ children, reason, mark, className }: LockedLabelProps): import("react").JSX.Element;

package/dist/LockedLabel/index.d.ts

@@ -0,0 +1,3 @@
+import './LockedLabel.css';
+export { LockedLabel } from './LockedLabel.js';
+export type { LockedLabelProps } from './LockedLabel.js';

package/dist/LockedLabel/index.js

@@ -0,0 +1,3 @@
+export { LockedLabel } from '../chunk-OHGH7O6T.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';

package/dist/LockedLabel-VQEGEB7G.css

@@ -0,0 +1,16 @@
+/*
+ * LockedLabel: a place's words with the key after them. The words keep their
+ * own ink and size; the key takes the quiet step, a step closer to the words
+ * than the words are to anything else.
+ */
+.crewlet-locked-label {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  min-width: 0;
+}
+
+.crewlet-locked-label__key {
+  flex: none;
+  color: var(--color-text-tertiary);
+}

package/dist/MarkdownEditor/index.js

@@ -1,13 +1,16 @@
-export { MARKDOWN_FORMATS, MarkdownEditor, formatMarkdown, insertMarkdown, markdownWords } from '../chunk-GMW4ZHST.js';
+export { MARKDOWN_FORMATS, MarkdownEditor, formatMarkdown, insertMarkdown, markdownWords } from '../chunk-EX22Q5SH.js';
 import '../chunk-NR4CPM4T.js';
-import '../chunk-4ISUIS6F.js';
-import '../chunk-2QZ2VPHR.js';
-import '../chunk-7SDUKCNW.js';
-import '../chunk-RKKO7QHH.js';
+import '../chunk-OOC7Q67K.js';
+import '../chunk-4OK4DX3V.js';
+import '../chunk-X4IXXLWM.js';
+import '../chunk-WIATRXEJ.js';
+import '../chunk-EGMQURBR.js';
 import '../chunk-BHHIIK3M.js';
+import '../chunk-D6FEHY5G.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-H5XTJ7GJ.js';
 import '../chunk-2YTOOH3A.js';
+import '../chunk-OG6CL3EB.js';
 import '../chunk-4FQT6ZAY.js';
 import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';

package/dist/MergeConflicts/index.js

@@ -1,10 +1,16 @@
-export { MERGE_CONFLICTS_LABELS, MergeConflicts } from '../chunk-B5J23C73.js';
-import '../chunk-4ISUIS6F.js';
-import '../chunk-2QZ2VPHR.js';
-import '../chunk-7SDUKCNW.js';
-import '../chunk-RKKO7QHH.js';
+export { MERGE_CONFLICTS_LABELS, MergeConflicts } from '../chunk-2PEXZ7L4.js';
+import '../chunk-OOC7Q67K.js';
+import '../chunk-4OK4DX3V.js';
+import '../chunk-X4IXXLWM.js';
+import '../chunk-WIATRXEJ.js';
+import '../chunk-EGMQURBR.js';
 import '../chunk-BHHIIK3M.js';
+import '../chunk-D6FEHY5G.js';
+import '../chunk-OMV5W53A.js';
+import '../chunk-H5XTJ7GJ.js';
 import '../chunk-2YTOOH3A.js';
 import '../chunk-OG6CL3EB.js';
+import '../chunk-4FQT6ZAY.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/PageNote/PageNote.d.ts

@@ -0,0 +1,14 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export interface PageNoteProps extends HTMLAttributes<HTMLParagraphElement> {
+    children?: ReactNode;
+}
+/**
+ * One sentence saying what a screen answers, under the page's own title.
+ *
+ * NOT A HEADER. A page bar's breadcrumb is the title; what is left is the
+ * sentence that explains the screen, worth keeping where the screen answers a
+ * question whose shape is not obvious from its name. A quiet line rather than
+ * a panel, at the reading measure: a reader who has read it once scans past it
+ * for ever after. It keeps no margin: the page's column sets the rhythm.
+ */
+export declare function PageNote({ className, children, ...rest }: PageNoteProps): import("react").JSX.Element;

package/dist/PageNote/index.d.ts

@@ -0,0 +1,3 @@
+import './PageNote.css';
+export { PageNote } from './PageNote.js';
+export type { PageNoteProps } from './PageNote.js';

package/dist/PageNote/index.js

@@ -0,0 +1,2 @@
+export { PageNote } from '../chunk-CV4NES3P.js';
+import '../chunk-ODEQTPFM.js';

package/dist/PageNote-RHLXH3ML.css

@@ -0,0 +1,12 @@
+/*
+ * PageNote: the screen's one quiet sentence. No word alone on its last line
+ * (`pretty`), which reads as a sentence that stopped rather than one that
+ * ended. No margin of its own: the column it stands in sets the gap.
+ */
+.crewlet-page-note {
+  margin: 0;
+  max-width: var(--size-measure);
+  font-size: var(--font-size-compact);
+  color: var(--color-text-tertiary);
+  text-wrap: pretty;
+}