@vkzstudio/muza-ui 1.0.18 → 1.0.20

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 (16) hide show
  1. package/dist/components/FileUpload/FileItem.d.ts +13 -3
  2. package/dist/components/FileUpload/FileItem.d.ts.map +1 -1
  3. package/dist/components/FileUpload/FileItem.js +94 -80
  4. package/dist/components/FileUpload/FileUpload.d.ts +18 -0
  5. package/dist/components/FileUpload/FileUpload.d.ts.map +1 -1
  6. package/dist/components/FileUpload/FileUpload.js +139 -119
  7. package/dist/components/FileUpload/FileUpload.stories.d.ts +3 -0
  8. package/dist/components/FileUpload/FileUpload.stories.d.ts.map +1 -1
  9. package/dist/components/FileUpload/index.d.ts +1 -1
  10. package/dist/components/FileUpload/index.d.ts.map +1 -1
  11. package/dist/muza-ui.css +1 -1
  12. package/dist/styles/primitives.css +2 -0
  13. package/dist/styles/token-colors.css +10 -4
  14. package/dist/styles/token-sizes.css +201 -17
  15. package/dist/styles/white-label.css +1 -0
  16. package/package.json +1 -1
package/dist/styles/primitives.css CHANGED
@@ -101,6 +101,7 @@
101
101
  --color-red-900: #500b14;
102
102
  --color-transparent-brand-12: #5f1eb41f;
103
103
  --color-transparent-brand-15: #5f1eb426;
104
+ --color-transparent-brand-4: #5f1eb40a;
104
105
  --color-transparent-brand-8: #5f1eb414;
105
106
  --color-transparent-dark-10: #1c1a1f1a;
106
107
  --color-transparent-dark-12: #1c1a1f1f;
@@ -142,6 +143,7 @@
142
143
  --spacing-72: 72px;
143
144
  --spacing-80: 80px;
144
145
  --spacing-96: 96px;
146
+ --spacing-112: 112px;
145
147
  --spacing-120: 120px;
146
148
  --spacing-160: 160px;
147
149
  --spacing-240: 240px;
package/dist/styles/token-colors.css CHANGED
@@ -359,7 +359,7 @@
359
359
  --color-stroke-base-primary-pressed
360
360
  );
361
361
  --color-comp-button-invert-ghost-text-def: var(--color-text-invert-def);
362
- --color-comp-button-invert-ghost-text-disabled: var(--color-gray-700);
362
+ --color-comp-button-invert-ghost-text-disabled: var(--gray-700);
363
363
  --color-comp-button-invert-ghost-text-focused: var(
364
364
  --color-text-invert-focused
365
365
  );
@@ -474,7 +474,7 @@
474
474
  --color-stroke-brand-pressed
475
475
  );
476
476
  --color-comp-button-link-invert-text-def: var(--color-text-invert-def);
477
- --color-comp-button-link-invert-text-disabled: var(--color-gray-700);
477
+ --color-comp-button-link-invert-text-disabled: var(--gray-700);
478
478
  --color-comp-button-link-invert-text-focused: var(
479
479
  --color-text-invert-focused
480
480
  );
@@ -565,7 +565,7 @@
565
565
  --color-comp-button-primary-swipe-progress-focused: var(--color-purple-400);
566
566
  --color-comp-button-primary-swipe-progress-hover: var(--color-purple-400);
567
567
  --color-comp-button-primary-text-def: var(--color-text-invert-def);
568
- --color-comp-button-primary-text-disabled: var(--color-gray-700);
568
+ --color-comp-button-primary-text-disabled: var(--gray-700);
569
569
  --color-comp-button-primary-text-focused: var(--color-text-invert-focused);
570
570
  --color-comp-button-primary-text-hover: var(--color-text-invert-hover);
571
571
  --color-comp-button-primary-text-pressed: var(--color-text-invert-pressed);
@@ -657,7 +657,7 @@
657
657
  --color-black-dramatic-900
658
658
  );
659
659
  --color-comp-button-secondary-text-def: var(--color-text-invert-def);
660
- --color-comp-button-secondary-text-disabled: var(--color-gray-700);
660
+ --color-comp-button-secondary-text-disabled: var(--gray-700);
661
661
  --color-comp-button-secondary-text-focused: var(--color-text-invert-focused);
662
662
  --color-comp-button-secondary-text-hover: var(--color-text-invert-hover);
663
663
  --color-comp-button-secondary-text-pressed: var(--color-text-invert-pressed);
@@ -859,6 +859,7 @@
859
859
  --color-icon-error-focused
860
860
  );
861
861
  --color-comp-file-upload-icon-error-hover: var(--color-icon-error-hover);
862
+ --color-comp-file-upload-icon-success-def: var(--color-text-state-success);
862
863
  --color-comp-file-upload-stroke-dashed-def: var(--color-stroke-dashed-def);
863
864
  --color-comp-file-upload-stroke-dashed-disabled: var(
864
865
  --color-stroke-base-disabled
@@ -882,6 +883,7 @@
882
883
  --color-stroke-error-focused
883
884
  );
884
885
  --color-comp-file-upload-stroke-error-hover: var(--color-stroke-error-hover);
