@pandacss/studio 0.15.0 → 0.15.2

package/styled-system/styles.css

@@ -11,706 +11,593 @@
 @import './tokens/keyframes.css';
 
 @layer utilities {
-  .styles\:text_red\! {
-    color: red !important
+  .w_26px {
+    width: 26px
     }
 
-  .styles\:fs_30px\! {
-    font-size: 30px !important
+  .grid-cols_repeat\(2\,_minmax\(0\,_1fr\)\) {
+    grid-template-columns: repeat(2, minmax(0, 1fr))
     }
 
-  .styles\:bg_red\.300 {
-    background: var(--colors-red-300)
+  .col-span_span_2 {
+    grid-column: span 2
     }
 
-  .styles\:w_20px {
-    width: 20px
+  .m_4 {
+    margin: var(--spacing-4)
     }
 
-  .styles\:w_70px {
-    width: 70px
+  .max-h_300px {
+    max-height: 300px
     }
 
-  .styles\:w_50px {
-    width: 50px
+  .word-wrap_break-word {
+    word-wrap: break-word
     }
 
-  [dir=rtl] .styles\:rtl\:ml_-4 {
-    margin-left: calc(var(--spacing-4) * -1)
-        }
-
-  .styles\:light\:text_red.light, .light .styles\:light\:text_red {
-    color: red
-        }
-
-  .styles\:dark\:text_green.dark, .dark .styles\:dark\:text_green {
-    color: green
-        }
-
-  .styles\:dark\:opacity_slate400.dark, .dark .styles\:dark\:opacity_slate400 {
-    opacity: slate400
-        }
-
-  .styles\:left_20px,.styles\:\[\&_\>_p\]\:left_20px > p {
-    left: 20px
-        }
-
-  .styles\:\[\&_\>_p\]\:light\:bg_red400 > p.light, .light .styles\:\[\&_\>_p\]\:light\:bg_red400 > p {
-    background: red400
-            }
-
-  .styles\:\[\&_\>_p\]\:dark\:bg_green500 > p.dark, .dark .styles\:\[\&_\>_p\]\:dark\:bg_green500 > p {
-    background: green500
-            }
-
-  [dir=rtl] .styles\:\[\&_\>_p\]\:rtl\:font_sans > p {
-    font: sans
-            }
-
-  .styles\:\[\&\:\:placeholder\]\:left_40px::placeholder {
-    left: 40px
-        }
-
-  .styles\:\[\&\:\:placeholder\]\:bg_red400::placeholder {
-    background: red400
+  .highlighted\:bg_border[data-highlighted] {
+    background: var(--colors-border)
         }
 
-  .styles\:all_unset {
-    all: unset
-    }
-
-  .styles\:bg_red {
-    background-color: red
-    }
-
-  .styles\:border_none {
-    border: var(--borders-none)
-    }
-
-  .styles\:p_\$3_\$3 {
-    padding: $3 $3
-    }
-
-  .styles\:rounded_\$button {
-    border-radius: $button
-    }
-
-  .styles\:fs_\$xsmall {
-    font-size: $xsmall
+  .isolation_isolate {
+    isolation: isolate
     }
 
-  .styles\:cursor_pointer {
-    cursor: pointer
+  .border-l_solid_1px {
+    border-left: solid 1px
     }
 
-  .styles\:\[\&_\+_span\]\:ml_\$2 + span {
-    margin-left: $2
-        }
-
-  .test .styles\:\[\.test_\&\]\:bg_blue {
-    background-color: blue
-        }
-
-  .styles\:\[\&_\.my-class\]\:text_red .my-class,.styles\:\[\&_span\]\:text_red span,.styles\:\[\&_kbd\]\:text_red kbd {
-    color: red
+  .expanded\:transform_rotate\(180deg\):is([aria-expanded=true], [data-expanded], [data-state="expanded"]) {
+    transform: rotate(180deg)
         }
 
-  .w_26px {
-    width: 26px;
-  }
-
-  .grid-cols_repeat\(2\,_minmax\(0\,_1fr\)\) {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-
-  .col-span_span_2 {
-    grid-column: span 2;
-  }
-
-  .m_4 {
-    margin: var(--spacing-4);
-  }
-
-  .max-h_300px {
-    max-height: 300px;
-  }
-
-  .word-wrap_break-word {
-    word-wrap: break-word;
-  }
-
-  .highlighted\:bg_border[data-highlighted] {
-    background: var(--colors-border);
-    }
-
-  .isolation_isolate {
-    isolation: isolate;
-  }
-
-  .border-l_solid_1px {
-    border-left: solid 1px;
-  }
-
-  .expanded\:transform_rotate\(180deg\):where([aria-expanded='true'], [data-expanded]) {
-    transform: rotate(180deg);
-    }
-
   .transition_all_\.2s_ease {
-    transition: all 0.2s ease;
-  }
+    transition: all .2s ease
+    }
 
   .top_0px {
-    top: 0px;
-  }
+    top: 0px
+    }
 
   .right_0px {
-    right: 0px;
-  }
+    right: 0px
+    }
 
   .pos_absolute {
-    position: absolute;
-  }
+    position: absolute
+    }
 
   .z_2 {
-    z-index: 2;
-  }
+    z-index: 2
+    }
 
   .break_break-word {
-    word-break: break-word;
-  }
+    word-break: break-word
+    }
 
   .grid-cols_80px_repeat\(auto-fit\,_minmax\(30px\,_1fr\)\) {
-    grid-template-columns: 80px repeat(auto-fit, minmax(30px, 1fr));
-  }
+    grid-template-columns: 80px repeat(auto-fit, minmax(30px, 1fr))
+    }
 
   .max-w_14px {
-    max-width: 14px;
-  }
+    max-width: 14px
+    }
 
   .shrink_0 {
-    flex-shrink: 0;
-  }
+    flex-shrink: 0
+    }
 
   .border_1px_solid_token\(colors\.border\) {
-    border: 1px solid var(--colors-border);
-  }
+    border: 1px solid var(--colors-border)
+    }
 
   .text_red\.400 {
-    color: var(--colors-red-400);
-  }
+    color: var(--colors-red-400)
+    }
 
   .fs_75\% {
-    font-size: 75%;
-  }
+    font-size: 75%
+    }
 
   .leading_0 {
-    line-height: 0;
-  }
+    line-height: 0
+    }
 
   .top_-0\.35em {
-    top: -0.35em;
-  }
+    top: -0.35em
+    }
 
   .ml_1 {
-    margin-left: var(--spacing-1);
-  }
+    margin-left: var(--spacing-1)
+    }
 
   .bg_card {
-    background-color: var(--colors-card);
-  }
+    background-color: var(--colors-card)
+    }
 
   .p_16 {
-    padding: var(--spacing-16);
-  }
+    padding: var(--spacing-16)
+    }
 
   .mt_1 {
-    margin-top: var(--spacing-1);
-  }
+    margin-top: var(--spacing-1)
+    }
 
   .select_none {
     -webkit-user-select: none;
-    user-select: none;
-  }
+    user-select: none
+    }
 
   .px_3 {
-    padding-inline: var(--spacing-3);
-  }
+    padding-inline: var(--spacing-3)
+    }
 
   .h_16 {
-    height: var(--sizes-16);
-  }
+    height: var(--sizes-16)
+    }
 
   .pt_16 {
-    padding-top: var(--spacing-16);
-  }
+    padding-top: var(--spacing-16)
+    }
 
   .mt_10 {
-    margin-top: var(--spacing-10);
-  }
-
-  .size_regular {
-    size: regular;
-  }
-
-  .size_large {
-    size: large;
-  }
+    margin-top: var(--spacing-10)
+    }
 
   .justify_space-between {
-    justify-content: space-between;
-  }
+    justify-content: space-between
+    }
 
   .ring_none {
-    outline: var(--borders-none);
-  }
+    outline: var(--borders-none)
+    }
 
   .gap_2\.5 {
-    gap: var(--spacing-2\.5);
-  }
+    gap: var(--spacing-2\.5)
+    }
 
   .text_center {
-    text-align: center;
-  }
+    text-align: center
+    }
 
   .flex_1 {
-    flex: 1 1 0%;
-  }
+    flex: 1 1 0%
+    }
 
   .w_auto {
-    width: auto;
-  }
+    width: auto
+    }
 
   .min-w_80px {
-    min-width: 80px;
-  }
+    min-width: 80px
+    }
 
   .h_40px {
-    height: 40px;
-  }
+    height: 40px
+    }
 
   .mb_2 {
-    margin-bottom: var(--spacing-2);
-  }
+    margin-bottom: var(--spacing-2)
+    }
 
   .h_10 {
-    height: var(--sizes-10);
-  }
+    height: var(--sizes-10)
+    }
 
   .overflow_hidden {
-    overflow: hidden;
-  }
+    overflow: hidden
+    }
 
   .shadow_inset {
-    box-shadow: var(--shadows-inset);
-  }
+    box-shadow: var(--shadows-inset)
+    }
 
   .before\:content_\'\'::before {
