@elliemae/ds-typography 3.70.0-next.4 → 3.70.0-next.41

package/dist/esm/parts/variants/body-article.js

@@ -1,10 +1,12 @@
 import * as React from "react";
 import { css } from "@elliemae/ds-system";
+import { typographyFontFamily } from "../typographyFontFamily.js";
 import { TYPOGRAPHY_VARIANTS } from "../../constants/index.js";
 const typedCss = () => css``;
 const VARIANTS_CSS_BODY_ARTICLE = {
   // font-size: 16px/RT | line-height: 20px/RT
   [TYPOGRAPHY_VARIANTS.B1_ARTICLE]: css`
+    ${typographyFontFamily}
     font-size: ${(props) => props.fontSize ?? "1rem"}; // 16px -> 16/16 = 1rem
     line-height: ${(props) => props.lineHeight ?? "1.25rem"}; // 20px -> 20/16 = 1.25rem
     @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
@@ -19,6 +21,7 @@ const VARIANTS_CSS_BODY_ARTICLE = {
   `,
   // font-size: 14px/RT | line-height: 18px/RT
   [TYPOGRAPHY_VARIANTS.B2_ARTICLE]: css`
+    ${typographyFontFamily}
     font-size: ${(props) => props.fontSize ?? "0.875rem"}; // 14px -> 14/16 = 0.875rem
     line-height: ${(props) => props.lineHeight ?? "1.125rem"}; // 18px -> 18/16 = 1.125rem
     @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
@@ -33,6 +36,7 @@ const VARIANTS_CSS_BODY_ARTICLE = {
   `,
   // font-size: 13px/RT | line-height: 17px/RT
   [TYPOGRAPHY_VARIANTS.B3_ARTICLE]: css`
+    ${typographyFontFamily}
     font-size: ${(props) => props.fontSize ?? "0.8125rem"}; // 13px -> 13/16 = 0.8125rem
     line-height: ${(props) => props.lineHeight ?? "1.0625rem"}; // 17px -> 17/16 = 1.0625rem
     @media (min-width: ${({ theme }) => theme.breakpoints.small}) {

package/dist/esm/parts/variants/body-article.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/variants/body-article.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { css } from '@elliemae/ds-system';\nimport { TYPOGRAPHY_VARIANTS } from '../../constants/index.js';\nimport type { DSTypographyT } from '../../react-desc-prop-types.js';\n\n// typescript \"hack\" to infer the ReturnType of a generic function (css) with a generic argument (DSTypographyT.StyledPropsInterface)\n// as of 14/november/2023 I was not able to find a better way to do this.\nconst typedCss = () => css<DSTypographyT.StyledPropsInterface>``;\ntype ArticleBodyCSSMap = {\n  [key in DSTypographyT.ArticleBodyVariants]: ReturnType<typeof typedCss>;\n};\n\n// as of 14/november/2023\n// mobile -> font-size: 16px\n// desktop -> font-size: 13px\n// the \"magic values\" of the rem units are the result of the following formula:\n// (variant's requirement px/RT value / 16px) for mobile\n// (variant's requirement px/RT value / 13px) for desktop\nexport const VARIANTS_CSS_BODY_ARTICLE: ArticleBodyCSSMap = {\n  // font-size: 16px/RT | line-height: 20px/RT\n  [TYPOGRAPHY_VARIANTS.B1_ARTICLE]: css<DSTypographyT.StyledPropsInterface>`\n    font-size: ${(props) => props.fontSize ?? '1rem'}; // 16px -> 16/16 = 1rem\n    line-height: ${(props) => props.lineHeight ?? '1.25rem'}; // 20px -> 20/16 = 1.25rem\n    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${(props) => props.fontSize ?? '1.230769230769231rem'}; // 16px -> 16/13 = 1.230769230769231rem\n      line-height: ${(props) => props.lineHeight ?? '1.538461538461538rem'}; // 20px -> 20/13 = 1.538461538461538rem\n    }\n    margin-bottom: 24px;\n    color: ${(props) => props.theme.colors.neutral[700]};\n    font-weight: 400;\n    overflow-wrap: break-word;\n    white-space: pre-wrap;\n  `,\n  // font-size: 14px/RT | line-height: 18px/RT\n  [TYPOGRAPHY_VARIANTS.B2_ARTICLE]: css<DSTypographyT.StyledPropsInterface>`\n    font-size: ${(props) => props.fontSize ?? '0.875rem'}; // 14px -> 14/16 = 0.875rem\n    line-height: ${(props) => props.lineHeight ?? '1.125rem'}; // 18px -> 18/16 = 1.125rem\n    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${(props) => props.fontSize ?? '1.076923076923077rem'}; // 14px -> 14/13 = 1.076923076923077rem\n      line-height: ${(props) => props.lineHeight ?? '1.384615384615385rem'}; // 18px -> 18/13 = 1.384615384615385rem\n    }\n    margin-bottom: 24px;\n    color: ${(props) => props.theme.colors.neutral[700]};\n    font-weight: 400;\n    overflow-wrap: break-word;\n    white-space: pre-wrap;\n  `,\n  // font-size: 13px/RT | line-height: 17px/RT\n  [TYPOGRAPHY_VARIANTS.B3_ARTICLE]: css<DSTypographyT.StyledPropsInterface>`\n    font-size: ${(props) => props.fontSize ?? '0.8125rem'}; // 13px -> 13/16 = 0.8125rem\n    line-height: ${(props) => props.lineHeight ?? '1.0625rem'}; // 17px -> 17/16 = 1.0625rem\n    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${(props) => props.fontSize ?? '1rem'}; // 13px -> 13/13 = 1rem\n      line-height: ${(props) => props.lineHeight ?? '1.307692307692308rem'}; // 17px -> 17/13 = 1.307692307692308rem\n    }\n    margin-bottom: 24px;\n    color: ${(props) => props.theme.colors.neutral[700]};\n    font-weight: 400;\n    overflow-wrap: break-word;\n    white-space: pre-wrap;\n  `,\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,WAAW;AACpB,SAAS,2BAA2B;AAKpC,MAAM,WAAW,MAAM;AAWhB,MAAM,4BAA+C;AAAA;AAAA,EAE1D,CAAC,oBAAoB,UAAU,GAAG;AAAA,iBACnB,CAAC,UAAU,MAAM,YAAY,MAAM;AAAA,mBACjC,CAAC,UAAU,MAAM,cAAc,SAAS;AAAA,yBAClC,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,KAAK;AAAA,mBAC5C,CAAC,UAAU,MAAM,YAAY,sBAAsB;AAAA,qBACjD,CAAC,UAAU,MAAM,cAAc,sBAAsB;AAAA;AAAA;AAAA,aAG7D,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMrD,CAAC,oBAAoB,UAAU,GAAG;AAAA,iBACnB,CAAC,UAAU,MAAM,YAAY,UAAU;AAAA,mBACrC,CAAC,UAAU,MAAM,cAAc,UAAU;AAAA,yBACnC,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,KAAK;AAAA,mBAC5C,CAAC,UAAU,MAAM,YAAY,sBAAsB;AAAA,qBACjD,CAAC,UAAU,MAAM,cAAc,sBAAsB;AAAA;AAAA;AAAA,aAG7D,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMrD,CAAC,oBAAoB,UAAU,GAAG;AAAA,iBACnB,CAAC,UAAU,MAAM,YAAY,WAAW;AAAA,mBACtC,CAAC,UAAU,MAAM,cAAc,WAAW;AAAA,yBACpC,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,KAAK;AAAA,mBAC5C,CAAC,UAAU,MAAM,YAAY,MAAM;AAAA,qBACjC,CAAC,UAAU,MAAM,cAAc,sBAAsB;AAAA;AAAA;AAAA,aAG7D,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAKvD;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { css } from '@elliemae/ds-system';\nimport { typographyFontFamily } from '../typographyFontFamily.js';\nimport { TYPOGRAPHY_VARIANTS } from '../../constants/index.js';\nimport type { DSTypographyT } from '../../react-desc-prop-types.js';\n\n// typescript \"hack\" to infer the ReturnType of a generic function (css) with a generic argument (DSTypographyT.StyledPropsInterface)\n// as of 14/november/2023 I was not able to find a better way to do this.\nconst typedCss = () => css<DSTypographyT.StyledPropsInterface>``;\ntype ArticleBodyCSSMap = {\n  [key in DSTypographyT.ArticleBodyVariants]: ReturnType<typeof typedCss>;\n};\n\n// as of 14/november/2023\n// mobile -> font-size: 16px\n// desktop -> font-size: 13px\n// the \"magic values\" of the rem units are the result of the following formula:\n// (variant's requirement px/RT value / 16px) for mobile\n// (variant's requirement px/RT value / 13px) for desktop\nexport const VARIANTS_CSS_BODY_ARTICLE: ArticleBodyCSSMap = {\n  // font-size: 16px/RT | line-height: 20px/RT\n  [TYPOGRAPHY_VARIANTS.B1_ARTICLE]: css<DSTypographyT.StyledPropsInterface>`\n    ${typographyFontFamily}\n    font-size: ${(props) => props.fontSize ?? '1rem'}; // 16px -> 16/16 = 1rem\n    line-height: ${(props) => props.lineHeight ?? '1.25rem'}; // 20px -> 20/16 = 1.25rem\n    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${(props) => props.fontSize ?? '1.230769230769231rem'}; // 16px -> 16/13 = 1.230769230769231rem\n      line-height: ${(props) => props.lineHeight ?? '1.538461538461538rem'}; // 20px -> 20/13 = 1.538461538461538rem\n    }\n    margin-bottom: 24px;\n    color: ${(props) => props.theme.colors.neutral[700]};\n    font-weight: 400;\n    overflow-wrap: break-word;\n    white-space: pre-wrap;\n  `,\n  // font-size: 14px/RT | line-height: 18px/RT\n  [TYPOGRAPHY_VARIANTS.B2_ARTICLE]: css<DSTypographyT.StyledPropsInterface>`\n    ${typographyFontFamily}\n    font-size: ${(props) => props.fontSize ?? '0.875rem'}; // 14px -> 14/16 = 0.875rem\n    line-height: ${(props) => props.lineHeight ?? '1.125rem'}; // 18px -> 18/16 = 1.125rem\n    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${(props) => props.fontSize ?? '1.076923076923077rem'}; // 14px -> 14/13 = 1.076923076923077rem\n      line-height: ${(props) => props.lineHeight ?? '1.384615384615385rem'}; // 18px -> 18/13 = 1.384615384615385rem\n    }\n    margin-bottom: 24px;\n    color: ${(props) => props.theme.colors.neutral[700]};\n    font-weight: 400;\n    overflow-wrap: break-word;\n    white-space: pre-wrap;\n  `,\n  // font-size: 13px/RT | line-height: 17px/RT\n  [TYPOGRAPHY_VARIANTS.B3_ARTICLE]: css<DSTypographyT.StyledPropsInterface>`\n    ${typographyFontFamily}\n    font-size: ${(props) => props.fontSize ?? '0.8125rem'}; // 13px -> 13/16 = 0.8125rem\n    line-height: ${(props) => props.lineHeight ?? '1.0625rem'}; // 17px -> 17/16 = 1.0625rem\n    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${(props) => props.fontSize ?? '1rem'}; // 13px -> 13/13 = 1rem\n      line-height: ${(props) => props.lineHeight ?? '1.307692307692308rem'}; // 17px -> 17/13 = 1.307692307692308rem\n    }\n    margin-bottom: 24px;\n    color: ${(props) => props.theme.colors.neutral[700]};\n    font-weight: 400;\n    overflow-wrap: break-word;\n    white-space: pre-wrap;\n  `,\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,WAAW;AACpB,SAAS,4BAA4B;AACrC,SAAS,2BAA2B;AAKpC,MAAM,WAAW,MAAM;AAWhB,MAAM,4BAA+C;AAAA;AAAA,EAE1D,CAAC,oBAAoB,UAAU,GAAG;AAAA,MAC9B,oBAAoB;AAAA,iBACT,CAAC,UAAU,MAAM,YAAY,MAAM;AAAA,mBACjC,CAAC,UAAU,MAAM,cAAc,SAAS;AAAA,yBAClC,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,KAAK;AAAA,mBAC5C,CAAC,UAAU,MAAM,YAAY,sBAAsB;AAAA,qBACjD,CAAC,UAAU,MAAM,cAAc,sBAAsB;AAAA;AAAA;AAAA,aAG7D,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMrD,CAAC,oBAAoB,UAAU,GAAG;AAAA,MAC9B,oBAAoB;AAAA,iBACT,CAAC,UAAU,MAAM,YAAY,UAAU;AAAA,mBACrC,CAAC,UAAU,MAAM,cAAc,UAAU;AAAA,yBACnC,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,KAAK;AAAA,mBAC5C,CAAC,UAAU,MAAM,YAAY,sBAAsB;AAAA,qBACjD,CAAC,UAAU,MAAM,cAAc,sBAAsB;AAAA;AAAA;AAAA,aAG7D,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMrD,CAAC,oBAAoB,UAAU,GAAG;AAAA,MAC9B,oBAAoB;AAAA,iBACT,CAAC,UAAU,MAAM,YAAY,WAAW;AAAA,mBACtC,CAAC,UAAU,MAAM,cAAc,WAAW;AAAA,yBACpC,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,KAAK;AAAA,mBAC5C,CAAC,UAAU,MAAM,YAAY,MAAM;AAAA,qBACjC,CAAC,UAAU,MAAM,cAAc,sBAAsB;AAAA;AAAA;AAAA,aAG7D,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAKvD;",
   "names": []
 }

