@sproutsocial/racine 31.7.13 → 31.7.15

package/CHANGELOG.md

@@ -1,5 +1,89 @@
 # Change Log
 
+## 31.7.15
+
+### Patch Changes
+
+- Updated dependencies [a0b98f1]
+- Updated dependencies [ea120a6]
+- Updated dependencies [690479a]
+- Updated dependencies [c36361c]
+- Updated dependencies [a635951]
+  - @sproutsocial/seeds-react-character-counter@1.0.8
+  - @sproutsocial/seeds-react-grid@0.2.13
+  - @sproutsocial/seeds-react-duration@1.0.32
+  - @sproutsocial/seeds-react-image@1.0.29
+  - @sproutsocial/seeds-react-empty-state@1.0.31
+  - @sproutsocial/seeds-react-avatar@1.1.25
+  - @sproutsocial/seeds-react-message@1.0.59
+
+## 31.7.14
+
+### Patch Changes
+
+- Updated dependencies [ef91a0d]
+- Updated dependencies [5ba86b3]
+- Updated dependencies [da85fb8]
+  - @sproutsocial/seeds-react-avatar@1.1.24
+  - @sproutsocial/seeds-react-system-props@3.1.4
+  - @sproutsocial/seeds-react-loader@1.0.30
+  - @sproutsocial/seeds-react-pagination@0.1.29
+  - @sproutsocial/seeds-react-message@1.0.58
+  - @sproutsocial/seeds-react-accordion@0.4.59
+  - @sproutsocial/seeds-react-badge@2.0.42
+  - @sproutsocial/seeds-react-banner@1.1.31
+  - @sproutsocial/seeds-react-box@1.1.28
+  - @sproutsocial/seeds-react-breadcrumb@1.1.14
+  - @sproutsocial/seeds-react-button@2.3.4
+  - @sproutsocial/seeds-react-card@1.1.50
+  - @sproutsocial/seeds-react-character-counter@1.0.7
+  - @sproutsocial/seeds-react-chart-legend@1.0.49
+  - @sproutsocial/seeds-react-chat-bubble@0.2.5
+  - @sproutsocial/seeds-react-checkbox@1.3.50
+  - @sproutsocial/seeds-react-container@0.3.22
+  - @sproutsocial/seeds-react-content-block@0.5.24
+  - @sproutsocial/seeds-react-data-table@2.6.32
+  - @sproutsocial/seeds-react-datepicker@1.0.47
+  - @sproutsocial/seeds-react-drawer@2.2.17
+  - @sproutsocial/seeds-react-duration@1.0.31
+  - @sproutsocial/seeds-react-empty-state@1.0.30
+  - @sproutsocial/seeds-react-fieldset@1.0.31
+  - @sproutsocial/seeds-react-form-field@1.1.25
+  - @sproutsocial/seeds-react-grid@0.2.12
+  - @sproutsocial/seeds-react-icon@2.4.8
+  - @sproutsocial/seeds-react-image@1.0.28
+  - @sproutsocial/seeds-react-indicator@1.0.48
+  - @sproutsocial/seeds-react-input@1.5.37
+  - @sproutsocial/seeds-react-keyboard-key@1.0.30
+  - @sproutsocial/seeds-react-label@1.0.30
+  - @sproutsocial/seeds-react-link@1.1.20
+  - @sproutsocial/seeds-react-list@0.3.36
+  - @sproutsocial/seeds-react-loader-button@1.0.55
+  - @sproutsocial/seeds-react-modal@2.5.32
+  - @sproutsocial/seeds-react-numeral@1.0.56
+  - @sproutsocial/seeds-react-panel@1.0.11
+  - @sproutsocial/seeds-react-partner-logo@1.7.20
+  - @sproutsocial/seeds-react-peek-in@0.3.10
+  - @sproutsocial/seeds-react-popout@2.5.18
+  - @sproutsocial/seeds-react-progress@0.2.15
+  - @sproutsocial/seeds-react-radio@1.3.31
+  - @sproutsocial/seeds-react-rating@1.0.49
+  - @sproutsocial/seeds-react-segmented-control@1.1.31
+  - @sproutsocial/seeds-react-select@1.1.49
+  - @sproutsocial/seeds-react-skeleton@1.1.28
+  - @sproutsocial/seeds-react-stack@1.0.28
+  - @sproutsocial/seeds-react-switch@1.2.48
+  - @sproutsocial/seeds-react-table@1.0.50
+  - @sproutsocial/seeds-react-tabs@1.4.21
+  - @sproutsocial/seeds-react-text@1.5.3
+  - @sproutsocial/seeds-react-textarea@1.0.29
+  - @sproutsocial/seeds-react-toast@1.0.50
+  - @sproutsocial/seeds-react-token@1.5.15
+  - @sproutsocial/seeds-react-token-input@1.4.59
+  - @sproutsocial/seeds-react-tooltip@1.1.35
+  - @sproutsocial/seeds-react-visually-hidden@1.0.29
+  - @sproutsocial/seeds-react-content-header@0.2.28
+
 ## 31.7.13
 
 ### Patch Changes

