oolib 2.64.14 → 2.64.16

package/dist/components/Banners/bannerContext.d.ts

@@ -0,0 +1,6 @@
+export const BannerContext: React.Context<any>;
+export function BannerProvider({ children }: {
+    children: any;
+}): React.JSX.Element;
+export function useBannerContext(): any;
+import React from "react";

package/dist/components/Banners/bannerContext.js

@@ -0,0 +1,154 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useBannerContext = exports.BannerProvider = exports.BannerContext = void 0;
+var react_1 = __importStar(require("react"));
+exports.BannerContext = (0, react_1.createContext)();
+var counter = 0;
+// FEEDBACK:
+// needs to be outside the BannerProvider, else it gets called twice.
+// which wouldn't be a problem if this function was pure, but its not cuz of the counter. 
+// need to find an alt implementation to that.
+// discussion on useReducer being pure: https://github.com/facebook/react/issues/16295
+var bannerReducer = function (state, action) {
+    var newInfoState, newAlertState, newEntry, alreadyExistsIdx;
+    switch (action.type) {
+        case "ADD_ALERT":
+            var alertState = state.alertState;
+            counter = counter + 1;
+            newEntry = __assign({ id: "ALERT-".concat(counter) }, action.payload
+            // if an id is passed in the payload itelf, it will override the counter based id
+            );
+            // if a alert banner exists with the same id, as the new one coming in,
+            // we remove that first.
+            newAlertState = alertState.filter(function (d) { return d.id !== newEntry.id; });
+            alreadyExistsIdx = alertState.findIndex(function (d) { return d.id === newEntry.id; });
+            if (alreadyExistsIdx !== -1) {
+                alertState[alreadyExistsIdx] = newEntry;
+                newAlertState = alertState;
+            }
+            else {
+                newAlertState = __spreadArray([newEntry], alertState, true);
+            }
+            return __assign(__assign({}, state), { alertState: __spreadArray([
+                    newEntry
+                ], alertState, true) });
+        case "ADD_INFO":
+            var infoState = state.infoState;
+            counter = counter + 1;
+            newEntry = __assign({ id: "INFO-".concat(counter) }, action.payload
+            // if an id is passed in the payload itelf, it will override the counter based id
+            );
+            // if a info banner exists with the same id, as the new one coming in,
+            // we remove that first.
+            alreadyExistsIdx = infoState.findIndex(function (d) { return d.id === newEntry.id; });
+            if (alreadyExistsIdx !== -1) {
+                infoState[alreadyExistsIdx] = newEntry;
+                newInfoState = infoState;
+            }
+            else {
+                newInfoState = __spreadArray([newEntry], infoState, true);
+            }
+            return __assign(__assign({}, state), { infoState: newInfoState });
+        case "REMOVE_ALERT":
+            newAlertState = state.alertState.filter(function (a) { return a.id !== action.id; });
+            return __assign(__assign({}, state), { alertState: newAlertState });
+        case "REMOVE_INFO":
+            newInfoState = state.infoState.filter(function (a) { return a.id !== action.id; });
+            return __assign(__assign({}, state), { infoState: newInfoState });
+        default:
+            return state;
+    }
+};
+var BannerProvider = function (_a) {
+    var children = _a.children;
+    var initialState = { alertState: [], infoState: [] };
+    var _b = (0, react_1.useReducer)(bannerReducer, initialState), BANNER_STATE = _b[0], BANNER_DISPATCH = _b[1];
+    var REMOVE_ALERT_BANNER = function (e, id) {
+        BANNER_DISPATCH({ type: "REMOVE_ALERT", id: id });
+    };
+    var REMOVE_INFO_BANNER = function (e, id) {
+        BANNER_DISPATCH({ type: "REMOVE_INFO", id: id });
+    };
+    // the config of bannner can either be passed as a object, or plain arguments.
+    var SET_INFO_BANNER = function (options_msg, color, timeOut) {
+        var options = {};
+        if (typeof options_msg === 'string') { //means it is the 'msg' config
+            options.msg = options_msg;
+            options.color = color || 'green'; //defaults to green
+            options.timeOut = timeOut;
+        }
+        else {
+            options = options_msg;
+        }
+        BANNER_DISPATCH({ type: "ADD_INFO", payload: options });
+        return "INFO-".concat(counter); //bannerId
+    };
+    var SET_ALERT_BANNER = function (options_msg, color, timeOut) {
+        var options = {};
+        if (typeof options_msg === 'string') { //means it is the 'msg' config
+            options.msg = options_msg;
+            options.color = color || 'green'; //defaults to green
+            options.timeOut = timeOut;
+        }
+        else {
+            options = options_msg;
+        }
+        BANNER_DISPATCH({ type: "ADD_ALERT", payload: options });
+        return "ALERT-".concat(counter); //bannerId
+    };
+    return (react_1.default.createElement(exports.BannerContext.Provider, { value: {
+            BANNER_STATE: BANNER_STATE,
+            SET_INFO_BANNER: SET_INFO_BANNER,
+            SET_ALERT_BANNER: SET_ALERT_BANNER,
+            REMOVE_ALERT_BANNER: REMOVE_ALERT_BANNER,
+            REMOVE_INFO_BANNER: REMOVE_INFO_BANNER
+        } }, children));
+};
+exports.BannerProvider = BannerProvider;
+var useBannerContext = function () {
+    return (0, react_1.useContext)(exports.BannerContext);
+};
+exports.useBannerContext = useBannerContext;

