@transferwise/components 46.100.1 → 46.100.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (153) hide show
  1. package/build/avatarLayout/AvatarLayout.js +1 -1
  2. package/build/avatarLayout/AvatarLayout.js.map +1 -1
  3. package/build/avatarLayout/AvatarLayout.mjs +1 -1
  4. package/build/avatarLayout/AvatarLayout.mjs.map +1 -1
  5. package/build/dateLookup/DateLookup.js +3 -2
  6. package/build/dateLookup/DateLookup.js.map +1 -1
  7. package/build/dateLookup/DateLookup.mjs +3 -2
  8. package/build/dateLookup/DateLookup.mjs.map +1 -1
  9. package/build/main.css +4 -94
  10. package/build/styles/accordion/Accordion.css +27 -16
  11. package/build/styles/avatar/Avatar.css +95 -50
  12. package/build/styles/inputs/Input.css +37 -21
  13. package/build/styles/inputs/TextArea.css +35 -20
  14. package/build/styles/loader/Loader.css +4 -90
  15. package/build/styles/main.css +4 -94
  16. package/build/styles/popover/Popover.css +19 -12
  17. package/build/styles/select/Select.css +131 -68
  18. package/build/styles/switch/Switch.css +27 -16
  19. package/build/styles/tile/Tile.css +31 -18
  20. package/build/types/dateLookup/DateLookup.d.ts +2 -2
  21. package/build/types/dateLookup/DateLookup.d.ts.map +1 -1
  22. package/build/types/test-utils/story-config.d.ts +2 -3
  23. package/build/types/test-utils/story-config.d.ts.map +1 -1
  24. package/package.json +20 -28
  25. package/src/accordion/Accordion.css +27 -16
  26. package/src/accordion/Accordion.story.tsx +1 -1
  27. package/src/actionButton/ActionButton.story.tsx +3 -2
  28. package/src/actionOption/ActionOption.story.tsx +2 -2
  29. package/src/alert/Alert.story.tsx +2 -2
  30. package/src/alert/Alert.tests.story.tsx +2 -2
  31. package/src/avatar/Avatar.css +95 -50
  32. package/src/avatar/Avatar.spec.tsx +1 -1
  33. package/src/avatar/Avatar.story.tsx +3 -2
  34. package/src/avatarLayout/AvatarLayout.story.tsx +1 -1
  35. package/src/avatarLayout/AvatarLayout.tsx +1 -1
  36. package/src/avatarView/AvatarView.story.tsx +1 -1
  37. package/src/avatarWrapper/AvatarWrapper.story.tsx +3 -2
  38. package/src/badge/Badge.story.tsx +49 -28
  39. package/src/button/Button.accessibility.docs.mdx +1 -1
  40. package/src/button/Button.story.tsx +2 -2
  41. package/src/button/Button.tests.story.tsx +2 -2
  42. package/src/button/LegacyButton.story.tsx +3 -2
  43. package/src/card/Card.story.tsx +2 -2
  44. package/src/carousel/Carousel.story.tsx +1 -1
  45. package/src/checkbox/Checkbox.story.tsx +2 -2
  46. package/src/checkboxButton/CheckboxButton.story.tsx +2 -2
  47. package/src/checkboxOption/CheckboxOption.story.tsx +35 -29
  48. package/src/chevron/Chevron.story.tsx +1 -1
  49. package/src/chips/Chips.story.tsx +1 -1
  50. package/src/circularButton/CircularButton.story.tsx +1 -1
  51. package/src/circularButton/CircularButton.tests.story.tsx +1 -1
  52. package/src/common/bottomSheet/BottomSheet.story.tsx +2 -2
  53. package/src/common/card/Card.story.tsx +1 -1
  54. package/src/common/circle/Circle.story.tsx +2 -2
  55. package/src/common/locale/index.spec.ts +28 -16
  56. package/src/common/responsivePanel/ResponsivePanel.spec.js +8 -29
  57. package/src/criticalBanner/CriticalCommsBanner.story.tsx +1 -1
  58. package/src/dateInput/DateInput.story.tsx +2 -2
  59. package/src/dateInput/DateInput.tests.story.tsx +2 -2
  60. package/src/dateLookup/DateLookup.spec.tsx +5 -5
  61. package/src/dateLookup/DateLookup.story.tsx +43 -71
  62. package/src/dateLookup/DateLookup.tests.story.tsx +3 -3
  63. package/src/dateLookup/DateLookup.tsx +4 -1
  64. package/src/decision/Decision.story.tsx +24 -49
  65. package/src/definitionList/DefinitionList.story.tsx +1 -1
  66. package/src/dimmer/Dimmer.story.tsx +2 -2
  67. package/src/divider/Divider.accessibility.docs.mdx +1 -1
  68. package/src/divider/Divider.story.tsx +1 -1
  69. package/src/drawer/Drawer.story.tsx +13 -7
  70. package/src/dropFade/DropFade.story.tsx +1 -1
  71. package/src/emphasis/Emphasis.spec.tsx +8 -8
  72. package/src/emphasis/Emphasis.story.tsx +1 -1
  73. package/src/field/Field.story.tsx +3 -3
  74. package/src/flowNavigation/FlowNavigation.story.tsx +305 -260
  75. package/src/iconButton/IconButton.story.tsx +2 -2
  76. package/src/image/Image.story.tsx +27 -54
  77. package/src/info/Info.story.tsx +2 -2
  78. package/src/inlineAlert/InlineAlert.story.tsx +1 -1
  79. package/src/inputWithDisplayFormat/InputWithDisplayFormat.story.tsx +2 -2
  80. package/src/inputs/Input.css +37 -21
  81. package/src/inputs/InputGroup.story.tsx +1 -1
  82. package/src/inputs/SearchInput.story.tsx +1 -1
  83. package/src/inputs/SelectInput.docs.mdx +1 -1
  84. package/src/inputs/SelectInput.story.tsx +2 -2
  85. package/src/inputs/TextArea.css +35 -20
  86. package/src/instructionsList/InstructionsList.story.tsx +2 -2
  87. package/src/legacylistItem/LegacyListItem.story.tsx +1 -1
  88. package/src/loader/Loader.css +4 -90
  89. package/src/loader/Loader.story.tsx +1 -1
  90. package/src/logo/Logo.story.tsx +1 -1
  91. package/src/main.css +4 -94
  92. package/src/markdown/Markdown.story.tsx +1 -1
  93. package/src/modal/Modal.story.tsx +2 -2
  94. package/src/money/Money.story.tsx +1 -1
  95. package/src/moneyInput/MoneyInput.docs.mdx +1 -1
  96. package/src/moneyInput/MoneyInput.spec.tsx +8 -5
  97. package/src/moneyInput/MoneyInput.story.tsx +2 -2
  98. package/src/moneyInput/currencyFormatting.spec.ts +1 -1
  99. package/src/navigationOption/NavigationOption.story.tsx +265 -226
  100. package/src/nudge/Nudge.story.tsx +1 -1
  101. package/src/overlayHeader/OverlayHeader.story.tsx +32 -24
  102. package/src/phoneNumberInput/PhoneNumberInput.story.tsx +1 -1
  103. package/src/phoneNumberInput/utils/setDefaultPrefix/setDefaultPrefix.spec.ts +6 -3
  104. package/src/popover/Popover.css +19 -12
  105. package/src/popover/Popover.story.tsx +2 -2
  106. package/src/primitives/PrimitiveAnchor/stories/PrimitiveAnchor.story.tsx +2 -2
  107. package/src/primitives/PrimitiveAnchor/stories/PrimitiveAnchor.tests.story.tsx +2 -2
  108. package/src/primitives/PrimitiveButton/stories/PrimitiveButton.story.tsx +2 -2
  109. package/src/primitives/PrimitiveButton/stories/PrimitiveButton.tests.story.tsx +2 -2
  110. package/src/processIndicator/ProcessIndicator.story.tsx +1 -1
  111. package/src/progress/Progress.story.tsx +1 -1
  112. package/src/progressBar/ProgressBar.story.tsx +1 -1
  113. package/src/promoCard/PromoCard.story.tsx +1 -1
  114. package/src/promoCard/PromoCardGroup.story.tsx +1 -1
  115. package/src/provider/Provider.spec.tsx +2 -2
  116. package/src/provider/Provider.story.tsx +1 -1
  117. package/src/provider/direction/DirectionProvider.spec.tsx +1 -1
  118. package/src/provider/language/LanguageProvider.spec.tsx +1 -1
  119. package/src/provider/theme/ThemeProvider.story.tsx +1 -1
  120. package/src/radio/Radio.story.tsx +59 -42
  121. package/src/radioGroup/RadioGroup.story.tsx +2 -2
  122. package/src/radioOption/RadioOption.story.tsx +73 -38
  123. package/src/segmentedControl/SegmentedControl.story.tsx +1 -1
  124. package/src/select/Select.css +131 -68
  125. package/src/select/Select.story.tsx +385 -397
  126. package/src/slidingPanel/SlidingPanel.story.tsx +30 -13
  127. package/src/snackbar/Snackbar.story.tsx +50 -36
  128. package/src/snackbar/Snackbar.tests.story.tsx +3 -2
  129. package/src/statusIcon/StatusIcon.docs.mdx +1 -1
  130. package/src/statusIcon/StatusIcon.spec.tsx +8 -5
  131. package/src/statusIcon/StatusIcon.story.tsx +1 -1
  132. package/src/stepper/Stepper.story.tsx +2 -2
  133. package/src/stepper/Stepper.tests.story.tsx +2 -2
  134. package/src/sticky/Sticky.story.tsx +1 -1
  135. package/src/summary/Summary.story.tsx +18 -17
  136. package/src/switch/Switch.css +27 -16
  137. package/src/switch/Switch.story.tsx +2 -2
  138. package/src/switchOption/SwitchOption.story.tsx +1 -1
  139. package/src/table/Table.story.tsx +1 -1
  140. package/src/test-utils/story-config.ts +9 -6
  141. package/src/textareaWithDisplayFormat/TextareaWithDisplayFormat.story.tsx +2 -2
  142. package/src/tile/Tile.css +31 -18
  143. package/src/tile/Tile.story.tsx +43 -43
  144. package/src/tooltip/Tooltip.story.tsx +2 -2
  145. package/src/typeahead/Typeahead.story.tsx +2 -2
  146. package/src/upload/Upload.story.tsx +2 -2
  147. package/src/upload/Upload.tests.story.tsx +2 -2
  148. package/src/upload/utils/isTypeValid/isTypeValid.spec.ts +3 -1
  149. package/src/uploadInput/UploadInput.story.tsx +1 -1
  150. package/src/uploadInput/UploadInput.tests.story.tsx +3 -3
  151. package/src/withId/withId.docs.mdx +1 -1
  152. package/src/withId/withId.story.tsx +1 -1
  153. package/src/common/responsivePanel/__snapshots__/ResponsivePanel.spec.js.snap +0 -21
