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

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/variants/header-article.ts", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAoB;AACpB,uBAAoC;AAKpC,MAAM,WAAW,MAAM;AAWhB,MAAM,8BAAqD;AAAA;AAAA,EAEhE,CAAC,qCAAoB,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,qCAAoB,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,qCAAoB,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,qCAAoB,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,qCAAoB,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 { 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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAoB;AACpB,uBAAoC;AAEpC,kCAAqC;AAIrC,MAAM,WAAW,MAAM;AAWhB,MAAM,8BAAqD;AAAA;AAAA,EAEhE,CAAC,qCAAoB,UAAU,GAAG;AAAA,MAC9B,gDAAoB;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,qCAAoB,UAAU,GAAG;AAAA,MAC9B,gDAAoB;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,qCAAoB,UAAU,GAAG;AAAA,MAC9B,gDAAoB;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,qCAAoB,UAAU,GAAG;AAAA,MAC9B,gDAAoB;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,qCAAoB,UAAU,GAAG;AAAA,MAC9B,gDAAoB;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/cjs/parts/variants/header.js

@@ -34,9 +34,11 @@ module.exports = __toCommonJS(header_exports);
 var React = __toESM(require("react"));
 var import_ds_system = require("@elliemae/ds-system");
 var import_constants = require("../../constants/index.js");
