oolib 2.26.4 → 2.26.6

package/dist/components/Hints/index.js

@@ -18,22 +18,22 @@ var contextApi_1 = require("../Hints/contextApi");
 var colors_1 = require("../../themes/colors");
 var comps_1 = require("../../utils/comps");
 var Buttons_1 = require("../Buttons");
-var Modal_1 = require("../Modal");
+var ModalLarge_1 = require("../Modals/ModalLarge");
 var mixins_1 = require("../../themes/mixins");
 var useScreenWidth_1 = require("../../utils/customHooks/useScreenWidth");
-var index_styled_1 = require("../Modal/index.styled");
-var greyColor80 = colors_1.colors.greyColor80, greyColor15 = colors_1.colors.greyColor15;
+var index_styled_1 = require("../Modals/index.styled");
+var greyColor80 = colors_1.colors.greyColor80, greyColor15 = colors_1.colors.greyColor15, greyColor100 = colors_1.colors.greyColor100;
 var TriangleIconComp = function (props) { return (React.createElement("svg", __assign({ width: 20, height: 13, fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
     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 }))); };
 var getPositionStyles = function (position) {
     var styles = {
         left: {
             lightBox: { top: "-2rem", left: "-31.5rem" },
-            arrow: { top: ".7rem", left: "-2rem", transform: "rotate(90deg)" },
+            arrow: { top: ".7rem", left: "-2rem", transform: "rotate(45deg)" },
         },
         bottom: {
             lightBox: { top: "4.5rem", left: "-2rem" },
-            arrow: { top: "3.5rem", left: "6rem" },
+            arrow: { top: "3.9rem", left: "6rem", transform: "rotate(-45deg)" },
         },
     };
     return styles[position];
@@ -66,11 +66,10 @@ var Hints = function (_a) {
         React.createElement(styled_1.StyledHints, { onClick: function () { return setActive(id); } },
             React.createElement(Buttons_1.ButtonGhost, { S: true, active: active === id ? true : false, icon: "LightbulbFilament" }, "Hints")),
         active === id ? (isDesktop ? (React.createElement("div", null,
-            React.createElement(styled_1.StyledTriangle, { style: styles.arrow, id: id },
-                React.createElement(TriangleIconComp, null)),
+            React.createElement(styled_1.StyledTriangle, { style: styles.arrow, id: id }),
             React.createElement(styled_1.StyledLightbox, { style: styles.lightBox, ref: lightBoxRef, id: id },
                 React.createElement(index_styled_1.StyledModalHeaderStyle2Container, null,
-                    React.createElement("div", { style: { position: "absolute", top: "-2.5rem" } },
+                    React.createElement("div", { style: { position: "absolute", top: "-2.5rem", fontSize: 0 } },
                         React.createElement(comps_1.DisplayIcon, { icon: "ModalBulbIcon" })),
                     React.createElement(index_styled_1.StyledModalHeaderStyle2Title, null,
                         React.createElement(Typo_1.SANS_4_5, { semibold: true, capitalize: true }, title || "title"),
@@ -78,9 +77,13 @@ var Hints = function (_a) {
                         React.createElement(Buttons_1.ButtonGhost, { onClick: function () { return setActive(""); }, icon: "X" }))),
                 React.createElement(styled_1.StyledLightBoxContent, null,
                     React.createElement(styled_1.StyledLightBoxList, null, hints.map(function (d) { return (React.createElement("li", null,
-                        React.createElement(Typo_1.SANS_3, null, d))); })))))) : (React.createElement(Modal_1.ModalLarge, { isStorybook: true, headerStyle: "style2", id: "modal", title: "title", onClose: function () { return setActive(""); } },
+                        React.createElement("div", { style: { marginTop: ".5rem" } },
+                            React.createElement(comps_1.DisplayIcon, { color: greyColor100, weight: "fill", icon: "Circle", size: 8 })),
+                        React.createElement(Typo_1.SANS_3, null, d))); })))))) : (React.createElement(ModalLarge_1.ModalLarge, { isStorybook: true, headerStyle: "style2", id: "modal", title: "title", onClose: function () { return setActive(""); } },
             React.createElement("div", { style: { padding: ".5rem 2rem" } },
                 React.createElement(styled_1.StyledLightBoxList, null, hints.map(function (d) { return (React.createElement("li", null,
+                    React.createElement("div", { style: { marginTop: ".5rem" } },
+                        React.createElement(comps_1.DisplayIcon, { color: greyColor100, weight: "fill", icon: "Circle", size: 8 })),
                     React.createElement(Typo_1.SANS_3, null, d))); })))))) : null));
 };
 exports.default = Hints;

