@transferwise/components 46.165.2 → 46.165.3

package/src/_deprecated/ActionButton/ActionButton.css

@@ -1,36 +1,25 @@
 .np-action-btn {
   display: inline-flex;
-  block-size: 32px;
   block-size: var(--size-32);
-  padding-block: 8px;
   padding-block: var(--size-8);
-  padding-inline: 12px;
   padding-inline: var(--size-12);
   transition: color, background-color 0.15s ease-in-out;
-  font-weight: 600;
   font-weight: var(--font-weight-semi-bold);
-  font-size: 0.875rem;
   font-size: var(--font-size-14);
-  line-height: 1.2;
   line-height: var(--line-height-control);
-  border-radius: 10px;
   border-radius: var(--radius-small);
   align-items: center;
   color: var(--color-interactive-control);
-  background-color: #00a2dd;
   background-color: var(--color-interactive-accent);
-  border-radius: 24px;
   border-radius: var(--radius-large);
   border: none;
 }
 @media (max-width: 320px) {
   .np-action-btn {
-    block-size: 40px;
     block-size: var(--size-40);
   }
 }
 .np-action-btn.btn-priority-2 {
-  background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
   color: var(--color-interactive-primary);
 }
@@ -39,7 +28,6 @@
   color: var(--color-interactive-primary);
 }
 .np-action-btn:not(:disabled):hover {
-  background-color: #008fc9;
   background-color: var(--color-interactive-accent-hover);
 }
 .np-action-btn:not(:disabled):hover.btn-priority-2 {
@@ -51,7 +39,6 @@
 .np-action-btn:not(:disabled):active {
   box-shadow: none;
   border-color: transparent;
-  background-color: #0081ba;
   background-color: var(--color-interactive-accent-active);
 }
 .np-action-btn:not(:disabled):active.btn-priority-2 {

package/src/_deprecated/Alert/Alert.css

@@ -2,6 +2,5 @@
   display: contents;
 }
 .alert__close {
-  min-inline-size: 48px;
   min-inline-size: var(--size-48);
 }

package/src/_deprecated/Avatar/Avatar.css

@@ -9,10 +9,8 @@
 .tw-avatar .tw-avatar__content {
   align-items: center;
   background-color: rgba(134,167,189,0.10196);
-  background-color: #86a7bd1a;
   background-color: var(--color-background-neutral);
   border-radius: 50%;
-  color: #37517e;
   color: var(--color-content-primary);
   display: flex;
   block-size: 100%;
@@ -23,12 +21,10 @@
   inline-size: 100%;
 }
 .tw-avatar--outlined {
-  border: 1px solid #00a2dd;
   border: 1px solid var(--color-interactive-accent);
   cursor: pointer;
 }
 .tw-avatar--outlined:not(.disabled):not(:disabled):hover {
-  border-color: #008fc9;
   border-color: var(--color-interactive-accent-hover);
 }
 .tw-avatar--thumbnail * {
@@ -44,12 +40,10 @@
 .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--icon {
-  color: #37517e;
   color: var(--color-content-primary);
 }
 .tw-avatar.tw-avatar--initials,
@@ -57,7 +51,6 @@
   font-family: Arial, sans-serif;
 }
 .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);
@@ -93,7 +86,6 @@
   inset-inline-start: 0;
   inset-inline-end: 0;
   inset-block-end: 0;
-  border: 1px solid rgba(0,0,0,0.10196);
   border: 1px solid var(--color-border-overlay);
   content: "";
   border-radius: 50%;
@@ -128,7 +120,6 @@
   inset-inline-start: 0;
   inset-inline-end: 0;
   inset-block-end: 0;
-  border: 1px solid rgba(0,0,0,0.10196);
   border: 1px solid var(--color-border-overlay);
   content: "";
   border-radius: 50%;
@@ -163,7 +154,6 @@
   inset-inline-start: 0;
   inset-inline-end: 0;
   inset-block-end: 0;
-  border: 1px solid rgba(0,0,0,0.10196);
   border: 1px solid var(--color-border-overlay);
   content: "";
   border-radius: 50%;
@@ -198,7 +188,6 @@
   inset-inline-start: 0;
   inset-inline-end: 0;
   inset-block-end: 0;
-  border: 1px solid rgba(0,0,0,0.10196);
   border: 1px solid var(--color-border-overlay);
   content: "";
   border-radius: 50%;
@@ -233,7 +222,6 @@
   inset-inline-start: 0;
   inset-inline-end: 0;
   inset-block-end: 0;
-  border: 1px solid rgba(0,0,0,0.10196);
   border: 1px solid var(--color-border-overlay);
   content: "";
   border-radius: 50%;

package/src/_deprecated/Badge/Badge.css

