@transferwise/components 0.0.0-experimental-a9e2e05 → 0.0.0-experimental-e92f7ac

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 (153) hide show
  1. package/build/avatarLayout/AvatarLayout.js +2 -9
  2. package/build/avatarLayout/AvatarLayout.js.map +1 -1
  3. package/build/avatarLayout/AvatarLayout.mjs +2 -9
  4. package/build/avatarLayout/AvatarLayout.mjs.map +1 -1
  5. package/build/button/{LegacyButton/Button.js → Button.js} +24 -25
  6. package/build/button/Button.js.map +1 -0
  7. package/build/button/{LegacyButton/Button.mjs → Button.mjs} +24 -25
  8. package/build/button/Button.mjs.map +1 -0
  9. package/build/button/classMap.js +42 -0
  10. package/build/button/classMap.js.map +1 -0
  11. package/build/button/classMap.mjs +39 -0
  12. package/build/button/classMap.mjs.map +1 -0
  13. package/build/button/{LegacyButton/legacyUtils → legacyUtils}/legacyUtils.js +21 -21
  14. package/build/button/legacyUtils/legacyUtils.js.map +1 -0
  15. package/build/button/{LegacyButton/legacyUtils → legacyUtils}/legacyUtils.mjs +21 -21
  16. package/build/button/legacyUtils/legacyUtils.mjs.map +1 -0
  17. package/build/circularButton/CircularButton.js +1 -1
  18. package/build/circularButton/CircularButton.js.map +1 -1
  19. package/build/circularButton/CircularButton.mjs +1 -1
  20. package/build/circularButton/CircularButton.mjs.map +1 -1
  21. package/build/common/action/Action.js +1 -1
  22. package/build/common/action/Action.js.map +1 -1
  23. package/build/common/action/Action.mjs +1 -1
  24. package/build/common/action/Action.mjs.map +1 -1
  25. package/build/criticalBanner/CriticalCommsBanner.js +1 -1
  26. package/build/criticalBanner/CriticalCommsBanner.mjs +1 -1
  27. package/build/header/Header.js +1 -1
  28. package/build/header/Header.mjs +1 -1
  29. package/build/index.js +1 -1
  30. package/build/index.mjs +1 -1
  31. package/build/link/Link.js +3 -8
  32. package/build/link/Link.js.map +1 -1
  33. package/build/link/Link.mjs +3 -8
  34. package/build/link/Link.mjs.map +1 -1
  35. package/build/main.css +29 -288
  36. package/build/nudge/Nudge.js +1 -1
  37. package/build/nudge/Nudge.js.map +1 -1
  38. package/build/nudge/Nudge.mjs +1 -1
  39. package/build/nudge/Nudge.mjs.map +1 -1
  40. package/build/select/Select.js +1 -1
  41. package/build/select/Select.mjs +1 -1
  42. package/build/styles/avatarLayout/AvatarLayout.css +0 -11
  43. package/build/styles/iconButton/IconButton.css +29 -24
  44. package/build/styles/main.css +29 -288
  45. package/build/types/avatarLayout/AvatarLayout.d.ts +2 -1
  46. package/build/types/avatarLayout/AvatarLayout.d.ts.map +1 -1
  47. package/build/types/avatarLayout/index.d.ts +0 -1
  48. package/build/types/avatarLayout/index.d.ts.map +1 -1
  49. package/build/types/button/{LegacyButton/Button.d.ts → Button.d.ts} +5 -8
  50. package/build/types/button/Button.d.ts.map +1 -0
  51. package/build/types/button/classMap.d.ts.map +1 -0
  52. package/build/types/button/index.d.ts +2 -2
  53. package/build/types/button/index.d.ts.map +1 -1
  54. package/build/types/button/legacyUtils/index.d.ts.map +1 -0
  55. package/build/types/button/{LegacyButton/legacyUtils → legacyUtils}/legacyUtils.d.ts +1 -1
  56. package/build/types/button/legacyUtils/legacyUtils.d.ts.map +1 -0
  57. package/build/types/link/Link.d.ts +2 -2
  58. package/build/types/link/Link.d.ts.map +1 -1
  59. package/build/types/test-utils/index.d.ts.map +1 -1
  60. package/build/upload/steps/completeStep/completeStep.js +1 -1
  61. package/build/upload/steps/completeStep/completeStep.mjs +1 -1
  62. package/build/upload/steps/processingStep/processingStep.js +1 -1
  63. package/build/upload/steps/processingStep/processingStep.mjs +1 -1
  64. package/build/uploadInput/UploadInput.js +1 -1
  65. package/build/uploadInput/UploadInput.mjs +1 -1
  66. package/package.json +3 -3
  67. package/src/avatarLayout/AvatarLayout.css +0 -11
  68. package/src/avatarLayout/AvatarLayout.less +1 -18
  69. package/src/avatarLayout/AvatarLayout.tsx +3 -11
  70. package/src/avatarLayout/index.ts +0 -1
  71. package/src/avatarWrapper/AvatarWrapper.story.tsx +0 -2
  72. package/src/button/{LegacyButton/Button.less → Button.less} +1 -1
  73. package/src/button/{LegacyButton/Button.spec.tsx → Button.spec.tsx} +3 -3
  74. package/src/button/Button.story.tsx +163 -0
  75. package/src/button/{LegacyButton/Button.tsx → Button.tsx} +9 -14
  76. package/src/button/{LegacyButton/classMap.ts → classMap.ts} +1 -1
  77. package/src/button/index.ts +3 -2
  78. package/src/button/{LegacyButton/legacyUtils → legacyUtils}/legacyUtils.spec.tsx +2 -2
  79. package/src/button/{LegacyButton/legacyUtils → legacyUtils}/legacyUtils.ts +2 -2
  80. package/src/circularButton/CircularButton.tsx +1 -1
  81. package/src/common/action/Action.tsx +1 -1
  82. package/src/iconButton/IconButton.css +29 -24
  83. package/src/iconButton/IconButton.less +4 -4
  84. package/src/link/Link.tsx +6 -15
  85. package/src/main.css +29 -288
  86. package/src/main.less +1 -2
  87. package/src/nudge/Nudge.tsx +1 -1
  88. package/src/phoneNumberInput/PhoneNumberInput.spec.tsx +283 -0
  89. package/src/primitives/PrimitiveAnchor/stories/PrimitiveAnchor.story.tsx +1 -1
  90. package/src/primitives/PrimitiveAnchor/test/PrimitiveAnchor.spec.tsx +1 -1
  91. package/src/primitives/PrimitiveButton/stories/PrimitiveButton.story.tsx +1 -1
  92. package/src/primitives/PrimitiveButton/test/PrimitiveButton.spec.tsx +3 -2
  93. package/src/test-utils/index.tsx +1 -0
  94. package/build/button/Button/src/Button.js +0 -93
  95. package/build/button/Button/src/Button.js.map +0 -1
  96. package/build/button/Button/src/Button.mjs +0 -91
  97. package/build/button/Button/src/Button.mjs.map +0 -1
  98. package/build/button/LegacyButton/Button.js.map +0 -1
  99. package/build/button/LegacyButton/Button.mjs.map +0 -1
  100. package/build/button/LegacyButton/classMap.js +0 -42
  101. package/build/button/LegacyButton/classMap.js.map +0 -1
  102. package/build/button/LegacyButton/classMap.mjs +0 -39
  103. package/build/button/LegacyButton/classMap.mjs.map +0 -1
  104. package/build/button/LegacyButton/legacyUtils/legacyUtils.js.map +0 -1
  105. package/build/button/LegacyButton/legacyUtils/legacyUtils.mjs.map +0 -1
  106. package/build/button/src/Button.js +0 -66
  107. package/build/button/src/Button.js.map +0 -1
  108. package/build/button/src/Button.mjs +0 -64
  109. package/build/button/src/Button.mjs.map +0 -1
  110. package/build/styles/button/Button/less/Button.css +0 -253
  111. package/build/styles/button/Button/less/Button.vars.css +0 -57
  112. package/build/types/button/Button/index.d.ts +0 -3
  113. package/build/types/button/Button/index.d.ts.map +0 -1
  114. package/build/types/button/Button/src/Button.d.ts +0 -4
  115. package/build/types/button/Button/src/Button.d.ts.map +0 -1
  116. package/build/types/button/Button/src/Button.types.d.ts +0 -50
  117. package/build/types/button/Button/src/Button.types.d.ts.map +0 -1
  118. package/build/types/button/Button/src/index.d.ts +0 -2
  119. package/build/types/button/Button/src/index.d.ts.map +0 -1
  120. package/build/types/button/LegacyButton/Button.d.ts.map +0 -1
  121. package/build/types/button/LegacyButton/classMap.d.ts.map +0 -1
  122. package/build/types/button/LegacyButton/index.d.ts +0 -3
  123. package/build/types/button/LegacyButton/index.d.ts.map +0 -1
  124. package/build/types/button/LegacyButton/legacyUtils/index.d.ts.map +0 -1
  125. package/build/types/button/LegacyButton/legacyUtils/legacyUtils.d.ts.map +0 -1
  126. package/build/types/button/src/Button.d.ts +0 -47
  127. package/build/types/button/src/Button.d.ts.map +0 -1
  128. package/build/types/button/src/index.d.ts +0 -3
  129. package/build/types/button/src/index.d.ts.map +0 -1
  130. package/src/button/Button/index.ts +0 -2
  131. package/src/button/Button/less/Button.css +0 -253
  132. package/src/button/Button/less/Button.less +0 -221
  133. package/src/button/Button/less/Button.vars.css +0 -57
  134. package/src/button/Button/less/Button.vars.less +0 -65
  135. package/src/button/Button/src/Button.tsx +0 -116
  136. package/src/button/Button/src/Button.types.ts +0 -70
  137. package/src/button/Button/src/index.ts +0 -1
  138. package/src/button/Button/stories/Button.story.tsx +0 -314
  139. package/src/button/Button/stories/Button.tests.story.tsx +0 -288
  140. package/src/button/Button/test/Button.spec.tsx +0 -328
  141. package/src/button/LegacyButton/Button.story.tsx +0 -224
  142. package/src/button/LegacyButton/index.ts +0 -3
  143. package/src/button/src/Button.tsx +0 -87
  144. package/src/button/src/index.ts +0 -2
  145. package/src/button/test/Button.spec.tsx +0 -32
  146. package/src/phoneNumberInput/PhoneNumberInput.rtl.spec.tsx +0 -32
  147. package/src/phoneNumberInput/PhoneNumberInput.spec.js +0 -356
  148. /package/build/styles/button/{LegacyButton/Button.css → Button.css} +0 -0
  149. /package/build/types/button/{LegacyButton/classMap.d.ts → classMap.d.ts} +0 -0
  150. /package/build/types/button/{LegacyButton/legacyUtils → legacyUtils}/index.d.ts +0 -0
  151. /package/src/button/{LegacyButton/Button.css → Button.css} +0 -0
  152. /package/src/button/{LegacyButton/__snapshots__ → __snapshots__}/Button.spec.tsx.snap +0 -0
  153. /package/src/button/{LegacyButton/legacyUtils → legacyUtils}/index.ts +0 -0