package/src/select/Select.css CHANGED
@@ -1,6 +1,4 @@
1
- @media (min-width: 768px) {
2
- }@media (min-width: 768px) {
3
- }.np-select .np-dropdown-toggle {
1
+ .np-select .np-dropdown-toggle {
4
2
  background-color: #ffffff;
5
3
  background-color: var(--color-background-screen);
6
4
  border: 1px solid #c9cbce;
@@ -17,99 +15,125 @@
17
15
  text-align: left;
18
16
  text-overflow: ellipsis;
19
17
  max-width: 100%;
20
- }[dir="rtl"] .np-select .np-dropdown-toggle {
18
+ }
19
+ [dir="rtl"] .np-select .np-dropdown-toggle {
21
20
  text-align: right;
22
- }.np-select .np-dropdown-toggle:focus-visible {
21
+ }
22
+ .np-select .np-dropdown-toggle:focus-visible {
23
23
  outline: none;
24
- }.np-theme-personal .np-select .np-dropdown-toggle {
24
+ }
25
+ .np-theme-personal .np-select .np-dropdown-toggle {
25
26
  border-radius: 10px;
26
27
  border-radius: var(--radius-small);
27
- }.has-error .np-select .np-dropdown-toggle {
28
+ }
29
+ .has-error .np-select .np-dropdown-toggle {
28
30
  border: 1px solid #e74848;
29
31
  border: 1px solid var(--color-interactive-negative);
30
- }.np-select .np-dropdown-toggle-navy {
32
+ }
33
+ .np-select .np-dropdown-toggle-navy {
31
34
  --color-content-accent: #00b9ff;
32
35
  --color-content-primary: #ffffff;
33
36
  --color-content-secondary: #c9cbce;
34
37
  --color-background-screen: #2e4369;
35
38
  --color-interactive-secondary: #2e4369;
36
39
  --color-interactive-secondary-hover: #2e4369;
37
- }.np-select .np-dropdown-toggle.np-btn-sm {
40
+ }
41
+ .np-select .np-dropdown-toggle.np-btn-sm {
38
42
  padding-right: 32px;
39
43
  padding-right: var(--size-32);
40
- }[dir="rtl"] .np-select .np-dropdown-toggle.np-btn-sm {
44
+ }
45
+ [dir="rtl"] .np-select .np-dropdown-toggle.np-btn-sm {
41
46
  padding-left: 32px;
42
47
  padding-left: var(--size-32);
43
48
  padding-right: 0;
44
49
  padding-right: initial;
45
- }.np-select .np-dropdown-toggle.np-btn-md {
50
+ }
51
+ .np-select .np-dropdown-toggle.np-btn-md {
46
52
  padding-right: 40px;
47
53
  padding-right: var(--size-40);
48
- }[dir="rtl"] .np-select .np-dropdown-toggle.np-btn-md {
54
+ }
55
+ [dir="rtl"] .np-select .np-dropdown-toggle.np-btn-md {
49
56
  padding-left: 40px;
50
57
  padding-left: var(--size-40);
51
58
  padding-right: 0;
52
59
  padding-right: initial;
53
- }.np-select .np-dropdown-toggle.np-btn-lg {
60
+ }
61
+ .np-select .np-dropdown-toggle.np-btn-lg {
54
62
  padding-right: 48px;
55
63
  padding-right: var(--size-48);
56
- }[dir="rtl"] .np-select .np-dropdown-toggle.np-btn-lg {
64
+ }
65
+ [dir="rtl"] .np-select .np-dropdown-toggle.np-btn-lg {
57
66
  padding-left: 48px;
58
67
  padding-left: var(--size-48);
59
68
  padding-right: 0;
60
69
  padding-right: initial;
61
- }.np-select .np-dropdown-toggle .np-select-chevron {
70
+ }
71
+ .np-select .np-dropdown-toggle .np-select-chevron {
62
72
  margin: 0 ;
63
73
  position: absolute;
64
74
  right: 16px;
65
75
  right: var(--size-16);
66
76
  top: 16px;
67
77
  top: var(--size-16);
68
- }[dir="rtl"] .np-select .np-dropdown-toggle .np-select-chevron {
78
+ }
79
+ [dir="rtl"] .np-select .np-dropdown-toggle .np-select-chevron {
69
80
  margin: 0 ;
70
- }[dir="rtl"] .np-select .np-dropdown-toggle .np-select-chevron {
81
+ }
82
+ [dir="rtl"] .np-select .np-dropdown-toggle .np-select-chevron {
71
83
  left: 16px;
72
84
  left: var(--size-16);
73
85
  right: auto;
74
86
  right: initial;
75
- }.np-select .np-dropdown-toggle.np-btn-sm .np-select-chevron {
87
+ }
88
+ .np-select .np-dropdown-toggle.np-btn-sm .np-select-chevron {
76
89
  right: 8px;
77
90
  right: var(--size-8);
78
91
  top: 8px;
79
92
  top: var(--size-8);
80
- }[dir="rtl"] .np-select .np-dropdown-toggle.np-btn-sm .np-select-chevron {
93
+ }
94
+ [dir="rtl"] .np-select .np-dropdown-toggle.np-btn-sm .np-select-chevron {
81
95
  left: 8px;
82
96
  left: var(--size-8);
83
97
  right: auto;
84
98
  right: initial;
85
- }.np-select .np-dropdown-toggle.np-btn-lg .np-select-chevron {
99
+ }
100
+ .np-select .np-dropdown-toggle.np-btn-lg .np-select-chevron {
86
101
  top: 27px;
87
- }.np-select .btn:not(.disabled):not(:disabled):not(.btn-loading) {
102
+ }
103
+ .np-select .btn:not(.disabled):not(:disabled):not(.btn-loading) {
88
104
  color: #37517e;
89
105
  color: var(--color-content-primary);
90
- }.np-select .btn:not(.disabled):not(:disabled):not(.btn-loading):hover {
106
+ }
107
+ .np-select .btn:not(.disabled):not(:disabled):not(.btn-loading):hover {
91
108
  border-color: #b5b7ba;
92
109
  border-color: var(--color-interactive-secondary-hover);
93
- }.np-select .btn:not(.disabled):not(:disabled):not(.btn-loading):focus {
110
+ }
111
+ .np-select .btn:not(.disabled):not(:disabled):not(.btn-loading):focus {
94
112
  border-color: #00a2dd;
95
113
  border-color: var(--color-interactive-accent);
96
- }.np-theme-personal .np-select .btn:not(.disabled):not(:disabled):not(.btn-loading):focus {
114
+ }
115
+ .np-theme-personal .np-select .btn:not(.disabled):not(:disabled):not(.btn-loading):focus {
97
116
  border-color: #c9cbce;
98
117
  border-color: var(--color-interactive-secondary);
99
- }.np-option-content {
118
+ }
119
+ .np-option-content {
100
120
  max-width: 100%;
101
- }.np-option-content .d-flex:last-child {
121
+ }
122
+ .np-option-content .d-flex:last-child {
102
123
  max-width: calc(100% - 32px);
103
- }.np-dropdown-menu-desktop {
124
+ }
125
+ .np-dropdown-menu-desktop {
104
126
  max-height: 70vh;
105
127
  max-height: 70svh;
106
128
  min-width: 160px;
107
129
  max-width: calc(100vw - 32px);
108
- }@media (min-height: 592px) {
130
+ }
131
+ @media (min-height: 592px) {
109
132
  .np-dropdown-menu-desktop {
110
133
  max-height: 592px;
111
134
  }
112
- }.np-dropdown-menu {
135
+ }
136
+ .np-dropdown-menu {
113
137
  border-radius: 10px;
114
138
  border-radius: var(--radius-small);
115
139
  overflow: auto;
@@ -119,27 +143,36 @@
119
143
  text-align: left;
120
144
  background-color: #ffffff;
121
145
  background-color: var(--color-background-screen);
122
- }[dir="rtl"] .np-dropdown-menu {
146
+ }
147
+ [dir="rtl"] .np-dropdown-menu {
123
148
  padding: 0 ;
124
- }[dir="rtl"] .np-dropdown-menu {
149
+ }
150
+ [dir="rtl"] .np-dropdown-menu {
125
151
  text-align: right;
126
- }.np-theme-personal .np-dropdown-menu {
152
+ }
153
+ .np-theme-personal .np-dropdown-menu {
127
154
  border-radius: 10px;
128
155
  border-radius: var(--radius-small);
129
- }.np-dropdown-menu-sm {
156
+ }
157
+ .np-dropdown-menu-sm {
130
158
  width: 220px;
131
- }.np-dropdown-menu-md {
159
+ }
160
+ .np-dropdown-menu-md {
132
161
  width: 300px;
133
- }.np-dropdown-menu-lg {
162
+ }
163
+ .np-dropdown-menu-lg {
134
164
  width: 420px;
135
- }.np-dropdown-menu .np-dropdown-item--focused {
165
+ }
166
+ .np-dropdown-menu .np-dropdown-item--focused {
136
167
  background-color: rgba(134,167,189,0.10196);
137
168
  background-color: var(--color-background-neutral);
138
169
  border-radius: 10px;
139
170
  border-radius: var(--radius-small);
140
- }.np-dropdown-menu .np-dropdown-item > a {
171
+ }
172
+ .np-dropdown-menu .np-dropdown-item > a {
141
173
  white-space: normal;
142
- }.np-dropdown-menu > li > a {
174
+ }
175
+ .np-dropdown-menu > li > a {
143
176
  text-overflow: ellipsis;
144
177
  -webkit-text-decoration: none;
145
178
  text-decoration: none;
@@ -158,35 +191,43 @@
158
191
  letter-spacing: -0.006em;
159
192
  font-weight: 400;
160
193
  font-weight: var(--font-weight-regular);
161
- }.np-theme-personal .np-dropdown-menu > li > a {
194
+ }
195
+ .np-theme-personal .np-dropdown-menu > li > a {
162
196
  border-radius: 10px;
163
197
  border-radius: var(--radius-small);
164
- }.np-dropdown-menu > li:first-child > a {
198
+ }
199
+ .np-dropdown-menu > li:first-child > a {
165
200
  border-top-right-radius: 3px;
166
201
  border-top-left-radius: 3px;
167
- }.np-theme-personal .np-dropdown-menu > li:first-child > a {
202
+ }
203
+ .np-theme-personal .np-dropdown-menu > li:first-child > a {
168
204
  border-top-right-radius: 10px;
169
205
  border-top-right-radius: var(--radius-small);
170
206
  border-top-left-radius: 10px;
171
207
  border-top-left-radius: var(--radius-small);
172
- }.np-dropdown-menu > li:last-child > a {
208
+ }
209
+ .np-dropdown-menu > li:last-child > a {
173
210
  border-bottom-right-radius: 3px;
174
211
  border-bottom-left-radius: 3px;
175
- }.np-theme-personal .np-dropdown-menu > li:last-child > a {
212
+ }
213
+ .np-theme-personal .np-dropdown-menu > li:last-child > a {
176
214
  border-bottom-right-radius: 10px;
177
215
  border-bottom-right-radius: var(--radius-small);
178
216
  border-bottom-left-radius: 10px;
179
217
  border-bottom-left-radius: var(--radius-small);
180
- }.np-dropdown-menu > li:not(.active):not(.selected):not(:has(input)) > a:not([disabled]):not(.disabled):hover,
218
+ }
219
+ .np-dropdown-menu > li:not(.active):not(.selected):not(:has(input)) > a:not([disabled]):not(.disabled):hover,
181
220
  .np-dropdown-menu > li:not(.active):not(.selected):not(:has(input)) > a:not([disabled]):not(.disabled):focus {
182
221
  color: #37517e;
183
222
  color: var(--color-content-primary);
184
223
  background-color: rgba(134,167,189,0.10196);
185
224
  background-color: var(--color-background-neutral);
186
- }.np-dropdown-menu > li:not(.active):not(.selected):not(:has(input)) > a:not([disabled]):not(.disabled):active {
225
+ }
226
+ .np-dropdown-menu > li:not(.active):not(.selected):not(:has(input)) > a:not([disabled]):not(.disabled):active {
187
227
  color: #ffffff;
188
228
  background-color: #37517e;
189
- }.np-dropdown-menu > .active > a,
229
+ }
230
+ .np-dropdown-menu > .active > a,
190
231
  .np-dropdown-menu > .selected > a,
