@transferwise/components 46.160.1 → 46.160.2

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 (69) hide show
  1. package/build/Calendar/Calendar.js +9 -3
  2. package/build/Calendar/Calendar.js.map +1 -1
  3. package/build/Calendar/Calendar.mjs +9 -3
  4. package/build/Calendar/Calendar.mjs.map +1 -1
  5. package/build/Carousel/Carousel.js +17 -10
  6. package/build/Carousel/Carousel.js.map +1 -1
  7. package/build/Carousel/Carousel.mjs +17 -10
  8. package/build/Carousel/Carousel.mjs.map +1 -1
  9. package/build/SegmentedControl/SegmentedControl.js +9 -2
  10. package/build/SegmentedControl/SegmentedControl.js.map +1 -1
  11. package/build/SegmentedControl/SegmentedControl.mjs +9 -2
  12. package/build/SegmentedControl/SegmentedControl.mjs.map +1 -1
  13. package/build/Tooltip/Tooltip.js +6 -1
  14. package/build/Tooltip/Tooltip.js.map +1 -1
  15. package/build/Tooltip/Tooltip.mjs +6 -1
  16. package/build/Tooltip/Tooltip.mjs.map +1 -1
  17. package/build/i18n/tr.json +5 -0
  18. package/build/i18n/tr.json.js +5 -0
  19. package/build/i18n/tr.json.js.map +1 -1
  20. package/build/i18n/tr.json.mjs +5 -0
  21. package/build/i18n/tr.json.mjs.map +1 -1
  22. package/build/i18n/zh-CN.json +5 -0
  23. package/build/i18n/zh-CN.json.js +5 -0
  24. package/build/i18n/zh-CN.json.js.map +1 -1
  25. package/build/i18n/zh-CN.json.mjs +5 -0
  26. package/build/i18n/zh-CN.json.mjs.map +1 -1
  27. package/build/main.css +34 -22
  28. package/build/styles/AvatarLayout/AvatarLayout.css +26 -9
  29. package/build/styles/SegmentedControl/SegmentedControl.css +2 -1
  30. package/build/styles/Tooltip/Tooltip.css +0 -6
  31. package/build/styles/common/Panel/Panel.css +6 -6
  32. package/build/styles/main.css +34 -22
  33. package/build/types/Calendar/Calendar.d.ts.map +1 -1
  34. package/build/types/Carousel/Carousel.d.ts.map +1 -1
  35. package/build/types/Carousel/_stories/constants.d.ts +3 -0
  36. package/build/types/Carousel/_stories/constants.d.ts.map +1 -0
  37. package/build/types/SegmentedControl/SegmentedControl.d.ts.map +1 -1
  38. package/build/types/Tooltip/Tooltip.d.ts.map +1 -1
  39. package/package.json +4 -4
  40. package/src/AvatarLayout/AvatarLayout.css +26 -9
  41. package/src/AvatarLayout/AvatarLayout.less +46 -22
  42. package/src/AvatarLayout/_stories/AvatarLayout.test.story.tsx +17 -42
  43. package/src/Calendar/Calendar.test.tsx +82 -0
  44. package/src/Calendar/Calendar.tsx +6 -3
  45. package/src/Carousel/Carousel.test.tsx +50 -2
  46. package/src/Carousel/Carousel.tsx +13 -10
  47. package/src/Carousel/_stories/Carousel.story.tsx +12 -52
  48. package/src/Carousel/_stories/Carousel.test.story.tsx +7 -43
  49. package/src/Carousel/_stories/constants.tsx +46 -0
  50. package/src/DateLookup/_stories/DateLookup.rtl.test.story.tsx +59 -48
  51. package/src/Field/_stories/Field.test.story.tsx +48 -37
  52. package/src/FlowNavigation/_stories/FlowNavigation.rtl.test.story.tsx +78 -0
  53. package/src/FlowNavigation/_stories/FlowNavigation.test.story.tsx +0 -44
  54. package/src/Label/_stories/Label.test.story.tsx +35 -22
  55. package/src/Popover/_stories/Popover.rtl.test.story.tsx +40 -50
  56. package/src/SegmentedControl/SegmentedControl.css +2 -1
  57. package/src/SegmentedControl/SegmentedControl.less +4 -2
  58. package/src/SegmentedControl/SegmentedControl.tsx +8 -2
  59. package/src/SegmentedControl/_stories/SegmentedControl.test.story.tsx +16 -8
  60. package/src/Tooltip/Tooltip.css +0 -6
  61. package/src/Tooltip/Tooltip.less +0 -12
  62. package/src/Tooltip/Tooltip.test.tsx +51 -0
  63. package/src/Tooltip/Tooltip.tsx +11 -1
  64. package/src/Tooltip/_stories/Tooltip.rtl.test.story.tsx +16 -34
  65. package/src/common/Panel/Panel.css +6 -6
  66. package/src/common/Panel/Panel.less +6 -6
  67. package/src/i18n/tr.json +5 -0
  68. package/src/i18n/zh-CN.json +5 -0
  69. package/src/main.css +34 -22
package/build/main.css CHANGED
@@ -20368,36 +20368,53 @@ a[data-toggle="tooltip"] {
20368
20368
  block-size: var(--np-avatar-layout-size);
20369
20369
  }
20370
20370
  .np-avatar-layout-diagonal-mask {
20371
+ --np-avatar-layout-mask-direction: right;
20371
20372
  -webkit-mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) right calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
20372
20373
  mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) right calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
20374
+ -webkit-mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) var(--np-avatar-layout-mask-direction) calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
20375
+ mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) var(--np-avatar-layout-mask-direction) calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
20373
20376
  }
20374
20377
  [dir="rtl"] .np-avatar-layout-diagonal-mask {
20375
- -webkit-mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) left calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
20376
- mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) left calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
20378
+ --np-avatar-layout-mask-direction: left;
20379
+ margin-inline-start: calc(var(--np-avatar-layout-size) - var(--np-avatar-size) * 2);
20380
+ margin-inline-end: unset;
20377
20381
  }
