@clickhouse/click-ui 0.5.0 → 0.6.0-rc1

package/dist/esm/click-ui.css

@@ -1,264 +1,2340 @@
+.svg-wrapper__fkBYp {
+  display: flex;
+  padding: 0;
+  align-items: center;
+  border-radius: var(--border-radii-full);
+  background: var(--click-icon-color-background-default);
+  color: var(--svg-icon-color, currentcolor);
+}
+
+.svg-wrapper__fkBYp svg {
+  width: var(--svg-width, var(--click-image-md-size-width));
+  height: var(--svg-height, var(--click-image-md-size-height));
+}
+
+.svg-wrapper__fkBYp :is(path[stroke], svg[stroke]:not([stroke='none']), rect[stroke], circle[fill]) {
+  stroke: var(--svg-icon-color, currentcolor);
+}
+
+.svg-wrapper__fkBYp :is(path[fill], svg[fill]:not([fill='none']), rect[fill], circle[fill]) {
+  fill: var(--svg-icon-color, currentcolor);
+}
+
+.svg-wrapper_size_xs__iu6Dh {
+  --svg-state-padding: var(--click-icon-space-xs-all);
+}
+
+.svg-wrapper_size_xs__iu6Dh svg {
+  width: var(--svg-width, var(--click-image-xs-size-width));
+  height: var(--svg-height, var(--click-image-xs-size-height));
+}
+
+.svg-wrapper_size_sm__vPYwD {
+  --svg-state-padding: var(--click-icon-space-sm-all);
+}
+
+.svg-wrapper_size_sm__vPYwD svg {
+  width: var(--svg-width, var(--click-image-sm-size-width));
+  height: var(--svg-height, var(--click-image-sm-size-height));
+}
+
+.svg-wrapper_size_md__XKE27 {
+  --svg-state-padding: var(--click-icon-space-md-all);
+}
+
+.svg-wrapper_size_md__XKE27 svg {
+  width: var(--svg-width, var(--click-image-md-size-width));
+  height: var(--svg-height, var(--click-image-md-size-height));
+}
+
+.svg-wrapper_size_lg__71xI0 {
+  --svg-state-padding: var(--click-icon-space-lg-all);
+}
+
+.svg-wrapper_size_lg__71xI0 svg {
+  width: var(--svg-width, var(--click-image-lg-size-width));
+  height: var(--svg-height, var(--click-image-lg-size-height));
+}
+
+.svg-wrapper_size_xl__tOVHR {
+  --svg-state-padding: var(--click-icon-space-xl-all);
+}
+
+.svg-wrapper_size_xl__tOVHR svg {
+  width: var(--svg-width, var(--click-image-xl-size-width));
+  height: var(--svg-height, var(--click-image-xl-size-height));
+}
+
+.svg-wrapper_size_xxl__pKrjr {
+  --svg-state-padding: var(--click-icon-space-xxl-all);
+}
+
+.svg-wrapper_size_xxl__pKrjr svg {
+  width: var(--svg-width, var(--click-image-xxl-size-width));
+  height: var(--svg-height, var(--click-image-xxl-size-height));
+}
+
+.svg-wrapper_state_success__SG0rW {
+  padding: var(--svg-state-padding, var(--click-icon-space-md-all));
+  background: var(--click-icon-color-background-success);
+  color: var(--click-icon-color-text-success);
+}
+
+.svg-wrapper_state_warning__hzZtU {
+  padding: var(--svg-state-padding, var(--click-icon-space-md-all));
+  background: var(--click-icon-color-background-warning);
+  color: var(--click-icon-color-text-warning);
+}
+
+.svg-wrapper_state_danger__eGGpB {
+  padding: var(--svg-state-padding, var(--click-icon-space-md-all));
+  background: var(--click-icon-color-background-danger);
+  color: var(--click-icon-color-text-danger);
+}
+
+.svg-wrapper_state_info__VNIFj {
+  padding: var(--svg-state-padding, var(--click-icon-space-md-all));
+  background: var(--click-icon-color-background-info);
+  color: var(--click-icon-color-text-info);
+}
+
+.svg-image__X4D5L {
+  display: flex;
+  align-items: center;
+}
+
+.svg-image_size_xs__3cjNj {
+  width: var(--click-image-xs-size-width);
+  height: var(--click-image-xs-size-height);
+}
+
+.svg-image_size_sm__2nj5- {
+  width: var(--click-image-sm-size-width);
+  height: var(--click-image-sm-size-height);
+}
+
+.svg-image_size_md__VlGV0 {
+  width: var(--click-image-md-size-width);
+  height: var(--click-image-md-size-height);
+}
+
+.svg-image_size_lg__AwS66 {
+  width: var(--click-image-lg-size-width);
+  height: var(--click-image-lg-size-height);
+}
+
+.svg-image_size_xl__cAmRV {
+  width: var(--click-image-xl-size-width);
+  height: var(--click-image-xl-size-height);
+}
+
+.svg-image_size_xxl__oaQUY {
+  width: var(--click-image-xxl-size-width);
+  height: var(--click-image-xxl-size-height);
+}
+.label__RaRvM {
+  color: var(--click-field-color-label-default);
+  font: var(--click-field-typography-label-default);
+}
+
+/* Hover/focus rules only apply when neither disabled nor error is set, matching
+   the original styled-components behavior (which simply didn't emit them in
+   those states). The :not() chain also raises specificity above 0-1-0 so these
+   rules win over InputWrapper's `labelColor` override (a 0-1-0 single-class
+   styled-components selector injected later in the cascade). The .label_error
+   and .label_disabled modifiers below stay at 0-1-0 on purpose, so labelColor
+   continues to override them. */
+.label__RaRvM:not(.label_error__k6yT0, .label_disabled__8BGcG):hover {
+  color: var(--click-field-color-label-hover);
+  font: var(--click-field-typography-label-hover);
+}
+
+.label__RaRvM:not(.label_error__k6yT0, .label_disabled__8BGcG):focus,
+.label__RaRvM:not(.label_error__k6yT0, .label_disabled__8BGcG):focus-within {
+  color: var(--click-field-color-label-active);
+  font: var(--click-field-typography-label-active);
+}
+
+.label_error__k6yT0 {
+  color: var(--click-field-color-label-error);
+  font: var(--click-field-typography-label-error);
+}
+
+.label_disabled__8BGcG {
+  color: var(--click-field-color-label-disabled);
+  font: var(--click-field-typography-label-disabled);
+}
+.container__JMoiT {
+  display: var(--container-display, flex);
+  width: var(--container-width, 100%);
+  min-width: var(--container-min-width, auto);
+  max-width: var(--container-max-width, none);
+  height: var(--container-height);
+  min-height: var(--container-min-height);
+  max-height: var(--container-max-height);
+  padding: var(--container-padding);
+  overflow: var(--container-overflow);
+  flex: var(--container-grow);
+  flex-shrink: var(--container-shrink);
+  /* stylelint-disable declaration-block-no-redundant-longhand-properties -- flex-direction and flex-wrap are overridden independently by modifier classes, so the flex-flow shorthand can't be used */
+  flex-direction: row;
+  flex-wrap: nowrap;
+  /* stylelint-enable declaration-block-no-redundant-longhand-properties */
+  justify-content: start;
+  align-items: center;
+  gap: var(--container-gap);
+}
+
+.container_gap_none__bxc76 {
+  --container-gap: var(--click-container-gap-none);
+}
+
+.container_gap_xxs__HkKAF {
+  --container-gap: var(--click-container-gap-xxs);
+}
+
+.container_gap_xs__zrSVC {
+  --container-gap: var(--click-container-gap-xs);
+}
+
+.container_gap_sm__lVcQZ {
+  --container-gap: var(--click-container-gap-sm);
+}
+
+.container_gap_md__Vq3bB {
+  --container-gap: var(--click-container-gap-md);
+}
+
+.container_gap_lg__Zei2b {
+  --container-gap: var(--click-container-gap-lg);
+}
+
+.container_gap_xl__Tuq6H {
+  --container-gap: var(--click-container-gap-xl);
+}
+
+.container_gap_xxl__PuJSf {
+  --container-gap: var(--click-container-gap-xxl);
+}
+
+.container_padding_none__R5RME {
+  --container-padding: var(--click-container-space-none);
+}
+
+.container_padding_xxs__DLsuv {
+  --container-padding: var(--click-container-space-xxs);
+}
+
+.container_padding_xs__m6NTF {
+  --container-padding: var(--click-container-space-xs);
+}
+
+.container_padding_sm__d92oN {
+  --container-padding: var(--click-container-space-sm);
+}
+
+.container_padding_md__R9Z7f {
+  --container-padding: var(--click-container-space-md);
+}
+
+.container_padding_lg__MTjzd {
+  --container-padding: var(--click-container-space-lg);
+}
+
+.container_padding_xl__Q-MuJ {
+  --container-padding: var(--click-container-space-xl);
+}
+
+.container_padding_xxl__yoxF6 {
+  --container-padding: var(--click-container-space-xxl);
+}
+
+.container_orientation_horizontal__COuvp {
+  flex-direction: row;
+}
+
+.container_orientation_vertical__ozeKX {
+  flex-direction: column;
+}
+
+.container_wrap_nowrap__sQdYT {
+  flex-wrap: nowrap;
+}
+
+.container_wrap_wrap__m1DNy {
+  flex-wrap: wrap;
+}
+
+.container_wrap_wrap-reverse__XhrY7 {
+  flex-wrap: wrap-reverse;
+}
+
+.container_align-items_start__sLi-i {
+  align-items: start;
+}
+
+.container_align-items_center__tkH9z {
+  align-items: center;
+}
+
+.container_align-items_end__AGbnX {
+  align-items: end;
+}
+
+.container_align-items_stretch__UjUJL {
+  align-items: stretch;
+}
+
+.container_justify-content_start__X4TLa {
+  justify-content: start;
+}
+
+.container_justify-content_center__7BRVR {
+  justify-content: center;
+}
+
+.container_justify-content_space-between__7nJKC {
+  justify-content: space-between;
+}
+
+.container_justify-content_space-around__VeJeX {
+  justify-content: space-around;
+}
+
+.container_justify-content_space-evenly__0gIEO {
+  justify-content: space-evenly;
+}
+
+.container_justify-content_end__LWD4b {
+  justify-content: end;
+}
+
+.container_justify-content_left__MGZLQ {
+  justify-content: left;
+}
+
+.container_justify-content_right__RT5XP {
+  justify-content: right;
+}
+
+/* The source emitted invalid values (`max-width: auto`, `flex-direction: auto`)
+   in the non-responsive branches; browsers ignore them, so only `width` changes
+   below the breakpoint when isResponsive is false. The responsive branch is the
+   only one that overrides max-width and flex-direction. */
+/* stylelint-disable-next-line media-feature-range-notation -- prefix notation
+   required for browser compatibility per .browserslistrc */
+@media (max-width: 768px) {
+  .container_responsive__gaWH0 {
+    width: 100%;
+    max-width: none;
+    flex-direction: column;
+  }
+
+  .container_non-responsive_fill__n-5dw {
+    width: 100%;
+  }
+
+  .container_non-responsive_hug__TRqoP {
+    width: auto;
+  }
+}
+.text__78lq0 {
+  margin: 0;
+  color: var(--click-global-color-text-default);
+  font: var(--typography-styles-product-text-normal-md);
+  text-align: left;
+}
+
+.text_fill-width__zRuxC {
+  width: 100%;
+}
+
+/* font shorthand depends on both size and weight; one class per pairing
+   mirrors the single `font:` declaration emitted by styled-components. */
+
+.text_font_normal-xs__78uM- {
+  font: var(--typography-styles-product-text-normal-xs);
+}
+
+.text_font_normal-sm__nFGGC {
+  font: var(--typography-styles-product-text-normal-sm);
+}
+
+.text_font_normal-md__In-T2 {
+  font: var(--typography-styles-product-text-normal-md);
+}
+
+.text_font_normal-lg__WHd7I {
+  font: var(--typography-styles-product-text-normal-lg);
+}
+
+.text_font_medium-xs__KhN9o {
+  font: var(--typography-styles-product-text-medium-xs);
+}
+
+.text_font_medium-sm__zOR0K {
+  font: var(--typography-styles-product-text-medium-sm);
+}
+
+.text_font_medium-md__-svhL {
+  font: var(--typography-styles-product-text-medium-md);
+}
+
+.text_font_medium-lg__G8YvP {
+  font: var(--typography-styles-product-text-medium-lg);
+}
+
+.text_font_semibold-xs__MM2zu {
+  font: var(--typography-styles-product-text-semibold-xs);
+}
+
+.text_font_semibold-sm__2-9t1 {
+  font: var(--typography-styles-product-text-semibold-sm);
+}
+
+.text_font_semibold-md__o-5L5 {
+  font: var(--typography-styles-product-text-semibold-md);
+}
+
+.text_font_semibold-lg__0Tcyn {
+  font: var(--typography-styles-product-text-semibold-lg);
+}
+
+.text_font_bold-xs__WGk3B {
+  font: var(--typography-styles-product-text-bold-xs);
+}
+
+.text_font_bold-sm__-h2Ak {
+  font: var(--typography-styles-product-text-bold-sm);
+}
+
+.text_font_bold-md__IdFMh {
+  font: var(--typography-styles-product-text-bold-md);
+}
+
+.text_font_bold-lg__TAnMH {
+  font: var(--typography-styles-product-text-bold-lg);
+}
+
+.text_font_mono-xs__h2Ng9 {
+  font: var(--typography-styles-product-text-mono-xs);
+}
+
+.text_font_mono-sm__-TW-0 {
+  font: var(--typography-styles-product-text-mono-sm);
+}
+
+.text_font_mono-md__8WvNk {
+  font: var(--typography-styles-product-text-mono-md);
+}
+
+.text_font_mono-lg__1npTu {
+  font: var(--typography-styles-product-text-mono-lg);
+}
+
+.text_color_default__225Wd {
+  color: var(--click-global-color-text-default);
+}
+
+.text_color_muted__DpcbG {
+  color: var(--click-global-color-text-muted);
+}
+
+.text_color_danger__hphaQ {
+  color: var(--click-global-color-text-danger);
+}
+
+.text_color_disabled__noB1s {
+  color: var(--click-global-color-text-disabled);
+}
+
+.text_color_warning__OosOF {
+  color: var(--click-global-color-text-warning);
+}
+
+.text_align_left__W0fKP {
+  text-align: left;
+}
+
+.text_align_center__TjmiH {
+  text-align: center;
+}
+
+.text_align_right__azLA3 {
+  text-align: right;
+}
+/* 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);
+}
+
+.iconbutton_type_info__Ue7wb:not([disabled]):focus,
+.iconbutton_type_info__Ue7wb:not([disabled]):active,
+.iconbutton_type_info__Ue7wb:not([disabled]):focus-within {
+  border-color: var(--click-button-iconButton-color-info-stroke-active);
+  background-color: var(--click-button-iconButton-color-info-background-active);
+  color: var(--click-button-iconButton-color-info-text-active);
+}
+
+.iconbutton__G-cEu[disabled] {
+  background-color: var(--click-button-iconButton-color-disabled-background-default);
+  color: var(--click-button-iconButton-color-disabled-text-default);
+  cursor: not-allowed;
+}
+.buttongroup__9IkOe {
+  display: inline-flex;
+  box-sizing: border-box;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  border-radius: var(--click-button-group-radii-panel-all);
+  background: var(--click-button-group-color-background-panel);
+}
+
+.buttongroup_type_default__D1bYD {
+  padding: var(--click-button-group-space-panel-default-x)
+    var(--click-button-group-space-panel-default-y);
+  gap: var(--click-button-group-space-panel-default-gap);
+  border: 1px solid var(--click-button-group-color-panel-stroke-default);
+}
+
+.buttongroup_type_borderless__cAhx7 {
+  padding: var(--click-button-group-space-panel-borderless-x)
+    var(--click-button-group-space-panel-borderless-y);
+  gap: var(--click-button-group-space-panel-borderless-gap);
+  border: none;
+}
+
+.buttongroup_fillwidth__WzJlu {
+  width: 100%;
+}
+
+.button__w1Is2 {
+  display: flex;
+  box-sizing: border-box;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  border: none;
+  background: var(--click-button-group-color-background-default);
+  color: var(--click-button-group-color-text-default);
+  font: var(--click-button-group-typography-label-default);
+  cursor: pointer;
+}
+
+.button_type_default__G9UA1 {
+  padding: var(--click-button-group-space-button-default-y)
+    var(--click-button-group-space-button-default-x);
+  border-radius: var(--click-button-group-radii-button-default-all);
+}
+
+.button_type_borderless__PydeS {
+  padding: var(--click-button-group-space-button-borderless-y)
+    var(--click-button-group-space-button-borderless-x);
+  border-radius: var(--click-button-group-radii-button-borderless-all);
+}
+
+.button_fillwidth__lqIVG {
+  flex: 1;
+}
+
+.button__w1Is2[aria-pressed='true'] {
+  background: var(--click-button-group-color-background-active);
+  color: var(--click-button-group-color-text-active);
+  font: var(--click-button-group-typography-label-active);
+}
+
+.button__w1Is2:hover {
+  background: var(--click-button-group-color-background-hover);
+  color: var(--click-button-group-color-text-hover);
+  font: var(--click-button-group-typography-label-hover);
+}
+
+.button__w1Is2:disabled {
+  background: var(--click-button-group-color-background-disabled);
+  color: var(--click-button-group-color-text-disabled);
+  font: var(--click-button-group-typography-label-disabled);
+  cursor: not-allowed;
+}
+
+.button__w1Is2:disabled:active,
+.button__w1Is2:disabled:focus,
+.button__w1Is2:disabled[aria-pressed='true'] {
+  color: var(--click-button-group-color-text-disabled);
+}
+
+.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;
+  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;
+}
+
+.button_secondary__PXw0N {
+  border-color: var(--click-button-basic-color-secondary-stroke-default);
+  background-color: var(--click-button-basic-color-secondary-background-default);
+  color: var(--click-button-basic-color-secondary-text-default);
+}
+
+.button_secondary__PXw0N:disabled:not(.button_loading__n2tCt) {
+  border-color: var(--click-button-basic-color-secondary-stroke-disabled);
+  background-color: var(--click-button-basic-color-secondary-background-disabled);
+  color: var(--click-button-basic-color-secondary-text-disabled);
+  font: var(--click-button-basic-typography-label-disabled);
+  cursor: not-allowed;
+}
+
+.button_secondary__PXw0N:hover:not(:disabled) {
+  border-color: var(--click-button-basic-color-secondary-stroke-hover);
+  background-color: var(--click-button-basic-color-secondary-background-hover);
+  font: var(--click-button-basic-typography-label-hover);
+  transition: var(--click-transition-default);
+}
+
+.button_secondary__PXw0N:focus-visible:not(:disabled) {
+  border-color: var(--click-button-basic-color-secondary-stroke-active);
+  background-color: var(--click-button-basic-color-secondary-background-active);
+  font: var(--click-button-basic-typography-label-active);
+  outline: 2px solid var(--click-button-basic-color-secondary-stroke-active);
+  outline-offset: 2px;
+}
+
+.button_secondary__PXw0N:active:not(:disabled),
+.button_secondary__PXw0N:focus:not(:focus-visible, :disabled) {
+  border-color: var(--click-button-basic-color-secondary-stroke-active);
+  background-color: var(--click-button-basic-color-secondary-background-active);
+  font: var(--click-button-basic-typography-label-active);
+  outline: none;
+}
+
+.button_empty__GZ9s7 {
+  border-color: var(--click-button-basic-color-empty-stroke-default);
+  background-color: var(--click-button-basic-color-empty-background-default);
+  color: var(--click-button-basic-color-empty-text-default);
+}
+
+.button_empty__GZ9s7:disabled:not(.button_loading__n2tCt) {
+  border-color: var(--click-button-basic-color-empty-stroke-disabled);
+  background-color: var(--click-button-basic-color-empty-background-disabled);
+  color: var(--click-button-basic-color-empty-text-disabled);
+  font: var(--click-button-basic-typography-label-disabled);
+  cursor: not-allowed;
+}
+
+.button_empty__GZ9s7:hover:not(:disabled) {
+  border-color: var(--click-button-basic-color-empty-stroke-hover);
+  background-color: var(--click-button-basic-color-empty-background-hover);
+  font: var(--click-button-basic-typography-label-hover);
+  transition: var(--click-transition-default);
+}
+
+.button_empty__GZ9s7:focus-visible:not(:disabled) {
+  border-color: var(--click-button-basic-color-empty-stroke-active);
+  background-color: var(--click-button-basic-color-empty-background-active);
+  font: var(--click-button-basic-typography-label-active);
+  outline: 2px solid var(--click-button-basic-color-empty-stroke-active);
+  outline-offset: 2px;
+}
+
+.button_empty__GZ9s7:active:not(:disabled),
+.button_empty__GZ9s7:focus:not(:focus-visible, :disabled) {
+  border-color: var(--click-button-basic-color-empty-stroke-active);
+  background-color: var(--click-button-basic-color-empty-background-active);
+  font: var(--click-button-basic-typography-label-active);
+  outline: none;
+}
+
+.button_danger__0DN8k {
+  border-color: var(--click-button-basic-color-danger-stroke-default);
+  background-color: var(--click-button-basic-color-danger-background-default);
+  color: var(--click-button-basic-color-danger-text-default);
+}
+
+.button_danger__0DN8k:disabled:not(.button_loading__n2tCt) {
+  border-color: var(--click-button-basic-color-danger-stroke-disabled);
+  background-color: var(--click-button-basic-color-danger-background-disabled);
+  color: var(--click-button-basic-color-danger-text-disabled);
+  font: var(--click-button-basic-typography-label-disabled);
+  cursor: not-allowed;
+}
+
+.button_danger__0DN8k:hover:not(:disabled) {
+  border-color: var(--click-button-basic-color-danger-stroke-hover);
+  background-color: var(--click-button-basic-color-danger-background-hover);
+  font: var(--click-button-basic-typography-label-hover);
+  transition: var(--click-transition-default);
+}
+
+.button_danger__0DN8k:focus-visible:not(:disabled) {
+  border-color: var(--click-button-basic-color-danger-stroke-active);
+  background-color: var(--click-button-basic-color-danger-background-active);
+  font: var(--click-button-basic-typography-label-active);
+  outline: 2px solid var(--click-button-basic-color-danger-stroke-active);
+  outline-offset: 2px;
+}
+
+.button_danger__0DN8k:active:not(:disabled),
+.button_danger__0DN8k:focus:not(:focus-visible, :disabled) {
+  border-color: var(--click-button-basic-color-danger-stroke-active);
+  background-color: var(--click-button-basic-color-danger-background-active);
+  font: var(--click-button-basic-typography-label-active);
+  outline: none;
+}
+
+.button_loading__n2tCt {
+  cursor: not-allowed;
+}
+
+.button_loading__n2tCt::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background-size: 200px 100%;
+  background-repeat: no-repeat;
+  pointer-events: none;
+  animation: shimmer-fixed-width__lwKzt 1.5s ease-in-out infinite;
+}
+
+.button_fill_width__npU6-.button_loading__n2tCt::before {
+  background-size: 200% 100%;
+  background-repeat: repeat;
+  animation: shimmer-fill-width__jTIzk 1.5s ease-in-out infinite;
+}
+
+.button_primary__5V6PJ.button_loading__n2tCt,
+.button_secondary__PXw0N.button_loading__n2tCt,
+.button_danger__0DN8k.button_loading__n2tCt {
+  opacity: 0.7;
+}
+
+.button_empty__GZ9s7.button_loading__n2tCt {
+  opacity: 0.9;
+}
+
+.button_loading__n2tCt > * {
+  opacity: 0.7;
+}
+
+@keyframes shimmer-fixed-width__lwKzt {
+  0% {
+    background-position: -200px 0;
+  }
+
+  100% {
+    background-position: 200px 0;
+  }
+}
+
+@keyframes shimmer-fill-width__jTIzk {
+  0% {
+    background-position: 100% 0;
+  }
+
+  100% {
+    background-position: -100% 0;
+  }
+}
+
+.button_primary__5V6PJ.button_loading__n2tCt::before {
+  background-image: var(--click-button-basic-color-primary-background-loading);
+}
+
+.button_secondary__PXw0N.button_loading__n2tCt::before {
+  background-image: var(--click-button-basic-color-secondary-background-loading);
+}
+
+.button_empty__GZ9s7.button_loading__n2tCt::before {
+  background-image: var(--click-button-basic-color-empty-background-loading);
+}
+
+.button_danger__0DN8k.button_loading__n2tCt::before {
+  background-image: var(--click-button-basic-color-danger-background-loading);
+}
+
+.button__icon__e6c-f {
+  display: flex;
+  width: var(--click-button-basic-size-icon-all);
+  height: var(--click-button-basic-size-icon-all);
+  justify-content: center;
+  align-items: center;
+}
+
+.button__icon__e6c-f svg {
+  width: var(--click-button-basic-size-icon-all);
+  height: var(--click-button-basic-size-icon-all);
+}
+
+.button__label__tlatE {
+  display: inline-flex;
+  align-items: center;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .button_loading__n2tCt::before,
+  .button_fill_width__npU6-.button_loading__n2tCt::before {
+    animation: none;
+  }
+}
+.spacer__okdOd {
+  display: flex;
+  background: transparent;
+}
+
+.spacer_size_xs__-oP-2 {
+  padding: var(--click-spacer-horizontal-space-y-xs) var(--click-spacer-horizontal-space-x-all);
+}
+
+.spacer_size_sm__k6iFW {
+  padding: var(--click-spacer-horizontal-space-y-sm) var(--click-spacer-horizontal-space-x-all);
+}
+
+.spacer_size_md__rX0x5 {
+  padding: var(--click-spacer-horizontal-space-y-md) var(--click-spacer-horizontal-space-x-all);
+}
+
+.spacer_size_lg__PWKa0 {
+  padding: var(--click-spacer-horizontal-space-y-lg) var(--click-spacer-horizontal-space-x-all);
+}
+
+.spacer_size_xl__IrjcH {
+  padding: var(--click-spacer-horizontal-space-y-xl) var(--click-spacer-horizontal-space-x-all);
+}
+
+.spacer_size_xxl__upvXv {
+  padding: var(--click-spacer-horizontal-space-y-xxl) var(--click-spacer-horizontal-space-x-all);
+}
+.separator__mz39H[data-orientation='horizontal'] {
+  width: 100%;
+  border-top: 0.0625rem solid var(--click-separator-color-stroke-default);
+}
+
+.separator__mz39H[data-orientation='vertical'] {
+  height: 100%;
+  border-right: 0.0625rem solid var(--click-separator-color-stroke-default);
+}
+
+.separator_variant_horizontal-xs__SVTMS {
+  margin:
+    var(--click-separator-horizontal-space-y-xs)
+    var(--click-separator-horizontal-space-x-all);
+}
+
+.separator_variant_horizontal-sm__aKMwO {
+  margin:
+    var(--click-separator-horizontal-space-y-sm)
+    var(--click-separator-horizontal-space-x-all);
+}
+
+.separator_variant_horizontal-md__HRIoB {
+  margin:
+    var(--click-separator-horizontal-space-y-md)
+    var(--click-separator-horizontal-space-x-all);
+}
+
+.separator_variant_horizontal-lg__phB0U {
+  margin:
+    var(--click-separator-horizontal-space-y-lg)
+    var(--click-separator-horizontal-space-x-all);
+}
+
+.separator_variant_horizontal-xl__z08Bu {
+  margin:
+    var(--click-separator-horizontal-space-y-xl)
+    var(--click-separator-horizontal-space-x-all);
+}
+
+.separator_variant_horizontal-xxl__5sqqd {
+  margin:
+    var(--click-separator-horizontal-space-y-xxl)
+    var(--click-separator-horizontal-space-x-all);
+}
+
+.separator_variant_vertical-xs__XN-Os {
+  margin:
+    var(--click-separator-vertical-space-y-all)
+    var(--click-separator-vertical-space-x-xs);
+}
+
+.separator_variant_vertical-sm__ddV3R {
+  margin:
+    var(--click-separator-vertical-space-y-all)
+    var(--click-separator-vertical-space-x-sm);
+}
+
+.separator_variant_vertical-md__DlYM0 {
+  margin:
+    var(--click-separator-vertical-space-y-all)
+    var(--click-separator-vertical-space-x-md);
+}
+
+.separator_variant_vertical-lg__00SOr {
+  margin:
+    var(--click-separator-vertical-space-y-all)
+    var(--click-separator-vertical-space-x-lg);
+}
+
+.separator_variant_vertical-xl__0c4Od {
+  margin:
+    var(--click-separator-vertical-space-y-all)
+    var(--click-separator-vertical-space-x-xl);
+}
+
+.separator_variant_vertical-xxl__H-EOx {
+  margin:
+    var(--click-separator-vertical-space-y-all)
+    var(--click-separator-vertical-space-x-xxl);
+}
+.avatar__3xMuZ {
+  display: inline-flex;
+  width: var(--click-avatar-size-width);
+  height: var(--click-avatar-size-height);
+  overflow: hidden;
+  justify-content: center;
+  align-items: center;
+  border-radius: var(--click-avatar-radii-all);
+  background-color: var(--click-avatar-color-background-default);
+  color: var(--click-avatar-color-text-default);
+  user-select: none;
+  vertical-align: middle;
+}
+
+.avatar__3xMuZ:active {
+  background-color: var(--click-avatar-color-background-active);
+  color: var(--click-avatar-color-text-active);
+}
+
+.avatar__3xMuZ:hover {
+  background-color: var(--click-avatar-color-background-hover);
+  color: var(--click-avatar-color-text-hover);
+}
+
+.avatar__image__-VNuI {
+  width: 100%;
+  height: 100%;
+  border-radius: inherit;
+  object-fit: cover;
+}
+
+.avatar__fallback__gr7YV {
+  display: inline-flex;
+  width: var(--click-avatar-size-label-width);
+  justify-content: center;
+  align-items: center;
+}
+
+.avatar__fallback_size_sm__7qjM2 {
+  font: var(--click-avatar-typography-label-sm-default);
+}
+
+.avatar__fallback_size_sm__7qjM2:active {
+  font: var(--click-avatar-typography-label-sm-active);
+}
+
+.avatar__fallback_size_sm__7qjM2:hover {
+  font: var(--click-avatar-typography-label-sm-hover);
+}
+
+.avatar__fallback_size_md__21Kuk {
+  font: var(--click-avatar-typography-label-md-default);
+}
+
+.avatar__fallback_size_md__21Kuk:active {
+  font: var(--click-avatar-typography-label-md-active);
+}
+
+.avatar__fallback_size_md__21Kuk:hover {
+  font: var(--click-avatar-typography-label-md-hover);
+}
+.wrapper__DxhQK {
+  display: inline-flex;
+  padding: var(--click-badge-space-md-y) var(--click-badge-space-md-x);
+  border: var(--click-badge-stroke) solid var(--click-badge-opaque-color-stroke-default);
+  border-radius: var(--click-badge-radii-all);
+  background-color: var(--click-badge-opaque-color-background-default);
+  color: var(--click-badge-opaque-color-text-default);
+  font: var(--click-badge-typography-label-md-default);
+}
+
+/* Opaque type — colors per state */
+
+.wrapper_typestate_opaque-default__aI5-w {
+  border-color: var(--click-badge-opaque-color-stroke-default);
+  background-color: var(--click-badge-opaque-color-background-default);
+  color: var(--click-badge-opaque-color-text-default);
+}
+
+.wrapper_typestate_opaque-success__A7jFR {
+  border-color: var(--click-badge-opaque-color-stroke-success);
+  background-color: var(--click-badge-opaque-color-background-success);
+  color: var(--click-badge-opaque-color-text-success);
+}
+
+.wrapper_typestate_opaque-neutral__M-2Ek {
+  border-color: var(--click-badge-opaque-color-stroke-neutral);
+  background-color: var(--click-badge-opaque-color-background-neutral);
+  color: var(--click-badge-opaque-color-text-neutral);
+}
+
+.wrapper_typestate_opaque-danger__1FP9Q {
+  border-color: var(--click-badge-opaque-color-stroke-danger);
+  background-color: var(--click-badge-opaque-color-background-danger);
+  color: var(--click-badge-opaque-color-text-danger);
+}
+
+.wrapper_typestate_opaque-disabled__rOnZR {
+  border-color: var(--click-badge-opaque-color-stroke-disabled);
+  background-color: var(--click-badge-opaque-color-background-disabled);
+  color: var(--click-badge-opaque-color-text-disabled);
+}
+
+.wrapper_typestate_opaque-warning__LFMbO {
+  border-color: var(--click-badge-opaque-color-stroke-warning);
+  background-color: var(--click-badge-opaque-color-background-warning);
+  color: var(--click-badge-opaque-color-text-warning);
+}
+
+.wrapper_typestate_opaque-info__x6Bg3 {
+  border-color: var(--click-badge-opaque-color-stroke-info);
+  background-color: var(--click-badge-opaque-color-background-info);
+  color: var(--click-badge-opaque-color-text-info);
+}
+
+/* Solid type — colors per state */
+
+.wrapper_typestate_solid-default__xjCXm {
+  border-color: var(--click-badge-solid-color-stroke-default);
+  background-color: var(--click-badge-solid-color-background-default);
+  color: var(--click-badge-solid-color-text-default);
+}
+
+.wrapper_typestate_solid-success__NbCJo {
+  border-color: var(--click-badge-solid-color-stroke-success);
+  background-color: var(--click-badge-solid-color-background-success);
+  color: var(--click-badge-solid-color-text-success);
+}
+
+.wrapper_typestate_solid-neutral__dFOPR {
+  border-color: var(--click-badge-solid-color-stroke-neutral);
+  background-color: var(--click-badge-solid-color-background-neutral);
+  color: var(--click-badge-solid-color-text-neutral);
+}
+
+.wrapper_typestate_solid-danger__zCzPE {
+  border-color: var(--click-badge-solid-color-stroke-danger);
+  background-color: var(--click-badge-solid-color-background-danger);
+  color: var(--click-badge-solid-color-text-danger);
+}
+
+.wrapper_typestate_solid-disabled__sscAh {
+  border-color: var(--click-badge-solid-color-stroke-disabled);
+  background-color: var(--click-badge-solid-color-background-disabled);
+  color: var(--click-badge-solid-color-text-disabled);
+}
+
+.wrapper_typestate_solid-warning__48ZTU {
+  border-color: var(--click-badge-solid-color-stroke-warning);
+  background-color: var(--click-badge-solid-color-background-warning);
+  color: var(--click-badge-solid-color-text-warning);
+}
+
+.wrapper_typestate_solid-info__5fv-r {
+  border-color: var(--click-badge-solid-color-stroke-info);
+  background-color: var(--click-badge-solid-color-background-info);
+  color: var(--click-badge-solid-color-text-info);
+}
+
+/* Sizes */
+
+.wrapper_size_sm__zQIOE {
+  padding: var(--click-badge-space-sm-y) var(--click-badge-space-sm-x);
+  font: var(--click-badge-typography-label-sm-default);
+}
+
+.wrapper_size_md__1Uvni {
+  padding: var(--click-badge-space-md-y) var(--click-badge-space-md-x);
+  font: var(--click-badge-typography-label-md-default);
+}
+
+/* Content row — mirrors the inner Content styled component. The original
+   `Content` was never passed `$size`, so its `gap` always defaulted to the
+   md token regardless of the badge's actual `size`. Preserved verbatim. */
+
+.content__8D6nB {
+  display: inline-flex;
+  max-width: 100%;
+  justify-content: flex-start;
+  align-items: center;
+  gap: var(--click-badge-space-md-gap);
+}
+
+/* BadgeContent — wraps the IconWrapper. The original styled(IconWrapper) set
+   `width: auto; overflow: hidden;` on the IconWrapper's rendered root and
+   styled the descendant <svg> with color, height, width, and `gap: inherit`.
+
+   The styled-components version only forwarded `$state` to BadgeContent;
+   `$type` and `$size` were NOT passed and defaulted to `'opaque'` and `'md'`
+   inside the styled rule. To preserve that behavior verbatim, the descendant
+   <svg> rules below key off `state` only — color always comes from the
+   opaque-text-* tokens, and dimensions are always md, regardless of the
+   badge's actual `type`/`size`.
+
+   The doubled-class selectors below (e.g. `.badgecontent.badgecontent svg`)
+   raise specificity to (0,2,1) so these rules win over the Icon component's
+   own runtime-injected styled-components rule `.<sc-class> svg { width: ... }`
+   (specificity 0,1,1). styled-components used to inject the BadgeContent
+   stylesheet AFTER Icon's stylesheet at render time, so source order let
+   BadgeContent win at equal specificity; CSS Modules now bundle Badge's
+   stylesheet earlier than the runtime SC stylesheet, so we need the bump. */
+
+/* stylelint-disable no-descending-specificity -- doubled-class selectors below
+   raise specificity so they win over the Icon component's runtime-injected
+   styled-components `& svg` rule. */
+
+.badgecontent__MlQs8 {
+  width: auto;
+  overflow: hidden;
+}
+
+.badgecontent__MlQs8.badgecontent__MlQs8 svg {
+  width: var(--click-badge-icon-md-size-width);
+  height: var(--click-badge-icon-md-size-height);
+  gap: inherit;
+}
+
+.badgecontent_state_default__xvx1m.badgecontent_state_default__xvx1m svg {
+  color: var(--click-badge-opaque-color-text-default);
+}
+
+.badgecontent_state_success__NuTD7.badgecontent_state_success__NuTD7 svg {
+  color: var(--click-badge-opaque-color-text-success);
+}
+
+.badgecontent_state_neutral__Q0zQx.badgecontent_state_neutral__Q0zQx svg {
+  color: var(--click-badge-opaque-color-text-neutral);
+}
+
+.badgecontent_state_danger__cLB2G.badgecontent_state_danger__cLB2G svg {
+  color: var(--click-badge-opaque-color-text-danger);
+}
+
+.badgecontent_state_disabled__UDS4K.badgecontent_state_disabled__UDS4K svg {
+  color: var(--click-badge-opaque-color-text-disabled);
+}
+
+.badgecontent_state_warning__GtYY1.badgecontent_state_warning__GtYY1 svg {
+  color: var(--click-badge-opaque-color-text-warning);
+}
+
+.badgecontent_state_info__XgrAY.badgecontent_state_info__XgrAY svg {
+  color: var(--click-badge-opaque-color-text-info);
+}
+
+/* stylelint-enable no-descending-specificity */
+
+/* Close icon — mirrors the SvgContainer styled.svg with as={Icon}. The
+   styled-components version only passed $state (size and type defaulted),
+   so width/height come from the default md/opaque tokens, and color from
+   the opaque-text-<state> token.
+
+   The state classes below use doubled-class specificity (0,2,1) so they
+   always win over Icon's internal `SvgWrapper` styled-component rule that
+   sets `color: currentColor` on the same element at single-class specificity.
+   Without the bump, stylesheet-order would decide and CSS Modules bundle
+   before runtime SC styles, so the close icon would inherit the wrapper's
+   color (e.g. opaque-text-info for an info badge, but solid-text-info for
+   a solid info badge). Doubled class keeps the close icon on opaque-text-*
+   regardless. */
+
+.closeicon__p-7mr {
+  width: var(--click-badge-icon-md-size-width);
+  height: var(--click-badge-icon-md-size-height);
+}
+
+.closeicon_state_default__i3VsI.closeicon_state_default__i3VsI {
+  color: var(--click-badge-opaque-color-text-default);
+}
+
+.closeicon_state_success__NRfHo.closeicon_state_success__NRfHo {
+  color: var(--click-badge-opaque-color-text-success);
+}
+
+.closeicon_state_neutral__MFG4R.closeicon_state_neutral__MFG4R {
+  color: var(--click-badge-opaque-color-text-neutral);
+}
+
+.closeicon_state_danger__1SPLo.closeicon_state_danger__1SPLo {
+  color: var(--click-badge-opaque-color-text-danger);
+}
+
+.closeicon_state_disabled__kagep.closeicon_state_disabled__kagep {
+  color: var(--click-badge-opaque-color-text-disabled);
+}
+
+.closeicon_state_warning__HyEx3.closeicon_state_warning__HyEx3 {
+  color: var(--click-badge-opaque-color-text-warning);
+}
+
+.closeicon_state_info__qNJkh.closeicon_state_info__qNJkh {
+  color: var(--click-badge-opaque-color-text-info);
+}
+.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);
+  --card-desc-default: var(--click-card-horizontal-muted-color-description-default);
+  --card-desc-hover: var(--click-card-horizontal-muted-color-description-hover);
+  --card-desc-active: var(--click-card-horizontal-muted-color-description-active);
+  --card-desc-disabled: var(--click-card-horizontal-muted-color-description-disabled);
+}
+
+.wrapper_alignment_top__QcYt3 {
+  align-items: flex-start;
+  align-self: stretch;
+}
+
+.wrapper_alignment_center__X8Sjf {
+  align-items: center;
+  align-self: auto;
+}
+
+.wrapper_size_md__cIFpL {
+  padding: var(--click-card-horizontal-space-md-y) var(--click-card-horizontal-space-md-x);
+}
+
+.wrapper_size_sm__alRqs {
+  padding: var(--click-card-horizontal-space-sm-y) var(--click-card-horizontal-space-sm-x);
+}
+
+.wrapper__gPLR5 .description__4EWfD {
+  color: var(--card-desc-default);
+  font: var(--click-card-horizontal-typography-description-default);
+}
+
+.wrapper__gPLR5.wrapper_selectable__shWc3 {
+  border-color: var(--card-stroke-hover);
+}
+
+.wrapper__gPLR5.wrapper_selectable__shWc3.wrapper_selected__FUouc {
+  border-color: var(--card-stroke-active);
+}
+
+.wrapper__gPLR5:hover {
+  font: var(--click-card-horizontal-typography-title-hover);
+}
+
+.wrapper__gPLR5.wrapper_selectable__shWc3:hover {
+  border-color: var(--card-stroke-default);
+  background-color: var(--card-bg-hover);
+  color: var(--card-title-hover);
+  cursor: pointer;
+}
+
+.wrapper__gPLR5.wrapper_selectable__shWc3.wrapper_selected__FUouc:hover {
+  border-color: var(--card-stroke-active);
+}
+
+.wrapper__gPLR5.wrapper_selectable__shWc3:hover .description__4EWfD {
+  color: var(--card-desc-hover);
+  font: var(--click-card-horizontal-typography-description-hover);
+}
+
+.wrapper__gPLR5.wrapper_selectable__shWc3:active,
+.wrapper__gPLR5.wrapper_selectable__shWc3:focus,
+.wrapper__gPLR5.wrapper_selectable__shWc3:focus-within {
+  border-color: var(--card-stroke-active);
+  background-color: var(--card-bg-active);
+  color: var(--card-title-active);
+}
+
+.wrapper__gPLR5.wrapper_selectable__shWc3:active .description__4EWfD,
+.wrapper__gPLR5.wrapper_selectable__shWc3:focus .description__4EWfD,
+.wrapper__gPLR5.wrapper_selectable__shWc3:focus-within .description__4EWfD {
+  color: var(--card-desc-active);
+  font: var(--click-card-horizontal-typography-description-active);
+}
+
+/* stylelint-disable no-descending-specificity -- disabled state intentionally
+   defined after hover/active to mirror the source cascade order;
+   pointer-events:none plus tabIndex=-1 prevent hover/focus/active from firing. */
+.wrapper__gPLR5.wrapper_disabled__QRVx8,
+.wrapper__gPLR5.wrapper_disabled__QRVx8:hover,
+.wrapper__gPLR5.wrapper_disabled__QRVx8:active,
+.wrapper__gPLR5.wrapper_disabled__QRVx8:focus,
+.wrapper__gPLR5.wrapper_disabled__QRVx8:focus-within {
+  border: 1px solid var(--card-stroke-disabled);
+  background-color: var(--card-bg-disabled);
+  color: var(--card-title-disabled);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.wrapper__gPLR5.wrapper_disabled__QRVx8.wrapper_selected__FUouc,
+.wrapper__gPLR5.wrapper_disabled__QRVx8.wrapper_selected__FUouc:hover,
+.wrapper__gPLR5.wrapper_disabled__QRVx8.wrapper_selected__FUouc:active,
+.wrapper__gPLR5.wrapper_disabled__QRVx8.wrapper_selected__FUouc:focus,
+.wrapper__gPLR5.wrapper_disabled__QRVx8.wrapper_selected__FUouc:focus-within {
+  border-color: var(--card-stroke-active);
+}
+
+.wrapper__gPLR5.wrapper_disabled__QRVx8 .description__4EWfD {
+  color: var(--card-desc-disabled);
+  font: var(--click-card-horizontal-typography-description-disabled);
+}
+
+.wrapper__gPLR5.wrapper_disabled__QRVx8:active,
+.wrapper__gPLR5.wrapper_disabled__QRVx8:focus,
+.wrapper__gPLR5.wrapper_disabled__QRVx8:focus-within {
+  border: 1px solid var(--card-stroke-active);
+}
+/* stylelint-enable no-descending-specificity */
+.wrapper__zCfLE {
+  display: flex;
+  width: 100%;
+  max-width: 100%;
+  flex-direction: column;
+  border: 1px solid var(--click-card-primary-color-stroke-default);
+  border-radius: var(--click-card-primary-radii-all);
+  background-color: var(--click-card-primary-color-background-default);
+  text-align: center;
+}
+
+.wrapper_align_start__37pdg {
+  text-align: left;
+}
+
+.wrapper_align_center__37eoU {
+  text-align: center;
+}
+
+.wrapper_align_end__xbC8w {
+  text-align: right;
+}
+
+.wrapper_size_md__tu4Nx {
+  padding: var(--click-card-primary-space-md-x) var(--click-card-primary-space-md-y);
+  gap: var(--click-card-primary-space-md-gap);
+}
+
+.wrapper_size_sm__8H2nS {
+  padding: var(--click-card-primary-space-sm-x) var(--click-card-primary-space-sm-y);
+  gap: var(--click-card-primary-space-sm-gap);
+}
+
+.wrapper_shadow__6Yg0s {
+  box-shadow: var(--shadow-1);
+}
+
+.wrapper_selected__eO9y0 {
+  border-color: var(--click-button-basic-color-primary-stroke-active);
+}
+
+.wrapper__zCfLE:hover,
+.wrapper__zCfLE:focus {
+  background-color: var(--click-card-secondary-color-background-hover);
+  cursor: pointer;
+}
+
+.wrapper__zCfLE:hover button,
+.wrapper__zCfLE:focus button {
+  border-color: var(--click-button-basic-color-primary-stroke-hover);
+  background-color: var(--click-button-basic-color-primary-background-hover);
+}
+
+.wrapper__zCfLE:hover button:active,
+.wrapper__zCfLE:focus button:active {
+  border-color: var(--click-button-basic-color-primary-stroke-active);
+  background-color: var(--click-button-basic-color-primary-background-active);
+}
+
+.wrapper__zCfLE:active {
+  border-color: var(--click-button-basic-color-primary-stroke-active);
+}
+
+/* stylelint-disable no-descending-specificity -- disabled state intentionally
+   defined after hover/active to mirror the source cascade order;
+   pointer-events:none prevents the hover/active rules from applying when disabled. */
+.wrapper__zCfLE[aria-disabled='true'],
+.wrapper__zCfLE[aria-disabled='true']:hover,
+.wrapper__zCfLE[aria-disabled='true']:focus,
+.wrapper__zCfLE[aria-disabled='true']:active {
+  border: 1px solid var(--click-card-primary-color-stroke-disabled);
+  background-color: var(--click-card-primary-color-background-disabled);
+  color: var(--click-card-primary-color-title-disabled);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.wrapper__zCfLE[aria-disabled='true'] button,
+.wrapper__zCfLE[aria-disabled='true']:hover button,
+.wrapper__zCfLE[aria-disabled='true']:focus button,
+.wrapper__zCfLE[aria-disabled='true']:active button,
+.wrapper__zCfLE[aria-disabled='true'] button:active,
+.wrapper__zCfLE[aria-disabled='true']:hover button:active,
+.wrapper__zCfLE[aria-disabled='true']:focus button:active,
+.wrapper__zCfLE[aria-disabled='true']:active button:active {
+  border-color: var(--click-button-basic-color-primary-stroke-disabled);
+  background-color: var(--click-button-basic-color-primary-background-disabled);
+}
+/* stylelint-enable no-descending-specificity */
+
+.header__8rODG {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.header_align_start__M1I-O {
+  align-items: flex-start;
+}
+
+.header_align_center__BztmN {
+  align-items: center;
+}
+
+.header_align_end__3XI7U {
+  align-items: flex-end;
+}
+
+.header_size_md__VoWrw {
+  gap: var(--click-card-primary-space-md-gap);
+}
+
+.header__8rODG.header_size_md__VoWrw svg,
+.header__8rODG.header_size_md__VoWrw img {
+  width: var(--click-card-primary-size-icon-md-all);
+  height: var(--click-card-primary-size-icon-md-all);
+}
+
+.header_size_sm__voZ7g {
+  gap: var(--click-card-primary-space-sm-gap);
+}
+
+.header__8rODG.header_size_sm__voZ7g svg,
+.header__8rODG.header_size_sm__voZ7g img {
+  width: var(--click-card-primary-size-icon-sm-all);
+  height: var(--click-card-primary-size-icon-sm-all);
+}
+
+.header__8rODG.header__8rODG h3 {
+  color: var(--click-global-color-text-default);
+}
+
+.header__8rODG.header_disabled__SJxQn h3 {
+  color: var(--click-global-color-text-muted);
+}
+
+.content__zhXwY {
+  display: flex;
+  width: 100%;
+  flex: 1;
+  flex-direction: column;
+  align-self: center;
+}
+
+.content_align_start__T730K {
+  align-self: flex-start;
+}
+
+.content_align_center__zIpiO {
+  align-self: center;
+}
+
+.content_align_end__L62bf {
+  align-self: flex-end;
+}
+
+.content_size_md__MrRdD {
+  gap: var(--click-card-primary-space-md-gap);
+}
+
+.content_size_sm__fy4p3 {
+  gap: var(--click-card-primary-space-sm-gap);
+}
+
+.topbadgewrapper__uA9pl {
+  position: relative;
+}
+
+.topbadge__E79OZ {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.topbadge_selected__zrz5r {
+  border-color: var(--click-button-basic-color-primary-stroke-active);
+}
+
+div:active + .topbadge__E79OZ {
+  border-color: var(--click-button-basic-color-primary-stroke-active);
+}
+.title__t68i9 {
+  /* anchors inherit the title color via this local alias; the color
+     modifiers below redefine it so links track the chosen title color. */
+  --title-link-color: var(--click-global-color-title-default);
+
+  margin: 0;
+  padding: 0;
+  color: var(--click-global-color-title-default);
+  font: var(--typography-styles-product-titles-md);
+  font-style: inherit;
+  text-align: left;
+}
+
+.title__t68i9 a,
+.title__t68i9 a:visited {
+  color: var(--title-link-color);
+  cursor: pointer;
+}
+
+.title__t68i9 a:hover {
+  color: var(--click-global-color-title-muted);
+}
+
+/* font shorthand depends on both family and size; one class per pairing
+   mirrors the single `font:` declaration emitted by styled-components. */
+
+.title_font_product-xs__IdFu4 {
+  font: var(--typography-styles-product-titles-xs);
+  font-style: inherit;
+}
+
+.title_font_product-sm__9RMAB {
+  font: var(--typography-styles-product-titles-sm);
+  font-style: inherit;
+}
+
+.title_font_product-md__uDEhW {
+  font: var(--typography-styles-product-titles-md);
+  font-style: inherit;
+}
+
+.title_font_product-lg__BtA0P {
+  font: var(--typography-styles-product-titles-lg);
+  font-style: inherit;
+}
+
+.title_font_product-xl__VFvtd {
+  font: var(--typography-styles-product-titles-xl);
+  font-style: inherit;
+}
+
+.title_font_brand-xs__8A0De {
+  font: var(--typography-styles-brand-titles-xs);
+  font-style: inherit;
+}
+
+.title_font_brand-sm__6QsrH {
+  font: var(--typography-styles-brand-titles-sm);
+  font-style: inherit;
+}
+
+.title_font_brand-md__YOk4n {
+  font: var(--typography-styles-brand-titles-md);
+  font-style: inherit;
+}
+
+.title_font_brand-lg__90bGM {
+  font: var(--typography-styles-brand-titles-lg);
+  font-style: inherit;
+}
+
+.title_font_brand-xl__aDCet {
+  font: var(--typography-styles-brand-titles-xl);
+  font-style: inherit;
+}
+
+.title_color_default__4FO-y {
+  --title-link-color: var(--click-global-color-title-default);
+
+  color: var(--click-global-color-title-default);
+}
+
+.title_color_muted__sJNEb {
+  --title-link-color: var(--click-global-color-title-muted);
+
+  color: var(--click-global-color-title-muted);
+}
+
+.title_align_left__-s5o9 {
+  text-align: left;
+}
+
+.title_align_center__33VmS {
+  text-align: center;
+}
+
+.title_align_right__483BF {
+  text-align: right;
+}
+/* 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__rpthW.wrapper__rpthW {
+  /* 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;
+}
+
+.checkinput__oErG6 {
+  display: flex;
+  width: var(--click-checkbox-size-all);
+  height: var(--click-checkbox-size-all);
   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;
+  border: 1px solid var(--checkbox-stroke-default);
+  border-radius: var(--click-checkbox-radii-all);
+  background: var(--checkbox-bg-default);
   cursor: pointer;
 }
 
-.button_align-center__RdEYc {
-  justify-content: center;
+.checkinput_variant_default__7KgZ1 {
+  --checkbox-bg-default: var(--click-checkbox-color-variations-default-background-default);
+  --checkbox-bg-hover: var(--click-checkbox-color-variations-default-background-hover);
+  --checkbox-bg-active: var(--click-checkbox-color-variations-default-background-active);
+  --checkbox-stroke-default: var(--click-checkbox-color-variations-default-stroke-default);
+  --checkbox-stroke-active: var(--click-checkbox-color-variations-default-stroke-active);
 }
 
-.button_align-left__AmFEH {
-  justify-content: flex-start;
+.checkinput_variant_var1__dF7nF {
+  --checkbox-bg-default: var(--click-checkbox-color-variations-var1-background-default);
+  --checkbox-bg-hover: var(--click-checkbox-color-variations-var1-background-hover);
+  --checkbox-bg-active: var(--click-checkbox-color-variations-var1-background-active);
+  --checkbox-stroke-default: var(--click-checkbox-color-variations-var1-stroke-default);
+  --checkbox-stroke-active: var(--click-checkbox-color-variations-var1-stroke-active);
 }
 
-.button_fill__Ph-yl {
-  width: 100%;
+.checkinput_variant_var2__pHifP {
+  --checkbox-bg-default: var(--click-checkbox-color-variations-var2-background-default);
+  --checkbox-bg-hover: var(--click-checkbox-color-variations-var2-background-hover);
+  --checkbox-bg-active: var(--click-checkbox-color-variations-var2-background-active);
+  --checkbox-stroke-default: var(--click-checkbox-color-variations-var2-stroke-default);
+  --checkbox-stroke-active: var(--click-checkbox-color-variations-var2-stroke-active);
 }
 
-.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);
+.checkinput_variant_var3__8KFg4 {
+  --checkbox-bg-default: var(--click-checkbox-color-variations-var3-background-default);
+  --checkbox-bg-hover: var(--click-checkbox-color-variations-var3-background-hover);
+  --checkbox-bg-active: var(--click-checkbox-color-variations-var3-background-active);
+  --checkbox-stroke-default: var(--click-checkbox-color-variations-var3-stroke-default);
+  --checkbox-stroke-active: var(--click-checkbox-color-variations-var3-stroke-active);
 }
 
-.button_primary__5V6PJ:disabled {
-  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;
+.checkinput_variant_var4__-C02i {
+  --checkbox-bg-default: var(--click-checkbox-color-variations-var4-background-default);
+  --checkbox-bg-hover: var(--click-checkbox-color-variations-var4-background-hover);
+  --checkbox-bg-active: var(--click-checkbox-color-variations-var4-background-active);
+  --checkbox-stroke-default: var(--click-checkbox-color-variations-var4-stroke-default);
+  --checkbox-stroke-active: var(--click-checkbox-color-variations-var4-stroke-active);
 }
 
-.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);
+.checkinput_variant_var5__DuiuL {
+  --checkbox-bg-default: var(--click-checkbox-color-variations-var5-background-default);
+  --checkbox-bg-hover: var(--click-checkbox-color-variations-var5-background-hover);
+  --checkbox-bg-active: var(--click-checkbox-color-variations-var5-background-active);
+  --checkbox-stroke-default: var(--click-checkbox-color-variations-var5-stroke-default);
+  --checkbox-stroke-active: var(--click-checkbox-color-variations-var5-stroke-active);
 }
 
-.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;
+.checkinput_variant_var6__DqZFO {
+  --checkbox-bg-default: var(--click-checkbox-color-variations-var6-background-default);
+  --checkbox-bg-hover: var(--click-checkbox-color-variations-var6-background-hover);
+  --checkbox-bg-active: var(--click-checkbox-color-variations-var6-background-active);
+  --checkbox-stroke-default: var(--click-checkbox-color-variations-var6-stroke-default);
+  --checkbox-stroke-active: var(--click-checkbox-color-variations-var6-stroke-active);
 }
 
-.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;
+.checkinput__oErG6:hover {
+  background: var(--checkbox-bg-hover);
 }
 
-.button_secondary__PXw0N {
-  border-color: var(--click-button-basic-color-secondary-stroke-default);
-  background-color: var(--click-button-basic-color-secondary-background-default);
-  color: var(--click-button-basic-color-secondary-text-default);
+.checkinput__oErG6[data-state='checked'],
+.checkinput__oErG6[data-state='indeterminate'] {
+  border-color: var(--checkbox-stroke-active);
+  background: var(--checkbox-bg-active);
 }
 
-.button_secondary__PXw0N:disabled {
-  border-color: var(--click-button-basic-color-secondary-stroke-disabled);
-  background-color: var(--click-button-basic-color-secondary-background-disabled);
-  color: var(--click-button-basic-color-secondary-text-disabled);
-  font: var(--click-button-basic-typography-label-disabled);
+/* stylelint-disable no-descending-specificity -- disabled state intentionally
+   defined after checked/indeterminate to mirror the source cascade order;
+   matches the styled-components rule which used a nested `&[data-disabled]`
+   block placed after the state selectors. */
+.checkinput__oErG6[data-disabled] {
+  border-color: var(--click-checkbox-color-stroke-disabled);
+  background: var(--click-checkbox-color-background-disabled);
   cursor: not-allowed;
 }
 
-.button_secondary__PXw0N:hover:not(:disabled) {
-  border-color: var(--click-button-basic-color-secondary-stroke-hover);
-  background-color: var(--click-button-basic-color-secondary-background-hover);
-  font: var(--click-button-basic-typography-label-hover);
-  transition: var(--click-transition-default);
+.checkinput__oErG6[data-disabled][data-state='checked'],
+.checkinput__oErG6[data-disabled][data-state='indeterminate'] {
+  border-color: var(--click-checkbox-color-stroke-disabled);
+  background: var(--click-checkbox-color-background-disabled);
 }
+/* stylelint-enable no-descending-specificity */
 
-.button_secondary__PXw0N:focus-visible:not(:disabled) {
-  border-color: var(--click-button-basic-color-secondary-stroke-active);
-  background-color: var(--click-button-basic-color-secondary-background-active);
-  font: var(--click-button-basic-typography-label-active);
-  outline: 2px solid var(--click-button-basic-color-secondary-stroke-active);
-  outline-offset: 2px;
+.checkicon__wvW5M {
+  color: var(--click-checkbox-color-check-active);
 }
 
-.button_secondary__PXw0N:active:not(:disabled),
-.button_secondary__PXw0N:focus:not(:focus-visible, :disabled) {
-  border-color: var(--click-button-basic-color-secondary-stroke-active);
-  background-color: var(--click-button-basic-color-secondary-background-active);
-  font: var(--click-button-basic-typography-label-active);
-  outline: none;
+.checkicon__wvW5M[data-disabled] {
+  color: var(--click-checkbox-color-check-disabled);
 }
+/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. genericLabel) */
 
-.button_empty__GZ9s7 {
-  border-color: var(--click-button-basic-color-empty-stroke-default);
-  background-color: var(--click-button-basic-color-empty-background-default);
-  color: var(--click-button-basic-color-empty-text-default);
+.generic-label__l8R-z {
+  color: var(--click-field-color-genericLabel-default);
+  font: var(--click-field-typography-genericLabel-default);
+  cursor: pointer;
 }
 
-.button_empty__GZ9s7:disabled {
-  border-color: var(--click-button-basic-color-empty-stroke-disabled);
-  background-color: var(--click-button-basic-color-empty-background-disabled);
-  color: var(--click-button-basic-color-empty-text-disabled);
-  font: var(--click-button-basic-typography-label-disabled);
+.generic-label__l8R-z:hover {
+  color: var(--click-field-color-genericLabel-hover);
+  font: var(--click-field-typography-genericLabel-hover);
+}
+
+.generic-label__l8R-z:focus,
+.generic-label__l8R-z:focus-within {
+  color: var(--click-field-color-genericLabel-active);
+  font: var(--click-field-typography-genericLabel-active);
+}
+
+/* stylelint-disable no-descending-specificity -- disabled state intentionally
+   defined after hover/focus to neutralize them; the original styled-components
+   emits no hover/focus rules when disabled is true. */
+.generic-label__l8R-z.generic-label_disabled__LsI3I,
+.generic-label__l8R-z.generic-label_disabled__LsI3I:hover,
+.generic-label__l8R-z.generic-label_disabled__LsI3I:focus,
+.generic-label__l8R-z.generic-label_disabled__LsI3I:focus-within {
+  color: var(--click-field-color-genericLabel-disabled);
+  font: var(--click-field-typography-genericLabel-disabled);
   cursor: not-allowed;
 }
+/* stylelint-enable no-descending-specificity */
+.progressbar__21KMf {
+  display: flex;
+  min-height: 2px;
+  padding-right: 0;
+  overflow: hidden;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--click-field-space-gap);
+  border: 1px solid var(--click-field-color-stroke-default);
+  border-radius: var(--click-field-radii-all);
+  background: linear-gradient(
+    var(--progress-grad-dir, to right),
+    var(--global-color-accent-default) 0%,
+    var(--global-color-accent-default) var(--progress),
+    var(--progress-bg, var(--click-field-color-background-default)) var(--progress),
+    var(--progress-bg, var(--click-field-color-background-default)) 100%
+  );
+  background-position: center;
+  background-size: calc(100% + 2px);
+  color: var(--global-color-accent-default);
+  font: var(--typography-styles-product-text-normal-sm);
+  transition: all 100ms ease-in-out;
+}
 
-.button_empty__GZ9s7:hover:not(:disabled) {
-  border-color: var(--click-button-basic-color-empty-stroke-hover);
-  background-color: var(--click-button-basic-color-empty-background-hover);
-  font: var(--click-button-basic-typography-label-hover);
-  transition: var(--click-transition-default);
+.progressbar_orientation_vertical__0w-VB {
+  width: auto;
+  height: 100%;
+  flex-direction: column;
 }
 
-.button_empty__GZ9s7:focus-visible:not(:disabled) {
-  border-color: var(--click-button-basic-color-empty-stroke-active);
-  background-color: var(--click-button-basic-color-empty-background-active);
-  font: var(--click-button-basic-typography-label-active);
-  outline: 2px solid var(--click-button-basic-color-empty-stroke-active);
-  outline-offset: 2px;
+/* stylelint-disable plugin/no-unsupported-browser-features, declaration-property-value-no-unknown -- the original rule used this same
+   width fallback chain (100% → -webkit-fill-available → fill-available →
+   stretch) so horizontal bars fill the available inline space. */
+.progressbar_orientation_horizontal__MJimN {
+  width: 100%;
+  width: -webkit-fill-available;
+  width: fill-available;
+  width: stretch;
 }
+/* stylelint-enable plugin/no-unsupported-browser-features, declaration-property-value-no-unknown */
 
-.button_empty__GZ9s7:active:not(:disabled),
-.button_empty__GZ9s7:focus:not(:focus-visible, :disabled) {
-  border-color: var(--click-button-basic-color-empty-stroke-active);
-  background-color: var(--click-button-basic-color-empty-background-active);
-  font: var(--click-button-basic-typography-label-active);
-  outline: none;
+.progressbar_orientation_horizontal__MJimN.progressbar_dir_start__xUm-Q {
+  --progress-grad-dir: to right;
 }
 
-.button_danger__0DN8k {
-  border-color: var(--click-button-basic-color-danger-stroke-default);
-  background-color: var(--click-button-basic-color-danger-background-default);
-  color: var(--click-button-basic-color-danger-text-default);
+.progressbar_orientation_horizontal__MJimN.progressbar_dir_end__iGTwK {
+  --progress-grad-dir: to left;
 }
 
-.button_danger__0DN8k:disabled {
-  border-color: var(--click-button-basic-color-danger-stroke-disabled);
-  background-color: var(--click-button-basic-color-danger-background-disabled);
-  color: var(--click-button-basic-color-danger-text-disabled);
-  font: var(--click-button-basic-typography-label-disabled);
-  cursor: not-allowed;
+.progressbar_orientation_vertical__0w-VB.progressbar_dir_start__xUm-Q {
+  --progress-grad-dir: to bottom;
 }
 
-.button_danger__0DN8k:hover:not(:disabled) {
-  border-color: var(--click-button-basic-color-danger-stroke-hover);
-  background-color: var(--click-button-basic-color-danger-background-hover);
-  font: var(--click-button-basic-typography-label-hover);
-  transition: var(--click-transition-default);
+.progressbar_orientation_vertical__0w-VB.progressbar_dir_end__iGTwK {
+  --progress-grad-dir: to top;
 }
 
-.button_danger__0DN8k:focus-visible:not(:disabled) {
-  border-color: var(--click-button-basic-color-danger-stroke-active);
-  background-color: var(--click-button-basic-color-danger-background-active);
-  font: var(--click-button-basic-typography-label-active);
-  outline: 2px solid var(--click-button-basic-color-danger-stroke-active);
-  outline-offset: 2px;
+.progressbar_type_default__B8jtt {
+  padding: 0.25rem var(--click-field-space-x);
+  padding-right: 0;
 }
 
-.button_danger__0DN8k:active:not(:disabled),
-.button_danger__0DN8k:focus:not(:focus-visible, :disabled) {
-  border-color: var(--click-button-basic-color-danger-stroke-active);
-  background-color: var(--click-button-basic-color-danger-background-active);
-  font: var(--click-button-basic-typography-label-active);
-  outline: none;
+.progressbar_type_small__bcDiV {
+  padding: 0 var(--click-field-space-x);
+  padding-right: 0;
 }
 
-.button_loading__n2tCt {
-  cursor: not-allowed;
+.progressbar_completed__XhK-p.progressbar_type_default__B8jtt {
+  background: var(--click-field-color-background-default);
+  background-position: center;
+  background-size: calc(100% + 2px);
 }
 
-.button_loading__n2tCt::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  pointer-events: none;
-  animation: shimmer__8Jq1s 1.5s ease-in-out infinite;
+.progressbar__21KMf:hover {
+  --progress-bg: var(--click-field-color-background-hover);
+
+  border: 1px solid var(--click-field-color-stroke-hover);
+  background-position: center;
+  background-size: calc(100% + 2px);
 }
 
-.button_primary__5V6PJ.button_loading__n2tCt,
-.button_secondary__PXw0N.button_loading__n2tCt,
-.button_danger__0DN8k.button_loading__n2tCt {
-  opacity: 0.7;
+.progressbar_completed__XhK-p:hover {
+  background: var(--click-field-color-background-hover);
+  background-position: center;
+  background-size: calc(100% + 2px);
 }
 
-.button_empty__GZ9s7.button_loading__n2tCt {
-  opacity: 0.9;
+.progressbar__21KMf:focus,
+.progressbar__21KMf:focus-within {
+  --progress-bg: var(--click-field-color-background-active);
+
+  border: 1px solid var(--click-field-color-stroke-active);
+  background-position: center;
+  background-size: calc(100% + 2px);
 }
 
-.button_loading__n2tCt > * {
-  opacity: 0.7;
+.progressbar_completed__XhK-p:focus,
+.progressbar_completed__XhK-p:focus-within {
+  background: var(--click-field-color-background-active);
+  background-position: center;
+  background-size: calc(100% + 2px);
 }
 
-@keyframes shimmer__8Jq1s {
-  0% {
-    background-position: 100% 0;
-  }
+.progresstext__RAf9Q {
+  width: 100%;
+  font: inherit;
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features -- mix-blend-mode
+     is widely supported on evergreen browsers; the original rule
+     used the same value to invert the text against the gradient fill. */
+  mix-blend-mode: difference;
+}
 
-  100% {
-    background-position: -100% 0;
-  }
+.progressclosebutton__cGgfw {
+  visibility: hidden;
+  border: 0;
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features -- mix-blend-mode
+     is widely supported on evergreen browsers; the original rule
+     used the same value to invert the close icon against the gradient fill. */
+  mix-blend-mode: difference;
 }
 
-.button_primary__5V6PJ.button_loading__n2tCt::before {
-  background: var(--click-button-basic-color-primary-background-loading);
-  background-size: 200% 100%;
-  background-repeat: no-repeat;
+.progressclosebutton_dismissable__p5mDJ {
+  visibility: visible;
+}
+.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;
 }
 
-.button_secondary__PXw0N.button_loading__n2tCt::before {
-  background: var(--click-button-basic-color-secondary-background-loading);
-  background-size: 200% 100%;
-  background-repeat: no-repeat;
+.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);
 }
 
-.button_empty__GZ9s7.button_loading__n2tCt::before {
-  background: var(--click-button-basic-color-empty-background-loading);
-  background-size: 200% 100%;
-  background-repeat: no-repeat;
+.link__Ly-e3:visited {
+  color: var(--click-global-color-text-link-default);
 }
 
-.button_danger__0DN8k.button_loading__n2tCt::before {
-  background: var(--click-button-basic-color-danger-background-loading);
-  background-size: 200% 100%;
-  background-repeat: no-repeat;
+/* 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 {
+  --link-gap: var(--click-link-space-sm-gap);
 }
 
-.button__icon__e6c-f {
-  display: flex;
-  width: var(--click-button-basic-size-icon-all);
-  height: var(--click-button-basic-size-icon-all);
-  justify-content: center;
-  align-items: center;
+.link_size_md__QlDJt,
+.link_size_lg__FkICb {
+  --link-gap: var(--click-link-space-md-gap);
 }
 
-.button__icon__e6c-f svg {
-  width: var(--click-button-basic-size-icon-all);
-  height: var(--click-button-basic-size-icon-all);
+/* Size + weight compose to pick a single typography token —
+   theme.typography.styles.product.text[$weight][$size]. Emit one compound
+   class per combination and set --link-font, which the base .link rule
+   consumes. */
+.link_size_xs__kYknu.link_weight_normal__shPkj {
+  --link-font: var(--typography-styles-product-text-normal-xs);
 }
 
-.button__label__tlatE {
-  display: inline-flex;
+.link_size_sm__Qqpi3.link_weight_normal__shPkj {
+  --link-font: var(--typography-styles-product-text-normal-sm);
+}
+
+.link_size_md__QlDJt.link_weight_normal__shPkj {
+  --link-font: var(--typography-styles-product-text-normal-md);
+}
+
+.link_size_lg__FkICb.link_weight_normal__shPkj {
+  --link-font: var(--typography-styles-product-text-normal-lg);
+}
+
+.link_size_xs__kYknu.link_weight_medium__Sot5E {
+  --link-font: var(--typography-styles-product-text-medium-xs);
+}
+
+.link_size_sm__Qqpi3.link_weight_medium__Sot5E {
+  --link-font: var(--typography-styles-product-text-medium-sm);
+}
+
+.link_size_md__QlDJt.link_weight_medium__Sot5E {
+  --link-font: var(--typography-styles-product-text-medium-md);
+}
+
+.link_size_lg__FkICb.link_weight_medium__Sot5E {
+  --link-font: var(--typography-styles-product-text-medium-lg);
+}
+
+.link_size_xs__kYknu.link_weight_semibold__6STFO {
+  --link-font: var(--typography-styles-product-text-semibold-xs);
+}
+
+.link_size_sm__Qqpi3.link_weight_semibold__6STFO {
+  --link-font: var(--typography-styles-product-text-semibold-sm);
+}
+
+.link_size_md__QlDJt.link_weight_semibold__6STFO {
+  --link-font: var(--typography-styles-product-text-semibold-md);
+}
+
+.link_size_lg__FkICb.link_weight_semibold__6STFO {
+  --link-font: var(--typography-styles-product-text-semibold-lg);
+}
+
+.link_size_xs__kYknu.link_weight_bold__FWQyo {
+  --link-font: var(--typography-styles-product-text-bold-xs);
+}
+
+.link_size_sm__Qqpi3.link_weight_bold__FWQyo {
+  --link-font: var(--typography-styles-product-text-bold-sm);
+}
+
+.link_size_md__QlDJt.link_weight_bold__FWQyo {
+  --link-font: var(--typography-styles-product-text-bold-md);
+}
+
+.link_size_lg__FkICb.link_weight_bold__FWQyo {
+  --link-font: var(--typography-styles-product-text-bold-lg);
+}
+
+.link_size_xs__kYknu.link_weight_mono__Mzdum {
+  --link-font: var(--typography-styles-product-text-mono-xs);
+}
+
+.link_size_sm__Qqpi3.link_weight_mono__Mzdum {
+  --link-font: var(--typography-styles-product-text-mono-sm);
+}
+
+.link_size_md__QlDJt.link_weight_mono__Mzdum {
+  --link-font: var(--typography-styles-product-text-mono-md);
+}
+
+.link_size_lg__FkICb.link_weight_mono__Mzdum {
+  --link-font: var(--typography-styles-product-text-mono-lg);
+}
+
+/* The inner Icon receives .external-icon via className. The original used a
+   descendant selector inside IconWrapper; here we pass the scoped class
+   straight to the Icon so the selector stays a single class with the same
+   effective specificity. */
+.external-icon_size_xs__hRWrg,
+.external-icon_size_sm__QFJoc {
+  width: var(--click-link-icon-size-sm-width);
+  height: var(--click-link-icon-size-sm-height);
+}
+
+.external-icon_size_md__-bbPt,
+.external-icon_size_lg__XGkpl {
+  width: var(--click-link-icon-size-md-width);
+  height: var(--click-link-icon-size-md-height);
+}
+/* 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;
 }
 
-@media (prefers-reduced-motion: reduce) {
-  .button_loading__n2tCt::before {
-    animation: none;
-  }
+.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);
+}
+
+/* stylelint-disable no-descending-specificity -- disabled state intentionally
+   defined after the checked state to mirror the original `getRootVars`
+   priority, where `disabled` is evaluated before `checked` so a disabled
+   switch always shows the disabled colors regardless of checked. */
+.switch__hgdMu[data-disabled],
+.switch__hgdMu[data-disabled][data-state='checked'] {
+  border: 1px solid var(--click-switch-color-stroke-disabled);
+  background-color: var(--click-switch-color-background-disabled);
+  cursor: not-allowed;
+}
+/* stylelint-enable no-descending-specificity */
+
+.switch__thumb__cPlbD {
+  display: block;
+  width: 12px;
+  height: 12px;
+  border-radius: var(--click-switch-radii-all);
+  background-color: var(--click-switch-color-indicator-default);
+  transition: transform 100ms;
+  transform: translateX(2px);
+  will-change: transform;
+}
+
+.switch__thumb__cPlbD[data-state='checked'] {
+  background-color: var(--click-switch-color-indicator-active);
+  transform: translateX(15px);
+}
+
+/* stylelint-disable no-descending-specificity -- disabled state intentionally
+   defined after the checked state to mirror the original `getThumbVars`
+   priority, where `disabled` is evaluated before `checked`. */
+.switch__thumb__cPlbD[data-disabled],
+.switch__thumb__cPlbD[data-disabled][data-state='checked'] {
+  background-color: var(--click-switch-color-indicator-disabled);
 }
+/* stylelint-enable no-descending-specificity */
 :root,
 [data-cui-theme="light"] {
   --click-accordion-sm-icon-size-height: 1rem;
@@ -1163,6 +3239,7 @@
   --click-genericMenu-item-color-default-background-active: #ffffff;
   --click-genericMenu-item-color-default-background-disabled: #ffffff;
   --click-genericMenu-item-color-default-stroke-default: #e6e7e9;
+  --click-genericMenu-item-color-default-stroke-focus: #437eef;
   --click-genericMenu-item-color-format-default: lch(71.998 4.1843 268.48);
   --click-genericMenu-item-color-format-hover: lch(71.998 4.1843 268.48);
   --click-genericMenu-item-color-format-active: lch(71.998 4.1843 268.48);
@@ -1179,6 +3256,8 @@
   --click-genericMenu-item-color-danger-background-hover: rgb(100% 13.725% 13.725% / 0.2);
   --click-genericMenu-item-color-danger-background-active: rgb(100% 13.725% 13.725% / 0.3);
   --click-genericMenu-item-color-danger-background-disabled: #ffffff;
+  --click-genericMenu-item-color-danger-stroke-default: rgba(0, 0, 0, 0);
+  --click-genericMenu-item-color-danger-stroke-focus: #437eef;
   --click-genericMenu-itemCustom-typography-label-sm: 500 0.75rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
   --click-genericMenu-itemCustom-typography-label-lg: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
   --click-genericMenu-button-space-gap: 0.25rem;
@@ -1687,6 +3766,7 @@
   --click-global-color-text-link-default: #437eef;
   --click-global-color-text-link-hover: #104ec6;
   --click-global-color-text-danger: #c10000;
+  --click-global-color-text-warning: #a33c00;
   --click-global-color-title-default: lch(11.126 1.374 305.43);
   --click-global-color-title-muted: #696e79;
   --click-global-color-outline-default: #437eef;
@@ -2965,6 +5045,7 @@
   --click-genericMenu-item-color-default-background-active: #282828;
   --click-genericMenu-item-color-default-background-disabled: #414141;
   --click-genericMenu-item-color-default-stroke-default: #323232;
+  --click-genericMenu-item-color-default-stroke-focus: #faff69;
   --click-genericMenu-item-color-format-default: lch(62.868 0 none);
   --click-genericMenu-item-color-format-hover: rgb(60.157% 60.157% 60.157%);
   --click-genericMenu-item-color-format-active: rgb(60.157% 60.157% 60.157%);
@@ -2983,6 +5064,7 @@
   --click-genericMenu-item-color-danger-background-active: rgb(100% 13.725% 13.725% / 0.45);
   --click-genericMenu-item-color-danger-background-disabled: #414141;
   --click-genericMenu-item-color-danger-stroke-default: rgba(0, 0, 0, 0);
+  --click-genericMenu-item-color-danger-stroke-focus: #faff69;
   --click-genericMenu-itemCustom-typography-label-sm: 500 0.75rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
   --click-genericMenu-itemCustom-typography-label-lg: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
   --click-genericMenu-button-space-gap: 0.25rem;
@@ -3488,6 +5570,7 @@
   --click-global-color-text-link-default: #faff69;
   --click-global-color-text-link-hover: #feffc2;
   --click-global-color-text-danger: #ffbaba;
+  --click-global-color-text-warning: #ffb88f;
   --click-global-color-stroke-default: #323232;
   --click-global-color-stroke-muted: #323232;
   --click-global-color-stroke-intense: #414141;