-    content: '';
-    }
+    content: ''
+        }
 
   .before\:pos_absolute::before {
-    position: absolute;
-    }
+    position: absolute
+        }
 
   .before\:rounded_sm::before {
-    border-radius: var(--radii-sm);
-    }
+    border-radius: var(--radii-sm)
+        }
 
   .before\:w_100\%::before {
-    width: 100%;
-    }
+    width: 100%
+        }
 
   .before\:h_100\%::before {
-    height: 100%;
-    }
+    height: 100%
+        }
 
   .before\:bg_24px::before {
-    background-size: 24px;
-    }
+    background-size: 24px
+        }
 
   .before\:z_-1::before {
-    z-index: -1;
-    }
+    z-index: -1
+        }
 
   .before\:bg-img_check::before {
-    background-image: var(--assets-check);
-    }
+    background-image: var(--assets-check)
+        }
 
   .gap_0\.5 {
-    gap: var(--spacing-0\.5);
-  }
+    gap: var(--spacing-0\.5)
+    }
 
   .mt_2 {
-    margin-top: var(--spacing-2);
-  }
+    margin-top: var(--spacing-2)
+    }
 
   .grid-cols_repeat\(auto-fit\,_minmax\(13rem\,_1fr\)\) {
-    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
-  }
+    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr))
+    }
 
   .grid-cols_repeat\(auto-fit\,_minmax\(30rem\,_1fr\)\) {
-    grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
-  }
+    grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr))
+    }
 
   .my_5 {
-    margin-block: var(--spacing-5);
-  }
+    margin-block: var(--spacing-5)
+    }
 
   .fs_5xl {
-    font-size: var(--font-sizes-5xl);
-  }
+    font-size: var(--font-sizes-5xl)
+    }
 
   .gap_5 {
-    gap: var(--spacing-5);
-  }
+    gap: var(--spacing-5)
+    }
 
   .min-h_40vh {
-    min-height: 40vh;
-  }
+    min-height: 40vh
+    }
 
   .opacity_0\.8 {
-    opacity: 0.8;
-  }
+    opacity: 0.8
+    }
 
   .fs_100px {
-    font-size: 100px;
-  }
+    font-size: 100px
+    }
 
   .leading_1 {
-    line-height: 1;
-  }
+    line-height: 1
+    }
 
   .gap_8 {
-    gap: var(--spacing-8);
-  }
+    gap: var(--spacing-8)
+    }
 
   .fs_24px {
-    font-size: 24px;
-  }
+    font-size: 24px
+    }
 
   .justify_center {
-    justify-content: center;
-  }
+    justify-content: center
+    }
 
   .flex_0_0_auto {
-    flex: 0 0 auto;
-  }
+    flex: 0 0 auto
+    }
 
   .w_8 {
-    width: var(--sizes-8);
-  }
+    width: var(--sizes-8)
+    }
 
   .h_8 {
-    height: var(--sizes-8);
-  }
+    height: var(--sizes-8)
+    }
 
   .text_lowercase {
-    text-transform: lowercase;
-  }
+    text-transform: lowercase
+    }
 
   .mb_3\.5 {
-    margin-bottom: var(--spacing-3\.5);
-  }
+    margin-bottom: var(--spacing-3\.5)
+    }
 
   .pos_sticky {
-    position: sticky;
-  }
+    position: sticky
+    }
 
   .top_0 {
-    top: var(--spacing-0);
-  }
+    top: var(--spacing-0)
+    }
 
   .z_1 {
-    z-index: 1;
-  }
+    z-index: 1
+    }
 
   .resize_vertical {
-    resize: vertical;
-  }
+    resize: vertical
+    }
 
   .opacity_0\.4 {
-    opacity: 0.4;
-  }
+    opacity: 0.4
+    }
 
   .fs_4xl {
-    font-size: var(--font-sizes-4xl);
-  }
+    font-size: var(--font-sizes-4xl)
+    }
 
   .leading_normal {
-    line-height: var(--line-heights-normal);
-  }
+    line-height: var(--line-heights-normal)
+    }
 
   .gap_3\.5 {
-    gap: var(--spacing-3\.5);
-  }
+    gap: var(--spacing-3\.5)
+    }
 
   .bg_transparent {
-    background: var(--colors-transparent);
-  }
+    background: var(--colors-transparent)
+    }
 
   .text_neutral\.600 {
-    color: var(--colors-neutral-600);
-  }
-
-  .dark\:text_neutral\.300.dark,
-    .dark .dark\:text_neutral\.300 {
-    color: var(--colors-neutral-300);
+    color: var(--colors-neutral-600)
     }
 