package/dist/components/ImageInput/ImageInputContext.js

@@ -35,8 +35,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useImageInputContext = exports.ImageInputContextProvider = exports.ImageInputContext = void 0;
 var react_1 = __importStar(require("react"));
 var styled_components_1 = require("styled-components");
-var infoAlertBannerFnPlaceholder_1 = require("../../utilsOolib/infoAlertBannerFnPlaceholder");
 var useFakeUploadMedia_1 = require("../../utilsOolib/useFakeUploadMedia");
+var bannerContext_1 = require("../Banners/bannerContext");
 exports.ImageInputContext = (0, react_1.createContext)();
 var ImageInputContextProvider = function (_a) {
     var children = _a.children, value = _a.value, multiple = _a.multiple, allowedFormats = _a.allowedFormats, formatConvertConfig = _a.formatConvertConfig, folderName = _a.folderName, bucketEnv = _a.bucketEnv, onChange = _a.onChange, id = _a.id, aspectRatio = _a.aspectRatio, readOnly = _a.readOnly, enableCaptions = _a.enableCaptions, defaultImageSpread = _a.defaultImageSpread, invert = _a.invert, containerShape = _a.containerShape, stretchToFullHeight = _a.stretchToFullHeight, dropzoneLabel = _a.dropzoneLabel, dropzoneSublabel = _a.dropzoneSublabel, disableImageBorder = _a.disableImageBorder, omitEditorTools = _a.omitEditorTools, files = _a.files, showOptionalLabelInDropzone = _a.showOptionalLabelInDropzone, isRequired = _a.isRequired, isInRTE = _a.isInRTE;
@@ -54,7 +54,7 @@ var ImageInputContextProvider = function (_a) {
         handleUploadProgess: handleUploadProgess,
     })) ||
         (0, useFakeUploadMedia_1.useFakeUploadMedia)({ handleUploadProgess: handleUploadProgess }), upload = _c.mutate, isLoading = _c.isLoading; //for storybook purposes cuz we dont have access to mediaupload api here
-    var SET_ALERT_BANNER = ((theme === null || theme === void 0 ? void 0 : theme.useBannerContext()) || (0, infoAlertBannerFnPlaceholder_1.infoAlertBannerFnPlaceholder)()).SET_ALERT_BANNER;
+    var SET_ALERT_BANNER = (0, bannerContext_1.useBannerContext)().SET_ALERT_BANNER;
     var _d = (0, react_1.useState)(0), noOfImagesUploading = _d[0], setNoOfImagesUploading = _d[1];
     var _e = (0, react_1.useState)(undefined), publicUrlBeingReplaced = _e[0], setPublicUrlBeingReplaced = _e[1];
     var handleUpload = function (_a) {

package/dist/components/ImageInput/comps/ImageUploadShell/index.d.ts

@@ -1,7 +1,8 @@
 export default ImageUploadShell;
-declare function ImageUploadShell({ style, children, disabled }: {
+declare function ImageUploadShell({ style, children, disabled, enableFilesDrop }: {
     style: any;
     children: any;
     disabled: any;
+    enableFilesDrop: any;
 }): React.JSX.Element;
 import React from "react";

package/dist/components/ImageInput/comps/ImageUploadShell/index.js

@@ -35,20 +35,40 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var ImageInputContext_1 = require("../../ImageInputContext");
 var ImageUploadShell = function (_a) {
-    var style = _a.style, children = _a.children, disabled = _a.disabled;
+    var style = _a.style, children = _a.children, disabled = _a.disabled, enableFilesDrop = _a.enableFilesDrop;
     var inputRef = (0, react_1.useRef)(null);
     var _b = (0, ImageInputContext_1.useImageInputContext)(), handleUpload = _b.handleUpload, onChange = _b.onChange, value = _b.value, id = _b.id, multiple = _b.multiple;
     if (disabled)
         return react_1.default.createElement("div", { style: { width: '100%', height: '100%' } }, children);
+    var fireHandleUpload = function (files) {
+        handleUpload({
+            files: files,
+            callback: function (_a) {
+                var successfulUploads = _a.successfulUploads;
+                onChange(id, multiple
+                    ? __spreadArray(__spreadArray([], successfulUploads, true), (value || []), true) : successfulUploads);
+            }
+        });
+    };
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("input", { type: "file", accept: "image/*", style: { display: 'none' }, ref: inputRef, onChange: function (e) { return handleUpload({
-                files: e.target.files,
-                callback: function (_a) {
-                    var successfulUploads = _a.successfulUploads;
-                    onChange(id, multiple
-                        ? __spreadArray(__spreadArray([], successfulUploads, true), (value || []), true) : successfulUploads);
+        react_1.default.createElement("input", { type: "file", accept: "image/*", style: { display: 'none' }, ref: inputRef, onChange: function (e) { return fireHandleUpload(e.target.files); }, multiple: multiple }),
+        react_1.default.createElement("div", { onDragOver: enableFilesDrop
+                ? function (e) { return e.preventDefault(); }
+                : function () { }, onDrop: enableFilesDrop
+                ? function (e) {
+                    var _a;
+                    e.preventDefault();
+                    e.stopPropagation();
+                    if ((_a = e.dataTransfer) === null || _a === void 0 ? void 0 : _a.files) {
+                        var filesToUpload = multiple
+                            ? Array.from(e.dataTransfer.files)
+                            : [Array.from(e.dataTransfer.files)[0]];
+                        if (filesToUpload
+                            .every(function (d) { return d.type.split('/')[0] === 'image'; })) {
+                            fireHandleUpload(e.dataTransfer.files);
+                        }
+                    }
                 }
-            }); }, multiple: multiple }),
-        react_1.default.createElement("div", { onClick: function () { return inputRef.current.click(); }, style: { height: '100%', width: '100%' } }, children)));
+                : function () { }, onClick: function () { return inputRef.current.click(); }, style: { height: '100%', width: '100%' } }, children)));
 };
 exports.default = ImageUploadShell;

