@clickhouse/click-ui 0.7.0 → 0.8.0

package/dist/cjs/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);
@@ -879,6 +940,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 +974,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 +1142,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 +2173,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,59 +2721,237 @@
   color: var(--big-stat-title-color);
   font: var(--big-stat-title-font);
 }
-.header__Cn2aH {
-  max-width: 100%;
-  gap: inherit;
-}
-
-.description__4EWfD {
+/* 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;
-  width: 100%;
-  flex: 1;
-  flex-direction: column;
-  align-self: start;
-  gap: var(--click-card-horizontal-space-md-gap);
+  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;
 }
 
-.cardicon__VX2fX {
-  width: var(--click-card-horizontal-icon-size-all);
-  height: var(--click-card-horizontal-icon-size-all);
+:where(.base-button__6Tguv):hover {
+  font: var(--click-button-basic-typography-label-hover);
 }
 
-.contentwrapper__u9SOr {
-  display: flex;
-  width: 100%;
-  flex-direction: row;
+:where(.base-button__6Tguv):active,
+:where(.base-button__6Tguv):focus {
+  font: var(--click-button-basic-typography-label-active);
 }
 
-.contentwrapper_size_md__lNQPZ {
-  gap: var(--click-card-horizontal-space-md-gap);
+:where(.base-button__6Tguv):focus-visible {
+  outline: 2px solid var(--click-global-color-outline-default);
+  outline-offset: 2px;
 }
 
-.contentwrapper_size_sm__GDVYr {
-  gap: var(--click-card-horizontal-space-sm-gap);
+: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;
 }
-
-/* stylelint-disable-next-line media-feature-range-notation -- prefix notation
-   required for browser compatibility per .browserslistrc */
-@media (max-width: 768px) {
-  .contentwrapper__u9SOr {
-    flex-direction: column;
-  }
+.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;
 }
 
-.icontextcontentwrapper__D6gbe {
-  display: flex;
+.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%;
-  flex-direction: row;
-  align-items: center;
 }
 
-.icontextcontentwrapper_alignment_top__rsOIa {
-  align-items: flex-start;
+.split-button__EX3XI:hover {
+  border-color: var(--split-stroke-hover);
 }
 
-.icontextcontentwrapper_alignment_center__GiQqi {
+.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%;
+  flex: 1;
+  flex-direction: column;
+  align-self: start;
+  gap: var(--click-card-horizontal-space-md-gap);
+}
+
+.cardicon__VX2fX {
+  width: var(--click-card-horizontal-icon-size-all);
+  height: var(--click-card-horizontal-icon-size-all);
+}
+
+.contentwrapper__u9SOr {
+  display: flex;
+  width: 100%;
+  flex-direction: row;
+}
+
+.contentwrapper_size_md__lNQPZ {
+  gap: var(--click-card-horizontal-space-md-gap);
+}
+
+.contentwrapper_size_sm__GDVYr {
+  gap: var(--click-card-horizontal-space-sm-gap);
+}
+
+/* stylelint-disable-next-line media-feature-range-notation -- prefix notation
+   required for browser compatibility per .browserslistrc */
+@media (max-width: 768px) {
+  .contentwrapper__u9SOr {
+    flex-direction: column;
+  }
+}
+
+.icontextcontentwrapper__D6gbe {
+  display: flex;
+  width: 100%;
+  flex-direction: row;
+  align-items: center;
+}
+
+.icontextcontentwrapper_alignment_top__rsOIa {
+  align-items: flex-start;
+}
+
+.icontextcontentwrapper_alignment_center__GiQqi {
   align-items: center;
 }
 
@@ -2900,6 +3396,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 +3694,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 +3762,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,6 +3892,13 @@ div:active + .topbadge__E79OZ {
   color: var(--click-dialog-color-description-default);
   font: var(--click-dialog-typography-description-default);
 }
+/* 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;
@@ -3291,6 +3927,82 @@ div:active + .topbadge__E79OZ {
 .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);
@@ -3303,6 +4015,260 @@ div:active + .topbadge__E79OZ {
 .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;
@@ -3379,53 +4345,228 @@ div:active + .topbadge__E79OZ {
 .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);
+  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;
+}
+
+.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 +5466,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 +6051,6 @@ div:active + .topbadge__E79OZ {
 
 .table__resizer__m6w0b {
   position: absolute;
-  z-index: 1;
   top: 0;
   right: 0;
   width: 24px;