886
+ --color-comp-file-upload-stroke-success-def: var(--color-stroke-base-success);
885
887
  --color-comp-file-upload-text-brand-def: var(--color-text-brand-def);
886
888
  --color-comp-file-upload-text-brand-disabled: var(--color-text-dark-disabled);
887
889
  --color-comp-file-upload-text-brand-focused: var(--color-text-brand-focused);
@@ -909,6 +911,7 @@
909
911
  --color-comp-file-upload-text-error-hover: var(
910
912
  --color-text-state-error-hover
911
913
  );
914
+ --color-comp-file-upload-text-success-def: var(--color-text-state-success);
912
915
  --color-comp-header-icon-def: var(--color-icon-dark-primary-def);
913
916
  --color-comp-header-icon-invert: var(--color-icon-invert-def);
914
917
  --color-comp-header-text-def: var(--color-text-dark-primary-def);
@@ -1030,6 +1033,8 @@
1030
1033
  );
1031
1034
  --color-comp-slider-indicators-bg-active: var(--color-surface-brand-primary);
1032
1035
  --color-comp-slider-indicators-bg-def: var(--color-surface-brand-secondary);
1036
+ --color-comp-star-default: var(--color-other-yellow);
1037
+ --color-comp-star-empty: var(--color-gray-300);
1033
1038
  --color-comp-submenu-admin-bg-def: var(--color-surface-state-bg-info);
