@sproutsocial/racine 31.7.3 → 31.7.5

package/CHANGELOG.md

@@ -1,5 +1,90 @@
 # Change Log
 
+## 31.7.5
+
+### Patch Changes
+
+- Updated dependencies [c35fe22]
+- Updated dependencies [dcd3fb9]
+- Updated dependencies [235938d]
+- Updated dependencies [c19788f]
+- Updated dependencies [5b5b1bd]
+  - @sproutsocial/seeds-react-fieldset@1.0.27
+  - @sproutsocial/seeds-react-form-field@1.1.21
+  - @sproutsocial/seeds-react-radio@1.3.27
+  - @sproutsocial/seeds-react-input@1.5.31
+  - @sproutsocial/seeds-react-switch@1.2.43
+  - @sproutsocial/seeds-react-token-input@1.4.53
+  - @sproutsocial/seeds-react-accordion@0.4.52
+
+## 31.7.4
+
+### Patch Changes
+
+- Updated dependencies [917a951]
+- Updated dependencies [6611f6a]
+- Updated dependencies [ca608f7]
+- Updated dependencies [6216473]
+  - @sproutsocial/seeds-react-icon@2.4.3
+  - @sproutsocial/seeds-react-numeral@1.0.51
+  - @sproutsocial/seeds-react-system-props@3.1.2
+  - @sproutsocial/seeds-react-partner-logo@1.7.16
+  - @sproutsocial/seeds-react-segmented-control@1.1.25
+  - @sproutsocial/seeds-react-accordion@0.4.51
+  - @sproutsocial/seeds-react-badge@2.0.37
+  - @sproutsocial/seeds-react-banner@1.1.25
+  - @sproutsocial/seeds-react-breadcrumb@1.1.10
+  - @sproutsocial/seeds-react-button@2.2.4
+  - @sproutsocial/seeds-react-card@1.1.45
+  - @sproutsocial/seeds-react-chart-legend@1.0.44
+  - @sproutsocial/seeds-react-checkbox@1.3.45
+  - @sproutsocial/seeds-react-content-header@0.2.23
+  - @sproutsocial/seeds-react-data-table@2.6.26
+  - @sproutsocial/seeds-react-datepicker@1.0.42
+  - @sproutsocial/seeds-react-drawer@2.2.11
+  - @sproutsocial/seeds-react-indicator@1.0.43
+  - @sproutsocial/seeds-react-input@1.5.30
+  - @sproutsocial/seeds-react-link@1.1.16
+  - @sproutsocial/seeds-react-list@0.3.30
+  - @sproutsocial/seeds-react-modal@2.5.26
+  - @sproutsocial/seeds-react-pagination@0.1.24
+  - @sproutsocial/seeds-react-panel@1.0.4
+  - @sproutsocial/seeds-react-peek-in@0.3.3
+  - @sproutsocial/seeds-react-rating@1.0.44
+  - @sproutsocial/seeds-react-select@1.1.44
+  - @sproutsocial/seeds-react-switch@1.2.42
+  - @sproutsocial/seeds-react-table@1.0.45
+  - @sproutsocial/seeds-react-toast@1.0.45
+  - @sproutsocial/seeds-react-token@1.5.10
+  - @sproutsocial/seeds-react-token-input@1.4.52
+  - @sproutsocial/seeds-react-tooltip@1.1.30
+  - @sproutsocial/seeds-react-avatar@1.1.20
+  - @sproutsocial/seeds-react-box@1.1.24
+  - @sproutsocial/seeds-react-character-counter@1.0.5
+  - @sproutsocial/seeds-react-chat-bubble@0.2.3
+  - @sproutsocial/seeds-react-container@0.3.18
+  - @sproutsocial/seeds-react-content-block@0.5.18
+  - @sproutsocial/seeds-react-duration@1.0.27
+  - @sproutsocial/seeds-react-empty-state@1.0.26
+  - @sproutsocial/seeds-react-fieldset@1.0.26
+  - @sproutsocial/seeds-react-form-field@1.1.20
+  - @sproutsocial/seeds-react-grid@0.2.8
+  - @sproutsocial/seeds-react-image@1.0.24
+  - @sproutsocial/seeds-react-keyboard-key@1.0.26
+  - @sproutsocial/seeds-react-label@1.0.26
+  - @sproutsocial/seeds-react-loader@1.0.26
+  - @sproutsocial/seeds-react-loader-button@1.0.49
+  - @sproutsocial/seeds-react-message@1.0.52
+  - @sproutsocial/seeds-react-popout@2.5.12
+  - @sproutsocial/seeds-react-progress@0.2.11
+  - @sproutsocial/seeds-react-radio@1.3.26
+  - @sproutsocial/seeds-react-skeleton@1.1.24
+  - @sproutsocial/seeds-react-stack@1.0.23
+  - @sproutsocial/seeds-react-tabs@1.4.14
+  - @sproutsocial/seeds-react-text@1.5.1
+  - @sproutsocial/seeds-react-textarea@1.0.25
+  - @sproutsocial/seeds-react-visually-hidden@1.0.25
+
 ## 31.7.3
 
 ### Patch Changes