@@ -16,8 +16,6 @@
 }
 .tw-badge > .tw-badge__children {
   --badge-h-side: left;
-  -webkit-mask-image: radial-gradient(circle at top calc(100% - var(--badge-mask-offset) - var(--badge-content-position)) left calc(100% - var(--badge-mask-offset) - var(--badge-content-position)), transparent 0, transparent calc(var(--badge-size) / 2 + var(--badge-mask)), black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px));
-          mask-image: radial-gradient(circle at top calc(100% - var(--badge-mask-offset) - var(--badge-content-position)) left calc(100% - var(--badge-mask-offset) - var(--badge-content-position)), transparent 0, transparent calc(var(--badge-size) / 2 + var(--badge-mask)), black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px));
   -webkit-mask-image: radial-gradient(circle at top calc(100% - var(--badge-mask-offset) - var(--badge-content-position)) var(--badge-h-side) calc(100% - var(--badge-mask-offset) - var(--badge-content-position)), transparent 0, transparent calc(var(--badge-size) / 2 + var(--badge-mask)), black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px));
           mask-image: radial-gradient(circle at top calc(100% - var(--badge-mask-offset) - var(--badge-content-position)) var(--badge-h-side) calc(100% - var(--badge-mask-offset) - var(--badge-content-position)), transparent 0, transparent calc(var(--badge-size) / 2 + var(--badge-mask)), black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px));
 }

package/src/_deprecated/Card/Card.css

@@ -8,9 +8,7 @@
   border: 0;
 }
 .np-card--expanded {
-  background-color: #ffffff;
   background-color: var(--color-background-elevated);
-  box-shadow: 0 1px 10px rgba(0,0,0,0.10196);
   box-shadow: 0 1px 10px var(--color-border-neutral);
 }
 .np-theme-personal .np-card--expanded {
@@ -26,16 +24,13 @@
 }
 @media (min-width: 320.02px) {
   .np-card--has-icon .np-card__content {
-    padding-block: 24px;
     padding-block: var(--size-24);
-    padding-inline: 72px;
     padding-inline: var(--size-72);
   }
 }
 @media (min-width: 320.02px) {
   .np-card--has-icon .np-card__divider--expanded {
     margin-block: 0;
-    margin-inline: 72px;
     margin-inline: var(--size-72);
   }
 }
@@ -52,32 +47,25 @@
   outline-offset: var(--ring-outline-offset);
 }
 .np-card__content {
-  padding-block: 24px;
   padding-block: var(--size-24);
-  padding-inline: 16px;
   padding-inline: var(--size-16);
 }
 .np-theme-personal .np-card__content {
-  padding-block: 16px 24px;
   padding-block: var(--size-16) var(--size-24);
-  padding-inline: 16px;
   padding-inline: var(--size-16);
 }
 .np-card__divider {
   transition: margin 0.35s ease;
 }
 .np-card__divider--expanded {
-  background-color: rgba(0,0,0,0.10196);
   background-color: var(--color-border-neutral);
   block-size: 1px;
   margin-block: 0;
-  margin-inline: 16px;
   margin-inline: var(--size-16);
 }
 .np-theme-personal .np-card {
   overflow: visible;
   overflow: initial;
-  border-radius: 16px;
   border-radius: var(--radius-medium);
   /* stylelint-disable-next-line no-duplicate-selectors */
   /* stylelint-disable-next-line no-duplicate-selectors */
@@ -87,7 +75,6 @@
   margin: 0;
 }
 .np-theme-personal .np-card__button {
-  border-radius: 16px;
   border-radius: var(--radius-medium);
   --ring-outline-width: 3px;
   --ring-outline-offset: calc(-1 * var(--ring-outline-width));
@@ -100,9 +87,7 @@
   outline-offset: var(--ring-outline-offset);
 }
 .np-theme-personal .np-card--expanded .np-card__button {
-  border-start-start-radius: 16px;
   border-start-start-radius: var(--radius-medium);
-  border-start-end-radius: 16px;
   border-start-end-radius: var(--radius-medium);
   border-end-end-radius: 0;
   border-end-start-radius: 0;

package/src/_deprecated/CriticalBanner/CriticalCommsBanner.css

@@ -1,5 +1,4 @@
 .critical-comms {
-  border-radius: 16px;
   border-radius: var(--radius-medium);
   overflow: hidden;
 }
@@ -12,15 +11,12 @@
   color: var(--color-sentiment-content-primary);
 }
 .critical-comms .status-circle.negative {
-  background-color: #ffffff;
   background-color: var(--color-background-screen);
 }
 .critical-comms .status-circle.negative .status-icon {
-  color: #37517e;
   color: var(--color-content-primary);
 }
 .critical-comms .alert__message .alert__action {
-  margin-block-start: 16px;
   margin-block-start: var(--size-16);
 }
 .critical-comms .wds-Button {
@@ -57,7 +53,6 @@
   .critical-comms .alert-negative .alert__message .alert__action,
   .critical-comms .alert-neutral .alert__message .alert__action {
     margin-block-start: 0;
-    margin-inline-start: 16px;
     margin-inline-start: var(--padding-small);
   }
 }

