@transferwise/components 46.160.0 → 46.160.1

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 (121) hide show
  1. package/build/ExpressiveMoneyInput/Chevron/Chevron.js +10 -2
  2. package/build/ExpressiveMoneyInput/Chevron/Chevron.js.map +1 -1
  3. package/build/ExpressiveMoneyInput/Chevron/Chevron.mjs +11 -3
  4. package/build/ExpressiveMoneyInput/Chevron/Chevron.mjs.map +1 -1
  5. package/build/ProcessIndicator/ProcessIndicator.js +1 -1
  6. package/build/ProcessIndicator/ProcessIndicator.js.map +1 -1
  7. package/build/ProcessIndicator/ProcessIndicator.mjs +1 -1
  8. package/build/ProcessIndicator/ProcessIndicator.mjs.map +1 -1
  9. package/build/Prompt/CriticalBanner/CriticalBanner.js +10 -1
  10. package/build/Prompt/CriticalBanner/CriticalBanner.js.map +1 -1
  11. package/build/Prompt/CriticalBanner/CriticalBanner.mjs +10 -1
  12. package/build/Prompt/CriticalBanner/CriticalBanner.mjs.map +1 -1
  13. package/build/common/Panel/Panel.js +13 -25
  14. package/build/common/Panel/Panel.js.map +1 -1
  15. package/build/common/Panel/Panel.mjs +10 -22
  16. package/build/common/Panel/Panel.mjs.map +1 -1
  17. package/build/common/Panel/Panel.positionUtils.js +68 -0
  18. package/build/common/Panel/Panel.positionUtils.js.map +1 -0
  19. package/build/common/Panel/Panel.positionUtils.mjs +63 -0
  20. package/build/common/Panel/Panel.positionUtils.mjs.map +1 -0
  21. package/build/common/PropsValues/position.js +0 -25
  22. package/build/common/PropsValues/position.js.map +1 -1
  23. package/build/common/PropsValues/position.mjs +1 -24
  24. package/build/common/PropsValues/position.mjs.map +1 -1
  25. package/build/main.css +102 -68
  26. package/build/styles/AvatarView/AvatarView.css +8 -0
  27. package/build/styles/AvatarView/Dot/Dot.css +8 -0
  28. package/build/styles/CheckboxButton/CheckboxButton.css +3 -0
  29. package/build/styles/Nudge/Nudge.css +4 -38
  30. package/build/styles/Prompt/CriticalBanner/CriticalBanner.css +34 -0
  31. package/build/styles/SlidingPanel/SlidingPanel.css +8 -0
  32. package/build/styles/UploadInput/UploadItem/UploadItem.css +4 -5
  33. package/build/styles/_deprecated/Badge/Badge.css +4 -2
  34. package/build/styles/common/Panel/Panel.css +12 -4
  35. package/build/styles/css/accordion.css +3 -0
  36. package/build/styles/css/buttons.css +1 -7
  37. package/build/styles/css/chevron.css +3 -0
  38. package/build/styles/css/neptune.css +25 -19
  39. package/build/styles/css/process.css +15 -9
  40. package/build/styles/css/tick.css +6 -3
  41. package/build/styles/main.css +102 -68
  42. package/build/styles/styles/less/accordion.css +3 -0
  43. package/build/styles/styles/less/buttons.css +1 -7
  44. package/build/styles/styles/less/chevron.css +3 -0
  45. package/build/styles/styles/less/neptune.css +25 -19
  46. package/build/styles/styles/less/process.css +15 -9
  47. package/build/styles/styles/less/tick.css +6 -3
  48. package/build/types/ExpressiveMoneyInput/Chevron/Chevron.d.ts.map +1 -1
  49. package/build/types/Prompt/CriticalBanner/CriticalBanner.d.ts +6 -1
  50. package/build/types/Prompt/CriticalBanner/CriticalBanner.d.ts.map +1 -1
  51. package/build/types/common/Panel/Panel.d.ts +1 -1
  52. package/build/types/common/Panel/Panel.d.ts.map +1 -1
  53. package/build/types/common/Panel/Panel.positionUtils.d.ts +7 -0
  54. package/build/types/common/Panel/Panel.positionUtils.d.ts.map +1 -0
  55. package/build/types/common/PropsValues/position.d.ts +0 -13
  56. package/build/types/common/PropsValues/position.d.ts.map +1 -1
  57. package/build/types/common/ResponsivePanel/ResponsivePanel.d.ts +1 -1
  58. package/package.json +5 -5
  59. package/src/AvatarView/AvatarView.css +8 -0
  60. package/src/AvatarView/Dot/Dot.css +8 -0
  61. package/src/AvatarView/Dot/Dot.less +7 -1
  62. package/src/Button/_stories/Button.test.story.tsx +1 -1
  63. package/src/Checkbox/_stories/Checkbox.story.tsx +1 -1
  64. package/src/Checkbox/_stories/Checkbox.test.story.tsx +3 -2
  65. package/src/CheckboxButton/CheckboxButton.css +3 -0
  66. package/src/CheckboxButton/CheckboxButton.less +4 -0
  67. package/src/Chevron/_stories/Chevron.test.story.tsx +2 -2
  68. package/src/ExpressiveMoneyInput/Chevron/Chevron.tsx +8 -3
  69. package/src/Header/_stories/Header.test.story.tsx +1 -1
  70. package/src/Info/_stories/Info.rtl.test.story.tsx +35 -10
  71. package/src/Info/_stories/Info.story.tsx +1 -1
  72. package/src/Inputs/SelectInput/_stories/SelectInput.test.story.tsx +1 -1
  73. package/src/ListItem/_stories/subcomponents.tsx +1 -1
  74. package/src/Loader/_stories/Loader.test.story.tsx +23 -0
  75. package/src/MoneyInput/_stories/MoneyInput.rtl.test.story.tsx +1 -1
  76. package/src/Nudge/Nudge.css +4 -38
  77. package/src/Nudge/Nudge.less +4 -4
  78. package/src/Nudge/_stories/Nudge.test.story.tsx +29 -12
  79. package/src/PhoneNumberInput/_stories/{PhoneNumberInput.test.story.tsx → PhoneNumberInput.rtl.test.story.tsx} +18 -10
  80. package/src/ProcessIndicator/ProcessIndicator.tsx +1 -1
  81. package/src/ProcessIndicator/_stories/ProcessIndicator.test.story.tsx +32 -0
  82. package/src/ProgressBar/_stories/ProgressBar.test.story.tsx +33 -19
  83. package/src/Prompt/CriticalBanner/CriticalBanner.css +34 -0
  84. package/src/Prompt/CriticalBanner/CriticalBanner.less +45 -0
  85. package/src/Prompt/CriticalBanner/CriticalBanner.test.tsx +26 -3
  86. package/src/Prompt/CriticalBanner/CriticalBanner.tsx +15 -1
  87. package/src/Prompt/CriticalBanner/_stories/CriticalBanner.accessibility.docs.mdx +4 -1
  88. package/src/Prompt/CriticalBanner/_stories/CriticalBanner.story.tsx +52 -0
  89. package/src/Prompt/CriticalBanner/_stories/CriticalBanner.test.story.tsx +22 -1
  90. package/src/SlidingPanel/SlidingPanel.css +8 -0
  91. package/src/SlidingPanel/SlidingPanel.less +8 -0
  92. package/src/SlidingPanel/_stories/SlidingPanel.rtl.test.story.tsx +4 -3
  93. package/src/Snackbar/_stories/Snackbar.rtl.test.story.tsx +14 -16
  94. package/src/Snackbar/_stories/Snackbar.story.tsx +1 -1
  95. package/src/Snackbar/_stories/Snackbar.test.story.tsx +1 -1
  96. package/src/StatusIcon/_stories/StatusIcon.test.story.tsx +12 -4
  97. package/src/UploadInput/UploadItem/UploadItem.css +4 -5
  98. package/src/UploadInput/UploadItem/UploadItem.less +7 -6
  99. package/src/UploadInput/_stories/UploadInput.test.story.tsx +1 -1
  100. package/src/_deprecated/Badge/Badge.css +4 -2
  101. package/src/_deprecated/Badge/Badge.less +7 -14
  102. package/src/_deprecated/CriticalBanner/_stories/CriticalCommsBanner.test.story.tsx +0 -16
  103. package/src/_deprecated/OverlayHeader/_stories/OverlayHeader.test.story.tsx +15 -0
  104. package/src/common/Panel/Panel.css +12 -4
  105. package/src/common/Panel/Panel.less +27 -9
  106. package/src/common/Panel/Panel.positionUtils.ts +79 -0
  107. package/src/common/Panel/Panel.test.tsx +40 -0
  108. package/src/common/Panel/Panel.tsx +13 -24
  109. package/src/common/Panel/_stories/Panel.rtl.test.story.tsx +110 -0
  110. package/src/common/PropsValues/position.ts +0 -50
  111. package/src/main.css +102 -68
  112. package/src/styles/less/accordion.css +3 -0
  113. package/src/styles/less/buttons.css +1 -7
  114. package/src/styles/less/buttons.less +3 -11
  115. package/src/styles/less/chevron.css +3 -0
  116. package/src/styles/less/chevron.less +4 -0
  117. package/src/styles/less/neptune.css +25 -19
  118. package/src/styles/less/process.css +15 -9
  119. package/src/styles/less/process.less +13 -6
  120. package/src/styles/less/tick.css +6 -3
  121. package/src/styles/less/tick.less +7 -3
