@sproutsocial/racine 31.7.15 → 31.7.16

package/dist/components.css

@@ -98,7 +98,8 @@
     background: var(--color-container-bg-base);
   }
 
-  .accordion-item[data-state="open"] .seeds-accordion-trigger[data-styled="true"] {
+  .accordion-item[data-state="open"]
+    .seeds-accordion-trigger[data-styled="true"] {
     border-bottom: 1px solid transparent;
   }
 
@@ -521,7 +522,6 @@
  */
 
 @layer components {
-
   .seeds-btn {
     display: inline-block;
     box-sizing: border-box;
@@ -544,9 +544,9 @@
 
   .seeds-btn:focus {
     outline: none;
-    box-shadow:
-      0 0 0 1px var(--color-button-primary-bg-base),
-      0 0 0 4px color-mix(in srgb, var(--color-button-primary-bg-base) 30%, transparent);
+    box-shadow: 0 0 0 1px var(--color-button-primary-bg-base),
+      0 0 0 4px
+        color-mix(in srgb, var(--color-button-primary-bg-base) 30%, transparent);
   }
 
   /* KNOWN ISSUE: `small` currently renders identically to the default size — both use
@@ -676,8 +676,7 @@
     border-radius: inherit;
     padding: 1px;
     background: var(--color-gradient-ai);
-    -webkit-mask:
-      linear-gradient(#fff 0 0) content-box,
+    -webkit-mask: linear-gradient(#fff 0 0) content-box,
       linear-gradient(#fff 0 0);
     -webkit-mask-composite: xor;
     mask-composite: exclude;
@@ -747,10 +746,10 @@
     color: var(--color-button-pill-text-hover);
     background-color: var(--color-button-pill-bg-active);
   }
-
 }
 
 /* end @layer components */
+
 /* --- seeds-react-character-counter --- */
 /**
  * Seeds CharacterCounter component classes
@@ -1018,9 +1017,9 @@
 
   .seeds-content-header-trigger:focus-visible {
     outline: none;
-    box-shadow:
-      0 0 0 1px var(--color-button-primary-bg-base),
-      0 0 0 4px color-mix(in srgb, var(--color-button-primary-bg-base) 30%, transparent);
+    box-shadow: 0 0 0 1px var(--color-button-primary-bg-base),
+      0 0 0 4px
+        color-mix(in srgb, var(--color-button-primary-bg-base) 30%, transparent);
   }
 }
 
@@ -1184,8 +1183,12 @@
     transform: translateX(-100%);
   }
 
-  .seeds-drawer-popup--bottom:not(.seeds-drawer-popup--snap)[data-starting-style],
-  .seeds-drawer-popup--bottom:not(.seeds-drawer-popup--snap)[data-ending-style] {
+  .seeds-drawer-popup--bottom:not(
+      .seeds-drawer-popup--snap
+    )[data-starting-style],
+  .seeds-drawer-popup--bottom:not(
+      .seeds-drawer-popup--snap
+    )[data-ending-style] {
     transform: translateY(calc(100% - var(--bleed) + 2px));
   }
 
@@ -1199,8 +1202,12 @@
      RAIL_OFFSET). Translating the popup by its own height alone leaves the rail
      visible at the bottom of the viewport during enter/exit, so we add the rail's
      outset: RAIL_BUTTON_HEIGHT (32) + RAIL_OFFSET (12) = 44px. */
-  .seeds-drawer-popup--bottom.seeds-drawer-popup--action-rail:not(.seeds-drawer-popup--snap)[data-starting-style],
-  .seeds-drawer-popup--bottom.seeds-drawer-popup--action-rail:not(.seeds-drawer-popup--snap)[data-ending-style] {
+  .seeds-drawer-popup--bottom.seeds-drawer-popup--action-rail:not(
+      .seeds-drawer-popup--snap
+    )[data-starting-style],
+  .seeds-drawer-popup--bottom.seeds-drawer-popup--action-rail:not(
+      .seeds-drawer-popup--snap
+    )[data-ending-style] {
     transform: translateY(calc(100% - var(--bleed) + 2px + 44px));
   }
 
@@ -1226,7 +1233,9 @@
   /* Bottom non-snap stacked bottom-sheet animation. Snap-point drawers don't
      participate: the stack math overwrites --translate-y and clips overflow,
      which collides with base-ui's snap-offset transform. */
-  .seeds-drawer-popup--bottom:not(.seeds-drawer-popup--snap)[data-nested-drawer-open] {
+  .seeds-drawer-popup--bottom:not(
+      .seeds-drawer-popup--snap
+    )[data-nested-drawer-open] {
     --stack-step: 0.05;
     --stack-progress: clamp(0, var(--drawer-swipe-progress), 1);
     /* Override default vars; base transform rule picks them up automatically */
@@ -1714,8 +1723,7 @@
     background-color: var(--color-form-bg-base);
     color: var(--color-text-body);
     outline: none;
-    transition:
-      border-color var(--duration-fast) var(--ease-ease_in),
+    transition: border-color var(--duration-fast) var(--ease-ease_in),
       box-shadow var(--duration-fast) var(--ease-ease_in);
     font-family: var(--font-family);
     font-weight: var(--font-weight-normal);
@@ -1741,9 +1749,9 @@
 
   .seeds-input input:focus {
     outline: none;
-    box-shadow:
-      0 0 0 1px var(--color-button-primary-bg-base),
-      0 0 0 4px color-mix(in srgb, var(--color-button-primary-bg-base) 30%, transparent);
+    box-shadow: 0 0 0 1px var(--color-button-primary-bg-base),
+      0 0 0 4px
+        color-mix(in srgb, var(--color-button-primary-bg-base) 30%, transparent);
   }
 
   /* Fix for red ring when input is marked required in Firefox */
@@ -1905,9 +1913,9 @@
 
   .seeds-link:focus {
     outline: none;
-    box-shadow:
-      0 0 0 1px var(--color-button-primary-bg-base),
-      0 0 0 4px color-mix(in srgb, var(--color-button-primary-bg-base) 30%, transparent);
+    box-shadow: 0 0 0 1px var(--color-button-primary-bg-base),
+      0 0 0 4px
+        color-mix(in srgb, var(--color-button-primary-bg-base) 30%, transparent);
   }
 
   .seeds-link:focus:active {
@@ -2095,31 +2103,29 @@
  */
 
 @layer components {
-
-.seeds-ai-container {
-  position: relative;
-  overflow: hidden;
-  box-sizing: border-box;
-  border-radius: var(--radius-800);
-  box-shadow: var(--shadow-low);
-  font-family: var(--font-family);
-  /* Subtle (default): the 20% AI gradient tint composited over the base
+  .seeds-ai-container {
+    position: relative;
+    overflow: hidden;
+    box-sizing: border-box;
+    border-radius: var(--radius-800);
+    box-shadow: var(--shadow-low);
+    font-family: var(--font-family);
+    /* Subtle (default): the 20% AI gradient tint composited over the base
      surface. --color-gradient-ai-subtle is already translucent, so layering it
      over the opaque base color produces the soft wash. */
-  background-color: var(--color-container-bg-base);
-  background-image: var(--color-gradient-ai-subtle);
-  color: var(--color-text-headline);
-}
+    background-color: var(--color-container-bg-base);
+    background-image: var(--color-gradient-ai-subtle);
+    color: var(--color-text-headline);
+  }
 
-/* Vivid: the full-saturation AI gradient with white content. White has no
+  /* Vivid: the full-saturation AI gradient with white content. White has no
    semantic Seeds token; it is part of the AI gradient treatment (mirrors the
    raw brand hex used in --color-gradient-ai). */
-.seeds-ai-container-vivid {
-  background-color: transparent;
-  background-image: var(--color-gradient-ai);
-  color: #fff;
-}
-
+  .seeds-ai-container-vivid {
+    background-color: transparent;
+    background-image: var(--color-gradient-ai);
+    color: #fff;
+  }
 }
 
 /* --- seeds-react-narrative-kit --- */
@@ -2135,30 +2141,28 @@
  */
 
 @layer components {
-
-/* A solid gray pill matching the design: background and border are both the
+  /* A solid gray pill matching the design: background and border are both the
    #dee1e1 container-border-base token, which also tracks dark mode. The two
    pixel literals below have no exact theme token — the --space scale skips 6px
    (4px→8px) and the --font-size scale skips 12px (11px→13px) — so the design's
    values are kept verbatim. All colors use tokens. */
-.seeds-eyebrow-token {
-  box-sizing: border-box;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--space-100); /* 2px */
-  padding: var(--space-100) var(--space-300); /* 2px / 8px */
-  border: 1px solid var(--color-container-border-base); /* #dee1e1 */
-  border-radius: var(--radius-500); /* 6px */
-  background-color: var(--color-container-border-base); /* #dee1e1 */
-  font-family: var(--font-family);
-  font-size: 12px; /* text-sm */
-  line-height: 20px;
-  font-weight: var(--font-weight-normal);
-  color: var(--color-text-body);
-  white-space: nowrap;
-}
-
+  .seeds-eyebrow-token {
+    box-sizing: border-box;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--space-100); /* 2px */
+    padding: var(--space-100) var(--space-300); /* 2px / 8px */
+    border: 1px solid var(--color-container-border-base); /* #dee1e1 */
+    border-radius: var(--radius-500); /* 6px */
+    background-color: var(--color-container-border-base); /* #dee1e1 */
+    font-family: var(--font-family);
+    font-size: 12px; /* text-sm */
+    line-height: 20px;
+    font-weight: var(--font-weight-normal);
+    color: var(--color-text-body);
+    white-space: nowrap;
+  }
 }
 
 /* --- seeds-react-narrative-kit --- */
@@ -2177,167 +2181,175 @@
  */
 
 @layer components {
-
-.seeds-metric-highlight {
-  box-sizing: border-box;
-  display: flex;
-  /* Wrap the fixed-width chart onto its own line when the metric block + chart
+  .seeds-metric-highlight {
+    box-sizing: border-box;
+    display: flex;
+    /* Wrap the fixed-width chart onto its own line when the metric block + chart
      can't sit side by side (narrow cards / mobile). The metric block claims its
      min-content width below, so a cramped row drops the chart down rather than
      overflowing the card and getting clipped by the container. */
-  flex-wrap: wrap;
-  align-items: flex-start;
-  gap: var(--space-350); /* 12px */
-  border-radius: var(--radius-800); /* 12px */
-  font-family: var(--font-family);
-  /* Container (default): a padded gray app surface (matches the design's
+    flex-wrap: wrap;
+    align-items: flex-start;
+    gap: var(--space-350); /* 12px */
+    border-radius: var(--radius-800); /* 12px */
+    font-family: var(--font-family);
+    /* Container (default): a padded gray app surface (matches the design's
      #f3f4f4 box). `-bare` strips it. */
-  padding: var(--space-400) var(--space-450); /* 16px / 24px */
-  background-color: var(--color-app-bg-base);
-}
+    padding: var(--space-400) var(--space-450); /* 16px / 24px */
+    background-color: var(--color-app-bg-base);
+  }
 
-.seeds-metric-highlight-bare {
-  padding: 0;
-  background-color: transparent;
-}
+  .seeds-metric-highlight-bare {
+    padding: 0;
+    background-color: transparent;
+  }
 
-.seeds-metric-highlight-vertical {
-  flex-direction: column;
-}
+  .seeds-metric-highlight-vertical {
+    flex-direction: column;
+  }
 
-/* The metric block: label + value/trend. Grows to fill the row in horizontal. */
-.seeds-metric-highlight-metric {
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: var(--space-200); /* 4px */
-  /* Grow to fill the row, but never shrink below the metric's own content
+  /* The metric block: label + value/trend. Grows to fill the row in horizontal. */
+  .seeds-metric-highlight-metric {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--space-200); /* 4px */
+    /* Grow to fill the row, but never shrink below the metric's own content
      (the nowrap value + trend pill). That min-content floor is what forces the
      chart to wrap below on narrow cards instead of the row overflowing. */
-  flex: 1 1 auto;
-  min-width: min-content;
-}
+    flex: 1 1 auto;
+    min-width: min-content;
+  }
 
-.seeds-metric-highlight-vertical .seeds-metric-highlight-metric {
-  width: 100%;
-  flex: 0 0 auto;
-}
+  .seeds-metric-highlight-vertical .seeds-metric-highlight-metric {
+    width: 100%;
+    flex: 0 0 auto;
+  }
 
-/* Small: label and value collapse onto a single centered row. */
-.seeds-metric-highlight-small .seeds-metric-highlight-metric {
-  flex-direction: row;
-  align-items: center;
-  gap: var(--space-300); /* 8px */
-}
+  /* Small: label and value collapse onto a single centered row. */
+  .seeds-metric-highlight-small .seeds-metric-highlight-metric {
+    flex-direction: row;
+    align-items: center;
+    gap: var(--space-300); /* 8px */
+  }
 
-.seeds-metric-highlight-label {
-  margin: 0;
-  font-size: var(--font-size-300); /* 16px */
-  line-height: var(--line-height-400); /* ~28px */
-  font-weight: var(--font-weight-normal);
-  color: var(--color-text-body);
-  overflow-wrap: break-word;
-}
+  .seeds-metric-highlight-label {
+    margin: 0;
+    font-size: var(--font-size-300); /* 16px */
+    line-height: var(--line-height-400); /* ~28px */
+    font-weight: var(--font-weight-normal);
+    color: var(--color-text-body);
+    overflow-wrap: break-word;
+  }
 
-/* In small, the label takes the slack so the value/trend align to the end. */
-.seeds-metric-highlight-small .seeds-metric-highlight-label {
-  flex: 1 0 0;
-  min-width: 0;
-}
+  /* In small, the label takes the slack so the value/trend align to the end. */
+  .seeds-metric-highlight-small .seeds-metric-highlight-label {
+    flex: 1 0 0;
+    min-width: 0;
+  }
 
-.seeds-metric-highlight-value-row {
-  display: flex;
-  flex-wrap: wrap; /* trend pill drops under the value on very narrow cards */
-  align-items: center;
-  gap: var(--space-300); /* 8px */
-}
+  .seeds-metric-highlight-value-row {
+    display: flex;
+    flex-wrap: wrap; /* trend pill drops under the value on very narrow cards */
+    align-items: center;
+    gap: var(--space-300); /* 8px */
+  }
 
-.seeds-metric-highlight-small .seeds-metric-highlight-value-row {
-  justify-content: flex-end;
-}
+  .seeds-metric-highlight-small .seeds-metric-highlight-value-row {
+    justify-content: flex-end;
+  }
 
-.seeds-metric-highlight-value {
-  margin: 0;
-  /* No mono token exists yet; fall back to a system monospace stack. Mirrors the
+  .seeds-metric-highlight-value {
+    margin: 0;
+    /* No mono token exists yet; fall back to a system monospace stack. Mirrors the
      font/font-mono treatment in the design. */
-  font-family: var(--font-family-mono, ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace);
-  font-size: var(--font-size-700); /* 32px */
-  line-height: var(--line-height-700); /* 40px */
-  font-weight: var(--font-weight-bold);
-  color: var(--color-text-headline);
-  white-space: nowrap;
-}
+    font-family: var(
+      --font-family-mono,
+      ui-monospace,
+      "SF Mono",
+      SFMono-Regular,
+      Menlo,
+      monospace
+    );
+    font-size: var(--font-size-700); /* 32px */
+    line-height: var(--line-height-700); /* 40px */
+    font-weight: var(--font-weight-bold);
+    color: var(--color-text-headline);
+    white-space: nowrap;
+  }
 
-.seeds-metric-highlight-small .seeds-metric-highlight-value {
-  font-size: var(--font-size-600); /* 24px */
-  line-height: var(--line-height-600); /* 32px */
-}
+  .seeds-metric-highlight-small .seeds-metric-highlight-value {
+    font-size: var(--font-size-600); /* 24px */
+    line-height: var(--line-height-600); /* 32px */
+  }
 
-/* Trend badge — a rounded pill. Up is the positive (green) treatment; down
+  /* Trend badge — a rounded pill. Up is the positive (green) treatment; down
    swaps to the negative (red) treatment. Color flows to the arrow + value via
    currentColor. */
-.seeds-metric-highlight-trend {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--space-200); /* 4px */
-  padding: var(--space-100) var(--space-300); /* 2px / 8px */
-  border-radius: 999px;
-  font-size: var(--font-size-200); /* 13px */
-  line-height: var(--line-height-200);
-  font-weight: var(--font-weight-bold);
-  white-space: nowrap;
-  background-color: var(--color-container-bg-decorative-green);
-  color: var(--color-text-decorative-green);
-}
+  .seeds-metric-highlight-trend {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-200); /* 4px */
+    padding: var(--space-100) var(--space-300); /* 2px / 8px */
+    border-radius: 999px;
+    font-size: var(--font-size-200); /* 13px */
+    line-height: var(--line-height-200);
+    font-weight: var(--font-weight-bold);
+    white-space: nowrap;
+    background-color: var(--color-container-bg-decorative-green);
+    color: var(--color-text-decorative-green);
+  }
 
