@vkzstudio/muza-ui 1.0.5 → 1.0.6

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 (17) hide show
  1. package/dist/components/FileUpload/FileItem.d.ts.map +1 -1
  2. package/dist/components/FileUpload/FileItem.js +24 -23
  3. package/dist/components/Icons/CustomIcons.d.ts +3 -0
  4. package/dist/components/Icons/CustomIcons.d.ts.map +1 -1
  5. package/dist/components/Icons/CustomIcons.js +90 -41
  6. package/dist/components/Icons/Icons.stories.d.ts.map +1 -1
  7. package/dist/components/Searchbar/Searchbar.d.ts +3 -2
  8. package/dist/components/Searchbar/Searchbar.d.ts.map +1 -1
  9. package/dist/components/Searchbar/Searchbar.js +30 -29
  10. package/dist/components/Searchbar/Searchbar.stories.d.ts +1 -0
  11. package/dist/components/Searchbar/Searchbar.stories.d.ts.map +1 -1
  12. package/dist/index.js +126 -123
  13. package/dist/muza-ui.css +1 -1
  14. package/dist/styles/token-colors.css +1206 -1199
  15. package/dist/styles/token-sizes.css +680 -680
  16. package/dist/styles/typography.css +84 -84
  17. package/package.json +1 -1
