@transferwise/components 46.165.2 → 46.165.3

package/build/styles/common/BottomSheet/BottomSheet.css

@@ -6,7 +6,6 @@
 }
 .np-bottom-sheet--top-bar {
   cursor: grab;
-  padding-block: 8px calc(16px + 4px);
   padding-block: var(--size-8) calc(var(--size-16) + var(--size-4));
   padding-inline: 0;
   display: flex;
@@ -24,20 +23,16 @@
 .np-bottom-sheet--handler {
   inline-size: 40px;
   block-size: 4px;
-  background: #c9cbce;
   background: var(--color-interactive-secondary);
-  border-radius: 10px;
   border-radius: var(--radius-small);
 }
 .np-bottom-sheet--close-btn {
   position: absolute;
-  inset-inline-end: 8px;
   inset-inline-end: var(--size-8);
 }
 .np-bottom-sheet--content {
   overflow-y: auto;
   padding-block: 0;
-  padding-inline: 16px;
   padding-inline: var(--space-content-horizontal);
   padding-block-end: env(safe-area-inset-bottom);
 }
@@ -45,21 +40,15 @@
   box-shadow: 0 4px 40px rgba(69, 71, 69, 0.2);
 }
 .np-theme-personal .np-bottom-sheet {
-  border-start-start-radius: 32px;
   border-start-start-radius: var(--radius-xlarge, 32px);
-  border-start-end-radius: 32px;
   border-start-end-radius: var(--radius-xlarge, 32px);
   border-end-end-radius: 0;
   border-end-start-radius: 0;
   margin-block: 0px;
-  margin-inline: 8px;
   margin-inline: var(--size-8);
-  inline-size: calc(100% - 16px) !important;
   inline-size: calc(100% - var(--size-16)) !important;
 }
 .np-theme-personal .np-bottom-sheet--content {
-  padding-block: 0 16px;
   padding-block: 0 var(--size-16);
-  padding-inline: 16px;
   padding-inline: var(--size-16);
 }

package/build/styles/common/Circle/Circle.css

@@ -1,5 +1,4 @@
 .np-circle {
-  border-radius: 9999px;
   border-radius: var(--radius-full);
   inline-size: var(--circle-size);
   block-size: var(--circle-size);
@@ -7,7 +6,6 @@
   --circle-border-color: var(--color-border-neutral);
   --circle-border-width: 1px;
   font-size: var(--circle-font-size);
-  font-weight: 600;
   font-weight: var(--font-weight-semi-bold);
   line-height: 1;
 }
@@ -20,7 +18,6 @@
 }
 .np-circle img,
 .np-circle .wds-flag {
-  border-radius: 9999px;
   border-radius: var(--radius-full);
   inline-size: 100%;
   block-size: 100%;
@@ -37,7 +34,6 @@
   inset-inline-start: 0;
   inline-size: 100%;
   block-size: 100%;
-  border-radius: 9999px;
   border-radius: var(--radius-full);
   box-shadow: inset 0 0 0 var(--circle-border-width) var(--circle-border-color);
 }

package/build/styles/common/CloseButton/CloseButton.css