-.seeds-metric-highlight-trend-down {
-  background-color: var(--color-container-bg-decorative-red);
-  color: var(--color-text-decorative-red);
-}
+  .seeds-metric-highlight-trend-down {
+    background-color: var(--color-container-bg-decorative-red);
+    color: var(--color-text-decorative-red);
+  }
 
-.seeds-metric-highlight-trend-arrow {
-  flex: 0 0 auto;
-  width: 1em;
-  height: 1em;
-  stroke: currentColor;
-  stroke-width: 1.5;
-}
+  .seeds-metric-highlight-trend-arrow {
+    flex: 0 0 auto;
+    width: 1em;
+    height: 1em;
+    stroke: currentColor;
+    stroke-width: 1.5;
+  }
 
-/* Slot for an injected chart (e.g. a data-viz SparklineChart). Layout only — no
+  /* Slot for an injected chart (e.g. a data-viz SparklineChart). Layout only — no
    stroke/background styling, so the injected chart controls its own look. Heights
    are explicit (never percentage/stretch) so a Highcharts chart always measures a
    concrete container instead of falling back to its 400px default. */
-.seeds-metric-highlight-chart {
-  box-sizing: border-box;
-  flex: 0 0 auto;
-  align-self: center;
-  /* Center the injected chart as a flex item — an inline/inline-block child
+  .seeds-metric-highlight-chart {
+    box-sizing: border-box;
+    flex: 0 0 auto;
+    align-self: center;
+    /* Center the injected chart as a flex item — an inline/inline-block child
      (e.g. the data-viz SparklineChart) otherwise sits on the text baseline with
      descender space below it, reading as vertically off-center in the slot. */
-  display: flex;
-  align-items: center;
-}
-
-.seeds-metric-highlight:not(.seeds-metric-highlight-vertical) .seeds-metric-highlight-chart {
-  width: 104px;
-  height: 48px;
-}
+    display: flex;
+    align-items: center;
+  }
 