1034
1039
  --color-comp-submenu-admin-bg-disabled: var(
1035
1040
  --color-surface-brand-primary-disabled
@@ -1151,6 +1156,7 @@
1151
1156
  --color-surface-brand-brand-tertiary: var(--brand-tertiary);
1152
1157
  --color-surface-brand-primary: var(--brand-primary);
1153
1158
  --color-surface-brand-primary-disabled: var(--brand-8);
1159
+ --color-surface-brand-primary-disabled2: var(--brand-4);
1154
1160
  --color-surface-brand-primary-focused-pressed: var(--brand-focused);
1155
1161
  --color-surface-brand-primary-hover: var(--brand-hover);
1156
1162
  --color-surface-brand-secondary: var(--brand-disabled);
package/dist/styles/token-sizes.css CHANGED
@@ -20,6 +20,7 @@
20
20
  --spacing-lg: var(--spacing-16);
21
21
  --spacing-xl: var(--spacing-20);
22
22
  --spacing-2xl: var(--spacing-24);
23
+ --spacing-2-5-xl: var(--spacing-28);
23
24
  --spacing-3xl: var(--spacing-32);
24
25
  --spacing-4xl: var(--spacing-40);
25
26
  --spacing-5xl: var(--spacing-48);
@@ -36,6 +37,15 @@
36
37
  --spacing-comp-accordion-settings-corner-radius: var(--radius-xl);
37
38
  --spacing-comp-accordion-settings-gap: var(--spacing-2xl);
38
39
  --spacing-comp-accordion-settings-p: var(--spacing-2xl);
40
+ --spacing-comp-account-card-gap-def: var(--spacing-16);
41
+ --spacing-comp-account-card-gap-mf: var(--spacing-20);
42
+ --spacing-comp-account-card-radius: var(--radius-2xl);
43
+ --spacing-comp-account-card-gap-lg: var(--spacing-32);
44
+ --spacing-comp-account-card-p-hor-def: var(--spacing-32);
45
+ --spacing-comp-account-card-p-ver: var(--spacing-32);
46
+ --spacing-comp-account-card-p-hor-lg: var(--spacing-40);
47
+ --spacing-comp-account-icon-radius: var(--radius-2xl);
48
+ --spacing-comp-account-icon-ico-bg-size: var(--spacing-96);
39
49
  --spacing-comp-admin-header-p-hor: var(--spacing-lg);
40
50
  --spacing-comp-admin-header-p-ver: var(--spacing-3xl);
41
51
  --spacing-comp-admin-header-h: var(--spacing-80);
@@ -80,8 +90,12 @@
80
90
  --spacing-comp-card-dashboard-p-right: var(--spacing-8xl);
81
91
  --spacing-comp-carousel-circle-size: var(--spacing-28);
82
92
  --spacing-comp-checkbox-w-stroke: var(--spacing-1);
83
- --spacing-comp-dialog-p-hor: var(--spacing-2xl);
93
+ --spacing-comp-checkout-card-p-bottom: var(--spacing-12);
94
+ --spacing-comp-checkout-card-radius: var(--radius-xl);
95
+ --spacing-comp-checkout-card-p-hor: var(--spacing-24);
96
+ --spacing-comp-checkout-card-p-ver: var(--spacing-24);
84
97
  --spacing-comp-dialog-p-hor-sm: var(--spacing-xl);
98
+ --spacing-comp-dialog-p-hor-def: var(--spacing-2xl);
85
99
  --spacing-comp-dialog-p: var(--spacing-3xl);
86
100
  --spacing-comp-dialog-gap: var(--spacing-4xl);
87
101
  --spacing-comp-dialog-p-hor-overlay: var(--spacing-5xl);
@@ -102,6 +116,10 @@
102
116
  --spacing-comp-header-p-hor-d: var(--spacing-xl);
103
117
  --spacing-comp-help-button-p: var(--spacing-32);
104
118
  --spacing-comp-help-button-h: var(--spacing-56);
119
+ --spacing-comp-hero-card-gap-sm: var(--spacing-md);
120
+ --spacing-comp-hero-card-gap-def: var(--spacing-lg);
121
+ --spacing-comp-hero-card-p-sm: var(--spacing-2xl);
122
+ --spacing-comp-hero-card-p-def: var(--spacing-3xl);
105
123
  --spacing-comp-input-gap: var(--spacing-8);
106
124
  --spacing-comp-input-spacing-pin: var(--spacing-8);
107
125
  --spacing-comp-input-p-hor: var(--spacing-24);
@@ -110,11 +128,23 @@
110
128
  --spacing-comp-input-h-large: var(--spacing-64);
111
129
  --spacing-comp-internal-benefits-circle-size: var(--spacing-36);
112
130
  --spacing-comp-login-circle-size: var(--spacing-80);
131
+ --spacing-comp-magazine-card-p: var(--spacing-3xl);
132
+ --spacing-comp-market-card-p-hor: var(--spacing-20);
133
+ --spacing-comp-market-card-p-ver: var(--spacing-24);
134
+ --spacing-comp-market-card-ico-bg-size: var(--spacing-48);
135
+ --spacing-comp-market-category-ico-ico-size-sm: var(--spacing-icon-xsmall);
136
+ --spacing-comp-market-category-ico-bg-size-sm: var(--spacing-24);
137
+ --spacing-comp-market-category-ico-ico-size-lg: var(--spacing-56);
138
+ --spacing-comp-market-category-ico-bg-size-lg: 140px;
113
139
  --spacing-comp-paggination-size: var(--spacing-3xl);
140
+ --spacing-comp-paygate-card-p-hor: var(--spacing-40);
141
+ --spacing-comp-paygate-card-p-ver: var(--spacing-40);
142
+ --spacing-comp-paygate-table-p-hor: var(--spacing-24);
143
+ --spacing-comp-paygate-table-p-ver: var(--spacing-24);
144
+ --spacing-comp-paygate-top-navi-p-hor: var(--spacing-32);
114
145
  --spacing-comp-pin-indicator-stroke-width: var(--spacing-1);
115
146
  --spacing-comp-pin-indicator-size: var(--spacing-12);
116
147
  --spacing-comp-pin-indicator-gap: var(--spacing-4xl);
117
- --spacing-comp-popup-p: var(--spacing-2xl);
118
148
  --spacing-comp-quantity-selector-p-hor: var(--spacing-lg);
119
149
  --spacing-comp-quantity-selector-p-ver: var(--spacing-xl);
120
150
  --spacing-comp-radio-w-stroke: var(--spacing-1);
@@ -155,17 +185,33 @@
155
185
  --spacing-comp-view-client-ico-bg-size: var(--spacing-3xl);
156
186
  --spacing-comp-view-client-gap: var(--spacing-4xl);
157
187
  --spacing-comp-view-client-corner-radius: var(--radius-full);
188
+ --spacing-comp-webcheckout-table-p-hor: var(--spacing-lg);
189
+ --spacing-comp-webcheckout-table-p-ver: var(--spacing-lg);
190
+ --spacing-comp-webcheckout-table-cells-p: var(--spacing-lg);
191
+ --spacing-comp-webcheckout-table-cells-h-first-row: var(--spacing-56);
192
+ --spacing-comp-webcheckout-table-cells-h: var(--spacing-64);
193
+ --spacing-icon-xxsmall: var(--spacing-12);
158
194
  --spacing-icon-xsmall: var(--spacing-16);
159
195
  --spacing-icon-small: var(--spacing-20);
160
196
  --spacing-icon-medium: var(--spacing-24);
161
197
  --spacing-icon-large: var(--spacing-32);
162
198
  --spacing-icon-xlarge: var(--spacing-56);
163
199
  --spacing-icon-2xlarge: var(--spacing-64);
200
+ --spacing-layout-p-small: var(--spacing-8);
201
+ --spacing-layout-gap-webcheckout: var(--spacing-24);
202
+ --spacing-layout-p-top-webcheckout: var(--spacing-24);
203
+ --spacing-layout-gap-admin-settings: var(--spacing-40);
204
+ --spacing-layout-gap-small: var(--spacing-40);
164
205
  --spacing-layout-p-top: var(--spacing-40);
165
- --spacing-layout-gap-web: 96px;
166
- --spacing-layout-gap-standard: 120px;
206
+ --spacing-layout-p-top-market: var(--spacing-40);
207
+ --spacing-layout-p-top-paygate: var(--spacing-40);
208
+ --spacing-layout-gap-medium: var(--spacing-64);
209
+ --spacing-layout-p-top-market-lg: var(--spacing-64);
210
+ --spacing-layout-gap-web: var(--spacing-96);
211
+ --spacing-layout-gap-standard: var(--spacing-120);
167
212
  --spacing-layout-p-bottom: var(--spacing-120);
168
213
  --spacing-layout-p-standard: var(--spacing-120);
214
+ --spacing-layout-w-admin-settings: 690px;
169
215
  }
