@clickhouse/click-ui 0.7.0 → 0.9.0

package/dist/esm/click-ui.css

@@ -132,6 +132,16 @@
   width: var(--click-image-xxl-size-width);
   height: var(--click-image-xxl-size-height);
 }
+/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. codeInline) */
+
+.inline__jYdpl {
+  padding: 0 var(--click-codeInline-space-x);
+  border: 1px solid var(--click-codeInline-color-stroke-default);
+  border-radius: var(--click-codeInline-radii-all);
+  background: var(--click-codeInline-color-background-default);
+  color: var(--click-codeInline-color-text-default);
+  font: var(--click-codeInline-typography-text-default);
+}
 /* Design tokens use camelCase segments (e.g. fieldText). */
 /* stylelint-disable custom-property-pattern */
 /* The original styled-components used vendor-prefixed autofill/appearance
@@ -353,6 +363,57 @@
   gap: var(--click-field-space-gap);
   white-space: nowrap;
 }
+.form-root__BT-Th {
+  display: flex;
+  width: 100%;
+  flex-direction: column-reverse;
+  align-items: flex-start;
+  gap: var(--click-field-space-gap);
+}
+
+.form-root__BT-Th * {
+  outline: none;
+  box-shadow: none;
+}
+
+.form-root_direction_column-reverse__CqP8o {
+  flex-direction: column-reverse;
+}
+
+.form-root_direction_column__1qZoL {
+  flex-direction: column;
+}
+
+.form-root_direction_row-reverse__TlRP3 {
+  flex-direction: row-reverse;
+}
+
+.form-root_direction_row__D172C {
+  flex-direction: row;
+}
+
+.form-root_add-label-padding__-HfgB label {
+  padding-top: calc(var(--click-field-space-y) + 1px);
+  line-height: 1lh;
+}
+.form-element-container__cy-tb {
+  display: flex;
+  /* stylelint-disable plugin/no-unsupported-browser-features, declaration-property-value-no-unknown -- the original rule used this same
+   width fallback chain (100% → -webkit-fill-available → fill-available →
+   stretch) so the container fills the available inline space. */
+  width: 100%;
+  width: -webkit-fill-available;
+  width: fill-available;
+  width: stretch;
+  /* stylelint-enable plugin/no-unsupported-browser-features, declaration-property-value-no-unknown */
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--click-field-space-gap);
+}
+.error__Wvrfq {
+  color: var(--click-field-color-label-error);
+  font: var(--click-field-typography-label-error);
+}
 .label__RaRvM {
   color: var(--click-field-color-label-default);
   font: var(--click-field-typography-label-default);
@@ -385,6 +446,100 @@
   color: var(--click-field-color-label-disabled);
   font: var(--click-field-typography-label-disabled);
 }
