@transferwise/components 0.0.0-experimental-c70eb7d → 0.0.0-experimental-0c7c46a

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

@@ -1,36 +1,4 @@
-.popover,
-.popover-content {
-  word-wrap: break-word;
-}
-@supports (hyphenate-limit-chars: 1) {
-  .popover,
-  .popover-content {
-    hyphens: auto;hyphenate-limit-chars: 7 3;
-  }
-  @media (min-width: 840px) {
-    .popover,
-    .popover-content {
-      hyphenate-limit-chars: 8 3;
-    }
-  }
-  @media (min-width: 1160px) {
-    .popover,
-    .popover-content {
-      hyphenate-limit-chars: 10 4 3;
-    }
-  }
-}@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
-  .popover,
-  .popover-content {
-    hyphens: auto;-webkit-hyphenate-limit-before: 3;-webkit-hyphenate-limit-after: 3;
-  }
-  @media (min-width: 1160px) {
-    .popover,
-    .popover-content {
-      -webkit-hyphenate-limit-before: 4;
-    }
-  }
-}.close {
+.close {
   float: inline-end;
   color: #0097c7;
   color: var(--color-content-accent);
@@ -98,6 +66,12 @@ 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);
@@ -284,8 +258,20 @@ button.close {
   margin-inline: 0;
 }
 .popover-title {
-  margin: 0;
   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;
@@ -293,11 +279,50 @@ button.close {
   border-start-end-radius: 2px;
   border-end-end-radius: 0;
   border-end-start-radius: 0;
-  color: #37517e !important;
   color: var(--color-content-primary) !important;
 }
+@supports (hyphenate-limit-chars: 1) {
+  .popover-title {
+    hyphens: auto;
+    hyphenate-limit-chars: 7 3;
+  }
+  @media (min-width: 840px) {
+    .popover-title {
+      hyphenate-limit-chars: 8 3;
+    }
+  }
+  @media (min-width: 1160px) {
+    .popover-title {
+      hyphenate-limit-chars: 10 4 3;
+    }
+  }
+}
+@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
+  .popover-title {
+    hyphens: auto;
+    -webkit-hyphenate-limit-before: 3;
+    -webkit-hyphenate-limit-after: 3;
+  }
+  @media (min-width: 1160px) {
+    .popover-title {
+      -webkit-hyphenate-limit-before: 4;
+    }
+  }
+}
+.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);

package/build/styles/styles/less/sequences.css

@@ -131,10 +131,6 @@
 .sequence > li .h2,
 .sequence > li .h3,
 .sequence > li .h4,
-.sequence > li .wds-text-title-screen,
-.sequence > li .wds-text-title-section,
-.sequence > li .wds-text-title-subsection,
-.sequence > li .wds-text-title-body,
 .sequence > li .btn-toolbar {
   margin-block-end: 16px;
 }
@@ -225,8 +221,7 @@
 }
 .sequence-inverse > .active .small,
 .sequence-inverse > .active .body-2,
-.sequence-inverse > .active .np-text-body-default,
-.sequence-inverse > .active .wds-text-body-default {
+.sequence-inverse > .active .np-text-body-default {
   color: #5d7079;
   color: var(--color-content-secondary);
 }

package/build/styles/styles/less/tooltip.css

@@ -1,30 +1,4 @@
-.tooltip-inner {
-  word-wrap: break-word;
-}
-@supports (hyphenate-limit-chars: 1) {
-  .tooltip-inner {
-    hyphens: auto;hyphenate-limit-chars: 7 3;
-  }
-  @media (min-width: 840px) {
-    .tooltip-inner {
-      hyphenate-limit-chars: 8 3;
-    }
-  }
-  @media (min-width: 1160px) {
-    .tooltip-inner {
-      hyphenate-limit-chars: 10 4 3;
-    }
-  }
-}@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
-  .tooltip-inner {
-    hyphens: auto;-webkit-hyphenate-limit-before: 3;-webkit-hyphenate-limit-after: 3;
-  }
-  @media (min-width: 1160px) {
-    .tooltip-inner {
-      -webkit-hyphenate-limit-before: 4;
-    }
-  }
-}.tooltip {
+.tooltip {
   position: absolute;
   z-index: 1070;
   display: block;
@@ -71,6 +45,12 @@
   padding-inline: 5px;
 }
 .tooltip-inner {
+  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;
   max-inline-size: 200px;
   min-inline-size: 120px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-c70eb7d",
+  "version": "0.0.0-experimental-0c7c46a",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {

package/src/Inputs/Input/Input.css

@@ -1,65 +1,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 {
+.np-form-control {
   --ring-width: 1px;
   --ring-color: var(--color-interactive-secondary);
   border: none;
@@ -100,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);
@@ -141,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;
@@ -180,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;
@@ -222,8 +179,17 @@
   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;
   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/src/Inputs/TextArea/TextArea.css

@@ -1,65 +1,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 {
+.np-form-control {
   --ring-width: 1px;
   --ring-color: var(--color-interactive-secondary);
   border: none;
@@ -100,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);
@@ -141,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;
@@ -180,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;
@@ -222,8 +179,17 @@
   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;
   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/src/Popover/Popover.css

@@ -1,6 +1,3 @@
-.np-popover__container.np-bottom-sheet .np-popover__title {
-  margin-block-end: initial;
-}
 .np-theme-personal .np-popover__container {
   border-radius: 16px;
   border-radius: var(--radius-medium);
@@ -29,8 +26,17 @@
   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;
   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/src/_deprecated/Select/Select.css

@@ -1,30 +1,4 @@
-.np-dropdown-menu > li > a {
-  word-wrap: break-word;
-}
-@supports (hyphenate-limit-chars: 1) {
-  .np-dropdown-menu > li > a {
-    hyphens: auto;hyphenate-limit-chars: 7 3;
-  }
-  @media (min-width: 840px) {
-    .np-dropdown-menu > li > a {
-      hyphenate-limit-chars: 8 3;
-    }
-  }
-  @media (min-width: 1160px) {
-    .np-dropdown-menu > li > a {
-      hyphenate-limit-chars: 10 4 3;
-    }
-  }
-}@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
-  .np-dropdown-menu > li > a {
-    hyphens: auto;-webkit-hyphenate-limit-before: 3;-webkit-hyphenate-limit-after: 3;
-  }
-  @media (min-width: 1160px) {
-    .np-dropdown-menu > li > a {
-      -webkit-hyphenate-limit-before: 4;
-    }
-  }
-}.np-select .np-dropdown-toggle {
+.np-select .np-dropdown-toggle {
   background-color: #ffffff;
   background-color: var(--color-background-screen);
   border: 1px solid #c9cbce;
@@ -172,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 {