+  .dark\:text_neutral\.300.dark, .dark .dark\:text_neutral\.300 {
+    color: var(--colors-neutral-300)
+        }
+
   .shadow_sm {
-    box-shadow: var(--shadows-sm);
-  }
+    box-shadow: var(--shadows-sm)
+    }
 
   .border_border {
-    border-color: var(--colors-border);
-  }
+    border-color: var(--colors-border)
+    }
 
   .divide-y_1px > :not([hidden]) ~ :not([hidden]) {
     border-top-width: 1px;
-    border-bottom-width: 0px;
-    }
+    border-bottom-width: 0px
+        }
 
   .divide_card > :not([hidden]) ~ :not([hidden]) {
-    border-color: var(--colors-card);
-    }
+    border-color: var(--colors-card)
+        }
 
   .mt_1\.5 {
-    margin-top: var(--spacing-1\.5);
-  }
+    margin-top: var(--spacing-1\.5)
+    }
 
   .h_20 {
-    height: var(--sizes-20);
-  }
+    height: var(--sizes-20)
+    }
 
   .w_60 {
-    width: var(--sizes-60);
-  }
+    width: var(--sizes-60)
+    }
 
   .p_4 {
-    padding: var(--spacing-4);
-  }
+    padding: var(--spacing-4)
+    }
 
   .\[\&_svg\]\:font_normal svg {
-    font-weight: var(--font-weights-normal);
-    }
+    font-weight: var(--font-weights-normal)
+        }
 
   .\[\&_svg\]\:fs_xx-large svg {
-    font-size: xx-large;
-    }
+    font-size: xx-large
+        }
 
   .\[\&_svg\]\:mb_6 svg {
-    margin-bottom: var(--spacing-6);
-    }
+    margin-bottom: var(--spacing-6)
+        }
 
   .\[\&_svg\]\:h_6 svg {
-    height: var(--sizes-6);
-    }
+    height: var(--sizes-6)
+        }
 
   .\[\&_svg\]\:w_6 svg {
-    width: var(--sizes-6);
-    }
+    width: var(--sizes-6)
+        }
 
   .mt_3 {
-    margin-top: var(--spacing-3);
-  }
+    margin-top: var(--spacing-3)
+    }
 
   .bg_\#646cff {
