@tight-embedded/react 1.0.1 → 1.2.0

package/dist/index.css

@@ -8,6 +8,18 @@
         -webkit-font-smoothing: antialiased;
         -moz-osx-font-smoothing: grayscale;
     }
+
+    /* Remove number input spinners
+    https://stackoverflow.com/questions/3790935/can-i-hide-the-html5-number-input-s-spin-box */
+    input::-webkit-outer-spin-button,
+    input::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+    }
+
+    input[type=number] {
+        -moz-appearance:textfield;
+    }
 }
 
 @keyframes fade-in {
@@ -117,7 +129,7 @@
     --Tight-radii-md: 2px;
     --Tight-radii-lg: 4px;
     --Tight-borderWidths-sm: 0.5px;
-    --Tight-borderWidths-md: 0.75px;
+    --Tight-borderWidths-md: 1px;
     --Tight-borderWidths-lg: 1px;
     --Tight-borderWidths-xl: 2px;
     --Tight-animations-appear-instant: 0.25s linear fade-in;
@@ -339,8 +351,8 @@
     padding: 6px;
 }
 
-  .tsystem-p_15px_15px_0_15px {
-    padding: 15px 15px 0 15px;
+  .tsystem-bd_\{borderWidths\.md\}_solid_transparent {
+    border: var(--Tight-borderWidths-md) solid transparent;
 }
 
   .tsystem-p_15px {
@@ -423,10 +435,6 @@
     border: 1px solid var(--Tight-colors-border-intent-action);
 }
 
-  .tsystem-bd_\{borderWidths\.md\}_solid_transparent {
-    border: var(--Tight-borderWidths-md) solid transparent;
-}
-
   .tsystem-bd_1px_solid_\{colors\.border\.intent\.warning\} {
     border: 1px solid var(--Tight-colors-border-intent-warning);
 }
@@ -499,6 +507,14 @@
     margin: 0 auto;
 }
 
+  .tsystem-m_15px {
+    margin: 15px;
+}
+
+  .tsystem-p_10px_20px {
+    padding: 10px 20px;
+}
+
   .tsystem-p_8px {
     padding: 8px;
 }
@@ -507,6 +523,10 @@
     padding: 4px 8px;
 }
 
+  .tsystem-p_15px_15px_0_15px {
+    padding: 15px 15px 0 15px;
+}
+
   .tsystem-p_0_10px {
     padding: 0 10px;
 }
@@ -539,6 +559,10 @@
     padding: 25px;
 }
 
+  .tsystem-bd_\{borderWidths\.lg\}_solid_\{colors\.border\.layout\} {
+    border: var(--Tight-borderWidths-lg) solid var(--Tight-colors-border-layout);
+}
+
   .tsystem-p_5 {
     padding: 5px;
 }
@@ -612,34 +636,6 @@
     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);
 }
@@ -652,6 +648,10 @@
     border-color: var(--Tight-colors-border-intent-action);
 }
 
+  .tsystem-bd-c_border\.intent\.success {
+    border-color: var(--Tight-colors-border-intent-success);
+}
+
   .tsystem-bd-c_border\.intent\.danger {
     border-color: var(--Tight-colors-border-intent-danger);
 }
@@ -696,6 +696,10 @@
     border-color: var(--Tight-colors-border-intent-primary);
 }
 
+  .tsystem-bdr_999px {
+    border-radius: 999px;
+}
+
   .tsystem-gap_26px {
     gap: 26px;
 }
@@ -724,6 +728,10 @@
     border-width: 0;
 }
 
+  .tsystem-bd-c_border\.layout\.strong {
+    border-color: var(--Tight-colors-border-layout-strong);
+}
+
   .tsystem-trs_all_300ms_ease-out {
     transition: all 300ms ease-out;
 }
@@ -732,12 +740,16 @@
     place-items: center;
 }
 
