@elliemae/ds-typography 3.1.2 → 3.1.3

package/dist/cjs/Typography.js

@@ -21,6 +21,18 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -49,18 +61,19 @@ var import_react_desc_prop_types = require("./react-desc-prop-types");
 var import_DSTypographyDatatestId = require("./DSTypographyDatatestId");
 var import_styled = require("./styled");
 const DSTypography = (props) => {
-  const {
-    globalAttributes,
+  const _a = (0, import_useTypography.useTypography)(props), {
+    globalAttributes: _b
+  } = _a, _c = _b, { color } = _c, othersGlobalAttributes = __objRest(_c, ["color"]), {
     xstyledProps,
-    propsWithDefault: { as, variant, color, fontSize }
-  } = (0, import_useTypography.useTypography)(props);
+    propsWithDefault: { as, variant, fontSize }
+  } = _a;
   return /* @__PURE__ */ import_react.default.createElement(import_styled.StyledTypography, __spreadProps(__spreadValues(__spreadValues({
     "data-testid": import_DSTypographyDatatestId.DSTypographyDataTestId.TYPOGRAPHY_ELEMENT
-  }, globalAttributes), xstyledProps), {
-    $as: as,
-    $variant: variant,
-    $color: color,
-    $fontSize: fontSize
+  }, othersGlobalAttributes), xstyledProps), {
+    as,
+    variant,
+    color,
+    fontSize
   }), props.children);
 };
 DSTypography.displayName = import_DSTypographyDatatestId.DSTypographyName;

