@elliemae/ds-typography 3.70.0-next.26 → 3.70.0-next.28

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 (18) hide show
  1. package/dist/cjs/config/useDefaultProps.js +1 -0
  2. package/dist/cjs/config/useDefaultProps.js.map +2 -2
  3. package/dist/cjs/constants/index.js +1 -0
  4. package/dist/cjs/constants/index.js.map +2 -2
  5. package/dist/cjs/parts/variants/body.js +10 -0
  6. package/dist/cjs/parts/variants/body.js.map +2 -2
  7. package/dist/cjs/react-desc-prop-types.js +1 -0
  8. package/dist/cjs/react-desc-prop-types.js.map +2 -2
  9. package/dist/esm/config/useDefaultProps.js +1 -0
  10. package/dist/esm/config/useDefaultProps.js.map +2 -2
  11. package/dist/esm/constants/index.js +1 -0
  12. package/dist/esm/constants/index.js.map +2 -2
  13. package/dist/esm/parts/variants/body.js +10 -0
  14. package/dist/esm/parts/variants/body.js.map +2 -2
  15. package/dist/esm/react-desc-prop-types.js +1 -0
  16. package/dist/esm/react-desc-prop-types.js.map +2 -2
  17. package/dist/types/react-desc-prop-types.d.ts +1 -1
  18. package/package.json +6 -6
