@pandacss/studio 0.15.1 → 0.15.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (98) hide show
  1. package/astro.config.mjs +1 -1
  2. package/dist/studio.d.mts +3 -2
  3. package/dist/studio.d.ts +3 -2
  4. package/dist/studio.js +10 -4
  5. package/dist/studio.mjs +10 -4
  6. package/package.json +8 -8
  7. package/src/lib/panda.context.ts +3 -5
  8. package/src/lib/virtual-panda.d.ts +3 -0
  9. package/styled-system/chunks/src__components__analyzer__category-utilities.css +61 -168
  10. package/styled-system/chunks/src__components__analyzer__data-combobox.css +69 -114
  11. package/styled-system/chunks/src__components__analyzer__data-table.css +24 -23
  12. package/styled-system/chunks/src__components__analyzer__file-details.css +53 -112
  13. package/styled-system/chunks/src__components__analyzer__report-item-columns.css +20 -19
  14. package/styled-system/chunks/src__components__analyzer__report-item-link.css +39 -222
  15. package/styled-system/chunks/src__components__analyzer__section.css +16 -15
  16. package/styled-system/chunks/src__components__analyzer__text-with-count.css +18 -17
  17. package/styled-system/chunks/src__components__analyzer__truncated-text.css +10 -9
  18. package/styled-system/chunks/src__components__analyzer__utility-details.css +71 -178
  19. package/styled-system/chunks/src__components__color-constrast.css +54 -61
  20. package/styled-system/chunks/src__components__color-item.css +12 -11
  21. package/styled-system/chunks/src__components__color-wrapper.css +37 -196
  22. package/styled-system/chunks/src__components__colors.css +54 -53
  23. package/styled-system/chunks/src__components__empty-state.css +24 -23
  24. package/styled-system/chunks/src__components__font-family.css +44 -43
  25. package/styled-system/chunks/src__components__font-tokens.css +32 -31
  26. package/styled-system/chunks/src__components__input.css +34 -137
  27. package/styled-system/chunks/src__components__layer-styles.css +34 -76
  28. package/styled-system/chunks/src__components__nav-item.css +37 -161
  29. package/styled-system/chunks/src__components__overview.css +63 -102
  30. package/styled-system/chunks/src__components__radii.css +26 -25
  31. package/styled-system/chunks/src__components__semantic-color.css +34 -33
  32. package/styled-system/chunks/src__components__side-nav-item.css +17 -56
  33. package/styled-system/chunks/src__components__side-nav.css +26 -25
  34. package/styled-system/chunks/src__components__sizes.css +22 -21
  35. package/styled-system/chunks/src__components__text-styles.css +16 -15
  36. package/styled-system/chunks/src__components__theme-toggle.css +28 -47
  37. package/styled-system/chunks/src__components__token-analyzer.css +114 -379
  38. package/styled-system/chunks/src__components__token-content.css +8 -7
  39. package/styled-system/chunks/src__components__token-group.css +12 -11
  40. package/styled-system/chunks/src__components__typography-playground.css +32 -31
  41. package/styled-system/chunks/src__layouts__Sidebar.css +59 -94
  42. package/styled-system/jsx/aspect-ratio.d.ts +1 -1
  43. package/styled-system/jsx/bleed.d.ts +1 -1
  44. package/styled-system/jsx/box.d.ts +1 -1
  45. package/styled-system/jsx/center.d.ts +1 -1
  46. package/styled-system/jsx/circle.d.ts +1 -1
  47. package/styled-system/jsx/container.d.ts +1 -1
  48. package/styled-system/jsx/divider.d.ts +1 -1
  49. package/styled-system/jsx/factory.mjs +4 -5
  50. package/styled-system/jsx/flex.d.ts +1 -1
  51. package/styled-system/jsx/float.d.ts +1 -1
  52. package/styled-system/jsx/grid-item.d.ts +1 -1
  53. package/styled-system/jsx/grid.d.ts +1 -1
  54. package/styled-system/jsx/hstack.d.ts +1 -1
  55. package/styled-system/jsx/link-box.d.ts +1 -1
  56. package/styled-system/jsx/link-overlay.d.ts +1 -1
  57. package/styled-system/jsx/spacer.d.ts +1 -1
  58. package/styled-system/jsx/square.d.ts +1 -1
  59. package/styled-system/jsx/stack.d.ts +1 -1
  60. package/styled-system/jsx/styled-link.d.ts +1 -1
  61. package/styled-system/jsx/visually-hidden.d.ts +1 -1
  62. package/styled-system/jsx/vstack.d.ts +1 -1
  63. package/styled-system/jsx/wrap.d.ts +1 -1
  64. package/styled-system/patterns/aspect-ratio.d.ts +2 -2
  65. package/styled-system/patterns/bleed.d.ts +2 -2
  66. package/styled-system/patterns/box.d.ts +2 -2
  67. package/styled-system/patterns/center.d.ts +2 -2
  68. package/styled-system/patterns/circle.d.ts +2 -2
  69. package/styled-system/patterns/container.d.ts +2 -2
  70. package/styled-system/patterns/divider.d.ts +2 -2
  71. package/styled-system/patterns/flex.d.ts +2 -2
  72. package/styled-system/patterns/float.d.ts +2 -2
  73. package/styled-system/patterns/grid-item.d.ts +2 -2
  74. package/styled-system/patterns/grid.d.ts +2 -2
  75. package/styled-system/patterns/hstack.d.ts +2 -2
  76. package/styled-system/patterns/link-box.d.ts +2 -2
  77. package/styled-system/patterns/link-overlay.d.ts +2 -2
  78. package/styled-system/patterns/spacer.d.ts +2 -2
  79. package/styled-system/patterns/square.d.ts +2 -2
  80. package/styled-system/patterns/stack.d.ts +2 -2
  81. package/styled-system/patterns/styled-link.d.ts +2 -2
  82. package/styled-system/patterns/visually-hidden.d.ts +2 -2
  83. package/styled-system/patterns/vstack.d.ts +2 -2
  84. package/styled-system/patterns/wrap.d.ts +2 -2
  85. package/styled-system/styles.css +507 -516
  86. package/styled-system/tokens/index.css +8 -8
  87. package/styled-system/types/composition.d.ts +3 -3
  88. package/styled-system/types/conditions.d.ts +227 -114
  89. package/styled-system/types/global.d.ts +7 -7
  90. package/styled-system/types/index.d.ts +6 -4
  91. package/styled-system/types/jsx.d.ts +3 -3
  92. package/styled-system/types/parts.d.ts +1 -1
  93. package/styled-system/types/pattern.d.ts +2 -2
  94. package/styled-system/types/prop-type.d.ts +2 -2
  95. package/styled-system/types/recipe.d.ts +19 -14
  96. package/styled-system/types/style-props.d.ts +1 -1
  97. package/styled-system/types/system-types.d.ts +12 -6
  98. package/{virtual-panda.mjs → virtual-panda.ts} +24 -28