191
232
  .np-dropdown-menu > .active > a:hover,
192
233
  .np-dropdown-menu > .selected > a:hover,
@@ -194,22 +235,27 @@
194
235
  .np-dropdown-menu > .selected > a:focus {
195
236
  color: #ffffff;
196
237
  background-color: #37517e;
197
- }.np-dropdown-menu > .active > a strong,
238
+ }
239
+ .np-dropdown-menu > .active > a strong,
198
240
  .np-dropdown-menu > .selected > a strong {
199
241
  color: inherit;
200
- }.np-dropdown-menu > .active > a .np-text-body-default,
242
+ }
243
+ .np-dropdown-menu > .active > a .np-text-body-default,
201
244
  .np-dropdown-menu > .selected > a .np-text-body-default {
202
245
  color: #c9cbce;
203
- }.np-dropdown-menu .np-select-filter,
246
+ }
247
+ .np-dropdown-menu .np-select-filter,
204
248
  .np-dropdown-menu .input-group-addon {
205
249
  border: 0;
206
- }.np-dropdown-menu .np-separator {
250
+ }
251
+ .np-dropdown-menu .np-separator {
207
252
  height: 1px;
208
253
  margin: 0;
209
254
  overflow: hidden;
210
255
  background-color: rgba(134,167,189,0.10196);
211
256
  background-color: var(--color-background-neutral);
212
- }.np-dropdown-menu .np-dropdown-header {
257
+ }
258
+ .np-dropdown-menu .np-dropdown-header {
213
259
  padding: 8px 16px;
214
260
  padding: var(--size-8) var(--size-16);
215
261
  color: #5d7079;
@@ -222,7 +268,8 @@
222
268
  line-height: 1.5;
223
269
  line-height: var(--line-height-body);
224
270
  white-space: nowrap;
225
- }.np-select .tw-icon,
271
+ }
272
+ .np-select .tw-icon,
226
273
  .np-dropdown-menu .tw-icon,
