@transferwise/components 0.0.0-experimental-7df8816 → 0.0.0-experimental-d2bc8ee

package/build/styles/circularButton/CircularButton.css

@@ -7,26 +7,32 @@
 .np-circular-btn-primary-default .np-circular-btn-label,
 .np-circular-btn-secondary-default .np-circular-btn-label {
   text-align: center;
+  color: #163300;
   color: var(--color-interactive-primary);
 }
 .np-circular-btn-primary-default .np-circular-btn-label:not(.disabled):not(:disabled):hover,
 .np-circular-btn-secondary-default .np-circular-btn-label:not(.disabled):not(:disabled):hover {
+  color: #0d1f00;
   color: var(--color-interactive-primary-hover);
 }
 .np-circular-btn-primary-default .np-circular-btn-label:not(.disabled):not(:disabled):active,
 .np-circular-btn-secondary-default .np-circular-btn-label:not(.disabled):not(:disabled):active {
+  color: #0e0f0c;
   color: var(--color-interactive-primary-active);
 }
 .np-circular-btn-primary-negative .np-circular-btn-label,
 .np-circular-btn-secondary-negative .np-circular-btn-label {
+  color: #cb272f;
   color: var(--color-sentiment-negative-primary);
 }
 .np-circular-btn-primary-negative .np-circular-btn-label:not(.disabled):not(:disabled):hover,
 .np-circular-btn-secondary-negative .np-circular-btn-label:not(.disabled):not(:disabled):hover {
+  color: #b8232b;
   color: var(--color-sentiment-negative-primary-hover);
 }
 .np-circular-btn-primary-negative .np-circular-btn-label:not(.disabled):not(:disabled):active,
 .np-circular-btn-secondary-negative .np-circular-btn-label:not(.disabled):not(:disabled):active {
+  color: #a72027;
   color: var(--color-sentiment-negative-primary-active);
 }
 .np-circular-btn-disabled {

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

@@ -14,7 +14,7 @@
   height: var(--size-40);
 }
 .np-option__title {
-  color: #37517e;
+  color: #0e0f0c;
   color: var(--color-content-primary);
   font-size: 1rem;
   font-weight: 600;
@@ -27,7 +27,7 @@
 .np-option__body {
   margin-top: 4px;
   margin-top: var(--size-4);
-  color: #5d7079;
+  color: #454745;
   color: var(--color-content-secondary);
   font-size: 0.875rem;
   font-size: var(--font-size-14);

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

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

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

@@ -20,7 +20,7 @@
 .np-bottom-sheet--handler {
   width: 40px;
   height: 4px;
-  background: #c9cbce;
+  background: #868685;
   background: var(--color-interactive-secondary);
   border-radius: 10px;
   border-radius: var(--radius-small);

package/build/styles/common/card/Card.css

@@ -9,7 +9,7 @@
   display: flex;
   flex-direction: column;
   align-items: stretch;
-  background-color: rgba(134,167,189,0.10196);
+  background-color: rgba(22,51,0,0.07843);
   background-color: var(--Card-background-color);
   border-radius: 32px;
   border-radius: var(--Card-border-radius);

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

@@ -1,6 +1,6 @@
 .np-close-button {
   transition: color 0.15s ease-in-out;
-  color: #00a2dd;
+  color: #9fe870;
   color: var(--color-interactive-accent);
   border: none;
   background: none;
@@ -15,10 +15,11 @@
   height: var(--size-24);
 }
 .np-close-button:hover {
-  color: #008fc9;
+  color: #80e142;
   color: var(--color-interactive-accent-hover);
 }
 .np-theme-personal .np-close-button {
+  color: #163300;
   color: var(--color-interactive-primary);
   height: 32px;
   height: var(--size-32);
@@ -85,10 +86,14 @@
   }
 }
 .np-theme-personal .np-close-button:not(.disabled):not(:disabled):hover {
+  color: #0d1f00;
   color: var(--color-interactive-primary-hover);
+  background-color: rgba(22,51,0,0.12941);
   background-color: var(--color-background-neutral-hover);
 }
 .np-theme-personal .np-close-button:not(.disabled):not(:disabled):active {
+  color: #0e0f0c;
   color: var(--color-interactive-primary-active);
+  background-color: rgba(22,51,0,0.18039);
   background-color: var(--color-background-neutral-active);
 }

package/build/styles/criticalBanner/CriticalCommsBanner.css

@@ -1,8 +1,11 @@
 .np-theme-personal .critical-comms .alert-warning {
+  color: #ffffff;
   color: var(--color-contrast-overlay);
+  background-color: #cb272f;
   background-color: var(--color-sentiment-negative);
 }
 .np-theme-personal .critical-comms .alert-warning .np-text-title-body {
+  color: #ffffff;
   color: var(--color-contrast-overlay);
 }
 .np-theme-personal .critical-comms .status-circle.warning {
@@ -10,6 +13,7 @@
   background-color: var(--color-background-screen);
 }
 .np-theme-personal .critical-comms .status-circle.warning .status-icon {
+  color: #121511;
   color: var(--color-contrast-theme);
 }
 .np-theme-personal .critical-comms .alert__message .alert__action {

package/build/styles/dateLookup/DateLookup.css

@@ -8,7 +8,7 @@
   background-color: inherit;
 }
 .tw-date-lookup-calendar > tbody > tr > td.weekend button {
-  color: #5d7079;
+  color: #454745;
   color: var(--color-content-secondary);
 }
 .tw-date-lookup-calendar > tbody > tr > td {
@@ -27,7 +27,6 @@
   width: 100%;
   padding: 4px 0;
   padding: var(--size-4) 0;
-  color: #0097c7;
   color: var(--color-content-accent);
   border: transparent;
   border-radius: 10px;
@@ -35,7 +34,7 @@
   background-color: transparent;
   font-weight: 600;
   font-weight: var(--font-weight-semi-bold);
-  color: #37517e;
+  color: #0e0f0c;
   color: var(--color-content-primary);
 }
 @media (max-width: 320px) {
@@ -65,10 +64,13 @@
 }
 .tw-date-lookup-calendar > tbody > tr > td:not(.disabled):not(:disabled) button.show-focus,
 .tw-date-lookup-calendar > tbody > tr > td:hover button:not(.disabled):not(:disabled) {
+  background-color: rgba(22,51,0,0.07843);
   background-color: var(--color-background-screen-hover);
 }
 .tw-date-lookup-calendar > tbody > tr > td:not(.disabled):not(:disabled) button.active {
+  background-color: #163300;
   background-color: var(--color-interactive-primary);
+  color: #9fe870;
   color: var(--color-interactive-contrast);
 }
 .tw-date-lookup-calendar abbr {

package/build/styles/definitionList/DefinitionList.css

@@ -48,6 +48,6 @@
   }
 }
 .np-theme-personal .tw-definition-list dt {
-  color: #5d7079;
+  color: #454745;
   color: var(--color-content-secondary);
 }

package/build/styles/divider/Divider.css

@@ -4,7 +4,7 @@
   --Divider-border-style: solid;
   --Divider-dash-length: 4px;
   --Divider-dash-spacing: 4px;
-  border-top: 4px solid rgba(0,0,0,0.10196);
+  border-top: 4px solid rgba(14,15,12,0.12157);
   border-top: var(--Divider-border-width) var(--Divider-border-style) var(--Divider-border-color);
   display: inline-block;
   margin: 0;

package/build/styles/drawer/Drawer.css

@@ -16,41 +16,88 @@
   }
 }
 .np-drawer .np-drawer-header {
+  display: flex;
+  align-items: center;
+  flex-wrap: nowrap;
   min-height: 56px;
   min-height: var(--size-56);
+  padding: 24px 16px;
+  padding: var(--size-24) var(--size-16);
+}
+.np-theme-personal .np-drawer .np-drawer-header {
   padding: 24px;
   padding: var(--size-24);
 }
 @media (max-width: 320px) {
-  .np-drawer .np-drawer-header {
+  .np-theme-personal .np-drawer .np-drawer-header {
     padding: 16px;
     padding: var(--size-16);
   }
 }
-.np-drawer .np-drawer-title {
-  max-width: 85%;
+.np-theme-personal .np-drawer .np-drawer-header .np-close-button {
+  margin-top: calc(8px * -1);
+  margin-top: calc(var(--size-8) * -1);
+  margin-right: calc(8px * -1);
+  margin-right: calc(var(--size-8) * -1);
+  margin-bottom: calc(8px * -1);
+  margin-bottom: calc(var(--size-8) * -1);
+}
+.np-drawer .np-drawer-header.np-drawer-header--withborder {
+  box-shadow: inset 0 -1px 0 0 #e2e6e8;
+}
+.np-theme-personal .np-drawer .np-drawer-header.np-drawer-header--withborder {
+  box-shadow: inset 0 -1px 0 0 rgba(14,15,12,0.12157);
+  box-shadow: inset 0 -1px 0 0 var(--color-border-neutral);
+}
+.np-drawer .np-drawer-header .np-text-title-body {
+  margin-right: 16px;
+  margin-right: var(--size-16);
+  font-size: 1.125rem;
+  font-size: var(--font-size-18);
+  letter-spacing: -0.01em;
+  letter-spacing: var(--letter-spacing-negative-xs);
+  line-height: 1.5rem;
+  line-height: var(--line-height-24);
+}
+.np-drawer .np-drawer-header .np-close-button {
+  margin-left: auto;
+}
+.np-drawer .np-drawer-header .tw-icon {
+  display: block;
+  cursor: pointer;
+  fill: #00b9ff;
 }
 .np-drawer .np-drawer-content {
   overflow-y: auto;
   flex: 1;
+}
+.np-drawer .np-drawer-content .np-theme-personal {
   background-color: transparent;
 }
-.np-drawer .np-drawer-footer {
+.np-drawer .np-drawer-footer,
+.np-drawer .np-drawer-content {
   padding: 16px;
   padding: var(--size-16);
 }
-.np-drawer .np-drawer-content {
-  padding: 0 16px;
-  padding: 0 var(--size-16);
+.np-drawer .np-drawer-footer {
+  box-shadow: inset 0 1px 0 0 #e2e6e8;
+}
+.np-theme-personal .np-drawer .np-drawer-footer {
+  box-shadow: inset 0 1px 0 0 rgba(14,15,12,0.12157);
+  box-shadow: inset 0 1px 0 0 var(--color-border-neutral);
 }
 @media (min-width: 768px) {
-  .np-drawer .np-drawer-header,
-  .np-drawer .np-drawer-footer {
+  .np-drawer .np-drawer-header {
+    padding: 32px 24px;
+    padding: var(--size-32) var(--size-24);
+  }
+  .np-theme-personal .np-drawer .np-drawer-header {
     padding: 24px;
     padding: var(--size-24);
   }
+  .np-drawer .np-drawer-footer,
   .np-drawer .np-drawer-content {
-    padding: 0 24px;
-    padding: 0 var(--size-24);
+    padding: 24px;
+    padding: var(--size-24);
   }
 }

package/build/styles/emphasis/Emphasis.css

@@ -4,28 +4,27 @@
   font-style: normal;
 }
 .emphasis--important {
-  color: #37517e;
+  color: #0e0f0c;
   color: var(--color-content-primary);
 }
 .emphasis--positive {
-  color: #008026;
   color: var(--color-content-positive);
 }
 .np-theme-personal .emphasis--positive {
+  color: #054d28;
   color: var(--color-sentiment-positive);
 }
 .emphasis--negative {
-  color: #cf2929;
   color: var(--color-content-negative);
 }
 .np-theme-personal .emphasis--negative {
+  color: #cb272f;
   color: var(--color-sentiment-negative);
 }
 .emphasis--warning {
-  color: #9a6500;
   color: var(--color-content-warning);
 }
 .np-theme-personal .emphasis--warning {
-  color: #5d7079;
+  color: #454745;
   color: var(--color-content-secondary);
 }

package/build/styles/expressiveMoneyInput/ExpressiveMoneyInput.css

@@ -6,6 +6,7 @@
   justify-content: right;
   width: 100%;
   transition: font-size 0.4s cubic-bezier(0.3, 0, 0.1, 1), height 0.4s cubic-bezier(0.3, 0, 0.1, 1), margin-top 0.4s cubic-bezier(0.3, 0, 0.1, 1), color 0.4s ease;
+  color: #163300;
   color: var(--color-interactive-primary);
   overflow: hidden;
   margin-bottom: 0 !important;
@@ -40,6 +41,7 @@
   width: 32px;
   width: var(--size-32);
   overflow: hidden;
+  color: #163300;
   color: var(--color-interactive-primary);
   margin-left: 8px;
   margin-left: var(--size-8);

package/build/styles/expressiveMoneyInput/amountInput/AmountInput.css

@@ -6,6 +6,7 @@
   justify-content: right;
   width: 100%;
   transition: font-size 0.4s cubic-bezier(0.3, 0, 0.1, 1), height 0.4s cubic-bezier(0.3, 0, 0.1, 1), margin-top 0.4s cubic-bezier(0.3, 0, 0.1, 1), color 0.4s ease;
+  color: #163300;
   color: var(--color-interactive-primary);
   overflow: hidden;
   margin-bottom: 0 !important;

package/build/styles/expressiveMoneyInput/chevron/Chevron.css

@@ -2,6 +2,7 @@
   width: 32px;
   width: var(--size-32);
   overflow: hidden;
+  color: #163300;
   color: var(--color-interactive-primary);
   margin-left: 8px;
   margin-left: var(--size-8);

package/build/styles/flowNavigation/FlowNavigation.css

@@ -4,7 +4,7 @@
 }
 .np-flow-navigation--border-bottom {
   min-height: 96px;
-  border-bottom: 1px solid rgba(0,0,0,0.10196);
+  border-bottom: 1px solid rgba(14,15,12,0.12157);
   border-bottom: 1px solid var(--color-border-neutral);
 }
 .np-flow-navigation__content {
@@ -72,5 +72,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
 .np-theme-personal--forest-green .np-flow-navigation .np-flow-header__left path,
 .np-theme-personal--bright-green .np-flow-navigation .np-flow-header__left path,
 .np-theme-personal--dark .np-flow-navigation .np-flow-header__left path {
+  fill: #163300;
   fill: var(--color-interactive-primary);
 }

package/build/styles/header/Header.css

@@ -17,12 +17,12 @@
 }
 .np-header--group {
   align-items: flex-end;
-  border-bottom: 1px solid rgba(0,0,0,0.10196);
+  border-bottom: 1px solid rgba(14,15,12,0.12157);
   border-bottom: 1px solid var(--color-border-neutral);
 }
 .np-header--group,
 .np-header--group .np-header__title {
-  color: #5d7079;
+  color: #454745;
   color: var(--color-content-secondary);
 }
 .np-header__action {

package/build/styles/iconButton/IconButton.css

@@ -2,81 +2,104 @@
   border: none;
 }
 .np-icon-button-tertiary-default {
+  color: #163300;
   color: var(--color-interactive-primary);
-  background-color: rgba(134,167,189,0.10196);
+  background-color: rgba(22,51,0,0.07843);
   background-color: var(--color-background-neutral);
 }
 .np-icon-button-tertiary-default:not(.disabled):not(:disabled):hover {
+  background-color: rgba(22,51,0,0.12941);
   background-color: var(--color-background-neutral-hover);
 }
 .np-icon-button-tertiary-default:not(.disabled):not(:disabled):active {
+  background-color: rgba(22,51,0,0.18039);
   background-color: var(--color-background-neutral-active);
 }
 .np-icon-button-primary-default {
+  color: #163300;
   color: var(--color-interactive-control);
-  background-color: #00a2dd;
+  background-color: #9fe870;
   background-color: var(--color-interactive-accent);
 }
 .np-icon-button-primary-default:not(.disabled):not(:disabled):hover {
-  background-color: #008fc9;
+  background-color: #80e142;
   background-color: var(--color-interactive-accent-hover);
 }
 .np-icon-button-primary-default:not(.disabled):not(:disabled):active {
-  background-color: #0081ba;
+  background-color: #65cf21;
   background-color: var(--color-interactive-accent-active);
 }
 .np-icon-button-primary-negative {
+  color: #ffffff;
   color: var(--color-contrast-overlay);
+  background-color: #cb272f;
   background-color: var(--color-sentiment-negative-primary);
 }
 .np-icon-button-primary-negative:not(.disabled):not(:disabled):hover {
+  background-color: #b8232b;
   background-color: var(--color-sentiment-negative-primary-hover);
 }
 .np-icon-button-primary-negative:not(.disabled):not(:disabled):active {
+  background-color: #a72027;
   background-color: var(--color-sentiment-negative-primary-active);
 }
 .np-theme-personal--bright-green .np-icon-button-primary-negative {
+  color: #ffffff;
   color: var(--color-white);
 }
 .np-icon-button-minimal-default {
+  color: #163300;
   color: var(--color-interactive-primary);
   background-color: #ffffff;
   background-color: var(--color-background-screen);
   background-color: transparent;
 }
 .np-icon-button-minimal-default:not(.disabled):not(:disabled):hover {
+  background-color: rgba(22,51,0,0.07843);
   background-color: var(--color-background-screen-hover);
 }
 .np-icon-button-minimal-default:not(.disabled):not(:disabled):active {
+  background-color: rgba(22,51,0,0.12941);
   background-color: var(--color-background-screen-active);
 }
 .np-icon-button-secondary-default {
+  color: #163300;
   color: var(--color-interactive-primary);
+  background-color: #e2f6d5;
   background-color: var(--color-interactive-neutral);
 }
 .np-icon-button-secondary-default:not(.disabled):not(:disabled):hover {
+  background-color: #d3f2c0;
   background-color: var(--color-interactive-neutral-hover);
 }
 .np-icon-button-secondary-default:not(.disabled):not(:disabled):active {
+  background-color: #c5edab;
   background-color: var(--color-interactive-neutral-active);
 }
 .np-theme-personal--bright-green .np-icon-button-secondary-default,
 .np-theme-personal--forest-green .np-icon-button-secondary-default {
+  color: #163300;
   color: var(--color-interactive-control);
 }
 .np-icon-button-secondary-negative {
+  color: #cb272f;
   color: var(--color-sentiment-negative-primary);
+  background-color: #fbeaea;
   background-color: var(--color-sentiment-negative-secondary);
 }
 .np-icon-button-secondary-negative:not(.disabled):not(:disabled):hover {
+  background-color: #f9e1e1;
   background-color: var(--color-sentiment-negative-secondary-hover);
 }
 .np-icon-button-secondary-negative:not(.disabled):not(:disabled):active {
+  background-color: #f8d8d8;
   background-color: var(--color-sentiment-negative-secondary-active);
 }
 .np-theme-personal--bright-green .np-icon-button-secondary-negative {
+  color: #ffffff;
   color: var(--color-white);
 }
 .np-theme-personal--forest-green .np-icon-button-secondary-negative {
+  color: #ffffff;
   color: var(--color-contrast-overlay);
 }

package/build/styles/inputs/Input.css

@@ -9,9 +9,9 @@
   padding-left: var(--size-16);
   padding-right: 16px;
   padding-right: var(--size-16);
-  color: #37517e;
+  color: #0e0f0c;
   color: var(--color-content-primary);
-  box-shadow: inset 0 0 0 1px #c9cbce;
+  box-shadow: inset 0 0 0 1px #868685;
   box-shadow: inset 0 0 0 var(--ring-width) var(--ring-color);
   transition-property: color, opacity, box-shadow;
   transition-timing-function: ease-in-out;
@@ -90,7 +90,7 @@
 }
 .np-form-control--size-lg {
   margin: 0;
-  color: #37517e;
+  color: #0e0f0c;
   color: var(--color-content-primary);
   line-height: 1.2;
   line-height: var(--line-height-title);
@@ -143,11 +143,11 @@
   margin-top: var(--size-8);
 }
 .np-input::-moz-placeholder {
-  color: #768e9c;
+  color: #6a6c6a;
   color: var(--color-content-tertiary);
 }
 .np-input::placeholder {
-  color: #768e9c;
+  color: #6a6c6a;
   color: var(--color-content-tertiary);
 }
 .np-input--shape-rectangle {

package/build/styles/inputs/InputGroup.css

@@ -15,7 +15,7 @@
   z-index: 10;
   display: inline-flex;
   align-items: center;
-  color: #c9cbce;
+  color: #868685;
   color: var(--color-interactive-secondary);
   transition-property: color, opacity;
   transition-timing-function: ease-out;
@@ -26,10 +26,11 @@
   mix-blend-mode: luminosity;
 }
 .np-input-group:has( > :is(input,button,select):focus-visible) .np-input-addon {
+  color: #163300;
   color: var(--color-interactive-primary);
 }
 .np-input-group:has( > :is(input,button,select):hover) .np-input-addon {
-  color: #b5b7ba;
+  color: #6c6c6b;
   color: var(--color-interactive-secondary-hover);
 }
 .np-input-addon--placement-start {

package/build/styles/inputs/SelectInput.css

@@ -5,7 +5,7 @@
 .np-bottom-sheet-v2-backdrop {
   position: fixed;
   inset: 0px;
-  background-color: #37517e;
+  background-color: #0e0f0c;
   background-color: var(--color-content-primary);
   opacity: 0.4;
   transition-property: opacity;
@@ -87,11 +87,11 @@
   padding-top: 0px;
 }
 .np-bottom-sheet-v2-title {
-  color: #37517e;
+  color: #0e0f0c;
   color: var(--color-content-primary);
 }
 .np-bottom-sheet-v2-body {
-  color: #5d7079;
+  color: #454745;
   color: var(--color-content-secondary);
 }
 .np-button-input {
@@ -141,11 +141,11 @@
   padding: var(--size-16);
 }
 .np-popover-v2-title {
-  color: #37517e;
+  color: #0e0f0c;
   color: var(--color-content-primary);
 }
 .np-popover-v2-content {
-  color: #5d7079;
+  color: #454745;
   color: var(--color-content-secondary);
 }
 .np-select-input-content {
@@ -154,7 +154,7 @@
   white-space: nowrap;
 }
 .np-select-input-placeholder {
-  color: #768e9c;
+  color: #6a6c6a;
   color: var(--color-content-tertiary);
 }
 .np-select-input-options-container {
@@ -183,7 +183,7 @@
 .np-select-input-options-status-icon {
   padding: 0 4px;
   padding: 0 var(--size-4);
-  color: #768e9c;
+  color: #6a6c6a;
   color: var(--color-content-tertiary);
 }
 .np-select-input-query-container {
@@ -265,13 +265,14 @@
   border-radius: var(--radius-small);
   padding: 12px 16px;
   padding: var(--size-12) var(--size-16);
+  color: #163300;
   color: var(--color-interactive-primary);
 }
 .np-select-input-option-container:focus {
   outline: none;
 }
 .np-select-input-option-container--active {
-  box-shadow: inset 0 0 0 1px #c9cbce;
+  box-shadow: inset 0 0 0 1px #868685;
   box-shadow: inset 0 0 0 1px var(--color-interactive-secondary);
 }
 .np-select-input-option-container--disabled {
@@ -290,7 +291,7 @@
        column-gap: 8px;
   -moz-column-gap: var(--size-8);
        column-gap: var(--size-8);
-  color: #37517e;
+  color: #0e0f0c;
   color: var(--color-content-primary);
 }
 .np-select-input-option-content-icon {
@@ -306,7 +307,7 @@
   overflow: hidden;
 }
 .np-select-input-option-content-text-secondary {
-  color: #5d7079;
+  color: #454745;
   color: var(--color-content-secondary);
 }
 .np-select-input-option-content-text-within-trigger {
@@ -350,11 +351,11 @@
 }
 .np-select-input-addon--interactive {
   pointer-events: auto;
-  color: #c9cbce;
+  color: #868685;
   color: var(--color-interactive-secondary);
 }
 .np-select-input-addon--interactive:hover {
-  color: #b5b7ba;
+  color: #6c6c6b;
   color: var(--color-interactive-secondary-hover);
 }
 .np-select-input-addon--interactive:focus {
@@ -367,6 +368,6 @@
 .np-select-input-addon-separator {
   height: 24px;
   height: var(--size-24);
-  border-inline-start: 1px solid rgba(0,0,0,0.10196);
+  border-inline-start: 1px solid rgba(14,15,12,0.12157);
   border-inline-start: 1px solid var(--color-border-neutral);
 }