package/styled-system/chunks/src__components__analyzer__data-table.css CHANGED
@@ -1,45 +1,46 @@
1
1
  @layer utilities {
2
+
2
3
  .break_break-word {
3
- word-break: break-word;
4
- }
4
+ word-break: break-word
5
+ }
5
6
 
6
7
  .font_bold {
7
- font-weight: var(--font-weights-bold);
8
- }
8
+ font-weight: var(--font-weights-bold)
9
+ }
9
10
 
10
11
  .fs_lg {
11
- font-size: var(--font-sizes-lg);
12
- }
12
+ font-size: var(--font-sizes-lg)
13
+ }
13
14
 
14
15
  .mb_2 {
15
- margin-bottom: var(--spacing-2);
16
- }
16
+ margin-bottom: var(--spacing-2)
17
+ }
17
18
 
18
19
  .d_grid {
19
- display: grid;
20
- }
20
+ display: grid
21
+ }
21
22
 
22
23
  .grid-cols_80px_repeat\(auto-fit\,_minmax\(30px\,_1fr\)\) {
23
- grid-template-columns: 80px repeat(auto-fit, minmax(30px, 1fr));
24
- }
24
+ grid-template-columns: 80px repeat(auto-fit, minmax(30px, 1fr))
25
+ }
25
26
 
26
27
  .gap_10px {
27
- gap: 10px;
28
- }
28
+ gap: 10px
29
+ }
29
30
 
30
31
  .w_full {
31
- width: var(--sizes-full);
32
- }
32
+ width: var(--sizes-full)
33
+ }
33
34
 
34
35
  .d_flex {
35
- display: flex;
36
- }
36
+ display: flex
37
+ }
37
38
 
