oolib 2.124.1 → 2.125.0

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

@@ -1,5 +1,5 @@
 export const ImageInputContext: React.Context<any>;
-export function ImageInputContextProvider({ children, value, multiple, allowedFormats, formatConvertConfig, folderName, bucketEnv, onChange, id, aspectRatio, readOnly, enableCaptions, defaultImageSpread, invert, containerShape, stretchToFullHeight, dropzoneLabel, dropzoneSublabel, disableImageBorder, omitEditorTools, files, showOptionalLabelInDropzone, isRequired, isInRTE }: {
+export function ImageInputContextProvider({ children, value, multiple, allowedFormats, formatConvertConfig, folderName, bucketEnv, onChange, id, aspectRatio, readOnly, enableCaptions, defaultImageSpread, invert, containerShape, stretchToFullHeight, dropzoneLabel, dropzoneSublabel, disableImageBorder, omitEditorTools, files, showOptionalLabelInDropzone, isRequired, isInRTE, showImageUploadCaution }: {
     children: any;
     value: any;
     multiple: any;
@@ -24,6 +24,7 @@ export function ImageInputContextProvider({ children, value, multiple, allowedFo
     showOptionalLabelInDropzone: any;
     isRequired: any;
     isInRTE: any;
+    showImageUploadCaution: any;
 }): React.JSX.Element;
 export function useImageInputContext(): any;
 import React from "react";

package/dist/components/ImageInput/ImageInputContext.js

@@ -1,4 +1,15 @@
 "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);
@@ -39,7 +50,7 @@ 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;
+    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, showImageUploadCaution = _a.showImageUploadCaution;
     var theme = (0, styled_components_1.useTheme)();
     var _b = (0, react_1.useState)(undefined), uploadProgress = _b[0], setUploadProgress = _b[1];
     var handleUploadProgess = function (progress) { return setUploadProgress(progress); };
@@ -56,7 +67,9 @@ var ImageInputContextProvider = function (_a) {
         (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 = (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 _e = (0, react_1.useState)({}), uploadArgs = _e[0], setUploadArgs = _e[1];
+    var _f = (0, react_1.useState)(false), showModal = _f[0], setShowModal = _f[1];
+    var _g = (0, react_1.useState)(undefined), publicUrlBeingReplaced = _g[0], setPublicUrlBeingReplaced = _g[1];
     var handleUpload = function (_a) {
         var files = _a.files, callback = _a.callback, publicUrlToReplace = _a.publicUrlToReplace;
         //publicUrlToReplace passed only if replace action
@@ -89,6 +102,16 @@ var ImageInputContextProvider = function (_a) {
             },
         });
     };
+    var handleUploadWithCheck = function (args) {
+        var item = localStorage.getItem("PreUploadImageCautionAcknowleged");
+        if (item && JSON.parse(item)) {
+            handleUpload(__assign({}, args));
+        }
+        else {
+            setUploadArgs(args);
+            setShowModal(true);
+        }
+    };
     /**
      * this is specifically required in the RTE scenario,
      * wherein, the minute files are uploaded from the RTE,
@@ -133,7 +156,7 @@ var ImageInputContextProvider = function (_a) {
         newValue[idx] = newImage;
         onChange(id, newValue);
     };
-    var _f = (0, react_1.useState)(false), imageUnderEdit = _f[0], setImageUnderEdit = _f[1];
+    var _h = (0, react_1.useState)(false), imageUnderEdit = _h[0], setImageUnderEdit = _h[1];
     return (react_1.default.createElement(exports.ImageInputContext.Provider, { value: {
             //props
             id: id,
@@ -154,7 +177,9 @@ var ImageInputContextProvider = function (_a) {
             omitEditorTools: omitEditorTools,
             //handlers, states initiated in this Context
             upload: upload,
-            handleUpload: handleUpload,
+            handleUpload: showImageUploadCaution.enable
+                ? handleUploadWithCheck
+                : handleUpload,
             noOfImagesUploading: noOfImagesUploading,
             publicUrlBeingReplaced: publicUrlBeingReplaced,
             uploadProgress: uploadProgress,
@@ -166,7 +191,11 @@ var ImageInputContextProvider = function (_a) {
             setImageUnderEdit: setImageUnderEdit,
             showOptionalLabelInDropzone: showOptionalLabelInDropzone,
             isRequired: isRequired,
-            isInRTE: isInRTE
+            isInRTE: isInRTE,
+            uploadArgs: uploadArgs,
+            showModal: showModal,
+            setShowModal: setShowModal,
+            showImageUploadCaution: showImageUploadCaution
         } }, children));
 };
 exports.ImageInputContextProvider = ImageInputContextProvider;

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

@@ -1,4 +1,15 @@
 "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);
@@ -34,11 +45,14 @@ var icons_1 = require("../../../../icons");
 var themes_1 = require("../../../../themes");
 var Typo_1 = require("../../../Typo");
 var FileUploadWrapper_1 = require("../../../FileUploadWrapper");
+var ModalConfirm_1 = require("../../../Modals/ModalConfirm");
+var genIcon_1 = require("../../../Dropdowns/utils/genIcon");
+var styled_1 = require("./styled");
 var ImageSquare = icons_1.icons.ImageSquare;
 var greyColor100 = themes_1.colors.greyColor100;
 var Placeholder = function (_a) {
     var aspectRatioProp = _a.aspectRatio;
-    var _b = (0, ImageInputContext_1.useImageInputContext)(), aspectRatioFromContext = _b.aspectRatio, containerShape = _b.containerShape, uploadProgress = _b.uploadProgress, isLoading = _b.isLoading, dropzoneLabel = _b.dropzoneLabel, dropzoneSublabel = _b.dropzoneSublabel, stretchToFullHeight = _b.stretchToFullHeight, multiple = _b.multiple, showOptionalLabelInDropzone = _b.showOptionalLabelInDropzone, isRequired = _b.isRequired;
+    var _b = (0, ImageInputContext_1.useImageInputContext)(), aspectRatioFromContext = _b.aspectRatio, containerShape = _b.containerShape, uploadProgress = _b.uploadProgress, isLoading = _b.isLoading, dropzoneLabel = _b.dropzoneLabel, dropzoneSublabel = _b.dropzoneSublabel, stretchToFullHeight = _b.stretchToFullHeight, multiple = _b.multiple, showOptionalLabelInDropzone = _b.showOptionalLabelInDropzone, isRequired = _b.isRequired, showImageUploadCaution = _b.showImageUploadCaution, uploadArgs = _b.uploadArgs, showModal = _b.showModal, setShowModal = _b.setShowModal;
     /** cuz in inlineimageinput we define an explicit aspect ratio for the placeholder only. since the image doesnt need an aspect ratio container */
     var aspectRatio = aspectRatioProp || aspectRatioFromContext;
     var styledPlaceholderWrapperRef = (0, react_1.useRef)(null);
@@ -65,15 +79,26 @@ var Placeholder = function (_a) {
     // const [dragOverActive, setDragOverActive] = useState(false)
     var _d = (0, ImageInputContext_1.useImageInputContext)(), handleUpload = _d.handleUpload, onChange = _d.onChange, value = _d.value, id = _d.id;
     var inputRef = (0, react_1.useRef)(null);
-    return (react_1.default.createElement(AspectRatioShell_1.default, { aspectRatio: aspectRatio, containerShape: containerShape, stretchToFullHeight: stretchToFullHeight, onShellPrepared: decideUIStyle },
-        react_1.default.createElement(FileUploadWrapper_1.FileUploadWrapper, { styledPlaceholderWrapperRef: styledPlaceholderWrapperRef, uploadProgress: uploadProgress, isLoading: isLoading, containerShape: containerShape, multiple: multiple, smallPlaceholderUI: smallPlaceholderUI, mediaType: 'image', handleUpload: handleUpload, onChange: onChange, value: value, id: id, inputRef: inputRef }, 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),
-            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 === false
-                ? "(optional)"
-                : "")),
-            react_1.default.createElement(Typo_1.SANS_2, null, dropzoneSublabel))))));
+    var handleOnConfirm = function () {
+        localStorage.setItem("PreUploadImageCautionAcknowleged", "true");
+        handleUpload(__assign({}, uploadArgs));
+        setShowModal(false);
+    };
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(AspectRatioShell_1.default, { aspectRatio: aspectRatio, containerShape: containerShape, stretchToFullHeight: stretchToFullHeight, onShellPrepared: decideUIStyle },
+            react_1.default.createElement(FileUploadWrapper_1.FileUploadWrapper, { styledPlaceholderWrapperRef: styledPlaceholderWrapperRef, uploadProgress: uploadProgress, isLoading: isLoading, containerShape: containerShape, multiple: multiple, smallPlaceholderUI: smallPlaceholderUI, mediaType: "image", handleUpload: handleUpload, onChange: onChange, value: value, id: id, inputRef: inputRef },
+                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),
+                    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 === false
+                        ? "(optional)"
+                        : "")),
+                    react_1.default.createElement(Typo_1.SANS_2, null, dropzoneSublabel))),
+                showImageUploadCaution.enable ? (react_1.default.createElement(styled_1.StyledCautionMsg, null,
+                    react_1.default.createElement("div", { style: { flex: 0 } }, (0, genIcon_1.genIcon)({ icon: "Info" })),
+                    react_1.default.createElement(Typo_1.SANS_3, { style: { textAlign: "left" } }, showImageUploadCaution.subTitle))) : null)),
+        showModal ? (react_1.default.createElement(ModalConfirm_1.ModalConfirm, __assign({}, showImageUploadCaution, { onClose: function () { return setShowModal(false); }, onConfirm: handleOnConfirm }))) : null));
 };
 exports.default = Placeholder;