-.seeds-metric-highlight-small:not(.seeds-metric-highlight-vertical) .seeds-metric-highlight-chart {
-  width: 88px;
-  height: 40px;
-}
+  .seeds-metric-highlight:not(.seeds-metric-highlight-vertical)
+    .seeds-metric-highlight-chart {
+    width: 104px;
+    height: 48px;
+  }
 
-.seeds-metric-highlight-vertical .seeds-metric-highlight-chart {
-  width: 100%;
-  height: 96px;
-}
+  .seeds-metric-highlight-small:not(.seeds-metric-highlight-vertical)
+    .seeds-metric-highlight-chart {
+    width: 88px;
+    height: 40px;
+  }
 
-.seeds-metric-highlight-vertical.seeds-metric-highlight-small .seeds-metric-highlight-chart {
-  height: 56px;
-}
+  .seeds-metric-highlight-vertical .seeds-metric-highlight-chart {
+    width: 100%;
+    height: 96px;
+  }
 
+  .seeds-metric-highlight-vertical.seeds-metric-highlight-small
+    .seeds-metric-highlight-chart {
+    height: 56px;
+  }
 }
 
 /* --- seeds-react-narrative-kit --- */
@@ -2357,45 +2369,43 @@
  */
 
 @layer components {
+  /* Main container — horizontal layout with avatar, social icon, and user name. */
+  .seeds-narrative-attribution {
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    gap: var(--space-300); /* 8px */
+    font-family: var(--font-family);
+  }
 
-/* Main container — horizontal layout with avatar, social icon, and user name. */
-.seeds-narrative-attribution {
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  gap: var(--space-300); /* 8px */;
-  font-family: var(--font-family);
-}
-
-/* Circular avatar image — fixed size with rounded corners. */
-.seeds-narrative-attribution-avatar {
-  width: var(--space-450); /* 24px */
-  height: var(--space-450); /* 24px */
-  border-radius: var(--radius-circular); /* 50% */
-  object-fit: cover;
-  flex-shrink: 0;
-}
-
-/* Social network icon container — flexible sizing for partner logos. */
-.seeds-narrative-attribution-social-icon {
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
+  /* Circular avatar image — fixed size with rounded corners. */
+  .seeds-narrative-attribution-avatar {
+    width: var(--space-450); /* 24px */
+    height: var(--space-450); /* 24px */
+    border-radius: var(--radius-circular); /* 50% */
+    object-fit: cover;
+    flex-shrink: 0;
+  }
 
-/* User name text — bold headline text with ellipsis overflow. */
-.seeds-narrative-attribution-user-name {
-  overflow: hidden;
-  color: var(--color-text-headline);
-  text-overflow: ellipsis;
-  font-family: var(--font-family);
-  font-size: var(--text-base-font-size, 14px);
-  font-style: normal;
-  font-weight: var(--font-weight-bold, 700);
-  line-height: var(--text-base-line-height, 24px);
-}
+  /* Social network icon container — flexible sizing for partner logos. */
+  .seeds-narrative-attribution-social-icon {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
 
+  /* User name text — bold headline text with ellipsis overflow. */
+  .seeds-narrative-attribution-user-name {
+    overflow: hidden;
+    color: var(--color-text-headline);
+    text-overflow: ellipsis;
+    font-family: var(--font-family);
+    font-size: var(--text-base-font-size, 14px);
+    font-style: normal;
+    font-weight: var(--font-weight-bold, 700);
+    line-height: var(--text-base-line-height, 24px);
+  }
 }
 
 /* --- seeds-react-narrative-kit --- */
@@ -2411,22 +2421,21 @@
  */
 
 @layer components {
+  .seeds-narrative-container {
+    position: relative;
+    overflow: hidden;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    padding: var(--space-500);
+    border-radius: var(--radius-800);
+    box-shadow: var(--shadow-low);
+    background-color: var(--color-container-bg-base);
+    font-family: var(--font-family);
+  }
 
-.seeds-narrative-container {
-  position: relative;
-  overflow: hidden;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  padding: var(--space-500);
-  border-radius: var(--radius-800);
-  box-shadow: var(--shadow-low);
-  background-color: var(--color-container-bg-base);
-  font-family: var(--font-family);
-}
-
-/* Grid and flex items default to `min-width: auto`, so they never shrink below
+  /* Grid and flex items default to `min-width: auto`, so they never shrink below
    their own min-content. A wide row of widgets (a metric grid, a card grid) then
    forces its column wider than the padded surface — and since the container clips
    with overflow:hidden, the excess is cut off at the edge, eating the right-hand
@@ -2439,39 +2448,37 @@
    default. Any component that needs a real floor (e.g. the data callout's 270px
    donut slot) sets its own min-width via a plain class and always wins, instead
    of racing this rule on source order. */
-:where(.seeds-narrative-container),
-:where(.seeds-narrative-container *) {
-  min-width: 0;
-}
+  :where(.seeds-narrative-container),
+  :where(.seeds-narrative-container *) {
+    min-width: 0;
+  }
 
-/* Decorative inner gradient border anchored to the top-left corner.
+  /* Decorative inner gradient border anchored to the top-left corner.
    A masked ::before so the gradient renders as a uniform-width ring that follows
    border-radius and never tints the content. The radial ellipse fades to
    transparent away from the corner; its x-radius (80%) is larger than its
    y-radius (60%) so the accent runs slightly further along the top edge than down
    the left edge. Brand stops mirror --color-gradient-ai — tokenize to a
    --color-gradient-* token once one exists for a fade-to-transparent variant. */
-.seeds-narrative-container-accent::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  border-radius: inherit;
-  padding: 4px;
-  background: radial-gradient(
-    ellipse 80% 60% at top left,
-    #205bc3 0%,
-    #9747ff 28%,
-    #f282f5 50%,
-    transparent 72%
-  );
-  -webkit-mask:
-    linear-gradient(#fff 0 0) content-box,
-    linear-gradient(#fff 0 0);
-  -webkit-mask-composite: xor;
-  mask-composite: exclude;
-  pointer-events: none;
-}
-
+  .seeds-narrative-container-accent::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    padding: 4px;
+    background: radial-gradient(
+      ellipse 80% 60% at top left,
+      #205bc3 0%,
+      #9747ff 28%,
+      #f282f5 50%,
+      transparent 72%
+    );
+    -webkit-mask: linear-gradient(#fff 0 0) content-box,
+      linear-gradient(#fff 0 0);
+    -webkit-mask-composite: xor;
+    mask-composite: exclude;
+    pointer-events: none;
+  }
 }
 
 /* --- seeds-react-narrative-kit --- */
@@ -2496,89 +2503,87 @@
  */
 
 @layer components {
-
-/* Establishes the query container. The row inside reacts to this element's
+  /* Establishes the query container. The row inside reacts to this element's
    inline size. A container query only styles DESCENDANTS of the query container,
    so the flex row lives on the inner element, not this one. */
-.seeds-narrative-data-callout {
-  container-type: inline-size;
-  box-sizing: border-box;
-  font-family: var(--font-family);
-}
+  .seeds-narrative-data-callout {
+    container-type: inline-size;
+    box-sizing: border-box;
+    font-family: var(--font-family);
+  }
 
-/* Stacked single column by default (narrow). The container query below turns it
+  /* Stacked single column by default (narrow). The container query below turns it
    into the horizontal 1/3 + 2/3 row once there is room. */
-.seeds-narrative-data-callout-row {
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: var(--space-450); /* 24px */
-}
+  .seeds-narrative-data-callout-row {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--space-450); /* 24px */
+  }
 
-/* Visual slot — layout only, no stroke/background so the injected chart controls
+  /* Visual slot — layout only, no stroke/background so the injected chart controls
    its own look and its own size. No fixed height: charts like the data-viz
    DonutChart carry their own intrinsic height (and a legend), so the slot sizes
    to the chart rather than clipping it. Stacked full-width until the container
    query expands the row. */
-.seeds-narrative-data-callout-visual {
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  min-width: 0;
-}
+  .seeds-narrative-data-callout-visual {
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    min-width: 0;
+  }
 
-/* Stretch the injected visual to the slot's full width. A fluid-width chart like
+  /* Stretch the injected visual to the slot's full width. A fluid-width chart like
    the v2 DonutChart otherwise shrinks to content inside this centered flex slot,
    so Highcharts fills that shrunk width and the ring gets width-capped below its
    fixed 270px height — leaving an empty vertical band. Filling the width lets the
    ring become height-capped and fill its box top-to-bottom, like the standalone
    chart story. */
-.seeds-narrative-data-callout-visual > * {
-  width: 100%;
-}
+  .seeds-narrative-data-callout-visual > * {
+    width: 100%;
+  }
 
-/* Body copy — fills the remaining space. */
-.seeds-narrative-data-callout-body {
-  box-sizing: border-box;
-  min-width: 0;
-  font-size: var(--font-size-300); /* 16px */
-  line-height: var(--line-height-400); /* ~28px */
-  font-weight: var(--font-weight-normal);
-  color: var(--color-text-body);
-  overflow-wrap: break-word;
-}
+  /* Body copy — fills the remaining space. */
+  .seeds-narrative-data-callout-body {
+    box-sizing: border-box;
+    min-width: 0;
+    font-size: var(--font-size-300); /* 16px */
+    line-height: var(--line-height-400); /* ~28px */
+    font-weight: var(--font-weight-normal);
+    color: var(--color-text-body);
+    overflow-wrap: break-word;
+  }
 
-/* Expand to the horizontal 1/3 + 2/3 split once the component is wide enough.
+  /* Expand to the horizontal 1/3 + 2/3 split once the component is wide enough.
    The threshold is on the component's own width (container query), so a narrow
    callout on a wide screen still stacks. 480px keeps the donut + copy readable
    side by side. */
-@container (min-width: 480px) {
-  .seeds-narrative-data-callout-row {
-    flex-direction: row;
-  }
+  @container (min-width: 480px) {
+    .seeds-narrative-data-callout-row {
+      flex-direction: row;
+    }
 
-  .seeds-narrative-data-callout-visual {
-    /* Nominally one-third, but never narrower than the injected chart's fixed
+    .seeds-narrative-data-callout-visual {
+      /* Nominally one-third, but never narrower than the injected chart's fixed
        height (the v2 DonutChart is 270px tall). Below that width a fluid-width,
        fixed-height chart like the donut gets width-capped and leaves an empty
        vertical band above/below the ring; the min-width keeps the visual square
        enough that the ring fills its box top-to-bottom, matching the standalone
        chart story. */
-    flex: 0 0 33.333%;
-    min-width: 270px;
-    width: auto;
-  }
+      flex: 0 0 33.333%;
+      min-width: 270px;
+      width: auto;
+    }
 
-  .seeds-narrative-data-callout-body {
-    flex: 1 1 0;
+    .seeds-narrative-data-callout-body {
+      flex: 1 1 0;
+    }
   }
 }
 
-}
-
 /* --- seeds-react-narrative-kit --- */
 /**
  * Seeds NarrativeDivider component classes.
@@ -2592,20 +2597,18 @@
  */
 
 @layer components {
-
-/* A full-width, 1px horizontal rule. The <hr> ships with user-agent margins
+  /* A full-width, 1px horizontal rule. The <hr> ships with user-agent margins
    and a beveled border, so reset those and draw the line with a single
    border-top using the container-border-base token (#dee1e1), which also
    tracks dark mode. */
-.seeds-narrative-divider {
-  box-sizing: border-box;
-  width: 100%;
-  height: 0;
-  margin: 0;
-  border: 0;
-  border-top: 1px solid var(--color-container-border-base); /* #dee1e1 */
-}
-
+  .seeds-narrative-divider {
+    box-sizing: border-box;
+    width: 100%;
+    height: 0;
+    margin: 0;
+    border: 0;
+    border-top: 1px solid var(--color-container-border-base); /* #dee1e1 */
+  }
 }
 
 /* --- seeds-react-narrative-kit --- */
@@ -2625,121 +2628,120 @@
  */
 
 @layer components {
+  /* Headline text. Rendered as an h1–h6, so reset the UA heading margins. */
+  .seeds-narrative-headline {
+    box-sizing: border-box;
+    margin: 0;
+    font-family: var(--font-family);
+    font-size: var(--font-size-700);
+    line-height: var(--line-height-700);
+    font-weight: var(--font-weight-bold);
+    letter-spacing: -0.02em;
+    color: var(--color-text-headline);
+  }
 
-/* Headline text. Rendered as an h1–h6, so reset the UA heading margins. */
-.seeds-narrative-headline {
-  box-sizing: border-box;
-  margin: 0;
-  font-family: var(--font-family);
-  font-size: var(--font-size-700);
-  line-height: var(--line-height-700);
-  font-weight: var(--font-weight-bold);
-  letter-spacing: -0.02em;
-  color: var(--color-text-headline);
-}
-
-/* Compact size for denser layouts (e.g. NarrativeSummary). Weight, letter
+  /* Compact size for denser layouts (e.g. NarrativeSummary). Weight, letter
    spacing, and color are inherited from the base class. */
-.seeds-narrative-headline-small {
-  font-size: var(--font-size-600); /* 24px */
-  line-height: var(--line-height-600); /* 32px */
-}
+  .seeds-narrative-headline-small {
+    font-size: var(--font-size-600); /* 24px */
+    line-height: var(--line-height-600); /* 32px */
+  }
 
-/* Static gradient accent for a span of headline text ("highlighted word").
+  /* Static gradient accent for a span of headline text ("highlighted word").
    Paints the AI brand gradient onto the glyphs via background-clip. */
-.seeds-narrative-headline-highlight {
-  background: var(--color-gradient-ai);
-  -webkit-background-clip: text;
-          background-clip: text;
-  color: transparent;
-}
+  .seeds-narrative-headline-highlight {
+    background: var(--color-gradient-ai);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+  }
 
-/* -------------------------------------------------------------------------
+  /* -------------------------------------------------------------------------
    "Roll" variant — vertical word roll. The active word slides into view
    while the previous one rolls out.
    ------------------------------------------------------------------------- */
-.seeds-narrative-headline-roll {
-  display: inline-block;
-  position: relative;
-  /* clip-path rather than overflow:hidden: overflow:hidden on an inline-block
+  .seeds-narrative-headline-roll {
+    display: inline-block;
+    position: relative;
+    /* clip-path rather than overflow:hidden: overflow:hidden on an inline-block
      snaps its baseline to the bottom margin edge, dropping the rolling word
      below the surrounding text. clip-path keeps the natural baseline. */
-  clip-path: inset(0);
-}
+    clip-path: inset(0);
+  }
 
-/* Invisible word that holds the box width to the active word. */
-.seeds-narrative-headline-roll-sizer {
-  display: inline-block;
-  visibility: hidden;
-  white-space: nowrap;
-  pointer-events: none;
-}
+  /* Invisible word that holds the box width to the active word. */
+  .seeds-narrative-headline-roll-sizer {
+    display: inline-block;
+    visibility: hidden;
+    white-space: nowrap;
+    pointer-events: none;
+  }
 
-.seeds-narrative-headline-roll-word {
-  display: inline-block;
-  position: absolute;
-  top: 0;
-  left: 0;
-  white-space: nowrap;
-  transform: translateY(100%);
-  opacity: 0;
-  transition:
-    transform var(--seeds-narrative-headline-roll-ms, 500ms) ease,
-    opacity var(--seeds-narrative-headline-roll-ms, 500ms) ease;
-}
+  .seeds-narrative-headline-roll-word {
+    display: inline-block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    white-space: nowrap;
+    transform: translateY(100%);
+    opacity: 0;
+    transition: transform var(--seeds-narrative-headline-roll-ms, 500ms) ease,
+      opacity var(--seeds-narrative-headline-roll-ms, 500ms) ease;
+  }
 
-.seeds-narrative-headline-roll-word-active {
-  transform: translateY(0);
-  opacity: 1;
-}
+  .seeds-narrative-headline-roll-word-active {
+    transform: translateY(0);
+    opacity: 1;
+  }
 
-.seeds-narrative-headline-roll-word-past {
-  transform: translateY(-100%);
-  opacity: 0;
-}
-
-/* Reverse the roll direction. */
-.seeds-narrative-headline-roll-down .seeds-narrative-headline-roll-word {
-  transform: translateY(-100%);
-}
-.seeds-narrative-headline-roll-down .seeds-narrative-headline-roll-word-active {
-  transform: translateY(0);
-}
-.seeds-narrative-headline-roll-down .seeds-narrative-headline-roll-word-past {
-  transform: translateY(100%);
-}
-
-/* Gradient-painted rolling words with a slow shimmer. */
-.seeds-narrative-headline-roll-gradient .seeds-narrative-headline-roll-word {
-  background: var(--color-gradient-ai);
-  background-size: 200% 200%;
-  -webkit-background-clip: text;
-          background-clip: text;
-  color: transparent;
-  animation: seeds-narrative-headline-grad-shift 8s ease infinite;
-}
+  .seeds-narrative-headline-roll-word-past {
+    transform: translateY(-100%);
+    opacity: 0;
+  }
 
-@keyframes seeds-narrative-headline-grad-shift {
-  0%,
-  100% {
-    background-position: 0% 50%;
+  /* Reverse the roll direction. */
+  .seeds-narrative-headline-roll-down .seeds-narrative-headline-roll-word {
+    transform: translateY(-100%);
   }
-  50% {
-    background-position: 100% 50%;
+  .seeds-narrative-headline-roll-down
+    .seeds-narrative-headline-roll-word-active {
+    transform: translateY(0);
   }
-}
-
-/* The JS cycle is already disabled under reduced-motion (the first word holds);
-   also flatten the transition and shimmer so any in-flight motion settles. */
-@media (prefers-reduced-motion: reduce) {
-  .seeds-narrative-headline-roll-word {
-    transition: none;
+  .seeds-narrative-headline-roll-down .seeds-narrative-headline-roll-word-past {
+    transform: translateY(100%);
   }
+
+  /* Gradient-painted rolling words with a slow shimmer. */
   .seeds-narrative-headline-roll-gradient .seeds-narrative-headline-roll-word {
-    animation: none;
+    background: var(--color-gradient-ai);
+    background-size: 200% 200%;
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    animation: seeds-narrative-headline-grad-shift 8s ease infinite;
+  }
+
+  @keyframes seeds-narrative-headline-grad-shift {
+    0%,
+    100% {
+      background-position: 0% 50%;
+    }
+    50% {
+      background-position: 100% 50%;
+    }
   }
-}
 
+  /* The JS cycle is already disabled under reduced-motion (the first word holds);
+   also flatten the transition and shimmer so any in-flight motion settles. */
+  @media (prefers-reduced-motion: reduce) {
+    .seeds-narrative-headline-roll-word {
+      transition: none;
+    }
+    .seeds-narrative-headline-roll-gradient
+      .seeds-narrative-headline-roll-word {
+      animation: none;
+    }
+  }
 }
 
 /* --- seeds-react-narrative-kit --- */
@@ -2759,103 +2761,109 @@
  */
 
 @layer components {
-
-/* Establishes the query container. The track inside reacts to this element's
+  /* Establishes the query container. The track inside reacts to this element's
    inline size — a container query can only style descendants of the container,
    never the container element itself. */
-.seeds-narrative-ordered-list {
-  container-type: inline-size;
-  box-sizing: border-box;
-  font-family: var(--font-family);
-}
+  .seeds-narrative-ordered-list {
+    container-type: inline-size;
+    box-sizing: border-box;
+    font-family: var(--font-family);
+  }
 
-/* The list itself, and the default (stacked) layout. The horizontal modifier
+  /* The list itself, and the default (stacked) layout. The horizontal modifier
    only expands to a row once the container query below has room, so horizontal
    collapses back to this stack when narrow. */
-.seeds-narrative-ordered-list-track {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-400); /* 16px */
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
+  .seeds-narrative-ordered-list-track {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-400); /* 16px */
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
 
-/* An item row: the ordinal beside the body, on its own rounded surface. */
-.seeds-narrative-ordered-list-item {
-  display: flex;
-  gap: var(--space-450); /* 24px */
-  align-items: flex-start;
-  box-sizing: border-box;
-  min-width: 0;
-  padding: var(--space-400) var(--space-450); /* 16px 24px */
-  border-radius: var(--radius-800); /* 12px */
-  background-color: var(--color-app-bg-base);
-}
+  /* An item row: the ordinal beside the body, on its own rounded surface. */
+  .seeds-narrative-ordered-list-item {
+    display: flex;
+    gap: var(--space-450); /* 24px */
+    align-items: flex-start;
+    box-sizing: border-box;
+    min-width: 0;
+    padding: var(--space-400) var(--space-450); /* 16px 24px */
+    border-radius: var(--radius-800); /* 12px */
+    background-color: var(--color-app-bg-base);
+  }
 
-/* The ordinal (01, 02, …). No mono token exists yet, so fall back to a system
+  /* The ordinal (01, 02, …). No mono token exists yet, so fall back to a system
    monospace stack — mirrors the value treatment in metric-highlight.css. */
-.seeds-narrative-ordered-list-number {
-  margin: 0;
-  flex-shrink: 0;
-  font-family: var(--font-family-mono, ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace);
-  font-size: var(--font-size-700); /* 32px */
-  line-height: var(--line-height-700); /* 40px */
-  font-weight: var(--font-weight-bold);
-  color: var(--color-text-headline);
-}
+  .seeds-narrative-ordered-list-number {
+    margin: 0;
+    flex-shrink: 0;
+    font-family: var(
+      --font-family-mono,
+      ui-monospace,
+      "SF Mono",
+      SFMono-Regular,
+      Menlo,
+      monospace
+    );
+    font-size: var(--font-size-700); /* 32px */
+    line-height: var(--line-height-700); /* 40px */
+    font-weight: var(--font-weight-bold);
+    color: var(--color-text-headline);
+  }
 
-/* Title + description + optional action, stacked. */
-.seeds-narrative-ordered-list-body {
-  flex: 1 1 auto;
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-200); /* 4px */
-  min-width: 0;
-}
+  /* Title + description + optional action, stacked. */
+  .seeds-narrative-ordered-list-body {
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-200); /* 4px */
+    min-width: 0;
+  }
 
-/* Title. 16px / 28px — the 28px line-height has no exact type token (the scale
+  /* Title. 16px / 28px — the 28px line-height has no exact type token (the scale
    skips from 24px to 32px), so the design value is kept verbatim. Same
    rationale as narrative-summary.css. */
-.seeds-narrative-ordered-list-title {
-  margin: 0;
-  font-size: var(--font-size-300); /* 16px */
-  line-height: 28px; /* off-scale, see comment above */
-  font-weight: var(--font-weight-bold);
-  color: var(--color-text-body);
-}
+  .seeds-narrative-ordered-list-title {
+    margin: 0;
+    font-size: var(--font-size-300); /* 16px */
+    line-height: 28px; /* off-scale, see comment above */
+    font-weight: var(--font-weight-bold);
+    color: var(--color-text-body);
+  }
 
-/* Description. 14px / 24px has no exact type token, so it is kept verbatim —
+  /* Description. 14px / 24px has no exact type token, so it is kept verbatim —
    same rationale as the title above. */
-.seeds-narrative-ordered-list-description {
-  margin: 0;
-  font-size: 14px; /* off-scale, see title above */
-  line-height: 24px;
-  font-weight: var(--font-weight-normal);
-  color: var(--color-text-body);
-}
+  .seeds-narrative-ordered-list-description {
+    margin: 0;
+    font-size: 14px; /* off-scale, see title above */
+    line-height: 24px;
+    font-weight: var(--font-weight-normal);
+    color: var(--color-text-body);
+  }
 
-.seeds-narrative-ordered-list-action {
-  padding-top: var(--space-350); /* 12px */
-}
+  .seeds-narrative-ordered-list-action {
+    padding-top: var(--space-350); /* 12px */
+  }
 
-/* Expand the horizontal variant to a row of equal columns once the component is
+  /* Expand the horizontal variant to a row of equal columns once the component is
    wide enough. The threshold is on the component's own width (container query),
    so a narrow card on a wide screen still stacks. 640px = Tailwind/Seeds sm
    breakpoint, matching narrative-summary.css. */
-@container (min-width: 640px) {
-  .seeds-narrative-ordered-list-horizontal {
-    flex-direction: row;
-  }
+  @container (min-width: 640px) {
+    .seeds-narrative-ordered-list-horizontal {
+      flex-direction: row;
+    }
 
-  .seeds-narrative-ordered-list-horizontal > .seeds-narrative-ordered-list-item {
-    flex: 1 1 0;
-    min-width: 0;
+    .seeds-narrative-ordered-list-horizontal
+      > .seeds-narrative-ordered-list-item {
+      flex: 1 1 0;
+      min-width: 0;
+    }
   }
 }
 
-}
-
 /* --- seeds-react-narrative-kit --- */
 /**
  * Seeds NarrativeSection component classes.
@@ -2872,36 +2880,34 @@
  */
 
 @layer components {
-
-/* The wrapper stacks the title above the content with a small gap. It carries
+  /* The wrapper stacks the title above the content with a small gap. It carries
    no surface of its own — it's meant to sit inside a NarrativeContainer. */
-.seeds-narrative-section {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-400); /* 16px — title to content */
-}
+  .seeds-narrative-section {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-400); /* 16px — title to content */
+  }
 
-/* The content slot stacks the section's widgets with the same 32px rhythm a
+  /* The content slot stacks the section's widgets with the same 32px rhythm a
    single-column grid (gap={500}) would give them, so multiple primitives inside
    one section are spaced exactly as they are between sections. */
-.seeds-narrative-section-content {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-500); /* 32px — between widgets */
-}
+  .seeds-narrative-section-content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-500); /* 32px — between widgets */
+  }
 