38
39
  .flex_column {
39
- flex-direction: column;
40
- }
40
+ flex-direction: column
41
+ }
41
42
 
42
43
  .gap_2 {
43
- gap: var(--spacing-2);
44
- }
45
- }
44
+ gap: var(--spacing-2)
45
+ }
46
+ }
package/styled-system/chunks/src__components__analyzer__file-details.css CHANGED
@@ -1,157 +1,98 @@
1
1
  @layer utilities {
2
- .hover\:bg_gray\.100 {
3
- &:where(:hover, [data-hover]) {
4
- background-color: var(--colors-gray-100);
5
- }
6
- }
7
-
8
- .hover\:opacity_1 {
9
- &:where(:hover, [data-hover]) {
10
- opacity: 1;
11
- }
12
- }
13
-
14
- .hover\:border-b_black {
15
- &:where(:hover, [data-hover]) {
16
- border-bottom-color: var(--colors-black);
17
- }
18
- }
19
-
20
- .hover\:bg_gray\.100 {
21
- &:where(:hover, [data-hover]) {
22
- background-color: var(--colors-gray-100);
23
- }
24
- }
25
-
26
- .hover\:opacity_1 {
27
- &:where(:hover, [data-hover]) {
28
- opacity: 1;
29
- }
30
- }
31
-
32
- .hover\:border-b_black {
33
- &:where(:hover, [data-hover]) {
34
- border-bottom-color: var(--colors-black);
35
- }
36
- }
37
-
38
- .hover\:bg_gray\.100 {
39
- &:where(:hover, [data-hover]) {
40
- background-color: var(--colors-gray-100);
41
- }
42
- }
43
-
44
- .hover\:opacity_1 {
45
- &:where(:hover, [data-hover]) {
46
- opacity: 1;
47
- }
48
- }
49
-
50
- .hover\:border-b_black {
51
- &:where(:hover, [data-hover]) {
52
- border-bottom-color: var(--colors-black);
53
- }
54
- }
55
2
 
56
3
  .ml_auto {
57
- margin-left: auto;
58
- }
4
+ margin-left: auto
5
+ }
59
6
 
60
7
  .p_4 {
61
- padding: var(--spacing-4);
62
- }
8
+ padding: var(--spacing-4)
9
+ }
63
10
 
64
11
  .justify_center {
65
- justify-content: center;
66
- }
12
+ justify-content: center
13
+ }
67
14
 
68
15
  .fs_xl {
69
- font-size: var(--font-sizes-xl);
70
- }
16
+ font-size: var(--font-sizes-xl)
17
+ }
71
18
 
72
19
  .p_16 {
73
- padding: var(--spacing-16);
74
- }
20
+ padding: var(--spacing-16)
21
+ }
75
22
 
76
23
  .mt_8 {
77
- margin-top: var(--spacing-8);
78
- }
24
+ margin-top: var(--spacing-8)
25
+ }
79
26
 
80
27
  .mt_1 {
81
- margin-top: var(--spacing-1);
82
- }
28
+ margin-top: var(--spacing-1)
29
+ }
83
30
 
84
31
  .font_bold {
85
- font-weight: var(--font-weights-bold);
86
- }
32
+ font-weight: var(--font-weights-bold)
33
+ }
87
34
 
88
35
  .mb_4 {
89
- margin-bottom: var(--spacing-4);
90
- }
36
+ margin-bottom: var(--spacing-4)
37
+ }
91
38
 
92
39
  .py_2 {
93
- padding-block: var(--spacing-2);
94
- }
40
+ padding-block: var(--spacing-2)
41
+ }
95
42
 
96
43
  .px_4 {
97
- padding-inline: var(--spacing-4);
98
- }
44
+ padding-inline: var(--spacing-4)
45
+ }
99
46
 
100
47
  .transition_all_0\.2s_ease {
101
- transition: all 0.2s ease;
102
- }
103
-
104
- .hover\:bg_gray\.100 {
105
- &:where(:hover, [data-hover]) {
106
- background-color: var(--colors-gray-100);
48
+ transition: all 0.2s ease
107
49
  }
108
- }
109
50
 
110
51
  .d_inline-flex {
111
- display: inline-flex;
112
- }
52
+ display: inline-flex
53
+ }
113
54
 
114
55
  .items_center {
115
- align-items: center;
116
- }
56
+ align-items: center
57
+ }
117
58
 
