oolib 2.124.0 → 2.124.2

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/cards/CardContent/index.js

@@ -27,6 +27,7 @@ var CrownSimple = icons_1.icons.CrownSimple;
 var CardContent = function (_a) {
     var id = _a.id, data = _a.data, config = _a.config, to = _a.to, onClick = _a.onClick, openInNewTab = _a.openInNewTab, actions = _a.actions, highlight = _a.highlight;
     var theme = (0, styled_components_1.useTheme)();
+    var localize = (0, utilsOolib_1.useLocale)();
     var parseSpecialSyntax = (theme || {}).parseSpecialSyntax;
     var showEmbedSection = !!((config === null || config === void 0 ? void 0 : config.image) || (config === null || config === void 0 ? void 0 : config.video));
     var _b = (0, parseCardConfig_1.parseCardConfig)({
@@ -60,7 +61,7 @@ var CardContent = function (_a) {
                         " ",
                         react_1.default.createElement(LineClampWrapper_1.LineClampWrapper, { noOfLines_M: 6, title: title },
                             react_1.default.createElement(styled_1.StyledTitle, { capitalize: true, className: "StyledTitle" },
-                                react_1.default.createElement(styled_1.StyledTitleSpan, { className: "StyledTitleSpan" }, title))))) : null),
+                                react_1.default.createElement(styled_1.StyledTitleSpan, { className: "StyledTitleSpan" }, localize(title)))))) : null),
                 tagDisplay && react_1.default.createElement(Tags_1.TagDisplay, { display: tagDisplay, color: "green" }),
                 (metaBlock === null || metaBlock === void 0 ? void 0 : metaBlock.length) > 0 ? (react_1.default.createElement(MetaBlock_1.default, { data: data, config: metaBlock }) //show only two meta for cardContent
                 ) : null),

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

@@ -27,6 +27,7 @@ var mixins_1 = require("../../../themes/mixins");
 var ListContent = function (_a) {
     var id = _a.id, data = _a.data, config = _a.config, to = _a.to, onClick = _a.onClick, openInNewTab = _a.openInNewTab, actions = _a.actions, statusTag = _a.statusTag, _b = _a.variant, variant = _b === void 0 ? "content" : _b;
     var theme = (0, styled_components_1.useTheme)();
+    var localize = (0, utilsOolib_1.useLocale)();
     var screenWidth = (0, _EXPORTS_1.useScreenWidth)();
     var parseSpecialSyntax = (theme || {}).parseSpecialSyntax;
     var _c = (0, parseCardConfig_1.parseCardConfig)({
@@ -54,7 +55,7 @@ var ListContent = function (_a) {
                     title ? (react_1.default.createElement("div", { style: { flexGrow: 1 } },
                         react_1.default.createElement(LineClampWrapper_1.LineClampWrapper, { noOfLines_M: 6, noOfLines_D: 3, title: title },
                             react_1.default.createElement(styled_1.StyledTitle, { capitalize: true, className: "StyledTitle" },
-                                react_1.default.createElement(styled_1.StyledTitleSpan, { className: "StyledTitleSpan" }, title))))) : null,
+                                react_1.default.createElement(styled_1.StyledTitleSpan, { className: "StyledTitleSpan" }, localize(title)))))) : null,
                     (metaBlock === null || metaBlock === void 0 ? void 0 : metaBlock.length) > 0 && (react_1.default.createElement("div", { style: { width: "100%", paddingTop: "1rem" } },
                         react_1.default.createElement(MetaBlock_1.default, { data: data, config: metaBlock })))),
                 variant === "content" ? ((mediaConfigExists || actions) && (react_1.default.createElement(styled_js_1.StyledContentModule2, null,

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.0",
+  "version": "2.124.2",
   "description": " OKE Component Library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",