227
274
  .np-select img,
228
275
  .np-dropdown-menu img {
@@ -230,7 +277,8 @@
230
277
  margin-right: var(--size-8);
231
278
  display: inline-block;
232
279
  vertical-align: middle;
233
- }[dir="rtl"] .np-select .tw-icon,
280
+ }
281
+ [dir="rtl"] .np-select .tw-icon,
234
282
  [dir="rtl"] .np-dropdown-menu .tw-icon,
235
283
  [dir="rtl"] .np-select img,
236
284
  [dir="rtl"] .np-dropdown-menu img {
@@ -238,40 +286,50 @@
238
286
  margin-left: var(--size-8);
239
287
  margin-right: 0;
240
288
  margin-right: initial;
241
- }.np-select .np-text-body-default,
289
+ }
290
+ .np-select .np-text-body-default,
242
291
  .np-dropdown-menu .np-text-body-default {
243
292
  color: #5d7079;
244
293
  color: var(--color-content-secondary);
245
- }.np-select .tw-icon-search,
294
+ }
295
+ .np-select .tw-icon-search,
246
296
  .np-dropdown-menu .tw-icon-search {
247
297
  margin-right: 0;
248
- }.np-theme-personal {
298
+ }
299
+ .np-theme-personal {
249
300
  /* stylelint-disable-next-line no-duplicate-selectors */
250
301
  /* stylelint-disable-next-line no-duplicate-selectors */
251
- }.np-theme-personal .np-select .np-dropdown-toggle {
302
+ }
303
+ .np-theme-personal .np-select .np-dropdown-toggle {
252
304
  background-color: transparent;
253
305
  background-color: initial;
254
306
  transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
255
307
  border: none;
256
308
  box-shadow: inset 0 0 0 1px #c9cbce;
257
309
  box-shadow: inset 0 0 0 1px var(--color-interactive-secondary);
258
- }.np-theme-personal .np-select .np-dropdown-toggle:not(.disabled):not(:disabled):hover {
310
+ }
311
+ .np-theme-personal .np-select .np-dropdown-toggle:not(.disabled):not(:disabled):hover {
259
312
  box-shadow: inset 0 0 0 2px #b5b7ba;
260
313
  box-shadow: inset 0 0 0 2px var(--color-interactive-secondary-hover);
261
- }.np-theme-personal .np-select .np-dropdown-toggle:not(.disabled):not(:disabled):focus,
314
+ }
315
+ .np-theme-personal .np-select .np-dropdown-toggle:not(.disabled):not(:disabled):focus,
262
316
  .np-theme-personal .np-select .np-dropdown-toggle:not(.disabled):not(:disabled):focus-visible,