-/* The section title: bold 14px/24px in the headline color token (#273333,
+  /* The section title: bold 14px/24px in the headline color token (#273333,
    which also tracks dark mode). Matches the summary-label recipe used across
    the kit. The heading element ships with user-agent margins, so reset them. */
-.seeds-narrative-section-title {
-  margin: 0;
-  font-family: var(--font-family);
-  font-size: 14px;
-  line-height: 24px;
-  font-weight: var(--font-weight-bold);
-  color: var(--color-text-headline); /* #273333 */
-}
-
+  .seeds-narrative-section-title {
+    margin: 0;
+    font-family: var(--font-family);
+    font-size: 14px;
+    line-height: 24px;
+    font-weight: var(--font-weight-bold);
+    color: var(--color-text-headline); /* #273333 */
+  }
 }
 
 /* --- seeds-react-narrative-kit --- */
@@ -2921,71 +2927,77 @@
  */
 
 @layer components {
-
-/* Main card container — gray background with rounded corners and padding.
+  /* Main card container — gray background with rounded corners and padding.
    Uses Seeds tokens for spacing, colors, and radius to match the design system.
    Fills the width it is given (e.g. a grid column) and stretches its content to
    match, mirroring the horizontal NarrativeOrderedList — so a row of cards grows
    and resizes together instead of being pinned to a fixed 320px. */
-.seeds-narrative-social-media-card {
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  width: 100%;
-  padding: var(--space-450); /* 24px */
-  border-radius: var(--radius-500); /* 6px */
-  background-color: var(--color-app-bg-base);
-  font-family: var(--font-family);
-  color: var(--color-text-body);
-}
-
-/* No background — transparent background for cards that blend seamlessly with the page. */
-.seeds-narrative-social-media-card--no-background {
-  background-color: transparent;
-}
-
-/* Main content area — standard body text styling. */
-.seeds-narrative-social-media-card-content {
-  flex: 1;
-  margin-top: var(--space-400); /* 16px */
-  font-family: var(--font-family);
-  font-size: 14px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 24px;
-  color: var(--color-text-body);
-}
+  .seeds-narrative-social-media-card {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    width: 100%;
+    padding: var(--space-450); /* 24px */
+    border-radius: var(--radius-500); /* 6px */
+    background-color: var(--color-app-bg-base);
+    font-family: var(--font-family);
+    color: var(--color-text-body);
+  }
 
-/* Footer section — horizontal layout for stats with equal spacing. */
-.seeds-narrative-social-media-card-footer {
-  display: flex;
-  align-items: center;
-  gap: var(--space-400); /* 16px */
-  margin-top: var(--space-400); /* 16px */;
-}
+  /* No background — transparent background for cards that blend seamlessly with the page. */
+  .seeds-narrative-social-media-card--no-background {
+    background-color: transparent;
+  }
 
-/* Hide footer when empty (no metadata items). */
-.seeds-narrative-social-media-card-footer:empty {
-  display: none;
-}
+  /* Main content area — standard body text styling. */
+  .seeds-narrative-social-media-card-content {
+    flex: 1;
+    margin-top: var(--space-400); /* 16px */
+    font-family: var(--font-family);
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 24px;
+    color: var(--color-text-body);
+  }
 
-/* Individual stat container — icon + value in horizontal layout. */
-.seeds-narrative-social-media-card-stat {
-  display: flex;
-  align-items: center;
-  gap: var(--space-200); /* 4px */
-}
+  /* Footer section — horizontal layout for stats with equal spacing. */
+  .seeds-narrative-social-media-card-footer {
+    display: flex;
+    align-items: center;
+    gap: var(--space-400); /* 16px */
+    margin-top: var(--space-400); /* 16px */
+  }
 
-/* Stat value text — monospace font for numeric values. */
-.seeds-narrative-social-media-card-stat-value {
-  font-family: var(--font-family-mono, ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace);  font-size: 14px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 24px;
-  color: var(--color-text-body);
-}
+  /* Hide footer when empty (no metadata items). */
+  .seeds-narrative-social-media-card-footer:empty {
+    display: none;
+  }
 
+  /* Individual stat container — icon + value in horizontal layout. */
+  .seeds-narrative-social-media-card-stat {
+    display: flex;
+    align-items: center;
+    gap: var(--space-200); /* 4px */
+  }
+
+  /* Stat value text — monospace font for numeric values. */
+  .seeds-narrative-social-media-card-stat-value {
+    font-family: var(
+      --font-family-mono,
+      ui-monospace,
+      "SF Mono",
+      SFMono-Regular,
+      Menlo,
+      monospace
+    );
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 24px;
+    color: var(--color-text-body);
+  }
 }
 
 /* --- seeds-react-narrative-kit --- */
