oolib 2.27.0 → 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.
Files changed (10) hide show
  1. package/dist/components/Hints/index.js +3 -3
  2. package/dist/components/Modals/ModalLarge/index.js +33 -30
  3. package/dist/components/Modals/{index.styled.d.ts → ModalLarge/styled.d.ts} +0 -1
  4. package/dist/components/Modals/ModalLarge/styled.js +26 -0
  5. package/dist/components/Modals/ModalSmall/index.js +27 -33
  6. package/dist/components/Modals/ModalSmall/styled.d.ts +5 -0
  7. package/dist/components/Modals/ModalSmall/styled.js +42 -0
  8. package/dist/utils/comps/index.js +5 -1
  9. package/package.json +1 -1
  10. package/dist/components/Modals/index.styled.js +0 -27
package/dist/components/Hints/index.js CHANGED
@@ -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 index_styled_1 = require("../Modals/index.styled");
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(index_styled_1.StyledModalHeaderStyle2Container, null,
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(index_styled_1.StyledModalHeaderStyle2Title, null,
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" }))),
package/dist/components/Modals/ModalLarge/index.js CHANGED
@@ -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 index_styled_1 = require("../index.styled");
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 ? 'style1' : _c, subtitle = _a.subtitle;
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(index_styled_1.StyledModalLargeContentWrapper, { desktopWidth: desktopWidth },
81
+ var genModalContents = function () { return (react_1.default.createElement(styled_1.StyledModalLargeContentWrapper, { desktopWidth: desktopWidth },
80
82
  genHeader(),
81
- react_1.default.createElement(index_styled_1.StyledModalLargeBody, null, children))); };
82
- return (react_1.default.createElement(index_styled_1.StyledModalLargeBg, null,
83
- react_1.default.createElement(index_styled_1.StyledModalLargeBgColor, { initial: { opacity: initAnimPos.opacity }, animate: { opacity: animPos.opacity }, transition: {
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
  } }),
package/dist/components/Modals/{index.styled.d.ts → ModalLarge/styled.d.ts} RENAMED
@@ -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;
package/dist/components/Modals/ModalLarge/styled.js ADDED
@@ -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;
package/dist/components/Modals/ModalSmall/index.js CHANGED
@@ -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 index_styled_1 = require("../index.styled");
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("div", { className: "ModalSmall__close" },
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("div", { className: "ModalSmall__content" },
48
- title && (react_1.default.createElement("div", { className: "ModalSmall__content--title" },
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("div", { className: "ModalSmall__content--subTitle" },
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(index_styled_1.ModalsClassProvider, null,
54
- react_1.default.createElement(framer_motion_1.motion.div, { className: "ModalSmall Modals", initial: { opacity: initAnimPos.opacity }, animate: { opacity: animPos.opacity }, transition: { type: "tween", ease: "easeOut" } }, screenWidth < (0, mixins_1.getBreakPoint)("sm") ? (react_1.default.createElement(framer_motion_1.motion.div
55
- // style={{ position: "relative" }}
56
- , {
57
- // style={{ position: "relative" }}
58
- className: "ModalSmall__contentWrapper", initial: initAnimPos, animate: animPos, transition: {
59
- type: "tween",
60
- ease: "easeOut",
61
- }, onAnimationComplete: function () {
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
- // style={{ width: "100%" }}
68
- className: "ModalSmall__contentWrapper", initial: {
69
- opacity: initAnimPos.opacity,
70
- marginTop: initAnimPos.marginTop,
71
- }, animate: {
72
- opacity: animPos.opacity,
73
- marginTop: animPos.marginTop,
74
- }, transition: {
75
- type: "tween",
76
- ease: "easeOut",
77
- }, onAnimationComplete: function () {
78
- if (animPos.marginTop === initAnimPos.marginTop)
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;
package/dist/components/Modals/ModalSmall/styled.d.ts ADDED
@@ -0,0 +1,5 @@
1
+ export const StyledModalSmall: any;
2
+ export const StyledModalSmallContentWrapper: any;
3
+ export const StyledModalSmallContent: any;
4
+ export const StyledModalSmallClose: any;
5
+ export const StyledModalSmallContentSubtitle: any;
package/dist/components/Modals/ModalSmall/styled.js ADDED
@@ -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;
package/dist/utils/comps/index.js CHANGED
@@ -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 React.createElement(React.Fragment, null, IconComp && React.createElement(IconComp, { size: size, color: color, weight: weight }));
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,6 +1,6 @@
1
1
  {
2
2
  "name": "oolib",
3
- "version": "2.27.0",
3
+ "version": "2.27.1",
4
4
  "description": " OKE Component Library",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
package/dist/components/Modals/index.styled.js DELETED
@@ -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;