@crewlethq/ui 0.50.0 → 0.52.0

package/dist/styles.css

@@ -2913,7 +2913,7 @@ button.crewlet-account-row__who:focus-visible {
 }
 
 
-/* ArtifactCard-SOB63NV5.css */
+/* ArtifactCard-F7IVRL3A.css */
 /*
  * A card in a gallery: the preview on top at a fixed ratio, so a grid of them
  * lines up whatever each preview is, the kind's badge over its foot, then the
@@ -3131,6 +3131,9 @@ button.crewlet-account-row__who:focus-visible {
 
 .crewlet-artifact-card--card .crewlet-artifact-card__facts {
   font-size: var(--font-size-sm);
+  /* The title's line height, so a card's words and a folder tile's beside it
+     keep one rhythm. */
+  line-height: 1.35;
 }
 
 .crewlet-artifact-card__meta {
@@ -5812,7 +5815,7 @@ a.crewlet-breadcrumb__crumb:focus-visible {
 }
 
 
-/* Callout-ZAVG3P66.css */
+/* Callout-G3N3IE6M.css */
 /*
  * The callout: a status that stays in the content flow.
  *
@@ -5892,7 +5895,16 @@ a.crewlet-breadcrumb__crumb:focus-visible {
   font-weight: var(--font-weight-semibold);
 }
 
+/*
+ * THE ACTIONS ARE A ROW one step apart, wrapping when there is no room, so a
+ * callout with two (Continue setting up, Review and adopt) never draws them
+ * touching, whatever the host wraps them in.
+ */
 .crewlet-callout__action {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-2);
   grid-column: 3;
   grid-row: 1;
   align-self: center;
@@ -9025,7 +9037,7 @@ button.crewlet-histogram__bar[data-empty]:focus-visible > .crewlet-histogram__fi
 }
 
 
