@transferwise/components 46.165.5 → 46.167.0

package/build/styles/Accordion/Accordion.css

@@ -9,7 +9,8 @@
   background-color: transparent;
 }
 .np-accordion-item.np-accordion-item--dark .media-body,
-.np-accordion-item.np-accordion-item--dark .np-text-title-body {
+.np-accordion-item.np-accordion-item--dark .np-text-title-body,
+.np-accordion-item.np-accordion-item--dark .wds-text-title-body {
   color: #ffffff;
 }
 .np-accordion-item__content {
@@ -23,7 +24,7 @@
   }
 }
 .np-accordion-item .np-option .np-option__title {
-  font-weight: var(--font-weight-semi-bold);
+  font-weight: var(--wds-font-weight-body-bold);
 }
 .np-theme-personal .np-accordion-item--with-media .media {
   display: flex;
@@ -38,13 +39,13 @@
   align-items: flex-start;
 }
 .np-theme-personal .np-accordion-item .decision__title {
-  font-size: var(--font-size-18);
+  font-size: var(--wds-font-size-title-body);
 }
 .np-theme-personal .np-accordion-item .np-option .np-option__title {
   margin-block-end: 0;
-  font-size: var(--font-size-18);
-  letter-spacing: var(--letter-spacing-negative-xs);
-  line-height: var(--line-height-24);
+  font-size: var(--wds-font-size-title-body);
+  letter-spacing: var(--wds-letter-spacing-title-body);
+  line-height: var(--wds-line-height-title-body);
 }
 .np-theme-personal .np-accordion-item .np-option .circle-sm {
   background-color: transparent;

package/build/styles/Body/Body.css

@@ -1,3 +1,4 @@
-.np-text--pre-line {
+.np-text--pre-line,
+.wds-text--pre-line {
   white-space: pre-line;
 }

package/build/styles/Calendar/Calendar.css

@@ -7,7 +7,7 @@
   border: transparent;
   border-radius: var(--radius-small);
   background-color: transparent;
-  font-weight: var(--font-weight-semi-bold);
+  font-weight: var(--wds-font-weight-title-screen);
   color: var(--color-content-primary);
 }
 @media (max-width: 320px) {
@@ -89,10 +89,11 @@
   text-decoration-color: var(--color-content-tertiary);
 }
 .wds-Calendar__option--day {
-  block-size: var(--size-40);
+  --circleSize: var(--size-40);
+  block-size: var(--circleSize);
+  line-height: var(--circleSize);
+  inline-size: var(--circleSize);
   border-radius: var(--radius-full);
-  line-height: var(--size-40);
-  inline-size: var(--size-40);
   padding: 0;
   display: inline-flex;
   align-items: center;

package/build/styles/Calendar/TableLink/TableLink.css

@@ -7,7 +7,7 @@
   border: transparent;
   border-radius: var(--radius-small);
   background-color: transparent;
-  font-weight: var(--font-weight-semi-bold);
+  font-weight: var(--wds-font-weight-title-screen);
   color: var(--color-content-primary);
 }
 @media (max-width: 320px) {
@@ -89,10 +89,11 @@
   text-decoration-color: var(--color-content-tertiary);
 }
 .wds-Calendar__option--day {
-  block-size: var(--size-40);
+  --circleSize: var(--size-40);
+  block-size: var(--circleSize);
+  line-height: var(--circleSize);
+  inline-size: var(--circleSize);
   border-radius: var(--radius-full);
-  line-height: var(--size-40);
-  inline-size: var(--size-40);
   padding: 0;
   display: inline-flex;
   align-items: center;

package/build/styles/CardContainer/CardContainer.css

@@ -0,0 +1,108 @@
+.wds-card-container {
+  --CardContainer-shadow: var(--CardContainer-theme-shadow, none);
+  --CardContainer-background-color: var(--color-background-screen);
+  --CardContainer-border-color: var(--color-border-neutral);
+  --CardContainer-border-radius: var(--radius-large);
+  --CardContainer-padding-block: var(--size-8);
+  --CardContainer-padding-inline: var(--size-8);
+  background-color: var(--CardContainer-background-color);
+  border: 1px solid var(--CardContainer-border-color);
+  border-radius: var(--CardContainer-border-radius);
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  padding-block: var(--CardContainer-padding-block);
+  padding-inline: var(--CardContainer-padding-inline);
+  inline-size: 100%;
+}
+@media (min-width: 840px) {
+  .wds-card-container {
+    --CardContainer-padding-block: var(--size-16);
+    --CardContainer-padding-inline: var(--size-16);
+  }
+}
+.wds-card-container--padding-none {
+  --CardContainer-padding-block: 0px;
+  --CardContainer-padding-inline: 0px;
+  overflow: clip;
+}
+.wds-card-container--active {
+  --CardContainer-background-color: var(--color-background-elevated);
+  --CardContainer-border-color: color-mix(in srgb, var(--color-border-neutral) 25%, transparent);
+  box-shadow: var(--CardContainer-shadow);
+}
+.wds-card-container--inactive {
+  --CardContainer-background-color: color-mix(in srgb, var(--color-background-neutral) 25%, transparent);
+  border-width: 0;
+  padding-block: calc(var(--CardContainer-padding-block) + 1px);
+  padding-inline: calc(var(--CardContainer-padding-inline) + 1px);
+  position: relative;
+}
+.wds-card-container--interactive:has(
+      > a[href]:hover,
+      > button:enabled:hover,
+      > a[href]:focus-visible,
+      > button:enabled:focus-visible
+    ).wds-card-container--active {
+  --CardContainer-border-color: color-mix(in srgb, var(--color-border-neutral) 75%, transparent);
+}
+.wds-card-container--interactive:has(
+      > a[href]:hover,
+      > button:enabled:hover,
+      > a[href]:focus-visible,
+      > button:enabled:focus-visible
+    ).wds-card-container--inactive {
+  --CardContainer-background-color: color-mix(in srgb, var(--color-background-neutral-hover) 25%, transparent);
+}
+.wds-card-container--interactive:has(> a[href]:active, > button:enabled:active).wds-card-container--active {
+  --CardContainer-border-color: var(--color-border-neutral);
+}
+.wds-card-container--interactive:has(> a[href]:active, > button:enabled:active).wds-card-container--inactive {
+  --CardContainer-background-color: color-mix(in srgb, var(--color-background-neutral-active) 25%, transparent);
+}
+.wds-card-container__border {
+  container-type: size;
+  inset: 0;
+  pointer-events: none;
+  position: absolute;
+}
+.wds-card-container__border svg {
+  display: block;
+  block-size: 100%;
+  inline-size: 100%;
+}
+.wds-card-container__border rect {
+  --CardContainer-border-dash-size: calc(var(--size-12) * 0.5);
+  --CardContainer-border-stroke-radius: calc(min(var(--CardContainer-border-radius), 50cqh, 50cqw) - 0.5px);
+  fill: none;
+  block-size: calc(100% - 1px);
+  rx: var(--CardContainer-border-stroke-radius);
+  ry: var(--CardContainer-border-stroke-radius);
+  stroke: var(--color-border-neutral);
+  stroke-dasharray: var(--CardContainer-border-dash-size) var(--CardContainer-border-dash-size);
+  inline-size: calc(100% - 1px);
+  x: 0.5px;
+  y: 0.5px;
+}
+/**
+ * The active spotlight's resting shadow, only designed for the light themes. Set on every theme
+ * root, as a nested ThemeProvider renders its own, so a card follows its nearest theme: a dark or
+ * green provider inside a light one turns the shadow off.
+ *
+ * There is no shadow or elevation token in @transferwise/neptune-tokens, so the value is
+ * component-scoped for now, the way PromoCard scopes `--Card-box-shadow`. It is the "Card Active
+ * shadow" effect style from Figma: `#0e0f0c` at 4%, kept literal so it doesn't drift with a
+ * theme's tokens. Collapses to a token reference once one is minted.
+ */
+.np-theme-personal {
+  --CardContainer-theme-shadow: 0 2px 12px rgba(14, 15, 12, 0.04), 0 2px 32px rgba(14, 15, 12, 0.04);
+}
+.np-theme-personal.np-theme-personal--dark,
+    .np-theme-personal.np-theme-personal--bright-green,
+    .np-theme-personal.np-theme-personal--forest-green,
+    .np-theme-personal.np-theme-business--dark,
+    .np-theme-personal.np-theme-business--bright-green,
+    .np-theme-personal.np-theme-business--forest-green,
+    .np-theme-personal.np-theme-platform--forest-green {
+  --CardContainer-theme-shadow: none;
+}

package/build/styles/CardWidget/CardWidget.css

@@ -0,0 +1,78 @@
+.wds-card-widget {
+  --CardWidget-inset: var(--size-8);
+  --CardWidget-header-spacing: var(--size-8);
+  --CardWidget-actions-gap: var(--size-8);
+}
+.wds-card-widget__header {
+  align-items: center;
+  -moz-column-gap: var(--size-24);
+       column-gap: var(--size-24);
+  container-type: inline-size;
+  display: flex;
+  flex-wrap: wrap;
+  padding-inline-start: var(--CardWidget-inset);
+  row-gap: var(--size-8);
+}
+.wds-card-widget__header + .wds-card-widget__content {
+  margin-block-start: var(--CardWidget-header-spacing);
+}
+.wds-card-widget__title {
+  align-items: center;
+  color: var(--color-content-secondary);
+  display: grid;
+  flex: 1 1 0;
+  margin: 0;
+  min-block-size: var(--size-32);
+}
+@container (width <= 360px) {
+  .wds-card-widget__title {
+    flex-basis: auto;
+  }
+}
+.wds-card-widget__title-link.np-link {
+  color: inherit;
+  display: inline;
+  font: inherit;
+  justify-self: start;
+  letter-spacing: inherit;
+  text-align: start;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+.wds-card-widget__title-link.np-link:hover,
+.wds-card-widget__title-link.np-link:focus-visible {
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+}
+.wds-card-widget__title-link.np-link .tw-icon {
+  display: inline-block;
+  vertical-align: text-bottom;
+}
+.wds-card-widget__title-link.np-link .wds-card-widget__title-chevron {
+  white-space: nowrap;
+}
+.wds-card-widget__title-link.np-link .wds-card-widget__title-chevron .tw-icon {
+  margin: 0;
+}
+.wds-card-widget__actions {
+  align-self: start;
+  align-items: center;
+  display: flex;
+  flex: none;
+  gap: var(--CardWidget-actions-gap);
+}
+.wds-card-widget--with-header .wds-card-widget__content {
+  padding-inline: var(--CardWidget-inset);
+}
+.wds-card-widget:has(.wds-card-widget__title-link:hover, .wds-card-widget__title-link:focus-visible).wds-card-container--active {
+  --CardContainer-border-color: color-mix(in srgb, var(--color-border-neutral) 75%, transparent);
+}
+.wds-card-widget:has(.wds-card-widget__title-link:hover, .wds-card-widget__title-link:focus-visible).wds-card-container--inactive {
+  --CardContainer-background-color: color-mix(in srgb, var(--color-background-neutral-hover) 25%, transparent);
+}
+.wds-card-widget:has(.wds-card-widget__title-link:active).wds-card-container--active {
+  --CardContainer-border-color: var(--color-border-neutral);
+}
+.wds-card-widget:has(.wds-card-widget__title-link:active).wds-card-container--inactive {
+  --CardContainer-background-color: color-mix(in srgb, var(--color-background-neutral-active) 25%, transparent);
+}

package/build/styles/Chips/Chip/Chip.css

@@ -70,7 +70,7 @@
   border-color: var(--color-sentiment-negative-active) !important;
 }
 .np-theme-personal .np-chip {
-  font-weight: var(--font-weight-semi-bold);
+  font-weight: var(--wds-font-weight-body-bold);
   color: var(--color-interactive-primary);
   padding-block: 0;
   padding-inline: var(--size-16);
@@ -114,11 +114,13 @@
 .np-theme-personal .np-chip.np-chip--removable {
   position: relative;
 }
-.np-theme-personal .np-chip.np-chip--removable .np-text-body-default-bold {
+.np-theme-personal .np-chip.np-chip--removable .np-text-body-default-bold,
+.np-theme-personal .np-chip.np-chip--removable .wds-text-body-default-bold {
   padding-inline-end: var(--size-24);
 }
 @media (max-width: 320px) {
-  .np-theme-personal .np-chip.np-chip--removable .np-text-body-default-bold {
+  .np-theme-personal .np-chip.np-chip--removable .np-text-body-default-bold,
+  .np-theme-personal .np-chip.np-chip--removable .wds-text-body-default-bold {
     padding-inline-end: var(--size-48);
   }
 }

package/build/styles/Decision/Decision.css

@@ -1,9 +1,10 @@
 .np-decision .decision {
   display: flex;
 }
-.np-decision__tile--small .np-text-title-subsection {
-  font-size: var(--font-size-16);
-  line-height: var(--line-height-title);
+.np-decision__tile--small .np-text-title-subsection,
+.np-decision__tile--small .wds-text-title-subsection {
+  font-size: var(--wds-font-size-body-large);
+  line-height: var(--wds-line-height-body-large);
 }
 .np-decision:not(.flex-column) {
   gap: var(--size-24);

package/build/styles/Emphasis/Emphasis.css

@@ -1,5 +1,5 @@
 .emphasis {
-  font-weight: var(--font-weight-semi-bold);
+  font-weight: var(--wds-font-weight-body-bold);
   font-style: normal;
 }
 .emphasis--important {

package/build/styles/ExpressiveMoneyInput/AmountInput/AmountInput.css

@@ -2,6 +2,7 @@
   inline-size: 100%;
 }
 .wds-amount-input-input-container {
+  font-family: var(--wds-font-family-display-number);
   display: flex;
   justify-content: right;
   inline-size: 100%;
@@ -36,5 +37,5 @@
   flex-grow: 0;
   display: flex;
   align-items: center;
-  line-height: inherit;
+  line-height: 1em;
 }

package/build/styles/ExpressiveMoneyInput/ExpressiveMoneyInput.css

@@ -2,6 +2,7 @@
   inline-size: 100%;
 }
 .wds-amount-input-input-container {
+  font-family: var(--wds-font-family-display-number);
   display: flex;
   justify-content: right;
   inline-size: 100%;
@@ -36,7 +37,7 @@
   flex-grow: 0;
   display: flex;
   align-items: center;
-  line-height: inherit;
+  line-height: 1em;
 }
 .wds-currency-selector:disabled {
   opacity: 1 !important;

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

@@ -1,4 +1,91 @@
-.np-form-control {
+.np-form-control--size-lg {
+  margin: 0;color: var(--color-content-primary);word-wrap: break-word;
+}
+@supports (hyphenate-limit-chars: 1) {
+  .np-form-control--size-lg {
+    hyphens: auto;hyphenate-limit-chars: 7 3;
+  }
+  @media (min-width: 840px) {
+    .np-form-control--size-lg {
+      hyphenate-limit-chars: 8 3;
+    }
+  }
+  @media (min-width: 1160px) {
+    .np-form-control--size-lg {
+      hyphenate-limit-chars: 10 4 3;
+    }
+  }
+}@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
+  .np-form-control--size-lg {
+    hyphens: auto;-webkit-hyphenate-limit-before: 3;-webkit-hyphenate-limit-after: 3;
+  }
+  @media (min-width: 1160px) {
+    .np-form-control--size-lg {
+      -webkit-hyphenate-limit-before: 4;
+    }
+  }
+}.np-form-control--size-lg {
+  margin-block-end: initial;
+}
+.np-form-control--size-sm {
+  word-wrap: break-word;
+}
+@supports (hyphenate-limit-chars: 1) {
+  .np-form-control--size-sm {
+    hyphens: auto;hyphenate-limit-chars: 7 3;
+  }
+  @media (min-width: 840px) {
+    .np-form-control--size-sm {
+      hyphenate-limit-chars: 8 3;
+    }
+  }
+  @media (min-width: 1160px) {
+    .np-form-control--size-sm {
+      hyphenate-limit-chars: 10 4 3;
+    }
+  }
+}@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
+  .np-form-control--size-sm {
+    hyphens: auto;-webkit-hyphenate-limit-before: 3;-webkit-hyphenate-limit-after: 3;
+  }
+  @media (min-width: 1160px) {
+    .np-form-control--size-sm {
+      -webkit-hyphenate-limit-before: 4;
+    }
+  }
+}.np-form-control--size-auto,
+.np-form-control--size-md {
+  word-wrap: break-word;
+}
+@supports (hyphenate-limit-chars: 1) {
+  .np-form-control--size-auto,
+  .np-form-control--size-md {
+    hyphens: auto;hyphenate-limit-chars: 7 3;
+  }
+  @media (min-width: 840px) {
+    .np-form-control--size-auto,
+    .np-form-control--size-md {
+      hyphenate-limit-chars: 8 3;
+    }
+  }
+  @media (min-width: 1160px) {
+    .np-form-control--size-auto,
+    .np-form-control--size-md {
+      hyphenate-limit-chars: 10 4 3;
+    }
+  }
+}@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
+  .np-form-control--size-auto,
+  .np-form-control--size-md {
+    hyphens: auto;-webkit-hyphenate-limit-before: 3;-webkit-hyphenate-limit-after: 3;
+  }
+  @media (min-width: 1160px) {
+    .np-form-control--size-auto,
+    .np-form-control--size-md {
+      -webkit-hyphenate-limit-before: 4;
+    }
+  }
+}.np-form-control {
   --ring-width: 1px;
   --ring-color: var(--color-interactive-secondary);
   border: none;
@@ -35,10 +122,6 @@
   --ring-color: var(--color-interactive-primary);
 }
 .np-form-control--size-auto {
-  font-weight: var(--font-weight-regular);
-  font-size: var(--font-size-16);
-  line-height: 150%;
-  letter-spacing: -0.011em;
   word-wrap: break-word;
   padding-block-start: var(--size-12);
   padding-block-end: var(--size-12);
@@ -78,12 +161,8 @@
   padding-block-end: 0 !important;
 }
 .np-form-control--size-sm {
-  font-size: var(--font-size-14);
-  line-height: 155%;
-  letter-spacing: -0.006em;
-  font-weight: var(--font-weight-regular);
   word-wrap: break-word;
-  block-size: var(--size-32) !important;
+  block-size: calc(2 * var(--size-4) + var(--wds-font-size-body) * var(--wds-line-height-body)) !important;
 }
 @supports (hyphenate-limit-chars: 1) {
   .np-form-control--size-sm {
@@ -115,16 +194,12 @@
 }
 @media (max-width: 320px) {
   .np-form-control--size-sm {
-    block-size: var(--size-64) !important;
+    block-size: calc(2 * var(--size-8) + var(--wds-font-size-body) * var(--wds-line-height-body)) !important;
   }
 }
 .np-form-control--size-md {
-  font-weight: var(--font-weight-regular);
-  font-size: var(--font-size-16);
-  line-height: 150%;
-  letter-spacing: -0.011em;
   word-wrap: break-word;
-  block-size: var(--size-48) !important;
+  block-size: calc(2 * var(--size-12) + var(--wds-font-size-body-large) * var(--wds-line-height-body-large)) !important;
 }
 @supports (hyphenate-limit-chars: 1) {
   .np-form-control--size-md {
@@ -156,21 +231,15 @@
 }
 @media (max-width: 320px) {
   .np-form-control--size-md {
-    block-size: var(--size-72) !important;
+    block-size: calc(2 * var(--size-12) + var(--wds-font-size-body-large) * var(--wds-line-height-body-large)) !important;
   }
 }
 .np-form-control--size-lg {
   margin: 0;
   color: var(--color-content-primary);
-  line-height: var(--line-height-title);
-  letter-spacing: 0;
   word-wrap: break-word;
   margin-block-end: initial;
-  font-size: var(--font-size-22);
-  font-weight: var(--font-weight-semi-bold);
-  letter-spacing: -0.018em;
-  line-height: 125%;
-  block-size: var(--size-72) !important;
+  block-size: calc(2 * var(--size-24) + var(--wds-font-size-title-body) * var(--wds-line-height-title-body)) !important;
 }
 @supports (hyphenate-limit-chars: 1) {
   .np-form-control--size-lg {
@@ -205,6 +274,11 @@
 .np-form-control--size-lg + ol:not(.list-unstyled) {
   margin-block-start: var(--size-8);
 }
+@media (max-width: 320px) {
+  .np-form-control--size-lg {
+    block-size: calc(2 * var(--size-12) + var(--wds-font-size-title-body) * var(--wds-line-height-title-body)) !important;
+  }
+}
 .np-input::-moz-placeholder {
   color: var(--color-content-tertiary);
 }