118
59
  .opacity_0\.5 {
119
- opacity: 0.5;
120
- }
60
+ opacity: 0.5
61
+ }
121
62
 
122
63
  .border-b_1px_solid_transparent {
123
- border-bottom: 1px solid transparent;
124
- }
125
-
126
- .cursor_pointer {
127
- cursor: pointer;
128
- }
129
-
130
- .hover\:opacity_1 {
131
- &:where(:hover, [data-hover]) {
132
- opacity: 1;
64
+ border-bottom: 1px solid transparent
133
65
  }
134
- }
135
66
 
136
- .hover\:border-b_black {
137
- &:where(:hover, [data-hover]) {
138
- border-bottom-color: var(--colors-black);
67
+ .cursor_pointer {
68
+ cursor: pointer
139
69
  }
140
- }
141
70
 
142
71
  .d_flex {
143
- display: flex;
144
- }
72
+ display: flex
73
+ }
145
74
 
146
75
  .flex-wrap_wrap {
147
- flex-wrap: wrap;
148
- }
76
+ flex-wrap: wrap
77
+ }
149
78
 
150
79
  .gap_2 {
151
- gap: var(--spacing-2);
152
- }
80
+ gap: var(--spacing-2)
81
+ }
153
82
 
154
83
  .mt_4 {
155
- margin-top: var(--spacing-4);
156
- }
157
- }
84
+ margin-top: var(--spacing-4)
85
+ }
86
+
87
+ .hover\:bg_gray\.100:is(:hover, [data-hover]) {
88
+ background-color: var(--colors-gray-100)
89
+ }
90
+
91
+ .hover\:opacity_1:is(:hover, [data-hover]) {
92
+ opacity: 1
93
+ }
94
+
95
+ .hover\:border-b_black:is(:hover, [data-hover]) {
96
+ border-bottom-color: var(--colors-black)
97
+ }
98
+ }
package/styled-system/chunks/src__components__analyzer__report-item-columns.css CHANGED
@@ -1,38 +1,39 @@
1
1
  @layer utilities {
2
+
2
3
  .p_2 {
3
- padding: var(--spacing-2);
4
- }
4
+ padding: var(--spacing-2)
5
+ }
5
6
 
6
7
  .bg_card {
7
- background-color: var(--colors-card);
8
- }
8
+ background-color: var(--colors-card)
9
+ }
9
10
 
10
11
  .border_1px_solid_token\(colors\.border\) {
11
- border: 1px solid var(--colors-border);
12
- }
12
+ border: 1px solid var(--colors-border)
13
+ }
13
14
 
14
15
  .shadow_sm {
15
- box-shadow: var(--shadows-sm);
16
- }
16
+ box-shadow: var(--shadows-sm)
17
+ }
17
18
 
18
19
  .rounded_md {
19
- border-radius: var(--radii-md);
20
- }
20
+ border-radius: var(--radii-md)
21
+ }
21
22
 
22
23
  .mr_2 {
23
- margin-right: var(--spacing-2);
24
- }
24
+ margin-right: var(--spacing-2)
25
+ }
25
26
 
26
27
  .select_none {
27
28
  -webkit-user-select: none;
28
- user-select: none;
29
- }
29
+ user-select: none
30
+ }
30
31
 
31
32
  .d_flex {
32
- display: flex;
33
- }
33
+ display: flex
34
+ }
34
35
 