@@ -5942,6 +5942,9 @@ tbody.collapse.in {
5942
5942
  .tw-chevron.top {
5943
5943
  transform: rotate(0deg);
5944
5944
  }
5945
+ [dir="rtl"] .tw-chevron.top {
5946
+ transform: rotate(360deg);
5947
+ }
5945
5948
  .tw-chevron.right {
5946
5949
  transform: rotate(90deg);
5947
5950
  }
@@ -8085,17 +8088,11 @@ input[type="button"].btn-block {
8085
8088
  display: inline-flex;
8086
8089
  align-items: center;
8087
8090
  }
8088
- .btn-loading:not(.btn-block) .btn-loader {
8091
+ .btn-loading:not(.btn-block) .btn-loader[class] {
8089
8092
  margin-block-end: 0;
8090
- }
8091
- :not([dir="rtl"]) .btn-loading:not(.btn-block) .btn-loader {
8092
8093
  margin-inline-start: 16px;
8093
8094
  margin-inline-end: 0;
8094
8095
  }
8095
- [dir="rtl"] .btn-loading:not(.btn-block) .btn-loader {
8096
- margin-inline-start: 0 !important;
8097
- margin-inline-end: 16px !important;
8098
- }
8099
8096
  .btn-loading.btn-block .btn-loader {
8100
8097
  inset-block-start: 0;
8101
8098
  inset-block-end: 0;
@@ -17552,6 +17549,9 @@ button.popover-close {
17552
17549
  inset-inline-start: 25%;
17553
17550
  inset-block-start: 25%;
17554
17551
  }
17552
+ [dir="rtl"] .process-icon-container {
17553
+ transform: rotate(45deg) scaleX(-1);
17554
+ }
17555
17555
  .process-icon-horizontal,
17556
17556
  .process-icon-vertical {
17557
17557
  position: absolute;
@@ -17631,37 +17631,37 @@ button.popover-close {
17631
17631
  .process-stopped .process-icon-container {
17632
17632
  display: none;
17633
17633
  }
17634
- .process-xs {
17634
+ .process-xxs {
17635
17635
  inline-size: 12px;
17636
17636
  block-size: 12px;
17637
17637
  }
17638
- .process-xs .process-circle {
17638
+ .process-xxs .process-circle {
17639
17639
  /* Hide before animation to prevent glitching */
17640
17640
  stroke-dashoffset: 31.41592654px;
17641
17641
  stroke-dasharray: 31.41592654px;
17642
17642
  stroke-width: 1.5px;
17643
17643
  }
17644
- .process-xs.process-danger .process-icon-horizontal {
17644
+ .process-xxs.process-danger .process-icon-horizontal {
17645
17645
  inset-block-start: 2.5px;
17646
17646
  block-size: 1px;
17647
17647
  }
17648
- .process-xs.process-danger .process-icon-vertical {
17648
+ .process-xxs.process-danger .process-icon-vertical {
17649
17649
  inset-inline-start: 2.5px;
17650
17650
  inline-size: 1px;
17651
17651
  }
17652
- .process-xs .process-icon-horizontal,
17653
- .process-xs .process-icon-vertical {
17652
+ .process-xxs .process-icon-horizontal,
17653
+ .process-xxs .process-icon-vertical {
17654
17654
  border-radius: 0.5px;
17655
17655
  }
17656
- .process-xs.process-success .process-icon-container {
17656
+ .process-xxs.process-success .process-icon-container {
17657
17657
  inline-size: 2.5px;
17658
17658
  block-size: 5px;
17659
17659
  inset-inline-start: 4.5px;
17660
17660
  }
17661
- .process-xs.process-success .process-icon-horizontal {
17661
+ .process-xxs.process-success .process-icon-horizontal {
17662
17662
  block-size: 1px;
17663
17663
  }
17664
- .process-xs.process-success .process-icon-vertical {
17664
+ .process-xxs.process-success .process-icon-vertical {
17665
17665
  inline-size: 1px;
17666
17666
  }
17667
17667
  .process-xs {
@@ -17763,6 +17763,9 @@ button.popover-close {
17763
17763
  .process-xl.process-success .process-icon-vertical {
17764
17764
  inline-size: 8px;
17765
17765
  }
17766
+ .process-xxs .process-icon-container {
17767
+ display: none;
17768
+ }
17766
17769
  .process-xxs .process-circle {
17767
17770
  animation-name: process-chase-circle-xxs;
17768
17771
  }
@@ -19403,10 +19406,13 @@ a[data-toggle="tooltip"] {
19403
19406
  position: absolute;
19404
19407
  background: #ffffff;
19405
19408
  background: var(--color-background-screen);
19406
- transform: translateX(0.5px) rotate(-45deg);
19409
+ transform: translateX(-1.5px) rotate(-45deg);
19407
19410
  transform-origin: left bottom;
19408
- inset-inline-start: 8px;
19409
- inset-inline-start: var(--size-8);
19411
+ }
19412
+ [dir="rtl"] .tw-checkbox-check::before,
19413
+ [dir="rtl"] .tw-checkbox-check::after {
19414
+ transform: translateX(-1.5px) rotate(-45deg) scaleX(-1);
19415
+ transform-origin: right bottom;
19410
19416
  }
19411
19417
  .tw-checkbox-check .has-error::before,
19412
19418
  .tw-checkbox-check .has-error::after {
@@ -20305,10 +20311,18 @@ a[data-toggle="tooltip"] {
20305
20311
  display: inline-block;
20306
20312
  }
20307
20313
  .np-dot-mask {
20314
+ --np-dot-h-side: left;
20308
20315
  -webkit-mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-dot-size) / 2)) left calc(100% - (var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
20309
20316
  mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-dot-size) / 2)) left calc(100% - (var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
20317
+ -webkit-mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-dot-size) / 2)) var(--np-dot-h-side) calc(100% - (var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
20318
+ mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-dot-size) / 2)) var(--np-dot-h-side) calc(100% - (var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
20310
20319
  -webkit-mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) left calc(100% - calc(var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
20311
20320
  mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) left calc(100% - calc(var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
20321
+ -webkit-mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) var(--np-dot-h-side) calc(100% - calc(var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
20322
+ mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) var(--np-dot-h-side) calc(100% - calc(var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
20323
+ }
20324
+ [dir="rtl"] .np-dot-mask {
20325
+ --np-dot-h-side: right;
20312
20326
  }
20313
20327
  .np-dot-badge {
20314
20328
  position: absolute;
@@ -20485,12 +20499,14 @@ a[data-toggle="tooltip"] {
20485
20499
  --badge-border-color: rgba(0, 0, 0, 0.08);
20486
20500
  }
20487
20501
  .tw-badge > .tw-badge__children {
20502
+ --badge-h-side: left;
20488
20503
  -webkit-mask-image: radial-gradient(circle at top calc(100% - var(--badge-mask-offset) - var(--badge-content-position)) left calc(100% - var(--badge-mask-offset) - var(--badge-content-position)), transparent 0, transparent calc(var(--badge-size) / 2 + var(--badge-mask)), black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px));
20489
20504
  mask-image: radial-gradient(circle at top calc(100% - var(--badge-mask-offset) - var(--badge-content-position)) left calc(100% - var(--badge-mask-offset) - var(--badge-content-position)), transparent 0, transparent calc(var(--badge-size) / 2 + var(--badge-mask)), black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px));
20505
+ -webkit-mask-image: radial-gradient(circle at top calc(100% - var(--badge-mask-offset) - var(--badge-content-position)) var(--badge-h-side) calc(100% - var(--badge-mask-offset) - var(--badge-content-position)), transparent 0, transparent calc(var(--badge-size) / 2 + var(--badge-mask)), black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px));
20506
+ mask-image: radial-gradient(circle at top calc(100% - var(--badge-mask-offset) - var(--badge-content-position)) var(--badge-h-side) calc(100% - var(--badge-mask-offset) - var(--badge-content-position)), transparent 0, transparent calc(var(--badge-size) / 2 + var(--badge-mask)), black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px));
20490
20507
  }
20491
20508
  [dir="rtl"] .tw-badge > .tw-badge__children {
20492
- -webkit-mask-image: radial-gradient(circle at top calc(100% - var(--badge-mask-offset)) right calc(100% - var(--badge-mask-offset)), transparent 0, transparent calc(var(--badge-size) / 2 + var(--badge-mask)), black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px));
20493
- mask-image: radial-gradient(circle at top calc(100% - var(--badge-mask-offset)) right calc(100% - var(--badge-mask-offset)), transparent 0, transparent calc(var(--badge-size) / 2 + var(--badge-mask)), black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px));
20509
+ --badge-h-side: right;
20494
20510
  }
20495
20511
  .tw-badge > .tw-badge__content {
20496
20512
  position: absolute;
@@ -21238,6 +21254,9 @@ a[data-toggle="tooltip"] {
21238
21254
  background: var(--color-background-screen);
21239
21255
  transform: translate(-50%, -50%);
21240
21256
  }
21257
+ [dir="rtl"] .np-tw-checkbox-indeterminate::after {
21258
+ transform: translate(50%, -50%);
21259
+ }
21241
21260
  .np-tw-checkbox-indeterminate .has-error::after {
21242
21261
  background-color: #e74848;
21243
21262
  background-color: var(--color-interactive-negative);
@@ -21875,27 +21894,35 @@ button.np-option {
21875
21894
  .np-panel[data-popper-placement^="top"] > .np-panel__content {
21876
21895
  transform: translateY(10px) scale(0.95);
21877
21896
  }
21878
- .np-panel[data-popper-placement^="top"] > .np-panel__content .np-panel__arrow {
21897
+ .np-panel[data-popper-placement^="top"] .np-panel__arrow {
21879
21898
  inset-block-end: -6px;
21880
21899
  }
21881
21900
  .np-panel[data-popper-placement^="right"] > .np-panel__content {
21882
21901
  transform: translateX(-10px) scale(0.95);
21883
21902
  }
21884
- .np-panel[data-popper-placement^="right"] > .np-panel__content .np-panel__arrow {
21903
+ .np-panel[data-popper-placement^="right"] .np-panel__arrow {
21885
21904
  inset-inline-start: -6px;
21886
21905
  }
21906
+ [dir="rtl"] .np-panel[data-popper-placement^="right"] .np-panel__arrow {
21907
+ inset-inline-start: unset;
21908
+ inset-inline-end: -6px;
21909
+ }
21887
21910
  .np-panel[data-popper-placement^="bottom"] > .np-panel__content {
21888
21911
  transform: translateY(-10px) scale(0.95);
21889
21912
  }
21890
- .np-panel[data-popper-placement^="bottom"] > .np-panel__content .np-panel__arrow {
21913
+ .np-panel[data-popper-placement^="bottom"] .np-panel__arrow {
21891
21914
  inset-block-start: -6px;
21892
21915
  }
21893
21916
  .np-panel[data-popper-placement^="left"] > .np-panel__content {
21894
21917
  transform: translateX(10px) scale(0.95);
21895
21918
  }
21896
- .np-panel[data-popper-placement^="left"] > .np-panel__content .np-panel__arrow {
21919
+ .np-panel[data-popper-placement^="left"] .np-panel__arrow {
21897
21920
  inset-inline-end: -6px;
21898
21921
  }
21922
+ [dir="rtl"] .np-panel[data-popper-placement^="left"] .np-panel__arrow {
21923
+ inset-inline-end: unset;
21924
+ inset-inline-start: -6px;
21925
+ }
21899
21926
  .np-theme-personal .np-panel__content {
21900
21927
  border-radius: 16px;
21901
21928
  border-radius: var(--radius-medium);
@@ -24361,7 +24388,10 @@ button.np-link {
24361
24388
  inline-size: 161px;
24362
24389
  }
24363
24390
  [dir="rtl"] .wds-nudge-media-globe {
24364
- transform: scaleX(-1);
24391
+ margin-inline-start: -63px;
24392
+ margin-block-start: -15px;
24393
+ position: absolute;
24394
+ inline-size: 161px;
24365
24395
  }
24366
24396
  .wds-nudge-media-lock {
24367
24397
  margin-inline-start: -11px;
@@ -24370,36 +24400,24 @@ button.np-link {
24370
24400
  inline-size: 104px;
24371
24401
  transform: rotate(-14.86deg);
24372
24402
  }
24373
- [dir="rtl"] .wds-nudge-media-lock {
24374
- transform: scaleX(-1);
24375
- }
24376
24403
  .wds-nudge-media-wallet {
24377
24404
  margin-inline-start: -15px;
24378
24405
  margin-block-start: 18px;
24379
24406
  position: absolute;
24380
24407
  inline-size: 107px;
24381
24408
  }
24382
- [dir="rtl"] .wds-nudge-media-wallet {
24383
- transform: scaleX(-1);
24384
- }
24385
24409
  .wds-nudge-media-gear {
24386
24410
  margin-inline-start: -18px;
24387
24411
  margin-block-start: 19px;
24388
24412
  position: absolute;
24389
24413
  inline-size: 111px;
24390
24414
  }
24391
- [dir="rtl"] .wds-nudge-media-gear {
24392
- transform: scaleX(-1);
24393
- }
24394
24415
  .wds-nudge-media-invite-letter {
24395
24416
  margin-inline-start: -17px;
24396
24417
  margin-block-start: -2px;
24397
24418
  position: absolute;
24398
24419
  inline-size: 105px;
24399
24420
  }
24400
- [dir="rtl"] .wds-nudge-media-invite-letter {
24401
- transform: scaleX(-1);
24402
- }
24403
24421
  .wds-nudge-media-personal-card,
24404
24422
  .wds-nudge-media-business-card {
24405
24423
  margin-inline-start: -15px;
@@ -24407,73 +24425,48 @@ button.np-link {
24407
24425
  position: absolute;
24408
24426
  inline-size: 104px;
24409
24427
  }
24410
- [dir="rtl"] .wds-nudge-media-personal-card,
24411
- [dir="rtl"] .wds-nudge-media-business-card {
24412
- transform: scaleX(-1);
24413
- }
24414
24428
  .wds-nudge-media-heart {
24415
24429
  margin-inline-start: -7px;
24416
24430
  margin-block-start: 11px;
24417
24431
  position: absolute;
24418
24432
  inline-size: 95px;
24419
24433
  }
24420
- [dir="rtl"] .wds-nudge-media-heart {
24421
- transform: scaleX(-1);
24422
- }
24423
24434
  .wds-nudge-media-multi-currency {
24424
24435
  margin-inline-start: -30px;
24425
24436
  margin-block-start: 1px;
24426
24437
  position: absolute;
24427
24438
  inline-size: 131px;
24428
24439
  }
24429
- [dir="rtl"] .wds-nudge-media-multi-currency {
24430
- transform: scaleX(-1);
24431
- }
24432
24440
  .wds-nudge-media-shopping-bag {
24433
24441
  margin-inline-start: -9px;
24434
24442
  margin-block-start: 14px;
24435
24443
  position: absolute;
24436
24444
  inline-size: 116px;
24437
24445
  }
24438
- [dir="rtl"] .wds-nudge-media-shopping-bag {
24439
- transform: scaleX(-1);
24440
- }
24441
24446
  .wds-nudge-media-flower {
24442
24447
  margin-inline-start: -24px;
24443
24448
  margin-block-start: 11px;
24444
24449
  position: absolute;
24445
24450
  inline-size: 156px;
24446
24451
  }
24447
- [dir="rtl"] .wds-nudge-media-flower {
24448
- transform: scaleX(-1);
24449
- }
24450
24452
  .wds-nudge-media-backpack {
24451
24453
  margin-inline-start: -16px;
24452
24454
  margin-block-start: 6px;
24453
24455
  position: absolute;
24454
24456
  inline-size: 123px;
24455
24457
  }
24456
- [dir="rtl"] .wds-nudge-media-backpack {
24457
- transform: scaleX(-1);
24458
- }
24459
24458
  .wds-nudge-media-gift-box {
24460
24459
  margin-inline-start: -22px;
24461
24460
  margin-block-start: 6px;
24462
24461
  position: absolute;
24463
24462
  inline-size: 129px;
24464
24463
  }
24465
- [dir="rtl"] .wds-nudge-media-gift-box {
24466
- transform: scaleX(-1);
24467
- }
24468
24464
  .wds-nudge-media-documents {
24469
24465
  margin-inline-start: -8px;
24470
24466
  margin-block-start: 8px;
24471
24467
  position: absolute;
24472
24468
  inline-size: 120px;
24473
24469
  }
24474
- [dir="rtl"] .wds-nudge-media-documents {
24475
- transform: scaleX(-1);
24476
- }
24477
24470
  .wds-nudge-container {
24478
24471
  align-items: stretch;
24479
24472
  display: flex;
@@ -25136,6 +25129,35 @@ button.np-link {
25136
25129
  mask: var(--critical-banner-overhang-mask);
25137
25130
  }
25138
25131
  }
25132
+ .wds-critical-banner__entry-mask {
25133
+ display: grid;
25134
+ grid-template-rows: 1fr;
25135
+ overflow: visible;
25136
+ }
25137
+ .wds-critical-banner__entry-mask--animated {
25138
+ grid-template-rows: 0fr;
25139
+ overflow: hidden;
25140
+ animation: wds-critical-banner-reveal-height 400ms cubic-bezier(0.3, 0, 0.1, 1) 500ms both, wds-critical-banner-release-overflow 1ms linear 899ms both;
25141
+ }
25142
+ .wds-critical-banner__entry-track {
25143
+ min-block-size: 0;
25144
+ }
25145
+ @keyframes wds-critical-banner-reveal-height {
25146
+ from {
25147
+ grid-template-rows: 0fr;
25148
+ }
25149
+ to {
25150
+ grid-template-rows: 1fr;
25151
+ }
25152
+ }
25153
+ @keyframes wds-critical-banner-release-overflow {
25154
+ from {
25155
+ overflow: hidden;
25156
+ }
25157
+ to {
25158
+ overflow: visible;
25159
+ }
25160
+ }
25139
25161
  @media (prefers-reduced-motion: reduce) {
25140
25162
  .wds-critical-banner__description,
25141
25163
  .wds-critical-banner__title,
@@ -25143,6 +25165,11 @@ button.np-link {
25143
25165
  .wds-critical-banner__toggle {
25144
25166
  transition: none !important;
25145
25167
  }
25168
+ .wds-critical-banner__entry-mask--animated {
25169
+ animation: none;
25170
+ grid-template-rows: 1fr;
25171
+ overflow: visible;
25172
+ }
25146
25173
  }
25147
25174
  .wds-expander-toggle {
25148
25175
  align-self: flex-start;
@@ -25240,6 +25267,10 @@ button.np-link {
25240
25267
  box-shadow: inset 1px 0 0 0 rgba(0,0,0,0.10196);
25241
25268
  box-shadow: inset 1px 0 0 0 var(--color-border-neutral);
25242
25269
  }
25270
+ [dir="rtl"] .np-theme-personal .sliding-panel.sliding-panel--border-right {
25271
+ box-shadow: inset -1px 0 0 0 rgba(0,0,0,0.10196);
25272
+ box-shadow: inset -1px 0 0 0 var(--color-border-neutral);
25273
+ }
25243
25274
  .np-theme-personal .sliding-panel.sliding-panel--border-bottom {
25244
25275
  box-shadow: inset 0 1px 0 0 rgba(0,0,0,0.10196);
25245
25276
  box-shadow: inset 0 1px 0 0 var(--color-border-neutral);
@@ -25248,6 +25279,10 @@ button.np-link {
25248
25279
  box-shadow: inset -1px 0 0 0 rgba(0,0,0,0.10196);
25249
25280
  box-shadow: inset -1px 0 0 0 var(--color-border-neutral);
25250
25281
  }
25282
+ [dir="rtl"] .np-theme-personal .sliding-panel.sliding-panel--border-left {
25283
+ box-shadow: inset 1px 0 0 0 rgba(0,0,0,0.10196);
25284
+ box-shadow: inset 1px 0 0 0 var(--color-border-neutral);
25285
+ }
25251
25286
  .snackbar {
25252
25287
  text-align: center;
25253
25288
  position: fixed;
@@ -26929,8 +26964,7 @@ button.np-link {
26929
26964
  .np-upload-input__item .np-upload-input__title,
26930
26965
  .np-upload-input__item .np-upload-input__text {
26931
26966
  margin: 0;
26932
- -moz-text-align-last: left;
26933
- text-align-last: left;
26967
+ text-align: start;
26934
26968
  color: #5d7079;
26935
26969
  color: var(--color-content-secondary);
26936
26970
  }
@@ -26986,7 +27020,7 @@ button.np-link {
26986
27020
  justify-content: center;
26987
27021
  }
26988
27022
  .np-upload-input__item .np-upload-input__item-action .np-upload-input__item-button:before {
26989
- content: '';
27023
+ content: "";
26990
27024
  display: block;
26991
27025
  inline-size: var(--clickAreaSize);
26992
27026
  block-size: var(--clickAreaSize);
@@ -27041,8 +27075,8 @@ button.np-link {
27041
27075
  padding-inline-start: var(--size-16);
27042
27076
  }
27043
27077
  .np-upload-input__item .np-upload-input-errors > li::before {
27044
- content: '' ;
27045
- content: '' / '';
27078
+ content: "" ;
27079
+ content: "" / "";
27046
27080
  position: absolute;
27047
27081
  display: block;
27048
27082
  inset-inline-start: 0;
@@ -5,6 +5,9 @@
5
5
  .tw-chevron.top {
6
6
  transform: rotate(0deg);
7
7
  }
8
+ [dir="rtl"] .tw-chevron.top {
9
+ transform: rotate(360deg);
10
+ }
8
11
  .tw-chevron.right {
9
12
  transform: rotate(90deg);
10
13
  }
@@ -1277,17 +1277,11 @@ input[type="button"].btn-block {
1277
1277
  display: inline-flex;
1278
1278
  align-items: center;
1279
1279
  }
1280
- .btn-loading:not(.btn-block) .btn-loader {
1280
+ .btn-loading:not(.btn-block) .btn-loader[class] {
1281
1281
  margin-block-end: 0;
1282
- }
1283
- :not([dir="rtl"]) .btn-loading:not(.btn-block) .btn-loader {
1284
1282
  margin-inline-start: 16px;
1285
1283
  margin-inline-end: 0;
1286
1284
  }
1287
- [dir="rtl"] .btn-loading:not(.btn-block) .btn-loader {
1288
- margin-inline-start: 0 !important;
1289
- margin-inline-end: 16px !important;
1290
- }
1291
1285
  .btn-loading.btn-block .btn-loader {
1292
1286
  inset-block-start: 0;
1293
1287
  inset-block-end: 0;
@@ -5,6 +5,9 @@
5
5
  .tw-chevron.top {
6
6
  transform: rotate(0deg);
7
7
  }
8
+ [dir="rtl"] .tw-chevron.top {
9
+ transform: rotate(360deg);
10
+ }
8
11
  .tw-chevron.right {
9
12
  transform: rotate(90deg);
10
13
  }
@@ -5350,6 +5350,9 @@ tbody.collapse.in {
5350
5350
  .tw-chevron.top {
5351
5351
  transform: rotate(0deg);
5352
5352
  }
5353
+ [dir="rtl"] .tw-chevron.top {
5354
+ transform: rotate(360deg);
5355
+ }
5353
5356
  .tw-chevron.right {
5354
5357
  transform: rotate(90deg);
5355
5358
  }
@@ -7493,17 +7496,11 @@ input[type="button"].btn-block {
7493
7496
  display: inline-flex;
7494
7497
  align-items: center;
7495
7498
  }
7496
- .btn-loading:not(.btn-block) .btn-loader {
7499
+ .btn-loading:not(.btn-block) .btn-loader[class] {
7497
7500
  margin-block-end: 0;
7498
- }
7499
- :not([dir="rtl"]) .btn-loading:not(.btn-block) .btn-loader {
7500
7501
  margin-inline-start: 16px;
7501
7502
  margin-inline-end: 0;
7502
7503
  }
7503
- [dir="rtl"] .btn-loading:not(.btn-block) .btn-loader {
7504
- margin-inline-start: 0 !important;
7505
- margin-inline-end: 16px !important;
7506
- }
7507
7504
  .btn-loading.btn-block .btn-loader {
7508
7505
  inset-block-start: 0;
7509
7506
  inset-block-end: 0;
@@ -16960,6 +16957,9 @@ button.popover-close {
16960
16957
  inset-inline-start: 25%;
16961
16958
  inset-block-start: 25%;
16962
16959
  }
16960
+ [dir="rtl"] .process-icon-container {
16961
+ transform: rotate(45deg) scaleX(-1);
16962
+ }
16963
16963
  .process-icon-horizontal,
16964
16964
  .process-icon-vertical {
16965
16965
  position: absolute;
@@ -17039,37 +17039,37 @@ button.popover-close {
17039
17039
  .process-stopped .process-icon-container {
17040
17040
  display: none;
17041
17041
  }
17042
- .process-xs {
17042
+ .process-xxs {
17043
17043
  inline-size: 12px;
17044
17044
  block-size: 12px;
17045
17045
  }
17046
- .process-xs .process-circle {
17046
+ .process-xxs .process-circle {
17047
17047
  /* Hide before animation to prevent glitching */
17048
17048
  stroke-dashoffset: 31.41592654px;
17049
17049
  stroke-dasharray: 31.41592654px;
17050
17050
  stroke-width: 1.5px;
17051
17051
  }
17052
- .process-xs.process-danger .process-icon-horizontal {
17052
+ .process-xxs.process-danger .process-icon-horizontal {
17053
17053
  inset-block-start: 2.5px;
17054
17054
  block-size: 1px;
17055
17055
  }
17056
- .process-xs.process-danger .process-icon-vertical {
17056
+ .process-xxs.process-danger .process-icon-vertical {
17057
17057
  inset-inline-start: 2.5px;
17058
17058
  inline-size: 1px;
17059
17059
  }
17060
- .process-xs .process-icon-horizontal,
17061
- .process-xs .process-icon-vertical {
17060
+ .process-xxs .process-icon-horizontal,
17061
+ .process-xxs .process-icon-vertical {
17062
17062
  border-radius: 0.5px;
17063
17063
  }
17064
- .process-xs.process-success .process-icon-container {
17064
+ .process-xxs.process-success .process-icon-container {
17065
17065
  inline-size: 2.5px;
17066
17066
  block-size: 5px;
17067
17067
  inset-inline-start: 4.5px;
17068
17068
  }
17069
- .process-xs.process-success .process-icon-horizontal {
17069
+ .process-xxs.process-success .process-icon-horizontal {
17070
17070
  block-size: 1px;
17071
17071
  }
17072
- .process-xs.process-success .process-icon-vertical {
17072
+ .process-xxs.process-success .process-icon-vertical {
17073
17073
  inline-size: 1px;
17074
17074
  }
17075
17075
  .process-xs {
@@ -17171,6 +17171,9 @@ button.popover-close {
17171
17171
  .process-xl.process-success .process-icon-vertical {
17172
17172
  inline-size: 8px;
17173
17173
  }
17174
+ .process-xxs .process-icon-container {
17175
+ display: none;
17176
+ }
17174
17177
  .process-xxs .process-circle {
17175
17178
  animation-name: process-chase-circle-xxs;
17176
17179
  }
@@ -18811,10 +18814,13 @@ a[data-toggle="tooltip"] {
18811
18814
  position: absolute;
18812
18815
  background: #ffffff;
18813
18816
  background: var(--color-background-screen);
18814
- transform: translateX(0.5px) rotate(-45deg);
18817
+ transform: translateX(-1.5px) rotate(-45deg);
18815
18818
  transform-origin: left bottom;
18816
- inset-inline-start: 8px;
18817
- inset-inline-start: var(--size-8);
18819
+ }
18820
+ [dir="rtl"] .tw-checkbox-check::before,
18821
+ [dir="rtl"] .tw-checkbox-check::after {
18822
+ transform: translateX(-1.5px) rotate(-45deg) scaleX(-1);
18823
+ transform-origin: right bottom;
18818
18824
  }
18819
18825
  .tw-checkbox-check .has-error::before,
18820
18826
  .tw-checkbox-check .has-error::after {
@@ -55,6 +55,9 @@
55
55
  inset-inline-start: 25%;
56
56
  inset-block-start: 25%;
57
57
  }
58
+ [dir="rtl"] .process-icon-container {
59
+ transform: rotate(45deg) scaleX(-1);
60
+ }
58
61
  .process-icon-horizontal,
59
62
  .process-icon-vertical {
60
63
  position: absolute;
@@ -134,37 +137,37 @@
134
137
  .process-stopped .process-icon-container {
135
138
  display: none;
136
139
  }
137
- .process-xs {
140
+ .process-xxs {
138
141
  inline-size: 12px;
139
142
  block-size: 12px;
140
143
  }
141
- .process-xs .process-circle {
144
+ .process-xxs .process-circle {
142
145
  /* Hide before animation to prevent glitching */
143
146
  stroke-dashoffset: 31.41592654px;
144
147
  stroke-dasharray: 31.41592654px;
145
148
  stroke-width: 1.5px;
146
149
  }
147
- .process-xs.process-danger .process-icon-horizontal {
150
+ .process-xxs.process-danger .process-icon-horizontal {
148
151
  inset-block-start: 2.5px;
149
152
  block-size: 1px;
150
153
  }
151
- .process-xs.process-danger .process-icon-vertical {
154
+ .process-xxs.process-danger .process-icon-vertical {
152
155
  inset-inline-start: 2.5px;
153
156
  inline-size: 1px;
154
157
  }
155
- .process-xs .process-icon-horizontal,
156
- .process-xs .process-icon-vertical {
158
+ .process-xxs .process-icon-horizontal,
159
+ .process-xxs .process-icon-vertical {
157
160
  border-radius: 0.5px;
158
161
  }
159
- .process-xs.process-success .process-icon-container {
162
+ .process-xxs.process-success .process-icon-container {
160
163
  inline-size: 2.5px;
161
164
  block-size: 5px;
162
165
  inset-inline-start: 4.5px;
163
166
  }
164
- .process-xs.process-success .process-icon-horizontal {
167
+ .process-xxs.process-success .process-icon-horizontal {
165
168
  block-size: 1px;
166
169
  }
167
- .process-xs.process-success .process-icon-vertical {
170
+ .process-xxs.process-success .process-icon-vertical {
168
171
  inline-size: 1px;
169
172
  }
170
173
  .process-xs {
@@ -266,6 +269,9 @@
266
269
  .process-xl.process-success .process-icon-vertical {
267
270
  inline-size: 8px;
268
271
  }
272
+ .process-xxs .process-icon-container {
273
+ display: none;
274
+ }
269
275
  .process-xxs .process-circle {
270
276
  animation-name: process-chase-circle-xxs;
271
277
  }
@@ -10,10 +10,13 @@
10
10
  position: absolute;
11
11
  background: #ffffff;
12
12
  background: var(--color-background-screen);
13
- transform: translateX(0.5px) rotate(-45deg);
13
+ transform: translateX(-1.5px) rotate(-45deg);
14
14
  transform-origin: left bottom;
15
- inset-inline-start: 8px;
16
- inset-inline-start: var(--size-8);
15
+ }
16
+ [dir="rtl"] .tw-checkbox-check::before,
17
+ [dir="rtl"] .tw-checkbox-check::after {
18
+ transform: translateX(-1.5px) rotate(-45deg) scaleX(-1);
19
+ transform-origin: right bottom;
17
20
  }
18
21
  .tw-checkbox-check .has-error::before,
19
22
  .tw-checkbox-check .has-error::after {
@@ -1 +1 @@
1
- {"version":3,"file":"Chevron.d.ts","sourceRoot":"","sources":["../../../../src/ExpressiveMoneyInput/Chevron/Chevron.tsx"],"names":[],"mappings":"AAIA,UAAU,KAAK;IACb,UAAU,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,OAAO,GAAI,gBAAuB,KAAK,gCA0BnD,CAAC"}
1
+ {"version":3,"file":"Chevron.d.ts","sourceRoot":"","sources":["../../../../src/ExpressiveMoneyInput/Chevron/Chevron.tsx"],"names":[],"mappings":"AAMA,UAAU,KAAK;IACb,UAAU,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,OAAO,GAAI,gBAAuB,KAAK,gCA6BnD,CAAC"}
@@ -13,6 +13,11 @@ export type CriticalBannerProps = {
13
13
  label: ButtonProps['children'];
14
14
  };
15
15
  sentiment?: Exclude<PrimitivePromptProps['sentiment'], 'proposition'>;
16
+ /**
17
+ * Controls whether the banner plays its entry animation 500ms after mounting.
18
+ * Expand and collapse animations are unaffected.
19
+ */
20
+ animateEntry?: boolean;
16
21
  /**
17
22
  * Controls whether the description and actions are visible, as a controlled component.
18
23
  * When collapsed with a title, only the title is shown.
@@ -34,6 +39,6 @@ export type CriticalBannerProps = {
34
39
 
35
40
  * @see {@link https://docs.wise.design/components/critical-banner Design Spec}
36
41
  */
37
- export declare const CriticalBanner: ({ sentiment, title, description, media, action, actionSecondary, expanded: expandedProp, onToggle, id, className, "data-testid": testId, }: CriticalBannerProps) => import("react").JSX.Element;
42
+ export declare const CriticalBanner: ({ sentiment, title, description, media, action, actionSecondary, animateEntry, expanded: expandedProp, onToggle, id, className, "data-testid": testId, }: CriticalBannerProps) => import("react").JSX.Element;
38
43
  export default CriticalBanner;
39
44
  //# sourceMappingURL=CriticalBanner.d.ts.map