@transferwise/neptune-css 14.24.3 → 14.24.5

package/dist/css/accordion.css

@@ -60,8 +60,6 @@
   line-height: 1.2;
   line-height: var(--line-height-title);
   letter-spacing: 0;
-  -webkit-hyphens: auto;
-          hyphens: auto;
   font-size: 1.125rem;
   font-size: var(--font-size-18);
   font-weight: 600;
@@ -69,6 +67,36 @@
   letter-spacing: -0.014em;
   line-height: 135%;
 }
+@supports (hyphenate-limit-chars: 1) {
+  .decision__title {
+    -webkit-hyphens: auto;
+            hyphens: auto;
+    hyphenate-limit-chars: 7 3;
+  }
+  @media (min-width: 768px) {
+    .decision__title {
+      hyphenate-limit-chars: 8 3;
+    }
+  }
+  @media (min-width: 992px) {
+    .decision__title {
+      hyphenate-limit-chars: 10 4 3;
+    }
+  }
+}
+@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
+  .decision__title {
+    -webkit-hyphens: auto;
+            hyphens: auto;
+    -webkit-hyphenate-limit-before: 3;
+    -webkit-hyphenate-limit-after: 3;
+  }
+  @media (min-width: 992px) {
+    .decision__title {
+      -webkit-hyphenate-limit-before: 4;
+    }
+  }
+}
 .decision__title + p,
 .decision__title + ul:not(.list-unstyled),
 .decision__title + ol:not(.list-unstyled) {

package/dist/css/decision.css

@@ -21,14 +21,40 @@
   line-height: 1.2;
   line-height: var(--line-height-title);
   letter-spacing: 0;
-  -webkit-hyphens: auto;
-          hyphens: auto;
   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 {
+    -webkit-hyphens: auto;
+            hyphens: auto;
+    hyphenate-limit-chars: 7 3;
+  }
+  @media (min-width: 768px) {
+    .decision__title {
+      hyphenate-limit-chars: 8 3;
+    }
+  }
+  @media (min-width: 992px) {
+    .decision__title {
+      hyphenate-limit-chars: 10 4 3;
+    }
+  }
+}@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
+  .decision__title {
+    -webkit-hyphens: auto;
+            hyphens: auto;
+    -webkit-hyphenate-limit-before: 3;
+    -webkit-hyphenate-limit-after: 3;
+  }
+  @media (min-width: 992px) {
+    .decision__title {
+      -webkit-hyphenate-limit-before: 4;
+    }
+  }
 }.decision__title + p,
 .decision__title + ul:not(.list-unstyled),
 .decision__title + ol:not(.list-unstyled) {

package/dist/css/dropdowns.css

@@ -335,14 +335,40 @@
   line-height: 1.2;
   line-height: var(--line-height-title);
   letter-spacing: 0;
-  -webkit-hyphens: auto;
-          hyphens: auto;
   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 {
+    -webkit-hyphens: auto;
+            hyphens: auto;
+    hyphenate-limit-chars: 7 3;
+  }
+  @media (min-width: 768px) {
+    .dropdown-header {
+      hyphenate-limit-chars: 8 3;
+    }
+  }
+  @media (min-width: 992px) {
+    .dropdown-header {
+      hyphenate-limit-chars: 10 4 3;
+    }
+  }
+}@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
+  .dropdown-header {
+    -webkit-hyphens: auto;
+            hyphens: auto;
+    -webkit-hyphenate-limit-before: 3;
+    -webkit-hyphenate-limit-after: 3;
+  }
+  @media (min-width: 992px) {
+    .dropdown-header {
+      -webkit-hyphenate-limit-before: 4;
+    }
+  }
 }.dropdown-header + p,
 .dropdown-header + ul:not(.list-unstyled),
 .dropdown-header + ol:not(.list-unstyled) {

package/dist/css/input-groups.css

@@ -1782,12 +1782,12 @@ input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-
 .np-checkbox.checkbox > label {
   display: flex;
   align-items: center;
-  padding: 8px 16px;
+  padding: 8px 16px   ;
   padding: var(--size-8) var(--size-16)   ;
 }
 [dir="rtl"] .np-radio.radio > label,
 [dir="rtl"] .np-checkbox.checkbox > label {
-  padding: 8px 16px;
+  padding: 8px 16px   ;
   padding: var(--size-8) var(--size-16)   ;
 }
 .np-radio.radio > label .np-checkbox__text,
@@ -2358,8 +2358,6 @@ html:not([dir="rtl"]) .input-group .form-control:not(:last-child) {
   line-height: 1.2;
   line-height: var(--line-height-title);
   letter-spacing: 0;
-  -webkit-hyphens: auto;
-          hyphens: auto;
   margin-bottom: 0;
   margin-bottom: initial;
   font-size: 1.375rem;
@@ -2383,6 +2381,46 @@ select[multiple].input-group-lg > .input-group-addon,
 select[multiple].input-group-lg > .input-group-btn .btn {
   height: auto;
 }
+@supports (hyphenate-limit-chars: 1) {
+  .input-group-lg > .form-control,
+  .input-group-lg > .input-group-addon,
+  .input-group-lg > .input-group-btn .btn {
+    -webkit-hyphens: auto;
+            hyphens: auto;
+    hyphenate-limit-chars: 7 3;
+  }
+  @media (min-width: 768px) {
+    .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: 992px) {
+    .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 {
+    -webkit-hyphens: auto;
+            hyphens: auto;
+    -webkit-hyphenate-limit-before: 3;
+    -webkit-hyphenate-limit-after: 3;
+  }
+  @media (min-width: 992px) {
+    .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,

package/dist/css/list-group.css

@@ -49,8 +49,6 @@
   line-height: 1.2;
   line-height: var(--line-height-title);
   letter-spacing: 0;
-  -webkit-hyphens: auto;
-          hyphens: auto;
   font-weight: 500;
   font-weight: var(--font-weight-medium);
   font-size: 0.875rem;
@@ -59,6 +57,34 @@
   line-height: 140%;
   color: #37517e;
   color: var(--color-content-primary);
+}@supports (hyphenate-limit-chars: 1) {
+  .list-group-item-heading {
+    -webkit-hyphens: auto;
+            hyphens: auto;
+    hyphenate-limit-chars: 7 3;
+  }
+  @media (min-width: 768px) {
+    .list-group-item-heading {
+      hyphenate-limit-chars: 8 3;
+    }
+  }
+  @media (min-width: 992px) {
+    .list-group-item-heading {
+      hyphenate-limit-chars: 10 4 3;
+    }
+  }
+}@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
+  .list-group-item-heading {
+    -webkit-hyphens: auto;
+            hyphens: auto;
+    -webkit-hyphenate-limit-before: 3;
+    -webkit-hyphenate-limit-after: 3;
+  }
+  @media (min-width: 992px) {
+    .list-group-item-heading {
+      -webkit-hyphenate-limit-before: 4;
+    }
+  }
 }.list-group-item-heading + p,
 .list-group-item-heading + ul:not(.list-unstyled),
 .list-group-item-heading + ol:not(.list-unstyled) {

package/dist/css/navbar.css

@@ -524,8 +524,6 @@
   line-height: 1.2;
   line-height: var(--line-height-title);
   letter-spacing: 0;
-  -webkit-hyphens: auto;
-          hyphens: auto;
   font-weight: 500;
   font-weight: var(--font-weight-medium);
   font-size: 0.875rem;
@@ -533,6 +531,36 @@
   letter-spacing: -0.006em;
   line-height: 140%;
 }
+@supports (hyphenate-limit-chars: 1) {
+  .dropdown-header {
+    -webkit-hyphens: auto;
+            hyphens: auto;
+    hyphenate-limit-chars: 7 3;
+  }
+  @media (min-width: 768px) {
+    .dropdown-header {
+      hyphenate-limit-chars: 8 3;
+    }
+  }
+  @media (min-width: 992px) {
+    .dropdown-header {
+      hyphenate-limit-chars: 10 4 3;
+    }
+  }
+}
+@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
+  .dropdown-header {
+    -webkit-hyphens: auto;
+            hyphens: auto;
+    -webkit-hyphenate-limit-before: 3;
+    -webkit-hyphenate-limit-after: 3;
+  }
+  @media (min-width: 992px) {
+    .dropdown-header {
+      -webkit-hyphenate-limit-before: 4;
+    }
+  }
+}
 .dropdown-header + p,
 .dropdown-header + ul:not(.list-unstyled),
 .dropdown-header + ol:not(.list-unstyled) {

package/dist/css/neptune-addons.css

@@ -1823,6 +1823,36 @@ html:not([dir="rtl"]) .p-x-panel {
     padding-bottom: var(--size-96);
   }
 }
+@supports (hyphenate-limit-chars: 1) {
+  .np-text-hyphenated {
+    -webkit-hyphens: auto;
+            hyphens: auto;
+    hyphenate-limit-chars: 7 3;
+  }
+  @media (min-width: 768px) {
+    .np-text-hyphenated {
+      hyphenate-limit-chars: 8 3;
+    }
+  }
+  @media (min-width: 992px) {
+    .np-text-hyphenated {
+      hyphenate-limit-chars: 10 4 3;
+    }
+  }
+}
+@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
+  .np-text-hyphenated {
+    -webkit-hyphens: auto;
+            hyphens: auto;
+    -webkit-hyphenate-limit-before: 3;
+    -webkit-hyphenate-limit-after: 3;
+  }
+  @media (min-width: 992px) {
+    .np-text-hyphenated {
+      -webkit-hyphenate-limit-before: 4;
+    }
+  }
+}
 .border-bottom {
   border-bottom: 1px solid rgba(134,167,189,0.10196);
   border-bottom: 1px solid var(--color-background-neutral);

package/dist/css/neptune-core.css

@@ -82,7 +82,7 @@
   src: url("../fonts/WiseSans-Heavy.woff2") format("woff2");
 }
 /* stylelint-disable selector-max-empty-lines */
-/*! modern-normalize v2.0.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
+/*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */
 /*
 Document
 ========
@@ -103,10 +103,9 @@ html {
   -webkit-text-size-adjust: 100%;
   /* 2. Prevent adjustments of font size after orientation changes in iOS. */
   -moz-tab-size: 4;
+    -o-tab-size: 4;
+       tab-size: 4;
   /* 3. Use a more readable tab size (opinionated). */
-  -o-tab-size: 4;
-     tab-size: 4;
-  /* 3 */
 }
 /*
 Sections
@@ -117,33 +116,11 @@ body {
   /* Remove the margin in all browsers. */
 }
 /*
-Grouping content
-================
-*/
-/**
-1. Add the correct height in Firefox.
-2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
-*/
-hr {
-  height: 0;
-  /* 1 */
-  color: inherit;
-  /* 2 */
-}
-/*
 Text-level semantics
 ====================
 */
 /**
-Add the correct text decoration in Chrome, Edge, and Safari.
-*/
-abbr[title] {
-  text-decoration: underline;
-  -webkit-text-decoration: underline dotted;
-          text-decoration: underline dotted;
-}
-/**
-Add the correct font weight in Edge and Safari.
+Add the correct font weight in Chrome and Safari.
 */
 b,
 strong {
@@ -189,14 +166,10 @@ Tabular data
 ============
 */
 /**
-1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
-2. Correct table border color inheritance in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
+Correct table border color inheritance in Chrome and Safari. (https://issues.chromium.org/issues/40615503, https://bugs.webkit.org/show_bug.cgi?id=195016)
 */
 table {
-  text-indent: 0;
-  /* 1 */
-  border-color: inherit;
-  /* 2 */
+  border-color: currentcolor;
 }
 /*
 Forms
@@ -221,13 +194,6 @@ textarea {
   /* 2 */
 }
 /**
-Remove the inheritance of text transform in Edge and Firefox.
-*/
-button,
-select {
-  text-transform: none;
-}
-/**
 Correct the inability to style clickable types in iOS and Safari.
 */
 button,
