oolib 2.25.7 → 2.26.1

package/dist/components/BlockLabel/index.js

@@ -10,9 +10,10 @@ var InlineAlert_1 = require("../InlineAlert");
 var index_styled_1 = require("./index.styled");
 var colors_1 = require("../../themes/colors");
 var toArray_1 = require("../../utils/toArray");
+var Hints_1 = __importDefault(require("../Hints"));
 var greyColor40 = colors_1.colors.greyColor40, greyColor80 = colors_1.colors.greyColor80;
 var BlockLabel = function (props) {
-    var label = props.label, sublabel = props.sublabel, inputOnlyLabel = props.inputOnlyLabel, invert = props.invert, isRequired = props.isRequired, readOnly = props.readOnly, className = props.className, style = props.style, errorMsgs = props.errorMsgs;
+    var label = props.label, sublabel = props.sublabel, inputOnlyLabel = props.inputOnlyLabel, invert = props.invert, isRequired = props.isRequired, readOnly = props.readOnly, className = props.className, style = props.style, errorMsgs = props.errorMsgs, hints = props.hints, id = props.id, hintsTitle = props.hintsTitle, hintsSubtitle = props.hintsSubtitle;
     var shouldCompRender = label ||
         (!readOnly &&
             (sublabel ||
@@ -27,11 +28,13 @@ var BlockLabel = function (props) {
         ? "danger"
         : errorMsgs[0].type || "danger";
     return (shouldCompRender && (react_1.default.createElement(index_styled_1.StyledBlockLabel, { style: style, className: className },
-        react_1.default.createElement("div", { style: { display: "flex", gap: "1rem" } },
-            (label || inputOnlyLabel) && (react_1.default.createElement(Typo_1.SANS_3, { invert: invert, bold: true, capitalize: true }, label || inputOnlyLabel)),
-            optional && (react_1.default.createElement(Typo_1.SANS_3, { color: invert ? greyColor40 : greyColor80 }, '(optional)')),
-            !readOnly &&
-                (errorMsgs === null || errorMsgs === void 0 ? void 0 : errorMsgs.length) > 0 ? (react_1.default.createElement(InlineAlert_1.InlineAlert, { text: errText, type: errType, link: errLink, invert: invert })) : null),
-        !readOnly && sublabel && (0, toArray_1.toArray)(sublabel).map(function (subL) { return (react_1.default.createElement(Typo_1.SANS_3, { color: invert ? greyColor40 : greyColor80 }, subL)); }))));
+        react_1.default.createElement("div", { style: { display: "flex", gap: "1rem", alignItems: "center" } },
+            (label || inputOnlyLabel) && (react_1.default.createElement(Typo_1.SANS_3, { invert: invert, semibold: true, capitalize: true }, label || inputOnlyLabel)),
+            hints ? (react_1.default.createElement(Hints_1.default, { id: id, title: hintsTitle, subtitle: hintsSubtitle, hints: hints })) : null,
+            optional && (react_1.default.createElement(Typo_1.SANS_3, { color: invert ? greyColor40 : greyColor80 }, "(optional)")),
+            !readOnly && (errorMsgs === null || errorMsgs === void 0 ? void 0 : errorMsgs.length) > 0 ? (react_1.default.createElement(InlineAlert_1.InlineAlert, { text: errText, type: errType, link: errLink, invert: invert })) : null),
+        !readOnly &&
+            sublabel &&
+            (0, toArray_1.toArray)(sublabel).map(function (subL) { return (react_1.default.createElement(Typo_1.SANS_3, { color: invert ? greyColor40 : greyColor80 }, subL)); }))));
 };
 exports.BlockLabel = BlockLabel;

package/dist/components/Hints/contextApi.d.ts

@@ -0,0 +1,5 @@
+export const HintsContext: any;
+export function HintsProvider({ children }: {
+    children: any;
+}): any;
+export function useHintsContext(): any;

package/dist/components/Hints/contextApi.js

@@ -0,0 +1,38 @@
+"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.useHintsContext = exports.HintsProvider = exports.HintsContext = void 0;
+var react_1 = __importStar(require("react"));
+exports.HintsContext = (0, react_1.createContext)();
+var HintsProvider = function (_a) {
+    var children = _a.children;
+    var _b = (0, react_1.useState)(""), active = _b[0], setActive = _b[1];
+    return (react_1.default.createElement(exports.HintsContext.Provider, { value: { active: active, setActive: setActive } }, children));
+};
+exports.HintsProvider = HintsProvider;
+var useHintsContext = function () {
+    return (0, react_1.useContext)(exports.HintsContext);
+};
+exports.useHintsContext = useHintsContext;

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