+.loading__5BGdj {
+  transform: scaleX(-1);
+}
+
+.loading-animated__hAN7V {
+  animation: loaders-spin__bMTqx 1s infinite linear;
+}
+
+.horizontal-loading__3ooCL circle {
+  animation-duration: 1.5s;
+  animation-iteration-count: infinite;
+  animation-name: horizontal-loading__3ooCL;
+  animation-timing-function: linear;
+}
+
+.horizontal-loading__3ooCL circle:nth-child(1) {
+  animation-name: loaders-horizontal-circle-1__GJ-tO;
+}
+
+.horizontal-loading__3ooCL circle:nth-child(2) {
+  animation-name: loaders-horizontal-circle-2__QOcb2;
+}
+
+.horizontal-loading__3ooCL circle:nth-child(3) {
+  animation-name: loaders-horizontal-circle-3__R51yU;
+}
+
+@keyframes loaders-spin__bMTqx {
+  from {
+    transform: rotate(0deg) scaleX(-1);
+  }
+
+  to {
+    transform: rotate(360deg) scaleX(-1);
+  }
+}
+
+@keyframes loaders-horizontal-circle-1__GJ-tO {
+  0 {
+    r: 0;
+  }
+
+  30% {
+    r: 1.5;
+  }
+
+  60% {
+    r: 0;
+  }
+
+  100% {
+    r: 0;
+  }
+}
+
+@keyframes loaders-horizontal-circle-2__QOcb2 {
+  0 {
+    r: 0;
+  }
+
+  20% {
+    r: 0;
+  }
+
+  40% {
+    r: 1.5;
+  }
+
+  80% {
+    r: 0;
+  }
+
+  100% {
+    r: 0;
+  }
+}
+
+@keyframes loaders-horizontal-circle-3__R51yU {
+  0 {
+    r: 0;
+  }
+
+  40% {
+    r: 0;
+  }
+
+  80% {
+    r: 1.5;
+  }
+
+  100% {
+    r: 0;
+  }
+}
 /* Kept at zero specificity via :where() so that modifier classes (e.g.
    .container_padding_md) and downstream styled-components overrides on a
    styled(Container) both win without needing a specificity hack — Container is
@@ -879,6 +1034,27 @@
 .generic-menu-item__ApV25[hidden] {
   display: none;
 }
+/* stylelint-disable plugin/no-unsupported-browser-features, declaration-property-value-no-unknown -- the original rule used this same
+   width fallback chain (100% → -webkit-fill-available → fill-available →
+   stretch) so the content fills the available inline space. */
+.ellipsis-content__jsw7w {
+  display: inline-block;
+  width: 100%;
+  width: -webkit-fill-available;
+  width: fill-available;
+  width: stretch;
+  overflow: hidden;
+  justify-content: flex-start;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  vertical-align: text-bottom;
+}
+/* stylelint-enable plugin/no-unsupported-browser-features, declaration-property-value-no-unknown */
+
+.ellipsis-content__jsw7w > *:not(button) {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 .dropdown-menu-content__Qc6mk {
   z-index: 1;
   /* stylelint-disable-next-line custom-property-pattern -- design tokens use camelCase (e.g. genericMenu) */
@@ -892,6 +1068,29 @@
   position: relative;
   min-height: 32px;
 }
+
+.dropdown-trigger__FUHvM {
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features -- `fit-content`
+     keyword on `width` is widely supported on evergreen browsers; the original
+     rule used the same value. */
+  width: fit-content;
+  cursor: pointer;
+}
+
+.dropdown-trigger__FUHvM[disabled] {
+  cursor: not-allowed;
+}
+
+.dropdown-trigger__FUHvM:focus-visible {
+  outline: 2px solid var(--click-global-color-outline-default);
+  outline-offset: 2px;
+}
+
+.dropdown-group__nvxHE {
+  width: 100%;
+  /* stylelint-disable-next-line custom-property-pattern -- design tokens use camelCase (e.g. genericMenu) */
+  border-bottom: 1px solid var(--click-genericMenu-item-color-default-stroke-default);
+}
 /* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. iconButton) */
 
 .iconbutton__G-cEu {
@@ -1037,6 +1236,122 @@
   color: var(--click-button-iconButton-color-disabled-text-default);
   cursor: not-allowed;
 }
+.panel__4VWNp {
+  --panel-width: initial;
+  --panel-height: initial;
+
+  display: flex;
+  width: var(--panel-width, auto);
+  height: var(--panel-height, auto);
+}
+
+.panel_cursor__YcG6H {
+  cursor: var(--panel-cursor);
+}
+
+.panel_orientation_horizontal__nB0T- {
+  flex-flow: row wrap;
+}
+
+.panel_orientation_vertical__7EE-3 {
+  flex-flow: column;
+}
+
+.panel_align-items_start__Xr8t8 {
+  align-items: flex-start;
+}
+
+.panel_align-items_center__5LLFt {
+  align-items: center;
+}
+
+.panel_align-items_end__qi2wL {
+  align-items: flex-end;
+}
+
+.panel_color_default__pIwqp {
+  background-color: var(--click-panel-color-background-default);
+}
+
+.panel_color_muted__fVquA {
+  background-color: var(--click-panel-color-background-muted);
+}
+
+.panel_color_transparent__fIvMl {
+  background-color: var(--click-panel-color-background-transparent);
+}
+
+.panel_radii_none__JyEKv {
+  border-radius: var(--click-panel-radii-none);
+}
+
+.panel_radii_sm__b7A6v {
+  border-radius: var(--click-panel-radii-sm);
+}
+
+.panel_radii_md__5Pzsu {
+  border-radius: var(--click-panel-radii-md);
+}
+
+.panel_radii_lg__q1FPq {
+  border-radius: var(--click-panel-radii-lg);
+}
+
+.panel_padding_none__OGHd- {
+  padding: var(--click-panel-space-y-none);
+}
+
+.panel_padding_xs__U6RZS {
+  padding: var(--click-panel-space-y-xs);
+}
+
+.panel_padding_sm__rKoLB {
+  padding: var(--click-panel-space-y-sm);
+}
+
+.panel_padding_md__9PCRi {
+  padding: var(--click-panel-space-y-md);
+}
+
+.panel_padding_lg__aKwpW {
+  padding: var(--click-panel-space-y-lg);
+}
+
+.panel_padding_xl__Q1IVo {
+  padding: var(--click-panel-space-y-xl);
+}
+
+.panel_border__dGg-4 {
+  border: 1px solid var(--click-global-color-stroke-default);
+}
+
+.panel_shadow__8WSfn {
+  box-shadow: var(--shadow-1);
+}
+
+.panel_gap_none__-LwaY {
+  gap: var(--click-panel-space-gap-none);
+}
+
+.panel_gap_xs__sbYm7 {
+  gap: var(--click-panel-space-gap-xs);
+}
+
+.panel_gap_sm__8NpJA {
+  gap: var(--click-panel-space-gap-sm);
+}
+
+.panel_gap_md__RM459 {
+  gap: var(--click-panel-space-gap-md);
+}
+
+.panel_gap_lg__MNfVH {
+  gap: var(--click-panel-space-gap-lg);
+}
+
+.panel_gap_xl__Te3bQ {
+  gap: var(--click-panel-space-gap-xl);
+}
 .tabs__trigger__JHqK4 {
   padding: var(--click-tabs-space-y) var(--click-tabs-space-x);
   border: none;
@@ -1952,6 +2267,103 @@
   color: inherit;
   cursor: pointer;
 }
+/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. genericMenu, sectionHeader) */
+
+.popover-content__arM9z {
+  display: flex;
+  width: var(--radix-popover-trigger-width);
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 5px;
+}
+
+.select-group-container__DGzBt {
+  /* stylelint-disable plugin/no-unsupported-browser-features, declaration-property-value-no-unknown -- the original rule used this same width fallback chain so the container fills the available inline space. */
+  display: flex;
+  width: -webkit-fill-available;
+  width: fill-available;
+  width: stretch;
+  /* stylelint-enable plugin/no-unsupported-browser-features, declaration-property-value-no-unknown */
+  overflow: hidden;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  background: transparent;
+  color: var(--click-genericMenu-item-color-default-text-muted);
+  font: var(--click-genericMenu-item-typography-sectionHeader-default);
+}
+
+.select-group-container__DGzBt[aria-selected] {
+  outline: none;
+}
+
+.select-group-container__DGzBt[hidden] {
+  display: none;
+}
+
+.select-group-name__-5Apt {
+  display: flex;
+  width: 100%;
+  padding: var(--click-genericMenu-sectionHeader-space-top)
+    var(--click-genericMenu-item-space-x)
+    var(--click-genericMenu-sectionHeader-space-bottom);
+  overflow: hidden;
+  flex-direction: column;
+  gap: var(--click-genericMenu-item-space-gap);
+  border-bottom: 1px solid var(--click-genericMenu-item-color-default-stroke-default);
+  color: var(--click-genericMenu-item-color-default-text-muted);
+  font: var(--click-genericMenu-item-typography-sectionHeader-default);
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.select-group-content__A5aqT {
+  width: inherit;
+}
+
+.select-list-content__BPiuX {
+  width: inherit;
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features, declaration-property-value-no-unknown, declaration-property-value-keyword-no-deprecated -- the original used `overflow: overlay` (modern browsers alias it to `auto`); preserved for byte-for-byte parity. */
+  overflow: overlay;
+  flex: 1;
+}
+
+.select-no-data-container__IqJP5 {
+  display: block;
+  padding: var(--click-genericMenu-button-space-y) var(--click-genericMenu-item-space-x);
+  overflow: hidden;
+  border: none;
+  background: var(--click-genericMenu-button-color-background-default);
+  color: var(--click-genericMenu-button-color-label-default);
+  font: var(--click-genericMenu-button-typography-label-default);
+  text-align: left;
+  white-space: nowrap;
+  cursor: default;
+  text-overflow: ellipsis;
+}
+
+.select-no-data-container__IqJP5[hidden='true'] {
+  display: none;
+}
+
+.select-list__Az2Cn {
+  display: flex;
+  width: inherit;
+  max-height: var(--radix-popover-content-available-height);
+  flex-direction: column;
+  border: 1px solid var(--click-genericMenu-item-color-default-stroke-default);
+  border-radius: 0.25rem;
+  background: var(--click-genericMenu-item-color-default-background-default);
+  box-shadow: var(--click-genericMenu-panel-shadow-default);
+}
+
+.check-icon__YHNzk {
+  opacity: 0;
+}
+
+.check-icon_show-check__pYenS {
+  opacity: 1;
+}
 .separator__mz39H[data-orientation='horizontal'] {
   width: 100%;
   border-top: 0.0625rem solid var(--click-separator-color-stroke-default);
@@ -2403,11 +2815,189 @@
   color: var(--big-stat-title-color);
   font: var(--big-stat-title-font);
 }
-.header__Cn2aH {
-  max-width: 100%;
-  gap: inherit;
-}
-
+/* Kept at zero specificity via :where() so that downstream styled-components
+   overrides on a styled(BaseButton) (SplitButton's PrimaryButton/SecondaryButton
+   override padding, border-radius, font, background, color, border, and width)
+   win without needing a specificity hack — BaseButton is a CSS Module, whose rules
+   otherwise beat equal-specificity styled-components by source order. SplitButton
+   cannot be fully migrated to fix the collision in the consumer because it renders
+   as={Dropdown.Trigger}/as={Dropdown.Content} and Dropdown is still on
+   styled-components, so :where() is the correct call for this coupled base. */
+:where(.base-button__6Tguv) {
+  display: flex;
+  padding: var(--click-button-basic-space-y) var(--click-button-basic-space-x);
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  gap: var(--click-button-basic-space-gap);
+  border-radius: var(--click-button-radii-all);
+  font: var(--click-button-basic-typography-label-default);
+  cursor: pointer;
+}
+
+:where(.base-button__6Tguv):hover {
+  font: var(--click-button-basic-typography-label-hover);
+}
+
+:where(.base-button__6Tguv):active,
+:where(.base-button__6Tguv):focus {
+  font: var(--click-button-basic-typography-label-active);
+}
+
+:where(.base-button__6Tguv):focus-visible {
+  outline: 2px solid var(--click-global-color-outline-default);
+  outline-offset: 2px;
+}
+
+:where(.base-button__6Tguv):disabled,
+:where(.base-button__6Tguv):disabled:hover,
+:where(.base-button__6Tguv):disabled:active {
+  font: var(--click-button-basic-typography-label-disabled);
+  cursor: not-allowed;
+}
+.split-button__EX3XI {
+  display: inline-flex;
+  width: revert;
+  overflow: hidden;
+  align-items: center;
+  border: 1px solid var(--split-stroke-default);
+  border-radius: var(--click-button-radii-all);
+  user-select: none;
+}
+
+.split-button_type_primary__n4Kxb {
+  --split-stroke-default: var(--click-button-split-primary-stroke-default);
+  --split-stroke-hover: var(--click-button-split-primary-stroke-hover);
+  --split-stroke-active: var(--click-button-split-primary-stroke-active);
+  --split-stroke-disabled: var(--click-button-split-primary-stroke-disabled);
+  --split-bg-main-default: var(--click-button-split-primary-background-main-default);
+  --split-bg-main-hover: var(--click-button-split-primary-background-main-hover);
+  --split-bg-main-active: var(--click-button-split-primary-background-main-active);
+  --split-bg-main-disabled: var(--click-button-split-primary-background-main-disabled);
+  --split-bg-action-default: var(--click-button-split-primary-background-action-default);
+  --split-bg-action-hover: var(--click-button-split-primary-background-action-hover);
+  --split-bg-action-active: var(--click-button-split-primary-background-action-active);
+  --split-bg-action-disabled: var(--click-button-split-primary-background-action-disabled);
+  --split-text-default: var(--click-button-split-primary-text-default);
+  --split-text-hover: var(--click-button-split-primary-text-hover);
+  --split-text-active: var(--click-button-split-primary-text-active);
+  --split-text-disabled: var(--click-button-split-primary-text-disabled);
+}
+
+.split-button_type_secondary__CMY5T {
+  --split-stroke-default: var(--click-button-split-secondary-stroke-default);
+  --split-stroke-hover: var(--click-button-split-secondary-stroke-hover);
+  --split-stroke-active: var(--click-button-split-secondary-stroke-active);
+  --split-stroke-disabled: var(--click-button-split-secondary-stroke-disabled);
+  --split-bg-main-default: var(--click-button-split-secondary-background-main-default);
+  --split-bg-main-hover: var(--click-button-split-secondary-background-main-hover);
+  --split-bg-main-active: var(--click-button-split-secondary-background-main-active);
+  --split-bg-main-disabled: var(--click-button-split-secondary-background-main-disabled);
+  --split-bg-action-default: var(--click-button-split-secondary-background-action-default);
+  --split-bg-action-hover: var(--click-button-split-secondary-background-action-hover);
+  --split-bg-action-active: var(--click-button-split-secondary-background-action-active);
+  --split-bg-action-disabled: var(--click-button-split-secondary-background-action-disabled);
+  --split-text-default: var(--click-button-split-secondary-text-default);
+  --split-text-hover: var(--click-button-split-secondary-text-hover);
+  --split-text-active: var(--click-button-split-secondary-text-active);
+  --split-text-disabled: var(--click-button-split-secondary-text-disabled);
+}
+
+.split-button_fill-width__4-oog {
+  width: 100%;
+}
+
+.split-button__EX3XI:hover {
+  border-color: var(--split-stroke-hover);
+}
+
+.split-button__EX3XI:focus-within {
+  border-color: var(--split-stroke-active);
+}
+
+/* stylelint-disable no-descending-specificity -- disabled state intentionally
+   defined after hover/focus-within to mirror the source cascade order; the
+   pre-migration original omitted the hover/focus-within rules entirely when
+   disabled, so the disabled border-color must win over them. */
+.split-button_disabled__597A-,
+.split-button_disabled__597A-:hover,
+.split-button_disabled__597A-:focus-within {
+  border-color: var(--split-stroke-disabled);
+  cursor: not-allowed;
+}
+/* stylelint-enable no-descending-specificity */
+
+.split-button__primary__1RIoP {
+  width: revert;
+  padding: var(--click-button-split-space-y) var(--click-button-split-space-x);
+  justify-content: center;
+  align-items: center;
+  align-self: stretch;
+  border: none;
+  border-radius: 0;
+  background: var(--split-bg-main-default);
+  color: var(--split-text-default);
+  font: var(--click-button-split-typography-label-default);
+}
+
+.split-button__primary_fill-width__RRkLi {
+  width: 100%;
+}
+
+.split-button__primary__1RIoP:hover {
+  background: var(--split-bg-main-hover);
+  color: var(--split-text-hover);
+  font: var(--click-button-split-typography-label-hover);
+}
+
+.split-button__primary__1RIoP:focus {
+  background: var(--split-bg-main-active);
+  color: var(--split-text-active);
+  font: var(--click-button-split-typography-label-active);
+}
+
+.split-button__primary__1RIoP:disabled {
+  background: var(--split-bg-main-disabled);
+  color: var(--split-text-disabled);
+  font: var(--click-button-split-typography-label-disabled);
+}
+
+.split-button__secondary__CYtzX {
+  padding: var(--click-button-split-icon-space-y) var(--click-button-split-icon-space-x);
+  align-self: stretch;
+  border: none;
+  border-radius: 0;
+  background: var(--split-bg-action-default);
+  color: var(--split-text-default);
+}
+
+.split-button__secondary__CYtzX:hover {
+  background: var(--split-bg-action-hover);
+  color: var(--split-text-hover);
+}
+
+.split-button__secondary__CYtzX:focus {
+  background: var(--split-bg-action-active);
+  color: var(--split-text-active);
+}
+
+.split-button__secondary__CYtzX[data-disabled] {
+  background: var(--split-bg-action-disabled);
+  color: var(--split-text-disabled);
+}
+
+.split-button__button-data__8yyZR {
+  width: auto;
+}
+
+.split-button__dropdown-content__nmia- {
+  min-width: var(--split-button-dropdown-min-width, 0);
+}
+.header__Cn2aH {
+  max-width: 100%;
+  gap: inherit;
+}
+
 .description__4EWfD {
   display: flex;
   width: 100%;
@@ -2900,6 +3490,58 @@ div:active + .topbadge__E79OZ {
 .title_align_right__483BF {
   text-align: right;
 }
+.background__q--1v {
+  display: flex;
+  padding: 1px;
+  border-radius: var(--click-card-promotion-radii-all);
+  background-image: var(--click-card-promotion-color-stroke-default);
+  box-shadow: var(--click-card-shadow);
+}
+
+.background__q--1v:focus {
+  background: var(--click-card-promotion-color-stroke-focus);
+}
+
+.wrapper__u2j3r {
+  display: flex;
+  width: 100%;
+  padding: var(--click-card-promotion-space-y) var(--click-card-promotion-space-x);
+  justify-content: flex-start;
+  align-items: center;
+  gap: var(--click-card-promotion-space-gap);
+  border-radius: var(--click-card-promotion-radii-all);
+  background: var(--click-card-promotion-color-background-default);
+  color: var(--click-card-promotion-color-text-default);
+  cursor: pointer;
+  transition: 0.2s ease-in-out all;
+}
+
+.wrapper__u2j3r:hover {
+  background: var(--click-card-promotion-color-background-hover);
+  color: var(--click-card-promotion-color-text-hover);
+}
+
+.wrapper__u2j3r:active,
+.wrapper__u2j3r:focus {
+  background: var(--click-card-promotion-color-background-active);
+  color: var(--click-card-promotion-color-text-active);
+}
+
+.cardicon__EPonC {
+  width: var(--click-card-promotion-icon-size-all);
+  height: var(--click-card-promotion-icon-size-all);
+  color: var(--click-card-promotion-color-icon-default);
+}
+
+.dismisswrapper__CeHgg {
+  display: flex;
+  margin-left: auto;
+  align-items: center;
+  border: none;
+  background-color: transparent;
+  color: inherit;
+  cursor: pointer;
+}
 .wrapper__x6K6U {
   display: flex;
   min-width: 320px;
@@ -3146,6 +3788,54 @@ div:active + .topbadge__E79OZ {
   cursor: not-allowed;
 }
 /* stylelint-enable no-descending-specificity */
+.codeblock__pRWOC {
+  position: relative;
+  width: 100%;
+  /* stylelint-disable plugin/no-unsupported-browser-features, declaration-property-value-no-unknown -- the original
+     styled-components rule used this same width fallback chain (100% →
+     -webkit-fill-available → fill-available → stretch) so the block fills the
+     available inline space. */
+  width: -webkit-fill-available;
+  width: fill-available;
+  width: stretch;
+  /* stylelint-enable plugin/no-unsupported-browser-features, declaration-property-value-no-unknown */
+  color: var(--codeblock-numbers);
+}
+
+/* This class is applied alongside the IconButton module classes on the same
+   <button>. `color`, `padding`, and `border` are set by both; the
+   styled-components original won them via source order. Double the class so
+   those three win regardless of CSS-module bundle order, matching the
+   pre-migration rendering. */
+.codeblock__button__YDCMe.codeblock__button__YDCMe {
+  /* Reset so a copied/error state on one button can't inherit into another via
+     the custom property (custom properties inherit by default). The copied/error
+     colors are set inline per state via --codeblock-button, matching the
+     --codeblock-numbers pattern so both track the ThemeProvider runtime. */
+  --codeblock-button: initial;
+  padding: 0;
+  border: 0;
+  color: var(--codeblock-button, inherit);
+}
+
+.codeblock__highlighter__t4Xol {
+  margin: 0;
+  padding: 0;
+  background: transparent;
+}
+
+.codeblock__content__WKNWr {
+  color: inherit;
+  font-family: inherit;
+}
+
+.codeblock__button-container__D6yob {
+  display: flex;
+  position: absolute;
+  top: var(--click-codeblock-space-y);
+  right: var(--click-codeblock-space-x);
+  gap: 0.625rem;
+}
 .content__fI-1- {
   display: flex;
   overflow: hidden;
@@ -3166,6 +3856,39 @@ div:active + .topbadge__E79OZ {
     flex-direction: column;
   }
 }
+/* Kept at zero specificity via :where() so that downstream styled-components
+   overrides on a styled(EmptyButton) (e.g. CrossButton overriding background and
+   padding, the Popover/CodeBlock close/copy buttons overriding color and padding)
+   win without needing a specificity hack — EmptyButton is a CSS Module, whose
+   rules otherwise beat equal-specificity styled-components by source order. */
+:where(.empty-button__1ynA8) {
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  outline: none;
+  cursor: pointer;
+}
+
+/* Also scoped with :where() so the disabled cursor stays at zero specificity
+   and a downstream styled(EmptyButton) `&:disabled` override wins naturally,
+   rather than tying on specificity and losing to the CSS Module by source order. */
+:where(.empty-button__1ynA8):disabled {
+  cursor: not-allowed;
+}
+/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. iconButton) */
+
+.cross-button__StJ4Q {
+  padding: var(--click-button-iconButton-sm-space-y)
+    var(--click-button-iconButton-sm-space-x);
+  border-radius: var(--click-button-iconButton-radii-all);
+  background: var(--click-button-iconButton-color-primary-background-default);
+}
+
+.cross-button__StJ4Q:hover {
+  background: var(--click-button-iconButton-color-primary-background-hover);
+}
 /* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. opaqueBackground) */
 .trigger__bbzuV {
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features -- `fit-content`
@@ -3263,169 +3986,949 @@ div:active + .topbadge__E79OZ {
   color: var(--click-dialog-color-description-default);
   font: var(--click-dialog-typography-description-default);
 }
-.right-menu-content__0-EQz {
-  z-index: 1;
-  flex-direction: column;
+.row-number-column__n-aQm {
+  position: sticky;
+  top: var(--row-number-column-top);
+  left: 0;
+  width: var(--row-number-column-width);
+  height: 100%;
 }
 
-.right-menu-content_show-arrow__-yaE-[data-side='bottom'] {
-  margin-top: -1px;
+.row-number-column_scrolled-horizontal__L9fAB {
+  box-shadow: 0 0 0 1px var(--click-grid-header-cell-color-stroke-default);
 }
 
-.right-menu-content_show-arrow__-yaE-[data-side='top'] {
-  margin-bottom: -1px;
+.row-number-column__cell__00w03 {
+  position: absolute;
+  top: var(--row-number-cell-top);
+  left: 0;
+  width: 100%;
+  height: var(--row-number-cell-height);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }
+/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. selectDirect) */
 
-.right-menu-content_show-arrow__-yaE-[data-side='left'] {
-  margin-right: -1px;
+/*
+ * The original styled-component dispatches background / text colour / border
+ * colour off `$type` (body|header) and `$selectionType`, and toggles individual
+ * borders / a `::before` overlay off boolean flags. Colours are aliased to local
+ * custom properties (set by the type + selection modifiers) so the shared border
+ * / overlay rules can reference them once.
+ */
+
+.cell__OXAxg {
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+  padding: var(--cell-space-y) var(--cell-space-x);
+  overflow: hidden;
+  border-top: 1px solid var(--cell-stroke-default);
+  border-left: 1px solid var(--cell-stroke-default);
+  background: var(--cell-background);
+  color: var(--cell-color);
+  font: var(--click-grid-cell-text-default);
+  text-align: left;
+  white-space: nowrap;
+  cursor: default;
+  text-overflow: ellipsis;
 }
 
-.right-menu-content_show-arrow__-yaE-[data-side='left'] .popover-arrow__z8r3W {
-  margin-right: 1rem;
+.cell__OXAxg[data-align='right'] {
+  text-align: right;
 }
 
-.right-menu-content_show-arrow__-yaE-[data-side='right'] {
-  margin-left: -1px;
+.cell_type_body__SohuF {
+  --cell-stroke-default: var(--click-grid-body-cell-color-stroke-default);
+  --cell-stroke-select-direct: var(--click-grid-body-cell-color-stroke-selectDirect);
+  --cell-stroke-last: var(--click-grid-body-cell-color-stroke-default);
+  --cell-space-y: var(--click-grid-body-cell-space-y);
+  --cell-space-x: var(--click-grid-body-cell-space-x);
+  --cell-background: var(--click-grid-body-cell-color-background-default);
+  --cell-color: var(--click-grid-body-cell-color-text-default);
 }
 
-.right-menu-content_show-arrow__-yaE-[data-side='right'] .popover-arrow__z8r3W {
-  margin-left: 1rem;
+.cell_type_body__SohuF.cell_selection_indirect__6e6yy {
+  --cell-stroke-last: var(--click-grid-body-cell-color-stroke-selectIndirect);
+  --cell-background: var(--click-grid-body-cell-color-background-selectIndirect);
+  --cell-color: var(--click-grid-body-cell-color-text-selectIndirect);
 }
-.menu-panel__-IeVm {
-  display: block;
-  padding: var(--click-popover-space-y) var(--click-popover-space-x);
-  border: 1px solid var(--click-popover-color-panel-stroke-default);
-  border-radius: var(--click-popover-radii-all);
-  background-color: var(--click-popover-color-panel-background-default);
-  box-shadow: var(--click-popover-shadow-default);
+
+.cell_type_body__SohuF.cell_selection_direct__QEL9m {
+  --cell-stroke-last: var(--click-grid-body-cell-color-stroke-selectDirect);
+  --cell-background: var(--click-grid-body-cell-color-background-selectDirect);
+  --cell-color: var(--click-grid-body-cell-color-text-selectDirect);
 }
 
-.menu-panel_show-close__Qx3Mo {
-  padding-top: 1rem;
+.cell_type_header__3tsr- {
+  --cell-stroke-default: var(--click-grid-header-cell-color-stroke-default);
+  --cell-stroke-select-direct: var(--click-grid-header-cell-color-stroke-selectDirect);
+  --cell-stroke-last: var(--click-grid-header-cell-color-stroke-default);
+  --cell-space-y: var(--click-grid-header-cell-space-y);
+  --cell-space-x: var(--click-grid-header-cell-space-x);
+  --cell-background: var(--click-grid-header-cell-color-background-default);
+  --cell-color: var(--click-grid-header-cell-color-title-default);
 }
-.progressbar__21KMf {
-  display: flex;
-  min-height: 2px;
-  padding-right: 0;
-  overflow: hidden;
-  justify-content: space-between;
-  align-items: center;
-  gap: var(--click-field-space-gap);
-  border: 1px solid var(--click-field-color-stroke-default);
-  border-radius: var(--click-field-radii-all);
-  background: linear-gradient(
-    var(--progress-grad-dir, to right),
-    var(--global-color-accent-default) 0%,
-    var(--global-color-accent-default) var(--progress),
-    var(--progress-bg, var(--click-field-color-background-default)) var(--progress),
-    var(--progress-bg, var(--click-field-color-background-default)) 100%
-  );
-  background-position: center;
-  background-size: calc(100% + 2px);
-  color: var(--global-color-accent-default);
-  font: var(--typography-styles-product-text-normal-sm);
-  transition: all 100ms ease-in-out;
+
+.cell_type_header__3tsr-.cell_selection_indirect__6e6yy {
+  --cell-stroke-last: var(--click-grid-header-cell-color-stroke-selectIndirect);
+  --cell-background: var(--click-grid-header-cell-color-background-selectIndirect);
+  --cell-color: var(--click-grid-header-cell-color-title-selectIndirect);
 }
 
-.progressbar_orientation_vertical__0w-VB {
-  width: auto;
-  height: 100%;
-  flex-direction: column;
+.cell_type_header__3tsr-.cell_selection_direct__QEL9m {
+  --cell-stroke-last: var(--click-grid-header-cell-color-stroke-selectDirect);
+  --cell-background: var(--click-grid-header-cell-color-background-selectDirect);
+  --cell-color: var(--click-grid-header-cell-color-title-selectDirect);
 }
 
-/* stylelint-disable plugin/no-unsupported-browser-features, declaration-property-value-no-unknown -- the original rule used this same
-   width fallback chain (100% → -webkit-fill-available → fill-available →
-   stretch) so horizontal bars fill the available inline space. */
-.progressbar_orientation_horizontal__MJimN {
-  width: 100%;
-  width: -webkit-fill-available;
-  width: fill-available;
-  width: stretch;
+/* header cell with no border removes top/left edges on the corner cells */
+.cell_type_header__3tsr-.cell_no-border__9gXDK[data-grid-row='-1'] {
+  border-top: none;
 }
-/* stylelint-enable plugin/no-unsupported-browser-features, declaration-property-value-no-unknown */
 
-.progressbar_orientation_horizontal__MJimN.progressbar_dir_start__xUm-Q {
-  --progress-grad-dir: to right;
+.cell_type_header__3tsr-.cell_no-border__9gXDK[data-grid-column='-1'] {
+  border-left: none;
 }
 
-.progressbar_orientation_horizontal__MJimN.progressbar_dir_end__iGTwK {
-  --progress-grad-dir: to left;
+/* a focused cell draws its last-edge borders with the select-direct stroke */
+.cell_focused__cmh-b {
+  box-shadow: inset 0 0 0 1px var(--cell-stroke-select-direct);
 }
 
-.progressbar_orientation_vertical__0w-VB.progressbar_dir_start__xUm-Q {
-  --progress-grad-dir: to bottom;
+/*
+ * Focus must win the last-edge stroke colour over any selection state. The
+ * original styled-component resolved the last-row / last-column border colour
+ * inline as `stroke[$isFocused ? 'selectDirect' : $selectionType]`, so focus
+ * always overrode the selection stroke. The `.cell_type_*.cell_selection_*`
+ * rules above set `--cell-stroke-last` at (0,2,0) specificity, so the focus
+ * override is qualified with the type class to match that specificity and,
+ * coming later in source order, take precedence. `.cell_focused` always
+ * co-occurs with a type class.
+ */
+.cell_type_body__SohuF.cell_focused__cmh-b,
+.cell_type_header__3tsr-.cell_focused__cmh-b {
+  --cell-stroke-last: var(--cell-stroke-select-direct);
 }
 
-.progressbar_orientation_vertical__0w-VB.progressbar_dir_end__iGTwK {
-  --progress-grad-dir: to top;
+/* only the last row/column draw the closing border, colored by focus/selection */
+.cell_last-row__DoJdk {
+  border-bottom: 1px solid var(--cell-stroke-last);
 }
 
-.progressbar_type_default__B8jtt {
-  padding: 0.25rem var(--click-field-space-x);
-  padding-right: 0;
+.cell_last-column__LgKM7 {
+  border-right: 1px solid var(--cell-stroke-last);
 }
 
-.progressbar_type_small__bcDiV {
-  padding: 0 var(--click-field-space-x);
-  padding-right: 0;
+/* rowAutoHeight resets the entire border last, overriding every rule above */
+.cell_row-auto-height__yzQUR {
+  min-height: auto;
+  overflow-y: auto;
+  border: none;
 }
 
-.progressbar_completed__XhK-p.progressbar_type_default__B8jtt {
-  background: var(--click-field-color-background-default);
-  background-position: center;
-  background-size: calc(100% + 2px);
+/* selection / focus overlay drawn on top of the cell so adjacent borders meet */
+.cell__overlay__U9XGO::before {
+  content: '';
+  position: absolute;
+  inset: 0;
 }
 
-.progressbar__21KMf:hover {
-  --progress-bg: var(--click-field-color-background-hover);
+.cell__overlay_selected_top__OMUJB::before {
+  border-top: 1px solid var(--cell-stroke-select-direct);
+}
+
+.cell__overlay_selected_left__MiimG::before {
+  border-left: 1px solid var(--cell-stroke-select-direct);
+}
+
+.cell__overlay_selected_bottom__2ra9F::before {
+  border-bottom: 1px solid var(--cell-stroke-select-direct);
+}
+
+.cell__overlay_selected_right__Dt-g5::before {
+  border-right: 1px solid var(--cell-stroke-select-direct);
+}
+
+.cell__overlay_row-auto-height__teKk1::before {
+  border: none;
+}
+/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. selectDirect) */
+
+.header__hXzAE {
+  display: flex;
+  position: sticky;
+  top: 0;
+  left: 0;
+  height: var(--header-height);
+  flex-direction: row;
+}
+
+.header_scrolled-vertical__mIp2- {
+  box-shadow: 0 0 0 1px var(--click-grid-header-cell-color-stroke-default);
+}
+
+.header__scroll-area__Nok8G {
+  position: relative;
+  left: var(--header-scroll-area-left);
+}
+
+.header__cell__ZCE9p {
+  display: flex;
+  position: absolute;
+  left: var(--header-cell-left);
+  width: var(--header-cell-width);
+  height: var(--header-cell-height);
+}
+
+.header__cell__ZCE9p:hover [data-resize] {
+  background: var(--click-grid-header-cell-color-stroke-selectDirect);
+}
+
+/* the sticky "select all" corner extends a header cell (styled(HeaderCellContainer)) */
+.header__row-column__ceu5w {
+  position: sticky;
+  top: 0;
+  left: 0;
+  width: var(--header-cell-width);
+  text-align: right;
+}
+
+.header__row-column_scrolled-horizontal__QZO4p {
+  box-shadow: 0 0 0 1px var(--click-grid-header-cell-color-stroke-default);
+}
+/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. selectDirect) */
+
+.column-resizer__8f12T {
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  left: calc(100% - 4px);
+  width: 4px;
+  height: var(--column-resizer-height);
+  overflow: auto;
+  cursor: col-resize;
+}
+
+.column-resizer__8f12T:hover,
+.column-resizer__8f12T:active {
+  background: var(--click-grid-header-cell-color-stroke-selectDirect);
+}
+
+.column-resizer_pressed__JGAln {
+  position: fixed;
+  height: 100%;
+}
+/*
+ * `.grid` is the Grid's outer container. It is rendered as the ContextMenu.Trigger
+ * (the root element the whole grid mounts into), which is why the trigger carries
+ * the grid's own box styling rather than a context-menu-specific class.
+ */
+.grid__h49fk {
+  width: 100%;
+  height: var(--grid-height, 100%);
+  overflow: hidden;
+  border-radius: var(--grid-radius);
+  background: var(--click-grid-body-cell-color-background-default);
+  outline: none;
+}
+
+.grid_bordered__kFqF5 {
+  border: 1px solid var(--click-grid-header-cell-color-stroke-default);
+}
+
+/* react-window's inner element that lays out the scrolling cell grid */
+.grid__inner__IZhj9 {
+  display: flex;
+  flex-direction: column-reverse;
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features -- the original styled rule used overflow-anchor */
+  overflow-anchor: none;
+  user-select: none;
+}
+
+.grid__data__Mn4TK {
+  position: absolute;
+  top: 0;
+  left: 0;
+  margin-top: var(--grid-data-top, 0);
+  margin-left: var(--grid-data-left, 0);
+}
+/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. genericMenu) */
+
+.trigger__4-zK2:focus-visible {
+  outline: 2px solid var(--click-global-color-outline-default);
+  outline-offset: 2px;
+}
+
+.right-menu-content__0-EQz {
+  z-index: 1;
+  flex-direction: column;
+}
+
+.right-menu-content_show-arrow__-yaE-[data-side='bottom'] {
+  margin-top: -1px;
+}
+
+.right-menu-content_show-arrow__-yaE-[data-side='top'] {
+  margin-bottom: -1px;
+}
+
+.right-menu-content_show-arrow__-yaE-[data-side='left'] {
+  margin-right: -1px;
+}
+
+.right-menu-content_show-arrow__-yaE-[data-side='left'] .popover-arrow__z8r3W {
+  margin-right: 1rem;
+}
+
+.right-menu-content_show-arrow__-yaE-[data-side='right'] {
+  margin-left: -1px;
+}
+
+.right-menu-content_show-arrow__-yaE-[data-side='right'] .popover-arrow__z8r3W {
+  margin-left: 1rem;
+}
+
+.group__4UU7V {
+  width: 100%;
+  border-bottom: 1px solid var(--click-genericMenu-item-color-default-stroke-default);
+}
+.grid-container__u1yIf {
+  /* These custom properties are only emitted inline when the matching prop is
+     set (grid-auto-columns, grid-auto-flow, grid-auto-rows, grid-template-area,
+     grid-template-columns, grid-template-rows, max-width, min-width, height,
+     max-height, min-height, overflow). Custom properties inherit by default, so
+     without this reset a nested GridContainer would inherit an ancestor's
+     value. Resetting to `initial` makes each consuming declaration fall back to
+     its own default (the second arg of `var()`) when the prop is unset,
+     reproducing the per-instance scoping that styled-components gave for free.
+     `--grid-container-gap` is included for the same reason: without resetting it
+     to `initial`, a nested GridContainer would inherit an ancestor's gap token
+     instead of letting `var(--grid-container-gap, inherit)` fall back to
+     `inherit` per-element (the styled-components source used a direct
+     `gap: inherit`). `column-gap`/`row-gap` are not in this set: they are
+     emitted inline as real longhand properties (not custom properties), so
+     there are no `--grid-container-*-gap` vars to reset. */
+  --grid-container-gap: initial;
+  --grid-container-auto-columns: initial;
+  --grid-container-auto-flow: initial;
+  --grid-container-auto-rows: initial;
+  --grid-container-template-area: initial;
+  --grid-container-template-columns: initial;
+  --grid-container-template-rows: initial;
+  --grid-container-max-width: initial;
+  --grid-container-min-width: initial;
+  --grid-container-height: initial;
+  --grid-container-max-height: initial;
+  --grid-container-min-height: initial;
+  --grid-container-overflow: initial;
+  display: var(--grid-container-display, grid);
+  width: var(--grid-container-width, 100%);
+  min-width: var(--grid-container-min-width);
+  max-width: var(--grid-container-max-width);
+  height: var(--grid-container-height);
+  min-height: var(--grid-container-min-height);
+  max-height: var(--grid-container-max-height);
+  overflow: var(--grid-container-overflow);
+  /* stylelint-disable declaration-block-no-redundant-longhand-properties -- align/justify axes are set independently from distinct props, so the place-content/place-items shorthands can't be used */
+  justify-content: var(--grid-container-justify-content, stretch);
+  align-items: var(--grid-container-align-items, stretch);
+  align-content: var(--grid-container-align-content, stretch);
+  /* `gap` is always emitted; `column-gap`/`row-gap` are emitted inline (as real
+     longhands) only when their props are set, so they override this shorthand
+     just like the styled-components source did — and stay absent otherwise. */
+  gap: var(--grid-container-gap, inherit);
+  grid-template-columns: var(--grid-container-template-columns);
+  grid-template-rows: var(--grid-container-template-rows);
+  grid-auto-columns: var(--grid-container-auto-columns);
+  grid-auto-flow: var(--grid-container-auto-flow);
+  grid-auto-rows: var(--grid-container-auto-rows);
+  /* stylelint-disable-next-line property-no-unknown -- the styled-components original emitted `grid-template-area` (singular, invalid); preserved verbatim for byte-for-byte parity */
+  grid-template-area: var(--grid-container-template-area);
+  justify-items: var(--grid-container-justify-items, stretch);
+  /* stylelint-enable declaration-block-no-redundant-longhand-properties */
+}
+
+/* stylelint-disable-next-line media-feature-range-notation -- prefix notation required for browser compatibility per .browserslistrc */
+@media (max-width: 768px) {
+  .grid-container_responsive__3-8Xh {
+    grid-template-columns: 1fr;
+  }
+
+  /* When NOT responsive, the styled-components source applied
+     `grid-template-columns: ${$gridTemplateColumns || 'auto'}` at the md
+     breakpoint — i.e. the explicit template when one was passed, otherwise
+     `auto`. The `--grid-container-template-columns` var is set inline only when
+     the prop is provided, so the `auto` fallback reproduces that exactly. */
+  .grid-container_not-responsive__Qqhg3 {
+    grid-template-columns: var(--grid-container-template-columns, auto);
+  }
+}
+.menu-panel__-IeVm {
+  display: block;
+  padding: var(--click-popover-space-y) var(--click-popover-space-x);
+  border: 1px solid var(--click-popover-color-panel-stroke-default);
+  border-radius: var(--click-popover-radii-all);
+  background-color: var(--click-popover-color-panel-background-default);
+  box-shadow: var(--click-popover-shadow-default);
+}
+
+.menu-panel_show-close__Qx3Mo {
+  padding-top: 1rem;
+}
+
+.trigger__QvCU1 {
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features -- `fit-content`
+     keyword on `width` is widely supported on evergreen browsers; the original
+     rule used the same value. */
+  width: fit-content;
+  border: none;
+  background: inherit;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+}
+
+.close-button__fpjhc {
+  position: absolute;
+  top: var(--click-popover-space-y);
+  right: var(--click-popover-space-x);
+  width: var(--click-popover-icon-size-width);
+  height: var(--click-popover-icon-size-height);
+}
+/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. fileUpload) */
+.upload-area__3SxAA {
+  display: flex;
+  box-sizing: border-box;
+  width: 100%;
+  align-items: center;
+  border: 1px solid var(--click-fileUpload-color-stroke-default);
+  background-color: var(--click-fileUpload-color-background-default);
+  transition: var(--click-fileUpload-transitions-all);
+  /* stylelint-disable-next-line container-name-pattern, value-keyword-case -- preserve original container-name from styled-components */
+  container-name: uploadArea;
+  container-type: inline-size;
+}
+
+/* border-radius: hasFile ? sm : md */
+.upload-area_radius_sm__DW4eQ {
+  border-radius: var(--click-fileUpload-sm-radii-all);
+}
+
+.upload-area_radius_md__k9cZA {
+  border-radius: var(--click-fileUpload-md-radii-all);
+}
+
+/* padding: hasFile || size === 'sm' ? sm : md */
+.upload-area_padding_sm__ci1xq {
+  padding: var(--click-fileUpload-sm-space-y) var(--click-fileUpload-sm-space-x);
+}
+
+.upload-area_padding_md__SflJQ {
+  padding: var(--click-fileUpload-md-space-y) var(--click-fileUpload-md-space-x);
+}
+
+/* min-height: size === 'sm' ? calc : auto */
+.upload-area_min-height_sm__JmKFU {
+  min-height: calc(var(--click-fileUpload-sm-space-y) * 2 + var(--sizes-8));
+}
+
+.upload-area_min-height_md__7BUe3 {
+  min-height: auto;
+}
+
+/* flex-direction: hasFile ? row : size === 'sm' ? row : column */
+.upload-area_direction_row__dPIPY {
+  flex-direction: row;
+}
+
+.upload-area_direction_column__Yd-Y9 {
+  flex-direction: column;
+}
+
+/* justify-content: hasFile ? space-between : size === 'sm' ? space-between : center */
+.upload-area_justify_space-between__8kSQQ {
+  justify-content: space-between;
+}
+
+.upload-area_justify_center__vW-59 {
+  justify-content: center;
+}
+
+/* gap: size === 'sm' ? sm : md */
+.upload-area_gap_sm__fRrTo {
+  gap: var(--click-fileUpload-sm-space-gap);
+}
+
+.upload-area_gap_md__gndXo {
+  gap: var(--click-fileUpload-md-space-gap);
+}
+
+/* cursor: hasFile ? default : pointer */
+.upload-area_cursor_default__Yrr8K {
+  cursor: default;
+}
+
+.upload-area_cursor_pointer__nnHd9 {
+  cursor: pointer;
+}
+
+/* !hasFile: dashed border */
+.upload-area_dashed_true__-dB8w {
+  border-style: dashed;
+  border-color: var(--click-fileUpload-color-stroke-default);
+}
+
+/* !hasFile && isDragging */
+.upload-area_dragging_true__wzFjV {
+  border-color: var(--click-fileUpload-color-stroke-active);
+  background-color: var(--click-fileUpload-color-background-active);
+}
+
+/* isError */
+.upload-area_error_true__gIe8y {
+  border-color: transparent;
+  background-color: var(--click-fileUpload-color-background-error);
+}
+
+.title__1rLes {
+  color: var(--click-fileUpload-color-title-default);
+  font: var(--click-fileUpload-typography-title-default);
+}
+
+.title_not-supported_true__o7ZXZ {
+  color: var(--click-fileUpload-color-title-error);
+}
+
+.description__QyVSQ {
+  color: var(--click-fileUpload-color-description-default);
+  font: var(--click-fileUpload-typography-description-default);
+}
+
+.upload-icon__CeL3E svg {
+  width: var(--click-fileUpload-md-icon-size-width);
+  height: var(--click-fileUpload-md-icon-size-height);
+  color: var(--click-fileUpload-md-color-icon-default);
+}
+
+.upload-text__4oGA- {
+  text-align: left;
+}
+
+.upload-text_centered_true__brhHN {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+
+.upload-text_grow_true__9MNMX {
+  flex: 1;
+}
+/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. fileUpload) */
+.truncator__j4dr4 {
+  display: flex;
+  width: auto;
+  min-width: 0;
+  overflow: hidden;
+  color: var(--click-fileUpload-color-title-default);
+  font: var(--click-fileUpload-typography-description-default);
+  white-space: nowrap;
+}
+
+.truncator__start__Rwx4e {
+  overflow: hidden;
+  flex-shrink: 1;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.truncator__end__CSANk {
+  flex-shrink: 0;
+  white-space: nowrap;
+}
+/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. fileUpload) */
+.file-item-container__86J-i {
+  display: flex;
+  min-width: 0;
+  flex: 1;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--click-fileUpload-sm-space-gap);
+}
+
+.file-item-container_inline_false__QqJXZ {
+  padding: var(--click-fileUpload-sm-space-y) var(--click-fileUpload-sm-space-x);
+  border: 1px solid var(--click-fileUpload-color-stroke-default);
+  border-radius: var(--click-fileUpload-sm-radii-all);
+  background-color: var(--click-fileUpload-color-background-default);
+}
+
+.file-item-container_inline_false__QqJXZ.file-item-container_error_true__uRfbn {
+  border-color: transparent;
+  background-color: var(--click-fileUpload-color-background-error);
+}
+
+/* stylelint-disable-next-line block-no-empty -- base element required by BEM */
+.document-icon__CX1O5 {
+}
+
+.document-icon_size_sm__sEIPl svg {
+  width: var(--click-fileUpload-sm-icon-size-width);
+  height: var(--click-fileUpload-sm-icon-size-height);
+  color: var(--click-fileUpload-sm-color-icon-default);
+}
+
+.document-icon_size_md__dqfzB svg {
+  width: var(--click-fileUpload-md-icon-size-width);
+  height: var(--click-fileUpload-md-icon-size-height);
+  color: var(--click-fileUpload-md-color-icon-default);
+}
+
+.description__sjgXO {
+  color: var(--click-fileUpload-color-description-default);
+  font: var(--click-fileUpload-typography-description-default);
+}
+
+.description_error_true__wbkov {
+  color: var(--click-fileUpload-color-title-error);
+}
+
+.file-details__aAMdx {
+  display: flex;
+  min-width: 0;
+  gap: var(--click-fileUpload-md-space-gap);
+  border: none;
+}
+
+.file-actions__OUaMv {
+  display: flex;
+  margin-left: auto;
+  align-items: center;
+  gap: 0;
+}
+
+.file-content-container__40JkR {
+  display: flex;
+  min-width: 0;
+  flex: 1;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.file-content-container_size_sm__8od-v {
+  min-height: 24px;
+}
+
+.file-content-container_size_md__U6Hwr {
+  min-height: auto;
+}
+
+.progress-bar-wrapper__q0i9x {
+  margin-top: var(--click-fileUpload-md-space-gap);
+  margin-bottom: 9px;
+}
+.progressbar__21KMf {
+  display: flex;
+  min-height: 2px;
+  padding-right: 0;
+  overflow: hidden;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--click-field-space-gap);
+  border: 1px solid var(--click-field-color-stroke-default);
+  border-radius: var(--click-field-radii-all);
+  background: linear-gradient(
+    var(--progress-grad-dir, to right),
+    var(--global-color-accent-default) 0%,
+    var(--global-color-accent-default) var(--progress),
+    var(--progress-bg, var(--click-field-color-background-default)) var(--progress),
+    var(--progress-bg, var(--click-field-color-background-default)) 100%
+  );
+  background-position: center;
+  background-size: calc(100% + 2px);
+  color: var(--global-color-accent-default);
+  font: var(--typography-styles-product-text-normal-sm);
+  transition: all 100ms ease-in-out;
+}
+
+.progressbar_orientation_vertical__0w-VB {
+  width: auto;
+  height: 100%;
+  flex-direction: column;
+}
+
+/* stylelint-disable plugin/no-unsupported-browser-features, declaration-property-value-no-unknown -- the original rule used this same
+   width fallback chain (100% → -webkit-fill-available → fill-available →
+   stretch) so horizontal bars fill the available inline space. */
+.progressbar_orientation_horizontal__MJimN {
+  width: 100%;
+  width: -webkit-fill-available;
+  width: fill-available;
+  width: stretch;
+}
+/* stylelint-enable plugin/no-unsupported-browser-features, declaration-property-value-no-unknown */
+
+.progressbar_orientation_horizontal__MJimN.progressbar_dir_start__xUm-Q {
+  --progress-grad-dir: to right;
+}
+
+.progressbar_orientation_horizontal__MJimN.progressbar_dir_end__iGTwK {
+  --progress-grad-dir: to left;
+}
+
+.progressbar_orientation_vertical__0w-VB.progressbar_dir_start__xUm-Q {
+  --progress-grad-dir: to bottom;
+}
+
+.progressbar_orientation_vertical__0w-VB.progressbar_dir_end__iGTwK {
+  --progress-grad-dir: to top;
+}
+
+.progressbar_type_default__B8jtt {
+  padding: 0.25rem var(--click-field-space-x);
+  padding-right: 0;
+}
+
+.progressbar_type_small__bcDiV {
+  padding: 0 var(--click-field-space-x);
+  padding-right: 0;
+}
+
+.progressbar_completed__XhK-p.progressbar_type_default__B8jtt {
+  background: var(--click-field-color-background-default);
+  background-position: center;
+  background-size: calc(100% + 2px);
+}
+
+.progressbar__21KMf:hover {
+  --progress-bg: var(--click-field-color-background-hover);
+
+  border: 1px solid var(--click-field-color-stroke-hover);
+  background-position: center;
+  background-size: calc(100% + 2px);
+}
+
+.progressbar_completed__XhK-p:hover {
+  background: var(--click-field-color-background-hover);
+  background-position: center;
+  background-size: calc(100% + 2px);
+}
+
+.progressbar__21KMf:focus,
+.progressbar__21KMf:focus-within {
+  --progress-bg: var(--click-field-color-background-active);
+
+  border: 1px solid var(--click-field-color-stroke-active);
+  background-position: center;
+  background-size: calc(100% + 2px);
+}
+
+.progressbar_completed__XhK-p:focus,
+.progressbar_completed__XhK-p:focus-within {
+  background: var(--click-field-color-background-active);
+  background-position: center;
+  background-size: calc(100% + 2px);
+}
+
+.progresstext__RAf9Q {
+  width: 100%;
+  font: inherit;
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features -- mix-blend-mode
+     is widely supported on evergreen browsers; the original rule
+     used the same value to invert the text against the gradient fill. */
+  mix-blend-mode: difference;
+}
+
+.progressclosebutton__cGgfw {
+  visibility: hidden;
+  border: 0;
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features -- mix-blend-mode
+     is widely supported on evergreen browsers; the original rule
+     used the same value to invert the close icon against the gradient fill. */
+  mix-blend-mode: difference;
+}
+
+.progressclosebutton_dismissable__p5mDJ {
+  visibility: visible;
+}
+/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. fileUpload) */
+.files-list__Of0Ps {
+  display: flex;
+  width: 100%;
+  margin-top: var(--click-fileUpload-md-space-gap);
+  flex-direction: column;
+  gap: var(--click-fileUpload-sm-space-gap);
+}
+/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. fileTabs) */
+.tabs__jY99b {
+  display: flex;
+  position: relative;
+  max-width: var(--file-tabs-count-width);
+  overflow: auto;
+  /* stylelint-disable plugin/no-unsupported-browser-features, declaration-property-value-no-unknown -- preserves the styled-components original verbatim; the invalid scrollbar-width value is ignored by browsers and the scrollbar is hidden via the ::-webkit-scrollbar rule below */
+  overscroll-behavior: none;
+  scrollbar-width: 0;
+  /* stylelint-enable plugin/no-unsupported-browser-features, declaration-property-value-no-unknown */
+}
+
+.tabs__jY99b::-webkit-scrollbar {
+  height: 0;
+}
+
+.tabs-sortable__7e-D1 {
+  display: flex;
+}
+
+.tabs-sortable__7e-D1 > div {
+  width: clamp(100px, 100%, 200px);
+  min-width: 100px;
+  height: 100%;
+  outline: none;
+}
+
+.tabs-sortable__7e-D1 > div.sortable-ghost__1JlRB {
+  opacity: 0;
+}
+
+.tab__Fud6d {
+  display: grid;
+  box-sizing: border-box;
+  max-width: 100%;
+  /* stylelint-disable plugin/no-unsupported-browser-features, declaration-property-value-no-unknown -- the original rule used this same width fallback chain (100% → -webkit-fill-available → fill-available → stretch) so the tab fills the available inline space */
+  max-width: -webkit-fill-available;
+  max-width: fill-available;
+  max-width: stretch;
+  /* stylelint-enable plugin/no-unsupported-browser-features, declaration-property-value-no-unknown */
+  height: 100%;
+  max-height: 100%;
+  padding: var(--click-tabs-fileTabs-space-y) var(--click-tabs-fileTabs-space-x);
+  justify-content: flex-start;
+  align-items: center;
+  gap: var(--click-tabs-fileTabs-space-gap);
+  grid-template-columns: 1fr;
+  border: none;
+  border-right: 1px solid var(--click-tabs-fileTabs-color-stroke-default);
+  border-radius: var(--click-tabs-fileTabs-radii-all);
+  background: var(--click-tabs-fileTabs-color-background-default);
+  color: var(--click-tabs-fileTabs-color-text-default);
+  font: var(--click-tabs-fileTabs-typography-label-default);
+  outline: none;
+  cursor: pointer;
+}
+
+.tab__Fud6d svg,
+.tab__Fud6d [data-indicator] {
+  width: var(--click-tabs-fileTabs-icon-size-width);
+  height: var(--click-tabs-fileTabs-icon-size-height);
+}
+
+.tab__Fud6d [data-type='close'] {
+  display: none;
+}
+
+.tab__Fud6d [data-indicator] {
+  display: block;
+}
+
+.tab__Fud6d:hover [data-type='close'] {
+  display: block;
+}
+
+.tab__Fud6d:hover [data-indicator] {
+  display: none;
+}
+
+.tab_active__nqwS6 {
+  border-right: 1px solid var(--click-tabs-fileTabs-color-stroke-active);
+  background: var(--click-tabs-fileTabs-color-background-active);
+  color: var(--click-tabs-fileTabs-color-text-active);
+  font: var(--click-tabs-fileTabs-typography-label-active);
+}
+
+.tab_inactive__tflkU:hover {
+  border-right: 1px solid var(--click-tabs-fileTabs-color-stroke-hover);
+  background: var(--click-tabs-fileTabs-color-background-hover);
+  color: var(--click-tabs-fileTabs-color-text-hover);
+  font: var(--click-tabs-fileTabs-typography-label-hover);
+}
+
+.tab_full-width__sU4rf {
+  width: 100%;
+}
+
+.tab_fixed__S0Bwz {
+  width: auto;
+}
+
+.tab_preview__FR-Q6 {
+  font-style: italic;
+}
+
+.tab_dismissable__ud86m {
+  grid-template-columns: 1fr var(--click-tabs-fileTabs-icon-size-width);
+}
+
+.indicator__ZD0YM {
+  position: relative;
+}
+
+.indicator__ZD0YM::after {
+  content: '';
+  position: absolute;
+  top: 0.25rem;
+  left: 0.25rem;
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 50%;
+  background: transparent;
+}
 
-  border: 1px solid var(--click-field-color-stroke-hover);
-  background-position: center;
-  background-size: calc(100% + 2px);
+.indicator__ZD0YM[data-indicator='success']::after {
+  background: var(--click-alert-color-text-success);
 }
 
-.progressbar_completed__XhK-p:hover {
-  background: var(--click-field-color-background-hover);
-  background-position: center;
-  background-size: calc(100% + 2px);
+.indicator__ZD0YM[data-indicator='neutral']::after {
+  background: var(--click-alert-color-text-neutral);
 }
 
-.progressbar__21KMf:focus,
-.progressbar__21KMf:focus-within {
-  --progress-bg: var(--click-field-color-background-active);
+.indicator__ZD0YM[data-indicator='danger']::after {
+  background: var(--click-alert-color-text-danger);
+}
 
-  border: 1px solid var(--click-field-color-stroke-active);
-  background-position: center;
-  background-size: calc(100% + 2px);
+.indicator__ZD0YM[data-indicator='warning']::after {
+  background: var(--click-alert-color-text-warning);
 }
 
-.progressbar_completed__XhK-p:focus,
-.progressbar_completed__XhK-p:focus-within {
-  background: var(--click-field-color-background-active);
-  background-position: center;
-  background-size: calc(100% + 2px);
+.indicator__ZD0YM[data-indicator='info']::after {
+  background: var(--click-alert-color-text-info);
 }
 
-.progresstext__RAf9Q {
-  width: 100%;
-  font: inherit;
-  /* stylelint-disable-next-line plugin/no-unsupported-browser-features -- mix-blend-mode
-     is widely supported on evergreen browsers; the original rule
-     used the same value to invert the text against the gradient fill. */
-  mix-blend-mode: difference;
+.tab-content__JX6iV {
+  display: flex;
+  overflow: hidden;
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+  align-items: center;
+  gap: var(--click-tabs-fileTabs-space-gap);
 }
 
-.progressclosebutton__cGgfw {
-  visibility: hidden;
-  border: 0;
-  /* stylelint-disable-next-line plugin/no-unsupported-browser-features -- mix-blend-mode
-     is widely supported on evergreen browsers; the original rule
-     used the same value to invert the close icon against the gradient fill. */
-  mix-blend-mode: difference;
+.tab-content-text__zXnlM {
+  display: inline-block;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }
 
-.progressclosebutton_dismissable__p5mDJ {
-  visibility: visible;
+.empty-button__czm-t {
+  padding: 0;
+}
+
+.empty-button__czm-t:hover {
+  background: var(--click-tabs-fileTabs-color-closeButton-background-hover);
 }
 @keyframes flyout-animation-width__LabkI {
   from {
@@ -4325,6 +5828,338 @@ div:active + .topbadge__E79OZ {
 .wrapper_collapsible_true__8ANnP {
   --title-pad-left: 0;
 }
+/* Doubled class raises specificity to (0,2,0) so this width wins over the
+   Select root's own `width: 100%` rule, which styled() injects into <head>
+   at runtime (after the bundled CSS). The previous styled() wrapper relied
+   on runtime injection order for the same effect. */
+.custom-select__iARgW.custom-select__iARgW {
+  width: 150px;
+}
+/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. genericMenu, fieldText) */
+
+.select-value__CxDXF {
+  overflow: hidden;
+  flex: 1;
+  gap: inherit;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+}
+
+.select-trigger__k4Odp {
+  display: flex;
+  width: 100%;
+  min-height: var(--click-genericMenu-panel-size-height);
+  padding: var(--click-field-space-y) var(--click-field-space-x);
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--click-field-space-gap);
+  border: 1px solid var(--click-field-color-stroke-default);
+  border-radius: var(--click-field-radii-all);
+  background: var(--click-field-color-background-default);
+  color: var(--click-field-color-text-default);
+  font: var(--click-field-typography-fieldText-default);
+  cursor: pointer;
+}
+
+.select-trigger__k4Odp span:first-of-type {
+  max-width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.select-trigger__k4Odp:hover {
+  border: 1px solid var(--click-field-color-stroke-hover);
+  background: var(--click-field-color-background-hover);
+  color: var(--click-field-color-text-hover);
+}
+
+.select-trigger_error__fZGGT {
+  border: 1px solid var(--click-field-color-stroke-error);
+  background: var(--click-field-color-background-active);
+  color: var(--click-field-color-text-error);
+  font: var(--click-field-typography-fieldText-error);
+}
+
+.select-trigger_error__fZGGT:hover {
+  border: 1px solid var(--click-field-color-stroke-error);
+  color: var(--click-field-color-text-error);
+}
+
+/* stylelint-disable no-descending-specificity -- source order mirrors the
+   styled-components cascade: the focus/open active styling is followed by
+   focus-visible and disabled, matching the original template-literal order. */
+
+/*
+  The active (focus / open) styling is suppressed in the error state: the
+  styled-components original only emitted these rules in the non-error branch,
+  so an errored trigger keeps its error styling on focus/open.
+*/
+.select-trigger__k4Odp:not(.select-trigger_error__fZGGT):focus,
+.select-trigger__k4Odp:not(.select-trigger_error__fZGGT)[data-state='open'] {
+  border: 1px solid var(--click-field-color-stroke-active);
+  background: var(--click-field-color-background-active);
+  color: var(--click-field-color-text-active);
+  font: var(--click-field-typography-fieldText-active);
+}
+
+.select-trigger__k4Odp:not(.select-trigger_error__fZGGT):focus ~ label,
+.select-trigger__k4Odp:not(.select-trigger_error__fZGGT)[data-state='open'] ~ label {
+  color: var(--click-field-color-label-active);
+  font: var(--click-field-typography-label-active);
+}
+
+.select-trigger__k4Odp:focus-visible {
+  outline: 2px solid var(--click-global-color-outline-default);
+  outline-offset: 2px;
+}
+
+.select-trigger__k4Odp:disabled {
+  border: 1px solid var(--click-field-color-stroke-disabled);
+  background: var(--click-field-color-background-disabled);
+  color: var(--click-field-color-text-disabled);
+  font: var(--click-field-typography-fieldText-disabled);
+  cursor: not-allowed;
+}
+
+/* stylelint-enable no-descending-specificity */
+
+.select-trigger__k4Odp [data-hide-in-trigger] {
+  display: none;
+}
+
+.select-popover-content__30txk {
+  display: flex;
+  width: var(--radix-popover-trigger-width);
+  max-height: var(--radix-popover-content-available-height);
+  padding: 0.5rem 0;
+  overflow: hidden;
+  align-items: flex-start;
+  gap: 0.625rem;
+  border: 1px solid var(--click-genericMenu-item-color-default-stroke-default);
+  border-radius: 0.25rem;
+  background: var(--click-genericMenu-item-color-default-background-default);
+  box-shadow:
+    0 1px 3px 0 rgb(16 24 40 / 10%),
+    0 1px 2px 0 rgb(16 24 40 / 6%);
+  pointer-events: auto;
+}
+
+.select-popover-content_full-width__frIlp {
+  width: 100%;
+  min-width: var(--radix-popover-trigger-width);
+  max-width: var(--select-item-character-limit);
+}
+
+.search-bar-container__bidMt {
+  display: flex;
+  position: relative;
+  width: auto;
+  height: 0;
+  padding: 0;
+  justify-content: flex-start;
+  align-items: center;
+  color: var(--click-genericMenu-autocomplete-color-searchTerm-default);
+  font: var(--click-genericMenu-autocomplete-typography-search-term-default);
+}
+
+.search-bar-container_show-search__YLR4i {
+  height: auto;
+  padding: var(--click-genericMenu-item-space-y) var(--click-genericMenu-item-space-x);
+}
+
+.search-bar__J2qTl {
+  width: 100%;
+  height: 0;
+  min-height: 0;
+  /*
+    When hidden the original collapsed all padding to 0; when shown it set only
+    padding-right (in the _show-search modifier), leaving the input's default
+    vertical padding intact — that 2px of UA padding is load-bearing for height.
+  */
+  padding: 0;
+  gap: var(--click-genericMenu-item-space-gap);
+  border: none;
+  border-bottom: 0;
+  background: transparent;
+  color: var(--click-genericMenu-autocomplete-color-searchTerm-default);
+  font: var(--click-genericMenu-autocomplete-typography-search-term-default);
+  outline: none;
+}
+
+.search-bar__J2qTl::placeholder {
+  color: var(--click-genericMenu-autocomplete-color-placeholder-default);
+  font: var(--click-genericMenu-autocomplete-typography-search-placeholder-default);
+}
+
+.search-bar_show-search__IhdJT {
+  height: initial;
+  min-height: 21px;
+  padding: revert;
+  padding-right: 24px;
+  border-bottom: 2px solid var(--click-genericMenu-button-color-stroke-default);
+}
+
+.search-close__dB1cs {
+  visibility: hidden;
+  position: absolute;
+  top: var(--click-genericMenu-item-space-y);
+  right: var(--click-genericMenu-item-space-x);
+}
+
+.search-close_show-close__-Anjf {
+  visibility: visible;
+}
+
+/*
+  Added the max-height with calc as the content should always be fit inside SelectPopoverContent
+  SelectPopoverContent has hardcoded padding and thats why we are using 1 rem instead of tokens
+  This makes sure that the content is always visible with the scrolling
+*/
+.select-list__CNYUb {
+  display: flex;
+  width: inherit;
+  max-height: calc(var(--radix-popover-content-available-height) - 1rem);
+  flex-direction: column;
+}
+
+.select-list-content__AJbe9 {
+  width: inherit;
+  max-height: var(--select-list-max-height);
+  overflow: auto;
+  flex: 1;
+}
+
+.hidden-select-element__YZlhL {
+  visibility: hidden;
+  position: absolute;
+  z-index: -1;
+  height: 0;
+}
+
+.select-group-container__Pd5rW {
+  /* stylelint-disable plugin/no-unsupported-browser-features, declaration-property-value-no-unknown -- the original rule used this same width fallback chain so the container fills the available inline space. */
+  display: flex;
+  width: -webkit-fill-available;
+  width: fill-available;
+  width: stretch;
+  /* stylelint-enable plugin/no-unsupported-browser-features, declaration-property-value-no-unknown */
+  overflow: hidden;
+  flex-direction: column;
+  justify-content: center;
+  background: transparent;
+  color: var(--click-genericMenu-item-color-default-text-muted);
+  font: var(--click-genericMenu-item-typography-sectionHeader-default);
+}
+
+.select-group-container__Pd5rW[aria-selected] {
+  outline: none;
+}
+
+.select-group-container__Pd5rW[hidden] {
+  display: none;
+}
+
+.select-group-name__TrAy3 {
+  display: flex;
+  width: 100%;
+  padding: var(--click-genericMenu-sectionHeader-space-top)
+    var(--click-genericMenu-item-space-x)
+    var(--click-genericMenu-sectionHeader-space-bottom);
+  overflow: hidden;
+  flex-direction: column;
+  gap: var(--click-genericMenu-item-space-gap);
+  border-bottom: 1px solid var(--click-genericMenu-item-color-default-stroke-default);
+  color: var(--click-genericMenu-item-color-default-text-muted);
+  font: var(--click-genericMenu-item-typography-sectionHeader-default);
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.select-group-content__OBO5d {
+  width: inherit;
+}
+
+/*
+  The original styled-components rule omitted the semicolon after `font`, but
+  stylis recovered and applied both the `font` and `padding` declarations, so
+  the rendered row used the button label typography and button/item padding.
+  Both are restored here to match that rendering.
+*/
+.select-no-data-container__b2319 {
+  display: block;
+  width: 100%;
+  padding: var(--click-genericMenu-button-space-y) var(--click-genericMenu-item-space-x);
+  overflow: hidden;
+  border: none;
+  background: var(--click-genericMenu-button-color-background-default);
+  color: var(--click-genericMenu-button-color-label-default);
+  font: var(--click-genericMenu-button-typography-label-default);
+  text-align: left;
+  white-space: nowrap;
+  cursor: default;
+  text-overflow: ellipsis;
+}
+
+.select-no-data-container__b2319[hidden='true'] {
+  display: none;
+}
+
+.select-no-data-container_clickable__J6Bkj {
+  cursor: pointer;
+}
+
+.check-icon__ORxKK {
+  opacity: 0;
+}
+
+.check-icon_show-check__rVelk {
+  opacity: 1;
+}
+
+.select-item-description-text__eKqEn {
+  white-space: normal;
+}
+
+[data-disabled] .select-item-description-text__eKqEn,
+[disabled] .select-item-description-text__eKqEn {
+  color: inherit;
+}
+
+/* don't show description when item is rendered in the trigger */
+.select-trigger__k4Odp .select-item-description-text__eKqEn {
+  display: none;
+}
+.badge-list__WpJAq {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  align-items: center;
+  gap: inherit;
+  color: inherit;
+  font: inherit;
+}
+
+.multi-select-badge__vk7YC {
+  /* stylelint-disable plugin/no-unsupported-browser-features, declaration-property-value-no-unknown -- the original rule used this same width fallback chain so the badge fills the available inline space up to its content width. */
+  width: 100%;
+  width: -webkit-fill-available;
+  width: fill-available;
+  width: stretch;
+  max-width: fit-content;
+  /* stylelint-enable plugin/no-unsupported-browser-features, declaration-property-value-no-unknown */
+}
+.select-value-container__I2dbz {
+  display: flex;
+  width: 100%;
+  overflow: hidden;
+  align-items: center;
+  white-space: nowrap;
+  cursor: inherit;
+  pointer-events: inherit;
+  text-overflow: ellipsis;
+}
 .radio-group__RXgmX {
   display: flex;
   flex-wrap: wrap;
@@ -4578,7 +6413,6 @@ div:active + .topbadge__E79OZ {
 
 .table__resizer__m6w0b {
   position: absolute;
-  z-index: 1;
   top: 0;
   right: 0;
   width: 24px;