@clickhouse/click-ui 0.6.2-rc3 → 0.8.0

package/dist/cjs/click-ui.css

@@ -132,6 +132,288 @@
   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
+   overrides and native resize; `:autofill` overrides require `-webkit-box-shadow`
+   specifically, so these are preserved verbatim for byte-for-byte parity. */
+/* stylelint-disable property-no-vendor-prefix */
+/* stylelint-disable plugin/no-unsupported-browser-features */
+/* The disabled-state rules intentionally come last to win the cascade, matching
+   the styled-components source order; this trips no-descending-specificity. */
+/* stylelint-disable no-descending-specificity */
+.wrapper__WHwoB {
+  display: flex;
+  width: inherit;
+  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);
+}
+
+.wrapper__WHwoB span:first-of-type {
+  max-width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.wrapper__WHwoB *:autofill,
+.wrapper__WHwoB *:-webkit-autofill {
+  -webkit-box-shadow: 0 0 0 50vh var(--click-field-color-background-default) inset;
+  caret-color: var(--click-field-color-text-default);
+  -webkit-text-fill-color: var(--click-field-color-text-default);
+}
+
+.wrapper__WHwoB:hover {
+  border: 1px solid var(--click-field-color-stroke-hover);
+  background: var(--click-field-color-background-hover);
+  color: var(--click-field-color-text-hover);
+}
+
+.wrapper__WHwoB:hover *:autofill,
+.wrapper__WHwoB:hover *:-webkit-autofill {
+  -webkit-box-shadow: 0 0 0 50vh var(--click-field-color-background-hover) inset;
+  caret-color: var(--click-field-color-text-hover);
+  -webkit-text-fill-color: var(--click-field-color-text-hover);
+}
+
+.wrapper_resize_vertical__43Ah9,
+.wrapper_resize_horizontal__Cgy4t,
+.wrapper_resize_both__WKn55 {
+  overflow: auto;
+}
+
+.wrapper_resize_vertical__43Ah9 {
+  resize: vertical;
+}
+
+.wrapper_resize_horizontal__Cgy4t {
+  resize: horizontal;
+}
+
+.wrapper_resize_both__WKn55 {
+  resize: both;
+}
+
+.wrapper__WHwoB:not(.wrapper_error__SB99e):focus-within,
+.wrapper__WHwoB:not(.wrapper_error__SB99e)[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);
+}
+
+.wrapper__WHwoB:not(.wrapper_error__SB99e):focus-within *:autofill,
+.wrapper__WHwoB:not(.wrapper_error__SB99e):focus-within *:-webkit-autofill,
+.wrapper__WHwoB:not(.wrapper_error__SB99e)[data-state='open'] *:autofill,
+.wrapper__WHwoB:not(.wrapper_error__SB99e)[data-state='open'] *:-webkit-autofill {
+  -webkit-box-shadow: 0 0 0 50vh var(--click-field-color-background-active) inset;
+  caret-color: var(--click-field-color-text-active);
+  -webkit-text-fill-color: var(--click-field-color-text-active);
+}
+
+.wrapper_error__SB99e {
+  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);
+}
+
+.wrapper_error__SB99e *:autofill,
+.wrapper_error__SB99e *:-webkit-autofill {
+  -webkit-box-shadow: 0 0 0 50vh var(--click-field-color-background-error) inset;
+  caret-color: var(--click-field-color-text-error);
+  -webkit-text-fill-color: var(--click-field-color-text-error);
+}
+
+.wrapper_error__SB99e:hover {
+  border: 1px solid var(--click-field-color-stroke-error);
+  color: var(--click-field-color-text-error);
+}
+
+.wrapper_error__SB99e:hover *:autofill,
+.wrapper_error__SB99e:hover *:-webkit-autofill {
+  -webkit-box-shadow: 0 0 0 50vh var(--click-field-color-background-error) inset;
+  caret-color: var(--click-field-color-text-error);
+  -webkit-text-fill-color: var(--click-field-color-text-error);
+}
+
+.wrapper__WHwoB:disabled,
+.wrapper__WHwoB.disabled__vXh63 {
+  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);
+}
+
+.wrapper__WHwoB:disabled *:autofill,
+.wrapper__WHwoB:disabled *:-webkit-autofill,
+.wrapper__WHwoB.disabled__vXh63 *:autofill,
+.wrapper__WHwoB.disabled__vXh63 *:-webkit-autofill {
+  -webkit-box-shadow: 0 0 0 50vh var(--click-field-color-background-disabled) inset;
+  caret-color: var(--click-field-color-text-disabled);
+  -webkit-text-fill-color: var(--click-field-color-text-disabled);
+}
+
+.input__0fhe3 {
+  width: 100%;
+  padding: var(--click-field-space-y) 0;
+  padding-right: var(--click-field-space-x);
+  padding-left: var(--click-field-space-x);
+  border: none;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  outline: none;
+}
+
+.input_has-start-content__JXy30 {
+  padding-left: 0;
+}
+
+.input_has-end-content__i10tl {
+  padding-right: 0;
+}
+
+.input__0fhe3::placeholder {
+  color: var(--click-field-color-placeholder-default);
+}
+
+.input__0fhe3:disabled::placeholder,
+.input__0fhe3.disabled__vXh63::placeholder {
+  color: var(--click-field-color-placeholder-disabled);
+}
+
+.number-input_hide-controls__sbWrG::-webkit-outer-spin-button,
+.number-input_hide-controls__sbWrG::-webkit-inner-spin-button {
+  margin: 0;
+  -webkit-appearance: none;
+}
+
+.number-input_hide-controls__sbWrG {
+  -moz-appearance: textfield;
+}
+
+.textarea__y-Il1 {
+  width: 100%;
+  padding: var(--click-field-space-y) var(--click-field-space-x);
+  align-self: stretch;
+  border: none;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  outline: none;
+  resize: none;
+}
+
+.textarea__y-Il1::placeholder {
+  color: var(--click-field-color-placeholder-default);
+}
+
+.icon-button__b4bWG {
+  padding: var(--click-field-space-y) 0;
+  border: none;
+  background: transparent;
+  color: inherit;
+  outline: none;
+}
+
+.icon-button__b4bWG:not(:disabled) {
+  cursor: pointer;
+}
+
+.icon-wrapper__wvaLj:first-of-type {
+  padding-left: var(--click-field-space-gap);
+}
+
+.icon-wrapper__wvaLj:last-of-type {
+  padding-right: var(--click-field-space-x);
+}
+
+.start-content__2ejJV {
+  display: flex;
+  padding-left: var(--click-field-space-x);
+  align-items: center;
+  align-self: stretch;
+  gap: var(--click-field-space-gap);
+  cursor: text;
+}
+
+.end-content__xNk8- {
+  display: flex;
+  padding-right: var(--click-field-space-x);
+  flex-shrink: 0;
+  align-items: center;
+  align-self: stretch;
+  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);
@@ -482,134 +764,367 @@
 .text_align_right__azLA3 {
   text-align: right;
 }
-/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. iconButton) */
+/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. genericMenu) */
 
