@crewlethq/ui 0.33.0 → 0.34.1

package/dist/styles.css

@@ -2414,11 +2414,12 @@ button.crewlet-account-row__who:focus-visible {
 }
 
 
-/* ArtifactCard-AS5Z4CVI.css */
+/* ArtifactCard-XHRLAL7C.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, then the title and up to three lines of
- * facts. `compact` is a row with the kind's glyph in place of the preview.
+ * lines up whatever each preview is, the kind's badge over its foot, then the
+ * title and one quiet line. `compact` is a row with the kind's glyph in place
+ * of the preview, drawn on Card.
  */
 
 /*
@@ -2444,17 +2445,6 @@ button.crewlet-account-row__who:focus-visible {
   padding: var(--spacing-3);
 }
 
-.crewlet-artifact-card__preview {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  aspect-ratio: 16 / 9;
-  overflow: hidden;
-  border-bottom: 1px solid var(--color-border-default);
-  background: var(--color-surface-inset);
-  color: var(--color-text-tertiary);
-}
-
 .crewlet-artifact-card__glyph {
   display: inline-flex;
   color: var(--color-text-tertiary);
@@ -2540,6 +2530,181 @@ button.crewlet-account-row__who:focus-visible {
   font-weight: var(--font-weight-medium);
 }
 
+/* ---- the gallery card ---- */
+
+/*
+ * A SOFT PANE WITH A GENEROUS CORNER. The card is the card rung with its
+ * hairline, rounded a step past a plain card's because the preview inside it
+ * is a picture, and a picture in a tight corner reads as a screenshot pasted
+ * into a box. Hover lifts the edge and the shadow, never the colour.
+ */
+.crewlet-artifact-card--card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-xl);
+  background: var(--color-surface-subtle);
+  transition:
+    border-color var(--motion-duration-base) var(--motion-easing-out),
+    box-shadow var(--motion-duration-base) var(--motion-easing-out),
+    transform var(--motion-duration-base) var(--motion-easing-out);
+}
+
+.crewlet-artifact-card--card:hover {
+  border-color: var(--color-border-hover);
+  box-shadow: var(--shadow-card);
+  transform: translateY(-1px);
+}
+
+.crewlet-artifact-card--card:has(.crewlet-artifact-card__link:focus-visible) {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+.crewlet-artifact-card__link {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  border-radius: inherit;
+  color: inherit;
+  text-decoration: none;
+  outline: none;
+}
+
+.crewlet-artifact-card__preview {
+  position: relative;
+  display: flex;
+  aspect-ratio: 16 / 9;
+  overflow: hidden;
+  border-bottom: 1px solid var(--color-border-default);
+  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
+  background: var(--color-surface-inset);
+}
+
+.crewlet-artifact-card__preview > * {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.crewlet-artifact-card--trashed .crewlet-artifact-card__preview > * {
+  opacity: 0.5;
+  filter: grayscale(1);
+}
+
+.crewlet-artifact-card--card .crewlet-artifact-card__body {
+  gap: var(--spacing-1);
+  padding: 0 var(--spacing-5) var(--spacing-5);
+}
+
+/*
+ * THE KIND'S BADGE STANDS ON THE PREVIEW'S FOOT, half over the picture and
+ * half over the card, the glyph in the kind's ink: what the artifact is, read
+ * before its title, in the one place every card has it.
+ */
+.crewlet-artifact-card__badge {
+  position: relative;
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  align-self: flex-start;
+  width: 40px;
+  height: 40px;
+  margin-top: -22px;
+  margin-bottom: var(--spacing-2);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-lg);
+  background: var(--color-surface-background);
+  box-shadow: var(--shadow-sm);
+  color: var(--crewlet-kind-ink, var(--color-text-secondary));
+}
+
+.crewlet-artifact-card--card .crewlet-artifact-card__title {
+  font-size: var(--font-size-lg);
+  font-weight: var(--font-weight-medium);
+  line-height: 1.35;
+}
+
+.crewlet-artifact-card--card .crewlet-artifact-card__facts {
+  font-size: var(--font-size-sm);
+}
+
+.crewlet-artifact-card__meta {
+  flex-wrap: nowrap;
+  white-space: nowrap;
+}
+
+.crewlet-artifact-card__access {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+}
+
+.crewlet-artifact-card__meta > .crewlet-artifact-card__owner {
+  flex: 0 1 auto;
+  overflow: hidden;
+}
+
+.crewlet-artifact-card__owner-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.crewlet-artifact-card__meta > :last-child {
+  flex: none;
+}
+
+/*
+ * THE CARD'S OWN CONTROLS, over the preview's top corner and outside the
+ * link: hidden until the card is hovered or holds focus, so a gallery rests
+ * as pictures, and always there on a screen with no hover.
+ */
+.crewlet-artifact-card__actions {
+  position: absolute;
+  top: var(--spacing-3);
+  right: var(--spacing-3);
+  display: inline-flex;
+  gap: var(--spacing-1);
+  border-radius: var(--radius-md);
+  background: var(--color-surface-background);
+  box-shadow: var(--shadow-sm);
+  opacity: 0;
+  transition: opacity var(--motion-duration-fast) var(--motion-easing-out);
+}
+
+.crewlet-artifact-card--card:hover .crewlet-artifact-card__actions,
+.crewlet-artifact-card--card:focus-within .crewlet-artifact-card__actions,
+.crewlet-artifact-card__actions:has([aria-expanded='true']) {
+  opacity: 1;
+}
+
+@media (hover: none) {
+  .crewlet-artifact-card__actions {
+    opacity: 1;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-artifact-card--card,
+  .crewlet-artifact-card__actions {
+    transition: none;
+  }
+
+  .crewlet-artifact-card--card:hover {
+    transform: none;
+  }
+}
+
+.crewlet-artifact-card--skeleton {
+  pointer-events: none;
+}
+
+.crewlet-artifact-card--skeleton .crewlet-artifact-card__badge {
+  box-shadow: none;
+}
+
 
 /* ArtifactCover-D4MBEJ5H.css */
 /* The frame every native cover shares (DocCover, SheetCover, DashboardCover):
@@ -2611,6 +2776,220 @@ button.crewlet-account-row__who:focus-visible {
 }
 
 
+/* ArtifactKindIllustration-4NG6IE3C.css */
+/*
+ * A kind's drawing, its tinted ground and the Make something new tile.
+ *
+ * Every colour is the kind's token, `--color-artifact-kind-<kind>` and its
+ * Fill and Line steps, set once per kind on `--crewlet-kind-*` and read by
+ * every rule below, so the drawing, the ground and the tile repaint together
+ * with the theme.
+ */
+
+.crewlet-kind--doc { --crewlet-kind-hue: var(--color-artifact-kind-doc); --crewlet-kind-fill: var(--color-artifact-kind-doc-fill); --crewlet-kind-line: var(--color-artifact-kind-doc-line); --crewlet-kind-ink: var(--color-artifact-kind-doc-ink); }
+.crewlet-kind--slides { --crewlet-kind-hue: var(--color-artifact-kind-slides); --crewlet-kind-fill: var(--color-artifact-kind-slides-fill); --crewlet-kind-line: var(--color-artifact-kind-slides-line); --crewlet-kind-ink: var(--color-artifact-kind-slides-ink); }
+.crewlet-kind--design { --crewlet-kind-hue: var(--color-artifact-kind-design); --crewlet-kind-fill: var(--color-artifact-kind-design-fill); --crewlet-kind-line: var(--color-artifact-kind-design-line); --crewlet-kind-ink: var(--color-artifact-kind-design-ink); }
+.crewlet-kind--dashboard { --crewlet-kind-hue: var(--color-artifact-kind-dashboard); --crewlet-kind-fill: var(--color-artifact-kind-dashboard-fill); --crewlet-kind-line: var(--color-artifact-kind-dashboard-line); --crewlet-kind-ink: var(--color-artifact-kind-dashboard-ink); }
+.crewlet-kind--html { --crewlet-kind-hue: var(--color-artifact-kind-html); --crewlet-kind-fill: var(--color-artifact-kind-html-fill); --crewlet-kind-line: var(--color-artifact-kind-html-line); --crewlet-kind-ink: var(--color-artifact-kind-html-ink); }
+.crewlet-kind--sheet { --crewlet-kind-hue: var(--color-artifact-kind-sheet); --crewlet-kind-fill: var(--color-artifact-kind-sheet-fill); --crewlet-kind-line: var(--color-artifact-kind-sheet-line); --crewlet-kind-ink: var(--color-artifact-kind-sheet-ink); }
+
+/* ---- the drawing ---- */
+
+.crewlet-kind-illustration {
+  display: block;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+}
+
+/* THE FOUR WEIGHTS, each the kind's hue at a fixed opacity: the body is a
+   translucent pane with a hairline edge, lines are content, a soft block is
+   a picture or a bar, and the mark is the one solid thing the eye lands on. */
+.crewlet-kind-illustration .b {
+  fill: var(--crewlet-kind-hue);
+  fill-opacity: 0.14;
+  stroke: var(--crewlet-kind-hue);
+  stroke-opacity: 0.5;
+  stroke-width: 1.5;
+}
+
+.crewlet-kind-illustration .l {
+  fill: var(--crewlet-kind-hue);
+  fill-opacity: 0.45;
+}
+
+.crewlet-kind-illustration .s {
+  fill: var(--crewlet-kind-hue);
+  fill-opacity: 0.62;
+}
+
+.crewlet-kind-illustration .m {
+  fill: var(--crewlet-kind-hue);
+}
+
+/* A rule across the body (a window's bar, a grid's lines). */
+.crewlet-kind-illustration .r {
+  fill: none;
+  stroke: var(--crewlet-kind-hue);
+  stroke-opacity: 0.3;
+  stroke-width: 1.5;
+}
+
+/* A stroke drawn as a glyph: the angle brackets of a page of code. */
+.crewlet-kind-illustration .k {
+  fill: none;
+  stroke: var(--crewlet-kind-hue);
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 5;
+}
+
+.crewlet-kind-illustration .k--soft {
+  stroke-opacity: 0.55;
+}
+
+/* Cut out of a solid mark in the ground's colour: a checkbox's tick. */
+.crewlet-kind-illustration .c {
+  fill: none;
+  stroke: var(--color-surface-background);
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 1.4;
+}
+
+.crewlet-kind-illustration .c--fill {
+  fill: var(--crewlet-kind-hue);
+  fill-opacity: 0.4;
+  stroke: none;
+}
+
+/* ---- the ground ---- */
+
+/*
+ * THE KIND'S FILL OVER THE CARD, brightest at the top and settling into the
+ * card at the foot, the way light falls on a tinted pane: a flat fill read as
+ * a coloured box, and a hue strong enough to read on its own fought the
+ * previews beside it.
+ */
+.crewlet-kind-ground {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  padding: 8% 10%;
+  background:
+    linear-gradient(180deg, var(--crewlet-kind-fill) 0%, transparent 115%),
+    var(--color-surface-subtle);
+}
+
+.crewlet-kind-ground > .crewlet-kind-illustration {
+  max-width: 12rem;
+  max-height: 100%;
+}
+
+/* ---- the tile ---- */
+
+.crewlet-kind-tile {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  min-width: 0;
+  color: var(--color-text-primary);
+  text-decoration: none;
+  outline: none;
+}
+
+/*
+ * A FRAME AROUND A PANE: the tile is a hairline ring with the tinted ground
+ * set inside it a few pixels in, one radius step tighter, so the pane reads
+ * as sitting in a holder rather than as a coloured rectangle.
+ */
+.crewlet-kind-tile__frame {
+  display: block;
+  box-sizing: border-box;
+  aspect-ratio: 4 / 3;
+  padding: 5px;
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-2xl);
+  background: var(--color-surface-subtle);
+  transition:
+    border-color var(--motion-duration-base) var(--motion-easing-out),
+    box-shadow var(--motion-duration-base) var(--motion-easing-out);
+}
+
+.crewlet-kind-tile__ground {
+  border-radius: var(--radius-xl);
+  box-shadow: inset 0 0 0 1px var(--crewlet-kind-line);
+  overflow: hidden;
+}
+
+.crewlet-kind-tile__ground > .crewlet-kind-illustration {
+  transition: transform var(--motion-duration-base) var(--motion-easing-out);
+}
+
+.crewlet-kind-tile__label {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  min-width: 0;
+  padding-inline: var(--spacing-1);
+}
+
+.crewlet-kind-tile__name {
+  overflow: hidden;
+  font-size: var(--font-size-md);
+  font-weight: var(--font-weight-medium);
+  line-height: 1.3;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.crewlet-kind-tile__badge {
+  flex: none;
+  padding: 1px var(--spacing-2);
+  border-radius: var(--radius-sm);
+  background: var(--crewlet-kind-fill);
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+}
+
+a.crewlet-kind-tile:hover .crewlet-kind-tile__frame {
+  border-color: var(--color-border-hover);
+}
+
+a.crewlet-kind-tile:hover .crewlet-kind-tile__ground > .crewlet-kind-illustration {
+  transform: translateY(-2px) scale(1.03);
+}
+
+.crewlet-kind-tile:focus-visible .crewlet-kind-tile__frame {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+.crewlet-kind-tile--disabled {
+  cursor: not-allowed;
+}
+
+.crewlet-kind-tile--disabled .crewlet-kind-tile__ground,
+.crewlet-kind-tile--disabled .crewlet-kind-tile__name {
+  opacity: 0.55;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-kind-tile__frame,
+  .crewlet-kind-tile__ground > .crewlet-kind-illustration {
+    transition: none;
+  }
+
+  a.crewlet-kind-tile:hover .crewlet-kind-tile__ground > .crewlet-kind-illustration {
+    transform: none;
+  }
+}
+
+
 /* ArtifactPanel-HW3SU7CP.css */
 /*
  * The workspace is a row: the artifact's body, then at most one panel. The
@@ -15482,6 +15861,74 @@ svg.crewlet-datetime__chevron {
 }
 
 
+/* LivePreview-SRO7KHO4.css */
+/*
+ * A live preview: the stand-in and the live layer stacked in one box. The box
+ * takes its size from its parent (a card's preview area), so it fills it and
+ * clips whatever the content lays out past its edge.
+ */
+
+.crewlet-live-preview {
+  position: relative;
+  display: block;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  contain: layout paint;
+}
+
+.crewlet-live-preview__fallback {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  transition: opacity var(--motion-duration-base) var(--motion-easing-out);
+}
+
+.crewlet-live-preview__live {
+  position: absolute;
+  inset: 0;
+  display: block;
+  overflow: hidden;
+  opacity: 0;
+  pointer-events: none;
+  user-select: none;
+  transition: opacity var(--motion-duration-base) var(--motion-easing-out);
+}
+
+/* LAID OUT AT ITS OWN SIZE from the top left corner, and scaled from there:
+   to the box's width, its top left the box's, or whole and centred. */
+.crewlet-preview-scale {
+  position: absolute;
+  inset: 0;
+  display: block;
+  overflow: hidden;
+}
+
+.crewlet-preview-scale__layer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: block;
+  overflow: hidden;
+  transform-origin: 0 0;
+}
+
+.crewlet-live-preview[data-state='ready'] > .crewlet-live-preview__live {
+  opacity: 1;
+}
+
+.crewlet-live-preview[data-state='ready'] > .crewlet-live-preview__fallback {
+  opacity: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-live-preview__fallback,
+  .crewlet-live-preview__live {
+    transition: none;
+  }
+}
+
+
 /* MarkdownEditor-WOKV7CLK.css */
 /*
  * Writing markdown (MarkdownEditor.tsx): the bar, the source or its preview,
@@ -20656,7 +21103,7 @@ button.crewlet-presence-stack__member:focus-visible {
 }
 
 
-/* Select-2P7AWUE4.css */
+/* Select-A54YS5EP.css */
 /*
  * Select: one chrome over two controls, and the product's only dropdown.
  *
@@ -20756,6 +21203,35 @@ button.crewlet-presence-stack__member:focus-visible {
   border-color: var(--color-feedback-danger);
 }
 
+/*
+ * QUIET: no boundary and no fill at rest, the hover overlay under the
+ * pointer, and the ring on focus as every field draws it. It sizes to its
+ * answer with no floor, since a quiet picker in a toolbar reads as its words.
+ * A quiet filter that is on takes the accent's soft fill under its accent ink,
+ * so "this narrows the list" still shows without a box around it.
+ */
+.crewlet-select--quiet {
+  --crewlet-select-auto-min-width: 0px;
+
+  border-color: transparent;
+  background-color: transparent;
+}
+
+.crewlet-select--quiet:hover {
+  border-color: transparent;
+  background-color: var(--color-surface-hover);
+}
+
+.crewlet-select--quiet.is-open {
+  background-color: var(--color-surface-hover);
+}
+
+.crewlet-select--quiet.is-active,
+.crewlet-select--quiet.is-active:hover {
+  border-color: transparent;
+  background-color: var(--color-brand-accent-soft);
+}
+
 /* A refused picker keeps its colour while the reader is in it: the ring
    covers the boundary, so a focus-coloured one would paint out the refusal.
    See Input.css. */
@@ -21254,7 +21730,7 @@ svg.crewlet-select__chevron {
 }
 
 
-/* SheetGrid-AKPUCK67.css */
+/* SheetGrid-GDPCCZ4V.css */
 /*
  * The editable sheet (SheetGrid.tsx) and its cells (cells.tsx).
  *
@@ -21451,25 +21927,56 @@ svg.crewlet-select__chevron {
   box-shadow: 0 0 0 2px var(--crewlet-presence-hue);
 }
 
+/* THE GUTTER: one centred stack, so the number and the row's actions button
+   take exactly the same place and swapping one for the other moves nothing.
+   Its width is the component's fixed track (SHEET_ROW_NUMBER_WIDTH), which
+   holds five tabular digits, so row 9 and row 10000 stand in one column. */
 .crewlet-sheet-grid__rownum {
+  display: grid;
+  grid-template-areas: 'gutter';
+  place-items: center;
   color: var(--color-text-tertiary);
   font-size: var(--font-size-xs);
   font-variant-numeric: tabular-nums;
 }
 
-/* The row actions sit at the number's trailing edge, over the cell's own
-   background, so the number stays readable beside them. */
+.crewlet-sheet-grid__rownum-number,
+.crewlet-sheet-grid__row-actions {
+  grid-area: gutter;
+}
+
+/* THE ACTIONS BUTTON IS ALWAYS THERE, drawn clear until it is wanted, so a
+   tap on the number opens the row's menu on a screen with no pointer to
+   hover with. It shows, and the number gives way to it, under the pointer,
+   on the row holding focus (the active cell, or the button itself) and while
+   its menu is open. A row the reader has not entered keeps its number. */
 .crewlet-sheet-grid__row-actions {
-  position: absolute;
-  top: 50%;
-  inset-inline-end: 0;
   display: inline-flex;
-  transform: translateY(-50%);
+  opacity: 0;
+}
+
+.crewlet-sheet-grid__row:is(:hover, :focus-within) > .crewlet-sheet-grid__rownum > .crewlet-sheet-grid__row-actions,
+.crewlet-sheet-grid__rownum--open > .crewlet-sheet-grid__row-actions {
+  opacity: 1;
 }
 
-/* The active row's actions and the active cell's history are the reader's
-   tools while they are in the grid, not marks on a sheet nobody has entered. */
-.crewlet-sheet-grid__grid:not(:focus-within) .crewlet-sheet-grid__row-actions--active-row,
+.crewlet-sheet-grid__row:is(:hover, :focus-within) > .crewlet-sheet-grid__rownum--actions > .crewlet-sheet-grid__rownum-number,
+.crewlet-sheet-grid__rownum--open > .crewlet-sheet-grid__rownum-number {
+  visibility: hidden;
+}
+
+/* THE SELECTED ROWS' NUMBERS are marked as their cells are, and on the same
+   condition (the reader is in the grid, or the selection spans more than one
+   cell), the way a spreadsheet lights the row headers of a selection. The
+   tint is laid over the gutter's own ground, which a sticky gutter needs: a
+   translucent tint alone lets the values scrolling under it show through. */
+.crewlet-sheet-grid__grid:is(:focus-within, .crewlet-sheet-grid__grid--range) .crewlet-sheet-grid__rownum--selected {
+  background: linear-gradient(var(--color-brand-accent-soft), var(--color-brand-accent-soft)) var(--color-surface-background);
+  color: var(--color-brand-accent-ink);
+}
+
+/* The active cell's history is the reader's tool while they are in the grid,
+   not a mark on a sheet nobody has entered. */
 .crewlet-sheet-grid__grid:not(:focus-within) .crewlet-sheet-grid__cell--history:not(:hover) > .crewlet-sheet-grid__history {
   visibility: hidden;
 }
@@ -21512,9 +22019,11 @@ svg.crewlet-select__chevron {
 /* THE SELECTION IS TINTED WHILE THE READER IS IN THE GRID, or while it
    spans more than one cell. A grid nobody has entered still holds its first
    cell as the active one (the keys start there), and tinting it drew a stray
-   highlight on every sheet as it opened. */
+   highlight on every sheet as it opened. The tint is laid over the cell's
+   own ground: alone, a translucent tint on a frozen cell let the values
+   scrolling under it show through. */
 .crewlet-sheet-grid__grid:is(:focus-within, .crewlet-sheet-grid__grid--range) .crewlet-sheet-grid__cell--selected {
-  background: var(--color-brand-accent-soft);
+  background: linear-gradient(var(--color-brand-accent-soft), var(--color-brand-accent-soft)) var(--color-surface-background);
 }
 
 /* THE FROZEN EDGE once the grid is scrolled sideways: the columns that stay
@@ -22015,6 +22524,14 @@ svg.crewlet-select__chevron {
     color: HighlightText;
   }
 
+  /* A selected row's number takes the selection's ink on the page's ground:
+     on a Highlight ground the browser's backplate behind the digits drew
+     them as a solid block. */
+  .crewlet-sheet-grid__grid:is(:focus-within, .crewlet-sheet-grid__grid--range) .crewlet-sheet-grid__rownum--selected {
+    background: Canvas;
+    color: Highlight;
+  }
+
   .crewlet-sheet-grid__rownum--present::before {
     background: Highlight;
   }

package/package.json

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