@@ -0,0 +1,7 @@
+export default Hints;
+declare function Hints({ id, hints, title, subtitle }: {
+    id: any;
+    hints: any;
+    title: any;
+    subtitle: any;
+}): any;

package/dist/components/Hints/index.js

@@ -0,0 +1,72 @@
+"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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var styled_1 = require("./styled");
+var Typo_1 = require("../Typo");
+var react_1 = require("react");
+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 mixins_1 = require("../../themes/mixins");
+var useScreenWidth_1 = require("../../utils/customHooks/useScreenWidth");
+var index_styled_1 = require("../Modal/index.styled");
+var greyColor40 = colors_1.colors.greyColor40, greyColor80 = colors_1.colors.greyColor80, greyColor15 = colors_1.colors.greyColor15;
+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 Hints = function (_a) {
+    var id = _a.id, hints = _a.hints, title = _a.title, subtitle = _a.subtitle;
+    //get the context state
+    var _b = (0, contextApi_1.useHintsContext)(), active = _b.active, setActive = _b.setActive;
+    var screenWidth = (0, useScreenWidth_1.useScreenWidth)();
+    var lightBoxRef = (0, react_1.useRef)();
+    var _c = (0, react_1.useState)({}), styles = _c[0], setStyles = _c[1];
+    //isStorybook is temporary hack to get correct with on storybook, since a story is getting renderend within an iframe, screen.width gives the incorrect width
+    var isDesktop = screenWidth > (0, mixins_1.getBreakPoint)("md");
+    (0, react_1.useEffect)(function () {
+        if (!lightBoxRef.current)
+            return;
+        var lightBoxRect = lightBoxRef.current.getBoundingClientRect();
+        // by default open on leftside, if the below condition is true than open at the bottom of hints
+        //note for future: arrow comp is fixed and lightbox will move to place itself within the visible area
+        if (lightBoxRect.right > screenWidth) {
+            setStyles({
+                lightBox: { top: "4rem", right: "0" },
+                arrow: { top: "none", right: "3.5rem", transform: "none" },
+            });
+        }
+    }, [active]);
+    return (React.createElement("div", { style: { position: "relative" } },
+        " ",
+        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.StyledLightbox, { style: styles.lightBox, ref: lightBoxRef, id: id },
+                React.createElement(index_styled_1.StyledModalHeaderStyle2Container, null,
+                    React.createElement("div", { style: { position: "absolute", top: "-3rem" } },
+                        React.createElement(comps_1.DisplayIcon, { size: 20, icon: "ModalBulbIcon" })),
+                    React.createElement(index_styled_1.StyledModalHeaderStyle2Title, null,
+                        React.createElement(Typo_1.SANS_4_5, { capitalize: true }, title || "title"),
+                        React.createElement(Typo_1.SANS_3_4, { capitalize: true, style: { flexGrow: "1" }, color: greyColor80 }, subtitle || "subtitle")),
+                    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: { padding: ".5rem 2rem" } },
+                React.createElement(styled_1.StyledLightBoxList, null, hints.map(function (d) { return (React.createElement("li", null,
+                    React.createElement(Typo_1.SANS_3, null, d))); })))))) : null));
+};
+exports.default = Hints;

package/dist/components/Hints/styled.d.ts

@@ -0,0 +1,6 @@
+export const StyledHints: any;
+export const StyledLightbox: any;
+export const StyledLightBoxHeader: any;
+export const StyledLightBoxContent: any;
+export const StyledLightBoxList: any;
+export const StyledTriangle: any;