package/dist/components/ImageInput/comps/Placeholder/styled.d.ts

@@ -1,3 +1,4 @@
 export const StyledPlaceholderWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const StyledPlaceholder: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const SstyledPlaceholder: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledCautionMsg: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -7,7 +7,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SstyledPlaceholder = exports.StyledPlaceholder = exports.StyledPlaceholderWrapper = void 0;
+exports.StyledCautionMsg = exports.SstyledPlaceholder = exports.StyledPlaceholder = exports.StyledPlaceholderWrapper = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 var themes_1 = require("../../../../themes");
 var utilsOolib_1 = require("../../../../utilsOolib");
@@ -36,4 +36,5 @@ exports.SstyledPlaceholder = styled_components_1.default.div(templateObject_3 ||
     var containerShape = _a.containerShape;
     return containerShape === "circle" ? "50%" : "unset";
 }, greyColor100);
-var templateObject_1, templateObject_2, templateObject_3;
+exports.StyledCautionMsg = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n\nborder: 1px solid ", " ;\ndisplay: flex;\ngap: 1rem;\nbackground-color: ", " ;\npadding: 1rem 2rem;\nmargin-top: 3rem;\nwidth: fit-content;\nmax-width: 70%;\n"], ["\n\nborder: 1px solid ", " ;\ndisplay: flex;\ngap: 1rem;\nbackground-color: ", " ;\npadding: 1rem 2rem;\nmargin-top: 3rem;\nwidth: fit-content;\nmax-width: 70%;\n"])), themes_1.colors.yellow, themes_1.colors.lightYellow);
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

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, 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, showImageUploadCaution, files, isInRTE }: {
     id: any;
     value: any;
     onChange: any;
@@ -27,6 +27,7 @@ export function ImageInput({ id, value, onChange, readOnly, multiple, stretchToF
     disableImageBorder?: boolean;
     omitEditorTools?: any[];
     isRequired: any;
+    showImageUploadCaution?: {};
     files: any;
     isInRTE: any;
 }, ...args: any[]): React.JSX.Element;

package/dist/components/ImageInput/index.js

@@ -33,14 +33,14 @@ 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'
-    isRequired = _a.isRequired, files = _a.files, //used by RTEImageInput
+    isRequired = _a.isRequired, _l = _a.showImageUploadCaution, showImageUploadCaution = _l === void 0 ? {} : _l, 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, { value: value, onChange: onChange, id: id, allowedFormats: allowedFormats, formatConvertConfig: formatConvertConfig, folderName: folderName, bucketEnv: bucketEnv, multiple: multiple, aspectRatio: aspectRatio, readOnly: readOnly, enableCaptions: enableCaptions, defaultImageSpread: defaultImageSpread, invert: invert, containerShape: containerShape, stretchToFullHeight: stretchToFullHeight, disableImageBorder: disableImageBorder, omitEditorTools: omitEditorTools, dropzoneLabel: dropzoneLabel || (multiple ? "Add Images ( max 10 )" : "Add Image"),
         dropzoneSublabel: dropzoneSublabel ||
             "Supports: ".concat(allowedFormats.map(function (f) { return f.toUpperCase(); }).join(", ")), showOptionalLabelInDropzone: showOptionalLabelInDropzone, // in cases like cover image scenario, we wanna show the 'optional' label in the dropzone area, rather than label area
-        isRequired: isRequired, files: files, isInRTE: isInRTE },
+        isRequired: isRequired, files: files, isInRTE: isInRTE, showImageUploadCaution: showImageUploadCaution },
         react_1.default.createElement("div", { style: { height: stretchToFullHeight ? "100%" : "auto", } },
             react_1.default.createElement(BlockLabel_1.BlockLabel, __assign({}, (0, getBlockLabelProps_1.getBlockLabelProps)(__assign(__assign({}, props), { hideOptionalLabel: showOptionalLabelInDropzone })))),
             multiple ? (react_1.default.createElement(GallerySlider_1.default, null)) : isInRTE

package/dist/components/Playground/index.js

@@ -9,12 +9,13 @@ 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, Like = icons_1.icons.Like;
+    var Inspiring = icons_1.icons.Inspiring, Celebrate = icons_1.icons.Celebrate, Learning = icons_1.icons.Learning, Like = icons_1.icons.Like, Reactions = icons_1.icons.Reactions, ThumbsUp = icons_1.icons.ThumbsUp;
     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(Like, { size: 24, weight: "fill" })));