package/dist/components.css

@@ -172,6 +172,122 @@
   }
 }
 
+/* --- seeds-react-avatar --- */
+/**
+ * Seeds Avatar 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-avatar seeds-avatar-circle seeds-avatar-neutral" style="--seeds-avatar-size: 40px">JD</div>
+ *
+ * The avatar size is driven by the --seeds-avatar-size custom property set
+ * inline by the component from its `size` prop.
+ *
+ * Rules live in `@layer components` so that consumer Tailwind utilities
+ * (e.g. `mx-200`, `p-300`, `inline-flex`) win in the cascade and can override
+ * these component styles, rather than tying/beating them on specificity.
+ */
+
+@layer components {
+  .seeds-avatar {
+    box-sizing: border-box;
+    overflow: hidden;
+    position: relative;
+    display: flex;
+    flex-shrink: 0;
+    justify-content: center;
+    align-items: center;
+    width: var(--seeds-avatar-size);
+    height: var(--seeds-avatar-size);
+    background: none;
+    border: none;
+  }
+
+  .seeds-avatar-circle {
+    border-radius: 50%;
+  }
+
+  .seeds-avatar-leaf {
+    border-radius: 40% 0 40% 0;
+  }
+
+  /* Per-type text color, inherited by the initials Text (Text sets no default color). */
+  .seeds-avatar-neutral {
+    color: var(--color-text-decorative-neutral);
+  }
+
+  .seeds-avatar-purple {
+    color: var(--color-text-decorative-purple);
+  }
+
+  .seeds-avatar-green {
+    color: var(--color-text-decorative-green);
+  }
+
+  .seeds-avatar-blue {
+    color: var(--color-text-decorative-blue);
+  }
+
+  .seeds-avatar-yellow {
+    color: var(--color-text-decorative-yellow);
+  }
+
+  .seeds-avatar-red {
+    color: var(--color-text-decorative-red);
+  }
+
+  .seeds-avatar-orange {
+    color: var(--color-text-decorative-orange);
+  }
+
+  /*
+   * Fallback (initials shown): 1px border + decorative background.
+   * Type-specific bg/border-color are scoped to .seeds-avatar-fallback so the
+   * image variant keeps background:none / border:none.
+   */
+  .seeds-avatar-fallback {
+    border: 1px solid;
+  }
+
+  .seeds-avatar-fallback.seeds-avatar-neutral {
+    background: var(--color-container-bg-decorative-neutral);
+    border-color: var(--color-container-border-decorative-neutral);
+  }
+
+  .seeds-avatar-fallback.seeds-avatar-purple {
+    background: var(--color-container-bg-decorative-purple);
+    border-color: var(--color-container-border-decorative-purple);
+  }
+
+  .seeds-avatar-fallback.seeds-avatar-green {
+    background: var(--color-container-bg-decorative-green);
+    border-color: var(--color-container-border-decorative-green);
+  }
+
+  .seeds-avatar-fallback.seeds-avatar-blue {
+    background: var(--color-container-bg-decorative-blue);
+    border-color: var(--color-container-border-decorative-blue);
+  }
+
+  .seeds-avatar-fallback.seeds-avatar-yellow {
+    background: var(--color-container-bg-decorative-yellow);
+    border-color: var(--color-container-border-decorative-yellow);
+  }
+
+  .seeds-avatar-fallback.seeds-avatar-red {
+    background: var(--color-container-bg-decorative-red);
+    border-color: var(--color-container-border-decorative-red);
+  }
+
+  .seeds-avatar-fallback.seeds-avatar-orange {
+    background: var(--color-container-bg-decorative-orange);
+    border-color: var(--color-container-border-decorative-orange);
+  }
+}
+
 /* --- seeds-react-badge --- */
 /**
  * Seeds Badge component classes
@@ -635,6 +751,41 @@
 }
 
 /* end @layer components */