package/dist/cjs/config/useDefaultProps.js CHANGED
@@ -49,6 +49,7 @@ const VariantToAsMap = {
49
49
  "b1-light": "p",
50
50
  "b2-light": "p",
51
51
  "b3-light": "p",
52
+ "b3-strong": "p",
52
53
  button: "button",
53
54
  "button-sml-title": "button",
54
55
  "button-med-title": "button",
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.js';\n\nconst VariantToAsMap: Record<DSTypographyT.Variant, keyof React.JSX.IntrinsicElements> = {\n h1: 'h1',\n h2: 'h2',\n h3: 'h3',\n h4: 'h4',\n h5: 'h5',\n 'h3-strong': 'h3',\n 'h4-strong': 'h4',\n 'h5-strong': 'h5',\n b1: 'p',\n b2: 'p',\n b3: 'p',\n b4: 'p',\n 'b1-light': 'p',\n 'b2-light': 'p',\n 'b3-light': 'p',\n button: 'button',\n 'button-sml-title': 'button',\n 'button-med-title': 'button',\n 'button-lrg-title': 'button',\n link: 'a',\n 'link-sml-title': 'a',\n 'link-med-title': 'a',\n 'link-lrg-title': 'a',\n 'quote-brand': 'pre',\n 'quote-neutral': 'pre',\n 'highlight-neutral': 'span',\n 'highlight-brand': 'span',\n 'highlight-important': 'span',\n 'highlight-critical': 'span',\n 'feedback-neutral': 'span',\n 'feedback-brand': 'span',\n 'feedback-important': 'span',\n 'feedback-critical': 'span',\n 'h1-article': 'h1',\n 'h2-article': 'h2',\n 'h3-article': 'h3',\n 'h4-article': 'h4',\n 'h5-article': 'h5',\n 'b1-article': 'p',\n 'b2-article': 'p',\n 'b3-article': 'p',\n};\nexport const useDefaultProps = ({\n variant,\n component,\n as: userAs,\n}: DSTypographyT.Props): { as: keyof React.JSX.IntrinsicElements } => {\n // component prop has higher priority than as prop and variant prop\n const defaultAs = component || 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
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAGlB,MAAM,iBAAmF;AAAA,EACvF,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,aAAa;AAAA,EACb,aAAa;AAAA,EACb,aAAa;AAAA,EACb,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,QAAQ;AAAA,EACR,oBAAoB;AAAA,EACpB,oBAAoB;AAAA,EACpB,oBAAoB;AAAA,EACpB,MAAM;AAAA,EACN,kBAAkB;AAAA,EAClB,kBAAkB;AAAA,EAClB,kBAAkB;AAAA,EAClB,eAAe;AAAA,EACf,iBAAiB;AAAA,EACjB,qBAAqB;AAAA,EACrB,mBAAmB;AAAA,EACnB,uBAAuB;AAAA,EACvB,sBAAsB;AAAA,EACtB,oBAAoB;AAAA,EACpB,kBAAkB;AAAA,EAClB,sBAAsB;AAAA,EACtB,qBAAqB;AAAA,EACrB,cAAc;AAAA,EACd,cAAc;AAAA,EACd,cAAc;AAAA,EACd,cAAc;AAAA,EACd,cAAc;AAAA,EACd,cAAc;AAAA,EACd,cAAc;AAAA,EACd,cAAc;AAChB;AACO,MAAM,kBAAkB,CAAC;AAAA,EAC9B;AAAA,EACA;AAAA,EACA,IAAI;AACN,MAAsE;AAEpE,QAAM,YAAY,aAAa,UAAU,eAAe,OAAO;AAC/D,QAAM,eAAe,aAAAA,QAAM,QAAQ,OAAO,EAAE,IAAI,UAAU,IAAI,CAAC,SAAS,CAAC;AACzE,SAAO;AACT;",
4
+ "sourcesContent": ["import React from 'react';\nimport type { DSTypographyT } from '../react-desc-prop-types.js';\n\nconst VariantToAsMap: Record<DSTypographyT.Variant, keyof React.JSX.IntrinsicElements> = {\n h1: 'h1',\n h2: 'h2',\n h3: 'h3',\n h4: 'h4',\n h5: 'h5',\n 'h3-strong': 'h3',\n 'h4-strong': 'h4',\n 'h5-strong': 'h5',\n b1: 'p',\n b2: 'p',\n b3: 'p',\n b4: 'p',\n 'b1-light': 'p',\n 'b2-light': 'p',\n 'b3-light': 'p',\n 'b3-strong': 'p',\n button: 'button',\n 'button-sml-title': 'button',\n 'button-med-title': 'button',\n 'button-lrg-title': 'button',\n link: 'a',\n 'link-sml-title': 'a',\n 'link-med-title': 'a',\n 'link-lrg-title': 'a',\n 'quote-brand': 'pre',\n 'quote-neutral': 'pre',\n 'highlight-neutral': 'span',\n 'highlight-brand': 'span',\n 'highlight-important': 'span',\n 'highlight-critical': 'span',\n 'feedback-neutral': 'span',\n 'feedback-brand': 'span',\n 'feedback-important': 'span',\n 'feedback-critical': 'span',\n 'h1-article': 'h1',\n 'h2-article': 'h2',\n 'h3-article': 'h3',\n 'h4-article': 'h4',\n 'h5-article': 'h5',\n 'b1-article': 'p',\n 'b2-article': 'p',\n 'b3-article': 'p',\n};\nexport const useDefaultProps = ({\n variant,\n component,\n as: userAs,\n}: DSTypographyT.Props): { as: keyof React.JSX.IntrinsicElements } => {\n // component prop has higher priority than as prop and variant prop\n const defaultAs = component || 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
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAGlB,MAAM,iBAAmF;AAAA,EACvF,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,aAAa;AAAA,EACb,aAAa;AAAA,EACb,aAAa;AAAA,EACb,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,QAAQ;AAAA,EACR,oBAAoB;AAAA,EACpB,oBAAoB;AAAA,EACpB,oBAAoB;AAAA,EACpB,MAAM;AAAA,EACN,kBAAkB;AAAA,EAClB,kBAAkB;AAAA,EAClB,kBAAkB;AAAA,EAClB,eAAe;AAAA,EACf,iBAAiB;AAAA,EACjB,qBAAqB;AAAA,EACrB,mBAAmB;AAAA,EACnB,uBAAuB;AAAA,EACvB,sBAAsB;AAAA,EACtB,oBAAoB;AAAA,EACpB,kBAAkB;AAAA,EAClB,sBAAsB;AAAA,EACtB,qBAAqB;AAAA,EACrB,cAAc;AAAA,EACd,cAAc;AAAA,EACd,cAAc;AAAA,EACd,cAAc;AAAA,EACd,cAAc;AAAA,EACd,cAAc;AAAA,EACd,cAAc;AAAA,EACd,cAAc;AAChB;AACO,MAAM,kBAAkB,CAAC;AAAA,EAC9B;AAAA,EACA;AAAA,EACA,IAAI;AACN,MAAsE;AAEpE,QAAM,YAAY,aAAa,UAAU,eAAe,OAAO;AAC/D,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/constants/index.js CHANGED
@@ -75,6 +75,7 @@ const TYPOGRAPHY_VARIANTS = {
75
75
  B1_LIGHT: "b1-light",
76
76
  B2_LIGHT: "b2-light",
77
77
  B3_LIGHT: "b3-light",
78
+ B3_STRONG: "b3-strong",
78
79
  H1_ARTICLE: "h1-article",
79
80
  H2_ARTICLE: "h2-article",
80
81
  H3_ARTICLE: "h3-article",
package/dist/cjs/constants/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/constants/index.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["import { slotObjectToDataTestIds } from '@elliemae/ds-system';\nimport type { DSTypographyT } from '../react-desc-prop-types.js';\n\nexport const DSTypographyName = 'DSTypography';\n\nexport const TYPOGRAPHY_SLOTS = {\n // this is the only slot that was present before the slotObjectToDataTestIds function was created\n // since we have splitted the data-testid and the slot responsabilities in the styled helpers,\n // we can now freely change the \"values\" of this constant without implying breakign changes\n // if a user get a breaking change it's because they hardcoded the slot instead of using the constant.\n TYPOGRAPHY_ELEMENT: 'root',\n} as const;\n\n// this component was created before the slotObjectToDataTestIds function was created\n// to avoid breaking change we overwrite the slots that for legacy reason where not using the slotObjectToDataTestIds\nexport const LEGACY_DATA_TESTID = {\n // the new \"slot\" value -> 'root' need to point to the \"old\" data-testid value -> 'ds-typography-element'\n [TYPOGRAPHY_SLOTS.TYPOGRAPHY_ELEMENT]: 'ds-typography-element',\n // the old \"slot\" value -> 'typography-element' need to point to the \"old\" data-testid value -> 'ds-typography-element'\n // we are hardcoding this \"typography-element\" for legacy reason,\n // people that were using this constant doesn't expect us to change the `keys` arbitrarily,\n // having constant keys and changing value is literally the point of this kind of constants\n 'typography-element': 'ds-typography-element',\n TYPOGRAPHY_ELEMENT: 'ds-typography-element',\n};\n\nexport const TYPOGRAPHY_DATA_TESTID = {\n ...slotObjectToDataTestIds(DSTypographyName, TYPOGRAPHY_SLOTS),\n ...LEGACY_DATA_TESTID,\n};\n\nexport const TYPOGRAPHY_VARIANTS: DSTypographyT.VariantsMap = {\n H1: 'h1',\n H2: 'h2',\n H3: 'h3',\n H4: 'h4',\n H5: 'h5',\n H3_STRONG: 'h3-strong',\n H4_STRONG: 'h4-strong',\n H5_STRONG: 'h5-strong',\n B1: 'b1',\n B2: 'b2',\n B3: 'b3',\n B4: 'b4',\n B1_LIGHT: 'b1-light',\n B2_LIGHT: 'b2-light',\n B3_LIGHT: 'b3-light',\n H1_ARTICLE: 'h1-article',\n H2_ARTICLE: 'h2-article',\n H3_ARTICLE: 'h3-article',\n H4_ARTICLE: 'h4-article',\n H5_ARTICLE: 'h5-article',\n B1_ARTICLE: 'b1-article',\n B2_ARTICLE: 'b2-article',\n B3_ARTICLE: 'b3-article',\n QUOTE_BRAND: 'quote-brand',\n QUOTE_NEUTRAL: 'quote-neutral',\n HIGHLIGHT_NEUTRAL: 'highlight-neutral',\n HIGHLIGHT_BRAND: 'highlight-brand',\n HIGHLIGHT_IMPORTANT: 'highlight-important',\n HIGHLIGHT_CRITICAL: 'highlight-critical',\n FEEDBACK_BRAND: 'feedback-brand',\n FEEDBACK_NEUTRAL: 'feedback-neutral',\n FEEDBACK_IMPORTANT: 'feedback-important',\n FEEDBACK_CRITICAL: 'feedback-critical',\n BUTTON: 'button',\n BUTTON_SML_TITLE: 'button-sml-title',\n BUTTON_MED_TITLE: 'button-med-title',\n BUTTON_LRG_TITLE: 'button-lrg-title',\n LINK: 'link',\n LINK_SML_TITLE: 'link-sml-title',\n LINK_MED_TITLE: 'link-med-title',\n LINK_LRG_TITLE: 'link-lrg-title',\n} as const;\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAwC;AAGjC,MAAM,mBAAmB;AAEzB,MAAM,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA,EAK9B,oBAAoB;AACtB;AAIO,MAAM,qBAAqB;AAAA;AAAA,EAEhC,CAAC,iBAAiB,kBAAkB,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA,EAKvC,sBAAsB;AAAA,EACtB,oBAAoB;AACtB;AAEO,MAAM,yBAAyB;AAAA,EACpC,OAAG,0CAAwB,kBAAkB,gBAAgB;AAAA,EAC7D,GAAG;AACL;AAEO,MAAM,sBAAiD;AAAA,EAC5D,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,WAAW;AAAA,EACX,WAAW;AAAA,EACX,WAAW;AAAA,EACX,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,eAAe;AAAA,EACf,mBAAmB;AAAA,EACnB,iBAAiB;AAAA,EACjB,qBAAqB;AAAA,EACrB,oBAAoB;AAAA,EACpB,gBAAgB;AAAA,EAChB,kBAAkB;AAAA,EAClB,oBAAoB;AAAA,EACpB,mBAAmB;AAAA,EACnB,QAAQ;AAAA,EACR,kBAAkB;AAAA,EAClB,kBAAkB;AAAA,EAClB,kBAAkB;AAAA,EAClB,MAAM;AAAA,EACN,gBAAgB;AAAA,EAChB,gBAAgB;AAAA,EAChB,gBAAgB;AAClB;",
4
+ "sourcesContent": ["import { slotObjectToDataTestIds } from '@elliemae/ds-system';\nimport type { DSTypographyT } from '../react-desc-prop-types.js';\n\nexport const DSTypographyName = 'DSTypography';\n\nexport const TYPOGRAPHY_SLOTS = {\n // this is the only slot that was present before the slotObjectToDataTestIds function was created\n // since we have splitted the data-testid and the slot responsabilities in the styled helpers,\n // we can now freely change the \"values\" of this constant without implying breakign changes\n // if a user get a breaking change it's because they hardcoded the slot instead of using the constant.\n TYPOGRAPHY_ELEMENT: 'root',\n} as const;\n\n// this component was created before the slotObjectToDataTestIds function was created\n// to avoid breaking change we overwrite the slots that for legacy reason where not using the slotObjectToDataTestIds\nexport const LEGACY_DATA_TESTID = {\n // the new \"slot\" value -> 'root' need to point to the \"old\" data-testid value -> 'ds-typography-element'\n [TYPOGRAPHY_SLOTS.TYPOGRAPHY_ELEMENT]: 'ds-typography-element',\n // the old \"slot\" value -> 'typography-element' need to point to the \"old\" data-testid value -> 'ds-typography-element'\n // we are hardcoding this \"typography-element\" for legacy reason,\n // people that were using this constant doesn't expect us to change the `keys` arbitrarily,\n // having constant keys and changing value is literally the point of this kind of constants\n 'typography-element': 'ds-typography-element',\n TYPOGRAPHY_ELEMENT: 'ds-typography-element',\n};\n\nexport const TYPOGRAPHY_DATA_TESTID = {\n ...slotObjectToDataTestIds(DSTypographyName, TYPOGRAPHY_SLOTS),\n ...LEGACY_DATA_TESTID,\n};\n\nexport const TYPOGRAPHY_VARIANTS: DSTypographyT.VariantsMap = {\n H1: 'h1',\n H2: 'h2',\n H3: 'h3',\n H4: 'h4',\n H5: 'h5',\n H3_STRONG: 'h3-strong',\n H4_STRONG: 'h4-strong',\n H5_STRONG: 'h5-strong',\n B1: 'b1',\n B2: 'b2',\n B3: 'b3',\n B4: 'b4',\n B1_LIGHT: 'b1-light',\n B2_LIGHT: 'b2-light',\n B3_LIGHT: 'b3-light',\n B3_STRONG: 'b3-strong',\n H1_ARTICLE: 'h1-article',\n H2_ARTICLE: 'h2-article',\n H3_ARTICLE: 'h3-article',\n H4_ARTICLE: 'h4-article',\n H5_ARTICLE: 'h5-article',\n B1_ARTICLE: 'b1-article',\n B2_ARTICLE: 'b2-article',\n B3_ARTICLE: 'b3-article',\n QUOTE_BRAND: 'quote-brand',\n QUOTE_NEUTRAL: 'quote-neutral',\n HIGHLIGHT_NEUTRAL: 'highlight-neutral',\n HIGHLIGHT_BRAND: 'highlight-brand',\n HIGHLIGHT_IMPORTANT: 'highlight-important',\n HIGHLIGHT_CRITICAL: 'highlight-critical',\n FEEDBACK_BRAND: 'feedback-brand',\n FEEDBACK_NEUTRAL: 'feedback-neutral',\n FEEDBACK_IMPORTANT: 'feedback-important',\n FEEDBACK_CRITICAL: 'feedback-critical',\n BUTTON: 'button',\n BUTTON_SML_TITLE: 'button-sml-title',\n BUTTON_MED_TITLE: 'button-med-title',\n BUTTON_LRG_TITLE: 'button-lrg-title',\n LINK: 'link',\n LINK_SML_TITLE: 'link-sml-title',\n LINK_MED_TITLE: 'link-med-title',\n LINK_LRG_TITLE: 'link-lrg-title',\n} as const;\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAwC;AAGjC,MAAM,mBAAmB;AAEzB,MAAM,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA,EAK9B,oBAAoB;AACtB;AAIO,MAAM,qBAAqB;AAAA;AAAA,EAEhC,CAAC,iBAAiB,kBAAkB,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA,EAKvC,sBAAsB;AAAA,EACtB,oBAAoB;AACtB;AAEO,MAAM,yBAAyB;AAAA,EACpC,OAAG,0CAAwB,kBAAkB,gBAAgB;AAAA,EAC7D,GAAG;AACL;AAEO,MAAM,sBAAiD;AAAA,EAC5D,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,WAAW;AAAA,EACX,WAAW;AAAA,EACX,WAAW;AAAA,EACX,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU;AAAA,EACV,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,eAAe;AAAA,EACf,mBAAmB;AAAA,EACnB,iBAAiB;AAAA,EACjB,qBAAqB;AAAA,EACrB,oBAAoB;AAAA,EACpB,gBAAgB;AAAA,EAChB,kBAAkB;AAAA,EAClB,oBAAoB;AAAA,EACpB,mBAAmB;AAAA,EACnB,QAAQ;AAAA,EACR,kBAAkB;AAAA,EAClB,kBAAkB;AAAA,EAClB,kBAAkB;AAAA,EAClB,MAAM;AAAA,EACN,gBAAgB;AAAA,EAChB,gBAAgB;AAAA,EAChB,gBAAgB;AAClB;",
6
6
  "names": []
7
7
  }
package/dist/cjs/parts/variants/body.js CHANGED
@@ -101,6 +101,16 @@ const VARIANTS_CSS_BODY = {
101
101
  line-height: ${(props) => props.lineHeight ?? "1.23rem"};
102
102
  }
103
103
  font-weight: 400;
104
+ `,
105
+ [import_constants.TYPOGRAPHY_VARIANTS.B3_STRONG]: import_ds_system.css`
106
+ font-size: ${(props) => props.fontSize ?? "0.7475rem"};
107
+ line-height: ${(props) => props.lineHeight ?? "0.999375rem"};
108
+ color: ${(props) => props.theme.colors.neutral[700]};
109
+ @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
110
+ font-size: ${(props) => props.fontSize ?? "0.92rem"};
111
+ line-height: ${(props) => props.lineHeight ?? "1.23rem"};
112
+ }
113
+ font-weight: 600;
104
114
  `
105
115
  };
106
116
  //# sourceMappingURL=body.js.map
package/dist/cjs/parts/variants/body.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/parts/variants/body.ts", "../../../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["import { css } from '@elliemae/ds-system';\nimport { TYPOGRAPHY_VARIANTS } from '../../constants/index.js';\nimport type { DSTypographyT } from '../../react-desc-prop-types.js';\n\n// typescript \"hack\" to infer the ReturnType of a generic function (css) with a generic argument (DSTypographyT.StyledPropsInterface)\n// as of 14/november/2023 I was not able to find a better way to do this.\nconst typedCss = () => css<DSTypographyT.StyledPropsInterface>``;\ntype BodyCSSMap = {\n [key in DSTypographyT.BodyVariants]: ReturnType<typeof typedCss>;\n};\n\n// as of 14/november/2023\n// mobile -> font-size: 16px\n// desktop -> font-size: 13px\n// the \"magic values\" of the rem units are the result of the following formula:\n// (variant's requirement px/RT value / 16px) for mobile\n// (variant's requirement px/RT value / 13px) for desktop\nexport const VARIANTS_CSS_BODY: BodyCSSMap = {\n [TYPOGRAPHY_VARIANTS.B1]: css<DSTypographyT.StyledPropsInterface>`\n font-size: ${(props) => props.fontSize ?? '0.8775000000000001rem'};\n line-height: ${(props) => props.lineHeight ?? '1.1212499999999999rem'};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? '1.08rem'};\n line-height: ${(props) => props.lineHeight ?? '1.38rem'};\n }\n font-weight: 400;\n `,\n [TYPOGRAPHY_VARIANTS.B2]: css<DSTypographyT.StyledPropsInterface>`\n font-size: ${(props) => props.fontSize ?? '0.8125rem'};\n line-height: ${(props) => props.lineHeight ?? '1.064375rem'};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? '1rem'};\n line-height: ${(props) => props.lineHeight ?? '1.31rem'};\n }\n font-weight: 400;\n `,\n [TYPOGRAPHY_VARIANTS.B3]: css<DSTypographyT.StyledPropsInterface>`\n font-size: ${(props) => props.fontSize ?? '0.7475rem'};\n line-height: ${(props) => props.lineHeight ?? '0.999375rem'};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? '0.92rem'};\n line-height: ${(props) => props.lineHeight ?? '1.23rem'};\n }\n font-weight: 400;\n `,\n [TYPOGRAPHY_VARIANTS.B4]: css<DSTypographyT.StyledPropsInterface>`\n font-size: ${(props) => props.fontSize ?? '0.6906249999999999rem'};\n line-height: ${(props) => props.lineHeight ?? '0.8125rem'};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? '0.85rem'};\n line-height: ${(props) => props.lineHeight ?? '1rem'};\n }\n font-weight: 400;\n `,\n [TYPOGRAPHY_VARIANTS.B1_LIGHT]: css<DSTypographyT.StyledPropsInterface>`\n font-size: ${(props) => props.fontSize ?? '0.8775000000000001rem'};\n line-height: ${(props) => props.lineHeight ?? '1.1212499999999999rem'};\n color: ${(props) => props.theme.colors.neutral[600]};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? '1.08rem'};\n line-height: ${(props) => props.lineHeight ?? '1.38rem'};\n }\n font-weight: 400;\n `,\n [TYPOGRAPHY_VARIANTS.B2_LIGHT]: css<DSTypographyT.StyledPropsInterface>`\n font-size: ${(props) => props.fontSize ?? '0.8125rem'};\n line-height: ${(props) => props.lineHeight ?? '1.064375rem'};\n color: ${(props) => props.theme.colors.neutral[600]};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? '1rem'};\n line-height: ${(props) => props.lineHeight ?? '1.31rem'};\n }\n font-weight: 400;\n `,\n [TYPOGRAPHY_VARIANTS.B3_LIGHT]: css<DSTypographyT.StyledPropsInterface>`\n font-size: ${(props) => props.fontSize ?? '0.7475rem'};\n line-height: ${(props) => props.lineHeight ?? '0.999375rem'};\n color: ${(props) => props.theme.colors.neutral[600]};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? '0.92rem'};\n line-height: ${(props) => props.lineHeight ?? '1.23rem'};\n }\n font-weight: 400;\n `,\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAoB;AACpB,uBAAoC;AAKpC,MAAM,WAAW,MAAM;AAWhB,MAAM,oBAAgC;AAAA,EAC3C,CAAC,qCAAoB,EAAE,GAAG;AAAA,iBACX,CAAC,UAAU,MAAM,YAAY,uBAAuB;AAAA,mBAClD,CAAC,UAAU,MAAM,cAAc,uBAAuB;AAAA,yBAChD,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,KAAK;AAAA,mBAC5C,CAAC,UAAU,MAAM,YAAY,SAAS;AAAA,qBACpC,CAAC,UAAU,MAAM,cAAc,SAAS;AAAA;AAAA;AAAA;AAAA,EAI3D,CAAC,qCAAoB,EAAE,GAAG;AAAA,iBACX,CAAC,UAAU,MAAM,YAAY,WAAW;AAAA,mBACtC,CAAC,UAAU,MAAM,cAAc,aAAa;AAAA,yBACtC,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,KAAK;AAAA,mBAC5C,CAAC,UAAU,MAAM,YAAY,MAAM;AAAA,qBACjC,CAAC,UAAU,MAAM,cAAc,SAAS;AAAA;AAAA;AAAA;AAAA,EAI3D,CAAC,qCAAoB,EAAE,GAAG;AAAA,iBACX,CAAC,UAAU,MAAM,YAAY,WAAW;AAAA,mBACtC,CAAC,UAAU,MAAM,cAAc,aAAa;AAAA,yBACtC,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,KAAK;AAAA,mBAC5C,CAAC,UAAU,MAAM,YAAY,SAAS;AAAA,qBACpC,CAAC,UAAU,MAAM,cAAc,SAAS;AAAA;AAAA;AAAA;AAAA,EAI3D,CAAC,qCAAoB,EAAE,GAAG;AAAA,iBACX,CAAC,UAAU,MAAM,YAAY,uBAAuB;AAAA,mBAClD,CAAC,UAAU,MAAM,cAAc,WAAW;AAAA,yBACpC,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,KAAK;AAAA,mBAC5C,CAAC,UAAU,MAAM,YAAY,SAAS;AAAA,qBACpC,CAAC,UAAU,MAAM,cAAc,MAAM;AAAA;AAAA;AAAA;AAAA,EAIxD,CAAC,qCAAoB,QAAQ,GAAG;AAAA,iBACjB,CAAC,UAAU,MAAM,YAAY,uBAAuB;AAAA,mBAClD,CAAC,UAAU,MAAM,cAAc,uBAAuB;AAAA,aAC5D,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,yBAC9B,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,KAAK;AAAA,mBAC5C,CAAC,UAAU,MAAM,YAAY,SAAS;AAAA,qBACpC,CAAC,UAAU,MAAM,cAAc,SAAS;AAAA;AAAA;AAAA;AAAA,EAI3D,CAAC,qCAAoB,QAAQ,GAAG;AAAA,iBACjB,CAAC,UAAU,MAAM,YAAY,WAAW;AAAA,mBACtC,CAAC,UAAU,MAAM,cAAc,aAAa;AAAA,aAClD,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,yBAC9B,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,KAAK;AAAA,mBAC5C,CAAC,UAAU,MAAM,YAAY,MAAM;AAAA,qBACjC,CAAC,UAAU,MAAM,cAAc,SAAS;AAAA;AAAA;AAAA;AAAA,EAI3D,CAAC,qCAAoB,QAAQ,GAAG;AAAA,iBACjB,CAAC,UAAU,MAAM,YAAY,WAAW;AAAA,mBACtC,CAAC,UAAU,MAAM,cAAc,aAAa;AAAA,aAClD,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,yBAC9B,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,KAAK;AAAA,mBAC5C,CAAC,UAAU,MAAM,YAAY,SAAS;AAAA,qBACpC,CAAC,UAAU,MAAM,cAAc,SAAS;AAAA;AAAA;AAAA;AAI7D;",
4
+ "sourcesContent": ["import { css } from '@elliemae/ds-system';\nimport { TYPOGRAPHY_VARIANTS } from '../../constants/index.js';\nimport type { DSTypographyT } from '../../react-desc-prop-types.js';\n\n// typescript \"hack\" to infer the ReturnType of a generic function (css) with a generic argument (DSTypographyT.StyledPropsInterface)\n// as of 14/november/2023 I was not able to find a better way to do this.\nconst typedCss = () => css<DSTypographyT.StyledPropsInterface>``;\ntype BodyCSSMap = {\n [key in DSTypographyT.BodyVariants]: ReturnType<typeof typedCss>;\n};\n\n// as of 14/november/2023\n// mobile -> font-size: 16px\n// desktop -> font-size: 13px\n// the \"magic values\" of the rem units are the result of the following formula:\n// (variant's requirement px/RT value / 16px) for mobile\n// (variant's requirement px/RT value / 13px) for desktop\nexport const VARIANTS_CSS_BODY: BodyCSSMap = {\n [TYPOGRAPHY_VARIANTS.B1]: css<DSTypographyT.StyledPropsInterface>`\n font-size: ${(props) => props.fontSize ?? '0.8775000000000001rem'};\n line-height: ${(props) => props.lineHeight ?? '1.1212499999999999rem'};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? '1.08rem'};\n line-height: ${(props) => props.lineHeight ?? '1.38rem'};\n }\n font-weight: 400;\n `,\n [TYPOGRAPHY_VARIANTS.B2]: css<DSTypographyT.StyledPropsInterface>`\n font-size: ${(props) => props.fontSize ?? '0.8125rem'};\n line-height: ${(props) => props.lineHeight ?? '1.064375rem'};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? '1rem'};\n line-height: ${(props) => props.lineHeight ?? '1.31rem'};\n }\n font-weight: 400;\n `,\n [TYPOGRAPHY_VARIANTS.B3]: css<DSTypographyT.StyledPropsInterface>`\n font-size: ${(props) => props.fontSize ?? '0.7475rem'};\n line-height: ${(props) => props.lineHeight ?? '0.999375rem'};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? '0.92rem'};\n line-height: ${(props) => props.lineHeight ?? '1.23rem'};\n }\n font-weight: 400;\n `,\n [TYPOGRAPHY_VARIANTS.B4]: css<DSTypographyT.StyledPropsInterface>`\n font-size: ${(props) => props.fontSize ?? '0.6906249999999999rem'};\n line-height: ${(props) => props.lineHeight ?? '0.8125rem'};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? '0.85rem'};\n line-height: ${(props) => props.lineHeight ?? '1rem'};\n }\n font-weight: 400;\n `,\n [TYPOGRAPHY_VARIANTS.B1_LIGHT]: css<DSTypographyT.StyledPropsInterface>`\n font-size: ${(props) => props.fontSize ?? '0.8775000000000001rem'};\n line-height: ${(props) => props.lineHeight ?? '1.1212499999999999rem'};\n color: ${(props) => props.theme.colors.neutral[600]};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? '1.08rem'};\n line-height: ${(props) => props.lineHeight ?? '1.38rem'};\n }\n font-weight: 400;\n `,\n [TYPOGRAPHY_VARIANTS.B2_LIGHT]: css<DSTypographyT.StyledPropsInterface>`\n font-size: ${(props) => props.fontSize ?? '0.8125rem'};\n line-height: ${(props) => props.lineHeight ?? '1.064375rem'};\n color: ${(props) => props.theme.colors.neutral[600]};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? '1rem'};\n line-height: ${(props) => props.lineHeight ?? '1.31rem'};\n }\n font-weight: 400;\n `,\n [TYPOGRAPHY_VARIANTS.B3_LIGHT]: css<DSTypographyT.StyledPropsInterface>`\n font-size: ${(props) => props.fontSize ?? '0.7475rem'};\n line-height: ${(props) => props.lineHeight ?? '0.999375rem'};\n color: ${(props) => props.theme.colors.neutral[600]};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? '0.92rem'};\n line-height: ${(props) => props.lineHeight ?? '1.23rem'};\n }\n font-weight: 400;\n `,\n [TYPOGRAPHY_VARIANTS.B3_STRONG]: css<DSTypographyT.StyledPropsInterface>`\n font-size: ${(props) => props.fontSize ?? '0.7475rem'};\n line-height: ${(props) => props.lineHeight ?? '0.999375rem'};\n color: ${(props) => props.theme.colors.neutral[700]};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? '0.92rem'};\n line-height: ${(props) => props.lineHeight ?? '1.23rem'};\n }\n font-weight: 600;\n `,\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
package/dist/cjs/react-desc-prop-types.js CHANGED
@@ -53,6 +53,7 @@ const DSTypographyPropTypes = {
53
53
  "b1-light",
54
54
  "b2-light",
55
55
  "b3-light",
56
+ "b3-strong",
56
57
  "button",
57
58
  "button-sml-title",
58
59
  "button-med-title",
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 TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type { GlobalAttributesT, XstyledProps, DSPropTypesSchema } 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 export type HeadingVariants = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h3-strong' | 'h4-strong' | 'h5-strong';\n export type BodyVariants = 'b1' | 'b2' | 'b3' | 'b4' | 'b1-light' | 'b2-light' | 'b3-light';\n export type ButtonVariants = 'button' | 'button-sml-title' | 'button-med-title' | 'button-lrg-title';\n export type LinkVariants = 'link' | 'link-sml-title' | 'link-med-title' | 'link-lrg-title';\n export type QuoteVariants = 'quote-brand' | 'quote-neutral';\n export type HighlightVariants =\n | 'highlight-neutral'\n | 'highlight-brand'\n | 'highlight-important'\n | 'highlight-critical';\n export type FeedbackVariants = 'feedback-neutral' | 'feedback-brand' | 'feedback-important' | 'feedback-critical';\n export type ArticleHeadingVariants = 'h1-article' | 'h2-article' | 'h3-article' | 'h4-article' | 'h5-article';\n export type ArticleBodyVariants = 'b1-article' | 'b2-article' | 'b3-article';\n\n export type Variant =\n | HeadingVariants\n | BodyVariants\n | ButtonVariants\n | LinkVariants\n | QuoteVariants\n | HighlightVariants\n | ArticleHeadingVariants\n | ArticleBodyVariants\n | FeedbackVariants;\n\n export type VariantsMap = {\n [key in Uppercase<TypescriptHelpersT.KebabToSnakeCase<Variant>>]: Lowercase<\n TypescriptHelpersT.SnakeToKebabCase<key>\n >;\n };\n\n export type StyledPropsInterface = FontSizeProps &\n LineHeightProps &\n ColorProps & {\n children: DSTypographyT.InternalProps['children'];\n variant: DSTypographyT.Variant;\n $truncateWithEllipsis?: boolean;\n $truncateWithReadMore?: DSTypographyT.InternalProps['truncateWithReadMore'];\n };\n\n export interface RequiredProps {\n variant: Variant;\n children: React.ReactNode | React.ReactNode[];\n }\n\n export interface OptionalProps {\n as?: keyof React.JSX.IntrinsicElements;\n component?: keyof React.JSX.IntrinsicElements;\n innerRef?: React.MutableRefObject<HTMLDivElement | null> | React.RefCallback<HTMLDivElement>;\n truncateWithReadMore?: {\n lines: number;\n expanded: boolean;\n };\n }\n\n export interface DefaultProps {\n truncateWithEllipsis: boolean;\n }\n\n export interface Props\n extends Partial<DefaultProps>,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps | 'color'>,\n XstyledProps,\n FontSizeProps,\n LineHeightProps,\n ColorProps,\n RequiredProps {}\n\n export interface InternalProps\n extends DefaultProps,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps | 'color'>,\n XstyledProps,\n FontSizeProps,\n LineHeightProps,\n ColorProps,\n RequiredProps {}\n}\n\nexport const DSTypographyPropTypes: DSPropTypesSchema<DSTypographyT.Props> = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n variant: PropTypes.oneOf([\n 'h1',\n 'h2',\n 'h3',\n 'h4',\n 'h5',\n 'h3-strong',\n 'h4-strong',\n 'h5-strong',\n 'b1',\n 'b2',\n 'b3',\n 'b4',\n 'b1-light',\n 'b2-light',\n 'b3-light',\n 'button',\n 'button-sml-title',\n 'button-med-title',\n 'button-lrg-title',\n 'link',\n 'link-sml-title',\n 'link-med-title',\n 'link-lrg-title',\n 'quote-brand',\n 'quote-neutral',\n 'highlight-neutral',\n 'highlight-brand',\n 'highlight-important',\n 'highlight-critical',\n 'feedback-neutral',\n 'feedback-brand',\n 'feedback-important',\n 'feedback-critical',\n 'h1-article',\n 'h2-article',\n 'h3-article',\n 'h4-article',\n 'h5-article',\n 'b1-article',\n 'b2-article',\n 'b3-article',\n ]).description(\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 'quote-brand' => <pre />,\n 'quote-neutral' => <pre />,\n 'highlight-neutral' => <span />,\n 'highlight-brand' => <span />,\n 'highlight-important' => <span />,\n 'highlight-critical' => <span />,\n 'h1-article' => <h1 />,\n 'h2-article' => <h2 />,\n 'h3-article' => <h3 />,\n 'h4-article' => <h4 />,\n 'h5-article' => <h5 />,\n 'b1-article' => <p />,\n 'b2-article' => <p />,\n 'b3-article' => <p />,\n `,\n ).isRequired,\n children: PropTypes.node.description('Children element').isRequired,\n innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).description('Inner ref to font component.'),\n fontSize: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.object, PropTypes.bool])\n .description('Applies to the root container. For more info read xstyled docs')\n .xstyled(),\n lineHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.object, PropTypes.bool])\n .description('Applies to the root container. For more info read xstyled docs')\n .xstyled(),\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 truncateWithEllipsis: PropTypes.bool\n .description('If true, the text will not wrap, but instead will truncate with a text overflow ellipsis.')\n .defaultValue(false),\n truncateWithReadMore: PropTypes.shape({\n lines: PropTypes.number.description('Number of lines to truncate to.'),\n expanded: PropTypes.bool.description('If true, the text will be expanded.'),\n }).description(\n 'Ammount of lines to truncate to. If expanded, the text will be expanded. Use in conjunction with useReadMoreTruncate hook',\n ),\n};\n\n// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\nexport const DSTypographyPropTypesSchema = DSTypographyPropTypes as unknown as WeakValidationMap<DSTypographyT.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,8BAAuE;AAqFhE,MAAM,wBAAgE;AAAA,EAC3E,GAAG;AAAA,EACH,GAAG;AAAA,EACH,SAAS,kCAAU,MAAM;AAAA,IACvB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC,EAAE;AAAA,IACD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA4BF,EAAE;AAAA,EACF,UAAU,kCAAU,KAAK,YAAY,kBAAkB,EAAE;AAAA,EACzD,UAAU,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU,IAAI,CAAC,EAAE,YAAY,8BAA8B;AAAA,EAC5G,UAAU,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU,QAAQ,kCAAU,QAAQ,kCAAU,IAAI,CAAC,EACjG,YAAY,gEAAgE,EAC5E,QAAQ;AAAA,EACX,YAAY,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU,QAAQ,kCAAU,QAAQ,kCAAU,IAAI,CAAC,EACnG,YAAY,gEAAgE,EAC5E,QAAQ;AAAA,EACX,IAAI,kCAAU,OAAO,YAAY,8DAA8D;AAAA,EAC/F,WAAW,kCAAU,OAAO;AAAA,IAC1B;AAAA,EACF;AAAA,EACA,sBAAsB,kCAAU,KAC7B,YAAY,2FAA2F,EACvG,aAAa,KAAK;AAAA,EACrB,sBAAsB,kCAAU,MAAM;AAAA,IACpC,OAAO,kCAAU,OAAO,YAAY,iCAAiC;AAAA,IACrE,UAAU,kCAAU,KAAK,YAAY,qCAAqC;AAAA,EAC5E,CAAC,EAAE;AAAA,IACD;AAAA,EACF;AACF;AAGO,MAAM,8BAA8B;",
4
+ "sourcesContent": ["import { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type { GlobalAttributesT, XstyledProps, DSPropTypesSchema } 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 export type HeadingVariants = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h3-strong' | 'h4-strong' | 'h5-strong';\n export type BodyVariants = 'b1' | 'b2' | 'b3' | 'b4' | 'b1-light' | 'b2-light' | 'b3-light' | 'b3-strong';\n export type ButtonVariants = 'button' | 'button-sml-title' | 'button-med-title' | 'button-lrg-title';\n export type LinkVariants = 'link' | 'link-sml-title' | 'link-med-title' | 'link-lrg-title';\n export type QuoteVariants = 'quote-brand' | 'quote-neutral';\n export type HighlightVariants =\n | 'highlight-neutral'\n | 'highlight-brand'\n | 'highlight-important'\n | 'highlight-critical';\n export type FeedbackVariants = 'feedback-neutral' | 'feedback-brand' | 'feedback-important' | 'feedback-critical';\n export type ArticleHeadingVariants = 'h1-article' | 'h2-article' | 'h3-article' | 'h4-article' | 'h5-article';\n export type ArticleBodyVariants = 'b1-article' | 'b2-article' | 'b3-article';\n\n export type Variant =\n | HeadingVariants\n | BodyVariants\n | ButtonVariants\n | LinkVariants\n | QuoteVariants\n | HighlightVariants\n | ArticleHeadingVariants\n | ArticleBodyVariants\n | FeedbackVariants;\n\n export type VariantsMap = {\n [key in Uppercase<TypescriptHelpersT.KebabToSnakeCase<Variant>>]: Lowercase<\n TypescriptHelpersT.SnakeToKebabCase<key>\n >;\n };\n\n export type StyledPropsInterface = FontSizeProps &\n LineHeightProps &\n ColorProps & {\n children: DSTypographyT.InternalProps['children'];\n variant: DSTypographyT.Variant;\n $truncateWithEllipsis?: boolean;\n $truncateWithReadMore?: DSTypographyT.InternalProps['truncateWithReadMore'];\n };\n\n export interface RequiredProps {\n variant: Variant;\n children: React.ReactNode | React.ReactNode[];\n }\n\n export interface OptionalProps {\n as?: keyof React.JSX.IntrinsicElements;\n component?: keyof React.JSX.IntrinsicElements;\n innerRef?: React.MutableRefObject<HTMLDivElement | null> | React.RefCallback<HTMLDivElement>;\n truncateWithReadMore?: {\n lines: number;\n expanded: boolean;\n };\n }\n\n export interface DefaultProps {\n truncateWithEllipsis: boolean;\n }\n\n export interface Props\n extends Partial<DefaultProps>,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps | 'color'>,\n XstyledProps,\n FontSizeProps,\n LineHeightProps,\n ColorProps,\n RequiredProps {}\n\n export interface InternalProps\n extends DefaultProps,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps | 'color'>,\n XstyledProps,\n FontSizeProps,\n LineHeightProps,\n ColorProps,\n RequiredProps {}\n}\n\nexport const DSTypographyPropTypes: DSPropTypesSchema<DSTypographyT.Props> = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n variant: PropTypes.oneOf([\n 'h1',\n 'h2',\n 'h3',\n 'h4',\n 'h5',\n 'h3-strong',\n 'h4-strong',\n 'h5-strong',\n 'b1',\n 'b2',\n 'b3',\n 'b4',\n 'b1-light',\n 'b2-light',\n 'b3-light',\n 'b3-strong',\n 'button',\n 'button-sml-title',\n 'button-med-title',\n 'button-lrg-title',\n 'link',\n 'link-sml-title',\n 'link-med-title',\n 'link-lrg-title',\n 'quote-brand',\n 'quote-neutral',\n 'highlight-neutral',\n 'highlight-brand',\n 'highlight-important',\n 'highlight-critical',\n 'feedback-neutral',\n 'feedback-brand',\n 'feedback-important',\n 'feedback-critical',\n 'h1-article',\n 'h2-article',\n 'h3-article',\n 'h4-article',\n 'h5-article',\n 'b1-article',\n 'b2-article',\n 'b3-article',\n ]).description(\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 'quote-brand' => <pre />,\n 'quote-neutral' => <pre />,\n 'highlight-neutral' => <span />,\n 'highlight-brand' => <span />,\n 'highlight-important' => <span />,\n 'highlight-critical' => <span />,\n 'h1-article' => <h1 />,\n 'h2-article' => <h2 />,\n 'h3-article' => <h3 />,\n 'h4-article' => <h4 />,\n 'h5-article' => <h5 />,\n 'b1-article' => <p />,\n 'b2-article' => <p />,\n 'b3-article' => <p />,\n `,\n ).isRequired,\n children: PropTypes.node.description('Children element').isRequired,\n innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).description('Inner ref to font component.'),\n fontSize: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.object, PropTypes.bool])\n .description('Applies to the root container. For more info read xstyled docs')\n .xstyled(),\n lineHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.object, PropTypes.bool])\n .description('Applies to the root container. For more info read xstyled docs')\n .xstyled(),\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 truncateWithEllipsis: PropTypes.bool\n .description('If true, the text will not wrap, but instead will truncate with a text overflow ellipsis.')\n .defaultValue(false),\n truncateWithReadMore: PropTypes.shape({\n lines: PropTypes.number.description('Number of lines to truncate to.'),\n expanded: PropTypes.bool.description('If true, the text will be expanded.'),\n }).description(\n 'Ammount of lines to truncate to. If expanded, the text will be expanded. Use in conjunction with useReadMoreTruncate hook',\n ),\n};\n\n// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\nexport const DSTypographyPropTypesSchema = DSTypographyPropTypes as unknown as WeakValidationMap<DSTypographyT.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,8BAAuE;AAqFhE,MAAM,wBAAgE;AAAA,EAC3E,GAAG;AAAA,EACH,GAAG;AAAA,EACH,SAAS,kCAAU,MAAM;AAAA,IACvB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC,EAAE;AAAA,IACD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA4BF,EAAE;AAAA,EACF,UAAU,kCAAU,KAAK,YAAY,kBAAkB,EAAE;AAAA,EACzD,UAAU,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU,IAAI,CAAC,EAAE,YAAY,8BAA8B;AAAA,EAC5G,UAAU,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU,QAAQ,kCAAU,QAAQ,kCAAU,IAAI,CAAC,EACjG,YAAY,gEAAgE,EAC5E,QAAQ;AAAA,EACX,YAAY,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU,QAAQ,kCAAU,QAAQ,kCAAU,IAAI,CAAC,EACnG,YAAY,gEAAgE,EAC5E,QAAQ;AAAA,EACX,IAAI,kCAAU,OAAO,YAAY,8DAA8D;AAAA,EAC/F,WAAW,kCAAU,OAAO;AAAA,IAC1B;AAAA,EACF;AAAA,EACA,sBAAsB,kCAAU,KAC7B,YAAY,2FAA2F,EACvG,aAAa,KAAK;AAAA,EACrB,sBAAsB,kCAAU,MAAM;AAAA,IACpC,OAAO,kCAAU,OAAO,YAAY,iCAAiC;AAAA,IACrE,UAAU,kCAAU,KAAK,YAAY,qCAAqC;AAAA,EAC5E,CAAC,EAAE;AAAA,IACD;AAAA,EACF;AACF;AAGO,MAAM,8BAA8B;",
6
6
  "names": []
7
7
  }