package/dist/components/ImageInput/comps/Placeholder/index.js

@@ -83,12 +83,13 @@ var Placeholder = function (_a) {
     }),
         react_1.default.createElement(styled_1.StyledPlaceholderWrapper, { smallPlaceholderUI: smallPlaceholderUI, ref: styledPlaceholderWrapperRef }, isLoading ? (react_1.default.createElement(ProgressBar_1.ProgressBar, { progress: uploadProgress, text: uploadProgress && uploadProgress !== 100
                 ? uploadProgress + "%"
-                : "Almost Done..." })) : (react_1.default.createElement(ImageUploadShell_1.default, { multiple: multiple },
+                : "Almost Done..." })) : (react_1.default.createElement(ImageUploadShell_1.default, { enableFilesDrop: true, multiple: multiple },
             react_1.default.createElement(styled_1.StyledPlaceholder, __assign({}, { containerShape: containerShape }, { smallPlaceholderUI: smallPlaceholderUI }), smallPlaceholderUI ? (react_1.default.createElement(react_1.Fragment, null,
                 react_1.default.createElement(ImageSquare, { size: 16, color: greyColor100 }),
-                react_1.default.createElement(Typo_1.SANS_0, { semibold: true }, dropzoneLabel))) : (react_1.default.createElement(react_1.Fragment, null,
+                react_1.default.createElement(Typo_1.SANS_0, { semibold: true }, dropzoneLabel),
+                showOptionalLabelInDropzone && isRequired === false && react_1.default.createElement(Typo_1.SANS_0, null, "(optional)"))) : (react_1.default.createElement(react_1.Fragment, null,
                 react_1.default.createElement(ImageSquare, { size: 30, color: greyColor100 }),
-                react_1.default.createElement(Typo_1.SANS_2, { semibold: true }, "".concat(dropzoneLabel, " ").concat(showOptionalLabelInDropzone && !isRequired
+                react_1.default.createElement(Typo_1.SANS_2, { semibold: true }, "".concat(dropzoneLabel, " ").concat(showOptionalLabelInDropzone && isRequired === false
                     ? "(optional)"
                     : "")),
                 react_1.default.createElement(Typo_1.SANS_2, null, dropzoneSublabel)))))))));

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

@@ -6,7 +6,7 @@
  * - richInputHasValue (util)
  * - RichTextEditor
  */
