@tight-embedded/react 1.0.0-alpha.0 → 1.0.0

package/dist/index.css

@@ -5,6 +5,8 @@
 
     * {
         box-sizing: border-box;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
     }
 }
 
@@ -24,6 +26,15 @@
     }
 }
 
+@keyframes spin {
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
+}
+
 @layer base {
   :root {
     --made-with-panda: '🐼';
@@ -95,8 +106,9 @@
     --Tight-fonts-base: Duplet Regular, sans-serif;
     --Tight-fontSizes-sm: 11px;
     --Tight-fontSizes-md: 14px;
-    --Tight-fontSizes-lg: 20px;
-    --Tight-fontSizes-xl: 36px;
+    --Tight-fontSizes-lg: 16px;
+    --Tight-fontSizes-xl: 20px;
+    --Tight-fontSizes-2xl: 36px;
     --Tight-fontWeights-sm: 400;
     --Tight-fontWeights-md: 600;
     --Tight-fontWeights-lg: 900;
@@ -111,6 +123,7 @@
     --Tight-animations-appear-instant: 0.25s linear fade-in;
     --Tight-animations-appear-delay: 0.25s linear both 1.5s fade-in;
     --Tight-animations-shimmer: 2s ease-in-out infinite shimmer;
+    --Tight-animations-spin: 1.5s ease-in-out 0.1s spin infinite;
     --Tight-shadows-box-shadow: 0px 10px 30px 0px rgba(24, 36, 40, 0.10);
     --Tight-breakpoints-sm: 640px;
     --Tight-breakpoints-md: 850px;
@@ -189,8 +202,8 @@
     --Tight-colors-typography-intent-secondary-hover: var(--Tight-colors-typography-base);
     --Tight-colors-typography-intent-secondary-active: var(--Tight-colors-typography-base);
     --Tight-colors-typography-intent-action: var(--Tight-colors-typography-base);
-    --Tight-colors-typography-intent-action-hover: var(--Tight-colors-brand-action);
-    --Tight-colors-typography-intent-action-active: var(--Tight-colors-brand-action-strong);
+    --Tight-colors-typography-intent-action-hover: var(--Tight-colors-typography-base);
+    --Tight-colors-typography-intent-action-active: var(--Tight-colors-typography-base);
     --Tight-colors-typography-intent-success: var(--Tight-colors-typography-base);
     --Tight-colors-typography-intent-success-hover: var(--Tight-colors-typography-base);
     --Tight-colors-typography-intent-success-active: var(--Tight-colors-typography-base);
@@ -203,11 +216,13 @@
     --Tight-colors-typography-accent-success: var(--Tight-colors-brand-success-strong);
     --Tight-colors-typography-accent-warning: var(--Tight-colors-brand-warning-strong);
     --Tight-colors-typography-accent-danger: var(--Tight-colors-brand-danger-strong);
+    --Tight-colors-typography-accent-action: var(--Tight-colors-brand-action-strong);
     --Tight-colors-typography-body: var(--Tight-colors-typography-base);
     --Tight-colors-typography-label: var(--Tight-colors-typography-base);
-    --Tight-colors-typography-label-sub: var(--Tight-colors-typography-base);
+    --Tight-colors-typography-label-sub: var(--Tight-colors-typography-base-weak);
     --Tight-colors-typography-label-strong: var(--Tight-colors-typography-base);
     --Tight-colors-typography-label-strongSub: var(--Tight-colors-typography-base);
+    --Tight-colors-typography-label-emphasisSub: var(--Tight-colors-typography-base);
     --Tight-colors-typography-heading: var(--Tight-colors-typography-base);
     --Tight-colors-typography-metric-sm: var(--Tight-colors-typography-base);
     --Tight-colors-typography-metric-md: var(--Tight-colors-typography-base);
@@ -285,23 +300,25 @@
     --Tight-fontWeights-label-strong: var(--Tight-fontWeights-md);
     --Tight-fontWeights-label-sub: var(--Tight-fontWeights-sm);
     --Tight-fontWeights-label-strongSub: var(--Tight-fontWeights-md);
+    --Tight-fontWeights-label-emphasisSub: var(--Tight-fontWeights-lg);
     --Tight-fontWeights-heading: var(--Tight-fontWeights-md);
     --Tight-fontWeights-title: var(--Tight-fontWeights-sm);
     --Tight-fontWeights-metric-sm: var(--Tight-fontWeights-sm);
     --Tight-fontWeights-metric-md: var(--Tight-fontWeights-sm);
     --Tight-fontWeights-metric-lg: var(--Tight-fontWeights-sm);
     --Tight-fontWeights-metric-xl: var(--Tight-fontWeights-sm);
-    --Tight-fontSizes-title: var(--Tight-fontSizes-xl);
+    --Tight-fontSizes-title: var(--Tight-fontSizes-2xl);
     --Tight-fontSizes-body: var(--Tight-fontSizes-md);
     --Tight-fontSizes-label: var(--Tight-fontSizes-md);
     --Tight-fontSizes-label-strong: var(--Tight-fontSizes-md);
     --Tight-fontSizes-label-sub: var(--Tight-fontSizes-sm);
     --Tight-fontSizes-label-strongSub: var(--Tight-fontSizes-sm);
-    --Tight-fontSizes-heading: var(--Tight-fontSizes-lg);
+    --Tight-fontSizes-label-emphasisSub: var(--Tight-fontSizes-sm);
+    --Tight-fontSizes-heading: var(--Tight-fontSizes-xl);
     --Tight-fontSizes-metric-sm: var(--Tight-fontSizes-sm);
     --Tight-fontSizes-metric-md: var(--Tight-fontSizes-md);
-    --Tight-fontSizes-metric-lg: var(--Tight-fontSizes-lg);
-    --Tight-fontSizes-metric-xl: var(--Tight-fontSizes-xl);
+    --Tight-fontSizes-metric-lg: var(--Tight-fontSizes-xl);
+    --Tight-fontSizes-metric-xl: var(--Tight-fontSizes-2xl);
 }
 }
 
@@ -322,6 +339,10 @@
     padding: 6px;
 }
 
+  .tsystem-p_15px_15px_0_15px {
+    padding: 15px 15px 0 15px;
+}
+
   .tsystem-p_15px {
     padding: 15px;
 }
@@ -346,6 +367,10 @@
     padding: 15px;
 }
 
+  .tsystem-bd_none {
+    border: none;
+}
+
   .tsystem-inset_0 {
     inset: 0;
 }
@@ -358,8 +383,8 @@
     padding: 16px;
 }
 
-  .tsystem-bd_none {
-    border: none;
+  .tsystem-m_32px {
+    margin: 32px;
 }
 
   .tsystem-p_0 {
@@ -446,8 +471,8 @@
     background: var(--Tight-colors-transparent);
 }
 
-  .tsystem-p_4px {
-    padding: 4px;
+  .tsystem-p_12px {
+    padding: 12px;
 }
 
   .tsystem-bd_\{borderWidths\.lg\}_solid_\{colors\.border\.layout\.strong\} {
@@ -482,10 +507,6 @@
     padding: 4px 8px;
 }
 
-  .tsystem-p_15px_15px_0_15px {
-    padding: 15px 15px 0 15px;
-}
-
   .tsystem-p_0_10px {
     padding: 0 10px;
 }
@@ -534,10 +555,18 @@
     padding: 0 6px 0 0;
 }
 
+  .tsystem-anim_spin {
+    animation: var(--Tight-animations-spin);
+}
+
   .tsystem-p_15px_0px {
     padding: 15px 0px;
 }
 
+  .tsystem-p_4px {
+    padding: 4px;
+}
+
   .tsystem-ring_none {
     outline: 2px solid transparent;
     outline-offset: 2px;
@@ -579,6 +608,38 @@
     gap: 15px;
 }
 
+  .tsystem-bd-t_\{borderWidths\.md\}_solid_\{colors\.border\.layout\.strong\} {
+    border-top: var(--Tight-borderWidths-md) solid var(--Tight-colors-border-layout-strong);
+}
+
+  .tsystem-bd-t_\{borderWidths\.md\}_solid {
+    border-top: var(--Tight-borderWidths-md) solid;
+}
+
+  .tsystem-bd-c_border\.layout\.strong {
+    border-color: var(--Tight-colors-border-layout-strong);
+}
+
+  .tsystem-bd-b_\{borderWidths\.md\}_solid {
+    border-bottom: var(--Tight-borderWidths-md) solid;
+}
+
+  .tsystem-bd-c_border\.layout\.weak {
+    border-color: var(--Tight-colors-border-layout-weak);
+}
+
+  .tsystem-gap_8px {
+    gap: 8px;
+}
+
+  .tsystem-bd-c_strong {
+    border-color: strong;
+}
+
+  .tsystem-gap_16px {
+    gap: 16px;
+}
+
   .tsystem-bdr_lg {
     border-radius: var(--Tight-radii-lg);
 }
@@ -595,6 +656,10 @@
     border-color: var(--Tight-colors-border-intent-danger);
 }
 
+  .tsystem-bd-c_border\.intent\.secondary {
+    border-color: var(--Tight-colors-border-intent-secondary);
+}
+
   .tsystem-flex_1_1_0 {
     flex: 1 1 0;
 }
@@ -611,6 +676,10 @@
     border-radius: 50%;
 }
 
+  .tsystem-gap_15 {
+    gap: 15px;
+}
+
   .tsystem-bd-w_1 {
     border-width: 1px;
 }
@@ -635,50 +704,42 @@
     flex: 1 1 0%;
 }
 
-  .tsystem-ov_scroll {
-    overflow: scroll;
-}
-
   .tsystem-flex-flow_column {
     flex-flow: column;
 }
 
