@transferwise/components 0.0.0-experimental-6528439 → 0.0.0-experimental-1ffdc56

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 (189) hide show
  1. package/build/alert/Alert.js +33 -17
  2. package/build/alert/Alert.js.map +1 -1
  3. package/build/alert/Alert.mjs +30 -14
  4. package/build/alert/Alert.mjs.map +1 -1
  5. package/build/avatarLayout/AvatarLayout.js +9 -2
  6. package/build/avatarLayout/AvatarLayout.js.map +1 -1
  7. package/build/avatarLayout/AvatarLayout.mjs +9 -2
  8. package/build/avatarLayout/AvatarLayout.mjs.map +1 -1
  9. package/build/button/Button.js +86 -79
  10. package/build/button/Button.js.map +1 -1
  11. package/build/button/Button.mjs +87 -80
  12. package/build/button/Button.mjs.map +1 -1
  13. package/build/button/Button.resolver.js +74 -0
  14. package/build/button/Button.resolver.js.map +1 -0
  15. package/build/button/Button.resolver.mjs +72 -0
  16. package/build/button/Button.resolver.mjs.map +1 -0
  17. package/build/button/LegacyButton.js +114 -0
  18. package/build/button/LegacyButton.js.map +1 -0
  19. package/build/button/LegacyButton.mjs +112 -0
  20. package/build/button/LegacyButton.mjs.map +1 -0
  21. package/build/common/action/Action.js +26 -15
  22. package/build/common/action/Action.js.map +1 -1
  23. package/build/common/action/Action.mjs +26 -15
  24. package/build/common/action/Action.mjs.map +1 -1
  25. package/build/common/propsValues/sentiment.js +1 -0
  26. package/build/common/propsValues/sentiment.js.map +1 -1
  27. package/build/common/propsValues/sentiment.mjs +1 -0
  28. package/build/common/propsValues/sentiment.mjs.map +1 -1
  29. package/build/criticalBanner/CriticalCommsBanner.js +10 -73
  30. package/build/criticalBanner/CriticalCommsBanner.js.map +1 -1
  31. package/build/criticalBanner/CriticalCommsBanner.mjs +11 -74
  32. package/build/criticalBanner/CriticalCommsBanner.mjs.map +1 -1
  33. package/build/dimmer/Dimmer.js +67 -41
  34. package/build/dimmer/Dimmer.js.map +1 -1
  35. package/build/dimmer/Dimmer.mjs +69 -43
  36. package/build/dimmer/Dimmer.mjs.map +1 -1
  37. package/build/header/Header.js +2 -2
  38. package/build/header/Header.js.map +1 -1
  39. package/build/header/Header.mjs +1 -1
  40. package/build/i18n/en.json +1 -0
  41. package/build/i18n/en.json.js +1 -0
  42. package/build/i18n/en.json.js.map +1 -1
  43. package/build/i18n/en.json.mjs +1 -0
  44. package/build/i18n/en.json.mjs.map +1 -1
  45. package/build/index.js +2 -2
  46. package/build/index.mjs +1 -1
  47. package/build/inputs/_BottomSheet.js +8 -1
  48. package/build/inputs/_BottomSheet.js.map +1 -1
  49. package/build/inputs/_BottomSheet.mjs +9 -2
  50. package/build/inputs/_BottomSheet.mjs.map +1 -1
  51. package/build/inputs/_Popover.js +8 -1
  52. package/build/inputs/_Popover.js.map +1 -1
  53. package/build/inputs/_Popover.mjs +9 -2
  54. package/build/inputs/_Popover.mjs.map +1 -1
  55. package/build/link/Link.js +8 -3
  56. package/build/link/Link.js.map +1 -1
  57. package/build/link/Link.mjs +8 -3
  58. package/build/link/Link.mjs.map +1 -1
  59. package/build/main.css +250 -72
  60. package/build/primitives/PrimitiveAnchor/src/PrimitiveAnchor.js +2 -4
  61. package/build/primitives/PrimitiveAnchor/src/PrimitiveAnchor.js.map +1 -1
  62. package/build/primitives/PrimitiveAnchor/src/PrimitiveAnchor.mjs +2 -4
  63. package/build/primitives/PrimitiveAnchor/src/PrimitiveAnchor.mjs.map +1 -1
  64. package/build/primitives/PrimitiveButton/src/PrimitiveButton.js +3 -5
  65. package/build/primitives/PrimitiveButton/src/PrimitiveButton.js.map +1 -1
  66. package/build/primitives/PrimitiveButton/src/PrimitiveButton.mjs +3 -5
  67. package/build/primitives/PrimitiveButton/src/PrimitiveButton.mjs.map +1 -1
  68. package/build/select/Select.js +2 -2
  69. package/build/select/Select.js.map +1 -1
  70. package/build/select/Select.mjs +1 -1
  71. package/build/statusIcon/StatusIcon.js +5 -1
  72. package/build/statusIcon/StatusIcon.js.map +1 -1
  73. package/build/statusIcon/StatusIcon.messages.js +3 -0
  74. package/build/statusIcon/StatusIcon.messages.js.map +1 -1
  75. package/build/statusIcon/StatusIcon.messages.mjs +3 -0
  76. package/build/statusIcon/StatusIcon.messages.mjs.map +1 -1
  77. package/build/statusIcon/StatusIcon.mjs +5 -1
  78. package/build/statusIcon/StatusIcon.mjs.map +1 -1
  79. package/build/styles/avatarLayout/AvatarLayout.css +11 -0
  80. package/build/styles/button/Button.css +220 -15
  81. package/build/styles/button/Button.vars.css +46 -0
  82. package/build/styles/button/LegacyButton.css +23 -0
  83. package/build/styles/criticalBanner/CriticalCommsBanner.css +7 -72
  84. package/build/styles/main.css +250 -72
  85. package/build/styles/statusIcon/StatusIcon.css +4 -0
  86. package/build/types/alert/Alert.d.ts +2 -1
  87. package/build/types/alert/Alert.d.ts.map +1 -1
  88. package/build/types/avatarLayout/AvatarLayout.d.ts.map +1 -1
  89. package/build/types/button/Button.d.ts +2 -23
  90. package/build/types/button/Button.d.ts.map +1 -1
  91. package/build/types/button/Button.resolver.d.ts +35 -0
  92. package/build/types/button/Button.resolver.d.ts.map +1 -0
  93. package/build/types/button/Button.types.d.ts +70 -0
  94. package/build/types/button/Button.types.d.ts.map +1 -0
  95. package/build/types/button/LegacyButton.d.ts +44 -0
  96. package/build/types/button/LegacyButton.d.ts.map +1 -0
  97. package/build/types/button/index.d.ts +2 -2
  98. package/build/types/button/index.d.ts.map +1 -1
  99. package/build/types/common/action/Action.d.ts +4 -1
  100. package/build/types/common/action/Action.d.ts.map +1 -1
  101. package/build/types/common/propsValues/sentiment.d.ts +1 -0
  102. package/build/types/common/propsValues/sentiment.d.ts.map +1 -1
  103. package/build/types/criticalBanner/CriticalCommsBanner.d.ts.map +1 -1
  104. package/build/types/dimmer/Dimmer.d.ts.map +1 -1
  105. package/build/types/inputs/_BottomSheet.d.ts.map +1 -1
  106. package/build/types/inputs/_Popover.d.ts.map +1 -1
  107. package/build/types/link/Link.d.ts +2 -2
  108. package/build/types/link/Link.d.ts.map +1 -1
  109. package/build/types/primitives/PrimitiveAnchor/src/PrimitiveAnchor.d.ts.map +1 -1
  110. package/build/types/primitives/PrimitiveAnchor/src/PrimitiveAnchor.types.d.ts +6 -2
  111. package/build/types/primitives/PrimitiveAnchor/src/PrimitiveAnchor.types.d.ts.map +1 -1
  112. package/build/types/primitives/PrimitiveButton/src/PrimitiveButton.d.ts.map +1 -1
  113. package/build/types/statusIcon/StatusIcon.d.ts.map +1 -1
  114. package/build/types/statusIcon/StatusIcon.messages.d.ts +5 -0
  115. package/build/types/statusIcon/StatusIcon.messages.d.ts.map +1 -1
  116. package/build/types/test-utils/index.d.ts +2 -0
  117. package/build/types/test-utils/index.d.ts.map +1 -1
  118. package/build/types/test-utils/story-config.d.ts +1 -1
  119. package/build/types/test-utils/story-config.d.ts.map +1 -1
  120. package/build/types/withNextPortal/withNextPortal.d.ts.map +1 -1
  121. package/build/upload/steps/completeStep/completeStep.js +2 -2
  122. package/build/upload/steps/completeStep/completeStep.js.map +1 -1
  123. package/build/upload/steps/completeStep/completeStep.mjs +1 -1
  124. package/build/upload/steps/processingStep/processingStep.js +2 -2
  125. package/build/upload/steps/processingStep/processingStep.js.map +1 -1
  126. package/build/upload/steps/processingStep/processingStep.mjs +1 -1
  127. package/build/uploadInput/UploadInput.js +3 -3
  128. package/build/uploadInput/UploadInput.js.map +1 -1
  129. package/build/uploadInput/UploadInput.mjs +1 -1
  130. package/build/withNextPortal/withNextPortal.js +2 -5
  131. package/build/withNextPortal/withNextPortal.js.map +1 -1
  132. package/build/withNextPortal/withNextPortal.mjs +2 -5
  133. package/build/withNextPortal/withNextPortal.mjs.map +1 -1
  134. package/package.json +5 -5
  135. package/src/alert/Alert.story.tsx +36 -0
  136. package/src/alert/Alert.tests.story.tsx +1 -1
  137. package/src/alert/Alert.tsx +37 -8
  138. package/src/avatarLayout/AvatarLayout.css +11 -0
  139. package/src/avatarLayout/AvatarLayout.less +18 -1
  140. package/src/avatarLayout/AvatarLayout.tsx +10 -2
  141. package/src/button/Button.accessibility.docs.mdx +103 -0
  142. package/src/button/Button.css +220 -15
  143. package/src/button/Button.less +228 -13
  144. package/src/button/Button.resolver.tsx +73 -0
  145. package/src/button/Button.spec.tsx +215 -226
  146. package/src/button/Button.story.tsx +761 -134
  147. package/src/button/Button.tests.story.tsx +27 -0
  148. package/src/button/Button.tsx +99 -132
  149. package/src/button/Button.types.ts +92 -0
  150. package/src/button/Button.vars.css +46 -0
  151. package/src/button/Button.vars.less +57 -0
  152. package/src/button/LegacyButton.css +23 -0
  153. package/src/button/LegacyButton.less +24 -0
  154. package/src/button/LegacyButton.spec.tsx +147 -0
  155. package/src/button/LegacyButton.story.tsx +228 -0
  156. package/src/button/LegacyButton.tsx +177 -0
  157. package/src/button/index.ts +2 -3
  158. package/src/common/action/Action.tsx +39 -21
  159. package/src/common/bottomSheet/BottomSheet.spec.tsx +3 -6
  160. package/src/common/bottomSheet/__snapshots__/BottomSheet.spec.tsx.snap +1 -5
  161. package/src/common/propsValues/sentiment.ts +1 -0
  162. package/src/criticalBanner/CriticalCommsBanner.css +7 -72
  163. package/src/criticalBanner/CriticalCommsBanner.less +12 -73
  164. package/src/criticalBanner/CriticalCommsBanner.story.tsx +13 -9
  165. package/src/criticalBanner/CriticalCommsBanner.tsx +8 -50
  166. package/src/dimmer/Dimmer.tsx +72 -44
  167. package/src/field/Field.story.tsx +1 -1
  168. package/src/flowNavigation/__snapshots__/FlowNavigation.spec.js.snap +1 -2
  169. package/src/i18n/en.json +1 -0
  170. package/src/inputs/SelectInput.story.tsx +1 -1
  171. package/src/inputs/_BottomSheet.tsx +9 -3
  172. package/src/inputs/_Popover.tsx +10 -4
  173. package/src/label/Label.story.tsx +1 -1
  174. package/src/link/Link.tsx +15 -6
  175. package/src/main.css +250 -72
  176. package/src/main.less +1 -0
  177. package/src/primitives/PrimitiveAnchor/src/PrimitiveAnchor.tsx +2 -8
  178. package/src/primitives/PrimitiveAnchor/src/PrimitiveAnchor.types.ts +7 -2
  179. package/src/primitives/PrimitiveAnchor/test/PrimitiveAnchor.spec.tsx +1 -3
  180. package/src/primitives/PrimitiveButton/src/PrimitiveButton.tsx +4 -12
  181. package/src/primitives/PrimitiveButton/test/PrimitiveButton.spec.tsx +16 -13
  182. package/src/statusIcon/StatusIcon.css +4 -0
  183. package/src/statusIcon/StatusIcon.less +4 -0
  184. package/src/statusIcon/StatusIcon.messages.ts +6 -0
  185. package/src/statusIcon/StatusIcon.tsx +8 -1
  186. package/src/test-utils/Parameters.d.ts +9 -1
  187. package/src/test-utils/story-config.ts +10 -1
  188. package/src/withNextPortal/withNextPortal.tsx +1 -10
  189. package/src/button/__snapshots__/Button.spec.tsx.snap +0 -309
