@elliemae/ds-typography 3.1.1 → 3.1.3-rc.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -21,6 +21,18 @@ var __spreadValues = (a, b) => {
21
21
  return a;
22
22
  };
23
23
  var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
24
+ var __objRest = (source, exclude) => {
25
+ var target = {};
26
+ for (var prop in source)
27
+ if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
28
+ target[prop] = source[prop];
29
+ if (source != null && __getOwnPropSymbols)
30
+ for (var prop of __getOwnPropSymbols(source)) {
31
+ if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
32
+ target[prop] = source[prop];
33
+ }
34
+ return target;
35
+ };
24
36
  var __export = (target, all) => {
25
37
  for (var name in all)
26
38
  __defProp(target, name, { get: all[name], enumerable: true });
@@ -49,18 +61,19 @@ var import_react_desc_prop_types = require("./react-desc-prop-types");
49
61
  var import_DSTypographyDatatestId = require("./DSTypographyDatatestId");
50
62
  var import_styled = require("./styled");
51
63
  const DSTypography = (props) => {
52
- const {
53
- globalAttributes,
64
+ const _a = (0, import_useTypography.useTypography)(props), {
65
+ globalAttributes: _b
66
+ } = _a, _c = _b, { color } = _c, othersGlobalAttributes = __objRest(_c, ["color"]), {
54
67
  xstyledProps,
55
- propsWithDefault: { as, variant, color, fontSize }
56
- } = (0, import_useTypography.useTypography)(props);
68
+ propsWithDefault: { as, variant, fontSize }
69
+ } = _a;
57
70
  return /* @__PURE__ */ import_react.default.createElement(import_styled.StyledTypography, __spreadProps(__spreadValues(__spreadValues({
58
71
  "data-testid": import_DSTypographyDatatestId.DSTypographyDataTestId.TYPOGRAPHY_ELEMENT
59
- }, globalAttributes), xstyledProps), {
60
- $as: as,
61
- $variant: variant,
62
- $color: color,
63
- $fontSize: fontSize
72
+ }, othersGlobalAttributes), xstyledProps), {
73
+ as,
74
+ variant,
75
+ color,
76
+ fontSize
64
77
  }), props.children);
65
78
  };
66
79
  DSTypography.displayName = import_DSTypographyDatatestId.DSTypographyName;
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/Typography.tsx", "../../../../scripts/build/transpile/react-shim.js"],
4
- "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"],
5
- "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;",
4
+ "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"],
5
+ "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;",
6
6
  "names": []
7
7
  }
@@ -106,10 +106,12 @@ const mapper = {
106
106
  const StyledTypography = (0, import_ds_system.styled)("div", {
107
107
  name: import_DSTypographyDatatestId.DSTypographyName,
108
108
  slot: import_DSTypographyDatatestId.DSTypographyDataTestId.TYPOGRAPHY_ELEMENT
109
+ }).withConfig({
110
+ shouldForwardProp: (prop, defaultValidatorFn) => !["fontSize", "color", "as", "variant"].includes(prop) && defaultValidatorFn(prop)
109
111
  })`
110
112
  margin: 0;
111
113
  padding: 0;
112
- ${(props) => mapper[props.$variant]}
114
+ ${(props) => mapper[props.variant]}
113
115
  ${import_ds_system.fontSize}
114
116
  ${import_ds_system.space}
115
117
  ${import_ds_system.sizing}
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/styled.ts", "../../../../scripts/build/transpile/react-shim.js"],
4
- "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"],
5
- "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;",
4
+ "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"],
5
+ "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;",
6
6
  "names": []
7
7
  }
@@ -17,6 +17,18 @@ var __spreadValues = (a, b) => {
17
17
  return a;
18
18
  };
19
19
  var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
20
+ var __objRest = (source, exclude) => {
21
+ var target = {};
22
+ for (var prop in source)
23
+ if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
24
+ target[prop] = source[prop];
25
+ if (source != null && __getOwnPropSymbols)
26
+ for (var prop of __getOwnPropSymbols(source)) {
27
+ if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
28
+ target[prop] = source[prop];
29
+ }
30
+ return target;
31
+ };
20
32
  import * as React from "react";
21
33
  import React2 from "react";
22
34
  import { describe } from "@elliemae/ds-utilities";
@@ -25,18 +37,19 @@ import { DSTypographyPropTypes } from "./react-desc-prop-types";
25
37
  import { DSTypographyName, DSTypographyDataTestId } from "./DSTypographyDatatestId";
26
38
  import { StyledTypography } from "./styled";
27
39
  const DSTypography = (props) => {
28
- const {
29
- globalAttributes,
40
+ const _a = useTypography(props), {
41
+ globalAttributes: _b
42
+ } = _a, _c = _b, { color } = _c, othersGlobalAttributes = __objRest(_c, ["color"]), {
30
43
  xstyledProps,
31
- propsWithDefault: { as, variant, color, fontSize }
32
- } = useTypography(props);
44
+ propsWithDefault: { as, variant, fontSize }
45
+ } = _a;
33
46
  return /* @__PURE__ */ React2.createElement(StyledTypography, __spreadProps(__spreadValues(__spreadValues({
34
47
  "data-testid": DSTypographyDataTestId.TYPOGRAPHY_ELEMENT
35
- }, globalAttributes), xstyledProps), {
36
- $as: as,
37
- $variant: variant,
38
- $color: color,
39
- $fontSize: fontSize
48
+ }, othersGlobalAttributes), xstyledProps), {
49
+ as,
50
+ variant,
51
+ color,
52
+ fontSize
40
53
  }), props.children);
41
54
  };
42
55
  DSTypography.displayName = DSTypographyName;
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/Typography.tsx"],
4
- "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"],
5
- "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;",
4
+ "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"],
5
+ "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;",
6
6
  "names": []
7
7
  }
@@ -80,10 +80,12 @@ const mapper = {
80
80
  const StyledTypography = styled("div", {
81
81
  name: DSTypographyName,
82
82
  slot: DSTypographyDataTestId.TYPOGRAPHY_ELEMENT
83
+ }).withConfig({
84
+ shouldForwardProp: (prop, defaultValidatorFn) => !["fontSize", "color", "as", "variant"].includes(prop) && defaultValidatorFn(prop)
83
85
  })`
84
86
  margin: 0;
85
87
  padding: 0;
86
- ${(props) => mapper[props.$variant]}
88
+ ${(props) => mapper[props.variant]}
87
89
  ${fontSize}
88
90
  ${space}
89
91
  ${sizing}
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/styled.ts"],
4
- "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"],
5
- "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;",
4
+ "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"],
5
+ "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;",
6
6
  "names": []
7
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-typography",
3
- "version": "3.1.1",
3
+ "version": "3.1.3-rc.1",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Typography",
6
6
  "files": [
@@ -35,8 +35,8 @@
35
35
  "indent": 4
36
36
  },
37
37
  "dependencies": {
38
- "@elliemae/ds-system": "3.1.1",
39
- "@elliemae/ds-utilities": "3.1.1"
38
+ "@elliemae/ds-system": "3.1.3-rc.1",
39
+ "@elliemae/ds-utilities": "3.1.3-rc.1"
40
40
  },
41
41
  "devDependencies": {
42
42
  "@testing-library/jest-dom": "~5.16.2",