+        react_1.default.createElement(Like, { size: 24, weight: "fill" }),
+        react_1.default.createElement(Reactions, { size: 24, weight: "fill" })));
 };
 var Playground = function (_a) {
     var invert = _a.invert;

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

@@ -67,3 +67,4 @@ 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;
+export declare const Reactions: (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.Like = exports.Learning = exports.Inspiring = exports.Celebrate = exports.Stars = exports.SpainFlag = exports.PakistanFlag = exports.ChileFlag = exports.IndonesiaFlag = void 0;
+exports.Reactions = 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");
@@ -459,3 +459,18 @@ var Like = function (props) {
                 react_1.default.createElement("rect", { width: "20", height: "20", fill: "white", transform: "translate(2 2)" })))));
 };
 exports.Like = Like;
+var Reactions = function (props) {
+    return (react_1.default.createElement("svg", { width: props.size || 30, height: props.size || 30, viewBox: "0 0 256 256", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+        react_1.default.createElement("g", { "clip-path": "url(#clip0_1676_455)" },
+            react_1.default.createElement("path", { d: "M247.954 105.997L239.219 175.903C239.042 177.311 238.357 178.606 237.293 179.544C236.228 180.483 234.858 181 233.439 181H149V112.471L175.722 59C179.683 59.793 183.246 61.9343 185.806 65.0595C188.367 68.1848 189.765 72.1009 189.764 76.1415V93.6179C189.764 95.1629 190.377 96.6446 191.47 97.7371C192.562 98.8296 194.043 99.4434 195.587 99.4434H242.175C243.001 99.4431 243.818 99.6187 244.571 99.9587C245.324 100.299 245.997 100.795 246.543 101.415C247.09 102.035 247.499 102.764 247.742 103.554C247.985 104.344 248.058 105.177 247.954 105.997Z", fill: "#EBF6FF" }),
+            react_1.default.createElement("path", { d: "M95.9872 107.218L109.317 130.401C112.105 135.215 113.914 140.537 114.64 146.058C115.365 151.58 114.992 157.191 113.543 162.567C111.372 170.671 106.859 177.948 100.575 183.478C94.2915 189.008 86.5177 192.543 78.2356 193.637C69.9534 194.732 61.5343 193.336 54.0411 189.626C46.5479 185.916 40.3166 180.059 36.1341 172.794L12.8824 132.388C12.0082 130.865 11.7719 129.056 12.2257 127.357C12.6794 125.659 13.7859 124.212 15.3018 123.333C16.8177 122.455 19.5263 121.692 21.2164 122.148C22.9064 122.603 24.347 123.715 25.2212 125.238L38.5908 148.422C39.2902 149.642 40.4433 150.533 41.7964 150.899C43.1496 151.264 43.6845 151.601 44.8988 150.899C46.113 150.196 46.9998 149.037 47.3639 147.678C47.728 146.318 47.5396 144.869 46.8402 143.649L23.6215 103.243C22.7473 101.721 22.5107 99.9123 22.9639 98.2148C23.417 96.5173 24.5227 95.0702 26.0377 94.1918C27.5527 93.3135 29.3529 93.0758 31.0424 93.531C32.7318 93.9863 34.8058 94.5692 35.68 96.0914L56.6177 132.523C57.3171 133.741 58.4695 134.63 59.8214 134.995C61.1734 135.359 61.9804 135.697 63.1929 134.995C64.4054 134.292 65.2905 133.134 65.6533 131.776C66.0162 130.417 65.8272 128.97 65.1278 127.752L47.9544 97.9443C47.0802 96.4203 46.8443 94.6098 47.2986 92.911C47.753 91.2123 48.8603 89.7645 50.3771 88.8861C51.8939 88.0078 53.6958 87.7708 55.3865 88.2273C57.0772 88.6838 58.5181 89.7964 59.3923 91.3204L83.4549 133.051C84.1542 134.269 85.3067 135.158 86.6586 135.523C88.0105 135.887 89.4512 135.697 90.6638 134.995C91.8763 134.292 92.7613 133.134 93.1242 131.776C93.4871 130.417 93.298 128.97 92.5986 127.752L84.2921 113.345C83.4835 111.786 83.324 109.969 83.8488 108.293C84.3736 106.617 85.5398 105.218 87.0906 104.406C88.6415 103.593 90.4501 103.433 92.1185 103.96C93.7869 104.488 95.1785 105.659 95.9872 107.218Z", fill: "#EBF6FF" }),
+            react_1.default.createElement("path", { d: "M252.832 96.3087C251.269 94.5376 249.347 93.1194 247.194 92.1481C245.041 91.1768 242.706 90.6747 240.344 90.6752H201.492V79.5748C201.492 72.2148 198.569 65.1562 193.364 59.9518C188.16 54.7475 181.101 51.8237 173.741 51.8237C172.71 51.823 171.699 52.1095 170.822 52.6511C169.944 53.1928 169.235 53.9681 168.774 54.8902L143.088 106.761V106.761C141.406 107.089 140.192 108.567 140.192 110.281C140.192 140.959 140.191 150.737 140.191 186.546C140.191 188.757 141.964 190.562 144.175 190.555C161.571 190.505 226.887 190.579 232.018 190.579C236.075 190.58 239.992 189.101 243.035 186.418C246.078 183.736 248.037 180.034 248.544 176.01L256.87 109.407C257.165 107.062 256.957 104.682 256.261 102.423C255.565 100.165 254.396 98.0804 252.832 96.3087ZM245.852 108.02L237.527 174.622C237.358 175.964 236.705 177.197 235.691 178.092C234.676 178.986 233.371 179.479 232.018 179.479H151.54V114.187L177.009 63.2433C180.784 63.9988 184.18 66.0389 186.62 69.0165C189.06 71.9941 190.393 75.7252 190.392 79.5748V96.2254C190.392 97.6974 190.977 99.1092 192.017 100.15C193.058 101.191 194.47 101.776 195.942 101.776H240.344C241.131 101.775 241.91 101.943 242.628 102.267C243.346 102.59 243.987 103.063 244.508 103.654C245.029 104.245 245.418 104.939 245.65 105.692C245.882 106.445 245.951 107.238 245.852 108.02Z", fill: "#ADDBFF" }),
+            react_1.default.createElement("path", { d: "M131.07 100.842C142.244 120.271 139.514 145.384 124.425 161.957C124.204 163.082 123.957 164.207 123.651 165.325C120.97 175.27 115.402 184.198 107.65 190.981C99.8985 197.764 90.311 202.099 80.0979 203.437C69.8848 204.775 59.5041 203.058 50.2665 198.501C41.0289 193.944 33.3484 186.753 28.1949 177.834L5.26378 138.174C3.87098 135.761 3.0962 133.041 3.0084 130.257C2.92059 127.472 3.52247 124.709 4.76049 122.213C5.99851 119.717 7.83428 117.565 10.1045 115.95C12.3747 114.335 15.0089 113.306 17.7729 112.955L15.8224 109.574C14.4314 107.163 13.6573 104.446 13.5688 101.663C13.4804 98.8814 14.0803 96.1205 15.3153 93.626C16.5504 91.1315 18.3823 88.9806 20.6484 87.3642C22.9145 85.7479 25.5447 84.7161 28.3054 84.3606L27.8503 83.5609C25.9222 80.2403 25.182 76.3622 25.7516 72.5649C26.3212 68.7675 28.1667 65.2773 30.9843 62.6686C33.8019 60.0598 37.4237 58.4881 41.2536 58.2121C45.0835 57.9361 48.8932 58.9722 52.0558 61.1499C53.582 58.6361 55.7363 56.5628 58.3068 55.134C60.8773 53.7052 63.7754 52.9701 66.7161 53.0009C69.6568 53.0318 72.5389 53.8275 75.0788 55.3099C77.6188 56.7923 79.7292 58.9102 81.2024 61.4555L89.1734 75.2389C90.8686 73.0278 93.0828 71.2688 95.62 70.1174C98.1571 68.966 100.939 68.4579 103.719 68.6379C106.5 68.8179 109.193 69.6805 111.56 71.1494C113.928 72.6183 115.897 74.6481 117.293 77.0593L131.07 100.842ZM60.8979 73.1584L77.1519 101.226C78.5076 99.4516 80.2012 97.9637 82.1351 96.8477C84.069 95.7318 86.2048 95.0101 88.4192 94.7242L72.1782 66.6568C71.316 65.1609 69.895 64.0688 68.2276 63.6207C66.5602 63.1727 64.7831 63.4053 63.2873 64.2674C61.7914 65.1296 60.6993 66.5507 60.2512 68.2181C59.8031 69.8854 60.0358 71.6625 60.8979 73.1584ZM36.8745 78.3597L41.0746 85.6219C42.4307 83.8498 44.1237 82.3632 46.0562 81.2474C47.9887 80.1317 50.1226 79.4088 52.3353 79.1203L48.1418 71.8581C47.7149 71.1182 47.1465 70.4697 46.4689 69.9496C45.7914 69.4295 45.0181 69.0479 44.1931 68.8266C43.3681 68.6053 42.5076 68.5487 41.6607 68.66C40.8138 68.7713 39.9972 69.0483 39.2574 69.4752C38.5176 69.9021 37.8691 70.4706 37.3489 71.1481C36.8288 71.8256 36.4472 72.5989 36.2259 73.4239C36.0047 74.2489 35.9481 75.1094 36.0593 75.9563C36.1706 76.8032 36.4476 77.6198 36.8745 78.3597ZM109.393 131.023L96.2471 108.267C95.4496 106.738 94.0772 105.587 92.4317 105.07C90.7863 104.552 89.0027 104.71 87.4732 105.507C85.9437 106.305 84.7937 107.677 84.2761 109.322C83.7585 110.968 83.9158 112.751 84.7133 114.281L92.9053 128.422C93.595 129.618 93.7815 131.039 93.4236 132.372C93.0657 133.705 92.1929 134.842 90.9971 135.531C89.8012 136.221 88.3804 136.408 87.0471 136.05C85.7138 135.692 84.5773 134.819 83.8876 133.623L60.1567 92.6632C59.2946 91.1673 57.8735 90.0752 56.2061 89.6271C54.5388 89.179 52.7617 89.4117 51.2658 90.2738C49.77 91.136 48.6779 92.5571 48.2298 94.2244C47.7817 95.8918 48.0143 97.6689 48.8765 99.1648L65.8131 128.422C66.5029 129.618 66.6893 131.039 66.3315 132.372C65.9736 133.705 65.1007 134.842 63.9049 135.531C62.7091 136.221 61.2883 136.408 59.955 136.05C58.6217 135.692 57.4852 134.819 56.7954 133.623L36.1464 97.8644C35.2842 96.3703 33.8638 95.2799 32.1976 94.833C30.5315 94.3861 28.7561 94.6194 27.2619 95.4816C25.7678 96.3438 24.6774 97.7642 24.2305 99.4303C23.7836 101.096 24.0169 102.872 24.8791 104.366L47.7777 144.026C48.4674 145.223 48.6532 146.646 48.2941 147.98C47.935 149.315 47.0605 150.452 45.863 151.142C44.6654 151.831 43.243 152.017 41.9084 151.658C40.5739 151.299 39.4367 150.425 38.747 149.227L25.5618 126.471C24.6996 124.976 23.2789 123.885 21.6121 123.438C19.9453 122.99 18.1691 123.223 16.6741 124.085C15.1791 124.948 14.0878 126.368 13.6403 128.035C13.1929 129.702 13.4258 131.478 14.288 132.973L37.2191 172.633C41.344 179.764 47.4894 185.513 54.8793 189.154C62.2692 192.796 70.5722 194.166 78.7402 193.092C86.9082 192.018 94.5748 188.548 100.772 183.12C106.97 177.692 111.42 170.549 113.561 162.594C114.99 157.318 115.358 151.81 114.643 146.391C113.927 140.971 112.143 135.747 109.393 131.023ZM108.269 82.2606C107.842 81.5187 107.273 80.8681 106.594 80.3459C105.916 79.8238 105.142 79.4405 104.315 79.2177C102.646 78.7678 100.866 78.9994 99.3679 79.8615C98.6259 80.2884 97.9753 80.8573 97.4532 81.5356C96.9311 82.214 96.5477 82.9885 96.3249 83.815C95.875 85.4842 96.1066 87.2638 96.9688 88.7622L118.424 125.854C121.398 130.982 123.476 136.58 124.568 142.407C133.594 119.907 119.033 100.888 108.269 82.2606Z", fill: "#ADDBFF" }),
+            react_1.default.createElement("path", { d: "M48.3462 29.1232L51.0386 39.1713C51.3956 40.5037 52.2673 41.6398 53.462 42.3295C54.6566 43.0192 56.0763 43.2062 57.4088 42.8491C58.7413 42.4921 59.8773 41.6204 60.5671 40.4257C61.2568 39.2311 61.4437 37.8113 61.0867 36.4789L58.3943 26.4308C58.0372 25.0983 57.1655 23.9623 55.9709 23.2725C54.7762 22.5828 53.3565 22.3959 52.024 22.7529C50.6916 23.11 49.5555 23.9817 48.8658 25.1763C48.1761 26.371 47.9892 27.7907 48.3462 29.1232Z", fill: "#ADDBFF" }),
+            react_1.default.createElement("path", { d: "M79.2477 43.8428C78.3244 44.0939 77.3493 44.0825 76.4321 43.8097C75.7762 43.6176 75.1645 43.298 74.6322 42.8693C74.0998 42.4407 73.6572 41.9113 73.3296 41.3115C73.0019 40.7116 72.7957 40.0531 72.7228 39.3735C72.6498 38.6939 72.7115 38.0067 72.9043 37.3509L75.7239 27.7779C75.9163 27.1217 76.236 26.5099 76.6648 25.9773C77.0936 25.4447 77.6231 25.0018 78.223 24.6738C78.823 24.3459 79.4817 24.1393 80.1615 24.0659C80.8413 23.9925 81.5289 24.0538 82.185 24.2461C82.8412 24.4384 83.453 24.7581 83.9856 25.1869C84.5182 25.6157 84.9611 26.1452 85.289 26.7452C85.617 27.3451 85.8236 28.0038 85.8969 28.6836C85.9703 29.3634 85.9091 30.051 85.7168 30.7072L82.8988 40.2865C82.6465 41.1428 82.1782 41.9197 81.5387 42.5425C80.8993 43.1653 80.1103 43.6131 79.2477 43.8428Z", fill: "#ADDBFF" }),
+            react_1.default.createElement("path", { d: "M106.973 42.2626C107.536 42.6513 108.016 43.1471 108.387 43.7216L108.38 43.6965C108.755 44.2712 109.013 44.9145 109.138 45.5892C109.264 46.2639 109.254 46.9568 109.111 47.6278C108.967 48.2989 108.692 48.9348 108.301 49.4991C107.911 50.0634 107.412 50.5448 106.835 50.9156L98.1996 56.494C97.7431 56.7881 97.2442 57.0103 96.7203 57.1528C95.5217 57.4778 94.2463 57.3632 93.1249 56.8298C92.0034 56.2963 91.1098 55.3792 90.6057 54.2442C90.1016 53.1093 90.0202 51.8314 90.3762 50.6416C90.7323 49.4519 91.5022 48.4288 92.547 47.7573L101.189 42.1773C101.762 41.8054 102.404 41.5504 103.077 41.4267C103.749 41.303 104.44 41.3132 105.108 41.4567C105.777 41.6001 106.411 41.874 106.973 42.2626Z", fill: "#ADDBFF" })),
+        react_1.default.createElement("defs", null,
+            react_1.default.createElement("clipPath", { id: "clip0_1676_455" },
+                react_1.default.createElement("rect", { width: "256", height: "256", fill: "white" })))));
+};
+exports.Reactions = Reactions;

package/dist/icons/index.d.ts

@@ -169,6 +169,7 @@ export namespace icons {
     export { Inspiring };
     export { Learning };
     export { Like };
+    export { Reactions };
 }
 import { PencilSimple } from 'phosphor-react';
 import { PencilLine } from 'phosphor-react';
@@ -340,3 +341,4 @@ import { Celebrate } from "./custom";
 import { Inspiring } from "./custom";
 import { Learning } from "./custom";
 import { Like } from "./custom";
+import { Reactions } from "./custom";

package/dist/icons/index.js

@@ -174,5 +174,6 @@ exports.icons = {
     Celebrate: custom_1.Celebrate,
     Inspiring: custom_1.Inspiring,
     Learning: custom_1.Learning,
-    Like: custom_1.Like
+    Like: custom_1.Like,
+    Reactions: custom_1.Reactions
 };

package/dist/stories/ImageInput/ImageInput.stories.d.ts

@@ -46,7 +46,13 @@ export namespace ImageInput {
         readOnly: {
             name: string;
             control: string;
-        };
+        }; /**
+         * very important, in order to force the component to rerender
+         * when things like aspect ratio are changed.
+         * cuz natively, its not possible to modify the aspect ratio of
+         * an image input after it has rerendered.
+         * Hence this hack
+         */
         sizeProfile: {
             name: string;
             control: {
@@ -68,6 +74,10 @@ export namespace ImageInput {
             name: string;
             type: string;
         };
+        showImageUploadCaution: {
+            name: string;
+            type: string;
+        };
     }, "imageTitle" | "dropzoneLabelMultiple" | "sizeProfile">;
     let args: Omit<{
         containerShape: string;
@@ -83,6 +93,7 @@ export namespace ImageInput {
         imageTitle: string;
         readOnly: boolean;
         invert: boolean;
+        showImageUploadCaution: boolean;
     }, "imageTitle" | "dropzoneLabelMultiple" | "sizeProfile">;
     function render(args: any): React.JSX.Element;
 }
@@ -130,7 +141,13 @@ export namespace ImageGallery {
         readOnly: {
             name: string;
             control: string;
-        };
+        }; /**
+         * very important, in order to force the component to rerender
+         * when things like aspect ratio are changed.
+         * cuz natively, its not possible to modify the aspect ratio of
+         * an image input after it has rerendered.
+         * Hence this hack
+         */
         sizeProfile: {
             name: string;
             control: {
@@ -152,6 +169,10 @@ export namespace ImageGallery {
             name: string;
             type: string;
         };
+        showImageUploadCaution: {
+            name: string;
+            type: string;
+        };
     }, "dropzoneLabel" | "imageTitle" | "sizeProfile">;
     export { argTypes_1 as argTypes };
     let args_1: Omit<{
@@ -168,6 +189,7 @@ export namespace ImageGallery {
         imageTitle: string;
         readOnly: boolean;
         invert: boolean;
+        showImageUploadCaution: boolean;
     }, "dropzoneLabel" | "imageTitle" | "sizeProfile">;
     export { args_1 as args };
     export function render_1(args: any): React.JSX.Element;
@@ -217,7 +239,13 @@ export namespace ProfileImageInput {
         readOnly: {
             name: string;
             control: string;
-        };
+        }; /**
+         * very important, in order to force the component to rerender
+         * when things like aspect ratio are changed.
+         * cuz natively, its not possible to modify the aspect ratio of
+         * an image input after it has rerendered.
+         * Hence this hack
+         */
         sizeProfile: {
             name: string;
             control: {
@@ -239,7 +267,11 @@ export namespace ProfileImageInput {
             name: string;
             type: string;
         };
-    }, "size" | "aspectRatio" | "enableCaptions" | "defaultImageSpread" | "containerShape" | "dropzoneLabel" | "dropzoneSublabel" | "dropzoneLabelMultiple" | "optionalLabel">;
+        showImageUploadCaution: {
+            name: string;
+            type: string;
+        };
+    }, "size" | "aspectRatio" | "enableCaptions" | "defaultImageSpread" | "containerShape" | "dropzoneLabel" | "dropzoneSublabel" | "showImageUploadCaution" | "dropzoneLabelMultiple" | "optionalLabel">;
     export { argTypes_2 as argTypes };
     let args_2: Omit<{
         containerShape: string;
@@ -255,7 +287,8 @@ export namespace ProfileImageInput {
         imageTitle: string;
         readOnly: boolean;
         invert: boolean;
-    }, "size" | "aspectRatio" | "enableCaptions" | "defaultImageSpread" | "containerShape" | "dropzoneLabel" | "dropzoneSublabel" | "dropzoneLabelMultiple" | "optionalLabel">;
+        showImageUploadCaution: boolean;
+    }, "size" | "aspectRatio" | "enableCaptions" | "defaultImageSpread" | "containerShape" | "dropzoneLabel" | "dropzoneSublabel" | "showImageUploadCaution" | "dropzoneLabelMultiple" | "optionalLabel">;
     export { args_2 as args };
     export function render_2(args: any): React.JSX.Element;
     export { render_2 as render };

package/dist/stories/ImageInput/ImageInput.stories.js

@@ -53,7 +53,7 @@ var ImageInput_ = function (args) {
     var props = __assign(__assign({}, (0, imageInputParseArgTypes_1.imageInputParseArgTypes)({
         args: args,
     })), { value: val, onChange: function (k, v) { return setVal(v); } });
-    console.log({ value: val });
+    console.log({ props: props });
     /**
      * very important, in order to force the component to rerender
      * when things like aspect ratio are changed.
@@ -150,7 +150,8 @@ exports.ProfileImageInput = {
         "dropzoneSublabel",
         "size",
         "optionalLabel",
-        "enableCaptions"
+        "enableCaptions",
+        "showImageUploadCaution"
     ]),
     args: (0, excludeKeys_1.excludeKeys)(imageInputArgTypes_1.imageInputArgs, [
         "containerShape",
@@ -161,7 +162,8 @@ exports.ProfileImageInput = {
         "dropzoneSublabel",
         "size",
         "optionalLabel",
-        "enableCaptions"
+        "enableCaptions",
+        "showImageUploadCaution"
     ]),
     render: function (args) { return react_1.default.createElement(ProfileImageInput_, __assign({}, args)); },
 };

package/dist/stories/ImageInput/imageInputArgTypes.d.ts

@@ -90,6 +90,12 @@ export namespace imageInputArgTypes {
         let type_2: string;
         export { type_2 as type };
     }
+    namespace showImageUploadCaution {
+        let name_13: string;
+        export { name_13 as name };
+        let type_3: string;
+        export { type_3 as type };
+    }
 }
 export namespace imageInputArgs {
     let containerShape_1: string;
@@ -118,4 +124,6 @@ export namespace imageInputArgs {
     export { readOnly_1 as readOnly };
     let invert_1: boolean;
     export { invert_1 as invert };
+    let showImageUploadCaution_1: boolean;
+    export { showImageUploadCaution_1 as showImageUploadCaution };
 }

package/dist/stories/ImageInput/imageInputArgTypes.js

@@ -58,6 +58,10 @@ exports.imageInputArgTypes = {
     enableCaptions: {
         name: 'Captions',
         type: 'boolean'
+    },
+    showImageUploadCaution: {
+        name: "Show Image Upload Caution",
+        type: 'boolean'
     }
 };
 exports.imageInputArgs = {
@@ -75,4 +79,5 @@ exports.imageInputArgs = {
     imageTitle: 'Placeholder Title',
     readOnly: false,
     invert: false,
+    showImageUploadCaution: false
 };

package/dist/stories/ImageInput/imageInputParseArgTypes.d.ts

@@ -14,4 +14,11 @@ export function imageInputParseArgTypes({ args, isImageSlider, isProfileImageInp
     imageTitle: any;
     isRequired: boolean;
     enableCaptions: any;
+    showImageUploadCaution: {
+        enable: any;
+        title: string;
+        subTitle: string;
+        onConfirmText: string;
+        onCancelText: string;
+    };
 };

package/dist/stories/ImageInput/imageInputParseArgTypes.js

@@ -8,7 +8,7 @@ var imageInputParseArgTypes = function (_a) {
     var args = _a.args, _b = _a.isImageSlider, isImageSlider = _b === void 0 ? false : _b, _c = _a.isProfileImageInput, isProfileImageInput = _c === void 0 ? false : _c;
     var _containerShape = args.containerShape, _size = args.size, _aspectRatio = args.aspectRatio, _defaultImageSpread = args.defaultImageSpread, invert = args.invert, _dropzoneLabel = args.dropzoneLabel, _dropzoneLabelMultiple = args.dropzoneLabelMultiple, dropzoneSublabel = args.dropzoneSublabel, readOnly = args.readOnly, 
     //profile image input related
-    sizeProfile = args.sizeProfile, imageTitle = args.imageTitle, optionalLabel = args.optionalLabel, enableCaptions = args.enableCaptions;
+    sizeProfile = args.sizeProfile, imageTitle = args.imageTitle, optionalLabel = args.optionalLabel, enableCaptions = args.enableCaptions, showImageUploadCaution = args.showImageUploadCaution;
     return ({
         containerShape: _containerShape === null || _containerShape === void 0 ? void 0 : _containerShape.toLowerCase(),
         size: isProfileImageInput
@@ -25,7 +25,14 @@ var imageInputParseArgTypes = function (_a) {
         //profile image input related
         imageTitle: imageTitle,
         isRequired: !optionalLabel,
-        enableCaptions: enableCaptions
+        enableCaptions: enableCaptions,
+        showImageUploadCaution: {
+            enable: showImageUploadCaution,
+            title: "Are you uploading any sensitive data?",
+            subTitle: "We are committed to protecting the identities of all students and staff  at school. Please do not upload any image that is sensitive in nature or  portrays a person in distress.",
+            onConfirmText: "I Understand",
+            onCancelText: "Cancel Upload",
+        }
     });
 };
 exports.imageInputParseArgTypes = imageInputParseArgTypes;

package/package.json

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