@transferwise/components 46.100.1 → 46.101.0

package/build/styles/accordion/Accordion.css

@@ -1,21 +1,24 @@
-@media (min-width: 768px) {
-}@media (min-width: 768px) {
-}.np-accordion-item {
+.np-accordion-item {
   display: block;
   width: 100%;
-}.np-accordion-item--open .media {
+}
+.np-accordion-item--open .media {
   border: 0 !important;
-}.np-accordion-item .decision:not(.disabled):not(:disabled):hover {
+}
+.np-accordion-item .decision:not(.disabled):not(:disabled):hover {
   background-color: transparent;
-}.np-accordion-item.np-accordion-item--dark .media-body,
+}
+.np-accordion-item.np-accordion-item--dark .media-body,
 .np-accordion-item.np-accordion-item--dark .np-text-title-body {
   color: #ffffff;
-}.np-accordion-item__content {
+}
+.np-accordion-item__content {
   padding: 0 12px 24px 12px;
   padding: 0 var(--size-12) var(--size-24) var(--size-12);
   border-bottom: 1px solid rgba(0,0,0,0.10196);
   border-bottom: 1px solid var(--color-border-neutral);
-}@media (min-width: 480px) {
+}
+@media (min-width: 480px) {
   .np-accordion-item__content.has-icon {
     padding-left: 68px;
   }
@@ -24,22 +27,28 @@
     padding-left: 0;
     padding-left: initial;
   }
