@tight-embedded/react 1.2.0 → 1.4.1

package/dist/index.css

@@ -22,31 +22,6 @@
     }
 }
 
-@keyframes fade-in {
-    from {
-        opacity: 0;
-    }
-
-    to {
-        opacity: 100%;
-    }
-}
-
-@keyframes shimmer {
-    to {
-        background-position: 0 0;
-    }
-}
-
-@keyframes spin {
-    from {
-        transform: rotate(0deg);
-    }
-    to {
-        transform: rotate(360deg);
-    }
-}
-
 @layer base {
   :root {
     --made-with-panda: '🐼';
@@ -136,6 +111,10 @@
     --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-animations-slideIn-right: 0.3s ease-out both slide-in-right;
+    --Tight-animations-slideIn-up: 0.3s ease-out both slide-in-up;
+    --Tight-animations-slideOut-right: 0.3s ease-in both slide-out-right;
+    --Tight-animations-slideOut-down: 0.3s ease-in both slide-out-down;
     --Tight-shadows-box-shadow: 0px 10px 30px 0px rgba(24, 36, 40, 0.10);
     --Tight-breakpoints-sm: 640px;
     --Tight-breakpoints-md: 850px;
@@ -228,7 +207,7 @@
     --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-accent-action: var(--Tight-colors-brand-action-strongest);
     --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-weak);
@@ -331,6 +310,72 @@
     --Tight-fontSizes-metric-md: var(--Tight-fontSizes-md);
     --Tight-fontSizes-metric-lg: var(--Tight-fontSizes-xl);
     --Tight-fontSizes-metric-xl: var(--Tight-fontSizes-2xl);
+}
+
+  @keyframes fade-in {
+    from {
+      opacity: 0;
+}
+
+    to {
+      opacity: 1;
+}
+}
+
+  @keyframes shimmer {
+    to {
+      background-position: 0 0;
+}
+}
+
+  @keyframes spin {
+    from {
+      transform: rotate(0deg);
+}
+
+    to {
+      transform: rotate(360deg);
+}
+}
+
+  @keyframes slide-in-right {
+    from {
+      transform: translateX(100%);
+}
+
+    to {
+      transform: translateX(0);
+}
+}
+
+  @keyframes slide-in-up {
+    from {
+      transform: translateY(100%);
+}
+
+    to {
+      transform: translateY(0);
+}
+}
+
+  @keyframes slide-out-right {
+    from {
+      transform: translateX(0);
+}
+
+    to {
+      transform: translateX(100%);
+}
+}
+
+  @keyframes slide-out-down {
+    from {
+      transform: translateY(0);
+}
+
+    to {
+      transform: translateY(100%);
+}
 }
 }
 
@@ -355,10 +400,18 @@
     border: var(--Tight-borderWidths-md) solid transparent;
 }
 
+  .tsystem-p_5px {
+    padding: 5px;
+}
+
   .tsystem-p_15px {
     padding: 15px;
 }
 
+  .tsystem-p_12px_16px {
+    padding: 12px 16px;
+}
+
   .tsystem-bd_1px_solid {
     border: 1px solid;
 }
@@ -367,12 +420,8 @@
     border: var(--Tight-borderWidths-lg) solid var(--Tight-colors-border-layout-weak);
 }
 
-  .tsystem-p_0_15px_15px {
-    padding: 0 15px 15px;
-}
-
-  .tsystem-p_12px_16px {
-    padding: 12px 16px;
+  .tsystem-p_12px_15px {
+    padding: 12px 15px;
 }
 
   .tsystem-p_15 {
@@ -383,6 +432,10 @@
     border: none;
 }
 
+  .tsystem-p_md {
+    padding: md;
+}
+
   .tsystem-inset_0 {
     inset: 0;
 }
@@ -391,18 +444,50 @@
     background: var(--Tight-colors-surface-background);
 }
 
-  .tsystem-p_16px {
-    padding: 16px;
-}
-
   .tsystem-m_32px {
     margin: 32px;
 }
 
+  .tsystem-m_0 {
+    margin: 0;
+}
+
   .tsystem-p_0 {
     padding: 0;
 }
 
+  .tsystem-p_8px {
+    padding: 8px;
+}
+
+  .tsystem-p_16px {
+    padding: 16px;
+}
+
+  .tsystem-p_24px {
+    padding: 24px;
+}
+
+  .tsystem-anim_slideIn\.right {
+    animation: var(--Tight-animations-slideIn-right);
+}
+
+  .tsystem-anim_slideIn\.up {
+    animation: var(--Tight-animations-slideIn-up);
+}
+
+  .tsystem-anim_slideOut\.right {
+    animation: var(--Tight-animations-slideOut-right);
+}
+
+  .tsystem-anim_slideOut\.down {
+    animation: var(--Tight-animations-slideOut-down);
+}
+
+  .tsystem-m_0_0_7px_0 {
+    margin: 0 0 7px 0;
+}
+
   .tsystem-p_4px_5px {
     padding: 4px 5px;
 }
@@ -443,10 +528,6 @@
     padding: 0 25px;
 }
 