170
216
  /* max 1024px */
171
217
  @media (width < 64rem) {
@@ -190,6 +236,7 @@
190
236
  --spacing-lg: var(--spacing-16);
191
237
  --spacing-xl: var(--spacing-20);
192
238
  --spacing-2xl: var(--spacing-24);
239
+ --spacing-2-5-xl: var(--spacing-28);
193
240
  --spacing-3xl: var(--spacing-32);
194
241
  --spacing-4xl: var(--spacing-40);
195
242
  --spacing-5xl: var(--spacing-48);
@@ -206,6 +253,15 @@
206
253
  --spacing-comp-accordion-settings-corner-radius: var(--radius-xl);
207
254
  --spacing-comp-accordion-settings-gap: var(--spacing-2xl);
208
255
  --spacing-comp-accordion-settings-p: var(--spacing-2xl);
256
+ --spacing-comp-account-card-gap-def: var(--spacing-16);
257
+ --spacing-comp-account-card-gap-mf: var(--spacing-20);
258
+ --spacing-comp-account-card-radius: var(--radius-2xl);
259
+ --spacing-comp-account-card-p-hor-def: var(--spacing-24);
260
+ --spacing-comp-account-card-p-ver: var(--spacing-24);
261
+ --spacing-comp-account-card-gap-lg: var(--spacing-32);
262
+ --spacing-comp-account-card-p-hor-lg: var(--spacing-32);
263
+ --spacing-comp-account-icon-radius: var(--radius-2xl);
264
+ --spacing-comp-account-icon-ico-bg-size: var(--spacing-80);
209
265
  --spacing-comp-admin-header-p-hor: var(--spacing-lg);
210
266
  --spacing-comp-admin-header-p-ver: var(--spacing-3xl);
211
267
  --spacing-comp-admin-header-h: var(--spacing-80);
@@ -250,8 +306,12 @@
250
306
  --spacing-comp-card-dashboard-ico-bg-size: var(--spacing-7xl);
251
307
  --spacing-comp-carousel-circle-size: var(--spacing-28);
252
308
  --spacing-comp-checkbox-w-stroke: var(--spacing-1);
253
- --spacing-comp-dialog-p-hor: var(--spacing-2xl);
309
+ --spacing-comp-checkout-card-p-bottom: var(--spacing-12);
310
+ --spacing-comp-checkout-card-p-ver: var(--spacing-20);
311
+ --spacing-comp-checkout-card-radius: var(--radius-xl);
312
+ --spacing-comp-checkout-card-p-hor: var(--spacing-24);
254
313
  --spacing-comp-dialog-p-hor-sm: var(--spacing-xl);
314
+ --spacing-comp-dialog-p-hor-def: var(--spacing-2xl);
255
315
  --spacing-comp-dialog-p: var(--spacing-3xl);
256
316
  --spacing-comp-dialog-gap: var(--spacing-4xl);
257
317
  --spacing-comp-dialog-p-hor-overlay: var(--spacing-5xl);
@@ -272,6 +332,10 @@
272
332
  --spacing-comp-header-p-hor-d: var(--spacing-xl);
273
333
  --spacing-comp-help-button-p: var(--spacing-24);
274
334
  --spacing-comp-help-button-h: var(--spacing-56);
335
+ --spacing-comp-hero-card-gap-sm: var(--spacing-md);
336
+ --spacing-comp-hero-card-gap-def: var(--spacing-lg);
337
+ --spacing-comp-hero-card-p-def: var(--spacing-2xl);
338
+ --spacing-comp-hero-card-p-sm: var(--spacing-2xl);
275
339
  --spacing-comp-input-gap: var(--spacing-8);
276
340
  --spacing-comp-input-spacing-pin: var(--spacing-8);
277
341
  --spacing-comp-input-p-hor: var(--spacing-24);
@@ -280,11 +344,23 @@
280
344
  --spacing-comp-input-h-large: var(--spacing-64);
281
345
  --spacing-comp-internal-benefits-circle-size: var(--spacing-36);
282
346
  --spacing-comp-login-circle-size: var(--spacing-80);
347
+ --spacing-comp-magazine-card-p: var(--spacing-2xl);
348
+ --spacing-comp-market-card-p-hor: var(--spacing-20);
349
+ --spacing-comp-market-card-p-ver: var(--spacing-24);
350
+ --spacing-comp-market-card-ico-bg-size: var(--spacing-48);
351
+ --spacing-comp-market-category-ico-ico-size-sm: var(--spacing-icon-xsmall);
352
+ --spacing-comp-market-category-ico-bg-size-sm: var(--spacing-24);
353
+ --spacing-comp-market-category-ico-ico-size-lg: var(--spacing-40);
354
+ --spacing-comp-market-category-ico-bg-size-lg: 100px;
283
355
  --spacing-comp-paggination-size: var(--spacing-3xl);
356
+ --spacing-comp-paygate-card-p-hor: var(--spacing-40);
357
+ --spacing-comp-paygate-card-p-ver: var(--spacing-40);
358
+ --spacing-comp-paygate-table-p-hor: var(--spacing-24);
359
+ --spacing-comp-paygate-table-p-ver: var(--spacing-24);
360
+ --spacing-comp-paygate-top-navi-p-hor: var(--spacing-32);
284
361
  --spacing-comp-pin-indicator-stroke-width: var(--spacing-1);
285
362
  --spacing-comp-pin-indicator-size: var(--spacing-12);
286
363
  --spacing-comp-pin-indicator-gap: var(--spacing-4xl);
287
- --spacing-comp-popup-p: var(--spacing-2xl);
288
364
  --spacing-comp-quantity-selector-p-hor: var(--spacing-lg);
289
365
  --spacing-comp-quantity-selector-p-ver: var(--spacing-xl);
290
366
  --spacing-comp-radio-w-stroke: var(--spacing-1);
@@ -325,17 +401,33 @@
325
401
  --spacing-comp-view-client-corner-radius: var(--radius-3xl);
326
402
  --spacing-comp-view-client-ico-bg-size: var(--spacing-3xl);
327
403
  --spacing-comp-view-client-gap: var(--spacing-4xl);
404
+ --spacing-comp-webcheckout-table-p-hor: var(--spacing-lg);
405
+ --spacing-comp-webcheckout-table-p-ver: var(--spacing-lg);
406
+ --spacing-comp-webcheckout-table-cells-p: var(--spacing-lg);
407
+ --spacing-comp-webcheckout-table-cells-h-first-row: var(--spacing-56);
408
+ --spacing-comp-webcheckout-table-cells-h: var(--spacing-64);
409
+ --spacing-icon-xxsmall: var(--spacing-12);
328
410
  --spacing-icon-xsmall: var(--spacing-16);
329
411
  --spacing-icon-medium: var(--spacing-20);
330
412
  --spacing-icon-small: var(--spacing-20);
331
413
  --spacing-icon-large: var(--spacing-24);
332
414
  --spacing-icon-xlarge: var(--spacing-48);
333
415
  --spacing-icon-2xlarge: var(--spacing-56);
416
+ --spacing-layout-p-small: var(--spacing-8);
417
+ --spacing-layout-gap-admin-settings: var(--spacing-32);
418
+ --spacing-layout-gap-small: var(--spacing-32);
419
+ --spacing-layout-gap-webcheckout: var(--spacing-32);
420
+ --spacing-layout-p-top-webcheckout: var(--spacing-32);
334
421
  --spacing-layout-p-top: var(--spacing-40);
422
+ --spacing-layout-p-top-market: var(--spacing-40);
423
+ --spacing-layout-p-top-paygate: var(--spacing-40);
424
+ --spacing-layout-gap-medium: var(--spacing-48);
335
425
  --spacing-layout-p-standard: var(--spacing-48);
336
- --spacing-layout-gap-web: 64px;
337
- --spacing-layout-gap-standard: 112px;
426
+ --spacing-layout-p-top-market-lg: var(--spacing-48);
427
+ --spacing-layout-gap-web: var(--spacing-64);
428
+ --spacing-layout-gap-standard: var(--spacing-112);
338
429
  --spacing-layout-p-bottom: var(--spacing-120);
430
+ --spacing-layout-w-admin-settings: 672px;
339
431
  }