-}.np-accordion-item .np-option .np-option__title {
+}
+.np-accordion-item .np-option .np-option__title {
   font-weight: 600;
   font-weight: var(--font-weight-semi-bold);
-}.np-theme-personal .np-accordion-item--with-media .media {
+}
+.np-theme-personal .np-accordion-item--with-media .media {
   display: flex;
   align-items: center;
-}.np-theme-personal .np-accordion-item--with-icon .np-accordion-item__content {
+}
+.np-theme-personal .np-accordion-item--with-icon .np-accordion-item__content {
   padding: 0 56px 16px;
   padding: 0 var(--size-56) var(--size-16);
-}.np-theme-personal .np-accordion-item--with-icon .media {
+}
+.np-theme-personal .np-accordion-item--with-icon .media {
   display: flex;
   align-items: flex-start;
-}.np-theme-personal .np-accordion-item .decision__title {
+}
+.np-theme-personal .np-accordion-item .decision__title {
   font-size: 1.125rem;
   font-size: var(--font-size-18);
-}.np-theme-personal .np-accordion-item .np-option .np-option__title {
+}
+.np-theme-personal .np-accordion-item .np-option .np-option__title {
   margin-bottom: 0;
   font-size: 1.125rem;
   font-size: var(--font-size-18);
@@ -47,14 +56,16 @@
   letter-spacing: var(--letter-spacing-negative-xs);
   line-height: 1.5rem;
   line-height: var(--line-height-24);
-}.np-theme-personal .np-accordion-item .np-option .circle-sm {
+}
+.np-theme-personal .np-accordion-item .np-option .circle-sm {
   background-color: transparent;
   width: 24px;
   width: var(--size-24);
   height: 24px;
   height: var(--size-24);
   border-radius: 0;
-}.np-theme-personal .np-accordion-item__content {
+}
+.np-theme-personal .np-accordion-item__content {
   padding: 0 56px 16px 16px;
   padding: 0 var(--size-56) var(--size-16) var(--size-16);
   border-bottom: none;

package/build/styles/avatar/Avatar.css

@@ -1,13 +1,12 @@
-@media (min-width: 768px) {
-}@media (min-width: 768px) {
-}.tw-avatar {
+.tw-avatar {
   position: relative;
   border-radius: 50%;
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
   box-sizing: border-box;
-}.tw-avatar .tw-avatar__content {
+}
+.tw-avatar .tw-avatar__content {
   align-items: center;
   background-color: rgba(134,167,189,0.10196);
   background-color: #86a7bd1a;
@@ -22,58 +21,73 @@
   max-width: 100%;
   overflow: hidden;
   width: 100%;
-}.tw-avatar--outlined {
+}
+.tw-avatar--outlined {
   border: 1px solid #00a2dd;
   border: 1px solid var(--color-interactive-accent);
   cursor: pointer;
-}.tw-avatar--outlined:not(.disabled):not(:disabled):hover {
+}
+.tw-avatar--outlined:not(.disabled):not(:disabled):hover {
   border-color: #008fc9;
   border-color: var(--color-interactive-accent-hover);
-}.tw-avatar--thumbnail * {
+}
+.tw-avatar--thumbnail * {
   width: 100%;
   height: 100%;
   -o-object-fit: cover;
      object-fit: cover;
-}.tw-avatar--icon * {
+}
+.tw-avatar--icon * {
   max-height: 100%;
   max-width: 100%;
-}.tw-avatar.tw-avatar--initials,
+}
+.tw-avatar.tw-avatar--initials,
 .tw-avatar.tw-avatar--emoji {
   font-family: Arial, sans-serif;
   font-weight: 600;
   font-weight: var(--font-weight-semi-bold);
-}.tw-avatar.tw-avatar--initials,
+}
+.tw-avatar.tw-avatar--initials,
 .tw-avatar.tw-avatar--icon {
   color: #37517e;
   color: var(--color-content-primary);
-}.tw-avatar.tw-avatar--initials,
+}
+.tw-avatar.tw-avatar--initials,
 .tw-avatar.tw-avatar--emoji {
   font-family: Arial, sans-serif;
-}.tw-avatar.tw-avatar--branded .tw-avatar__content {
+}
+.tw-avatar.tw-avatar--branded .tw-avatar__content {
   font-family: 'Wise Sans', 'Inter', sans-serif;
   font-family: var(--font-family-display);
   font-feature-settings: "ss01";
   color: var(--color-dark-charcoal);
   line-height: 1;
-}.tw-avatar--24 {
+}
+.tw-avatar--24 {
   min-width: 24px;
   width: 24px;
   height: 24px;
-}.tw-avatar--24.tw-avatar--emoji,
+}
+.tw-avatar--24.tw-avatar--emoji,
 .tw-avatar--24.tw-avatar--icon {
   font-size: 12px;
-}.tw-avatar--24.tw-avatar--initials {
+}
+.tw-avatar--24.tw-avatar--initials {
   font-size: 8.4px;
-}.tw-avatar--24.tw-avatar--branded {
+}
+.tw-avatar--24.tw-avatar--branded {
   font-size: 10.8px;
-}.tw-avatar--24.tw-avatar--outlined {
+}
+.tw-avatar--24.tw-avatar--outlined {
   padding: 2px;
-}.tw-avatar--24.tw-avatar--outlined.tw-avatar--thumbnail::after {
+}
+.tw-avatar--24.tw-avatar--outlined.tw-avatar--thumbnail::after {
   top: 2px;
   left: 2px;
   right: 2px;
   bottom: 2px;
-}.tw-avatar--24.tw-avatar--thumbnail::after {
+}
+.tw-avatar--24.tw-avatar--thumbnail::after {
   position: absolute;
   top: 0;
   left: 0;
@@ -83,25 +97,32 @@
   border: 1px solid var(--color-border-overlay);
   content: "";
   border-radius: 50%;
-}.tw-avatar--40 {
+}
+.tw-avatar--40 {
   min-width: 40px;
   width: 40px;
   height: 40px;
-}.tw-avatar--40.tw-avatar--emoji,
+}
+.tw-avatar--40.tw-avatar--emoji,
 .tw-avatar--40.tw-avatar--icon {
   font-size: 20px;
-}.tw-avatar--40.tw-avatar--initials {
+}
+.tw-avatar--40.tw-avatar--initials {
   font-size: 14px;
-}.tw-avatar--40.tw-avatar--branded {
+}
+.tw-avatar--40.tw-avatar--branded {
   font-size: 18px;
-}.tw-avatar--40.tw-avatar--outlined {
+}
+.tw-avatar--40.tw-avatar--outlined {
   padding: 2px;
-}.tw-avatar--40.tw-avatar--outlined.tw-avatar--thumbnail::after {
+}
+.tw-avatar--40.tw-avatar--outlined.tw-avatar--thumbnail::after {
   top: 2px;
   left: 2px;
   right: 2px;
   bottom: 2px;
-}.tw-avatar--40.tw-avatar--thumbnail::after {
+}
+.tw-avatar--40.tw-avatar--thumbnail::after {
   position: absolute;
   top: 0;
   left: 0;
@@ -111,25 +132,32 @@
   border: 1px solid var(--color-border-overlay);
   content: "";
   border-radius: 50%;
-}.tw-avatar--48 {
+}
+.tw-avatar--48 {
   min-width: 48px;
   width: 48px;
   height: 48px;
-}.tw-avatar--48.tw-avatar--emoji,
+}
+.tw-avatar--48.tw-avatar--emoji,
 .tw-avatar--48.tw-avatar--icon {
   font-size: 24px;
-}.tw-avatar--48.tw-avatar--initials {
+}
+.tw-avatar--48.tw-avatar--initials {
   font-size: 16.8px;
-}.tw-avatar--48.tw-avatar--branded {
+}
+.tw-avatar--48.tw-avatar--branded {
   font-size: 21.6px;
-}.tw-avatar--48.tw-avatar--outlined {
+}
+.tw-avatar--48.tw-avatar--outlined {
   padding: 2px;
-}.tw-avatar--48.tw-avatar--outlined.tw-avatar--thumbnail::after {
+}
+.tw-avatar--48.tw-avatar--outlined.tw-avatar--thumbnail::after {
   top: 2px;
   left: 2px;
   right: 2px;
   bottom: 2px;
-}.tw-avatar--48.tw-avatar--thumbnail::after {
+}
+.tw-avatar--48.tw-avatar--thumbnail::after {
   position: absolute;
   top: 0;
   left: 0;
@@ -139,25 +167,32 @@
   border: 1px solid var(--color-border-overlay);
   content: "";
   border-radius: 50%;
-}.tw-avatar--56 {
+}
+.tw-avatar--56 {
   min-width: 56px;
   width: 56px;
   height: 56px;
-}.tw-avatar--56.tw-avatar--emoji,
+}
+.tw-avatar--56.tw-avatar--emoji,
 .tw-avatar--56.tw-avatar--icon {
   font-size: 28px;
-}.tw-avatar--56.tw-avatar--initials {
+}
+.tw-avatar--56.tw-avatar--initials {
   font-size: 19.6px;
-}.tw-avatar--56.tw-avatar--branded {
+}
+.tw-avatar--56.tw-avatar--branded {
   font-size: 25.2px;
-}.tw-avatar--56.tw-avatar--outlined {
+}
+.tw-avatar--56.tw-avatar--outlined {
   padding: 2px;
-}.tw-avatar--56.tw-avatar--outlined.tw-avatar--thumbnail::after {
+}
+.tw-avatar--56.tw-avatar--outlined.tw-avatar--thumbnail::after {
   top: 2px;
   left: 2px;
   right: 2px;
   bottom: 2px;
-}.tw-avatar--56.tw-avatar--thumbnail::after {
+}
+.tw-avatar--56.tw-avatar--thumbnail::after {
   position: absolute;
   top: 0;
   left: 0;
@@ -167,25 +202,32 @@
   border: 1px solid var(--color-border-overlay);
   content: "";
   border-radius: 50%;
-}.tw-avatar--72 {
+}
+.tw-avatar--72 {
   min-width: 72px;
   width: 72px;
   height: 72px;
-}.tw-avatar--72.tw-avatar--emoji,
+}
+.tw-avatar--72.tw-avatar--emoji,
 .tw-avatar--72.tw-avatar--icon {
   font-size: 36px;
-}.tw-avatar--72.tw-avatar--initials {
+}
+.tw-avatar--72.tw-avatar--initials {
   font-size: 25.2px;
-}.tw-avatar--72.tw-avatar--branded {
+}
+.tw-avatar--72.tw-avatar--branded {
   font-size: 32.4px;
-}.tw-avatar--72.tw-avatar--outlined {
+}
+.tw-avatar--72.tw-avatar--outlined {
   padding: 2px;
-}.tw-avatar--72.tw-avatar--outlined.tw-avatar--thumbnail::after {
+}
+.tw-avatar--72.tw-avatar--outlined.tw-avatar--thumbnail::after {
   top: 2px;
   left: 2px;
   right: 2px;
   bottom: 2px;
-}.tw-avatar--72.tw-avatar--thumbnail::after {
+}
+.tw-avatar--72.tw-avatar--thumbnail::after {
   position: absolute;
   top: 0;
   left: 0;
@@ -195,11 +237,14 @@
   border: 1px solid var(--color-border-overlay);
   content: "";
   border-radius: 50%;
-}.tw-avatar img {
+}
+.tw-avatar img {
   width: 100%;
   height: 100%;
-}.np-theme-personal .tw-avatar--outlined {
+}
+.np-theme-personal .tw-avatar--outlined {
   border-color: var(--color-interactive-primary);
-}.np-theme-personal .tw-avatar--outlined:not(.disabled):not(:disabled):hover {
+}
+.np-theme-personal .tw-avatar--outlined:not(.disabled):not(:disabled):hover {
   border-color: var(--color-interactive-primary-hover);
 }

