@transferwise/components 46.160.7 → 46.160.8

package/src/styles/less/input-groups.css

@@ -97,6 +97,7 @@ output {
   font-size: var(--font-size-16);
   line-height: 150%;
   letter-spacing: -0.011em;
+  word-wrap: break-word;
   background-clip: padding-box;
 }
 select.form-control {
@@ -106,6 +107,34 @@ textarea.form-control,
 select[multiple].form-control {
   block-size: auto;
 }
+@supports (hyphenate-limit-chars: 1) {
+  .form-control {
+    hyphens: auto;
+    hyphenate-limit-chars: 7 3;
+  }
+  @media (min-width: 840px) {
+    .form-control {
+      hyphenate-limit-chars: 8 3;
+    }
+  }
+  @media (min-width: 1160px) {
+    .form-control {
+      hyphenate-limit-chars: 10 4 3;
+    }
+  }
+}
+@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
+  .form-control {
+    hyphens: auto;
+    -webkit-hyphenate-limit-before: 3;
+    -webkit-hyphenate-limit-after: 3;
+  }
+  @media (min-width: 1160px) {
+    .form-control {
+      -webkit-hyphenate-limit-before: 4;
+    }
+  }
+}
 .form-control:not(.disabled):not(:disabled):focus {
   border-color: #0081ba;
   border-color: var(--color-interactive-accent-active);
@@ -287,6 +316,7 @@ fieldset[disabled] .checkbox label {
   letter-spacing: -0.006em;
   font-weight: 400;
   font-weight: var(--font-weight-regular);
+  word-wrap: break-word;
 }
 select.input-sm {
   min-block-size: 32px;
@@ -295,6 +325,34 @@ textarea.input-sm,
 select[multiple].input-sm {
   block-size: auto;
 }
+@supports (hyphenate-limit-chars: 1) {
+  .input-sm {
+    hyphens: auto;
+    hyphenate-limit-chars: 7 3;
+  }
+  @media (min-width: 840px) {
+    .input-sm {
+      hyphenate-limit-chars: 8 3;
+    }
+  }
+  @media (min-width: 1160px) {
+    .input-sm {
+      hyphenate-limit-chars: 10 4 3;
+    }
+  }
+}
+@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
+  .input-sm {
+    hyphens: auto;
+    -webkit-hyphenate-limit-before: 3;
+    -webkit-hyphenate-limit-after: 3;
+  }
+  @media (min-width: 1160px) {
+    .input-sm {
+      -webkit-hyphenate-limit-before: 4;
+    }
+  }
+}
 .form-group-sm .form-control,
 .navbar .form-control {
   block-size: 32px;
@@ -335,6 +393,7 @@ select[multiple].input-sm {
   font-size: var(--font-size-16);
   line-height: 150%;
   letter-spacing: -0.011em;
+  word-wrap: break-word;
 }
 select.input-lg {
   min-block-size: var(--input-height-large);
@@ -343,6 +402,34 @@ textarea.input-lg,
 select[multiple].input-lg {
   block-size: auto;
 }
+@supports (hyphenate-limit-chars: 1) {
+  .input-lg {
+    hyphens: auto;
+    hyphenate-limit-chars: 7 3;
+  }
+  @media (min-width: 840px) {
+    .input-lg {
+      hyphenate-limit-chars: 8 3;
+    }
+  }
+  @media (min-width: 1160px) {
+    .input-lg {
+      hyphenate-limit-chars: 10 4 3;
+    }
+  }
+}
+@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
+  .input-lg {
+    hyphens: auto;
+    -webkit-hyphenate-limit-before: 3;
+    -webkit-hyphenate-limit-after: 3;
+  }
+  @media (min-width: 1160px) {
+    .input-lg {
+      -webkit-hyphenate-limit-before: 4;
+    }
+  }
+}
 .form-group-lg {
   position: relative;
 }
@@ -1938,11 +2025,40 @@ input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-
   font-size: var(--font-size-16);
   line-height: 150%;
   letter-spacing: -0.011em;
+  word-wrap: break-word;
   display: block;
   inline-size: 100%;
   color: #768e9c;
   color: var(--color-content-tertiary);
 }
+@supports (hyphenate-limit-chars: 1) {
+  .form-control-placeholder {
+    hyphens: auto;
+    hyphenate-limit-chars: 7 3;
+  }
+  @media (min-width: 840px) {
+    .form-control-placeholder {
+      hyphenate-limit-chars: 8 3;
+    }
+  }
+  @media (min-width: 1160px) {
+    .form-control-placeholder {
+      hyphenate-limit-chars: 10 4 3;
+    }
+  }
+}
+@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
+  .form-control-placeholder {
+    hyphens: auto;
+    -webkit-hyphenate-limit-before: 3;
+    -webkit-hyphenate-limit-after: 3;
+  }
+  @media (min-width: 1160px) {
+    .form-control-placeholder {
+      -webkit-hyphenate-limit-before: 4;
+    }
+  }
+}
 .np-theme-personal .btn-input,
 .np-theme-personal .input-group,
 .np-theme-personal .form-control,