340
432
  }
341
433
 
@@ -362,6 +454,7 @@
362
454
  --spacing-lg: var(--spacing-16);
363
455
  --spacing-xl: var(--spacing-20);
364
456
  --spacing-2xl: var(--spacing-24);
457
+ --spacing-2-5-xl: var(--spacing-28);
365
458
  --spacing-3xl: var(--spacing-32);
366
459
  --spacing-4xl: var(--spacing-40);
367
460
  --spacing-5xl: var(--spacing-48);
@@ -378,6 +471,15 @@
378
471
  --spacing-comp-accordion-settings-p: var(--spacing-lg);
379
472
  --spacing-comp-accordion-settings-corner-radius: var(--radius-xl);
380
473
  --spacing-comp-accordion-settings-gap: var(--spacing-2xl);
474
+ --spacing-comp-account-card-gap-def: var(--spacing-16);
475
+ --spacing-comp-account-card-gap-mf: var(--spacing-16);
476
+ --spacing-comp-account-card-p-hor-def: var(--spacing-16);
477
+ --spacing-comp-account-card-p-ver: var(--spacing-16);
478
+ --spacing-comp-account-card-radius: var(--radius-2xl);
479
+ --spacing-comp-account-card-gap-lg: var(--spacing-24);
480
+ --spacing-comp-account-card-p-hor-lg: var(--spacing-24);
481
+ --spacing-comp-account-icon-radius: var(--radius-md);
482
+ --spacing-comp-account-icon-ico-bg-size: var(--spacing-56);
381
483
  --spacing-comp-admin-header-p-hor: var(--spacing-lg);
382
484
  --spacing-comp-admin-header-p-ver: var(--spacing-3xl);
383
485
  --spacing-comp-admin-header-h: var(--spacing-80);
@@ -422,10 +524,14 @@
422
524
  --spacing-comp-card-dashboard-ico-bg-size: var(--spacing-6xl);
