@transferwise/components 46.165.5 → 46.167.0

package/src/styles/less/core/_typography.less

@@ -6,7 +6,7 @@
 
 // TITLE
 
-/* DEPRECATED: use .np-text-*-title instead */
+/* `.h*`, `.title-*`, `.np-text-title-*` are DEPRECATED: use `.wds-text-title-*` instead */
 /* stylelint-disable-next-line selector-list-comma-newline-after */
 .h1,
 .h2,
@@ -29,11 +29,14 @@ h6,
 .np-text-title-section,
 .np-text-title-subsection,
 .np-text-title-body,
-.np-text-title-group {
+.np-text-title-group,
+.wds-text-title-screen,
+.wds-text-title-section,
+.wds-text-title-subsection,
+.wds-text-title-body,
+.wds-text-title-group {
   margin: 0;
   color: var(--color-content-primary);
-  line-height: var(--line-height-title);
-  letter-spacing: 0;
   .np-text-hyphenated;
 
   + p,
@@ -43,86 +46,76 @@ h6,
   }
 }
 
-/* DEPRECATED: use .np-text-title-screen instead */
+/* DEPRECATED: use `.wds-text-title-screen` instead */
 /* stylelint-disable-next-line selector-list-comma-newline-after */
 .h1,
 .title-1,
 h1,