package/build/styles/inputs/Input.css

@@ -1,6 +1,4 @@
-@media (min-width: 768px) {
-}@media (min-width: 768px) {
-}.np-form-control {
+.np-form-control {
   --ring-width: 1px;
   --ring-color: var(--color-interactive-secondary);
   border: none;
@@ -19,18 +17,23 @@
   transition-timing-function: ease-in-out;
   transition-duration: 300ms;
   /* TODO: Remove these overrides once `.form-control` isn’t used anymore */
-}.np-form-control:focus-visible {
+}
+.np-form-control:focus-visible {
   outline: none;
-}.np-form-control[aria-invalid="true"] {
+}
+.np-form-control[aria-invalid="true"] {
   --ring-width: 2px;
   --ring-color: var(--color-sentiment-negative) !important;
-}.np-form-control:hover:enabled {
+}
+.np-form-control:hover:enabled {
   --ring-width: 2px;
   --ring-color: var(--color-interactive-secondary-hover);
-}.np-form-control:focus:enabled {
+}
+.np-form-control:focus:enabled {
   --ring-width: 3px;
   --ring-color: var(--color-interactive-primary);
-}.np-form-control--size-auto {
+}
+.np-form-control--size-auto {
   font-weight: 400;
   font-weight: var(--font-weight-regular);
   font-size: 1rem;
@@ -41,12 +44,14 @@
   padding-top: var(--size-12);
   padding-bottom: 12px;
   padding-bottom: var(--size-12);
-}.np-form-control--size-sm,
+}
+.np-form-control--size-sm,
 .np-form-control--size-md,
 .np-form-control--size-lg {
   padding-top: 0 !important;
   padding-bottom: 0 !important;
-}.np-form-control--size-sm {
+}
+.np-form-control--size-sm {
   font-size: 0.875rem;
   font-size: var(--font-size-14);
   line-height: 155%;
@@ -55,12 +60,14 @@
   font-weight: var(--font-weight-regular);
   height: 32px !important;
   height: var(--size-32) !important;
-}@media (max-width: 320px) {
+}
+@media (max-width: 320px) {
   .np-form-control--size-sm {
     height: 64px !important;
     height: var(--size-64) !important;
   }
-}.np-form-control--size-md {
+}
+.np-form-control--size-md {
   font-weight: 400;
   font-weight: var(--font-weight-regular);
   font-size: 1rem;
@@ -69,12 +76,14 @@
   letter-spacing: -0.011em;
   height: 48px !important;
   height: var(--size-48) !important;
-}@media (max-width: 320px) {
+}
+@media (max-width: 320px) {
   .np-form-control--size-md {
     height: 72px !important;
     height: var(--size-72) !important;
   }
-}.np-form-control--size-lg {
+}
+.np-form-control--size-lg {
   margin: 0;
   color: #37517e;
   color: var(--color-content-primary);
@@ -91,7 +100,8 @@
   line-height: 125%;
   height: 72px !important;
   height: var(--size-72) !important;
-}@supports (hyphenate-limit-chars: 1) {
+}
+@supports (hyphenate-limit-chars: 1) {
   .np-form-control--size-lg {
     -webkit-hyphens: auto;
             hyphens: auto;
@@ -107,7 +117,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-form-control--size-lg {
     -webkit-hyphens: auto;
             hyphens: auto;
@@ -119,21 +130,26 @@
       -webkit-hyphenate-limit-before: 4;
     }
   }
-}.np-form-control--size-lg + p,
+}
+.np-form-control--size-lg + p,
 .np-form-control--size-lg + ul:not(.list-unstyled),
 .np-form-control--size-lg + ol:not(.list-unstyled) {
   margin-top: 8px;
   margin-top: var(--size-8);
-}.np-input::-moz-placeholder {
+}
+.np-input::-moz-placeholder {
   color: #768e9c;
   color: var(--color-content-tertiary);
-}.np-input::placeholder {
+}
+.np-input::placeholder {
   color: #768e9c;
   color: var(--color-content-tertiary);
-}.np-input--shape-rectangle {
+}
+.np-input--shape-rectangle {
   border-radius: 10px !important;
   border-radius: var(--radius-small) !important;
-}.np-input--shape-pill {
+}
+.np-input--shape-pill {
   border-radius: 9999px !important;
   border-radius: var(--radius-full) !important;
 }

