oolib 2.98.0 → 2.100.0

package/dist/components/AudioInput/index.js

@@ -50,13 +50,12 @@ var Buttons_1 = require("../Buttons");
 var BlockLabel_1 = require("../BlockLabel");
 var getBlockLabelProps_1 = require("../../utils/getBlockLabelProps");
 var bannerContext_1 = require("../Banners/bannerContext");
-var ProgressBar_1 = require("../LoadersAndProgress/ProgressBar");
 var styled_components_1 = require("styled-components");
 var useFakeUploadImpression_1 = require("../../utilsOolib/useFakeUploadImpression");
 var AudioAction_1 = require("./comps/AudioAction");
 var AudioPlayer_1 = require("./comps/AudioPlayer");
 var styled_js_1 = require("./styled.js");
-var UploadWrapper_1 = require("../GlobalUIComps/UploadWrapper");
+var FileUploadWrapper_1 = require("../FileUploadWrapper");
 function AudioInput(_a) {
     var id = _a.id, value = _a.value, parentOnChange = _a.onChange, readOnly = _a.readOnly, invert = _a.invert, isInRTE = _a.isInRTE, files = _a.files, props = __rest(_a, ["id", "value", "onChange", "readOnly", "invert", "isInRTE", "files"]);
     var audioData = value || [];
@@ -95,11 +94,8 @@ function AudioInput(_a) {
     }, []);
     return (react_1.default.createElement(react_1.Fragment, null,
         react_1.default.createElement(BlockLabel_1.BlockLabel, __assign({}, (0, getBlockLabelProps_1.getBlockLabelProps)(props))),
-        readOnly ? (react_1.default.createElement(AudioPlayer_1.AudioPlayer, { audioData: audioData })) : (audioData === null || audioData === void 0 ? void 0 : audioData.length) === 0 && !isLoading ? (react_1.default.createElement(UploadWrapper_1.UploadWrapper, { invert: invert },
-            react_1.default.createElement(Buttons_1.ButtonSecondary, { onClick: function () { return inputRef.current.click(); }, icon: "UploadSimple", value: "Upload Audio", accept: "audio/*", invert: invert }))) : isLoading ? (react_1.default.createElement(UploadWrapper_1.UploadWrapper, { invert: invert },
-            react_1.default.createElement(ProgressBar_1.ProgressBar, { progress: uploadProgress, text: uploadProgress && uploadProgress !== 100
-                    ? uploadProgress + "%"
-                    : "Almost Done..." }))) : (audioData && (react_1.default.createElement(styled_js_1.StyledAudioPlayerWrapper, { isInRTE: isInRTE },
+        readOnly ? (react_1.default.createElement(AudioPlayer_1.AudioPlayer, { audioData: audioData })) : (audioData === null || audioData === void 0 ? void 0 : audioData.length) === 0 ? (react_1.default.createElement(FileUploadWrapper_1.FileUploadWrapper, { height: '18rem', isLoading: isLoading, uploadProgress: uploadProgress, mediaType: 'audio', enableClickUpload: false, handleUpload: handleUpload },
+            react_1.default.createElement(Buttons_1.ButtonSecondary, { onClick: function () { return inputRef.current.click(); }, icon: "UploadSimple", value: "Upload Audio", accept: "audio/*", invert: invert }))) : (audioData && (react_1.default.createElement(styled_js_1.StyledAudioPlayerWrapper, { isInRTE: isInRTE },
             react_1.default.createElement(AudioPlayer_1.AudioPlayer, { audioData: audioData }),
             react_1.default.createElement(AudioAction_1.AudioAction, __assign({}, { id: id, isInRTE: isInRTE, inputRef: inputRef, parentOnChange: parentOnChange }))))),
         react_1.default.createElement("input", { type: "file" // When user clicks on upload new video from action menu inputRef.current.click() this does not work for upload button. this approch deals with that issue.

package/dist/components/FileUploadWrapper/comps/FileUploadShell.d.ts

@@ -0,0 +1,17 @@
+export function FileUploadShell({ isLoading, children, disabled, enableFilesDrop, setDragOverActive: parentSetDragOverActive, handleUpload, onChange, value, id, multiple, mediaType, height, width, enableClickUpload, }: {
+    isLoading: any;
+    children: any;
+    disabled: any;
+    enableFilesDrop?: boolean;
+    setDragOverActive: any;
+    handleUpload: any;
+    onChange: any;
+    value: any;
+    id: any;
+    multiple: any;
+    mediaType: any;
+    height: any;
+    width: any;
+    enableClickUpload?: boolean;
+}): React.JSX.Element;
+import React from "react";

package/dist/components/{ImageInput/comps/ImageUploadShell/index.js → FileUploadWrapper/comps/FileUploadShell.js}

@@ -43,11 +43,10 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.UploadShell = void 0;
+exports.FileUploadShell = void 0;
 var react_1 = __importStar(require("react"));
-var ImageInputContext_1 = require("../../ImageInputContext");
-var bannerContext_1 = require("../../../Banners/bannerContext");
-var UIContent_1 = require("../../../../UIContent");
+var bannerContext_1 = require("../../Banners/bannerContext");
+var UIContent_1 = require("../../../UIContent");
 var mediaFormat = {
     image: 'image/*',
     video: 'video/*',
@@ -58,10 +57,10 @@ var mediaErrorMessage = {
     video: UIContent_1.UIContent.VideoInput.uploadError,
     pdf: UIContent_1.UIContent.Pdf.uploadError
 };
-var UploadShell = function (_a) {
-    var isLoading = _a.isLoading, children = _a.children, disabled = _a.disabled, _b = _a.enableFilesDrop, enableFilesDrop = _b === void 0 ? true : _b, parentSetDragOverActive = _a.setDragOverActive, handleUpload = _a.handleUpload, onChange = _a.onChange, value = _a.value, id = _a.id, multiple = _a.multiple, mediaType = _a.mediaType, height = _a.height, width = _a.width;
+var FileUploadShell = function (_a) {
+    var isLoading = _a.isLoading, children = _a.children, disabled = _a.disabled, _b = _a.enableFilesDrop, enableFilesDrop = _b === void 0 ? true : _b, parentSetDragOverActive = _a.setDragOverActive, handleUpload = _a.handleUpload, onChange = _a.onChange, value = _a.value, id = _a.id, multiple = _a.multiple, mediaType = _a.mediaType, height = _a.height, width = _a.width, _c = _a.enableClickUpload, enableClickUpload = _c === void 0 ? true : _c;
     var SET_ALERT_BANNER = (0, bannerContext_1.useBannerContext)().SET_ALERT_BANNER;
-    var inputRef = (0, react_1.useRef)(null);
+    var inputRef = (0, react_1.useRef)();
     if (disabled)
         return react_1.default.createElement("div", { style: { width: '100%', height: '100%' } }, children);
     var fireHandleUpload = function (files) {
@@ -106,58 +105,6 @@ var UploadShell = function (_a) {
                         }
                     }
                     : function () { }
-            }), { onClick: function () { return inputRef.current.click(); }, style: { height: height || '100%', width: width || '100%' } }), children)));
+            }), { onClick: function () { return enableClickUpload && inputRef.current.click(); }, style: { height: height || '100%', width: width || '100%' } }), children)));
 };
