@aggc/ui 0.8.0 → 1.0.0

package/dist/ui.css

@@ -91,11 +91,22 @@ body {
 @keyframes modalIn {
   from {
     opacity: 0;
-    transform: scale(0.95) translateY(12px);
+    transform: translateY(8px) scale(0.97);
   }
   to {
     opacity: 1;
-    transform: scale(1) translateY(0);
+    transform: translateY(0);
+  }
+}
+
+@keyframes modalSlideUp {
+  from {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
   }
 }
 
@@ -1008,6 +1019,50 @@ body {
 
 @layer utilities{
 
+  .bd_1px_solid {
+    border: 1px solid;
+}
+
+  .bg_bg\.cardAlt {
+    background: var(--colors-bg-card-alt);
+}
+
+  .bd_none {
+    border: var(--borders-none);
+}
+
+  .bg_transparent {
+    background: var(--colors-transparent);
+}
+
+  .bg_bg\.card {
+    background: var(--colors-bg-card);
+}
+
+  .p_0 {
+    padding: var(--spacing-0);
+}
+
+  .font_inherit {
+    font: inherit;
+}
+
+  .bg_bg\.menu {
+    background: var(--colors-bg-menu);
+}
+
+  .bg_border\.soft {
+    background: var(--colors-border-soft);
+}
+
+  .bg_bg\.accentSoft {
+    background: var(--colors-bg-accent-soft);
+}
+
+  .bg_bg\.canvas {
+    background: var(--colors-bg-canvas);
+}
+
   .p_5 {
     padding: var(--spacing-5);
 }
@@ -1020,10 +1075,6 @@ body {
     background: var(--colors-result-fail-bg);
 }
 
-  .bg_bg\.accentSoft {
-    background: var(--colors-bg-accent-soft);
-}
-
   .bg_badge\.warningBg {
     background: var(--colors-badge-warning-bg);
 }
@@ -1084,24 +1135,12 @@ body {
     animation: fadeIn 160ms cubic-bezier(0.16, 1, 0.3, 1);
 }
 
-  .bd_none {
-    border: var(--borders-none);
-}
-
-  .bg_transparent {
-    background: var(--colors-transparent);
-}
-
-  .bg_bg\.menu {
-    background: var(--colors-bg-menu);
-}
-
-  .p_0 {
-    padding: var(--spacing-0);
+  .p_4 {
+    padding: var(--spacing-4);
 }
 
-  .anim_modalIn_240ms_cubic-bezier\(0\.16\,_1\,_0\.3\,_1\) {
-    animation: modalIn 240ms cubic-bezier(0.16, 1, 0.3, 1);
+  .anim_modalSlideUp_300ms_cubic-bezier\(0\.16\,_1\,_0\.3\,_1\)_backwards {
+    animation: modalSlideUp 300ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
 }
 
   .p_1 {
@@ -1112,22 +1151,6 @@ body {
     background: var(--colors-bg-card-strong);
 }
 
-  .bg_bg\.cardAlt {
-    background: var(--colors-bg-card-alt);
-}
-
-  .p_4 {
-    padding: var(--spacing-4);
-}
-
-  .bg_bg\.card {
-    background: var(--colors-bg-card);
-}
-
-  .bg_bg\.canvas {
-    background: var(--colors-bg-canvas);
-}
-
   .bg_bg\.soft {
     background: bg.soft;
 }
@@ -1148,112 +1171,184 @@ body {
     padding: var(--spacing-1\.5);
 }
 
-  .bd-w_1px {
-    border-width: 1px;
+  .gap_3 {
+    gap: var(--spacing-3);
 }
 
-  .bd-c_result\.okBorder {
-    border-color: var(--colors-result-ok-border);
+  .flex_1 {
+    flex: 1 1 0%;
 }
 
-  .bd-c_result\.failBorder {
-    border-color: var(--colors-result-fail-border);
+  .py_2\.5 {
+    padding-block: var(--spacing-2\.5);
+}
+
+  .bdr_xl {
+    border-radius: var(--radii-xl);
+}
+
+  .bd-c_border\.soft {
+    border-color: var(--colors-border-soft);
+}
+
+  .trs_border-color_160ms_ease-out\,_box-shadow_160ms_ease-out {
+    transition: border-color 160ms ease-out, box-shadow 160ms ease-out;
 }
 
   .bdr_full {
     border-radius: var(--radii-full);
 }
 
-  .gap_1\.5 {
-    gap: var(--spacing-1\.5);
+  .trs_color_160ms_ease-out\,_background-color_160ms_ease-out {
+    transition: color 160ms ease-out, background-color 160ms ease-out;
 }
 
-  .gap_4 {
-    gap: var(--spacing-4);
+  .gap_2 {
+    gap: var(--spacing-2);
 }
 
-  .gap_3 {
-    gap: var(--spacing-3);
+  .bdr_lg {
+    border-radius: var(--radii-lg);
 }
 
-  .ovs-b_contain {
-    overscroll-behavior: contain;
+  .ov_hidden {
+    overflow: hidden;
 }
 
-  .px_2\.5 {
-    padding-inline: var(--spacing-2\.5);
+  .px_4 {
+    padding-inline: var(--spacing-4);
 }
 
-  .py_1 {
-    padding-block: var(--spacing-1);
+  .trs_background-color_160ms_ease-out {
+    transition: background-color 160ms ease-out;
 }
 
-  .bd-c_badge\.successBorder {
-    border-color: var(--colors-badge-success-border);
+  .gap_1 {
+    gap: var(--spacing-1);
 }
 
-  .bd-c_badge\.warningBorder {
-    border-color: var(--colors-badge-warning-border);
+  .trs_color_160ms_ease-out {
+    transition: color 160ms ease-out;
 }
 
-  .bd-c_badge\.infoBorder {
-    border-color: var(--colors-badge-info-border);
+  .bdr_sm {
+    border-radius: var(--radii-sm);
 }
 
-  .bd-c_badge\.neutralBorder {
-    border-color: var(--colors-badge-neutral-border);
+  .bd-c_border\.default {
+    border-color: var(--colors-border-default);
 }
 
-  .bd-c_badge\.dangerBorder {
-    border-color: var(--colors-badge-danger-border);
+  .trs_background-color_160ms_ease\,_border-color_160ms_ease {
+    transition: background-color 160ms ease, border-color 160ms ease;
 }
 
-  .ov_hidden {
-    overflow: hidden;
+  .bdr_md {
+    border-radius: var(--radii-md);
 }
 
-  .trs_background-color_160ms_cubic-bezier\(0\.25\,_0\.1\,_0\.25\,_1\) {
-    transition: background-color 160ms cubic-bezier(0.25, 0.1, 0.25, 1);
+  .trs_background-color_160ms_ease-out\,_color_160ms_ease-out {
+    transition: background-color 160ms ease-out, color 160ms ease-out;
 }
 
-  .bdr_lg {
-    border-radius: var(--radii-lg);
+  .py_1 {
+    padding-block: var(--spacing-1);
 }
 
-  .gap_2 {
-    gap: var(--spacing-2);
+  .px_3 {
+    padding-inline: var(--spacing-3);
 }
 
-  .px_4 {
-    padding-inline: var(--spacing-4);
+  .mx_2 {
+    margin-inline: var(--spacing-2);
+}
+
+  .my_1 {
+    margin-block: var(--spacing-1);
 }
 
   .py_3 {
     padding-block: var(--spacing-3);
 }
 
-  .bdr_xl {
-    border-radius: var(--radii-xl);
+  .trs_background-color_120ms_ease-out\,_border-color_120ms_ease-out {
+    transition: background-color 120ms ease-out, border-color 120ms ease-out;
 }
 
-  .py_3\.5 {
-    padding-block: var(--spacing-3\.5);
+  .bd-c_border\.accent {
+    border-color: var(--colors-border-accent);
 }
 
-  .trs_border-color_160ms_cubic-bezier\(0\.25\,_0\.1\,_0\.25\,_1\)\,_background-color_160ms_cubic-bezier\(0\.25\,_0\.1\,_0\.25\,_1\)\,_box-shadow_160ms_cubic-bezier\(0\.25\,_0\.1\,_0\.25\,_1\) {
-    transition: border-color 160ms cubic-bezier(0.25, 0.1, 0.25, 1), background-color 160ms cubic-bezier(0.25, 0.1, 0.25, 1), box-shadow 160ms cubic-bezier(0.25, 0.1, 0.25, 1);
+  .py_16 {
+    padding-block: var(--spacing-16);
 }
 
-  .bd-c_border\.accent {
-    border-color: var(--colors-border-accent);
+  .gap_4 {
+    gap: var(--spacing-4);
 }
 
-  .bd-c_border\.default {
-    border-color: var(--colors-border-default);
+  .py_1\.5 {
+    padding-block: var(--spacing-1\.5);
 }
 
-  .bdr_md {
-    border-radius: var(--radii-md);
+  .trs_background-color_160ms_ease\,_color_160ms_ease {
+    transition: background-color 160ms ease, color 160ms ease;
+}
+
+  .bd-w_1px {
+    border-width: 1px;
+}
+
+  .bd-c_result\.okBorder {
+    border-color: var(--colors-result-ok-border);
+}
+
+  .bd-c_result\.failBorder {
+    border-color: var(--colors-result-fail-border);
+}
+
+  .gap_1\.5 {
+    gap: var(--spacing-1\.5);
+}
+
+  .ovs-b_contain {
+    overscroll-behavior: contain;
+}
+
+  .px_2\.5 {
+    padding-inline: var(--spacing-2\.5);
+}
+
+  .bd-c_badge\.successBorder {
+    border-color: var(--colors-badge-success-border);
+}
+
+  .bd-c_badge\.warningBorder {
+    border-color: var(--colors-badge-warning-border);
+}
+
+  .bd-c_badge\.infoBorder {
+    border-color: var(--colors-badge-info-border);
+}
+
+  .bd-c_badge\.neutralBorder {
+    border-color: var(--colors-badge-neutral-border);
+}
+
+  .bd-c_badge\.dangerBorder {
+    border-color: var(--colors-badge-danger-border);
+}
+
+  .trs_background-color_160ms_cubic-bezier\(0\.25\,_0\.1\,_0\.25\,_1\) {
+    transition: background-color 160ms cubic-bezier(0.25, 0.1, 0.25, 1);
+}
+
+  .py_3\.5 {
+    padding-block: var(--spacing-3\.5);
+}
+
+  .trs_border-color_160ms_cubic-bezier\(0\.25\,_0\.1\,_0\.25\,_1\)\,_background-color_160ms_cubic-bezier\(0\.25\,_0\.1\,_0\.25\,_1\)\,_box-shadow_160ms_cubic-bezier\(0\.25\,_0\.1\,_0\.25\,_1\) {
+    transition: border-color 160ms cubic-bezier(0.25, 0.1, 0.25, 1), background-color 160ms cubic-bezier(0.25, 0.1, 0.25, 1), box-shadow 160ms cubic-bezier(0.25, 0.1, 0.25, 1);
 }
 
   .bd-w_1\.5px {
@@ -1264,10 +1359,6 @@ body {
     transition: border-color 160ms cubic-bezier(0.25, 0.1, 0.25, 1), background-color 160ms cubic-bezier(0.25, 0.1, 0.25, 1), color 160ms cubic-bezier(0.25, 0.1, 0.25, 1), transform 160ms cubic-bezier(0.25, 0.1, 0.25, 1);
 }
 
-  .gap_1 {
-    gap: var(--spacing-1);
-}
-
   .gap_0\.5 {
     gap: var(--spacing-0\.5);
 }
@@ -1276,10 +1367,6 @@ body {
     transition: color 160ms cubic-bezier(0.25, 0.1, 0.25, 1), background 160ms cubic-bezier(0.25, 0.1, 0.25, 1);
 }
 
-  .px_6 {
-    padding-inline: var(--spacing-6);
-}
-
   .bd-c_border\.subtle {
     border-color: var(--colors-border-subtle);
 }
@@ -1300,14 +1387,6 @@ body {
     border-color: var(--colors-transparent);
 }
 
-  .px_3 {
-    padding-inline: var(--spacing-3);
-}
-
-  .py_2\.5 {
-    padding-block: var(--spacing-2\.5);
-}
-
   .trs_transform_160ms_cubic-bezier\(0\.25\,_0\.1\,_0\.25\,_1\) {
     transition: transform 160ms cubic-bezier(0.25, 0.1, 0.25, 1);
 }
@@ -1320,10 +1399,6 @@ body {
     transition: opacity 140ms cubic-bezier(0.25, 0.1, 0.25, 1);
 }
 
-  .flex_1 {
-    flex: 1 1 0%;
-}
-
   .bdr_999px {
     border-radius: 999px;
 }
@@ -1368,10 +1443,6 @@ body {
     transition: border-color 160ms cubic-bezier(0.25, 0.1, 0.25, 1), box-shadow 160ms cubic-bezier(0.25, 0.1, 0.25, 1);
 }
 
-  .bd-c_border\.soft {
-    border-color: var(--colors-border-soft);
-}
-
   .trs_border-color_160ms_cubic-bezier\(0\.25\,_0\.1\,_0\.25\,_1\) {
     transition: border-color 160ms cubic-bezier(0.25, 0.1, 0.25, 1);
 }
@@ -1380,10 +1451,6 @@ body {
     text-wrap: balance;
 }
 
-  .py_1\.5 {
-    padding-block: var(--spacing-1\.5);
-}
-
   .trs_background-color_160ms_cubic-bezier\(0\.25\,_0\.1\,_0\.25\,_1\)\,_border-color_160ms_cubic-bezier\(0\.25\,_0\.1\,_0\.25\,_1\)\,_color_160ms_cubic-bezier\(0\.25\,_0\.1\,_0\.25\,_1\)\,_box-shadow_160ms_cubic-bezier\(0\.25\,_0\.1\,_0\.25\,_1\)\,_opacity_160ms_cubic-bezier\(0\.25\,_0\.1\,_0\.25\,_1\)\,_transform_160ms_cubic-bezier\(0\.25\,_0\.1\,_0\.25\,_1\) {
     transition: background-color 160ms cubic-bezier(0.25, 0.1, 0.25, 1), border-color 160ms cubic-bezier(0.25, 0.1, 0.25, 1), color 160ms cubic-bezier(0.25, 0.1, 0.25, 1), box-shadow 160ms cubic-bezier(0.25, 0.1, 0.25, 1), opacity 160ms cubic-bezier(0.25, 0.1, 0.25, 1), transform 160ms cubic-bezier(0.25, 0.1, 0.25, 1);
 }
@@ -1400,14 +1467,54 @@ body {
     transition: border-color 160ms cubic-bezier(0.25, 0.1, 0.25, 1), background-color 160ms cubic-bezier(0.25, 0.1, 0.25, 1), box-shadow 160ms cubic-bezier(0.25, 0.1, 0.25, 1), transform 160ms cubic-bezier(0.25, 0.1, 0.25, 1);
 }
 
-  .d_flex {
-    display: flex;
+  .d_none {
+    display: none;
 }
 
   .ai_center {
     align-items: center;
 }
 
+  .flex-wrap_wrap {
+    flex-wrap: wrap;
+}
+
+  .pos_relative {
+    position: relative;
+}
+
+  .pos_absolute {
+    position: absolute;
+}
+
+  .trf_translateY\(-50\%\) {
+    transform: translateY(-50%);
+}
+
+  .c_text\.muted {
+    color: var(--colors-text-muted);
+}
+
+  .pointer-events_none {
+    pointer-events: none;
+}
+
+  .c_text\.primary {
+    color: var(--colors-text-primary);
+}
+
+  .fs_sm {
+    font-size: var(--font-sizes-sm);
+}
+
+  .cursor_pointer {
+    cursor: pointer;
+}
+
+  .d_flex {
+    display: flex;
+}
+
   .jc_center {
     justify-content: center;
 }
@@ -1416,16 +1523,125 @@ body {
     flex-shrink: 0;
 }
 
+  .white-space_nowrap {
+    white-space: nowrap;
+}
+
+  .fs_xs {
+    font-size: var(--font-sizes-xs);
+}
+
+  .fw_600 {
+    font-weight: 600;
+}
+
   .c_text\.accent {
     color: var(--colors-text-accent);
 }
 
-  .c_badge\.warningText {
-    color: var(--colors-badge-warning-text);
+  .d_grid {
+    display: grid;
 }
 
-  .fs_sm {
-    font-size: var(--font-sizes-sm);
+  .pos_sticky {
+    position: sticky;
+}
+
+  .z_2 {
+    z-index: 2;
+}
+
+  .flex-d_column {
+    flex-direction: column;
+}
+
+  .us_none {
+    -webkit-user-select: none;
+    user-select: none;
+}
+
+  .tt_uppercase {
+    text-transform: uppercase;
+}
+
+  .ls_0\.05em {
+    letter-spacing: 0.05em;
+}
+
+  .d_inline-flex {
+    display: inline-flex;
+}
+
+  .op_0\.5 {
+    opacity: 0.5;
+}
+
+  .op_1 {
+    opacity: 1;
+}
+
+  .jc_flex-end {
+    justify-content: flex-end;
+}
+
+  .c_text\.inverse {
+    color: var(--colors-text-inverse);
+}
+
+  .bx-sh_0_12px_40px_-8px_rgba\(15\,23\,42\,0\.12\)\,_0_4px_12px_-4px_rgba\(15\,23\,42\,0\.06\) {
+    box-shadow: 0 12px 40px -8px rgba(15,23,42,0.12), 0 4px 12px -4px rgba(15,23,42,0.06);
+}
+
+  .z_60 {
+    z-index: 60;
+}
+
+  .c_text\.secondary {
+    color: var(--colors-text-secondary);
+}
+
+  .ta_left {
+    text-align: left;
+}
+
+  .c_text\.error {
+    color: var(--colors-text-error);
+}
+
+  .ta_center {
+    text-align: center;
+}
+
+  .op_0\.4 {
+    opacity: 0.4;
+}
+
+  .ff_heading {
+    font-family: var(--fonts-heading);
+}
+
+  .fs_md {
+    font-size: var(--font-sizes-md);
+}
+
+  .lh_1\.6 {
+    line-height: 1.6;
+}
+
+  .fw_500 {
+    font-weight: 500;
+}
+
+  .z_10 {
+    z-index: 10;
+}
+
+  .bx-sh_0_6px_16px_-2px_rgba\(15\,23\,42\,0\.10\) {
+    box-shadow: 0 6px 16px -2px rgba(15,23,42,0.10);
+}
+
+  .c_badge\.warningText {
+    color: var(--colors-badge-warning-text);
 }
 
   .fw_700 {
@@ -1444,10 +1660,6 @@ body {
     color: var(--colors-result-error-label);
 }
 
-  .d_grid {
-    display: grid;
-}
-
   .c_result\.bodyText {
     color: var(--colors-result-body-text);
 }
@@ -1468,18 +1680,10 @@ body {
     align-items: flex-start;
 }
 
-  .flex-d_column {
-    flex-direction: column;
-}
-
   .fs_lg {
     font-size: var(--font-sizes-lg);
 }
 
-  .c_text\.primary {
-    color: var(--colors-text-primary);
-}
-
   .lh_1\.3 {
     line-height: 1.3;
 }
@@ -1488,34 +1692,14 @@ body {
     grid-template-rows: auto minmax(0, 1fr);
 }
 
-  .pos_relative {
-    position: relative;
-}
-
   .z_1 {
     z-index: 1;
 }
 
-  .c_text\.secondary {
-    color: var(--colors-text-secondary);
-}
-
   .lh_1\.65 {
     line-height: 1.65;
 }
 
-  .d_inline-flex {
-    display: inline-flex;
-}
-
-  .fs_xs {
-    font-size: var(--font-sizes-xs);
-}
-
-  .tt_uppercase {
-    text-transform: uppercase;
-}
-
   .ls_0\.06em {
     letter-spacing: 0.06em;
 }
@@ -1524,10 +1708,6 @@ body {
     line-height: 1;
 }
 
-  .white-space_nowrap {
-    white-space: nowrap;
-}
-
   .c_badge\.successText {
     color: var(--colors-badge-success-text);
 }
@@ -1544,27 +1724,6 @@ body {
     color: var(--colors-badge-danger-text);
 }
 
-  .us_none {
-    -webkit-user-select: none;
-    user-select: none;
-}
-
-  .ff_heading {
-    font-family: var(--fonts-heading);
-}
-
-  .fw_600 {
-    font-weight: 600;
-}
-
-  .fs_md {
-    font-size: var(--font-sizes-md);
-}
-
-  .c_text\.muted {
-    color: var(--colors-text-muted);
-}
-
   .obj-f_cover {
     object-fit: cover;
 }
@@ -1573,18 +1732,6 @@ body {
     visibility: hidden;
 }
 
-  .pos_absolute {
-    position: absolute;
-}
-
-  .pointer-events_none {
-    pointer-events: none;
-}
-
-  .ta_left {
-    text-align: left;
-}
-
   .cursor_not-allowed {
     cursor: not-allowed;
 }
@@ -1593,14 +1740,6 @@ body {
     opacity: 0.45;
 }
 
-  .cursor_pointer {
-    cursor: pointer;
-}
-
-  .c_text\.inverse {
-    color: var(--colors-text-inverse);
-}
-
   .trf_scale\(1\) {
     transform: scale(1);
 }
@@ -1629,29 +1768,29 @@ body {
     position: fixed;
 }
 
-  .bkdp_blur\(12px\) {
-    backdrop-filter: blur(12px);
-    -webkit-backdrop-filter: blur(12px);
+  .bkdp_blur\(8px\) {
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
 }
 
   .z_50 {
     z-index: 50;
 }
 
-  .jc_flex-end {
-    justify-content: flex-end;
+  .ai_flex-end {
+    align-items: flex-end;
 }
 
-  .bx-sh_0_16px_48px_-8px_rgba\(0\,_0\,_0\,_0\.12\)\,_0_4px_16px_-4px_rgba\(0\,_0\,_0\,_0\.06\) {
-    box-shadow: 0 16px 48px -8px rgba(0, 0, 0, 0.12), 0 4px 16px -4px rgba(0, 0, 0, 0.06);
+  .z_51 {
+    z-index: 51;
 }
 
-  .trf_translate\(-50\%\,_-50\%\) {
-    transform: translate(-50%, -50%);
+  .pointer-events_auto {
+    pointer-events: auto;
 }
 
-  .z_51 {
-    z-index: 51;
+  .bx-sh_0_-8px_32px_-4px_rgba\(0\,_0\,_0\,_0\.12\)\,_0_-2px_8px_-2px_rgba\(0\,_0\,_0\,_0\.06\) {
+    box-shadow: 0 -8px 32px -4px rgba(0, 0, 0, 0.12), 0 -2px 8px -2px rgba(0, 0, 0, 0.06);
 }
 
   .sr_true {
@@ -1666,167 +1805,339 @@ body {
     border-width: 0;
 }
 
-  .bx-sh_none {
-    box-shadow: none;
+  .bx-sh_none {
+    box-shadow: none;
+}
+
+  .z_30 {
+    z-index: 30;
+}
+
+  .trf_rotate\(180deg\) {
+    transform: rotate(180deg);
+}
+
+  .trf_rotate\(0deg\) {
+    transform: rotate(0deg);
+}
+
+  .op_0 {
+    opacity: 0;
+}
+
+  .d_block {
+    display: block;
+}
+
+  .tov_ellipsis {
+    text-overflow: ellipsis;
+}
+
+  .ov-wrap_anywhere {
+    overflow-wrap: anywhere;
+}
+
+  .lh_1\.4 {
+    line-height: 1.4;
+}
+
+  .bx-sh_0_4px_12px_-4px_rgba\(0\,_0\,_0\,_0\.1\)\,_0_1px_2px_0_rgba\(0\,_0\,_0\,_0\.06\) {
+    box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+}
+
+  .bx-sh_0_4px_16px_-4px_rgba\(15\,23\,42\,0\.08\)\,_0_2px_6px_-2px_rgba\(15\,23\,42\,0\.04\) {
+    box-shadow: 0 4px 16px -4px rgba(15,23,42,0.08), 0 2px 6px -2px rgba(15,23,42,0.04);
+}
+
+  .z_70 {
+    z-index: 70;
+}
+
+  .white-space_normal {
+    white-space: normal;
+}
+
+  .wb_break-word {
+    word-break: break-word;
+}
+
+  .ac_start {
+    align-content: start;
+}
+
+  .grid-tc_1fr {
+    grid-template-columns: 1fr;
+}
+
+  .bx-sh_0_30px_90px_-72px_rgba\(15\,23\,42\,0\.7\) {
+    box-shadow: 0 30px 90px -72px rgba(15,23,42,0.7);
+}
+
+  .fw_800 {
+    font-weight: 800;
+}
+
+  .ls_0\.08em {
+    letter-spacing: 0.08em;
+}
+
+  .lh_1\.7 {
+    line-height: 1.7;
+}
+
+  .ap_none {
+    appearance: none;
+    -webkit-appearance: none;
+}
+
+  .trs-prop_background-color\,_color\,_box-shadow {
+    --transition-prop: background-color, color, box-shadow;
+    transition-property: background-color, color, box-shadow;
+}
+
+  .trs-dur_fast {
+    --transition-duration: var(--durations-fast);
+    transition-duration: var(--durations-fast);
+}
+
+  .bx-sh_0_10px_30px_-20px_rgba\(15\,23\,42\,0\.72\) {
+    box-shadow: 0 10px 30px -20px rgba(15,23,42,0.72);
+}
+
+  .jc_flex-start {
+    justify-content: flex-start;
+}
+
+  .scr-bar-w_thin {
+    scrollbar-width: thin;
+}
+
+  .scr-bar-c_rgba\(148\,_163\,_184\,_0\.3\)_transparent {
+    scrollbar-color: rgba(148, 163, 184, 0.3) transparent;
+}
+
+  .ai_start {
+    align-items: start;
+}
+
+  .ac_center {
+    align-content: center;
+}
+
+  .ring-o_2px {
+    outline-offset: 2px;
+}
+
+  .ff_mono {
+    font-family: var(--fonts-mono);
+}
+
+  .bx-sh_0_1px_2px_0_rgba\(15\,23\,42\,0\.04\)\,_0_1px_3px_0_rgba\(15\,23\,42\,0\.06\) {
+    box-shadow: 0 1px 2px 0 rgba(15,23,42,0.04), 0 1px 3px 0 rgba(15,23,42,0.06);
+}
+
+  .bx-sh_0_1px_2px_0_rgba\(15\,23\,42\,0\.04\)\,_0_4px_12px_-4px_rgba\(15\,23\,42\,0\.1\) {
+    box-shadow: 0 1px 2px 0 rgba(15,23,42,0.04), 0 4px 12px -4px rgba(15,23,42,0.1);
+}
+
+  .fs_2xl {
+    font-size: var(--font-sizes-2xl);
+}
+
+  .lh_1\.1 {
+    line-height: 1.1;
+}
+
+  .white-space_pre-wrap {
+    white-space: pre-wrap;
+}
+
+  .ls_0\.005em {
+    letter-spacing: 0.005em;
+}
+
+  .bx-sh_0_4px_16px_-4px_rgba\(15\,23\,42\,0\.1\)\,_0_8px_24px_-8px_rgba\(15\,23\,42\,0\.08\)\,_0_1px_2px_0_rgba\(15\,23\,42\,0\.04\) {
+    box-shadow: 0 4px 16px -4px rgba(15,23,42,0.1), 0 8px 24px -8px rgba(15,23,42,0.08), 0 1px 2px 0 rgba(15,23,42,0.04);
+}
+
+  .pb_3 {
+    padding-bottom: var(--spacing-3);
+}
+
+  .max-w_100\% {
+    max-width: 100%;
+}
+
+  .min-w_0 {
+    min-width: var(--sizes-0);
+}
+
+  .left_3 {
+    left: var(--spacing-3);
+}
+
+  .top_50\% {
+    top: 50%;
+}
+
+  .w_4 {
+    width: var(--sizes-4);
 }
 
-  .z_30 {
-    z-index: 30;
+  .h_4 {
+    height: var(--sizes-4);
 }
 
-  .trf_rotate\(180deg\) {
-    transform: rotate(180deg);
+  .w_full {
+    width: var(--sizes-full);
 }
 
-  .trf_rotate\(0deg\) {
-    transform: rotate(0deg);
+  .pl_9 {
+    padding-left: var(--spacing-9);
 }
 
-  .op_1 {
-    opacity: 1;
+  .pr_9 {
+    padding-right: var(--spacing-9);
 }
 
-  .op_0 {
-    opacity: 0;
+  .right_2 {
+    right: var(--spacing-2);
 }
 
-  .d_block {
-    display: block;
+  .w_6 {
+    width: var(--sizes-6);
 }
 
-  .tov_ellipsis {
-    text-overflow: ellipsis;
+  .h_6 {
+    height: var(--sizes-6);
 }
 
-  .ov-wrap_anywhere {
-    overflow-wrap: anywhere;
+  .w_3\.5 {
+    width: var(--sizes-3\.5);
 }
 
-  .lh_1\.4 {
-    line-height: 1.4;
+  .h_3\.5 {
+    height: var(--sizes-3\.5);
 }
 
-  .bx-sh_0_4px_12px_-4px_rgba\(0\,_0\,_0\,_0\.1\)\,_0_1px_2px_0_rgba\(0\,_0\,_0\,_0\.06\) {
-    box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+  .ml_auto {
+    margin-left: auto;
 }
 
-  .pointer-events_auto {
-    pointer-events: auto;
+  .top_0 {
+    top: var(--spacing-0);
 }
 
-  .ac_start {
-    align-content: start;
+  .max-h_calc\(100vh_-_320px\) {
+    max-height: calc(100vh - 320px);
 }
 
-  .grid-tc_1fr {
-    grid-template-columns: 1fr;
+  .ov-y_auto {
+    overflow-y: auto;
 }
 
-  .flex-wrap_wrap {
-    flex-wrap: wrap;
+  .bd-b-w_1px {
+    border-bottom-width: 1px;
 }
 
-  .bx-sh_0_30px_90px_-72px_rgba\(15\,23\,42\,0\.7\) {
-    box-shadow: 0 30px 90px -72px rgba(15,23,42,0.7);
+  .border-bottom-style_solid {
+    border-bottom-style: solid;
 }
 
-  .ls_0\.05em {
-    letter-spacing: 0.05em;
+  .bd-b-c_rgba\(15\,23\,42\,0\.05\) {
+    border-bottom-color: rgba(15,23,42,0.05);
 }
 
-  .fw_800 {
-    font-weight: 800;
+  .w_3 {
+    width: var(--sizes-3);
 }
 
-  .ls_0\.08em {
-    letter-spacing: 0.08em;
+  .h_3 {
+    height: var(--sizes-3);
 }
 
-  .lh_1\.7 {
-    line-height: 1.7;
+  .w_8 {
+    width: var(--sizes-8);
 }
 
-  .ap_none {
-    appearance: none;
-    -webkit-appearance: none;
+  .h_8 {
+    height: var(--sizes-8);
 }
 
-  .trs-prop_background-color\,_color\,_box-shadow {
-    --transition-prop: background-color, color, box-shadow;
-    transition-property: background-color, color, box-shadow;
+  .min-w_180px {
+    min-width: 180px;
 }
 
-  .trs-dur_fast {
-    --transition-duration: var(--durations-fast);
-    transition-duration: var(--durations-fast);
+  .h_1px {
+    height: 1px;
 }
 
-  .bx-sh_0_10px_30px_-20px_rgba\(15\,23\,42\,0\.72\) {
-    box-shadow: 0 10px 30px -20px rgba(15,23,42,0.72);
+  .w_10 {
+    width: var(--sizes-10);
 }
 
-  .jc_flex-start {
-    justify-content: flex-start;
+  .h_10 {
+    height: var(--sizes-10);
 }
 
-  .scr-bar-w_thin {
-    scrollbar-width: thin;
+  .max-w_90 {
+    max-width: 90px;
 }
 
-  .scr-bar-c_rgba\(148\,_163\,_184\,_0\.3\)_transparent {
-    scrollbar-color: rgba(148, 163, 184, 0.3) transparent;
+  .pt_3 {
+    padding-top: var(--spacing-3);
 }
 
-  .ai_start {
-    align-items: start;
+  .w_7 {
+    width: var(--sizes-7);
 }
 
-  .ac_center {
-    align-content: center;
+  .h_7 {
+    height: var(--sizes-7);
 }
 
-  .c_text\.error {
-    color: var(--colors-text-error);
+  .pb_1 {
+    padding-bottom: var(--spacing-1);
 }
 
-  .lh_1\.6 {
-    line-height: 1.6;
+  .mb_2 {
+    margin-bottom: var(--spacing-2);
 }
 
-  .ring-o_2px {
-    outline-offset: 2px;
+  .pb_2 {
+    padding-bottom: var(--spacing-2);
 }
 
-  .ff_mono {
-    font-family: var(--fonts-mono);
+  .w_16px {
+    width: 16px;
 }
 
-  .bx-sh_0_1px_2px_0_rgba\(15\,23\,42\,0\.04\)\,_0_1px_3px_0_rgba\(15\,23\,42\,0\.06\) {
-    box-shadow: 0 1px 2px 0 rgba(15,23,42,0.04), 0 1px 3px 0 rgba(15,23,42,0.06);
+  .h_16px {
+    height: 16px;
 }
 
-  .bx-sh_0_1px_2px_0_rgba\(15\,23\,42\,0\.04\)\,_0_4px_12px_-4px_rgba\(15\,23\,42\,0\.1\) {
-    box-shadow: 0 1px 2px 0 rgba(15,23,42,0.04), 0 4px 12px -4px rgba(15,23,42,0.1);
+  .w_55\% {
+    width: 55%;
 }
 
-  .fs_2xl {
-    font-size: var(--font-sizes-2xl);
+  .w_70\% {
+    width: 70%;
 }
 
-  .lh_1\.1 {
-    line-height: 1.1;
+  .w_45\% {
+    width: 45%;
 }
 
-  .white-space_pre-wrap {
-    white-space: pre-wrap;
+  .w_65\% {
+    width: 65%;
 }
 
-  .ls_0\.005em {
-    letter-spacing: 0.005em;
+  .h_18px {
+    height: 18px;
 }
 
-  .bx-sh_0_4px_16px_-4px_rgba\(15\,23\,42\,0\.1\)\,_0_8px_24px_-8px_rgba\(15\,23\,42\,0\.08\)\,_0_1px_2px_0_rgba\(15\,23\,42\,0\.04\) {
-    box-shadow: 0 4px 16px -4px rgba(15,23,42,0.1), 0 8px 24px -8px rgba(15,23,42,0.08), 0 1px 2px 0 rgba(15,23,42,0.04);
+  .h_12px {
+    height: 12px;
 }
 
   .w_9 {
@@ -1845,10 +2156,6 @@ body {
     margin-bottom: var(--spacing-0);
 }
 
-  .mb_2 {
-    margin-bottom: var(--spacing-2);
-}
-
   .pl_4 {
     padding-left: var(--spacing-4);
 }
@@ -1869,30 +2176,10 @@ body {
     max-width: var(--sizes-2xl);
 }
 
-  .ov-y_auto {
-    overflow-y: auto;
-}
-
   .pr_1 {
     padding-right: var(--spacing-1);
 }
 
-  .w_8 {
-    width: var(--sizes-8);
-}
-
-  .h_8 {
-    height: var(--sizes-8);
-}
-
-  .w_10 {
-    width: var(--sizes-10);
-}
-
-  .h_10 {
-    height: var(--sizes-10);
-}
-
   .w_12 {
     width: var(--sizes-12);
 }
@@ -1909,18 +2196,10 @@ body {
     height: var(--sizes-14);
 }
 
-  .w_full {
-    width: var(--sizes-full);
-}
-
   .h_full {
     height: var(--sizes-full);
 }
 
-  .min-w_0 {
-    min-width: var(--sizes-0);
-}
-
   .w_100\% {
     width: 100%;
 }
@@ -1949,14 +2228,6 @@ body {
     padding-bottom: var(--spacing-4);
 }
 
-  .pb_6 {
-    padding-bottom: var(--spacing-6);
-}
-
-  .pt_3 {
-    padding-top: var(--spacing-3);
-}
-
   .bd-t-w_1px {
     border-top-width: 1px;
 }
@@ -1965,28 +2236,36 @@ body {
     border-top-color: var(--colors-border-soft);
 }
 
-  .max-h_calc\(100dvh_-_2rem\) {
-    max-height: calc(100dvh - 2rem);
+  .bottom_0 {
+    bottom: var(--spacing-0);
 }
 
-  .top_50\% {
-    top: 50%;
+  .left_0 {
+    left: var(--spacing-0);
+}
+
+  .right_0 {
+    right: var(--spacing-0);
+}
+
+  .bdr-tl_xl {
+    border-top-left-radius: var(--radii-xl);
 }
 
-  .left_50\% {
-    left: 50%;
+  .bdr-tr_xl {
+    border-top-right-radius: var(--radii-xl);
 }
 
-  .w_380px {
-    width: 380px;
+  .bdr-bl_0 {
+    border-bottom-left-radius: 0;
 }
 
-  .w_480px {
-    width: 480px;
+  .bdr-br_0 {
+    border-bottom-right-radius: 0;
 }
 
-  .w_640px {
-    width: 640px;
+  .max-h_90dvh {
+    max-height: 90dvh;
 }
 
   .w_fit-content {
@@ -2049,6 +2328,10 @@ body {
     max-width: calc(100vw - 2rem);
 }
 
+  .max-h_calc\(100dvh_-_2rem\) {
+    max-height: calc(100dvh - 2rem);
+}
+
   .top_3 {
     top: var(--spacing-3);
 }
@@ -2057,14 +2340,6 @@ body {
     right: var(--spacing-3);
 }
 
-  .w_6 {
-    width: var(--sizes-6);
-}
-
-  .h_6 {
-    height: var(--sizes-6);
-}
-
   .w_5 {
     width: var(--sizes-5);
 }
@@ -2073,10 +2348,6 @@ body {
     height: var(--sizes-5);
 }
 
-  .max-w_100\% {
-    max-width: 100%;
-}
-
   .min-h_100\% {
     min-height: 100%;
 }
@@ -2113,12 +2384,8 @@ body {
     top: calc(100% + 6px);
 }
 
-  .left_0 {
-    left: var(--spacing-0);
-}
-
-  .right_0 {
-    right: var(--spacing-0);
+  .\[\&\.checked\]\:bg_bg\.accentStrong.checked {
+    background: var(--colors-bg-accent-strong);
 }
 
   [data-theme="dark"] .dark\:bg_rgba\(0\,_0\,_0\,_0\.5\) {
@@ -2161,6 +2428,14 @@ body {
     animation: toastSwipeOut 100ms ease-out;
 }
 
+  .last\:bd-b_none:last-child {
+    border-bottom: var(--borders-none);
+}
+
+  .\[\&\.checked\]\:bd-c_border\.accent.checked {
+    border-color: var(--colors-border-accent);
+}
+
   [data-theme="dark"] .dark\:bd-c_border\.default {
     border-color: var(--colors-border-default);
 }
@@ -2181,8 +2456,28 @@ body {
     border-color: var(--colors-border-subtle);
 }
 
-  [data-theme="dark"] .dark\:bx-sh_0_16px_48px_-8px_rgba\(0\,_0\,_0\,_0\.56\)\,_0_4px_16px_-4px_rgba\(0\,_0\,_0\,_0\.32\) {
-    box-shadow: 0 16px 48px -8px rgba(0, 0, 0, 0.56), 0 4px 16px -4px rgba(0, 0, 0, 0.32);
+  .placeholder\:c_text\.muted::placeholder,.placeholder\:c_text\.muted[data-placeholder] {
+    color: var(--colors-text-muted);
+}
+
+  [data-theme="dark"] .dark\:bx-sh_0_12px_40px_-8px_rgba\(0\,0\,0\,0\.56\)\,_0_4px_12px_-4px_rgba\(0\,0\,0\,0\.32\) {
+    box-shadow: 0 12px 40px -8px rgba(0,0,0,0.56), 0 4px 12px -4px rgba(0,0,0,0.32);
+}
+
+  .disabled\:op_0\.4:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
+    opacity: 0.4;
+}
+
+  .disabled\:cursor_not-allowed:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
+    cursor: not-allowed;
+}
+
+  [data-theme="dark"] .dark\:bx-sh_0_6px_16px_-2px_rgba\(0\,0\,0\,0\.40\) {
+    box-shadow: 0 6px 16px -2px rgba(0,0,0,0.40);
+}
+
+  [data-theme="dark"] .dark\:bx-sh_0_-8px_32px_-4px_rgba\(0\,_0\,_0\,_0\.48\)\,_0_-2px_8px_-2px_rgba\(0\,_0\,_0\,_0\.24\) {
+    box-shadow: 0 -8px 32px -4px rgba(0, 0, 0, 0.48), 0 -2px 8px -2px rgba(0, 0, 0, 0.24);
 }
 
   [data-theme="dark"] .dark\:c_text\.accent {
@@ -2213,12 +2508,12 @@ body {
     transform: translateX(0);
 }
 
-  [data-theme="dark"] .dark\:scr-bar-c_rgba\(255\,_255\,_255\,_0\.12\)_transparent {
-    scrollbar-color: rgba(255, 255, 255, 0.12) transparent;
+  [data-theme="dark"] .dark\:bx-sh_0_4px_16px_-4px_rgba\(0\,0\,0\,0\.48\)\,_0_2px_6px_-2px_rgba\(0\,0\,0\,0\.28\) {
+    box-shadow: 0 4px 16px -4px rgba(0,0,0,0.48), 0 2px 6px -2px rgba(0,0,0,0.28);
 }
 
-  .placeholder\:c_text\.muted::placeholder,.placeholder\:c_text\.muted[data-placeholder] {
-    color: var(--colors-text-muted);
+  [data-theme="dark"] .dark\:scr-bar-c_rgba\(255\,_255\,_255\,_0\.12\)_transparent {
+    scrollbar-color: rgba(255, 255, 255, 0.12) transparent;
 }
 
   [data-theme="dark"] .dark\:bx-sh_0_1px_2px_0_rgba\(0\,0\,0\,0\.2\)\,_0_1px_3px_0_rgba\(0\,0\,0\,0\.24\) {
@@ -2241,8 +2536,8 @@ body {
     box-shadow: 0 4px 16px -4px rgba(0,0,0,0.32), 0 8px 24px -8px rgba(0,0,0,0.24), 0 1px 2px 0 rgba(0,0,0,0.16);
 }
 
-  .focusVisible\:ring_2px_solid:is(:focus-visible, [data-focus-visible]) {
-    outline: 2px solid;
+  [data-theme="dark"] .dark\:bd-b-c_rgba\(255\,255\,255\,0\.06\) {
+    border-bottom-color: rgba(255,255,255,0.06);
 }
 
   .focusVisible\:ring_none:is(:focus-visible, [data-focus-visible]) {
@@ -2253,6 +2548,14 @@ body {
     border-color: var(--colors-border-accent);
 }
 
+  .focusVisible\:ring_2px_solid:is(:focus-visible, [data-focus-visible]) {
+    outline: 2px solid;
+}
+
+  .focusVisible\:bx-sh_0_0_0_3px_var\(--colors-bg-accentSoft\):is(:focus-visible, [data-focus-visible]) {
+    box-shadow: 0 0 0 3px var(--colors-bg-accentSoft);
+}
+
   .focusVisible\:ring-c_border\.accent:is(:focus-visible, [data-focus-visible]) {
     outline-color: var(--colors-border-accent);
 }
@@ -2281,6 +2584,10 @@ body {
     background: var(--colors-bg-hover);
 }
 
+  .hover\:bg_bg\.dangerSoft:is(:hover, [data-hover]) {
+    background: var(--colors-bg-danger-soft);
+}
+
   .hover\:bg_bg\.accentStrong:is(:hover, [data-hover]) {
     background: var(--colors-bg-accent-strong);
 }
@@ -2325,6 +2632,14 @@ body {
     color: var(--colors-text-primary);
 }
 
+  .hover\:c_text\.secondary:is(:hover, [data-hover]) {
+    color: var(--colors-text-secondary);
+}
+
+  .hover\:c_text\.error:is(:hover, [data-hover]) {
+    color: var(--colors-text-error);
+}
+
   .hover\:bx-sh_0_2px_8px_-2px_rgba\(49\,_94\,_255\,_0\.4\):is(:hover, [data-hover]) {
     box-shadow: 0 2px 8px -2px rgba(49, 94, 255, 0.4);
 }
@@ -2333,8 +2648,8 @@ body {
     box-shadow: 0 2px 8px -2px rgba(217, 45, 32, 0.4);
 }
 
-  .hover\:c_text\.error:is(:hover, [data-hover]) {
-    color: var(--colors-text-error);
+  .disabled\:hover\:bg_transparent:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]):is(:hover, [data-hover]) {
+    background: var(--colors-transparent);
 }
 
   [data-theme="dark"] .dark\:before\:bg_linear-gradient\(90deg\,_transparent_0\%\,_rgba\(186\,_204\,_236\,_0\.1\)_50\%\,_transparent_100\%\)::before {
@@ -2345,6 +2660,10 @@ body {
     border-color: var(--colors-border-accent);
 }
 
+  .disabled\:hover\:c_text\.secondary:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]):is(:hover, [data-hover]) {
+    color: var(--colors-text-secondary);
+}
+
   [data-theme="dark"] .dark\:focusVisible\:bx-sh_0_0_0_3px_var\(--colors-bg-accentSoft\,_rgba\(138\,_180\,_255\,_0\.14\)\):is(:focus-visible, [data-focus-visible]) {
     box-shadow: 0 0 0 3px var(--colors-bg-accentSoft, rgba(138, 180, 255, 0.14));
 }
@@ -2369,9 +2688,84 @@ body {
     color: var(--colors-text-error);
 }
 
+  @media screen and (min-width: 40rem) {
+    .sm\:p_6 {
+      padding: var(--spacing-6);
+}
+    .sm\:anim_modalIn_240ms_cubic-bezier\(0\.16\,_1\,_0\.3\,_1\)_backwards {
+      animation: modalIn 240ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
+}
+    .sm\:px_6 {
+      padding-inline: var(--spacing-6);
+}
+    .sm\:ai_center {
+      align-items: center;
+}
+    .sm\:pos_relative {
+      position: relative;
+}
+    .sm\:bx-sh_0_16px_48px_-8px_rgba\(0\,_0\,_0\,_0\.12\)\,_0_4px_16px_-4px_rgba\(0\,_0\,_0\,_0\.06\) {
+      box-shadow: 0 16px 48px -8px rgba(0, 0, 0, 0.12), 0 4px 16px -4px rgba(0, 0, 0, 0.06);
+}
+    .sm\:pb_4 {
+      padding-bottom: var(--spacing-4);
+}
+    .sm\:pb_6 {
+      padding-bottom: var(--spacing-6);
+}
+    .sm\:bottom_auto {
+      bottom: auto;
+}
+    .sm\:left_auto {
+      left: auto;
+}
+    .sm\:right_auto {
+      right: auto;
+}
+    .sm\:bdr-bl_xl {
+      border-bottom-left-radius: var(--radii-xl);
+}
+    .sm\:bdr-br_xl {
+      border-bottom-right-radius: var(--radii-xl);
+}
+    .sm\:max-h_calc\(100dvh_-_2rem\) {
+      max-height: calc(100dvh - 2rem);
+}
+    .sm\:w_380px {
+      width: 380px;
+}
+    .sm\:w_480px {
+      width: 480px;
+}
+    .sm\:w_640px {
+      width: 640px;
+}
+    [data-theme="dark"] .dark\:sm\:bx-sh_0_16px_48px_-8px_rgba\(0\,_0\,_0\,_0\.56\)\,_0_4px_16px_-4px_rgba\(0\,_0\,_0\,_0\.32\) {
+      box-shadow: 0 16px 48px -8px rgba(0, 0, 0, 0.56), 0 4px 16px -4px rgba(0, 0, 0, 0.32);
+}
+}
+
   @media screen and (min-width: 48rem) {
+    .md\:bg_bg\.input {
+      background: var(--colors-bg-input);
+}
     .md\:p_5 {
       padding: var(--spacing-5);
+}
+    .md\:py_2 {
+      padding-block: var(--spacing-2);
+}
+    .md\:bdr_lg {
+      border-radius: var(--radii-lg);
+}
+    .md\:d_flex {
+      display: flex;
+}
+    .md\:d_block {
+      display: block;
+}
+    .md\:d_none {
+      display: none;
 }
     .md\:ai_center {
       align-items: center;
@@ -2388,11 +2782,20 @@ body {
 }
 
   @media screen and (min-width: 64rem) {
+    .lg\:d_flex {
+      display: flex;
+}
     .lg\:grid-tc_repeat\(3\,_minmax\(0\,_1fr\)\) {
       grid-template-columns: repeat(3, minmax(0, 1fr));
 }
     .lg\:grid-tc_repeat\(4\,_minmax\(0\,_1fr\)\) {
       grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+    .lg\:max-w_360px {
+      max-width: 360px;
+}
+    .lg\:min-w_180px {
+      min-width: 180px;
 }
 }