@@ -237,26 +203,6 @@ button,
   -webkit-appearance: button;
 }
 /**
-Remove the inner border and padding in Firefox.
-*/
-::-moz-focus-inner {
-  border-style: none;
-  padding: 0;
-}
-/**
-Restore the focus styles unset by the previous rule.
-*/
-:-moz-focusring {
-  outline: 1px dotted ButtonText;
-}
-/**
-Remove the additional ':invalid' styles in Firefox.
-See: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737
-*/
-:-moz-ui-invalid {
-  box-shadow: none;
-}
-/**
 Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
 */
 legend {
@@ -769,8 +715,141 @@ h6,
   line-height: 1.2;
   line-height: var(--line-height-title);
   letter-spacing: 0;
-  -webkit-hyphens: auto;
-          hyphens: auto;
+}
+@supports (hyphenate-limit-chars: 1) {
+  .h1,
+  .h2,
+  .h3,
+  .h4,
+  .h5,
+  .h6,
+  .title-1,
+  .title-2,
+  .title-3,
+  .title-4,
+  .title-5,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  .np-text-title-screen,
+  .np-text-title-section,
+  .np-text-title-subsection,
+  .np-text-title-body,
+  .np-text-title-group {
+    -webkit-hyphens: auto;
+            hyphens: auto;
+    hyphenate-limit-chars: 7 3;
+  }
+  @media (min-width: 768px) {
+    .h1,
+    .h2,
+    .h3,
+    .h4,
+    .h5,
+    .h6,
+    .title-1,
+    .title-2,
+    .title-3,
+    .title-4,
+    .title-5,
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    .np-text-title-screen,
+    .np-text-title-section,
+    .np-text-title-subsection,
+    .np-text-title-body,
+    .np-text-title-group {
+      hyphenate-limit-chars: 8 3;
+    }
+  }
+  @media (min-width: 992px) {
+    .h1,
+    .h2,
+    .h3,
+    .h4,
+    .h5,
+    .h6,
+    .title-1,
+    .title-2,
+    .title-3,
+    .title-4,
+    .title-5,
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    .np-text-title-screen,
+    .np-text-title-section,
+    .np-text-title-subsection,
+    .np-text-title-body,
+    .np-text-title-group {
+      hyphenate-limit-chars: 10 4 3;
+    }
+  }
+}
+@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
+  .h1,
+  .h2,
+  .h3,
+  .h4,
+  .h5,
+  .h6,
+  .title-1,
+  .title-2,
+  .title-3,
+  .title-4,
+  .title-5,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  .np-text-title-screen,
+  .np-text-title-section,
+  .np-text-title-subsection,
+  .np-text-title-body,
+  .np-text-title-group {
+    -webkit-hyphens: auto;
+            hyphens: auto;
+    -webkit-hyphenate-limit-before: 3;
+    -webkit-hyphenate-limit-after: 3;
+  }
+  @media (min-width: 992px) {
+    .h1,
+    .h2,
+    .h3,
+    .h4,
+    .h5,
+    .h6,
+    .title-1,
+    .title-2,
+    .title-3,
+    .title-4,
+    .title-5,
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    .np-text-title-screen,
+    .np-text-title-section,
+    .np-text-title-subsection,
+    .np-text-title-body,
+    .np-text-title-group {
+      -webkit-hyphenate-limit-before: 4;
+    }
+  }
 }
 .h1 + p,
 .h2 + p,

