@transferwise/components 37.0.1-beta.11 → 37.0.1-beta.25

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 (120) hide show
  1. package/CHANGELOG.md +175 -0
  2. package/build/es/no-polyfill/dateInput/DateInput.js +3 -3
  3. package/build/es/no-polyfill/dateInput/DateInput.messages.js +1 -0
  4. package/build/es/no-polyfill/dimmer/Dimmer.js +2 -2
  5. package/build/es/no-polyfill/drawer/Drawer.js +1 -1
  6. package/build/es/no-polyfill/i18n/en.json +3 -2
  7. package/build/es/no-polyfill/link/Link.js +3 -9
  8. package/build/es/no-polyfill/link/Link.spec.js +1 -0
  9. package/build/es/no-polyfill/link/Link.story.js +1 -0
  10. package/build/es/no-polyfill/modal/Modal.js +1 -1
  11. package/build/es/no-polyfill/nudge/Nudge.js +1 -1
  12. package/build/es/no-polyfill/stepper/deviceDetection.js +2 -1
  13. package/build/es/no-polyfill/switch/Switch.js +1 -1
  14. package/build/es/no-polyfill/switch/Switch.story.js +1 -1
  15. package/build/es/no-polyfill/tabs/Tabs.js +1 -1
  16. package/build/es/no-polyfill/upload/Upload.js +1 -1
  17. package/build/es/no-polyfill/upload/steps/completeStep/completeStep.js +1 -1
  18. package/build/es/no-polyfill/upload/steps/processingStep/processingStep.js +1 -1
  19. package/build/es/no-polyfill/upload/utils/index.js +1 -1
  20. package/build/es/no-polyfill/withNextPortal/withNextPortal.js +1 -1
  21. package/build/es/polyfill/dateInput/DateInput.js +3 -3
  22. package/build/es/polyfill/dateInput/DateInput.messages.js +1 -0
  23. package/build/es/polyfill/dimmer/Dimmer.js +2 -2
  24. package/build/es/polyfill/drawer/Drawer.js +1 -1
  25. package/build/es/polyfill/i18n/en.json +3 -2
  26. package/build/es/polyfill/link/Link.js +3 -9
  27. package/build/es/polyfill/link/Link.spec.js +1 -0
  28. package/build/es/polyfill/link/Link.story.js +1 -0
  29. package/build/es/polyfill/modal/Modal.js +1 -1
  30. package/build/es/polyfill/nudge/Nudge.js +1 -1
  31. package/build/es/polyfill/stepper/deviceDetection.js +2 -1
  32. package/build/es/polyfill/switch/Switch.js +1 -1
  33. package/build/es/polyfill/switch/Switch.story.js +1 -1
  34. package/build/es/polyfill/tabs/Tabs.js +1 -1
  35. package/build/es/polyfill/upload/Upload.js +1 -1
  36. package/build/es/polyfill/upload/steps/completeStep/completeStep.js +1 -1
  37. package/build/es/polyfill/upload/steps/processingStep/processingStep.js +1 -1
  38. package/build/es/polyfill/upload/utils/index.js +1 -1
  39. package/build/es/polyfill/withNextPortal/withNextPortal.js +1 -1
  40. package/build/i18n/en.json +3 -2
  41. package/build/main.css +1 -2929
  42. package/build/styles/accordion/Accordion.css +1 -40
  43. package/build/styles/actionOption/ActionOption.css +1 -3
  44. package/build/styles/avatar/Avatar.css +1 -166
  45. package/build/styles/badge/Badge.css +1 -59
  46. package/build/styles/button/Button.css +1 -14
  47. package/build/styles/card/Card.css +1 -33
  48. package/build/styles/checkboxButton/CheckboxButton.css +1 -19
  49. package/build/styles/chip/Chip.css +1 -23
  50. package/build/styles/circularButton/CircularButton.css +1 -124
  51. package/build/styles/common/Option/Option.css +1 -11
  52. package/build/styles/common/RadioButton/RadioButton.css +1 -8
  53. package/build/styles/common/bottomSheet/BottomSheet.css +1 -31
  54. package/build/styles/common/closeButton/CloseButton.css +1 -18
  55. package/build/styles/common/panel/Panel.css +1 -52
  56. package/build/styles/dateInput/DateInput.css +1 -3
  57. package/build/styles/dateLookup/DateLookup.css +1 -36
  58. package/build/styles/dateLookup/dateTrigger/DateTrigger.css +1 -23
  59. package/build/styles/decision/Decision.css +1 -33
  60. package/build/styles/definitionList/DefinitionList.css +1 -26
  61. package/build/styles/dimmer/Dimmer.css +1 -43
  62. package/build/styles/drawer/Drawer.css +1 -65
  63. package/build/styles/dynamicFieldDefinitionList/FormattedValue/FormattedValue.css +1 -5
  64. package/build/styles/emphasis/Emphasis.css +1 -21
  65. package/build/styles/flowNavigation/FlowNavigation.css +1 -75
  66. package/build/styles/flowNavigation/animatedLabel/AnimatedLabel.css +1 -27
  67. package/build/styles/flowNavigation/backButton/BackButton.css +1 -9
  68. package/build/styles/image/Image.css +1 -13
  69. package/build/styles/info/Info.css +1 -29
  70. package/build/styles/instructionsList/InstructionsList.css +1 -19
  71. package/build/styles/lab/mobileNav/MobileNav.css +1 -164
  72. package/build/styles/lab/pagination/Pagination.css +1 -51
  73. package/build/styles/link/Link.css +1 -4
  74. package/build/styles/loader/Loader.css +1 -580
  75. package/build/styles/logo/Logo.css +1 -4
  76. package/build/styles/main.css +1 -2929
  77. package/build/styles/modal/Modal.css +1 -159
  78. package/build/styles/moneyInput/MoneyInput.css +1 -50
  79. package/build/styles/navigationOption/NavigationOption.css +1 -23
  80. package/build/styles/navigationOptionsList/NavigationOptionsList.css +1 -8
  81. package/build/styles/nudge/Nudge.css +1 -16
  82. package/build/styles/overlayHeader/OverlayHeader.css +1 -12
  83. package/build/styles/phoneNumberInput/PhoneNumberInput.css +1 -23
  84. package/build/styles/popover/Popover.css +1 -62
  85. package/build/styles/slidingPanel/SlidingPanel.css +1 -58
  86. package/build/styles/snackbar/Snackbar.css +1 -75
  87. package/build/styles/stepper/Stepper.css +1 -93
  88. package/build/styles/summary/Summary.css +1 -46
  89. package/build/styles/switch/Switch.css +1 -45
  90. package/build/styles/tabs/Tabs.css +1 -80
  91. package/build/styles/tile/Tile.css +1 -53
  92. package/build/styles/tooltip/Tooltip.css +1 -28
  93. package/build/styles/typeahead/Typeahead.css +1 -142
  94. package/build/styles/typeahead/typeaheadOption/TypeaheadOption.css +1 -11
  95. package/build/styles/upload/Upload.css +1 -15
  96. package/build/styles/uploadInput/UploadInput.css +1 -6
  97. package/build/styles/uploadInput/uploadButton/UploadButton.css +1 -45
  98. package/build/styles/uploadInput/uploadItem/UploadItem.css +1 -48
  99. package/build/types/{link/Link.messages.d.ts → dateInput/DateInput.messages.d.ts} +8 -5
  100. package/build/types/link/Link.d.ts +1 -7
  101. package/build/types/link/Link.spec.d.ts +1 -0
  102. package/build/types/link/Link.story.d.ts +9 -0
  103. package/build/types/modal/Modal.d.ts +0 -1
  104. package/build/types/nudge/Nudge.d.ts +1 -0
  105. package/build/types/switch/Switch.story.d.ts +1 -0
  106. package/build/types/test-utils/index.d.ts +6 -4
  107. package/build/types/upload/Upload.d.ts +1 -1
  108. package/build/types/upload/utils/index.d.ts +0 -1
  109. package/build/types/withNextPortal/withNextPortal.d.ts +1 -2
  110. package/build/umd/no-polyfill/main.js +1 -1
  111. package/build/umd/polyfill/main.js +1 -1
  112. package/package.json +5 -5
  113. package/build/es/no-polyfill/link/Link.messages.js +0 -1
  114. package/build/es/no-polyfill/upload/utils/generateErrorMessage/generateErrorMessage.js +0 -1
  115. package/build/es/no-polyfill/upload/utils/generateErrorMessage/index.js +0 -1
  116. package/build/es/polyfill/link/Link.messages.js +0 -1
  117. package/build/es/polyfill/upload/utils/generateErrorMessage/generateErrorMessage.js +0 -1
  118. package/build/es/polyfill/upload/utils/generateErrorMessage/index.js +0 -1
  119. package/build/types/upload/utils/generateErrorMessage/generateErrorMessage.d.ts +0 -1
  120. package/build/types/upload/utils/generateErrorMessage/index.d.ts +0 -1