package/dist/components/Hints/styled.js

@@ -33,8 +33,8 @@ exports.StyledLightbox = styled_components_1.default.div(templateObject_2 || (te
 });
 exports.StyledLightBoxHeader = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: 4rem;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  border-radius: 2px;\n  gap: 1rem;\n\n  padding: 1rem 1.5rem;\n"], ["\n  height: 4rem;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  border-radius: 2px;\n  gap: 1rem;\n\n  padding: 1rem 1.5rem;\n"])));
 exports.StyledLightBoxContent = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  padding: 0.5rem 2rem 2rem 1.5rem;\n  overflow-y: auto;\n"], ["\n  padding: 0.5rem 2rem 2rem 1.5rem;\n  overflow-y: auto;\n"])));
-exports.StyledLightBoxList = styled_components_1.default.ul(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  padding: 0;\n  li {\n    list-style-type: none;\n    padding: 0.5rem 0;\n    display: flex;\n    gap: 1rem;\n    /* align-items: center; */\n    ::before {\n      content: \"\";\n      margin-top: 0.5rem;\n      flex: 0 0 .5rem;\n      width: .5rem;\n      height: .5rem;\n      background-color: ", ";\n      border-radius: 50%;\n      flex-shrink: 0;\n    }\n  }\n"], ["\n  padding: 0;\n  li {\n    list-style-type: none;\n    padding: 0.5rem 0;\n    display: flex;\n    gap: 1rem;\n    /* align-items: center; */\n    ::before {\n      content: \"\";\n      margin-top: 0.5rem;\n      flex: 0 0 .5rem;\n      width: .5rem;\n      height: .5rem;\n      background-color: ", ";\n      border-radius: 50%;\n      flex-shrink: 0;\n    }\n  }\n"])), greyColor100);
-exports.StyledTriangle = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  position: absolute;\n\n  top: ", ";\n  left: ", ";\n  bottom: ", ";\n  right: ", ";\n  transform: ", ";\n\n  /* position:absolute; */\n  /* top:.7rem; */\n  /* left:-2rem; */\n  /* transform :rotate(90deg); */\n"], ["\n  position: absolute;\n\n  top: ", ";\n  left: ", ";\n  bottom: ", ";\n  right: ", ";\n  transform: ", ";\n\n  /* position:absolute; */\n  /* top:.7rem; */\n  /* left:-2rem; */\n  /* transform :rotate(90deg); */\n"])), function (_a) {
+exports.StyledLightBoxList = styled_components_1.default.ul(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  padding: 0;\n  li {\n    list-style-type: none;\n    padding: 0.5rem 0;\n    display: flex;\n    gap: 1rem;\n    /* align-items: center; */\n    /* ::before {\n      content: \"\";\n      margin-top: 0.5rem;\n      flex: 0 0 .5rem;\n      width: .5rem;\n      padding: 0%.5r;\n      height: .5rem;\n      background-color: ", ";\n      border-radius: 50%;\n      flex-shrink: 0;\n    } */\n  }\n"], ["\n  padding: 0;\n  li {\n    list-style-type: none;\n    padding: 0.5rem 0;\n    display: flex;\n    gap: 1rem;\n    /* align-items: center; */\n    /* ::before {\n      content: \"\";\n      margin-top: 0.5rem;\n      flex: 0 0 .5rem;\n      width: .5rem;\n      padding: 0%.5r;\n      height: .5rem;\n      background-color: ", ";\n      border-radius: 50%;\n      flex-shrink: 0;\n    } */\n  }\n"])), greyColor100);
+exports.StyledTriangle = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  position: absolute;\n\n  width:10px;\n  height:10px;\n  border-style:solid;\n  \n  border-width:1px;\n  border-color: ", " ", " transparent transparent;\n  /* transform:rotate(-45deg); */\n  z-index: 3;\n  background-color: white;\n\n  top: ", ";\n  left: ", ";\n  bottom: ", ";\n  right: ", ";\n  transform: ", ";\n\n  /* position:absolute; */\n  /* top:.7rem; */\n  /* left:-2rem; */\n  /* transform :rotate(90deg); */\n"], ["\n  position: absolute;\n\n  width:10px;\n  height:10px;\n  border-style:solid;\n  \n  border-width:1px;\n  border-color: ", " ", " transparent transparent;\n  /* transform:rotate(-45deg); */\n  z-index: 3;\n  background-color: white;\n\n  top: ", ";\n  left: ", ";\n  bottom: ", ";\n  right: ", ";\n  transform: ", ";\n\n  /* position:absolute; */\n  /* top:.7rem; */\n  /* left:-2rem; */\n  /* transform :rotate(90deg); */\n"])), greyColor15, greyColor15, function (_a) {
     var top = _a.style.top;
     return top;
 }, function (_a) {

package/dist/components/Modals/ModalLarge/index.d.ts

@@ -0,0 +1,9 @@
+export function ModalLarge({ title, onClose, children, linkTo, desktopWidth, headerStyle, subtitle, }: {
+    title: any;
+    onClose: any;
+    children: any;
+    linkTo: any;
+    desktopWidth?: string;
+    headerStyle?: string;
+    subtitle: any;
+}): any;

package/dist/components/Modals/ModalLarge/index.js

@@ -0,0 +1,97 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ModalLarge = void 0;
+var framer_motion_1 = require("framer-motion");
+var react_1 = __importStar(require("react"));
+var mixins_1 = require("../../../themes/mixins");
+var Buttons_1 = require("../../Buttons");
+var OKELink_1 = require("../../OKELink");
+var Typo_1 = require("../../Typo");
+var themes_1 = require("../../../themes");
+var comps_1 = require("../../../utils/comps");
+var useScreenWidth_1 = require("../../../utils/customHooks/useScreenWidth");
+var index_styled_1 = require("../index.styled");
+var greyColor80 = themes_1.colors.greyColor80;
+var ModalLarge = function (_a) {
+    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;
+    var screenWidth = (0, useScreenWidth_1.useScreenWidth)();
+    var handleClose = function () { return onClose(); };
+    var initAnimPos = { marginTop: "100vh", opacity: 0 };
+    var endAnimPos = { marginTop: 0, opacity: 1 };
+    var _d = (0, react_1.useState)(endAnimPos), animPos = _d[0], setAnimPos = _d[1];
+    var ModalHeaderStyle1 = function () {
+        return (react_1.default.createElement(index_styled_1.StyledModalLargeHeader, null,
+            react_1.default.createElement("div", { style: {
+                    display: "flex",
+                    gap: "2.5rem",
+                    alignItems: "center",
+                } },
+                !linkTo && title && (react_1.default.createElement("div", { className: "ModalLarge__header--title" },
+                    react_1.default.createElement(Typo_1.SANS_3_4, { semibold: true }, title))),
+                linkTo && (react_1.default.createElement(Typo_1.SANS_4, { semibold: true },
+                    react_1.default.createElement(OKELink_1.OKELink, { iconAfter: "ArrowLineUpRight", linkType: "action", onClick: function () { return window.open(linkTo); }, iconSize: 24, color: "black" }, title)))),
+            onClose && (react_1.default.createElement(Buttons_1.ButtonGhost, { icon: "X", onClick: function () { return setAnimPos(initAnimPos); } }))));
+    };
+    var ModalHeaderStyle2 = function () {
+        return (react_1.default.createElement(index_styled_1.StyledModalHeaderStyle2Container, null,
+            react_1.default.createElement("div", { style: { position: "absolute", top: "-2.5rem" } },
+                react_1.default.createElement(comps_1.DisplayIcon, { size: 20, icon: "ModalBulbIcon" })),
+            react_1.default.createElement(index_styled_1.StyledModalHeaderStyle2Title, null,
+                react_1.default.createElement(Typo_1.SANS_4_5, { semibold: true, capitalize: true }, title || "title"),
+                react_1.default.createElement(Typo_1.SANS_3_4, { semibold: true, capitalize: true, style: { flexGrow: "1" }, color: greyColor80 }, subtitle || "subtitle"),
+                onClose && (react_1.default.createElement(Buttons_1.ButtonGhost, { icon: "X", onClick: function () { return setAnimPos(initAnimPos); } })))));
+    };
+    var genHeader = function () {
+        var headerStyles = {
+            style1: ModalHeaderStyle1,
+            style2: ModalHeaderStyle2,
+        };
+        var Comp = headerStyles[headerStyle];
+        return react_1.default.createElement(Comp, { onClose: onClose });
+    };
+    var genModalContents = function () { return (react_1.default.createElement(index_styled_1.StyledModalLargeContentWrapper, { desktopWidth: desktopWidth },
+        genHeader(),
+        react_1.default.createElement(index_styled_1.StyledModalLargeBody, null, children))); };
+    return (react_1.default.createElement(index_styled_1.StyledModalLargeBg, null,
+        react_1.default.createElement(index_styled_1.StyledModalLargeBgColor, { 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, { style: { position: "relative" }, initial: { marginTop: initAnimPos.marginTop }, animate: { marginTop: animPos.marginTop }, transition: {
+                type: "tween",
+                ease: "easeOut",
+            }, onAnimationComplete: function () {
+                if (animPos.marginTop === initAnimPos.marginTop)
+                    handleClose();
+            } }, genModalContents())) : (react_1.default.createElement(framer_motion_1.motion.div, { style: { width: "100%" }, initial: initAnimPos, animate: animPos, transition: {
+                type: "tween",
+                ease: "easeOut",
+            }, onAnimationComplete: function () {
+                if (animPos.marginTop === initAnimPos.marginTop)
+                    handleClose();
+            } }, genModalContents()))));
+};
+exports.ModalLarge = ModalLarge;

package/dist/components/Modals/ModalSmall/index.d.ts

@@ -0,0 +1,6 @@
+export function ModalSmall({ title, subTitle, onClose, children }: {
+    title: any;
+    subTitle: any;
+    onClose: any;
+    children: any;
+}): any;

package/dist/components/Modals/ModalSmall/index.js

@@ -0,0 +1,78 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ModalSmall = void 0;
+var framer_motion_1 = require("framer-motion");
+var react_1 = __importStar(require("react"));
+var mixins_1 = require("../../../themes/mixins");
+var useScreenWidth_1 = require("../../../utils/customHooks/useScreenWidth");
+var Buttons_1 = require("../../Buttons");
+var Typo_1 = require("../../Typo");
+var index_styled_1 = require("../index.styled");
+var ModalSmall = function (_a) {
+    var title = _a.title, subTitle = _a.subTitle, onClose = _a.onClose, children = _a.children;
+    var screenWidth = (0, useScreenWidth_1.useScreenWidth)();
+    var initAnimPos = { marginTop: "100vh", opacity: 0, translateY: '100%' };
+    var endAnimPos = { marginTop: 0, opacity: 1, translateY: 0 };
+    var _b = (0, react_1.useState)(endAnimPos), animPos = _b[0], setAnimPos = _b[1];
+    var genModalContents = function () { return (react_1.default.createElement(react_1.Fragment, null,
+        onClose && (react_1.default.createElement("div", { className: "ModalSmall__close" },
+            react_1.default.createElement(Buttons_1.ButtonPrimary, { S: true, icon: "X", onClick: function () { return setAnimPos(initAnimPos); } }))),
+        react_1.default.createElement("div", { className: "ModalSmall__content" },
+            title && (react_1.default.createElement("div", { className: "ModalSmall__content--title" },
+                react_1.default.createElement(Typo_1.SERIF_5_6, null, title))),
+            subTitle && (react_1.default.createElement("div", { className: "ModalSmall__content--subTitle" },
+                react_1.default.createElement(Typo_1.SANS_4, null, subTitle))),
+            react_1.default.createElement("div", { style: { marginTop: (title || subTitle) && "2rem" } }, children ? children : null)))); };
+    return (react_1.default.createElement(index_styled_1.ModalsClassProvider, null,
+        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
+        // style={{ position: "relative" }}
+        , { 
+            // style={{ position: "relative" }}
+            className: "ModalSmall__contentWrapper", initial: initAnimPos, animate: animPos, transition: {
+                type: "tween",
+                ease: "easeOut",
+            }, onAnimationComplete: function () {
+                if (animPos.marginTop === initAnimPos.marginTop)
+                    onClose();
+            } }, genModalContents())) : (react_1.default.createElement(framer_motion_1.motion.div
+        // style={{ width: "100%" }}
+        , { 
+            // style={{ width: "100%" }}
+            className: "ModalSmall__contentWrapper", initial: {
+                opacity: initAnimPos.opacity,
+                marginTop: initAnimPos.marginTop
+            }, animate: {
+                opacity: animPos.opacity,
+                marginTop: animPos.marginTop
+            }, transition: {
+                type: "tween",
+                ease: "easeOut",
+            }, onAnimationComplete: function () {
+                if (animPos.marginTop === initAnimPos.marginTop)
+                    onClose();
+            } }, genModalContents())))));
+};
+exports.ModalSmall = ModalSmall;