-.np-text-title-screen {
+.np-text-title-screen,
+.wds-text-title-screen {
+  &:extend(.wds-text-title-screen);
   margin-bottom: initial;
-  font-size: var(--font-size-30);
-  font-weight: var(--font-weight-semi-bold);
-  letter-spacing: -0.021em;
-  line-height: 115%;
 }
 
-/* DEPRECATED: use .np-text-title-section instead */
+/* DEPRECATED: use `.wds-text-title-section` instead */
 /* stylelint-disable-next-line selector-list-comma-newline-after */
 .h2,
 .title-2,
 h2,
-.np-text-title-section {
+.np-text-title-section,
+.wds-text-title-section {
+  &:extend(.wds-text-title-section);
   margin-bottom: initial;
-  font-weight: var(--font-weight-semi-bold);
-  font-size: var(--font-size-26);
-  letter-spacing: -0.02em;
-  line-height: 122%;
 }
 
-/* DEPRECATED: use .np-text-title-subsection instead */
+/* DEPRECATED: use `.wds-text-title-subsection` instead */
 /* stylelint-disable-next-line selector-list-comma-newline-after */
 .h3,
 .title-3,
 h3,
-.np-text-title-subsection {
+.np-text-title-subsection,
+.wds-text-title-subsection {
+  &:extend(.wds-text-title-subsection);
   margin-bottom: initial;
-  font-size: var(--font-size-22);
-  font-weight: var(--font-weight-semi-bold);
-  letter-spacing: -0.018em;
-  line-height: 125%;
 }
 
-/* DEPRECATED: use .np-text-title-body instead */
+/* DEPRECATED: use `.wds-text-title-body` instead */
 /* stylelint-disable-next-line selector-list-comma-newline-after */
 .h4,
 .title-4,
 h4,
-.np-text-title-body {
-  font-size: var(--font-size-18);
-  font-weight: var(--font-weight-semi-bold);
-  letter-spacing: -0.014em;
-  line-height: 135%;
+.np-text-title-body,
+.wds-text-title-body {
+  &:extend(.wds-text-title-body);
 }
 
-/* DEPRECATED: use .np-text-title-group instead */
+/* DEPRECATED: use `.wds-text-title-group` instead */
 /* stylelint-disable-next-line selector-list-comma-newline-after */
 .h5,
 .h6,
 .title-5,
 h5,
 h6,
-.np-text-title-group {
-  font-weight: var(--font-weight-medium);
-  font-size: var(--font-size-14);
-  letter-spacing: -0.006em;
-  line-height: 140%;
+.np-text-title-group,
+.wds-text-title-group {
+  &:extend(.wds-text-title-group);
 }
 
-/* DEPRECATED: use .np-text-title-body instead */
+/* DEPRECATED: use `.wds-text-title-body` instead */
 .lead {
   margin-bottom: var(--size-24);
-  font-size: var(--font-size-20);
-  line-height: var(--line-height-title);
+  font-size: var(--wds-font-size-title-body);
+  line-height: var(--wds-line-height-title-body);
 }
 
-// DEPRECATED: use .np-text-body-default instead
+// DEPRECATED: use `.wds-text-body-default` instead
 .tiny {
   color: var(--color-content-secondary);
 }
 
 // BODY
 
-/* DEPRECATED: use .np-text-body-default instead */
+/* DEPRECATED: use `.wds-text-body-default` instead */
 /* stylelint-disable-next-line selector-list-comma-newline-after */
 .body-2,
 .body-3,
@@ -130,49 +123,41 @@ h6,
 .tiny,
 body,
 small,
-.np-text-body-default {
-  font-size: var(--font-size-14);
-  line-height: 155%;
-  letter-spacing: -0.006em;
-  font-weight: var(--font-weight-regular);
+.np-text-body-default,
+.wds-text-body-default {
+  &:extend(.wds-text-body-default);
   .np-text-hyphenated;
 }
 
-/* DEPRECATED: use .np-text-body-default-bold instead */
+/* DEPRECATED: use `.wds-text-body-default-bold` instead */
 /* stylelint-disable-next-line selector-list-comma-newline-after */
 .control-2,
 
 // DEPRECATED: use `Field` component (or in some edge cases `Label` component) instead
 .label, .control-label,
 
-.np-text-body-default-bold {
-  font-size: var(--font-size-14);
-  line-height: 155%;
-  letter-spacing: -0.006em;
-  font-weight: var(--font-weight-semi-bold);
+.np-text-body-default-bold,
+.wds-text-body-default-bold {
+  &:extend(.wds-text-body-default-bold);
   .np-text-hyphenated;
 }
 
-/* DEPRECATED: use .np-text-body-large instead  */
+/* DEPRECATED: use `.wds-text-body-large` instead  */
 /* stylelint-disable-next-line selector-list-comma-newline-after */
 .body-1,
 .value,
-.np-text-body-large {
-  font-weight: var(--font-weight-regular);
-  font-size: var(--font-size-16);
-  line-height: 150%;
-  letter-spacing: -0.011em;
+.np-text-body-large,
+.wds-text-body-large {
+  &:extend(.wds-text-body-large);
   .np-text-hyphenated;
 }
 
-/* DEPRECATED: use np-text-body-large-bold instead */
+/* DEPRECATED: use `.wds-text-body-large-bold` instead */
 /* stylelint-disable-next-line selector-list-comma-newline-after */
 .control-1,
-.np-text-body-large-bold {
-  font-weight: var(--font-weight-semi-bold);
-  font-size: var(--font-size-16);
-  line-height: 150%;
-  letter-spacing: -0.011em;
+.np-text-body-large-bold,
+.wds-text-body-large-bold {
+  &:extend(.wds-text-body-large-bold);
   .np-text-hyphenated;
 }
 
@@ -181,37 +166,43 @@ small,
 a,
 .np-text-link-default,
 .np-text-link-large {
-  font-weight: var(--font-weight-semi-bold);
+  font-weight: var(--wds-font-weight-title-body);
   .link-underline();
 }
 
 .np-text-link-large {
-  font-size: var(--font-size-16);
+  font-size: var(--wds-font-size-body-large);
   letter-spacing: -0.011em;
   line-height: 150%;
 }
 
 .np-text-link-default {
-  font-size: var(--font-size-14);
+  font-size: var(--wds-font-size-body);
   letter-spacing: -0.006em;
   line-height: 155%;
 }
 
 // DISPLAY
 
-.np-text-display-number {
-  font-weight: var(--font-weight-semi-bold);
-  font-size: 40px;
-  line-height: 110%;
+/* DEPRECATED: use .wds-text-display-number-small instead */
+.np-text-display-number,
+.wds-text-display-number {
+  &:extend(.wds-text-display-number);
+}
+
+.np-text-display-number-small,
+.wds-text-display-number-small {
+  &:extend(.wds-text-display-number-small);
+}
+
+.np-text-display-number-medium,
+.wds-text-display-number-medium {
+  &:extend(.wds-text-display-number-medium);
 }
 
-.display-formatting(
-@font-size;
-@line-height;
-@font-weight: var(--font-weight-regular)) {
-  font-size: @font-size;
-  line-height: @line-height;
-  font-weight: @font-weight;
+.np-text-display-number-large,
+.wds-text-display-number-large {
+  &:extend(.wds-text-display-number-large);
 }
 
 .display-1,
@@ -225,26 +216,9 @@ a,
 .np-text-display-small {
   &,
   &--forced {
-    font-family: var(--font-family-display);
+    font-family: var(--wds-font-family-display);
     font-synthesis: none;
   }
-
-  :lang(ja) &,
-  :lang(th) &,
-  :lang(zh-CN) &,
-  :lang(zh-HK) & {
-    /**
-     * Wise Sans covers extended Latin glyphs for logged-in experiences and a small subset
-     * of Japanese ones for the logged out ones (exposed by the Editorial DS). Unfortunately,
-     * font files are browser-cached and we carried over to launchpad, where it causes issues
-     * for unsupported locales, especially those that share glyphs, like Japanese and Chinese.
-     * There are exceptions for small UI parts where Wise Sans is fine or expected — e.g. the
-     * numeric input of ExpressiveMoneyInput.
-     * Add `--forced` BEM modifier to the original class name to guarantee it.
-     */
-    font-family: var(--font-family-regular);
-    line-height: var(--line-height-title);
-  }
 }
 
 /* DEPRECATED(.np-text-display-extra-large): use .np-text-display-large instead */
@@ -252,36 +226,23 @@ a,
 .np-text-display-large,
 .np-text-display-medium,
 .np-text-display-small {
-  letter-spacing: normal;
   .np-text-hyphenated;
 }
 
 .np-text-display-extra-large,
-.np-text-display-large {
-  .display-formatting(var(--size-64), normal, var(--font-weight-bold));
-}
-
-.np-text-display-medium {
-  .display-formatting(var(--size-52), normal, var(--font-weight-bold));
+.np-text-display-large,
+.wds-text-display-large {
+  &:extend(.wds-text-display-large);
 }
 
-.np-text-display-small {
-  .display-formatting(var(--size-40), normal, var(--font-weight-bold));
+.np-text-display-medium,
+.wds-text-display-medium {
+  &:extend(.wds-text-display-medium);
 }
 
-:lang(en) {
-  > .np-text-display-extra-large,
-  > .np-text-display-large {
-    .display-formatting(var(--size-64), 0.85);
-  }
-
-  > .np-text-display-medium {
-    .display-formatting(var(--size-52), 0.85);
-  }
-
-  > .np-text-display-small {
-    .display-formatting(var(--size-40), 0.85);
-  }
+.np-text-display-small,
+.wds-text-display-small {
+  &:extend(.wds-text-display-small);
 }
 
 /* Disable hyphenation for English
@@ -294,117 +255,6 @@ a,
   hyphens: none;
 }
 
-:lang(af),
-:lang(sq),
-:lang(eu),
-:lang(bs),
-:lang(ca),
-:lang(kw),
-:lang(hr),
-:lang(cs),
-:lang(da),
-:lang(nl),
-:lang(eo),
-:lang(et),
-:lang(fo),
-:lang(fi),
-:lang(fr),
-:lang(gl),
-:lang(lg),
-:lang(de),
-:lang(hu),
-:lang(is),
-:lang(se),
-:lang(id),
-:lang(in),
-:lang(ga),
-:lang(it),
-:lang(kl),
-:lang(ki),
-:lang(rw),
-:lang(lv),
-:lang(lt),
-:lang(lb),
-:lang(mg),
-:lang(ms),
-:lang(mt),
-:lang(gv),
-:lang(mi),
-:lang(nd),
-:lang(nb),
-:lang(nn),
-:lang(om),
-:lang(pl),
-:lang(pt),
-:lang(ro),
-:lang(rm),
-:lang(rn),
-:lang(sg),
-:lang(gd),
-:lang(sr),
-:lang(sn),
-:lang(sk),
-:lang(sl),
-:lang(so),
-:lang(es),
-:lang(sw),
-:lang(sv),
-:lang(tr),
-:lang(cy),
-:lang(fy),
-:lang(wo),
-:lang(zu),
-:lang(hsb),
-:lang(gsw),
-:lang(dsb),
-:lang(fil) {
-  .np-text-display-extra-large,
-  .np-text-display-large {
-    .display-formatting(var(--size-64), 1.05);
-  }
-
-  .np-text-display-medium {
-    .display-formatting(var(--size-52), 1.05);
-  }
-
-  .np-text-display-small {
-    .display-formatting(var(--size-40), 1.05);
-  }
-}
-
-:lang(el),
-:lang(az),
-:lang(be),
-:lang(bs),
-:lang(bg),
-:lang(ce),
-:lang(mk),
-:lang(os),
-:lang(ru),
-:lang(sr),
-:lang(uk),
-:lang(uz),
-:lang(sah) {
-  .np-text-display-extra-large,
-  .np-text-display-large {
-    .display-formatting(var(--size-60),
-    120%,
-    var(--font-weight-semi-bold));
-  }
-
-  .np-text-display-medium {
-    .display-formatting(var(--size-48),
-    120%,
-    var(--font-weight-semi-bold));
-  }
-
-  .np-text-display-small {
-    .display-formatting(var(--size-40),
-    120%,
-    var(--font-weight-semi-bold));
-  }
-}
-
 /* DEPRECATED: use `.np-text-display-*` instead */
 .display-1 {
   margin-bottom: var(--size-24);
@@ -488,7 +338,12 @@ p {
   + .np-text-title-section,
   + .np-text-title-subsection,
   + .np-text-title-body,
-  + .np-text-title-group {
+  + .np-text-title-group,
+  + .wds-text-title-screen,
+  + .wds-text-title-section,
+  + .wds-text-title-subsection,
+  + .wds-text-title-body,
+  + .wds-text-title-group {
     margin-top: 0;
     margin-bottom: var(--size-8);
   }
@@ -501,7 +356,7 @@ p {
 
 strong,
 b {
-  font-weight: var(--font-weight-semi-bold);
+  font-weight: var(--wds-font-weight-title-body);
   color: var(--color-content-primary);
 }
 
@@ -519,7 +374,7 @@ address {
 blockquote {
   margin: var(--size-16) 0;
   padding: 0 var(--size-16) 0 calc(var(--size-16) - 2px);
-  font-size: var(--font-size-16);
+  font-size: var(--wds-font-size-body-large);
   .border(left, 2px, solid, var(--color-content-accent));
 
   p {
@@ -537,8 +392,8 @@ blockquote {
   footer {
     display: block;
     color: var(--color-content-secondary);
-    font-size: var(--font-size-14);
-    line-height: var(--line-height-body);
+    font-size: var(--wds-font-size-body);
+    line-height: var(--wds-line-height-body-large);
 
     &::before {
       content: "\2014 \00A0"; // em dash, nbsp
@@ -551,7 +406,7 @@ blockquote {
 
   @media (--screen-lg) {
     margin: var(--size-32);
-    font-size: var(--font-size-16);
+    font-size: var(--wds-font-size-body-large);
   }
 }
 
@@ -588,8 +443,8 @@ pre {
   padding: var(--size-16);
   overflow: auto;
   color: var(--color-content-secondary);
-  font-size: var(--font-size-14);
-  line-height: var(--line-height-body);
+  font-size: var(--wds-font-size-body);
+  line-height: var(--wds-line-height-body-large);
   word-wrap: break-word;
   word-break: break-all;
   background-color: var(--color-background-neutral);
@@ -618,7 +473,7 @@ kbd {
 
   kbd {
     padding: 0;
-    font-weight: var(--font-weight-bold);
+    font-weight: var(--wds-font-weight-title-body);
     font-size: 100%;
   }
 }

package/src/styles/less/core/fonts/_fonts-ar.less

@@ -0,0 +1,86 @@
+@font-face {
+  font-family: "Vazirmatn";
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 900;
+  ascent-override: 90%;
+  descent-override: 20%;
+  line-gap-override: 0%;
+  src: url(./styles/fonts/vazirmatn/vazirmatn-arabic-wght-normal.woff2) format("woff2");
+  unicode-range:
+    U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E,
+    U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB,
+    U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22,
+    U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49,
+    U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F,
+    U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E,
+    U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
+}
+
+@font-face {
+  font-family: "Vazirmatn";
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 900;
+  ascent-override: 90%;
+  descent-override: 20%;
+  line-gap-override: 0%;
+  src: url(./styles/fonts/vazirmatn/vazirmatn-latin-wght-normal.woff2) format("woff2");
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
+    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+@font-face {
+  font-family: "Vazirmatn";
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 900;
+  ascent-override: 90%;
+  descent-override: 20%;
+  line-gap-override: 0%;
+  src: url(./styles/fonts/vazirmatn/vazirmatn-latin-ext-wght-normal.woff2) format("woff2");
+  unicode-range:
+    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
+    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
+    U+A720-A7FF;
+}
+
+@font-face {
+  font-family: "Rubik";
+  font-style: normal;
+  font-display: swap;
+  font-weight: 300 900;
+  src: url(./styles/fonts/rubik/rubik-arabic-wght-normal.woff2) format("woff2");
+  unicode-range:
+    U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E,
+    U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB,
+    U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22,
+    U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49,
+    U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F,
+    U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E,
+    U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
+}
+
+@font-face {
+  font-family: "Rubik";
+  font-style: normal;
+  font-display: swap;
+  font-weight: 300 900;
+  src: url(./styles/fonts/rubik/rubik-latin-wght-normal.woff2) format("woff2");
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
+    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+@font-face {
+  font-family: "Rubik";
+  font-style: normal;
+  font-display: swap;
+  font-weight: 300 900;
+  src: url(./styles/fonts/rubik/rubik-latin-ext-wght-normal.woff2) format("woff2");
+  unicode-range:
+    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
+    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
+    U+A720-A7FF;
+}

package/src/styles/less/core/fonts/_fonts-base.less

@@ -0,0 +1,99 @@
+@font-face {
+  font-family: "Wise Sans";
+  font-style: normal;
+  font-display: swap;
+  src: url("./styles/fonts/WiseSans-Heavy.woff2") format("woff2");
+  unicode-range:
+    U+D, U+20-7E, U+A0-148, U+14A-17E, U+18F, U+192, U+1A0-1A1, U+1AF-1B0, U+1C4-1DC, U+1E2-1E3,
+    U+1E6-1E7, U+1EA-1EB, U+1F1, U+1F3, U+1FA-21B, U+22A-22D, U+230-233, U+237, U+259, U+2BC-2BF,
+    U+2C6-2C7, U+2D8-2DD, U+300-304, U+306-30C, U+30F-311, U+31B, U+323-328, U+32E, U+331, U+35F,
+    U+374-375, U+37E, U+384, U+386-38A, U+38C, U+38E-3A1, U+3A3-3CE, U+400-45F, U+462-463,
+    U+472-475, U+490-493, U+496-497, U+49A-49B, U+4A2-4A3, U+4AE-4B3, U+4B6-4B7, U+4BA-4BB, U+4C0,
+    U+4CF, U+4D8-4D9, U+4E2-4E3, U+4E8-4E9, U+4EE-4EF, U+60B, U+9F3, U+E3F, U+17DB, U+1E08-1E09,
+    U+1E0C-1E0F, U+1E14-1E17, U+1E1C-1E1D, U+1E20-1E21, U+1E24-1E25, U+1E2A-1E2B, U+1E2E-1E2F,
+    U+1E34-1E3B, U+1E40-1E49, U+1E4C-1E53, U+1E5A-1E69, U+1E6C-1E6F, U+1E78-1E7B, U+1E80-1E85,
+    U+1E8E-1E8F, U+1E92-1E97, U+1E9E, U+1EA0-1EF9, U+2013-2014, U+2018-2022, U+2026, U+2030,
+    U+2032-2033, U+2039-203A, U+2044, U+2070, U+2074-2079, U+2080-2089, U+20A1-20AE, U+20B1-20B5,
+    U+20B8-20BA, U+20BC-20BF, U+2116-2117, U+2122, U+2126, U+2153-215E, U+2190-2199, U+2202, U+2206,
+    U+220F, U+2211-2212, U+2217, U+221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+22A0,
+    U+25A0-25A1, U+25AA-25AB, U+25B2-25B3, U+25BC-25BD, U+25CA-25CB, U+25CF, U+279D, U+27A7, U+5143,
+    U+A78B-A78C, U+FB01-FB02, U+FDFC;
+}
+
+@font-face {
+  font-family: "Wise Sans Numeric";
+  font-style: normal;
+  font-display: swap;
+  src: url("./styles/fonts/WiseSans-Heavy.woff2") format("woff2");
+  unicode-range: U+002B-002E, U+0030-0039, U+0041-005A, U+0061-007A, U+00A0, U+2212;
+}
+
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 900;
+  src: url(./styles/fonts/inter/inter-latin-wght-normal.woff2) format("woff2");
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
+    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 900;
+  src: url(./styles/fonts/inter/inter-latin-ext-wght-normal.woff2) format("woff2");
+  unicode-range:
+    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
+    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
+    U+A720-A7FF;
+}
+
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 900;
+  src: url(./styles/fonts/inter/inter-cyrillic-wght-normal.woff2) format("woff2");
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 900;
+  src: url(./styles/fonts/inter/inter-cyrillic-ext-wght-normal.woff2) format("woff2");
+  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 900;
+  src: url(./styles/fonts/inter/inter-greek-wght-normal.woff2) format("woff2");
+  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
+}
+
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 900;
+  src: url(./styles/fonts/inter/inter-greek-ext-wght-normal.woff2) format("woff2");
+  unicode-range: U+1F00-1FFF;
+}
+
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 900;
+  src: url(./styles/fonts/inter/inter-vietnamese-wght-normal.woff2) format("woff2");
+  unicode-range:
+    U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301,
+    U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+}