-    background: #646cff;
-  }
+    background: #646cff
+    }
 
   .px_6 {
-    padding-inline: var(--spacing-6);
-  }
+    padding-inline: var(--spacing-6)
+    }
 
   .rounded_sm {
-    border-radius: var(--radii-sm);
-  }
+    border-radius: var(--radii-sm)
+    }
 
   .mt_6 {
-    margin-top: var(--spacing-6);
-  }
+    margin-top: var(--spacing-6)
+    }
 
   .py_24 {
-    padding-block: var(--spacing-24);
-  }
+    padding-block: var(--spacing-24)
+    }
 
   .mb_10 {
-    margin-bottom: var(--spacing-10);
-  }
+    margin-bottom: var(--spacing-10)
+    }
 
   .px_8 {
-    padding-inline: var(--spacing-8);
-  }
+    padding-inline: var(--spacing-8)
+    }
 
   .py_4 {
-    padding-block: var(--spacing-4);
-  }
+    padding-block: var(--spacing-4)
+    }
 
   .mb_6 {
-    margin-bottom: var(--spacing-6);
-  }
+    margin-bottom: var(--spacing-6)
+    }
 
   .p_8 {
-    padding: var(--spacing-8);
-  }
+    padding: var(--spacing-8)
+    }
 
   .gap_6 {
-    gap: var(--spacing-6);
-  }
+    gap: var(--spacing-6)
+    }
 
   .w_80px {
-    width: 80px;
-  }
+    width: 80px
+    }
 
   .h_80px {
-    height: 80px;
-  }
+    height: 80px
+    }
 
   .grid-cols_repeat\(auto-fit\,_minmax\(10rem\,_1fr\)\) {
-    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
-  }
+    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr))
+    }
 
   .gap_1 {
-    gap: var(--spacing-1);
-  }
+    gap: var(--spacing-1)
+    }
 
   .h_12 {
-    height: var(--sizes-12);
-  }
+    height: var(--sizes-12)
+    }
 
   .min-w_5 {
-    min-width: var(--sizes-5);
-  }
+    min-width: var(--sizes-5)
+    }
 
   .bg_neutral\.800 {
-    background: var(--colors-neutral-800);
-  }
+    background: var(--colors-neutral-800)
+    }
 
   .py_1 {
-    padding-block: var(--spacing-1);
-  }
+    padding-block: var(--spacing-1)
+    }
 
   .text_white {
-    color: var(--colors-white);
-  }
+    color: var(--colors-white)
+    }
 
   .rounded-br_sm {
-    border-bottom-right-radius: var(--radii-sm);
-  }
+    border-bottom-right-radius: var(--radii-sm)
+    }
 
   .border_neutral\.700 {
-    border-color: var(--colors-neutral-700);
-  }
+    border-color: var(--colors-neutral-700)
+    }
 
   .text_uppercase {
-    text-transform: uppercase;
-  }
+    text-transform: uppercase
+    }
 
   .d_block {
-    display: block;
-  }
+    display: block
+    }
 
   .py_1\.5 {
-    padding-block: var(--spacing-1\.5);
-  }
-
-  .currentPage\:text_yellow\.300[aria-current='page'] {
-    color: var(--colors-yellow-300);
+    padding-block: var(--spacing-1\.5)
     }
 
