@preply/ds-web-lib 4.0.0 → 5.0.0

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 (80) hide show
  1. package/dist/Dialog.module-0O9t3vsj.js +65 -0
  2. package/dist/assets/Accordion.css +2 -2
  3. package/dist/assets/AlertDialog.css +2 -2
  4. package/dist/assets/Avatar.css +3 -3
  5. package/dist/assets/AvatarWithStatus.css +2 -2
  6. package/dist/assets/Badge.css +4 -1
  7. package/dist/assets/Box.css +3 -3
  8. package/dist/assets/BubbleCounter.css +1 -1
  9. package/dist/assets/Button.css +4 -4
  10. package/dist/assets/ButtonBase.css +6 -6
  11. package/dist/assets/Checkbox.css +1 -1
  12. package/dist/assets/Chips.css +2 -2
  13. package/dist/assets/ChipsPrimitive.css +2 -2
  14. package/dist/assets/CountryFlag.css +1 -1
  15. package/dist/assets/Dialog.css +227 -174
  16. package/dist/assets/Divider.css +1 -1
  17. package/dist/assets/FieldButton.css +3 -3
  18. package/dist/assets/FormControl.css +1 -1
  19. package/dist/assets/Heading.css +3 -3
  20. package/dist/assets/Icon.css +3 -3
  21. package/dist/assets/InputContainer.css +2 -2
  22. package/dist/assets/LayoutFlex.css +1 -1
  23. package/dist/assets/LayoutFlexItem.css +1 -1
  24. package/dist/assets/Link.css +3 -3
  25. package/dist/assets/Loader.css +1 -1
  26. package/dist/assets/OnboardingTooltip.css +1 -1
  27. package/dist/assets/OnboardingTour.css +1 -1
  28. package/dist/assets/PreplyLogo.css +1 -1
  29. package/dist/assets/ProgressBar.css +1 -1
  30. package/dist/assets/ProgressSteps.css +1 -1
  31. package/dist/assets/Slider.css +1 -1
  32. package/dist/assets/Spinner.css +3 -3
  33. package/dist/assets/Steps.css +35 -12
  34. package/dist/assets/Switch.css +1 -1
  35. package/dist/assets/Text.css +3 -3
  36. package/dist/assets/TextHighlighted.css +3 -3
  37. package/dist/assets/TextInline.css +3 -3
  38. package/dist/assets/Toast.css +2 -2
  39. package/dist/assets/Tooltip.css +1 -1
  40. package/dist/assets/align-self.css +1 -1
  41. package/dist/assets/color.css +2 -2
  42. package/dist/assets/exp-color.css +2 -2
  43. package/dist/assets/layout-gap.css +3 -3
  44. package/dist/assets/layout-grid.css +3 -3
  45. package/dist/assets/layout-hide.css +1 -1
  46. package/dist/assets/layout-padding.css +3 -3
  47. package/dist/assets/layout-relative.css +1 -1
  48. package/dist/assets/text-accent.css +2 -2
  49. package/dist/assets/text-centered.css +1 -1
  50. package/dist/assets/text-weight.css +2 -2
  51. package/dist/components/Badge/Badge.d.ts +1 -7
  52. package/dist/components/Badge/Badge.d.ts.map +1 -1
  53. package/dist/components/Badge/Badge.js +1 -1
  54. package/dist/components/Dialog/Dialog.d.ts +8 -43
  55. package/dist/components/Dialog/Dialog.d.ts.map +1 -1
  56. package/dist/components/Dialog/Dialog.js +13 -79
  57. package/dist/components/Dialog/DialogActions.d.ts +25 -0
  58. package/dist/components/Dialog/DialogActions.d.ts.map +1 -0
  59. package/dist/components/Dialog/DialogActions.js +23 -0
  60. package/dist/components/Dialog/DialogSteps.d.ts +68 -0
  61. package/dist/components/Dialog/DialogSteps.d.ts.map +1 -0
  62. package/dist/components/Dialog/DialogSteps.js +32 -0
  63. package/dist/components/Dialog/index.d.ts +42 -0
  64. package/dist/components/Dialog/index.d.ts.map +1 -0
  65. package/dist/components/Dialog/index.js +20 -0
  66. package/dist/components/Dialog/private/DialogFooter.d.ts +8 -0
  67. package/dist/components/Dialog/private/DialogFooter.d.ts.map +1 -0
  68. package/dist/components/Dialog/private/DialogFooter.js +34 -0
  69. package/dist/components/Dialog/private/DialogHeader.d.ts +36 -0
  70. package/dist/components/Dialog/private/DialogHeader.d.ts.map +1 -0
  71. package/dist/components/Dialog/private/DialogHeader.js +25 -0
  72. package/dist/components/LayoutFlex/tests/DataOverride.js +36 -36
  73. package/dist/components/Steps/Steps.d.ts.map +1 -1
  74. package/dist/components/Steps/Steps.js +12 -12
  75. package/dist/components/index.d.ts +1 -1
  76. package/dist/components/index.d.ts.map +1 -1
  77. package/dist/components/index.js +7 -1
  78. package/dist/index.js +7 -1
  79. package/dist/utils/useStableCallback/useStableCallback.js +2 -2
  80. package/package.json +14 -14