package/dist/components/Hints/styled.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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledTriangle = exports.StyledLightBoxList = exports.StyledLightBoxContent = exports.StyledLightBoxHeader = exports.StyledLightbox = exports.StyledHints = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+var themes_1 = require("../../themes");
+var white = themes_1.colors.white, greyColor15 = themes_1.colors.greyColor15;
+exports.StyledHints = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
+exports.StyledLightbox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background: ", ";\n  position: absolute;\n\n  border: 1px solid ", ";\n  z-index: 2;\n  width: 30rem;\n  height: 35rem;\n  background-color: white;\n  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.05);\n  border-radius: 2px;\n  top: ", ";\n  right: ", ";\n\n  display: flex;\n  flex-direction: column;\n"], ["\n  background: ", ";\n  position: absolute;\n\n  border: 1px solid ", ";\n  z-index: 2;\n  width: 30rem;\n  height: 35rem;\n  background-color: white;\n  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.05);\n  border-radius: 2px;\n  top: ", ";\n  right: ", ";\n\n  display: flex;\n  flex-direction: column;\n"])), white, greyColor15, function (_a) {
+    var style = _a.style;
+    return ((style === null || style === void 0 ? void 0 : style.top) ? style.top : "-1rem");
+}, function (_a) {
+    var style = _a.style;
+    return ((style === null || style === void 0 ? void 0 : style.right) ? style.right : "-31.5rem");
+});
+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;\n  overflow-y: auto;\n"], ["\n  padding: 0.5rem 2rem;\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: \"\u00B7\";\n      font-size: 4.5rem;\n      vertical-align: middle;\n      line-height: 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: \"\u00B7\";\n      font-size: 4.5rem;\n      vertical-align: middle;\n      line-height: 0;\n    }\n  }\n"])));
+exports.StyledTriangle = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  position: absolute;\n  top: ", ";\n  right: ", ";\n  transform: ", ";\n"], ["\n  position: absolute;\n  top: ", ";\n  right: ", ";\n  transform: ", ";\n"])), function (_a) {
+    var style = _a.style;
+    return ((style === null || style === void 0 ? void 0 : style.top) ? style.top : ".9rem");
+}, function (_a) {
+    var style = _a.style;
+    return ((style === null || style === void 0 ? void 0 : style.right) ? style.right : "-2rem");
+}, function (_a) {
+    var style = _a.style;
+    return (style === null || style === void 0 ? void 0 : style.transform) ? style.transform : "rotate(-90deg)";
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/dist/components/LoadersAndProgress/SkeletonLoader/index.d.ts

@@ -0,0 +1,3 @@
+export function SkeletonLoader({ style }: {
+    style: any;
+}): any;

package/dist/components/LoadersAndProgress/SkeletonLoader/index.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SkeletonLoader = void 0;
+var react_1 = __importDefault(require("react"));
+var styled_1 = require("./styled");
+var SkeletonLoader = function (_a) {
+    var style = _a.style;
+    return react_1.default.createElement(styled_1.StyledSkeletonLoader, { style: style });
+};
+exports.SkeletonLoader = SkeletonLoader;

package/dist/components/LoadersAndProgress/SkeletonLoader/styled.d.ts

@@ -0,0 +1 @@
+export const StyledSkeletonLoader: any;

package/dist/components/LoadersAndProgress/SkeletonLoader/styled.js

@@ -0,0 +1,36 @@
+"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 __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.StyledSkeletonLoader = void 0;
+var styled_components_1 = __importStar(require("styled-components"));
+var themes_1 = require("../../../themes");
+var utilsOolib_1 = require("../../../utilsOolib");
+var load = (0, styled_components_1.keyframes)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    from { left: -100%; }\n    to { left: 100%; }\n"], ["\n    from { left: -100%; }\n    to { left: 100%; }\n"])));
+exports.StyledSkeletonLoader = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    overflow: hidden;\n    position: relative;\n    background-color: ", ";\n  \n    &::before{\n      content: '';\n      display: block;\n      position: absolute;\n      left: -100%;\n      top: 0;\n      width: 100%;\n      height: 100%;\n      background: linear-gradient(to right, transparent 0%, ", " 50%, transparent 100%);\n      animation: ", " 1s cubic-bezier(0.4, 0.0, 0.2, 1);\n      animation-iteration-count:infinite;\n    }\n"], ["\n    overflow: hidden;\n    position: relative;\n    background-color: ", ";\n  \n    &::before{\n      content: '';\n      display: block;\n      position: absolute;\n      left: -100%;\n      top: 0;\n      width: 100%;\n      height: 100%;\n      background: linear-gradient(to right, transparent 0%, ", " 50%, transparent 100%);\n      animation: ", " 1s cubic-bezier(0.4, 0.0, 0.2, 1);\n      animation-iteration-count:infinite;\n    }\n"])), (0, utilsOolib_1.getPrimaryColor10)(), themes_1.colors.black_opacity05, load);
+var templateObject_1, templateObject_2;

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

@@ -0,0 +1,24 @@
+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

@@ -0,0 +1,176 @@
+"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: "-3rem" } },
+                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, { capitalize: true }, title || "title"),
+                react_1.default.createElement(Typo_1.SANS_3_4, { 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;

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

@@ -0,0 +1,8 @@
+export const StyledModalLargeBg: any;
+export const StyledModalLargeBgColor: any;
+export const StyledModalLargeContentWrapper: any;
+export const StyledModalLargeHeader: any;
+export const StyledModalLargeBody: any;
+export const ModalsClassProvider: any;
+export const StyledModalHeaderStyle2Container: any;
+export const StyledModalHeaderStyle2Title: any;

package/dist/components/Modal/index.styled.js

@@ -0,0 +1,27 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledModalHeaderStyle2Title = exports.StyledModalHeaderStyle2Container = exports.ModalsClassProvider = exports.StyledModalLargeBody = exports.StyledModalLargeHeader = exports.StyledModalLargeContentWrapper = exports.StyledModalLargeBgColor = exports.StyledModalLargeBg = void 0;
+var mixins_1 = require("../../themes/mixins");
+var themes_1 = require("../../themes");
+var framer_motion_1 = require("framer-motion");
+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) {
+    var desktopWidth = _a.desktopWidth;
+    return desktopWidth;
+});
+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);
+exports.StyledModalLargeBody = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
+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    bottom: 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    bottom: 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);
+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);
+exports.StyledModalHeaderStyle2Title = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\npadding-top:1.5rem;\ndisplay: flex;\nflex-grow: 1;\ngap: 1.5rem;\njustify-content: space-between;\nalign-items: center;\n"], ["\npadding-top:1.5rem;\ndisplay: flex;\nflex-grow: 1;\ngap: 1.5rem;\njustify-content: space-between;\nalign-items: center;\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