-  .tsystem-gap_5 {
-    gap: 5px;
+  .tsystem-bdr_0 {
+    border-radius: 0;
 }
 
-  .tsystem-place-items_center {
-    place-items: center;
+  .tsystem-gap_2px {
+    gap: 2px;
 }
 
-  .tsystem-gap_16px {
-    gap: 16px;
+  .tsystem-gap_5 {
+    gap: 5px;
 }
 
-  .tsystem-gap_8px {
-    gap: 8px;
+  .tsystem-bd-w_0 {
+    border-width: 0;
 }
 
-  .tsystem-flex_1 {
-    flex: 1 1 0%;
+  .tsystem-trs_all_300ms_ease-out {
+    transition: all 300ms ease-out;
 }
 
-  .tsystem-gap_2px {
-    gap: 2px;
+  .tsystem-place-items_center {
+    place-items: center;
 }
 
-  .tsystem-bd-c_border\.intent\.secondary {
-    border-color: var(--Tight-colors-border-intent-secondary);
+  .tsystem-flex_1 {
+    flex: 1 1 0%;
 }
 
   .tsystem-bd-c_border\.intent\.success {
     border-color: var(--Tight-colors-border-intent-success);
 }
 
-  .tsystem-bd-c_border\.layout\.strong {
-    border-color: var(--Tight-colors-border-layout-strong);
-}
-
   .tsystem-bg-p_100\%_0 {
     background-position: 100% 0;
 }
@@ -691,6 +752,10 @@
     padding-block: 10px;
 }
 
+  .tsystem-gap_20 {
+    gap: 20px;
+}
+
   .tsystem-trs_height_0\.5s\,_width_0\.5s {
     transition: height 0.5s, width 0.5s;
 }
@@ -711,10 +776,6 @@
     border-top: hidden;
 }
 
-  .tsystem-bdr_0 {
-    border-radius: 0;
-}
-
   .tsystem-gap_9 {
     gap: 9px;
 }
@@ -879,22 +940,34 @@
     letter-spacing: 0.66px;
 }
 
-  .tsystem-jc_space-between {
-    justify-content: space-between;
+  .tsystem-flex-d_column {
+    flex-direction: column;
 }
 
-  .tsystem-as_stretch {
-    align-self: stretch;
+  .tsystem-pos_relative {
+    position: relative;
 }
 
-  .tsystem-flex-wrap_wrap {
-    flex-wrap: wrap;
+  .tsystem-pos_sticky {
+    position: sticky;
+}
+
+  .tsystem-flex-d_row {
+    flex-direction: row;
+}
+
+  .tsystem-jc_space-between {
+    justify-content: space-between;
 }
 
   .tsystem-bg-c_surface\.foreground {
     background-color: var(--Tight-colors-surface-foreground);
 }
 
+  .tsystem-bd-be-w_var\(--thickness\) {
+    border-block-end-width: var(--thickness);
+}
+
   .tsystem-jc_flex-end {
     justify-content: flex-end;
 }
@@ -903,24 +976,20 @@
     flex-shrink: 0;
 }
 
-  .tsystem-flex-d_column {
-    flex-direction: column;
-}
-
   .tsystem-ai_flex-start {
     align-items: flex-start;
 }
 
-  .tsystem-bg-c_surface\.intent\.secondary {
-    background-color: var(--Tight-colors-surface-intent-secondary);
+  .tsystem-as_stretch {
+    align-self: stretch;
 }
 
-  .tsystem-flex-d_row {
-    flex-direction: row;
+  .tsystem-flex-wrap_wrap {
+    flex-wrap: wrap;
 }
 
-  .tsystem-pos_relative {
-    position: relative;
+  .tsystem-bg-c_surface\.intent\.secondary {
+    background-color: var(--Tight-colors-surface-intent-secondary);
 }
 
   .tsystem-flex-d_row-reverse {
@@ -959,6 +1028,30 @@
     scrollbar-width: thin;
 }
 
+  .tsystem-d_grid {
+    display: grid;
+}
+
+  .tsystem-grid-tc_3fr_1fr {
+    grid-template-columns: 3fr 1fr;
+}
+
+  .tsystem-bg-c_transparent {
+    background-color: var(--Tight-colors-transparent);
+}
+
+  .tsystem-ai_start {
+    align-items: start;
+}
+
+  .tsystem-jc_end {
+    justify-content: end;
+}
+
+  .tsystem-ai_stretch {
+    align-items: stretch;
+}
+
   .tsystem-bg-c_border\.layout {
     background-color: var(--Tight-colors-border-layout);
 }
@@ -967,18 +1060,30 @@
     text-align: center;
 }
 
-  .tsystem-pos_fixed {
-    position: fixed;
+  .tsystem-white-space_normal {
+    white-space: normal;
 }
 
-  .tsystem-d_grid {
-    display: grid;
+  .tsystem-ov-wrap_break-word {
+    overflow-wrap: break-word;
+}
+
+  .tsystem-pos_fixed {
+    position: fixed;
 }
 
   .tsystem-bg-c_overlay {
     background-color: var(--Tight-colors-overlay);
 }
 
+  .tsystem-white-space_wrap {
+    white-space: wrap;
+}
+
+  .tsystem-tov_wrap {
+    text-overflow: wrap;
+}
+
   .tsystem-pos_absolute {
     position: absolute;
 }
@@ -987,6 +1092,10 @@
     background-color: var(--Tight-colors-surface-background);
 }
 
+  .tsystem-flex-g_1 {
+    flex-grow: 1;
+}
+
   .tsystem-stk_currentColor {
     stroke: var(--Tight-colors-currentColor);
 }
@@ -1067,10 +1176,6 @@
     fill: var(--Tight-colors-transparent);
 }
 
-  .tsystem-bg-c_transparent {
-    background-color: var(--Tight-colors-transparent);
-}
-
   .tsystem-d_inline-flex {
     display: inline-flex;
 }
@@ -1095,6 +1200,10 @@
     box-shadow: 0 0 0 0 transparent;
 }
 
+  .tsystem-c_icon\.base {
+    color: var(--Tight-colors-icon-base);
+}
+
   .tsystem-c_typography\.intent\.success {
     color: var(--Tight-colors-typography-intent-success);
 }
@@ -1135,8 +1244,8 @@
     background-color: yellow;
 }
 
-  .tsystem-ov-wrap_break-word {
-    overflow-wrap: break-word;
+  .tsystem-bg-c_border\.layout\.strong {
+    background-color: var(--Tight-colors-border-layout-strong);
 }
 
   .tsystem-bg-c_surface\.elevated {
@@ -1155,10 +1264,6 @@
     box-shadow: var(--Tight-shadows-box-shadow);
 }
 
-  .tsystem-flex-g_1 {
-    flex-grow: 1;
-}
-
   .tsystem-op_0\.6 {
     opacity: 0.6;
 }
@@ -1167,18 +1272,10 @@
     cursor: not-allowed;
 }
 
-  .tsystem-jc_end {
-    justify-content: end;
-}
-
   .tsystem-jc_start {
     justify-content: start;
 }
 
-  .tsystem-ai_start {
-    align-items: start;
-}
-
   .tsystem-bdr-b_lg {
     border-bottom-left-radius: var(--Tight-radii-lg);
     border-bottom-right-radius: var(--Tight-radii-lg);
@@ -1193,10 +1290,6 @@
     border-top-right-radius: var(--Tight-radii-lg);
 }
 
-  .tsystem-grid-tc_repeat\(1\,_400px\) {
-    grid-template-columns: repeat(1, 400px);
-}
-
   .tsystem-c_icon\.intent\.primary {
     color: var(--Tight-colors-icon-intent-primary);
 }
@@ -1205,48 +1298,52 @@
     pointer-events: all;
 }
 
-  .tsystem-lh_16px {
-    line-height: 16px;
+  .tsystem-fw_lg {
+    font-weight: var(--Tight-fontWeights-lg);
 }
 
-  .tsystem-fs_lg {
-    font-size: var(--Tight-fontSizes-lg);
+  .tsystem-ls_0\.84px {
+    letter-spacing: 0.84px;
 }
 
-  .tsystem-lh_25px {
-    line-height: 25px;
+  .tsystem-lh_16px {
+    line-height: 16px;
 }
 
-  .tsystem-ls_2px {
-    letter-spacing: 2px;
+  .tsystem-ff_label {
+    font-family: var(--Tight-fonts-label);
 }
 
   .tsystem-fw_label {
     font-weight: var(--Tight-fontWeights-label);
 }
 
-  .tsystem-fs_label {
-    font-size: var(--Tight-fontSizes-label);
-}
-
-  .tsystem-ff_label {
-    font-family: var(--Tight-fonts-label);
+  .tsystem-fs_lg {
+    font-size: var(--Tight-fontSizes-lg);
 }
 
-  .tsystem-ls_0\.84px {
-    letter-spacing: 0.84px;
+  .tsystem-lh_18px {
+    line-height: 18px;
 }
 
   .tsystem-c_typography\.label {
     color: var(--Tight-colors-typography-label);
 }
 
-  .tsystem-white-space_normal {
-    white-space: normal;
+  .tsystem-fw_label\.sub {
+    font-weight: var(--Tight-fontWeights-label-sub);
 }
 
-  .tsystem-fw_lg {
-    font-weight: var(--Tight-fontWeights-lg);
+  .tsystem-c_typography\.label\.sub {
+    color: var(--Tight-colors-typography-label-sub);
+}
+
+  .tsystem-c_typography\.accent\.danger {
+    color: var(--Tight-colors-typography-accent-danger);
+}
+
+  .tsystem-c_typography\.accent\.action {
+    color: var(--Tight-colors-typography-accent-action);
 }
 
   .tsystem-c_typography\.base\.weak {
@@ -1277,38 +1374,14 @@
     font-weight: var(--Tight-fontWeights-body);
 }
 
-  .tsystem-fs_body {
-    font-size: var(--Tight-fontSizes-body);
-}
-
   .tsystem-ff_body {
     font-family: var(--Tight-fonts-body);
 }
 
-  .tsystem-fw_label\.sub {
-    font-weight: var(--Tight-fontWeights-label-sub);
-}
-
-  .tsystem-fs_label\.sub {
-    font-size: var(--Tight-fontSizes-label-sub);
-}
-
-  .tsystem-c_typography\.label\.sub {
-    color: var(--Tight-colors-typography-label-sub);
-}
-
-  .tsystem-lh_14px {
-    line-height: 14px;
-}
-
   .tsystem-fw_label\.strong {
     font-weight: var(--Tight-fontWeights-label-strong);
 }
 
-  .tsystem-fs_label\.strong {
-    font-size: var(--Tight-fontSizes-label-strong);
-}
-
   .tsystem-c_typography\.label\.strong {
     color: var(--Tight-colors-typography-label-strong);
 }
@@ -1317,15 +1390,19 @@
     font-weight: var(--Tight-fontWeights-label-strongSub);
 }
 
-  .tsystem-fs_label\.strongSub {
-    font-size: var(--Tight-fontSizes-label-strongSub);
-}
-
   .tsystem-c_typography\.label\.strongSub {
     color: var(--Tight-colors-typography-label-strongSub);
 }
 
-  .tsystem-fw_heading {
+  .tsystem-fw_label\.emphasisSub {
+    font-weight: var(--Tight-fontWeights-label-emphasisSub);
+}
+
+  .tsystem-c_typography\.label\.emphasisSub {
+    color: var(--Tight-colors-typography-label-emphasisSub);
+}
+
+  .tsystem-fw_heading {
     font-weight: var(--Tight-fontWeights-heading);
 }
 
@@ -1341,6 +1418,14 @@
     color: var(--Tight-colors-typography-heading);
 }
 
+  .tsystem-lh_25px {
+    line-height: 25px;
+}
+
+  .tsystem-ls_2px {
+    letter-spacing: 2px;
+}
+
   .tsystem-fw_metric\.sm {
     font-weight: var(--Tight-fontWeights-metric-sm);
 }
@@ -1439,12 +1524,8 @@
     stroke: var(--Tight-colors-icon-base-weak);
 }
 
-  .tsystem-bg-c_border\.layout\.strong {
-    background-color: var(--Tight-colors-border-layout-strong);
-}
-
-  .tsystem-c_typography\.accent\.danger {
-    color: var(--Tight-colors-typography-accent-danger);
+  .tsystem-lh_14px {
+    line-height: 14px;
 }
 
   .tsystem-c_icon\.accent\.danger {
@@ -1455,6 +1536,16 @@
     background-color: var(--Tight-colors-brand-secondary);
 }
 
+  .tsystem-bdr-r_0 {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+}
+
+  .tsystem-bdr-l_0 {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+}
+
   .tsystem-grid-tc_repeat\(7\,_1fr\) {
     grid-template-columns: repeat(7, 1fr);
 }
@@ -1516,6 +1607,10 @@
     -webkit-appearance: none;
 }
 
+  .tsystem-fs_16px {
+    font-size: 16px;
+}
+
   .tsystem-d_block {
     display: block;
 }
@@ -1528,10 +1623,6 @@
     text-align: start;
 }
 
-  .tsystem-bd-be-w_var\(--thickness\) {
-    border-block-end-width: var(--thickness);
-}
-
   .tsystem-bg-c_money\.positive\.weak {
     background-color: var(--Tight-colors-money-positive-weak);
 }
@@ -1576,22 +1667,54 @@
     color: var(--Tight-colors-inherit);
 }
 
-  .tsystem-min-w_300px {
-    min-width: 300px;
+  .tsystem-mt_15px {
+    margin-top: 15px;
 }
 
-  .tsystem-w_202px {
-    width: 202px;
+  .tsystem-ov-y_auto {
+    overflow-y: auto;
 }
 
-  .tsystem-min-w_200px {
-    min-width: 200px;
+  .tsystem-pt_20px {
+    padding-top: 20px;
+}
+
+  .tsystem-pb_20px {
+    padding-bottom: 20px;
+}
+
+  .tsystem-bottom_0 {
+    bottom: 0;
+}
+
+  .tsystem-pb_14px {
+    padding-bottom: 14px;
+}
+
+  .tsystem-pl_15px {
+    padding-left: 15px;
+}
+
+  .tsystem-pr_15px {
+    padding-right: 15px;
 }
 
   .tsystem-w_100\% {
     width: 100%;
 }
 
+  .tsystem-w_202px {
+    width: 202px;
+}
+
+  .tsystem-min-w_300px {
+    min-width: 300px;
+}
+
+  .tsystem-min-w_200px {
+    min-width: 200px;
+}
+
   .tsystem-h_72 {
     height: 72px;
 }
@@ -1632,14 +1755,6 @@
     height: auto;
 }
 
-  .tsystem-max-h_100\% {
-    max-height: 100%;
-}
-
-  .tsystem-w_512px {
-    width: 512px;
-}
-
   .tsystem-mb_18px {
     margin-bottom: 18px;
 }
@@ -1664,6 +1779,38 @@
     min-height: 1px;
 }
 
+  .tsystem-w_lg {
+    width: lg;
+}
+
+  .tsystem-h_lg {
+    height: lg;
+}
+
+  .tsystem-w_md {
+    width: md;
+}
+
+  .tsystem-h_xl {
+    height: xl;
+}
+
+  .tsystem-pl_16 {
+    padding-left: 16px;
+}
+
+  .tsystem-pr_16 {
+    padding-right: 16px;
+}
+
+  .tsystem-border-bottom-style_solid {
+    border-bottom-style: solid;
+}
+
+  .tsystem-max-h_0 {
+    max-height: 0;
+}
+
   .tsystem-min-h_\{borderWidths\.lg\} {
     min-height: var(--Tight-borderWidths-lg);
 }
@@ -1700,14 +1847,30 @@
     top: 0;
 }
 
-  .tsystem-min-w_fit-content {
-    min-width: fit-content;
-}
-
   .tsystem-left_0 {
     left: 0;
 }
 
+  .tsystem-max-h_100\% {
+    max-height: 100%;
+}
+
+  .tsystem-min-w_100\% {
+    min-width: 100%;
+}
+
+  .tsystem-w_0 {
+    width: 0;
+}
+
+  .tsystem-h_0 {
+    height: 0;
+}
+
+  .tsystem-max-w_0 {
+    max-width: 0;
+}
+
   .tsystem-w_100dvw {
     width: 100dvw;
 }
@@ -1748,10 +1911,6 @@
     height: 15px;
 }
 
-  .tsystem-min-w_100\% {
-    min-width: 100%;
-}
-
   .tsystem-w_\{borderWidths\.md\} {
     width: var(--Tight-borderWidths-md);
 }
@@ -1768,12 +1927,56 @@
     min-height: var(--Tight-borderWidths-md);
 }
 
+  .tsystem-w_30px {
+    width: 30px;
+}
+
+  .tsystem-w_60px {
+    width: 60px;
+}
+
+  .tsystem-w_120px {
+    width: 120px;
+}
+
+  .tsystem-w_240px {
+    width: 240px;
+}
+
+  .tsystem-w_420px {
+    width: 420px;
+}
+
+  .tsystem-h_5px {
+    height: 5px;
+}
+
+  .tsystem-h_10px {
+    height: 10px;
+}
+
+  .tsystem-h_40px {
+    height: 40px;
+}
+
+  .tsystem-h_80px {
+    height: 80px;
+}
+
   .tsystem-w_max-content {
     width: max-content;
 }
 
-  .tsystem-h_35px {
-    height: 35px;
+  .tsystem-h_50px {
+    height: 50px;
+}
+
+  .tsystem-min-w_fit-content {
+    min-width: fit-content;
+}
+
+  .tsystem-h_85px {
+    height: 85px;
 }
 
   .tsystem-h_60px {
@@ -1848,22 +2051,10 @@
     min-height: 65px;
 }
 
-  .tsystem-mb_16px {
-    margin-bottom: 16px;
-}
-
-  .tsystem-bottom_0 {
-    bottom: 0;
-}
-
   .tsystem-h_250px {
     height: 250px;
 }
 
-  .tsystem-pb_20px {
-    padding-bottom: 20px;
-}
-
   .tsystem-bottom_-25px {
     bottom: -25px;
 }
@@ -1888,14 +2079,6 @@
     height: 80px;
 }
 
-  .tsystem-pl_15px {
-    padding-left: 15px;
-}
-
-  .tsystem-pr_15px {
-    padding-right: 15px;
-}
-
   .tsystem-pl_20px {
     padding-left: 20px;
 }
@@ -1920,6 +2103,10 @@
     height: 10px;
 }
 
+  .tsystem-h_35px {
+    height: 35px;
+}
+
   .tsystem-w_17px {
     width: 17px;
 }
@@ -1964,6 +2151,10 @@
     margin-right: 15px;
 }
 
+  .tsystem-w_512px {
+    width: 512px;
+}
+
   .tsystem-max-w_1 {
     max-width: 1px;
 }
@@ -1988,10 +2179,6 @@
     height: 16px;
 }
 
-  .tsystem-h_50px {
-    height: 50px;
-}
-
   .tsystem-h_52px {
     height: 52px;
 }
@@ -2008,6 +2195,10 @@
     width: 100px;
 }
 
+  .tsystem-w_75px {
+    width: 75px;
+}
+
   .tsystem-h_55px {
     height: 55px;
 }
@@ -2016,10 +2207,6 @@
     min-height: 55px;
 }
 
-  .tsystem-h_1px {
-    height: 1px;
-}
-
   .tsystem-mb_30px {
     margin-bottom: 30px;
 }
@@ -2036,10 +2223,6 @@
     max-height: 200px;
 }
 
-  .tsystem-ov-y_auto {
-    overflow-y: auto;
-}
-
   .tsystem-min-w_120px {
     min-width: 120px;
 }
@@ -2080,12 +2263,12 @@
     padding-right: 10px;
 }
 