package/build/styles/inputs/TextArea.css

@@ -1,6 +1,4 @@
-@media (min-width: 768px) {
-}@media (min-width: 768px) {
-}.np-form-control {
+.np-form-control {
   --ring-width: 1px;
   --ring-color: var(--color-interactive-secondary);
   border: none;
@@ -19,18 +17,23 @@
   transition-timing-function: ease-in-out;
   transition-duration: 300ms;
   /* TODO: Remove these overrides once `.form-control` isn’t used anymore */
-}.np-form-control:focus-visible {
+}
+.np-form-control:focus-visible {
   outline: none;
-}.np-form-control[aria-invalid="true"] {
+}
+.np-form-control[aria-invalid="true"] {
   --ring-width: 2px;
   --ring-color: var(--color-sentiment-negative) !important;
-}.np-form-control:hover:enabled {
+}
+.np-form-control:hover:enabled {
   --ring-width: 2px;
   --ring-color: var(--color-interactive-secondary-hover);
-}.np-form-control:focus:enabled {
+}
+.np-form-control:focus:enabled {
   --ring-width: 3px;
   --ring-color: var(--color-interactive-primary);
-}.np-form-control--size-auto {
+}
+.np-form-control--size-auto {
   font-weight: 400;
   font-weight: var(--font-weight-regular);
   font-size: 1rem;
@@ -41,12 +44,14 @@
   padding-top: var(--size-12);
   padding-bottom: 12px;
   padding-bottom: var(--size-12);
-}.np-form-control--size-sm,
+}
+.np-form-control--size-sm,
 .np-form-control--size-md,
 .np-form-control--size-lg {
   padding-top: 0 !important;
   padding-bottom: 0 !important;
-}.np-form-control--size-sm {
+}
+.np-form-control--size-sm {
   font-size: 0.875rem;
   font-size: var(--font-size-14);
   line-height: 155%;
@@ -55,12 +60,14 @@
   font-weight: var(--font-weight-regular);
   height: 32px !important;
   height: var(--size-32) !important;
-}@media (max-width: 320px) {
+}
+@media (max-width: 320px) {
   .np-form-control--size-sm {
     height: 64px !important;
     height: var(--size-64) !important;
   }
-}.np-form-control--size-md {
+}
+.np-form-control--size-md {
   font-weight: 400;
   font-weight: var(--font-weight-regular);
   font-size: 1rem;
@@ -69,12 +76,14 @@
   letter-spacing: -0.011em;
   height: 48px !important;
   height: var(--size-48) !important;
-}@media (max-width: 320px) {
+}
+@media (max-width: 320px) {
   .np-form-control--size-md {
     height: 72px !important;
     height: var(--size-72) !important;
   }
-}.np-form-control--size-lg {
+}
+.np-form-control--size-lg {
   margin: 0;
   color: #37517e;
   color: var(--color-content-primary);
@@ -91,7 +100,8 @@
   line-height: 125%;
   height: 72px !important;
   height: var(--size-72) !important;
-}@supports (hyphenate-limit-chars: 1) {
+}
+@supports (hyphenate-limit-chars: 1) {
   .np-form-control--size-lg {
     -webkit-hyphens: auto;
             hyphens: auto;
@@ -107,7 +117,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-form-control--size-lg {
     -webkit-hyphens: auto;
             hyphens: auto;
@@ -119,12 +130,14 @@
       -webkit-hyphenate-limit-before: 4;
     }
   }
-}.np-form-control--size-lg + p,
+}
+.np-form-control--size-lg + p,
 .np-form-control--size-lg + ul:not(.list-unstyled),
 .np-form-control--size-lg + ol:not(.list-unstyled) {
   margin-top: 8px;
   margin-top: var(--size-8);
-}.np-text-area {
+}
+.np-text-area {
   min-height: 72px;
   min-height: var(--size-72);
   scroll-padding-top: 8px;
@@ -134,10 +147,12 @@
   overscroll-behavior: none;
   border-radius: 10px !important;
   border-radius: var(--radius-small) !important;
-}.np-text-area::-moz-placeholder {
+}
+.np-text-area::-moz-placeholder {
   color: #768e9c;
   color: var(--color-content-tertiary);
-}.np-text-area::placeholder {
+}
+.np-text-area::placeholder {
   color: #768e9c;
   color: var(--color-content-tertiary);
 }