armtek-uikit-react 1.0.242 → 1.0.243

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 (57) hide show
  1. package/assets/Accordion.scss +113 -113
  2. package/assets/Adornment.scss +22 -22
  3. package/assets/Alert.scss +56 -56
  4. package/assets/Avatar.scss +104 -104
  5. package/assets/AvatarGroup.scss +47 -47
  6. package/assets/BackDrop.scss +27 -27
  7. package/assets/Badge.scss +96 -96
  8. package/assets/Button.scss +750 -750
  9. package/assets/ButtonGroup.scss +37 -37
  10. package/assets/ButtonIcon.scss +32 -32
  11. package/assets/Card.scss +13 -13
  12. package/assets/Checkbox.scss +313 -313
  13. package/assets/Chip.scss +279 -279
  14. package/assets/DateField.scss +2 -2
  15. package/assets/DatePicker.scss +72 -72
  16. package/assets/Dropdown.scss +42 -42
  17. package/assets/FormControls.scss +14 -14
  18. package/assets/HelperText.scss +11 -11
  19. package/assets/Icon.scss +30 -30
  20. package/assets/Interval.scss +34 -34
  21. package/assets/Link.scss +96 -96
  22. package/assets/ListItem.scss +72 -72
  23. package/assets/Loader.scss +56 -56
  24. package/assets/Logo.scss +28 -28
  25. package/assets/Modal.scss +97 -97
  26. package/assets/Pagination.scss +3 -3
  27. package/assets/Paper.scss +19 -19
  28. package/assets/Period.scss +8 -8
  29. package/assets/Popper.scss +2 -2
  30. package/assets/Rating.scss +26 -26
  31. package/assets/Select.scss +85 -85
  32. package/assets/Skeleton.scss +25 -25
  33. package/assets/Slider.scss +5 -5
  34. package/assets/Stack.scss +27 -27
  35. package/assets/Status.scss +50 -50
  36. package/assets/StepItem.scss +89 -89
  37. package/assets/StepItemIcon.scss +47 -47
  38. package/assets/Stepper.scss +30 -30
  39. package/assets/Switch.scss +67 -67
  40. package/assets/Table.scss +37 -37
  41. package/assets/TextArea.scss +17 -17
  42. package/assets/TextField.scss +197 -197
  43. package/assets/Tooltip.scss +17 -17
  44. package/assets/classes.scss +422 -422
  45. package/assets/fonts.scss +24 -24
  46. package/assets/global.scss +221 -221
  47. package/assets/styles.scss +46 -46
  48. package/assets/variables.scss +13 -13
  49. package/lib/hooks/useEnhancedEffect.js +6 -6
  50. package/lib/hooks/useTimeout.js +2 -2
  51. package/package.json +1 -1
  52. package/ui/Form/DatePicker/styles.css +802 -802
  53. package/ui/Form/FormControls/FormControls.js +1 -1
  54. package/ui/Form/FormControls/const.d.ts +1 -0
  55. package/ui/Form/FormControls/const.js +3 -2
  56. package/ui/Modal/Modal.js +1 -0
  57. package/ui/Slider/style.scss +346 -346
