@transferwise/components 46.165.2 → 46.165.4

package/src/PocketSurface/PocketSurface.css

@@ -148,8 +148,6 @@
 }
 
 .wds-pocket-surface {
-  background-color: #ffffff;
   background-color: var(--color-background-screen);
-  color: #5d7079;
   color: var(--color-content-secondary);
 }

package/src/Popover/Popover.css

@@ -1,39 +1,29 @@
 .np-theme-personal .np-popover__container {
-  border-radius: 16px;
   border-radius: var(--radius-medium);
 }
 .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 {
   margin-block-end: 0;
 }
 .np-popover__container.np-panel .np-popover__content {
-  padding-block: 16px;
   padding-block: var(--size-16);
-  padding-inline: 24px;
   padding-inline: var(--size-24);
   max-inline-size: 276px;
 }
 .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 {
   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;
   margin-block-end: initial;
-  font-weight: 600;
   font-weight: var(--font-weight-semi-bold);
-  font-size: 1.625rem;
   font-size: var(--font-size-26);
   letter-spacing: -0.02em;
   line-height: 122%;
@@ -69,12 +59,9 @@
 .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-block-start: 8px;
   margin-block-start: var(--size-8);
 }
 .np-popover__container.np-bottom-sheet .np-popover__content {
-  padding-block: 32px;
   padding-block: var(--size-32);
-  padding-inline: 24px;
   padding-inline: var(--size-24);
 }

package/src/Progress/Progress.css

@@ -1,29 +1,21 @@
 .np-progress {
-  border-radius: 10px;
   border-radius: var(--radius-small);
   inline-size: 100%;
-  block-size: 8px;
   block-size: var(--size-8);
 }
 .np-progress::-webkit-progress-bar {
-  background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
-  border-radius: 10px;
   border-radius: var(--radius-small);
 }
 .np-progress::-webkit-progress-value {
-  background-color: #0097c7;
   background-color: var(--color-content-accent);
-  border-radius: 10px;
   border-radius: var(--radius-small);
 }
 .np-theme-personal .np-progress::-webkit-progress-value {
   background-color: var(--color-interactive-primary);
 }
 .np-progress::-moz-progress-bar {
-  background-color: #0097c7;
   background-color: var(--color-content-accent);
-  border-radius: 10px;
   border-radius: var(--radius-small);
 }
 .np-theme-personal .np-progress::-moz-progress-bar {

package/src/ProgressBar/ProgressBar.css

@@ -1,14 +1,9 @@
 .np-progress-bar__title .h4 {
-  color: #37517e;
   color: var(--color-content-primary);
-  margin-block-end: 4px;
   margin-block-end: var(--size-4);
 }
 .np-progress-bar p {
-  color: #37517e;
   color: var(--color-content-primary);
-  margin-block-start: 4px;
   margin-block-start: var(--size-4);
-  font-weight: 600;
   font-weight: var(--font-weight-semi-bold);
 }

package/src/PromoCard/PromoCard.css

@@ -21,24 +21,18 @@
   margin-inline: auto;
   inline-size: 100%;
   block-size: auto;
-  inline-size: calc(100% + 48px);
   inline-size: calc(100% + var(--size-48));
-  inset-inline-start: calc(24px * -1);
   inset-inline-start: calc(var(--size-24) * -1);
   position: relative;
 }
 .np-Card-description {
-  color: #5d7079;
   color: var(--color-content-secondary);
 }
 .np-Card-indicator {
   position: absolute;
-  inset-inline-end: 8px;
   inset-inline-end: var(--size-8);
-  inset-block-end: 8px;
   inset-block-end: var(--size-8);
   display: flex;
-  gap: 4px;
   gap: var(--size-4);
 }
 .np-Card-indicatorText {
@@ -46,7 +40,6 @@
   vertical-align: middle;
   text-align: start;
   background: var(--Card-indicator-text-background-color);
-  padding: 16px;
   padding: var(--size-16);
   border-radius: 100px;
 }
