@transferwise/components 0.0.0-experimental-4b93e2b → 0.0.0-experimental-f144cf1

package/build/styles/Button/Button.css

@@ -241,3 +241,6 @@
 .np-theme-personal--bright-green .wds-Button--secondary-neutral .wds-Button-avatars .np-circle {
   --circle-border-color: color-mix(in srgb, var(--Button-color) 12%, transparent);
 }
+[dir="rtl"] .wds-Button .tw-icon-chevron-right,[dir="rtl"] .wds-Button .tw-icon-arrow-right,[dir="rtl"] .wds-Button .tw-icon-chevron-left,[dir="rtl"] .wds-Button .tw-icon-arrow-left,[dir="rtl"] .wds-Button .tw-icon-arrow-diagonal-down,[dir="rtl"] .wds-Button .tw-icon-arrow-diagonal-up,[dir="rtl"] .wds-Button .tw-icon-list,[dir="rtl"] .wds-Button .tw-icon-activity {
+  scale: -1 1;
+}

package/build/styles/DateInput/DateInput.css

@@ -9,19 +9,6 @@
 .tw-date .tw-date--day {
   margin-block-end: 0;
 }
-[dir="rtl"] .tw-date .np-input {
-  text-align: end;
-}
-[dir="rtl"] .tw-date .np-input::-moz-placeholder {
-  text-align: start;
-}
-[dir="rtl"] .tw-date .np-input:-moz-placeholder {
-  text-align: start;
-}
-[dir="rtl"] .tw-date .np-input::placeholder,
-[dir="rtl"] .tw-date .np-input:placeholder-shown {
-  text-align: start;
-}
 @media (min-width: 600px) {
   .np-theme-personal .tw-date label {
     margin-block-end: 0;

package/build/styles/Inputs/Input/Input.css

@@ -39,6 +39,12 @@
   --ring-color: var(--color-interactive-primary);
 }
 .np-form-control--size-auto {
+  font-weight: 400;
+  font-weight: var(--font-weight-regular);
+  font-size: 1rem;
+  font-size: var(--font-size-16);
+  line-height: 150%;
+  letter-spacing: -0.011em;
   word-wrap: break-word;
   padding-block-start: 12px;
   padding-block-start: var(--size-12);
@@ -80,6 +86,12 @@
   padding-block-end: 0 !important;
 }
 .np-form-control--size-sm {
+  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;
   block-size: 32px !important;
   block-size: var(--size-32) !important;
@@ -119,6 +131,12 @@
   }
 }
 .np-form-control--size-md {
+  font-weight: 400;
+  font-weight: var(--font-weight-regular);
+  font-size: 1rem;
+  font-size: var(--font-size-16);
+  line-height: 150%;
+  letter-spacing: -0.011em;
   word-wrap: break-word;
   block-size: 48px !important;
   block-size: var(--size-48) !important;
@@ -166,6 +184,12 @@
   letter-spacing: 0;
   word-wrap: break-word;
   margin-block-end: initial;
+  font-size: 1.375rem;
+  font-size: var(--font-size-22);
+  font-weight: 600;
+  font-weight: var(--font-weight-semi-bold);
+  letter-spacing: -0.018em;
+  line-height: 125%;
   block-size: 72px !important;
   block-size: var(--size-72) !important;
 }

package/build/styles/Inputs/TextArea/TextArea.css

@@ -39,6 +39,12 @@
   --ring-color: var(--color-interactive-primary);
 }
 .np-form-control--size-auto {
+  font-weight: 400;
+  font-weight: var(--font-weight-regular);
+  font-size: 1rem;
+  font-size: var(--font-size-16);
+  line-height: 150%;
+  letter-spacing: -0.011em;
   word-wrap: break-word;
   padding-block-start: 12px;
   padding-block-start: var(--size-12);
@@ -80,6 +86,12 @@
   padding-block-end: 0 !important;
 }
 .np-form-control--size-sm {
+  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;
   block-size: 32px !important;
   block-size: var(--size-32) !important;
@@ -119,6 +131,12 @@
   }
 }
 .np-form-control--size-md {
+  font-weight: 400;
+  font-weight: var(--font-weight-regular);
+  font-size: 1rem;
+  font-size: var(--font-size-16);
+  line-height: 150%;
+  letter-spacing: -0.011em;
   word-wrap: break-word;
   block-size: 48px !important;
   block-size: var(--size-48) !important;
@@ -166,6 +184,12 @@
   letter-spacing: 0;
   word-wrap: break-word;
   margin-block-end: initial;
+  font-size: 1.375rem;
+  font-size: var(--font-size-22);
+  font-weight: 600;
+  font-weight: var(--font-weight-semi-bold);
+  letter-spacing: -0.018em;
+  line-height: 125%;
   block-size: 72px !important;
   block-size: var(--size-72) !important;
 }

