@elliemae/ds-typography 3.70.0-next.54 → 3.70.0-next.59

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 (13) hide show
  1. package/dist/cjs/package.json +1 -4
  2. package/dist/cjs/parts/variants/body.js +4 -0
  3. package/dist/cjs/parts/variants/body.js.map +2 -2
  4. package/dist/cjs/parts/variants/header.js +8 -0
  5. package/dist/cjs/parts/variants/header.js.map +2 -2
  6. package/dist/cjs/react-desc-prop-types.js.map +2 -2
  7. package/dist/esm/package.json +1 -4
  8. package/dist/esm/parts/variants/body.js +4 -0
  9. package/dist/esm/parts/variants/body.js.map +2 -2
  10. package/dist/esm/parts/variants/header.js +8 -0
  11. package/dist/esm/parts/variants/header.js.map +2 -2
  12. package/dist/esm/react-desc-prop-types.js.map +2 -2
  13. package/package.json +8 -8
package/dist/cjs/package.json CHANGED
@@ -3,8 +3,5 @@
3
3
  "sideEffects": [
4
4
  "*.css",
5
5
  "*.scss"
6
- ],
7
- "publishConfig": {
8
- "access": "public"
9
- }
6
+ ]
10
7
  }
package/dist/cjs/parts/variants/body.js CHANGED
@@ -41,6 +41,7 @@ const VARIANTS_CSS_BODY = {
41
41
  ${import_typographyFontFamily.typographyFontFamily}
42
42
  font-size: ${(props) => props.fontSize ?? "0.8775000000000001rem"};
43
43
  line-height: ${(props) => props.lineHeight ?? "1.1212499999999999rem"};
44
+ color: ${(props) => props.theme.colors.neutral[700]};
44
45
  @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
45
46
  font-size: ${(props) => props.fontSize ?? "1.08rem"};
46
47
  line-height: ${(props) => props.lineHeight ?? "1.38rem"};
@@ -51,6 +52,7 @@ const VARIANTS_CSS_BODY = {
51
52
  ${import_typographyFontFamily.typographyFontFamily}
52
53
  font-size: ${(props) => props.fontSize ?? "0.8125rem"};
53
54
  line-height: ${(props) => props.lineHeight ?? "1rem"};
55
+ color: ${(props) => props.theme.colors.neutral[700]};
54
56
  @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
55
57
  font-size: ${(props) => props.fontSize ?? "1rem"};
56
58
  line-height: ${(props) => props.lineHeight ?? "1.2307692308rem"};
@@ -61,6 +63,7 @@ const VARIANTS_CSS_BODY = {
61
63
  ${import_typographyFontFamily.typographyFontFamily}
62
64
  font-size: ${(props) => props.fontSize ?? "0.7475rem"};
63
65
  line-height: ${(props) => props.lineHeight ?? "0.999375rem"};
66
+ color: ${(props) => props.theme.colors.neutral[700]};
64
67
  @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
65
68
  font-size: ${(props) => props.fontSize ?? "0.92rem"};
66
69
  line-height: ${(props) => props.lineHeight ?? "1.23rem"};
@@ -71,6 +74,7 @@ const VARIANTS_CSS_BODY = {
71
74
  ${import_typographyFontFamily.typographyFontFamily}
72
75
  font-size: ${(props) => props.fontSize ?? "0.6906249999999999rem"};
73
76
  line-height: ${(props) => props.lineHeight ?? "0.8125rem"};
77
+ color: ${(props) => props.theme.colors.neutral[700]};
74
78
  @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
75
79
  font-size: ${(props) => props.fontSize ?? "0.85rem"};
76
80
  line-height: ${(props) => props.lineHeight ?? "1rem"};
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';\nimport { typographyFontFamily } from '../typographyFontFamily.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 ${typographyFontFamily}\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 ${typographyFontFamily}\n font-size: ${(props) => props.fontSize ?? '0.8125rem'};\n line-height: ${(props) => props.lineHeight ?? '1rem'};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? '1rem'};\n line-height: ${(props) => props.lineHeight ?? '1.2307692308rem'};\n }\n font-weight: 400;\n `,\n [TYPOGRAPHY_VARIANTS.B3]: css<DSTypographyT.StyledPropsInterface>`\n ${typographyFontFamily}\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 ${typographyFontFamily}\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 ${typographyFontFamily}\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 ${typographyFontFamily}\n font-size: ${(props) => props.fontSize ?? '0.8125rem'};\n line-height: ${(props) => props.lineHeight ?? '1rem'};\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.2307692308rem'};\n }\n font-weight: 400;\n `,\n [TYPOGRAPHY_VARIANTS.B3_LIGHT]: css<DSTypographyT.StyledPropsInterface>`\n ${typographyFontFamily}\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 ${typographyFontFamily}\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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",
4
+ "sourcesContent": ["import { css } from '@elliemae/ds-system';\nimport { TYPOGRAPHY_VARIANTS } from '../../constants/index.js';\nimport type { DSTypographyT } from '../../react-desc-prop-types.js';\nimport { typographyFontFamily } from '../typographyFontFamily.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 ${typographyFontFamily}\n font-size: ${(props) => props.fontSize ?? '0.8775000000000001rem'};\n line-height: ${(props) => props.lineHeight ?? '1.1212499999999999rem'};\n color: ${(props) => props.theme.colors.neutral[700]};\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 ${typographyFontFamily}\n font-size: ${(props) => props.fontSize ?? '0.8125rem'};\n line-height: ${(props) => props.lineHeight ?? '1rem'};\n color: ${(props) => props.theme.colors.neutral[700]};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? '1rem'};\n line-height: ${(props) => props.lineHeight ?? '1.2307692308rem'};\n }\n font-weight: 400;\n `,\n [TYPOGRAPHY_VARIANTS.B3]: css<DSTypographyT.StyledPropsInterface>`\n ${typographyFontFamily}\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: 400;\n `,\n [TYPOGRAPHY_VARIANTS.B4]: css<DSTypographyT.StyledPropsInterface>`\n ${typographyFontFamily}\n font-size: ${(props) => props.fontSize ?? '0.6906249999999999rem'};\n line-height: ${(props) => props.lineHeight ?? '0.8125rem'};\n color: ${(props) => props.theme.colors.neutral[700]};\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 ${typographyFontFamily}\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 ${typographyFontFamily}\n font-size: ${(props) => props.fontSize ?? '0.8125rem'};\n line-height: ${(props) => props.lineHeight ?? '1rem'};\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.2307692308rem'};\n }\n font-weight: 400;\n `,\n [TYPOGRAPHY_VARIANTS.B3_LIGHT]: css<DSTypographyT.StyledPropsInterface>`\n ${typographyFontFamily}\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 ${typographyFontFamily}\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/parts/variants/header.js CHANGED
@@ -41,6 +41,7 @@ const VARIANTS_CSS_HEADER = {
41
41
  ${import_typographyFontFamily.typographyFontFamily}
42
42
  font-size: ${(props) => props.fontSize ?? "2.12875rem"};
43
43
  line-height: ${(props) => props.lineHeight ?? "2.5593749999999997rem"};
44
+ color: ${(props) => props.theme.colors.neutral[700]};
44
45
  @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
45
46
  font-size: ${(props) => props.fontSize ?? "2.62rem"};
46
47
  line-height: ${(props) => props.lineHeight ?? "3.15rem"};
@@ -51,6 +52,7 @@ const VARIANTS_CSS_HEADER = {
51
52
  ${import_typographyFontFamily.typographyFontFamily}
52
53
  font-size: ${(props) => props.fontSize ?? "1.503125rem"};
53
54
  line-height: ${(props) => props.lineHeight ?? "1.9337499999999999rem"};
55
+ color: ${(props) => props.theme.colors.neutral[700]};
54
56
  @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
55
57
  font-size: ${(props) => props.fontSize ?? "1.85rem"};
56
58
  line-height: ${(props) => props.lineHeight ?? "2.38rem"};
@@ -61,6 +63,7 @@ const VARIANTS_CSS_HEADER = {
61
63
  ${import_typographyFontFamily.typographyFontFamily}
62
64
  font-size: ${(props) => props.fontSize ?? "1.1212499999999999rem"};
63
65
  line-height: ${(props) => props.lineHeight ?? "1.373125rem"};
66
+ color: ${(props) => props.theme.colors.neutral[700]};
64
67
  @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
65
68
  font-size: ${(props) => props.fontSize ?? "1.38rem"};
66
69
  line-height: ${(props) => props.lineHeight ?? "1.69rem"};
@@ -71,6 +74,7 @@ const VARIANTS_CSS_HEADER = {
71
74
  ${import_typographyFontFamily.typographyFontFamily}
72
75
  font-size: ${(props) => props.fontSize ?? "0.999375rem"};
73
76
  line-height: ${(props) => props.lineHeight ?? "1.25125rem"};
77
+ color: ${(props) => props.theme.colors.neutral[700]};
74
78
  @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
75
79
  font-size: ${(props) => props.fontSize ?? "1.23rem"};
76
80
  line-height: ${(props) => props.lineHeight ?? "1.54rem"};
@@ -81,6 +85,7 @@ const VARIANTS_CSS_HEADER = {
81
85
  ${import_typographyFontFamily.typographyFontFamily}
82
86
  font-size: ${(props) => props.fontSize ?? "0.8775000000000001rem"};
83
87
  line-height: ${(props) => props.lineHeight ?? "1.064375rem"};
88
+ color: ${(props) => props.theme.colors.neutral[700]};
84
89
  @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
85
90
  font-size: ${(props) => props.fontSize ?? "1.08rem"};
86
91
  line-height: ${(props) => props.lineHeight ?? "1.31rem"};
@@ -91,6 +96,7 @@ const VARIANTS_CSS_HEADER = {
91
96
  ${import_typographyFontFamily.typographyFontFamily}
92
97
  font-size: ${(props) => props.fontSize ?? "0.8775000000000001rem"};
93
98
  line-height: ${(props) => props.lineHeight ?? "1.064375rem"};
99
+ color: ${(props) => props.theme.colors.neutral[700]};
94
100
  @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
95
101
  font-size: ${(props) => props.fontSize ?? "1.08rem"};
96
102
  line-height: ${(props) => props.lineHeight ?? "1.31rem"};
@@ -101,6 +107,7 @@ const VARIANTS_CSS_HEADER = {
101
107
  ${import_typographyFontFamily.typographyFontFamily}
102
108
  font-size: ${(props) => props.fontSize ?? "0.999375rem"};
103
109
  line-height: ${(props) => props.lineHeight ?? "1.25125rem"};
110
+ color: ${(props) => props.theme.colors.neutral[700]};
104
111
  @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
105
112
  font-size: ${(props) => props.fontSize ?? "1.23rem"};
106
113
  line-height: ${(props) => props.lineHeight ?? "1.54rem"};
@@ -111,6 +118,7 @@ const VARIANTS_CSS_HEADER = {
111
118
  ${import_typographyFontFamily.typographyFontFamily}
112
119
  font-size: ${(props) => props.fontSize ?? "1.1212499999999999rem"};
113
120
  line-height: ${(props) => props.lineHeight ?? "1.373125rem"};
121
+ color: ${(props) => props.theme.colors.neutral[700]};
114
122
  @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
115
123
  font-size: ${(props) => props.fontSize ?? "1.38rem"};
116
124
  line-height: ${(props) => props.lineHeight ?? "1.69rem"};
package/dist/cjs/parts/variants/header.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/parts/variants/header.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';\nimport { typographyFontFamily } from '../typographyFontFamily.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 HeadingCSSMap = {\n [key in DSTypographyT.HeadingVariants]: 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_HEADER: HeadingCSSMap = {\n [TYPOGRAPHY_VARIANTS.H1]: css<DSTypographyT.StyledPropsInterface>`\n ${typographyFontFamily}\n font-size: ${(props) => props.fontSize ?? '2.12875rem'};\n line-height: ${(props) => props.lineHeight ?? '2.5593749999999997rem'};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? '2.62rem'};\n line-height: ${(props) => props.lineHeight ?? '3.15rem'};\n }\n font-weight: 400;\n `,\n [TYPOGRAPHY_VARIANTS.H2]: css<DSTypographyT.StyledPropsInterface>`\n ${typographyFontFamily}\n font-size: ${(props) => props.fontSize ?? '1.503125rem'};\n line-height: ${(props) => props.lineHeight ?? '1.9337499999999999rem'};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? '1.85rem'};\n line-height: ${(props) => props.lineHeight ?? '2.38rem'};\n }\n font-weight: 400;\n `,\n [TYPOGRAPHY_VARIANTS.H3]: css<DSTypographyT.StyledPropsInterface>`\n ${typographyFontFamily}\n font-size: ${(props) => props.fontSize ?? '1.1212499999999999rem'};\n line-height: ${(props) => props.lineHeight ?? '1.373125rem'};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? '1.38rem'};\n line-height: ${(props) => props.lineHeight ?? '1.69rem'};\n }\n font-weight: 400;\n `,\n [TYPOGRAPHY_VARIANTS.H4]: css<DSTypographyT.StyledPropsInterface>`\n ${typographyFontFamily}\n font-size: ${(props) => props.fontSize ?? '0.999375rem'};\n line-height: ${(props) => props.lineHeight ?? '1.25125rem'};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? '1.23rem'};\n line-height: ${(props) => props.lineHeight ?? '1.54rem'};\n }\n font-weight: 400;\n `,\n [TYPOGRAPHY_VARIANTS.H5]: css<DSTypographyT.StyledPropsInterface>`\n ${typographyFontFamily}\n font-size: ${(props) => props.fontSize ?? '0.8775000000000001rem'};\n line-height: ${(props) => props.lineHeight ?? '1.064375rem'};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? '1.08rem'};\n line-height: ${(props) => props.lineHeight ?? '1.31rem'};\n }\n font-weight: 400;\n `,\n [TYPOGRAPHY_VARIANTS.H5_STRONG]: css<DSTypographyT.StyledPropsInterface>`\n ${typographyFontFamily}\n font-size: ${(props) => props.fontSize ?? '0.8775000000000001rem'};\n line-height: ${(props) => props.lineHeight ?? '1.064375rem'};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? '1.08rem'};\n line-height: ${(props) => props.lineHeight ?? '1.31rem'};\n }\n font-weight: 600;\n `,\n [TYPOGRAPHY_VARIANTS.H4_STRONG]: css<DSTypographyT.StyledPropsInterface>`\n ${typographyFontFamily}\n font-size: ${(props) => props.fontSize ?? '0.999375rem'};\n line-height: ${(props) => props.lineHeight ?? '1.25125rem'};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? '1.23rem'};\n line-height: ${(props) => props.lineHeight ?? '1.54rem'};\n }\n font-weight: 600;\n `,\n [TYPOGRAPHY_VARIANTS.H3_STRONG]: css<DSTypographyT.StyledPropsInterface>`\n ${typographyFontFamily}\n font-size: ${(props) => props.fontSize ?? '1.1212499999999999rem'};\n line-height: ${(props) => props.lineHeight ?? '1.373125rem'};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? '1.38rem'};\n line-height: ${(props) => props.lineHeight ?? '1.69rem'};\n }\n font-weight: 600;\n `,\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["import { css } from '@elliemae/ds-system';\nimport { TYPOGRAPHY_VARIANTS } from '../../constants/index.js';\nimport type { DSTypographyT } from '../../react-desc-prop-types.js';\nimport { typographyFontFamily } from '../typographyFontFamily.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 HeadingCSSMap = {\n [key in DSTypographyT.HeadingVariants]: 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_HEADER: HeadingCSSMap = {\n [TYPOGRAPHY_VARIANTS.H1]: css<DSTypographyT.StyledPropsInterface>`\n ${typographyFontFamily}\n font-size: ${(props) => props.fontSize ?? '2.12875rem'};\n line-height: ${(props) => props.lineHeight ?? '2.5593749999999997rem'};\n color: ${(props) => props.theme.colors.neutral[700]};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? '2.62rem'};\n line-height: ${(props) => props.lineHeight ?? '3.15rem'};\n }\n font-weight: 400;\n `,\n [TYPOGRAPHY_VARIANTS.H2]: css<DSTypographyT.StyledPropsInterface>`\n ${typographyFontFamily}\n font-size: ${(props) => props.fontSize ?? '1.503125rem'};\n line-height: ${(props) => props.lineHeight ?? '1.9337499999999999rem'};\n color: ${(props) => props.theme.colors.neutral[700]};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? '1.85rem'};\n line-height: ${(props) => props.lineHeight ?? '2.38rem'};\n }\n font-weight: 400;\n `,\n [TYPOGRAPHY_VARIANTS.H3]: css<DSTypographyT.StyledPropsInterface>`\n ${typographyFontFamily}\n font-size: ${(props) => props.fontSize ?? '1.1212499999999999rem'};\n line-height: ${(props) => props.lineHeight ?? '1.373125rem'};\n color: ${(props) => props.theme.colors.neutral[700]};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? '1.38rem'};\n line-height: ${(props) => props.lineHeight ?? '1.69rem'};\n }\n font-weight: 400;\n `,\n [TYPOGRAPHY_VARIANTS.H4]: css<DSTypographyT.StyledPropsInterface>`\n ${typographyFontFamily}\n font-size: ${(props) => props.fontSize ?? '0.999375rem'};\n line-height: ${(props) => props.lineHeight ?? '1.25125rem'};\n color: ${(props) => props.theme.colors.neutral[700]};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? '1.23rem'};\n line-height: ${(props) => props.lineHeight ?? '1.54rem'};\n }\n font-weight: 400;\n `,\n [TYPOGRAPHY_VARIANTS.H5]: css<DSTypographyT.StyledPropsInterface>`\n ${typographyFontFamily}\n font-size: ${(props) => props.fontSize ?? '0.8775000000000001rem'};\n line-height: ${(props) => props.lineHeight ?? '1.064375rem'};\n color: ${(props) => props.theme.colors.neutral[700]};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? '1.08rem'};\n line-height: ${(props) => props.lineHeight ?? '1.31rem'};\n }\n font-weight: 400;\n `,\n [TYPOGRAPHY_VARIANTS.H5_STRONG]: css<DSTypographyT.StyledPropsInterface>`\n ${typographyFontFamily}\n font-size: ${(props) => props.fontSize ?? '0.8775000000000001rem'};\n line-height: ${(props) => props.lineHeight ?? '1.064375rem'};\n color: ${(props) => props.theme.colors.neutral[700]};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? '1.08rem'};\n line-height: ${(props) => props.lineHeight ?? '1.31rem'};\n }\n font-weight: 600;\n `,\n [TYPOGRAPHY_VARIANTS.H4_STRONG]: css<DSTypographyT.StyledPropsInterface>`\n ${typographyFontFamily}\n font-size: ${(props) => props.fontSize ?? '0.999375rem'};\n line-height: ${(props) => props.lineHeight ?? '1.25125rem'};\n color: ${(props) => props.theme.colors.neutral[700]};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? '1.23rem'};\n line-height: ${(props) => props.lineHeight ?? '1.54rem'};\n }\n font-weight: 600;\n `,\n [TYPOGRAPHY_VARIANTS.H3_STRONG]: css<DSTypographyT.StyledPropsInterface>`\n ${typographyFontFamily}\n font-size: ${(props) => props.fontSize ?? '1.1212499999999999rem'};\n line-height: ${(props) => props.lineHeight ?? '1.373125rem'};\n color: ${(props) => props.theme.colors.neutral[700]};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? '1.38rem'};\n line-height: ${(props) => props.lineHeight ?? '1.69rem'};\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.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' | '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;",
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' | 'highlight-brand' | 'highlight-important' | '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\n 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\n 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;AAoFhE,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/package.json CHANGED
@@ -3,8 +3,5 @@
3
3
  "sideEffects": [
4
4
  "*.css",
5
5
  "*.scss"
6
- ],
7
- "publishConfig": {
8
- "access": "public"
9
- }
6
+ ]
10
7
  }
package/dist/esm/parts/variants/body.js CHANGED
@@ -8,6 +8,7 @@ const VARIANTS_CSS_BODY = {
8
8
  ${typographyFontFamily}
9
9
  font-size: ${(props) => props.fontSize ?? "0.8775000000000001rem"};
10
10
  line-height: ${(props) => props.lineHeight ?? "1.1212499999999999rem"};
11
+ color: ${(props) => props.theme.colors.neutral[700]};
11
12
  @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
12
13
  font-size: ${(props) => props.fontSize ?? "1.08rem"};
13
14
  line-height: ${(props) => props.lineHeight ?? "1.38rem"};
@@ -18,6 +19,7 @@ const VARIANTS_CSS_BODY = {
18
19
  ${typographyFontFamily}
19
20
  font-size: ${(props) => props.fontSize ?? "0.8125rem"};
20
21
  line-height: ${(props) => props.lineHeight ?? "1rem"};
22
+ color: ${(props) => props.theme.colors.neutral[700]};
21
23
  @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
22
24
  font-size: ${(props) => props.fontSize ?? "1rem"};
23
25
  line-height: ${(props) => props.lineHeight ?? "1.2307692308rem"};
@@ -28,6 +30,7 @@ const VARIANTS_CSS_BODY = {
28
30
  ${typographyFontFamily}
29
31
  font-size: ${(props) => props.fontSize ?? "0.7475rem"};
30
32
  line-height: ${(props) => props.lineHeight ?? "0.999375rem"};
33
+ color: ${(props) => props.theme.colors.neutral[700]};
31
34
  @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
32
35
  font-size: ${(props) => props.fontSize ?? "0.92rem"};
33
36
  line-height: ${(props) => props.lineHeight ?? "1.23rem"};
@@ -38,6 +41,7 @@ const VARIANTS_CSS_BODY = {
38
41
  ${typographyFontFamily}
39
42
  font-size: ${(props) => props.fontSize ?? "0.6906249999999999rem"};
40
43
  line-height: ${(props) => props.lineHeight ?? "0.8125rem"};
44
+ color: ${(props) => props.theme.colors.neutral[700]};
41
45
  @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
42
46
  font-size: ${(props) => props.fontSize ?? "0.85rem"};
43
47
  line-height: ${(props) => props.lineHeight ?? "1rem"};
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';\nimport { typographyFontFamily } from '../typographyFontFamily.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 ${typographyFontFamily}\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 ${typographyFontFamily}\n font-size: ${(props) => props.fontSize ?? '0.8125rem'};\n line-height: ${(props) => props.lineHeight ?? '1rem'};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? '1rem'};\n line-height: ${(props) => props.lineHeight ?? '1.2307692308rem'};\n }\n font-weight: 400;\n `,\n [TYPOGRAPHY_VARIANTS.B3]: css<DSTypographyT.StyledPropsInterface>`\n ${typographyFontFamily}\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 ${typographyFontFamily}\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 ${typographyFontFamily}\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 ${typographyFontFamily}\n font-size: ${(props) => props.fontSize ?? '0.8125rem'};\n line-height: ${(props) => props.lineHeight ?? '1rem'};\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.2307692308rem'};\n }\n font-weight: 400;\n `,\n [TYPOGRAPHY_VARIANTS.B3_LIGHT]: css<DSTypographyT.StyledPropsInterface>`\n ${typographyFontFamily}\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 ${typographyFontFamily}\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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",
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';\nimport { typographyFontFamily } from '../typographyFontFamily.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 ${typographyFontFamily}\n font-size: ${(props) => props.fontSize ?? '0.8775000000000001rem'};\n line-height: ${(props) => props.lineHeight ?? '1.1212499999999999rem'};\n color: ${(props) => props.theme.colors.neutral[700]};\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 ${typographyFontFamily}\n font-size: ${(props) => props.fontSize ?? '0.8125rem'};\n line-height: ${(props) => props.lineHeight ?? '1rem'};\n color: ${(props) => props.theme.colors.neutral[700]};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? '1rem'};\n line-height: ${(props) => props.lineHeight ?? '1.2307692308rem'};\n }\n font-weight: 400;\n `,\n [TYPOGRAPHY_VARIANTS.B3]: css<DSTypographyT.StyledPropsInterface>`\n ${typographyFontFamily}\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: 400;\n `,\n [TYPOGRAPHY_VARIANTS.B4]: css<DSTypographyT.StyledPropsInterface>`\n ${typographyFontFamily}\n font-size: ${(props) => props.fontSize ?? '0.6906249999999999rem'};\n line-height: ${(props) => props.lineHeight ?? '0.8125rem'};\n color: ${(props) => props.theme.colors.neutral[700]};\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 ${typographyFontFamily}\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 ${typographyFontFamily}\n font-size: ${(props) => props.fontSize ?? '0.8125rem'};\n line-height: ${(props) => props.lineHeight ?? '1rem'};\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.2307692308rem'};\n }\n font-weight: 400;\n `,\n [TYPOGRAPHY_VARIANTS.B3_LIGHT]: css<DSTypographyT.StyledPropsInterface>`\n ${typographyFontFamily}\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 ${typographyFontFamily}\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/parts/variants/header.js CHANGED
@@ -8,6 +8,7 @@ const VARIANTS_CSS_HEADER = {
8
8
  ${typographyFontFamily}
9
9
  font-size: ${(props) => props.fontSize ?? "2.12875rem"};
10
10
  line-height: ${(props) => props.lineHeight ?? "2.5593749999999997rem"};
11
+ color: ${(props) => props.theme.colors.neutral[700]};
11
12
  @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
12
13
  font-size: ${(props) => props.fontSize ?? "2.62rem"};
13
14
  line-height: ${(props) => props.lineHeight ?? "3.15rem"};
@@ -18,6 +19,7 @@ const VARIANTS_CSS_HEADER = {
18
19
  ${typographyFontFamily}
19
20
  font-size: ${(props) => props.fontSize ?? "1.503125rem"};
20
21
  line-height: ${(props) => props.lineHeight ?? "1.9337499999999999rem"};
22
+ color: ${(props) => props.theme.colors.neutral[700]};
21
23
  @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
22
24
  font-size: ${(props) => props.fontSize ?? "1.85rem"};
23
25
  line-height: ${(props) => props.lineHeight ?? "2.38rem"};
@@ -28,6 +30,7 @@ const VARIANTS_CSS_HEADER = {
28
30
  ${typographyFontFamily}
29
31
  font-size: ${(props) => props.fontSize ?? "1.1212499999999999rem"};
30
32
  line-height: ${(props) => props.lineHeight ?? "1.373125rem"};
33
+ color: ${(props) => props.theme.colors.neutral[700]};
31
34
  @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
32
35
  font-size: ${(props) => props.fontSize ?? "1.38rem"};
33
36
  line-height: ${(props) => props.lineHeight ?? "1.69rem"};
@@ -38,6 +41,7 @@ const VARIANTS_CSS_HEADER = {
38
41
  ${typographyFontFamily}
39
42
  font-size: ${(props) => props.fontSize ?? "0.999375rem"};
40
43
  line-height: ${(props) => props.lineHeight ?? "1.25125rem"};
44
+ color: ${(props) => props.theme.colors.neutral[700]};
41
45
  @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
42
46
  font-size: ${(props) => props.fontSize ?? "1.23rem"};
43
47
  line-height: ${(props) => props.lineHeight ?? "1.54rem"};
@@ -48,6 +52,7 @@ const VARIANTS_CSS_HEADER = {
48
52
  ${typographyFontFamily}
49
53
  font-size: ${(props) => props.fontSize ?? "0.8775000000000001rem"};
50
54
  line-height: ${(props) => props.lineHeight ?? "1.064375rem"};
55
+ color: ${(props) => props.theme.colors.neutral[700]};
51
56
  @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
52
57
  font-size: ${(props) => props.fontSize ?? "1.08rem"};
53
58
  line-height: ${(props) => props.lineHeight ?? "1.31rem"};
@@ -58,6 +63,7 @@ const VARIANTS_CSS_HEADER = {
58
63
  ${typographyFontFamily}
59
64
  font-size: ${(props) => props.fontSize ?? "0.8775000000000001rem"};
60
65
  line-height: ${(props) => props.lineHeight ?? "1.064375rem"};
66
+ color: ${(props) => props.theme.colors.neutral[700]};
61
67
  @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
62
68
  font-size: ${(props) => props.fontSize ?? "1.08rem"};
63
69
  line-height: ${(props) => props.lineHeight ?? "1.31rem"};
@@ -68,6 +74,7 @@ const VARIANTS_CSS_HEADER = {
68
74
  ${typographyFontFamily}
69
75
  font-size: ${(props) => props.fontSize ?? "0.999375rem"};
70
76
  line-height: ${(props) => props.lineHeight ?? "1.25125rem"};
77
+ color: ${(props) => props.theme.colors.neutral[700]};
71
78
  @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
72
79
  font-size: ${(props) => props.fontSize ?? "1.23rem"};
73
80
  line-height: ${(props) => props.lineHeight ?? "1.54rem"};
@@ -78,6 +85,7 @@ const VARIANTS_CSS_HEADER = {
78
85
  ${typographyFontFamily}
79
86
  font-size: ${(props) => props.fontSize ?? "1.1212499999999999rem"};
80
87
  line-height: ${(props) => props.lineHeight ?? "1.373125rem"};
88
+ color: ${(props) => props.theme.colors.neutral[700]};
81
89
  @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
82
90
  font-size: ${(props) => props.fontSize ?? "1.38rem"};
83
91
  line-height: ${(props) => props.lineHeight ?? "1.69rem"};
package/dist/esm/parts/variants/header.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/header.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';\nimport { typographyFontFamily } from '../typographyFontFamily.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 HeadingCSSMap = {\n [key in DSTypographyT.HeadingVariants]: 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_HEADER: HeadingCSSMap = {\n [TYPOGRAPHY_VARIANTS.H1]: css<DSTypographyT.StyledPropsInterface>`\n ${typographyFontFamily}\n font-size: ${(props) => props.fontSize ?? '2.12875rem'};\n line-height: ${(props) => props.lineHeight ?? '2.5593749999999997rem'};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? '2.62rem'};\n line-height: ${(props) => props.lineHeight ?? '3.15rem'};\n }\n font-weight: 400;\n `,\n [TYPOGRAPHY_VARIANTS.H2]: css<DSTypographyT.StyledPropsInterface>`\n ${typographyFontFamily}\n font-size: ${(props) => props.fontSize ?? '1.503125rem'};\n line-height: ${(props) => props.lineHeight ?? '1.9337499999999999rem'};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? '1.85rem'};\n line-height: ${(props) => props.lineHeight ?? '2.38rem'};\n }\n font-weight: 400;\n `,\n [TYPOGRAPHY_VARIANTS.H3]: css<DSTypographyT.StyledPropsInterface>`\n ${typographyFontFamily}\n font-size: ${(props) => props.fontSize ?? '1.1212499999999999rem'};\n line-height: ${(props) => props.lineHeight ?? '1.373125rem'};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? '1.38rem'};\n line-height: ${(props) => props.lineHeight ?? '1.69rem'};\n }\n font-weight: 400;\n `,\n [TYPOGRAPHY_VARIANTS.H4]: css<DSTypographyT.StyledPropsInterface>`\n ${typographyFontFamily}\n font-size: ${(props) => props.fontSize ?? '0.999375rem'};\n line-height: ${(props) => props.lineHeight ?? '1.25125rem'};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? '1.23rem'};\n line-height: ${(props) => props.lineHeight ?? '1.54rem'};\n }\n font-weight: 400;\n `,\n [TYPOGRAPHY_VARIANTS.H5]: css<DSTypographyT.StyledPropsInterface>`\n ${typographyFontFamily}\n font-size: ${(props) => props.fontSize ?? '0.8775000000000001rem'};\n line-height: ${(props) => props.lineHeight ?? '1.064375rem'};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? '1.08rem'};\n line-height: ${(props) => props.lineHeight ?? '1.31rem'};\n }\n font-weight: 400;\n `,\n [TYPOGRAPHY_VARIANTS.H5_STRONG]: css<DSTypographyT.StyledPropsInterface>`\n ${typographyFontFamily}\n font-size: ${(props) => props.fontSize ?? '0.8775000000000001rem'};\n line-height: ${(props) => props.lineHeight ?? '1.064375rem'};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? '1.08rem'};\n line-height: ${(props) => props.lineHeight ?? '1.31rem'};\n }\n font-weight: 600;\n `,\n [TYPOGRAPHY_VARIANTS.H4_STRONG]: css<DSTypographyT.StyledPropsInterface>`\n ${typographyFontFamily}\n font-size: ${(props) => props.fontSize ?? '0.999375rem'};\n line-height: ${(props) => props.lineHeight ?? '1.25125rem'};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? '1.23rem'};\n line-height: ${(props) => props.lineHeight ?? '1.54rem'};\n }\n font-weight: 600;\n `,\n [TYPOGRAPHY_VARIANTS.H3_STRONG]: css<DSTypographyT.StyledPropsInterface>`\n ${typographyFontFamily}\n font-size: ${(props) => props.fontSize ?? '1.1212499999999999rem'};\n line-height: ${(props) => props.lineHeight ?? '1.373125rem'};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? '1.38rem'};\n line-height: ${(props) => props.lineHeight ?? '1.69rem'};\n }\n font-weight: 600;\n `,\n};\n"],
5
- "mappings": "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",
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';\nimport { typographyFontFamily } from '../typographyFontFamily.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 HeadingCSSMap = {\n [key in DSTypographyT.HeadingVariants]: 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_HEADER: HeadingCSSMap = {\n [TYPOGRAPHY_VARIANTS.H1]: css<DSTypographyT.StyledPropsInterface>`\n ${typographyFontFamily}\n font-size: ${(props) => props.fontSize ?? '2.12875rem'};\n line-height: ${(props) => props.lineHeight ?? '2.5593749999999997rem'};\n color: ${(props) => props.theme.colors.neutral[700]};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? '2.62rem'};\n line-height: ${(props) => props.lineHeight ?? '3.15rem'};\n }\n font-weight: 400;\n `,\n [TYPOGRAPHY_VARIANTS.H2]: css<DSTypographyT.StyledPropsInterface>`\n ${typographyFontFamily}\n font-size: ${(props) => props.fontSize ?? '1.503125rem'};\n line-height: ${(props) => props.lineHeight ?? '1.9337499999999999rem'};\n color: ${(props) => props.theme.colors.neutral[700]};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? '1.85rem'};\n line-height: ${(props) => props.lineHeight ?? '2.38rem'};\n }\n font-weight: 400;\n `,\n [TYPOGRAPHY_VARIANTS.H3]: css<DSTypographyT.StyledPropsInterface>`\n ${typographyFontFamily}\n font-size: ${(props) => props.fontSize ?? '1.1212499999999999rem'};\n line-height: ${(props) => props.lineHeight ?? '1.373125rem'};\n color: ${(props) => props.theme.colors.neutral[700]};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? '1.38rem'};\n line-height: ${(props) => props.lineHeight ?? '1.69rem'};\n }\n font-weight: 400;\n `,\n [TYPOGRAPHY_VARIANTS.H4]: css<DSTypographyT.StyledPropsInterface>`\n ${typographyFontFamily}\n font-size: ${(props) => props.fontSize ?? '0.999375rem'};\n line-height: ${(props) => props.lineHeight ?? '1.25125rem'};\n color: ${(props) => props.theme.colors.neutral[700]};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? '1.23rem'};\n line-height: ${(props) => props.lineHeight ?? '1.54rem'};\n }\n font-weight: 400;\n `,\n [TYPOGRAPHY_VARIANTS.H5]: css<DSTypographyT.StyledPropsInterface>`\n ${typographyFontFamily}\n font-size: ${(props) => props.fontSize ?? '0.8775000000000001rem'};\n line-height: ${(props) => props.lineHeight ?? '1.064375rem'};\n color: ${(props) => props.theme.colors.neutral[700]};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? '1.08rem'};\n line-height: ${(props) => props.lineHeight ?? '1.31rem'};\n }\n font-weight: 400;\n `,\n [TYPOGRAPHY_VARIANTS.H5_STRONG]: css<DSTypographyT.StyledPropsInterface>`\n ${typographyFontFamily}\n font-size: ${(props) => props.fontSize ?? '0.8775000000000001rem'};\n line-height: ${(props) => props.lineHeight ?? '1.064375rem'};\n color: ${(props) => props.theme.colors.neutral[700]};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? '1.08rem'};\n line-height: ${(props) => props.lineHeight ?? '1.31rem'};\n }\n font-weight: 600;\n `,\n [TYPOGRAPHY_VARIANTS.H4_STRONG]: css<DSTypographyT.StyledPropsInterface>`\n ${typographyFontFamily}\n font-size: ${(props) => props.fontSize ?? '0.999375rem'};\n line-height: ${(props) => props.lineHeight ?? '1.25125rem'};\n color: ${(props) => props.theme.colors.neutral[700]};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? '1.23rem'};\n line-height: ${(props) => props.lineHeight ?? '1.54rem'};\n }\n font-weight: 600;\n `,\n [TYPOGRAPHY_VARIANTS.H3_STRONG]: css<DSTypographyT.StyledPropsInterface>`\n ${typographyFontFamily}\n font-size: ${(props) => props.fontSize ?? '1.1212499999999999rem'};\n line-height: ${(props) => props.lineHeight ?? '1.373125rem'};\n color: ${(props) => props.theme.colors.neutral[700]};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => props.fontSize ?? '1.38rem'};\n line-height: ${(props) => props.lineHeight ?? '1.69rem'};\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.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' | '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;",
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' | 'highlight-brand' | 'highlight-important' | '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\n 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\n 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;AAoFhE,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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-typography",
3
- "version": "3.70.0-next.54",
3
+ "version": "3.70.0-next.59",
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.54",
42
- "@elliemae/ds-typescript-helpers": "3.70.0-next.54",
43
- "@elliemae/ds-system": "3.70.0-next.54"
41
+ "@elliemae/ds-props-helpers": "3.70.0-next.59",
42
+ "@elliemae/ds-typescript-helpers": "3.70.0-next.59",
43
+ "@elliemae/ds-system": "3.70.0-next.59"
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.54",
51
- "@elliemae/ds-test-utils": "3.70.0-next.54"
50
+ "@elliemae/ds-monorepo-devops": "3.70.0-next.59",
51
+ "@elliemae/ds-test-utils": "3.70.0-next.59"
52
52
  },
53
53
  "peerDependencies": {
54
54
  "@testing-library/jest-dom": "^6.6.3",
@@ -56,7 +56,7 @@
56
56
  "@testing-library/user-event": "~14.6.1",
57
57
  "react": "^18.3.1",
58
58
  "react-dom": "^18.3.1",
59
- "styled-components": "~5.3.9"
59
+ "styled-components": "~5.3.11"
60
60
  },
61
61
  "publishConfig": {
62
62
  "access": "public",
@@ -71,4 +71,4 @@
71
71
  "checkDeps": "npx -yes ../../util/ds-codemods check-missing-packages --projectFolderPath=\"./\" --ignorePackagesGlobPattern=\"\" --ignoreFilesGlobPattern=\"**/test-ables/*,**/tests/*\"",
72
72
  "dev": "cross-env NODE_ENV=development node ../../../scripts/build/build.mjs --watch"
73
73
  }
74
- }
74
+ }