package/dist/components/Modals/derivedComps/ModalConfirm/index.d.ts

@@ -0,0 +1,9 @@
+export function ModalConfirm({ title, subTitle, onClose, onCloseText, children, onConfirm, onConfirmText, }: {
+    title: any;
+    subTitle: any;
+    onClose: any;
+    onCloseText?: string;
+    children: any;
+    onConfirm: any;
+    onConfirmText?: string;
+}): any;

package/dist/components/Modals/derivedComps/ModalConfirm/index.js

@@ -0,0 +1,35 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ModalConfirm = void 0;
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var Buttons_1 = require("../../../Buttons");
+var ModalSmall_1 = require("../../ModalSmall");
+var StyledFlexWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  gap: 1rem;\n  align-items: center;\n"], ["\n  display: flex;\n  gap: 1rem;\n  align-items: center;\n"])));
+var ModalConfirm = function (_a) {
+    var title = _a.title, subTitle = _a.subTitle, onClose = _a.onClose, _b = _a.onCloseText, onCloseText = _b === void 0 ? "Cancel" : _b, children = _a.children, onConfirm = _a.onConfirm, _c = _a.onConfirmText, onConfirmText = _c === void 0 ? "Delete" : _c;
+    return (react_1.default.createElement(ModalSmall_1.ModalSmall, __assign({}, { title: title, subTitle: subTitle, onClose: onClose, children: children }),
+        react_1.default.createElement(StyledFlexWrapper, null,
+            react_1.default.createElement(Buttons_1.ButtonPrimary, { onClick: onConfirm }, onConfirmText),
+            react_1.default.createElement(Buttons_1.ButtonSecondary, { onClick: onClose }, onCloseText))));
+};
+exports.ModalConfirm = ModalConfirm;
+var templateObject_1;

