oolib 2.151.0 → 2.152.1

package/dist/components/HomeCover/index.js

@@ -48,7 +48,8 @@ var HomeCover = function (_a) {
     var title = _a.title, subtitle = _a.subtitle, desc = _a.desc, CTALink = _a.CTALink, customComp = _a.customComp, coverImagesConfig = _a.coverImagesConfig, _b = _a.variant, variant = _b === void 0 ? "default" : _b;
     var screenWidth = (0, useScreenWidth_1.useScreenWidth)();
     var isDesktop = screenWidth > (0, mixins_1.getBreakPoint)("md");
-    var history = (0, react_router_dom_1.useHistory)();
+    var history = react_router_dom_1.useHistory ? (0, react_router_dom_1.useHistory)() : undefined;
+    var navigate = react_router_dom_1.useNavigate ? (0, react_router_dom_1.useNavigate)() : undefined;
     //   const {deployment: {_CoverImages : coverImagesConfig}} = useGetQueryData('platformConfigs');
     //backwards compat
     var _CoverImages = coverImagesConfig.every(function (c) { return typeof c === "string"; })
@@ -132,7 +133,7 @@ var HomeCover = function (_a) {
     var genCTALink = function (_a) {
         var CTALink = _a.CTALink, variant = _a.variant, isDesktop = _a.isDesktop;
         return CTALink && (react_1.default.createElement(Buttons_1.ButtonPrimary, { className: "HomeCover__cta", icon: "CaretRight", M: variant === "small" && !isDesktop && true, style: __assign({ position: "absolute", bottom: 0, borderRadius: 0, right: variant === "small" && !isDesktop ? "2rem" : 0 }, (variant === "small" && !isDesktop ? { zIndex: 100 } : {})), onClick: function () {
-                history.push(CTALink);
+                history ? history.push(CTALink) : navigate(CTALink);
             } }));
     };
     var TitleTypoComp = variant === "small" ? Typo_1.SERIF_8_9 : Typo_1.SERIF_9_10;

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

@@ -28,5 +28,5 @@ exports.SERIF_8_9_STYLED = styled_components_1.default.h2(templateObject_15 || (
 exports.SERIF_9_10_STYLED = styled_components_1.default.h1(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), index_1.typo.SERIF_9_10);
 exports.LABEL_STYLED = styled_components_1.default.h6(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), index_1.typo.LABEL);
 exports.BLOCKQUOTE_STYLED = styled_components_1.default.h3(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), index_1.typo.BLOCKQUOTE);
-exports.TYPOCLASSES = styled_components_1.default.div(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  .SANS_0 {\n    ", "\n  }\n\n  .SANS_2 {\n    ", "\n  }\n\n  .SANS_3 {\n    ", "\n  }\n\n  .SANS_4 {\n    ", "\n  }\n\n  .SERIF_3 {\n    ", "\n  }\n\n  .SANS_4_5 {\n    ", "\n  }\n\n  .SANS_5_6 {\n    ", "\n  }\n\n  .SERIF_3_4 {\n    ", "\n  }\n\n  .SERIF_4_5 {\n    ", "\n  }\n\n  .SERIF_5_6 {\n    ", "\n  }\n\n  .SERIF_6_7 {\n    ", "\n  }\n\n  .SERIF_7_8 {\n    ", "\n  }\n\n  .SERIF_8_9 {\n    ", "\n  }\n\n  .SERIF_9_10 {\n    ", "\n  }\n\n  .LABEL {\n    ", "\n  }\n\n  .SANS_7_8 {\n    ", "\n  }\n\n  .BLOCKQUOTE {\n    ", "\n  }\n\n  .OKE-markdown {\n    a,\n    p {\n      ", "\n    }\n  }\n"], ["\n  .SANS_0 {\n    ", "\n  }\n\n  .SANS_2 {\n    ", "\n  }\n\n  .SANS_3 {\n    ", "\n  }\n\n  .SANS_4 {\n    ", "\n  }\n\n  .SERIF_3 {\n    ", "\n  }\n\n  .SANS_4_5 {\n    ", "\n  }\n\n  .SANS_5_6 {\n    ", "\n  }\n\n  .SERIF_3_4 {\n    ", "\n  }\n\n  .SERIF_4_5 {\n    ", "\n  }\n\n  .SERIF_5_6 {\n    ", "\n  }\n\n  .SERIF_6_7 {\n    ", "\n  }\n\n  .SERIF_7_8 {\n    ", "\n  }\n\n  .SERIF_8_9 {\n    ", "\n  }\n\n  .SERIF_9_10 {\n    ", "\n  }\n\n  .LABEL {\n    ", "\n  }\n\n  .SANS_7_8 {\n    ", "\n  }\n\n  .BLOCKQUOTE {\n    ", "\n  }\n\n  .OKE-markdown {\n    a,\n    p {\n      ", "\n    }\n  }\n"])), index_1.typo.SANS_0, index_1.typo.SANS_2, index_1.typo.SANS_3, index_1.typo.SANS_4, index_1.typo.SERIF_3, index_1.typo.SANS_4_5, index_1.typo.SANS_5_6, index_1.typo.SERIF_3_4, index_1.typo.SERIF_4_5, index_1.typo.SERIF_5_6, index_1.typo.SERIF_6_7, index_1.typo.SERIF_7_8, index_1.typo.SERIF_8_9, index_1.typo.SERIF_9_10, index_1.typo.LABEL, index_1.typo.SANS_7_8, index_1.typo.BLOCKQUOTE, index_1.typo.SANS_3);
+exports.TYPOCLASSES = styled_components_1.default.div(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  .SANS_0 {\n    ", "\n  }\n\n  .SANS_2 {\n    ", "\n  }\n\n  .SANS_3 {\n    ", "\n  }\n\n  .SANS_4 {\n    ", "\n  }\n\n  .SERIF_3 {\n    ", "\n  }\n\n  .SANS_4_5 {\n    ", "\n  }\n\n  .SANS_5_6 {\n    ", "\n  }\n\n  .SERIF_3_4 {\n    ", "\n  }\n\n  .SERIF_4_5 {\n    ", "\n  }\n\n  .SERIF_5_6 {\n    ", "\n  }\n\n  .SERIF_6_7 {\n    ", "\n  }\n\n  .SERIF_7_8 {\n    ", "\n  }\n\n  .SERIF_8_9 {\n    ", "\n  }\n\n  .SERIF_9_10 {\n    ", "\n  }\n\n  .LABEL {\n    ", "\n  }\n\n  .SANS_7_8 {\n    ", "\n  }\n\n  .BLOCKQUOTE {\n    ", "\n  }\n\n"], ["\n  .SANS_0 {\n    ", "\n  }\n\n  .SANS_2 {\n    ", "\n  }\n\n  .SANS_3 {\n    ", "\n  }\n\n  .SANS_4 {\n    ", "\n  }\n\n  .SERIF_3 {\n    ", "\n  }\n\n  .SANS_4_5 {\n    ", "\n  }\n\n  .SANS_5_6 {\n    ", "\n  }\n\n  .SERIF_3_4 {\n    ", "\n  }\n\n  .SERIF_4_5 {\n    ", "\n  }\n\n  .SERIF_5_6 {\n    ", "\n  }\n\n  .SERIF_6_7 {\n    ", "\n  }\n\n  .SERIF_7_8 {\n    ", "\n  }\n\n  .SERIF_8_9 {\n    ", "\n  }\n\n  .SERIF_9_10 {\n    ", "\n  }\n\n  .LABEL {\n    ", "\n  }\n\n  .SANS_7_8 {\n    ", "\n  }\n\n  .BLOCKQUOTE {\n    ", "\n  }\n\n"])), index_1.typo.SANS_0, index_1.typo.SANS_2, index_1.typo.SANS_3, index_1.typo.SANS_4, index_1.typo.SERIF_3, index_1.typo.SANS_4_5, index_1.typo.SANS_5_6, index_1.typo.SERIF_3_4, index_1.typo.SERIF_4_5, index_1.typo.SERIF_5_6, index_1.typo.SERIF_6_7, index_1.typo.SERIF_7_8, index_1.typo.SERIF_8_9, index_1.typo.SERIF_9_10, index_1.typo.LABEL, index_1.typo.SANS_7_8, index_1.typo.BLOCKQUOTE);
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19;

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

@@ -69,3 +69,4 @@ 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;
 export declare const Reactions: (props: any) => React.JSX.Element;
+export declare const WarningDiamond: (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.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.SenegalFlag = 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.Reactions = exports.Like = exports.Learning = exports.Inspiring = exports.Celebrate = exports.Stars = exports.SpainFlag = exports.PakistanFlag = exports.ChileFlag = exports.IndonesiaFlag = exports.USAFlag = void 0;
+exports.WarningDiamond = exports.Reactions = exports.Like = exports.Learning = exports.Inspiring = exports.Celebrate = exports.Stars = exports.SpainFlag = exports.PakistanFlag = exports.ChileFlag = exports.IndonesiaFlag = exports.USAFlag = void 0;
 var react_1 = __importDefault(require("react"));
 var themes_1 = require("../../themes");
 var DisplayIcon_1 = require("../../utils/comps/DisplayIcon");
@@ -86,7 +86,7 @@ var BadgeMod = function (props) {
 exports.BadgeMod = BadgeMod;
 var BadgeVetted = function (props) {
     return (react_1.default.createElement("svg", __assign({ width: 17, height: 17, viewBox: "0 0 17 17", fill: "none" }, props),
-        react_1.default.createElement("circle", { cx: 8.324, cy: 8.401, r: 8, fill: "#390" }),
+        react_1.default.createElement("circle", { cx: 8.324, cy: 8.401, r: 8, fill: "#53AC00" }),
         react_1.default.createElement("path", { d: "M5.324 8.774l1.79 2.127c1.678-1.992 2.755-3.27 4.21-5", stroke: "#fff", strokeLinecap: "round", strokeLinejoin: "round" })));
 };
 exports.BadgeVetted = BadgeVetted;
@@ -483,3 +483,12 @@ var Reactions = function (props) {
                 react_1.default.createElement("rect", { width: "256", height: "256", fill: "white" })))));
 };
 exports.Reactions = Reactions;
+var WarningDiamond = function (props) {
+    return (react_1.default.createElement("svg", { width: props.size || 30, height: props.size || 30, viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+        react_1.default.createElement("g", { id: "WarningDiamond", "clip-path": "url(#clip0_3079_1091)" },
+            react_1.default.createElement("path", { id: "Vector", d: "M11.0311 5.47125L6.52877 0.968438C6.38825 0.82875 6.19816 0.750343 6.00002 0.750343C5.80188 0.750343 5.61179 0.82875 5.47127 0.968438L0.971268 5.47125C0.83158 5.61177 0.753174 5.80186 0.753174 6C0.753174 6.19814 0.83158 6.38823 0.971268 6.52875L5.47361 11.0316C5.61413 11.1713 5.80422 11.2497 6.00236 11.2497C6.2005 11.2497 6.39059 11.1713 6.53111 11.0316L11.0335 6.52875C11.1731 6.38823 11.2516 6.19814 11.2516 6C11.2516 5.80186 11.1731 5.61177 11.0335 5.47125H11.0311ZM5.62502 3.75C5.62502 3.65054 5.66453 3.55516 5.73485 3.48484C5.80518 3.41451 5.90056 3.375 6.00002 3.375C6.09947 3.375 6.19486 3.41451 6.26518 3.48484C6.33551 3.55516 6.37502 3.65054 6.37502 3.75V6.375C6.37502 6.47446 6.33551 6.56984 6.26518 6.64017C6.19486 6.71049 6.09947 6.75 6.00002 6.75C5.90056 6.75 5.80518 6.71049 5.73485 6.64017C5.66453 6.56984 5.62502 6.47446 5.62502 6.375V3.75ZM6.00002 8.625C5.88877 8.625 5.78001 8.59201 5.68751 8.5302C5.59501 8.46839 5.52291 8.38054 5.48034 8.27776C5.43776 8.17498 5.42662 8.06188 5.44833 7.95276C5.47003 7.84365 5.5236 7.74342 5.60227 7.66475C5.68094 7.58609 5.78117 7.53251 5.89028 7.51081C5.99939 7.4891 6.11249 7.50024 6.21528 7.54282C6.31806 7.58539 6.40591 7.65749 6.46772 7.74999C6.52953 7.84249 6.56252 7.95125 6.56252 8.0625C6.56252 8.21168 6.50326 8.35476 6.39777 8.46025C6.29228 8.56574 6.1492 8.625 6.00002 8.625Z", fill: "#C41717" })),
+        react_1.default.createElement("defs", null,
+            react_1.default.createElement("clipPath", { id: "clip0_3079_1091" },
+                react_1.default.createElement("rect", { width: "12", height: "12", fill: "white" })))));
+};
+exports.WarningDiamond = WarningDiamond;

package/dist/icons/index.d.ts

@@ -179,6 +179,7 @@ export namespace icons {
     export { Learning };
     export { Like };
     export { Reactions };
+    export { WarningDiamond };
 }
 import { PencilSimple } from 'phosphor-react';
 import { PencilLine } from 'phosphor-react';
@@ -360,3 +361,4 @@ import { Inspiring } from "./custom";
 import { Learning } from "./custom";
 import { Like } from "./custom";
 import { Reactions } from "./custom";
+import { WarningDiamond } from "./custom";

package/dist/icons/index.js

@@ -185,4 +185,5 @@ exports.icons = {
     Learning: custom_1.Learning,
     Like: custom_1.Like,
     Reactions: custom_1.Reactions,
+    WarningDiamond: custom_1.WarningDiamond
 };

package/dist/index.d.ts

@@ -21,6 +21,7 @@ export * from "./v2/components/BlockLabel";
 export * from "./v2/components/cards/CardContent";
 export * from "./v2/components/Tags";
 export * from "./v2/components/ImagePlaceholder";
+export * from "./v2/components/TextInputs";
 export { colors } from "./themes";
 export { icons } from "./icons";
 export { Section } from "./components/Section";

package/dist/index.js

@@ -178,6 +178,7 @@ __exportStar(require("./v2/components/BlockLabel"), exports);
 __exportStar(require("./v2/components/cards/CardContent"), exports);
 __exportStar(require("./v2/components/Tags"), exports);
 __exportStar(require("./v2/components/ImagePlaceholder"), exports);
+__exportStar(require("./v2/components/TextInputs"), exports);
 var themes_2 = require("./v2/themes");
 Object.defineProperty(exports, "colors2", { enumerable: true, get: function () { return themes_2.colors; } });
 // v2 contexts

package/dist/stories/Oolib/components/Icons.stories.js

@@ -38,18 +38,16 @@ var Icons = function (args) {
     var filterIcons = function (value) {
         setSearchIcon(value);
     };
-    var filteredIcons = iconArray.filter(function (icon) {
-        return icon.key.toLowerCase().includes(searchIcon.toLowerCase());
-    });
+    var filteredIcons = iconArray.filter(function (icon) { var _a; return (_a = icon.key) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(searchIcon === null || searchIcon === void 0 ? void 0 : searchIcon.toLowerCase()); });
     var handleIconClick = function (key, iconComponent) {
         setSelectedIcon(selectedIcon === key ? null : key);
         setSelectedWeight('regular');
     };
     return (React.createElement(React.Fragment, null,
         React.createElement(TextInputs_1.TextInput, { value: searchIcon, onChange: function (id, value) { return filterIcons(value); }, label: "Search Icon" }),
-        React.createElement(StyledWrapperIconsGrid, { minWidth: "10rem" }, filteredIcons.map(function (_a) {
+        React.createElement(StyledWrapperIconsGrid, { minWidth: "10rem" }, filteredIcons === null || filteredIcons === void 0 ? void 0 : filteredIcons.map(function (_a) {
             var key = _a.key, Icon = _a.value;
-            return (React.createElement("div", { key: key },
+            return (Icon ? (React.createElement("div", { key: key },
                 React.createElement("div", { style: {
                         display: "flex",
                         flexDirection: 'column',
@@ -58,25 +56,8 @@ var Icons = function (args) {
                         cursor: "pointer",
                         border: selectedIcon === key ? '2px solid blue' : 'none',
                     }, onClick: function () { return handleIconClick(key, Icon); } },
-                    React.createElement(Icon, { size: 24, color: "red" }),
-                    React.createElement(Typo2_1.UI_CAPTION, null, key)),
-                selectedIcon === key && (React.createElement("div", { style: {
-                        marginTop: '1rem',
-                        padding: '1rem',
-                        border: '1px solid #ccc',
-                        borderRadius: '4px',
-                        backgroundColor: '#f9f9f9',
-                        width: '100svw'
-                    } },
-                    React.createElement("h4", { style: { marginBottom: '0.5rem' } }, "Select Weight:"),
-                    React.createElement("select", { value: selectedWeight, onChange: function (e) { return setSelectedWeight(e.target.value); }, style: {
-                            width: '100%',
-                            padding: '0.5rem',
-                            marginBottom: '1rem'
-                        } }, weightOptions.map(function (weight) { return (React.createElement("option", { key: weight, value: weight }, weight)); })),
-                    React.createElement("div", { style: { display: 'flex', justifyContent: 'center' } },
-                        React.createElement(Icon, { size: 32, weight: selectedWeight === 'regular' ? undefined : selectedWeight })),
-                    React.createElement(Typo2_1.UI_CAPTION, { style: { textAlign: 'center', marginTop: '0.5rem' } }, "<".concat(key, " size={32} ").concat(selectedWeight !== 'regular' ? "weight=\"".concat(selectedWeight, "\"") : '', " />"))))));
+                    React.createElement(Icon, { size: 24 }),
+                    React.createElement(Typo2_1.UI_CAPTION, null, key)))) : null);
         }))));
 };
 exports.Icons = Icons;

package/dist/stories/v2/components/TextInputs.stories.d.ts

@@ -49,10 +49,18 @@ declare namespace _default {
             let name_10: string;
             export { name_10 as name };
         }
-        namespace invert {
+        namespace customErrorMsg {
             let name_11: string;
             export { name_11 as name };
         }
+        namespace errorLinkText {
+            let name_12: string;
+            export { name_12 as name };
+        }
+        namespace S {
+            let name_13: string;
+            export { name_13 as name };
+        }
     }
     namespace args {
         let icon_1: any;
@@ -77,8 +85,13 @@ declare namespace _default {
         export { isRequired_1 as isRequired };
         let disabled_1: boolean;
         export { disabled_1 as disabled };
-        let invert_1: boolean;
-        export { invert_1 as invert };
+        export let invert: boolean;
+        let customErrorMsg_1: string;
+        export { customErrorMsg_1 as customErrorMsg };
+        let errorLinkText_1: string;
+        export { errorLinkText_1 as errorLinkText };
+        let S_1: boolean;
+        export { S_1 as S };
     }
 }
 export default _default;
@@ -96,13 +109,13 @@ export namespace Number_ {
     export { args_1 as args };
     export namespace argTypes_1 {
         export namespace min_1 {
-            let name_12: string;
-            export { name_12 as name };
+            let name_14: string;
+            export { name_14 as name };
         }
         export { min_1 as min };
         export namespace max_1 {
-            let name_13: string;
-            export { name_13 as name };
+            let name_15: string;
+            export { name_15 as name };
         }
         export { max_1 as max };
     }

package/dist/stories/v2/components/TextInputs.stories.js

@@ -79,8 +79,14 @@ exports.default = {
         disabled: {
             name: "Disabled"
         },
-        invert: {
-            name: "Invert"
+        customErrorMsg: {
+            name: "Custom Error Message"
+        },
+        errorLinkText: {
+            name: "Error link text"
+        },
+        S: {
+            name: "Small"
         }
     },
     args: {
@@ -96,11 +102,15 @@ exports.default = {
         isRequired: false,
         disabled: false,
         invert: false,
+        customErrorMsg: 'This is custom error message',
+        errorLinkText: "Error Link",
+        S: false,
     },
 };
 var GenInputStories = function (_a) {
     var args = _a.args, Comp = _a.Comp, searchUrl = _a.searchUrl;
     var _b = (0, react_1.useState)(''), value = _b[0], setValue = _b[1];
+    var _c = (0, react_1.useState)({}), formValidation = _c[0], setFormValidation = _c[1];
     var handleOnChange = function (key, value) {
         setValue(value);
     };
@@ -132,14 +142,17 @@ var GenInputStories = function (_a) {
             backgroundColor: args.invert ? themes_1.colors.greyColor100 : '',
             padding: '10px',
         } },
-        react_1.default.createElement(Comp, __assign({}, newProps, { onChange: handleOnChange, value: value, actionBtn: actionBtn, clearBtn: clearBtn }))));
+        react_1.default.createElement(Comp, __assign({}, newProps, { onChange: handleOnChange, value: value, actionBtn: actionBtn, clearBtn: clearBtn, passValidationErrorToFormValidation: function (status) {
+                if (status === "error") {
+                    setFormValidation &&
+                        setFormValidation(function (prev) { return (__assign(__assign({}, prev), { type: 'error', msg: args.customErrorMsg, link: {
+                                to: "https://google.com",
+                                text: args.errorLinkText
+                            } })); });
+                }
+            }, validationStatus: formValidation }))));
 };
 var Text = function (args) { return (react_1.default.createElement(react_1.default.Fragment, null,
-    react_1.default.createElement(GenInputStories, { args: __assign(__assign({}, args), { label: 'text input', sublabel: 'some sub label' }), Comp: TextInputs_1.TextInput }),
-    react_1.default.createElement(GenInputStories, { args: __assign(__assign({}, args), { label: 'text input', sublabel: 'some sub label' }), Comp: TextInputs_1.TextInput }),
-    react_1.default.createElement(GenInputStories, { args: __assign(__assign({}, args), { label: 'text input', sublabel: 'some sub label' }), Comp: TextInputs_1.TextInput }),
-    react_1.default.createElement(GenInputStories, { args: __assign(__assign({}, args), { label: 'text input', sublabel: 'some sub label' }), Comp: TextInputs_1.TextInput }),
-    react_1.default.createElement(GenInputStories, { args: __assign(__assign({}, args), { label: 'text input', sublabel: 'some sub label' }), Comp: TextInputs_1.TextInput }),
     react_1.default.createElement(GenInputStories, { args: __assign(__assign({}, args), { label: 'text input', sublabel: 'some sub label' }), Comp: TextInputs_1.TextInput }))); };
 exports.Text = Text;
 var Email_ = function (args) {

package/dist/v2/components/Buttons/derivedComps/ActionButton.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { ButtonStyledProps } from "../styled";
+export declare const StyledOriginalButton: import("styled-components").StyledComponent<"button", any, ButtonStyledProps, never>;
+export interface ActionButtonInterface extends ButtonStyledProps {
+    value: string;
+}
+export declare const ActionButton: React.FunctionComponent<ActionButtonInterface>;

package/dist/v2/components/Buttons/derivedComps/ActionButton.js

@@ -0,0 +1,43 @@
+"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 __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ActionButton = exports.StyledOriginalButton = void 0;
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var styled_1 = require("../styled");
+var Typo2_1 = require("../../Typo2");
+exports.StyledOriginalButton = (0, styled_components_1.default)(styled_1.ButtonStyled)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: 14px;\n  cursor: pointer;\n  border: 0;\n  padding: 4px 10px;\n"], ["\n  border-radius: 14px;\n  cursor: pointer;\n  border: 0;\n  padding: 4px 10px;\n"])));
+var ActionButton = function (_a) {
+    var value = _a.value, props = __rest(_a, ["value"]);
+    return (react_1.default.createElement(exports.StyledOriginalButton, __assign({}, props, { variant: "primary" }), value && react_1.default.createElement(Typo2_1.UI_CAPTION_BOLD, { semibold: true }, value)));
+};
+exports.ActionButton = ActionButton;
+var templateObject_1;

package/dist/v2/components/Buttons/derivedComps/ClearButton.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import { ButtonStyledProps } from "../styled";
+export interface clearButtonInterface extends ButtonStyledProps {
+    value: string;
+}
+export declare const ClearButton: React.FunctionComponent<clearButtonInterface>;

package/dist/v2/components/Buttons/derivedComps/ClearButton.js

@@ -0,0 +1,36 @@
+"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 __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ClearButton = void 0;
+var react_1 = __importDefault(require("react"));
+var Typo2_1 = require("../../Typo2");
+var ActionButton_1 = require("./ActionButton");
+var ClearButton = function (_a) {
+    var value = _a.value, props = __rest(_a, ["value"]);
+    return (react_1.default.createElement(ActionButton_1.StyledOriginalButton, __assign({}, props, { variant: "secondary" }), value && react_1.default.createElement(Typo2_1.UI_CAPTION_BOLD, { semibold: true }, value)));
+};
+exports.ClearButton = ClearButton;

package/dist/v2/components/OKELink/comps/AvatarDisplay/index.d.ts

@@ -0,0 +1,27 @@
+import React, { FunctionComponent } from 'react';
+export interface AvatarDisplayProps {
+    value: {
+        title?: string;
+        userUploaded?: {
+            publicUrl: string;
+        }[];
+    };
+    title?: string;
+    style?: React.CSSProperties;
+    size?: number;
+    invert?: boolean;
+}
+/**
+ * @component Renders an AvatarDisplay component with customizable text, style and user uploaded image.
+ *
+ * - The props object containing the following properties:
+ * @prop {Object} value: An object containing the title and user uploaded images.
+ * @prop {string} value.title: The title to be displayed in the AvatarDisplay.
+ * @prop {Array} value.userUploaded: An array of objects containing the public URL of the user uploaded images.
+ * @prop {string} title: The title to be displayed in the AvatarDisplay.
+ * @prop {React.CSSProperties} style: Additional CSS styles to apply to the AvatarDisplay.
+ * @prop {number} size: The size of the AvatarDisplay. Defaults to 2.5.
+ * @prop {boolean} invert: A boolean indicating whether to invert the AvatarDisplay colors. Defaults to false.
+ * @return {ReactElement} The rendered AvatarDisplay component.
+ */
+export declare const AvatarDisplay: FunctionComponent<AvatarDisplayProps>;

package/dist/v2/components/OKELink/comps/AvatarDisplay/index.js

@@ -0,0 +1,29 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AvatarDisplay = void 0;
+var react_1 = __importDefault(require("react"));
+var styled_1 = require("./styled");
+/**
+ * @component Renders an AvatarDisplay component with customizable text, style and user uploaded image.
+ *
+ * - The props object containing the following properties:
+ * @prop {Object} value: An object containing the title and user uploaded images.
+ * @prop {string} value.title: The title to be displayed in the AvatarDisplay.
+ * @prop {Array} value.userUploaded: An array of objects containing the public URL of the user uploaded images.
+ * @prop {string} title: The title to be displayed in the AvatarDisplay.
+ * @prop {React.CSSProperties} style: Additional CSS styles to apply to the AvatarDisplay.
+ * @prop {number} size: The size of the AvatarDisplay. Defaults to 2.5.
+ * @prop {boolean} invert: A boolean indicating whether to invert the AvatarDisplay colors. Defaults to false.
+ * @return {ReactElement} The rendered AvatarDisplay component.
+ */
+var AvatarDisplay = function (_a) {
+    var value = _a.value, titleProp = _a.title, style = _a.style, _b = _a.size, size = _b === void 0 ? 2.5 : _b, invert = _a.invert;
+    var title = titleProp || value.title;
+    var titleInitial = title ? title[0].toUpperCase() : '';
+    var imageURL = (value === null || value === void 0 ? void 0 : value.userUploaded) && (value === null || value === void 0 ? void 0 : value.userUploaded[0].publicUrl);
+    return imageURL ? (react_1.default.createElement(styled_1.StyledAvatarImg, { invert: invert, size: size, style: style, src: imageURL, alt: "profile picture" })) : (react_1.default.createElement(styled_1.StyledAvatarTXT, { invert: invert, size: size, style: style }, titleInitial));
+};
+exports.AvatarDisplay = AvatarDisplay;

package/dist/v2/components/OKELink/comps/AvatarDisplay/styled.d.ts

@@ -0,0 +1,8 @@
+export declare const StyledAvatarImg: import("styled-components").StyledComponent<"img", any, {
+    invert?: boolean;
+    size: number | string;
+}, never>;
+export declare const StyledAvatarTXT: import("styled-components").StyledComponent<"h4", any, {
+    invert?: boolean;
+    size: number | string;
+}, never>;

package/dist/v2/components/OKELink/comps/AvatarDisplay/styled.js

@@ -0,0 +1,64 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledAvatarTXT = exports.StyledAvatarImg = void 0;
+var styled_components_1 = __importStar(require("styled-components"));
+var utilsOolib_1 = require("../../../../../utilsOolib");
+var themes_1 = require("../../../../../themes");
+var index_styled_1 = require("../../../../../components/Typo/index.styled");
+var greyColor80 = themes_1.colors.greyColor80, white = themes_1.colors.white;
+var commonStyle = function (_a) {
+    var size = _a.size, invert = _a.invert, theme = _a.theme;
+    return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: ", ";\n  height: ", ";\n  border-radius: 50%;\n  background-color: ", ";\n  color: ", ";\n"], ["\n  width: ", ";\n  height: ", ";\n  border-radius: 50%;\n  background-color: ", ";\n  color: ", ";\n"])), isNaN(size) ? size : "".concat(size, "rem"), isNaN(size) ? size : "".concat(size, "rem"), invert ? greyColor80 : (0, utilsOolib_1.getPrimaryColor10)(theme.colors), white);
+};
+exports.StyledAvatarImg = styled_components_1.default.img(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n  font-size: 8px;\n"], ["\n  ", "\n  font-size: 8px;\n"])), function (_a) {
+    var theme = _a.theme, invert = _a.invert, size = _a.size;
+    return commonStyle({ theme: theme, invert: invert, size: size });
+});
+exports.StyledAvatarTXT = (0, styled_components_1.default)(index_styled_1.SANS_3_STYLED)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", "\n  display: inline-grid;\n  place-items: center;\n"], ["\n  ", "\n  display: inline-grid;\n  place-items: center;\n"])), function (_a) {
+    var theme = _a.theme, invert = _a.invert, size = _a.size;
+    return commonStyle({ theme: theme, invert: invert, size: size });
+});
+var templateObject_1, templateObject_2, templateObject_3;
+// const commonStyle =({size, invert, theme})=> css`
+//   width: ${isNaN(size)? size : size + 'rem'};
+//   height: ${isNaN(size)? size : size + 'rem'};
+//   border-radius: 50%;
+//   background-color:  ${invert? greyColor80 : getPrimaryColor10(theme.colors)};
+//   color: ${white};
+// `;
+// export const StyledAvatarImg = styled.img`
+//   ${({theme, invert, size})=> commonStyle({theme, invert, size})}
+//   font-size: 8px;
+// `;
+// export const StyledAvatarTXT = styled(SANS_3_STYLED)`
+//   ${({theme, invert, size})=> commonStyle({theme, invert, size})}
+//   display: inline-grid;
+//   place-items: center;
+// `;