@@ -1,45 +1 @@
1
- .np-switch {
2
- display: inline-flex;
3
- overflow: hidden;
4
- width: 50px;
5
- padding: 2px;
6
- border: 1px solid #d3d5d8;
7
- border-radius: 16px;
8
- }
9
- .np-switch--thumb {
10
- display: flex;
11
- transition: transform cubic-bezier(0, 0.94, 0.62, 1) 350ms;
12
- }
13
- .np-switch--thumb .tw-icon {
14
- color: #ffffff;
15
- color: var(--color-background-screen, #ffffff);
16
- }
17
- .np-switch--unchecked {
18
- background: #d3d5d8;
19
- }
20
- .np-switch--unchecked .switch--thumb {
21
- transform: translateX(0);
22
- }
23
- .np-switch--checked {
24
- border: 1px solid #00a2dd;
25
- border: 1px solid var(--color-interactive-accent, #00a2dd);
26
- background: #00a2dd;
27
- background: var(--color-interactive-accent, #00a2dd);
28
- }
29
- .np-switch--checked .np-switch--thumb {
30
- transform: translateX(20px);
31
- }
32
- .np-switch--rtl.np-switch--checked .np-switch--thumb {
33
- transform: translateX(-20px);
34
- }
35
- .np-switch input {
36
- position: absolute;
37
- left: -100%;
38
- display: none;
39
- width: 0;
40
- height: 0;
41
- opacity: 0;
42
- }
43
- .np-switch:not([aria-disabled]) {
44
- cursor: pointer;
45
- }
1
+ .np-switch{display:inline-flex;overflow:hidden;width:50px;padding:2px;border-radius:16px}.np-switch--thumb{display:flex;transition:transform .35s cubic-bezier(0,.94,.62,1)}.np-switch--thumb .tw-icon{color:#fff;color:var(--color-base-white-light,#fff)}.np-switch--unchecked{background:#c9cbce;background:var(--color-interactive-secondary,#c9cbce)}.np-switch--unchecked .switch--thumb{transform:translateX(0)}.np-switch--checked{background:#00a2dd;background:var(--color-interactive-accent,#00a2dd)}.np-switch--checked .np-switch--thumb{transform:translateX(20px)}.np-switch--rtl.np-switch--checked .np-switch--thumb{transform:translateX(-20px)}.np-switch--disabled{background:#a8aaac;background:var(--color-interactive-disabled,#a8aaac);cursor:not-allowed;border-color:#a8aaac;border-color:var(--color-interactive-disabled,#a8aaac)}.np-switch input{position:absolute;left:-100%;display:none;width:0;height:0;opacity:0}.np-switch:not([aria-disabled]){cursor:pointer}
@@ -1,80 +1 @@
1
- .tabs {
2
- position: relative;
3
- }
4
- .tabs__tab {
5
- display: inline-block;
6
- cursor: pointer;
7
- outline: none;
8
- text-align: center;
9
- padding: 8px;
10
- padding: var(--size-8, 8px);
11
- margin-bottom: -3px;
12
- color: #86a7bd1a;
13
- color: var(--color-background-neutral, #86a7bd1a);
14
- font-weight: 600;
15
- transition: color 0.15s ease-in-out;
16
- }
17
- .tabs__tab--selected {
18
- color: #0097c7;
19
- color: var(--color-content-accent, #0097c7);
20
- }
21
- .tabs__tab--disabled {
22
- color: #a8aaac !important;
23
- cursor: not-allowed;
24
- }
25
- .tabs__tab:focus {
26
- color: #0084b3;
27
- color: var(--color-content-accent-hover, #0084b3);
28
- }
29
- @media (min-width: 992px) {
30
- .tabs__tab:hover {
31
- color: #0084b3;
32
- color: var(--color-content-accent-hover, #0084b3);
33
- }
34
- }
35
- @media (hover: hover) {
36
- .tabs__tab:hover {
37
- color: #0084b3;
38
- color: var(--color-content-accent-hover, #0084b3);
39
- }
40
- }
41
- .tabs__tab-list {
42
- list-style: none;
43
- padding: 0;
44
- margin: 0;
45
- border-bottom: 1px solid #0000001a;
46
- border-bottom: 1px solid var(--color-border-neutral, #0000001a);
47
- }
48
- .tabs__line {
49
- height: 3px;
50
- background-color: #00a2dd;
51
- background-color: var(--color-interactive-accent, #00a2dd);
52
- transition: transform cubic-bezier(0, 0.94, 0.62, 1) 350ms;
53
- }
54
- .tabs__panel-container {
55
- width: 100%;
56
- }
57
- .tabs__slider {
58
- display: flex;
59
- }
60
- .tabs__panel--selected {
61
- padding: 8px;
62
- padding: var(--size-8, 8px);
63
- border: 1px solid #37517e;
64
- }
65
- .tabs__panel.enter {
66
- opacity: 0;
67
- }
68
- .tabs__panel.enter-active {
69
- opacity: 1;
70
- }
71
- .tabs__panel.exit {
72
- opacity: 0;
73
- }
74
- .tabs--inverse .tabs__tab-list {
75
- border-bottom-color: #0000001a;
76
- border-bottom-color: var(--color-border-neutral, #0000001a);
77
- }
78
- .tabs--inverse .tabs__tab:not(.tabs__tab--selected) {
79
- color: #fff;
80
- }
1
+ .tabs{position:relative}.tabs__tab{display:inline-block;cursor:pointer;outline:none;text-align:center;padding:8px;padding:var(--size-8,8px);margin-bottom:-3px;color:#37517e;color:var(--color-content-primary,#37517e);font-weight:600;transition:color .15s ease-in-out}.tabs__tab--selected{color:#0097c7;color:var(--color-content-accent,#0097c7)}.tabs__tab--disabled{color:#a8aaac;color:var(--color-content-disabled,#a8aaac);cursor:not-allowed}.tabs__tab:focus{color:#0084b3;color:var(--color-content-accent-hover,#0084b3)}@media (min-width:992px){.tabs__tab:hover{color:#0084b3;color:var(--color-content-accent-hover,#0084b3)}}@media (hover:hover){.tabs__tab:hover{color:#0084b3;color:var(--color-content-accent-hover,#0084b3)}}.tabs__tab-list{list-style:none;padding:0;margin:0;border-bottom:1px solid rgba(0,0,0,.10196078431372549);border-bottom:1px solid var(--color-border-neutral,rgba(0,0,0,.10196078431372549))}.tabs__line{height:3px;background-color:#00a2dd;background-color:var(--color-interactive-accent,#00a2dd);transition:transform .35s cubic-bezier(0,.94,.62,1)}.tabs__panel-container{width:100%}.tabs__slider{display:flex}.tabs__panel--selected{padding:8px;padding:var(--size-8,8px);border:1px solid #37517e}.tabs__panel.enter{opacity:0}.tabs__panel.enter-active{opacity:1}.tabs__panel.exit{opacity:0}.tabs--inverse .tabs__tab-list{border-bottom-color:rgba(0,0,0,.10196078431372549);border-bottom-color:var(--color-border-neutral,rgba(0,0,0,.10196078431372549))}.tabs--inverse .tabs__tab:not(.tabs__tab--selected){color:#fff}.tabs.tabs--auto-width .tabs__tab{display:inline-flex;height:40px;height:var(--size-40,40px);padding:0 24px;padding:0 var(--size-24,24px);justify-content:center;align-items:center}
@@ -1,53 +1 @@
1
- .np-tile {
2
- min-width: 120px;
3
- border-radius: 3px;
4
- border-radius: var(--radius-small, 3px);
5
- width: 100%;
6
- }
7
- .np-tile.decision {
8
- margin-top: 0;
9
- border: 1px solid #0000001a;
10
- border: 1px solid var(--color-border-neutral, #0000001a);
11
- }
12
- .np-tile.np-decision__tile--fixed-width {
13
- width: 300px;
14
- }
15
- .np-tile__media {
16
- width: 100%;
17
- }
18
- .np-tile__title {
19
- margin-top: 16px;
20
- margin-top: var(--size-16, 16px);
21
- font-size: 1.333333rem;
22
- line-height: calc(24 / 20);
23
- color: #37517e;
24
- color: var(--color-content-primary, #37517e);
25
- }
26
- .np-tile__description {
27
- margin-top: 12px;
28
- margin-top: var(--size-12, 12px);
29
- line-height: calc(22 / 16);
30
- color: #5d7079;
31
- color: var(--color-content-secondary, #5d7079);
32
- font-weight: 500;
33
- }
34
- .np-tile--small.np-decision__tile--fixed-width {
35
- width: 260px;
36
- }
37
- .np-tile--small .np-tile__title {
38
- margin-top: 12px;
39
- margin-top: var(--size-12, 12px);
40
- font-size: 1rem;
41
- line-height: calc(22 / 16);
42
- }
43
- .np-tile--small .np-tile__description {
44
- margin-top: 4px;
45
- margin-top: var(--size-4, 4px);
46
- }
47
- .np-tile:hover .tw-avatar {
48
- pointer-events: none;
49
- }
50
- .np-tile:hover .tw-avatar .tw-avatar__content {
51
- background-color: #ffffff;
52
- background-color: var(--color-background-screen, #ffffff);
53
- }
1
+ .np-tile{min-width:120px;border-radius:3px;border-radius:var(--radius-small,3px);width:100%}.np-tile.decision{margin-top:0;border:1px solid rgba(0,0,0,.10196078431372549);border:1px solid var(--color-border-neutral,rgba(0,0,0,.10196078431372549))}.np-tile.np-decision__tile--fixed-width{width:300px}.np-tile__media{width:100%}.np-tile__title{margin-top:16px;margin-top:var(--size-16,16px);font-size:1.333333rem;line-height:1.2;color:#37517e;color:var(--color-content-primary,#37517e)}.np-tile__description{margin-top:12px;margin-top:var(--size-12,12px);line-height:1.375;color:#5d7079;color:var(--color-content-secondary,#5d7079);font-weight:500}.np-tile--small.np-decision__tile--fixed-width{width:260px}.np-tile--small .np-tile__title{margin-top:12px;margin-top:var(--size-12,12px);font-size:1rem;line-height:1.375}.np-tile--small .np-tile__description{margin-top:4px;margin-top:var(--size-4,4px)}.np-tile:hover .tw-avatar{pointer-events:none}.np-tile:hover .tw-avatar .tw-avatar__content{background-color:#fff;background-color:var(--color-background-screen,#fff)}
@@ -1,28 +1 @@
1
- .tw-tooltip-container {
2
- display: inline-block;
3
- /*
4
- What we do is we wait 0.15s so the fade out animation is seen and then we run our own animation to hide it with visibility.
5
- This isn't actually animating, but it just turns visibility to hidden with a delay.
6
- */
7
- }
8
- .tw-tooltip-container .tooltip {
9
- visibility: visible;
10
- -webkit-user-select: none;
11
- -ms-user-select: none;
12
- user-select: none;
13
- }
14
- .tw-tooltip-container .tooltip:not(.in) {
15
- pointer-events: none;
16
- animation: tw-tooltip-disappear;
17
- animation-duration: 0s;
18
- animation-delay: 0.15s;
19
- animation-fill-mode: both;
20
- }
21
- @keyframes tw-tooltip-disappear {
22
- from {
23
- visibility: visible;
24
- }
25
- to {
26
- visibility: hidden;
27
- }
28
- }
1
+ .tw-tooltip-container{display:inline-block}.tw-tooltip-container .tooltip{visibility:visible;-webkit-user-select:none;-ms-user-select:none;user-select:none}.tw-tooltip-container .tooltip:not(.in){pointer-events:none;animation:tw-tooltip-disappear;animation-duration:0s;animation-delay:.15s;animation-fill-mode:both}@keyframes tw-tooltip-disappear{0%{visibility:visible}to{visibility:hidden}}
@@ -1,142 +1 @@
1
- .typeahead.open .input-group {
2
- z-index: 1060;
3
- }
4
- .typeahead .dropdown.btn-block {
5
- display: block;
6
- }
7
- .typeahead .dropdown-menu {
8
- max-width: 100%;
9
- width: 100%;
10
- }
11
- .typeahead--multiple .chip {
12
- margin-bottom: auto;
13
- animation-name: slide;
14
- animation-duration: 0.03s;
15
- animation-timing-function: ease-in-out;
16
- }
17
- .typeahead--multiple .chip:first-child {
18
- animation-name: slideFirst;
19
- }
20
- .typeahead--multiple .chip-remove {
21
- animation-name: fadeIn;
22
- animation-duration: 0.03s;
23
- animation-timing-function: ease-in-out;
24
- }
25
- .typeahead--multiple .form-control {
26
- height: auto;
27
- min-height: auto;
28
- padding-top: 0;
29
- padding-bottom: 0;
30
- overflow: auto;
31
- }
32
- .typeahead--multiple .typeahead__input {
33
- border: none;
34
- outline: none;
35
- float: none;
36
- font-size: inherit;
37
- line-height: inherit;
38
- align-self: stretch;
39
- padding: 2px 0 0;
40
- }
41
- .typeahead--multiple .typeahead__input-aligner {
42
- height: 40px;
43
- display: inline-block;
44
- width: 0;
45
- }
46
- .typeahead--multiple .typeahead__input-container {
47
- cursor: text;
48
- display: flex;
49
- }
50
- .typeahead--multiple .sizer {
51
- white-space: pre;
52
- position: absolute;
53
- visibility: hidden;
54
- width: auto;
55
- }
56
- .typeahead--multiple.typeahead--has-value .typeahead__input-container {
57
- padding-left: 8px;
58
- padding-left: var(--size-8, 8px);
59
- }
60
- .typeahead--multiple.typeahead--has-value .typeahead__input {
61
- margin-bottom: calc(-1 * 8px + 1px);
62
- margin-bottom: calc(-1 * var(--size-8, 8px) + 1px);
63
- margin-left: 4px;
64
- margin-left: var(--size-4, 4px);
65
- }
66
- .typeahead--multiple.typeahead--has-value .typeahead__input-wrapper::after {
67
- content: '';
68
- height: calc(8px - 1);
69
- height: calc(var(--size-8, 8px) - 1);
70
- width: 100%;
71
- }
72
- .typeahead__input-wrapper {
73
- width: 100%;
74
- margin-top: -1px;
75
- display: flex;
76
- flex-wrap: wrap;
77
- flex: 1;
78
- align-items: center;
79
- }
80
- .typeahead--empty.typeahead--multiple .typeahead__input-wrapper {
81
- padding: 0;
82
- margin: 0;
83
- }
84
- .typeahead-sm.typeahead--multiple .typeahead__input-container {
85
- min-height: 32px;
86
- }
87
- .typeahead-sm.typeahead--multiple .typeahead__input {
88
- padding-top: 0;
89
- }
90
- .typeahead-md.typeahead--multiple .typeahead__input-container {
91
- min-height: 48px;
92
- }
93
- .typeahead-lg.typeahead--multiple .typeahead__input-container {
94
- min-height: 72px;
95
- }
96
- .typeahead-lg.typeahead--multiple .typeahead__input {
97
- padding-top: calc(8px - 1);
98
- padding-top: calc(var(--size-8, 8px) - 1);
99
- }
100
- .typeahead-lg.typeahead--multiple .typeahead__input-wrapper {
101
- padding-bottom: 8px;
102
- padding-bottom: var(--size-8, 8px);
103
- margin: 0;
104
- }
105
- .typeahead-lg.typeahead--multiple .typeahead__input-wrapper::after {
106
- content: none;
107
- }
108
- .typeahead-lg.typeahead--multiple .chip {
109
- margin-bottom: 0;
110
- line-height: 0;
111
- }
112
- @keyframes slide {
113
- from {
114
- transform: translateX(-12px);
115
- }
116
- to {
117
- transform: none;
118
- }
119
- }
120
- @keyframes slideFirst {
121
- from {
122
- transform: translateX(-4px);
123
- }
124
- to {
125
- transform: none;
126
- }
127
- }
128
- @keyframes fadeIn {
129
- from {
130
- opacity: 0;
131
- }
132
- to {
133
- opacity: 0.6;
134
- }
135
- }
136
- @media (max-width: 575px) {
137
- .typeahead .dropdown.open .dropdown-menu {
138
- position: absolute;
139
- bottom: auto;
140
- overflow: scroll;
141
- }
142
- }
1
+ .typeahead.open .input-group{z-index:1060}.typeahead .dropdown.btn-block{display:block}.typeahead .dropdown-menu{max-width:100%;width:100%}.typeahead--multiple .chip{margin-bottom:auto;animation-name:slide;animation-duration:.03s;animation-timing-function:ease-in-out}.typeahead--multiple .chip:first-child{animation-name:slideFirst}.typeahead--multiple .chip-remove{animation-name:fadeIn;animation-duration:.03s;animation-timing-function:ease-in-out}.typeahead--multiple .form-control{height:auto;min-height:auto;padding-top:0;padding-bottom:0;overflow:auto}.typeahead--multiple .typeahead__input{border:none;outline:none;float:none;font-size:inherit;line-height:inherit;align-self:stretch;padding:2px 0 0}.typeahead--multiple .typeahead__input-aligner{height:40px;display:inline-block;width:0}.typeahead--multiple .typeahead__input-container{cursor:text;display:flex}.typeahead--multiple .sizer{white-space:pre;position:absolute;visibility:hidden;width:auto}.typeahead--multiple.typeahead--has-value .typeahead__input-container{padding-left:8px;padding-left:var(--size-8,8px)}.typeahead--multiple.typeahead--has-value .typeahead__input{margin-bottom:-7px;margin-bottom:calc(var(--size-8, 8px)*-1 + 1px);margin-left:4px;margin-left:var(--size-4,4px)}.typeahead--multiple.typeahead--has-value .typeahead__input-wrapper:after{content:"";height:calc(8px - 1);height:calc(var(--size-8, 8px) - 1);width:100%}.typeahead__input-wrapper{width:100%;margin-top:-1px;display:flex;flex-wrap:wrap;flex:1;align-items:center}.typeahead--empty.typeahead--multiple .typeahead__input-wrapper{padding:0;margin:0}.typeahead-sm.typeahead--multiple .typeahead__input-container{min-height:32px}.typeahead-sm.typeahead--multiple .typeahead__input{padding-top:0}.typeahead-md.typeahead--multiple .typeahead__input-container{min-height:48px}.typeahead-lg.typeahead--multiple .typeahead__input-container{min-height:72px}.typeahead-lg.typeahead--multiple .typeahead__input{padding-top:calc(8px - 1);padding-top:calc(var(--size-8, 8px) - 1)}.typeahead-lg.typeahead--multiple .typeahead__input-wrapper{padding-bottom:8px;padding-bottom:var(--size-8,8px);margin:0}.typeahead-lg.typeahead--multiple .typeahead__input-wrapper:after{content:none}.typeahead-lg.typeahead--multiple .chip{margin-bottom:0;line-height:0}@keyframes slide{0%{transform:translateX(-12px)}to{transform:none}}@keyframes slideFirst{0%{transform:translateX(-4px)}to{transform:none}}@keyframes fadeIn{0%{opacity:0}to{opacity:.6}}@media (max-width:575px){.typeahead .dropdown.open .dropdown-menu{position:absolute;bottom:auto;overflow:scroll}}
@@ -1,11 +1 @@
1
- .typeahead__option.tw-dropdown-item .dropdown-item:active strong {
2
- color: #ffffff;
3
- color: var(--color-base-white-light, #ffffff);
4
- }
5
- .typeahead__option.tw-dropdown-item--clickable {
6
- cursor: pointer;
7
- }
8
- .typeahead__option.tw-dropdown-item--focused {
9
- background-color: #86a7bd1a;
10
- background-color: var(--color-background-neutral, #86a7bd1a);
11
- }
1
+ .typeahead__option.tw-dropdown-item .dropdown-item:active strong{color:#fff;color:var(--color-base-white-light,#fff)}.typeahead__option.tw-dropdown-item--clickable{cursor:pointer}.typeahead__option.tw-dropdown-item--focused{background-color:rgba(134,167,189,.10196078431372549);background-color:var(--color-background-neutral,rgba(134,167,189,.10196078431372549))}
@@ -1,15 +1 @@
1
- .tw-droppable-lg {
2
- min-height: 346px;
3
- }
4
- .tw-droppable-lg .thumbnail {
5
- max-height: 72px;
6
- }
7
- .tw-droppable-md {
8
- min-height: 315px;
9
- }
10
- .tw-droppable-md .thumbnail {
11
- max-height: 72px;
12
- }
13
- .tw-droppable-sm {
14
- min-height: 245px;
15
- }
1
+ .tw-droppable-lg{min-height:346px}.tw-droppable-lg .thumbnail{max-height:72px}.tw-droppable-md{min-height:315px}.tw-droppable-md .thumbnail{max-height:72px}.tw-droppable-sm{min-height:245px}
@@ -1,6 +1 @@
1
- .np-upload-input {
2
- border: 1px solid #0000001a;
3
- border: 1px solid var(--color-border-neutral, #0000001a);
4
- border-radius: 3px;
5
- border-radius: var(--radius-small, 3px);
6
- }
1
+ .np-upload-input{border:1px solid rgba(0,0,0,.10196078431372549);border:1px solid var(--color-border-neutral,rgba(0,0,0,.10196078431372549));border-radius:3px;border-radius:var(--radius-small,3px)}
@@ -1,45 +1 @@
1
- .np-upload-button {
2
- width: 100%;
3
- text-decoration: none !important;
4
- border: 0 !important;
5
- letter-spacing: normal !important;
6
- padding: 12px 16px;
7
- padding: var(--size-12, 12px) var(--size-16, 16px);
8
- }
9
- .np-upload-button.np-upload-accent {
10
- color: #00a2dd;
11
- color: var(--color-interactive-accent, #00a2dd);
12
- }
13
- label.np-upload-button:not(.disabled):hover,
14
- label.np-upload-button:not(.disabled):focus,
15
- label.np-upload-button:not(.disabled):active {
16
- background-color: #86a7bd1a;
17
- background-color: var(--color-background-neutral, #86a7bd1a);
18
- }
19
- label.np-upload-button.disabled {
20
- color: #a8aaac;
21
- color: var(--color-content-disabled, #a8aaac);
22
- }
23
- .np-upload-button .np-upload-icon {
24
- display: flex;
25
- align-items: center;
26
- }
27
- .np-upload-button .np-upload-description {
28
- font-weight: normal;
29
- white-space: normal;
30
- }
31
- .np-upload-button-container.droppable {
32
- border: 0;
33
- }
34
- .np-upload-button-container .droppable-card-content {
35
- display: flex;
36
- }
37
- .np-upload-button-container input[type='file'] {
38
- opacity: 0;
39
- z-index: -1;
40
- position: absolute;
41
- }
42
- .np-upload-button-container input[type='file']:focus + label {
43
- background-color: #86a7bd1a;
44
- background-color: var(--color-background-neutral, #86a7bd1a);
45
- }
1
+ .np-upload-button{width:100%;text-decoration:none!important;border:0!important;letter-spacing:normal!important;padding:12px 16px;padding:var(--size-12,12px) var(--size-16,16px)}.np-upload-button.np-upload-accent{color:#00a2dd;color:var(--color-interactive-accent,#00a2dd)}label.np-upload-button:not(.disabled):active,label.np-upload-button:not(.disabled):focus,label.np-upload-button:not(.disabled):hover{background-color:rgba(134,167,189,.10196078431372549);background-color:var(--color-background-neutral,rgba(134,167,189,.10196078431372549))}label.np-upload-button.disabled{color:#a8aaac;color:var(--color-content-disabled,#a8aaac)}.np-upload-button .np-upload-icon{display:flex;align-items:center}.np-upload-button .np-upload-description{font-weight:400;white-space:normal}.np-upload-button-container.droppable{border:0}.np-upload-button-container .droppable-card-content{display:flex}.np-upload-button-container input[type=file]{opacity:0;z-index:-1;position:absolute}.np-upload-button-container input[type=file]:focus+label{background-color:rgba(134,167,189,.10196078431372549);background-color:var(--color-background-neutral,rgba(134,167,189,.10196078431372549))}
@@ -1,48 +1 @@
1
- .np-upload-item:not(:last-child)::after {
2
- display: block;
3
- position: relative;
4
- border-bottom: 1px solid #0000001a;
5
- border-bottom: 1px solid var(--color-border-neutral, #0000001a);
6
- content: ' ';
7
- margin: 0 16px;
8
- margin: 0 var(--size-16, 16px);
9
- }
10
- .np-upload-item__link a {
11
- flex: 1;
12
- text-decoration: none;
13
- outline: none;
14
- font-weight: 500;
15
- font-weight: var(--font-weight-regular, 500);
16
- }
17
- .np-upload-item__link a:hover,
18
- .np-upload-item__link a:focus,
19
- .np-upload-item__link a:active {
20
- text-decoration: none;
21
- background-color: #86a7bd1a;
22
- background-color: var(--color-background-neutral, #86a7bd1a);
23
- }
24
- .np-upload-item__link a:hover ~ .np-upload-item__remove-button,
25
- .np-upload-item__link a:focus ~ .np-upload-item__remove-button,
26
- .np-upload-item__link a:active ~ .np-upload-item__remove-button {
27
- background-color: #86a7bd1a;
28
- background-color: var(--color-background-neutral, #86a7bd1a);
29
- }
30
- .np-upload-item__body {
31
- display: flex;
32
- align-items: center;
33
- justify-content: space-between;
34
- }
35
- .np-upload-item__remove-button {
36
- flex-shrink: 0;
37
- align-self: stretch;
38
- padding: 12px 16px;
39
- padding: var(--size-12, 12px) var(--size-16, 16px);
40
- color: #a8aaac;
41
- color: var(--color-content-disabled, #a8aaac);
42
- background: transparent;
43
- }
44
- .np-upload-item__remove-button:hover,
45
- .np-upload-item__remove-button:focus {
46
- color: #cf2929 !important;
47
- color: var(--color-content-negative, #cf2929) !important;
48
- }
1
+ .np-upload-item:not(:last-child):after{display:block;position:relative;border-bottom:1px solid rgba(0,0,0,.10196078431372549);border-bottom:1px solid var(--color-border-neutral,rgba(0,0,0,.10196078431372549));content:" ";margin:0 16px;margin:0 var(--size-16,16px)}.np-upload-item__link a{flex:1;text-decoration:none;outline:none;font-weight:500;font-weight:var(--font-weight-regular,500)}.np-upload-item__link a:active,.np-upload-item__link a:focus,.np-upload-item__link a:hover{text-decoration:none}.np-upload-item__link a:active,.np-upload-item__link a:active~.np-upload-item__remove-button,.np-upload-item__link a:focus,.np-upload-item__link a:focus~.np-upload-item__remove-button,.np-upload-item__link a:hover,.np-upload-item__link a:hover~.np-upload-item__remove-button{background-color:rgba(134,167,189,.10196078431372549);background-color:var(--color-background-neutral,rgba(134,167,189,.10196078431372549))}.np-upload-item__body{display:flex;align-items:center;justify-content:space-between}.np-upload-item__remove-button{flex-shrink:0;align-self:stretch;padding:12px 16px;padding:var(--size-12,12px) var(--size-16,16px);color:#a8aaac;color:var(--color-content-disabled,#a8aaac);background:transparent}.np-upload-item__remove-button:focus,.np-upload-item__remove-button:hover{color:#d03238!important;color:var(--color-interactive-negative-hover,#d03238)!important}
@@ -1,16 +1,19 @@
1
1
  declare namespace _default {
2
- namespace ariaLabel {
2
+ namespace monthLabel {
3
3
  const id: string;
4
4
  const defaultMessage: string;
5
- const description: string;
6
5
  }
7
- namespace ariaLabelNewTab {
6
+ namespace dayLabel {
8
7
  const id_1: string;
9
8
  export { id_1 as id };
10
9
  const defaultMessage_1: string;
11
10
  export { defaultMessage_1 as defaultMessage };
12
- const description_1: string;
13
- export { description_1 as description };
11
+ }
12
+ namespace yearLabel {
13
+ const id_2: string;
14
+ export { id_2 as id };
15
+ const defaultMessage_2: string;
16
+ export { defaultMessage_2 as defaultMessage };
14
17
  }
15
18
  }
16
19
  export default _default;
@@ -4,14 +4,8 @@ declare type Props = PropsWithChildren<CommonProps & AriaLabelProperty & LinkPro
4
4
  /**
5
5
  * Standard Link component with navigate away icon
6
6
  *
7
- * Docs link: https://transferwise.github.io/neptune-web/components/content/Link
7
+ * Documentation: https://transferwise.github.io/neptune-web/components/content/Link
8
8
  *
9
- * @param root0
10
- * @param root0.className
11
- * @param root0.children
12
- * @param root0.href
13
- * @param root0.target
14
- * @param root0.'aria-label'
15
9
  */
16
10
  declare const Link: ({ className, children, href, target, "aria-label": ariaLabel }: Props) => JSX.Element;
17
11
  export default Link;
@@ -0,0 +1 @@
1
+ import '@testing-library/jest-dom';
@@ -0,0 +1,9 @@
1
+ /// <reference types="react" />
2
+ declare const _default: {
3
+ component: ({ className, children, href, target, "aria-label": ariaLabel }: import("../common").CommonProps & import("../common").AriaLabelProperty & import("../common").LinkProps & {
4
+ children?: import("react").ReactNode;
5
+ }) => JSX.Element;
6
+ title: string;
7
+ };
8
+ export default _default;
9
+ export declare const Basic: () => JSX.Element;
@@ -14,7 +14,6 @@ export interface ModalProps {
14
14
  onClose: (...args: any[])=>any;
15
15
  className?: string;
16
16
  open: boolean;
17
- closeOnClick?: boolean;
18
17
  scroll?: ModalScroll;
19
18
  position?: ModalPosition;
20
19
  }
@@ -5,6 +5,7 @@ export interface NudgeProps {
5
5
  title: React.ReactNode;
6
6
  link: React.ReactNode;
7
7
  href: string;
8
+ onClick?: (...args: any[])=>any;
8
9
  onDismiss: (...args: any[])=>any;
9
10
  id?: string;
10
11
  className?: string;
@@ -12,3 +12,4 @@ declare const _default: {
12
12
  };
13
13
  export default _default;
14
14
  export declare const Basic: () => JSX.Element;
15
+ export declare const Disabled: () => JSX.Element;
@@ -14,8 +14,9 @@ declare function customRender(ui: any, { locale, messages, ...renderOptions }?:
14
14
  messages?: {
15
15
  "neptune.ClearButton.ariaLabel": string;
16
16
  "neptune.CloseButton.ariaLabel": string;
17
- "neptune.Link.ariaLabel": string;
18
- "neptune.Link.ariaLabelNewTab": string;
17
+ "neptune.DateInput.day.label": string;
18
+ "neptune.DateInput.month.label": string;
19
+ "neptune.DateInput.year.label": string;
19
20
  "neptune.MoneyInput.Select.placeholder": string;
20
21
  "neptune.Pagination.ariaLabel": string;
21
22
  "neptune.PaginationLink.ariaLabel.active": string;
@@ -66,8 +67,9 @@ declare function customRenderHook(callback: any, { locale, messages }?: {
66
67
  messages?: {
67
68
  "neptune.ClearButton.ariaLabel": string;
68
69
  "neptune.CloseButton.ariaLabel": string;
69
- "neptune.Link.ariaLabel": string;
70
- "neptune.Link.ariaLabelNewTab": string;
70
+ "neptune.DateInput.day.label": string;
71
+ "neptune.DateInput.month.label": string;
72
+ "neptune.DateInput.year.label": string;
71
73
  "neptune.MoneyInput.Select.placeholder": string;
72
74
  "neptune.Pagination.ariaLabel": string;
73
75
  "neptune.PaginationLink.ariaLabel.active": string;
@@ -42,7 +42,7 @@ export interface UploadProps {
42
42
  uploadStep?: UploadUploadStep;
43
43
  }
44
44
 
45
- export class Upload extends React.PureComponent<UploadProps, any> {
45
+ export class Upload extends React.Component<UploadProps, any> {
46
46
  render(): JSX.Element;
47
47
 
48
48
  }
@@ -3,6 +3,5 @@ export { asyncFileRead } from "./asyncFileRead";
3
3
  export { isSizeValid } from "./isSizeValid";
4
4
  export { isTypeValid } from "./isTypeValid";
5
5
  export { getFileType } from "./getFileType";
6
- export { generateErrorMessage } from "./generateErrorMessage";
7
6
  export { getSupportedSpotMimeTypes } from "./getSupportedSpotMimeTypes";
8
7
  export { requestMedia } from "./requestMedia";
@@ -1,2 +1 @@
1
- export default withNextPortalWrapper;
2
- declare function withNextPortalWrapper(Component: any): (props: any) => import("react").ReactPortal | null;
1
+ export default function withNextPortalWrapper(Component: any): (props: any) => import("react").ReactPortal | null;