package/dist/components/{Modal → Modals}/index.styled.js

@@ -15,7 +15,7 @@ var styled_components_1 = __importDefault(require("styled-components"));
 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;
 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"));
 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);
-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) {
+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) {
     var desktopWidth = _a.desktopWidth;
     return desktopWidth;
 });

package/dist/index.d.ts

@@ -24,4 +24,7 @@ export { ActionMenu } from "./components/ActionMenu";
 export { PercentCompletedPie } from "./components/PercentCompletedPie";
 export { Divider } from "./components/Divider";
 export { SkeletonLoader } from "./components/LoadersAndProgress/SkeletonLoader";
+export { ModalConfirm } from "./components/Modals/derivedComps/ModalConfirm";
+export { ModalLarge } from "./components/Modals/ModalLarge";
+export { ModalSmall } from "./components/Modals/ModalSmall";
 export { LoaderCircle, ProgressBar, LoaderCircle as Loader } from "./components/LoadersAndProgress";

package/dist/index.js

@@ -14,7 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SkeletonLoader = exports.Divider = exports.PercentCompletedPie = exports.ActionMenu = exports.Tooltip = exports.OKELink = exports.UserRoleBadge = exports.Section = exports.Loader = exports.ProgressBar = exports.LoaderCircle = exports.icons = exports.colors = exports.GlobalStyles = void 0;
+exports.ModalSmall = exports.ModalLarge = exports.ModalConfirm = exports.SkeletonLoader = exports.Divider = exports.PercentCompletedPie = exports.ActionMenu = exports.Tooltip = exports.OKELink = exports.UserRoleBadge = exports.Section = exports.Loader = exports.ProgressBar = exports.LoaderCircle = exports.icons = exports.colors = exports.GlobalStyles = void 0;
 //css and styling related ( styled-components )
 var globalStyles_1 = require("./globalStyles");
 Object.defineProperty(exports, "GlobalStyles", { enumerable: true, get: function () { return globalStyles_1.GlobalStyles; } });
