@transferwise/components 0.0.0-experimental-95dfe69 → 0.0.0-experimental-6a3d904

package/build/styles/SegmentedControl/SegmentedControl.css

@@ -6,11 +6,14 @@
 .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;
@@ -22,11 +25,15 @@
   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;
@@ -38,15 +45,19 @@
   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;
@@ -57,6 +68,7 @@
   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/build/styles/SlidingPanel/SlidingPanel.css

@@ -1,6 +1,7 @@
 .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;
@@ -65,20 +66,26 @@
   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/build/styles/Snackbar/Snackbar.css

@@ -15,11 +15,16 @@
   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);
 }
@@ -27,6 +32,7 @@
   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);
 }
@@ -40,6 +46,7 @@
   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,
@@ -54,6 +61,7 @@
 }
 .snackbar__text__action {
   flex-shrink: 0;
+  margin-inline-start: 16px;
   margin-inline-start: var(--size-16);
 }
 .snackbar__text-container-enter,

package/build/styles/StatusIcon/StatusIcon.css

@@ -24,6 +24,7 @@
 }
 .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/build/styles/Stepper/Stepper.css

@@ -14,15 +14,18 @@
 }
 .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;
 }
@@ -40,6 +43,7 @@
 .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/build/styles/Sticky/Sticky.css

@@ -1,3 +1,4 @@
 .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/build/styles/Switch/Switch.css

@@ -26,12 +26,14 @@
   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 {
@@ -57,5 +59,6 @@
   block-size: 20px;
   margin: 3px;
   border-radius: 50%;
+  background-color: #ffffff;
   background-color: var(--color-background-screen);
 }

package/build/styles/Table/Table.css

@@ -3,6 +3,7 @@
   background-color: transparent;
 }
 .np-table-outer-container {
+  border-radius: 16px;
   border-radius: var(--radius-medium);
 }
 .np-table-outer-container:focus {
@@ -28,7 +29,9 @@
   inline-size: 100%;
 }
 .np-table-container {
+  padding: 8px;
   padding: var(--size-8);
+  background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
   border-radius: inherit;
 }
@@ -80,9 +83,11 @@
 }
 .np-table-row--clickable .np-table-cell:first-child:before,
 .np-table-row--clickable .np-table-cell:last-child:before {
+  inline-size: calc(100% - 8px);
   inline-size: calc(100% - var(--size-8));
 }
 .np-table-row--clickable .np-table-cell:first-child:before {
+  inset-inline-start: 8px;
   inset-inline-start: var(--size-8);
   border-start-start-radius: 6px;
   border-end-start-radius: 6px;
@@ -102,6 +107,7 @@
   inset-inline-start: 0;
 }
 .np-table-row--cosmetic .np-table-cell {
+  block-size: 8px;
   block-size: var(--size-8);
   padding: 0;
 }
@@ -111,6 +117,7 @@
 }
 .np-table-header:first-child,
 .np-table-cell:first-child {
+  padding-inline-start: 16px;
   padding-inline-start: var(--size-16);
 }
 .np-table-header:first-child .np-table-header-content,
@@ -121,6 +128,7 @@
 }
 .np-table-header:last-child,
 .np-table-cell:last-child {
+  padding-inline-end: 16px;
   padding-inline-end: var(--size-16);
 }
 .np-table-header:last-child .np-table-header-content,
@@ -135,6 +143,7 @@
 }
 .np-table-header.np-table-header--right + .np-table-header:not(.np-table-header--right),
 .np-table-cell.np-table-cell--right + .np-table-cell:not(.np-table-cell--right) {
+  padding-inline-start: calc(8px + 12px);
   padding-inline-start: calc(var(--size-8) + var(--size-12));
 }
 .np-table-header.np-table-header--right .np-table-header-content,
@@ -149,9 +158,13 @@
 }
 .np-table-header {
   min-inline-size: 160px;
+  padding-inline-end: 8px;
   padding-inline-end: var(--size-8);
+  padding-block-end: 8px;
   padding-block-end: var(--size-8);
+  padding-inline-start: 8px;
   padding-inline-start: var(--size-8);
+  background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
   color: var(--color-interactive-primary);
 }
@@ -159,7 +172,9 @@
   padding-block-start: 5px;
   padding-block-end: 5px;
   white-space: nowrap;
+  line-height: 1.375rem;
   line-height: var(--line-height-22);
+  letter-spacing: 0.0125em;
   letter-spacing: var(--letter-spacing-sm);
 }
 .np-table-header--error {
@@ -170,7 +185,9 @@
   padding: 0;
 }
 .np-table-cell {
+  padding-block: 16px;
   padding-block: var(--size-16);
+  padding-inline: 8px;
   padding-inline: var(--size-8);
   position: relative;
 }