@@ -98,9 +91,7 @@
 .np-Card--checked:focus-visible:not(.is-disabled):not(:disabled),
 .np-Card--link:focus-visible:not(.is-disabled):not(:disabled) {
   --Card-image-scale: 1.1;
-  outline: var(--ring-outline-color) solid 4px;
   outline: var(--ring-outline-color) solid var(--size-4);
-  outline-offset: 4px;
   outline-offset: var(--size-4);
   box-shadow: var(--Card-box-shadow);
 }
@@ -109,7 +100,6 @@
   outline: none;
 }
 .np-Card--link .np-Card-titleLink {
-  color: #37517e;
   color: var(--color-content-primary);
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -128,23 +118,17 @@
   z-index: 10;
 }
 .np-Card--checked.is-checked {
-  box-shadow: 0 0 0 4px var(--color-interactive-primary);
   box-shadow: 0 0 0 var(--size-4) var(--color-interactive-primary);
 }
 .np-Card--checked.is-checked .np-Card-check {
   color: var(--Card-check-color);
   background: var(--Card-check-background-color);
-  border-radius: 9999px;
   border-radius: var(--radius-full);
   display: flex;
-  block-size: 40px;
   block-size: var(--size-40);
   position: absolute;
-  inset-inline-end: 8px;
   inset-inline-end: var(--size-8);
-  inset-block-start: 8px;
   inset-block-start: var(--size-8);
-  inline-size: 40px;
   inline-size: var(--size-40);
   justify-content: center;
   align-items: center;
@@ -155,7 +139,6 @@
 .np-CardGroup {
   display: flex;
   flex-direction: column;
-  gap: 24px;
   gap: var(--size-24);
   inline-size: 100%;
 }

package/src/Prompt/ActionPrompt/ActionPrompt.css

@@ -6,9 +6,7 @@
   --Prompt-border-radius: var(--radius-large);
 }
 .wds-action-prompt--media-image {
-  inline-size: 48px;
   inline-size: var(--size-48);
-  block-size: 48px;
   block-size: var(--size-48);
   -o-object-fit: contain;
      object-fit: contain;
@@ -26,6 +24,5 @@
   }
 }
 .wds-action-prompt__content {
-  max-inline-size: calc(48px * 10);
   max-inline-size: calc(var(--size-48) * 10);
 }

package/src/Prompt/CriticalBanner/CriticalBanner.css

@@ -19,9 +19,7 @@
   background: var(--critical-banner-background);
 }
 .wds-critical-banner--media-image {
-  inline-size: 48px;
   inline-size: var(--size-48);
-  block-size: 48px;
   block-size: var(--size-48);
   -o-object-fit: contain;
      object-fit: contain;
@@ -139,7 +137,6 @@
           )
           100% 0 / var(--critical-banner-mobile-overhang-size)
           var(--critical-banner-mobile-overhang-size) no-repeat;
-    margin-block-end: 32px;
     margin-block-end: var(--critical-banner-mobile-overhang-size);
   }
   .wds-critical-banner-overhang-query .wds-critical-banner-overhang::after {

package/src/Prompt/InfoPrompt/InfoPrompt.css

@@ -8,7 +8,6 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
-  max-inline-size: calc(48px * 10);
   max-inline-size: calc(var(--size-48) * 10);
 }
 .wds-info-prompt__content:has(.wds-info-prompt__title) {
@@ -24,9 +23,7 @@
   margin-block-start: var(--Prompt-gap);
 }
 .wds-info-prompt__media svg {
-  inline-size: 24px;
   inline-size: var(--size-24);
-  block-size: 24px;
   block-size: var(--size-24);
 }
 .wds-info-prompt .wds-prompt__media-wrapper {
@@ -34,25 +31,21 @@
 }
 @media (max-width: 320px) {
   .wds-info-prompt .wds-prompt__media-wrapper {
-    padding-block-start: 4px;
     padding-block-start: var(--size-4);
   }
 }
 @media (max-width: 320px) {
   .wds-info-prompt .wds-prompt__media-wrapper:has(.wds-info-prompt__media > .tw-icon) {
-    padding-block-start: 8px;
     padding-block-start: var(--size-8);
   }
 }
 @media (max-width: 320px) {
   .wds-info-prompt .wds-prompt__media-wrapper:has(+ .wds-info-prompt__content .wds-info-prompt__title:first-child) {
-    padding-block-start: 8px;
     padding-block-start: var(--size-8);
   }
 }
 @media (max-width: 320px) {
   .wds-info-prompt .wds-prompt__media-wrapper:has(+ .wds-info-prompt__content .wds-info-prompt__title:first-child):has(.wds-info-prompt__media > .tw-icon) {
-    padding-block-start: 12px;
     padding-block-start: var(--size-12);
   }
 }