@@ -1,422 +1,422 @@
1
-
2
- .border-radius {border-radius: var(--border-radius)}
3
-
4
- .w-full{width: 100%}
5
- .h-full{height: 100%}
6
-
7
- .border{ border: 1px solid}
8
- .border-left{ border-left: 1px solid}
9
- .border-right{ border-right: 1px solid}
10
- .border-top{ border-top: 1px solid}
11
- .border-bottom{ border-bottom: 1px solid}
12
- .border-gray-50{ border-color: var(--color-gray-50)}
13
- .border-gray-100{ border-color: var(--color-gray-100)}
14
- .border-gray-200{ border-color: var(--color-gray-200)}
15
- .border-gray-300{ border-color: var(--color-gray-300)}
16
-
17
- .flex{display: flex}
18
- .block{display: block}
19
- .d-none{display: none}
20
- .items-center {align-items: center}
21
- .flex-wrap {flex-wrap: wrap}
22
- .justify-center {justify-content: center}
23
- .justify-between {justify-content: space-between}
24
- .justify-end{justify-content: flex-end}
25
- .direction-column{flex-direction: column}
26
- .gap-1{gap: var(--size-step)}
27
- .gap-2{gap: calc(var(--size-step) * 2)}
28
- .gap-3{gap: calc(var(--size-step) * 3)}
29
- .gap-4{gap: calc(var(--size-step) * 4)}
30
- .gap-5{gap: calc(var(--size-step) * 5)}
31
- .gap-6{gap: calc(var(--size-step) * 6)}
32
-
33
- .text-small{font-size: 13px}
34
- .text-14{font-size: 14px}
35
- .text-15{font-size: 15px}
36
- .text-medium{font-size: 16px}
37
- .text-large{font-size: 20px}
38
- .text-extraLarge{font-size: 24px}
39
-
40
- .font-weight-regular{font-weight: var(--font-weight-regular)}
41
- .font-weight-medium{font-weight: var(--font-weight-medium)}
42
- .font-weight-bold{font-weight: var(--font-weight-bold)}
43
-
44
- .text-primary{color: var(--color-primary)}
45
- .text-primary-dark{color: var(--color-primary-dark)}
46
- .text-primary-light{color: var(--color-primary-light)}
47
- .text-primary-opacity{color: var(--color-primary-opacity)}
48
- .text-primary-contrast{color: var(--color-primary-contrast)}
49
- .text-secondary{color: var(--color-secondary)}
50
- .text-secondary-light{color: var(--color-secondary-light)}
51
- .text-secondary-dark{color: var(--color-secondary-dark)}
52
- .text-secondary-opacity{color: var(--color-secondary-opacity)}
53
- .text-secondary-contrast{color: var(--color-secondary-contrast)}
54
- .text-neutral{color: var(--color-neutral)}
55
- .text-neutral-light{color: var(--color-neutral-light)}
56
- .text-neutral-dark{color: var(--color-neutral-dark)}
57
- .text-neutral-opacity{color: var(--color-neutral-opacity)}
58
- .text-neutral-contrast{color: var(--color-neutral-contrast)}
59
- .text-error{color: var(--color-error)}
60
- .text-error-light{color: var(--color-error-light)}
61
- .text-error-dark{color: var(--color-error-dark)}
62
- .text-error-opacity{color: var(--color-error-opacity)}
63
- .text-error-contrast{color: var(--color-error-contrast)}
64
- .text-color-warning{color: var(--color-warning)}
65
- .text-warning-light{color: var(--color-warning-light)}
66
- .text-warning-dark{color: var(--color-warning-dark)}
67
- .text-warning-opacity{color: var(--color-warning-opacity)}
68
- .text-warning-contrast{color: var(--color-warning-contrast)}
69
- .text-info{color: var(--color-info)}
70
- .text-info-light{color: var(--color-info-light)}
71
- .text-info-dark{color: var(--color-info-dark)}
72
- .text-info-opacity{color: var(--color-info-opacity)}
73
- .text-info-contrast{color: var(--color-info-contrast)}
74
- .text-success{color: var(--color-success)}
75
- .text-success-light{color: var(--color-success-light)}
76
- .text-success-dark{color: var(--color-success-dark)}
77
- .text-success-opacity{color: var(--color-success-opacity)}
78
- .text-success-contrast{color: var(--color-success-contrast)}
79
- .text-orange-a700{color: var(--color-orange-a700)}
80
- .text-orange-a400{color: var(--color-orange-a400)}
81
- .text-orange-a200{color: var(--color-orange-a200)}
82
- .text-orange-a100{color: var(--color-orange-a100)}
83
- .text-orange-d2{color: var(--color-orange-d2)}
84
- .text-orange-d1{color: var(--color-orange-d1)}
85
- .text-orange-900{color: var(--color-orange-900)}
86
- .text-orange-800{color: var(--color-orange-800)}
87
- .text-orange-700{color: var(--color-orange-700)}
88
- .text-orange-600{color: var(--color-orange-600)}
89
- .text-orange-500{color: var(--color-orange-500)}
90
- .text-orange-400{color: var(--color-orange-400)}
91
- .text-orange-300{color: var(--color-orange-300)}
92
- .text-orange-200{color: var(--color-orange-200)}
93
- .text-orange-100{color: var(--color-orange-100)}
94
- .text-orange-50{color: var(--color-orange-50)}
95
- .text-blue-a700{color: var(--color-blue-a700)}
96
- .text-blue-a400{color: var(--color-blue-a400)}
97
- .text-blue-a200{color: var(--color-blue-a200)}
98
- .text-blue-a100{color: var(--color-blue-a100)}
99
- .text-blue-d2{color: var(--color-blue-d2)}
100
- .text-blue-d1{color: var(--color-blue-d1)}
101
- .text-blue-900{color: var(--color-blue-900)}
102
- .text-blue-800{color: var(--color-blue-800)}
103
- .text-blue-700{color: var(--color-blue-700)}
104
- .text-blue-600{color: var(--color-blue-600)}
105
- .text-blue-500{color: var(--color-blue-500)}
106
- .text-blue-400{color: var(--color-blue-400)}
107
- .text-blue-300{color: var(--color-blue-300)}
108
- .text-blue-200{color: var(--color-blue-200)}
109
- .text-blue-100{color: var(--color-blue-100)}
110
- .text-blue-50{color: var(--color-blue-50)}
111
- .text-gray-a700{color: var(--color-gray-a700)}
112
- .text-gray-a400{color: var(--color-gray-a400)}
113
- .text-gray-a200{color: var(--color-gray-a200)}
114
- .text-gray-a100{color: var(--color-gray-a100)}
115
- .text-gray-900{color: var(--color-gray-900)}
116
- .text-gray-800{color: var(--color-gray-800)}
117
- .text-gray-700{color: var(--color-gray-700)}
118
- .text-gray-600{color: var(--color-gray-600)}
119
- .text-gray-500{color: var(--color-gray-500)}
120
- .text-gray-400{color: var(--color-gray-400)}
121
- .text-gray-300{color: var(--color-gray-300)}
122
- .text-gray-200{color: var(--color-gray-200)}
123
- .text-gray-100{color: var(--color-gray-100)}
124
- .text-gray-50{color: var(--color-gray-50)}
125
- .text-red-a700{color: var(--color-red-a700)}
126
- .text-red-a400{color: var(--color-red-a400)}
127
- .text-red-a200{color: var(--color-red-a200)}
128
- .text-red-a100{color: var(--color-red-a100)}
129
- .text-red-d2{color: var(--color-red-d2)}
130
- .text-red-d2{color: var(--color-red-d1)}
131
- .text-red-900{color: var(--color-red-900)}
132
- .text-red-800{color: var(--color-red-800)}
133
- .text-red-700{color: var(--color-red-700)}
134
- .text-red-600{color: var(--color-red-600)}
135
- .text-red-500{color: var(--color-red-500)}
136
- .text-red-400{color: var(--color-red-400)}
137
- .text-red-300{color: var(--color-red-300)}
138
- .text-red-200{color: var(--color-red-200)}
139
- .text-red-100{color: var(--color-red-100)}
140
- .text-red-50{color: var(--color-red-50)}
141
- .text-yellow-a700{color: var(--color-yellow-a700)}
142
- .text-yellow-a400{color: var(--color-yellow-a400)}
143
- .text-yellow-a200{color: var(--color-yellow-a200)}
144
- .text-yellow-a100{color: var(--color-yellow-a100)}
145
- .text-yellow-d2{color: var(--color-yellow-d2)}
146
- .text-yellow-d1{color: var(--color-yellow-d1)}
147
- .text-yellow-900{color: var(--color-yellow-900)}
148
- .text-yellow-800{color: var(--color-yellow-800)}
149
- .text-yellow-700{color: var(--color-yellow-700)}
150
- .text-yellow-600{color: var(--color-yellow-600)}
151
- .text-yellow-500{color: var(--color-yellow-500)}
152
- .text-yellow-400{color: var(--color-yellow-400)}
153
- .text-yellow-300{color: var(--color-yellow-300)}
154
- .text-yellow-200{color: var(--color-yellow-200)}
155
- .text-yellow-100{color: var(--color-yellow-100)}
156
- .text-yellow-50{color: var(--color-yellow-50)}
157
- .text-green-a700{color: var(--color-green-a700)}
158
- .text-green-a400{color: var(--color-green-a400)}
159
- .text-green-a200{color: var(--color-green-a200)}
160
- .text-green-a100{color: var(--color-green-a100)}
161
- .text-green-d2{color: var(--color-green-d2)}
162
- .text-green-d1{color: var(--color-green-d1)}
163
- .text-green-900{color: var(--color-green-900)}
164
- .text-green-800{color: var(--color-green-800)}
165
- .text-green-700{color: var(--color-green-700)}
166
- .text-green-600{color: var(--color-green-600)}
167
- .text-green-500{color: var(--color-green-500)}
168
- .text-green-400{color: var(--color-green-400)}
169
- .text-green-300{color: var(--color-green-300)}
170
- .text-green-200{color: var(--color-green-200)}
171
- .text-green-100{color: var(--color-green-100)}
172
- .text-green-50{color: var(--color-green-50)}
173
-
174
- .bg-primary{background-color: var(--color-primary)}
175
- .bg-primary-dark{background-color: var(--color-primary-dark)}
176
- .bg-primary-light{background-color: var(--color-primary-light)}
177
- .bg-primary-opacity{background-color: var(--color-primary-opacity)}
178
- .bg-primary-contrast{background-color: var(--color-primary-contrast)}
179
- .bg-secondary{background-color: var(--color-secondary)}
180
- .bg-secondary-light{background-color: var(--color-secondary-light)}
181
- .bg-secondary-dark{background-color: var(--color-secondary-dark)}
182
- .bg-secondary-opacity{background-color: var(--color-secondary-opacity)}
183
- .bg-secondary-contrast{background-color: var(--color-secondary-contrast)}
184
- .bg-neutral{background-color: var(--color-neutral)}
185
- .bg-neutral-light{background-color: var(--color-neutral-light)}
186
- .bg-neutral-dark{background-color: var(--color-neutral-dark)}
187
- .bg-neutral-opacity{background-color: var(--color-neutral-opacity)}
188
- .bg-neutral-contrast{background-color: var(--color-neutral-contrast)}
189
- .bg-error{background-color: var(--color-error)}
190
- .bg-error-light{background-color: var(--color-error-light)}
191
- .bg-error-dark{background-color: var(--color-error-dark)}
192
- .bg-error-opacity{background-color: var(--color-error-opacity)}
193
- .bg-error-contrast{background-color: var(--color-error-contrast)}
194
- .bg-color-warning{background-color: var(--color-warning)}
195
- .bg-warning-light{background-color: var(--color-warning-light)}
196
- .bg-warning-dark{background-color: var(--color-warning-dark)}
197
- .bg-warning-opacity{background-color: var(--color-warning-opacity)}
198
- .bg-warning-contrast{background-color: var(--color-warning-contrast)}
199
- .bg-info{background-color: var(--color-info)}
200
- .bg-info-light{background-color: var(--color-info-light)}
201
- .bg-info-dark{background-color: var(--color-info-dark)}
202
- .bg-info-opacity{background-color: var(--color-info-opacity)}
203
- .bg-info-contrast{background-color: var(--color-info-contrast)}
204
- .bg-success{background-color: var(--color-success)}
205
- .bg-success-light{background-color: var(--color-success-light)}
206
- .bg-success-dark{background-color: var(--color-success-dark)}
207
- .bg-success-opacity{background-color: var(--color-success-opacity)}
208
- .bg-success-contrast{background-color: var(--color-success-contrast)}
209
- .bg-orange-a700{background-color: var(--color-orange-a700)}
210
- .bg-orange-a400{background-color: var(--color-orange-a400)}
211
- .bg-orange-a200{background-color: var(--color-orange-a200)}
212
- .bg-orange-a100{background-color: var(--color-orange-a100)}
213
- .bg-orange-d2{background-color: var(--color-orange-d2)}
214
- .bg-orange-d1{background-color: var(--color-orange-d1)}
215
- .bg-orange-900{background-color: var(--color-orange-900)}
216
- .bg-orange-800{background-color: var(--color-orange-800)}
217
- .bg-orange-700{background-color: var(--color-orange-700)}
218
- .bg-orange-600{background-color: var(--color-orange-600)}
219
- .bg-orange-500{background-color: var(--color-orange-500)}
220
- .bg-orange-400{background-color: var(--color-orange-400)}
221
- .bg-orange-300{background-color: var(--color-orange-300)}
222
- .bg-orange-200{background-color: var(--color-orange-200)}
223
- .bg-orange-100{background-color: var(--color-orange-100)}
224
- .bg-orange-50{background-color: var(--color-orange-50)}
225
- .bg-blue-a700{background-color: var(--color-blue-a700)}
226
- .bg-blue-a400{background-color: var(--color-blue-a400)}
227
- .bg-blue-a200{background-color: var(--color-blue-a200)}
228
- .bg-blue-a100{background-color: var(--color-blue-a100)}
229
- .bg-blue-d2{background-color: var(--color-blue-d2)}
230
- .bg-blue-d1{background-color: var(--color-blue-d1)}
231
- .bg-blue-900{background-color: var(--color-blue-900)}
232
- .bg-blue-800{background-color: var(--color-blue-800)}
233
- .bg-blue-700{background-color: var(--color-blue-700)}
234
- .bg-blue-600{background-color: var(--color-blue-600)}
235
- .bg-blue-500{background-color: var(--color-blue-500)}
236
- .bg-blue-400{background-color: var(--color-blue-400)}
237
- .bg-blue-300{background-color: var(--color-blue-300)}
238
- .bg-blue-200{background-color: var(--color-blue-200)}
239
- .bg-blue-100{background-color: var(--color-blue-100)}
240
- .bg-blue-50{background-color: var(--color-blue-50)}
241
- .bg-gray-a700{background-color: var(--color-gray-a700)}
242
- .bg-gray-a400{background-color: var(--color-gray-a400)}
243
- .bg-gray-a200{background-color: var(--color-gray-a200)}
244
- .bg-gray-a100{background-color: var(--color-gray-a100)}
245
- .bg-gray-900{background-color: var(--color-gray-900)}
246
- .bg-gray-800{background-color: var(--color-gray-800)}
247
- .bg-gray-700{background-color: var(--color-gray-700)}
248
- .bg-gray-600{background-color: var(--color-gray-600)}
249
- .bg-gray-500{background-color: var(--color-gray-500)}
250
- .bg-gray-400{background-color: var(--color-gray-400)}
251
- .bg-gray-300{background-color: var(--color-gray-300)}
252
- .bg-gray-200{background-color: var(--color-gray-200)}
253
- .bg-gray-100{background-color: var(--color-gray-100)}
254
- .bg-gray-50{background-color: var(--color-gray-50)}
255
- .bg-red-a700{background-color: var(--color-red-a700)}
256
- .bg-red-a400{background-color: var(--color-red-a400)}
257
- .bg-red-a200{background-color: var(--color-red-a200)}
258
- .bg-red-a100{background-color: var(--color-red-a100)}
259
- .bg-red-d2{background-color: var(--color-red-d2)}
260
- .bg-red-d2{background-color: var(--color-red-d1)}
261
- .bg-red-900{background-color: var(--color-red-900)}
262
- .bg-red-800{background-color: var(--color-red-800)}
263
- .bg-red-700{background-color: var(--color-red-700)}
264
- .bg-red-600{background-color: var(--color-red-600)}
265
- .bg-red-500{background-color: var(--color-red-500)}
266
- .bg-red-400{background-color: var(--color-red-400)}
267
- .bg-red-300{background-color: var(--color-red-300)}
268
- .bg-red-200{background-color: var(--color-red-200)}
269
- .bg-red-100{background-color: var(--color-red-100)}
270
- .bg-red-50{background-color: var(--color-red-50)}
271
- .bg-yellow-a700{background-color: var(--color-yellow-a700)}
272
- .bg-yellow-a400{background-color: var(--color-yellow-a400)}
273
- .bg-yellow-a200{background-color: var(--color-yellow-a200)}
274
- .bg-yellow-a100{background-color: var(--color-yellow-a100)}
275
- .bg-yellow-d2{background-color: var(--color-yellow-d2)}
276
- .bg-yellow-d1{background-color: var(--color-yellow-d1)}
277
- .bg-yellow-900{background-color: var(--color-yellow-900)}
278
- .bg-yellow-800{background-color: var(--color-yellow-800)}
279
- .bg-yellow-700{background-color: var(--color-yellow-700)}
280
- .bg-yellow-600{background-color: var(--color-yellow-600)}
281
- .bg-yellow-500{background-color: var(--color-yellow-500)}
282
- .bg-yellow-400{background-color: var(--color-yellow-400)}
283
- .bg-yellow-300{background-color: var(--color-yellow-300)}
284
- .bg-yellow-200{background-color: var(--color-yellow-200)}
285
- .bg-yellow-100{background-color: var(--color-yellow-100)}
286
- .bg-yellow-50{background-color: var(--color-yellow-50)}
287
- .bg-green-a700{background-color: var(--color-green-a700)}
288
- .bg-green-a400{background-color: var(--color-green-a400)}
289
- .bg-green-a200{background-color: var(--color-green-a200)}
290
- .bg-green-a100{background-color: var(--color-green-a100)}
291
- .bg-green-d2{background-color: var(--color-green-d2)}
292
- .bg-green-d1{background-color: var(--color-green-d1)}
293
- .bg-green-900{background-color: var(--color-green-900)}
294
- .bg-green-800{background-color: var(--color-green-800)}
295
- .bg-green-700{background-color: var(--color-green-700)}
296
- .bg-green-600{background-color: var(--color-green-600)}
297
- .bg-green-500{background-color: var(--color-green-500)}
298
- .bg-green-400{background-color: var(--color-green-400)}
299
- .bg-green-300{background-color: var(--color-green-300)}
300
- .bg-green-200{background-color: var(--color-green-200)}
301
- .bg-green-100{background-color: var(--color-green-100)}
302
- .bg-green-50{background-color: var(--color-green-50)}
303
-
304
-
305
-
306
- .mx-auto{margin-left: auto;margin-right: auto}
307
- .m-0{margin: 0}
308
- .m-1{margin:var(--size-step)}
309
- .m-2{margin:calc(var(--size-step) * 2)}
310
- .m-3{margin:calc(var(--size-step) * 3)}
311
- .m-4{margin:calc(var(--size-step) * 4)}
312
- .m-5{margin:calc(var(--size-step) * 5)}
313
- .m-6{margin:calc(var(--size-step) * 6)}
314
-
315
- .mx-0{margin-left:0;margin-right:0}
316
- .mx-1{margin-left:var(--size-step);margin-right:var(--size-step)}
317
- .mx-2{margin-left:calc(var(--size-step) * 2);margin-right:calc(var(--size-step) * 2)}
318
- .mx-3{margin-left:calc(var(--size-step) * 3);margin-right:calc(var(--size-step) * 3)}
319
- .mx-4{margin-left:calc(var(--size-step) * 4);margin-right:calc(var(--size-step) * 4)}
320
- .mx-5{margin-left:calc(var(--size-step) * 5);margin-right:calc(var(--size-step) * 5)}
321
- .mx-6{margin-left:calc(var(--size-step) * 6);margin-right:calc(var(--size-step) * 6)}
322
-
323
- .my-0{margin-top:0;margin-bottom:0}
324
- .my-1{margin-top:var(--size-step);margin-right:var(--size-step)}
325
- .my-2{margin-top:calc(var(--size-step) * 2);margin-bottom:calc(var(--size-step) * 2)}
326
- .my-3{margin-top:calc(var(--size-step) * 3);margin-bottom:calc(var(--size-step) * 3)}
327
- .my-4{margin-top:calc(var(--size-step) * 4);margin-bottom:calc(var(--size-step) * 4)}
328
- .my-5{margin-top:calc(var(--size-step) * 5);margin-bottom:calc(var(--size-step) * 5)}
329
- .my-6{margin-top:calc(var(--size-step) * 6);margin-bottom:calc(var(--size-step) * 6)}
330
-
331
-
332
- .mt-0{margin-top: 0}
333
- .mt-1{margin-top:var(--size-step)}
334
- .mt-2{margin-top:calc(var(--size-step) * 2)}
335
- .mt-3{margin-top:calc(var(--size-step) * 3)}
336
- .mt-4{margin-top:calc(var(--size-step) * 4)}
337
- .mt-5{margin-top:calc(var(--size-step) * 5)}
338
- .mt-6{margin-top:calc(var(--size-step) * 6)}
339
-
340
- .mb-0{margin-bottom:0}
341
- .mb-1{margin-bottom:var(--size-step)}
342
- .mb-2{margin-bottom:calc(var(--size-step) * 2)}
343
- .mb-3{margin-bottom:calc(var(--size-step) * 3)}
344
- .mb-4{margin-bottom:calc(var(--size-step) * 4)}
345
- .mb-5{margin-bottom:calc(var(--size-step) * 5)}
346
- .mb-6{margin-bottom:calc(var(--size-step) * 6)}
347
-
348
- .ml-0{margin-left:0}
349
- .ml-1{margin-left:var(--size-step)}
350
- .ml-2{margin-left:calc(var(--size-step) * 2)}
351
- .ml-3{margin-left:calc(var(--size-step) * 3)}
352
- .ml-4{margin-left:calc(var(--size-step) * 4)}
353
- .ml-5{margin-left:calc(var(--size-step) * 5)}
354
- .ml-6{margin-left:calc(var(--size-step) * 6)}
355
-
356
- .mr-0{margin-right:0}
357
- .mr-1{margin-right:var(--size-step)}
358
- .mr-2{margin-right:calc(var(--size-step) * 2)}
359
- .mr-3{margin-right:calc(var(--size-step) * 3)}
360
- .mr-4{margin-right:calc(var(--size-step) * 4)}
361
- .mr-5{margin-right:calc(var(--size-step) * 5)}
362
- .mr-6{margin-right:calc(var(--size-step) * 6)}
363
-
364
- .p-0{padding:0}
365
- .p-1{padding:var(--size-step)}
366
- .p-2{padding:calc(var(--size-step) * 2)}
367
- .p-3{padding:calc(var(--size-step) * 3)}
368
- .p-4{padding:calc(var(--size-step) * 4)}
369
- .p-5{padding:calc(var(--size-step) * 5)}
370
- .p-6{padding:calc(var(--size-step) * 6)}
371
-
372
- .px-0{padding-left:0;padding-right:0}
373
- .px-1{padding-left:var(--size-step);padding-right:var(--size-step)}
374
- .px-2{padding-left:calc(var(--size-step) * 2);padding-right:calc(var(--size-step) * 2)}
375
- .px-3{padding-left:calc(var(--size-step) * 3);padding-right:calc(var(--size-step) * 3)}
376
- .px-4{padding-left:calc(var(--size-step) * 4);padding-right:calc(var(--size-step) * 4)}
377
- .px-5{padding-left:calc(var(--size-step) * 5);padding-right:calc(var(--size-step) * 5)}
378
- .px-6{padding-left:calc(var(--size-step) * 6);padding-right:calc(var(--size-step) * 6)}
379
-
380
- .py-0{padding-top:0;padding-bottom:0}
381
- .py-1{padding-top:var(--size-step);padding-bottom:var(--size-step)}
382
- .py-2{padding-top:calc(var(--size-step) * 2);padding-bottom:calc(var(--size-step) * 2)}
383
- .py-3{padding-top:calc(var(--size-step) * 3);padding-bottom:calc(var(--size-step) * 3)}
384
- .py-4{padding-top:calc(var(--size-step) * 4);padding-bottom:calc(var(--size-step) * 4)}
385
- .py-5{padding-top:calc(var(--size-step) * 5);padding-bottom:calc(var(--size-step) * 5)}
386
- .py-6{padding-top:calc(var(--size-step) * 6);padding-bottom:calc(var(--size-step) * 6)}
387
-
388
-
389
- .pt-0{padding-top:0}
390
- .pt-1{padding-top:var(--size-step)}
391
- .pt-2{padding-top:calc(var(--size-step) * 2)}
392
- .pt-3{padding-top:calc(var(--size-step) * 3)}
393
- .pt-4{padding-top:calc(var(--size-step) * 4)}
394
- .pt-5{padding-top:calc(var(--size-step) * 5)}
395
- .pt-6{padding-top:calc(var(--size-step) * 6)}
396
-
397
- .pb-0{padding-bottom:0}
398
- .pb-1{padding-bottom:var(--size-step)}
399
- .pb-2{padding-bottom:calc(var(--size-step) * 2)}
400
- .pb-3{padding-bottom:calc(var(--size-step) * 3)}
401
- .pb-4{padding-bottom:calc(var(--size-step) * 4)}
402
- .pb-5{padding-bottom:calc(var(--size-step) * 5)}
403
- .pb-6{padding-bottom:calc(var(--size-step) * 6)}
404
-
405
- .pl-0{padding-left:0}
406
- .pl-1{padding-left:var(--size-step)}
407
- .pl-2{padding-left:calc(var(--size-step) * 2)}
408
- .pl-3{padding-left:calc(var(--size-step) * 3)}
409
- .pl-4{padding-left:calc(var(--size-step) * 4)}
410
- .pl-5{padding-left:calc(var(--size-step) * 5)}
411
- .pl-6{padding-left:calc(var(--size-step) * 6)}
412
-
413
- .pr-0{padding-right:0}
414
- .pr-1{padding-right:var(--size-step)}
415
- .pr-2{padding-right:calc(var(--size-step) * 2)}
416
- .pr-3{padding-right:calc(var(--size-step) * 3)}
417
- .pr-4{padding-right:calc(var(--size-step) * 4)}
418
- .pr-5{padding-right:calc(var(--size-step) * 5)}
419
- .pr-6{padding-right:calc(var(--size-step) * 6)}
420
-
421
- .relative{position: relative}
422
-
1
+
2
+ .border-radius {border-radius: var(--border-radius)}
3
+
4
+ .w-full{width: 100%}
5
+ .h-full{height: 100%}
6
+
7
+ .border{ border: 1px solid}
8
+ .border-left{ border-left: 1px solid}
9
+ .border-right{ border-right: 1px solid}
10
+ .border-top{ border-top: 1px solid}
11
+ .border-bottom{ border-bottom: 1px solid}
12
+ .border-gray-50{ border-color: var(--color-gray-50)}
13
+ .border-gray-100{ border-color: var(--color-gray-100)}
14
+ .border-gray-200{ border-color: var(--color-gray-200)}
15
+ .border-gray-300{ border-color: var(--color-gray-300)}
16
+
17
+ .flex{display: flex}
18
+ .block{display: block}
19
+ .d-none{display: none}
20
+ .items-center {align-items: center}
21
+ .flex-wrap {flex-wrap: wrap}
22
+ .justify-center {justify-content: center}
23
+ .justify-between {justify-content: space-between}
24
+ .justify-end{justify-content: flex-end}
25
+ .direction-column{flex-direction: column}
26
+ .gap-1{gap: var(--size-step)}
27
+ .gap-2{gap: calc(var(--size-step) * 2)}
28
+ .gap-3{gap: calc(var(--size-step) * 3)}
29
+ .gap-4{gap: calc(var(--size-step) * 4)}
30
+ .gap-5{gap: calc(var(--size-step) * 5)}
31
+ .gap-6{gap: calc(var(--size-step) * 6)}
32
+
33
+ .text-small{font-size: 13px}
34
+ .text-14{font-size: 14px}
35
+ .text-15{font-size: 15px}
36
+ .text-medium{font-size: 16px}
37
+ .text-large{font-size: 20px}
38
+ .text-extraLarge{font-size: 24px}
39
+
40
+ .font-weight-regular{font-weight: var(--font-weight-regular)}
41
+ .font-weight-medium{font-weight: var(--font-weight-medium)}
42
+ .font-weight-bold{font-weight: var(--font-weight-bold)}
43
+
44
+ .text-primary{color: var(--color-primary)}
45
+ .text-primary-dark{color: var(--color-primary-dark)}
46
+ .text-primary-light{color: var(--color-primary-light)}
47
+ .text-primary-opacity{color: var(--color-primary-opacity)}
48
+ .text-primary-contrast{color: var(--color-primary-contrast)}
49
+ .text-secondary{color: var(--color-secondary)}
50
+ .text-secondary-light{color: var(--color-secondary-light)}
51
+ .text-secondary-dark{color: var(--color-secondary-dark)}
52
+ .text-secondary-opacity{color: var(--color-secondary-opacity)}
53
+ .text-secondary-contrast{color: var(--color-secondary-contrast)}
54
+ .text-neutral{color: var(--color-neutral)}
55
+ .text-neutral-light{color: var(--color-neutral-light)}
56
+ .text-neutral-dark{color: var(--color-neutral-dark)}
57
+ .text-neutral-opacity{color: var(--color-neutral-opacity)}
58
+ .text-neutral-contrast{color: var(--color-neutral-contrast)}
59
+ .text-error{color: var(--color-error)}
60
+ .text-error-light{color: var(--color-error-light)}
61
+ .text-error-dark{color: var(--color-error-dark)}
62
+ .text-error-opacity{color: var(--color-error-opacity)}
63
+ .text-error-contrast{color: var(--color-error-contrast)}
64
+ .text-color-warning{color: var(--color-warning)}
65
+ .text-warning-light{color: var(--color-warning-light)}
66
+ .text-warning-dark{color: var(--color-warning-dark)}
67
+ .text-warning-opacity{color: var(--color-warning-opacity)}
68
+ .text-warning-contrast{color: var(--color-warning-contrast)}
69
+ .text-info{color: var(--color-info)}
70
+ .text-info-light{color: var(--color-info-light)}
71
+ .text-info-dark{color: var(--color-info-dark)}
72
+ .text-info-opacity{color: var(--color-info-opacity)}
73
+ .text-info-contrast{color: var(--color-info-contrast)}
74
+ .text-success{color: var(--color-success)}
75
+ .text-success-light{color: var(--color-success-light)}
76
+ .text-success-dark{color: var(--color-success-dark)}
77
+ .text-success-opacity{color: var(--color-success-opacity)}
78
+ .text-success-contrast{color: var(--color-success-contrast)}
79
+ .text-orange-a700{color: var(--color-orange-a700)}
80
+ .text-orange-a400{color: var(--color-orange-a400)}
81
+ .text-orange-a200{color: var(--color-orange-a200)}
82
+ .text-orange-a100{color: var(--color-orange-a100)}
83
+ .text-orange-d2{color: var(--color-orange-d2)}
84
+ .text-orange-d1{color: var(--color-orange-d1)}
85
+ .text-orange-900{color: var(--color-orange-900)}
86
+ .text-orange-800{color: var(--color-orange-800)}
87
+ .text-orange-700{color: var(--color-orange-700)}
88
+ .text-orange-600{color: var(--color-orange-600)}
89
+ .text-orange-500{color: var(--color-orange-500)}
90
+ .text-orange-400{color: var(--color-orange-400)}
91
+ .text-orange-300{color: var(--color-orange-300)}
92
+ .text-orange-200{color: var(--color-orange-200)}
93
+ .text-orange-100{color: var(--color-orange-100)}
94
+ .text-orange-50{color: var(--color-orange-50)}
95
+ .text-blue-a700{color: var(--color-blue-a700)}
96
+ .text-blue-a400{color: var(--color-blue-a400)}
97
+ .text-blue-a200{color: var(--color-blue-a200)}
98
+ .text-blue-a100{color: var(--color-blue-a100)}
99
+ .text-blue-d2{color: var(--color-blue-d2)}
100
+ .text-blue-d1{color: var(--color-blue-d1)}
101
+ .text-blue-900{color: var(--color-blue-900)}
102
+ .text-blue-800{color: var(--color-blue-800)}
103
+ .text-blue-700{color: var(--color-blue-700)}
104
+ .text-blue-600{color: var(--color-blue-600)}
105
+ .text-blue-500{color: var(--color-blue-500)}
106
+ .text-blue-400{color: var(--color-blue-400)}
107
+ .text-blue-300{color: var(--color-blue-300)}
108
+ .text-blue-200{color: var(--color-blue-200)}
109
+ .text-blue-100{color: var(--color-blue-100)}
110
+ .text-blue-50{color: var(--color-blue-50)}
111
+ .text-gray-a700{color: var(--color-gray-a700)}
112
+ .text-gray-a400{color: var(--color-gray-a400)}
113
+ .text-gray-a200{color: var(--color-gray-a200)}
114
+ .text-gray-a100{color: var(--color-gray-a100)}
115
+ .text-gray-900{color: var(--color-gray-900)}
116
+ .text-gray-800{color: var(--color-gray-800)}
117
+ .text-gray-700{color: var(--color-gray-700)}
118
+ .text-gray-600{color: var(--color-gray-600)}
119
+ .text-gray-500{color: var(--color-gray-500)}
120
+ .text-gray-400{color: var(--color-gray-400)}
121
+ .text-gray-300{color: var(--color-gray-300)}
122
+ .text-gray-200{color: var(--color-gray-200)}
123
+ .text-gray-100{color: var(--color-gray-100)}
124
+ .text-gray-50{color: var(--color-gray-50)}
125
+ .text-red-a700{color: var(--color-red-a700)}
126
+ .text-red-a400{color: var(--color-red-a400)}
127
+ .text-red-a200{color: var(--color-red-a200)}
128
+ .text-red-a100{color: var(--color-red-a100)}
129
+ .text-red-d2{color: var(--color-red-d2)}
130
+ .text-red-d2{color: var(--color-red-d1)}
131
+ .text-red-900{color: var(--color-red-900)}
132
+ .text-red-800{color: var(--color-red-800)}
133
+ .text-red-700{color: var(--color-red-700)}
134
+ .text-red-600{color: var(--color-red-600)}
135
+ .text-red-500{color: var(--color-red-500)}
136
+ .text-red-400{color: var(--color-red-400)}
137
+ .text-red-300{color: var(--color-red-300)}
138
+ .text-red-200{color: var(--color-red-200)}
139
+ .text-red-100{color: var(--color-red-100)}
140
+ .text-red-50{color: var(--color-red-50)}
141
+ .text-yellow-a700{color: var(--color-yellow-a700)}
142
+ .text-yellow-a400{color: var(--color-yellow-a400)}
143
+ .text-yellow-a200{color: var(--color-yellow-a200)}
144
+ .text-yellow-a100{color: var(--color-yellow-a100)}
145
+ .text-yellow-d2{color: var(--color-yellow-d2)}
146
+ .text-yellow-d1{color: var(--color-yellow-d1)}
147
+ .text-yellow-900{color: var(--color-yellow-900)}
148
+ .text-yellow-800{color: var(--color-yellow-800)}
149
+ .text-yellow-700{color: var(--color-yellow-700)}
150
+ .text-yellow-600{color: var(--color-yellow-600)}
151
+ .text-yellow-500{color: var(--color-yellow-500)}
152
+ .text-yellow-400{color: var(--color-yellow-400)}
153
+ .text-yellow-300{color: var(--color-yellow-300)}
154
+ .text-yellow-200{color: var(--color-yellow-200)}
155
+ .text-yellow-100{color: var(--color-yellow-100)}
156
+ .text-yellow-50{color: var(--color-yellow-50)}
157
+ .text-green-a700{color: var(--color-green-a700)}
158
+ .text-green-a400{color: var(--color-green-a400)}
159
+ .text-green-a200{color: var(--color-green-a200)}
160
+ .text-green-a100{color: var(--color-green-a100)}
161
+ .text-green-d2{color: var(--color-green-d2)}
162
+ .text-green-d1{color: var(--color-green-d1)}
163
+ .text-green-900{color: var(--color-green-900)}
164
+ .text-green-800{color: var(--color-green-800)}
165
+ .text-green-700{color: var(--color-green-700)}
166
+ .text-green-600{color: var(--color-green-600)}
167
+ .text-green-500{color: var(--color-green-500)}
168
+ .text-green-400{color: var(--color-green-400)}
169
+ .text-green-300{color: var(--color-green-300)}
170
+ .text-green-200{color: var(--color-green-200)}
171
+ .text-green-100{color: var(--color-green-100)}
172
+ .text-green-50{color: var(--color-green-50)}
173
+
174
+ .bg-primary{background-color: var(--color-primary)}
175
+ .bg-primary-dark{background-color: var(--color-primary-dark)}
176
+ .bg-primary-light{background-color: var(--color-primary-light)}
177
+ .bg-primary-opacity{background-color: var(--color-primary-opacity)}
178
+ .bg-primary-contrast{background-color: var(--color-primary-contrast)}
179
+ .bg-secondary{background-color: var(--color-secondary)}
180
+ .bg-secondary-light{background-color: var(--color-secondary-light)}
181
+ .bg-secondary-dark{background-color: var(--color-secondary-dark)}
182
+ .bg-secondary-opacity{background-color: var(--color-secondary-opacity)}
183
+ .bg-secondary-contrast{background-color: var(--color-secondary-contrast)}
184
+ .bg-neutral{background-color: var(--color-neutral)}
185
+ .bg-neutral-light{background-color: var(--color-neutral-light)}
186
+ .bg-neutral-dark{background-color: var(--color-neutral-dark)}
187
+ .bg-neutral-opacity{background-color: var(--color-neutral-opacity)}
188
+ .bg-neutral-contrast{background-color: var(--color-neutral-contrast)}
189
+ .bg-error{background-color: var(--color-error)}
190
+ .bg-error-light{background-color: var(--color-error-light)}
191
+ .bg-error-dark{background-color: var(--color-error-dark)}
192
+ .bg-error-opacity{background-color: var(--color-error-opacity)}
193
+ .bg-error-contrast{background-color: var(--color-error-contrast)}
194
+ .bg-color-warning{background-color: var(--color-warning)}
195
+ .bg-warning-light{background-color: var(--color-warning-light)}
196
+ .bg-warning-dark{background-color: var(--color-warning-dark)}
197
+ .bg-warning-opacity{background-color: var(--color-warning-opacity)}
198
+ .bg-warning-contrast{background-color: var(--color-warning-contrast)}
199
+ .bg-info{background-color: var(--color-info)}
200
+ .bg-info-light{background-color: var(--color-info-light)}
201
+ .bg-info-dark{background-color: var(--color-info-dark)}
202
+ .bg-info-opacity{background-color: var(--color-info-opacity)}
203
+ .bg-info-contrast{background-color: var(--color-info-contrast)}
204
+ .bg-success{background-color: var(--color-success)}
205
+ .bg-success-light{background-color: var(--color-success-light)}
206
+ .bg-success-dark{background-color: var(--color-success-dark)}
207
+ .bg-success-opacity{background-color: var(--color-success-opacity)}
208
+ .bg-success-contrast{background-color: var(--color-success-contrast)}
209
+ .bg-orange-a700{background-color: var(--color-orange-a700)}
210
+ .bg-orange-a400{background-color: var(--color-orange-a400)}
211
+ .bg-orange-a200{background-color: var(--color-orange-a200)}
212
+ .bg-orange-a100{background-color: var(--color-orange-a100)}
213
+ .bg-orange-d2{background-color: var(--color-orange-d2)}
214
+ .bg-orange-d1{background-color: var(--color-orange-d1)}
215
+ .bg-orange-900{background-color: var(--color-orange-900)}
216
+ .bg-orange-800{background-color: var(--color-orange-800)}
217
+ .bg-orange-700{background-color: var(--color-orange-700)}
218
+ .bg-orange-600{background-color: var(--color-orange-600)}
219
+ .bg-orange-500{background-color: var(--color-orange-500)}
220
+ .bg-orange-400{background-color: var(--color-orange-400)}
221
+ .bg-orange-300{background-color: var(--color-orange-300)}
222
+ .bg-orange-200{background-color: var(--color-orange-200)}
223
+ .bg-orange-100{background-color: var(--color-orange-100)}
224
+ .bg-orange-50{background-color: var(--color-orange-50)}
225
+ .bg-blue-a700{background-color: var(--color-blue-a700)}
226
+ .bg-blue-a400{background-color: var(--color-blue-a400)}
227
+ .bg-blue-a200{background-color: var(--color-blue-a200)}
228
+ .bg-blue-a100{background-color: var(--color-blue-a100)}
229
+ .bg-blue-d2{background-color: var(--color-blue-d2)}
230
+ .bg-blue-d1{background-color: var(--color-blue-d1)}
231
+ .bg-blue-900{background-color: var(--color-blue-900)}
232
+ .bg-blue-800{background-color: var(--color-blue-800)}
233
+ .bg-blue-700{background-color: var(--color-blue-700)}
234
+ .bg-blue-600{background-color: var(--color-blue-600)}
235
+ .bg-blue-500{background-color: var(--color-blue-500)}
236
+ .bg-blue-400{background-color: var(--color-blue-400)}
237
+ .bg-blue-300{background-color: var(--color-blue-300)}
238
+ .bg-blue-200{background-color: var(--color-blue-200)}
239
+ .bg-blue-100{background-color: var(--color-blue-100)}
240
+ .bg-blue-50{background-color: var(--color-blue-50)}
241
+ .bg-gray-a700{background-color: var(--color-gray-a700)}
242
+ .bg-gray-a400{background-color: var(--color-gray-a400)}
243
+ .bg-gray-a200{background-color: var(--color-gray-a200)}
244
+ .bg-gray-a100{background-color: var(--color-gray-a100)}
245
+ .bg-gray-900{background-color: var(--color-gray-900)}
246
+ .bg-gray-800{background-color: var(--color-gray-800)}
247
+ .bg-gray-700{background-color: var(--color-gray-700)}
248
+ .bg-gray-600{background-color: var(--color-gray-600)}
249
+ .bg-gray-500{background-color: var(--color-gray-500)}
250
+ .bg-gray-400{background-color: var(--color-gray-400)}
251
+ .bg-gray-300{background-color: var(--color-gray-300)}
252
+ .bg-gray-200{background-color: var(--color-gray-200)}
253
+ .bg-gray-100{background-color: var(--color-gray-100)}
254
+ .bg-gray-50{background-color: var(--color-gray-50)}
255
+ .bg-red-a700{background-color: var(--color-red-a700)}
256
+ .bg-red-a400{background-color: var(--color-red-a400)}
257
+ .bg-red-a200{background-color: var(--color-red-a200)}
258
+ .bg-red-a100{background-color: var(--color-red-a100)}
259
+ .bg-red-d2{background-color: var(--color-red-d2)}
260
+ .bg-red-d2{background-color: var(--color-red-d1)}
261
+ .bg-red-900{background-color: var(--color-red-900)}
262
+ .bg-red-800{background-color: var(--color-red-800)}
263
+ .bg-red-700{background-color: var(--color-red-700)}
264
+ .bg-red-600{background-color: var(--color-red-600)}
265
+ .bg-red-500{background-color: var(--color-red-500)}
266
+ .bg-red-400{background-color: var(--color-red-400)}
267
+ .bg-red-300{background-color: var(--color-red-300)}
268
+ .bg-red-200{background-color: var(--color-red-200)}
269
+ .bg-red-100{background-color: var(--color-red-100)}
270
+ .bg-red-50{background-color: var(--color-red-50)}
271
+ .bg-yellow-a700{background-color: var(--color-yellow-a700)}
272
+ .bg-yellow-a400{background-color: var(--color-yellow-a400)}
273
+ .bg-yellow-a200{background-color: var(--color-yellow-a200)}
274
+ .bg-yellow-a100{background-color: var(--color-yellow-a100)}
275
+ .bg-yellow-d2{background-color: var(--color-yellow-d2)}
276
+ .bg-yellow-d1{background-color: var(--color-yellow-d1)}
277
+ .bg-yellow-900{background-color: var(--color-yellow-900)}
278
+ .bg-yellow-800{background-color: var(--color-yellow-800)}
279
+ .bg-yellow-700{background-color: var(--color-yellow-700)}
280
+ .bg-yellow-600{background-color: var(--color-yellow-600)}
281
+ .bg-yellow-500{background-color: var(--color-yellow-500)}
282
+ .bg-yellow-400{background-color: var(--color-yellow-400)}
283
+ .bg-yellow-300{background-color: var(--color-yellow-300)}
284
+ .bg-yellow-200{background-color: var(--color-yellow-200)}
285
+ .bg-yellow-100{background-color: var(--color-yellow-100)}
286
+ .bg-yellow-50{background-color: var(--color-yellow-50)}
287
+ .bg-green-a700{background-color: var(--color-green-a700)}
288
+ .bg-green-a400{background-color: var(--color-green-a400)}
289
+ .bg-green-a200{background-color: var(--color-green-a200)}
290
+ .bg-green-a100{background-color: var(--color-green-a100)}
291
+ .bg-green-d2{background-color: var(--color-green-d2)}
292
+ .bg-green-d1{background-color: var(--color-green-d1)}
293
+ .bg-green-900{background-color: var(--color-green-900)}
294
+ .bg-green-800{background-color: var(--color-green-800)}
295
+ .bg-green-700{background-color: var(--color-green-700)}
296
+ .bg-green-600{background-color: var(--color-green-600)}
297
+ .bg-green-500{background-color: var(--color-green-500)}
298
+ .bg-green-400{background-color: var(--color-green-400)}
299
+ .bg-green-300{background-color: var(--color-green-300)}
300
+ .bg-green-200{background-color: var(--color-green-200)}
301
+ .bg-green-100{background-color: var(--color-green-100)}
302
+ .bg-green-50{background-color: var(--color-green-50)}
303
+
304
+
305
+
306
+ .mx-auto{margin-left: auto;margin-right: auto}
307
+ .m-0{margin: 0}
308
+ .m-1{margin:var(--size-step)}
309
+ .m-2{margin:calc(var(--size-step) * 2)}
310
+ .m-3{margin:calc(var(--size-step) * 3)}
311
+ .m-4{margin:calc(var(--size-step) * 4)}
312
+ .m-5{margin:calc(var(--size-step) * 5)}
313
+ .m-6{margin:calc(var(--size-step) * 6)}
314
+
315
+ .mx-0{margin-left:0;margin-right:0}
316
+ .mx-1{margin-left:var(--size-step);margin-right:var(--size-step)}
317
+ .mx-2{margin-left:calc(var(--size-step) * 2);margin-right:calc(var(--size-step) * 2)}
318
+ .mx-3{margin-left:calc(var(--size-step) * 3);margin-right:calc(var(--size-step) * 3)}
319
+ .mx-4{margin-left:calc(var(--size-step) * 4);margin-right:calc(var(--size-step) * 4)}
320
+ .mx-5{margin-left:calc(var(--size-step) * 5);margin-right:calc(var(--size-step) * 5)}
321
+ .mx-6{margin-left:calc(var(--size-step) * 6);margin-right:calc(var(--size-step) * 6)}
322
+
323
+ .my-0{margin-top:0;margin-bottom:0}
324
+ .my-1{margin-top:var(--size-step);margin-right:var(--size-step)}
325
+ .my-2{margin-top:calc(var(--size-step) * 2);margin-bottom:calc(var(--size-step) * 2)}
326
+ .my-3{margin-top:calc(var(--size-step) * 3);margin-bottom:calc(var(--size-step) * 3)}
327
+ .my-4{margin-top:calc(var(--size-step) * 4);margin-bottom:calc(var(--size-step) * 4)}
328
+ .my-5{margin-top:calc(var(--size-step) * 5);margin-bottom:calc(var(--size-step) * 5)}
329
+ .my-6{margin-top:calc(var(--size-step) * 6);margin-bottom:calc(var(--size-step) * 6)}
330
+
331
+
332
+ .mt-0{margin-top: 0}
333
+ .mt-1{margin-top:var(--size-step)}
334
+ .mt-2{margin-top:calc(var(--size-step) * 2)}
335
+ .mt-3{margin-top:calc(var(--size-step) * 3)}
336
+ .mt-4{margin-top:calc(var(--size-step) * 4)}
337
+ .mt-5{margin-top:calc(var(--size-step) * 5)}
338
+ .mt-6{margin-top:calc(var(--size-step) * 6)}
339
+
340
+ .mb-0{margin-bottom:0}
341
+ .mb-1{margin-bottom:var(--size-step)}
342
+ .mb-2{margin-bottom:calc(var(--size-step) * 2)}
343
+ .mb-3{margin-bottom:calc(var(--size-step) * 3)}
344
+ .mb-4{margin-bottom:calc(var(--size-step) * 4)}
345
+ .mb-5{margin-bottom:calc(var(--size-step) * 5)}
346
+ .mb-6{margin-bottom:calc(var(--size-step) * 6)}
347
+
348
+ .ml-0{margin-left:0}
349
+ .ml-1{margin-left:var(--size-step)}
350
+ .ml-2{margin-left:calc(var(--size-step) * 2)}
351
+ .ml-3{margin-left:calc(var(--size-step) * 3)}
352
+ .ml-4{margin-left:calc(var(--size-step) * 4)}
353
+ .ml-5{margin-left:calc(var(--size-step) * 5)}
354
+ .ml-6{margin-left:calc(var(--size-step) * 6)}
355
+
356
+ .mr-0{margin-right:0}
357
+ .mr-1{margin-right:var(--size-step)}
358
+ .mr-2{margin-right:calc(var(--size-step) * 2)}
359
+ .mr-3{margin-right:calc(var(--size-step) * 3)}
360
+ .mr-4{margin-right:calc(var(--size-step) * 4)}
361
+ .mr-5{margin-right:calc(var(--size-step) * 5)}
362
+ .mr-6{margin-right:calc(var(--size-step) * 6)}
363
+
364
+ .p-0{padding:0}
365
+ .p-1{padding:var(--size-step)}
366
+ .p-2{padding:calc(var(--size-step) * 2)}
367
+ .p-3{padding:calc(var(--size-step) * 3)}
368
+ .p-4{padding:calc(var(--size-step) * 4)}
369
+ .p-5{padding:calc(var(--size-step) * 5)}
370
+ .p-6{padding:calc(var(--size-step) * 6)}
371
+
372
+ .px-0{padding-left:0;padding-right:0}
373
+ .px-1{padding-left:var(--size-step);padding-right:var(--size-step)}
374
+ .px-2{padding-left:calc(var(--size-step) * 2);padding-right:calc(var(--size-step) * 2)}
375
+ .px-3{padding-left:calc(var(--size-step) * 3);padding-right:calc(var(--size-step) * 3)}
376
+ .px-4{padding-left:calc(var(--size-step) * 4);padding-right:calc(var(--size-step) * 4)}
377
+ .px-5{padding-left:calc(var(--size-step) * 5);padding-right:calc(var(--size-step) * 5)}
378
+ .px-6{padding-left:calc(var(--size-step) * 6);padding-right:calc(var(--size-step) * 6)}
379
+
380
+ .py-0{padding-top:0;padding-bottom:0}
381
+ .py-1{padding-top:var(--size-step);padding-bottom:var(--size-step)}
382
+ .py-2{padding-top:calc(var(--size-step) * 2);padding-bottom:calc(var(--size-step) * 2)}
383
+ .py-3{padding-top:calc(var(--size-step) * 3);padding-bottom:calc(var(--size-step) * 3)}
384
+ .py-4{padding-top:calc(var(--size-step) * 4);padding-bottom:calc(var(--size-step) * 4)}
385
+ .py-5{padding-top:calc(var(--size-step) * 5);padding-bottom:calc(var(--size-step) * 5)}
386
+ .py-6{padding-top:calc(var(--size-step) * 6);padding-bottom:calc(var(--size-step) * 6)}
387
+
388
+
389
+ .pt-0{padding-top:0}
390
+ .pt-1{padding-top:var(--size-step)}
391
+ .pt-2{padding-top:calc(var(--size-step) * 2)}
392
+ .pt-3{padding-top:calc(var(--size-step) * 3)}
393
+ .pt-4{padding-top:calc(var(--size-step) * 4)}
394
+ .pt-5{padding-top:calc(var(--size-step) * 5)}
395
+ .pt-6{padding-top:calc(var(--size-step) * 6)}
396
+
397
+ .pb-0{padding-bottom:0}
398
+ .pb-1{padding-bottom:var(--size-step)}
399
+ .pb-2{padding-bottom:calc(var(--size-step) * 2)}
400
+ .pb-3{padding-bottom:calc(var(--size-step) * 3)}
401
+ .pb-4{padding-bottom:calc(var(--size-step) * 4)}
402
+ .pb-5{padding-bottom:calc(var(--size-step) * 5)}
403
+ .pb-6{padding-bottom:calc(var(--size-step) * 6)}
404
+
405
+ .pl-0{padding-left:0}
406
+ .pl-1{padding-left:var(--size-step)}
407
+ .pl-2{padding-left:calc(var(--size-step) * 2)}
408
+ .pl-3{padding-left:calc(var(--size-step) * 3)}
409
+ .pl-4{padding-left:calc(var(--size-step) * 4)}
410
+ .pl-5{padding-left:calc(var(--size-step) * 5)}
411
+ .pl-6{padding-left:calc(var(--size-step) * 6)}
412
+
413
+ .pr-0{padding-right:0}
414
+ .pr-1{padding-right:var(--size-step)}
415
+ .pr-2{padding-right:calc(var(--size-step) * 2)}
416
+ .pr-3{padding-right:calc(var(--size-step) * 3)}
417
+ .pr-4{padding-right:calc(var(--size-step) * 4)}
418
+ .pr-5{padding-right:calc(var(--size-step) * 5)}
419
+ .pr-6{padding-right:calc(var(--size-step) * 6)}
420
+
421
+ .relative{position: relative}
422
+