-  .tsystem-m_0 {
-    margin: 0;
-}
-
   .tsystem-bd_\{borderWidths\.lg\}_solid {
     border: var(--Tight-borderWidths-lg) solid;
 }
@@ -507,22 +588,42 @@
     margin: 0 auto;
 }
 
+  .tsystem-p_10 {
+    padding: 10px;
+}
+
+  .tsystem-p_20px {
+    padding: 20px;
+}
+
+  .tsystem-p_none {
+    padding: none;
+}
+
+  .tsystem-p_20px_15px_14px_15px {
+    padding: 20px 15px 14px 15px;
+}
+
   .tsystem-m_15px {
     margin: 15px;
 }
 
-  .tsystem-p_10px_20px {
-    padding: 10px 20px;
+  .tsystem-bg_foreground {
+    background: foreground;
 }
 
-  .tsystem-p_8px {
-    padding: 8px;
+  .tsystem-p_10px_8px {
+    padding: 10px 8px;
 }
 
   .tsystem-p_4px_8px {
     padding: 4px 8px;
 }
 
+  .tsystem-p_40px_20px {
+    padding: 40px 20px;
+}
+
   .tsystem-p_15px_15px_0_15px {
     padding: 15px 15px 0 15px;
 }
@@ -531,10 +632,6 @@
     padding: 0 10px;
 }
 
-  .tsystem-bg_none {
-    background: var(--Tight-colors-none);
-}
-
   .tsystem-p_2px {
     padding: 2px;
 }
@@ -543,8 +640,8 @@
     padding: 5px 10px;
 }
 
