oolib 2.91.0 → 2.92.0

package/dist/components/Dropdowns/DropdownMulti/index.js

@@ -137,7 +137,7 @@ function DropdownMulti(_a) {
         if (!(value === null || value === void 0 ? void 0 : value.length) > 0)
             return null;
         return isTagsStyle ? (react_1.default.createElement(styled_1.StyledTagsInputWrapper, null, value.map(function (d) { return (0, genTagComp_1.genTagComp)(id, d, { display: true, invert: invert, theme: theme }); }))) : (react_1.default.createElement("div", { style: { display: "flex", flexWrap: "wrap", gap: "0.5rem" } }, value.map(function (v, i) { return (react_1.default.createElement(react_1.Fragment, null,
-            react_1.default.createElement(DisplayCompSingle_1.DisplayCompSingle, { value: v, invert: invert, injectComma: i !== value.length - 1 }))); })));
+            react_1.default.createElement(DisplayCompSingle_1.DisplayCompSingle, { value: v, invert: invert, injectComma: i !== value.length - 1, S: S }))); })));
     };
     var _e = (0, react_1.useState)(false), focusSelectTagsInput = _e[0], setFocusSelectTagsInput = _e[1];
     var genSelectTagsInput = function () { return (react_1.default.createElement(SelectTagsInput_1.SelectTagsInput, __assign({}, {

package/dist/components/Dropdowns/DropdownSingle/index.js

@@ -159,7 +159,7 @@ function DropdownSingle(_a) {
     var genDisplayComp = function () {
         if (!value)
             return null;
-        return isTagsStyle ? (react_1.default.createElement(styled_1.StyledTagsInputWrapper, null, (0, genTagComp_1.genTagComp)(id, value, { display: true, invert: invert, theme: theme }))) : (react_1.default.createElement(DisplayCompSingle_1.DisplayCompSingle, __assign({}, { value: value, invert: invert })));
+        return isTagsStyle ? (react_1.default.createElement(styled_1.StyledTagsInputWrapper, null, (0, genTagComp_1.genTagComp)(id, value, { display: true, invert: invert, theme: theme }))) : (react_1.default.createElement(DisplayCompSingle_1.DisplayCompSingle, __assign({}, { value: value, invert: invert, S: S })));
     };
     return (react_1.default.createElement("div", { className: "OKE-Dropdown ".concat(className, " OKE-Dropdown--").concat(readOnly ? "displayComp" : "inputComp", " ").concat(invert ? "-invert-" : ""), style: style },
         react_1.default.createElement(BlockLabel_1.BlockLabel, __assign({}, (0, getBlockLabelProps_1.getBlockLabelProps)(props) /** in other words, props. */)),

package/dist/components/Dropdowns/comps/DisplayCompSingle/index.d.ts

@@ -1,6 +1,7 @@
-export function DisplayCompSingle({ value, invert, injectComma }: {
+export function DisplayCompSingle({ value, invert, injectComma, S }: {
     value: any;
     invert: any;
     injectComma: any;
+    S: any;
 }): React.JSX.Element;
 import React from "react";

package/dist/components/Dropdowns/comps/DisplayCompSingle/index.js

@@ -23,14 +23,14 @@ var genLinkOrText_1 = require("../../utils/genLinkOrText");
 var styled_components_1 = require("styled-components");
 var genProfileImg_1 = require("../../utils/genProfileImg");
 var DisplayCompSingle = function (_a) {
-    var value = _a.value, invert = _a.invert, injectComma = _a.injectComma;
+    var value = _a.value, invert = _a.invert, injectComma = _a.injectComma, S = _a.S;
     var theme = (0, styled_components_1.useTheme)();
     if (!value)
         return null;
     return (react_1.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: '1rem' } },
-        (0, genIcon_1.genIcon)(value === null || value === void 0 ? void 0 : value.icon),
+        (0, genIcon_1.genIcon)({ icon: value === null || value === void 0 ? void 0 : value.icon, invert: invert, S: S }),
         (0, genProfileImg_1.genProfileImg)(__assign(__assign({}, value), { invert: invert, theme: theme })),
-        (0, genLinkOrText_1.genLinkOrText)(value, function (display, link) { return (react_1.default.createElement(Typo_1.SANS_3, null,
+        (0, genLinkOrText_1.genLinkOrText)(value, function (display, link) { return (react_1.default.createElement(Typo_1.SANS_3, { invert: invert },
             link
                 ? react_1.default.createElement(OKELink_1.OKELink, { invert: invert, to: link }, display)
                 : display,

package/dist/components/Dropdowns/comps/OptionContent/index.js

@@ -18,13 +18,15 @@ var OptionContent = function (_a) {
     var image = option.image, display = option.display, icon = option.icon, desc = option.desc, color = option.color;
     return (react_1.default.createElement("div", { style: {
             display: "flex",
-            alignItems: "center",
+            alignItems: "flex-start",
             gap: "1rem",
             maxWidth: "36rem",
         } },
-        image && (0, genProfileImg_1.genProfileImg)({ image: image, display: display, invert: invert, theme: theme }),
-        icon && (0, genIcon_1.genIcon)(icon),
-        color && (0, genColor_1.genColor)({ color: color }),
+        (image || icon || color) &&
+            react_1.default.createElement("div", { style: { marginTop: desc && '0.2rem', display: 'flex', alignContent: 'center' } },
+                image && (0, genProfileImg_1.genProfileImg)({ image: image, display: display, invert: invert, theme: theme }),
+                icon && (0, genIcon_1.genIcon)({ icon: icon, invert: invert, S: S }),
+                color && (0, genColor_1.genColor)({ color: color })),
         react_1.default.createElement("div", null,
             react_1.default.createElement(TypoComp, { invert: invert, semibold: desc ? true : false, className: "OKE-Dropdown__optionText ".concat(optionsClassName || "") }, (0, getText_1.getText)(display)),
             desc && (react_1.default.createElement(TypoComp, { invert: invert, className: "OKE-Dropdown__optionDesc" }, (0, getText_1.getText)(desc))))));

package/dist/components/Dropdowns/comps/OptionsSingle/styled.js

@@ -33,10 +33,13 @@ var themes_1 = require("../../../../themes");
 var mixins_1 = require("../../../../themes/mixins");
 var utilsOolib_1 = require("../../../../utilsOolib");
 var globalVariables_1 = require("../../../../globalStyles/globalVariables");
-exports.StyledOption = styled_components_1.default.li(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    padding: 1rem 2rem;\n    ", "\n    ", ";\n\n    background-color: ", ";\n\n    ", "\n\n    &:first-of-type {\n      margin-top: 1rem;\n    }\n\n    &:last-of-type {\n      margin-bottom: 1rem;\n    }\n\n    .OKE-Dropdown__optionDesc {\n      @include kp-clamp-text(2);\n      white-space: normal;\n    }\n\n    .OKE-Dropdown__optionImg {\n      flex: 0 0 auto;\n    }\n\n    .OKE-Dropdown__checkboxClickArea {\n      position: absolute;\n      width: 2rem;\n      height: 2rem;\n    }\n    .OKE-Dropdown__checkboxClickArea-box {\n      margin-right: 1rem;\n      flex-shrink: 0;\n    }\n"], ["\n    display: flex;\n    align-items: center;\n    padding: 1rem 2rem;\n    ", "\n    ", ";\n\n    background-color: ", ";\n\n    ", "\n\n    &:first-of-type {\n      margin-top: 1rem;\n    }\n\n    &:last-of-type {\n      margin-bottom: 1rem;\n    }\n\n    .OKE-Dropdown__optionDesc {\n      @include kp-clamp-text(2);\n      white-space: normal;\n    }\n\n    .OKE-Dropdown__optionImg {\n      flex: 0 0 auto;\n    }\n\n    .OKE-Dropdown__checkboxClickArea {\n      position: absolute;\n      width: 2rem;\n      height: 2rem;\n    }\n    .OKE-Dropdown__checkboxClickArea-box {\n      margin-right: 1rem;\n      flex-shrink: 0;\n    }\n"])), function (_a) {
+exports.StyledOption = styled_components_1.default.li(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    padding: ", ";\n    ", "\n    ", ";\n\n    background-color: ", ";\n\n    ", "\n\n    &:first-of-type {\n      margin-top: 1rem;\n    }\n\n    &:last-of-type {\n      margin-bottom: 1rem;\n    }\n\n    .OKE-Dropdown__optionDesc {\n      @include kp-clamp-text(2);\n      white-space: normal;\n    }\n\n    .OKE-Dropdown__optionImg {\n      flex: 0 0 auto;\n    }\n\n    .OKE-Dropdown__checkboxClickArea {\n      position: absolute;\n      width: 2rem;\n      height: 2rem;\n    }\n    .OKE-Dropdown__checkboxClickArea-box {\n      margin-right: 1rem;\n      flex-shrink: 0;\n    }\n"], ["\n    display: flex;\n    align-items: center;\n    padding: ", ";\n    ", "\n    ", ";\n\n    background-color: ", ";\n\n    ", "\n\n    &:first-of-type {\n      margin-top: 1rem;\n    }\n\n    &:last-of-type {\n      margin-bottom: 1rem;\n    }\n\n    .OKE-Dropdown__optionDesc {\n      @include kp-clamp-text(2);\n      white-space: normal;\n    }\n\n    .OKE-Dropdown__optionImg {\n      flex: 0 0 auto;\n    }\n\n    .OKE-Dropdown__checkboxClickArea {\n      position: absolute;\n      width: 2rem;\n      height: 2rem;\n    }\n    .OKE-Dropdown__checkboxClickArea-box {\n      margin-right: 1rem;\n      flex-shrink: 0;\n    }\n"])), function (_a) {
+    var S = _a.S;
+    return S ? '0.5rem 2rem' : ' 1rem 2rem';
+}, function (_a) {
     var S = _a.S;
     return !S
-        ? (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n       \n        min-height: 4rem;\n      "], ["\n       \n        min-height: 4rem;\n      "]))) : (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      height: 3rem;\n      "], ["\n      height: 3rem;\n      "])));
+        ? (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n       \n        min-height: 4rem;\n      "], ["\n       \n        min-height: 4rem;\n      "]))) : (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      /* height: 3rem; */\n      "], ["\n      /* height: 3rem; */\n      "])));
 }, (0, mixins_1.transition)('background-color'), function (_a) {
     var isFocussed = _a.isFocussed, isSelected = _a.isSelected, theme = _a.theme, invert = _a.invert;
     return isSelected

package/dist/components/Dropdowns/comps/SelectDropdown/index.js

@@ -49,7 +49,7 @@ var SelectDropdown = function (_a) {
         react_1.default.createElement("div", null,
             react_1.default.createElement("div", { style: { display: "flex", gap: "1rem", alignItems: "center" } },
                 showElem('color') && (0, genColor_1.genColor)({ color: value === null || value === void 0 ? void 0 : value.color }),
-                showElem("icon") && (0, genIcon_1.genIcon)(value === null || value === void 0 ? void 0 : value.icon),
+                showElem("icon") && (0, genIcon_1.genIcon)({ icon: value === null || value === void 0 ? void 0 : value.icon, invert: invert, S: S }),
                 showElem("display") && (react_1.default.createElement(TypoComp
                 // semibold={
                 //   dropdownSelectText.desc && showElem("desc") ? true : undefined

package/dist/components/Dropdowns/utils/genIcon.d.ts

@@ -1,2 +1,6 @@
-export function genIcon(icon: any): React.JSX.Element;
+export function genIcon({ icon, invert, S }: {
+    icon: any;
+    invert: any;
+    S: any;
+}): React.JSX.Element;
 import React from "react";

package/dist/components/Dropdowns/utils/genIcon.js

@@ -6,12 +6,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.genIcon = void 0;
 var react_1 = __importDefault(require("react"));
 var icons_1 = require("../../../icons");
-var genIcon = function (icon) {
+var genIcon = function (_a) {
+    var icon = _a.icon, invert = _a.invert, S = _a.S;
     if (!icon)
         return null;
     var IconComp = icons_1.icons[icon];
     if (!IconComp)
         return null;
-    return react_1.default.createElement(IconComp, { size: 20 });
+    return react_1.default.createElement(IconComp, { size: S ? 15 : 20, style: { color: invert ? 'white' : 'unset' } });
 };
 exports.genIcon = genIcon;

package/dist/components/Dropdowns/utils/genProfileImg.js

@@ -8,7 +8,7 @@ var react_1 = __importDefault(require("react"));
 var ProfileImageInput_1 = require("../../ImageInput/derivedComps/ProfileImageInput");
 var genProfileImg = function (_a) {
     var image = _a.image, display = _a.display, invert = _a.invert;
-    return (react_1.default.createElement("div", { style: { flex: "0 0 auto" } },
+    return (react_1.default.createElement("div", { style: { flex: "0 0 auto", display: 'flex', alignItems: 'start' }, id: "test" },
         react_1.default.createElement(ProfileImageInput_1.ProfileImageInput, { readOnly: true, value: image, imageTitle: display, size: 20, invert: invert })));
 };
 exports.genProfileImg = genProfileImg;

package/dist/components/EmptyStates2/comps/EmptyStatesRenderer.d.ts

@@ -0,0 +1,10 @@
+export function EmptyStatesRenderer({ image: _image, align, title: _title, subtitle: _subtitle, link, button, onClick, }: {
+    image: any;
+    align?: string;
+    title: any;
+    subtitle: any;
+    link: any;
+    button: any;
+    onClick: any;
+}): React.JSX.Element;
+import React from "react";

package/dist/components/EmptyStates2/comps/EmptyStatesRenderer.js

@@ -0,0 +1,75 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EmptyStatesRenderer = void 0;
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var congratulationsImg_svg_1 = __importDefault(require("../../../assets/images/congratulationsImg.svg"));
+var contentListing_svg_1 = __importDefault(require("../../../assets/images/contentListing.svg"));
+var dashboardListing_svg_1 = __importDefault(require("../../../assets/images/dashboardListing.svg"));
+var draftsListing_svg_1 = __importDefault(require("../../../assets/images/draftsListing.svg"));
+var inPublishedSearch_svg_1 = __importDefault(require("../../../assets/images/inPublishedSearch.svg"));
+var learningModule_svg_1 = __importDefault(require("../../../assets/images/learningModule.svg"));
+var mailBoxImg_svg_1 = __importDefault(require("../../../assets/images/mailBoxImg.svg"));
+var moderationListing_svg_1 = __importDefault(require("../../../assets/images/moderationListing.svg"));
+var publishedListing_svg_1 = __importDefault(require("../../../assets/images/publishedListing.svg"));
+var searchDashBoardListing_svg_1 = __importDefault(require("../../../assets/images/searchDashBoardListing.svg"));
+var searchListing_svg_1 = __importDefault(require("../../../assets/images/searchListing.svg"));
+var Buttons_1 = require("../../Buttons");
+var Container_1 = require("../../Container");
+var OKELink_1 = require("../../OKELink");
+var Typo_1 = require("../../Typo");
+var Wrappers_1 = require("../../Wrappers");
+var mixins_1 = require("../../../themes/mixins");
+var StyledFlexWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: ", ";\n  gap: 2rem;\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: ", ";\n  gap: 2rem;\n"])), function (_a) {
+    var align = _a.align;
+    return (align === "center" ? "center" : "flex-start");
+});
+var StyledContainer = (0, styled_components_1.default)(Container_1.Container)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  padding: ", ";\n  display: ", ";\n  justify-content: \"center\";\n  text-align: ", ";\n\n  ", " {\n    padding: ", ";\n  }\n"], ["\n  padding: ", ";\n  display: ", ";\n  justify-content: \"center\";\n  text-align: ", ";\n\n  ", " {\n    padding: ", ";\n  }\n"])), function (props) { return (props.align === "center" ? "2rem 0rem" : "4rem 0"); }, function (props) { return props.align === "center" && "flex"; }, function (props) { return props.align === "center" && "center"; }, (0, mixins_1.mediaQuery)("sm"), function (props) { return (props.align === "center" ? "4rem 0" : "6rem 0"); });
+var EmptyStatesRenderer = function (_a) {
+    var _image = _a.image, _b = _a.align, align = _b === void 0 ? "center" : _b, _title = _a.title, _subtitle = _a.subtitle, link = _a.link, button = _a.button, onClick = _a.onClick;
+    var imagesLookup = {
+        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,
+        mailBoxImg: mailBoxImg_svg_1.default,
+        congratulationsImg: congratulationsImg_svg_1.default,
+        searchDashBoardListing: searchDashBoardListing_svg_1.default,
+        dashboardListing: dashboardListing_svg_1.default,
+    };
+    //basically image prop can be either the src string or an object with more properties
+    var image = typeof _image === "string" ? { src: _image } : _image; // src + style
+    var title = typeof _title === "string" ? { text: _title } : _title; // text + style
+    var subtitle = typeof _subtitle === "string" ? { text: _subtitle } : _subtitle; // text + style
+    return (react_1.default.createElement(StyledContainer, { align: align },
+        react_1.default.createElement(Wrappers_1.Wrapper650, { style: { margin: align === "center" ? "auto" : 0 } },
+            (image === null || image === void 0 ? void 0 : image.src) && (react_1.default.createElement("img", { src: imagesLookup[image.src], alt: "", style: __assign({ opacity: 0.5, height: "12rem", width: "auto" }, (image.style || {})) })),
+            (title === null || title === void 0 ? void 0 : title.text) && (react_1.default.createElement(Typo_1.SERIF_5_6, { style: title.style }, title.text)),
+            (subtitle === null || subtitle === void 0 ? void 0 : subtitle.text) && (react_1.default.createElement(Typo_1.SANS_3_4, { style: subtitle.style }, subtitle.text)),
+            link && (react_1.default.createElement(Typo_1.SANS_3, { style: { paddingTop: '1rem' } },
+                react_1.default.createElement(OKELink_1.OKELink, { text: link.text, onClick: onClick }))),
+            button && (react_1.default.createElement(Buttons_1.ButtonPrimary, { onClick: onClick, style: { marginTop: "2rem" } }, button.text)))));
+};
+exports.EmptyStatesRenderer = EmptyStatesRenderer;
+var templateObject_1, templateObject_2;

package/dist/components/EmptyStates2/config/index.d.ts

@@ -0,0 +1,89 @@
+export function getConfig(preset: any, contentTypeTitle: any, commaSeparatedTags: any): {
+    align: string;
+    image: {
+        src: string;
+        style: {
+            height: number;
+            opacity: number;
+        };
+    };
+    title: string;
+    subtitle: string;
+    imageSize?: undefined;
+    button?: undefined;
+    link?: undefined;
+} | {
+    align: string;
+    image: {
+        src: string;
+        style: {
+            height: number;
+            opacity: number;
+        };
+    };
+    imageSize: number;
+    title: string;
+    subtitle: string;
+    button?: undefined;
+    link?: undefined;
+} | {
+    align: string;
+    image: {
+        src: string;
+        style: {
+            height: number;
+            opacity?: undefined;
+        };
+    };
+    title: string;
+    subtitle: string;
+    button: {
+        text: string;
+    };
+    imageSize?: undefined;
+    link?: undefined;
+} | {
+    align: string;
+    image: {
+        src: string;
+        style: {
+            height: number;
+            opacity?: undefined;
+        };
+    };
+    title: string;
+    subtitle: string;
+    imageSize?: undefined;
+    button?: undefined;
+    link?: undefined;
+} | {
+    align: string;
+    image: {
+        src: string;
+        style: {
+            opacity: number;
+            height?: undefined;
+        };
+    };
+    title: string;
+    subtitle: string;
+    link: {
+        text: string;
+    };
+    imageSize?: undefined;
+    button?: undefined;
+} | {
+    align: string;
+    image: {
+        src: string;
+        style: {
+            opacity: number;
+            height?: undefined;
+        };
+    };
+    title: string;
+    subtitle: string;
+    imageSize?: undefined;
+    button?: undefined;
+    link?: undefined;
+};

package/dist/components/EmptyStates2/config/index.js

@@ -0,0 +1,237 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getConfig = void 0;
+var getConfig = function (preset, contentTypeTitle, commaSeparatedTags) {
+    switch (preset) {
+        case "multipleCollectionsListing":
+            return {
+                align: "center",
+                image: {
+                    src: "contentListing",
+                    style: {
+                        height: 80,
+                        opacity: 0.6,
+                    },
+                },
+                title: "No tags added",
+                subtitle: "Publishing under ".concat(commaSeparatedTags, " shows all tagged content here, You can edit published content in future, when required."),
+            };
+        case "multiplePublishingListing":
+            return {
+                align: "center",
+                image: {
+                    src: "contentListing",
+                    style: {
+                        height: 80,
+                        opacity: 0.6,
+                    },
+                },
+                title: "No Content Added",
+                subtitle: "Once you publish content on the platform, it shows up here. You can edit published content in future, when required. ",
+            };
+        case "singlePublishingListing":
+            return {
+                align: "center",
+                image: {
+                    src: "contentListing",
+                    style: {
+                        height: 80,
+                        opacity: 0.6,
+                    },
+                },
+                title: "No ".concat(contentTypeTitle === null || contentTypeTitle === void 0 ? void 0 : contentTypeTitle.toLowerCase(), " Added"),
+                subtitle: "Publishing under ".concat(contentTypeTitle === null || contentTypeTitle === void 0 ? void 0 : contentTypeTitle.toLowerCase(), " shows your content here, You can edit published content in future, when required."),
+            };
+        case "singleCollectionsListing":
+            return {
+                align: "center",
+                image: {
+                    src: "contentListing",
+                    style: {
+                        height: 80,
+                        opacity: 0.6,
+                    },
+                },
+                imageSize: 80,
+                title: "No ".concat(contentTypeTitle === null || contentTypeTitle === void 0 ? void 0 : contentTypeTitle.toLowerCase(), " Added"),
+                subtitle: "Publishing under ".concat(contentTypeTitle === null || contentTypeTitle === void 0 ? void 0 : contentTypeTitle.toLowerCase(), " shows your content here, You can edit published content in future, when required."),
+            };
+        case "profileListing":
+            return {
+                align: "center",
+                image: {
+                    src: "contentListing",
+                    style: {
+                        height: 80,
+                        opacity: 0.6,
+                    },
+                },
+                title: "No Profile Added",
+                subtitle: "Once you publish any profile on the platform, it shows up here. You can edit profile content in future, when required. ",
+            };
+        case "notificationEmpty":
+            return {
+                align: "center",
+                image: {
+                    src: "mailBoxImg",
+                    style: {
+                        height: 80,
+                        opacity: 0.6,
+                    },
+                },
+                title: "No Notifications Yet",
+                subtitle: "All updates,notifications and alerts will be displayed here ",
+            };
+        case "dashboardListing":
+            return {
+                align: "center",
+                image: {
+                    src: "dashboardListing",
+                    style: {
+                        height: 80,
+                        opacity: 0.6,
+                    },
+                },
+                title: "No Data Added",
+                subtitle: "Currently, no data is available. Start exploring insights once data is populated ",
+            };
+        case "successFullyPublish":
+            return {
+                align: "center",
+                image: {
+                    src: "congratulationsImg",
+                    style: {
+                        height: 150,
+                        opacity: 1,
+                    },
+                },
+                title: "Content Published Successfully",
+                subtitle: " ",
+            };
+        case "draftsListing":
+            return {
+                align: "left",
+                image: {
+                    src: "draftsListing",
+                    style: {
+                        height: 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.",
+                button: {
+                    // route: "/choose-template",
+                    text: "Start Writing",
+                },
+            };
+        case "publishedListing":
+            return {
+                align: "left",
+                image: {
+                    src: "publishedListing",
+                    style: {
+                        height: 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.",
+                button: {
+                    // route: "/choose-template",
+                    text: "Start Writing",
+                },
+            };
+        case "inModerationListing":
+            return {
+                align: "left",
+                image: {
+                    src: "moderationListing",
+                    style: {
+                        height: 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.",
+                button: {
+                    // route: "/choose-template",
+                    text: "Start Writing",
+                },
+            };
+        case "underMyModeration":
+            return {
+                align: "left",
+                image: {
+                    src: "moderationListing",
+                    style: {
+                        height: 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.",
+            };
+        case "underOthersModeration":
+            return {
+                align: "left",
+                image: {
+                    src: "moderationListing",
+                    style: {
+                        height: 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.",
+            };
+        case "awaitingMod":
+            return {
+                align: "left",
+                image: {
+                    src: "moderationListing",
+                    style: {
+                        height: 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.",
+            };
+        case "searchListing":
+            return {
+                align: "center",
+                image: {
+                    src: "searchListing",
+                    style: {
+                        opacity: 0.6,
+                    },
+                },
+                title: "Cant find any content for ".concat(contentTypeTitle),
+                subtitle: "Sorry we couldn’t find any matches for this. Please make sure the words are spelled correctly",
+                link: {
+                    // onClick: action,
+                    text: "Clear Search",
+                },
+            };
+        case "searchDashBoardListing":
+            return {
+                align: "center",
+                image: {
+                    src: "searchDashBoardListing",
+                    style: {
+                        opacity: 0.6,
+                    },
+                },
+                title: "No search results found",
+                subtitle: "Sorry we couldn’t find any matches for this. Please make sure the words are spelled correctly ",
+            };
+        case "learningModule":
+            return {
+                align: "center",
+                image: {
+                    src: "learningModule",
+                    style: {
+                        opacity: 0.6,
+                    },
+                },
+                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. ",
+            };
+    }
+};
+exports.getConfig = getConfig;

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

@@ -0,0 +1,7 @@
+export function EmptyStates({ preset, contentTypeTitle, tags, onClick, }: {
+    preset?: string;
+    contentTypeTitle: any;
+    tags: any;
+    onClick: any;
+}): React.JSX.Element;
+import React from "react";

package/dist/components/EmptyStates2/index.js

@@ -0,0 +1,27 @@
+"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.EmptyStates = void 0;
+var react_1 = __importDefault(require("react"));
+var EmptyStatesRenderer_1 = require("./comps/EmptyStatesRenderer");
+var config_1 = require("./config");
+var EmptyStates = function (_a) {
+    var _b = _a.preset, preset = _b === void 0 ? "multiplePublishingListing" : _b, contentTypeTitle = _a.contentTypeTitle, tags = _a.tags, onClick = _a.onClick;
+    var commaSeparatedTags = tags === null || tags === void 0 ? void 0 : tags.map(function (item) { return item.toLowerCase(); }).join(',');
+    var _c = (0, config_1.getConfig)(preset, contentTypeTitle, commaSeparatedTags), image = _c.image, title = _c.title, subtitle = _c.subtitle, link = _c.link, button = _c.button, align = _c.align;
+    return (react_1.default.createElement(EmptyStatesRenderer_1.EmptyStatesRenderer, __assign({}, { image: image, align: align, title: title, subtitle: subtitle, link: link, button: button, onClick: onClick })));
+};
+exports.EmptyStates = EmptyStates;

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

@@ -1,4 +1,4 @@
-export function Modal({ title, onClose, children, linkTo, desktopWidth, headerStyle, subtitle, fitToContentHeight, invert, overflowVisible, showActionPanel, onCloseText, onConfirm, onConfirmText, alignActions }: {
+export function Modal({ title, onClose, children, linkTo, desktopWidth, headerStyle, subtitle, fitToContentHeight, invert, overflowVisible, showActionPanel, onCloseText, onConfirm, showCloseBtn, onConfirmText, showConfirmBtn, alignActions }: {
     title: any;
     onClose: any;
     children: any;
@@ -12,6 +12,8 @@ export function Modal({ title, onClose, children, linkTo, desktopWidth, headerSt
     showActionPanel?: boolean;
     onCloseText?: string;
     onConfirm: any;
+    showCloseBtn?: boolean;
     onConfirmText?: string;
+    showConfirmBtn?: boolean;
     alignActions?: string;
 }): any;

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

@@ -48,12 +48,12 @@ var Divider_1 = require("../../Divider");
 var Modal = function (_a) {
     var title = _a.title, onClose = _a.onClose, children = _a.children, linkTo = _a.linkTo, _b = _a.desktopWidth, desktopWidth = _b === void 0 ? "80%" : _b, _c = _a.headerStyle, headerStyle = _c === void 0 ? "style1" : _c, subtitle = _a.subtitle, // used only in header style 2
     _d = _a.fitToContentHeight, // used only in header style 2
-    fitToContentHeight = _d === void 0 ? false : _d, invert = _a.invert, overflowVisible = _a.overflowVisible, _e = _a.showActionPanel, showActionPanel = _e === void 0 ? false : _e, _f = _a.onCloseText, onCloseText = _f === void 0 ? "Close" : _f, onConfirm = _a.onConfirm, _g = _a.onConfirmText, onConfirmText = _g === void 0 ? "Confirm" : _g, _h = _a.alignActions, alignActions = _h === void 0 ? "right" : _h;
+    fitToContentHeight = _d === void 0 ? false : _d, invert = _a.invert, overflowVisible = _a.overflowVisible, _e = _a.showActionPanel, showActionPanel = _e === void 0 ? false : _e, _f = _a.onCloseText, onCloseText = _f === void 0 ? "Close" : _f, onConfirm = _a.onConfirm, _g = _a.showCloseBtn, showCloseBtn = _g === void 0 ? true : _g, _h = _a.onConfirmText, onConfirmText = _h === void 0 ? "Confirm" : _h, _j = _a.showConfirmBtn, showConfirmBtn = _j === void 0 ? true : _j, _k = _a.alignActions, alignActions = _k === void 0 ? "right" : _k;
     var screenWidth = (0, useScreenWidth_1.useScreenWidth)();
     var handleClose = function () { return onClose(); };
     var initAnimPos = { marginTop: "100vh", opacity: 0 };
     var endAnimPos = { marginTop: 0, opacity: 1 };
-    var _j = (0, react_1.useState)(endAnimPos), animPos = _j[0], setAnimPos = _j[1];
+    var _l = (0, react_1.useState)(endAnimPos), animPos = _l[0], setAnimPos = _l[1];
     (0, react_1.useEffect)(function () {
         document.body.style.overflow = "hidden";
         return function () { return (document.body.style.overflow = "unset"); };
@@ -83,10 +83,11 @@ var Modal = function (_a) {
                 react_1.default.createElement("div", { style: { position: 'sticky', bottom: headerStyle === 'style1' ? 0 : '2.2rem' } },
                     react_1.default.createElement(Divider_1.Divider, null),
                     react_1.default.createElement(styled_1.StyledActionButtonsWrapper, { alignActions: alignActions },
-                        typeof onConfirm === 'function'
+                        showConfirmBtn &&
+                            typeof onConfirm === 'function'
                             ? react_1.default.createElement(Buttons_1.ButtonPrimary, { onClick: onConfirm }, onConfirmText) // In some cases we want to pass button directly to the component as prop
                             : onConfirm,
-                        react_1.default.createElement(Buttons_1.ButtonGhost, { onClick: onClose }, onCloseText)))))); };
+                        showCloseBtn && react_1.default.createElement(Buttons_1.ButtonGhost, { onClick: onClose }, onCloseText)))))); };
     return ((0, react_dom_1.createPortal)(react_1.default.createElement(styled_1.StyledModalLargeBg, null,
         react_1.default.createElement(styled_1.StyledModalLargeBgColor, { initial: { opacity: initAnimPos.opacity }, animate: { opacity: animPos.opacity }, transition: {
                 type: "tween",

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

@@ -1,9 +1,11 @@
-export function ModalConfirm({ title, subTitle, children, onClose, onCloseText, onConfirm, onConfirmText, alignActions }: {
+export function ModalConfirm({ title, subTitle, children, onClose, onCloseText, showConfirmBtn, showCloseBtn, onConfirm, onConfirmText, alignActions }: {
     title: any;
     subTitle: any;
     children: any;
     onClose: any;
     onCloseText?: string;
+    showConfirmBtn?: boolean;
+    showCloseBtn?: boolean;
     onConfirm: any;
     onConfirmText?: string;
     alignActions?: string;

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

@@ -32,11 +32,11 @@ var Buttons_1 = require("../../Buttons");
 var Typo_1 = require("../../Typo");
 var styled_1 = require("./styled");
 var ModalConfirm = function (_a) {
-    var title = _a.title, subTitle = _a.subTitle, children = _a.children, onClose = _a.onClose, _b = _a.onCloseText, onCloseText = _b === void 0 ? "Cancel" : _b, onConfirm = _a.onConfirm, _c = _a.onConfirmText, onConfirmText = _c === void 0 ? "Delete" : _c, _d = _a.alignActions, alignActions = _d === void 0 ? "left" : _d;
+    var title = _a.title, subTitle = _a.subTitle, children = _a.children, onClose = _a.onClose, _b = _a.onCloseText, onCloseText = _b === void 0 ? "Cancel" : _b, _c = _a.showConfirmBtn, showConfirmBtn = _c === void 0 ? true : _c, _d = _a.showCloseBtn, showCloseBtn = _d === void 0 ? true : _d, onConfirm = _a.onConfirm, _e = _a.onConfirmText, onConfirmText = _e === void 0 ? "Delete" : _e, _f = _a.alignActions, alignActions = _f === void 0 ? "left" : _f;
     var screenWidth = (0, useScreenWidth_1.useScreenWidth)();
     var initAnimPos = { marginTop: "100vh", opacity: 0, translateY: "100%" };
     var endAnimPos = { marginTop: 0, opacity: 1, translateY: 0 };
-    var _e = (0, react_1.useState)(endAnimPos), animPos = _e[0], setAnimPos = _e[1];
+    var _g = (0, react_1.useState)(endAnimPos), animPos = _g[0], setAnimPos = _g[1];
     (0, react_1.useEffect)(function () {
         document.body.style.overflow = "hidden";
         return function () { return (document.body.style.overflow = "unset"); };
@@ -52,8 +52,8 @@ var ModalConfirm = function (_a) {
                 react_1.default.createElement(SubTitleText, null, subTitle))),
             react_1.default.createElement("div", { style: { marginTop: (title || subTitle) && "2rem" } }, children ? children : null),
             react_1.default.createElement(styled_1.StyledFlexWrapper, { style: { marginTop: (children) && "2rem" }, alignActions: alignActions },
-                react_1.default.createElement(Buttons_1.ButtonPrimary, { onClick: onConfirm }, onConfirmText),
-                react_1.default.createElement(Buttons_1.ButtonSecondary, { onClick: onClose }, onCloseText))))); };
+                showConfirmBtn && react_1.default.createElement(Buttons_1.ButtonPrimary, { onClick: onConfirm }, onConfirmText),
+                showCloseBtn && react_1.default.createElement(Buttons_1.ButtonSecondary, { onClick: onClose }, onCloseText))))); };
     return ((0, react_dom_1.createPortal)(react_1.default.createElement(styled_1.StyledModalConfirm, { initial: { opacity: initAnimPos.opacity }, animate: { opacity: animPos.opacity }, transition: { type: "tween", ease: "easeOut" }, onClick: function () { return onClose(); } }, screenWidth < (0, mixins_1.getBreakPoint)("sm") ? (react_1.default.createElement(styled_1.StyledModalConfirmContentWrapper, { initial: initAnimPos, animate: animPos, transition: {
             type: "tween",
             ease: "easeOut",

package/dist/index.d.ts

@@ -31,7 +31,7 @@ export { ModalConfirm } from "./components/Modals/ModalConfirm";
 export { ModalForms } from "./components/Modals/derivedComps/ModalForms";
 export { Modal } from "./components/Modals/Modal";
 export { ModalSmall } from "./components/Modals/derivedComps/ModalSmall";
-export { EmptyStates } from "./components/EmptyStates";
+export { EmptyStates } from "./components/EmptyStates2";
 export { HomeCover } from "./components/HomeCover";
 export { PageScrollIndicator } from "./components/PageScrollIndicator";
 export { BarChart } from "./components/dataViz/comps/BarChart";

package/dist/index.js

@@ -76,8 +76,8 @@ var Modal_1 = require("./components/Modals/Modal");
 Object.defineProperty(exports, "Modal", { enumerable: true, get: function () { return Modal_1.Modal; } });
 var ModalSmall_1 = require("./components/Modals/derivedComps/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; } });
+var EmptyStates2_1 = require("./components/EmptyStates2");
+Object.defineProperty(exports, "EmptyStates", { enumerable: true, get: function () { return EmptyStates2_1.EmptyStates; } });
 var HomeCover_1 = require("./components/HomeCover");
 Object.defineProperty(exports, "HomeCover", { enumerable: true, get: function () { return HomeCover_1.HomeCover; } });
 var PageScrollIndicator_1 = require("./components/PageScrollIndicator");

package/package.json

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

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

@@ -1,135 +0,0 @@
-export function emptyStatesConfig({ contentTypeTitle, tags }?: {
-    contentTypeTitle?: string;
-    tags?: any[];
-}): {
-    multipleCollectionsListing: {
-        layout: string;
-        img: string;
-        imgSize: number;
-        title: string;
-        subTitle: string;
-    };
-    singlePublishingListing: {
-        layout: string;
-        img: string;
-        imgSize: number;
-        title: string;
-        subTitle: string;
-    };
-    multiplePublishingListing: {
-        layout: string;
-        img: string;
-        imgSize: number;
-        title: string;
-        subTitle: string;
-    };
-    singleCollectionsListing: {
-        layout: string;
-        img: string;
-        imgSize: number;
-        title: string;
-        subTitle: string;
-    };
-    profileListing: {
-        layout: string;
-        img: string;
-        imgSize: number;
-        title: string;
-        subTitle: string;
-    };
-    notificationEmpty: {
-        layout: string;
-        img: string;
-        imgSize: number;
-        opacity: number;
-        title: string;
-        subTitle: string;
-    };
-    dashboardListing: {
-        layout: string;
-        img: string;
-        imgSize: number;
-        title: string;
-        subTitle: string;
-    };
-    successFullyPublish: {
-        layout: string;
-        img: string;
-        imgSize: number;
-        opacity: number;
-        title: string;
-        subTitle: string;
-    };
-    draftsListing: {
-        layout: string;
-        img: string;
-        imgSize: number;
-        title: string;
-        subTitle: string;
-        action: {
-            btnText: string;
-        };
-    };
-    publishedListing: {
-        layout: string;
-        img: string;
-        imgSize: number;
-        title: string;
-        subTitle: string;
-        action: {
-            btnText: string;
-        };
-    };
-    inModerationListing: {
-        layout: string;
-        img: string;
-        imgSize: number;
-        title: string;
-        subTitle: string;
-        action: {
-            btnText: string;
-        };
-    };
-    underMyModeration: {
-        layout: string;
-        img: string;
-        imgSize: number;
-        title: string;
-        subTitle: string;
-    };
-    underOthersModeration: {
-        layout: string;
-        img: string;
-        imgSize: number;
-        title: string;
-        subTitle: string;
-    };
-    awaitingMod: {
-        layout: string;
-        img: string;
-        imgSize: number;
-        title: string;
-        subTitle: string;
-    };
-    searchListing: {
-        layout: string;
-        img: string;
-        title: string;
-        subTitle: string;
-        additionalAction: {
-            text: string;
-        };
-    };
-    searchDashBoardListing: {
-        layout: string;
-        img: string;
-        title: string;
-        subTitle: string;
-    };
-    learningModule: {
-        layout: string;
-        img: string;
-        title: string;
-        subTitle: string;
-    };
-};

package/dist/components/EmptyStates/config.js

@@ -1,144 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.emptyStatesConfig = void 0;
-var emptyStatesConfig = function (_a) {
-    var _b = _a === void 0 ? {} : _a, _c = _b.contentTypeTitle, contentTypeTitle = _c === void 0 ? "default" : _c, _d = _b.tags, tags = _d === void 0 ? [] : _d;
-    var commaSeparatedTags = tags.map(function (item) { return item.toLowerCase(); }).join(',');
-    return {
-        multipleCollectionsListing: {
-            layout: "center",
-            img: "contentListing",
-            imgSize: 80,
-            title: "No tags added",
-            subTitle: "Publishing under ".concat(commaSeparatedTags, " shows all tagged content here, You can edit published content in future, when required.")
-        },
-        singlePublishingListing: {
-            layout: "center",
-            img: "contentListing",
-            imgSize: 80,
-            title: "No ".concat(contentTypeTitle.toLowerCase(), " Added"),
-            subTitle: "Publishing under  ".concat(contentTypeTitle.toLowerCase(), "  shows your content here, You can edit published content in future, when required.")
-        },
-        multiplePublishingListing: {
-            layout: "center",
-            img: "contentListing",
-            imgSize: 80,
-            title: "No Content Added",
-            subTitle: "Once you publish content on the platform, it shows up here. You can edit published content in future, when required. "
-        },
-        singleCollectionsListing: {
-            layout: "center",
-            img: "contentListing",
-            imgSize: 80,
-            title: "No ".concat(contentTypeTitle.toLowerCase(), " Added"),
-            subTitle: "Publishing under ".concat(contentTypeTitle.toLowerCase(), "  shows your content here, You can edit published content in future, when required.")
-        },
-        profileListing: {
-            layout: "center",
-            img: "contentListing",
-            imgSize: 80,
-            title: "No Profile Added",
-            subTitle: "Once you publish any profile on the platform, it shows up here. You can edit profile content in future, when required. "
-        },
-        notificationEmpty: {
-            layout: "center",
-            img: "mailBoxImg",
-            imgSize: 80,
-            opacity: 0.6,
-            title: "No Notifications Yet",
-            subTitle: "All updates,notifications and alerts will be displayed here "
-        },
-        dashboardListing: {
-            layout: "center",
-            img: "dashboardListing",
-            imgSize: 80,
-            title: "No Data Added",
-            subTitle: "Currently, no data is available. Start exploring insights once data is populated "
-        },
-        successFullyPublish: {
-            layout: "center",
-            img: "congratulationsImg",
-            imgSize: 150,
-            opacity: 1,
-            title: "Content Published Successfully",
-            subTitle: " "
-        },
-        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: "searchDashBoardListing",
-            title: "No search results found",
-            subTitle: "Sorry we couldn’t find any matches for this. Please make sure the words are spelled correctly "
-        },
-        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. "
-        }
-    };
-};
-exports.emptyStatesConfig = emptyStatesConfig;

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

@@ -1,11 +0,0 @@
-export function EmptyStates({ preset, actionOnClick, additionalActionOnClick, titleStyle, subTitleStyle, title: titleProp, contentTypeTitle, tags }: {
-    preset: any;
-    actionOnClick: any;
-    additionalActionOnClick: any;
-    titleStyle: any;
-    subTitleStyle: any;
-    title: any;
-    contentTypeTitle: any;
-    tags: any;
-}): React.JSX.Element;
-import React from "react";

package/dist/components/EmptyStates/index.js

@@ -1,66 +0,0 @@
-"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("../../assets/images/publishedListing.svg"));
-var contentListing_svg_1 = __importDefault(require("../../assets/images/contentListing.svg"));
-var draftsListing_svg_1 = __importDefault(require("../../assets/images/draftsListing.svg"));
-var moderationListing_svg_1 = __importDefault(require("../../assets/images/moderationListing.svg"));
-var inPublishedSearch_svg_1 = __importDefault(require("../../assets/images/inPublishedSearch.svg"));
-var learningModule_svg_1 = __importDefault(require("../../assets/images/learningModule.svg"));
-var searchListing_svg_1 = __importDefault(require("../../assets/images/searchListing.svg"));
-var mailBoxImg_svg_1 = __importDefault(require("../../assets/images/mailBoxImg.svg"));
-var congratulationsImg_svg_1 = __importDefault(require("../../assets/images/congratulationsImg.svg"));
-var searchDashBoardListing_svg_1 = __importDefault(require("../../assets/images/searchDashBoardListing.svg"));
-var dashboardListing_svg_1 = __importDefault(require("../../assets/images/dashboardListing.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  ", " {\n    padding: ", ";\n  }\n"], ["\n  padding: ", ";\n  display: ", ";\n  justify-content: \"center\";\n  text-align: ", ";\n\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, titleStyle = _a.titleStyle, subTitleStyle = _a.subTitleStyle, titleProp = _a.title, contentTypeTitle = _a.contentTypeTitle, tags = _a.tags;
-    var _b = (0, config_1.emptyStatesConfig)({ contentTypeTitle: contentTypeTitle, tags: tags })[preset], img = _b.img, imgSize = _b.imgSize, titleConfig = _b.title, subTitle = _b.subTitle, action = _b.action, additionalAction = _b.additionalAction, layout = _b.layout, opacity = _b.opacity;
-    var title = titleProp || titleConfig; //if a title prop is provided, it overrides title from config
-    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,
-        mailBoxImg: mailBoxImg_svg_1.default,
-        congratulationsImg: congratulationsImg_svg_1.default,
-        searchDashBoardListing: searchDashBoardListing_svg_1.default,
-        dashboardListing: dashboardListing_svg_1.default,
-    };
-    var Title = (0, styled_components_1.default)(Typo_1.SERIF_5_6)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    ", "\n  "], ["\n    ", "\n  "])), titleStyle ? titleStyle : { marginTop: "2rem" });
-    var SubTitle = (0, styled_components_1.default)(Typo_1.SANS_3_4)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    ", "\n  "], ["\n    ", "\n  "])), subTitleStyle ? subTitleStyle : { marginTop: "1rem" });
-    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: opacity ? opacity : layout === "center" ? "0.6" : "0.5",
-                    height: imgSize ? imgSize + "px" : "120px",
-                } })),
-            title && react_1.default.createElement(Title, null, title),
-            subTitle && react_1.default.createElement(SubTitle, null, 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, templateObject_2, templateObject_3;