-  .tsystem-flex_1 {
-    flex: 1 1 0%;
+  .tsystem-gap_16px {
+    gap: 16px;
 }
 
-  .tsystem-bd-c_border\.intent\.success {
-    border-color: var(--Tight-colors-border-intent-success);
+  .tsystem-gap_8px {
+    gap: 8px;
+}
+
+  .tsystem-flex_1 {
+    flex: 1 1 0%;
 }
 
   .tsystem-bg-p_100\%_0 {
@@ -780,24 +792,60 @@
     gap: 9px;
 }
 
-  .tsystem-bd-w_sm {
-    border-width: var(--Tight-borderWidths-sm);
+  .tsystem-bd-t_\{colors\.border\.layout\.strong\}_\{borderWidths\.md\}_solid {
+    border-top: var(--Tight-colors-border-layout-strong) var(--Tight-borderWidths-md) solid;
 }
 
-  .tsystem-gap_4px {
-    gap: 4px;
+  .tsystem-bd-b_\{borderWidths\.md\}_solid {
+    border-bottom: var(--Tight-borderWidths-md) solid;
 }
 
-  .tsystem-gap_10 {
-    gap: 10px;
+  .tsystem-bd-c_border\.layout\.weak {
+    border-color: var(--Tight-colors-border-layout-weak);
+}
+
+  .tsystem-bd-t_none {
+    border-top: none;
+}
+
+  .tsystem-bd-l_none {
+    border-left: none;
+}
+
+  .tsystem-bd-r_none {
+    border-right: none;
+}
+
+  .tsystem-bd-c_strong {
+    border-color: strong;
+}
+
+  .tsystem-place-self_center {
+    place-self: center;
+}
+
+  .tsystem-mx_15px {
+    margin-inline: 15px;
 }
 
   .tsystem-gap_12px {
     gap: 12px;
 }
 
-  .tsystem-bdr_999px {
-    border-radius: 999px;
+  .tsystem-my_20px {
+    margin-block: 20px;
+}
+
+  .tsystem-bd-w_sm {
+    border-width: var(--Tight-borderWidths-sm);
+}
+
+  .tsystem-gap_4px {
+    gap: 4px;
+}
+
+  .tsystem-gap_10 {
+    gap: 10px;
 }
 
   .tsystem-flex_1_0_0 {
@@ -812,10 +860,6 @@
     overflow: auto;
 }
 
-  .tsystem-tw_wrap {
-    text-wrap: wrap;
-}
-
   .tsystem-gap_16 {
     gap: 16px;
 }
@@ -856,6 +900,18 @@
     gap: 30px;
 }
 
+  .tsystem-flex_1_1_100\% {
+    flex: 1 1 100%;
+}
+
+  .tsystem-bd-b_\{borderWidths\.lg\}_solid_\{colors\.border\.layout\.strong\} {
+    border-bottom: var(--Tight-borderWidths-lg) solid var(--Tight-colors-border-layout-strong);
+}
+
+  .tsystem-ov_scroll {
+    overflow: scroll;
+}
+
   .tsystem-gap_6px {
     gap: 6px;
 }
@@ -908,6 +964,18 @@
     font-weight: var(--Tight-fontWeights-sm);
 }
 
+  .tsystem-bx-sh_0_0_0_0_transparent {
+    box-shadow: 0 0 0 0 transparent;
+}
+
+  .tsystem-pos_relative {
+    position: relative;
+}
+
+  .tsystem-c_icon\.base {
+    color: var(--Tight-colors-icon-base);
+}
+
   .tsystem-bg-c_brand\.primary {
     background-color: var(--Tight-colors-brand-primary);
 }
@@ -944,30 +1012,10 @@
     flex-direction: column;
 }
 
-  .tsystem-pos_relative {
-    position: relative;
-}
-
   .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;
 }
@@ -976,6 +1024,10 @@
     flex-shrink: 0;
 }
 
+  .tsystem-jc_space-between {
+    justify-content: space-between;
+}
+
   .tsystem-ai_flex-start {
     align-items: flex-start;
 }
@@ -988,10 +1040,18 @@
     flex-wrap: wrap;
 }
 
+  .tsystem-bg-c_surface\.foreground {
+    background-color: var(--Tight-colors-surface-foreground);
+}
+
   .tsystem-bg-c_surface\.intent\.secondary {
     background-color: var(--Tight-colors-surface-intent-secondary);
 }
 
+  .tsystem-flex-d_row {
+    flex-direction: row;
+}
+
   .tsystem-flex-d_row-reverse {
     flex-direction: row-reverse;
 }
@@ -1024,6 +1084,18 @@
     flex-direction: column-reverse;
 }
 
+  .tsystem-pos_absolute {
+    position: absolute;
+}
+
+  .tsystem-bg-c_surface\.intent\.warning {
+    background-color: var(--Tight-colors-surface-intent-warning);
+}
+
+  .tsystem-bx-sh_0_0_0_1px_\{colors\.border\.intent\.warning\} {
+    box-shadow: 0 0 0 1px var(--Tight-colors-border-intent-warning);
+}
+
   .tsystem-scr-bar-w_thin {
     scrollbar-width: thin;
 }
@@ -1060,14 +1132,6 @@
     text-align: center;
 }
 
-  .tsystem-white-space_normal {
-    white-space: normal;
-}
-
-  .tsystem-ov-wrap_break-word {
-    overflow-wrap: break-word;
-}
-
   .tsystem-pos_fixed {
     position: fixed;
 }
@@ -1076,18 +1140,6 @@
     background-color: var(--Tight-colors-overlay);
 }
 
-  .tsystem-white-space_wrap {
-    white-space: wrap;
-}
-
-  .tsystem-tov_wrap {
-    text-overflow: wrap;
-}
-
-  .tsystem-pos_absolute {
-    position: absolute;
-}
-
   .tsystem-bg-c_surface\.background {
     background-color: var(--Tight-colors-surface-background);
 }
@@ -1196,14 +1248,6 @@
     background-color: var(--Tight-colors-surface-intent-danger);
 }
 
