@transferwise/components 46.100.0 → 46.100.2

package/src/select/Select.css

@@ -1,6 +1,4 @@
-@media (min-width: 768px) {
-}@media (min-width: 768px) {
-}.np-select .np-dropdown-toggle {
+.np-select .np-dropdown-toggle {
   background-color: #ffffff;
   background-color: var(--color-background-screen);
   border: 1px solid #c9cbce;
@@ -17,99 +15,125 @@
   text-align: left;
   text-overflow: ellipsis;
   max-width: 100%;
-}[dir="rtl"] .np-select .np-dropdown-toggle {
+}
+[dir="rtl"] .np-select .np-dropdown-toggle {
   text-align: right;
-}.np-select .np-dropdown-toggle:focus-visible {
+}
+.np-select .np-dropdown-toggle:focus-visible {
   outline: none;
-}.np-theme-personal .np-select .np-dropdown-toggle {
+}
+.np-theme-personal .np-select .np-dropdown-toggle {
   border-radius: 10px;
   border-radius: var(--radius-small);
-}.has-error .np-select .np-dropdown-toggle {
+}
+.has-error .np-select .np-dropdown-toggle {
   border: 1px solid #e74848;
   border: 1px solid var(--color-interactive-negative);
-}.np-select .np-dropdown-toggle-navy {
+}
+.np-select .np-dropdown-toggle-navy {
   --color-content-accent: #00b9ff;
   --color-content-primary: #ffffff;
   --color-content-secondary: #c9cbce;
   --color-background-screen: #2e4369;
   --color-interactive-secondary: #2e4369;
   --color-interactive-secondary-hover: #2e4369;
-}.np-select .np-dropdown-toggle.np-btn-sm {
+}
+.np-select .np-dropdown-toggle.np-btn-sm {
   padding-right: 32px;
   padding-right: var(--size-32);
-}[dir="rtl"] .np-select .np-dropdown-toggle.np-btn-sm {
+}
+[dir="rtl"] .np-select .np-dropdown-toggle.np-btn-sm {
   padding-left: 32px;
   padding-left: var(--size-32);
   padding-right: 0;
   padding-right: initial;
-}.np-select .np-dropdown-toggle.np-btn-md {
+}
+.np-select .np-dropdown-toggle.np-btn-md {
   padding-right: 40px;
   padding-right: var(--size-40);
-}[dir="rtl"] .np-select .np-dropdown-toggle.np-btn-md {
+}
+[dir="rtl"] .np-select .np-dropdown-toggle.np-btn-md {
   padding-left: 40px;
   padding-left: var(--size-40);
   padding-right: 0;
   padding-right: initial;
-}.np-select .np-dropdown-toggle.np-btn-lg {
+}
+.np-select .np-dropdown-toggle.np-btn-lg {
   padding-right: 48px;
   padding-right: var(--size-48);
-}[dir="rtl"] .np-select .np-dropdown-toggle.np-btn-lg {
+}
+[dir="rtl"] .np-select .np-dropdown-toggle.np-btn-lg {
   padding-left: 48px;
   padding-left: var(--size-48);
   padding-right: 0;
   padding-right: initial;
-}.np-select .np-dropdown-toggle .np-select-chevron {
+}
+.np-select .np-dropdown-toggle .np-select-chevron {
   margin: 0   ;
   position: absolute;
   right: 16px;
   right: var(--size-16);
   top: 16px;
   top: var(--size-16);
-}[dir="rtl"] .np-select .np-dropdown-toggle .np-select-chevron {
+}
+[dir="rtl"] .np-select .np-dropdown-toggle .np-select-chevron {
   margin: 0   ;
-}[dir="rtl"] .np-select .np-dropdown-toggle .np-select-chevron {
+}
+[dir="rtl"] .np-select .np-dropdown-toggle .np-select-chevron {
   left: 16px;
   left: var(--size-16);
   right: auto;
   right: initial;
-}.np-select .np-dropdown-toggle.np-btn-sm .np-select-chevron {
+}
+.np-select .np-dropdown-toggle.np-btn-sm .np-select-chevron {
   right: 8px;
   right: var(--size-8);
   top: 8px;
   top: var(--size-8);
-}[dir="rtl"] .np-select .np-dropdown-toggle.np-btn-sm .np-select-chevron {
+}
+[dir="rtl"] .np-select .np-dropdown-toggle.np-btn-sm .np-select-chevron {
   left: 8px;
   left: var(--size-8);
   right: auto;
   right: initial;
-}.np-select .np-dropdown-toggle.np-btn-lg .np-select-chevron {
+}
+.np-select .np-dropdown-toggle.np-btn-lg .np-select-chevron {
   top: 27px;
-}.np-select .btn:not(.disabled):not(:disabled):not(.btn-loading) {
+}
+.np-select .btn:not(.disabled):not(:disabled):not(.btn-loading) {
   color: #37517e;
   color: var(--color-content-primary);
-}.np-select .btn:not(.disabled):not(:disabled):not(.btn-loading):hover {
+}
+.np-select .btn:not(.disabled):not(:disabled):not(.btn-loading):hover {
   border-color: #b5b7ba;
   border-color: var(--color-interactive-secondary-hover);
-}.np-select .btn:not(.disabled):not(:disabled):not(.btn-loading):focus {
+}
+.np-select .btn:not(.disabled):not(:disabled):not(.btn-loading):focus {
   border-color: #00a2dd;
   border-color: var(--color-interactive-accent);
-}.np-theme-personal .np-select .btn:not(.disabled):not(:disabled):not(.btn-loading):focus {
+}
+.np-theme-personal .np-select .btn:not(.disabled):not(:disabled):not(.btn-loading):focus {
   border-color: #c9cbce;
   border-color: var(--color-interactive-secondary);
-}.np-option-content {
+}
+.np-option-content {
   max-width: 100%;
-}.np-option-content .d-flex:last-child {
+}
+.np-option-content .d-flex:last-child {
   max-width: calc(100% - 32px);
-}.np-dropdown-menu-desktop {
+}
+.np-dropdown-menu-desktop {
   max-height: 70vh;
   max-height: 70svh;
   min-width: 160px;
   max-width: calc(100vw - 32px);
-}@media (min-height: 592px) {
+}
+@media (min-height: 592px) {
   .np-dropdown-menu-desktop {
     max-height: 592px;
   }
-}.np-dropdown-menu {
+}
+.np-dropdown-menu {
   border-radius: 10px;
   border-radius: var(--radius-small);
   overflow: auto;
@@ -119,27 +143,36 @@
   text-align: left;
   background-color: #ffffff;
   background-color: var(--color-background-screen);
-}[dir="rtl"] .np-dropdown-menu {
+}
+[dir="rtl"] .np-dropdown-menu {
   padding: 0   ;
-}[dir="rtl"] .np-dropdown-menu {
+}
+[dir="rtl"] .np-dropdown-menu {
   text-align: right;
-}.np-theme-personal .np-dropdown-menu {
+}
+.np-theme-personal .np-dropdown-menu {
   border-radius: 10px;
   border-radius: var(--radius-small);
-}.np-dropdown-menu-sm {
+}
+.np-dropdown-menu-sm {
   width: 220px;
-}.np-dropdown-menu-md {
+}
+.np-dropdown-menu-md {
   width: 300px;
-}.np-dropdown-menu-lg {
+}
+.np-dropdown-menu-lg {
   width: 420px;
-}.np-dropdown-menu .np-dropdown-item--focused {
+}
+.np-dropdown-menu .np-dropdown-item--focused {
   background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
   border-radius: 10px;
   border-radius: var(--radius-small);
-}.np-dropdown-menu .np-dropdown-item > a {
+}
+.np-dropdown-menu .np-dropdown-item > a {
   white-space: normal;
-}.np-dropdown-menu > li > a {
+}
+.np-dropdown-menu > li > a {
   text-overflow: ellipsis;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -158,35 +191,43 @@
   letter-spacing: -0.006em;
   font-weight: 400;
   font-weight: var(--font-weight-regular);
-}.np-theme-personal .np-dropdown-menu > li > a {
+}
+.np-theme-personal .np-dropdown-menu > li > a {
   border-radius: 10px;
   border-radius: var(--radius-small);
-}.np-dropdown-menu > li:first-child > a {
+}
+.np-dropdown-menu > li:first-child > a {
   border-top-right-radius: 3px;
   border-top-left-radius: 3px;
-}.np-theme-personal .np-dropdown-menu > li:first-child > a {
+}
+.np-theme-personal .np-dropdown-menu > li:first-child > a {
   border-top-right-radius: 10px;
   border-top-right-radius: var(--radius-small);
   border-top-left-radius: 10px;
   border-top-left-radius: var(--radius-small);
-}.np-dropdown-menu > li:last-child > a {
+}
+.np-dropdown-menu > li:last-child > a {
   border-bottom-right-radius: 3px;
   border-bottom-left-radius: 3px;
-}.np-theme-personal .np-dropdown-menu > li:last-child > a {
+}
+.np-theme-personal .np-dropdown-menu > li:last-child > a {
   border-bottom-right-radius: 10px;
   border-bottom-right-radius: var(--radius-small);
   border-bottom-left-radius: 10px;
   border-bottom-left-radius: var(--radius-small);
-}.np-dropdown-menu > li:not(.active):not(.selected):not(:has(input)) > a:not([disabled]):not(.disabled):hover,
+}
+.np-dropdown-menu > li:not(.active):not(.selected):not(:has(input)) > a:not([disabled]):not(.disabled):hover,
 .np-dropdown-menu > li:not(.active):not(.selected):not(:has(input)) > a:not([disabled]):not(.disabled):focus {
   color: #37517e;
   color: var(--color-content-primary);
   background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
-}.np-dropdown-menu > li:not(.active):not(.selected):not(:has(input)) > a:not([disabled]):not(.disabled):active {
+}
+.np-dropdown-menu > li:not(.active):not(.selected):not(:has(input)) > a:not([disabled]):not(.disabled):active {
   color: #ffffff;
   background-color: #37517e;
-}.np-dropdown-menu > .active > a,
+}
+.np-dropdown-menu > .active > a,
 .np-dropdown-menu > .selected > a,
 .np-dropdown-menu > .active > a:hover,
 .np-dropdown-menu > .selected > a:hover,