package/dist/esm/config/useDefaultProps.js CHANGED
@@ -16,6 +16,7 @@ const VariantToAsMap = {
16
16
  "b1-light": "p",
17
17
  "b2-light": "p",
18
18
  "b3-light": "p",
19
+ "b3-strong": "p",
19
20
  button: "button",
20
21
  "button-sml-title": "button",
21
22
  "button-med-title": "button",
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.js';\n\nconst VariantToAsMap: Record<DSTypographyT.Variant, keyof React.JSX.IntrinsicElements> = {\n h1: 'h1',\n h2: 'h2',\n h3: 'h3',\n h4: 'h4',\n h5: 'h5',\n 'h3-strong': 'h3',\n 'h4-strong': 'h4',\n 'h5-strong': 'h5',\n b1: 'p',\n b2: 'p',\n b3: 'p',\n b4: 'p',\n 'b1-light': 'p',\n 'b2-light': 'p',\n 'b3-light': 'p',\n button: 'button',\n 'button-sml-title': 'button',\n 'button-med-title': 'button',\n 'button-lrg-title': 'button',\n link: 'a',\n 'link-sml-title': 'a',\n 'link-med-title': 'a',\n 'link-lrg-title': 'a',\n 'quote-brand': 'pre',\n 'quote-neutral': 'pre',\n 'highlight-neutral': 'span',\n 'highlight-brand': 'span',\n 'highlight-important': 'span',\n 'highlight-critical': 'span',\n 'feedback-neutral': 'span',\n 'feedback-brand': 'span',\n 'feedback-important': 'span',\n 'feedback-critical': 'span',\n 'h1-article': 'h1',\n 'h2-article': 'h2',\n 'h3-article': 'h3',\n 'h4-article': 'h4',\n 'h5-article': 'h5',\n 'b1-article': 'p',\n 'b2-article': 'p',\n 'b3-article': 'p',\n};\nexport const useDefaultProps = ({\n variant,\n component,\n as: userAs,\n}: DSTypographyT.Props): { as: keyof React.JSX.IntrinsicElements } => {\n // component prop has higher priority than as prop and variant prop\n const defaultAs = component || userAs || VariantToAsMap[variant];\n const defaultProps = React.useMemo(() => ({ as: defaultAs }), [defaultAs]);\n return defaultProps;\n};\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAGlB,MAAM,iBAAmF;AAAA,EACvF,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,aAAa;AAAA,EACb,aAAa;AAAA,EACb,aAAa;AAAA,EACb,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,QAAQ;AAAA,EACR,oBAAoB;AAAA,EACpB,oBAAoB;AAAA,EACpB,oBAAoB;AAAA,EACpB,MAAM;AAAA,EACN,kBAAkB;AAAA,EAClB,kBAAkB;AAAA,EAClB,kBAAkB;AAAA,EAClB,eAAe;AAAA,EACf,iBAAiB;AAAA,EACjB,qBAAqB;AAAA,EACrB,mBAAmB;AAAA,EACnB,uBAAuB;AAAA,EACvB,sBAAsB;AAAA,EACtB,oBAAoB;AAAA,EACpB,kBAAkB;AAAA,EAClB,sBAAsB;AAAA,EACtB,qBAAqB;AAAA,EACrB,cAAc;AAAA,EACd,cAAc;AAAA,EACd,cAAc;AAAA,EACd,cAAc;AAAA,EACd,cAAc;AAAA,EACd,cAAc;AAAA,EACd,cAAc;AAAA,EACd,cAAc;AAChB;AACO,MAAM,kBAAkB,CAAC;AAAA,EAC9B;AAAA,EACA;AAAA,EACA,IAAI;AACN,MAAsE;AAEpE,QAAM,YAAY,aAAa,UAAU,eAAe,OAAO;AAC/D,QAAM,eAAeA,OAAM,QAAQ,OAAO,EAAE,IAAI,UAAU,IAAI,CAAC,SAAS,CAAC;AACzE,SAAO;AACT;",
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.Variant, keyof React.JSX.IntrinsicElements> = {\n h1: 'h1',\n h2: 'h2',\n h3: 'h3',\n h4: 'h4',\n h5: 'h5',\n 'h3-strong': 'h3',\n 'h4-strong': 'h4',\n 'h5-strong': 'h5',\n b1: 'p',\n b2: 'p',\n b3: 'p',\n b4: 'p',\n 'b1-light': 'p',\n 'b2-light': 'p',\n 'b3-light': 'p',\n 'b3-strong': 'p',\n button: 'button',\n 'button-sml-title': 'button',\n 'button-med-title': 'button',\n 'button-lrg-title': 'button',\n link: 'a',\n 'link-sml-title': 'a',\n 'link-med-title': 'a',\n 'link-lrg-title': 'a',\n 'quote-brand': 'pre',\n 'quote-neutral': 'pre',\n 'highlight-neutral': 'span',\n 'highlight-brand': 'span',\n 'highlight-important': 'span',\n 'highlight-critical': 'span',\n 'feedback-neutral': 'span',\n 'feedback-brand': 'span',\n 'feedback-important': 'span',\n 'feedback-critical': 'span',\n 'h1-article': 'h1',\n 'h2-article': 'h2',\n 'h3-article': 'h3',\n 'h4-article': 'h4',\n 'h5-article': 'h5',\n 'b1-article': 'p',\n 'b2-article': 'p',\n 'b3-article': 'p',\n};\nexport const useDefaultProps = ({\n variant,\n component,\n as: userAs,\n}: DSTypographyT.Props): { as: keyof React.JSX.IntrinsicElements } => {\n // component prop has higher priority than as prop and variant prop\n const defaultAs = component || userAs || VariantToAsMap[variant];\n const defaultProps = React.useMemo(() => ({ as: defaultAs }), [defaultAs]);\n return defaultProps;\n};\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAGlB,MAAM,iBAAmF;AAAA,EACvF,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,aAAa;AAAA,EACb,aAAa;AAAA,EACb,aAAa;AAAA,EACb,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,QAAQ;AAAA,EACR,oBAAoB;AAAA,EACpB,oBAAoB;AAAA,EACpB,oBAAoB;AAAA,EACpB,MAAM;AAAA,EACN,kBAAkB;AAAA,EAClB,kBAAkB;AAAA,EAClB,kBAAkB;AAAA,EAClB,eAAe;AAAA,EACf,iBAAiB;AAAA,EACjB,qBAAqB;AAAA,EACrB,mBAAmB;AAAA,EACnB,uBAAuB;AAAA,EACvB,sBAAsB;AAAA,EACtB,oBAAoB;AAAA,EACpB,kBAAkB;AAAA,EAClB,sBAAsB;AAAA,EACtB,qBAAqB;AAAA,EACrB,cAAc;AAAA,EACd,cAAc;AAAA,EACd,cAAc;AAAA,EACd,cAAc;AAAA,EACd,cAAc;AAAA,EACd,cAAc;AAAA,EACd,cAAc;AAAA,EACd,cAAc;AAChB;AACO,MAAM,kBAAkB,CAAC;AAAA,EAC9B;AAAA,EACA;AAAA,EACA,IAAI;AACN,MAAsE;AAEpE,QAAM,YAAY,aAAa,UAAU,eAAe,OAAO;AAC/D,QAAM,eAAeA,OAAM,QAAQ,OAAO,EAAE,IAAI,UAAU,IAAI,CAAC,SAAS,CAAC;AACzE,SAAO;AACT;",
6
6
  "names": ["React"]
7
7
  }
package/dist/esm/constants/index.js CHANGED
@@ -38,6 +38,7 @@ const TYPOGRAPHY_VARIANTS = {
38
38
  B1_LIGHT: "b1-light",
39
39
  B2_LIGHT: "b2-light",
40
40
  B3_LIGHT: "b3-light",
41
+ B3_STRONG: "b3-strong",
41
42
  H1_ARTICLE: "h1-article",
42
43
  H2_ARTICLE: "h2-article",
43
44
  H3_ARTICLE: "h3-article",
package/dist/esm/constants/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/constants/index.ts"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { slotObjectToDataTestIds } from '@elliemae/ds-system';\nimport type { DSTypographyT } from '../react-desc-prop-types.js';\n\nexport const DSTypographyName = 'DSTypography';\n\nexport const TYPOGRAPHY_SLOTS = {\n // this is the only slot that was present before the slotObjectToDataTestIds function was created\n // since we have splitted the data-testid and the slot responsabilities in the styled helpers,\n // we can now freely change the \"values\" of this constant without implying breakign changes\n // if a user get a breaking change it's because they hardcoded the slot instead of using the constant.\n TYPOGRAPHY_ELEMENT: 'root',\n} as const;\n\n// this component was created before the slotObjectToDataTestIds function was created\n// to avoid breaking change we overwrite the slots that for legacy reason where not using the slotObjectToDataTestIds\nexport const LEGACY_DATA_TESTID = {\n // the new \"slot\" value -> 'root' need to point to the \"old\" data-testid value -> 'ds-typography-element'\n [TYPOGRAPHY_SLOTS.TYPOGRAPHY_ELEMENT]: 'ds-typography-element',\n // the old \"slot\" value -> 'typography-element' need to point to the \"old\" data-testid value -> 'ds-typography-element'\n // we are hardcoding this \"typography-element\" for legacy reason,\n // people that were using this constant doesn't expect us to change the `keys` arbitrarily,\n // having constant keys and changing value is literally the point of this kind of constants\n 'typography-element': 'ds-typography-element',\n TYPOGRAPHY_ELEMENT: 'ds-typography-element',\n};\n\nexport const TYPOGRAPHY_DATA_TESTID = {\n ...slotObjectToDataTestIds(DSTypographyName, TYPOGRAPHY_SLOTS),\n ...LEGACY_DATA_TESTID,\n};\n\nexport const TYPOGRAPHY_VARIANTS: DSTypographyT.VariantsMap = {\n H1: 'h1',\n H2: 'h2',\n H3: 'h3',\n H4: 'h4',\n H5: 'h5',\n H3_STRONG: 'h3-strong',\n H4_STRONG: 'h4-strong',\n H5_STRONG: 'h5-strong',\n B1: 'b1',\n B2: 'b2',\n B3: 'b3',\n B4: 'b4',\n B1_LIGHT: 'b1-light',\n B2_LIGHT: 'b2-light',\n B3_LIGHT: 'b3-light',\n H1_ARTICLE: 'h1-article',\n H2_ARTICLE: 'h2-article',\n H3_ARTICLE: 'h3-article',\n H4_ARTICLE: 'h4-article',\n H5_ARTICLE: 'h5-article',\n B1_ARTICLE: 'b1-article',\n B2_ARTICLE: 'b2-article',\n B3_ARTICLE: 'b3-article',\n QUOTE_BRAND: 'quote-brand',\n QUOTE_NEUTRAL: 'quote-neutral',\n HIGHLIGHT_NEUTRAL: 'highlight-neutral',\n HIGHLIGHT_BRAND: 'highlight-brand',\n HIGHLIGHT_IMPORTANT: 'highlight-important',\n HIGHLIGHT_CRITICAL: 'highlight-critical',\n FEEDBACK_BRAND: 'feedback-brand',\n FEEDBACK_NEUTRAL: 'feedback-neutral',\n FEEDBACK_IMPORTANT: 'feedback-important',\n FEEDBACK_CRITICAL: 'feedback-critical',\n BUTTON: 'button',\n BUTTON_SML_TITLE: 'button-sml-title',\n BUTTON_MED_TITLE: 'button-med-title',\n BUTTON_LRG_TITLE: 'button-lrg-title',\n LINK: 'link',\n LINK_SML_TITLE: 'link-sml-title',\n LINK_MED_TITLE: 'link-med-title',\n LINK_LRG_TITLE: 'link-lrg-title',\n} as const;\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;AAGjC,MAAM,mBAAmB;AAEzB,MAAM,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA,EAK9B,oBAAoB;AACtB;AAIO,MAAM,qBAAqB;AAAA;AAAA,EAEhC,CAAC,iBAAiB,kBAAkB,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA,EAKvC,sBAAsB;AAAA,EACtB,oBAAoB;AACtB;AAEO,MAAM,yBAAyB;AAAA,EACpC,GAAG,wBAAwB,kBAAkB,gBAAgB;AAAA,EAC7D,GAAG;AACL;AAEO,MAAM,sBAAiD;AAAA,EAC5D,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,WAAW;AAAA,EACX,WAAW;AAAA,EACX,WAAW;AAAA,EACX,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,eAAe;AAAA,EACf,mBAAmB;AAAA,EACnB,iBAAiB;AAAA,EACjB,qBAAqB;AAAA,EACrB,oBAAoB;AAAA,EACpB,gBAAgB;AAAA,EAChB,kBAAkB;AAAA,EAClB,oBAAoB;AAAA,EACpB,mBAAmB;AAAA,EACnB,QAAQ;AAAA,EACR,kBAAkB;AAAA,EAClB,kBAAkB;AAAA,EAClB,kBAAkB;AAAA,EAClB,MAAM;AAAA,EACN,gBAAgB;AAAA,EAChB,gBAAgB;AAAA,EAChB,gBAAgB;AAClB;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { slotObjectToDataTestIds } from '@elliemae/ds-system';\nimport type { DSTypographyT } from '../react-desc-prop-types.js';\n\nexport const DSTypographyName = 'DSTypography';\n\nexport const TYPOGRAPHY_SLOTS = {\n // this is the only slot that was present before the slotObjectToDataTestIds function was created\n // since we have splitted the data-testid and the slot responsabilities in the styled helpers,\n // we can now freely change the \"values\" of this constant without implying breakign changes\n // if a user get a breaking change it's because they hardcoded the slot instead of using the constant.\n TYPOGRAPHY_ELEMENT: 'root',\n} as const;\n\n// this component was created before the slotObjectToDataTestIds function was created\n// to avoid breaking change we overwrite the slots that for legacy reason where not using the slotObjectToDataTestIds\nexport const LEGACY_DATA_TESTID = {\n // the new \"slot\" value -> 'root' need to point to the \"old\" data-testid value -> 'ds-typography-element'\n [TYPOGRAPHY_SLOTS.TYPOGRAPHY_ELEMENT]: 'ds-typography-element',\n // the old \"slot\" value -> 'typography-element' need to point to the \"old\" data-testid value -> 'ds-typography-element'\n // we are hardcoding this \"typography-element\" for legacy reason,\n // people that were using this constant doesn't expect us to change the `keys` arbitrarily,\n // having constant keys and changing value is literally the point of this kind of constants\n 'typography-element': 'ds-typography-element',\n TYPOGRAPHY_ELEMENT: 'ds-typography-element',\n};\n\nexport const TYPOGRAPHY_DATA_TESTID = {\n ...slotObjectToDataTestIds(DSTypographyName, TYPOGRAPHY_SLOTS),\n ...LEGACY_DATA_TESTID,\n};\n\nexport const TYPOGRAPHY_VARIANTS: DSTypographyT.VariantsMap = {\n H1: 'h1',\n H2: 'h2',\n H3: 'h3',\n H4: 'h4',\n H5: 'h5',\n H3_STRONG: 'h3-strong',\n H4_STRONG: 'h4-strong',\n H5_STRONG: 'h5-strong',\n B1: 'b1',\n B2: 'b2',\n B3: 'b3',\n B4: 'b4',\n B1_LIGHT: 'b1-light',\n B2_LIGHT: 'b2-light',\n B3_LIGHT: 'b3-light',\n B3_STRONG: 'b3-strong',\n H1_ARTICLE: 'h1-article',\n H2_ARTICLE: 'h2-article',\n H3_ARTICLE: 'h3-article',\n H4_ARTICLE: 'h4-article',\n H5_ARTICLE: 'h5-article',\n B1_ARTICLE: 'b1-article',\n B2_ARTICLE: 'b2-article',\n B3_ARTICLE: 'b3-article',\n QUOTE_BRAND: 'quote-brand',\n QUOTE_NEUTRAL: 'quote-neutral',\n HIGHLIGHT_NEUTRAL: 'highlight-neutral',\n HIGHLIGHT_BRAND: 'highlight-brand',\n HIGHLIGHT_IMPORTANT: 'highlight-important',\n HIGHLIGHT_CRITICAL: 'highlight-critical',\n FEEDBACK_BRAND: 'feedback-brand',\n FEEDBACK_NEUTRAL: 'feedback-neutral',\n FEEDBACK_IMPORTANT: 'feedback-important',\n FEEDBACK_CRITICAL: 'feedback-critical',\n BUTTON: 'button',\n BUTTON_SML_TITLE: 'button-sml-title',\n BUTTON_MED_TITLE: 'button-med-title',\n BUTTON_LRG_TITLE: 'button-lrg-title',\n LINK: 'link',\n LINK_SML_TITLE: 'link-sml-title',\n LINK_MED_TITLE: 'link-med-title',\n LINK_LRG_TITLE: 'link-lrg-title',\n} as const;\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;AAGjC,MAAM,mBAAmB;AAEzB,MAAM,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA,EAK9B,oBAAoB;AACtB;AAIO,MAAM,qBAAqB;AAAA;AAAA,EAEhC,CAAC,iBAAiB,kBAAkB,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA,EAKvC,sBAAsB;AAAA,EACtB,oBAAoB;AACtB;AAEO,MAAM,yBAAyB;AAAA,EACpC,GAAG,wBAAwB,kBAAkB,gBAAgB;AAAA,EAC7D,GAAG;AACL;AAEO,MAAM,sBAAiD;AAAA,EAC5D,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,WAAW;AAAA,EACX,WAAW;AAAA,EACX,WAAW;AAAA,EACX,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU;AAAA,EACV,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,eAAe;AAAA,EACf,mBAAmB;AAAA,EACnB,iBAAiB;AAAA,EACjB,qBAAqB;AAAA,EACrB,oBAAoB;AAAA,EACpB,gBAAgB;AAAA,EAChB,kBAAkB;AAAA,EAClB,oBAAoB;AAAA,EACpB,mBAAmB;AAAA,EACnB,QAAQ;AAAA,EACR,kBAAkB;AAAA,EAClB,kBAAkB;AAAA,EAClB,kBAAkB;AAAA,EAClB,MAAM;AAAA,EACN,gBAAgB;AAAA,EAChB,gBAAgB;AAAA,EAChB,gBAAgB;AAClB;",
6
6
  "names": []
7
7
  }
package/dist/esm/parts/variants/body.js CHANGED
@@ -68,6 +68,16 @@ const VARIANTS_CSS_BODY = {
68
68
  line-height: ${(props) => props.lineHeight ?? "1.23rem"};
69
69
  }
70
70
  font-weight: 400;
71
+ `,
72
+ [TYPOGRAPHY_VARIANTS.B3_STRONG]: css`
73
+ font-size: ${(props) => props.fontSize ?? "0.7475rem"};
74
+ line-height: ${(props) => props.lineHeight ?? "0.999375rem"};
75
+ color: ${(props) => props.theme.colors.neutral[700]};
76
+ @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
77
+ font-size: ${(props) => props.fontSize ?? "0.92rem"};
78
+ line-height: ${(props) => props.lineHeight ?? "1.23rem"};
79
+ }
80
+ font-weight: 600;
71
81
  `
72
82
  };
73
83
  export {
package/dist/esm/parts/variants/body.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/variants/body.ts"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { css } from '@elliemae/ds-system';\nimport { TYPOGRAPHY_VARIANTS } from '../../constants/index.js';\nimport type { DSTypographyT } from '../../react-desc-prop-types.js';\n\n// typescript \"hack\" to infer the ReturnType of a generic function (css) with a generic argument (DSTypographyT.StyledPropsInterface)\n// as of 14/november/2023 I was not able to find a better way to do this.\nconst typedCss = () => css<DSTypographyT.StyledPropsInterface>``;\ntype BodyCSSMap = {\n [key in DSTypographyT.BodyVariants]: ReturnType<typeof typedCss>;\n};\n\n// as of 14/november/2023\n// mobile -> font-size: 16px\n// desktop -> font-size: 13px\n// the \"magic values\" of the rem units are the result of the following formula:\n// (variant's requirement px/RT value / 16px) for mobile\n// (variant's requirement px/RT value / 13px) for desktop\nexport const VARIANTS_CSS_BODY: BodyCSSMap = {\n [TYPOGRAPHY_VARIANTS.B1]: css<DSTypographyT.StyledPropsInterface>`\n font-size: ${(props) => props.fontSize ?? '0.8775000000000001rem'};\n line-height: ${(props) => props.lineHeight ?? '1.1212499999999999rem'};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? '1.08rem'};\n line-height: ${(props) => props.lineHeight ?? '1.38rem'};\n }\n font-weight: 400;\n `,\n [TYPOGRAPHY_VARIANTS.B2]: css<DSTypographyT.StyledPropsInterface>`\n font-size: ${(props) => props.fontSize ?? '0.8125rem'};\n line-height: ${(props) => props.lineHeight ?? '1.064375rem'};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? '1rem'};\n line-height: ${(props) => props.lineHeight ?? '1.31rem'};\n }\n font-weight: 400;\n `,\n [TYPOGRAPHY_VARIANTS.B3]: css<DSTypographyT.StyledPropsInterface>`\n font-size: ${(props) => props.fontSize ?? '0.7475rem'};\n line-height: ${(props) => props.lineHeight ?? '0.999375rem'};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? '0.92rem'};\n line-height: ${(props) => props.lineHeight ?? '1.23rem'};\n }\n font-weight: 400;\n `,\n [TYPOGRAPHY_VARIANTS.B4]: css<DSTypographyT.StyledPropsInterface>`\n font-size: ${(props) => props.fontSize ?? '0.6906249999999999rem'};\n line-height: ${(props) => props.lineHeight ?? '0.8125rem'};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? '0.85rem'};\n line-height: ${(props) => props.lineHeight ?? '1rem'};\n }\n font-weight: 400;\n `,\n [TYPOGRAPHY_VARIANTS.B1_LIGHT]: css<DSTypographyT.StyledPropsInterface>`\n font-size: ${(props) => props.fontSize ?? '0.8775000000000001rem'};\n line-height: ${(props) => props.lineHeight ?? '1.1212499999999999rem'};\n color: ${(props) => props.theme.colors.neutral[600]};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? '1.08rem'};\n line-height: ${(props) => props.lineHeight ?? '1.38rem'};\n }\n font-weight: 400;\n `,\n [TYPOGRAPHY_VARIANTS.B2_LIGHT]: css<DSTypographyT.StyledPropsInterface>`\n font-size: ${(props) => props.fontSize ?? '0.8125rem'};\n line-height: ${(props) => props.lineHeight ?? '1.064375rem'};\n color: ${(props) => props.theme.colors.neutral[600]};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? '1rem'};\n line-height: ${(props) => props.lineHeight ?? '1.31rem'};\n }\n font-weight: 400;\n `,\n [TYPOGRAPHY_VARIANTS.B3_LIGHT]: css<DSTypographyT.StyledPropsInterface>`\n font-size: ${(props) => props.fontSize ?? '0.7475rem'};\n line-height: ${(props) => props.lineHeight ?? '0.999375rem'};\n color: ${(props) => props.theme.colors.neutral[600]};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? '0.92rem'};\n line-height: ${(props) => props.lineHeight ?? '1.23rem'};\n }\n font-weight: 400;\n `,\n};\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,WAAW;AACpB,SAAS,2BAA2B;AAKpC,MAAM,WAAW,MAAM;AAWhB,MAAM,oBAAgC;AAAA,EAC3C,CAAC,oBAAoB,EAAE,GAAG;AAAA,iBACX,CAAC,UAAU,MAAM,YAAY,uBAAuB;AAAA,mBAClD,CAAC,UAAU,MAAM,cAAc,uBAAuB;AAAA,yBAChD,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,KAAK;AAAA,mBAC5C,CAAC,UAAU,MAAM,YAAY,SAAS;AAAA,qBACpC,CAAC,UAAU,MAAM,cAAc,SAAS;AAAA;AAAA;AAAA;AAAA,EAI3D,CAAC,oBAAoB,EAAE,GAAG;AAAA,iBACX,CAAC,UAAU,MAAM,YAAY,WAAW;AAAA,mBACtC,CAAC,UAAU,MAAM,cAAc,aAAa;AAAA,yBACtC,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,KAAK;AAAA,mBAC5C,CAAC,UAAU,MAAM,YAAY,MAAM;AAAA,qBACjC,CAAC,UAAU,MAAM,cAAc,SAAS;AAAA;AAAA;AAAA;AAAA,EAI3D,CAAC,oBAAoB,EAAE,GAAG;AAAA,iBACX,CAAC,UAAU,MAAM,YAAY,WAAW;AAAA,mBACtC,CAAC,UAAU,MAAM,cAAc,aAAa;AAAA,yBACtC,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,KAAK;AAAA,mBAC5C,CAAC,UAAU,MAAM,YAAY,SAAS;AAAA,qBACpC,CAAC,UAAU,MAAM,cAAc,SAAS;AAAA;AAAA;AAAA;AAAA,EAI3D,CAAC,oBAAoB,EAAE,GAAG;AAAA,iBACX,CAAC,UAAU,MAAM,YAAY,uBAAuB;AAAA,mBAClD,CAAC,UAAU,MAAM,cAAc,WAAW;AAAA,yBACpC,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,KAAK;AAAA,mBAC5C,CAAC,UAAU,MAAM,YAAY,SAAS;AAAA,qBACpC,CAAC,UAAU,MAAM,cAAc,MAAM;AAAA;AAAA;AAAA;AAAA,EAIxD,CAAC,oBAAoB,QAAQ,GAAG;AAAA,iBACjB,CAAC,UAAU,MAAM,YAAY,uBAAuB;AAAA,mBAClD,CAAC,UAAU,MAAM,cAAc,uBAAuB;AAAA,aAC5D,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,yBAC9B,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,KAAK;AAAA,mBAC5C,CAAC,UAAU,MAAM,YAAY,SAAS;AAAA,qBACpC,CAAC,UAAU,MAAM,cAAc,SAAS;AAAA;AAAA;AAAA;AAAA,EAI3D,CAAC,oBAAoB,QAAQ,GAAG;AAAA,iBACjB,CAAC,UAAU,MAAM,YAAY,WAAW;AAAA,mBACtC,CAAC,UAAU,MAAM,cAAc,aAAa;AAAA,aAClD,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,yBAC9B,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,KAAK;AAAA,mBAC5C,CAAC,UAAU,MAAM,YAAY,MAAM;AAAA,qBACjC,CAAC,UAAU,MAAM,cAAc,SAAS;AAAA;AAAA;AAAA;AAAA,EAI3D,CAAC,oBAAoB,QAAQ,GAAG;AAAA,iBACjB,CAAC,UAAU,MAAM,YAAY,WAAW;AAAA,mBACtC,CAAC,UAAU,MAAM,cAAc,aAAa;AAAA,aAClD,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,yBAC9B,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,KAAK;AAAA,mBAC5C,CAAC,UAAU,MAAM,YAAY,SAAS;AAAA,qBACpC,CAAC,UAAU,MAAM,cAAc,SAAS;AAAA;AAAA;AAAA;AAI7D;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { css } from '@elliemae/ds-system';\nimport { TYPOGRAPHY_VARIANTS } from '../../constants/index.js';\nimport type { DSTypographyT } from '../../react-desc-prop-types.js';\n\n// typescript \"hack\" to infer the ReturnType of a generic function (css) with a generic argument (DSTypographyT.StyledPropsInterface)\n// as of 14/november/2023 I was not able to find a better way to do this.\nconst typedCss = () => css<DSTypographyT.StyledPropsInterface>``;\ntype BodyCSSMap = {\n [key in DSTypographyT.BodyVariants]: ReturnType<typeof typedCss>;\n};\n\n// as of 14/november/2023\n// mobile -> font-size: 16px\n// desktop -> font-size: 13px\n// the \"magic values\" of the rem units are the result of the following formula:\n// (variant's requirement px/RT value / 16px) for mobile\n// (variant's requirement px/RT value / 13px) for desktop\nexport const VARIANTS_CSS_BODY: BodyCSSMap = {\n [TYPOGRAPHY_VARIANTS.B1]: css<DSTypographyT.StyledPropsInterface>`\n font-size: ${(props) => props.fontSize ?? '0.8775000000000001rem'};\n line-height: ${(props) => props.lineHeight ?? '1.1212499999999999rem'};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? '1.08rem'};\n line-height: ${(props) => props.lineHeight ?? '1.38rem'};\n }\n font-weight: 400;\n `,\n [TYPOGRAPHY_VARIANTS.B2]: css<DSTypographyT.StyledPropsInterface>`\n font-size: ${(props) => props.fontSize ?? '0.8125rem'};\n line-height: ${(props) => props.lineHeight ?? '1.064375rem'};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? '1rem'};\n line-height: ${(props) => props.lineHeight ?? '1.31rem'};\n }\n font-weight: 400;\n `,\n [TYPOGRAPHY_VARIANTS.B3]: css<DSTypographyT.StyledPropsInterface>`\n font-size: ${(props) => props.fontSize ?? '0.7475rem'};\n line-height: ${(props) => props.lineHeight ?? '0.999375rem'};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? '0.92rem'};\n line-height: ${(props) => props.lineHeight ?? '1.23rem'};\n }\n font-weight: 400;\n `,\n [TYPOGRAPHY_VARIANTS.B4]: css<DSTypographyT.StyledPropsInterface>`\n font-size: ${(props) => props.fontSize ?? '0.6906249999999999rem'};\n line-height: ${(props) => props.lineHeight ?? '0.8125rem'};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? '0.85rem'};\n line-height: ${(props) => props.lineHeight ?? '1rem'};\n }\n font-weight: 400;\n `,\n [TYPOGRAPHY_VARIANTS.B1_LIGHT]: css<DSTypographyT.StyledPropsInterface>`\n font-size: ${(props) => props.fontSize ?? '0.8775000000000001rem'};\n line-height: ${(props) => props.lineHeight ?? '1.1212499999999999rem'};\n color: ${(props) => props.theme.colors.neutral[600]};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? '1.08rem'};\n line-height: ${(props) => props.lineHeight ?? '1.38rem'};\n }\n font-weight: 400;\n `,\n [TYPOGRAPHY_VARIANTS.B2_LIGHT]: css<DSTypographyT.StyledPropsInterface>`\n font-size: ${(props) => props.fontSize ?? '0.8125rem'};\n line-height: ${(props) => props.lineHeight ?? '1.064375rem'};\n color: ${(props) => props.theme.colors.neutral[600]};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? '1rem'};\n line-height: ${(props) => props.lineHeight ?? '1.31rem'};\n }\n font-weight: 400;\n `,\n [TYPOGRAPHY_VARIANTS.B3_LIGHT]: css<DSTypographyT.StyledPropsInterface>`\n font-size: ${(props) => props.fontSize ?? '0.7475rem'};\n line-height: ${(props) => props.lineHeight ?? '0.999375rem'};\n color: ${(props) => props.theme.colors.neutral[600]};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? '0.92rem'};\n line-height: ${(props) => props.lineHeight ?? '1.23rem'};\n }\n font-weight: 400;\n `,\n [TYPOGRAPHY_VARIANTS.B3_STRONG]: css<DSTypographyT.StyledPropsInterface>`\n font-size: ${(props) => props.fontSize ?? '0.7475rem'};\n line-height: ${(props) => props.lineHeight ?? '0.999375rem'};\n color: ${(props) => props.theme.colors.neutral[700]};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? '0.92rem'};\n line-height: ${(props) => props.lineHeight ?? '1.23rem'};\n }\n font-weight: 600;\n `,\n};\n"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
package/dist/esm/react-desc-prop-types.js CHANGED
@@ -19,6 +19,7 @@ const DSTypographyPropTypes = {
19
19
  "b1-light",
20
20
  "b2-light",
21
21
  "b3-light",
22
+ "b3-strong",
22
23
  "button",
23
24
  "button-sml-title",
24
25
  "button-med-title",
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 TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type { GlobalAttributesT, XstyledProps, DSPropTypesSchema } 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 export type HeadingVariants = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h3-strong' | 'h4-strong' | 'h5-strong';\n export type BodyVariants = 'b1' | 'b2' | 'b3' | 'b4' | 'b1-light' | 'b2-light' | 'b3-light';\n export type ButtonVariants = 'button' | 'button-sml-title' | 'button-med-title' | 'button-lrg-title';\n export type LinkVariants = 'link' | 'link-sml-title' | 'link-med-title' | 'link-lrg-title';\n export type QuoteVariants = 'quote-brand' | 'quote-neutral';\n export type HighlightVariants =\n | 'highlight-neutral'\n | 'highlight-brand'\n | 'highlight-important'\n | 'highlight-critical';\n export type FeedbackVariants = 'feedback-neutral' | 'feedback-brand' | 'feedback-important' | 'feedback-critical';\n export type ArticleHeadingVariants = 'h1-article' | 'h2-article' | 'h3-article' | 'h4-article' | 'h5-article';\n export type ArticleBodyVariants = 'b1-article' | 'b2-article' | 'b3-article';\n\n export type Variant =\n | HeadingVariants\n | BodyVariants\n | ButtonVariants\n | LinkVariants\n | QuoteVariants\n | HighlightVariants\n | ArticleHeadingVariants\n | ArticleBodyVariants\n | FeedbackVariants;\n\n export type VariantsMap = {\n [key in Uppercase<TypescriptHelpersT.KebabToSnakeCase<Variant>>]: Lowercase<\n TypescriptHelpersT.SnakeToKebabCase<key>\n >;\n };\n\n export type StyledPropsInterface = FontSizeProps &\n LineHeightProps &\n ColorProps & {\n children: DSTypographyT.InternalProps['children'];\n variant: DSTypographyT.Variant;\n $truncateWithEllipsis?: boolean;\n $truncateWithReadMore?: DSTypographyT.InternalProps['truncateWithReadMore'];\n };\n\n export interface RequiredProps {\n variant: Variant;\n children: React.ReactNode | React.ReactNode[];\n }\n\n export interface OptionalProps {\n as?: keyof React.JSX.IntrinsicElements;\n component?: keyof React.JSX.IntrinsicElements;\n innerRef?: React.MutableRefObject<HTMLDivElement | null> | React.RefCallback<HTMLDivElement>;\n truncateWithReadMore?: {\n lines: number;\n expanded: boolean;\n };\n }\n\n export interface DefaultProps {\n truncateWithEllipsis: boolean;\n }\n\n export interface Props\n extends Partial<DefaultProps>,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps | 'color'>,\n XstyledProps,\n FontSizeProps,\n LineHeightProps,\n ColorProps,\n RequiredProps {}\n\n export interface InternalProps\n extends DefaultProps,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps | 'color'>,\n XstyledProps,\n FontSizeProps,\n LineHeightProps,\n ColorProps,\n RequiredProps {}\n}\n\nexport const DSTypographyPropTypes: DSPropTypesSchema<DSTypographyT.Props> = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n variant: PropTypes.oneOf([\n 'h1',\n 'h2',\n 'h3',\n 'h4',\n 'h5',\n 'h3-strong',\n 'h4-strong',\n 'h5-strong',\n 'b1',\n 'b2',\n 'b3',\n 'b4',\n 'b1-light',\n 'b2-light',\n 'b3-light',\n 'button',\n 'button-sml-title',\n 'button-med-title',\n 'button-lrg-title',\n 'link',\n 'link-sml-title',\n 'link-med-title',\n 'link-lrg-title',\n 'quote-brand',\n 'quote-neutral',\n 'highlight-neutral',\n 'highlight-brand',\n 'highlight-important',\n 'highlight-critical',\n 'feedback-neutral',\n 'feedback-brand',\n 'feedback-important',\n 'feedback-critical',\n 'h1-article',\n 'h2-article',\n 'h3-article',\n 'h4-article',\n 'h5-article',\n 'b1-article',\n 'b2-article',\n 'b3-article',\n ]).description(\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 'quote-brand' => <pre />,\n 'quote-neutral' => <pre />,\n 'highlight-neutral' => <span />,\n 'highlight-brand' => <span />,\n 'highlight-important' => <span />,\n 'highlight-critical' => <span />,\n 'h1-article' => <h1 />,\n 'h2-article' => <h2 />,\n 'h3-article' => <h3 />,\n 'h4-article' => <h4 />,\n 'h5-article' => <h5 />,\n 'b1-article' => <p />,\n 'b2-article' => <p />,\n 'b3-article' => <p />,\n `,\n ).isRequired,\n children: PropTypes.node.description('Children element').isRequired,\n innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).description('Inner ref to font component.'),\n fontSize: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.object, PropTypes.bool])\n .description('Applies to the root container. For more info read xstyled docs')\n .xstyled(),\n lineHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.object, PropTypes.bool])\n .description('Applies to the root container. For more info read xstyled docs')\n .xstyled(),\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 truncateWithEllipsis: PropTypes.bool\n .description('If true, the text will not wrap, but instead will truncate with a text overflow ellipsis.')\n .defaultValue(false),\n truncateWithReadMore: PropTypes.shape({\n lines: PropTypes.number.description('Number of lines to truncate to.'),\n expanded: PropTypes.bool.description('If true, the text will be expanded.'),\n }).description(\n 'Ammount of lines to truncate to. If expanded, the text will be expanded. Use in conjunction with useReadMoreTruncate hook',\n ),\n};\n\n// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\nexport const DSTypographyPropTypesSchema = DSTypographyPropTypes as unknown as WeakValidationMap<DSTypographyT.Props>;\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACEvB,SAAS,WAAW,2BAA2B,wBAAwB;AAqFhE,MAAM,wBAAgE;AAAA,EAC3E,GAAG;AAAA,EACH,GAAG;AAAA,EACH,SAAS,UAAU,MAAM;AAAA,IACvB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC,EAAE;AAAA,IACD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA4BF,EAAE;AAAA,EACF,UAAU,UAAU,KAAK,YAAY,kBAAkB,EAAE;AAAA,EACzD,UAAU,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,IAAI,CAAC,EAAE,YAAY,8BAA8B;AAAA,EAC5G,UAAU,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,QAAQ,UAAU,QAAQ,UAAU,IAAI,CAAC,EACjG,YAAY,gEAAgE,EAC5E,QAAQ;AAAA,EACX,YAAY,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,QAAQ,UAAU,QAAQ,UAAU,IAAI,CAAC,EACnG,YAAY,gEAAgE,EAC5E,QAAQ;AAAA,EACX,IAAI,UAAU,OAAO,YAAY,8DAA8D;AAAA,EAC/F,WAAW,UAAU,OAAO;AAAA,IAC1B;AAAA,EACF;AAAA,EACA,sBAAsB,UAAU,KAC7B,YAAY,2FAA2F,EACvG,aAAa,KAAK;AAAA,EACrB,sBAAsB,UAAU,MAAM;AAAA,IACpC,OAAO,UAAU,OAAO,YAAY,iCAAiC;AAAA,IACrE,UAAU,UAAU,KAAK,YAAY,qCAAqC;AAAA,EAC5E,CAAC,EAAE;AAAA,IACD;AAAA,EACF;AACF;AAGO,MAAM,8BAA8B;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type { GlobalAttributesT, XstyledProps, DSPropTypesSchema } 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 export type HeadingVariants = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h3-strong' | 'h4-strong' | 'h5-strong';\n export type BodyVariants = 'b1' | 'b2' | 'b3' | 'b4' | 'b1-light' | 'b2-light' | 'b3-light' | 'b3-strong';\n export type ButtonVariants = 'button' | 'button-sml-title' | 'button-med-title' | 'button-lrg-title';\n export type LinkVariants = 'link' | 'link-sml-title' | 'link-med-title' | 'link-lrg-title';\n export type QuoteVariants = 'quote-brand' | 'quote-neutral';\n export type HighlightVariants =\n | 'highlight-neutral'\n | 'highlight-brand'\n | 'highlight-important'\n | 'highlight-critical';\n export type FeedbackVariants = 'feedback-neutral' | 'feedback-brand' | 'feedback-important' | 'feedback-critical';\n export type ArticleHeadingVariants = 'h1-article' | 'h2-article' | 'h3-article' | 'h4-article' | 'h5-article';\n export type ArticleBodyVariants = 'b1-article' | 'b2-article' | 'b3-article';\n\n export type Variant =\n | HeadingVariants\n | BodyVariants\n | ButtonVariants\n | LinkVariants\n | QuoteVariants\n | HighlightVariants\n | ArticleHeadingVariants\n | ArticleBodyVariants\n | FeedbackVariants;\n\n export type VariantsMap = {\n [key in Uppercase<TypescriptHelpersT.KebabToSnakeCase<Variant>>]: Lowercase<\n TypescriptHelpersT.SnakeToKebabCase<key>\n >;\n };\n\n export type StyledPropsInterface = FontSizeProps &\n LineHeightProps &\n ColorProps & {\n children: DSTypographyT.InternalProps['children'];\n variant: DSTypographyT.Variant;\n $truncateWithEllipsis?: boolean;\n $truncateWithReadMore?: DSTypographyT.InternalProps['truncateWithReadMore'];\n };\n\n export interface RequiredProps {\n variant: Variant;\n children: React.ReactNode | React.ReactNode[];\n }\n\n export interface OptionalProps {\n as?: keyof React.JSX.IntrinsicElements;\n component?: keyof React.JSX.IntrinsicElements;\n innerRef?: React.MutableRefObject<HTMLDivElement | null> | React.RefCallback<HTMLDivElement>;\n truncateWithReadMore?: {\n lines: number;\n expanded: boolean;\n };\n }\n\n export interface DefaultProps {\n truncateWithEllipsis: boolean;\n }\n\n export interface Props\n extends Partial<DefaultProps>,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps | 'color'>,\n XstyledProps,\n FontSizeProps,\n LineHeightProps,\n ColorProps,\n RequiredProps {}\n\n export interface InternalProps\n extends DefaultProps,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps | 'color'>,\n XstyledProps,\n FontSizeProps,\n LineHeightProps,\n ColorProps,\n RequiredProps {}\n}\n\nexport const DSTypographyPropTypes: DSPropTypesSchema<DSTypographyT.Props> = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n variant: PropTypes.oneOf([\n 'h1',\n 'h2',\n 'h3',\n 'h4',\n 'h5',\n 'h3-strong',\n 'h4-strong',\n 'h5-strong',\n 'b1',\n 'b2',\n 'b3',\n 'b4',\n 'b1-light',\n 'b2-light',\n 'b3-light',\n 'b3-strong',\n 'button',\n 'button-sml-title',\n 'button-med-title',\n 'button-lrg-title',\n 'link',\n 'link-sml-title',\n 'link-med-title',\n 'link-lrg-title',\n 'quote-brand',\n 'quote-neutral',\n 'highlight-neutral',\n 'highlight-brand',\n 'highlight-important',\n 'highlight-critical',\n 'feedback-neutral',\n 'feedback-brand',\n 'feedback-important',\n 'feedback-critical',\n 'h1-article',\n 'h2-article',\n 'h3-article',\n 'h4-article',\n 'h5-article',\n 'b1-article',\n 'b2-article',\n 'b3-article',\n ]).description(\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 'quote-brand' => <pre />,\n 'quote-neutral' => <pre />,\n 'highlight-neutral' => <span />,\n 'highlight-brand' => <span />,\n 'highlight-important' => <span />,\n 'highlight-critical' => <span />,\n 'h1-article' => <h1 />,\n 'h2-article' => <h2 />,\n 'h3-article' => <h3 />,\n 'h4-article' => <h4 />,\n 'h5-article' => <h5 />,\n 'b1-article' => <p />,\n 'b2-article' => <p />,\n 'b3-article' => <p />,\n `,\n ).isRequired,\n children: PropTypes.node.description('Children element').isRequired,\n innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).description('Inner ref to font component.'),\n fontSize: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.object, PropTypes.bool])\n .description('Applies to the root container. For more info read xstyled docs')\n .xstyled(),\n lineHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.object, PropTypes.bool])\n .description('Applies to the root container. For more info read xstyled docs')\n .xstyled(),\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 truncateWithEllipsis: PropTypes.bool\n .description('If true, the text will not wrap, but instead will truncate with a text overflow ellipsis.')\n .defaultValue(false),\n truncateWithReadMore: PropTypes.shape({\n lines: PropTypes.number.description('Number of lines to truncate to.'),\n expanded: PropTypes.bool.description('If true, the text will be expanded.'),\n }).description(\n 'Ammount of lines to truncate to. If expanded, the text will be expanded. Use in conjunction with useReadMoreTruncate hook',\n ),\n};\n\n// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\nexport const DSTypographyPropTypesSchema = DSTypographyPropTypes as unknown as WeakValidationMap<DSTypographyT.Props>;\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACEvB,SAAS,WAAW,2BAA2B,wBAAwB;AAqFhE,MAAM,wBAAgE;AAAA,EAC3E,GAAG;AAAA,EACH,GAAG;AAAA,EACH,SAAS,UAAU,MAAM;AAAA,IACvB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC,EAAE;AAAA,IACD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA4BF,EAAE;AAAA,EACF,UAAU,UAAU,KAAK,YAAY,kBAAkB,EAAE;AAAA,EACzD,UAAU,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,IAAI,CAAC,EAAE,YAAY,8BAA8B;AAAA,EAC5G,UAAU,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,QAAQ,UAAU,QAAQ,UAAU,IAAI,CAAC,EACjG,YAAY,gEAAgE,EAC5E,QAAQ;AAAA,EACX,YAAY,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,QAAQ,UAAU,QAAQ,UAAU,IAAI,CAAC,EACnG,YAAY,gEAAgE,EAC5E,QAAQ;AAAA,EACX,IAAI,UAAU,OAAO,YAAY,8DAA8D;AAAA,EAC/F,WAAW,UAAU,OAAO;AAAA,IAC1B;AAAA,EACF;AAAA,EACA,sBAAsB,UAAU,KAC7B,YAAY,2FAA2F,EACvG,aAAa,KAAK;AAAA,EACrB,sBAAsB,UAAU,MAAM;AAAA,IACpC,OAAO,UAAU,OAAO,YAAY,iCAAiC;AAAA,IACrE,UAAU,UAAU,KAAK,YAAY,qCAAqC;AAAA,EAC5E,CAAC,EAAE;AAAA,IACD;AAAA,EACF;AACF;AAGO,MAAM,8BAA8B;",
6
6
  "names": []