@@ -518,18 +518,10 @@ div.critical-comms .critical-comms-body {
518
518
  -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);
519
519
  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);
520
520
  }
521
- [dir="rtl"] .np-avatar-layout-diagonal-mask {
522
- -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);
523
- 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);
524
- }
525
521
  .np-avatar-layout-diagonal-child {
526
522
  margin-left: calc(var(--np-avatar-layout-size) - var(--np-avatar-size) * 2);
527
523
  margin-top: calc(var(--np-avatar-layout-size) - var(--np-avatar-size));
528
524
  }
529
- [dir="rtl"] .np-avatar-layout-diagonal-child {
530
- margin-left: 0;
531
- margin-right: calc(var(--np-avatar-layout-size) - var(--np-avatar-size) * 2);
532
- }
533
525
  .np-avatar-layout-horizontal {
534
526
  width: calc(var(--np-avatar-size) * 2 - var(--np-avatar-offset) - 2px);
535
527
  height: var(--np-avatar-layout-size);
@@ -543,79 +535,81 @@ div.critical-comms .critical-comms-body {
543
535
  .np-avatar-layout-horizontal-child {
544
536
  margin-left: calc(var(--np-avatar-offset) * -1);
545
537
  }
546
- [dir="rtl"] .np-avatar-layout-horizontal-child {
547
- margin-right: calc(var(--np-avatar-offset) * -1);
548
- }
549
538
  .np-icon-button {
550
539
  border: none;
551
540
  }
552
541
  .np-icon-button-tertiary-default {
553
- --Button-color: var(--color-interactive-primary);
554
- --Button-background: var(--color-background-neutral);
542
+ color: var(--color-interactive-primary);
543
+ background-color: rgba(134,167,189,0.10196);
544
+ background-color: var(--color-background-neutral);
555
545
  }
556
546
  .np-icon-button-tertiary-default:not(.disabled):not(:disabled):hover {
557
- --Button-background-hover: var(--color-background-neutral-hover);
547
+ background-color: var(--color-background-neutral-hover);
558
548
  }
559
549
  .np-icon-button-tertiary-default:not(.disabled):not(:disabled):active {
560
- --Button-background-active: var(--color-background-neutral-active);
550
+ background-color: var(--color-background-neutral-active);
561
551
  }
562
552
  .np-icon-button-primary-default {
563
- --Button-color: var(--color-interactive-control);
564
- --Button-background: var(--color-interactive-accent);
553
+ color: var(--color-interactive-control);
554
+ background-color: #00a2dd;
555
+ background-color: var(--color-interactive-accent);
565
556
  }
566
557
  .np-icon-button-primary-default:not(.disabled):not(:disabled):hover {
567
- --Button-background-hover: var(--color-interactive-accent-hover);
558
+ background-color: #008fc9;
559
+ background-color: var(--color-interactive-accent-hover);
568
560
  }
569
561
  .np-icon-button-primary-default:not(.disabled):not(:disabled):active {
570
- --Button-background-active: var(--color-interactive-accent-active);
562
+ background-color: #0081ba;
563
+ background-color: var(--color-interactive-accent-active);
571
564
  }
572
565
  .np-icon-button-primary-negative {
573
- --Button-color: var(--color-contrast-overlay);
574
- --Button-background: var(--color-sentiment-negative-primary);
566
+ color: var(--color-contrast-overlay);
567
+ background-color: var(--color-sentiment-negative-primary);
575
568
  }
576
569
  .np-icon-button-primary-negative:not(.disabled):not(:disabled):hover {
577
- --Button-background-hover: var(--color-sentiment-negative-primary-hover);
570
+ background-color: var(--color-sentiment-negative-primary-hover);
578
571
  }
579
572
  .np-icon-button-primary-negative:not(.disabled):not(:disabled):active {
580
- --Button-background-active: var(--color-sentiment-negative-primary-active);
573
+ background-color: var(--color-sentiment-negative-primary-active);
581
574
  }
582
575
  .np-theme-personal--bright-green .np-icon-button-primary-negative {
583
576
  color: var(--color-white);
584
577
  }
585
578
  .np-icon-button-minimal-default {
586
- --Button-color: var(--color-interactive-primary);
587
- --Button-background: var(--color-background-screen);
579
+ color: var(--color-interactive-primary);
580
+ background-color: #ffffff;
581
+ background-color: var(--color-background-screen);
588
582
  background-color: transparent;
589
583
  }
590
584
  .np-icon-button-minimal-default:not(.disabled):not(:disabled):hover {
591
- --Button-background-hover: var(--color-background-screen-hover);
585
+ background-color: var(--color-background-screen-hover);
592
586
  }
593
587
  .np-icon-button-minimal-default:not(.disabled):not(:disabled):active {
594
- --Button-background-active: var(--color-background-screen-active);
588
+ background-color: var(--color-background-screen-active);
595
589
  }
596
590
  .np-icon-button-secondary-default {
597
- --Button-color: var(--color-interactive-primary);
598
- --Button-background: var(--color-interactive-neutral);
591
+ color: var(--color-interactive-primary);
592
+ background-color: var(--color-interactive-neutral);
599
593
  }
600
594
  .np-icon-button-secondary-default:not(.disabled):not(:disabled):hover {
601
- --Button-background-hover: var(--color-interactive-neutral-hover);
595
+ background-color: var(--color-interactive-neutral-hover);
602
596
  }
603
597
  .np-icon-button-secondary-default:not(.disabled):not(:disabled):active {
604
- --Button-background-active: var(--color-interactive-neutral-active);
598
+ background-color: var(--color-interactive-neutral-active);
605
599
  }
606
600
  .np-theme-personal--bright-green .np-icon-button-secondary-default,
607
601
  .np-theme-personal--forest-green .np-icon-button-secondary-default {
608
602
  color: var(--color-interactive-control);
609
603
  }
610
604
  .np-icon-button-secondary-negative {
611
- --Button-color: var(--color-sentiment-negative-primary);
612
- --Button-background: var(--color-sentiment-negative-secondary);
605
+ color: var(--color-sentiment-negative-primary);
606
+ background-color: var(--color-sentiment-negative-secondary);
613
607
  }
614
608
  .np-icon-button-secondary-negative:not(.disabled):not(:disabled):hover {
615
- --Button-background-hover: var(--color-sentiment-negative-secondary-hover);
609
+ background-color: var(--color-sentiment-negative-secondary-hover);
616
610
  }
617
611
  .np-icon-button-secondary-negative:not(.disabled):not(:disabled):active {
618
- --Button-background-active: var(--color-sentiment-negative-secondary-active);
612
+ background-color: var(--color-sentiment-negative-secondary-active);
619
613
  }
620
614
  .np-theme-personal--bright-green .np-icon-button-secondary-negative {
621
615
  color: var(--color-white);
@@ -711,259 +705,6 @@ div.critical-comms .critical-comms-body {
711
705
  .np-btn.disabled[class] {
712
706
  pointer-events: auto;
713
707
  }
714
- :root {
715
- --Button-background: var(--color-interactive-accent);
716
- --Button-background-hover: var(--color-interactive-accent-hover);
717
- --Button-background-active: var(--color-interactive-accent-active);
718
- --Button-color: var(--color-interactive-control);
719
- --Button-padding: var(--size-8) var(--size-12);
720
- --Button-border-radius: var(--radius-full);
721
- --Button-font-size: var(--font-size-16);
722
- --Button-line-height: var(--size-24);
723
- --Button-font-weight: var(--font-weight-semi-bold);
724
- --Button-letter-spacing: -0.011em;
725
- --Button-size-small-padding: 5px var(--size-12);
726
- --Button-size-medium-padding: var(--size-8) var(--size-12);
727
- --Button-size-large-padding: var(--size-12) var(--size-16);
728
- --Button-avatar-border-color: var(--color-border-neutral);
729
- --Button-secondary-background: var(--color-interactive-neutral);
730
- --Button-secondary-background-hover: var(--color-interactive-neutral-hover);
731
- --Button-secondary-background-active: var(--color-interactive-neutral-active);
732
- --Button-secondary-color: var(--color-interactive-primary);
733
- --Button-tertiary-background: var(--color-background-neutral);
734
- --Button-tertiary-background-hover: var(--color-background-neutral-hover);
735
- --Button-tertiary-background-active: var(--color-background-neutral-active);
736
- --Button-tertiary-color: var(--color-content-primary);
737
- --Button-minimal-background: transparent;
738
- --Button-minimal-background-hover: var(--color-background-screen-hover);
739
- --Button-minimal-background-active: var(--color-background-screen-active);
740
- --Button-minimal-color: var(--color-interactive-primary);
741
- --Button-primary-negative-background: var(--color-sentiment-negative-primary);
742
- --Button-primary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
743
- --Button-primary-negative-background-active: var(--color-sentiment-negative-primary-active);
744
- --Button-primary-negative-color: var(--color-contrast);
745
- --Button-primary-netative-avatar-border-color: rgba(255,255,255,0.2);
746
- --Button-secondary-negative-background: var(--color-sentiment-negative-secondary);
747
- --Button-secondary-negative-background-hover: var(--color-sentiment-negative-secondary-hover);
748
- --Button-secondary-negative-background-active: var(--color-sentiment-negative-secondary-active);
749
- --Button-secondary-negative-color: var(--color-sentiment-negative-primary);
750
- --Button-secondary-netative-avatar-border-color: rgba(168,32,13,0.12157);
751
- }
752
- .np-theme-personal--dark {
753
- --Button-primary-netative-avatar-border-color: rgba(14,15,12,0.12157);
754
- }
755
- .np-theme-personal--forest-green {
756
- --color-interactive-neutral: rgba(159,232,112,0.2);
757
- --color-interactive-neutral-hover: rgba(205,255,173,0.2);
758
- --color-interactive-neutral-active: rgba(236,255,224,0.2);
759
- --color-sentiment-negative-secondary: rgba(255,196,194,0.2);
760
- --color-sentiment-negative-secondary-hover: rgba(255,220,219,0.2);
761
- --color-sentiment-negative-secondary-active: rgba(255,235,235,0.2);
762
- --Button-primary-netative-avatar-border-color: rgba(14,15,12,0.12157);
763
- --Button-secondary-netative-avatar-border-color: rgba(14,15,12,0.12157);
764
- }
765
- .np-theme-personal--bright-green {
766
- --color-contrast: #FFFFFF;
767
- --Button-secondary-color: var(--color-interactive-control);
768
- --Button-secondary-negative-color: var(--color-contrast);
769
- --Button-secondary-netative-avatar-border-color: var(--Button-primary-netative-avatar-border-color);
770
- }
771
- /* Button Styles */
772
- .wds-Button {
773
- display: inline-flex;
774
- flex: none;
775
- width: auto;
776
- align-items: center;
777
- justify-content: center;
778
- vertical-align: middle;
779
- font-weight: 600;
780
- font-weight: var(--Button-font-weight);
781
- font-size: 1rem;
782
- font-size: var(--Button-font-size);
783
- letter-spacing: -0.011em;
784
- letter-spacing: var(--Button-letter-spacing);
785
- line-height: 24px;
786
- line-height: var(--Button-line-height);
787
- text-align: center;
788
- -webkit-text-decoration: none;
789
- text-decoration: none;
790
- white-space: nowrap;
791
- word-wrap: break-word;
792
- -webkit-appearance: none;
793
- -moz-appearance: none;
794
- appearance: none;
795
- background-color: #00a2dd;
796
- background-color: var(--Button-background);
797
- border: none;
798
- border-radius: 9999px;
799
- border-radius: var(--Button-border-radius);
800
- color: var(--Button-color);
801
- cursor: pointer;
802
- padding: 8px 12px;
803
- padding: var(--Button-padding);
804
- }
805
- .wds-Button:focus {
806
- -webkit-text-decoration: none;
807
- text-decoration: none;
808
- }
809
- .wds-Button:hover {
810
- background-color: #008fc9;
811
- background-color: var(--Button-background-hover);
812
- -webkit-text-decoration: none;
813
- text-decoration: none;
814
- }
815
- .wds-Button:active {
816
- background-color: #0081ba;
817
- background-color: var(--Button-background-active);
818
- -webkit-text-decoration: none;
819
- text-decoration: none;
820
- }
821
- .wds-Button:disabled {
822
- mix-blend-mode: luminosity;
823
- opacity: 0.45;
824
- cursor: not-allowed;
825
- }
826
- .wds-Button:disabled:hover,
827
- .wds-Button:disabled:active {
828
- background-color: #00a2dd;
829
- background-color: var(--Button-background);
830
- }
831
- .wds-Button--secondary {
832
- --Button-background: var(--Button-secondary-background);
833
- --Button-background-hover: var(--Button-secondary-hover-background);
834
- --Button-background-active: var(--Button-secondary-active-background);
835
- --Button-color: var(--Button-secondary-color);
836
- }
837
- .wds-Button--tertiary {
838
- --Button-background: var(--Button-tertiary-background);
839
- --Button-background-hover: var(--Button-tertiary-hover-background);
840
- --Button-background-active: var(--Button-tertiary-active-background);
841
- --Button-color: var(--Button-tertiary-color);
842
- }
843
- .wds-Button--tertiary .wds-Button-icon--right {
844
- color: var(--color-interactive-primary);
845
- }
846
- .wds-Button--minimal {
847
- --Button-background: var(--Button-minimal-background);
848
- --Button-background-hover: var(--Button-minimal-hover-background);
849
- --Button-background-active: var(--Button-minimal-active-background);
850
- --Button-color: var(--Button-minimal-color);
851
- -webkit-text-decoration: underline;
852
- text-decoration: underline;
853
- }
854
- .wds-Button--minimal:hover,
855
- .wds-Button--minimal:hover:active {
856
- -webkit-text-decoration: underline;
857
- text-decoration: underline;
858
- }
859
- .wds-Button--negative.wds-Button--primary {
860
- --Button-background: var(--Button-primary-negative-background);
861
- --Button-background-hover: var(--Button-primary-negative-hover-background);
862
- --Button-background-active: var(--Button-primary-negative-active-background);
863
- --Button-color: var(--Button-primary-negative-color);
864
- --Button-avatar-border-color: var(--Button-primary-netative-avatar-border-color);
865
- }
866
- .wds-Button--negative.wds-Button--secondary {
867
- --Button-background: var(--Button-secondary-negative-background);
868
- --Button-background-hover: var(--Button-secondary-negative-hover-background);
869
- --Button-background-active: var(--Button-secondary-negative-active-background);
870
- --Button-color: var(--Button-secondary-negative-color);
871
- --Button-avatar-border-color: var(--Button-secondary-netative-avatar-border-color);
872
- }
873
- .wds-Button--small {
874
- --Button-padding: var(--Button-size-small-padding);
875
- --Button-line-height: 22px;
876
- --Button-font-size: var(--font-size-14);
877
- --Button-letter-spacing: -0.006em;
878
- }
879
- .wds-Button--small .wds-Button-icon--left {
880
- margin-right: 4px;
881
- margin-right: var(--size-4);
882
- }
883
- [dir="rtl"] .wds-Button--small .wds-Button-icon--left {
884
- margin-right: 0;
885
- margin-left: 4px;
886
- margin-left: var(--size-4);
887
- }
888
- .wds-Button--medium {
889
- --Button-padding: var(--Button-size-medium-padding);
890
- }
891
- .wds-Button--large {
892
- --Button-padding: var(--Button-size-large-padding);
893
- }
894
- .wds-Button--block {
895
- width: 100%;
896
- }
897
- .wds-Button-avatars {
898
- display: inline-flex;
899
- margin-right: 5px;
900
- margin-left: calc(4px * -1);
901
- margin-left: calc(var(--size-4) * -1);
902
- }
903
- [dir="rtl"] .wds-Button-avatars {
904
- margin-right: 0;
905
- margin-left: 5px;
906
- }
907
- .wds-Button-avatars .np-circle {
908
- --circle-border-color: var(--Button-avatar-border-color);
909
- }
910
- .wds-Button-avatars .np-avatar-view .np-avatar-view-content {
911
- color: var(--Button-color);
912
- }
913
- .wds-Button-icon {
914
- display: inline-block;
915
- }
916
- .wds-Button-icon--left {
917
- margin-right: 8px;
918
- margin-right: var(--size-8);
919
- }
920
- [dir="rtl"] .wds-Button-icon--left {
921
- margin-right: 0;
922
- margin-left: 8px;
923
- margin-left: var(--size-8);
924
- }
925
- .wds-Button-icon--right {
926
- margin-left: 4px;
927
- margin-left: var(--size-4);
928
- }
929
- [dir="rtl"] .wds-Button-icon--right {
930
- margin-left: 0;
931
- margin-right: 4px;
932
- margin-right: var(--size-4);
933
- }
934
- .wds-Button-content {
935
- position: relative;
936
- }
937
- .wds-Button-content--loading .wds-Button-label,
938
- .wds-Button-content--loading .wds-Button-media,
939
- .wds-Button-content--loading .wds-Button-icon {
940
- visibility: hidden;
941
- opacity: 0;
942
- }
943
- .wds-Button-label {
944
- display: flex;
945
- justify-content: center;
946
- align-items: center;
947
- position: relative;
948
- }
949
- .wds-Button-loader {
950
- position: absolute;
951
- display: flex;
952
- justify-content: center;
953
- align-items: center;
954
- width: 100%;
955
- height: 100%;
956
- }
957
- .wds-Button-loader .process-circle {
958
- stroke: var(--Button-color);
959
- }
960
- /* RTL Styles */
961
- [dir="rtl"] .wds-Button .tw-icon-chevron-right,[dir="rtl"] .wds-Button .tw-icon-arrow-right {
962
- transform: rotate(180deg);
963
- }
964
- [dir="rtl"] .wds-Button .tw-icon-chevron-left,[dir="rtl"] .wds-Button .tw-icon-arrow-left {
965
- transform: rotate(180deg);
966
- }
967
708
  .np-card {
968
709
  overflow: hidden;
969
710
  transition-property: transform, box-shadow;
@@ -1,5 +1,5 @@
1
1
  import { AvatarViewProps } from '../avatarView';
2
- export type SingleAvatarType = {
2
+ type SingleAvatarType = {
3
3
  asset?: AvatarViewProps['children'];
4
4
  } & Omit<AvatarViewProps, 'notification' | 'selected' | 'size' | 'badge' | 'children' | 'interactive'>;
5
5
  export type Props = {
@@ -7,4 +7,5 @@ export type Props = {
7
7
  orientation?: 'horizontal' | 'diagonal';
8
8
  } & Pick<AvatarViewProps, 'size' | 'interactive' | 'className' | 'role' | 'aria-label' | 'aria-labelledby' | 'aria-hidden'>;
9
9
  export default function AvatarLayout({ avatars, orientation: orientationProp, size, className, interactive, ...restProps }: Props): import("react").JSX.Element | null;
10
+ export {};
10
11
  //# sourceMappingURL=AvatarLayout.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"AvatarLayout.d.ts","sourceRoot":"","sources":["../../../src/avatarLayout/AvatarLayout.tsx"],"names":[],"mappings":"AACA,OAAmB,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAG5D,MAAM,MAAM,gBAAgB,GAAG;IAAE,KAAK,CAAC,EAAE,eAAe,CAAC,UAAU,CAAC,CAAA;CAAE,GAAG,IAAI,CAC3E,eAAe,EACf,cAAc,GAAG,UAAU,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,aAAa,CAC5E,CAAC;AAEF,MAAM,MAAM,KAAK,GAAG;IAClB,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;CACzC,GAAG,IAAI,CACN,eAAe,EACf,MAAM,GAAG,aAAa,GAAG,WAAW,GAAG,MAAM,GAAG,YAAY,GAAG,iBAAiB,GAAG,aAAa,CACjG,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,OAAY,EACZ,WAAW,EAAE,eAA8B,EAC3C,IAAS,EACT,SAAS,EACT,WAAW,EACX,GAAG,SAAS,EACb,EAAE,KAAK,sCAqDP"}
1
+ {"version":3,"file":"AvatarLayout.d.ts","sourceRoot":"","sources":["../../../src/avatarLayout/AvatarLayout.tsx"],"names":[],"mappings":"AACA,OAAmB,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAE5D,KAAK,gBAAgB,GAAG;IAAE,KAAK,CAAC,EAAE,eAAe,CAAC,UAAU,CAAC,CAAA;CAAE,GAAG,IAAI,CACpE,eAAe,EACf,cAAc,GAAG,UAAU,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,aAAa,CAC5E,CAAC;AAEF,MAAM,MAAM,KAAK,GAAG;IAClB,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;CACzC,GAAG,IAAI,CACN,eAAe,EACf,MAAM,GAAG,aAAa,GAAG,WAAW,GAAG,MAAM,GAAG,YAAY,GAAG,iBAAiB,GAAG,aAAa,CACjG,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,OAAY,EACZ,WAAW,EAAE,eAA8B,EAC3C,IAAS,EACT,SAAS,EACT,WAAW,EACX,GAAG,SAAS,EACb,EAAE,KAAK,sCA8CP"}
@@ -1,4 +1,3 @@
1
1
  export type { Props as AvatarLayoutProps } from './AvatarLayout';
2
- export type { SingleAvatarType } from './AvatarLayout';
3
2
  export { default } from './AvatarLayout';
4
3
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/avatarLayout/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,KAAK,IAAI,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACjE,YAAY,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AACvD,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/avatarLayout/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,KAAK,IAAI,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACjE,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC"}
@@ -1,4 +1,4 @@
1
- import { ControlTypeAccent, ControlTypeNegative, ControlTypePositive, PriorityPrimary, PrioritySecondary, PriorityTertiary, SizeExtraSmall, SizeSmall, SizeMedium, SizeLarge } from '../../common';
1
+ import { ControlTypeAccent, ControlTypeNegative, ControlTypePositive, PriorityPrimary, PrioritySecondary, PriorityTertiary, SizeExtraSmall, SizeSmall, SizeMedium, SizeLarge } from '../common';
2
2
  /** @deprecated */
3
3
  type DeprecatedTypes = 'primary' | 'pay' | 'secondary' | 'danger' | 'link';
4
4
  /** @deprecated */
@@ -7,19 +7,16 @@ type CommonProps = {
7
7
  block?: boolean;
8
8
  disabled?: boolean;
9
9
  loading?: boolean;
10
- /** @deprecated */
11
10
  type?: ControlTypeAccent | ControlTypeNegative | ControlTypePositive | DeprecatedTypes | null;
12
11
  priority?: PriorityPrimary | PrioritySecondary | PriorityTertiary | null;
13
12
  size?: SizeSmall | SizeMedium | SizeLarge | DeprecatedSizes;
14
13
  };
15
- export type ButtonProps = CommonProps & Omit<React.ComponentPropsWithRef<'button'>, 'type'> & {
16
- as?: 'button' | undefined;
17
- /** @deprecated */
14
+ type ButtonProps = CommonProps & Omit<React.ComponentPropsWithRef<'button'>, 'type'> & {
15
+ as?: 'button';
18
16
  htmlType?: 'submit' | 'reset' | 'button';
19
17
  };
20
- export type AnchorProps = CommonProps & Omit<React.ComponentPropsWithRef<'a'>, 'type'> & {
21
- as?: 'a' | undefined;
22
- href?: string;
18
+ type AnchorProps = CommonProps & Omit<React.ComponentPropsWithRef<'a'>, 'type'> & {
19
+ as?: 'a';
23
20
  };
24
21
  export type Props = ButtonProps | AnchorProps;
25
22
  export type ButtonReferenceType = HTMLButtonElement | HTMLAnchorElement;
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/button/Button.tsx"],"names":[],"mappings":"AAIA,OAAO,EAIL,iBAAiB,EACjB,mBAAmB,EACnB,mBAAmB,EACnB,eAAe,EACf,iBAAiB,EACjB,gBAAgB,EAChB,cAAc,EACd,SAAS,EACT,UAAU,EACV,SAAS,EACV,MAAM,WAAW,CAAC;AAOnB,kBAAkB;AAClB,KAAK,eAAe,GAAG,SAAS,GAAG,KAAK,GAAG,WAAW,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE3E,kBAAkB;AAClB,KAAK,eAAe,GAAG,cAAc,CAAC;AAEtC,KAAK,WAAW,GAAG;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,iBAAiB,GAAG,mBAAmB,GAAG,mBAAmB,GAAG,eAAe,GAAG,IAAI,CAAC;IAC9F,QAAQ,CAAC,EAAE,eAAe,GAAG,iBAAiB,GAAG,gBAAgB,GAAG,IAAI,CAAC;IACzE,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,GAAG,eAAe,CAAC;CAC7D,CAAC;AAEF,KAAK,WAAW,GAAG,WAAW,GAC5B,IAAI,CAAC,KAAK,CAAC,qBAAqB,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC,GAAG;IACpD,EAAE,CAAC,EAAE,QAAQ,CAAC;IACd,QAAQ,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC;CAC1C,CAAC;AAEJ,KAAK,WAAW,GAAG,WAAW,GAC5B,IAAI,CAAC,KAAK,CAAC,qBAAqB,CAAC,GAAG,CAAC,EAAE,MAAM,CAAC,GAAG;IAC/C,EAAE,CAAC,EAAE,GAAG,CAAC;CACV,CAAC;AAEJ,MAAM,MAAM,KAAK,GAAG,WAAW,GAAG,WAAW,CAAC;AAE9C,MAAM,MAAM,mBAAmB,GAAG,iBAAiB,GAAG,iBAAiB,CAAC;AAExE,QAAA,MAAM,MAAM,uJAkGX,CAAC;AAEF,eAAe,MAAM,CAAC"}
@@ -0,0 +1 @@
1
+ {"version":3,"file":"classMap.d.ts","sourceRoot":"","sources":["../../../src/button/classMap.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY;;;;CAIxB,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;CAI5B,CAAC"}
@@ -1,3 +1,3 @@
1
- export { default } from './src';
2
- export * from './src';
1
+ export { default } from './Button';
2
+ export type { Props as ButtonProps } from './Button';
3
3
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAChC,cAAc,OAAO,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AAEnC,YAAY,EAAE,KAAK,IAAI,WAAW,EAAE,MAAM,UAAU,CAAC"}
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/button/legacyUtils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,gBAAgB,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC"}
@@ -1,4 +1,4 @@
1
- import { ControlType, Priority, Size, Type } from '../../../common';
1
+ import { ControlType, Priority, Size, Type } from '../../common';
2
2
  type OldTypeKeys = Type.DANGER | Type.LINK | Type.SECONDARY;
3
3
  declare const deprecatedTypeMapMessage: {
4
4
  danger: string;
@@ -0,0 +1 @@
1
+ {"version":3,"file":"legacyUtils.d.ts","sourceRoot":"","sources":["../../../../src/button/legacyUtils/legacyUtils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAWjE,KAAK,WAAW,GAAG,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,SAAS,CAAC;AAO5D,QAAA,MAAM,wBAAwB;;;;;;CAM7B,CAAC;AAIF,KAAK,oBAAoB,GAAG,CAC1B,YAAY,EAAE,IAAI,GAAG,CAAC,MAAM,GAAG,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,GAAG,IAAI,KACxD,GAAG,WAAW,EAAE,GAAG,MAAM,GAAG,IAAI,CAAC;AAEtC,eAAO,MAAM,gBAAgB,EAAE,oBAGb,CAAC;AAEnB,KAAK,wBAAwB,GAAG,CAC9B,gBAAgB,CAAC,EAAE,QAAQ,GAAG,CAAC,MAAM,GAAG,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,GAAG,IAAI,EACpE,YAAY,CAAC,EAAE,WAAW,GAAG,CAAC,MAAM,GAAG,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,GAAG,IAAI,KAChE,GAAG,WAAW,EAAE,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;AAElD,eAAO,MAAM,oBAAoB,EAAE,wBAalC,CAAC;AAEF,KAAK,4BAA4B,GAAG,MAAM,OAAO,wBAAwB,CAAC;AAC1E,KAAK,yBAAyB,GAAG,CAAC,MAAM,EAAE;IACxC,IAAI,CAAC,EAAE,GAAG,IAAI,EAAE,CAAC;IACjB,IAAI,CAAC,EAAE,4BAA4B,GAAG,CAAC,MAAM,GAAG,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,GAAG,IAAI,CAAC;CAC9E,KAAK,IAAI,CAAC;AACX,eAAO,MAAM,qBAAqB,EAAE,yBAWnC,CAAC"}
@@ -1,6 +1,6 @@
1
- import type { PrimitiveAnchorProps } from '../primitives';
1
+ import { AnchorHTMLAttributes } from 'react';
2
2
  import { LinkLarge, LinkDefault } from '../common';
3
- export type Props = PrimitiveAnchorProps & {
3
+ export type Props = AnchorHTMLAttributes<HTMLAnchorElement> & {
4
4
  type?: LinkLarge | LinkDefault;
5
5
  };
6
6
  /**
@@ -1 +1 @@
1
- {"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../../src/link/Link.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAE1D,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAInD,MAAM,MAAM,KAAK,GAAG,oBAAoB,GAAG;IAAE,IAAI,CAAC,EAAE,SAAS,GAAG,WAAW,CAAA;CAAE,CAAC;AAE9E;;;;GAIG;AACH,QAAA,MAAM,IAAI,4FASP,KAAK,gCA0BP,CAAC;AAEF,eAAe,IAAI,CAAC"}
1
+ {"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../../src/link/Link.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAG7C,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAInD,MAAM,MAAM,KAAK,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,GAAG;IAAE,IAAI,CAAC,EAAE,SAAS,GAAG,WAAW,CAAA;CAAE,CAAC;AAEjG;;;;GAIG;AACH,QAAA,MAAM,IAAI,4FASP,KAAK,gCAkBP,CAAC;AAEF,eAAe,IAAI,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/test-utils/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAM,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,MAAM,EAAc,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAMxD;;;;GAIG;AACH,iBAAS,YAAY,CACnB,EAAE,EAAE,YAAY,EAChB,EAAE,MAAuB,EAAE,QAAa,EAAE,GAAG,aAAa,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAK,GAChE,UAAU,CAAC,OAAO,MAAM,CAAC,CAK3B;AAED;;;GAGG;AACH,iBAAS,gBAAgB,CACvB,QAAQ,EAAE,MAAM,OAAO,EACvB,EAAE,MAAuB,EAAE,QAAa,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAK,uEAKhD;AAED,cAAc,wBAAwB,CAAC;AACvC,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,OAAO,EAAE,YAAY,IAAI,MAAM,EAAE,gBAAgB,IAAI,UAAU,EAAE,SAAS,EAAE,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/test-utils/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAM,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,MAAM,EAAc,MAAM,wBAAwB,CAAC;AAE5D,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAMxD;;;;GAIG;AACH,iBAAS,YAAY,CACnB,EAAE,EAAE,YAAY,EAChB,EAAE,MAAuB,EAAE,QAAa,EAAE,GAAG,aAAa,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAK,GAChE,UAAU,CAAC,OAAO,MAAM,CAAC,CAK3B;AAED;;;GAGG;AACH,iBAAS,gBAAgB,CACvB,QAAQ,EAAE,MAAM,OAAO,EACvB,EAAE,MAAuB,EAAE,QAAa,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAK,uEAKhD;AAED,cAAc,wBAAwB,CAAC;AACvC,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,OAAO,EAAE,YAAY,IAAI,MAAM,EAAE,gBAAgB,IAAI,UAAU,EAAE,SAAS,EAAE,CAAC"}
@@ -2,7 +2,7 @@
2
2
 
3
3
  var icons = require('@transferwise/icons');
4
4
  var Body = require('../../../body/Body.js');
5
- var Button = require('../../../button/src/Button.js');
5
+ var Button = require('../../../button/Button.js');
6
6
  var Title = require('../../../title/Title.js');
7
7
  var jsxRuntime = require('react/jsx-runtime');
8
8
  var typography = require('../../../common/propsValues/typography.js');
@@ -1,6 +1,6 @@
1
1
  import { Document } from '@transferwise/icons';
2
2
  import Body from '../../../body/Body.mjs';
3
- import Button from '../../../button/src/Button.mjs';
3
+ import Button from '../../../button/Button.mjs';
4
4
  import Title from '../../../title/Title.mjs';
5
5
  import { jsx, jsxs } from 'react/jsx-runtime';
6
6
  import { Typography } from '../../../common/propsValues/typography.mjs';
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var Button = require('../../../button/src/Button.js');
3
+ var Button = require('../../../button/Button.js');
4
4
  require('../../../common/theme.js');
5
5
  require('../../../common/direction.js');
6
6
  require('../../../common/propsValues/control.js');
@@ -1,4 +1,4 @@
1
- import Button from '../../../button/src/Button.mjs';
1
+ import Button from '../../../button/Button.mjs';
2
2
  import '../../../common/theme.mjs';
3
3
  import '../../../common/direction.mjs';
4
4
  import '../../../common/propsValues/control.mjs';
@@ -3,7 +3,7 @@
3
3
  var clsx = require('clsx');
4
4
  var React = require('react');
5
5
  var reactIntl = require('react-intl');
6
- var Button = require('../button/src/Button.js');
6
+ var Button = require('../button/Button.js');
7
7
  require('../common/theme.js');
8
8
  require('../common/direction.js');
9
9
  var control = require('../common/propsValues/control.js');
@@ -1,7 +1,7 @@
1
1
  import { clsx } from 'clsx';
2
2
  import { useState, useRef, useEffect } from 'react';
3
3
  import { useIntl } from 'react-intl';
4
- import Button from '../button/src/Button.mjs';
4
+ import Button from '../button/Button.mjs';
5
5
  import '../common/theme.mjs';
6
6
  import '../common/direction.mjs';
7
7
  import { Priority, ControlType } from '../common/propsValues/control.mjs';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@transferwise/components",
3
- "version": "0.0.0-experimental-a9e2e05",
3
+ "version": "0.0.0-experimental-e92f7ac",
4
4
  "description": "Neptune React components",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
@@ -92,12 +92,12 @@
92
92
  "rollup-preserve-directives": "^1.1.1",
93
93
  "storybook": "^8.2.2",
94
94
  "@transferwise/less-config": "3.1.0",
95
- "@transferwise/neptune-css": "0.0.0-experimental-a9e2e05",
95
+ "@transferwise/neptune-css": "14.20.1",
96
96
  "@wise/components-theming": "1.6.1"
97
97
  },
98
98
  "peerDependencies": {
99
99
  "@transferwise/icons": "^3.13.1",
100
- "@transferwise/neptune-css": "0.0.0-experimental-a9e2e05",
100
+ "@transferwise/neptune-css": "^14.9.6",
101
101
  "@wise/art": "^2.16",
102
102
  "@wise/components-theming": "^1.0.0",
103
103
  "react": ">=18",
@@ -11,18 +11,10 @@
11
11
  -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
12
  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);
13
13
  }
14
- [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);
17
- }
18
14
  .np-avatar-layout-diagonal-child {
19
15
  margin-left: calc(var(--np-avatar-layout-size) - var(--np-avatar-size) * 2);
20
16
  margin-top: calc(var(--np-avatar-layout-size) - var(--np-avatar-size));
21
17
  }
22
- [dir="rtl"] .np-avatar-layout-diagonal-child {
23
- margin-left: 0;
24
- margin-right: calc(var(--np-avatar-layout-size) - var(--np-avatar-size) * 2);
25
- }
26
18
  .np-avatar-layout-horizontal {
27
19
  width: calc(var(--np-avatar-size) * 2 - var(--np-avatar-offset) - 2px);
28
20
  height: var(--np-avatar-layout-size);
@@ -36,6 +28,3 @@
36
28
  .np-avatar-layout-horizontal-child {
37
29
  margin-left: calc(var(--np-avatar-offset) * -1);
38
30
  }
39
- [dir="rtl"] .np-avatar-layout-horizontal-child {
40
- margin-right: calc(var(--np-avatar-offset) * -1);
41
- }
@@ -13,24 +13,11 @@
13
13
  transparent 0,
14
14
  transparent calc(var(--np-avatar-size) / 2 + 2px),
15
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);
23
- }
24
16
  }
25
17
 
26
18
  &-child {
27
19
  margin-left: calc(var(--np-avatar-layout-size) - var(--np-avatar-size) * 2);
28
20
  margin-top: calc(var(--np-avatar-layout-size) - var(--np-avatar-size));
29
-
30
- :dir(rtl) & {
31
- margin-left: 0;
32
- margin-right: calc(var(--np-avatar-layout-size) - var(--np-avatar-size) * 2);
33
- }
34
21
  }
35
22
  }
36
23
 
@@ -47,10 +34,6 @@
47
34
 
48
35
  &-child {
49
36
  margin-left: calc(var(--np-avatar-offset) * -1);
50
-
51
- :dir(rtl) & {
52
- margin-right: calc(var(--np-avatar-offset) * -1);
53
- }
54
37
  }
55
38
  }
56
- }
39
+ }