-  .tsystem-m_0_0_7px_0 {
-    margin: 0 0 7px 0;
+  .tsystem-bg_none {
+    background: var(--Tight-colors-none);
 }
 
   .tsystem-bd_1px_solid_\{colors\.border\.layout\} {
@@ -555,16 +652,40 @@
     padding: 10px 25px 10px 15px;
 }
 
+  .tsystem-p_5 {
+    padding: 5px;
+}
+
+  .tsystem-bd_0 {
+    border: 0;
+}
+
   .tsystem-p_25px {
     padding: 25px;
 }
 
-  .tsystem-bd_\{borderWidths\.lg\}_solid_\{colors\.border\.layout\} {
-    border: var(--Tight-borderWidths-lg) solid var(--Tight-colors-border-layout);
+  .tsystem-p_8px_16px {
+    padding: 8px 16px;
 }
 
-  .tsystem-p_5 {
-    padding: 5px;
+  .tsystem-p_16px_16px_45px_16px {
+    padding: 16px 16px 45px 16px;
+}
+
+  .tsystem-bd_\{borderWidths\.sm\}_solid_\{colors\.border\.layout\} {
+    border: var(--Tight-borderWidths-sm) solid var(--Tight-colors-border-layout);
+}
+
+  .tsystem-bg_brand\.success {
+    background: var(--Tight-colors-brand-success);
+}
+
+  .tsystem-p_2px_6px {
+    padding: 2px 6px;
+}
+
+  .tsystem-bd_\{borderWidths\.lg\}_solid_\{colors\.border\.layout\} {
+    border: var(--Tight-borderWidths-lg) solid var(--Tight-colors-border-layout);
 }
 
   .tsystem-p_6px_0_6px_6px {
@@ -628,18 +749,34 @@
     transition: color 300ms ease-out;
 }
 
-  .tsystem-gap_15px {
-    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-flex_0_0_auto {
+    flex: 0 0 auto;
 }
 
   .tsystem-bdr_lg {
     border-radius: var(--Tight-radii-lg);
 }
 
+  .tsystem-gap_8px {
+    gap: 8px;
+}
+
+  .tsystem-bd-w_lg {
+    border-width: var(--Tight-borderWidths-lg);
+}
+
+  .tsystem-border-style_solid {
+    border-style: solid;
+}
+
+  .tsystem-bd-c_border\.layout\.strong {
+    border-color: var(--Tight-colors-border-layout-strong);
+}
+
+  .tsystem-gap_15px {
+    gap: 15px;
+}
+
   .tsystem-bd-c_border\.intent\.warning {
     border-color: var(--Tight-colors-border-intent-warning);
 }
@@ -676,16 +813,32 @@
     border-radius: 50%;
 }
 
-  .tsystem-gap_15 {
-    gap: 15px;
+  .tsystem-gap_12px {
+    gap: 12px;
 }
 
   .tsystem-bd-w_1 {
     border-width: 1px;
 }
 
-  .tsystem-border-style_solid {
-    border-style: solid;
+  .tsystem-gap_4px {
+    gap: 4px;
+}
+
+  .tsystem-flex_1 {
+    flex: 1 1 0%;
+}
+
+  .tsystem-td_none {
+    text-decoration: none;
+}
+
+  .tsystem-bd-t_\{borderWidths\.lg\}_solid {
+    border-top: var(--Tight-borderWidths-lg) solid;
+}
+
+  .tsystem-gap_15 {
+    gap: 15px;
 }
 
   .tsystem-ov_wrap {
@@ -728,28 +881,20 @@
     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;
 }
 
-  .tsystem-place-items_center {
-    place-items: center;
-}
-
   .tsystem-gap_16px {
     gap: 16px;
 }
 
-  .tsystem-gap_8px {
-    gap: 8px;
+  .tsystem-ov_auto {
+    overflow: auto;
 }
 
-  .tsystem-flex_1 {
-    flex: 1 1 0%;
+  .tsystem-px_8px {
+    padding-inline: 8px;
 }
 
   .tsystem-bg-p_100\%_0 {
@@ -792,8 +937,8 @@
     gap: 9px;
 }
 
-  .tsystem-bd-t_\{colors\.border\.layout\.strong\}_\{borderWidths\.md\}_solid {
-    border-top: var(--Tight-colors-border-layout-strong) var(--Tight-borderWidths-md) solid;
+  .tsystem-bd-c_strong {
+    border-color: strong;
 }
 
   .tsystem-bd-b_\{borderWidths\.md\}_solid {
@@ -816,8 +961,8 @@
     border-right: none;
 }
 
-  .tsystem-bd-c_strong {
-    border-color: strong;
+  .tsystem-bd-t_1px_solid {
+    border-top: 1px solid;
 }
 
   .tsystem-place-self_center {
@@ -828,8 +973,8 @@
     margin-inline: 15px;
 }
 
-  .tsystem-gap_12px {
-    gap: 12px;
+  .tsystem-bd-b_\{borderWidths\.md\}_solid_\{colors\.border\.layout\.weak\} {
+    border-bottom: var(--Tight-borderWidths-md) solid var(--Tight-colors-border-layout-weak);
 }
 
   .tsystem-my_20px {
@@ -840,8 +985,8 @@
     border-width: var(--Tight-borderWidths-sm);
 }
 
-  .tsystem-gap_4px {
-    gap: 4px;
+  .tsystem-bd-t_\{borderWidths\.md\}_solid_\{colors\.border\.layout\.strong\} {
+    border-top: var(--Tight-borderWidths-md) solid var(--Tight-colors-border-layout-strong);
 }
 
   .tsystem-gap_10 {
@@ -852,14 +997,6 @@
     flex: 1 0 0;
 }
 
-  .tsystem-gap_7px {
-    gap: 7px;
-}
-
-  .tsystem-ov_auto {
-    overflow: auto;
-}
-
   .tsystem-gap_16 {
     gap: 16px;
 }
@@ -872,6 +1009,14 @@
     border-left: 1px solid var(--Tight-colors-border-layout);
 }
 
+  .tsystem-bd-l_1px_solid_\{colors\.border\.layout\.strong\} {
+    border-left: 1px solid var(--Tight-colors-border-layout-strong);
+}
+
+  .tsystem-mx_40px {
+    margin-inline: 40px;
+}
+
   .tsystem-tw_nowrap {
     text-wrap: nowrap;
 }
@@ -880,20 +1025,20 @@
     gap: 2px 2px;
 }
 
-  .tsystem-fv_normal {
-    font-variant: normal;
+  .tsystem-gap_7px {
+    gap: 7px;
 }
 
-  .tsystem-td_none {
-    text-decoration: none;
+  .tsystem-bd-w_1px {
+    border-width: 1px;
 }
 
-  .tsystem-text-emphasis_none {
-    text-emphasis: none;
+  .tsystem-fv_normal {
+    font-variant: normal;
 }
 
-  .tsystem-px_8px {
-    padding-inline: 8px;
+  .tsystem-text-emphasis_none {
+    text-emphasis: none;
 }
 
   .tsystem-gap_30px {
@@ -916,14 +1061,6 @@
     gap: 6px;
 }
 
-  .tsystem-bd-l_1px_solid_\{colors\.border\.layout\.strong\} {
-    border-left: 1px solid var(--Tight-colors-border-layout-strong);
-}
-
-  .tsystem-mx_40px {
-    margin-inline: 40px;
-}
-
   .tsystem-d_flex {
     display: flex;
 }
@@ -1008,12 +1145,40 @@
     letter-spacing: 0.66px;
 }
 
+  .tsystem-bx-s_border-box {
+    box-sizing: border-box;
+}
+
+  .tsystem-bg-c_surface\.intent\.action {
+    background-color: var(--Tight-colors-surface-intent-action);
+}
+
   .tsystem-flex-d_column {
     flex-direction: column;
 }
 
-  .tsystem-pos_sticky {
-    position: sticky;
+  .tsystem-ta_right {
+    text-align: right;
+}
+
+  .tsystem-bg-c_surface\.foreground {
+    background-color: var(--Tight-colors-surface-foreground);
+}
+
+  .tsystem-ai_flex-start {
+    align-items: flex-start;
+}
+
+  .tsystem-ai_flex-end {
+    align-items: flex-end;
+}
+
+  .tsystem-flex-d_row {
+    flex-direction: row;
+}
+
+  .tsystem-ta_left {
+    text-align: left;
 }
 
   .tsystem-jc_flex-end {
@@ -1028,30 +1193,14 @@
     justify-content: space-between;
 }
 
-  .tsystem-ai_flex-start {
-    align-items: flex-start;
-}
-
   .tsystem-as_stretch {
     align-self: stretch;
 }
 
-  .tsystem-flex-wrap_wrap {
-    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;
 }
@@ -1064,6 +1213,14 @@
     flex-shrink: 1;
 }
 
+  .tsystem-c_inherit {
+    color: var(--Tight-colors-inherit);
+}
+
+  .tsystem-bg-c_surface\.background {
+    background-color: var(--Tight-colors-surface-background);
+}
+
   .tsystem-wb_break-word {
     word-break: break-word;
 }
@@ -1140,14 +1297,18 @@
     background-color: var(--Tight-colors-overlay);
 }
 
-  .tsystem-bg-c_surface\.background {
-    background-color: var(--Tight-colors-surface-background);
+  .tsystem-d_none {
+    display: none;
 }
 
   .tsystem-flex-g_1 {
     flex-grow: 1;
 }
 
+  .tsystem-c_icon\.accent\.danger {
+    color: var(--Tight-colors-icon-accent-danger);
+}
+
   .tsystem-stk_currentColor {
     stroke: var(--Tight-colors-currentColor);
 }
@@ -1228,6 +1389,10 @@
     fill: var(--Tight-colors-transparent);
 }
 
+  .tsystem-obj-f_contain {
+    object-fit: contain;
+}
+
   .tsystem-d_inline-flex {
     display: inline-flex;
 }
@@ -1236,10 +1401,6 @@
     color: var(--Tight-colors-typography-intent-action);
 }
 
-  .tsystem-bg-c_surface\.intent\.action {
-    background-color: var(--Tight-colors-surface-intent-action);
-}
-
   .tsystem-c_typography\.intent\.danger {
     color: var(--Tight-colors-typography-intent-danger);
 }
@@ -1288,6 +1449,30 @@
     overflow-wrap: break-word;
 }
 
+  .tsystem-fw_label\.strong {
+    font-weight: var(--Tight-fontWeights-label-strong);
+}
+
+  .tsystem-fs_lg {
+    font-size: var(--Tight-fontSizes-lg);
+}
+
+  .tsystem-ff_label {
+    font-family: var(--Tight-fonts-label);
+}
+
+  .tsystem-c_typography\.label\.strong {
+    color: var(--Tight-colors-typography-label-strong);
+}
+
+  .tsystem-lh_18px {
+    line-height: 18px;
+}
+
+  .tsystem-ls_0\.84px {
+    letter-spacing: 0.84px;
+}
+
   .tsystem-bg-c_border\.layout\.strong {
     background-color: var(--Tight-colors-border-layout-strong);
 }
@@ -1334,6 +1519,10 @@
     border-top-right-radius: var(--Tight-radii-lg);
 }
 
+  .tsystem-flex-wrap_wrap {
+    flex-wrap: wrap;
+}
+
   .tsystem-c_icon\.intent\.primary {
     color: var(--Tight-colors-icon-intent-primary);
 }
@@ -1346,30 +1535,14 @@
     font-weight: var(--Tight-fontWeights-lg);
 }
 
-  .tsystem-ls_0\.84px {
-    letter-spacing: 0.84px;
-}
-
   .tsystem-lh_16px {
     line-height: 16px;
 }
 
-  .tsystem-ff_label {
-    font-family: var(--Tight-fonts-label);
-}
-
   .tsystem-fw_label {
     font-weight: var(--Tight-fontWeights-label);
 }
 
-  .tsystem-fs_lg {
-    font-size: var(--Tight-fontSizes-lg);
-}
-
-  .tsystem-lh_18px {
-    line-height: 18px;
-}
-
   .tsystem-c_typography\.label {
     color: var(--Tight-colors-typography-label);
 }
@@ -1378,10 +1551,6 @@
     white-space: normal;
 }
 
-  .tsystem-ta_left {
-    text-align: left;
-}
-
   .tsystem-ta_start {
     text-align: start;
 }
@@ -1406,10 +1575,6 @@
     color: var(--Tight-colors-typography-base-weak);
 }
 
-  .tsystem-bx-s_border-box {
-    box-sizing: border-box;
-}
-
   .tsystem-trf_rotate\(-20deg\) {
     transform: rotate(-20deg);
 }
@@ -1438,14 +1603,6 @@
     font-family: var(--Tight-fonts-body);
 }
 
-  .tsystem-fw_label\.strong {
-    font-weight: var(--Tight-fontWeights-label-strong);
-}
-
-  .tsystem-c_typography\.label\.strong {
-    color: var(--Tight-colors-typography-label-strong);
-}
-
   .tsystem-fw_label\.strongSub {
     font-weight: var(--Tight-fontWeights-label-strongSub);
 }
@@ -1546,10 +1703,27 @@
     color: var(--Tight-colors-money-positive);
 }
 
+  .tsystem-us_none {
+    -webkit-user-select: none;
+    user-select: none;
+}
+
   .tsystem-bd-be-w_var\(--thickness\) {
     border-block-end-width: var(--thickness);
 }
 
+  .tsystem-d_block {
+    display: block;
+}
+
+  .tsystem-grid-tc_1fr {
+    grid-template-columns: 1fr;
+}
+
+  .tsystem-grid-tc_300px_auto_175px {
+    grid-template-columns: 300px auto 175px;
+}
+
   .tsystem-grid-tc_100\% {
     grid-template-columns: 100%;
 }
@@ -1570,11 +1744,6 @@
     line-height: 26px;
 }
 
-  .tsystem-us_none {
-    -webkit-user-select: none;
-    user-select: none;
-}
-
   .tsystem-scr-bar_hidden {
     -ms-overflow-style: none;
     scrollbar-width: none;
@@ -1584,6 +1753,10 @@
     display: none;
 }
 
+  .tsystem-pos_sticky {
+    position: sticky;
+}
+
   .tsystem-stk_icon\.base\.weak {
     stroke: var(--Tight-colors-icon-base-weak);
 }
@@ -1596,14 +1769,14 @@
     stroke: var(--Tight-colors-icon-base);
 }
 
-  .tsystem-c_icon\.accent\.danger {
-    color: var(--Tight-colors-icon-accent-danger);
-}
-
   .tsystem-bg-c_brand\.secondary {
     background-color: var(--Tight-colors-brand-secondary);
 }
 
+  .tsystem-c_var\(--Tight-colors-brand-secondary\) {
+    color: var(--Tight-colors-brand-secondary);
+}
+
   .tsystem-bdr-r_0 {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
@@ -1614,6 +1787,10 @@
     border-bottom-left-radius: 0;
 }
 
+  .tsystem-jc_right {
+    justify-content: right;
+}
+
   .tsystem-bg-c_foreground {
     background-color: foreground;
 }
@@ -1679,14 +1856,6 @@
     font-size: 16px;
 }
 