@@ -1,86 +1,65 @@
 .np-close-button {
   transition: color 0.15s ease-in-out;
-  color: #00a2dd;
   color: var(--color-interactive-accent);
   border: none;
   background: none;
   padding: 0;
-  block-size: 16px;
   block-size: var(--size-16);
   --ring-outline-offset: 0;
 }
 .np-close-button--large,
 .np-close-button--x-large {
-  block-size: 24px;
   block-size: var(--size-24);
 }
 .np-close-button:hover {
-  color: #008fc9;
   color: var(--color-interactive-accent-hover);
 }
 .np-theme-personal .np-close-button {
   color: var(--color-interactive-primary);
-  block-size: 32px;
   block-size: var(--size-32);
-  inline-size: 32px;
   inline-size: var(--size-32);
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  border-radius: 9999px;
   border-radius: var(--radius-full);
   transition: background-color 0.1s ease;
 }
 @media (max-width: 320px) {
   .np-theme-personal .np-close-button {
-    block-size: 64px;
     block-size: var(--size-64);
-    inline-size: 64px;
     inline-size: var(--size-64);
   }
 }
 .np-theme-personal .np-close-button--x-small {
-  block-size: 24px;
   block-size: var(--size-24);
-  inline-size: 24px;
   inline-size: var(--size-24);
   flex-shrink: 0;
 }
 @media (max-width: 320px) {
   .np-theme-personal .np-close-button--x-small {
-    block-size: 48px;
     block-size: var(--size-48);
-    inline-size: 48px;
     inline-size: var(--size-48);
   }
 }
 .np-theme-personal .np-close-button--large {
-  block-size: 40px;
   block-size: var(--size-40);
-  inline-size: 40px;
   inline-size: var(--size-40);
   flex-shrink: 0;
 }
 @media (max-width: 320px) {
   .np-theme-personal .np-close-button--large {
-    block-size: 80px;
     block-size: var(--size-80);
-    inline-size: 80px;
     inline-size: var(--size-80);
   }
 }
 .np-theme-personal .np-close-button--x-large {
-  block-size: 48px;
   block-size: var(--size-48);
-  inline-size: 48px;
   inline-size: var(--size-48);
   flex-shrink: 0;
 }
 @media (max-width: 320px) {
   .np-theme-personal .np-close-button--x-large {
-    block-size: 96px;
     block-size: var(--size-96);
-    inline-size: 96px;
     inline-size: var(--size-96);
   }
 }

package/build/styles/common/Option/Option.css

@@ -1,6 +1,5 @@
 .np-option:has(:focus-visible) {
   outline: var(--ring-outline-color) solid var(--ring-outline-width);
-  outline-offset: 0;
   outline-offset: var(--ring-outline-offset);
   --ring-outline-offset: 0;
 }
@@ -8,30 +7,21 @@
   outline: none;
 }
 .np-option .circle-sm {
-  inline-size: 40px;
   inline-size: var(--size-40);
-  block-size: 40px;
   block-size: var(--size-40);
 }
 .np-option__title {
-  color: #37517e;
   color: var(--color-content-primary);
   font-size: 1rem;
-  font-weight: 600;
   font-weight: var(--font-weight-semi-bold);
   letter-spacing: 0;
-  line-height: 1.5;
   line-height: var(--line-height-body);
   margin: 0;
 }
 .np-option__body {
-  margin-block-start: 4px;
   margin-block-start: var(--size-4);
-  color: #5d7079;
   color: var(--color-content-secondary);
-  font-size: 0.875rem;
   font-size: var(--font-size-14);
-  font-weight: 400;
   font-weight: var(--font-weight-regular);
   line-height: 1.42857;
 }
