fix: remove Panda CSS generated files from source control
Remove 130+ generated styled-system files that were incorrectly tracked. These files should be treated as build output and regenerated locally. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Thomas Hallock
@@ -1,134 +0,0 @@
|
||||
@layer utilities {
|
||||
|
||||
.pos_fixed {
|
||||
position: fixed
|
||||
}
|
||||
|
||||
.top_0 {
|
||||
top: var(--spacing-0)
|
||||
}
|
||||
|
||||
.left_0 {
|
||||
left: var(--spacing-0)
|
||||
}
|
||||
|
||||
.right_0 {
|
||||
right: var(--spacing-0)
|
||||
}
|
||||
|
||||
.bottom_0 {
|
||||
bottom: var(--spacing-0)
|
||||
}
|
||||
|
||||
.bg_gray\.50 {
|
||||
background: var(--colors-gray-50)
|
||||
}
|
||||
|
||||
.d_flex {
|
||||
display: flex
|
||||
}
|
||||
|
||||
.flex_column {
|
||||
flex-direction: column
|
||||
}
|
||||
|
||||
.items_center {
|
||||
align-items: center
|
||||
}
|
||||
|
||||
.justify_center {
|
||||
justify-content: center
|
||||
}
|
||||
|
||||
.p_4 {
|
||||
padding: var(--spacing-4)
|
||||
}
|
||||
|
||||
.pos_absolute {
|
||||
position: absolute
|
||||
}
|
||||
|
||||
.top_4 {
|
||||
top: var(--spacing-4)
|
||||
}
|
||||
|
||||
.left_4 {
|
||||
left: var(--spacing-4)
|
||||
}
|
||||
|
||||
.bg_white {
|
||||
background: var(--colors-white)
|
||||
}
|
||||
|
||||
.p_3 {
|
||||
padding: var(--spacing-3)
|
||||
}
|
||||
|
||||
.rounded_md {
|
||||
border-radius: var(--radii-md)
|
||||
}
|
||||
|
||||
.border_1px_solid {
|
||||
border: 1px solid
|
||||
}
|
||||
|
||||
.border_gray\.300 {
|
||||
border-color: var(--colors-gray-300)
|
||||
}
|
||||
|
||||
.fs_sm {
|
||||
font-size: var(--font-sizes-sm)
|
||||
}
|
||||
|
||||
.font_mono {
|
||||
font-family: var(--fonts-mono)
|
||||
}
|
||||
|
||||
.mt_2 {
|
||||
margin-top: var(--spacing-2)
|
||||
}
|
||||
|
||||
.bg_blue\.500 {
|
||||
background: var(--colors-blue-500)
|
||||
}
|
||||
|
||||
.mt_1 {
|
||||
margin-top: var(--spacing-1)
|
||||
}
|
||||
|
||||
.px_2 {
|
||||
padding-inline: var(--spacing-2)
|
||||
}
|
||||
|
||||
.py_1 {
|
||||
padding-block: var(--spacing-1)
|
||||
}
|
||||
|
||||
.bg_green\.500 {
|
||||
background: var(--colors-green-500)
|
||||
}
|
||||
|
||||
.text_white {
|
||||
color: var(--colors-white)
|
||||
}
|
||||
|
||||
.rounded_sm {
|
||||
border-radius: var(--radii-sm)
|
||||
}
|
||||
|
||||
.fs_xs {
|
||||
font-size: var(--font-sizes-xs)
|
||||
}
|
||||
|
||||
.cursor_pointer {
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
.columns_5 {
|
||||
columns: 5
|
||||
}
|
||||
|
||||
.color-scheme_place-value {
|
||||
color-scheme: place-value
|
||||
}
|
||||
}
|
||||
@@ -1,310 +0,0 @@
|
||||
@layer utilities {
|
||||
|
||||
.min-h_100vh {
|
||||
min-height: 100vh
|
||||
}
|
||||
|
||||
.bg_gray\.50 {
|
||||
background: var(--colors-gray-50)
|
||||
}
|
||||
|
||||
.fs_3xl {
|
||||
font-size: var(--font-sizes-3xl)
|
||||
}
|
||||
|
||||
.font_bold {
|
||||
font-weight: var(--font-weights-bold)
|
||||
}
|
||||
|
||||
.text_gray\.900 {
|
||||
color: var(--colors-gray-900)
|
||||
}
|
||||
|
||||
.fs_sm {
|
||||
font-size: var(--font-sizes-sm)
|
||||
}
|
||||
|
||||
.text_gray\.600 {
|
||||
color: var(--colors-gray-600)
|
||||
}
|
||||
|
||||
.bg_white {
|
||||
background: var(--colors-white)
|
||||
}
|
||||
|
||||
.p_6 {
|
||||
padding: var(--spacing-6)
|
||||
}
|
||||
|
||||
.border-t_1px_solid {
|
||||
border-top: 1px solid
|
||||
}
|
||||
|
||||
.border_gray\.200 {
|
||||
border-color: var(--colors-gray-200)
|
||||
}
|
||||
|
||||
.pt_6 {
|
||||
padding-top: var(--spacing-6)
|
||||
}
|
||||
|
||||
.mb_4 {
|
||||
margin-bottom: var(--spacing-4)
|
||||
}
|
||||
|
||||
.cursor_not-allowed {
|
||||
cursor: not-allowed
|
||||
}
|
||||
|
||||
.cursor_pointer {
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
.opacity_0\.7 {
|
||||
opacity: 0.7
|
||||
}
|
||||
|
||||
.opacity_1 {
|
||||
opacity: 1
|
||||
}
|
||||
|
||||
.w_full {
|
||||
width: var(--sizes-full)
|
||||
}
|
||||
|
||||
.px_6 {
|
||||
padding-inline: var(--spacing-6)
|
||||
}
|
||||
|
||||
.py_4 {
|
||||
padding-block: var(--spacing-4)
|
||||
}
|
||||
|
||||
.bg_brand\.600 {
|
||||
background: var(--colors-brand-600)
|
||||
}
|
||||
|
||||
.fs_lg {
|
||||
font-size: var(--font-sizes-lg)
|
||||
}
|
||||
|
||||
.rounded_xl {
|
||||
border-radius: var(--radii-xl)
|
||||
}
|
||||
|
||||
.shadow_card {
|
||||
box-shadow: var(--shadows-card)
|
||||
}
|
||||
|
||||
.w_5 {
|
||||
width: var(--sizes-5)
|
||||
}
|
||||
|
||||
.h_5 {
|
||||
height: var(--sizes-5)
|
||||
}
|
||||
|
||||
.border_2px_solid {
|
||||
border: 2px solid
|
||||
}
|
||||
|
||||
.border_white {
|
||||
border-color: var(--colors-white)
|
||||
}
|
||||
|
||||
.border-t_transparent {
|
||||
border-top-color: var(--colors-transparent)
|
||||
}
|
||||
|
||||
.rounded_full {
|
||||
border-radius: var(--radii-full)
|
||||
}
|
||||
|
||||
.animation_spin_1s_linear_infinite {
|
||||
animation: spin 1s linear infinite
|
||||
}
|
||||
|
||||
.bg_red\.50 {
|
||||
background: var(--colors-red-50)
|
||||
}
|
||||
|
||||
.border_1px_solid {
|
||||
border: 1px solid
|
||||
}
|
||||
|
||||
.border_red\.200 {
|
||||
border-color: var(--colors-red-200)
|
||||
}
|
||||
|
||||
.rounded_2xl {
|
||||
border-radius: var(--radii-2xl)
|
||||
}
|
||||
|
||||
.p_8 {
|
||||
padding: var(--spacing-8)
|
||||
}
|
||||
|
||||
.mt_8 {
|
||||
margin-top: var(--spacing-8)
|
||||
}
|
||||
|
||||
.fs_2xl {
|
||||
font-size: var(--font-sizes-2xl)
|
||||
}
|
||||
|
||||
.fs_xl {
|
||||
font-size: var(--font-sizes-xl)
|
||||
}
|
||||
|
||||
.font_semibold {
|
||||
font-weight: var(--font-weights-semibold)
|
||||
}
|
||||
|
||||
.text_red\.800 {
|
||||
color: var(--colors-red-800)
|
||||
}
|
||||
|
||||
.text_red\.700 {
|
||||
color: var(--colors-red-700)
|
||||
}
|
||||
|
||||
.leading_relaxed {
|
||||
line-height: var(--line-heights-relaxed)
|
||||
}
|
||||
|
||||
.self_start {
|
||||
align-self: start
|
||||
}
|
||||
|
||||
.py_2 {
|
||||
padding-block: var(--spacing-2)
|
||||
}
|
||||
|
||||
.bg_red\.600 {
|
||||
background: var(--colors-red-600)
|
||||
}
|
||||
|
||||
.text_white {
|
||||
color: var(--colors-white)
|
||||
}
|
||||
|
||||
.font_medium {
|
||||
font-weight: var(--font-weights-medium)
|
||||
}
|
||||
|
||||
.rounded_lg {
|
||||
border-radius: var(--radii-lg)
|
||||
}
|
||||
|
||||
.transition_all {
|
||||
transition-property: var(--transition-prop, all);
|
||||
transition-timing-function: var(--transition-easing, cubic-bezier(0.4, 0, 0.2, 1));
|
||||
transition-duration: var(--transition-duration, 150ms)
|
||||
}
|
||||
|
||||
.pos_relative {
|
||||
position: relative
|
||||
}
|
||||
|
||||
.max-w_7xl {
|
||||
max-width: var(--sizes-7xl)
|
||||
}
|
||||
|
||||
.mx_auto {
|
||||
margin-inline: auto
|
||||
}
|
||||
|
||||
.px_4 {
|
||||
padding-inline: var(--spacing-4)
|
||||
}
|
||||
|
||||
.py_8 {
|
||||
padding-block: var(--spacing-8)
|
||||
}
|
||||
|
||||
.mb_8 {
|
||||
margin-bottom: var(--spacing-8)
|
||||
}
|
||||
|
||||
.gap_2 {
|
||||
gap: var(--spacing-2)
|
||||
}
|
||||
|
||||
.text_center {
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.gap_1 {
|
||||
gap: var(--spacing-1)
|
||||
}
|
||||
|
||||
.gap_6 {
|
||||
gap: var(--spacing-6)
|
||||
}
|
||||
|
||||
.flex_column {
|
||||
flex-direction: column
|
||||
}
|
||||
|
||||
.gap_4 {
|
||||
gap: var(--spacing-4)
|
||||
}
|
||||
|
||||
.d_grid {
|
||||
display: grid
|
||||
}
|
||||
|
||||
.grid-cols_repeat\(1\,_minmax\(0\,_1fr\)\) {
|
||||
grid-template-columns: repeat(1, minmax(0, 1fr))
|
||||
}
|
||||
|
||||
.gap_8 {
|
||||
gap: var(--spacing-8)
|
||||
}
|
||||
|
||||
.items_start {
|
||||
align-items: start
|
||||
}
|
||||
|
||||
.justify_center {
|
||||
justify-content: center
|
||||
}
|
||||
|
||||
.d_flex {
|
||||
display: flex
|
||||
}
|
||||
|
||||
.items_center {
|
||||
align-items: center
|
||||
}
|
||||
|
||||
.gap_3 {
|
||||
gap: var(--spacing-3)
|
||||
}
|
||||
|
||||
.flex_row {
|
||||
flex-direction: row
|
||||
}
|
||||
|
||||
.hover\:bg_brand\.700:is(:hover, [data-hover]) {
|
||||
background: var(--colors-brand-700)
|
||||
}
|
||||
|
||||
.hover\:transform_translateY\(-1px\):is(:hover, [data-hover]) {
|
||||
transform: translateY(-1px)
|
||||
}
|
||||
|
||||
.hover\:shadow_modal:is(:hover, [data-hover]) {
|
||||
box-shadow: var(--shadows-modal)
|
||||
}
|
||||
|
||||
.hover\:bg_red\.700:is(:hover, [data-hover]) {
|
||||
background: var(--colors-red-700)
|
||||
}
|
||||
|
||||
@media screen and (min-width: 64em) {
|
||||
.lg\:grid-cols_repeat\(3\,_minmax\(0\,_1fr\)\) {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr))
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,378 +0,0 @@
|
||||
@layer utilities {
|
||||
|
||||
.min-h_screen {
|
||||
min-height: 100vh
|
||||
}
|
||||
|
||||
.from_blue\.50 {
|
||||
--gradient-from: var(--colors-blue-50)
|
||||
}
|
||||
|
||||
.to_purple\.50 {
|
||||
--gradient-to: var(--colors-purple-50)
|
||||
}
|
||||
|
||||
.py_8 {
|
||||
padding-block: var(--spacing-8)
|
||||
}
|
||||
|
||||
.max-w_6xl {
|
||||
max-width: var(--sizes-6xl)
|
||||
}
|
||||
|
||||
.px_4 {
|
||||
padding-inline: var(--spacing-4)
|
||||
}
|
||||
|
||||
.mb_12 {
|
||||
margin-bottom: var(--spacing-12)
|
||||
}
|
||||
|
||||
.fs_3xl {
|
||||
font-size: var(--font-sizes-3xl)
|
||||
}
|
||||
|
||||
.fs_xl {
|
||||
font-size: var(--font-sizes-xl)
|
||||
}
|
||||
|
||||
.max-w_2xl {
|
||||
max-width: var(--sizes-2xl)
|
||||
}
|
||||
|
||||
.mx_auto {
|
||||
margin-inline: auto
|
||||
}
|
||||
|
||||
.d_block {
|
||||
display: block
|
||||
}
|
||||
|
||||
.transition_all_0\.3s {
|
||||
transition: all 0.3s
|
||||
}
|
||||
|
||||
.h_full {
|
||||
height: var(--sizes-full)
|
||||
}
|
||||
|
||||
.from_green\.400 {
|
||||
--gradient-from: var(--colors-green-400)
|
||||
}
|
||||
|
||||
.to_green\.600 {
|
||||
--gradient-to: var(--colors-green-600)
|
||||
}
|
||||
|
||||
.bg_blue\.100 {
|
||||
background: var(--colors-blue-100)
|
||||
}
|
||||
|
||||
.text_blue\.700 {
|
||||
color: var(--colors-blue-700)
|
||||
}
|
||||
|
||||
.from_purple\.400 {
|
||||
--gradient-from: var(--colors-purple-400)
|
||||
}
|
||||
|
||||
.to_purple\.600 {
|
||||
--gradient-to: var(--colors-purple-600)
|
||||
}
|
||||
|
||||
.bg_purple\.100 {
|
||||
background: var(--colors-purple-100)
|
||||
}
|
||||
|
||||
.text_purple\.700 {
|
||||
color: var(--colors-purple-700)
|
||||
}
|
||||
|
||||
.bg_gray\.100 {
|
||||
background: var(--colors-gray-100)
|
||||
}
|
||||
|
||||
.text_gray\.700 {
|
||||
color: var(--colors-gray-700)
|
||||
}
|
||||
|
||||
.from_red\.400 {
|
||||
--gradient-from: var(--colors-red-400)
|
||||
}
|
||||
|
||||
.to_red\.600 {
|
||||
--gradient-to: var(--colors-red-600)
|
||||
}
|
||||
|
||||
.bg_red\.100 {
|
||||
background: var(--colors-red-100)
|
||||
}
|
||||
|
||||
.text_red\.700 {
|
||||
color: var(--colors-red-700)
|
||||
}
|
||||
|
||||
.bg_yellow\.100 {
|
||||
background: var(--colors-yellow-100)
|
||||
}
|
||||
|
||||
.text_yellow\.700 {
|
||||
color: var(--colors-yellow-700)
|
||||
}
|
||||
|
||||
.shadow_lg {
|
||||
box-shadow: var(--shadows-lg)
|
||||
}
|
||||
|
||||
.border_1px_solid {
|
||||
border: 1px solid
|
||||
}
|
||||
|
||||
.border_gray\.200 {
|
||||
border-color: var(--colors-gray-200)
|
||||
}
|
||||
|
||||
.opacity_0\.6 {
|
||||
opacity: 0.6
|
||||
}
|
||||
|
||||
.w_16 {
|
||||
width: var(--sizes-16)
|
||||
}
|
||||
|
||||
.h_16 {
|
||||
height: var(--sizes-16)
|
||||
}
|
||||
|
||||
.bg_gradient-to-br {
|
||||
background: gradient-to-br
|
||||
}
|
||||
|
||||
.from_indigo\.400 {
|
||||
--gradient-from: var(--colors-indigo-400)
|
||||
}
|
||||
|
||||
.to_indigo\.600 {
|
||||
--gradient-to: var(--colors-indigo-600)
|
||||
}
|
||||
|
||||
.items_center {
|
||||
align-items: center
|
||||
}
|
||||
|
||||
.justify_center {
|
||||
justify-content: center
|
||||
}
|
||||
|
||||
.text_gray\.900 {
|
||||
color: var(--colors-gray-900)
|
||||
}
|
||||
|
||||
.mb_3 {
|
||||
margin-bottom: var(--spacing-3)
|
||||
}
|
||||
|
||||
.text_orange\.600 {
|
||||
color: var(--colors-orange-600)
|
||||
}
|
||||
|
||||
.ml_2 {
|
||||
margin-left: var(--spacing-2)
|
||||
}
|
||||
|
||||
.bg_orange\.100 {
|
||||
background: var(--colors-orange-100)
|
||||
}
|
||||
|
||||
.px_2 {
|
||||
padding-inline: var(--spacing-2)
|
||||
}
|
||||
|
||||
.rounded_md {
|
||||
border-radius: var(--radii-md)
|
||||
}
|
||||
|
||||
.leading_relaxed {
|
||||
line-height: var(--line-heights-relaxed)
|
||||
}
|
||||
|
||||
.d_flex {
|
||||
display: flex
|
||||
}
|
||||
|
||||
.gap_2 {
|
||||
gap: var(--spacing-2)
|
||||
}
|
||||
|
||||
.flex-wrap_wrap {
|
||||
flex-wrap: wrap
|
||||
}
|
||||
|
||||
.bg_indigo\.100 {
|
||||
background: var(--colors-indigo-100)
|
||||
}
|
||||
|
||||
.text_indigo\.700 {
|
||||
color: var(--colors-indigo-700)
|
||||
}
|
||||
|
||||
.px_3 {
|
||||
padding-inline: var(--spacing-3)
|
||||
}
|
||||
|
||||
.py_1 {
|
||||
padding-block: var(--spacing-1)
|
||||
}
|
||||
|
||||
.bg_green\.100 {
|
||||
background: var(--colors-green-100)
|
||||
}
|
||||
|
||||
.text_green\.700 {
|
||||
color: var(--colors-green-700)
|
||||
}
|
||||
|
||||
.rounded_full {
|
||||
border-radius: var(--radii-full)
|
||||
}
|
||||
|
||||
.fs_sm {
|
||||
font-size: var(--font-sizes-sm)
|
||||
}
|
||||
|
||||
.font_medium {
|
||||
font-weight: var(--font-weights-medium)
|
||||
}
|
||||
|
||||
.mt_16 {
|
||||
margin-top: var(--spacing-16)
|
||||
}
|
||||
|
||||
.text_center {
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.bg_white {
|
||||
background: var(--colors-white)
|
||||
}
|
||||
|
||||
.rounded_xl {
|
||||
border-radius: var(--radii-xl)
|
||||
}
|
||||
|
||||
.p_8 {
|
||||
padding: var(--spacing-8)
|
||||
}
|
||||
|
||||
.shadow_sm {
|
||||
box-shadow: var(--shadows-sm)
|
||||
}
|
||||
|
||||
.fs_2xl {
|
||||
font-size: var(--font-sizes-2xl)
|
||||
}
|
||||
|
||||
.font_bold {
|
||||
font-weight: var(--font-weights-bold)
|
||||
}
|
||||
|
||||
.mb_4 {
|
||||
margin-bottom: var(--spacing-4)
|
||||
}
|
||||
|
||||
.text_gray\.600 {
|
||||
color: var(--colors-gray-600)
|
||||
}
|
||||
|
||||
.mb_6 {
|
||||
margin-bottom: var(--spacing-6)
|
||||
}
|
||||
|
||||
.d_inline-block {
|
||||
display: inline-block
|
||||
}
|
||||
|
||||
.px_6 {
|
||||
padding-inline: var(--spacing-6)
|
||||
}
|
||||
|
||||
.py_3 {
|
||||
padding-block: var(--spacing-3)
|
||||
}
|
||||
|
||||
.bg_blue\.600 {
|
||||
background: var(--colors-blue-600)
|
||||
}
|
||||
|
||||
.text_white {
|
||||
color: var(--colors-white)
|
||||
}
|
||||
|
||||
.font_semibold {
|
||||
font-weight: var(--font-weights-semibold)
|
||||
}
|
||||
|
||||
.rounded_lg {
|
||||
border-radius: var(--radii-lg)
|
||||
}
|
||||
|
||||
.text-decor_none {
|
||||
text-decoration: none
|
||||
}
|
||||
|
||||
.transition_all {
|
||||
transition-property: var(--transition-prop, all);
|
||||
transition-timing-function: var(--transition-easing, cubic-bezier(0.4, 0, 0.2, 1));
|
||||
transition-duration: var(--transition-duration, 150ms)
|
||||
}
|
||||
|
||||
.d_grid {
|
||||
display: grid
|
||||
}
|
||||
|
||||
.grid-cols_repeat\(1\,_minmax\(0\,_1fr\)\) {
|
||||
grid-template-columns: repeat(1, minmax(0, 1fr))
|
||||
}
|
||||
|
||||
.gap_8 {
|
||||
gap: var(--spacing-8)
|
||||
}
|
||||
|
||||
.hover\:transform_translateY\(-4px\):is(:hover, [data-hover]) {
|
||||
transform: translateY(-4px)
|
||||
}
|
||||
|
||||
.hover\:bg_blue\.700:is(:hover, [data-hover]) {
|
||||
background: var(--colors-blue-700)
|
||||
}
|
||||
|
||||
.hover\:transform_translateY\(-1px\):is(:hover, [data-hover]) {
|
||||
transform: translateY(-1px)
|
||||
}
|
||||
@media screen and (min-width: 48em) {
|
||||
|
||||
.md\:px_6 {
|
||||
padding-inline: var(--spacing-6)
|
||||
}
|
||||
|
||||
.md\:fs_5xl {
|
||||
font-size: var(--font-sizes-5xl)
|
||||
}
|
||||
|
||||
.md\:grid-cols_repeat\(2\,_minmax\(0\,_1fr\)\) {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr))
|
||||
}
|
||||
|
||||
.md\:px_6 {
|
||||
padding-inline: var(--spacing-6)
|
||||
}
|
||||
|
||||
.md\:fs_5xl {
|
||||
font-size: var(--font-sizes-5xl)
|
||||
}
|
||||
|
||||
.md\:grid-cols_repeat\(2\,_minmax\(0\,_1fr\)\) {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr))
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,644 +0,0 @@
|
||||
@layer utilities {
|
||||
|
||||
.min-h_100vh {
|
||||
min-height: 100vh
|
||||
}
|
||||
|
||||
.bg_linear-gradient\(135deg\,_\#667eea_0\%\,_\#764ba2_100\%\) {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%)
|
||||
}
|
||||
|
||||
.py_20 {
|
||||
padding-block: var(--spacing-20)
|
||||
}
|
||||
|
||||
.fs_4xl {
|
||||
font-size: var(--font-sizes-4xl)
|
||||
}
|
||||
|
||||
.text-shadow_0_4px_20px_rgba\(0\,0\,0\,0\.3\) {
|
||||
text-shadow: 0 4px 20px rgba(0,0,0,0.3)
|
||||
}
|
||||
|
||||
.opacity_0\.95 {
|
||||
opacity: 0.95
|
||||
}
|
||||
|
||||
.max-w_2xl {
|
||||
max-width: var(--sizes-2xl)
|
||||
}
|
||||
|
||||
.border-b_1px_solid {
|
||||
border-bottom: 1px solid
|
||||
}
|
||||
|
||||
.border_brand\.600 {
|
||||
border-color: var(--colors-brand-600)
|
||||
}
|
||||
|
||||
.border_transparent {
|
||||
border-color: var(--colors-transparent)
|
||||
}
|
||||
|
||||
.bg_brand\.50 {
|
||||
background: var(--colors-brand-50)
|
||||
}
|
||||
|
||||
.bg_transparent {
|
||||
background: var(--colors-transparent)
|
||||
}
|
||||
|
||||
.py_4 {
|
||||
padding-block: var(--spacing-4)
|
||||
}
|
||||
|
||||
.border-b_2px_solid {
|
||||
border-bottom: 2px solid
|
||||
}
|
||||
|
||||
.cursor_pointer {
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
.rounded_2xl {
|
||||
border-radius: var(--radii-2xl)
|
||||
}
|
||||
|
||||
.shadow_card {
|
||||
box-shadow: var(--shadows-card)
|
||||
}
|
||||
|
||||
.p_10 {
|
||||
padding: var(--spacing-10)
|
||||
}
|
||||
|
||||
.fs_3xl {
|
||||
font-size: var(--font-sizes-3xl)
|
||||
}
|
||||
|
||||
.max-w_3xl {
|
||||
max-width: var(--sizes-3xl)
|
||||
}
|
||||
|
||||
.bg_yellow\.50 {
|
||||
background: var(--colors-yellow-50)
|
||||
}
|
||||
|
||||
.border_yellow\.300 {
|
||||
border-color: var(--colors-yellow-300)
|
||||
}
|
||||
|
||||
.fs_md {
|
||||
font-size: var(--font-sizes-md)
|
||||
}
|
||||
|
||||
.text_yellow\.800 {
|
||||
color: var(--colors-yellow-800)
|
||||
}
|
||||
|
||||
.font_medium {
|
||||
font-weight: var(--font-weights-medium)
|
||||
}
|
||||
|
||||
.text_brand\.600 {
|
||||
color: var(--colors-brand-600)
|
||||
}
|
||||
|
||||
.aspect_1\/2\.8 {
|
||||
aspect-ratio: 1/2.8
|
||||
}
|
||||
|
||||
.max-w_120px {
|
||||
max-width: 120px
|
||||
}
|
||||
|
||||
.fs_2xs {
|
||||
font-size: var(--font-sizes-2xs)
|
||||
}
|
||||
|
||||
.text_gray\.600 {
|
||||
color: var(--colors-gray-600)
|
||||
}
|
||||
|
||||
.leading_tight {
|
||||
line-height: var(--line-heights-tight)
|
||||
}
|
||||
|
||||
.mt_auto {
|
||||
margin-top: auto
|
||||
}
|
||||
|
||||
.text_blue\.800 {
|
||||
color: var(--colors-blue-800)
|
||||
}
|
||||
|
||||
.border_blue\.300 {
|
||||
border-color: var(--colors-blue-300)
|
||||
}
|
||||
|
||||
.aspect_3\/4 {
|
||||
aspect-ratio: 3/4
|
||||
}
|
||||
|
||||
.max-w_180px {
|
||||
max-width: 180px
|
||||
}
|
||||
|
||||
.bg_gray\.50 {
|
||||
background: var(--colors-gray-50)
|
||||
}
|
||||
|
||||
.p_8 {
|
||||
padding: var(--spacing-8)
|
||||
}
|
||||
|
||||
.w_12 {
|
||||
width: var(--sizes-12)
|
||||
}
|
||||
|
||||
.h_12 {
|
||||
height: var(--sizes-12)
|
||||
}
|
||||
|
||||
.bg_brand\.600 {
|
||||
background: var(--colors-brand-600)
|
||||
}
|
||||
|
||||
.rounded_full {
|
||||
border-radius: var(--radii-full)
|
||||
}
|
||||
|
||||
.text_gray\.900 {
|
||||
color: var(--colors-gray-900)
|
||||
}
|
||||
|
||||
.leading_relaxed {
|
||||
line-height: var(--line-heights-relaxed)
|
||||
}
|
||||
|
||||
.bg_orange\.50 {
|
||||
background: var(--colors-orange-50)
|
||||
}
|
||||
|
||||
.border_orange\.200 {
|
||||
border-color: var(--colors-orange-200)
|
||||
}
|
||||
|
||||
.text_orange\.800 {
|
||||
color: var(--colors-orange-800)
|
||||
}
|
||||
|
||||
.text_orange\.700 {
|
||||
color: var(--colors-orange-700)
|
||||
}
|
||||
|
||||
.mb_1 {
|
||||
margin-bottom: var(--spacing-1)
|
||||
}
|
||||
|
||||
.border_2px_solid {
|
||||
border: 2px solid
|
||||
}
|
||||
|
||||
.border_brand\.200 {
|
||||
border-color: var(--colors-brand-200)
|
||||
}
|
||||
|
||||
.shadow_0_8px_24px_rgba\(0\,_0\,_0\,_0\.08\) {
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08)
|
||||
}
|
||||
|
||||
.w_100\% {
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.bg_blue\.600 {
|
||||
background: var(--colors-blue-600)
|
||||
}
|
||||
|
||||
.bg_gradient-to-br {
|
||||
background: gradient-to-br
|
||||
}
|
||||
|
||||
.to_indigo\.700 {
|
||||
--gradient-to: var(--colors-indigo-700)
|
||||
}
|
||||
|
||||
.mb_8 {
|
||||
margin-bottom: var(--spacing-8)
|
||||
}
|
||||
|
||||
.text_green\.600 {
|
||||
color: var(--colors-green-600)
|
||||
}
|
||||
|
||||
.bg_green\.50 {
|
||||
background: var(--colors-green-50)
|
||||
}
|
||||
|
||||
.border_green\.200 {
|
||||
border-color: var(--colors-green-200)
|
||||
}
|
||||
|
||||
.text_green\.800 {
|
||||
color: var(--colors-green-800)
|
||||
}
|
||||
|
||||
.text_green\.700 {
|
||||
color: var(--colors-green-700)
|
||||
}
|
||||
|
||||
.bg_blue\.50 {
|
||||
background: var(--colors-blue-50)
|
||||
}
|
||||
|
||||
.border_blue\.200 {
|
||||
border-color: var(--colors-blue-200)
|
||||
}
|
||||
|
||||
.fs_xs {
|
||||
font-size: var(--font-sizes-xs)
|
||||
}
|
||||
|
||||
.text_blue\.600 {
|
||||
color: var(--colors-blue-600)
|
||||
}
|
||||
|
||||
.text_blue\.700 {
|
||||
color: var(--colors-blue-700)
|
||||
}
|
||||
|
||||
.text-decor_underline {
|
||||
text-decoration: underline
|
||||
}
|
||||
|
||||
.text_red\.600 {
|
||||
color: var(--colors-red-600)
|
||||
}
|
||||
|
||||
.pl_6 {
|
||||
padding-left: var(--spacing-6)
|
||||
}
|
||||
|
||||
.bg_red\.50 {
|
||||
background: var(--colors-red-50)
|
||||
}
|
||||
|
||||
.border_red\.200 {
|
||||
border-color: var(--colors-red-200)
|
||||
}
|
||||
|
||||
.text_red\.800 {
|
||||
color: var(--colors-red-800)
|
||||
}
|
||||
|
||||
.fs_2xl {
|
||||
font-size: var(--font-sizes-2xl)
|
||||
}
|
||||
|
||||
.text_red\.700 {
|
||||
color: var(--colors-red-700)
|
||||
}
|
||||
|
||||
.w_160px {
|
||||
width: 160px
|
||||
}
|
||||
|
||||
.h_240px {
|
||||
height: 240px
|
||||
}
|
||||
|
||||
.border_gray\.300 {
|
||||
border-color: var(--colors-gray-300)
|
||||
}
|
||||
|
||||
.rounded_md {
|
||||
border-radius: var(--radii-md)
|
||||
}
|
||||
|
||||
.justify_center {
|
||||
justify-content: center
|
||||
}
|
||||
|
||||
.overflow_hidden {
|
||||
overflow: hidden
|
||||
}
|
||||
|
||||
.shadow_sm {
|
||||
box-shadow: var(--shadows-sm)
|
||||
}
|
||||
|
||||
.border_gray\.200 {
|
||||
border-color: var(--colors-gray-200)
|
||||
}
|
||||
|
||||
.fs_xl {
|
||||
font-size: var(--font-sizes-xl)
|
||||
}
|
||||
|
||||
.font_bold {
|
||||
font-weight: var(--font-weights-bold)
|
||||
}
|
||||
|
||||
.gap_2 {
|
||||
gap: var(--spacing-2)
|
||||
}
|
||||
|
||||
.mb_6 {
|
||||
margin-bottom: var(--spacing-6)
|
||||
}
|
||||
|
||||
.text_gray\.700 {
|
||||
color: var(--colors-gray-700)
|
||||
}
|
||||
|
||||
.bg_purple\.50 {
|
||||
background: var(--colors-purple-50)
|
||||
}
|
||||
|
||||
.border_purple\.200 {
|
||||
border-color: var(--colors-purple-200)
|
||||
}
|
||||
|
||||
.text_purple\.800 {
|
||||
color: var(--colors-purple-800)
|
||||
}
|
||||
|
||||
.text_purple\.700 {
|
||||
color: var(--colors-purple-700)
|
||||
}
|
||||
|
||||
.bg_indigo\.50 {
|
||||
background: var(--colors-indigo-50)
|
||||
}
|
||||
|
||||
.border_1px_solid {
|
||||
border: 1px solid
|
||||
}
|
||||
|
||||
.border_indigo\.200 {
|
||||
border-color: var(--colors-indigo-200)
|
||||
}
|
||||
|
||||
.p_4 {
|
||||
padding: var(--spacing-4)
|
||||
}
|
||||
|
||||
.text_indigo\.800 {
|
||||
color: var(--colors-indigo-800)
|
||||
}
|
||||
|
||||
.fs_sm {
|
||||
font-size: var(--font-sizes-sm)
|
||||
}
|
||||
|
||||
.text_indigo\.700 {
|
||||
color: var(--colors-indigo-700)
|
||||
}
|
||||
|
||||
.pl_4 {
|
||||
padding-left: var(--spacing-4)
|
||||
}
|
||||
|
||||
.mb_2 {
|
||||
margin-bottom: var(--spacing-2)
|
||||
}
|
||||
|
||||
.bg_gradient-to-r {
|
||||
background: gradient-to-r
|
||||
}
|
||||
|
||||
.from_purple\.600 {
|
||||
--gradient-from: var(--colors-purple-600)
|
||||
}
|
||||
|
||||
.to_indigo\.600 {
|
||||
--gradient-to: var(--colors-indigo-600)
|
||||
}
|
||||
|
||||
.text_white {
|
||||
color: var(--colors-white)
|
||||
}
|
||||
|
||||
.rounded_xl {
|
||||
border-radius: var(--radii-xl)
|
||||
}
|
||||
|
||||
.p_6 {
|
||||
padding: var(--spacing-6)
|
||||
}
|
||||
|
||||
.text_center {
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.fs_lg {
|
||||
font-size: var(--font-sizes-lg)
|
||||
}
|
||||
|
||||
.mb_3 {
|
||||
margin-bottom: var(--spacing-3)
|
||||
}
|
||||
|
||||
.mb_4 {
|
||||
margin-bottom: var(--spacing-4)
|
||||
}
|
||||
|
||||
.opacity_0\.9 {
|
||||
opacity: 0.9
|
||||
}
|
||||
|
||||
.d_inline-block {
|
||||
display: inline-block
|
||||
}
|
||||
|
||||
.px_6 {
|
||||
padding-inline: var(--spacing-6)
|
||||
}
|
||||
|
||||
.py_3 {
|
||||
padding-block: var(--spacing-3)
|
||||
}
|
||||
|
||||
.bg_white {
|
||||
background: var(--colors-white)
|
||||
}
|
||||
|
||||
.text_purple\.600 {
|
||||
color: var(--colors-purple-600)
|
||||
}
|
||||
|
||||
.font_semibold {
|
||||
font-weight: var(--font-weights-semibold)
|
||||
}
|
||||
|
||||
.rounded_lg {
|
||||
border-radius: var(--radii-lg)
|
||||
}
|
||||
|
||||
.text-decor_none {
|
||||
text-decoration: none
|
||||
}
|
||||
|
||||
.transition_all {
|
||||
transition-property: var(--transition-prop, all);
|
||||
transition-timing-function: var(--transition-easing, cubic-bezier(0.4, 0, 0.2, 1));
|
||||
transition-duration: var(--transition-duration, 150ms)
|
||||
}
|
||||
|
||||
.columns_auto {
|
||||
columns: auto
|
||||
}
|
||||
|
||||
.columns_3 {
|
||||
columns: 3
|
||||
}
|
||||
|
||||
.columns_1 {
|
||||
columns: 1
|
||||
}
|
||||
|
||||
.max-w_4xl {
|
||||
max-width: var(--sizes-4xl)
|
||||
}
|
||||
|
||||
.max-w_7xl {
|
||||
max-width: var(--sizes-7xl)
|
||||
}
|
||||
|
||||
.pos_relative {
|
||||
position: relative
|
||||
}
|
||||
|
||||
.max-w_6xl {
|
||||
max-width: var(--sizes-6xl)
|
||||
}
|
||||
|
||||
.mx_auto {
|
||||
margin-inline: auto
|
||||
}
|
||||
|
||||
.px_4 {
|
||||
padding-inline: var(--spacing-4)
|
||||
}
|
||||
|
||||
.py_12 {
|
||||
padding-block: var(--spacing-12)
|
||||
}
|
||||
|
||||
.gap_0 {
|
||||
gap: var(--spacing-0)
|
||||
}
|
||||
|
||||
.flex_row {
|
||||
flex-direction: row
|
||||
}
|
||||
|
||||
.gap_12 {
|
||||
gap: var(--spacing-12)
|
||||
}
|
||||
|
||||
.d_flex {
|
||||
display: flex
|
||||
}
|
||||
|
||||
.flex_column {
|
||||
flex-direction: column
|
||||
}
|
||||
|
||||
.gap_8 {
|
||||
gap: var(--spacing-8)
|
||||
}
|
||||
|
||||
.grid-cols_repeat\(3\,_minmax\(0\,_1fr\)\) {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr))
|
||||
}
|
||||
|
||||
.gap_4 {
|
||||
gap: var(--spacing-4)
|
||||
}
|
||||
|
||||
.items_center {
|
||||
align-items: center
|
||||
}
|
||||
|
||||
.d_grid {
|
||||
display: grid
|
||||
}
|
||||
|
||||
.grid-cols_repeat\(1\,_minmax\(0\,_1fr\)\) {
|
||||
grid-template-columns: repeat(1, minmax(0, 1fr))
|
||||
}
|
||||
|
||||
.gap_6 {
|
||||
gap: var(--spacing-6)
|
||||
}
|
||||
|
||||
.hover\:bg_brand\.50:is(:hover, [data-hover]) {
|
||||
background: var(--colors-brand-50)
|
||||
}
|
||||
|
||||
.hover\:bg_gray\.50:is(:hover, [data-hover]) {
|
||||
background: var(--colors-gray-50)
|
||||
}
|
||||
|
||||
.hover\:text_brand\.600:is(:hover, [data-hover]) {
|
||||
color: var(--colors-brand-600)
|
||||
}
|
||||
|
||||
.hover\:text_gray\.800:is(:hover, [data-hover]) {
|
||||
color: var(--colors-gray-800)
|
||||
}
|
||||
|
||||
.hover\:text_blue\.800:is(:hover, [data-hover]) {
|
||||
color: var(--colors-blue-800)
|
||||
}
|
||||
|
||||
.hover\:transform_translateY\(-1px\):is(:hover, [data-hover]) {
|
||||
transform: translateY(-1px)
|
||||
}
|
||||
|
||||
.hover\:shadow_lg:is(:hover, [data-hover]) {
|
||||
box-shadow: var(--shadows-lg)
|
||||
}
|
||||
@media screen and (min-width: 48em) {
|
||||
|
||||
.md\:p_8 {
|
||||
padding: var(--spacing-8)
|
||||
}
|
||||
|
||||
.md\:fs_3xl {
|
||||
font-size: var(--font-sizes-3xl)
|
||||
}
|
||||
|
||||
.md\:grid-cols_repeat\(3\,_minmax\(0\,_1fr\)\) {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr))
|
||||
}
|
||||
|
||||
.md\:grid-cols_repeat\(2\,_minmax\(0\,_1fr\)\) {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr))
|
||||
}
|
||||
|
||||
.md\:p_8 {
|
||||
padding: var(--spacing-8)
|
||||
}
|
||||
|
||||
.md\:fs_3xl {
|
||||
font-size: var(--font-sizes-3xl)
|
||||
}
|
||||
|
||||
.md\:grid-cols_repeat\(3\,_minmax\(0\,_1fr\)\) {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr))
|
||||
}
|
||||
|
||||
.md\:grid-cols_repeat\(2\,_minmax\(0\,_1fr\)\) {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr))
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 64em) {
|
||||
.lg\:grid-cols_repeat\(5\,_minmax\(0\,_1fr\)\) {
|
||||
grid-template-columns: repeat(5, minmax(0, 1fr))
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,246 +0,0 @@
|
||||
@layer utilities {
|
||||
|
||||
.min-h_100vh {
|
||||
min-height: 100vh
|
||||
}
|
||||
|
||||
.bg_gradient-to-br_from-brand\.50_to-brand\.100 {
|
||||
background: gradient-to-br from-brand.50 to-brand.100
|
||||
}
|
||||
|
||||
.leading_tight {
|
||||
line-height: var(--line-heights-tight)
|
||||
}
|
||||
|
||||
.text_brand\.600 {
|
||||
color: var(--colors-brand-600)
|
||||
}
|
||||
|
||||
.max-w_2xl {
|
||||
max-width: var(--sizes-2xl)
|
||||
}
|
||||
|
||||
.bg_brand\.600 {
|
||||
background: var(--colors-brand-600)
|
||||
}
|
||||
|
||||
.text_white {
|
||||
color: var(--colors-white)
|
||||
}
|
||||
|
||||
.px_8 {
|
||||
padding-inline: var(--spacing-8)
|
||||
}
|
||||
|
||||
.py_4 {
|
||||
padding-block: var(--spacing-4)
|
||||
}
|
||||
|
||||
.text_brand\.700 {
|
||||
color: var(--colors-brand-700)
|
||||
}
|
||||
|
||||
.fs_lg {
|
||||
font-size: var(--font-sizes-lg)
|
||||
}
|
||||
|
||||
.font_semibold {
|
||||
font-weight: var(--font-weights-semibold)
|
||||
}
|
||||
|
||||
.rounded_xl {
|
||||
border-radius: var(--radii-xl)
|
||||
}
|
||||
|
||||
.border_2px_solid {
|
||||
border: 2px solid
|
||||
}
|
||||
|
||||
.border_brand\.200 {
|
||||
border-color: var(--colors-brand-200)
|
||||
}
|
||||
|
||||
.d_grid {
|
||||
display: grid
|
||||
}
|
||||
|
||||
.grid-cols_1 {
|
||||
grid-template-columns: repeat(1, minmax(0, 1fr))
|
||||
}
|
||||
|
||||
.gap_8 {
|
||||
gap: var(--spacing-8)
|
||||
}
|
||||
|
||||
.mt_16 {
|
||||
margin-top: var(--spacing-16)
|
||||
}
|
||||
|
||||
.w_full {
|
||||
width: var(--sizes-full)
|
||||
}
|
||||
|
||||
.p_8 {
|
||||
padding: var(--spacing-8)
|
||||
}
|
||||
|
||||
.bg_white {
|
||||
background: var(--colors-white)
|
||||
}
|
||||
|
||||
.rounded_2xl {
|
||||
border-radius: var(--radii-2xl)
|
||||
}
|
||||
|
||||
.shadow_card {
|
||||
box-shadow: var(--shadows-card)
|
||||
}
|
||||
|
||||
.transition_all {
|
||||
transition-property: var(--transition-prop, all);
|
||||
transition-timing-function: var(--transition-easing, cubic-bezier(0.4, 0, 0.2, 1));
|
||||
transition-duration: var(--transition-duration, 150ms)
|
||||
}
|
||||
|
||||
.fs_4xl {
|
||||
font-size: var(--font-sizes-4xl)
|
||||
}
|
||||
|
||||
.mb_4 {
|
||||
margin-bottom: var(--spacing-4)
|
||||
}
|
||||
|
||||
.fs_xl {
|
||||
font-size: var(--font-sizes-xl)
|
||||
}
|
||||
|
||||
.font_bold {
|
||||
font-weight: var(--font-weights-bold)
|
||||
}
|
||||
|
||||
.text_gray\.900 {
|
||||
color: var(--colors-gray-900)
|
||||
}
|
||||
|
||||
.mb_3 {
|
||||
margin-bottom: var(--spacing-3)
|
||||
}
|
||||
|
||||
.text_gray\.600 {
|
||||
color: var(--colors-gray-600)
|
||||
}
|
||||
|
||||
.leading_relaxed {
|
||||
line-height: var(--line-heights-relaxed)
|
||||
}
|
||||
|
||||
.pos_relative {
|
||||
position: relative
|
||||
}
|
||||
|
||||
.max-w_6xl {
|
||||
max-width: var(--sizes-6xl)
|
||||
}
|
||||
|
||||
.mx_auto {
|
||||
margin-inline: auto
|
||||
}
|
||||
|
||||
.px_4 {
|
||||
padding-inline: var(--spacing-4)
|
||||
}
|
||||
|
||||
.gap_12 {
|
||||
gap: var(--spacing-12)
|
||||
}
|
||||
|
||||
.py_16 {
|
||||
padding-block: var(--spacing-16)
|
||||
}
|
||||
|
||||
.text_center {
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.flex_column {
|
||||
flex-direction: column
|
||||
}
|
||||
|
||||
.gap_6 {
|
||||
gap: var(--spacing-6)
|
||||
}
|
||||
|
||||
.max-w_4xl {
|
||||
max-width: var(--sizes-4xl)
|
||||
}
|
||||
|
||||
.d_flex {
|
||||
display: flex
|
||||
}
|
||||
|
||||
.items_center {
|
||||
align-items: center
|
||||
}
|
||||
|
||||
.justify_center {
|
||||
justify-content: center
|
||||
}
|
||||
|
||||
.gap_4 {
|
||||
gap: var(--spacing-4)
|
||||
}
|
||||
|
||||
.flex_row {
|
||||
flex-direction: row
|
||||
}
|
||||
|
||||
.mt_8 {
|
||||
margin-top: var(--spacing-8)
|
||||
}
|
||||
|
||||
.hover\:bg_brand\.700:is(:hover, [data-hover]) {
|
||||
background: var(--colors-brand-700)
|
||||
}
|
||||
|
||||
.hover\:border_brand\.400:is(:hover, [data-hover]) {
|
||||
border-color: var(--colors-brand-400)
|
||||
}
|
||||
|
||||
.hover\:transform_translateY\(-2px\):is(:hover, [data-hover]) {
|
||||
transform: translateY(-2px)
|
||||
}
|
||||
|
||||
.hover\:transform_translateY\(-4px\):is(:hover, [data-hover]) {
|
||||
transform: translateY(-4px)
|
||||
}
|
||||
|
||||
.hover\:shadow_modal:is(:hover, [data-hover]) {
|
||||
box-shadow: var(--shadows-modal)
|
||||
}
|
||||
@media screen and (min-width: 48em) {
|
||||
|
||||
.md\:fs_6xl {
|
||||
font-size: var(--font-sizes-6xl)
|
||||
}
|
||||
|
||||
.md\:fs_xl {
|
||||
font-size: var(--font-sizes-xl)
|
||||
}
|
||||
|
||||
.md\:grid-cols_3 {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr))
|
||||
}
|
||||
|
||||
.md\:fs_6xl {
|
||||
font-size: var(--font-sizes-6xl)
|
||||
}
|
||||
|
||||
.md\:fs_xl {
|
||||
font-size: var(--font-sizes-xl)
|
||||
}
|
||||
|
||||
.md\:grid-cols_3 {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr))
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,286 +0,0 @@
|
||||
@layer utilities {
|
||||
|
||||
.p_8 {
|
||||
padding: var(--spacing-8)
|
||||
}
|
||||
|
||||
.max-w_1200px {
|
||||
max-width: 1200px
|
||||
}
|
||||
|
||||
.mx_auto {
|
||||
margin-inline: auto
|
||||
}
|
||||
|
||||
.font_system-ui {
|
||||
font-family: system-ui
|
||||
}
|
||||
|
||||
.color-scheme_place-value {
|
||||
color-scheme: place-value
|
||||
}
|
||||
|
||||
.columns_6 {
|
||||
columns: 6
|
||||
}
|
||||
|
||||
.fs_2xl {
|
||||
font-size: var(--font-sizes-2xl)
|
||||
}
|
||||
|
||||
.font_bold {
|
||||
font-weight: var(--font-weights-bold)
|
||||
}
|
||||
|
||||
.mb_6 {
|
||||
margin-bottom: var(--spacing-6)
|
||||
}
|
||||
|
||||
.bg_gray\.50 {
|
||||
background: var(--colors-gray-50)
|
||||
}
|
||||
|
||||
.border_gray\.200 {
|
||||
border-color: var(--colors-gray-200)
|
||||
}
|
||||
|
||||
.d_flex {
|
||||
display: flex
|
||||
}
|
||||
|
||||
.gap_2 {
|
||||
gap: var(--spacing-2)
|
||||
}
|
||||
|
||||
.flex-wrap_wrap {
|
||||
flex-wrap: wrap
|
||||
}
|
||||
|
||||
.border_blue\.500 {
|
||||
border-color: var(--colors-blue-500)
|
||||
}
|
||||
|
||||
.bg_blue\.500 {
|
||||
background: var(--colors-blue-500)
|
||||
}
|
||||
|
||||
.text_white {
|
||||
color: var(--colors-white)
|
||||
}
|
||||
|
||||
.cursor_pointer {
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
.mt_3 {
|
||||
margin-top: var(--spacing-3)
|
||||
}
|
||||
|
||||
.px_3 {
|
||||
padding-inline: var(--spacing-3)
|
||||
}
|
||||
|
||||
.py_2 {
|
||||
padding-block: var(--spacing-2)
|
||||
}
|
||||
|
||||
.w_120px {
|
||||
width: 120px
|
||||
}
|
||||
|
||||
.bg_blue\.50 {
|
||||
background: var(--colors-blue-50)
|
||||
}
|
||||
|
||||
.border_blue\.200 {
|
||||
border-color: var(--colors-blue-200)
|
||||
}
|
||||
|
||||
.bg_green\.50 {
|
||||
background: var(--colors-green-50)
|
||||
}
|
||||
|
||||
.border_green\.200 {
|
||||
border-color: var(--colors-green-200)
|
||||
}
|
||||
|
||||
.bg_purple\.50 {
|
||||
background: var(--colors-purple-50)
|
||||
}
|
||||
|
||||
.border_purple\.200 {
|
||||
border-color: var(--colors-purple-200)
|
||||
}
|
||||
|
||||
.text_capitalize {
|
||||
text-transform: capitalize
|
||||
}
|
||||
|
||||
.bg_orange\.50 {
|
||||
background: var(--colors-orange-50)
|
||||
}
|
||||
|
||||
.border_orange\.200 {
|
||||
border-color: var(--colors-orange-200)
|
||||
}
|
||||
|
||||
.grid-cols_repeat\(auto-fit\,_minmax\(250px\,_1fr\)\) {
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))
|
||||
}
|
||||
|
||||
.bg_repeating-conic-gradient\(from_0deg\,_\#eee_0deg_90deg\,_\#ddd_90deg_180deg\) {
|
||||
background: repeating-conic-gradient(from 0deg, #eee 0deg 90deg, #ddd 90deg 180deg)
|
||||
}
|
||||
|
||||
.mb_8 {
|
||||
margin-bottom: var(--spacing-8)
|
||||
}
|
||||
|
||||
.bg_pink\.50 {
|
||||
background: var(--colors-pink-50)
|
||||
}
|
||||
|
||||
.border_pink\.200 {
|
||||
border-color: var(--colors-pink-200)
|
||||
}
|
||||
|
||||
.mb_4 {
|
||||
margin-bottom: var(--spacing-4)
|
||||
}
|
||||
|
||||
.text_gray\.600 {
|
||||
color: var(--colors-gray-600)
|
||||
}
|
||||
|
||||
.d_grid {
|
||||
display: grid
|
||||
}
|
||||
|
||||
.grid-cols_repeat\(auto-fit\,_minmax\(200px\,_1fr\)\) {
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))
|
||||
}
|
||||
|
||||
.gap_4 {
|
||||
gap: var(--spacing-4)
|
||||
}
|
||||
|
||||
.items_start {
|
||||
align-items: start
|
||||
}
|
||||
|
||||
.text_center {
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.font_medium {
|
||||
font-weight: var(--font-weights-medium)
|
||||
}
|
||||
|
||||
.p_2 {
|
||||
padding: var(--spacing-2)
|
||||
}
|
||||
|
||||
.bg_white {
|
||||
background: var(--colors-white)
|
||||
}
|
||||
|
||||
.d_inline-block {
|
||||
display: inline-block
|
||||
}
|
||||
|
||||
.p_4 {
|
||||
padding: var(--spacing-4)
|
||||
}
|
||||
|
||||
.bg_gray\.100 {
|
||||
background: var(--colors-gray-100)
|
||||
}
|
||||
|
||||
.rounded_md {
|
||||
border-radius: var(--radii-md)
|
||||
}
|
||||
|
||||
.border_1px_solid {
|
||||
border: 1px solid
|
||||
}
|
||||
|
||||
.border_gray\.300 {
|
||||
border-color: var(--colors-gray-300)
|
||||
}
|
||||
|
||||
.fs_lg {
|
||||
font-size: var(--font-sizes-lg)
|
||||
}
|
||||
|
||||
.font_semibold {
|
||||
font-weight: var(--font-weights-semibold)
|
||||
}
|
||||
|
||||
.mb_3 {
|
||||
margin-bottom: var(--spacing-3)
|
||||
}
|
||||
|
||||
.fs_sm {
|
||||
font-size: var(--font-sizes-sm)
|
||||
}
|
||||
|
||||
.text_gray\.700 {
|
||||
color: var(--colors-gray-700)
|
||||
}
|
||||
|
||||
.leading_1\.6 {
|
||||
line-height: 1.6
|
||||
}
|
||||
|
||||
.mb_2 {
|
||||
margin-bottom: var(--spacing-2)
|
||||
}
|
||||
|
||||
.w_180pt {
|
||||
width: 180pt
|
||||
}
|
||||
|
||||
.h_200pt {
|
||||
height: 200pt
|
||||
}
|
||||
|
||||
.w_100pt {
|
||||
width: 100pt
|
||||
}
|
||||
|
||||
.h_120pt {
|
||||
height: 120pt
|
||||
}
|
||||
|
||||
.w_150pt {
|
||||
width: 150pt
|
||||
}
|
||||
|
||||
.h_180pt {
|
||||
height: 180pt
|
||||
}
|
||||
|
||||
.w_300pt {
|
||||
width: 300pt
|
||||
}
|
||||
|
||||
.h_400pt {
|
||||
height: 400pt
|
||||
}
|
||||
|
||||
.w_500pt {
|
||||
width: 500pt
|
||||
}
|
||||
|
||||
.h_600pt {
|
||||
height: 600pt
|
||||
}
|
||||
|
||||
.hover\:bg_blue\.600:is(:hover, [data-hover]) {
|
||||
background: var(--colors-blue-600)
|
||||
}
|
||||
|
||||
.hover\:bg_gray\.100:is(:hover, [data-hover]) {
|
||||
background: var(--colors-gray-100)
|
||||
}
|
||||
}
|
||||
@@ -1,328 +0,0 @@
|
||||
@layer utilities {
|
||||
|
||||
.min-h_screen {
|
||||
min-height: 100vh
|
||||
}
|
||||
|
||||
.py_8 {
|
||||
padding-block: var(--spacing-8)
|
||||
}
|
||||
|
||||
.fs_3xl {
|
||||
font-size: var(--font-sizes-3xl)
|
||||
}
|
||||
|
||||
.font_bold {
|
||||
font-weight: var(--font-weights-bold)
|
||||
}
|
||||
|
||||
.text_gray\.900 {
|
||||
color: var(--colors-gray-900)
|
||||
}
|
||||
|
||||
.text_gray\.600 {
|
||||
color: var(--colors-gray-600)
|
||||
}
|
||||
|
||||
.bg_green\.100 {
|
||||
background: var(--colors-green-100)
|
||||
}
|
||||
|
||||
.text_green\.700 {
|
||||
color: var(--colors-green-700)
|
||||
}
|
||||
|
||||
.bg_red\.100 {
|
||||
background: var(--colors-red-100)
|
||||
}
|
||||
|
||||
.bg_gray\.100 {
|
||||
background: var(--colors-gray-100)
|
||||
}
|
||||
|
||||
.text_red\.700 {
|
||||
color: var(--colors-red-700)
|
||||
}
|
||||
|
||||
.py_1 {
|
||||
padding-block: var(--spacing-1)
|
||||
}
|
||||
|
||||
.rounded_full {
|
||||
border-radius: var(--radii-full)
|
||||
}
|
||||
|
||||
.border_brand\.600 {
|
||||
border-color: var(--colors-brand-600)
|
||||
}
|
||||
|
||||
.bg_brand\.50 {
|
||||
background: var(--colors-brand-50)
|
||||
}
|
||||
|
||||
.text_brand\.700 {
|
||||
color: var(--colors-brand-700)
|
||||
}
|
||||
|
||||
.text_gray\.700 {
|
||||
color: var(--colors-gray-700)
|
||||
}
|
||||
|
||||
.transition_all {
|
||||
transition-property: var(--transition-prop, all);
|
||||
transition-timing-function: var(--transition-easing, cubic-bezier(0.4, 0, 0.2, 1));
|
||||
transition-duration: var(--transition-duration, 150ms)
|
||||
}
|
||||
|
||||
.w_20 {
|
||||
width: var(--sizes-20)
|
||||
}
|
||||
|
||||
.px_3 {
|
||||
padding-inline: var(--spacing-3)
|
||||
}
|
||||
|
||||
.py_2 {
|
||||
padding-block: var(--spacing-2)
|
||||
}
|
||||
|
||||
.border_2px_solid {
|
||||
border: 2px solid
|
||||
}
|
||||
|
||||
.min-h_300px {
|
||||
min-height: 300px
|
||||
}
|
||||
|
||||
.max-w_sm {
|
||||
max-width: var(--sizes-sm)
|
||||
}
|
||||
|
||||
.max-h_400px {
|
||||
max-height: 400px
|
||||
}
|
||||
|
||||
.shadow_card {
|
||||
box-shadow: var(--shadows-card)
|
||||
}
|
||||
|
||||
.mb_4 {
|
||||
margin-bottom: var(--spacing-4)
|
||||
}
|
||||
|
||||
.aspect_3\/4 {
|
||||
aspect-ratio: 3/4
|
||||
}
|
||||
|
||||
.bg_gray\.50 {
|
||||
background: var(--colors-gray-50)
|
||||
}
|
||||
|
||||
.rounded_lg {
|
||||
border-radius: var(--radii-lg)
|
||||
}
|
||||
|
||||
.overflow_hidden {
|
||||
overflow: hidden
|
||||
}
|
||||
|
||||
.bg_white {
|
||||
background: var(--colors-white)
|
||||
}
|
||||
|
||||
.border-b_1px_solid {
|
||||
border-bottom: 1px solid
|
||||
}
|
||||
|
||||
.border_gray\.200 {
|
||||
border-color: var(--colors-gray-200)
|
||||
}
|
||||
|
||||
.font_medium {
|
||||
font-weight: var(--font-weights-medium)
|
||||
}
|
||||
|
||||
.gap_1 {
|
||||
gap: var(--spacing-1)
|
||||
}
|
||||
|
||||
.fs_xs {
|
||||
font-size: var(--font-sizes-xs)
|
||||
}
|
||||
|
||||
.text_blue\.600 {
|
||||
color: var(--colors-blue-600)
|
||||
}
|
||||
|
||||
.p_2 {
|
||||
padding: var(--spacing-2)
|
||||
}
|
||||
|
||||
.w_full {
|
||||
width: var(--sizes-full)
|
||||
}
|
||||
|
||||
.h_full {
|
||||
height: var(--sizes-full)
|
||||
}
|
||||
|
||||
.bg_blue\.50 {
|
||||
background: var(--colors-blue-50)
|
||||
}
|
||||
|
||||
.border_1px_solid {
|
||||
border: 1px solid
|
||||
}
|
||||
|
||||
.border_blue\.200 {
|
||||
border-color: var(--colors-blue-200)
|
||||
}
|
||||
|
||||
.rounded_xl {
|
||||
border-radius: var(--radii-xl)
|
||||
}
|
||||
|
||||
.p_6 {
|
||||
padding: var(--spacing-6)
|
||||
}
|
||||
|
||||
.fs_lg {
|
||||
font-size: var(--font-sizes-lg)
|
||||
}
|
||||
|
||||
.font_semibold {
|
||||
font-weight: var(--font-weights-semibold)
|
||||
}
|
||||
|
||||
.text_blue\.900 {
|
||||
color: var(--colors-blue-900)
|
||||
}
|
||||
|
||||
.mb_3 {
|
||||
margin-bottom: var(--spacing-3)
|
||||
}
|
||||
|
||||
.text_blue\.800 {
|
||||
color: var(--colors-blue-800)
|
||||
}
|
||||
|
||||
.fs_sm {
|
||||
font-size: var(--font-sizes-sm)
|
||||
}
|
||||
|
||||
.w_200pt {
|
||||
width: 200pt
|
||||
}
|
||||
|
||||
.h_250pt {
|
||||
height: 250pt
|
||||
}
|
||||
|
||||
.w_100pt {
|
||||
width: 100pt
|
||||
}
|
||||
|
||||
.h_120pt {
|
||||
height: 120pt
|
||||
}
|
||||
|
||||
.pos_relative {
|
||||
position: relative
|
||||
}
|
||||
|
||||
.max-w_6xl {
|
||||
max-width: var(--sizes-6xl)
|
||||
}
|
||||
|
||||
.mx_auto {
|
||||
margin-inline: auto
|
||||
}
|
||||
|
||||
.px_4 {
|
||||
padding-inline: var(--spacing-4)
|
||||
}
|
||||
|
||||
.gap_8 {
|
||||
gap: var(--spacing-8)
|
||||
}
|
||||
|
||||
.text_center {
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.flex_column {
|
||||
flex-direction: column
|
||||
}
|
||||
|
||||
.gap_2 {
|
||||
gap: var(--spacing-2)
|
||||
}
|
||||
|
||||
.justify_center {
|
||||
justify-content: center
|
||||
}
|
||||
|
||||
.gap_6 {
|
||||
gap: var(--spacing-6)
|
||||
}
|
||||
|
||||
.d_flex {
|
||||
display: flex
|
||||
}
|
||||
|
||||
.items_center {
|
||||
align-items: center
|
||||
}
|
||||
|
||||
.gap_3 {
|
||||
gap: var(--spacing-3)
|
||||
}
|
||||
|
||||
.flex_row {
|
||||
flex-direction: row
|
||||
}
|
||||
|
||||
.flex-wrap_wrap {
|
||||
flex-wrap: wrap
|
||||
}
|
||||
|
||||
.d_grid {
|
||||
display: grid
|
||||
}
|
||||
|
||||
.grid-cols_repeat\(2\,_minmax\(0\,_1fr\)\) {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr))
|
||||
}
|
||||
|
||||
.gap_4 {
|
||||
gap: var(--spacing-4)
|
||||
}
|
||||
|
||||
.focus\:border_brand\.400:is(:focus, [data-focus]) {
|
||||
border-color: var(--colors-brand-400)
|
||||
}
|
||||
|
||||
.focus\:ring_none:is(:focus, [data-focus]) {
|
||||
outline: var(--borders-none)
|
||||
}
|
||||
|
||||
.hover\:border_brand\.400:is(:hover, [data-hover]) {
|
||||
border-color: var(--colors-brand-400)
|
||||
}
|
||||
|
||||
.hover\:bg_brand\.25:is(:hover, [data-hover]) {
|
||||
background: brand.25
|
||||
}
|
||||
|
||||
@media screen and (min-width: 48em) {
|
||||
.md\:grid-cols_repeat\(3\,_minmax\(0\,_1fr\)\) {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr))
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 64em) {
|
||||
.lg\:grid-cols_repeat\(5\,_minmax\(0\,_1fr\)\) {
|
||||
grid-template-columns: repeat(5, minmax(0, 1fr))
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,362 +0,0 @@
|
||||
@layer utilities {
|
||||
|
||||
.justify_center {
|
||||
justify-content: center
|
||||
}
|
||||
|
||||
.h_100vh {
|
||||
height: 100vh
|
||||
}
|
||||
|
||||
.text_center {
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.fs_2xl {
|
||||
font-size: var(--font-sizes-2xl)
|
||||
}
|
||||
|
||||
.text_gray\.600 {
|
||||
color: var(--colors-gray-600)
|
||||
}
|
||||
|
||||
.mb_4 {
|
||||
margin-bottom: var(--spacing-4)
|
||||
}
|
||||
|
||||
.w_100vw {
|
||||
width: 100vw
|
||||
}
|
||||
|
||||
.h_calc\(100vh_-_80px\) {
|
||||
height: calc(100vh - 80px)
|
||||
}
|
||||
|
||||
.border-b_1px_solid {
|
||||
border-bottom: 1px solid
|
||||
}
|
||||
|
||||
.fs_xl {
|
||||
font-size: var(--font-sizes-xl)
|
||||
}
|
||||
|
||||
.mb_1 {
|
||||
margin-bottom: var(--spacing-1)
|
||||
}
|
||||
|
||||
.min-w_300px {
|
||||
min-width: 300px
|
||||
}
|
||||
|
||||
.fs_lg {
|
||||
font-size: var(--font-sizes-lg)
|
||||
}
|
||||
|
||||
.font_medium {
|
||||
font-weight: var(--font-weights-medium)
|
||||
}
|
||||
|
||||
.p_1 {
|
||||
padding: var(--spacing-1)
|
||||
}
|
||||
|
||||
.rounded_sm {
|
||||
border-radius: var(--radii-sm)
|
||||
}
|
||||
|
||||
.text_gray\.500 {
|
||||
color: var(--colors-gray-500)
|
||||
}
|
||||
|
||||
.border_blue\.300 {
|
||||
border-color: var(--colors-blue-300)
|
||||
}
|
||||
|
||||
.bg_blue\.500 {
|
||||
background: var(--colors-blue-500)
|
||||
}
|
||||
|
||||
.text_gray\.700 {
|
||||
color: var(--colors-gray-700)
|
||||
}
|
||||
|
||||
.text_capitalize {
|
||||
text-transform: capitalize
|
||||
}
|
||||
|
||||
.border_gray\.300 {
|
||||
border-color: var(--colors-gray-300)
|
||||
}
|
||||
|
||||
.bg_white {
|
||||
background: var(--colors-white)
|
||||
}
|
||||
|
||||
.cursor_pointer {
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
.bg_green\.100 {
|
||||
background: var(--colors-green-100)
|
||||
}
|
||||
|
||||
.bg_red\.100 {
|
||||
background: var(--colors-red-100)
|
||||
}
|
||||
|
||||
.bg_blue\.100 {
|
||||
background: var(--colors-blue-100)
|
||||
}
|
||||
|
||||
.text_red\.700 {
|
||||
color: var(--colors-red-700)
|
||||
}
|
||||
|
||||
.text_blue\.700 {
|
||||
color: var(--colors-blue-700)
|
||||
}
|
||||
|
||||
.px_3 {
|
||||
padding-inline: var(--spacing-3)
|
||||
}
|
||||
|
||||
.py_1 {
|
||||
padding-block: var(--spacing-1)
|
||||
}
|
||||
|
||||
.mt_3 {
|
||||
margin-top: var(--spacing-3)
|
||||
}
|
||||
|
||||
.bg_red\.50 {
|
||||
background: var(--colors-red-50)
|
||||
}
|
||||
|
||||
.border_red\.200 {
|
||||
border-color: var(--colors-red-200)
|
||||
}
|
||||
|
||||
.text_red\.800 {
|
||||
color: var(--colors-red-800)
|
||||
}
|
||||
|
||||
.ml_2 {
|
||||
margin-left: var(--spacing-2)
|
||||
}
|
||||
|
||||
.bg_yellow\.50 {
|
||||
background: var(--colors-yellow-50)
|
||||
}
|
||||
|
||||
.border_yellow\.200 {
|
||||
border-color: var(--colors-yellow-200)
|
||||
}
|
||||
|
||||
.text_yellow\.700 {
|
||||
color: var(--colors-yellow-700)
|
||||
}
|
||||
|
||||
.p_2 {
|
||||
padding: var(--spacing-2)
|
||||
}
|
||||
|
||||
.bg_green\.50 {
|
||||
background: var(--colors-green-50)
|
||||
}
|
||||
|
||||
.border_1px_solid {
|
||||
border: 1px solid
|
||||
}
|
||||
|
||||
.border_green\.200 {
|
||||
border-color: var(--colors-green-200)
|
||||
}
|
||||
|
||||
.rounded_md {
|
||||
border-radius: var(--radii-md)
|
||||
}
|
||||
|
||||
.text_green\.700 {
|
||||
color: var(--colors-green-700)
|
||||
}
|
||||
|
||||
.h_4px {
|
||||
height: 4px
|
||||
}
|
||||
|
||||
.cursor_ns-resize {
|
||||
cursor: ns-resize
|
||||
}
|
||||
|
||||
.overflow_hidden {
|
||||
overflow: hidden
|
||||
}
|
||||
|
||||
.w_100\% {
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.border-r_1px_solid {
|
||||
border-right: 1px solid
|
||||
}
|
||||
|
||||
.border_gray\.200 {
|
||||
border-color: var(--colors-gray-200)
|
||||
}
|
||||
|
||||
.w_4px {
|
||||
width: 4px
|
||||
}
|
||||
|
||||
.border_none {
|
||||
border: var(--borders-none)
|
||||
}
|
||||
|
||||
.bg_gray\.300 {
|
||||
background: var(--colors-gray-300)
|
||||
}
|
||||
|
||||
.cursor_ew-resize {
|
||||
cursor: ew-resize
|
||||
}
|
||||
|
||||
.transition_background-color_0\.2s {
|
||||
transition: background-color 0.2s
|
||||
}
|
||||
|
||||
.shrink_0 {
|
||||
flex-shrink: 0
|
||||
}
|
||||
|
||||
.h_100\% {
|
||||
height: 100%
|
||||
}
|
||||
|
||||
.pos_fixed {
|
||||
position: fixed
|
||||
}
|
||||
|
||||
.bottom_0 {
|
||||
bottom: var(--spacing-0)
|
||||
}
|
||||
|
||||
.left_0 {
|
||||
left: var(--spacing-0)
|
||||
}
|
||||
|
||||
.right_0 {
|
||||
right: var(--spacing-0)
|
||||
}
|
||||
|
||||
.max-h_200px {
|
||||
max-height: 200px
|
||||
}
|
||||
|
||||
.bg_gray\.900 {
|
||||
background: var(--colors-gray-900)
|
||||
}
|
||||
|
||||
.text_white {
|
||||
color: var(--colors-white)
|
||||
}
|
||||
|
||||
.p_4 {
|
||||
padding: var(--spacing-4)
|
||||
}
|
||||
|
||||
.overflow-y_auto {
|
||||
overflow-y: auto
|
||||
}
|
||||
|
||||
.font_mono {
|
||||
font-family: var(--fonts-mono)
|
||||
}
|
||||
|
||||
.fs_xs {
|
||||
font-size: var(--font-sizes-xs)
|
||||
}
|
||||
|
||||
.z_1000 {
|
||||
z-index: 1000
|
||||
}
|
||||
|
||||
.font_bold {
|
||||
font-weight: var(--font-weights-bold)
|
||||
}
|
||||
|
||||
.mb_2 {
|
||||
margin-bottom: var(--spacing-2)
|
||||
}
|
||||
|
||||
.text_blue\.300 {
|
||||
color: var(--colors-blue-300)
|
||||
}
|
||||
|
||||
.text_green\.300 {
|
||||
color: var(--colors-green-300)
|
||||
}
|
||||
|
||||
.text_green\.400 {
|
||||
color: var(--colors-green-400)
|
||||
}
|
||||
|
||||
.text_red\.400 {
|
||||
color: var(--colors-red-400)
|
||||
}
|
||||
|
||||
.justify_space-between {
|
||||
justify-content: space-between
|
||||
}
|
||||
|
||||
.gap_10px {
|
||||
gap: 10px
|
||||
}
|
||||
|
||||
.gap_4 {
|
||||
gap: var(--spacing-4)
|
||||
}
|
||||
|
||||
.fs_sm {
|
||||
font-size: var(--font-sizes-sm)
|
||||
}
|
||||
|
||||
.items_center {
|
||||
align-items: center
|
||||
}
|
||||
|
||||
.gap_2 {
|
||||
gap: var(--spacing-2)
|
||||
}
|
||||
|
||||
.flex_row {
|
||||
flex-direction: row
|
||||
}
|
||||
|
||||
.d_flex {
|
||||
display: flex
|
||||
}
|
||||
|
||||
.items_flex-start {
|
||||
align-items: flex-start
|
||||
}
|
||||
|
||||
.gap_1 {
|
||||
gap: var(--spacing-1)
|
||||
}
|
||||
|
||||
.flex_column {
|
||||
flex-direction: column
|
||||
}
|
||||
|
||||
.hover\:bg_blue\.600:is(:hover, [data-hover]) {
|
||||
background: var(--colors-blue-600)
|
||||
}
|
||||
|
||||
.hover\:bg_gray\.50:is(:hover, [data-hover]) {
|
||||
background: var(--colors-gray-50)
|
||||
}
|
||||
|
||||
.hover\:bg_blue\.400:is(:hover, [data-hover]) {
|
||||
background: var(--colors-blue-400)
|
||||
}
|
||||
}
|
||||
@@ -1,303 +0,0 @@
|
||||
@layer utilities {
|
||||
|
||||
.px_3 {
|
||||
padding-inline: var(--spacing-3)
|
||||
}
|
||||
|
||||
.py_2 {
|
||||
padding-block: var(--spacing-2)
|
||||
}
|
||||
|
||||
.rounded_lg {
|
||||
border-radius: var(--radii-lg)
|
||||
}
|
||||
|
||||
.transform_rotate\(180deg\) {
|
||||
transform: rotate(180deg)
|
||||
}
|
||||
|
||||
.transform_rotate\(0deg\) {
|
||||
transform: rotate(0deg)
|
||||
}
|
||||
|
||||
.transition_transform {
|
||||
transition-property: var(--transition-prop, transform);
|
||||
transition-timing-function: var(--transition-easing, cubic-bezier(0.4, 0, 0.2, 1));
|
||||
transition-duration: var(--transition-duration, 150ms)
|
||||
}
|
||||
|
||||
.rounded_xl {
|
||||
border-radius: var(--radii-xl)
|
||||
}
|
||||
|
||||
.shadow_lg {
|
||||
box-shadow: var(--shadows-lg)
|
||||
}
|
||||
|
||||
.border_1px_solid {
|
||||
border: 1px solid
|
||||
}
|
||||
|
||||
.border_gray\.200 {
|
||||
border-color: var(--colors-gray-200)
|
||||
}
|
||||
|
||||
.p_6 {
|
||||
padding: var(--spacing-6)
|
||||
}
|
||||
|
||||
.min-w_320px {
|
||||
min-width: 320px
|
||||
}
|
||||
|
||||
.max-w_400px {
|
||||
max-width: 400px
|
||||
}
|
||||
|
||||
.max-h_80vh {
|
||||
max-height: 80vh
|
||||
}
|
||||
|
||||
.overflow-y_auto {
|
||||
overflow-y: auto
|
||||
}
|
||||
|
||||
.z_50 {
|
||||
z-index: 50
|
||||
}
|
||||
|
||||
.fs_lg {
|
||||
font-size: var(--font-sizes-lg)
|
||||
}
|
||||
|
||||
.font_semibold {
|
||||
font-weight: var(--font-weights-semibold)
|
||||
}
|
||||
|
||||
.fs_xs {
|
||||
font-size: var(--font-sizes-xs)
|
||||
}
|
||||
|
||||
.text_gray\.500 {
|
||||
color: var(--colors-gray-500)
|
||||
}
|
||||
|
||||
.text_gray\.600 {
|
||||
color: var(--colors-gray-600)
|
||||
}
|
||||
|
||||
.font_medium {
|
||||
font-weight: var(--font-weights-medium)
|
||||
}
|
||||
|
||||
.bg_brand\.600 {
|
||||
background: var(--colors-brand-600)
|
||||
}
|
||||
|
||||
.bg_gray\.300 {
|
||||
background: var(--colors-gray-300)
|
||||
}
|
||||
|
||||
.w_11 {
|
||||
width: var(--sizes-11)
|
||||
}
|
||||
|
||||
.h_6 {
|
||||
height: var(--sizes-6)
|
||||
}
|
||||
|
||||
.transform_translateX\(20px\) {
|
||||
transform: translateX(20px)
|
||||
}
|
||||
|
||||
.transform_translateX\(0px\) {
|
||||
transform: translateX(0px)
|
||||
}
|
||||
|
||||
.d_block {
|
||||
display: block
|
||||
}
|
||||
|
||||
.w_5 {
|
||||
width: var(--sizes-5)
|
||||
}
|
||||
|
||||
.h_5 {
|
||||
height: var(--sizes-5)
|
||||
}
|
||||
|
||||
.shadow_sm {
|
||||
box-shadow: var(--shadows-sm)
|
||||
}
|
||||
|
||||
.transition_transform_0\.2s {
|
||||
transition: transform 0.2s
|
||||
}
|
||||
|
||||
.will-change_transform {
|
||||
will-change: transform
|
||||
}
|
||||
|
||||
.w_4 {
|
||||
width: var(--sizes-4)
|
||||
}
|
||||
|
||||
.h_4 {
|
||||
height: var(--sizes-4)
|
||||
}
|
||||
|
||||
.rounded_full {
|
||||
border-radius: var(--radii-full)
|
||||
}
|
||||
|
||||
.border_2px_solid {
|
||||
border: 2px solid
|
||||
}
|
||||
|
||||
.border_gray\.300 {
|
||||
border-color: var(--colors-gray-300)
|
||||
}
|
||||
|
||||
.bg_white {
|
||||
background: var(--colors-white)
|
||||
}
|
||||
|
||||
.transition_all {
|
||||
transition-property: var(--transition-prop, all);
|
||||
transition-timing-function: var(--transition-easing, cubic-bezier(0.4, 0, 0.2, 1));
|
||||
transition-duration: var(--transition-duration, 150ms)
|
||||
}
|
||||
.\[\&\[data-state\=checked\]\]\:border_brand\.600[data-state=checked] {
|
||||
border-color: var(--colors-brand-600)
|
||||
}
|
||||
|
||||
.justify_center {
|
||||
justify-content: center
|
||||
}
|
||||
|
||||
.w_full {
|
||||
width: var(--sizes-full)
|
||||
}
|
||||
|
||||
.h_full {
|
||||
height: var(--sizes-full)
|
||||
}
|
||||
|
||||
.pos_relative {
|
||||
position: relative
|
||||
}
|
||||
.after\:content_\"\"::after {
|
||||
content: ""
|
||||
}
|
||||
.after\:d_block::after {
|
||||
display: block
|
||||
}
|
||||
.after\:w_1\.5::after {
|
||||
width: var(--sizes-1\.5)
|
||||
}
|
||||
.after\:h_1\.5::after {
|
||||
height: var(--sizes-1\.5)
|
||||
}
|
||||
.after\:rounded_full::after {
|
||||
border-radius: var(--radii-full)
|
||||
}
|
||||
.after\:bg_brand\.600::after {
|
||||
background: var(--colors-brand-600)
|
||||
}
|
||||
|
||||
.fs_sm {
|
||||
font-size: var(--font-sizes-sm)
|
||||
}
|
||||
|
||||
.text_gray\.900 {
|
||||
color: var(--colors-gray-900)
|
||||
}
|
||||
|
||||
.cursor_pointer {
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
.flex_1 {
|
||||
flex: 1 1 0%
|
||||
}
|
||||
|
||||
.gap_6 {
|
||||
gap: var(--spacing-6)
|
||||
}
|
||||
|
||||
.gap_1 {
|
||||
gap: var(--spacing-1)
|
||||
}
|
||||
|
||||
.gap_4 {
|
||||
gap: var(--spacing-4)
|
||||
}
|
||||
|
||||
.flex_column {
|
||||
flex-direction: column
|
||||
}
|
||||
|
||||
.gap_2 {
|
||||
gap: var(--spacing-2)
|
||||
}
|
||||
|
||||
.justify_space-between {
|
||||
justify-content: space-between
|
||||
}
|
||||
|
||||
.gap_10px {
|
||||
gap: 10px
|
||||
}
|
||||
|
||||
.d_flex {
|
||||
display: flex
|
||||
}
|
||||
|
||||
.items_center {
|
||||
align-items: center
|
||||
}
|
||||
|
||||
.gap_3 {
|
||||
gap: var(--spacing-3)
|
||||
}
|
||||
|
||||
.flex_row {
|
||||
flex-direction: row
|
||||
}
|
||||
|
||||
.focus\:ring_2px:is(:focus, [data-focus]) {
|
||||
outline: 2px
|
||||
}
|
||||
|
||||
.focus\:ring_brand\.500:is(:focus, [data-focus]) {
|
||||
outline-color: var(--colors-brand-500)
|
||||
}
|
||||
|
||||
.focus\:ring_1px:is(:focus, [data-focus]) {
|
||||
outline-offset: 1px
|
||||
}
|
||||
|
||||
.hover\:bg_gray\.50:is(:hover, [data-hover]) {
|
||||
background: var(--colors-gray-50)
|
||||
}
|
||||
|
||||
.hover\:border_gray\.300:is(:hover, [data-hover]) {
|
||||
border-color: var(--colors-gray-300)
|
||||
}
|
||||
|
||||
.hover\:text_gray\.700:is(:hover, [data-hover]) {
|
||||
color: var(--colors-gray-700)
|
||||
}
|
||||
|
||||
.hover\:bg_brand\.700:is(:hover, [data-hover]) {
|
||||
background: var(--colors-brand-700)
|
||||
}
|
||||
|
||||
.hover\:bg_gray\.400:is(:hover, [data-hover]) {
|
||||
background: var(--colors-gray-400)
|
||||
}
|
||||
|
||||
.hover\:border_brand\.400:is(:hover, [data-hover]) {
|
||||
border-color: var(--colors-brand-400)
|
||||
}
|
||||
}
|
||||
@@ -1,246 +0,0 @@
|
||||
@layer utilities {
|
||||
|
||||
.pos_fixed {
|
||||
position: fixed
|
||||
}
|
||||
|
||||
.top_4 {
|
||||
top: var(--spacing-4)
|
||||
}
|
||||
|
||||
.right_4 {
|
||||
right: var(--spacing-4)
|
||||
}
|
||||
|
||||
.z_40 {
|
||||
z-index: 40
|
||||
}
|
||||
|
||||
.opacity_0\.9 {
|
||||
opacity: 0.9
|
||||
}
|
||||
|
||||
.gap_2 {
|
||||
gap: var(--spacing-2)
|
||||
}
|
||||
|
||||
.border_1px_solid {
|
||||
border: 1px solid
|
||||
}
|
||||
|
||||
.fs_lg {
|
||||
font-size: var(--font-sizes-lg)
|
||||
}
|
||||
|
||||
.transition_transform {
|
||||
transition-property: var(--transition-prop, transform);
|
||||
transition-timing-function: var(--transition-easing, cubic-bezier(0.4, 0, 0.2, 1));
|
||||
transition-duration: var(--transition-duration, 150ms)
|
||||
}
|
||||
|
||||
.w_1px {
|
||||
width: 1px
|
||||
}
|
||||
|
||||
.h_4 {
|
||||
height: var(--sizes-4)
|
||||
}
|
||||
|
||||
.bg_gray\.300 {
|
||||
background: var(--colors-gray-300)
|
||||
}
|
||||
|
||||
.bg_white {
|
||||
background: var(--colors-white)
|
||||
}
|
||||
|
||||
.shadow_sm {
|
||||
box-shadow: var(--shadows-sm)
|
||||
}
|
||||
|
||||
.border-b_1px_solid {
|
||||
border-bottom: 1px solid
|
||||
}
|
||||
|
||||
.border_gray\.200 {
|
||||
border-color: var(--colors-gray-200)
|
||||
}
|
||||
|
||||
.pos_sticky {
|
||||
position: sticky
|
||||
}
|
||||
|
||||
.top_0 {
|
||||
top: var(--spacing-0)
|
||||
}
|
||||
|
||||
.z_30 {
|
||||
z-index: 30
|
||||
}
|
||||
|
||||
.fs_xl {
|
||||
font-size: var(--font-sizes-xl)
|
||||
}
|
||||
|
||||
.font_bold {
|
||||
font-weight: var(--font-weights-bold)
|
||||
}
|
||||
|
||||
.text_brand\.800 {
|
||||
color: var(--colors-brand-800)
|
||||
}
|
||||
|
||||
.text_brand\.700 {
|
||||
color: var(--colors-brand-700)
|
||||
}
|
||||
|
||||
.text_gray\.600 {
|
||||
color: var(--colors-gray-600)
|
||||
}
|
||||
|
||||
.bg_brand\.50 {
|
||||
background: var(--colors-brand-50)
|
||||
}
|
||||
|
||||
.bg_transparent {
|
||||
background: var(--colors-transparent)
|
||||
}
|
||||
|
||||
.px_3 {
|
||||
padding-inline: var(--spacing-3)
|
||||
}
|
||||
|
||||
.py_2 {
|
||||
padding-block: var(--spacing-2)
|
||||
}
|
||||
|
||||
.fs_sm {
|
||||
font-size: var(--font-sizes-sm)
|
||||
}
|
||||
|
||||
.font_medium {
|
||||
font-weight: var(--font-weights-medium)
|
||||
}
|
||||
|
||||
.rounded_lg {
|
||||
border-radius: var(--radii-lg)
|
||||
}
|
||||
|
||||
.text_brand\.600 {
|
||||
color: var(--colors-brand-600)
|
||||
}
|
||||
|
||||
.text_gray\.500 {
|
||||
color: var(--colors-gray-500)
|
||||
}
|
||||
|
||||
.p_1 {
|
||||
padding: var(--spacing-1)
|
||||
}
|
||||
|
||||
.fs_md {
|
||||
font-size: var(--font-sizes-md)
|
||||
}
|
||||
|
||||
.rounded_md {
|
||||
border-radius: var(--radii-md)
|
||||
}
|
||||
|
||||
.transition_all {
|
||||
transition-property: var(--transition-prop, all);
|
||||
transition-timing-function: var(--transition-easing, cubic-bezier(0.4, 0, 0.2, 1));
|
||||
transition-duration: var(--transition-duration, 150ms)
|
||||
}
|
||||
|
||||
.text-decor_none {
|
||||
text-decoration: none
|
||||
}
|
||||
|
||||
.gap_3 {
|
||||
gap: var(--spacing-3)
|
||||
}
|
||||
|
||||
.justify_space-between {
|
||||
justify-content: space-between
|
||||
}
|
||||
|
||||
.gap_10px {
|
||||
gap: 10px
|
||||
}
|
||||
|
||||
.gap_6 {
|
||||
gap: var(--spacing-6)
|
||||
}
|
||||
|
||||
.d_flex {
|
||||
display: flex
|
||||
}
|
||||
|
||||
.items_center {
|
||||
align-items: center
|
||||
}
|
||||
|
||||
.gap_4 {
|
||||
gap: var(--spacing-4)
|
||||
}
|
||||
|
||||
.flex_row {
|
||||
flex-direction: row
|
||||
}
|
||||
|
||||
.pos_relative {
|
||||
position: relative
|
||||
}
|
||||
|
||||
.max-w_7xl {
|
||||
max-width: var(--sizes-7xl)
|
||||
}
|
||||
|
||||
.mx_auto {
|
||||
margin-inline: auto
|
||||
}
|
||||
|
||||
.px_4 {
|
||||
padding-inline: var(--spacing-4)
|
||||
}
|
||||
|
||||
.py_3 {
|
||||
padding-block: var(--spacing-3)
|
||||
}
|
||||
|
||||
.hover\:opacity_1:is(:hover, [data-hover]) {
|
||||
opacity: 1
|
||||
}
|
||||
|
||||
.hover\:text_brand\.900:is(:hover, [data-hover]) {
|
||||
color: var(--colors-brand-900)
|
||||
}
|
||||
|
||||
.hover\:text_brand\.800:is(:hover, [data-hover]) {
|
||||
color: var(--colors-brand-800)
|
||||
}
|
||||
|
||||
.hover\:text_gray\.900:is(:hover, [data-hover]) {
|
||||
color: var(--colors-gray-900)
|
||||
}
|
||||
|
||||
.hover\:bg_brand\.100:is(:hover, [data-hover]) {
|
||||
background: var(--colors-brand-100)
|
||||
}
|
||||
|
||||
.hover\:bg_gray\.50:is(:hover, [data-hover]) {
|
||||
background: var(--colors-gray-50)
|
||||
}
|
||||
|
||||
.hover\:text_brand\.700:is(:hover, [data-hover]) {
|
||||
color: var(--colors-brand-700)
|
||||
}
|
||||
|
||||
.hover\:text_gray\.700:is(:hover, [data-hover]) {
|
||||
color: var(--colors-gray-700)
|
||||
}
|
||||
|
||||
.hover\:transform_scale\(1\.1\):is(:hover, [data-hover]) {
|
||||
transform: scale(1.1)
|
||||
}
|
||||
}
|
||||
@@ -1,409 +0,0 @@
|
||||
@layer utilities {
|
||||
|
||||
.fs_2xl {
|
||||
font-size: var(--font-sizes-2xl)
|
||||
}
|
||||
|
||||
.font_bold {
|
||||
font-weight: var(--font-weights-bold)
|
||||
}
|
||||
|
||||
.bg_gray\.100 {
|
||||
background: var(--colors-gray-100)
|
||||
}
|
||||
|
||||
.p_1 {
|
||||
padding: var(--spacing-1)
|
||||
}
|
||||
.\[\&\[data-state\=active\]\]\:bg_white[data-state=active] {
|
||||
background: var(--colors-white)
|
||||
}
|
||||
.\[\&\[data-state\=active\]\]\:text_brand\.600[data-state=active] {
|
||||
color: var(--colors-brand-600)
|
||||
}
|
||||
.\[\&\[data-state\=active\]\]\:shadow_card[data-state=active] {
|
||||
box-shadow: var(--shadows-card)
|
||||
}
|
||||
|
||||
.mr_2 {
|
||||
margin-right: var(--spacing-2)
|
||||
}
|
||||
|
||||
.mt_6 {
|
||||
margin-top: var(--spacing-6)
|
||||
}
|
||||
|
||||
.pt_6 {
|
||||
padding-top: var(--spacing-6)
|
||||
}
|
||||
|
||||
.border-t_1px_solid {
|
||||
border-top: 1px solid
|
||||
}
|
||||
|
||||
.cursor_not-allowed {
|
||||
cursor: not-allowed
|
||||
}
|
||||
|
||||
.opacity_0\.7 {
|
||||
opacity: 0.7
|
||||
}
|
||||
|
||||
.opacity_1 {
|
||||
opacity: 1
|
||||
}
|
||||
|
||||
.px_6 {
|
||||
padding-inline: var(--spacing-6)
|
||||
}
|
||||
|
||||
.py_4 {
|
||||
padding-block: var(--spacing-4)
|
||||
}
|
||||
|
||||
.text_white {
|
||||
color: var(--colors-white)
|
||||
}
|
||||
|
||||
.fs_lg {
|
||||
font-size: var(--font-sizes-lg)
|
||||
}
|
||||
|
||||
.border_white {
|
||||
border-color: var(--colors-white)
|
||||
}
|
||||
|
||||
.border-t_transparent {
|
||||
border-top-color: var(--colors-transparent)
|
||||
}
|
||||
|
||||
.animation_spin_1s_linear_infinite {
|
||||
animation: spin 1s linear infinite
|
||||
}
|
||||
|
||||
.font_semibold {
|
||||
font-weight: var(--font-weights-semibold)
|
||||
}
|
||||
|
||||
.bg_gray\.300 {
|
||||
background: var(--colors-gray-300)
|
||||
}
|
||||
|
||||
.w_11 {
|
||||
width: var(--sizes-11)
|
||||
}
|
||||
|
||||
.h_6 {
|
||||
height: var(--sizes-6)
|
||||
}
|
||||
|
||||
.transform_translateX\(20px\) {
|
||||
transform: translateX(20px)
|
||||
}
|
||||
|
||||
.transform_translateX\(0px\) {
|
||||
transform: translateX(0px)
|
||||
}
|
||||
|
||||
.transition_transform_0\.2s {
|
||||
transition: transform 0.2s
|
||||
}
|
||||
|
||||
.will-change_transform {
|
||||
will-change: transform
|
||||
}
|
||||
.\[\&\[data-state\=checked\]\]\:border_brand\.600[data-state=checked] {
|
||||
border-color: var(--colors-brand-600)
|
||||
}
|
||||
.after\:content_\"\"::after {
|
||||
content: ""
|
||||
}
|
||||
.after\:d_block::after {
|
||||
display: block
|
||||
}
|
||||
.after\:w_2::after {
|
||||
width: var(--sizes-2)
|
||||
}
|
||||
.after\:h_2::after {
|
||||
height: var(--sizes-2)
|
||||
}
|
||||
.after\:rounded_full::after {
|
||||
border-radius: var(--radii-full)
|
||||
}
|
||||
.after\:bg_brand\.600::after {
|
||||
background: var(--colors-brand-600)
|
||||
}
|
||||
|
||||
.text_gray\.900 {
|
||||
color: var(--colors-gray-900)
|
||||
}
|
||||
|
||||
.fs_xs {
|
||||
font-size: var(--font-sizes-xs)
|
||||
}
|
||||
|
||||
.rounded_xl {
|
||||
border-radius: var(--radii-xl)
|
||||
}
|
||||
|
||||
.shadow_modal {
|
||||
box-shadow: var(--shadows-modal)
|
||||
}
|
||||
|
||||
.border_gray\.200 {
|
||||
border-color: var(--colors-gray-200)
|
||||
}
|
||||
|
||||
.p_2 {
|
||||
padding: var(--spacing-2)
|
||||
}
|
||||
|
||||
.z_50 {
|
||||
z-index: 50
|
||||
}
|
||||
|
||||
.px_3 {
|
||||
padding-inline: var(--spacing-3)
|
||||
}
|
||||
|
||||
.py_2 {
|
||||
padding-block: var(--spacing-2)
|
||||
}
|
||||
.\[\&\[data-state\=checked\]\]\:bg_brand\.100[data-state=checked] {
|
||||
background: var(--colors-brand-100)
|
||||
}
|
||||
.\[\&\[data-state\=checked\]\]\:text_brand\.800[data-state=checked] {
|
||||
color: var(--colors-brand-800)
|
||||
}
|
||||
|
||||
.font_medium {
|
||||
font-weight: var(--font-weights-medium)
|
||||
}
|
||||
|
||||
.text_brand\.600 {
|
||||
color: var(--colors-brand-600)
|
||||
}
|
||||
|
||||
.text_gray\.600 {
|
||||
color: var(--colors-gray-600)
|
||||
}
|
||||
|
||||
.select_none {
|
||||
-webkit-user-select: none;
|
||||
user-select: none
|
||||
}
|
||||
|
||||
.touch_none {
|
||||
touch-action: none
|
||||
}
|
||||
|
||||
.bg_gray\.200 {
|
||||
background: var(--colors-gray-200)
|
||||
}
|
||||
|
||||
.pos_relative {
|
||||
position: relative
|
||||
}
|
||||
|
||||
.grow_1 {
|
||||
flex-grow: 1
|
||||
}
|
||||
|
||||
.h_2 {
|
||||
height: var(--sizes-2)
|
||||
}
|
||||
|
||||
.pos_absolute {
|
||||
position: absolute
|
||||
}
|
||||
|
||||
.bg_brand\.600 {
|
||||
background: var(--colors-brand-600)
|
||||
}
|
||||
|
||||
.h_full {
|
||||
height: var(--sizes-full)
|
||||
}
|
||||
|
||||
.d_block {
|
||||
display: block
|
||||
}
|
||||
|
||||
.w_5 {
|
||||
width: var(--sizes-5)
|
||||
}
|
||||
|
||||
.h_5 {
|
||||
height: var(--sizes-5)
|
||||
}
|
||||
|
||||
.shadow_card {
|
||||
box-shadow: var(--shadows-card)
|
||||
}
|
||||
|
||||
.rounded_full {
|
||||
border-radius: var(--radii-full)
|
||||
}
|
||||
|
||||
.border_2px_solid {
|
||||
border: 2px solid
|
||||
}
|
||||
|
||||
.border_brand\.600 {
|
||||
border-color: var(--colors-brand-600)
|
||||
}
|
||||
|
||||
.cursor_pointer {
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
.w_full {
|
||||
width: var(--sizes-full)
|
||||
}
|
||||
|
||||
.px_4 {
|
||||
padding-inline: var(--spacing-4)
|
||||
}
|
||||
|
||||
.py_3 {
|
||||
padding-block: var(--spacing-3)
|
||||
}
|
||||
|
||||
.bg_white {
|
||||
background: var(--colors-white)
|
||||
}
|
||||
|
||||
.border_1px_solid {
|
||||
border: 1px solid
|
||||
}
|
||||
|
||||
.border_gray\.300 {
|
||||
border-color: var(--colors-gray-300)
|
||||
}
|
||||
|
||||
.rounded_lg {
|
||||
border-radius: var(--radii-lg)
|
||||
}
|
||||
|
||||
.fs_sm {
|
||||
font-size: var(--font-sizes-sm)
|
||||
}
|
||||
|
||||
.transition_all {
|
||||
transition-property: var(--transition-prop, all);
|
||||
transition-timing-function: var(--transition-easing, cubic-bezier(0.4, 0, 0.2, 1));
|
||||
transition-duration: var(--transition-duration, 150ms)
|
||||
}
|
||||
|
||||
.gap_6 {
|
||||
gap: var(--spacing-6)
|
||||
}
|
||||
|
||||
.gap_2 {
|
||||
gap: var(--spacing-2)
|
||||
}
|
||||
|
||||
.gap_1 {
|
||||
gap: var(--spacing-1)
|
||||
}
|
||||
|
||||
.flex_1 {
|
||||
flex: 1 1 0%
|
||||
}
|
||||
|
||||
.flex_column {
|
||||
flex-direction: column
|
||||
}
|
||||
|
||||
.d_grid {
|
||||
display: grid
|
||||
}
|
||||
|
||||
.grid-cols_repeat\(2\,_minmax\(0\,_1fr\)\) {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr))
|
||||
}
|
||||
|
||||
.gap_4 {
|
||||
gap: var(--spacing-4)
|
||||
}
|
||||
|
||||
.justify_center {
|
||||
justify-content: center
|
||||
}
|
||||
|
||||
.items_start {
|
||||
align-items: start
|
||||
}
|
||||
|
||||
.gap_3 {
|
||||
gap: var(--spacing-3)
|
||||
}
|
||||
|
||||
.d_flex {
|
||||
display: flex
|
||||
}
|
||||
|
||||
.items_center {
|
||||
align-items: center
|
||||
}
|
||||
|
||||
.justify_space-between {
|
||||
justify-content: space-between
|
||||
}
|
||||
|
||||
.gap_10px {
|
||||
gap: 10px
|
||||
}
|
||||
|
||||
.flex_row {
|
||||
flex-direction: row
|
||||
}
|
||||
|
||||
.focus\:ring_none:is(:focus, [data-focus]) {
|
||||
outline: var(--borders-none)
|
||||
}
|
||||
|
||||
.focus\:border_brand\.500:is(:focus, [data-focus]) {
|
||||
border-color: var(--colors-brand-500)
|
||||
}
|
||||
|
||||
.focus\:shadow_0_0_0_3px_rgba\(59\,_130\,_246\,_0\.1\):is(:focus, [data-focus]) {
|
||||
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1)
|
||||
}
|
||||
|
||||
.hover\:text_gray\.900:is(:hover, [data-hover]) {
|
||||
color: var(--colors-gray-900)
|
||||
}
|
||||
|
||||
.hover\:transform_translateY\(-1px\):is(:hover, [data-hover]) {
|
||||
transform: translateY(-1px)
|
||||
}
|
||||
|
||||
.hover\:shadow_modal:is(:hover, [data-hover]) {
|
||||
box-shadow: var(--shadows-modal)
|
||||
}
|
||||
|
||||
.hover\:bg_brand\.700:is(:hover, [data-hover]) {
|
||||
background: var(--colors-brand-700)
|
||||
}
|
||||
|
||||
.hover\:bg_gray\.400:is(:hover, [data-hover]) {
|
||||
background: var(--colors-gray-400)
|
||||
}
|
||||
|
||||
.hover\:border_brand\.400:is(:hover, [data-hover]) {
|
||||
border-color: var(--colors-brand-400)
|
||||
}
|
||||
|
||||
.hover\:bg_brand\.50:is(:hover, [data-hover]) {
|
||||
background: var(--colors-brand-50)
|
||||
}
|
||||
|
||||
.hover\:transform_scale\(1\.1\):is(:hover, [data-hover]) {
|
||||
transform: scale(1.1)
|
||||
}
|
||||
|
||||
.hover\:border_gray\.400:is(:hover, [data-hover]) {
|
||||
border-color: var(--colors-gray-400)
|
||||
}
|
||||
}
|
||||
@@ -1,377 +0,0 @@
|
||||
@layer utilities {
|
||||
|
||||
.fs_2xl {
|
||||
font-size: var(--font-sizes-2xl)
|
||||
}
|
||||
|
||||
.font_bold {
|
||||
font-weight: var(--font-weights-bold)
|
||||
}
|
||||
|
||||
.bg_gray\.100 {
|
||||
background: var(--colors-gray-100)
|
||||
}
|
||||
|
||||
.p_1 {
|
||||
padding: var(--spacing-1)
|
||||
}
|
||||
.\[\&\[data-state\=active\]\]\:bg_white[data-state=active] {
|
||||
background: var(--colors-white)
|
||||
}
|
||||
.\[\&\[data-state\=active\]\]\:text_brand\.600[data-state=active] {
|
||||
color: var(--colors-brand-600)
|
||||
}
|
||||
.\[\&\[data-state\=active\]\]\:shadow_card[data-state=active] {
|
||||
box-shadow: var(--shadows-card)
|
||||
}
|
||||
|
||||
.mr_2 {
|
||||
margin-right: var(--spacing-2)
|
||||
}
|
||||
|
||||
.mt_6 {
|
||||
margin-top: var(--spacing-6)
|
||||
}
|
||||
|
||||
.p_4 {
|
||||
padding: var(--spacing-4)
|
||||
}
|
||||
|
||||
.bg_blue\.50 {
|
||||
background: var(--colors-blue-50)
|
||||
}
|
||||
|
||||
.border_blue\.200 {
|
||||
border-color: var(--colors-blue-200)
|
||||
}
|
||||
|
||||
.fs_md {
|
||||
font-size: var(--font-sizes-md)
|
||||
}
|
||||
|
||||
.text_blue\.800 {
|
||||
color: var(--colors-blue-800)
|
||||
}
|
||||
|
||||
.text_blue\.700 {
|
||||
color: var(--colors-blue-700)
|
||||
}
|
||||
|
||||
.font_semibold {
|
||||
font-weight: var(--font-weights-semibold)
|
||||
}
|
||||
|
||||
.bg_gray\.300 {
|
||||
background: var(--colors-gray-300)
|
||||
}
|
||||
|
||||
.w_11 {
|
||||
width: var(--sizes-11)
|
||||
}
|
||||
|
||||
.h_6 {
|
||||
height: var(--sizes-6)
|
||||
}
|
||||
|
||||
.transform_translateX\(20px\) {
|
||||
transform: translateX(20px)
|
||||
}
|
||||
|
||||
.transform_translateX\(0px\) {
|
||||
transform: translateX(0px)
|
||||
}
|
||||
|
||||
.transition_transform_0\.2s {
|
||||
transition: transform 0.2s
|
||||
}
|
||||
|
||||
.will-change_transform {
|
||||
will-change: transform
|
||||
}
|
||||
.\[\&\[data-state\=checked\]\]\:border_brand\.600[data-state=checked] {
|
||||
border-color: var(--colors-brand-600)
|
||||
}
|
||||
|
||||
.justify_center {
|
||||
justify-content: center
|
||||
}
|
||||
.after\:content_\"\"::after {
|
||||
content: ""
|
||||
}
|
||||
.after\:d_block::after {
|
||||
display: block
|
||||
}
|
||||
.after\:w_2::after {
|
||||
width: var(--sizes-2)
|
||||
}
|
||||
.after\:h_2::after {
|
||||
height: var(--sizes-2)
|
||||
}
|
||||
.after\:rounded_full::after {
|
||||
border-radius: var(--radii-full)
|
||||
}
|
||||
.after\:bg_brand\.600::after {
|
||||
background: var(--colors-brand-600)
|
||||
}
|
||||
|
||||
.text_gray\.900 {
|
||||
color: var(--colors-gray-900)
|
||||
}
|
||||
|
||||
.fs_xs {
|
||||
font-size: var(--font-sizes-xs)
|
||||
}
|
||||
|
||||
.rounded_xl {
|
||||
border-radius: var(--radii-xl)
|
||||
}
|
||||
|
||||
.shadow_modal {
|
||||
box-shadow: var(--shadows-modal)
|
||||
}
|
||||
|
||||
.border_gray\.200 {
|
||||
border-color: var(--colors-gray-200)
|
||||
}
|
||||
|
||||
.p_2 {
|
||||
padding: var(--spacing-2)
|
||||
}
|
||||
|
||||
.z_50 {
|
||||
z-index: 50
|
||||
}
|
||||
|
||||
.px_3 {
|
||||
padding-inline: var(--spacing-3)
|
||||
}
|
||||
|
||||
.py_2 {
|
||||
padding-block: var(--spacing-2)
|
||||
}
|
||||
.\[\&\[data-state\=checked\]\]\:bg_brand\.100[data-state=checked] {
|
||||
background: var(--colors-brand-100)
|
||||
}
|
||||
.\[\&\[data-state\=checked\]\]\:text_brand\.800[data-state=checked] {
|
||||
color: var(--colors-brand-800)
|
||||
}
|
||||
|
||||
.font_medium {
|
||||
font-weight: var(--font-weights-medium)
|
||||
}
|
||||
|
||||
.text_brand\.600 {
|
||||
color: var(--colors-brand-600)
|
||||
}
|
||||
|
||||
.text_gray\.600 {
|
||||
color: var(--colors-gray-600)
|
||||
}
|
||||
|
||||
.select_none {
|
||||
-webkit-user-select: none;
|
||||
user-select: none
|
||||
}
|
||||
|
||||
.touch_none {
|
||||
touch-action: none
|
||||
}
|
||||
|
||||
.bg_gray\.200 {
|
||||
background: var(--colors-gray-200)
|
||||
}
|
||||
|
||||
.pos_relative {
|
||||
position: relative
|
||||
}
|
||||
|
||||
.grow_1 {
|
||||
flex-grow: 1
|
||||
}
|
||||
|
||||
.h_2 {
|
||||
height: var(--sizes-2)
|
||||
}
|
||||
|
||||
.pos_absolute {
|
||||
position: absolute
|
||||
}
|
||||
|
||||
.bg_brand\.600 {
|
||||
background: var(--colors-brand-600)
|
||||
}
|
||||
|
||||
.h_full {
|
||||
height: var(--sizes-full)
|
||||
}
|
||||
|
||||
.d_block {
|
||||
display: block
|
||||
}
|
||||
|
||||
.w_5 {
|
||||
width: var(--sizes-5)
|
||||
}
|
||||
|
||||
.h_5 {
|
||||
height: var(--sizes-5)
|
||||
}
|
||||
|
||||
.shadow_card {
|
||||
box-shadow: var(--shadows-card)
|
||||
}
|
||||
|
||||
.rounded_full {
|
||||
border-radius: var(--radii-full)
|
||||
}
|
||||
|
||||
.border_2px_solid {
|
||||
border: 2px solid
|
||||
}
|
||||
|
||||
.border_brand\.600 {
|
||||
border-color: var(--colors-brand-600)
|
||||
}
|
||||
|
||||
.cursor_pointer {
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
.w_full {
|
||||
width: var(--sizes-full)
|
||||
}
|
||||
|
||||
.px_4 {
|
||||
padding-inline: var(--spacing-4)
|
||||
}
|
||||
|
||||
.py_3 {
|
||||
padding-block: var(--spacing-3)
|
||||
}
|
||||
|
||||
.bg_white {
|
||||
background: var(--colors-white)
|
||||
}
|
||||
|
||||
.border_1px_solid {
|
||||
border: 1px solid
|
||||
}
|
||||
|
||||
.border_gray\.300 {
|
||||
border-color: var(--colors-gray-300)
|
||||
}
|
||||
|
||||
.rounded_lg {
|
||||
border-radius: var(--radii-lg)
|
||||
}
|
||||
|
||||
.fs_sm {
|
||||
font-size: var(--font-sizes-sm)
|
||||
}
|
||||
|
||||
.transition_all {
|
||||
transition-property: var(--transition-prop, all);
|
||||
transition-timing-function: var(--transition-easing, cubic-bezier(0.4, 0, 0.2, 1));
|
||||
transition-duration: var(--transition-duration, 150ms)
|
||||
}
|
||||
|
||||
.gap_6 {
|
||||
gap: var(--spacing-6)
|
||||
}
|
||||
|
||||
.gap_2 {
|
||||
gap: var(--spacing-2)
|
||||
}
|
||||
|
||||
.gap_1 {
|
||||
gap: var(--spacing-1)
|
||||
}
|
||||
|
||||
.flex_1 {
|
||||
flex: 1 1 0%
|
||||
}
|
||||
|
||||
.flex_column {
|
||||
flex-direction: column
|
||||
}
|
||||
|
||||
.d_grid {
|
||||
display: grid
|
||||
}
|
||||
|
||||
.grid-cols_repeat\(2\,_minmax\(0\,_1fr\)\) {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr))
|
||||
}
|
||||
|
||||
.gap_4 {
|
||||
gap: var(--spacing-4)
|
||||
}
|
||||
|
||||
.items_start {
|
||||
align-items: start
|
||||
}
|
||||
|
||||
.gap_3 {
|
||||
gap: var(--spacing-3)
|
||||
}
|
||||
|
||||
.d_flex {
|
||||
display: flex
|
||||
}
|
||||
|
||||
.items_center {
|
||||
align-items: center
|
||||
}
|
||||
|
||||
.justify_space-between {
|
||||
justify-content: space-between
|
||||
}
|
||||
|
||||
.gap_10px {
|
||||
gap: 10px
|
||||
}
|
||||
|
||||
.flex_row {
|
||||
flex-direction: row
|
||||
}
|
||||
|
||||
.focus\:ring_none:is(:focus, [data-focus]) {
|
||||
outline: var(--borders-none)
|
||||
}
|
||||
|
||||
.focus\:border_brand\.500:is(:focus, [data-focus]) {
|
||||
border-color: var(--colors-brand-500)
|
||||
}
|
||||
|
||||
.focus\:shadow_0_0_0_3px_rgba\(59\,_130\,_246\,_0\.1\):is(:focus, [data-focus]) {
|
||||
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1)
|
||||
}
|
||||
|
||||
.hover\:text_gray\.900:is(:hover, [data-hover]) {
|
||||
color: var(--colors-gray-900)
|
||||
}
|
||||
|
||||
.hover\:bg_brand\.700:is(:hover, [data-hover]) {
|
||||
background: var(--colors-brand-700)
|
||||
}
|
||||
|
||||
.hover\:bg_gray\.400:is(:hover, [data-hover]) {
|
||||
background: var(--colors-gray-400)
|
||||
}
|
||||
|
||||
.hover\:border_brand\.400:is(:hover, [data-hover]) {
|
||||
border-color: var(--colors-brand-400)
|
||||
}
|
||||
|
||||
.hover\:bg_brand\.50:is(:hover, [data-hover]) {
|
||||
background: var(--colors-brand-50)
|
||||
}
|
||||
|
||||
.hover\:transform_scale\(1\.1\):is(:hover, [data-hover]) {
|
||||
transform: scale(1.1)
|
||||
}
|
||||
|
||||
.hover\:border_gray\.400:is(:hover, [data-hover]) {
|
||||
border-color: var(--colors-gray-400)
|
||||
}
|
||||
}
|
||||
@@ -1,368 +0,0 @@
|
||||
@layer utilities {
|
||||
|
||||
.bg_gradient-to-r_from-green\.50_to-emerald\.50 {
|
||||
background: gradient-to-r from-green.50 to-emerald.50
|
||||
}
|
||||
|
||||
.rounded_2xl {
|
||||
border-radius: var(--radii-2xl)
|
||||
}
|
||||
|
||||
.p_8 {
|
||||
padding: var(--spacing-8)
|
||||
}
|
||||
|
||||
.pos_relative {
|
||||
position: relative
|
||||
}
|
||||
|
||||
.overflow_hidden {
|
||||
overflow: hidden
|
||||
}
|
||||
|
||||
.top_-20px {
|
||||
top: -20px
|
||||
}
|
||||
|
||||
.right_-20px {
|
||||
right: -20px
|
||||
}
|
||||
|
||||
.w_40px {
|
||||
width: 40px
|
||||
}
|
||||
|
||||
.h_40px {
|
||||
height: 40px
|
||||
}
|
||||
|
||||
.opacity_0\.6 {
|
||||
opacity: 0.6
|
||||
}
|
||||
|
||||
.w_12 {
|
||||
width: var(--sizes-12)
|
||||
}
|
||||
|
||||
.h_12 {
|
||||
height: var(--sizes-12)
|
||||
}
|
||||
|
||||
.bg_green\.100 {
|
||||
background: var(--colors-green-100)
|
||||
}
|
||||
|
||||
.text_green\.600 {
|
||||
color: var(--colors-green-600)
|
||||
}
|
||||
|
||||
.fs_xl {
|
||||
font-size: var(--font-sizes-xl)
|
||||
}
|
||||
|
||||
.font_bold {
|
||||
font-weight: var(--font-weights-bold)
|
||||
}
|
||||
|
||||
.p_4 {
|
||||
padding: var(--spacing-4)
|
||||
}
|
||||
|
||||
.border_gray\.200 {
|
||||
border-color: var(--colors-gray-200)
|
||||
}
|
||||
|
||||
.p_2 {
|
||||
padding: var(--spacing-2)
|
||||
}
|
||||
|
||||
.text_gray\.900 {
|
||||
color: var(--colors-gray-900)
|
||||
}
|
||||
|
||||
.text_gray\.600 {
|
||||
color: var(--colors-gray-600)
|
||||
}
|
||||
|
||||
.px_3 {
|
||||
padding-inline: var(--spacing-3)
|
||||
}
|
||||
|
||||
.flex-wrap_wrap {
|
||||
flex-wrap: wrap
|
||||
}
|
||||
|
||||
.bg_gray\.100 {
|
||||
background: var(--colors-gray-100)
|
||||
}
|
||||
|
||||
.text_gray\.700 {
|
||||
color: var(--colors-gray-700)
|
||||
}
|
||||
|
||||
.font_mono {
|
||||
font-family: var(--fonts-mono)
|
||||
}
|
||||
|
||||
.rounded_md {
|
||||
border-radius: var(--radii-md)
|
||||
}
|
||||
|
||||
.px_2 {
|
||||
padding-inline: var(--spacing-2)
|
||||
}
|
||||
|
||||
.py_1 {
|
||||
padding-block: var(--spacing-1)
|
||||
}
|
||||
|
||||
.text_gray\.500 {
|
||||
color: var(--colors-gray-500)
|
||||
}
|
||||
|
||||
.fs_xs {
|
||||
font-size: var(--font-sizes-xs)
|
||||
}
|
||||
|
||||
.cursor_not-allowed {
|
||||
cursor: not-allowed
|
||||
}
|
||||
|
||||
.cursor_pointer {
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
.opacity_0\.7 {
|
||||
opacity: 0.7
|
||||
}
|
||||
|
||||
.opacity_1 {
|
||||
opacity: 1
|
||||
}
|
||||
|
||||
.px_6 {
|
||||
padding-inline: var(--spacing-6)
|
||||
}
|
||||
|
||||
.bg_green\.600 {
|
||||
background: var(--colors-green-600)
|
||||
}
|
||||
|
||||
.text_white {
|
||||
color: var(--colors-white)
|
||||
}
|
||||
|
||||
.w_5 {
|
||||
width: var(--sizes-5)
|
||||
}
|
||||
|
||||
.h_5 {
|
||||
height: var(--sizes-5)
|
||||
}
|
||||
|
||||
.border_white {
|
||||
border-color: var(--colors-white)
|
||||
}
|
||||
|
||||
.border-t_transparent {
|
||||
border-top-color: var(--colors-transparent)
|
||||
}
|
||||
|
||||
.rounded_full {
|
||||
border-radius: var(--radii-full)
|
||||
}
|
||||
|
||||
.animation_spin_1s_linear_infinite {
|
||||
animation: spin 1s linear infinite
|
||||
}
|
||||
|
||||
.py_4 {
|
||||
padding-block: var(--spacing-4)
|
||||
}
|
||||
|
||||
.bg_white {
|
||||
background: var(--colors-white)
|
||||
}
|
||||
|
||||
.text_blue\.600 {
|
||||
color: var(--colors-blue-600)
|
||||
}
|
||||
|
||||
.fs_lg {
|
||||
font-size: var(--font-sizes-lg)
|
||||
}
|
||||
|
||||
.font_semibold {
|
||||
font-weight: var(--font-weights-semibold)
|
||||
}
|
||||
|
||||
.rounded_xl {
|
||||
border-radius: var(--radii-xl)
|
||||
}
|
||||
|
||||
.shadow_card {
|
||||
box-shadow: var(--shadows-card)
|
||||
}
|
||||
|
||||
.border_2px_solid {
|
||||
border: 2px solid
|
||||
}
|
||||
|
||||
.border_blue\.200 {
|
||||
border-color: var(--colors-blue-200)
|
||||
}
|
||||
|
||||
.pt_4 {
|
||||
padding-top: var(--spacing-4)
|
||||
}
|
||||
|
||||
.border-t_1px_solid {
|
||||
border-top: 1px solid
|
||||
}
|
||||
|
||||
.border_green\.200 {
|
||||
border-color: var(--colors-green-200)
|
||||
}
|
||||
|
||||
.w_full {
|
||||
width: var(--sizes-full)
|
||||
}
|
||||
|
||||
.px_4 {
|
||||
padding-inline: var(--spacing-4)
|
||||
}
|
||||
|
||||
.py_3 {
|
||||
padding-block: var(--spacing-3)
|
||||
}
|
||||
|
||||
.bg_transparent {
|
||||
background: var(--colors-transparent)
|
||||
}
|
||||
|
||||
.text_green\.700 {
|
||||
color: var(--colors-green-700)
|
||||
}
|
||||
|
||||
.fs_sm {
|
||||
font-size: var(--font-sizes-sm)
|
||||
}
|
||||
|
||||
.font_medium {
|
||||
font-weight: var(--font-weights-medium)
|
||||
}
|
||||
|
||||
.rounded_lg {
|
||||
border-radius: var(--radii-lg)
|
||||
}
|
||||
|
||||
.border_1px_solid {
|
||||
border: 1px solid
|
||||
}
|
||||
|
||||
.border_green\.300 {
|
||||
border-color: var(--colors-green-300)
|
||||
}
|
||||
|
||||
.transition_all {
|
||||
transition-property: var(--transition-prop, all);
|
||||
transition-timing-function: var(--transition-easing, cubic-bezier(0.4, 0, 0.2, 1));
|
||||
transition-duration: var(--transition-duration, 150ms)
|
||||
}
|
||||
|
||||
.pos_absolute {
|
||||
position: absolute
|
||||
}
|
||||
|
||||
.top_4 {
|
||||
top: var(--spacing-4)
|
||||
}
|
||||
|
||||
.right_4 {
|
||||
right: var(--spacing-4)
|
||||
}
|
||||
|
||||
.fs_2xl {
|
||||
font-size: var(--font-sizes-2xl)
|
||||
}
|
||||
|
||||
.opacity_0\.3 {
|
||||
opacity: 0.3
|
||||
}
|
||||
|
||||
.gap_6 {
|
||||
gap: var(--spacing-6)
|
||||
}
|
||||
|
||||
.gap_1 {
|
||||
gap: var(--spacing-1)
|
||||
}
|
||||
|
||||
.gap_0 {
|
||||
gap: var(--spacing-0)
|
||||
}
|
||||
|
||||
.flex_1 {
|
||||
flex: 1 1 0%
|
||||
}
|
||||
|
||||
.flex_column {
|
||||
flex-direction: column
|
||||
}
|
||||
|
||||
.gap_2 {
|
||||
gap: var(--spacing-2)
|
||||
}
|
||||
|
||||
.gap_4 {
|
||||
gap: var(--spacing-4)
|
||||
}
|
||||
|
||||
.mb_3 {
|
||||
margin-bottom: var(--spacing-3)
|
||||
}
|
||||
|
||||
.d_flex {
|
||||
display: flex
|
||||
}
|
||||
|
||||
.items_center {
|
||||
align-items: center
|
||||
}
|
||||
|
||||
.justify_center {
|
||||
justify-content: center
|
||||
}
|
||||
|
||||
.gap_3 {
|
||||
gap: var(--spacing-3)
|
||||
}
|
||||
|
||||
.flex_row {
|
||||
flex-direction: row
|
||||
}
|
||||
|
||||
.hover\:bg_green\.700:is(:hover, [data-hover]) {
|
||||
background: var(--colors-green-700)
|
||||
}
|
||||
|
||||
.hover\:shadow_modal:is(:hover, [data-hover]) {
|
||||
box-shadow: var(--shadows-modal)
|
||||
}
|
||||
|
||||
.hover\:border_blue\.400:is(:hover, [data-hover]) {
|
||||
border-color: var(--colors-blue-400)
|
||||
}
|
||||
|
||||
.hover\:transform_translateY\(-1px\):is(:hover, [data-hover]) {
|
||||
transform: translateY(-1px)
|
||||
}
|
||||
|
||||
.hover\:bg_green\.100:is(:hover, [data-hover]) {
|
||||
background: var(--colors-green-100)
|
||||
}
|
||||
|
||||
.hover\:border_green\.400:is(:hover, [data-hover]) {
|
||||
border-color: var(--colors-green-400)
|
||||
}
|
||||
}
|
||||
@@ -1,211 +0,0 @@
|
||||
@layer utilities {
|
||||
|
||||
.w_full {
|
||||
width: var(--sizes-full)
|
||||
}
|
||||
|
||||
.px_4 {
|
||||
padding-inline: var(--spacing-4)
|
||||
}
|
||||
|
||||
.border_gray\.300 {
|
||||
border-color: var(--colors-gray-300)
|
||||
}
|
||||
|
||||
.select_none {
|
||||
-webkit-user-select: none;
|
||||
user-select: none
|
||||
}
|
||||
|
||||
.\[\&\[data-state\=open\]\]\:border_brand\.500[data-state=open] {
|
||||
border-color: var(--colors-brand-500)
|
||||
}
|
||||
|
||||
.\[\&\[data-state\=open\]\]\:shadow_0_0_0_3px_rgba\(59\,_130\,_246\,_0\.1\)[data-state=open] {
|
||||
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1)
|
||||
}
|
||||
|
||||
.justify_space-between {
|
||||
justify-content: space-between
|
||||
}
|
||||
|
||||
.min-h_12 {
|
||||
min-height: var(--sizes-12)
|
||||
}
|
||||
|
||||
.fs_lg {
|
||||
font-size: var(--font-sizes-lg)
|
||||
}
|
||||
|
||||
.text_gray\.900 {
|
||||
color: var(--colors-gray-900)
|
||||
}
|
||||
|
||||
.text_gray\.500 {
|
||||
color: var(--colors-gray-500)
|
||||
}
|
||||
|
||||
.leading_tight {
|
||||
line-height: var(--line-heights-tight)
|
||||
}
|
||||
|
||||
.text_gray\.400 {
|
||||
color: var(--colors-gray-400)
|
||||
}
|
||||
|
||||
.bg_white {
|
||||
background: var(--colors-white)
|
||||
}
|
||||
|
||||
.rounded_xl {
|
||||
border-radius: var(--radii-xl)
|
||||
}
|
||||
|
||||
.shadow_modal {
|
||||
box-shadow: var(--shadows-modal)
|
||||
}
|
||||
|
||||
.border_1px_solid {
|
||||
border: 1px solid
|
||||
}
|
||||
|
||||
.border_gray\.200 {
|
||||
border-color: var(--colors-gray-200)
|
||||
}
|
||||
|
||||
.p_2 {
|
||||
padding: var(--spacing-2)
|
||||
}
|
||||
|
||||
.z_999 {
|
||||
z-index: 999
|
||||
}
|
||||
|
||||
.min-w_320px {
|
||||
min-width: 320px
|
||||
}
|
||||
|
||||
.max-h_300px {
|
||||
max-height: 300px
|
||||
}
|
||||
|
||||
.overflow_hidden {
|
||||
overflow: hidden
|
||||
}
|
||||
|
||||
.px_3 {
|
||||
padding-inline: var(--spacing-3)
|
||||
}
|
||||
|
||||
.py_3 {
|
||||
padding-block: var(--spacing-3)
|
||||
}
|
||||
|
||||
.rounded_lg {
|
||||
border-radius: var(--radii-lg)
|
||||
}
|
||||
|
||||
.cursor_pointer {
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
.transition_all {
|
||||
transition-property: var(--transition-prop, all);
|
||||
transition-timing-function: var(--transition-easing, cubic-bezier(0.4, 0, 0.2, 1));
|
||||
transition-duration: var(--transition-duration, 150ms)
|
||||
}
|
||||
|
||||
.ring_none {
|
||||
outline: var(--borders-none)
|
||||
}
|
||||
.\[\&\[data-state\=checked\]\]\:bg_brand\.100[data-state=checked] {
|
||||
background: var(--colors-brand-100)
|
||||
}
|
||||
.\[\&\[data-state\=checked\]\]\:text_brand\.800[data-state=checked] {
|
||||
color: var(--colors-brand-800)
|
||||
}
|
||||
|
||||
.fs_xl {
|
||||
font-size: var(--font-sizes-xl)
|
||||
}
|
||||
|
||||
.font_medium {
|
||||
font-weight: var(--font-weights-medium)
|
||||
}
|
||||
|
||||
.fs_sm {
|
||||
font-size: var(--font-sizes-sm)
|
||||
}
|
||||
|
||||
.fs_xs {
|
||||
font-size: var(--font-sizes-xs)
|
||||
}
|
||||
|
||||
.text_gray\.600 {
|
||||
color: var(--colors-gray-600)
|
||||
}
|
||||
|
||||
.leading_relaxed {
|
||||
line-height: var(--line-heights-relaxed)
|
||||
}
|
||||
|
||||
.pos_popper {
|
||||
position: popper
|
||||
}
|
||||
|
||||
.items_center {
|
||||
align-items: center
|
||||
}
|
||||
|
||||
.gap_3 {
|
||||
gap: var(--spacing-3)
|
||||
}
|
||||
|
||||
.flex_row {
|
||||
flex-direction: row
|
||||
}
|
||||
|
||||
.gap_0 {
|
||||
gap: var(--spacing-0)
|
||||
}
|
||||
|
||||
.d_flex {
|
||||
display: flex
|
||||
}
|
||||
|
||||
.flex_column {
|
||||
flex-direction: column
|
||||
}
|
||||
|
||||
.items_start {
|
||||
align-items: start
|
||||
}
|
||||
|
||||
.gap_1 {
|
||||
gap: var(--spacing-1)
|
||||
}
|
||||
|
||||
.flex_1 {
|
||||
flex: 1 1 0%
|
||||
}
|
||||
|
||||
.focus\:ring_none:is(:focus, [data-focus]) {
|
||||
outline: var(--borders-none)
|
||||
}
|
||||
|
||||
.focus\:border_brand\.500:is(:focus, [data-focus]) {
|
||||
border-color: var(--colors-brand-500)
|
||||
}
|
||||
|
||||
.focus\:shadow_0_0_0_3px_rgba\(59\,_130\,_246\,_0\.1\):is(:focus, [data-focus]) {
|
||||
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1)
|
||||
}
|
||||
|
||||
.hover\:border_gray\.400:is(:hover, [data-hover]) {
|
||||
border-color: var(--colors-gray-400)
|
||||
}
|
||||
|
||||
.hover\:bg_brand\.50:is(:hover, [data-hover]) {
|
||||
background: var(--colors-brand-50)
|
||||
}
|
||||
}
|
||||
@@ -1,252 +0,0 @@
|
||||
@layer utilities {
|
||||
|
||||
.fs_xl {
|
||||
font-size: var(--font-sizes-xl)
|
||||
}
|
||||
|
||||
.font_bold {
|
||||
font-weight: var(--font-weights-bold)
|
||||
}
|
||||
|
||||
.pos_relative {
|
||||
position: relative
|
||||
}
|
||||
|
||||
.overflow_hidden {
|
||||
overflow: hidden
|
||||
}
|
||||
|
||||
.bg_gray\.200 {
|
||||
background: var(--colors-gray-200)
|
||||
}
|
||||
|
||||
.transform_translateZ\(0\) {
|
||||
transform: translateZ(0)
|
||||
}
|
||||
|
||||
.bg_gradient-to-r_from-brand\.500_to-brand\.600 {
|
||||
background: gradient-to-r from-brand.500 to-brand.600
|
||||
}
|
||||
|
||||
.w_full {
|
||||
width: var(--sizes-full)
|
||||
}
|
||||
|
||||
.h_full {
|
||||
height: var(--sizes-full)
|
||||
}
|
||||
|
||||
.transition_transform_0\.3s_cubic-bezier\(0\.65\,_0\,_0\.35\,_1\) {
|
||||
transition: transform 0.3s cubic-bezier(0.65, 0, 0.35, 1)
|
||||
}
|
||||
|
||||
.origin_left {
|
||||
transform-origin: left
|
||||
}
|
||||
|
||||
.border_brand\.500 {
|
||||
border-color: var(--colors-brand-500)
|
||||
}
|
||||
|
||||
.border_gray\.300 {
|
||||
border-color: var(--colors-gray-300)
|
||||
}
|
||||
|
||||
.border_green\.500 {
|
||||
border-color: var(--colors-green-500)
|
||||
}
|
||||
|
||||
.bg_brand\.50 {
|
||||
background: var(--colors-brand-50)
|
||||
}
|
||||
|
||||
.bg_white {
|
||||
background: var(--colors-white)
|
||||
}
|
||||
|
||||
.bg_green\.50 {
|
||||
background: var(--colors-green-50)
|
||||
}
|
||||
|
||||
.text_brand\.600 {
|
||||
color: var(--colors-brand-600)
|
||||
}
|
||||
|
||||
.text_gray\.400 {
|
||||
color: var(--colors-gray-400)
|
||||
}
|
||||
|
||||
.w_8 {
|
||||
width: var(--sizes-8)
|
||||
}
|
||||
|
||||
.h_8 {
|
||||
height: var(--sizes-8)
|
||||
}
|
||||
|
||||
.justify_center {
|
||||
justify-content: center
|
||||
}
|
||||
|
||||
.border_2px_solid {
|
||||
border: 2px solid
|
||||
}
|
||||
|
||||
.transition_all {
|
||||
transition-property: var(--transition-prop, all);
|
||||
transition-timing-function: var(--transition-easing, cubic-bezier(0.4, 0, 0.2, 1));
|
||||
transition-duration: var(--transition-duration, 150ms)
|
||||
}
|
||||
|
||||
.w_3 {
|
||||
width: var(--sizes-3)
|
||||
}
|
||||
|
||||
.h_3 {
|
||||
height: var(--sizes-3)
|
||||
}
|
||||
|
||||
.bg_brand\.600 {
|
||||
background: var(--colors-brand-600)
|
||||
}
|
||||
|
||||
.animation_pulse {
|
||||
animation: var(--animations-pulse)
|
||||
}
|
||||
|
||||
.w_2 {
|
||||
width: var(--sizes-2)
|
||||
}
|
||||
|
||||
.h_2 {
|
||||
height: var(--sizes-2)
|
||||
}
|
||||
|
||||
.bg_gray\.400 {
|
||||
background: var(--colors-gray-400)
|
||||
}
|
||||
|
||||
.rounded_full {
|
||||
border-radius: var(--radii-full)
|
||||
}
|
||||
|
||||
.text_gray\.900 {
|
||||
color: var(--colors-gray-900)
|
||||
}
|
||||
|
||||
.text_green\.800 {
|
||||
color: var(--colors-green-800)
|
||||
}
|
||||
|
||||
.font_medium {
|
||||
font-weight: var(--font-weights-medium)
|
||||
}
|
||||
|
||||
.text_gray\.600 {
|
||||
color: var(--colors-gray-600)
|
||||
}
|
||||
|
||||
.text_gray\.500 {
|
||||
color: var(--colors-gray-500)
|
||||
}
|
||||
|
||||
.fs_xs {
|
||||
font-size: var(--font-sizes-xs)
|
||||
}
|
||||
|
||||
.text_green\.600 {
|
||||
color: var(--colors-green-600)
|
||||
}
|
||||
|
||||
.p_4 {
|
||||
padding: var(--spacing-4)
|
||||
}
|
||||
|
||||
.bg_blue\.50 {
|
||||
background: var(--colors-blue-50)
|
||||
}
|
||||
|
||||
.border_1px_solid {
|
||||
border: 1px solid
|
||||
}
|
||||
|
||||
.border_blue\.200 {
|
||||
border-color: var(--colors-blue-200)
|
||||
}
|
||||
|
||||
.rounded_xl {
|
||||
border-radius: var(--radii-xl)
|
||||
}
|
||||
|
||||
.font_semibold {
|
||||
font-weight: var(--font-weights-semibold)
|
||||
}
|
||||
|
||||
.text_blue\.800 {
|
||||
color: var(--colors-blue-800)
|
||||
}
|
||||
|
||||
.mb_2 {
|
||||
margin-bottom: var(--spacing-2)
|
||||
}
|
||||
|
||||
.fs_sm {
|
||||
font-size: var(--font-sizes-sm)
|
||||
}
|
||||
|
||||
.text_blue\.700 {
|
||||
color: var(--colors-blue-700)
|
||||
}
|
||||
|
||||
.leading_relaxed {
|
||||
line-height: var(--line-heights-relaxed)
|
||||
}
|
||||
|
||||
.gap_6 {
|
||||
gap: var(--spacing-6)
|
||||
}
|
||||
|
||||
.gap_2 {
|
||||
gap: var(--spacing-2)
|
||||
}
|
||||
|
||||
.flex_column {
|
||||
flex-direction: column
|
||||
}
|
||||
|
||||
.gap_0 {
|
||||
gap: var(--spacing-0)
|
||||
}
|
||||
|
||||
.flex_1 {
|
||||
flex: 1 1 0%
|
||||
}
|
||||
|
||||
.justify_space-between {
|
||||
justify-content: space-between
|
||||
}
|
||||
|
||||
.gap_10px {
|
||||
gap: 10px
|
||||
}
|
||||
|
||||
.d_flex {
|
||||
display: flex
|
||||
}
|
||||
|
||||
.items_center {
|
||||
align-items: center
|
||||
}
|
||||
|
||||
.gap_3 {
|
||||
gap: var(--spacing-3)
|
||||
}
|
||||
|
||||
.flex_row {
|
||||
flex-direction: row
|
||||
}
|
||||
|
||||
.py_2 {
|
||||
padding-block: var(--spacing-2)
|
||||
}
|
||||
}
|
||||
@@ -1,338 +0,0 @@
|
||||
@layer utilities {
|
||||
|
||||
.bg_gray\.100 {
|
||||
background: var(--colors-gray-100)
|
||||
}
|
||||
|
||||
.rounded_full {
|
||||
border-radius: var(--radii-full)
|
||||
}
|
||||
|
||||
.h_2 {
|
||||
height: var(--sizes-2)
|
||||
}
|
||||
|
||||
.overflow_hidden {
|
||||
overflow: hidden
|
||||
}
|
||||
|
||||
.bg_blue\.500 {
|
||||
background: var(--colors-blue-500)
|
||||
}
|
||||
|
||||
.h_full {
|
||||
height: var(--sizes-full)
|
||||
}
|
||||
|
||||
.transition_width {
|
||||
transition: width
|
||||
}
|
||||
|
||||
.bg_blue\.50 {
|
||||
background: var(--colors-blue-50)
|
||||
}
|
||||
|
||||
.border_purple\.200 {
|
||||
border-color: var(--colors-purple-200)
|
||||
}
|
||||
|
||||
.border_blue\.200 {
|
||||
border-color: var(--colors-blue-200)
|
||||
}
|
||||
|
||||
.text_blue\.800 {
|
||||
color: var(--colors-blue-800)
|
||||
}
|
||||
|
||||
.text_purple\.700 {
|
||||
color: var(--colors-purple-700)
|
||||
}
|
||||
|
||||
.text_blue\.700 {
|
||||
color: var(--colors-blue-700)
|
||||
}
|
||||
|
||||
.text_blue\.600 {
|
||||
color: var(--colors-blue-600)
|
||||
}
|
||||
|
||||
.bg_purple\.50 {
|
||||
background: var(--colors-purple-50)
|
||||
}
|
||||
|
||||
.text_purple\.800 {
|
||||
color: var(--colors-purple-800)
|
||||
}
|
||||
|
||||
.d_grid {
|
||||
display: grid
|
||||
}
|
||||
|
||||
.grid-cols_repeat\(auto-fit\,_minmax\(200px\,_1fr\)\) {
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))
|
||||
}
|
||||
|
||||
.gap_3 {
|
||||
gap: var(--spacing-3)
|
||||
}
|
||||
|
||||
.border_red\.300 {
|
||||
border-color: var(--colors-red-300)
|
||||
}
|
||||
|
||||
.p_3 {
|
||||
padding: var(--spacing-3)
|
||||
}
|
||||
|
||||
.text_gray\.600 {
|
||||
color: var(--colors-gray-600)
|
||||
}
|
||||
|
||||
.w_full {
|
||||
width: var(--sizes-full)
|
||||
}
|
||||
|
||||
.p_2 {
|
||||
padding: var(--spacing-2)
|
||||
}
|
||||
|
||||
.border_gray\.300 {
|
||||
border-color: var(--colors-gray-300)
|
||||
}
|
||||
|
||||
.rounded_md {
|
||||
border-radius: var(--radii-md)
|
||||
}
|
||||
|
||||
.fs_md {
|
||||
font-size: var(--font-sizes-md)
|
||||
}
|
||||
|
||||
.mt_2 {
|
||||
margin-top: var(--spacing-2)
|
||||
}
|
||||
|
||||
.text_red\.600 {
|
||||
color: var(--colors-red-600)
|
||||
}
|
||||
|
||||
.bg_purple\.500 {
|
||||
background: var(--colors-purple-500)
|
||||
}
|
||||
|
||||
.mb_3 {
|
||||
margin-bottom: var(--spacing-3)
|
||||
}
|
||||
|
||||
.border_purple\.300 {
|
||||
border-color: var(--colors-purple-300)
|
||||
}
|
||||
|
||||
.min-h_350px {
|
||||
min-height: 350px
|
||||
}
|
||||
|
||||
.overflow_visible {
|
||||
overflow: visible
|
||||
}
|
||||
|
||||
.bg_yellow\.50 {
|
||||
background: var(--colors-yellow-50)
|
||||
}
|
||||
|
||||
.border_yellow\.300 {
|
||||
border-color: var(--colors-yellow-300)
|
||||
}
|
||||
|
||||
.mb_2 {
|
||||
margin-bottom: var(--spacing-2)
|
||||
}
|
||||
|
||||
.mt_3 {
|
||||
margin-top: var(--spacing-3)
|
||||
}
|
||||
|
||||
.text_yellow\.800 {
|
||||
color: var(--colors-yellow-800)
|
||||
}
|
||||
|
||||
.fs_sm {
|
||||
font-size: var(--font-sizes-sm)
|
||||
}
|
||||
|
||||
.text_yellow\.700 {
|
||||
color: var(--colors-yellow-700)
|
||||
}
|
||||
|
||||
.pl_4 {
|
||||
padding-left: var(--spacing-4)
|
||||
}
|
||||
|
||||
.opacity_1 {
|
||||
opacity: 1
|
||||
}
|
||||
|
||||
.opacity_0\.6 {
|
||||
opacity: 0.6
|
||||
}
|
||||
|
||||
.font_normal {
|
||||
font-weight: var(--font-weights-normal)
|
||||
}
|
||||
|
||||
.mb_1 {
|
||||
margin-bottom: var(--spacing-1)
|
||||
}
|
||||
|
||||
.bg_white {
|
||||
background: var(--colors-white)
|
||||
}
|
||||
|
||||
.border_2px_solid {
|
||||
border: 2px solid
|
||||
}
|
||||
|
||||
.border_blue\.300 {
|
||||
border-color: var(--colors-blue-300)
|
||||
}
|
||||
|
||||
.rounded_xl {
|
||||
border-radius: var(--radii-xl)
|
||||
}
|
||||
|
||||
.p_6 {
|
||||
padding: var(--spacing-6)
|
||||
}
|
||||
|
||||
.min-h_400px {
|
||||
min-height: 400px
|
||||
}
|
||||
|
||||
.border_green\.300 {
|
||||
border-color: var(--colors-green-300)
|
||||
}
|
||||
|
||||
.border_orange\.300 {
|
||||
border-color: var(--colors-orange-300)
|
||||
}
|
||||
|
||||
.bg_green\.50 {
|
||||
background: var(--colors-green-50)
|
||||
}
|
||||
|
||||
.bg_orange\.50 {
|
||||
background: var(--colors-orange-50)
|
||||
}
|
||||
|
||||
.p_4 {
|
||||
padding: var(--spacing-4)
|
||||
}
|
||||
|
||||
.border_1px_solid {
|
||||
border: 1px solid
|
||||
}
|
||||
|
||||
.text_green\.800 {
|
||||
color: var(--colors-green-800)
|
||||
}
|
||||
|
||||
.text_orange\.800 {
|
||||
color: var(--colors-orange-800)
|
||||
}
|
||||
|
||||
.font_medium {
|
||||
font-weight: var(--font-weights-medium)
|
||||
}
|
||||
|
||||
.text_center {
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.fs_lg {
|
||||
font-size: var(--font-sizes-lg)
|
||||
}
|
||||
|
||||
.text_green\.600 {
|
||||
color: var(--colors-green-600)
|
||||
}
|
||||
|
||||
.mb_4 {
|
||||
margin-bottom: var(--spacing-4)
|
||||
}
|
||||
|
||||
.px_6 {
|
||||
padding-inline: var(--spacing-6)
|
||||
}
|
||||
|
||||
.py_3 {
|
||||
padding-block: var(--spacing-3)
|
||||
}
|
||||
|
||||
.bg_green\.500 {
|
||||
background: var(--colors-green-500)
|
||||
}
|
||||
|
||||
.text_white {
|
||||
color: var(--colors-white)
|
||||
}
|
||||
|
||||
.rounded_lg {
|
||||
border-radius: var(--radii-lg)
|
||||
}
|
||||
|
||||
.font_semibold {
|
||||
font-weight: var(--font-weights-semibold)
|
||||
}
|
||||
|
||||
.cursor_pointer {
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
.columns_3 {
|
||||
columns: 3
|
||||
}
|
||||
|
||||
.columns_1 {
|
||||
columns: 1
|
||||
}
|
||||
|
||||
.color-scheme_place-value {
|
||||
color-scheme: place-value
|
||||
}
|
||||
|
||||
.flex_column {
|
||||
flex-direction: column
|
||||
}
|
||||
|
||||
.gap_6 {
|
||||
gap: var(--spacing-6)
|
||||
}
|
||||
|
||||
.d_flex {
|
||||
display: flex
|
||||
}
|
||||
|
||||
.items_center {
|
||||
align-items: center
|
||||
}
|
||||
|
||||
.justify_center {
|
||||
justify-content: center
|
||||
}
|
||||
|
||||
.gap_4 {
|
||||
gap: var(--spacing-4)
|
||||
}
|
||||
|
||||
.flex_row {
|
||||
flex-direction: row
|
||||
}
|
||||
|
||||
.hover\:bg_purple\.600:is(:hover, [data-hover]) {
|
||||
background: var(--colors-purple-600)
|
||||
}
|
||||
|
||||
.hover\:bg_green\.600:is(:hover, [data-hover]) {
|
||||
background: var(--colors-green-600)
|
||||
}
|
||||
}
|
||||
@@ -1,382 +0,0 @@
|
||||
@layer utilities {
|
||||
|
||||
.gap_4 {
|
||||
gap: var(--spacing-4)
|
||||
}
|
||||
|
||||
.gap_6 {
|
||||
gap: var(--spacing-6)
|
||||
}
|
||||
|
||||
.h_320px {
|
||||
height: 320px
|
||||
}
|
||||
|
||||
.h_400px {
|
||||
height: 400px
|
||||
}
|
||||
|
||||
.p_16px {
|
||||
padding: 16px
|
||||
}
|
||||
|
||||
.p_20px {
|
||||
padding: 20px
|
||||
}
|
||||
|
||||
.border_3px_solid {
|
||||
border: 3px solid
|
||||
}
|
||||
|
||||
.rounded_12px {
|
||||
border-radius: 12px
|
||||
}
|
||||
|
||||
.bg_gradient-to-br {
|
||||
background: gradient-to-br
|
||||
}
|
||||
|
||||
.from_amber\.50 {
|
||||
--gradient-from: var(--colors-amber-50)
|
||||
}
|
||||
|
||||
.to_orange\.100 {
|
||||
--gradient-to: var(--colors-orange-100)
|
||||
}
|
||||
|
||||
.shadow_0_8px_24px_rgba\(0\,_0\,_0\,_0\.1\) {
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1)
|
||||
}
|
||||
|
||||
.w_100\% {
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.h_100\% {
|
||||
height: 100%
|
||||
}
|
||||
|
||||
.overflow_hidden {
|
||||
overflow: hidden
|
||||
}
|
||||
|
||||
.transform_scale\(2\.2\) {
|
||||
transform: scale(2.2)
|
||||
}
|
||||
|
||||
.origin_center {
|
||||
transform-origin: center
|
||||
}
|
||||
|
||||
.transition_all_0\.3s_ease {
|
||||
transition: all 0.3s ease
|
||||
}
|
||||
.\[\&_\[data-bead-type\]\]\:cursor_pointer [data-bead-type] {
|
||||
cursor: pointer
|
||||
}
|
||||
.\[\&_\[data-bead-type\]\]\:transition_all_0\.2s_ease [data-bead-type] {
|
||||
transition: all 0.2s ease
|
||||
}
|
||||
|
||||
.bottom_-45px {
|
||||
bottom: -45px
|
||||
}
|
||||
|
||||
.bottom_-55px {
|
||||
bottom: -55px
|
||||
}
|
||||
|
||||
.w_240px {
|
||||
width: 240px
|
||||
}
|
||||
|
||||
.w_300px {
|
||||
width: 300px
|
||||
}
|
||||
|
||||
.gap_0 {
|
||||
gap: var(--spacing-0)
|
||||
}
|
||||
|
||||
.cursor_default {
|
||||
cursor: default
|
||||
}
|
||||
|
||||
.bg_white {
|
||||
background: var(--colors-white)
|
||||
}
|
||||
|
||||
.border_2px_solid {
|
||||
border: 2px solid
|
||||
}
|
||||
|
||||
.border_blue\.200 {
|
||||
border-color: var(--colors-blue-200)
|
||||
}
|
||||
|
||||
.rounded_xl {
|
||||
border-radius: var(--radii-xl)
|
||||
}
|
||||
|
||||
.shadow_0_4px_12px_rgba\(59\,_130\,_246\,_0\.15\) {
|
||||
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15)
|
||||
}
|
||||
|
||||
.pos_relative {
|
||||
position: relative
|
||||
}
|
||||
|
||||
.ring_none {
|
||||
outline: var(--borders-none)
|
||||
}
|
||||
|
||||
.pos_absolute {
|
||||
position: absolute
|
||||
}
|
||||
|
||||
.bottom_-2px {
|
||||
bottom: -2px
|
||||
}
|
||||
|
||||
.left_50\% {
|
||||
left: 50%
|
||||
}
|
||||
|
||||
.transform_translateX\(-50\%\) {
|
||||
transform: translateX(-50%)
|
||||
}
|
||||
|
||||
.w_80\% {
|
||||
width: 80%
|
||||
}
|
||||
|
||||
.h_2px {
|
||||
height: 2px
|
||||
}
|
||||
|
||||
.bg_blue\.400 {
|
||||
background: var(--colors-blue-400)
|
||||
}
|
||||
|
||||
.rounded_full {
|
||||
border-radius: var(--radii-full)
|
||||
}
|
||||
|
||||
.animation_pulse_1s_infinite {
|
||||
animation: pulse 1s infinite
|
||||
}
|
||||
|
||||
.flex-wrap_nowrap {
|
||||
flex-wrap: nowrap
|
||||
}
|
||||
|
||||
.items_center {
|
||||
align-items: center
|
||||
}
|
||||
|
||||
.gap_2 {
|
||||
gap: var(--spacing-2)
|
||||
}
|
||||
|
||||
.justify_center {
|
||||
justify-content: center
|
||||
}
|
||||
|
||||
.min-w_60px {
|
||||
min-width: 60px
|
||||
}
|
||||
|
||||
.min-w_auto {
|
||||
min-width: auto
|
||||
}
|
||||
|
||||
.px_3 {
|
||||
padding-inline: var(--spacing-3)
|
||||
}
|
||||
|
||||
.py_2 {
|
||||
padding-block: var(--spacing-2)
|
||||
}
|
||||
|
||||
.bg_gray\.100 {
|
||||
background: var(--colors-gray-100)
|
||||
}
|
||||
|
||||
.text_gray\.700 {
|
||||
color: var(--colors-gray-700)
|
||||
}
|
||||
|
||||
.border_gray\.300 {
|
||||
border-color: var(--colors-gray-300)
|
||||
}
|
||||
|
||||
.flex_column {
|
||||
flex-direction: column
|
||||
}
|
||||
|
||||
.flex_row {
|
||||
flex-direction: row
|
||||
}
|
||||
|
||||
.d_flex {
|
||||
display: flex
|
||||
}
|
||||
|
||||
.gap_1 {
|
||||
gap: var(--spacing-1)
|
||||
}
|
||||
|
||||
.flex-wrap_wrap {
|
||||
flex-wrap: wrap
|
||||
}
|
||||
|
||||
.min-w_40px {
|
||||
min-width: 40px
|
||||
}
|
||||
|
||||
.min-w_32px {
|
||||
min-width: 32px
|
||||
}
|
||||
|
||||
.px_2 {
|
||||
padding-inline: var(--spacing-2)
|
||||
}
|
||||
|
||||
.py_1 {
|
||||
padding-block: var(--spacing-1)
|
||||
}
|
||||
|
||||
.bg_blue\.100 {
|
||||
background: var(--colors-blue-100)
|
||||
}
|
||||
|
||||
.text_blue\.700 {
|
||||
color: var(--colors-blue-700)
|
||||
}
|
||||
|
||||
.border_blue\.300 {
|
||||
border-color: var(--colors-blue-300)
|
||||
}
|
||||
|
||||
.rounded_md {
|
||||
border-radius: var(--radii-md)
|
||||
}
|
||||
|
||||
.fs_xs {
|
||||
font-size: var(--font-sizes-xs)
|
||||
}
|
||||
|
||||
.font_medium {
|
||||
font-weight: var(--font-weights-medium)
|
||||
}
|
||||
|
||||
.cursor_pointer {
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
.transition_all_0\.2s_ease {
|
||||
transition: all 0.2s ease
|
||||
}
|
||||
|
||||
.mt_16 {
|
||||
margin-top: var(--spacing-16)
|
||||
}
|
||||
|
||||
.mt_0 {
|
||||
margin-top: var(--spacing-0)
|
||||
}
|
||||
|
||||
.fs_sm {
|
||||
font-size: var(--font-sizes-sm)
|
||||
}
|
||||
|
||||
.text_gray\.600 {
|
||||
color: var(--colors-gray-600)
|
||||
}
|
||||
|
||||
.text_center {
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.max-w_450px {
|
||||
max-width: 450px
|
||||
}
|
||||
|
||||
.leading_relaxed {
|
||||
line-height: var(--line-heights-relaxed)
|
||||
}
|
||||
|
||||
.bg_gray\.50 {
|
||||
background: var(--colors-gray-50)
|
||||
}
|
||||
|
||||
.px_4 {
|
||||
padding-inline: var(--spacing-4)
|
||||
}
|
||||
|
||||
.py_3 {
|
||||
padding-block: var(--spacing-3)
|
||||
}
|
||||
|
||||
.rounded_lg {
|
||||
border-radius: var(--radii-lg)
|
||||
}
|
||||
|
||||
.border_1px_solid {
|
||||
border: 1px solid
|
||||
}
|
||||
|
||||
.border_gray\.200 {
|
||||
border-color: var(--colors-gray-200)
|
||||
}
|
||||
|
||||
.w_144pt {
|
||||
width: 144pt
|
||||
}
|
||||
|
||||
.w_180pt {
|
||||
width: 180pt
|
||||
}
|
||||
|
||||
.h_192pt {
|
||||
height: 192pt
|
||||
}
|
||||
|
||||
.h_240pt {
|
||||
height: 240pt
|
||||
}
|
||||
|
||||
.hover\:shadow_0_12px_32px_rgba\(0\,_0\,_0\,_0\.15\):is(:hover, [data-hover]) {
|
||||
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15)
|
||||
}
|
||||
|
||||
.hover\:bg_gray\.200:is(:hover, [data-hover]) {
|
||||
background: var(--colors-gray-200)
|
||||
}
|
||||
|
||||
.hover\:border_gray\.400:is(:hover, [data-hover]) {
|
||||
border-color: var(--colors-gray-400)
|
||||
}
|
||||
|
||||
.hover\:bg_blue\.200:is(:hover, [data-hover]) {
|
||||
background: var(--colors-blue-200)
|
||||
}
|
||||
|
||||
.hover\:border_blue\.400:is(:hover, [data-hover]) {
|
||||
border-color: var(--colors-blue-400)
|
||||
}
|
||||
|
||||
.hover\:transform_translateY\(-1px\):is(:hover, [data-hover]) {
|
||||
transform: translateY(-1px)
|
||||
}
|
||||
.\[\&_\[data-bead-type\]\]\:hover\:filter_brightness\(1\.2\) [data-bead-type]:is(:hover, [data-hover]) {
|
||||
filter: brightness(1.2)
|
||||
}
|
||||
.\[\&_\[data-bead-type\]\]\:hover\:transform_scale\(1\.05\) [data-bead-type]:is(:hover, [data-hover]) {
|
||||
transform: scale(1.05)
|
||||
}
|
||||
|
||||
.active\:transform_scale\(0\.95\):is(:active, [data-active]) {
|
||||
transform: scale(0.95)
|
||||
}
|
||||
}
|
||||
@@ -1,236 +0,0 @@
|
||||
@layer utilities {
|
||||
|
||||
.fs_xl {
|
||||
font-size: var(--font-sizes-xl)
|
||||
}
|
||||
|
||||
.px_3 {
|
||||
padding-inline: var(--spacing-3)
|
||||
}
|
||||
|
||||
.py_1 {
|
||||
padding-block: var(--spacing-1)
|
||||
}
|
||||
|
||||
.bg_brand\.100 {
|
||||
background: var(--colors-brand-100)
|
||||
}
|
||||
|
||||
.text_brand\.800 {
|
||||
color: var(--colors-brand-800)
|
||||
}
|
||||
|
||||
.p_4 {
|
||||
padding: var(--spacing-4)
|
||||
}
|
||||
|
||||
.border_1px_solid {
|
||||
border: 1px solid
|
||||
}
|
||||
|
||||
.fs_sm {
|
||||
font-size: var(--font-sizes-sm)
|
||||
}
|
||||
|
||||
.font_semibold {
|
||||
font-weight: var(--font-weights-semibold)
|
||||
}
|
||||
|
||||
.mb_2 {
|
||||
margin-bottom: var(--spacing-2)
|
||||
}
|
||||
|
||||
.aspect_3\/4 {
|
||||
aspect-ratio: 3/4
|
||||
}
|
||||
|
||||
.rounded_xl {
|
||||
border-radius: var(--radii-xl)
|
||||
}
|
||||
|
||||
.border_2px_solid {
|
||||
border: 2px solid
|
||||
}
|
||||
|
||||
.border_gray\.200 {
|
||||
border-color: var(--colors-gray-200)
|
||||
}
|
||||
|
||||
.pos_relative {
|
||||
position: relative
|
||||
}
|
||||
|
||||
.cursor_pointer {
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
.transition_all {
|
||||
transition-property: var(--transition-prop, all);
|
||||
transition-timing-function: var(--transition-easing, cubic-bezier(0.4, 0, 0.2, 1));
|
||||
transition-duration: var(--transition-duration, 150ms)
|
||||
}
|
||||
|
||||
.pos_absolute {
|
||||
position: absolute
|
||||
}
|
||||
|
||||
.top_2 {
|
||||
top: var(--spacing-2)
|
||||
}
|
||||
|
||||
.right_2 {
|
||||
right: var(--spacing-2)
|
||||
}
|
||||
|
||||
.p_1 {
|
||||
padding: var(--spacing-1)
|
||||
}
|
||||
|
||||
.bg_white {
|
||||
background: var(--colors-white)
|
||||
}
|
||||
|
||||
.rounded_full {
|
||||
border-radius: var(--radii-full)
|
||||
}
|
||||
|
||||
.shadow_card {
|
||||
box-shadow: var(--shadows-card)
|
||||
}
|
||||
|
||||
.z_10 {
|
||||
z-index: 10
|
||||
}
|
||||
|
||||
.bg_gray\.50 {
|
||||
background: var(--colors-gray-50)
|
||||
}
|
||||
|
||||
.fs_4xl {
|
||||
font-size: var(--font-sizes-4xl)
|
||||
}
|
||||
|
||||
.font_bold {
|
||||
font-weight: var(--font-weights-bold)
|
||||
}
|
||||
|
||||
.text_gray\.900 {
|
||||
color: var(--colors-gray-900)
|
||||
}
|
||||
|
||||
.font_mono {
|
||||
font-family: var(--fonts-mono)
|
||||
}
|
||||
|
||||
.w_full {
|
||||
width: var(--sizes-full)
|
||||
}
|
||||
|
||||
.h_full {
|
||||
height: var(--sizes-full)
|
||||
}
|
||||
|
||||
.p_2 {
|
||||
padding: var(--spacing-2)
|
||||
}
|
||||
|
||||
.justify_center {
|
||||
justify-content: center
|
||||
}
|
||||
|
||||
.overflow_hidden {
|
||||
overflow: hidden
|
||||
}
|
||||
|
||||
.fs_xs {
|
||||
font-size: var(--font-sizes-xs)
|
||||
}
|
||||
|
||||
.text_gray\.600 {
|
||||
color: var(--colors-gray-600)
|
||||
}
|
||||
|
||||
.font_medium {
|
||||
font-weight: var(--font-weights-medium)
|
||||
}
|
||||
|
||||
.color-scheme_place-value {
|
||||
color-scheme: place-value
|
||||
}
|
||||
|
||||
.columns_auto {
|
||||
columns: auto
|
||||
}
|
||||
|
||||
.gap_6 {
|
||||
gap: var(--spacing-6)
|
||||
}
|
||||
|
||||
.flex_column {
|
||||
flex-direction: column
|
||||
}
|
||||
|
||||
.gap_1 {
|
||||
gap: var(--spacing-1)
|
||||
}
|
||||
|
||||
.justify_space-between {
|
||||
justify-content: space-between
|
||||
}
|
||||
|
||||
.gap_10px {
|
||||
gap: 10px
|
||||
}
|
||||
|
||||
.d_flex {
|
||||
display: flex
|
||||
}
|
||||
|
||||
.items_center {
|
||||
align-items: center
|
||||
}
|
||||
|
||||
.flex_row {
|
||||
flex-direction: row
|
||||
}
|
||||
|
||||
.gap_4 {
|
||||
gap: var(--spacing-4)
|
||||
}
|
||||
|
||||
.d_grid {
|
||||
display: grid
|
||||
}
|
||||
|
||||
.grid-cols_repeat\(1\,_minmax\(0\,_1fr\)\) {
|
||||
grid-template-columns: repeat(1, minmax(0, 1fr))
|
||||
}
|
||||
|
||||
.gap_3 {
|
||||
gap: var(--spacing-3)
|
||||
}
|
||||
|
||||
.hover\:border_brand\.300:is(:hover, [data-hover]) {
|
||||
border-color: var(--colors-brand-300)
|
||||
}
|
||||
|
||||
.hover\:transform_translateY\(-2px\):is(:hover, [data-hover]) {
|
||||
transform: translateY(-2px)
|
||||
}
|
||||
|
||||
.hover\:shadow_card:is(:hover, [data-hover]) {
|
||||
box-shadow: var(--shadows-card)
|
||||
}
|
||||
|
||||
@media screen and (min-width: 48em) {
|
||||
.md\:grid-cols_repeat\(2\,_minmax\(0\,_1fr\)\) {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr))
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 64em) {
|
||||
.lg\:grid-cols_repeat\(3\,_minmax\(0\,_1fr\)\) {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr))
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,205 +0,0 @@
|
||||
@layer utilities {
|
||||
|
||||
.font_semibold {
|
||||
font-weight: var(--font-weights-semibold)
|
||||
}
|
||||
|
||||
.bg_brand\.600 {
|
||||
background: var(--colors-brand-600)
|
||||
}
|
||||
|
||||
.bg_gray\.300 {
|
||||
background: var(--colors-gray-300)
|
||||
}
|
||||
|
||||
.w_11 {
|
||||
width: var(--sizes-11)
|
||||
}
|
||||
|
||||
.h_6 {
|
||||
height: var(--sizes-6)
|
||||
}
|
||||
|
||||
.transform_translateX\(20px\) {
|
||||
transform: translateX(20px)
|
||||
}
|
||||
|
||||
.transform_translateX\(0px\) {
|
||||
transform: translateX(0px)
|
||||
}
|
||||
|
||||
.d_block {
|
||||
display: block
|
||||
}
|
||||
|
||||
.shadow_card {
|
||||
box-shadow: var(--shadows-card)
|
||||
}
|
||||
|
||||
.transition_transform_0\.2s {
|
||||
transition: transform 0.2s
|
||||
}
|
||||
|
||||
.will-change_transform {
|
||||
will-change: transform
|
||||
}
|
||||
|
||||
.w_5 {
|
||||
width: var(--sizes-5)
|
||||
}
|
||||
|
||||
.h_5 {
|
||||
height: var(--sizes-5)
|
||||
}
|
||||
|
||||
.rounded_full {
|
||||
border-radius: var(--radii-full)
|
||||
}
|
||||
|
||||
.border_2px_solid {
|
||||
border: 2px solid
|
||||
}
|
||||
|
||||
.border_gray\.300 {
|
||||
border-color: var(--colors-gray-300)
|
||||
}
|
||||
|
||||
.bg_white {
|
||||
background: var(--colors-white)
|
||||
}
|
||||
|
||||
.transition_all {
|
||||
transition-property: var(--transition-prop, all);
|
||||
transition-timing-function: var(--transition-easing, cubic-bezier(0.4, 0, 0.2, 1));
|
||||
transition-duration: var(--transition-duration, 150ms)
|
||||
}
|
||||
.\[\&\[data-state\=checked\]\]\:border_brand\.600[data-state=checked] {
|
||||
border-color: var(--colors-brand-600)
|
||||
}
|
||||
|
||||
.mt_0\.5 {
|
||||
margin-top: var(--spacing-0\.5)
|
||||
}
|
||||
|
||||
.items_center {
|
||||
align-items: center
|
||||
}
|
||||
|
||||
.justify_center {
|
||||
justify-content: center
|
||||
}
|
||||
|
||||
.w_full {
|
||||
width: var(--sizes-full)
|
||||
}
|
||||
|
||||
.h_full {
|
||||
height: var(--sizes-full)
|
||||
}
|
||||
|
||||
.pos_relative {
|
||||
position: relative
|
||||
}
|
||||
.after\:content_\"\"::after {
|
||||
content: ""
|
||||
}
|
||||
.after\:d_block::after {
|
||||
display: block
|
||||
}
|
||||
.after\:w_2::after {
|
||||
width: var(--sizes-2)
|
||||
}
|
||||
.after\:h_2::after {
|
||||
height: var(--sizes-2)
|
||||
}
|
||||
.after\:rounded_full::after {
|
||||
border-radius: var(--radii-full)
|
||||
}
|
||||
.after\:bg_brand\.600::after {
|
||||
background: var(--colors-brand-600)
|
||||
}
|
||||
|
||||
.fs_sm {
|
||||
font-size: var(--font-sizes-sm)
|
||||
}
|
||||
|
||||
.font_medium {
|
||||
font-weight: var(--font-weights-medium)
|
||||
}
|
||||
|
||||
.text_gray\.900 {
|
||||
color: var(--colors-gray-900)
|
||||
}
|
||||
|
||||
.cursor_pointer {
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
.fs_xs {
|
||||
font-size: var(--font-sizes-xs)
|
||||
}
|
||||
|
||||
.text_gray\.600 {
|
||||
color: var(--colors-gray-600)
|
||||
}
|
||||
|
||||
.leading_tight {
|
||||
line-height: var(--line-heights-tight)
|
||||
}
|
||||
|
||||
.gap_2 {
|
||||
gap: var(--spacing-2)
|
||||
}
|
||||
|
||||
.flex_column {
|
||||
flex-direction: column
|
||||
}
|
||||
|
||||
.gap_0\.5 {
|
||||
gap: var(--spacing-0\.5)
|
||||
}
|
||||
|
||||
.flex_1 {
|
||||
flex: 1 1 0%
|
||||
}
|
||||
|
||||
.d_grid {
|
||||
display: grid
|
||||
}
|
||||
|
||||
.grid-cols_repeat\(1\,_minmax\(0\,_1fr\)\) {
|
||||
grid-template-columns: repeat(1, minmax(0, 1fr))
|
||||
}
|
||||
|
||||
.gap_4 {
|
||||
gap: var(--spacing-4)
|
||||
}
|
||||
|
||||
.d_flex {
|
||||
display: flex
|
||||
}
|
||||
|
||||
.items_start {
|
||||
align-items: start
|
||||
}
|
||||
|
||||
.gap_3 {
|
||||
gap: var(--spacing-3)
|
||||
}
|
||||
|
||||
.flex_row {
|
||||
flex-direction: row
|
||||
}
|
||||
|
||||
.hover\:bg_brand\.700:is(:hover, [data-hover]) {
|
||||
background: var(--colors-brand-700)
|
||||
}
|
||||
|
||||
.hover\:bg_gray\.400:is(:hover, [data-hover]) {
|
||||
background: var(--colors-gray-400)
|
||||
}
|
||||
|
||||
.hover\:border_brand\.400:is(:hover, [data-hover]) {
|
||||
border-color: var(--colors-brand-400)
|
||||
}
|
||||
}
|
||||
@@ -1,155 +0,0 @@
|
||||
@layer utilities {
|
||||
|
||||
.bg_green\.25 {
|
||||
background: green.25
|
||||
}
|
||||
|
||||
.\[\&_svg\]\:w_auto svg {
|
||||
width: auto
|
||||
}
|
||||
|
||||
.\[\&_svg\]\:h_auto svg {
|
||||
height: auto
|
||||
}
|
||||
|
||||
.\[\&_svg\]\:w_100\%\! svg {
|
||||
width: 100% !important
|
||||
}
|
||||
|
||||
.\[\&_svg\]\:h_100\%\! svg {
|
||||
height: 100% !important
|
||||
}
|
||||
|
||||
.cursor_pointer {
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
.fs_4xl {
|
||||
font-size: var(--font-sizes-4xl)
|
||||
}
|
||||
|
||||
.transition_all {
|
||||
transition-property: var(--transition-prop, all);
|
||||
transition-timing-function: var(--transition-easing, cubic-bezier(0.4, 0, 0.2, 1));
|
||||
transition-duration: var(--transition-duration, 150ms)
|
||||
}
|
||||
|
||||
.bg_blue\.25 {
|
||||
background: blue.25
|
||||
}
|
||||
|
||||
.w_6 {
|
||||
width: var(--sizes-6)
|
||||
}
|
||||
|
||||
.h_6 {
|
||||
height: var(--sizes-6)
|
||||
}
|
||||
|
||||
.border_2px_solid {
|
||||
border: 2px solid
|
||||
}
|
||||
|
||||
.border_blue\.200 {
|
||||
border-color: var(--colors-blue-200)
|
||||
}
|
||||
|
||||
.border-t_blue\.500 {
|
||||
border-top-color: var(--colors-blue-500)
|
||||
}
|
||||
|
||||
.rounded_full {
|
||||
border-radius: var(--radii-full)
|
||||
}
|
||||
|
||||
.animation_spin_1s_linear_infinite {
|
||||
animation: spin 1s linear infinite
|
||||
}
|
||||
|
||||
.bg_red\.25 {
|
||||
background: red.25
|
||||
}
|
||||
|
||||
.fs_3xl {
|
||||
font-size: var(--font-sizes-3xl)
|
||||
}
|
||||
|
||||
.opacity_0\.6 {
|
||||
opacity: 0.6
|
||||
}
|
||||
|
||||
.bg_gray\.50 {
|
||||
background: var(--colors-gray-50)
|
||||
}
|
||||
|
||||
.rounded_md {
|
||||
border-radius: var(--radii-md)
|
||||
}
|
||||
|
||||
.min-h_200px {
|
||||
min-height: 200px
|
||||
}
|
||||
|
||||
.text_gray\.500 {
|
||||
color: var(--colors-gray-500)
|
||||
}
|
||||
|
||||
.fs_sm {
|
||||
font-size: var(--font-sizes-sm)
|
||||
}
|
||||
|
||||
.w_full {
|
||||
width: var(--sizes-full)
|
||||
}
|
||||
|
||||
.h_full {
|
||||
height: var(--sizes-full)
|
||||
}
|
||||
|
||||
.d_flex {
|
||||
display: flex
|
||||
}
|
||||
|
||||
.items_center {
|
||||
align-items: center
|
||||
}
|
||||
|
||||
.justify_center {
|
||||
justify-content: center
|
||||
}
|
||||
|
||||
.overflow_hidden {
|
||||
overflow: hidden
|
||||
}
|
||||
.\[\&_svg\]\:w_100\% svg {
|
||||
width: 100%
|
||||
}
|
||||
.\[\&_svg\]\:h_100\% svg {
|
||||
height: 100%
|
||||
}
|
||||
.\[\&_svg\]\:max-w_100\% svg {
|
||||
max-width: 100%
|
||||
}
|
||||
.\[\&_svg\]\:max-h_100\% svg {
|
||||
max-height: 100%
|
||||
}
|
||||
.\[\&_svg\]\:object_contain svg {
|
||||
object-fit: contain
|
||||
}
|
||||
|
||||
.hover\:bg_green\.50:is(:hover, [data-hover]) {
|
||||
background: var(--colors-green-50)
|
||||
}
|
||||
|
||||
.hover\:bg_gray\.100:is(:hover, [data-hover]) {
|
||||
background: var(--colors-gray-100)
|
||||
}
|
||||
|
||||
.hover\:transform_scale\(1\.02\):is(:hover, [data-hover]) {
|
||||
transform: scale(1.02)
|
||||
}
|
||||
|
||||
.hover\:opacity_0\.8:is(:hover, [data-hover]) {
|
||||
opacity: 0.8
|
||||
}
|
||||
}
|
||||
@@ -1,6 +0,0 @@
|
||||
@layer utilities {
|
||||
|
||||
.color-scheme_place-value {
|
||||
color-scheme: place-value
|
||||
}
|
||||
}
|
||||
@@ -1,354 +0,0 @@
|
||||
@layer utilities {
|
||||
|
||||
.h_400px {
|
||||
height: 400px
|
||||
}
|
||||
|
||||
.text_red\.600 {
|
||||
color: var(--colors-red-600)
|
||||
}
|
||||
|
||||
.h_100\% {
|
||||
height: 100%
|
||||
}
|
||||
|
||||
.min-h_600px {
|
||||
min-height: 600px
|
||||
}
|
||||
|
||||
.border-b_1px_solid {
|
||||
border-bottom: 1px solid
|
||||
}
|
||||
|
||||
.fs_xl {
|
||||
font-size: var(--font-sizes-xl)
|
||||
}
|
||||
|
||||
.border_orange\.300 {
|
||||
border-color: var(--colors-orange-300)
|
||||
}
|
||||
|
||||
.text_orange\.700 {
|
||||
color: var(--colors-orange-700)
|
||||
}
|
||||
|
||||
.px_3 {
|
||||
padding-inline: var(--spacing-3)
|
||||
}
|
||||
|
||||
.border_gray\.300 {
|
||||
border-color: var(--colors-gray-300)
|
||||
}
|
||||
|
||||
.cursor_pointer {
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
.mt_3 {
|
||||
margin-top: var(--spacing-3)
|
||||
}
|
||||
|
||||
.bg_gray\.200 {
|
||||
background: var(--colors-gray-200)
|
||||
}
|
||||
|
||||
.h_2 {
|
||||
height: var(--sizes-2)
|
||||
}
|
||||
|
||||
.bg_green\.500 {
|
||||
background: var(--colors-green-500)
|
||||
}
|
||||
|
||||
.h_full {
|
||||
height: var(--sizes-full)
|
||||
}
|
||||
|
||||
.rounded_full {
|
||||
border-radius: var(--radii-full)
|
||||
}
|
||||
|
||||
.transition_width_0\.3s_ease {
|
||||
transition: width 0.3s ease
|
||||
}
|
||||
|
||||
.flex_1 {
|
||||
flex: 1 1 0%
|
||||
}
|
||||
|
||||
.mb_4 {
|
||||
margin-bottom: var(--spacing-4)
|
||||
}
|
||||
|
||||
.d_inline-block {
|
||||
display: inline-block
|
||||
}
|
||||
|
||||
.text_right {
|
||||
text-align: right
|
||||
}
|
||||
|
||||
.text_gray\.400 {
|
||||
color: var(--colors-gray-400)
|
||||
}
|
||||
|
||||
.border-t_2px_solid {
|
||||
border-top: 2px solid
|
||||
}
|
||||
|
||||
.border_gray\.800 {
|
||||
border-color: var(--colors-gray-800)
|
||||
}
|
||||
|
||||
.pt_2 {
|
||||
padding-top: var(--spacing-2)
|
||||
}
|
||||
|
||||
.fs_2xl {
|
||||
font-size: var(--font-sizes-2xl)
|
||||
}
|
||||
|
||||
.fs_lg {
|
||||
font-size: var(--font-sizes-lg)
|
||||
}
|
||||
|
||||
.text_gray\.700 {
|
||||
color: var(--colors-gray-700)
|
||||
}
|
||||
|
||||
.mb_3 {
|
||||
margin-bottom: var(--spacing-3)
|
||||
}
|
||||
|
||||
.bg_blue\.100 {
|
||||
background: var(--colors-blue-100)
|
||||
}
|
||||
|
||||
.bg_gray\.100 {
|
||||
background: var(--colors-gray-100)
|
||||
}
|
||||
|
||||
.text_blue\.800 {
|
||||
color: var(--colors-blue-800)
|
||||
}
|
||||
|
||||
.border_blue\.300 {
|
||||
border-color: var(--colors-blue-300)
|
||||
}
|
||||
|
||||
.border_transparent {
|
||||
border-color: var(--colors-transparent)
|
||||
}
|
||||
|
||||
.fs_md {
|
||||
font-size: var(--font-sizes-md)
|
||||
}
|
||||
|
||||
.font_mono {
|
||||
font-family: var(--fonts-mono)
|
||||
}
|
||||
|
||||
.bg_yellow\.100 {
|
||||
background: var(--colors-yellow-100)
|
||||
}
|
||||
|
||||
.bg_red\.100 {
|
||||
background: var(--colors-red-100)
|
||||
}
|
||||
|
||||
.bg_green\.100 {
|
||||
background: var(--colors-green-100)
|
||||
}
|
||||
|
||||
.text_yellow\.800 {
|
||||
color: var(--colors-yellow-800)
|
||||
}
|
||||
|
||||
.text_red\.800 {
|
||||
color: var(--colors-red-800)
|
||||
}
|
||||
|
||||
.text_green\.800 {
|
||||
color: var(--colors-green-800)
|
||||
}
|
||||
|
||||
.px_2 {
|
||||
padding-inline: var(--spacing-2)
|
||||
}
|
||||
|
||||
.py_1 {
|
||||
padding-block: var(--spacing-1)
|
||||
}
|
||||
|
||||
.fs_xs {
|
||||
font-size: var(--font-sizes-xs)
|
||||
}
|
||||
|
||||
.font_medium {
|
||||
font-weight: var(--font-weights-medium)
|
||||
}
|
||||
|
||||
.bg_green\.50 {
|
||||
background: var(--colors-green-50)
|
||||
}
|
||||
|
||||
.border_green\.200 {
|
||||
border-color: var(--colors-green-200)
|
||||
}
|
||||
|
||||
.text_green\.700 {
|
||||
color: var(--colors-green-700)
|
||||
}
|
||||
|
||||
.bg_red\.50 {
|
||||
background: var(--colors-red-50)
|
||||
}
|
||||
|
||||
.border_red\.200 {
|
||||
border-color: var(--colors-red-200)
|
||||
}
|
||||
|
||||
.text_red\.700 {
|
||||
color: var(--colors-red-700)
|
||||
}
|
||||
|
||||
.p_4 {
|
||||
padding: var(--spacing-4)
|
||||
}
|
||||
|
||||
.bg_blue\.50 {
|
||||
background: var(--colors-blue-50)
|
||||
}
|
||||
|
||||
.border_blue\.200 {
|
||||
border-color: var(--colors-blue-200)
|
||||
}
|
||||
|
||||
.text_blue\.700 {
|
||||
color: var(--colors-blue-700)
|
||||
}
|
||||
|
||||
.max-w_600px {
|
||||
max-width: 600px
|
||||
}
|
||||
|
||||
.font_bold {
|
||||
font-weight: var(--font-weights-bold)
|
||||
}
|
||||
|
||||
.mt_2 {
|
||||
margin-top: var(--spacing-2)
|
||||
}
|
||||
|
||||
.bg_white {
|
||||
background: var(--colors-white)
|
||||
}
|
||||
|
||||
.border_2px_solid {
|
||||
border: 2px solid
|
||||
}
|
||||
|
||||
.rounded_lg {
|
||||
border-radius: var(--radii-lg)
|
||||
}
|
||||
|
||||
.p_6 {
|
||||
padding: var(--spacing-6)
|
||||
}
|
||||
|
||||
.shadow_lg {
|
||||
box-shadow: var(--shadows-lg)
|
||||
}
|
||||
|
||||
.p_3 {
|
||||
padding: var(--spacing-3)
|
||||
}
|
||||
|
||||
.bg_gray\.50 {
|
||||
background: var(--colors-gray-50)
|
||||
}
|
||||
|
||||
.border_1px_solid {
|
||||
border: 1px solid
|
||||
}
|
||||
|
||||
.border_gray\.200 {
|
||||
border-color: var(--colors-gray-200)
|
||||
}
|
||||
|
||||
.rounded_md {
|
||||
border-radius: var(--radii-md)
|
||||
}
|
||||
|
||||
.fs_sm {
|
||||
font-size: var(--font-sizes-sm)
|
||||
}
|
||||
|
||||
.text_gray\.600 {
|
||||
color: var(--colors-gray-600)
|
||||
}
|
||||
|
||||
.text_center {
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.columns_3 {
|
||||
columns: 3
|
||||
}
|
||||
|
||||
.color-scheme_place-value {
|
||||
color-scheme: place-value
|
||||
}
|
||||
|
||||
.justify_space-between {
|
||||
justify-content: space-between
|
||||
}
|
||||
|
||||
.gap_10px {
|
||||
gap: 10px
|
||||
}
|
||||
|
||||
.justify_center {
|
||||
justify-content: center
|
||||
}
|
||||
|
||||
.gap_2 {
|
||||
gap: var(--spacing-2)
|
||||
}
|
||||
|
||||
.flex_row {
|
||||
flex-direction: row
|
||||
}
|
||||
|
||||
.mb_2 {
|
||||
margin-bottom: var(--spacing-2)
|
||||
}
|
||||
|
||||
.d_flex {
|
||||
display: flex
|
||||
}
|
||||
|
||||
.items_center {
|
||||
align-items: center
|
||||
}
|
||||
|
||||
.gap_6 {
|
||||
gap: var(--spacing-6)
|
||||
}
|
||||
|
||||
.flex_column {
|
||||
flex-direction: column
|
||||
}
|
||||
|
||||
.hover\:bg_blue\.50:is(:hover, [data-hover]) {
|
||||
background: var(--colors-blue-50)
|
||||
}
|
||||
|
||||
.hover\:bg_orange\.50:is(:hover, [data-hover]) {
|
||||
background: var(--colors-orange-50)
|
||||
}
|
||||
|
||||
.hover\:bg_gray\.50:is(:hover, [data-hover]) {
|
||||
background: var(--colors-gray-50)
|
||||
}
|
||||
}
|
||||
@@ -1,126 +0,0 @@
|
||||
@layer utilities {
|
||||
|
||||
.bg_white {
|
||||
background: var(--colors-white)
|
||||
}
|
||||
|
||||
.border_gray\.200 {
|
||||
border-color: var(--colors-gray-200)
|
||||
}
|
||||
|
||||
.rounded_md {
|
||||
border-radius: var(--radii-md)
|
||||
}
|
||||
|
||||
.fs_sm {
|
||||
font-size: var(--font-sizes-sm)
|
||||
}
|
||||
|
||||
.mb_2 {
|
||||
margin-bottom: var(--spacing-2)
|
||||
}
|
||||
|
||||
.text_gray\.800 {
|
||||
color: var(--colors-gray-800)
|
||||
}
|
||||
|
||||
.grid-cols_1fr_1fr_1fr {
|
||||
grid-template-columns: 1fr 1fr 1fr
|
||||
}
|
||||
|
||||
.font_medium {
|
||||
font-weight: var(--font-weights-medium)
|
||||
}
|
||||
|
||||
.mb_1 {
|
||||
margin-bottom: var(--spacing-1)
|
||||
}
|
||||
|
||||
.text_gray\.700 {
|
||||
color: var(--colors-gray-700)
|
||||
}
|
||||
|
||||
.d_grid {
|
||||
display: grid
|
||||
}
|
||||
|
||||
.grid-cols_1fr_1fr {
|
||||
grid-template-columns: 1fr 1fr
|
||||
}
|
||||
|
||||
.px_1 {
|
||||
padding-inline: var(--spacing-1)
|
||||
}
|
||||
|
||||
.py_1 {
|
||||
padding-block: var(--spacing-1)
|
||||
}
|
||||
|
||||
.cursor_pointer {
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
.text_center {
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.p_2 {
|
||||
padding: var(--spacing-2)
|
||||
}
|
||||
|
||||
.bg_yellow\.50 {
|
||||
background: var(--colors-yellow-50)
|
||||
}
|
||||
|
||||
.border_1px_solid {
|
||||
border: 1px solid
|
||||
}
|
||||
|
||||
.border_yellow\.200 {
|
||||
border-color: var(--colors-yellow-200)
|
||||
}
|
||||
|
||||
.rounded_sm {
|
||||
border-radius: var(--radii-sm)
|
||||
}
|
||||
|
||||
.fs_xs {
|
||||
font-size: var(--font-sizes-xs)
|
||||
}
|
||||
|
||||
.text_yellow\.800 {
|
||||
color: var(--colors-yellow-800)
|
||||
}
|
||||
|
||||
.bg_gray {
|
||||
background: gray
|
||||
}
|
||||
|
||||
.bg_none {
|
||||
background: none
|
||||
}
|
||||
|
||||
.columns_2 {
|
||||
columns: 2
|
||||
}
|
||||
|
||||
.gap_1 {
|
||||
gap: var(--spacing-1)
|
||||
}
|
||||
|
||||
.d_flex {
|
||||
display: flex
|
||||
}
|
||||
|
||||
.items_stretch {
|
||||
align-items: stretch
|
||||
}
|
||||
|
||||
.gap_2 {
|
||||
gap: var(--spacing-2)
|
||||
}
|
||||
|
||||
.flex_column {
|
||||
flex-direction: column
|
||||
}
|
||||
}
|
||||
@@ -1,266 +0,0 @@
|
||||
@layer utilities {
|
||||
|
||||
.border-b_1px_solid {
|
||||
border-bottom: 1px solid
|
||||
}
|
||||
|
||||
.bg_blue\.500 {
|
||||
background: var(--colors-blue-500)
|
||||
}
|
||||
|
||||
.bg_gray\.200 {
|
||||
background: var(--colors-gray-200)
|
||||
}
|
||||
|
||||
.text_gray\.700 {
|
||||
color: var(--colors-gray-700)
|
||||
}
|
||||
|
||||
.px_3 {
|
||||
padding-inline: var(--spacing-3)
|
||||
}
|
||||
|
||||
.py_2 {
|
||||
padding-block: var(--spacing-2)
|
||||
}
|
||||
|
||||
.bg_green\.500 {
|
||||
background: var(--colors-green-500)
|
||||
}
|
||||
|
||||
.text_white {
|
||||
color: var(--colors-white)
|
||||
}
|
||||
|
||||
.cursor_pointer {
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
.flex_1 {
|
||||
flex: 1 1 0%
|
||||
}
|
||||
|
||||
.w_50\% {
|
||||
width: 50%
|
||||
}
|
||||
|
||||
.p_4 {
|
||||
padding: var(--spacing-4)
|
||||
}
|
||||
|
||||
.bg_gray\.50 {
|
||||
background: var(--colors-gray-50)
|
||||
}
|
||||
|
||||
.overflow-y_auto {
|
||||
overflow-y: auto
|
||||
}
|
||||
|
||||
.fs_lg {
|
||||
font-size: var(--font-sizes-lg)
|
||||
}
|
||||
|
||||
.bg_green\.50 {
|
||||
background: var(--colors-green-50)
|
||||
}
|
||||
|
||||
.bg_yellow\.50 {
|
||||
background: var(--colors-yellow-50)
|
||||
}
|
||||
|
||||
.border_green\.200 {
|
||||
border-color: var(--colors-green-200)
|
||||
}
|
||||
|
||||
.border_yellow\.200 {
|
||||
border-color: var(--colors-yellow-200)
|
||||
}
|
||||
|
||||
.mb_4 {
|
||||
margin-bottom: var(--spacing-4)
|
||||
}
|
||||
|
||||
.text_yellow\.700 {
|
||||
color: var(--colors-yellow-700)
|
||||
}
|
||||
|
||||
.p_3 {
|
||||
padding: var(--spacing-3)
|
||||
}
|
||||
|
||||
.bg_white {
|
||||
background: var(--colors-white)
|
||||
}
|
||||
|
||||
.rounded_md {
|
||||
border-radius: var(--radii-md)
|
||||
}
|
||||
|
||||
.border_1px_solid {
|
||||
border: 1px solid
|
||||
}
|
||||
|
||||
.border_gray\.200 {
|
||||
border-color: var(--colors-gray-200)
|
||||
}
|
||||
|
||||
.text_right {
|
||||
text-align: right
|
||||
}
|
||||
|
||||
.font_mono {
|
||||
font-family: var(--fonts-mono)
|
||||
}
|
||||
|
||||
.bg_gray\.100 {
|
||||
background: var(--colors-gray-100)
|
||||
}
|
||||
|
||||
.p_2 {
|
||||
padding: var(--spacing-2)
|
||||
}
|
||||
|
||||
.border-t_1px_solid {
|
||||
border-top: 1px solid
|
||||
}
|
||||
|
||||
.border_gray\.400 {
|
||||
border-color: var(--colors-gray-400)
|
||||
}
|
||||
|
||||
.pt_1 {
|
||||
padding-top: var(--spacing-1)
|
||||
}
|
||||
|
||||
.bg_yellow\.100 {
|
||||
background: var(--colors-yellow-100)
|
||||
}
|
||||
|
||||
.bg_red\.100 {
|
||||
background: var(--colors-red-100)
|
||||
}
|
||||
|
||||
.bg_green\.100 {
|
||||
background: var(--colors-green-100)
|
||||
}
|
||||
|
||||
.text_yellow\.800 {
|
||||
color: var(--colors-yellow-800)
|
||||
}
|
||||
|
||||
.text_red\.800 {
|
||||
color: var(--colors-red-800)
|
||||
}
|
||||
|
||||
.text_green\.800 {
|
||||
color: var(--colors-green-800)
|
||||
}
|
||||
|
||||
.px_2 {
|
||||
padding-inline: var(--spacing-2)
|
||||
}
|
||||
|
||||
.py_1 {
|
||||
padding-block: var(--spacing-1)
|
||||
}
|
||||
|
||||
.rounded_sm {
|
||||
border-radius: var(--radii-sm)
|
||||
}
|
||||
|
||||
.fs_xs {
|
||||
font-size: var(--font-sizes-xs)
|
||||
}
|
||||
|
||||
.fs_sm {
|
||||
font-size: var(--font-sizes-sm)
|
||||
}
|
||||
|
||||
.text_gray\.600 {
|
||||
color: var(--colors-gray-600)
|
||||
}
|
||||
|
||||
.mt_1 {
|
||||
margin-top: var(--spacing-1)
|
||||
}
|
||||
|
||||
.text_center {
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.py_8 {
|
||||
padding-block: var(--spacing-8)
|
||||
}
|
||||
|
||||
.text_gray\.500 {
|
||||
color: var(--colors-gray-500)
|
||||
}
|
||||
|
||||
.w_100\% {
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.h_100vh {
|
||||
height: 100vh
|
||||
}
|
||||
|
||||
.p_6 {
|
||||
padding: var(--spacing-6)
|
||||
}
|
||||
|
||||
.max-w_800px {
|
||||
max-width: 800px
|
||||
}
|
||||
|
||||
.mx_auto {
|
||||
margin-inline: auto
|
||||
}
|
||||
|
||||
.fs_2xl {
|
||||
font-size: var(--font-sizes-2xl)
|
||||
}
|
||||
|
||||
.font_bold {
|
||||
font-weight: var(--font-weights-bold)
|
||||
}
|
||||
|
||||
.mb_6 {
|
||||
margin-bottom: var(--spacing-6)
|
||||
}
|
||||
|
||||
.justify_space-between {
|
||||
justify-content: space-between
|
||||
}
|
||||
|
||||
.gap_10px {
|
||||
gap: 10px
|
||||
}
|
||||
|
||||
.mb_2 {
|
||||
margin-bottom: var(--spacing-2)
|
||||
}
|
||||
|
||||
.gap_4 {
|
||||
gap: var(--spacing-4)
|
||||
}
|
||||
|
||||
.flex_row {
|
||||
flex-direction: row
|
||||
}
|
||||
|
||||
.d_flex {
|
||||
display: flex
|
||||
}
|
||||
|
||||
.items_center {
|
||||
align-items: center
|
||||
}
|
||||
|
||||
.gap_2 {
|
||||
gap: var(--spacing-2)
|
||||
}
|
||||
|
||||
.flex_column {
|
||||
flex-direction: column
|
||||
}
|
||||
}
|
||||
@@ -1,186 +0,0 @@
|
||||
@layer utilities {
|
||||
|
||||
.text_gray\.400 {
|
||||
color: var(--colors-gray-400)
|
||||
}
|
||||
|
||||
.bg_green\.100 {
|
||||
background: var(--colors-green-100)
|
||||
}
|
||||
|
||||
.text_green\.800 {
|
||||
color: var(--colors-green-800)
|
||||
}
|
||||
|
||||
.border_green\.300 {
|
||||
border-color: var(--colors-green-300)
|
||||
}
|
||||
|
||||
.bg_blue\.100 {
|
||||
background: var(--colors-blue-100)
|
||||
}
|
||||
|
||||
.text_blue\.800 {
|
||||
color: var(--colors-blue-800)
|
||||
}
|
||||
|
||||
.border_blue\.300 {
|
||||
border-color: var(--colors-blue-300)
|
||||
}
|
||||
|
||||
.bg_red\.100 {
|
||||
background: var(--colors-red-100)
|
||||
}
|
||||
|
||||
.text_red\.800 {
|
||||
color: var(--colors-red-800)
|
||||
}
|
||||
|
||||
.border_red\.300 {
|
||||
border-color: var(--colors-red-300)
|
||||
}
|
||||
|
||||
.bg_gray\.100 {
|
||||
background: var(--colors-gray-100)
|
||||
}
|
||||
|
||||
.border_gray\.300 {
|
||||
border-color: var(--colors-gray-300)
|
||||
}
|
||||
|
||||
.px_3 {
|
||||
padding-inline: var(--spacing-3)
|
||||
}
|
||||
|
||||
.py_2 {
|
||||
padding-block: var(--spacing-2)
|
||||
}
|
||||
|
||||
.rounded_md {
|
||||
border-radius: var(--radii-md)
|
||||
}
|
||||
|
||||
.fs_sm {
|
||||
font-size: var(--font-sizes-sm)
|
||||
}
|
||||
|
||||
.cursor_pointer {
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
.transition_all_0\.2s {
|
||||
transition: all 0.2s
|
||||
}
|
||||
|
||||
.p_4 {
|
||||
padding: var(--spacing-4)
|
||||
}
|
||||
|
||||
.bg_white {
|
||||
background: var(--colors-white)
|
||||
}
|
||||
|
||||
.border_1px_solid {
|
||||
border: 1px solid
|
||||
}
|
||||
|
||||
.rounded_lg {
|
||||
border-radius: var(--radii-lg)
|
||||
}
|
||||
|
||||
.fs_lg {
|
||||
font-size: var(--font-sizes-lg)
|
||||
}
|
||||
|
||||
.font_semibold {
|
||||
font-weight: var(--font-weights-semibold)
|
||||
}
|
||||
|
||||
.mb_4 {
|
||||
margin-bottom: var(--spacing-4)
|
||||
}
|
||||
|
||||
.text_gray\.800 {
|
||||
color: var(--colors-gray-800)
|
||||
}
|
||||
|
||||
.fs_md {
|
||||
font-size: var(--font-sizes-md)
|
||||
}
|
||||
|
||||
.text_gray\.700 {
|
||||
color: var(--colors-gray-700)
|
||||
}
|
||||
|
||||
.mt_4 {
|
||||
margin-top: var(--spacing-4)
|
||||
}
|
||||
|
||||
.pt_3 {
|
||||
padding-top: var(--spacing-3)
|
||||
}
|
||||
|
||||
.border-t_1px_solid {
|
||||
border-top: 1px solid
|
||||
}
|
||||
|
||||
.border_gray\.200 {
|
||||
border-color: var(--colors-gray-200)
|
||||
}
|
||||
|
||||
.fs_xs {
|
||||
font-size: var(--font-sizes-xs)
|
||||
}
|
||||
|
||||
.text_gray\.600 {
|
||||
color: var(--colors-gray-600)
|
||||
}
|
||||
|
||||
.font_medium {
|
||||
font-weight: var(--font-weights-medium)
|
||||
}
|
||||
|
||||
.mb_2 {
|
||||
margin-bottom: var(--spacing-2)
|
||||
}
|
||||
|
||||
.items_stretch {
|
||||
align-items: stretch
|
||||
}
|
||||
|
||||
.flex_column {
|
||||
flex-direction: column
|
||||
}
|
||||
|
||||
.gap_2 {
|
||||
gap: var(--spacing-2)
|
||||
}
|
||||
|
||||
.gap_4 {
|
||||
gap: var(--spacing-4)
|
||||
}
|
||||
|
||||
.flex-wrap_wrap {
|
||||
flex-wrap: wrap
|
||||
}
|
||||
|
||||
.d_flex {
|
||||
display: flex
|
||||
}
|
||||
|
||||
.items_center {
|
||||
align-items: center
|
||||
}
|
||||
|
||||
.gap_1 {
|
||||
gap: var(--spacing-1)
|
||||
}
|
||||
|
||||
.flex_row {
|
||||
flex-direction: row
|
||||
}
|
||||
|
||||
.hover\:opacity_0\.8:is(:hover, [data-hover]) {
|
||||
opacity: 0.8
|
||||
}
|
||||
}
|
||||
@@ -1,425 +0,0 @@
|
||||
@layer utilities {
|
||||
|
||||
.p_3 {
|
||||
padding: var(--spacing-3)
|
||||
}
|
||||
|
||||
.bg_purple\.50 {
|
||||
background: var(--colors-purple-50)
|
||||
}
|
||||
|
||||
.border_purple\.200 {
|
||||
border-color: var(--colors-purple-200)
|
||||
}
|
||||
|
||||
.rounded_lg {
|
||||
border-radius: var(--radii-lg)
|
||||
}
|
||||
|
||||
.h_100\% {
|
||||
height: 100%
|
||||
}
|
||||
|
||||
.overflow-y_auto {
|
||||
overflow-y: auto
|
||||
}
|
||||
|
||||
.fs_md {
|
||||
font-size: var(--font-sizes-md)
|
||||
}
|
||||
|
||||
.font_semibold {
|
||||
font-weight: var(--font-weights-semibold)
|
||||
}
|
||||
|
||||
.bg_red\.500 {
|
||||
background: var(--colors-red-500)
|
||||
}
|
||||
|
||||
.text_white {
|
||||
color: var(--colors-white)
|
||||
}
|
||||
|
||||
.mb_1 {
|
||||
margin-bottom: var(--spacing-1)
|
||||
}
|
||||
|
||||
.d_block {
|
||||
display: block
|
||||
}
|
||||
|
||||
.resize_none {
|
||||
resize: none
|
||||
}
|
||||
|
||||
.d_grid {
|
||||
display: grid
|
||||
}
|
||||
|
||||
.p_2 {
|
||||
padding: var(--spacing-2)
|
||||
}
|
||||
|
||||
.mb_2 {
|
||||
margin-bottom: var(--spacing-2)
|
||||
}
|
||||
|
||||
.text_gray\.800 {
|
||||
color: var(--colors-gray-800)
|
||||
}
|
||||
|
||||
.cursor_default {
|
||||
cursor: default
|
||||
}
|
||||
|
||||
.px_1\.5 {
|
||||
padding-inline: var(--spacing-1\.5)
|
||||
}
|
||||
|
||||
.text_purple\.800 {
|
||||
color: var(--colors-purple-800)
|
||||
}
|
||||
|
||||
.bg_purple\.100 {
|
||||
background: var(--colors-purple-100)
|
||||
}
|
||||
|
||||
.font_bold {
|
||||
font-weight: var(--font-weights-bold)
|
||||
}
|
||||
|
||||
.px_0\.5 {
|
||||
padding-inline: var(--spacing-0\.5)
|
||||
}
|
||||
|
||||
.font_medium {
|
||||
font-weight: var(--font-weights-medium)
|
||||
}
|
||||
|
||||
.flex_1 {
|
||||
flex: 1 1 0%
|
||||
}
|
||||
|
||||
.min-w_0 {
|
||||
min-width: var(--sizes-0)
|
||||
}
|
||||
|
||||
.text_red\.600 {
|
||||
color: var(--colors-red-600)
|
||||
}
|
||||
|
||||
.text_yellow\.600 {
|
||||
color: var(--colors-yellow-600)
|
||||
}
|
||||
|
||||
.bg_yellow\.100 {
|
||||
background: var(--colors-yellow-100)
|
||||
}
|
||||
|
||||
.px_1 {
|
||||
padding-inline: var(--spacing-1)
|
||||
}
|
||||
|
||||
.rounded_xs {
|
||||
border-radius: var(--radii-xs)
|
||||
}
|
||||
|
||||
.overflow_hidden {
|
||||
overflow: hidden
|
||||
}
|
||||
|
||||
.text_ellipsis {
|
||||
text-overflow: ellipsis
|
||||
}
|
||||
|
||||
.white-space_nowrap {
|
||||
white-space: nowrap
|
||||
}
|
||||
|
||||
.mt_0\.5 {
|
||||
margin-top: var(--spacing-0\.5)
|
||||
}
|
||||
|
||||
.text_blue\.700 {
|
||||
color: var(--colors-blue-700)
|
||||
}
|
||||
|
||||
.p_1 {
|
||||
padding: var(--spacing-1)
|
||||
}
|
||||
|
||||
.bg_red\.100 {
|
||||
background: var(--colors-red-100)
|
||||
}
|
||||
|
||||
.text_red\.700 {
|
||||
color: var(--colors-red-700)
|
||||
}
|
||||
|
||||
.border_red\.300 {
|
||||
border-color: var(--colors-red-300)
|
||||
}
|
||||
|
||||
.h_16px {
|
||||
height: 16px
|
||||
}
|
||||
|
||||
.justify_center {
|
||||
justify-content: center
|
||||
}
|
||||
|
||||
.py_0\.5 {
|
||||
padding-block: var(--spacing-0\.5)
|
||||
}
|
||||
|
||||
.bg_gray\.100 {
|
||||
background: var(--colors-gray-100)
|
||||
}
|
||||
|
||||
.text_gray\.600 {
|
||||
color: var(--colors-gray-600)
|
||||
}
|
||||
|
||||
.border_1px_dashed {
|
||||
border: 1px dashed
|
||||
}
|
||||
|
||||
.border_gray\.300 {
|
||||
border-color: var(--colors-gray-300)
|
||||
}
|
||||
|
||||
.opacity_0 {
|
||||
opacity: 0
|
||||
}
|
||||
|
||||
.transition_opacity_0\.2s_ease {
|
||||
transition: opacity 0.2s ease
|
||||
}
|
||||
|
||||
.z_50 {
|
||||
z-index: 50
|
||||
}
|
||||
|
||||
.pos_relative {
|
||||
position: relative
|
||||
}
|
||||
|
||||
.mt_1 {
|
||||
margin-top: var(--spacing-1)
|
||||
}
|
||||
|
||||
.bg_white {
|
||||
background: var(--colors-white)
|
||||
}
|
||||
|
||||
.border_gray\.200 {
|
||||
border-color: var(--colors-gray-200)
|
||||
}
|
||||
|
||||
.rounded_md {
|
||||
border-radius: var(--radii-md)
|
||||
}
|
||||
|
||||
.shadow_md {
|
||||
box-shadow: var(--shadows-md)
|
||||
}
|
||||
|
||||
.z_100 {
|
||||
z-index: 100
|
||||
}
|
||||
|
||||
.min-w_150px {
|
||||
min-width: 150px
|
||||
}
|
||||
|
||||
.border-b_1px_solid {
|
||||
border-bottom: 1px solid
|
||||
}
|
||||
|
||||
.border_gray\.100 {
|
||||
border-color: var(--colors-gray-100)
|
||||
}
|
||||
|
||||
.w_full {
|
||||
width: var(--sizes-full)
|
||||
}
|
||||
|
||||
.px_3 {
|
||||
padding-inline: var(--spacing-3)
|
||||
}
|
||||
|
||||
.py_2 {
|
||||
padding-block: var(--spacing-2)
|
||||
}
|
||||
|
||||
.text_left {
|
||||
text-align: left
|
||||
}
|
||||
|
||||
.fs_sm {
|
||||
font-size: var(--font-sizes-sm)
|
||||
}
|
||||
|
||||
.border_none {
|
||||
border: var(--borders-none)
|
||||
}
|
||||
|
||||
.bg_transparent {
|
||||
background: var(--colors-transparent)
|
||||
}
|
||||
|
||||
.cursor_not-allowed {
|
||||
cursor: not-allowed
|
||||
}
|
||||
|
||||
.cursor_pointer {
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
.opacity_0\.5 {
|
||||
opacity: 0.5
|
||||
}
|
||||
|
||||
.opacity_1 {
|
||||
opacity: 1
|
||||
}
|
||||
|
||||
.bg_blue\.100 {
|
||||
background: var(--colors-blue-100)
|
||||
}
|
||||
|
||||
.text_blue\.800 {
|
||||
color: var(--colors-blue-800)
|
||||
}
|
||||
|
||||
.border_1px_solid {
|
||||
border: 1px solid
|
||||
}
|
||||
|
||||
.border_blue\.300 {
|
||||
border-color: var(--colors-blue-300)
|
||||
}
|
||||
|
||||
.px_2 {
|
||||
padding-inline: var(--spacing-2)
|
||||
}
|
||||
|
||||
.py_1 {
|
||||
padding-block: var(--spacing-1)
|
||||
}
|
||||
|
||||
.fs_xs {
|
||||
font-size: var(--font-sizes-xs)
|
||||
}
|
||||
|
||||
.rounded_sm {
|
||||
border-radius: var(--radii-sm)
|
||||
}
|
||||
|
||||
.text_center {
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.columns_1 {
|
||||
columns: 1
|
||||
}
|
||||
|
||||
.gap_3 {
|
||||
gap: var(--spacing-3)
|
||||
}
|
||||
|
||||
.items_stretch {
|
||||
align-items: stretch
|
||||
}
|
||||
|
||||
.flex_column {
|
||||
flex-direction: column
|
||||
}
|
||||
|
||||
.gap_10px {
|
||||
gap: 10px
|
||||
}
|
||||
|
||||
.justify_space-between {
|
||||
justify-content: space-between
|
||||
}
|
||||
|
||||
.gap_2 {
|
||||
gap: var(--spacing-2)
|
||||
}
|
||||
|
||||
.gap_1\.5 {
|
||||
gap: var(--spacing-1\.5)
|
||||
}
|
||||
|
||||
.flex-wrap_wrap {
|
||||
flex-wrap: wrap
|
||||
}
|
||||
|
||||
.d_flex {
|
||||
display: flex
|
||||
}
|
||||
|
||||
.items_center {
|
||||
align-items: center
|
||||
}
|
||||
|
||||
.gap_1 {
|
||||
gap: var(--spacing-1)
|
||||
}
|
||||
|
||||
.flex_row {
|
||||
flex-direction: row
|
||||
}
|
||||
|
||||
.shrink_0 {
|
||||
flex-shrink: 0
|
||||
}
|
||||
|
||||
.hover\:bg_red\.600:is(:hover, [data-hover]) {
|
||||
background: var(--colors-red-600)
|
||||
}
|
||||
|
||||
.hover\:bg_gray\.100:is(:hover, [data-hover]) {
|
||||
background: var(--colors-gray-100)
|
||||
}
|
||||
|
||||
.hover\:bg_red\.200:is(:hover, [data-hover]) {
|
||||
background: var(--colors-red-200)
|
||||
}
|
||||
|
||||
.hover\:opacity_1\!:is(:hover, [data-hover]) {
|
||||
opacity: 1 !important
|
||||
}
|
||||
|
||||
.hover\:bg_gray\.200:is(:hover, [data-hover]) {
|
||||
background: var(--colors-gray-200)
|
||||
}
|
||||
|
||||
.hover\:border_gray\.400:is(:hover, [data-hover]) {
|
||||
border-color: var(--colors-gray-400)
|
||||
}
|
||||
|
||||
.hover\:bg_blue\.50:is(:hover, [data-hover]) {
|
||||
background: var(--colors-blue-50)
|
||||
}
|
||||
|
||||
.hover\:text_blue\.700:is(:hover, [data-hover]) {
|
||||
color: var(--colors-blue-700)
|
||||
}
|
||||
|
||||
.hover\:bg_purple\.50:is(:hover, [data-hover]) {
|
||||
background: var(--colors-purple-50)
|
||||
}
|
||||
|
||||
.hover\:text_purple\.700:is(:hover, [data-hover]) {
|
||||
color: var(--colors-purple-700)
|
||||
}
|
||||
|
||||
.hover\:bg_blue\.200:is(:hover, [data-hover]) {
|
||||
background: var(--colors-blue-200)
|
||||
}
|
||||
.\[\&\:hover_\.add-button\]\:opacity_0\.5:hover .add-button {
|
||||
opacity: 0.5
|
||||
}
|
||||
}
|
||||
@@ -1,34 +0,0 @@
|
||||
import { withoutSpace } from '../helpers.mjs';
|
||||
|
||||
const conditionsStr = "_hover,_focus,_focusWithin,_focusVisible,_disabled,_active,_visited,_target,_readOnly,_readWrite,_empty,_checked,_enabled,_expanded,_highlighted,_before,_after,_firstLetter,_firstLine,_marker,_selection,_file,_backdrop,_first,_last,_only,_even,_odd,_firstOfType,_lastOfType,_onlyOfType,_peerFocus,_peerHover,_peerActive,_peerFocusWithin,_peerFocusVisible,_peerDisabled,_peerChecked,_peerInvalid,_peerExpanded,_peerPlaceholderShown,_groupFocus,_groupHover,_groupActive,_groupFocusWithin,_groupFocusVisible,_groupDisabled,_groupChecked,_groupExpanded,_groupInvalid,_indeterminate,_required,_valid,_invalid,_autofill,_inRange,_outOfRange,_placeholder,_placeholderShown,_pressed,_selected,_default,_optional,_open,_closed,_fullscreen,_loading,_currentPage,_currentStep,_motionReduce,_motionSafe,_print,_landscape,_portrait,_dark,_light,_osDark,_osLight,_highContrast,_lessContrast,_moreContrast,_ltr,_rtl,_scrollbar,_scrollbarThumb,_scrollbarTrack,_horizontal,_vertical,sm,smOnly,smDown,md,mdOnly,mdDown,lg,lgOnly,lgDown,xl,xlOnly,xlDown,2xl,2xlOnly,2xlDown,smToMd,smToLg,smToXl,smTo2xl,mdToLg,mdToXl,mdTo2xl,lgToXl,lgTo2xl,xlTo2xl,base"
|
||||
const conditions = new Set(conditionsStr.split(','))
|
||||
|
||||
export function isCondition(value){
|
||||
return conditions.has(value) || /^@|&|&$/.test(value)
|
||||
}
|
||||
|
||||
const underscoreRegex = /^_/
|
||||
const conditionsSelectorRegex = /&|@/
|
||||
|
||||
export function finalizeConditions(paths){
|
||||
return paths.map((path) => {
|
||||
if (conditions.has(path)){
|
||||
return path.replace(underscoreRegex, '')
|
||||
}
|
||||
|
||||
if (conditionsSelectorRegex.test(path)){
|
||||
return `[${withoutSpace(path.trim())}]`
|
||||
}
|
||||
|
||||
return path
|
||||
})}
|
||||
|
||||
export function sortConditions(paths){
|
||||
return paths.sort((a, b) => {
|
||||
const aa = isCondition(a)
|
||||
const bb = isCondition(b)
|
||||
if (aa && !bb) return 1
|
||||
if (!aa && bb) return -1
|
||||
return 0
|
||||
})
|
||||
}
|
||||
9
apps/web/styled-system/css/css.d.ts
vendored
9
apps/web/styled-system/css/css.d.ts
vendored
@@ -1,9 +0,0 @@
|
||||
/* eslint-disable */
|
||||
import type { SystemStyleObject } from '../types/index';
|
||||
|
||||
interface CssFunction {
|
||||
(...styles: Array<SystemStyleObject | undefined | null | false>): string
|
||||
raw: (...styles: Array<SystemStyleObject | undefined | null | false>) => SystemStyleObject
|
||||
}
|
||||
|
||||
export declare const css: CssFunction;
|
||||
File diff suppressed because one or more lines are too long
6
apps/web/styled-system/css/cva.d.ts
vendored
6
apps/web/styled-system/css/cva.d.ts
vendored
@@ -1,6 +0,0 @@
|
||||
/* eslint-disable */
|
||||
import type { RecipeCreatorFn } from '../types/recipe';
|
||||
|
||||
export declare const cva: RecipeCreatorFn
|
||||
|
||||
export type { RecipeVariantProps } from '../types/recipe';
|
||||
@@ -1,85 +0,0 @@
|
||||
import { compact, mergeProps, splitProps, uniq } from '../helpers.mjs';
|
||||
import { css, mergeCss } from './css.mjs';
|
||||
|
||||
const defaults = (conf) => ({
|
||||
base: {},
|
||||
variants: {},
|
||||
defaultVariants: {},
|
||||
compoundVariants: [],
|
||||
...conf,
|
||||
})
|
||||
|
||||
export function cva(config) {
|
||||
const { base, variants, defaultVariants, compoundVariants } = defaults(config)
|
||||
|
||||
function resolve(props = {}) {
|
||||
const computedVariants = { ...defaultVariants, ...compact(props) }
|
||||
let variantCss = { ...base }
|
||||
for (const [key, value] of Object.entries(computedVariants)) {
|
||||
if (variants[key]?.[value]) {
|
||||
variantCss = mergeCss(variantCss, variants[key][value])
|
||||
}
|
||||
}
|
||||
const compoundVariantCss = getCompoundVariantCss(compoundVariants, computedVariants)
|
||||
return mergeCss(variantCss, compoundVariantCss)
|
||||
}
|
||||
|
||||
function merge(__cva) {
|
||||
const override = defaults(__cva.config)
|
||||
const variantKeys = uniq(__cva.variantKeys, Object.keys(variants))
|
||||
return cva({
|
||||
base: mergeCss(base, override.base),
|
||||
variants: Object.fromEntries(
|
||||
variantKeys.map((key) => [key, mergeCss(variants[key], override.variants[key])]),
|
||||
),
|
||||
defaultVariants: mergeProps(defaultVariants, override.defaultVariants),
|
||||
compoundVariants: [...compoundVariants, ...override.compoundVariants],
|
||||
})
|
||||
}
|
||||
|
||||
function cvaFn(props) {
|
||||
return css(resolve(props))
|
||||
}
|
||||
|
||||
const variantKeys = Object.keys(variants)
|
||||
|
||||
function splitVariantProps(props) {
|
||||
return splitProps(props, variantKeys)
|
||||
}
|
||||
|
||||
const variantMap = Object.fromEntries(Object.entries(variants).map(([key, value]) => [key, Object.keys(value)]))
|
||||
|
||||
return Object.assign(cvaFn, {
|
||||
__cva__: true,
|
||||
variantMap,
|
||||
variantKeys,
|
||||
raw: resolve,
|
||||
config,
|
||||
merge,
|
||||
splitVariantProps,
|
||||
})
|
||||
}
|
||||
|
||||
export function getCompoundVariantCss(compoundVariants, variantMap) {
|
||||
let result = {}
|
||||
compoundVariants.forEach((compoundVariant) => {
|
||||
const isMatching = Object.entries(compoundVariant).every(([key, value]) => {
|
||||
if (key === 'css') return true
|
||||
|
||||
const values = Array.isArray(value) ? value : [value]
|
||||
return values.some((value) => variantMap[key] === value)
|
||||
})
|
||||
|
||||
if (isMatching) {
|
||||
result = mergeCss(result, compoundVariant.css)
|
||||
}
|
||||
})
|
||||
|
||||
return result
|
||||
}
|
||||
|
||||
export function assertCompoundVariant(name, compoundVariants, variants, prop) {
|
||||
if (compoundVariants.length > 0 && typeof variants?.[prop] === 'object') {
|
||||
throw new Error(`[recipe:${name}:${prop}] Conditions are not supported when using compound variants.`)
|
||||
}
|
||||
}
|
||||
5
apps/web/styled-system/css/cx.d.ts
vendored
5
apps/web/styled-system/css/cx.d.ts
vendored
@@ -1,5 +0,0 @@
|
||||
/* eslint-disable */
|
||||
type Argument = string | boolean | null | undefined
|
||||
|
||||
/** Conditionally join classNames into a single string */
|
||||
export declare function cx(...args: Argument[]): string
|
||||
@@ -1,15 +0,0 @@
|
||||
function cx() {
|
||||
let str = '',
|
||||
i = 0,
|
||||
arg
|
||||
|
||||
for (; i < arguments.length; ) {
|
||||
if ((arg = arguments[i++]) && typeof arg === 'string') {
|
||||
str && (str += ' ')
|
||||
str += arg
|
||||
}
|
||||
}
|
||||
return str
|
||||
}
|
||||
|
||||
export { cx }
|
||||
5
apps/web/styled-system/css/index.d.ts
vendored
5
apps/web/styled-system/css/index.d.ts
vendored
@@ -1,5 +0,0 @@
|
||||
/* eslint-disable */
|
||||
export * from './css';
|
||||
export * from './cx';
|
||||
export * from './cva';
|
||||
export * from './sva';
|
||||
@@ -1,4 +0,0 @@
|
||||
export * from './css.mjs';
|
||||
export * from './cx.mjs';
|
||||
export * from './cva.mjs';
|
||||
export * from './sva.mjs';
|
||||
4
apps/web/styled-system/css/sva.d.ts
vendored
4
apps/web/styled-system/css/sva.d.ts
vendored
@@ -1,4 +0,0 @@
|
||||
/* eslint-disable */
|
||||
import type { SlotRecipeCreatorFn } from '../types/recipe';
|
||||
|
||||
export declare const sva: SlotRecipeCreatorFn
|
||||
@@ -1,35 +0,0 @@
|
||||
import { getSlotRecipes, splitProps } from '../helpers.mjs';
|
||||
import { cva } from './cva.mjs';
|
||||
|
||||
export function sva(config) {
|
||||
const slots = Object.entries(getSlotRecipes(config)).map(([slot, slotCva]) => [slot, cva(slotCva)])
|
||||
|
||||
function svaFn(props) {
|
||||
const result = slots.map(([slot, cvaFn]) => [slot, cvaFn(props)])
|
||||
return Object.fromEntries(result)
|
||||
}
|
||||
|
||||
function raw(props) {
|
||||
const result = slots.map(([slot, cvaFn]) => [slot, cvaFn.raw(props)])
|
||||
return Object.fromEntries(result)
|
||||
}
|
||||
|
||||
const variants = config.variants ?? {};
|
||||
const variantKeys = Object.keys(variants);
|
||||
|
||||
function splitVariantProps(props) {
|
||||
return splitProps(props, variantKeys);
|
||||
}
|
||||
|
||||
const variantMap = Object.fromEntries(
|
||||
Object.entries(variants).map(([key, value]) => [key, Object.keys(value)])
|
||||
);
|
||||
|
||||
return Object.assign(svaFn, {
|
||||
__cva__: false,
|
||||
raw,
|
||||
variantMap,
|
||||
variantKeys,
|
||||
splitVariantProps,
|
||||
})
|
||||
}
|
||||
@@ -1,36 +0,0 @@
|
||||
@layer base {
|
||||
:root {
|
||||
--made-with-panda: '🐼'
|
||||
}
|
||||
|
||||
*, *::before, *::after, ::backdrop {
|
||||
--blur: ;
|
||||
--brightness: ;
|
||||
--contrast: ;
|
||||
--grayscale: ;
|
||||
--hue-rotate: ;
|
||||
--invert: ;
|
||||
--saturate: ;
|
||||
--sepia: ;
|
||||
--drop-shadow: ;
|
||||
--backdrop-blur: ;
|
||||
--backdrop-brightness: ;
|
||||
--backdrop-contrast: ;
|
||||
--backdrop-grayscale: ;
|
||||
--backdrop-hue-rotate: ;
|
||||
--backdrop-invert: ;
|
||||
--backdrop-opacity: ;
|
||||
--backdrop-saturate: ;
|
||||
--backdrop-sepia: ;
|
||||
--scroll-snap-strictness: proximity;
|
||||
--border-spacing-x: 0;
|
||||
--border-spacing-y: 0;
|
||||
--translate-x: 0;
|
||||
--translate-y: 0;
|
||||
--rotate: 0;
|
||||
--skew-x: 0;
|
||||
--skew-y: 0;
|
||||
--scale-x: 1;
|
||||
--scale-y: 1
|
||||
}
|
||||
}
|
||||
@@ -1,300 +0,0 @@
|
||||
// src/assert.ts
|
||||
function isObject(value) {
|
||||
return typeof value === "object" && value != null && !Array.isArray(value);
|
||||
}
|
||||
|
||||
// src/compact.ts
|
||||
function compact(value) {
|
||||
return Object.fromEntries(Object.entries(value ?? {}).filter(([_, value2]) => value2 !== void 0));
|
||||
}
|
||||
|
||||
// src/condition.ts
|
||||
var isBaseCondition = (v) => v === "base";
|
||||
function filterBaseConditions(c) {
|
||||
return c.slice().filter((v) => !isBaseCondition(v));
|
||||
}
|
||||
|
||||
// src/css-important.ts
|
||||
var importantRegex = /!(important)?$/;
|
||||
function isImportant(value) {
|
||||
return typeof value === "string" ? importantRegex.test(value) : false;
|
||||
}
|
||||
function withoutImportant(value) {
|
||||
return typeof value === "string" ? value.replace(importantRegex, "").trim() : value;
|
||||
}
|
||||
function withoutSpace(str) {
|
||||
return typeof str === "string" ? str.replaceAll(" ", "_") : str;
|
||||
}
|
||||
|
||||
// src/hash.ts
|
||||
function toChar(code) {
|
||||
return String.fromCharCode(code + (code > 25 ? 39 : 97));
|
||||
}
|
||||
function toName(code) {
|
||||
let name = "";
|
||||
let x;
|
||||
for (x = Math.abs(code); x > 52; x = x / 52 | 0)
|
||||
name = toChar(x % 52) + name;
|
||||
return toChar(x % 52) + name;
|
||||
}
|
||||
function toPhash(h, x) {
|
||||
let i = x.length;
|
||||
while (i)
|
||||
h = h * 33 ^ x.charCodeAt(--i);
|
||||
return h;
|
||||
}
|
||||
function toHash(value) {
|
||||
return toName(toPhash(5381, value) >>> 0);
|
||||
}
|
||||
|
||||
// src/merge-props.ts
|
||||
function mergeProps(...sources) {
|
||||
const objects = sources.filter(Boolean);
|
||||
return objects.reduce((prev, obj) => {
|
||||
Object.keys(obj).forEach((key) => {
|
||||
const prevValue = prev[key];
|
||||
const value = obj[key];
|
||||
if (isObject(prevValue) && isObject(value)) {
|
||||
prev[key] = mergeProps(prevValue, value);
|
||||
} else {
|
||||
prev[key] = value;
|
||||
}
|
||||
});
|
||||
return prev;
|
||||
}, {});
|
||||
}
|
||||
|
||||
// src/walk-object.ts
|
||||
var isNotNullish = (element) => element != null;
|
||||
function walkObject(target, predicate, options = {}) {
|
||||
const { stop, getKey } = options;
|
||||
function inner(value, path = []) {
|
||||
if (isObject(value) || Array.isArray(value)) {
|
||||
const result = {};
|
||||
for (const [prop, child] of Object.entries(value)) {
|
||||
const key = getKey?.(prop) ?? prop;
|
||||
const childPath = [...path, key];
|
||||
if (stop?.(value, childPath)) {
|
||||
return predicate(value, path);
|
||||
}
|
||||
const next = inner(child, childPath);
|
||||
if (isNotNullish(next)) {
|
||||
result[key] = next;
|
||||
}
|
||||
}
|
||||
return result;
|
||||
}
|
||||
return predicate(value, path);
|
||||
}
|
||||
return inner(target);
|
||||
}
|
||||
function mapObject(obj, fn) {
|
||||
if (!isObject(obj))
|
||||
return fn(obj);
|
||||
return walkObject(obj, (value) => fn(value));
|
||||
}
|
||||
|
||||
// src/normalize-style-object.ts
|
||||
function toResponsiveObject(values, breakpoints) {
|
||||
return values.reduce((acc, current, index) => {
|
||||
const key = breakpoints[index];
|
||||
if (current != null) {
|
||||
acc[key] = current;
|
||||
}
|
||||
return acc;
|
||||
}, {});
|
||||
}
|
||||
function normalizeShorthand(styles, context) {
|
||||
const { hasShorthand, resolveShorthand } = context.utility;
|
||||
return walkObject(styles, (v) => v, {
|
||||
getKey: (prop) => {
|
||||
return hasShorthand ? resolveShorthand(prop) : prop;
|
||||
}
|
||||
});
|
||||
}
|
||||
function normalizeStyleObject(styles, context) {
|
||||
const { utility, conditions } = context;
|
||||
const { hasShorthand, resolveShorthand } = utility;
|
||||
return walkObject(
|
||||
styles,
|
||||
(value) => {
|
||||
return Array.isArray(value) ? toResponsiveObject(value, conditions.breakpoints.keys) : value;
|
||||
},
|
||||
{
|
||||
stop: (value) => Array.isArray(value),
|
||||
getKey: (prop) => {
|
||||
return hasShorthand ? resolveShorthand(prop) : prop;
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
// src/classname.ts
|
||||
var fallbackCondition = {
|
||||
shift: (v) => v,
|
||||
finalize: (v) => v,
|
||||
breakpoints: { keys: [] }
|
||||
};
|
||||
var sanitize = (value) => typeof value === "string" ? value.replaceAll(/[\n\s]+/g, " ") : value;
|
||||
function createCss(context) {
|
||||
const { utility, hash, conditions: conds = fallbackCondition } = context;
|
||||
const formatClassName = (str) => [utility.prefix, str].filter(Boolean).join("-");
|
||||
const hashFn = (conditions, className) => {
|
||||
let result;
|
||||
if (hash) {
|
||||
const baseArray = [...conds.finalize(conditions), className];
|
||||
result = formatClassName(toHash(baseArray.join(":")));
|
||||
} else {
|
||||
const baseArray = [...conds.finalize(conditions), formatClassName(className)];
|
||||
result = baseArray.join(":");
|
||||
}
|
||||
return result;
|
||||
};
|
||||
return (styleObject = {}) => {
|
||||
const normalizedObject = normalizeStyleObject(styleObject, context);
|
||||
const classNames = /* @__PURE__ */ new Set();
|
||||
walkObject(normalizedObject, (value, paths) => {
|
||||
const important = isImportant(value);
|
||||
if (value == null)
|
||||
return;
|
||||
const [prop, ...allConditions] = conds.shift(paths);
|
||||
const conditions = filterBaseConditions(allConditions);
|
||||
const transformed = utility.transform(prop, withoutImportant(sanitize(value)));
|
||||
let className = hashFn(conditions, transformed.className);
|
||||
if (important)
|
||||
className = `${className}!`;
|
||||
classNames.add(className);
|
||||
});
|
||||
return Array.from(classNames).join(" ");
|
||||
};
|
||||
}
|
||||
function compactStyles(...styles) {
|
||||
return styles.filter((style) => isObject(style) && Object.keys(compact(style)).length > 0);
|
||||
}
|
||||
function createMergeCss(context) {
|
||||
function resolve(styles) {
|
||||
const allStyles = compactStyles(...styles);
|
||||
if (allStyles.length === 1)
|
||||
return allStyles;
|
||||
return allStyles.map((style) => normalizeShorthand(style, context));
|
||||
}
|
||||
function mergeCss(...styles) {
|
||||
return mergeProps(...resolve(styles));
|
||||
}
|
||||
function assignCss(...styles) {
|
||||
return Object.assign({}, ...resolve(styles));
|
||||
}
|
||||
return { mergeCss, assignCss };
|
||||
}
|
||||
|
||||
// src/memo.ts
|
||||
var memo = (fn) => {
|
||||
const cache = /* @__PURE__ */ new Map();
|
||||
const get = (...args) => {
|
||||
const key = JSON.stringify(args);
|
||||
if (cache.has(key)) {
|
||||
return cache.get(key);
|
||||
}
|
||||
const result = fn(...args);
|
||||
cache.set(key, result);
|
||||
return result;
|
||||
};
|
||||
return get;
|
||||
};
|
||||
|
||||
// src/hypenate-property.ts
|
||||
var wordRegex = /([A-Z])/g;
|
||||
var msRegex = /^ms-/;
|
||||
var hypenateProperty = memo((property) => {
|
||||
if (property.startsWith("--"))
|
||||
return property;
|
||||
return property.replace(wordRegex, "-$1").replace(msRegex, "-ms-").toLowerCase();
|
||||
});
|
||||
|
||||
// src/slot.ts
|
||||
var getSlotRecipes = (recipe = {}) => {
|
||||
const init = (slot) => ({
|
||||
className: [recipe.className, slot].filter(Boolean).join("__"),
|
||||
base: recipe.base?.[slot] ?? {},
|
||||
variants: {},
|
||||
defaultVariants: recipe.defaultVariants ?? {},
|
||||
compoundVariants: recipe.compoundVariants ? getSlotCompoundVariant(recipe.compoundVariants, slot) : []
|
||||
});
|
||||
const slots = recipe.slots ?? [];
|
||||
const recipeParts = slots.map((slot) => [slot, init(slot)]);
|
||||
for (const [variantsKey, variantsSpec] of Object.entries(recipe.variants ?? {})) {
|
||||
for (const [variantKey, variantSpec] of Object.entries(variantsSpec)) {
|
||||
recipeParts.forEach(([slot, slotRecipe]) => {
|
||||
slotRecipe.variants[variantsKey] ??= {};
|
||||
slotRecipe.variants[variantsKey][variantKey] = variantSpec[slot] ?? {};
|
||||
});
|
||||
}
|
||||
}
|
||||
return Object.fromEntries(recipeParts);
|
||||
};
|
||||
var getSlotCompoundVariant = (compoundVariants, slotName) => compoundVariants.filter((compoundVariant) => compoundVariant.css[slotName]).map((compoundVariant) => ({ ...compoundVariant, css: compoundVariant.css[slotName] }));
|
||||
|
||||
// src/split-props.ts
|
||||
function splitProps(props, ...keys) {
|
||||
const descriptors = Object.getOwnPropertyDescriptors(props);
|
||||
const dKeys = Object.keys(descriptors);
|
||||
const split = (k) => {
|
||||
const clone = {};
|
||||
for (let i = 0; i < k.length; i++) {
|
||||
const key = k[i];
|
||||
if (descriptors[key]) {
|
||||
Object.defineProperty(clone, key, descriptors[key]);
|
||||
delete descriptors[key];
|
||||
}
|
||||
}
|
||||
return clone;
|
||||
};
|
||||
const fn = (key) => split(Array.isArray(key) ? key : dKeys.filter(key));
|
||||
return keys.map(fn).concat(split(dKeys));
|
||||
}
|
||||
|
||||
// src/uniq.ts
|
||||
var uniq = (...items) => items.filter(Boolean).reduce((acc, item) => Array.from(/* @__PURE__ */ new Set([...acc, ...item])), []);
|
||||
export {
|
||||
compact,
|
||||
createCss,
|
||||
createMergeCss,
|
||||
filterBaseConditions,
|
||||
getSlotCompoundVariant,
|
||||
getSlotRecipes,
|
||||
hypenateProperty,
|
||||
isBaseCondition,
|
||||
isObject,
|
||||
mapObject,
|
||||
memo,
|
||||
mergeProps,
|
||||
splitProps,
|
||||
toHash,
|
||||
uniq,
|
||||
walkObject,
|
||||
withoutSpace
|
||||
};
|
||||
|
||||
|
||||
|
||||
// src/normalize-html.ts
|
||||
var htmlProps = ["htmlSize", "htmlTranslate", "htmlWidth", "htmlHeight"];
|
||||
function convert(key) {
|
||||
return htmlProps.includes(key) ? key.replace("html", "").toLowerCase() : key;
|
||||
}
|
||||
function normalizeHTMLProps(props) {
|
||||
return Object.fromEntries(Object.entries(props).map(([key, value]) => [convert(key), value]));
|
||||
}
|
||||
normalizeHTMLProps.keys = htmlProps;
|
||||
export {
|
||||
normalizeHTMLProps
|
||||
};
|
||||
|
||||
|
||||
export function __spreadValues(a, b) {
|
||||
return { ...a, ...b }
|
||||
}
|
||||
|
||||
export function __objRest(source, exclude) {
|
||||
return Object.fromEntries(Object.entries(source).filter(([key]) => !exclude.includes(key)))
|
||||
}
|
||||
10
apps/web/styled-system/jsx/aspect-ratio.d.ts
vendored
10
apps/web/styled-system/jsx/aspect-ratio.d.ts
vendored
@@ -1,10 +0,0 @@
|
||||
/* eslint-disable */
|
||||
import type { FunctionComponent } from 'react'
|
||||
import type { AspectRatioProperties } from '../patterns/aspect-ratio';
|
||||
import type { HTMLStyledProps } from '../types/jsx';
|
||||
import type { DistributiveOmit } from '../types/system-types';
|
||||
|
||||
export interface AspectRatioProps extends AspectRatioProperties, DistributiveOmit<HTMLStyledProps<'div'>, keyof AspectRatioProperties | 'aspectRatio'> {}
|
||||
|
||||
|
||||
export declare const AspectRatio: FunctionComponent<AspectRatioProps>
|
||||
@@ -1,9 +0,0 @@
|
||||
import { createElement, forwardRef } from 'react'
|
||||
import { styled } from './factory.mjs';
|
||||
import { getAspectRatioStyle } from '../patterns/aspect-ratio.mjs';
|
||||
|
||||
export const AspectRatio = /* @__PURE__ */ forwardRef(function AspectRatio(props, ref) {
|
||||
const { ratio, ...restProps } = props
|
||||
const styleProps = getAspectRatioStyle({ratio})
|
||||
return createElement(styled.div, { ref, ...styleProps, ...restProps })
|
||||
})
|
||||
10
apps/web/styled-system/jsx/bleed.d.ts
vendored
10
apps/web/styled-system/jsx/bleed.d.ts
vendored
@@ -1,10 +0,0 @@
|
||||
/* eslint-disable */
|
||||
import type { FunctionComponent } from 'react'
|
||||
import type { BleedProperties } from '../patterns/bleed';
|
||||
import type { HTMLStyledProps } from '../types/jsx';
|
||||
import type { DistributiveOmit } from '../types/system-types';
|
||||
|
||||
export interface BleedProps extends BleedProperties, DistributiveOmit<HTMLStyledProps<'div'>, keyof BleedProperties > {}
|
||||
|
||||
|
||||
export declare const Bleed: FunctionComponent<BleedProps>
|
||||
@@ -1,9 +0,0 @@
|
||||
import { createElement, forwardRef } from 'react'
|
||||
import { styled } from './factory.mjs';
|
||||
import { getBleedStyle } from '../patterns/bleed.mjs';
|
||||
|
||||
export const Bleed = /* @__PURE__ */ forwardRef(function Bleed(props, ref) {
|
||||
const { inline, block, ...restProps } = props
|
||||
const styleProps = getBleedStyle({inline, block})
|
||||
return createElement(styled.div, { ref, ...styleProps, ...restProps })
|
||||
})
|
||||
10
apps/web/styled-system/jsx/box.d.ts
vendored
10
apps/web/styled-system/jsx/box.d.ts
vendored
@@ -1,10 +0,0 @@
|
||||
/* eslint-disable */
|
||||
import type { FunctionComponent } from 'react'
|
||||
import type { BoxProperties } from '../patterns/box';
|
||||
import type { HTMLStyledProps } from '../types/jsx';
|
||||
import type { DistributiveOmit } from '../types/system-types';
|
||||
|
||||
export interface BoxProps extends BoxProperties, DistributiveOmit<HTMLStyledProps<'div'>, keyof BoxProperties > {}
|
||||
|
||||
|
||||
export declare const Box: FunctionComponent<BoxProps>
|
||||
@@ -1,8 +0,0 @@
|
||||
import { createElement, forwardRef } from 'react'
|
||||
import { styled } from './factory.mjs';
|
||||
import { getBoxStyle } from '../patterns/box.mjs';
|
||||
|
||||
export const Box = /* @__PURE__ */ forwardRef(function Box(props, ref) {
|
||||
const styleProps = getBoxStyle()
|
||||
return createElement(styled.div, { ref, ...styleProps, ...props })
|
||||
})
|
||||
10
apps/web/styled-system/jsx/center.d.ts
vendored
10
apps/web/styled-system/jsx/center.d.ts
vendored
@@ -1,10 +0,0 @@
|
||||
/* eslint-disable */
|
||||
import type { FunctionComponent } from 'react'
|
||||
import type { CenterProperties } from '../patterns/center';
|
||||
import type { HTMLStyledProps } from '../types/jsx';
|
||||
import type { DistributiveOmit } from '../types/system-types';
|
||||
|
||||
export interface CenterProps extends CenterProperties, DistributiveOmit<HTMLStyledProps<'div'>, keyof CenterProperties > {}
|
||||
|
||||
|
||||
export declare const Center: FunctionComponent<CenterProps>
|
||||
@@ -1,9 +0,0 @@
|
||||
import { createElement, forwardRef } from 'react'
|
||||
import { styled } from './factory.mjs';
|
||||
import { getCenterStyle } from '../patterns/center.mjs';
|
||||
|
||||
export const Center = /* @__PURE__ */ forwardRef(function Center(props, ref) {
|
||||
const { inline, ...restProps } = props
|
||||
const styleProps = getCenterStyle({inline})
|
||||
return createElement(styled.div, { ref, ...styleProps, ...restProps })
|
||||
})
|
||||
10
apps/web/styled-system/jsx/circle.d.ts
vendored
10
apps/web/styled-system/jsx/circle.d.ts
vendored
@@ -1,10 +0,0 @@
|
||||
/* eslint-disable */
|
||||
import type { FunctionComponent } from 'react'
|
||||
import type { CircleProperties } from '../patterns/circle';
|
||||
import type { HTMLStyledProps } from '../types/jsx';
|
||||
import type { DistributiveOmit } from '../types/system-types';
|
||||
|
||||
export interface CircleProps extends CircleProperties, DistributiveOmit<HTMLStyledProps<'div'>, keyof CircleProperties > {}
|
||||
|
||||
|
||||
export declare const Circle: FunctionComponent<CircleProps>
|
||||
@@ -1,9 +0,0 @@
|
||||
import { createElement, forwardRef } from 'react'
|
||||
import { styled } from './factory.mjs';
|
||||
import { getCircleStyle } from '../patterns/circle.mjs';
|
||||
|
||||
export const Circle = /* @__PURE__ */ forwardRef(function Circle(props, ref) {
|
||||
const { size, ...restProps } = props
|
||||
const styleProps = getCircleStyle({size})
|
||||
return createElement(styled.div, { ref, ...styleProps, ...restProps })
|
||||
})
|
||||
10
apps/web/styled-system/jsx/container.d.ts
vendored
10
apps/web/styled-system/jsx/container.d.ts
vendored
@@ -1,10 +0,0 @@
|
||||
/* eslint-disable */
|
||||
import type { FunctionComponent } from 'react'
|
||||
import type { ContainerProperties } from '../patterns/container';
|
||||
import type { HTMLStyledProps } from '../types/jsx';
|
||||
import type { DistributiveOmit } from '../types/system-types';
|
||||
|
||||
export interface ContainerProps extends ContainerProperties, DistributiveOmit<HTMLStyledProps<'div'>, keyof ContainerProperties > {}
|
||||
|
||||
|
||||
export declare const Container: FunctionComponent<ContainerProps>
|
||||
@@ -1,8 +0,0 @@
|
||||
import { createElement, forwardRef } from 'react'
|
||||
import { styled } from './factory.mjs';
|
||||
import { getContainerStyle } from '../patterns/container.mjs';
|
||||
|
||||
export const Container = /* @__PURE__ */ forwardRef(function Container(props, ref) {
|
||||
const styleProps = getContainerStyle()
|
||||
return createElement(styled.div, { ref, ...styleProps, ...props })
|
||||
})
|
||||
10
apps/web/styled-system/jsx/divider.d.ts
vendored
10
apps/web/styled-system/jsx/divider.d.ts
vendored
@@ -1,10 +0,0 @@
|
||||
/* eslint-disable */
|
||||
import type { FunctionComponent } from 'react'
|
||||
import type { DividerProperties } from '../patterns/divider';
|
||||
import type { HTMLStyledProps } from '../types/jsx';
|
||||
import type { DistributiveOmit } from '../types/system-types';
|
||||
|
||||
export interface DividerProps extends DividerProperties, DistributiveOmit<HTMLStyledProps<'div'>, keyof DividerProperties > {}
|
||||
|
||||
|
||||
export declare const Divider: FunctionComponent<DividerProps>
|
||||
@@ -1,9 +0,0 @@
|
||||
import { createElement, forwardRef } from 'react'
|
||||
import { styled } from './factory.mjs';
|
||||
import { getDividerStyle } from '../patterns/divider.mjs';
|
||||
|
||||
export const Divider = /* @__PURE__ */ forwardRef(function Divider(props, ref) {
|
||||
const { orientation, thickness, color, ...restProps } = props
|
||||
const styleProps = getDividerStyle({orientation, thickness, color})
|
||||
return createElement(styled.div, { ref, ...styleProps, ...restProps })
|
||||
})
|
||||
@@ -1,22 +0,0 @@
|
||||
import { isCssProperty } from './is-valid-prop.mjs';
|
||||
|
||||
export const defaultShouldForwardProp = (prop, variantKeys) => !variantKeys.includes(prop) && !isCssProperty(prop)
|
||||
|
||||
export const composeShouldForwardProps = (tag, shouldForwardProp) =>
|
||||
tag.__shouldForwardProps__ && shouldForwardProp
|
||||
? (propName) => tag.__shouldForwardProps__(propName) && shouldForwardProp(propName)
|
||||
: shouldForwardProp
|
||||
|
||||
export const composeCvaFn = (cvaA, cvaB) => {
|
||||
if (cvaA && !cvaB) return cvaA
|
||||
if (!cvaA && cvaB) return cvaB
|
||||
if ((cvaA.__cva__ && cvaB.__cva__) || (cvaA.__recipe__ && cvaB.__recipe__)) return cvaA.merge(cvaB)
|
||||
const error = new TypeError('Cannot merge cva with recipe. Please use either cva or recipe.')
|
||||
TypeError.captureStackTrace?.(error)
|
||||
throw error
|
||||
}
|
||||
|
||||
export const getDisplayName = (Component) => {
|
||||
if (typeof Component === 'string') return Component
|
||||
return Component?.displayName || Component?.name || 'Component'
|
||||
}
|
||||
3
apps/web/styled-system/jsx/factory.d.ts
vendored
3
apps/web/styled-system/jsx/factory.d.ts
vendored
@@ -1,3 +0,0 @@
|
||||
/* eslint-disable */
|
||||
import type { Styled } from '../types/jsx';
|
||||
export declare const styled: Styled
|
||||
@@ -1,80 +0,0 @@
|
||||
import { createElement, forwardRef, useMemo } from 'react'
|
||||
import { css, cx, cva } from '../css/index.mjs';
|
||||
import { defaultShouldForwardProp, composeShouldForwardProps, composeCvaFn, getDisplayName } from './factory-helper.mjs';
|
||||
import { splitProps, normalizeHTMLProps } from '../helpers.mjs';
|
||||
import { isCssProperty } from './is-valid-prop.mjs';
|
||||
|
||||
function styledFn(Dynamic, configOrCva = {}, options = {}) {
|
||||
const cvaFn = configOrCva.__cva__ || configOrCva.__recipe__ ? configOrCva : cva(configOrCva)
|
||||
|
||||
const forwardFn = options.shouldForwardProp || defaultShouldForwardProp
|
||||
const shouldForwardProp = (prop) => forwardFn(prop, cvaFn.variantKeys)
|
||||
|
||||
const defaultProps = Object.assign(
|
||||
options.dataAttr && configOrCva.__name__ ? { 'data-recipe': configOrCva.__name__ } : {},
|
||||
options.defaultProps,
|
||||
)
|
||||
|
||||
const StyledComponent = /* @__PURE__ */ forwardRef(function StyledComponent(props, ref) {
|
||||
const { as: Element = Dynamic.__base__ || Dynamic, children, ...restProps } = props
|
||||
|
||||
const __cvaFn__ = composeCvaFn(Dynamic.__cva__, cvaFn)
|
||||
const __shouldForwardProps__ = composeShouldForwardProps(Dynamic, shouldForwardProp)
|
||||
|
||||
const combinedProps = useMemo(() => Object.assign({}, defaultProps, restProps), [restProps])
|
||||
|
||||
const [htmlProps, forwardedProps, variantProps, styleProps, elementProps] = useMemo(() => {
|
||||
return splitProps(combinedProps, normalizeHTMLProps.keys, __shouldForwardProps__, __cvaFn__.variantKeys, isCssProperty)
|
||||
}, [combinedProps])
|
||||
|
||||
function recipeClass() {
|
||||
const { css: cssStyles, ...propStyles } = styleProps
|
||||
const compoundVariantStyles = __cvaFn__.__getCompoundVariantCss__?.(variantProps)
|
||||
return cx(__cvaFn__(variantProps, false), css(compoundVariantStyles, propStyles, cssStyles), combinedProps.className)
|
||||
}
|
||||
|
||||
function cvaClass() {
|
||||
const { css: cssStyles, ...propStyles } = styleProps
|
||||
const cvaStyles = __cvaFn__.raw(variantProps)
|
||||
return cx(css(cvaStyles, propStyles, cssStyles), combinedProps.className)
|
||||
}
|
||||
|
||||
const classes = configOrCva.__recipe__ ? recipeClass : cvaClass
|
||||
|
||||
return createElement(Element, {
|
||||
ref,
|
||||
...forwardedProps,
|
||||
...elementProps,
|
||||
...normalizeHTMLProps(htmlProps),
|
||||
children,
|
||||
className: classes(),
|
||||
})
|
||||
})
|
||||
|
||||
const name = getDisplayName(Dynamic)
|
||||
|
||||
StyledComponent.displayName = `styled.${name}`
|
||||
StyledComponent.__cva__ = cvaFn
|
||||
StyledComponent.__base__ = Dynamic
|
||||
StyledComponent.__shouldForwardProps__ = shouldForwardProp
|
||||
|
||||
return StyledComponent
|
||||
}
|
||||
|
||||
function createJsxFactory() {
|
||||
const cache = new Map()
|
||||
|
||||
return new Proxy(styledFn, {
|
||||
apply(_, __, args) {
|
||||
return styledFn(...args)
|
||||
},
|
||||
get(_, el) {
|
||||
if (!cache.has(el)) {
|
||||
cache.set(el, styledFn(el))
|
||||
}
|
||||
return cache.get(el)
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
export const styled = /* @__PURE__ */ createJsxFactory()
|
||||
10
apps/web/styled-system/jsx/flex.d.ts
vendored
10
apps/web/styled-system/jsx/flex.d.ts
vendored
@@ -1,10 +0,0 @@
|
||||
/* eslint-disable */
|
||||
import type { FunctionComponent } from 'react'
|
||||
import type { FlexProperties } from '../patterns/flex';
|
||||
import type { HTMLStyledProps } from '../types/jsx';
|
||||
import type { DistributiveOmit } from '../types/system-types';
|
||||
|
||||
export interface FlexProps extends FlexProperties, DistributiveOmit<HTMLStyledProps<'div'>, keyof FlexProperties > {}
|
||||
|
||||
|
||||
export declare const Flex: FunctionComponent<FlexProps>
|
||||
@@ -1,9 +0,0 @@
|
||||
import { createElement, forwardRef } from 'react'
|
||||
import { styled } from './factory.mjs';
|
||||
import { getFlexStyle } from '../patterns/flex.mjs';
|
||||
|
||||
export const Flex = /* @__PURE__ */ forwardRef(function Flex(props, ref) {
|
||||
const { align, justify, direction, wrap, basis, grow, shrink, ...restProps } = props
|
||||
const styleProps = getFlexStyle({align, justify, direction, wrap, basis, grow, shrink})
|
||||
return createElement(styled.div, { ref, ...styleProps, ...restProps })
|
||||
})
|
||||
10
apps/web/styled-system/jsx/float.d.ts
vendored
10
apps/web/styled-system/jsx/float.d.ts
vendored
@@ -1,10 +0,0 @@
|
||||
/* eslint-disable */
|
||||
import type { FunctionComponent } from 'react'
|
||||
import type { FloatProperties } from '../patterns/float';
|
||||
import type { HTMLStyledProps } from '../types/jsx';
|
||||
import type { DistributiveOmit } from '../types/system-types';
|
||||
|
||||
export interface FloatProps extends FloatProperties, DistributiveOmit<HTMLStyledProps<'div'>, keyof FloatProperties > {}
|
||||
|
||||
|
||||
export declare const Float: FunctionComponent<FloatProps>
|
||||
@@ -1,9 +0,0 @@
|
||||
import { createElement, forwardRef } from 'react'
|
||||
import { styled } from './factory.mjs';
|
||||
import { getFloatStyle } from '../patterns/float.mjs';
|
||||
|
||||
export const Float = /* @__PURE__ */ forwardRef(function Float(props, ref) {
|
||||
const { offsetX, offsetY, offset, placement, ...restProps } = props
|
||||
const styleProps = getFloatStyle({offsetX, offsetY, offset, placement})
|
||||
return createElement(styled.div, { ref, ...styleProps, ...restProps })
|
||||
})
|
||||
10
apps/web/styled-system/jsx/grid-item.d.ts
vendored
10
apps/web/styled-system/jsx/grid-item.d.ts
vendored
@@ -1,10 +0,0 @@
|
||||
/* eslint-disable */
|
||||
import type { FunctionComponent } from 'react'
|
||||
import type { GridItemProperties } from '../patterns/grid-item';
|
||||
import type { HTMLStyledProps } from '../types/jsx';
|
||||
import type { DistributiveOmit } from '../types/system-types';
|
||||
|
||||
export interface GridItemProps extends GridItemProperties, DistributiveOmit<HTMLStyledProps<'div'>, keyof GridItemProperties > {}
|
||||
|
||||
|
||||
export declare const GridItem: FunctionComponent<GridItemProps>
|
||||
@@ -1,9 +0,0 @@
|
||||
import { createElement, forwardRef } from 'react'
|
||||
import { styled } from './factory.mjs';
|
||||
import { getGridItemStyle } from '../patterns/grid-item.mjs';
|
||||
|
||||
export const GridItem = /* @__PURE__ */ forwardRef(function GridItem(props, ref) {
|
||||
const { colSpan, rowSpan, colStart, rowStart, colEnd, rowEnd, ...restProps } = props
|
||||
const styleProps = getGridItemStyle({colSpan, rowSpan, colStart, rowStart, colEnd, rowEnd})
|
||||
return createElement(styled.div, { ref, ...styleProps, ...restProps })
|
||||
})
|
||||
10
apps/web/styled-system/jsx/grid.d.ts
vendored
10
apps/web/styled-system/jsx/grid.d.ts
vendored
@@ -1,10 +0,0 @@
|
||||
/* eslint-disable */
|
||||
import type { FunctionComponent } from 'react'
|
||||
import type { GridProperties } from '../patterns/grid';
|
||||
import type { HTMLStyledProps } from '../types/jsx';
|
||||
import type { DistributiveOmit } from '../types/system-types';
|
||||
|
||||
export interface GridProps extends GridProperties, DistributiveOmit<HTMLStyledProps<'div'>, keyof GridProperties > {}
|
||||
|
||||
|
||||
export declare const Grid: FunctionComponent<GridProps>
|
||||
@@ -1,9 +0,0 @@
|
||||
import { createElement, forwardRef } from 'react'
|
||||
import { styled } from './factory.mjs';
|
||||
import { getGridStyle } from '../patterns/grid.mjs';
|
||||
|
||||
export const Grid = /* @__PURE__ */ forwardRef(function Grid(props, ref) {
|
||||
const { gap, columnGap, rowGap, columns, minChildWidth, ...restProps } = props
|
||||
const styleProps = getGridStyle({gap, columnGap, rowGap, columns, minChildWidth})
|
||||
return createElement(styled.div, { ref, ...styleProps, ...restProps })
|
||||
})
|
||||
10
apps/web/styled-system/jsx/hstack.d.ts
vendored
10
apps/web/styled-system/jsx/hstack.d.ts
vendored
@@ -1,10 +0,0 @@
|
||||
/* eslint-disable */
|
||||
import type { FunctionComponent } from 'react'
|
||||
import type { HstackProperties } from '../patterns/hstack';
|
||||
import type { HTMLStyledProps } from '../types/jsx';
|
||||
import type { DistributiveOmit } from '../types/system-types';
|
||||
|
||||
export interface HstackProps extends HstackProperties, DistributiveOmit<HTMLStyledProps<'div'>, keyof HstackProperties > {}
|
||||
|
||||
|
||||
export declare const HStack: FunctionComponent<HstackProps>
|
||||
@@ -1,9 +0,0 @@
|
||||
import { createElement, forwardRef } from 'react'
|
||||
import { styled } from './factory.mjs';
|
||||
import { getHstackStyle } from '../patterns/hstack.mjs';
|
||||
|
||||
export const HStack = /* @__PURE__ */ forwardRef(function HStack(props, ref) {
|
||||
const { justify, gap, ...restProps } = props
|
||||
const styleProps = getHstackStyle({justify, gap})
|
||||
return createElement(styled.div, { ref, ...styleProps, ...restProps })
|
||||
})
|
||||
27
apps/web/styled-system/jsx/index.d.ts
vendored
27
apps/web/styled-system/jsx/index.d.ts
vendored
@@ -1,27 +0,0 @@
|
||||
/* eslint-disable */
|
||||
export * from './factory';
|
||||
|
||||
export * from './is-valid-prop';
|
||||
|
||||
export * from './box';
|
||||
export * from './flex';
|
||||
export * from './stack';
|
||||
export * from './vstack';
|
||||
export * from './hstack';
|
||||
export * from './spacer';
|
||||
export * from './square';
|
||||
export * from './circle';
|
||||
export * from './center';
|
||||
export * from './link-box';
|
||||
export * from './link-overlay';
|
||||
export * from './aspect-ratio';
|
||||
export * from './grid';
|
||||
export * from './grid-item';
|
||||
export * from './wrap';
|
||||
export * from './container';
|
||||
export * from './divider';
|
||||
export * from './float';
|
||||
export * from './bleed';
|
||||
export * from './visually-hidden';
|
||||
|
||||
export type { HTMLStyledProps, StyledComponent } from '../types/jsx';
|
||||
@@ -1,22 +0,0 @@
|
||||
export * from './factory.mjs';
|
||||
export * from './is-valid-prop.mjs';
|
||||
export * from './box.mjs';
|
||||
export * from './flex.mjs';
|
||||
export * from './stack.mjs';
|
||||
export * from './vstack.mjs';
|
||||
export * from './hstack.mjs';
|
||||
export * from './spacer.mjs';
|
||||
export * from './square.mjs';
|
||||
export * from './circle.mjs';
|
||||
export * from './center.mjs';
|
||||
export * from './link-box.mjs';
|
||||
export * from './link-overlay.mjs';
|
||||
export * from './aspect-ratio.mjs';
|
||||
export * from './grid.mjs';
|
||||
export * from './grid-item.mjs';
|
||||
export * from './wrap.mjs';
|
||||
export * from './container.mjs';
|
||||
export * from './divider.mjs';
|
||||
export * from './float.mjs';
|
||||
export * from './bleed.mjs';
|
||||
export * from './visually-hidden.mjs';
|
||||
@@ -1,5 +0,0 @@
|
||||
/* eslint-disable */
|
||||
declare const isCssProperty: (value: string) => boolean;
|
||||
declare const splitCssProps: <TProps extends Record<string, unknown>>(props: TProps) => [Pick<TProps, CssProperty>, Omit<TProps, CssProperty>]
|
||||
|
||||
export { isCssProperty, splitCssProps };
|
||||
File diff suppressed because one or more lines are too long
10
apps/web/styled-system/jsx/link-box.d.ts
vendored
10
apps/web/styled-system/jsx/link-box.d.ts
vendored
@@ -1,10 +0,0 @@
|
||||
/* eslint-disable */
|
||||
import type { FunctionComponent } from 'react'
|
||||
import type { LinkBoxProperties } from '../patterns/link-box';
|
||||
import type { HTMLStyledProps } from '../types/jsx';
|
||||
import type { DistributiveOmit } from '../types/system-types';
|
||||
|
||||
export interface LinkBoxProps extends LinkBoxProperties, DistributiveOmit<HTMLStyledProps<'div'>, keyof LinkBoxProperties > {}
|
||||
|
||||
|
||||
export declare const LinkBox: FunctionComponent<LinkBoxProps>
|
||||
@@ -1,8 +0,0 @@
|
||||
import { createElement, forwardRef } from 'react'
|
||||
import { styled } from './factory.mjs';
|
||||
import { getLinkBoxStyle } from '../patterns/link-box.mjs';
|
||||
|
||||
export const LinkBox = /* @__PURE__ */ forwardRef(function LinkBox(props, ref) {
|
||||
const styleProps = getLinkBoxStyle()
|
||||
return createElement(styled.div, { ref, ...styleProps, ...props })
|
||||
})
|
||||
10
apps/web/styled-system/jsx/link-overlay.d.ts
vendored
10
apps/web/styled-system/jsx/link-overlay.d.ts
vendored
@@ -1,10 +0,0 @@
|
||||
/* eslint-disable */
|
||||
import type { FunctionComponent } from 'react'
|
||||
import type { LinkOverlayProperties } from '../patterns/link-overlay';
|
||||
import type { HTMLStyledProps } from '../types/jsx';
|
||||
import type { DistributiveOmit } from '../types/system-types';
|
||||
|
||||
export interface LinkOverlayProps extends LinkOverlayProperties, DistributiveOmit<HTMLStyledProps<'a'>, keyof LinkOverlayProperties > {}
|
||||
|
||||
|
||||
export declare const LinkOverlay: FunctionComponent<LinkOverlayProps>
|
||||
@@ -1,8 +0,0 @@
|
||||
import { createElement, forwardRef } from 'react'
|
||||
import { styled } from './factory.mjs';
|
||||
import { getLinkOverlayStyle } from '../patterns/link-overlay.mjs';
|
||||
|
||||
export const LinkOverlay = /* @__PURE__ */ forwardRef(function LinkOverlay(props, ref) {
|
||||
const styleProps = getLinkOverlayStyle()
|
||||
return createElement(styled.a, { ref, ...styleProps, ...props })
|
||||
})
|
||||
10
apps/web/styled-system/jsx/spacer.d.ts
vendored
10
apps/web/styled-system/jsx/spacer.d.ts
vendored
@@ -1,10 +0,0 @@
|
||||
/* eslint-disable */
|
||||
import type { FunctionComponent } from 'react'
|
||||
import type { SpacerProperties } from '../patterns/spacer';
|
||||
import type { HTMLStyledProps } from '../types/jsx';
|
||||
import type { DistributiveOmit } from '../types/system-types';
|
||||
|
||||
export interface SpacerProps extends SpacerProperties, DistributiveOmit<HTMLStyledProps<'div'>, keyof SpacerProperties > {}
|
||||
|
||||
|
||||
export declare const Spacer: FunctionComponent<SpacerProps>
|
||||
@@ -1,9 +0,0 @@
|
||||
import { createElement, forwardRef } from 'react'
|
||||
import { styled } from './factory.mjs';
|
||||
import { getSpacerStyle } from '../patterns/spacer.mjs';
|
||||
|
||||
export const Spacer = /* @__PURE__ */ forwardRef(function Spacer(props, ref) {
|
||||
const { size, ...restProps } = props
|
||||
const styleProps = getSpacerStyle({size})
|
||||
return createElement(styled.div, { ref, ...styleProps, ...restProps })
|
||||
})
|
||||
10
apps/web/styled-system/jsx/square.d.ts
vendored
10
apps/web/styled-system/jsx/square.d.ts
vendored
@@ -1,10 +0,0 @@
|
||||
/* eslint-disable */
|
||||
import type { FunctionComponent } from 'react'
|
||||
import type { SquareProperties } from '../patterns/square';
|
||||
import type { HTMLStyledProps } from '../types/jsx';
|
||||
import type { DistributiveOmit } from '../types/system-types';
|
||||
|
||||
export interface SquareProps extends SquareProperties, DistributiveOmit<HTMLStyledProps<'div'>, keyof SquareProperties > {}
|
||||
|
||||
|
||||
export declare const Square: FunctionComponent<SquareProps>
|
||||
@@ -1,9 +0,0 @@
|
||||
import { createElement, forwardRef } from 'react'
|
||||
import { styled } from './factory.mjs';
|
||||
import { getSquareStyle } from '../patterns/square.mjs';
|
||||
|
||||
export const Square = /* @__PURE__ */ forwardRef(function Square(props, ref) {
|
||||
const { size, ...restProps } = props
|
||||
const styleProps = getSquareStyle({size})
|
||||
return createElement(styled.div, { ref, ...styleProps, ...restProps })
|
||||
})
|
||||
10
apps/web/styled-system/jsx/stack.d.ts
vendored
10
apps/web/styled-system/jsx/stack.d.ts
vendored
@@ -1,10 +0,0 @@
|
||||
/* eslint-disable */
|
||||
import type { FunctionComponent } from 'react'
|
||||
import type { StackProperties } from '../patterns/stack';
|
||||
import type { HTMLStyledProps } from '../types/jsx';
|
||||
import type { DistributiveOmit } from '../types/system-types';
|
||||
|
||||
export interface StackProps extends StackProperties, DistributiveOmit<HTMLStyledProps<'div'>, keyof StackProperties > {}
|
||||
|
||||
|
||||
export declare const Stack: FunctionComponent<StackProps>
|
||||
@@ -1,9 +0,0 @@
|
||||
import { createElement, forwardRef } from 'react'
|
||||
import { styled } from './factory.mjs';
|
||||
import { getStackStyle } from '../patterns/stack.mjs';
|
||||
|
||||
export const Stack = /* @__PURE__ */ forwardRef(function Stack(props, ref) {
|
||||
const { align, justify, direction, gap, ...restProps } = props
|
||||
const styleProps = getStackStyle({align, justify, direction, gap})
|
||||
return createElement(styled.div, { ref, ...styleProps, ...restProps })
|
||||
})
|
||||
10
apps/web/styled-system/jsx/visually-hidden.d.ts
vendored
10
apps/web/styled-system/jsx/visually-hidden.d.ts
vendored
@@ -1,10 +0,0 @@
|
||||
/* eslint-disable */
|
||||
import type { FunctionComponent } from 'react'
|
||||
import type { VisuallyHiddenProperties } from '../patterns/visually-hidden';
|
||||
import type { HTMLStyledProps } from '../types/jsx';
|
||||
import type { DistributiveOmit } from '../types/system-types';
|
||||
|
||||
export interface VisuallyHiddenProps extends VisuallyHiddenProperties, DistributiveOmit<HTMLStyledProps<'div'>, keyof VisuallyHiddenProperties > {}
|
||||
|
||||
|
||||
export declare const VisuallyHidden: FunctionComponent<VisuallyHiddenProps>
|
||||
@@ -1,8 +0,0 @@
|
||||
import { createElement, forwardRef } from 'react'
|
||||
import { styled } from './factory.mjs';
|
||||
import { getVisuallyHiddenStyle } from '../patterns/visually-hidden.mjs';
|
||||
|
||||
export const VisuallyHidden = /* @__PURE__ */ forwardRef(function VisuallyHidden(props, ref) {
|
||||
const styleProps = getVisuallyHiddenStyle()
|
||||
return createElement(styled.div, { ref, ...styleProps, ...props })
|
||||
})
|
||||
10
apps/web/styled-system/jsx/vstack.d.ts
vendored
10
apps/web/styled-system/jsx/vstack.d.ts
vendored
@@ -1,10 +0,0 @@
|
||||
/* eslint-disable */
|
||||
import type { FunctionComponent } from 'react'
|
||||
import type { VstackProperties } from '../patterns/vstack';
|
||||
import type { HTMLStyledProps } from '../types/jsx';
|
||||
import type { DistributiveOmit } from '../types/system-types';
|
||||
|
||||
export interface VstackProps extends VstackProperties, DistributiveOmit<HTMLStyledProps<'div'>, keyof VstackProperties > {}
|
||||
|
||||
|
||||
export declare const VStack: FunctionComponent<VstackProps>
|
||||
@@ -1,9 +0,0 @@
|
||||
import { createElement, forwardRef } from 'react'
|
||||
import { styled } from './factory.mjs';
|
||||
import { getVstackStyle } from '../patterns/vstack.mjs';
|
||||
|
||||
export const VStack = /* @__PURE__ */ forwardRef(function VStack(props, ref) {
|
||||
const { justify, gap, ...restProps } = props
|
||||
const styleProps = getVstackStyle({justify, gap})
|
||||
return createElement(styled.div, { ref, ...styleProps, ...restProps })
|
||||
})
|
||||
10
apps/web/styled-system/jsx/wrap.d.ts
vendored
10
apps/web/styled-system/jsx/wrap.d.ts
vendored
@@ -1,10 +0,0 @@
|
||||
/* eslint-disable */
|
||||
import type { FunctionComponent } from 'react'
|
||||
import type { WrapProperties } from '../patterns/wrap';
|
||||
import type { HTMLStyledProps } from '../types/jsx';
|
||||
import type { DistributiveOmit } from '../types/system-types';
|
||||
|
||||
export interface WrapProps extends WrapProperties, DistributiveOmit<HTMLStyledProps<'div'>, keyof WrapProperties > {}
|
||||
|
||||
|
||||
export declare const Wrap: FunctionComponent<WrapProps>
|
||||
@@ -1,9 +0,0 @@
|
||||
import { createElement, forwardRef } from 'react'
|
||||
import { styled } from './factory.mjs';
|
||||
import { getWrapStyle } from '../patterns/wrap.mjs';
|
||||
|
||||
export const Wrap = /* @__PURE__ */ forwardRef(function Wrap(props, ref) {
|
||||
const { gap, rowGap, columnGap, align, justify, ...restProps } = props
|
||||
const styleProps = getWrapStyle({gap, rowGap, columnGap, align, justify})
|
||||
return createElement(styled.div, { ref, ...styleProps, ...restProps })
|
||||
})
|
||||
@@ -1,21 +0,0 @@
|
||||
/* eslint-disable */
|
||||
import type { SystemStyleObject, ConditionalValue } from '../types/index';
|
||||
import type { Properties } from '../types/csstype';
|
||||
import type { PropertyValue } from '../types/prop-type';
|
||||
import type { DistributiveOmit } from '../types/system-types';
|
||||
import type { Tokens } from '../tokens/index';
|
||||
|
||||
export interface AspectRatioProperties {
|
||||
ratio?: ConditionalValue<number>
|
||||
}
|
||||
|
||||
|
||||
interface AspectRatioStyles extends AspectRatioProperties, DistributiveOmit<SystemStyleObject, keyof AspectRatioProperties | 'aspectRatio'> {}
|
||||
|
||||
interface AspectRatioPatternFn {
|
||||
(styles?: AspectRatioStyles): string
|
||||
raw: (styles?: AspectRatioStyles) => SystemStyleObject
|
||||
}
|
||||
|
||||
|
||||
export declare const aspectRatio: AspectRatioPatternFn;
|
||||
@@ -1,35 +0,0 @@
|
||||
import { mapObject } from '../helpers.mjs';
|
||||
import { css } from '../css/index.mjs';
|
||||
|
||||
const aspectRatioConfig = {
|
||||
transform(props, { map }) {
|
||||
const { ratio = 4 / 3, ...rest } = props;
|
||||
return {
|
||||
position: "relative",
|
||||
_before: {
|
||||
content: `""`,
|
||||
display: "block",
|
||||
height: "0",
|
||||
paddingBottom: map(ratio, (r) => `${1 / r * 100}%`)
|
||||
},
|
||||
"&>*": {
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
overflow: "hidden",
|
||||
position: "absolute",
|
||||
inset: "0",
|
||||
width: "100%",
|
||||
height: "100%"
|
||||
},
|
||||
"&>img, &>video": {
|
||||
objectFit: "cover"
|
||||
},
|
||||
...rest
|
||||
};
|
||||
}}
|
||||
|
||||
export const getAspectRatioStyle = (styles = {}) => aspectRatioConfig.transform(styles, { map: mapObject })
|
||||
|
||||
export const aspectRatio = (styles) => css(getAspectRatioStyle(styles))
|
||||
aspectRatio.raw = getAspectRatioStyle
|
||||
22
apps/web/styled-system/patterns/bleed.d.ts
vendored
22
apps/web/styled-system/patterns/bleed.d.ts
vendored
@@ -1,22 +0,0 @@
|
||||
/* eslint-disable */
|
||||
import type { SystemStyleObject, ConditionalValue } from '../types/index';
|
||||
import type { Properties } from '../types/csstype';
|
||||
import type { PropertyValue } from '../types/prop-type';
|
||||
import type { DistributiveOmit } from '../types/system-types';
|
||||
import type { Tokens } from '../tokens/index';
|
||||
|
||||
export interface BleedProperties {
|
||||
inline?: PropertyValue<'marginInline'>
|
||||
block?: PropertyValue<'marginBlock'>
|
||||
}
|
||||
|
||||
|
||||
interface BleedStyles extends BleedProperties, DistributiveOmit<SystemStyleObject, keyof BleedProperties > {}
|
||||
|
||||
interface BleedPatternFn {
|
||||
(styles?: BleedStyles): string
|
||||
raw: (styles?: BleedStyles) => SystemStyleObject
|
||||
}
|
||||
|
||||
|
||||
export declare const bleed: BleedPatternFn;
|
||||
@@ -1,19 +0,0 @@
|
||||
import { mapObject } from '../helpers.mjs';
|
||||
import { css } from '../css/index.mjs';
|
||||
|
||||
const bleedConfig = {
|
||||
transform(props) {
|
||||
const { inline = "0", block = "0", ...rest } = props;
|
||||
return {
|
||||
"--bleed-x": `spacing.${inline}`,
|
||||
"--bleed-y": `spacing.${block}`,
|
||||
marginInline: "calc(var(--bleed-x, 0) * -1)",
|
||||
marginBlock: "calc(var(--bleed-y, 0) * -1)",
|
||||
...rest
|
||||
};
|
||||
}}
|
||||
|
||||
export const getBleedStyle = (styles = {}) => bleedConfig.transform(styles, { map: mapObject })
|
||||
|
||||
export const bleed = (styles) => css(getBleedStyle(styles))
|
||||
bleed.raw = getBleedStyle
|
||||
21
apps/web/styled-system/patterns/box.d.ts
vendored
21
apps/web/styled-system/patterns/box.d.ts
vendored
@@ -1,21 +0,0 @@
|
||||
/* eslint-disable */
|
||||
import type { SystemStyleObject, ConditionalValue } from '../types/index';
|
||||
import type { Properties } from '../types/csstype';
|
||||
import type { PropertyValue } from '../types/prop-type';
|
||||
import type { DistributiveOmit } from '../types/system-types';
|
||||
import type { Tokens } from '../tokens/index';
|
||||
|
||||
export interface BoxProperties {
|
||||
|
||||
}
|
||||
|
||||
|
||||
interface BoxStyles extends BoxProperties, DistributiveOmit<SystemStyleObject, keyof BoxProperties > {}
|
||||
|
||||
interface BoxPatternFn {
|
||||
(styles?: BoxStyles): string
|
||||
raw: (styles?: BoxStyles) => SystemStyleObject
|
||||
}
|
||||
|
||||
|
||||
export declare const box: BoxPatternFn;
|
||||
@@ -1,12 +0,0 @@
|
||||
import { mapObject } from '../helpers.mjs';
|
||||
import { css } from '../css/index.mjs';
|
||||
|
||||
const boxConfig = {
|
||||
transform(props) {
|
||||
return props;
|
||||
}}
|
||||
|
||||
export const getBoxStyle = (styles = {}) => boxConfig.transform(styles, { map: mapObject })
|
||||
|
||||
export const box = (styles) => css(getBoxStyle(styles))
|
||||
box.raw = getBoxStyle
|
||||
21
apps/web/styled-system/patterns/center.d.ts
vendored
21
apps/web/styled-system/patterns/center.d.ts
vendored
@@ -1,21 +0,0 @@
|
||||
/* eslint-disable */
|
||||
import type { SystemStyleObject, ConditionalValue } from '../types/index';
|
||||
import type { Properties } from '../types/csstype';
|
||||
import type { PropertyValue } from '../types/prop-type';
|
||||
import type { DistributiveOmit } from '../types/system-types';
|
||||
import type { Tokens } from '../tokens/index';
|
||||
|
||||
export interface CenterProperties {
|
||||
inline?: ConditionalValue<boolean>
|
||||
}
|
||||
|
||||
|
||||
interface CenterStyles extends CenterProperties, DistributiveOmit<SystemStyleObject, keyof CenterProperties > {}
|
||||
|
||||
interface CenterPatternFn {
|
||||
(styles?: CenterStyles): string
|
||||
raw: (styles?: CenterStyles) => SystemStyleObject
|
||||
}
|
||||
|
||||
|
||||
export declare const center: CenterPatternFn;
|
||||
@@ -1,18 +0,0 @@
|
||||
import { mapObject } from '../helpers.mjs';
|
||||
import { css } from '../css/index.mjs';
|
||||
|
||||
const centerConfig = {
|
||||
transform(props) {
|
||||
const { inline, ...rest } = props;
|
||||
return {
|
||||
display: inline ? "inline-flex" : "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
...rest
|
||||
};
|
||||
}}
|
||||
|
||||
export const getCenterStyle = (styles = {}) => centerConfig.transform(styles, { map: mapObject })
|
||||
|
||||
export const center = (styles) => css(getCenterStyle(styles))
|
||||
center.raw = getCenterStyle
|
||||
21
apps/web/styled-system/patterns/circle.d.ts
vendored
21
apps/web/styled-system/patterns/circle.d.ts
vendored
@@ -1,21 +0,0 @@
|
||||
/* eslint-disable */
|
||||
import type { SystemStyleObject, ConditionalValue } from '../types/index';
|
||||
import type { Properties } from '../types/csstype';
|
||||
import type { PropertyValue } from '../types/prop-type';
|
||||
import type { DistributiveOmit } from '../types/system-types';
|
||||
import type { Tokens } from '../tokens/index';
|
||||
|
||||
export interface CircleProperties {
|
||||
size?: PropertyValue<'width'>
|
||||
}
|
||||
|
||||
|
||||
interface CircleStyles extends CircleProperties, DistributiveOmit<SystemStyleObject, keyof CircleProperties > {}
|
||||
|
||||
interface CirclePatternFn {
|
||||
(styles?: CircleStyles): string
|
||||
raw: (styles?: CircleStyles) => SystemStyleObject
|
||||
}
|
||||
|
||||
|
||||
export declare const circle: CirclePatternFn;
|
||||
@@ -1,22 +0,0 @@
|
||||
import { mapObject } from '../helpers.mjs';
|
||||
import { css } from '../css/index.mjs';
|
||||
|
||||
const circleConfig = {
|
||||
transform(props) {
|
||||
const { size, ...rest } = props;
|
||||
return {
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
flex: "0 0 auto",
|
||||
width: size,
|
||||
height: size,
|
||||
borderRadius: "9999px",
|
||||
...rest
|
||||
};
|
||||
}}
|
||||
|
||||
export const getCircleStyle = (styles = {}) => circleConfig.transform(styles, { map: mapObject })
|
||||
|
||||
export const circle = (styles) => css(getCircleStyle(styles))
|
||||
circle.raw = getCircleStyle
|
||||
21
apps/web/styled-system/patterns/container.d.ts
vendored
21
apps/web/styled-system/patterns/container.d.ts
vendored
@@ -1,21 +0,0 @@
|
||||
/* eslint-disable */
|
||||
import type { SystemStyleObject, ConditionalValue } from '../types/index';
|
||||
import type { Properties } from '../types/csstype';
|
||||
import type { PropertyValue } from '../types/prop-type';
|
||||
import type { DistributiveOmit } from '../types/system-types';
|
||||
import type { Tokens } from '../tokens/index';
|
||||
|
||||
export interface ContainerProperties {
|
||||
|
||||
}
|
||||
|
||||
|
||||
interface ContainerStyles extends ContainerProperties, DistributiveOmit<SystemStyleObject, keyof ContainerProperties > {}
|
||||
|
||||
interface ContainerPatternFn {
|
||||
(styles?: ContainerStyles): string
|
||||
raw: (styles?: ContainerStyles) => SystemStyleObject
|
||||
}
|
||||
|
||||
|
||||
export declare const container: ContainerPatternFn;
|
||||
@@ -1,18 +0,0 @@
|
||||
import { mapObject } from '../helpers.mjs';
|
||||
import { css } from '../css/index.mjs';
|
||||
|
||||
const containerConfig = {
|
||||
transform(props) {
|
||||
return {
|
||||
position: "relative",
|
||||
maxWidth: "8xl",
|
||||
mx: "auto",
|
||||
px: { base: "4", md: "6", lg: "8" },
|
||||
...props
|
||||
};
|
||||
}}
|
||||
|
||||
export const getContainerStyle = (styles = {}) => containerConfig.transform(styles, { map: mapObject })
|
||||
|
||||
export const container = (styles) => css(getContainerStyle(styles))
|
||||
container.raw = getContainerStyle
|
||||
23
apps/web/styled-system/patterns/divider.d.ts
vendored
23
apps/web/styled-system/patterns/divider.d.ts
vendored
@@ -1,23 +0,0 @@
|
||||
/* eslint-disable */
|
||||
import type { SystemStyleObject, ConditionalValue } from '../types/index';
|
||||
import type { Properties } from '../types/csstype';
|
||||
import type { PropertyValue } from '../types/prop-type';
|
||||
import type { DistributiveOmit } from '../types/system-types';
|
||||
import type { Tokens } from '../tokens/index';
|
||||
|
||||
export interface DividerProperties {
|
||||
orientation?: ConditionalValue<"horizontal" | "vertical">
|
||||
thickness?: ConditionalValue<Tokens["sizes"] | Properties["borderWidth"]>
|
||||
color?: ConditionalValue<Tokens["colors"] | Properties["borderColor"]>
|
||||
}
|
||||
|
||||
|
||||
interface DividerStyles extends DividerProperties, DistributiveOmit<SystemStyleObject, keyof DividerProperties > {}
|
||||
|
||||
interface DividerPatternFn {
|
||||
(styles?: DividerStyles): string
|
||||
raw: (styles?: DividerStyles) => SystemStyleObject
|
||||
}
|
||||
|
||||
|
||||
export declare const divider: DividerPatternFn;
|
||||
@@ -1,21 +0,0 @@
|
||||
import { mapObject } from '../helpers.mjs';
|
||||
import { css } from '../css/index.mjs';
|
||||
|
||||
const dividerConfig = {
|
||||
transform(props, { map }) {
|
||||
const { orientation = "horizontal", thickness = "1px", color, ...rest } = props;
|
||||
return {
|
||||
"--thickness": thickness,
|
||||
width: map(orientation, (v) => v === "vertical" ? void 0 : "100%"),
|
||||
height: map(orientation, (v) => v === "horizontal" ? void 0 : "100%"),
|
||||
borderBlockEndWidth: map(orientation, (v) => v === "horizontal" ? "var(--thickness)" : void 0),
|
||||
borderInlineEndWidth: map(orientation, (v) => v === "vertical" ? "var(--thickness)" : void 0),
|
||||
borderColor: color,
|
||||
...rest
|
||||
};
|
||||
}}
|
||||
|
||||
export const getDividerStyle = (styles = {}) => dividerConfig.transform(styles, { map: mapObject })
|
||||
|
||||
export const divider = (styles) => css(getDividerStyle(styles))
|
||||
divider.raw = getDividerStyle
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user