@elliemae/ds-typography 3.15.0 → 3.16.0-next.10

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.
Files changed (31) hide show
  1. package/dist/cjs/Typography.js +6 -6
  2. package/dist/cjs/Typography.js.map +2 -2
  3. package/dist/cjs/config/useDefaultProps.js.map +1 -1
  4. package/dist/cjs/config/useTypography.js +8 -8
  5. package/dist/cjs/config/useTypography.js.map +2 -2
  6. package/dist/cjs/index.js +1 -1
  7. package/dist/cjs/index.js.map +2 -2
  8. package/dist/cjs/package.json +7 -0
  9. package/dist/cjs/react-desc-prop-types.js +7 -7
  10. package/dist/cjs/react-desc-prop-types.js.map +2 -2
  11. package/dist/cjs/styled.js +1 -1
  12. package/dist/cjs/styled.js.map +1 -1
  13. package/dist/esm/Typography.js +5 -5
  14. package/dist/esm/Typography.js.map +1 -1
  15. package/dist/esm/config/useDefaultProps.js.map +1 -1
  16. package/dist/esm/config/useTypography.js +4 -4
  17. package/dist/esm/config/useTypography.js.map +2 -2
  18. package/dist/esm/index.js +1 -1
  19. package/dist/esm/index.js.map +2 -2
  20. package/dist/esm/package.json +7 -0
  21. package/dist/esm/react-desc-prop-types.js +1 -1
  22. package/dist/esm/react-desc-prop-types.js.map +2 -2
  23. package/dist/esm/styled.js +1 -1
  24. package/dist/esm/styled.js.map +1 -1
  25. package/dist/types/Typography.d.ts +2 -2
  26. package/dist/types/config/useDefaultProps.d.ts +1 -1
  27. package/dist/types/config/useTypography.d.ts +2 -2
  28. package/dist/types/index.d.ts +1 -1
  29. package/dist/types/react-desc-prop-types.d.ts +1 -1
  30. package/dist/types/styled.d.ts +1 -1
  31. package/package.json +5 -4