+  .currentPage\:text_yellow\.300[aria-current=page] {
+    color: var(--colors-yellow-300)
+        }
+
   .fs_small {
-    font-size: small;
-  }
+    font-size: small
+    }
 
   .opacity_0\.7 {
-    opacity: 0.7;
-  }
+    opacity: 0.7
+    }
 
   .list_none {
-    list-style-type: none;
-  }
+    list-style-type: none
+    }
 
   .my_2 {
-    margin-block: var(--spacing-2);
-  }
+    margin-block: var(--spacing-2)
+    }
 
   .mx_0 {
-    margin-inline: var(--spacing-0);
-  }
+    margin-inline: var(--spacing-0)
+    }
 
   .gap_10 {
-    gap: var(--spacing-10);
-  }
+    gap: var(--spacing-10)
+    }
 
   .col-span_span_3_\/_span_3 {
-    grid-column: span 3 / span 3;
-  }
+    grid-column: span 3 / span 3
+    }
 
   .h_5 {
-    height: var(--sizes-5);
-  }
+    height: var(--sizes-5)
+    }
 
   .bg_rgba\(255\,_192\,_203\,_0\.5\) {
-    background: rgba(255, 192, 203, 0.5);
-  }
+    background: rgba(255, 192, 203, 0.5)
+    }
 
   .col-span_span_2_\/_span_2 {
-    grid-column: span 2 / span 2;
-  }
+    grid-column: span 2 / span 2
+    }
 
   .col-span_span_5_\/_span_5 {
-    grid-column: span 5 / span 5;
-  }
+    grid-column: span 5 / span 5
+    }
 
   .d_grid {
-    display: grid;
-  }
+    display: grid
+    }
 
   .grid-cols_repeat\(5\,_minmax\(0\,_1fr\)\) {
-    grid-template-columns: repeat(5, minmax(0, 1fr));
-  }
+    grid-template-columns: repeat(5, minmax(0, 1fr))
+    }
 
   .gap-y_10 {
-    column-gap: var(--spacing-10);
-  }
+    column-gap: var(--spacing-10)
+    }
 
   .gap-x_2\.5 {
-    row-gap: var(--spacing-2\.5);
-  }
+    row-gap: var(--spacing-2\.5)
+    }
 
   .px_1 {
-    padding-inline: var(--spacing-1);
-  }
+    padding-inline: var(--spacing-1)
+    }
 
   .py_2\.5 {
-    padding-block: var(--spacing-2\.5);
-  }
+    padding-block: var(--spacing-2\.5)
+    }
 
   .border_card {
-    border-color: var(--colors-card);
-  }
+    border-color: var(--colors-card)
+    }
 
   .flex_auto {
-    flex: 1 1 auto;
-  }
+    flex: 1 1 auto
+    }
 
   .my_3 {
-    margin-block: var(--spacing-3);
-  }
+    margin-block: var(--spacing-3)
+    }
 
   .truncate_true {
     overflow: hidden;
     text-overflow: ellipsis;
-    white-space: nowrap;
-  }
+    white-space: nowrap
+    }
 
   .font_medium {
-    font-weight: var(--font-weights-medium);
-  }
+    font-weight: var(--font-weights-medium)
+    }
 
   .\[\&\.active\]\:text_yellow\.300.active {
-    color: var(--colors-yellow-300);
-    }
+    color: var(--colors-yellow-300)
+        }
 
   .sr_true {
     position: absolute;
@@ -721,536 +608,406 @@
     overflow: hidden;
     clip: rect(0, 0, 0, 0);
     white-space: nowrap;
-    border-width: 0;
-  }
+    border-width: 0
+    }
 
   .flex_row {
-    flex-direction: row;
-  }
+    flex-direction: row
+    }
 
   .border-width_1px {
-    border-width: 1px;
-  }
+    border-width: 1px
+    }
 
   .self_flex-start {
-    align-self: flex-start;
-  }
+    align-self: flex-start
+    }
 
   .text_inherit {
-    color: inherit;
-  }
+    color: inherit
+    }
 
   .py_20px {
-    padding-block: 20px;
-  }
+    padding-block: 20px
+    }
 
   .p_4px_8px {
-    padding: 4px 8px;
-  }
+    padding: 4px 8px
+    }
 
   .\[\&_li\]\:cursor_pointer li {
-    cursor: pointer;
-    }
+    cursor: pointer
+        }
 
   .list-style_none {
-    list-style: none;
-  }
+    list-style: none
+    }
 
   .p_6 {
-    padding: var(--spacing-6);
-  }
+    padding: var(--spacing-6)
+    }
 
   .cursor_default {
-    cursor: default;
-  }
+    cursor: default
+    }
 
   .px_24 {
-    padding-inline: var(--spacing-24);
-  }
+    padding-inline: var(--spacing-24)
+    }
 
   .w_100\% {
-    width: 100%;
-  }
+    width: 100%
+    }
 
   .w_5 {
-    width: var(--sizes-5);
-  }
+    width: var(--sizes-5)
+    }
 
   .ml_auto {
-    margin-left: auto;
-  }
+    margin-left: auto
+    }
 
   .mt_8 {
-    margin-top: var(--spacing-8);
-  }
+    margin-top: var(--spacing-8)
+    }
 
   .fs_xl {
-    font-size: var(--font-sizes-xl);
-  }
+    font-size: var(--font-sizes-xl)
+    }
 
   .p_2 {
-    padding: var(--spacing-2);
-  }
+    padding: var(--spacing-2)
+    }
 
   .bg_gray\.100 {
-    background: var(--colors-gray-100);
-  }
+    background: var(--colors-gray-100)
+    }
 
   .border_1px_solid_rgba\(0\,_0\,_0\,_0\.1\) {
-    border: 1px solid rgba(0, 0, 0, 0.1);
-  }
+    border: 1px solid rgba(0, 0, 0, 0.1)
+    }
 
   .fs_md {
-    font-size: var(--font-sizes-md);
-  }
+    font-size: var(--font-sizes-md)
+    }
 
   .ml_2 {
-    margin-left: var(--spacing-2);
-  }
+    margin-left: var(--spacing-2)
+    }
 
   .d_inline-block {
-    display: inline-block;
-  }
+    display: inline-block
+    }
 
   .p_0 {
-    padding: var(--spacing-0);
-  }
+    padding: var(--spacing-0)
+    }
 
   .py_2 {
-    padding-block: var(--spacing-2);
-  }
+    padding-block: var(--spacing-2)
+    }
 
   .transition_all_0\.2s_ease {
-    transition: all 0.2s ease;
-  }
+    transition: all 0.2s ease
+    }
 
   .rounded_md {
-    border-radius: var(--radii-md);
-  }
+    border-radius: var(--radii-md)
+    }
 
   .bg_none {
-    background: none;
-  }
+    background: none
+    }
 
   .pt_6 {
-    padding-top: var(--spacing-6);
-  }
+    padding-top: var(--spacing-6)
+    }
 
   .pl_6 {
-    padding-left: var(--spacing-6);
-  }
+    padding-left: var(--spacing-6)
+    }
 
   .pr_4 {
-    padding-right: var(--spacing-4);
-  }
+    padding-right: var(--spacing-4)
+    }
 
   .text_text {
-    color: var(--colors-text);
-  }
+    color: var(--colors-text)
+    }
 
   .mb_4 {
-    margin-bottom: var(--spacing-4);
-  }
+    margin-bottom: var(--spacing-4)
+    }
 
   .p_20px {
-    padding: 20px;
-  }
+    padding: 20px
+    }
 
   .fs_lg {
-    font-size: var(--font-sizes-lg);
-  }
+    font-size: var(--font-sizes-lg)
+    }
 
   .d_inline-flex {
-    display: inline-flex;
-  }
+    display: inline-flex
+    }
 
   .opacity_0\.5 {
-    opacity: 0.5;
-  }
+    opacity: 0.5
+    }
 
   .border-b_1px_solid_transparent {
-    border-bottom: 1px solid transparent;
-  }
+    border-bottom: 1px solid transparent
+    }
 
   .cursor_pointer {
-    cursor: pointer;
-  }
+    cursor: pointer
+    }
 
   .flex-wrap_wrap {
-    flex-wrap: wrap;
-  }
+    flex-wrap: wrap
+    }
 
   .px_2 {
-    padding-inline: var(--spacing-2);
-  }
+    padding-inline: var(--spacing-2)
+    }
 
   .fs_sm {
-    font-size: var(--font-sizes-sm);
-  }
+    font-size: var(--font-sizes-sm)
+    }
 
   .gap_12 {
-    gap: var(--spacing-12);
-  }
+    gap: var(--spacing-12)
+    }
 
   .gap_3 {
-    gap: var(--spacing-3);
-  }
+    gap: var(--spacing-3)
+    }
 
   .mt_5 {
-    margin-top: var(--spacing-5);
-  }
+    margin-top: var(--spacing-5)
+    }
 
   .bg_card {
-    background: var(--colors-card);
-  }
+    background: var(--colors-card)
+    }
 
   .ring_0 {
-    outline: 0;
-  }
+    outline: 0
+    }
 
   .pt_28 {
-    padding-top: var(--spacing-28);
-  }
+    padding-top: var(--spacing-28)
+    }
 
   .pb_28 {
-    padding-bottom: var(--spacing-28);
-  }
+    padding-bottom: var(--spacing-28)
+    }
 
   .w_fit-content {
-    width: fit-content;
-  }
+    width: fit-content
+    }
 
   .items_center {
-    align-items: center;
-  }
+    align-items: center
+    }
 
   .gap_1\.5 {
-    gap: var(--spacing-1\.5);
-  }
+    gap: var(--spacing-1\.5)
+    }
 
   .white-space_nowrap {
-    white-space: nowrap;
-  }
+    white-space: nowrap
+    }
 
   .w_48 {
-    width: var(--sizes-48);
-  }
+    width: var(--sizes-48)
+    }
 
   .text_capitalize {
-    text-transform: capitalize;
-  }
+    text-transform: capitalize
+    }
 
   .mr_2 {
-    margin-right: var(--spacing-2);
-  }
+    margin-right: var(--spacing-2)
+    }
 
   .gap_4 {
-    gap: var(--spacing-4);
-  }
+    gap: var(--spacing-4)
+    }
 
   .h_calc\(100vh_-_env\(safe-area-inset-bottom\)\) {
-    height: calc(100vh - env(safe-area-inset-bottom));
-  }
+    height: calc(100vh - env(safe-area-inset-bottom))
+    }
 
   .font_bold {
-    font-weight: var(--font-weights-bold);
-  }
+    font-weight: var(--font-weights-bold)
+    }
 
   .fs_2xl {
-    font-size: var(--font-sizes-2xl);
-  }
+    font-size: var(--font-sizes-2xl)
+    }
 
   .gap_2 {
-    gap: var(--spacing-2);
-  }
+    gap: var(--spacing-2)
+    }
 
   .w_16 {
-    width: var(--sizes-16);
-  }
+    width: var(--sizes-16)
+    }
 
   .mt_4 {
-    margin-top: var(--spacing-4);
-  }
+    margin-top: var(--spacing-4)
+    }
 
   .pt_14 {
-    padding-top: var(--spacing-14);
-  }
+    padding-top: var(--spacing-14)
+    }
 
   .pb_8 {
-    padding-bottom: var(--spacing-8);
-  }
+    padding-bottom: var(--spacing-8)
+    }
 
   .fs_3xl {
-    font-size: var(--font-sizes-3xl);
-  }
+    font-size: var(--font-sizes-3xl)
+    }
 
   .font_semibold {
-    font-weight: var(--font-weights-semibold);
-  }
+    font-weight: var(--font-weights-semibold)
+    }
 
   .mb_8 {
-    margin-bottom: var(--spacing-8);
-  }
+    margin-bottom: var(--spacing-8)
+    }
 
   .tracking_tight {
-    letter-spacing: var(--letter-spacings-tight);
-  }
+    letter-spacing: var(--letter-spacings-tight)
+    }
 
   .d_flex {
-    display: flex;
-  }
+    display: flex
+    }
 
   .flex_column {
-    flex-direction: column;
-  }
+    flex-direction: column
+    }
 
   .gap_10px {
-    gap: 10px;
-  }
+    gap: 10px
+    }
 
   .h_full {
-    height: var(--sizes-full);
-  }
+    height: var(--sizes-full)
+    }
 
   .min-w_60 {
-    min-width: var(--sizes-60);
-  }
+    min-width: var(--sizes-60)
+    }
 
   .px_12 {
-    padding-inline: var(--spacing-12);
-  }
+    padding-inline: var(--spacing-12)
+    }
 
   .py_8 {
-    padding-block: var(--spacing-8);
-  }
+    padding-block: var(--spacing-8)
+    }
 
   .pos_relative {
-    position: relative;
-  }
+    position: relative
+    }
 
   .max-w_8xl {
-    max-width: var(--sizes-8xl);
-  }
+    max-width: var(--sizes-8xl)
+    }
 
   .mx_auto {
-    margin-inline: auto;
-  }
+    margin-inline: auto
+    }
 
   .px_4 {
-    padding-inline: var(--spacing-4);
-  }
+    padding-inline: var(--spacing-4)
+    }
 
   .w_full {
-    width: var(--sizes-full);
-  }
+    width: var(--sizes-full)
+    }
 
   .overflow_auto {
-    overflow: auto;
-  }
-
-  .focusWithin\:outline-style_solid:focus-within {
-    outline-style: solid;
+    overflow: auto
     }
 
