@crewlethq/ui 0.37.1 → 0.39.0

package/package.json

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

package/dist/StatGroup-PADTJCUQ.css

@@ -1,86 +0,0 @@
-/*
- * A row of stat tiles.
- *
- * ITS COLUMN COUNT NEVER MOVES with its contents. A grid that reflowed as
- * tiles appeared and vanished moved every number on the page for a reason that
- * had nothing to do with the numbers, which is exactly what a reader watching
- * a live board is trying not to have happen.
- */
-
-.crewlet-stat-group {
-  display: grid;
-  grid-template-columns: repeat(var(--crewlet-stat-group-cols, 4), minmax(0, 1fr));
-  /* The flush-panel recipe: the card's surface, its hairline and its 12px
-     corner, flat as every card is, and `overflow: hidden`, which is what lets
-     the tiles inside sit against the corners without their own hairlines
-     escaping past them. */
-  background: var(--color-surface-subtle);
-  border: 1px solid var(--color-border-default);
-  border-radius: var(--radius-lg);
-  overflow: hidden;
-}
-
-/* Inside another card: the card's surface and edge are the row's. */
-.crewlet-stat-group--flush {
-  background: transparent;
-  border: 0;
-  border-radius: var(--radius-none);
-}
-
-/*
- * A tile inside the row brings no surface of its own, whether or not its
- * caller remembered `flush`. The group draws one card and the hairlines
- * inside it, so a tile that kept its own border and radius is a card inside
- * a card: a box inside a box, which is what the reader sees.
- *
- * TWO CLASSES, NOT :where(). Written as `> :where(.crewlet-statcard)` this
- * weighed exactly what the tile's own `.crewlet-statcard` rule weighs, so
- * which one painted was settled by whichever stylesheet the bundler put
- * last. It put the tile's last, and every tile in every group drew its own
- * border, its own 12px corner and its own surface inside the group's.
- * Naming both classes settles it by weight, which no import order can undo.
- */
-.crewlet-stat-group > .crewlet-statcard {
-  background: transparent;
-  border: 0;
-  border-radius: var(--radius-none);
-}
-
-/*
- * A hairline between columns, drawn on the tile that follows one.
- *
- * NAMED TWICE, ON PURPOSE. The rule above clears the tile's own border and
- * weighs two classes, so a one-class selector here loses to it and the row
- * of numbers runs together with nothing between the columns. The first
- * selector matches whatever a caller puts in the row; the second weighs the
- * same as the rule it has to beat, and sits after it.
- */
-.crewlet-stat-group > * + *,
-.crewlet-stat-group > .crewlet-statcard + .crewlet-statcard {
-  border-left: 1px solid var(--color-border-default);
-}
-
-/*
- * Two columns under the shell breakpoint, which is where the engine drops its
- * own stat row, and strictly under it, as the shell switches. The step is
- * 1024px, a 236px rail, the 8px inset and a 780px floor for the sheet, and it
- * is the width at which the shell stops holding the page beside the rail. The
- * rules are written for the general case rather than per column count: the
- * first tile of each pair loses its left hairline, and everything on the
- * second row and below gains a top one.
- */
-@media (width < 1024px) {
-  .crewlet-stat-group {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-
-  .crewlet-stat-group > *:nth-child(odd),
-  .crewlet-stat-group > .crewlet-statcard:nth-child(odd) {
-    border-left: 0;
-  }
-
-  .crewlet-stat-group > *:nth-child(n + 3),
-  .crewlet-stat-group > .crewlet-statcard:nth-child(n + 3) {
-    border-top: 1px solid var(--color-border-default);
-  }
-}