-.iconbutton__G-cEu {
-  padding: var(--click-button-iconButton-default-space-y)
-    var(--click-button-iconButton-default-space-x);
-  border: var(--click-button-stroke) solid;
-  border-radius: var(--click-button-iconButton-radii-all);
-  cursor: pointer;
+.generic-menu-panel__y8D6y {
+  display: flex;
+  overflow: hidden;
+  align-items: flex-start;
+  border: 1px solid var(--click-genericMenu-panel-color-stroke-default);
+  border-radius: var(--click-genericMenu-panel-radii-all);
+  background: var(--click-genericMenu-panel-color-background-default);
+  outline: none;
+  box-shadow: var(--click-genericMenu-panel-shadow-default);
+  pointer-events: auto;
 }
 
-.iconbutton_size_sm__tT3BV {
-  padding: var(--click-button-iconButton-sm-space-y)
-    var(--click-button-iconButton-sm-space-x);
+.generic-menu-panel_type_popover__DWcS4 {
+  max-width: var(--radix-popover-content-available-width);
+  max-height: var(--radix-popover-content-available-height);
 }
 
-.iconbutton_size_xs__CxWtP {
-  padding: var(--click-button-iconButton-xs-space-y)
-    var(--click-button-iconButton-xs-space-x);
+.generic-menu-panel_type_dropdown-menu__ezKZT {
+  max-width: var(--radix-dropdown-menu-content-available-width);
+  max-height: var(--radix-dropdown-menu-content-available-height);
 }
 
-.iconbutton_type_primary__QEfNk {
-  border-color: var(--click-button-iconButton-color-primary-stroke-default);
-  background-color: var(--click-button-iconButton-color-primary-background-default);
-  color: var(--click-button-iconButton-color-primary-text-default);
+.generic-menu-panel_type_context-menu__nu-Kt {
+  max-width: var(--radix-context-menu-content-available-width);
+  max-height: var(--radix-context-menu-content-available-height);
 }
 
-.iconbutton_type_primary__QEfNk:visited {
-  background-color: var(--click-button-iconButton-color-primary-background-default);
+.generic-menu-panel_show-arrow__hHyfA[data-side='bottom'] {
+  margin-top: -1px;
 }
 
-.iconbutton_type_primary__QEfNk:not([disabled]):hover {
-  border-color: var(--click-button-iconButton-color-primary-stroke-hover);
-  background-color: var(--click-button-iconButton-color-primary-background-hover);
-  color: var(--click-button-iconButton-color-primary-text-hover);
+.generic-menu-panel_show-arrow__hHyfA[data-side='top'] {
+  margin-bottom: 1px;
 }
 
-.iconbutton_type_primary__QEfNk:not([disabled]):focus,
-.iconbutton_type_primary__QEfNk:not([disabled]):active,
-.iconbutton_type_primary__QEfNk:not([disabled]):focus-within {
-  border-color: var(--click-button-iconButton-color-primary-stroke-active);
-  background-color: var(--click-button-iconButton-color-primary-background-active);
-  color: var(--click-button-iconButton-color-primary-text-active);
+.generic-menu-panel_show-arrow__hHyfA[data-side='left'] {
+  margin-right: -1px;
 }
 
-.iconbutton_type_secondary__qeL8h {
-  border-color: var(--click-button-iconButton-color-secondary-stroke-default);
-  background-color: var(--click-button-iconButton-color-secondary-background-default);
-  color: var(--click-button-iconButton-color-secondary-text-default);
+.generic-menu-panel_show-arrow__hHyfA[data-side='right'] {
+  margin-left: -1px;
 }
 
-.iconbutton_type_secondary__qeL8h:visited {
-  background-color: var(--click-button-iconButton-color-secondary-background-default);
+.generic-popover-menu-panel__TbbW1 {
+  display: flex;
+  z-index: 1;
+  padding: var(--click-popover-space-y) var(--click-popover-space-x);
+  overflow: hidden;
+  flex-direction: column;
+  align-items: flex-start;
+  border: 1px solid var(--click-popover-color-panel-stroke-default);
+  border-radius: var(--click-popover-radii-all);
+  background: var(--click-popover-color-panel-background-default);
+  outline: none;
+  box-shadow: var(--click-popover-shadow-default);
 }
 
-.iconbutton_type_secondary__qeL8h:not([disabled]):hover {
-  border-color: var(--click-button-iconButton-color-secondary-stroke-hover);
-  background-color: var(--click-button-iconButton-color-secondary-background-hover);
-  color: var(--click-button-iconButton-color-secondary-text-hover);
+.generic-popover-menu-panel_type_popover__eALQC {
+  max-width: var(--radix-popover-content-available-width);
+  max-height: var(--radix-popover-content-available-height);
 }
 
-.iconbutton_type_secondary__qeL8h:not([disabled]):focus,
-.iconbutton_type_secondary__qeL8h:not([disabled]):active,
-.iconbutton_type_secondary__qeL8h:not([disabled]):focus-within {
-  border-color: var(--click-button-iconButton-color-secondary-stroke-active);
-  background-color: var(--click-button-iconButton-color-secondary-background-active);
-  color: var(--click-button-iconButton-color-secondary-text-active);
+.generic-popover-menu-panel_type_hover-card__t0Wzp {
+  max-width: var(--radix-hover-card-content-available-width);
+  max-height: var(--radix-hover-card-content-available-height);
 }
 
-.iconbutton_type_ghost__nLh8i {
-  border-color: var(--click-button-iconButton-color-ghost-stroke-default);
-  background-color: var(--click-button-iconButton-color-ghost-background-default);
-  color: var(--click-button-iconButton-color-ghost-text-default);
+.generic-popover-menu-panel_show-arrow__dDH0c {
+  margin: -1px 0;
 }
 
-.iconbutton_type_ghost__nLh8i:visited {
-  background-color: var(--click-button-iconButton-color-ghost-background-default);
+.arrow__MVfZZ {
+  fill: var(--click-genericMenu-panel-color-background-default);
+  filter: drop-shadow(rgb(0 0 0 / 10%) 0 4px 6px);
+  stroke: var(--click-genericMenu-panel-color-stroke-default);
 }
 
-.iconbutton_type_ghost__nLh8i:not([disabled]):hover {
-  border-color: var(--click-button-iconButton-color-ghost-stroke-hover);
-  background-color: var(--click-button-iconButton-color-ghost-background-hover);
-  color: var(--click-button-iconButton-color-ghost-text-hover);
+.generic-menu-item__ApV25 {
+  display: flex;
+  position: relative;
+  /* stylelint-disable plugin/no-unsupported-browser-features, declaration-property-value-no-unknown -- the original rule used this same
+   width fallback chain (100% → -moz-available → -webkit-fill-available →
+   fill-available → stretch) so the item fills the available inline space. */
+  width: 100%;
+  width: -moz-available;
+  width: -webkit-fill-available;
+  width: fill-available;
+  width: stretch;
+  /* stylelint-enable plugin/no-unsupported-browser-features, declaration-property-value-no-unknown */
+  padding: var(--click-genericMenu-item-space-y) var(--click-genericMenu-item-space-x);
+  overflow: hidden;
+  justify-content: flex-start;
+  align-items: center;
+  gap: var(--click-genericMenu-item-space-gap);
+  background: var(--gmi-background-default);
+  color: var(--gmi-text-default);
+  font: var(--click-genericMenu-item-typography-label-default);
+  white-space: nowrap;
+  cursor: default;
+  text-overflow: ellipsis;
 }
 
-.iconbutton_type_ghost__nLh8i:not([disabled]):focus,
-.iconbutton_type_ghost__nLh8i:not([disabled]):active,
-.iconbutton_type_ghost__nLh8i:not([disabled]):focus-within {
-  border-color: var(--click-button-iconButton-color-ghost-stroke-active);
-  background-color: var(--click-button-iconButton-color-ghost-background-active);
-  color: var(--click-button-iconButton-color-ghost-text-active);
+.generic-menu-item_type_default__hWnNu {
+  --gmi-text-default: var(--click-genericMenu-item-color-default-text-default);
+  --gmi-text-hover: var(--click-genericMenu-item-color-default-text-hover);
+  --gmi-text-active: var(--click-genericMenu-item-color-default-text-active);
+  --gmi-text-disabled: var(--click-genericMenu-item-color-default-text-disabled);
+  --gmi-background-default: var(--click-genericMenu-item-color-default-background-default);
+  --gmi-background-hover: var(--click-genericMenu-item-color-default-background-hover);
+  --gmi-background-active: var(--click-genericMenu-item-color-default-background-active);
 }
 
-.iconbutton_type_danger__CjQg- {
-  border-color: var(--click-button-iconButton-color-danger-stroke-default);
-  background-color: var(--click-button-iconButton-color-danger-background-default);
-  color: var(--click-button-iconButton-color-danger-text-default);
+.generic-menu-item_type_danger__sqWb0 {
+  --gmi-text-default: var(--click-genericMenu-item-color-danger-text-default);
+  --gmi-text-hover: var(--click-genericMenu-item-color-danger-text-hover);
+  --gmi-text-active: var(--click-genericMenu-item-color-danger-text-active);
+  --gmi-text-disabled: var(--click-genericMenu-item-color-danger-text-disabled);
+  --gmi-background-default: var(--click-genericMenu-item-color-danger-background-default);
+  --gmi-background-hover: var(--click-genericMenu-item-color-danger-background-hover);
+  --gmi-background-active: var(--click-genericMenu-item-color-danger-background-active);
 }
 
-.iconbutton_type_danger__CjQg-:visited {
-  background-color: var(--click-button-iconButton-color-danger-background-default);
+.generic-menu-item__ApV25:focus {
+  outline: none;
 }
 
-.iconbutton_type_danger__CjQg-:not([disabled]):hover {
-  border-color: var(--click-button-iconButton-color-danger-stroke-hover);
-  background-color: var(--click-button-iconButton-color-danger-background-hover);
-  color: var(--click-button-iconButton-color-danger-text-hover);
+.generic-menu-item__ApV25[data-highlighted] {
+  background: var(--gmi-background-hover);
+  color: var(--gmi-text-hover);
+  font: var(--click-genericMenu-item-typography-label-hover);
+  cursor: pointer;
 }
 
-.iconbutton_type_danger__CjQg-:not([disabled]):focus,
-.iconbutton_type_danger__CjQg-:not([disabled]):active,
-.iconbutton_type_danger__CjQg-:not([disabled]):focus-within {
-  border-color: var(--click-button-iconButton-color-danger-stroke-active);
-  background-color: var(--click-button-iconButton-color-danger-background-active);
-  color: var(--click-button-iconButton-color-danger-text-active);
+[data-input-modality='keyboard'] .generic-menu-item__ApV25[data-highlighted] {
+  outline: 2px solid var(--click-global-color-accent-default);
+  outline-offset: -2px;
 }
 
-.iconbutton_type_info__Ue7wb {
-  border-color: var(--click-button-iconButton-color-info-stroke-default);
-  background-color: var(--click-button-iconButton-color-info-background-default);
-  color: var(--click-button-iconButton-color-info-text-default);
+.generic-menu-item__ApV25[data-state='open'] {
+  background: var(--gmi-background-hover);
+  color: var(--gmi-text-hover);
+  font: var(--click-genericMenu-item-typography-label-hover);
+  cursor: pointer;
 }
 
-.iconbutton_type_info__Ue7wb:visited {
-  background-color: var(--click-button-iconButton-color-info-background-default);
+.generic-menu-item__ApV25[data-state='checked'],
+.generic-menu-item__ApV25[data-selected='true'] {
+  background: var(--gmi-background-active);
+  color: var(--gmi-text-active);
+  font: var(--click-genericMenu-item-typography-label-active);
 }
 
-.iconbutton_type_info__Ue7wb:not([disabled]):hover {
-  border-color: var(--click-button-iconButton-color-info-stroke-hover);
+.generic-menu-item__ApV25[data-disabled] {
+  color: var(--gmi-text-disabled);
+  font: var(--click-genericMenu-item-typography-label-disabled);
+  pointer-events: none;
+}
+
+.generic-menu-item__ApV25:visited {
+  color: var(--gmi-text-default);
+}
+
+.generic-menu-item__ApV25:visited a {
+  color: var(--gmi-text-default);
+}
+
+.generic-menu-item__ApV25:hover .dropdown-arrow__e2s6p,
+.generic-menu-item__ApV25[data-state='open'] .dropdown-arrow__e2s6p {
+  left: 0.5rem;
+}
+
+.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) */
+  min-width: var(--click-genericMenu-item-size-minWidth);
+  overflow-y: auto;
+  flex-direction: column;
+}
+
+.dropdown-menu-item__dILwE {
+  display: flex;
+  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 {
+  padding: var(--click-button-iconButton-default-space-y)
+    var(--click-button-iconButton-default-space-x);
+  border: var(--click-button-stroke) solid;
+  border-radius: var(--click-button-iconButton-radii-all);
+  cursor: pointer;
+}
+
+.iconbutton_size_sm__tT3BV {
+  padding: var(--click-button-iconButton-sm-space-y)
+    var(--click-button-iconButton-sm-space-x);
+}
+
+.iconbutton_size_xs__CxWtP {
+  padding: var(--click-button-iconButton-xs-space-y)
+    var(--click-button-iconButton-xs-space-x);
+}
+
+.iconbutton_type_primary__QEfNk {
+  border-color: var(--click-button-iconButton-color-primary-stroke-default);
+  background-color: var(--click-button-iconButton-color-primary-background-default);
+  color: var(--click-button-iconButton-color-primary-text-default);
+}
+
+.iconbutton_type_primary__QEfNk:visited {
+  background-color: var(--click-button-iconButton-color-primary-background-default);
+}
+
+.iconbutton_type_primary__QEfNk:not([disabled]):hover {
+  border-color: var(--click-button-iconButton-color-primary-stroke-hover);
+  background-color: var(--click-button-iconButton-color-primary-background-hover);
+  color: var(--click-button-iconButton-color-primary-text-hover);
+}
+
+.iconbutton_type_primary__QEfNk:not([disabled]):focus,
+.iconbutton_type_primary__QEfNk:not([disabled]):active,
+.iconbutton_type_primary__QEfNk:not([disabled]):focus-within {
+  border-color: var(--click-button-iconButton-color-primary-stroke-active);
+  background-color: var(--click-button-iconButton-color-primary-background-active);
+  color: var(--click-button-iconButton-color-primary-text-active);
+}
+
+.iconbutton_type_secondary__qeL8h {
+  border-color: var(--click-button-iconButton-color-secondary-stroke-default);
+  background-color: var(--click-button-iconButton-color-secondary-background-default);
+  color: var(--click-button-iconButton-color-secondary-text-default);
+}
+
+.iconbutton_type_secondary__qeL8h:visited {
+  background-color: var(--click-button-iconButton-color-secondary-background-default);
+}
+
+.iconbutton_type_secondary__qeL8h:not([disabled]):hover {
+  border-color: var(--click-button-iconButton-color-secondary-stroke-hover);
+  background-color: var(--click-button-iconButton-color-secondary-background-hover);
+  color: var(--click-button-iconButton-color-secondary-text-hover);
+}
+
+.iconbutton_type_secondary__qeL8h:not([disabled]):focus,
+.iconbutton_type_secondary__qeL8h:not([disabled]):active,
+.iconbutton_type_secondary__qeL8h:not([disabled]):focus-within {
+  border-color: var(--click-button-iconButton-color-secondary-stroke-active);
+  background-color: var(--click-button-iconButton-color-secondary-background-active);
+  color: var(--click-button-iconButton-color-secondary-text-active);
+}
+
+.iconbutton_type_ghost__nLh8i {
+  border-color: var(--click-button-iconButton-color-ghost-stroke-default);
+  background-color: var(--click-button-iconButton-color-ghost-background-default);
+  color: var(--click-button-iconButton-color-ghost-text-default);
+}
+
+.iconbutton_type_ghost__nLh8i:visited {
+  background-color: var(--click-button-iconButton-color-ghost-background-default);
+}
+
+.iconbutton_type_ghost__nLh8i:not([disabled]):hover {
+  border-color: var(--click-button-iconButton-color-ghost-stroke-hover);
+  background-color: var(--click-button-iconButton-color-ghost-background-hover);
+  color: var(--click-button-iconButton-color-ghost-text-hover);
+}
+
+.iconbutton_type_ghost__nLh8i:not([disabled]):focus,
+.iconbutton_type_ghost__nLh8i:not([disabled]):active,
+.iconbutton_type_ghost__nLh8i:not([disabled]):focus-within {
+  border-color: var(--click-button-iconButton-color-ghost-stroke-active);
+  background-color: var(--click-button-iconButton-color-ghost-background-active);
+  color: var(--click-button-iconButton-color-ghost-text-active);
+}
+
+.iconbutton_type_danger__CjQg- {
+  border-color: var(--click-button-iconButton-color-danger-stroke-default);
+  background-color: var(--click-button-iconButton-color-danger-background-default);
+  color: var(--click-button-iconButton-color-danger-text-default);
+}
+
+.iconbutton_type_danger__CjQg-:visited {
+  background-color: var(--click-button-iconButton-color-danger-background-default);
+}
+
+.iconbutton_type_danger__CjQg-:not([disabled]):hover {
+  border-color: var(--click-button-iconButton-color-danger-stroke-hover);
+  background-color: var(--click-button-iconButton-color-danger-background-hover);
+  color: var(--click-button-iconButton-color-danger-text-hover);
+}
+
+.iconbutton_type_danger__CjQg-:not([disabled]):focus,
+.iconbutton_type_danger__CjQg-:not([disabled]):active,
+.iconbutton_type_danger__CjQg-:not([disabled]):focus-within {
+  border-color: var(--click-button-iconButton-color-danger-stroke-active);
+  background-color: var(--click-button-iconButton-color-danger-background-active);
+  color: var(--click-button-iconButton-color-danger-text-active);
+}
+
+.iconbutton_type_info__Ue7wb {
+  border-color: var(--click-button-iconButton-color-info-stroke-default);
+  background-color: var(--click-button-iconButton-color-info-background-default);
+  color: var(--click-button-iconButton-color-info-text-default);
+}
+
+.iconbutton_type_info__Ue7wb:visited {
+  background-color: var(--click-button-iconButton-color-info-background-default);
+}
+
+.iconbutton_type_info__Ue7wb:not([disabled]):hover {
+  border-color: var(--click-button-iconButton-color-info-stroke-hover);
   background-color: var(--click-button-iconButton-color-info-background-hover);
   color: var(--click-button-iconButton-color-info-text-hover);
 }
@@ -627,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;
@@ -803,23 +1434,165 @@
 .button__w1Is2[aria-pressed='true']:disabled {
   background: var(--click-button-group-color-background-disabled-active);
 }
-.button__2ZuB7 {
-  display: flex;
-  position: relative;
-  padding: var(--click-button-basic-space-y) var(--click-button-basic-space-x);
-  overflow: hidden;
-  flex-shrink: 0;
-  justify-content: center;
-  align-items: center;
-  gap: var(--click-button-basic-space-gap);
-  border: 1px solid transparent;
-  border-radius: var(--click-button-radii-all);
-  background: transparent;
-  color: inherit;
-  font: var(--click-button-basic-typography-label-default);
-  white-space: nowrap;
-  cursor: pointer;
-}
+@keyframes toast-hide__qiqT- {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes toast-slide-in__eHRae {
+  from {
+    transform: translateX(calc(100% + var(--viewport-padding)));
+  }
+
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes toast-swipe-out__P2S0b {
+  from {
+    transform: translateX(var(--radix-toast-swipe-end-x));
+  }
+
+  to {
+    transform: translateX(calc(100% + var(--viewport-padding)));
+  }
+}
+
+.toast__FLdHz {
+  display: flex;
+  width: 100%;
+  padding: var(--click-toast-space-y) var(--click-toast-space-x);
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--click-toast-space-gap);
+  border: 1px solid var(--click-toast-color-stroke-default);
+  border-radius: var(--click-toast-radii-all);
+  background: var(--click-global-color-background-default);
+  box-shadow: var(--click-toast-shadow);
+}
+
+.toast__FLdHz[data-state='open'] {
+  animation: toast-slide-in__eHRae 150ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.toast__FLdHz[data-state='closed'] {
+  animation: toast-hide__qiqT- 100ms ease-in;
+}
+
+.toast__FLdHz[data-swipe='move'] {
+  transform: translateX(var(--radix-toast-swipe-move-x));
+}
+
+.toast__FLdHz[data-swipe='cancel'] {
+  transition: transform 200ms ease-out;
+  transform: translateX(0);
+}
+
+.toast__FLdHz[data-swipe='end'] {
+  animation: toast-swipe-out__P2S0b 100ms ease-out;
+}
+
+.toast__header__dRLqI {
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  align-items: center;
+  gap: inherit;
+  color: var(--click-toast-color-title-default);
+  font: var(--click-toast-typography-title-default);
+}
+
+.toast__title__zdD-z {
+  flex: 1;
+}
+
+.toast__description-container__FuMRh {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: flex-end;
+  gap: inherit;
+  color: var(--click-toast-color-title-default);
+  font: var(--click-toast-typography-title-default);
+}
+
+.toast__description-content__UIC-z {
+  display: flex;
+  align-self: stretch;
+  gap: inherit;
+  color: var(--click-toast-color-description-default);
+  font: var(--click-toast-typography-description-default);
+}
+
+.toast__icon__-S-ea {
+  width: var(--click-toast-icon-size-width);
+  height: var(--click-toast-icon-size-height);
+}
+
+.toast__icon_type_default__3bZ6L {
+  color: var(--click-toast-color-icon-default);
+}
+
+.toast__icon_type_success__zI04e {
+  color: var(--click-toast-color-icon-success);
+}
+
+.toast__icon_type_warning__fTzn7 {
+  color: var(--click-toast-color-icon-warning);
+}
+
+.toast__icon_type_danger__I-F3N {
+  color: var(--click-toast-color-icon-danger);
+}
+
+.toast-viewport__bflY9 {
+  --viewport-padding: 25px;
+
+  display: flex;
+  position: fixed;
+  z-index: 2147483647;
+  bottom: 0;
+  width: var(--click-toast-size-width);
+  max-width: 100vw;
+  margin: 0;
+  padding: var(--viewport-padding);
+  flex-direction: column;
+  gap: var(--click-toast-space-gap);
+  outline: none;
+  list-style: none;
+}
+
+.toast-viewport_align_start__urykY {
+  left: 0;
+}
+
+.toast-viewport_align_end__QPpTu {
+  right: 0;
+}
+.button__2ZuB7 {
+  display: flex;
+  position: relative;
+  padding: var(--click-button-basic-space-y) var(--click-button-basic-space-x);
+  overflow: hidden;
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  gap: var(--click-button-basic-space-gap);
+  border: 1px solid transparent;
+  border-radius: var(--click-button-radii-all);
+  background: transparent;
+  color: inherit;
+  font: var(--click-button-basic-typography-label-default);
+  white-space: nowrap;
+  cursor: pointer;
+}
 
 .button_align-center__RdEYc {
   justify-content: center;
@@ -1075,6 +1848,23 @@
     animation: none;
   }
 }
+.content__UW4Fd {
+  --tooltip-max-width: initial;
+
+  display: flex;
+  max-width: var(--tooltip-max-width);
+  padding: var(--click-tooltip-space-y) var(--click-tooltip-space-x);
+  align-items: flex-start;
+  border-radius: var(--click-tooltip-radii-all);
+  background: var(--click-tooltip-color-background-default);
+  color: var(--click-tooltip-color-label-default);
+  font: var(--click-tooltip-typography-label-default);
+  white-space: pre-wrap;
+}
+
+.arrow__4zROk {
+  fill: var(--click-tooltip-color-background-default);
+}
 /* stylelint-disable-next-line block-no-empty -- base block required by BEM */
 .accordion__LVhhv {
 }
@@ -1383,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);
@@ -1757,113 +2644,368 @@
 .closeicon_state_info__qNJkh.closeicon_state_info__qNJkh {
   color: var(--click-badge-opaque-color-text-info);
 }
-.header__Cn2aH {
-  max-width: 100%;
-  gap: inherit;
-}
+/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. bigStat) */
+.big-stat__ZC5s7 {
+  --big-stat-max-width: initial;
 
-.description__4EWfD {
   display: flex;
-  width: 100%;
-  flex: 1;
+  box-sizing: border-box;
+  max-width: var(--big-stat-max-width, none);
+  min-height: var(--big-stat-height, auto);
+  padding: var(--click-bigStat-space-all);
+  justify-content: center;
+  border: var(--click-bigStat-stroke) solid var(--big-stat-stroke-color);
+  border-radius: var(--click-bigStat-radii-all);
+  background-color: var(--big-stat-background);
+  color: var(--big-stat-label-color);
+  font: var(--big-stat-label-font);
+}
+
+/* State drives the color/background tokens. The `default` and `muted`
+   typography tokens are byte-identical, so font is dispatched on size only. */
+.big-stat_state_default__YsXXh {
+  --big-stat-background: var(--click-bigStat-color-background-default);
+  --big-stat-label-color: var(--click-bigStat-color-label-default);
+  --big-stat-title-color: var(--click-bigStat-color-title-default);
+  --big-stat-stroke-color: var(--click-bigStat-color-stroke-default);
+}
+
+.big-stat_state_muted__FI-y- {
+  --big-stat-background: var(--click-bigStat-color-background-muted);
+  --big-stat-label-color: var(--click-bigStat-color-label-muted);
+  --big-stat-title-color: var(--click-bigStat-color-title-muted);
+  --big-stat-stroke-color: var(--click-bigStat-color-stroke-muted);
+}
+
+.big-stat_size_lg__B4I3T {
+  --big-stat-label-font: var(--click-bigStat-typography-lg-label-default);
+  --big-stat-title-font: var(--click-bigStat-typography-lg-title-default);
+}
+
+.big-stat_size_sm__q2e-M {
+  --big-stat-label-font: var(--click-bigStat-typography-sm-label-default);
+  --big-stat-title-font: var(--click-bigStat-typography-sm-title-default);
+}
+
+.big-stat_error__jprpL {
+  --big-stat-label-color: var(--click-bigStat-color-label-danger);
+  --big-stat-stroke-color: var(--click-bigStat-color-stroke-danger);
+}
+
+.big-stat_order_title-top__ccjZB {
   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);
+.big-stat_order_title-bottom__Mpgww {
+  flex-direction: column-reverse;
 }
 
-.contentwrapper__u9SOr {
-  display: flex;
+.big-stat_fill-width__FxoMI {
   width: 100%;
-  flex-direction: row;
 }
 
-.contentwrapper_size_md__lNQPZ {
-  gap: var(--click-card-horizontal-space-md-gap);
+.big-stat_spacing_sm__Xx-wJ {
+  gap: var(--click-bigStat-space-sm-gap);
 }
 
-.contentwrapper_size_sm__GDVYr {
-  gap: var(--click-card-horizontal-space-sm-gap);
+.big-stat_spacing_lg__MTWck {
+  gap: var(--click-bigStat-space-lg-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;
-  }
+.big-stat__label__MAyV0 {
+  color: var(--big-stat-label-color);
+  font: var(--big-stat-label-font);
 }
 
-.icontextcontentwrapper__D6gbe {
+.big-stat__title__ql7Gx {
+  color: var(--big-stat-title-color);
+  font: var(--big-stat-title-font);
+}
+/* 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%;
+  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;
 }
 
-.icontextcontentwrapper_alignment_top__rsOIa {
-  align-items: flex-start;
+:where(.base-button__6Tguv):hover {
+  font: var(--click-button-basic-typography-label-hover);
 }
 
-.icontextcontentwrapper_alignment_center__GiQqi {
-  align-items: center;
+:where(.base-button__6Tguv):active,
+:where(.base-button__6Tguv):focus {
+  font: var(--click-button-basic-typography-label-active);
 }
 
-.icontextcontentwrapper_size_md__vl0h- {
-  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;
 }
 
-.icontextcontentwrapper_size_sm__VNsIL {
-  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;
 }
-
-.wrapper__gPLR5 {
+.split-button__EX3XI {
   display: inline-flex;
-  width: 100%;
-  max-width: 100%;
-  justify-content: flex-start;
+  width: revert;
+  overflow: hidden;
   align-items: center;
-  align-self: auto;
-  border: 1px solid var(--card-stroke-default);
-  border-radius: var(--click-card-horizontal-radii-all);
-  background: var(--card-bg-default);
-  color: var(--card-title-default);
-  font: var(--click-card-horizontal-typography-title-default);
+  border: 1px solid var(--split-stroke-default);
+  border-radius: var(--click-button-radii-all);
+  user-select: none;
 }
 
-.wrapper_color_default__cSCG8 {
-  --card-bg-default: var(--click-card-horizontal-default-color-background-default);
-  --card-bg-hover: var(--click-card-horizontal-default-color-background-hover);
-  --card-bg-active: var(--click-card-horizontal-default-color-background-active);
-  --card-bg-disabled: var(--click-card-horizontal-default-color-background-disabled);
-  --card-title-default: var(--click-card-horizontal-default-color-title-default);
-  --card-title-hover: var(--click-card-horizontal-default-color-title-hover);
-  --card-title-active: var(--click-card-horizontal-default-color-title-active);
-  --card-title-disabled: var(--click-card-horizontal-default-color-title-disabled);
-  --card-stroke-default: var(--click-card-horizontal-default-color-stroke-default);
-  --card-stroke-hover: var(--click-card-horizontal-default-color-stroke-hover);
-  --card-stroke-active: var(--click-card-horizontal-default-color-stroke-active);
-  --card-stroke-disabled: var(--click-card-horizontal-default-color-stroke-disabled);
-  --card-desc-default: var(--click-card-horizontal-default-color-description-default);
-  --card-desc-hover: var(--click-card-horizontal-default-color-description-hover);
-  --card-desc-active: var(--click-card-horizontal-default-color-description-active);
-  --card-desc-disabled: var(--click-card-horizontal-default-color-description-disabled);
+.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%;
 }
 
-.wrapper_color_muted__DFlsG {
-  --card-bg-default: var(--click-card-horizontal-muted-color-background-default);
-  --card-bg-hover: var(--click-card-horizontal-muted-color-background-hover);
-  --card-bg-active: var(--click-card-horizontal-muted-color-background-active);
-  --card-bg-disabled: var(--click-card-horizontal-muted-color-background-disabled);
-  --card-title-default: var(--click-card-horizontal-muted-color-title-default);
-  --card-title-hover: var(--click-card-horizontal-muted-color-title-hover);
-  --card-title-active: var(--click-card-horizontal-muted-color-title-active);
-  --card-title-disabled: var(--click-card-horizontal-muted-color-title-disabled);
-  --card-stroke-default: var(--click-card-horizontal-muted-color-stroke-default);
+.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%;
+  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;
+}
+
+.icontextcontentwrapper_size_md__vl0h- {
+  gap: var(--click-card-horizontal-space-md-gap);
+}
+
+.icontextcontentwrapper_size_sm__VNsIL {
+  gap: var(--click-card-horizontal-space-sm-gap);
+}
+
+.wrapper__gPLR5 {
+  display: inline-flex;
+  width: 100%;
+  max-width: 100%;
+  justify-content: flex-start;
+  align-items: center;
+  align-self: auto;
+  border: 1px solid var(--card-stroke-default);
+  border-radius: var(--click-card-horizontal-radii-all);
+  background: var(--card-bg-default);
+  color: var(--card-title-default);
+  font: var(--click-card-horizontal-typography-title-default);
+}
+
+.wrapper_color_default__cSCG8 {
+  --card-bg-default: var(--click-card-horizontal-default-color-background-default);
+  --card-bg-hover: var(--click-card-horizontal-default-color-background-hover);
+  --card-bg-active: var(--click-card-horizontal-default-color-background-active);
+  --card-bg-disabled: var(--click-card-horizontal-default-color-background-disabled);
+  --card-title-default: var(--click-card-horizontal-default-color-title-default);
+  --card-title-hover: var(--click-card-horizontal-default-color-title-hover);
+  --card-title-active: var(--click-card-horizontal-default-color-title-active);
+  --card-title-disabled: var(--click-card-horizontal-default-color-title-disabled);
+  --card-stroke-default: var(--click-card-horizontal-default-color-stroke-default);
+  --card-stroke-hover: var(--click-card-horizontal-default-color-stroke-hover);
+  --card-stroke-active: var(--click-card-horizontal-default-color-stroke-active);
+  --card-stroke-disabled: var(--click-card-horizontal-default-color-stroke-disabled);
+  --card-desc-default: var(--click-card-horizontal-default-color-description-default);
+  --card-desc-hover: var(--click-card-horizontal-default-color-description-hover);
+  --card-desc-active: var(--click-card-horizontal-default-color-description-active);
+  --card-desc-disabled: var(--click-card-horizontal-default-color-description-disabled);
+}
+
+.wrapper_color_muted__DFlsG {
+  --card-bg-default: var(--click-card-horizontal-muted-color-background-default);
+  --card-bg-hover: var(--click-card-horizontal-muted-color-background-hover);
+  --card-bg-active: var(--click-card-horizontal-muted-color-background-active);
+  --card-bg-disabled: var(--click-card-horizontal-muted-color-background-disabled);
+  --card-title-default: var(--click-card-horizontal-muted-color-title-default);
+  --card-title-hover: var(--click-card-horizontal-muted-color-title-hover);
+  --card-title-active: var(--click-card-horizontal-muted-color-title-active);
+  --card-title-disabled: var(--click-card-horizontal-muted-color-title-disabled);
+  --card-stroke-default: var(--click-card-horizontal-muted-color-stroke-default);
   --card-stroke-hover: var(--click-card-horizontal-muted-color-stroke-hover);
   --card-stroke-active: var(--click-card-horizontal-muted-color-stroke-active);
   --card-stroke-disabled: var(--click-card-horizontal-muted-color-stroke-disabled);
@@ -2254,6 +3396,157 @@ 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;
+  max-width: 420px;
+  padding: var(--click-card-secondary-space-all);
+  flex-direction: column;
+  gap: var(--click-card-secondary-space-gap);
+  border: 1px solid var(--click-card-secondary-color-stroke-default);
+  border-radius: var(--click-card-secondary-radii-all);
+  background-color: var(--click-card-secondary-color-background-default);
+  box-shadow: none;
+}
+
+.wrapper_shadow__jXc8Y {
+  box-shadow: var(--shadow-1);
+}
+
+.wrapper__x6K6U:hover,
+.wrapper__x6K6U :focus {
+  background-color: var(--click-card-secondary-color-background-hover);
+  cursor: pointer;
+}
+
+.wrapper__x6K6U:hover .infolink__text__XbiBm,
+.wrapper__x6K6U:hover .infolink__icon__PBRPu,
+.wrapper__x6K6U :focus .infolink__text__XbiBm,
+.wrapper__x6K6U :focus .infolink__icon__PBRPu {
+  color: var(--click-card-secondary-color-link-hover);
+}
+
+.wrapper__x6K6U[aria-disabled='true'],
+.wrapper__x6K6U[aria-disabled='true']:hover,
+.wrapper__x6K6U[aria-disabled='true']:focus,
+.wrapper__x6K6U[aria-disabled='true']:active {
+  border: 1px solid var(--click-card-secondary-color-stroke-disabled);
+  background-color: var(--click-card-secondary-color-background-disabled);
+  color: var(--click-card-secondary-color-title-disabled);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.wrapper__x6K6U[aria-disabled='true'] .infolink__text__XbiBm,
+.wrapper__x6K6U[aria-disabled='true'] .infolink__icon__PBRPu {
+  color: var(--click-card-secondary-color-link-disabled);
+}
+
+.header__q8HJ0 {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.headerleft__o-Mu5 {
+  display: flex;
+  align-items: center;
+  gap: var(--click-card-secondary-space-gap);
+}
+
+.headerleft__o-Mu5 h3,
+.headerleft__o-Mu5 svg {
+  color: var(--click-global-color-text-default);
+}
+
+.headerleft_disabled__1uiTV h3,
+.headerleft_disabled__1uiTV svg {
+  color: var(--click-global-color-text-muted);
+}
+
+.content__OqlXq {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+}
+
+.customicon__LTYpO {
+  width: var(--click-image-lg-size-width);
+  height: var(--click-image-lg-size-height);
+}
+
+.infolink__Sv6Xq {
+  display: flex;
+  align-items: center;
+  gap: var(--click-card-secondary-space-link-gap);
+  color: var(--click-card-secondary-color-link-default);
+  text-decoration: none;
+}
+
+/* stylelint-disable-next-line no-descending-specificity -- icon color defined
+   alongside its size to mirror the source styled(Icon) rule; the hover/disabled
+   link-color rules above intentionally win via the wrapper-scoped cascade. */
+.infolink__icon__PBRPu {
+  width: var(--click-image-md-size-width);
+  height: var(--click-image-md-size-height);
+  color: var(--click-card-secondary-color-link-default);
+}
+
+/* stylelint-disable-next-line block-no-empty -- base element required by BEM */
+.infolink__text__XbiBm {
+}
 /* The wrapper class is applied alongside FormRoot's styled-components class.
    The .wrapper.wrapper double-class boost matches the specificity behavior of
    the original `styled(FormRoot)` chain so these overrides reliably beat
@@ -2401,25 +3694,126 @@ div:active + .topbadge__E79OZ {
   cursor: not-allowed;
 }
 /* stylelint-enable no-descending-specificity */
-/* 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`
-     keyword on `width` is widely supported on evergreen browsers; the original
-     rule used the same value. */
-  width: fit-content;
-  border: none;
-  background: transparent;
-  cursor: pointer;
+.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);
 }
 
-@keyframes overlay-show__YkYqH {
-  0% {
-    opacity: 0;
-  }
+.codeblock__highlighter__t4Xol {
+  margin: 0;
+  padding: 0;
+  background: transparent;
+}
 
-  100% {
-    opacity: 1;
-  }
+.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;
+  flex-direction: column;
+}
+
+.actions__14jg2 {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--click-dialog-space-gap);
+}
+
+/* 640px = theme.breakpoint.sizes.sm; CSS media queries can't reference JS theme tokens */
+/* stylelint-disable-next-line media-feature-range-notation -- prefix notation
+   required for browser compatibility per .browserslistrc */
+@media (max-width: 640px) {
+  .actions__14jg2 {
+    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`
+     keyword on `width` is widely supported on evergreen browsers; the original
+     rule used the same value. */
+  width: fit-content;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+}
+
+@keyframes overlay-show__YkYqH {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
 }
 
 @keyframes content-show__V3LjD {
@@ -2498,6 +3892,383 @@ 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;
+}
+
+.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;
@@ -2622,37 +4393,443 @@ div:active + .topbadge__E79OZ {
 .progressclosebutton_dismissable__p5mDJ {
   visibility: visible;
 }
-.hover-card__trigger__tMcTR {
-  /* stylelint-disable-next-line plugin/no-unsupported-browser-features -- `fit-content`
-     keyword on `width` is widely supported on evergreen browsers; the original
-     styled-components rule used the same value. */
-  width: fit-content;
+/* 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);
 }
-.link__Ly-e3 {
-  display: inline-flex;
-  margin: 0;
-  margin-right: var(--link-gap);
-  align-items: center;
-  gap: var(--link-gap);
-  color: var(--click-global-color-text-link-default);
-  font: var(--link-font);
-  text-decoration: none;
+/* 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 */
 }
 
-.link__Ly-e3:hover,
-.link__Ly-e3:focus {
-  color: var(--click-global-color-text-link-hover);
-  text-decoration: underline;
-  cursor: pointer;
-  transition: var(--transition-default);
+.tabs__jY99b::-webkit-scrollbar {
+  height: 0;
 }
 
-.link__Ly-e3:visited {
-  color: var(--click-global-color-text-link-default);
+.tabs-sortable__7e-D1 {
+  display: flex;
 }
 
-/* The original emitted theme.click.link.space.sm.gap for size xs/sm and
-   theme.click.link.space.md.gap for md/lg. Alias to a local custom property
+.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);
+}
+
+.indicator__ZD0YM[data-indicator='neutral']::after {
+  background: var(--click-alert-color-text-neutral);
+}
+
+.indicator__ZD0YM[data-indicator='danger']::after {
+  background: var(--click-alert-color-text-danger);
+}
+
+.indicator__ZD0YM[data-indicator='warning']::after {
+  background: var(--click-alert-color-text-warning);
+}
+
+.indicator__ZD0YM[data-indicator='info']::after {
+  background: var(--click-alert-color-text-info);
+}
+
+.tab-content__JX6iV {
+  display: flex;
+  overflow: hidden;
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+  align-items: center;
+  gap: var(--click-tabs-fileTabs-space-gap);
+}
+
+.tab-content-text__zXnlM {
+  display: inline-block;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.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 {
+    width: 0;
+  }
+
+  to {
+    /* stylelint-disable-next-line plugin/no-unsupported-browser-features -- `fit-content`
+       is the original animation target width */
+    width: fit-content;
+  }
+}
+
+.content__fwsoV {
+  display: flex;
+  top: 0;
+  bottom: 0;
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features -- `fit-content`
+     is the original sizing keyword; the animation expands width to fit-content */
+  width: fit-content;
+  max-width: 100%;
+  overflow: hidden;
+  flex-direction: column;
+  align-items: center;
+  gap: 0;
+  background: var(--click-flyout-color-background-default);
+  animation: flyout-animation-width__LabkI 500ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+.content_align_start__bXW3C {
+  left: 0;
+  border-right: 1px solid var(--click-flyout-color-stroke-default);
+  box-shadow: var(--click-flyout-shadow-reverse);
+}
+
+.content_align_end__zF1Qd {
+  right: 0;
+  border-left: 1px solid var(--click-flyout-color-stroke-default);
+  box-shadow: var(--click-flyout-shadow-default);
+}
+
+.content_no-shadow__jiMRV {
+  box-shadow: none;
+}
+
+.content_type_default__F2-WU {
+  padding: 0 var(--click-flyout-space-default-x);
+}
+
+.content_type_inline__mKVTA {
+  padding: 0 var(--click-flyout-space-inline-x);
+}
+
+.content_strategy_relative__KVF6H {
+  position: relative;
+  height: 100%;
+}
+
+.content_strategy_absolute__6z1Tg {
+  position: absolute;
+  height: auto;
+}
+
+.content_strategy_fixed__Dtihd {
+  position: fixed;
+  height: auto;
+}
+
+/* stylelint-disable-next-line media-feature-range-notation -- prefix notation
+   required for browser compatibility per .browserslistrc */
+@media (max-width: 1024px) {
+  .content__fwsoV {
+    overflow: hidden;
+    transition: 0.3s ease-in-out;
+  }
+
+  .content_strategy_relative__KVF6H {
+    position: absolute !important;
+  }
+
+  .content_align_start__bXW3C {
+    transform: translateX(calc(50px - 100%));
+  }
+
+  .content_align_end__zF1Qd {
+    transform: translateX(calc(100% - 50px));
+  }
+
+  .content_align_start__bXW3C:hover,
+  .content_align_start__bXW3C.active__VBaS3,
+  .content_align_start__bXW3C:focus-within {
+    right: auto;
+    transform: translateX(0);
+  }
+
+  .content_align_end__zF1Qd:hover,
+  .content_align_end__zF1Qd.active__VBaS3,
+  .content_align_end__zF1Qd:focus-within {
+    left: auto;
+    transform: translateX(0);
+  }
+}
+
+.container__QQcvn {
+  display: flex;
+  width: var(--flyout-width);
+  max-width: 100%;
+  gap: inherit;
+  flex-flow: column nowrap;
+}
+
+.element__vbaHR {
+  /* stylelint-disable plugin/no-unsupported-browser-features, declaration-property-value-no-unknown -- the original
+     used this same max-width fallback chain (100% → -webkit-fill-available →
+     fill-available → stretch) so the element fills the available inline space. */
+  max-width: 100%;
+  max-width: -webkit-fill-available;
+  max-width: fill-available;
+  max-width: stretch;
+  /* stylelint-enable plugin/no-unsupported-browser-features, declaration-property-value-no-unknown */
+}
+
+/* Doubled class: this element renders as a <Container>, whose base class also
+   sets `padding`/`gap`. Doubling outranks the single-class Container base so the
+   Flyout override wins regardless of CSS-module bundle order (matches the
+   styled(Container) override semantics). */
+.element_type_default__gEAPS.element_type_default__gEAPS {
+  padding: 0 var(--click-flyout-space-default-content-x);
+  gap: var(--click-flyout-space-default-gap);
+}
+
+.element_type_inline__3AK66.element_type_inline__3AK66 {
+  padding: 0 var(--click-flyout-space-inline-content-x);
+  gap: var(--click-flyout-space-inline-gap);
+}
+
+/* stylelint-disable-next-line block-no-empty -- base element required by BEM */
+.header__xoWbL {
+}
+
+.header_type_default__jnnp8.header_type_default__jnnp8 {
+  padding: var(--click-flyout-space-default-y) var(--click-flyout-space-default-y)
+    0 var(--click-flyout-space-default-y);
+  gap: var(--click-flyout-space-default-content-row-gap)
+    var(--click-flyout-space-default-content-column-gap);
+}
+
+.header_type_inline__ZwZwK.header_type_inline__ZwZwK {
+  padding: var(--click-flyout-space-inline-y) var(--click-flyout-space-inline-y) 0
+    var(--click-flyout-space-inline-y);
+  gap: var(--click-flyout-space-inline-content-row-gap)
+    var(--click-flyout-space-inline-content-column-gap);
+}
+
+.title__XWfvS {
+  margin: 0;
+  padding: 0;
+  color: var(--click-flyout-color-title-default);
+}
+
+.title_type_default__RKLIT {
+  font: var(--click-flyout-typography-default-title-default);
+}
+
+.title_type_inline__Gfz6L {
+  font: var(--click-flyout-typography-inline-title-default);
+}
+
+.description__RQLMp {
+  margin: 0;
+  padding: 0;
+  color: var(--click-flyout-color-description-default);
+}
+
+.description_type_default__-M3Et {
+  font: var(--click-flyout-typography-default-description-default);
+}
+
+.description_type_inline__1lim3 {
+  font: var(--click-flyout-typography-inline-description-default);
+}
+
+/* Doubled class: renders as a <Container> whose base sets `width`. */
+.body__aKC9P.body__aKC9P {
+  width: var(--flyout-width);
+  max-width: 100%;
+}
+
+.body_align_default__u0bH8.body_align_default__u0bH8 {
+  margin-top: 0;
+}
+
+.body_align_top__cSSni.body_align_top__cSSni {
+  margin-top: -1rem;
+}
+
+/* Doubled class: renders as a <Container> whose base sets `width`. */
+.footer-container__bzuJr.footer-container__bzuJr {
+  width: var(--flyout-width);
+  max-width: 100%;
+}
+
+/* stylelint-disable-next-line block-no-empty -- base element required by BEM */
+.footer__EGRZo {
+}
+
+.footer_type_default__Fx8Bs.footer_type_default__Fx8Bs {
+  padding: var(--click-flyout-space-default-y) var(--click-flyout-space-default-content-x);
+  gap: var(--click-flyout-space-default-content-row-gap)
+    var(--click-flyout-space-default-content-column-gap);
+}
+
+.footer_type_inline__2Xmxa.footer_type_inline__2Xmxa {
+  padding: var(--click-flyout-space-inline-y) var(--click-flyout-space-inline-content-x);
+  gap: var(--click-flyout-space-inline-content-row-gap)
+    var(--click-flyout-space-inline-content-column-gap);
+}
+
+.code-block__Rb7dS {
+  display: flex;
+  height: 100%;
+}
+
+.code-block__Rb7dS pre {
+  flex: 1;
+  overflow-wrap: break-word;
+}
+
+.code-block__Rb7dS pre code {
+  display: inline-block;
+  max-width: calc(100% - 1rem);
+}
+.hover-card__trigger__tMcTR {
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features -- `fit-content`
+     keyword on `width` is widely supported on evergreen browsers; the original
+     styled-components rule used the same value. */
+  width: fit-content;
+}
+.link__Ly-e3 {
+  display: inline-flex;
+  margin: 0;
+  margin-right: var(--link-gap);
+  align-items: center;
+  gap: var(--link-gap);
+  color: var(--click-global-color-text-link-default);
+  font: var(--link-font);
+  text-decoration: none;
+}
+
+.link__Ly-e3:hover,
+.link__Ly-e3:focus {
+  color: var(--click-global-color-text-link-hover);
+  text-decoration: underline;
+  cursor: pointer;
+  transition: var(--transition-default);
+}
+
+.link__Ly-e3:visited {
+  color: var(--click-global-color-text-link-default);
+}
+
+/* The original emitted theme.click.link.space.sm.gap for size xs/sm and
+   theme.click.link.space.md.gap for md/lg. Alias to a local custom property
    so the gap/margin-right rule on .link stays single-source. */
 .link_size_xs__kYknu,
 .link_size_sm__Qqpi3 {
@@ -3289,32 +5466,463 @@ div:active + .topbadge__E79OZ {
 .wrapper_collapsible_true__8ANnP {
   --title-pad-left: 0;
 }
-/* The wrapper class is applied alongside FormRoot's styled-components class.
-   The .wrapper.wrapper double-class boost matches the specificity behavior of
-   the original `styled(FormRoot)` chain so these overrides reliably beat
-   FormRoot's `align-items: flex-start` regardless of stylesheet insertion
-   order between CSS Modules and the runtime-injected styled-components. */
-.wrapper__kudO9.wrapper__kudO9 {
-  /* stylelint-disable-next-line plugin/no-unsupported-browser-features -- `fit-content`
-     keyword on `max-width` is widely supported on evergreen browsers; the original
-     styled-components rule used the same value. */
-  max-width: fit-content;
-  align-items: center;
+/* 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) */
 
-.switch__hgdMu {
-  position: relative;
-  width: var(--click-switch-size-width);
-  height: var(--click-switch-size-height);
-  padding: 0;
-  border: 1px solid var(--click-switch-color-stroke-default);
-  border-radius: var(--click-switch-radii-all);
-  background-color: var(--click-switch-color-background-default);
+.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;
 }
 
-.switch__hgdMu[data-state='checked'] {
-  border: 1px solid var(--click-switch-color-stroke-active);
+.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;
+  gap: var(--click-checkbox-space-gap);
+}
+
+.radio-group_inline__Bn4-S {
+  flex-direction: row;
+}
+
+.radio-group_inline_false__OXI3T {
+  flex-direction: column;
+}
+
+.radio-group_error__cijEQ label {
+  color: var(--click-field-color-label-error);
+}
+
+/* The item class is applied alongside FormRoot's styled-components class.
+   The .item.item double-class boost matches the specificity behavior of the
+   original `styled(FormRoot)` chain so these overrides reliably beat FormRoot's
+   own declarations regardless of stylesheet insertion order between CSS Modules
+   and the runtime-injected styled-components. */
+.item__W9-K2.item__W9-K2 {
+  display: flex;
+  width: auto;
+  padding: var(--click-checkbox-space-all);
+  align-items: center;
+  gap: var(--click-checkbox-space-gap);
+}
+
+.radio-input__KMmKv {
+  display: flex;
+  width: 1rem;
+  height: 1rem;
+  justify-content: center;
+  align-items: center;
+  border: 1px solid var(--click-radio-color-stroke-default);
+  border-radius: var(--click-radio-radii-all);
+  background: var(--click-radio-color-background-default);
+  outline: none;
+  cursor: pointer;
+}
+
+.radio-input__KMmKv:hover {
+  background: var(--click-radio-color-background-hover);
+}
+
+.radio-input__KMmKv[data-state='checked'] {
+  border-color: var(--click-radio-color-stroke-active);
+  background: var(--click-radio-color-background-active);
+}
+
+/* stylelint-disable no-descending-specificity -- disabled state intentionally
+   defined after the checked state to mirror the source cascade order; matches
+   the styled-components rule which used a nested `&[data-disabled]` block placed
+   after `&[data-state="checked"]`. */
+.radio-input__KMmKv[data-disabled] {
+  border-color: var(--click-radio-color-stroke-disabled);
+  background: var(--click-radio-color-background-disabled);
+}
+
+.radio-indicator__rrk6W {
+  background: var(--click-radio-color-background-default);
+}
+
+.radio-indicator__rrk6W::after {
+  content: '';
+  display: block;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background-color: var(--click-radio-color-indicator-default);
+}
+
+.radio-indicator__rrk6W::after:hover {
+  background: var(--click-radio-color-indicator-hover);
+}
+
+.radio-indicator__rrk6W[data-state='checked'] {
+  background: var(--click-radio-color-background-active);
+}
+
+.radio-indicator__rrk6W[data-state='checked']::after {
+  background: var(--click-radio-color-indicator-active);
+}
+
+.radio-indicator__rrk6W:hover {
+  background: var(--click-radio-color-background-hover);
+}
+
+.radio-indicator__rrk6W[data-disabled] {
+  background: var(--click-radio-color-background-disabled);
+}
+
+.radio-indicator__rrk6W[data-disabled]::after {
+  background: var(--click-radio-color-indicator-disabled);
+}
+/* stylelint-enable no-descending-specificity */
+/* The wrapper class is applied alongside FormRoot's styled-components class.
+   The .wrapper.wrapper double-class boost matches the specificity behavior of
+   the original `styled(FormRoot)` chain so these overrides reliably beat
+   FormRoot's `align-items: flex-start` regardless of stylesheet insertion
+   order between CSS Modules and the runtime-injected styled-components. */
+.wrapper__kudO9.wrapper__kudO9 {
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features -- `fit-content`
+     keyword on `max-width` is widely supported on evergreen browsers; the original
+     styled-components rule used the same value. */
+  max-width: fit-content;
+  align-items: center;
+}
+
+.switch__hgdMu {
+  position: relative;
+  width: var(--click-switch-size-width);
+  height: var(--click-switch-size-height);
+  padding: 0;
+  border: 1px solid var(--click-switch-color-stroke-default);
+  border-radius: var(--click-switch-radii-all);
+  background-color: var(--click-switch-color-background-default);
+  cursor: pointer;
+}
+
+.switch__hgdMu[data-state='checked'] {
+  border: 1px solid var(--click-switch-color-stroke-active);
   background-color: var(--click-switch-color-background-active);
 }
 
@@ -3354,6 +5962,683 @@ div:active + .topbadge__E79OZ {
   background-color: var(--click-switch-color-indicator-disabled);
 }
 /* stylelint-enable no-descending-specificity */
+/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. iconButton) */
+.table__Dkosn {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.table__wrapper__M-WJs {
+  width: 100%;
+  height: 100%;
+  overflow-x: auto;
+  border: var(--click-table-cell-stroke) solid var(--click-table-global-color-stroke-default);
+  border-radius: var(--click-table-radii-all);
+}
+
+.table__table__9BB0L {
+  width: 100%;
+  overflow: visible;
+  border-collapse: collapse;
+  table-layout: fixed;
+}
+
+[data-mobile-layout='list'] .table__table__9BB0L {
+  /* stylelint-disable-next-line media-feature-range-notation -- prefix notation
+     required for browser compatibility per .browserslistrc */
+  @media (max-width: 768px) {
+    border: none;
+    table-layout: auto;
+  }
+}
+
+/* stylelint-disable-next-line block-no-empty -- base element required by BEM */
+.table__colgroup__dMZrG {
+}
+
+[data-mobile-layout='list'] .table__colgroup__dMZrG {
+  /* stylelint-disable-next-line media-feature-range-notation -- prefix notation
+     required for browser compatibility per .browserslistrc */
+  @media (max-width: 768px) {
+    display: none;
+  }
+}
+
+.table__thead__jQQMo tr {
+  overflow: hidden;
+  border-bottom: var(--click-table-cell-stroke) solid var(--click-table-row-color-stroke-default);
+  background-color: var(--click-table-header-color-background-default);
+}
+
+[data-mobile-layout='list'] .table__thead__jQQMo {
+  /* stylelint-disable-next-line media-feature-range-notation -- prefix notation
+     required for browser compatibility per .browserslistrc */
+  @media (max-width: 768px) {
+    display: none;
+  }
+}
+
+.table__header__gQiaC {
+  color: var(--click-table-header-color-title-default);
+  font: var(--click-table-header-title-default);
+  text-align: left;
+}
+
+.table__header_size_sm__-twnG {
+  padding: var(--click-table-header-cell-space-sm-y) var(--click-table-body-cell-space-sm-x);
+}
+
+.table__header_size_md__H62Z4 {
+  padding: var(--click-table-header-cell-space-md-y) var(--click-table-body-cell-space-md-x);
+}
+
+.table__header_resizable__2y5fn {
+  position: relative;
+}
+
+.table__header-content__R-kr- {
+  display: flex;
+  justify-content: start;
+  align-items: center;
+  gap: inherit;
+}
+
+.table__header-content_interactive__7lV67 {
+  cursor: pointer;
+}
+
+.table__resizer__m6w0b {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 24px;
+  height: 100%;
+  border-radius: 0.5rem;
+  cursor: col-resize;
+  transition: opacity 0.2s;
+  transform: translateX(50%);
+  user-select: none;
+}
+
+.table__resizer__m6w0b:hover {
+  opacity: 0.6;
+}
+
+.table__resizer__m6w0b::before {
+  content: ' ';
+  display: inline-block;
+  position: relative;
+  top: 25%;
+  left: 50%;
+  width: 2px;
+  height: 20px;
+  background: var(--click-table-header-color-checkbox-border-default);
+  transform: translateX(-50%);
+}
+
+.table__resizer__m6w0b:focus-visible {
+  opacity: 1;
+  outline: 2px solid var(--click-global-color-outline-default);
+  outline-offset: 2px;
+}
+
+.table__sort-icon__i-kkT {
+  transition: all 200ms;
+}
+
+.table__sort-icon_dir_asc__iYjL2 {
+  transform: rotate(0deg);
+}
+
+.table__sort-icon_dir_desc__e78-c {
+  transform: rotate(180deg);
+}
+
+/* stylelint-disable-next-line block-no-empty -- base element required by BEM */
+.table__tbody__SPG5M {
+}
+
+[data-mobile-layout='list'] .table__tbody__SPG5M {
+  /* stylelint-disable-next-line media-feature-range-notation -- prefix notation
+     required for browser compatibility per .browserslistrc */
+  @media (max-width: 768px) {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+}
+
+.table__row__T3tP6 {
+  --table-row-height: initial;
+  opacity: 1;
+
+  height: var(--table-row-height, auto);
+  overflow: hidden;
+  border-bottom: var(--click-table-cell-stroke) solid var(--click-table-row-color-stroke-default);
+  background-color: var(--click-table-row-color-background-default);
+  cursor: default;
+}
+
+.table__row_active__7CQZj {
+  background-color: var(--click-table-row-color-background-active);
+}
+
+.table__row__T3tP6:active {
+  background-color: var(--click-table-row-color-background-active);
+}
+
+.table__row__T3tP6:hover {
+  background-color: var(--click-table-row-color-background-hover);
+}
+
+.table__row_disabled__YICW5 {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.table__row__T3tP6:last-of-type,
+.table__row__T3tP6:last-child {
+  border-bottom: none;
+}
+
+[data-mobile-layout='list'] .table__row__T3tP6 {
+  /* stylelint-disable-next-line media-feature-range-notation -- prefix notation
+     required for browser compatibility per .browserslistrc */
+  @media (max-width: 768px) {
+    display: flex;
+    position: relative;
+    flex-wrap: wrap;
+    border: var(--click-table-cell-stroke) solid var(--click-table-row-color-stroke-default);
+    border-radius: var(--click-table-radii-all);
+  }
+}
+
+[data-mobile-layout='list'] .table__row_selectable__Or4hH {
+  /* stylelint-disable-next-line media-feature-range-notation -- prefix notation
+     required for browser compatibility per .browserslistrc */
+  @media (max-width: 768px) {
+    padding-left: calc(
+      var(--click-table-body-cell-space-sm-x) + var(--click-table-body-cell-space-sm-x) +
+        var(--click-checkbox-size-all)
+    );
+  }
+}
+
+[data-mobile-layout='list'] .table__row_show-actions__DfOOZ {
+  /* stylelint-disable-next-line media-feature-range-notation -- prefix notation
+     required for browser compatibility per .browserslistrc */
+  @media (max-width: 768px) {
+    padding-right: calc(
+      var(--click-table-body-cell-space-sm-x) + var(--click-table-body-cell-space-sm-x) +
+        var(--click-image-sm-size-width) + var(--click-button-iconButton-default-space-x) +
+        var(--click-button-iconButton-default-space-x)
+    );
+  }
+}
+
+.table__data__KkzjS {
+  overflow: hidden;
+  color: var(--click-table-row-color-text-default);
+  font: var(--click-table-cell-text-default);
+}
+
+.table__data_size_sm__rfLCF {
+  padding: var(--click-table-body-cell-space-sm-y) var(--click-table-body-cell-space-sm-x);
+}
+
+.table__data_size_md__CNOHs {
+  padding: var(--click-table-body-cell-space-md-y) var(--click-table-body-cell-space-md-x);
+}
+
+[data-mobile-layout='list'] .table__data__KkzjS {
+  /* stylelint-disable-next-line media-feature-range-notation -- prefix notation
+     required for browser compatibility per .browserslistrc */
+  @media (max-width: 768px) {
+    width: auto;
+    min-width: 40%;
+    padding: var(--click-table-body-cell-space-sm-y) var(--click-table-body-cell-space-sm-x);
+  }
+}
+
+.table__spanned-data__t3S-m {
+  text-align: center;
+}
+
+.table__select-data__EpxHa {
+  overflow: hidden;
+  color: var(--click-table-row-color-text-default);
+  font: var(--click-table-cell-text-default);
+}
+
+.table__select-data_size_sm__SPaL9 {
+  padding: var(--click-table-body-cell-space-sm-y) var(--click-table-body-cell-space-sm-x);
+}
+
+.table__select-data_size_md__6pKZv {
+  padding: var(--click-table-body-cell-space-md-y) var(--click-table-body-cell-space-md-x);
+}
+
+[data-mobile-layout='list'] .table__select-data__EpxHa {
+  /* stylelint-disable-next-line media-feature-range-notation -- prefix notation
+     required for browser compatibility per .browserslistrc */
+  @media (max-width: 768px) {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: auto;
+    padding: var(--click-table-body-cell-space-sm-y) var(--click-table-body-cell-space-sm-x);
+    align-self: stretch;
+    border-right: var(--click-table-cell-stroke) solid var(--click-table-row-color-stroke-default);
+  }
+}
+
+.table__actions-cell__Oo0QI {
+  overflow: hidden;
+  color: var(--click-table-row-color-text-default);
+  font: var(--click-table-cell-text-default);
+}
+
+.table__actions-cell_size_sm__zm-mr {
+  padding: var(--click-table-body-cell-space-sm-y) var(--click-table-body-cell-space-sm-x);
+}
+
+.table__actions-cell_size_md__JYsyT {
+  padding: var(--click-table-body-cell-space-md-y) var(--click-table-body-cell-space-md-x);
+}
+
+[data-mobile-layout='list'] .table__actions-cell__Oo0QI {
+  /* stylelint-disable-next-line media-feature-range-notation -- prefix notation
+     required for browser compatibility per .browserslistrc */
+  @media (max-width: 768px) {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: auto;
+    padding: var(--click-table-body-cell-space-sm-y) var(--click-table-body-cell-space-sm-x);
+    align-self: stretch;
+    border-left: 1px solid var(--click-table-row-color-stroke-default);
+  }
+}
+
+.table__actions__kkZYZ {
+  display: flex;
+  overflow: hidden;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+[data-mobile-layout='list'] .table__actions__kkZYZ {
+  /* stylelint-disable-next-line media-feature-range-notation -- prefix notation
+     required for browser compatibility per .browserslistrc */
+  @media (max-width: 768px) {
+    overflow: auto;
+    flex-flow: column nowrap;
+  }
+}
+
+.table__mobile-header__dABkX {
+  display: none;
+  color: var(--click-table-row-color-label-default);
+  font: var(--click-table-cell-label-default);
+}
+
+[data-mobile-layout='list'] .table__mobile-header__dABkX {
+  /* stylelint-disable-next-line media-feature-range-notation -- prefix notation
+     required for browser compatibility per .browserslistrc */
+  @media (max-width: 768px) {
+    display: block;
+  }
+}
+
+.table__mobile-actions__-qiPM {
+  display: none;
+}
+
+[data-mobile-layout='list'] .table__mobile-actions__-qiPM {
+  /* stylelint-disable-next-line media-feature-range-notation -- prefix notation
+     required for browser compatibility per .browserslistrc */
+  @media (max-width: 768px) {
+    display: flex;
+    padding: 0 var(--click-table-body-cell-space-sm-x);
+    justify-content: space-between;
+    align-items: center;
+  }
+}
+
+.table__custom-message__txWk5 {
+  display: flex;
+  justify-content: center;
+  gap: 0.5rem;
+}
+
+.table__edit-button__y1xmf:disabled {
+  background: transparent;
+}
+
+.table__close-button__ja-o3:disabled {
+  background: transparent;
+}
+
+.table__close-button__ja-o3 svg {
+  transition: transform 200ms;
+}
+
+.table__close-button_deleted__6KxWh svg {
+  transform: rotate(45deg);
+}
+
+.table__text-wrapped__YwR9S {
+  display: inline-block;
+  max-width: 100%;
+  word-break: break-all;
+  overflow-wrap: break-word;
+}
+.stepper__ZgysL {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  align-items: flex-start;
+  counter-reset: vertical-stepper;
+}
+
+.step__eY9Kr {
+  --step-padding-bottom: var(--step-padding-bottom-default);
+  --step-connector-stroke: var(--step-connector-stroke-incomplete);
+
+  display: flex;
+  position: relative;
+  box-sizing: content-box;
+  width: 100%;
+  padding: 0;
+  padding-bottom: var(--step-padding-bottom);
+  flex-direction: column;
+  gap: var(--step-gap-y) var(--step-gap-x);
+}
+
+.step_type_numbered__Nurpd {
+  --step-gap-y: var(--click-stepper-vertical-numbered-content-space-gap-y);
+  --step-gap-x: var(--click-stepper-vertical-numbered-content-space-gap-x);
+  --step-padding-bottom-default: var(
+    --click-stepper-vertical-numbered-content-space-bottom-default
+  );
+  --step-padding-bottom-active: var(
+    --click-stepper-vertical-numbered-content-space-bottom-active
+  );
+  --step-connector-top: var(--click-stepper-vertical-numbered-step-size-height);
+  --step-connector-left: calc(
+    var(--click-stepper-vertical-numbered-step-size-width) / 2
+  );
+  --step-connector-width: var(
+    --click-stepper-vertical-numbered-connector-size-width
+  );
+  --step-connector-stroke-incomplete: var(
+    --click-stepper-vertical-numbered-connector-color-stroke-incomplete
+  );
+  --step-connector-stroke-complete: var(
+    --click-stepper-vertical-numbered-connector-color-stroke-complete
+  );
+  --step-connector-stroke-active: var(
+    --click-stepper-vertical-numbered-connector-color-stroke-active
+  );
+}
+
+.step_type_bulleted__xa6va {
+  --step-gap-y: var(--click-stepper-vertical-bulleted-content-space-gap-y);
+  --step-gap-x: var(--click-stepper-vertical-bulleted-content-space-gap-x);
+  --step-padding-bottom-default: var(
+    --click-stepper-vertical-bulleted-content-space-bottom-default
+  );
+  --step-padding-bottom-active: var(
+    --click-stepper-vertical-bulleted-content-space-bottom-active
+  );
+  --step-connector-top: var(--click-stepper-vertical-bulleted-step-size-height);
+  --step-connector-left: calc(
+    var(--click-stepper-vertical-bulleted-step-size-width) / 2
+  );
+  --step-connector-width: var(
+    --click-stepper-vertical-bulleted-connector-size-width
+  );
+  --step-connector-stroke-incomplete: var(
+    --click-stepper-vertical-bulleted-connector-color-stroke-incomplete
+  );
+  --step-connector-stroke-complete: var(
+    --click-stepper-vertical-bulleted-connector-color-stroke-complete
+  );
+  --step-connector-stroke-active: var(
+    --click-stepper-vertical-bulleted-connector-color-stroke-active
+  );
+}
+
+.step_open__klC-e {
+  --step-padding-bottom: var(--step-padding-bottom-active);
+}
+
+.step_status_complete__VGJWi {
+  --step-connector-stroke: var(--step-connector-stroke-complete);
+}
+
+.step_status_active__rQLtX {
+  --step-connector-stroke: var(--step-connector-stroke-active);
+}
+
+.step__eY9Kr:not(:last-of-type)::before {
+  content: "";
+  position: absolute;
+  top: var(--step-connector-top);
+  left: var(--step-connector-left);
+  box-sizing: content-box;
+  width: var(--step-connector-width);
+  height: 100%;
+  background: var(--step-connector-stroke);
+}
+
+.step__trigger__UM7J2 {
+  display: flex;
+  width: 100%;
+  padding: 0;
+  flex-direction: row;
+  align-items: center;
+  gap: inherit;
+  border: none;
+  background: transparent;
+  cursor: not-allowed;
+}
+
+.step__trigger_status_active__9hgV8 {
+  cursor: default;
+}
+
+.step__trigger_status_complete__mVt0I {
+  cursor: pointer;
+}
+
+.step__bubble__JqiD4 {
+  --bubble-background: var(--bubble-background-incomplete);
+  --bubble-stroke: var(--bubble-stroke-incomplete);
+  --bubble-icon: var(--bubble-icon-incomplete);
+
+  display: grid;
+  position: relative;
+  box-sizing: content-box;
+  width: var(--bubble-size);
+  height: var(--bubble-size);
+  border: 2px solid var(--bubble-stroke);
+  border-radius: var(--bubble-radii);
+  background: var(--bubble-background);
+  color: var(--bubble-icon);
+  font: var(--click-stepper-vertical-numbered-step-typography-number-default);
+  counter-increment: vertical-stepper;
+  place-items: center;
+}
+
+.step__bubble_type_numbered__0Mq85 {
+  --bubble-size: var(--click-stepper-vertical-numbered-step-size-width);
+  --bubble-radii: var(--click-stepper-vertical-numbered-step-radii-default);
+  --bubble-background-incomplete: var(
+    --click-stepper-vertical-numbered-step-color-background-incomplete
+  );
+  --bubble-background-complete: var(
+    --click-stepper-vertical-numbered-step-color-background-complete
+  );
+  --bubble-background-active: var(
+    --click-stepper-vertical-numbered-step-color-background-active
+  );
+  --bubble-stroke-incomplete: var(
+    --click-stepper-vertical-numbered-step-color-stroke-incomplete
+  );
+  --bubble-stroke-complete: var(
+    --click-stepper-vertical-numbered-step-color-stroke-complete
+  );
+  --bubble-stroke-active: var(
+    --click-stepper-vertical-numbered-step-color-stroke-active
+  );
+  --bubble-icon-incomplete: var(
+    --click-stepper-vertical-numbered-step-color-icon-incomplete
+  );
+  --bubble-icon-complete: var(
+    --click-stepper-vertical-numbered-step-color-icon-complete
+  );
+  --bubble-icon-active: var(
+    --click-stepper-vertical-numbered-step-color-icon-active
+  );
+}
+
+.step__bubble_type_bulleted__upwgF {
+  --bubble-size: var(--click-stepper-vertical-bulleted-step-size-width);
+  --bubble-radii: var(--click-stepper-vertical-bulleted-step-radii-default);
+  --bubble-background-incomplete: var(
+    --click-stepper-vertical-bulleted-step-color-background-incomplete
+  );
+  --bubble-background-complete: var(
+    --click-stepper-vertical-bulleted-step-color-background-complete
+  );
+  --bubble-background-active: var(
+    --click-stepper-vertical-bulleted-step-color-background-active
+  );
+  --bubble-stroke-incomplete: var(
+    --click-stepper-vertical-bulleted-step-color-stroke-incomplete
+  );
+  --bubble-stroke-complete: var(
+    --click-stepper-vertical-bulleted-step-color-stroke-complete
+  );
+  --bubble-stroke-active: var(
+    --click-stepper-vertical-bulleted-step-color-stroke-active
+  );
+  --bubble-icon-incomplete: var(
+    --click-stepper-vertical-bulleted-step-color-icon-incomplete
+  );
+  --bubble-icon-complete: var(
+    --click-stepper-vertical-bulleted-step-color-icon-complete
+  );
+  --bubble-icon-active: var(
+    --click-stepper-vertical-bulleted-step-color-icon-active
+  );
+}
+
+.step__bubble_status_complete__pwF7A {
+  --bubble-background: var(--bubble-background-complete);
+  --bubble-stroke: var(--bubble-stroke-complete);
+  --bubble-icon: var(--bubble-icon-complete);
+}
+
+.step__bubble_status_active__8DpW9 {
+  --bubble-background: var(--bubble-background-active);
+  --bubble-stroke: var(--bubble-stroke-active);
+  --bubble-icon: var(--bubble-icon-active);
+}
+
+.step__bubble_type_numbered__0Mq85.step__bubble_status_incomplete__obFaf::before,
+.step__bubble_type_numbered__0Mq85.step__bubble_status_active__8DpW9::before {
+  content: counter(vertical-stepper);
+  box-sizing: content-box;
+  color: inherit;
+  font: inherit;
+}
+
+.step__bubble_type_bulleted__upwgF.step__bubble_status_complete__pwF7A::after {
+  content: "";
+  position: absolute;
+  box-sizing: content-box;
+  width: 50%;
+  height: 50%;
+  border-radius: inherit;
+  background: var(--click-stepper-vertical-bulleted-step-color-icon-complete);
+}
+
+.step__check__FLpAl {
+  color: inherit;
+}
+
+.step__check__FLpAl path {
+  stroke-width: 3;
+}
+
+.step__label__qeVN9 {
+  --label-color: var(--label-color-incomplete);
+
+  display: flex;
+  flex-direction: column;
+  gap: inherit;
+  color: var(--label-color);
+  font: var(--label-font);
+}
+
+.step__label_type_numbered__TfXtm {
+  --label-font: var(--click-stepper-vertical-numbered-typography-title-default);
+  --label-color-incomplete: var(
+    --click-stepper-vertical-numbered-color-title-incomplete
+  );
+  --label-color-complete: var(
+    --click-stepper-vertical-numbered-color-title-complete
+  );
+  --label-color-active: var(
+    --click-stepper-vertical-numbered-color-title-active
+  );
+}
+
+.step__label_type_bulleted__3l3aZ {
+  --label-font: var(--click-stepper-vertical-bulleted-typography-title-default);
+  --label-color-incomplete: var(
+    --click-stepper-vertical-bulleted-color-title-incomplete
+  );
+  --label-color-complete: var(
+    --click-stepper-vertical-bulleted-color-title-complete
+  );
+  --label-color-active: var(
+    --click-stepper-vertical-bulleted-color-title-active
+  );
+}
+
+.step__label_status_complete__Trs-h {
+  --label-color: var(--label-color-complete);
+}
+
+.step__label_status_active__b8vFI {
+  --label-color: var(--label-color-active);
+}
+
+.step__content__mslBh {
+  display: flex;
+  width: 100%;
+  padding-left: var(--content-padding-left);
+  flex-direction: column;
+}
+
+.step__content_type_numbered__Vo5Da {
+  --content-padding-left: var(
+    --click-stepper-vertical-numbered-content-space-left
+  );
+}
+
+.step__content_type_bulleted__RBhi8 {
+  --content-padding-left: var(
+    --click-stepper-vertical-bulleted-content-space-left
+  );
+}
 :root,
 [data-cui-theme="light"] {
   --click-accordion-sm-icon-size-height: 1rem;