@@ -1,126 +1,6 @@
1
- /* AUTO GENERATED by support/tools/src/tool/code-generator/output/tokens/web-core-tokens-less.ts @Fri Sep 26 2025 09:44:23 GMT+0000 (Coordinated Universal Time) */
2
- /* AUTO GENERATED by support/tools/src/tool/code-generator/output/breakpoints/web-core-breakpoints-less.ts @Fri Sep 26 2025 09:44:25 GMT+0000 (Coordinated Universal Time) */
3
- /* AUTO GENERATED by support/tools/src/tool/code-generator/output/breakpoints/web-core-breakpoints-less.ts @Fri Sep 26 2025 09:44:25 GMT+0000 (Coordinated Universal Time) */
4
- @-webkit-keyframes overlayShow__9RhbW {
5
- from {
6
- opacity: 0;
7
- }
8
- to {
9
- opacity: 1;
10
- }
11
- }
12
- @keyframes overlayShow__9RhbW {
13
- from {
14
- opacity: 0;
15
- }
16
- to {
17
- opacity: 1;
18
- }
19
- }
20
- @-webkit-keyframes overlayHide__jsj3I {
21
- from {
22
- opacity: 1;
23
- }
24
- to {
25
- opacity: 0;
26
- }
27
- }
28
- @keyframes overlayHide__jsj3I {
29
- from {
30
- opacity: 1;
31
- }
32
- to {
33
- opacity: 0;
34
- }
35
- }
36
- @-webkit-keyframes contentShow__19MY3 {
37
- from {
38
- opacity: 0;
39
- -webkit-transform: translateY(var(--b53873));
40
- transform: translateY(var(--b53873));
41
- }
42
- to {
43
- opacity: 1;
44
- -webkit-transform: translateY(0);
45
- transform: translateY(0);
46
- }
47
- }
48
- @keyframes contentShow__19MY3 {
49
- from {
50
- opacity: 0;
51
- -webkit-transform: translateY(var(--b53873));
52
- transform: translateY(var(--b53873));
53
- }
54
- to {
55
- opacity: 1;
56
- -webkit-transform: translateY(0);
57
- transform: translateY(0);
58
- }
59
- }
60
- @-webkit-keyframes contentHide__tqdpC {
61
- from {
62
- opacity: 1;
63
- -webkit-transform: translateY(0);
64
- transform: translateY(0);
65
- }
66
- to {
67
- opacity: 0;
68
- -webkit-transform: translateY(var(--b53873));
69
- transform: translateY(var(--b53873));
70
- }
71
- }
72
- @keyframes contentHide__tqdpC {
73
- from {
74
- opacity: 1;
75
- -webkit-transform: translateY(0);
76
- transform: translateY(0);
77
- }
78
- to {
79
- opacity: 0;
80
- -webkit-transform: translateY(var(--b53873));
81
- transform: translateY(var(--b53873));
82
- }
83
- }
84
- @-webkit-keyframes mobileContentShow__U0Qy- {
85
- from {
86
- -webkit-transform: translateY(100%);
87
- transform: translateY(100%);
88
- }
89
- to {
90
- -webkit-transform: translateY(0);
91
- transform: translateY(0);
92
- }
93
- }
94
- @keyframes mobileContentShow__U0Qy- {
95
- from {
96
- -webkit-transform: translateY(100%);
97
- transform: translateY(100%);
98
- }
99
- to {
100
- -webkit-transform: translateY(0);
101
- transform: translateY(0);
102
- }
103
- }
104
- @-webkit-keyframes mobileContentHide__90KRP {
105
- from {
106
- -webkit-transform: translateY(0);
107
- transform: translateY(0);
108
- }
109
- to {
110
- -webkit-transform: translateY(100%);
111
- transform: translateY(100%);
112
- }
113
- }
114
- @keyframes mobileContentHide__90KRP {
115
- from {
116
- -webkit-transform: translateY(0);
117
- transform: translateY(0);
118
- }
119
- to {
120
- -webkit-transform: translateY(100%);
121
- transform: translateY(100%);
122
- }
123
- }
1
+ /* AUTO GENERATED by support/tools/src/tool/code-generator/output/tokens/web-core-tokens-less.ts @Thu Oct 02 2025 15:30:32 GMT+0000 (Coordinated Universal Time) */
2
+ /* AUTO GENERATED by support/tools/src/tool/code-generator/output/breakpoints/web-core-breakpoints-less.ts @Thu Oct 02 2025 15:30:34 GMT+0000 (Coordinated Universal Time) */
3
+ /* AUTO GENERATED by support/tools/src/tool/code-generator/output/breakpoints/web-core-breakpoints-less.ts @Thu Oct 02 2025 15:30:34 GMT+0000 (Coordinated Universal Time) */
124
4
  .overlay__otkvG {
125
5
  background-color: var(--02a0d5);
126
6
  position: fixed;
@@ -132,16 +12,27 @@
132
12
  z-index: var(--ds-dialog-overlay-z-index-override, auto);
133
13
  }