@@ -3007,115 +3019,113 @@
  */
 
 @layer components {
-
-/* Establishes the query container. The grid inside reacts to this element's
+  /* Establishes the query container. The grid inside reacts to this element's
    inline size. */
-.seeds-narrative-summary {
-  container-type: inline-size;
-  box-sizing: border-box;
-  font-family: var(--font-family);
-}
+  .seeds-narrative-summary {
+    container-type: inline-size;
+    box-sizing: border-box;
+    font-family: var(--font-family);
+  }
 
-/* Stacked single column by default (narrow). The container query below expands
+  /* Stacked single column by default (narrow). The container query below expands
    it once there is room. */
-.seeds-narrative-summary-grid {
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: var(--space-450); /* 24px */
-}
+  .seeds-narrative-summary-grid {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: var(--space-450); /* 24px */
+  }
 
-/* The lead column: eyebrow, headline, optional action. align-items:flex-start
+  /* The lead column: eyebrow, headline, optional action. align-items:flex-start
    keeps the eyebrow pill and the action sized to their content — without it the
    column's default stretch would blow the eyebrow out to full width. The
    headline still fills and wraps because its text is wider than the track. */
-.seeds-narrative-summary-lead {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: var(--space-300); /* 8px */
-  min-width: 0;
-}
+  .seeds-narrative-summary-lead {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--space-300); /* 8px */
+    min-width: 0;
+  }
 
