@elliemae/ds-typography 3.70.0-next.37 → 3.70.0-next.38

package/dist/cjs/index.js

@@ -33,10 +33,12 @@ __export(index_exports, {
   DSTypographyWithSchema: () => import_Typography.DSTypographyWithSchema,
   TYPOGRAPHY_DATA_TESTID: () => import_constants.TYPOGRAPHY_DATA_TESTID,
   TYPOGRAPHY_SLOTS: () => import_constants.TYPOGRAPHY_SLOTS,
-  TYPOGRAPHY_VARIANTS: () => import_constants.TYPOGRAPHY_VARIANTS
+  TYPOGRAPHY_VARIANTS: () => import_constants.TYPOGRAPHY_VARIANTS,
+  VARIANTS_CSS_BODY: () => import_body.VARIANTS_CSS_BODY
 });
 module.exports = __toCommonJS(index_exports);
 var React = __toESM(require("react"));
 var import_Typography = require("./Typography.js");
 var import_constants = require("./constants/index.js");
+var import_body = require("./parts/variants/body.js");
 //# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/index.ts", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIvB,wBAAqD;AACrD,uBAAgG;",
+  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIvB,wBAAqD;AACrD,uBAAgG;AAIhG,kBAAkC;",
   "names": []
 }

package/dist/cjs/parts/styled.js