@@ -194,22 +235,27 @@
 .np-dropdown-menu > .selected > a:focus {
   color: #ffffff;
   background-color: #37517e;
-}.np-dropdown-menu > .active > a strong,
+}
+.np-dropdown-menu > .active > a strong,
 .np-dropdown-menu > .selected > a strong {
   color: inherit;
-}.np-dropdown-menu > .active > a .np-text-body-default,
+}
+.np-dropdown-menu > .active > a .np-text-body-default,
 .np-dropdown-menu > .selected > a .np-text-body-default {
   color: #c9cbce;
-}.np-dropdown-menu .np-select-filter,
+}
+.np-dropdown-menu .np-select-filter,
 .np-dropdown-menu .input-group-addon {
   border: 0;
-}.np-dropdown-menu .np-separator {
+}
+.np-dropdown-menu .np-separator {
   height: 1px;
   margin: 0;
   overflow: hidden;
   background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
-}.np-dropdown-menu .np-dropdown-header {
+}
+.np-dropdown-menu .np-dropdown-header {
   padding: 8px 16px;
   padding: var(--size-8) var(--size-16);
   color: #5d7079;
@@ -222,7 +268,8 @@
   line-height: 1.5;
   line-height: var(--line-height-body);
   white-space: nowrap;
-}.np-select .tw-icon,
+}
+.np-select .tw-icon,
 .np-dropdown-menu .tw-icon,
 .np-select img,
 .np-dropdown-menu img {
@@ -230,7 +277,8 @@
   margin-right: var(--size-8);
   display: inline-block;
   vertical-align: middle;
-}[dir="rtl"] .np-select .tw-icon,
+}
+[dir="rtl"] .np-select .tw-icon,
 [dir="rtl"] .np-dropdown-menu .tw-icon,
 [dir="rtl"] .np-select img,
 [dir="rtl"] .np-dropdown-menu img {
@@ -238,40 +286,50 @@
   margin-left: var(--size-8);
   margin-right: 0;
   margin-right: initial;
-}.np-select .np-text-body-default,
+}
+.np-select .np-text-body-default,
 .np-dropdown-menu .np-text-body-default {
   color: #5d7079;
   color: var(--color-content-secondary);
-}.np-select .tw-icon-search,
+}
+.np-select .tw-icon-search,
 .np-dropdown-menu .tw-icon-search {
   margin-right: 0;
-}.np-theme-personal {
+}
+.np-theme-personal {
   /* stylelint-disable-next-line no-duplicate-selectors */
   /* stylelint-disable-next-line no-duplicate-selectors */
-}.np-theme-personal .np-select .np-dropdown-toggle {
+}
+.np-theme-personal .np-select .np-dropdown-toggle {
   background-color: transparent;
   background-color: initial;
   transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
   border: none;
   box-shadow: inset 0 0 0 1px #c9cbce;
   box-shadow: inset 0 0 0 1px var(--color-interactive-secondary);
-}.np-theme-personal .np-select .np-dropdown-toggle:not(.disabled):not(:disabled):hover {
+}
+.np-theme-personal .np-select .np-dropdown-toggle:not(.disabled):not(:disabled):hover {
   box-shadow: inset 0 0 0 2px #b5b7ba;
   box-shadow: inset 0 0 0 2px var(--color-interactive-secondary-hover);
-}.np-theme-personal .np-select .np-dropdown-toggle:not(.disabled):not(:disabled):focus,
+}
+.np-theme-personal .np-select .np-dropdown-toggle:not(.disabled):not(:disabled):focus,
 .np-theme-personal .np-select .np-dropdown-toggle:not(.disabled):not(:disabled):focus-visible,
 .np-theme-personal .np-select .np-dropdown-toggle:not(.disabled):not(:disabled):focus-within {
   box-shadow: inset 0 0 0 3px var(--color-interactive-primary);
-}.np-theme-personal .has-error .np-select .np-dropdown-toggle,
+}
+.np-theme-personal .has-error .np-select .np-dropdown-toggle,
 .np-theme-personal .has-error .np-select .np-dropdown-toggle:not(.disabled):not(:disabled):hover {
   box-shadow: inset 0 0 0 2px var(--color-sentiment-negative);
-}.np-theme-personal .has-error .np-select .np-dropdown-toggle:not(.disabled):not(:disabled):focus,
+}
+.np-theme-personal .has-error .np-select .np-dropdown-toggle:not(.disabled):not(:disabled):focus,
 .np-theme-personal .has-error .np-select .np-dropdown-toggle:not(.disabled):not(:disabled):focus-visible,
 .np-theme-personal .has-error .np-select .np-dropdown-toggle:not(.disabled):not(:disabled):focus-within {
   box-shadow: inset 0 0 0 3px var(--color-sentiment-negative);
-}.np-theme-personal .np-dropdown-menu {
+}
+.np-theme-personal .np-dropdown-menu {
   outline: none;
-}.np-theme-personal .np-dropdown-menu .active a,
+}
+.np-theme-personal .np-dropdown-menu .active a,
 .np-theme-personal .np-dropdown-menu .selected a,
 .np-theme-personal .np-dropdown-menu .active a:focus,
 .np-theme-personal .np-dropdown-menu .selected a:focus,