+/* --- seeds-react-character-counter --- */
+/**
+ * Seeds CharacterCounter 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-character-counter" role="status">5</div>
+ *
+ * Rules live in `@layer components` so that consumer Tailwind utilities
+ * (e.g. `mx-200`, `p-300`) win in the cascade and can override these component
+ * styles, rather than tying/beating them on specificity.
+ */
+
+@layer components {
+  .seeds-character-counter {
+    font-family: var(--font-family);
+    font-size: var(--font-size-200);
+    line-height: 1;
+    font-weight: var(--font-weight-semibold);
+    font-variant-numeric: tabular-nums;
+    color: var(--color-text-subtext);
+  }
+
+  .seeds-character-counter-mini {
+    font-size: var(--font-size-100);
+  }
+
+  .seeds-character-counter-overlimit {
+    color: var(--color-text-error);
+  }
+}
+
 /* --- seeds-react-chat-bubble --- */
 /**
  * Seeds ChatBubble component classes
@@ -1159,6 +1310,95 @@
   }
 }
 
+/* --- seeds-react-duration --- */
+/**
+ * Seeds Duration 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 (consistent with other Seeds
+ * components). font-variant-numeric has no design token, so this rule uses none.
+ *
+ * Usage:
+ *   <span class="seeds-duration">1m 30s</span>
+ */
+
+@layer components {
+  .seeds-duration {
+    font-variant-numeric: tabular-nums;
+  }
+}
+
+/* --- seeds-react-empty-state --- */
+/**
+ * Seeds EmptyState 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-empty-state">...</div>
+ *
+ * Rules live in @layer components so that consumer Tailwind utilities
+ * (e.g. mx-200, p-300) win in the cascade and can override these component
+ * styles, rather than tying/beating them on specificity.
+ */
+
+@layer components {
+  .seeds-empty-state {
+    max-width: 400px;
+    margin-inline: auto;
+  }
+
+  .seeds-empty-state-media {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    margin-bottom: var(--space-450);
+  }
+
+  .seeds-empty-state-content {
+    text-align: center;
+  }
+
+  .seeds-empty-state-headline {
+    margin: 0;
+    padding-left: 0;
+    padding-right: 0;
+    font-family: var(--font-family);
+    color: var(--color-text-headline);
+    font-weight: var(--font-weight-semibold);
+    font-size: var(--font-size-400);
+    line-height: var(--line-height-400);
+  }
+
+  .seeds-empty-state-subtext {
+    margin: 0;
+    margin-top: var(--space-400);
+    padding-left: 0;
+    padding-right: 0;
+    font-family: var(--font-family);
+    color: var(--color-text-subtext);
+    font-weight: var(--font-weight-normal);
+    font-size: var(--font-size-200);
+    line-height: var(--line-height-200);
+  }
+
+  .seeds-empty-state-actions {
+    margin-top: var(--space-450);
+  }
+
+  /* -empty MUST follow the base rule: equal specificity, source order wins */
+  .seeds-empty-state-actions-empty {
+    margin-top: 0;
+  }
+
+  .seeds-empty-state-secondary-action {
+    margin-top: var(--space-400);
+  }
+}
+
 /* --- seeds-react-fieldset --- */
 /**
  * Seeds Fieldset component classes
@@ -1262,6 +1502,95 @@
   }
 }
 
+/* --- seeds-react-grid --- */
+/**
+ * Seeds Grid component classes.
+ *
+ * Scalar column/gap values are applied inline by GridTailwind (jsdom-safe and
+ * they win over these rules). These rules provide sane defaults and drive the
+ * responsive cases: GridTailwind sets --sg-* custom properties per breakpoint
+ * and the media queries below promote them, resolving the sm -> md -> lg -> xl
+ * cascade. Breakpoints match @sproutsocial/seeds-react-theme
+ * (sm 640 / md 768 / lg 1024 / xl 1280).
+ *
+ * All rules are wrapped in `@layer components` so consumer Tailwind utilities
+ * (unlayered) win the cascade, matching button.css.
+ */
+
+@layer components {
+  .seeds-grid {
+    display: grid;
+    grid-template-columns: var(--sg-cols, repeat(1, 1fr));
+    row-gap: var(--sg-row-gap, 0);
+    column-gap: var(--sg-col-gap, 0);
+  }
+
+  @media (min-width: 640px) {
+    .seeds-grid {
+      grid-template-columns: var(--sg-cols-sm, var(--sg-cols, repeat(1, 1fr)));
+      row-gap: var(--sg-row-gap-sm, var(--sg-row-gap, 0));
+      column-gap: var(--sg-col-gap-sm, var(--sg-col-gap, 0));
+    }
+  }
+
+  @media (min-width: 768px) {
+    .seeds-grid {
+      grid-template-columns: var(
+        --sg-cols-md,
+        var(--sg-cols-sm, var(--sg-cols, repeat(1, 1fr)))
+      );
+      row-gap: var(--sg-row-gap-md, var(--sg-row-gap-sm, var(--sg-row-gap, 0)));
+      column-gap: var(
+        --sg-col-gap-md,
+        var(--sg-col-gap-sm, var(--sg-col-gap, 0))
+      );
+    }
+  }
+
+  @media (min-width: 1024px) {
+    .seeds-grid {
+      grid-template-columns: var(
+        --sg-cols-lg,
+        var(--sg-cols-md, var(--sg-cols-sm, var(--sg-cols, repeat(1, 1fr))))
+      );
+      row-gap: var(
+        --sg-row-gap-lg,
+        var(--sg-row-gap-md, var(--sg-row-gap-sm, var(--sg-row-gap, 0)))
+      );
+      column-gap: var(
+        --sg-col-gap-lg,
+        var(--sg-col-gap-md, var(--sg-col-gap-sm, var(--sg-col-gap, 0)))
+      );
+    }
+  }
+
+  @media (min-width: 1280px) {
+    .seeds-grid {
+      grid-template-columns: var(
+        --sg-cols-xl,
+        var(
+          --sg-cols-lg,
+          var(--sg-cols-md, var(--sg-cols-sm, var(--sg-cols, repeat(1, 1fr))))
+        )
+      );
+      row-gap: var(
+        --sg-row-gap-xl,
+        var(
+          --sg-row-gap-lg,
+          var(--sg-row-gap-md, var(--sg-row-gap-sm, var(--sg-row-gap, 0)))
+        )
+      );
+      column-gap: var(
+        --sg-col-gap-xl,
+        var(
+          --sg-col-gap-lg,
+          var(--sg-col-gap-md, var(--sg-col-gap-sm, var(--sg-col-gap, 0)))
+        )
+      );
+    }
+  }
+}
+
 /* --- seeds-react-icon --- */
 /**
  * Seeds Icon component classes
@@ -1300,6 +1629,26 @@
   }
 }
 
+/* --- seeds-react-image --- */
+/**
+ * Seeds Image component classes
+ * Use these instead of writing out individual Tailwind utility classes.
+ *
+ * Usage:
+ *   <img class="seeds-image" />
+ *   <img class="seeds-image seeds-image-loading" />
+ */
+
+@layer components {
+  .seeds-image {
+    display: block;
+  }
+
+  .seeds-image-loading {
+    opacity: 0;
+  }
+}
+
 /* --- seeds-react-indicator --- */
 /**
  * Seeds Indicator component classes
@@ -1593,17 +1942,22 @@
  *   <div class="seeds-loader seeds-loader-sm">...</div>            (small)
  *   <div class="seeds-loader">...</div>                            (no delay)
  *
- * The visual is a thin rotating arc (--color-neutral-0) over a faint arc ring
- * (--color-neutral-600), both clipped to the bottom half by the spinner span.
+ * The visual is Exploration 1 "Border Top Spinner": a single bordered ring
+ * element (--color-container-border-decorative-neutral) whose top and left
+ * borders are accented (--color-container-border-base), rotating once per
+ * 3s cycle. No pseudo-elements, no clip.
  */
 
 @layer components {
   @keyframes seeds-loader-spin {
-    from {
+    0% {
       transform: rotate(0deg);
     }
-    to {
-      transform: rotate(360deg);
+    50% {
+      transform: rotate(540deg);
+    }
+    100% {
+      transform: rotate(1080deg);
     }
   }
 
@@ -1619,83 +1973,44 @@
     }
   }
 
-  /* Base (large / 40px) — slow outer rotation hosting the spinner */
+  /* Base (large / 40px) — layout only; the spinner element carries rotation. */
   .seeds-loader {
     position: relative;
     margin: 0 auto;
     padding: 0;
     width: 40px;
     height: 40px;
-    animation: seeds-loader-spin 3s infinite linear;
   }
 
-  /* Visual spinner — clipped to bottom half, faster eased rotation */
+  /* Visual spinner IS the bordered ring — faint full border with accented
+     top/left, rotating once per 3s cycle. */
   .seeds-loader-spinner {
-    position: absolute;
-    inset: 0;
-    margin: auto;
-    width: 40px;
-    height: 40px;
-    clip: rect(20px, 40px, 40px, 0);
-    animation: seeds-loader-spin 1.5s cubic-bezier(0.77, 0, 0.175, 1) infinite;
-  }
-
-  /* Bright arc */
-  .seeds-loader-spinner::before {
-    content: "";
-    position: absolute;
-    inset: 0;
-    margin: auto;
-    width: 40px;
-    height: 40px;
-    box-sizing: border-box;
-    border: 4px solid transparent;
-    border-top-color: var(--color-neutral-0);
-    border-radius: 100%;
-    animation: seeds-loader-spin 1.5s cubic-bezier(0.77, 0, 0.175, 1) infinite;
-  }
-
-  /* Faint arc ring (static) — clipped to bottom half alongside the bright arc */
-  .seeds-loader-spinner::after {
-    content: "";
     position: absolute;
     inset: 0;
     margin: auto;
     width: 40px;
     height: 40px;
     box-sizing: border-box;
-    border: 4px solid var(--color-neutral-600);
+    border: 4px solid var(--color-container-border-decorative-neutral);
+    border-top-color: var(--color-container-border-base);
+    border-left-color: var(--color-container-border-base);
     border-radius: 100%;
+    animation: seeds-loader-spin 3s cubic-bezier(0.77, 0, 0.175, 1) infinite;
   }
 
-  /* When animations are disabled, the faint arc still renders so the loader
-     is never invisible. */
-  .no-cssanimations .seeds-loader-spinner::after {
-    border-color: var(--color-neutral-600);
-  }
-
-  /* Delay variant — fades the whole spinner in alongside the outer rotation */
+  /* Delay variant — fades the spinner in; rotation lives on the spinner. */
   .seeds-loader-delay {
-    animation:
-      seeds-loader-spin 3s infinite linear,
-      seeds-loader-delay-anim 2s 1;
+    animation: seeds-loader-delay-anim 2s 1;
   }
 
-  /* Small (20px) — scale size, border width, and the clip rect together */
+  /* Small (20px) — scale size and border width together. */
   .seeds-loader-sm,
-  .seeds-loader-sm .seeds-loader-spinner,
-  .seeds-loader-sm .seeds-loader-spinner::before,
-  .seeds-loader-sm .seeds-loader-spinner::after {
+  .seeds-loader-sm .seeds-loader-spinner {
     width: 20px;
     height: 20px;
   }
 
   .seeds-loader-sm .seeds-loader-spinner {
-    clip: rect(10px, 20px, 20px, 0);
-  }
-
-  .seeds-loader-sm .seeds-loader-spinner::before,
-  .seeds-loader-sm .seeds-loader-spinner::after {
     border-width: 2px;
   }
 
@@ -2894,6 +3209,107 @@
   }
 }
 