423
525
  --spacing-comp-carousel-circle-size: var(--spacing-24);
424
526
  --spacing-comp-checkbox-w-stroke: var(--spacing-1);
527
+ --spacing-comp-checkout-card-p-bottom: var(--spacing-12);
528
+ --spacing-comp-checkout-card-p-ver: var(--spacing-16);
529
+ --spacing-comp-checkout-card-radius: var(--radius-xl);
530
+ --spacing-comp-checkout-card-p-hor: var(--spacing-24);
425
531
  --spacing-comp-dialog-p: var(--spacing-xl);
426
532
  --spacing-comp-dialog-p-hor-overlay: var(--spacing-xl);
427
- --spacing-comp-dialog-p-hor: var(--spacing-2xl);
428
533
  --spacing-comp-dialog-p-hor-sm: var(--spacing-xl);
534
+ --spacing-comp-dialog-p-hor-def: var(--spacing-2xl);
429
535
  --spacing-comp-dialog-gap: var(--spacing-3xl);
430
536
  --spacing-comp-dialog-img-h: var(--spacing-56);
431
537
  --spacing-comp-dialog-img-w: 100px;
@@ -444,6 +550,10 @@
444
550
  --spacing-comp-header-p-hor-d: var(--spacing-xl);
445
551
  --spacing-comp-help-button-p: var(--spacing-24);
446
552
  --spacing-comp-help-button-h: var(--spacing-48);
553
+ --spacing-comp-hero-card-gap-def: var(--spacing-md);
554
+ --spacing-comp-hero-card-gap-sm: var(--spacing-md);
555
+ --spacing-comp-hero-card-p-def: var(--spacing-2xl);
556
+ --spacing-comp-hero-card-p-sm: var(--spacing-2xl);
447
557
  --spacing-comp-input-gap: var(--spacing-8);
448
558
  --spacing-comp-input-spacing-pin: var(--spacing-8);
449
559
  --spacing-comp-input-p-hor: var(--spacing-20);
@@ -452,11 +562,23 @@
452
562
  --spacing-comp-input-h-large: var(--spacing-64);
453
563
  --spacing-comp-internal-benefits-circle-size: var(--spacing-36);
454
564
  --spacing-comp-login-circle-size: var(--spacing-64);
565
+ --spacing-comp-magazine-card-p: var(--spacing-2xl);
566
+ --spacing-comp-market-card-p-hor: var(--spacing-16);
567
+ --spacing-comp-market-card-p-ver: var(--spacing-16);
568
+ --spacing-comp-market-card-ico-bg-size: var(--spacing-48);
569
+ --spacing-comp-market-category-ico-ico-size-sm: var(--spacing-icon-xsmall);
570
+ --spacing-comp-market-category-ico-bg-size-sm: var(--spacing-24);
571
+ --spacing-comp-market-category-ico-ico-size-lg: var(--spacing-40);
572
+ --spacing-comp-market-category-ico-bg-size-lg: 100px;
455
573
  --spacing-comp-paggination-size: var(--spacing-3xl);
574
+ --spacing-comp-paygate-card-p-ver: var(--spacing-20);
575
+ --spacing-comp-paygate-card-p-hor: var(--spacing-24);
576
+ --spacing-comp-paygate-table-p-ver: var(--spacing-20);
577
+ --spacing-comp-paygate-table-p-hor: var(--spacing-24);
578
+ --spacing-comp-paygate-top-navi-p-hor: var(--spacing-20);
456
579
  --spacing-comp-pin-indicator-stroke-width: var(--spacing-1);
457
580
  --spacing-comp-pin-indicator-size: var(--spacing-12);
458
581
  --spacing-comp-pin-indicator-gap: var(--spacing-4xl);
459
- --spacing-comp-popup-p: var(--spacing-xl);
460
582
  --spacing-comp-quantity-selector-p-hor: var(--spacing-md);
461
583
  --spacing-comp-quantity-selector-p-ver: var(--spacing-lg);
462
584
  --spacing-comp-radio-w-stroke: var(--spacing-1);
@@ -497,17 +619,33 @@
497
619
  --spacing-comp-view-client-p-left: var(--spacing-lg);
498
620
  --spacing-comp-view-client-corner-radius: var(--radius-3xl);
499
621
  --spacing-comp-view-client-ico-bg-size: var(--spacing-3xl);
622
+ --spacing-comp-webcheckout-table-p-hor: var(--spacing-sm);
623
+ --spacing-comp-webcheckout-table-p-ver: var(--spacing-lg);
624
+ --spacing-comp-webcheckout-table-cells-p: var(--spacing-lg);
625
+ --spacing-comp-webcheckout-table-cells-h-first-row: var(--spacing-56);
626
+ --spacing-comp-webcheckout-table-cells-h: var(--spacing-64);
627
+ --spacing-icon-xxsmall: var(--spacing-12);
500
628
  --spacing-icon-xsmall: var(--spacing-16);
501
629
  --spacing-icon-medium: var(--spacing-20);
502
630
  --spacing-icon-small: var(--spacing-20);
503
631
  --spacing-icon-large: var(--spacing-24);
504
632
  --spacing-icon-xlarge: var(--spacing-48);