+var import_typographyFontFamily = require("../typographyFontFamily.js");
 const typedCss = () => import_ds_system.css``;
 const VARIANTS_CSS_HEADER = {
   [import_constants.TYPOGRAPHY_VARIANTS.H1]: import_ds_system.css`
+    ${import_typographyFontFamily.typographyFontFamily}
     font-size: ${(props) => props.fontSize ?? "2.12875rem"};
     line-height: ${(props) => props.lineHeight ?? "2.5593749999999997rem"};
     @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
@@ -46,6 +48,7 @@ const VARIANTS_CSS_HEADER = {
     font-weight: 400;
   `,
   [import_constants.TYPOGRAPHY_VARIANTS.H2]: import_ds_system.css`
+    ${import_typographyFontFamily.typographyFontFamily}
     font-size: ${(props) => props.fontSize ?? "1.503125rem"};
     line-height: ${(props) => props.lineHeight ?? "1.9337499999999999rem"};
     @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
@@ -55,6 +58,7 @@ const VARIANTS_CSS_HEADER = {
     font-weight: 400;
   `,
   [import_constants.TYPOGRAPHY_VARIANTS.H3]: import_ds_system.css`
+    ${import_typographyFontFamily.typographyFontFamily}
     font-size: ${(props) => props.fontSize ?? "1.1212499999999999rem"};
     line-height: ${(props) => props.lineHeight ?? "1.373125rem"};
     @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
@@ -64,6 +68,7 @@ const VARIANTS_CSS_HEADER = {
     font-weight: 400;
   `,
   [import_constants.TYPOGRAPHY_VARIANTS.H4]: import_ds_system.css`
+    ${import_typographyFontFamily.typographyFontFamily}
     font-size: ${(props) => props.fontSize ?? "0.999375rem"};
     line-height: ${(props) => props.lineHeight ?? "1.25125rem"};
     @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
@@ -73,6 +78,7 @@ const VARIANTS_CSS_HEADER = {
     font-weight: 400;
   `,
   [import_constants.TYPOGRAPHY_VARIANTS.H5]: import_ds_system.css`
+    ${import_typographyFontFamily.typographyFontFamily}
     font-size: ${(props) => props.fontSize ?? "0.8775000000000001rem"};
     line-height: ${(props) => props.lineHeight ?? "1.064375rem"};
     @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
@@ -82,6 +88,7 @@ const VARIANTS_CSS_HEADER = {
     font-weight: 400;
   `,
   [import_constants.TYPOGRAPHY_VARIANTS.H5_STRONG]: import_ds_system.css`
+    ${import_typographyFontFamily.typographyFontFamily}
     font-size: ${(props) => props.fontSize ?? "0.8775000000000001rem"};
     line-height: ${(props) => props.lineHeight ?? "1.064375rem"};
     @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
@@ -91,6 +98,7 @@ const VARIANTS_CSS_HEADER = {
     font-weight: 600;
   `,
   [import_constants.TYPOGRAPHY_VARIANTS.H4_STRONG]: import_ds_system.css`
+    ${import_typographyFontFamily.typographyFontFamily}
     font-size: ${(props) => props.fontSize ?? "0.999375rem"};
     line-height: ${(props) => props.lineHeight ?? "1.25125rem"};
     @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
@@ -100,6 +108,7 @@ const VARIANTS_CSS_HEADER = {
     font-weight: 600;
   `,
   [import_constants.TYPOGRAPHY_VARIANTS.H3_STRONG]: import_ds_system.css`
+    ${import_typographyFontFamily.typographyFontFamily}
     font-size: ${(props) => props.fontSize ?? "1.1212499999999999rem"};
     line-height: ${(props) => props.lineHeight ?? "1.373125rem"};
     @media (min-width: ${({ theme }) => theme.breakpoints.small}) {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/variants/header.ts", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -34,9 +34,11 @@ module.exports = __toCommonJS(highlight_exports);
 var React = __toESM(require("react"));
 var import_ds_system = require("@elliemae/ds-system");
 var import_constants = require("../../constants/index.js");
+var import_typographyFontFamily = require("../typographyFontFamily.js");
 const typedCss = () => import_ds_system.css``;
 const VARIANTS_CSS_HIGHLIGHT = {
   [import_constants.TYPOGRAPHY_VARIANTS.HIGHLIGHT_NEUTRAL]: import_ds_system.css`
+    ${import_typographyFontFamily.typographyFontFamily}
     padding: 0px 4px;
     margin: 0px 1px;
     border-radius: 4px;
@@ -44,6 +46,7 @@ const VARIANTS_CSS_HIGHLIGHT = {
     color: ${(props) => props.theme.colors.neutral[600]};
   `,
   [import_constants.TYPOGRAPHY_VARIANTS.HIGHLIGHT_BRAND]: import_ds_system.css`
+    ${import_typographyFontFamily.typographyFontFamily}
     padding: 0px 4px;
     margin: 0px 1px;
     border-radius: 4px;
@@ -51,6 +54,7 @@ const VARIANTS_CSS_HIGHLIGHT = {
     color: ${(props) => props.theme.colors.brand[800]};
   `,
   [import_constants.TYPOGRAPHY_VARIANTS.HIGHLIGHT_IMPORTANT]: import_ds_system.css`
+    ${import_typographyFontFamily.typographyFontFamily}
     padding: 0px 4px;
     margin: 0px 1px;
     border-radius: 4px;
@@ -58,6 +62,7 @@ const VARIANTS_CSS_HIGHLIGHT = {
     color: ${(props) => props.theme.colors.warning[950]};
   `,
   [import_constants.TYPOGRAPHY_VARIANTS.HIGHLIGHT_CRITICAL]: import_ds_system.css`
+    ${import_typographyFontFamily.typographyFontFamily}
     padding: 0px 4px;
     margin: 0px 1px;
     border-radius: 4px;

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/variants/highlight.ts", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAoB;AACpB,uBAAoC;AAKpC,MAAM,WAAW,MAAM;AAKhB,MAAM,yBAA0C;AAAA,EACrD,CAAC,qCAAoB,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,qCAAoB,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,qCAAoB,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,qCAAoB,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 { 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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAoB;AACpB,uBAAoC;AAEpC,kCAAqC;AAIrC,MAAM,WAAW,MAAM;AAKhB,MAAM,yBAA0C;AAAA,EACrD,CAAC,qCAAoB,iBAAiB,GAAG;AAAA,MACrC,gDAAoB;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,qCAAoB,eAAe,GAAG;AAAA,MACnC,gDAAoB;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,qCAAoB,mBAAmB,GAAG;AAAA,MACvC,gDAAoB;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,qCAAoB,kBAAkB,GAAG;AAAA,MACtC,gDAAoB;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/cjs/parts/variants/link.js

@@ -34,9 +34,11 @@ module.exports = __toCommonJS(link_exports);
 var React = __toESM(require("react"));
 var import_ds_system = require("@elliemae/ds-system");
 var import_constants = require("../../constants/index.js");
+var import_typographyFontFamily = require("../typographyFontFamily.js");
 const typedCss = () => import_ds_system.css``;
 const VARIANTS_LINK = {
   [import_constants.TYPOGRAPHY_VARIANTS.LINK]: import_ds_system.css`
+    ${import_typographyFontFamily.typographyFontFamily}
     font-size: ${(props) => props.fontSize ?? "0.8125rem"};
     line-height: ${(props) => props.lineHeight ?? "1.503125rem"};
     @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
@@ -59,6 +61,7 @@ const VARIANTS_LINK = {
     }
   `,
   [import_constants.TYPOGRAPHY_VARIANTS.LINK_SML_TITLE]: import_ds_system.css`
+    ${import_typographyFontFamily.typographyFontFamily}
     font-size: ${(props) => props.fontSize ?? "0.875rem"};
     line-height: ${(props) => props.lineHeight ?? "1.503125rem"};
     @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
@@ -81,6 +84,7 @@ const VARIANTS_LINK = {
     }
   `,
   [import_constants.TYPOGRAPHY_VARIANTS.LINK_MED_TITLE]: import_ds_system.css`
+    ${import_typographyFontFamily.typographyFontFamily}
     font-size: ${(props) => props.fontSize ?? "1rem"};
     line-height: ${(props) => props.lineHeight ?? "1.503125rem"};
     @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
@@ -103,6 +107,7 @@ const VARIANTS_LINK = {
     }
   `,
   [import_constants.TYPOGRAPHY_VARIANTS.LINK_LRG_TITLE]: import_ds_system.css`
+    ${import_typographyFontFamily.typographyFontFamily}
     font-size: ${(props) => props.fontSize ?? "1.125rem"};
     line-height: ${(props) => props.lineHeight ?? "1.503125rem"};
     @media (min-width: ${({ theme }) => theme.breakpoints.small}) {

package/dist/cjs/parts/variants/link.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/variants/link.ts", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["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 LinkCSSMap = {\n  [key in DSTypographyT.LinkVariants]: 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_LINK: LinkCSSMap = {\n  [TYPOGRAPHY_VARIANTS.LINK]: 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    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.LINK_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    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.LINK_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    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.LINK_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    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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["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 LinkCSSMap = {\n  [key in DSTypographyT.LinkVariants]: 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_LINK: LinkCSSMap = {\n  [TYPOGRAPHY_VARIANTS.LINK]: 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    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.LINK_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    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.LINK_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    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.LINK_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    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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/cjs/parts/variants/quote.js

@@ -34,10 +34,12 @@ module.exports = __toCommonJS(quote_exports);
 var React = __toESM(require("react"));
 var import_ds_system = require("@elliemae/ds-system");
 var import_constants = require("../../constants/index.js");
+var import_typographyFontFamily = require("../typographyFontFamily.js");
 const typedCss = () => import_ds_system.css``;
 const VARIANTS_CSS_QUOTE = {
   // font-size: 18px/RT | line-height: 28px/RT
   [import_constants.TYPOGRAPHY_VARIANTS.QUOTE_NEUTRAL]: import_ds_system.css`
+    ${import_typographyFontFamily.typographyFontFamily}
     font-size: ${(props) => props.fontSize ?? "1.125rem"}; // 18px -> 18/16 = 1.125rem
     line-height: ${(props) => props.lineHeight ?? "1.75rem"}; // 28px -> 28/16 = 1.75rem
     @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
@@ -56,6 +58,7 @@ const VARIANTS_CSS_QUOTE = {
   `,
   // font-size: 18px/RT | line-height: 28px/RT
   [import_constants.TYPOGRAPHY_VARIANTS.QUOTE_BRAND]: import_ds_system.css`
+    ${import_typographyFontFamily.typographyFontFamily}
     font-size: ${(props) => props.fontSize ?? "1.125rem"}; // 18px -> 18/16 = 1.125rem
     line-height: ${(props) => props.lineHeight ?? "1.75rem"}; // 28px -> 28/16 = 1.75rem
     @media (min-width: ${({ theme }) => theme.breakpoints.small}) {

package/dist/cjs/parts/variants/quote.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/variants/quote.ts", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["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 QuoteCSSMap = {\n  [key in DSTypographyT.QuoteVariants]: 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_QUOTE: QuoteCSSMap = {\n  // font-size: 18px/RT | line-height: 28px/RT\n  [TYPOGRAPHY_VARIANTS.QUOTE_NEUTRAL]: css<DSTypographyT.StyledPropsInterface>`\n    font-size: ${(props) => props.fontSize ?? '1.125rem'}; // 18px -> 18/16 = 1.125rem\n    line-height: ${(props) => props.lineHeight ?? '1.75rem'}; // 28px -> 28/16 = 1.75rem\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 ?? '2.153846153846154rem'}; // 28px -> 28/13 = 2.153846153846154rem\n    }\n    padding: 16px;\n    margin-bottom: 24px;\n    color: ${(props) => props.theme.colors.neutral[600]};\n    background-color: ${(props) => props.theme.colors.neutral['050']};\n    border-radius: 4px;\n    font-weight: 400;\n    font-style: italic;\n    overflow-wrap: break-word;\n    white-space: pre-wrap;\n  `,\n  // font-size: 18px/RT | line-height: 28px/RT\n  [TYPOGRAPHY_VARIANTS.QUOTE_BRAND]: css<DSTypographyT.StyledPropsInterface>`\n    font-size: ${(props) => props.fontSize ?? '1.125rem'}; // 18px -> 18/16 = 1.125rem\n    line-height: ${(props) => props.lineHeight ?? '1.75rem'}; // 28px -> 28/16 = 1.75rem\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 ?? '2.153846153846154rem'}; // 28px -> 28/13 = 2.153846153846154rem\n    }\n    padding: 24px;\n    margin-bottom: 24px;\n    color: ${(props) => props.theme.colors.brand[700]};\n    background-color: ${(props) => props.theme.colors.brand[200]};\n    border-radius: 4px;\n    font-weight: 400;\n    font-style: italic;\n    overflow-wrap: break-word;\n    white-space: pre-wrap;\n  `,\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAoB;AACpB,uBAAoC;AAKpC,MAAM,WAAW,MAAM;AAWhB,MAAM,qBAAkC;AAAA;AAAA,EAE7C,CAAC,qCAAoB,aAAa,GAAG;AAAA,iBACtB,CAAC,UAAU,MAAM,YAAY,UAAU;AAAA,mBACrC,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;AAAA,aAI7D,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,wBAC/B,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQlE,CAAC,qCAAoB,WAAW,GAAG;AAAA,iBACpB,CAAC,UAAU,MAAM,YAAY,UAAU;AAAA,mBACrC,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;AAAA,aAI7D,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA,wBAC7B,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOhE;",
+  "sourcesContent": ["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 QuoteCSSMap = {\n  [key in DSTypographyT.QuoteVariants]: 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_QUOTE: QuoteCSSMap = {\n  // font-size: 18px/RT | line-height: 28px/RT\n  [TYPOGRAPHY_VARIANTS.QUOTE_NEUTRAL]: 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.75rem'}; // 28px -> 28/16 = 1.75rem\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 ?? '2.153846153846154rem'}; // 28px -> 28/13 = 2.153846153846154rem\n    }\n    padding: 16px;\n    margin-bottom: 24px;\n    color: ${(props) => props.theme.colors.neutral[600]};\n    background-color: ${(props) => props.theme.colors.neutral['050']};\n    border-radius: 4px;\n    font-weight: 400;\n    font-style: italic;\n    overflow-wrap: break-word;\n    white-space: pre-wrap;\n  `,\n  // font-size: 18px/RT | line-height: 28px/RT\n  [TYPOGRAPHY_VARIANTS.QUOTE_BRAND]: 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.75rem'}; // 28px -> 28/16 = 1.75rem\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 ?? '2.153846153846154rem'}; // 28px -> 28/13 = 2.153846153846154rem\n    }\n    padding: 24px;\n    margin-bottom: 24px;\n    color: ${(props) => props.theme.colors.brand[700]};\n    background-color: ${(props) => props.theme.colors.brand[200]};\n    border-radius: 4px;\n    font-weight: 400;\n    font-style: italic;\n    overflow-wrap: break-word;\n    white-space: pre-wrap;\n  `,\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAoB;AACpB,uBAAoC;AAEpC,kCAAqC;AAIrC,MAAM,WAAW,MAAM;AAWhB,MAAM,qBAAkC;AAAA;AAAA,EAE7C,CAAC,qCAAoB,aAAa,GAAG;AAAA,MACjC,gDAAoB;AAAA,iBACT,CAAC,UAAU,MAAM,YAAY,UAAU;AAAA,mBACrC,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;AAAA,aAI7D,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,wBAC/B,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQlE,CAAC,qCAAoB,WAAW,GAAG;AAAA,MAC/B,gDAAoB;AAAA,iBACT,CAAC,UAAU,MAAM,YAAY,UAAU;AAAA,mBACrC,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;AAAA,aAI7D,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA,wBAC7B,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOhE;",
   "names": []
 }

package/dist/cjs/react-desc-prop-types.js

@@ -53,6 +53,7 @@ const DSTypographyPropTypes = {
     "b1-light",
     "b2-light",
     "b3-light",
+    "b3-strong",
     "button",
     "button-sml-title",
     "button-med-title",

package/dist/cjs/react-desc-prop-types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/react-desc-prop-types.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type { GlobalAttributesT, XstyledProps, DSPropTypesSchema } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport type { FontSizeProps, LineHeightProps, ColorProps } from '@elliemae/ds-system';\nimport type { WeakValidationMap } from 'react';\n\nexport declare namespace DSTypographyT {\n  export type HeadingVariants = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h3-strong' | 'h4-strong' | 'h5-strong';\n  export type BodyVariants = 'b1' | 'b2' | 'b3' | 'b4' | 'b1-light' | 'b2-light' | 'b3-light';\n  export type ButtonVariants = 'button' | 'button-sml-title' | 'button-med-title' | 'button-lrg-title';\n  export type LinkVariants = 'link' | 'link-sml-title' | 'link-med-title' | 'link-lrg-title';\n  export type QuoteVariants = 'quote-brand' | 'quote-neutral';\n  export type HighlightVariants =\n    | 'highlight-neutral'\n    | 'highlight-brand'\n    | 'highlight-important'\n    | 'highlight-critical';\n  export type FeedbackVariants = 'feedback-neutral' | 'feedback-brand' | 'feedback-important' | 'feedback-critical';\n  export type ArticleHeadingVariants = 'h1-article' | 'h2-article' | 'h3-article' | 'h4-article' | 'h5-article';\n  export type ArticleBodyVariants = 'b1-article' | 'b2-article' | 'b3-article';\n\n  export type Variant =\n    | HeadingVariants\n    | BodyVariants\n    | ButtonVariants\n    | LinkVariants\n    | QuoteVariants\n    | HighlightVariants\n    | ArticleHeadingVariants\n    | ArticleBodyVariants\n    | FeedbackVariants;\n\n  export type VariantsMap = {\n    [key in Uppercase<TypescriptHelpersT.KebabToSnakeCase<Variant>>]: Lowercase<\n      TypescriptHelpersT.SnakeToKebabCase<key>\n    >;\n  };\n\n  export type StyledPropsInterface = FontSizeProps &\n    LineHeightProps &\n    ColorProps & {\n      children: DSTypographyT.InternalProps['children'];\n      variant: DSTypographyT.Variant;\n      $truncateWithEllipsis?: boolean;\n      $truncateWithReadMore?: DSTypographyT.InternalProps['truncateWithReadMore'];\n    };\n\n  export interface RequiredProps {\n    variant: Variant;\n    children: React.ReactNode | React.ReactNode[];\n  }\n\n  export interface OptionalProps {\n    as?: keyof React.JSX.IntrinsicElements;\n    component?: keyof React.JSX.IntrinsicElements;\n    innerRef?: React.MutableRefObject<HTMLDivElement | null> | React.RefCallback<HTMLDivElement>;\n    truncateWithReadMore?: {\n      lines: number;\n      expanded: boolean;\n    };\n  }\n\n  export interface DefaultProps {\n    truncateWithEllipsis: boolean;\n  }\n\n  export interface Props\n    extends Partial<DefaultProps>,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps | 'color'>,\n      XstyledProps,\n      FontSizeProps,\n      LineHeightProps,\n      ColorProps,\n      RequiredProps {}\n\n  export interface InternalProps\n    extends DefaultProps,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps | 'color'>,\n      XstyledProps,\n      FontSizeProps,\n      LineHeightProps,\n      ColorProps,\n      RequiredProps {}\n}\n\nexport const DSTypographyPropTypes: DSPropTypesSchema<DSTypographyT.Props> = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  variant: PropTypes.oneOf([\n    'h1',\n    'h2',\n    'h3',\n    'h4',\n    'h5',\n    'h3-strong',\n    'h4-strong',\n    'h5-strong',\n    'b1',\n    'b2',\n    'b3',\n    'b4',\n    'b1-light',\n    'b2-light',\n    'b3-light',\n    'button',\n    'button-sml-title',\n    'button-med-title',\n    'button-lrg-title',\n    'link',\n    'link-sml-title',\n    'link-med-title',\n    'link-lrg-title',\n    'quote-brand',\n    'quote-neutral',\n    'highlight-neutral',\n    'highlight-brand',\n    'highlight-important',\n    'highlight-critical',\n    'feedback-neutral',\n    'feedback-brand',\n    'feedback-important',\n    'feedback-critical',\n    'h1-article',\n    'h2-article',\n    'h3-article',\n    'h4-article',\n    'h5-article',\n    'b1-article',\n    'b2-article',\n    'b3-article',\n  ]).description(\n    `render the default style based on the variant and the default mapping HTML tag:\n    Variant to HTML Tag\n    h1 => <h1 />,\n    h2 => <h2 />,\n    h3 => <h3 />,\n    h4 => <h4 />,\n    h5 => <h5 />,\n    b1 => <p />,\n    b2 => <p />,\n    b3 => <p />,\n    b4 => <p />,\n    button => <button />,\n    link => <a />,\n    'quote-brand' => <pre />,\n    'quote-neutral' => <pre />,\n    'highlight-neutral' => <span />,\n    'highlight-brand' => <span />,\n    'highlight-important' => <span />,\n    'highlight-critical' => <span />,\n    'h1-article' => <h1 />,\n    'h2-article' => <h2 />,\n    'h3-article' => <h3 />,\n    'h4-article' => <h4 />,\n    'h5-article' => <h5 />,\n    'b1-article' => <p />,\n    'b2-article' => <p />,\n    'b3-article' => <p />,\n  `,\n  ).isRequired,\n  children: PropTypes.node.description('Children element').isRequired,\n  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).description('Inner ref to font component.'),\n  fontSize: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.object, PropTypes.bool])\n    .description('Applies to the root container. For more info read xstyled docs')\n    .xstyled(),\n  lineHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.object, PropTypes.bool])\n    .description('Applies to the root container. For more info read xstyled docs')\n    .xstyled(),\n  as: PropTypes.string.description('Use to override the printed HTML tag, ex: `span` or `strong`'),\n  component: PropTypes.string.description(\n    'Same as `as` for internal use. Use to override the printed HTML tag, ex: `span` or `strong`',\n  ),\n  truncateWithEllipsis: PropTypes.bool\n    .description('If true, the text will not wrap, but instead will truncate with a text overflow ellipsis.')\n    .defaultValue(false),\n  truncateWithReadMore: PropTypes.shape({\n    lines: PropTypes.number.description('Number of lines to truncate to.'),\n    expanded: PropTypes.bool.description('If true, the text will be expanded.'),\n  }).description(\n    'Ammount of lines to truncate to. If expanded, the text will be expanded. Use in conjunction with useReadMoreTruncate hook',\n  ),\n};\n\n// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\nexport const DSTypographyPropTypesSchema = DSTypographyPropTypes as unknown as WeakValidationMap<DSTypographyT.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,8BAAuE;AAqFhE,MAAM,wBAAgE;AAAA,EAC3E,GAAG;AAAA,EACH,GAAG;AAAA,EACH,SAAS,kCAAU,MAAM;AAAA,IACvB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC,EAAE;AAAA,IACD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA4BF,EAAE;AAAA,EACF,UAAU,kCAAU,KAAK,YAAY,kBAAkB,EAAE;AAAA,EACzD,UAAU,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU,IAAI,CAAC,EAAE,YAAY,8BAA8B;AAAA,EAC5G,UAAU,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU,QAAQ,kCAAU,QAAQ,kCAAU,IAAI,CAAC,EACjG,YAAY,gEAAgE,EAC5E,QAAQ;AAAA,EACX,YAAY,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU,QAAQ,kCAAU,QAAQ,kCAAU,IAAI,CAAC,EACnG,YAAY,gEAAgE,EAC5E,QAAQ;AAAA,EACX,IAAI,kCAAU,OAAO,YAAY,8DAA8D;AAAA,EAC/F,WAAW,kCAAU,OAAO;AAAA,IAC1B;AAAA,EACF;AAAA,EACA,sBAAsB,kCAAU,KAC7B,YAAY,2FAA2F,EACvG,aAAa,KAAK;AAAA,EACrB,sBAAsB,kCAAU,MAAM;AAAA,IACpC,OAAO,kCAAU,OAAO,YAAY,iCAAiC;AAAA,IACrE,UAAU,kCAAU,KAAK,YAAY,qCAAqC;AAAA,EAC5E,CAAC,EAAE;AAAA,IACD;AAAA,EACF;AACF;AAGO,MAAM,8BAA8B;",
+  "sourcesContent": ["import { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type { GlobalAttributesT, XstyledProps, DSPropTypesSchema } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport type { FontSizeProps, LineHeightProps, ColorProps } from '@elliemae/ds-system';\nimport type { WeakValidationMap } from 'react';\n\nexport declare namespace DSTypographyT {\n  export type HeadingVariants = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h3-strong' | 'h4-strong' | 'h5-strong';\n  export type BodyVariants = 'b1' | 'b2' | 'b3' | 'b4' | 'b1-light' | 'b2-light' | 'b3-light' | 'b3-strong';\n  export type ButtonVariants = 'button' | 'button-sml-title' | 'button-med-title' | 'button-lrg-title';\n  export type LinkVariants = 'link' | 'link-sml-title' | 'link-med-title' | 'link-lrg-title';\n  export type QuoteVariants = 'quote-brand' | 'quote-neutral';\n  export type HighlightVariants =\n    | 'highlight-neutral'\n    | 'highlight-brand'\n    | 'highlight-important'\n    | 'highlight-critical';\n  export type FeedbackVariants = 'feedback-neutral' | 'feedback-brand' | 'feedback-important' | 'feedback-critical';\n  export type ArticleHeadingVariants = 'h1-article' | 'h2-article' | 'h3-article' | 'h4-article' | 'h5-article';\n  export type ArticleBodyVariants = 'b1-article' | 'b2-article' | 'b3-article';\n\n  export type Variant =\n    | HeadingVariants\n    | BodyVariants\n    | ButtonVariants\n    | LinkVariants\n    | QuoteVariants\n    | HighlightVariants\n    | ArticleHeadingVariants\n    | ArticleBodyVariants\n    | FeedbackVariants;\n\n  export type VariantsMap = {\n    [key in Uppercase<TypescriptHelpersT.KebabToSnakeCase<Variant>>]: Lowercase<\n      TypescriptHelpersT.SnakeToKebabCase<key>\n    >;\n  };\n\n  export type StyledPropsInterface = FontSizeProps &\n    LineHeightProps &\n    ColorProps & {\n      children: DSTypographyT.InternalProps['children'];\n      variant: DSTypographyT.Variant;\n      $truncateWithEllipsis?: boolean;\n      $truncateWithReadMore?: DSTypographyT.InternalProps['truncateWithReadMore'];\n    };\n\n  export interface RequiredProps {\n    variant: Variant;\n    children: React.ReactNode | React.ReactNode[];\n  }\n\n  export interface OptionalProps {\n    as?: keyof React.JSX.IntrinsicElements;\n    component?: keyof React.JSX.IntrinsicElements;\n    innerRef?: React.MutableRefObject<HTMLDivElement | null> | React.RefCallback<HTMLDivElement>;\n    truncateWithReadMore?: {\n      lines: number;\n      expanded: boolean;\n    };\n  }\n\n  export interface DefaultProps {\n    truncateWithEllipsis: boolean;\n  }\n\n  export interface Props\n    extends Partial<DefaultProps>,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps | 'color'>,\n      XstyledProps,\n      FontSizeProps,\n      LineHeightProps,\n      ColorProps,\n      RequiredProps {}\n\n  export interface InternalProps\n    extends DefaultProps,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps | 'color'>,\n      XstyledProps,\n      FontSizeProps,\n      LineHeightProps,\n      ColorProps,\n      RequiredProps {}\n}\n\nexport const DSTypographyPropTypes: DSPropTypesSchema<DSTypographyT.Props> = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  variant: PropTypes.oneOf([\n    'h1',\n    'h2',\n    'h3',\n    'h4',\n    'h5',\n    'h3-strong',\n    'h4-strong',\n    'h5-strong',\n    'b1',\n    'b2',\n    'b3',\n    'b4',\n    'b1-light',\n    'b2-light',\n    'b3-light',\n    'b3-strong',\n    'button',\n    'button-sml-title',\n    'button-med-title',\n    'button-lrg-title',\n    'link',\n    'link-sml-title',\n    'link-med-title',\n    'link-lrg-title',\n    'quote-brand',\n    'quote-neutral',\n    'highlight-neutral',\n    'highlight-brand',\n    'highlight-important',\n    'highlight-critical',\n    'feedback-neutral',\n    'feedback-brand',\n    'feedback-important',\n    'feedback-critical',\n    'h1-article',\n    'h2-article',\n    'h3-article',\n    'h4-article',\n    'h5-article',\n    'b1-article',\n    'b2-article',\n    'b3-article',\n  ]).description(\n    `render the default style based on the variant and the default mapping HTML tag:\n    Variant to HTML Tag\n    h1 => <h1 />,\n    h2 => <h2 />,\n    h3 => <h3 />,\n    h4 => <h4 />,\n    h5 => <h5 />,\n    b1 => <p />,\n    b2 => <p />,\n    b3 => <p />,\n    b4 => <p />,\n    button => <button />,\n    link => <a />,\n    'quote-brand' => <pre />,\n    'quote-neutral' => <pre />,\n    'highlight-neutral' => <span />,\n    'highlight-brand' => <span />,\n    'highlight-important' => <span />,\n    'highlight-critical' => <span />,\n    'h1-article' => <h1 />,\n    'h2-article' => <h2 />,\n    'h3-article' => <h3 />,\n    'h4-article' => <h4 />,\n    'h5-article' => <h5 />,\n    'b1-article' => <p />,\n    'b2-article' => <p />,\n    'b3-article' => <p />,\n  `,\n  ).isRequired,\n  children: PropTypes.node.description('Children element').isRequired,\n  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).description('Inner ref to font component.'),\n  fontSize: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.object, PropTypes.bool])\n    .description('Applies to the root container. For more info read xstyled docs')\n    .xstyled(),\n  lineHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.object, PropTypes.bool])\n    .description('Applies to the root container. For more info read xstyled docs')\n    .xstyled(),\n  as: PropTypes.string.description('Use to override the printed HTML tag, ex: `span` or `strong`'),\n  component: PropTypes.string.description(\n    'Same as `as` for internal use. Use to override the printed HTML tag, ex: `span` or `strong`',\n  ),\n  truncateWithEllipsis: PropTypes.bool\n    .description('If true, the text will not wrap, but instead will truncate with a text overflow ellipsis.')\n    .defaultValue(false),\n  truncateWithReadMore: PropTypes.shape({\n    lines: PropTypes.number.description('Number of lines to truncate to.'),\n    expanded: PropTypes.bool.description('If true, the text will be expanded.'),\n  }).description(\n    'Ammount of lines to truncate to. If expanded, the text will be expanded. Use in conjunction with useReadMoreTruncate hook',\n  ),\n};\n\n// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\nexport const DSTypographyPropTypesSchema = DSTypographyPropTypes as unknown as WeakValidationMap<DSTypographyT.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,8BAAuE;AAqFhE,MAAM,wBAAgE;AAAA,EAC3E,GAAG;AAAA,EACH,GAAG;AAAA,EACH,SAAS,kCAAU,MAAM;AAAA,IACvB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC,EAAE;AAAA,IACD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA4BF,EAAE;AAAA,EACF,UAAU,kCAAU,KAAK,YAAY,kBAAkB,EAAE;AAAA,EACzD,UAAU,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU,IAAI,CAAC,EAAE,YAAY,8BAA8B;AAAA,EAC5G,UAAU,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU,QAAQ,kCAAU,QAAQ,kCAAU,IAAI,CAAC,EACjG,YAAY,gEAAgE,EAC5E,QAAQ;AAAA,EACX,YAAY,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU,QAAQ,kCAAU,QAAQ,kCAAU,IAAI,CAAC,EACnG,YAAY,gEAAgE,EAC5E,QAAQ;AAAA,EACX,IAAI,kCAAU,OAAO,YAAY,8DAA8D;AAAA,EAC/F,WAAW,kCAAU,OAAO;AAAA,IAC1B;AAAA,EACF;AAAA,EACA,sBAAsB,kCAAU,KAC7B,YAAY,2FAA2F,EACvG,aAAa,KAAK;AAAA,EACrB,sBAAsB,kCAAU,MAAM;AAAA,IACpC,OAAO,kCAAU,OAAO,YAAY,iCAAiC;AAAA,IACrE,UAAU,kCAAU,KAAK,YAAY,qCAAqC;AAAA,EAC5E,CAAC,EAAE;AAAA,IACD;AAAA,EACF;AACF;AAGO,MAAM,8BAA8B;",
   "names": []
 }

package/dist/esm/config/useDefaultProps.js

@@ -16,6 +16,7 @@ const VariantToAsMap = {
   "b1-light": "p",
   "b2-light": "p",
   "b3-light": "p",
+  "b3-strong": "p",
   button: "button",
   "button-sml-title": "button",
   "button-med-title": "button",

package/dist/esm/config/useDefaultProps.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useDefaultProps.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport type { DSTypographyT } from '../react-desc-prop-types.js';\n\nconst VariantToAsMap: Record<DSTypographyT.Variant, keyof React.JSX.IntrinsicElements> = {\n  h1: 'h1',\n  h2: 'h2',\n  h3: 'h3',\n  h4: 'h4',\n  h5: 'h5',\n  'h3-strong': 'h3',\n  'h4-strong': 'h4',\n  'h5-strong': 'h5',\n  b1: 'p',\n  b2: 'p',\n  b3: 'p',\n  b4: 'p',\n  'b1-light': 'p',\n  'b2-light': 'p',\n  'b3-light': 'p',\n  button: 'button',\n  'button-sml-title': 'button',\n  'button-med-title': 'button',\n  'button-lrg-title': 'button',\n  link: 'a',\n  'link-sml-title': 'a',\n  'link-med-title': 'a',\n  'link-lrg-title': 'a',\n  'quote-brand': 'pre',\n  'quote-neutral': 'pre',\n  'highlight-neutral': 'span',\n  'highlight-brand': 'span',\n  'highlight-important': 'span',\n  'highlight-critical': 'span',\n  'feedback-neutral': 'span',\n  'feedback-brand': 'span',\n  'feedback-important': 'span',\n  'feedback-critical': 'span',\n  'h1-article': 'h1',\n  'h2-article': 'h2',\n  'h3-article': 'h3',\n  'h4-article': 'h4',\n  'h5-article': 'h5',\n  'b1-article': 'p',\n  'b2-article': 'p',\n  'b3-article': 'p',\n};\nexport const useDefaultProps = ({\n  variant,\n  component,\n  as: userAs,\n}: DSTypographyT.Props): { as: keyof React.JSX.IntrinsicElements } => {\n  // component prop has higher priority than as prop and variant prop\n  const defaultAs = component || userAs || VariantToAsMap[variant];\n  const defaultProps = React.useMemo(() => ({ as: defaultAs }), [defaultAs]);\n  return defaultProps;\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAGlB,MAAM,iBAAmF;AAAA,EACvF,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,aAAa;AAAA,EACb,aAAa;AAAA,EACb,aAAa;AAAA,EACb,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,QAAQ;AAAA,EACR,oBAAoB;AAAA,EACpB,oBAAoB;AAAA,EACpB,oBAAoB;AAAA,EACpB,MAAM;AAAA,EACN,kBAAkB;AAAA,EAClB,kBAAkB;AAAA,EAClB,kBAAkB;AAAA,EAClB,eAAe;AAAA,EACf,iBAAiB;AAAA,EACjB,qBAAqB;AAAA,EACrB,mBAAmB;AAAA,EACnB,uBAAuB;AAAA,EACvB,sBAAsB;AAAA,EACtB,oBAAoB;AAAA,EACpB,kBAAkB;AAAA,EAClB,sBAAsB;AAAA,EACtB,qBAAqB;AAAA,EACrB,cAAc;AAAA,EACd,cAAc;AAAA,EACd,cAAc;AAAA,EACd,cAAc;AAAA,EACd,cAAc;AAAA,EACd,cAAc;AAAA,EACd,cAAc;AAAA,EACd,cAAc;AAChB;AACO,MAAM,kBAAkB,CAAC;AAAA,EAC9B;AAAA,EACA;AAAA,EACA,IAAI;AACN,MAAsE;AAEpE,QAAM,YAAY,aAAa,UAAU,eAAe,OAAO;AAC/D,QAAM,eAAeA,OAAM,QAAQ,OAAO,EAAE,IAAI,UAAU,IAAI,CAAC,SAAS,CAAC;AACzE,SAAO;AACT;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport type { DSTypographyT } from '../react-desc-prop-types.js';\n\nconst VariantToAsMap: Record<DSTypographyT.Variant, keyof React.JSX.IntrinsicElements> = {\n  h1: 'h1',\n  h2: 'h2',\n  h3: 'h3',\n  h4: 'h4',\n  h5: 'h5',\n  'h3-strong': 'h3',\n  'h4-strong': 'h4',\n  'h5-strong': 'h5',\n  b1: 'p',\n  b2: 'p',\n  b3: 'p',\n  b4: 'p',\n  'b1-light': 'p',\n  'b2-light': 'p',\n  'b3-light': 'p',\n  'b3-strong': 'p',\n  button: 'button',\n  'button-sml-title': 'button',\n  'button-med-title': 'button',\n  'button-lrg-title': 'button',\n  link: 'a',\n  'link-sml-title': 'a',\n  'link-med-title': 'a',\n  'link-lrg-title': 'a',\n  'quote-brand': 'pre',\n  'quote-neutral': 'pre',\n  'highlight-neutral': 'span',\n  'highlight-brand': 'span',\n  'highlight-important': 'span',\n  'highlight-critical': 'span',\n  'feedback-neutral': 'span',\n  'feedback-brand': 'span',\n  'feedback-important': 'span',\n  'feedback-critical': 'span',\n  'h1-article': 'h1',\n  'h2-article': 'h2',\n  'h3-article': 'h3',\n  'h4-article': 'h4',\n  'h5-article': 'h5',\n  'b1-article': 'p',\n  'b2-article': 'p',\n  'b3-article': 'p',\n};\nexport const useDefaultProps = ({\n  variant,\n  component,\n  as: userAs,\n}: DSTypographyT.Props): { as: keyof React.JSX.IntrinsicElements } => {\n  // component prop has higher priority than as prop and variant prop\n  const defaultAs = component || userAs || VariantToAsMap[variant];\n  const defaultProps = React.useMemo(() => ({ as: defaultAs }), [defaultAs]);\n  return defaultProps;\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAGlB,MAAM,iBAAmF;AAAA,EACvF,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,aAAa;AAAA,EACb,aAAa;AAAA,EACb,aAAa;AAAA,EACb,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,QAAQ;AAAA,EACR,oBAAoB;AAAA,EACpB,oBAAoB;AAAA,EACpB,oBAAoB;AAAA,EACpB,MAAM;AAAA,EACN,kBAAkB;AAAA,EAClB,kBAAkB;AAAA,EAClB,kBAAkB;AAAA,EAClB,eAAe;AAAA,EACf,iBAAiB;AAAA,EACjB,qBAAqB;AAAA,EACrB,mBAAmB;AAAA,EACnB,uBAAuB;AAAA,EACvB,sBAAsB;AAAA,EACtB,oBAAoB;AAAA,EACpB,kBAAkB;AAAA,EAClB,sBAAsB;AAAA,EACtB,qBAAqB;AAAA,EACrB,cAAc;AAAA,EACd,cAAc;AAAA,EACd,cAAc;AAAA,EACd,cAAc;AAAA,EACd,cAAc;AAAA,EACd,cAAc;AAAA,EACd,cAAc;AAAA,EACd,cAAc;AAChB;AACO,MAAM,kBAAkB,CAAC;AAAA,EAC9B;AAAA,EACA;AAAA,EACA,IAAI;AACN,MAAsE;AAEpE,QAAM,YAAY,aAAa,UAAU,eAAe,OAAO;AAC/D,QAAM,eAAeA,OAAM,QAAQ,OAAO,EAAE,IAAI,UAAU,IAAI,CAAC,SAAS,CAAC;AACzE,SAAO;AACT;",
   "names": ["React"]
 }

package/dist/esm/constants/index.js

@@ -38,6 +38,7 @@ const TYPOGRAPHY_VARIANTS = {
   B1_LIGHT: "b1-light",
   B2_LIGHT: "b2-light",
   B3_LIGHT: "b3-light",
+  B3_STRONG: "b3-strong",
   H1_ARTICLE: "h1-article",
   H2_ARTICLE: "h2-article",
   H3_ARTICLE: "h3-article",

package/dist/esm/constants/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/constants/index.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { slotObjectToDataTestIds } from '@elliemae/ds-system';\nimport type { DSTypographyT } from '../react-desc-prop-types.js';\n\nexport const DSTypographyName = 'DSTypography';\n\nexport const TYPOGRAPHY_SLOTS = {\n  // this is the only slot that was present before the slotObjectToDataTestIds function was created\n  // since we have splitted the data-testid and the slot responsabilities in the styled helpers,\n  // we can now freely change the \"values\" of this constant without implying breakign changes\n  //   if a user get a breaking change it's because they hardcoded the slot instead of using the constant.\n  TYPOGRAPHY_ELEMENT: 'root',\n} as const;\n\n// this component was created before the slotObjectToDataTestIds function was created\n//  to avoid breaking change we overwrite the slots that for legacy reason where not using the slotObjectToDataTestIds\nexport const LEGACY_DATA_TESTID = {\n  // the new \"slot\" value -> 'root' need to point to the \"old\" data-testid value -> 'ds-typography-element'\n  [TYPOGRAPHY_SLOTS.TYPOGRAPHY_ELEMENT]: 'ds-typography-element',\n  // the old \"slot\" value -> 'typography-element' need to point to the \"old\" data-testid value -> 'ds-typography-element'\n  // we are hardcoding this \"typography-element\" for legacy reason,\n  //  people that were using this constant doesn't expect us to change the `keys` arbitrarily,\n  //   having constant keys and changing value is literally the point of this kind of constants\n  'typography-element': 'ds-typography-element',\n  TYPOGRAPHY_ELEMENT: 'ds-typography-element',\n};\n\nexport const TYPOGRAPHY_DATA_TESTID = {\n  ...slotObjectToDataTestIds(DSTypographyName, TYPOGRAPHY_SLOTS),\n  ...LEGACY_DATA_TESTID,\n};\n\nexport const TYPOGRAPHY_VARIANTS: DSTypographyT.VariantsMap = {\n  H1: 'h1',\n  H2: 'h2',\n  H3: 'h3',\n  H4: 'h4',\n  H5: 'h5',\n  H3_STRONG: 'h3-strong',\n  H4_STRONG: 'h4-strong',\n  H5_STRONG: 'h5-strong',\n  B1: 'b1',\n  B2: 'b2',\n  B3: 'b3',\n  B4: 'b4',\n  B1_LIGHT: 'b1-light',\n  B2_LIGHT: 'b2-light',\n  B3_LIGHT: 'b3-light',\n  H1_ARTICLE: 'h1-article',\n  H2_ARTICLE: 'h2-article',\n  H3_ARTICLE: 'h3-article',\n  H4_ARTICLE: 'h4-article',\n  H5_ARTICLE: 'h5-article',\n  B1_ARTICLE: 'b1-article',\n  B2_ARTICLE: 'b2-article',\n  B3_ARTICLE: 'b3-article',\n  QUOTE_BRAND: 'quote-brand',\n  QUOTE_NEUTRAL: 'quote-neutral',\n  HIGHLIGHT_NEUTRAL: 'highlight-neutral',\n  HIGHLIGHT_BRAND: 'highlight-brand',\n  HIGHLIGHT_IMPORTANT: 'highlight-important',\n  HIGHLIGHT_CRITICAL: 'highlight-critical',\n  FEEDBACK_BRAND: 'feedback-brand',\n  FEEDBACK_NEUTRAL: 'feedback-neutral',\n  FEEDBACK_IMPORTANT: 'feedback-important',\n  FEEDBACK_CRITICAL: 'feedback-critical',\n  BUTTON: 'button',\n  BUTTON_SML_TITLE: 'button-sml-title',\n  BUTTON_MED_TITLE: 'button-med-title',\n  BUTTON_LRG_TITLE: 'button-lrg-title',\n  LINK: 'link',\n  LINK_SML_TITLE: 'link-sml-title',\n  LINK_MED_TITLE: 'link-med-title',\n  LINK_LRG_TITLE: 'link-lrg-title',\n} as const;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;AAGjC,MAAM,mBAAmB;AAEzB,MAAM,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA,EAK9B,oBAAoB;AACtB;AAIO,MAAM,qBAAqB;AAAA;AAAA,EAEhC,CAAC,iBAAiB,kBAAkB,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA,EAKvC,sBAAsB;AAAA,EACtB,oBAAoB;AACtB;AAEO,MAAM,yBAAyB;AAAA,EACpC,GAAG,wBAAwB,kBAAkB,gBAAgB;AAAA,EAC7D,GAAG;AACL;AAEO,MAAM,sBAAiD;AAAA,EAC5D,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,WAAW;AAAA,EACX,WAAW;AAAA,EACX,WAAW;AAAA,EACX,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,eAAe;AAAA,EACf,mBAAmB;AAAA,EACnB,iBAAiB;AAAA,EACjB,qBAAqB;AAAA,EACrB,oBAAoB;AAAA,EACpB,gBAAgB;AAAA,EAChB,kBAAkB;AAAA,EAClB,oBAAoB;AAAA,EACpB,mBAAmB;AAAA,EACnB,QAAQ;AAAA,EACR,kBAAkB;AAAA,EAClB,kBAAkB;AAAA,EAClB,kBAAkB;AAAA,EAClB,MAAM;AAAA,EACN,gBAAgB;AAAA,EAChB,gBAAgB;AAAA,EAChB,gBAAgB;AAClB;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { slotObjectToDataTestIds } from '@elliemae/ds-system';\nimport type { DSTypographyT } from '../react-desc-prop-types.js';\n\nexport const DSTypographyName = 'DSTypography';\n\nexport const TYPOGRAPHY_SLOTS = {\n  // this is the only slot that was present before the slotObjectToDataTestIds function was created\n  // since we have splitted the data-testid and the slot responsabilities in the styled helpers,\n  // we can now freely change the \"values\" of this constant without implying breakign changes\n  //   if a user get a breaking change it's because they hardcoded the slot instead of using the constant.\n  TYPOGRAPHY_ELEMENT: 'root',\n} as const;\n\n// this component was created before the slotObjectToDataTestIds function was created\n//  to avoid breaking change we overwrite the slots that for legacy reason where not using the slotObjectToDataTestIds\nexport const LEGACY_DATA_TESTID = {\n  // the new \"slot\" value -> 'root' need to point to the \"old\" data-testid value -> 'ds-typography-element'\n  [TYPOGRAPHY_SLOTS.TYPOGRAPHY_ELEMENT]: 'ds-typography-element',\n  // the old \"slot\" value -> 'typography-element' need to point to the \"old\" data-testid value -> 'ds-typography-element'\n  // we are hardcoding this \"typography-element\" for legacy reason,\n  //  people that were using this constant doesn't expect us to change the `keys` arbitrarily,\n  //   having constant keys and changing value is literally the point of this kind of constants\n  'typography-element': 'ds-typography-element',\n  TYPOGRAPHY_ELEMENT: 'ds-typography-element',\n};\n\nexport const TYPOGRAPHY_DATA_TESTID = {\n  ...slotObjectToDataTestIds(DSTypographyName, TYPOGRAPHY_SLOTS),\n  ...LEGACY_DATA_TESTID,\n};\n\nexport const TYPOGRAPHY_VARIANTS: DSTypographyT.VariantsMap = {\n  H1: 'h1',\n  H2: 'h2',\n  H3: 'h3',\n  H4: 'h4',\n  H5: 'h5',\n  H3_STRONG: 'h3-strong',\n  H4_STRONG: 'h4-strong',\n  H5_STRONG: 'h5-strong',\n  B1: 'b1',\n  B2: 'b2',\n  B3: 'b3',\n  B4: 'b4',\n  B1_LIGHT: 'b1-light',\n  B2_LIGHT: 'b2-light',\n  B3_LIGHT: 'b3-light',\n  B3_STRONG: 'b3-strong',\n  H1_ARTICLE: 'h1-article',\n  H2_ARTICLE: 'h2-article',\n  H3_ARTICLE: 'h3-article',\n  H4_ARTICLE: 'h4-article',\n  H5_ARTICLE: 'h5-article',\n  B1_ARTICLE: 'b1-article',\n  B2_ARTICLE: 'b2-article',\n  B3_ARTICLE: 'b3-article',\n  QUOTE_BRAND: 'quote-brand',\n  QUOTE_NEUTRAL: 'quote-neutral',\n  HIGHLIGHT_NEUTRAL: 'highlight-neutral',\n  HIGHLIGHT_BRAND: 'highlight-brand',\n  HIGHLIGHT_IMPORTANT: 'highlight-important',\n  HIGHLIGHT_CRITICAL: 'highlight-critical',\n  FEEDBACK_BRAND: 'feedback-brand',\n  FEEDBACK_NEUTRAL: 'feedback-neutral',\n  FEEDBACK_IMPORTANT: 'feedback-important',\n  FEEDBACK_CRITICAL: 'feedback-critical',\n  BUTTON: 'button',\n  BUTTON_SML_TITLE: 'button-sml-title',\n  BUTTON_MED_TITLE: 'button-med-title',\n  BUTTON_LRG_TITLE: 'button-lrg-title',\n  LINK: 'link',\n  LINK_SML_TITLE: 'link-sml-title',\n  LINK_MED_TITLE: 'link-med-title',\n  LINK_LRG_TITLE: 'link-lrg-title',\n} as const;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;AAGjC,MAAM,mBAAmB;AAEzB,MAAM,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA,EAK9B,oBAAoB;AACtB;AAIO,MAAM,qBAAqB;AAAA;AAAA,EAEhC,CAAC,iBAAiB,kBAAkB,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA,EAKvC,sBAAsB;AAAA,EACtB,oBAAoB;AACtB;AAEO,MAAM,yBAAyB;AAAA,EACpC,GAAG,wBAAwB,kBAAkB,gBAAgB;AAAA,EAC7D,GAAG;AACL;AAEO,MAAM,sBAAiD;AAAA,EAC5D,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,WAAW;AAAA,EACX,WAAW;AAAA,EACX,WAAW;AAAA,EACX,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU;AAAA,EACV,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,eAAe;AAAA,EACf,mBAAmB;AAAA,EACnB,iBAAiB;AAAA,EACjB,qBAAqB;AAAA,EACrB,oBAAoB;AAAA,EACpB,gBAAgB;AAAA,EAChB,kBAAkB;AAAA,EAClB,oBAAoB;AAAA,EACpB,mBAAmB;AAAA,EACnB,QAAQ;AAAA,EACR,kBAAkB;AAAA,EAClB,kBAAkB;AAAA,EAClB,kBAAkB;AAAA,EAClB,MAAM;AAAA,EACN,gBAAgB;AAAA,EAChB,gBAAgB;AAAA,EAChB,gBAAgB;AAClB;",
   "names": []
 }

package/dist/esm/index.js

@@ -1,12 +1,14 @@
 import * as React from "react";
 import { DSTypography, DSTypographyWithSchema } from "./Typography.js";
 import { TYPOGRAPHY_VARIANTS, TYPOGRAPHY_SLOTS, TYPOGRAPHY_DATA_TESTID, DSTypographyName } from "./constants/index.js";
+import { VARIANTS_CSS_BODY } from "./parts/variants/body.js";
 export {
   DSTypography,
   DSTypographyName,
   DSTypographyWithSchema,
   TYPOGRAPHY_DATA_TESTID,
   TYPOGRAPHY_SLOTS,
-  TYPOGRAPHY_VARIANTS
+  TYPOGRAPHY_VARIANTS,
+  VARIANTS_CSS_BODY
 };
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/index.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type {} from '@elliemae/ds-props-helpers';\nimport type {} from '@xstyled/util';\nimport type {} from '@xstyled/system';\n\nexport { DSTypography, DSTypographyWithSchema } from './Typography.js';\nexport { TYPOGRAPHY_VARIANTS, TYPOGRAPHY_SLOTS, TYPOGRAPHY_DATA_TESTID, DSTypographyName } from './constants/index.js';\nexport type { DSTypographyT } from './react-desc-prop-types.js';\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACIvB,SAAS,cAAc,8BAA8B;AACrD,SAAS,qBAAqB,kBAAkB,wBAAwB,wBAAwB;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type {} from '@elliemae/ds-props-helpers';\nimport type {} from '@xstyled/util';\nimport type {} from '@xstyled/system';\n\nexport { DSTypography, DSTypographyWithSchema } from './Typography.js';\nexport { TYPOGRAPHY_VARIANTS, TYPOGRAPHY_SLOTS, TYPOGRAPHY_DATA_TESTID, DSTypographyName } from './constants/index.js';\nexport type { DSTypographyT } from './react-desc-prop-types.js';\n// Exposed so other atoms (e.g. ds-button-v2) can reuse the body variant CSS\n// fragments (b1, b2, \u2026) as a styling base instead of duplicating the values.\nexport { VARIANTS_CSS_BODY } from './parts/variants/body.js';\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACIvB,SAAS,cAAc,8BAA8B;AACrD,SAAS,qBAAqB,kBAAkB,wBAAwB,wBAAwB;AAIhG,SAAS,yBAAyB;",
   "names": []
 }

package/dist/esm/parts/styled.js

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { styled, css, xStyledCommonProps } from "@elliemae/ds-system";
 import { DSTypographyName, TYPOGRAPHY_SLOTS } from "../constants/index.js";
+import { typographyFontFamily } from "./typographyFontFamily.js";
 import { VARIANTS_CSS_MAP } from "./variants/index.js";
 const noWrapStyle = css`
   text-overflow: ellipsis;
@@ -44,6 +45,7 @@ const StyledTypography = styled("div", {
 })`
   margin: 0;
   padding: 0;
+  ${typographyFontFamily}
   ${(props) => VARIANTS_CSS_MAP[props.variant]}
   ${xStyledCommonProps}
   ${(props) => {
@@ -56,6 +58,7 @@ const StyledTypography = styled("div", {
   ${(props) => props.$truncateWithReadMore ? truncateWithReadMoreStyle(props.$truncateWithReadMore) : ""}
 `;
 export {
-  StyledTypography
+  StyledTypography,
+  typographyFontFamily
 };
 //# sourceMappingURL=styled.js.map

package/dist/esm/parts/styled.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/styled.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { styled, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport type { DSTypographyT } from '../react-desc-prop-types.js';\nimport { DSTypographyName, TYPOGRAPHY_SLOTS } from '../constants/index.js';\nimport { VARIANTS_CSS_MAP } from './variants/index.js';\n\nconst noWrapStyle = css`\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n  display: inline-block;\n  max-width: 100%;\n`;\n\nconst wrapStyle = css`\n  overflow-wrap: break-word;\n  white-space: pre-wrap;\n`;\n\nconst truncateWithReadMoreStyle = (\n  readMoreMeta: Required<DSTypographyT.StyledPropsInterface>['$truncateWithReadMore'],\n) => css`\n  display: -webkit-box;\n  -webkit-line-clamp: ${readMoreMeta.expanded ? 'unset' : readMoreMeta.lines};\n  -webkit-box-orient: vertical;\n  hyphens: auto;\n  word-break: break-all;\n`;\n\n// support for `color` shorthands that are not available in the theme and are specific to the typography component\nconst shortHandsColorMap = {\n  neutral: css`\n    color: ${({ theme }) => theme.colors.neutral[600]};\n  `,\n  brand: css`\n    color: ${({ theme }) => theme.colors.brand[800]};\n  `,\n  important: css`\n    color: #853c12;\n  `,\n  critical: css`\n    color: #c70916;\n  `,\n};\nconst specificShorthands = ['neutral', 'brand', 'important', 'critical'];\nconst isSpecificShorthand = (color: string): color is keyof typeof shortHandsColorMap =>\n  specificShorthands.includes(color);\n\n// xStyledCommonProps need to be always AFTER the VARIANTS_CSS_MAP\n//  this allows to override the default styles with the props if users want to\nexport const StyledTypography = styled('div', {\n  name: DSTypographyName,\n  slot: TYPOGRAPHY_SLOTS.TYPOGRAPHY_ELEMENT,\n}).withConfig({\n  shouldForwardProp: (prop, defaultValidatorFn) =>\n    !['fontSize', 'color', 'as', 'variant'].includes(String(prop)) && defaultValidatorFn(prop),\n})<DSTypographyT.StyledPropsInterface>`\n  margin: 0;\n  padding: 0;\n  ${(props: DSTypographyT.StyledPropsInterface) => VARIANTS_CSS_MAP[props.variant]}\n  ${xStyledCommonProps}\n  ${(props) => {\n    // support for color shorthands that are not available in the theme\n    if (!props.color || !isSpecificShorthand(props.color)) return css``;\n\n    return shortHandsColorMap[props.color];\n  }}\n\n  ${(props: DSTypographyT.StyledPropsInterface) => (props.$truncateWithEllipsis ? noWrapStyle : wrapStyle)}\n\n  ${(props: DSTypographyT.StyledPropsInterface) =>\n    props.$truncateWithReadMore ? truncateWithReadMoreStyle(props.$truncateWithReadMore) : ''}\n`;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,QAAQ,KAAK,0BAA0B;AAEhD,SAAS,kBAAkB,wBAAwB;AACnD,SAAS,wBAAwB;AAEjC,MAAM,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQpB,MAAM,YAAY;AAAA;AAAA;AAAA;AAKlB,MAAM,4BAA4B,CAChC,iBACG;AAAA;AAAA,wBAEmB,aAAa,WAAW,UAAU,aAAa,KAAK;AAAA;AAAA;AAAA;AAAA;AAO5E,MAAM,qBAAqB;AAAA,EACzB,SAAS;AAAA,aACE,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA,EAEnD,OAAO;AAAA,aACI,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA,EAEjD,WAAW;AAAA;AAAA;AAAA,EAGX,UAAU;AAAA;AAAA;AAGZ;AACA,MAAM,qBAAqB,CAAC,WAAW,SAAS,aAAa,UAAU;AACvE,MAAM,sBAAsB,CAAC,UAC3B,mBAAmB,SAAS,KAAK;AAI5B,MAAM,mBAAmB,OAAO,OAAO;AAAA,EAC5C,MAAM;AAAA,EACN,MAAM,iBAAiB;AACzB,CAAC,EAAE,WAAW;AAAA,EACZ,mBAAmB,CAAC,MAAM,uBACxB,CAAC,CAAC,YAAY,SAAS,MAAM,SAAS,EAAE,SAAS,OAAO,IAAI,CAAC,KAAK,mBAAmB,IAAI;AAC7F,CAAC;AAAA;AAAA;AAAA,IAGG,CAAC,UAA8C,iBAAiB,MAAM,OAAO,CAAC;AAAA,IAC9E,kBAAkB;AAAA,IAClB,CAAC,UAAU;AAEX,MAAI,CAAC,MAAM,SAAS,CAAC,oBAAoB,MAAM,KAAK,EAAG,QAAO;AAE9D,SAAO,mBAAmB,MAAM,KAAK;AACvC,CAAC;AAAA;AAAA,IAEC,CAAC,UAA+C,MAAM,wBAAwB,cAAc,SAAU;AAAA;AAAA,IAEtG,CAAC,UACD,MAAM,wBAAwB,0BAA0B,MAAM,qBAAqB,IAAI,EAAE;AAAA;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { styled, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport type { DSTypographyT } from '../react-desc-prop-types.js';\nimport { DSTypographyName, TYPOGRAPHY_SLOTS } from '../constants/index.js';\nimport { typographyFontFamily } from './typographyFontFamily.js';\nimport { VARIANTS_CSS_MAP } from './variants/index.js';\n\n// Re-exported for backwards compatibility \u2014 the definition now lives in its own\n// module to avoid a circular dependency with the variant files.\nexport { typographyFontFamily };\n\nconst noWrapStyle = css`\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n  display: inline-block;\n  max-width: 100%;\n`;\n\nconst wrapStyle = css`\n  overflow-wrap: break-word;\n  white-space: pre-wrap;\n`;\n\nconst truncateWithReadMoreStyle = (\n  readMoreMeta: Required<DSTypographyT.StyledPropsInterface>['$truncateWithReadMore'],\n) => css`\n  display: -webkit-box;\n  -webkit-line-clamp: ${readMoreMeta.expanded ? 'unset' : readMoreMeta.lines};\n  -webkit-box-orient: vertical;\n  hyphens: auto;\n  word-break: break-all;\n`;\n\n// support for `color` shorthands that are not available in the theme and are specific to the typography component\nconst shortHandsColorMap = {\n  neutral: css`\n    color: ${({ theme }) => theme.colors.neutral[600]};\n  `,\n  brand: css`\n    color: ${({ theme }) => theme.colors.brand[800]};\n  `,\n  important: css`\n    color: #853c12;\n  `,\n  critical: css`\n    color: #c70916;\n  `,\n};\nconst specificShorthands = ['neutral', 'brand', 'important', 'critical'];\nconst isSpecificShorthand = (color: string): color is keyof typeof shortHandsColorMap =>\n  specificShorthands.includes(color);\n\n// xStyledCommonProps need to be always AFTER the VARIANTS_CSS_MAP\n//  this allows to override the default styles with the props if users want to\nexport const StyledTypography = styled('div', {\n  name: DSTypographyName,\n  slot: TYPOGRAPHY_SLOTS.TYPOGRAPHY_ELEMENT,\n}).withConfig({\n  shouldForwardProp: (prop, defaultValidatorFn) =>\n    !['fontSize', 'color', 'as', 'variant'].includes(String(prop)) && defaultValidatorFn(prop),\n})<DSTypographyT.StyledPropsInterface>`\n  margin: 0;\n  padding: 0;\n  ${typographyFontFamily}\n  ${(props: DSTypographyT.StyledPropsInterface) => VARIANTS_CSS_MAP[props.variant]}\n  ${xStyledCommonProps}\n  ${(props) => {\n    // support for color shorthands that are not available in the theme\n    if (!props.color || !isSpecificShorthand(props.color)) return css``;\n\n    return shortHandsColorMap[props.color];\n  }}\n\n  ${(props: DSTypographyT.StyledPropsInterface) => (props.$truncateWithEllipsis ? noWrapStyle : wrapStyle)}\n\n  ${(props: DSTypographyT.StyledPropsInterface) =>\n    props.$truncateWithReadMore ? truncateWithReadMoreStyle(props.$truncateWithReadMore) : ''}\n`;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,QAAQ,KAAK,0BAA0B;AAEhD,SAAS,kBAAkB,wBAAwB;AACnD,SAAS,4BAA4B;AACrC,SAAS,wBAAwB;AAMjC,MAAM,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQpB,MAAM,YAAY;AAAA;AAAA;AAAA;AAKlB,MAAM,4BAA4B,CAChC,iBACG;AAAA;AAAA,wBAEmB,aAAa,WAAW,UAAU,aAAa,KAAK;AAAA;AAAA;AAAA;AAAA;AAO5E,MAAM,qBAAqB;AAAA,EACzB,SAAS;AAAA,aACE,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA,EAEnD,OAAO;AAAA,aACI,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA,EAEjD,WAAW;AAAA;AAAA;AAAA,EAGX,UAAU;AAAA;AAAA;AAGZ;AACA,MAAM,qBAAqB,CAAC,WAAW,SAAS,aAAa,UAAU;AACvE,MAAM,sBAAsB,CAAC,UAC3B,mBAAmB,SAAS,KAAK;AAI5B,MAAM,mBAAmB,OAAO,OAAO;AAAA,EAC5C,MAAM;AAAA,EACN,MAAM,iBAAiB;AACzB,CAAC,EAAE,WAAW;AAAA,EACZ,mBAAmB,CAAC,MAAM,uBACxB,CAAC,CAAC,YAAY,SAAS,MAAM,SAAS,EAAE,SAAS,OAAO,IAAI,CAAC,KAAK,mBAAmB,IAAI;AAC7F,CAAC;AAAA;AAAA;AAAA,IAGG,oBAAoB;AAAA,IACpB,CAAC,UAA8C,iBAAiB,MAAM,OAAO,CAAC;AAAA,IAC9E,kBAAkB;AAAA,IAClB,CAAC,UAAU;AAEX,MAAI,CAAC,MAAM,SAAS,CAAC,oBAAoB,MAAM,KAAK,EAAG,QAAO;AAE9D,SAAO,mBAAmB,MAAM,KAAK;AACvC,CAAC;AAAA;AAAA,IAEC,CAAC,UAA+C,MAAM,wBAAwB,cAAc,SAAU;AAAA;AAAA,IAEtG,CAAC,UACD,MAAM,wBAAwB,0BAA0B,MAAM,qBAAqB,IAAI,EAAE;AAAA;",
   "names": []
 }

package/dist/esm/parts/typographyFontFamily.js

@@ -0,0 +1,9 @@
+import * as React from "react";
+import { css } from "@elliemae/ds-system";
+const typographyFontFamily = css`
+  font-family: ${({ theme }) => theme?.fonts?.default ?? "proxima-nova, Arial, sans-serif"};
+`;
+export {
+  typographyFontFamily
+};
+//# sourceMappingURL=typographyFontFamily.js.map

package/dist/esm/parts/typographyFontFamily.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/typographyFontFamily.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { css } from '@elliemae/ds-system';\n\n// Standalone module (no variant imports) so it can be shared by both styled.ts and\n// every variant file without creating a circular dependency between them.\n//\n// font-family is read from the theme so consumer themes can override the typeface.\n// Falls back to the historical default when a theme doesn't define fonts.default,\n// keeping existing behavior unchanged.\nexport const typographyFontFamily = css`\n  font-family: ${({ theme }) => theme?.fonts?.default ?? 'proxima-nova, Arial, sans-serif'};\n`;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,WAAW;AAQb,MAAM,uBAAuB;AAAA,iBACnB,CAAC,EAAE,MAAM,MAAM,OAAO,OAAO,WAAW,iCAAiC;AAAA;",
+  "names": []
+}