oolib 2.44.0 → 2.45.0

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

@@ -1,4 +1,4 @@
-export function Accordion({ id, HeaderStyle, CustomHeader, noHeader, children, expand: expandProp, setExpand: setExpandProp, title, label }: {
+export function Accordion({ id, HeaderStyle, CustomHeader, noHeader, children, expand: expandProp, setExpand: setExpandProp, title, label, infoTooltip, invert, percent, }: {
     id: any;
     HeaderStyle?: string;
     CustomHeader: any;
@@ -8,4 +8,7 @@ export function Accordion({ id, HeaderStyle, CustomHeader, noHeader, children, e
     setExpand: any;
     title: any;
     label: any;
+    infoTooltip: any;
+    invert: any;
+    percent: any;
 }): any;

package/dist/components/Accordion/index.js

@@ -1,8 +1,4 @@
 "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++) {
@@ -42,55 +38,51 @@ exports.Accordion = void 0;
 var framer_motion_1 = require("framer-motion");
 var phosphor_react_1 = require("phosphor-react");
 var react_1 = __importStar(require("react"));
-var styled_components_1 = __importStar(require("styled-components"));
 var Buttons_1 = require("../Buttons");
 var Typo_1 = require("../Typo");
-var mixins_1 = require("../../themes/mixins");
 var colors_1 = require("../../themes/colors");
 var utilsOolib_1 = require("../../utilsOolib");
-var StyledAccordionContentsWrapper = (0, styled_components_1.default)(framer_motion_1.motion.div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n  overflow: hidden;\n"], ["\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n  overflow: hidden;\n"])));
-var StyledHeaderStyle1Wrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex; \n  align-items: center; \n  justify-content: space-between; \n  padding: 1rem 2rem; \n  background-color: ", ";\n  border-bottom: 2px solid ", ";\n  cursor: pointer;\n  ", ";\n  &:hover{\n    background-color: ", ";\n  }\n"], ["\n  display: flex; \n  align-items: center; \n  justify-content: space-between; \n  padding: 1rem 2rem; \n  background-color: ", ";\n  border-bottom: 2px solid ", ";\n  cursor: pointer;\n  ", ";\n  &:hover{\n    background-color: ", ";\n  }\n"])), colors_1.colors.greyColor5, colors_1.colors.greyColor10, (0, mixins_1.transition)('background-color'), colors_1.colors.greyColor10);
-var NormalizedButton = styled_components_1.default.button(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  border: none;\n  background-color: ", ";\n"], ["\n  border: none;\n  background-color: ", ";\n"])), colors_1.colors.none);
+var PercentCompletedPie_1 = require("../PercentCompletedPie");
+var Tooltip_1 = require("../Tooltip");
+var styled_1 = require("./styled");
 //this is the new grey background, slim one. with the Caret icon on the right
 //used in access control builder and several other places.
 var HeaderStyle1 = function (_a) {
     var title = _a.title, expand = _a.expand, handleToggle = _a.handleToggle;
-    return (react_1.default.createElement(StyledHeaderStyle1Wrapper, { onClick: function () { return handleToggle(!expand); } },
+    return (react_1.default.createElement(styled_1.StyledHeaderStyle1Wrapper, { onClick: function () { return handleToggle(!expand); } },
         react_1.default.createElement(Typo_1.SANS_3, { semibold: true }, title),
-        react_1.default.createElement(NormalizedButton, null,
-            react_1.default.createElement(framer_motion_1.motion.div, { animate: { rotate: expand ? -180 : 0 }, transition: { type: "tween", ease: "easeOut" } },
+        react_1.default.createElement(styled_1.NormalizedButton, null,
+            react_1.default.createElement(framer_motion_1.motion.div, { animate: { rotate: expand ? -180 : 0 }, transition: { type: 'tween', ease: 'easeOut' } },
                 react_1.default.createElement(phosphor_react_1.CaretDown, { size: 16 })))));
 };
-var StyledHeaderStyle3Wrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n   display: flex; \n  align-items: center; \n  justify-content: space-between; \n  padding: 1rem 2rem; \n\n  background-color: ", ";\n  border: 1px solid ", ";\n  cursor: pointer;\n  ", ";\n  &:hover{\n    background-color: ", ";\n  }\n"], ["\n   display: flex; \n  align-items: center; \n  justify-content: space-between; \n  padding: 1rem 2rem; \n\n  background-color: ", ";\n  border: 1px solid ", ";\n  cursor: pointer;\n  ", ";\n  &:hover{\n    background-color: ", ";\n  }\n"
-    //this is the new grey background, slim one. with the Caret icon on the right
-    //used in access control builder and several other places.
-])), colors_1.colors.none, colors_1.colors.greyColor15, (0, mixins_1.transition)('background-color'), colors_1.colors.greyColor3);
 //this is the new grey background, slim one. with the Caret icon on the right
 //used in access control builder and several other places.
 var HeaderStyle3 = function (_a) {
     var title = _a.title, expand = _a.expand, handleToggle = _a.handleToggle;
-    return (react_1.default.createElement(StyledHeaderStyle3Wrapper, { onClick: function () { return handleToggle(!expand); } },
+    return (react_1.default.createElement(styled_1.StyledHeaderStyle3Wrapper, { onClick: function () { return handleToggle(!expand); } },
         react_1.default.createElement(Typo_1.SERIF_4_5, null, title),
-        react_1.default.createElement(NormalizedButton, null,
-            react_1.default.createElement(framer_motion_1.motion.div, { animate: { rotate: expand ? -180 : 0 }, transition: { type: "tween", ease: "easeOut" } },
+        react_1.default.createElement(styled_1.NormalizedButton, null,
+            react_1.default.createElement(framer_motion_1.motion.div, { animate: { rotate: expand ? -180 : 0 }, transition: { type: 'tween', ease: 'easeOut' } },
                 react_1.default.createElement(phosphor_react_1.CaretDown, { size: 16 })))));
 };
-var StyledHeaderStyle2Wrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex; \n  align-items: center; \n  justify-content: space-between; \n  padding: 1rem 0; \n  background-color: ", ";\n  border-bottom: 2px solid ", ";\n  cursor: pointer;\n  ", ";\n  /* &:hover{\n    background-color: ", ";\n  } */\n"], ["\n  display: flex; \n  align-items: center; \n  justify-content: space-between; \n  padding: 1rem 0; \n  background-color: ", ";\n  border-bottom: 2px solid ", ";\n  cursor: pointer;\n  ", ";\n  /* &:hover{\n    background-color: ", ";\n  } */\n"
-    //analysis dashboard wordcloud - this is the old accordion header style designed at the time of updates module
-])), colors_1.colors.white, colors_1.colors.greyColor10, (0, mixins_1.transition)('background-color'), colors_1.colors.greyColor5);
 //analysis dashboard wordcloud - this is the old accordion header style designed at the time of updates module
 var HeaderStyle2 = function (_a) {
-    var title = _a.title, label = _a.label, expand = _a.expand, handleToggle = _a.handleToggle;
-    var theme = (0, styled_components_1.useTheme)();
-    return (react_1.default.createElement(StyledHeaderStyle2Wrapper, { onClick: function () { return handleToggle(!expand); } },
-        react_1.default.createElement("div", null,
-            label &&
-                react_1.default.createElement(Typo_1.LABEL, { style: { color: (0, utilsOolib_1.getPrimaryColor100)(colors_1.colors) } }, label),
-            react_1.default.createElement(Typo_1.SANS_5_6, { semibold: true }, title)),
+    var title = _a.title, label = _a.label, expand = _a.expand, handleToggle = _a.handleToggle, percent = _a.percent, infoTooltip = _a.infoTooltip, invert = _a.invert;
+    return (react_1.default.createElement(styled_1.StyledHeaderStyle2Wrapper, { onClick: function () { return handleToggle(!expand); } },
+        react_1.default.createElement("div", { style: { display: 'flex', alignItems: 'center', gap: '1rem' } },
+            percent &&
+                react_1.default.createElement("div", null,
+                    react_1.default.createElement(PercentCompletedPie_1.PercentCompletedPie, { percent: percent.value })),
+            react_1.default.createElement("div", null,
+                label && (react_1.default.createElement(Typo_1.LABEL, { style: { color: (0, utilsOolib_1.getPrimaryColor100)(colors_1.colors) } }, label)),
+                react_1.default.createElement("div", { style: { display: 'flex', alignItems: 'center', gap: '1rem' } },
+                    react_1.default.createElement(Typo_1.SERIF_5_6, null,
+                        react_1.default.createElement(styled_1.StyledTitleSpan, { className: 'StyledTitleSpan' }, title)),
+                    infoTooltip && (react_1.default.createElement(Tooltip_1.Tooltip, { text: infoTooltip.text || infoTooltip, position: infoTooltip.position || 'right', invert: invert, popOutOfOverflowHiddenParent: infoTooltip.popOutOfOverflowHiddenParent, presetTarget: 'infoIcon' }))))),
         react_1.default.createElement(Buttons_1.ButtonGhost, { icon: expand ? 'Minus' : 'Plus' })));
 };
 var Accordion = function (_a) {
-    var id = _a.id, _b = _a.HeaderStyle, HeaderStyle = _b === void 0 ? "HeaderStyle1" : _b, CustomHeader = _a.CustomHeader, _c = _a.noHeader, noHeader = _c === void 0 ? false : _c, children = _a.children, _d = _a.expand, expandProp = _d === void 0 ? false : _d, setExpandProp = _a.setExpand, title = _a.title, label = _a.label;
+    var id = _a.id, _b = _a.HeaderStyle, HeaderStyle = _b === void 0 ? 'HeaderStyle1' : _b, CustomHeader = _a.CustomHeader, _c = _a.noHeader, noHeader = _c === void 0 ? false : _c, children = _a.children, _d = _a.expand, expandProp = _d === void 0 ? false : _d, setExpandProp = _a.setExpand, title = _a.title, label = _a.label, infoTooltip = _a.infoTooltip, invert = _a.invert, percent = _a.percent;
     var _e = (0, react_1.useState)(expandProp), expand = _e[0], setExpand = _e[1];
     var handleToggle = function (bool) {
         setExpand(bool);
@@ -104,7 +96,7 @@ var Accordion = function (_a) {
     var HeaderStyles = {
         HeaderStyle1: HeaderStyle1,
         HeaderStyle2: HeaderStyle2,
-        HeaderStyle3: HeaderStyle3
+        HeaderStyle3: HeaderStyle3,
     };
     var genHeader = function () {
         if (CustomHeader)
@@ -112,15 +104,22 @@ var Accordion = function (_a) {
         //else
         var HeaderStyleComp = HeaderStyles[HeaderStyle];
         if (!HeaderStyleComp)
-            return react_1.default.createElement("div", { style: { padding: '1rem 2rem', background: colors_1.colors.red } },
-                react_1.default.createElement(Typo_1.SANS_2, null, 'Incorrect accordion HeaderStyle'));
-        return react_1.default.createElement(HeaderStyleComp, __assign({}, { handleToggle: handleToggle, expand: expand, title: title, label: label }));
+            return (react_1.default.createElement("div", { style: { padding: '1rem 2rem', background: colors_1.colors.red } },
+                react_1.default.createElement(Typo_1.SANS_2, null, 'Incorrect accordion HeaderStyle')));
+        return (react_1.default.createElement(HeaderStyleComp, __assign({}, {
+            handleToggle: handleToggle,
+            expand: expand,
+            title: title,
+            label: label,
+            infoTooltip: infoTooltip,
+            invert: invert,
+            percent: percent,
+        })));
     };
     return (react_1.default.createElement("div", { id: id },
         //unless header is explicitly disabled, generate it
         !noHeader && genHeader(),
-        react_1.default.createElement(StyledAccordionContentsWrapper, { initial: { height: expand ? "auto" : 0 }, animate: { height: expand ? "auto" : 0 }, transition: { type: "tween", ease: "easeOut" } },
+        react_1.default.createElement(styled_1.StyledAccordionContentsWrapper, { initial: { height: expand ? 'auto' : 0 }, animate: { height: expand ? 'auto' : 0 }, transition: { type: 'tween', ease: 'easeOut' } },
             react_1.default.createElement("div", null, children))));
 };
 exports.Accordion = Accordion;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

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

@@ -0,0 +1,6 @@
+export const StyledAccordionContentsWrapper: any;
+export const StyledHeaderStyle1Wrapper: any;
+export const StyledHeaderStyle2Wrapper: any;
+export const StyledHeaderStyle3Wrapper: any;
+export const NormalizedButton: any;
+export const StyledTitleSpan: any;

package/dist/components/Accordion/styled.js

@@ -0,0 +1,22 @@
+"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.StyledTitleSpan = exports.NormalizedButton = exports.StyledHeaderStyle3Wrapper = exports.StyledHeaderStyle2Wrapper = exports.StyledHeaderStyle1Wrapper = exports.StyledAccordionContentsWrapper = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+var framer_motion_1 = require("framer-motion");
+var themes_1 = require("../../themes");
+var mixins_1 = require("../../themes/mixins");
+var greyColor100 = themes_1.colors.greyColor100;
+exports.StyledAccordionContentsWrapper = (0, styled_components_1.default)(framer_motion_1.motion.div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-end;\n    overflow: hidden;\n    \n"], ["\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-end;\n    overflow: hidden;\n    \n"])));
+exports.StyledHeaderStyle1Wrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    display: flex; \n    align-items: center; \n    justify-content: space-between; \n    padding: 1rem 2rem; \n    background-color: ", ";\n    border-bottom: 2px solid ", ";\n    cursor: pointer;\n    ", ";\n    &:hover{\n        background-color: ", ";\n    }\n"], ["\n    display: flex; \n    align-items: center; \n    justify-content: space-between; \n    padding: 1rem 2rem; \n    background-color: ", ";\n    border-bottom: 2px solid ", ";\n    cursor: pointer;\n    ", ";\n    &:hover{\n        background-color: ", ";\n    }\n"])), themes_1.colors.greyColor5, themes_1.colors.greyColor10, (0, mixins_1.transition)('background-color'), themes_1.colors.greyColor10);
+exports.StyledHeaderStyle2Wrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    display: flex; \n    align-items: center; \n    justify-content: space-between; \n    padding: 1rem 2rem; \n    background-color: ", ";\n    border-bottom: 2px solid ", ";\n    cursor: pointer;\n    ", ";\n    &:hover {\n        .StyledTitleSpan {\n          background-size: 0 100%;\n        }\n    }\n"], ["\n    display: flex; \n    align-items: center; \n    justify-content: space-between; \n    padding: 1rem 2rem; \n    background-color: ", ";\n    border-bottom: 2px solid ", ";\n    cursor: pointer;\n    ", ";\n    &:hover {\n        .StyledTitleSpan {\n          background-size: 0 100%;\n        }\n    }\n"])), themes_1.colors.white, themes_1.colors.greyColor10, (0, mixins_1.transition)('background-color'));
+exports.StyledHeaderStyle3Wrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    display: flex; \n    align-items: center; \n    justify-content: space-between; \n    padding: 1rem 2rem; \n\n    background-color: ", ";\n    border: 1px solid ", ";\n    cursor: pointer;\n    ", ";\n    &:hover{\n        background-color: ", ";\n    }\n"], ["\n    display: flex; \n    align-items: center; \n    justify-content: space-between; \n    padding: 1rem 2rem; \n\n    background-color: ", ";\n    border: 1px solid ", ";\n    cursor: pointer;\n    ", ";\n    &:hover{\n        background-color: ", ";\n    }\n"])), themes_1.colors.none, themes_1.colors.greyColor15, (0, mixins_1.transition)('background-color'), themes_1.colors.greyColor3);
+exports.NormalizedButton = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    border: none;\n    background-color: ", ";\n"], ["\n    border: none;\n    background-color: ", ";\n"])), themes_1.colors.none);
+exports.StyledTitleSpan = styled_components_1.default.span(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    background-size: 100% 100%;\n    background-image: \n        linear-gradient(\n        180deg,\n        transparent 95%,\n        ", " \n        );\n    background-repeat: no-repeat;\n    ", "\n"], ["\n    background-size: 100% 100%;\n    background-image: \n        linear-gradient(\n        180deg,\n        transparent 95%,\n        ", " \n        );\n    background-repeat: no-repeat;\n    ", "\n"])), greyColor100, (0, mixins_1.transition)("background-size 0.5s"));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/dist/components/EmptyStates/config.d.ts

@@ -0,0 +1,127 @@
+export namespace emptyStatesConfig {
+    namespace contentListing {
+        const layout: string;
+        const img: string;
+        const imgSize: number;
+        const title: string;
+        const subTitle: string;
+    }
+    namespace draftsListing {
+        const layout_1: string;
+        export { layout_1 as layout };
+        const img_1: string;
+        export { img_1 as img };
+        const imgSize_1: number;
+        export { imgSize_1 as imgSize };
+        const title_1: string;
+        export { title_1 as title };
+        const subTitle_1: string;
+        export { subTitle_1 as subTitle };
+        export namespace action {
+            const btnText: string;
+        }
+    }
+    namespace publishedListing {
+        const layout_2: string;
+        export { layout_2 as layout };
+        const img_2: string;
+        export { img_2 as img };
+        const imgSize_2: number;
+        export { imgSize_2 as imgSize };
+        const title_2: string;
+        export { title_2 as title };
+        const subTitle_2: string;
+        export { subTitle_2 as subTitle };
+        export namespace action_1 {
+            const btnText_1: string;
+            export { btnText_1 as btnText };
+        }
+        export { action_1 as action };
+    }
+    namespace inModerationListing {
+        const layout_3: string;
+        export { layout_3 as layout };
+        const img_3: string;
+        export { img_3 as img };
+        const imgSize_3: number;
+        export { imgSize_3 as imgSize };
+        const title_3: string;
+        export { title_3 as title };
+        const subTitle_3: string;
+        export { subTitle_3 as subTitle };
+        export namespace action_2 {
+            const btnText_2: string;
+            export { btnText_2 as btnText };
+        }
+        export { action_2 as action };
+    }
+    namespace underMyModeration {
+        const layout_4: string;
+        export { layout_4 as layout };
+        const img_4: string;
+        export { img_4 as img };
+        const imgSize_4: number;
+        export { imgSize_4 as imgSize };
+        const title_4: string;
+        export { title_4 as title };
+        const subTitle_4: string;
+        export { subTitle_4 as subTitle };
+    }
+    namespace underOthersModeration {
+        const layout_5: string;
+        export { layout_5 as layout };
+        const img_5: string;
+        export { img_5 as img };
+        const imgSize_5: number;
+        export { imgSize_5 as imgSize };
+        const title_5: string;
+        export { title_5 as title };
+        const subTitle_5: string;
+        export { subTitle_5 as subTitle };
+    }
+    namespace awaitingMod {
+        const layout_6: string;
+        export { layout_6 as layout };
+        const img_6: string;
+        export { img_6 as img };
+        const imgSize_6: number;
+        export { imgSize_6 as imgSize };
+        const title_6: string;
+        export { title_6 as title };
+        const subTitle_6: string;
+        export { subTitle_6 as subTitle };
+    }
+    namespace searchListing {
+        const layout_7: string;
+        export { layout_7 as layout };
+        const img_7: string;
+        export { img_7 as img };
+        const title_7: string;
+        export { title_7 as title };
+        const subTitle_7: string;
+        export { subTitle_7 as subTitle };
+        export namespace additionalAction {
+            const text: string;
+        }
+    }
+    namespace searchDashBoardListing {
+        const layout_8: string;
+        export { layout_8 as layout };
+        const img_8: string;
+        export { img_8 as img };
+        const title_8: string;
+        export { title_8 as title };
+        const subTitle_8: string;
+        export { subTitle_8 as subTitle };
+    }
+    namespace learningModule {
+        const layout_9: string;
+        export { layout_9 as layout };
+        const img_9: string;
+        export { img_9 as img };
+        const title_9: string;
+        export { title_9 as title };
+        const subTitle_9: string;
+        export { subTitle_9 as subTitle };
+    }
+}

package/dist/components/EmptyStates/config.js

@@ -0,0 +1,88 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.emptyStatesConfig = void 0;
+exports.emptyStatesConfig = {
+    contentListing: {
+        layout: "center",
+        img: "contentListing",
+        imgSize: 80,
+        title: "No Content Added",
+        subTitle: "Once you publish any content on the platform, it shows up here. You can edit published content in future, when required. "
+    },
+    draftsListing: {
+        layout: "left",
+        img: "draftsListing",
+        imgSize: 80,
+        title: "No Drafts Found",
+        subTitle: "Once you publish any content on the platform, it shows up here. You can edit published content in future, when required.",
+        action: {
+            // route: "/choose-template",
+            btnText: "Start Writing",
+        }
+    },
+    publishedListing: {
+        layout: "left",
+        img: "publishedListing",
+        imgSize: 80,
+        title: "No published content found",
+        subTitle: "Once you publish any content on the platform, it shows up here. You can edit published content in future, when required.",
+        action: {
+            // route: "/choose-template",
+            btnText: "Start Writing",
+        }
+    },
+    inModerationListing: {
+        layout: "left",
+        img: "moderationListing",
+        imgSize: 80,
+        title: "No content sent for moderation",
+        subTitle: "Once you publish any content on the platform, it shows up here. You can edit published content in future, when required.",
+        action: {
+            // route: "/choose-template",
+            btnText: "Start Writing",
+        }
+    },
+    underMyModeration: {
+        layout: "left",
+        img: "moderationListing",
+        imgSize: 80,
+        title: "No published content under my moderation",
+        subTitle: "Once you publish any content on the platform, it shows up here. You can edit published content in future, when required."
+    },
+    underOthersModeration: {
+        layout: "left",
+        img: "moderationListing",
+        imgSize: 80,
+        title: "No published content under others moderation",
+        subTitle: "Once you publish any content on the platform, it shows up here. You can edit published content in future, when required."
+    },
+    awaitingMod: {
+        layout: "left",
+        img: "moderationListing",
+        imgSize: 80,
+        title: "No published content under awaiting moderation",
+        subTitle: "Once you publish any content on the platform, it shows up here. You can edit published content in future, when required."
+    },
+    searchListing: {
+        layout: "center",
+        img: "searchListing",
+        title: "Cant find any content for",
+        subTitle: "Sorry we couldn’t find any matches for this. Please make sure the words are spelled correctly",
+        additionalAction: {
+            // onClick: action,
+            text: 'Clear Search'
+        }
+    },
+    searchDashBoardListing: {
+        layout: "center",
+        img: "searchListing",
+        title: "No search results found",
+        subTitle: "Once you publish any content on the platform, it shows up here. You can edit published content in future, when required. "
+    },
+    learningModule: {
+        layout: "center",
+        img: "learningModule",
+        title: "No lesson added",
+        subTitle: "Looks like no lesson module has been assigned to you. Reach out to your Change leader and discuss what modules you'd like to study. "
+    }
+};

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

@@ -0,0 +1,5 @@
+export function EmptyStates({ preset, actionOnClick, additionalActionOnClick }: {
+    preset: any;
+    actionOnClick: any;
+    additionalActionOnClick: any;
+}): any;

package/dist/components/EmptyStates/index.js

@@ -0,0 +1,55 @@
+"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.EmptyStates = void 0;
+var react_1 = __importDefault(require("react"));
+var Container_1 = require("../Container");
+var Typo_1 = require("../Typo");
+var Buttons_1 = require("../Buttons");
+var mixins_1 = require("../../themes/mixins");
+var Wrappers_1 = require("../Wrappers");
+var OKELink_1 = require("../OKELink");
+var Paddings_1 = require("../Paddings");
+var config_1 = require("./config");
+var publishedListing_svg_1 = __importDefault(require("./images/publishedListing.svg"));
+var contentListing_svg_1 = __importDefault(require("./images/contentListing.svg"));
+var draftsListing_svg_1 = __importDefault(require("./images/draftsListing.svg"));
+var moderationListing_svg_1 = __importDefault(require("./images/moderationListing.svg"));
+var inPublishedSearch_svg_1 = __importDefault(require("./images/inPublishedSearch.svg"));
+var learningModule_svg_1 = __importDefault(require("./images/learningModule.svg"));
+var searchListing_svg_1 = __importDefault(require("./images/searchListing.svg"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var StyledContainer = (0, styled_components_1.default)(Container_1.Container)(templateObject_1 || (templateObject_1 = __makeTemplateObject([" \n    padding: ", ";  \n    display:  ", ";\n    justify-content: 'center'; \n    text-align: ", ";\n    ", "{\n      padding: ", ";\n    }\n"], [" \n    padding: ", ";  \n    display:  ", ";\n    justify-content: 'center'; \n    text-align: ", ";\n    ", "{\n      padding: ", ";\n    }\n"])), function (props) { return props.layout === "center" ? '2rem 0rem' : '4rem 0'; }, function (props) { return props.layout === "center" && "flex"; }, function (props) { return props.layout === "center" && "center"; }, (0, mixins_1.mediaQuery)("sm"), function (props) { return props.layout === "center" ? "4rem 0" : "6rem 0"; });
+var EmptyStates = function (_a) {
+    var preset = _a.preset, actionOnClick = _a.actionOnClick, additionalActionOnClick = _a.additionalActionOnClick;
+    var _b = config_1.emptyStatesConfig[preset], img = _b.img, imgSize = _b.imgSize, title = _b.title, subTitle = _b.subTitle, action = _b.action, additionalAction = _b.additionalAction, layout = _b.layout;
+    var imgConfig = {
+        publishedListing: publishedListing_svg_1.default,
+        contentListing: contentListing_svg_1.default,
+        draftsListing: draftsListing_svg_1.default,
+        moderationListing: moderationListing_svg_1.default,
+        inPublishedSearch: inPublishedSearch_svg_1.default,
+        learningModule: learningModule_svg_1.default,
+        searchListing: searchListing_svg_1.default
+    };
+    return (react_1.default.createElement(StyledContainer, { layout: layout },
+        react_1.default.createElement(Wrappers_1.Wrapper650, { style: { margin: layout === "center" ? "auto" : 0 } },
+            img && (react_1.default.createElement("img", { src: imgConfig[img], alt: '', style: {
+                    opacity: layout === "center" ? '0.6' : '0.5',
+                    height: imgSize ? imgSize + 'px' : '120px'
+                } })),
+            title && react_1.default.createElement(Typo_1.SERIF_5_6, { style: { marginTop: '2rem' } }, title),
+            subTitle && react_1.default.createElement(Typo_1.SANS_3_4, { style: { marginTop: '1rem' } }, subTitle),
+            additionalAction && (react_1.default.createElement(Paddings_1.PaddingTop10, null,
+                react_1.default.createElement(Typo_1.SANS_3, null,
+                    react_1.default.createElement(OKELink_1.OKELink, { to: "#", onClick: additionalActionOnClick }, additionalAction.text))))),
+        action && (react_1.default.createElement(Buttons_1.ButtonPrimary, { onClick: actionOnClick, style: { marginTop: '2rem', opacity: '1' } }, action === null || action === void 0 ? void 0 : action.btnText))));
+};
+exports.EmptyStates = EmptyStates;
+var templateObject_1;

package/dist/index.d.ts

@@ -30,5 +30,6 @@ 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 { EmptyStates } from "./components/EmptyStates";
 export { HintsProvider } from "./components/Hints/contextApi";
 export { LoaderCircle, ProgressBar, LoaderCircle as Loader, LoaderOverlay } 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.HintsProvider = exports.ModalSmall = exports.ModalLarge = exports.ModalConfirm = exports.SkeletonLoader = exports.Divider = exports.PercentCompletedPie = exports.Accordion = exports.ActionMenu = exports.Tooltip = exports.OKELink = exports.UserRoleBadge = exports.Section = exports.LoaderOverlay = exports.Loader = exports.ProgressBar = exports.LoaderCircle = exports.icons = exports.colors = exports.GlobalStyles = void 0;
+exports.HintsProvider = exports.EmptyStates = exports.ModalSmall = exports.ModalLarge = exports.ModalConfirm = exports.SkeletonLoader = exports.Divider = exports.PercentCompletedPie = exports.Accordion = exports.ActionMenu = exports.Tooltip = exports.OKELink = exports.UserRoleBadge = exports.Section = exports.LoaderOverlay = 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; } });
@@ -70,6 +70,8 @@ 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; } });
+var EmptyStates_1 = require("./components/EmptyStates");
+Object.defineProperty(exports, "EmptyStates", { enumerable: true, get: function () { return EmptyStates_1.EmptyStates; } });
 //// context
 var contextApi_1 = require("./components/Hints/contextApi");
 Object.defineProperty(exports, "HintsProvider", { enumerable: true, get: function () { return contextApi_1.HintsProvider; } });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oolib",
-  "version": "2.44.0",
+  "version": "2.45.0",
   "description": " OKE Component Library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",