package/dist/css/neptune.css

@@ -1600,7 +1600,7 @@
 
 /* stylelint-disable selector-max-empty-lines */
 
-/*! modern-normalize v2.0.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
+/*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */
 
 /*
 Document
@@ -1625,10 +1625,9 @@ html {
   -webkit-text-size-adjust: 100%;
   /* 2. Prevent adjustments of font size after orientation changes in iOS. */
   -moz-tab-size: 4;
+    -o-tab-size: 4;
+       tab-size: 4;
   /* 3. Use a more readable tab size (opinionated). */
-  -o-tab-size: 4;
-     tab-size: 4;
-  /* 3 */
 }
 
 /*
@@ -1641,40 +1640,13 @@ body {
   /* Remove the margin in all browsers. */
 }
 
-/*
-Grouping content
-================
-*/
-
-/**
-1. Add the correct height in Firefox.
-2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
-*/
-
-hr {
-  height: 0;
-  /* 1 */
-  color: inherit;
-  /* 2 */
-}
-
 /*
 Text-level semantics
 ====================
 */
 
 /**
-Add the correct text decoration in Chrome, Edge, and Safari.
-*/
-
-abbr[title] {
-  text-decoration: underline;
-  -webkit-text-decoration: underline dotted;
-          text-decoration: underline dotted;
-}
-
-/**
-Add the correct font weight in Edge and Safari.
+Add the correct font weight in Chrome and Safari.
 */
 
 b,