@@ -59,5 +59,11 @@ var Divider_1 = require("./components/Divider");
 Object.defineProperty(exports, "Divider", { enumerable: true, get: function () { return Divider_1.Divider; } });
 var SkeletonLoader_1 = require("./components/LoadersAndProgress/SkeletonLoader");
 Object.defineProperty(exports, "SkeletonLoader", { enumerable: true, get: function () { return SkeletonLoader_1.SkeletonLoader; } });
+var ModalConfirm_1 = require("./components/Modals/derivedComps/ModalConfirm");
+Object.defineProperty(exports, "ModalConfirm", { enumerable: true, get: function () { return ModalConfirm_1.ModalConfirm; } });
+var ModalLarge_1 = require("./components/Modals/ModalLarge");
+Object.defineProperty(exports, "ModalLarge", { enumerable: true, get: function () { return ModalLarge_1.ModalLarge; } });
+var ModalSmall_1 = require("./components/Modals/ModalSmall");
+Object.defineProperty(exports, "ModalSmall", { enumerable: true, get: function () { return ModalSmall_1.ModalSmall; } });
 //utility functions
 __exportStar(require("./utils/_EXPORTS"), exports);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oolib",
-  "version": "2.26.4",
+  "version": "2.26.6",
   "description": " OKE Component Library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -53,8 +53,7 @@
     "react-dom": "^17.0.2",
     "react-router-dom": "^5.1.2",
     "styled-components": "^5.3.3",