-/* The headline area grows so the action anchors toward the bottom of the lead
+  /* The headline area grows so the action anchors toward the bottom of the lead
    column when the neighboring columns are taller. align-self:stretch fills the
    track width (the lead column pins other items to flex-start) so the headline
    wraps at the column edge regardless of its length. */
-.seeds-narrative-summary-headline {
-  flex: 1 1 auto;
-  align-self: stretch;
-}
+  .seeds-narrative-summary-headline {
+    flex: 1 1 auto;
+    align-self: stretch;
+  }
 
-/* In three-column mode the content wrapper is transparent to the grid, so its
+  /* In three-column mode the content wrapper is transparent to the grid, so its
    two sections become grid items in their own columns. In two-column mode the
    container query below turns it into a real, stacking grid item. */
-.seeds-narrative-summary-content {
-  display: contents;
-}
+  .seeds-narrative-summary-content {
+    display: contents;
+  }
 
-.seeds-narrative-summary-section {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-300); /* 8px */
-  min-width: 0;
-}
+  .seeds-narrative-summary-section {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-300); /* 8px */
+    min-width: 0;
+  }
 
-/* Section label. 14px / 24px has no exact type token (the scale skips from
+  /* Section label. 14px / 24px has no exact type token (the scale skips from
    13px to 16px), so the design value is kept verbatim — same rationale as
    eyebrow-token.css. All other values use tokens. */
-.seeds-narrative-summary-label {
-  margin: 0;
-  font-size: 14px;
-  line-height: 24px;
-  font-weight: var(--font-weight-bold);
-  color: var(--color-text-headline);
-}
+  .seeds-narrative-summary-label {
+    margin: 0;
+    font-size: 14px;
+    line-height: 24px;
+    font-weight: var(--font-weight-bold);
+    color: var(--color-text-headline);
+  }
 
-.seeds-narrative-summary-text {
-  margin: 0;
-  font-size: 14px; /* off-scale, see label above */
-  line-height: 24px;
-  font-weight: var(--font-weight-normal);
-  color: var(--color-text-body);
-}
+  .seeds-narrative-summary-text {
+    margin: 0;
+    font-size: 14px; /* off-scale, see label above */
+    line-height: 24px;
+    font-weight: var(--font-weight-normal);
+    color: var(--color-text-body);
+  }
 
-.seeds-narrative-summary-list {
-  margin: 0;
-  padding-inline-start: 21px;
-  list-style: disc;
-  font-size: 14px; /* off-scale, see label above */
-  line-height: 24px;
-  font-weight: var(--font-weight-normal);
-  color: var(--color-text-body);
-}
+  .seeds-narrative-summary-list {
+    margin: 0;
+    padding-inline-start: 21px;
+    list-style: disc;
+    font-size: 14px; /* off-scale, see label above */
+    line-height: 24px;
+    font-weight: var(--font-weight-normal);
+    color: var(--color-text-body);
+  }
 
-.seeds-narrative-summary-list li {
-  margin: 0;
-}
+  .seeds-narrative-summary-list li {
+    margin: 0;
+  }
 
-/* Expand to the multi-column layout once the component is wide enough. The
+  /* Expand to the multi-column layout once the component is wide enough. The
    threshold is on the component's own width (container query), so a narrow card
    on a wide screen still stacks. 640px = Tailwind/Seeds sm breakpoint. */
-@container (min-width: 640px) {
-  .seeds-narrative-summary-grid {
-    grid-template-columns: repeat(3, 1fr);
-  }
+  @container (min-width: 640px) {
+    .seeds-narrative-summary-grid {
+      grid-template-columns: repeat(3, 1fr);
+    }
 
-  /* 1/3 lead + 2/3 content. */
-  .seeds-narrative-summary-two-column {
-    grid-template-columns: 1fr 2fr;
-  }
+    /* 1/3 lead + 2/3 content. */
+    .seeds-narrative-summary-two-column {
+      grid-template-columns: 1fr 2fr;
+    }
 
-  /* The content wrapper becomes a real grid item that stacks its two sections. */
-  .seeds-narrative-summary-two-column .seeds-narrative-summary-content {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-450); /* 24px */
-    min-width: 0;
+    /* The content wrapper becomes a real grid item that stacks its two sections. */
+    .seeds-narrative-summary-two-column .seeds-narrative-summary-content {
+      display: flex;
+      flex-direction: column;
+      gap: var(--space-450); /* 24px */
+      min-width: 0;
+    }
   }
 }
 
