@crewlethq/ui 0.44.0 → 0.46.0

package/dist/ListInput/ListInput.d.ts

@@ -1,4 +1,26 @@
 import { type ReactNode } from 'react';
+/**
+ * The list a form would save: `value` with the new-item box's text appended,
+ * trimmed, when there is any.
+ *
+ * WHY A FORM NEEDS IT. Text typed into the new-item box is not an item until
+ * Enter adds it, and a writer who types a policy and presses the form's Save
+ * expects it saved, not silently dropped. An owner that holds the box's text
+ * (`draft` and `onDraftChange`) counts it as unsaved and saves it with this,
+ * so the rule is written once rather than by each form.
+ */
+export declare function withDraft(value: readonly string[], draft: string | undefined): string[];
+/** What a caller can ask the list to do from outside it. */
+export interface ListInputHandle {
+    /**
+     * Puts the focus in the item at `index` (in `value`'s order), with the caret
+     * at its end: the first item a failed save refused, or the one a conflict
+     * kept. Does nothing for an index the list does not hold.
+     */
+    focusItem: (index: number) => void;
+    /** Puts the focus in the new-item box, when the list is not full. */
+    focusNew: () => void;
+}
 export interface ListInputProps {
     /** The list's name, such as "Responsibilities". It is the group's legend. */
     label: string;
@@ -6,7 +28,26 @@ export interface ListInputProps {
     itemName: string;
     value: readonly string[];
     onChange: (next: string[]) => void;
-    /** Items are paragraphs: Shift+Enter makes a newline. */
+    /**
+     * The text in the new-item box, held by the owner. Left out, the list holds
+     * it itself. Hold it wherever a form saves the list: text typed and not yet
+     * added is part of what the writer means to save, so the owner counts it
+     * as a change and saves it (`withDraft`) rather than dropping it.
+     */
+    draft?: string | undefined;
+    /** Every change to the new-item box's text, an add clearing it included. */
+    onDraftChange?: ((next: string) => void) | undefined;
+    /**
+     * The legend is kept for assistive technology and drawn for nobody, for a
+     * list whose name is already the heading right above it (a card titled
+     * "Standing policies"). The add control stays where it is.
+     */
+    hideLabel?: boolean | undefined;
+    /**
+     * Items are paragraphs: Shift+Enter makes a newline. Without it each item
+     * is ONE line, which still wraps so a long one can be read while it is
+     * edited, and takes no line break however it arrives.
+     */
     multiline?: boolean | undefined;
     /** Where the values come from, or what shape they take. */
     helper?: ReactNode | undefined;
@@ -29,6 +70,45 @@ export interface ListInputProps {
      * focus to its own first control. Named as `TagsInput`'s is.
      */
     focusOnMount?: boolean | undefined;
+    /**
+     * Each row carries a grip it can be DRAGGED by, as well as Move up and Move
+     * down. Off by default. The grip is a pointer's affordance only, hidden from
+     * a screen reader and out of the tab order, because the keyboard already
+     * has the whole of reordering (Alt+Up and Alt+Down from the item, and the
+     * two buttons) and a third control per row that does the same thing is a
+     * row a keyboard has to Tab through for nothing.
+     */
+    reorderByDrag?: boolean | undefined;
+    /**
+     * The most items the list holds. Once it is full the new-item box gives way
+     * to a sentence saying so (`fullMessage`), the add control does nothing,
+     * and every item stays editable, movable and removable.
+     */
+    maxItems?: number | undefined;
+    /**
+     * The most characters one item holds, counted on its TRIMMED text as a
+     * server judging the saved list does, and as code points (see
+     * `countCharacters`). A SOFT limit, as `FormField`'s
+     * `limit` is: an item past it keeps what was typed, draws its count in the
+     * danger ink and is marked invalid; the new-item box refuses to add one,
+     * and shows its count from nine tenths of the way.
+     */
+    maxLength?: number | undefined;
+    /**
+     * Removing an item leaves a row where it was, saying so, with Undo (which
+     * puts it back where it was, with the focus in it) and Dismiss. The focus
+     * goes to Undo. The row goes on the list's next change or on Dismiss, so an
+     * Undo never restores an item into a list that has moved on.
+     */
+    undoRemove?: boolean | undefined;
+    /**
+     * A refusal of one item, said under it and linked to it, which marks it
+     * invalid: a server's word about policy 3, or a rule only the caller knows.
+     * Called for every item on every render, with its index and its value.
+     */
+    itemError?: ((index: number, value: string) => ReactNode) | undefined;
+    /** What the list says in place of the new-item box once it is full. */
+    fullMessage?: ((max: number) => string) | undefined;
     /** The name of the control beside the legend that appends what the box holds. */
     addLabel?: ((itemName: string) => string) | undefined;
     itemLabel?: ((name: string, position: string) => string) | undefined;
@@ -39,6 +119,11 @@ export interface ListInputProps {
     addedMessage?: ((itemName: string, position: string) => string) | undefined;
     removedMessage?: ((itemName: string, position: string) => string) | undefined;
     movedMessage?: ((itemName: string, position: number, count: number) => string) | undefined;
+    /** The row a removed item leaves (`undoRemove`): "Policy 3 removed." */
+    removedNotice?: ((name: string, position: number) => string) | undefined;
+    undoLabel?: string | undefined;
+    dismissLabel?: string | undefined;
+    restoredMessage?: ((itemName: string, position: string) => string) | undefined;
 }
 /**
  * An ordered list of strings, edited in place.
@@ -75,4 +160,4 @@ export interface ListInputProps {
  *
  * Ported from the engine dashboard's `ui/ListField.tsx`.
  */
-export declare function ListInput({ label, itemName, value, onChange, multiline, helper, helperOnFocus, error, placeholder, disabled, optional, enterHint, focusOnMount, addLabel, itemLabel, newItemLabel, moveUpLabel, moveDownLabel, removeLabel, addedMessage, removedMessage, movedMessage, }: ListInputProps): import("react").JSX.Element;
+export declare const ListInput: import("react").ForwardRefExoticComponent<ListInputProps & import("react").RefAttributes<ListInputHandle>>;

package/dist/ListInput/index.d.ts

@@ -1,3 +1,3 @@
 import './ListInput.css';
-export { ListInput } from './ListInput.js';
-export type { ListInputProps } from './ListInput.js';
+export { ListInput, withDraft } from './ListInput.js';
+export type { ListInputHandle, ListInputProps } from './ListInput.js';

package/dist/ListInput/index.js

@@ -1,9 +1,12 @@
-export { ListInput } from '../chunk-NMYGJJJK.js';
-import '../chunk-ZI5G5RS7.js';
+export { ListInput, withDraft } from '../chunk-SQZEVWVC.js';
+import '../chunk-XJ2QEBMM.js';
+import '../chunk-Z734SV4E.js';
+import '../chunk-XCUUI7E7.js';
 import '../chunk-SMBKXWML.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-RSAQOKH3.js';
 import '../chunk-OMV5W53A.js';
+import '../chunk-OG6CL3EB.js';
 import '../chunk-H5XTJ7GJ.js';
 import '../chunk-LACA4JGC.js';
 import '../chunk-NUZHC6MM.js';

package/dist/{ListInput-O7LJKOIG.css → ListInput-DP2CSJ22.css}

@@ -13,6 +13,7 @@
 .crewlet-list-input__add {
   display: flex;
   align-items: flex-start;
+  gap: var(--spacing-2);
 }
 
 .crewlet-list-input__add > * {
@@ -69,10 +70,75 @@
   border-block-end-style: none;
 }
 
-.crewlet-list-input__item > .crewlet-input,
-.crewlet-list-input__item > .crewlet-textarea {
+/*
+ * THE FIELD TAKES THE ROW'S WIDTH, and holds the control with whatever is
+ * said under it (its count, its refusal) as one column, so a note under an
+ * item sits under the item's words and not under its number or its buttons.
+ */
+.crewlet-list-input__field {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.crewlet-list-input__field > .crewlet-input,
+.crewlet-list-input__field > .crewlet-textarea,
+.crewlet-list-input__field > .crewlet-textarea-shell {
+  width: 100%;
+  min-width: 0;
+}
+
+/* What is said under one item: its refusal at the start, its count at the end. */
+.crewlet-list-input__note {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--spacing-3);
+  padding-bottom: var(--spacing-1);
+}
+
+.crewlet-list-input__error {
+  min-width: 0;
+  font-size: var(--font-size-xs);
+  line-height: var(--font-line-height-normal);
+  color: var(--color-feedback-danger-ink);
+}
+
+/*
+ * THE ROW A REMOVED ITEM LEAVES (`undoRemove`): the item's own place in the
+ * order, at a row's height and on the row's rule, saying what happened in the
+ * quiet ink with Undo beside it, so the list does not close up over the place
+ * an Undo would put it back.
+ */
+.crewlet-list-input__removed {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  padding: var(--spacing-1) var(--spacing-3);
+  border-block-end-width: 1px;
+  border-block-end-style: solid;
+  border-block-end-color: var(--color-border-default);
+  background: var(--color-surface-subtle);
+}
+
+.crewlet-list-input__removed:last-child {
+  border-block-end-style: none;
+}
+
+.crewlet-list-input__removed-text {
   flex: 1;
   min-width: 0;
+  font-size: var(--font-size-compact);
+  color: var(--color-text-secondary);
+}
+
+/* Where the new-item box was, once the list holds all it may. */
+.crewlet-list-input__full {
+  margin: 0;
+  font-size: var(--font-size-xs);
+  line-height: var(--font-line-height-normal);
+  color: var(--color-text-tertiary);
 }
 
 /*
@@ -140,8 +206,58 @@
   opacity: 1;
 }
 
+/*
+ * THE GRIP (`reorderByDrag`) waits with the move pair: the pointer's way to
+ * take hold of a row, shown under the pointer and while the row holds the
+ * focus, in the quiet ink so the row's number stays the first mark on it.
+ */
+.crewlet-list-input__handle {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  margin-inline-start: calc(var(--spacing-1) * -1);
+  color: var(--color-text-tertiary);
+  cursor: grab;
+  opacity: 0;
+  transition: opacity var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+.crewlet-list-input__handle:active {
+  cursor: grabbing;
+}
+
+.crewlet-list-input__item:hover .crewlet-list-input__handle,
+.crewlet-list-input__item:focus-within .crewlet-list-input__handle {
+  opacity: 1;
+}
+
+/* The row being dragged keeps its place as an outline, so the list does not
+   close up under the pointer and the reader can see where it came from. */
+.crewlet-list-input__item[data-reorder='dragging'] {
+  outline-width: 1px;
+  outline-style: dashed;
+  outline-color: var(--color-border-strong);
+  outline-offset: -1px;
+}
+
+.crewlet-list-input__item[data-reorder='dragging'] > * {
+  opacity: 0.4;
+}
+
 @media (prefers-reduced-motion: reduce) {
   .crewlet-list-input__move {
     transition: none;
   }
+
+  .crewlet-list-input__handle {
+    transition: none;
+  }
+}
+
+/* With a hidden legend the add control stands at the end of the box's row. */
+.crewlet-list-input__add-control {
+  display: inline-flex;
+  flex: none;
+  align-self: center;
 }

package/dist/MarkdownEditor/index.js

@@ -1,16 +1,16 @@
-export { MARKDOWN_FORMATS, MarkdownEditor, formatMarkdown, insertMarkdown, markdownWords } from '../chunk-DL5ERIFF.js';
+export { MARKDOWN_FORMATS, MarkdownEditor, formatMarkdown, insertMarkdown, markdownWords } from '../chunk-SS4XCUUJ.js';
 import '../chunk-NR4CPM4T.js';
 import '../chunk-OOC7Q67K.js';
-import '../chunk-BF5WV7NM.js';
-import '../chunk-KA75QPFM.js';
+import '../chunk-6FVGSWLS.js';
+import '../chunk-ILFEWRLG.js';
 import '../chunk-WIATRXEJ.js';
 import '../chunk-EGMQURBR.js';
 import '../chunk-BHHIIK3M.js';
-import '../chunk-PCI7ZJ6Z.js';
+import '../chunk-TMM32U7D.js';
 import '../chunk-OMV5W53A.js';
-import '../chunk-H5XTJ7GJ.js';
 import '../chunk-2YTOOH3A.js';
 import '../chunk-OG6CL3EB.js';
+import '../chunk-H5XTJ7GJ.js';
 import '../chunk-LACA4JGC.js';
 import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';

package/dist/Menu/index.js

@@ -1,7 +1,7 @@
-export { Menu } from '../chunk-PCI7ZJ6Z.js';
+export { Menu } from '../chunk-TMM32U7D.js';
 import '../chunk-OMV5W53A.js';
-import '../chunk-H5XTJ7GJ.js';
 import '../chunk-OG6CL3EB.js';
+import '../chunk-H5XTJ7GJ.js';
 import '../chunk-LACA4JGC.js';
 import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';

package/dist/MergeConflicts/index.js

@@ -1,15 +1,15 @@
-export { MERGE_CONFLICTS_LABELS, MergeConflicts } from '../chunk-ENHLVF6Q.js';
+export { MERGE_CONFLICTS_LABELS, MergeConflicts } from '../chunk-XS2FJVMT.js';
 import '../chunk-OOC7Q67K.js';
-import '../chunk-BF5WV7NM.js';
-import '../chunk-KA75QPFM.js';
+import '../chunk-6FVGSWLS.js';
+import '../chunk-ILFEWRLG.js';
 import '../chunk-WIATRXEJ.js';
 import '../chunk-EGMQURBR.js';
 import '../chunk-BHHIIK3M.js';
-import '../chunk-PCI7ZJ6Z.js';
+import '../chunk-TMM32U7D.js';
 import '../chunk-OMV5W53A.js';
-import '../chunk-H5XTJ7GJ.js';
 import '../chunk-2YTOOH3A.js';
 import '../chunk-OG6CL3EB.js';
+import '../chunk-H5XTJ7GJ.js';
 import '../chunk-LACA4JGC.js';
 import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';

package/dist/Modal/index.js

@@ -1,8 +1,8 @@
-export { ConfirmModal, Modal } from '../chunk-FYINAYAJ.js';
+export { ConfirmModal, Modal } from '../chunk-6AKG2VLR.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-OMV5W53A.js';
-import '../chunk-H5XTJ7GJ.js';
 import '../chunk-OG6CL3EB.js';
+import '../chunk-H5XTJ7GJ.js';
 import '../chunk-LACA4JGC.js';
 import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';

package/dist/PresenterView/index.js

@@ -1,10 +1,10 @@
-export { PresenterView, formatStopwatch } from '../chunk-E6HXFFWO.js';
-import '../chunk-RRO7UEYU.js';
+export { PresenterView, formatStopwatch } from '../chunk-ISDEXIXH.js';
 import '../chunk-RMEBFYL7.js';
+import '../chunk-RRO7UEYU.js';
 import '../chunk-RK4XPHVG.js';
 import '../chunk-OMV5W53A.js';
-import '../chunk-H5XTJ7GJ.js';
 import '../chunk-OG6CL3EB.js';
+import '../chunk-H5XTJ7GJ.js';
 import '../chunk-LACA4JGC.js';
 import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';

package/dist/PrincipalPicker/index.js

@@ -1,13 +1,15 @@
-export { PrincipalPicker } from '../chunk-4DIKLY53.js';
-import '../chunk-MVGCZ655.js';
+export { PrincipalPicker } from '../chunk-HBSR5DL6.js';
+import '../chunk-2UVMIM2J.js';
 import '../chunk-7KHM2FZH.js';
 import '../chunk-CI3VPIJN.js';
 import '../chunk-5AQBPHZD.js';
 import '../chunk-PZKHBB7D.js';
-import '../chunk-ZI5G5RS7.js';
+import '../chunk-Z734SV4E.js';
+import '../chunk-XCUUI7E7.js';
 import '../chunk-PQADV6P6.js';
-import '../chunk-H5XTJ7GJ.js';
+import '../chunk-RSAQOKH3.js';
 import '../chunk-2YTOOH3A.js';
+import '../chunk-H5XTJ7GJ.js';
 import '../chunk-LACA4JGC.js';
 import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';

package/dist/RelatedRow/index.js

@@ -1,5 +1,5 @@
-export { RelatedRow } from '../chunk-ZUTUI27P.js';
-import '../chunk-IKBK4A5O.js';
+export { RelatedRow } from '../chunk-N4GBDK4L.js';
+import '../chunk-QP2P6GDQ.js';
 import '../chunk-ZAC7SKUN.js';
 import '../chunk-INHXF2CL.js';
 import '../chunk-AV2DXAEL.js';

package/dist/RichEditor/index.js

@@ -1,4 +1,4 @@
-export { RichEditor, preloadRichEditor } from '../chunk-TVSHR35W.js';
+export { RichEditor, preloadRichEditor } from '../chunk-RWWLVDRE.js';
 export { RICH_EDITOR_LABELS, richEditorLabels } from '../chunk-CSQTDGTS.js';
 import '../chunk-BAKPMH3S.js';
 import '../chunk-SZZRIHGT.js';

package/dist/SegmentedControl/index.js

@@ -1,14 +1,14 @@
 import '../chunk-OOC7Q67K.js';
-export { SegmentedControl } from '../chunk-BF5WV7NM.js';
-import '../chunk-KA75QPFM.js';
+export { SegmentedControl } from '../chunk-6FVGSWLS.js';
+import '../chunk-ILFEWRLG.js';
 import '../chunk-WIATRXEJ.js';
 import '../chunk-EGMQURBR.js';
 import '../chunk-BHHIIK3M.js';
-import '../chunk-PCI7ZJ6Z.js';
+import '../chunk-TMM32U7D.js';
 import '../chunk-OMV5W53A.js';
-import '../chunk-H5XTJ7GJ.js';
 import '../chunk-2YTOOH3A.js';
 import '../chunk-OG6CL3EB.js';
+import '../chunk-H5XTJ7GJ.js';
 import '../chunk-LACA4JGC.js';
 import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';

package/dist/Select/index.js

@@ -1,7 +1,7 @@
 export { Select } from '../chunk-XQZ6EWOE.js';
 import '../chunk-7KHM2FZH.js';
 import '../chunk-OMV5W53A.js';
-import '../chunk-H5XTJ7GJ.js';
 import '../chunk-2YTOOH3A.js';
+import '../chunk-H5XTJ7GJ.js';
 import '../chunk-NUZHC6MM.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ShareDialog/index.js

@@ -1,9 +1,9 @@
-export { ARTIFACT_ROLES, SHAREABLE_ROLES, ShareDialog, roleAtLeast } from '../chunk-BVFMLSE3.js';
+export { ARTIFACT_ROLES, SHAREABLE_ROLES, ShareDialog, roleAtLeast } from '../chunk-5EBDOE3C.js';
 import '../chunk-XQZ6EWOE.js';
 import '../chunk-7SHAFLEX.js';
 import '../chunk-STJ7QBC3.js';
 import '../chunk-DTIW4CHZ.js';
-import '../chunk-FYINAYAJ.js';
+import '../chunk-6AKG2VLR.js';
 import '../chunk-7KHM2FZH.js';
 import '../chunk-SZZRIHGT.js';
 import '../chunk-CI3VPIJN.js';
@@ -12,9 +12,9 @@ import '../chunk-PZKHBB7D.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-RTPQDNW3.js';
 import '../chunk-OMV5W53A.js';
-import '../chunk-H5XTJ7GJ.js';
 import '../chunk-2YTOOH3A.js';
 import '../chunk-OG6CL3EB.js';
+import '../chunk-H5XTJ7GJ.js';
 import '../chunk-LACA4JGC.js';
 import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';

package/dist/SheetColumnEditor/index.js

@@ -1,25 +1,27 @@
-export { SHEET_COLUMN_EDITOR_LABELS, SheetColumnEditor, SheetColumnTypeGlyph } from '../chunk-FV6H7H5I.js';
+export { SHEET_COLUMN_EDITOR_LABELS, SheetColumnEditor, SheetColumnTypeGlyph } from '../chunk-YBJVIY5E.js';
 import '../chunk-XQZ6EWOE.js';
 import '../chunk-FFMCMSJB.js';
 import '../chunk-7KHM2FZH.js';
 import '../chunk-LFSIKGRQ.js';
 import '../chunk-Z7JYG5TF.js';
-import '../chunk-QOP7QYUW.js';
+import '../chunk-34RMTXDZ.js';
 import '../chunk-AYKXMIOR.js';
-import '../chunk-EY7LACIR.js';
-import '../chunk-BF5WV7NM.js';
-import '../chunk-KA75QPFM.js';
+import '../chunk-RWET7W22.js';
+import '../chunk-6FVGSWLS.js';
+import '../chunk-ILFEWRLG.js';
 import '../chunk-WIATRXEJ.js';
 import '../chunk-EGMQURBR.js';
-import '../chunk-ZI5G5RS7.js';
+import '../chunk-Z734SV4E.js';
+import '../chunk-XCUUI7E7.js';
 import '../chunk-SMBKXWML.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-PQADV6P6.js';
-import '../chunk-PCI7ZJ6Z.js';
+import '../chunk-RSAQOKH3.js';
+import '../chunk-TMM32U7D.js';
 import '../chunk-OMV5W53A.js';
-import '../chunk-H5XTJ7GJ.js';
 import '../chunk-2YTOOH3A.js';
 import '../chunk-OG6CL3EB.js';
+import '../chunk-H5XTJ7GJ.js';
 import '../chunk-LACA4JGC.js';
 import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';

package/dist/SheetGrid/index.js

@@ -1,9 +1,9 @@
-export { CellDisplay, CellEditor, CheckboxCell, DateCell, LongTextCell, MultiSelectCell, NumberCell, PersonCell, RatingCell, SelectCell, SheetCell, SheetGrid, StatusCell, TextCell, UrlCell } from '../chunk-OWIGEE2Y.js';
+export { CellDisplay, CellEditor, CheckboxCell, DateCell, LongTextCell, MultiSelectCell, NumberCell, PersonCell, RatingCell, SelectCell, SheetCell, SheetGrid, StatusCell, TextCell, UrlCell } from '../chunk-ZZCCNVF3.js';
 import '../chunk-O2EGEONV.js';
 import '../chunk-CENOOTAV.js';
-import '../chunk-KYIAFNU7.js';
 import '../chunk-3BYIWOTV.js';
 import '../chunk-I6POAB4V.js';
+import '../chunk-KYIAFNU7.js';
 import '../chunk-66X5WDKE.js';
 import '../chunk-LFSIKGRQ.js';
 import '../chunk-Z7JYG5TF.js';
@@ -14,10 +14,10 @@ import '../chunk-I33UIUZD.js';
 import '../chunk-5AQBPHZD.js';
 import '../chunk-PZKHBB7D.js';
 import '../chunk-RSAQOKH3.js';
-import '../chunk-PCI7ZJ6Z.js';
+import '../chunk-TMM32U7D.js';
 import '../chunk-OMV5W53A.js';
-import '../chunk-H5XTJ7GJ.js';
 import '../chunk-OG6CL3EB.js';
+import '../chunk-H5XTJ7GJ.js';
 import '../chunk-LACA4JGC.js';
 import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';

package/dist/SlideCompare/index.js

@@ -1,8 +1,8 @@
 export { SLIDE_COMPARE_LABELS, SlideCompare } from '../chunk-7CGPPAYR.js';
 import '../chunk-RMEBFYL7.js';
 import '../chunk-OMV5W53A.js';
-import '../chunk-H5XTJ7GJ.js';
 import '../chunk-OG6CL3EB.js';
+import '../chunk-H5XTJ7GJ.js';
 import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/SlideFilmstrip/index.js

@@ -1,12 +1,12 @@
-export { SlideFilmstrip } from '../chunk-MCOC3KQA.js';
+export { SlideFilmstrip } from '../chunk-SQ4JFHO7.js';
 import '../chunk-RMEBFYL7.js';
 import '../chunk-XJ2QEBMM.js';
 import '../chunk-SMBKXWML.js';
 import '../chunk-RSAQOKH3.js';
-import '../chunk-PCI7ZJ6Z.js';
+import '../chunk-TMM32U7D.js';
 import '../chunk-OMV5W53A.js';
-import '../chunk-H5XTJ7GJ.js';
 import '../chunk-OG6CL3EB.js';
+import '../chunk-H5XTJ7GJ.js';
 import '../chunk-LACA4JGC.js';
 import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';

package/dist/Statement/Statement.d.ts

@@ -0,0 +1,45 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import { type HeadingLevel } from '../utils/headingLevel.js';
+/** What a statement says while nobody has written it, with the way to write it. */
+export interface StatementEmpty {
+    /** "No mission yet". */
+    title: ReactNode;
+    /** What the statement is for, so the reader knows why to write it. */
+    description: ReactNode;
+    /** The one control that writes it: "Add a mission". */
+    action?: ReactNode;
+}
+export interface StatementProps extends Omit<HTMLAttributes<HTMLElement>, 'title' | 'children'> {
+    /** What the statement is: "Mission", "Vision". Its heading. */
+    label: ReactNode;
+    /**
+     * The statement itself. TEXT is set as the statement, a step over the body
+     * at the reading measure with its author's line breaks kept; a BLOCK (a
+     * numbered list of policies, a card) is drawn as given under the same
+     * label, so every statement on a page heads the same way. Absent, null or
+     * an empty string is a statement nobody has written, and `empty` is said in
+     * its place.
+     */
+    children?: ReactNode;
+    /**
+     * REQUIRED: an unwritten statement is said as one, never drawn as a grey
+     * value standing where the statement would.
+     */
+    empty: StatementEmpty;
+    /** The heading's level. Taken from where the statement sits by default. */
+    headingLevel?: HeadingLevel | undefined;
+}
+/**
+ * One statement a company or a team makes about itself: its mission, its
+ * vision, a goal. A label over the words, set larger than the body at a
+ * reading measure, because these are the sentences a page exists to say.
+ *
+ * NOT A KEY AND A VALUE. In a description list a mission weighs what a time
+ * zone weighs; a statement is read, not looked up. And an unwritten one is an
+ * inline empty state with its own way to write it, rather than placeholder
+ * text in the value's place that reads as if somebody wrote it.
+ *
+ * A REGION NAMED BY ITS LABEL, so a reader moving by landmark or heading
+ * hears "Mission" and then the mission.
+ */
+export declare function Statement({ label, children, empty, headingLevel, className, ...rest }: StatementProps): import("react").JSX.Element;

package/dist/Statement/index.d.ts

@@ -0,0 +1,3 @@
+import './Statement.css';
+export { Statement } from './Statement.js';
+export type { StatementEmpty, StatementProps } from './Statement.js';

package/dist/Statement/index.js

@@ -0,0 +1,4 @@
+export { Statement } from '../chunk-MZJKPTA5.js';
+import '../chunk-PPUR46MK.js';
+import '../chunk-PQADV6P6.js';
+import '../chunk-ODEQTPFM.js';

package/dist/Statement-M4QDXIMO.css

@@ -0,0 +1,53 @@
+/*
+ * Statement: a label over the words a page exists to say (Statement.tsx).
+ *
+ * THE LABEL IS THE MICRO REGISTER and the words are a step over the body, at
+ * the reading measure, so the statement outweighs everything around it and a
+ * line of it is one an eye can follow back.
+ */
+
+.crewlet-statement {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  margin: 0;
+  min-width: 0;
+}
+
+.crewlet-statement__label {
+  margin: 0;
+  font-size: var(--font-size-2xs);
+  font-weight: var(--font-weight-medium);
+  letter-spacing: var(--font-letter-spacing-wide);
+  line-height: var(--font-line-height-snug);
+  text-transform: uppercase;
+  color: var(--color-text-tertiary);
+}
+
+/* THE AUTHOR'S OWN LINE BREAKS are kept, and no word stands alone on the last
+   line. A long word (an address, a product name) breaks rather than widening
+   the column. */
+.crewlet-statement__text {
+  margin: 0;
+  max-width: var(--size-measure);
+  font-size: var(--font-size-lg);
+  line-height: var(--font-line-height-relaxed);
+  color: var(--color-text-primary);
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  text-wrap: pretty;
+}
+
+/* A BLOCK under the label is drawn as given: its own register, the column's
+   width. */
+.crewlet-statement__body {
+  min-width: 0;
+}
+
+/* ON A PHONE the words step down to the body's own step over it, so a
+   mission is a paragraph rather than a poster. */
+@media (width < 640px) {
+  .crewlet-statement__text {
+    font-size: var(--font-size-md);
+  }
+}