35
36
  .items_center {
36
- align-items: center;
37
- }
38
- }
37
+ align-items: center
38
+ }
39
+ }
package/styled-system/chunks/src__components__analyzer__report-item-link.css CHANGED
@@ -1,261 +1,78 @@
1
1
  @layer utilities {
2
- .d_flex {
3
- display: flex;
4
- }
5
-
6
- .hover\:opacity_1 {
7
- &:where(:hover, [data-hover]) {
8
- opacity: 1;
9
- }
10
- }
11
-
12
- .hover\:border-b_black {
13
- &:where(:hover, [data-hover]) {
14
- border-bottom-color: var(--colors-black);
15
- }
16
- }
17
-
18
- .hover\:opacity_1 {
19
- &:where(:hover, [data-hover]) {
20
- opacity: 1;
21
- }
22
- }
23
-
24
- .hover\:border-b_black {
25
- &:where(:hover, [data-hover]) {
26
- border-bottom-color: var(--colors-black);
27
- }
28
- }
29
-
30
- .hover\:opacity_1 {
31
- &:where(:hover, [data-hover]) {
32
- opacity: 1;
33
- }
34
- }
35
-
36
- .hover\:border-b_black {
37
- &:where(:hover, [data-hover]) {
38
- border-bottom-color: var(--colors-black);
39
- }
40
- }
41
-
42
- .hover\:opacity_1 {
43
- &:where(:hover, [data-hover]) {
44
- opacity: 1;
45
- }
46
- }
47
-
48
- .hover\:border-b_black {
49
- &:where(:hover, [data-hover]) {
50
- border-bottom-color: var(--colors-black);
51
- }
52
- }
53
-
54
- .hover\:opacity_1 {
55
- &:where(:hover, [data-hover]) {
56
- opacity: 1;
57
- }
58
- }
59
-
60
- .hover\:border-b_black {
61
- &:where(:hover, [data-hover]) {
62
- border-bottom-color: var(--colors-black);
63
- }
64
- }
65
-
66
- .hover\:opacity_1 {
67
- &:where(:hover, [data-hover]) {
68
- opacity: 1;
69
- }
70
- }
71
-
72
- .hover\:border-b_black {
73
- &:where(:hover, [data-hover]) {
74
- border-bottom-color: var(--colors-black);
75
- }
76
- }
77
-
78
- .hover\:opacity_1 {
79
- &:where(:hover, [data-hover]) {
80
- opacity: 1;
81
- }
82
- }
83
-
84
- .hover\:border-b_black {
85
- &:where(:hover, [data-hover]) {
86
- border-bottom-color: var(--colors-black);
87
- }
88
- }
89
-
90
- .hover\:opacity_1 {
91
- &:where(:hover, [data-hover]) {
92
- opacity: 1;
93
- }
94
- }
95
-
96
- .hover\:border-b_black {
97
- &:where(:hover, [data-hover]) {
98
- border-bottom-color: var(--colors-black);
99
- }
100
- }
101
-
102
- .hover\:opacity_1 {
103
- &:where(:hover, [data-hover]) {
104
- opacity: 1;
105
- }
106
- }
107
-
108
- .hover\:border-b_black {
109
- &:where(:hover, [data-hover]) {
110
- border-bottom-color: var(--colors-black);
111
- }
112
- }
113
2
 
114
- .hover\:opacity_1 {
115
- &:where(:hover, [data-hover]) {
116
- opacity: 1;
117
- }
118
- }
119
-
120
- .hover\:border-b_black {
121
- &:where(:hover, [data-hover]) {
122
- border-bottom-color: var(--colors-black);
123
- }
124
- }
125
-
126
- .hover\:opacity_1 {
127
- &:where(:hover, [data-hover]) {
128
- opacity: 1;
129
- }
130
- }
131
-
132
- .hover\:border-b_black {
133
- &:where(:hover, [data-hover]) {
134
- border-bottom-color: var(--colors-black);
135
- }
136
- }
137
-
138
- .hover\:opacity_1 {
139
- &:where(:hover, [data-hover]) {
140
- opacity: 1;
141
- }
142
- }
143
-
144
- .hover\:border-b_black {
145
- &:where(:hover, [data-hover]) {
146
- border-bottom-color: var(--colors-black);
3
+ .d_flex {
4
+ display: flex
147
5
  }
148
- }
149
6
 
150
7
  .pos_relative {
151
- position: relative;
152
- }
8
+ position: relative
9
+ }
153
10
 
154
11
  .max-w_14px {
155
- max-width: 14px;
156
- }
12
+ max-width: 14px
13
+ }
157
14
 
158
15
  .shrink_0 {
159
- flex-shrink: 0;
160
- }
16
+ flex-shrink: 0
17
+ }
161
18
 
162
19
  .p_2 {
163
- padding: var(--spacing-2);
164
- }
20
+ padding: var(--spacing-2)
21
+ }
165
22
 
166
23
  .bg_card {
167
- background-color: var(--colors-card);
168
- }
169
-
170
- .border_1px_solid_token\(colors\.border\) {
171
- border: 1px solid var(--colors-border);
172
- }
173
-
174
- .shadow_sm {
175
- box-shadow: var(--shadows-sm);
176
- }
177
-
178
- .rounded_md {
179
- border-radius: var(--radii-md);
180
- }
181
-
182
- .hover\:opacity_1 {
183
- &:where(:hover, [data-hover]) {
184
- opacity: 1;
24
+ background-color: var(--colors-card)
185
25
  }
186
- }
187
26
 