-exports.UploadShell = UploadShell;
-var ImageUploadShell = function (_a) {
-    var style = _a.style, isLoading = _a.isLoading, children = _a.children, disabled = _a.disabled, enableFilesDrop = _a.enableFilesDrop, setDragOverActive = _a.setDragOverActive;
-    var SET_ALERT_BANNER = (0, bannerContext_1.useBannerContext)().SET_ALERT_BANNER;
-    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 fireHandleUpload(e.target.files); }, multiple: multiple }),
-        react_1.default.createElement("div", __assign({}, (isLoading
-            ? {}
-            : {
-                onDragEnter: function (e) {
-                    e.preventDefault();
-                    setDragOverActive(true);
-                },
-                onDragLeave: function (e) {
-                    e.preventDefault();
-                    setDragOverActive(false);
-                },
-                onDragOver: enableFilesDrop
-                    ? function (e) { return e.preventDefault(); }
-                    : function () { },
-                onDrop: enableFilesDrop
-                    ? function (e) {
-                        var _a, _b;
-                        e.preventDefault();
-                        e.stopPropagation();
-                        if ((_a = e.dataTransfer) === null || _a === void 0 ? void 0 : _a.files) {
-                            if (!multiple && ((_b = e.dataTransfer) === null || _b === void 0 ? void 0 : _b.files.length) > 1) { //then set alert saying only first image will be attempted to upload
-                                SET_ALERT_BANNER(UIContent_1.UIContent.ImageInput.onlyFirstFileConsiderErrMsg, 'red', 3000);
-                            }
-                            var filesToUpload = multiple
-                                ? Array.from(e.dataTransfer.files)
-                                : [Array.from(e.dataTransfer.files)[0]];
-                            fireHandleUpload(filesToUpload);
-                        }
-                    }
-                    : function () { }
-            }), { onClick: function () { return inputRef.current.click(); }, style: { height: '100%', width: '100%' } }), children)));
-};
-exports.default = ImageUploadShell;
+exports.FileUploadShell = FileUploadShell;

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

@@ -0,0 +1,19 @@
+export function FileUploadWrapper({ smallPlaceholderUI, isLoading, multiple, containerShape, uploadProgress, mediaType, handleUpload, onChange, value, id, children, width, height, enableClickUpload, enableFilesDrop, styledPlaceholderWrapperRef, }: {
+    smallPlaceholderUI: any;
+    isLoading: any;
+    multiple: any;
+    containerShape: any;
+    uploadProgress: any;
+    mediaType: any;
+    handleUpload: any;
+    onChange: any;
+    value: any;
+    id: any;
+    children: any;
+    width: any;
+    height: any;
+    enableClickUpload?: boolean;
+    enableFilesDrop: any;
+    styledPlaceholderWrapperRef: any;
+}): React.JSX.Element;
+import React from "react";

package/dist/components/{PlaceholderWrapper → FileUploadWrapper}/index.js

@@ -34,17 +34,18 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PlaceHolderWrapper = void 0;
+exports.FileUploadWrapper = void 0;
 var react_1 = __importStar(require("react"));
 var ProgressBar_1 = require("../LoadersAndProgress/ProgressBar");
 var styled_1 = require("./styled");