@@ -2166,6 +2282,7 @@ input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-
   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);
@@ -2226,6 +2343,44 @@ select[multiple].input-group-lg > .input-group-btn .btn {
     }
   }
 }
+@supports (hyphenate-limit-chars: 1) {
+  .input-group-lg > .form-control,
+  .input-group-lg > .input-group-addon,
+  .input-group-lg > .input-group-btn .btn {
+    hyphens: auto;
+    hyphenate-limit-chars: 7 3;
+  }
+  @media (min-width: 840px) {
+    .input-group-lg > .form-control,
+    .input-group-lg > .input-group-addon,
+    .input-group-lg > .input-group-btn .btn {
+      hyphenate-limit-chars: 8 3;
+    }
+  }
+  @media (min-width: 1160px) {
+    .input-group-lg > .form-control,
+    .input-group-lg > .input-group-addon,
+    .input-group-lg > .input-group-btn .btn {
+      hyphenate-limit-chars: 10 4 3;
+    }
+  }
+}
+@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
+  .input-group-lg > .form-control,
+  .input-group-lg > .input-group-addon,
+  .input-group-lg > .input-group-btn .btn {
+    hyphens: auto;
+    -webkit-hyphenate-limit-before: 3;
+    -webkit-hyphenate-limit-after: 3;
+  }
+  @media (min-width: 1160px) {
+    .input-group-lg > .form-control,
+    .input-group-lg > .input-group-addon,
+    .input-group-lg > .input-group-btn .btn {
+      -webkit-hyphenate-limit-before: 4;
+    }
+  }
+}
 .input-group-lg > .form-control + p,
 .input-group-lg > .input-group-addon + p,
 .input-group-lg > .input-group-btn .btn + p,
@@ -2251,6 +2406,7 @@ select[multiple].input-group-lg > .input-group-btn .btn {
   letter-spacing: -0.006em;
   font-weight: 400;
   font-weight: var(--font-weight-regular);
+  word-wrap: break-word;
 }
 select.input-group-sm > .form-control,
 select.input-group-sm > .input-group-addon {
@@ -2262,6 +2418,39 @@ select[multiple].input-group-sm > .form-control,
 select[multiple].input-group-sm > .input-group-addon {
   block-size: auto;
 }
+@supports (hyphenate-limit-chars: 1) {
+  .input-group-sm > .form-control,
+  .input-group-sm > .input-group-addon {
+    hyphens: auto;
+    hyphenate-limit-chars: 7 3;
+  }
+  @media (min-width: 840px) {
+    .input-group-sm > .form-control,
+    .input-group-sm > .input-group-addon {
+      hyphenate-limit-chars: 8 3;
+    }
+  }
+  @media (min-width: 1160px) {
+    .input-group-sm > .form-control,
+    .input-group-sm > .input-group-addon {
+      hyphenate-limit-chars: 10 4 3;
+    }
+  }
+}
+@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
+  .input-group-sm > .form-control,
+  .input-group-sm > .input-group-addon {
+    hyphens: auto;
+    -webkit-hyphenate-limit-before: 3;
+    -webkit-hyphenate-limit-after: 3;
+  }
+  @media (min-width: 1160px) {
+    .input-group-sm > .form-control,
+    .input-group-sm > .input-group-addon {
+      -webkit-hyphenate-limit-before: 4;
+    }
+  }
+}
 .input-group-sm > .form-control .icon,
 .input-group-sm > .input-group-addon .icon {
   font-size: 1.25rem;

package/src/styles/less/list-group.css

@@ -42,6 +42,7 @@
   line-height: 1.2;
   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;

package/src/styles/less/navbar.css

@@ -133,6 +133,7 @@
   letter-spacing: -0.006em;
   font-weight: 400;
   font-weight: var(--font-weight-regular);
+  word-wrap: break-word;
   text-align: start;
   background-color: #ffffff;
   background-color: var(--color-background-screen);
@@ -147,6 +148,34 @@
   transform: translateY(-10px) scale(0.95, 0.95);
   visibility: hidden;
 }