-    "framer-motion": "^4.1.17",
-    "gsap": "^3.7.1"
+    "framer-motion": "^4.1.17"
   },
   "config": {
     "commitizen": {

package/dist/components/Modal/index.d.ts

@@ -1,24 +0,0 @@
-export function ModalSmall({ title, subTitle, onClose, children }: {
-    title: any;
-    subTitle: any;
-    onClose: any;
-    children: any;
-}): any;
-export function ModalLarge({ title, onClose, children, linkTo, desktopWidth, headerStyle, subtitle, }: {
-    title: any;
-    onClose: any;
-    children: any;
-    linkTo: any;
-    desktopWidth?: string;
-    headerStyle: any;
-    subtitle: any;
-}): any;
-export function ModalConfirm({ title, subTitle, onClose, onCloseText, children, onConfirm, onConfirmText, }: {
-    title: any;
-    subTitle: any;
-    onClose: any;
-    onCloseText?: string;
-    children: any;
-    onConfirm: any;
-    onConfirmText?: string;
-}): any;

package/dist/components/Modal/index.js

@@ -1,176 +0,0 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ModalConfirm = exports.ModalLarge = exports.ModalSmall = void 0;
-var framer_motion_1 = require("framer-motion");
-var gsap_1 = require("gsap");
-var react_1 = __importStar(require("react"));
-var mixins_1 = require("../../themes/mixins");
-var Buttons_1 = require("../Buttons");
-var Typo_1 = require("../Typo");
-var OKELink_1 = require("../OKELink");
-var index_styled_1 = require("./index.styled");
-var comps_1 = require("../../utils/comps");
-var themes_1 = require("../../themes");
-var useScreenWidth_1 = require("../../utils/customHooks/useScreenWidth");
-var greyColor80 = themes_1.colors.greyColor80;
-var WrapperButtons = function (_a) {
-    var styleProp = _a.style, children = _a.children, className = _a.className;
-    var style = __assign({ display: "flex", columnGap: "1rem", alignItems: "center" }, styleProp);
-    return (react_1.default.createElement("div", { className: "Wrapper--buttons ".concat(className || ""), style: style }, children));
-};
-var modalMountingAnimation = function (_a) {
-    var modalOverlay = _a.modalOverlay, modalContentWrapper = _a.modalContentWrapper;
-    gsap_1.gsap.fromTo(modalOverlay.current, { opacity: 0 }, { opacity: 1, duration: 0, ease: gsap_1.Power3.easeIn });
-    gsap_1.gsap.fromTo(modalContentWrapper.current, { y: "100%" }, { y: 0, duration: 0.3, ease: gsap_1.Power3.easeIn });
-};
-var modalUnmountingAnimation = function (_a) {
-    var modalOverlay = _a.modalOverlay, modalContentWrapper = _a.modalContentWrapper, onClose = _a.onClose;
-    gsap_1.gsap.fromTo(modalOverlay.current, { opacity: 1 }, { opacity: 0, ease: gsap_1.Power3.easeIn });
-    gsap_1.gsap.fromTo(modalContentWrapper.current, { y: 0 }, {
-        y: "100%",
-        duration: 0.3,
-        ease: gsap_1.Power3.easeIn,
-        onComplete: function () { return onClose(); },
-    });
-};
-var ModalSmall = function (_a) {
-    var title = _a.title, subTitle = _a.subTitle, onClose = _a.onClose, children = _a.children;
-    var modalOverlay = (0, react_1.useRef)(null);
-    var modalContentWrapper = (0, react_1.useRef)(null);
-    var screenWidth = (0, useScreenWidth_1.useScreenWidth)();
-    var handleClose = function () {
-        if (screenWidth <= (0, mixins_1.getBreakPoint)("sm")) {
-            modalUnmountingAnimation({ modalOverlay: modalOverlay, modalContentWrapper: modalContentWrapper, onClose: onClose });
-        }
-        else {
-            onClose();
-        }
-    };
-    (0, react_1.useEffect)(function () {
-        if (modalOverlay.current &&
-            modalContentWrapper.current &&
-            screenWidth <= (0, mixins_1.getBreakPoint)("sm")) {
-            modalMountingAnimation({ modalOverlay: modalOverlay, modalContentWrapper: modalContentWrapper });
-        }
-    }, []);
-    return (react_1.default.createElement(index_styled_1.ModalsClassProvider, null,
-        react_1.default.createElement("div", { ref: modalOverlay, className: "ModalSmall Modals" },
-            react_1.default.createElement("div", { ref: modalContentWrapper, className: "ModalSmall__contentWrapper" },
-                onClose && (react_1.default.createElement("div", { className: "ModalSmall__close" },
-                    react_1.default.createElement(Buttons_1.ButtonPrimary, { S: true, icon: "X", onClick: handleClose }))),
-                react_1.default.createElement("div", { className: "ModalSmall__content" },
-                    title && (react_1.default.createElement("div", { className: "ModalSmall__content--title" },
-                        react_1.default.createElement(Typo_1.SERIF_5_6, null, title))),
-                    subTitle && (react_1.default.createElement("div", { className: "ModalSmall__content--subTitle" },
-                        react_1.default.createElement(Typo_1.SANS_4, null, subTitle))),
-                    react_1.default.createElement("div", { style: { marginTop: (title || subTitle) && "2rem" } }, children ? children : null))))));
-};
-exports.ModalSmall = ModalSmall;
-var ModalLarge = function (_a) {
-    var title = _a.title, onClose = _a.onClose, children = _a.children, linkTo = _a.linkTo, _b = _a.desktopWidth, desktopWidth = _b === void 0 ? "80%" : _b, headerStyle = _a.headerStyle, subtitle = _a.subtitle;
-    // let modalOverlay = useRef(null);
-    // let modalContentWrapper = useRef(null);
-    // let modalContentRef = useRef(null);
-    // const { screenWidth } = useSelector((state) => state.environment)
-    var screenWidth = (0, useScreenWidth_1.useScreenWidth)();
-    var handleClose = function () { return onClose(); };
-    var initAnimPos = { marginTop: "100vh", opacity: 0 };
-    var endAnimPos = { marginTop: 0, opacity: 1 };
-    var _c = (0, react_1.useState)(endAnimPos), animPos = _c[0], setAnimPos = _c[1];
-    // useScroll(handleCollapseMarginTop)
-    var ModalHeaderStyle1 = function () {
-        return (react_1.default.createElement(index_styled_1.StyledModalLargeHeader, null,
-            react_1.default.createElement("div", { style: {
-                    display: "flex",
-                    gap: "2.5rem",
-                    alignItems: "center",
-                } },
-                !linkTo && title && (react_1.default.createElement("div", { className: "ModalLarge__header--title" },
-                    react_1.default.createElement(Typo_1.SANS_3_4, { semibold: true }, title))),
-                linkTo && (react_1.default.createElement(Typo_1.SANS_4, { semibold: true },
-                    react_1.default.createElement(OKELink_1.OKELink, { iconAfter: "ArrowLineUpRight", linkType: "action", onClick: function () { return window.open(linkTo); }, iconSize: 24, color: "black" }, title)))),
-            onClose && (react_1.default.createElement(Buttons_1.ButtonGhost, { icon: "X", onClick: function () { return setAnimPos(initAnimPos); } }))));
-    };
-    var ModalHeaderStyle2 = function () {
-        return (react_1.default.createElement(index_styled_1.StyledModalHeaderStyle2Container, null,
-            react_1.default.createElement("div", { style: { position: "absolute", top: "-2.5rem" } },
-                react_1.default.createElement(comps_1.DisplayIcon, { size: 20, icon: "ModalBulbIcon" })),
-            react_1.default.createElement(index_styled_1.StyledModalHeaderStyle2Title, null,
-                react_1.default.createElement(Typo_1.SANS_4_5, { semibold: true, capitalize: true }, title || "title"),
-                react_1.default.createElement(Typo_1.SANS_3_4, { semibold: true, capitalize: true, style: { flexGrow: "1" }, color: greyColor80 }, subtitle || "subtitle"),
-                react_1.default.createElement(Buttons_1.ButtonGhost, { onClick: onClose, icon: "X" }))));
-    };
-    var genHeader = function () {
-        var headerStyles = {
-            style1: ModalHeaderStyle1,
-            style2: ModalHeaderStyle2,
-        };
-        var Comp = headerStyles[headerStyle || "style1"];
-        return react_1.default.createElement(Comp, { onClose: onClose });
-    };
-    var genModalContents = function () { return (react_1.default.createElement(index_styled_1.StyledModalLargeContentWrapper, { desktopWidth: desktopWidth },
-        genHeader(),
-        react_1.default.createElement(index_styled_1.StyledModalLargeBody, null, children))); };
-    return (react_1.default.createElement(index_styled_1.StyledModalLargeBg, null,
-        react_1.default.createElement(index_styled_1.StyledModalLargeBgColor, { 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, { style: { position: "relative" }, initial: { marginTop: initAnimPos.marginTop }, animate: { marginTop: animPos.marginTop }, transition: {
-                type: "tween",
-                ease: "easeOut",
-            }, onAnimationComplete: function () {
-                if (animPos.marginTop === initAnimPos.marginTop)
-                    handleClose();
-            } }, genModalContents())) : (react_1.default.createElement(framer_motion_1.motion.div, { style: { width: "100%" }, initial: initAnimPos, animate: animPos, transition: {
-                type: "tween",
-                ease: "easeOut",
-            }, onAnimationComplete: function () {
-                if (animPos.marginTop === initAnimPos.marginTop)
-                    handleClose();
-            } }, genModalContents()))));
-};
-exports.ModalLarge = ModalLarge;
-//usecase based modals
-var ModalConfirm = function (_a) {
-    var title = _a.title, subTitle = _a.subTitle, onClose = _a.onClose, _b = _a.onCloseText, onCloseText = _b === void 0 ? "Cancel" : _b, children = _a.children, onConfirm = _a.onConfirm, _c = _a.onConfirmText, onConfirmText = _c === void 0 ? "Delete" : _c;
-    return (react_1.default.createElement(exports.ModalSmall, __assign({}, { title: title, subTitle: subTitle, onClose: onClose, children: children }),
-        react_1.default.createElement(WrapperButtons, null,
-            react_1.default.createElement(Buttons_1.ButtonPrimary, { onClick: onConfirm }, onConfirmText),
-            react_1.default.createElement(Buttons_1.ButtonSecondary, { onClick: onClose }, onCloseText))));
-};
-exports.ModalConfirm = ModalConfirm;