package/build/styles/ListItem/ListItem.css

@@ -567,7 +567,7 @@
 .wds-list-item-control-wrapper {
   grid-area: control;
 }
-.wds-list-item-navigation .tw-icon-chevron-end {
+.wds-list-item-navigation .tw-icon-chevron-right {
   color: #c9cbce;
   color: var(--color-interactive-secondary);
   display: block;

package/build/styles/PhoneNumberInput/PhoneNumberInput.css

@@ -27,6 +27,3 @@
 .tw-telephone__number-input {
   flex: auto 1 1;
 }
-[dir="rtl"] .tw-telephone__prefix-option .np-select-input-option-content-title {
-  direction: ltr;
-}

package/build/styles/Popover/Popover.css

@@ -31,6 +31,12 @@
   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%;
 }
 @supports (hyphenate-limit-chars: 1) {
   .np-popover__container.np-bottom-sheet .np-popover__title {

package/build/styles/PromoCard/PromoCard.css

@@ -53,6 +53,9 @@
 .np-Card-indicatorIcon .tw-icon {
   color: var(--Card-indicator-icon-color);
 }
+[dir="rtl"] .np-Card-indicatorIcon .tw-icon {
+  transform: scaleX(-1);
+}
 .np-Card--checked,
 .np-Card--link {
   color: currentColor;

package/build/styles/Snackbar/Snackbar.css

@@ -1,79 +1,200 @@
-.snackbar {
-  text-align: center;
+.wds-Snackbar {
+  display: flex;
+  justify-content: center;
+  box-sizing: border-box;
+  padding-inline: 16px;
+  padding-inline: var(--size-16);
+  padding-block-end: calc(16px + env(safe-area-inset-bottom));
+  padding-block-end: calc(var(--size-16) + env(safe-area-inset-bottom));
   position: fixed;
   inset-block-end: 0;
   inset-inline-start: 0;
   inset-inline-end: 0;
   z-index: 1060;
 }
-.snackbar__text {
-  background: #37517e;
-  color: #ffffff;
-  display: inline-flex;
-  border-radius: 2px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
-  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);
-}
-.np-theme-personal .snackbar__text {
-  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);
-}
-.np-theme-personal .snackbar__text::after {
-  display: block;
-  border-radius: inherit;
-  block-size: 100%;
+@media (min-width: 600px) {
+  .wds-Snackbar {
+    padding-block-end: 24px;
+    padding-block-end: var(--size-24);
+  }
+}
+.wds-Snackbar--swipe-dismiss {
+  transition: transform 150ms cubic-bezier(1, 0, 1, 1);
+}
+.wds-Snackbar-container.wds-prompt {
+  box-sizing: border-box;
   inline-size: 100%;
-  content: "";
-  position: absolute;
-  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);
+  max-inline-size: 480px;
+  padding: 12px;
+  padding: var(--size-12);
+  gap: 8px;
+  gap: var(--size-8);
+  border-radius: 16px;
+  border-radius: var(--radius-medium);
+  text-align: start;
+  touch-action: pan-x pinch-zoom;
 }
-.np-theme-personal--dark .snackbar__text,
-.np-theme-personal--forest-green .snackbar__text {
-  box-shadow: none;
+.wds-Snackbar-container.wds-prompt .wds-prompt__content-wrapper--with-dismiss {
+  gap: 8px;
+  gap: var(--size-8);
+  grid-template-columns: auto minmax(0, 1fr);
 }
 @media (min-width: 600px) {
-  .snackbar__text {
-    inline-size: auto;
-    max-inline-size: 600px;
+  .wds-Snackbar-container.wds-prompt .wds-prompt__content-wrapper--with-dismiss {
+    grid-template-columns: auto minmax(0, 1fr) auto;
   }
 }
-.snackbar__text__action {
-  flex-shrink: 0;
-  margin-inline-start: 16px;
-  margin-inline-start: var(--size-16);
+.wds-Snackbar-container.wds-prompt .wds-prompt__media-wrapper {
+  color: var(--color-sentiment-content-primary);
+}
+@media (max-width: 320px) {
+  .wds-Snackbar-container.wds-prompt .wds-prompt__media-wrapper {
+    padding-block-start: 4px;
+    padding-block-start: var(--size-4);
+  }
+}
+@media (max-width: 320px) {
+  .wds-Snackbar-container.wds-prompt .wds-prompt__media-wrapper:has(.wds-Snackbar__media-asset > .tw-icon) {
+    padding-block-start: 8px;
+    padding-block-start: var(--size-8);
+  }
+}
+@media (max-width: 320px) {
+  .wds-Snackbar-container.wds-prompt .wds-prompt__media-wrapper:has(+ .wds-Snackbar__content .wds-Snackbar__action) {
+    padding-block-start: 8px;
+    padding-block-start: var(--size-8);
+  }
+}
+@media (max-width: 320px) {
+  .wds-Snackbar-container.wds-prompt .wds-prompt__media-wrapper:has(+ .wds-Snackbar__content .wds-Snackbar__action):has(.wds-Snackbar__media-asset > .tw-icon) {
+    padding-block-start: 12px;
+    padding-block-start: var(--size-12);
+  }
+}
+.wds-Snackbar-container.wds-prompt .wds-Snackbar__media-asset svg {
+  inline-size: 24px;
+  inline-size: var(--size-24);
+  block-size: 24px;
+  block-size: var(--size-24);
 }
-.snackbar__text-container-enter,
-.snackbar__text-container-exit {
-  transform: translateY(calc(100% + 10px));
+.wds-Snackbar-container.wds-prompt .wds-Snackbar__process-indicator .process-circle {
+  stroke: currentColor;
 }
-.snackbar__text-container-enter-active {
-  transform: translateY(-16px);
-  transform: translateY(calc(-16px - env(safe-area-inset-bottom)));
+.wds-Snackbar-container.wds-prompt .wds-prompt__dismiss.np-icon-button {
+  display: none;
+  align-self: flex-start;
+  margin-block-start: calc(4px - 1px);
+  margin-block-start: calc(var(--size-4) - 1px);
+  color: var(--color-sentiment-content-primary);
+  fill: var(--color-sentiment-content-primary);
+  background-color: transparent;
 }
 @media (min-width: 600px) {
-  .snackbar__text-container-enter-active {
-    transform: translateY(-24px);
+  .wds-Snackbar-container.wds-prompt .wds-prompt__dismiss.np-icon-button {
+    display: flex;
+  }
+}
+.wds-Snackbar-container.wds-prompt .wds-prompt__dismiss.np-icon-button:not(.disabled):not(:disabled):hover,
+.wds-Snackbar-container.wds-prompt .wds-prompt__dismiss.np-icon-button:not(.disabled):not(:disabled):active {
+  background-color: var(--color-sentiment-interactive-secondary-neutral);
+}
+.wds-Snackbar-container.wds-prompt .wds-prompt__dismiss.np-icon-button:before {
+  inset: calc(-1 * 12px);
+  inset: calc(-1 * var(--size-12));
+  inline-size: calc(24px + 12px * 2);
+  inline-size: calc(var(--size-24) + var(--size-12) * 2);
+  block-size: calc(24px + 12px * 2);
+  block-size: calc(var(--size-24) + var(--size-12) * 2);
+  border-radius: 16px;
+  border-radius: var(--radius-medium);
+}
+.wds-Snackbar-container.wds-prompt .wds-Snackbar__action {
+  flex-shrink: 0;
+}
+.wds-Snackbar-container.wds-prompt .wds-Snackbar__action .wds-Button-labelText {
+  color: var(--color-sentiment-content-primary);
+  font-weight: 500;
+  font-weight: var(--font-weight-medium);
+}
+.wds-Snackbar__content {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  gap: var(--size-8);
+  flex: 1 0 0;
+  min-block-size: 32px;
+  min-block-size: var(--size-32);
+  min-inline-size: 0;
+}
+.wds-Snackbar__message {
+  display: flex;
+  inline-size: auto;
+  flex: 1 0 0;
+  min-inline-size: 0;
+  align-self: stretch;
+}
+.wds-Snackbar__message > div {
+  display: flex;
+  flex: 1 0 0;
+  min-inline-size: 0;
+}
+.wds-Snackbar__body {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  flex: 1 0 0;
+  min-inline-size: 0;
+  align-self: stretch;
+  word-wrap: break-word;
+  word-break: break-word;
+  color: var(--color-sentiment-content-primary);
+  font-feature-settings: "liga" off, "clig" off;
+  font-family: 'Inter', Helvetica, Arial, sans-serif;
+  font-family: var(--font-family-regular);
+  font-size: 0.875rem;
+  font-size: var(--font-size-14);
+  font-style: normal;
+  font-weight: 500;
+  font-weight: var(--font-weight-medium);
+  line-height: 155%;
+  letter-spacing: -0.006em;
+}
+.wds-Snackbar-container-appear,
+.wds-Snackbar-container-enter {
+  opacity: 0;
+  transform: translateY(80px) scale(0.5);
+}
+.wds-Snackbar-container-appear-active,
+.wds-Snackbar-container-enter-active {
+  opacity: 1;
+  transform: translateY(0) scale(1);
+  transition: opacity 150ms linear, transform 300ms cubic-bezier(0, 0, 0, 1);
+}
+.wds-Snackbar-container-exit {
+  opacity: 1;
+  transform: translateY(0) scale(1);
+}
+.wds-Snackbar-container-exit-active {
+  opacity: 0;
+  transform: translateY(80px) scale(0.5);
+  transition: opacity 50ms linear 50ms, transform 150ms cubic-bezier(1, 0, 1, 1);
+}
+@media (prefers-reduced-motion: reduce) {
+  .wds-Snackbar--swipe-dismiss {
+    transition: none;
+  }
+  .wds-Snackbar-container-appear,
+  .wds-Snackbar-container-appear-active,
+  .wds-Snackbar-container-enter,
+  .wds-Snackbar-container-enter-active,
+  .wds-Snackbar-container-exit {
+    opacity: 1;
+    transform: none;
+    transition: none;
+  }
+  .wds-Snackbar-container-exit-active {
+    opacity: 0;
+    transform: none;
+    transition: none;
   }
 }

package/build/styles/_deprecated/Select/Select.css

@@ -146,6 +146,12 @@
   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 {

package/build/styles/css/accordion.css

@@ -60,6 +60,12 @@
   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%;
 }
 @supports (hyphenate-limit-chars: 1) {
   .decision__title {
@@ -96,6 +102,12 @@
   margin-block-start: var(--size-8);
 }
 .decision__content {
+  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;
   margin-block-start: 4px;
   margin-block-start: var(--size-4);

package/build/styles/css/button-groups.css

@@ -346,6 +346,12 @@
   }
 }
 .btn-group .secondary {
+  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);

package/build/styles/css/buttons.css

@@ -2,6 +2,8 @@
   block-size: 32px;
 }
 .btn {
+  line-height: 150%;
+  letter-spacing: -0.011em;
   word-wrap: break-word;
   display: inline-block;
   margin-block-end: 0;

package/build/styles/css/decision.css

@@ -22,6 +22,12 @@
   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%;
 }
 @supports (hyphenate-limit-chars: 1) {
   .decision__title {
@@ -58,6 +64,12 @@
   margin-block-start: var(--size-8);
 }
 .decision__content {
+  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;
   margin-block-start: 4px;
   margin-block-start: var(--size-4);

package/build/styles/css/dropdowns.css

@@ -11,6 +11,12 @@
   padding: 8px;
   margin: 0;
   list-style: none;
+  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;
   text-align: start;
   background-color: #ffffff;
@@ -89,6 +95,12 @@
   padding: var(--dropdown-link-padding);
   clear: both;
   border-radius: 3px;
+  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: #37517e;
   color: var(--color-content-primary);
@@ -285,8 +297,6 @@
   display: block;
   padding-block: 8px;
   padding-inline: 16px;
-  font-size: 0.875rem;
-  font-size: var(--font-size-14);
   line-height: 1.5;
   line-height: var(--line-height-body);
   color: #5d7079;
@@ -299,6 +309,12 @@
   line-height: var(--line-height-title);
   letter-spacing: 0;
   word-wrap: break-word;
+  font-weight: 500;
+  font-weight: var(--font-weight-medium);
+  font-size: 0.875rem;
+  font-size: var(--font-size-14);
+  letter-spacing: -0.006em;
+  line-height: 140%;
 }
 @supports (hyphenate-limit-chars: 1) {
   .dropdown-header {

package/build/styles/css/droppable.css

@@ -1,5 +1,11 @@
 .droppable {
   position: relative;
+  font-weight: 400;
+  font-weight: var(--font-weight-regular);
+  font-size: 1rem;
+  font-size: var(--font-size-16);
+  line-height: 150%;
+  letter-spacing: -0.011em;
   word-wrap: break-word;
   text-align: center;
   border: 1px solid #c9cbce;

package/build/styles/css/footer.css

@@ -1,6 +1,12 @@
 .footer {
   background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
+  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;
   padding-block-start: calc(8px * 10);
   padding-block-start: calc(var(--size-8) * 10);
@@ -55,6 +61,12 @@
 .footer .link-icon {
   color: #5d7079;
   color: var(--color-content-secondary);
+  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;
 }
 @supports (hyphenate-limit-chars: 1) {