@@ -184,18 +201,23 @@
   white-space: nowrap;
 }
 .np-table-cell .tw-chevron {
+  margin-inline-start: 8px;
   margin-inline-start: var(--size-8);
 }
 .np-table-cell-separator {
+  margin-block-start: 4px;
   margin-block-start: var(--size-4);
+  margin-block-end: 4px;
   margin-block-end: var(--size-4);
   block-size: 1px;
+  background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
   padding: 0;
 }
 .np-table-cell .np-text-body-default-bold {
   display: flex;
   align-items: center;
+  color: #37517e;
   color: var(--color-content-primary);
   white-space: nowrap;
 }
@@ -216,10 +238,12 @@
   }
 }
 .np-table-content {
+  gap: 12px;
   gap: var(--size-12);
 }
 .np-table-content--success,
 .np-table-content--error {
+  gap: 4px;
   gap: var(--size-4);
 }
 .np-table-content--success .np-table-content-text,
@@ -232,7 +256,9 @@
 .np-table-content-body {
   display: flex;
   flex-direction: column;
+  font-size: 0.75rem;
   font-size: var(--font-size-12);
+  color: #768e9c;
   color: var(--color-content-tertiary);
 }
 .np-table-content--reversed {
@@ -246,5 +272,6 @@
   align-items: center;
 }
 .np-table-empty-data .status-circle {
+  margin-inline-end: 12px;
   margin-inline-end: var(--size-12);
 }

package/build/styles/Tabs/Tabs.css

@@ -5,27 +5,35 @@
   display: inline-block;
   outline: none;
   text-align: center;
+  padding: 8px;
   padding: var(--size-8);
   margin-block-end: -2px;
+  color: #37517e;
   color: var(--color-content-primary);
