oolib 2.26.9 → 2.27.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/dist/components/Hints/index.js +3 -3
- package/dist/components/Modals/ModalLarge/index.js +33 -30
- package/dist/components/Modals/{index.styled.d.ts → ModalLarge/styled.d.ts} +0 -1
- package/dist/components/Modals/ModalLarge/styled.js +26 -0
- package/dist/components/Modals/ModalSmall/index.js +27 -33
- package/dist/components/Modals/ModalSmall/styled.d.ts +5 -0
- package/dist/components/Modals/ModalSmall/styled.js +42 -0
- package/dist/components/Typo/index.d.ts +1 -0
- package/dist/components/Typo/index.js +3 -1
- package/dist/components/Typo/index.styled.d.ts +1 -0
- package/dist/components/Typo/index.styled.js +7 -6
- package/dist/themes/typo.d.ts +2 -0
- package/dist/themes/typo.js +22 -4
- package/dist/utils/comps/index.js +5 -1
- package/package.json +1 -1
- package/dist/components/Modals/index.styled.js +0 -27
|
@@ -21,7 +21,7 @@ var Buttons_1 = require("../Buttons");
|
|
|
21
21
|
var ModalLarge_1 = require("../Modals/ModalLarge");
|
|
22
22
|
var mixins_1 = require("../../themes/mixins");
|
|
23
23
|
var useScreenWidth_1 = require("../../utils/customHooks/useScreenWidth");
|
|
24
|
-
var
|
|
24
|
+
var styled_2 = require("../Modals/ModalLarge/styled");
|
|
25
25
|
var greyColor80 = colors_1.colors.greyColor80, greyColor15 = colors_1.colors.greyColor15, greyColor100 = colors_1.colors.greyColor100;
|
|
26
26
|
var TriangleIconComp = function (props) { return (React.createElement("svg", __assign({ width: 20, height: 13, fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
|
|
27
27
|
React.createElement("path", { d: "m8.894 1.206-7.59 8.28C.422 10.448 1.104 12 2.41 12h15.18c1.305 0 1.988-1.552 1.106-2.514l-7.59-8.28a1.5 1.5 0 0 0-2.212 0Z", fill: "#fff", stroke: greyColor15 }))); };
|
|
@@ -68,10 +68,10 @@ var Hints = function (_a) {
|
|
|
68
68
|
active === id ? (isDesktop ? (React.createElement("div", null,
|
|
69
69
|
React.createElement(styled_1.StyledTriangle, { style: styles.arrow, id: id }),
|
|
70
70
|
React.createElement(styled_1.StyledLightbox, { style: styles.lightBox, ref: lightBoxRef, id: id },
|
|
71
|
-
React.createElement(
|
|
71
|
+
React.createElement(styled_2.StyledModalHeaderStyle2Container, null,
|
|
72
72
|
React.createElement("div", { style: { position: "absolute", top: "-2.5rem", fontSize: 0 } },
|
|
73
73
|
React.createElement(comps_1.DisplayIcon, { icon: "ModalBulbIcon" })),
|
|
74
|
-
React.createElement(
|
|
74
|
+
React.createElement(styled_2.StyledModalHeaderStyle2Title, null,
|
|
75
75
|
React.createElement(Typo_1.SANS_4_5, { semibold: true, capitalize: true }, title || "title"),
|
|
76
76
|
React.createElement(Typo_1.SANS_3_4, { capitalize: true, semibold: true, style: { flexGrow: "1" }, color: greyColor80 }, subtitle || "subtitle"),
|
|
77
77
|
React.createElement(Buttons_1.ButtonGhost, { onClick: function () { return setActive(""); }, icon: "X" }))),
|
|
@@ -33,10 +33,34 @@ var Typo_1 = require("../../Typo");
|
|
|
33
33
|
var themes_1 = require("../../../themes");
|
|
34
34
|
var comps_1 = require("../../../utils/comps");
|
|
35
35
|
var useScreenWidth_1 = require("../../../utils/customHooks/useScreenWidth");
|
|
36
|
-
var
|
|
36
|
+
var styled_1 = require("./styled");
|
|
37
37
|
var greyColor80 = themes_1.colors.greyColor80;
|
|
38
|
+
var ModalHeaderStyle1 = function (_a) {
|
|
39
|
+
var title = _a.title, linkTo = _a.linkTo, onClose = _a.onClose, setAnimPos = _a.setAnimPos, initAnimPos = _a.initAnimPos;
|
|
40
|
+
return (react_1.default.createElement(styled_1.StyledModalLargeHeader, null,
|
|
41
|
+
react_1.default.createElement("div", { style: {
|
|
42
|
+
display: "flex",
|
|
43
|
+
gap: "2.5rem",
|
|
44
|
+
alignItems: "center",
|
|
45
|
+
} },
|
|
46
|
+
!linkTo && title && (react_1.default.createElement("div", null,
|
|
47
|
+
react_1.default.createElement(Typo_1.SANS_3_4, { semibold: true }, title))),
|
|
48
|
+
linkTo && (react_1.default.createElement(Typo_1.SANS_4, { semibold: true },
|
|
49
|
+
react_1.default.createElement(OKELink_1.OKELink, { iconAfter: "ArrowLineUpRight", linkType: "action", onClick: function () { return window.open(linkTo); }, iconSize: 24, color: "black" }, title)))),
|
|
50
|
+
onClose && (react_1.default.createElement(Buttons_1.ButtonGhost, { icon: "X", onClick: function () { return setAnimPos(initAnimPos); } }))));
|
|
51
|
+
};
|
|
52
|
+
var ModalHeaderStyle2 = function (_a) {
|
|
53
|
+
var title = _a.title, subtitle = _a.subtitle, onClose = _a.onClose, setAnimPos = _a.setAnimPos, initAnimPos = _a.initAnimPos;
|
|
54
|
+
return (react_1.default.createElement(styled_1.StyledModalHeaderStyle2Container, null,
|
|
55
|
+
react_1.default.createElement("div", { style: { position: "absolute", top: "-2.5rem" } },
|
|
56
|
+
react_1.default.createElement(comps_1.DisplayIcon, { size: 20, icon: "ModalBulbIcon" })),
|
|
57
|
+
react_1.default.createElement(styled_1.StyledModalHeaderStyle2Title, null,
|
|
58
|
+
react_1.default.createElement(Typo_1.SANS_4_5, { semibold: true, capitalize: true }, title || "title"),
|
|
59
|
+
react_1.default.createElement(Typo_1.SANS_3_4, { semibold: true, capitalize: true, style: { flexGrow: "1" }, color: greyColor80 }, subtitle || "subtitle"),
|
|
60
|
+
onClose && (react_1.default.createElement(Buttons_1.ButtonGhost, { icon: "X", onClick: function () { return setAnimPos(initAnimPos); } })))));
|
|
61
|
+
};
|
|
38
62
|
var ModalLarge = function (_a) {
|
|
39
|
-
var title = _a.title, onClose = _a.onClose, children = _a.children, linkTo = _a.linkTo, _b = _a.desktopWidth, desktopWidth = _b === void 0 ? "80%" : _b, _c = _a.headerStyle, headerStyle = _c === void 0 ?
|
|
63
|
+
var title = _a.title, onClose = _a.onClose, children = _a.children, linkTo = _a.linkTo, _b = _a.desktopWidth, desktopWidth = _b === void 0 ? "80%" : _b, _c = _a.headerStyle, headerStyle = _c === void 0 ? "style1" : _c, subtitle = _a.subtitle;
|
|
40
64
|
var screenWidth = (0, useScreenWidth_1.useScreenWidth)();
|
|
41
65
|
var handleClose = function () { return onClose(); };
|
|
42
66
|
var initAnimPos = { marginTop: "100vh", opacity: 0 };
|
|
@@ -44,43 +68,22 @@ var ModalLarge = function (_a) {
|
|
|
44
68
|
var _d = (0, react_1.useState)(endAnimPos), animPos = _d[0], setAnimPos = _d[1];
|
|
45
69
|
(0, react_1.useEffect)(function () {
|
|
46
70
|
document.body.style.overflow = "hidden";
|
|
47
|
-
return function () { return document.body.style.overflow = "unset"; };
|
|
71
|
+
return function () { return (document.body.style.overflow = "unset"); };
|
|
48
72
|
}, []);
|
|
49
|
-
var ModalHeaderStyle1 = function () {
|
|
50
|
-
return (react_1.default.createElement(index_styled_1.StyledModalLargeHeader, null,
|
|
51
|
-
react_1.default.createElement("div", { style: {
|
|
52
|
-
display: "flex",
|
|
53
|
-
gap: "2.5rem",
|
|
54
|
-
alignItems: "center",
|
|
55
|
-
} },
|
|
56
|
-
!linkTo && title && (react_1.default.createElement("div", { className: "ModalLarge__header--title" },
|
|
57
|
-
react_1.default.createElement(Typo_1.SANS_3_4, { semibold: true }, title))),
|
|
58
|
-
linkTo && (react_1.default.createElement(Typo_1.SANS_4, { semibold: true },
|
|
59
|
-
react_1.default.createElement(OKELink_1.OKELink, { iconAfter: "ArrowLineUpRight", linkType: "action", onClick: function () { return window.open(linkTo); }, iconSize: 24, color: "black" }, title)))),
|
|
60
|
-
onClose && (react_1.default.createElement(Buttons_1.ButtonGhost, { icon: "X", onClick: function () { return setAnimPos(initAnimPos); } }))));
|
|
61
|
-
};
|
|
62
|
-
var ModalHeaderStyle2 = function () {
|
|
63
|
-
return (react_1.default.createElement(index_styled_1.StyledModalHeaderStyle2Container, null,
|
|
64
|
-
react_1.default.createElement("div", { style: { position: "absolute", top: "-2.5rem" } },
|
|
65
|
-
react_1.default.createElement(comps_1.DisplayIcon, { size: 20, icon: "ModalBulbIcon" })),
|
|
66
|
-
react_1.default.createElement(index_styled_1.StyledModalHeaderStyle2Title, null,
|
|
67
|
-
react_1.default.createElement(Typo_1.SANS_4_5, { semibold: true, capitalize: true }, title || "title"),
|
|
68
|
-
react_1.default.createElement(Typo_1.SANS_3_4, { semibold: true, capitalize: true, style: { flexGrow: "1" }, color: greyColor80 }, subtitle || "subtitle"),
|
|
69
|
-
onClose && (react_1.default.createElement(Buttons_1.ButtonGhost, { icon: "X", onClick: function () { return setAnimPos(initAnimPos); } })))));
|
|
70
|
-
};
|
|
71
73
|
var genHeader = function () {
|
|
72
74
|
var headerStyles = {
|
|
73
75
|
style1: ModalHeaderStyle1,
|
|
74
76
|
style2: ModalHeaderStyle2,
|
|
75
77
|
};
|
|
76
78
|
var Comp = headerStyles[headerStyle];
|
|
77
|
-
return react_1.default.createElement(Comp, { onClose: onClose });
|
|
79
|
+
return (react_1.default.createElement(Comp, { title: title, subtitle: subtitle, setAnimPos: setAnimPos, linkTo: linkTo, onClose: onClose, initAnimPos: initAnimPos }));
|
|
78
80
|
};
|
|
79
|
-
var genModalContents = function () { return (react_1.default.createElement(
|
|
81
|
+
var genModalContents = function () { return (react_1.default.createElement(styled_1.StyledModalLargeContentWrapper, { desktopWidth: desktopWidth },
|
|
80
82
|
genHeader(),
|
|
81
|
-
react_1.default.createElement(
|
|
82
|
-
|
|
83
|
-
|
|
83
|
+
react_1.default.createElement("div", { style: { overflow: "hidden" } },
|
|
84
|
+
react_1.default.createElement(styled_1.StyledModalLargeBody, null, children)))); };
|
|
85
|
+
return (react_1.default.createElement(styled_1.StyledModalLargeBg, null,
|
|
86
|
+
react_1.default.createElement(styled_1.StyledModalLargeBgColor, { initial: { opacity: initAnimPos.opacity }, animate: { opacity: animPos.opacity }, transition: {
|
|
84
87
|
type: "tween",
|
|
85
88
|
ease: "easeOut",
|
|
86
89
|
} }),
|
|
@@ -3,6 +3,5 @@ export const StyledModalLargeBgColor: any;
|
|
|
3
3
|
export const StyledModalLargeContentWrapper: any;
|
|
4
4
|
export const StyledModalLargeHeader: any;
|
|
5
5
|
export const StyledModalLargeBody: any;
|
|
6
|
-
export const ModalsClassProvider: any;
|
|
7
6
|
export const StyledModalHeaderStyle2Container: any;
|
|
8
7
|
export const StyledModalHeaderStyle2Title: any;
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
|
|
3
|
+
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
4
|
+
return cooked;
|
|
5
|
+
};
|
|
6
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
7
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
8
|
+
};
|
|
9
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
10
|
+
exports.StyledModalHeaderStyle2Title = exports.StyledModalHeaderStyle2Container = exports.StyledModalLargeBody = exports.StyledModalLargeHeader = exports.StyledModalLargeContentWrapper = exports.StyledModalLargeBgColor = exports.StyledModalLargeBg = void 0;
|
|
11
|
+
var mixins_1 = require("../../../themes/mixins");
|
|
12
|
+
var themes_1 = require("../../../themes");
|
|
13
|
+
var framer_motion_1 = require("framer-motion");
|
|
14
|
+
var styled_components_1 = __importDefault(require("styled-components"));
|
|
15
|
+
var black_opacity80 = themes_1.colors.black_opacity80, white = themes_1.colors.white, greyColor5 = themes_1.colors.greyColor5, greyColor15 = themes_1.colors.greyColor15;
|
|
16
|
+
exports.StyledModalLargeBg = (0, styled_components_1.default)(framer_motion_1.motion.div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 100vw;\n height: 100%;\n position: fixed;\n left: 0;\n bottom: 0;\n z-index: 99999999;\n overflow-y: auto;\n overflow-x: hidden;\n ", " {\n display: flex;\n justify-content: center;\n align-items: center;\n }\n"], ["\n width: 100vw;\n height: 100%;\n position: fixed;\n left: 0;\n bottom: 0;\n z-index: 99999999;\n overflow-y: auto;\n overflow-x: hidden;\n ", " {\n display: flex;\n justify-content: center;\n align-items: center;\n }\n"])), (0, mixins_1.mediaQuery)("sm"));
|
|
17
|
+
exports.StyledModalLargeBgColor = (0, styled_components_1.default)(framer_motion_1.motion.div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background: ", ";\n position: absolute;\n left: 0;\n top: 0;\n width: 100vw;\n height: 100vh;\n"], ["\n background: ", ";\n position: absolute;\n left: 0;\n top: 0;\n width: 100vw;\n height: 100vh;\n"])), black_opacity80);
|
|
18
|
+
exports.StyledModalLargeContentWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n width: 100%;\n margin-top: 4rem;\n min-height: calc(100vh - 4rem);\n background-color: ", ";\n\n ", " {\n margin-top: 0;\n border: 2px solid ", ";\n width: ", ";\n min-height: 50vh;\n max-height: 90vh;\n position: relative;\n /* overflow: auto; */\n display: flex;\n flex-direction: column;\n border-radius: 0.2rem;\n margin: 0 auto;\n }\n"], ["\n width: 100%;\n margin-top: 4rem;\n min-height: calc(100vh - 4rem);\n background-color: ", ";\n\n ", " {\n margin-top: 0;\n border: 2px solid ", ";\n width: ", ";\n min-height: 50vh;\n max-height: 90vh;\n position: relative;\n /* overflow: auto; */\n display: flex;\n flex-direction: column;\n border-radius: 0.2rem;\n margin: 0 auto;\n }\n"])), white, (0, mixins_1.mediaQuery)("sm"), white, function (_a) {
|
|
19
|
+
var desktopWidth = _a.desktopWidth;
|
|
20
|
+
return desktopWidth;
|
|
21
|
+
});
|
|
22
|
+
exports.StyledModalLargeHeader = styled_components_1.default.header(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n background-color: ", ";\n /* width: 100%; */\n height: 4rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 0 2rem;\n position: sticky;\n top: 0;\n z-index: 100;\n"], ["\n background-color: ", ";\n /* width: 100%; */\n height: 4rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 0 2rem;\n position: sticky;\n top: 0;\n z-index: 100;\n"])), greyColor5);
|
|
23
|
+
exports.StyledModalLargeBody = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n position: relative;\n overflow: auto;\n min-height: 50vh;\n max-height: 90vh;\n"], ["\n position: relative;\n overflow: auto;\n min-height: 50vh;\n max-height: 90vh;\n"])));
|
|
24
|
+
exports.StyledModalHeaderStyle2Container = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n display: flex;\n border-bottom: 1px solid ", ";\n padding: 1rem 2rem;\n position: relative;\n"], ["\n display: flex;\n border-bottom: 1px solid ", ";\n padding: 1rem 2rem;\n position: relative;\n"])), greyColor15);
|
|
25
|
+
exports.StyledModalHeaderStyle2Title = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n padding-top: 1rem;\n display: flex;\n flex-grow: 1;\n gap: 1.5rem;\n justify-content: space-between;\n align-items: center;\n"], ["\n padding-top: 1rem;\n display: flex;\n flex-grow: 1;\n gap: 1.5rem;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
26
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
|
|
@@ -24,13 +24,12 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
24
24
|
};
|
|
25
25
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
26
26
|
exports.ModalSmall = void 0;
|
|
27
|
-
var framer_motion_1 = require("framer-motion");
|
|
28
27
|
var react_1 = __importStar(require("react"));
|
|
29
28
|
var mixins_1 = require("../../../themes/mixins");
|
|
30
29
|
var useScreenWidth_1 = require("../../../utils/customHooks/useScreenWidth");
|
|
31
30
|
var Buttons_1 = require("../../Buttons");
|
|
32
31
|
var Typo_1 = require("../../Typo");
|
|
33
|
-
var
|
|
32
|
+
var styled_1 = require("./styled");
|
|
34
33
|
var ModalSmall = function (_a) {
|
|
35
34
|
var title = _a.title, subTitle = _a.subTitle, onClose = _a.onClose, children = _a.children;
|
|
36
35
|
var screenWidth = (0, useScreenWidth_1.useScreenWidth)();
|
|
@@ -42,41 +41,36 @@ var ModalSmall = function (_a) {
|
|
|
42
41
|
return function () { return (document.body.style.overflow = "unset"); };
|
|
43
42
|
}, []);
|
|
44
43
|
var genModalContents = function () { return (react_1.default.createElement(react_1.Fragment, null,
|
|
45
|
-
onClose && (react_1.default.createElement(
|
|
44
|
+
onClose && (react_1.default.createElement(styled_1.StyledModalSmallClose, null,
|
|
46
45
|
react_1.default.createElement(Buttons_1.ButtonPrimary, { S: true, icon: "X", onClick: function () { return setAnimPos(initAnimPos); } }))),
|
|
47
|
-
react_1.default.createElement(
|
|
48
|
-
title && (react_1.default.createElement("div",
|
|
46
|
+
react_1.default.createElement(styled_1.StyledModalSmallContent, null,
|
|
47
|
+
title && (react_1.default.createElement("div", null,
|
|
49
48
|
react_1.default.createElement(Typo_1.SERIF_5_6, null, title))),
|
|
50
|
-
subTitle && (react_1.default.createElement(
|
|
49
|
+
subTitle && (react_1.default.createElement(styled_1.StyledModalSmallContentSubtitle, null,
|
|
51
50
|
react_1.default.createElement(Typo_1.SANS_4, null, subTitle))),
|
|
52
51
|
react_1.default.createElement("div", { style: { marginTop: (title || subTitle) && "2rem" } }, children ? children : null)))); };
|
|
53
|
-
return (react_1.default.createElement(
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
, {
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
if (animPos.marginTop === initAnimPos.marginTop)
|
|
63
|
-
onClose();
|
|
64
|
-
} }, genModalContents())) : (react_1.default.createElement(framer_motion_1.motion.div
|
|
52
|
+
return (react_1.default.createElement(styled_1.StyledModalSmall, { initial: { opacity: initAnimPos.opacity }, animate: { opacity: animPos.opacity }, transition: { type: "tween", ease: "easeOut" } }, screenWidth < (0, mixins_1.getBreakPoint)("sm") ? (react_1.default.createElement(styled_1.StyledModalSmallContentWrapper, { initial: initAnimPos, animate: animPos, transition: {
|
|
53
|
+
type: "tween",
|
|
54
|
+
ease: "easeOut",
|
|
55
|
+
}, onAnimationComplete: function () {
|
|
56
|
+
if (animPos.marginTop === initAnimPos.marginTop)
|
|
57
|
+
onClose();
|
|
58
|
+
} }, genModalContents())) : (react_1.default.createElement(styled_1.StyledModalSmallContentWrapper
|
|
59
|
+
// style={{ width: "100%" }}
|
|
60
|
+
, {
|
|
65
61
|
// style={{ width: "100%" }}
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
onClose();
|
|
80
|
-
} }, genModalContents())))));
|
|
62
|
+
initial: {
|
|
63
|
+
opacity: initAnimPos.opacity,
|
|
64
|
+
marginTop: initAnimPos.marginTop,
|
|
65
|
+
}, animate: {
|
|
66
|
+
opacity: animPos.opacity,
|
|
67
|
+
marginTop: animPos.marginTop,
|
|
68
|
+
}, transition: {
|
|
69
|
+
type: "tween",
|
|
70
|
+
ease: "easeOut",
|
|
71
|
+
}, onAnimationComplete: function () {
|
|
72
|
+
if (animPos.marginTop === initAnimPos.marginTop)
|
|
73
|
+
onClose();
|
|
74
|
+
} }, genModalContents()))));
|
|
81
75
|
};
|
|
82
76
|
exports.ModalSmall = ModalSmall;
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
|
|
3
|
+
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
4
|
+
return cooked;
|
|
5
|
+
};
|
|
6
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
7
|
+
if (k2 === undefined) k2 = k;
|
|
8
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
9
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
10
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
11
|
+
}
|
|
12
|
+
Object.defineProperty(o, k2, desc);
|
|
13
|
+
}) : (function(o, m, k, k2) {
|
|
14
|
+
if (k2 === undefined) k2 = k;
|
|
15
|
+
o[k2] = m[k];
|
|
16
|
+
}));
|
|
17
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
18
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
19
|
+
}) : function(o, v) {
|
|
20
|
+
o["default"] = v;
|
|
21
|
+
});
|
|
22
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
23
|
+
if (mod && mod.__esModule) return mod;
|
|
24
|
+
var result = {};
|
|
25
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
26
|
+
__setModuleDefault(result, mod);
|
|
27
|
+
return result;
|
|
28
|
+
};
|
|
29
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
30
|
+
exports.StyledModalSmallContentSubtitle = exports.StyledModalSmallClose = exports.StyledModalSmallContent = exports.StyledModalSmallContentWrapper = exports.StyledModalSmall = void 0;
|
|
31
|
+
var mixins_1 = require("../../../themes/mixins");
|
|
32
|
+
var themes_1 = require("../../../themes");
|
|
33
|
+
var framer_motion_1 = require("framer-motion");
|
|
34
|
+
var styled_components_1 = __importStar(require("styled-components"));
|
|
35
|
+
var white = themes_1.colors.white, greyColor100_opacity70 = themes_1.colors.greyColor100_opacity70;
|
|
36
|
+
var ModalStyles = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n position: fixed;\n top: 0;\n left: 0;\n background: ", ";\n z-index: 99999999;\n"], ["\n width: 100%;\n height: 100%;\n position: fixed;\n top: 0;\n left: 0;\n background: ", ";\n z-index: 99999999;\n"])), greyColor100_opacity70);
|
|
37
|
+
exports.StyledModalSmall = (0, styled_components_1.default)(framer_motion_1.motion.div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n ", "\n\n ", " {\n display: flex;\n justify-content: center;\n align-items: center;\n }\n"], ["\n ", "\n\n ", " {\n display: flex;\n justify-content: center;\n align-items: center;\n }\n"])), ModalStyles, (0, mixins_1.mediaQuery)("sm"));
|
|
38
|
+
exports.StyledModalSmallContentWrapper = (0, styled_components_1.default)(framer_motion_1.motion.div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n width: 100%;\n position: absolute;\n bottom: 0;\n background-color: ", ";\n\n ", " {\n border: 2px solid ", ";\n width: 50vw;\n position: relative;\n border-radius: 0.2rem;\n }\n"], ["\n width: 100%;\n position: absolute;\n bottom: 0;\n background-color: ", ";\n\n ", " {\n border: 2px solid ", ";\n width: 50vw;\n position: relative;\n border-radius: 0.2rem;\n }\n"])), white, (0, mixins_1.mediaQuery)("sm"), white);
|
|
39
|
+
exports.StyledModalSmallContent = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n position: relative;\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n padding: 0 2rem 4rem 2rem;\n\n ", " {\n position: relative;\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n padding: 0 4rem 4rem 4rem;\n }\n"], ["\n position: relative;\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n padding: 0 2rem 4rem 2rem;\n\n ", " {\n position: relative;\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n padding: 0 4rem 4rem 4rem;\n }\n"])), (0, mixins_1.mediaQuery)("sm"));
|
|
40
|
+
exports.StyledModalSmallClose = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n width: 100%;\n display: flex;\n justify-content: flex-end;\n"], ["\n width: 100%;\n display: flex;\n justify-content: flex-end;\n"])));
|
|
41
|
+
exports.StyledModalSmallContentSubtitle = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n margin-top: 0.5rem;\n"], ["\n margin-top: 0.5rem;\n"])));
|
|
42
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
|
|
@@ -13,6 +13,7 @@ export function SERIF_4_5(props: any): any;
|
|
|
13
13
|
export function SERIF_5_6(props: any): any;
|
|
14
14
|
export function SERIF_6_7(props: any): any;
|
|
15
15
|
export function SERIF_7_8(props: any): any;
|
|
16
|
+
export function SERIF_8_9(props: any): any;
|
|
16
17
|
export function SERIF_9_10(props: any): any;
|
|
17
18
|
export function BLOCKQUOTE(props: any): any;
|
|
18
19
|
export function TypoClassesProvider(props: any): any;
|
|
@@ -14,7 +14,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
14
14
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
15
15
|
};
|
|
16
16
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
-
exports.TypoClassesProvider = exports.BLOCKQUOTE = exports.SERIF_9_10 = exports.SERIF_7_8 = exports.SERIF_6_7 = exports.SERIF_5_6 = exports.SERIF_4_5 = exports.SERIF_3_4 = exports.SERIF_3 = exports.SANS_7_8 = exports.SANS_5_6 = exports.SANS_4_5 = exports.SANS_4 = exports.SANS_3_4 = exports.SANS_3 = exports.SANS_2 = exports.SANS_0 = exports.LABEL = void 0;
|
|
17
|
+
exports.TypoClassesProvider = exports.BLOCKQUOTE = exports.SERIF_9_10 = exports.SERIF_8_9 = exports.SERIF_7_8 = exports.SERIF_6_7 = exports.SERIF_5_6 = exports.SERIF_4_5 = exports.SERIF_3_4 = exports.SERIF_3 = exports.SANS_7_8 = exports.SANS_5_6 = exports.SANS_4_5 = exports.SANS_4 = exports.SANS_3_4 = exports.SANS_3 = exports.SANS_2 = exports.SANS_0 = exports.LABEL = void 0;
|
|
18
18
|
var react_1 = __importDefault(require("react"));
|
|
19
19
|
var index_styled_1 = require("./index.styled");
|
|
20
20
|
var utilsOolib_1 = require("../../utilsOolib");
|
|
@@ -87,6 +87,8 @@ var SERIF_6_7 = function (props) { return (react_1.default.createElement(GenComp
|
|
|
87
87
|
exports.SERIF_6_7 = SERIF_6_7;
|
|
88
88
|
var SERIF_7_8 = function (props) { return (react_1.default.createElement(GenComp, { props: props, Comp: index_styled_1.SERIF_7_8_STYLED })); };
|
|
89
89
|
exports.SERIF_7_8 = SERIF_7_8;
|
|
90
|
+
var SERIF_8_9 = function (props) { return (react_1.default.createElement(GenComp, { props: props, Comp: index_styled_1.SERIF_8_9_STYLED })); };
|
|
91
|
+
exports.SERIF_8_9 = SERIF_8_9;
|
|
90
92
|
var SERIF_9_10 = function (props) { return (react_1.default.createElement(GenComp, { props: props, Comp: index_styled_1.SERIF_9_10_STYLED })); };
|
|
91
93
|
exports.SERIF_9_10 = SERIF_9_10;
|
|
92
94
|
var BLOCKQUOTE = function (props) { return (react_1.default.createElement(GenComp, { props: __assign(__assign({}, props), { italic: true }), Comp: index_styled_1.BLOCKQUOTE_STYLED })); };
|
|
@@ -12,6 +12,7 @@ export const SERIF_4_5_STYLED: any;
|
|
|
12
12
|
export const SERIF_5_6_STYLED: any;
|
|
13
13
|
export const SERIF_6_7_STYLED: any;
|
|
14
14
|
export const SERIF_7_8_STYLED: any;
|
|
15
|
+
export const SERIF_8_9_STYLED: any;
|
|
15
16
|
export const SERIF_9_10_STYLED: any;
|
|
16
17
|
export const LABEL_STYLED: any;
|
|
17
18
|
export const BLOCKQUOTE_STYLED: any;
|
|
@@ -7,7 +7,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
7
7
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
8
8
|
};
|
|
9
9
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
10
|
-
exports.TYPOCLASSES = exports.BLOCKQUOTE_STYLED = exports.LABEL_STYLED = exports.SERIF_9_10_STYLED = exports.SERIF_7_8_STYLED = exports.SERIF_6_7_STYLED = exports.SERIF_5_6_STYLED = exports.SERIF_4_5_STYLED = exports.SERIF_3_4_STYLED = exports.SERIF_3_STYLED = exports.SANS_7_8_STYLED = exports.SANS_5_6_STYLED = exports.SANS_4_5_STYLED = exports.SANS_4_STYLED = exports.SANS_3_4_STYLED = exports.SANS_3_STYLED = exports.SANS_2_STYLED = exports.SANS_0_STYLED = void 0;
|
|
10
|
+
exports.TYPOCLASSES = exports.BLOCKQUOTE_STYLED = exports.LABEL_STYLED = exports.SERIF_9_10_STYLED = exports.SERIF_8_9_STYLED = exports.SERIF_7_8_STYLED = exports.SERIF_6_7_STYLED = exports.SERIF_5_6_STYLED = exports.SERIF_4_5_STYLED = exports.SERIF_3_4_STYLED = exports.SERIF_3_STYLED = exports.SANS_7_8_STYLED = exports.SANS_5_6_STYLED = exports.SANS_4_5_STYLED = exports.SANS_4_STYLED = exports.SANS_3_4_STYLED = exports.SANS_3_STYLED = exports.SANS_2_STYLED = exports.SANS_0_STYLED = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
var index_1 = require("../../themes/index");
|
|
13
13
|
exports.SANS_0_STYLED = styled_components_1.default.h6(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), index_1.typo.SANS_0);
|
|
@@ -24,8 +24,9 @@ exports.SERIF_4_5_STYLED = styled_components_1.default.h2(templateObject_11 || (
|
|
|
24
24
|
exports.SERIF_5_6_STYLED = styled_components_1.default.h3(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), index_1.typo.SERIF_5_6);
|
|
25
25
|
exports.SERIF_6_7_STYLED = styled_components_1.default.h2(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), index_1.typo.SERIF_6_7);
|
|
26
26
|
exports.SERIF_7_8_STYLED = styled_components_1.default.h2(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), index_1.typo.SERIF_7_8);
|
|
27
|
-
exports.
|
|
28
|
-
exports.
|
|
29
|
-
exports.
|
|
30
|
-
exports.
|
|
31
|
-
|
|
27
|
+
exports.SERIF_8_9_STYLED = styled_components_1.default.h2(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), index_1.typo.SERIF_8_9);
|
|
28
|
+
exports.SERIF_9_10_STYLED = styled_components_1.default.h1(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), index_1.typo.SERIF_9_10);
|
|
29
|
+
exports.LABEL_STYLED = styled_components_1.default.h6(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), index_1.typo.LABEL);
|
|
30
|
+
exports.BLOCKQUOTE_STYLED = styled_components_1.default.h3(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), index_1.typo.BLOCKQUOTE);
|
|
31
|
+
exports.TYPOCLASSES = styled_components_1.default.div(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n .SANS_0 {\n ", "\n }\n\n .SANS_2 {\n ", "\n }\n\n .SANS_3 {\n ", "\n }\n\n .SANS_4 {\n ", "\n }\n\n .SERIF_3 {\n ", "\n }\n\n .SANS_4_5 {\n ", "\n }\n\n .SANS_5_6 {\n ", "\n }\n\n .SERIF_3_4 {\n ", "\n }\n\n .SERIF_4_5 {\n ", "\n }\n\n .SERIF_5_6 {\n ", "\n }\n\n .SERIF_6_7 {\n ", "\n }\n\n .SERIF_7_8 {\n ", "\n }\n\n .SERIF_8_9 {\n ", "\n }\n\n .SERIF_9_10 {\n ", "\n }\n\n .LABEL {\n ", "\n }\n\n .SANS_7_8 {\n ", "\n }\n\n .BLOCKQUOTE {\n ", "\n }\n\n .OKE-markdown {\n a,\n p {\n ", "\n }\n }\n"], ["\n .SANS_0 {\n ", "\n }\n\n .SANS_2 {\n ", "\n }\n\n .SANS_3 {\n ", "\n }\n\n .SANS_4 {\n ", "\n }\n\n .SERIF_3 {\n ", "\n }\n\n .SANS_4_5 {\n ", "\n }\n\n .SANS_5_6 {\n ", "\n }\n\n .SERIF_3_4 {\n ", "\n }\n\n .SERIF_4_5 {\n ", "\n }\n\n .SERIF_5_6 {\n ", "\n }\n\n .SERIF_6_7 {\n ", "\n }\n\n .SERIF_7_8 {\n ", "\n }\n\n .SERIF_8_9 {\n ", "\n }\n\n .SERIF_9_10 {\n ", "\n }\n\n .LABEL {\n ", "\n }\n\n .SANS_7_8 {\n ", "\n }\n\n .BLOCKQUOTE {\n ", "\n }\n\n .OKE-markdown {\n a,\n p {\n ", "\n }\n }\n"])), index_1.typo.SANS_0, index_1.typo.SANS_2, index_1.typo.SANS_3, index_1.typo.SANS_4, index_1.typo.SERIF_3, index_1.typo.SANS_4_5, index_1.typo.SANS_5_6, index_1.typo.SERIF_3_4, index_1.typo.SERIF_4_5, index_1.typo.SERIF_5_6, index_1.typo.SERIF_6_7, index_1.typo.SERIF_7_8, index_1.typo.SERIF_8_9, index_1.typo.SERIF_9_10, index_1.typo.LABEL, index_1.typo.SANS_7_8, index_1.typo.BLOCKQUOTE, index_1.typo.SANS_3);
|
|
32
|
+
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, templateObject_17, templateObject_18, templateObject_19;
|
package/dist/themes/typo.d.ts
CHANGED
|
@@ -14,6 +14,7 @@ export namespace typo {
|
|
|
14
14
|
export { SERIF_4_5 };
|
|
15
15
|
export { SERIF_6_7 };
|
|
16
16
|
export { SERIF_7_8 };
|
|
17
|
+
export { SERIF_8_9 };
|
|
17
18
|
export { SANS_4_5 };
|
|
18
19
|
export { SANS_7_8 };
|
|
19
20
|
export { SANS_5_6 };
|
|
@@ -34,6 +35,7 @@ declare const SERIF_9_10: any;
|
|
|
34
35
|
declare const SERIF_4_5: any;
|
|
35
36
|
declare const SERIF_6_7: any;
|
|
36
37
|
declare const SERIF_7_8: any;
|
|
38
|
+
declare const SERIF_8_9: any;
|
|
37
39
|
declare const SANS_4_5: any;
|
|
38
40
|
declare const SANS_7_8: any;
|
|
39
41
|
declare const SANS_5_6: any;
|
package/dist/themes/typo.js
CHANGED
|
@@ -237,7 +237,24 @@ var SERIF_7_8 = (0, styled_components_1.css)(templateObject_17 || (templateObjec
|
|
|
237
237
|
return "".concat(msW(8), "px");
|
|
238
238
|
}
|
|
239
239
|
});
|
|
240
|
-
var
|
|
240
|
+
var SERIF_8_9 = (0, styled_components_1.css)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n font-size: ", ";\n line-height: 1.6em;\n ", "\n ", "\n ", " {\n font-size: ", ";\n }\n"], ["\n font-size: ", ";\n line-height: 1.6em;\n ", "\n ", "\n ", " {\n font-size: ", ";\n }\n"])), function (_a) {
|
|
241
|
+
var theme = _a.theme;
|
|
242
|
+
switch (theme === null || theme === void 0 ? void 0 : theme.lang) {
|
|
243
|
+
case 'hi':
|
|
244
|
+
return "".concat(msW(9), "px");
|
|
245
|
+
default:
|
|
246
|
+
return "".concat(msW(8), "px");
|
|
247
|
+
}
|
|
248
|
+
}, fontCss, serif, (0, mixins_1.mediaQuery)('md'), function (_a) {
|
|
249
|
+
var theme = _a.theme;
|
|
250
|
+
switch (theme === null || theme === void 0 ? void 0 : theme.lang) {
|
|
251
|
+
case 'hi':
|
|
252
|
+
return "".concat(msW(10), "px");
|
|
253
|
+
default:
|
|
254
|
+
return "".concat(msW(9), "px");
|
|
255
|
+
}
|
|
256
|
+
});
|
|
257
|
+
var SERIF_9_10 = (0, styled_components_1.css)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n font-size: ", ";\n line-height: 1.5em;\n ", "\n ", "\n ", " {\n font-size: ", ";\n }\n"], ["\n font-size: ", ";\n line-height: 1.5em;\n ", "\n ", "\n ", " {\n font-size: ", ";\n }\n"])), function (_a) {
|
|
241
258
|
var theme = _a.theme;
|
|
242
259
|
switch (theme === null || theme === void 0 ? void 0 : theme.lang) {
|
|
243
260
|
case 'hi':
|
|
@@ -254,7 +271,7 @@ var SERIF_9_10 = (0, styled_components_1.css)(templateObject_18 || (templateObje
|
|
|
254
271
|
return "".concat(msW(10), "px");
|
|
255
272
|
}
|
|
256
273
|
});
|
|
257
|
-
var LABEL = (0, styled_components_1.css)(
|
|
274
|
+
var LABEL = (0, styled_components_1.css)(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n letter-spacing: ", "em;\n font-size: ", ";\n color: ", ";\n line-height: 1.6em;\n font-weight: 600;\n text-transform: uppercase;\n ", "\n"], ["\n letter-spacing: ", "em;\n font-size: ", ";\n color: ", ";\n line-height: 1.6em;\n font-weight: 600;\n text-transform: uppercase;\n ", "\n"])), function (_a) {
|
|
258
275
|
var theme = _a.theme;
|
|
259
276
|
return ((theme === null || theme === void 0 ? void 0 : theme.lang) === 'hi' ? 0 : 0.1);
|
|
260
277
|
}, function (_a) {
|
|
@@ -269,7 +286,7 @@ var LABEL = (0, styled_components_1.css)(templateObject_19 || (templateObject_19
|
|
|
269
286
|
var color = _a.color, invert = _a.invert;
|
|
270
287
|
return (invert ? white : color);
|
|
271
288
|
}, sansSerif);
|
|
272
|
-
var BLOCKQUOTE = (0, styled_components_1.css)(
|
|
289
|
+
var BLOCKQUOTE = (0, styled_components_1.css)(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n padding: 1.5rem;\n border-left: 4px solid\n ", ";\n ", ";\n font-style: italic;\n color: ", ";\n margin-inline-start: 25px;\n margin-inline-end: 25px;\n"], ["\n padding: 1.5rem;\n border-left: 4px solid\n ", ";\n ", ";\n font-style: italic;\n color: ", ";\n margin-inline-start: 25px;\n margin-inline-end: 25px;\n"])), function (_a) {
|
|
273
290
|
var invert = _a.invert, colors = _a.theme.colors;
|
|
274
291
|
return invert ? greyColor40 : (0, utilsOolib_1.getPrimaryColor100)(colors);
|
|
275
292
|
}, SERIF_4_5, greyColor80);
|
|
@@ -289,9 +306,10 @@ exports.typo = {
|
|
|
289
306
|
SERIF_4_5: SERIF_4_5,
|
|
290
307
|
SERIF_6_7: SERIF_6_7,
|
|
291
308
|
SERIF_7_8: SERIF_7_8,
|
|
309
|
+
SERIF_8_9: SERIF_8_9,
|
|
292
310
|
SANS_4_5: SANS_4_5,
|
|
293
311
|
SANS_7_8: SANS_7_8,
|
|
294
312
|
SANS_5_6: SANS_5_6,
|
|
295
313
|
BLOCKQUOTE: BLOCKQUOTE,
|
|
296
314
|
};
|
|
297
|
-
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, templateObject_17, templateObject_18, templateObject_19, templateObject_20;
|
|
315
|
+
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, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21;
|
|
@@ -1,10 +1,14 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
2
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
6
|
exports.DisplayIcon = void 0;
|
|
7
|
+
var react_1 = __importDefault(require("react"));
|
|
4
8
|
var icons_1 = require("../../icons");
|
|
5
9
|
var DisplayIcon = function (_a) {
|
|
6
10
|
var icon = _a.icon, size = _a.size, color = _a.color, _b = _a.weight, weight = _b === void 0 ? "bold" : _b;
|
|
7
11
|
var IconComp = icons_1.icons[icon];
|
|
8
|
-
return
|
|
12
|
+
return react_1.default.createElement(react_1.default.Fragment, null, IconComp && react_1.default.createElement(IconComp, { size: size, color: color, weight: weight }));
|
|
9
13
|
};
|
|
10
14
|
exports.DisplayIcon = DisplayIcon;
|
package/package.json
CHANGED
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
|
|
3
|
-
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
4
|
-
return cooked;
|
|
5
|
-
};
|
|
6
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
7
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
8
|
-
};
|
|
9
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
10
|
-
exports.StyledModalHeaderStyle2Title = exports.StyledModalHeaderStyle2Container = exports.ModalsClassProvider = exports.StyledModalLargeBody = exports.StyledModalLargeHeader = exports.StyledModalLargeContentWrapper = exports.StyledModalLargeBgColor = exports.StyledModalLargeBg = void 0;
|
|
11
|
-
var mixins_1 = require("../../themes/mixins");
|
|
12
|
-
var themes_1 = require("../../themes");
|
|
13
|
-
var framer_motion_1 = require("framer-motion");
|
|
14
|
-
var styled_components_1 = __importDefault(require("styled-components"));
|
|
15
|
-
var black_opacity80 = themes_1.colors.black_opacity80, white = themes_1.colors.white, greyColor5 = themes_1.colors.greyColor5, greyColor100_opacity70 = themes_1.colors.greyColor100_opacity70, greyColor15 = themes_1.colors.greyColor15;
|
|
16
|
-
exports.StyledModalLargeBg = (0, styled_components_1.default)(framer_motion_1.motion.div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 100vw;\n height: 100%;\n position: fixed;\n left: 0;\n bottom: 0;\n z-index: 99999999;\n overflow-y: auto;\n overflow-x: hidden;\n ", " {\n display: flex;\n justify-content: center;\n align-items: center;\n }\n"], ["\n width: 100vw;\n height: 100%;\n position: fixed;\n left: 0;\n bottom: 0;\n z-index: 99999999;\n overflow-y: auto;\n overflow-x: hidden;\n ", " {\n display: flex;\n justify-content: center;\n align-items: center;\n }\n"])), (0, mixins_1.mediaQuery)("sm"));
|
|
17
|
-
exports.StyledModalLargeBgColor = (0, styled_components_1.default)(framer_motion_1.motion.div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background: ", ";\n position: absolute;\n left: 0;\n top: 0;\n width: 100vw;\n height: 100vh;\n"], ["\n background: ", ";\n position: absolute;\n left: 0;\n top: 0;\n width: 100vw;\n height: 100vh;\n"])), black_opacity80);
|
|
18
|
-
exports.StyledModalLargeContentWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n width: 100%;\n margin-top: 4rem;\n min-height: calc(100vh - 4rem);\n background-color: ", ";\n\n ", " {\n margin-top: 0;\n border: 2px solid ", ";\n width: ", ";\n min-height: 50vh;\n max-height: 90vh;\n position: relative;\n overflow: auto;\n border-radius: 0.2rem;\n margin: 0 auto;\n }\n"], ["\n width: 100%;\n margin-top: 4rem;\n min-height: calc(100vh - 4rem);\n background-color: ", ";\n\n ", " {\n margin-top: 0;\n border: 2px solid ", ";\n width: ", ";\n min-height: 50vh;\n max-height: 90vh;\n position: relative;\n overflow: auto;\n border-radius: 0.2rem;\n margin: 0 auto;\n }\n"])), white, (0, mixins_1.mediaQuery)("sm"), white, function (_a) {
|
|
19
|
-
var desktopWidth = _a.desktopWidth;
|
|
20
|
-
return desktopWidth;
|
|
21
|
-
});
|
|
22
|
-
exports.StyledModalLargeHeader = styled_components_1.default.header(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n background-color: ", ";\n /* width: 100%; */\n height: 4rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 0 2rem;\n position: sticky;\n top: 0;\n z-index: 100;\n"], ["\n background-color: ", ";\n /* width: 100%; */\n height: 4rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 0 2rem;\n position: sticky;\n top: 0;\n z-index: 100;\n"])), greyColor5);
|
|
23
|
-
exports.StyledModalLargeBody = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
24
|
-
exports.ModalsClassProvider = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n .Modals {\n width: 100%;\n height: 100%;\n position: fixed;\n top: 0;\n left: 0;\n background: ", ";\n z-index: 99999999;\n }\n\n .ModalSmall {\n .ModalSmall__contentWrapper {\n width: 100%;\n position: absolute;\n bottom: 0;\n background-color: ", ";\n .ModalSmall__close {\n width: 100%;\n display: flex;\n justify-content: flex-end;\n }\n .ModalSmall__content {\n position: relative;\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n padding: 0 2rem 4rem 2rem;\n .ModalSmall__content--subTitle {\n margin-top: 0.5rem;\n }\n }\n }\n }\n\n ", " {\n .ModalSmall {\n display: flex;\n justify-content: center;\n align-items: center;\n .ModalSmall__contentWrapper {\n border: 2px solid ", ";\n width: 50vw;\n position: relative;\n border-radius: 0.2rem;\n .ModalSmall__content {\n position: relative;\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n padding: 0 4rem 4rem 4rem;\n }\n }\n }\n }\n"], ["\n .Modals {\n width: 100%;\n height: 100%;\n position: fixed;\n top: 0;\n left: 0;\n background: ", ";\n z-index: 99999999;\n }\n\n .ModalSmall {\n .ModalSmall__contentWrapper {\n width: 100%;\n position: absolute;\n bottom: 0;\n background-color: ", ";\n .ModalSmall__close {\n width: 100%;\n display: flex;\n justify-content: flex-end;\n }\n .ModalSmall__content {\n position: relative;\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n padding: 0 2rem 4rem 2rem;\n .ModalSmall__content--subTitle {\n margin-top: 0.5rem;\n }\n }\n }\n }\n\n ", " {\n .ModalSmall {\n display: flex;\n justify-content: center;\n align-items: center;\n .ModalSmall__contentWrapper {\n border: 2px solid ", ";\n width: 50vw;\n position: relative;\n border-radius: 0.2rem;\n .ModalSmall__content {\n position: relative;\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n padding: 0 4rem 4rem 4rem;\n }\n }\n }\n }\n"])), greyColor100_opacity70, white, (0, mixins_1.mediaQuery)("sm"), white);
|
|
25
|
-
exports.StyledModalHeaderStyle2Container = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\ndisplay: flex;\nborder-bottom: 1px solid ", ";\npadding: 1rem 2rem;\nposition: relative;\n\n"], ["\ndisplay: flex;\nborder-bottom: 1px solid ", ";\npadding: 1rem 2rem;\nposition: relative;\n\n"])), greyColor15);
|
|
26
|
-
exports.StyledModalHeaderStyle2Title = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\npadding-top:1rem;\ndisplay: flex;\nflex-grow: 1;\ngap: 1.5rem;\njustify-content: space-between;\nalign-items: center;\n"], ["\npadding-top:1rem;\ndisplay: flex;\nflex-grow: 1;\ngap: 1.5rem;\njustify-content: space-between;\nalign-items: center;\n"])));
|
|
27
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
|