263
317
  .np-theme-personal .np-select .np-dropdown-toggle:not(.disabled):not(:disabled):focus-within {
264
318
  box-shadow: inset 0 0 0 3px var(--color-interactive-primary);
265
- }.np-theme-personal .has-error .np-select .np-dropdown-toggle,
319
+ }
320
+ .np-theme-personal .has-error .np-select .np-dropdown-toggle,
266
321
  .np-theme-personal .has-error .np-select .np-dropdown-toggle:not(.disabled):not(:disabled):hover {
267
322
  box-shadow: inset 0 0 0 2px var(--color-sentiment-negative);
268
- }.np-theme-personal .has-error .np-select .np-dropdown-toggle:not(.disabled):not(:disabled):focus,
323
+ }
324
+ .np-theme-personal .has-error .np-select .np-dropdown-toggle:not(.disabled):not(:disabled):focus,
269
325
  .np-theme-personal .has-error .np-select .np-dropdown-toggle:not(.disabled):not(:disabled):focus-visible,
270
326
  .np-theme-personal .has-error .np-select .np-dropdown-toggle:not(.disabled):not(:disabled):focus-within {
271
327
  box-shadow: inset 0 0 0 3px var(--color-sentiment-negative);
272
- }.np-theme-personal .np-dropdown-menu {
328
+ }
329
+ .np-theme-personal .np-dropdown-menu {
273
330
  outline: none;
274
- }.np-theme-personal .np-dropdown-menu .active a,
331
+ }
332
+ .np-theme-personal .np-dropdown-menu .active a,
275
333
  .np-theme-personal .np-dropdown-menu .selected a,