188
- .hover\:border-b_black {
189
- &:where(:hover, [data-hover]) {
190
- border-bottom-color: var(--colors-black);
27
+ .border_1px_solid_token\(colors\.border\) {
28
+ border: 1px solid var(--colors-border)
191
29
  }
192
- }
193
30
 
194
- .hover\:opacity_1 {
195
- &:where(:hover, [data-hover]) {
196
- opacity: 1;
31
+ .shadow_sm {
32
+ box-shadow: var(--shadows-sm)
197
33
  }
198
- }
199
34
 
200
- .hover\:border-b_black {
201
- &:where(:hover, [data-hover]) {
202
- border-bottom-color: var(--colors-black);
35
+ .rounded_md {
36
+ border-radius: var(--radii-md)
203
37
  }
204
- }
205
38
 
206
39
  .text_red\.400 {
207
- color: var(--colors-red-400);
208
- }
209
-
210
- .hover\:opacity_1 {
211
- &:where(:hover, [data-hover]) {
212
- opacity: 1;
213
- }
214
- }
215
-
216
- .hover\:border-b_black {
217
- &:where(:hover, [data-hover]) {
218
- border-bottom-color: var(--colors-black);
40
+ color: var(--colors-red-400)
219
41
  }
220
- }
221
42
 
222
43
  .d_inline-flex {
223
- display: inline-flex;
224
- }
44
+ display: inline-flex
45
+ }
225
46
 
226
47
  .items_center {
227
- align-items: center;
228
- }
48
+ align-items: center
49
+ }
229
50
 
230
51
  .opacity_0\.5 {
231
- opacity: 0.5;
232
- }
52
+ opacity: 0.5
53
+ }
233
54
 
234
55
  .border-b_1px_solid_transparent {
235
- border-bottom: 1px solid transparent;
236
- }
56
+ border-bottom: 1px solid transparent
57
+ }
237
58
 
238
59
  .cursor_pointer {
239
- cursor: pointer;
240
- }
60
+ cursor: pointer
61
+ }
241
62
 
242
- .hover\:opacity_1 {
243
- &:where(:hover, [data-hover]) {
244
- opacity: 1;
63
+ .self_flex-start {
64
+ align-self: flex-start
245
65
  }
246
- }
247
66
 
248
- .hover\:border-b_black {
249
- &:where(:hover, [data-hover]) {
250
- border-bottom-color: var(--colors-black);
67
+ .mr_2 {
68
+ margin-right: var(--spacing-2)
251
69
  }
252
- }
253
70
 
254
- .self_flex-start {
255
- align-self: flex-start;
256
- }
71
+ .hover\:opacity_1:is(:hover, [data-hover]) {
72
+ opacity: 1
73
+ }
257
74
 
258
- .mr_2 {
259
- margin-right: var(--spacing-2);
260
- }
261
- }
75
+ .hover\:border-b_black:is(:hover, [data-hover]) {
76
+ border-bottom-color: var(--colors-black)
77
+ }
78
+ }
package/styled-system/chunks/src__components__analyzer__section.css CHANGED
@@ -1,29 +1,30 @@
1
1
  @layer utilities {
2
+
2
3
  .w_full {
3
- width: var(--sizes-full);
4
- }
4
+ width: var(--sizes-full)
5
+ }
5
6
 
6
7
  .rounded_md {
7
- border-radius: var(--radii-md);
8
- }
8
+ border-radius: var(--radii-md)
9
+ }
9
10
 
10
11
  .d_flex {
11
- display: flex;
12
- }
12
+ display: flex
13
+ }
13
14
 
14
15
  .flex_column {
15
- flex-direction: column;
16
- }
16
+ flex-direction: column
17
+ }
17
18
 
18
19
  .gap_4 {
19
- gap: var(--spacing-4);
20
- }
20
+ gap: var(--spacing-4)
21
+ }
21
22
 
22
23
  .p_4 {
23
- padding: var(--spacing-4);
24
- }
24
+ padding: var(--spacing-4)
25
+ }
25
26
 
26
27
  .w_100\% {
27
- width: 100%;
28
- }
29
- }
28
+ width: 100%
29
+ }
30
+ }