134
14
  @media (prefers-reduced-motion: no-preference) {
15
+ .overlay__otkvG {
16
+ -webkit-animation-duration: var(--970975);
17
+ animation-duration: var(--970975);
18
+ -webkit-animation-timing-function: var(--1f4492);
19
+ animation-timing-function: var(--1f4492);
20
+ }
135
21
  .overlay__otkvG[data-state='open'] {
136
- -webkit-animation: overlayShow__9RhbW 150ms cubic-bezier(0.4, 0, 0.2, 1);
137
- animation: overlayShow__9RhbW 150ms cubic-bezier(0.4, 0, 0.2, 1);
22
+ -webkit-animation-name: opacityIn__p29KJ;
23
+ animation-name: opacityIn__p29KJ;
138
24
  }
139
25
  .overlay__otkvG[data-state='closed'] {
140
- -webkit-animation: overlayHide__jsj3I 150ms cubic-bezier(0.4, 0, 0.2, 1);
141
- animation: overlayHide__jsj3I 150ms cubic-bezier(0.4, 0, 0.2, 1);
26
+ -webkit-animation-name: opacityOut__4QmKk;
27
+ animation-name: opacityOut__4QmKk;
142
28
  }
143
29
  }
144
30
  .Dialog__kEfBp {
31
+ --dialog-padding: var(--1e685c);
32
+ --slide-animation-distance: 100%;
33
+ --show-animation-name: slideInUp__Ni5JT;
34
+ --hide-animation-name: slideOutDown__g4ZMG;
35
+ --content-padding-adjustment-for-close-button: calc(calc(var(--5eca09) + var(--813599) + var(--590b8d)) - var(--dialog-padding));
145
36
  -webkit-box-sizing: border-box;
146
37
  box-sizing: border-box;
147
38
  background-color: var(--3546c3);
@@ -160,9 +51,7 @@
160
51
  border-top-right-radius: var(--fa4b1a);
161
52
  -webkit-box-shadow: var(--df7dbb);
162
53
  box-shadow: var(--df7dbb);
163
- --dialog-padding: var(--f1b498);
164
- --dialog-mobile-inline-padding: var(--558c4c);
165
- padding: var(--dialog-padding) var(--dialog-mobile-inline-padding);
54
+ padding: var(--dialog-padding);
166
55
  z-index: auto;
167
56
  z-index: var(--ds-dialog-content-z-index-override, auto);
168
57
  }
@@ -173,25 +62,37 @@
173
62
  border-radius: 0;
174
63
  }
175
64
  @media (prefers-reduced-motion: no-preference) {
65
+ .Dialog__kEfBp {
66
+ -webkit-animation-duration: 300ms;
67
+ animation-duration: 300ms;
68
+ -webkit-animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
69
+ animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
70
+ }
176
71
  .Dialog__kEfBp[data-state='open'] {
177
- -webkit-animation: mobileContentShow__U0Qy- 250ms cubic-bezier(0.4, 0, 0.2, 1);
178
- animation: mobileContentShow__U0Qy- 250ms cubic-bezier(0.4, 0, 0.2, 1);
72
+ -webkit-animation-name: var(--show-animation-name);
73
+ animation-name: var(--show-animation-name);
179
74
  }
180
75
  .Dialog__kEfBp[data-state='closed'] {
181
- -webkit-animation: mobileContentHide__90KRP 250ms cubic-bezier(0.4, 0, 0.2, 1);
182
- animation: mobileContentHide__90KRP 250ms cubic-bezier(0.4, 0, 0.2, 1);
76
+ -webkit-animation-name: var(--hide-animation-name);
77
+ animation-name: var(--hide-animation-name);
183
78
  }
184
79
  }
185
80
  @media (min-width: 880px) {
186
81
  .Dialog__kEfBp {
82
+ --dialog-padding: var(--f1b498);
83
+ --slide-animation-distance: 40px;
84
+ --show-animation-name: slideInUp__Ni5JT, opacityIn__p29KJ;
85
+ --hide-animation-name: slideOutDown__g4ZMG, opacityOut__4QmKk;
187
86
  top: 0;
188
87
  height: -webkit-fit-content;
189
88
  height: -moz-fit-content;
190
89
  height: fit-content;
191
90
  border-radius: var(--fa4b1a);
192
- padding: var(--dialog-padding);
193
91
  max-height: calc(100% - var(--42fccf));
194
92
  }
93
+ .Dialog__kEfBp.slidesUp__P7Bjm {
94
+ --hide-animation-name: slideOutUp__FRb6L, opacityOut__4QmKk;
95
+ }
195
96
  .Dialog--size-xs__p2N5- {
196
97
  width: 440px;
197
98
  height: -webkit-fit-content;
@@ -217,16 +118,6 @@
217
118
  height: fit-content;
218
119
  }
219
120
  }
