oolib 2.121.2 → 2.122.1

package/dist/components/Playground/index.js

@@ -9,12 +9,12 @@ var icons_1 = require("../../icons");
 var themes_1 = require("../../themes");
 var App = function (_a) {
     var invert = _a.invert;
-    var Inspiring = icons_1.icons.Inspiring, Celebrate = icons_1.icons.Celebrate, Learning = icons_1.icons.Learning, ThumbsUp = icons_1.icons.ThumbsUp;
+    var Inspiring = icons_1.icons.Inspiring, Celebrate = icons_1.icons.Celebrate, Learning = icons_1.icons.Learning, Like = icons_1.icons.Like;
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(Celebrate, { size: 24, weight: "fill" }),
         react_1.default.createElement(Inspiring, { size: 24, weight: "fill" }),
         react_1.default.createElement(Learning, { size: 24, weight: "fill" }),
-        react_1.default.createElement(ThumbsUp, { size: 24, color: themes_1.colors.primaryColorText, fill: '#33A4FF', weight: "fill" })));
+        react_1.default.createElement(Like, { size: 24, weight: "fill" })));
 };
 var Playground = function (_a) {
     var invert = _a.invert;

package/dist/components/cards/CardContent/index.js

@@ -21,23 +21,30 @@ var mediaDataExists_1 = require("../utils/mediaDataExists");
 var styled_2 = require("./styled");
 var CardPlaceholder_1 = require("../comps/CardPlaceholder");
 var ImageInput_1 = require("../../ImageInput");
+var icons_1 = require("../../../icons");
+var Tags_1 = require("../../Tags");
+var CrownSimple = icons_1.icons.CrownSimple;
 var CardContent = function (_a) {
+    var _b, _c;
     var id = _a.id, data = _a.data, config = _a.config, to = _a.to, onClick = _a.onClick, openInNewTab = _a.openInNewTab, actions = _a.actions;
     var theme = (0, styled_components_1.useTheme)();
     var parseSpecialSyntax = (theme || {}).parseSpecialSyntax;
     var showEmbedSection = !!((config === null || config === void 0 ? void 0 : config.image) || (config === null || config === void 0 ? void 0 : config.video));
-    var _b = (0, parseCardConfig_1.parseCardConfig)({
+    var _d = (0, parseCardConfig_1.parseCardConfig)({
         config: config,
         data: data,
         parseSpecialSyntax: parseSpecialSyntax
-    }), cardLabel = _b.cardLabel, title = _b.title, video = _b.video, image = _b.image, metaBlock = _b.metaBlock;
+    }), cardLabel = _d.cardLabel, title = _d.title, video = _d.video, image = _d.image, metaBlock = _d.metaBlock, tagDisplay = _d.tagDisplay, variant = _d.variant;
     var dontRenderRes = (0, dontRenderIfBothOnClickAndTo_1.dontRenderIfBothOnClickAndTo)({ onClick: onClick, to: to });
     if (dontRenderRes)
         return dontRenderRes;
-    var _c = (0, decideLinkCompAndTarget_1.decideLinkCompAndTarget)({ to: to, openInNewTab: openInNewTab }), LinkComp = _c.LinkComp, target = _c.target, externalUrl = _c.externalUrl;
+    var _e = (0, decideLinkCompAndTarget_1.decideLinkCompAndTarget)({ to: to, openInNewTab: openInNewTab }), LinkComp = _e.LinkComp, target = _e.target, externalUrl = _e.externalUrl;
     return (react_1.default.createElement(LinkComp, { target: target, href: (0, injectHttps_1.injectHttps)(to), to: to },
-        react_1.default.createElement(styled_2.StyledCardWrapper, { id: id, onClick: onClick ? function (e) { return onClick(e, data); } : undefined },
-            react_1.default.createElement(styled_2.StyledUpperSection, null,
+        react_1.default.createElement(styled_2.StyledCardWrapper, { id: id, variant: variant, onClick: onClick ? function (e) { return onClick(e, data); } : undefined },
+            (variant === "success") && react_1.default.createElement(styled_2.StyledCrownWrapper, null,
+                react_1.default.createElement(styled_2.StyledCrown, null,
+                    react_1.default.createElement(CrownSimple, { size: 24 }))),
+            react_1.default.createElement(styled_2.StyledUpperSection, { variant: variant },
                 react_1.default.createElement(styled_2.StyledContainer1, null,
                     cardLabel ? (react_1.default.createElement("div", { title: cardLabel, style: {
                             display: "flex",
@@ -55,6 +62,7 @@ var CardContent = function (_a) {
                         react_1.default.createElement(LineClampWrapper_1.LineClampWrapper, { noOfLines_M: 6, title: title },
                             react_1.default.createElement(styled_1.StyledTitle, { capitalize: true, className: "StyledTitle" },
                                 react_1.default.createElement(styled_1.StyledTitleSpan, { className: "StyledTitleSpan" }, title))))) : null),
+                ((Array.isArray(tagDisplay.data) && (tagDisplay === null || tagDisplay === void 0 ? void 0 : tagDisplay.data.length) > 0) || typeof tagDisplay === "string") && react_1.default.createElement(Tags_1.TagLink, { display: Array.isArray(tagDisplay.data) ? (_b = tagDisplay === null || tagDisplay === void 0 ? void 0 : tagDisplay.data[0]) === null || _b === void 0 ? void 0 : _b.display : tagDisplay, to: (tagDisplay === null || tagDisplay === void 0 ? void 0 : tagDisplay.collectionId) ? "/published-page/".concat(tagDisplay === null || tagDisplay === void 0 ? void 0 : tagDisplay.collectionId, "?id=").concat((_c = tagDisplay === null || tagDisplay === void 0 ? void 0 : tagDisplay.data[0]) === null || _c === void 0 ? void 0 : _c._id) : "#", color: "green" }),
                 (metaBlock === null || metaBlock === void 0 ? void 0 : metaBlock.length) > 0 ? (react_1.default.createElement(MetaBlock_1.default, { data: data, config: metaBlock }) //show only two meta for cardContent
                 ) : null),
             showEmbedSection && (react_1.default.createElement(styled_2.StyledEmbedSection, null,

package/dist/components/cards/CardContent/styled.d.ts

@@ -3,3 +3,5 @@ export const StyledMetaBlock: import("styled-components").StyledComponent<"div",
 export const StyledEmbedSection: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const StyledCardWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const StyledUpperSection: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledCrownWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledCrown: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/components/cards/CardContent/styled.js

@@ -27,16 +27,27 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledUpperSection = exports.StyledCardWrapper = exports.StyledEmbedSection = exports.StyledMetaBlock = exports.StyledContainer1 = void 0;
+exports.StyledCrown = exports.StyledCrownWrapper = exports.StyledUpperSection = exports.StyledCardWrapper = exports.StyledEmbedSection = exports.StyledMetaBlock = exports.StyledContainer1 = void 0;
 var styled_components_1 = __importStar(require("styled-components"));
 var colors_1 = require("../../../themes/colors");
 var transitions_1 = require("../../../themes/mixins/transitions");
 var styled_1 = require("../styled");
-var greyColor5 = colors_1.colors.greyColor5, white = colors_1.colors.white;
+var greyColor5 = colors_1.colors.greyColor5, white = colors_1.colors.white, invertGreen = colors_1.colors.invertGreen;
 var flexColumn = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n"], ["\n  display: flex;\n  flex-direction: column;\n"])));
 exports.StyledContainer1 = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n  gap: 1rem;\n"], ["\n  ", "\n  gap: 1rem;\n"])), flexColumn);
 exports.StyledMetaBlock = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  gap: 0.5em;\n"], ["\n  display: flex;\n  gap: 0.5em;\n"])));
 exports.StyledEmbedSection = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  height: 100px;\n  display: flex;\n  align-items: center;\n  overflow: hidden;\n  width: 100%;\n"], ["\n  height: 100px;\n  display: flex;\n  align-items: center;\n  overflow: hidden;\n  width: 100%;\n"])));
-exports.StyledCardWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  height: 100%;\n  border: 2px solid ", ";\n  background-color: ", ";\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n\n  ", "\n\n  cursor: pointer;\n\n  &:hover {\n    background-color: ", ";\n    ", ";\n     #CardPlaceholder {\n      opacity: 1;\n    }\n  }\n"], ["\n  height: 100%;\n  border: 2px solid ", ";\n  background-color: ", ";\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n\n  ", "\n\n  cursor: pointer;\n\n  &:hover {\n    background-color: ", ";\n    ", ";\n     #CardPlaceholder {\n      opacity: 1;\n    }\n  }\n"])), greyColor5, greyColor5, (0, transitions_1.transition)("background-color"), white, styled_1.CSSTitleAnimationOnHover);
-exports.StyledUpperSection = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  /* height: 100%; */\n  flex-grow: 1;\n  justify-content: space-between;\n\n  padding: 2rem;\n  ", "\n  gap: 3rem;\n"], ["\n  /* height: 100%; */\n  flex-grow: 1;\n  justify-content: space-between;\n\n  padding: 2rem;\n  ", "\n  gap: 3rem;\n"])), flexColumn);
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
+exports.StyledCardWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  height: 100%;\n  border: 2px solid ", ";\n  background-color: ", "; \n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n\n  ", "\n\n  cursor: pointer;\n\n  &:hover {\n    background-color: ", ";\n    ", ";\n     #CardPlaceholder {\n      opacity: 1;\n    }\n  }\n"], ["\n  height: 100%;\n  border: 2px solid ", ";\n  background-color: ", "; \n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n\n  ", "\n\n  cursor: pointer;\n\n  &:hover {\n    background-color: ", ";\n    ", ";\n     #CardPlaceholder {\n      opacity: 1;\n    }\n  }\n"])), greyColor5, function (_a) {
+    var variant = _a.variant;
+    return variant === "success" ? colors_1.colors.lightGreen : greyColor5;
+}, (0, transitions_1.transition)("background-color"), white, styled_1.CSSTitleAnimationOnHover);
+exports.StyledUpperSection = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  /* height: 100%; */\n  flex-grow: 1;\n  justify-content: space-between;\n  padding: 2rem;\n  ", "\n  gap: ", ";\n  padding-top: ", ";\n"], ["\n  /* height: 100%; */\n  flex-grow: 1;\n  justify-content: space-between;\n  padding: 2rem;\n  ", "\n  gap: ", ";\n  padding-top: ", ";\n"])), flexColumn, function (_a) {
+    var variant = _a.variant;
+    return variant === "success" ? '2rem' : '3rem';
+}, function (_a) {
+    var variant = _a.variant;
+    return variant === "success" ? "1rem" : "2rem";
+});
+exports.StyledCrownWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  width: 100%;\n  display: flex; \n  justify-content: flex-end\n"], ["\n  width: 100%;\n  display: flex; \n  justify-content: flex-end\n"])));
+exports.StyledCrown = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  width: max-content;\n  background-color: ", ";\n  padding: 1rem;\n"], ["\n  width: max-content;\n  background-color: ", ";\n  padding: 1rem;\n"])), invertGreen);
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

package/dist/components/cards/utils/parseCardConfig.d.ts

@@ -6,6 +6,7 @@ export function parseCardConfig({ config, data, parseSpecialSyntax, }: {
     title: string;
     titleOptional: string;
     desc: string;
+    variant: any;
     cardLabel: any;
     video: any;
     image: any;

package/dist/components/cards/utils/parseCardConfig.js

@@ -18,10 +18,12 @@ var parseCardConfig = function (_a) {
     var tagDisplay = config.tagDisplay && (0, getVal_1.getVal)(data, config.tagDisplay);
     var image = config.image && (0, getVal_1.getVal)(data, ((_b = config.image) === null || _b === void 0 ? void 0 : _b.valuePath) || config.image); // cuz image config could be either `image: <valuePath>` or `image: { valuePath: <valuePath>, aspectRatio: <aspectRatio> }`
     var imageAspectRatio = (_c = config.image) === null || _c === void 0 ? void 0 : _c.aspectRatio;
+    var variant = (config.variant && Array.isArray((0, getVal_1.getVal)(data, config.variant)) && (0, getVal_1.getVal)(data, config.variant).length > 0) ? "success" : typeof config.variant === "string" ? config.variant : undefined;
     return {
         title: title,
         titleOptional: titleOptional,
         desc: desc,
+        variant: variant,
         cardLabel: cardLabel,
         video: video,
         image: image,

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

@@ -66,3 +66,4 @@ export declare const Stars: (props: any) => React.JSX.Element;
 export declare const Celebrate: (props: any) => React.JSX.Element;
 export declare const Inspiring: (props: any) => React.JSX.Element;
 export declare const Learning: (props: any) => React.JSX.Element;
+export declare const Like: (props: any) => React.JSX.Element;

package/dist/icons/custom/index.js

@@ -15,7 +15,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.USAFlag = exports.UKFlag = exports.MalaysiaFlag = exports.ColombiaFlag = exports.BrazilFlag = exports.AudioEmbedIcon = exports.VideoEmbedIcon = exports.Attachment2 = exports.PDFIcon = exports.RichFormatToolOrderedList = exports.RichFormatToolUnorderedList = exports.RichFormatToolH2 = exports.RichFormatToolBlockquote = exports.LinkIcon = exports.UnderlineBtn = exports.ItalicBtn = exports.BoldBtn = exports.SettingsSM = exports.Close_S = exports.UploadImage = exports.KebabMenu = exports.Website_solid_SM = exports.Phone_solid_SM = exports.Mail_solid_SM = exports.Youtube_solid_SM = exports.Instagram_solid_SM = exports.Twitter_solid_SM = exports.Linkedin_solid_SM = exports.Facebook_solid_SM = exports.EditSM = exports.AddXS = exports.UploadSM = exports.Download = exports.Download__nofill = exports.Index = exports.Person14 = exports.Location14 = exports.ModalBulbIcon = exports.KenyaFlag = exports.NigeriaFlag = exports.IndiaFlag = exports.BadgeVetted = exports.BadgeMod = exports.BadgeSuperAdmin = exports.BadgeAdmin = exports.OkeGoogleIcon = exports.LetterH = exports.LanguageIcon = exports.MultipleImages = exports.IndexIcon = void 0;
-exports.Learning = exports.Inspiring = exports.Celebrate = exports.Stars = exports.SpainFlag = exports.PakistanFlag = exports.ChileFlag = exports.IndonesiaFlag = void 0;
+exports.Like = exports.Learning = exports.Inspiring = exports.Celebrate = exports.Stars = exports.SpainFlag = exports.PakistanFlag = exports.ChileFlag = exports.IndonesiaFlag = void 0;
 var react_1 = __importDefault(require("react"));
 var themes_1 = require("../../themes");
 var DisplayIcon_1 = require("../../utils/comps/DisplayIcon");
@@ -449,3 +449,13 @@ var Learning = function (props) {
         react_1.default.createElement("path", { d: "M20.3571 7.00065H14.5714C14.0724 7.00065 13.5803 7.12113 13.134 7.35254C12.6876 7.58396 12.2994 7.91995 12 8.33392C11.7006 7.91995 11.3124 7.58396 10.866 7.35254C10.4197 7.12113 9.92757 7.00065 9.42857 7.00065H3.64286C3.47236 7.00065 3.30885 7.07088 3.18829 7.1959C3.06773 7.32092 3 7.49048 3 7.66728V17.6668C3 17.8436 3.06773 18.0132 3.18829 18.1382C3.30885 18.2632 3.47236 18.3335 3.64286 18.3335H9.42857C9.94006 18.3335 10.4306 18.5442 10.7923 18.9192C11.154 19.2943 11.3571 19.803 11.3571 20.3334C11.3571 20.5102 11.4249 20.6797 11.5454 20.8047C11.666 20.9298 11.8295 21 12 21C12.1705 21 12.334 20.9298 12.4546 20.8047C12.5751 20.6797 12.6429 20.5102 12.6429 20.3334C12.6429 19.803 12.846 19.2943 13.2077 18.9192C13.5694 18.5442 14.0599 18.3335 14.5714 18.3335H20.3571C20.5276 18.3335 20.6912 18.2632 20.8117 18.1382C20.9323 18.0132 21 17.8436 21 17.6668V7.66728C21 7.49048 20.9323 7.32092 20.8117 7.1959C20.6912 7.07088 20.5276 7.00065 20.3571 7.00065ZM9.42857 17.0002H4.28571V8.33392H9.42857C9.94006 8.33392 10.4306 8.54462 10.7923 8.91968C11.154 9.29473 11.3571 9.80342 11.3571 10.3338V17.6668C10.8013 17.2331 10.1242 16.999 9.42857 17.0002ZM19.7143 17.0002H14.5714C13.8758 16.999 13.1987 17.2331 12.6429 17.6668V10.3338C12.6429 9.80342 12.846 9.29473 13.2077 8.91968C13.5694 8.54462 14.0599 8.33392 14.5714 8.33392H19.7143V17.0002ZM8.91429 4.59993C9.27357 4.10316 9.73945 3.69997 10.275 3.42227C10.8106 3.14457 11.4012 3 12 3C12.5988 3 13.1894 3.14457 13.725 3.42227C14.2606 3.69997 14.7264 4.10316 15.0857 4.59993C15.1882 4.74126 15.2324 4.91903 15.2085 5.09413C15.1846 5.26924 15.0946 5.42733 14.9583 5.53363C14.8221 5.63994 14.6506 5.68574 14.4818 5.66097C14.3129 5.6362 14.1605 5.54289 14.0579 5.40156C13.8185 5.07006 13.5078 4.80099 13.1506 4.61565C12.7934 4.43032 12.3994 4.33383 12 4.33383C11.6006 4.33383 11.2066 4.43032 10.8494 4.61565C10.4922 4.80099 10.1815 5.07006 9.94205 5.40156C9.8913 5.47154 9.82774 5.53046 9.75502 5.57497C9.6823 5.61948 9.60184 5.64871 9.51823 5.66097C9.43462 5.67324 9.3495 5.6683 9.26773 5.64645C9.18596 5.62461 9.10914 5.58627 9.04165 5.53363C8.97417 5.481 8.91734 5.41509 8.87442 5.33968C8.8315 5.26427 8.80332 5.18084 8.79149 5.09413C8.77966 5.00743 8.78442 4.91916 8.80549 4.83437C8.82656 4.74957 8.86353 4.66991 8.91429 4.59993Z", fill: "#EB5A51" })));
 };
 exports.Learning = Learning;
+var Like = function (props) {
+    return (react_1.default.createElement("svg", { width: props.size || 30, height: props.size || 30, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+        react_1.default.createElement("g", { "clip-path": "url(#clip0_190_4242)" },
+            react_1.default.createElement("path", { d: "M20.2813 8.25938C20.1053 8.05994 19.8888 7.90023 19.6464 7.79086C19.4039 7.68148 19.141 7.62495 18.875 7.625H14.5V6.375C14.5 5.5462 14.1708 4.75134 13.5847 4.16529C12.9987 3.57924 12.2038 3.25 11.375 3.25C11.2589 3.24992 11.145 3.28218 11.0462 3.34317C10.9474 3.40417 10.8676 3.49148 10.8156 3.59531L7.86406 9.5H4.5C4.16848 9.5 3.85054 9.6317 3.61612 9.86612C3.3817 10.1005 3.25 10.4185 3.25 10.75V17.625C3.25 17.9565 3.3817 18.2745 3.61612 18.5089C3.85054 18.7433 4.16848 18.875 4.5 18.875H17.9375C18.3943 18.8752 18.8354 18.7085 19.1781 18.4065C19.5208 18.1044 19.7413 17.6876 19.7984 17.2344L20.7359 9.73438C20.7692 9.47033 20.7458 9.20224 20.6674 8.94792C20.589 8.6936 20.4574 8.45888 20.2813 8.25938ZM4.5 10.75H7.625V17.625H4.5V10.75Z", fill: props.weight === "fill" ? "#C0CFF7" : "" }),
+            react_1.default.createElement("path", { d: "M20.2813 8.25938C20.1053 8.05994 19.8888 7.90023 19.6464 7.79086C19.4039 7.68148 19.141 7.62495 18.875 7.625H14.5V6.375C14.5 5.5462 14.1708 4.75134 13.5847 4.16529C12.9987 3.57924 12.2038 3.25 11.375 3.25C11.2589 3.24992 11.145 3.28218 11.0462 3.34317C10.9474 3.40417 10.8676 3.49148 10.8156 3.59531L7.86406 9.5H4.5C4.16848 9.5 3.85054 9.6317 3.61612 9.86612C3.3817 10.1005 3.25 10.4185 3.25 10.75V17.625C3.25 17.9565 3.3817 18.2745 3.61612 18.5089C3.85054 18.7433 4.16848 18.875 4.5 18.875H17.9375C18.3943 18.8752 18.8354 18.7085 19.1781 18.4065C19.5208 18.1044 19.7413 17.6876 19.7984 17.2344L20.7359 9.73438C20.7692 9.47033 20.7458 9.20224 20.6674 8.94792C20.589 8.6936 20.4574 8.45888 20.2813 8.25938ZM4.5 10.75H7.625V17.625H4.5V10.75ZM19.4953 9.57812L18.5578 17.0781C18.5388 17.2292 18.4653 17.3681 18.351 17.4688C18.2368 17.5695 18.0898 17.6251 17.9375 17.625H8.875V10.2727L11.743 4.53594C12.168 4.62101 12.5505 4.85075 12.8253 5.18605C13.1 5.52135 13.2501 5.9415 13.25 6.375V8.25C13.25 8.41576 13.3158 8.57473 13.4331 8.69194C13.5503 8.80915 13.7092 8.875 13.875 8.875H18.875C18.9637 8.87497 19.0514 8.89382 19.1322 8.93028C19.2131 8.96675 19.2852 9.02001 19.3439 9.08652C19.4026 9.15303 19.4464 9.23126 19.4725 9.31602C19.4986 9.40078 19.5064 9.49013 19.4953 9.57812Z", fill: "#3D71F7" })),
+        react_1.default.createElement("defs", null,
+            react_1.default.createElement("clipPath", { id: "clip0_190_4242" },
+                react_1.default.createElement("rect", { width: "20", height: "20", fill: "white", transform: "translate(2 2)" })))));
+};
+exports.Like = Like;

package/dist/icons/index.d.ts

@@ -109,6 +109,7 @@ export namespace icons {
     export { SquareHalf };
     export { SquareHalfBottom };
     export { MagicWand };
+    export { CrownSimple };
     export { OkeGoogleIcon };
     export { LetterH };
     export { IndexIcon };
@@ -167,6 +168,7 @@ export namespace icons {
     export { Celebrate };
     export { Inspiring };
     export { Learning };
+    export { Like };
 }
 import { PencilSimple } from 'phosphor-react';
 import { PencilLine } from 'phosphor-react';
@@ -278,6 +280,7 @@ import { SlackLogo } from 'phosphor-react';
 import { SquareHalf } from 'phosphor-react';
 import { SquareHalfBottom } from 'phosphor-react';
 import { MagicWand } from 'phosphor-react';
+import { CrownSimple } from 'phosphor-react';
 import { OkeGoogleIcon } from "./custom";
 import { LetterH } from "./custom";
 import { IndexIcon } from "./custom";
@@ -336,3 +339,4 @@ import { Stars } from "./custom";
 import { Celebrate } from "./custom";
 import { Inspiring } from "./custom";
 import { Learning } from "./custom";
+import { Like } from "./custom";

package/dist/icons/index.js

@@ -114,6 +114,7 @@ exports.icons = {
     SquareHalf: phosphor_react_1.SquareHalf,
     SquareHalfBottom: phosphor_react_1.SquareHalfBottom,
     MagicWand: phosphor_react_1.MagicWand,
+    CrownSimple: phosphor_react_1.CrownSimple,
     //custom
     OkeGoogleIcon: custom_1.OkeGoogleIcon,
     LetterH: custom_1.LetterH,
@@ -173,4 +174,5 @@ exports.icons = {
     Celebrate: custom_1.Celebrate,
     Inspiring: custom_1.Inspiring,
     Learning: custom_1.Learning,
+    Like: custom_1.Like
 };

package/dist/stories/cards/CardContent.stories.d.ts

@@ -1,6 +1,19 @@
 declare namespace _default {
     let title: string;
     let argTypes: {
+        tagDisplay: {
+            name: string;
+            control: {
+                type: string;
+            };
+        };
+        variant: {
+            name: string;
+            control: {
+                type: string;
+            };
+            options: string[];
+        };
         actions: {
             name: string;
             control: {

package/dist/stories/cards/utils/cardArgTypes.d.ts

@@ -81,7 +81,7 @@ export namespace cardContentArgs {
     let actions: boolean;
 }
 export namespace cardContentArgTypes {
-    export namespace actions_1 {
+    export namespace tagDisplay {
         let name_8: string;
         export { name_8 as name };
         export namespace control_8 {
@@ -89,15 +89,7 @@ export namespace cardContentArgTypes {
         }
         export { control_8 as control };
     }
-    export { actions_1 as actions };
-}
-export namespace listContentArgs {
-    export let statusTag: any;
-    let actions_2: boolean;
-    export { actions_2 as actions };
-}
-export namespace listContentArgTypes {
-    export namespace statusTag_1 {
+    export namespace variant {
         let name_9: string;
         export { name_9 as name };
         export namespace control_9 {
@@ -105,9 +97,10 @@ export namespace listContentArgTypes {
             export { type_1 as type };
         }
         export { control_9 as control };
+        let options_1: string[];
+        export { options_1 as options };
     }
-    export { statusTag_1 as statusTag };
-    export namespace actions_3 {
+    export namespace actions_1 {
         let name_10: string;
         export { name_10 as name };
         export namespace control_10 {
@@ -116,6 +109,33 @@ export namespace listContentArgTypes {
         }
         export { control_10 as control };
     }
+    export { actions_1 as actions };
+}
+export namespace listContentArgs {
+    export let statusTag: any;
+    let actions_2: boolean;
+    export { actions_2 as actions };
+}
+export namespace listContentArgTypes {
+    export namespace statusTag_1 {
+        let name_11: string;
+        export { name_11 as name };
+        export namespace control_11 {
+            let type_3: string;
+            export { type_3 as type };
+        }
+        export { control_11 as control };
+    }
+    export { statusTag_1 as statusTag };
+    export namespace actions_3 {
+        let name_12: string;
+        export { name_12 as name };
+        export namespace control_12 {
+            let type_4: string;
+            export { type_4 as type };
+        }
+        export { control_12 as control };
+    }
     export { actions_3 as actions };
 }
 export namespace cardEmbedArgs {
@@ -123,15 +143,16 @@ export namespace cardEmbedArgs {
 }
 export namespace cardEmbedArgTypes {
     export namespace disabled_1 {
-        let name_11: string;
-        export { name_11 as name };
-        let control_11: string;
-        export { control_11 as control };
+        let name_13: string;
+        export { name_13 as name };
+        let control_13: string;
+        export { control_13 as control };
     }
     export { disabled_1 as disabled };
 }
 export namespace cardProfileArgs {
-    export let tagDisplay: any;
+    let tagDisplay_1: any;
+    export { tagDisplay_1 as tagDisplay };
     let image_2: string;
     export { image_2 as image };
     let title_2: string;
@@ -144,18 +165,18 @@ export namespace cardProfileArgs {
     export { metaName_2 as metaName };
 }
 export namespace cardProfileArgTypes {
-    export namespace tagDisplay_1 {
-        let name_12: string;
-        export { name_12 as name };
-        let control_12: string;
-        export { control_12 as control };
+    export namespace tagDisplay_2 {
+        let name_14: string;
+        export { name_14 as name };
+        let control_14: string;
+        export { control_14 as control };
     }
-    export { tagDisplay_1 as tagDisplay };
+    export { tagDisplay_2 as tagDisplay };
     export namespace image_3 {
-        let name_13: string;
-        export { name_13 as name };
-        let control_13: string;
-        export { control_13 as control };
+        let name_15: string;
+        export { name_15 as name };
+        let control_15: string;
+        export { control_15 as control };
     }
     export { image_3 as image };
 }
@@ -173,10 +194,10 @@ export namespace listProfileArgs {
 }
 export namespace listProfileArgTypes {
     export namespace image_5 {
-        let name_14: string;
-        export { name_14 as name };
-        let control_14: string;
-        export { control_14 as control };
+        let name_16: string;
+        export { name_16 as name };
+        let control_16: string;
+        export { control_16 as control };
     }
     export { image_5 as image };
 }

package/dist/stories/cards/utils/cardArgTypes.js

@@ -53,6 +53,15 @@ exports.cardContentArgs = {
     actions: false
 };
 exports.cardContentArgTypes = {
+    tagDisplay: {
+        name: "Status Tag",
+        control: { type: "text" },
+    },
+    variant: {
+        name: "Variant",
+        control: { type: "select" },
+        options: ["success", undefined]
+    },
     actions: {
         name: "Actions",
         control: { type: "boolean" },

package/dist/stories/cards/utils/parseCardArgs.d.ts

@@ -1,4 +1,4 @@
-export function parseCardArgs({ cardLabel, title, mediaType, image, video, metaText, metaName, metaDate, actions: _actions, statusTag, disabled, tagDisplay }: {
+export function parseCardArgs({ cardLabel, title, mediaType, image, video, metaText, metaName, metaDate, actions: _actions, statusTag, disabled, tagDisplay, variant, }: {
     cardLabel: any;
     title: any;
     mediaType: any;
@@ -11,10 +11,12 @@ export function parseCardArgs({ cardLabel, title, mediaType, image, video, metaT
     statusTag: any;
     disabled: any;
     tagDisplay: any;
+    variant: any;
 }): {
     data: {
         title: any;
         cardLabel: any;
+        variant: any;
         image: {
             publicUrl: any;
         }[];
@@ -41,6 +43,7 @@ export function parseCardArgs({ cardLabel, title, mediaType, image, video, metaT
         title: string;
         cardLabel: string;
         tagDisplay: string;
+        variant: any;
     };
     disabled: any;
 };

package/dist/stories/cards/utils/parseCardArgs.js

@@ -22,10 +22,11 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.parseCardArgs = void 0;
 var parseCardArgs = function (_a) {
-    var cardLabel = _a.cardLabel, title = _a.title, mediaType = _a.mediaType, image = _a.image, video = _a.video, metaText = _a.metaText, metaName = _a.metaName, metaDate = _a.metaDate, _actions = _a.actions, statusTag = _a.statusTag, disabled = _a.disabled, tagDisplay = _a.tagDisplay;
+    var cardLabel = _a.cardLabel, title = _a.title, mediaType = _a.mediaType, image = _a.image, video = _a.video, metaText = _a.metaText, metaName = _a.metaName, metaDate = _a.metaDate, _actions = _a.actions, statusTag = _a.statusTag, disabled = _a.disabled, tagDisplay = _a.tagDisplay, variant = _a.variant;
     var data = {
         title: title,
         cardLabel: cardLabel,
+        variant: variant,
         image: image && [{ publicUrl: image }],
         video: video && [{ publicUrl: video }],
         text: metaText || undefined,
@@ -33,7 +34,7 @@ var parseCardArgs = function (_a) {
         date: metaDate || undefined,
         tagDisplay: tagDisplay,
     };
-    var config = __assign(__assign(__assign({ title: "title", cardLabel: "cardLabel", tagDisplay: "tagDisplay" }, (mediaType === "image" ? { image: "image" } : {})), (mediaType === "video" ? { video: "video" } : {})), { metaBlock: __spreadArray(__spreadArray(__spreadArray([], (metaText ? [{ key: "text", valuePath: "text" }] : []), true), (metaName ? [{ key: "name", valuePath: "name" }] : []), true), (metaDate ? [{ key: "date", valuePath: "date" }] : []), true) });
+    var config = __assign(__assign(__assign({ title: "title", cardLabel: "cardLabel", tagDisplay: "tagDisplay", variant: variant }, (mediaType === "image" ? { image: "image" } : {})), (mediaType === "video" ? { video: "video" } : {})), { metaBlock: __spreadArray(__spreadArray(__spreadArray([], (metaText ? [{ key: "text", valuePath: "text" }] : []), true), (metaName ? [{ key: "name", valuePath: "name" }] : []), true), (metaDate ? [{ key: "date", valuePath: "date" }] : []), true) });
     var actions = !_actions
         ? undefined
         : [

package/dist/utilsOolib/index.d.ts

@@ -12,7 +12,7 @@ import { ColorsType } from '../themes/colors';
  * @param {ReactNode} value - The value to be localized
  * @return {ReactNode} The localized value
  */
-export declare const useLocale: () => (value: ReactNode) => ReactNode;
+export declare const useLocale: () => ((value: ReactNode) => ReactNode);
 /**
  * Returns the primary color at 10% opacity from the provided colors object or falls back to a default primary color
  *

package/package.json

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