package/dist/v2/components/OKELink/index.d.ts

@@ -0,0 +1,42 @@
+import React, { FunctionComponent } from 'react';
+import { DisplayIconProps } from '../../../utils/comps/DisplayIcon';
+import { icons } from '../../../icons';
+export interface OKELinkProps {
+    to?: string;
+    link?: string;
+    onClick?: (e: React.MouseEvent<HTMLSpanElement | HTMLAnchorElement>) => void;
+    icon?: keyof typeof icons;
+    iconWeight?: DisplayIconProps['weight'];
+    iconAfter?: keyof typeof icons;
+    text?: string;
+    children?: React.ReactNode;
+    invertUnderline?: boolean;
+    color?: string;
+    invert?: boolean;
+    disabled?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+    avatar?: any;
+}
+/**
+ * @component Renders a link component with customizable text, styling, and behavior.
+ *
+ * - The component props object containing the following properties:
+ * @prop {string} [to]: The URL to link to.
+ * @prop {string} [link]: An external URL to link to.
+ * @prop {(e: React.MouseEvent<HTMLSpanElement | HTMLAnchorElement>) => void} [onClick]: A callback function to execute when the link is clicked.
+ * @prop {keyof typeof icons} [icon]: An icon to display before the text.
+ * @prop {DisplayIconProps['weight']} [iconWeight]: The weight of the icon font. Defaults to "regular".
+ * @prop {keyof typeof icons} [iconAfter]: An icon to display after the text.
+ * @prop {string} [text]: The text to display in the link.
+ * @prop {React.ReactNode} [children]: The content to be rendered inside the link.
+ * @prop {boolean} [invertUnderline]: A boolean indicating whether to invert the underline style of the link. Defaults to false.
+ * @prop {string} [color]: A string indicating the color of the link. Defaults to the primary color of the theme.
+ * @prop {boolean} [invert]: A boolean indicating whether to invert the colors of the link. Defaults to false.
+ * @prop {boolean} [disabled]: A boolean indicating whether the link is disabled. Defaults to false.
+ * @prop {string} [className]: A string indicating the CSS class name to apply to the link.
+ * @prop {React.CSSProperties} [style]: Additional CSS styles to apply to the link.
+ * @prop {ProfileImageInputProps['value']} [avatar]: An avatar to display in the link.
+ * @return {ReactElement} The rendered link component.
+ */
+export declare const OKELink: FunctionComponent<OKELinkProps>;