@transferwise/components 46.100.0 → 46.100.2

package/build/styles/main.css

@@ -34,10 +34,6 @@
     margin-left: var(--padding-small);
   }
 }
-@media (min-width: 768px) {
-}
-@media (min-width: 768px) {
-}
 .np-accordion-item {
   display: block;
   width: 100%;
@@ -3188,101 +3184,15 @@ button.np-link {
   --coin-size: 3rem;
   --coin-edge-width-offset: translateX(0.275rem);
   --coin-edge-width-negative-offset: translateX(-0.275rem);
-  --box-shadow-forwards: 0.025rem 0 0 var(--coin-colour),
-      0.05rem 0 0 var(--coin-colour),
-      0.075rem 0 0 var(--coin-colour),
-      0.1rem 0 0 var(--coin-colour),
-      0.125rem 0 0 var(--coin-colour),
-      0.15rem 0 0 var(--coin-colour),
-      0.175rem 0 0 var(--coin-colour),
-      0.2rem 0 0 var(--coin-colour),
-      0.225rem 0 0 var(--coin-colour),
-      0.25rem 0 0 var(--coin-colour),
-      0.275rem 0 0 var(--coin-colour),
-      0.3rem 0 0 var(--coin-colour),
-      0.325rem 0 0 var(--coin-colour),
-      0.35rem 0 0 var(--coin-colour),
-      0.375rem 0 0 var(--coin-colour),
-      0.4rem 0 0 var(--coin-colour),
-      0.425rem 0 0 var(--coin-colour),
-      0.45rem 0 0 var(--coin-colour),
-      0.475rem 0 0 var(--coin-colour);
-  --box-shadow-backwards: -0.025rem 0 0 var(--coin-colour),
-      -0.05rem 0 0 var(--coin-colour),
-      -0.075rem 0 0 var(--coin-colour),
-      -0.1rem 0 0 var(--coin-colour),
-      -0.125rem 0 0 var(--coin-colour),
-      -0.15rem 0 0 var(--coin-colour),
-      -0.175rem 0 0 var(--coin-colour),
-      -0.2rem 0 0 var(--coin-colour),
-      -0.225rem 0 0 var(--coin-colour),
-      -0.25rem 0 0 var(--coin-colour),
-      -0.275rem 0 0 var(--coin-colour),
-      -0.3rem 0 0 var(--coin-colour),
-      -0.325rem 0 0 var(--coin-colour),
-      -0.35rem 0 0 var(--coin-colour),
-      -0.375rem 0 0 var(--coin-colour),
-      -0.4rem 0 0 var(--coin-colour),
-      -0.425rem 0 0 var(--coin-colour),
-      -0.45rem 0 0 var(--coin-colour),
-      -0.475rem 0 0 var(--coin-colour);
+  --box-shadow-forwards: 0.025rem 0 0 var(--coin-colour), 0.05rem 0 0 var(--coin-colour), 0.075rem 0 0 var(--coin-colour), 0.1rem 0 0 var(--coin-colour), 0.125rem 0 0 var(--coin-colour), 0.15rem 0 0 var(--coin-colour), 0.175rem 0 0 var(--coin-colour), 0.2rem 0 0 var(--coin-colour), 0.225rem 0 0 var(--coin-colour), 0.25rem 0 0 var(--coin-colour), 0.275rem 0 0 var(--coin-colour), 0.3rem 0 0 var(--coin-colour), 0.325rem 0 0 var(--coin-colour), 0.35rem 0 0 var(--coin-colour), 0.375rem 0 0 var(--coin-colour), 0.4rem 0 0 var(--coin-colour), 0.425rem 0 0 var(--coin-colour), 0.45rem 0 0 var(--coin-colour), 0.475rem 0 0 var(--coin-colour);
+  --box-shadow-backwards: -0.025rem 0 0 var(--coin-colour), -0.05rem 0 0 var(--coin-colour), -0.075rem 0 0 var(--coin-colour), -0.1rem 0 0 var(--coin-colour), -0.125rem 0 0 var(--coin-colour), -0.15rem 0 0 var(--coin-colour), -0.175rem 0 0 var(--coin-colour), -0.2rem 0 0 var(--coin-colour), -0.225rem 0 0 var(--coin-colour), -0.25rem 0 0 var(--coin-colour), -0.275rem 0 0 var(--coin-colour), -0.3rem 0 0 var(--coin-colour), -0.325rem 0 0 var(--coin-colour), -0.35rem 0 0 var(--coin-colour), -0.375rem 0 0 var(--coin-colour), -0.4rem 0 0 var(--coin-colour), -0.425rem 0 0 var(--coin-colour), -0.45rem 0 0 var(--coin-colour), -0.475rem 0 0 var(--coin-colour);
 }
 .tw-loader--md {
   --coin-size: 4.5rem;
   --coin-edge-width-offset: translateX(0.375rem);
   --coin-edge-width-negative-offset: translateX(-0.375rem);
-  --box-shadow-forwards: 0.025rem 0 0 var(--coin-colour),
-      0.05rem 0 0 var(--coin-colour),
-      0.075rem 0 0 var(--coin-colour),
-      0.1rem 0 0 var(--coin-colour),
-      0.125rem 0 0 var(--coin-colour),
-      0.15rem 0 0 var(--coin-colour),
-      0.175rem 0 0 var(--coin-colour),
-      0.2rem 0 0 var(--coin-colour),
-      0.225rem 0 0 var(--coin-colour),
-      0.25rem 0 0 var(--coin-colour),
-      0.275rem 0 0 var(--coin-colour),
-      0.3rem 0 0 var(--coin-colour),
-      0.325rem 0 0 var(--coin-colour),
-      0.35rem 0 0 var(--coin-colour),
-      0.375rem 0 0 var(--coin-colour),
-      0.4rem 0 0 var(--coin-colour),
-      0.425rem 0 0 var(--coin-colour),
-      0.45rem 0 0 var(--coin-colour),
-      0.475rem 0 0 var(--coin-colour),
-      0.5rem 0 0 var(--coin-colour),
-      0.525rem 0 0 var(--coin-colour),
-      0.55rem 0 0 var(--coin-colour),
-      0.575rem 0 0 var(--coin-colour),
-      0.6rem 0 0 var(--coin-colour),
-      0.625rem 0 0 var(--coin-colour),
-      0.65rem 0 0 var(--coin-colour);
-  --box-shadow-backwards: -0.025rem 0 0 var(--coin-colour),
-      -0.05rem 0 0 var(--coin-colour),
-      -0.075rem 0 0 var(--coin-colour),
-      -0.1rem 0 0 var(--coin-colour),
-      -0.125rem 0 0 var(--coin-colour),
-      -0.15rem 0 0 var(--coin-colour),
-      -0.175rem 0 0 var(--coin-colour),
-      -0.2rem 0 0 var(--coin-colour),
-      -0.225rem 0 0 var(--coin-colour),
-      -0.25rem 0 0 var(--coin-colour),
-      -0.275rem 0 0 var(--coin-colour),
-      -0.3rem 0 0 var(--coin-colour),
-      -0.325rem 0 0 var(--coin-colour),
-      -0.35rem 0 0 var(--coin-colour),
-      -0.375rem 0 0 var(--coin-colour),
-      -0.4rem 0 0 var(--coin-colour),
-      -0.425rem 0 0 var(--coin-colour),
-      -0.45rem 0 0 var(--coin-colour),
-      -0.475rem 0 0 var(--coin-colour),
-      -0.5rem 0 0 var(--coin-colour),
-      -0.525rem 0 0 var(--coin-colour),
-      -0.55rem 0 0 var(--coin-colour),
-      -0.575rem 0 0 var(--coin-colour),
-      -0.6rem 0 0 var(--coin-colour),
-      -0.625rem 0 0 var(--coin-colour),
-      -0.65rem 0 0 var(--coin-colour);
+  --box-shadow-forwards: 0.025rem 0 0 var(--coin-colour), 0.05rem 0 0 var(--coin-colour), 0.075rem 0 0 var(--coin-colour), 0.1rem 0 0 var(--coin-colour), 0.125rem 0 0 var(--coin-colour), 0.15rem 0 0 var(--coin-colour), 0.175rem 0 0 var(--coin-colour), 0.2rem 0 0 var(--coin-colour), 0.225rem 0 0 var(--coin-colour), 0.25rem 0 0 var(--coin-colour), 0.275rem 0 0 var(--coin-colour), 0.3rem 0 0 var(--coin-colour), 0.325rem 0 0 var(--coin-colour), 0.35rem 0 0 var(--coin-colour), 0.375rem 0 0 var(--coin-colour), 0.4rem 0 0 var(--coin-colour), 0.425rem 0 0 var(--coin-colour), 0.45rem 0 0 var(--coin-colour), 0.475rem 0 0 var(--coin-colour), 0.5rem 0 0 var(--coin-colour), 0.525rem 0 0 var(--coin-colour), 0.55rem 0 0 var(--coin-colour), 0.575rem 0 0 var(--coin-colour), 0.6rem 0 0 var(--coin-colour), 0.625rem 0 0 var(--coin-colour), 0.65rem 0 0 var(--coin-colour);
+  --box-shadow-backwards: -0.025rem 0 0 var(--coin-colour), -0.05rem 0 0 var(--coin-colour), -0.075rem 0 0 var(--coin-colour), -0.1rem 0 0 var(--coin-colour), -0.125rem 0 0 var(--coin-colour), -0.15rem 0 0 var(--coin-colour), -0.175rem 0 0 var(--coin-colour), -0.2rem 0 0 var(--coin-colour), -0.225rem 0 0 var(--coin-colour), -0.25rem 0 0 var(--coin-colour), -0.275rem 0 0 var(--coin-colour), -0.3rem 0 0 var(--coin-colour), -0.325rem 0 0 var(--coin-colour), -0.35rem 0 0 var(--coin-colour), -0.375rem 0 0 var(--coin-colour), -0.4rem 0 0 var(--coin-colour), -0.425rem 0 0 var(--coin-colour), -0.45rem 0 0 var(--coin-colour), -0.475rem 0 0 var(--coin-colour), -0.5rem 0 0 var(--coin-colour), -0.525rem 0 0 var(--coin-colour), -0.55rem 0 0 var(--coin-colour), -0.575rem 0 0 var(--coin-colour), -0.6rem 0 0 var(--coin-colour), -0.625rem 0 0 var(--coin-colour), -0.65rem 0 0 var(--coin-colour);
 }
 @media (prefers-reduced-motion) {
   .tw-loader::before {

package/build/styles/popover/Popover.css

@@ -1,23 +1,26 @@
-@media (min-width: 768px) {
-}@media (min-width: 768px) {
-}.np-theme-personal .np-popover__container {
+.np-theme-personal .np-popover__container {
   border-radius: 16px;
   border-radius: var(--radius-medium);
-}.np-popover__container .np-popover__content {
+}
+.np-popover__container .np-popover__content {
   color: #5d7079;
   color: var(--color-content-secondary);
   font-size: 0.875rem;
   font-size: var(--font-size-14);
-}.np-popover__container .np-popover__content p:last-child {
+}
+.np-popover__container .np-popover__content p:last-child {
   margin-bottom: 0;
-}.np-popover__container.np-panel .np-popover__content {
+}
+.np-popover__container.np-panel .np-popover__content {
   padding: 16px 24px;
   padding: var(--size-16) var(--size-24);
   max-width: 276px;
-}.np-theme-personal .np-popover__container.np-panel .np-popover__content {
+}
+.np-theme-personal .np-popover__container.np-panel .np-popover__content {
   padding: 24px;
   padding: var(--size-24);
-}.np-popover__container.np-bottom-sheet .np-popover__title {
+}
+.np-popover__container.np-bottom-sheet .np-popover__title {
   margin: 0;
   color: #37517e;
   color: var(--color-content-primary);
@@ -32,7 +35,8 @@
   font-size: var(--font-size-26);
   letter-spacing: -0.02em;
   line-height: 122%;
-}@supports (hyphenate-limit-chars: 1) {
+}
+@supports (hyphenate-limit-chars: 1) {
   .np-popover__container.np-bottom-sheet .np-popover__title {
     -webkit-hyphens: auto;
             hyphens: auto;
@@ -48,7 +52,8 @@
       hyphenate-limit-chars: 10 4 3;
     }
   }
-}@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
+}
+@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
   .np-popover__container.np-bottom-sheet .np-popover__title {
     -webkit-hyphens: auto;
             hyphens: auto;
@@ -60,12 +65,14 @@
       -webkit-hyphenate-limit-before: 4;
     }
   }
-}.np-popover__container.np-bottom-sheet .np-popover__title + p,
+}
+.np-popover__container.np-bottom-sheet .np-popover__title + p,
 .np-popover__container.np-bottom-sheet .np-popover__title + ul:not(.list-unstyled),
 .np-popover__container.np-bottom-sheet .np-popover__title + ol:not(.list-unstyled) {
   margin-top: 8px;
   margin-top: var(--size-8);
-}.np-popover__container.np-bottom-sheet .np-popover__content {
+}
+.np-popover__container.np-bottom-sheet .np-popover__content {
   padding: 32px 24px;
   padding: var(--size-32) var(--size-24);
 }

