@mailstep/design-system 0.4.1 → 0.4.2-beta.1
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/package.json +1 -1
- package/ui/Blocks/ImageList/components/ImageElement/index.js +1 -1
- package/ui/Blocks/ImageList/stories/ImageList.stories.js +1 -0
- package/ui/Blocks/LightBox/LightBox.js +1 -1
- package/ui/Blocks/LightBox/styles.js +2 -2
- package/ui/Blocks/Modal/Modal.js +2 -2
- package/ui/Blocks/Modal/stories/Modal.stories.d.ts +2 -1
- package/ui/Blocks/Modal/stories/Modal.stories.js +10 -3
- package/ui/Blocks/Modal/styles.d.ts +2 -1
- package/ui/Blocks/Modal/styles.js +10 -7
- package/ui/Blocks/Modal/types.d.ts +2 -1
- package/ui/ThemeProvider/themes/index.d.ts +1 -5
- package/ui/ThemeProvider/themes/mailwise.d.ts +1 -5
- package/ui/ThemeProvider/themes/mailwise.js +5 -9
- package/ui/index.es.js +611 -608
- package/ui/index.umd.js +184 -179
package/package.json
CHANGED
|
@@ -7,5 +7,5 @@ export var ImageElement = function (_a) {
|
|
|
7
7
|
var label = _a.label, onImageRemove = _a.onImageRemove, isDisabled = _a.isDisabled, onOpenLightBox = _a.onOpenLightBox, imageUrl = _a.imageUrl;
|
|
8
8
|
if (!imageUrl)
|
|
9
9
|
return null;
|
|
10
|
-
return (_jsxs(x.div, { position: "relative", pr: "15px", pt: "15px", w: "100px", children: [_jsx(Image, { src: imageUrl, alt: "", width: "85px", height: "85px", onClick: onOpenLightBox }), onImageRemove && _jsx(CloseButton, { onImageRemove: onImageRemove, isDisabled: isDisabled }), _jsx(ImageTag, { label: label })] }));
|
|
10
|
+
return (_jsxs(x.div, { position: "relative", pr: "15px", pt: "15px", w: "100px", h: "100px", children: [_jsx(Image, { src: imageUrl, alt: "", width: "85px", height: "85px", onClick: onOpenLightBox }), onImageRemove && _jsx(CloseButton, { onImageRemove: onImageRemove, isDisabled: isDisabled }), _jsx(ImageTag, { label: label })] }));
|
|
11
11
|
};
|
|
@@ -7,7 +7,7 @@ export var LightBox = function (_a) {
|
|
|
7
7
|
var isLightBoxOpen = _a.isLightBoxOpen, onCloseLightBox = _a.onCloseLightBox, lightBoxAction = _a.lightBoxAction, lightBoxActionTitle = _a.lightBoxActionTitle, images = _a.images, _b = _a.initialSlide, initialSlide = _b === void 0 ? 0 : _b;
|
|
8
8
|
if (!(images === null || images === void 0 ? void 0 : images.length))
|
|
9
9
|
return null;
|
|
10
|
-
return (_jsx(Modal, { isShown: isLightBoxOpen, onClose: onCloseLightBox, variant: "mobileFullscreen", children: _jsx(Swiper, { initialSlide: initialSlide, slidesPerView: 1, autoHeight: true, children: images.map(function (item) {
|
|
10
|
+
return (_jsx(Modal, { isShown: isLightBoxOpen, onClose: onCloseLightBox, variant: "mobileFullscreen", top: "10px", children: _jsx(Swiper, { initialSlide: initialSlide, slidesPerView: 1, autoHeight: true, children: images.map(function (item) {
|
|
11
11
|
var _a;
|
|
12
12
|
return (_jsx(SwiperSlide, { children: _jsxs(Container, { children: [_jsx(Image, { src: (_a = item.originalUrl) !== null && _a !== void 0 ? _a : item.url, loading: "lazy", alt: "" }), (item.date || item.description) && (_jsxs(Description, { children: [item.date, " ", item.description] })), !!item.withLightBoxAction && lightBoxAction && lightBoxActionTitle && (_jsx(ButtonContainer, { children: _jsx(Button, { onClick: lightBoxAction(item.id), appearance: "primaryLight", children: lightBoxActionTitle }) }))] }) }, item.id));
|
|
13
13
|
}) }) }));
|
|
@@ -3,8 +3,8 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
|
|
|
3
3
|
return cooked;
|
|
4
4
|
};
|
|
5
5
|
import styled from '@xstyled/styled-components';
|
|
6
|
-
export var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n position: relative;\n"], ["\n width: 100%;\n height: 100%;\n position: relative;\n"])));
|
|
6
|
+
export var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n position: relative;\n display: flex;\n"], ["\n width: 100%;\n height: 100%;\n position: relative;\n display: flex;\n"])));
|
|
7
7
|
export var Image = styled.img(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n"], ["\n width: 100%;\n height: 100%;\n"])));
|
|
8
8
|
export var ButtonContainer = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n width: 100%;\n display: flex;\n justify-content: center;\n position: absolute;\n bottom: -60px;\n"], ["\n width: 100%;\n display: flex;\n justify-content: center;\n position: absolute;\n bottom: -60px;\n"])));
|
|
9
|
-
export var Description = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n padding: 10px;\n"], ["\n padding: 10px;\n"])));
|
|
9
|
+
export var Description = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n padding: 10px;\n position: absolute;\n width: 100%;\n bottom: 0px;\n background: rgba(255, 255, 255, 0.8);\n"], ["\n padding: 10px;\n position: absolute;\n width: 100%;\n bottom: 0px;\n background: rgba(255, 255, 255, 0.8);\n"])));
|
|
10
10
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
package/ui/Blocks/Modal/Modal.js
CHANGED
|
@@ -9,7 +9,7 @@ import { Portal } from '../../Elements/Portal';
|
|
|
9
9
|
import { useClickOutside } from './hooks/useClickOutside';
|
|
10
10
|
import { widthMap } from './utils';
|
|
11
11
|
export var Modal = memo(function (_a) {
|
|
12
|
-
var children = _a.children, _b = _a.isShown, isShown = _b === void 0 ? true : _b, onCancel = _a.onCancel, title = _a.title, titleIcon = _a.titleIcon, onConfirm = _a.onConfirm, confirmLabel = _a.confirmLabel, cancelLabel = _a.cancelLabel, isLoading = _a.isLoading, isConfirmDisabled = _a.isConfirmDisabled, _c = _a.width, width = _c === void 0 ? 'narrow' : _c, onClose = _a.onClose, _d = _a.hasFooter, hasFooter = _d === void 0 ? true : _d, _e = _a.hasHeader, hasHeader = _e === void 0 ? true : _e,
|
|
12
|
+
var children = _a.children, _b = _a.isShown, isShown = _b === void 0 ? true : _b, onCancel = _a.onCancel, title = _a.title, titleIcon = _a.titleIcon, onConfirm = _a.onConfirm, confirmLabel = _a.confirmLabel, cancelLabel = _a.cancelLabel, isLoading = _a.isLoading, isConfirmDisabled = _a.isConfirmDisabled, _c = _a.width, width = _c === void 0 ? 'narrow' : _c, onClose = _a.onClose, _d = _a.hasFooter, hasFooter = _d === void 0 ? true : _d, _e = _a.hasHeader, hasHeader = _e === void 0 ? true : _e, background = _a.background, _f = _a.ignoreClickOutside, ignoreClickOutside = _f === void 0 ? false : _f, _g = _a.closeEverywhere, closeEverywhere = _g === void 0 ? false : _g, _h = _a.withCloseIcon, withCloseIcon = _h === void 0 ? true : _h, overlayColor = _a.overlayColor, minWidth = _a.minWidth, minHeight = _a.minHeight, maxWidth = _a.maxWidth, maxHeight = _a.maxHeight, _j = _a.variant, variant = _j === void 0 ? 'compact' : _j, top = _a.top;
|
|
13
13
|
var closeDialog = useCallback(function () {
|
|
14
14
|
if (onClose) {
|
|
15
15
|
onClose();
|
|
@@ -32,5 +32,5 @@ export var Modal = memo(function (_a) {
|
|
|
32
32
|
if (!isShown) {
|
|
33
33
|
return null;
|
|
34
34
|
}
|
|
35
|
-
return (_jsx(Portal, { children: _jsx(DialogOverlay, { backgroundColor: overlayColor, children: _jsxs(DialogWindow, { ref: dialogRef, style: dialogStyle, "$
|
|
35
|
+
return (_jsx(Portal, { children: _jsx(DialogOverlay, { backgroundColor: overlayColor, children: _jsxs(DialogWindow, { ref: dialogRef, style: dialogStyle, "$backgroundColor": background, top: top, "data-cy": "dialogWindow", onClick: closeEverywhere ? closeDialog : undefined, "$minWidth": minWidth, "$minHeight": minHeight, "$maxWidth": maxWidth, "$maxHeight": maxHeight, variant: variant, children: [title && hasHeader && (_jsx(HeaderContainer, { variant: variant, children: _jsxs(TitleContainer, { children: [titleIcon && (_jsx(x.div, { as: "span", className: "icon", children: typeof titleIcon === 'string' ? _jsx(Icon, { icon: titleIcon, fill: "blue2" }) : titleIcon })), variant == 'default' ? (_jsx(H2, { mt: 0, mb: 0, variant: "bold", children: title })) : (_jsx(H5, { mt: 0, mb: 0, variant: "bold", children: title }))] }) })), withCloseIcon && (_jsx(CloseButton, { onClick: closeDialog, "data-cy": "dialogCloseBtn", children: _jsx(Cancel, { width: "11px", height: "11px" }) })), _jsx(ContentContainer, { variant: variant, children: children }), hasFooter && (onCancel || onConfirm) && (_jsxs(ButtonsContainer, { children: [onCancel && (_jsx(Button, { type: "button", onClick: onCancel, isLoading: isLoading, "data-cy": "cancelBtn", appearance: "primaryLight", children: cancelLabel ? cancelLabel : 'Cancel' })), onConfirm && (_jsx(Button, { type: "button", onClick: onDialogConfirmClick, isLoading: isLoading, disabled: isConfirmDisabled, "data-cy": "submitBtn", children: confirmLabel ? confirmLabel : 'Submit' }))] }))] }) }) }));
|
|
36
36
|
});
|
|
@@ -11,11 +11,12 @@ type Story = StoryObj<typeof meta>;
|
|
|
11
11
|
export declare const Default: Story;
|
|
12
12
|
export declare const Compact: Story;
|
|
13
13
|
export declare const MobileFullscreen: Story;
|
|
14
|
+
export declare const ModalTopPosition: Story;
|
|
14
15
|
export declare const ModalWithCloseAndConfirmBtns: Story;
|
|
15
16
|
export declare const ModalWithoutCloseButton: Story;
|
|
16
17
|
export declare const ModalWithIconInTitle: Story;
|
|
17
18
|
export declare const ModalLoading: Story;
|
|
18
|
-
export declare const
|
|
19
|
+
export declare const ModalWithCustomBackground: Story;
|
|
19
20
|
export declare const ModalWithoutHeader: Story;
|
|
20
21
|
export declare const ModalWithoutFooter: Story;
|
|
21
22
|
export declare const ModalWithoutHeaderAndFooter: Story;
|
|
@@ -27,6 +27,14 @@ export var MobileFullscreen = {
|
|
|
27
27
|
variant: 'mobileFullscreen',
|
|
28
28
|
},
|
|
29
29
|
};
|
|
30
|
+
export var ModalTopPosition = {
|
|
31
|
+
args: {
|
|
32
|
+
title: 'Modal default version',
|
|
33
|
+
children: _jsx(_Fragment, { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed condimentum id eros ac consequat." }),
|
|
34
|
+
variant: 'default',
|
|
35
|
+
top: '0'
|
|
36
|
+
},
|
|
37
|
+
};
|
|
30
38
|
export var ModalWithCloseAndConfirmBtns = {
|
|
31
39
|
args: {
|
|
32
40
|
children: _jsx(_Fragment, { children: "Modal with narrow width" }),
|
|
@@ -60,13 +68,12 @@ export var ModalLoading = {
|
|
|
60
68
|
isLoading: true,
|
|
61
69
|
},
|
|
62
70
|
};
|
|
63
|
-
export var
|
|
71
|
+
export var ModalWithCustomBackground = {
|
|
64
72
|
args: {
|
|
65
73
|
children: _jsx(_Fragment, { children: "Modal with white background" }),
|
|
66
74
|
title: 'Modal title',
|
|
67
75
|
width: 'narrow',
|
|
68
|
-
|
|
69
|
-
whiteBg: true,
|
|
76
|
+
background: 'blue',
|
|
70
77
|
},
|
|
71
78
|
};
|
|
72
79
|
export var ModalWithoutHeader = {
|
|
@@ -3,12 +3,13 @@ export declare const DialogOverlay: import("styled-components").StyledComponent<
|
|
|
3
3
|
backgroundColor?: string | undefined;
|
|
4
4
|
}, never>;
|
|
5
5
|
export declare const DialogWindow: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
|
|
6
|
-
$
|
|
6
|
+
$backgroundColor?: string | undefined;
|
|
7
7
|
$minWidth?: string | undefined;
|
|
8
8
|
$minHeight?: string | undefined;
|
|
9
9
|
$maxWidth?: string | undefined;
|
|
10
10
|
$maxHeight?: string | undefined;
|
|
11
11
|
variant: Variant;
|
|
12
|
+
top?: string | undefined;
|
|
12
13
|
}, never>;
|
|
13
14
|
export declare const HeaderContainer: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
|
|
14
15
|
variant: Variant;
|
|
@@ -29,16 +29,16 @@ var variantStyles = function (component, variant) {
|
|
|
29
29
|
compact: css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n padding: 20px 20px 15px;\n "], ["\n padding: 20px 20px 15px;\n "]))),
|
|
30
30
|
mobileFullscreen: css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n padding: 0;\n "], ["\n padding: 0;\n "]))),
|
|
31
31
|
},
|
|
32
|
-
title: {}
|
|
32
|
+
title: {},
|
|
33
33
|
}[component][variant]);
|
|
34
34
|
};
|
|
35
|
-
export var DialogOverlay = styled.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n position: fixed;\n z-index:
|
|
35
|
+
export var DialogOverlay = styled.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n position: fixed;\n z-index: 9;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n overflow: auto;\n background-color: ", ";\n text-align: center;\n\n @media print {\n position: absolute !important;\n left: 0 !important;\n top: 0 !important;\n height: auto !important;\n visibility: hidden;\n }\n\n @media (max-width: 576px) {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 16px 0;\n }\n"], ["\n position: fixed;\n z-index: 9;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n overflow: auto;\n background-color: ", ";\n text-align: center;\n\n @media print {\n position: absolute !important;\n left: 0 !important;\n top: 0 !important;\n height: auto !important;\n visibility: hidden;\n }\n\n @media (max-width: 576px) {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 16px 0;\n }\n"])), function (_a) {
|
|
36
36
|
var _b = _a.backgroundColor, backgroundColor = _b === void 0 ? 'blue2' : _b;
|
|
37
37
|
return createRgba(backgroundColor, 0.6);
|
|
38
38
|
});
|
|
39
|
-
export var DialogWindow = styled.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n background-color: ", ";\n margin: auto;\n box-shadow: dialogShadow;\n min-width: ", ";\n min-height: ", ";\n max-height: ", ";\n display: inline-block;\n position: relative;\n text-align: left;\n\n ", "\n ", ";\n\n @media print {\n background-color: #fff;\n margin: 0;\n visibility: visible;\n overflow: visible;\n box-shadow: none;\n max-width: 100%;\n }\n\n @media (min-width: 576px) {\n margin:
|
|
40
|
-
var $
|
|
41
|
-
return
|
|
39
|
+
export var DialogWindow = styled.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n background-color: ", ";\n margin: auto;\n box-shadow: dialogShadow;\n min-width: ", ";\n min-height: ", ";\n max-height: ", ";\n display: inline-block;\n position: relative;\n text-align: left;\n\n ", "\n ", ";\n\n @media print {\n background-color: #fff;\n margin: 0;\n visibility: visible;\n overflow: visible;\n box-shadow: none;\n max-width: 100%;\n }\n\n @media (min-width: 576px) {\n margin: ", " auto 0 auto;\n }\n"], ["\n background-color: ", ";\n margin: auto;\n box-shadow: dialogShadow;\n min-width: ", ";\n min-height: ", ";\n max-height: ", ";\n display: inline-block;\n position: relative;\n text-align: left;\n\n ", "\n ", ";\n\n @media print {\n background-color: #fff;\n margin: 0;\n visibility: visible;\n overflow: visible;\n box-shadow: none;\n max-width: 100%;\n }\n\n @media (min-width: 576px) {\n margin: ", " auto 0 auto;\n }\n"])), function (_a) {
|
|
40
|
+
var $backgroundColor = _a.$backgroundColor;
|
|
41
|
+
return $backgroundColor || '#fefefe';
|
|
42
42
|
}, function (_a) {
|
|
43
43
|
var $minWidth = _a.$minWidth;
|
|
44
44
|
return $minWidth || '10%';
|
|
@@ -54,6 +54,9 @@ export var DialogWindow = styled.div(templateObject_11 || (templateObject_11 = _
|
|
|
54
54
|
}, function (_a) {
|
|
55
55
|
var $maxWidth = _a.$maxWidth;
|
|
56
56
|
return $maxWidth && "max-width: ".concat($maxWidth);
|
|
57
|
+
}, function (_a) {
|
|
58
|
+
var _b = _a.top, top = _b === void 0 ? '100px' : _b;
|
|
59
|
+
return top;
|
|
57
60
|
});
|
|
58
61
|
export var HeaderContainer = styled.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n ", "\n"], ["\n display: flex;\n justify-content: space-between;\n ", "\n"])), function (_a) {
|
|
59
62
|
var variant = _a.variant;
|
|
@@ -63,7 +66,7 @@ export var ContentContainer = styled.div(templateObject_13 || (templateObject_13
|
|
|
63
66
|
var variant = _a.variant;
|
|
64
67
|
return variantStyles(Component.ContentContainer, variant);
|
|
65
68
|
});
|
|
66
|
-
export var TitleContainer = styled.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n display: flex;\n flex-flow: row;\n align-items: center;\n color: typoPrimary;\n padding-right: 34px;\n
|
|
69
|
+
export var TitleContainer = styled.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n display: flex;\n flex-flow: row;\n align-items: center;\n color: typoPrimary;\n padding-right: 34px;\n\n > div:first-of-type {\n margin-right: 0.5em;\n display: block;\n }\n\n .icon {\n font-size: 24px;\n margin-right: 15px;\n display: flex;\n\n @media (max-width: 576px) {\n font-size: 18px;\n margin-right: 12px;\n }\n }\n"], ["\n display: flex;\n flex-flow: row;\n align-items: center;\n color: typoPrimary;\n padding-right: 34px;\n\n > div:first-of-type {\n margin-right: 0.5em;\n display: block;\n }\n\n .icon {\n font-size: 24px;\n margin-right: 15px;\n display: flex;\n\n @media (max-width: 576px) {\n font-size: 18px;\n margin-right: 12px;\n }\n }\n"])));
|
|
67
70
|
export var ButtonsContainer = styled.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n padding: 1.5rem;\n text-align: right;\n > * {\n margin: 0 0.5em;\n }\n\n @media (max-width: 576px) {\n display: flex;\n justify-content: space-around;\n padding: 32px 18px 18px;\n\n > * {\n margin: 0;\n }\n }\n"], ["\n padding: 1.5rem;\n text-align: right;\n > * {\n margin: 0 0.5em;\n }\n\n @media (max-width: 576px) {\n display: flex;\n justify-content: space-around;\n padding: 32px 18px 18px;\n\n > * {\n margin: 0;\n }\n }\n"])));
|
|
68
|
-
export var CloseButton = styled.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n position: absolute;\n z-index:2;\n background-color: bgLightGray1;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n top: 11px;\n right: 20px;\n width: 34px;\n height: 34px;\n"], ["\n position: absolute;\n z-index:2;\n background-color: bgLightGray1;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n top: 11px;\n right: 20px;\n width: 34px;\n height: 34px;\n"])));
|
|
71
|
+
export var CloseButton = styled.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n position: absolute;\n z-index: 2;\n background-color: bgLightGray1;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n top: 11px;\n right: 20px;\n width: 34px;\n height: 34px;\n"], ["\n position: absolute;\n z-index: 2;\n background-color: bgLightGray1;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n top: 11px;\n right: 20px;\n width: 34px;\n height: 34px;\n"])));
|
|
69
72
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16;
|
|
@@ -16,7 +16,7 @@ export interface ModalProps {
|
|
|
16
16
|
hasFooter?: boolean;
|
|
17
17
|
hasHeader?: boolean;
|
|
18
18
|
width?: Width;
|
|
19
|
-
|
|
19
|
+
background?: string;
|
|
20
20
|
ignoreClickOutside?: boolean;
|
|
21
21
|
closeEverywhere?: boolean;
|
|
22
22
|
withCloseIcon?: boolean;
|
|
@@ -26,6 +26,7 @@ export interface ModalProps {
|
|
|
26
26
|
maxWidth?: string;
|
|
27
27
|
maxHeight?: string;
|
|
28
28
|
variant?: Variant;
|
|
29
|
+
top?: string;
|
|
29
30
|
}
|
|
30
31
|
export type ModalData = Record<string, any>;
|
|
31
32
|
export type ControlProps<T = ModalData> = {
|
|
@@ -280,15 +280,11 @@ declare const themes: {
|
|
|
280
280
|
thick: string;
|
|
281
281
|
};
|
|
282
282
|
radii: {
|
|
283
|
-
none: string;
|
|
284
283
|
sm: string;
|
|
285
|
-
default: string;
|
|
286
284
|
md: string;
|
|
285
|
+
ml: string;
|
|
287
286
|
lg: string;
|
|
288
287
|
xl: string;
|
|
289
|
-
'2xl': string;
|
|
290
|
-
'3xl': string;
|
|
291
|
-
full: string;
|
|
292
288
|
};
|
|
293
289
|
shadows: {
|
|
294
290
|
boxShadow: string;
|
|
@@ -136,15 +136,11 @@ declare const defaultTheme: {
|
|
|
136
136
|
thick: string;
|
|
137
137
|
};
|
|
138
138
|
radii: {
|
|
139
|
-
none: string;
|
|
140
139
|
sm: string;
|
|
141
|
-
default: string;
|
|
142
140
|
md: string;
|
|
141
|
+
ml: string;
|
|
143
142
|
lg: string;
|
|
144
143
|
xl: string;
|
|
145
|
-
'2xl': string;
|
|
146
|
-
'3xl': string;
|
|
147
|
-
full: string;
|
|
148
144
|
};
|
|
149
145
|
shadows: {
|
|
150
146
|
boxShadow: string;
|
|
@@ -140,15 +140,11 @@ var defaultTheme = {
|
|
|
140
140
|
thick: '10px solid',
|
|
141
141
|
},
|
|
142
142
|
radii: {
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
xl: '20px',
|
|
149
|
-
'2xl': '20px',
|
|
150
|
-
'3xl': '20px',
|
|
151
|
-
full: '20px',
|
|
143
|
+
sm: '2px',
|
|
144
|
+
md: '4px',
|
|
145
|
+
ml: '6px',
|
|
146
|
+
lg: '8px',
|
|
147
|
+
xl: '16px',
|
|
152
148
|
},
|
|
153
149
|
shadows: {
|
|
154
150
|
boxShadow: '0px 5px 60px rgba(0, 0, 0, 0.1)',
|