@@ -1731,15 +1703,11 @@ Tabular data
 */
 
 /**
-1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
-2. Correct table border color inheritance in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
+Correct table border color inheritance in Chrome and Safari. (https://issues.chromium.org/issues/40615503, https://bugs.webkit.org/show_bug.cgi?id=195016)
 */
 
 table {
-  text-indent: 0;
-  /* 1 */
-  border-color: inherit;
-  /* 2 */
+  border-color: currentcolor;
 }
 
 /*
@@ -1767,15 +1735,6 @@ textarea {
   /* 2 */
 }
 
-/**
-Remove the inheritance of text transform in Edge and Firefox.
-*/
-
-button,
-select {
-  text-transform: none;
-}
-
 /**
 Correct the inability to style clickable types in iOS and Safari.
 */
@@ -1787,32 +1746,6 @@ button,
   -webkit-appearance: button;
 }
 
-/**
-Remove the inner border and padding in Firefox.
-*/
-
-::-moz-focus-inner {
-  border-style: none;
-  padding: 0;
-}
-
-/**
-Restore the focus styles unset by the previous rule.
-*/
-
-:-moz-focusring {
-  outline: 1px dotted ButtonText;
-}
-
-/**
-Remove the additional ':invalid' styles in Firefox.
-See: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737
-*/
-
-:-moz-ui-invalid {
-  box-shadow: none;
-}
-
 /**
 Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
 */