505
633
  --spacing-icon-2xlarge: var(--spacing-56);
634
+ --spacing-layout-p-small: var(--spacing-8);
506
635
  --spacing-layout-p-standard: var(--spacing-20);
507
- --spacing-layout-gap-web: 48px;
636
+ --spacing-layout-p-top-paygate: var(--spacing-20);
637
+ --spacing-layout-gap-admin-settings: var(--spacing-24);
638
+ --spacing-layout-p-top-market: var(--spacing-24);
639
+ --spacing-layout-gap-small: var(--spacing-32);
640
+ --spacing-layout-gap-webcheckout: var(--spacing-32);
641
+ --spacing-layout-p-top-webcheckout: var(--spacing-32);
642
+ --spacing-layout-p-top-market-lg: var(--spacing-40);
643
+ --spacing-layout-gap-medium: var(--spacing-48);
644
+ --spacing-layout-gap-web: var(--spacing-48);
508
645
  --spacing-layout-p-top: var(--spacing-56);
509
646
  --spacing-layout-p-bottom: var(--spacing-80);
510
- --spacing-layout-gap-standard: 96px;
647
+ --spacing-layout-gap-standard: var(--spacing-96);
648
+ --spacing-layout-w-admin-settings: 335px;
511
649
  }
512
650
  }
513
651
 
@@ -534,6 +672,7 @@
534
672
  --spacing-lg: var(--spacing-16);
535
673
  --spacing-xl: var(--spacing-20);
536
674
  --spacing-2xl: var(--spacing-24);
675
+ --spacing-2-5-xl: var(--spacing-28);
537
676
  --spacing-3xl: var(--spacing-32);
538
677
  --spacing-4xl: var(--spacing-40);
539
678
  --spacing-5xl: var(--spacing-48);
@@ -550,6 +689,15 @@
550
689
  --spacing-comp-accordion-settings-corner-radius: var(--radius-xl);
551
690
  --spacing-comp-accordion-settings-gap: var(--spacing-2xl);
552
691
  --spacing-comp-accordion-settings-p: var(--spacing-2xl);
692
+ --spacing-comp-account-card-gap-def: var(--spacing-16);
693
+ --spacing-comp-account-card-gap-mf: var(--spacing-20);
694
+ --spacing-comp-account-card-radius: var(--radius-2xl);
695
+ --spacing-comp-account-card-gap-lg: var(--spacing-32);
696
+ --spacing-comp-account-card-p-hor-def: var(--spacing-32);
697
+ --spacing-comp-account-card-p-ver: var(--spacing-32);
698
+ --spacing-comp-account-card-p-hor-lg: var(--spacing-40);
699
+ --spacing-comp-account-icon-radius: var(--radius-2xl);
700
+ --spacing-comp-account-icon-ico-bg-size: var(--spacing-96);
553
701
  --spacing-comp-admin-header-p-hor: var(--spacing-lg);
554
702
  --spacing-comp-admin-header-p-ver: var(--spacing-3xl);
555
703
  --spacing-comp-admin-header-h: var(--spacing-80);
@@ -594,8 +742,12 @@
594
742
  --spacing-comp-card-dashboard-p-right: var(--spacing-8xl);
595
743
  --spacing-comp-carousel-circle-size: var(--spacing-28);
596
744
  --spacing-comp-checkbox-w-stroke: var(--spacing-1);
597
- --spacing-comp-dialog-p-hor: var(--spacing-2xl);
745
+ --spacing-comp-checkout-card-p-bottom: var(--spacing-12);
746
+ --spacing-comp-checkout-card-radius: var(--radius-xl);
747
+ --spacing-comp-checkout-card-p-hor: var(--spacing-24);
748
+ --spacing-comp-checkout-card-p-ver: var(--spacing-24);
598
749
  --spacing-comp-dialog-p-hor-sm: var(--spacing-xl);
750
+ --spacing-comp-dialog-p-hor-def: var(--spacing-2xl);
599
751
  --spacing-comp-dialog-p: var(--spacing-3xl);
600
752
  --spacing-comp-dialog-gap: var(--spacing-4xl);
601
753
  --spacing-comp-dialog-p-hor-overlay: var(--spacing-5xl);
@@ -616,6 +768,10 @@
616
768
  --spacing-comp-header-p-hor-d: var(--spacing-xl);
617
769
  --spacing-comp-help-button-p: var(--spacing-32);
618
770
  --spacing-comp-help-button-h: var(--spacing-56);
771
+ --spacing-comp-hero-card-gap-sm: var(--spacing-md);
772
+ --spacing-comp-hero-card-gap-def: var(--spacing-lg);
773
+ --spacing-comp-hero-card-p-sm: var(--spacing-2xl);
774
+ --spacing-comp-hero-card-p-def: var(--spacing-3xl);
619
775
  --spacing-comp-input-gap: var(--spacing-8);
620
776
  --spacing-comp-input-spacing-pin: var(--spacing-8);
621
777
  --spacing-comp-input-p-hor: var(--spacing-24);
@@ -624,11 +780,23 @@
624
780
  --spacing-comp-input-h-large: var(--spacing-64);