@@ -279,7 +337,8 @@
 .np-theme-personal .np-dropdown-menu .selected a:hover {
   color: var(--color-interactive-primary);
   background-color: var(--color-background-neutral-active);
-}.np-theme-personal .np-dropdown-menu .active a .body-2,
+}
+.np-theme-personal .np-dropdown-menu .active a .body-2,
 .np-theme-personal .np-dropdown-menu .selected a .body-2,
 .np-theme-personal .np-dropdown-menu .active a:focus .body-2,
 .np-theme-personal .np-dropdown-menu .selected a:focus .body-2,
@@ -292,14 +351,18 @@
 .np-theme-personal .np-dropdown-menu .active a:hover .np-text-body-default,
 .np-theme-personal .np-dropdown-menu .selected a:hover .np-text-body-default {
   color: var(--color-interactive-primary);
-}.np-theme-personal .np-dropdown-menu li:not(.active):not(.selected):not(:has(input)) a:not([disabled]):not(.disabled):active {
+}
+.np-theme-personal .np-dropdown-menu li:not(.active):not(.selected):not(:has(input)) a:not([disabled]):not(.disabled):active {
   color: var(--color-interactive-primary) !important;
   background-color: var(--color-background-neutral-active) !important;
-}.np-theme-personal .np-dropdown-menu li:not(.active):not(.selected):not(:has(input)) a:not([disabled]):not(.disabled):active .body-2,
+}
+.np-theme-personal .np-dropdown-menu li:not(.active):not(.selected):not(:has(input)) a:not([disabled]):not(.disabled):active .body-2,
 .np-theme-personal .np-dropdown-menu li:not(.active):not(.selected):not(:has(input)) a:not([disabled]):not(.disabled):active .np-text-body-default {
   color: var(--color-interactive-primary);
-}.np-theme-personal .np-dropdown-menu .np-dropdown-item {
+}
+.np-theme-personal .np-dropdown-menu .np-dropdown-item {
   outline: none;
-}.np-theme-personal .np-dropdown-menu .np-dropdown-item--focused {
+}
+.np-theme-personal .np-dropdown-menu .np-dropdown-item--focused {
   box-shadow: inset 0 0 0 2px var(--color-interactive-primary);
 }