@sproutsocial/racine 29.1.1 → 31.3.0

package/dist/components.css

@@ -0,0 +1,1174 @@
+/**
+ * Seeds Design System - Combined Component CSS
+ * Auto-generated — do not edit directly.
+ *
+ * Provides pre-built component classes (seeds-btn, etc.) using Seeds CSS
+ * custom properties. Import alongside theme-all.css:
+ *
+ *   import "@sproutsocial/seeds-react-theme/css/theme-all";
+ *   import "@sproutsocial/racine/css/components";
+ *
+ * @see https://github.com/sproutsocial/seeds
+ */
+
+/* --- seeds-react-accordion --- */
+/**
+ * Seeds Accordion 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 mirror the styled-components implementation in styles.ts so the
+ * Tailwind and styled-components rendering paths are visually identical. The
+ * `[data-styled="true"]` rules deliver the bordered "card" appearance when the
+ * accordion is rendered with `styled` enabled.
+ *
+ * Rules live in the Tailwind `components` layer so consumer utility classes
+ * (e.g. `mx-200`, `p-300`, `inline-flex`) win the cascade and can override the
+ * component's own styles. Keyframes are at-rules unaffected by layering and stay
+ * outside the `@layer` wrapper.
+ *
+ * Usage:
+ *   <div class="accordion-item">
+ *     <div class="seeds-accordion-trigger" data-styled="true">…</div>
+ *     <div class="seeds-accordion-content" data-styled="true">
+ *       <div class="seeds-accordion-content-inner" data-styled="true">…</div>
+ *     </div>
+ *   </div>
+ */
+
+/* Keyframes are prefixed to avoid collisions in the aggregated stylesheet
+   (styled-components previously scoped slideDown/slideUp per component). */
+@keyframes seeds-accordion-slideDown {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--radix-accordion-content-height);
+  }
+}
+
+@keyframes seeds-accordion-slideUp {
+  from {
+    height: var(--radix-accordion-content-height);
+  }
+  to {
+    height: 0;
+  }
+}
+
+@layer components {
+  /* TriggerContainer -> .seeds-accordion-trigger */
+  .seeds-accordion-trigger {
+    display: flex;
+    align-items: center;
+    color: var(--color-text-body);
+    font-size: var(--font-size-200);
+    line-height: var(--line-height-200);
+  }
+
+  /* Override Text.Headline styles to match original accordion trigger typography */
+  .seeds-accordion-trigger h1,
+  .seeds-accordion-trigger h2,
+  .seeds-accordion-trigger h3,
+  .seeds-accordion-trigger h4,
+  .seeds-accordion-trigger h5,
+  .seeds-accordion-trigger h6 {
+    font-size: inherit;
+    font-weight: normal;
+    line-height: inherit;
+    color: inherit;
+  }
+
+  .seeds-accordion-trigger[data-styled="true"] h1,
+  .seeds-accordion-trigger[data-styled="true"] h2,
+  .seeds-accordion-trigger[data-styled="true"] h3,
+  .seeds-accordion-trigger[data-styled="true"] h4,
+  .seeds-accordion-trigger[data-styled="true"] h5,
+  .seeds-accordion-trigger[data-styled="true"] h6 {
+    font-weight: var(--font-weight-semibold);
+    color: var(--color-text-headline);
+  }
+
+  .seeds-accordion-trigger[data-styled="true"] {
+    border-top: 1px solid var(--color-container-border-base);
+    border-left: 1px solid var(--color-container-border-base);
+    border-right: 1px solid var(--color-container-border-base);
+    background: var(--color-container-bg-base);
+  }
+
+  .accordion-item[data-state="open"] .seeds-accordion-trigger[data-styled="true"] {
+    border-bottom: 1px solid transparent;
+  }
+
+  .accordion-item[data-state="closed"]
+    .seeds-accordion-trigger[data-styled="true"] {
+    transition: border-bottom-color 0s ease-in-out 0.3s;
+    border-bottom: 1px solid transparent;
+  }
+
+  .accordion-item:first-child .seeds-accordion-trigger[data-styled="true"] {
+    border-top-left-radius: var(--radius-outer);
+    border-top-right-radius: var(--radius-outer);
+  }
+
+  .accordion-item:last-child[data-state="closed"]
+    .seeds-accordion-trigger[data-styled="true"] {
+    transition: border-radius 0s linear 0.3s,
+      border-bottom-color 0s ease-in-out 0.3s;
+    border-bottom: 1px solid var(--color-container-border-base);
+    border-bottom-left-radius: var(--radius-outer);
+    border-bottom-right-radius: var(--radius-outer);
+  }
+
+  /* StyledRadixAccordionContent -> .seeds-accordion-content */
+  .seeds-accordion-content {
+    overflow: hidden;
+  }
+
+  .seeds-accordion-content[data-state="open"] {
+    animation: seeds-accordion-slideDown 300ms ease-in-out;
+  }
+
+  .seeds-accordion-content[data-state="closed"] {
+    animation: seeds-accordion-slideUp 300ms ease-in-out;
+  }
+
+  .seeds-accordion-content[data-styled="true"] {
+    border-left: 1px solid var(--color-container-border-base);
+    border-right: 1px solid var(--color-container-border-base);
+    background: var(--color-container-bg-base);
+  }
+
+  .accordion-item:last-child[data-state="open"]
+    .seeds-accordion-content[data-styled="true"],
+  .accordion-item:last-child[data-state="closed"]
+    .seeds-accordion-content[data-styled="true"] {
+    border-bottom: 1px solid var(--color-container-border-base);
+    border-bottom-left-radius: var(--radius-outer);
+    border-bottom-right-radius: var(--radius-outer);
+  }
+
+  /* ContentContainer -> .seeds-accordion-content-inner */
+  .seeds-accordion-content-inner {
+    color: var(--color-text-body);
+    background: transparent;
+    font-family: var(--font-family);
+  }
+
+  .seeds-accordion-content-inner[data-styled="true"] {
+    padding: 0 var(--space-400) var(--space-400);
+    font-size: var(--font-size-200);
+    line-height: var(--line-height-200);
+  }
+
+  .accordion-item:last-child[data-state="open"]
+    .seeds-accordion-content-inner[data-styled="true"],
+  .accordion-item:last-child[data-state="closed"]
+    .seeds-accordion-content-inner[data-styled="true"] {
+    border-bottom-left-radius: var(--radius-outer);
+    border-bottom-right-radius: var(--radius-outer);
+  }
+}
+
+/* --- seeds-react-banner --- */
+/**
+ * Seeds Banner 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.
+ *
+ * Rules live in the Tailwind `components` layer so consumer utility classes
+ * (e.g. mx-200, p-300, inline-flex) win the cascade over these defaults.
+ */
+
+@layer components {
+  .seeds-banner {
+    display: flex;
+    overflow: hidden;
+    align-items: center;
+    justify-content: space-between;
+    color: var(--color-text-body);
+    border-radius: var(--radius-outer);
+    font-family: var(--font-family);
+    font-size: var(--font-size-200);
+    line-height: var(--line-height-200);
+    padding: var(--space-300);
+  }
+
+  .seeds-banner a,
+  .seeds-banner button {
+    font-weight: var(--font-weight-semibold);
+    color: var(--color-text-body);
+    font-size: inherit;
+  }
+
+  .seeds-banner a:hover,
+  .seeds-banner button:hover {
+    color: var(--color-text-body);
+    text-decoration: underline;
+  }
+
+  .seeds-banner > span:not(.Icon) {
+    display: block;
+  }
+
+  .seeds-banner-icon {
+    align-self: flex-start;
+    min-width: 16px;
+  }
+
+  .seeds-banner-ghost {
+    border: 1px solid var(--color-container-border-base);
+    background-color: var(--color-container-bg-base);
+  }
+
+  .seeds-banner-success {
+    border: 1px solid var(--color-container-border-success);
+    background-color: var(--color-container-bg-success);
+  }
+
+  .seeds-banner-info {
+    border: 1px solid var(--color-container-border-info);
+    background-color: var(--color-container-bg-info);
+  }
+
+  .seeds-banner-error {
+    border: 1px solid var(--color-container-border-error);
+    background-color: var(--color-container-bg-error);
+  }
+
+  .seeds-banner-warning {
+    border: 1px solid var(--color-container-border-warning);
+    background-color: var(--color-container-bg-warning);
+  }
+
+  .seeds-banner-opportunity {
+    border: 1px solid var(--color-container-border-opportunity);
+    background-color: var(--color-container-bg-opportunity);
+  }
+}
+
+/* --- seeds-react-button --- */
+/**
+ * Seeds Button 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:
+ *   <button class="seeds-btn seeds-btn-primary">Click me</button>
+ *   <button class="seeds-btn seeds-btn-primary seeds-btn-lg">Large</button>
+ *   <button class="seeds-btn seeds-btn-primary seeds-btn-disabled" disabled>Disabled</button>
+ */
+
+@layer components {
+
+.seeds-btn {
+  display: inline-block;
+  box-sizing: border-box;
+  text-align: center;
+  font-family: var(--font-family);
+  border-width: 1px;
+  border-style: solid;
+  border-radius: var(--radius-500);
+  cursor: pointer;
+  text-decoration: none;
+  line-height: 1rem;
+  white-space: nowrap;
+  font-weight: var(--font-weight-bold);
+  transition-property: all;
+  transition-duration: var(--duration-fast);
+  margin: 0;
+  padding: var(--space-300);
+  font-size: var(--font-size-200);
+}
+
+.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);
+}
+
+/* KNOWN ISSUE: `small` currently renders identically to the default size — both use
+   --space-300 / --font-size-200 (only --lg differs). So size="small" has no visual
+   effect for ANY appearance. A real fix needs distinct small tokens confirmed against
+   Figma (24px target); left out of scope intentionally. */
+.seeds-btn-sm {
+  padding: var(--space-300);
+  font-size: var(--font-size-200);
+}
+
+.seeds-btn-lg {
+  padding: var(--space-350);
+  font-size: var(--font-size-300);
+}
+
+.seeds-btn-primary {
+  background-color: var(--color-button-primary-bg-base);
+  color: var(--color-button-primary-text-base);
+  border-color: var(--color-button-primary-border-base);
+}
+
+.seeds-btn-primary:hover {
+  background-color: var(--color-button-primary-bg-hover);
+  color: var(--color-button-primary-text-hover);
+}
+
+.seeds-btn-primary:active {
+  background-color: var(--color-button-primary-bg-active);
+}
+
+.seeds-btn-secondary {
+  background-color: var(--color-button-secondary-bg-base);
+  color: var(--color-button-secondary-text-base);
+  border-color: var(--color-button-secondary-border-base);
+}
+
+.seeds-btn-secondary:hover {
+  background-color: var(--color-button-secondary-bg-hover);
+  color: var(--color-button-secondary-text-hover);
+}
+
+.seeds-btn-secondary:active {
+  background-color: var(--color-button-secondary-bg-active);
+}
+
+.seeds-btn-destructive {
+  background-color: var(--color-button-destructive-bg-base);
+  color: var(--color-button-destructive-text-base);
+  border-color: var(--color-button-destructive-border-base);
+}
+
+.seeds-btn-destructive:hover {
+  background-color: var(--color-button-destructive-bg-hover);
+  color: var(--color-button-destructive-text-hover);
+}
+
+.seeds-btn-destructive:active {
+  background-color: var(--color-button-destructive-bg-active);
+}
+
+.seeds-btn-placeholder {
+  background-color: var(--color-button-placeholder-bg-base);
+  color: var(--color-button-placeholder-text-base);
+  border-color: var(--color-button-placeholder-border-base);
+  border-style: dashed;
+}
+
+.seeds-btn-placeholder:hover {
+  background-color: var(--color-button-placeholder-bg-hover);
+  color: var(--color-button-placeholder-text-hover);
+}
+
+.seeds-btn-unstyled {
+  background-color: var(--color-button-unstyled-bg-base);
+  color: var(--color-button-unstyled-text-base);
+  border-color: transparent;
+}
+
+.seeds-btn-unstyled:hover {
+  color: var(--color-button-unstyled-text-hover);
+}
+
+/* AI brand appearances — built on the shared --color-gradient-ai* tokens.
+   Rendered only via this Tailwind/CSS path (see ButtonHybrid routing guard). */
+.seeds-btn-ai-primary {
+  background-color: transparent;
+  background-image: var(--color-button-ai-primary-bg-base);
+  /* Cover the full border box (incl. the base 1px transparent border) and don't
+     tile — otherwise the gradient repeats as a 1px strip along each edge. */
+  background-origin: border-box;
+  background-repeat: no-repeat;
+  color: var(--color-button-ai-primary-text-base);
+  border-color: transparent;
+}
+
+.seeds-btn-ai-secondary {
+  /* White base shows through the 20% gradient tint to produce the soft fill. */
+  background-color: #fff;
+  background-image: var(--color-button-ai-secondary-bg-base);
+  background-origin: border-box;
+  background-repeat: no-repeat;
+  color: var(--color-button-ai-secondary-text-base);
+  border-color: transparent;
+}
+
+.seeds-btn-ai-outline {
+  position: relative;
+  background-color: transparent;
+  color: var(--color-button-ai-outline-text-base);
+  border-color: transparent;
+}
+
+/* Rounded gradient border via a masked ::before so it respects border-radius
+   and does not tint the label/icon. */
+.seeds-btn-ai-outline::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  padding: 1px;
+  background: var(--color-gradient-ai);
+  -webkit-mask:
+    linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+  pointer-events: none;
+}
+
+/* Subtle, brand-consistent hover across all three AI appearances. */
+.seeds-btn-ai-primary:hover,
+.seeds-btn-ai-secondary:hover,
+.seeds-btn-ai-outline:hover {
+  filter: brightness(0.96);
+}
+
+/* Active (sustained selected) state — mirrors styled-components: hover text color + active background */
+.seeds-btn-primary.seeds-btn-active {
+  color: var(--color-button-primary-text-hover);
+  background-color: var(--color-button-primary-bg-active);
+}
+
+.seeds-btn-secondary.seeds-btn-active {
+  color: var(--color-button-secondary-text-hover);
+  background-color: var(--color-button-secondary-bg-active);
+}
+
+.seeds-btn-destructive.seeds-btn-active {
+  color: var(--color-button-destructive-text-hover);
+  background-color: var(--color-button-destructive-bg-active);
+}
+
+.seeds-btn-placeholder.seeds-btn-active {
+  color: var(--color-button-placeholder-text-hover);
+  background-color: var(--color-button-placeholder-bg-active);
+}
+
+/* unstyled active: only text color changes (no background token) */
+.seeds-btn-unstyled.seeds-btn-active {
+  color: var(--color-button-unstyled-text-hover);
+}
+
+.seeds-btn-disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.seeds-btn-pill {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background-color: transparent;
+  border: none;
+  border-radius: var(--radius-pill);
+  min-width: var(--space-600);
+  min-height: var(--space-600);
+  padding: var(--space-300);
+  color: var(--color-button-pill-text-base);
+}
+
+.seeds-btn-pill:hover,
+.seeds-btn-pill:focus:active {
+  background-color: transparent;
+  color: var(--color-button-pill-text-hover);
+  box-shadow: inset 0px 0px 0px 1px var(--color-button-pill-border-hover);
+}
+
+.seeds-btn-pill.seeds-btn-active {
+  color: var(--color-button-pill-text-hover);
+  background-color: var(--color-button-pill-bg-active);
+}
+
+} /* end @layer components */
+/* --- seeds-react-content-block --- */
+/**
+ * Seeds ContentBlock 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-content-block-footer">...</div>
+ */
+
+@layer components {
+  .seeds-content-block {
+    background: var(--color-container-bg-base);
+    border: 1px solid var(--color-container-border-base);
+    border-radius: var(--radius-outer);
+  }
+
+  .seeds-content-block-content {
+    padding: var(--space-400);
+  }
+
+  .seeds-content-block-content.flush {
+    padding: 0;
+  }
+
+  /* When there is no footer, the content node rounds the card's bottom corners. */
+  .seeds-content-block-content.no-footer {
+    border-bottom-left-radius: var(--radius-outer);
+    border-bottom-right-radius: var(--radius-outer);
+  }
+
+  .seeds-content-block-loader {
+    margin: var(--space-400) 0;
+  }
+
+  .seeds-content-block-footer {
+    box-sizing: border-box;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    padding: var(--space-400);
+    border-top: 1px solid var(--color-container-border-base);
+    border-bottom-left-radius: var(--radius-outer);
+    border-bottom-right-radius: var(--radius-outer);
+  }
+}
+
+/* --- seeds-react-content-header --- */
+/**
+ * Seeds ContentHeader 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.
+ *
+ * Rules live in the Tailwind `components` layer so consumer utility classes
+ * (e.g. mx-200, p-300, inline-flex) win the cascade over these defaults.
+ */
+
+@layer components {
+  .seeds-content-header {
+    box-sizing: border-box;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    color: var(--color-text-headline);
+    padding: var(--space-400);
+  }
+
+  .seeds-content-header-bordered {
+    border-bottom: 1px solid var(--color-container-border-base);
+  }
+
+  /* Delay hiding the divider until the close animation finishes */
+  .seeds-content-header:has(button[data-state="closed"]) {
+    transition: border-bottom-color 0s ease-in-out 0.3s;
+    border-bottom-color: transparent;
+  }
+
+  .seeds-content-header-trigger {
+    all: unset;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex: 1;
+    width: 100%;
+    cursor: pointer;
+    min-width: 0;
+  }
+
+  .seeds-content-header-trigger .triggerIcon {
+    flex-shrink: 0;
+    transition: transform 300ms ease-in-out;
+  }
+
+  .seeds-content-header-trigger[data-state="open"] .triggerIcon {
+    transform: rotate(-180deg);
+  }
+
+  .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);
+  }
+}
+
+/* --- seeds-react-drawer --- */
+/**
+ * Seeds Drawer component classes.
+ * Component-scoped port of the styled-components shell in styles.ts. Used by
+ * DrawerTailwind.tsx on the Base UI primitives (Backdrop/Viewport/Popup).
+ *
+ * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for the
+ * CSS variable definitions (and dark mode support).
+ *
+ * Runtime numerics (z-index, and width/offset for side drawers) are applied as
+ * inline styles on the popup, not here. The Base-UI-injected custom properties
+ * (--drawer-snap-point-offset, --drawer-swipe-movement-y, --drawer-swipe-progress,
+ * --nested-drawers, --drawer-height, --drawer-frontmost-height) arrive on the
+ * popup at runtime and are read via var(...) below.
+ *
+ * All rules live in `@layer components` so Tailwind utilities (which the
+ * Storybook/racine setup registers in the canonical theme/base/components/
+ * utilities layer order) can override these component defaults. Unlayered
+ * rules would outrank any layered utility per the CSS cascade-layers spec,
+ * so utilities like `mx-200`/`p-300`/`inline-flex` passed via `className`
+ * would otherwise have no effect on the popup. Inline-styled geometry
+ * (width/offset/zIndex on the popup) is unaffected by layers and stays
+ * non-overridable by design.
+ */
+
+@layer components {
+  /* Viewport ---------------------------------------------------------------- */
+
+  .seeds-drawer-viewport {
+  }
+
+  .seeds-drawer-viewport--snap {
+    position: fixed;
+    inset: 0;
+    display: flex;
+    align-items: flex-end;
+    justify-content: center;
+    touch-action: none;
+    /* The viewport spans the whole screen but the popup only fills part of it.
+       Letting clicks fall through the empty area means a nested snap-point drawer
+       doesn't block selection/interaction with the parent drawer visible
+       underneath. The popup re-enables events. */
+    pointer-events: none;
+  }
+
+  /* Backdrop ---------------------------------------------------------------- */
+
+  .seeds-drawer-backdrop {
+    position: fixed;
+    inset: 0;
+    background: transparent;
+    pointer-events: none;
+  }
+
+  /* Drag handle ------------------------------------------------------------- */
+
+  .seeds-drawer-drag-handle {
+    position: absolute;
+    top: 8px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 36px;
+    height: 4px;
+    border-radius: 2px;
+    background-color: var(--color-container-border-base);
+  }
+
+  /* Popup base -------------------------------------------------------------- */
+
+  .seeds-drawer-popup {
+    display: flex;
+    flex-direction: column;
+    position: fixed;
+    background-color: var(--color-container-bg-base);
+    filter: blur(0);
+    transition: transform var(--duration-medium) ease,
+      border-radius var(--duration-medium) ease,
+      height var(--duration-medium) ease;
+  }
+
+  /* Always-on opacity transition so content fades smoothly both into and out of
+     stacked state. */
+  .seeds-drawer-popup > * {
+    transition: opacity var(--duration-medium) ease;
+  }
+
+  /* Side (left/right) layout. width + left/right come from inline style. */
+  .seeds-drawer-popup--side {
+    top: 0;
+    height: 100%;
+    box-shadow: var(--shadow-medium);
+  }
+
+  /* Bottom layout (non-snap bottom sheet). */
+  .seeds-drawer-popup--bottom:not(.seeds-drawer-popup--snap) {
+    --bleed: 3rem;
+    --stack-scale: 1;
+    --translate-y: 0px;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    width: 100%;
+    height: calc(90vh + var(--bleed));
+    margin-bottom: calc(-1 * var(--bleed));
+    border-radius: var(--radius-800) var(--radius-800) 0 0;
+    transform: translateY(var(--translate-y)) scale(var(--stack-scale));
+    transform-origin: 50% calc(100% - var(--bleed));
+    box-shadow: 0px -8px 16px rgba(39, 51, 51, 0.25);
+  }
+
+  /* Bottom snap-points layout. Follows base-ui's reference layout. Critical:
+     - box-sizing: border-box so offsetHeight ignores padding-bottom; otherwise
+       base-ui's ResizeObserver feedback (padding-bottom driven by snap offset)
+       grows popupHeight on every measurement and snap math diverges.
+     - height (not max-height) so popupHeight is large enough that base-ui's snap
+       offset = max(0, popupHeight - snapHeight) distinguishes snap points.
+     - position: relative inside the flex-end Viewport so base-ui can measure
+       popupHeight vs viewportHeight for snap math. */
+  .seeds-drawer-popup--bottom.seeds-drawer-popup--snap {
+    box-sizing: border-box;
+    position: relative;
+    width: 100%;
+    height: calc(100dvh - 1rem);
+    padding-bottom: max(
+      0px,
+      calc(
+        var(--drawer-snap-point-offset, 0px) +
+          var(--drawer-swipe-movement-y, 0px)
+      )
+    );
+    overflow: visible;
+    touch-action: none;
+    /* Counterpart to the viewport's pointer-events: none — the popup itself
+       stays interactive. */
+    pointer-events: auto;
+    border-radius: var(--radius-800) var(--radius-800) 0 0;
+    box-shadow: 0px -8px 16px rgba(39, 51, 51, 0.25);
+    transform: translateY(
+      calc(
+        var(--drawer-snap-point-offset, 0px) +
+          var(--drawer-swipe-movement-y, 0px)
+      )
+    );
+    will-change: transform;
+    transition: transform var(--duration-medium) cubic-bezier(0.32, 0.72, 0, 1),
+      box-shadow var(--duration-medium) cubic-bezier(0.32, 0.72, 0, 1);
+  }
+
+  /* Enter / exit ------------------------------------------------------------ */
+
+  .seeds-drawer-popup--right[data-starting-style],
+  .seeds-drawer-popup--right[data-ending-style] {
+    transform: translateX(100%);
+  }
+
+  .seeds-drawer-popup--left[data-starting-style],
+  .seeds-drawer-popup--left[data-ending-style] {
+    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] {
+    transform: translateY(calc(100% - var(--bleed) + 2px));
+  }
+
+  .seeds-drawer-popup--bottom.seeds-drawer-popup--snap[data-starting-style],
+  .seeds-drawer-popup--bottom.seeds-drawer-popup--snap[data-ending-style] {
+    transform: translateY(calc(100% + 2px));
+    padding-bottom: 0;
+  }
+
+  /* The action rail lives above the popup (position: absolute, bottom: 100% +
+     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] {
+    transform: translateY(calc(100% - var(--bleed) + 2px + 44px));
+  }
+
+  .seeds-drawer-popup--bottom.seeds-drawer-popup--snap.seeds-drawer-popup--action-rail[data-starting-style],
+  .seeds-drawer-popup--bottom.seeds-drawer-popup--snap.seeds-drawer-popup--action-rail[data-ending-style] {
+    transform: translateY(calc(100% + 2px + 44px));
+    padding-bottom: 0;
+  }
+
+  /* Swiping ----------------------------------------------------------------- */
+
+  .seeds-drawer-popup[data-swiping],
+  .seeds-drawer-popup[data-nested-drawer-swiping] {
+    transition-duration: 0ms;
+  }
+
+  /* Nested drawer open ------------------------------------------------------ */
+
+  .seeds-drawer-popup[data-nested-drawer-open] {
+    border-radius: var(--radius-800);
+  }
+
+  /* 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] {
+    --stack-step: 0.05;
+    --stack-progress: clamp(0, var(--drawer-swipe-progress), 1);
+    /* Override default vars; base transform rule picks them up automatically */
+    --stack-scale: max(
+      0,
+      calc(
+        1 - (var(--nested-drawers) * var(--stack-step)) +
+          (var(--stack-step) * var(--stack-progress))
+      )
+    );
+    --stack-shrink: calc(1 - var(--stack-scale));
+    --stack-height: max(
+      0px,
+      calc(var(--drawer-frontmost-height, var(--drawer-height)) - var(--bleed))
+    );
+    --stack-peek-offset: max(
+      0px,
+      calc((var(--nested-drawers) - var(--stack-progress)) * 1rem)
+    );
+    --translate-y: calc(
+      var(--drawer-swipe-movement-y) - var(--stack-peek-offset) -
+        (var(--stack-shrink) * var(--stack-height))
+    );
+    height: calc(var(--stack-height) + var(--bleed));
+    overflow: hidden;
+  }
+
+  /* Side stacked animation. */
+  .seeds-drawer-popup--side[data-nested-drawer-open] {
+    transform: translateY(calc(var(--nested-drawers) * -20px))
+      scale(calc(1 - var(--nested-drawers) * 0.08));
+    transform-origin: top center;
+  }
+
+  /* Fade children out while stacked — every direction except snap. */
+  .seeds-drawer-popup:not(.seeds-drawer-popup--snap)[data-nested-drawer-open]
+    > * {
+    opacity: 0;
+  }
+
+  /* While actively swiping a nested drawer, keep children visible. Equal
+     specificity to the fade-out rule above, so this must come after it. */
+  .seeds-drawer-popup[data-nested-drawer-open][data-nested-drawer-swiping] > * {
+    opacity: 1;
+  }
+}
+
+/* --- seeds-react-link --- */
+/**
+ * Seeds Link 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.
+ *
+ * Rules live in the Tailwind `components` layer so consumer utility classes
+ * (e.g. mx-200, p-300, inline-flex) win the cascade over these defaults.
+ */
+
+@layer components {
+  .seeds-link {
+    border: 0;
+    appearance: none;
+    cursor: pointer;
+    font-family: var(--font-family);
+    font-weight: var(--font-weight-semibold);
+    color: var(--color-link-base);
+    text-decoration: none;
+  }
+
+  .seeds-link-underline {
+    text-decoration: underline;
+  }
+
+  .seeds-link:hover {
+    color: var(--color-link-hover);
+    text-decoration: underline;
+  }
+
+  .seeds-link:active {
+    color: var(--color-link-hover);
+  }
+
+  .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);
+  }
+
+  .seeds-link:focus:active {
+    box-shadow: none;
+  }
+
+  .seeds-link-disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  /* When rendered as a button (no href) remove the native button background */
+  .seeds-link-no-href {
+    background: none;
+  }
+}
+
+/* --- seeds-react-loader --- */
+/**
+ * Seeds Loader 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-loader seeds-loader-delay">
+ *     <span class="seeds-loader-visually-hidden">Loading</span>
+ *   </div>
+ *   <div class="seeds-loader seeds-loader-sm">...</div>            (small)
+ *   <div class="seeds-loader">...</div>                            (no delay)
+ */
+
+@layer components {
+  @keyframes seeds-loader-spin {
+    from {
+      transform: translate(-50%, -50%) rotate(0deg);
+    }
+    to {
+      transform: translate(-50%, -50%) rotate(360deg);
+    }
+  }
+
+  @keyframes seeds-loader-delay-anim {
+    0% {
+      opacity: 0;
+    }
+    80% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+
+  /* Base (large / 40px) */
+  .seeds-loader {
+    position: relative;
+    margin: 0 auto;
+    padding: 0;
+    overflow: hidden;
+    border-radius: 100%;
+    width: 40px;
+    height: 40px;
+    box-shadow:
+      0 0 0 2px var(--color-neutral-600),
+      inset 0 0 0 6px var(--color-neutral-600);
+  }
+
+  .seeds-loader::after {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 40px;
+    height: 40px;
+    box-sizing: border-box;
+    border-width: 4px;
+    background: transparent;
+    border-style: solid;
+    border-radius: 100%;
+    content: "";
+    transition: opacity 250ms;
+    border-color: var(--color-neutral-0) var(--color-neutral-0)
+      var(--color-neutral-600) var(--color-neutral-600);
+    animation: seeds-loader-spin 2.25s infinite linear;
+  }
+
+  .no-cssanimations .seeds-loader::after {
+    background-size: 40px;
+  }
+
+  /* Delay variant — adds the delay fade-in to the container and the spinner */
+  .seeds-loader-delay {
+    animation: seeds-loader-delay-anim 2s 1;
+  }
+
+  .seeds-loader-delay::after {
+    animation:
+      seeds-loader-spin 2.25s infinite linear,
+      seeds-loader-delay-anim 2s 1;
+  }
+
+  /* Small (20px) */
+  .seeds-loader-sm {
+    width: 20px;
+    height: 20px;
+    box-shadow:
+      0 0 0 2px var(--color-neutral-600),
+      inset 0 0 0 4px var(--color-neutral-600);
+  }
+
+  .seeds-loader-sm::after {
+    width: 20px;
+    height: 20px;
+    border-width: 2px;
+  }
+
+  .no-cssanimations .seeds-loader-sm::after {
+    background-size: 20px;
+  }
+
+  /* Visually-hidden accessibility text */
+  .seeds-loader-visually-hidden {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    border: 0;
+  }
+}
+
+/* --- seeds-react-loader-button --- */
+/**
+ * Seeds LoaderButton component classes
+ * Layered on top of the Button (.seeds-btn*) classes to reproduce the disabled
+ * background dimming the styled-components LoaderButton applied.
+ *
+ * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
+ * CSS variable definitions and dark mode support.
+ *
+ * Rules live in the Tailwind `components` layer so consumer utility classes
+ * (e.g. mx-200, p-300, inline-flex) win the cascade over these defaults.
+ */
+
+@layer components {
+  /* Keep the loader fully visible by overriding .seeds-btn-disabled opacity: 0.5 */
+  .seeds-loader-btn-disabled.seeds-btn-disabled {
+    opacity: 1;
+  }
+
+  /* Disabled background: the appearance's base color at 40% alpha. */
+  .seeds-loader-btn-disabled.seeds-btn-primary {
+    background-color: color-mix(
+      in srgb,
+      var(--color-button-primary-bg-base) 40%,
+      transparent
+    );
+  }
+
+  .seeds-loader-btn-disabled.seeds-btn-destructive {
+    background-color: color-mix(
+      in srgb,
+      var(--color-button-destructive-bg-base) 40%,
+      transparent
+    );
+  }
+
+  /* Appearances whose base background is transparent resolve to transparent. */
+  .seeds-loader-btn-disabled.seeds-btn-secondary {
+    background-color: transparent;
+  }
+
+  .seeds-loader-btn-disabled.seeds-btn-placeholder {
+    background-color: transparent;
+  }
+
+  .seeds-loader-btn-disabled.seeds-btn-unstyled {
+    background-color: transparent;
+  }
+
+  .seeds-loader-btn-disabled.seeds-btn-pill {
+    background-color: transparent;
+  }
+}
+
+/* --- seeds-react-narrative-kit --- */
+/**
+ * Seeds NarrativeContainer 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-narrative-container seeds-narrative-container-accent">…</div>
+ */
+
+@layer components {
+
+.seeds-narrative-container {
+  position: relative;
+  overflow: hidden;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  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);
+}
+
+/* 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-react-text --- */
+/**
+ * Seeds Text 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.
+ *
+ * Rules live in the Tailwind `components` layer so consumer utility classes
+ * (e.g. mx-200, p-300, inline-flex) win the cascade over these defaults.
+ */
+
+@layer components {
+  .seeds-text {
+    margin: 0;
+    padding-left: 0;
+    padding-right: 0;
+    font-family: var(--font-family);
+  }
+
+  .seeds-text-italic {
+    font-style: italic;
+  }
+
+  .seeds-text-truncated {
+    display: block;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  .seeds-text-break-word {
+    word-break: break-word;
+    hyphens: auto;
+  }
+}