-  .tsystem-bx-sh_0_0_0_0_transparent {
-    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);
 }
@@ -1216,10 +1260,6 @@
     color: var(--Tight-colors-typography-intent-warning);
 }
 
-  .tsystem-bg-c_surface\.intent\.warning {
-    background-color: var(--Tight-colors-surface-intent-warning);
-}
-
   .tsystem-jc_flex-start {
     justify-content: flex-start;
 }
@@ -1244,6 +1284,10 @@
     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);
 }
@@ -1330,6 +1374,18 @@
     color: var(--Tight-colors-typography-label);
 }
 
+  .tsystem-white-space_normal {
+    white-space: normal;
+}
+
+  .tsystem-ta_left {
+    text-align: left;
+}
+
+  .tsystem-ta_start {
+    text-align: start;
+}
+
   .tsystem-fw_label\.sub {
     font-weight: var(--Tight-fontWeights-label-sub);
 }
@@ -1370,6 +1426,10 @@
     font-size: 7em;
 }
 
+  .tsystem-fs_10em {
+    font-size: 10em;
+}
+
   .tsystem-fw_body {
     font-weight: var(--Tight-fontWeights-body);
 }
@@ -1486,6 +1546,22 @@
     color: var(--Tight-colors-money-positive);
 }
 
+  .tsystem-bd-be-w_var\(--thickness\) {
+    border-block-end-width: var(--thickness);
+}
+
+  .tsystem-grid-tc_100\% {
+    grid-template-columns: 100%;
+}
+
+  .tsystem-rg_25px {
+    row-gap: 25px;
+}
+
+  .tsystem-trf_rotate\(90deg\) {
+    transform: rotate(90deg);
+}
+
   .tsystem-fs_26px {
     font-size: 26px;
 }
@@ -1508,18 +1584,6 @@
     display: none;
 }
 
-  .tsystem-bx-sh_0_0_0_1px_\{colors\.border\.intent\.warning\} {
-    box-shadow: 0 0 0 1px var(--Tight-colors-border-intent-warning);
-}
-
-  .tsystem-d_inline-block {
-    display: inline-block;
-}
-
-  .tsystem-stk_icon\.base {
-    stroke: var(--Tight-colors-icon-base);
-}
-
   .tsystem-stk_icon\.base\.weak {
     stroke: var(--Tight-colors-icon-base-weak);
 }
@@ -1528,6 +1592,10 @@
     line-height: 14px;
 }
 
+  .tsystem-stk_icon\.base {
+    stroke: var(--Tight-colors-icon-base);
+}
+
   .tsystem-c_icon\.accent\.danger {
     color: var(--Tight-colors-icon-accent-danger);
 }
@@ -1546,6 +1614,10 @@
     border-bottom-left-radius: 0;
 }
 
+  .tsystem-bg-c_foreground {
+    background-color: foreground;
+}
+
   .tsystem-grid-tc_repeat\(7\,_1fr\) {
     grid-template-columns: repeat(7, 1fr);
 }
@@ -1574,10 +1646,6 @@
     font-weight: normal;
 }
 
-  .tsystem-ta_left {
-    text-align: left;
-}
-
   .tsystem-text-align-last_initial {
     text-align-last: initial;
 }
@@ -1619,10 +1687,6 @@
     box-shadow: none;
 }
 
-  .tsystem-ta_start {
-    text-align: start;
-}
-
   .tsystem-bg-c_money\.positive\.weak {
     background-color: var(--Tight-colors-money-positive-weak);
 }
@@ -1663,10 +1727,22 @@
     justify-content: right;
 }
 
+  .tsystem-white-space_wrap {
+    white-space: wrap;
+}
+
   .tsystem-c_inherit {
     color: var(--Tight-colors-inherit);
 }
 
+  .tsystem-bg-c_surface\.intent\.action\.discrete\.active {
+    background-color: var(--Tight-colors-surface-intent-action-discrete-active);
+}
+
+  .tsystem-max-w_100\% {
+    max-width: 100%;
+}
+
   .tsystem-mt_15px {
     margin-top: 15px;
 }
@@ -1687,22 +1763,6 @@
     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;
 }
@@ -1715,6 +1775,10 @@
     min-width: 200px;
 }
 
+  .tsystem-w_100\% {
+    width: 100%;
+}
+
   .tsystem-h_72 {
     height: 72px;
 }
@@ -1743,10 +1807,6 @@
     min-width: 0;
 }
 
-  .tsystem-max-w_100\% {
-    max-width: 100%;
-}
-
   .tsystem-min-h_0 {
     min-height: 0;
 }
@@ -1763,6 +1823,30 @@
     max-width: 325px;
 }
 
+  .tsystem-top_-1 {
+    top: -1px;
+}
+
+  .tsystem-right_-1 {
+    right: -1px;
+}
+
+  .tsystem-w_10 {
+    width: 10px;
+}
+
+  .tsystem-h_10 {
+    height: 10px;
+}
+
+  .tsystem-w_25px {
+    width: 25px;
+}
+
+  .tsystem-h_25px {
+    height: 25px;
+}
+
   .tsystem-ov-x_hidden {
     overflow-x: hidden;
 }
