@clickhouse/click-ui 0.9.1-rc1 → 0.10.0-rc2

package/dist/cjs/click-ui.css

@@ -1,4 +1,4 @@
-.svg-wrapper__fkBYp {
+@layer clickui {.svg-wrapper__fkBYp {
   display: flex;
   padding: 0;
   align-items: center;
@@ -132,7 +132,8 @@
   width: var(--click-image-xxl-size-width);
   height: var(--click-image-xxl-size-height);
 }
-/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. codeInline) */
+}
+@layer clickui {/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. codeInline) */
 
 .inline__jYdpl {
   padding: 0 var(--click-codeInline-space-x);
@@ -142,7 +143,228 @@
   color: var(--click-codeInline-color-text-default);
   font: var(--click-codeInline-typography-text-default);
 }
-/* Design tokens use camelCase segments (e.g. fieldText). */
+}
+@layer clickui {/* Design tokens use camelCase segments (e.g. datePicker, dateOption). */
+/* stylelint-disable custom-property-pattern */
+
+.clickable-title__CXLxz {
+  padding: 0.25rem 0.5rem;
+  border: 1px solid transparent;
+  border-radius: var(--click-datePicker-dateOption-radii-default);
+  background: transparent;
+  color: var(--click-datePicker-color-title-default);
+  font: var(--click-datePicker-typography-title-default);
+  outline: none;
+  cursor: pointer;
+  user-select: none;
+}
+
+.clickable-title__CXLxz:focus,
+.clickable-title__CXLxz:focus-visible {
+  border-color: var(--click-datePicker-dateOption-color-stroke-hover);
+}
+
+.clickable-title__CXLxz:hover {
+  background: var(--click-datePicker-dateOption-color-background-hover);
+}
+
+.date-picker-container__-WW7c {
+  background: var(--click-datePicker-dateOption-color-background-default);
+}
+
+.date-table__LSuG6 {
+  width: 250px;
+  font: var(--typography-styles-product-text-normal-md);
+  border-collapse: separate;
+  border-spacing: 0;
+  table-layout: fixed;
+  user-select: none;
+}
+
+.date-table__LSuG6 tbody {
+  cursor: pointer;
+}
+
+.date-table__LSuG6 td,
+.date-table__LSuG6 th {
+  padding: 4px;
+}
+
+.date-table__LSuG6 thead tr {
+  height: var(--click-datePicker-dateOption-size-height);
+}
+
+.date-table-cell__2SA9O {
+  border: var(--click-datePicker-dateOption-stroke) solid
+    var(--click-datePicker-dateOption-color-stroke-default);
+  border-radius: var(--click-datePicker-dateOption-radii-default);
+  font: var(--click-datePicker-dateOption-typography-label-default);
+  text-align: center;
+  outline: none;
+}
+
+.date-table-cell__2SA9O:focus,
+.date-table-cell__2SA9O:focus-visible {
+  border: var(--click-datePicker-dateOption-stroke) solid
+    var(--click-datePicker-dateOption-color-stroke-hover);
+  outline: none;
+}
+
+.date-table-cell__2SA9O:hover {
+  border: var(--click-datePicker-dateOption-stroke) solid
+    var(--click-datePicker-dateOption-color-stroke-hover);
+  border-radius: var(--click-datePicker-dateOption-radii-default);
+}
+
+.date-table-cell_disabled__s7GCx:focus,
+.date-table-cell_disabled__s7GCx:focus-visible {
+  border-color: var(--click-datePicker-dateOption-color-stroke-disabled);
+}
+
+.date-table-cell_disabled__s7GCx:hover {
+  border-color: var(--click-datePicker-dateOption-color-stroke-disabled);
+}
+
+/* (!isCurrentMonth || isDisabled) */
+.date-table-cell_muted__qGOGf {
+  color: var(--click-datePicker-dateOption-color-label-disabled);
+  font: var(--click-datePicker-dateOption-typography-label-disabled);
+}
+
+/* isPresent && !isSelected */
+.date-table-cell_present__RVPkq {
+  background: var(--click-datePicker-dateOption-color-background-range);
+}
+
+.date-table-cell_present__RVPkq:hover {
+  background: var(--click-datePicker-dateOption-color-background-range);
+}
+
+/* Ordered after `_muted` so the selected color wins for a selected out-of-month
+   cell (equal specificity, later declaration wins). */
+.date-table-cell_selected__P6-xc {
+  background: var(--click-datePicker-dateOption-color-background-active) !important;
+  color: var(--click-datePicker-dateOption-color-label-active);
+}
+
+.date-table-header__mBVXt {
+  width: 14%;
+  color: var(--click-datePicker-color-daytitle-default);
+  font: var(--click-datePicker-typography-daytitle-default);
+}
+
+.empty-date-select-nav__h2d5u {
+  visibility: hidden;
+  pointer-events: none;
+}
+
+.grid-cell__8VIXB {
+  display: flex;
+  min-height: 26px;
+  padding: 8px 4px;
+  justify-content: center;
+  align-items: center;
+  border: var(--click-datePicker-dateOption-stroke) solid
+    var(--click-datePicker-dateOption-color-stroke-default);
+  border-radius: var(--click-datePicker-dateOption-radii-default);
+  background: var(--click-datePicker-dateOption-color-background-default);
+  color: var(--click-datePicker-dateOption-color-label-default);
+  font: var(--click-datePicker-dateOption-typography-label-default);
+  text-align: center;
+  cursor: pointer;
+}
+
+.grid-cell__8VIXB:focus {
+  border-color: var(--click-datePicker-dateOption-color-stroke-hover);
+  outline: none;
+}
+
+.grid-cell__8VIXB:focus-visible {
+  border-color: var(--click-datePicker-dateOption-color-stroke-hover);
+  outline: none;
+}
+
+.grid-cell__8VIXB:hover {
+  border-color: var(--click-datePicker-dateOption-color-stroke-hover);
+}
+
+.grid-cell_active__mIy9X {
+  background: var(--click-datePicker-dateOption-color-background-active);
+  color: var(--click-datePicker-dateOption-color-label-active);
+}
+
+.grid-cell_present__t3KSM {
+  background: var(--click-datePicker-dateOption-color-background-range);
+}
+
+.grid-container__PbYrA {
+  display: grid;
+  padding: 0.25rem 0 0;
+  gap: calc(var(--click-datePicker-space-gap) * 2);
+}
+
+/* HighlightedInputWrapper = styled(InputWrapper). The doubled class beats the
+   InputWrapper base `.wrapper` (0,1,0) for the width override and the active
+   border. The resting default border and the error border are identical to
+   what the InputWrapper base / `.wrapper_error` already render, so they are not
+   re-declared here. */
+.highlighted-input-wrapper__tel22.highlighted-input-wrapper__tel22 {
+  width: 250px;
+}
+
+.highlighted-input-wrapper_active__Me-wJ.highlighted-input-wrapper_active__Me-wJ {
+  border-color: var(--click-datePicker-dateOption-color-stroke-active);
+}
+
+/* Base `.wrapper:hover` (0,1,1) loses to the doubled active class, so re-assert
+   the hover border for the active (non-error) input to preserve the original
+   hover-over-active behavior. */
+.highlighted-input-wrapper_active__Me-wJ.highlighted-input-wrapper_active__Me-wJ:hover {
+  border-color: var(--click-field-color-stroke-hover);
+}
+
+.highlighted-input-wrapper_fill-width__Yjvys.highlighted-input-wrapper_fill-width__Yjvys {
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features -- the original styled-components used this width; preserved for byte-for-byte parity. */
+  width: max-content;
+  min-width: 250px;
+}
+
+.months-grid__DSh1q {
+  grid-template-columns: repeat(4, 1fr);
+  grid-template-rows: repeat(3, 1fr);
+}
+
+/* PickerNavControl = styled(IconButton) with `&&`. The IconButton ghost focus
+   rule is `.iconbutton_type_ghost:not([disabled]):focus` (0,3,0), so the focus
+   override needs (0,4,0) — a tripled class plus the pseudo — to win. */
+.picker-nav-control__DWXpi.picker-nav-control__DWXpi.picker-nav-control__DWXpi:focus,
+.picker-nav-control__DWXpi.picker-nav-control__DWXpi.picker-nav-control__DWXpi:focus-visible {
+  border: var(--click-datePicker-dateOption-stroke) solid
+    var(--click-datePicker-dateOption-color-stroke-hover);
+  outline: none;
+}
+
+/* StyledDropdownItem = styled(Dropdown.Item). Doubled to beat the
+   `.dropdown-menu-item` base min-height (0,1,0). */
+.styled-dropdown-item__3ck-T.styled-dropdown-item__3ck-T {
+  box-sizing: content-box;
+  min-height: 24px;
+}
+
+.unselectable-title__OaxFE {
+  margin: 0;
+  padding: 0;
+  color: var(--click-datePicker-color-title-default);
+  font: var(--click-datePicker-typography-title-default);
+  user-select: none;
+}
+
+.years-grid__oB0tx {
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(3, 1fr);
+}
+}
+@layer clickui {/* 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`
@@ -363,7 +585,8 @@
   gap: var(--click-field-space-gap);
   white-space: nowrap;
 }
-.form-root__BT-Th {
+}
+@layer clickui {.form-root__BT-Th {
   display: flex;
   width: 100%;
   flex-direction: column-reverse;
@@ -396,7 +619,8 @@
   padding-top: calc(var(--click-field-space-y) + 1px);
   line-height: 1lh;
 }
-.form-element-container__cy-tb {
+}
+@layer clickui {.form-element-container__cy-tb {
   display: flex;
   /* stylelint-disable plugin/no-unsupported-browser-features, declaration-property-value-no-unknown -- the original rule used this same
    width fallback chain (100% → -webkit-fill-available → fill-available →
@@ -410,22 +634,23 @@
   align-items: flex-start;
   gap: var(--click-field-space-gap);
 }
-.error__Wvrfq {
+}
+@layer clickui {.error__Wvrfq {
   color: var(--click-field-color-label-error);
   font: var(--click-field-typography-label-error);
 }
-.label__RaRvM {
+}
+@layer clickui {.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. */
+   the pre-migration 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. 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);
@@ -446,7 +671,8 @@
   color: var(--click-field-color-label-disabled);
   font: var(--click-field-typography-label-disabled);
 }