-export function ImageInput({ id, value, onChange, readOnly, multiple, stretchToFullHeight, aspectRatio, containerShape, invert, enableCaptions, defaultImageSpread, allowedFormats, folderName, bucketEnv, formatConvertConfig, dropzoneLabel, dropzoneSublabel, disableImageBorder, omitEditorTools, showOptionalLabelInDropzone, isRequired, files, isInRTE }: {
+export function ImageInput({ id, value, onChange, readOnly, multiple, stretchToFullHeight, aspectRatio, containerShape, invert, enableCaptions, defaultImageSpread, allowedFormats, folderName, bucketEnv, formatConvertConfig, dropzoneLabel, dropzoneSublabel, disableImageBorder, omitEditorTools, isRequired, files, isInRTE }: {
     id: any;
     value: any;
     onChange: any;
@@ -26,7 +26,6 @@ export function ImageInput({ id, value, onChange, readOnly, multiple, stretchToF
     dropzoneSublabel: any;
     disableImageBorder?: boolean;
     omitEditorTools?: any[];
-    showOptionalLabelInDropzone: any;
     isRequired: any;
     files: any;
     isInRTE: any;

package/dist/components/ImageInput/index.js

@@ -32,10 +32,11 @@ var getBlockLabelProps_1 = require("../../utils/getBlockLabelProps");
  */
 function ImageInput(_a) {
     var id = _a.id, value = _a.value, onChange = _a.onChange, readOnly = _a.readOnly, multiple = _a.multiple, _b = _a.stretchToFullHeight, stretchToFullHeight = _b === void 0 ? false : _b, _c = _a.aspectRatio, aspectRatio = _c === void 0 ? '5/3' : _c, _d = _a.containerShape, containerShape = _d === void 0 ? 'rectangle' : _d, //alt = circle
-    invert = _a.invert, _e = _a.enableCaptions, enableCaptions = _e === void 0 ? true : _e, _f = _a.defaultImageSpread, defaultImageSpread = _f === void 0 ? 'contain' : _f, _g = _a.allowedFormats, allowedFormats = _g === void 0 ? ["jpg", "jpeg", "png"] : _g, _h = _a.folderName, folderName = _h === void 0 ? 'images' : _h, bucketEnv = _a.bucketEnv, formatConvertConfig = _a.formatConvertConfig, dropzoneLabel = _a.dropzoneLabel, dropzoneSublabel = _a.dropzoneSublabel, _j = _a.disableImageBorder, disableImageBorder = _j === void 0 ? false : _j, _k = _a.omitEditorTools, omitEditorTools = _k === void 0 ? [] : _k, //can include : 'cover_contain' | 'rotate' | 'reposition'
-    showOptionalLabelInDropzone = _a.showOptionalLabelInDropzone, isRequired = _a.isRequired, files = _a.files, //used by RTEImageInput
+    invert = _a.invert, _e = _a.enableCaptions, enableCaptions = _e === void 0 ? true : _e, _f = _a.defaultImageSpread, defaultImageSpread = _f === void 0 ? 'cover' : _f, _g = _a.allowedFormats, allowedFormats = _g === void 0 ? ["jpg", "jpeg", "png"] : _g, _h = _a.folderName, folderName = _h === void 0 ? 'images' : _h, bucketEnv = _a.bucketEnv, formatConvertConfig = _a.formatConvertConfig, dropzoneLabel = _a.dropzoneLabel, dropzoneSublabel = _a.dropzoneSublabel, _j = _a.disableImageBorder, disableImageBorder = _j === void 0 ? false : _j, _k = _a.omitEditorTools, omitEditorTools = _k === void 0 ? [] : _k, //can include : 'cover_contain' | 'rotate' | 'reposition'
+    isRequired = _a.isRequired, files = _a.files, //used by RTEImageInput
     isInRTE = _a.isInRTE;
     var props = arguments[0];
+    var showOptionalLabelInDropzone = !props.label && !props.sublabel;
     return (react_1.default.createElement(ImageInputContext_1.ImageInputContextProvider, __assign({}, {
         value: value,
         onChange: onChange,

package/dist/components/MetaBlock/index.js

@@ -89,7 +89,6 @@ var MetaBlock = function (_a) {
         var percent = (100 / value.length) + '%';
         var pixelsToMinus = ((value.length - 1) * (2 + 0.3)) + 'rem'; // 2 = flex gap on the 2 sides of the separator, 0.3 = separator width
         var toReturn = "calc(".concat(percent, " - ").concat(pixelsToMinus, ")");
-        console.log({ toReturn: toReturn });
         return toReturn;
     };
     return orientation === "horizontal" ? (react_1.default.createElement(StyledHorOrientContainer, { align: align }, value.map(function (v, i) { return (react_1.default.createElement(react_1.Fragment, { key: i },

package/dist/components/VideoInput/index.js

@@ -49,6 +49,7 @@ var EmbedLinkModal_1 = require("./comps/EmbedLinkModal");
 var ActionMenu_1 = require("../ActionMenu");
 var themes_1 = require("../../themes");
 var useFakeUploadMedia_1 = require("../../utilsOolib/useFakeUploadMedia");
+var bannerContext_1 = require("../Banners/bannerContext");
 var VideoInput = function (_a) {
     var id = _a.id, label = _a.label, sublabel = _a.sublabel, isRequired = _a.isRequired, _value = _a.value, onChange = _a.onChange, readOnly = _a.readOnly, lightPlayer = _a.light, _b = _a.enableVideoUpload, enableVideoUpload = _b === void 0 ? false : _b, isInRTE = _a.isInRTE, invert = _a.invert, files = _a.files, // //used by RTEVideoInput
     width = _a.width, height = _a.height;
@@ -59,14 +60,7 @@ var VideoInput = function (_a) {
     var _c = (0, react_1.useState)(false), showEmbedLinkModal = _c[0], setShowEmbedLinkModal = _c[1];
     var theme = (0, styled_components_1.useTheme)();
     var canPlay = function (value) { var _a; return react_player_1.default.canPlay(value && ((_a = value[0]) === null || _a === void 0 ? void 0 : _a.publicUrl)); };
-    var SET_ALERT_BANNER;
-    if (theme && theme.useBannerContext) {
-        var bannerContext = theme.useBannerContext();
-        SET_ALERT_BANNER = bannerContext.SET_ALERT_BANNER;
-    }
-    else {
-        SET_ALERT_BANNER = 'Incorrect video format' /* fallback value / function */;
-    }
+    var SET_ALERT_BANNER = (0, bannerContext_1.useBannerContext)().SET_ALERT_BANNER;
     var _d = (0, react_1.useState)(undefined), uploadProgress = _d[0], setUploadProgress = _d[1];
     var inputRef = (0, react_1.useRef)();
     var handleUploadProgess = function (progress) { return setUploadProgress(progress); };

package/dist/components/cards/CardProfile/index.d.ts

@@ -0,0 +1,9 @@
+export function CardProfile({ id, data, config, to, onClick, openInNewTab, }: {
+    id: any;
+    data: any;
+    config: any;
+    to: any;
+    onClick: any;
+    openInNewTab: any;
+}): React.JSX.Element;
+import React from "react";

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

@@ -0,0 +1,54 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CardProfile = void 0;
+var react_1 = __importDefault(require("react"));
+var styled_1 = require("./styled");
+var styled_2 = require("../styled");
+// import { MetaSecondary } from "../../../generalUI/V2_MetaComps/MetaSecondary";
+var MetaBlock_1 = __importDefault(require("../../MetaBlock"));
+var styled_components_1 = require("styled-components");
+var utilsOolib_1 = require("../../../utilsOolib");
+var dontRenderIfBothOnClickAndTo_1 = require("../utils/dontRenderIfBothOnClickAndTo");
+var decideLinkCompAndTarget_1 = require("../utils/decideLinkCompAndTarget");
+var ProfileImageInput_1 = require("../../ImageInput/derivedComps/ProfileImageInput");
+var injectHttps_1 = require("../../../utils/injectHttps");
+var Typo_1 = require("../../Typo");
+var Tags_1 = require("../../Tags");
+var parseCardConfig_1 = require("../utils/parseCardConfig");
+var LineClampWrapper_1 = require("../comps/LineClampWrapper");
+var CardProfile = function (_a) {
+    var id = _a.id, data = _a.data, config = _a.config, to = _a.to, onClick = _a.onClick, openInNewTab = _a.openInNewTab;
+    var theme = (0, styled_components_1.useTheme)();
+    var parseSpecialSyntax = (theme || {}).parseSpecialSyntax;
+    var _b = (0, parseCardConfig_1.parseCardConfig)({ config: config, data: data, parseSpecialSyntax: parseSpecialSyntax }), cardLabel = _b.cardLabel, title = _b.title, image = _b.image, tagDisplay = _b.tagDisplay, metaBlock = _b.metaBlock;
+    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;
+    return (react_1.default.createElement(LinkComp, { target: target, href: (0, injectHttps_1.injectHttps)(to), to: to },
+        react_1.default.createElement("div", { style: { position: 'relative' } },
+            react_1.default.createElement(styled_1.StyledHoverBlocker, null),
+            " ",
+            react_1.default.createElement(styled_1.StyledCardUserProfile, { onClick: onClick, id: id },
+                react_1.default.createElement(styled_1.StyledLinkWrapper, null,
+                    react_1.default.createElement(styled_1.StyledImageWrapper, null,
+                        react_1.default.createElement(ProfileImageInput_1.ProfileImageInput, { readOnly: true, id: "CardUserProfileImage", value: image, size: 120, imageTitle: title })),
+                    react_1.default.createElement(styled_1.StyledCardDetails, { className: 'StyledCardDetails', style: !config.image ? { marginTop: 0 } : {} },
+                        title && (react_1.default.createElement(LineClampWrapper_1.LineClampWrapper, { noOfLines_M: 3, title: title },
+                            react_1.default.createElement(styled_1.StyledCardProfileTitle, { className: "StyledTitle" },
+                                react_1.default.createElement(styled_2.StyledTitleSpan, { className: "StyledTitleSpan" }, title)))),
+                        cardLabel && (react_1.default.createElement(LineClampWrapper_1.LineClampWrapper, { noOfLines_M: 2, title: title },
+                            react_1.default.createElement(styled_1.StyledLabel, null,
+                                react_1.default.createElement(Typo_1.LABEL, { color: (0, utilsOolib_1.getPrimaryColorText)(theme === null || theme === void 0 ? void 0 : theme.colors) }, cardLabel)))),
+                        tagDisplay && (react_1.default.createElement(styled_1.StyledTag, null,
+                            react_1.default.createElement(Tags_1.TagDisplay, { variant: "secondary", display: tagDisplay }))),
+                        (metaBlock === null || metaBlock === void 0 ? void 0 : metaBlock.length) > 0 ? (react_1.default.createElement(styled_1.StyledMeta, null,
+                            react_1.default.createElement(MetaBlock_1.default, { orientation: "vertical", data: data, config: metaBlock, align: "center" }))) : null))))));
+};
+exports.CardProfile = CardProfile;

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

@@ -0,0 +1,9 @@
+export const StyledCardUserProfile: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledHoverBlocker: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledLinkWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledImageWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledCardDetails: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledCardProfileTitle: import("styled-components").StyledComponent<(props: any) => import("react").JSX.Element, any, {}, never>;
+export const StyledLabel: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledTag: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledMeta: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,25 @@
+"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.StyledMeta = exports.StyledTag = exports.StyledLabel = exports.StyledCardProfileTitle = exports.StyledCardDetails = exports.StyledImageWrapper = exports.StyledLinkWrapper = exports.StyledHoverBlocker = exports.StyledCardUserProfile = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+var themes_1 = require("../../../themes");
+var Typo_1 = require("../../Typo");
+var mixins_1 = require("../../../themes/mixins");
+var styled_1 = require("../styled");
+exports.StyledCardUserProfile = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    position: relative;\n    height: 100%;\n    cursor: pointer;\n    // margin-bottom: 3rem;\n    @media (hover: hover){\n        &:hover {\n            ", ";\n            .StyledCardDetails{\n                background-color: white;\n            }\n            \n        }\n    }\n"], ["\n    position: relative;\n    height: 100%;\n    cursor: pointer;\n    // margin-bottom: 3rem;\n    @media (hover: hover){\n        &:hover {\n            ", ";\n            .StyledCardDetails{\n                background-color: white;\n            }\n            \n        }\n    }\n"])), styled_1.CSSTitleAnimationOnHover);
+exports.StyledHoverBlocker = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    width: 100%;\n    height: 7rem;\n    position: absolute; \n    z-index: 2;\n"], ["\n    width: 100%;\n    height: 7rem;\n    position: absolute; \n    z-index: 2;\n"])));
+exports.StyledLinkWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    position: relative;\n    width: 100%;\n    height: 100%;\n    display: flex;\n    justify-content: center;\n    flex-direction: column;\n"], ["\n    position: relative;\n    width: 100%;\n    height: 100%;\n    display: flex;\n    justify-content: center;\n    flex-direction: column;\n"])));
+exports.StyledImageWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    position: relative;\n    width: 100%;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    position: relative;\n    z-index: 1;\n"], ["\n    position: relative;\n    width: 100%;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    position: relative;\n    z-index: 1;\n"])));
+exports.StyledCardDetails = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    position: relative;\n    margin-top: -5rem;\n    padding: 2rem 2rem;\n    padding-top: 6rem;\n    border: 2px solid ", ";\n    background-color: ", ";\n    width: 100%;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    ", "\n    /* @media (hover: hover){\n        &:hover {\n            ", ";\n            background-color: white;\n        }\n    } */\n"], ["\n    position: relative;\n    margin-top: -5rem;\n    padding: 2rem 2rem;\n    padding-top: 6rem;\n    border: 2px solid ", ";\n    background-color: ", ";\n    width: 100%;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    ", "\n    /* @media (hover: hover){\n        &:hover {\n            ", ";\n            background-color: white;\n        }\n    } */\n"])), themes_1.colors.greyColor5, themes_1.colors.greyColor5, (0, mixins_1.transition)('background-color'), styled_1.CSSTitleAnimationOnHover);
+exports.StyledCardProfileTitle = (0, styled_components_1.default)(Typo_1.SERIF_5_6)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    width: 100%;\n    text-align: center;\n    word-wrap: break-word;\n    ", "\n"], ["\n    width: 100%;\n    text-align: center;\n    word-wrap: break-word;\n    ", "\n"])), (0, mixins_1.transition)('color'));
+exports.StyledLabel = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    margin-top: 1rem;\n    text-align: center;\n"], ["\n    margin-top: 1rem;\n    text-align: center;\n"])));
+exports.StyledTag = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    margin-top: 1rem;\n    max-width: 100%; // need this for ellipsis to work inside on vertical orientation meta block\n"], ["\n    margin-top: 1rem;\n    max-width: 100%; // need this for ellipsis to work inside on vertical orientation meta block\n"])));
+exports.StyledMeta = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n    margin-top: 1rem;\n    max-width: 100%; // need this for ellipsis to work inside on vertical orientation meta block\n"], ["\n    margin-top: 1rem;\n    max-width: 100%; // need this for ellipsis to work inside on vertical orientation meta block\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;

package/dist/components/cards/ListProfile/index.d.ts

@@ -0,0 +1,10 @@
+export function ListProfile({ id, data, config, to, onClick, openInNewTab, actions }: {
+    id: any;
+    data: any;
+    config: any;
+    to: any;
+    onClick: any;
+    openInNewTab: any;
+    actions: any;
+}, ...args: any[]): React.JSX.Element;
+import React from "react";

package/dist/components/cards/ListProfile/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.ListProfile = void 0;
+var react_1 = __importDefault(require("react"));
+var ListContent_1 = require("../ListContent");
+//we destructure only to make this comp easy to use for developers
+function ListProfile(_a) {
+    var id = _a.id, data = _a.data, config = _a.config, to = _a.to, onClick = _a.onClick, openInNewTab = _a.openInNewTab, actions = _a.actions;
+    var props = arguments[0];
+    return (react_1.default.createElement(ListContent_1.ListContent, __assign({}, props, { variant: 'profile' })));
+}
+exports.ListProfile = ListProfile;
+;

package/dist/index.d.ts

@@ -11,7 +11,6 @@ export * from "./components/Container";
 export * from "./components/Wrappers";
 export * from "./components/Switches";
 export * from "./components/TabBar";
-export * from "./components/Banners";
 export * from "./components/RadioAndCheckbox";
 export * from "./components/Margins";
 export * from "./components/Paddings";
@@ -40,6 +39,8 @@ export { TextLoader } from "./components/LoadersAndProgress/TextLoader";
 export { CardContent } from "./components/cards/CardContent";
 export { ListContent } from "./components/cards/ListContent";
 export { CardEmbed } from "./components/cards/CardEmbed";
+export { CardProfile } from "./components/cards/CardProfile";
+export { ListProfile } from "./components/cards/ListProfile";
 export { DropdownSingle } from "./components/Dropdowns/DropdownSingle";
 export { DropdownMulti } from "./components/Dropdowns/DropdownMulti";
 export { OptionsSingle } from "./components/Dropdowns/comps/OptionsSingle";
@@ -51,3 +52,5 @@ export { ImageInput } from "./components/ImageInput";
 export { ProfileImageInput } from "./components/ImageInput/derivedComps/ProfileImageInput";
 export { default as VideoInput } from "./components/VideoInput";
 export { LoaderCircle, ProgressBar, LoaderCircle as Loader, LoaderOverlay } from "./components/LoadersAndProgress";
+export { BannerAlert, BannerInfo } from "./components/Banners";
+export { BannerContext, useBannerContext, BannerProvider } from "./components/Banners/bannerContext";

package/dist/index.js

@@ -17,7 +17,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.VideoInput = exports.ProfileImageInput = exports.ImageInput = exports.MetaBlock = exports.HintsProvider = exports.genTagComp = exports.generateOptions = exports.OptionsSingle = exports.DropdownMulti = exports.DropdownSingle = exports.CardEmbed = exports.ListContent = exports.CardContent = exports.TextLoader = exports.BarChart = exports.DateRangePicker = exports.DatePicker = exports.PageScrollIndicator = exports.HomeCover = exports.EmptyStates = exports.ModalSmall = exports.ModalLarge = exports.ModalConfirm = exports.SkeletonLoader = exports.Divider = exports.PercentCompletedPie = exports.Accordion = exports.ActionMenu = exports.Tooltip = exports.OKELink = exports.UserRoleBadge = exports.Section = exports.LoaderOverlay = exports.Loader = exports.ProgressBar = exports.LoaderCircle = exports.icons = exports.colors = exports.GlobalStyles = void 0;
+exports.BannerProvider = exports.useBannerContext = exports.BannerContext = exports.BannerInfo = exports.BannerAlert = exports.VideoInput = exports.ProfileImageInput = exports.ImageInput = exports.MetaBlock = exports.HintsProvider = exports.genTagComp = exports.generateOptions = exports.OptionsSingle = exports.DropdownMulti = exports.DropdownSingle = exports.ListProfile = exports.CardProfile = exports.CardEmbed = exports.ListContent = exports.CardContent = exports.TextLoader = exports.BarChart = exports.DateRangePicker = exports.DatePicker = exports.PageScrollIndicator = exports.HomeCover = exports.EmptyStates = exports.ModalSmall = exports.ModalLarge = exports.ModalConfirm = exports.SkeletonLoader = exports.Divider = exports.PercentCompletedPie = exports.Accordion = exports.ActionMenu = exports.Tooltip = exports.OKELink = exports.UserRoleBadge = exports.Section = exports.LoaderOverlay = exports.Loader = exports.ProgressBar = exports.LoaderCircle = exports.icons = exports.colors = exports.GlobalStyles = void 0;
 //css and styling related ( styled-components )
 var globalStyles_1 = require("./globalStyles");
 Object.defineProperty(exports, "GlobalStyles", { enumerable: true, get: function () { return globalStyles_1.GlobalStyles; } });
@@ -45,7 +45,6 @@ __exportStar(require("./components/Container"), exports);
 __exportStar(require("./components/Wrappers"), exports);
 __exportStar(require("./components/Switches"), exports);
 __exportStar(require("./components/TabBar"), exports);
-__exportStar(require("./components/Banners"), exports);
 __exportStar(require("./components/RadioAndCheckbox"), exports);
 __exportStar(require("./components/Margins"), exports);
 __exportStar(require("./components/Paddings"), exports);
@@ -94,6 +93,10 @@ var ListContent_1 = require("./components/cards/ListContent");
 Object.defineProperty(exports, "ListContent", { enumerable: true, get: function () { return ListContent_1.ListContent; } });
 var CardEmbed_1 = require("./components/cards/CardEmbed");
 Object.defineProperty(exports, "CardEmbed", { enumerable: true, get: function () { return CardEmbed_1.CardEmbed; } });
+var CardProfile_1 = require("./components/cards/CardProfile");
+Object.defineProperty(exports, "CardProfile", { enumerable: true, get: function () { return CardProfile_1.CardProfile; } });
+var ListProfile_1 = require("./components/cards/ListProfile");
+Object.defineProperty(exports, "ListProfile", { enumerable: true, get: function () { return ListProfile_1.ListProfile; } });
 //dropdowns & options
 var DropdownSingle_1 = require("./components/Dropdowns/DropdownSingle");
 Object.defineProperty(exports, "DropdownSingle", { enumerable: true, get: function () { return DropdownSingle_1.DropdownSingle; } });
@@ -123,3 +126,11 @@ var ProfileImageInput_1 = require("./components/ImageInput/derivedComps/ProfileI
 Object.defineProperty(exports, "ProfileImageInput", { enumerable: true, get: function () { return ProfileImageInput_1.ProfileImageInput; } });
 var VideoInput_1 = require("./components/VideoInput");
 Object.defineProperty(exports, "VideoInput", { enumerable: true, get: function () { return __importDefault(VideoInput_1).default; } });
+//banners
+var Banners_1 = require("./components/Banners");
+Object.defineProperty(exports, "BannerAlert", { enumerable: true, get: function () { return Banners_1.BannerAlert; } });
+Object.defineProperty(exports, "BannerInfo", { enumerable: true, get: function () { return Banners_1.BannerInfo; } });
+var bannerContext_1 = require("./components/Banners/bannerContext");
+Object.defineProperty(exports, "BannerContext", { enumerable: true, get: function () { return bannerContext_1.BannerContext; } });
+Object.defineProperty(exports, "useBannerContext", { enumerable: true, get: function () { return bannerContext_1.useBannerContext; } });
+Object.defineProperty(exports, "BannerProvider", { enumerable: true, get: function () { return bannerContext_1.BannerProvider; } });

package/package.json

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

package/dist/utilsOolib/infoAlertBannerFnPlaceholder.d.ts

@@ -1,4 +0,0 @@
-export function infoAlertBannerFnPlaceholder(): {
-    SET_INFO_BANNER: (msg: any) => void;
-    SET_ALERT_BANNER: (msg: any) => void;
-};

package/dist/utilsOolib/infoAlertBannerFnPlaceholder.js

@@ -1,10 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.infoAlertBannerFnPlaceholder = void 0;
-var infoAlertBannerFnPlaceholder = function () {
-    return ({
-        SET_INFO_BANNER: function (msg) { return window.alert(msg); },
-        SET_ALERT_BANNER: function (msg) { return window.alert(msg); }
-    });
-};
-exports.infoAlertBannerFnPlaceholder = infoAlertBannerFnPlaceholder;