@zendeskgarden/react-typography 9.12.3 → 9.12.5
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.
- package/dist/esm/elements/Blockquote.js +7 -10
- package/dist/esm/elements/Code.js +10 -13
- package/dist/esm/elements/CodeBlock.js +43 -47
- package/dist/esm/elements/Ellipsis.js +6 -7
- package/dist/esm/elements/Kbd.js +8 -11
- package/dist/esm/elements/LG.js +12 -15
- package/dist/esm/elements/MD.js +12 -15
- package/dist/esm/elements/Paragraph.js +7 -10
- package/dist/esm/elements/SM.js +12 -15
- package/dist/esm/elements/XL.js +10 -13
- package/dist/esm/elements/XXL.js +10 -13
- package/dist/esm/elements/XXXL.js +11 -14
- package/dist/esm/elements/lists/OrderedList.js +6 -7
- package/dist/esm/elements/lists/OrderedListItem.js +2 -2
- package/dist/esm/elements/lists/UnorderedList.js +6 -7
- package/dist/esm/elements/span/Span.js +14 -17
- package/dist/esm/styled/StyledBlockquote.js +3 -3
- package/dist/esm/styled/StyledCode.js +8 -9
- package/dist/esm/styled/StyledCodeBlock.js +7 -8
- package/dist/esm/styled/StyledCodeBlockContainer.js +3 -3
- package/dist/esm/styled/StyledCodeBlockLine.js +14 -16
- package/dist/esm/styled/StyledCodeBlockToken.js +6 -7
- package/dist/esm/styled/StyledEllipsis.js +3 -3
- package/dist/esm/styled/StyledFont.js +10 -11
- package/dist/esm/styled/StyledIcon.js +5 -5
- package/dist/esm/styled/StyledKbd.js +7 -8
- package/dist/esm/styled/StyledList.js +6 -6
- package/dist/esm/styled/StyledListItem.js +2 -2
- package/dist/esm/styled/StyledParagraph.js +1 -1
- package/dist/index.cjs.js +217 -264
- package/package.json +3 -3
|
@@ -21,16 +21,13 @@ import '../styled/StyledList.js';
|
|
|
21
21
|
import '../styled/StyledListItem.js';
|
|
22
22
|
import '../styled/StyledParagraph.js';
|
|
23
23
|
|
|
24
|
-
const Blockquote = forwardRef((
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
size: size
|
|
32
|
-
}, props));
|
|
33
|
-
});
|
|
24
|
+
const Blockquote = forwardRef(({
|
|
25
|
+
size = 'medium',
|
|
26
|
+
...props
|
|
27
|
+
}, ref) => React.createElement(StyledBlockquote, Object.assign({
|
|
28
|
+
ref: ref,
|
|
29
|
+
size: size
|
|
30
|
+
}, props)));
|
|
34
31
|
Blockquote.displayName = 'Blockquote';
|
|
35
32
|
Blockquote.propTypes = {
|
|
36
33
|
size: PropTypes.oneOf(SIZE)
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
*/
|
|
7
7
|
import React, { forwardRef } from 'react';
|
|
8
8
|
import PropTypes from 'prop-types';
|
|
9
|
-
import {
|
|
9
|
+
import { INHERIT_SIZE, HUE } from '../types/index.js';
|
|
10
10
|
import '../styled/StyledBlockquote.js';
|
|
11
11
|
import { StyledCode } from '../styled/StyledCode.js';
|
|
12
12
|
import '../styled/StyledCodeBlock.js';
|
|
@@ -21,18 +21,15 @@ import '../styled/StyledList.js';
|
|
|
21
21
|
import '../styled/StyledListItem.js';
|
|
22
22
|
import '../styled/StyledParagraph.js';
|
|
23
23
|
|
|
24
|
-
const Code = forwardRef((
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
$size: size
|
|
34
|
-
}, other));
|
|
35
|
-
});
|
|
24
|
+
const Code = forwardRef(({
|
|
25
|
+
hue = 'grey',
|
|
26
|
+
size = 'inherit',
|
|
27
|
+
...other
|
|
28
|
+
}, ref) => React.createElement(StyledCode, Object.assign({
|
|
29
|
+
ref: ref,
|
|
30
|
+
$hue: hue,
|
|
31
|
+
$size: size
|
|
32
|
+
}, other)));
|
|
36
33
|
Code.displayName = 'Code';
|
|
37
34
|
Code.propTypes = {
|
|
38
35
|
hue: PropTypes.oneOf(HUE),
|
|
@@ -23,17 +23,16 @@ import '../styled/StyledList.js';
|
|
|
23
23
|
import '../styled/StyledListItem.js';
|
|
24
24
|
import '../styled/StyledParagraph.js';
|
|
25
25
|
|
|
26
|
-
const CodeBlock = React.forwardRef((
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
} = _ref;
|
|
26
|
+
const CodeBlock = React.forwardRef(({
|
|
27
|
+
children,
|
|
28
|
+
containerProps,
|
|
29
|
+
highlightLines,
|
|
30
|
+
isLight,
|
|
31
|
+
isNumbered,
|
|
32
|
+
language = 'tsx',
|
|
33
|
+
size = 'medium',
|
|
34
|
+
...other
|
|
35
|
+
}, ref) => {
|
|
37
36
|
const containerRef = useRef(null);
|
|
38
37
|
const code = Array.isArray(children) ? children[0] : children;
|
|
39
38
|
const dependency = useMemo(() => [size, children], [size, children]);
|
|
@@ -66,42 +65,39 @@ const CodeBlock = React.forwardRef((_ref, ref) => {
|
|
|
66
65
|
Prism: Prism,
|
|
67
66
|
code: code ? code.trim() : '',
|
|
68
67
|
language: LANGUAGES.includes(language) ? language : 'tsx'
|
|
69
|
-
},
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
...parentTheme,
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
style: undefined
|
|
103
|
-
}), token.empty ? '\n' : token.content))))));
|
|
104
|
-
}));
|
|
68
|
+
}, ({
|
|
69
|
+
className,
|
|
70
|
+
tokens,
|
|
71
|
+
getLineProps,
|
|
72
|
+
getTokenProps
|
|
73
|
+
}) => React.createElement(ThemeProvider, {
|
|
74
|
+
theme: parentTheme => ({
|
|
75
|
+
...parentTheme,
|
|
76
|
+
colors: {
|
|
77
|
+
...parentTheme.colors,
|
|
78
|
+
base: isLight ? 'light' : 'dark'
|
|
79
|
+
}
|
|
80
|
+
})
|
|
81
|
+
}, React.createElement(StyledCodeBlock, Object.assign({
|
|
82
|
+
className: className,
|
|
83
|
+
ref: ref
|
|
84
|
+
}, other), tokens.map((line, index) =>
|
|
85
|
+
React.createElement(StyledCodeBlockLine, Object.assign({}, getLineProps({
|
|
86
|
+
line
|
|
87
|
+
}), {
|
|
88
|
+
key: index,
|
|
89
|
+
$language: language,
|
|
90
|
+
$isHighlighted: highlightLines?.includes(index + 1),
|
|
91
|
+
$isNumbered: isNumbered,
|
|
92
|
+
$diff: getDiff(line),
|
|
93
|
+
$size: size,
|
|
94
|
+
style: undefined
|
|
95
|
+
}), line.map((token, tokenKey) => React.createElement(StyledCodeBlockToken, Object.assign({}, getTokenProps({
|
|
96
|
+
token
|
|
97
|
+
}), {
|
|
98
|
+
key: tokenKey,
|
|
99
|
+
style: undefined
|
|
100
|
+
}), token.empty ? '\n' : token.content))))))));
|
|
105
101
|
});
|
|
106
102
|
CodeBlock.displayName = 'CodeBlock';
|
|
107
103
|
|
|
@@ -20,13 +20,12 @@ import '../styled/StyledList.js';
|
|
|
20
20
|
import '../styled/StyledListItem.js';
|
|
21
21
|
import '../styled/StyledParagraph.js';
|
|
22
22
|
|
|
23
|
-
const Ellipsis = forwardRef((
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
} = _ref;
|
|
23
|
+
const Ellipsis = forwardRef(({
|
|
24
|
+
children,
|
|
25
|
+
title,
|
|
26
|
+
tag = 'div',
|
|
27
|
+
...other
|
|
28
|
+
}, ref) => {
|
|
30
29
|
let textContent = undefined;
|
|
31
30
|
if (title !== undefined) {
|
|
32
31
|
textContent = title;
|
package/dist/esm/elements/Kbd.js
CHANGED
|
@@ -21,17 +21,14 @@ import '../styled/StyledListItem.js';
|
|
|
21
21
|
import '../styled/StyledParagraph.js';
|
|
22
22
|
import { INHERIT_SIZE } from '../types/index.js';
|
|
23
23
|
|
|
24
|
-
const Kbd = forwardRef((
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
ref: ref
|
|
33
|
-
}));
|
|
34
|
-
});
|
|
24
|
+
const Kbd = forwardRef(({
|
|
25
|
+
size = 'inherit',
|
|
26
|
+
...other
|
|
27
|
+
}, ref) => React.createElement(StyledKbd, Object.assign({
|
|
28
|
+
$size: size
|
|
29
|
+
}, other, {
|
|
30
|
+
ref: ref
|
|
31
|
+
})));
|
|
35
32
|
Kbd.displayName = 'Kbd';
|
|
36
33
|
Kbd.propTypes = {
|
|
37
34
|
size: PropTypes.oneOf(INHERIT_SIZE)
|
package/dist/esm/elements/LG.js
CHANGED
|
@@ -20,21 +20,18 @@ import '../styled/StyledList.js';
|
|
|
20
20
|
import '../styled/StyledListItem.js';
|
|
21
21
|
import '../styled/StyledParagraph.js';
|
|
22
22
|
|
|
23
|
-
const LG = forwardRef((
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
ref: ref
|
|
36
|
-
}, other));
|
|
37
|
-
});
|
|
23
|
+
const LG = forwardRef(({
|
|
24
|
+
isBold,
|
|
25
|
+
isMonospace,
|
|
26
|
+
tag = 'div',
|
|
27
|
+
...other
|
|
28
|
+
}, ref) => React.createElement(StyledFont, Object.assign({
|
|
29
|
+
$isBold: isBold,
|
|
30
|
+
$isMonospace: isMonospace,
|
|
31
|
+
$size: "large",
|
|
32
|
+
as: tag,
|
|
33
|
+
ref: ref
|
|
34
|
+
}, other)));
|
|
38
35
|
LG.displayName = 'LG';
|
|
39
36
|
LG.propTypes = {
|
|
40
37
|
tag: PropTypes.any,
|
package/dist/esm/elements/MD.js
CHANGED
|
@@ -20,21 +20,18 @@ import '../styled/StyledList.js';
|
|
|
20
20
|
import '../styled/StyledListItem.js';
|
|
21
21
|
import '../styled/StyledParagraph.js';
|
|
22
22
|
|
|
23
|
-
const MD = forwardRef((
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
ref: ref
|
|
36
|
-
}, other));
|
|
37
|
-
});
|
|
23
|
+
const MD = forwardRef(({
|
|
24
|
+
isBold,
|
|
25
|
+
isMonospace,
|
|
26
|
+
tag = 'div',
|
|
27
|
+
...other
|
|
28
|
+
}, ref) => React.createElement(StyledFont, Object.assign({
|
|
29
|
+
$isBold: isBold,
|
|
30
|
+
$isMonospace: isMonospace,
|
|
31
|
+
$size: "medium",
|
|
32
|
+
as: tag,
|
|
33
|
+
ref: ref
|
|
34
|
+
}, other)));
|
|
38
35
|
MD.displayName = 'MD';
|
|
39
36
|
MD.propTypes = {
|
|
40
37
|
tag: PropTypes.any,
|
|
@@ -21,16 +21,13 @@ import '../styled/StyledList.js';
|
|
|
21
21
|
import '../styled/StyledListItem.js';
|
|
22
22
|
import { StyledParagraph } from '../styled/StyledParagraph.js';
|
|
23
23
|
|
|
24
|
-
const Paragraph = forwardRef((
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
size: size
|
|
32
|
-
}, props));
|
|
33
|
-
});
|
|
24
|
+
const Paragraph = forwardRef(({
|
|
25
|
+
size = 'medium',
|
|
26
|
+
...props
|
|
27
|
+
}, ref) => React.createElement(StyledParagraph, Object.assign({
|
|
28
|
+
ref: ref,
|
|
29
|
+
size: size
|
|
30
|
+
}, props)));
|
|
34
31
|
Paragraph.displayName = 'Paragraph';
|
|
35
32
|
Paragraph.propTypes = {
|
|
36
33
|
size: PropTypes.oneOf(SIZE)
|
package/dist/esm/elements/SM.js
CHANGED
|
@@ -20,21 +20,18 @@ import '../styled/StyledList.js';
|
|
|
20
20
|
import '../styled/StyledListItem.js';
|
|
21
21
|
import '../styled/StyledParagraph.js';
|
|
22
22
|
|
|
23
|
-
const SM = forwardRef((
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
$size: "small"
|
|
36
|
-
}, other));
|
|
37
|
-
});
|
|
23
|
+
const SM = forwardRef(({
|
|
24
|
+
isBold,
|
|
25
|
+
isMonospace,
|
|
26
|
+
tag = 'div',
|
|
27
|
+
...other
|
|
28
|
+
}, ref) => React.createElement(StyledFont, Object.assign({
|
|
29
|
+
$isBold: isBold,
|
|
30
|
+
$isMonospace: isMonospace,
|
|
31
|
+
as: tag,
|
|
32
|
+
ref: ref,
|
|
33
|
+
$size: "small"
|
|
34
|
+
}, other)));
|
|
38
35
|
SM.displayName = 'SM';
|
|
39
36
|
SM.propTypes = {
|
|
40
37
|
tag: PropTypes.any,
|
package/dist/esm/elements/XL.js
CHANGED
|
@@ -20,19 +20,16 @@ import '../styled/StyledList.js';
|
|
|
20
20
|
import '../styled/StyledListItem.js';
|
|
21
21
|
import '../styled/StyledParagraph.js';
|
|
22
22
|
|
|
23
|
-
const XL = forwardRef((
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
as: tag
|
|
34
|
-
}, other));
|
|
35
|
-
});
|
|
23
|
+
const XL = forwardRef(({
|
|
24
|
+
isBold,
|
|
25
|
+
tag = 'div',
|
|
26
|
+
...other
|
|
27
|
+
}, ref) => React.createElement(StyledFont, Object.assign({
|
|
28
|
+
$size: "extralarge",
|
|
29
|
+
$isBold: isBold,
|
|
30
|
+
ref: ref,
|
|
31
|
+
as: tag
|
|
32
|
+
}, other)));
|
|
36
33
|
XL.displayName = 'XL';
|
|
37
34
|
XL.propTypes = {
|
|
38
35
|
tag: PropTypes.any,
|
package/dist/esm/elements/XXL.js
CHANGED
|
@@ -20,19 +20,16 @@ import '../styled/StyledList.js';
|
|
|
20
20
|
import '../styled/StyledListItem.js';
|
|
21
21
|
import '../styled/StyledParagraph.js';
|
|
22
22
|
|
|
23
|
-
const XXL = forwardRef((
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
as: tag
|
|
34
|
-
}, other));
|
|
35
|
-
});
|
|
23
|
+
const XXL = forwardRef(({
|
|
24
|
+
isBold,
|
|
25
|
+
tag = 'div',
|
|
26
|
+
...other
|
|
27
|
+
}, ref) => React.createElement(StyledFont, Object.assign({
|
|
28
|
+
$size: "2xlarge",
|
|
29
|
+
$isBold: isBold,
|
|
30
|
+
ref: ref,
|
|
31
|
+
as: tag
|
|
32
|
+
}, other)));
|
|
36
33
|
XXL.displayName = 'XXL';
|
|
37
34
|
XXL.propTypes = {
|
|
38
35
|
tag: PropTypes.any,
|
|
@@ -20,20 +20,17 @@ import '../styled/StyledList.js';
|
|
|
20
20
|
import '../styled/StyledListItem.js';
|
|
21
21
|
import '../styled/StyledParagraph.js';
|
|
22
22
|
|
|
23
|
-
const XXXL = forwardRef((
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
ref: ref
|
|
35
|
-
}));
|
|
36
|
-
});
|
|
23
|
+
const XXXL = forwardRef(({
|
|
24
|
+
isBold,
|
|
25
|
+
tag = 'div',
|
|
26
|
+
...other
|
|
27
|
+
}, ref) => React.createElement(StyledFont, Object.assign({
|
|
28
|
+
$isBold: isBold,
|
|
29
|
+
$size: "3xlarge"
|
|
30
|
+
}, other, {
|
|
31
|
+
as: tag,
|
|
32
|
+
ref: ref
|
|
33
|
+
})));
|
|
37
34
|
XXXL.displayName = 'XXXL';
|
|
38
35
|
XXXL.propTypes = {
|
|
39
36
|
tag: PropTypes.any,
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
import React, { useMemo } from 'react';
|
|
8
8
|
import PropTypes from 'prop-types';
|
|
9
9
|
import { Item } from './OrderedListItem.js';
|
|
10
|
-
import {
|
|
10
|
+
import { TYPE_ORDERED_LIST, SIZE } from '../../types/index.js';
|
|
11
11
|
import { OrderedListContext } from '../../utils/useOrderedListContext.js';
|
|
12
12
|
import '../../styled/StyledBlockquote.js';
|
|
13
13
|
import '../../styled/StyledCode.js';
|
|
@@ -23,12 +23,11 @@ import { StyledOrderedList } from '../../styled/StyledList.js';
|
|
|
23
23
|
import '../../styled/StyledListItem.js';
|
|
24
24
|
import '../../styled/StyledParagraph.js';
|
|
25
25
|
|
|
26
|
-
const OrderedListComponent = React.forwardRef((
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
} = _ref;
|
|
26
|
+
const OrderedListComponent = React.forwardRef(({
|
|
27
|
+
size = 'medium',
|
|
28
|
+
type = 'decimal',
|
|
29
|
+
...other
|
|
30
|
+
}, ref) => {
|
|
32
31
|
const value = useMemo(() => ({
|
|
33
32
|
size: size
|
|
34
33
|
}), [size]);
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
import React, { forwardRef, useMemo } from 'react';
|
|
8
8
|
import PropTypes from 'prop-types';
|
|
9
9
|
import { Item } from './UnorderedListItem.js';
|
|
10
|
-
import {
|
|
10
|
+
import { TYPE_UNORDERED_LIST, SIZE } from '../../types/index.js';
|
|
11
11
|
import { UnorderedListContext } from '../../utils/useUnorderedListContext.js';
|
|
12
12
|
import '../../styled/StyledBlockquote.js';
|
|
13
13
|
import '../../styled/StyledCode.js';
|
|
@@ -23,12 +23,11 @@ import { StyledUnorderedList } from '../../styled/StyledList.js';
|
|
|
23
23
|
import '../../styled/StyledListItem.js';
|
|
24
24
|
import '../../styled/StyledParagraph.js';
|
|
25
25
|
|
|
26
|
-
const UnorderedListComponent = forwardRef((
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
} = _ref;
|
|
26
|
+
const UnorderedListComponent = forwardRef(({
|
|
27
|
+
size = 'medium',
|
|
28
|
+
type = 'disc',
|
|
29
|
+
...other
|
|
30
|
+
}, ref) => {
|
|
32
31
|
const value = useMemo(() => ({
|
|
33
32
|
size: size
|
|
34
33
|
}), [size]);
|
|
@@ -22,23 +22,20 @@ import '../../styled/StyledParagraph.js';
|
|
|
22
22
|
import { StartIcon } from './StartIcon.js';
|
|
23
23
|
import { Icon } from './Icon.js';
|
|
24
24
|
|
|
25
|
-
const SpanComponent = forwardRef((
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
ref: ref
|
|
40
|
-
}, other));
|
|
41
|
-
});
|
|
25
|
+
const SpanComponent = forwardRef(({
|
|
26
|
+
hue,
|
|
27
|
+
isBold,
|
|
28
|
+
isMonospace,
|
|
29
|
+
tag = 'span',
|
|
30
|
+
...other
|
|
31
|
+
}, ref) => React.createElement(StyledFont, Object.assign({
|
|
32
|
+
$hue: hue,
|
|
33
|
+
$isBold: isBold,
|
|
34
|
+
$isMonospace: isMonospace,
|
|
35
|
+
$size: "inherit",
|
|
36
|
+
as: tag,
|
|
37
|
+
ref: ref
|
|
38
|
+
}, other)));
|
|
42
39
|
SpanComponent.displayName = 'Span';
|
|
43
40
|
SpanComponent.propTypes = {
|
|
44
41
|
tag: PropTypes.any,
|
|
@@ -8,10 +8,10 @@ import styled from 'styled-components';
|
|
|
8
8
|
import { getColor, componentStyles } from '@zendeskgarden/react-theming';
|
|
9
9
|
import { THEME_SIZES } from './StyledFont.js';
|
|
10
10
|
|
|
11
|
-
const COMPONENT_ID = 'typography.blockquote';
|
|
11
|
+
const COMPONENT_ID$9 = 'typography.blockquote';
|
|
12
12
|
const StyledBlockquote = styled.blockquote.attrs({
|
|
13
|
-
'data-garden-id': COMPONENT_ID,
|
|
14
|
-
'data-garden-version': '9.12.
|
|
13
|
+
'data-garden-id': COMPONENT_ID$9,
|
|
14
|
+
'data-garden-version': '9.12.5'
|
|
15
15
|
}).withConfig({
|
|
16
16
|
displayName: "StyledBlockquote",
|
|
17
17
|
componentId: "sc-1tt3ye0-0"
|
|
@@ -8,12 +8,11 @@ import styled, { css } from 'styled-components';
|
|
|
8
8
|
import { componentStyles, getColor } from '@zendeskgarden/react-theming';
|
|
9
9
|
import { StyledFont } from './StyledFont.js';
|
|
10
10
|
|
|
11
|
-
const COMPONENT_ID = 'typography.code';
|
|
12
|
-
const colorStyles =
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
} = _ref;
|
|
11
|
+
const COMPONENT_ID$8 = 'typography.code';
|
|
12
|
+
const colorStyles$3 = ({
|
|
13
|
+
$hue,
|
|
14
|
+
theme
|
|
15
|
+
}) => {
|
|
17
16
|
const bgColorArgs = {
|
|
18
17
|
theme,
|
|
19
18
|
light: {
|
|
@@ -49,8 +48,8 @@ const colorStyles = _ref => {
|
|
|
49
48
|
return css(["background-color:", ";color:", ";a &{color:inherit;}"], backgroundColor, foregroundColor);
|
|
50
49
|
};
|
|
51
50
|
const StyledCode = styled(StyledFont).attrs(props => ({
|
|
52
|
-
'data-garden-id': COMPONENT_ID,
|
|
53
|
-
'data-garden-version': '9.12.
|
|
51
|
+
'data-garden-id': COMPONENT_ID$8,
|
|
52
|
+
'data-garden-version': '9.12.5',
|
|
54
53
|
as: 'code',
|
|
55
54
|
$isMonospace: true,
|
|
56
55
|
$hue: props.$hue ?? 'grey',
|
|
@@ -58,6 +57,6 @@ const StyledCode = styled(StyledFont).attrs(props => ({
|
|
|
58
57
|
})).withConfig({
|
|
59
58
|
displayName: "StyledCode",
|
|
60
59
|
componentId: "sc-l8yvmf-0"
|
|
61
|
-
})(["border-radius:", ";padding:1.5px;", ";", ";"], props => props.theme.borderRadii.sm, props => colorStyles(props), componentStyles);
|
|
60
|
+
})(["border-radius:", ";padding:1.5px;", ";", ";"], props => props.theme.borderRadii.sm, props => colorStyles$3(props), componentStyles);
|
|
62
61
|
|
|
63
62
|
export { StyledCode };
|
|
@@ -7,11 +7,10 @@
|
|
|
7
7
|
import styled, { css } from 'styled-components';
|
|
8
8
|
import { componentStyles, getColor } from '@zendeskgarden/react-theming';
|
|
9
9
|
|
|
10
|
-
const COMPONENT_ID = 'typography.codeblock';
|
|
11
|
-
const colorStyles =
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
} = _ref;
|
|
10
|
+
const COMPONENT_ID$7 = 'typography.codeblock';
|
|
11
|
+
const colorStyles$2 = ({
|
|
12
|
+
theme
|
|
13
|
+
}) => {
|
|
15
14
|
const backgroundColor = getColor({
|
|
16
15
|
theme,
|
|
17
16
|
variable: 'background.recessed'
|
|
@@ -23,11 +22,11 @@ const colorStyles = _ref => {
|
|
|
23
22
|
return css(["background-color:", ";color:", ";"], backgroundColor, foregroundColor);
|
|
24
23
|
};
|
|
25
24
|
const StyledCodeBlock = styled.pre.attrs({
|
|
26
|
-
'data-garden-id': COMPONENT_ID,
|
|
27
|
-
'data-garden-version': '9.12.
|
|
25
|
+
'data-garden-id': COMPONENT_ID$7,
|
|
26
|
+
'data-garden-version': '9.12.5'
|
|
28
27
|
}).withConfig({
|
|
29
28
|
displayName: "StyledCodeBlock",
|
|
30
29
|
componentId: "sc-5wky57-0"
|
|
31
|
-
})(["display:table;margin:0;padding:", "px;box-sizing:border-box;width:100%;direction:ltr;white-space:pre;counter-reset:linenumber;", ";", ";"], props => props.theme.space.base * 3, colorStyles, componentStyles);
|
|
30
|
+
})(["display:table;margin:0;padding:", "px;box-sizing:border-box;width:100%;direction:ltr;white-space:pre;counter-reset:linenumber;", ";", ";"], props => props.theme.space.base * 3, colorStyles$2, componentStyles);
|
|
32
31
|
|
|
33
32
|
export { StyledCodeBlock };
|
|
@@ -7,10 +7,10 @@
|
|
|
7
7
|
import styled from 'styled-components';
|
|
8
8
|
import { focusStyles, componentStyles } from '@zendeskgarden/react-theming';
|
|
9
9
|
|
|
10
|
-
const COMPONENT_ID = 'typography.codeblock_container';
|
|
10
|
+
const COMPONENT_ID$6 = 'typography.codeblock_container';
|
|
11
11
|
const StyledCodeBlockContainer = styled.div.attrs({
|
|
12
|
-
'data-garden-id': COMPONENT_ID,
|
|
13
|
-
'data-garden-version': '9.12.
|
|
12
|
+
'data-garden-id': COMPONENT_ID$6,
|
|
13
|
+
'data-garden-version': '9.12.5'
|
|
14
14
|
}).withConfig({
|
|
15
15
|
displayName: "StyledCodeBlockContainer",
|
|
16
16
|
componentId: "sc-14zgbfw-0"
|