+/* --- seeds-react-pagination --- */
+/**
+ * Seeds Pagination 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 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 mx-200 / p-300 / inline-flex and they
+ * could not override component styling. Keep every rule inside this single block
+ * in source order — the -selected modifier and the :disabled overrides resolve
+ * by source order within the same layer.
+ */
+
+@layer components {
+  /* StyledPaginationContainer */
+  .seeds-pagination-container {
+    font-size: var(--font-size-200);
+    line-height: var(--line-height-200);
+    display: flex;
+    align-items: center;
+    gap: var(--space-300);
+    margin-top: var(--space-400);
+    flex-wrap: wrap;
+  }
+
+  /* StyledPaginationInfo (styled(Text)) */
+  .seeds-pagination-info {
+    white-space: nowrap;
+  }
+
+  /* StyledPageSizeSelector */
+  .seeds-pagination-page-size-selector {
+    display: flex;
+    align-items: center;
+    gap: var(--space-300);
+  }
+
+  /* StyledPaginationControls */
+  .seeds-pagination-controls {
+    display: flex;
+    align-items: center;
+    margin-left: auto;
+  }
+
+  /* StyledPageButtons */
+  .seeds-pagination-page-buttons {
+    display: inline-flex;
+    flex-flow: row wrap;
+    background-clip: padding-box;
+    border: 1px solid var(--color-button-secondary-border-base);
+    border-radius: var(--radius-outer);
+    padding: var(--space-100);
+    background: transparent;
+  }
+
+  /* StyledPaginationButton — base */
+  .seeds-pagination-button {
+    min-width: calc(var(--space-500) + 4px);
+    min-height: calc(var(--space-500) + 2px);
+    padding: calc(var(--space-350) - 6px);
+    line-height: var(--space-400);
+    font-weight: var(--font-weight-semibold);
+    background-color: transparent;
+    color: var(--color-text-body);
+    border: none;
+    border-radius: var(--radius-inner);
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  /* selected modifier MUST follow base (equal specificity — source order wins) */
+  .seeds-pagination-button-selected {
+    background-color: var(--color-button-secondary-bg-active);
+    color: var(--color-text-inverse);
+  }
+
+  .seeds-pagination-button:hover:not(:disabled) {
+    background-color: var(--color-listItem-bg-hover);
+  }
+
+  .seeds-pagination-button-selected:hover:not(:disabled) {
+    background-color: var(--color-button-secondary-bg-active);
+    color: var(--color-text-inverse);
+  }
+
+  .seeds-pagination-button:disabled {
+    cursor: default;
+    opacity: 0.5;
+  }
+
+  /* current page renders disabled + selected and must stay fully opaque */
+  .seeds-pagination-button-selected:disabled {
+    opacity: 1;
+  }
+}
+
 /* --- seeds-react-partner-logo --- */
 /**
  * Seeds Partner Logo component classes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/racine",
-  "version": "31.7.13",
+  "version": "31.7.15",
   "license": "MIT",
   "engines": {
     "node": ">=18"
@@ -73,74 +73,74 @@
   },
   "dependencies": {
     "@size-limit/file": "^11.1.6",
-    "@sproutsocial/seeds-react-accordion": "^0.4.58",
-    "@sproutsocial/seeds-react-avatar": "^1.1.23",
-    "@sproutsocial/seeds-react-badge": "^2.0.41",
-    "@sproutsocial/seeds-react-banner": "^1.1.30",
-    "@sproutsocial/seeds-react-box": "^1.1.27",
-    "@sproutsocial/seeds-react-breadcrumb": "^1.1.13",
-    "@sproutsocial/seeds-react-button": "^2.3.3",
-    "@sproutsocial/seeds-react-card": "^1.1.49",
-    "@sproutsocial/seeds-react-character-counter": "^1.0.6",
-    "@sproutsocial/seeds-react-chart-legend": "^1.0.48",
-    "@sproutsocial/seeds-react-chat-bubble": "^0.2.4",
-    "@sproutsocial/seeds-react-checkbox": "^1.3.49",
+    "@sproutsocial/seeds-react-accordion": "^0.4.59",
+    "@sproutsocial/seeds-react-avatar": "^1.1.25",
+    "@sproutsocial/seeds-react-badge": "^2.0.42",
+    "@sproutsocial/seeds-react-banner": "^1.1.31",
+    "@sproutsocial/seeds-react-box": "^1.1.28",
+    "@sproutsocial/seeds-react-breadcrumb": "^1.1.14",
+    "@sproutsocial/seeds-react-button": "^2.3.4",
+    "@sproutsocial/seeds-react-card": "^1.1.50",
+    "@sproutsocial/seeds-react-character-counter": "^1.0.8",
+    "@sproutsocial/seeds-react-chart-legend": "^1.0.49",
+    "@sproutsocial/seeds-react-chat-bubble": "^0.2.5",
+    "@sproutsocial/seeds-react-checkbox": "^1.3.50",
     "@sproutsocial/seeds-react-collapsible": "^2.0.1",
-    "@sproutsocial/seeds-react-container": "^0.3.21",
-    "@sproutsocial/seeds-react-content-block": "^0.5.23",
-    "@sproutsocial/seeds-react-content-header": "^0.2.27",
-    "@sproutsocial/seeds-react-data-table": "^2.6.31",
-    "@sproutsocial/seeds-react-datepicker": "^1.0.46",
-    "@sproutsocial/seeds-react-drawer": "^2.2.16",
-    "@sproutsocial/seeds-react-duration": "^1.0.30",
-    "@sproutsocial/seeds-react-empty-state": "^1.0.29",
-    "@sproutsocial/seeds-react-fieldset": "^1.0.30",
-    "@sproutsocial/seeds-react-form-field": "^1.1.24",
-    "@sproutsocial/seeds-react-grid": "^0.2.11",
+    "@sproutsocial/seeds-react-container": "^0.3.22",
+    "@sproutsocial/seeds-react-content-block": "^0.5.24",
+    "@sproutsocial/seeds-react-content-header": "^0.2.28",
+    "@sproutsocial/seeds-react-data-table": "^2.6.32",
+    "@sproutsocial/seeds-react-datepicker": "^1.0.47",
+    "@sproutsocial/seeds-react-drawer": "^2.2.17",
+    "@sproutsocial/seeds-react-duration": "^1.0.32",
+    "@sproutsocial/seeds-react-empty-state": "^1.0.31",
+    "@sproutsocial/seeds-react-fieldset": "^1.0.31",
+    "@sproutsocial/seeds-react-form-field": "^1.1.25",
+    "@sproutsocial/seeds-react-grid": "^0.2.13",
     "@sproutsocial/seeds-react-hooks": "^3.2.7",
-    "@sproutsocial/seeds-react-icon": "^2.4.7",
-    "@sproutsocial/seeds-react-image": "^1.0.27",
-    "@sproutsocial/seeds-react-indicator": "^1.0.47",
-    "@sproutsocial/seeds-react-input": "^1.5.36",
-    "@sproutsocial/seeds-react-keyboard-key": "^1.0.29",
-    "@sproutsocial/seeds-react-label": "^1.0.29",
-    "@sproutsocial/seeds-react-link": "^1.1.19",
-    "@sproutsocial/seeds-react-list": "^0.3.35",
-    "@sproutsocial/seeds-react-loader": "^1.0.29",
-    "@sproutsocial/seeds-react-loader-button": "^1.0.54",
-    "@sproutsocial/seeds-react-message": "^1.0.57",
+    "@sproutsocial/seeds-react-icon": "^2.4.8",
+    "@sproutsocial/seeds-react-image": "^1.0.29",
+    "@sproutsocial/seeds-react-indicator": "^1.0.48",
+    "@sproutsocial/seeds-react-input": "^1.5.37",
+    "@sproutsocial/seeds-react-keyboard-key": "^1.0.30",
+    "@sproutsocial/seeds-react-label": "^1.0.30",
+    "@sproutsocial/seeds-react-link": "^1.1.20",
+    "@sproutsocial/seeds-react-list": "^0.3.36",
+    "@sproutsocial/seeds-react-loader": "^1.0.30",
+    "@sproutsocial/seeds-react-loader-button": "^1.0.55",
+    "@sproutsocial/seeds-react-message": "^1.0.59",
     "@sproutsocial/seeds-react-mixins": "^4.3.12",
-    "@sproutsocial/seeds-react-modal": "^2.5.31",
+    "@sproutsocial/seeds-react-modal": "^2.5.32",
     "@sproutsocial/seeds-react-narrative-kit": "^0.6.3",
-    "@sproutsocial/seeds-react-numeral": "^1.0.55",
-    "@sproutsocial/seeds-react-pagination": "^0.1.28",
-    "@sproutsocial/seeds-react-panel": "^1.0.10",
-    "@sproutsocial/seeds-react-peek-in": "^0.3.9",
-    "@sproutsocial/seeds-react-partner-logo": "^1.7.19",
-    "@sproutsocial/seeds-react-popout": "^2.5.17",
+    "@sproutsocial/seeds-react-numeral": "^1.0.56",
+    "@sproutsocial/seeds-react-pagination": "^0.1.29",
+    "@sproutsocial/seeds-react-panel": "^1.0.11",
+    "@sproutsocial/seeds-react-peek-in": "^0.3.10",
+    "@sproutsocial/seeds-react-partner-logo": "^1.7.20",
+    "@sproutsocial/seeds-react-popout": "^2.5.18",
     "@sproutsocial/seeds-react-portal": "^1.2.0",
-    "@sproutsocial/seeds-react-progress": "^0.2.14",
-    "@sproutsocial/seeds-react-radio": "^1.3.30",
-    "@sproutsocial/seeds-react-rating": "^1.0.48",
-    "@sproutsocial/seeds-react-segmented-control": "^1.1.30",
+    "@sproutsocial/seeds-react-progress": "^0.2.15",
+    "@sproutsocial/seeds-react-radio": "^1.3.31",
+    "@sproutsocial/seeds-react-rating": "^1.0.49",
+    "@sproutsocial/seeds-react-segmented-control": "^1.1.31",
     "@sproutsocial/seeds-react-spot-illustration": "^1.2.5",
-    "@sproutsocial/seeds-react-select": "^1.1.48",
-    "@sproutsocial/seeds-react-skeleton": "^1.1.27",
-    "@sproutsocial/seeds-react-stack": "^1.0.27",
-    "@sproutsocial/seeds-react-switch": "^1.2.47",
-    "@sproutsocial/seeds-react-system-props": "^3.1.3",
-    "@sproutsocial/seeds-react-table": "^1.0.49",
-    "@sproutsocial/seeds-react-tabs": "^1.4.20",
-    "@sproutsocial/seeds-react-text": "^1.5.2",
-    "@sproutsocial/seeds-react-textarea": "^1.0.28",
-    "@sproutsocial/seeds-react-toast": "^1.0.49",
-    "@sproutsocial/seeds-react-token": "^1.5.14",
-    "@sproutsocial/seeds-react-token-input": "^1.4.58",
-    "@sproutsocial/seeds-react-tooltip": "^1.1.34",
+    "@sproutsocial/seeds-react-select": "^1.1.49",
+    "@sproutsocial/seeds-react-skeleton": "^1.1.28",
+    "@sproutsocial/seeds-react-stack": "^1.0.28",
+    "@sproutsocial/seeds-react-switch": "^1.2.48",
+    "@sproutsocial/seeds-react-system-props": "^3.1.4",
+    "@sproutsocial/seeds-react-table": "^1.0.50",
+    "@sproutsocial/seeds-react-tabs": "^1.4.21",
+    "@sproutsocial/seeds-react-text": "^1.5.3",
+    "@sproutsocial/seeds-react-textarea": "^1.0.29",
+    "@sproutsocial/seeds-react-toast": "^1.0.50",
+    "@sproutsocial/seeds-react-token": "^1.5.15",
+    "@sproutsocial/seeds-react-token-input": "^1.4.59",
+    "@sproutsocial/seeds-react-tooltip": "^1.1.35",
     "@sproutsocial/seeds-react-theme": "^4.3.1",
     "@sproutsocial/seeds-react-theme-provider": "^1.1.25",
     "@sproutsocial/seeds-react-utilities": "^4.3.0",
-    "@sproutsocial/seeds-react-visually-hidden": "^1.0.28",
+    "@sproutsocial/seeds-react-visually-hidden": "^1.0.29",
     "scroll-into-view-if-needed": "^2.2.20",
     "lodash.uniqueid": "^4.0.1",
     "styled-system": "^5.1.5",
@@ -163,7 +163,7 @@
     "@sproutsocial/seeds-motion": "^1.8.2",
     "@sproutsocial/seeds-networkcolor": "^2.22.0",
     "@sproutsocial/seeds-partner-logos": "^2.4.1",
-    "@sproutsocial/seeds-react-menu": "^1.16.11",
+    "@sproutsocial/seeds-react-menu": "^1.16.12",
     "@sproutsocial/seeds-react-testing-library": "*",
     "@sproutsocial/seeds-space": "^0.8.1",
     "@sproutsocial/seeds-testing": "*",