package/dist/esm/parts/variants/body.js

@@ -1,9 +1,11 @@
 import * as React from "react";
 import { css } from "@elliemae/ds-system";
 import { TYPOGRAPHY_VARIANTS } from "../../constants/index.js";
+import { typographyFontFamily } from "../typographyFontFamily.js";
 const typedCss = () => css``;
 const VARIANTS_CSS_BODY = {
   [TYPOGRAPHY_VARIANTS.B1]: css`
+    ${typographyFontFamily}
     font-size: ${(props) => props.fontSize ?? "0.8775000000000001rem"};
     line-height: ${(props) => props.lineHeight ?? "1.1212499999999999rem"};
     @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
@@ -13,15 +15,17 @@ const VARIANTS_CSS_BODY = {
     font-weight: 400;
   `,
   [TYPOGRAPHY_VARIANTS.B2]: css`
+    ${typographyFontFamily}
     font-size: ${(props) => props.fontSize ?? "0.8125rem"};
-    line-height: ${(props) => props.lineHeight ?? "1.064375rem"};
+    line-height: ${(props) => props.lineHeight ?? "1rem"};
     @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
       font-size: ${(props) => props.fontSize ?? "1rem"};
-      line-height: ${(props) => props.lineHeight ?? "1.31rem"};
+      line-height: ${(props) => props.lineHeight ?? "1.2307692308rem"};
     }
     font-weight: 400;
   `,
   [TYPOGRAPHY_VARIANTS.B3]: css`
+    ${typographyFontFamily}
     font-size: ${(props) => props.fontSize ?? "0.7475rem"};
     line-height: ${(props) => props.lineHeight ?? "0.999375rem"};
     @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
@@ -31,6 +35,7 @@ const VARIANTS_CSS_BODY = {
     font-weight: 400;
   `,
   [TYPOGRAPHY_VARIANTS.B4]: css`
+    ${typographyFontFamily}
     font-size: ${(props) => props.fontSize ?? "0.6906249999999999rem"};
     line-height: ${(props) => props.lineHeight ?? "0.8125rem"};
     @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
@@ -40,6 +45,7 @@ const VARIANTS_CSS_BODY = {
     font-weight: 400;
   `,
   [TYPOGRAPHY_VARIANTS.B1_LIGHT]: css`
+    ${typographyFontFamily}
     font-size: ${(props) => props.fontSize ?? "0.8775000000000001rem"};
     line-height: ${(props) => props.lineHeight ?? "1.1212499999999999rem"};
     color: ${(props) => props.theme.colors.neutral[600]};
@@ -50,16 +56,18 @@ const VARIANTS_CSS_BODY = {
     font-weight: 400;
   `,
   [TYPOGRAPHY_VARIANTS.B2_LIGHT]: css`
+    ${typographyFontFamily}
     font-size: ${(props) => props.fontSize ?? "0.8125rem"};
-    line-height: ${(props) => props.lineHeight ?? "1.064375rem"};
+    line-height: ${(props) => props.lineHeight ?? "1rem"};
     color: ${(props) => props.theme.colors.neutral[600]};
     @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
       font-size: ${(props) => props.fontSize ?? "1rem"};
-      line-height: ${(props) => props.lineHeight ?? "1.31rem"};
+      line-height: ${(props) => props.lineHeight ?? "1.2307692308rem"};
     }
     font-weight: 400;
   `,
   [TYPOGRAPHY_VARIANTS.B3_LIGHT]: css`
+    ${typographyFontFamily}
     font-size: ${(props) => props.fontSize ?? "0.7475rem"};
     line-height: ${(props) => props.lineHeight ?? "0.999375rem"};
     color: ${(props) => props.theme.colors.neutral[600]};
@@ -68,6 +76,17 @@ const VARIANTS_CSS_BODY = {
       line-height: ${(props) => props.lineHeight ?? "1.23rem"};
     }
     font-weight: 400;
+  `,
+  [TYPOGRAPHY_VARIANTS.B3_STRONG]: css`
+    ${typographyFontFamily}
+    font-size: ${(props) => props.fontSize ?? "0.7475rem"};
+    line-height: ${(props) => props.lineHeight ?? "0.999375rem"};
+    color: ${(props) => props.theme.colors.neutral[700]};
+    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
+      font-size: ${(props) => props.fontSize ?? "0.92rem"};
+      line-height: ${(props) => props.lineHeight ?? "1.23rem"};
+    }
+    font-weight: 600;
   `
 };
 export {

package/dist/esm/parts/variants/body.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/variants/body.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { css } from '@elliemae/ds-system';\nimport { TYPOGRAPHY_VARIANTS } from '../../constants/index.js';\nimport type { DSTypographyT } from '../../react-desc-prop-types.js';\n\n// typescript \"hack\" to infer the ReturnType of a generic function (css) with a generic argument (DSTypographyT.StyledPropsInterface)\n// as of 14/november/2023 I was not able to find a better way to do this.\nconst typedCss = () => css<DSTypographyT.StyledPropsInterface>``;\ntype BodyCSSMap = {\n  [key in DSTypographyT.BodyVariants]: ReturnType<typeof typedCss>;\n};\n\n// as of 14/november/2023\n// mobile -> font-size: 16px\n// desktop -> font-size: 13px\n// the \"magic values\" of the rem units are the result of the following formula:\n// (variant's requirement px/RT value / 16px) for mobile\n// (variant's requirement px/RT value / 13px) for desktop\nexport const VARIANTS_CSS_BODY: BodyCSSMap = {\n  [TYPOGRAPHY_VARIANTS.B1]: css<DSTypographyT.StyledPropsInterface>`\n    font-size: ${(props) => props.fontSize ?? '0.8775000000000001rem'};\n    line-height: ${(props) => props.lineHeight ?? '1.1212499999999999rem'};\n    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${(props) => props.fontSize ?? '1.08rem'};\n      line-height: ${(props) => props.lineHeight ?? '1.38rem'};\n    }\n    font-weight: 400;\n  `,\n  [TYPOGRAPHY_VARIANTS.B2]: css<DSTypographyT.StyledPropsInterface>`\n    font-size: ${(props) => props.fontSize ?? '0.8125rem'};\n    line-height: ${(props) => props.lineHeight ?? '1.064375rem'};\n    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${(props) => props.fontSize ?? '1rem'};\n      line-height: ${(props) => props.lineHeight ?? '1.31rem'};\n    }\n    font-weight: 400;\n  `,\n  [TYPOGRAPHY_VARIANTS.B3]: css<DSTypographyT.StyledPropsInterface>`\n    font-size: ${(props) => props.fontSize ?? '0.7475rem'};\n    line-height: ${(props) => props.lineHeight ?? '0.999375rem'};\n    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${(props) => props.fontSize ?? '0.92rem'};\n      line-height: ${(props) => props.lineHeight ?? '1.23rem'};\n    }\n    font-weight: 400;\n  `,\n  [TYPOGRAPHY_VARIANTS.B4]: css<DSTypographyT.StyledPropsInterface>`\n    font-size: ${(props) => props.fontSize ?? '0.6906249999999999rem'};\n    line-height: ${(props) => props.lineHeight ?? '0.8125rem'};\n    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${(props) => props.fontSize ?? '0.85rem'};\n      line-height: ${(props) => props.lineHeight ?? '1rem'};\n    }\n    font-weight: 400;\n  `,\n  [TYPOGRAPHY_VARIANTS.B1_LIGHT]: css<DSTypographyT.StyledPropsInterface>`\n    font-size: ${(props) => props.fontSize ?? '0.8775000000000001rem'};\n    line-height: ${(props) => props.lineHeight ?? '1.1212499999999999rem'};\n    color: ${(props) => props.theme.colors.neutral[600]};\n    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${(props) => props.fontSize ?? '1.08rem'};\n      line-height: ${(props) => props.lineHeight ?? '1.38rem'};\n    }\n    font-weight: 400;\n  `,\n  [TYPOGRAPHY_VARIANTS.B2_LIGHT]: css<DSTypographyT.StyledPropsInterface>`\n    font-size: ${(props) => props.fontSize ?? '0.8125rem'};\n    line-height: ${(props) => props.lineHeight ?? '1.064375rem'};\n    color: ${(props) => props.theme.colors.neutral[600]};\n    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${(props) => props.fontSize ?? '1rem'};\n      line-height: ${(props) => props.lineHeight ?? '1.31rem'};\n    }\n    font-weight: 400;\n  `,\n  [TYPOGRAPHY_VARIANTS.B3_LIGHT]: css<DSTypographyT.StyledPropsInterface>`\n    font-size: ${(props) => props.fontSize ?? '0.7475rem'};\n    line-height: ${(props) => props.lineHeight ?? '0.999375rem'};\n    color: ${(props) => props.theme.colors.neutral[600]};\n    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${(props) => props.fontSize ?? '0.92rem'};\n      line-height: ${(props) => props.lineHeight ?? '1.23rem'};\n    }\n    font-weight: 400;\n  `,\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,WAAW;AACpB,SAAS,2BAA2B;AAKpC,MAAM,WAAW,MAAM;AAWhB,MAAM,oBAAgC;AAAA,EAC3C,CAAC,oBAAoB,EAAE,GAAG;AAAA,iBACX,CAAC,UAAU,MAAM,YAAY,uBAAuB;AAAA,mBAClD,CAAC,UAAU,MAAM,cAAc,uBAAuB;AAAA,yBAChD,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,KAAK;AAAA,mBAC5C,CAAC,UAAU,MAAM,YAAY,SAAS;AAAA,qBACpC,CAAC,UAAU,MAAM,cAAc,SAAS;AAAA;AAAA;AAAA;AAAA,EAI3D,CAAC,oBAAoB,EAAE,GAAG;AAAA,iBACX,CAAC,UAAU,MAAM,YAAY,WAAW;AAAA,mBACtC,CAAC,UAAU,MAAM,cAAc,aAAa;AAAA,yBACtC,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,KAAK;AAAA,mBAC5C,CAAC,UAAU,MAAM,YAAY,MAAM;AAAA,qBACjC,CAAC,UAAU,MAAM,cAAc,SAAS;AAAA;AAAA;AAAA;AAAA,EAI3D,CAAC,oBAAoB,EAAE,GAAG;AAAA,iBACX,CAAC,UAAU,MAAM,YAAY,WAAW;AAAA,mBACtC,CAAC,UAAU,MAAM,cAAc,aAAa;AAAA,yBACtC,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,KAAK;AAAA,mBAC5C,CAAC,UAAU,MAAM,YAAY,SAAS;AAAA,qBACpC,CAAC,UAAU,MAAM,cAAc,SAAS;AAAA;AAAA;AAAA;AAAA,EAI3D,CAAC,oBAAoB,EAAE,GAAG;AAAA,iBACX,CAAC,UAAU,MAAM,YAAY,uBAAuB;AAAA,mBAClD,CAAC,UAAU,MAAM,cAAc,WAAW;AAAA,yBACpC,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,KAAK;AAAA,mBAC5C,CAAC,UAAU,MAAM,YAAY,SAAS;AAAA,qBACpC,CAAC,UAAU,MAAM,cAAc,MAAM;AAAA;AAAA;AAAA;AAAA,EAIxD,CAAC,oBAAoB,QAAQ,GAAG;AAAA,iBACjB,CAAC,UAAU,MAAM,YAAY,uBAAuB;AAAA,mBAClD,CAAC,UAAU,MAAM,cAAc,uBAAuB;AAAA,aAC5D,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,yBAC9B,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,KAAK;AAAA,mBAC5C,CAAC,UAAU,MAAM,YAAY,SAAS;AAAA,qBACpC,CAAC,UAAU,MAAM,cAAc,SAAS;AAAA;AAAA;AAAA;AAAA,EAI3D,CAAC,oBAAoB,QAAQ,GAAG;AAAA,iBACjB,CAAC,UAAU,MAAM,YAAY,WAAW;AAAA,mBACtC,CAAC,UAAU,MAAM,cAAc,aAAa;AAAA,aAClD,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,yBAC9B,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,KAAK;AAAA,mBAC5C,CAAC,UAAU,MAAM,YAAY,MAAM;AAAA,qBACjC,CAAC,UAAU,MAAM,cAAc,SAAS;AAAA;AAAA;AAAA;AAAA,EAI3D,CAAC,oBAAoB,QAAQ,GAAG;AAAA,iBACjB,CAAC,UAAU,MAAM,YAAY,WAAW;AAAA,mBACtC,CAAC,UAAU,MAAM,cAAc,aAAa;AAAA,aAClD,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,yBAC9B,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,KAAK;AAAA,mBAC5C,CAAC,UAAU,MAAM,YAAY,SAAS;AAAA,qBACpC,CAAC,UAAU,MAAM,cAAc,SAAS;AAAA;AAAA;AAAA;AAI7D;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { css } from '@elliemae/ds-system';\nimport { TYPOGRAPHY_VARIANTS } from '../../constants/index.js';\nimport type { DSTypographyT } from '../../react-desc-prop-types.js';\nimport { typographyFontFamily } from '../typographyFontFamily.js';\n\n// typescript \"hack\" to infer the ReturnType of a generic function (css) with a generic argument (DSTypographyT.StyledPropsInterface)\n// as of 14/november/2023 I was not able to find a better way to do this.\nconst typedCss = () => css<DSTypographyT.StyledPropsInterface>``;\ntype BodyCSSMap = {\n  [key in DSTypographyT.BodyVariants]: ReturnType<typeof typedCss>;\n};\n\n// as of 14/november/2023\n// mobile -> font-size: 16px\n// desktop -> font-size: 13px\n// the \"magic values\" of the rem units are the result of the following formula:\n// (variant's requirement px/RT value / 16px) for mobile\n// (variant's requirement px/RT value / 13px) for desktop\nexport const VARIANTS_CSS_BODY: BodyCSSMap = {\n  [TYPOGRAPHY_VARIANTS.B1]: css<DSTypographyT.StyledPropsInterface>`\n    ${typographyFontFamily}\n    font-size: ${(props) => props.fontSize ?? '0.8775000000000001rem'};\n    line-height: ${(props) => props.lineHeight ?? '1.1212499999999999rem'};\n    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${(props) => props.fontSize ?? '1.08rem'};\n      line-height: ${(props) => props.lineHeight ?? '1.38rem'};\n    }\n    font-weight: 400;\n  `,\n  [TYPOGRAPHY_VARIANTS.B2]: css<DSTypographyT.StyledPropsInterface>`\n    ${typographyFontFamily}\n    font-size: ${(props) => props.fontSize ?? '0.8125rem'};\n    line-height: ${(props) => props.lineHeight ?? '1rem'};\n    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${(props) => props.fontSize ?? '1rem'};\n      line-height: ${(props) => props.lineHeight ?? '1.2307692308rem'};\n    }\n    font-weight: 400;\n  `,\n  [TYPOGRAPHY_VARIANTS.B3]: css<DSTypographyT.StyledPropsInterface>`\n    ${typographyFontFamily}\n    font-size: ${(props) => props.fontSize ?? '0.7475rem'};\n    line-height: ${(props) => props.lineHeight ?? '0.999375rem'};\n    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${(props) => props.fontSize ?? '0.92rem'};\n      line-height: ${(props) => props.lineHeight ?? '1.23rem'};\n    }\n    font-weight: 400;\n  `,\n  [TYPOGRAPHY_VARIANTS.B4]: css<DSTypographyT.StyledPropsInterface>`\n    ${typographyFontFamily}\n    font-size: ${(props) => props.fontSize ?? '0.6906249999999999rem'};\n    line-height: ${(props) => props.lineHeight ?? '0.8125rem'};\n    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${(props) => props.fontSize ?? '0.85rem'};\n      line-height: ${(props) => props.lineHeight ?? '1rem'};\n    }\n    font-weight: 400;\n  `,\n  [TYPOGRAPHY_VARIANTS.B1_LIGHT]: css<DSTypographyT.StyledPropsInterface>`\n    ${typographyFontFamily}\n    font-size: ${(props) => props.fontSize ?? '0.8775000000000001rem'};\n    line-height: ${(props) => props.lineHeight ?? '1.1212499999999999rem'};\n    color: ${(props) => props.theme.colors.neutral[600]};\n    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${(props) => props.fontSize ?? '1.08rem'};\n      line-height: ${(props) => props.lineHeight ?? '1.38rem'};\n    }\n    font-weight: 400;\n  `,\n  [TYPOGRAPHY_VARIANTS.B2_LIGHT]: css<DSTypographyT.StyledPropsInterface>`\n    ${typographyFontFamily}\n    font-size: ${(props) => props.fontSize ?? '0.8125rem'};\n    line-height: ${(props) => props.lineHeight ?? '1rem'};\n    color: ${(props) => props.theme.colors.neutral[600]};\n    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${(props) => props.fontSize ?? '1rem'};\n      line-height: ${(props) => props.lineHeight ?? '1.2307692308rem'};\n    }\n    font-weight: 400;\n  `,\n  [TYPOGRAPHY_VARIANTS.B3_LIGHT]: css<DSTypographyT.StyledPropsInterface>`\n    ${typographyFontFamily}\n    font-size: ${(props) => props.fontSize ?? '0.7475rem'};\n    line-height: ${(props) => props.lineHeight ?? '0.999375rem'};\n    color: ${(props) => props.theme.colors.neutral[600]};\n    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${(props) => props.fontSize ?? '0.92rem'};\n      line-height: ${(props) => props.lineHeight ?? '1.23rem'};\n    }\n    font-weight: 400;\n  `,\n  [TYPOGRAPHY_VARIANTS.B3_STRONG]: css<DSTypographyT.StyledPropsInterface>`\n    ${typographyFontFamily}\n    font-size: ${(props) => props.fontSize ?? '0.7475rem'};\n    line-height: ${(props) => props.lineHeight ?? '0.999375rem'};\n    color: ${(props) => props.theme.colors.neutral[700]};\n    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${(props) => props.fontSize ?? '0.92rem'};\n      line-height: ${(props) => props.lineHeight ?? '1.23rem'};\n    }\n    font-weight: 600;\n  `,\n};\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/parts/variants/button.js

@@ -1,9 +1,11 @@
 import * as React from "react";
 import { css } from "@elliemae/ds-system";
 import { TYPOGRAPHY_VARIANTS } from "../../constants/index.js";
+import { typographyFontFamily } from "../typographyFontFamily.js";
 const typedCss = () => css``;
 const VARIANTS_BUTTON = {
   [TYPOGRAPHY_VARIANTS.BUTTON]: css`
+    ${typographyFontFamily}
     font-size: ${(props) => props.fontSize ?? "0.8125rem"};
     line-height: ${(props) => props.lineHeight ?? "1.503125rem"};
     @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
@@ -28,6 +30,7 @@ const VARIANTS_BUTTON = {
     }
   `,
   [TYPOGRAPHY_VARIANTS.BUTTON_SML_TITLE]: css`
+    ${typographyFontFamily}
     font-size: ${(props) => props.fontSize ?? "0.875rem"};
     line-height: ${(props) => props.lineHeight ?? "1.503125rem"};
     @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
@@ -52,6 +55,7 @@ const VARIANTS_BUTTON = {
     }
   `,
   [TYPOGRAPHY_VARIANTS.BUTTON_MED_TITLE]: css`
+    ${typographyFontFamily}
     font-size: ${(props) => props.fontSize ?? "1rem"};
     line-height: ${(props) => props.lineHeight ?? "1.503125rem"};
     @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
@@ -76,6 +80,7 @@ const VARIANTS_BUTTON = {
     }
   `,
   [TYPOGRAPHY_VARIANTS.BUTTON_LRG_TITLE]: css`
+    ${typographyFontFamily}
     font-size: ${(props) => props.fontSize ?? "1.125rem"};
     line-height: ${(props) => props.lineHeight ?? "1.503125rem"};
     @media (min-width: ${({ theme }) => theme.breakpoints.small}) {

package/dist/esm/parts/variants/button.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/variants/button.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { css } from '@elliemae/ds-system';\nimport type { DSTypographyT } from '../../react-desc-prop-types.js';\nimport { TYPOGRAPHY_VARIANTS } from '../../constants/index.js';\n\n// typescript \"hack\" to infer the ReturnType of a generic function (css) with a generic argument (DSTypographyT.StyledPropsInterface)\n// as of 14/november/2023 I was not able to find a better way to do this.\nconst typedCss = () => css<DSTypographyT.StyledPropsInterface>``;\ntype ButtonCSSMap = {\n  [key in DSTypographyT.ButtonVariants]: ReturnType<typeof typedCss>;\n};\n\n// as of 14/november/2023\n// mobile -> font-size: 16px\n// desktop -> font-size: 13px\n// the \"magic values\" of the rem units are the result of the following formula:\n// (variant's requirement px/RT value / 16px) for mobile\n// (variant's requirement px/RT value / 13px) for desktop\nexport const VARIANTS_BUTTON: ButtonCSSMap = {\n  [TYPOGRAPHY_VARIANTS.BUTTON]: css<DSTypographyT.StyledPropsInterface>`\n    font-size: ${(props) => props.fontSize ?? '0.8125rem'};\n    line-height: ${(props) => props.lineHeight ?? '1.503125rem'};\n    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${(props) => props.fontSize ?? '1rem'};\n      line-height: ${(props) => props.lineHeight ?? '1.85rem'};\n    }\n    text-decoration: underline;\n    color: ${(props) => props.theme.colors.brand[600]};\n    background: none;\n    border: none;\n    display: inline-block;\n    text-align: left;\n    cursor: pointer;\n    &:hover {\n      color: ${(props) => props.theme.colors.brand[700]};\n    }\n    &:active {\n      color: ${(props) => props.theme.colors.brand[800]};\n    }\n    &:focus {\n      color: ${(props) => props.theme.colors.brand[700]};\n    }\n  `,\n  [TYPOGRAPHY_VARIANTS.BUTTON_SML_TITLE]: css<DSTypographyT.StyledPropsInterface>`\n    font-size: ${(props) => props.fontSize ?? '0.875rem'};\n    line-height: ${(props) => props.lineHeight ?? '1.503125rem'};\n    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${(props) => props.fontSize ?? '1.077rem'};\n      line-height: ${(props) => props.lineHeight ?? '1.85rem'};\n    }\n    text-decoration: underline;\n    color: ${(props) => props.theme.colors.brand[600]};\n    background: none;\n    border: none;\n    display: inline-block;\n    text-align: left;\n    cursor: pointer;\n    &:hover {\n      color: ${(props) => props.theme.colors.brand[700]};\n    }\n    &:active {\n      color: ${(props) => props.theme.colors.brand[800]};\n    }\n    &:focus {\n      color: ${(props) => props.theme.colors.brand[700]};\n    }\n  `,\n  [TYPOGRAPHY_VARIANTS.BUTTON_MED_TITLE]: css<DSTypographyT.StyledPropsInterface>`\n    font-size: ${(props) => props.fontSize ?? '1rem'};\n    line-height: ${(props) => props.lineHeight ?? '1.503125rem'};\n    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${(props) => props.fontSize ?? '1.231rem'};\n      line-height: ${(props) => props.lineHeight ?? '1.85rem'};\n    }\n    text-decoration: underline;\n    color: ${(props) => props.theme.colors.brand[600]};\n    background: none;\n    border: none;\n    display: inline-block;\n    text-align: left;\n    cursor: pointer;\n    &:hover {\n      color: ${(props) => props.theme.colors.brand[700]};\n    }\n    &:active {\n      color: ${(props) => props.theme.colors.brand[800]};\n    }\n    &:focus {\n      color: ${(props) => props.theme.colors.brand[700]};\n    }\n  `,\n  [TYPOGRAPHY_VARIANTS.BUTTON_LRG_TITLE]: css<DSTypographyT.StyledPropsInterface>`\n    font-size: ${(props) => props.fontSize ?? '1.125rem'};\n    line-height: ${(props) => props.lineHeight ?? '1.503125rem'};\n    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${(props) => props.fontSize ?? '1.385rem'};\n      line-height: ${(props) => props.lineHeight ?? '1.85rem'};\n    }\n    text-decoration: underline;\n    color: ${(props) => props.theme.colors.brand[600]};\n    background: none;\n    border: none;\n    display: inline-block;\n    text-align: left;\n    cursor: pointer;\n    &:hover {\n      color: ${(props) => props.theme.colors.brand[700]};\n    }\n    &:active {\n      color: ${(props) => props.theme.colors.brand[800]};\n    }\n    &:focus {\n      color: ${(props) => props.theme.colors.brand[700]};\n    }\n  `,\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { css } from '@elliemae/ds-system';\nimport type { DSTypographyT } from '../../react-desc-prop-types.js';\nimport { TYPOGRAPHY_VARIANTS } from '../../constants/index.js';\nimport { typographyFontFamily } from '../typographyFontFamily.js';\n\n// typescript \"hack\" to infer the ReturnType of a generic function (css) with a generic argument (DSTypographyT.StyledPropsInterface)\n// as of 14/november/2023 I was not able to find a better way to do this.\nconst typedCss = () => css<DSTypographyT.StyledPropsInterface>``;\ntype ButtonCSSMap = {\n  [key in DSTypographyT.ButtonVariants]: ReturnType<typeof typedCss>;\n};\n\n// as of 14/november/2023\n// mobile -> font-size: 16px\n// desktop -> font-size: 13px\n// the \"magic values\" of the rem units are the result of the following formula:\n// (variant's requirement px/RT value / 16px) for mobile\n// (variant's requirement px/RT value / 13px) for desktop\nexport const VARIANTS_BUTTON: ButtonCSSMap = {\n  [TYPOGRAPHY_VARIANTS.BUTTON]: css<DSTypographyT.StyledPropsInterface>`\n    ${typographyFontFamily}\n    font-size: ${(props) => props.fontSize ?? '0.8125rem'};\n    line-height: ${(props) => props.lineHeight ?? '1.503125rem'};\n    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${(props) => props.fontSize ?? '1rem'};\n      line-height: ${(props) => props.lineHeight ?? '1.85rem'};\n    }\n    text-decoration: underline;\n    color: ${(props) => props.theme.colors.brand[600]};\n    background: none;\n    border: none;\n    display: inline-block;\n    text-align: left;\n    cursor: pointer;\n    &:hover {\n      color: ${(props) => props.theme.colors.brand[700]};\n    }\n    &:active {\n      color: ${(props) => props.theme.colors.brand[800]};\n    }\n    &:focus {\n      color: ${(props) => props.theme.colors.brand[700]};\n    }\n  `,\n  [TYPOGRAPHY_VARIANTS.BUTTON_SML_TITLE]: css<DSTypographyT.StyledPropsInterface>`\n    ${typographyFontFamily}\n    font-size: ${(props) => props.fontSize ?? '0.875rem'};\n    line-height: ${(props) => props.lineHeight ?? '1.503125rem'};\n    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${(props) => props.fontSize ?? '1.077rem'};\n      line-height: ${(props) => props.lineHeight ?? '1.85rem'};\n    }\n    text-decoration: underline;\n    color: ${(props) => props.theme.colors.brand[600]};\n    background: none;\n    border: none;\n    display: inline-block;\n    text-align: left;\n    cursor: pointer;\n    &:hover {\n      color: ${(props) => props.theme.colors.brand[700]};\n    }\n    &:active {\n      color: ${(props) => props.theme.colors.brand[800]};\n    }\n    &:focus {\n      color: ${(props) => props.theme.colors.brand[700]};\n    }\n  `,\n  [TYPOGRAPHY_VARIANTS.BUTTON_MED_TITLE]: css<DSTypographyT.StyledPropsInterface>`\n    ${typographyFontFamily}\n    font-size: ${(props) => props.fontSize ?? '1rem'};\n    line-height: ${(props) => props.lineHeight ?? '1.503125rem'};\n    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${(props) => props.fontSize ?? '1.231rem'};\n      line-height: ${(props) => props.lineHeight ?? '1.85rem'};\n    }\n    text-decoration: underline;\n    color: ${(props) => props.theme.colors.brand[600]};\n    background: none;\n    border: none;\n    display: inline-block;\n    text-align: left;\n    cursor: pointer;\n    &:hover {\n      color: ${(props) => props.theme.colors.brand[700]};\n    }\n    &:active {\n      color: ${(props) => props.theme.colors.brand[800]};\n    }\n    &:focus {\n      color: ${(props) => props.theme.colors.brand[700]};\n    }\n  `,\n  [TYPOGRAPHY_VARIANTS.BUTTON_LRG_TITLE]: css<DSTypographyT.StyledPropsInterface>`\n    ${typographyFontFamily}\n    font-size: ${(props) => props.fontSize ?? '1.125rem'};\n    line-height: ${(props) => props.lineHeight ?? '1.503125rem'};\n    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${(props) => props.fontSize ?? '1.385rem'};\n      line-height: ${(props) => props.lineHeight ?? '1.85rem'};\n    }\n    text-decoration: underline;\n    color: ${(props) => props.theme.colors.brand[600]};\n    background: none;\n    border: none;\n    display: inline-block;\n    text-align: left;\n    cursor: pointer;\n    &:hover {\n      color: ${(props) => props.theme.colors.brand[700]};\n    }\n    &:active {\n      color: ${(props) => props.theme.colors.brand[800]};\n    }\n    &:focus {\n      color: ${(props) => props.theme.colors.brand[700]};\n    }\n  `,\n};\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/parts/variants/feedback.js

@@ -1,18 +1,23 @@
 import * as React from "react";
 import { css } from "@elliemae/ds-system";
 import { TYPOGRAPHY_VARIANTS } from "../../constants/index.js";
+import { typographyFontFamily } from "../typographyFontFamily.js";
 const typedCss = () => css``;
 const VARIANTS_CSS_FEEDBACK = {
   [TYPOGRAPHY_VARIANTS.FEEDBACK_NEUTRAL]: css`