7
7
  }
package/dist/types/react-desc-prop-types.d.ts CHANGED
@@ -4,7 +4,7 @@ import type { FontSizeProps, LineHeightProps, ColorProps } from '@elliemae/ds-sy
4
4
  import type { WeakValidationMap } from 'react';
5
5
  export declare namespace DSTypographyT {
6
6
  type HeadingVariants = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h3-strong' | 'h4-strong' | 'h5-strong';
7
- type BodyVariants = 'b1' | 'b2' | 'b3' | 'b4' | 'b1-light' | 'b2-light' | 'b3-light';
7
+ type BodyVariants = 'b1' | 'b2' | 'b3' | 'b4' | 'b1-light' | 'b2-light' | 'b3-light' | 'b3-strong';
8
8
  type ButtonVariants = 'button' | 'button-sml-title' | 'button-med-title' | 'button-lrg-title';
9
9
  type LinkVariants = 'link' | 'link-sml-title' | 'link-med-title' | 'link-lrg-title';
10
10
  type QuoteVariants = 'quote-brand' | 'quote-neutral';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-typography",
3
- "version": "3.70.0-next.26",
3
+ "version": "3.70.0-next.28",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Typography",
6
6
  "files": [
@@ -38,17 +38,17 @@
38
38
  "dependencies": {
39
39
  "@xstyled/system": "~3.8.1",
40
40
  "@xstyled/util": "~3.7.0",
41
- "@elliemae/ds-props-helpers": "3.70.0-next.26",
42
- "@elliemae/ds-system": "3.70.0-next.26",
43
- "@elliemae/ds-typescript-helpers": "3.70.0-next.26"
41
+ "@elliemae/ds-props-helpers": "3.70.0-next.28",
42
+ "@elliemae/ds-system": "3.70.0-next.28",
43
+ "@elliemae/ds-typescript-helpers": "3.70.0-next.28"
44
44
  },
45
45
  "devDependencies": {
46
46
  "jest": "^30.0.0",
47
47
  "react": "^18.3.1",
48
48
  "react-dom": "^18.3.1",
49
49
  "react-test-renderer": "^18.3.1",
50
- "@elliemae/ds-monorepo-devops": "3.70.0-next.26",
51
- "@elliemae/ds-test-utils": "3.70.0-next.26"
50
+ "@elliemae/ds-monorepo-devops": "3.70.0-next.28",
51
+ "@elliemae/ds-test-utils": "3.70.0-next.28"
52
52
  },
53
53
  "peerDependencies": {
54
54
  "@testing-library/jest-dom": "^6.6.3",