+  font-weight: 600;
   font-weight: var(--font-weight-semi-bold);
   transition: color 0.15s ease-in-out;
 }
 .np-theme-personal .tabs__tab {
+  color: #5d7079;
   color: var(--color-content-secondary);
+  font-weight: 400;
   font-weight: var(--font-weight-regular);
 }
 .tabs__tab--selected {
+  color: #0097c7;
   color: var(--color-content-accent);
 }
 .np-theme-personal .tabs__tab--selected {
   color: var(--color-interactive-primary);
+  font-weight: 600;
   font-weight: var(--font-weight-semi-bold);
 }
 .tabs__tab__content {
   border-radius: 2px;
 }
 .tabs__tab:not(.disabled):not(:disabled):focus-visible .tabs__tab__content {
+  color: #0084b3;
   color: var(--color-content-accent-hover);
 }
 .np-theme-personal .tabs__tab:not(.disabled):not(:disabled):focus-visible .tabs__tab__content {
@@ -35,6 +43,7 @@
 }
 @media (min-width: 1160px) {
   .tabs__tab:not(.disabled):not(:disabled):hover {
+    color: #0084b3;
     color: var(--color-content-accent-hover);
   }
   .np-theme-personal .tabs__tab:not(.disabled):not(:disabled):hover {
@@ -43,6 +52,7 @@
 }
 @media (hover: hover) {
   .tabs__tab:not(.disabled):not(:disabled):hover {
+    color: #0084b3;
     color: var(--color-content-accent-hover);
   }
   .np-theme-personal .tabs__tab:not(.disabled):not(:disabled):hover {
@@ -53,10 +63,13 @@
   list-style: none;
   padding: 0;
   margin: 0;
+  border-block-end: 1px solid rgba(0,0,0,0.10196);
+  border-block-end: 1px solid #0000001a;
   border-block-end: 1px solid var(--color-border-neutral);
 }
 .tabs__line {
   block-size: 2px;
+  background-color: #00a2dd;
   background-color: var(--color-interactive-accent);
   transition: transform cubic-bezier(0, 0.94, 0.62, 1) 350ms;
   position: relative;
@@ -72,6 +85,7 @@
   display: flex;
 }
 .tabs__panel--selected {
+  padding: 8px;
   padding: var(--size-8);
 }
 .tabs__panel.enter {
@@ -84,6 +98,8 @@
   opacity: 0;
 }
 .tabs--inverse .tabs__tab-list {
+  border-block-end-color: rgba(0,0,0,0.10196);
+  border-block-end-color: #0000001a;
   border-block-end-color: var(--color-border-neutral);
 }
 .tabs--inverse .tabs__tab:not(.tabs__tab--selected) {
@@ -91,8 +107,10 @@
 }
 .tabs.tabs--auto-width .tabs__tab {
   display: inline-flex;
+  min-block-size: 40px;
   min-block-size: var(--size-40);
   padding-block: 0;
+  padding-inline: 12px;
   padding-inline: var(--size-12);
   justify-content: center;
   align-items: center;
@@ -101,6 +119,7 @@
 @media (min-width: 600px) {
   .tabs.tabs--auto-width .tabs__tab {
     padding-block: 0;
+    padding-inline: 24px;
     padding-inline: var(--size-24);
   }
 }

package/build/styles/Tag/Tag.css

@@ -11,8 +11,10 @@
 }
 .wds-tag--small {
   border-radius: 6px;
+  font-size: 0.75rem;
   font-size: var(--font-size-12);
   padding-block: 1px;
+  padding-inline: 4px;
   padding-inline: var(--size-4);
 }
 .wds-tag--large {

package/build/styles/Tile/Tile.css

@@ -1,9 +1,11 @@
 .np-tile {
   min-inline-size: 120px;
+  border-radius: 10px;
   border-radius: var(--radius-small);
   inline-size: 100%;
 }
 .np-theme-personal .np-tile {
+  background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
 }
 .np-theme-personal .np-tile .tw-avatar .tw-avatar__content {
@@ -11,6 +13,7 @@
 }
 .np-tile.decision {
   margin-block-start: 0;
+  border: 1px solid rgba(0,0,0,0.10196);
   border: 1px solid var(--color-border-neutral);
 }
 .np-theme-personal .np-tile.decision {
@@ -23,6 +26,7 @@
   background-color: var(--color-background-neutral-active);
 }
 .np-theme-personal .np-tile.decision .np-text-body-default {
+  color: #5d7079;
   color: var(--color-content-secondary);
 }
 .np-tile.np-decision__tile--fixed-width {
@@ -32,7 +36,9 @@
   inline-size: 100%;
 }
 .np-tile__description {
+  color: #5d7079;
   color: var(--color-content-secondary);
+  margin-block-start: 12px;
   margin-block-start: var(--size-12);
   display: inline-block;
 }
@@ -40,17 +46,23 @@
   inline-size: 260px;
 }
 .np-tile--small .np-tile__description {
+  margin-block-start: 4px;
   margin-block-start: var(--size-4);
 }
 .np-tile:hover .tw-avatar {
   pointer-events: none;
 }
 .np-tile:hover .tw-avatar .tw-avatar__content {
+  background-color: #ffffff;
   background-color: var(--color-background-screen);
 }
 .np-tile__description {
+  color: #5d7079;
   color: var(--color-content-secondary);
+  font-weight: 400;
   font-weight: var(--font-weight-regular);
+  line-height: 1.5;
   line-height: var(--line-height-body);
+  margin-block-start: 12px;
   margin-block-start: var(--size-12);
 }

package/build/styles/Typeahead/Typeahead.css

@@ -7,8 +7,11 @@
 .typeahead .dropdown-menu {
   max-inline-size: 100%;
   inline-size: 100%;
+  margin-block-start: 8px;
   margin-block-start: var(--size-8);
+  scroll-padding-top: 8px;
   scroll-padding-top: var(--size-8);
+  scroll-padding-bottom: 8px;
   scroll-padding-bottom: var(--size-8);
   --ring-outline-offset: calc(-1 * var(--ring-outline-width));
 }
@@ -22,6 +25,7 @@
 .np-theme-personal--forest-green .typeahead .dropdown-menu,
 .np-theme-personal--bright-green .typeahead .dropdown-menu,
 .np-theme-personal--dark .typeahead .dropdown-menu {
+  background-color: #ffffff;
   background-color: var(--color-background-elevated);
 }
 .typeahead--multiple .np-chip {
@@ -71,17 +75,21 @@
   inline-size: auto;
 }
 .typeahead--multiple.typeahead--has-value .typeahead__input-container {
+  padding-inline-start: 8px;
   padding-inline-start: var(--size-8);
 }
 .typeahead--multiple.typeahead--has-value .input-group-addon + .typeahead__input-container {
   padding-inline-start: 0;
 }
 .typeahead--multiple.typeahead--has-value .typeahead__input {
+  margin-block-end: calc(-1 * 8px + 1px);
   margin-block-end: calc(-1 * var(--size-8) + 1px);
+  margin-inline-start: 4px;
   margin-inline-start: var(--size-4);
 }
 .typeahead--multiple.typeahead--has-value .typeahead__input-wrapper::after {
   content: "";
+  block-size: calc(8px - 1);
   block-size: calc(var(--size-8) - 1);
   inline-size: 100%;
 }
@@ -101,6 +109,7 @@
   margin: 0;
 }
 .typeahead--prompt {
+  margin-block-start: 4px;
   margin-block-start: var(--size-4);
 }
 .typeahead-sm.typeahead--multiple .typeahead__input-container {
@@ -116,9 +125,11 @@
   min-block-size: var(--input-height-large);
 }
 .typeahead-lg.typeahead--multiple .typeahead__input {
+  padding-block-start: calc(8px - 1);
   padding-block-start: calc(var(--size-8) - 1);
 }
 .typeahead-lg.typeahead--multiple .typeahead__input-wrapper {
+  padding-block-end: 8px;
   padding-block-end: var(--size-8);
   margin: 0;
 }
@@ -163,16 +174,19 @@
   color: var(--color-interactive-primary);
 }
 .np-theme-personal .typeahead .tw-icon-search {
+  color: #c9cbce;
   color: var(--color-interactive-secondary);
 }
 .np-theme-personal .typeahead .np-chip {
   margin-block-start: 9px !important;
 }
 .np-theme-personal .typeahead .np-chip--removable .np-text-body-default-bold {
+  padding-inline-end: 16px;
   padding-inline-end: var(--size-16);
 }
 @media (max-width: 320px) {
   .np-theme-personal .typeahead .np-chip--removable .np-text-body-default-bold {
+    padding-inline-end: 32px;
     padding-inline-end: var(--size-32);
   }
 }