package/dist/cjs/Typography.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/Typography.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { describe } from '@elliemae/ds-utilities';\nimport { useTypography } from './config/useTypography';\nimport { type DSTypographyT, DSTypographyPropTypes } from './react-desc-prop-types';\nimport { DSTypographyName, DSTypographyDataTestId } from './DSTypographyDatatestId';\nimport { StyledTypography } from './styled';\n\nconst DSTypography = (props: DSTypographyT.Props) => {\n  const {\n    globalAttributes,\n    xstyledProps,\n    propsWithDefault: { as, variant, color, fontSize },\n  } = useTypography(props);\n  return (\n    <StyledTypography\n      data-testid={DSTypographyDataTestId.TYPOGRAPHY_ELEMENT}\n      {...globalAttributes}\n      {...xstyledProps}\n      $as={as}\n      $variant={variant}\n      $color={color}\n      $fontSize={fontSize}\n    >\n      {props.children}\n    </StyledTypography>\n  );\n};\n\nDSTypography.displayName = DSTypographyName;\nDSTypography.propTypes = DSTypographyPropTypes;\nconst DSTypographyWithSchema = describe(DSTypography);\nDSTypographyWithSchema.propTypes = DSTypographyPropTypes;\n\nexport { DSTypography, DSTypographyWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,0BAAyB;AACzB,2BAA8B;AAC9B,mCAA0D;AAC1D,oCAAyD;AACzD,oBAAiC;AAEjC,MAAM,eAAe,CAAC,UAA+B;AACnD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,kBAAkB,EAAE,IAAI,SAAS,OAAO;AAAA,MACtC,wCAAc,KAAK;AACvB,SACE,mDAAC;AAAA,IACC,eAAa,qDAAuB;AAAA,KAChC,mBACA,eAHL;AAAA,IAIC,KAAK;AAAA,IACL,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,WAAW;AAAA,MAEV,MAAM,QACT;AAEJ;AAEA,aAAa,cAAc;AAC3B,aAAa,YAAY;AACzB,MAAM,yBAAyB,kCAAS,YAAY;AACpD,uBAAuB,YAAY;",
+  "sourcesContent": ["import React from 'react';\nimport { describe } from '@elliemae/ds-utilities';\nimport { useTypography } from './config/useTypography';\nimport { type DSTypographyT, DSTypographyPropTypes } from './react-desc-prop-types';\nimport { DSTypographyName, DSTypographyDataTestId } from './DSTypographyDatatestId';\nimport { StyledTypography } from './styled';\n\nconst DSTypography = (props: DSTypographyT.Props) => {\n  const {\n    globalAttributes: { color, ...othersGlobalAttributes },\n    xstyledProps,\n    propsWithDefault: { as, variant, fontSize },\n  } = useTypography(props);\n  return (\n    <StyledTypography\n      data-testid={DSTypographyDataTestId.TYPOGRAPHY_ELEMENT}\n      {...othersGlobalAttributes}\n      {...xstyledProps}\n      as={as}\n      variant={variant}\n      color={color}\n      fontSize={fontSize}\n    >\n      {props.children}\n    </StyledTypography>\n  );\n};\n\nDSTypography.displayName = DSTypographyName;\nDSTypography.propTypes = DSTypographyPropTypes;\nconst DSTypographyWithSchema = describe(DSTypography);\nDSTypographyWithSchema.propTypes = DSTypographyPropTypes;\n\nexport { DSTypography, DSTypographyWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,0BAAyB;AACzB,2BAA8B;AAC9B,mCAA0D;AAC1D,oCAAyD;AACzD,oBAAiC;AAEjC,MAAM,eAAe,CAAC,UAA+B;AACnD,QAII,6CAAc,KAAK,GAHH;AAAA,IAAlB,kBAAkB;AAAA,MAGhB,IAHgB,SAAE,YAAF,IAAY,mCAAZ,IAAY,CAAV,WAAF;AAAA,IAClB;AAAA,IACA,kBAAkB,EAAE,IAAI,SAAS;AAAA,MAC/B;AACJ,SACE,mDAAC;AAAA,IACC,eAAa,qDAAuB;AAAA,KAChC,yBACA,eAHL;AAAA,IAIC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MAEC,MAAM,QACT;AAEJ;AAEA,aAAa,cAAc;AAC3B,aAAa,YAAY;AACzB,MAAM,yBAAyB,kCAAS,YAAY;AACpD,uBAAuB,YAAY;",
   "names": []
 }

package/dist/cjs/styled.js

@@ -106,10 +106,12 @@ const mapper = {
 const StyledTypography = (0, import_ds_system.styled)("div", {
   name: import_DSTypographyDatatestId.DSTypographyName,
   slot: import_DSTypographyDatatestId.DSTypographyDataTestId.TYPOGRAPHY_ELEMENT
+}).withConfig({
+  shouldForwardProp: (prop, defaultValidatorFn) => !["fontSize", "color", "as", "variant"].includes(prop) && defaultValidatorFn(prop)
 })`
   margin: 0;
   padding: 0;
-  ${(props) => mapper[props.$variant]}
+  ${(props) => mapper[props.variant]}
   ${import_ds_system.fontSize}
   ${import_ds_system.space}
   ${import_ds_system.sizing}

package/dist/cjs/styled.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/styled.ts", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { styled, css, space, sizing, layout, color, fontSize } from '@elliemae/ds-system';\nimport { DSTypographyName, DSTypographyDataTestId } from './DSTypographyDatatestId';\nimport { DSTypographyT } from './react-desc-prop-types';\n\nexport const styleMap = {\n  h1: {\n    fontSize: '34px',\n    lineHeight: '41px',\n  },\n  h2: {\n    fontSize: '24px',\n    lineHeight: '31px',\n  },\n  h3: {\n    fontSize: '18px',\n    lineHeight: '22px',\n  },\n  h4: {\n    fontSize: '16px',\n    lineHeight: '20px',\n  },\n  h5: {\n    fontSize: '14px',\n    lineHeight: '17px',\n  },\n  b1: {\n    fontSize: '14px',\n    lineHeight: '18px',\n  },\n  b2: {\n    fontSize: '13px',\n    lineHeight: '17px',\n  },\n  b3: {\n    fontSize: '12px',\n    lineHeight: '16px',\n  },\n  b4: {\n    fontSize: '11px',\n    lineHeight: '13px',\n  },\n};\n\nconst mapper = {\n  h1: css`\n    font-size: ${styleMap.h1.fontSize};\n    line-height: ${styleMap.h1.lineHeight};\n  `,\n  h2: css`\n    font-size: ${styleMap.h2.fontSize};\n    line-height: ${styleMap.h2.lineHeight};\n  `,\n  h3: css`\n    font-size: ${styleMap.h3.fontSize};\n    line-height: ${styleMap.h3.lineHeight};\n  `,\n  h4: css`\n    font-size: ${styleMap.h4.fontSize};\n    line-height: ${styleMap.h4.lineHeight};\n  `,\n  h5: css`\n    font-size: ${styleMap.h5.fontSize};\n    line-height: ${styleMap.h5.lineHeight};\n  `,\n  b1: css`\n    font-size: ${styleMap.b1.fontSize};\n    line-height: ${styleMap.b1.lineHeight};\n  `,\n  b2: css`\n    font-size: ${styleMap.b2.fontSize};\n    line-height: ${styleMap.b2.lineHeight};\n  `,\n  b3: css`\n    font-size: ${styleMap.b3.fontSize};\n    line-height: ${styleMap.b3.lineHeight};\n  `,\n  b4: css`\n    font-size: ${styleMap.b4.fontSize};\n    line-height: ${styleMap.b4.lineHeight};\n  `,\n};\n\ntype StyleIProp = DSTypographyT.InternalProps & {\n  $as: DSTypographyT.InternalProps['as'];\n  $variant: DSTypographyT.InternalProps['variant'];\n  children: DSTypographyT.InternalProps['children'];\n};\n\nexport const StyledTypography = styled('div', {\n  name: DSTypographyName,\n  slot: DSTypographyDataTestId.TYPOGRAPHY_ELEMENT,\n})<StyleIProp>`\n  margin: 0;\n  padding: 0;\n  ${(props: StyleIProp) => mapper[props.$variant]}\n  ${fontSize}\n  ${space}\n  ${sizing}\n  ${layout}\n  ${color}\n`;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAoE;AACpE,oCAAyD;AAGlD,MAAM,WAAW;AAAA,EACtB,IAAI;AAAA,IACF,UAAU;AAAA,IACV,YAAY;AAAA,EACd;AAAA,EACA,IAAI;AAAA,IACF,UAAU;AAAA,IACV,YAAY;AAAA,EACd;AAAA,EACA,IAAI;AAAA,IACF,UAAU;AAAA,IACV,YAAY;AAAA,EACd;AAAA,EACA,IAAI;AAAA,IACF,UAAU;AAAA,IACV,YAAY;AAAA,EACd;AAAA,EACA,IAAI;AAAA,IACF,UAAU;AAAA,IACV,YAAY;AAAA,EACd;AAAA,EACA,IAAI;AAAA,IACF,UAAU;AAAA,IACV,YAAY;AAAA,EACd;AAAA,EACA,IAAI;AAAA,IACF,UAAU;AAAA,IACV,YAAY;AAAA,EACd;AAAA,EACA,IAAI;AAAA,IACF,UAAU;AAAA,IACV,YAAY;AAAA,EACd;AAAA,EACA,IAAI;AAAA,IACF,UAAU;AAAA,IACV,YAAY;AAAA,EACd;AACF;AAEA,MAAM,SAAS;AAAA,EACb,IAAI;AAAA,iBACW,SAAS,GAAG;AAAA,mBACV,SAAS,GAAG;AAAA;AAAA,EAE7B,IAAI;AAAA,iBACW,SAAS,GAAG;AAAA,mBACV,SAAS,GAAG;AAAA;AAAA,EAE7B,IAAI;AAAA,iBACW,SAAS,GAAG;AAAA,mBACV,SAAS,GAAG;AAAA;AAAA,EAE7B,IAAI;AAAA,iBACW,SAAS,GAAG;AAAA,mBACV,SAAS,GAAG;AAAA;AAAA,EAE7B,IAAI;AAAA,iBACW,SAAS,GAAG;AAAA,mBACV,SAAS,GAAG;AAAA;AAAA,EAE7B,IAAI;AAAA,iBACW,SAAS,GAAG;AAAA,mBACV,SAAS,GAAG;AAAA;AAAA,EAE7B,IAAI;AAAA,iBACW,SAAS,GAAG;AAAA,mBACV,SAAS,GAAG;AAAA;AAAA,EAE7B,IAAI;AAAA,iBACW,SAAS,GAAG;AAAA,mBACV,SAAS,GAAG;AAAA;AAAA,EAE7B,IAAI;AAAA,iBACW,SAAS,GAAG;AAAA,mBACV,SAAS,GAAG;AAAA;AAE/B;AAQO,MAAM,mBAAmB,6BAAO,OAAO;AAAA,EAC5C,MAAM;AAAA,EACN,MAAM,qDAAuB;AAC/B,CAAC;AAAA;AAAA;AAAA,IAGG,CAAC,UAAsB,OAAO,MAAM;AAAA,IACpC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;",
+  "sourcesContent": ["import { styled, css, space, sizing, layout, color, fontSize } from '@elliemae/ds-system';\nimport { DSTypographyName, DSTypographyDataTestId } from './DSTypographyDatatestId';\nimport { DSTypographyT } from './react-desc-prop-types';\n\nexport const styleMap = {\n  h1: {\n    fontSize: '34px',\n    lineHeight: '41px',\n  },\n  h2: {\n    fontSize: '24px',\n    lineHeight: '31px',\n  },\n  h3: {\n    fontSize: '18px',\n    lineHeight: '22px',\n  },\n  h4: {\n    fontSize: '16px',\n    lineHeight: '20px',\n  },\n  h5: {\n    fontSize: '14px',\n    lineHeight: '17px',\n  },\n  b1: {\n    fontSize: '14px',\n    lineHeight: '18px',\n  },\n  b2: {\n    fontSize: '13px',\n    lineHeight: '17px',\n  },\n  b3: {\n    fontSize: '12px',\n    lineHeight: '16px',\n  },\n  b4: {\n    fontSize: '11px',\n    lineHeight: '13px',\n  },\n};\n\nconst mapper = {\n  h1: css`\n    font-size: ${styleMap.h1.fontSize};\n    line-height: ${styleMap.h1.lineHeight};\n  `,\n  h2: css`\n    font-size: ${styleMap.h2.fontSize};\n    line-height: ${styleMap.h2.lineHeight};\n  `,\n  h3: css`\n    font-size: ${styleMap.h3.fontSize};\n    line-height: ${styleMap.h3.lineHeight};\n  `,\n  h4: css`\n    font-size: ${styleMap.h4.fontSize};\n    line-height: ${styleMap.h4.lineHeight};\n  `,\n  h5: css`\n    font-size: ${styleMap.h5.fontSize};\n    line-height: ${styleMap.h5.lineHeight};\n  `,\n  b1: css`\n    font-size: ${styleMap.b1.fontSize};\n    line-height: ${styleMap.b1.lineHeight};\n  `,\n  b2: css`\n    font-size: ${styleMap.b2.fontSize};\n    line-height: ${styleMap.b2.lineHeight};\n  `,\n  b3: css`\n    font-size: ${styleMap.b3.fontSize};\n    line-height: ${styleMap.b3.lineHeight};\n  `,\n  b4: css`\n    font-size: ${styleMap.b4.fontSize};\n    line-height: ${styleMap.b4.lineHeight};\n  `,\n};\n\ntype StyleIProp = DSTypographyT.InternalProps & {\n  $as: DSTypographyT.InternalProps['as'];\n  $variant: DSTypographyT.InternalProps['variant'];\n  children: DSTypographyT.InternalProps['children'];\n};\n\nexport const StyledTypography = styled('div', {\n  name: DSTypographyName,\n  slot: DSTypographyDataTestId.TYPOGRAPHY_ELEMENT,\n}).withConfig({\n  shouldForwardProp: (prop, defaultValidatorFn) =>\n    !['fontSize', 'color', 'as', 'variant'].includes(prop) && defaultValidatorFn(prop),\n})<StyleIProp>`\n  margin: 0;\n  padding: 0;\n  ${(props: StyleIProp) => mapper[props.variant]}\n  ${fontSize}\n  ${space}\n  ${sizing}\n  ${layout}\n  ${color}\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAoE;AACpE,oCAAyD;AAGlD,MAAM,WAAW;AAAA,EACtB,IAAI;AAAA,IACF,UAAU;AAAA,IACV,YAAY;AAAA,EACd;AAAA,EACA,IAAI;AAAA,IACF,UAAU;AAAA,IACV,YAAY;AAAA,EACd;AAAA,EACA,IAAI;AAAA,IACF,UAAU;AAAA,IACV,YAAY;AAAA,EACd;AAAA,EACA,IAAI;AAAA,IACF,UAAU;AAAA,IACV,YAAY;AAAA,EACd;AAAA,EACA,IAAI;AAAA,IACF,UAAU;AAAA,IACV,YAAY;AAAA,EACd;AAAA,EACA,IAAI;AAAA,IACF,UAAU;AAAA,IACV,YAAY;AAAA,EACd;AAAA,EACA,IAAI;AAAA,IACF,UAAU;AAAA,IACV,YAAY;AAAA,EACd;AAAA,EACA,IAAI;AAAA,IACF,UAAU;AAAA,IACV,YAAY;AAAA,EACd;AAAA,EACA,IAAI;AAAA,IACF,UAAU;AAAA,IACV,YAAY;AAAA,EACd;AACF;AAEA,MAAM,SAAS;AAAA,EACb,IAAI;AAAA,iBACW,SAAS,GAAG;AAAA,mBACV,SAAS,GAAG;AAAA;AAAA,EAE7B,IAAI;AAAA,iBACW,SAAS,GAAG;AAAA,mBACV,SAAS,GAAG;AAAA;AAAA,EAE7B,IAAI;AAAA,iBACW,SAAS,GAAG;AAAA,mBACV,SAAS,GAAG;AAAA;AAAA,EAE7B,IAAI;AAAA,iBACW,SAAS,GAAG;AAAA,mBACV,SAAS,GAAG;AAAA;AAAA,EAE7B,IAAI;AAAA,iBACW,SAAS,GAAG;AAAA,mBACV,SAAS,GAAG;AAAA;AAAA,EAE7B,IAAI;AAAA,iBACW,SAAS,GAAG;AAAA,mBACV,SAAS,GAAG;AAAA;AAAA,EAE7B,IAAI;AAAA,iBACW,SAAS,GAAG;AAAA,mBACV,SAAS,GAAG;AAAA;AAAA,EAE7B,IAAI;AAAA,iBACW,SAAS,GAAG;AAAA,mBACV,SAAS,GAAG;AAAA;AAAA,EAE7B,IAAI;AAAA,iBACW,SAAS,GAAG;AAAA,mBACV,SAAS,GAAG;AAAA;AAE/B;AAQO,MAAM,mBAAmB,6BAAO,OAAO;AAAA,EAC5C,MAAM;AAAA,EACN,MAAM,qDAAuB;AAC/B,CAAC,EAAE,WAAW;AAAA,EACZ,mBAAmB,CAAC,MAAM,uBACxB,CAAC,CAAC,YAAY,SAAS,MAAM,SAAS,EAAE,SAAS,IAAI,KAAK,mBAAmB,IAAI;AACrF,CAAC;AAAA;AAAA;AAAA,IAGG,CAAC,UAAsB,OAAO,MAAM;AAAA,IACpC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;",
   "names": []
 }

package/dist/esm/Typography.js

@@ -17,6 +17,18 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
 import * as React from "react";
 import React2 from "react";
 import { describe } from "@elliemae/ds-utilities";
@@ -25,18 +37,19 @@ import { DSTypographyPropTypes } from "./react-desc-prop-types";
 import { DSTypographyName, DSTypographyDataTestId } from "./DSTypographyDatatestId";
 import { StyledTypography } from "./styled";
 const DSTypography = (props) => {
-  const {
-    globalAttributes,
+  const _a = useTypography(props), {
+    globalAttributes: _b
+  } = _a, _c = _b, { color } = _c, othersGlobalAttributes = __objRest(_c, ["color"]), {
     xstyledProps,
-    propsWithDefault: { as, variant, color, fontSize }
-  } = useTypography(props);
+    propsWithDefault: { as, variant, fontSize }
+  } = _a;
   return /* @__PURE__ */ React2.createElement(StyledTypography, __spreadProps(__spreadValues(__spreadValues({
     "data-testid": DSTypographyDataTestId.TYPOGRAPHY_ELEMENT
-  }, globalAttributes), xstyledProps), {
-    $as: as,
-    $variant: variant,
-    $color: color,
-    $fontSize: fontSize
+  }, othersGlobalAttributes), xstyledProps), {
+    as,
+    variant,
+    color,
+    fontSize
   }), props.children);
 };
 DSTypography.displayName = DSTypographyName;

