@clickhouse/click-ui 0.6.2-rc2 → 0.7.0

package/dist/esm/click-ui.css

@@ -132,6 +132,227 @@
   width: var(--click-image-xxl-size-width);
   height: var(--click-image-xxl-size-height);
 }
+/* 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;
+}
 .label__RaRvM {
   color: var(--click-field-color-label-default);
   font: var(--click-field-typography-label-default);
@@ -482,6 +703,195 @@
 .text_align_right__azLA3 {
   text-align: right;
 }
+/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. genericMenu) */
+
+.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;
+}
+
+.generic-menu-panel_type_popover__DWcS4 {
+  max-width: var(--radix-popover-content-available-width);
+  max-height: var(--radix-popover-content-available-height);
+}
+
+.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);
+}
+
+.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);
+}
+
+.generic-menu-panel_show-arrow__hHyfA[data-side='bottom'] {
+  margin-top: -1px;
+}
+
+.generic-menu-panel_show-arrow__hHyfA[data-side='top'] {
+  margin-bottom: 1px;
+}
+
+.generic-menu-panel_show-arrow__hHyfA[data-side='left'] {
+  margin-right: -1px;
+}
+
+.generic-menu-panel_show-arrow__hHyfA[data-side='right'] {
+  margin-left: -1px;
+}
+
+.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);
+}
+
+.generic-popover-menu-panel_type_popover__eALQC {
+  max-width: var(--radix-popover-content-available-width);
+  max-height: var(--radix-popover-content-available-height);
+}
+
+.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);
+}
+
+.generic-popover-menu-panel_show-arrow__dDH0c {
+  margin: -1px 0;
+}
+
+.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);
+}
+
+.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;
+}
+
+.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);
+}
+
+.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);
+}
+
+.generic-menu-item__ApV25:focus {
+  outline: none;
+}
+
+.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;
+}
+
+[data-input-modality='keyboard'] .generic-menu-item__ApV25[data-highlighted] {
+  outline: 2px solid var(--click-global-color-accent-default);
+  outline-offset: -2px;
+}
+
+.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;
+}
+
+.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);
+}
+
+.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;
+}
+.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;
+}
 /* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. iconButton) */
 
 .iconbutton__G-cEu {
@@ -803,70 +1213,212 @@
 .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;
+  }
 }
 