+    ${typographyFontFamily}
     color: ${(props) => props.theme.colors.neutral[600]};
   `,
   [TYPOGRAPHY_VARIANTS.FEEDBACK_BRAND]: css`
+    ${typographyFontFamily}
     color: ${(props) => props.theme.colors.brand[800]};
   `,
   [TYPOGRAPHY_VARIANTS.FEEDBACK_IMPORTANT]: css`
+    ${typographyFontFamily}
     color: ${(props) => props.theme.colors.warning[950]};
   `,
   [TYPOGRAPHY_VARIANTS.FEEDBACK_CRITICAL]: css`
+    ${typographyFontFamily}
     color: ${(props) => props.theme.colors.danger[950]};
   `
 };

package/dist/esm/parts/variants/feedback.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/variants/feedback.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { css } from '@elliemae/ds-system';\nimport { TYPOGRAPHY_VARIANTS } from '../../constants/index.js';\nimport type { DSTypographyT } from '../../react-desc-prop-types.js';\n\n// typescript \"hack\" to infer the ReturnType of a generic function (css) with a generic argument (DSTypographyT.StyledPropsInterface)\n// as of 14/november/2023 I was not able to find a better way to do this.\nconst typedCss = () => css<DSTypographyT.StyledPropsInterface>``;\ntype FeedbackCSSMap = {\n  [key in DSTypographyT.FeedbackVariants]: ReturnType<typeof typedCss>;\n};\n\nexport const VARIANTS_CSS_FEEDBACK: FeedbackCSSMap = {\n  [TYPOGRAPHY_VARIANTS.FEEDBACK_NEUTRAL]: css<DSTypographyT.StyledPropsInterface>`\n    color: ${(props) => props.theme.colors.neutral[600]};\n  `,\n  [TYPOGRAPHY_VARIANTS.FEEDBACK_BRAND]: css<DSTypographyT.StyledPropsInterface>`\n    color: ${(props) => props.theme.colors.brand[800]};\n  `,\n  [TYPOGRAPHY_VARIANTS.FEEDBACK_IMPORTANT]: css<DSTypographyT.StyledPropsInterface>`\n    color: ${(props) => props.theme.colors.warning[950]};\n  `,\n  [TYPOGRAPHY_VARIANTS.FEEDBACK_CRITICAL]: css<DSTypographyT.StyledPropsInterface>`\n    color: ${(props) => props.theme.colors.danger[950]};\n  `,\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,WAAW;AACpB,SAAS,2BAA2B;AAKpC,MAAM,WAAW,MAAM;AAKhB,MAAM,wBAAwC;AAAA,EACnD,CAAC,oBAAoB,gBAAgB,GAAG;AAAA,aAC7B,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA,EAErD,CAAC,oBAAoB,cAAc,GAAG;AAAA,aAC3B,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA,EAEnD,CAAC,oBAAoB,kBAAkB,GAAG;AAAA,aAC/B,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA,EAErD,CAAC,oBAAoB,iBAAiB,GAAG;AAAA,aAC9B,CAAC,UAAU,MAAM,MAAM,OAAO,OAAO,GAAG,CAAC;AAAA;AAEtD;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { css } from '@elliemae/ds-system';\nimport { TYPOGRAPHY_VARIANTS } from '../../constants/index.js';\nimport type { DSTypographyT } from '../../react-desc-prop-types.js';\nimport { typographyFontFamily } from '../typographyFontFamily.js';\n\n// typescript \"hack\" to infer the ReturnType of a generic function (css) with a generic argument (DSTypographyT.StyledPropsInterface)\n// as of 14/november/2023 I was not able to find a better way to do this.\nconst typedCss = () => css<DSTypographyT.StyledPropsInterface>``;\ntype FeedbackCSSMap = {\n  [key in DSTypographyT.FeedbackVariants]: ReturnType<typeof typedCss>;\n};\n\nexport const VARIANTS_CSS_FEEDBACK: FeedbackCSSMap = {\n  [TYPOGRAPHY_VARIANTS.FEEDBACK_NEUTRAL]: css<DSTypographyT.StyledPropsInterface>`\n    ${typographyFontFamily}\n    color: ${(props) => props.theme.colors.neutral[600]};\n  `,\n  [TYPOGRAPHY_VARIANTS.FEEDBACK_BRAND]: css<DSTypographyT.StyledPropsInterface>`\n    ${typographyFontFamily}\n    color: ${(props) => props.theme.colors.brand[800]};\n  `,\n  [TYPOGRAPHY_VARIANTS.FEEDBACK_IMPORTANT]: css<DSTypographyT.StyledPropsInterface>`\n    ${typographyFontFamily}\n    color: ${(props) => props.theme.colors.warning[950]};\n  `,\n  [TYPOGRAPHY_VARIANTS.FEEDBACK_CRITICAL]: css<DSTypographyT.StyledPropsInterface>`\n    ${typographyFontFamily}\n    color: ${(props) => props.theme.colors.danger[950]};\n  `,\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,WAAW;AACpB,SAAS,2BAA2B;AAEpC,SAAS,4BAA4B;AAIrC,MAAM,WAAW,MAAM;AAKhB,MAAM,wBAAwC;AAAA,EACnD,CAAC,oBAAoB,gBAAgB,GAAG;AAAA,MACpC,oBAAoB;AAAA,aACb,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA,EAErD,CAAC,oBAAoB,cAAc,GAAG;AAAA,MAClC,oBAAoB;AAAA,aACb,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA,EAEnD,CAAC,oBAAoB,kBAAkB,GAAG;AAAA,MACtC,oBAAoB;AAAA,aACb,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA,EAErD,CAAC,oBAAoB,iBAAiB,GAAG;AAAA,MACrC,oBAAoB;AAAA,aACb,CAAC,UAAU,MAAM,MAAM,OAAO,OAAO,GAAG,CAAC;AAAA;AAEtD;",
   "names": []
 }

package/dist/esm/parts/variants/header-article.js

@@ -1,10 +1,12 @@
 import * as React from "react";
 import { css } from "@elliemae/ds-system";
 import { TYPOGRAPHY_VARIANTS } from "../../constants/index.js";
+import { typographyFontFamily } from "../typographyFontFamily.js";
 const typedCss = () => css``;
 const VARIANTS_CSS_HEADER_ARTICLE = {
   // font-size: 34px/RT | line-height: 41px/RT
   [TYPOGRAPHY_VARIANTS.H1_ARTICLE]: css`