-.loading__5BGdj {
+}
+@layer clickui {.loading__5BGdj {
   transform: scaleX(-1);
 }
 
@@ -540,7 +766,8 @@
     r: 0;
   }
 }
-/* Kept at zero specificity via :where() so that modifier classes (e.g.
+}
+@layer clickui {/* Kept at zero specificity via :where() so that modifier classes (e.g.
    .container_padding_md) and downstream styled-components overrides on a
    styled(Container) both win without needing a specificity hack — Container is
    a CSS Module, whose rules otherwise beat equal-specificity styled-components. */
@@ -733,7 +960,8 @@
     width: auto;
   }
 }
-.text__78lq0 {
+}
+@layer clickui {.text__78lq0 {
   margin: 0;
   color: var(--click-global-color-text-default);
   font: var(--typography-styles-product-text-normal-md);
@@ -745,7 +973,7 @@
 }
 
 /* font shorthand depends on both size and weight; one class per pairing
-   mirrors the single `font:` declaration emitted by styled-components. */
+   emits a single `font:` declaration. */
 
 .text_font_normal-xs__78uM- {
   font: var(--typography-styles-product-text-normal-xs);
@@ -858,7 +1086,8 @@
 .text_align_right__azLA3 {
   text-align: right;
 }
-/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. genericMenu) */
+}
+@layer clickui {/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. genericMenu) */
 
 .generic-menu-panel__y8D6y {
   display: flex;
@@ -880,6 +1109,8 @@
 .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);
+  /* Kept in this file (not Dropdown.module.css) so it can't lose to `overflow: hidden` above due to cross-file import order. */
+  overflow-y: auto;
 }
 
 .generic-menu-panel_type_context-menu__nu-Kt {
@@ -1034,7 +1265,29 @@
 .generic-menu-item__ApV25[hidden] {
   display: none;
 }
-/* stylelint-disable plugin/no-unsupported-browser-features, declaration-property-value-no-unknown -- the original rule used this same
+}
+@layer clickui {.content__UW4Fd {
+  --tooltip-max-width: initial;
+
+  display: flex;
+  /* Sit above the z-index:1 overlay tier (Dropdown, Menu, ContextMenu, DatePicker)
+     so a tooltip triggered from inside one of them isn't occluded by it. */
+  z-index: 2;
+  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);
+}
+}
+@layer clickui {/* stylelint-disable plugin/no-unsupported-browser-features, declaration-property-value-no-unknown -- the original rule used this same
    width fallback chain (100% → -webkit-fill-available → fill-available →
    stretch) so the content fills the available inline space. */
 .ellipsis-content__jsw7w {
@@ -1055,7 +1308,8 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.dropdown-menu-content__Qc6mk {
+}
+@layer clickui {.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);
@@ -1091,7 +1345,8 @@
   /* stylelint-disable-next-line custom-property-pattern -- design tokens use camelCase (e.g. genericMenu) */
   border-bottom: 1px solid var(--click-genericMenu-item-color-default-stroke-default);
 }
-/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. iconButton) */
+}
+@layer clickui {/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. iconButton) */
 
 .iconbutton__G-cEu {
   padding: var(--click-button-iconButton-default-space-y)
@@ -1236,7 +1491,65 @@
   color: var(--click-button-iconButton-color-disabled-text-default);
   cursor: not-allowed;
 }