@@ -1859,6 +1943,10 @@
     min-width: 100%;
 }
 
+  .tsystem-min-w_128px {
+    min-width: 128px;
+}
+
   .tsystem-w_0 {
     width: 0;
 }
@@ -2055,6 +2143,50 @@
     height: 250px;
 }
 
+  .tsystem-pb_14px {
+    padding-bottom: 14px;
+}
+
+  .tsystem-pl_15px {
+    padding-left: 15px;
+}
+
+  .tsystem-pr_15px {
+    padding-right: 15px;
+}
+
+  .tsystem-w_fill-parent {
+    width: fill-parent;
+}
+
+  .tsystem-pr_10px {
+    padding-right: 10px;
+}
+
+  .tsystem-max-w_300px {
+    max-width: 300px;
+}
+
+  .tsystem-max-w_auto {
+    max-width: auto;
+}
+
+  .tsystem-mb_5px {
+    margin-bottom: 5px;
+}
+
+  .tsystem-h_45px {
+    height: 45px;
+}
+
+  .tsystem-mb_8px {
+    margin-bottom: 8px;
+}
+
+  .tsystem-mb_20px {
+    margin-bottom: 20px;
+}
+
   .tsystem-bottom_-25px {
     bottom: -25px;
 }
@@ -2087,22 +2219,6 @@
     padding-right: 5px;
 }
 
-  .tsystem-top_-1 {
-    top: -1px;
-}
-
-  .tsystem-right_-1 {
-    right: -1px;
-}
-
-  .tsystem-w_10 {
-    width: 10px;
-}
-
-  .tsystem-h_10 {
-    height: 10px;
-}
-
   .tsystem-h_35px {
     height: 35px;
 }
@@ -2135,10 +2251,6 @@
     height: 14px;
 }
 
-  .tsystem-h_25px {
-    height: 25px;
-}
-
   .tsystem-max-w_200px {
     max-width: 200px;
 }
@@ -2151,10 +2263,6 @@
     margin-right: 15px;
 }
 
-  .tsystem-w_512px {
-    width: 512px;
-}
-
   .tsystem-max-w_1 {
     max-width: 1px;
 }
@@ -2163,6 +2271,10 @@
     width: 1px;
 }
 
+  .tsystem-w_512px {
+    width: 512px;
+}
+
   .tsystem-min-h_36px {
     min-height: 36px;
 }
@@ -2207,6 +2319,10 @@
     min-height: 55px;
 }
 
+  .tsystem-w_full {
+    width: full;
+}
+
   .tsystem-mb_30px {
     margin-bottom: 30px;
 }
@@ -2251,18 +2367,10 @@
     height: fit-content;
 }
 
-  .tsystem-w_600px {
-    width: 600px;
-}
-
   .tsystem-min-h_200px {
     min-height: 200px;
 }
 
-  .tsystem-pr_10px {
-    padding-right: 10px;
-}
-
   .tsystem-pt_4px {
     padding-top: 4px;
 }
@@ -2295,6 +2403,10 @@
     margin-bottom: 10px;
 }
 
+  .tsystem-w_342px {
+    width: 342px;
+}
+
   .tsystem-h_16 {
     height: 16px;
 }
@@ -2343,10 +2455,6 @@
     margin-top: 35px;
 }
 
-  .tsystem-mb_20px {
-    margin-bottom: 20px;
-}
-
   .tsystem-pt_10px {
     padding-top: 10px;
 }
@@ -2379,7 +2487,19 @@
     margin-left: auto;
 }
 