-var ImageUploadShell_1 = require("../ImageInput/comps/ImageUploadShell");
-var PlaceHolder = function (_a, ref) {
-    var smallPlaceholderUI = _a.smallPlaceholderUI, isLoading = _a.isLoading, multiple = _a.multiple, containerShape = _a.containerShape, uploadProgress = _a.uploadProgress, mediaType = _a.mediaType, handleUpload = _a.handleUpload, onChange = _a.onChange, value = _a.value, id = _a.id, children = _a.children;
-    var _b = (0, react_1.useState)(false), dragOverActive = _b[0], setDragOverActive = _b[1];
-    return (react_1.default.createElement(styled_1.StyledPlaceholderWrapper, { smallPlaceholderUI: smallPlaceholderUI, ref: ref, dragOverActive: dragOverActive }, isLoading ? (react_1.default.createElement(ProgressBar_1.ProgressBar, { progress: uploadProgress, text: uploadProgress && uploadProgress !== 100
+var FileUploadShell_1 = require("./comps/FileUploadShell");
+var FileUploadWrapper = function (_a) {
+    var smallPlaceholderUI = _a.smallPlaceholderUI, isLoading = _a.isLoading, multiple = _a.multiple, containerShape = _a.containerShape, uploadProgress = _a.uploadProgress, mediaType = _a.mediaType, handleUpload = _a.handleUpload, onChange = _a.onChange, value = _a.value, id = _a.id, children = _a.children, width = _a.width, height = _a.height, _b = _a.enableClickUpload, enableClickUpload = _b === void 0 ? true : _b, // For components which has different options apart from upload, like VideoInput component allowing upload on wrapper click should be disabled
+    enableFilesDrop = _a.enableFilesDrop, styledPlaceholderWrapperRef = _a.styledPlaceholderWrapperRef;
+    var _c = (0, react_1.useState)(false), dragOverActive = _c[0], setDragOverActive = _c[1];
+    return (react_1.default.createElement(styled_1.StyledPlaceholderWrapper, { smallPlaceholderUI: smallPlaceholderUI, ref: styledPlaceholderWrapperRef, dragOverActive: dragOverActive, width: width, height: height }, isLoading ? (react_1.default.createElement(ProgressBar_1.ProgressBar, { progress: uploadProgress, text: uploadProgress && uploadProgress !== 100
             ? uploadProgress + "%"
-            : "Almost Done..." })) : (react_1.default.createElement(ImageUploadShell_1.UploadShell, { isLoading: isLoading, enableFilesDrop: true, multiple: multiple, setDragOverActive: setDragOverActive, handleUpload: handleUpload, onChange: onChange, value: value, id: id, mediaType: mediaType },
-        react_1.default.createElement(styled_1.StyledPlaceholder, __assign({}, { containerShape: containerShape }, { smallPlaceholderUI: smallPlaceholderUI }), children)))));
+            : "Almost Done..." })) : (react_1.default.createElement(FileUploadShell_1.FileUploadShell, { isLoading: isLoading, enableFilesDrop: enableFilesDrop, multiple: multiple, setDragOverActive: setDragOverActive, handleUpload: handleUpload, onChange: onChange, value: value, id: id, mediaType: mediaType, enableClickUpload: enableClickUpload },
+        react_1.default.createElement(styled_1.StyledPlaceholder, __assign({}, { containerShape: containerShape }, { smallPlaceholderUI: smallPlaceholderUI, enableClickUpload: enableClickUpload }), children)))));
 };
-exports.PlaceHolderWrapper = (0, react_1.forwardRef)(PlaceHolder);
+exports.FileUploadWrapper = FileUploadWrapper;

package/dist/components/{PlaceholderWrapper → FileUploadWrapper}/styled.js

@@ -13,7 +13,7 @@ var utilsOolib_1 = require("../../utilsOolib");
 var mixins_1 = require("../../themes/mixins");
 var themes_1 = require("../../themes");
 var greyColor100 = themes_1.colors.greyColor100;
-exports.StyledPlaceholderWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  padding: ", ";\n  width: 100%;\n  height: 100%;\n  ", "\n"], ["\n  background-color: ", ";\n  padding: ", ";\n  width: 100%;\n  height: 100%;\n  ", "\n"])), function (_a) {
+exports.StyledPlaceholderWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  padding: ", ";\n  width: ", ";\n  height: ", ";   \n  ", "\n"], ["\n  background-color: ", ";\n  padding: ", ";\n  width: ", ";\n  height: ", ";   \n  ", "\n"])), function (_a) {
     var theme = _a.theme, dragOverActive = _a.dragOverActive;
     return dragOverActive
         ? (0, utilsOolib_1.getPrimaryColor40)(theme === null || theme === void 0 ? void 0 : theme.colors)
@@ -21,8 +21,14 @@ exports.StyledPlaceholderWrapper = styled_components_1.default.div(templateObjec
 }, function (_a) {
     var smallPlaceholderUI = _a.smallPlaceholderUI;
     return !smallPlaceholderUI && "1.2rem";
+}, function (_a) {
+    var width = _a.width;
+    return width ? width : '100%';
+}, function (_a) {
+    var height = _a.height;
+    return height ? height : '100%';
 }, (0, mixins_1.transition)("background-color"));
-exports.StyledPlaceholder = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-flow: column nowrap;\n  height: 100%;\n  width: 100%;\n  gap: ", ";\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  border-radius: ", ";\n  border: 0.12rem dashed ", ";\n  padding: ", ";\n  cursor: pointer;\n"], ["\n  display: flex;\n  flex-flow: column nowrap;\n  height: 100%;\n  width: 100%;\n  gap: ", ";\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  border-radius: ", ";\n  border: 0.12rem dashed ", ";\n  padding: ", ";\n  cursor: pointer;\n"])), function (_a) {
+exports.StyledPlaceholder = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-flow: column nowrap;\n  height: 100%;\n  width: 100%;\n  gap: ", ";\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  border-radius: ", ";\n  border: 0.12rem dashed ", ";\n  padding: ", ";\n  cursor: ", ";\n"], ["\n  display: flex;\n  flex-flow: column nowrap;\n  height: 100%;\n  width: 100%;\n  gap: ", ";\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  border-radius: ", ";\n  border: 0.12rem dashed ", ";\n  padding: ", ";\n  cursor: ", ";\n"])), function (_a) {
     var smallPlaceholderUI = _a.smallPlaceholderUI;
     return !smallPlaceholderUI && "0.3rem";
 }, function (_a) {
@@ -31,5 +37,8 @@ exports.StyledPlaceholder = styled_components_1.default.div(templateObject_2 ||
 }, greyColor100, function (_a) {
     var smallPlaceholderUI = _a.smallPlaceholderUI;
     return !smallPlaceholderUI && "2rem";
+}, function (_a) {
+    var enableClickUpload = _a.enableClickUpload;
+    return enableClickUpload && 'pointer';
 });
 var templateObject_1, templateObject_2;