-  .tsystem-d_block {
-    display: block;
-}
-
-  .tsystem-bx-sh_none {
-    box-shadow: none;
-}
-
   .tsystem-bg-c_money\.positive\.weak {
     background-color: var(--Tight-colors-money-positive-weak);
 }
@@ -1703,10 +1872,46 @@
     stroke-dasharray: 0;
 }
 
+  .tsystem-stk_var\(--Tight-colors-border-layout\) {
+    stroke: var(--Tight-colors-border-layout);
+}
+
+  .tsystem-fill_var\(--Tight-colors-money-positive\) {
+    fill: var(--Tight-colors-money-positive);
+}
+
+  .tsystem-fill_var\(--Tight-colors-money-positive-weak\) {
+    fill: var(--Tight-colors-money-positive-weak);
+}
+
+  .tsystem-fill_var\(--Tight-colors-money-negative\) {
+    fill: var(--Tight-colors-money-negative);
+}
+
+  .tsystem-fill_var\(--Tight-colors-money-negative-weak\) {
+    fill: var(--Tight-colors-money-negative-weak);
+}
+
+  .tsystem-fill_var\(--Tight-colors-border-layout\) {
+    fill: var(--Tight-colors-border-layout);
+}
+
   .tsystem-y_0 {
     y: 0;
 }
 