package/src/Prompt/InlinePrompt/InlinePrompt.css

@@ -3,7 +3,6 @@
   --Prompt-padding-x: var(--padding-x-small);
   --Prompt-padding-y: calc(var(--padding-x-small) / 2);
   display: inline-flex;
-  border-radius: 10px;
   border-radius: var(--radius-small);
 }
 .wds-inline-prompt:has(a),
@@ -29,7 +28,6 @@
 .wds-inline-prompt a,
 .wds-inline-prompt button {
   color: var(--color-sentiment-content-primary);
-  text-underline-offset: calc(4px / 2);
   text-underline-offset: calc(var(--size-4) / 2);
 }
 .wds-inline-prompt a:hover,
@@ -47,9 +45,7 @@
   inset: 0;
 }
 .wds-inline-prompt .wds-inline-prompt-process-indicator {
-  inline-size: 16px;
   inline-size: var(--size-16);
-  block-size: 16px;
   block-size: var(--size-16);
 }
 .wds-inline-prompt .wds-inline-prompt-process-indicator .process-circle {

package/src/Prompt/PrimitivePrompt/PrimitivePrompt.css

@@ -1,13 +1,9 @@
 .wds-prompt {
-  border-radius: 10px;
   border-radius: var(--Prompt-border-radius, var(--radius-small));
   display: flex;
-  gap: 16px;
   gap: var(--Prompt-gap, var(--size-16));
   word-wrap: break-word;
-  padding-block: 8px;
   padding-block: var(--Prompt-padding-y, var(--padding-x-small));
-  padding-inline: 8px;
   padding-inline: var(--Prompt-padding-x, var(--padding-x-small));
   text-align: start;
   word-break: break-word;
@@ -15,9 +11,7 @@
 }
 .wds-prompt__content-wrapper {
   display: grid;
-  grid-gap: 16px;
   grid-gap: var(--Prompt-gap, var(--size-16));
-  gap: 16px;
   gap: var(--Prompt-gap, var(--size-16));
   grid-template-columns: auto 1fr;
   inline-size: 100%;
@@ -27,7 +21,6 @@
 }
 .wds-prompt__media-wrapper {
   align-self: flex-start;
-  padding-block-start: calc(4px - 1px);
   padding-block-start: calc(var(--size-4) - 1px);
 }
 .wds-prompt__media-wrapper .tw-icon-tags,
@@ -37,7 +30,6 @@
 .wds-prompt__actions-wrapper {
   display: flex;
   flex-wrap: wrap;
-  gap: 8px;
   gap: var(--Prompt-actions-gap, var(--size-8));
   grid-column-start: 2;
   grid-column-end: 3;
@@ -59,12 +51,8 @@
   --offset: calc(-1 * var(--Prompt-padding-x, var(--padding-x-small)));
   content: "";
   position: absolute;
-  inset: calc(-1 * 8px);
   inset: var(--offset);
-  inline-size: calc(24px + 8px * 2);
   inline-size: var(--size);
-  block-size: calc(24px + 8px * 2);
   block-size: var(--size);
-  border-radius: 10px;
   border-radius: var(--Prompt-border-radius, var(--radius-small));
 }

package/src/Section/Section.css

@@ -1,10 +1,7 @@
 .np-section {
-  margin-block-start: 32px;
   margin-block-start: var(--size-32);
 }
 .np-section--with-horizontal-padding {
-  padding-inline-end: 16px;
   padding-inline-end: var(--space-content-horizontal);
-  padding-inline-start: 16px;
   padding-inline-start: var(--space-content-horizontal);
 }

package/src/SegmentedControl/SegmentedControl.css

@@ -6,14 +6,11 @@
 .segmented-control__segments {
   display: inline-flex;
   position: relative;
-  padding: 4px;
   padding: var(--size-4);
   inline-size: 100%;
   justify-content: center;
   align-items: center;
-  background: rgba(134,167,189,0.10196);
   background: var(--color-background-neutral);
-  border-radius: 24px;
   border-radius: var(--size-24);
   transition: outline 300ms;
   outline: 2px solid transparent;
@@ -25,15 +22,11 @@
   content: "";
   position: absolute;
   inline-size: var(--segment-highlight-width);
-  inset-block-start: 4px;
   inset-block-start: var(--size-4);
-  inset-block-end: 4px;
   inset-block-end: var(--size-4);
   inset-inline-start: var(--segment-highlight-x);
   z-index: 0;
-  background: #ffffff;
   background: var(--color-background-screen);
-  border-radius: 24px;
   border-radius: var(--size-24);
   transition: left 300ms,
     right 300ms;
@@ -45,19 +38,15 @@
   position: relative;
   flex: 1 1 100%;
   flex-flow: column;
-  padding-block: 8px;
   padding-block: var(--size-8);
-  padding-inline: 16px;
   padding-inline: var(--size-16);
   margin-block: 0 0;
-  margin-inline: 4px 0;
   margin-inline: var(--size-4) 0;
   min-inline-size: 0;
   line-height: inherit;
   align-items: center;
   text-align: center;
   vertical-align: middle;
-  border-radius: 24px;
   border-radius: var(--size-24);
   z-index: 1;
   cursor: pointer;
@@ -68,7 +57,6 @@
   margin-inline-start: 0;
 }
 .segmented-control__segment:hover {
-  background: rgba(0,0,0,0.10196);
   background: var(--color-background-overlay);
 }
 .segmented-control__radio-input {

package/src/SlidingPanel/SlidingPanel.css

@@ -1,7 +1,6 @@
 .sliding-panel {
   transform: translateX(-100%)  ;
   transition: transform cubic-bezier(0, 0.94, 0.62, 1) 350ms;
-  background: #ffffff;
   background: var(--color-background-elevated);
   z-index: 1030;
   position: absolute;
@@ -66,26 +65,20 @@
   box-shadow: inset -1px 0 0 0 #e2e6e8;
 }
 .np-theme-personal .sliding-panel.sliding-panel--border-top {
-  box-shadow: inset 0 -1px 0 0 rgba(0,0,0,0.10196);
   box-shadow: inset 0 -1px 0 0 var(--color-border-neutral);
 }
 .np-theme-personal .sliding-panel.sliding-panel--border-right {
-  box-shadow: inset 1px 0 0 0 rgba(0,0,0,0.10196);
   box-shadow: inset 1px 0 0 0 var(--color-border-neutral);
 }
 [dir="rtl"] .np-theme-personal .sliding-panel.sliding-panel--border-right {
-  box-shadow: inset -1px 0 0 0 rgba(0,0,0,0.10196);
   box-shadow: inset -1px 0 0 0 var(--color-border-neutral);
 }
 .np-theme-personal .sliding-panel.sliding-panel--border-bottom {
-  box-shadow: inset 0 1px 0 0 rgba(0,0,0,0.10196);
   box-shadow: inset 0 1px 0 0 var(--color-border-neutral);
 }
 .np-theme-personal .sliding-panel.sliding-panel--border-left {
-  box-shadow: inset -1px 0 0 0 rgba(0,0,0,0.10196);
   box-shadow: inset -1px 0 0 0 var(--color-border-neutral);
 }
 [dir="rtl"] .np-theme-personal .sliding-panel.sliding-panel--border-left {
-  box-shadow: inset 1px 0 0 0 rgba(0,0,0,0.10196);
   box-shadow: inset 1px 0 0 0 var(--color-border-neutral);
 }

package/src/Snackbar/Snackbar.css

@@ -15,16 +15,11 @@
   align-items: center;
   justify-content: space-between;
   text-align: start;
-  font-size: 0.875rem;
   font-size: var(--font-size-14);
   margin-block: 0;
-  margin-inline: 16px;
   margin-inline: var(--size-16);
-  padding-block: 8px;
   padding-block: var(--size-8);
-  padding-inline: 16px;
   padding-inline: var(--size-16);
-  inline-size: calc(100% - 32px);
   inline-size: calc(100% - var(--size-32));
   transition: 400ms cubic-bezier(0.215, 0.61, 0.355, 1);
 }
@@ -32,7 +27,6 @@
   box-shadow: 0 2px 4px 0 rgba(69, 71, 69, 0.35);
   position: relative;
   background: var(--color-contrast-theme);
-  border-radius: 10px;
   border-radius: var(--radius-small);
   color: var(--color-contrast-overlay);
 }