@@ -1,78 +1,13 @@
1
- div.critical-comms {
2
- --critical-comms-background-color: var(--color-background-negative);
3
- --critical-comms-title-color: var(--color-content-negative);
4
- --critical-comms-subtitle-color: var(--color-content-secondary);
5
- --critical-comms-subtitle-color-padding-left: var(--size-16);
6
- --critical-comms-vertical-spacing: var(--size-8);
7
- background-color: rgba(255,135,135,0.10196);
8
- background-color: var(--critical-comms-background-color);
9
- display: flex;
10
- justify-content: center;
11
- align-items: center;
12
- }
13
- .np-theme-personal div.critical-comms,
14
- .np-theme-personal--dark div.critical-comms {
15
- --critical-comms-background-color: var(--color-sentiment-negative);
16
- --critical-comms-title-color: var(--color-contrast);
17
- --critical-comms-subtitle-color: var(--color-contrast);
18
- --critical-comms-subtitle-color-padding-left: 0;
19
- --critical-comms-vertical-spacing: var(--size-16);
20
- padding: 24px;
21
- padding: var(--padding-medium);
22
- }
23
- .np-theme-personal div.critical-comms .tw-icon-alert-circle-fill,
24
- .np-theme-personal--dark div.critical-comms .tw-icon-alert-circle-fill {
25
- color: var(--color-contrast);
26
- }
27
- .np-theme-personal div.critical-comms .tw-icon-alert-circle-fill svg,
28
- .np-theme-personal--dark div.critical-comms .tw-icon-alert-circle-fill svg {
29
- width: 48px;
30
- height: 48px;
31
- }
32
- .np-theme-personal div.critical-comms .cta-btn,
33
- .np-theme-personal--dark div.critical-comms .cta-btn {
34
- background-color: var(--color-contrast);
35
- }
36
- .np-theme-personal div.critical-comms .cta-btn:not(.disabled):not(:disabled):focus,
37
- .np-theme-personal--dark div.critical-comms .cta-btn:not(.disabled):not(:disabled):focus {
38
- outline-color: var(--color-contrast);
39
- }
40
- @media (max-width: 767px) {
41
- div.critical-comms {
42
- display: inline;
43
- display: initial;
44
- }
45
- }
46
- div.critical-comms .critical-comms--title {
47
- color: var(--critical-comms-title-color);
48
- }
49
- div.critical-comms .critical-comms--subtitle {
50
- color: var(--critical-comms-subtitle-color);
51
- }
52
- div.critical-comms .critical-comms--cta {
53
- padding-left: 0;
1
+ .np-theme-personal .critical-comms .alert-critical {
2
+ color: var(--color-contrast-overlay);
3
+ background-color: var(--color-sentiment-negative) !important;
54
4
  }
55
- @media (max-width: 767px) {
56
- div.critical-comms .critical-comms--cta {
57
- padding-left: var(--critical-comms-subtitle-color-padding-left);
58
- padding-top: var(--critical-comms-vertical-spacing);
59
- min-width: 100%;
60
- }
5
+ .np-theme-personal .critical-comms .alert-critical .np-text-title-body {
6
+ color: var(--color-contrast-overlay);
61
7
  }
62
- div.critical-comms .critical-comms-body {
8
+ .np-theme-personal .critical-comms .action__desktop {
63
9
  display: flex;
64
- width: 100%;
65
- }
66
- @media (max-width: 767px) {
67
- div.critical-comms .critical-comms-body {
68
- flex-direction: column;
69
- }
70
- }
71
- @media (max-width: 767px) {
72
- div.critical-comms .critical-comms-content {
73
- padding-top: var(--critical-comms-vertical-spacing);
74
- flex-wrap: wrap;
75
- }
10
+ align-items: center;
76
11
  }
77
12
  .tw-date-lookup-calendar > tbody > tr > td.weekend button {
78
13
  font-size: 0.875rem;
@@ -518,10 +453,18 @@ div.critical-comms .critical-comms-body {
518
453
  -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
454
  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
455
  }
456
+ [dir="rtl"] .np-avatar-layout-diagonal-mask {
457
+ -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);
458
+ 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);
459
+ }
521
460
  .np-avatar-layout-diagonal-child {
522
461
  margin-left: calc(var(--np-avatar-layout-size) - var(--np-avatar-size) * 2);
523
462
  margin-top: calc(var(--np-avatar-layout-size) - var(--np-avatar-size));
524
463
  }
464
+ [dir="rtl"] .np-avatar-layout-diagonal-child {
465
+ margin-left: 0;
466
+ margin-right: calc(var(--np-avatar-layout-size) - var(--np-avatar-size) * 2);
467
+ }
525
468
  .np-avatar-layout-horizontal {
526
469
  width: calc(var(--np-avatar-size) * var(--np-avatar-avatars-count) - (var(--np-avatar-offset) * (var(--np-avatar-avatars-count) - 1)));
527
470
  width: calc(var(--np-avatar-size) * var(--np-avatar-avatars-count) - calc(var(--np-avatar-offset) * calc(var(--np-avatar-avatars-count) - 1)));
@@ -536,6 +479,9 @@ div.critical-comms .critical-comms-body {
536
479
  .np-avatar-layout-horizontal-child {
537
480
  margin-left: calc(var(--np-avatar-offset) * -1);
538
481
  }
482
+ [dir="rtl"] .np-avatar-layout-horizontal-child {
483
+ margin-right: calc(var(--np-avatar-offset) * -1);
484
+ }
539
485
  .np-icon-button {
540
486
  border: none;
541
487
  }
@@ -706,6 +652,234 @@ div.critical-comms .critical-comms-body {
706
652
  .np-btn.disabled[class] {
707
653
  pointer-events: auto;
708
654
  }
655
+ .wds-Button {
656
+ --Button-background: var(--color-interactive-accent);
657
+ --Button-background-hover: var(--color-interactive-accent-hover);
658
+ --Button-background-active: var(--color-interactive-accent-active);
659
+ --Button-color: var(--color-interactive-control);
660
+ --Button-border-radius: var(--radius-full);
661
+ --Button-label-gap: var(--size-4);
662
+ --Button-large-padding: var(--size-12) var(--size-16);
663
+ --Button-medium-padding: var(--size-8) var(--size-12);
664
+ --Button-small-padding: var(--size-5) var(--size-12);
665
+ --Button-avatar-border-color: var(--color-border-neutral);
666
+ --Button-transition-duration: 150ms;
667
+ --Button-transition-easing: ease-in-out;
668
+ --Button-secondary-background: var(--color-interactive-neutral);
669
+ --Button-secondary-background-hover: var(--color-interactive-neutral-hover);
670
+ --Button-secondary-background-active: var(--color-interactive-neutral-active);
671
+ --Button-secondary-color: var(--color-interactive-primary);
672
+ --Button-tertiary-background: var(--color-background-neutral);
673
+ --Button-tertiary-background-hover: var(--color-background-neutral-hover);
674
+ --Button-tertiary-background-active: var(--color-background-neutral-active);
675
+ --Button-tertiary-color: var(--color-content-primary);
676
+ --Button-minimal-background: transparent;
677
+ --Button-minimal-background-hover: var(--color-background-screen-hover);
678
+ --Button-minimal-background-active: var(--color-background-screen-active);
679
+ --Button-minimal-color: var(--color-interactive-primary);
680
+ --Button-primary-negative-background: var(--color-sentiment-negative-primary);
681
+ --Button-primary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
682
+ --Button-primary-negative-background-active: var(--color-sentiment-negative-primary-active);
683
+ --Button-primary-negative-color: var(--color-contrast-overlay);
684
+ --Button-secondary-negative-background: var(--color-sentiment-negative-secondary);
685
+ --Button-secondary-negative-background-hover: var(--color-sentiment-negative-secondary-hover);
686
+ --Button-secondary-negative-background-active: var(--color-sentiment-negative-secondary-active);
687
+ --Button-secondary-negative-color: var(--color-sentiment-negative-primary);
688
+ }
689
+ .np-theme-personal--bright-green .wds-Button {
690
+ --Button-primary-negative-color: var(--color-white);
691
+ --Button-secondary-color: var(--color-interactive-control);
692
+ --Button-secondary-negative-color: var(--color-white);
693
+ }
694
+ .np-theme-personal--forest-green .wds-Button {
695
+ --Button-secondary-background: var(--color-interactive-neutral);
696
+ --Button-secondary-negative-background: var(--color-sentiment-negative-primary);
697
+ --Button-secondary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
698
+ --Button-secondary-negative-background-active: var(--color-sentiment-negative-primary-active);
699
+ --Button-secondary-negative-color: var(--color-contrast-overlay);
700
+ }
701
+ /* Button Styles */
702
+ .wds-Button {
703
+ display: inline-flex;
704
+ flex: none;
705
+ width: auto;
706
+ align-items: center;
707
+ justify-content: center;
708
+ vertical-align: middle;
709
+ text-align: center;
710
+ white-space: nowrap;
711
+ word-wrap: break-word;
712
+ -webkit-appearance: none;
713
+ -moz-appearance: none;
714
+ appearance: none;
715
+ background-color: var(--Button-background);
716
+ border: none;
717
+ border-radius: var(--Button-border-radius);
718
+ color: var(--Button-color);
719
+ cursor: pointer;
720
+ transition: color, background-color var(--Button-transition-duration) var(--Button-transition-easing);
721
+ }
722
+ .wds-Button,
723
+ .wds-Button:hover,
724
+ .wds-Button:active,
725
+ .wds-Button:focus {
726
+ -webkit-text-decoration: none;
727
+ text-decoration: none;
728
+ }
729
+ .wds-Button:hover {
730
+ background-color: var(--Button-background-hover);
731
+ }
732
+ .wds-Button:active {
733
+ background-color: var(--Button-background-active);
734
+ }
735
+ .wds-Button.wds-Button--disabled,
736
+ .wds-Button:disabled {
737
+ filter: none;
738
+ mix-blend-mode: luminosity;
739
+ opacity: 0.45;
740
+ cursor: not-allowed;
741
+ }
742
+ .wds-Button.wds-Button--disabled,
743
+ .wds-Button:disabled,
744
+ .wds-Button.wds-Button--disabled:hover,
745
+ .wds-Button:disabled:hover,
746
+ .wds-Button.wds-Button--disabled:active,
747
+ .wds-Button:disabled:active {
748
+ background-color: var(--Button-background);
749
+ }
750
+ .wds-Button--secondary {
751
+ --Button-background: var(--Button-secondary-background);
752
+ --Button-background-hover: var(--Button-secondary-background-hover);
753
+ --Button-background-active: var(--Button-secondary-background-active);
754
+ --Button-color: var(--Button-secondary-color);
755
+ }
756
+ .wds-Button--tertiary {
757
+ --Button-background: var(--Button-tertiary-background);
758
+ --Button-background-hover: var(--Button-tertiary-background-hover);
759
+ --Button-background-active: var(--Button-tertiary-background-active);
760
+ --Button-color: var(--Button-tertiary-color);
761
+ }
762
+ .wds-Button--tertiary .wds-Button-icon--end {
763
+ color: var(--color-interactive-primary);
764
+ }
765
+ .wds-Button--minimal {
766
+ --Button-background: var(--Button-minimal-background);
767
+ --Button-background-hover: var(--Button-minimal-background-hover);
768
+ --Button-background-active: var(--Button-minimal-background-active);
769
+ --Button-color: var(--Button-minimal-color);
770
+ }
771
+ .wds-Button--minimal,
772
+ .wds-Button--minimal:hover,
773
+ .wds-Button--minimal:active,
774
+ .wds-Button--minimal:focus {
775
+ -webkit-text-decoration: underline;
776
+ text-decoration: underline;
777
+ text-underline-offset: 3px;
778
+ text-decoration-thickness: 1px;
779
+ }
780
+ .wds-Button--negative.wds-Button--primary {
781
+ --Button-background: var(--Button-primary-negative-background);
782
+ --Button-background-hover: var(--Button-primary-negative-background-hover);
783
+ --Button-background-active: var(--Button-primary-negative-background-active);
784
+ --Button-color: var(--Button-primary-negative-color);
785
+ }
786
+ .wds-Button--negative.wds-Button--secondary {
787
+ --Button-background: var(--Button-secondary-negative-background);
788
+ --Button-background-hover: var(--Button-secondary-negative-background-hover);
789
+ --Button-background-active: var(--Button-secondary-negative-background-active);
790
+ --Button-color: var(--Button-secondary-negative-color);
791
+ }
792
+ .wds-Button--large {
793
+ padding: var(--Button-large-padding);
794
+ }
795
+ .wds-Button--medium {
796
+ padding: var(--Button-medium-padding);
797
+ }
798
+ .wds-Button--medium:has(.wds-Button-avatars) {
799
+ padding-inline-start: 8px;
800
+ padding-inline-start: var(--size-8);
801
+ }
802
+ .wds-Button--medium:has(.wds-Button-icon--end) {
803
+ padding-inline-end: 8px;
804
+ padding-inline-end: var(--size-8);
805
+ }
806
+ .wds-Button--medium .wds-Button-icon--start {
807
+ margin-inline-end: var(--Button-label-gap);
808
+ }
809
+ .wds-Button--small {
810
+ padding: var(--Button-small-padding);
811
+ }
812
+ .wds-Button--small:has(.wds-Button-icon--start) {
813
+ padding-inline-start: 8px;
814
+ padding-inline-start: var(--size-8);
815
+ }
816
+ .wds-Button--small:has(.wds-Button-icon--end) {
817
+ padding-inline-end: 8px;
818
+ padding-inline-end: var(--size-8);
819
+ }
820
+ .wds-Button--block {
821
+ width: 100%;
822
+ }
823
+ .wds-Button-avatars {
824
+ display: inline-flex;
825
+ }
826
+ .wds-Button-avatars .np-avatar-view .np-avatar-view-content {
827
+ color: var(--Button-color);
828
+ }
829
+ .wds-Button-icon {
830
+ display: inline-block;
831
+ }
832
+ .wds-Button-content {
833
+ position: relative;
834
+ }
835
+ .wds-Button-content--loading .wds-Button-label,
836
+ .wds-Button-content--loading .wds-Button-media,
837
+ .wds-Button-content--loading .wds-Button-icon {
838
+ visibility: hidden;
839
+ opacity: 0;
840
+ }
841
+ .wds-Button-label {
842
+ display: flex;
843
+ justify-content: center;
844
+ align-items: center;
845
+ gap: var(--Button-label-gap);
846
+ position: relative;
847
+ }
848
+ .wds-Button-loader {
849
+ position: absolute;
850
+ width: 100%;
851
+ height: 100%;
852
+ }
853
+ .wds-Button-loader .process-circle {
854
+ stroke: var(--Button-color);
855
+ }
856
+ /* Avatar border transparency */
857
+ /* dark buttons get 20% transparency, light buttons get 12% */
858
+ .wds-Button-avatars .np-circle {
859
+ --circle-border-color: color-mix(in srgb, var(--Button-color) 20%, transparent);
860
+ }
861
+ .np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--secondary.wds-Button--negative .wds-Button-avatars .np-circle,
862
+ .np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--secondary .wds-Button-avatars .np-circle,
863
+ .np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--tertiary .wds-Button-avatars .np-circle,
864
+ .np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--minimal .wds-Button-avatars .np-circle {
865
+ --circle-border-color: color-mix(in srgb, var(--Button-color) 12%, transparent);
866
+ }
867
+ .np-theme-personal--dark .wds-Button--primary .wds-Button-avatars .np-circle,
868
+ .np-theme-personal--dark .wds-Button--primary.wds-Button--negative .wds-Button-avatars .np-circle,
869
+ .np-theme-personal--forest-green .wds-Button--primary .wds-Button-avatars .np-circle,
870
+ .np-theme-personal--forest-green .wds-Button--primary.wds-Button--negative .wds-Button-avatars .np-circle {
871
+ --circle-border-color: color-mix(in srgb, var(--Button-color) 12%, transparent);
872
+ }
873
+ .np-theme-personal--bright-green .wds-Button--tertiary .wds-Button-avatars .np-circle,
874
+ .np-theme-personal--bright-green .wds-Button--minimal .wds-Button-avatars .np-circle {
875
+ --circle-border-color: color-mix(in srgb, var(--Button-color) 12%, transparent);
876
+ }
877
+ .critical-comms .wds-Button {
878
+ --Button-background: var(--color-contrast-overlay);
879
+ }
880
+ [dir="rtl"] .wds-Button .tw-icon-chevron-right,[dir="rtl"] .wds-Button .tw-icon-arrow-right,[dir="rtl"] .wds-Button .tw-icon-chevron-left,[dir="rtl"] .wds-Button .tw-icon-arrow-left,[dir="rtl"] .wds-Button .tw-icon-arrow-diagonal-down,[dir="rtl"] .wds-Button .tw-icon-arrow-diagonal-up,[dir="rtl"] .wds-Button .tw-icon-list,[dir="rtl"] .wds-Button .tw-icon-activity {
881
+ scale: -1 1;
882
+ }
709
883
  .np-card {
710
884
  overflow: hidden;
711
885
  transition-property: transform, box-shadow;
@@ -4241,6 +4415,10 @@ html:not([dir="rtl"]) .np-navigation-option {
4241
4415
  .status-circle.error {
4242
4416
  background-color: var(--color-sentiment-negative);
4243
4417
  }
4418
+ .status-circle.critical {
4419
+ background-color: #ffffff;
4420
+ background-color: var(--color-background-screen);
4421
+ }
4244
4422
  .status-circle.neutral {
4245
4423
  background-color: #5d7079;
4246
4424
  background-color: var(--color-content-secondary);
@@ -17,6 +17,10 @@
17
17
  .status-circle.error {
18
18
  background-color: var(--color-sentiment-negative);
19
19
  }
20
+ .status-circle.critical {
21
+ background-color: #ffffff;
22
+ background-color: var(--color-background-screen);
23
+ }
20
24
  .status-circle.neutral {
21
25
  background-color: #5d7079;
22
26
  background-color: var(--color-content-secondary);
@@ -8,7 +8,7 @@ export type AlertAction = {
8
8
  };
9
9
  /** @deprecated Use `"top" | "bottom"` instead. */
10
10
  type AlertTypeDeprecated = `${Sentiment.SUCCESS | Sentiment.INFO | Sentiment.ERROR}`;
11
- type AlertTypeResolved = `${Sentiment.POSITIVE | Sentiment.NEUTRAL | Sentiment.WARNING | Sentiment.NEGATIVE}`;
11
+ type AlertTypeResolved = `${Sentiment.POSITIVE | Sentiment.NEUTRAL | Sentiment.WARNING | Sentiment.NEGATIVE | Sentiment.CRITICAL}`;
12
12
  export type AlertType = AlertTypeResolved | AlertTypeDeprecated;
13
13
  export declare enum AlertArrowPosition {
14
14
  TOP_LEFT = "up-left",
@@ -37,6 +37,7 @@ export interface AlertProps {
37
37
  onDismiss?: React.MouseEventHandler<HTMLButtonElement>;
38
38
  /** The type dictates which icon and colour will be used */
39
39
  type?: AlertType;
40
+ /** @deprecated They both look and behave the same. */
40
41
  variant?: `${Variant}`;
41
42
  /** @deprecated Use `InlineAlert` instead. */
42
43
  arrow?: `${AlertArrowPosition}`;
@@ -1 +1 @@
1
- {"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../src/alert/Alert.tsx"],"names":[],"mappings":"AAIA,OAAO,EAEL,SAAS,EACT,IAAI,EAEJ,OAAO,EAER,MAAM,WAAW,CAAC;AASnB,MAAM,MAAM,WAAW,GAAG;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,kDAAkD;AAClD,KAAK,mBAAmB,GAAG,GAAG,SAAS,CAAC,OAAO,GAAG,SAAS,CAAC,IAAI,GAAG,SAAS,CAAC,KAAK,EAAE,CAAC;AACrF,KAAK,iBAAiB,GAAG,GACrB,SAAS,CAAC,QAAQ,GAClB,SAAS,CAAC,OAAO,GACjB,SAAS,CAAC,OAAO,GACjB,SAAS,CAAC,QAAQ,EAAE,CAAC;AACzB,MAAM,MAAM,SAAS,GAAG,iBAAiB,GAAG,mBAAmB,CAAC;AAEhE,oBAAY,kBAAkB;IAC5B,QAAQ,YAAY;IACpB,GAAG,cAAc;IACjB,SAAS,aAAa;IACtB,WAAW,cAAc;IACzB,MAAM,gBAAgB;IACtB,YAAY,eAAe;CAC5B;AAED,MAAM,WAAW,UAAU;IACzB,yIAAyI;IACzI,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wGAAwG;IACxG,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;;SAGK;IACL,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kGAAkG;IAClG,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,4FAA4F;IAC5F,SAAS,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACvD,2DAA2D;IAC3D,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,GAAG,OAAO,EAAE,CAAC;IACvB,6CAA6C;IAC7C,KAAK,CAAC,EAAE,GAAG,kBAAkB,EAAE,CAAC;IAChC,oHAAoH;IACpH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,2CAA2C;IAC3C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,2FAA2F;IAC3F,IAAI,CAAC,EAAE,GAAG,IAAI,EAAE,CAAC;CAClB;AAeD,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAC5B,MAAM,EACN,SAAS,EACT,IAAI,EACJ,eAAe,EACf,SAAS,EACT,OAAO,EACP,KAAK,EACL,IAAgB,EAChB,OAAmB,EACnB,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,WAAW,GACZ,EAAE,UAAU,+BAkHZ"}
1
+ {"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../src/alert/Alert.tsx"],"names":[],"mappings":"AAIA,OAAO,EAEL,SAAS,EACT,IAAI,EAEJ,OAAO,EAER,MAAM,WAAW,CAAC;AASnB,MAAM,MAAM,WAAW,GAAG;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,kDAAkD;AAClD,KAAK,mBAAmB,GAAG,GAAG,SAAS,CAAC,OAAO,GAAG,SAAS,CAAC,IAAI,GAAG,SAAS,CAAC,KAAK,EAAE,CAAC;AACrF,KAAK,iBAAiB,GAAG,GACrB,SAAS,CAAC,QAAQ,GAClB,SAAS,CAAC,OAAO,GACjB,SAAS,CAAC,OAAO,GACjB,SAAS,CAAC,QAAQ,GAClB,SAAS,CAAC,QAAQ,EAAE,CAAC;AACzB,MAAM,MAAM,SAAS,GAAG,iBAAiB,GAAG,mBAAmB,CAAC;AAEhE,oBAAY,kBAAkB;IAC5B,QAAQ,YAAY;IACpB,GAAG,cAAc;IACjB,SAAS,aAAa;IACtB,WAAW,cAAc;IACzB,MAAM,gBAAgB;IACtB,YAAY,eAAe;CAC5B;AAED,MAAM,WAAW,UAAU;IACzB,yIAAyI;IACzI,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wGAAwG;IACxG,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;;SAGK;IACL,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kGAAkG;IAClG,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,4FAA4F;IAC5F,SAAS,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACvD,2DAA2D;IAC3D,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,sDAAsD;IACtD,OAAO,CAAC,EAAE,GAAG,OAAO,EAAE,CAAC;IACvB,6CAA6C;IAC7C,KAAK,CAAC,EAAE,GAAG,kBAAkB,EAAE,CAAC;IAChC,oHAAoH;IACpH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,2CAA2C;IAC3C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,2FAA2F;IAC3F,IAAI,CAAC,EAAE,GAAG,IAAI,EAAE,CAAC;CAClB;AAeD,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAC5B,MAAM,EACN,SAAS,EACT,IAAI,EACJ,eAAe,EACf,SAAS,EACT,OAAO,EACP,KAAK,EACL,IAAgB,EAChB,OAAmB,EACnB,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,WAAW,GACZ,EAAE,UAAU,+BA6IZ"}
@@ -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;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,sCAiDP"}
1
+ {"version":3,"file":"AvatarLayout.d.ts","sourceRoot":"","sources":["../../../src/avatarLayout/AvatarLayout.tsx"],"names":[],"mappings":"AACA,OAAmB,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAG5D,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,sCAwDP"}
@@ -1,25 +1,4 @@
1
- import { ControlTypeAccent, ControlTypeNegative, ControlTypePositive, PriorityPrimary, PrioritySecondary, PriorityTertiary, SizeExtraSmall, SizeSmall, SizeMedium, SizeLarge } from '../common';
2
- /** @deprecated */
3
- type DeprecatedTypes = 'primary' | 'pay' | 'secondary' | 'danger' | 'link';
4
- /** @deprecated */
5
- type DeprecatedSizes = SizeExtraSmall;
6
- type CommonProps = {
7
- block?: boolean;
8
- disabled?: boolean;
9
- loading?: boolean;
10
- type?: ControlTypeAccent | ControlTypeNegative | ControlTypePositive | DeprecatedTypes | null;
11
- priority?: PriorityPrimary | PrioritySecondary | PriorityTertiary | null;
12
- size?: SizeSmall | SizeMedium | SizeLarge | DeprecatedSizes;
13
- };
14
- type ButtonProps = CommonProps & Omit<React.ComponentPropsWithRef<'button'>, 'type'> & {
15
- as?: 'button';
16
- htmlType?: 'submit' | 'reset' | 'button';
17
- };
18
- type AnchorProps = CommonProps & Omit<React.ComponentPropsWithRef<'a'>, 'type'> & {
19
- as?: 'a';
20
- };
21
- export type Props = ButtonProps | AnchorProps;
22
- export type ButtonReferenceType = HTMLButtonElement | HTMLAnchorElement;
23
- declare const Button: import("react").ForwardRefExoticComponent<(Omit<ButtonProps, "ref"> | Omit<AnchorProps, "ref">) & import("react").RefAttributes<ButtonReferenceType>>;
1
+ import { ButtonReferenceType, ButtonProps as NewButtonProps } from './Button.types';
2
+ declare const Button: import("react").ForwardRefExoticComponent<NewButtonProps & import("react").RefAttributes<ButtonReferenceType>>;
24
3
  export default Button;
25
4
  //# sourceMappingURL=Button.d.ts.map
@@ -1 +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"}
1
+ {"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/button/Button.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,mBAAmB,EAAE,WAAW,IAAI,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAQpF,QAAA,MAAM,MAAM,gHA6GX,CAAC;AAEF,eAAe,MAAM,CAAC"}
@@ -0,0 +1,35 @@
1
+ import { LegacyButtonProps } from './LegacyButton';
2
+ import { ButtonReferenceType, ButtonProps as NewButtonProps } from './Button.types';
3
+ export type ButtonProps = LegacyButtonProps | NewButtonProps;
4
+ declare const Button: import("react").ForwardRefExoticComponent<(NewButtonProps | Omit<{
5
+ v2?: false;
6
+ block?: boolean;
7
+ target?: string;
8
+ disabled?: boolean;
9
+ loading?: boolean;
10
+ type?: import("../common").ControlTypeAccent | import("../common").ControlTypeNegative | import("../common").ControlTypePositive | ("link" | "primary" | "secondary" | "pay" | "danger") | null;
11
+ priority?: import("../common").PriorityPrimary | import("../common").PrioritySecondary | import("../common").PriorityTertiary | null;
12
+ size?: import("../common").SizeSmall | import("../common").SizeMedium | import("../common").SizeLarge | "xs";
13
+ htmlType?: "submit" | "reset" | "button";
14
+ } & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
15
+ ref?: ((instance: HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLButtonElement> | null | undefined;
16
+ }, "type"> & {
17
+ as?: "button";
18
+ }, "ref"> | Omit<{
19
+ v2?: false;
20
+ block?: boolean;
21
+ target?: string;
22
+ disabled?: boolean;
23
+ loading?: boolean;
24
+ type?: import("../common").ControlTypeAccent | import("../common").ControlTypeNegative | import("../common").ControlTypePositive | ("link" | "primary" | "secondary" | "pay" | "danger") | null;
25
+ priority?: import("../common").PriorityPrimary | import("../common").PrioritySecondary | import("../common").PriorityTertiary | null;
26
+ size?: import("../common").SizeSmall | import("../common").SizeMedium | import("../common").SizeLarge | "xs";
27
+ htmlType?: "submit" | "reset" | "button";
28
+ } & Omit<Omit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & {
29
+ ref?: ((instance: HTMLAnchorElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLAnchorElement> | null | undefined;
30
+ }, "type"> & {
31
+ as?: "a";
32
+ href?: string;
33
+ }, "ref">) & import("react").RefAttributes<ButtonReferenceType>>;
34
+ export default Button;
35
+ //# sourceMappingURL=Button.resolver.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Button.resolver.d.ts","sourceRoot":"","sources":["../../../src/button/Button.resolver.tsx"],"names":[],"mappings":"AACA,OAAqB,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACjE,OAAO,EAAE,mBAAmB,EAAE,WAAW,IAAI,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAGpF,MAAM,MAAM,WAAW,GAAG,iBAAiB,GAAG,cAAc,CAAC;AAwD7D,QAAA,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gEAOV,CAAC;AAIH,eAAe,MAAM,CAAC"}
@@ -0,0 +1,70 @@
1
+ import { AnchorHTMLAttributes, ButtonHTMLAttributes, ReactNode } from 'react';
2
+ import type { AvatarLayoutProps } from '../avatarLayout';
3
+ export type ButtonSentiment = 'default' | 'negative';
4
+ export type ButtonPriority = 'primary' | 'secondary' | 'tertiary' | 'minimal';
5
+ export type ButtonSize = 'sm' | 'md' | 'lg';
6
+ export type ButtonReferenceType = HTMLButtonElement | HTMLAnchorElement;
7
+ type ButtonAddonIcon = {
8
+ type: 'icon';
9
+ value: ReactNode;
10
+ };
11
+ type ButtonAddonAvatar = {
12
+ type: 'avatar';
13
+ value: AvatarLayoutProps['avatars'];
14
+ };
15
+ type ButtonAddonStart = ButtonAddonIcon | ButtonAddonAvatar;
16
+ type ButtonAddonEnd = ButtonAddonIcon;
17
+ /**
18
+ * Common properties for the Button component.
19
+ */
20
+ export interface CommonProps {
21
+ /**
22
+ * If set, toggles the new Button API
23
+ * @default false
24
+ * */
25
+ v2: true;
26
+ /**
27
+ * The HTML element to render. Takes precedence over `href` prop.
28
+ * @default undefined
29
+ **/
30
+ as?: 'button' | 'a';
31
+ /** @default false **/
32
+ disabled?: boolean;
33
+ /** If set, the component will render as an HTML anchor. */
34
+ href?: string;
35
+ /**
36
+ * The `target` attribute for HTML anchor.
37
+ * If set to `_blank`, `rel="noopener noreferrer"` is automatically added to the rendered node.
38
+ */
39
+ target?: string;
40
+ /** @default false */
41
+ loading?: boolean;
42
+ /** Makes the button take up the full width of its container */
43
+ block?: boolean;
44
+ /**
45
+ * Sets the size of the button
46
+ * @default lg
47
+ * */
48
+ size?: ButtonSize;
49
+ /**
50
+ * Sets a visual hierarchy amongst the buttons displayed on the screen
51
+ * @default 'primary'
52
+ */
53
+ priority?: ButtonPriority;
54
+ /**
55
+ * Emphasises the nature of the button's action
56
+ * @default default
57
+ */
58
+ sentiment?: ButtonSentiment;
59
+ /** Accessory to be displayed before the label */
60
+ addonStart?: ButtonAddonStart;
61
+ /** Accessory to be displayed after the label */
62
+ addonEnd?: ButtonAddonEnd;
63
+ className?: string;
64
+ children?: ReactNode;
65
+ }
66
+ export type ButtonElementProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'disabled' | 'className'> & CommonProps;
67
+ export type AnchorElementProps = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'type' | 'disabled' | 'href' | 'className'> & CommonProps;
68
+ export type ButtonProps = ButtonElementProps | AnchorElementProps;
69
+ export {};
70
+ //# sourceMappingURL=Button.types.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Button.types.d.ts","sourceRoot":"","sources":["../../../src/button/Button.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC9E,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAEzD,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,UAAU,CAAC;AACrD,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,SAAS,CAAC;AAC9E,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC5C,MAAM,MAAM,mBAAmB,GAAG,iBAAiB,GAAG,iBAAiB,CAAC;AACxE,KAAK,eAAe,GAAG;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,SAAS,CAAC;CAClB,CAAC;AACF,KAAK,iBAAiB,GAAG;IACvB,IAAI,EAAE,QAAQ,CAAC;IACf,KAAK,EAAE,iBAAiB,CAAC,SAAS,CAAC,CAAC;CACrC,CAAC;AACF,KAAK,gBAAgB,GAAG,eAAe,GAAG,iBAAiB,CAAC;AAC5D,KAAK,cAAc,GAAG,eAAe,CAAC;AAEtC;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B;;;SAGK;IACL,EAAE,EAAE,IAAI,CAAC;IAET;;;QAGI;IACJ,EAAE,CAAC,EAAE,QAAQ,GAAG,GAAG,CAAC;IAEpB,sBAAsB;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,2DAA2D;IAC3D,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,qBAAqB;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,+DAA+D;IAC/D,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB;;;SAGK;IACL,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB;;;OAGG;IACH,QAAQ,CAAC,EAAE,cAAc,CAAC;IAE1B;;;OAGG;IACH,SAAS,CAAC,EAAE,eAAe,CAAC;IAE5B,iDAAiD;IACjD,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAE9B,gDAAgD;IAChD,QAAQ,CAAC,EAAE,cAAc,CAAC;IAE1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,MAAM,MAAM,kBAAkB,GAAG,IAAI,CACnC,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,UAAU,GAAG,WAAW,CACzB,GACC,WAAW,CAAC;AACd,MAAM,MAAM,kBAAkB,GAAG,IAAI,CACnC,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,MAAM,GAAG,UAAU,GAAG,MAAM,GAAG,WAAW,CAC3C,GACC,WAAW,CAAC;AAEd,MAAM,MAAM,WAAW,GAAG,kBAAkB,GAAG,kBAAkB,CAAC"}
@@ -0,0 +1,44 @@
1
+ import { ControlTypeAccent, ControlTypeNegative, ControlTypePositive, PriorityPrimary, PrioritySecondary, PriorityTertiary, SizeExtraSmall, SizeSmall, SizeMedium, SizeLarge } from '../common';
2
+ import { ButtonReferenceType } from './Button.types';
3
+ /** @deprecated */
4
+ type DeprecatedTypes = 'primary' | 'pay' | 'secondary' | 'danger' | 'link';
5
+ /** @deprecated */
6
+ type DeprecatedSizes = SizeExtraSmall;
7
+ type CommonProps = {
8
+ v2?: false;
9
+ /** Makes the button take up the full width of its container */
10
+ block?: boolean;
11
+ /**
12
+ * The `target` attribute for HTML anchor.
13
+ * If set to `_blank`, `rel="noopener noreferrer"` is automatically added to the rendered node.
14
+ */
15
+ target?: string;
16
+ /**
17
+ * Toggles the disabled state
18
+ * @default false
19
+ */
20
+ disabled?: boolean;
21
+ /**
22
+ * Toggles the loading state
23
+ * @default false
24
+ */
25
+ loading?: boolean;
26
+ type?: ControlTypeAccent | ControlTypeNegative | ControlTypePositive | DeprecatedTypes | null;
27
+ priority?: PriorityPrimary | PrioritySecondary | PriorityTertiary | null;
28
+ size?: SizeSmall | SizeMedium | SizeLarge | DeprecatedSizes;
29
+ htmlType?: 'submit' | 'reset' | 'button';
30
+ };
31
+ type ButtonProps = CommonProps & Omit<React.ComponentPropsWithRef<'button'>, 'type'> & {
32
+ as?: 'button';
33
+ };
34
+ type AnchorProps = CommonProps & Omit<React.ComponentPropsWithRef<'a'>, 'type'> & {
35
+ as?: 'a';
36
+ href?: string;
37
+ };
38
+ export type LegacyButtonProps = ButtonProps | AnchorProps;
39
+ /**
40
+ * @deprecated make sure you use new Button component via `<Button v2 .. />` and new props
41
+ */
42
+ declare const LegacyButton: import("react").ForwardRefExoticComponent<(Omit<ButtonProps, "ref"> | Omit<AnchorProps, "ref">) & import("react").RefAttributes<ButtonReferenceType>>;
43
+ export default LegacyButton;
44
+ //# sourceMappingURL=LegacyButton.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"LegacyButton.d.ts","sourceRoot":"","sources":["../../../src/button/LegacyButton.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;AAMnB,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAErD,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,EAAE,CAAC,EAAE,KAAK,CAAC;IAEX,+DAA+D;IAC/D,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IAEH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,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;IAC5D,QAAQ,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC;CAC1C,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;CACf,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;IACT,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEJ,MAAM,MAAM,iBAAiB,GAAG,WAAW,GAAG,WAAW,CAAC;AAE1D;;GAEG;AACH,QAAA,MAAM,YAAY,uJAkGjB,CAAC;AAEF,eAAe,YAAY,CAAC"}
@@ -1,3 +1,3 @@
1
- export { default } from './Button';
2
- export type { Props as ButtonProps } from './Button';
1
+ export { default } from './Button.resolver';
2
+ export type { ButtonProps } from './Button.resolver';
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,UAAU,CAAC;AAEnC,YAAY,EAAE,KAAK,IAAI,WAAW,EAAE,MAAM,UAAU,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,YAAY,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC"}
@@ -1,3 +1,4 @@
1
+ import { ButtonPriority, ButtonSentiment } from '../../button/Button.types';
1
2
  export type ActionOptions = {
2
3
  'aria-label'?: string;
3
4
  href?: string;
@@ -7,9 +8,11 @@ export type ActionOptions = {
7
8
  };
8
9
  type Props = {
9
10
  variant?: 'button' | 'action-button';
11
+ sentiment?: ButtonSentiment;
10
12
  action: ActionOptions;
11
13
  className?: string;
14
+ priority?: ButtonPriority;
12
15
  };
13
- export declare function Action({ action, className, variant }: Props): import("react").JSX.Element;
16
+ export declare function Action({ action, className, variant, priority, sentiment, }: Props): import("react").JSX.Element;
14
17
  export {};
15
18
  //# sourceMappingURL=Action.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"Action.d.ts","sourceRoot":"","sources":["../../../../src/common/action/Action.tsx"],"names":[],"mappings":"AAMA,MAAM,MAAM,aAAa,GAAG;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,KAAK,KAAK,GAAG;IACX,OAAO,CAAC,EAAE,QAAQ,GAAG,eAAe,CAAC;IACrC,MAAM,EAAE,aAAa,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,wBAAgB,MAAM,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,OAAkB,EAAE,EAAE,KAAK,+BAmCtE"}
1
+ {"version":3,"file":"Action.d.ts","sourceRoot":"","sources":["../../../../src/common/action/Action.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAE5E,MAAM,MAAM,aAAa,GAAG;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,KAAK,KAAK,GAAG;IACX,OAAO,CAAC,EAAE,QAAQ,GAAG,eAAe,CAAC;IACrC,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,MAAM,EAAE,aAAa,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,cAAc,CAAC;CAC3B,CAAC;AAEF,wBAAgB,MAAM,CAAC,EACrB,MAAM,EACN,SAAS,EACT,OAAkB,EAClB,QAA6B,EAC7B,SAAqB,GACtB,EAAE,KAAK,+BA4CP"}
@@ -4,6 +4,7 @@ export declare enum Sentiment {
4
4
  POSITIVE = "positive",
5
5
  WARNING = "warning",
6
6
  PENDING = "pending",
7
+ CRITICAL = "critical",
7
8
  /**
8
9
  * @deprecated
9
10
  */