package/dist/components/RadioAndCheckbox/comps/CheckboxList/comps/CheckboxButton/index.d.ts

@@ -0,0 +1,10 @@
+export function CheckboxButton({ id, className, isSelected: _isSelected, value, onChange, disabled, invert, S }: {
+    id: any;
+    className: any;
+    isSelected: any;
+    value: any;
+    onChange: any;
+    disabled: any;
+    invert: any;
+    S: any;
+}): any;

package/dist/components/RadioAndCheckbox/comps/CheckboxList/comps/CheckboxButton/index.js

@@ -0,0 +1,37 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CheckboxButton = void 0;
+var react_1 = __importDefault(require("react"));
+var icons_1 = require("../../../../../../icons");
+var themes_1 = require("../../../../../../themes");
+var styled_1 = require("./styled");
+var Check = icons_1.icons.Check;
+var white = themes_1.colors.white, greyColor100 = themes_1.colors.greyColor100;
+/**
+ * value and onChange are being passed as props so
+ * that it can be generated dynamically via our
+ * block generators.
+ */
+var CheckboxButton = function (_a) {
+    var _b;
+    var id = _a.id, className = _a.className, _isSelected = _a.isSelected, value = _a.value, //can be used interchangibly
+    onChange = _a.onChange, disabled = _a.disabled, invert = _a.invert, S = _a.S;
+    var isSelected = (_b = _isSelected !== null && _isSelected !== void 0 ? _isSelected : value) !== null && _b !== void 0 ? _b : false;
+    return (react_1.default.createElement(styled_1.StyledCheckbox, __assign({ onClick: function () { return onChange && onChange(id, !isSelected); } }, { className: className, isSelected: isSelected, disabled: disabled, invert: invert, S: S }), isSelected &&
+        react_1.default.createElement(Check, { weight: "bold", color: invert ? greyColor100 : white, size: 16, style: { flexShrink: 0 } })));
+};
+exports.CheckboxButton = CheckboxButton;

package/dist/components/RadioAndCheckbox/comps/CheckboxList/comps/CheckboxInput/index.d.ts