@@ -39,9 +29,7 @@
   display: block;
 }
 .np-option__no-media-circle {
-  min-inline-size: 48px;
   min-inline-size: var(--size-48);
-  max-inline-size: 64px;
   max-inline-size: var(--size-64);
   display: flex;
   justify-content: center;
@@ -58,58 +46,44 @@ button.np-option {
   overflow: visible;
 }
 .np-theme-personal .np-option .circle-sm {
-  inline-size: 48px;
   inline-size: var(--size-48);
-  block-size: 48px;
   block-size: var(--size-48);
-  line-height: 48px;
   line-height: var(--size-48);
 }
 @media (max-width: 320px) {
   .np-theme-personal .np-option .circle-sm {
-    inline-size: 96px;
     inline-size: var(--size-96);
-    block-size: 96px;
     block-size: var(--size-96);
-    line-height: 96px;
     line-height: var(--size-96);
   }
 }
 .np-theme-personal .np-option__body {
-  margin-block: 4px 0;
   margin-block: var(--size-4) 0;
   margin-inline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 .np-theme-personal .np-option__container-aligned {
-  margin-inline-end: calc(-1 * 16px);
   margin-inline-end: calc(-1 * var(--space-content-horizontal));
-  margin-inline-start: calc(-1 * 16px);
   margin-inline-start: calc(-1 * var(--space-content-horizontal));
   max-inline-size: none;
   inline-size: auto;
 }
 @media (min-width: 600px) {
   .np-theme-personal .np-option {
-    border-radius: 10px;
     border-radius: var(--radius-small);
   }
 }
 .np-theme-personal .np-option-additional-content {
-  margin-inline-start: 80px;
   margin-inline-start: var(--size-80);
-  margin-inline-end: 16px;
   margin-inline-end: var(--size-16);
   margin-block-start: -10px;
-  padding-block-end: 16px;
   padding-block-end: var(--size-16);
   max-inline-size: -moz-fit-content;
   max-inline-size: fit-content;
 }
 @media (max-width: 320px) {
   .np-theme-personal :not(.np-option__sm-media) > .np-option-additional-content {
-    margin-inline-start: 16px;
     margin-inline-start: var(--size-16);
   }
   .np-theme-personal .np-option-additional-content {

package/build/styles/common/Panel/Panel.css

@@ -1,15 +1,12 @@
 .np-panel__content {
   opacity: 0;
   visibility: hidden;
-  background-color: #ffffff;
   background-color: var(--color-background-elevated);
-  border-radius: 10px;
   border-radius: var(--radius-small);
   box-shadow: 0 0 40px rgba(69, 71, 69, 0.2);
   transition: opacity 0.2s cubic-bezier(0.6, 0.2, 0.1, 1), transform 0.2s cubic-bezier(0.6, 0.2, 0.1, 1), visibility 0s linear 0.2s;
 }
 .np-theme-personal .np-panel__content {
-  border-radius: 10px;
   border-radius: var(--radius-small);
 }
 .np-theme-personal--forest-green .np-panel__content,
@@ -33,7 +30,6 @@
   inset-inline-start: 0;
   content: "";
   transform: rotate(45deg);
-  background: #ffffff;
   background: var(--color-background-elevated);
 }
 .np-panel[data-popper-placement^="top"] > .np-panel__content {
@@ -69,13 +65,11 @@
   inset-inline-start: -7px;
 }
 .np-theme-personal .np-panel__content {
-  border-radius: 16px;
   border-radius: var(--radius-medium);
   box-shadow: 0 0 40px rgba(69, 71, 69, 0.2);
 }
 .np-theme-personal--forest-green .np-dropdown-menu,
 .np-theme-personal--bright-green .np-dropdown-menu,
 .np-theme-personal--dark .np-dropdown-menu {
-  background-color: #ffffff;
   background-color: var(--color-background-elevated);
 }

package/build/styles/common/RadioButton/RadioButton.css

@@ -1,4 +1,3 @@
 .radio:hover {
-  border-color: rgba(0,0,0,0.10196);
   border-color: var(--color-border-neutral);
 }

package/build/styles/css/accordion.css

@@ -30,7 +30,6 @@
   transform: rotate(270deg) !important;
 }
 .chevron-color {
-  color: #0097c7;
   color: var(--color-content-accent);
 }
 .np-theme-personal .chevron-color {
@@ -48,21 +47,16 @@
 .decision:not(.np-option):focus-visible,
 .decision:not(.np-option):has(:focus-visible) {
   outline: var(--ring-outline-color) solid var(--ring-outline-width);
-  outline-offset: 0;
   outline-offset: var(--ring-outline-offset);
   --ring-outline-offset: 0;
 }
 .decision__title {
   margin: 0;
-  color: #37517e;
   color: var(--color-content-primary);
-  line-height: 1.2;
   line-height: var(--line-height-title);
   letter-spacing: 0;
   word-wrap: break-word;
-  font-size: 1.125rem;
   font-size: var(--font-size-18);
-  font-weight: 600;
   font-weight: var(--font-weight-semi-bold);
   letter-spacing: -0.014em;
   line-height: 135%;
@@ -98,18 +92,14 @@
 .decision__title + p,
 .decision__title + ul:not(.list-unstyled),
 .decision__title + ol:not(.list-unstyled) {
-  margin-block-start: 8px;
   margin-block-start: var(--size-8);
 }
 .decision__content {
-  font-size: 0.875rem;
   font-size: var(--font-size-14);
   line-height: 155%;
   letter-spacing: -0.006em;
-  font-weight: 400;
   font-weight: var(--font-weight-regular);
   word-wrap: break-word;
-  margin-block-start: 4px;
   margin-block-start: var(--size-4);
 }
 @supports (hyphenate-limit-chars: 1) {
@@ -147,20 +137,16 @@
   margin-block-end: 0;
 }
 .decision dl {
-  margin-block-start: 8px;
   margin-block-start: var(--size-8);
 }
 .decision .media,
 .decision.media {
   inline-size: 100%;
-  padding-block: 16px;
   padding-block: var(--size-16);
-  padding-inline: 12px;
   padding-inline: var(--size-12);
 }
 .np-theme-personal .decision .media,
 .np-theme-personal .decision.media {
-  padding: 16px;
   padding: var(--size-16);
 }
 .decision .media .media-left,
@@ -169,7 +155,6 @@
 }
 .decision .media .media-body,
 .decision.media .media-body {
-  color: #5d7079;
   color: var(--color-content-secondary);
 }
 @media (min-width: 320.02px) {
@@ -182,16 +167,13 @@
   background-color: rgba(134,167,189,0.07059);
 }
 .decision:not(.disabled):hover .circle-inverse {
-  background-color: #ffffff;
   background-color: var(--color-background-screen);
 }
 .np-theme-personal .decision:not(.disabled):hover .circle-inverse {
-  background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
 }
 .decision:not(.disabled):hover .tw-checkbox-button,
 .decision:not(.disabled):hover .tw-radio-button {
-  border-color: #00a2dd;
   border-color: var(--color-interactive-accent);
 }
 .np-theme-personal .decision:not(.disabled):hover .tw-checkbox-button,
@@ -226,17 +208,14 @@
 }
 /* Alignment */
 .media-right {
-  padding-inline-start: 16px;
   padding-inline-start: var(--size-16);
 }
 .media-left {
-  padding-inline-end: 16px;
   padding-inline-end: var(--size-16);
 }
 @media (max-width: 320px) {
   .media-right,
   .media-left {
-    padding-inline-start: 32px;
     padding-inline-start: var(--size-32);
   }
 }
@@ -261,6 +240,5 @@
   vertical-align: middle;
 }
 .accordion-item.decision:not(.disabled):hover {
-  background-color: #ffffff;
   background-color: var(--color-background-elevated);
 }

package/build/styles/css/alerts.css

@@ -2,21 +2,15 @@
  * DEPRECATED: use <InfoPrompt /> component instead
  */
 .alert {
-  padding: 16px;
   padding: var(--size-16);
   border-radius: 10px;
-  color: #37517e;
   color: var(--color-content-primary);
-  background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
   min-inline-size: 200px;
-  margin-block-end: 16px;
   margin-block-end: var(--size-16);
 }
 .np-theme-personal .alert {
-  padding: 24px;
   padding: var(--padding-medium);
-  border-radius: 16px;
   border-radius: var(--radius-medium);
 }
 .np-theme-personal .alert .alert__message {
@@ -27,25 +21,19 @@
   justify-content: center;
 }
 .np-theme-personal .alert .alert__message .alert__action {
-  margin-block-start: 8px;
   margin-block-start: var(--size-8);
 }
 .alert .alert__icon {
-  inline-size: 32px;
   inline-size: var(--size-32);
-  block-size: 32px;
   block-size: var(--size-32);
   border-radius: 50%;
   flex: none;
 }
 .alert .close {
-  margin-block-start: 4px;
   margin-block-start: var(--size-4);
 }
 .np-theme-personal .alert .close {
-  margin-block-start: calc(8px * -1);
   margin-block-start: calc(var(--size-8) * -1);
-  margin-inline-end: calc(8px * -1);
   margin-inline-end: calc(var(--size-8) * -1);
 }
 .alert p,
@@ -53,7 +41,6 @@
   margin-block-end: 0;
 }
 .alert p + p {
-  margin-block-start: 8px;
   margin-block-start: var(--padding-x-small);
 }
 .arrow {
@@ -94,7 +81,6 @@
   inset-block-end: -5px;
 }
 .alert-detach.arrow {
-  border-radius: 10px;
   border-radius: var(--radius-small);
 }
 .form-group .alert {
@@ -102,7 +88,6 @@
   padding-inline: 16px;
   margin-block-start: -2px;
   border-style: solid;
-  border-color: rgba(0,0,0,0.10196);
   border-color: var(--color-border-neutral);
   border-block-width: 0 1px;
   border-inline-width: 1px;
@@ -150,9 +135,7 @@
 .form-group .checkbox ~ .alert,
 .form-group .alert-detach {
   border-width: 0;
-  margin-block-start: 12px;
   margin-block-start: var(--size-12);
-  border-radius: 10px;
   border-radius: var(--radius-small);
 }
 .form-group .alert-focus,
@@ -164,9 +147,7 @@
 }
 .alert-success,
 .alert-positive {
-  background-color: rgba(54,199,151,0.10196);
   background-color: var(--color-background-positive);
-  color: #008026;
   color: var(--color-content-positive);
 }
 .alert-success a,