package/dist/components.css

@@ -929,6 +929,282 @@
   }
 }
 
+/* --- seeds-react-fieldset --- */
+/**
+ * Seeds Fieldset 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:
+ *   <fieldset class="seeds-fieldset">
+ *     <legend class="seeds-fieldset-legend">Label</legend>
+ *     <p class="seeds-fieldset-helper-text">Helper text</p>
+ *     <div class="seeds-fieldset-list seeds-fieldset-list-vertical">
+ *       <div class="seeds-fieldset-item seeds-fieldset-item-vertical">...</div>
+ *     </div>
+ *   </fieldset>
+ */
+
+@layer components {
+  .seeds-fieldset {
+    box-sizing: border-box;
+    font-family: var(--font-family);
+    border: none;
+    padding: 0;
+  }
+
+  .seeds-fieldset-legend {
+    margin: 0;
+    font-family: var(--font-family);
+    font-size: var(--font-size-300);
+    line-height: var(--line-height-300);
+    font-weight: var(--font-weight-semibold);
+    color: var(--color-text-body);
+    margin-bottom: var(--space-300);
+  }
+
+  .seeds-fieldset-helper-text {
+    margin: 0;
+    font-family: var(--font-family);
+    font-size: var(--font-size-200);
+    line-height: var(--line-height-200);
+    margin-bottom: var(--space-300);
+  }
+
+  .seeds-fieldset-list {
+    box-sizing: border-box;
+    font-family: var(--font-family);
+    display: flex;
+  }
+
+  .seeds-fieldset-list-vertical {
+    flex-direction: column;
+  }
+
+  .seeds-fieldset-list-horizontal {
+    flex-direction: row;
+  }
+
+  .seeds-fieldset-item {
+    box-sizing: border-box;
+    font-family: var(--font-family);
+  }
+
+  .seeds-fieldset-item-vertical {
+    margin-top: var(--space-300);
+  }
+
+  .seeds-fieldset-item-vertical:first-child {
+    margin-top: 0;
+  }
+
+  .seeds-fieldset-item-horizontal {
+    margin-left: var(--space-300);
+  }
+
+  .seeds-fieldset-item-horizontal:first-child {
+    margin-left: 0;
+  }
+}
+
+/* --- seeds-react-form-field --- */
+/**
+ * Seeds FormField 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.
+ *
+ * FormField only contributes the container's vertical layout/margin; the
+ * label, helper text, and error text colors and spacing are owned by the
+ * composed Label/Text children (via their styled-system tokens), so this
+ * class carries layout only and hard-codes no color tokens.
+ *
+ * Usage:
+ *   <div class="seeds-form-field">…label, field, error…</div>
+ */
+
+@layer components {
+  .seeds-form-field {
+    display: block;
+  }
+}
+
+/* --- seeds-react-icon --- */
+/**
+ * Seeds Icon 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.
+ *
+ * The dynamic `size` prop is applied through the `--icon-size` custom property,
+ * set inline by IconTailwind (e.g. style={{ "--icon-size": "16px" }}).
+ *
+ * Usage:
+ *   <span class="Icon seeds-icon" style="--icon-size: 16px">
+ *     <svg class="Icon-svg" />
+ *   </span>
+ */
+
+@layer components {
+  .seeds-icon {
+    display: inline-block;
+    color: inherit;
+    vertical-align: middle;
+    line-height: var(--icon-size);
+  }
+
+  .seeds-icon,
+  .seeds-icon .Icon-svg {
+    height: var(--icon-size);
+    fill: currentColor;
+  }
+
+  /* width only applied when fixedWidth */
+  .seeds-icon-fixed-width,
+  .seeds-icon-fixed-width .Icon-svg {
+    width: var(--icon-size);
+  }
+}
+
+/* --- seeds-react-input --- */
+/**
+ * Seeds Input 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-input seeds-input-primary"><input /></div>
+ *   <div class="seeds-input seeds-input-primary seeds-input-lg"><input /></div>
+ */
+
+@layer components {
+  .seeds-input {
+    box-sizing: border-box;
+    position: relative;
+  }
+
+  .seeds-input input {
+    box-sizing: border-box;
+    width: 100%;
+    border: 1px solid transparent;
+    border-radius: var(--radius-500);
+    background-color: var(--color-form-bg-base);
+    color: var(--color-text-body);
+    outline: none;
+    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);
+    appearance: none;
+    /* This matches the overall height of Button and Select */
+    margin: 0;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    padding: var(--space-300);
+    font-size: var(--font-size-200);
+    line-height: 16px;
+  }
+
+  /* https://stackoverflow.com/questions/14007655/remove-ie10s-clear-field-x-button-on-certain-inputs */
+  .seeds-input input::-ms-clear {
+    display: none;
+  }
+
+  .seeds-input input::-webkit-search-cancel-button {
+    appearance: none;
+  }
+
+  .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);
+  }
+
+  /* Fix for red ring when input is marked required in Firefox */
+  .seeds-input input:not(output):not(:focus):-moz-ui-invalid {
+    box-shadow: none;
+  }
+
+  .seeds-input input::placeholder {
+    color: var(--color-form-placeholder-base);
+    font-style: italic;
+  }
+
+  /* Size modifiers */
+  .seeds-input-lg input {
+    padding: var(--space-350) var(--space-400);
+    font-size: var(--font-size-300);
+    line-height: var(--line-height-300);
+  }
+
+  .seeds-input-sm input {
+    padding: var(--space-200);
+  }
+
+  /* Accessory spacing */
+  .seeds-input-has-before input {
+    padding-left: 40px;
+  }
+
+  .seeds-input-has-after input {
+    padding-right: 40px;
+  }
+
+  /* Appearance */
+  .seeds-input-primary input {
+    border: 1px solid var(--color-form-border-base);
+  }
+
+  /* State borders — declared after appearance so border-color wins */
+  .seeds-input-invalid input {
+    border-color: var(--color-form-border-error);
+  }
+
+  .seeds-input-warning input {
+    border-color: var(--color-form-border-warning);
+  }
+
+  /* Disabled */
+  .seeds-input-disabled {
+    opacity: 0.4;
+  }
+
+  .seeds-input-disabled input {
+    cursor: not-allowed;
+  }
+
+  /* Accessories (before / after / clear button) */
+  .seeds-input-accessory {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    color: var(--color-icon-base);
+    display: flex;
+    align-items: center;
+  }
+
+  .seeds-input-accessory-before {
+    left: var(--space-300);
+  }
+
+  .seeds-input-accessory-after {
+    right: var(--space-300);
+  }
+
+  .seeds-input-accessory-clear {
+    right: 0;
+  }
+}
+
 /* --- seeds-react-link --- */
 /**
  * Seeds Link component classes
@@ -2282,6 +2558,65 @@
 
 }
 
+/* --- seeds-react-numeral --- */
+/**
+ * Seeds Numeral 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:
+ *   <span class="seeds-numeral">1,234</span>
+ *   <span class="seeds-numeral seeds-numeral-abbr">1.2K</span>
+ */
+
+@layer components {
+  .seeds-numeral {
+    font-variant-numeric: tabular-nums;
+  }
+
+  .seeds-numeral-abbr {
+    border-bottom: 1px dotted var(--color-container-border-base);
+  }
+}
+
+/* --- seeds-react-partner-logo --- */
+/**
+ * Seeds Partner Logo component classes
+ * Use these instead of writing out individual Tailwind utility classes.
+ *
+ * Ships as a separate CSS file (pulled in by consumers via the package css
+ * export) — not imported from TS, matching the Button component.
+ *
+ * Sizing is runtime-computed (logo size lookup or the height prop), so it is
+ * applied through inline CSS custom properties set on the element's style attr:
+ *   --seeds-partner-logo-height      container height + line-height + svg height
+ *   --seeds-partner-logo-svg-width   svg width (unset => auto => sizes from viewBox)
+ *
+ * Usage:
+ *   <span class="seeds-partner-logo logo" style="--seeds-partner-logo-height: 16px">
+ *     <svg class="logo-svg">…</svg>
+ *   </span>
+ */
+
+@layer components {
+  .seeds-partner-logo {
+    display: inline-block;
+    color: inherit;
+    vertical-align: middle;
+    height: var(--seeds-partner-logo-height);
+    line-height: var(--seeds-partner-logo-height);
+  }
+
+  .seeds-partner-logo .logo-svg {
+    height: var(--seeds-partner-logo-height);
+    /* unset => auto => svg sizes from its viewBox aspect ratio,
+       matching stylesForSize's empty width declaration */
+    width: var(--seeds-partner-logo-svg-width, auto);
+  }
+}
+
 /* --- seeds-react-profile --- */
 /**
  * Seeds InlineProfile component classes
@@ -2488,6 +2823,129 @@
   }
 }
 
+/* --- seeds-react-radio --- */
+/**
+ * Seeds Radio 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:
+ *   <label class="seeds-radio">
+ *     <span class="seeds-radio-wrapper seeds-radio-checked">
+ *       <input type="radio" class="seeds-radio-input" />
+ *     </span>
+ *     <span class="seeds-radio-label">Label</span>
+ *   </label>
+ */
+
+@layer components {
+  .seeds-radio {
+    display: inline-flex;
+    align-items: center;
+    box-sizing: border-box;
+  }
+
+  .seeds-radio-wrapper {
+    position: relative;
+    width: var(--space-400);
+    height: var(--space-400);
+    cursor: pointer;
+  }
+
+  .seeds-radio-wrapper.seeds-radio-disabled {
+    opacity: 0.4;
+    pointer-events: none;
+    cursor: not-allowed;
+  }
+
+  .seeds-radio-input {
+    box-sizing: border-box;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    appearance: none;
+    cursor: pointer;
+    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,
+      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);
+  }
+
+  .seeds-radio-wrapper:before {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    opacity: 0;
+    transition: opacity var(--duration-fast) ease-in;
+    z-index: 1;
+    pointer-events: none;
+  }
+
+  /* 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 {
+    border-color: var(--color-form-border-base);
+    background-color: var(--color-form-bg-base);
+  }
+
+  .seeds-radio-wrapper:not(.seeds-radio-checked):hover:before,
+  .seeds-radio-wrapper:not(.seeds-radio-checked):focus-within:before {
+    opacity: 1;
+    background-color: var(--color-form-bg-base);
+  }
+
+  /* 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 {
+    opacity: 0;
+  }
+
+  /* Checked state */
+  .seeds-radio-wrapper.seeds-radio-checked .seeds-radio-input {
+    border-color: var(--color-form-border-selected);
+    /* No --color-form-bg-selected token exists; form.background.selected resolves
+       to the same value as form.border.selected in both light and dark themes. */
+    background-color: var(--color-form-border-selected);
+  }
+
+  .seeds-radio-wrapper.seeds-radio-checked:before {
+    opacity: 1;
+    background-color: var(--color-form-bg-base);
+  }
+
+  .seeds-radio-label {
+    margin-left: var(--space-300);
+    font-size: var(--font-size-200);
+    line-height: 1;
+    cursor: pointer;
+    color: var(--color-text-headline);
+  }
+
+  .seeds-radio.seeds-radio-disabled .seeds-radio-label {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+}
+
 /* --- seeds-react-rating --- */
 @layer components {
   .seeds-rating {
@@ -2496,6 +2954,88 @@
   }
 }
 
