@laerdal/life-react-components 5.0.8-dev.1 → 5.0.8
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/Chips/ChoiceChips.cjs +0 -1
- package/dist/Chips/ChoiceChips.cjs.map +1 -1
- package/dist/Chips/ChoiceChips.js +0 -1
- package/dist/Chips/ChoiceChips.js.map +1 -1
- package/dist/ChipsInput/ChipDropdownInput.cjs +1 -1
- package/dist/ChipsInput/ChipDropdownInput.cjs.map +1 -1
- package/dist/ChipsInput/ChipDropdownInput.js +1 -1
- package/dist/ChipsInput/ChipDropdownInput.js.map +1 -1
- package/dist/Dropdown/BasicDropdown.cjs +0 -2
- package/dist/Dropdown/BasicDropdown.cjs.map +1 -1
- package/dist/Dropdown/BasicDropdown.js +0 -2
- package/dist/Dropdown/BasicDropdown.js.map +1 -1
- package/dist/Dropdown/DropdownButton.cjs +0 -2
- package/dist/Dropdown/DropdownButton.cjs.map +1 -1
- package/dist/Dropdown/DropdownButton.js +0 -2
- package/dist/Dropdown/DropdownButton.js.map +1 -1
- package/dist/Dropdown/DropdownContent.cjs +1 -1
- package/dist/Dropdown/DropdownContent.cjs.map +1 -1
- package/dist/Dropdown/DropdownContent.js +1 -1
- package/dist/Dropdown/DropdownContent.js.map +1 -1
- package/dist/Dropdown/DropdownFilter.cjs +0 -2
- package/dist/Dropdown/DropdownFilter.cjs.map +1 -1
- package/dist/Dropdown/DropdownFilter.js +0 -2
- package/dist/Dropdown/DropdownFilter.js.map +1 -1
- package/dist/GlobalNavigationBar/desktop/ExtendedMainMenu.cjs +1 -0
- package/dist/GlobalNavigationBar/desktop/ExtendedMainMenu.cjs.map +1 -1
- package/dist/GlobalNavigationBar/desktop/ExtendedMainMenu.js +1 -0
- package/dist/GlobalNavigationBar/desktop/ExtendedMainMenu.js.map +1 -1
- package/dist/GlobalNavigationBar/desktop/SubMenu.cjs +1 -0
- package/dist/GlobalNavigationBar/desktop/SubMenu.cjs.map +1 -1
- package/dist/GlobalNavigationBar/desktop/SubMenu.js +1 -0
- package/dist/GlobalNavigationBar/desktop/SubMenu.js.map +1 -1
- package/dist/InputFields/QuickSearch.cjs +1 -1
- package/dist/InputFields/QuickSearch.cjs.map +1 -1
- package/dist/InputFields/QuickSearch.js +1 -1
- package/dist/InputFields/QuickSearch.js.map +1 -1
- package/dist/Modals/ModalContainer.cjs +142 -106
- package/dist/Modals/ModalContainer.cjs.map +1 -1
- package/dist/Modals/ModalContainer.d.ts +17 -1
- package/dist/Modals/ModalContainer.js +142 -106
- package/dist/Modals/ModalContainer.js.map +1 -1
- package/dist/styles/typography.cjs +35 -59
- package/dist/styles/typography.cjs.map +1 -1
- package/dist/styles/typography.d.ts +1 -1
- package/dist/styles/typography.js +35 -59
- package/dist/styles/typography.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,8 +1,14 @@
|
|
|
1
|
+
import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
|
|
2
|
+
import _createClass from "@babel/runtime/helpers/esm/createClass";
|
|
3
|
+
import _inherits from "@babel/runtime/helpers/esm/inherits";
|
|
4
|
+
import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
|
|
5
|
+
import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
|
|
1
6
|
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
2
|
-
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
|
3
7
|
import _pt from "prop-types";
|
|
4
8
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
5
9
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
10
|
+
function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = _getPrototypeOf(t); if (r) { var s = _getPrototypeOf(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return _possibleConstructorReturn(this, e); }; }
|
|
11
|
+
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
|
|
6
12
|
import * as React from 'react';
|
|
7
13
|
import ReactModal from 'react-modal';
|
|
8
14
|
import { BOXSHADOWS } from '../styles';
|
|
@@ -27,115 +33,144 @@ var ModalContainerStyles = {
|
|
|
27
33
|
|
|
28
34
|
//override modal classes to define the animations
|
|
29
35
|
var modalTransitions = "\n\n@keyframes modalOpenAnimation {\n from{\n transform: scale(1.1, 1.1);\n }\n to {\n transform: scale(1, 1);\n }\n}\n\n.ReactModal__Overlay {\n opacity: 0;\n z-index: ".concat(Z_INDEXES.backdrop, ";\n display:flex;\n justify-content: center;\n align-items: center;\n}\n\n.ReactModal__Overlay--after-open {\n opacity: 1;\n transition: opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\n}\n\n.ReactModal__Content{\n z-index: ").concat(Z_INDEXES.modal, ";\n opacity:0;\n transition: opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\n}\n\n.ReactModal__Content--after-open{\n opacity: 1;\n animation: modalOpenAnimation 150ms ease-in-out;\n}\n\n.ReactModal__Overlay--before-close {\n opacity: 0;\n transition: opacity 120ms linear;\n}\n\n.ReactModal__Content--before-close{\n opacity: 0;\n transform: scale(1.1, 1.1);\n transition: transform 120ms ease-in-out, opacity 120ms cubic-bezier(0.55, 0.05, 0.67, 0.19);\n}\n");
|
|
30
|
-
var
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
36
|
+
var ModalContainer = /*#__PURE__*/function (_React$Component) {
|
|
37
|
+
_inherits(ModalContainer, _React$Component);
|
|
38
|
+
var _super = _createSuper(ModalContainer);
|
|
39
|
+
function ModalContainer() {
|
|
40
|
+
_classCallCheck(this, ModalContainer);
|
|
41
|
+
return _super.apply(this, arguments);
|
|
42
|
+
}
|
|
43
|
+
_createClass(ModalContainer, [{
|
|
44
|
+
key: "componentDidMount",
|
|
45
|
+
value: function componentDidMount() {
|
|
46
|
+
if (ReactModal.defaultStyles.overlay) {
|
|
47
|
+
ReactModal.defaultStyles.overlay.backgroundColor = 'rgba(0,0,0,0.5)';
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
//append style node to override modal transition classes
|
|
51
|
+
if (!document.querySelector('[modal-custom-styling="active"]')) {
|
|
52
|
+
var head = document.head || document.getElementsByTagName('head')[0];
|
|
53
|
+
var style = document.createElement('style');
|
|
54
|
+
style.setAttribute('modal-custom-styling', 'active');
|
|
55
|
+
head.appendChild(style);
|
|
56
|
+
style.appendChild(document.createTextNode(modalTransitions));
|
|
57
|
+
}
|
|
58
|
+
if (this.props.showModal) {
|
|
59
|
+
this.preventScroll(window.scrollY);
|
|
60
|
+
}
|
|
51
61
|
}
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
//@ts-ignore
|
|
59
|
-
document.body.style.left = null;
|
|
60
|
-
//@ts-ignore
|
|
61
|
-
document.body.style.top = null;
|
|
62
|
-
//@ts-ignore
|
|
63
|
-
document.body.style.right = null;
|
|
64
|
-
scroll && window.scrollTo(0, scroll);
|
|
65
|
-
setScroll(0);
|
|
62
|
+
}, {
|
|
63
|
+
key: "getSnapshotBeforeUpdate",
|
|
64
|
+
value: function getSnapshotBeforeUpdate(prevProps, prevState) {
|
|
65
|
+
return {
|
|
66
|
+
scroll: window.scrollY
|
|
67
|
+
};
|
|
66
68
|
}
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
}, [props.showModal]);
|
|
77
|
-
React.useEffect(function () {
|
|
78
|
-
if (ReactModal.defaultStyles.overlay) {
|
|
79
|
-
ReactModal.defaultStyles.overlay.backgroundColor = 'rgba(0,0,0,0.5)';
|
|
69
|
+
}, {
|
|
70
|
+
key: "componentDidUpdate",
|
|
71
|
+
value: function componentDidUpdate(prevProps, prevState, snapshot) {
|
|
72
|
+
if (this.props.showModal && !prevProps.showModal) {
|
|
73
|
+
this.preventScroll(snapshot.scroll);
|
|
74
|
+
}
|
|
75
|
+
if (!this.props.showModal && prevProps.showModal) {
|
|
76
|
+
this.resetScroll();
|
|
77
|
+
}
|
|
80
78
|
}
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
head.appendChild(style);
|
|
88
|
-
style.appendChild(document.createTextNode(modalTransitions));
|
|
79
|
+
}, {
|
|
80
|
+
key: "componentWillUnmount",
|
|
81
|
+
value: function componentWillUnmount() {
|
|
82
|
+
if (this.props.showModal) {
|
|
83
|
+
this.resetScroll();
|
|
84
|
+
}
|
|
89
85
|
}
|
|
90
|
-
},
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
86
|
+
}, {
|
|
87
|
+
key: "render",
|
|
88
|
+
value: function render() {
|
|
89
|
+
var _this$props = this.props,
|
|
90
|
+
id = _this$props.id,
|
|
91
|
+
showModal = _this$props.showModal,
|
|
92
|
+
closeModal = _this$props.closeModal,
|
|
93
|
+
children = _this$props.children,
|
|
94
|
+
_this$props$height = _this$props.height,
|
|
95
|
+
height = _this$props$height === void 0 ? 'auto' : _this$props$height,
|
|
96
|
+
_this$props$width = _this$props.width,
|
|
97
|
+
width = _this$props$width === void 0 ? 'auto' : _this$props$width,
|
|
98
|
+
_this$props$overflow = _this$props.overflow,
|
|
99
|
+
overflow = _this$props$overflow === void 0 ? 'visible' : _this$props$overflow,
|
|
100
|
+
padding = _this$props.padding,
|
|
101
|
+
_this$props$minWidth = _this$props.minWidth,
|
|
102
|
+
minWidth = _this$props$minWidth === void 0 ? '' : _this$props$minWidth,
|
|
103
|
+
_this$props$maxWidth = _this$props.maxWidth,
|
|
104
|
+
maxWidth = _this$props$maxWidth === void 0 ? '' : _this$props$maxWidth,
|
|
105
|
+
_this$props$zIndex = _this$props.zIndex,
|
|
106
|
+
zIndex = _this$props$zIndex === void 0 ? parseInt(Z_INDEXES.modal) : _this$props$zIndex,
|
|
107
|
+
_this$props$shouldClo = _this$props.shouldCloseOnOverlayClick,
|
|
108
|
+
shouldCloseOnOverlayClick = _this$props$shouldClo === void 0 ? true : _this$props$shouldClo;
|
|
110
109
|
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
}
|
|
138
|
-
|
|
110
|
+
// should be at least z-index of modal and below z-index of toast
|
|
111
|
+
var zIndexValue = Math.min(Math.max(zIndex, +Z_INDEXES.modal), +Z_INDEXES.toast - 1);
|
|
112
|
+
var stylesConfiguration = Object.assign(_objectSpread({}, ModalContainerStyles.content), {
|
|
113
|
+
height: height,
|
|
114
|
+
width: width,
|
|
115
|
+
padding: padding,
|
|
116
|
+
overflow: overflow,
|
|
117
|
+
minWidth: minWidth,
|
|
118
|
+
maxWidth: maxWidth,
|
|
119
|
+
zIndex: zIndexValue
|
|
120
|
+
});
|
|
121
|
+
var styles = {
|
|
122
|
+
content: stylesConfiguration
|
|
123
|
+
};
|
|
124
|
+
ReactModal.setAppElement('body');
|
|
125
|
+
return /*#__PURE__*/_jsx(ReactModal, {
|
|
126
|
+
id: id,
|
|
127
|
+
isOpen: showModal,
|
|
128
|
+
closeTimeoutMS: 120,
|
|
129
|
+
onRequestClose: function onRequestClose() {
|
|
130
|
+
return closeModal();
|
|
131
|
+
},
|
|
132
|
+
shouldCloseOnOverlayClick: shouldCloseOnOverlayClick,
|
|
133
|
+
style: styles,
|
|
134
|
+
children: children
|
|
135
|
+
});
|
|
136
|
+
}
|
|
137
|
+
}, {
|
|
138
|
+
key: "preventScroll",
|
|
139
|
+
value: function preventScroll(offset) {
|
|
140
|
+
if (!ModalContainer.openInstances) {
|
|
141
|
+
this.setState({
|
|
142
|
+
scroll: offset
|
|
143
|
+
});
|
|
144
|
+
document.body.style.position = 'fixed';
|
|
145
|
+
document.body.style.left = "0px";
|
|
146
|
+
document.body.style.right = "0px";
|
|
147
|
+
document.body.style.top = "-".concat(offset, "px");
|
|
148
|
+
}
|
|
149
|
+
ModalContainer.openInstances++;
|
|
150
|
+
}
|
|
151
|
+
}, {
|
|
152
|
+
key: "resetScroll",
|
|
153
|
+
value: function resetScroll() {
|
|
154
|
+
ModalContainer.openInstances--;
|
|
155
|
+
if (!ModalContainer.openInstances) {
|
|
156
|
+
//@ts-ignore
|
|
157
|
+
document.body.style.position = null;
|
|
158
|
+
//@ts-ignore
|
|
159
|
+
document.body.style.left = null;
|
|
160
|
+
//@ts-ignore
|
|
161
|
+
document.body.style.top = null;
|
|
162
|
+
//@ts-ignore
|
|
163
|
+
document.body.style.right = null;
|
|
164
|
+
this.state.scroll && window.scrollTo(0, this.state.scroll);
|
|
165
|
+
this.setState({
|
|
166
|
+
scroll: 0
|
|
167
|
+
});
|
|
168
|
+
}
|
|
169
|
+
}
|
|
170
|
+
}]);
|
|
171
|
+
return ModalContainer;
|
|
172
|
+
}(React.Component);
|
|
173
|
+
_defineProperty(ModalContainer, "propTypes", {
|
|
139
174
|
id: _pt.string,
|
|
140
175
|
showModal: _pt.bool.isRequired,
|
|
141
176
|
closeModal: _pt.func.isRequired,
|
|
@@ -148,6 +183,7 @@ ModalContainer.propTypes = {
|
|
|
148
183
|
maxWidth: _pt.string,
|
|
149
184
|
zIndex: _pt.number,
|
|
150
185
|
shouldCloseOnOverlayClick: _pt.bool
|
|
151
|
-
};
|
|
186
|
+
});
|
|
187
|
+
_defineProperty(ModalContainer, "openInstances", 0);
|
|
152
188
|
export default ModalContainer;
|
|
153
189
|
//# sourceMappingURL=ModalContainer.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ModalContainer.js","names":["React","ReactModal","BOXSHADOWS","Z_INDEXES","jsx","_jsx","ModalContainerStyles","content","top","left","right","bottom","marginRight","width","height","borderRadius","boxSizing","margin","overflow","boxShadow","BOXSHADOW_L3","modalTransitions","concat","backdrop","modal","Counter","openInstances","ModalContainer","props","_React$useState","useState","_React$useState2","_slicedToArray","scroll","setScroll","_React$useState3","_React$useState4","wasOpened","setWasOpened","preventScroll","offset","document","body","style","position","resetScroll","window","scrollTo","useEffect","scrollY","showModal","defaultStyles","overlay","backgroundColor","querySelector","head","getElementsByTagName","createElement","setAttribute","appendChild","createTextNode","id","closeModal","children","_props$height","_props$width","_props$overflow","padding","_props$minWidth","minWidth","_props$maxWidth","maxWidth","_props$zIndex","zIndex","parseInt","_props$shouldCloseOnO","shouldCloseOnOverlayClick","zIndexValue","Math","min","max","toast","stylesConfiguration","Object","assign","_objectSpread","styles","setAppElement","isOpen","closeTimeoutMS","onRequestClose","propTypes","_pt","string","bool","isRequired","func","any","number"],"sources":["../../src/Modals/ModalContainer.tsx"],"sourcesContent":["import * as React from 'react';\nimport ReactModal from 'react-modal';\nimport {BOXSHADOWS} from '../styles';\nimport {Z_INDEXES} from '../styles';\nimport styled, {keyframes} from 'styled-components';\n\nconst ModalContainerStyles = {\n content: {\n top: 'auto',\n left: 'auto',\n right: 'auto',\n bottom: 'auto',\n marginRight: '-50%',\n width: '640px',\n height: '320px',\n borderRadius: '8px',\n boxSizing: 'border-box' as any,\n margin: 0,\n overflow: 'auto',\n boxShadow: BOXSHADOWS.BOXSHADOW_L3,\n },\n};\n\n//override modal classes to define the animations\nconst modalTransitions = `\n\n@keyframes modalOpenAnimation {\n from{\n transform: scale(1.1, 1.1);\n }\n to {\n transform: scale(1, 1);\n }\n}\n\n.ReactModal__Overlay {\n opacity: 0;\n z-index: ${Z_INDEXES.backdrop};\n display:flex;\n justify-content: center;\n align-items: center;\n}\n\n.ReactModal__Overlay--after-open {\n opacity: 1;\n transition: opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\n}\n\n.ReactModal__Content{\n z-index: ${Z_INDEXES.modal};\n opacity:0;\n transition: opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\n}\n\n.ReactModal__Content--after-open{\n opacity: 1;\n animation: modalOpenAnimation 150ms ease-in-out;\n}\n\n.ReactModal__Overlay--before-close {\n opacity: 0;\n transition: opacity 120ms linear;\n}\n\n.ReactModal__Content--before-close{\n opacity: 0;\n transform: scale(1.1, 1.1);\n transition: transform 120ms ease-in-out, opacity 120ms cubic-bezier(0.55, 0.05, 0.67, 0.19);\n}\n`;\n\n\ntype ModalContainerProps = {\n id?: string;\n showModal: boolean;\n closeModal: () => void;\n children: any;\n height?: any;\n width?: any;\n overflow?: string;\n padding?: string;\n minWidth?: string;\n maxWidth?: string;\n zIndex?: number;\n shouldCloseOnOverlayClick?: boolean;\n};\n\nconst Counter = { openInstances : 0};\nconst ModalContainer: React.FC<ModalContainerProps> = (props: ModalContainerProps) => {\n\n const [scroll, setScroll] = React.useState<number>();\n const [wasOpened, setWasOpened] = React.useState<boolean>(false);\n \n const preventScroll = (offset: number) => {\n Counter.openInstances++;\n setWasOpened(true);\n if (document) {\n setScroll(offset);\n document.body.style.position = 'fixed';\n document.body.style.left = `0px`;\n document.body.style.right = `0px`;\n document.body.style.top = `-${offset}px`;\n }\n }\n\n const resetScroll = () => {\n Counter.openInstances--;\n if (!Counter.openInstances && document) {\n //@ts-ignore\n document.body.style.position = null;\n //@ts-ignore\n document.body.style.left = null;\n //@ts-ignore\n document.body.style.top = null;\n //@ts-ignore\n document.body.style.right = null;\n scroll && window.scrollTo(0, scroll);\n setScroll(0);\n }\n }\n\n React.useEffect(() => {\n window && setScroll(window.scrollY);\n });\n\n React.useEffect(() => {\n //modal was opened\n window && !props.showModal && wasOpened && resetScroll();\n //modal was closed\n window && props.showModal && preventScroll(window.scrollY);\n }, [props.showModal]);\n\n\n React.useEffect(() => {\n if (ReactModal.defaultStyles.overlay) {\n ReactModal.defaultStyles.overlay.backgroundColor = 'rgba(0,0,0,0.5)';\n }\n\n //append style node to override modal transition classes\n if (document && !document.querySelector('[modal-custom-styling=\"active\"]')) {\n const head = document.head || document.getElementsByTagName('head')[0];\n const style = document.createElement('style');\n style.setAttribute('modal-custom-styling', 'active');\n head.appendChild(style);\n style.appendChild(document.createTextNode(modalTransitions));\n }\n \n }, []);\n\n const {\n id,\n showModal,\n closeModal,\n children,\n height = 'auto',\n width = 'auto',\n overflow = 'visible',\n padding,\n minWidth = '',\n maxWidth = '',\n zIndex = parseInt(Z_INDEXES.modal),\n shouldCloseOnOverlayClick = true\n } = props;\n\n // should be at least z-index of modal and below z-index of toast\n const zIndexValue = Math.min(Math.max(zIndex, +Z_INDEXES.modal), +Z_INDEXES.toast - 1);\n const stylesConfiguration = Object.assign({...ModalContainerStyles.content}, {\n height,\n width,\n padding,\n overflow,\n minWidth,\n maxWidth,\n zIndex: zIndexValue\n });\n const styles = {content: stylesConfiguration};\n ReactModal.setAppElement('body');\n return (\n <ReactModal id={id}\n isOpen={showModal}\n closeTimeoutMS={120}\n shouldCloseOnOverlayClick={shouldCloseOnOverlayClick}\n onRequestClose={() => closeModal()}\n style={styles}>\n {children}\n </ReactModal>\n );\n}\n\nexport default ModalContainer;\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"ModalContainer.js","names":["React","ReactModal","BOXSHADOWS","Z_INDEXES","jsx","_jsx","ModalContainerStyles","content","top","left","right","bottom","marginRight","width","height","borderRadius","boxSizing","margin","overflow","boxShadow","BOXSHADOW_L3","modalTransitions","concat","backdrop","modal","ModalContainer","_React$Component","_inherits","_super","_createSuper","_classCallCheck","apply","arguments","_createClass","key","value","componentDidMount","defaultStyles","overlay","backgroundColor","document","querySelector","head","getElementsByTagName","style","createElement","setAttribute","appendChild","createTextNode","props","showModal","preventScroll","window","scrollY","getSnapshotBeforeUpdate","prevProps","prevState","scroll","componentDidUpdate","snapshot","resetScroll","componentWillUnmount","render","_this$props","id","closeModal","children","_this$props$height","_this$props$width","_this$props$overflow","padding","_this$props$minWidth","minWidth","_this$props$maxWidth","maxWidth","_this$props$zIndex","zIndex","parseInt","_this$props$shouldClo","shouldCloseOnOverlayClick","zIndexValue","Math","min","max","toast","stylesConfiguration","Object","assign","_objectSpread","styles","setAppElement","isOpen","closeTimeoutMS","onRequestClose","offset","openInstances","setState","body","position","state","scrollTo","Component","_defineProperty","_pt","string","bool","isRequired","func","any","number"],"sources":["../../src/Modals/ModalContainer.tsx"],"sourcesContent":["import * as React from 'react';\nimport ReactModal from 'react-modal';\nimport {BOXSHADOWS} from '../styles';\nimport {Z_INDEXES} from '../styles';\nimport styled, {keyframes} from 'styled-components';\n\nconst ModalContainerStyles = {\n content: {\n top: 'auto',\n left: 'auto',\n right: 'auto',\n bottom: 'auto',\n marginRight: '-50%',\n width: '640px',\n height: '320px',\n borderRadius: '8px',\n boxSizing: 'border-box' as any,\n margin: 0,\n overflow: 'auto',\n boxShadow: BOXSHADOWS.BOXSHADOW_L3,\n },\n};\n\n//override modal classes to define the animations\nconst modalTransitions = `\n\n@keyframes modalOpenAnimation {\n from{\n transform: scale(1.1, 1.1);\n }\n to {\n transform: scale(1, 1);\n }\n}\n\n.ReactModal__Overlay {\n opacity: 0;\n z-index: ${Z_INDEXES.backdrop};\n display:flex;\n justify-content: center;\n align-items: center;\n}\n\n.ReactModal__Overlay--after-open {\n opacity: 1;\n transition: opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\n}\n\n.ReactModal__Content{\n z-index: ${Z_INDEXES.modal};\n opacity:0;\n transition: opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\n}\n\n.ReactModal__Content--after-open{\n opacity: 1;\n animation: modalOpenAnimation 150ms ease-in-out;\n}\n\n.ReactModal__Overlay--before-close {\n opacity: 0;\n transition: opacity 120ms linear;\n}\n\n.ReactModal__Content--before-close{\n opacity: 0;\n transform: scale(1.1, 1.1);\n transition: transform 120ms ease-in-out, opacity 120ms cubic-bezier(0.55, 0.05, 0.67, 0.19);\n}\n`;\n\n\ntype ModalContainerProps = {\n id?: string;\n showModal: boolean;\n closeModal: () => void;\n children: any;\n height?: any;\n width?: any;\n overflow?: string;\n padding?: string;\n minWidth?: string;\n maxWidth?: string;\n zIndex?: number;\n shouldCloseOnOverlayClick?: boolean;\n};\n\ntype ModalContainerState = {\n scroll: number;\n};\n\nclass ModalContainer extends React.Component<ModalContainerProps, ModalContainerState> {\n private static openInstances = 0;\n\n componentDidMount() {\n if (ReactModal.defaultStyles.overlay) {\n ReactModal.defaultStyles.overlay.backgroundColor = 'rgba(0,0,0,0.5)';\n }\n\n //append style node to override modal transition classes\n if (!document.querySelector('[modal-custom-styling=\"active\"]')) {\n const head = document.head || document.getElementsByTagName('head')[0];\n const style = document.createElement('style');\n style.setAttribute('modal-custom-styling', 'active');\n head.appendChild(style);\n style.appendChild(document.createTextNode(modalTransitions));\n }\n\n if (this.props.showModal) {\n this.preventScroll(window.scrollY);\n }\n }\n\n getSnapshotBeforeUpdate(prevProps: Readonly<ModalContainerProps>, prevState: Readonly<ModalContainerState>): { scroll: number } {\n return {scroll: window.scrollY};\n }\n\n componentDidUpdate(prevProps: Readonly<ModalContainerProps>, prevState: Readonly<ModalContainerState>, snapshot?: { scroll: number }) {\n if (this.props.showModal && !prevProps.showModal) {\n this.preventScroll(snapshot!.scroll);\n }\n if (!this.props.showModal && prevProps.showModal) {\n this.resetScroll();\n }\n }\n\n componentWillUnmount() {\n if (this.props.showModal) {\n this.resetScroll();\n }\n }\n\n render() {\n const {\n id,\n showModal,\n closeModal,\n children,\n height = 'auto',\n width = 'auto',\n overflow = 'visible',\n padding,\n minWidth = '',\n maxWidth = '',\n zIndex = parseInt(Z_INDEXES.modal),\n shouldCloseOnOverlayClick = true\n } = this.props;\n\n // should be at least z-index of modal and below z-index of toast\n const zIndexValue = Math.min(Math.max(zIndex, +Z_INDEXES.modal), +Z_INDEXES.toast - 1);\n const stylesConfiguration = Object.assign({...ModalContainerStyles.content}, {\n height,\n width,\n padding,\n overflow,\n minWidth,\n maxWidth,\n zIndex: zIndexValue\n });\n const styles = {content: stylesConfiguration};\n\n ReactModal.setAppElement('body');\n return (\n <ReactModal id={id}\n isOpen={showModal}\n closeTimeoutMS={120}\n onRequestClose={() => closeModal()}\n shouldCloseOnOverlayClick={shouldCloseOnOverlayClick}\n style={styles}>\n {children}\n </ReactModal>\n );\n }\n\n private preventScroll(offset: number) {\n if (!ModalContainer.openInstances) {\n this.setState({scroll: offset});\n document.body.style.position = 'fixed';\n document.body.style.left = `0px`;\n document.body.style.right = `0px`;\n document.body.style.top = `-${offset}px`;\n }\n ModalContainer.openInstances++\n }\n\n private resetScroll() {\n ModalContainer.openInstances--;\n if (!ModalContainer.openInstances) {\n //@ts-ignore\n document.body.style.position = null;\n //@ts-ignore\n document.body.style.left = null;\n //@ts-ignore\n document.body.style.top = null;\n //@ts-ignore\n document.body.style.right = null;\n this.state.scroll && window.scrollTo(0, this.state.scroll);\n this.setState({scroll: 0});\n }\n }\n}\n\nexport default ModalContainer;"],"mappings":"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","ignoreList":[]}
|
|
@@ -6,8 +6,6 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
value: true
|
|
7
7
|
});
|
|
8
8
|
exports.UpperCaseTypography = exports.UpperCase = exports.TypographyBase = exports.Typography = exports.QuoteTypography = exports.Quote = exports.NoteTypography = exports.Note = exports.ComponentXXSStyling = exports.ComponentXXS = exports.ComponentXSStyling = exports.ComponentXS = exports.ComponentXLStyling = exports.ComponentXL = exports.ComponentTextStyle = exports.ComponentSStyling = exports.ComponentS = exports.ComponentResponsive = exports.ComponentMStyling = exports.ComponentM = exports.ComponentLStyling = exports.ComponentL = void 0;
|
|
9
|
-
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
10
|
-
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
11
9
|
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
12
10
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
13
11
|
var _react = _interopRequireDefault(require("react"));
|
|
@@ -15,18 +13,9 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
|
15
13
|
var _ = require(".");
|
|
16
14
|
var _types = require("../types");
|
|
17
15
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
18
|
-
var _excluded = ["color", "textStyle", "children", "className"],
|
|
19
|
-
_excluded2 = ["color", "textStyle", "children", "className"],
|
|
20
|
-
_excluded3 = ["color", "textStyle", "children", "className"],
|
|
21
|
-
_excluded4 = ["color", "textStyle", "children", "className"],
|
|
22
|
-
_excluded5 = ["color", "textStyle", "children", "className"],
|
|
23
|
-
_excluded6 = ["color", "textStyle", "children", "className"],
|
|
24
|
-
_excluded7 = ["color", "textStyle", "children", "size", "width"];
|
|
25
16
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
|
|
26
17
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
27
18
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
|
28
|
-
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
29
|
-
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
30
19
|
var TypographyBase = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n font-size: ", "px;\n font-weight: ", ";\n line-height: ", "px;\n text-transform: ", ";\n text-decoration-line: ", ";\n font-style: ", ";\n color: ", ";\n"])), function (props) {
|
|
31
20
|
return props.$fontSize;
|
|
32
21
|
}, function (props) {
|
|
@@ -83,20 +72,18 @@ var ComponentXL = function ComponentXL(_ref) {
|
|
|
83
72
|
var color = _ref.color,
|
|
84
73
|
textStyle = _ref.textStyle,
|
|
85
74
|
children = _ref.children,
|
|
86
|
-
className = _ref.className
|
|
87
|
-
rest = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
|
|
75
|
+
className = _ref.className;
|
|
88
76
|
var fontWeight = componentFontWeight(textStyle);
|
|
89
77
|
var fontStyle = componentFontStyle(textStyle);
|
|
90
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(TypographyBase,
|
|
78
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(TypographyBase, {
|
|
91
79
|
className: className,
|
|
92
80
|
$color: color,
|
|
93
81
|
$lineHeight: 28,
|
|
94
82
|
$fontSize: 24,
|
|
95
83
|
$fontWeight: fontWeight,
|
|
96
|
-
$fontStyle: fontStyle
|
|
97
|
-
}, rest), {}, {
|
|
84
|
+
$fontStyle: fontStyle,
|
|
98
85
|
children: children
|
|
99
|
-
})
|
|
86
|
+
});
|
|
100
87
|
};
|
|
101
88
|
exports.ComponentXL = ComponentXL;
|
|
102
89
|
ComponentXL.propTypes = {
|
|
@@ -113,20 +100,18 @@ var ComponentL = function ComponentL(_ref2) {
|
|
|
113
100
|
var color = _ref2.color,
|
|
114
101
|
textStyle = _ref2.textStyle,
|
|
115
102
|
children = _ref2.children,
|
|
116
|
-
className = _ref2.className
|
|
117
|
-
rest = (0, _objectWithoutProperties2["default"])(_ref2, _excluded2);
|
|
103
|
+
className = _ref2.className;
|
|
118
104
|
var fontWeight = componentFontWeight(textStyle);
|
|
119
105
|
var fontStyle = componentFontStyle(textStyle);
|
|
120
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(TypographyBase,
|
|
106
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(TypographyBase, {
|
|
121
107
|
className: className,
|
|
122
108
|
$color: color,
|
|
123
109
|
$lineHeight: 24,
|
|
124
110
|
$fontSize: 20,
|
|
125
111
|
$fontWeight: fontWeight,
|
|
126
|
-
$fontStyle: fontStyle
|
|
127
|
-
}, rest), {}, {
|
|
112
|
+
$fontStyle: fontStyle,
|
|
128
113
|
children: children
|
|
129
|
-
})
|
|
114
|
+
});
|
|
130
115
|
};
|
|
131
116
|
exports.ComponentL = ComponentL;
|
|
132
117
|
ComponentL.propTypes = {
|
|
@@ -143,20 +128,18 @@ var ComponentM = function ComponentM(_ref3) {
|
|
|
143
128
|
var color = _ref3.color,
|
|
144
129
|
textStyle = _ref3.textStyle,
|
|
145
130
|
children = _ref3.children,
|
|
146
|
-
className = _ref3.className
|
|
147
|
-
rest = (0, _objectWithoutProperties2["default"])(_ref3, _excluded3);
|
|
131
|
+
className = _ref3.className;
|
|
148
132
|
var fontWeight = componentFontWeight(textStyle);
|
|
149
133
|
var fontStyle = componentFontStyle(textStyle);
|
|
150
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(TypographyBase,
|
|
134
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(TypographyBase, {
|
|
151
135
|
className: className,
|
|
152
136
|
$color: color,
|
|
153
137
|
$lineHeight: 24,
|
|
154
138
|
$fontSize: 18,
|
|
155
139
|
$fontWeight: fontWeight,
|
|
156
|
-
$fontStyle: fontStyle
|
|
157
|
-
}, rest), {}, {
|
|
140
|
+
$fontStyle: fontStyle,
|
|
158
141
|
children: children
|
|
159
|
-
})
|
|
142
|
+
});
|
|
160
143
|
};
|
|
161
144
|
exports.ComponentM = ComponentM;
|
|
162
145
|
ComponentM.propTypes = {
|
|
@@ -173,20 +156,18 @@ var ComponentS = function ComponentS(_ref4) {
|
|
|
173
156
|
var color = _ref4.color,
|
|
174
157
|
textStyle = _ref4.textStyle,
|
|
175
158
|
children = _ref4.children,
|
|
176
|
-
className = _ref4.className
|
|
177
|
-
rest = (0, _objectWithoutProperties2["default"])(_ref4, _excluded4);
|
|
159
|
+
className = _ref4.className;
|
|
178
160
|
var fontWeight = componentFontWeight(textStyle);
|
|
179
161
|
var fontStyle = componentFontStyle(textStyle);
|
|
180
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(TypographyBase,
|
|
162
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(TypographyBase, {
|
|
181
163
|
className: className,
|
|
182
164
|
$color: color,
|
|
183
165
|
$lineHeight: 20,
|
|
184
166
|
$fontSize: 16,
|
|
185
167
|
$fontWeight: fontWeight,
|
|
186
|
-
$fontStyle: fontStyle
|
|
187
|
-
}, rest), {}, {
|
|
168
|
+
$fontStyle: fontStyle,
|
|
188
169
|
children: children
|
|
189
|
-
})
|
|
170
|
+
});
|
|
190
171
|
};
|
|
191
172
|
exports.ComponentS = ComponentS;
|
|
192
173
|
ComponentS.propTypes = {
|
|
@@ -203,22 +184,20 @@ var ComponentXS = function ComponentXS(_ref5) {
|
|
|
203
184
|
var color = _ref5.color,
|
|
204
185
|
textStyle = _ref5.textStyle,
|
|
205
186
|
children = _ref5.children,
|
|
206
|
-
className = _ref5.className
|
|
207
|
-
rest = (0, _objectWithoutProperties2["default"])(_ref5, _excluded5);
|
|
187
|
+
className = _ref5.className;
|
|
208
188
|
var fontWeight = componentFontWeight(textStyle);
|
|
209
189
|
var fontStyle = componentFontStyle(textStyle);
|
|
210
190
|
var textTransform = componentTextTransformation(textStyle);
|
|
211
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(TypographyBase,
|
|
191
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(TypographyBase, {
|
|
212
192
|
className: className,
|
|
213
193
|
$color: color,
|
|
214
194
|
$lineHeight: 16,
|
|
215
195
|
$fontSize: 14,
|
|
216
196
|
$fontWeight: fontWeight,
|
|
217
197
|
$fontStyle: fontStyle,
|
|
218
|
-
$textTransform: textTransform
|
|
219
|
-
}, rest), {}, {
|
|
198
|
+
$textTransform: textTransform,
|
|
220
199
|
children: children
|
|
221
|
-
})
|
|
200
|
+
});
|
|
222
201
|
};
|
|
223
202
|
exports.ComponentXS = ComponentXS;
|
|
224
203
|
ComponentXS.propTypes = {
|
|
@@ -235,22 +214,20 @@ var ComponentXXS = function ComponentXXS(_ref6) {
|
|
|
235
214
|
var color = _ref6.color,
|
|
236
215
|
textStyle = _ref6.textStyle,
|
|
237
216
|
children = _ref6.children,
|
|
238
|
-
className = _ref6.className
|
|
239
|
-
rest = (0, _objectWithoutProperties2["default"])(_ref6, _excluded6);
|
|
217
|
+
className = _ref6.className;
|
|
240
218
|
var fontWeight = componentFontWeight(textStyle);
|
|
241
219
|
var fontStyle = componentFontStyle(textStyle);
|
|
242
220
|
var textTransform = componentTextTransformation(textStyle);
|
|
243
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(TypographyBase,
|
|
221
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(TypographyBase, {
|
|
244
222
|
className: className,
|
|
245
223
|
$color: color,
|
|
246
224
|
$lineHeight: 16,
|
|
247
225
|
$fontSize: 12,
|
|
248
226
|
$fontWeight: fontWeight,
|
|
249
227
|
$fontStyle: fontStyle,
|
|
250
|
-
$textTransform: textTransform
|
|
251
|
-
}, rest), {}, {
|
|
228
|
+
$textTransform: textTransform,
|
|
252
229
|
children: children
|
|
253
|
-
})
|
|
230
|
+
});
|
|
254
231
|
};
|
|
255
232
|
exports.ComponentXXS = ComponentXXS;
|
|
256
233
|
ComponentXXS.propTypes = {
|
|
@@ -264,8 +241,7 @@ var ComponentResponsive = function ComponentResponsive(_ref7) {
|
|
|
264
241
|
textStyle = _ref7.textStyle,
|
|
265
242
|
children = _ref7.children,
|
|
266
243
|
size = _ref7.size,
|
|
267
|
-
width = _ref7.width
|
|
268
|
-
rest = (0, _objectWithoutProperties2["default"])(_ref7, _excluded7);
|
|
244
|
+
width = _ref7.width;
|
|
269
245
|
var fontsize = size;
|
|
270
246
|
if (!size) {
|
|
271
247
|
if (width == -1) {
|
|
@@ -280,36 +256,36 @@ var ComponentResponsive = function ComponentResponsive(_ref7) {
|
|
|
280
256
|
}
|
|
281
257
|
switch (fontsize) {
|
|
282
258
|
case _types.Size.XXSmall:
|
|
283
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(ComponentXXS,
|
|
259
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(ComponentXXS, {
|
|
284
260
|
color: color,
|
|
285
261
|
textStyle: textStyle,
|
|
286
262
|
children: children
|
|
287
|
-
}
|
|
263
|
+
});
|
|
288
264
|
case _types.Size.XSmall:
|
|
289
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(ComponentXS,
|
|
265
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(ComponentXS, {
|
|
290
266
|
color: color,
|
|
291
267
|
textStyle: textStyle,
|
|
292
268
|
children: children
|
|
293
|
-
}
|
|
269
|
+
});
|
|
294
270
|
case _types.Size.Small:
|
|
295
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(ComponentS,
|
|
271
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(ComponentS, {
|
|
296
272
|
color: color,
|
|
297
273
|
textStyle: textStyle,
|
|
298
274
|
children: children
|
|
299
|
-
}
|
|
275
|
+
});
|
|
300
276
|
case _types.Size.Medium:
|
|
301
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(ComponentM,
|
|
277
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(ComponentM, {
|
|
302
278
|
color: color,
|
|
303
279
|
textStyle: textStyle,
|
|
304
280
|
children: children
|
|
305
|
-
}
|
|
281
|
+
});
|
|
306
282
|
case _types.Size.Large:
|
|
307
283
|
default:
|
|
308
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(ComponentL,
|
|
284
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(ComponentL, {
|
|
309
285
|
color: color,
|
|
310
286
|
textStyle: textStyle,
|
|
311
287
|
children: children
|
|
312
|
-
}
|
|
288
|
+
});
|
|
313
289
|
}
|
|
314
290
|
};
|
|
315
291
|
exports.ComponentResponsive = ComponentResponsive;
|