@ndlib/component-library 0.0.97 → 0.0.99
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/components/composites/Card/index.js +1 -0
- package/dist/components/composites/Modal/index.d.ts +2 -1
- package/dist/components/composites/Modal/index.js +4 -4
- package/dist/components/composites/NavMenu/index.js +9 -3
- package/dist/components/elements/Fields/Select/index.js +3 -3
- package/dist/components/elements/List/index.js +0 -1
- package/dist/components/elements/Markdown/Markdown.stories.d.ts +1 -0
- package/dist/components/elements/Markdown/Markdown.stories.js +15 -0
- package/dist/components/elements/Markdown/index.d.ts +2 -1
- package/dist/components/elements/Markdown/index.js +14 -14
- package/dist/components/providers/alerts.js +1 -1
- package/dist/theme/typography.js +1 -1
- package/package.json +1 -1
|
@@ -82,6 +82,7 @@ export const Card = ({ size, displayDate, headline, image, layout, onClick, rais
|
|
|
82
82
|
height: imageHeight,
|
|
83
83
|
} })), displayDate && _jsx(DateDisplay, { date: displayDate }), heading && (_jsxs(Row, Object.assign({ sx: Object.assign({ bg: COLOR.PRIMARY, color: COLOR.WHITE, width: '100%', px: contentPaddingX, py: 3, justifyContent: 'space-between', alignItems: 'center' }, headingStyles) }, { children: [_jsxs(Row, { children: [headingIcon && (_jsx(Icon, { icon: headingIcon, size: FONT_SIZE.LG, color: COLOR.WHITE, sx: { mr: 2 } })), _jsx(Heading, Object.assign({ size: HEADING_SIZE.SM, sx: {
|
|
84
84
|
color: COLOR.WHITE,
|
|
85
|
+
mt: 0,
|
|
85
86
|
whiteSpace: 'nowrap',
|
|
86
87
|
} }, { children: heading }))] }), _jsx(Row, { children: headingAction && headingAction })] }))), _jsx(Row, Object.assign({ sx: { px: contentPaddingX, py: contentPaddingY } }, { children: _jsxs(Column, Object.assign({ justify: "center" }, { children: [headline && (_jsx(Heading, Object.assign({ typography: typography, sx: { mt: 0 } }, { children: truncateHeadlineAfter ? (_jsx(ReadMore, Object.assign({ lines: truncateHeadlineAfter, typography: typography, sx: { bg: activeBackground } }, { children: headline }))) : (headline) }))), children && (_jsx(Box, Object.assign({ sx: { mt: headline && !heading ? 2 : 0 } }, { children: typeof children === 'function'
|
|
87
88
|
? children({ isHovered, activeBackground })
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { StyledElementProps } from '../../../theme';
|
|
1
|
+
import { StyledElementProps, StylesProp } from '../../../theme';
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import { ButtonProps } from '../../elements/Button';
|
|
4
4
|
type ModalProps = StyledElementProps<HTMLDivElement, {
|
|
@@ -10,6 +10,7 @@ type ModalProps = StyledElementProps<HTMLDivElement, {
|
|
|
10
10
|
footer?: React.ReactNode;
|
|
11
11
|
actions?: ModalAction[];
|
|
12
12
|
wrapWithTheme?: boolean;
|
|
13
|
+
bodyStyles?: StylesProp;
|
|
13
14
|
}>;
|
|
14
15
|
type ModalAction = {
|
|
15
16
|
label: string;
|
|
@@ -12,7 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
12
12
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
13
13
|
import _ReactModal from 'react-modal';
|
|
14
14
|
import { importedDefaultComponentShim } from '../../../utils/misc';
|
|
15
|
-
import { ThemeProvider, useTheme } from '../../../theme';
|
|
15
|
+
import { ThemeProvider, useTheme, } from '../../../theme';
|
|
16
16
|
import { GROUP_TYPE, Group } from '../../elements/Group';
|
|
17
17
|
import { Row } from '../../elements/layout/Row';
|
|
18
18
|
import { HEADING_SIZE, Heading } from '../../elements/text/Heading';
|
|
@@ -23,7 +23,7 @@ import { useMediaQuery } from '../../providers/media';
|
|
|
23
23
|
import { useComponentConfig } from '../../providers/componentConfig';
|
|
24
24
|
const ReactModal = importedDefaultComponentShim(_ReactModal);
|
|
25
25
|
export const Modal = (_a) => {
|
|
26
|
-
var { children, heading, hideHeading, isOpen, footer, actions, wrapWithTheme, close, zIndex } = _a, props = __rest(_a, ["children", "heading", "hideHeading", "isOpen", "footer", "actions", "wrapWithTheme", "close", "zIndex"]);
|
|
26
|
+
var { children, heading, hideHeading, isOpen, footer, actions, wrapWithTheme, close, zIndex, bodyStyles } = _a, props = __rest(_a, ["children", "heading", "hideHeading", "isOpen", "footer", "actions", "wrapWithTheme", "close", "zIndex", "bodyStyles"]);
|
|
27
27
|
const { breakpoint } = useMediaQuery();
|
|
28
28
|
const { modal } = useComponentConfig();
|
|
29
29
|
const theme = useTheme();
|
|
@@ -32,11 +32,11 @@ export const Modal = (_a) => {
|
|
|
32
32
|
p: 3,
|
|
33
33
|
borderBottom: 'solid 1px',
|
|
34
34
|
borderColor: COLOR.LIGHT_GRAY,
|
|
35
|
-
} }, { children: [_jsx(Heading, Object.assign({ size: HEADING_SIZE.SM, typography: TYPOGRAPHY_TYPE.CONTROL_MEDIUM }, { children: heading })), _jsx(Button, Object.assign({ type: BUTTON_TYPE.TEXT, onClick: (e) => {
|
|
35
|
+
} }, { children: [_jsx(Heading, Object.assign({ size: HEADING_SIZE.SM, typography: TYPOGRAPHY_TYPE.CONTROL_MEDIUM, sx: { mt: 0 } }, { children: heading })), _jsx(Button, Object.assign({ type: BUTTON_TYPE.TEXT, onClick: (e) => {
|
|
36
36
|
e.preventDefault();
|
|
37
37
|
e.stopPropagation();
|
|
38
38
|
close(e);
|
|
39
|
-
} }, { children: "Close" }))] }))), _jsx(Row, Object.assign({ sx: { p: 3 } }, { children: children })), shouldShowFooter && (_jsxs(Row, Object.assign({ sx: { borderTop: 'solid 1px', borderColor: COLOR.LIGHT_GRAY, p: 3 } }, { children: [footer, actions !== undefined && (_jsx(Row, Object.assign({ sx: { width: '100%', justifyContent: 'flex-end' } }, { children: actions.map((action, index) => (_jsx(Button, Object.assign({ type: action.isPrimary ? BUTTON_TYPE.DEFAULT : BUTTON_TYPE.OUTLINE, onClick: (e) => {
|
|
39
|
+
} }, { children: "Close" }))] }))), _jsx(Row, Object.assign({ sx: Object.assign({ p: 3 }, bodyStyles) }, { children: children })), shouldShowFooter && (_jsxs(Row, Object.assign({ sx: { borderTop: 'solid 1px', borderColor: COLOR.LIGHT_GRAY, p: 3 } }, { children: [footer, actions !== undefined && (_jsx(Row, Object.assign({ sx: { width: '100%', justifyContent: 'flex-end' } }, { children: actions.map((action, index) => (_jsx(Button, Object.assign({ type: action.isPrimary ? BUTTON_TYPE.DEFAULT : BUTTON_TYPE.OUTLINE, onClick: (e) => {
|
|
40
40
|
action.onClick(e);
|
|
41
41
|
}, sx: {
|
|
42
42
|
mr: index < actions.length - 1 ? 1 : 0,
|
|
@@ -18,7 +18,7 @@ import { Row } from '../../elements/layout/Row';
|
|
|
18
18
|
import { Column } from '../../elements/layout/Column';
|
|
19
19
|
import { HEADING_SIZE, Heading } from '../../elements/text/Heading';
|
|
20
20
|
import { Link } from '../../elements/Link';
|
|
21
|
-
import { FONT_WEIGHT } from '../../../theme/typography';
|
|
21
|
+
import { FONT_SIZE, FONT_WEIGHT } from '../../../theme/typography';
|
|
22
22
|
import { COLOR } from '../../../theme/colors';
|
|
23
23
|
import { importedDefaultComponentShim } from '../../../utils/misc';
|
|
24
24
|
const ChevronRightIcon = importedDefaultComponentShim(_ChevronRightIcon);
|
|
@@ -43,10 +43,16 @@ export const NavMenu = (props) => {
|
|
|
43
43
|
const submenuPath = [topLevelMenuId, submenuItem.id];
|
|
44
44
|
const link = '//' + document.location.host + topLevelMenuId;
|
|
45
45
|
const category = topLevelMenuId.charAt(1).toUpperCase() + topLevelMenuId.slice(2);
|
|
46
|
-
return (_jsxs(Column, Object.assign({ sx: {
|
|
46
|
+
return (_jsxs(Column, Object.assign({ sx: {
|
|
47
|
+
flexBasis: '300px',
|
|
48
|
+
py: 2,
|
|
49
|
+
px: 4,
|
|
50
|
+
flexShrink: 0,
|
|
51
|
+
flexGrow: 0,
|
|
52
|
+
} }, { children: [_jsx(Heading, Object.assign({ standalone: true, size: HEADING_SIZE.SM, underline: true }, getMenuItemProps(submenuPath), { children: submenuItem.label })), _jsx(List, Object.assign({}, getMenuProps(submenuPath), { icon: ChevronRightIcon, iconSize: FONT_SIZE.MS }, { children: leafMenuItems.map((leafMenuItem, i) => {
|
|
47
53
|
var _a;
|
|
48
54
|
const leafMenuPath = submenuPath.concat(leafMenuItem.id);
|
|
49
|
-
return (_jsx(ListItem, Object.assign({ index: i, sx: { mt:
|
|
55
|
+
return (_jsx(ListItem, Object.assign({ index: i, sx: { mt: 2 } }, getMenuItemProps(leafMenuPath), { children: _jsx(Link, Object.assign({ to: (_a = leafMenuItem === null || leafMenuItem === void 0 ? void 0 : leafMenuItem.action) === null || _a === void 0 ? void 0 : _a.to, sx: {
|
|
50
56
|
fontWeight: FONT_WEIGHT.BOLD,
|
|
51
57
|
}, tabIndex: -1 }, { children: leafMenuItem.label })) }), leafMenuItem.id));
|
|
52
58
|
}) })), i < 1 && (link.includes('esearch') || link.includes('ervices')) ? (_jsxs(ArrowLink, Object.assign({ to: link, sx: { margin: '20px 10px 10px 10px' } }, { children: ["View More ", category] }))) : null] }), submenuItem.id));
|
|
@@ -131,7 +131,7 @@ export function Select({ size: sizeParam, placeholder, leftIcon, value, label, o
|
|
|
131
131
|
borderWidth: '1px',
|
|
132
132
|
overflow: 'hidden',
|
|
133
133
|
minWidth: '0%',
|
|
134
|
-
borderColor: inverted ? COLOR.
|
|
134
|
+
borderColor: inverted ? COLOR.WHITE : COLOR.LIGHT_GRAY,
|
|
135
135
|
zIndex: theme.zIndex.ELEVATED,
|
|
136
136
|
} }, { children: _jsx("legend", Object.assign({ style: {
|
|
137
137
|
width: 'auto',
|
|
@@ -155,7 +155,7 @@ export function Select({ size: sizeParam, placeholder, leftIcon, value, label, o
|
|
|
155
155
|
left: '0.5rem',
|
|
156
156
|
lineHeight: 1,
|
|
157
157
|
zIndex: theme.zIndex.ELEVATED,
|
|
158
|
-
color: inverted ? COLOR.
|
|
158
|
+
color: inverted ? COLOR.WHITE : COLOR.PRIMARY,
|
|
159
159
|
px: 1,
|
|
160
160
|
top: labelOffsetMap[size],
|
|
161
161
|
} }, { children: label })), _jsx(Button, Object.assign({ ref: refs.setReference, disableFocusStyles: true, role: "combobox", "aria-controls": listboxId, "aria-expanded": isOpen, "aria-autocomplete": "none", "aria-activedescendant": isOpen && stagedOptionValue
|
|
@@ -167,7 +167,7 @@ export function Select({ size: sizeParam, placeholder, leftIcon, value, label, o
|
|
|
167
167
|
else {
|
|
168
168
|
close();
|
|
169
169
|
}
|
|
170
|
-
}, color: inverted ? COLOR.
|
|
170
|
+
}, color: inverted ? COLOR.WHITE : COLOR.TEXT, sx: Object.assign({ height, width: '100%', border: 'solid 0px', flexDirection: 'row', alignItems: 'center', position: 'relative', zIndex: theme.zIndex.NORMAL, background: 'none' }, typographyStyles), leftIcon: leftIcon, rightIcon: ArrowDropDownIcon }, { children: currentOption ? renderOptionLabel(currentOption) : placeholder })), isOpen && (_jsx(ListBox, { id: listboxId, options: options, selected: value, focused: stagedOptionValue, selectOption: (option) => {
|
|
171
171
|
onSelectOption && onSelectOption(option.value);
|
|
172
172
|
close();
|
|
173
173
|
}, ref: refs.setFloating, renderOption: renderOption, sx: {
|
|
@@ -93,7 +93,6 @@ export const ListItem = (_a) => {
|
|
|
93
93
|
const typographyStyles = getTypographyStyles(sizeTypographyMap[size]);
|
|
94
94
|
const lineHeight = useLinesHeight({ typography, lines: 1 });
|
|
95
95
|
const tabIndex = tabIndexParam || (onClick ? 0 : undefined);
|
|
96
|
-
console.log('rendering tab index', tabIndex);
|
|
97
96
|
return (_jsxs("li", Object.assign({ sx: Object.assign(Object.assign({ depth, display: 'flex', mt: index === 0 && depth === 0 ? 0 : marginSizeMap[size], ml: 1 }, typographyStyles), sx), tabIndex: tabIndex }, rest, { children: [ordered ? (_jsxs(Label, Object.assign({ standalone: true, sx: { mr: 2 } }, { children: [index + 1, "."] }))) : (_jsx(Column, Object.assign({ sx: { height: lineHeight }, justify: "center" }, { children: _jsx(Icon, { icon: icon, color: iconColor, size: iconSize, onClick: onIconClick, "aria-label": iconLabel, sx: {
|
|
98
97
|
mr: 3,
|
|
99
98
|
alignItems: 'flex-start',
|
|
@@ -6,5 +6,6 @@ type Story = StoryObj<typeof Markdown>;
|
|
|
6
6
|
export declare const Default: Story;
|
|
7
7
|
export declare const WithHtml: Story;
|
|
8
8
|
export declare const CustomizeImages: Story;
|
|
9
|
+
export declare const CustomizeStyles: Story;
|
|
9
10
|
export declare const CustomHtmlSanitize: Story;
|
|
10
11
|
export declare const NoHtml: Story;
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { DEFAULT_ALLOWED_ATTRIBUTES, DEFAULT_ALLOWED_TAGS, Markdown } from '.';
|
|
3
|
+
import { FONT_WEIGHT } from '../../../theme/typography';
|
|
4
|
+
import { COLOR } from '../../../theme/colors';
|
|
3
5
|
const meta = {
|
|
4
6
|
title: 'Elements/Markdown',
|
|
5
7
|
component: Markdown,
|
|
@@ -85,6 +87,19 @@ export const CustomizeImages = {
|
|
|
85
87
|
content: startingContent,
|
|
86
88
|
},
|
|
87
89
|
};
|
|
90
|
+
export const CustomizeStyles = {
|
|
91
|
+
render: (args) => (_jsx(Markdown, Object.assign({}, args, { customStyles: {
|
|
92
|
+
p: {
|
|
93
|
+
fontWeight: FONT_WEIGHT.BOLD,
|
|
94
|
+
},
|
|
95
|
+
h2: {
|
|
96
|
+
color: COLOR.SECONDARY,
|
|
97
|
+
},
|
|
98
|
+
} }))),
|
|
99
|
+
args: {
|
|
100
|
+
content: startingContent,
|
|
101
|
+
},
|
|
102
|
+
};
|
|
88
103
|
export const CustomHtmlSanitize = {
|
|
89
104
|
render: (args) => _jsx(Markdown, Object.assign({}, args)),
|
|
90
105
|
args: {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import { StyledElementProps } from '../../../theme';
|
|
2
|
+
import { StyledElementProps, StylesProp } from '../../../theme';
|
|
3
3
|
import sanitizeHtml from 'sanitize-html';
|
|
4
4
|
export declare const DEFAULT_ALLOWED_TAGS: string[];
|
|
5
5
|
export declare const DEFAULT_ALLOWED_ATTRIBUTES: {
|
|
@@ -17,6 +17,7 @@ type MarkdownProps = StyledElementProps<HTMLDivElement, {
|
|
|
17
17
|
allowedIframeDomains?: string[];
|
|
18
18
|
allowedAttributes?: sanitizeHtml.IOptions['allowedAttributes'];
|
|
19
19
|
};
|
|
20
|
+
customStyles?: Record<string, StylesProp>;
|
|
20
21
|
}>;
|
|
21
22
|
export declare const Markdown: React.FC<MarkdownProps>;
|
|
22
23
|
export {};
|
|
@@ -38,7 +38,7 @@ const dynamicTopMarginStyles = {
|
|
|
38
38
|
},
|
|
39
39
|
};
|
|
40
40
|
export const Markdown = (_a) => {
|
|
41
|
-
var { content, enableHtml, sanitizeHtmlOptions, imageStyles, headingLevelOffset = 1 } = _a, rest = __rest(_a, ["content", "enableHtml", "sanitizeHtmlOptions", "imageStyles", "headingLevelOffset"]);
|
|
41
|
+
var { content, enableHtml, sanitizeHtmlOptions, imageStyles, customStyles = {}, headingLevelOffset = 1 } = _a, rest = __rest(_a, ["content", "enableHtml", "sanitizeHtmlOptions", "imageStyles", "customStyles", "headingLevelOffset"]);
|
|
42
42
|
let sanitizedContent = content;
|
|
43
43
|
if (enableHtml) {
|
|
44
44
|
sanitizedContent = sanitizeHtml(content, {
|
|
@@ -49,22 +49,22 @@ export const Markdown = (_a) => {
|
|
|
49
49
|
});
|
|
50
50
|
}
|
|
51
51
|
return (_jsx("div", Object.assign({}, rest, { children: _jsx(ReactMarkdown, Object.assign({ rehypePlugins: enableHtml ? [rehypeRaw] : [], components: {
|
|
52
|
-
h1: (props) => (_jsx(Heading, Object.assign({ size: HEADING_SIZE.XL }, props, { level: props.level + headingLevelOffset, standalone: true, sx: dynamicTopMarginStyles }))),
|
|
53
|
-
h2: (props) => (_jsx(Heading, Object.assign({ size: HEADING_SIZE.LG }, props, { level: props.level + headingLevelOffset, standalone: true, sx: dynamicTopMarginStyles }))),
|
|
54
|
-
h3: (props) => (_jsx(Heading, Object.assign({ size: HEADING_SIZE.MD }, props, { level: props.level + headingLevelOffset, standalone: true, sx: dynamicTopMarginStyles }))),
|
|
55
|
-
h4: (props) => (_jsx(Heading, Object.assign({ size: HEADING_SIZE.SM }, props, { level: props.level + headingLevelOffset, standalone: true, sx: dynamicTopMarginStyles }))),
|
|
56
|
-
h5: (props) => (_jsx(Heading, Object.assign({ size: HEADING_SIZE.SM }, props, { standalone: true, level: props.level + headingLevelOffset, sx: dynamicTopMarginStyles }))),
|
|
57
|
-
h6: (props) => (_jsx(Heading, Object.assign({ size: HEADING_SIZE.SM }, props, { standalone: true, level: props.level + headingLevelOffset, sx: dynamicTopMarginStyles }))),
|
|
58
|
-
ol: (props) => _jsx(List, Object.assign({}, props, { ordered: true, sx: { mt: 4 } })),
|
|
59
|
-
ul: (props) => _jsx(List, Object.assign({}, props, { sx: { mt: 4 } })),
|
|
52
|
+
h1: (props) => (_jsx(Heading, Object.assign({ size: HEADING_SIZE.XL }, props, { level: props.level + headingLevelOffset, standalone: true, sx: Object.assign(Object.assign({}, dynamicTopMarginStyles), customStyles.h1) }))),
|
|
53
|
+
h2: (props) => (_jsx(Heading, Object.assign({ size: HEADING_SIZE.LG }, props, { level: props.level + headingLevelOffset, standalone: true, sx: Object.assign(Object.assign({}, dynamicTopMarginStyles), customStyles.h2) }))),
|
|
54
|
+
h3: (props) => (_jsx(Heading, Object.assign({ size: HEADING_SIZE.MD }, props, { level: props.level + headingLevelOffset, standalone: true, sx: Object.assign(Object.assign({}, dynamicTopMarginStyles), customStyles.h3) }))),
|
|
55
|
+
h4: (props) => (_jsx(Heading, Object.assign({ size: HEADING_SIZE.SM }, props, { level: props.level + headingLevelOffset, standalone: true, sx: Object.assign(Object.assign({}, dynamicTopMarginStyles), customStyles.h4) }))),
|
|
56
|
+
h5: (props) => (_jsx(Heading, Object.assign({ size: HEADING_SIZE.SM }, props, { standalone: true, level: props.level + headingLevelOffset, sx: Object.assign(Object.assign({}, dynamicTopMarginStyles), customStyles.h5) }))),
|
|
57
|
+
h6: (props) => (_jsx(Heading, Object.assign({ size: HEADING_SIZE.SM }, props, { standalone: true, level: props.level + headingLevelOffset, sx: Object.assign(Object.assign({}, dynamicTopMarginStyles), customStyles.h6) }))),
|
|
58
|
+
ol: (props) => (_jsx(List, Object.assign({}, props, { ordered: true, sx: Object.assign({ mt: 4 }, customStyles.ol) }))),
|
|
59
|
+
ul: (props) => (_jsx(List, Object.assign({}, props, { sx: Object.assign({ mt: 4 }, customStyles.ul) }))),
|
|
60
60
|
li: (_a) => {
|
|
61
61
|
var { index, ordered } = _a, props = __rest(_a, ["index", "ordered"]);
|
|
62
|
-
return (_jsx(ListItem, Object.assign({ index: index }, props)));
|
|
62
|
+
return (_jsx(ListItem, Object.assign({ index: index }, props, { sx: customStyles.li })));
|
|
63
63
|
},
|
|
64
|
-
p: (props) => (_jsx(Paragraph, Object.assign({}, props, { sx: Object.assign(Object.assign({}, dynamicTopMarginStyles), { fontSize: 'inherit' }) }))),
|
|
65
|
-
strong: (props) => _jsx(Bold, Object.assign({}, props)),
|
|
66
|
-
em: (props) => _jsx(Italic, Object.assign({}, props)),
|
|
64
|
+
p: (props) => (_jsx(Paragraph, Object.assign({}, props, { sx: Object.assign(Object.assign(Object.assign({}, dynamicTopMarginStyles), { fontSize: 'inherit' }), customStyles.p) }))),
|
|
65
|
+
strong: (props) => _jsx(Bold, Object.assign({}, props, { sx: customStyles.strong })),
|
|
66
|
+
em: (props) => _jsx(Italic, Object.assign({}, props, { sx: customStyles.em })),
|
|
67
67
|
img: (props) => _jsx("img", Object.assign({}, props, { style: imageStyles })),
|
|
68
|
-
blockquote: (props) => (_jsx(BlockQuote, Object.assign({}, props, { sx: Object.assign(Object.assign({}, dynamicTopMarginStyles), { my: 5 }) }))),
|
|
68
|
+
blockquote: (props) => (_jsx(BlockQuote, Object.assign({}, props, { sx: Object.assign(Object.assign(Object.assign({}, dynamicTopMarginStyles), { my: 5 }), customStyles.blockquote) }))),
|
|
69
69
|
} }, { children: sanitizedContent })) })));
|
|
70
70
|
};
|
package/dist/theme/typography.js
CHANGED
|
@@ -42,7 +42,7 @@ export var LINE_HEIGHT;
|
|
|
42
42
|
LINE_HEIGHT["CONDENSED"] = "condensed";
|
|
43
43
|
})(LINE_HEIGHT || (LINE_HEIGHT = {}));
|
|
44
44
|
export const fontSizeMap = {
|
|
45
|
-
[FONT_SIZE.XXS]: '0.
|
|
45
|
+
[FONT_SIZE.XXS]: '0.5rem',
|
|
46
46
|
[FONT_SIZE.XS]: '0.75rem',
|
|
47
47
|
[FONT_SIZE.SM]: '0.875rem',
|
|
48
48
|
[FONT_SIZE.MS]: '1rem',
|