@transferwise/components 46.165.2 → 46.165.3

package/build/styles/styles/less/panels.css

@@ -7,7 +7,6 @@
 }
 .panel-body {
   padding: 16px;
-  background-color: #ffffff;
   background-color: var(--color-background-screen);
 }
 .panel-heading {
@@ -20,7 +19,6 @@
 .panel-title {
   margin-block-start: 0;
   margin-block-end: 0;
-  line-height: calc(1.2 + 8px);
   line-height: calc(var(--line-height-title) + 8px);
 }
 .panel-title > a {
@@ -71,7 +69,6 @@
 }
 @media (min-width: 840px) {
   .panel-title {
-    line-height: calc(1.2 * 2);
     line-height: calc(var(--line-height-title) * 2);
   }
   .panel-heading > .btn-sm {
@@ -270,7 +267,6 @@
   }
 }
 .panel-group {
-  margin-block-end: 24px;
   margin-block-end: var(--size-24);
 }
 .panel-group .panel {

package/build/styles/styles/less/popovers.css

@@ -1,6 +1,5 @@
 .close {
   float: inline-end;
-  color: #0097c7;
   color: var(--color-content-accent);
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -9,7 +8,6 @@
   color: var(--color-interactive-primary);
 }
 .close:hover {
-  color: #0084b3;
   color: var(--color-content-accent-hover);
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -26,7 +24,6 @@
   outline-offset: var(--ring-outline-offset);
 }
 .close:active {
-  color: #0077a5;
   color: var(--color-content-accent-active);
 }
 button.close {
@@ -49,13 +46,11 @@ button.close {
   inline-size: 276px;
   padding-block: 18px;
   padding-inline: 24px;
-  font-family: 'Inter', Helvetica, Arial, sans-serif;
   font-family: var(--font-family-regular);
   font-style: normal;
   font-weight: normal;
   letter-spacing: normal;
   line-break: auto;
-  line-height: 24px;
   line-height: var(--size-24);
   text-align: start;
   -webkit-text-decoration: none;
@@ -66,14 +61,11 @@ button.close {
   word-break: normal;
   word-spacing: normal;
   word-wrap: normal;
-  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;
-  background-color: #ffffff;
   background-color: var(--color-background-screen);
   background-clip: padding-box;
   border-radius: 3px;
@@ -260,19 +252,14 @@ button.close {
 .popover-title {
   padding: 0;
   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%;
-  background-color: #ffffff;
   background-color: var(--color-background-screen);
   border-block-end: 0;
   border-start-start-radius: 2px;
@@ -312,19 +299,15 @@ button.close {
 .popover-title + p,
 .popover-title + ul:not(.list-unstyled),
 .popover-title + ol:not(.list-unstyled) {
-  margin-block-start: 8px;
   margin-block-start: var(--size-8);
 }
 .popover-content {
   padding: 0;
-  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;
-  color: #5d7079;
   color: var(--color-content-secondary);
 }
 @supports (hyphenate-limit-chars: 1) {
@@ -360,7 +343,6 @@ button.close {
 }
 .popover-close {
   float: inline-end;
-  color: #0097c7;
   color: var(--color-content-accent);
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -369,7 +351,6 @@ button.close {
   color: var(--color-interactive-primary);
 }
 .popover-close:hover {
-  color: #0084b3;
   color: var(--color-content-accent-hover);
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -386,7 +367,6 @@ button.close {
   outline-offset: var(--ring-outline-offset);
 }
 .popover-close:active {
-  color: #0077a5;
   color: var(--color-content-accent-active);
 }
 button.popover-close {
@@ -407,14 +387,12 @@ button.popover-close {
   font-weight: inherit !important;
   -webkit-text-decoration: none !important;
   text-decoration: none !important;
-  border-block-end: 1px dotted #0097c7 !important;
   border-block-end: 1px dotted var(--color-content-accent) !important;
   cursor: pointer;
 }
 [data-toggle="popover"]:not(.btn):hover,
 [data-toggle="popover"]:not(.btn):focus,
 [data-toggle="popover"]:not(.btn)[aria-describedby] {
-  color: #0084b3 !important;
   color: var(--color-content-accent-hover) !important;
   outline: 0;
 }
@@ -428,7 +406,6 @@ button.popover-close {
     inset-inline-end: 0 !important;
     inset-inline-start: 0 !important;
     inline-size: 272px;
-    margin-block: 32px !important;
     margin-block: var(--size-32) !important;
     margin-inline: auto;
   }
@@ -468,7 +445,6 @@ button.popover-close {
   block-size: 100vh;
   block-size: 100dvh;
   cursor: pointer;
-  background-color: #ffffff;
   background-color: var(--color-background-screen);
   opacity: 0.7;
   animation: cover-fade-in 0.35s 0s linear forwards;
@@ -480,15 +456,12 @@ button.popover-close {
 }
 .popover-promotion {
   text-align: center;
-  padding: 24px;
   padding: var(--size-24);
 }
 @media (max-width: 599.98px) {
   .popover-promotion {
     inline-size: auto !important;
-    padding: 24px !important;
     padding: var(--size-24) !important;
-    margin: 16px !important;
     margin: var(--size-16) !important;
   }
 }
@@ -496,24 +469,18 @@ button.popover-close {
   .popover-promotion {
     inline-size: 540px !important;
     padding-block: 28px !important;
-    padding-inline: 32px;
     padding-inline: var(--size-32);
-    margin-block: 32px !important;
     margin-block: var(--size-32) !important;
     margin-inline: auto;
   }
 }
 .popover-promotion .popover-title {
-  font-size: 1rem;
   font-size: var(--font-size-16);
-  line-height: 1.2;
   line-height: var(--line-height-title);
 }
 @media (min-width: 840px) {
   .popover-promotion .popover-title {
-    font-size: 1.25rem;
     font-size: var(--font-size-20);
-    line-height: 1.2;
     line-height: var(--line-height-title);
   }
 }

package/build/styles/styles/less/process.css

@@ -24,7 +24,6 @@
 .process-circle {
   transform-origin: center center;
   transition: stroke 1s 0.2s linear;
-  stroke: #0097c7;
   stroke: var(--color-content-accent);
   stroke-opacity: 1;
   stroke-linecap: round;
@@ -34,7 +33,6 @@
   animation-iteration-count: infinite;
 }
 .np-theme-personal .process-circle {
-  stroke: #37517e;
   stroke: var(--color-content-primary);
 }
 .np-theme-personal--forest-green .process-circle,
@@ -43,7 +41,6 @@
   stroke: var(--color-interactive-primary);
 }
 .process-inverse .process-circle {
-  stroke: #ffffff;
   stroke: var(--color-background-screen);
 }
 .process-icon-container {
@@ -66,7 +63,6 @@
   block-size: 0;
 }
 .process-success .process-icon-horizontal {
-  background-color: #008026;
   background-color: var(--color-content-positive);
   inset-block-end: 0;
   inset-inline-start: 0;
@@ -75,7 +71,6 @@
   background-color: var(--color-sentiment-positive);
 }
 .process-success .process-icon-vertical {
-  background-color: #008026;
   background-color: var(--color-content-positive);
   inset-block-start: 100%;
   inset-inline-end: 0;
@@ -84,14 +79,12 @@
   background-color: var(--color-sentiment-positive);
 }
 .process-success .process-circle {
-  stroke: #008026;
   stroke: var(--color-content-positive);
 }
 .np-theme-personal .process-success .process-circle {
   stroke: var(--color-sentiment-positive);
 }
 .process-danger .process-icon-horizontal {
-  background-color: #cf2929;
   background-color: var(--color-content-negative);
   inset-inline-start: 0;
 }
@@ -99,7 +92,6 @@
   background-color: var(--color-sentiment-negative);
 }
 .process-danger .process-icon-vertical {
-  background-color: #cf2929;
   background-color: var(--color-content-negative);
   inset-block-start: 0;
 }
@@ -107,7 +99,6 @@
   background-color: var(--color-sentiment-negative);
 }
 .process-danger .process-circle {
-  stroke: #cf2929;
   stroke: var(--color-content-negative);
 }
 .np-theme-personal .process-danger .process-circle {

package/build/styles/styles/less/progress-bars.css

@@ -2,16 +2,11 @@
   --progress-bar-height: 4px;
   --progress-bar-border-width: 4px;
   --progress-bar-start-shift: calc(var(--progress-bar-border-width) * 2);
-  block-size: 4px;
   block-size: var(--progress-bar-height);
   overflow: hidden;
-  margin-block-start: calc((24px - 4px) / 2);
   margin-block-start: calc((var(--size-24) - var(--progress-bar-height)) / 2);
-  margin-block-end: calc((24px - 4px) / 2);
   margin-block-end: calc((var(--size-24) - var(--progress-bar-height)) / 2);
-  background-color: #c9cbce;
   background-color: var(--color-interactive-secondary);
-  border-radius: calc(4px + 4px);
   border-radius: calc(var(--progress-bar-border-width) + var(--progress-bar-height));
 }
 .progress-bar {
@@ -20,15 +15,11 @@
   inset-block-start: calc(-1 * var(--progress-bar-border-width));
   inset-inline-start: calc(-1 * var(--progress-bar-start-shift));
   block-size: calc(var(--progress-bar-height) + var(--progress-bar-border-width) * 2);
-  font-size: 1rem;
   font-size: var(--font-size-16);
-  font-weight: 700;
   font-weight: var(--font-weight-bold);
   color: #fff;
   text-align: end;
-  background-color: #0097c7;
   background-color: var(--color-content-accent);
-  border: var(--progress-bar-border-width) solid #ffffff;
   border: var(--progress-bar-border-width) solid var(--color-background-screen);
   border-radius: inherit;
 }
@@ -37,22 +28,17 @@
   inset-inline-start: 0;
 }
 .progress-bar-primary {
-  background-color: #37517e;
   background-color: var(--color-content-primary);
 }
 .progress-bar-success {
-  background-color: #008026;
   background-color: var(--color-content-positive);
 }
 .progress-bar-info {
-  background-color: #0097c7;
   background-color: var(--color-content-accent);
 }
 .progress-bar-warning {
-  background-color: #9a6500;
   background-color: var(--color-content-warning);
 }
 .progress-bar-danger {
-  background-color: #cf2929;
   background-color: var(--color-content-negative);
 }

package/build/styles/styles/less/ring.css

@@ -11,9 +11,7 @@
   outline: none;
 }
 .focus-ring:focus-visible {
-  outline: #37517e solid 2px;
   outline: var(--ring-outline-color) solid var(--ring-outline-width);
-  outline-offset: 2px;
   outline-offset: var(--ring-outline-offset);
 }
 details:focus,
@@ -38,9 +36,7 @@ dialog:focus-visible,
 input:focus-visible,
 select:focus-visible,
 textarea:focus-visible {
-  outline: #37517e solid 2px;
   outline: var(--ring-outline-color) solid var(--ring-outline-width);
-  outline-offset: 2px;
   outline-offset: var(--ring-outline-offset);
 }
 .ring-offset-0 {

package/build/styles/styles/less/select.css

@@ -1,6 +1,5 @@
 .tw-select .tw-icon {
   display: inline-block;
-  margin-inline-end: 8px;
   margin-inline-end: var(--size-8);
   margin-block-start: -2px;
   vertical-align: middle;
@@ -12,31 +11,24 @@
   border-block-end-style: solid;
   border-block-end-width: 1px;
   /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
-  border-block-end-color: rgba(0,0,0,0.10196);
-  border-block-end-color: #0000001a;
   border-block-end-color: var(--color-border-neutral);
 }
 .tw-select .tw-dropdown-item--focused {
-  background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
 }
 .tw-select .tw-dropdown-item .currency-flag {
-  margin-inline-end: 8px;
   margin-inline-end: var(--size-8);
 }
 .tw-select .tw-dropdown-item > a {
   white-space: normal;
 }
 .tw-select .dropdown-toggle.btn-input.btn-sm {
-  padding-inline-end: 32px;
   padding-inline-end: var(--size-32);
 }
 .tw-select .dropdown-toggle.btn-input.btn-md {
-  padding-inline-end: 40px;
   padding-inline-end: var(--size-40);
 }
 .tw-select .dropdown-toggle.btn-input.btn-lg {
-  padding-inline-end: 48px;
   padding-inline-end: var(--size-48);
 }
 .tw-select .dropdown-toggle tw-chevron-down-icon > span {