package/build/styles/Typeahead/TypeaheadOption/TypeaheadOption.css

@@ -2,7 +2,9 @@
   color: #ffffff;
 }
 .typeahead__option.tw-dropdown-item--focused {
+  box-shadow: inset 0 0 0 1px #c9cbce;
   box-shadow: inset 0 0 0 1px var(--color-interactive-secondary);
+  border-radius: 10px;
   border-radius: var(--radius-small);
 }
 .dropdown-menu > li.typeahead__option:not(.active):not(.selected) > .dropdown-item:not([disabled]):not(.disabled):hover,

package/build/styles/Upload/Upload.css

@@ -20,7 +20,10 @@
   outline-offset: var(--ring-outline-offset);
 }
 .upload-error-message {
+  margin-block-start: 24px;
   margin-block-start: var(--padding-medium);
+  border-block-start: 1px solid rgba(0,0,0,0.10196);
+  border-block-start: 1px solid #0000001a;
   border-block-start: 1px solid var(--color-border-neutral);
   text-align: start;
 }

package/build/styles/UploadInput/UploadButton/UploadButton.css

@@ -1,10 +1,13 @@
 .np-upload-input__upload-button {
   position: relative;
+  padding: 16px;
   padding: var(--size-16);
   display: flex;
   align-items: center;
   margin: 0;
+  border-end-start-radius: 10px;
   border-end-start-radius: var(--radius-small);
+  border-end-end-radius: 10px;
   border-end-end-radius: var(--radius-small);
   border: var(--outerBorder);
   cursor: pointer;
@@ -16,9 +19,11 @@
   text-underline-offset: 0.3em;
 }
 .np-upload-input__upload-button .np-upload-input__title + .np-upload-input__text {
+  margin-block-start: 4px;
   margin-block-start: var(--size-4);
 }
 .np-upload-input__upload-button .np-upload-input__icon {
+  padding-inline-end: 16px;
   padding-inline-end: var(--size-16);
   color: var(--color-interactive-primary);
 }
@@ -55,19 +60,24 @@
   display: block;
   position: absolute;
   block-size: 1px;
+  background-color: rgba(0,0,0,0.10196);
   background-color: var(--color-border-neutral);
   content: " ";
+  inset-inline-start: 16px;
   inset-inline-start: var(--size-16);
+  inline-size: calc(100% - 2 * 16px);
   inline-size: calc(100% - 2 * var(--size-16));
   inset-block-start: 0;
 }
 .np-upload-input__upload-button--without-entries {
   border-block-start: var(--outerBorder);
+  border-radius: 10px;
   border-radius: var(--radius-small);
 }
 .np-upload-input__upload-button--enabled.is-dropping,
 .np-upload-input__upload-button--enabled:hover,
 .np-upload-input__upload-button--enabled:active {
+  background: rgba(134,167,189,0.10196);
   background: var(--color-background-neutral);
 }
 .np-upload-input__upload-button--enabled.is-dropping:before,

package/build/styles/UploadInput/UploadInput.css

@@ -1,11 +1,13 @@
 .np-upload-input {
   --outerBorder: 1px solid var(--color-interactive-secondary);
+  border-radius: 10px;
   border-radius: var(--radius-small);
 }
 .np-upload-input .np-upload-input__section {
   margin: 0;
 }
 .np-upload-input .np-upload-input__section:only-child .np-upload-input__item {
+  border-radius: 10px;
   border-radius: var(--radius-small);
   border-block-end: var(--outerBorder);
 }