+  .tsystem-stk_var\(--Tight-colors-border-layout-strong\) {
+    stroke: var(--Tight-colors-border-layout-strong);
+}
+
+  .tsystem-fill_var\(--Tight-colors-money\) {
+    fill: var(--Tight-colors-money);
+}
+
+  .tsystem-stk_var\(--Tight-colors-money\) {
+    stroke: var(--Tight-colors-money);
+}
+
   .tsystem-stk-w_1 {
     stroke-width: 1;
 }
@@ -1723,18 +1928,10 @@
     z-index: 100;
 }
 
-  .tsystem-jc_right {
-    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);
 }
@@ -1743,46 +1940,42 @@
     max-width: 100%;
 }
 
-  .tsystem-mt_15px {
-    margin-top: 15px;
-}
-
-  .tsystem-ov-y_auto {
-    overflow-y: auto;
+  .tsystem-w_50px {
+    width: 50px;
 }
 
-  .tsystem-pt_20px {
-    padding-top: 20px;
+  .tsystem-h_50px {
+    height: 50px;
 }
 
-  .tsystem-pb_20px {
-    padding-bottom: 20px;
+  .tsystem-w_100\% {
+    width: 100%;
 }
 
-  .tsystem-bottom_0 {
-    bottom: 0;
+  .tsystem-w_sm {
+    width: sm;
 }
 
   .tsystem-w_202px {
     width: 202px;
 }
 
-  .tsystem-min-w_300px {
-    min-width: 300px;
+  .tsystem-min-w_350px {
+    min-width: 350px;
 }
 
   .tsystem-min-w_200px {
     min-width: 200px;
 }
 
-  .tsystem-w_100\% {
-    width: 100%;
-}
-
   .tsystem-h_72 {
     height: 72px;
 }
 
+  .tsystem-min-w_300px {
+    min-width: 300px;
+}
+
   .tsystem-w_20px {
     width: 20px;
 }
@@ -1807,6 +2000,10 @@
     min-width: 0;
 }
 
+  .tsystem-max-w_325 {
+    max-width: 325px;
+}
+
   .tsystem-min-h_0 {
     min-height: 0;
 }
@@ -1815,12 +2012,12 @@
     height: auto;
 }
 
-  .tsystem-mb_18px {
-    margin-bottom: 18px;
+  .tsystem-bd-t-c_border\.layout {
+    border-top-color: var(--Tight-colors-border-layout);
 }
 
-  .tsystem-max-w_325 {
-    max-width: 325px;
+  .tsystem-mb_18px {
+    margin-bottom: 18px;
 }
 
   .tsystem-top_-1 {
@@ -1847,6 +2044,10 @@
     height: 25px;
 }
 
+  .tsystem-ov-y_auto {
+    overflow-y: auto;
+}
+
   .tsystem-ov-x_hidden {
     overflow-x: hidden;
 }
@@ -1923,6 +2124,26 @@
     max-width: 360px;
 }
 
+  .tsystem-max-w_600px {
+    max-width: 600px;
+}
+
+  .tsystem-min-w_400px {
+    min-width: 400px;
+}
+
+  .tsystem-min-w_100dvw {
+    min-width: 100dvw;
+}
+
+  .tsystem-max-w_100dvw {
+    max-width: 100dvw;
+}
+
+  .tsystem-h_100dvh {
+    height: 100dvh;
+}
+
   .tsystem-right_0 {
     right: 0;
 }
@@ -1935,6 +2156,10 @@
     left: 0;
 }
 
+  .tsystem-bottom_0 {
+    bottom: 0;
+}
+
   .tsystem-max-h_100\% {
     max-height: 100%;
 }
@@ -1963,20 +2188,12 @@
     width: 100dvw;
 }
 
-  .tsystem-h_100dvh {
-    height: 100dvh;
-}
-
-  .tsystem-min-w_100dvw {
-    min-width: 100dvw;
-}
-
   .tsystem-max-h_100dvh {
     max-height: 100dvh;
 }
 
-  .tsystem-max-w_100dvw {
-    max-width: 100dvw;
+  .tsystem-min-h_36px {
+    min-height: 36px;
 }
 
   .tsystem-w_24 {
@@ -2051,12 +2268,16 @@
     height: 80px;
 }
 
-  .tsystem-w_max-content {
-    width: max-content;
+  .tsystem-max-w_900px {
+    max-width: 900px;
 }
 
-  .tsystem-h_50px {
-    height: 50px;
+  .tsystem-min-w_360px {
+    min-width: 360px;
+}
+
+  .tsystem-w_max-content {
+    width: max-content;
 }
 
   .tsystem-min-w_fit-content {
@@ -2143,6 +2364,14 @@
     height: 250px;
 }
 
+  .tsystem-pb_20px {
+    padding-bottom: 20px;
+}
+
+  .tsystem-pt_20px {
+    padding-top: 20px;
+}
+
   .tsystem-pb_14px {
     padding-bottom: 14px;
 }
@@ -2155,6 +2384,26 @@
     padding-right: 15px;
 }
 
+  .tsystem-pt_10px {
+    padding-top: 10px;
+}
+
+  .tsystem-min-h_200px {
+    min-height: 200px;
+}
+
+  .tsystem-h_fit-content {
+    height: fit-content;
+}
+
+  .tsystem-mt_15px {
+    margin-top: 15px;
+}
+
+  .tsystem-mb_15px {
+    margin-bottom: 15px;
+}
+
   .tsystem-w_fill-parent {
     width: fill-parent;
 }
@@ -2179,6 +2428,18 @@
     height: 45px;
 }
 
+  .tsystem-h_12px {
+    height: 12px;
+}
+
+  .tsystem-w_150px {
+    width: 150px;
+}
+
+  .tsystem-h_16px {
+    height: 16px;
+}
+
   .tsystem-mb_8px {
     margin-bottom: 8px;
 }
@@ -2203,6 +2464,10 @@
     width: 26px;
 }
 
+  .tsystem-mt_0px {
+    margin-top: 0px;
+}
+
   .tsystem-max-w_1440 {
     max-width: 1440px;
 }
@@ -2223,26 +2488,6 @@
     height: 35px;
 }
 
-  .tsystem-w_17px {
-    width: 17px;
-}
-
-  .tsystem-h_17px {
-    height: 17px;
-}
-
-  .tsystem-pl_2px {
-    padding-left: 2px;
-}
-
-  .tsystem-pr_2px {
-    padding-right: 2px;
-}
-
-  .tsystem-pb_5px {
-    padding-bottom: 5px;
-}
-
   .tsystem-w_14px {
     width: 14px;
 }
@@ -2263,20 +2508,8 @@
     margin-right: 15px;
 }
 