@@ -2410,8 +2343,143 @@ h6,
   line-height: 1.2;
   line-height: var(--line-height-title);
   letter-spacing: 0;
-  -webkit-hyphens: auto;
-          hyphens: auto;
+}
+
+@supports (hyphenate-limit-chars: 1) {
+  .h1,
+  .h2,
+  .h3,
+  .h4,
+  .h5,
+  .h6,
+  .title-1,
+  .title-2,
+  .title-3,
+  .title-4,
+  .title-5,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  .np-text-title-screen,
+  .np-text-title-section,
+  .np-text-title-subsection,
+  .np-text-title-body,
+  .np-text-title-group {
+    -webkit-hyphens: auto;
+            hyphens: auto;
+    hyphenate-limit-chars: 7 3;
+  }
+  @media (min-width: 768px) {
+    .h1,
+    .h2,
+    .h3,
+    .h4,
+    .h5,
+    .h6,
+    .title-1,
+    .title-2,
+    .title-3,
+    .title-4,
+    .title-5,
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    .np-text-title-screen,
+    .np-text-title-section,
+    .np-text-title-subsection,
+    .np-text-title-body,
+    .np-text-title-group {
+      hyphenate-limit-chars: 8 3;
+    }
+  }
+  @media (min-width: 992px) {
+    .h1,
+    .h2,
+    .h3,
+    .h4,
+    .h5,
+    .h6,
+    .title-1,
+    .title-2,
+    .title-3,
+    .title-4,
+    .title-5,
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    .np-text-title-screen,
+    .np-text-title-section,
+    .np-text-title-subsection,
+    .np-text-title-body,
+    .np-text-title-group {
+      hyphenate-limit-chars: 10 4 3;
+    }
+  }
+}
+
+@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
+  .h1,
+  .h2,
+  .h3,
+  .h4,
+  .h5,
+  .h6,
+  .title-1,
+  .title-2,
+  .title-3,
+  .title-4,
+  .title-5,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  .np-text-title-screen,
+  .np-text-title-section,
+  .np-text-title-subsection,
+  .np-text-title-body,
+  .np-text-title-group {
+    -webkit-hyphens: auto;
+            hyphens: auto;
+    -webkit-hyphenate-limit-before: 3;
+    -webkit-hyphenate-limit-after: 3;
+  }
+  @media (min-width: 992px) {
+    .h1,
+    .h2,
+    .h3,
+    .h4,
+    .h5,
+    .h6,
+    .title-1,
+    .title-2,
+    .title-3,
+    .title-4,
+    .title-5,
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    .np-text-title-screen,
+    .np-text-title-section,
+    .np-text-title-subsection,
+    .np-text-title-body,
+    .np-text-title-group {
+      -webkit-hyphenate-limit-before: 4;
+    }
+  }
 }
 
 .h1 + p,
@@ -5954,6 +6022,38 @@ html:not([dir="rtl"]) .p-x-panel {
   }
 }
 