package/dist/esm/Typography.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/Typography.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe } from '@elliemae/ds-utilities';\nimport { useTypography } from './config/useTypography';\nimport { type DSTypographyT, DSTypographyPropTypes } from './react-desc-prop-types';\nimport { DSTypographyName, DSTypographyDataTestId } from './DSTypographyDatatestId';\nimport { StyledTypography } from './styled';\n\nconst DSTypography = (props: DSTypographyT.Props) => {\n  const {\n    globalAttributes,\n    xstyledProps,\n    propsWithDefault: { as, variant, color, fontSize },\n  } = useTypography(props);\n  return (\n    <StyledTypography\n      data-testid={DSTypographyDataTestId.TYPOGRAPHY_ELEMENT}\n      {...globalAttributes}\n      {...xstyledProps}\n      $as={as}\n      $variant={variant}\n      $color={color}\n      $fontSize={fontSize}\n    >\n      {props.children}\n    </StyledTypography>\n  );\n};\n\nDSTypography.displayName = DSTypographyName;\nDSTypography.propTypes = DSTypographyPropTypes;\nconst DSTypographyWithSchema = describe(DSTypography);\nDSTypographyWithSchema.propTypes = DSTypographyPropTypes;\n\nexport { DSTypography, DSTypographyWithSchema };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAM,eAAe,CAAC,UAA+B;AACnD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,kBAAkB,EAAE,IAAI,SAAS,OAAO;AAAA,MACtC,cAAc,KAAK;AACvB,SACE,qCAAC;AAAA,IACC,eAAa,uBAAuB;AAAA,KAChC,mBACA,eAHL;AAAA,IAIC,KAAK;AAAA,IACL,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,WAAW;AAAA,MAEV,MAAM,QACT;AAEJ;AAEA,aAAa,cAAc;AAC3B,aAAa,YAAY;AACzB,MAAM,yBAAyB,SAAS,YAAY;AACpD,uBAAuB,YAAY;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe } from '@elliemae/ds-utilities';\nimport { useTypography } from './config/useTypography';\nimport { type DSTypographyT, DSTypographyPropTypes } from './react-desc-prop-types';\nimport { DSTypographyName, DSTypographyDataTestId } from './DSTypographyDatatestId';\nimport { StyledTypography } from './styled';\n\nconst DSTypography = (props: DSTypographyT.Props) => {\n  const {\n    globalAttributes: { color, ...othersGlobalAttributes },\n    xstyledProps,\n    propsWithDefault: { as, variant, fontSize },\n  } = useTypography(props);\n  return (\n    <StyledTypography\n      data-testid={DSTypographyDataTestId.TYPOGRAPHY_ELEMENT}\n      {...othersGlobalAttributes}\n      {...xstyledProps}\n      as={as}\n      variant={variant}\n      color={color}\n      fontSize={fontSize}\n    >\n      {props.children}\n    </StyledTypography>\n  );\n};\n\nDSTypography.displayName = DSTypographyName;\nDSTypography.propTypes = DSTypographyPropTypes;\nconst DSTypographyWithSchema = describe(DSTypography);\nDSTypographyWithSchema.propTypes = DSTypographyPropTypes;\n\nexport { DSTypography, DSTypographyWithSchema };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAM,eAAe,CAAC,UAA+B;AACnD,QAII,mBAAc,KAAK,GAHH;AAAA,IAAlB,kBAAkB;AAAA,MAGhB,IAHgB,SAAE,YAAF,IAAY,mCAAZ,IAAY,CAAV,WAAF;AAAA,IAClB;AAAA,IACA,kBAAkB,EAAE,IAAI,SAAS;AAAA,MAC/B;AACJ,SACE,qCAAC;AAAA,IACC,eAAa,uBAAuB;AAAA,KAChC,yBACA,eAHL;AAAA,IAIC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MAEC,MAAM,QACT;AAEJ;AAEA,aAAa,cAAc;AAC3B,aAAa,YAAY;AACzB,MAAM,yBAAyB,SAAS,YAAY;AACpD,uBAAuB,YAAY;",
   "names": []
 }