-}
-
 /* --- seeds-react-narrative-kit --- */
 /**
  * Seeds PullQuote component classes.
@@ -3130,60 +3140,58 @@
  */
 
 @layer components {
-
-.seeds-pull-quote {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  margin: 0; /* reset the browser default <figure> margin */
-  /* 40px block / 48px inline — 48px is off the space scale, so derive it from
+  .seeds-pull-quote {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    margin: 0; /* reset the browser default <figure> margin */
+    /* 40px block / 48px inline — 48px is off the space scale, so derive it from
      two tokens (40 + 8) rather than hardcoding an off-scale value. */
-  padding: var(--space-600) calc(var(--space-600) + var(--space-300));
-}
+    padding: var(--space-600) calc(var(--space-600) + var(--space-300));
+  }
 
-/* The accented bar holding the quote and attribution. */
-.seeds-pull-quote-bar {
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: var(--space-450); /* 24px */
-  width: 100%;
-  padding-left: var(--space-450); /* 24px */
-  /* 4px is off the border-width scale (max token is 3px); the bar is a
+  /* The accented bar holding the quote and attribution. */
+  .seeds-pull-quote-bar {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--space-450); /* 24px */
+    width: 100%;
+    padding-left: var(--space-450); /* 24px */
+    /* 4px is off the border-width scale (max token is 3px); the bar is a
      decorative accent, mirroring NarrativeContainer's hardcoded 4px ring. The
      subtle accent uses the AI gradient mid stop (#9747ff — no exact token). */
-  border-left: 4px solid #9747ff;
-}
+    border-left: 4px solid #9747ff;
+  }
 
-.seeds-pull-quote-vivid .seeds-pull-quote-bar {
-  border-left-color: #fff;
-}
+  .seeds-pull-quote-vivid .seeds-pull-quote-bar {
+    border-left-color: #fff;
+  }
 
-.seeds-pull-quote-text {
-  margin: 0; /* reset the browser default <blockquote> margin */
-  font-size: var(--font-size-600);
-  line-height: var(--line-height-600);
-  font-style: italic;
-  font-weight: var(--font-weight-normal);
-  color: inherit;
-  overflow-wrap: break-word;
-}
+  .seeds-pull-quote-text {
+    margin: 0; /* reset the browser default <blockquote> margin */
+    font-size: var(--font-size-600);
+    line-height: var(--line-height-600);
+    font-style: italic;
+    font-weight: var(--font-weight-normal);
+    color: inherit;
+    overflow-wrap: break-word;
+  }
 
-/* Attribution row — a flex container for author name, avatar, network, etc.
+  /* Attribution row — a flex container for author name, avatar, network, etc.
    Direct text inherits a bold, small treatment to match the display-name style;
    richer content (e.g. an Avatar) composes freely. */
-.seeds-pull-quote-attribution {
-  display: flex;
-  align-items: center;
-  gap: var(--space-300); /* 8px */
-  font-size: var(--font-size-200);
-  line-height: var(--line-height-200);
-  font-weight: var(--font-weight-bold);
-  color: inherit;
-}
-
+  .seeds-pull-quote-attribution {
+    display: flex;
+    align-items: center;
+    gap: var(--space-300); /* 8px */
+    font-size: var(--font-size-200);
+    line-height: var(--line-height-200);
+    font-weight: var(--font-weight-bold);
+    color: inherit;
+  }
 }
 
 /* --- seeds-react-numeral --- */
@@ -3310,6 +3318,100 @@
   }
 }
 
+/* --- seeds-react-panel --- */
+/**
+ * Seeds Panel component classes.
+ * Component-scoped port of the static styled-components chrome in styles.ts.
+ * Used by PanelTailwind.tsx and the Tailwind sub-component paths.
+ *
+ * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for the
+ * CSS variable definitions (and dark mode support).
+ *
+ * Runtime geometry (flex-basis, the gap margin, the direction shape, and the
+ * inner min-width/min-height) is applied as inline style on the elements, not
+ * here — the jsdom tests assert those computed values and CSS is not loaded in
+ * that environment. Only static chrome lives in these classes.
+ *
+ * All rules live in `@layer components` so consumer Tailwind utilities (e.g.
+ * mx-200, p-300, inline-flex) win the cascade and can override these component
+ * defaults, rather than tying/beating them on specificity. Unlayered rules
+ * would outrank any layered utility per the CSS cascade-layers spec.
+ */
+
+@layer components {
+  /* Container --------------------------------------------------------------- */
+
+  .seeds-panel {
+    background: var(--color-container-bg-base);
+    flex-grow: 0;
+    flex-shrink: 0;
+    overflow: hidden;
+    border-radius: var(--radius-800);
+    transition: flex-basis var(--duration-medium) ease-in-out,
+      margin var(--duration-medium) ease-in-out;
+  }
+
+  .seeds-panel-inner {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  /* Header ------------------------------------------------------------------ */
+
+  .seeds-panel-header {
+    display: flex;
+    flex: 0 0 auto;
+    justify-content: space-between;
+    align-items: center;
+    padding: var(--space-400);
+    border-bottom: 1px solid var(--color-container-border-base);
+  }
+
+  /* Content ----------------------------------------------------------------- */
+
+  /* overflow-y (and, when headerless, display/flex-direction) are set inline
+     by PanelContentTailwind because the tests assert them under jsdom. */
+  .seeds-panel-content {
+    flex: 1 1 auto;
+    min-height: 0;
+    padding: var(--space-450);
+    color: var(--color-text-body);
+  }
+
+  /* Headerless content renders flush; the children own all chrome/padding. */
+  .seeds-panel-content--headerless {
+    padding: 0;
+  }
+
+  /* Footer ------------------------------------------------------------------ */
+
+  /* margin-bottom (var(--bleed, 0px)) is set inline by PanelFooterTailwind. */
+  .seeds-panel-footer {
+    flex: 0 0 auto;
+    overflow: hidden;
+    padding: var(--space-450);
+  }
+
+  /* Mobile actions header --------------------------------------------------- */
+
+  .seeds-panel-mobile-actions-header {
+    display: flex;
+    flex: 0 0 auto;
+    align-items: center;
+    justify-content: space-between;
+    padding-top: var(--space-400);
+    padding-left: var(--space-450);
+    padding-right: var(--space-450);
+  }
+
+  .seeds-panel-mobile-actions-buttons {
+    display: flex;
+    align-items: center;
+    gap: var(--space-200);
+  }
+}
+
 /* --- seeds-react-partner-logo --- */
 /**
  * Seeds Partner Logo component classes
@@ -3346,6 +3448,62 @@
   }
 }
 
+/* --- seeds-react-peek-in --- */
+/**
+ * Seeds PeekIn component classes
+ * Use these instead of writing out individual Tailwind utility classes.
+ *
+ * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
+ * CSS variable definitions and dark mode support.
+ *
+ * These classes back only the root layout wrappers PeekIn authors directly
+ * (the mobile bottom-sheet header row and the desktop main column). The rest
+ * of PeekIn's appearance comes from the composed Seeds primitives (Modal,
+ * Drawer, Panel, Text, Button), which own their own styling.
+ *
+ * Rules are wrapped in @layer components so consumer Tailwind utilities (which
+ * live in @layer utilities) win the cascade. Without this layer the unlayered
+ * component CSS would beat utilities like px-450 / gap-300 and they could not
+ * override component styling. Keep every rule inside this single block.
+ */
+
+@layer components {
+  /* Mobile bottom-sheet header row (Drawer.Header render wrapper) */
+  .seeds-peek-in-drawer-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-top: var(--space-400);
+    padding-right: var(--space-450);
+    padding-left: var(--space-450);
+    flex: 0 0 auto;
+  }
+
+  /* Header left group: optional back button + title */
+  .seeds-peek-in-titlegroup {
+    display: flex;
+    align-items: center;
+    gap: var(--space-300);
+  }
+
+  /* Header right group: consumer actions + inline pills/close */
+  .seeds-peek-in-header-actions {
+    display: flex;
+    align-items: center;
+    gap: var(--space-200);
+  }
+
+  /* Desktop main column: header + content, alongside the optional panel */
+  .seeds-peek-in-main {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    overflow: hidden;
+    background: var(--color-container-bg-base);
+    border-radius: var(--radius-800);
+  }
+}
+
 /* --- seeds-react-profile --- */
 /**
  * Seeds InlineProfile component classes
@@ -3496,6 +3654,7 @@
     gap: var(--space-300);
   }
 }
+
 /* --- seeds-react-profile --- */
 /**
  * Seeds ProfileToken component classes
@@ -3602,17 +3761,16 @@
     border: 1px solid var(--color-form-border-base);
     border-radius: 50%;
     background-color: var(--color-form-bg-base);
-    transition:
-      border-color var(--duration-fast) ease-in,
+    transition: border-color var(--duration-fast) ease-in,
       background-color var(--duration-fast) ease-in;
   }
 
   /* Focus ring mirrors button.css (the CSS form of the focusRing mixin) */
   .seeds-radio-input:focus {
     outline: none;
-    box-shadow:
-      0 0 0 1px var(--color-button-primary-bg-base),
-      0 0 0 4px color-mix(in srgb, var(--color-button-primary-bg-base) 30%, transparent);
+    box-shadow: 0 0 0 1px var(--color-button-primary-bg-base),
+      0 0 0 4px
+        color-mix(in srgb, var(--color-button-primary-bg-base) 30%, transparent);
   }
 
   .seeds-radio-wrapper:before {
@@ -3632,7 +3790,8 @@
 
   /* Unchecked hover / focus: show the dot (only when NOT checked) */
   .seeds-radio-wrapper:not(.seeds-radio-checked):hover .seeds-radio-input,
-  .seeds-radio-wrapper:not(.seeds-radio-checked):focus-within .seeds-radio-input {
+  .seeds-radio-wrapper:not(.seeds-radio-checked):focus-within
+    .seeds-radio-input {
     border-color: var(--color-form-border-base);
     background-color: var(--color-form-bg-base);
   }
@@ -3644,7 +3803,9 @@
   }
 
   /* Disabled-unchecked keeps the hover dot hidden (parity with opacity: disabled ? 0 : 1) */
-  .seeds-radio-wrapper.seeds-radio-disabled:not(.seeds-radio-checked):hover:before {
+  .seeds-radio-wrapper.seeds-radio-disabled:not(
+      .seeds-radio-checked
+    ):hover:before {
     opacity: 0;
   }
 
@@ -3796,8 +3957,7 @@
     cursor: pointer;
     outline: none;
     appearance: none;
-    transition:
-      border-color var(--duration-fast) var(--ease-ease_in),
+    transition: border-color var(--duration-fast) var(--ease-ease_in),
       box-shadow var(--duration-fast) var(--ease-ease_in);
     font-family: var(--font-family);
     font-weight: var(--font-weight-normal);
@@ -3812,16 +3972,14 @@
   }
 
   .seeds-select .seeds-select-input:focus {
-    box-shadow:
-      0 0 0 1px var(--color-button-primary-bg-base),
+    box-shadow: 0 0 0 1px var(--color-button-primary-bg-base),
       0 0px 0px 4px
         color-mix(in srgb, var(--color-button-primary-bg-base), transparent 70%);
     outline: none;
   }
 
   /* Fix for red ring when input is marked required in Firefox */
-  .seeds-select
-    .seeds-select-input:not(output):not(:focus):-moz-ui-invalid {
+  .seeds-select .seeds-select-input:not(output):not(:focus):-moz-ui-invalid {
     box-shadow: none;
   }
 
@@ -4187,9 +4345,9 @@
   /* Mixin for styled focus ring — copied from button.css:34-39 */
   .seeds-switch:focus {
     outline: none;
-    box-shadow:
-      0 0 0 1px var(--color-button-primary-bg-base),
-      0 0 0 4px color-mix(in srgb, var(--color-button-primary-bg-base) 30%, transparent);
+    box-shadow: 0 0 0 1px var(--color-button-primary-bg-base),
+      0 0 0 4px
+        color-mix(in srgb, var(--color-button-primary-bg-base) 30%, transparent);
   }
 
   /* Base styles for circle element */
@@ -4291,6 +4449,95 @@
   }
 }
 