@@ -181,7 +162,6 @@
 .alert-positive .alert-link,
 .alert-success .icon,
 .alert-positive .icon {
-  color: #008026;
   color: var(--color-content-positive);
 }
 .alert-success a:hover,
@@ -196,7 +176,6 @@
 .alert-positive .close:hover,
 .alert-success .close:focus,
 .alert-positive .close:focus {
-  color: #006d13;
   color: var(--color-content-positive-hover);
 }
 .bg-primary .alert-success,
@@ -234,9 +213,7 @@
 }
 .alert-info,
 .alert-neutral {
-  background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
-  color: #37517e;
   color: var(--color-content-primary);
 }
 .alert-info a,
@@ -251,7 +228,6 @@
 .alert-neutral .alert-link,
 .alert-info .icon,
 .alert-neutral .icon {
-  color: #37517e;
   color: var(--color-content-primary);
 }
 .alert-info a:hover,
@@ -266,7 +242,6 @@
 .alert-neutral .close:hover,
 .alert-info .close:focus,
 .alert-neutral .close:focus {
-  color: #37517e;
   color: var(--color-content-primary);
 }
 .bg-primary .alert-info,
@@ -303,9 +278,7 @@
   color: #ffffff;
 }
 .alert-warning {
-  background-color: rgba(255,172,0,0.10196);
   background-color: var(--color-background-warning);
-  color: #9a6500;
   color: var(--color-content-warning);
 }
 .alert-warning a,