-  .tsystem-max-w_1 {
-    max-width: 1px;
-}
-
-  .tsystem-w_1 {
-    width: 1px;
-}
-
-  .tsystem-w_512px {
-    width: 512px;
-}
-
-  .tsystem-min-h_36px {
-    min-height: 36px;
+  .tsystem-h_17px {
+    height: 17px;
 }
 
   .tsystem-mb_10px {
@@ -2287,10 +2520,6 @@
     width: 200px;
 }
 
-  .tsystem-h_16px {
-    height: 16px;
-}
-
   .tsystem-h_52px {
     height: 52px;
 }
@@ -2319,6 +2548,26 @@
     min-height: 55px;
 }
 
+  .tsystem-max-w_1 {
+    max-width: 1px;
+}
+
+  .tsystem-w_1 {
+    width: 1px;
+}
+
+  .tsystem-w_70px {
+    width: 70px;
+}
+
+  .tsystem-h_24px {
+    height: 24px;
+}
+
+  .tsystem-mt_35px {
+    margin-top: 35px;
+}
+
   .tsystem-w_full {
     width: full;
 }
@@ -2347,6 +2596,10 @@
     max-height: 150px;
 }
 
+  .tsystem-max-h_49px {
+    max-height: 49px;
+}
+
   .tsystem-w_325px {
     width: 325px;
 }