20378
20382
  .np-avatar-layout-diagonal-child {
20379
20383
  margin-inline-start: calc(var(--np-avatar-layout-size) - var(--np-avatar-size) * 2);
20380
20384
  margin-block-start: calc(var(--np-avatar-layout-size) - var(--np-avatar-size));
20381
20385
  }
20382
20386
  [dir="rtl"] .np-avatar-layout-diagonal-child {
20383
- margin-inline-start: 0;
20384
- margin-inline-end: calc(var(--np-avatar-layout-size) - var(--np-avatar-size) * 2);
20387
+ -webkit-mask-image: initial;
20388
+ mask-image: initial;
20385
20389
  }
20386
20390
  .np-avatar-layout-horizontal {
20391
+ --np-avatar-layout-mask-direction: left;
20387
20392
  inline-size: calc(var(--np-avatar-size) * var(--np-avatar-avatars-count) - (var(--np-avatar-offset) * (var(--np-avatar-avatars-count) - 1)));
20388
20393
  inline-size: calc(var(--np-avatar-size) * var(--np-avatar-avatars-count) - calc(var(--np-avatar-offset) * calc(var(--np-avatar-avatars-count) - 1)));
20389
20394
  block-size: var(--np-avatar-layout-size);
20390
20395
  }
20391
- .np-avatar-layout-horizontal-mask {
20392
- -webkit-mask-image: radial-gradient(circle at top calc(100% - (var(--np-avatar-size) / 2)) left calc(100% + (var(--np-avatar-size) / 2) - var(--np-avatar-offset)), transparent, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
20393
- mask-image: radial-gradient(circle at top calc(100% - (var(--np-avatar-size) / 2)) left calc(100% + (var(--np-avatar-size) / 2) - var(--np-avatar-offset)), transparent, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
20394
- -webkit-mask-image: radial-gradient(circle at top calc(100% - calc(var(--np-avatar-size) / 2)) left calc(100% + calc(var(--np-avatar-size) / 2) - var(--np-avatar-offset)), transparent, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
20395
- mask-image: radial-gradient(circle at top calc(100% - calc(var(--np-avatar-size) / 2)) left calc(100% + calc(var(--np-avatar-size) / 2) - var(--np-avatar-offset)), transparent, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
20396
+ [dir="rtl"] .np-avatar-layout-horizontal {
20397
+ --np-avatar-layout-mask-direction: right;
20398
+ }
20399
+ .np-avatar-layout-horizontal-mask,
20400
+ [dir="rtl"] .np-avatar-layout-horizontal-child {
20401
+ -webkit-mask-image: radial-gradient(circle at top calc(100% - (var(--np-avatar-size) / 2)) var(--np-avatar-layout-mask-direction) calc(100% + (var(--np-avatar-size) / 2) - var(--np-avatar-offset)), transparent, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
20402
+ mask-image: radial-gradient(circle at top calc(100% - (var(--np-avatar-size) / 2)) var(--np-avatar-layout-mask-direction) calc(100% + (var(--np-avatar-size) / 2) - var(--np-avatar-offset)), transparent, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
20403
+ -webkit-mask-image: radial-gradient(circle at top calc(100% - calc(var(--np-avatar-size) / 2)) var(--np-avatar-layout-mask-direction) calc(100% + calc(var(--np-avatar-size) / 2) - var(--np-avatar-offset)), transparent, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
20404
+ mask-image: radial-gradient(circle at top calc(100% - calc(var(--np-avatar-size) / 2)) var(--np-avatar-layout-mask-direction) calc(100% + calc(var(--np-avatar-size) / 2) - var(--np-avatar-offset)), transparent, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
20405
+ }
20406
+ [dir="rtl"] .np-avatar-layout-horizontal-mask {
20407
+ margin-inline-end: calc(var(--np-avatar-offset) * -1);
20408
+ }
20409
+ [dir="rtl"] .np-avatar-layout-horizontal-mask:last-child {
20410
+ -webkit-mask-image: initial;
20411
+ mask-image: initial;
20396
20412
  }
20397
20413
  .np-avatar-layout-horizontal-child {
20398
20414
  margin-inline-start: calc(var(--np-avatar-offset) * -1);
20399
20415
  }
20400
20416
  [dir="rtl"] .np-avatar-layout-horizontal-child {
20417
+ margin-inline-start: unset;
20401
20418
  margin-inline-end: calc(var(--np-avatar-offset) * -1);
20402
20419
  }
20403
20420
  .np-icon-button {
@@ -21895,33 +21912,33 @@ button.np-option {
21895
21912
  transform: translateY(10px) scale(0.95);
21896
21913
  }
21897
21914
  .np-panel[data-popper-placement^="top"] .np-panel__arrow {
21898
- inset-block-end: -6px;
21915
+ inset-block-end: -7px;
21899
21916
  }
21900
21917
  .np-panel[data-popper-placement^="right"] > .np-panel__content {
21901
21918
  transform: translateX(-10px) scale(0.95);
21902
21919
  }
21903
21920
  .np-panel[data-popper-placement^="right"] .np-panel__arrow {
21904
- inset-inline-start: -6px;
21921
+ inset-inline-start: -7px;
21905
21922
  }
21906
21923
  [dir="rtl"] .np-panel[data-popper-placement^="right"] .np-panel__arrow {
21907
21924
  inset-inline-start: unset;
21908
- inset-inline-end: -6px;
21925
+ inset-inline-end: -7px;
21909
21926
  }
21910
21927
  .np-panel[data-popper-placement^="bottom"] > .np-panel__content {
21911
21928
  transform: translateY(-10px) scale(0.95);
21912
21929
  }
21913
21930
  .np-panel[data-popper-placement^="bottom"] .np-panel__arrow {
21914
- inset-block-start: -6px;
21931
+ inset-block-start: -7px;
21915
21932
  }
21916
21933
  .np-panel[data-popper-placement^="left"] > .np-panel__content {
21917
21934
  transform: translateX(10px) scale(0.95);
21918
21935
  }
21919
21936
  .np-panel[data-popper-placement^="left"] .np-panel__arrow {
21920
- inset-inline-end: -6px;
21937
+ inset-inline-end: -7px;
21921
21938
  }
21922
21939
  [dir="rtl"] .np-panel[data-popper-placement^="left"] .np-panel__arrow {
21923
21940
  inset-inline-end: unset;
21924
- inset-inline-start: -6px;
21941
+ inset-inline-start: -7px;
21925
21942
  }
21926
21943
  .np-theme-personal .np-panel__content {
21927
21944
  border-radius: 16px;
@@ -25836,7 +25853,8 @@ button.np-link {
25836
25853
  background: var(--color-background-screen);
25837
25854
  border-radius: 24px;
25838
25855
  border-radius: var(--size-24);
25839
- transition: left 300ms;
25856
+ transition: left 300ms,
25857
+ right 300ms;
25840
25858
  }
25841
25859
  .segmented-control__segments--no-animate::after {
25842
25860
  transition: none !important;
@@ -26563,12 +26581,6 @@ button.np-link {
26563
26581
  visibility: visible;
26564
26582
  visibility: initial;
26565
26583
  }
26566
- .np-panel[data-popper-placement^="right"] > .np-panel__content.tooltip-inner .np-panel__arrow {
26567
- inset-inline-start: -7px;
26568
- }
26569
- .np-panel[data-popper-placement^="left"] > .np-panel__content.tooltip-inner .np-panel__arrow {
26570
- inset-inline-end: -7px;
26571
- }
26572
26584
  .typeahead.open .input-group {
26573
26585
  z-index: 1060;
26574
26586
  }
package/build/styles/AvatarLayout/AvatarLayout.css CHANGED
@@ -8,35 +8,52 @@
8
8
  block-size: var(--np-avatar-layout-size);
9
9
  }
10
10
  .np-avatar-layout-diagonal-mask {
11
+ --np-avatar-layout-mask-direction: right;
11
12
  -webkit-mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) right calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
12
13
  mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) right calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
14
+ -webkit-mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) var(--np-avatar-layout-mask-direction) calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
15
+ mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) var(--np-avatar-layout-mask-direction) calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
13
16
  }
14
17
  [dir="rtl"] .np-avatar-layout-diagonal-mask {
15
- -webkit-mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) left calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
16
- mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) left calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
18
+ --np-avatar-layout-mask-direction: left;
19
+ margin-inline-start: calc(var(--np-avatar-layout-size) - var(--np-avatar-size) * 2);
20
+ margin-inline-end: unset;
17
21
  }
18
22
  .np-avatar-layout-diagonal-child {
19
23
  margin-inline-start: calc(var(--np-avatar-layout-size) - var(--np-avatar-size) * 2);
20
24
  margin-block-start: calc(var(--np-avatar-layout-size) - var(--np-avatar-size));
21
25
  }
22
26
  [dir="rtl"] .np-avatar-layout-diagonal-child {
23
- margin-inline-start: 0;
24
- margin-inline-end: calc(var(--np-avatar-layout-size) - var(--np-avatar-size) * 2);
27
+ -webkit-mask-image: initial;
28
+ mask-image: initial;
25
29
  }
26
30
  .np-avatar-layout-horizontal {
31
+ --np-avatar-layout-mask-direction: left;
27
32
  inline-size: calc(var(--np-avatar-size) * var(--np-avatar-avatars-count) - (var(--np-avatar-offset) * (var(--np-avatar-avatars-count) - 1)));
28
33
  inline-size: calc(var(--np-avatar-size) * var(--np-avatar-avatars-count) - calc(var(--np-avatar-offset) * calc(var(--np-avatar-avatars-count) - 1)));
29
34
  block-size: var(--np-avatar-layout-size);
30
35
  }
31
- .np-avatar-layout-horizontal-mask {
32
- -webkit-mask-image: radial-gradient(circle at top calc(100% - (var(--np-avatar-size) / 2)) left calc(100% + (var(--np-avatar-size) / 2) - var(--np-avatar-offset)), transparent, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
33
- mask-image: radial-gradient(circle at top calc(100% - (var(--np-avatar-size) / 2)) left calc(100% + (var(--np-avatar-size) / 2) - var(--np-avatar-offset)), transparent, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
34
- -webkit-mask-image: radial-gradient(circle at top calc(100% - calc(var(--np-avatar-size) / 2)) left calc(100% + calc(var(--np-avatar-size) / 2) - var(--np-avatar-offset)), transparent, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
35
- mask-image: radial-gradient(circle at top calc(100% - calc(var(--np-avatar-size) / 2)) left calc(100% + calc(var(--np-avatar-size) / 2) - var(--np-avatar-offset)), transparent, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
36
+ [dir="rtl"] .np-avatar-layout-horizontal {
37
+ --np-avatar-layout-mask-direction: right;
38
+ }
39
+ .np-avatar-layout-horizontal-mask,
40
+ [dir="rtl"] .np-avatar-layout-horizontal-child {
41
+ -webkit-mask-image: radial-gradient(circle at top calc(100% - (var(--np-avatar-size) / 2)) var(--np-avatar-layout-mask-direction) calc(100% + (var(--np-avatar-size) / 2) - var(--np-avatar-offset)), transparent, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
42
+ mask-image: radial-gradient(circle at top calc(100% - (var(--np-avatar-size) / 2)) var(--np-avatar-layout-mask-direction) calc(100% + (var(--np-avatar-size) / 2) - var(--np-avatar-offset)), transparent, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
43
+ -webkit-mask-image: radial-gradient(circle at top calc(100% - calc(var(--np-avatar-size) / 2)) var(--np-avatar-layout-mask-direction) calc(100% + calc(var(--np-avatar-size) / 2) - var(--np-avatar-offset)), transparent, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
44
+ mask-image: radial-gradient(circle at top calc(100% - calc(var(--np-avatar-size) / 2)) var(--np-avatar-layout-mask-direction) calc(100% + calc(var(--np-avatar-size) / 2) - var(--np-avatar-offset)), transparent, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
45
+ }
46
+ [dir="rtl"] .np-avatar-layout-horizontal-mask {
47
+ margin-inline-end: calc(var(--np-avatar-offset) * -1);
48
+ }
49
+ [dir="rtl"] .np-avatar-layout-horizontal-mask:last-child {
50
+ -webkit-mask-image: initial;
51
+ mask-image: initial;
36
52
  }
37
53
  .np-avatar-layout-horizontal-child {
38
54
  margin-inline-start: calc(var(--np-avatar-offset) * -1);
39
55
  }
40
56
  [dir="rtl"] .np-avatar-layout-horizontal-child {
57
+ margin-inline-start: unset;
41
58
  margin-inline-end: calc(var(--np-avatar-offset) * -1);
42
59
  }
package/build/styles/SegmentedControl/SegmentedControl.css CHANGED
@@ -35,7 +35,8 @@
35
35
  background: var(--color-background-screen);
36
36
  border-radius: 24px;
37
37
  border-radius: var(--size-24);
38
- transition: left 300ms;
38
+ transition: left 300ms,
39
+ right 300ms;
39
40
  }
40
41
  .segmented-control__segments--no-animate::after {
41
42
  transition: none !important;
package/build/styles/Tooltip/Tooltip.css CHANGED
@@ -42,9 +42,3 @@
42
42
  visibility: visible;
43
43
  visibility: initial;
44
44
  }
45
- .np-panel[data-popper-placement^="right"] > .np-panel__content.tooltip-inner .np-panel__arrow {
46
- inset-inline-start: -7px;
47
- }
48
- .np-panel[data-popper-placement^="left"] > .np-panel__content.tooltip-inner .np-panel__arrow {
49
- inset-inline-end: -7px;
50
- }
package/build/styles/common/Panel/Panel.css CHANGED
@@ -40,33 +40,33 @@
40
40
  transform: translateY(10px) scale(0.95);
41
41
  }
42
42
  .np-panel[data-popper-placement^="top"] .np-panel__arrow {
43
- inset-block-end: -6px;
43
+ inset-block-end: -7px;
44
44
  }
45
45
  .np-panel[data-popper-placement^="right"] > .np-panel__content {
46
46
  transform: translateX(-10px) scale(0.95);
47
47
  }
48
48
  .np-panel[data-popper-placement^="right"] .np-panel__arrow {
49
- inset-inline-start: -6px;
49
+ inset-inline-start: -7px;
50
50
  }
51
51
  [dir="rtl"] .np-panel[data-popper-placement^="right"] .np-panel__arrow {
52
52
  inset-inline-start: unset;
53
- inset-inline-end: -6px;
53
+ inset-inline-end: -7px;
54
54
  }
55
55
  .np-panel[data-popper-placement^="bottom"] > .np-panel__content {
56
56
  transform: translateY(-10px) scale(0.95);
57
57
  }
58
58
  .np-panel[data-popper-placement^="bottom"] .np-panel__arrow {
59
- inset-block-start: -6px;
59
+ inset-block-start: -7px;
60
60
  }
61
61
  .np-panel[data-popper-placement^="left"] > .np-panel__content {
62
62
  transform: translateX(10px) scale(0.95);
63
63
  }
64
64
  .np-panel[data-popper-placement^="left"] .np-panel__arrow {
65
- inset-inline-end: -6px;
65
+ inset-inline-end: -7px;
66
66
  }
67
67
  [dir="rtl"] .np-panel[data-popper-placement^="left"] .np-panel__arrow {
68
68
  inset-inline-end: unset;
69
- inset-inline-start: -6px;
69
+ inset-inline-start: -7px;
70
70
  }
71
71
  .np-theme-personal .np-panel__content {
72
72
  border-radius: 16px;
package/build/styles/main.css CHANGED
@@ -20368,36 +20368,53 @@ a[data-toggle="tooltip"] {
20368
20368
  block-size: var(--np-avatar-layout-size);
20369
20369
  }
20370
20370
  .np-avatar-layout-diagonal-mask {
20371
+ --np-avatar-layout-mask-direction: right;
20371
20372
  -webkit-mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) right calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
20372
20373
  mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) right calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
20374
+ -webkit-mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) var(--np-avatar-layout-mask-direction) calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
20375
+ mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) var(--np-avatar-layout-mask-direction) calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
20373
20376
  }
20374
20377
  [dir="rtl"] .np-avatar-layout-diagonal-mask {
20375
- -webkit-mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) left calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
20376
- mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) left calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
20378
+ --np-avatar-layout-mask-direction: left;
20379
+ margin-inline-start: calc(var(--np-avatar-layout-size) - var(--np-avatar-size) * 2);
20380
+ margin-inline-end: unset;
20377
20381
  }
20378
20382
  .np-avatar-layout-diagonal-child {
20379
20383
  margin-inline-start: calc(var(--np-avatar-layout-size) - var(--np-avatar-size) * 2);
20380
20384
  margin-block-start: calc(var(--np-avatar-layout-size) - var(--np-avatar-size));
20381
20385
  }
20382
20386
  [dir="rtl"] .np-avatar-layout-diagonal-child {
20383
- margin-inline-start: 0;
20384
- margin-inline-end: calc(var(--np-avatar-layout-size) - var(--np-avatar-size) * 2);
20387
+ -webkit-mask-image: initial;
20388
+ mask-image: initial;
20385
20389
  }
20386
20390
  .np-avatar-layout-horizontal {
20391
+ --np-avatar-layout-mask-direction: left;
20387
20392
  inline-size: calc(var(--np-avatar-size) * var(--np-avatar-avatars-count) - (var(--np-avatar-offset) * (var(--np-avatar-avatars-count) - 1)));
20388
20393
  inline-size: calc(var(--np-avatar-size) * var(--np-avatar-avatars-count) - calc(var(--np-avatar-offset) * calc(var(--np-avatar-avatars-count) - 1)));
20389
20394
  block-size: var(--np-avatar-layout-size);
20390
20395
  }
20391
- .np-avatar-layout-horizontal-mask {
20392
- -webkit-mask-image: radial-gradient(circle at top calc(100% - (var(--np-avatar-size) / 2)) left calc(100% + (var(--np-avatar-size) / 2) - var(--np-avatar-offset)), transparent, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
20393
- mask-image: radial-gradient(circle at top calc(100% - (var(--np-avatar-size) / 2)) left calc(100% + (var(--np-avatar-size) / 2) - var(--np-avatar-offset)), transparent, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
20394
- -webkit-mask-image: radial-gradient(circle at top calc(100% - calc(var(--np-avatar-size) / 2)) left calc(100% + calc(var(--np-avatar-size) / 2) - var(--np-avatar-offset)), transparent, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
20395
- mask-image: radial-gradient(circle at top calc(100% - calc(var(--np-avatar-size) / 2)) left calc(100% + calc(var(--np-avatar-size) / 2) - var(--np-avatar-offset)), transparent, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
20396
+ [dir="rtl"] .np-avatar-layout-horizontal {
20397
+ --np-avatar-layout-mask-direction: right;
20398
+ }
20399
+ .np-avatar-layout-horizontal-mask,
20400
+ [dir="rtl"] .np-avatar-layout-horizontal-child {
20401
+ -webkit-mask-image: radial-gradient(circle at top calc(100% - (var(--np-avatar-size) / 2)) var(--np-avatar-layout-mask-direction) calc(100% + (var(--np-avatar-size) / 2) - var(--np-avatar-offset)), transparent, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
20402
+ mask-image: radial-gradient(circle at top calc(100% - (var(--np-avatar-size) / 2)) var(--np-avatar-layout-mask-direction) calc(100% + (var(--np-avatar-size) / 2) - var(--np-avatar-offset)), transparent, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
20403
+ -webkit-mask-image: radial-gradient(circle at top calc(100% - calc(var(--np-avatar-size) / 2)) var(--np-avatar-layout-mask-direction) calc(100% + calc(var(--np-avatar-size) / 2) - var(--np-avatar-offset)), transparent, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
20404
+ mask-image: radial-gradient(circle at top calc(100% - calc(var(--np-avatar-size) / 2)) var(--np-avatar-layout-mask-direction) calc(100% + calc(var(--np-avatar-size) / 2) - var(--np-avatar-offset)), transparent, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
20405
+ }
20406
+ [dir="rtl"] .np-avatar-layout-horizontal-mask {
20407
+ margin-inline-end: calc(var(--np-avatar-offset) * -1);
20408
+ }
20409
+ [dir="rtl"] .np-avatar-layout-horizontal-mask:last-child {
20410
+ -webkit-mask-image: initial;
20411
+ mask-image: initial;
20396
20412
  }
20397
20413
  .np-avatar-layout-horizontal-child {
20398
20414
  margin-inline-start: calc(var(--np-avatar-offset) * -1);
20399
20415
  }
20400
20416
  [dir="rtl"] .np-avatar-layout-horizontal-child {
20417
+ margin-inline-start: unset;
20401
20418
  margin-inline-end: calc(var(--np-avatar-offset) * -1);
20402
20419
  }
20403
20420
  .np-icon-button {
@@ -21895,33 +21912,33 @@ button.np-option {
21895
21912
  transform: translateY(10px) scale(0.95);
21896
21913
  }
21897
21914
  .np-panel[data-popper-placement^="top"] .np-panel__arrow {
21898
- inset-block-end: -6px;
21915
+ inset-block-end: -7px;
21899
21916
  }
21900
21917
  .np-panel[data-popper-placement^="right"] > .np-panel__content {
21901
21918
  transform: translateX(-10px) scale(0.95);
21902
21919
  }
21903
21920
  .np-panel[data-popper-placement^="right"] .np-panel__arrow {
21904
- inset-inline-start: -6px;
21921
+ inset-inline-start: -7px;
21905
21922
  }
21906
21923
  [dir="rtl"] .np-panel[data-popper-placement^="right"] .np-panel__arrow {
21907
21924
  inset-inline-start: unset;
21908
- inset-inline-end: -6px;
21925
+ inset-inline-end: -7px;
21909
21926
  }
21910
21927
  .np-panel[data-popper-placement^="bottom"] > .np-panel__content {
21911
21928
  transform: translateY(-10px) scale(0.95);
21912
21929
  }
21913
21930
  .np-panel[data-popper-placement^="bottom"] .np-panel__arrow {
21914
- inset-block-start: -6px;
21931
+ inset-block-start: -7px;
21915
21932
  }
21916
21933
  .np-panel[data-popper-placement^="left"] > .np-panel__content {
21917
21934
  transform: translateX(10px) scale(0.95);
21918
21935
  }
21919
21936
  .np-panel[data-popper-placement^="left"] .np-panel__arrow {
21920
- inset-inline-end: -6px;
21937
+ inset-inline-end: -7px;
21921
21938
  }
21922
21939
  [dir="rtl"] .np-panel[data-popper-placement^="left"] .np-panel__arrow {
21923
21940
  inset-inline-end: unset;
21924
- inset-inline-start: -6px;
21941
+ inset-inline-start: -7px;
21925
21942
  }
21926
21943
  .np-theme-personal .np-panel__content {
21927
21944
  border-radius: 16px;
@@ -25836,7 +25853,8 @@ button.np-link {
25836
25853
  background: var(--color-background-screen);
25837
25854
  border-radius: 24px;
25838
25855
  border-radius: var(--size-24);
25839
- transition: left 300ms;
25856
+ transition: left 300ms,
25857
+ right 300ms;
25840
25858
  }
25841
25859
  .segmented-control__segments--no-animate::after {
25842
25860
  transition: none !important;
@@ -26563,12 +26581,6 @@ button.np-link {
26563
26581
  visibility: visible;
26564
26582
  visibility: initial;
26565
26583
  }
26566
- .np-panel[data-popper-placement^="right"] > .np-panel__content.tooltip-inner .np-panel__arrow {
26567
- inset-inline-start: -7px;
26568
- }
26569
- .np-panel[data-popper-placement^="left"] > .np-panel__content.tooltip-inner .np-panel__arrow {
26570
- inset-inline-end: -7px;
26571
- }
26572
26584
  .typeahead.open .input-group {
26573
26585
  z-index: 1060;
26574
26586
  }
package/build/types/Calendar/Calendar.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../../../src/Calendar/Calendar.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAKxC,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAOtE,MAAM,WAAW,aAAa;IAC5B,+DAA+D;IAC/D,KAAK,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,8HAA8H;IAC9H,GAAG,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAClB,2HAA2H;IAC3H,GAAG,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAClB,8EAA8E;IAC9E,WAAW,CAAC,EAAE,GAAG,WAAW,EAAE,CAAC;IAC/B,+EAA+E;IAC/E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uNAAuN;IACvN,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,yJAAyJ;IACzJ,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,EAAE,IAAI,EAAE,cAAc,KAAK,IAAI,CAAC;IAChE,sFAAsF;IACtF,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAC;CACxC;AAQD;;GAEG;AACH,QAAA,MAAM,QAAQ,GAAI,wGASf,aAAa,gCAmQf,CAAC;AAEF,eAAe,QAAQ,CAAC"}
1
+ {"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../../../src/Calendar/Calendar.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAMxC,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAOtE,MAAM,WAAW,aAAa;IAC5B,+DAA+D;IAC/D,KAAK,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,8HAA8H;IAC9H,GAAG,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAClB,2HAA2H;IAC3H,GAAG,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAClB,8EAA8E;IAC9E,WAAW,CAAC,EAAE,GAAG,WAAW,EAAE,CAAC;IAC/B,+EAA+E;IAC/E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uNAAuN;IACvN,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,yJAAyJ;IACzJ,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,EAAE,IAAI,EAAE,cAAc,KAAK,IAAI,CAAC;IAChE,sFAAsF;IACtF,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAC;CACxC;AAQD;;GAEG;AACH,QAAA,MAAM,QAAQ,GAAI,wGASf,aAAa,gCAqQf,CAAC;AAEF,eAAe,QAAQ,CAAC"}
package/build/types/Carousel/Carousel.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Carousel.d.ts","sourceRoot":"","sources":["../../../src/Carousel/Carousel.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,SAAS,EAA+B,MAAM,OAAO,CAAC;AAIxF,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAGjE,MAAM,MAAM,kBAAkB,GAAG;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,iBAAiB,CAAC,QAAQ,CAAC,CAAC;IACzC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,aAAa,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,kBAAkB,GAAG;IACrD,IAAI,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC1B,OAAO,EAAE,SAAS,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,kBAAkB,GAAG;IACnD,IAAI,EAAE,OAAO,CAAC;CACf,GAAG,IAAI,CAAC,kBAAkB,EAAE,MAAM,CAAC,CAAC;AAErC,MAAM,MAAM,YAAY,GAAG,mBAAmB,GAAG,iBAAiB,CAAC;AACnE,MAAM,WAAW,aAAa;IAC5B,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,YAAY,EAAE,CAAC;IACtB,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAUD,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAmSrC,CAAC;AAYF,eAAe,QAAQ,CAAC"}
1
+ {"version":3,"file":"Carousel.d.ts","sourceRoot":"","sources":["../../../src/Carousel/Carousel.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,SAAS,EAA+B,MAAM,OAAO,CAAC;AAKxF,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAGjE,MAAM,MAAM,kBAAkB,GAAG;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,iBAAiB,CAAC,QAAQ,CAAC,CAAC;IACzC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,aAAa,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,kBAAkB,GAAG;IACrD,IAAI,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC1B,OAAO,EAAE,SAAS,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,kBAAkB,GAAG;IACnD,IAAI,EAAE,OAAO,CAAC;CACf,GAAG,IAAI,CAAC,kBAAkB,EAAE,MAAM,CAAC,CAAC;AAErC,MAAM,MAAM,YAAY,GAAG,mBAAmB,GAAG,iBAAiB,CAAC;AACnE,MAAM,WAAW,aAAa;IAC5B,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,YAAY,EAAE,CAAC;IACtB,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAUD,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAqSrC,CAAC;AAYF,eAAe,QAAQ,CAAC"}
package/build/types/Carousel/_stories/constants.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ import type { CarouselCard } from '../Carousel';
2
+ export declare const stubbedCarouselCards: CarouselCard[];
3
+ //# sourceMappingURL=constants.d.ts.map
package/build/types/Carousel/_stories/constants.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../src/Carousel/_stories/constants.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEhD,eAAO,MAAM,oBAAoB,EAAE,YAAY,EAyC9C,CAAC"}
package/build/types/SegmentedControl/SegmentedControl.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../../src/SegmentedControl/SegmentedControl.tsx"],"names":[],"mappings":"AAMA,KAAK,WAAW,GAAG;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAEhE,KAAK,OAAO,GAAG,WAAW,GAAG;IAAE,QAAQ,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAClD,KAAK,mBAAmB,GAAG,WAAW,GAAG;IAAE,QAAQ,EAAE,MAAM,CAAA;CAAE,CAAC;AAE9D,MAAM,MAAM,QAAQ,GAAG,SAAS,OAAO,EAAE,GAAG,SAAS,mBAAmB,EAAE,CAAC;AAE3E,KAAK,yBAAyB,GAAG;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,OAAO,GAAG,MAAM,CAAC;IACvB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC,CAAC;AAEF,KAAK,yBAAyB,GAAG;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,SAAS,mBAAmB,EAAE,CAAC;CAC1C,CAAC;AAEF,KAAK,0BAA0B,GAAG;IAChC,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,EAAE,SAAS,OAAO,EAAE,CAAC;CAC9B,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,yBAAyB,GAC3D,CAAC,yBAAyB,GAAG,0BAA0B,CAAC,CAAC;AAE3D,QAAA,MAAM,gBAAgB,GAAI,4CAMvB,qBAAqB,gCAgIvB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
1
+ {"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../../src/SegmentedControl/SegmentedControl.tsx"],"names":[],"mappings":"AAOA,KAAK,WAAW,GAAG;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAEhE,KAAK,OAAO,GAAG,WAAW,GAAG;IAAE,QAAQ,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAClD,KAAK,mBAAmB,GAAG,WAAW,GAAG;IAAE,QAAQ,EAAE,MAAM,CAAA;CAAE,CAAC;AAE9D,MAAM,MAAM,QAAQ,GAAG,SAAS,OAAO,EAAE,GAAG,SAAS,mBAAmB,EAAE,CAAC;AAE3E,KAAK,yBAAyB,GAAG;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,OAAO,GAAG,MAAM,CAAC;IACvB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC,CAAC;AAEF,KAAK,yBAAyB,GAAG;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,SAAS,mBAAmB,EAAE,CAAC;CAC1C,CAAC;AAEF,KAAK,0BAA0B,GAAG;IAChC,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,EAAE,SAAS,OAAO,EAAE,CAAC;CAC9B,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,yBAAyB,GAC3D,CAAC,yBAAyB,GAAG,0BAA0B,CAAC,CAAC;AAE3D,QAAA,MAAM,gBAAgB,GAAI,4CAMvB,qBAAqB,gCAqIvB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
package/build/types/Tooltip/Tooltip.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAQA,OAAO,EAGL,iBAAiB,EAEjB,SAAS,EAKV,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,WAAW,EAAY,MAAM,WAAW,CAAC;AAClD,OAAO,EACL,cAAc,EACd,YAAY,EACZ,aAAa,EACb,WAAW,EACZ,MAAM,gCAAgC,CAAC;AAExC,MAAM,MAAM,YAAY,GAAG,iBAAiB,CAAC;IAC3C,QAAQ,CAAC,EAAE,WAAW,GAAG,aAAa,GAAG,cAAc,GAAG,YAAY,CAAC;IACvE,KAAK,EAAE,SAAS,CAAC;IACjB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb,CAAC,GACA,WAAW,CAAC;AAEd,QAAA,MAAM,OAAO,GAAI,+CAMd,YAAY,gCA6Dd,CAAC;AAEF,eAAe,OAAO,CAAC"}
1
+ {"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAQA,OAAO,EAGL,iBAAiB,EAEjB,SAAS,EAKV,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,WAAW,EAAY,MAAM,WAAW,CAAC;AAElD,OAAO,EACL,cAAc,EACd,YAAY,EACZ,aAAa,EACb,WAAW,EACZ,MAAM,gCAAgC,CAAC;AAExC,MAAM,MAAM,YAAY,GAAG,iBAAiB,CAAC;IAC3C,QAAQ,CAAC,EAAE,WAAW,GAAG,aAAa,GAAG,cAAc,GAAG,YAAY,CAAC;IACvE,KAAK,EAAE,SAAS,CAAC;IACjB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb,CAAC,GACA,WAAW,CAAC;AAEd,QAAA,MAAM,OAAO,GAAI,+CAMd,YAAY,gCAsEd,CAAC;AAEF,eAAe,OAAO,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@transferwise/components",
3
- "version": "46.160.1",
3
+ "version": "46.160.2",
4
4
  "description": "Neptune React components",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
@@ -92,8 +92,8 @@
92
92
  "storybook-addon-tag-badges": "^3.1.0",
93
93
  "storybook-addon-test-codegen": "^3.0.4",
94
94
  "@transferwise/less-config": "3.2.0",
95
- "@wise/wds-configs": "0.0.0",
96
- "@wise/components-theming": "1.10.3"
95
+ "@wise/components-theming": "1.10.3",
96
+ "@wise/wds-configs": "0.0.0"
97
97
  },
98
98
  "peerDependencies": {
99
99
  "@transferwise/icons": "^3 || ^4",
@@ -121,7 +121,7 @@
121
121
  "lodash.debounce": "^4.0.8",
122
122
  "merge-props": "^6.0.0",
123
123
  "react-transition-group": "^4.4.5",
124
- "virtua": "^0.49.3"
124
+ "virtua": "^0.50.0"
125
125
  },
126
126
  "publishConfig": {
127
127
  "access": "public",
package/src/AvatarLayout/AvatarLayout.css CHANGED
@@ -8,35 +8,52 @@
8
8
  block-size: var(--np-avatar-layout-size);
9
9
  }
10
10
  .np-avatar-layout-diagonal-mask {
11
+ --np-avatar-layout-mask-direction: right;
11
12
  -webkit-mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) right calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
12
13
  mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) right calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
14
+ -webkit-mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) var(--np-avatar-layout-mask-direction) calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
15
+ mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) var(--np-avatar-layout-mask-direction) calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
13
16
  }
14
17
  [dir="rtl"] .np-avatar-layout-diagonal-mask {
15
- -webkit-mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) left calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
16
- mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) left calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
18
+ --np-avatar-layout-mask-direction: left;
19
+ margin-inline-start: calc(var(--np-avatar-layout-size) - var(--np-avatar-size) * 2);
20
+ margin-inline-end: unset;
17
21
  }
18
22
  .np-avatar-layout-diagonal-child {
19
23
  margin-inline-start: calc(var(--np-avatar-layout-size) - var(--np-avatar-size) * 2);
20
24
  margin-block-start: calc(var(--np-avatar-layout-size) - var(--np-avatar-size));
21
25
  }
22
26
  [dir="rtl"] .np-avatar-layout-diagonal-child {
23
- margin-inline-start: 0;
24
- margin-inline-end: calc(var(--np-avatar-layout-size) - var(--np-avatar-size) * 2);
27
+ -webkit-mask-image: initial;
28
+ mask-image: initial;
25
29
  }
26
30
  .np-avatar-layout-horizontal {
31
+ --np-avatar-layout-mask-direction: left;
27
32
  inline-size: calc(var(--np-avatar-size) * var(--np-avatar-avatars-count) - (var(--np-avatar-offset) * (var(--np-avatar-avatars-count) - 1)));
28
33
  inline-size: calc(var(--np-avatar-size) * var(--np-avatar-avatars-count) - calc(var(--np-avatar-offset) * calc(var(--np-avatar-avatars-count) - 1)));
29
34
  block-size: var(--np-avatar-layout-size);
30
35
  }
31
- .np-avatar-layout-horizontal-mask {
32
- -webkit-mask-image: radial-gradient(circle at top calc(100% - (var(--np-avatar-size) / 2)) left calc(100% + (var(--np-avatar-size) / 2) - var(--np-avatar-offset)), transparent, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
33
- mask-image: radial-gradient(circle at top calc(100% - (var(--np-avatar-size) / 2)) left calc(100% + (var(--np-avatar-size) / 2) - var(--np-avatar-offset)), transparent, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
34
- -webkit-mask-image: radial-gradient(circle at top calc(100% - calc(var(--np-avatar-size) / 2)) left calc(100% + calc(var(--np-avatar-size) / 2) - var(--np-avatar-offset)), transparent, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
35
- mask-image: radial-gradient(circle at top calc(100% - calc(var(--np-avatar-size) / 2)) left calc(100% + calc(var(--np-avatar-size) / 2) - var(--np-avatar-offset)), transparent, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
36
+ [dir="rtl"] .np-avatar-layout-horizontal {
37
+ --np-avatar-layout-mask-direction: right;
38
+ }
39
+ .np-avatar-layout-horizontal-mask,
40
+ [dir="rtl"] .np-avatar-layout-horizontal-child {
41
+ -webkit-mask-image: radial-gradient(circle at top calc(100% - (var(--np-avatar-size) / 2)) var(--np-avatar-layout-mask-direction) calc(100% + (var(--np-avatar-size) / 2) - var(--np-avatar-offset)), transparent, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
42
+ mask-image: radial-gradient(circle at top calc(100% - (var(--np-avatar-size) / 2)) var(--np-avatar-layout-mask-direction) calc(100% + (var(--np-avatar-size) / 2) - var(--np-avatar-offset)), transparent, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
43
+ -webkit-mask-image: radial-gradient(circle at top calc(100% - calc(var(--np-avatar-size) / 2)) var(--np-avatar-layout-mask-direction) calc(100% + calc(var(--np-avatar-size) / 2) - var(--np-avatar-offset)), transparent, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
44
+ mask-image: radial-gradient(circle at top calc(100% - calc(var(--np-avatar-size) / 2)) var(--np-avatar-layout-mask-direction) calc(100% + calc(var(--np-avatar-size) / 2) - var(--np-avatar-offset)), transparent, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
45
+ }
46
+ [dir="rtl"] .np-avatar-layout-horizontal-mask {
47
+ margin-inline-end: calc(var(--np-avatar-offset) * -1);
48
+ }
49
+ [dir="rtl"] .np-avatar-layout-horizontal-mask:last-child {
50
+ -webkit-mask-image: initial;
51
+ mask-image: initial;
36
52
  }
37
53
  .np-avatar-layout-horizontal-child {
38
54
  margin-inline-start: calc(var(--np-avatar-offset) * -1);
39
55
  }
40
56
  [dir="rtl"] .np-avatar-layout-horizontal-child {
57
+ margin-inline-start: unset;
41
58
  margin-inline-end: calc(var(--np-avatar-offset) * -1);
42
59
  }
package/src/AvatarLayout/AvatarLayout.less CHANGED
@@ -8,18 +8,20 @@
8
8
  height: var(--np-avatar-layout-size);
9
9
 
10
10
  &-mask {
11
- mask-image:
12
- radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) right calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)),
13
- transparent 0,
14
- transparent calc(var(--np-avatar-size) / 2 + 2px),
15
- black 0);
16
-
17
- :dir(rtl) & {
18
- mask-image:
19
- radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) left calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)),
20
- transparent 0,
21
- transparent calc(var(--np-avatar-size) / 2 + 2px),
22
- black 0);
11
+ --np-avatar-layout-mask-direction: right;
12
+ mask-image: radial-gradient(
13
+ circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset))
14
+ var(--np-avatar-layout-mask-direction)
15
+ calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)),
16
+ transparent 0,
17
+ transparent calc(var(--np-avatar-size) / 2 + 2px),
18
+ black 0
19
+ );
20
+
21
+ [dir="rtl"] & {
22
+ --np-avatar-layout-mask-direction: left;
23
+ margin-left: calc(var(--np-avatar-layout-size) - var(--np-avatar-size) * 2);
24
+ margin-right: unset;
23
25
  }
24
26
  }
25
27
 
@@ -27,30 +29,52 @@
27
29
  margin-left: calc(var(--np-avatar-layout-size) - var(--np-avatar-size) * 2);
28
30
  margin-top: calc(var(--np-avatar-layout-size) - var(--np-avatar-size));
29
31
 
30
- :dir(rtl) & {
31
- margin-left: 0;
32
- margin-right: calc(var(--np-avatar-layout-size) - var(--np-avatar-size) * 2);
32
+ [dir="rtl"] & {
33
+ mask-image: unset;
33
34
  }
34
35
  }
35
36
  }
36
37
 
37
38
  &-horizontal {
38
- width: calc(var(--np-avatar-size) * var(--np-avatar-avatars-count) - calc(var(--np-avatar-offset) * calc(var(--np-avatar-avatars-count) - 1)));
39
+ --np-avatar-layout-mask-direction: left;
40
+ width: calc(
41
+ var(--np-avatar-size) * var(--np-avatar-avatars-count) -
42
+ calc(var(--np-avatar-offset) * calc(var(--np-avatar-avatars-count) - 1))
43
+ );
39
44
  height: var(--np-avatar-layout-size);
40
45
 
46
+ [dir="rtl"] & {
47
+ --np-avatar-layout-mask-direction: right;
48
+ }
49
+
50
+ &-mask,
51
+ [dir="rtl"] &-child {
52
+ mask-image: radial-gradient(
53
+ circle at top calc(100% - calc(var(--np-avatar-size) / 2))
54
+ var(--np-avatar-layout-mask-direction)
55
+ calc(100% + calc(var(--np-avatar-size) / 2) - var(--np-avatar-offset)),
56
+ transparent,
57
+ transparent calc(var(--np-avatar-size) / 2 + 2px),
58
+ black 0
59
+ );
60
+ }
61
+
41
62
  &-mask {
42
- mask-image: radial-gradient(circle at top calc(100% - calc(var(--np-avatar-size) / 2)) left calc(100% + calc(var(--np-avatar-size) / 2) - var(--np-avatar-offset)),
43
- transparent,
44
- transparent calc(var(--np-avatar-size) / 2 + 2px),
45
- black 0);
63
+ [dir="rtl"] & {
64
+ &:last-child {
65
+ mask-image: unset;
66
+ }
67
+ margin-right: calc(var(--np-avatar-offset) * -1);
68
+ }
46
69
  }
47
70
 
48
71
  &-child {
49
72
  margin-left: calc(var(--np-avatar-offset) * -1);
50
73
 
51
- :dir(rtl) & {
74
+ [dir="rtl"] & {
75
+ margin-left: unset;
52
76
  margin-right: calc(var(--np-avatar-offset) * -1);
53
77
  }
54
78
  }
55
79
  }
56
- }
80
+ }