-  .\[\&\[data-haserror\=\'true\'\]\]\:tsystem-bd_\{borderWidths\.lg\}_solid[data-haserror='true'],.\[\&\[data-selected\=\'true\'\]\]\:tsystem-bd_\{borderWidths\.lg\}_solid[data-selected='true'] {
+  .tsystem-w_150 {
+    width: 150px;
+}
+
+  .tsystem-min-w_150 {
+    min-width: 150px;
+}
+
+  .\[\&\[data-haserror\=\'true\'\]\]\:tsystem-bd_\{borderWidths\.lg\}_solid[data-haserror='true'] {
+    border: var(--Tight-borderWidths-lg) solid;
+}
+
+  .\[\&\[data-selected\=\'true\'\]\]\:tsystem-bd_\{borderWidths\.lg\}_solid[data-selected='true'] {
     border: var(--Tight-borderWidths-lg) solid;
 }
 
@@ -2419,7 +2539,12 @@
     border-radius: 50%;
 }
 
-  .\[\&\[data-focused\=\'true\'\]\]\:tsystem-ring_none[data-focused='true'],.\[\&_\.recharts-surface\]\:tsystem-ring_none .recharts-surface {
+  .\[\&\[data-focused\=\'true\'\]\]\:tsystem-ring_none[data-focused='true'] {
+    outline: 2px solid transparent;
+    outline-offset: 2px;
+}
+
+  .\[\&_\.recharts-surface\]\:tsystem-ring_none .recharts-surface {
     outline: 2px solid transparent;
     outline-offset: 2px;
 }
@@ -2440,6 +2565,10 @@
     color: var(--Tight-colors-typography-intent-secondary);
 }
 
+  .\[\&\:disabled\]\:tsystem-cursor_default:disabled {
+    cursor: default;
+}
+
   .\[\&_\.Tight-sub-label\]\:tsystem-c_typography\.base .Tight-sub-label {
     color: var(--Tight-colors-typography-base);
 }
@@ -2496,10 +2625,6 @@
     color: var(--Tight-colors-typography-intent-danger);
 }
 
-  .\[\&\:disabled\]\:tsystem-cursor_default:disabled {
-    cursor: default;
-}
-
   .\[\&\:\:before\]\:tsystem-content_\'\'::before {
     content: '';
 }
@@ -2827,7 +2952,7 @@
     outline-offset: -1px;
 }
 
-  .\[\&\:focus\]\:tsystem-cursor_text:focus {
+  .focus\:tsystem-cursor_text:is(:focus, [data-focus]) {
     cursor: text;
 }
 
@@ -2855,10 +2980,14 @@
     outline-color: var(--Tight-colors-border-layout);
 }
 
-  .\[\&\:focus\]\:tsystem-z_1:focus {
+  .focus\:tsystem-z_1:is(:focus, [data-focus]) {
     z-index: 1;
 }
 
+  .\[\&\:focus\]\:tsystem-cursor_text:focus {
+    cursor: text;
+}
+
   .focusVisible\:tsystem-ring-o_-2px:is(:focus-visible, [data-focus-visible]) {
     outline-offset: -2px;
 }
@@ -2895,6 +3024,14 @@
     bottom: 0;
 }
 
+  .hover\:tsystem-bg-c_surface\.intent\.action\.discrete\.hover:is(:hover, [data-hover]) {
+    background-color: var(--Tight-colors-surface-intent-action-discrete-hover);
+}
+
+  .\[\&\: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);
+}
+
   .\[\&\: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);
 }
@@ -2903,10 +3040,6 @@
     border-color: var(--Tight-colors-border-intent-danger-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);
-}
-
   .\[\&\: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);
 }
@@ -2923,14 +3056,6 @@
     background-color: var(--Tight-colors-surface-intent-action-discrete-active);
 }
 
-  .\[\&\: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);
-}
-
-  .\[\&\: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);
-}
-
   .\[\&\: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);
 }
@@ -2939,6 +3064,14 @@
     fill: var(--Tight-colors-icon-intent-action-active);
 }
 
+  .\[\&\: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);
+}
+
+  .\[\&\: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);
+}
+
   .\[\&\: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);
 }
@@ -3036,6 +3169,14 @@
       gap: 0;
 }
 
+    .sm\:tsystem-place-self_flex-start {
+      place-self: flex-start;
+}
+
+    .sm\:tsystem-place-self_flex-end {
+      place-self: flex-end;
+}
+
     .sm\:tsystem-flex-d_row {
       flex-direction: row;
 }
@@ -3080,6 +3221,30 @@
       font-size: var(--Tight-fontSizes-label-strongSub);
 }
 
+    .sm\:tsystem-grid-tc_300px_auto_300px {
+      grid-template-columns: 300px auto 300px;
+}
+
+    .sm\:tsystem-ai_flex-start {
+      align-items: flex-start;
+}
+
+    .sm\:tsystem-ai_flex-end {
+      align-items: flex-end;
+}
+
+    .sm\:tsystem-trf_none {
+      transform: none;
+}
+
+    .sm\:tsystem-jc_center {
+      justify-content: center;
+}
+
+    .sm\:tsystem-jc_flex-end {
+      justify-content: flex-end;
+}
+
     .sm\:tsystem-left_auto {
       left: auto;
 }
@@ -3100,6 +3265,10 @@
       min-width: 512px;
 }
 
+    .sm\:tsystem-max-w_512px {
+      max-width: 512px;
+}
+
     .sm\:tsystem-w_100dvw {
       width: 100dvw;
 }
@@ -3139,173 +3308,277 @@
     .sm\:tsystem-h_60px {
       height: 60px;
 }
+
+    .sm\:tsystem-max-w_300 {
+      max-width: 300px;
+}
+
+    .sm\:tsystem-min-w_600px {
+      min-width: 600px;
+}
+
+    .sm\:tsystem-max-w_900px {
+      max-width: 900px;
+}
+}
+
+  @media screen and (min-width: 53.125rem) {
+    .md\:tsystem-flex_1_1_0 {
+      flex: 1 1 0;
+}
+
+    .md\:tsystem-flex_0_0_342px {
+      flex: 0 0 342px;
+}
 }
 
   @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);
+}
 }
 