@@ -2359,18 +2612,6 @@
     min-width: 325px;
 }
 
-  .tsystem-min-h_35px {
-    min-height: 35px;
-}
-
-  .tsystem-h_fit-content {
-    height: fit-content;
-}
-
-  .tsystem-min-h_200px {
-    min-height: 200px;
-}
-
   .tsystem-pt_4px {
     padding-top: 4px;
 }
@@ -2407,6 +2648,10 @@
     width: 342px;
 }
 
+  .tsystem-w_512px {
+    width: 512px;
+}
+
   .tsystem-h_16 {
     height: 16px;
 }
@@ -2447,16 +2692,8 @@
     max-width: 420px;
 }
 
-  .tsystem-h_39px {
-    height: 39px;
-}
-
-  .tsystem-mt_35px {
-    margin-top: 35px;
-}
-
-  .tsystem-pt_10px {
-    padding-top: 10px;
+  .tsystem-pt_50px {
+    padding-top: 50px;
 }
 
   .tsystem-pb_8px {
@@ -2569,6 +2806,14 @@
     cursor: default;
 }
 
+  .\[\&_path\]\:tsystem-stk_icon\.base path {
+    stroke: var(--Tight-colors-icon-base);
+}
+
+  .\[\&_path\]\:tsystem-stk_icon\.accent\.danger path {
+    stroke: var(--Tight-colors-icon-accent-danger);
+}
+
   .\[\&_\.Tight-sub-label\]\:tsystem-c_typography\.base .Tight-sub-label {
     color: var(--Tight-colors-typography-base);
 }
@@ -2689,14 +2934,6 @@
     pointer-events: none;
 }
 
-  .\[\&_path\]\:tsystem-stk_icon\.base path {
-    stroke: var(--Tight-colors-icon-base);
-}
-
-  .\[\&_path\]\:tsystem-stk_icon\.accent\.danger path {
-    stroke: var(--Tight-colors-icon-accent-danger);
-}
-
   .disabled\:tsystem-cursor_default:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
     cursor: default;
 }
@@ -2717,6 +2954,10 @@
     background-color: var(--Tight-colors-brand-primary);
 }
 
+  .placeholder\:tsystem-c_typography\.label\.sub::placeholder,.placeholder\:tsystem-c_typography\.label\.sub[data-placeholder] {
+    color: var(--Tight-colors-typography-label-sub);
+}
+
   .\[\&\[data-focused\=\'true\'\]\]\:tsystem-bx-sh_none[data-focused='true'] {
     box-shadow: none;
 }
@@ -2886,6 +3127,10 @@
     outline: 4px solid;
 }
 
+  .focusVisible\:tsystem-ring_4px_solid:is(:focus-visible, [data-focus-visible]) {
+    outline: 4px solid;
+}
+
   .focus\:tsystem-ring_none:is(:focus, [data-focus]) {
     outline: 2px solid transparent;
     outline-offset: 2px;
@@ -2932,10 +3177,6 @@
     outline: 4px solid;
 }
 
-  .focusVisible\:tsystem-ring_4px_solid:is(:focus-visible, [data-focus-visible]) {
-    outline: 4px solid;
-}
-
   .\[\&\:has\(button\:focus-visible\)\]\:tsystem-ring_4px_solid:has(button:focus-visible) {
     outline: 4px solid;
 }
@@ -2952,6 +3193,10 @@
     outline-offset: -1px;
 }
 
+  .focusVisible\:tsystem-ring-c_border\.layout:is(:focus-visible, [data-focus-visible]) {
+    outline-color: var(--Tight-colors-border-layout);
+}
+
   .focus\:tsystem-cursor_text:is(:focus, [data-focus]) {
     cursor: text;
 }
@@ -2992,10 +3237,6 @@
     outline-offset: -2px;
 }
 
-  .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);
 }
@@ -3024,6 +3265,10 @@
     bottom: 0;
 }
 
+  .hover\:tsystem-bg-c_surface\.intent\.action\.hover:is(:hover, [data-hover]) {
+    background-color: var(--Tight-colors-surface-intent-action-hover);
+}
+
   .hover\:tsystem-bg-c_surface\.intent\.action\.discrete\.hover:is(:hover, [data-hover]) {
     background-color: var(--Tight-colors-surface-intent-action-discrete-hover);
 }
@@ -3064,6 +3309,10 @@
     fill: var(--Tight-colors-icon-intent-action-active);
 }
 
+  .active\:tsystem-bg-c_surface\.intent\.action\.discrete\.active:is(:active, [data-active]) {
+    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);
 }