220
- @media (min-width: 880px) and (prefers-reduced-motion: no-preference) {
221
- .Dialog__kEfBp[data-state='open'] {
222
- -webkit-animation: contentShow__19MY3 150ms cubic-bezier(0.4, 0, 0.2, 1);
223
- animation: contentShow__19MY3 150ms cubic-bezier(0.4, 0, 0.2, 1);
224
- }
225
- .Dialog__kEfBp[data-state='closed'] {
226
- -webkit-animation: contentHide__tqdpC 150ms cubic-bezier(0.4, 0, 0.2, 1);
227
- animation: contentHide__tqdpC 150ms cubic-bezier(0.4, 0, 0.2, 1);
228
- }
229
- }
230
121
  @media (min-width: 880px) and (min-width: 400px) {
231
122
  .Dialog--narrow-l--size-xs__S-4vk {
232
123
  width: 440px;
@@ -387,19 +278,34 @@
387
278
  height: fit-content;
388
279
  }
389
280
  }
390
- .Dialog__kEfBp .header__ADm9A {
281
+ .Dialog__kEfBp > .close__-TGOq {
282
+ position: absolute;
283
+ top: var(--813599);
284
+ right: var(--813599);
285
+ z-index: 1;
286
+ }
287
+ .Dialog__kEfBp:has(.footer__xkM-4) {
288
+ padding-bottom: 0;
289
+ }
290
+ .scrollEndDetector__Zrfqq {
291
+ height: 1px;
292
+ margin-top: -1px;
293
+ }
294
+ .header__ADm9A {
295
+ padding-right: 0;
296
+ padding-right: initial;
297
+ padding-right: var(--content-padding-adjustment-for-close-button, unset);
298
+ margin-bottom: var(--b53873);
391
299
  display: -webkit-box;
392
300
  display: -ms-flexbox;
393
301
  display: flex;
394
- -webkit-box-align: start;
395
- -ms-flex-align: start;
396
- align-items: flex-start;
397
- -webkit-box-pack: justify;
398
- -ms-flex-pack: justify;
399
- justify-content: space-between;
302
+ -webkit-box-orient: vertical;
303
+ -webkit-box-direction: normal;
304
+ -ms-flex-direction: column;
305
+ flex-direction: column;
400
306
  gap: var(--558c4c);
401
307
  }
402
- .Dialog__kEfBp .header__ADm9A > hgroup {
308
+ .header__ADm9A > hgroup {
403
309
  display: -webkit-box;
404
310
  display: -ms-flexbox;
405
311
  display: flex;
@@ -407,14 +313,17 @@
407
313
  -webkit-box-direction: normal;
408
314
  -ms-flex-direction: column;
409
315
  flex-direction: column;
410
- gap: var(--66b80b);
316
+ gap: var(--590b8d);
411
317
  -webkit-box-flex: 1;
412
318
  -ms-flex: 1;
413
319
  flex: 1;
414
- min-width: 0;
415
- margin-bottom: var(--558c4c);
416
320
  }
417
- .Dialog__kEfBp .header__ADm9A > hgroup[hidden] {
321
+ @media (min-width: 880px) {
322
+ .header__ADm9A > hgroup {
323
+ gap: var(--66b80b);
324
+ }
325
+ }
326
+ .header__ADm9A[hidden] {
418
327
  clip: rect(0 0 0 0);
419
328
  clip-path: inset(50%);
420
329
  height: 1px;
@@ -423,16 +332,27 @@
423
332
  white-space: nowrap;
424
333
  width: 1px;
425
334
  }
426
- .Dialog__kEfBp .header__ADm9A > button {
427
- margin-left: auto;
335
+ @media (min-width: 880px) {
336
+ .header__ADm9A {
337
+ margin-bottom: var(--1e685c);
338
+ gap: var(--b53873);
339
+ }
340
+ }
341
+ .footer__xkM-4 {
342
+ padding: var(--dialog-padding);
343
+ margin-left: calc(-1 * var(--dialog-padding));
344
+ margin-right: calc(-1 * var(--dialog-padding));
345
+ background-color: var(--3546c3);
346
+ position: sticky;
347
+ bottom: 0;
348
+ border-top: 1px solid transparent;
349
+ -webkit-transition: border-color var(--970975) var(--1f4492);
350
+ transition: border-color var(--970975) var(--1f4492);
428
351
  }
429
- .Dialog__kEfBp .description__84a0F {
430
- font-size: var(--9c8f04);
431
- font-weight: var(--1bc44d);
432
- line-height: var(--3dd5bc);
433
- margin: 0;
352
+ .footer__xkM-4.sticky__fB3an {
353
+ border-color: var(--c03289);
434
354
  }
435
- .Dialog__kEfBp .actions__QrK7- {
355
+ .actions__QrK7- {
436
356
  display: -webkit-box;
437
357
  display: -ms-flexbox;
438
358
  display: flex;
@@ -440,17 +360,10 @@
440
360
  -webkit-box-direction: reverse;
441
361
  -ms-flex-direction: column-reverse;
442
362
  flex-direction: column-reverse;
443
- gap: var(--558c4c);
444
- padding-top: var(--558c4c);
445
- padding-bottom: var(--558c4c);
446
- background-color: var(--3546c3);
447
- position: sticky;
448
- --dialog-block-padding-offset: calc(-1 * var(--dialog-padding));
449
- bottom: var(--dialog-block-padding-offset);
450
- margin-bottom: var(--dialog-block-padding-offset);
363
+ gap: var(--813599);
451
364
  }
452
365
  @media (min-width: 400px) {
453
- .Dialog__kEfBp .actions__QrK7- {
366
+ .actions__QrK7- {
454
367
  -webkit-box-orient: horizontal;
455
368
  -webkit-box-direction: normal;
456
369
  -ms-flex-direction: row;
@@ -460,3 +373,143 @@
460
373
  justify-content: flex-end;
461
374
  }
462
375
  }
376
+ .stepsActions__V4CIE {
377
+ display: -webkit-box;
378
+ display: -ms-flexbox;
379
+ display: flex;
380
+ -ms-flex-wrap: wrap-reverse;
381
+ flex-wrap: wrap-reverse;
382
+ gap: var(--813599);
383
+ /*
384
+ * We're setting `flex: 1` for prev button and `flex: 666` for the next button
385
+ * to make prev button shrink if buttons on the same line, but grow
386
+ * if next button is wrapped to the next line.
387
+ */
388
+ }
389
+ .stepsActions__V4CIE .previous__q2IlS {
390
+ -webkit-box-flex: 1;
391
+ -ms-flex: 1;
392
+ flex: 1;
393
+ }
394
+ .stepsActions__V4CIE .previous__q2IlS [data-preply-ds-component='Button'] {
395
+ padding-left: var(--558c4c);
396
+ padding-right: var(--558c4c);
397
+ }
398
+ @media (min-width: 700px) {
399
+ .stepsActions__V4CIE .previous__q2IlS {
400
+ margin-left: calc(-1 * (var(--0b1b71) + var(--558c4c)));
401
+ }
402
+ }
403
+ .stepsActions__V4CIE .next__h6v4X {
404
+ -webkit-box-flex: 666;
405
+ -ms-flex: 666;
406
+ flex: 666;
407
+ }
408
+ .stepsActions__V4CIE .next__h6v4X:only-child {
409
+ margin-left: auto;
410
+ }
411
+ @media (min-width: 700px) {
412
+ .stepsActions__V4CIE {
413
+ -webkit-box-pack: justify;
414
+ -ms-flex-pack: justify;
415
+ justify-content: space-between;
416
+ }
417
+ .stepsActions__V4CIE .previous__q2IlS,
418
+ .stepsActions__V4CIE .next__h6v4X {
419
+ -webkit-box-flex: initial;
420
+ -ms-flex: initial;
421
+ flex: initial;
422
+ }
423
+ }
424
+ @-webkit-keyframes opacityIn__p29KJ {
425
+ from {
426
+ opacity: 0;
427
+ }
428
+ to {
429
+ opacity: 1;
430
+ }
431
+ }
432
+ @keyframes opacityIn__p29KJ {
433
+ from {
434
+ opacity: 0;
435
+ }
436
+ to {
437
+ opacity: 1;
438
+ }
439
+ }
440
+ @-webkit-keyframes opacityOut__4QmKk {
441
+ from {
442
+ opacity: 1;
443
+ }
444
+ to {
445
+ opacity: 0;
446
+ }
447
+ }
448
+ @keyframes opacityOut__4QmKk {
449
+ from {
450
+ opacity: 1;
451
+ }
452
+ to {
453
+ opacity: 0;
454
+ }
455
+ }
456
+ @-webkit-keyframes slideInUp__Ni5JT {
457
+ from {
458
+ -webkit-transform: translateY(var(--slide-animation-distance));
459
+ transform: translateY(var(--slide-animation-distance));
460
+ }
461
+ to {
462
+ -webkit-transform: translateY(0);
463
+ transform: translateY(0);
464
+ }
465
+ }
466
+ @keyframes slideInUp__Ni5JT {
467
+ from {
468
+ -webkit-transform: translateY(var(--slide-animation-distance));
469
+ transform: translateY(var(--slide-animation-distance));
470
+ }
471
+ to {
472
+ -webkit-transform: translateY(0);
473
+ transform: translateY(0);
474
+ }
475
+ }
476
+ @-webkit-keyframes slideOutDown__g4ZMG {
477
+ from {
478
+ -webkit-transform: translateY(0);
479
+ transform: translateY(0);
480
+ }
481
+ to {
482
+ -webkit-transform: translateY(var(--slide-animation-distance));
483
+ transform: translateY(var(--slide-animation-distance));
484
+ }
485
+ }
486
+ @keyframes slideOutDown__g4ZMG {
487
+ from {
488
+ -webkit-transform: translateY(0);
489
+ transform: translateY(0);
490
+ }
491
+ to {
492
+ -webkit-transform: translateY(var(--slide-animation-distance));
493
+ transform: translateY(var(--slide-animation-distance));
494
+ }
495
+ }
496
+ @-webkit-keyframes slideOutUp__FRb6L {
497
+ from {
498
+ -webkit-transform: translateY(0);
499
+ transform: translateY(0);
500
+ }
501
+ to {
502
+ -webkit-transform: translateY(calc(-1 * var(--slide-animation-distance)));
503
+ transform: translateY(calc(-1 * var(--slide-animation-distance)));
504
+ }
505
+ }
506
+ @keyframes slideOutUp__FRb6L {
507
+ from {
508
+ -webkit-transform: translateY(0);
509
+ transform: translateY(0);
510
+ }
511
+ to {
512
+ -webkit-transform: translateY(calc(-1 * var(--slide-animation-distance)));
513
+ transform: translateY(calc(-1 * var(--slide-animation-distance)));
514
+ }
515
+ }
@@ -1,4 +1,4 @@
1
- /* AUTO GENERATED by support/tools/src/tool/code-generator/output/tokens/web-core-tokens-less.ts @Fri Sep 26 2025 09:44:23 GMT+0000 (Coordinated Universal Time) */
1
+ /* AUTO GENERATED by support/tools/src/tool/code-generator/output/tokens/web-core-tokens-less.ts @Thu Oct 02 2025 15:30:32 GMT+0000 (Coordinated Universal Time) */
2
2
  .Divider__kU514 {
3
3
  all: unset;
4
4
  display: block;
@@ -1,6 +1,6 @@
1
- /* AUTO GENERATED by support/tools/src/tool/code-generator/output/tokens/web-core-tokens-less.ts @Fri Sep 26 2025 09:44:23 GMT+0000 (Coordinated Universal Time) */
2
- /* AUTO GENERATED by support/tools/src/tool/code-generator/output/breakpoints/web-core-breakpoints-less.ts @Fri Sep 26 2025 09:44:25 GMT+0000 (Coordinated Universal Time) */
3
- /* AUTO GENERATED by support/tools/src/tool/code-generator/output/hover/web-core-hover-less.ts @Fri Sep 26 2025 09:44:25 GMT+0000 (Coordinated Universal Time) */
1
+ /* AUTO GENERATED by support/tools/src/tool/code-generator/output/tokens/web-core-tokens-less.ts @Thu Oct 02 2025 15:30:32 GMT+0000 (Coordinated Universal Time) */
2
+ /* AUTO GENERATED by support/tools/src/tool/code-generator/output/breakpoints/web-core-breakpoints-less.ts @Thu Oct 02 2025 15:30:34 GMT+0000 (Coordinated Universal Time) */
3
+ /* AUTO GENERATED by support/tools/src/tool/code-generator/output/hover/web-core-hover-less.ts @Thu Oct 02 2025 15:30:34 GMT+0000 (Coordinated Universal Time) */
4
4
  .FieldButton__OWtNd {
5
5
  display: -webkit-box;
6
6
  display: -ms-flexbox;
@@ -1,4 +1,4 @@
1
- /* AUTO GENERATED by support/tools/src/tool/code-generator/output/tokens/web-core-tokens-less.ts @Fri Sep 26 2025 09:44:23 GMT+0000 (Coordinated Universal Time) */
1
+ /* AUTO GENERATED by support/tools/src/tool/code-generator/output/tokens/web-core-tokens-less.ts @Thu Oct 02 2025 15:30:32 GMT+0000 (Coordinated Universal Time) */
2
2
  .container__dtKps {
3
3
  --ds-input-scroll-margin-top: var(--d434fb);
4
4
  display: -webkit-box;
@@ -1,6 +1,6 @@
1
- /* AUTO GENERATED by support/tools/src/tool/code-generator/output/tokens/web-core-tokens-less.ts @Fri Sep 26 2025 09:44:23 GMT+0000 (Coordinated Universal Time) */
2
- /* AUTO GENERATED by support/tools/src/tool/code-generator/output/types/web-core-options-less.ts @Fri Sep 26 2025 09:44:22 GMT+0000 (Coordinated Universal Time) */
3
- /* AUTO GENERATED by support/tools/src/tool/code-generator/output/breakpoints/web-core-breakpoints-less.ts @Fri Sep 26 2025 09:44:25 GMT+0000 (Coordinated Universal Time) */
1
+ /* AUTO GENERATED by support/tools/src/tool/code-generator/output/tokens/web-core-tokens-less.ts @Thu Oct 02 2025 15:30:32 GMT+0000 (Coordinated Universal Time) */
2
+ /* AUTO GENERATED by support/tools/src/tool/code-generator/output/types/web-core-options-less.ts @Thu Oct 02 2025 15:30:31 GMT+0000 (Coordinated Universal Time) */
3
+ /* AUTO GENERATED by support/tools/src/tool/code-generator/output/breakpoints/web-core-breakpoints-less.ts @Thu Oct 02 2025 15:30:34 GMT+0000 (Coordinated Universal Time) */
4
4
  .Heading__Lv13n {
5
5
  -webkit-font-smoothing: antialiased;
6
6
  text-rendering: optimizeLegibility;
@@ -1,6 +1,6 @@
1
- /* AUTO GENERATED by support/tools/src/tool/code-generator/output/tokens/web-core-tokens-less.ts @Fri Sep 26 2025 09:44:23 GMT+0000 (Coordinated Universal Time) */
2
- /* AUTO GENERATED by support/tools/src/tool/code-generator/output/types/web-core-options-less.ts @Fri Sep 26 2025 09:44:22 GMT+0000 (Coordinated Universal Time) */
3
- /* AUTO GENERATED by support/tools/src/tool/code-generator/output/breakpoints/web-core-breakpoints-less.ts @Fri Sep 26 2025 09:44:25 GMT+0000 (Coordinated Universal Time) */
1
+ /* AUTO GENERATED by support/tools/src/tool/code-generator/output/tokens/web-core-tokens-less.ts @Thu Oct 02 2025 15:30:32 GMT+0000 (Coordinated Universal Time) */
2
+ /* AUTO GENERATED by support/tools/src/tool/code-generator/output/types/web-core-options-less.ts @Thu Oct 02 2025 15:30:31 GMT+0000 (Coordinated Universal Time) */
3
+ /* AUTO GENERATED by support/tools/src/tool/code-generator/output/breakpoints/web-core-breakpoints-less.ts @Thu Oct 02 2025 15:30:34 GMT+0000 (Coordinated Universal Time) */
4
4
  .Icon__jDdMD {
5
5
  display: inline-block;
6
6
  vertical-align: text-top;
@@ -1,5 +1,5 @@
1
- /* AUTO GENERATED by support/tools/src/tool/code-generator/output/tokens/web-core-tokens-less.ts @Fri Sep 26 2025 09:44:23 GMT+0000 (Coordinated Universal Time) */
2
- /* AUTO GENERATED by support/tools/src/tool/code-generator/output/hover/web-core-hover-less.ts @Fri Sep 26 2025 09:44:25 GMT+0000 (Coordinated Universal Time) */
1
+ /* AUTO GENERATED by support/tools/src/tool/code-generator/output/tokens/web-core-tokens-less.ts @Thu Oct 02 2025 15:30:32 GMT+0000 (Coordinated Universal Time) */
2
+ /* AUTO GENERATED by support/tools/src/tool/code-generator/output/hover/web-core-hover-less.ts @Thu Oct 02 2025 15:30:34 GMT+0000 (Coordinated Universal Time) */
3
3
  .container__B-gQ9 {
4
4
  width: 100%;
5
5
  position: relative;
@@ -1,4 +1,4 @@
1
- /* AUTO GENERATED by support/tools/src/tool/code-generator/output/breakpoints/web-core-breakpoints-less.ts @Fri Sep 26 2025 09:44:25 GMT+0000 (Coordinated Universal Time) */
1
+ /* AUTO GENERATED by support/tools/src/tool/code-generator/output/breakpoints/web-core-breakpoints-less.ts @Thu Oct 02 2025 15:30:34 GMT+0000 (Coordinated Universal Time) */
2
2
  [data-preply-ds-component="LayoutFlex"] {
3
3
  display: -webkit-box;
4
4
  display: -ms-flexbox;
@@ -1,4 +1,4 @@
1
- /* AUTO GENERATED by support/tools/src/tool/code-generator/output/breakpoints/web-core-breakpoints-less.ts @Fri Sep 26 2025 09:44:25 GMT+0000 (Coordinated Universal Time) */
1
+ /* AUTO GENERATED by support/tools/src/tool/code-generator/output/breakpoints/web-core-breakpoints-less.ts @Thu Oct 02 2025 15:30:34 GMT+0000 (Coordinated Universal Time) */
2
2
  .LayoutFlexItem__0eYcj {
3
3
  padding: 0;
4
4
  margin: 0;
@@ -1,6 +1,6 @@
1
- /* AUTO GENERATED by support/tools/src/tool/code-generator/output/tokens/web-core-tokens-less.ts @Fri Sep 26 2025 09:44:23 GMT+0000 (Coordinated Universal Time) */
2
- /* AUTO GENERATED by support/tools/src/tool/code-generator/output/types/web-core-options-less.ts @Fri Sep 26 2025 09:44:22 GMT+0000 (Coordinated Universal Time) */
3
- /* AUTO GENERATED by support/tools/src/tool/code-generator/output/breakpoints/web-core-breakpoints-less.ts @Fri Sep 26 2025 09:44:25 GMT+0000 (Coordinated Universal Time) */
1
+ /* AUTO GENERATED by support/tools/src/tool/code-generator/output/tokens/web-core-tokens-less.ts @Thu Oct 02 2025 15:30:32 GMT+0000 (Coordinated Universal Time) */
2
+ /* AUTO GENERATED by support/tools/src/tool/code-generator/output/types/web-core-options-less.ts @Thu Oct 02 2025 15:30:31 GMT+0000 (Coordinated Universal Time) */
3
+ /* AUTO GENERATED by support/tools/src/tool/code-generator/output/breakpoints/web-core-breakpoints-less.ts @Thu Oct 02 2025 15:30:34 GMT+0000 (Coordinated Universal Time) */
4
4
  .Link__0oP-l {
5
5
  display: inline-block;
6
6
  border-radius: var(--5eeb28);
@@ -1,4 +1,4 @@
1
- /* AUTO GENERATED by support/tools/src/tool/code-generator/output/tokens/web-core-tokens-less.ts @Fri Sep 26 2025 09:44:23 GMT+0000 (Coordinated Universal Time) */
1
+ /* AUTO GENERATED by support/tools/src/tool/code-generator/output/tokens/web-core-tokens-less.ts @Thu Oct 02 2025 15:30:32 GMT+0000 (Coordinated Universal Time) */
2
2
  .Loader__sOe0E {
3
3
  display: -webkit-inline-box;
4
4
  display: -ms-inline-flexbox;
@@ -1,4 +1,4 @@
1
- /* AUTO GENERATED by support/tools/src/tool/code-generator/output/tokens/web-core-tokens-less.ts @Fri Sep 26 2025 09:44:23 GMT+0000 (Coordinated Universal Time) */
1
+ /* AUTO GENERATED by support/tools/src/tool/code-generator/output/tokens/web-core-tokens-less.ts @Thu Oct 02 2025 15:30:32 GMT+0000 (Coordinated Universal Time) */
2
2
  .content__n7yV2 {
3
3
  background-color: var(--79dffb);
4
4
  border-radius: var(--fa4b1a);
@@ -1,4 +1,4 @@
1
- /* AUTO GENERATED by support/tools/src/tool/code-generator/output/tokens/web-core-tokens-less.ts @Fri Sep 26 2025 09:44:23 GMT+0000 (Coordinated Universal Time) */
1
+ /* AUTO GENERATED by support/tools/src/tool/code-generator/output/tokens/web-core-tokens-less.ts @Thu Oct 02 2025 15:30:32 GMT+0000 (Coordinated Universal Time) */
2
2
  .counter__e0-bi {
3
3
  -webkit-box-flex: 1;
4
4
  -ms-flex: 1;
@@ -1,4 +1,4 @@
1
- /* AUTO GENERATED by support/tools/src/tool/code-generator/output/tokens/web-core-tokens-less.ts @Fri Sep 26 2025 09:44:23 GMT+0000 (Coordinated Universal Time) */
1
+ /* AUTO GENERATED by support/tools/src/tool/code-generator/output/tokens/web-core-tokens-less.ts @Thu Oct 02 2025 15:30:32 GMT+0000 (Coordinated Universal Time) */
2
2
  .PreplyLogo__Grf-P {
3
3
  display: inline-block;
4
4
  }
@@ -1,4 +1,4 @@
1
- /* AUTO GENERATED by support/tools/src/tool/code-generator/output/tokens/web-core-tokens-less.ts @Fri Sep 26 2025 09:44:23 GMT+0000 (Coordinated Universal Time) */
1
+ /* AUTO GENERATED by support/tools/src/tool/code-generator/output/tokens/web-core-tokens-less.ts @Thu Oct 02 2025 15:30:32 GMT+0000 (Coordinated Universal Time) */
2
2
  .ProgressBar__BR9lE {
3
3
  display: block;
4
4
  height: var(--c484d1);
@@ -1,4 +1,4 @@
1
- /* AUTO GENERATED by support/tools/src/tool/code-generator/output/tokens/web-core-tokens-less.ts @Fri Sep 26 2025 09:44:23 GMT+0000 (Coordinated Universal Time) */
1
+ /* AUTO GENERATED by support/tools/src/tool/code-generator/output/tokens/web-core-tokens-less.ts @Thu Oct 02 2025 15:30:32 GMT+0000 (Coordinated Universal Time) */
2
2
  .ProgressSteps__FoPeH {
3
3
  display: -webkit-box;
4
4
  display: -ms-flexbox;
@@ -1,4 +1,4 @@
1
- /* AUTO GENERATED by support/tools/src/tool/code-generator/output/tokens/web-core-tokens-less.ts @Fri Sep 26 2025 09:44:23 GMT+0000 (Coordinated Universal Time) */
1
+ /* AUTO GENERATED by support/tools/src/tool/code-generator/output/tokens/web-core-tokens-less.ts @Thu Oct 02 2025 15:30:32 GMT+0000 (Coordinated Universal Time) */
2
2
  .root__QwW3E {
3
3
  height: var(--7789ee);
4
4
  position: relative;
@@ -1,6 +1,6 @@
1
- /* AUTO GENERATED by support/tools/src/tool/code-generator/output/tokens/web-core-tokens-less.ts @Fri Sep 26 2025 09:44:23 GMT+0000 (Coordinated Universal Time) */
2
- /* AUTO GENERATED by support/tools/src/tool/code-generator/output/types/web-core-options-less.ts @Fri Sep 26 2025 09:44:22 GMT+0000 (Coordinated Universal Time) */
3
- /* AUTO GENERATED by support/tools/src/tool/code-generator/output/breakpoints/web-core-breakpoints-less.ts @Fri Sep 26 2025 09:44:25 GMT+0000 (Coordinated Universal Time) */
1
+ /* AUTO GENERATED by support/tools/src/tool/code-generator/output/tokens/web-core-tokens-less.ts @Thu Oct 02 2025 15:30:32 GMT+0000 (Coordinated Universal Time) */
2
+ /* AUTO GENERATED by support/tools/src/tool/code-generator/output/types/web-core-options-less.ts @Thu Oct 02 2025 15:30:31 GMT+0000 (Coordinated Universal Time) */
3
+ /* AUTO GENERATED by support/tools/src/tool/code-generator/output/breakpoints/web-core-breakpoints-less.ts @Thu Oct 02 2025 15:30:34 GMT+0000 (Coordinated Universal Time) */
4
4
  @-webkit-keyframes spin__6opuF {
5
5
  from {
6
6
  -webkit-transform: rotate(0deg);