@@ -46,7 +40,6 @@
   inset-inline-start: 0;
   inset-block-start: 0;
   z-index: -1;
-  background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
 }
 .np-theme-personal--dark .snackbar__text,
@@ -61,7 +54,6 @@
 }
 .snackbar__text__action {
   flex-shrink: 0;
-  margin-inline-start: 16px;
   margin-inline-start: var(--size-16);
 }
 .snackbar__text-container-enter,

package/src/StatusIcon/StatusIcon.css

@@ -24,7 +24,6 @@
 }
 .status-circle.neutral,
 .status-circle.info {
-  background-color: #5d7079;
   background-color: var(--color-sentiment-interactive-primary, var(--color-content-secondary));
 }
 .status-circle.neutral .status-icon,

package/src/Stepper/Stepper.css

@@ -14,18 +14,15 @@
 }
 .tw-stepper__step--active .tw-stepper__step-label {
   cursor: default;
-  color: #37517e;
   color: var(--color-content-primary);
 }
 .tw-stepper__step--clickable .tw-stepper__step-label {
-  color: #0097c7;
   color: var(--color-content-accent);
   transition: color 0.15s ease-in-out;
   line-height: 0;
   border-radius: 2px;
 }
 .np-theme-personal .tw-stepper__step--clickable .tw-stepper__step-label {
-  color: #5d7079;
   color: var(--color-content-secondary);
   inset-block-start: 0;
 }
@@ -43,7 +40,6 @@
 .tw-stepper__step-label {
   position: absolute;
   inset-block-start: 0;
-  color: #5d7079;
   color: var(--color-content-secondary);
   transition: color 0.6s ease-in-out;
   white-space: nowrap;

package/src/Sticky/Sticky.css

@@ -1,4 +1,3 @@
 .wds-sticky.sliding-panel--open-bottom {
-  padding-block-end: env(safe-area-inset-bottom, 0px);
   padding-block-end: var(--wds-sticky-safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
 }

package/src/Switch/Switch.css

@@ -26,14 +26,12 @@
   color: #fff;
 }
 .np-switch--unchecked {
-  background: #c9cbce;
   background: var(--color-interactive-secondary);
 }
 .np-switch--unchecked .switch--thumb {
   transform: translateX(0);
 }
 .np-switch--checked {
-  background: #00a2dd;
   background: var(--color-interactive-accent);
 }
 .np-switch--checked .np-switch--thumb {
@@ -59,6 +57,5 @@
   block-size: 20px;
   margin: 3px;
   border-radius: 50%;
-  background-color: #ffffff;
   background-color: var(--color-background-screen);
 }