+  @media (hover: hover) and (pointer: fine) {
     .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);
+}
 }
 
+  @media (hover: hover) and (pointer: fine) {
     .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);
+}
 }
 
+  @media (hover: hover) and (pointer: fine) {
     .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);
+}
 }
 
+  @media (hover: hover) and (pointer: fine) {
     .supportHover\:notDisabled\:\[\&_path\]\:tsystem-stk_icon\.intent\.primary\.hover:not(:disabled, [disabled], [data-disabled]) path:hover {
       stroke: var(--Tight-colors-icon-intent-primary-hover);
+}
 }
 
+  @media (hover: hover) and (pointer: fine) {
     .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);
+}
 }
 
+  @media (hover: hover) and (pointer: fine) {
     .supportHover\:notDisabled\:\[\&_path\]\:tsystem-stk_icon\.intent\.success\.hover:not(:disabled, [disabled], [data-disabled]) path:hover {
       stroke: var(--Tight-colors-icon-intent-success-hover);
+}
 }
 
+  @media (hover: hover) and (pointer: fine) {
     .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);
+}
 }
 
+  @media (hover: hover) and (pointer: fine) {
     .supportHover\:notDisabled\:tsystem-bd_\{borderWidths\.lg\}_solid:not(:disabled, [disabled], [data-disabled]):hover {
       border: var(--Tight-borderWidths-lg) solid;
+}
 }
 
+  @media (hover: hover) and (pointer: fine) {
     .supportHover\:notDisabled\:tsystem-bd-c_border\.layout:not(:disabled, [disabled], [data-disabled]):hover {
       border-color: var(--Tight-colors-border-layout);
+}
+}
+
+  @media (hover: hover) and (pointer: fine) {
+    .supportHover\:enabled\:tsystem-bd-c_border\.intent\.action\.hover:enabled:hover {
+      border-color: var(--Tight-colors-border-intent-action-hover);
+}
 }
 
+  @media (hover: hover) and (pointer: fine) {
     .\[\&_\>_\.Tight-text\]\:supportHover\:tsystem-trs_color_100ms_ease-out > .Tight-text:hover {
       transition: color 100ms ease-out;
+}
 }
 
+  @media (hover: hover) and (pointer: fine) {
     .\[\&_path\]\:supportHover\:tsystem-trs_stroke_100ms_ease-out path:hover {
       transition: stroke 100ms ease-out;
+}
 }
 
+  @media (hover: hover) and (pointer: fine) {
     .supportHover\:notDisabled\:tsystem-bd-c_border\.intent\.action\.hover:not(:disabled, [disabled], [data-disabled]):hover {
       border-color: var(--Tight-colors-border-intent-action-hover);
+}
 }
 
+  @media (hover: hover) and (pointer: fine) {
     .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);
 }
 
+  @media (hover: hover) and (pointer: fine) {
     .supportHover\:notDisabled\:tsystem-bd-c_border\.intent\.primary\.hover:not(:disabled, [disabled], [data-disabled]):hover {
       border-color: var(--Tight-colors-border-intent-primary-hover);
+}
 }
 
+  @media (hover: hover) and (pointer: fine) {
     .supportHover\:notDisabled\:tsystem-bd-c_border\.intent\.success\.hover:not(:disabled, [disabled], [data-disabled]):hover {
       border-color: var(--Tight-colors-border-intent-success-hover);
+}
 }
 
+  @media (hover: hover) and (pointer: fine) {
     .supportHover\:notDisabled\:tsystem-bd-c_border\.intent\.warning\.hover:not(:disabled, [disabled], [data-disabled]):hover {
       border-color: var(--Tight-colors-border-intent-warning-hover);
+}
 }
 
+  @media (hover: hover) and (pointer: fine) {
     .\[\&_\.Tight-text\:\:after\]\:supportHover\:tsystem-trs_width_300ms_ease-out .Tight-text::after:hover {
       transition: width 300ms ease-out;
+}
 }
 
+  @media (hover: hover) and (pointer: fine) {
     .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);
+}
 }
 
+  @media (hover: hover) and (pointer: fine) {
+    .supportHover\:enabled\:tsystem-bg-c_surface\.intent\.action\.discrete\.hover:enabled:hover {
+      background-color: var(--Tight-colors-surface-intent-action-discrete-hover);
+}
+}
+
+  @media (hover: hover) and (pointer: fine) {
+    .supportHover\:enabled\:tsystem-c_icon\.intent\.action\.hover:enabled:hover {
+      color: var(--Tight-colors-icon-intent-action-hover);
+}
+}
+
+  @media (hover: hover) and (pointer: fine) {
+    .supportHover\:enabled\:tsystem-fill_icon\.intent\.action\.hover:enabled:hover {
+      fill: var(--Tight-colors-icon-intent-action-hover);
+}
+}
+
+  @media (hover: hover) and (pointer: fine) {
     .supportHover\:\[\&_\.Tight-sub-label\]\:tsystem-c_typography\.intent\.secondary\.hover .Tight-sub-label:hover {
       color: var(--Tight-colors-typography-intent-secondary-hover);
+}
 }
 