+    ${typographyFontFamily}
     font-size: ${(props) => props.fontSize ?? "2.125rem"}; // 34px -> 34/16 = 2.125rem
     line-height: ${(props) => props.lineHeight ?? "2.5625rem"}; // 41px -> 41/16 = 2.5625rem
     @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
@@ -19,6 +21,7 @@ const VARIANTS_CSS_HEADER_ARTICLE = {
   `,
   // font-size: 24px/RT | line-height: 31px/RT
   [TYPOGRAPHY_VARIANTS.H2_ARTICLE]: css`
+    ${typographyFontFamily}
     font-size: ${(props) => props.fontSize ?? "1.5rem"}; // 24px -> 24/16 = 1.5rem
     line-height: ${(props) => props.lineHeight ?? "1.9375rem"}; // 31px -> 31/16 = 1.9375rem
     @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
@@ -33,6 +36,7 @@ const VARIANTS_CSS_HEADER_ARTICLE = {
   `,
   // font-size: 18px/RT | line-height: 22px/RT
   [TYPOGRAPHY_VARIANTS.H3_ARTICLE]: css`
+    ${typographyFontFamily}
     font-size: ${(props) => props.fontSize ?? "1.125rem"}; // 18px -> 18/16 = 1.125rem
     line-height: ${(props) => props.lineHeight ?? "1.375rem"}; // 22px -> 22/16 = 1.375rem
     @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
@@ -47,6 +51,7 @@ const VARIANTS_CSS_HEADER_ARTICLE = {
   `,
   // font-size: 16px/RT | line-height: 20px/RT
   [TYPOGRAPHY_VARIANTS.H4_ARTICLE]: css`
+    ${typographyFontFamily}
     font-size: ${(props) => props.fontSize ?? "1rem"}; // 16px -> 16/16 = 1rem
     line-height: ${(props) => props.lineHeight ?? "1.25rem"}; // 20px -> 20/16 = 1.25rem
     @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
@@ -61,6 +66,7 @@ const VARIANTS_CSS_HEADER_ARTICLE = {
   `,
   // font-size: 14px/RT | line-height: 17px/RT
   [TYPOGRAPHY_VARIANTS.H5_ARTICLE]: css`
+    ${typographyFontFamily}
     font-size: ${(props) => props.fontSize ?? "0.875rem"}; // 14px -> 14/16 = 0.875rem
     line-height: ${(props) => props.lineHeight ?? "1.0625rem"}; // 17px -> 17/16 = 1.0625rem
     @media (min-width: ${({ theme }) => theme.breakpoints.small}) {

package/dist/esm/parts/variants/header-article.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/variants/header-article.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { css } from '@elliemae/ds-system';\nimport { TYPOGRAPHY_VARIANTS } from '../../constants/index.js';\nimport type { DSTypographyT } from '../../react-desc-prop-types.js';\n\n// typescript \"hack\" to infer the ReturnType of a generic function (css) with a generic argument (DSTypographyT.StyledPropsInterface)\n// as of 14/november/2023 I was not able to find a better way to do this.\nconst typedCss = () => css<DSTypographyT.StyledPropsInterface>``;\ntype ArticleHeadingsCSSMap = {\n  [key in DSTypographyT.ArticleHeadingVariants]: ReturnType<typeof typedCss>;\n};\n\n// as of 14/november/2023\n// mobile -> font-size: 16px\n// desktop -> font-size: 13px\n// the \"magic values\" of the rem units are the result of the following formula:\n// (variant's requirement px/RT value / 16px) for mobile\n// (variant's requirement px/RT value / 13px) for desktop\nexport const VARIANTS_CSS_HEADER_ARTICLE: ArticleHeadingsCSSMap = {\n  // font-size: 34px/RT | line-height: 41px/RT\n  [TYPOGRAPHY_VARIANTS.H1_ARTICLE]: css<DSTypographyT.StyledPropsInterface>`\n    font-size: ${(props) => props.fontSize ?? '2.125rem'}; // 34px -> 34/16 = 2.125rem\n    line-height: ${(props) => props.lineHeight ?? '2.5625rem'}; // 41px -> 41/16 = 2.5625rem\n    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${(props) => props.fontSize ?? '2.615384615384615rem'}; // 34px -> 34/13 = 2.615384615384615rem\n      line-height: ${(props) => props.lineHeight ?? '3.153846153846154rem'}; // 41px -> 41/13 = 3.153846153846154rem\n    }\n    margin-bottom: 24px;\n    color: ${(props) => props.theme.colors.neutral[700]};\n    font-weight: 400;\n    overflow-wrap: break-word;\n    white-space: pre-wrap;\n  `,\n  // font-size: 24px/RT | line-height: 31px/RT\n  [TYPOGRAPHY_VARIANTS.H2_ARTICLE]: css<DSTypographyT.StyledPropsInterface>`\n    font-size: ${(props) => props.fontSize ?? '1.5rem'}; // 24px -> 24/16 = 1.5rem\n    line-height: ${(props) => props.lineHeight ?? '1.9375rem'}; // 31px -> 31/16 = 1.9375rem\n    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${(props) => props.fontSize ?? '1.846153846153846rem'}; // 24px -> 24/13 = 1.846153846153846rem\n      line-height: ${(props) => props.lineHeight ?? '2.384615384615385rem'}; // 31px -> 31/13 = 2.384615384615385rem\n    }\n    margin-bottom: 12px;\n    color: ${(props) => props.theme.colors.neutral[700]};\n    font-weight: 400;\n    overflow-wrap: break-word;\n    white-space: pre-wrap;\n  `,\n  // font-size: 18px/RT | line-height: 22px/RT\n  [TYPOGRAPHY_VARIANTS.H3_ARTICLE]: css<DSTypographyT.StyledPropsInterface>`\n    font-size: ${(props) => props.fontSize ?? '1.125rem'}; // 18px -> 18/16 = 1.125rem\n    line-height: ${(props) => props.lineHeight ?? '1.375rem'}; // 22px -> 22/16 = 1.375rem\n    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${(props) => props.fontSize ?? '1.384615384615385rem'}; // 18px -> 18/13 = 1.384615384615385rem\n      line-height: ${(props) => props.lineHeight ?? '1.692307692307692rem'}; // 22px -> 22/13 = 1.692307692307692rem\n    }\n    padding-bottom: 12px;\n    color: ${(props) => props.theme.colors.neutral[700]};\n    font-weight: 400;\n    overflow-wrap: break-word;\n    white-space: pre-wrap;\n  `,\n  // font-size: 16px/RT | line-height: 20px/RT\n  [TYPOGRAPHY_VARIANTS.H4_ARTICLE]: css<DSTypographyT.StyledPropsInterface>`\n    font-size: ${(props) => props.fontSize ?? '1rem'}; // 16px -> 16/16 = 1rem\n    line-height: ${(props) => props.lineHeight ?? '1.25rem'}; // 20px -> 20/16 = 1.25rem\n    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${(props) => props.fontSize ?? '1.230769230769231rem'}; // 16px -> 16/13 = 1.230769230769231rem\n      line-height: ${(props) => props.lineHeight ?? '1.538461538461538rem'}; // 20px -> 20/13 = 1.538461538461538rem\n    }\n    padding-bottom: 4px;\n    color: ${(props) => props.theme.colors.neutral[700]};\n    font-weight: 600;\n    overflow-wrap: break-word;\n    white-space: pre-wrap;\n  `,\n  // font-size: 14px/RT | line-height: 17px/RT\n  [TYPOGRAPHY_VARIANTS.H5_ARTICLE]: css<DSTypographyT.StyledPropsInterface>`\n    font-size: ${(props) => props.fontSize ?? '0.875rem'}; // 14px -> 14/16 = 0.875rem\n    line-height: ${(props) => props.lineHeight ?? '1.0625rem'}; // 17px -> 17/16 = 1.0625rem\n    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${(props) => props.fontSize ?? '1.076923076923077rem'}; // 14px -> 14/13 = 1.076923076923077rem\n      line-height: ${(props) => props.lineHeight ?? '1.307692307692308rem'}; // 17px -> 17/13 = 1.307692307692308rem\n    }\n    margin-bottom: 4px;\n    color: ${(props) => props.theme.colors.neutral[700]};\n    font-weight: 600;\n    overflow-wrap: break-word;\n    white-space: pre-wrap;\n  `,\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,WAAW;AACpB,SAAS,2BAA2B;AAKpC,MAAM,WAAW,MAAM;AAWhB,MAAM,8BAAqD;AAAA;AAAA,EAEhE,CAAC,oBAAoB,UAAU,GAAG;AAAA,iBACnB,CAAC,UAAU,MAAM,YAAY,UAAU;AAAA,mBACrC,CAAC,UAAU,MAAM,cAAc,WAAW;AAAA,yBACpC,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,KAAK;AAAA,mBAC5C,CAAC,UAAU,MAAM,YAAY,sBAAsB;AAAA,qBACjD,CAAC,UAAU,MAAM,cAAc,sBAAsB;AAAA;AAAA;AAAA,aAG7D,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMrD,CAAC,oBAAoB,UAAU,GAAG;AAAA,iBACnB,CAAC,UAAU,MAAM,YAAY,QAAQ;AAAA,mBACnC,CAAC,UAAU,MAAM,cAAc,WAAW;AAAA,yBACpC,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,KAAK;AAAA,mBAC5C,CAAC,UAAU,MAAM,YAAY,sBAAsB;AAAA,qBACjD,CAAC,UAAU,MAAM,cAAc,sBAAsB;AAAA;AAAA;AAAA,aAG7D,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMrD,CAAC,oBAAoB,UAAU,GAAG;AAAA,iBACnB,CAAC,UAAU,MAAM,YAAY,UAAU;AAAA,mBACrC,CAAC,UAAU,MAAM,cAAc,UAAU;AAAA,yBACnC,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,KAAK;AAAA,mBAC5C,CAAC,UAAU,MAAM,YAAY,sBAAsB;AAAA,qBACjD,CAAC,UAAU,MAAM,cAAc,sBAAsB;AAAA;AAAA;AAAA,aAG7D,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMrD,CAAC,oBAAoB,UAAU,GAAG;AAAA,iBACnB,CAAC,UAAU,MAAM,YAAY,MAAM;AAAA,mBACjC,CAAC,UAAU,MAAM,cAAc,SAAS;AAAA,yBAClC,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,KAAK;AAAA,mBAC5C,CAAC,UAAU,MAAM,YAAY,sBAAsB;AAAA,qBACjD,CAAC,UAAU,MAAM,cAAc,sBAAsB;AAAA;AAAA;AAAA,aAG7D,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMrD,CAAC,oBAAoB,UAAU,GAAG;AAAA,iBACnB,CAAC,UAAU,MAAM,YAAY,UAAU;AAAA,mBACrC,CAAC,UAAU,MAAM,cAAc,WAAW;AAAA,yBACpC,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,KAAK;AAAA,mBAC5C,CAAC,UAAU,MAAM,YAAY,sBAAsB;AAAA,qBACjD,CAAC,UAAU,MAAM,cAAc,sBAAsB;AAAA;AAAA;AAAA,aAG7D,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAKvD;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { css } from '@elliemae/ds-system';\nimport { TYPOGRAPHY_VARIANTS } from '../../constants/index.js';\nimport type { DSTypographyT } from '../../react-desc-prop-types.js';\nimport { typographyFontFamily } from '../typographyFontFamily.js';\n\n// typescript \"hack\" to infer the ReturnType of a generic function (css) with a generic argument (DSTypographyT.StyledPropsInterface)\n// as of 14/november/2023 I was not able to find a better way to do this.\nconst typedCss = () => css<DSTypographyT.StyledPropsInterface>``;\ntype ArticleHeadingsCSSMap = {\n  [key in DSTypographyT.ArticleHeadingVariants]: ReturnType<typeof typedCss>;\n};\n\n// as of 14/november/2023\n// mobile -> font-size: 16px\n// desktop -> font-size: 13px\n// the \"magic values\" of the rem units are the result of the following formula:\n// (variant's requirement px/RT value / 16px) for mobile\n// (variant's requirement px/RT value / 13px) for desktop\nexport const VARIANTS_CSS_HEADER_ARTICLE: ArticleHeadingsCSSMap = {\n  // font-size: 34px/RT | line-height: 41px/RT\n  [TYPOGRAPHY_VARIANTS.H1_ARTICLE]: css<DSTypographyT.StyledPropsInterface>`\n    ${typographyFontFamily}\n    font-size: ${(props) => props.fontSize ?? '2.125rem'}; // 34px -> 34/16 = 2.125rem\n    line-height: ${(props) => props.lineHeight ?? '2.5625rem'}; // 41px -> 41/16 = 2.5625rem\n    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${(props) => props.fontSize ?? '2.615384615384615rem'}; // 34px -> 34/13 = 2.615384615384615rem\n      line-height: ${(props) => props.lineHeight ?? '3.153846153846154rem'}; // 41px -> 41/13 = 3.153846153846154rem\n    }\n    margin-bottom: 24px;\n    color: ${(props) => props.theme.colors.neutral[700]};\n    font-weight: 400;\n    overflow-wrap: break-word;\n    white-space: pre-wrap;\n  `,\n  // font-size: 24px/RT | line-height: 31px/RT\n  [TYPOGRAPHY_VARIANTS.H2_ARTICLE]: css<DSTypographyT.StyledPropsInterface>`\n    ${typographyFontFamily}\n    font-size: ${(props) => props.fontSize ?? '1.5rem'}; // 24px -> 24/16 = 1.5rem\n    line-height: ${(props) => props.lineHeight ?? '1.9375rem'}; // 31px -> 31/16 = 1.9375rem\n    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${(props) => props.fontSize ?? '1.846153846153846rem'}; // 24px -> 24/13 = 1.846153846153846rem\n      line-height: ${(props) => props.lineHeight ?? '2.384615384615385rem'}; // 31px -> 31/13 = 2.384615384615385rem\n    }\n    margin-bottom: 12px;\n    color: ${(props) => props.theme.colors.neutral[700]};\n    font-weight: 400;\n    overflow-wrap: break-word;\n    white-space: pre-wrap;\n  `,\n  // font-size: 18px/RT | line-height: 22px/RT\n  [TYPOGRAPHY_VARIANTS.H3_ARTICLE]: css<DSTypographyT.StyledPropsInterface>`\n    ${typographyFontFamily}\n    font-size: ${(props) => props.fontSize ?? '1.125rem'}; // 18px -> 18/16 = 1.125rem\n    line-height: ${(props) => props.lineHeight ?? '1.375rem'}; // 22px -> 22/16 = 1.375rem\n    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${(props) => props.fontSize ?? '1.384615384615385rem'}; // 18px -> 18/13 = 1.384615384615385rem\n      line-height: ${(props) => props.lineHeight ?? '1.692307692307692rem'}; // 22px -> 22/13 = 1.692307692307692rem\n    }\n    padding-bottom: 12px;\n    color: ${(props) => props.theme.colors.neutral[700]};\n    font-weight: 400;\n    overflow-wrap: break-word;\n    white-space: pre-wrap;\n  `,\n  // font-size: 16px/RT | line-height: 20px/RT\n  [TYPOGRAPHY_VARIANTS.H4_ARTICLE]: css<DSTypographyT.StyledPropsInterface>`\n    ${typographyFontFamily}\n    font-size: ${(props) => props.fontSize ?? '1rem'}; // 16px -> 16/16 = 1rem\n    line-height: ${(props) => props.lineHeight ?? '1.25rem'}; // 20px -> 20/16 = 1.25rem\n    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${(props) => props.fontSize ?? '1.230769230769231rem'}; // 16px -> 16/13 = 1.230769230769231rem\n      line-height: ${(props) => props.lineHeight ?? '1.538461538461538rem'}; // 20px -> 20/13 = 1.538461538461538rem\n    }\n    padding-bottom: 4px;\n    color: ${(props) => props.theme.colors.neutral[700]};\n    font-weight: 600;\n    overflow-wrap: break-word;\n    white-space: pre-wrap;\n  `,\n  // font-size: 14px/RT | line-height: 17px/RT\n  [TYPOGRAPHY_VARIANTS.H5_ARTICLE]: css<DSTypographyT.StyledPropsInterface>`\n    ${typographyFontFamily}\n    font-size: ${(props) => props.fontSize ?? '0.875rem'}; // 14px -> 14/16 = 0.875rem\n    line-height: ${(props) => props.lineHeight ?? '1.0625rem'}; // 17px -> 17/16 = 1.0625rem\n    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${(props) => props.fontSize ?? '1.076923076923077rem'}; // 14px -> 14/13 = 1.076923076923077rem\n      line-height: ${(props) => props.lineHeight ?? '1.307692307692308rem'}; // 17px -> 17/13 = 1.307692307692308rem\n    }\n    margin-bottom: 4px;\n    color: ${(props) => props.theme.colors.neutral[700]};\n    font-weight: 600;\n    overflow-wrap: break-word;\n    white-space: pre-wrap;\n  `,\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,WAAW;AACpB,SAAS,2BAA2B;AAEpC,SAAS,4BAA4B;AAIrC,MAAM,WAAW,MAAM;AAWhB,MAAM,8BAAqD;AAAA;AAAA,EAEhE,CAAC,oBAAoB,UAAU,GAAG;AAAA,MAC9B,oBAAoB;AAAA,iBACT,CAAC,UAAU,MAAM,YAAY,UAAU;AAAA,mBACrC,CAAC,UAAU,MAAM,cAAc,WAAW;AAAA,yBACpC,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,KAAK;AAAA,mBAC5C,CAAC,UAAU,MAAM,YAAY,sBAAsB;AAAA,qBACjD,CAAC,UAAU,MAAM,cAAc,sBAAsB;AAAA;AAAA;AAAA,aAG7D,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMrD,CAAC,oBAAoB,UAAU,GAAG;AAAA,MAC9B,oBAAoB;AAAA,iBACT,CAAC,UAAU,MAAM,YAAY,QAAQ;AAAA,mBACnC,CAAC,UAAU,MAAM,cAAc,WAAW;AAAA,yBACpC,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,KAAK;AAAA,mBAC5C,CAAC,UAAU,MAAM,YAAY,sBAAsB;AAAA,qBACjD,CAAC,UAAU,MAAM,cAAc,sBAAsB;AAAA;AAAA;AAAA,aAG7D,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMrD,CAAC,oBAAoB,UAAU,GAAG;AAAA,MAC9B,oBAAoB;AAAA,iBACT,CAAC,UAAU,MAAM,YAAY,UAAU;AAAA,mBACrC,CAAC,UAAU,MAAM,cAAc,UAAU;AAAA,yBACnC,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,KAAK;AAAA,mBAC5C,CAAC,UAAU,MAAM,YAAY,sBAAsB;AAAA,qBACjD,CAAC,UAAU,MAAM,cAAc,sBAAsB;AAAA;AAAA;AAAA,aAG7D,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMrD,CAAC,oBAAoB,UAAU,GAAG;AAAA,MAC9B,oBAAoB;AAAA,iBACT,CAAC,UAAU,MAAM,YAAY,MAAM;AAAA,mBACjC,CAAC,UAAU,MAAM,cAAc,SAAS;AAAA,yBAClC,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,KAAK;AAAA,mBAC5C,CAAC,UAAU,MAAM,YAAY,sBAAsB;AAAA,qBACjD,CAAC,UAAU,MAAM,cAAc,sBAAsB;AAAA;AAAA;AAAA,aAG7D,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMrD,CAAC,oBAAoB,UAAU,GAAG;AAAA,MAC9B,oBAAoB;AAAA,iBACT,CAAC,UAAU,MAAM,YAAY,UAAU;AAAA,mBACrC,CAAC,UAAU,MAAM,cAAc,WAAW;AAAA,yBACpC,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,KAAK;AAAA,mBAC5C,CAAC,UAAU,MAAM,YAAY,sBAAsB;AAAA,qBACjD,CAAC,UAAU,MAAM,cAAc,sBAAsB;AAAA;AAAA;AAAA,aAG7D,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAKvD;",
   "names": []
 }

package/dist/esm/parts/variants/header.js

@@ -1,9 +1,11 @@
 import * as React from "react";
 import { css } from "@elliemae/ds-system";
 import { TYPOGRAPHY_VARIANTS } from "../../constants/index.js";
+import { typographyFontFamily } from "../typographyFontFamily.js";
 const typedCss = () => css``;
 const VARIANTS_CSS_HEADER = {
   [TYPOGRAPHY_VARIANTS.H1]: css`
+    ${typographyFontFamily}
     font-size: ${(props) => props.fontSize ?? "2.12875rem"};
     line-height: ${(props) => props.lineHeight ?? "2.5593749999999997rem"};
     @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
@@ -13,6 +15,7 @@ const VARIANTS_CSS_HEADER = {
     font-weight: 400;
   `,
   [TYPOGRAPHY_VARIANTS.H2]: css`
+    ${typographyFontFamily}
     font-size: ${(props) => props.fontSize ?? "1.503125rem"};
     line-height: ${(props) => props.lineHeight ?? "1.9337499999999999rem"};
     @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
@@ -22,6 +25,7 @@ const VARIANTS_CSS_HEADER = {
     font-weight: 400;
   `,
   [TYPOGRAPHY_VARIANTS.H3]: css`
+    ${typographyFontFamily}
     font-size: ${(props) => props.fontSize ?? "1.1212499999999999rem"};
     line-height: ${(props) => props.lineHeight ?? "1.373125rem"};
     @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
@@ -31,6 +35,7 @@ const VARIANTS_CSS_HEADER = {
     font-weight: 400;
   `,
   [TYPOGRAPHY_VARIANTS.H4]: css`
+    ${typographyFontFamily}
     font-size: ${(props) => props.fontSize ?? "0.999375rem"};
     line-height: ${(props) => props.lineHeight ?? "1.25125rem"};
     @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
@@ -40,6 +45,7 @@ const VARIANTS_CSS_HEADER = {
     font-weight: 400;
   `,
   [TYPOGRAPHY_VARIANTS.H5]: css`
+    ${typographyFontFamily}
     font-size: ${(props) => props.fontSize ?? "0.8775000000000001rem"};
     line-height: ${(props) => props.lineHeight ?? "1.064375rem"};
     @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
@@ -49,6 +55,7 @@ const VARIANTS_CSS_HEADER = {
     font-weight: 400;
   `,
   [TYPOGRAPHY_VARIANTS.H5_STRONG]: css`
+    ${typographyFontFamily}
     font-size: ${(props) => props.fontSize ?? "0.8775000000000001rem"};
     line-height: ${(props) => props.lineHeight ?? "1.064375rem"};
     @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
@@ -58,6 +65,7 @@ const VARIANTS_CSS_HEADER = {
     font-weight: 600;
   `,
   [TYPOGRAPHY_VARIANTS.H4_STRONG]: css`
+    ${typographyFontFamily}
     font-size: ${(props) => props.fontSize ?? "0.999375rem"};
     line-height: ${(props) => props.lineHeight ?? "1.25125rem"};
     @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
@@ -67,6 +75,7 @@ const VARIANTS_CSS_HEADER = {
     font-weight: 600;
   `,
   [TYPOGRAPHY_VARIANTS.H3_STRONG]: css`
+    ${typographyFontFamily}
     font-size: ${(props) => props.fontSize ?? "1.1212499999999999rem"};
     line-height: ${(props) => props.lineHeight ?? "1.373125rem"};
     @media (min-width: ${({ theme }) => theme.breakpoints.small}) {

package/dist/esm/parts/variants/header.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/variants/header.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { css } from '@elliemae/ds-system';\nimport { TYPOGRAPHY_VARIANTS } from '../../constants/index.js';\nimport type { DSTypographyT } from '../../react-desc-prop-types.js';\n\n// typescript \"hack\" to infer the ReturnType of a generic function (css) with a generic argument (DSTypographyT.StyledPropsInterface)\n// as of 14/november/2023 I was not able to find a better way to do this.\nconst typedCss = () => css<DSTypographyT.StyledPropsInterface>``;\ntype HeadingCSSMap = {\n  [key in DSTypographyT.HeadingVariants]: ReturnType<typeof typedCss>;\n};\n\n// as of 14/november/2023\n// mobile -> font-size: 16px\n// desktop -> font-size: 13px\n// the \"magic values\" of the rem units are the result of the following formula:\n// (variant's requirement px/RT value / 16px) for mobile\n// (variant's requirement px/RT value / 13px) for desktop\nexport const VARIANTS_CSS_HEADER: HeadingCSSMap = {\n  [TYPOGRAPHY_VARIANTS.H1]: css<DSTypographyT.StyledPropsInterface>`\n    font-size: ${(props) => props.fontSize ?? '2.12875rem'};\n    line-height: ${(props) => props.lineHeight ?? '2.5593749999999997rem'};\n    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${(props) => props.fontSize ?? '2.62rem'};\n      line-height: ${(props) => props.lineHeight ?? '3.15rem'};\n    }\n    font-weight: 400;\n  `,\n  [TYPOGRAPHY_VARIANTS.H2]: css<DSTypographyT.StyledPropsInterface>`\n    font-size: ${(props) => props.fontSize ?? '1.503125rem'};\n    line-height: ${(props) => props.lineHeight ?? '1.9337499999999999rem'};\n    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${(props) => props.fontSize ?? '1.85rem'};\n      line-height: ${(props) => props.lineHeight ?? '2.38rem'};\n    }\n    font-weight: 400;\n  `,\n  [TYPOGRAPHY_VARIANTS.H3]: css<DSTypographyT.StyledPropsInterface>`\n    font-size: ${(props) => props.fontSize ?? '1.1212499999999999rem'};\n    line-height: ${(props) => props.lineHeight ?? '1.373125rem'};\n    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${(props) => props.fontSize ?? '1.38rem'};\n      line-height: ${(props) => props.lineHeight ?? '1.69rem'};\n    }\n    font-weight: 400;\n  `,\n  [TYPOGRAPHY_VARIANTS.H4]: css<DSTypographyT.StyledPropsInterface>`\n    font-size: ${(props) => props.fontSize ?? '0.999375rem'};\n    line-height: ${(props) => props.lineHeight ?? '1.25125rem'};\n    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${(props) => props.fontSize ?? '1.23rem'};\n      line-height: ${(props) => props.lineHeight ?? '1.54rem'};\n    }\n    font-weight: 400;\n  `,\n  [TYPOGRAPHY_VARIANTS.H5]: css<DSTypographyT.StyledPropsInterface>`\n    font-size: ${(props) => props.fontSize ?? '0.8775000000000001rem'};\n    line-height: ${(props) => props.lineHeight ?? '1.064375rem'};\n    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${(props) => props.fontSize ?? '1.08rem'};\n      line-height: ${(props) => props.lineHeight ?? '1.31rem'};\n    }\n    font-weight: 400;\n  `,\n  [TYPOGRAPHY_VARIANTS.H5_STRONG]: css<DSTypographyT.StyledPropsInterface>`\n    font-size: ${(props) => props.fontSize ?? '0.8775000000000001rem'};\n    line-height: ${(props) => props.lineHeight ?? '1.064375rem'};\n    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${(props) => props.fontSize ?? '1.08rem'};\n      line-height: ${(props) => props.lineHeight ?? '1.31rem'};\n    }\n    font-weight: 600;\n  `,\n  [TYPOGRAPHY_VARIANTS.H4_STRONG]: css<DSTypographyT.StyledPropsInterface>`\n    font-size: ${(props) => props.fontSize ?? '0.999375rem'};\n    line-height: ${(props) => props.lineHeight ?? '1.25125rem'};\n    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${(props) => props.fontSize ?? '1.23rem'};\n      line-height: ${(props) => props.lineHeight ?? '1.54rem'};\n    }\n    font-weight: 600;\n  `,\n  [TYPOGRAPHY_VARIANTS.H3_STRONG]: css<DSTypographyT.StyledPropsInterface>`\n    font-size: ${(props) => props.fontSize ?? '1.1212499999999999rem'};\n    line-height: ${(props) => props.lineHeight ?? '1.373125rem'};\n    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${(props) => props.fontSize ?? '1.38rem'};\n      line-height: ${(props) => props.lineHeight ?? '1.69rem'};\n    }\n    font-weight: 600;\n  `,\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { css } from '@elliemae/ds-system';\nimport { TYPOGRAPHY_VARIANTS } from '../../constants/index.js';\nimport type { DSTypographyT } from '../../react-desc-prop-types.js';\nimport { typographyFontFamily } from '../typographyFontFamily.js';\n\n// typescript \"hack\" to infer the ReturnType of a generic function (css) with a generic argument (DSTypographyT.StyledPropsInterface)\n// as of 14/november/2023 I was not able to find a better way to do this.\nconst typedCss = () => css<DSTypographyT.StyledPropsInterface>``;\ntype HeadingCSSMap = {\n  [key in DSTypographyT.HeadingVariants]: ReturnType<typeof typedCss>;\n};\n\n// as of 14/november/2023\n// mobile -> font-size: 16px\n// desktop -> font-size: 13px\n// the \"magic values\" of the rem units are the result of the following formula:\n// (variant's requirement px/RT value / 16px) for mobile\n// (variant's requirement px/RT value / 13px) for desktop\nexport const VARIANTS_CSS_HEADER: HeadingCSSMap = {\n  [TYPOGRAPHY_VARIANTS.H1]: css<DSTypographyT.StyledPropsInterface>`\n    ${typographyFontFamily}\n    font-size: ${(props) => props.fontSize ?? '2.12875rem'};\n    line-height: ${(props) => props.lineHeight ?? '2.5593749999999997rem'};\n    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${(props) => props.fontSize ?? '2.62rem'};\n      line-height: ${(props) => props.lineHeight ?? '3.15rem'};\n    }\n    font-weight: 400;\n  `,\n  [TYPOGRAPHY_VARIANTS.H2]: css<DSTypographyT.StyledPropsInterface>`\n    ${typographyFontFamily}\n    font-size: ${(props) => props.fontSize ?? '1.503125rem'};\n    line-height: ${(props) => props.lineHeight ?? '1.9337499999999999rem'};\n    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${(props) => props.fontSize ?? '1.85rem'};\n      line-height: ${(props) => props.lineHeight ?? '2.38rem'};\n    }\n    font-weight: 400;\n  `,\n  [TYPOGRAPHY_VARIANTS.H3]: css<DSTypographyT.StyledPropsInterface>`\n    ${typographyFontFamily}\n    font-size: ${(props) => props.fontSize ?? '1.1212499999999999rem'};\n    line-height: ${(props) => props.lineHeight ?? '1.373125rem'};\n    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${(props) => props.fontSize ?? '1.38rem'};\n      line-height: ${(props) => props.lineHeight ?? '1.69rem'};\n    }\n    font-weight: 400;\n  `,\n  [TYPOGRAPHY_VARIANTS.H4]: css<DSTypographyT.StyledPropsInterface>`\n    ${typographyFontFamily}\n    font-size: ${(props) => props.fontSize ?? '0.999375rem'};\n    line-height: ${(props) => props.lineHeight ?? '1.25125rem'};\n    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${(props) => props.fontSize ?? '1.23rem'};\n      line-height: ${(props) => props.lineHeight ?? '1.54rem'};\n    }\n    font-weight: 400;\n  `,\n  [TYPOGRAPHY_VARIANTS.H5]: css<DSTypographyT.StyledPropsInterface>`\n    ${typographyFontFamily}\n    font-size: ${(props) => props.fontSize ?? '0.8775000000000001rem'};\n    line-height: ${(props) => props.lineHeight ?? '1.064375rem'};\n    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${(props) => props.fontSize ?? '1.08rem'};\n      line-height: ${(props) => props.lineHeight ?? '1.31rem'};\n    }\n    font-weight: 400;\n  `,\n  [TYPOGRAPHY_VARIANTS.H5_STRONG]: css<DSTypographyT.StyledPropsInterface>`\n    ${typographyFontFamily}\n    font-size: ${(props) => props.fontSize ?? '0.8775000000000001rem'};\n    line-height: ${(props) => props.lineHeight ?? '1.064375rem'};\n    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${(props) => props.fontSize ?? '1.08rem'};\n      line-height: ${(props) => props.lineHeight ?? '1.31rem'};\n    }\n    font-weight: 600;\n  `,\n  [TYPOGRAPHY_VARIANTS.H4_STRONG]: css<DSTypographyT.StyledPropsInterface>`\n    ${typographyFontFamily}\n    font-size: ${(props) => props.fontSize ?? '0.999375rem'};\n    line-height: ${(props) => props.lineHeight ?? '1.25125rem'};\n    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${(props) => props.fontSize ?? '1.23rem'};\n      line-height: ${(props) => props.lineHeight ?? '1.54rem'};\n    }\n    font-weight: 600;\n  `,\n  [TYPOGRAPHY_VARIANTS.H3_STRONG]: css<DSTypographyT.StyledPropsInterface>`\n    ${typographyFontFamily}\n    font-size: ${(props) => props.fontSize ?? '1.1212499999999999rem'};\n    line-height: ${(props) => props.lineHeight ?? '1.373125rem'};\n    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${(props) => props.fontSize ?? '1.38rem'};\n      line-height: ${(props) => props.lineHeight ?? '1.69rem'};\n    }\n    font-weight: 600;\n  `,\n};\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/parts/variants/highlight.js

@@ -1,9 +1,11 @@
 import * as React from "react";
 import { css } from "@elliemae/ds-system";
 import { TYPOGRAPHY_VARIANTS } from "../../constants/index.js";
+import { typographyFontFamily } from "../typographyFontFamily.js";
 const typedCss = () => css``;
 const VARIANTS_CSS_HIGHLIGHT = {
   [TYPOGRAPHY_VARIANTS.HIGHLIGHT_NEUTRAL]: css`