-.panel__4VWNp {
+}
+@layer clickui {/* Design tokens use camelCase segments (e.g. datePicker, dateOption). */
+/* stylelint-disable custom-property-pattern */
+
+/* left value of 276px is the width of the PredefinedDatesContainer + 1 pixel for border */
+.calendar-renderer-container__Uuq5T {
+  position: absolute;
+  top: 0;
+  border: var(--click-datePicker-dateOption-stroke) solid
+    var(--click-datePicker-dateOption-color-background-range);
+  border-radius: var(--click-datePicker-dateOption-radii-default);
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features -- the original styled-components used lch() shadows; preserved for byte-for-byte parity. */
+  box-shadow:
+    lch(6.77% 0 0deg / 15%) 4px 4px 6px -1px,
+    lch(6.77% 0 0deg / 15%) 2px 2px 4px -1px;
+}
+
+.calendar-renderer-container_left__prjRb {
+  right: 100%;
+}
+
+.calendar-renderer-container_right__P2NI5 {
+  left: 276px;
+}
+
+/* DateRangeTableCell = styled(DateTableCell). Doubled to beat DateTableCell's
+   base border/border-radius and `.date-table-cell_present` background (0,1,0). */
+.date-range-table-cell_indicator__7mlDH.date-range-table-cell_indicator__7mlDH {
+  border: var(--click-datePicker-dateOption-stroke) solid
+    var(--click-datePicker-dateOption-color-background-range);
+  border-radius: 0;
+  background: var(--click-datePicker-dateOption-color-background-range);
+}
+
+/* PredefinedCalendarContainer = styled(Panel). Doubled to beat the Panel
+   `.panel_align-items_center` / `.panel_color_default` default modifiers (0,1,0). */
+.predefined-calendar-container__voUOa.predefined-calendar-container__voUOa {
+  align-items: start;
+  background: var(--click-panel-color-background-muted);
+}
+
+/* styled(Container) — Container's base is `:where(.container)` (0,0,0), so a
+   single class wins. */
+.predefined-dates-container__AD7R- {
+  width: 275px;
+}
+
+.scrollable-container__Sghxv {
+  max-height: 210px;
+  overflow-y: auto;
+}
+
+/* Height of 221px is the height the calendar needs to match the PredefinedDatesContainer */
+.styled-calendar-renderer__NyOzk {
+  min-height: 221px;
+  border-radius: var(--click-datePicker-dateOption-radii-default);
+}
+}
+@layer clickui {.panel__4VWNp {
   --panel-width: initial;
   --panel-height: initial;
 
@@ -1352,7 +1665,8 @@
 .panel_gap_xl__Te3bQ {
   gap: var(--click-panel-space-gap-xl);
 }
-.tabs__trigger__JHqK4 {
+}
+@layer clickui {.tabs__trigger__JHqK4 {
   padding: var(--click-tabs-space-y) var(--click-tabs-space-x);
   border: none;
   border-bottom: 2px solid var(--click-tabs-basic-color-stroke-default);
@@ -1406,7 +1720,8 @@
 .full-width-tabs__trigger_width_fixed__U9z-W {
   width: var(--full-width-tabs-trigger-width);
 }
-.buttongroup__9IkOe {
+}
+@layer clickui {.buttongroup__9IkOe {
   display: inline-flex;
   box-sizing: border-box;
   flex-direction: row;
@@ -1528,7 +1843,82 @@
 .button__w1Is2[aria-pressed='true']:disabled {
   background: var(--click-button-group-color-background-disabled-active);
 }
-@keyframes toast-hide__qiqT- {
+}
+@layer clickui {/* Design tokens use camelCase segments (e.g. datePicker, dateOption). */
+/* stylelint-disable custom-property-pattern */
+
+.bottom-padding-tabs__tpwPI {
+  padding-bottom: var(--sizes-3);
+}
+
+/* left value of 259px is the width of the PredefinedTimesContainer + 1 pixel for border */
+.calendar-renderer-container__dPoSA {
+  position: absolute;
+  top: 0;
+  border: var(--click-datePicker-dateOption-stroke) solid
+    var(--click-datePicker-dateOption-color-background-range);
+  border-radius: var(--click-datePicker-dateOption-radii-default);
+  background: var(--click-datePicker-dateOption-color-background-default);
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features -- the original styled-components used lch() shadows; preserved for byte-for-byte parity. */
+  box-shadow:
+    lch(6.77% 0 0deg / 15%) 4px 4px 6px -1px,
+    lch(6.77% 0 0deg / 15%) 2px 2px 4px -1px;
+}
+
+.calendar-renderer-container_left__ZLg7b {
+  right: 100%;
+}
+
+.calendar-renderer-container_right__XAfEt {
+  left: 259px;
+}
+
+/* DateRangeTableCell = styled(DateTableCell). Doubled to beat DateTableCell's
+   base border/border-radius and `.date-table-cell_present` background (0,1,0). */
+.date-range-table-cell_indicator__MkHh-.date-range-table-cell_indicator__MkHh- {
+  border: var(--click-datePicker-dateOption-stroke) solid
+    var(--click-datePicker-dateOption-color-background-range);
+  border-radius: 0;
+  background: var(--click-datePicker-dateOption-color-background-range);
+}
+
+/* NoOverflowDropdownContent = styled(Dropdown.Content). Doubled to beat the
+   `.dropdown-menu-content` base `overflow-y: auto` (0,1,0). */
+.no-overflow-dropdown-content__8pHim.no-overflow-dropdown-content__8pHim {
+  overflow-y: hidden;
+}
+
+/* PredefinedCalendarContainer = styled(Panel). Doubled to beat the Panel
+   `.panel_align-items_center` / `.panel_color_default` default modifiers (0,1,0). */
+.predefined-calendar-container__lJ-3j.predefined-calendar-container__lJ-3j {
+  align-items: start;
+  background: var(--click-panel-color-background-muted);
+}
+
+.predefined-times-container__GdP6y {
+  width: 258px;
+}
+
+.scrollable-container__C66RL {
+  max-height: 210px;
+  overflow-y: auto;
+}
+
+/* Height of 221px is the height the calendar needs to match the PredefinedTimesContainer */
+.styled-calendar-renderer__JumDL {
+  min-height: 221px;
+  border-radius: var(--click-datePicker-dateOption-radii-default);
+}
+
+.styled-trigger-list__mxVmt {
+  justify-content: space-around;
+}
+
+.time-input-container__VTIT5 {
+  background: var(--click-datePicker-dateOption-color-background-default);
+}
+}
+@layer clickui {@keyframes toast-hide__qiqT- {
   from {
     opacity: 1;
   }
@@ -1670,7 +2060,8 @@
 .toast-viewport_align_end__QPpTu {
   right: 0;
 }
-.button__2ZuB7 {
+}
+@layer clickui {.button__2ZuB7 {
   display: flex;
   position: relative;
   padding: var(--click-button-basic-space-y) var(--click-button-basic-space-x);
@@ -1942,24 +2333,8 @@
     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 */
+@layer clickui {/* stylelint-disable-next-line block-no-empty -- base block required by BEM */
 .accordion__LVhhv {
 }
 
@@ -2070,7 +2445,8 @@
   visibility: revert;
 }
 /* stylelint-enable no-descending-specificity */
-.spacer__okdOd {
+}
+@layer clickui {.spacer__okdOd {
   display: flex;
   background: transparent;
 }
@@ -2098,7 +2474,8 @@
 .spacer_size_xxl__upvXv {
   padding: var(--click-spacer-horizontal-space-y-xxl) var(--click-spacer-horizontal-space-x-all);
 }
-/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. iconBackground) */
+}
+@layer clickui {/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. iconBackground) */
 
 .alert__7cYyI {
   display: flex;
@@ -2267,7 +2644,8 @@
   color: inherit;
   cursor: pointer;
 }
-/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. genericMenu, sectionHeader) */
+}
+@layer clickui {/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. genericMenu, sectionHeader) */
 
 .popover-content__arM9z {
   display: flex;
@@ -2364,7 +2742,8 @@
 .check-icon_show-check__pYenS {
   opacity: 1;
 }
-.separator__mz39H[data-orientation='horizontal'] {
+}
+@layer clickui {.separator__mz39H[data-orientation='horizontal'] {
   width: 100%;
   border-top: 0.0625rem solid var(--click-separator-color-stroke-default);
 }
@@ -2445,7 +2824,8 @@
     var(--click-separator-vertical-space-y-all)
     var(--click-separator-vertical-space-x-xxl);
 }
-.avatar__3xMuZ {
+}
+@layer clickui {.avatar__3xMuZ {
   display: inline-flex;
   width: var(--click-avatar-size-width);
   height: var(--click-avatar-size-height);
@@ -2506,7 +2886,8 @@
 .avatar__fallback_size_md__21Kuk:hover {
   font: var(--click-avatar-typography-label-md-hover);
 }
-.wrapper__DxhQK {
+}
+@layer clickui {.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);
@@ -2616,9 +2997,9 @@
   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 row `gap` always uses the md token regardless of the badge's actual
+   `size` — matching the pre-migration behavior, where the row was never passed
+   a size. Preserved verbatim. */
 
 .content__8D6nB {
   display: inline-flex;
@@ -2628,28 +3009,25 @@
   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`.
+/* BadgeContent — wraps the IconWrapper. Sets `width: auto; overflow: hidden;`
+   on the IconWrapper's root and styles 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 content wrapper is keyed off `state` only — `type` and `size` are not
+   applied and effectively default to `'opaque'` and `'md'`, matching the
+   pre-migration behavior. So the descendant <svg> 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. */
+   own `svg` rule `.<icon-class> svg { width: ... }` (specificity 0,1,1). Badge
+   and Icon are both CSS Modules in the same cascade layer, and Badge's rule
+   bundles earlier, so at equal specificity Icon would win on source order —
+   the bump keeps BadgeContent's <svg> sizing authoritative. */
 
 /* 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. */
+   raise specificity so they win over the Icon component's `& svg` rule. */
 
 .badgecontent__MlQs8 {
   width: auto;
@@ -2692,19 +3070,17 @@
 
 /* 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.
+/* Close icon — rendered as an Icon, keyed off `state` only (size and type
+   default), 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. */
+   always win over Icon's own `svg` rule that sets `color: currentColor` on
+   the same element at single-class specificity. Without the bump, source
+   order would decide — Badge and Icon are CSS Modules in the same layer and
+   Badge bundles first — 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);
@@ -2738,7 +3114,8 @@
 .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) */
+}
+@layer clickui {/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. bigStat) */
 .big-stat__ZC5s7 {
   --big-stat-max-width: initial;
 
@@ -2815,7 +3192,8 @@
   color: var(--big-stat-title-color);
   font: var(--big-stat-title-font);
 }
-/* Kept at zero specificity via :where() so that downstream styled-components
+}
+@layer clickui {/* Kept at zero specificity via :where() so that downstream styled-components
    overrides on a styled(BaseButton) (SplitButton's PrimaryButton/SecondaryButton
    override padding, border-radius, font, background, color, border, and width)
    win without needing a specificity hack — BaseButton is a CSS Module, whose rules
@@ -2855,7 +3233,8 @@
   font: var(--click-button-basic-typography-label-disabled);
   cursor: not-allowed;
 }
-.split-button__EX3XI {
+}
+@layer clickui {.split-button__EX3XI {
   display: inline-flex;
   width: revert;
   overflow: hidden;
@@ -2993,7 +3372,8 @@
 .split-button__dropdown-content__nmia- {
   min-width: var(--split-button-dropdown-min-width, 0);
 }
-.header__Cn2aH {
+}
+@layer clickui {.header__Cn2aH {
   max-width: 100%;
   gap: inherit;
 }
@@ -3209,7 +3589,8 @@
   border: 1px solid var(--card-stroke-active);
 }
 /* stylelint-enable no-descending-specificity */
-.wrapper__zCfLE {
+}
+@layer clickui {.wrapper__zCfLE {
   display: flex;
   width: 100%;
   max-width: 100%;
@@ -3391,7 +3772,8 @@
 div:active + .topbadge__E79OZ {
   border-color: var(--click-button-basic-color-primary-stroke-active);
 }
-.title__t68i9 {
+}
+@layer clickui {.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);
@@ -3415,7 +3797,7 @@ div:active + .topbadge__E79OZ {
 }
 
 /* font shorthand depends on both family and size; one class per pairing
-   mirrors the single `font:` declaration emitted by styled-components. */
+   emits a single `font:` declaration. */
 
 .title_font_product-xs__IdFu4 {
   font: var(--typography-styles-product-titles-xs);
@@ -3490,7 +3872,8 @@ div:active + .topbadge__E79OZ {
 .title_align_right__483BF {
   text-align: right;
 }
-.background__q--1v {
+}
+@layer clickui {.background__q--1v {
   display: flex;
   padding: 1px;
   border-radius: var(--click-card-promotion-radii-all);
@@ -3542,7 +3925,8 @@ div:active + .topbadge__E79OZ {
   color: inherit;
   cursor: pointer;
 }
-.wrapper__x6K6U {
+}
+@layer clickui {.wrapper__x6K6U {
   display: flex;
   min-width: 320px;
   max-width: 420px;
@@ -3641,7 +4025,8 @@ div:active + .topbadge__E79OZ {
 /* 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.
+}
+@layer clickui {/* 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
@@ -3723,6 +4108,14 @@ div:active + .topbadge__E79OZ {
   --checkbox-stroke-active: var(--click-checkbox-color-variations-var6-stroke-active);
 }
 
+.checkinput_variant_var7__5tG25 {
+  --checkbox-bg-default: var(--click-checkbox-color-variations-var7-background-default);
+  --checkbox-bg-hover: var(--click-checkbox-color-variations-var7-background-hover);
+  --checkbox-bg-active: var(--click-checkbox-color-variations-var7-background-active);
+  --checkbox-stroke-default: var(--click-checkbox-color-variations-var7-stroke-default);
+  --checkbox-stroke-active: var(--click-checkbox-color-variations-var7-stroke-active);
+}
+
 .checkinput__oErG6:hover {
   background: var(--checkbox-bg-hover);
 }
@@ -3757,7 +4150,8 @@ div:active + .topbadge__E79OZ {
 .checkicon__wvW5M[data-disabled] {
   color: var(--click-checkbox-color-check-disabled);
 }
-/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. genericLabel) */
+}
+@layer clickui {/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. genericLabel) */
 
 .generic-label__l8R-z {
   color: var(--click-field-color-genericLabel-default);
@@ -3777,8 +4171,8 @@ div:active + .topbadge__E79OZ {
 }
 
 /* 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. */
+   defined after hover/focus to neutralize them; the pre-migration styling
+   emitted 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,
@@ -3788,7 +4182,8 @@ div:active + .topbadge__E79OZ {
   cursor: not-allowed;
 }
 /* stylelint-enable no-descending-specificity */
-.codeblock__pRWOC {
+}
+@layer clickui {.codeblock__pRWOC {
   position: relative;
   width: 100%;
   /* stylelint-disable plugin/no-unsupported-browser-features, declaration-property-value-no-unknown -- the original
@@ -3836,7 +4231,8 @@ div:active + .topbadge__E79OZ {
   right: var(--click-codeblock-space-x);
   gap: 0.625rem;
 }
-.content__fI-1- {
+}
+@layer clickui {.content__fI-1- {
   display: flex;
   overflow: hidden;
   flex-direction: column;
@@ -3856,7 +4252,8 @@ div:active + .topbadge__E79OZ {
     flex-direction: column;
   }
 }
-/* Kept at zero specificity via :where() so that downstream styled-components
+}
+@layer clickui {/* Kept at zero specificity via :where() so that downstream styled-components
    overrides on a styled(EmptyButton) (e.g. CrossButton overriding background and
    padding, the Popover/CodeBlock close/copy buttons overriding color and padding)
    win without needing a specificity hack — EmptyButton is a CSS Module, whose
@@ -3877,7 +4274,8 @@ div:active + .topbadge__E79OZ {
 :where(.empty-button__1ynA8):disabled {
   cursor: not-allowed;
 }
-/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. iconButton) */
+}
+@layer clickui {/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. iconButton) */
 
 .cross-button__StJ4Q {
   padding: var(--click-button-iconButton-sm-space-y)
@@ -3889,7 +4287,8 @@ div:active + .topbadge__E79OZ {
 .cross-button__StJ4Q:hover {
   background: var(--click-button-iconButton-color-primary-background-hover);
 }
-/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. opaqueBackground) */
+}
+@layer clickui {/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. opaqueBackground) */
 .trigger__bbzuV {
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features -- `fit-content`
      keyword on `width` is widely supported on evergreen browsers; the original
@@ -3986,7 +4385,8 @@ div:active + .topbadge__E79OZ {
   color: var(--click-dialog-color-description-default);
   font: var(--click-dialog-typography-description-default);
 }
-.row-number-column__n-aQm {
+}
+@layer clickui {.row-number-column__n-aQm {
   position: sticky;
   top: var(--row-number-column-top);
   left: 0;
@@ -4008,7 +4408,8 @@ div:active + .topbadge__E79OZ {
   white-space: nowrap;
   text-overflow: ellipsis;
 }
-/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. selectDirect) */
+}
+@layer clickui {/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. selectDirect) */
 
 /*
  * The original styled-component dispatches background / text colour / border
@@ -4154,7 +4555,8 @@ div:active + .topbadge__E79OZ {
 .cell__overlay_row-auto-height__teKk1::before {
   border: none;
 }
-/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. selectDirect) */
+}
+@layer clickui {/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. selectDirect) */
 
 .header__hXzAE {
   display: flex;
@@ -4198,7 +4600,8 @@ div:active + .topbadge__E79OZ {
 .header__row-column_scrolled-horizontal__QZO4p {
   box-shadow: 0 0 0 1px var(--click-grid-header-cell-color-stroke-default);
 }
-/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. selectDirect) */
+}
+@layer clickui {/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. selectDirect) */
 
 .column-resizer__8f12T {
   position: absolute;
@@ -4220,7 +4623,8 @@ div:active + .topbadge__E79OZ {
   position: fixed;
   height: 100%;
 }
-/*
+}
+@layer clickui {/*
  * `.grid` is the Grid's outer container. It is rendered as the ContextMenu.Trigger
  * (the root element the whole grid mounts into), which is why the trigger carries
  * the grid's own box styling rather than a context-menu-specific class.
@@ -4254,7 +4658,8 @@ div:active + .topbadge__E79OZ {
   margin-top: var(--grid-data-top, 0);
   margin-left: var(--grid-data-left, 0);
 }
-/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. genericMenu) */
+}
+@layer clickui {/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. genericMenu) */
 
 .trigger__4-zK2:focus-visible {
   outline: 2px solid var(--click-global-color-outline-default);
@@ -4294,7 +4699,8 @@ div:active + .topbadge__E79OZ {
   width: 100%;
   border-bottom: 1px solid var(--click-genericMenu-item-color-default-stroke-default);
 }
-.grid-container__u1yIf {
+}
+@layer clickui {.grid-container__u1yIf {
   /* These custom properties are only emitted inline when the matching prop is
      set (grid-auto-columns, grid-auto-flow, grid-auto-rows, grid-template-area,
      grid-template-columns, grid-template-rows, max-width, min-width, height,
@@ -4350,54 +4756,232 @@ div:active + .topbadge__E79OZ {
   /* stylelint-enable declaration-block-no-redundant-longhand-properties */
 }
 
-/* stylelint-disable-next-line media-feature-range-notation -- prefix notation required for browser compatibility per .browserslistrc */
-@media (max-width: 768px) {
-  .grid-container_responsive__3-8Xh {
-    grid-template-columns: 1fr;
-  }
+/* stylelint-disable-next-line media-feature-range-notation -- prefix notation required for browser compatibility per .browserslistrc */
+@media (max-width: 768px) {
+  .grid-container_responsive__3-8Xh {
+    grid-template-columns: 1fr;
+  }
+
+  /* When NOT responsive, the styled-components source applied
+     `grid-template-columns: ${$gridTemplateColumns || 'auto'}` at the md
+     breakpoint — i.e. the explicit template when one was passed, otherwise
+     `auto`. The `--grid-container-template-columns` var is set inline only when
+     the prop is provided, so the `auto` fallback reproduces that exactly. */
+  .grid-container_not-responsive__Qqhg3 {
+    grid-template-columns: var(--grid-container-template-columns, auto);
+  }
+}
+}
+@layer clickui {.menu-panel__-IeVm {
+  display: block;
+  padding: var(--click-popover-space-y) var(--click-popover-space-x);
+  border: 1px solid var(--click-popover-color-panel-stroke-default);
+  border-radius: var(--click-popover-radii-all);
+  background-color: var(--click-popover-color-panel-background-default);
+  box-shadow: var(--click-popover-shadow-default);
+}
+
+.menu-panel_show-close__Qx3Mo {
+  padding-top: 1rem;
+}
+
+.trigger__QvCU1 {
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features -- `fit-content`
+     keyword on `width` is widely supported on evergreen browsers; the original
+     rule used the same value. */
+  width: fit-content;
+  border: none;
+  background: inherit;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+}
+
+.close-button__fpjhc {
+  position: absolute;
+  top: var(--click-popover-space-y);
+  right: var(--click-popover-space-x);
+  width: var(--click-popover-icon-size-width);
+  height: var(--click-popover-icon-size-height);
+}
+}
+@layer clickui {.link__Ly-e3 {
+  display: inline-flex;
+  margin: 0;
+  margin-right: var(--link-gap);
+  align-items: center;
+  gap: var(--link-gap);
+  color: var(--click-global-color-text-link-default);
+  font: var(--link-font);
+  text-decoration: none;
+}
+
+.link__Ly-e3:hover,
+.link__Ly-e3:focus {
+  color: var(--click-global-color-text-link-hover);
+  text-decoration: underline;
+  cursor: pointer;
+  transition: var(--transition-default);
+}
+
+.link__Ly-e3:visited {
+  color: var(--click-global-color-text-link-default);
+}
+
+/* The original emitted theme.click.link.space.sm.gap for size xs/sm and
+   theme.click.link.space.md.gap for md/lg. Alias to a local custom property
+   so the gap/margin-right rule on .link stays single-source. */
+.link_size_xs__kYknu,
+.link_size_sm__Qqpi3 {
+  --link-gap: var(--click-link-space-sm-gap);
+}
+
+.link_size_md__QlDJt,
+.link_size_lg__FkICb {
+  --link-gap: var(--click-link-space-md-gap);
+}
+
+/* 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);
+}
+
+.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);
+}
 
-  /* When NOT responsive, the styled-components source applied
-     `grid-template-columns: ${$gridTemplateColumns || 'auto'}` at the md
-     breakpoint — i.e. the explicit template when one was passed, otherwise
-     `auto`. The `--grid-container-template-columns` var is set inline only when
-     the prop is provided, so the `auto` fallback reproduces that exactly. */
-  .grid-container_not-responsive__Qqhg3 {
-    grid-template-columns: var(--grid-container-template-columns, auto);
-  }
+.link_size_lg__FkICb.link_weight_bold__FWQyo {
+  --link-font: var(--typography-styles-product-text-bold-lg);
 }
-.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);
+
+.link_size_xs__kYknu.link_weight_mono__Mzdum {
+  --link-font: var(--typography-styles-product-text-mono-xs);
 }
 
-.menu-panel_show-close__Qx3Mo {
-  padding-top: 1rem;
+.link_size_sm__Qqpi3.link_weight_mono__Mzdum {
+  --link-font: var(--typography-styles-product-text-mono-sm);
 }
 
-.trigger__QvCU1 {
-  /* stylelint-disable-next-line plugin/no-unsupported-browser-features -- `fit-content`
-     keyword on `width` is widely supported on evergreen browsers; the original
-     rule used the same value. */
+.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 is a `link__icon` element — it receives the scoped class 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. */
+/* stylelint-disable-next-line block-no-empty -- base element required by BEM */
+.link__icon__El8JR {
+}
+
+.link__icon_size_xs__qMUN-,
+.link__icon_size_sm__d2ZIU {
+  width: var(--click-link-icon-size-sm-width);
+  height: var(--click-link-icon-size-sm-height);
+}
+
+.link__icon_size_md__-5EZ1,
+.link__icon_size_lg__RY5Y1 {
+  width: var(--click-link-icon-size-md-width);
+  height: var(--click-link-icon-size-md-height);
+}
+}
+@layer clickui {/* Design tokens use camelCase segments (e.g. genericMenu). */
+/* stylelint-disable custom-property-pattern */
+
+/* PopoverTrigger / PopoverContent = styled(RadixPopover.Trigger/Content). These
+   wrap the raw Radix primitives (no CSS Module base), so the classes apply
+   directly with no cascade competition. */
+.popover-trigger__44tPj {
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features -- the original styled-components used this width; preserved for byte-for-byte parity. */
   width: fit-content;
+  padding: 0;
   border: none;
-  background: inherit;
-  color: inherit;
-  font: inherit;
+  background: none;
   cursor: pointer;
 }
 
-.close-button__fpjhc {
-  position: absolute;
-  top: var(--click-popover-space-y);
-  right: var(--click-popover-space-x);
-  width: var(--click-popover-icon-size-width);
-  height: var(--click-popover-icon-size-height);
+.popover-trigger__44tPj:disabled {
+  cursor: not-allowed;
+}
+
+.popover-trigger__44tPj:focus-visible {
+  outline: none;
 }
-/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. fileUpload) */
+
+.popover-content__ZJbSK {
+  z-index: 1;
+  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);
+}
+
+.popover-content__ZJbSK:focus {
+  outline: none;
+}
+}
+@layer clickui {/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. fileUpload) */
 .upload-area__3SxAA {
   display: flex;
   box-sizing: border-box;
@@ -4527,7 +5111,8 @@ div:active + .topbadge__E79OZ {
 .upload-text_grow_true__9MNMX {
   flex: 1;
 }
-/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. fileUpload) */
+}
+@layer clickui {/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. fileUpload) */
 .truncator__j4dr4 {
   display: flex;
   width: auto;
@@ -4549,7 +5134,8 @@ div:active + .topbadge__E79OZ {
   flex-shrink: 0;
   white-space: nowrap;
 }
-/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. fileUpload) */
+}
+@layer clickui {/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. fileUpload) */
 .file-item-container__86J-i {
   display: flex;
   min-width: 0;
@@ -4631,6 +5217,9 @@ div:active + .topbadge__E79OZ {
   margin-top: var(--click-fileUpload-md-space-gap);
   margin-bottom: 9px;
 }
+}
+@layer clickui {/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. progressBar) */
+
 .progressbar__21KMf {
   display: flex;
   min-height: 2px;
@@ -4650,7 +5239,7 @@ div:active + .topbadge__E79OZ {
   );
   background-position: center;
   background-size: calc(100% + 2px);
-  color: var(--global-color-accent-default);
+  color: var(--click-progressBar-color-text-default);
   font: var(--typography-styles-product-text-normal-sm);
   transition: all 100ms ease-in-out;
 }
@@ -4755,7 +5344,8 @@ div:active + .topbadge__E79OZ {
 .progressclosebutton_dismissable__p5mDJ {
   visibility: visible;
 }
-/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. fileUpload) */
+}
+@layer clickui {/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. fileUpload) */
 .files-list__Of0Ps {
   display: flex;
   width: 100%;
@@ -4763,7 +5353,8 @@ div:active + .topbadge__E79OZ {
   flex-direction: column;
   gap: var(--click-fileUpload-sm-space-gap);
 }
-/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. fileTabs) */
+}
+@layer clickui {/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. fileTabs) */
 .tabs__jY99b {
   display: flex;
   position: relative;
@@ -4930,7 +5521,8 @@ div:active + .topbadge__E79OZ {
 .empty-button__czm-t:hover {
   background: var(--click-tabs-fileTabs-color-closeButton-background-hover);
 }
-@keyframes flyout-animation-width__LabkI {
+}
+@layer clickui {@keyframes flyout-animation-width__LabkI {
   from {
     width: 0;
   }
@@ -5161,152 +5753,15 @@ div:active + .topbadge__E79OZ {
   display: inline-block;
   max-width: calc(100% - 1rem);
 }
-.hover-card__trigger__tMcTR {
+}
+@layer clickui {.hover-card__trigger__tMcTR {
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features -- `fit-content`
      keyword on `width` is widely supported on evergreen browsers; the original
      styled-components rule used the same value. */
   width: fit-content;
 }
-.link__Ly-e3 {
-  display: inline-flex;
-  margin: 0;
-  margin-right: var(--link-gap);
-  align-items: center;
-  gap: var(--link-gap);
-  color: var(--click-global-color-text-link-default);
-  font: var(--link-font);
-  text-decoration: none;
-}
-
-.link__Ly-e3:hover,
-.link__Ly-e3:focus {
-  color: var(--click-global-color-text-link-hover);
-  text-decoration: underline;
-  cursor: pointer;
-  transition: var(--transition-default);
-}
-
-.link__Ly-e3:visited {
-  color: var(--click-global-color-text-link-default);
-}
-
-/* The original emitted theme.click.link.space.sm.gap for size xs/sm and
-   theme.click.link.space.md.gap for md/lg. Alias to a local custom property
-   so the gap/margin-right rule on .link stays single-source. */
-.link_size_xs__kYknu,
-.link_size_sm__Qqpi3 {
-  --link-gap: var(--click-link-space-sm-gap);
-}
-
-.link_size_md__QlDJt,
-.link_size_lg__FkICb {
-  --link-gap: var(--click-link-space-md-gap);
-}
-
-/* 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);
-}
-
-.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 is a `link__icon` element — it receives the scoped class 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. */
-/* stylelint-disable-next-line block-no-empty -- base element required by BEM */
-.link__icon__El8JR {
-}
-
-.link__icon_size_xs__qMUN-,
-.link__icon_size_sm__d2ZIU {
-  width: var(--click-link-icon-size-sm-width);
-  height: var(--click-link-icon-size-sm-height);
-}
-
-.link__icon_size_md__-5EZ1,
-.link__icon_size_lg__RY5Y1 {
-  width: var(--click-link-icon-size-md-width);
-  height: var(--click-link-icon-size-md-height);
 }
-.multi-accordion__ntYTM {
+@layer clickui {.multi-accordion__ntYTM {
   display: flex;
   flex-direction: column;
   justify-content: start;
@@ -5506,7 +5961,8 @@ div:active + .topbadge__E79OZ {
 .multi-accordion__status-icon_completed__z5-XJ svg path:first-of-type {
   stroke: var(--global-color-accent-default) !important;
 }
-.collapsible__8jmKP {
+}
+@layer clickui {.collapsible__8jmKP {
   width: 100%;
 }
 
@@ -5585,10 +6041,11 @@ div:active + .topbadge__E79OZ {
   overflow: hidden;
   text-overflow: ellipsis;
 }
-/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. sqlSidebar) */
+}
+@layer clickui {/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. sqlSidebar) */
 .wrapper__klOWe {
   display: flex;
-  /* stylelint-disable plugin/no-unsupported-browser-features, declaration-property-value-no-unknown -- the original styled rule used this
+  /* stylelint-disable plugin/no-unsupported-browser-features, declaration-property-value-no-unknown -- the pre-migration styling used this
    same width fallback chain (100% → -webkit-fill-available → fill-available →
    stretch) so the item fills the available inline space. */
   width: 100%;
@@ -5654,7 +6111,7 @@ div:active + .topbadge__E79OZ {
   cursor: not-allowed;
 }
 
-/* stylelint-disable-next-line media-feature-range-notation -- prefix syntax matches the original styled rule and is more broadly supported than range syntax */
+/* stylelint-disable-next-line media-feature-range-notation -- prefix syntax matches the pre-migration styling and is more broadly supported than range syntax */
 @media (max-width: 640px) {
   .wrapper__klOWe {
     padding: var(--item-mobile-space-y) var(--item-mobile-space-right)
@@ -5752,9 +6209,10 @@ div:active + .topbadge__E79OZ {
   --item-text-active: var(--click-sidebar-sqlSidebar-navigation-subItem-color-text-active);
   --item-text-disabled: var(--click-sidebar-sqlSidebar-navigation-subItem-color-text-disabled);
 }
-/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. sqlSidebar) */
+}
+@layer clickui {/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. sqlSidebar) */
 .wrapper__ey0v7 {
-  /* stylelint-disable plugin/no-unsupported-browser-features, declaration-property-value-no-unknown -- the original styled rule used this
+  /* stylelint-disable plugin/no-unsupported-browser-features, declaration-property-value-no-unknown -- the pre-migration styling used this
    same width fallback chain (100% → -webkit-fill-available → fill-available →
    stretch) so the title fills the available inline space. */
   width: 100%;
@@ -5779,8 +6237,8 @@ div:active + .topbadge__E79OZ {
    wrapper `as={Collapsible.Trigger}`, so the element also carries
    `.collapsible__trigger`, whose `display/align-items/color/font/cursor`
    resets would otherwise win on CSS-module bundle order and strip the title's
-   own typography. The original styled-components cascade resolved in the
-   title's favour; the doubled class makes that deterministic. Only the
+   own typography. The pre-migration cascade resolved in the title's favour;
+   the doubled class makes that deterministic. Only the
    properties that actually conflict with the trigger live here — box metrics
    and the `--title-*` custom properties stay single-class above/below so the
    `type`/`collapsible` modifiers still override them. */
@@ -5828,14 +6286,16 @@ div:active + .topbadge__E79OZ {
 .wrapper_collapsible_true__8ANnP {
   --title-pad-left: 0;
 }
-/* Doubled class raises specificity to (0,2,0) so this width wins over the
+}
+@layer clickui {/* Doubled class raises specificity to (0,2,0) so this width wins over the
    Select root's own `width: 100%` rule, which styled() injects into <head>
    at runtime (after the bundled CSS). The previous styled() wrapper relied
    on runtime injection order for the same effect. */
 .custom-select__iARgW.custom-select__iARgW {
   width: 150px;
 }
-/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. genericMenu, fieldText) */
+}
+@layer clickui {/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. genericMenu, fieldText) */
 
 .select-value__CxDXF {
   overflow: hidden;
@@ -6135,7 +6595,8 @@ div:active + .topbadge__E79OZ {
 .select-trigger__k4Odp .select-item-description-text__eKqEn {
   display: none;
 }
-.badge-list__WpJAq {
+}
+@layer clickui {.badge-list__WpJAq {
   display: flex;
   flex-wrap: wrap;
   justify-content: flex-start;
@@ -6154,7 +6615,8 @@ div:active + .topbadge__E79OZ {
   max-width: fit-content;
   /* stylelint-enable plugin/no-unsupported-browser-features, declaration-property-value-no-unknown */
 }
-.select-value-container__I2dbz {
+}
+@layer clickui {.select-value-container__I2dbz {
   display: flex;
   width: 100%;
   overflow: hidden;
@@ -6164,7 +6626,8 @@ div:active + .topbadge__E79OZ {
   pointer-events: inherit;
   text-overflow: ellipsis;
 }
-.radio-group__RXgmX {
+}
+@layer clickui {.radio-group__RXgmX {
   display: flex;
   flex-wrap: wrap;
   gap: var(--click-checkbox-space-gap);
@@ -6263,7 +6726,8 @@ div:active + .topbadge__E79OZ {
   background: var(--click-radio-color-indicator-disabled);
 }
 /* stylelint-enable no-descending-specificity */
-/* The wrapper class is applied alongside FormRoot's styled-components class.
+}
+@layer clickui {/* 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
@@ -6328,7 +6792,8 @@ 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) */
+}
+@layer clickui {/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. iconButton) */
 .table__Dkosn {
   display: flex;
   width: 100%;
@@ -6703,7 +7168,8 @@ div:active + .topbadge__E79OZ {
   word-break: break-all;
   overflow-wrap: break-word;
 }
-.stepper__ZgysL {
+}
+@layer clickui {.stepper__ZgysL {
   display: flex;
   width: 100%;
   flex-direction: column;
@@ -7005,7 +7471,8 @@ div:active + .topbadge__E79OZ {
     --click-stepper-vertical-bulleted-content-space-left
   );
 }
-:root,
+}
+@layer clickui {:root,
 [data-cui-theme="light"] {
   --click-accordion-sm-icon-size-height: 1rem;
   --click-accordion-sm-icon-size-width: 1rem;
@@ -7643,6 +8110,18 @@ div:active + .topbadge__E79OZ {
   --click-checkbox-color-variations-var6-check-hover: #ffffff;
   --click-checkbox-color-variations-var6-check-active: #ffffff;
   --click-checkbox-color-variations-var6-check-disabled: #a0a0a0;
+  --click-checkbox-color-variations-var7-background-default: #f6f7fa;
+  --click-checkbox-color-variations-var7-background-hover: #f6f7fa;
+  --click-checkbox-color-variations-var7-background-active: #ff2323;
+  --click-checkbox-color-variations-var7-background-disabled: #dfdfdf;
+  --click-checkbox-color-variations-var7-stroke-default: #ff5353;
+  --click-checkbox-color-variations-var7-stroke-hover: #ff5353;
+  --click-checkbox-color-variations-var7-stroke-active: #ff5353;
+  --click-checkbox-color-variations-var7-stroke-disabled: #c0c0c0;
+  --click-checkbox-color-variations-var7-check-default: #ffffff;
+  --click-checkbox-color-variations-var7-check-hover: #ffffff;
+  --click-checkbox-color-variations-var7-check-active: #ffffff;
+  --click-checkbox-color-variations-var7-check-disabled: #a0a0a0;
   --click-checkbox-color-check-default: #ffffff;
   --click-checkbox-color-check-hover: #ffffff;
   --click-checkbox-color-check-active: #ffffff;
@@ -8486,8 +8965,7 @@ div:active + .topbadge__E79OZ {
   --click-serviceCard-color-background-hover: #fbfcff;
   --click-serviceCard-color-stroke-default: #e6e7e9;
   --click-serviceCard-color-stroke-hover: #cccfd3;
-  --click-gareth-test-main-text: #161517;
-  --click-gareth-test-main-danger: #c10000;
+  --click-progressBar-color-text-default: #ffffff;
   --transition-default: all 100ms ease-in 0ms;
   --transition-duration-slow: 300ms;
   --transition-duration-smooth: 150ms;
@@ -8808,7 +9286,8 @@ div:active + .topbadge__E79OZ {
   --global-color-iconButton-badge-background: #e7effd;
   --global-color-icon-background: linear-gradient(132deg, #FFFFFF 8%, #292929 30%);
   --name: light;
-}[data-cui-theme="dark"] {
+}
+}@layer clickui {[data-cui-theme="dark"] {
   --click-accordion-sm-icon-size-height: 1rem;
   --click-accordion-sm-icon-size-width: 1rem;
   --click-accordion-sm-space-gap: 0.25rem;
@@ -9449,6 +9928,18 @@ div:active + .topbadge__E79OZ {
   --click-checkbox-color-variations-var6-check-hover: #ffffff;
   --click-checkbox-color-variations-var6-check-active: #ffffff;
   --click-checkbox-color-variations-var6-check-disabled: #a0a0a0;
+  --click-checkbox-color-variations-var7-background-default: rgb(17.794% 17.794% 17.794%);
+  --click-checkbox-color-variations-var7-background-hover: rgb(17.794% 17.794% 17.794%);
+  --click-checkbox-color-variations-var7-background-active: #ff2323;
+  --click-checkbox-color-variations-var7-background-disabled: rgb(17.794% 17.794% 17.794%);
+  --click-checkbox-color-variations-var7-stroke-default: #ff2323;
+  --click-checkbox-color-variations-var7-stroke-hover: #ff7575;
+  --click-checkbox-color-variations-var7-stroke-active: #ff7575;
+  --click-checkbox-color-variations-var7-stroke-disabled: #606060;
+  --click-checkbox-color-variations-var7-check-default: #ffffff;
+  --click-checkbox-color-variations-var7-check-hover: #ffffff;
+  --click-checkbox-color-variations-var7-check-active: #ffffff;
+  --click-checkbox-color-variations-var7-check-disabled: #a0a0a0;
   --click-checkbox-color-background-default: rgb(17.794% 17.794% 17.794%);
   --click-checkbox-color-background-hover: rgb(17.794% 17.794% 17.794%);
   --click-checkbox-color-background-active: #faff69;
@@ -10299,8 +10790,7 @@ div:active + .topbadge__E79OZ {
   --click-serviceCard-color-background-hover: lch(19.053 0 none);
   --click-serviceCard-color-stroke-default: rgb(23.627% 23.627% 23.627%);
   --click-serviceCard-color-stroke-hover: rgb(27.446% 27.446% 27.446%);
-  --click-gareth-test-main-text: #ffffff;
-  --click-gareth-test-main-danger: #ffbaba;
+  --click-progressBar-color-text-default: #e6e7e9;
   --transition-default: all 100ms ease-in 0ms;
   --transition-duration-slow: 300ms;
   --transition-duration-smooth: 150ms;
@@ -10621,4 +11111,13 @@ div:active + .topbadge__E79OZ {
   --global-color-iconButton-badge-background: #faff69;
   --global-color-icon-background: linear-gradient(132deg, #FAFF69 8%, #292929 30%);
   --name: dark;
-}
+}
+}@layer clickui {/* Page-level defaults: apply the theme's global text/background colors to
+   <body>, swapping with the active `data-cui-theme`. Replaces the old
+   styled-components `createGlobalStyle` rule. Wrapped in the `clickui` cascade
+   layer (like all click-ui styles), so any consumer `body` rule overrides it. */
+body {
+  color: var(--click-global-color-text-default);
+  background-color: var(--click-global-color-background-default);
+}
+}