+@supports (hyphenate-limit-chars: 1) {
+  .dropdown-menu {
+    hyphens: auto;
+    hyphenate-limit-chars: 7 3;
+  }
+  @media (min-width: 840px) {
+    .dropdown-menu {
+      hyphenate-limit-chars: 8 3;
+    }
+  }
+  @media (min-width: 1160px) {
+    .dropdown-menu {
+      hyphenate-limit-chars: 10 4 3;
+    }
+  }
+}
+@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
+  .dropdown-menu {
+    hyphens: auto;
+    -webkit-hyphenate-limit-before: 3;
+    -webkit-hyphenate-limit-after: 3;
+  }
+  @media (min-width: 1160px) {
+    .dropdown-menu {
+      -webkit-hyphenate-limit-before: 4;
+    }
+  }
+}
 .np-theme-personal .dropdown-menu,
 .np-theme-personal--forest-green .dropdown-menu,
 .np-theme-personal--dark .dropdown-menu {
@@ -188,10 +217,39 @@
   letter-spacing: -0.006em;
   font-weight: 400;
   font-weight: var(--font-weight-regular);
+  word-wrap: break-word;
   color: #37517e;
   color: var(--color-content-primary);
   white-space: nowrap;
 }
+@supports (hyphenate-limit-chars: 1) {
+  .dropdown-menu > li > a {
+    hyphens: auto;
+    hyphenate-limit-chars: 7 3;
+  }
+  @media (min-width: 840px) {
+    .dropdown-menu > li > a {
+      hyphenate-limit-chars: 8 3;
+    }
+  }
+  @media (min-width: 1160px) {
+    .dropdown-menu > li > a {
+      hyphenate-limit-chars: 10 4 3;
+    }
+  }
+}
+@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
+  .dropdown-menu > li > a {
+    hyphens: auto;
+    -webkit-hyphenate-limit-before: 3;
+    -webkit-hyphenate-limit-after: 3;
+  }
+  @media (min-width: 1160px) {
+    .dropdown-menu > li > a {
+      -webkit-hyphenate-limit-before: 4;
+    }
+  }
+}
 .dropdown-menu > li > a .secondary {
   display: block;
   white-space: normal;
@@ -366,6 +424,7 @@
   line-height: 1.2;
   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;

package/src/styles/less/neptune-addons.css

@@ -1259,6 +1259,9 @@
     padding-block-end: var(--size-96);
   }
 }
+.np-text-hyphenated {
+  word-wrap: break-word;
+}
 @supports (hyphenate-limit-chars: 1) {
   .np-text-hyphenated {
     hyphens: auto;

package/src/styles/less/neptune-core.css

@@ -660,6 +660,7 @@ h6,
   line-height: 1.2;
   line-height: var(--line-height-title);
   letter-spacing: 0;
+  word-wrap: break-word;
 }
 @supports (hyphenate-limit-chars: 1) {
   .h1,
@@ -961,6 +962,65 @@ small,
   letter-spacing: -0.006em;
   font-weight: 400;
   font-weight: var(--font-weight-regular);
+  word-wrap: break-word;
+}
+@supports (hyphenate-limit-chars: 1) {
+  .body-2,
+  .body-3,
+  .small,
+  .tiny,
+  body,
+  small,
+  .np-text-body-default {
+    hyphens: auto;
+    hyphenate-limit-chars: 7 3;
+  }
+  @media (min-width: 840px) {
+    .body-2,
+    .body-3,
+    .small,
+    .tiny,
+    body,
+    small,
+    .np-text-body-default {
+      hyphenate-limit-chars: 8 3;
+    }
+  }
+  @media (min-width: 1160px) {
+    .body-2,
+    .body-3,
+    .small,
+    .tiny,
+    body,
+    small,
+    .np-text-body-default {
+      hyphenate-limit-chars: 10 4 3;
+    }
+  }
+}
+@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
+  .body-2,
+  .body-3,
+  .small,
+  .tiny,
+  body,
+  small,
+  .np-text-body-default {
+    hyphens: auto;
+    -webkit-hyphenate-limit-before: 3;
+    -webkit-hyphenate-limit-after: 3;
+  }
+  @media (min-width: 1160px) {
+    .body-2,
+    .body-3,
+    .small,
+    .tiny,
+    body,
+    small,
+    .np-text-body-default {
+      -webkit-hyphenate-limit-before: 4;
+    }
+  }
 }
 /* DEPRECATED: use .np-text-body-default-bold instead */
 /* stylelint-disable-next-line selector-list-comma-newline-after */
@@ -974,6 +1034,50 @@ small,
   letter-spacing: -0.006em;
   font-weight: 600;
   font-weight: var(--font-weight-semi-bold);