package/dist/cjs/Typography.js CHANGED
@@ -30,11 +30,11 @@ __export(Typography_exports, {
30
30
  module.exports = __toCommonJS(Typography_exports);
31
31
  var React = __toESM(require("react"));
32
32
  var import_jsx_runtime = require("react/jsx-runtime");
33
- var import_ds_utilities = require("@elliemae/ds-utilities");
34
- var import_useTypography = require("./config/useTypography");
35
- var import_react_desc_prop_types = require("./react-desc-prop-types");
36
- var import_DSTypographyDatatestId = require("./DSTypographyDatatestId");
37
- var import_styled = require("./styled");
33
+ var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
34
+ var import_useTypography = require("./config/useTypography.js");
35
+ var import_react_desc_prop_types = require("./react-desc-prop-types.js");
36
+ var import_DSTypographyDatatestId = require("./DSTypographyDatatestId.js");
37
+ var import_styled = require("./styled.js");
38
38
  const DSTypography = (props) => {
39
39
  const {
40
40
  globalAttributes: { ...othersGlobalAttributes },
@@ -57,6 +57,6 @@ const DSTypography = (props) => {
57
57
  };
58
58
  DSTypography.displayName = import_DSTypographyDatatestId.DSTypographyName;
59
59
  DSTypography.propTypes = import_react_desc_prop_types.DSTypographyPropTypes;
60
- const DSTypographyWithSchema = (0, import_ds_utilities.describe)(DSTypography);
60
+ const DSTypographyWithSchema = (0, import_ds_props_helpers.describe)(DSTypography);
61
61
  DSTypographyWithSchema.propTypes = import_react_desc_prop_types.DSTypographyPropTypes;
62
62
  //# sourceMappingURL=Typography.js.map
package/dist/cjs/Typography.js.map CHANGED
@@ -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.FC<DSTypographyT.Props> = (props) => {\n const {\n globalAttributes: { ...othersGlobalAttributes },\n xstyledProps,\n propsWithDefault: { color, as, component, variant, fontSize, innerRef },\n } = useTypography(props);\n return (\n <StyledTypography\n data-testid={DSTypographyDataTestId.TYPOGRAPHY_ELEMENT}\n {...othersGlobalAttributes}\n {...xstyledProps}\n as={as || component}\n variant={variant}\n fontSize={fontSize}\n ref={innerRef}\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,eAA8C,CAAC,UAAU;AAC7D,QAAM;AAAA,IACJ,kBAAkB,KAAK,uBAAuB;AAAA,IAC9C;AAAA,IACA,kBAAkB,EAAE,OAAO,IAAI,WAAW,SAAS,UAAU,SAAS;AAAA,EACxE,QAAI,oCAAc,KAAK;AACvB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,qDAAuB;AAAA,MACnC,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,IAAI,MAAM;AAAA,MACV;AAAA,MACA;AAAA,MACA,KAAK;AAAA,MAEJ,gBAAM;AAAA;AAAA,EACT;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-props-helpers';\nimport { useTypography } from './config/useTypography.js';\nimport { type DSTypographyT, DSTypographyPropTypes } from './react-desc-prop-types.js';\nimport { DSTypographyName, DSTypographyDataTestId } from './DSTypographyDatatestId.js';\nimport { StyledTypography } from './styled.js';\n\nconst DSTypography: React.FC<DSTypographyT.Props> = (props) => {\n const {\n globalAttributes: { ...othersGlobalAttributes },\n xstyledProps,\n propsWithDefault: { color, as, component, variant, fontSize, innerRef },\n } = useTypography(props);\n return (\n <StyledTypography\n data-testid={DSTypographyDataTestId.TYPOGRAPHY_ELEMENT}\n {...othersGlobalAttributes}\n {...xstyledProps}\n as={as || component}\n variant={variant}\n fontSize={fontSize}\n ref={innerRef}\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,8BAAyB;AACzB,2BAA8B;AAC9B,mCAA0D;AAC1D,oCAAyD;AACzD,oBAAiC;AAEjC,MAAM,eAA8C,CAAC,UAAU;AAC7D,QAAM;AAAA,IACJ,kBAAkB,KAAK,uBAAuB;AAAA,IAC9C;AAAA,IACA,kBAAkB,EAAE,OAAO,IAAI,WAAW,SAAS,UAAU,SAAS;AAAA,EACxE,QAAI,oCAAc,KAAK;AACvB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,qDAAuB;AAAA,MACnC,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,IAAI,MAAM;AAAA,MACV;AAAA,MACA;AAAA,MACA,KAAK;AAAA,MAEJ,gBAAM;AAAA;AAAA,EACT;AAEJ;AAEA,aAAa,cAAc;AAC3B,aAAa,YAAY;AACzB,MAAM,6BAAyB,kCAAS,YAAY;AACpD,uBAAuB,YAAY;",
6
6
  "names": []
7
7
  }
package/dist/cjs/config/useDefaultProps.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/config/useDefaultProps.ts", "../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["import React from 'react';\nimport type { DSTypographyT } from '../react-desc-prop-types';\n\nconst VariantToAsMap: Record<DSTypographyT.Props['variant'], keyof JSX.IntrinsicElements> = {\n h1: 'h1',\n h2: 'h2',\n h3: 'h3',\n h4: 'h4',\n h5: 'h5',\n b1: 'p',\n b2: 'p',\n b3: 'p',\n b4: 'p',\n button: 'button',\n link: 'a',\n};\nexport const useDefaultProps = ({ variant, as: userAs }: DSTypographyT.Props): { as: keyof JSX.IntrinsicElements } => {\n const defaultAs = userAs || VariantToAsMap[variant];\n const defaultProps = React.useMemo(() => ({ as: defaultAs }), [defaultAs]);\n return defaultProps;\n};\n", "import * as React from 'react';\nexport { React };\n"],
4
+ "sourcesContent": ["import React from 'react';\nimport type { DSTypographyT } from '../react-desc-prop-types.js';\n\nconst VariantToAsMap: Record<DSTypographyT.Props['variant'], keyof JSX.IntrinsicElements> = {\n h1: 'h1',\n h2: 'h2',\n h3: 'h3',\n h4: 'h4',\n h5: 'h5',\n b1: 'p',\n b2: 'p',\n b3: 'p',\n b4: 'p',\n button: 'button',\n link: 'a',\n};\nexport const useDefaultProps = ({ variant, as: userAs }: DSTypographyT.Props): { as: keyof JSX.IntrinsicElements } => {\n const defaultAs = userAs || VariantToAsMap[variant];\n const defaultProps = React.useMemo(() => ({ as: defaultAs }), [defaultAs]);\n return defaultProps;\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
5
  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAGlB,MAAM,iBAAsF;AAAA,EAC1F,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,QAAQ;AAAA,EACR,MAAM;AACR;AACO,MAAM,kBAAkB,CAAC,EAAE,SAAS,IAAI,OAAO,MAAgE;AACpH,QAAM,YAAY,UAAU,eAAe;AAC3C,QAAM,eAAe,aAAAA,QAAM,QAAQ,OAAO,EAAE,IAAI,UAAU,IAAI,CAAC,SAAS,CAAC;AACzE,SAAO;AACT;",
6
6
  "names": ["React"]
7
7
  }
package/dist/cjs/config/useTypography.js CHANGED
@@ -29,16 +29,16 @@ __export(useTypography_exports, {
29
29
  module.exports = __toCommonJS(useTypography_exports);
30
30
  var React = __toESM(require("react"));
31
31
  var import_react = __toESM(require("react"));
32
- var import_ds_utilities = require("@elliemae/ds-utilities");
33
- var import_react_desc_prop_types = require("../react-desc-prop-types");
34
- var import_useDefaultProps = require("./useDefaultProps");
35
- var import_DSTypographyDatatestId = require("../DSTypographyDatatestId");
32
+ var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
33
+ var import_react_desc_prop_types = require("../react-desc-prop-types.js");
34
+ var import_useDefaultProps = require("./useDefaultProps.js");
35
+ var import_DSTypographyDatatestId = require("../DSTypographyDatatestId.js");
36
36
  const useTypography = (props) => {
37
- (0, import_ds_utilities.useValidateTypescriptPropTypes)(props, import_react_desc_prop_types.DSTypographyPropTypes, import_DSTypographyDatatestId.DSTypographyName);
37
+ (0, import_ds_props_helpers.useValidateTypescriptPropTypes)(props, import_react_desc_prop_types.DSTypographyPropTypes, import_DSTypographyDatatestId.DSTypographyName);
38
38
  const defaultProps = (0, import_useDefaultProps.useDefaultProps)(props);
39
- const propsWithDefault = (0, import_ds_utilities.useMemoMergePropsWithDefault)(props, defaultProps);
40
- const globalAttributes = (0, import_ds_utilities.useGetGlobalAttributes)(propsWithDefault);
41
- const xstyledProps = (0, import_ds_utilities.useGetXstyledProps)(propsWithDefault);
39
+ const propsWithDefault = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(props, defaultProps);
40
+ const globalAttributes = (0, import_ds_props_helpers.useGetGlobalAttributes)(propsWithDefault);
41
+ const xstyledProps = (0, import_ds_props_helpers.useGetXstyledProps)(propsWithDefault);
42
42
  return import_react.default.useMemo(
43
43
  () => ({ propsWithDefault, globalAttributes, xstyledProps }),
44
44
  [globalAttributes, propsWithDefault, xstyledProps]
package/dist/cjs/config/useTypography.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/config/useTypography.ts", "../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["import React from 'react';\nimport type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-utilities';\nimport {\n useGetGlobalAttributes,\n useGetXstyledProps,\n useMemoMergePropsWithDefault,\n useValidateTypescriptPropTypes,\n} from '@elliemae/ds-utilities';\n\nimport type { DSTypographyT } from '../react-desc-prop-types';\nimport { DSTypographyPropTypes } from '../react-desc-prop-types';\nimport { useDefaultProps } from './useDefaultProps';\nimport { DSTypographyName } from '../DSTypographyDatatestId';\n\ninterface UseTypographyT {\n propsWithDefault: DSTypographyT.InternalProps;\n globalAttributes: GlobalAttributesT;\n xstyledProps: XstyledProps;\n}\n\nexport const useTypography = (props: DSTypographyT.Props): UseTypographyT => {\n useValidateTypescriptPropTypes(props, DSTypographyPropTypes, DSTypographyName);\n const defaultProps = useDefaultProps(props);\n const propsWithDefault = useMemoMergePropsWithDefault<DSTypographyT.InternalProps>(props, defaultProps);\n const globalAttributes = useGetGlobalAttributes(propsWithDefault);\n\n const xstyledProps = useGetXstyledProps(propsWithDefault);\n return React.useMemo(\n () => ({ propsWithDefault, globalAttributes, xstyledProps }),\n [globalAttributes, propsWithDefault, xstyledProps],\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAElB,0BAKO;AAGP,mCAAsC;AACtC,6BAAgC;AAChC,oCAAiC;AAQ1B,MAAM,gBAAgB,CAAC,UAA+C;AAC3E,0DAA+B,OAAO,oDAAuB,8CAAgB;AAC7E,QAAM,mBAAe,wCAAgB,KAAK;AAC1C,QAAM,uBAAmB,kDAA0D,OAAO,YAAY;AACtG,QAAM,uBAAmB,4CAAuB,gBAAgB;AAEhE,QAAM,mBAAe,wCAAmB,gBAAgB;AACxD,SAAO,aAAAA,QAAM;AAAA,IACX,OAAO,EAAE,kBAAkB,kBAAkB,aAAa;AAAA,IAC1D,CAAC,kBAAkB,kBAAkB,YAAY;AAAA,EACnD;AACF;",
4
+ "sourcesContent": ["import React from 'react';\nimport type {} from '@elliemae/ds-utilities';\nimport type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';\nimport {\n useGetGlobalAttributes,\n useGetXstyledProps,\n useMemoMergePropsWithDefault,\n useValidateTypescriptPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport type { DSTypographyT } from '../react-desc-prop-types.js';\nimport { DSTypographyPropTypes } from '../react-desc-prop-types.js';\nimport { useDefaultProps } from './useDefaultProps.js';\nimport { DSTypographyName } from '../DSTypographyDatatestId.js';\n\ninterface UseTypographyT {\n propsWithDefault: DSTypographyT.InternalProps;\n globalAttributes: GlobalAttributesT;\n xstyledProps: XstyledProps;\n}\n\nexport const useTypography = (props: DSTypographyT.Props): UseTypographyT => {\n useValidateTypescriptPropTypes(props, DSTypographyPropTypes, DSTypographyName);\n const defaultProps = useDefaultProps(props);\n const propsWithDefault = useMemoMergePropsWithDefault<DSTypographyT.InternalProps>(props, defaultProps);\n const globalAttributes = useGetGlobalAttributes(propsWithDefault);\n\n const xstyledProps = useGetXstyledProps(propsWithDefault);\n return React.useMemo(\n () => ({ propsWithDefault, globalAttributes, xstyledProps }),\n [globalAttributes, propsWithDefault, xstyledProps],\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAGlB,8BAKO;AAEP,mCAAsC;AACtC,6BAAgC;AAChC,oCAAiC;AAQ1B,MAAM,gBAAgB,CAAC,UAA+C;AAC3E,8DAA+B,OAAO,oDAAuB,8CAAgB;AAC7E,QAAM,mBAAe,wCAAgB,KAAK;AAC1C,QAAM,uBAAmB,sDAA0D,OAAO,YAAY;AACtG,QAAM,uBAAmB,gDAAuB,gBAAgB;AAEhE,QAAM,mBAAe,4CAAmB,gBAAgB;AACxD,SAAO,aAAAA,QAAM;AAAA,IACX,OAAO,EAAE,kBAAkB,kBAAkB,aAAa;AAAA,IAC1D,CAAC,kBAAkB,kBAAkB,YAAY;AAAA,EACnD;AACF;",
6
6
  "names": ["React"]
7
7
  }
package/dist/cjs/index.js CHANGED
@@ -29,5 +29,5 @@ __export(src_exports, {
29
29
  });
30
30
  module.exports = __toCommonJS(src_exports);
31
31
  var React = __toESM(require("react"));
32
- var import_Typography = require("./Typography");
32
+ var import_Typography = require("./Typography.js");
33
33
  //# sourceMappingURL=index.js.map
package/dist/cjs/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/index.ts", "../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["export { DSTypography, DSTypographyWithSchema } from './Typography';\nimport type {} from '@xstyled/util';\nimport type {} from '@xstyled/system';\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,wBAAqD;",
4
+ "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';\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIvB,wBAAqD;",
6
6
  "names": []
7
7
  }
package/dist/cjs/package.json ADDED
@@ -0,0 +1,7 @@
1
+ {
2
+ "type": "commonjs",
3
+ "sideEffects": [
4
+ "*.css",
5
+ "*.scss"
6
+ ]
7
+ }
package/dist/cjs/react-desc-prop-types.js CHANGED
@@ -28,11 +28,11 @@ __export(react_desc_prop_types_exports, {
28
28
  });
29
29
  module.exports = __toCommonJS(react_desc_prop_types_exports);
30
30
  var React = __toESM(require("react"));
31
- var import_ds_utilities = require("@elliemae/ds-utilities");
31
+ var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
32
32
  const DSTypographyPropTypes = {
33
- ...import_ds_utilities.globalAttributesPropTypes,
34
- ...import_ds_utilities.xstyledPropTypes,
35
- variant: import_ds_utilities.PropTypes.oneOf(["h1", "h2", "h3", "h4", "h5", "b1", "b2", "b3", "b4", "button", "link"]).description(
33
+ ...import_ds_props_helpers.globalAttributesPropTypes,
34
+ ...import_ds_props_helpers.xstyledPropTypes,
35
+ variant: import_ds_props_helpers.PropTypes.oneOf(["h1", "h2", "h3", "h4", "h5", "b1", "b2", "b3", "b4", "button", "link"]).description(
36
36
  `
37
37
  render the default style based on the variant and the default mapping HTML tag:
38
38
  Variant to HTML Tag
@@ -49,9 +49,9 @@ const DSTypographyPropTypes = {
49
49
  link => <a />
50
50
  `
51
51
  ).isRequired,
52
- children: import_ds_utilities.PropTypes.node.description("Children element").isRequired,
53
- as: import_ds_utilities.PropTypes.string.description("Use to override the printed HTML tag, ex: `span` or `strong`"),
54
- component: import_ds_utilities.PropTypes.string.description(
52
+ children: import_ds_props_helpers.PropTypes.node.description("Children element").isRequired,
53
+ as: import_ds_props_helpers.PropTypes.string.description("Use to override the printed HTML tag, ex: `span` or `strong`"),
54
+ component: import_ds_props_helpers.PropTypes.string.description(
55
55
  "Same as `as` for internal use. Use to override the printed HTML tag, ex: `span` or `strong`"
56
56
  )
57
57
  };
package/dist/cjs/react-desc-prop-types.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/react-desc-prop-types.tsx", "../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["import type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-utilities';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-utilities';\nimport type { FontSizeProps, LineHeightProps, ColorProps } from '@elliemae/ds-system';\nimport type { WeakValidationMap } from 'react';\n\nexport declare namespace DSTypographyT {\n type Ivariant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'b1' | 'b2' | 'b3' | 'b4' | 'button' | 'link';\n interface IProps {\n variant: Ivariant;\n as?: keyof JSX.IntrinsicElements;\n component?: keyof JSX.IntrinsicElements;\n children: React.ReactNode | React.ReactNode[];\n innerRef?: React.RefObject<HTMLElement>;\n }\n\n export interface Props\n extends IProps,\n Omit<GlobalAttributesT<HTMLElement>, keyof IProps | 'color'>,\n XstyledProps,\n FontSizeProps,\n LineHeightProps,\n ColorProps,\n Record<string, unknown> {}\n export interface InternalProps extends Props {\n as: keyof JSX.IntrinsicElements;\n }\n}\n\nexport const DSTypographyPropTypes = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n variant: PropTypes.oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'b1', 'b2', 'b3', 'b4', 'button', 'link']).description(\n `\n render the default style based on the variant and the default mapping HTML tag:\n Variant to HTML Tag\n h1 => <h1 />\n h2 => <h2 />\n h3 => <h3 />\n h4 => <h4 />\n h5 => <h5 />\n b1 => <p />\n b2 => <p />\n b3 => <p />\n b4 => <p />\n button => <button />\n link => <a />\n `,\n ).isRequired,\n children: PropTypes.node.description('Children element').isRequired,\n as: PropTypes.string.description('Use to override the printed HTML tag, ex: `span` or `strong`'),\n component: PropTypes.string.description(\n 'Same as `as` for internal use. Use to override the printed HTML tag, ex: `span` or `strong`',\n ),\n} as WeakValidationMap<unknown>;\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,0BAAuE;AA2BhE,MAAM,wBAAwB;AAAA,EACnC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,SAAS,8BAAU,MAAM,CAAC,MAAM,MAAM,MAAM,MAAM,MAAM,MAAM,MAAM,MAAM,MAAM,UAAU,MAAM,CAAC,EAAE;AAAA,IACjG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAeF,EAAE;AAAA,EACF,UAAU,8BAAU,KAAK,YAAY,kBAAkB,EAAE;AAAA,EACzD,IAAI,8BAAU,OAAO,YAAY,8DAA8D;AAAA,EAC/F,WAAW,8BAAU,OAAO;AAAA,IAC1B;AAAA,EACF;AACF;",
4
+ "sourcesContent": ["import type {} from '@elliemae/ds-utilities';\nimport type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport type { FontSizeProps, LineHeightProps, ColorProps } from '@elliemae/ds-system';\nimport type { WeakValidationMap } from 'react';\n\nexport declare namespace DSTypographyT {\n type Ivariant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'b1' | 'b2' | 'b3' | 'b4' | 'button' | 'link';\n interface IProps {\n variant: Ivariant;\n as?: keyof JSX.IntrinsicElements;\n component?: keyof JSX.IntrinsicElements;\n children: React.ReactNode | React.ReactNode[];\n innerRef?: React.RefObject<HTMLElement>;\n }\n\n export interface Props\n extends IProps,\n Omit<GlobalAttributesT<HTMLElement>, keyof IProps | 'color'>,\n XstyledProps,\n FontSizeProps,\n LineHeightProps,\n ColorProps,\n Record<string, unknown> {}\n export interface InternalProps extends Props {\n as: keyof JSX.IntrinsicElements;\n }\n}\n\nexport const DSTypographyPropTypes = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n variant: PropTypes.oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'b1', 'b2', 'b3', 'b4', 'button', 'link']).description(\n `\n render the default style based on the variant and the default mapping HTML tag:\n Variant to HTML Tag\n h1 => <h1 />\n h2 => <h2 />\n h3 => <h3 />\n h4 => <h4 />\n h5 => <h5 />\n b1 => <p />\n b2 => <p />\n b3 => <p />\n b4 => <p />\n button => <button />\n link => <a />\n `,\n ).isRequired,\n children: PropTypes.node.description('Children element').isRequired,\n as: PropTypes.string.description('Use to override the printed HTML tag, ex: `span` or `strong`'),\n component: PropTypes.string.description(\n 'Same as `as` for internal use. Use to override the printed HTML tag, ex: `span` or `strong`',\n ),\n} as WeakValidationMap<unknown>;\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,8BAAuE;AA2BhE,MAAM,wBAAwB;AAAA,EACnC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,SAAS,kCAAU,MAAM,CAAC,MAAM,MAAM,MAAM,MAAM,MAAM,MAAM,MAAM,MAAM,MAAM,UAAU,MAAM,CAAC,EAAE;AAAA,IACjG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAeF,EAAE;AAAA,EACF,UAAU,kCAAU,KAAK,YAAY,kBAAkB,EAAE;AAAA,EACzD,IAAI,kCAAU,OAAO,YAAY,8DAA8D;AAAA,EAC/F,WAAW,kCAAU,OAAO;AAAA,IAC1B;AAAA,EACF;AACF;",
6
6
  "names": []
7
7
  }
package/dist/cjs/styled.js CHANGED
@@ -31,7 +31,7 @@ __export(styled_exports, {
31
31
  module.exports = __toCommonJS(styled_exports);
32
32
  var React = __toESM(require("react"));
33
33
  var import_ds_system = require("@elliemae/ds-system");
34
- var import_DSTypographyDatatestId = require("./DSTypographyDatatestId");
34
+ var import_DSTypographyDatatestId = require("./DSTypographyDatatestId.js");
35
35
  const styleMap = {
36
36
  h1: {
37
37
  fontSize: "2.62rem",
package/dist/cjs/styled.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/styled.ts", "../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["/* eslint-disable max-lines */\nimport { styled, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport type { DSTypographyT } from './react-desc-prop-types';\nimport { DSTypographyName, DSTypographyDataTestId } from './DSTypographyDatatestId';\n\nexport const styleMap = {\n h1: {\n fontSize: '2.62rem',\n lineHeight: '3.15rem',\n },\n h2: {\n fontSize: '1.85rem',\n lineHeight: '2.38rem',\n },\n h3: {\n fontSize: '1.38rem',\n lineHeight: '1.69rem',\n },\n h4: {\n fontSize: '1.23rem',\n lineHeight: '1.54rem',\n },\n h5: {\n fontSize: '1.08rem',\n lineHeight: '1.31rem',\n },\n b1: {\n fontSize: '1.08rem',\n lineHeight: '1.38rem',\n },\n b2: {\n fontSize: '1rem',\n lineHeight: '1.31rem',\n },\n b3: {\n fontSize: '0.92rem',\n lineHeight: '1.23rem',\n },\n b4: {\n fontSize: '0.85rem',\n lineHeight: '1rem',\n },\n button: {\n fontSize: '1rem',\n lineHeight: '1.85rem',\n },\n link: {\n fontSize: '1rem',\n lineHeight: '1.85rem',\n },\n};\n\nexport const styleMapMobile = {\n h1: { fontSize: '2.12875rem', lineHeight: '2.5593749999999997rem' },\n h2: { fontSize: '1.503125rem', lineHeight: '1.9337499999999999rem' },\n h3: { fontSize: '1.1212499999999999rem', lineHeight: '1.373125rem' },\n h4: { fontSize: '0.999375rem', lineHeight: '1.25125rem' },\n h5: { fontSize: '0.8775000000000001rem', lineHeight: '1.064375rem' },\n b1: { fontSize: '0.8775000000000001rem', lineHeight: '1.1212499999999999rem' },\n b2: { fontSize: '0.8125rem', lineHeight: '1.064375rem' },\n b3: { fontSize: '0.7475rem', lineHeight: '0.999375rem' },\n b4: { fontSize: '0.6906249999999999rem', lineHeight: '0.8125rem' },\n button: { fontSize: '0.8125rem', lineHeight: '1.503125rem' },\n link: { fontSize: '0.8125rem', lineHeight: '1.503125rem' },\n};\n\ntype StyleIProp = DSTypographyT.InternalProps & {\n children: DSTypographyT.InternalProps['children'];\n};\n\nconst mapper = {\n h1: css<StyleIProp>`\n font-size: ${(props) => props.fontSize ?? styleMapMobile.h1.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMapMobile.h1.lineHeight};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? styleMap.h1.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMap.h1.lineHeight};\n }\n `,\n h2: css<StyleIProp>`\n font-size: ${(props) => props.fontSize ?? styleMapMobile.h2.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMapMobile.h2.lineHeight};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? styleMap.h2.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMap.h2.lineHeight};\n }\n `,\n h3: css<StyleIProp>`\n font-size: ${(props) => props.fontSize ?? styleMapMobile.h3.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMapMobile.h3.lineHeight};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? styleMap.h3.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMap.h3.lineHeight};\n }\n `,\n h4: css<StyleIProp>`\n font-size: ${(props) => props.fontSize ?? styleMapMobile.h4.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMapMobile.h4.lineHeight};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? styleMap.h4.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMap.h4.lineHeight};\n }\n `,\n h5: css<StyleIProp>`\n font-size: ${(props) => props.fontSize ?? styleMapMobile.h5.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMapMobile.h5.lineHeight};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? styleMap.h5.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMap.h5.lineHeight};\n }\n `,\n b1: css<StyleIProp>`\n font-size: ${(props) => props.fontSize ?? styleMapMobile.b1.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMapMobile.b1.lineHeight};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? styleMap.b1.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMap.b1.lineHeight};\n }\n `,\n b2: css<StyleIProp>`\n font-size: ${(props) => props.fontSize ?? styleMapMobile.b2.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMapMobile.b2.lineHeight};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? styleMap.b2.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMap.b2.lineHeight};\n }\n `,\n b3: css<StyleIProp>`\n font-size: ${(props) => props.fontSize ?? styleMapMobile.b3.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMapMobile.b3.lineHeight};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? styleMap.b3.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMap.b3.lineHeight};\n }\n `,\n b4: css<StyleIProp>`\n font-size: ${(props) => props.fontSize ?? styleMapMobile.b4.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMapMobile.b4.lineHeight};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? styleMap.b4.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMap.b4.lineHeight};\n }\n `,\n button: css<StyleIProp>`\n font-size: ${(props) => props.fontSize ?? styleMapMobile.button.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMapMobile.button.lineHeight};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? styleMap.button.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMap.button.lineHeight};\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 link: css<StyleIProp>`\n font-size: ${(props) => props.fontSize ?? styleMapMobile.button.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMapMobile.button.lineHeight};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? styleMap.button.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMap.button.lineHeight};\n }\n text-decoration: underline;\n color: ${(props) => props.theme.colors.brand[600]};\n display: inline-block;\n text-align: left;\n cursor: pointer;\n &:hover {\n color: ${(props) => props.theme.colors.brand[700]};\n }\n &:active {\n color: ${(props) => props.theme.colors.brand[800]};\n }\n &:focus {\n color: ${(props) => props.theme.colors.brand[700]};\n }\n `,\n};\n\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(String(prop)) && defaultValidatorFn(prop),\n})<StyleIProp>`\n margin: 0;\n padding: 0;\n ${(props: StyleIProp) => mapper[props.variant]}\n ${xStyledCommonProps}\n`;\n", "import * as React from 'react';\nexport { React };\n"],
4
+ "sourcesContent": ["/* eslint-disable max-lines */\nimport { styled, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport type { DSTypographyT } from './react-desc-prop-types.js';\nimport { DSTypographyName, DSTypographyDataTestId } from './DSTypographyDatatestId.js';\n\nexport const styleMap = {\n h1: {\n fontSize: '2.62rem',\n lineHeight: '3.15rem',\n },\n h2: {\n fontSize: '1.85rem',\n lineHeight: '2.38rem',\n },\n h3: {\n fontSize: '1.38rem',\n lineHeight: '1.69rem',\n },\n h4: {\n fontSize: '1.23rem',\n lineHeight: '1.54rem',\n },\n h5: {\n fontSize: '1.08rem',\n lineHeight: '1.31rem',\n },\n b1: {\n fontSize: '1.08rem',\n lineHeight: '1.38rem',\n },\n b2: {\n fontSize: '1rem',\n lineHeight: '1.31rem',\n },\n b3: {\n fontSize: '0.92rem',\n lineHeight: '1.23rem',\n },\n b4: {\n fontSize: '0.85rem',\n lineHeight: '1rem',\n },\n button: {\n fontSize: '1rem',\n lineHeight: '1.85rem',\n },\n link: {\n fontSize: '1rem',\n lineHeight: '1.85rem',\n },\n};\n\nexport const styleMapMobile = {\n h1: { fontSize: '2.12875rem', lineHeight: '2.5593749999999997rem' },\n h2: { fontSize: '1.503125rem', lineHeight: '1.9337499999999999rem' },\n h3: { fontSize: '1.1212499999999999rem', lineHeight: '1.373125rem' },\n h4: { fontSize: '0.999375rem', lineHeight: '1.25125rem' },\n h5: { fontSize: '0.8775000000000001rem', lineHeight: '1.064375rem' },\n b1: { fontSize: '0.8775000000000001rem', lineHeight: '1.1212499999999999rem' },\n b2: { fontSize: '0.8125rem', lineHeight: '1.064375rem' },\n b3: { fontSize: '0.7475rem', lineHeight: '0.999375rem' },\n b4: { fontSize: '0.6906249999999999rem', lineHeight: '0.8125rem' },\n button: { fontSize: '0.8125rem', lineHeight: '1.503125rem' },\n link: { fontSize: '0.8125rem', lineHeight: '1.503125rem' },\n};\n\ntype StyleIProp = DSTypographyT.InternalProps & {\n children: DSTypographyT.InternalProps['children'];\n};\n\nconst mapper = {\n h1: css<StyleIProp>`\n font-size: ${(props) => props.fontSize ?? styleMapMobile.h1.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMapMobile.h1.lineHeight};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? styleMap.h1.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMap.h1.lineHeight};\n }\n `,\n h2: css<StyleIProp>`\n font-size: ${(props) => props.fontSize ?? styleMapMobile.h2.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMapMobile.h2.lineHeight};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? styleMap.h2.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMap.h2.lineHeight};\n }\n `,\n h3: css<StyleIProp>`\n font-size: ${(props) => props.fontSize ?? styleMapMobile.h3.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMapMobile.h3.lineHeight};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? styleMap.h3.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMap.h3.lineHeight};\n }\n `,\n h4: css<StyleIProp>`\n font-size: ${(props) => props.fontSize ?? styleMapMobile.h4.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMapMobile.h4.lineHeight};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? styleMap.h4.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMap.h4.lineHeight};\n }\n `,\n h5: css<StyleIProp>`\n font-size: ${(props) => props.fontSize ?? styleMapMobile.h5.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMapMobile.h5.lineHeight};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? styleMap.h5.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMap.h5.lineHeight};\n }\n `,\n b1: css<StyleIProp>`\n font-size: ${(props) => props.fontSize ?? styleMapMobile.b1.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMapMobile.b1.lineHeight};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? styleMap.b1.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMap.b1.lineHeight};\n }\n `,\n b2: css<StyleIProp>`\n font-size: ${(props) => props.fontSize ?? styleMapMobile.b2.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMapMobile.b2.lineHeight};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? styleMap.b2.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMap.b2.lineHeight};\n }\n `,\n b3: css<StyleIProp>`\n font-size: ${(props) => props.fontSize ?? styleMapMobile.b3.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMapMobile.b3.lineHeight};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? styleMap.b3.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMap.b3.lineHeight};\n }\n `,\n b4: css<StyleIProp>`\n font-size: ${(props) => props.fontSize ?? styleMapMobile.b4.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMapMobile.b4.lineHeight};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? styleMap.b4.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMap.b4.lineHeight};\n }\n `,\n button: css<StyleIProp>`\n font-size: ${(props) => props.fontSize ?? styleMapMobile.button.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMapMobile.button.lineHeight};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? styleMap.button.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMap.button.lineHeight};\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 link: css<StyleIProp>`\n font-size: ${(props) => props.fontSize ?? styleMapMobile.button.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMapMobile.button.lineHeight};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? styleMap.button.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMap.button.lineHeight};\n }\n text-decoration: underline;\n color: ${(props) => props.theme.colors.brand[600]};\n display: inline-block;\n text-align: left;\n cursor: pointer;\n &:hover {\n color: ${(props) => props.theme.colors.brand[700]};\n }\n &:active {\n color: ${(props) => props.theme.colors.brand[800]};\n }\n &:focus {\n color: ${(props) => props.theme.colors.brand[700]};\n }\n `,\n};\n\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(String(prop)) && defaultValidatorFn(prop),\n})<StyleIProp>`\n margin: 0;\n padding: 0;\n ${(props: StyleIProp) => mapper[props.variant]}\n ${xStyledCommonProps}\n`;\n", "import * as React from 'react';\nexport { React };\n"],
5
5
  "mappings": "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",
6
6
  "names": []
7
7
  }
package/dist/esm/Typography.js CHANGED
@@ -1,10 +1,10 @@
1
1
  import * as React from "react";
2
2
  import { jsx } from "react/jsx-runtime";
3
- import { describe } from "@elliemae/ds-utilities";
4
- import { useTypography } from "./config/useTypography";
5
- import { DSTypographyPropTypes } from "./react-desc-prop-types";
6
- import { DSTypographyName, DSTypographyDataTestId } from "./DSTypographyDatatestId";
7
- import { StyledTypography } from "./styled";
3
+ import { describe } from "@elliemae/ds-props-helpers";
4
+ import { useTypography } from "./config/useTypography.js";
5
+ import { DSTypographyPropTypes } from "./react-desc-prop-types.js";
6
+ import { DSTypographyName, DSTypographyDataTestId } from "./DSTypographyDatatestId.js";
7
+ import { StyledTypography } from "./styled.js";
8
8
  const DSTypography = (props) => {
9
9
  const {
10
10
  globalAttributes: { ...othersGlobalAttributes },
package/dist/esm/Typography.js.map CHANGED
@@ -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.FC<DSTypographyT.Props> = (props) => {\n const {\n globalAttributes: { ...othersGlobalAttributes },\n xstyledProps,\n propsWithDefault: { color, as, component, variant, fontSize, innerRef },\n } = useTypography(props);\n return (\n <StyledTypography\n data-testid={DSTypographyDataTestId.TYPOGRAPHY_ELEMENT}\n {...othersGlobalAttributes}\n {...xstyledProps}\n as={as || component}\n variant={variant}\n fontSize={fontSize}\n ref={innerRef}\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"],
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { useTypography } from './config/useTypography.js';\nimport { type DSTypographyT, DSTypographyPropTypes } from './react-desc-prop-types.js';\nimport { DSTypographyName, DSTypographyDataTestId } from './DSTypographyDatatestId.js';\nimport { StyledTypography } from './styled.js';\n\nconst DSTypography: React.FC<DSTypographyT.Props> = (props) => {\n const {\n globalAttributes: { ...othersGlobalAttributes },\n xstyledProps,\n propsWithDefault: { color, as, component, variant, fontSize, innerRef },\n } = useTypography(props);\n return (\n <StyledTypography\n data-testid={DSTypographyDataTestId.TYPOGRAPHY_ELEMENT}\n {...othersGlobalAttributes}\n {...xstyledProps}\n as={as || component}\n variant={variant}\n fontSize={fontSize}\n ref={innerRef}\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
5
  "mappings": "AAAA,YAAY,WAAW;ACcnB;AAbJ,SAAS,gBAAgB;AACzB,SAAS,qBAAqB;AAC9B,SAA6B,6BAA6B;AAC1D,SAAS,kBAAkB,8BAA8B;AACzD,SAAS,wBAAwB;AAEjC,MAAM,eAA8C,CAAC,UAAU;AAC7D,QAAM;AAAA,IACJ,kBAAkB,KAAK,uBAAuB;AAAA,IAC9C;AAAA,IACA,kBAAkB,EAAE,OAAO,IAAI,WAAW,SAAS,UAAU,SAAS;AAAA,EACxE,IAAI,cAAc,KAAK;AACvB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,uBAAuB;AAAA,MACnC,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,IAAI,MAAM;AAAA,MACV;AAAA,MACA;AAAA,MACA,KAAK;AAAA,MAEJ,gBAAM;AAAA;AAAA,EACT;AAEJ;AAEA,aAAa,cAAc;AAC3B,aAAa,YAAY;AACzB,MAAM,yBAAyB,SAAS,YAAY;AACpD,uBAAuB,YAAY;",
6
6
  "names": []
7
7
  }
package/dist/esm/config/useDefaultProps.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useDefaultProps.ts"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport type { DSTypographyT } from '../react-desc-prop-types';\n\nconst VariantToAsMap: Record<DSTypographyT.Props['variant'], keyof JSX.IntrinsicElements> = {\n h1: 'h1',\n h2: 'h2',\n h3: 'h3',\n h4: 'h4',\n h5: 'h5',\n b1: 'p',\n b2: 'p',\n b3: 'p',\n b4: 'p',\n button: 'button',\n link: 'a',\n};\nexport const useDefaultProps = ({ variant, as: userAs }: DSTypographyT.Props): { as: keyof JSX.IntrinsicElements } => {\n const defaultAs = userAs || VariantToAsMap[variant];\n const defaultProps = React.useMemo(() => ({ as: defaultAs }), [defaultAs]);\n return defaultProps;\n};\n"],
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport type { DSTypographyT } from '../react-desc-prop-types.js';\n\nconst VariantToAsMap: Record<DSTypographyT.Props['variant'], keyof JSX.IntrinsicElements> = {\n h1: 'h1',\n h2: 'h2',\n h3: 'h3',\n h4: 'h4',\n h5: 'h5',\n b1: 'p',\n b2: 'p',\n b3: 'p',\n b4: 'p',\n button: 'button',\n link: 'a',\n};\nexport const useDefaultProps = ({ variant, as: userAs }: DSTypographyT.Props): { as: keyof JSX.IntrinsicElements } => {\n const defaultAs = userAs || VariantToAsMap[variant];\n const defaultProps = React.useMemo(() => ({ as: defaultAs }), [defaultAs]);\n return defaultProps;\n};\n"],
5
5
  "mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAGlB,MAAM,iBAAsF;AAAA,EAC1F,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,QAAQ;AAAA,EACR,MAAM;AACR;AACO,MAAM,kBAAkB,CAAC,EAAE,SAAS,IAAI,OAAO,MAAgE;AACpH,QAAM,YAAY,UAAU,eAAe;AAC3C,QAAM,eAAeA,OAAM,QAAQ,OAAO,EAAE,IAAI,UAAU,IAAI,CAAC,SAAS,CAAC;AACzE,SAAO;AACT;",
6
6
  "names": ["React"]
7
7
  }
package/dist/esm/config/useTypography.js CHANGED
@@ -5,10 +5,10 @@ import {
5
5
  useGetXstyledProps,
6
6
  useMemoMergePropsWithDefault,
7
7
  useValidateTypescriptPropTypes
8
- } from "@elliemae/ds-utilities";
9
- import { DSTypographyPropTypes } from "../react-desc-prop-types";
10
- import { useDefaultProps } from "./useDefaultProps";
11
- import { DSTypographyName } from "../DSTypographyDatatestId";
8
+ } from "@elliemae/ds-props-helpers";
9
+ import { DSTypographyPropTypes } from "../react-desc-prop-types.js";
10
+ import { useDefaultProps } from "./useDefaultProps.js";
11
+ import { DSTypographyName } from "../DSTypographyDatatestId.js";
12
12
  const useTypography = (props) => {
13
13
  useValidateTypescriptPropTypes(props, DSTypographyPropTypes, DSTypographyName);
14
14
  const defaultProps = useDefaultProps(props);
package/dist/esm/config/useTypography.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useTypography.ts"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-utilities';\nimport {\n useGetGlobalAttributes,\n useGetXstyledProps,\n useMemoMergePropsWithDefault,\n useValidateTypescriptPropTypes,\n} from '@elliemae/ds-utilities';\n\nimport type { DSTypographyT } from '../react-desc-prop-types';\nimport { DSTypographyPropTypes } from '../react-desc-prop-types';\nimport { useDefaultProps } from './useDefaultProps';\nimport { DSTypographyName } from '../DSTypographyDatatestId';\n\ninterface UseTypographyT {\n propsWithDefault: DSTypographyT.InternalProps;\n globalAttributes: GlobalAttributesT;\n xstyledProps: XstyledProps;\n}\n\nexport const useTypography = (props: DSTypographyT.Props): UseTypographyT => {\n useValidateTypescriptPropTypes(props, DSTypographyPropTypes, DSTypographyName);\n const defaultProps = useDefaultProps(props);\n const propsWithDefault = useMemoMergePropsWithDefault<DSTypographyT.InternalProps>(props, defaultProps);\n const globalAttributes = useGetGlobalAttributes(propsWithDefault);\n\n const xstyledProps = useGetXstyledProps(propsWithDefault);\n return React.useMemo(\n () => ({ propsWithDefault, globalAttributes, xstyledProps }),\n [globalAttributes, propsWithDefault, xstyledProps],\n );\n};\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAElB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGP,SAAS,6BAA6B;AACtC,SAAS,uBAAuB;AAChC,SAAS,wBAAwB;AAQ1B,MAAM,gBAAgB,CAAC,UAA+C;AAC3E,iCAA+B,OAAO,uBAAuB,gBAAgB;AAC7E,QAAM,eAAe,gBAAgB,KAAK;AAC1C,QAAM,mBAAmB,6BAA0D,OAAO,YAAY;AACtG,QAAM,mBAAmB,uBAAuB,gBAAgB;AAEhE,QAAM,eAAe,mBAAmB,gBAAgB;AACxD,SAAOA,OAAM;AAAA,IACX,OAAO,EAAE,kBAAkB,kBAAkB,aAAa;AAAA,IAC1D,CAAC,kBAAkB,kBAAkB,YAAY;AAAA,EACnD;AACF;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport type {} from '@elliemae/ds-utilities';\nimport type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';\nimport {\n useGetGlobalAttributes,\n useGetXstyledProps,\n useMemoMergePropsWithDefault,\n useValidateTypescriptPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport type { DSTypographyT } from '../react-desc-prop-types.js';\nimport { DSTypographyPropTypes } from '../react-desc-prop-types.js';\nimport { useDefaultProps } from './useDefaultProps.js';\nimport { DSTypographyName } from '../DSTypographyDatatestId.js';\n\ninterface UseTypographyT {\n propsWithDefault: DSTypographyT.InternalProps;\n globalAttributes: GlobalAttributesT;\n xstyledProps: XstyledProps;\n}\n\nexport const useTypography = (props: DSTypographyT.Props): UseTypographyT => {\n useValidateTypescriptPropTypes(props, DSTypographyPropTypes, DSTypographyName);\n const defaultProps = useDefaultProps(props);\n const propsWithDefault = useMemoMergePropsWithDefault<DSTypographyT.InternalProps>(props, defaultProps);\n const globalAttributes = useGetGlobalAttributes(propsWithDefault);\n\n const xstyledProps = useGetXstyledProps(propsWithDefault);\n return React.useMemo(\n () => ({ propsWithDefault, globalAttributes, xstyledProps }),\n [globalAttributes, propsWithDefault, xstyledProps],\n );\n};\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAGlB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,6BAA6B;AACtC,SAAS,uBAAuB;AAChC,SAAS,wBAAwB;AAQ1B,MAAM,gBAAgB,CAAC,UAA+C;AAC3E,iCAA+B,OAAO,uBAAuB,gBAAgB;AAC7E,QAAM,eAAe,gBAAgB,KAAK;AAC1C,QAAM,mBAAmB,6BAA0D,OAAO,YAAY;AACtG,QAAM,mBAAmB,uBAAuB,gBAAgB;AAEhE,QAAM,eAAe,mBAAmB,gBAAgB;AACxD,SAAOA,OAAM;AAAA,IACX,OAAO,EAAE,kBAAkB,kBAAkB,aAAa;AAAA,IAC1D,CAAC,kBAAkB,kBAAkB,YAAY;AAAA,EACnD;AACF;",
6
6
  "names": ["React"]
7
7
  }
package/dist/esm/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as React from "react";
2
- import { DSTypography, DSTypographyWithSchema } from "./Typography";
2
+ import { DSTypography, DSTypographyWithSchema } from "./Typography.js";
3
3
  export {
4
4
  DSTypography,
5
5
  DSTypographyWithSchema
package/dist/esm/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.ts"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { DSTypography, DSTypographyWithSchema } from './Typography';\nimport type {} from '@xstyled/util';\nimport type {} from '@xstyled/system';\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc,8BAA8B;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type {} from '@elliemae/ds-props-helpers';\nimport type {} from '@xstyled/util';\nimport type {} from '@xstyled/system';\n\nexport { DSTypography, DSTypographyWithSchema } from './Typography.js';\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACIvB,SAAS,cAAc,8BAA8B;",
6
6
  "names": []
7
7
  }
package/dist/esm/package.json ADDED
@@ -0,0 +1,7 @@
1
+ {
2
+ "type": "module",
3
+ "sideEffects": [
4
+ "*.css",
5
+ "*.scss"
6
+ ]
7
+ }
package/dist/esm/react-desc-prop-types.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as React from "react";
2
- import { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from "@elliemae/ds-utilities";
2
+ import { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from "@elliemae/ds-props-helpers";
3
3
  const DSTypographyPropTypes = {
4
4
  ...globalAttributesPropTypes,
5
5
  ...xstyledPropTypes,
package/dist/esm/react-desc-prop-types.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-utilities';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-utilities';\nimport type { FontSizeProps, LineHeightProps, ColorProps } from '@elliemae/ds-system';\nimport type { WeakValidationMap } from 'react';\n\nexport declare namespace DSTypographyT {\n type Ivariant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'b1' | 'b2' | 'b3' | 'b4' | 'button' | 'link';\n interface IProps {\n variant: Ivariant;\n as?: keyof JSX.IntrinsicElements;\n component?: keyof JSX.IntrinsicElements;\n children: React.ReactNode | React.ReactNode[];\n innerRef?: React.RefObject<HTMLElement>;\n }\n\n export interface Props\n extends IProps,\n Omit<GlobalAttributesT<HTMLElement>, keyof IProps | 'color'>,\n XstyledProps,\n FontSizeProps,\n LineHeightProps,\n ColorProps,\n Record<string, unknown> {}\n export interface InternalProps extends Props {\n as: keyof JSX.IntrinsicElements;\n }\n}\n\nexport const DSTypographyPropTypes = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n variant: PropTypes.oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'b1', 'b2', 'b3', 'b4', 'button', 'link']).description(\n `\n render the default style based on the variant and the default mapping HTML tag:\n Variant to HTML Tag\n h1 => <h1 />\n h2 => <h2 />\n h3 => <h3 />\n h4 => <h4 />\n h5 => <h5 />\n b1 => <p />\n b2 => <p />\n b3 => <p />\n b4 => <p />\n button => <button />\n link => <a />\n `,\n ).isRequired,\n children: PropTypes.node.description('Children element').isRequired,\n as: PropTypes.string.description('Use to override the printed HTML tag, ex: `span` or `strong`'),\n component: PropTypes.string.description(\n 'Same as `as` for internal use. Use to override the printed HTML tag, ex: `span` or `strong`',\n ),\n} as WeakValidationMap<unknown>;\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,WAAW,2BAA2B,wBAAwB;AA2BhE,MAAM,wBAAwB;AAAA,EACnC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,SAAS,UAAU,MAAM,CAAC,MAAM,MAAM,MAAM,MAAM,MAAM,MAAM,MAAM,MAAM,MAAM,UAAU,MAAM,CAAC,EAAE;AAAA,IACjG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAeF,EAAE;AAAA,EACF,UAAU,UAAU,KAAK,YAAY,kBAAkB,EAAE;AAAA,EACzD,IAAI,UAAU,OAAO,YAAY,8DAA8D;AAAA,EAC/F,WAAW,UAAU,OAAO;AAAA,IAC1B;AAAA,EACF;AACF;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type {} from '@elliemae/ds-utilities';\nimport type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport type { FontSizeProps, LineHeightProps, ColorProps } from '@elliemae/ds-system';\nimport type { WeakValidationMap } from 'react';\n\nexport declare namespace DSTypographyT {\n type Ivariant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'b1' | 'b2' | 'b3' | 'b4' | 'button' | 'link';\n interface IProps {\n variant: Ivariant;\n as?: keyof JSX.IntrinsicElements;\n component?: keyof JSX.IntrinsicElements;\n children: React.ReactNode | React.ReactNode[];\n innerRef?: React.RefObject<HTMLElement>;\n }\n\n export interface Props\n extends IProps,\n Omit<GlobalAttributesT<HTMLElement>, keyof IProps | 'color'>,\n XstyledProps,\n FontSizeProps,\n LineHeightProps,\n ColorProps,\n Record<string, unknown> {}\n export interface InternalProps extends Props {\n as: keyof JSX.IntrinsicElements;\n }\n}\n\nexport const DSTypographyPropTypes = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n variant: PropTypes.oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'b1', 'b2', 'b3', 'b4', 'button', 'link']).description(\n `\n render the default style based on the variant and the default mapping HTML tag:\n Variant to HTML Tag\n h1 => <h1 />\n h2 => <h2 />\n h3 => <h3 />\n h4 => <h4 />\n h5 => <h5 />\n b1 => <p />\n b2 => <p />\n b3 => <p />\n b4 => <p />\n button => <button />\n link => <a />\n `,\n ).isRequired,\n children: PropTypes.node.description('Children element').isRequired,\n as: PropTypes.string.description('Use to override the printed HTML tag, ex: `span` or `strong`'),\n component: PropTypes.string.description(\n 'Same as `as` for internal use. Use to override the printed HTML tag, ex: `span` or `strong`',\n ),\n} as WeakValidationMap<unknown>;\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACEvB,SAAS,WAAW,2BAA2B,wBAAwB;AA2BhE,MAAM,wBAAwB;AAAA,EACnC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,SAAS,UAAU,MAAM,CAAC,MAAM,MAAM,MAAM,MAAM,MAAM,MAAM,MAAM,MAAM,MAAM,UAAU,MAAM,CAAC,EAAE;AAAA,IACjG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAeF,EAAE;AAAA,EACF,UAAU,UAAU,KAAK,YAAY,kBAAkB,EAAE;AAAA,EACzD,IAAI,UAAU,OAAO,YAAY,8DAA8D;AAAA,EAC/F,WAAW,UAAU,OAAO;AAAA,IAC1B;AAAA,EACF;AACF;",
6
6
  "names": []
7
7
  }
package/dist/esm/styled.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import * as React from "react";
2
2
  import { styled, css, xStyledCommonProps } from "@elliemae/ds-system";
3
- import { DSTypographyName, DSTypographyDataTestId } from "./DSTypographyDatatestId";
3
+ import { DSTypographyName, DSTypographyDataTestId } from "./DSTypographyDatatestId.js";
4
4
  const styleMap = {
5
5
  h1: {
6
6
  fontSize: "2.62rem",
package/dist/esm/styled.js.map CHANGED
@@ -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", "/* eslint-disable max-lines */\nimport { styled, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport type { DSTypographyT } from './react-desc-prop-types';\nimport { DSTypographyName, DSTypographyDataTestId } from './DSTypographyDatatestId';\n\nexport const styleMap = {\n h1: {\n fontSize: '2.62rem',\n lineHeight: '3.15rem',\n },\n h2: {\n fontSize: '1.85rem',\n lineHeight: '2.38rem',\n },\n h3: {\n fontSize: '1.38rem',\n lineHeight: '1.69rem',\n },\n h4: {\n fontSize: '1.23rem',\n lineHeight: '1.54rem',\n },\n h5: {\n fontSize: '1.08rem',\n lineHeight: '1.31rem',\n },\n b1: {\n fontSize: '1.08rem',\n lineHeight: '1.38rem',\n },\n b2: {\n fontSize: '1rem',\n lineHeight: '1.31rem',\n },\n b3: {\n fontSize: '0.92rem',\n lineHeight: '1.23rem',\n },\n b4: {\n fontSize: '0.85rem',\n lineHeight: '1rem',\n },\n button: {\n fontSize: '1rem',\n lineHeight: '1.85rem',\n },\n link: {\n fontSize: '1rem',\n lineHeight: '1.85rem',\n },\n};\n\nexport const styleMapMobile = {\n h1: { fontSize: '2.12875rem', lineHeight: '2.5593749999999997rem' },\n h2: { fontSize: '1.503125rem', lineHeight: '1.9337499999999999rem' },\n h3: { fontSize: '1.1212499999999999rem', lineHeight: '1.373125rem' },\n h4: { fontSize: '0.999375rem', lineHeight: '1.25125rem' },\n h5: { fontSize: '0.8775000000000001rem', lineHeight: '1.064375rem' },\n b1: { fontSize: '0.8775000000000001rem', lineHeight: '1.1212499999999999rem' },\n b2: { fontSize: '0.8125rem', lineHeight: '1.064375rem' },\n b3: { fontSize: '0.7475rem', lineHeight: '0.999375rem' },\n b4: { fontSize: '0.6906249999999999rem', lineHeight: '0.8125rem' },\n button: { fontSize: '0.8125rem', lineHeight: '1.503125rem' },\n link: { fontSize: '0.8125rem', lineHeight: '1.503125rem' },\n};\n\ntype StyleIProp = DSTypographyT.InternalProps & {\n children: DSTypographyT.InternalProps['children'];\n};\n\nconst mapper = {\n h1: css<StyleIProp>`\n font-size: ${(props) => props.fontSize ?? styleMapMobile.h1.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMapMobile.h1.lineHeight};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? styleMap.h1.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMap.h1.lineHeight};\n }\n `,\n h2: css<StyleIProp>`\n font-size: ${(props) => props.fontSize ?? styleMapMobile.h2.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMapMobile.h2.lineHeight};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? styleMap.h2.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMap.h2.lineHeight};\n }\n `,\n h3: css<StyleIProp>`\n font-size: ${(props) => props.fontSize ?? styleMapMobile.h3.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMapMobile.h3.lineHeight};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? styleMap.h3.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMap.h3.lineHeight};\n }\n `,\n h4: css<StyleIProp>`\n font-size: ${(props) => props.fontSize ?? styleMapMobile.h4.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMapMobile.h4.lineHeight};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? styleMap.h4.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMap.h4.lineHeight};\n }\n `,\n h5: css<StyleIProp>`\n font-size: ${(props) => props.fontSize ?? styleMapMobile.h5.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMapMobile.h5.lineHeight};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? styleMap.h5.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMap.h5.lineHeight};\n }\n `,\n b1: css<StyleIProp>`\n font-size: ${(props) => props.fontSize ?? styleMapMobile.b1.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMapMobile.b1.lineHeight};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? styleMap.b1.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMap.b1.lineHeight};\n }\n `,\n b2: css<StyleIProp>`\n font-size: ${(props) => props.fontSize ?? styleMapMobile.b2.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMapMobile.b2.lineHeight};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? styleMap.b2.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMap.b2.lineHeight};\n }\n `,\n b3: css<StyleIProp>`\n font-size: ${(props) => props.fontSize ?? styleMapMobile.b3.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMapMobile.b3.lineHeight};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? styleMap.b3.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMap.b3.lineHeight};\n }\n `,\n b4: css<StyleIProp>`\n font-size: ${(props) => props.fontSize ?? styleMapMobile.b4.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMapMobile.b4.lineHeight};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? styleMap.b4.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMap.b4.lineHeight};\n }\n `,\n button: css<StyleIProp>`\n font-size: ${(props) => props.fontSize ?? styleMapMobile.button.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMapMobile.button.lineHeight};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? styleMap.button.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMap.button.lineHeight};\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 link: css<StyleIProp>`\n font-size: ${(props) => props.fontSize ?? styleMapMobile.button.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMapMobile.button.lineHeight};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? styleMap.button.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMap.button.lineHeight};\n }\n text-decoration: underline;\n color: ${(props) => props.theme.colors.brand[600]};\n display: inline-block;\n text-align: left;\n cursor: pointer;\n &:hover {\n color: ${(props) => props.theme.colors.brand[700]};\n }\n &:active {\n color: ${(props) => props.theme.colors.brand[800]};\n }\n &:focus {\n color: ${(props) => props.theme.colors.brand[700]};\n }\n `,\n};\n\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(String(prop)) && defaultValidatorFn(prop),\n})<StyleIProp>`\n margin: 0;\n padding: 0;\n ${(props: StyleIProp) => mapper[props.variant]}\n ${xStyledCommonProps}\n`;\n"],
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { styled, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport type { DSTypographyT } from './react-desc-prop-types.js';\nimport { DSTypographyName, DSTypographyDataTestId } from './DSTypographyDatatestId.js';\n\nexport const styleMap = {\n h1: {\n fontSize: '2.62rem',\n lineHeight: '3.15rem',\n },\n h2: {\n fontSize: '1.85rem',\n lineHeight: '2.38rem',\n },\n h3: {\n fontSize: '1.38rem',\n lineHeight: '1.69rem',\n },\n h4: {\n fontSize: '1.23rem',\n lineHeight: '1.54rem',\n },\n h5: {\n fontSize: '1.08rem',\n lineHeight: '1.31rem',\n },\n b1: {\n fontSize: '1.08rem',\n lineHeight: '1.38rem',\n },\n b2: {\n fontSize: '1rem',\n lineHeight: '1.31rem',\n },\n b3: {\n fontSize: '0.92rem',\n lineHeight: '1.23rem',\n },\n b4: {\n fontSize: '0.85rem',\n lineHeight: '1rem',\n },\n button: {\n fontSize: '1rem',\n lineHeight: '1.85rem',\n },\n link: {\n fontSize: '1rem',\n lineHeight: '1.85rem',\n },\n};\n\nexport const styleMapMobile = {\n h1: { fontSize: '2.12875rem', lineHeight: '2.5593749999999997rem' },\n h2: { fontSize: '1.503125rem', lineHeight: '1.9337499999999999rem' },\n h3: { fontSize: '1.1212499999999999rem', lineHeight: '1.373125rem' },\n h4: { fontSize: '0.999375rem', lineHeight: '1.25125rem' },\n h5: { fontSize: '0.8775000000000001rem', lineHeight: '1.064375rem' },\n b1: { fontSize: '0.8775000000000001rem', lineHeight: '1.1212499999999999rem' },\n b2: { fontSize: '0.8125rem', lineHeight: '1.064375rem' },\n b3: { fontSize: '0.7475rem', lineHeight: '0.999375rem' },\n b4: { fontSize: '0.6906249999999999rem', lineHeight: '0.8125rem' },\n button: { fontSize: '0.8125rem', lineHeight: '1.503125rem' },\n link: { fontSize: '0.8125rem', lineHeight: '1.503125rem' },\n};\n\ntype StyleIProp = DSTypographyT.InternalProps & {\n children: DSTypographyT.InternalProps['children'];\n};\n\nconst mapper = {\n h1: css<StyleIProp>`\n font-size: ${(props) => props.fontSize ?? styleMapMobile.h1.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMapMobile.h1.lineHeight};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? styleMap.h1.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMap.h1.lineHeight};\n }\n `,\n h2: css<StyleIProp>`\n font-size: ${(props) => props.fontSize ?? styleMapMobile.h2.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMapMobile.h2.lineHeight};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? styleMap.h2.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMap.h2.lineHeight};\n }\n `,\n h3: css<StyleIProp>`\n font-size: ${(props) => props.fontSize ?? styleMapMobile.h3.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMapMobile.h3.lineHeight};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? styleMap.h3.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMap.h3.lineHeight};\n }\n `,\n h4: css<StyleIProp>`\n font-size: ${(props) => props.fontSize ?? styleMapMobile.h4.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMapMobile.h4.lineHeight};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? styleMap.h4.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMap.h4.lineHeight};\n }\n `,\n h5: css<StyleIProp>`\n font-size: ${(props) => props.fontSize ?? styleMapMobile.h5.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMapMobile.h5.lineHeight};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? styleMap.h5.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMap.h5.lineHeight};\n }\n `,\n b1: css<StyleIProp>`\n font-size: ${(props) => props.fontSize ?? styleMapMobile.b1.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMapMobile.b1.lineHeight};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? styleMap.b1.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMap.b1.lineHeight};\n }\n `,\n b2: css<StyleIProp>`\n font-size: ${(props) => props.fontSize ?? styleMapMobile.b2.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMapMobile.b2.lineHeight};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? styleMap.b2.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMap.b2.lineHeight};\n }\n `,\n b3: css<StyleIProp>`\n font-size: ${(props) => props.fontSize ?? styleMapMobile.b3.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMapMobile.b3.lineHeight};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? styleMap.b3.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMap.b3.lineHeight};\n }\n `,\n b4: css<StyleIProp>`\n font-size: ${(props) => props.fontSize ?? styleMapMobile.b4.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMapMobile.b4.lineHeight};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? styleMap.b4.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMap.b4.lineHeight};\n }\n `,\n button: css<StyleIProp>`\n font-size: ${(props) => props.fontSize ?? styleMapMobile.button.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMapMobile.button.lineHeight};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? styleMap.button.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMap.button.lineHeight};\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 link: css<StyleIProp>`\n font-size: ${(props) => props.fontSize ?? styleMapMobile.button.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMapMobile.button.lineHeight};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? styleMap.button.fontSize};\n line-height: ${(props) => props.lineHeight ?? styleMap.button.lineHeight};\n }\n text-decoration: underline;\n color: ${(props) => props.theme.colors.brand[600]};\n display: inline-block;\n text-align: left;\n cursor: pointer;\n &:hover {\n color: ${(props) => props.theme.colors.brand[700]};\n }\n &:active {\n color: ${(props) => props.theme.colors.brand[800]};\n }\n &:focus {\n color: ${(props) => props.theme.colors.brand[700]};\n }\n `,\n};\n\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(String(prop)) && defaultValidatorFn(prop),\n})<StyleIProp>`\n margin: 0;\n padding: 0;\n ${(props: StyleIProp) => mapper[props.variant]}\n ${xStyledCommonProps}\n`;\n"],
5
5
  "mappings": "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",