+@supports (hyphenate-limit-chars: 1) {
+  .np-text-hyphenated {
+    -webkit-hyphens: auto;
+            hyphens: auto;
+    hyphenate-limit-chars: 7 3;
+  }
+  @media (min-width: 768px) {
+    .np-text-hyphenated {
+      hyphenate-limit-chars: 8 3;
+    }
+  }
+  @media (min-width: 992px) {
+    .np-text-hyphenated {
+      hyphenate-limit-chars: 10 4 3;
+    }
+  }
+}
+
+@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
+  .np-text-hyphenated {
+    -webkit-hyphens: auto;
+            hyphens: auto;
+    -webkit-hyphenate-limit-before: 3;
+    -webkit-hyphenate-limit-after: 3;
+  }
+  @media (min-width: 992px) {
+    .np-text-hyphenated {
+      -webkit-hyphenate-limit-before: 4;
+    }
+  }
+}
+
 .border-bottom {
   border-bottom: 1px solid rgba(134,167,189,0.10196);
   border-bottom: 1px solid var(--color-background-neutral);
@@ -11332,13 +11432,13 @@ input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-
 .np-checkbox.checkbox > label {
   display: flex;
   align-items: center;
-  padding: 8px 16px;
+  padding: 8px 16px   ;
   padding: var(--size-8) var(--size-16)   ;
 }
 
 [dir="rtl"] .np-radio.radio > label,
 [dir="rtl"] .np-checkbox.checkbox > label {
-  padding: 8px 16px;
+  padding: 8px 16px   ;
   padding: var(--size-8) var(--size-16)   ;
 }
 
@@ -11993,8 +12093,6 @@ html:not([dir="rtl"]) .input-group .form-control:not(:last-child) {
   line-height: 1.2;
   line-height: var(--line-height-title);
   letter-spacing: 0;
-  -webkit-hyphens: auto;
-          hyphens: auto;
   margin-bottom: 0;
   margin-bottom: initial;
   font-size: 1.375rem;
@@ -12021,6 +12119,48 @@ select[multiple].input-group-lg > .input-group-btn .btn {
   height: auto;
 }
 
+@supports (hyphenate-limit-chars: 1) {
+  .input-group-lg > .form-control,
+  .input-group-lg > .input-group-addon,
+  .input-group-lg > .input-group-btn .btn {
+    -webkit-hyphens: auto;
+            hyphens: auto;
+    hyphenate-limit-chars: 7 3;
+  }
+  @media (min-width: 768px) {
+    .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: 992px) {
+    .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 {
+    -webkit-hyphens: auto;
+            hyphens: auto;
+    -webkit-hyphenate-limit-before: 3;
+    -webkit-hyphenate-limit-after: 3;
+  }
+  @media (min-width: 992px) {
+    .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,
@@ -12991,8 +13131,6 @@ li > a > .currency-flag:first-child {
   line-height: 1.2;
   line-height: var(--line-height-title);
   letter-spacing: 0;
-  -webkit-hyphens: auto;
-          hyphens: auto;
   font-size: 1.125rem;
   font-size: var(--font-size-18);
   font-weight: 600;
@@ -13001,6 +13139,38 @@ li > a > .currency-flag:first-child {
   line-height: 135%;
 }
 
+@supports (hyphenate-limit-chars: 1) {
+  .decision__title {
+    -webkit-hyphens: auto;
+            hyphens: auto;
+    hyphenate-limit-chars: 7 3;
+  }
+  @media (min-width: 768px) {
+    .decision__title {
+      hyphenate-limit-chars: 8 3;
+    }
+  }
+  @media (min-width: 992px) {
+    .decision__title {
+      hyphenate-limit-chars: 10 4 3;
+    }
+  }
+}
+
+@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
+  .decision__title {
+    -webkit-hyphens: auto;
+            hyphens: auto;
+    -webkit-hyphenate-limit-before: 3;
+    -webkit-hyphenate-limit-after: 3;
+  }
+  @media (min-width: 992px) {
+    .decision__title {
+      -webkit-hyphenate-limit-before: 4;
+    }
+  }
+}
+
 .decision__title + p,
 .decision__title + ul:not(.list-unstyled),
 .decision__title + ol:not(.list-unstyled) {
@@ -13510,8 +13680,6 @@ li > a > .currency-flag:first-child {
   line-height: 1.2;
   line-height: var(--line-height-title);
   letter-spacing: 0;
-  -webkit-hyphens: auto;
-          hyphens: auto;
   font-weight: 500;
   font-weight: var(--font-weight-medium);
   font-size: 0.875rem;
@@ -13520,6 +13688,38 @@ li > a > .currency-flag:first-child {
   line-height: 140%;
 }
 
+@supports (hyphenate-limit-chars: 1) {
+  .dropdown-header {
+    -webkit-hyphens: auto;
+            hyphens: auto;
+    hyphenate-limit-chars: 7 3;
+  }
+  @media (min-width: 768px) {
+    .dropdown-header {
+      hyphenate-limit-chars: 8 3;
+    }
+  }
+  @media (min-width: 992px) {
+    .dropdown-header {
+      hyphenate-limit-chars: 10 4 3;
+    }
+  }
+}
+
+@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
+  .dropdown-header {
+    -webkit-hyphens: auto;
+            hyphens: auto;
+    -webkit-hyphenate-limit-before: 3;
+    -webkit-hyphenate-limit-after: 3;
+  }
+  @media (min-width: 992px) {
+    .dropdown-header {
+      -webkit-hyphenate-limit-before: 4;
+    }
+  }
+}
+
 .dropdown-header + p,
 .dropdown-header + ul:not(.list-unstyled),
 .dropdown-header + ol:not(.list-unstyled) {
@@ -17338,8 +17538,6 @@ html:not([dir="rtl"]) .list-group-item {
   line-height: 1.2;
   line-height: var(--line-height-title);
   letter-spacing: 0;
-  -webkit-hyphens: auto;
-          hyphens: auto;
   font-weight: 500;
   font-weight: var(--font-weight-medium);
   font-size: 0.875rem;
@@ -17350,6 +17548,38 @@ html:not([dir="rtl"]) .list-group-item {
   color: var(--color-content-primary);
 }
 
+@supports (hyphenate-limit-chars: 1) {
+  .list-group-item-heading {
+    -webkit-hyphens: auto;
+            hyphens: auto;
+    hyphenate-limit-chars: 7 3;
+  }
+  @media (min-width: 768px) {
+    .list-group-item-heading {
+      hyphenate-limit-chars: 8 3;
+    }
+  }
+  @media (min-width: 992px) {
+    .list-group-item-heading {
+      hyphenate-limit-chars: 10 4 3;
+    }
+  }
+}
+
+@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
+  .list-group-item-heading {
+    -webkit-hyphens: auto;
+            hyphens: auto;
+    -webkit-hyphenate-limit-before: 3;
+    -webkit-hyphenate-limit-after: 3;
+  }
+  @media (min-width: 992px) {
+    .list-group-item-heading {
+      -webkit-hyphenate-limit-before: 4;
+    }
+  }
+}
+
 .list-group-item-heading + p,
 .list-group-item-heading + ul:not(.list-unstyled),
 .list-group-item-heading + ol:not(.list-unstyled) {
@@ -21530,8 +21760,6 @@ html:not([dir="rtl"]) .panel > .table-responsive > .table-bordered > tfoot > tr
   line-height: 1.2;
   line-height: var(--line-height-title);
   letter-spacing: 0;
-  -webkit-hyphens: auto;
-          hyphens: auto;
   font-size: 1.125rem;
   font-size: var(--font-size-18);
   font-weight: 600;
@@ -21545,6 +21773,38 @@ html:not([dir="rtl"]) .panel > .table-responsive > .table-bordered > tfoot > tr
   color: var(--color-content-primary) !important;
 }
 
+@supports (hyphenate-limit-chars: 1) {
+  .popover-title {
+    -webkit-hyphens: auto;
+            hyphens: auto;
+    hyphenate-limit-chars: 7 3;
+  }
+  @media (min-width: 768px) {
+    .popover-title {
+      hyphenate-limit-chars: 8 3;
+    }
+  }
+  @media (min-width: 992px) {
+    .popover-title {
+      hyphenate-limit-chars: 10 4 3;
+    }
+  }
+}
+
+@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
+  .popover-title {
+    -webkit-hyphens: auto;
+            hyphens: auto;
+    -webkit-hyphenate-limit-before: 3;
+    -webkit-hyphenate-limit-after: 3;
+  }
+  @media (min-width: 992px) {
+    .popover-title {
+      -webkit-hyphenate-limit-before: 4;
+    }
+  }
+}
+
 .popover-title + p,
 .popover-title + ul:not(.list-unstyled),
 .popover-title + ol:not(.list-unstyled) {

package/dist/css/popovers.css

@@ -333,8 +333,6 @@
   line-height: 1.2;
   line-height: var(--line-height-title);
   letter-spacing: 0;
-  -webkit-hyphens: auto;
-          hyphens: auto;
   font-size: 1.125rem;
   font-size: var(--font-size-18);
   font-weight: 600;
@@ -346,6 +344,34 @@
   border-bottom: 0;
   border-radius: 2px 2px 0 0;
   color: var(--color-content-primary) !important;
+}@supports (hyphenate-limit-chars: 1) {
+  .popover-title {
+    -webkit-hyphens: auto;
+            hyphens: auto;
+    hyphenate-limit-chars: 7 3;
+  }
+  @media (min-width: 768px) {
+    .popover-title {
+      hyphenate-limit-chars: 8 3;
+    }
+  }
+  @media (min-width: 992px) {
+    .popover-title {
+      hyphenate-limit-chars: 10 4 3;
+    }
+  }
+}@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
+  .popover-title {
+    -webkit-hyphens: auto;
+            hyphens: auto;
+    -webkit-hyphenate-limit-before: 3;
+    -webkit-hyphenate-limit-after: 3;
+  }
+  @media (min-width: 992px) {
+    .popover-title {
+      -webkit-hyphenate-limit-before: 4;
+    }
+  }
 }.popover-title + p,
 .popover-title + ul:not(.list-unstyled),
 .popover-title + ol:not(.list-unstyled) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@transferwise/neptune-css",
   "description": "Neptune CSS library",
-  "version": "14.24.3",
+  "version": "14.24.5",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -26,9 +26,9 @@
     "@transferwise/neptune-tokens": "^8.18.0"
   },
   "devDependencies": {
-    "gulp": "^5.0.0",
-    "modern-normalize": "^2.0.0",
-    "@transferwise/less-config": "3.1.1",
+    "gulp": "^5.0.1",
+    "modern-normalize": "^3.0.1",
+    "@transferwise/less-config": "3.1.2",
     "@wise/wds-configs": "0.0.0"
   },
   "publishConfig": {

package/src/less/addons/_spacing-utilities.less

@@ -46,3 +46,28 @@
     padding-bottom: var(--size-96);
   }
 }
+
+.np-text-hyphenated {
+  @supports (hyphenate-limit-chars: 1) {
+    hyphens: auto;
+    hyphenate-limit-chars: 7 3;
+
+    @media (--screen-md) {
+      hyphenate-limit-chars: 8 3;
+    }
+
+    @media (--screen-lg) {
+      hyphenate-limit-chars: 10 4 3;
+    }
+  }
+
+  @supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
+    hyphens: auto;
+    -webkit-hyphenate-limit-before: 3;
+    -webkit-hyphenate-limit-after: 3;
+
+    @media (--screen-lg) {
+      -webkit-hyphenate-limit-before: 4;
+    }
+  }
+}

package/src/less/core/_typography.less

@@ -24,7 +24,7 @@ h6,
   color: var(--color-content-primary);
   line-height: var(--line-height-title);
   letter-spacing: 0;
-  hyphens: auto;
+  .np-text-hyphenated;
   
   + p,
   + ul:not(.list-unstyled),
@@ -214,32 +214,9 @@ a,
 .np-text-display-medium,
 .np-text-display-small {
   letter-spacing: normal;
-
-  @supports (hyphenate-limit-chars: 1) {
-    hyphens: auto;
-    hyphenate-limit-chars: 7 3;
-
-    @media (--screen-md) {
-      hyphenate-limit-chars: 8 3;
-    }
-
-    @media (--screen-lg) {
-      hyphenate-limit-chars: 10 4 3;
-    }
-  }
-
-  @supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
-    hyphens: auto;
-    -webkit-hyphenate-limit-before: 3;
-    -webkit-hyphenate-limit-after: 3;
-
-    @media (--screen-lg) {
-      -webkit-hyphenate-limit-before: 4;
-    }
-  }
+  .np-text-hyphenated;
 }
 
-
 .np-text-display-extra-large,
 .np-text-display-large {
   .display-formatting(var(--size-64), normal, var(--font-weight-bold));