+    ${typographyFontFamily}
     padding: 0px 4px;
     margin: 0px 1px;
     border-radius: 4px;
@@ -11,6 +13,7 @@ const VARIANTS_CSS_HIGHLIGHT = {
     color: ${(props) => props.theme.colors.neutral[600]};
   `,
   [TYPOGRAPHY_VARIANTS.HIGHLIGHT_BRAND]: css`
+    ${typographyFontFamily}
     padding: 0px 4px;
     margin: 0px 1px;
     border-radius: 4px;
@@ -18,6 +21,7 @@ const VARIANTS_CSS_HIGHLIGHT = {
     color: ${(props) => props.theme.colors.brand[800]};
   `,
   [TYPOGRAPHY_VARIANTS.HIGHLIGHT_IMPORTANT]: css`
+    ${typographyFontFamily}
     padding: 0px 4px;
     margin: 0px 1px;
     border-radius: 4px;
@@ -25,6 +29,7 @@ const VARIANTS_CSS_HIGHLIGHT = {
     color: ${(props) => props.theme.colors.warning[950]};
   `,
   [TYPOGRAPHY_VARIANTS.HIGHLIGHT_CRITICAL]: css`
+    ${typographyFontFamily}
     padding: 0px 4px;
     margin: 0px 1px;
     border-radius: 4px;

package/dist/esm/parts/variants/highlight.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/variants/highlight.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { css } from '@elliemae/ds-system';\nimport { TYPOGRAPHY_VARIANTS } from '../../constants/index.js';\nimport type { DSTypographyT } from '../../react-desc-prop-types.js';\n\n// typescript \"hack\" to infer the ReturnType of a generic function (css) with a generic argument (DSTypographyT.StyledPropsInterface)\n// as of 14/november/2023 I was not able to find a better way to do this.\nconst typedCss = () => css<DSTypographyT.StyledPropsInterface>``;\ntype HighlightCSSMap = {\n  [key in DSTypographyT.HighlightVariants]: ReturnType<typeof typedCss>;\n};\n\nexport const VARIANTS_CSS_HIGHLIGHT: HighlightCSSMap = {\n  [TYPOGRAPHY_VARIANTS.HIGHLIGHT_NEUTRAL]: css<DSTypographyT.StyledPropsInterface>`\n    padding: 0px 4px;\n    margin: 0px 1px;\n    border-radius: 4px;\n    background-color: ${(props) => props.theme.colors.neutral['050']};\n    color: ${(props) => props.theme.colors.neutral[600]};\n  `,\n  [TYPOGRAPHY_VARIANTS.HIGHLIGHT_BRAND]: css<DSTypographyT.StyledPropsInterface>`\n    padding: 0px 4px;\n    margin: 0px 1px;\n    border-radius: 4px;\n    background-color: ${(props) => props.theme.colors.brand[200]};\n    color: ${(props) => props.theme.colors.brand[800]};\n  `,\n  [TYPOGRAPHY_VARIANTS.HIGHLIGHT_IMPORTANT]: css<DSTypographyT.StyledPropsInterface>`\n    padding: 0px 4px;\n    margin: 0px 1px;\n    border-radius: 4px;\n    background-color: ${(props) => props.theme.colors.warning[400]};\n    color: ${(props) => props.theme.colors.warning[950]};\n  `,\n  [TYPOGRAPHY_VARIANTS.HIGHLIGHT_CRITICAL]: css<DSTypographyT.StyledPropsInterface>`\n    padding: 0px 4px;\n    margin: 0px 1px;\n    border-radius: 4px;\n    background-color: ${(props) => props.theme.colors.danger[400]};\n    color: ${(props) => props.theme.colors.danger[950]};\n  `,\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,WAAW;AACpB,SAAS,2BAA2B;AAKpC,MAAM,WAAW,MAAM;AAKhB,MAAM,yBAA0C;AAAA,EACrD,CAAC,oBAAoB,iBAAiB,GAAG;AAAA;AAAA;AAAA;AAAA,wBAInB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA,aACvD,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA,EAErD,CAAC,oBAAoB,eAAe,GAAG;AAAA;AAAA;AAAA;AAAA,wBAIjB,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA,aACnD,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA,EAEnD,CAAC,oBAAoB,mBAAmB,GAAG;AAAA;AAAA;AAAA;AAAA,wBAIrB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,aACrD,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA,EAErD,CAAC,oBAAoB,kBAAkB,GAAG;AAAA;AAAA;AAAA;AAAA,wBAIpB,CAAC,UAAU,MAAM,MAAM,OAAO,OAAO,GAAG,CAAC;AAAA,aACpD,CAAC,UAAU,MAAM,MAAM,OAAO,OAAO,GAAG,CAAC;AAAA;AAEtD;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { css } from '@elliemae/ds-system';\nimport { TYPOGRAPHY_VARIANTS } from '../../constants/index.js';\nimport type { DSTypographyT } from '../../react-desc-prop-types.js';\nimport { typographyFontFamily } from '../typographyFontFamily.js';\n\n// typescript \"hack\" to infer the ReturnType of a generic function (css) with a generic argument (DSTypographyT.StyledPropsInterface)\n// as of 14/november/2023 I was not able to find a better way to do this.\nconst typedCss = () => css<DSTypographyT.StyledPropsInterface>``;\ntype HighlightCSSMap = {\n  [key in DSTypographyT.HighlightVariants]: ReturnType<typeof typedCss>;\n};\n\nexport const VARIANTS_CSS_HIGHLIGHT: HighlightCSSMap = {\n  [TYPOGRAPHY_VARIANTS.HIGHLIGHT_NEUTRAL]: css<DSTypographyT.StyledPropsInterface>`\n    ${typographyFontFamily}\n    padding: 0px 4px;\n    margin: 0px 1px;\n    border-radius: 4px;\n    background-color: ${(props) => props.theme.colors.neutral['050']};\n    color: ${(props) => props.theme.colors.neutral[600]};\n  `,\n  [TYPOGRAPHY_VARIANTS.HIGHLIGHT_BRAND]: css<DSTypographyT.StyledPropsInterface>`\n    ${typographyFontFamily}\n    padding: 0px 4px;\n    margin: 0px 1px;\n    border-radius: 4px;\n    background-color: ${(props) => props.theme.colors.brand[200]};\n    color: ${(props) => props.theme.colors.brand[800]};\n  `,\n  [TYPOGRAPHY_VARIANTS.HIGHLIGHT_IMPORTANT]: css<DSTypographyT.StyledPropsInterface>`\n    ${typographyFontFamily}\n    padding: 0px 4px;\n    margin: 0px 1px;\n    border-radius: 4px;\n    background-color: ${(props) => props.theme.colors.warning[400]};\n    color: ${(props) => props.theme.colors.warning[950]};\n  `,\n  [TYPOGRAPHY_VARIANTS.HIGHLIGHT_CRITICAL]: css<DSTypographyT.StyledPropsInterface>`\n    ${typographyFontFamily}\n    padding: 0px 4px;\n    margin: 0px 1px;\n    border-radius: 4px;\n    background-color: ${(props) => props.theme.colors.danger[400]};\n    color: ${(props) => props.theme.colors.danger[950]};\n  `,\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,WAAW;AACpB,SAAS,2BAA2B;AAEpC,SAAS,4BAA4B;AAIrC,MAAM,WAAW,MAAM;AAKhB,MAAM,yBAA0C;AAAA,EACrD,CAAC,oBAAoB,iBAAiB,GAAG;AAAA,MACrC,oBAAoB;AAAA;AAAA;AAAA;AAAA,wBAIF,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA,aACvD,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA,EAErD,CAAC,oBAAoB,eAAe,GAAG;AAAA,MACnC,oBAAoB;AAAA;AAAA;AAAA;AAAA,wBAIF,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA,aACnD,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA,EAEnD,CAAC,oBAAoB,mBAAmB,GAAG;AAAA,MACvC,oBAAoB;AAAA;AAAA;AAAA;AAAA,wBAIF,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,aACrD,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA,EAErD,CAAC,oBAAoB,kBAAkB,GAAG;AAAA,MACtC,oBAAoB;AAAA;AAAA;AAAA;AAAA,wBAIF,CAAC,UAAU,MAAM,MAAM,OAAO,OAAO,GAAG,CAAC;AAAA,aACpD,CAAC,UAAU,MAAM,MAAM,OAAO,OAAO,GAAG,CAAC;AAAA;AAEtD;",
   "names": []
 }

package/dist/esm/parts/variants/link.js

@@ -1,9 +1,11 @@
 import * as React from "react";
 import { css } from "@elliemae/ds-system";
 import { TYPOGRAPHY_VARIANTS } from "../../constants/index.js";
+import { typographyFontFamily } from "../typographyFontFamily.js";
 const typedCss = () => css``;
 const VARIANTS_LINK = {
   [TYPOGRAPHY_VARIANTS.LINK]: css`
+    ${typographyFontFamily}
     font-size: ${(props) => props.fontSize ?? "0.8125rem"};
     line-height: ${(props) => props.lineHeight ?? "1.503125rem"};
     @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
@@ -26,6 +28,7 @@ const VARIANTS_LINK = {
     }
   `,
   [TYPOGRAPHY_VARIANTS.LINK_SML_TITLE]: css`
+    ${typographyFontFamily}
     font-size: ${(props) => props.fontSize ?? "0.875rem"};
     line-height: ${(props) => props.lineHeight ?? "1.503125rem"};
     @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
@@ -48,6 +51,7 @@ const VARIANTS_LINK = {
     }
   `,
   [TYPOGRAPHY_VARIANTS.LINK_MED_TITLE]: css`
+    ${typographyFontFamily}
     font-size: ${(props) => props.fontSize ?? "1rem"};
     line-height: ${(props) => props.lineHeight ?? "1.503125rem"};
     @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
@@ -70,6 +74,7 @@ const VARIANTS_LINK = {
     }
   `,
   [TYPOGRAPHY_VARIANTS.LINK_LRG_TITLE]: css`
+    ${typographyFontFamily}
     font-size: ${(props) => props.fontSize ?? "1.125rem"};
     line-height: ${(props) => props.lineHeight ?? "1.503125rem"};
     @media (min-width: ${({ theme }) => theme.breakpoints.small}) {