+/* --- seeds-react-table --- */
+/**
+ * Seeds v2 Table component classes
+ * Use these instead of writing out individual Tailwind utility classes.
+ *
+ * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
+ * CSS variable definitions and dark mode support.
+ *
+ * Usage:
+ *   <div class="seeds-table-v2-container" role="region" tabindex="0">
+ *     <table class="seeds-table-v2">
+ *       <caption class="seeds-table-v2-caption">Caption</caption>
+ *       <thead class="seeds-table-v2-header">
+ *         <tr class="seeds-table-v2-row">
+ *           <th class="seeds-table-v2-header-cell" scope="col">Header</th>
+ *         </tr>
+ *       </thead>
+ *       <tbody class="seeds-table-v2-body">
+ *         <tr class="seeds-table-v2-row">
+ *           <td class="seeds-table-v2-cell">Data</td>
+ *         </tr>
+ *       </tbody>
+ *     </table>
+ *   </div>
+ *
+ * All rules are wrapped in `@layer components` so that consumer Tailwind
+ * utilities (unlayered) win the cascade over these styles.
+ */
+
+@layer components {
+  .seeds-table-v2-container {
+    overflow-x: auto;
+    max-width: 100%;
+  }
+
+  .seeds-table-v2 {
+    width: 100%;
+    border-collapse: collapse;
+    color: var(--color-text-body);
+    font-family: var(--font-family);
+  }
+
+  .seeds-table-v2-caption {
+    text-align: left;
+    font-size: var(--font-size-400);
+    line-height: var(--line-height-400);
+    font-weight: var(--font-weight-semibold);
+    padding: var(--space-300);
+    margin-top: var(--space-200);
+  }
+
+  .seeds-table-v2-caption-hidden {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    border: 0;
+  }
+
+  .seeds-table-v2-header {
+    vertical-align: bottom;
+    border-bottom: 1px solid var(--color-container-border-base);
+  }
+
+  .seeds-table-v2-row {
+    border-bottom: 1px solid var(--color-container-border-base);
+  }
+
+  .seeds-table-v2-header-cell {
+    font-size: var(--font-size-100);
+    line-height: var(--line-height-100);
+    font-weight: var(--font-weight-semibold);
+    padding: var(--space-300);
+    text-align: left;
+    min-width: 0;
+  }
+
+  .seeds-table-v2-cell {
+    font-size: var(--font-size-200);
+    line-height: var(--line-height-200);
+    font-weight: var(--font-weight-normal);
+    padding: var(--space-300);
+    text-align: left;
+  }
+}
+
 /* --- seeds-react-tabs --- */
 /**
  * Seeds Tabs component classes
@@ -4500,6 +4747,7 @@
     line-height: var(--line-height-200);
   }
 }
+
 /* --- seeds-react-textarea --- */
 /**
  * Seeds Textarea component classes
@@ -4545,9 +4793,9 @@
   }
 
   .seeds-textarea-input:focus {
-    box-shadow:
-      0 0 0 1px var(--color-button-primary-bg-base),
-      0 0 0 4px color-mix(in srgb, var(--color-button-primary-bg-base), transparent 70%);
+    box-shadow: 0 0 0 1px var(--color-button-primary-bg-base),
+      0 0 0 4px
+        color-mix(in srgb, var(--color-button-primary-bg-base), transparent 70%);
     outline: none;
   }
 
@@ -4624,8 +4872,7 @@
   }
 
   .seeds-token:focus {
-    box-shadow:
-      0 0 0 1px var(--color-button-primary-bg-base),
+    box-shadow: 0 0 0 1px var(--color-button-primary-bg-base),
       0 0px 0px 4px
         color-mix(in srgb, var(--color-button-primary-bg-base), transparent 70%);
     outline: none;
@@ -4658,7 +4905,11 @@
     cursor: pointer;
     box-shadow: var(--shadow-low);
     border: 1px solid
-      color-mix(in srgb, var(--color-container-border-decorative-blue), black 20%);
+      color-mix(
+        in srgb,
+        var(--color-container-border-decorative-blue),
+        black 20%
+      );
   }
 
   /* disabled */
@@ -4729,7 +4980,11 @@
   .lights-out .seeds-token-blue:hover,
   .lights-out .seeds-token-blue:active {
     border: 1px solid
-      color-mix(in srgb, var(--color-container-border-decorative-blue), white 20%);
+      color-mix(
+        in srgb,
+        var(--color-container-border-decorative-blue),
+        white 20%
+      );
   }
 
   [data-theme="dark"] .seeds-token-invalid:hover,
@@ -4959,14 +5214,9 @@
   }
 
   .seeds-tree-combobox-input-group:focus-within {
-    box-shadow:
-      0 0 0 1px var(--color-button-primary-bg-base),
+    box-shadow: 0 0 0 1px var(--color-button-primary-bg-base),
       0 0px 0px 4px
-        color-mix(
-          in srgb,
-          var(--color-button-primary-bg-base),
-          transparent 70%
-        );
+        color-mix(in srgb, var(--color-button-primary-bg-base), transparent 70%);
     outline: none;
   }
 
@@ -5023,8 +5273,7 @@
     cursor: default;
     outline: none;
     user-select: none;
-    transition:
-      border-color var(--duration-fast) var(--ease-ease_in),
+    transition: border-color var(--duration-fast) var(--ease-ease_in),
       box-shadow var(--duration-fast) var(--ease-ease_in);
   }
 
@@ -5033,14 +5282,9 @@
   }
 
   .seeds-tree-select-trigger:focus-visible {
-    box-shadow:
-      0 0 0 1px var(--color-button-primary-bg-base),
+    box-shadow: 0 0 0 1px var(--color-button-primary-bg-base),
       0 0px 0px 4px
-        color-mix(
-          in srgb,
-          var(--color-button-primary-bg-base),
-          transparent 70%
-        );
+        color-mix(in srgb, var(--color-button-primary-bg-base), transparent 70%);
     outline: none;
   }