276
334
  .np-theme-personal .np-dropdown-menu .active a:focus,
277
335
  .np-theme-personal .np-dropdown-menu .selected a:focus,
@@ -279,7 +337,8 @@
279
337
  .np-theme-personal .np-dropdown-menu .selected a:hover {
280
338
  color: var(--color-interactive-primary);
281
339
  background-color: var(--color-background-neutral-active);
282
- }.np-theme-personal .np-dropdown-menu .active a .body-2,
340
+ }
341
+ .np-theme-personal .np-dropdown-menu .active a .body-2,
283
342
  .np-theme-personal .np-dropdown-menu .selected a .body-2,
284
343
  .np-theme-personal .np-dropdown-menu .active a:focus .body-2,
285
344
  .np-theme-personal .np-dropdown-menu .selected a:focus .body-2,
@@ -292,14 +351,18 @@
292
351
  .np-theme-personal .np-dropdown-menu .active a:hover .np-text-body-default,
293
352
  .np-theme-personal .np-dropdown-menu .selected a:hover .np-text-body-default {
294
353
  color: var(--color-interactive-primary);
295
- }.np-theme-personal .np-dropdown-menu li:not(.active):not(.selected):not(:has(input)) a:not([disabled]):not(.disabled):active {
354
+ }
355
+ .np-theme-personal .np-dropdown-menu li:not(.active):not(.selected):not(:has(input)) a:not([disabled]):not(.disabled):active {
296
356
  color: var(--color-interactive-primary) !important;
297
357
  background-color: var(--color-background-neutral-active) !important;
298
- }.np-theme-personal .np-dropdown-menu li:not(.active):not(.selected):not(:has(input)) a:not([disabled]):not(.disabled):active .body-2,
358
+ }
359
+ .np-theme-personal .np-dropdown-menu li:not(.active):not(.selected):not(:has(input)) a:not([disabled]):not(.disabled):active .body-2,
299
360
  .np-theme-personal .np-dropdown-menu li:not(.active):not(.selected):not(:has(input)) a:not([disabled]):not(.disabled):active .np-text-body-default {
300
361
  color: var(--color-interactive-primary);
301
- }.np-theme-personal .np-dropdown-menu .np-dropdown-item {
362
+ }
363
+ .np-theme-personal .np-dropdown-menu .np-dropdown-item {
302
364
  outline: none;
303
- }.np-theme-personal .np-dropdown-menu .np-dropdown-item--focused {
365
+ }
366
+ .np-theme-personal .np-dropdown-menu .np-dropdown-item--focused {
304
367
  box-shadow: inset 0 0 0 2px var(--color-interactive-primary);
305
368
  }