package/src/_deprecated/NavigationOption/NavigationOption.css

@@ -14,11 +14,9 @@
   text-decoration: none;
 }
 .np-navigation-option:not(.disabled):not(:disabled):hover .tw-avatar__content {
-  background-color: #ffffff;
   background-color: var(--color-background-screen);
 }
 .np-theme-personal .np-navigation-option:not(.disabled):not(:disabled):hover .tw-avatar__content {
-  background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
 }
 .np-navigation-option .circle {
@@ -43,14 +41,11 @@
 }
 .np-navigation-option__chevron:not(.disabled):not(:disabled):hover,
 .np-navigation-option__chevron:not(.disabled):not(:disabled):focus {
-  color: #0084b3;
   color: var(--color-content-accent-hover);
 }
 .np-navigation-option__chevron:not(.disabled):not(:disabled):active {
-  color: #0077a5;
   color: var(--color-content-accent-active);
 }
 .np-theme-personal .np-option__container-aligned {
-  inline-size: calc(100% + 2 * 16px);
   inline-size: calc(100% + 2 * var(--space-content-horizontal));
 }

package/src/_deprecated/Select/Select.css

@@ -1,16 +1,10 @@
 .np-select .np-dropdown-toggle {
-  background-color: #ffffff;
   background-color: var(--color-background-screen);
-  border: 1px solid #c9cbce;
   border: 1px solid var(--color-interactive-secondary);
-  border-radius: 10px;
   border-radius: var(--radius-small);
-  color: #37517e;
   color: var(--color-content-primary);
-  font-weight: 400;
   font-weight: var(--font-weight-regular);
   overflow: hidden;
-  padding-inline-start: 16px;
   padding-inline-start: var(--size-16);
   text-align: start;
   text-overflow: ellipsis;
@@ -20,11 +14,9 @@
   outline: none;
 }
 .np-theme-personal .np-select .np-dropdown-toggle {
-  border-radius: 10px;
   border-radius: var(--radius-small);
 }
 .has-error .np-select .np-dropdown-toggle {
-  border: 1px solid #e74848;
   border: 1px solid var(--color-interactive-negative);
 }
 .np-select .np-dropdown-toggle-navy {
@@ -36,48 +28,37 @@
   --color-interactive-secondary-hover: #2e4369;
 }
 .np-select .np-dropdown-toggle.np-btn-sm {
-  padding-inline-end: 32px;
   padding-inline-end: var(--size-32);
 }
 .np-select .np-dropdown-toggle.np-btn-md {
-  padding-inline-end: 40px;
   padding-inline-end: var(--size-40);
 }
 .np-select .np-dropdown-toggle.np-btn-lg {
-  padding-inline-end: 48px;
   padding-inline-end: var(--size-48);
 }
 .np-select .np-dropdown-toggle .np-select-chevron {
   margin: 0;
   position: absolute;
-  inset-inline-end: 16px;
   inset-inline-end: var(--size-16);
-  inset-block-start: 16px;
   inset-block-start: var(--size-16);
 }
 .np-select .np-dropdown-toggle.np-btn-sm .np-select-chevron {
-  inset-inline-end: 8px;
   inset-inline-end: var(--size-8);
-  inset-block-start: 8px;
   inset-block-start: var(--size-8);
 }
 .np-select .np-dropdown-toggle.np-btn-lg .np-select-chevron {
   inset-block-start: 27px;
 }
 .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 {
-  border-color: #b5b7ba;
   border-color: var(--color-interactive-secondary-hover);
 }
 .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 {
-  border-color: #c9cbce;
   border-color: var(--color-interactive-secondary);
 }
 .np-option-content {
@@ -87,30 +68,25 @@
   max-inline-size: calc(100% - 32px);
 }
 .np-dropdown-menu-desktop {
-  max-block-size: 70svh;
   max-block-size: var(--np-panel-available-height, 70svh);
   min-inline-size: 160px;
   max-inline-size: calc(100vw - 32px);
 }
 @media (min-height: 592px) {
   .np-dropdown-menu-desktop {
-    max-block-size: 592px;
     max-block-size: var(--np-panel-available-height, 592px);
   }
 }
 .np-dropdown-menu {
-  border-radius: 10px;
   border-radius: var(--radius-small);
   overflow: auto;
   margin: 0;
   padding: 0;
   list-style: none;
   text-align: start;
-  background-color: #ffffff;
   background-color: var(--color-background-screen);
 }
 .np-theme-personal .np-dropdown-menu {
-  border-radius: 10px;
   border-radius: var(--radius-small);
 }
 .np-dropdown-menu-sm {
@@ -123,9 +99,7 @@
   inline-size: 420px;
 }
 .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 {
@@ -137,25 +111,18 @@
   text-decoration: none;
   white-space: nowrap;
   display: block;
-  padding-block: 12px;
   padding-block: var(--size-12);
-  padding-inline: 16px;
   padding-inline: var(--size-16);
   clear: both;
-  border-radius: 10px;
   border-radius: var(--radius-small);
-  color: #37517e;
   color: var(--color-content-primary);
-  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;
 }
 .np-theme-personal .np-dropdown-menu > li > a {
-  border-radius: 10px;
   border-radius: var(--radius-small);
 }
 @supports (hyphenate-limit-chars: 1) {
@@ -191,9 +158,7 @@
   border-start-start-radius: 3px;
 }
 .np-theme-personal .np-dropdown-menu > li:first-child > a {
-  border-start-end-radius: 10px;
   border-start-end-radius: var(--radius-small);
-  border-start-start-radius: 10px;
   border-start-start-radius: var(--radius-small);
 }
 .np-dropdown-menu > li:last-child > a {
@@ -201,16 +166,12 @@
   border-end-start-radius: 3px;
 }
 .np-theme-personal .np-dropdown-menu > li:last-child > a {
-  border-end-end-radius: 10px;
   border-end-end-radius: var(--radius-small);
-  border-end-start-radius: 10px;
   border-end-start-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):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 {
@@ -242,22 +203,15 @@
   block-size: 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 {
-  padding-block: 8px;
   padding-block: var(--size-8);
-  padding-inline: 16px;
   padding-inline: var(--size-16);
-  color: #5d7079;
   color: var(--color-content-secondary);
   display: block;
-  font-size: 0.875rem;
   font-size: var(--font-size-14);
-  font-weight: 400;
   font-weight: var(--font-weight-regular);
-  line-height: 1.5;
   line-height: var(--line-height-body);
   white-space: nowrap;
 }
@@ -265,14 +219,12 @@
 .np-dropdown-menu .tw-icon,
 .np-select img,
 .np-dropdown-menu img {
-  margin-inline-end: 8px;
   margin-inline-end: var(--size-8);
   display: inline-block;
   vertical-align: middle;
 }
 .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,
@@ -288,11 +240,9 @@
   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 {
-  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,

package/src/_deprecated/Summary/Summary.css

@@ -7,7 +7,6 @@
 .np-summary__title {
   margin-block-start: 2px;
   line-height: calc(22 / 16);
-  font-weight: 600;
   font-weight: var(--font-weight-semi-bold);
   justify-content: space-between;
   margin-block-start: 0;
@@ -28,7 +27,6 @@
 }
 .np-summary__icon {
   position: relative;
-  color: #37517e;
   color: var(--color-content-primary);
 }
 .np-summary__icon .np-summary-icon__done {
@@ -41,30 +39,22 @@
   background-color: transparent;
   border-radius: 50%;
   position: absolute;
-  inset-inline-end: calc(8px * -1);
   inset-inline-end: calc(var(--size-8) * -1);
   inset-block-end: -6px;
 }
 .np-summary__description {
-  margin-block-start: 4px;
   margin-block-start: var(--size-4);
-  font-size: 0.875rem;
   font-size: var(--font-size-14);
   line-height: calc(20 / 14);
-  color: #5d7079;
   color: var(--color-content-secondary);
-  padding-inline-end: calc(24px + 8px);
   padding-inline-end: calc(var(--size-24) + var(--size-8));
 }
 .np-summary__description-icon {
-  margin-block-start: 4px;
   margin-block-start: var(--size-4);
 }
 .np-summary__action {
-  margin-block-start: 4px;
   margin-block-start: var(--size-4);
 }
 .np-summary + .np-summary {
-  margin-block-start: 24px;
   margin-block-start: var(--size-24);
 }

package/src/common/BaseCard/BaseCard.css

@@ -9,13 +9,9 @@
   display: flex;
   flex-direction: column;
   align-items: stretch;
-  background-color: rgba(134,167,189,0.10196);
   background-color: var(--Card-background-color);
-  border-radius: 32px;
   border-radius: var(--Card-border-radius);
-  gap: 16px;
   gap: var(--Card-flex-gap);
-  padding: 24px;
   padding: var(--Card-padding);
   position: relative;
   box-sizing: border-box;

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