-.button_align-center__RdEYc {
-  justify-content: center;
+@keyframes toast-slide-in__eHRae {
+  from {
+    transform: translateX(calc(100% + var(--viewport-padding)));
+  }
+
+  to {
+    transform: translateX(0);
+  }
 }
 
-.button_align-left__AmFEH {
-  justify-content: flex-start;
+@keyframes toast-swipe-out__P2S0b {
+  from {
+    transform: translateX(var(--radix-toast-swipe-end-x));
+  }
+
+  to {
+    transform: translateX(calc(100% + var(--viewport-padding)));
+  }
 }
 
-.button_fill_width__npU6- {
+.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);
 }
 
-.button_primary__5V6PJ {
-  border-color: var(--click-button-basic-color-primary-stroke-default);
-  background-color: var(--click-button-basic-color-primary-background-default);
-  color: var(--click-button-basic-color-primary-text-default);
+.toast__FLdHz[data-state='open'] {
+  animation: toast-slide-in__eHRae 150ms cubic-bezier(0.16, 1, 0.3, 1);
 }
 
-.button_primary__5V6PJ:disabled:not(.button_loading__n2tCt) {
-  border-color: var(--click-button-basic-color-primary-stroke-disabled);
-  background-color: var(--click-button-basic-color-primary-background-disabled);
-  color: var(--click-button-basic-color-primary-text-disabled);
-  font: var(--click-button-basic-typography-label-disabled);
-  cursor: not-allowed;
+.toast__FLdHz[data-state='closed'] {
+  animation: toast-hide__qiqT- 100ms ease-in;
 }
 
-.button_primary__5V6PJ:hover:not(:disabled) {
-  border-color: var(--click-button-basic-color-primary-stroke-hover);
-  background-color: var(--click-button-basic-color-primary-background-hover);
-  font: var(--click-button-basic-typography-label-hover);
-  transition: var(--click-transition-default);
+.toast__FLdHz[data-swipe='move'] {
+  transform: translateX(var(--radix-toast-swipe-move-x));
 }
 
-.button_primary__5V6PJ:focus-visible:not(:disabled) {
-  border-color: var(--click-button-basic-color-primary-stroke-active);
-  background-color: var(--click-button-basic-color-primary-background-active);
-  font: var(--click-button-basic-typography-label-active);
-  outline: 2px solid var(--click-button-basic-color-primary-stroke-active);
-  outline-offset: 2px;
+.toast__FLdHz[data-swipe='cancel'] {
+  transition: transform 200ms ease-out;
+  transform: translateX(0);
 }
 
-.button_primary__5V6PJ:active:not(:disabled),
-.button_primary__5V6PJ:focus:not(:focus-visible, :disabled) {
-  border-color: var(--click-button-basic-color-primary-stroke-active);
-  background-color: var(--click-button-basic-color-primary-background-active);
-  font: var(--click-button-basic-typography-label-active);
+.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;
+}
+
+.button_align-left__AmFEH {
+  justify-content: flex-start;
+}
+
+.button_fill_width__npU6- {
+  width: 100%;
+}
+
+.button_primary__5V6PJ {
+  border-color: var(--click-button-basic-color-primary-stroke-default);
+  background-color: var(--click-button-basic-color-primary-background-default);
+  color: var(--click-button-basic-color-primary-text-default);
+}
+
+.button_primary__5V6PJ:disabled:not(.button_loading__n2tCt) {
+  border-color: var(--click-button-basic-color-primary-stroke-disabled);
+  background-color: var(--click-button-basic-color-primary-background-disabled);
+  color: var(--click-button-basic-color-primary-text-disabled);
+  font: var(--click-button-basic-typography-label-disabled);
+  cursor: not-allowed;
+}
+
+.button_primary__5V6PJ:hover:not(:disabled) {
+  border-color: var(--click-button-basic-color-primary-stroke-hover);
+  background-color: var(--click-button-basic-color-primary-background-hover);
+  font: var(--click-button-basic-typography-label-hover);
+  transition: var(--click-transition-default);
+}
+
+.button_primary__5V6PJ:focus-visible:not(:disabled) {
+  border-color: var(--click-button-basic-color-primary-stroke-active);
+  background-color: var(--click-button-basic-color-primary-background-active);
+  font: var(--click-button-basic-typography-label-active);
+  outline: 2px solid var(--click-button-basic-color-primary-stroke-active);
+  outline-offset: 2px;
+}
+
+.button_primary__5V6PJ:active:not(:disabled),
+.button_primary__5V6PJ:focus:not(:focus-visible, :disabled) {
+  border-color: var(--click-button-basic-color-primary-stroke-active);
+  background-color: var(--click-button-basic-color-primary-background-active);
+  font: var(--click-button-basic-typography-label-active);
   outline: none;
 }
 
@@ -1075,6 +1627,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 {
 }
@@ -1757,6 +2326,83 @@
 .closeicon_state_info__qNJkh.closeicon_state_info__qNJkh {
   color: var(--click-badge-opaque-color-text-info);
 }
+/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. bigStat) */
+.big-stat__ZC5s7 {
+  --big-stat-max-width: initial;
+
+  display: flex;
+  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;
+}
+
+.big-stat_order_title-bottom__Mpgww {
+  flex-direction: column-reverse;
+}
+
+.big-stat_fill-width__FxoMI {
+  width: 100%;
+}
+
+.big-stat_spacing_sm__Xx-wJ {
+  gap: var(--click-bigStat-space-sm-gap);
+}
+
+.big-stat_spacing_lg__MTWck {
+  gap: var(--click-bigStat-space-lg-gap);
+}
+
+.big-stat__label__MAyV0 {
+  color: var(--big-stat-label-color);
+  font: var(--big-stat-label-font);
+}
+
+.big-stat__title__ql7Gx {
+  color: var(--big-stat-title-color);
+  font: var(--big-stat-title-font);
+}
 .header__Cn2aH {
   max-width: 100%;
   gap: inherit;
@@ -2254,6 +2900,105 @@ div:active + .topbadge__E79OZ {
 .title_align_right__483BF {
   text-align: right;
 }
+.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,6 +3146,26 @@ div:active + .topbadge__E79OZ {
   cursor: not-allowed;
 }
 /* stylelint-enable no-descending-specificity */
+.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;
+  }
+}
 /* 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`
@@ -2498,6 +3263,46 @@ div:active + .topbadge__E79OZ {
   color: var(--click-dialog-color-description-default);
   font: var(--click-dialog-typography-description-default);
 }
+.right-menu-content__0-EQz {
+  z-index: 1;
+  flex-direction: column;
+}
+
+.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;
+}
+.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;
+}
 .progressbar__21KMf {
   display: flex;
   min-height: 2px;
@@ -2622,21 +3427,252 @@ div:active + .topbadge__E79OZ {
 .progressclosebutton_dismissable__p5mDJ {
   visibility: visible;
 }
-.hover-card__trigger__tMcTR {
+@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`
-     keyword on `width` is widely supported on evergreen browsers; the original
-     styled-components rule used the same value. */
+     is the original sizing keyword; the animation expands width to fit-content */
   width: fit-content;
-}
-.link__Ly-e3 {
-  display: inline-flex;
-  margin: 0;
-  margin-right: var(--link-gap);
+  max-width: 100%;
+  overflow: hidden;
+  flex-direction: column;
   align-items: center;
-  gap: var(--link-gap);
-  color: var(--click-global-color-text-link-default);
-  font: var(--link-font);
-  text-decoration: none;
+  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,
@@ -3289,6 +4325,105 @@ div:active + .topbadge__E79OZ {
 .wrapper_collapsible_true__8ANnP {
   --title-pad-left: 0;
 }
+.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
@@ -3354,6 +4489,684 @@ 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;
+  z-index: 1;
+  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;