@@ -3161,10 +3410,26 @@
 }
 
   @media screen and (min-width: 40rem) {
+    .sm\:tsystem-m_32px {
+      margin: 32px;
+}
+
     .sm\:tsystem-p_4px {
       padding: 4px;
 }
 
+    .sm\:tsystem-p_10px {
+      padding: 10px;
+}
+
+    .sm\:tsystem-bd_\{borderWidths\.md\}_solid_\{colors\.border\.layout\} {
+      border: var(--Tight-borderWidths-md) solid var(--Tight-colors-border-layout);
+}
+
+    .sm\:tsystem-bd-c_transparent {
+      border-color: var(--Tight-colors-transparent);
+}
+
     .sm\:tsystem-gap_0 {
       gap: 0;
 }
@@ -3177,22 +3442,22 @@
       place-self: flex-end;
 }
 
-    .sm\:tsystem-flex-d_row {
-      flex-direction: row;
-}
-
-    .sm\:tsystem-ai_center {
-      align-items: center;
+    .sm\:tsystem-bg-c_surface\.intent\.action\.discrete {
+      background-color: var(--Tight-colors-surface-intent-action-discrete);
 }
 
-    .sm\:tsystem-fs_label {
-      font-size: var(--Tight-fontSizes-label);
+    .sm\:tsystem-fs_label\.strong {
+      font-size: var(--Tight-fontSizes-label-strong);
 }
 
     .sm\:tsystem-lh_16px {
       line-height: 16px;
 }
 
+    .sm\:tsystem-fs_label {
+      font-size: var(--Tight-fontSizes-label);
+}
+
     .sm\:tsystem-fs_label\.sub {
       font-size: var(--Tight-fontSizes-label-sub);
 }
@@ -3213,14 +3478,22 @@
       font-size: var(--Tight-fontSizes-body);
 }
 
-    .sm\:tsystem-fs_label\.strong {
-      font-size: var(--Tight-fontSizes-label-strong);
-}
-
     .sm\:tsystem-fs_label\.strongSub {
       font-size: var(--Tight-fontSizes-label-strongSub);
 }
 
+    .sm\:tsystem-d_none {
+      display: none;
+}
+
+    .sm\:tsystem-grid-tc_300px_auto_175px {
+      grid-template-columns: 300px auto 175px;
+}
+
+    .sm\:tsystem-d_block {
+      display: block;
+}
+
     .sm\:tsystem-grid-tc_300px_auto_300px {
       grid-template-columns: 300px auto 300px;
 }
@@ -3245,6 +3518,30 @@
       justify-content: flex-end;
 }
 
+    .sm\:tsystem-bx-sh_none {
+      box-shadow: none;
+}
+
+    .sm\:tsystem-flex-sh_0 {
+      flex-shrink: 0;
+}
+
+    .sm\:tsystem-ta_start {
+      text-align: start;
+}
+
+    .sm\:tsystem-min-w_600px {
+      min-width: 600px;
+}
+
+    .sm\:tsystem-max-w_900px {
+      max-width: 900px;
+}
+
+    .sm\:tsystem-h_auto {
+      height: auto;
+}
+
     .sm\:tsystem-left_auto {
       left: auto;
 }
@@ -3313,12 +3610,32 @@
       max-width: 300px;
 }
 
-    .sm\:tsystem-min-w_600px {
-      min-width: 600px;
+    .sm\:tsystem-h_39px {
+      height: 39px;
 }
 
-    .sm\:tsystem-max-w_900px {
-      max-width: 900px;
+    .sm\:tsystem-min-h_35px {
+      min-height: 35px;
+}
+
+    .sm\:tsystem-h_fit-content {
+      height: fit-content;
+}
+
+    .sm\:tsystem-min-w_360px {
+      min-width: 360px;
+}
+
+    .sm\:tsystem-max-w_392px {
+      max-width: 392px;
+}
+}
+
+  @media screen and (min-width: 40rem) {
+    @media (hover: hover) and (pointer: fine) {
+      .supportHover\:sm\:tsystem-bg-c_surface\.intent\.action\.discrete\.hover:hover {
+        background-color: var(--Tight-colors-surface-intent-action-discrete-hover);
+}
 }
 }
 
@@ -3330,6 +3647,30 @@
     .md\:tsystem-flex_0_0_342px {
       flex: 0 0 342px;
 }
+
+    .md\:tsystem-d_grid {
+      display: grid;
+}
+
+    .md\:tsystem-jc_center {
+      justify-content: center;
+}
+
+    .md\:tsystem-jc_flex-end {
+      justify-content: flex-end;
+}
+
+    .md\:tsystem-flex-d_column {
+      flex-direction: column;
+}
+
+    .md\:tsystem-ai_start {
+      align-items: start;
+}
+
+    .md\:tsystem-min-w_800px {
+      min-width: 800px;
+}
 }
 
   @media (hover: hover) and (pointer: fine) {
@@ -3681,8 +4022,8 @@
 }
 
   @media (hover: hover) and (pointer: fine) {
-    .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:hover {
+      background-color: var(--Tight-colors-surface-intent-action);
 }
 }
 
@@ -3690,6 +4031,12 @@
     .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-bg-c_surface\.intent\.action\.hover:hover {
+      background-color: var(--Tight-colors-surface-intent-action-hover);
+}
 }
 
   @media (hover: hover) and (pointer: fine) {