+  @media (hover: hover) and (pointer: fine) {
     .supportHover\:\[\&_\.Tight-medium-icon_\>_path\]\:tsystem-stk_icon\.intent\.secondary\.hover .Tight-medium-icon > path:hover {
       stroke: var(--Tight-colors-icon-intent-secondary-hover);
+}
 }
 
+  @media (hover: hover) and (pointer: fine) {
     .supportHover\:\[\&_\.Tight-sub-label\]\:tsystem-c_typography\.intent\.action\.hover .Tight-sub-label:hover {
       color: var(--Tight-colors-typography-intent-action-hover);
+}
 }
 
+  @media (hover: hover) and (pointer: fine) {
     .supportHover\:\[\&_\.Tight-medium-icon_\>_path\]\:tsystem-stk_icon\.intent\.action\.hover .Tight-medium-icon > path:hover {
       stroke: var(--Tight-colors-icon-intent-action-hover);
+}
 }
 
+  @media (hover: hover) and (pointer: fine) {
     .supportHover\:\[\&_\.Tight-sub-label\]\:tsystem-c_typography\.intent\.success\.hover .Tight-sub-label:hover {
       color: var(--Tight-colors-typography-intent-success-hover);
+}
 }
 
+  @media (hover: hover) and (pointer: fine) {
     .supportHover\:\[\&_\.Tight-medium-icon_\>_path\]\:tsystem-stk_icon\.intent\.success\.hover .Tight-medium-icon > path:hover {
       stroke: var(--Tight-colors-icon-intent-success-hover);
+}
 }
 
+  @media (hover: hover) and (pointer: fine) {
     .supportHover\:\[\&_\.Tight-sub-label\]\:tsystem-c_typography\.intent\.warning\.hover .Tight-sub-label:hover {
       color: var(--Tight-colors-typography-intent-warning-hover);
+}
 }
 
+  @media (hover: hover) and (pointer: fine) {
     .supportHover\:\[\&_\.Tight-medium-icon_\>_path\]\:tsystem-stk_icon\.intent\.warning\.hover .Tight-medium-icon > path:hover {
       stroke: var(--Tight-colors-icon-intent-warning-hover);
+}
 }
 
+  @media (hover: hover) and (pointer: fine) {
     .supportHover\:\[\&_\.Tight-sub-label\]\:tsystem-c_typography\.intent\.danger\.hover .Tight-sub-label:hover {
       color: var(--Tight-colors-typography-intent-danger-hover);
+}
 }
 
+  @media (hover: hover) and (pointer: fine) {
     .supportHover\:\[\&_\.Tight-medium-icon_\>_path\]\:tsystem-stk_icon\.intent\.danger\.hover .Tight-medium-icon > path:hover {
       stroke: var(--Tight-colors-icon-intent-danger-hover);
+}
 }
 
+  @media (hover: hover) and (pointer: fine) {
     .supportHover\:notDisabled\:tsystem-bg-c_surface\.intent\.action\.hover:not(:disabled, [disabled], [data-disabled]):hover {
       background-color: var(--Tight-colors-surface-intent-action-hover);
+}
 }
 
+  @media (hover: hover) and (pointer: fine) {
     .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);
-}
-
-    .supportHover\:enabled\:tsystem-fill_icon\.intent\.action\.hover:enabled:hover {
-      fill: var(--Tight-colors-icon-intent-action-hover);
 }
 
+  @media (hover: hover) and (pointer: fine) {
     .supportHover\:notDisabled\:tsystem-bg-c_surface\.intent\.primary\.hover:not(:disabled, [disabled], [data-disabled]):hover {
       background-color: var(--Tight-colors-surface-intent-primary-hover);
+}
 }
 
+  @media (hover: hover) and (pointer: fine) {
     .supportHover\:notDisabled\:tsystem-bg-c_surface\.intent\.success\.hover:not(:disabled, [disabled], [data-disabled]):hover {
       background-color: var(--Tight-colors-surface-intent-success-hover);
+}
 }
 
+  @media (hover: hover) and (pointer: fine) {
     .supportHover\:notDisabled\:tsystem-bg-c_surface\.intent\.warning\.hover:not(:disabled, [disabled], [data-disabled]):hover {
       background-color: var(--Tight-colors-surface-intent-warning-hover);
+}
 }
 