package/dist/styles/token-sizes.css CHANGED
@@ -1,680 +1,680 @@
1
- /* width >= 1024px */
2
- @theme static {
3
- /* number */
4
- --radius-none: var(--spacing-0);
5
- --radius-2xs: var(--spacing-2);
6
- --radius-xs: var(--spacing-4);
7
- --radius-sm: var(--spacing-8);
8
- --radius-md: var(--spacing-12);
9
- --radius-lg: var(--spacing-16);
10
- --radius-xl: var(--spacing-20);
11
- --radius-2xl: var(--spacing-24);
12
- --radius-3xl: var(--spacing-32);
13
- --radius-full: var(--spacing-360);
14
- --spacing-none: var(--spacing-0);
15
- --spacing-3xs: var(--spacing-2);
16
- --spacing-2xs: var(--spacing-4);
17
- --spacing-xs: var(--spacing-6);
18
- --spacing-sm: var(--spacing-8);
19
- --spacing-md: var(--spacing-12);
20
- --spacing-lg: var(--spacing-16);
21
- --spacing-xl: var(--spacing-20);
22
- --spacing-2xl: var(--spacing-24);
23
- --spacing-3xl: var(--spacing-32);
24
- --spacing-4xl: var(--spacing-40);
25
- --spacing-5xl: var(--spacing-48);
26
- --spacing-6xl: var(--spacing-56);
27
- --spacing-7xl: var(--spacing-64);
28
- --spacing-8xl: var(--spacing-72);
29
- --spacing-9xl: var(--spacing-80);
30
- --spacing-10xl: var(--spacing-120);
31
- --spacing-comp-accordion-ico-size-sm: var(--spacing-md);
32
- --spacing-comp-accordion-ico-size-md: var(--spacing-lg);
33
- --spacing-comp-accordion-p-hor: var(--spacing-xl);
34
- --spacing-comp-accordion-ico-size-lg: var(--spacing-2xl);
35
- --spacing-comp-accordion-p: var(--spacing-2xl);
36
- --spacing-comp-accordion-settings-corner-radius: var(--radius-xl);
37
- --spacing-comp-accordion-settings-gap: var(--spacing-2xl);
38
- --spacing-comp-accordion-settings-p: var(--spacing-2xl);
39
- --spacing-comp-admin-header-p-hor: var(--spacing-lg);
40
- --spacing-comp-admin-header-p-ver: var(--spacing-3xl);
41
- --spacing-comp-admin-header-h: var(--spacing-80);
42
- --spacing-comp-alert-gap-sm: var(--spacing-sm);
43
- --spacing-comp-alert-hor-p-sm: var(--spacing-sm);
44
- --spacing-comp-alert-gap-lg: var(--spacing-md);
45
- --spacing-comp-alert-hor-p-lg: var(--spacing-md);
46
- --spacing-comp-alert-ver-p-sm: var(--spacing-lg);
47
- --spacing-comp-alert-ico-size: var(--spacing-xl);
48
- --spacing-comp-alert-ver-p-lg: var(--spacing-xl);
49
- --spacing-comp-attachment-p: var(--spacing-2xl);
50
- --spacing-comp-benefit-card-ico-size: var(--spacing-16);
51
- --spacing-comp-breadcrumb-gap: var(--spacing-sm);
52
- --spacing-comp-breadcrumb-ico-size-sm: var(--spacing-lg);
53
- --spacing-comp-button-p-none: 0px;
54
- --spacing-comp-button-gap: var(--spacing-8);
55
- --spacing-comp-button-p-xxs: var(--spacing-8);
56
- --spacing-comp-button-p-xs: var(--spacing-12);
57
- --spacing-comp-button-p-md: var(--spacing-16);
58
- --spacing-comp-button-p-sm: var(--spacing-24);
59
- --spacing-comp-button-h-xs: var(--spacing-32);
60
- --spacing-comp-button-p-def: var(--spacing-32);
61
- --spacing-comp-button-p-lg: var(--spacing-32);
62
- --spacing-comp-button-w-xs: var(--spacing-32);
63
- --spacing-comp-button-h-sm: var(--spacing-48);
64
- --spacing-comp-button-w-sm: var(--spacing-48);
65
- --spacing-comp-button-h-def: var(--spacing-56);
66
- --spacing-comp-button-w-def: var(--spacing-56);
67
- --spacing-comp-button-h-lg: var(--spacing-64);
68
- --spacing-comp-button-w-lg: var(--spacing-64);
69
- --spacing-comp-button-arrow-bg-size-sm: var(--spacing-3xl);
70
- --spacing-comp-button-arrow-bg-size-def: var(--spacing-4xl);
71
- --spacing-comp-calendar-ico-size: var(--spacing-16);
72
- --spacing-comp-calendar-window-size: var(--spacing-40);
73
- --spacing-comp-card-p-hor: var(--spacing-2xl);
74
- --spacing-comp-card-p-ver: var(--spacing-2xl);
75
- --spacing-comp-card-category-ico-size: var(--spacing-2xl);
76
- --spacing-comp-card-category-p: var(--spacing-3xl);
77
- --spacing-comp-card-category-h: var(--spacing-96);
78
- --spacing-comp-card-dashboard-p: var(--spacing-3xl);
79
- --spacing-comp-card-dashboard-ico-bg-size: var(--spacing-8xl);
80
- --spacing-comp-card-dashboard-p-right: var(--spacing-8xl);
81
- --spacing-comp-carousel-circle-size: var(--spacing-28);
82
- --spacing-comp-checkbox-w-stroke: var(--spacing-1);
83
- --spacing-comp-dialog-p-hor: var(--spacing-2xl);
84
- --spacing-comp-dialog-p: var(--spacing-3xl);
85
- --spacing-comp-dialog-gap: var(--spacing-4xl);
86
- --spacing-comp-dialog-p-hor-overlay: var(--spacing-5xl);
87
- --spacing-comp-dialog-img-h: var(--spacing-64);
88
- --spacing-comp-dialog-img-w: 114px;
89
- --spacing-comp-dialog-w-sm: var(--spacing-400);
90
- --spacing-comp-dialog-w-md: var(--spacing-640);
91
- --spacing-comp-dialog-w-lg: var(--spacing-980);
92
- --spacing-comp-dialog-android-p-ver-sm: var(--spacing-2xs);
93
- --spacing-comp-dialog-android-gap: var(--spacing-sm);
94
- --spacing-comp-dialog-android-p-hor-sm: var(--spacing-sm);
95
- --spacing-comp-dialog-android-p-hor-def: var(--spacing-2xl);
96
- --spacing-comp-dialog-android-p-ver-def: var(--spacing-2xl);
97
- --spacing-comp-empty-state-gap: var(--spacing-2xl);
98
- --spacing-comp-empty-state-ico-size: var(--spacing-48);
99
- --spacing-comp-file-upload-ico-size: var(--spacing-32);
100
- --spacing-comp-header-gap: var(--spacing-lg);
101
- --spacing-comp-header-p-hor-d: var(--spacing-xl);
102
- --spacing-comp-help-button-p: var(--spacing-32);
103
- --spacing-comp-help-button-h: var(--spacing-56);
104
- --spacing-comp-input-gap: var(--spacing-8);
105
- --spacing-comp-input-spacing-pin: var(--spacing-8);
106
- --spacing-comp-input-p-hor: var(--spacing-24);
107
- --spacing-comp-input-h-small: var(--spacing-48);
108
- --spacing-comp-input-h-def: var(--spacing-56);
109
- --spacing-comp-input-h-large: var(--spacing-64);
110
- --spacing-comp-internal-benefits-circle-size: var(--spacing-36);
111
- --spacing-comp-login-circle-size: var(--spacing-80);
112
- --spacing-comp-paggination-size: var(--spacing-3xl);
113
- --spacing-comp-pin-indicator-stroke-width: var(--spacing-1);
114
- --spacing-comp-pin-indicator-size: var(--spacing-12);
115
- --spacing-comp-pin-indicator-gap: var(--spacing-4xl);
116
- --spacing-comp-popup-p: var(--spacing-2xl);
117
- --spacing-comp-quantity-selector-p-hor: var(--spacing-lg);
118
- --spacing-comp-quantity-selector-p-ver: var(--spacing-xl);
119
- --spacing-comp-radio-w-stroke: var(--spacing-1);
120
- --spacing-comp-radio-dot-size: var(--spacing-10);
121
- --spacing-comp-segmented-control-p: var(--spacing-12);
122
- --spacing-comp-segmented-control-max-width-item: var(--spacing-240);
123
- --spacing-comp-segmented-control-max-width: var(--spacing-720);
124
- --spacing-comp-select-p-large: var(--spacing-16);
125
- --spacing-comp-select-p-def: var(--spacing-24);
126
- --spacing-comp-select-h-small: var(--spacing-48);
127
- --spacing-comp-select-h-def: var(--spacing-56);
128
- --spacing-comp-select-h-large: var(--spacing-64);
129
- --spacing-comp-slider-indicator-dot-size: var(--spacing-sm);
130
- --spacing-comp-slider-indicator-gap: var(--spacing-md);
131
- --spacing-comp-stepper-gap: var(--spacing-sm);
132
- --spacing-comp-stepper-btn-size: var(--spacing-2xl);
133
- --spacing-comp-story-gap-content: var(--spacing-6xl);
134
- --spacing-comp-submenu-admin-divider-h: var(--spacing-16);
135
- --spacing-comp-submenu-admin-bg-ico-size: var(--spacing-40);
136
- --spacing-comp-submenu-admin-divider-w: var(--spacing-40);
137
- --spacing-comp-switch-height-def: 0px;
138
- --spacing-comp-tab-bar-gap-sm: var(--spacing-2xs);
139
- --spacing-comp-tab-bar-p-ver-def: var(--spacing-sm);
140
- --spacing-comp-tab-bar-gap-def: var(--spacing-md);
141
- --spacing-comp-tab-bar-p-hor-def: var(--spacing-2xl);
142
- --spacing-comp-table-p: var(--spacing-2xl);
143
- --spacing-comp-table-img-size: var(--spacing-40);
144
- --spacing-comp-table-h: var(--spacing-72);
145
- --spacing-comp-tag-dot-size: var(--spacing-6);
146
- --spacing-comp-tag-ico-size: var(--spacing-16);
147
- --spacing-comp-tag-h-sm: var(--spacing-24);
148
- --spacing-comp-tag-h-def: var(--spacing-32);
149
- --spacing-comp-texteditor-ico-bg-size: var(--spacing-28);
150
- --spacing-comp-time-picker-container-h: var(--spacing-56);
151
- --spacing-comp-view-client-p-hor: var(--spacing-sm);
152
- --spacing-comp-view-client-p-left: var(--spacing-sm);
153
- --spacing-comp-view-client-p-right: var(--spacing-lg);
154
- --spacing-comp-view-client-ico-bg-size: var(--spacing-3xl);
155
- --spacing-comp-view-client-gap: var(--spacing-4xl);
156
- --spacing-comp-view-client-corner-radius: var(--radius-full);
157
- --spacing-icon-xsmall: var(--spacing-16);
158
- --spacing-icon-small: var(--spacing-20);
159
- --spacing-icon-medium: var(--spacing-24);
160
- --spacing-icon-large: var(--spacing-32);
161
- --spacing-icon-xlarge: var(--spacing-56);
162
- --spacing-icon-2xlarge: var(--spacing-64);
163
- --spacing-layout-p-top: var(--spacing-40);
164
- --spacing-layout-gap-web: 96px;
165
- --spacing-layout-gap-standard: 120px;
166
- --spacing-layout-p-bottom: var(--spacing-120);
167
- --spacing-layout-p-standard: var(--spacing-120);
168
- }
169
- /* max 1024px */
170
- @media (width < 64rem) {
171
- :root {
172
- /* number */
173
- --radius-none: var(--spacing-0);
174
- --radius-2xs: var(--spacing-2);
175
- --radius-xs: var(--spacing-4);
176
- --radius-sm: var(--spacing-8);
177
- --radius-md: var(--spacing-12);
178
- --radius-lg: var(--spacing-16);
179
- --radius-2xl: var(--spacing-20);
180
- --radius-xl: var(--spacing-20);
181
- --radius-3xl: var(--spacing-24);
182
- --radius-full: var(--spacing-360);
183
- --spacing-none: var(--spacing-0);
184
- --spacing-3xs: var(--spacing-2);
185
- --spacing-2xs: var(--spacing-4);
186
- --spacing-xs: var(--spacing-6);
187
- --spacing-sm: var(--spacing-8);
188
- --spacing-md: var(--spacing-12);
189
- --spacing-lg: var(--spacing-16);
190
- --spacing-xl: var(--spacing-20);
191
- --spacing-2xl: var(--spacing-24);
192
- --spacing-3xl: var(--spacing-32);
193
- --spacing-4xl: var(--spacing-40);
194
- --spacing-5xl: var(--spacing-48);
195
- --spacing-6xl: var(--spacing-56);
196
- --spacing-7xl: var(--spacing-64);
197
- --spacing-8xl: var(--spacing-72);
198
- --spacing-9xl: var(--spacing-80);
199
- --spacing-10xl: var(--spacing-120);
200
- --spacing-comp-accordion-ico-size-sm: var(--spacing-md);
201
- --spacing-comp-accordion-ico-size-md: var(--spacing-lg);
202
- --spacing-comp-accordion-p-hor: var(--spacing-xl);
203
- --spacing-comp-accordion-ico-size-lg: var(--spacing-2xl);
204
- --spacing-comp-accordion-p: var(--spacing-2xl);
205
- --spacing-comp-accordion-settings-corner-radius: var(--radius-xl);
206
- --spacing-comp-accordion-settings-gap: var(--spacing-2xl);
207
- --spacing-comp-accordion-settings-p: var(--spacing-2xl);
208
- --spacing-comp-admin-header-p-hor: var(--spacing-lg);
209
- --spacing-comp-admin-header-p-ver: var(--spacing-3xl);
210
- --spacing-comp-admin-header-h: var(--spacing-80);
211
- --spacing-comp-alert-gap-sm: var(--spacing-sm);
212
- --spacing-comp-alert-hor-p-sm: var(--spacing-sm);
213
- --spacing-comp-alert-gap-lg: var(--spacing-md);
214
- --spacing-comp-alert-hor-p-lg: var(--spacing-md);
215
- --spacing-comp-alert-ver-p-sm: var(--spacing-lg);
216
- --spacing-comp-alert-ico-size: var(--spacing-xl);
217
- --spacing-comp-alert-ver-p-lg: var(--spacing-xl);
218
- --spacing-comp-attachment-p: var(--spacing-2xl);
219
- --spacing-comp-benefit-card-ico-size: var(--spacing-16);
220
- --spacing-comp-breadcrumb-gap: var(--spacing-sm);
221
- --spacing-comp-breadcrumb-ico-size-sm: var(--spacing-md);
222
- --spacing-comp-button-p-none: 0px;
223
- --spacing-comp-button-gap: var(--spacing-8);
224
- --spacing-comp-button-p-xxs: var(--spacing-8);
225
- --spacing-comp-button-p-xs: var(--spacing-12);
226
- --spacing-comp-button-p-md: var(--spacing-16);
227
- --spacing-comp-button-p-sm: var(--spacing-24);
228
- --spacing-comp-button-h-xs: var(--spacing-32);
229
- --spacing-comp-button-p-def: var(--spacing-32);
230
- --spacing-comp-button-p-lg: var(--spacing-32);
231
- --spacing-comp-button-w-xs: var(--spacing-32);
232
- --spacing-comp-button-h-sm: var(--spacing-48);
233
- --spacing-comp-button-w-sm: var(--spacing-48);
234
- --spacing-comp-button-h-def: var(--spacing-56);
235
- --spacing-comp-button-w-def: var(--spacing-56);
236
- --spacing-comp-button-h-lg: var(--spacing-64);
237
- --spacing-comp-button-w-lg: var(--spacing-64);
238
- --spacing-comp-button-arrow-bg-size-sm: var(--spacing-3xl);
239
- --spacing-comp-button-arrow-bg-size-def: var(--spacing-4xl);
240
- --spacing-comp-calendar-ico-size: var(--spacing-16);
241
- --spacing-comp-calendar-window-size: var(--spacing-40);
242
- --spacing-comp-card-p-hor: var(--spacing-2xl);
243
- --spacing-comp-card-p-ver: var(--spacing-2xl);
244
- --spacing-comp-card-category-ico-size: var(--spacing-2xl);
245
- --spacing-comp-card-category-p: var(--spacing-2xl);
246
- --spacing-comp-card-category-h: var(--spacing-96);
247
- --spacing-comp-card-dashboard-p: var(--spacing-3xl);
248
- --spacing-comp-card-dashboard-p-right: var(--spacing-3xl);
249
- --spacing-comp-card-dashboard-ico-bg-size: var(--spacing-7xl);
250
- --spacing-comp-carousel-circle-size: var(--spacing-28);
251
- --spacing-comp-checkbox-w-stroke: var(--spacing-1);
252
- --spacing-comp-dialog-p-hor: var(--spacing-2xl);
253
- --spacing-comp-dialog-p: var(--spacing-3xl);
254
- --spacing-comp-dialog-gap: var(--spacing-4xl);
255
- --spacing-comp-dialog-p-hor-overlay: var(--spacing-5xl);
256
- --spacing-comp-dialog-img-h: var(--spacing-64);
257
- --spacing-comp-dialog-img-w: 114px;
258
- --spacing-comp-dialog-w-sm: var(--spacing-400);
259
- --spacing-comp-dialog-w-lg: var(--spacing-640);
260
- --spacing-comp-dialog-w-md: var(--spacing-640);
261
- --spacing-comp-dialog-android-p-ver-sm: var(--spacing-2xs);
262
- --spacing-comp-dialog-android-gap: var(--spacing-sm);
263
- --spacing-comp-dialog-android-p-hor-sm: var(--spacing-sm);
264
- --spacing-comp-dialog-android-p-hor-def: var(--spacing-2xl);
265
- --spacing-comp-dialog-android-p-ver-def: var(--spacing-2xl);
266
- --spacing-comp-empty-state-gap: var(--spacing-2xl);
267
- --spacing-comp-empty-state-ico-size: var(--spacing-48);
268
- --spacing-comp-file-upload-ico-size: var(--spacing-32);
269
- --spacing-comp-header-gap: var(--spacing-lg);
270
- --spacing-comp-header-p-hor-d: var(--spacing-xl);
271
- --spacing-comp-help-button-p: var(--spacing-24);
272
- --spacing-comp-help-button-h: var(--spacing-56);
273
- --spacing-comp-input-gap: var(--spacing-8);
274
- --spacing-comp-input-spacing-pin: var(--spacing-8);
275
- --spacing-comp-input-p-hor: var(--spacing-24);
276
- --spacing-comp-input-h-small: var(--spacing-48);
277
- --spacing-comp-input-h-def: var(--spacing-56);
278
- --spacing-comp-input-h-large: var(--spacing-64);
279
- --spacing-comp-internal-benefits-circle-size: var(--spacing-36);
280
- --spacing-comp-login-circle-size: var(--spacing-80);
281
- --spacing-comp-paggination-size: var(--spacing-3xl);
282
- --spacing-comp-pin-indicator-stroke-width: var(--spacing-1);
283
- --spacing-comp-pin-indicator-size: var(--spacing-12);
284
- --spacing-comp-pin-indicator-gap: var(--spacing-4xl);
285
- --spacing-comp-popup-p: var(--spacing-2xl);
286
- --spacing-comp-quantity-selector-p-hor: var(--spacing-lg);
287
- --spacing-comp-quantity-selector-p-ver: var(--spacing-xl);
288
- --spacing-comp-radio-w-stroke: var(--spacing-1);
289
- --spacing-comp-radio-dot-size: var(--spacing-10);
290
- --spacing-comp-segmented-control-p: var(--spacing-12);
291
- --spacing-comp-segmented-control-max-width-item: var(--spacing-240);
292
- --spacing-comp-segmented-control-max-width: var(--spacing-720);
293
- --spacing-comp-select-p-large: var(--spacing-16);
294
- --spacing-comp-select-p-def: var(--spacing-24);
295
- --spacing-comp-select-h-small: var(--spacing-48);
296
- --spacing-comp-select-h-def: var(--spacing-56);
297
- --spacing-comp-select-h-large: var(--spacing-64);
298
- --spacing-comp-slider-indicator-dot-size: var(--spacing-sm);
299
- --spacing-comp-slider-indicator-gap: var(--spacing-md);
300
- --spacing-comp-stepper-gap: var(--spacing-sm);
301
- --spacing-comp-stepper-btn-size: var(--spacing-2xl);
302
- --spacing-comp-story-gap-content: var(--spacing-sm);
303
- --spacing-comp-submenu-admin-divider-h: var(--spacing-16);
304
- --spacing-comp-submenu-admin-bg-ico-size: var(--spacing-40);
305
- --spacing-comp-submenu-admin-divider-w: var(--spacing-40);
306
- --spacing-comp-switch-height-def: 0px;
307
- --spacing-comp-tab-bar-gap-sm: var(--spacing-2xs);
308
- --spacing-comp-tab-bar-p-ver-def: var(--spacing-sm);
309
- --spacing-comp-tab-bar-gap-def: var(--spacing-md);
310
- --spacing-comp-tab-bar-p-hor-def: var(--spacing-2xl);
311
- --spacing-comp-table-p: var(--spacing-2xl);
312
- --spacing-comp-table-img-size: var(--spacing-40);
313
- --spacing-comp-table-h: var(--spacing-72);
314
- --spacing-comp-tag-dot-size: var(--spacing-6);
315
- --spacing-comp-tag-ico-size: var(--spacing-16);
316
- --spacing-comp-tag-h-sm: var(--spacing-24);
317
- --spacing-comp-tag-h-def: var(--spacing-32);
318
- --spacing-comp-texteditor-ico-bg-size: var(--spacing-28);
319
- --spacing-comp-time-picker-container-h: var(--spacing-56);
320
- --spacing-comp-view-client-p-hor: var(--spacing-md);
321
- --spacing-comp-view-client-p-right: var(--spacing-md);
322
- --spacing-comp-view-client-p-left: var(--spacing-lg);
323
- --spacing-comp-view-client-corner-radius: var(--radius-3xl);
324
- --spacing-comp-view-client-ico-bg-size: var(--spacing-3xl);
325
- --spacing-comp-view-client-gap: var(--spacing-4xl);
326
- --spacing-icon-xsmall: var(--spacing-16);
327
- --spacing-icon-medium: var(--spacing-20);
328
- --spacing-icon-small: var(--spacing-20);
329
- --spacing-icon-large: var(--spacing-24);
330
- --spacing-icon-xlarge: var(--spacing-48);
331
- --spacing-icon-2xlarge: var(--spacing-56);
332
- --spacing-layout-p-top: var(--spacing-40);
333
- --spacing-layout-p-standard: var(--spacing-48);
334
- --spacing-layout-gap-web: 64px;
335
- --spacing-layout-gap-standard: 112px;
336
- --spacing-layout-p-bottom: var(--spacing-120);
337
- }
338
- }
339
-
340
- /* max 768px */
341
- @media (width < 48rem) {
342
- :root {
343
- /* number */
344
- --radius-none: var(--spacing-0);
345
- --radius-2xs: var(--spacing-2);
346
- --radius-xs: var(--spacing-4);
347
- --radius-sm: var(--spacing-8);
348
- --radius-md: var(--spacing-12);
349
- --radius-lg: var(--spacing-16);
350
- --radius-2xl: var(--spacing-20);
351
- --radius-xl: var(--spacing-20);
352
- --radius-3xl: var(--spacing-24);
353
- --radius-full: var(--spacing-360);
354
- --spacing-none: var(--spacing-0);
355
- --spacing-3xs: var(--spacing-2);
356
- --spacing-2xs: var(--spacing-4);
357
- --spacing-xs: var(--spacing-6);
358
- --spacing-sm: var(--spacing-8);
359
- --spacing-md: var(--spacing-12);
360
- --spacing-lg: var(--spacing-16);
361
- --spacing-xl: var(--spacing-20);
362
- --spacing-2xl: var(--spacing-24);
363
- --spacing-3xl: var(--spacing-32);
364
- --spacing-4xl: var(--spacing-40);
365
- --spacing-5xl: var(--spacing-48);
366
- --spacing-6xl: var(--spacing-56);
367
- --spacing-7xl: var(--spacing-64);
368
- --spacing-8xl: var(--spacing-72);
369
- --spacing-9xl: var(--spacing-80);
370
- --spacing-10xl: var(--spacing-120);
371
- --spacing-comp-accordion-ico-size-sm: var(--spacing-md);
372
- --spacing-comp-accordion-ico-size-md: var(--spacing-lg);
373
- --spacing-comp-accordion-p: var(--spacing-lg);
374
- --spacing-comp-accordion-p-hor: var(--spacing-lg);
375
- --spacing-comp-accordion-ico-size-lg: var(--spacing-2xl);
376
- --spacing-comp-accordion-settings-p: var(--spacing-lg);
377
- --spacing-comp-accordion-settings-corner-radius: var(--radius-xl);
378
- --spacing-comp-accordion-settings-gap: var(--spacing-2xl);
379
- --spacing-comp-admin-header-p-hor: var(--spacing-lg);
380
- --spacing-comp-admin-header-p-ver: var(--spacing-3xl);
381
- --spacing-comp-admin-header-h: var(--spacing-80);
382
- --spacing-comp-alert-gap-sm: var(--spacing-sm);
383
- --spacing-comp-alert-hor-p-sm: var(--spacing-sm);
384
- --spacing-comp-alert-gap-lg: var(--spacing-md);
385
- --spacing-comp-alert-hor-p-lg: var(--spacing-md);
386
- --spacing-comp-alert-ver-p-sm: var(--spacing-lg);
387
- --spacing-comp-alert-ico-size: var(--spacing-xl);
388
- --spacing-comp-alert-ver-p-lg: var(--spacing-xl);
389
- --spacing-comp-attachment-p: var(--spacing-xl);
390
- --spacing-comp-benefit-card-ico-size: var(--spacing-16);
391
- --spacing-comp-breadcrumb-gap: var(--spacing-sm);
392
- --spacing-comp-breadcrumb-ico-size-sm: var(--spacing-md);
393
- --spacing-comp-button-p-none: 0px;
394
- --spacing-comp-button-gap: var(--spacing-8);
395
- --spacing-comp-button-p-xxs: var(--spacing-8);
396
- --spacing-comp-button-p-xs: var(--spacing-12);
397
- --spacing-comp-button-p-md: var(--spacing-16);
398
- --spacing-comp-button-p-sm: var(--spacing-20);
399
- --spacing-comp-button-h-xs: var(--spacing-32);
400
- --spacing-comp-button-p-def: var(--spacing-32);
401
- --spacing-comp-button-p-lg: var(--spacing-32);
402
- --spacing-comp-button-w-xs: var(--spacing-32);
403
- --spacing-comp-button-h-sm: var(--spacing-48);
404
- --spacing-comp-button-w-sm: var(--spacing-48);
405
- --spacing-comp-button-h-def: var(--spacing-56);
406
- --spacing-comp-button-w-def: var(--spacing-56);
407
- --spacing-comp-button-h-lg: var(--spacing-64);
408
- --spacing-comp-button-w-lg: var(--spacing-64);
409
- --spacing-comp-button-arrow-bg-size-sm: var(--spacing-3xl);
410
- --spacing-comp-button-arrow-bg-size-def: var(--spacing-4xl);
411
- --spacing-comp-calendar-ico-size: var(--spacing-16);
412
- --spacing-comp-calendar-window-size: var(--spacing-40);
413
- --spacing-comp-card-p-ver: var(--spacing-lg);
414
- --spacing-comp-card-p-hor: var(--spacing-xl);
415
- --spacing-comp-card-category-ico-size: var(--spacing-2xl);
416
- --spacing-comp-card-category-p: var(--spacing-2xl);
417
- --spacing-comp-card-category-h: var(--spacing-96);
418
- --spacing-comp-card-dashboard-p: var(--spacing-2xl);
419
- --spacing-comp-card-dashboard-p-right: var(--spacing-2xl);
420
- --spacing-comp-card-dashboard-ico-bg-size: var(--spacing-6xl);
421
- --spacing-comp-carousel-circle-size: var(--spacing-24);
422
- --spacing-comp-checkbox-w-stroke: var(--spacing-1);
423
- --spacing-comp-dialog-p: var(--spacing-xl);
424
- --spacing-comp-dialog-p-hor-overlay: var(--spacing-xl);
425
- --spacing-comp-dialog-p-hor: var(--spacing-2xl);
426
- --spacing-comp-dialog-gap: var(--spacing-3xl);
427
- --spacing-comp-dialog-img-h: var(--spacing-56);
428
- --spacing-comp-dialog-img-w: 100px;
429
- --spacing-comp-dialog-w-lg: var(--spacing-335);
430
- --spacing-comp-dialog-w-md: var(--spacing-335);
431
- --spacing-comp-dialog-w-sm: var(--spacing-335);
432
- --spacing-comp-dialog-android-p-ver-sm: var(--spacing-2xs);
433
- --spacing-comp-dialog-android-gap: var(--spacing-sm);
434
- --spacing-comp-dialog-android-p-hor-sm: var(--spacing-sm);
435
- --spacing-comp-dialog-android-p-hor-def: var(--spacing-2xl);
436
- --spacing-comp-dialog-android-p-ver-def: var(--spacing-2xl);
437
- --spacing-comp-empty-state-gap: var(--spacing-2xl);
438
- --spacing-comp-empty-state-ico-size: var(--spacing-48);
439
- --spacing-comp-file-upload-ico-size: var(--spacing-32);
440
- --spacing-comp-header-gap: var(--spacing-lg);
441
- --spacing-comp-header-p-hor-d: var(--spacing-xl);
442
- --spacing-comp-help-button-p: var(--spacing-24);
443
- --spacing-comp-help-button-h: var(--spacing-48);
444
- --spacing-comp-input-gap: var(--spacing-8);
445
- --spacing-comp-input-spacing-pin: var(--spacing-8);
446
- --spacing-comp-input-p-hor: var(--spacing-20);
447
- --spacing-comp-input-h-small: var(--spacing-48);
448
- --spacing-comp-input-h-def: var(--spacing-56);
449
- --spacing-comp-input-h-large: var(--spacing-64);
450
- --spacing-comp-internal-benefits-circle-size: var(--spacing-36);
451
- --spacing-comp-login-circle-size: var(--spacing-64);
452
- --spacing-comp-paggination-size: var(--spacing-3xl);
453
- --spacing-comp-pin-indicator-stroke-width: var(--spacing-1);
454
- --spacing-comp-pin-indicator-size: var(--spacing-12);
455
- --spacing-comp-pin-indicator-gap: var(--spacing-4xl);
456
- --spacing-comp-popup-p: var(--spacing-xl);
457
- --spacing-comp-quantity-selector-p-hor: var(--spacing-md);
458
- --spacing-comp-quantity-selector-p-ver: var(--spacing-lg);
459
- --spacing-comp-radio-w-stroke: var(--spacing-1);
460
- --spacing-comp-radio-dot-size: var(--spacing-10);
461
- --spacing-comp-segmented-control-p: var(--spacing-12);
462
- --spacing-comp-segmented-control-max-width-item: var(--spacing-240);
463
- --spacing-comp-segmented-control-max-width: var(--spacing-720);
464
- --spacing-comp-select-p-large: var(--spacing-16);
465
- --spacing-comp-select-p-def: var(--spacing-20);
466
- --spacing-comp-select-h-small: var(--spacing-48);
467
- --spacing-comp-select-h-def: var(--spacing-56);
468
- --spacing-comp-select-h-large: var(--spacing-64);
469
- --spacing-comp-slider-indicator-dot-size: var(--spacing-sm);
470
- --spacing-comp-slider-indicator-gap: var(--spacing-md);
471
- --spacing-comp-stepper-gap: var(--spacing-sm);
472
- --spacing-comp-stepper-btn-size: var(--spacing-3xl);
473
- --spacing-comp-story-gap-content: var(--spacing-sm);
474
- --spacing-comp-submenu-admin-divider-h: var(--spacing-16);
475
- --spacing-comp-submenu-admin-bg-ico-size: var(--spacing-40);
476
- --spacing-comp-submenu-admin-divider-w: var(--spacing-40);
477
- --spacing-comp-switch-height-def: 0px;
478
- --spacing-comp-tab-bar-gap-sm: var(--spacing-2xs);
479
- --spacing-comp-tab-bar-p-ver-def: var(--spacing-sm);
480
- --spacing-comp-tab-bar-gap-def: var(--spacing-md);
481
- --spacing-comp-tab-bar-p-hor-def: var(--spacing-2xl);
482
- --spacing-comp-table-p: var(--spacing-xl);
483
- --spacing-comp-table-img-size: var(--spacing-32);
484
- --spacing-comp-table-h: var(--spacing-72);
485
- --spacing-comp-tag-dot-size: var(--spacing-6);
486
- --spacing-comp-tag-ico-size: var(--spacing-16);
487
- --spacing-comp-tag-h-sm: var(--spacing-24);
488
- --spacing-comp-tag-h-def: var(--spacing-32);
489
- --spacing-comp-texteditor-ico-bg-size: var(--spacing-28);
490
- --spacing-comp-time-picker-container-h: var(--spacing-48);
491
- --spacing-comp-view-client-p-hor: var(--spacing-md);
492
- --spacing-comp-view-client-p-right: var(--spacing-md);
493
- --spacing-comp-view-client-gap: var(--spacing-lg);
494
- --spacing-comp-view-client-p-left: var(--spacing-lg);
495
- --spacing-comp-view-client-corner-radius: var(--radius-3xl);
496
- --spacing-comp-view-client-ico-bg-size: var(--spacing-3xl);
497
- --spacing-icon-xsmall: var(--spacing-16);
498
- --spacing-icon-medium: var(--spacing-20);
499
- --spacing-icon-small: var(--spacing-20);
500
- --spacing-icon-large: var(--spacing-24);
501
- --spacing-icon-xlarge: var(--spacing-48);
502
- --spacing-icon-2xlarge: var(--spacing-56);
503
- --spacing-layout-p-standard: var(--spacing-20);
504
- --spacing-layout-gap-web: 48px;
505
- --spacing-layout-p-top: var(--spacing-56);
506
- --spacing-layout-p-bottom: var(--spacing-80);
507
- --spacing-layout-gap-standard: 96px;
508
- }
509
- }
510
-
511
- /* min 1600px */
512
- @media (width >= 100rem) {
513
- :root {
514
- /* number */
515
- --radius-none: var(--spacing-0);
516
- --radius-2xs: var(--spacing-2);
517
- --radius-xs: var(--spacing-4);
518
- --radius-sm: var(--spacing-8);
519
- --radius-md: var(--spacing-12);
520
- --radius-lg: var(--spacing-16);
521
- --radius-xl: var(--spacing-20);
522
- --radius-2xl: var(--spacing-24);
523
- --radius-3xl: var(--spacing-32);
524
- --radius-full: var(--spacing-360);
525
- --spacing-none: var(--spacing-0);
526
- --spacing-3xs: var(--spacing-2);
527
- --spacing-2xs: var(--spacing-4);
528
- --spacing-xs: var(--spacing-6);
529
- --spacing-sm: var(--spacing-8);
530
- --spacing-md: var(--spacing-12);
531
- --spacing-lg: var(--spacing-16);
532
- --spacing-xl: var(--spacing-20);
533
- --spacing-2xl: var(--spacing-24);
534
- --spacing-3xl: var(--spacing-32);
535
- --spacing-4xl: var(--spacing-40);
536
- --spacing-5xl: var(--spacing-48);
537
- --spacing-6xl: var(--spacing-56);
538
- --spacing-7xl: var(--spacing-64);
539
- --spacing-8xl: var(--spacing-72);
540
- --spacing-9xl: var(--spacing-80);
541
- --spacing-10xl: var(--spacing-120);
542
- --spacing-comp-accordion-ico-size-sm: var(--spacing-md);
543
- --spacing-comp-accordion-ico-size-md: var(--spacing-lg);
544
- --spacing-comp-accordion-p-hor: var(--spacing-xl);
545
- --spacing-comp-accordion-ico-size-lg: var(--spacing-2xl);
546
- --spacing-comp-accordion-p: var(--spacing-2xl);
547
- --spacing-comp-accordion-settings-corner-radius: var(--radius-xl);
548
- --spacing-comp-accordion-settings-gap: var(--spacing-2xl);
549
- --spacing-comp-accordion-settings-p: var(--spacing-2xl);
550
- --spacing-comp-admin-header-p-hor: var(--spacing-lg);
551
- --spacing-comp-admin-header-p-ver: var(--spacing-3xl);
552
- --spacing-comp-admin-header-h: var(--spacing-80);
553
- --spacing-comp-alert-gap-sm: var(--spacing-sm);
554
- --spacing-comp-alert-hor-p-sm: var(--spacing-sm);
555
- --spacing-comp-alert-gap-lg: var(--spacing-md);
556
- --spacing-comp-alert-hor-p-lg: var(--spacing-md);
557
- --spacing-comp-alert-ver-p-sm: var(--spacing-lg);
558
- --spacing-comp-alert-ico-size: var(--spacing-xl);
559
- --spacing-comp-alert-ver-p-lg: var(--spacing-xl);
560
- --spacing-comp-attachment-p: var(--spacing-2xl);
561
- --spacing-comp-benefit-card-ico-size: var(--spacing-16);
562
- --spacing-comp-breadcrumb-gap: var(--spacing-sm);
563
- --spacing-comp-breadcrumb-ico-size-sm: var(--spacing-lg);
564
- --spacing-comp-button-p-none: 0px;
565
- --spacing-comp-button-gap: var(--spacing-8);
566
- --spacing-comp-button-p-xxs: var(--spacing-8);
567
- --spacing-comp-button-p-xs: var(--spacing-12);
568
- --spacing-comp-button-p-md: var(--spacing-16);
569
- --spacing-comp-button-p-sm: var(--spacing-24);
570
- --spacing-comp-button-h-xs: var(--spacing-32);
571
- --spacing-comp-button-p-def: var(--spacing-32);
572
- --spacing-comp-button-p-lg: var(--spacing-32);
573
- --spacing-comp-button-w-xs: var(--spacing-32);
574
- --spacing-comp-button-h-sm: var(--spacing-48);
575
- --spacing-comp-button-w-sm: var(--spacing-48);
576
- --spacing-comp-button-h-def: var(--spacing-56);
577
- --spacing-comp-button-w-def: var(--spacing-56);
578
- --spacing-comp-button-h-lg: var(--spacing-64);
579
- --spacing-comp-button-w-lg: var(--spacing-64);
580
- --spacing-comp-button-arrow-bg-size-sm: var(--spacing-3xl);
581
- --spacing-comp-button-arrow-bg-size-def: var(--spacing-4xl);
582
- --spacing-comp-calendar-ico-size: var(--spacing-16);
583
- --spacing-comp-calendar-window-size: var(--spacing-40);
584
- --spacing-comp-card-p-ver: var(--spacing-2xl);
585
- --spacing-comp-card-p-hor: var(--spacing-3xl);
586
- --spacing-comp-card-category-ico-size: var(--spacing-2xl);
587
- --spacing-comp-card-category-p: var(--spacing-3xl);
588
- --spacing-comp-card-category-h: var(--spacing-96);
589
- --spacing-comp-card-dashboard-p: var(--spacing-3xl);
590
- --spacing-comp-card-dashboard-ico-bg-size: var(--spacing-8xl);
591
- --spacing-comp-card-dashboard-p-right: var(--spacing-8xl);
592
- --spacing-comp-carousel-circle-size: var(--spacing-28);
593
- --spacing-comp-checkbox-w-stroke: var(--spacing-1);
594
- --spacing-comp-dialog-p-hor: var(--spacing-2xl);
595
- --spacing-comp-dialog-p: var(--spacing-3xl);
596
- --spacing-comp-dialog-gap: var(--spacing-4xl);
597
- --spacing-comp-dialog-p-hor-overlay: var(--spacing-5xl);
598
- --spacing-comp-dialog-img-h: var(--spacing-64);
599
- --spacing-comp-dialog-img-w: 114px;
600
- --spacing-comp-dialog-w-sm: var(--spacing-400);
601
- --spacing-comp-dialog-w-md: var(--spacing-640);
602
- --spacing-comp-dialog-w-lg: var(--spacing-980);
603
- --spacing-comp-dialog-android-p-ver-sm: var(--spacing-2xs);
604
- --spacing-comp-dialog-android-gap: var(--spacing-sm);
605
- --spacing-comp-dialog-android-p-hor-sm: var(--spacing-sm);
606
- --spacing-comp-dialog-android-p-hor-def: var(--spacing-2xl);
607
- --spacing-comp-dialog-android-p-ver-def: var(--spacing-2xl);
608
- --spacing-comp-empty-state-gap: var(--spacing-2xl);
609
- --spacing-comp-empty-state-ico-size: var(--spacing-48);
610
- --spacing-comp-file-upload-ico-size: var(--spacing-32);
611
- --spacing-comp-header-gap: var(--spacing-lg);
612
- --spacing-comp-header-p-hor-d: var(--spacing-xl);
613
- --spacing-comp-help-button-p: var(--spacing-32);
614
- --spacing-comp-help-button-h: var(--spacing-56);
615
- --spacing-comp-input-gap: var(--spacing-8);
616
- --spacing-comp-input-spacing-pin: var(--spacing-8);
617
- --spacing-comp-input-p-hor: var(--spacing-24);
618
- --spacing-comp-input-h-small: var(--spacing-48);
619
- --spacing-comp-input-h-def: var(--spacing-56);
620
- --spacing-comp-input-h-large: var(--spacing-64);
621
- --spacing-comp-internal-benefits-circle-size: var(--spacing-36);
622
- --spacing-comp-login-circle-size: var(--spacing-80);
623
- --spacing-comp-paggination-size: var(--spacing-3xl);
624
- --spacing-comp-pin-indicator-stroke-width: var(--spacing-1);
625
- --spacing-comp-pin-indicator-size: var(--spacing-12);
626
- --spacing-comp-pin-indicator-gap: var(--spacing-4xl);
627
- --spacing-comp-popup-p: var(--spacing-2xl);
628
- --spacing-comp-quantity-selector-p-hor: var(--spacing-md);
629
- --spacing-comp-quantity-selector-p-ver: var(--spacing-lg);
630
- --spacing-comp-radio-w-stroke: var(--spacing-1);
631
- --spacing-comp-radio-dot-size: var(--spacing-10);
632
- --spacing-comp-segmented-control-p: var(--spacing-12);
633
- --spacing-comp-segmented-control-max-width-item: var(--spacing-240);
634
- --spacing-comp-segmented-control-max-width: var(--spacing-720);
635
- --spacing-comp-select-p-large: var(--spacing-16);
636
- --spacing-comp-select-p-def: var(--spacing-24);
637
- --spacing-comp-select-h-small: var(--spacing-48);
638
- --spacing-comp-select-h-def: var(--spacing-56);
639
- --spacing-comp-select-h-large: var(--spacing-64);
640
- --spacing-comp-slider-indicator-dot-size: var(--spacing-sm);
641
- --spacing-comp-slider-indicator-gap: var(--spacing-md);
642
- --spacing-comp-stepper-gap: var(--spacing-sm);
643
- --spacing-comp-stepper-btn-size: var(--spacing-2xl);
644
- --spacing-comp-story-gap-content: var(--spacing-6xl);
645
- --spacing-comp-submenu-admin-divider-h: var(--spacing-16);
646
- --spacing-comp-submenu-admin-bg-ico-size: var(--spacing-40);
647
- --spacing-comp-submenu-admin-divider-w: var(--spacing-40);
648
- --spacing-comp-switch-height-def: 0px;
649
- --spacing-comp-tab-bar-gap-sm: var(--spacing-2xs);
650
- --spacing-comp-tab-bar-p-ver-def: var(--spacing-sm);
651
- --spacing-comp-tab-bar-gap-def: var(--spacing-md);
652
- --spacing-comp-tab-bar-p-hor-def: var(--spacing-2xl);
653
- --spacing-comp-table-p: var(--spacing-2xl);
654
- --spacing-comp-table-img-size: var(--spacing-40);
655
- --spacing-comp-table-h: var(--spacing-72);
656
- --spacing-comp-tag-dot-size: var(--spacing-6);
657
- --spacing-comp-tag-ico-size: var(--spacing-16);
658
- --spacing-comp-tag-h-sm: var(--spacing-24);
659
- --spacing-comp-tag-h-def: var(--spacing-32);
660
- --spacing-comp-texteditor-ico-bg-size: var(--spacing-28);
661
- --spacing-comp-time-picker-container-h: var(--spacing-56);
662
- --spacing-comp-view-client-p-hor: var(--spacing-sm);
663
- --spacing-comp-view-client-p-left: var(--spacing-sm);
664
- --spacing-comp-view-client-p-right: var(--spacing-lg);
665
- --spacing-comp-view-client-ico-bg-size: var(--spacing-3xl);
666
- --spacing-comp-view-client-gap: var(--spacing-4xl);
667
- --spacing-comp-view-client-corner-radius: var(--radius-full);
668
- --spacing-icon-xsmall: var(--spacing-16);
669
- --spacing-icon-small: var(--spacing-20);
670
- --spacing-icon-medium: var(--spacing-24);
671
- --spacing-icon-large: var(--spacing-32);
672
- --spacing-icon-xlarge: var(--spacing-56);
673
- --spacing-icon-2xlarge: var(--spacing-64);
674
- --spacing-layout-p-standard: var(--spacing-50);
675
- --spacing-layout-p-top: var(--spacing-56);
676
- --spacing-layout-gap-web: 96px;
677
- --spacing-layout-gap-standard: 120px;
678
- --spacing-layout-p-bottom: var(--spacing-120);
679
- }
680
- }
1
+ /* width >= 1024px */
2
+ @theme static {
3
+ /* number */
4
+ --radius-none: var(--spacing-0);
5
+ --radius-2xs: var(--spacing-2);
6
+ --radius-xs: var(--spacing-4);
7
+ --radius-sm: var(--spacing-8);
8
+ --radius-md: var(--spacing-12);
9
+ --radius-lg: var(--spacing-16);
10
+ --radius-xl: var(--spacing-20);
11
+ --radius-2xl: var(--spacing-24);
12
+ --radius-3xl: var(--spacing-32);
13
+ --radius-full: var(--spacing-360);
14
+ --spacing-none: var(--spacing-0);
15
+ --spacing-3xs: var(--spacing-2);
16
+ --spacing-2xs: var(--spacing-4);
17
+ --spacing-xs: var(--spacing-6);
18
+ --spacing-sm: var(--spacing-8);
19
+ --spacing-md: var(--spacing-12);
20
+ --spacing-lg: var(--spacing-16);
21
+ --spacing-xl: var(--spacing-20);
22
+ --spacing-2xl: var(--spacing-24);
23
+ --spacing-3xl: var(--spacing-32);
24
+ --spacing-4xl: var(--spacing-40);
25
+ --spacing-5xl: var(--spacing-48);
26
+ --spacing-6xl: var(--spacing-56);
27
+ --spacing-7xl: var(--spacing-64);
28
+ --spacing-8xl: var(--spacing-72);
29
+ --spacing-9xl: var(--spacing-80);
30
+ --spacing-10xl: var(--spacing-120);
31
+ --spacing-comp-accordion-ico-size-sm: var(--spacing-md);
32
+ --spacing-comp-accordion-ico-size-md: var(--spacing-lg);
33
+ --spacing-comp-accordion-p-hor: var(--spacing-xl);
34
+ --spacing-comp-accordion-ico-size-lg: var(--spacing-2xl);
35
+ --spacing-comp-accordion-p: var(--spacing-2xl);
36
+ --spacing-comp-accordion-settings-corner-radius: var(--radius-xl);
37
+ --spacing-comp-accordion-settings-gap: var(--spacing-2xl);
38
+ --spacing-comp-accordion-settings-p: var(--spacing-2xl);
39
+ --spacing-comp-admin-header-p-hor: var(--spacing-lg);
40
+ --spacing-comp-admin-header-p-ver: var(--spacing-3xl);
41
+ --spacing-comp-admin-header-h: var(--spacing-80);
42
+ --spacing-comp-alert-gap-sm: var(--spacing-sm);
43
+ --spacing-comp-alert-hor-p-sm: var(--spacing-sm);
44
+ --spacing-comp-alert-gap-lg: var(--spacing-md);
45
+ --spacing-comp-alert-hor-p-lg: var(--spacing-md);
46
+ --spacing-comp-alert-ver-p-sm: var(--spacing-lg);
47
+ --spacing-comp-alert-ico-size: var(--spacing-xl);
48
+ --spacing-comp-alert-ver-p-lg: var(--spacing-xl);
49
+ --spacing-comp-attachment-p: var(--spacing-2xl);
50
+ --spacing-comp-benefit-card-ico-size: var(--spacing-16);
51
+ --spacing-comp-breadcrumb-gap: var(--spacing-sm);
52
+ --spacing-comp-breadcrumb-ico-size-sm: var(--spacing-lg);
53
+ --spacing-comp-button-p-none: 0px;
54
+ --spacing-comp-button-gap: var(--spacing-8);
55
+ --spacing-comp-button-p-xxs: var(--spacing-8);
56
+ --spacing-comp-button-p-xs: var(--spacing-12);
57
+ --spacing-comp-button-p-md: var(--spacing-16);
58
+ --spacing-comp-button-p-sm: var(--spacing-24);
59
+ --spacing-comp-button-h-xs: var(--spacing-32);
60
+ --spacing-comp-button-p-def: var(--spacing-32);
61
+ --spacing-comp-button-p-lg: var(--spacing-32);
62
+ --spacing-comp-button-w-xs: var(--spacing-32);
63
+ --spacing-comp-button-h-sm: var(--spacing-48);
64
+ --spacing-comp-button-w-sm: var(--spacing-48);
65
+ --spacing-comp-button-h-def: var(--spacing-56);
66
+ --spacing-comp-button-w-def: var(--spacing-56);
67
+ --spacing-comp-button-h-lg: var(--spacing-64);
68
+ --spacing-comp-button-w-lg: var(--spacing-64);
69
+ --spacing-comp-button-arrow-bg-size-sm: var(--spacing-3xl);
70
+ --spacing-comp-button-arrow-bg-size-def: var(--spacing-4xl);
71
+ --spacing-comp-calendar-ico-size: var(--spacing-16);
72
+ --spacing-comp-calendar-window-size: var(--spacing-40);
73
+ --spacing-comp-card-p-hor: var(--spacing-2xl);
74
+ --spacing-comp-card-p-ver: var(--spacing-2xl);
75
+ --spacing-comp-card-category-ico-size: var(--spacing-2xl);
76
+ --spacing-comp-card-category-p: var(--spacing-3xl);
77
+ --spacing-comp-card-category-h: var(--spacing-96);
78
+ --spacing-comp-card-dashboard-p: var(--spacing-3xl);
79
+ --spacing-comp-card-dashboard-ico-bg-size: var(--spacing-8xl);
80
+ --spacing-comp-card-dashboard-p-right: var(--spacing-8xl);
81
+ --spacing-comp-carousel-circle-size: var(--spacing-28);
82
+ --spacing-comp-checkbox-w-stroke: var(--spacing-1);
83
+ --spacing-comp-dialog-p-hor: var(--spacing-2xl);
84
+ --spacing-comp-dialog-p: var(--spacing-3xl);
85
+ --spacing-comp-dialog-gap: var(--spacing-4xl);
86
+ --spacing-comp-dialog-p-hor-overlay: var(--spacing-5xl);
87
+ --spacing-comp-dialog-img-h: var(--spacing-64);
88
+ --spacing-comp-dialog-img-w: 114px;
89
+ --spacing-comp-dialog-w-sm: var(--spacing-400);
90
+ --spacing-comp-dialog-w-md: var(--spacing-640);
91
+ --spacing-comp-dialog-w-lg: var(--spacing-980);
92
+ --spacing-comp-dialog-android-p-ver-sm: var(--spacing-2xs);
93
+ --spacing-comp-dialog-android-gap: var(--spacing-sm);
94
+ --spacing-comp-dialog-android-p-hor-sm: var(--spacing-sm);
95
+ --spacing-comp-dialog-android-p-hor-def: var(--spacing-2xl);
96
+ --spacing-comp-dialog-android-p-ver-def: var(--spacing-2xl);
97
+ --spacing-comp-empty-state-gap: var(--spacing-2xl);
98
+ --spacing-comp-empty-state-ico-size: var(--spacing-48);
99
+ --spacing-comp-file-upload-ico-size: var(--spacing-32);
100
+ --spacing-comp-header-gap: var(--spacing-lg);
101
+ --spacing-comp-header-p-hor-d: var(--spacing-xl);
102
+ --spacing-comp-help-button-p: var(--spacing-32);
103
+ --spacing-comp-help-button-h: var(--spacing-56);
104
+ --spacing-comp-input-gap: var(--spacing-8);
105
+ --spacing-comp-input-spacing-pin: var(--spacing-8);
106
+ --spacing-comp-input-p-hor: var(--spacing-24);
107
+ --spacing-comp-input-h-small: var(--spacing-48);
108
+ --spacing-comp-input-h-def: var(--spacing-56);
109
+ --spacing-comp-input-h-large: var(--spacing-64);
110
+ --spacing-comp-internal-benefits-circle-size: var(--spacing-36);
111
+ --spacing-comp-login-circle-size: var(--spacing-80);
112
+ --spacing-comp-paggination-size: var(--spacing-3xl);
113
+ --spacing-comp-pin-indicator-stroke-width: var(--spacing-1);
114
+ --spacing-comp-pin-indicator-size: var(--spacing-12);
115
+ --spacing-comp-pin-indicator-gap: var(--spacing-4xl);
116
+ --spacing-comp-popup-p: var(--spacing-2xl);
117
+ --spacing-comp-quantity-selector-p-hor: var(--spacing-lg);
118
+ --spacing-comp-quantity-selector-p-ver: var(--spacing-xl);
119
+ --spacing-comp-radio-w-stroke: var(--spacing-1);
120
+ --spacing-comp-radio-dot-size: var(--spacing-10);
121
+ --spacing-comp-segmented-control-p: var(--spacing-12);
122
+ --spacing-comp-segmented-control-max-width-item: var(--spacing-240);
123
+ --spacing-comp-segmented-control-max-width: var(--spacing-720);
124
+ --spacing-comp-select-p-large: var(--spacing-16);
125
+ --spacing-comp-select-p-def: var(--spacing-24);
126
+ --spacing-comp-select-h-small: var(--spacing-48);
127
+ --spacing-comp-select-h-def: var(--spacing-56);
128
+ --spacing-comp-select-h-large: var(--spacing-64);
129
+ --spacing-comp-slider-indicator-dot-size: var(--spacing-sm);
130
+ --spacing-comp-slider-indicator-gap: var(--spacing-md);
131
+ --spacing-comp-stepper-gap: var(--spacing-sm);
132
+ --spacing-comp-stepper-btn-size: var(--spacing-2xl);
133
+ --spacing-comp-story-gap-content: var(--spacing-6xl);
134
+ --spacing-comp-submenu-admin-divider-h: var(--spacing-16);
135
+ --spacing-comp-submenu-admin-bg-ico-size: var(--spacing-40);
136
+ --spacing-comp-submenu-admin-divider-w: var(--spacing-40);
137
+ --spacing-comp-switch-height-def: 0px;
138
+ --spacing-comp-tab-bar-gap-sm: var(--spacing-2xs);
139
+ --spacing-comp-tab-bar-p-ver-def: var(--spacing-sm);
140
+ --spacing-comp-tab-bar-gap-def: var(--spacing-md);
141
+ --spacing-comp-tab-bar-p-hor-def: var(--spacing-2xl);
142
+ --spacing-comp-table-p: var(--spacing-2xl);
143
+ --spacing-comp-table-img-size: var(--spacing-40);
144
+ --spacing-comp-table-h: var(--spacing-72);
145
+ --spacing-comp-tag-dot-size: var(--spacing-6);
146
+ --spacing-comp-tag-ico-size: var(--spacing-16);
147
+ --spacing-comp-tag-h-sm: var(--spacing-24);
148
+ --spacing-comp-tag-h-def: var(--spacing-32);
149
+ --spacing-comp-texteditor-ico-bg-size: var(--spacing-28);
150
+ --spacing-comp-time-picker-container-h: var(--spacing-56);
151
+ --spacing-comp-view-client-p-hor: var(--spacing-sm);
152
+ --spacing-comp-view-client-p-left: var(--spacing-sm);
153
+ --spacing-comp-view-client-p-right: var(--spacing-lg);
154
+ --spacing-comp-view-client-ico-bg-size: var(--spacing-3xl);
155
+ --spacing-comp-view-client-gap: var(--spacing-4xl);
156
+ --spacing-comp-view-client-corner-radius: var(--radius-full);
157
+ --spacing-icon-xsmall: var(--spacing-16);
158
+ --spacing-icon-small: var(--spacing-20);
159
+ --spacing-icon-medium: var(--spacing-24);
160
+ --spacing-icon-large: var(--spacing-32);
161
+ --spacing-icon-xlarge: var(--spacing-56);
162
+ --spacing-icon-2xlarge: var(--spacing-64);
163
+ --spacing-layout-p-top: var(--spacing-40);
164
+ --spacing-layout-gap-web: 96px;
165
+ --spacing-layout-gap-standard: 120px;
166
+ --spacing-layout-p-bottom: var(--spacing-120);
167
+ --spacing-layout-p-standard: var(--spacing-120);
168
+ }
169
+ /* max 1024px */
170
+ @media (width < 64rem) {
171
+ :root {
172
+ /* number */
173
+ --radius-none: var(--spacing-0);
174
+ --radius-2xs: var(--spacing-2);
175
+ --radius-xs: var(--spacing-4);
176
+ --radius-sm: var(--spacing-8);
177
+ --radius-md: var(--spacing-12);
178
+ --radius-lg: var(--spacing-16);
179
+ --radius-2xl: var(--spacing-20);
180
+ --radius-xl: var(--spacing-20);
181
+ --radius-3xl: var(--spacing-24);
182
+ --radius-full: var(--spacing-360);
183
+ --spacing-none: var(--spacing-0);
184
+ --spacing-3xs: var(--spacing-2);
185
+ --spacing-2xs: var(--spacing-4);
186
+ --spacing-xs: var(--spacing-6);
187
+ --spacing-sm: var(--spacing-8);
188
+ --spacing-md: var(--spacing-12);
189
+ --spacing-lg: var(--spacing-16);
190
+ --spacing-xl: var(--spacing-20);
191
+ --spacing-2xl: var(--spacing-24);
192
+ --spacing-3xl: var(--spacing-32);
193
+ --spacing-4xl: var(--spacing-40);
194
+ --spacing-5xl: var(--spacing-48);
195
+ --spacing-6xl: var(--spacing-56);
196
+ --spacing-7xl: var(--spacing-64);
197
+ --spacing-8xl: var(--spacing-72);
198
+ --spacing-9xl: var(--spacing-80);
199
+ --spacing-10xl: var(--spacing-120);
200
+ --spacing-comp-accordion-ico-size-sm: var(--spacing-md);
201
+ --spacing-comp-accordion-ico-size-md: var(--spacing-lg);
202
+ --spacing-comp-accordion-p-hor: var(--spacing-xl);
203
+ --spacing-comp-accordion-ico-size-lg: var(--spacing-2xl);
204
+ --spacing-comp-accordion-p: var(--spacing-2xl);
205
+ --spacing-comp-accordion-settings-corner-radius: var(--radius-xl);
206
+ --spacing-comp-accordion-settings-gap: var(--spacing-2xl);
207
+ --spacing-comp-accordion-settings-p: var(--spacing-2xl);
208
+ --spacing-comp-admin-header-p-hor: var(--spacing-lg);
209
+ --spacing-comp-admin-header-p-ver: var(--spacing-3xl);
210
+ --spacing-comp-admin-header-h: var(--spacing-80);
211
+ --spacing-comp-alert-gap-sm: var(--spacing-sm);
212
+ --spacing-comp-alert-hor-p-sm: var(--spacing-sm);
213
+ --spacing-comp-alert-gap-lg: var(--spacing-md);
214
+ --spacing-comp-alert-hor-p-lg: var(--spacing-md);
215
+ --spacing-comp-alert-ver-p-sm: var(--spacing-lg);
216
+ --spacing-comp-alert-ico-size: var(--spacing-xl);
217
+ --spacing-comp-alert-ver-p-lg: var(--spacing-xl);
218
+ --spacing-comp-attachment-p: var(--spacing-2xl);
219
+ --spacing-comp-benefit-card-ico-size: var(--spacing-16);
220
+ --spacing-comp-breadcrumb-gap: var(--spacing-sm);
221
+ --spacing-comp-breadcrumb-ico-size-sm: var(--spacing-md);
222
+ --spacing-comp-button-p-none: 0px;
223
+ --spacing-comp-button-gap: var(--spacing-8);
224
+ --spacing-comp-button-p-xxs: var(--spacing-8);
225
+ --spacing-comp-button-p-xs: var(--spacing-12);
226
+ --spacing-comp-button-p-md: var(--spacing-16);
227
+ --spacing-comp-button-p-sm: var(--spacing-24);
228
+ --spacing-comp-button-h-xs: var(--spacing-32);
229
+ --spacing-comp-button-p-def: var(--spacing-32);
230
+ --spacing-comp-button-p-lg: var(--spacing-32);
231
+ --spacing-comp-button-w-xs: var(--spacing-32);
232
+ --spacing-comp-button-h-sm: var(--spacing-48);
233
+ --spacing-comp-button-w-sm: var(--spacing-48);
234
+ --spacing-comp-button-h-def: var(--spacing-56);
235
+ --spacing-comp-button-w-def: var(--spacing-56);
236
+ --spacing-comp-button-h-lg: var(--spacing-64);
237
+ --spacing-comp-button-w-lg: var(--spacing-64);
238
+ --spacing-comp-button-arrow-bg-size-sm: var(--spacing-3xl);
239
+ --spacing-comp-button-arrow-bg-size-def: var(--spacing-4xl);
240
+ --spacing-comp-calendar-ico-size: var(--spacing-16);
241
+ --spacing-comp-calendar-window-size: var(--spacing-40);
242
+ --spacing-comp-card-p-hor: var(--spacing-2xl);
243
+ --spacing-comp-card-p-ver: var(--spacing-2xl);
244
+ --spacing-comp-card-category-ico-size: var(--spacing-2xl);
245
+ --spacing-comp-card-category-p: var(--spacing-2xl);
246
+ --spacing-comp-card-category-h: var(--spacing-96);
247
+ --spacing-comp-card-dashboard-p: var(--spacing-3xl);
248
+ --spacing-comp-card-dashboard-p-right: var(--spacing-3xl);
249
+ --spacing-comp-card-dashboard-ico-bg-size: var(--spacing-7xl);
250
+ --spacing-comp-carousel-circle-size: var(--spacing-28);
251
+ --spacing-comp-checkbox-w-stroke: var(--spacing-1);
252
+ --spacing-comp-dialog-p-hor: var(--spacing-2xl);
253
+ --spacing-comp-dialog-p: var(--spacing-3xl);
254
+ --spacing-comp-dialog-gap: var(--spacing-4xl);
255
+ --spacing-comp-dialog-p-hor-overlay: var(--spacing-5xl);
256
+ --spacing-comp-dialog-img-h: var(--spacing-64);
257
+ --spacing-comp-dialog-img-w: 114px;
258
+ --spacing-comp-dialog-w-sm: var(--spacing-400);
259
+ --spacing-comp-dialog-w-lg: var(--spacing-640);
260
+ --spacing-comp-dialog-w-md: var(--spacing-640);
261
+ --spacing-comp-dialog-android-p-ver-sm: var(--spacing-2xs);
262
+ --spacing-comp-dialog-android-gap: var(--spacing-sm);
263
+ --spacing-comp-dialog-android-p-hor-sm: var(--spacing-sm);
264
+ --spacing-comp-dialog-android-p-hor-def: var(--spacing-2xl);
265
+ --spacing-comp-dialog-android-p-ver-def: var(--spacing-2xl);
266
+ --spacing-comp-empty-state-gap: var(--spacing-2xl);
267
+ --spacing-comp-empty-state-ico-size: var(--spacing-48);
268
+ --spacing-comp-file-upload-ico-size: var(--spacing-32);
269
+ --spacing-comp-header-gap: var(--spacing-lg);
270
+ --spacing-comp-header-p-hor-d: var(--spacing-xl);
271
+ --spacing-comp-help-button-p: var(--spacing-24);
272
+ --spacing-comp-help-button-h: var(--spacing-56);
273
+ --spacing-comp-input-gap: var(--spacing-8);
274
+ --spacing-comp-input-spacing-pin: var(--spacing-8);
275
+ --spacing-comp-input-p-hor: var(--spacing-24);
276
+ --spacing-comp-input-h-small: var(--spacing-48);
277
+ --spacing-comp-input-h-def: var(--spacing-56);
278
+ --spacing-comp-input-h-large: var(--spacing-64);
279
+ --spacing-comp-internal-benefits-circle-size: var(--spacing-36);
280
+ --spacing-comp-login-circle-size: var(--spacing-80);
281
+ --spacing-comp-paggination-size: var(--spacing-3xl);
282
+ --spacing-comp-pin-indicator-stroke-width: var(--spacing-1);
283
+ --spacing-comp-pin-indicator-size: var(--spacing-12);
284
+ --spacing-comp-pin-indicator-gap: var(--spacing-4xl);
285
+ --spacing-comp-popup-p: var(--spacing-2xl);
286
+ --spacing-comp-quantity-selector-p-hor: var(--spacing-lg);
287
+ --spacing-comp-quantity-selector-p-ver: var(--spacing-xl);
288
+ --spacing-comp-radio-w-stroke: var(--spacing-1);
289
+ --spacing-comp-radio-dot-size: var(--spacing-10);
290
+ --spacing-comp-segmented-control-p: var(--spacing-12);
291
+ --spacing-comp-segmented-control-max-width-item: var(--spacing-240);
292
+ --spacing-comp-segmented-control-max-width: var(--spacing-720);
293
+ --spacing-comp-select-p-large: var(--spacing-16);
294
+ --spacing-comp-select-p-def: var(--spacing-24);
295
+ --spacing-comp-select-h-small: var(--spacing-48);
296
+ --spacing-comp-select-h-def: var(--spacing-56);
297
+ --spacing-comp-select-h-large: var(--spacing-64);
298
+ --spacing-comp-slider-indicator-dot-size: var(--spacing-sm);
299
+ --spacing-comp-slider-indicator-gap: var(--spacing-md);
300
+ --spacing-comp-stepper-gap: var(--spacing-sm);
301
+ --spacing-comp-stepper-btn-size: var(--spacing-2xl);
302
+ --spacing-comp-story-gap-content: var(--spacing-sm);
303
+ --spacing-comp-submenu-admin-divider-h: var(--spacing-16);
304
+ --spacing-comp-submenu-admin-bg-ico-size: var(--spacing-40);
305
+ --spacing-comp-submenu-admin-divider-w: var(--spacing-40);
306
+ --spacing-comp-switch-height-def: 0px;
307
+ --spacing-comp-tab-bar-gap-sm: var(--spacing-2xs);
308
+ --spacing-comp-tab-bar-p-ver-def: var(--spacing-sm);
309
+ --spacing-comp-tab-bar-gap-def: var(--spacing-md);
310
+ --spacing-comp-tab-bar-p-hor-def: var(--spacing-2xl);
311
+ --spacing-comp-table-p: var(--spacing-2xl);
312
+ --spacing-comp-table-img-size: var(--spacing-40);
313
+ --spacing-comp-table-h: var(--spacing-72);
314
+ --spacing-comp-tag-dot-size: var(--spacing-6);
315
+ --spacing-comp-tag-ico-size: var(--spacing-16);
316
+ --spacing-comp-tag-h-sm: var(--spacing-24);
317
+ --spacing-comp-tag-h-def: var(--spacing-32);
318
+ --spacing-comp-texteditor-ico-bg-size: var(--spacing-28);
319
+ --spacing-comp-time-picker-container-h: var(--spacing-56);
320
+ --spacing-comp-view-client-p-hor: var(--spacing-md);
321
+ --spacing-comp-view-client-p-right: var(--spacing-md);
322
+ --spacing-comp-view-client-p-left: var(--spacing-lg);
323
+ --spacing-comp-view-client-corner-radius: var(--radius-3xl);
324
+ --spacing-comp-view-client-ico-bg-size: var(--spacing-3xl);
325
+ --spacing-comp-view-client-gap: var(--spacing-4xl);
326
+ --spacing-icon-xsmall: var(--spacing-16);
327
+ --spacing-icon-medium: var(--spacing-20);
328
+ --spacing-icon-small: var(--spacing-20);
329
+ --spacing-icon-large: var(--spacing-24);
330
+ --spacing-icon-xlarge: var(--spacing-48);
331
+ --spacing-icon-2xlarge: var(--spacing-56);
332
+ --spacing-layout-p-top: var(--spacing-40);
333
+ --spacing-layout-p-standard: var(--spacing-48);
334
+ --spacing-layout-gap-web: 64px;
335
+ --spacing-layout-gap-standard: 112px;
336
+ --spacing-layout-p-bottom: var(--spacing-120);
337
+ }
338
+ }
339
+
340
+ /* max 768px */
341
+ @media (width < 48rem) {
342
+ :root {
343
+ /* number */
344
+ --radius-none: var(--spacing-0);
345
+ --radius-2xs: var(--spacing-2);
346
+ --radius-xs: var(--spacing-4);
347
+ --radius-sm: var(--spacing-8);
348
+ --radius-md: var(--spacing-12);
349
+ --radius-lg: var(--spacing-16);
350
+ --radius-2xl: var(--spacing-20);
351
+ --radius-xl: var(--spacing-20);
352
+ --radius-3xl: var(--spacing-24);
353
+ --radius-full: var(--spacing-360);
354
+ --spacing-none: var(--spacing-0);
355
+ --spacing-3xs: var(--spacing-2);
356
+ --spacing-2xs: var(--spacing-4);
357
+ --spacing-xs: var(--spacing-6);
358
+ --spacing-sm: var(--spacing-8);
359
+ --spacing-md: var(--spacing-12);
360
+ --spacing-lg: var(--spacing-16);
361
+ --spacing-xl: var(--spacing-20);
362
+ --spacing-2xl: var(--spacing-24);
363
+ --spacing-3xl: var(--spacing-32);
364
+ --spacing-4xl: var(--spacing-40);
365
+ --spacing-5xl: var(--spacing-48);
366
+ --spacing-6xl: var(--spacing-56);
367
+ --spacing-7xl: var(--spacing-64);
368
+ --spacing-8xl: var(--spacing-72);
369
+ --spacing-9xl: var(--spacing-80);
370
+ --spacing-10xl: var(--spacing-120);
371
+ --spacing-comp-accordion-ico-size-sm: var(--spacing-md);
372
+ --spacing-comp-accordion-ico-size-md: var(--spacing-lg);
373
+ --spacing-comp-accordion-p: var(--spacing-lg);
374
+ --spacing-comp-accordion-p-hor: var(--spacing-lg);
375
+ --spacing-comp-accordion-ico-size-lg: var(--spacing-2xl);
376
+ --spacing-comp-accordion-settings-p: var(--spacing-lg);
377
+ --spacing-comp-accordion-settings-corner-radius: var(--radius-xl);
378
+ --spacing-comp-accordion-settings-gap: var(--spacing-2xl);
379
+ --spacing-comp-admin-header-p-hor: var(--spacing-lg);
380
+ --spacing-comp-admin-header-p-ver: var(--spacing-3xl);
381
+ --spacing-comp-admin-header-h: var(--spacing-80);
382
+ --spacing-comp-alert-gap-sm: var(--spacing-sm);
383
+ --spacing-comp-alert-hor-p-sm: var(--spacing-sm);
384
+ --spacing-comp-alert-gap-lg: var(--spacing-md);
385
+ --spacing-comp-alert-hor-p-lg: var(--spacing-md);
386
+ --spacing-comp-alert-ver-p-sm: var(--spacing-lg);
387
+ --spacing-comp-alert-ico-size: var(--spacing-xl);
388
+ --spacing-comp-alert-ver-p-lg: var(--spacing-xl);
389
+ --spacing-comp-attachment-p: var(--spacing-xl);
390
+ --spacing-comp-benefit-card-ico-size: var(--spacing-16);
391
+ --spacing-comp-breadcrumb-gap: var(--spacing-sm);
392
+ --spacing-comp-breadcrumb-ico-size-sm: var(--spacing-md);
393
+ --spacing-comp-button-p-none: 0px;
394
+ --spacing-comp-button-gap: var(--spacing-8);
395
+ --spacing-comp-button-p-xxs: var(--spacing-8);
396
+ --spacing-comp-button-p-xs: var(--spacing-12);
397
+ --spacing-comp-button-p-md: var(--spacing-16);
398
+ --spacing-comp-button-p-sm: var(--spacing-20);
399
+ --spacing-comp-button-h-xs: var(--spacing-32);
400
+ --spacing-comp-button-p-def: var(--spacing-32);
401
+ --spacing-comp-button-p-lg: var(--spacing-32);
402
+ --spacing-comp-button-w-xs: var(--spacing-32);
403
+ --spacing-comp-button-h-sm: var(--spacing-48);
404
+ --spacing-comp-button-w-sm: var(--spacing-48);
405
+ --spacing-comp-button-h-def: var(--spacing-56);
406
+ --spacing-comp-button-w-def: var(--spacing-56);
407
+ --spacing-comp-button-h-lg: var(--spacing-64);
408
+ --spacing-comp-button-w-lg: var(--spacing-64);
409
+ --spacing-comp-button-arrow-bg-size-sm: var(--spacing-3xl);
410
+ --spacing-comp-button-arrow-bg-size-def: var(--spacing-4xl);
411
+ --spacing-comp-calendar-ico-size: var(--spacing-16);
412
+ --spacing-comp-calendar-window-size: var(--spacing-40);
413
+ --spacing-comp-card-p-ver: var(--spacing-lg);
414
+ --spacing-comp-card-p-hor: var(--spacing-xl);
415
+ --spacing-comp-card-category-ico-size: var(--spacing-2xl);
416
+ --spacing-comp-card-category-p: var(--spacing-2xl);
417
+ --spacing-comp-card-category-h: var(--spacing-96);
418
+ --spacing-comp-card-dashboard-p: var(--spacing-2xl);
419
+ --spacing-comp-card-dashboard-p-right: var(--spacing-2xl);
420
+ --spacing-comp-card-dashboard-ico-bg-size: var(--spacing-6xl);
421
+ --spacing-comp-carousel-circle-size: var(--spacing-24);
422
+ --spacing-comp-checkbox-w-stroke: var(--spacing-1);
423
+ --spacing-comp-dialog-p: var(--spacing-xl);
424
+ --spacing-comp-dialog-p-hor-overlay: var(--spacing-xl);
425
+ --spacing-comp-dialog-p-hor: var(--spacing-2xl);
426
+ --spacing-comp-dialog-gap: var(--spacing-3xl);
427
+ --spacing-comp-dialog-img-h: var(--spacing-56);
428
+ --spacing-comp-dialog-img-w: 100px;
429
+ --spacing-comp-dialog-w-lg: var(--spacing-335);
430
+ --spacing-comp-dialog-w-md: var(--spacing-335);
431
+ --spacing-comp-dialog-w-sm: var(--spacing-335);
432
+ --spacing-comp-dialog-android-p-ver-sm: var(--spacing-2xs);
433
+ --spacing-comp-dialog-android-gap: var(--spacing-sm);
434
+ --spacing-comp-dialog-android-p-hor-sm: var(--spacing-sm);
435
+ --spacing-comp-dialog-android-p-hor-def: var(--spacing-2xl);
436
+ --spacing-comp-dialog-android-p-ver-def: var(--spacing-2xl);
437
+ --spacing-comp-empty-state-gap: var(--spacing-2xl);
438
+ --spacing-comp-empty-state-ico-size: var(--spacing-48);
439
+ --spacing-comp-file-upload-ico-size: var(--spacing-32);
440
+ --spacing-comp-header-gap: var(--spacing-lg);
441
+ --spacing-comp-header-p-hor-d: var(--spacing-xl);
442
+ --spacing-comp-help-button-p: var(--spacing-24);
443
+ --spacing-comp-help-button-h: var(--spacing-48);
444
+ --spacing-comp-input-gap: var(--spacing-8);
445
+ --spacing-comp-input-spacing-pin: var(--spacing-8);
446
+ --spacing-comp-input-p-hor: var(--spacing-20);
447
+ --spacing-comp-input-h-small: var(--spacing-48);
448
+ --spacing-comp-input-h-def: var(--spacing-56);
449
+ --spacing-comp-input-h-large: var(--spacing-64);
450
+ --spacing-comp-internal-benefits-circle-size: var(--spacing-36);
451
+ --spacing-comp-login-circle-size: var(--spacing-64);
452
+ --spacing-comp-paggination-size: var(--spacing-3xl);
453
+ --spacing-comp-pin-indicator-stroke-width: var(--spacing-1);
454
+ --spacing-comp-pin-indicator-size: var(--spacing-12);
455
+ --spacing-comp-pin-indicator-gap: var(--spacing-4xl);
456
+ --spacing-comp-popup-p: var(--spacing-xl);
457
+ --spacing-comp-quantity-selector-p-hor: var(--spacing-md);
458
+ --spacing-comp-quantity-selector-p-ver: var(--spacing-lg);
459
+ --spacing-comp-radio-w-stroke: var(--spacing-1);
460
+ --spacing-comp-radio-dot-size: var(--spacing-10);
461
+ --spacing-comp-segmented-control-p: var(--spacing-12);
462
+ --spacing-comp-segmented-control-max-width-item: var(--spacing-240);
463
+ --spacing-comp-segmented-control-max-width: var(--spacing-720);
464
+ --spacing-comp-select-p-large: var(--spacing-16);
465
+ --spacing-comp-select-p-def: var(--spacing-20);
466
+ --spacing-comp-select-h-small: var(--spacing-48);
467
+ --spacing-comp-select-h-def: var(--spacing-56);
468
+ --spacing-comp-select-h-large: var(--spacing-64);
469
+ --spacing-comp-slider-indicator-dot-size: var(--spacing-sm);
470
+ --spacing-comp-slider-indicator-gap: var(--spacing-md);
471
+ --spacing-comp-stepper-gap: var(--spacing-sm);
472
+ --spacing-comp-stepper-btn-size: var(--spacing-3xl);
473
+ --spacing-comp-story-gap-content: var(--spacing-sm);
474
+ --spacing-comp-submenu-admin-divider-h: var(--spacing-16);
475
+ --spacing-comp-submenu-admin-bg-ico-size: var(--spacing-40);
476
+ --spacing-comp-submenu-admin-divider-w: var(--spacing-40);
477
+ --spacing-comp-switch-height-def: 0px;
478
+ --spacing-comp-tab-bar-gap-sm: var(--spacing-2xs);
479
+ --spacing-comp-tab-bar-p-ver-def: var(--spacing-sm);
480
+ --spacing-comp-tab-bar-gap-def: var(--spacing-md);
481
+ --spacing-comp-tab-bar-p-hor-def: var(--spacing-2xl);
482
+ --spacing-comp-table-p: var(--spacing-xl);
483
+ --spacing-comp-table-img-size: var(--spacing-32);
484
+ --spacing-comp-table-h: var(--spacing-72);
485
+ --spacing-comp-tag-dot-size: var(--spacing-6);
486
+ --spacing-comp-tag-ico-size: var(--spacing-16);
487
+ --spacing-comp-tag-h-sm: var(--spacing-24);
488
+ --spacing-comp-tag-h-def: var(--spacing-32);
489
+ --spacing-comp-texteditor-ico-bg-size: var(--spacing-28);
490
+ --spacing-comp-time-picker-container-h: var(--spacing-48);
491
+ --spacing-comp-view-client-p-hor: var(--spacing-md);
492
+ --spacing-comp-view-client-p-right: var(--spacing-md);
493
+ --spacing-comp-view-client-gap: var(--spacing-lg);
494
+ --spacing-comp-view-client-p-left: var(--spacing-lg);
495
+ --spacing-comp-view-client-corner-radius: var(--radius-3xl);
496
+ --spacing-comp-view-client-ico-bg-size: var(--spacing-3xl);
497
+ --spacing-icon-xsmall: var(--spacing-16);
498
+ --spacing-icon-medium: var(--spacing-20);
499
+ --spacing-icon-small: var(--spacing-20);
500
+ --spacing-icon-large: var(--spacing-24);
501
+ --spacing-icon-xlarge: var(--spacing-48);
502
+ --spacing-icon-2xlarge: var(--spacing-56);
503
+ --spacing-layout-p-standard: var(--spacing-20);
504
+ --spacing-layout-gap-web: 48px;
505
+ --spacing-layout-p-top: var(--spacing-56);
506
+ --spacing-layout-p-bottom: var(--spacing-80);
507
+ --spacing-layout-gap-standard: 96px;
508
+ }
509
+ }
510
+
511
+ /* min 1600px */
512
+ @media (width >= 100rem) {
513
+ :root {
514
+ /* number */
515
+ --radius-none: var(--spacing-0);
516
+ --radius-2xs: var(--spacing-2);
517
+ --radius-xs: var(--spacing-4);
518
+ --radius-sm: var(--spacing-8);
519
+ --radius-md: var(--spacing-12);
520
+ --radius-lg: var(--spacing-16);
521
+ --radius-xl: var(--spacing-20);
522
+ --radius-2xl: var(--spacing-24);
523
+ --radius-3xl: var(--spacing-32);
524
+ --radius-full: var(--spacing-360);
525
+ --spacing-none: var(--spacing-0);
526
+ --spacing-3xs: var(--spacing-2);
527
+ --spacing-2xs: var(--spacing-4);
528
+ --spacing-xs: var(--spacing-6);
529
+ --spacing-sm: var(--spacing-8);
530
+ --spacing-md: var(--spacing-12);
531
+ --spacing-lg: var(--spacing-16);
532
+ --spacing-xl: var(--spacing-20);
533
+ --spacing-2xl: var(--spacing-24);
534
+ --spacing-3xl: var(--spacing-32);
535
+ --spacing-4xl: var(--spacing-40);
536
+ --spacing-5xl: var(--spacing-48);
537
+ --spacing-6xl: var(--spacing-56);
538
+ --spacing-7xl: var(--spacing-64);
539
+ --spacing-8xl: var(--spacing-72);
540
+ --spacing-9xl: var(--spacing-80);
541
+ --spacing-10xl: var(--spacing-120);
542
+ --spacing-comp-accordion-ico-size-sm: var(--spacing-md);
543
+ --spacing-comp-accordion-ico-size-md: var(--spacing-lg);
544
+ --spacing-comp-accordion-p-hor: var(--spacing-xl);
545
+ --spacing-comp-accordion-ico-size-lg: var(--spacing-2xl);
546
+ --spacing-comp-accordion-p: var(--spacing-2xl);
547
+ --spacing-comp-accordion-settings-corner-radius: var(--radius-xl);
548
+ --spacing-comp-accordion-settings-gap: var(--spacing-2xl);
549
+ --spacing-comp-accordion-settings-p: var(--spacing-2xl);
550
+ --spacing-comp-admin-header-p-hor: var(--spacing-lg);
551
+ --spacing-comp-admin-header-p-ver: var(--spacing-3xl);
552
+ --spacing-comp-admin-header-h: var(--spacing-80);
553
+ --spacing-comp-alert-gap-sm: var(--spacing-sm);
554
+ --spacing-comp-alert-hor-p-sm: var(--spacing-sm);
555
+ --spacing-comp-alert-gap-lg: var(--spacing-md);
556
+ --spacing-comp-alert-hor-p-lg: var(--spacing-md);
557
+ --spacing-comp-alert-ver-p-sm: var(--spacing-lg);
558
+ --spacing-comp-alert-ico-size: var(--spacing-xl);
559
+ --spacing-comp-alert-ver-p-lg: var(--spacing-xl);
560
+ --spacing-comp-attachment-p: var(--spacing-2xl);
561
+ --spacing-comp-benefit-card-ico-size: var(--spacing-16);
562
+ --spacing-comp-breadcrumb-gap: var(--spacing-sm);
563
+ --spacing-comp-breadcrumb-ico-size-sm: var(--spacing-lg);
564
+ --spacing-comp-button-p-none: 0px;
565
+ --spacing-comp-button-gap: var(--spacing-8);
566
+ --spacing-comp-button-p-xxs: var(--spacing-8);
567
+ --spacing-comp-button-p-xs: var(--spacing-12);
568
+ --spacing-comp-button-p-md: var(--spacing-16);
569
+ --spacing-comp-button-p-sm: var(--spacing-24);
570
+ --spacing-comp-button-h-xs: var(--spacing-32);
571
+ --spacing-comp-button-p-def: var(--spacing-32);
572
+ --spacing-comp-button-p-lg: var(--spacing-32);
573
+ --spacing-comp-button-w-xs: var(--spacing-32);
574
+ --spacing-comp-button-h-sm: var(--spacing-48);
575
+ --spacing-comp-button-w-sm: var(--spacing-48);
576
+ --spacing-comp-button-h-def: var(--spacing-56);
577
+ --spacing-comp-button-w-def: var(--spacing-56);
578
+ --spacing-comp-button-h-lg: var(--spacing-64);
579
+ --spacing-comp-button-w-lg: var(--spacing-64);
580
+ --spacing-comp-button-arrow-bg-size-sm: var(--spacing-3xl);
581
+ --spacing-comp-button-arrow-bg-size-def: var(--spacing-4xl);
582
+ --spacing-comp-calendar-ico-size: var(--spacing-16);
583
+ --spacing-comp-calendar-window-size: var(--spacing-40);
584
+ --spacing-comp-card-p-ver: var(--spacing-2xl);
585
+ --spacing-comp-card-p-hor: var(--spacing-3xl);
586
+ --spacing-comp-card-category-ico-size: var(--spacing-2xl);
587
+ --spacing-comp-card-category-p: var(--spacing-3xl);
588
+ --spacing-comp-card-category-h: var(--spacing-96);
589
+ --spacing-comp-card-dashboard-p: var(--spacing-3xl);
590
+ --spacing-comp-card-dashboard-ico-bg-size: var(--spacing-8xl);
591
+ --spacing-comp-card-dashboard-p-right: var(--spacing-8xl);
592
+ --spacing-comp-carousel-circle-size: var(--spacing-28);
593
+ --spacing-comp-checkbox-w-stroke: var(--spacing-1);
594
+ --spacing-comp-dialog-p-hor: var(--spacing-2xl);
595
+ --spacing-comp-dialog-p: var(--spacing-3xl);
596
+ --spacing-comp-dialog-gap: var(--spacing-4xl);
597
+ --spacing-comp-dialog-p-hor-overlay: var(--spacing-5xl);
598
+ --spacing-comp-dialog-img-h: var(--spacing-64);
599
+ --spacing-comp-dialog-img-w: 114px;
600
+ --spacing-comp-dialog-w-sm: var(--spacing-400);
601
+ --spacing-comp-dialog-w-md: var(--spacing-640);
602
+ --spacing-comp-dialog-w-lg: var(--spacing-980);
603
+ --spacing-comp-dialog-android-p-ver-sm: var(--spacing-2xs);
604
+ --spacing-comp-dialog-android-gap: var(--spacing-sm);
605
+ --spacing-comp-dialog-android-p-hor-sm: var(--spacing-sm);
606
+ --spacing-comp-dialog-android-p-hor-def: var(--spacing-2xl);
607
+ --spacing-comp-dialog-android-p-ver-def: var(--spacing-2xl);
608
+ --spacing-comp-empty-state-gap: var(--spacing-2xl);
609
+ --spacing-comp-empty-state-ico-size: var(--spacing-48);
610
+ --spacing-comp-file-upload-ico-size: var(--spacing-32);
611
+ --spacing-comp-header-gap: var(--spacing-lg);
612
+ --spacing-comp-header-p-hor-d: var(--spacing-xl);
613
+ --spacing-comp-help-button-p: var(--spacing-32);
614
+ --spacing-comp-help-button-h: var(--spacing-56);
615
+ --spacing-comp-input-gap: var(--spacing-8);
616
+ --spacing-comp-input-spacing-pin: var(--spacing-8);
617
+ --spacing-comp-input-p-hor: var(--spacing-24);
618
+ --spacing-comp-input-h-small: var(--spacing-48);
619
+ --spacing-comp-input-h-def: var(--spacing-56);
620
+ --spacing-comp-input-h-large: var(--spacing-64);
621
+ --spacing-comp-internal-benefits-circle-size: var(--spacing-36);
622
+ --spacing-comp-login-circle-size: var(--spacing-80);
623
+ --spacing-comp-paggination-size: var(--spacing-3xl);
624
+ --spacing-comp-pin-indicator-stroke-width: var(--spacing-1);
625
+ --spacing-comp-pin-indicator-size: var(--spacing-12);
626
+ --spacing-comp-pin-indicator-gap: var(--spacing-4xl);
627
+ --spacing-comp-popup-p: var(--spacing-2xl);
628
+ --spacing-comp-quantity-selector-p-hor: var(--spacing-md);
629
+ --spacing-comp-quantity-selector-p-ver: var(--spacing-lg);
630
+ --spacing-comp-radio-w-stroke: var(--spacing-1);
631
+ --spacing-comp-radio-dot-size: var(--spacing-10);
632
+ --spacing-comp-segmented-control-p: var(--spacing-12);
633
+ --spacing-comp-segmented-control-max-width-item: var(--spacing-240);
634
+ --spacing-comp-segmented-control-max-width: var(--spacing-720);
635
+ --spacing-comp-select-p-large: var(--spacing-16);
636
+ --spacing-comp-select-p-def: var(--spacing-24);
637
+ --spacing-comp-select-h-small: var(--spacing-48);
638
+ --spacing-comp-select-h-def: var(--spacing-56);
639
+ --spacing-comp-select-h-large: var(--spacing-64);
640
+ --spacing-comp-slider-indicator-dot-size: var(--spacing-sm);
641
+ --spacing-comp-slider-indicator-gap: var(--spacing-md);
642
+ --spacing-comp-stepper-gap: var(--spacing-sm);
643
+ --spacing-comp-stepper-btn-size: var(--spacing-2xl);
644
+ --spacing-comp-story-gap-content: var(--spacing-6xl);
645
+ --spacing-comp-submenu-admin-divider-h: var(--spacing-16);
646
+ --spacing-comp-submenu-admin-bg-ico-size: var(--spacing-40);
647
+ --spacing-comp-submenu-admin-divider-w: var(--spacing-40);
648
+ --spacing-comp-switch-height-def: 0px;
649
+ --spacing-comp-tab-bar-gap-sm: var(--spacing-2xs);
650
+ --spacing-comp-tab-bar-p-ver-def: var(--spacing-sm);
651
+ --spacing-comp-tab-bar-gap-def: var(--spacing-md);
652
+ --spacing-comp-tab-bar-p-hor-def: var(--spacing-2xl);
653
+ --spacing-comp-table-p: var(--spacing-2xl);
654
+ --spacing-comp-table-img-size: var(--spacing-40);
655
+ --spacing-comp-table-h: var(--spacing-72);
656
+ --spacing-comp-tag-dot-size: var(--spacing-6);
657
+ --spacing-comp-tag-ico-size: var(--spacing-16);
658
+ --spacing-comp-tag-h-sm: var(--spacing-24);
659
+ --spacing-comp-tag-h-def: var(--spacing-32);
660
+ --spacing-comp-texteditor-ico-bg-size: var(--spacing-28);
661
+ --spacing-comp-time-picker-container-h: var(--spacing-56);
662
+ --spacing-comp-view-client-p-hor: var(--spacing-sm);
663
+ --spacing-comp-view-client-p-left: var(--spacing-sm);
664
+ --spacing-comp-view-client-p-right: var(--spacing-lg);
665
+ --spacing-comp-view-client-ico-bg-size: var(--spacing-3xl);
666
+ --spacing-comp-view-client-gap: var(--spacing-4xl);
667
+ --spacing-comp-view-client-corner-radius: var(--radius-full);
668
+ --spacing-icon-xsmall: var(--spacing-16);
669
+ --spacing-icon-small: var(--spacing-20);
670
+ --spacing-icon-medium: var(--spacing-24);
671
+ --spacing-icon-large: var(--spacing-32);
672
+ --spacing-icon-xlarge: var(--spacing-56);
673
+ --spacing-icon-2xlarge: var(--spacing-64);
674
+ --spacing-layout-p-standard: var(--spacing-50);
675
+ --spacing-layout-p-top: var(--spacing-56);
676
+ --spacing-layout-gap-web: 96px;
677
+ --spacing-layout-gap-standard: 120px;
678
+ --spacing-layout-p-bottom: var(--spacing-120);
679
+ }
680
+ }