6
6
  "names": []
7
7
  }
package/dist/types/Typography.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
- import { type DSTypographyT } from './react-desc-prop-types';
2
+ import { type DSTypographyT } from './react-desc-prop-types.js';
3
3
  declare const DSTypography: React.FC<DSTypographyT.Props>;
4
- declare const DSTypographyWithSchema: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").DocumentedReactComponent<DSTypographyT.Props>;
4
+ declare const DSTypographyWithSchema: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").DocumentedReactComponent<DSTypographyT.Props>;
5
5
  export { DSTypography, DSTypographyWithSchema };
package/dist/types/config/useDefaultProps.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import type { DSTypographyT } from '../react-desc-prop-types';
1
+ import type { DSTypographyT } from '../react-desc-prop-types.js';
2
2
  export declare const useDefaultProps: ({ variant, as: userAs }: DSTypographyT.Props) => {
3
3
  as: keyof JSX.IntrinsicElements;
4
4
  };
package/dist/types/config/useTypography.d.ts CHANGED
@@ -1,5 +1,5 @@
1
- import type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-utilities';
2
- import type { DSTypographyT } from '../react-desc-prop-types';
1
+ import type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';
2
+ import type { DSTypographyT } from '../react-desc-prop-types.js';
3
3
  interface UseTypographyT {
4
4
  propsWithDefault: DSTypographyT.InternalProps;
5
5
  globalAttributes: GlobalAttributesT;
package/dist/types/index.d.ts CHANGED
@@ -1 +1 @@
1
- export { DSTypography, DSTypographyWithSchema } from './Typography';
1
+ export { DSTypography, DSTypographyWithSchema } from './Typography.js';
package/dist/types/react-desc-prop-types.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-utilities';
1
+ import type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';
2
2
  import type { FontSizeProps, LineHeightProps, ColorProps } from '@elliemae/ds-system';
3
3
  import type { WeakValidationMap } from 'react';
4
4
  export declare namespace DSTypographyT {
package/dist/types/styled.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import type { DSTypographyT } from './react-desc-prop-types';
1
+ import type { DSTypographyT } from './react-desc-prop-types.js';
2
2
  export declare const styleMap: {
3
3
  h1: {
4
4
  fontSize: string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-typography",
3
- "version": "3.15.0",
3
+ "version": "3.16.0-next.10",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Typography",
6
6
  "files": [
@@ -35,8 +35,9 @@
35
35
  "indent": 4
36
36
  },
37
37
  "dependencies": {
38
- "@elliemae/ds-system": "3.15.0",
39
- "@elliemae/ds-utilities": "3.15.0"
38
+ "@elliemae/ds-props-helpers": "3.16.0-next.10",
39
+ "@elliemae/ds-system": "3.16.0-next.10",
40
+ "@elliemae/ds-utilities": "3.16.0-next.10"
40
41
  },
41
42
  "devDependencies": {
42
43
  "@testing-library/jest-dom": "~5.16.4",
@@ -60,7 +61,7 @@
60
61
  "lint": "node ../../scripts/lint.mjs",
61
62
  "eslint:fix": "eslint --ext='.js,.jsx,.test.js,.ts,.tsx' --fix --config='../../.eslintrc.js' src/",
62
63
  "dts": "node ../../scripts/dts.mjs",
63
- "dev:build": "pnpm --filter {.}... build && pnpm --filter {.}... dts",
64
+ "dev:build": "pnpm --filter {.}... build",
64
65
  "build": "cross-env NODE_ENV=production node ../../scripts/build/build.mjs"
65
66
  }
66
67
  }