+  word-wrap: break-word;
+}
+@supports (hyphenate-limit-chars: 1) {
+  .control-2,
+  .label,
+  .control-label,
+  .np-text-body-default-bold {
+    hyphens: auto;
+    hyphenate-limit-chars: 7 3;
+  }
+  @media (min-width: 840px) {
+    .control-2,
+    .label,
+    .control-label,
+    .np-text-body-default-bold {
+      hyphenate-limit-chars: 8 3;
+    }
+  }
+  @media (min-width: 1160px) {
+    .control-2,
+    .label,
+    .control-label,
+    .np-text-body-default-bold {
+      hyphenate-limit-chars: 10 4 3;
+    }
+  }
+}
+@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
+  .control-2,
+  .label,
+  .control-label,
+  .np-text-body-default-bold {
+    hyphens: auto;
+    -webkit-hyphenate-limit-before: 3;
+    -webkit-hyphenate-limit-after: 3;
+  }
+  @media (min-width: 1160px) {
+    .control-2,
+    .label,
+    .control-label,
+    .np-text-body-default-bold {
+      -webkit-hyphenate-limit-before: 4;
+    }
+  }
 }
 /* DEPRECATED: use .np-text-body-large instead  */
 /* stylelint-disable-next-line selector-list-comma-newline-after */
@@ -986,6 +1090,45 @@ small,
   font-size: var(--font-size-16);
   line-height: 150%;
   letter-spacing: -0.011em;
+  word-wrap: break-word;
+}
+@supports (hyphenate-limit-chars: 1) {
+  .body-1,
+  .value,
+  .np-text-body-large {
+    hyphens: auto;
+    hyphenate-limit-chars: 7 3;
+  }
+  @media (min-width: 840px) {
+    .body-1,
+    .value,
+    .np-text-body-large {
+      hyphenate-limit-chars: 8 3;
+    }
+  }
+  @media (min-width: 1160px) {
+    .body-1,
+    .value,
+    .np-text-body-large {
+      hyphenate-limit-chars: 10 4 3;
+    }
+  }
+}
+@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
+  .body-1,
+  .value,
+  .np-text-body-large {
+    hyphens: auto;
+    -webkit-hyphenate-limit-before: 3;
+    -webkit-hyphenate-limit-after: 3;
+  }
+  @media (min-width: 1160px) {
+    .body-1,
+    .value,
+    .np-text-body-large {
+      -webkit-hyphenate-limit-before: 4;
+    }
+  }
 }
 /* DEPRECATED: use np-text-body-large-bold instead */
 /* stylelint-disable-next-line selector-list-comma-newline-after */
@@ -997,6 +1140,40 @@ small,
   font-size: var(--font-size-16);
   line-height: 150%;
   letter-spacing: -0.011em;
+  word-wrap: break-word;
+}
+@supports (hyphenate-limit-chars: 1) {
+  .control-1,
+  .np-text-body-large-bold {
+    hyphens: auto;
+    hyphenate-limit-chars: 7 3;
+  }
+  @media (min-width: 840px) {
+    .control-1,
+    .np-text-body-large-bold {
+      hyphenate-limit-chars: 8 3;
+    }
+  }
+  @media (min-width: 1160px) {
+    .control-1,
+    .np-text-body-large-bold {
+      hyphenate-limit-chars: 10 4 3;
+    }
+  }
+}
+@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
+  .control-1,
+  .np-text-body-large-bold {
+    hyphens: auto;
+    -webkit-hyphenate-limit-before: 3;
+    -webkit-hyphenate-limit-after: 3;
+  }
+  @media (min-width: 1160px) {
+    .control-1,
+    .np-text-body-large-bold {
+      -webkit-hyphenate-limit-before: 4;
+    }
+  }
 }
 a,
 .np-text-link-default,
@@ -1103,6 +1280,7 @@ a,
 .np-text-display-medium,
 .np-text-display-small {
   letter-spacing: normal;
+  word-wrap: break-word;
 }
 @supports (hyphenate-limit-chars: 1) {
   .np-text-display-extra-large,
@@ -1191,6 +1369,13 @@ a,
   font-weight: 400;
   font-weight: var(--font-weight-regular);
 }
+/* Disable hyphenation for Japanese, Thai, and Chinese — these languages use character-level breaks and should never insert hyphens. */
+:lang(ja),
+:lang(th),
+:lang(zh-CN),
+:lang(zh-HK) {
+  hyphens: none;
+}
 :lang(af) .np-text-display-extra-large,
 :lang(sq) .np-text-display-extra-large,
 :lang(eu) .np-text-display-extra-large,