package/build/styles/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);
 }

package/build/styles/switch/Switch.css

@@ -1,6 +1,4 @@
-@media (min-width: 768px) {
-}@media (min-width: 768px) {
-}.np-switch {
+.np-switch {
   all: unset;
   box-sizing: border-box;
   display: inline-flex;
@@ -12,37 +10,50 @@
      -moz-user-select: none;
           user-select: none;
   cursor: pointer;
-}.np-switch:focus {
+}
+.np-switch:focus {
   outline: none;
-}.np-switch:focus-visible {
+}
+.np-switch:focus-visible {
   outline: var(--ring-outline-color) solid var(--ring-outline-width);
   outline-offset: var(--ring-outline-offset);
-}.np-switch--thumb {
+}
+.np-switch--thumb {
   display: flex;
   transition: transform cubic-bezier(0, 0.94, 0.62, 1) 350ms;
-}.np-switch--thumb .tw-icon {
+}
+.np-switch--thumb .tw-icon {
   color: #fff;
-}.np-switch--unchecked {
+}
+.np-switch--unchecked {
   background: #c9cbce;
   background: var(--color-interactive-secondary);
-}.np-switch--unchecked .switch--thumb {
+}
+.np-switch--unchecked .switch--thumb {
   transform: translateX(0);
-}.np-switch--checked {
+}
+.np-switch--checked {
   background: #00a2dd;
   background: var(--color-interactive-accent);
-}.np-switch--checked .np-switch--thumb {
+}
+.np-switch--checked .np-switch--thumb {
   transform: translateX(20px)  ;
-}[dir="rtl"] .np-switch--checked .np-switch--thumb {
+}
+[dir="rtl"] .np-switch--checked .np-switch--thumb {
   transform: translateX(-20px)  ;
-}.np-switch.disabled {
+}
+.np-switch.disabled {
   filter: grayscale(1);
   opacity: 0.45;
   cursor: not-allowed !important;
-}.np-theme-personal .np-switch {
+}
+.np-theme-personal .np-switch {
   padding: 1px 2px;
-}.np-theme-personal .np-switch--checked {
+}
+.np-theme-personal .np-switch--checked {
   background: var(--color-interactive-primary);
-}.np-theme-personal .np-switch--thumb {
+}
+.np-theme-personal .np-switch--thumb {
   width: 20px;
   height: 20px;
   margin: 3px;