@@ -314,7 +287,6 @@
 .alert-warning .close,
 .alert-warning .alert-link,
 .alert-warning .icon {
-  color: #9a6500;
   color: var(--color-content-warning);
 }
 .alert-warning a:hover,
@@ -323,7 +295,6 @@
 .alert-warning .alert-link:focus,
 .alert-warning .close:hover,
 .alert-warning .close:focus {
-  color: #855400;
   color: var(--color-content-warning-hover);
 }
 .bg-primary .alert-warning {
@@ -348,9 +319,7 @@
 }
 .alert-danger,
 .alert-negative {
-  background-color: rgba(255,135,135,0.10196);
   background-color: var(--color-background-negative);
-  color: #cf2929;
   color: var(--color-content-negative);
 }
 .alert-danger a,
@@ -365,7 +334,6 @@
 .alert-negative .alert-link,
 .alert-danger .icon,
 .alert-negative .icon {
-  color: #cf2929;
   color: var(--color-content-negative);
 }
 .alert-danger a:hover,
@@ -380,7 +348,6 @@
 .alert-negative .close:hover,
 .alert-danger .close:focus,
 .alert-negative .close:focus {
-  color: #b80419;
   color: var(--color-content-negative-hover);
 }
 .bg-primary .alert-danger,
@@ -420,7 +387,6 @@
 input:focus ~ .alert-focus,
 .btn:focus ~ .alert-focus {
   display: block;
-  border-color: #00a2dd;
   border-color: var(--color-interactive-accent);
 }
 .focus .alert-focus,