-/* ChoiceButtons-FLIFXFFS.css */
+/* ChoiceButtons-HWXEF2H3.css */
 /*
  * One answer, sent with one press: a column of buttons as tall as a touch
  * target, the recommended one first and filled with the accent.
@@ -9083,6 +9095,17 @@ button.crewlet-histogram__bar[data-empty]:focus-visible > .crewlet-histogram__fi
   background: var(--color-surface-pressed);
 }
 
+/*
+ * THE OPTION APPLIED is drawn as every chosen option in the package is: the
+ * selected edge over the soft selected fill, calm beside the focus ring, and
+ * held under the pointer so a hover never makes it look unchosen.
+ */
+.crewlet-choice-buttons__option.is-chosen,
+.crewlet-choice-buttons__option.is-chosen:hover {
+  border-color: var(--color-border-selected);
+  background: var(--color-surface-selected);
+}
+
 /*
  * The plain option draws the strong hairline, so its ring is drawn over that
  * edge rather than a gap away from it, which would read as a second outline.
@@ -9158,6 +9181,55 @@ button.crewlet-histogram__bar[data-empty]:focus-visible > .crewlet-histogram__fi
   text-transform: uppercase;
 }
 
+/* The picture before the words, centred on the label's line. */
+.crewlet-choice-buttons__media {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  align-self: center;
+}
+
+/* Before the words, not at the far end with the recommended mark. */
+.crewlet-choice-buttons__option:has(.crewlet-choice-buttons__media) {
+  justify-content: flex-start;
+}
+
+.crewlet-choice-buttons__option:has(.crewlet-choice-buttons__media) .crewlet-choice-buttons__note {
+  margin-inline-start: auto;
+}
+
+/*
+ * SMALL: the same option, compact, in a row that wraps. A step and a half
+ * inside, the field's small height, the label at the compact step and its
+ * detail at the micro step, so three suggestions sit under a field without
+ * outweighing it. Every state (hover, press, focus, chosen) is the Inbox's.
+ */
+.crewlet-choice-buttons--sm {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-2);
+}
+
+.crewlet-choice-buttons--sm .crewlet-choice-buttons__option {
+  gap: var(--spacing-2);
+  min-height: var(--size-control-sm);
+  padding: var(--spacing-1) calc(var(--spacing-2) + var(--spacing-1) / 2);
+  font-size: var(--font-size-xs);
+  line-height: var(--font-line-height-tight);
+}
+
+.crewlet-choice-buttons--sm .crewlet-choice-buttons__option:has(.crewlet-choice-buttons__detail) {
+  align-items: center;
+}
+
+.crewlet-choice-buttons--sm .crewlet-choice-buttons__text {
+  gap: 1px;
+}
+
+.crewlet-choice-buttons--sm .crewlet-choice-buttons__detail {
+  font-size: var(--font-size-2xs);
+}
+
 @media (prefers-reduced-motion: reduce) {
   .crewlet-choice-buttons__option {
     transition: none;
@@ -9573,6 +9645,55 @@ button.crewlet-histogram__bar[data-empty]:focus-visible > .crewlet-histogram__fi
 }
 
 
+/* ColorChip-A5XHTH3J.css */
+/*
+ * A colour as a small chip (ColorChip.tsx). Its fill is the one value that is
+ * not a token, and it arrives through `--crewlet-color-chip-value` only after
+ * it has passed `#rrggbb`.
+ */
+.crewlet-color-chip {
+  display: inline-block;
+  flex: none;
+  box-sizing: border-box;
+  width: var(--spacing-3);
+  height: var(--spacing-3);
+  background: var(--crewlet-color-chip-value, var(--color-surface-inset));
+  /* An edge of its own, so a colour that matches its ground is still a chip. */
+  box-shadow: inset 0 0 0 1px var(--color-border-hover);
+  vertical-align: middle;
+}
+
+.crewlet-color-chip--sm {
+  width: var(--spacing-4);
+  height: var(--spacing-4);
+}
+
+.crewlet-color-chip--round {
+  border-radius: var(--radius-circle);
+}
+
+.crewlet-color-chip--square {
+  border-radius: var(--radius-xs);
+}
+
+/* The hatch of no colour, as every swatch in the package draws it. */
+.crewlet-color-chip.is-empty {
+  background: repeating-linear-gradient(-45deg, var(--color-border-hatch) 0 1px, transparent 1px var(--spacing-1));
+}
+
+/*
+ * FORCED COLORS drops backgrounds, which is all a chip is, so the mode keeps
+ * this one: the colour is the information, and the edge is drawn in the
+ * system's text colour so the chip still has a boundary.
+ */
+@media (forced-colors: active) {
+  .crewlet-color-chip {
+    forced-color-adjust: none;
+    box-shadow: inset 0 0 0 1px CanvasText;
+  }
+}
+
+
 /* ColorField-2OIOWT3Z.css */
 /*
  * A colour a person chooses: the swatch that opens the platform's picker,
@@ -10551,6 +10672,52 @@ button.crewlet-histogram__bar[data-empty]:focus-visible > .crewlet-histogram__fi
 }
 
 
+/* ContrastHelp-MZCAW5WQ.css */
+/*
+ * ContrastHelp: what the contrast levels mean, in a short panel opened from an
+ * info button (ContrastHelp.tsx).
+ */
+.crewlet-contrast-help {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  padding: var(--spacing-3);
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-xs);
+  line-height: var(--font-line-height-snug);
+}
+
+.crewlet-contrast-help__title {
+  margin: 0;
+  color: var(--color-text-primary);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+}
+
+.crewlet-contrast-help__intro {
+  margin: 0;
+  color: var(--color-text-secondary);
+}
+
+/* Each level's word as the badge draws it, beside what it means. */
+.crewlet-contrast-help__levels {
+  display: grid;
+  grid-template-columns: max-content minmax(0, 1fr);
+  align-items: baseline;
+  gap: var(--spacing-2) var(--spacing-3);
+  margin: 0;
+}
+
+.crewlet-contrast-help__levels dt,
+.crewlet-contrast-help__levels dd {
+  margin: 0;
+}
+
+.crewlet-contrast-help__levels dd {
+  color: var(--color-text-secondary);
+}
+
+
 /* Copyable-5PNRFOLS.css */
 /*
  * Copyable: a value and the one control that copies it.
@@ -15678,7 +15845,7 @@ svg.crewlet-datetime__chevron {
 }
 
 
-/* EditingStatus-NNA2CKIL.css */
+/* EditingStatus-YU7EGM6Y.css */
 /*
  * The editing status (EditingStatus.tsx): a word and a dot, in the bar's own
  * small step, quiet until something is unsaved.
@@ -15707,20 +15874,32 @@ svg.crewlet-datetime__chevron {
   background: var(--color-brand-accent);
 }
 
+/*
+ * THE WORDS RUN AS TEXT, not as flex items, so the space between the label
+ * and the state (which the ear needs) and the space before the time are real
+ * spaces, and the row is cut with an ellipsis rather than squeezed.
+ */
+.crewlet-editing-status__text {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .crewlet-editing-status__label {
   color: var(--color-text-primary);
   font-weight: var(--font-weight-medium);
 }
 
-.crewlet-editing-status__state {
-  overflow: hidden;
+.crewlet-editing-status__state,
+.crewlet-editing-status__ago {
   color: var(--color-text-tertiary);
-  text-overflow: ellipsis;
 }
 
+/* The dot between the label and the state: drawn, never read. The space
+   before it in the text gives it the step on its left. */
 .crewlet-editing-status__state::before {
   content: '\00b7';
-  margin-right: var(--spacing-2);
+  margin-inline: var(--spacing-1) var(--spacing-2);
 }
 
 /*
@@ -15734,7 +15913,8 @@ svg.crewlet-datetime__chevron {
  * "Editing" folds too, and Cancel and Save beside the dot say an edit is open.
  */
 @media (width < 480px) {
-  .crewlet-editing-status__state {
+  .crewlet-editing-status__state,
+  .crewlet-editing-status__ago {
     position: absolute;
     width: 1px;
     height: 1px;
@@ -15745,7 +15925,8 @@ svg.crewlet-datetime__chevron {
 }
 
 @container crewlet-artifact-bar (width < 900px) {
-  .crewlet-editing-status__state {
+  .crewlet-editing-status__state,
+  .crewlet-editing-status__ago {
     position: absolute;
     width: 1px;
     height: 1px;
@@ -15757,7 +15938,8 @@ svg.crewlet-datetime__chevron {
 
 @container crewlet-artifact-bar (width < 640px) {
   .crewlet-editing-status__label,
-  .crewlet-editing-status__state {
+  .crewlet-editing-status__state,
+  .crewlet-editing-status__ago {
     position: absolute;
     width: 1px;
     height: 1px;
@@ -16405,7 +16587,7 @@ button.crewlet-finding-list__row:focus-visible {
 }
 
 
-/* FolderTile-FDT5Y63Z.css */
+/* FolderTile-MIUEB7SO.css */
 /*
  * A folder in a gallery: a short tile on Card (no preview), the folder glyph
  * on a neutral tint over the name and one quiet line, and a More menu in the
@@ -16435,8 +16617,17 @@ button.crewlet-finding-list__row:focus-visible {
   --crewlet-folder-tile-floor: auto;
   --crewlet-folder-tile-glyph: 40px;
   --crewlet-folder-tile-glyph-radius: var(--radius-md);
+  /*
+   * THE WORDS ARE SET AS THE CARDS BESIDE THEM: a tile's name at a gallery
+   * card's title step and weight, its facts at the card's facts step, one
+   * line height for both and the card's step between them. The row (and a
+   * tile on a phone, which is the row) keeps the same two steps, since the
+   * cards it stands above keep theirs there too, with a tighter step between
+   * the lines so it stays one compact row.
+   */
   --crewlet-folder-tile-name: var(--font-size-md);
   --crewlet-folder-tile-facts: var(--font-size-sm);
+  --crewlet-folder-tile-words-gap: var(--spacing-1);
   --crewlet-folder-tile-actions-inset: var(--spacing-3);
   /*
    * A TILE STACKS: the glyph on top with the More menu level with it in the
@@ -16469,8 +16660,7 @@ button.crewlet-finding-list__row:focus-visible {
   --crewlet-folder-tile-floor: var(--size-control-lg);
   --crewlet-folder-tile-glyph: 28px;
   --crewlet-folder-tile-glyph-radius: var(--radius-sm);
-  --crewlet-folder-tile-name: var(--font-size-sm);
-  --crewlet-folder-tile-facts: var(--font-size-xs);
+  --crewlet-folder-tile-words-gap: 2px;
   --crewlet-folder-tile-actions-inset: var(--spacing-2);
   --crewlet-folder-tile-direction: row;
   --crewlet-folder-tile-align: center;
@@ -16490,8 +16680,7 @@ button.crewlet-finding-list__row:focus-visible {
     --crewlet-folder-tile-floor: var(--size-control-lg);
     --crewlet-folder-tile-glyph: 28px;
     --crewlet-folder-tile-glyph-radius: var(--radius-sm);
-    --crewlet-folder-tile-name: var(--font-size-sm);
-    --crewlet-folder-tile-facts: var(--font-size-xs);
+    --crewlet-folder-tile-words-gap: 2px;
     --crewlet-folder-tile-actions-inset: var(--spacing-2);
     --crewlet-folder-tile-direction: row;
     --crewlet-folder-tile-align: center;
@@ -16559,7 +16748,7 @@ button.crewlet-finding-list__row:focus-visible {
 .crewlet-folder-tile__body {
   display: flex;
   flex-direction: column;
-  gap: 2px;
+  gap: var(--crewlet-folder-tile-words-gap);
   min-width: 0;
   max-width: 100%;
 }
@@ -17590,7 +17779,7 @@ a.crewlet-icon-btn {
 }
 
 
-/* Input-VDSV7VWJ.css */
+/* Input-GMOWHZRG.css */
 /*
  * The form row: Input, Textarea, Label, FormField, FormRow, FormSection and
  * ReadOnlyField.
@@ -18173,6 +18362,15 @@ a.crewlet-icon-btn {
   min-width: 0;
 }
 
+/* A count that is not a length ("3 of 5"), in the help line's own quiet ink. */
+.crewlet-form-field__tally {
+  flex: none;
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-xs);
+  font-variant-numeric: tabular-nums;
+  line-height: var(--font-line-height-normal);
+}
+
 /* SHOWN ONLY WHILE THE FIELD HAS FOCUS (`helperOnFocus`): a dense form reads as
    labels and values at rest, and the sentence appears under the field the
    reader is in. Still described, so a screen reader hears it on entry. */
@@ -19230,7 +19428,7 @@ a.crewlet-icon-btn {
 }
 
 
-/* ListInput-WUP2YITQ.css */
+/* ListInput-RLQND5QK.css */
 /*
  * ListInput: an ordered list of sentences, written in the box at the top and
  * listed under it.
@@ -19294,7 +19492,9 @@ a.crewlet-icon-btn {
 .crewlet-list-input__item {
   display: flex;
   align-items: center;
-  gap: var(--spacing-2);
+  /* A step and the control's own inset: the ring an edited item draws stands
+     a step clear of its number. */
+  gap: var(--spacing-3);
   padding: var(--spacing-1) var(--spacing-3);
   border-block-end-width: 1px;
   border-block-end-style: solid;
@@ -19402,11 +19602,28 @@ a.crewlet-icon-btn {
 .crewlet-list-input__item .crewlet-input__control,
 .crewlet-list-input__item .crewlet-textarea {
   padding-block: var(--spacing-1);
-  padding-inline: 0;
+  /*
+   * EDITING NEVER MOVES THE WORDS. The control keeps an inset of its own, so
+   * the boundary that hover and focus draw stands clear of the text rather
+   * than touching its first letter, and a negative margin of the same step
+   * takes it back, so the words sit exactly where they sat at rest and the
+   * caret lands on them without a jump.
+   */
+  padding-inline: var(--spacing-2);
+  margin-inline: calc(var(--spacing-2) * -1);
 }
 
 .crewlet-list-input__index {
   flex: none;
+  /*
+   * ON THE TEXT'S FIRST LINE, never centred on a wrapped item: it starts where
+   * the words start (the control's edge and its block inset below the row's
+   * own padding) and takes their line's height, so the number and the words
+   * share a baseline however many lines the item runs to.
+   */
+  align-self: flex-start;
+  padding-block-start: calc(1px + var(--spacing-1));
+  line-height: calc(var(--font-size-compact) * var(--font-line-height-normal));
   min-width: var(--spacing-4);
   text-align: center;
   font-size: var(--font-size-xs);
@@ -19490,11 +19707,16 @@ a.crewlet-icon-btn {
   }
 }
 
-/* With a hidden legend the add control stands at the end of the box's row. */
+/*
+ * The Add button ends the box's row: the field and its Add read as one
+ * control. It is the field's height (the medium control step a one-line box
+ * stands at) and sits on the box's first line, so the two share one line and
+ * the button stays put as a long item grows the box under it.
+ */
 .crewlet-list-input__add-control {
   display: inline-flex;
   flex: none;
-  align-self: center;
+  align-self: flex-start;
 }
 
 /*
@@ -19512,11 +19734,11 @@ a.crewlet-icon-btn {
   }
 
   .crewlet-list-input__item > .crewlet-list-input__field {
-    flex-basis: calc(100% - var(--spacing-4) - var(--spacing-2));
+    flex-basis: calc(100% - var(--spacing-4) - var(--spacing-3));
   }
 
   .crewlet-list-input__item--draggable > .crewlet-list-input__field {
-    flex-basis: calc(100% - var(--spacing-4) * 2 - var(--spacing-2) * 2);
+    flex-basis: calc(100% - var(--spacing-4) * 2 - var(--spacing-3) * 2);
   }
 
   .crewlet-list-input__item > .crewlet-list-input__actions {
@@ -19892,7 +20114,7 @@ a.crewlet-icon-btn {
 }
 
 
-/* LogoSlot-T2UFOJXU.css */
+/* LogoSlot-ETD74ELF.css */
 /*
  * One of a brand's logos on the ground it is made for. The ground and the ink
  * of its guide are the only values here that are not tokens: they arrive
@@ -20019,6 +20241,13 @@ a.crewlet-icon-btn {
   opacity: 0.5;
 }
 
+.crewlet-logo-slot__notes {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+  min-width: 0;
+}
+
 .crewlet-logo-slot__empty {
   margin: 0;
   color: var(--color-text-tertiary);
@@ -20053,6 +20282,97 @@ a.crewlet-icon-btn {
   font-size: var(--font-size-xs);
 }
 
+/*
+ * A GROUP OF SLOTS, aligned row by row (LogoSlotGroup.tsx). Each slot is a
+ * subgrid spanning the group's four rows: its name and description, its
+ * stage, what is said under it, and its actions. A row holds the tallest of
+ * its parts across the slots, so every stage, note and action row starts on
+ * one line. The steps between the parts are margins rather than the grid's
+ * gap, so a row no slot uses (no notes anywhere) takes no room at all.
+ */
+.crewlet-logo-slot-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3);
+  min-width: 0;
+}
+
+.crewlet-logo-slot-group__slots {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(min(14rem, 100%), 1fr));
+  column-gap: var(--spacing-5);
+  row-gap: var(--spacing-6);
+}
+
+.crewlet-logo-slot-group__slots > .crewlet-logo-slot {
+  display: grid;
+  grid-row: span 4;
+  grid-template-rows: subgrid;
+  row-gap: 0;
+  align-content: start;
+}
+
+.crewlet-logo-slot-group__slots > .crewlet-logo-slot > .crewlet-logo-slot__head {
+  grid-row: 1;
+  margin-block-end: var(--spacing-2);
+}
+
+.crewlet-logo-slot-group__slots > .crewlet-logo-slot > :is(.crewlet-logo-slot__stage, .crewlet-file-drop) {
+  grid-row: 2;
+}
+
+.crewlet-logo-slot-group__slots > .crewlet-logo-slot > .crewlet-logo-slot__notes {
+  grid-row: 3;
+  margin-block-start: var(--spacing-2);
+}
+
+.crewlet-logo-slot-group__slots > .crewlet-logo-slot > .crewlet-logo-slot__foot {
+  grid-row: 4;
+  margin-block-start: var(--spacing-2);
+}
+
+.crewlet-logo-slot-group__hint {
+  margin: 0;
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-xs);
+  line-height: var(--font-line-height-normal);
+}
+
+/*
+ * SMALL: a thumbnail of the slot for a summary of what is set. The stage
+ * keeps its ground, its edge and the space the logo keeps, at half the height
+ * with a tighter inset, and the words step down to the summary's sizes.
+ */
+.crewlet-logo-slot--sm {
+  --crewlet-logo-slot-height: calc(var(--size-row-lg) * 1.5);
+  --crewlet-logo-slot-padding: var(--spacing-2);
+  --crewlet-logo-slot-clear: var(--spacing-1);
+
+  gap: var(--spacing-1);
+}
+
+.crewlet-logo-slot--sm .crewlet-logo-slot__label {
+  font-size: var(--font-size-xs);
+}
+
+.crewlet-logo-slot--sm .crewlet-logo-slot__description,
+.crewlet-logo-slot--sm .crewlet-logo-slot__empty {
+  font-size: var(--font-size-2xs);
+}
+
+.crewlet-logo-slot--sm .crewlet-logo-slot__stage {
+  border-radius: var(--radius-md);
+}
+
+.crewlet-logo-slot--sm .crewlet-logo-slot__placeholder {
+  width: calc(var(--size-row-lg) * 1.5);
+  height: var(--size-row-sm);
+}
+
+.crewlet-logo-slot--sm .crewlet-logo-slot__stage--square .crewlet-logo-slot__placeholder {
+  width: var(--size-row-sm);
+}
+
 
 /* MarkdownEditor-WOKV7CLK.css */
 /*
@@ -26349,7 +26669,7 @@ svg.crewlet-select__chevron {
 }
 
 
-/* SetupWizard-Y5BTXZX5.css */
+/* SetupWizard-GZK5UDKC.css */
 /*
  * SetupWizard: a setup walked step by step on a page of its own
  * (SetupWizard.tsx).
@@ -26472,7 +26792,6 @@ svg.crewlet-select__chevron {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  justify-content: flex-end;
   gap: var(--spacing-2);
   grid-area: foot;
   padding: var(--spacing-3) 0 calc(var(--spacing-3) + env(safe-area-inset-bottom, var(--spacing-0)));
@@ -26480,6 +26799,24 @@ svg.crewlet-select__chevron {
   background: var(--color-surface-background);
 }
 
+/* The way out at the start of the row, the step's actions at its end. */
+.crewlet-setup-wizard__footer-start,
+.crewlet-setup-wizard__footer-end {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-2);
+}
+
+.crewlet-setup-wizard__footer-end {
+  margin-inline-start: auto;
+}
+
+/* A WIDE STEP lays out columns of its own across the whole width beside the rail. */
+.crewlet-setup-wizard--wide .crewlet-setup-wizard__content {
+  max-width: none;
+}
+
 /* BESIDE THE CONTENT, from 70rem of the wizard's own width: the aside holds in view. */
 @container (min-width: 70rem) {
   .crewlet-setup-wizard__frame {
@@ -26491,6 +26828,15 @@ svg.crewlet-select__chevron {
     grid-template-rows: auto 1fr auto;
   }
 
+  /* With no aside, nothing is held for one: the content takes its column too. */
+  .crewlet-setup-wizard--no-aside .crewlet-setup-wizard__frame {
+    grid-template-columns: 240px minmax(0, 1fr);
+    grid-template-areas:
+      'head head'
+      'rail content'
+      'foot foot';
+  }
+
   .crewlet-setup-wizard__aside {
     position: sticky;
     top: var(--spacing-5);

package/dist/utils/hexColour.d.ts

@@ -10,3 +10,16 @@
  * engine stores, so a value read back compares equal to the value written.
  */
 export declare function normalizeHex(value: string | null | undefined): string | null;
+/**
+ * A colour as a person types or pastes it, read into the one stored spelling
+ * (`#` and six lowercase hex digits), or null for anything else.
+ *
+ * Taken: `#rrggbb` and `rrggbb`, the three digit shorthand with or without
+ * its `#` (each digit doubled), and `rgb(r, g, b)` or `rgb(r g b)` with each
+ * channel a whole number from 0 to 255. Refused: the eight and four digit
+ * forms (a stored brand colour has no alpha), percentages, names and every
+ * other notation, so what is stored is never a value a stylesheet would read
+ * as something else. The result passes `normalizeHex`, the gate every brand
+ * part reads a colour through.
+ */
+export declare function parseColourInput(value: string | null | undefined): string | null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crewlethq/ui",
-  "version": "0.50.0",
+  "version": "0.52.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.50.0",
-    "@crewlethq/tokens": "0.50.0",
+    "@crewlethq/icons": "0.52.0",
+    "@crewlethq/tokens": "0.52.0",
     "prosemirror-commands": "1.7.2",
     "prosemirror-gapcursor": "1.4.1",
     "prosemirror-history": "1.5.1",