@transferwise/neptune-css 0.0.0-experimental-69786e7 → 0.0.0-experimental-e05d6e4

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.css

@@ -6089,6 +6089,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);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@transferwise/neptune-css",
   "description": "Neptune CSS library",
-  "version": "0.0.0-experimental-69786e7",
+  "version": "0.0.0-experimental-e05d6e4",
   "license": "MIT",
   "repository": {
     "type": "git",

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,29 +24,7 @@ h6,
   color: var(--color-content-primary);
   line-height: var(--line-height-title);
   letter-spacing: 0;
-  
-  @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;
   
   + p,
   + ul:not(.list-unstyled),
@@ -236,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));