@@ -28,12 +28,14 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var styled_exports = {};
 __export(styled_exports, {
-  StyledTypography: () => StyledTypography
+  StyledTypography: () => StyledTypography,
+  typographyFontFamily: () => import_typographyFontFamily.typographyFontFamily
 });
 module.exports = __toCommonJS(styled_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");
 var import_variants = require("./variants/index.js");
 const noWrapStyle = import_ds_system.css`
   text-overflow: ellipsis;
@@ -77,11 +79,7 @@ const StyledTypography = (0, import_ds_system.styled)("div", {
 })`
   margin: 0;
   padding: 0;
-  // font-family is read from the theme so consumer themes can override the typeface.
-  // Falls back to the historical default when a theme doesn't define fonts.default,
-  // keeping existing behavior unchanged. Placed before VARIANTS_CSS_MAP and
-  // xStyledCommonProps so variants and user props can still override it.
-  font-family: ${({ theme }) => theme?.fonts?.default ?? "proxima-nova, Arial, sans-serif"};
+  ${import_typographyFontFamily.typographyFontFamily}
   ${(props) => import_variants.VARIANTS_CSS_MAP[props.variant]}
   ${import_ds_system.xStyledCommonProps}
   ${(props) => {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/parts/styled.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* 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  // 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. Placed before VARIANTS_CSS_MAP and\n  // xStyledCommonProps so variants and user props can still override it.\n  font-family: ${({ theme }) => theme?.fonts?.default ?? 'proxima-nova, Arial, sans-serif'};\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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,uBAAgD;AAEhD,uBAAmD;AACnD,sBAAiC;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,uBAAmB,yBAAO,OAAO;AAAA,EAC5C,MAAM;AAAA,EACN,MAAM,kCAAiB;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;AAAA;AAAA;AAAA;AAAA,iBAOgB,CAAC,EAAE,MAAM,MAAM,OAAO,OAAO,WAAW,iCAAiC;AAAA,IACtF,CAAC,UAA8C,iCAAiB,MAAM,OAAO,CAAC;AAAA,IAC9E,mCAAkB;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": ["/* 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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,uBAAgD;AAEhD,uBAAmD;AACnD,kCAAqC;AACrC,sBAAiC;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,uBAAmB,yBAAO,OAAO;AAAA,EAC5C,MAAM;AAAA,EACN,MAAM,kCAAiB;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,gDAAoB;AAAA,IACpB,CAAC,UAA8C,iCAAiB,MAAM,OAAO,CAAC;AAAA,IAC9E,mCAAkB;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/cjs/parts/typographyFontFamily.js

@@ -0,0 +1,39 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var typographyFontFamily_exports = {};
+__export(typographyFontFamily_exports, {
+  typographyFontFamily: () => typographyFontFamily
+});
+module.exports = __toCommonJS(typographyFontFamily_exports);
+var React = __toESM(require("react"));
+var import_ds_system = require("@elliemae/ds-system");
+const typographyFontFamily = import_ds_system.css`
+  font-family: ${({ theme }) => theme?.fonts?.default ?? "proxima-nova, Arial, sans-serif"};
+`;
+//# sourceMappingURL=typographyFontFamily.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/parts/typographyFontFamily.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAoB;AAQb,MAAM,uBAAuB;AAAA,iBACnB,CAAC,EAAE,MAAM,MAAM,OAAO,OAAO,WAAW,iCAAiC;AAAA;",
+  "names": []
+}

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

@@ -33,11 +33,13 @@ __export(body_article_exports, {
 module.exports = __toCommonJS(body_article_exports);
 var React = __toESM(require("react"));
 var import_ds_system = require("@elliemae/ds-system");
+var import_typographyFontFamily = require("../typographyFontFamily.js");
 var import_constants = require("../../constants/index.js");
 const typedCss = () => import_ds_system.css``;
 const VARIANTS_CSS_BODY_ARTICLE = {
   // font-size: 16px/RT | line-height: 20px/RT
   [import_constants.TYPOGRAPHY_VARIANTS.B1_ARTICLE]: import_ds_system.css`
+    ${import_typographyFontFamily.typographyFontFamily}
     font-size: ${(props) => props.fontSize ?? "1rem"}; // 16px -> 16/16 = 1rem
     line-height: ${(props) => props.lineHeight ?? "1.25rem"}; // 20px -> 20/16 = 1.25rem
     @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
@@ -52,6 +54,7 @@ const VARIANTS_CSS_BODY_ARTICLE = {
   `,
   // font-size: 14px/RT | line-height: 18px/RT
   [import_constants.TYPOGRAPHY_VARIANTS.B2_ARTICLE]: import_ds_system.css`
+    ${import_typographyFontFamily.typographyFontFamily}
     font-size: ${(props) => props.fontSize ?? "0.875rem"}; // 14px -> 14/16 = 0.875rem
     line-height: ${(props) => props.lineHeight ?? "1.125rem"}; // 18px -> 18/16 = 1.125rem
     @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
@@ -66,6 +69,7 @@ const VARIANTS_CSS_BODY_ARTICLE = {
   `,
   // font-size: 13px/RT | line-height: 17px/RT
   [import_constants.TYPOGRAPHY_VARIANTS.B3_ARTICLE]: import_ds_system.css`
+    ${import_typographyFontFamily.typographyFontFamily}
     font-size: ${(props) => props.fontSize ?? "0.8125rem"}; // 13px -> 13/16 = 0.8125rem
     line-height: ${(props) => props.lineHeight ?? "1.0625rem"}; // 17px -> 17/16 = 1.0625rem
     @media (min-width: ${({ theme }) => theme.breakpoints.small}) {

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

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

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

@@ -34,9 +34,11 @@ module.exports = __toCommonJS(body_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_BODY = {
   [import_constants.TYPOGRAPHY_VARIANTS.B1]: import_ds_system.css`
+    ${import_typographyFontFamily.typographyFontFamily}
     font-size: ${(props) => props.fontSize ?? "0.8775000000000001rem"};
     line-height: ${(props) => props.lineHeight ?? "1.1212499999999999rem"};
     @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
@@ -46,6 +48,7 @@ const VARIANTS_CSS_BODY = {
     font-weight: 400;
   `,
   [import_constants.TYPOGRAPHY_VARIANTS.B2]: import_ds_system.css`
+    ${import_typographyFontFamily.typographyFontFamily}
     font-size: ${(props) => props.fontSize ?? "0.8125rem"};
     line-height: ${(props) => props.lineHeight ?? "1rem"};
     @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
@@ -55,6 +58,7 @@ const VARIANTS_CSS_BODY = {
     font-weight: 400;
   `,
   [import_constants.TYPOGRAPHY_VARIANTS.B3]: import_ds_system.css`
+    ${import_typographyFontFamily.typographyFontFamily}
     font-size: ${(props) => props.fontSize ?? "0.7475rem"};
     line-height: ${(props) => props.lineHeight ?? "0.999375rem"};
     @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
@@ -64,6 +68,7 @@ const VARIANTS_CSS_BODY = {
     font-weight: 400;
   `,
   [import_constants.TYPOGRAPHY_VARIANTS.B4]: import_ds_system.css`
+    ${import_typographyFontFamily.typographyFontFamily}
     font-size: ${(props) => props.fontSize ?? "0.6906249999999999rem"};
     line-height: ${(props) => props.lineHeight ?? "0.8125rem"};
     @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
@@ -73,6 +78,7 @@ const VARIANTS_CSS_BODY = {
     font-weight: 400;
   `,
   [import_constants.TYPOGRAPHY_VARIANTS.B1_LIGHT]: import_ds_system.css`
+    ${import_typographyFontFamily.typographyFontFamily}
     font-size: ${(props) => props.fontSize ?? "0.8775000000000001rem"};
     line-height: ${(props) => props.lineHeight ?? "1.1212499999999999rem"};
     color: ${(props) => props.theme.colors.neutral[600]};
@@ -83,6 +89,7 @@ const VARIANTS_CSS_BODY = {
     font-weight: 400;
   `,
   [import_constants.TYPOGRAPHY_VARIANTS.B2_LIGHT]: import_ds_system.css`
+    ${import_typographyFontFamily.typographyFontFamily}
     font-size: ${(props) => props.fontSize ?? "0.8125rem"};
     line-height: ${(props) => props.lineHeight ?? "1rem"};
     color: ${(props) => props.theme.colors.neutral[600]};
@@ -93,6 +100,7 @@ const VARIANTS_CSS_BODY = {
     font-weight: 400;
   `,
   [import_constants.TYPOGRAPHY_VARIANTS.B3_LIGHT]: import_ds_system.css`
+    ${import_typographyFontFamily.typographyFontFamily}
     font-size: ${(props) => props.fontSize ?? "0.7475rem"};
     line-height: ${(props) => props.lineHeight ?? "0.999375rem"};
     color: ${(props) => props.theme.colors.neutral[600]};
@@ -103,6 +111,7 @@ const VARIANTS_CSS_BODY = {
     font-weight: 400;
   `,
   [import_constants.TYPOGRAPHY_VARIANTS.B3_STRONG]: import_ds_system.css`
+    ${import_typographyFontFamily.typographyFontFamily}
     font-size: ${(props) => props.fontSize ?? "0.7475rem"};
     line-height: ${(props) => props.lineHeight ?? "0.999375rem"};
     color: ${(props) => props.theme.colors.neutral[700]};

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/variants/body.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 BodyCSSMap = {\n  [key in DSTypographyT.BodyVariants]: ReturnType<typeof typedCss>;\n};\n\n// as of 14/november/2023\n// mobile -> font-size: 16px\n// desktop -> font-size: 13px\n// the \"magic values\" of the rem units are the result of the following formula:\n// (variant's requirement px/RT value / 16px) for mobile\n// (variant's requirement px/RT value / 13px) for desktop\nexport const VARIANTS_CSS_BODY: BodyCSSMap = {\n  [TYPOGRAPHY_VARIANTS.B1]: css<DSTypographyT.StyledPropsInterface>`\n    font-size: ${(props) => props.fontSize ?? '0.8775000000000001rem'};\n    line-height: ${(props) => props.lineHeight ?? '1.1212499999999999rem'};\n    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${(props) => props.fontSize ?? '1.08rem'};\n      line-height: ${(props) => props.lineHeight ?? '1.38rem'};\n    }\n    font-weight: 400;\n  `,\n  [TYPOGRAPHY_VARIANTS.B2]: css<DSTypographyT.StyledPropsInterface>`\n    font-size: ${(props) => props.fontSize ?? '0.8125rem'};\n    line-height: ${(props) => props.lineHeight ?? '1rem'};\n    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${(props) => props.fontSize ?? '1rem'};\n      line-height: ${(props) => props.lineHeight ?? '1.2307692308rem'};\n    }\n    font-weight: 400;\n  `,\n  [TYPOGRAPHY_VARIANTS.B3]: css<DSTypographyT.StyledPropsInterface>`\n    font-size: ${(props) => props.fontSize ?? '0.7475rem'};\n    line-height: ${(props) => props.lineHeight ?? '0.999375rem'};\n    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${(props) => props.fontSize ?? '0.92rem'};\n      line-height: ${(props) => props.lineHeight ?? '1.23rem'};\n    }\n    font-weight: 400;\n  `,\n  [TYPOGRAPHY_VARIANTS.B4]: css<DSTypographyT.StyledPropsInterface>`\n    font-size: ${(props) => props.fontSize ?? '0.6906249999999999rem'};\n    line-height: ${(props) => props.lineHeight ?? '0.8125rem'};\n    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${(props) => props.fontSize ?? '0.85rem'};\n      line-height: ${(props) => props.lineHeight ?? '1rem'};\n    }\n    font-weight: 400;\n  `,\n  [TYPOGRAPHY_VARIANTS.B1_LIGHT]: css<DSTypographyT.StyledPropsInterface>`\n    font-size: ${(props) => props.fontSize ?? '0.8775000000000001rem'};\n    line-height: ${(props) => props.lineHeight ?? '1.1212499999999999rem'};\n    color: ${(props) => props.theme.colors.neutral[600]};\n    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${(props) => props.fontSize ?? '1.08rem'};\n      line-height: ${(props) => props.lineHeight ?? '1.38rem'};\n    }\n    font-weight: 400;\n  `,\n  [TYPOGRAPHY_VARIANTS.B2_LIGHT]: css<DSTypographyT.StyledPropsInterface>`\n    font-size: ${(props) => props.fontSize ?? '0.8125rem'};\n    line-height: ${(props) => props.lineHeight ?? '1rem'};\n    color: ${(props) => props.theme.colors.neutral[600]};\n    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${(props) => props.fontSize ?? '1rem'};\n      line-height: ${(props) => props.lineHeight ?? '1.2307692308rem'};\n    }\n    font-weight: 400;\n  `,\n  [TYPOGRAPHY_VARIANTS.B3_LIGHT]: css<DSTypographyT.StyledPropsInterface>`\n    font-size: ${(props) => props.fontSize ?? '0.7475rem'};\n    line-height: ${(props) => props.lineHeight ?? '0.999375rem'};\n    color: ${(props) => props.theme.colors.neutral[600]};\n    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${(props) => props.fontSize ?? '0.92rem'};\n      line-height: ${(props) => props.lineHeight ?? '1.23rem'};\n    }\n    font-weight: 400;\n  `,\n  [TYPOGRAPHY_VARIANTS.B3_STRONG]: css<DSTypographyT.StyledPropsInterface>`\n    font-size: ${(props) => props.fontSize ?? '0.7475rem'};\n    line-height: ${(props) => props.lineHeight ?? '0.999375rem'};\n    color: ${(props) => props.theme.colors.neutral[700]};\n    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${(props) => props.fontSize ?? '0.92rem'};\n      line-height: ${(props) => props.lineHeight ?? '1.23rem'};\n    }\n    font-weight: 600;\n  `,\n};\n", "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 BodyCSSMap = {\n  [key in DSTypographyT.BodyVariants]: ReturnType<typeof typedCss>;\n};\n\n// as of 14/november/2023\n// mobile -> font-size: 16px\n// desktop -> font-size: 13px\n// the \"magic values\" of the rem units are the result of the following formula:\n// (variant's requirement px/RT value / 16px) for mobile\n// (variant's requirement px/RT value / 13px) for desktop\nexport const VARIANTS_CSS_BODY: BodyCSSMap = {\n  [TYPOGRAPHY_VARIANTS.B1]: css<DSTypographyT.StyledPropsInterface>`\n    ${typographyFontFamily}\n    font-size: ${(props) => props.fontSize ?? '0.8775000000000001rem'};\n    line-height: ${(props) => props.lineHeight ?? '1.1212499999999999rem'};\n    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${(props) => props.fontSize ?? '1.08rem'};\n      line-height: ${(props) => props.lineHeight ?? '1.38rem'};\n    }\n    font-weight: 400;\n  `,\n  [TYPOGRAPHY_VARIANTS.B2]: css<DSTypographyT.StyledPropsInterface>`\n    ${typographyFontFamily}\n    font-size: ${(props) => props.fontSize ?? '0.8125rem'};\n    line-height: ${(props) => props.lineHeight ?? '1rem'};\n    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${(props) => props.fontSize ?? '1rem'};\n      line-height: ${(props) => props.lineHeight ?? '1.2307692308rem'};\n    }\n    font-weight: 400;\n  `,\n  [TYPOGRAPHY_VARIANTS.B3]: css<DSTypographyT.StyledPropsInterface>`\n    ${typographyFontFamily}\n    font-size: ${(props) => props.fontSize ?? '0.7475rem'};\n    line-height: ${(props) => props.lineHeight ?? '0.999375rem'};\n    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${(props) => props.fontSize ?? '0.92rem'};\n      line-height: ${(props) => props.lineHeight ?? '1.23rem'};\n    }\n    font-weight: 400;\n  `,\n  [TYPOGRAPHY_VARIANTS.B4]: css<DSTypographyT.StyledPropsInterface>`\n    ${typographyFontFamily}\n    font-size: ${(props) => props.fontSize ?? '0.6906249999999999rem'};\n    line-height: ${(props) => props.lineHeight ?? '0.8125rem'};\n    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${(props) => props.fontSize ?? '0.85rem'};\n      line-height: ${(props) => props.lineHeight ?? '1rem'};\n    }\n    font-weight: 400;\n  `,\n  [TYPOGRAPHY_VARIANTS.B1_LIGHT]: css<DSTypographyT.StyledPropsInterface>`\n    ${typographyFontFamily}\n    font-size: ${(props) => props.fontSize ?? '0.8775000000000001rem'};\n    line-height: ${(props) => props.lineHeight ?? '1.1212499999999999rem'};\n    color: ${(props) => props.theme.colors.neutral[600]};\n    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${(props) => props.fontSize ?? '1.08rem'};\n      line-height: ${(props) => props.lineHeight ?? '1.38rem'};\n    }\n    font-weight: 400;\n  `,\n  [TYPOGRAPHY_VARIANTS.B2_LIGHT]: css<DSTypographyT.StyledPropsInterface>`\n    ${typographyFontFamily}\n    font-size: ${(props) => props.fontSize ?? '0.8125rem'};\n    line-height: ${(props) => props.lineHeight ?? '1rem'};\n    color: ${(props) => props.theme.colors.neutral[600]};\n    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${(props) => props.fontSize ?? '1rem'};\n      line-height: ${(props) => props.lineHeight ?? '1.2307692308rem'};\n    }\n    font-weight: 400;\n  `,\n  [TYPOGRAPHY_VARIANTS.B3_LIGHT]: css<DSTypographyT.StyledPropsInterface>`\n    ${typographyFontFamily}\n    font-size: ${(props) => props.fontSize ?? '0.7475rem'};\n    line-height: ${(props) => props.lineHeight ?? '0.999375rem'};\n    color: ${(props) => props.theme.colors.neutral[600]};\n    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${(props) => props.fontSize ?? '0.92rem'};\n      line-height: ${(props) => props.lineHeight ?? '1.23rem'};\n    }\n    font-weight: 400;\n  `,\n  [TYPOGRAPHY_VARIANTS.B3_STRONG]: css<DSTypographyT.StyledPropsInterface>`\n    ${typographyFontFamily}\n    font-size: ${(props) => props.fontSize ?? '0.7475rem'};\n    line-height: ${(props) => props.lineHeight ?? '0.999375rem'};\n    color: ${(props) => props.theme.colors.neutral[700]};\n    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${(props) => props.fontSize ?? '0.92rem'};\n      line-height: ${(props) => props.lineHeight ?? '1.23rem'};\n    }\n    font-weight: 600;\n  `,\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -34,9 +34,11 @@ module.exports = __toCommonJS(button_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_BUTTON = {
   [import_constants.TYPOGRAPHY_VARIANTS.BUTTON]: 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}) {
@@ -61,6 +63,7 @@ const VARIANTS_BUTTON = {
     }
   `,
   [import_constants.TYPOGRAPHY_VARIANTS.BUTTON_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}) {
@@ -85,6 +88,7 @@ const VARIANTS_BUTTON = {
     }
   `,
   [import_constants.TYPOGRAPHY_VARIANTS.BUTTON_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}) {
@@ -109,6 +113,7 @@ const VARIANTS_BUTTON = {
     }
   `,
   [import_constants.TYPOGRAPHY_VARIANTS.BUTTON_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/button.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/variants/button.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 ButtonCSSMap = {\n  [key in DSTypographyT.ButtonVariants]: ReturnType<typeof typedCss>;\n};\n\n// as of 14/november/2023\n// mobile -> font-size: 16px\n// desktop -> font-size: 13px\n// the \"magic values\" of the rem units are the result of the following formula:\n// (variant's requirement px/RT value / 16px) for mobile\n// (variant's requirement px/RT value / 13px) for desktop\nexport const VARIANTS_BUTTON: ButtonCSSMap = {\n  [TYPOGRAPHY_VARIANTS.BUTTON]: css<DSTypographyT.StyledPropsInterface>`\n    font-size: ${(props) => props.fontSize ?? '0.8125rem'};\n    line-height: ${(props) => props.lineHeight ?? '1.503125rem'};\n    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${(props) => props.fontSize ?? '1rem'};\n      line-height: ${(props) => props.lineHeight ?? '1.85rem'};\n    }\n    text-decoration: underline;\n    color: ${(props) => props.theme.colors.brand[600]};\n    background: none;\n    border: none;\n    display: inline-block;\n    text-align: left;\n    cursor: pointer;\n    &:hover {\n      color: ${(props) => props.theme.colors.brand[700]};\n    }\n    &:active {\n      color: ${(props) => props.theme.colors.brand[800]};\n    }\n    &:focus {\n      color: ${(props) => props.theme.colors.brand[700]};\n    }\n  `,\n  [TYPOGRAPHY_VARIANTS.BUTTON_SML_TITLE]: css<DSTypographyT.StyledPropsInterface>`\n    font-size: ${(props) => props.fontSize ?? '0.875rem'};\n    line-height: ${(props) => props.lineHeight ?? '1.503125rem'};\n    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${(props) => props.fontSize ?? '1.077rem'};\n      line-height: ${(props) => props.lineHeight ?? '1.85rem'};\n    }\n    text-decoration: underline;\n    color: ${(props) => props.theme.colors.brand[600]};\n    background: none;\n    border: none;\n    display: inline-block;\n    text-align: left;\n    cursor: pointer;\n    &:hover {\n      color: ${(props) => props.theme.colors.brand[700]};\n    }\n    &:active {\n      color: ${(props) => props.theme.colors.brand[800]};\n    }\n    &:focus {\n      color: ${(props) => props.theme.colors.brand[700]};\n    }\n  `,\n  [TYPOGRAPHY_VARIANTS.BUTTON_MED_TITLE]: css<DSTypographyT.StyledPropsInterface>`\n    font-size: ${(props) => props.fontSize ?? '1rem'};\n    line-height: ${(props) => props.lineHeight ?? '1.503125rem'};\n    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${(props) => props.fontSize ?? '1.231rem'};\n      line-height: ${(props) => props.lineHeight ?? '1.85rem'};\n    }\n    text-decoration: underline;\n    color: ${(props) => props.theme.colors.brand[600]};\n    background: none;\n    border: none;\n    display: inline-block;\n    text-align: left;\n    cursor: pointer;\n    &:hover {\n      color: ${(props) => props.theme.colors.brand[700]};\n    }\n    &:active {\n      color: ${(props) => props.theme.colors.brand[800]};\n    }\n    &:focus {\n      color: ${(props) => props.theme.colors.brand[700]};\n    }\n  `,\n  [TYPOGRAPHY_VARIANTS.BUTTON_LRG_TITLE]: css<DSTypographyT.StyledPropsInterface>`\n    font-size: ${(props) => props.fontSize ?? '1.125rem'};\n    line-height: ${(props) => props.lineHeight ?? '1.503125rem'};\n    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${(props) => props.fontSize ?? '1.385rem'};\n      line-height: ${(props) => props.lineHeight ?? '1.85rem'};\n    }\n    text-decoration: underline;\n    color: ${(props) => props.theme.colors.brand[600]};\n    background: none;\n    border: none;\n    display: inline-block;\n    text-align: left;\n    cursor: pointer;\n    &:hover {\n      color: ${(props) => props.theme.colors.brand[700]};\n    }\n    &:active {\n      color: ${(props) => props.theme.colors.brand[800]};\n    }\n    &:focus {\n      color: ${(props) => props.theme.colors.brand[700]};\n    }\n  `,\n};\n", "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 ButtonCSSMap = {\n  [key in DSTypographyT.ButtonVariants]: ReturnType<typeof typedCss>;\n};\n\n// as of 14/november/2023\n// mobile -> font-size: 16px\n// desktop -> font-size: 13px\n// the \"magic values\" of the rem units are the result of the following formula:\n// (variant's requirement px/RT value / 16px) for mobile\n// (variant's requirement px/RT value / 13px) for desktop\nexport const VARIANTS_BUTTON: ButtonCSSMap = {\n  [TYPOGRAPHY_VARIANTS.BUTTON]: css<DSTypographyT.StyledPropsInterface>`\n    ${typographyFontFamily}\n    font-size: ${(props) => props.fontSize ?? '0.8125rem'};\n    line-height: ${(props) => props.lineHeight ?? '1.503125rem'};\n    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${(props) => props.fontSize ?? '1rem'};\n      line-height: ${(props) => props.lineHeight ?? '1.85rem'};\n    }\n    text-decoration: underline;\n    color: ${(props) => props.theme.colors.brand[600]};\n    background: none;\n    border: none;\n    display: inline-block;\n    text-align: left;\n    cursor: pointer;\n    &:hover {\n      color: ${(props) => props.theme.colors.brand[700]};\n    }\n    &:active {\n      color: ${(props) => props.theme.colors.brand[800]};\n    }\n    &:focus {\n      color: ${(props) => props.theme.colors.brand[700]};\n    }\n  `,\n  [TYPOGRAPHY_VARIANTS.BUTTON_SML_TITLE]: css<DSTypographyT.StyledPropsInterface>`\n    ${typographyFontFamily}\n    font-size: ${(props) => props.fontSize ?? '0.875rem'};\n    line-height: ${(props) => props.lineHeight ?? '1.503125rem'};\n    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${(props) => props.fontSize ?? '1.077rem'};\n      line-height: ${(props) => props.lineHeight ?? '1.85rem'};\n    }\n    text-decoration: underline;\n    color: ${(props) => props.theme.colors.brand[600]};\n    background: none;\n    border: none;\n    display: inline-block;\n    text-align: left;\n    cursor: pointer;\n    &:hover {\n      color: ${(props) => props.theme.colors.brand[700]};\n    }\n    &:active {\n      color: ${(props) => props.theme.colors.brand[800]};\n    }\n    &:focus {\n      color: ${(props) => props.theme.colors.brand[700]};\n    }\n  `,\n  [TYPOGRAPHY_VARIANTS.BUTTON_MED_TITLE]: css<DSTypographyT.StyledPropsInterface>`\n    ${typographyFontFamily}\n    font-size: ${(props) => props.fontSize ?? '1rem'};\n    line-height: ${(props) => props.lineHeight ?? '1.503125rem'};\n    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${(props) => props.fontSize ?? '1.231rem'};\n      line-height: ${(props) => props.lineHeight ?? '1.85rem'};\n    }\n    text-decoration: underline;\n    color: ${(props) => props.theme.colors.brand[600]};\n    background: none;\n    border: none;\n    display: inline-block;\n    text-align: left;\n    cursor: pointer;\n    &:hover {\n      color: ${(props) => props.theme.colors.brand[700]};\n    }\n    &:active {\n      color: ${(props) => props.theme.colors.brand[800]};\n    }\n    &:focus {\n      color: ${(props) => props.theme.colors.brand[700]};\n    }\n  `,\n  [TYPOGRAPHY_VARIANTS.BUTTON_LRG_TITLE]: css<DSTypographyT.StyledPropsInterface>`\n    ${typographyFontFamily}\n    font-size: ${(props) => props.fontSize ?? '1.125rem'};\n    line-height: ${(props) => props.lineHeight ?? '1.503125rem'};\n    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${(props) => props.fontSize ?? '1.385rem'};\n      line-height: ${(props) => props.lineHeight ?? '1.85rem'};\n    }\n    text-decoration: underline;\n    color: ${(props) => props.theme.colors.brand[600]};\n    background: none;\n    border: none;\n    display: inline-block;\n    text-align: left;\n    cursor: pointer;\n    &:hover {\n      color: ${(props) => props.theme.colors.brand[700]};\n    }\n    &:active {\n      color: ${(props) => props.theme.colors.brand[800]};\n    }\n    &:focus {\n      color: ${(props) => props.theme.colors.brand[700]};\n    }\n  `,\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -34,18 +34,23 @@ module.exports = __toCommonJS(feedback_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_FEEDBACK = {
   [import_constants.TYPOGRAPHY_VARIANTS.FEEDBACK_NEUTRAL]: import_ds_system.css`
+    ${import_typographyFontFamily.typographyFontFamily}
     color: ${(props) => props.theme.colors.neutral[600]};
   `,
   [import_constants.TYPOGRAPHY_VARIANTS.FEEDBACK_BRAND]: import_ds_system.css`
+    ${import_typographyFontFamily.typographyFontFamily}
     color: ${(props) => props.theme.colors.brand[800]};
   `,
   [import_constants.TYPOGRAPHY_VARIANTS.FEEDBACK_IMPORTANT]: import_ds_system.css`
+    ${import_typographyFontFamily.typographyFontFamily}
     color: ${(props) => props.theme.colors.warning[950]};
   `,
   [import_constants.TYPOGRAPHY_VARIANTS.FEEDBACK_CRITICAL]: import_ds_system.css`
+    ${import_typographyFontFamily.typographyFontFamily}
     color: ${(props) => props.theme.colors.danger[950]};
   `
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/variants/feedback.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 FeedbackCSSMap = {\n  [key in DSTypographyT.FeedbackVariants]: ReturnType<typeof typedCss>;\n};\n\nexport const VARIANTS_CSS_FEEDBACK: FeedbackCSSMap = {\n  [TYPOGRAPHY_VARIANTS.FEEDBACK_NEUTRAL]: css<DSTypographyT.StyledPropsInterface>`\n    color: ${(props) => props.theme.colors.neutral[600]};\n  `,\n  [TYPOGRAPHY_VARIANTS.FEEDBACK_BRAND]: css<DSTypographyT.StyledPropsInterface>`\n    color: ${(props) => props.theme.colors.brand[800]};\n  `,\n  [TYPOGRAPHY_VARIANTS.FEEDBACK_IMPORTANT]: css<DSTypographyT.StyledPropsInterface>`\n    color: ${(props) => props.theme.colors.warning[950]};\n  `,\n  [TYPOGRAPHY_VARIANTS.FEEDBACK_CRITICAL]: css<DSTypographyT.StyledPropsInterface>`\n    color: ${(props) => props.theme.colors.danger[950]};\n  `,\n};\n", "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,wBAAwC;AAAA,EACnD,CAAC,qCAAoB,gBAAgB,GAAG;AAAA,aAC7B,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA,EAErD,CAAC,qCAAoB,cAAc,GAAG;AAAA,aAC3B,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA,EAEnD,CAAC,qCAAoB,kBAAkB,GAAG;AAAA,aAC/B,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA,EAErD,CAAC,qCAAoB,iBAAiB,GAAG;AAAA,aAC9B,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 FeedbackCSSMap = {\n  [key in DSTypographyT.FeedbackVariants]: ReturnType<typeof typedCss>;\n};\n\nexport const VARIANTS_CSS_FEEDBACK: FeedbackCSSMap = {\n  [TYPOGRAPHY_VARIANTS.FEEDBACK_NEUTRAL]: css<DSTypographyT.StyledPropsInterface>`\n    ${typographyFontFamily}\n    color: ${(props) => props.theme.colors.neutral[600]};\n  `,\n  [TYPOGRAPHY_VARIANTS.FEEDBACK_BRAND]: css<DSTypographyT.StyledPropsInterface>`\n    ${typographyFontFamily}\n    color: ${(props) => props.theme.colors.brand[800]};\n  `,\n  [TYPOGRAPHY_VARIANTS.FEEDBACK_IMPORTANT]: css<DSTypographyT.StyledPropsInterface>`\n    ${typographyFontFamily}\n    color: ${(props) => props.theme.colors.warning[950]};\n  `,\n  [TYPOGRAPHY_VARIANTS.FEEDBACK_CRITICAL]: css<DSTypographyT.StyledPropsInterface>`\n    ${typographyFontFamily}\n    color: ${(props) => props.theme.colors.danger[950]};\n  `,\n};\n", "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,wBAAwC;AAAA,EACnD,CAAC,qCAAoB,gBAAgB,GAAG;AAAA,MACpC,gDAAoB;AAAA,aACb,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA,EAErD,CAAC,qCAAoB,cAAc,GAAG;AAAA,MAClC,gDAAoB;AAAA,aACb,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA,EAEnD,CAAC,qCAAoB,kBAAkB,GAAG;AAAA,MACtC,gDAAoB;AAAA,aACb,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA,EAErD,CAAC,qCAAoB,iBAAiB,GAAG;AAAA,MACrC,gDAAoB;AAAA,aACb,CAAC,UAAU,MAAM,MAAM,OAAO,OAAO,GAAG,CAAC;AAAA;AAEtD;",
   "names": []
 }

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

@@ -34,10 +34,12 @@ module.exports = __toCommonJS(header_article_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_ARTICLE = {
   // font-size: 34px/RT | line-height: 41px/RT
   [import_constants.TYPOGRAPHY_VARIANTS.H1_ARTICLE]: import_ds_system.css`
+    ${import_typographyFontFamily.typographyFontFamily}
     font-size: ${(props) => props.fontSize ?? "2.125rem"}; // 34px -> 34/16 = 2.125rem
     line-height: ${(props) => props.lineHeight ?? "2.5625rem"}; // 41px -> 41/16 = 2.5625rem
     @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
@@ -52,6 +54,7 @@ const VARIANTS_CSS_HEADER_ARTICLE = {
   `,
   // font-size: 24px/RT | line-height: 31px/RT
   [import_constants.TYPOGRAPHY_VARIANTS.H2_ARTICLE]: import_ds_system.css`
+    ${import_typographyFontFamily.typographyFontFamily}
     font-size: ${(props) => props.fontSize ?? "1.5rem"}; // 24px -> 24/16 = 1.5rem
     line-height: ${(props) => props.lineHeight ?? "1.9375rem"}; // 31px -> 31/16 = 1.9375rem
     @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
@@ -66,6 +69,7 @@ const VARIANTS_CSS_HEADER_ARTICLE = {
   `,
   // font-size: 18px/RT | line-height: 22px/RT
   [import_constants.TYPOGRAPHY_VARIANTS.H3_ARTICLE]: 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.375rem"}; // 22px -> 22/16 = 1.375rem
     @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
@@ -80,6 +84,7 @@ const VARIANTS_CSS_HEADER_ARTICLE = {
   `,
   // font-size: 16px/RT | line-height: 20px/RT
   [import_constants.TYPOGRAPHY_VARIANTS.H4_ARTICLE]: import_ds_system.css`
+    ${import_typographyFontFamily.typographyFontFamily}
     font-size: ${(props) => props.fontSize ?? "1rem"}; // 16px -> 16/16 = 1rem
     line-height: ${(props) => props.lineHeight ?? "1.25rem"}; // 20px -> 20/16 = 1.25rem
     @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
@@ -94,6 +99,7 @@ const VARIANTS_CSS_HEADER_ARTICLE = {
   `,
   // font-size: 14px/RT | line-height: 17px/RT
   [import_constants.TYPOGRAPHY_VARIANTS.H5_ARTICLE]: import_ds_system.css`
+    ${import_typographyFontFamily.typographyFontFamily}
     font-size: ${(props) => props.fontSize ?? "0.875rem"}; // 14px -> 14/16 = 0.875rem
     line-height: ${(props) => props.lineHeight ?? "1.0625rem"}; // 17px -> 17/16 = 1.0625rem
     @media (min-width: ${({ theme }) => theme.breakpoints.small}) {

package/dist/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}) {