-  .focusWithin\:ring_2px:focus-within {
-    outline-width: 2px;
-    }
+  .focusWithin\:outline-style_solid:focus-within {
+    outline-style: solid
+        }
 
   .focusWithin\:ring_2px:focus-within {
-    outline-offset: 2px;
-    }
-
-  .focusWithin\:ring_neutral\.400:focus-within {
-    outline-color: var(--colors-neutral-400);
-    }
-
-  .styles\:\[\&\:focus\,_\&\:hover\]\:shadow_none:focus, .styles\:\[\&\:focus\,_\&\:hover\]\:shadow_none:hover {
-    box-shadow: none
+    outline-width: 2px
         }
 
-  :focus > .styles\:\[\:focus_\>_\&\]\:text_white {
-    color: var(--colors-white)
+  .focusWithin\:ring_2px:focus-within {
+    outline-offset: 2px
         }
 
-  .hover\:bg_gray\.100:where(:hover, [data-hover]) {
-    background-color: var(--colors-gray-100);
-    }
-
-  .hover\:shadow_lg:where(:hover, [data-hover]) {
-    box-shadow: var(--shadows-lg);
-    }
-
-  .hover\:text_yellow\.300:where(:hover, [data-hover]) {
-    color: var(--colors-yellow-300);
-    }
-
-  .hover\:opacity_0\.8:where(:hover, [data-hover]) {
-    opacity: 0.8;
-    }
-
-  .hover\:bg_border:where(:hover, [data-hover]) {
-    background-color: var(--colors-border);
-    }
-
-  .hover\:bg_border:where(:hover, [data-hover]) {
-    background: var(--colors-border);
-    }
-
-  .hover\:opacity_0\.6:where(:hover, [data-hover]) {
-    opacity: 0.6;
-    }
-
-  .hover\:opacity_1:where(:hover, [data-hover]) {
-    opacity: 1;
-    }
-
-  .hover\:border-b_black:where(:hover, [data-hover]) {
-    border-bottom-color: var(--colors-black);
-    }
-
-  input:hover .styles\:\[input\:hover_\&\]\:bg_red400 {
-    background: red400
+  .focusWithin\:ring_neutral\.400:focus-within {
+    outline-color: var(--colors-neutral-400)
         }
 
-  .styles\:hover\:bg_pink\.400:is(:hover, [data-hover]) {
-    background: var(--colors-pink-400)
+  .hover\:bg_gray\.100:is(:hover, [data-hover]) {
+    background-color: var(--colors-gray-100)
         }
 
-  .styles\:hover\:text_pink\.400:is(:hover, [data-hover]) {
-    color: var(--colors-pink-400)
+  .hover\:shadow_lg:is(:hover, [data-hover]) {
+    box-shadow: var(--shadows-lg)
         }
 
   .\[\&\:hover\]\:bg_\#4049f0:hover {
-    background: #4049f0;
-    }
+    background: #4049f0
+        }
 
   .\[\&\:hover\]\:shadow_lg:hover {
-    box-shadow: var(--shadows-lg);
-    }
-
-  .\[\&_li\]\:hover\:opacity_0\.8 li:where(:hover, [data-hover]) {
-    opacity: 0.8;
-      }
-
-  @media screen and (min-width: 40em) {
-    [dir=ltr] .styles\:ltr\:sm\:ml_4 {
-      margin-left: var(--spacing-4)
+    box-shadow: var(--shadows-lg)
         }
 
-    [dir=rtl] .styles\:sm\:rtl\:top_20px {
-      top: 20px
+  .hover\:text_yellow\.300:is(:hover, [data-hover]) {
+    color: var(--colors-yellow-300)
         }
-            }
 
-  @media screen and (min-width: 40em) {
-    .styles\:\[\&\:\:placeholder\]\:sm\:text_left::placeholder {
-      text-align: left
+  .hover\:opacity_0\.8:is(:hover, [data-hover]) {
+    opacity: 0.8
         }
-            }
 
-  @media screen and (min-width: 40em) {
-    .styles\:sm\:hover\:top_50px:is(:hover, [data-hover]) {
-      top: 50px
+  .hover\:bg_border:is(:hover, [data-hover]) {
+    background-color: var(--colors-border)
         }
-            }
-
-  @media screen and (min-width: 40em) {
-    [dir=ltr] .styles\:\[\&_\>_p\]\:ltr\:dark\:sm\:hover\:font_serif > p:is(:hover, [data-hover]).dark, .dark [dir=ltr] .styles\:\[\&_\>_p\]\:ltr\:dark\:sm\:hover\:font_serif > p:is(:hover, [data-hover]) {
-      font: serif
-                    }
-                        }
 
-  @media screen and (min-width: 40em) {
-    input:hover .styles\:\[input\:hover_\&\]\:sm\:fs_14px {
-      font-size: 14px
+  .hover\:bg_border:is(:hover, [data-hover]) {
+    background: var(--colors-border)
         }
-            }
-
-  @media screen and (min-width: 40em) {
-    .styles\:hover\:sm\:dark\:bg_red\.300:is(:hover, [data-hover]).dark, .dark .styles\:hover\:sm\:dark\:bg_red\.300:is(:hover, [data-hover]) {
-      background: var(--colors-red-300)
-            }
-                }
-
-  @media screen and (min-width: 40em) {
-    .styles\:hover\:disabled\:sm\:bg_red\.300:is(:hover, [data-hover]):is(:disabled, [disabled], [data-disabled]) {
-      background: var(--colors-red-300)
-            }
-                }
 
-  @media screen and (min-width: 40em) {
-    .styles\:sm\:w_60px {
-      width: 60px
-    }
+  .hover\:opacity_0\.6:is(:hover, [data-hover]) {
+    opacity: 0.6
         }
 
-  @media (min-width: 768px) {
-    .styles\:\[\@media_\(min-width\:_768px\)\]\:bg_green {
-      background-color: green
-    }
-
-    .styles\:\[\@media_\(min-width\:_768px\)\]\:fs_\$small {
-      font-size: $small
-    }
+  .hover\:opacity_1:is(:hover, [data-hover]) {
+    opacity: 1
+        }
 
-    .styles\:\[\@media_\(min-width\:_768px\)\]\:\[\&\:hover\]\:bg_yellow:hover {
-      background-color: yellow
+  .hover\:border-b_black:is(:hover, [data-hover]) {
+    border-bottom-color: var(--colors-black)
         }
-            }
 
-  @media screen and (min-width: 48em) {
-    .styles\:\[\&_\>_p\]\:md\:left_40px > p,.styles\:md\:left_40px {
-      left: 40px
-    }
+  .\[\&_li\]\:hover\:opacity_0\.8 li:is(:hover, [data-hover]) {
+    opacity: 0.8
             }
 
-  @media screen and (min-width: 768px) {
+  @media screen and (min-width: 48em) {
     .md\:px_6 {
       padding-inline: var(--spacing-6)
-  }
     }
+        }
 
-  @media screen and (min-width: 1024px) {
+  @media screen and (min-width: 64em) {
     .lg\:px_8 {
       padding-inline: var(--spacing-8)
-  }
-    }
-
-  @media screen and (min-width: 64em) {
-    .styles\:lg\:top_120px {
-      top: 120px
-    }
-
-    input:hover .styles\:\[input\:hover_\&\]\:lg\:fs_18px {
-      font-size: 18px
-        }
-            }
-
-  @media base {
-    .styles\:\[\@media_base\]\:\[\&\:hover\]\:left_40px:hover {
-      left: 40px
-        }
-            }
-
-  @media base {
-    @media screen and (min-width: 40em) {
-      .styles\:\[\@media_base\]\:\[\&\:hover\]\:sm\:text_left:hover {
-        text-align: left
-        }
-                }
-            }
-
-  @media base {
-    .styles\:\[\@media_base\]\:left_40px {
-      left: 40px
-    }
-        }
-
-  @media base {
-    @media screen and (min-width: 40em) {
-      .styles\:\[\@media_base\]\:sm\:text_left {
-        text-align: left
     }
-            }
         }
 }