+/* --- seeds-react-segmented-control --- */
+/**
+ * Seeds SegmentedControl 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. Dark mode works
+ * automatically because the variables below are redefined under
+ * [data-theme="dark"] in theme-all.css.
+ *
+ * Usage:
+ *   <div class="seeds-segmented-control">
+ *     <button class="seeds-segmented-control-item" data-state="on">One</button>
+ *     <button class="seeds-segmented-control-item" data-state="off">Two</button>
+ *   </div>
+ */
+
+/* Rules live in the Tailwind `components` cascade layer so that consumer
+   utility classes (which Tailwind v4 emits in the later `utilities` layer, or
+   unlayered) can override the component's own styles. Without this layer the
+   unlayered component rules would always win the cascade and classes like
+   `p-300`, `mx-200`, or `inline-flex` could not override them. */
+@layer components {
+  .seeds-segmented-control {
+    display: flex;
+    border: 1px solid var(--color-button-secondary-border-base);
+    border-radius: var(--radius-outer);
+    padding: var(--space-100);
+    font-family: var(--font-family);
+  }
+
+  .seeds-segmented-control-disabled {
+    opacity: 0.4;
+    pointer-events: none;
+  }
+
+  .seeds-segmented-control-item {
+    flex: 1 1 auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    border: 0;
+    cursor: pointer;
+    color: var(--color-text-body);
+    background: transparent;
+    font-size: var(--font-size-200);
+    font-weight: var(--font-weight-semibold);
+    /* Matches default line height of Icon. Also matches the overall height of
+       Input, Select, and Button. */
+    line-height: 16px;
+    border-radius: var(--radius-inner);
+    /* To match the height of buttons... 350 padding - 2px top and bottom padding
+       of the parent - 1px border on top and bottom */
+    padding: calc(var(--space-350) - 6px);
+    transition: all var(--duration-fast);
+  }
+
+  .seeds-segmented-control-item + .seeds-segmented-control-item {
+    margin-left: var(--space-100);
+  }
+
+  .seeds-segmented-control-item:hover {
+    background-color: var(--color-listItem-bg-hover);
+  }
+
+  .seeds-segmented-control-item[data-state="on"] {
+    color: var(--color-text-inverse);
+    background-color: var(--color-listItem-bg-selected);
+  }
+
+  .seeds-segmented-control-item[data-state="on"]:hover {
+    background-color: var(--color-listItem-bg-selected);
+  }
+
+  .seeds-segmented-control-item:disabled,
+  .seeds-segmented-control-item[data-disabled] {
+    opacity: 0.4;
+    pointer-events: none;
+  }
+}
+
 /* --- seeds-react-select --- */
 /**
  * Seeds Select component classes
@@ -2780,6 +3320,147 @@
   }
 }
 
+/* --- seeds-react-switch --- */
+/**
+ * Seeds Switch 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-switch" role="switch" aria-checked="true"></button>
+ *   <button class="seeds-switch loading" role="switch" aria-checked="false"></button>
+ */
+
+@layer components {
+  .seeds-switch {
+    position: relative;
+    display: inline-flex;
+    align-self: center;
+    width: 40px;
+    height: 24px;
+    margin: 0;
+    padding: var(--space-100) var(--space-200);
+    vertical-align: middle;
+    appearance: none;
+    background-color: var(--color-form-bg-base);
+    border-radius: 16px;
+    outline: none;
+    cursor: pointer;
+    transition: background-color var(--duration-fast) var(--ease-ease_inout);
+    border: 1px solid var(--color-form-border-base);
+    white-space: nowrap;
+    overflow: hidden;
+  }
+
+  /* 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);
+  }
+
+  /* Base styles for circle element */
+  .seeds-switch[aria-checked]::after {
+    display: block;
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    content: "";
+    transition: transform var(--duration-fast) var(--ease-ease_inout);
+  }
+
+  .seeds-switch[aria-checked].loading {
+    cursor: not-allowed;
+    pointer-events: none;
+    background-size: contain;
+    background-color: var(--color-form-bg-base);
+  }
+
+  .seeds-switch[aria-checked].loading::after {
+    position: absolute;
+    box-sizing: content-box;
+    width: 8px;
+    height: 8px;
+    border-radius: var(--radius-pill);
+    border: 3px dotted var(--color-icon-base);
+    background-color: transparent;
+    animation: seeds-switch-loading 2s linear infinite;
+  }
+
+  /* Checked State */
+  .seeds-switch[aria-checked="true"] {
+    color: var(--color-text-body);
+    text-align: left;
+    border-color: var(--color-form-border-selected);
+    background-color: var(--color-form-bg-selected);
+  }
+
+  .seeds-switch[aria-checked="true"] .Icon {
+    position: absolute;
+    top: 50%;
+    left: 4px;
+    transform: translate(0, -50%);
+    color: var(--color-icon-inverse);
+  }
+
+  .seeds-switch[aria-checked="true"]::after {
+    background-color: var(--color-icon-inverse);
+    opacity: 1;
+    transform: translate(100%, 6%);
+  }
+
+  .seeds-switch[aria-checked="true"].loading::after {
+    top: 4px;
+    right: 5px;
+  }
+
+  .seeds-switch[aria-checked="true"]:hover::after,
+  .seeds-switch[aria-checked="true"]:focus::after {
+    transform: translate(90%, 6%);
+  }
+
+  /* Unchecked State */
+  .seeds-switch[aria-checked="false"]::after {
+    background-color: var(--color-icon-base);
+    opacity: 0.64;
+    transform: translate(0%, 6%);
+  }
+
+  .seeds-switch[aria-checked="false"].loading::after {
+    top: 4px;
+    left: 5px;
+  }
+
+  .seeds-switch[aria-checked="false"]:hover::after,
+  .seeds-switch[aria-checked="false"]:focus::after {
+    transform: translate(10%, 6%);
+  }
+
+  /* Disabled State Styles */
+  .seeds-switch:disabled {
+    opacity: 0.4;
+    pointer-events: none;
+    cursor: not-allowed;
+  }
+
+  .seeds-switch:disabled[aria-checked="true"]:hover,
+  .seeds-switch:disabled[aria-checked="true"]:focus {
+    background-color: var(--color-container-bg-selected);
+  }
+
+  @keyframes seeds-switch-loading {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+}
+
 /* --- seeds-react-text --- */
 /**
  * Seeds Text component classes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/racine",
-  "version": "31.7.3",
+  "version": "31.7.5",
   "license": "MIT",
   "engines": {
     "node": ">=18"
@@ -73,74 +73,74 @@
   },
   "dependencies": {
     "@size-limit/file": "^11.1.6",
-    "@sproutsocial/seeds-react-accordion": "^0.4.50",
-    "@sproutsocial/seeds-react-avatar": "^1.1.19",
-    "@sproutsocial/seeds-react-badge": "^2.0.36",
-    "@sproutsocial/seeds-react-banner": "^1.1.24",
-    "@sproutsocial/seeds-react-box": "^1.1.23",
-    "@sproutsocial/seeds-react-breadcrumb": "^1.1.9",
-    "@sproutsocial/seeds-react-button": "^2.2.3",
-    "@sproutsocial/seeds-react-card": "^1.1.44",
-    "@sproutsocial/seeds-react-character-counter": "^1.0.4",
-    "@sproutsocial/seeds-react-chart-legend": "^1.0.43",
-    "@sproutsocial/seeds-react-chat-bubble": "^0.2.2",
-    "@sproutsocial/seeds-react-checkbox": "^1.3.44",
+    "@sproutsocial/seeds-react-accordion": "^0.4.52",
+    "@sproutsocial/seeds-react-avatar": "^1.1.20",
+    "@sproutsocial/seeds-react-badge": "^2.0.37",
+    "@sproutsocial/seeds-react-banner": "^1.1.25",
+    "@sproutsocial/seeds-react-box": "^1.1.24",
+    "@sproutsocial/seeds-react-breadcrumb": "^1.1.10",
+    "@sproutsocial/seeds-react-button": "^2.2.4",
+    "@sproutsocial/seeds-react-card": "^1.1.45",
+    "@sproutsocial/seeds-react-character-counter": "^1.0.5",
+    "@sproutsocial/seeds-react-chart-legend": "^1.0.44",
+    "@sproutsocial/seeds-react-chat-bubble": "^0.2.3",
+    "@sproutsocial/seeds-react-checkbox": "^1.3.45",
     "@sproutsocial/seeds-react-collapsible": "^2.0.1",
-    "@sproutsocial/seeds-react-container": "^0.3.17",
-    "@sproutsocial/seeds-react-content-block": "^0.5.17",
-    "@sproutsocial/seeds-react-content-header": "^0.2.22",
-    "@sproutsocial/seeds-react-data-table": "^2.6.25",
-    "@sproutsocial/seeds-react-datepicker": "^1.0.41",
-    "@sproutsocial/seeds-react-drawer": "^2.2.10",
-    "@sproutsocial/seeds-react-duration": "^1.0.26",
-    "@sproutsocial/seeds-react-empty-state": "^1.0.25",
-    "@sproutsocial/seeds-react-fieldset": "^1.0.25",
-    "@sproutsocial/seeds-react-form-field": "^1.1.19",
-    "@sproutsocial/seeds-react-grid": "^0.2.7",
+    "@sproutsocial/seeds-react-container": "^0.3.18",
+    "@sproutsocial/seeds-react-content-block": "^0.5.18",
+    "@sproutsocial/seeds-react-content-header": "^0.2.23",
+    "@sproutsocial/seeds-react-data-table": "^2.6.26",
+    "@sproutsocial/seeds-react-datepicker": "^1.0.42",
+    "@sproutsocial/seeds-react-drawer": "^2.2.11",
+    "@sproutsocial/seeds-react-duration": "^1.0.27",
+    "@sproutsocial/seeds-react-empty-state": "^1.0.26",
+    "@sproutsocial/seeds-react-fieldset": "^1.0.27",
+    "@sproutsocial/seeds-react-form-field": "^1.1.21",
+    "@sproutsocial/seeds-react-grid": "^0.2.8",
     "@sproutsocial/seeds-react-hooks": "^3.2.4",
-    "@sproutsocial/seeds-react-icon": "^2.4.2",
-    "@sproutsocial/seeds-react-image": "^1.0.23",
-    "@sproutsocial/seeds-react-indicator": "^1.0.42",
-    "@sproutsocial/seeds-react-input": "^1.5.29",
-    "@sproutsocial/seeds-react-keyboard-key": "^1.0.25",
-    "@sproutsocial/seeds-react-label": "^1.0.25",
-    "@sproutsocial/seeds-react-link": "^1.1.15",
-    "@sproutsocial/seeds-react-list": "^0.3.29",
-    "@sproutsocial/seeds-react-loader": "^1.0.25",
-    "@sproutsocial/seeds-react-loader-button": "^1.0.48",
-    "@sproutsocial/seeds-react-message": "^1.0.51",
+    "@sproutsocial/seeds-react-icon": "^2.4.3",
+    "@sproutsocial/seeds-react-image": "^1.0.24",
+    "@sproutsocial/seeds-react-indicator": "^1.0.43",
+    "@sproutsocial/seeds-react-input": "^1.5.31",
+    "@sproutsocial/seeds-react-keyboard-key": "^1.0.26",
+    "@sproutsocial/seeds-react-label": "^1.0.26",
+    "@sproutsocial/seeds-react-link": "^1.1.16",
+    "@sproutsocial/seeds-react-list": "^0.3.30",
+    "@sproutsocial/seeds-react-loader": "^1.0.26",
+    "@sproutsocial/seeds-react-loader-button": "^1.0.49",
+    "@sproutsocial/seeds-react-message": "^1.0.52",
     "@sproutsocial/seeds-react-mixins": "^4.3.9",
-    "@sproutsocial/seeds-react-modal": "^2.5.25",
+    "@sproutsocial/seeds-react-modal": "^2.5.26",
     "@sproutsocial/seeds-react-narrative-kit": "^0.6.0",
-    "@sproutsocial/seeds-react-numeral": "^1.0.50",
-    "@sproutsocial/seeds-react-pagination": "^0.1.23",
-    "@sproutsocial/seeds-react-panel": "^1.0.3",
-    "@sproutsocial/seeds-react-peek-in": "^0.3.2",
-    "@sproutsocial/seeds-react-partner-logo": "^1.7.15",
-    "@sproutsocial/seeds-react-popout": "^2.5.11",
+    "@sproutsocial/seeds-react-numeral": "^1.0.51",
+    "@sproutsocial/seeds-react-pagination": "^0.1.24",
+    "@sproutsocial/seeds-react-panel": "^1.0.4",
+    "@sproutsocial/seeds-react-peek-in": "^0.3.3",
+    "@sproutsocial/seeds-react-partner-logo": "^1.7.16",
+    "@sproutsocial/seeds-react-popout": "^2.5.12",
     "@sproutsocial/seeds-react-portal": "^1.2.0",
-    "@sproutsocial/seeds-react-progress": "^0.2.10",
-    "@sproutsocial/seeds-react-radio": "^1.3.25",
-    "@sproutsocial/seeds-react-rating": "^1.0.43",
-    "@sproutsocial/seeds-react-segmented-control": "^1.1.24",
+    "@sproutsocial/seeds-react-progress": "^0.2.11",
+    "@sproutsocial/seeds-react-radio": "^1.3.27",
+    "@sproutsocial/seeds-react-rating": "^1.0.44",
+    "@sproutsocial/seeds-react-segmented-control": "^1.1.25",
     "@sproutsocial/seeds-react-spot-illustration": "^1.2.4",
-    "@sproutsocial/seeds-react-select": "^1.1.43",
-    "@sproutsocial/seeds-react-skeleton": "^1.1.23",
-    "@sproutsocial/seeds-react-stack": "^1.0.22",
-    "@sproutsocial/seeds-react-switch": "^1.2.41",
-    "@sproutsocial/seeds-react-system-props": "^3.1.1",
-    "@sproutsocial/seeds-react-table": "^1.0.44",
-    "@sproutsocial/seeds-react-tabs": "^1.4.13",
-    "@sproutsocial/seeds-react-text": "^1.5.0",
-    "@sproutsocial/seeds-react-textarea": "^1.0.24",
-    "@sproutsocial/seeds-react-toast": "^1.0.44",
-    "@sproutsocial/seeds-react-token": "^1.5.9",
-    "@sproutsocial/seeds-react-token-input": "^1.4.51",
-    "@sproutsocial/seeds-react-tooltip": "^1.1.29",
+    "@sproutsocial/seeds-react-select": "^1.1.44",
+    "@sproutsocial/seeds-react-skeleton": "^1.1.24",
+    "@sproutsocial/seeds-react-stack": "^1.0.23",
+    "@sproutsocial/seeds-react-switch": "^1.2.43",
+    "@sproutsocial/seeds-react-system-props": "^3.1.2",
+    "@sproutsocial/seeds-react-table": "^1.0.45",
+    "@sproutsocial/seeds-react-tabs": "^1.4.14",
+    "@sproutsocial/seeds-react-text": "^1.5.1",
+    "@sproutsocial/seeds-react-textarea": "^1.0.25",
+    "@sproutsocial/seeds-react-toast": "^1.0.45",
+    "@sproutsocial/seeds-react-token": "^1.5.10",
+    "@sproutsocial/seeds-react-token-input": "^1.4.53",
+    "@sproutsocial/seeds-react-tooltip": "^1.1.30",
     "@sproutsocial/seeds-react-theme": "^4.2.0",
     "@sproutsocial/seeds-react-theme-provider": "^1.1.22",
     "@sproutsocial/seeds-react-utilities": "^4.3.0",
-    "@sproutsocial/seeds-react-visually-hidden": "^1.0.24",
+    "@sproutsocial/seeds-react-visually-hidden": "^1.0.25",
     "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.3",
+    "@sproutsocial/seeds-react-menu": "^1.16.5",
     "@sproutsocial/seeds-react-testing-library": "*",
     "@sproutsocial/seeds-space": "^0.8.1",
     "@sproutsocial/seeds-testing": "*",