@@ -1,11 +1,3 @@
-export function CheckboxButton({ className, isSelected, onClick, disabled, invert, S }: {
-    className: any;
-    isSelected: any;
-    onClick: any;
-    disabled: any;
-    invert: any;
-    S: any;
-}): any;
 export function CheckboxInput({ option, onClick, S, inputStyle, value, invert, disabled, rightWrongResult, }: {
     option: any;
     onClick: any;

package/dist/components/RadioAndCheckbox/comps/CheckboxList/comps/CheckboxInput/index.js

@@ -14,7 +14,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CheckboxInput = exports.CheckboxButton = void 0;
+exports.CheckboxInput = void 0;
 var react_1 = __importDefault(require("react"));
 var icons_1 = require("../../../../../../icons");
 var themes_1 = require("../../../../../../themes");
@@ -22,15 +22,9 @@ var Tags_1 = require("../../../../../Tags");
 var Typo_1 = require("../../../../../Typo");
 var styled_1 = require("../../../../styled");
 var utils_1 = require("../../../../utils");
-var styled_2 = require("./styled");
-var Check = icons_1.icons.Check, CheckSquare = icons_1.icons.CheckSquare, XSquare = icons_1.icons.XSquare;
-var white = themes_1.colors.white, green = themes_1.colors.green, red = themes_1.colors.red, greyColor40 = themes_1.colors.greyColor40, greyColor100 = themes_1.colors.greyColor100;
-var CheckboxButton = function (_a) {
-    var className = _a.className, isSelected = _a.isSelected, onClick = _a.onClick, disabled = _a.disabled, invert = _a.invert, S = _a.S;
-    return (react_1.default.createElement(styled_2.StyledCheckbox, __assign({ onClick: function (ev) { return onClick && onClick(ev); } }, { className: className, isSelected: isSelected, disabled: disabled, invert: invert, S: S }), isSelected &&
-        react_1.default.createElement(Check, { weight: "bold", color: invert ? greyColor100 : white, size: 16, style: { flexShrink: 0 } })));
-};
-exports.CheckboxButton = CheckboxButton;
+var CheckboxButton_1 = require("../CheckboxButton");
+var CheckSquare = icons_1.icons.CheckSquare, XSquare = icons_1.icons.XSquare;
+var green = themes_1.colors.green, red = themes_1.colors.red, greyColor40 = themes_1.colors.greyColor40;
 var CheckboxInput = function (_a) {
     var option = _a.option, onClick = _a.onClick, S = _a.S, inputStyle = _a.inputStyle, _b = _a.value, value = _b === void 0 ? [] : _b, invert = _a.invert, disabled = _a.disabled, rightWrongResult = _a.rightWrongResult;
     var isSelected = !!value.find(function (selOp) { return selOp.value === option.value; });
@@ -38,7 +32,7 @@ var CheckboxInput = function (_a) {
     var SuitableTypo = S ? Typo_1.SANS_2 : Typo_1.SANS_3;
     var genCheckboxButton = function (options) {
         if (options === void 0) { options = {}; }
-        return (react_1.default.createElement(exports.CheckboxButton, __assign({}, {
+        return (react_1.default.createElement(CheckboxButton_1.CheckboxButton, __assign({}, {
             isSelected: isSelected,
             disabled: disabled,
             invert: invert,

package/dist/components/RadioAndCheckbox/comps/CheckboxList/index.js

@@ -43,7 +43,7 @@ var Buttons_1 = require("../../../Buttons");
 var _EXPORTS_1 = require("../../../../utils/_EXPORTS");
 var utils_1 = require("../../utils");
 var styled_1 = require("../../styled");
-var comps_1 = require("./comps");
+var CheckboxInput_1 = require("./comps/CheckboxInput");
 var styled_2 = require("./styled");
 var optionsContainers = {
     checkbox: styled_1.StyledOptionsContainer,
@@ -90,15 +90,15 @@ function CheckboxList(_a) {
         react_1.default.createElement(BlockLabel_1.BlockLabel, __assign({}, (0, _EXPORTS_1.getBlockLabelProps)(props))),
         readOnly ? (react_1.default.createElement(styled_2.StyledDisplayTagsContainer, null, value === null || value === void 0 ? void 0 : value.map(function (selOp) { return react_1.default.createElement(Tags_1.TagDisplay, { key: selOp.value, invert: invert, display: selOp.display_desc || selOp.display }); }))) : (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement(OptionsContainer, __assign({}, { style: style, listType: listType, S: S }), typicalOptions === null || typicalOptions === void 0 ? void 0 :
-                typicalOptions.map(function (option, idx) { return idx < optionsLimit && (react_1.default.createElement(comps_1.CheckboxInput, __assign({}, __assign(__assign({}, InputCommonProps), { option: option, key: option.value })))); }),
+                typicalOptions.map(function (option, idx) { return idx < optionsLimit && (react_1.default.createElement(CheckboxInput_1.CheckboxInput, __assign({}, __assign(__assign({}, InputCommonProps), { option: option, key: option.value })))); }),
                 shouldHideSomeOptions && // if we have the case of off limit options
                     (seeMore || rightWrongResult) && //and decided to show them
                     typicalOptions.slice(optionsLimit).map(function (option) {
-                        return react_1.default.createElement(comps_1.CheckboxInput, __assign({}, __assign(__assign({}, InputCommonProps), { option: option, key: option.value })));
+                        return react_1.default.createElement(CheckboxInput_1.CheckboxInput, __assign({}, __assign(__assign({}, InputCommonProps), { option: option, key: option.value })));
                     }),
                 injectOtherOption && injectedOtherOption && ( //so other box and its textInput act as one entity in the flexbox
                 react_1.default.createElement(styled_1.StyledOtherOptionContainer, { listType: listType },
-                    react_1.default.createElement(comps_1.CheckboxInput, __assign({}, __assign(__assign({}, InputCommonProps), { option: injectedOtherOption }))),
+                    react_1.default.createElement(CheckboxInput_1.CheckboxInput, __assign({}, __assign(__assign({}, InputCommonProps), { option: injectedOtherOption }))),
                     otherOpInSelectees && (react_1.default.createElement(styled_1.StyledOtherTextInputWrapper, __assign({}, { listType: listType, rightWrongResult: rightWrongResult }),
                         react_1.default.createElement(TextInputs_1.TextInput, __assign({ placeholder: "Please Specify Here", value: otherOpInSelectees.display_desc, onChange: function (k, v) { return handleTextInputChange(v); } }, { disabled: disabled, invert: invert, S: S }))))))),
             shouldHideSomeOptions && !rightWrongResult && (react_1.default.createElement(Buttons_1.ButtonGhost, { onClick: function () { return setSeeMore(!seeMore); }, value: !seeMore ? 'See More' : 'See Less', style: inputStyle != 'tagSelect' ? { marginTop: 10 } : {} })),

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

@@ -1,4 +1,5 @@
 export { RadioList } from "./comps/RadioList";
 export { CheckboxList } from "./comps/CheckboxList";
+export { CheckboxInput } from "./comps/CheckboxList/comps/CheckboxInput";
+export { CheckboxButton } from "./comps/CheckboxList/comps/CheckboxButton";
 export { RadioInput, RadioButton } from "./comps/RadioList/comps";
-export { CheckboxInput, CheckboxButton } from "./comps/CheckboxList/comps";

package/dist/components/RadioAndCheckbox/index.js

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "RadioInput", { enumerable: true, get: function (
 Object.defineProperty(exports, "RadioButton", { enumerable: true, get: function () { return comps_1.RadioButton; } });
 var CheckboxList_1 = require("./comps/CheckboxList");
 Object.defineProperty(exports, "CheckboxList", { enumerable: true, get: function () { return CheckboxList_1.CheckboxList; } });
-var comps_2 = require("./comps/CheckboxList/comps");
-Object.defineProperty(exports, "CheckboxInput", { enumerable: true, get: function () { return comps_2.CheckboxInput; } });
-Object.defineProperty(exports, "CheckboxButton", { enumerable: true, get: function () { return comps_2.CheckboxButton; } });
+var CheckboxInput_1 = require("./comps/CheckboxList/comps/CheckboxInput");
+Object.defineProperty(exports, "CheckboxInput", { enumerable: true, get: function () { return CheckboxInput_1.CheckboxInput; } });
+var CheckboxButton_1 = require("./comps/CheckboxList/comps/CheckboxButton");
+Object.defineProperty(exports, "CheckboxButton", { enumerable: true, get: function () { return CheckboxButton_1.CheckboxButton; } });

package/dist/components/TextInputs/index.js

@@ -48,7 +48,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     function verb(n) { return function (v) { return step([n, v]); }; }
     function step(op) {
         if (f) throw new TypeError("Generator is already executing.");
-        while (_) try {
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
             if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
             if (y = 0, t) op = [op[0] & 2, t.value];
             switch (op[0]) {

package/dist/icons/custom/index.d.ts

@@ -17,3 +17,4 @@ export function BadgeMod(props: any): any;
 export function BadgeVetted(props: any): any;
 export function IndiaFlag(props: any): any;
 export function KenyaFlag(props: any): any;
+export function ModalBulbIcon(props: any): any;

package/dist/icons/custom/index.js

@@ -14,7 +14,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.KenyaFlag = exports.IndiaFlag = exports.BadgeVetted = exports.BadgeMod = exports.BadgeSuperAdmin = exports.BadgeAdmin = exports.OkeGoogleIcon = exports.LetterH = exports.LanguageIcon = exports.IndexIcon = void 0;
+exports.ModalBulbIcon = exports.KenyaFlag = exports.IndiaFlag = exports.BadgeVetted = exports.BadgeMod = exports.BadgeSuperAdmin = exports.BadgeAdmin = exports.OkeGoogleIcon = exports.LetterH = exports.LanguageIcon = exports.IndexIcon = void 0;
 var react_1 = __importDefault(require("react"));
 var themes_1 = require("../../themes");
 var yellow = themes_1.colors.yellow, greyColor100 = themes_1.colors.greyColor100;
@@ -106,3 +106,8 @@ var KenyaFlag = function (props) { return (react_1.default.createElement("svg",
         react_1.default.createElement("path", { fill: "#F7FCFF", fillRule: "evenodd", d: "M20.266 29.813v-8.038c-.573.38-1.005 2.035-1.005 4.02 0 1.983.432 3.638 1.005 4.018zM20.266 19.255v-8.038c-.573.38-1.005 2.035-1.005 4.02 0 1.983.432 3.638 1.005 4.018z", clipRule: "evenodd" }),
         react_1.default.createElement("path", { fill: "#272727", d: "M23.627 20.515c0-1.813.632-3.487 1.703-4.842.836 1.412 1.406 3.025 1.425 4.838.02 1.813-.586 3.395-1.425 4.847-1.07-1.355-1.703-3.03-1.703-4.843zM17.374 20.515c0-1.813-.633-3.487-1.703-4.842-.836 1.412-1.407 3.025-1.426 4.838-.02 1.813.586 3.395 1.425 4.847 1.07-1.355 1.704-3.03 1.704-4.843z" })))); };
 exports.KenyaFlag = KenyaFlag;
+var ModalBulbIcon = function (props) { return (react_1.default.createElement("svg", __assign({ width: 48, height: 48, fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+    react_1.default.createElement("rect", { width: 48, height: 48, rx: 24, fill: "#33A4FF" }),
+    react_1.default.createElement("path", { d: "M19 37h10M24 33v-7M20 22l4 4 4-4", stroke: "#fff", strokeWidth: 3.2, strokeLinecap: "round", strokeLinejoin: "round" }),
+    react_1.default.createElement("path", { d: "M17.838 28.877A9.982 9.982 0 0 1 14 21.056c-.03-5.42 4.34-9.927 9.759-10.054a10 10 0 0 1 6.418 17.862A3.037 3.037 0 0 0 29 31.247V32a1 1 0 0 1-1 1h-8a1 1 0 0 1-1-1v-.754a3.014 3.014 0 0 0-1.162-2.37v0Z", stroke: "#fff", strokeWidth: 3.2, strokeLinecap: "round", strokeLinejoin: "round" }))); };
+exports.ModalBulbIcon = ModalBulbIcon;

package/dist/icons/index.d.ts

@@ -55,6 +55,7 @@ export namespace icons {
     export { ListDashes };
     export { ListNumbers };
     export { ListPlus };
+    export { List };
     export { FileArrowUp };
     export { VideoCamera };
     export { Quotes };
@@ -92,6 +93,8 @@ export namespace icons {
     export { BadgeVetted };
     export { IndiaFlag };
     export { KenyaFlag };
+    export { LightbulbFilament };
+    export { ModalBulbIcon };
 }
 import { PencilSimple } from "phosphor-react";
 import { PencilLine } from "phosphor-react";
@@ -149,6 +152,7 @@ import { ImageSquare } from "phosphor-react";
 import { ListDashes } from "phosphor-react";
 import { ListNumbers } from "phosphor-react";
 import { ListPlus } from "phosphor-react";
+import { List } from "phosphor-react";
 import { FileArrowUp } from "phosphor-react";
 import { VideoCamera } from "phosphor-react";
 import { Quotes } from "phosphor-react";
@@ -186,3 +190,5 @@ import { BadgeMod } from "./custom";
 import { BadgeVetted } from "./custom";
 import { IndiaFlag } from "./custom";
 import { KenyaFlag } from "./custom";
+import { LightbulbFilament } from "phosphor-react";
+import { ModalBulbIcon } from "./custom";

package/dist/icons/index.js

@@ -60,6 +60,7 @@ exports.icons = {
     ListDashes: phosphor_react_1.ListDashes,
     ListNumbers: phosphor_react_1.ListNumbers,
     ListPlus: phosphor_react_1.ListPlus,
+    List: phosphor_react_1.List,
     FileArrowUp: phosphor_react_1.FileArrowUp,
     VideoCamera: phosphor_react_1.VideoCamera,
     Quotes: phosphor_react_1.Quotes,
@@ -96,5 +97,7 @@ exports.icons = {
     BadgeMod: custom_1.BadgeMod,
     BadgeVetted: custom_1.BadgeVetted,
     IndiaFlag: custom_1.IndiaFlag,
-    KenyaFlag: custom_1.KenyaFlag
+    KenyaFlag: custom_1.KenyaFlag,
+    LightbulbFilament: phosphor_react_1.LightbulbFilament,
+    ModalBulbIcon: custom_1.ModalBulbIcon
 };

package/dist/index.d.ts

@@ -23,4 +23,5 @@ export { Tooltip } from "./components/Tooltip";
 export { ActionMenu } from "./components/ActionMenu";
 export { PercentCompletedPie } from "./components/PercentCompletedPie";
 export { Divider } from "./components/Divider";
+export { SkeletonLoader } from "./components/LoadersAndProgress/SkeletonLoader";
 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.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.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; } });
@@ -57,5 +57,7 @@ var PercentCompletedPie_1 = require("./components/PercentCompletedPie");
 Object.defineProperty(exports, "PercentCompletedPie", { enumerable: true, get: function () { return PercentCompletedPie_1.PercentCompletedPie; } });
 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; } });
 //utility functions
 __exportStar(require("./utils/_EXPORTS"), exports);

package/dist/utils/comps/index.d.ts

@@ -0,0 +1,5 @@
+export function DisplayIcon({ icon, size, color }: {
+    icon: any;
+    size: any;
+    color: any;
+}): any;

package/dist/utils/comps/index.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DisplayIcon = void 0;
+var icons_1 = require("../../icons");
+var DisplayIcon = function (_a) {
+    var icon = _a.icon, size = _a.size, color = _a.color;
+    var IconComp = icons_1.icons[icon];
+    return React.createElement(React.Fragment, null, IconComp && React.createElement(IconComp, { size: size, color: color, weight: "bold" }));
+};
+exports.DisplayIcon = DisplayIcon;

package/dist/utils/customHooks/useScreenWidth.d.ts

@@ -0,0 +1 @@
+export function useScreenWidth(resizeFn: any): any;

package/dist/utils/customHooks/useScreenWidth.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useScreenWidth = void 0;
+var lodash_1 = require("lodash");
+var react_1 = require("react");
+var useScreenWidth = function (resizeFn) {
+    var _a = (0, react_1.useState)(document.documentElement.clientWidth), screenWidth = _a[0], setScreenWidth = _a[1]; // exclude scrollbar + zoom
+    var handleResize = function () {
+        //if (screenWidth === document.documentElement.clientWidth) return; // in case of vertical resize (mobile browser bottom/top bars)
+        setScreenWidth(document.documentElement.clientWidth);
+        resizeFn && resizeFn();
+    };
+    handleResize = (0, lodash_1.debounce)(handleResize, 500);
+    (0, react_1.useEffect)(function () {
+        window.addEventListener('resize', handleResize);
+        return function () {
+            window.removeEventListener('resize', handleResize);
+        };
+    }, []);
+    return screenWidth;
+};
+exports.useScreenWidth = useScreenWidth;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oolib",
-  "version": "2.25.7",
+  "version": "2.26.1",
   "description": " OKE Component Library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -46,13 +46,15 @@
     "react-dom": "^17.0.2",
     "react-json-view": "^1.21.3",
     "react-router-dom": "^5.1.2",
-    "semantic-release": "^18.0.0",
-    "styled-components": "^5.3.6"
+    "semantic-release": "^18.0.0"
   },
   "peerDependencies": {
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-router-dom": "^5.1.2"
+    "react-router-dom": "^5.1.2",
+    "styled-components": "^5.3.3",
+    "framer-motion": "^4.1.17",
+    "gsap": "^3.7.1"
   },
   "config": {
     "commitizen": {

package/dist/components/RadioAndCheckbox/comps/CheckboxList/comps/index.d.ts

@@ -1 +0,0 @@
-export { CheckboxInput, CheckboxButton } from "./CheckboxInput";

package/dist/components/RadioAndCheckbox/comps/CheckboxList/comps/index.js

@@ -1,6 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CheckboxButton = exports.CheckboxInput = void 0;
-var CheckboxInput_1 = require("./CheckboxInput");
-Object.defineProperty(exports, "CheckboxInput", { enumerable: true, get: function () { return CheckboxInput_1.CheckboxInput; } });
-Object.defineProperty(exports, "CheckboxButton", { enumerable: true, get: function () { return CheckboxInput_1.CheckboxButton; } });