+  @media (hover: hover) and (pointer: fine) {
     .supportHover\:\[\&\[data-is-checked\=\'false\'\]\]\:tsystem-bg-c_surface\.background\.hover[data-is-checked='false']:hover {
       background-color: var(--Tight-colors-surface-background-hover);
+}
 }
 
+  @media (hover: hover) and (pointer: fine) {
     .\[\&\[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);
+}
 }
 
+  @media (hover: hover) and (pointer: fine) {
     .\[\&_\.Tight-medium-icon_\>_path\]\:supportHover\:tsystem-stk_typography\.intent\.action\.hover .Tight-medium-icon > path:hover {
       stroke: var(--Tight-colors-typography-intent-action-hover);
+}
 }
 
+  @media (hover: hover) and (pointer: fine) {
     .\[\&_\.Tight-text\:\:after\]\:supportHover\:tsystem-w_100\% .Tight-text::after:hover {
       width: 100%;
 }
@@ -3326,80 +3599,124 @@
   @media (hover: hover) and (pointer: fine) {
     .supportHover\:tsystem-bg_surface\.intent\.secondary\.hover:hover {
       background: var(--Tight-colors-surface-intent-secondary-hover);
+}
 }
 
+  @media (hover: hover) and (pointer: fine) {
     .supportHover\:tsystem-bg_surface\.intent\.action\.hover:hover {
       background: var(--Tight-colors-surface-intent-action-hover);
+}
 }
 
+  @media (hover: hover) and (pointer: fine) {
     .supportHover\:tsystem-bg_surface\.intent\.success\.hover:hover {
       background: var(--Tight-colors-surface-intent-success-hover);
+}
 }
 
+  @media (hover: hover) and (pointer: fine) {
     .supportHover\:tsystem-bg_surface\.intent\.warning\.hover:hover {
       background: var(--Tight-colors-surface-intent-warning-hover);
+}
 }
 
+  @media (hover: hover) and (pointer: fine) {
     .supportHover\:tsystem-bg_surface\.intent\.danger\.hover:hover {
       background: var(--Tight-colors-surface-intent-danger-hover);
+}
 }
 
+  @media (hover: hover) and (pointer: fine) {
     .supportHover\:tsystem-bd_\{borderWidths\.lg\}_solid:hover {
       border: var(--Tight-borderWidths-lg) solid;
+}
 }
 
+  @media (hover: hover) and (pointer: fine) {
     .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;
+}
 }
 
+  @media (hover: hover) and (pointer: fine) {
     .supportHover\:tsystem-trs_background_100ms_ease-out\,_box-shadow_0ms:hover {
       transition: background 100ms ease-out, box-shadow 0ms;
+}
 }
 
+  @media (hover: hover) and (pointer: fine) {
     .supportHover\:tsystem-trs_color_100ms_ease-out:hover {
       transition: color 100ms ease-out;
+}
 }
 
+  @media (hover: hover) and (pointer: fine) {
     .supportHover\:tsystem-bd-c_border\.intent\.secondary\.hover:hover {
       border-color: var(--Tight-colors-border-intent-secondary-hover);
+}
 }
 
+  @media (hover: hover) and (pointer: fine) {
     .supportHover\:tsystem-bd-c_border\.intent\.action\.hover:hover {
       border-color: var(--Tight-colors-border-intent-action-hover);
+}
 }
 
+  @media (hover: hover) and (pointer: fine) {
     .supportHover\:tsystem-bd-c_border\.intent\.success\.hover:hover {
       border-color: var(--Tight-colors-border-intent-success-hover);
+}
 }
 
+  @media (hover: hover) and (pointer: fine) {
     .supportHover\:tsystem-bd-c_border\.intent\.warning\.hover:hover {
       border-color: var(--Tight-colors-border-intent-warning-hover);
+}
 }
 
+  @media (hover: hover) and (pointer: fine) {
     .supportHover\:tsystem-bd-c_border\.intent\.danger\.hover:hover {
       border-color: var(--Tight-colors-border-intent-danger-hover);
+}
 }
 
+  @media (hover: hover) and (pointer: fine) {
     .supportHover\:tsystem-bg-c_surface\.intent\.action\.hover:hover {
       background-color: var(--Tight-colors-surface-intent-action-hover);
+}
 }
 
+  @media (hover: hover) and (pointer: fine) {
     .supportHover\:tsystem-bg-c_surface\.intent\.action\.discrete\.hover:hover {
       background-color: var(--Tight-colors-surface-intent-action-discrete-hover);
+}
 }
 
+  @media (hover: hover) and (pointer: fine) {
     .supportHover\:tsystem-c_typography\.accent\.action:hover {
       color: var(--Tight-colors-typography-accent-action);
+}
+}
+
+  @media (hover: hover) and (pointer: fine) {
+    .supportHover\:tsystem-cursor_pointer:hover {
+      cursor: pointer;
+}
 }
 
+  @media (hover: hover) and (pointer: fine) {
     .supportHover\:tsystem-bg-c_brand\.primary:hover {
       background-color: var(--Tight-colors-brand-primary);
+}
 }
 
+  @media (hover: hover) and (pointer: fine) {
     .supportHover\:tsystem-c_typography\.contrast:hover {
       color: var(--Tight-colors-typography-contrast);
+}
 }
 
+  @media (hover: hover) and (pointer: fine) {
     .supportHover\:tsystem-c_typography\.intent\.action\.hover:hover {
       color: var(--Tight-colors-typography-intent-action-hover);
 }