package/dist/esm/styled.js

@@ -80,10 +80,12 @@ const mapper = {
 const StyledTypography = styled("div", {
   name: DSTypographyName,
   slot: DSTypographyDataTestId.TYPOGRAPHY_ELEMENT
+}).withConfig({
+  shouldForwardProp: (prop, defaultValidatorFn) => !["fontSize", "color", "as", "variant"].includes(prop) && defaultValidatorFn(prop)
 })`
   margin: 0;
   padding: 0;
-  ${(props) => mapper[props.$variant]}
+  ${(props) => mapper[props.variant]}
   ${fontSize}
   ${space}
   ${sizing}

package/dist/esm/styled.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/styled.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, css, space, sizing, layout, color, fontSize } from '@elliemae/ds-system';\nimport { DSTypographyName, DSTypographyDataTestId } from './DSTypographyDatatestId';\nimport { DSTypographyT } from './react-desc-prop-types';\n\nexport const styleMap = {\n  h1: {\n    fontSize: '34px',\n    lineHeight: '41px',\n  },\n  h2: {\n    fontSize: '24px',\n    lineHeight: '31px',\n  },\n  h3: {\n    fontSize: '18px',\n    lineHeight: '22px',\n  },\n  h4: {\n    fontSize: '16px',\n    lineHeight: '20px',\n  },\n  h5: {\n    fontSize: '14px',\n    lineHeight: '17px',\n  },\n  b1: {\n    fontSize: '14px',\n    lineHeight: '18px',\n  },\n  b2: {\n    fontSize: '13px',\n    lineHeight: '17px',\n  },\n  b3: {\n    fontSize: '12px',\n    lineHeight: '16px',\n  },\n  b4: {\n    fontSize: '11px',\n    lineHeight: '13px',\n  },\n};\n\nconst mapper = {\n  h1: css`\n    font-size: ${styleMap.h1.fontSize};\n    line-height: ${styleMap.h1.lineHeight};\n  `,\n  h2: css`\n    font-size: ${styleMap.h2.fontSize};\n    line-height: ${styleMap.h2.lineHeight};\n  `,\n  h3: css`\n    font-size: ${styleMap.h3.fontSize};\n    line-height: ${styleMap.h3.lineHeight};\n  `,\n  h4: css`\n    font-size: ${styleMap.h4.fontSize};\n    line-height: ${styleMap.h4.lineHeight};\n  `,\n  h5: css`\n    font-size: ${styleMap.h5.fontSize};\n    line-height: ${styleMap.h5.lineHeight};\n  `,\n  b1: css`\n    font-size: ${styleMap.b1.fontSize};\n    line-height: ${styleMap.b1.lineHeight};\n  `,\n  b2: css`\n    font-size: ${styleMap.b2.fontSize};\n    line-height: ${styleMap.b2.lineHeight};\n  `,\n  b3: css`\n    font-size: ${styleMap.b3.fontSize};\n    line-height: ${styleMap.b3.lineHeight};\n  `,\n  b4: css`\n    font-size: ${styleMap.b4.fontSize};\n    line-height: ${styleMap.b4.lineHeight};\n  `,\n};\n\ntype StyleIProp = DSTypographyT.InternalProps & {\n  $as: DSTypographyT.InternalProps['as'];\n  $variant: DSTypographyT.InternalProps['variant'];\n  children: DSTypographyT.InternalProps['children'];\n};\n\nexport const StyledTypography = styled('div', {\n  name: DSTypographyName,\n  slot: DSTypographyDataTestId.TYPOGRAPHY_ELEMENT,\n})<StyleIProp>`\n  margin: 0;\n  padding: 0;\n  ${(props: StyleIProp) => mapper[props.$variant]}\n  ${fontSize}\n  ${space}\n  ${sizing}\n  ${layout}\n  ${color}\n`;\n"],
-  "mappings": "AAAA;ACAA;AACA;AAGO,MAAM,WAAW;AAAA,EACtB,IAAI;AAAA,IACF,UAAU;AAAA,IACV,YAAY;AAAA,EACd;AAAA,EACA,IAAI;AAAA,IACF,UAAU;AAAA,IACV,YAAY;AAAA,EACd;AAAA,EACA,IAAI;AAAA,IACF,UAAU;AAAA,IACV,YAAY;AAAA,EACd;AAAA,EACA,IAAI;AAAA,IACF,UAAU;AAAA,IACV,YAAY;AAAA,EACd;AAAA,EACA,IAAI;AAAA,IACF,UAAU;AAAA,IACV,YAAY;AAAA,EACd;AAAA,EACA,IAAI;AAAA,IACF,UAAU;AAAA,IACV,YAAY;AAAA,EACd;AAAA,EACA,IAAI;AAAA,IACF,UAAU;AAAA,IACV,YAAY;AAAA,EACd;AAAA,EACA,IAAI;AAAA,IACF,UAAU;AAAA,IACV,YAAY;AAAA,EACd;AAAA,EACA,IAAI;AAAA,IACF,UAAU;AAAA,IACV,YAAY;AAAA,EACd;AACF;AAEA,MAAM,SAAS;AAAA,EACb,IAAI;AAAA,iBACW,SAAS,GAAG;AAAA,mBACV,SAAS,GAAG;AAAA;AAAA,EAE7B,IAAI;AAAA,iBACW,SAAS,GAAG;AAAA,mBACV,SAAS,GAAG;AAAA;AAAA,EAE7B,IAAI;AAAA,iBACW,SAAS,GAAG;AAAA,mBACV,SAAS,GAAG;AAAA;AAAA,EAE7B,IAAI;AAAA,iBACW,SAAS,GAAG;AAAA,mBACV,SAAS,GAAG;AAAA;AAAA,EAE7B,IAAI;AAAA,iBACW,SAAS,GAAG;AAAA,mBACV,SAAS,GAAG;AAAA;AAAA,EAE7B,IAAI;AAAA,iBACW,SAAS,GAAG;AAAA,mBACV,SAAS,GAAG;AAAA;AAAA,EAE7B,IAAI;AAAA,iBACW,SAAS,GAAG;AAAA,mBACV,SAAS,GAAG;AAAA;AAAA,EAE7B,IAAI;AAAA,iBACW,SAAS,GAAG;AAAA,mBACV,SAAS,GAAG;AAAA;AAAA,EAE7B,IAAI;AAAA,iBACW,SAAS,GAAG;AAAA,mBACV,SAAS,GAAG;AAAA;AAE/B;AAQO,MAAM,mBAAmB,OAAO,OAAO;AAAA,EAC5C,MAAM;AAAA,EACN,MAAM,uBAAuB;AAC/B,CAAC;AAAA;AAAA;AAAA,IAGG,CAAC,UAAsB,OAAO,MAAM;AAAA,IACpC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, css, space, sizing, layout, color, fontSize } from '@elliemae/ds-system';\nimport { DSTypographyName, DSTypographyDataTestId } from './DSTypographyDatatestId';\nimport { DSTypographyT } from './react-desc-prop-types';\n\nexport const styleMap = {\n  h1: {\n    fontSize: '34px',\n    lineHeight: '41px',\n  },\n  h2: {\n    fontSize: '24px',\n    lineHeight: '31px',\n  },\n  h3: {\n    fontSize: '18px',\n    lineHeight: '22px',\n  },\n  h4: {\n    fontSize: '16px',\n    lineHeight: '20px',\n  },\n  h5: {\n    fontSize: '14px',\n    lineHeight: '17px',\n  },\n  b1: {\n    fontSize: '14px',\n    lineHeight: '18px',\n  },\n  b2: {\n    fontSize: '13px',\n    lineHeight: '17px',\n  },\n  b3: {\n    fontSize: '12px',\n    lineHeight: '16px',\n  },\n  b4: {\n    fontSize: '11px',\n    lineHeight: '13px',\n  },\n};\n\nconst mapper = {\n  h1: css`\n    font-size: ${styleMap.h1.fontSize};\n    line-height: ${styleMap.h1.lineHeight};\n  `,\n  h2: css`\n    font-size: ${styleMap.h2.fontSize};\n    line-height: ${styleMap.h2.lineHeight};\n  `,\n  h3: css`\n    font-size: ${styleMap.h3.fontSize};\n    line-height: ${styleMap.h3.lineHeight};\n  `,\n  h4: css`\n    font-size: ${styleMap.h4.fontSize};\n    line-height: ${styleMap.h4.lineHeight};\n  `,\n  h5: css`\n    font-size: ${styleMap.h5.fontSize};\n    line-height: ${styleMap.h5.lineHeight};\n  `,\n  b1: css`\n    font-size: ${styleMap.b1.fontSize};\n    line-height: ${styleMap.b1.lineHeight};\n  `,\n  b2: css`\n    font-size: ${styleMap.b2.fontSize};\n    line-height: ${styleMap.b2.lineHeight};\n  `,\n  b3: css`\n    font-size: ${styleMap.b3.fontSize};\n    line-height: ${styleMap.b3.lineHeight};\n  `,\n  b4: css`\n    font-size: ${styleMap.b4.fontSize};\n    line-height: ${styleMap.b4.lineHeight};\n  `,\n};\n\ntype StyleIProp = DSTypographyT.InternalProps & {\n  $as: DSTypographyT.InternalProps['as'];\n  $variant: DSTypographyT.InternalProps['variant'];\n  children: DSTypographyT.InternalProps['children'];\n};\n\nexport const StyledTypography = styled('div', {\n  name: DSTypographyName,\n  slot: DSTypographyDataTestId.TYPOGRAPHY_ELEMENT,\n}).withConfig({\n  shouldForwardProp: (prop, defaultValidatorFn) =>\n    !['fontSize', 'color', 'as', 'variant'].includes(prop) && defaultValidatorFn(prop),\n})<StyleIProp>`\n  margin: 0;\n  padding: 0;\n  ${(props: StyleIProp) => mapper[props.variant]}\n  ${fontSize}\n  ${space}\n  ${sizing}\n  ${layout}\n  ${color}\n`;\n"],
+  "mappings": "AAAA;ACAA;AACA;AAGO,MAAM,WAAW;AAAA,EACtB,IAAI;AAAA,IACF,UAAU;AAAA,IACV,YAAY;AAAA,EACd;AAAA,EACA,IAAI;AAAA,IACF,UAAU;AAAA,IACV,YAAY;AAAA,EACd;AAAA,EACA,IAAI;AAAA,IACF,UAAU;AAAA,IACV,YAAY;AAAA,EACd;AAAA,EACA,IAAI;AAAA,IACF,UAAU;AAAA,IACV,YAAY;AAAA,EACd;AAAA,EACA,IAAI;AAAA,IACF,UAAU;AAAA,IACV,YAAY;AAAA,EACd;AAAA,EACA,IAAI;AAAA,IACF,UAAU;AAAA,IACV,YAAY;AAAA,EACd;AAAA,EACA,IAAI;AAAA,IACF,UAAU;AAAA,IACV,YAAY;AAAA,EACd;AAAA,EACA,IAAI;AAAA,IACF,UAAU;AAAA,IACV,YAAY;AAAA,EACd;AAAA,EACA,IAAI;AAAA,IACF,UAAU;AAAA,IACV,YAAY;AAAA,EACd;AACF;AAEA,MAAM,SAAS;AAAA,EACb,IAAI;AAAA,iBACW,SAAS,GAAG;AAAA,mBACV,SAAS,GAAG;AAAA;AAAA,EAE7B,IAAI;AAAA,iBACW,SAAS,GAAG;AAAA,mBACV,SAAS,GAAG;AAAA;AAAA,EAE7B,IAAI;AAAA,iBACW,SAAS,GAAG;AAAA,mBACV,SAAS,GAAG;AAAA;AAAA,EAE7B,IAAI;AAAA,iBACW,SAAS,GAAG;AAAA,mBACV,SAAS,GAAG;AAAA;AAAA,EAE7B,IAAI;AAAA,iBACW,SAAS,GAAG;AAAA,mBACV,SAAS,GAAG;AAAA;AAAA,EAE7B,IAAI;AAAA,iBACW,SAAS,GAAG;AAAA,mBACV,SAAS,GAAG;AAAA;AAAA,EAE7B,IAAI;AAAA,iBACW,SAAS,GAAG;AAAA,mBACV,SAAS,GAAG;AAAA;AAAA,EAE7B,IAAI;AAAA,iBACW,SAAS,GAAG;AAAA,mBACV,SAAS,GAAG;AAAA;AAAA,EAE7B,IAAI;AAAA,iBACW,SAAS,GAAG;AAAA,mBACV,SAAS,GAAG;AAAA;AAE/B;AAQO,MAAM,mBAAmB,OAAO,OAAO;AAAA,EAC5C,MAAM;AAAA,EACN,MAAM,uBAAuB;AAC/B,CAAC,EAAE,WAAW;AAAA,EACZ,mBAAmB,CAAC,MAAM,uBACxB,CAAC,CAAC,YAAY,SAAS,MAAM,SAAS,EAAE,SAAS,IAAI,KAAK,mBAAmB,IAAI;AACrF,CAAC;AAAA;AAAA;AAAA,IAGG,CAAC,UAAsB,OAAO,MAAM;AAAA,IACpC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-typography",
-  "version": "3.1.2",
+  "version": "3.1.3",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Typography",
   "files": [
@@ -35,8 +35,8 @@
     "indent": 4
   },
   "dependencies": {
-    "@elliemae/ds-system": "3.1.2",
-    "@elliemae/ds-utilities": "3.1.2"
+    "@elliemae/ds-system": "3.1.3",
+    "@elliemae/ds-utilities": "3.1.3"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "~5.16.2",