@@ -455,13 +421,11 @@ input:focus ~ .alert-focus,
   display: none !important;
 }
 .np-theme-personal .alert {
-  padding: 16px;
   padding: var(--size-16);
   flex-direction: row;
 }
 .np-theme-personal .alert .alert__message {
   padding-block-start: 0;
-  padding-inline-start: 16px;
   padding-inline-start: var(--padding-small);
 }
 .np-theme-personal .alert-success,
@@ -478,9 +442,7 @@ input:focus ~ .alert-focus,
 .bg-primary .np-theme-personal .alert-warning,
 .bg-primary .np-theme-personal .alert-danger,
 .bg-primary .np-theme-personal .alert-negative {
-  background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
-  color: #5d7079;
   color: var(--color-content-secondary);
 }
 .np-theme-personal .alert-success a,
@@ -567,7 +529,6 @@ input:focus ~ .alert-focus,
 .bg-primary .np-theme-personal .alert-warning .icon,
 .bg-primary .np-theme-personal .alert-danger .icon,
 .bg-primary .np-theme-personal .alert-negative .icon {
-  color: #5d7079;
   color: var(--color-content-secondary);
 }
 .np-theme-personal .alert-success a:hover,

package/build/styles/css/background.css

@@ -14,7 +14,6 @@
   color: #daffc0;
 }
 .bg--light {
-  background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
   background-image: url("styles/img/bg-light.svg");
 }

package/build/styles/css/badge.css

@@ -1,33 +1,24 @@
 .badge {
   display: inline-block;
-  min-inline-size: 16px;
   min-inline-size: var(--size-16);
   padding-block: 5px;
-  padding-inline: 8px;
   padding-inline: var(--size-8);
   font-size: 10px;
-  font-weight: 600;
   font-weight: var(--font-weight-semi-bold);
   color: #fff;
-  line-height: 1.2;
   line-height: var(--line-height-control);
   vertical-align: middle;
   white-space: nowrap;
   text-align: center;
-  background-color: #e74848;
   background-color: var(--color-interactive-negative);
-  border-radius: 16px;
   border-radius: var(--radius-medium);
   inset-block-start: -1px;
   position: relative;
 }
 .np-theme-personal .badge {
   display: inline-block;
-  min-inline-size: 16px;
   min-inline-size: var(--size-16);
-  padding-block: 4px;
   padding-block: var(--size-4);
-  padding-inline: 8px;
   padding-inline: var(--size-8);
   color: #fff;
   vertical-align: middle;
@@ -35,9 +26,7 @@
   text-align: center;
   line-height: normal;
   line-height: initial;
-  background-color: #e74848;
   background-color: var(--color-interactive-negative);
-  border-radius: 16px;
   border-radius: var(--radius-medium);
   position: relative;
   inset-block-start: 0;
@@ -72,7 +61,6 @@ a.badge:focus {
   margin-inline-start: 19px;
 }
 .badge-success {
-  background: #2ead4b;
   background: var(--color-interactive-positive);
 }
 .np-theme-personal .badge-success {