625
781
  --spacing-comp-internal-benefits-circle-size: var(--spacing-36);
626
782
  --spacing-comp-login-circle-size: var(--spacing-80);
783
+ --spacing-comp-magazine-card-p: var(--spacing-3xl);
784
+ --spacing-comp-market-card-p-hor: var(--spacing-20);
785
+ --spacing-comp-market-card-p-ver: var(--spacing-24);
786
+ --spacing-comp-market-card-ico-bg-size: var(--spacing-48);
787
+ --spacing-comp-market-category-ico-ico-size-sm: var(--spacing-icon-xsmall);
788
+ --spacing-comp-market-category-ico-bg-size-sm: var(--spacing-24);
789
+ --spacing-comp-market-category-ico-ico-size-lg: var(--spacing-56);
790
+ --spacing-comp-market-category-ico-bg-size-lg: 140px;
627
791
  --spacing-comp-paggination-size: var(--spacing-3xl);
792
+ --spacing-comp-paygate-card-p-hor: var(--spacing-40);
793
+ --spacing-comp-paygate-card-p-ver: var(--spacing-40);
794
+ --spacing-comp-paygate-table-p-hor: var(--spacing-24);
795
+ --spacing-comp-paygate-table-p-ver: var(--spacing-24);
796
+ --spacing-comp-paygate-top-navi-p-hor: var(--spacing-32);
628
797
  --spacing-comp-pin-indicator-stroke-width: var(--spacing-1);
629
798
  --spacing-comp-pin-indicator-size: var(--spacing-12);
630
799
  --spacing-comp-pin-indicator-gap: var(--spacing-4xl);
631
- --spacing-comp-popup-p: var(--spacing-2xl);
632
800
  --spacing-comp-quantity-selector-p-hor: var(--spacing-md);
633
801
  --spacing-comp-quantity-selector-p-ver: var(--spacing-lg);
634
802
  --spacing-comp-radio-w-stroke: var(--spacing-1);
@@ -669,16 +837,32 @@
669
837
  --spacing-comp-view-client-ico-bg-size: var(--spacing-3xl);
670
838
  --spacing-comp-view-client-gap: var(--spacing-4xl);
671
839
  --spacing-comp-view-client-corner-radius: var(--radius-full);
840
+ --spacing-comp-webcheckout-table-p-hor: var(--spacing-lg);
841
+ --spacing-comp-webcheckout-table-p-ver: var(--spacing-lg);
842
+ --spacing-comp-webcheckout-table-cells-p: var(--spacing-lg);
843
+ --spacing-comp-webcheckout-table-cells-h-first-row: var(--spacing-56);
844
+ --spacing-comp-webcheckout-table-cells-h: var(--spacing-64);
672
845
  --spacing-icon-xsmall: var(--spacing-16);
846
+ --spacing-icon-xxsmall: var(--spacing-16);
673
847
  --spacing-icon-small: var(--spacing-20);
674
848
  --spacing-icon-medium: var(--spacing-24);
675
849
  --spacing-icon-large: var(--spacing-32);
676
850
  --spacing-icon-xlarge: var(--spacing-56);
677
851
  --spacing-icon-2xlarge: var(--spacing-64);
852
+ --spacing-layout-gap-webcheckout: var(--spacing-24);
853
+ --spacing-layout-p-top-webcheckout: var(--spacing-24);
854
+ --spacing-layout-gap-small: var(--spacing-40);
855
+ --spacing-layout-p-top: var(--spacing-40);
856
+ --spacing-layout-p-top-market: var(--spacing-40);
857
+ --spacing-layout-p-top-paygate: var(--spacing-40);
858
+ --spacing-layout-p-small: var(--spacing-50);
678
859
  --spacing-layout-p-standard: var(--spacing-50);
679
- --spacing-layout-p-top: var(--spacing-56);
680
- --spacing-layout-gap-web: 96px;
681
- --spacing-layout-gap-standard: 120px;
860
+ --spacing-layout-gap-medium: var(--spacing-64);
861
+ --spacing-layout-p-top-market-lg: var(--spacing-64);
862
+ --spacing-layout-gap-web: var(--spacing-96);
863
+ --spacing-layout-gap-standard: var(--spacing-120);
682
864
  --spacing-layout-p-bottom: var(--spacing-120);
865
+ --spacing-layout-gap-admin-settings: var(--spacing-240);
866
+ --spacing-layout-w-admin-settings: 860px;
683
867
  }
684
868
  }
package/dist/styles/white-label.css CHANGED
@@ -2,6 +2,7 @@
2
2
  /* color */
3
3
  --brand-12: var(--color-transparent-brand-12);
4
4
  --brand-15: var(--color-transparent-brand-15);
5
+ --brand-4: var(--color-transparent-brand-4);
5
6
  --brand-8: var(--color-transparent-brand-8);
6
7
  --brand-disabled: var(--color-purple-200);
7
8
  --brand-focused: var(--color-purple-700);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vkzstudio/muza-ui",
3
- "version": "1.0.18",
3
+ "version": "1.0.20",
4
4
  "description": "React component library built with Vite, shadcn/ui, and Tailwind CSS",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",