@elliemae/ds-typography 3.12.0-rc.0 → 3.12.0-rc.2

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.
@@ -41,7 +41,7 @@ const DSTypography = (props) => {
41
41
  xstyledProps,
42
42
  propsWithDefault: { color, as, variant, fontSize }
43
43
  } = (0, import_useTypography.useTypography)(props);
44
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledTypography, {
44
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledTypographyWrapper, {
45
45
  "data-testid": import_DSTypographyDatatestId.DSTypographyDataTestId.TYPOGRAPHY_ELEMENT,
46
46
  ...othersGlobalAttributes,
47
47
  ...xstyledProps,
@@ -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: React.ComponentType<DSTypographyT.Props> = (props) => {\n const {\n globalAttributes: { ...othersGlobalAttributes },\n xstyledProps,\n propsWithDefault: { color, 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 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;ADcnB;AAbJ,0BAAyB;AACzB,2BAA8B;AAC9B,mCAA0D;AAC1D,oCAAyD;AACzD,oBAAiC;AAEjC,MAAM,eAAyD,CAAC,UAAU;AACxE,QAAM;AAAA,IACJ,kBAAkB,KAAK,uBAAuB;AAAA,IAC9C;AAAA,IACA,kBAAkB,EAAE,OAAO,IAAI,SAAS,SAAS;AAAA,EACnD,QAAI,oCAAc,KAAK;AACvB,SACE,4CAAC;AAAA,IACC,eAAa,qDAAuB;AAAA,IACnC,GAAG;AAAA,IACH,GAAG;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IAEC,gBAAM;AAAA,GACT;AAEJ;AAEA,aAAa,cAAc;AAC3B,aAAa,YAAY;AACzB,MAAM,6BAAyB,8BAAS,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 { StyledTypographyWrapper } from './styled';\n\nconst DSTypography: React.ComponentType<DSTypographyT.Props> = (props) => {\n const {\n globalAttributes: { ...othersGlobalAttributes },\n xstyledProps,\n propsWithDefault: { color, as, variant, fontSize },\n } = useTypography(props);\n return (\n <StyledTypographyWrapper\n data-testid={DSTypographyDataTestId.TYPOGRAPHY_ELEMENT}\n {...othersGlobalAttributes}\n {...xstyledProps}\n as={as}\n variant={variant}\n fontSize={fontSize}\n >\n {props.children}\n </StyledTypographyWrapper>\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;ADcnB;AAbJ,0BAAyB;AACzB,2BAA8B;AAC9B,mCAA0D;AAC1D,oCAAyD;AACzD,oBAAwC;AAExC,MAAM,eAAyD,CAAC,UAAU;AACxE,QAAM;AAAA,IACJ,kBAAkB,KAAK,uBAAuB;AAAA,IAC9C;AAAA,IACA,kBAAkB,EAAE,OAAO,IAAI,SAAS,SAAS;AAAA,EACnD,QAAI,oCAAc,KAAK;AACvB,SACE,4CAAC;AAAA,IACC,eAAa,qDAAuB;AAAA,IACnC,GAAG;AAAA,IACH,GAAG;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IAEC,gBAAM;AAAA,GACT;AAEJ;AAEA,aAAa,cAAc;AAC3B,aAAa,YAAY;AACzB,MAAM,6BAAyB,8BAAS,YAAY;AACpD,uBAAuB,YAAY;",
6
6
  "names": []
7
7
  }
@@ -25,6 +25,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
25
25
  var styled_exports = {};
26
26
  __export(styled_exports, {
27
27
  StyledTypography: () => StyledTypography,
28
+ StyledTypographyWrapper: () => StyledTypographyWrapper,
28
29
  styleMap: () => styleMap
29
30
  });
30
31
  module.exports = __toCommonJS(styled_exports);
@@ -107,7 +108,7 @@ const mapper = {
107
108
  line-height: ${styleMap.b4.lineHeight};
108
109
  `
109
110
  };
110
- const StyledTypography = (0, import_ds_system.styled)(import_ds_system.XStyledWrapper, {
111
+ const StyledTypography = (0, import_ds_system.styled)("div", {
111
112
  name: import_DSTypographyDatatestId.DSTypographyName,
112
113
  slot: import_DSTypographyDatatestId.DSTypographyDataTestId.TYPOGRAPHY_ELEMENT
113
114
  }).withConfig({
@@ -117,4 +118,7 @@ const StyledTypography = (0, import_ds_system.styled)(import_ds_system.XStyledWr
117
118
  padding: 0;
118
119
  ${(props) => mapper[props.variant]}
119
120
  `;
121
+ const StyledTypographyWrapper = (0, import_ds_system.styled)(StyledTypography)`
122
+ ${import_ds_system.xStyledCommonProps}
123
+ `;
120
124
  //# sourceMappingURL=styled.js.map
@@ -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, XStyledWrapper } from '@elliemae/ds-system';\nimport { DSTypographyName, DSTypographyDataTestId } from './DSTypographyDatatestId';\nimport type { DSTypographyT } from './react-desc-prop-types';\nimport type {} from '@xstyled/util';\nimport type {} from '@xstyled/system';\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 children: DSTypographyT.InternalProps['children'];\n};\n\nexport const StyledTypography = styled(XStyledWrapper, {\n name: DSTypographyName,\n slot: DSTypographyDataTestId.TYPOGRAPHY_ELEMENT,\n}).withConfig({\n shouldForwardProp: (prop, defaultValidatorFn) =>\n !['fontSize', 'color', 'as', 'variant'].includes(prop.toString()) && defaultValidatorFn(prop),\n})<StyleIProp>`\n margin: 0;\n padding: 0;\n ${(props: StyleIProp) => mapper[props.variant]}\n`;\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA4C;AAC5C,oCAAyD;AAIlD,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;AAMO,MAAM,uBAAmB,yBAAO,iCAAgB;AAAA,EACrD,MAAM;AAAA,EACN,MAAM,qDAAuB;AAC/B,CAAC,EAAE,WAAW;AAAA,EACZ,mBAAmB,CAAC,MAAM,uBACxB,CAAC,CAAC,YAAY,SAAS,MAAM,SAAS,EAAE,SAAS,KAAK,SAAS,CAAC,KAAK,mBAAmB,IAAI;AAChG,CAAC;AAAA;AAAA;AAAA,IAGG,CAAC,UAAsB,OAAO,MAAM;AAAA;",
4
+ "sourcesContent": ["import { styled, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport { DSTypographyName, DSTypographyDataTestId } from './DSTypographyDatatestId';\nimport type { DSTypographyT } from './react-desc-prop-types';\nimport type {} from '@xstyled/util';\nimport type {} from '@xstyled/system';\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 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.toString()) && defaultValidatorFn(prop),\n})<StyleIProp>`\n margin: 0;\n padding: 0;\n ${(props: StyleIProp) => mapper[props.variant]}\n`;\n\nexport const StyledTypographyWrapper = styled(StyledTypography)`\n ${xStyledCommonProps}\n`;\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAgD;AAChD,oCAAyD;AAIlD,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;AAMO,MAAM,uBAAmB,yBAAO,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,KAAK,SAAS,CAAC,KAAK,mBAAmB,IAAI;AAChG,CAAC;AAAA;AAAA;AAAA,IAGG,CAAC,UAAsB,OAAO,MAAM;AAAA;AAGjC,MAAM,8BAA0B,yBAAO,gBAAgB;AAAA,IAC1D;AAAA;",
6
6
  "names": []
7
7
  }
@@ -4,14 +4,14 @@ import { describe } from "@elliemae/ds-utilities";
4
4
  import { useTypography } from "./config/useTypography";
5
5
  import { DSTypographyPropTypes } from "./react-desc-prop-types";
6
6
  import { DSTypographyName, DSTypographyDataTestId } from "./DSTypographyDatatestId";
7
- import { StyledTypography } from "./styled";
7
+ import { StyledTypographyWrapper } from "./styled";
8
8
  const DSTypography = (props) => {
9
9
  const {
10
10
  globalAttributes: { ...othersGlobalAttributes },
11
11
  xstyledProps,
12
12
  propsWithDefault: { color, as, variant, fontSize }
13
13
  } = useTypography(props);
14
- return /* @__PURE__ */ jsx(StyledTypography, {
14
+ return /* @__PURE__ */ jsx(StyledTypographyWrapper, {
15
15
  "data-testid": DSTypographyDataTestId.TYPOGRAPHY_ELEMENT,
16
16
  ...othersGlobalAttributes,
17
17
  ...xstyledProps,
@@ -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: React.ComponentType<DSTypographyT.Props> = (props) => {\n const {\n globalAttributes: { ...othersGlobalAttributes },\n xstyledProps,\n propsWithDefault: { color, 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 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,YAAY,WAAW;ACcnB;AAbJ,SAAS,gBAAgB;AACzB,SAAS,qBAAqB;AAC9B,SAA6B,6BAA6B;AAC1D,SAAS,kBAAkB,8BAA8B;AACzD,SAAS,wBAAwB;AAEjC,MAAM,eAAyD,CAAC,UAAU;AACxE,QAAM;AAAA,IACJ,kBAAkB,KAAK,uBAAuB;AAAA,IAC9C;AAAA,IACA,kBAAkB,EAAE,OAAO,IAAI,SAAS,SAAS;AAAA,EACnD,IAAI,cAAc,KAAK;AACvB,SACE,oBAAC;AAAA,IACC,eAAa,uBAAuB;AAAA,IACnC,GAAG;AAAA,IACH,GAAG;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IAEC,gBAAM;AAAA,GACT;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 { StyledTypographyWrapper } from './styled';\n\nconst DSTypography: React.ComponentType<DSTypographyT.Props> = (props) => {\n const {\n globalAttributes: { ...othersGlobalAttributes },\n xstyledProps,\n propsWithDefault: { color, as, variant, fontSize },\n } = useTypography(props);\n return (\n <StyledTypographyWrapper\n data-testid={DSTypographyDataTestId.TYPOGRAPHY_ELEMENT}\n {...othersGlobalAttributes}\n {...xstyledProps}\n as={as}\n variant={variant}\n fontSize={fontSize}\n >\n {props.children}\n </StyledTypographyWrapper>\n );\n};\n\nDSTypography.displayName = DSTypographyName;\nDSTypography.propTypes = DSTypographyPropTypes;\nconst DSTypographyWithSchema = describe(DSTypography);\nDSTypographyWithSchema.propTypes = DSTypographyPropTypes;\n\nexport { DSTypography, DSTypographyWithSchema };\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACcnB;AAbJ,SAAS,gBAAgB;AACzB,SAAS,qBAAqB;AAC9B,SAA6B,6BAA6B;AAC1D,SAAS,kBAAkB,8BAA8B;AACzD,SAAS,+BAA+B;AAExC,MAAM,eAAyD,CAAC,UAAU;AACxE,QAAM;AAAA,IACJ,kBAAkB,KAAK,uBAAuB;AAAA,IAC9C;AAAA,IACA,kBAAkB,EAAE,OAAO,IAAI,SAAS,SAAS;AAAA,EACnD,IAAI,cAAc,KAAK;AACvB,SACE,oBAAC;AAAA,IACC,eAAa,uBAAuB;AAAA,IACnC,GAAG;AAAA,IACH,GAAG;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IAEC,gBAAM;AAAA,GACT;AAEJ;AAEA,aAAa,cAAc;AAC3B,aAAa,YAAY;AACzB,MAAM,yBAAyB,SAAS,YAAY;AACpD,uBAAuB,YAAY;",
6
6
  "names": []
7
7
  }
@@ -1,5 +1,5 @@
1
1
  import * as React from "react";
2
- import { styled, css, XStyledWrapper } from "@elliemae/ds-system";
2
+ import { styled, css, xStyledCommonProps } from "@elliemae/ds-system";
3
3
  import { DSTypographyName, DSTypographyDataTestId } from "./DSTypographyDatatestId";
4
4
  const styleMap = {
5
5
  h1: {
@@ -77,7 +77,7 @@ const mapper = {
77
77
  line-height: ${styleMap.b4.lineHeight};
78
78
  `
79
79
  };
80
- const StyledTypography = styled(XStyledWrapper, {
80
+ const StyledTypography = styled("div", {
81
81
  name: DSTypographyName,
82
82
  slot: DSTypographyDataTestId.TYPOGRAPHY_ELEMENT
83
83
  }).withConfig({
@@ -87,8 +87,12 @@ const StyledTypography = styled(XStyledWrapper, {
87
87
  padding: 0;
88
88
  ${(props) => mapper[props.variant]}
89
89
  `;
90
+ const StyledTypographyWrapper = styled(StyledTypography)`
91
+ ${xStyledCommonProps}
92
+ `;
90
93
  export {
91
94
  StyledTypography,
95
+ StyledTypographyWrapper,
92
96
  styleMap
93
97
  };
94
98
  //# sourceMappingURL=styled.js.map
@@ -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, XStyledWrapper } from '@elliemae/ds-system';\nimport { DSTypographyName, DSTypographyDataTestId } from './DSTypographyDatatestId';\nimport type { DSTypographyT } from './react-desc-prop-types';\nimport type {} from '@xstyled/util';\nimport type {} from '@xstyled/system';\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 children: DSTypographyT.InternalProps['children'];\n};\n\nexport const StyledTypography = styled(XStyledWrapper, {\n name: DSTypographyName,\n slot: DSTypographyDataTestId.TYPOGRAPHY_ELEMENT,\n}).withConfig({\n shouldForwardProp: (prop, defaultValidatorFn) =>\n !['fontSize', 'color', 'as', 'variant'].includes(prop.toString()) && defaultValidatorFn(prop),\n})<StyleIProp>`\n margin: 0;\n padding: 0;\n ${(props: StyleIProp) => mapper[props.variant]}\n`;\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,QAAQ,KAAK,sBAAsB;AAC5C,SAAS,kBAAkB,8BAA8B;AAIlD,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;AAMO,MAAM,mBAAmB,OAAO,gBAAgB;AAAA,EACrD,MAAM;AAAA,EACN,MAAM,uBAAuB;AAC/B,CAAC,EAAE,WAAW;AAAA,EACZ,mBAAmB,CAAC,MAAM,uBACxB,CAAC,CAAC,YAAY,SAAS,MAAM,SAAS,EAAE,SAAS,KAAK,SAAS,CAAC,KAAK,mBAAmB,IAAI;AAChG,CAAC;AAAA;AAAA;AAAA,IAGG,CAAC,UAAsB,OAAO,MAAM;AAAA;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport { DSTypographyName, DSTypographyDataTestId } from './DSTypographyDatatestId';\nimport type { DSTypographyT } from './react-desc-prop-types';\nimport type {} from '@xstyled/util';\nimport type {} from '@xstyled/system';\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 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.toString()) && defaultValidatorFn(prop),\n})<StyleIProp>`\n margin: 0;\n padding: 0;\n ${(props: StyleIProp) => mapper[props.variant]}\n`;\n\nexport const StyledTypographyWrapper = styled(StyledTypography)`\n ${xStyledCommonProps}\n`;\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,QAAQ,KAAK,0BAA0B;AAChD,SAAS,kBAAkB,8BAA8B;AAIlD,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;AAMO,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,KAAK,SAAS,CAAC,KAAK,mBAAmB,IAAI;AAChG,CAAC;AAAA;AAAA;AAAA,IAGG,CAAC,UAAsB,OAAO,MAAM;AAAA;AAGjC,MAAM,0BAA0B,OAAO,gBAAgB;AAAA,IAC1D;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.12.0-rc.0",
3
+ "version": "3.12.0-rc.2",
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.12.0-rc.0",
39
- "@elliemae/ds-utilities": "3.12.0-rc.0"
38
+ "@elliemae/ds-system": "3.12.0-rc.2",
39
+ "@elliemae/ds-utilities": "3.12.0-rc.2"
40
40
  },
41
41
  "devDependencies": {
42
42
  "@testing-library/jest-dom": "~5.16.4",
@@ -48,7 +48,7 @@
48
48
  "peerDependencies": {
49
49
  "react": "^17.0.2",
50
50
  "react-dom": "^17.0.2",
51
- "styled-components": "^5.3.5"
51
+ "styled-components": "~5.3.6"
52
52
  },
53
53
  "publishConfig": {
54
54
  "access": "public",
@@ -60,6 +60,7 @@
60
60
  "lint": "node ../../scripts/lint.mjs",
61
61
  "eslint:fix": "eslint --ext='.js,.jsx,.test.js,.ts,.tsx' --fix --config='../../.eslintrc.js' src/",
62
62
  "dts": "node ../../scripts/dts.mjs",
63
+ "dev:build": "pnpm --filter {.}... build && pnpm --filter {.}... dts",
63
64
  "build": "cross-env NODE_ENV=production node ../../scripts/build/build.mjs"
64
65
  }
65
66
  }