package/dist/components/ImageInput/comps/GallerySlider/comps/GalleryThumbnails/index.js

@@ -31,21 +31,18 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.GalleryThumbnails = void 0;
 var react_1 = __importStar(require("react"));
 var SkeletonLoader_1 = require("../../../../../LoadersAndProgress/SkeletonLoader");
 var ImageInputContext_1 = require("../../../../ImageInputContext");
-var ImageUploadShell_1 = __importDefault(require("../../../ImageUploadShell"));
 var styled_1 = require("./styled");
 var ImageDisplayInMask_1 = require("../../../../derivedComps/ImageDisplayInMask");
 var themes_1 = require("../../../../../../themes");
 var icons_1 = require("../../../../../../icons");
 var useScreenWidth_1 = require("../../../../../../utils/customHooks/useScreenWidth");
 var makeArrayFromLength_1 = require("../../../../../../utils/makeArrayFromLength");
+var FileUploadShell_1 = require("../../../../../FileUploadWrapper/comps/FileUploadShell");
 var Plus = icons_1.icons.Plus;
 var GalleryThumbnails = function (_a) {
     var activeIdx = _a.activeIdx, setActiveIdx = _a.setActiveIdx;
@@ -72,7 +69,7 @@ var GalleryThumbnails = function (_a) {
     var imageThumbnailsData = __spreadArray(__spreadArray([], ((0, makeArrayFromLength_1.makeArrayFromLength)(noOfImagesUploading).map(function (d) { return undefined; })), true), (value || []), true);
     return (react_1.default.createElement("div", { ref: totThumbsSpaceRef, style: { display: 'flex', gap: '1rem' } },
         !readOnly && (react_1.default.createElement(styled_1.StyledAddMoreThumbnail, { ref: addMoreThumbnailRef, disabled: isLoading, noBorder: true, invert: invert },
-            react_1.default.createElement(ImageUploadShell_1.default, { disabled: isLoading, multiple: true },
+            react_1.default.createElement(FileUploadShell_1.FileUploadShell, { disabled: isLoading, multiple: true },
                 react_1.default.createElement("div", { style: {
                         display: "grid",
                         placeItems: "center",

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

@@ -38,16 +38,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
-var ImageUploadShell_1 = __importDefault(require("../ImageUploadShell"));
 var AspectRatioShell_1 = __importDefault(require("../AspectRatioShell"));
-var styled_1 = require("./styled");
 var ImageInputContext_1 = require("../../ImageInputContext");
 var smallImageInputUIConditionsMet_1 = require("../ImageEditor/utils/smallImageInputUIConditionsMet");
 var icons_1 = require("../../../../icons");
 var themes_1 = require("../../../../themes");
 var Typo_1 = require("../../../Typo");
-var ProgressBar_1 = require("../../../LoadersAndProgress/ProgressBar");
-var PlaceholderWrapper_1 = require("../../../PlaceholderWrapper");
+var FileUploadWrapper_1 = require("../../../FileUploadWrapper");
 var ImageSquare = icons_1.icons.ImageSquare;
 var greyColor100 = themes_1.colors.greyColor100;
 var Placeholder = function (_a) {
@@ -78,13 +75,14 @@ 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, __assign({}, {
         aspectRatio: aspectRatio,
         containerShape: containerShape,
         stretchToFullHeight: stretchToFullHeight,
         onShellPrepared: decideUIStyle,
     }),
-        react_1.default.createElement(PlaceholderWrapper_1.PlaceHolderWrapper, { ref: styledPlaceholderWrapperRef, uploadProgress: uploadProgress, isLoading: isLoading, containerShape: containerShape, multiple: multiple, smallPlaceholderUI: smallPlaceholderUI, mediaType: 'image', handleUpload: handleUpload, onChange: onChange, value: value, id: id }, smallPlaceholderUI ? (react_1.default.createElement(react_1.Fragment, null,
+        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,

package/dist/components/PDFInput/index.js

@@ -59,12 +59,11 @@ var getBlockLabelProps_1 = require("../../utils/getBlockLabelProps");
 var Buttons_1 = require("../Buttons");
 var bannerContext_1 = require("../Banners/bannerContext");
 var PDFEmbed_1 = __importDefault(require("./comps/PDFEmbed"));
-var UploadWrapper_1 = require("../GlobalUIComps/UploadWrapper");
 var react_2 = require("react");
 var useFakeUploadImpression_1 = require("../../utilsOolib/useFakeUploadImpression");
 var react_3 = require("react");
-var ProgressBar_1 = require("../LoadersAndProgress/ProgressBar");
 var PDFActions_1 = require("./comps/PDFActions");
+var FileUploadWrapper_1 = require("../FileUploadWrapper");
 var StyledActionsButtonWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  right: 0;\n  top: 0;\n  z-index: 1000;\n  margin: 0.5rem;\n"], ["\n  position: absolute;\n  right: 0;\n  top: 0;\n  z-index: 1000;\n  margin: 0.5rem;\n"])));
 function PDFInput(_a) {
     var id = _a.id, parentOnChange = _a.onChange, value = _a.value, files = _a.files, readOnly = _a.readOnly, invert = _a.invert, isInRTE = _a.isInRTE, props = __rest(_a, ["id", "onChange", "value", "files", "readOnly", "invert", "isInRTE"]);
@@ -105,16 +104,13 @@ function PDFInput(_a) {
     return (react_1.default.createElement(react_3.Fragment, null,
         react_1.default.createElement(BlockLabel_1.BlockLabel, __assign({}, (0, getBlockLabelProps_1.getBlockLabelProps)(props), { invert: invert })),
         (readOnly && value) ? (value === null || value === void 0 ? void 0 : value.map(function (d, i) { return (react_1.default.createElement(PDFEmbed_1.default, { key: i, filePath: d.publicUrl, fileName: d.originalFilename, fileID: d.generation })); }))
-            : !value || (value === null || value === void 0 ? void 0 : value.length) === 0 && !isLoading ? (react_1.default.createElement(UploadWrapper_1.UploadWrapper, { invert: invert },
-                react_1.default.createElement(Buttons_1.ButtonSecondary, { onClick: function () { return inputRef.current.click(); }, icon: "UploadSimple", value: "Upload Pdf", invert: invert }))) : isLoading ? (react_1.default.createElement(UploadWrapper_1.UploadWrapper, null,
-                react_1.default.createElement(ProgressBar_1.ProgressBar, { progress: uploadProgress, text: uploadProgress && uploadProgress !== 100
-                        ? uploadProgress + "%"
-                        : "Almost Done..." }))) : (value === null || value === void 0 ? void 0 : value.map(function (d, i) { return (react_1.default.createElement("div", { style: { position: 'relative' }, key: i },
+            : !value || (value === null || value === void 0 ? void 0 : value.length) === 0 && !isLoading ? (react_1.default.createElement(FileUploadWrapper_1.FileUploadWrapper, { height: "18rem", isLoading: isLoading, mediaType: "pdf", handleUpload: handleUpload, uploadProgress: uploadProgress },
+                react_1.default.createElement(Buttons_1.ButtonSecondary, { onClick: function () { return inputRef.current.click(); }, icon: "UploadSimple", value: "Upload Pdf", invert: invert }))) : (value === null || value === void 0 ? void 0 : value.map(function (d, i) { return (react_1.default.createElement("div", { style: { position: 'relative' }, key: i },
                 react_1.default.createElement(PDFEmbed_1.default, { filePath: d.publicUrl, fileName: d.originalFilename, fileID: d.generation }),
                 react_1.default.createElement(StyledActionsButtonWrapper, null,
                     react_1.default.createElement(PDFActions_1.PDFActions, __assign({}, { id: id, isInRTE: isInRTE, inputRef: inputRef, parentOnChange: parentOnChange }))))); })),
         react_1.default.createElement("input", { type: "file" // When user clicks on upload new video from action menu inputRef.current.click() this does not work for upload button. this approch deals with that issue.
-            , accept: "pdf/*", ref: inputRef, style: { display: "none" }, id: "pdfField", onChange: function (v) { return handleUpload(v.target.files); } })));
+            , accept: "application/pdf", ref: inputRef, style: { display: "none" }, id: "pdfField", onChange: function (v) { return handleUpload(v.target.files); } })));
 }
 exports.default = PDFInput;
 var templateObject_1;

package/dist/components/TextInputs/index.js

@@ -102,8 +102,8 @@ var TextInput = function (props) {
     actionBtn = props.actionBtn, clearBtn = props.clearBtn, className = props.className, maxLength = props.maxLength, DEPRECATED_maxNumLimiter = props.maxNumLimiter, forceFocus = props.forceFocus, //sometimes, when some other elem is clicked, we wanna trigger focus on the textinput. eg. when on mobile, the search icon is clicked on the listingpage
     _d = props.validateOnlyOnBlur, //sometimes, when some other elem is clicked, we wanna trigger focus on the textinput. eg. when on mobile, the search icon is clicked on the listingpage
     validateOnlyOnBlur = _d === void 0 ? false : _d, //for example, in the login form we want validation to only run, once the text input is blurred. else it can be irritating
-    _validationStatus = props.validationStatus;
-    var _e = (0, react_1.useState)(_validationStatus), validationStatus = _e[0], setValidationStatus = _e[1];
+    _validationStatus = props.validationStatus, _e = props.displayValidationMsg, displayValidationMsg = _e === void 0 ? true : _e;
+    var _f = (0, react_1.useState)(_validationStatus), validationStatus = _f[0], setValidationStatus = _f[1];
     (0, react_1.useEffect)(function () {
         setValidationStatus(_validationStatus);
     }, [_validationStatus]);
@@ -173,7 +173,7 @@ var TextInput = function (props) {
                         react_1.default.createElement(LoadersAndProgress_1.LoaderCircle, { S: true, invert: invert }))),
                     clearBtn && (react_1.default.createElement(Buttons_1.ButtonGhost, { M: true, value: clearBtn.text, invert: clearBtn.invert, onClick: function () { return onChange(props.id, ""); }, disabled: !clearBtnEnabled, style: { marginRight: actionBtn ? "-1rem" : "-2rem" } })),
                     actionBtn && (react_1.default.createElement(Buttons_1.ButtonPrimary, { M: true, value: actionBtn.text, invert: actionBtn.invert, onClick: actionBtnEnabaled && actionBtn.onClick, disabled: !actionBtnEnabaled, style: { marginRight: "-2rem" } }))),
-                (validationStatus === null || validationStatus === void 0 ? void 0 : validationStatus.msg) && (react_1.default.createElement(index_styled_1.MsgContainer, { invert: invert, status: validationStatus === null || validationStatus === void 0 ? void 0 : validationStatus.type },
+                (displayValidationMsg && (validationStatus === null || validationStatus === void 0 ? void 0 : validationStatus.msg)) && (react_1.default.createElement(index_styled_1.MsgContainer, { invert: invert, status: validationStatus === null || validationStatus === void 0 ? void 0 : validationStatus.type },
                     react_1.default.createElement(Typo_1.SANS_3, null,
                         validationStatus.msg,
                         validationStatus.link && (react_1.default.createElement(OKELink_1.OKELink, { style: { marginLeft: "1rem" }, to: validationStatus.link.to }, validationStatus.link.text))))))))));

package/dist/components/VideoInput/comps/EmbedLinkModal.js

@@ -34,15 +34,23 @@ var EmbedLinkModal = function (_a) {
     var _b;
     var id = _a.id, setShowEmbedLinkModal = _a.setShowEmbedLinkModal, value = _a.value, createVideoPreview = _a.createVideoPreview, canPlay = _a.canPlay, onChange = _a.onChange, invert = _a.invert;
     var _c = (0, react_1.useState)(value), localValue = _c[0], setLocalValue = _c[1];
+    var _d = (0, react_1.useState)(false), isValidURl = _d[0], setIsValidUrl = _d[1];
     return (react_1.default.createElement(Modal_1.Modal, { title: "Add URL Embed", subTitle: "Paste the link of the video you want to share. ", 
         // invert={invert}
         desktopWidth: "50vw", fitToContentHeight: true, onClose: function () {
             setShowEmbedLinkModal(false);
         } },
         react_1.default.createElement("div", { style: { padding: '2rem' } },
-            react_1.default.createElement(TextInputs_1.TextInput, { icon: "LinkSimple", onChange: function (k, v) { return setLocalValue(v ? [{ publicUrl: v }] : undefined); }, value: localValue && ((_b = localValue[0]) === null || _b === void 0 ? void 0 : _b.publicUrl), placeholder: "Paste a url here", clearBtn: { text: 'clear' } }),
-            localValue && react_1.default.createElement(Paddings_1.PaddingBottom20, null),
-            createVideoPreview({ value: localValue }),
+            react_1.default.createElement(TextInputs_1.URLInput, { icon: "LinkSimple", onChange: function (k, v) { return setLocalValue(v ? [{ publicUrl: v }] : undefined); }, value: localValue && ((_b = localValue[0]) === null || _b === void 0 ? void 0 : _b.publicUrl), placeholder: "Paste a url here", clearBtn: { text: 'clear' }, displayValidationMsg: false, passValidationErrorToFormValidation: function (status) {
+                    if (status === "error") {
+                        setIsValidUrl(false);
+                    }
+                    else {
+                        setIsValidUrl(true);
+                    }
+                } }),
+            (localValue && isValidURl) && react_1.default.createElement(Paddings_1.PaddingBottom20, null),
+            isValidURl && createVideoPreview({ value: localValue }),
             react_1.default.createElement(styled_1.StyledModalActionButtons, null,
                 react_1.default.createElement(Buttons_1.ButtonPrimary, { value: "Embed", disabled: !canPlay(localValue) || !localValue, 
                     // invert={invert}

package/dist/components/VideoInput/index.js

@@ -42,7 +42,6 @@ var styled_components_1 = require("styled-components");
 var react_player_1 = __importDefault(require("react-player"));
 var BlockLabel_1 = require("../BlockLabel");
 var styled_1 = require("./styled");
-var LoadersAndProgress_1 = require("../LoadersAndProgress");
 var Buttons_1 = require("../Buttons");
 var Typo_1 = require("../Typo");
 var EmbedLinkModal_1 = require("./comps/EmbedLinkModal");
@@ -50,7 +49,7 @@ var themes_1 = require("../../themes");
 var useFakeUploadImpression_1 = require("../../utilsOolib/useFakeUploadImpression");
 var bannerContext_1 = require("../Banners/bannerContext");
 var VideoActionMenu_1 = require("./comps/VideoActionMenu");
-var UploadWrapper_1 = require("../GlobalUIComps/UploadWrapper");
+var FileUploadWrapper_1 = require("../FileUploadWrapper");
 function VideoInput(_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;
@@ -88,6 +87,7 @@ function VideoInput(_a) {
             onError: function (err) {
                 var _a;
                 SET_ALERT_BANNER(((_a = err.response) === null || _a === void 0 ? void 0 : _a.data.errors[0].msg) || err.message, "red", 3500);
+                onChange(undefined);
             },
         });
     };
@@ -122,24 +122,23 @@ function VideoInput(_a) {
     };
     return (react_1.default.createElement(react_1.Fragment, null,
         react_1.default.createElement(BlockLabel_1.BlockLabel, { label: label, sublabel: sublabel, isRequired: isRequired, readOnly: readOnly, invert: invert }),
-        readOnly ? (createVideoPreview({ value: value })) : (react_1.default.createElement(react_1.default.Fragment, null,
-            isLoading ? (react_1.default.createElement(UploadWrapper_1.UploadWrapper, { invert: invert },
-                react_1.default.createElement(LoadersAndProgress_1.ProgressBar, { progress: uploadProgress, text: uploadProgress && uploadProgress !== 100
-                        ? uploadProgress + "%"
-                        : "Almost Done..." }))) : (value === null || value === void 0 ? void 0 : value.length) > 0 ? (createVideoPreview({ value: value, actionMenuButton: true })) : (react_1.default.createElement(UploadWrapper_1.UploadWrapper, { invert: invert },
-                react_1.default.createElement(Buttons_1.ButtonSecondary, { value: "Add Video link", icon: "Plus", onClick: function () { return setShowEmbedLinkModal(true); }, invert: invert }),
-                enableVideoUpload && (react_1.default.createElement(react_1.default.Fragment, null,
-                    react_1.default.createElement(Typo_1.SANS_2, { semibold: true, color: invert ? themes_1.colors.white_opacity60 : themes_1.colors.greyColor80 }, "OR"),
-                    react_1.default.createElement(Buttons_1.ButtonSecondary, { onClick: function () { return inputRef.current.click(); }, value: "Upload A Video", icon: "UploadSimple", invert: invert, id: "videoField" }))))),
-            showEmbedLinkModal && (react_1.default.createElement(EmbedLinkModal_1.EmbedLinkModal, __assign({}, {
-                setShowEmbedLinkModal: setShowEmbedLinkModal,
-                value: value,
-                createVideoPreview: createVideoPreview,
-                canPlay: canPlay,
-                onChange: onChange,
-                id: id,
-                invert: invert
-            }))))),
+        readOnly ? (createVideoPreview({ value: value })) :
+            (value === null || value === void 0 ? void 0 : value.length) > 0 ? (createVideoPreview({ value: value, actionMenuButton: true })) :
+                react_1.default.createElement(FileUploadWrapper_1.FileUploadWrapper, { height: '18rem', isLoading: isLoading, uploadProgress: uploadProgress, enableClickUpload: false, mediaType: 'video', handleUpload: handleUpload },
+                    react_1.default.createElement(styled_1.StyledInnerWrapper, null,
+                        react_1.default.createElement(Buttons_1.ButtonSecondary, { value: "Add Video link", icon: "Plus", onClick: function () { return setShowEmbedLinkModal(true); }, invert: invert }),
+                        enableVideoUpload && (react_1.default.createElement(react_1.default.Fragment, null,
+                            react_1.default.createElement(Typo_1.SANS_2, { semibold: true, color: invert ? themes_1.colors.white_opacity60 : themes_1.colors.greyColor80 }, "OR"),
+                            react_1.default.createElement(Buttons_1.ButtonSecondary, { onClick: function () { return inputRef.current.click(); }, value: "Upload A Video", icon: "UploadSimple", invert: invert, id: "videoField" }))))),
+        showEmbedLinkModal && (react_1.default.createElement(EmbedLinkModal_1.EmbedLinkModal, __assign({}, {
+            setShowEmbedLinkModal: setShowEmbedLinkModal,
+            value: value,
+            createVideoPreview: createVideoPreview,
+            canPlay: canPlay,
+            onChange: onChange,
+            id: id,
+            invert: invert
+        }))),
         react_1.default.createElement("input", { type: "file" // When user clicks on upload new video from action menu inputRef.current.click() this does not work for upload button. this approch deals with that issue.
             , accept: "video/*", ref: inputRef, style: { display: "none" }, id: "videoField", onChange: function (v) { return handleUpload(v.target.files); } })));
 }

package/dist/components/VideoInput/styled.js

@@ -19,7 +19,7 @@ exports.StyledUploadEmbedBlock = styled_components_1.default.div(templateObject_
     var smallPlaceholderUI = _a.smallPlaceholderUI;
     return !smallPlaceholderUI && '1.2rem';
 });
-exports.StyledInnerWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: column;\n  gap: 1rem;\n  border: 0.2rem dashed ", ";\n  ", "{\n    flex-direction: row;\n  }\n"], ["\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: column;\n  gap: 1rem;\n  border: 0.2rem dashed ", ";\n  ", "{\n    flex-direction: row;\n  }\n"])), themes_1.colors.greyColor40, (0, mixins_1.mediaQuery)('sm'));
+exports.StyledInnerWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n  gap: 1rem;\n  ", "{\n    flex-direction: row;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n  gap: 1rem;\n  ", "{\n    flex-direction: row;\n  }\n"])), (0, mixins_1.mediaQuery)('sm'));
 exports.StyledModalActionButtons = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  padding-top: 2rem;\n  justify-content: flex-start;\n  gap: 2rem;\n"], ["\n  display: flex;\n  padding-top: 2rem;\n  justify-content: flex-start;\n  gap: 2rem;\n"])));
 exports.StyledVideoEmbedPreviewSection = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
 exports.StyledActionButtonWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  right: 0;\n  z-index: 1000;\n  margin: 0.5rem;\n"], ["\n  position: absolute;\n  top: 0;\n  right: 0;\n  z-index: 1000;\n  margin: 0.5rem;\n"])));

package/package.json

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

package/dist/components/GlobalUIComps/UploadWrapper/index.d.ts

@@ -1,5 +0,0 @@
-export function UploadWrapper({ children, ...props }: {
-    [x: string]: any;
-    children: any;
-}): React.JSX.Element;
-import React from "react";

package/dist/components/GlobalUIComps/UploadWrapper/index.js

@@ -1,36 +0,0 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.UploadWrapper = void 0;
-var react_1 = __importDefault(require("react"));
-var styled_1 = require("./styled");
-var UploadWrapper = function (_a) {
-    var children = _a.children, props = __rest(_a, ["children"]);
-    return (react_1.default.createElement(styled_1.StyledUploadEmbedBlock, __assign({}, __assign({}, props)),
-        react_1.default.createElement(styled_1.StyledInnerWrapper, __assign({}, __assign({}, props)), children)));
-};
-exports.UploadWrapper = UploadWrapper;

package/dist/components/GlobalUIComps/UploadWrapper/styled.d.ts

@@ -1,2 +0,0 @@
-export const StyledUploadEmbedBlock: import("styled-components").StyledComponent<"div", any, {}, never>;
-export const StyledInnerWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/components/GlobalUIComps/UploadWrapper/styled.js

@@ -1,24 +0,0 @@
-"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.StyledInnerWrapper = exports.StyledUploadEmbedBlock = void 0;
-var styled_components_1 = __importDefault(require("styled-components"));
-var themes_1 = require("../../../themes");
-var utilsOolib_1 = require("../../../utilsOolib");
-var mixins_1 = require("../../../themes/mixins");
-var greyColor100 = themes_1.colors.greyColor100;
-exports.StyledUploadEmbedBlock = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 18rem;\n  background-color: ", ";\n  padding: ", ";\n  ", "\n"], ["\n  height: 18rem;\n  background-color: ", ";\n  padding: ", ";\n  ", "\n"])), function (_a) {
-    var invert = _a.invert;
-    return invert ? greyColor100 : (0, utilsOolib_1.getPrimaryColor10)(themes_1.colors);
-}, function (_a) {
-    var smallPlaceholderUI = _a.smallPlaceholderUI;
-    return !smallPlaceholderUI && '1.2rem';
-}, (0, mixins_1.transition)('background-color'));
-exports.StyledInnerWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: column;\n  gap: 1rem;\n  border: 0.2rem dashed ", ";\n  ", "{\n    flex-direction: row;\n  }\n"], ["\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: column;\n  gap: 1rem;\n  border: 0.2rem dashed ", ";\n  ", "{\n    flex-direction: row;\n  }\n"])), themes_1.colors.greyColor40, (0, mixins_1.mediaQuery)('sm'));
-var templateObject_1, templateObject_2;

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

@@ -1,25 +0,0 @@
-export function UploadShell({ isLoading, children, disabled, enableFilesDrop, setDragOverActive: parentSetDragOverActive, handleUpload, onChange, value, id, multiple, mediaType, height, width }: {
-    isLoading: any;
-    children: any;
-    disabled: any;
-    enableFilesDrop?: boolean;
-    setDragOverActive: any;
-    handleUpload: any;
-    onChange: any;
-    value: any;
-    id: any;
-    multiple: any;
-    mediaType: any;
-    height: any;
-    width: any;
-}): React.JSX.Element;
-export default ImageUploadShell;
-import React from "react";
-declare function ImageUploadShell({ style, isLoading, children, disabled, enableFilesDrop, setDragOverActive }: {
-    style: any;
-    isLoading: any;
-    children: any;
-    disabled: any;
-    enableFilesDrop: any;
-    setDragOverActive: any;
-}): React.JSX.Element;

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

@@ -1,3 +0,0 @@
-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>;

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

@@ -1,39 +0,0 @@
-"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.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");
-var mixins_1 = require("../../../../themes/mixins");
-var greyColor100 = themes_1.colors.greyColor100;
-exports.StyledPlaceholderWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  padding: ", ";\n  width: 100%;\n  height: 100%;\n  ", "\n"], ["\n  background-color: ", ";\n  padding: ", ";\n  width: 100%;\n  height: 100%;\n  ", "\n"])), function (_a) {
-    var theme = _a.theme, dragOverActive = _a.dragOverActive;
-    return dragOverActive
-        ? (0, utilsOolib_1.getPrimaryColor40)(theme === null || theme === void 0 ? void 0 : theme.colors)
-        : (0, utilsOolib_1.getPrimaryColor10)(theme === null || theme === void 0 ? void 0 : theme.colors);
-}, function (_a) {
-    var smallPlaceholderUI = _a.smallPlaceholderUI;
-    return !smallPlaceholderUI && "1.2rem";
-}, (0, mixins_1.transition)("background-color"));
-exports.StyledPlaceholder = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-flow: column nowrap;\n  height: 100%;\n  width: 100%;\n  /* gap: ", "; */\n  gap: 0.5rem;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  border-radius: ", ";\n  border: 0.12rem dashed ", ";\n  padding: ", ";\n  cursor: pointer;\n"], ["\n  display: flex;\n  flex-flow: column nowrap;\n  height: 100%;\n  width: 100%;\n  /* gap: ", "; */\n  gap: 0.5rem;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  border-radius: ", ";\n  border: 0.12rem dashed ", ";\n  padding: ", ";\n  cursor: pointer;\n"])), function (_a) {
-    var smallPlaceholderUI = _a.smallPlaceholderUI;
-    return !smallPlaceholderUI && "0.5rem";
-}, function (_a) {
-    var containerShape = _a.containerShape;
-    return containerShape === "circle" ? "50%" : "unset";
-}, greyColor100, function (_a) {
-    var smallPlaceholderUI = _a.smallPlaceholderUI;
-    return !smallPlaceholderUI && "2rem";
-});
-exports.SstyledPlaceholder = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  flex-flow: column nowrap;\n  height: 100%;\n  width: 100%;\n  gap: 0.3rem;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  border-radius: ", ";\n  border: 0.12rem dashed ", ";\n  padding: 2rem;\n  cursor: pointer;\n"], ["\n  display: flex;\n  flex-flow: column nowrap;\n  height: 100%;\n  width: 100%;\n  gap: 0.3rem;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  border-radius: ", ";\n  border: 0.12rem dashed ", ";\n  padding: 2rem;\n  cursor: pointer;\n"])), function (_a) {
-    var containerShape = _a.containerShape;
-    return containerShape === "circle" ? "50%" : "unset";
-}, greyColor100);
-var templateObject_1, templateObject_2, templateObject_3;

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

@@ -1,14 +0,0 @@
-export const PlaceHolderWrapper: React.ForwardRefExoticComponent<{
-    smallPlaceholderUI: any;
-    isLoading: any;
-    multiple: any;
-    containerShape: any;
-    uploadProgress: any;
-    mediaType: any;
-    handleUpload: any;
-    onChange: any;
-    value: any;
-    id: any;
-    children: any;
-} & React.RefAttributes<any>>;
-import React from "react";