-  .tsystem-pt_0 {
-    padding-top: 0;
+  .tsystem-pt_4px {
+    padding-top: 4px;
 }
 
-  .tsystem-pb_8px {
-    padding-bottom: 8px;
+  .tsystem-pb_4px {
+    padding-bottom: 4px;
 }
 
   .tsystem-pl_25px {
@@ -2168,6 +2351,10 @@
     padding-top: 10px;
 }
 
+  .tsystem-pb_8px {
+    padding-bottom: 8px;
+}
+
   .tsystem-max-w_fit-content {
     max-width: fit-content;
 }
@@ -2184,6 +2371,10 @@
     width: 1px;
 }
 
+  .tsystem-h_1px {
+    height: 1px;
+}
+
   .tsystem-ml_auto {
     margin-left: auto;
 }
@@ -2200,10 +2391,22 @@
     transition: stroke 300ms ease-out;
 }
 
+  .\[\&\[data-open\=\'true\'\]\]\:tsystem-bd-w_lg[data-open='true'] {
+    border-width: var(--Tight-borderWidths-lg);
+}
+
+  .\[\&\[data-open\=\'true\'\]\]\:tsystem-ov_scroll[data-open='true'] {
+    overflow: scroll;
+}
+
   .\[\&_\.Tight-text\:\:after\]\:tsystem-trs_width_100ms_ease-out .Tight-text::after {
     transition: width 100ms ease-out;
 }
 
+  .\[\&\[data-state\=\'open\'\]_\>_\.Tight-text\:\:after\]\:tsystem-trs_width_300ms_ease-out[data-state='open'] > .Tight-text::after {
+    transition: width 300ms ease-out;
+}
+
   .\[\&\[data-haserror\=\'true\'\]\]\:tsystem-bd-c_border\.intent\.danger[data-haserror='true'] {
     border-color: var(--Tight-colors-border-intent-danger);
 }
@@ -2397,14 +2600,6 @@
     background-color: var(--Tight-colors-surface-intent-action-discrete-hover);
 }
 
-  .\[\&_\>_\.Tight-text\]\:tsystem-c_typography\.intent\.action > .Tight-text {
-    color: var(--Tight-colors-typography-intent-action);
-}
-
-  .\[\&_\>_\.Tight-text\]\:tsystem-c_typography\.intent\.action\.active > .Tight-text {
-    color: var(--Tight-colors-typography-intent-action-active);
-}
-
   .\[\&\[data-active\=\'true\'\]\]\:tsystem-bg-c_surface\.intent\.action\.discrete\.active[data-active='true'] {
     background-color: var(--Tight-colors-surface-intent-action-discrete-active);
 }
@@ -2417,6 +2612,18 @@
     color: var(--Tight-colors-inherit);
 }
 
+  .\[\&\[data-open\=\'true\'\]\]\:tsystem-max-h_1\/3[data-open='true'] {
+    max-height: 33.333333%;
+}
+
+  .\[\&\[data-open\=\'true\'\]\]\:tsystem-pt_16[data-open='true'] {
+    padding-top: 16px;
+}
+
+  .\[\&\[data-open\=\'true\'\]\]\:tsystem-pb_16[data-open='true'] {
+    padding-bottom: 16px;
+}
+
   .\[\&\:\:before\]\:tsystem-top_-11px::before {
     top: -11px;
 }
@@ -2449,6 +2656,10 @@
     height: 1px;
 }
 
+  .\[\&\[data-state\=\'open\'\]_\>_\.Tight-text\:\:after\]\:tsystem-w_100\%[data-state='open'] > .Tight-text::after {
+    width: 100%;
+}
+
   .\[\&\:\:before\]\:tsystem-top_-10px::before {
     top: -10px;
 }
@@ -2518,14 +2729,6 @@
     cursor: text;
 }
 
-  .\[\&\[data-state\=\'closed\'\]\[data-disablehover\=\'false\'\]\:hover\,_\&\:not\(\[data-state\]\)\[data-disablehover\=\'false\'\]\:hover\:not\(\:focus-within\)\]\:tsystem-bg-c_surface\.intent\.action\.discrete\.hover[data-state='closed'][data-disablehover='false']:hover,.\[\&\[data-state\=\'closed\'\]\[data-disablehover\=\'false\'\]\:hover\,_\&\:not\(\[data-state\]\)\[data-disablehover\=\'false\'\]\:hover\:not\(\:focus-within\)\]\:tsystem-bg-c_surface\.intent\.action\.discrete\.hover:not([data-state])[data-disablehover='false']:hover:not(:focus-within) {
-    background-color: var(--Tight-colors-surface-intent-action-discrete-hover);
-}
-
-  .\[\&\:hover\:not\(\:focus-within\)\]\:tsystem-c_typography\.intent\.action\.hover:hover:not(:focus-within) {
-    color: var(--Tight-colors-typography-intent-action-hover);
-}
-
   .\[\&\[data-clicked\=\'true\'\]\:focus-within\]\:tsystem-ring-o_2px[data-clicked='true']:focus-within {
     outline-offset: 2px;
 }
@@ -2534,23 +2737,23 @@
     outline-color: var(--Tight-colors-border-layout-strong);
 }
 
-  .\[\&\:hover\,_\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:tsystem-bg_surface\.intent\.secondary\.hover:hover,.\[\&\:hover\,_\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:tsystem-bg_surface\.intent\.secondary\.hover:focus-visible,.\[\&\:hover\,_\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:tsystem-bg_surface\.intent\.secondary\.hover[data-state='open'] {
+  .\[\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:tsystem-bg_surface\.intent\.secondary\.hover:focus-visible,.\[\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:tsystem-bg_surface\.intent\.secondary\.hover[data-state='open'] {
     background: var(--Tight-colors-surface-intent-secondary-hover);
 }
 
-  .\[\&\:hover\,_\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:tsystem-bg_surface\.intent\.action\.hover:hover,.\[\&\:hover\,_\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:tsystem-bg_surface\.intent\.action\.hover:focus-visible,.\[\&\:hover\,_\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:tsystem-bg_surface\.intent\.action\.hover[data-state='open'] {
+  .\[\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:tsystem-bg_surface\.intent\.action\.hover:focus-visible,.\[\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:tsystem-bg_surface\.intent\.action\.hover[data-state='open'] {
     background: var(--Tight-colors-surface-intent-action-hover);
 }
 
-  .\[\&\:hover\,_\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:tsystem-bg_surface\.intent\.success\.hover:hover,.\[\&\:hover\,_\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:tsystem-bg_surface\.intent\.success\.hover:focus-visible,.\[\&\:hover\,_\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:tsystem-bg_surface\.intent\.success\.hover[data-state='open'] {
+  .\[\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:tsystem-bg_surface\.intent\.success\.hover:focus-visible,.\[\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:tsystem-bg_surface\.intent\.success\.hover[data-state='open'] {
     background: var(--Tight-colors-surface-intent-success-hover);
 }
 
-  .\[\&\:hover\,_\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:tsystem-bg_surface\.intent\.warning\.hover:hover,.\[\&\:hover\,_\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:tsystem-bg_surface\.intent\.warning\.hover:focus-visible,.\[\&\:hover\,_\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:tsystem-bg_surface\.intent\.warning\.hover[data-state='open'] {
+  .\[\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:tsystem-bg_surface\.intent\.warning\.hover:focus-visible,.\[\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:tsystem-bg_surface\.intent\.warning\.hover[data-state='open'] {
     background: var(--Tight-colors-surface-intent-warning-hover);
 }
 
-  .\[\&\:hover\,_\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:tsystem-bg_surface\.intent\.danger\.hover:hover,.\[\&\:hover\,_\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:tsystem-bg_surface\.intent\.danger\.hover:focus-visible,.\[\&\:hover\,_\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:tsystem-bg_surface\.intent\.danger\.hover[data-state='open'] {
+  .\[\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:tsystem-bg_surface\.intent\.danger\.hover:focus-visible,.\[\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:tsystem-bg_surface\.intent\.danger\.hover[data-state='open'] {
     background: var(--Tight-colors-surface-intent-danger-hover);
 }
 
@@ -2568,23 +2771,23 @@
     outline-offset: 2px;
 }
 
-  .\[\&\:hover\,_\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:tsystem-bd-c_border\.intent\.secondary\.hover:hover,.\[\&\:hover\,_\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:tsystem-bd-c_border\.intent\.secondary\.hover:focus-visible,.\[\&\:hover\,_\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:tsystem-bd-c_border\.intent\.secondary\.hover[data-state='open'] {
+  .\[\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:tsystem-bd-c_border\.intent\.secondary\.hover:focus-visible,.\[\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:tsystem-bd-c_border\.intent\.secondary\.hover[data-state='open'] {
     border-color: var(--Tight-colors-border-intent-secondary-hover);
 }
 
-  .\[\&\:hover\,_\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:tsystem-bd-c_border\.intent\.action\.hover:hover,.\[\&\:hover\,_\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:tsystem-bd-c_border\.intent\.action\.hover:focus-visible,.\[\&\:hover\,_\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:tsystem-bd-c_border\.intent\.action\.hover[data-state='open'] {
+  .\[\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:tsystem-bd-c_border\.intent\.action\.hover:focus-visible,.\[\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:tsystem-bd-c_border\.intent\.action\.hover[data-state='open'] {
     border-color: var(--Tight-colors-border-intent-action-hover);
 }
 
-  .\[\&\:hover\,_\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:tsystem-bd-c_border\.intent\.success\.hover:hover,.\[\&\:hover\,_\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:tsystem-bd-c_border\.intent\.success\.hover:focus-visible,.\[\&\:hover\,_\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:tsystem-bd-c_border\.intent\.success\.hover[data-state='open'] {
+  .\[\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:tsystem-bd-c_border\.intent\.success\.hover:focus-visible,.\[\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:tsystem-bd-c_border\.intent\.success\.hover[data-state='open'] {
     border-color: var(--Tight-colors-border-intent-success-hover);
 }
 
-  .\[\&\:hover\,_\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:tsystem-bd-c_border\.intent\.warning\.hover:hover,.\[\&\:hover\,_\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:tsystem-bd-c_border\.intent\.warning\.hover:focus-visible,.\[\&\:hover\,_\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:tsystem-bd-c_border\.intent\.warning\.hover[data-state='open'] {
+  .\[\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:tsystem-bd-c_border\.intent\.warning\.hover:focus-visible,.\[\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:tsystem-bd-c_border\.intent\.warning\.hover[data-state='open'] {
     border-color: var(--Tight-colors-border-intent-warning-hover);
 }
 
-  .\[\&\:hover\,_\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:tsystem-bd-c_border\.intent\.danger\.hover:hover,.\[\&\:hover\,_\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:tsystem-bd-c_border\.intent\.danger\.hover:focus-visible,.\[\&\:hover\,_\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:tsystem-bd-c_border\.intent\.danger\.hover[data-state='open'] {
+  .\[\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:tsystem-bd-c_border\.intent\.danger\.hover:focus-visible,.\[\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:tsystem-bd-c_border\.intent\.danger\.hover[data-state='open'] {
     border-color: var(--Tight-colors-border-intent-danger-hover);
 }
 
@@ -2604,11 +2807,15 @@
     outline: 4px solid;
 }
 
-  .\[\&\:has\(\>_\.Tight-component\:focus-visible\)\]\:tsystem-ring_4px_solid:has(> .Tight-component:focus-visible) {
+  .focusVisible\:tsystem-ring_4px_solid:is(:focus-visible, [data-focus-visible]) {
     outline: 4px solid;
 }
 
-  .\[\&\:focus-visible\]\:tsystem-bdr_sm:focus-visible {
+  .\[\&\:has\(button\:focus-visible\)\]\:tsystem-ring_4px_solid:has(button:focus-visible) {
+    outline: 4px solid;
+}
+
+  .focusVisible\:tsystem-bdr_sm:is(:focus-visible, [data-focus-visible]) {
     border-radius: var(--Tight-radii-sm);
 }
 
@@ -2652,11 +2859,15 @@
     z-index: 1;
 }
 
-  .\[\&\:focus-visible_\>_\.Tight-text\]\:tsystem-c_typography\.intent\.action\.active:focus-visible > .Tight-text {
-    color: var(--Tight-colors-typography-intent-action-active);
+  .focusVisible\:tsystem-ring-o_-2px:is(:focus-visible, [data-focus-visible]) {
+    outline-offset: -2px;
 }
 
-  .\[\&\:has\(\>_\.Tight-component\:focus-visible\)\]\:tsystem-ring-c_border\.layout:has(> .Tight-component:focus-visible) {
+  .focusVisible\:tsystem-ring-c_border\.layout:is(:focus-visible, [data-focus-visible]) {
+    outline-color: var(--Tight-colors-border-layout);
+}
+
+  .\[\&\:has\(button\:focus-visible\)\]\:tsystem-ring-c_border\.layout:has(button:focus-visible) {
     outline-color: var(--Tight-colors-border-layout);
 }
 
@@ -2684,291 +2895,513 @@
     bottom: 0;
 }
 
-  .\[\&\:hover\]\:tsystem-bd_\{borderWidths\.lg\}_solid:hover,.\[\&\:hover\:not\(\:disabled\)\]\:tsystem-bd_\{borderWidths\.lg\}_solid:hover:not(:disabled) {
-    border: var(--Tight-borderWidths-lg) solid;
+  .\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:tsystem-bd-c_border\.intent\.action\.active:active:enabled,.\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:tsystem-bd-c_border\.intent\.action\.active[data-active='true']:enabled {
+    border-color: var(--Tight-colors-border-intent-action-active);
 }
 
-  .\[\&\:hover\:not\(\:disabled\)\]\:tsystem-bd-c_border\.layout:hover:not(:disabled) {
-    border-color: var(--Tight-colors-border-layout);
+  .\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:tsystem-bd-c_border\.intent\.danger\.active:active:enabled,.\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:tsystem-bd-c_border\.intent\.danger\.active[data-active='true']:enabled {
+    border-color: var(--Tight-colors-border-intent-danger-active);
 }
 
-  .\[\&\:hover\]\:tsystem-trs_background_100ms_ease-out\,_background-color_100ms_ease-out\,_border-color_100ms_ease-out\,_box-shadow_0ms:hover {
-    transition: background 100ms ease-out, background-color 100ms ease-out, border-color 100ms ease-out, box-shadow 0ms;
+  .\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:tsystem-bd-c_transparent:active:enabled,.\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:tsystem-bd-c_transparent[data-active='true']:enabled {
+    border-color: var(--Tight-colors-transparent);
 }
 
-  .\[\&\:hover\]\:tsystem-trs_background_100ms_ease-out\,_box-shadow_0ms:hover {
-    transition: background 100ms ease-out, box-shadow 0ms;
+  .\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:tsystem-bd-c_border\.intent\.primary\.active:active:enabled,.\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:tsystem-bd-c_border\.intent\.primary\.active[data-active='true']:enabled {
+    border-color: var(--Tight-colors-border-intent-primary-active);
 }
 
-  .\[\&\:hover\]\:tsystem-trs_color_100ms_ease-out:hover,.\[\&\:hover_\>_\.Tight-text\]\:tsystem-trs_color_100ms_ease-out:hover > .Tight-text {
-    transition: color 100ms ease-out;
+  .\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:tsystem-bd-c_border\.intent\.success\.active:active:enabled,.\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:tsystem-bd-c_border\.intent\.success\.active[data-active='true']:enabled {
+    border-color: var(--Tight-colors-border-intent-success-active);
 }
 
-  .\[\&\:hover_path\]\:tsystem-trs_stroke_100ms_ease-out:hover path {
-    transition: stroke 100ms ease-out;
+  .\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:tsystem-bd-c_border\.intent\.warning\.active:active:enabled,.\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:tsystem-bd-c_border\.intent\.warning\.active[data-active='true']:enabled {
+    border-color: var(--Tight-colors-border-intent-warning-active);
 }
 
-  .\[\&\:hover\:not\(\:disabled\)\]\:tsystem-bd-c_border\.intent\.action\.hover:hover:not(:disabled) {
-    border-color: var(--Tight-colors-border-intent-action-hover);
+  .\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:tsystem-bg-c_surface\.intent\.action\.discrete\.active:active:enabled,.\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:tsystem-bg-c_surface\.intent\.action\.discrete\.active[data-active='true']:enabled {
+    background-color: var(--Tight-colors-surface-intent-action-discrete-active);
 }
 
-  .\[\&\:hover\:not\(\:disabled\)\]\:tsystem-bd-c_border\.intent\.danger\.hover:hover:not(:disabled) {
-    border-color: var(--Tight-colors-border-intent-danger-hover);
+  .\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:tsystem-bg-c_surface\.intent\.action\.active:active:enabled,.\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:tsystem-bg-c_surface\.intent\.action\.active[data-active='true']:enabled {
+    background-color: var(--Tight-colors-surface-intent-action-active);
 }
 
-  .\[\&\:enabled\:hover\]\:tsystem-bd-c_border\.intent\.action\.hover:enabled:hover {
-    border-color: var(--Tight-colors-border-intent-action-hover);
+  .\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:tsystem-bg-c_surface\.intent\.danger\.active:active:enabled,.\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:tsystem-bg-c_surface\.intent\.danger\.active[data-active='true']:enabled {
+    background-color: var(--Tight-colors-surface-intent-danger-active);
 }
 
-  .\[\&\:hover\:not\(\:disabled\)\]\:tsystem-bd-c_border\.intent\.primary\.hover:hover:not(:disabled) {
-    border-color: var(--Tight-colors-border-intent-primary-hover);
+  .\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:tsystem-c_icon\.intent\.action\.active:active:enabled,.\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:tsystem-c_icon\.intent\.action\.active[data-active='true']:enabled {
+    color: var(--Tight-colors-icon-intent-action-active);
 }
 
-  .\[\&\:hover\:not\(\:disabled\)\]\:tsystem-bd-c_border\.intent\.success\.hover:hover:not(:disabled) {
-    border-color: var(--Tight-colors-border-intent-success-hover);
+  .\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:tsystem-fill_icon\.intent\.action\.active:active:enabled,.\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:tsystem-fill_icon\.intent\.action\.active[data-active='true']:enabled {
+    fill: var(--Tight-colors-icon-intent-action-active);
 }
 
-  .\[\&\:hover\:not\(\:disabled\)\]\:tsystem-bd-c_border\.intent\.warning\.hover:hover:not(:disabled) {
-    border-color: var(--Tight-colors-border-intent-warning-hover);
+  .\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:tsystem-bg-c_surface\.intent\.primary\.active:active:enabled,.\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:tsystem-bg-c_surface\.intent\.primary\.active[data-active='true']:enabled {
+    background-color: var(--Tight-colors-surface-intent-primary-active);
 }
 
-  .\[\&\:hover_\.Tight-text\:\:after\,_\&\[data-state\=\'open\'\]_\>_\.Tight-text\:\:after\]\:tsystem-trs_width_300ms_ease-out:hover .Tight-text::after,.\[\&\:hover_\.Tight-text\:\:after\,_\&\[data-state\=\'open\'\]_\>_\.Tight-text\:\:after\]\:tsystem-trs_width_300ms_ease-out[data-state='open'] > .Tight-text::after {
-    transition: width 300ms ease-out;
+  .\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:tsystem-bg-c_surface\.intent\.success\.active:active:enabled,.\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:tsystem-bg-c_surface\.intent\.success\.active[data-active='true']:enabled {
+    background-color: var(--Tight-colors-surface-intent-success-active);
 }
 
-  .\[\&\:hover\]\:tsystem-bd-c_border\.intent\.action\.hover:hover {
-    border-color: var(--Tight-colors-border-intent-action-hover);
+  .\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:tsystem-bg-c_surface\.intent\.warning\.active:active:enabled,.\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:tsystem-bg-c_surface\.intent\.warning\.active[data-active='true']:enabled {
+    background-color: var(--Tight-colors-surface-intent-warning-active);
 }
 
-  .\[\&\:hover\:not\(\:disabled\)\]\:tsystem-bg-c_surface\.intent\.action\.discrete\.hover:hover:not(:disabled) {
-    background-color: var(--Tight-colors-surface-intent-action-discrete-hover);
+  .\[\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:\[\&_\.Tight-sub-label\]\:tsystem-c_typography\.intent\.secondary\.hover:focus-visible .Tight-sub-label,.\[\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:\[\&_\.Tight-sub-label\]\:tsystem-c_typography\.intent\.secondary\.hover[data-state='open'] .Tight-sub-label {
+    color: var(--Tight-colors-typography-intent-secondary-hover);
 }
 
-  .\[\&\:hover\:not\(\:disabled\)\]\:tsystem-bg-c_surface\.intent\.action\.hover:hover:not(:disabled) {
-    background-color: var(--Tight-colors-surface-intent-action-hover);
+  .\[\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:\[\&_\.Tight-medium-icon_\>_path\]\:tsystem-stk_icon\.intent\.secondary\.hover:focus-visible .Tight-medium-icon > path,.\[\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:\[\&_\.Tight-medium-icon_\>_path\]\:tsystem-stk_icon\.intent\.secondary\.hover[data-state='open'] .Tight-medium-icon > path {
+    stroke: var(--Tight-colors-icon-intent-secondary-hover);
 }
 
-  .\[\&\:hover\:not\(\:disabled\)\]\:tsystem-bg-c_surface\.intent\.danger\.hover:hover:not(:disabled) {
-    background-color: var(--Tight-colors-surface-intent-danger-hover);
+  .\[\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:\[\&_\.Tight-sub-label\]\:tsystem-c_typography\.intent\.action\.hover:focus-visible .Tight-sub-label,.\[\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:\[\&_\.Tight-sub-label\]\:tsystem-c_typography\.intent\.action\.hover[data-state='open'] .Tight-sub-label {
+    color: var(--Tight-colors-typography-intent-action-hover);
 }
 
-  .\[\&\:enabled\:hover\]\:tsystem-bg-c_surface\.intent\.action\.discrete\.hover:enabled:hover {
-    background-color: var(--Tight-colors-surface-intent-action-discrete-hover);
+  .\[\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:\[\&_\.Tight-medium-icon_\>_path\]\:tsystem-stk_icon\.intent\.action\.hover:focus-visible .Tight-medium-icon > path,.\[\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:\[\&_\.Tight-medium-icon_\>_path\]\:tsystem-stk_icon\.intent\.action\.hover[data-state='open'] .Tight-medium-icon > path {
+    stroke: var(--Tight-colors-icon-intent-action-hover);
 }
 
-  .\[\&\:hover\:not\(\:disabled\)\]\:tsystem-bg-c_surface\.intent\.primary\.hover:hover:not(:disabled) {
-    background-color: var(--Tight-colors-surface-intent-primary-hover);
+  .\[\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:\[\&_\.Tight-sub-label\]\:tsystem-c_typography\.intent\.success\.hover:focus-visible .Tight-sub-label,.\[\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:\[\&_\.Tight-sub-label\]\:tsystem-c_typography\.intent\.success\.hover[data-state='open'] .Tight-sub-label {
+    color: var(--Tight-colors-typography-intent-success-hover);
 }
 
-  .\[\&\:hover\:not\(\:disabled\)\]\:tsystem-bg-c_surface\.intent\.success\.hover:hover:not(:disabled) {
-    background-color: var(--Tight-colors-surface-intent-success-hover);
+  .\[\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:\[\&_\.Tight-medium-icon_\>_path\]\:tsystem-stk_icon\.intent\.success\.hover:focus-visible .Tight-medium-icon > path,.\[\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:\[\&_\.Tight-medium-icon_\>_path\]\:tsystem-stk_icon\.intent\.success\.hover[data-state='open'] .Tight-medium-icon > path {
+    stroke: var(--Tight-colors-icon-intent-success-hover);
 }
 
-  .\[\&\:hover\:not\(\:disabled\)\]\:tsystem-bg-c_surface\.intent\.warning\.hover:hover:not(:disabled) {
-    background-color: var(--Tight-colors-surface-intent-warning-hover);
+  .\[\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:\[\&_\.Tight-sub-label\]\:tsystem-c_typography\.intent\.warning\.hover:focus-visible .Tight-sub-label,.\[\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:\[\&_\.Tight-sub-label\]\:tsystem-c_typography\.intent\.warning\.hover[data-state='open'] .Tight-sub-label {
+    color: var(--Tight-colors-typography-intent-warning-hover);
 }
 
-  .\[\&\:hover\]\:tsystem-bg-c_surface\.intent\.action\.hover:hover {
-    background-color: var(--Tight-colors-surface-intent-action-hover);
+  .\[\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:\[\&_\.Tight-medium-icon_\>_path\]\:tsystem-stk_icon\.intent\.warning\.hover:focus-visible .Tight-medium-icon > path,.\[\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:\[\&_\.Tight-medium-icon_\>_path\]\:tsystem-stk_icon\.intent\.warning\.hover[data-state='open'] .Tight-medium-icon > path {
+    stroke: var(--Tight-colors-icon-intent-warning-hover);
 }
 
-  .\[\&\[data-is-checked\=\'false\'\]\:hover\]\:tsystem-bg-c_surface\.background\.hover[data-is-checked='false']:hover {
-    background-color: var(--Tight-colors-surface-background-hover);
+  .\[\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:\[\&_\.Tight-sub-label\]\:tsystem-c_typography\.intent\.danger\.hover:focus-visible .Tight-sub-label,.\[\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:\[\&_\.Tight-sub-label\]\:tsystem-c_typography\.intent\.danger\.hover[data-state='open'] .Tight-sub-label {
+    color: var(--Tight-colors-typography-intent-danger-hover);
 }
 
-  .\[\&\:hover\]\:tsystem-bg-c_surface\.intent\.action\.discrete\.hover:hover {
-    background-color: var(--Tight-colors-surface-intent-action-discrete-hover);
+  .\[\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:\[\&_\.Tight-medium-icon_\>_path\]\:tsystem-stk_icon\.intent\.danger\.hover:focus-visible .Tight-medium-icon > path,.\[\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:\[\&_\.Tight-medium-icon_\>_path\]\:tsystem-stk_icon\.intent\.danger\.hover[data-state='open'] .Tight-medium-icon > path {
+    stroke: var(--Tight-colors-icon-intent-danger-hover);
 }
 
-  .\[\&\:hover_\>_\.Tight-text\]\:tsystem-c_typography\.intent\.action\.hover:hover > .Tight-text {
-    color: var(--Tight-colors-typography-intent-action-hover);
+  .\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:\[\&_\.Tight-text\]\:tsystem-c_typography\.intent\.secondary\.active:active:enabled .Tight-text,.\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:\[\&_\.Tight-text\]\:tsystem-c_typography\.intent\.secondary\.active[data-active='true']:enabled .Tight-text {
+    color: var(--Tight-colors-typography-intent-secondary-active);
 }
 
-  .\[\&\:hover\]\:tsystem-bg-c_brand\.primary:hover {
-    background-color: var(--Tight-colors-brand-primary);
+  .\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:\[\&_\.Tight-text\]\:tsystem-c_typography\.intent\.action\.active:active:enabled .Tight-text,.\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:\[\&_\.Tight-text\]\:tsystem-c_typography\.intent\.action\.active[data-active='true']:enabled .Tight-text {
+    color: var(--Tight-colors-typography-intent-action-active);
 }
 
-  .\[\&\:hover\]\:tsystem-c_typography\.contrast:hover {
-    color: var(--Tight-colors-typography-contrast);
+  .\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:\[\&_\.Tight-text\]\:tsystem-c_typography\.intent\.danger\.active:active:enabled .Tight-text,.\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:\[\&_\.Tight-text\]\:tsystem-c_typography\.intent\.danger\.active[data-active='true']:enabled .Tight-text {
+    color: var(--Tight-colors-typography-intent-danger-active);
 }
 
-  .\[\&\:hover\]\:tsystem-c_typography\.intent\.action\.hover:hover {
-    color: var(--Tight-colors-typography-intent-action-hover);
+  .\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:\[\&_\.Tight-text\]\:tsystem-c_typography\.intent\.primary\.active:active:enabled .Tight-text,.\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:\[\&_\.Tight-text\]\:tsystem-c_typography\.intent\.primary\.active[data-active='true']:enabled .Tight-text {
+    color: var(--Tight-colors-typography-intent-primary-active);
 }
 
-  .\[\&\:hover_\>_\.Tight-medium-icon_\>_path\]\:tsystem-stk_typography\.intent\.action\.hover:hover > .Tight-medium-icon > path {
-    stroke: var(--Tight-colors-typography-intent-action-hover);
+  .\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:\[\&_path\]\:tsystem-stk_icon\.intent\.primary\.active:active:enabled path,.\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:\[\&_path\]\:tsystem-stk_icon\.intent\.primary\.active[data-active='true']:enabled path {
+    stroke: var(--Tight-colors-icon-intent-primary-active);
 }
 
-  .\[\&\:hover_\.Tight-text\:\:after\,_\&\[data-state\=\'open\'\]_\>_\.Tight-text\:\:after\]\:tsystem-w_100\%:hover .Tight-text::after,.\[\&\:hover_\.Tight-text\:\:after\,_\&\[data-state\=\'open\'\]_\>_\.Tight-text\:\:after\]\:tsystem-w_100\%[data-state='open'] > .Tight-text::after {
-    width: 100%;
+  .\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:\[\&_\.Tight-text\]\:tsystem-c_typography\.intent\.success\.active:active:enabled .Tight-text,.\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:\[\&_\.Tight-text\]\:tsystem-c_typography\.intent\.success\.active[data-active='true']:enabled .Tight-text {
+    color: var(--Tight-colors-typography-intent-success-active);
 }
 
-  .\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:tsystem-bd-c_border\.intent\.action\.active:active:enabled,.\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:tsystem-bd-c_border\.intent\.action\.active[data-active='true']:enabled {
-    border-color: var(--Tight-colors-border-intent-action-active);
+  .\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:\[\&_path\]\:tsystem-stk_icon\.intent\.success\.active:active:enabled path,.\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:\[\&_path\]\:tsystem-stk_icon\.intent\.success\.active[data-active='true']:enabled path {
+    stroke: var(--Tight-colors-icon-intent-success-active);
 }
 
-  .\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:tsystem-bd-c_border\.intent\.danger\.active:active:enabled,.\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:tsystem-bd-c_border\.intent\.danger\.active[data-active='true']:enabled {
-    border-color: var(--Tight-colors-border-intent-danger-active);
+  .\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:\[\&_\.Tight-text\]\:tsystem-c_typography\.intent\.warning\.active:active:enabled .Tight-text,.\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:\[\&_\.Tight-text\]\:tsystem-c_typography\.intent\.warning\.active[data-active='true']:enabled .Tight-text {
+    color: var(--Tight-colors-typography-intent-warning-active);
 }
 
-  .\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:tsystem-bd-c_transparent:active:enabled,.\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:tsystem-bd-c_transparent[data-active='true']:enabled {
-    border-color: var(--Tight-colors-transparent);
+  .\[\&\:hover\]\:\[\&_svg\]\:\[\&_path\]\:tsystem-stk_icon\.accent\.danger:hover svg path {
+    stroke: var(--Tight-colors-icon-accent-danger);
 }
 
-  .\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:tsystem-bd-c_border\.intent\.primary\.active:active:enabled,.\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:tsystem-bd-c_border\.intent\.primary\.active[data-active='true']:enabled {
-    border-color: var(--Tight-colors-border-intent-primary-active);
+  @media screen and (min-width: 40rem) {
+    .sm\:tsystem-p_4px {
+      padding: 4px;
 }
 
-  .\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:tsystem-bd-c_border\.intent\.success\.active:active:enabled,.\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:tsystem-bd-c_border\.intent\.success\.active[data-active='true']:enabled {
-    border-color: var(--Tight-colors-border-intent-success-active);
+    .sm\:tsystem-gap_0 {
+      gap: 0;
 }
 
-  .\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:tsystem-bd-c_border\.intent\.warning\.active:active:enabled,.\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:tsystem-bd-c_border\.intent\.warning\.active[data-active='true']:enabled {
-    border-color: var(--Tight-colors-border-intent-warning-active);
+    .sm\:tsystem-flex-d_row {
+      flex-direction: row;
 }
 
-  .\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:tsystem-bg-c_surface\.intent\.action\.discrete\.active:active:enabled,.\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:tsystem-bg-c_surface\.intent\.action\.discrete\.active[data-active='true']:enabled {
-    background-color: var(--Tight-colors-surface-intent-action-discrete-active);
+    .sm\:tsystem-ai_center {
+      align-items: center;
 }
 
-  .\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:tsystem-bg-c_surface\.intent\.action\.active:active:enabled,.\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:tsystem-bg-c_surface\.intent\.action\.active[data-active='true']:enabled {
-    background-color: var(--Tight-colors-surface-intent-action-active);
+    .sm\:tsystem-fs_label {
+      font-size: var(--Tight-fontSizes-label);
 }
 
-  .\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:tsystem-bg-c_surface\.intent\.danger\.active:active:enabled,.\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:tsystem-bg-c_surface\.intent\.danger\.active[data-active='true']:enabled {
-    background-color: var(--Tight-colors-surface-intent-danger-active);
+    .sm\:tsystem-lh_16px {
+      line-height: 16px;
 }
 
-  .\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:tsystem-bg-c_surface\.intent\.primary\.active:active:enabled,.\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:tsystem-bg-c_surface\.intent\.primary\.active[data-active='true']:enabled {
-    background-color: var(--Tight-colors-surface-intent-primary-active);
+    .sm\:tsystem-fs_label\.sub {
+      font-size: var(--Tight-fontSizes-label-sub);
 }
 
-  .\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:tsystem-bg-c_surface\.intent\.success\.active:active:enabled,.\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:tsystem-bg-c_surface\.intent\.success\.active[data-active='true']:enabled {
-    background-color: var(--Tight-colors-surface-intent-success-active);
+    .sm\:tsystem-lh_14px {
+      line-height: 14px;
 }
 
-  .\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:tsystem-bg-c_surface\.intent\.warning\.active:active:enabled,.\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:tsystem-bg-c_surface\.intent\.warning\.active[data-active='true']:enabled {
-    background-color: var(--Tight-colors-surface-intent-warning-active);
+    .sm\:tsystem-fs_sm {
+      font-size: var(--Tight-fontSizes-sm);
 }
 
-  .\[\&\:hover\,_\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:\[\&_\.Tight-sub-label\]\:tsystem-c_typography\.intent\.secondary\.hover:hover .Tight-sub-label,.\[\&\:hover\,_\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:\[\&_\.Tight-sub-label\]\:tsystem-c_typography\.intent\.secondary\.hover:focus-visible .Tight-sub-label,.\[\&\:hover\,_\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:\[\&_\.Tight-sub-label\]\:tsystem-c_typography\.intent\.secondary\.hover[data-state='open'] .Tight-sub-label {
-    color: var(--Tight-colors-typography-intent-secondary-hover);
+    .sm\:tsystem-fs_md {
+      font-size: var(--Tight-fontSizes-md);
 }
 
-  .\[\&\:hover\,_\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:\[\&_\.Tight-medium-icon_\>_path\]\:tsystem-stk_icon\.intent\.secondary\.hover:hover .Tight-medium-icon > path,.\[\&\:hover\,_\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:\[\&_\.Tight-medium-icon_\>_path\]\:tsystem-stk_icon\.intent\.secondary\.hover:focus-visible .Tight-medium-icon > path,.\[\&\:hover\,_\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:\[\&_\.Tight-medium-icon_\>_path\]\:tsystem-stk_icon\.intent\.secondary\.hover[data-state='open'] .Tight-medium-icon > path {
-    stroke: var(--Tight-colors-icon-intent-secondary-hover);
+    .sm\:tsystem-fs_body {
+      font-size: var(--Tight-fontSizes-body);
 }
 
-  .\[\&\:hover\,_\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:\[\&_\.Tight-sub-label\]\:tsystem-c_typography\.intent\.action\.hover:hover .Tight-sub-label,.\[\&\:hover\,_\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:\[\&_\.Tight-sub-label\]\:tsystem-c_typography\.intent\.action\.hover:focus-visible .Tight-sub-label,.\[\&\:hover\,_\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:\[\&_\.Tight-sub-label\]\:tsystem-c_typography\.intent\.action\.hover[data-state='open'] .Tight-sub-label {
-    color: var(--Tight-colors-typography-intent-action-hover);
+    .sm\:tsystem-fs_label\.strong {
+      font-size: var(--Tight-fontSizes-label-strong);
 }
 
-  .\[\&\:hover\,_\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:\[\&_\.Tight-medium-icon_\>_path\]\:tsystem-stk_icon\.intent\.action\.hover:hover .Tight-medium-icon > path,.\[\&\:hover\,_\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:\[\&_\.Tight-medium-icon_\>_path\]\:tsystem-stk_icon\.intent\.action\.hover:focus-visible .Tight-medium-icon > path,.\[\&\:hover\,_\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:\[\&_\.Tight-medium-icon_\>_path\]\:tsystem-stk_icon\.intent\.action\.hover[data-state='open'] .Tight-medium-icon > path {
-    stroke: var(--Tight-colors-icon-intent-action-hover);
+    .sm\:tsystem-fs_label\.strongSub {
+      font-size: var(--Tight-fontSizes-label-strongSub);
 }
 
-  .\[\&\:hover\,_\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:\[\&_\.Tight-sub-label\]\:tsystem-c_typography\.intent\.success\.hover:hover .Tight-sub-label,.\[\&\:hover\,_\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:\[\&_\.Tight-sub-label\]\:tsystem-c_typography\.intent\.success\.hover:focus-visible .Tight-sub-label,.\[\&\:hover\,_\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:\[\&_\.Tight-sub-label\]\:tsystem-c_typography\.intent\.success\.hover[data-state='open'] .Tight-sub-label {
-    color: var(--Tight-colors-typography-intent-success-hover);
+    .sm\:tsystem-left_auto {
+      left: auto;
 }
 
-  .\[\&\:hover\,_\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:\[\&_\.Tight-medium-icon_\>_path\]\:tsystem-stk_icon\.intent\.success\.hover:hover .Tight-medium-icon > path,.\[\&\:hover\,_\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:\[\&_\.Tight-medium-icon_\>_path\]\:tsystem-stk_icon\.intent\.success\.hover:focus-visible .Tight-medium-icon > path,.\[\&\:hover\,_\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:\[\&_\.Tight-medium-icon_\>_path\]\:tsystem-stk_icon\.intent\.success\.hover[data-state='open'] .Tight-medium-icon > path {
-    stroke: var(--Tight-colors-icon-intent-success-hover);
+    .sm\:tsystem-bottom_auto {
+      bottom: auto;
 }
 
-  .\[\&\:hover\,_\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:\[\&_\.Tight-sub-label\]\:tsystem-c_typography\.intent\.warning\.hover:hover .Tight-sub-label,.\[\&\:hover\,_\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:\[\&_\.Tight-sub-label\]\:tsystem-c_typography\.intent\.warning\.hover:focus-visible .Tight-sub-label,.\[\&\:hover\,_\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:\[\&_\.Tight-sub-label\]\:tsystem-c_typography\.intent\.warning\.hover[data-state='open'] .Tight-sub-label {
-    color: var(--Tight-colors-typography-intent-warning-hover);
+    .sm\:tsystem-w_512px {
+      width: 512px;
 }
 
-  .\[\&\:hover\,_\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:\[\&_\.Tight-medium-icon_\>_path\]\:tsystem-stk_icon\.intent\.warning\.hover:hover .Tight-medium-icon > path,.\[\&\:hover\,_\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:\[\&_\.Tight-medium-icon_\>_path\]\:tsystem-stk_icon\.intent\.warning\.hover:focus-visible .Tight-medium-icon > path,.\[\&\:hover\,_\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:\[\&_\.Tight-medium-icon_\>_path\]\:tsystem-stk_icon\.intent\.warning\.hover[data-state='open'] .Tight-medium-icon > path {
-    stroke: var(--Tight-colors-icon-intent-warning-hover);
+    .sm\:tsystem-min-w_fit-content {
+      min-width: fit-content;
 }
 
-  .\[\&\:hover\,_\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:\[\&_\.Tight-sub-label\]\:tsystem-c_typography\.intent\.danger\.hover:hover .Tight-sub-label,.\[\&\:hover\,_\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:\[\&_\.Tight-sub-label\]\:tsystem-c_typography\.intent\.danger\.hover:focus-visible .Tight-sub-label,.\[\&\:hover\,_\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:\[\&_\.Tight-sub-label\]\:tsystem-c_typography\.intent\.danger\.hover[data-state='open'] .Tight-sub-label {
-    color: var(--Tight-colors-typography-intent-danger-hover);
+    .sm\:tsystem-min-w_512px {
+      min-width: 512px;
 }
 
-  .\[\&\:hover\,_\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:\[\&_\.Tight-medium-icon_\>_path\]\:tsystem-stk_icon\.intent\.danger\.hover:hover .Tight-medium-icon > path,.\[\&\:hover\,_\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:\[\&_\.Tight-medium-icon_\>_path\]\:tsystem-stk_icon\.intent\.danger\.hover:focus-visible .Tight-medium-icon > path,.\[\&\:hover\,_\&\:focus-visible\,_\&\[data-state\=\'open\'\]\]\:\[\&_\.Tight-medium-icon_\>_path\]\:tsystem-stk_icon\.intent\.danger\.hover[data-state='open'] .Tight-medium-icon > path {
-    stroke: var(--Tight-colors-icon-intent-danger-hover);
+    .sm\:tsystem-w_100dvw {
+      width: 100dvw;
 }
 
-  .\[\&\:hover\:not\(\:disabled\)\]\:\[\&_\.Tight-text\]\:tsystem-c_typography\.intent\.secondary\.hover:hover:not(:disabled) .Tight-text {
-    color: var(--Tight-colors-typography-intent-secondary-hover);
+    .sm\:tsystem-h_100dvh {
+      height: 100dvh;
 }
 
-  .\[\&\:hover\:not\(\:disabled\)\]\:\[\&_\.Tight-text\]\:tsystem-c_typography\.intent\.action\.hover:hover:not(:disabled) .Tight-text {
-    color: var(--Tight-colors-typography-intent-action-hover);
+    .sm\:tsystem-min-w_100dvw {
+      min-width: 100dvw;
 }
 
-  .\[\&\:hover\:not\(\:disabled\)\]\:\[\&_\.Tight-text\]\:tsystem-c_typography\.intent\.danger\.hover:hover:not(:disabled) .Tight-text {
-    color: var(--Tight-colors-typography-intent-danger-hover);
+    .sm\:tsystem-min-h_100dvh {
+      min-height: 100dvh;
 }
 
-  .\[\&\:hover\:not\(\:disabled\)\]\:\[\&_\.Tight-text\]\:tsystem-c_typography\.intent\.primary\.hover:hover:not(:disabled) .Tight-text {
-    color: var(--Tight-colors-typography-intent-primary-hover);
+    .sm\:tsystem-max-h_100dvh {
+      max-height: 100dvh;
 }
 
-  .\[\&\:hover\:not\(\:disabled\)\]\:\[\&_path\]\:tsystem-stk_icon\.intent\.primary\.hover:hover:not(:disabled) path {
-    stroke: var(--Tight-colors-icon-intent-primary-hover);
+    .sm\:tsystem-max-w_100dvw {
+      max-width: 100dvw;
 }
 
-  .\[\&\:hover\:not\(\:disabled\)\]\:\[\&_\.Tight-text\]\:tsystem-c_typography\.intent\.success\.hover:hover:not(:disabled) .Tight-text {
-    color: var(--Tight-colors-typography-intent-success-hover);
+    .sm\:tsystem-h_35px {
+      height: 35px;
 }
 
-  .\[\&\:hover\:not\(\:disabled\)\]\:\[\&_path\]\:tsystem-stk_icon\.intent\.success\.hover:hover:not(:disabled) path {
-    stroke: var(--Tight-colors-icon-intent-success-hover);
+    .sm\:tsystem-h_12px {
+      height: 12px;
 }
 
-  .\[\&\:hover\:not\(\:disabled\)\]\:\[\&_\.Tight-text\]\:tsystem-c_typography\.intent\.warning\.hover:hover:not(:disabled) .Tight-text {
-    color: var(--Tight-colors-typography-intent-warning-hover);
+    .sm\:tsystem-w_12px {
+      width: 12px;
 }
 
-  .\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:\[\&_\.Tight-text\]\:tsystem-c_typography\.intent\.secondary\.active:active:enabled .Tight-text,.\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:\[\&_\.Tight-text\]\:tsystem-c_typography\.intent\.secondary\.active[data-active='true']:enabled .Tight-text {
-    color: var(--Tight-colors-typography-intent-secondary-active);
+    .sm\:tsystem-h_60px {
+      height: 60px;
+}
 }
 
-  .\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:\[\&_\.Tight-text\]\:tsystem-c_typography\.intent\.action\.active:active:enabled .Tight-text,.\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:\[\&_\.Tight-text\]\:tsystem-c_typography\.intent\.action\.active[data-active='true']:enabled .Tight-text {
-    color: var(--Tight-colors-typography-intent-action-active);
+  @media (hover: hover) and (pointer: fine) {
+    .supportHover\:notDisabled\:\[\&_\.Tight-text\]\:tsystem-c_typography\.intent\.secondary\.hover:not(:disabled, [disabled], [data-disabled]) .Tight-text:hover {
+      color: var(--Tight-colors-typography-intent-secondary-hover);
 }
 
-  .\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:\[\&_\.Tight-text\]\:tsystem-c_typography\.intent\.danger\.active:active:enabled .Tight-text,.\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:\[\&_\.Tight-text\]\:tsystem-c_typography\.intent\.danger\.active[data-active='true']:enabled .Tight-text {
-    color: var(--Tight-colors-typography-intent-danger-active);
+    .supportHover\:notDisabled\:\[\&_\.Tight-text\]\:tsystem-c_typography\.intent\.action\.hover:not(:disabled, [disabled], [data-disabled]) .Tight-text:hover {
+      color: var(--Tight-colors-typography-intent-action-hover);
 }
 
-  .\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:\[\&_\.Tight-text\]\:tsystem-c_typography\.intent\.primary\.active:active:enabled .Tight-text,.\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:\[\&_\.Tight-text\]\:tsystem-c_typography\.intent\.primary\.active[data-active='true']:enabled .Tight-text {
-    color: var(--Tight-colors-typography-intent-primary-active);
+    .supportHover\:notDisabled\:\[\&_\.Tight-text\]\:tsystem-c_typography\.intent\.danger\.hover:not(:disabled, [disabled], [data-disabled]) .Tight-text:hover {
+      color: var(--Tight-colors-typography-intent-danger-hover);
 }
 
-  .\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:\[\&_path\]\:tsystem-stk_icon\.intent\.primary\.active:active:enabled path,.\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:\[\&_path\]\:tsystem-stk_icon\.intent\.primary\.active[data-active='true']:enabled path {
-    stroke: var(--Tight-colors-icon-intent-primary-active);
+    .supportHover\:notDisabled\:\[\&_\.Tight-text\]\:tsystem-c_typography\.intent\.primary\.hover:not(:disabled, [disabled], [data-disabled]) .Tight-text:hover {
+      color: var(--Tight-colors-typography-intent-primary-hover);
 }
 
-  .\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:\[\&_\.Tight-text\]\:tsystem-c_typography\.intent\.success\.active:active:enabled .Tight-text,.\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:\[\&_\.Tight-text\]\:tsystem-c_typography\.intent\.success\.active[data-active='true']:enabled .Tight-text {
-    color: var(--Tight-colors-typography-intent-success-active);
+    .supportHover\:notDisabled\:\[\&_path\]\:tsystem-stk_icon\.intent\.primary\.hover:not(:disabled, [disabled], [data-disabled]) path:hover {
+      stroke: var(--Tight-colors-icon-intent-primary-hover);
 }
 
-  .\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:\[\&_path\]\:tsystem-stk_icon\.intent\.success\.active:active:enabled path,.\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:\[\&_path\]\:tsystem-stk_icon\.intent\.success\.active[data-active='true']:enabled path {
-    stroke: var(--Tight-colors-icon-intent-success-active);
+    .supportHover\:notDisabled\:\[\&_\.Tight-text\]\:tsystem-c_typography\.intent\.success\.hover:not(:disabled, [disabled], [data-disabled]) .Tight-text:hover {
+      color: var(--Tight-colors-typography-intent-success-hover);
 }
 
-  .\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:\[\&_\.Tight-text\]\:tsystem-c_typography\.intent\.warning\.active:active:enabled .Tight-text,.\[\&\:active\:enabled\,_\&\[data-active\=\'true\'\]\:enabled\]\:\[\&_\.Tight-text\]\:tsystem-c_typography\.intent\.warning\.active[data-active='true']:enabled .Tight-text {
-    color: var(--Tight-colors-typography-intent-warning-active);
+    .supportHover\:notDisabled\:\[\&_path\]\:tsystem-stk_icon\.intent\.success\.hover:not(:disabled, [disabled], [data-disabled]) path:hover {
+      stroke: var(--Tight-colors-icon-intent-success-hover);
 }
 
-  .\[\&\:hover\]\:\[\&_svg\]\:\[\&_path\]\:tsystem-stk_icon\.accent\.danger:hover svg path {
-    stroke: var(--Tight-colors-icon-accent-danger);
+    .supportHover\:notDisabled\:\[\&_\.Tight-text\]\:tsystem-c_typography\.intent\.warning\.hover:not(:disabled, [disabled], [data-disabled]) .Tight-text:hover {
+      color: var(--Tight-colors-typography-intent-warning-hover);
+}
+
+    .supportHover\:notDisabled\:tsystem-bd_\{borderWidths\.lg\}_solid:not(:disabled, [disabled], [data-disabled]):hover {
+      border: var(--Tight-borderWidths-lg) solid;
+}
+
+    .supportHover\:notDisabled\:tsystem-bd-c_border\.layout:not(:disabled, [disabled], [data-disabled]):hover {
+      border-color: var(--Tight-colors-border-layout);
+}
+
+    .\[\&_\>_\.Tight-text\]\:supportHover\:tsystem-trs_color_100ms_ease-out > .Tight-text:hover {
+      transition: color 100ms ease-out;
+}
+
+    .\[\&_path\]\:supportHover\:tsystem-trs_stroke_100ms_ease-out path:hover {
+      transition: stroke 100ms ease-out;
+}
+
+    .supportHover\:notDisabled\:tsystem-bd-c_border\.intent\.action\.hover:not(:disabled, [disabled], [data-disabled]):hover {
+      border-color: var(--Tight-colors-border-intent-action-hover);
+}
+
+    .supportHover\:notDisabled\:tsystem-bd-c_border\.intent\.danger\.hover:not(:disabled, [disabled], [data-disabled]):hover {
+      border-color: var(--Tight-colors-border-intent-danger-hover);
+}
+
+    .supportHover\:enabled\:tsystem-bd-c_border\.intent\.action\.hover:enabled:hover {
+      border-color: var(--Tight-colors-border-intent-action-hover);
+}
+
+    .supportHover\:notDisabled\:tsystem-bd-c_border\.intent\.primary\.hover:not(:disabled, [disabled], [data-disabled]):hover {
+      border-color: var(--Tight-colors-border-intent-primary-hover);
+}
+
+    .supportHover\:notDisabled\:tsystem-bd-c_border\.intent\.success\.hover:not(:disabled, [disabled], [data-disabled]):hover {
+      border-color: var(--Tight-colors-border-intent-success-hover);
+}
+
+    .supportHover\:notDisabled\:tsystem-bd-c_border\.intent\.warning\.hover:not(:disabled, [disabled], [data-disabled]):hover {
+      border-color: var(--Tight-colors-border-intent-warning-hover);
+}
+
+    .\[\&_\.Tight-text\:\:after\]\:supportHover\:tsystem-trs_width_300ms_ease-out .Tight-text::after:hover {
+      transition: width 300ms ease-out;
+}
+
+    .supportHover\:notDisabled\:tsystem-bg-c_surface\.intent\.action\.discrete\.hover:not(:disabled, [disabled], [data-disabled]):hover {
+      background-color: var(--Tight-colors-surface-intent-action-discrete-hover);
+}
+
+    .supportHover\:\[\&_\.Tight-sub-label\]\:tsystem-c_typography\.intent\.secondary\.hover .Tight-sub-label:hover {
+      color: var(--Tight-colors-typography-intent-secondary-hover);
+}
+
+    .supportHover\:\[\&_\.Tight-medium-icon_\>_path\]\:tsystem-stk_icon\.intent\.secondary\.hover .Tight-medium-icon > path:hover {
+      stroke: var(--Tight-colors-icon-intent-secondary-hover);
+}
+
+    .supportHover\:\[\&_\.Tight-sub-label\]\:tsystem-c_typography\.intent\.action\.hover .Tight-sub-label:hover {
+      color: var(--Tight-colors-typography-intent-action-hover);
+}
+
+    .supportHover\:\[\&_\.Tight-medium-icon_\>_path\]\:tsystem-stk_icon\.intent\.action\.hover .Tight-medium-icon > path:hover {
+      stroke: var(--Tight-colors-icon-intent-action-hover);
+}
+
+    .supportHover\:\[\&_\.Tight-sub-label\]\:tsystem-c_typography\.intent\.success\.hover .Tight-sub-label:hover {
+      color: var(--Tight-colors-typography-intent-success-hover);
+}
+
+    .supportHover\:\[\&_\.Tight-medium-icon_\>_path\]\:tsystem-stk_icon\.intent\.success\.hover .Tight-medium-icon > path:hover {
+      stroke: var(--Tight-colors-icon-intent-success-hover);
+}
+
+    .supportHover\:\[\&_\.Tight-sub-label\]\:tsystem-c_typography\.intent\.warning\.hover .Tight-sub-label:hover {
+      color: var(--Tight-colors-typography-intent-warning-hover);
+}
+
+    .supportHover\:\[\&_\.Tight-medium-icon_\>_path\]\:tsystem-stk_icon\.intent\.warning\.hover .Tight-medium-icon > path:hover {
+      stroke: var(--Tight-colors-icon-intent-warning-hover);
+}
+
+    .supportHover\:\[\&_\.Tight-sub-label\]\:tsystem-c_typography\.intent\.danger\.hover .Tight-sub-label:hover {
+      color: var(--Tight-colors-typography-intent-danger-hover);
+}
+
+    .supportHover\:\[\&_\.Tight-medium-icon_\>_path\]\:tsystem-stk_icon\.intent\.danger\.hover .Tight-medium-icon > path:hover {
+      stroke: var(--Tight-colors-icon-intent-danger-hover);
+}
+
+    .supportHover\:notDisabled\:tsystem-bg-c_surface\.intent\.action\.hover:not(:disabled, [disabled], [data-disabled]):hover {
+      background-color: var(--Tight-colors-surface-intent-action-hover);
+}
+
+    .supportHover\:notDisabled\:tsystem-bg-c_surface\.intent\.danger\.hover:not(:disabled, [disabled], [data-disabled]):hover {
+      background-color: var(--Tight-colors-surface-intent-danger-hover);
+}
+
+    .supportHover\:enabled\:tsystem-bg-c_surface\.intent\.action\.discrete\.hover:enabled:hover {
+      background-color: var(--Tight-colors-surface-intent-action-discrete-hover);
+}
+
+    .supportHover\:enabled\:tsystem-c_icon\.intent\.action\.hover:enabled:hover {
+      color: var(--Tight-colors-icon-intent-action-hover);
 }
 
-  @media screen and (min-width: 53.125rem) {
-    .md\:tsystem-grid-tc_repeat\(2\,_400px\) {
-      grid-template-columns: repeat(2, 400px);
+    .supportHover\:enabled\:tsystem-fill_icon\.intent\.action\.hover:enabled:hover {
+      fill: var(--Tight-colors-icon-intent-action-hover);
 }
+
+    .supportHover\:notDisabled\:tsystem-bg-c_surface\.intent\.primary\.hover:not(:disabled, [disabled], [data-disabled]):hover {
+      background-color: var(--Tight-colors-surface-intent-primary-hover);
+}
+
+    .supportHover\:notDisabled\:tsystem-bg-c_surface\.intent\.success\.hover:not(:disabled, [disabled], [data-disabled]):hover {
+      background-color: var(--Tight-colors-surface-intent-success-hover);
+}
+
+    .supportHover\:notDisabled\:tsystem-bg-c_surface\.intent\.warning\.hover:not(:disabled, [disabled], [data-disabled]):hover {
+      background-color: var(--Tight-colors-surface-intent-warning-hover);
+}
+
+    .supportHover\:\[\&\[data-is-checked\=\'false\'\]\]\:tsystem-bg-c_surface\.background\.hover[data-is-checked='false']:hover {
+      background-color: var(--Tight-colors-surface-background-hover);
+}
+
+    .\[\&\[data-state\=\'closed\'\]\[data-disablehover\=\'false\'\]\]\:supportHover\:tsystem-bg-c_surface\.intent\.action\.discrete\.hover[data-state='closed'][data-disablehover='false']:hover {
+      background-color: var(--Tight-colors-surface-intent-action-discrete-hover);
+}
+
+    .\[\&_\.Tight-medium-icon_\>_path\]\:supportHover\:tsystem-stk_typography\.intent\.action\.hover .Tight-medium-icon > path:hover {
+      stroke: var(--Tight-colors-typography-intent-action-hover);
+}
+
+    .\[\&_\.Tight-text\:\:after\]\:supportHover\:tsystem-w_100\% .Tight-text::after:hover {
+      width: 100%;
+}
+}
+
+  @media (hover: hover) and (pointer: fine) {
+    .\[\&\:not\(\[data-state\]\)\[data-disablehover\=\'false\'\]\:not\(\:focus-within\)\]\:supportHover\:tsystem-bg-c_surface\.intent\.action\.discrete\.hover:not([data-state])[data-disablehover='false']:not(:focus-within):hover {
+      background-color: var(--Tight-colors-surface-intent-action-discrete-hover);
+}
+}
+
+  @media (hover: hover) and (pointer: fine) {
+    .\[\&\:not\(\:focus-within\)\]\:supportHover\:tsystem-c_typography\.intent\.action\.hover:not(:focus-within):hover {
+      color: var(--Tight-colors-typography-intent-action-hover);
+}
+}
+
+  @media (hover: hover) and (pointer: fine) {
+    .supportHover\:tsystem-bg_surface\.intent\.secondary\.hover:hover {
+      background: var(--Tight-colors-surface-intent-secondary-hover);
+}
+
+    .supportHover\:tsystem-bg_surface\.intent\.action\.hover:hover {
+      background: var(--Tight-colors-surface-intent-action-hover);
+}
+
+    .supportHover\:tsystem-bg_surface\.intent\.success\.hover:hover {
+      background: var(--Tight-colors-surface-intent-success-hover);
+}
+
+    .supportHover\:tsystem-bg_surface\.intent\.warning\.hover:hover {
+      background: var(--Tight-colors-surface-intent-warning-hover);
+}
+
+    .supportHover\:tsystem-bg_surface\.intent\.danger\.hover:hover {
+      background: var(--Tight-colors-surface-intent-danger-hover);
+}
+
+    .supportHover\:tsystem-bd_\{borderWidths\.lg\}_solid:hover {
+      border: var(--Tight-borderWidths-lg) solid;
+}
+
+    .supportHover\:tsystem-trs_background_100ms_ease-out\,_background-color_100ms_ease-out\,_border-color_100ms_ease-out\,_box-shadow_0ms:hover {
+      transition: background 100ms ease-out, background-color 100ms ease-out, border-color 100ms ease-out, box-shadow 0ms;
+}
+
+    .supportHover\:tsystem-trs_background_100ms_ease-out\,_box-shadow_0ms:hover {
+      transition: background 100ms ease-out, box-shadow 0ms;
+}
+
+    .supportHover\:tsystem-trs_color_100ms_ease-out:hover {
+      transition: color 100ms ease-out;
+}
+
+    .supportHover\:tsystem-bd-c_border\.intent\.secondary\.hover:hover {
+      border-color: var(--Tight-colors-border-intent-secondary-hover);
+}
+
+    .supportHover\:tsystem-bd-c_border\.intent\.action\.hover:hover {
+      border-color: var(--Tight-colors-border-intent-action-hover);
+}
+
+    .supportHover\:tsystem-bd-c_border\.intent\.success\.hover:hover {
+      border-color: var(--Tight-colors-border-intent-success-hover);
+}
+
+    .supportHover\:tsystem-bd-c_border\.intent\.warning\.hover:hover {
+      border-color: var(--Tight-colors-border-intent-warning-hover);
+}
+
+    .supportHover\:tsystem-bd-c_border\.intent\.danger\.hover:hover {
+      border-color: var(--Tight-colors-border-intent-danger-hover);
+}
+
+    .supportHover\:tsystem-bg-c_surface\.intent\.action\.hover:hover {
+      background-color: var(--Tight-colors-surface-intent-action-hover);
+}
+
+    .supportHover\:tsystem-bg-c_surface\.intent\.action\.discrete\.hover:hover {
+      background-color: var(--Tight-colors-surface-intent-action-discrete-hover);
+}
+
+    .supportHover\:tsystem-c_typography\.accent\.action:hover {
+      color: var(--Tight-colors-typography-accent-action);
+}
+
+    .supportHover\:tsystem-bg-c_brand\.primary:hover {
+      background-color: var(--Tight-colors-brand-primary);
+}
+
+    .supportHover\:tsystem-c_typography\.contrast:hover {
+      color: var(--Tight-colors-typography-contrast);
 }
 
-  @media screen and (min-width: 87.5rem) {
-    .\31\.5xl\:tsystem-grid-tc_400px_400px_400px_minmax\(150px\,_400px\) {
-      grid-template-columns: 400px 400px 400px minmax(150px, 400px);
+    .supportHover\:tsystem-c_typography\.intent\.action\.hover:hover {
+      color: var(--Tight-colors-typography-intent-action-hover);
 }
 }
 }