oolib 2.63.0 → 2.63.2

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

@@ -0,0 +1,29 @@
+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 }: {
+    children: any;
+    value: any;
+    multiple: any;
+    allowedFormats: any;
+    formatConvertConfig: any;
+    folderName: any;
+    bucketEnv: any;
+    onChange: any;
+    id: any;
+    aspectRatio: any;
+    readOnly: any;
+    enableCaptions: any;
+    defaultImageSpread: any;
+    invert: any;
+    containerShape: any;
+    stretchToFullHeight: any;
+    dropzoneLabel: any;
+    dropzoneSublabel: any;
+    disableImageBorder: any;
+    omitEditorTools: any;
+    files: any;
+    showOptionalLabelInDropzone: any;
+    isRequired: any;
+    isInRTE: any;
+}): React.JSX.Element;
+export function useImageInputContext(): any;
+import React from "react";

package/dist/components/ImageInput/ImageInputContext.js

@@ -0,0 +1,199 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useImageInputContext = exports.ImageInputContextProvider = exports.ImageInputContext = void 0;
+var react_1 = __importStar(require("react"));
+var styled_components_1 = require("styled-components");
+var infoAlertBannerFnPlaceholder_1 = require("../../utilsOolib/infoAlertBannerFnPlaceholder");
+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 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); };
+    var _c = (theme === null || theme === void 0 ? void 0 : theme.useUploadMedia({
+        mediaConfigs: {
+            allowedFormats: allowedFormats,
+            formatConvertConfig: formatConvertConfig,
+            folderName: folderName,
+            bucketEnv: bucketEnv,
+            mediaType: "image"
+        },
+        handleUploadProgess: handleUploadProgess,
+    })) || {}, upload = _c.mutate, isLoading = _c.isLoading;
+    var SET_ALERT_BANNER = ((theme === null || theme === void 0 ? void 0 : theme.useBannerContext()) || (0, infoAlertBannerFnPlaceholder_1.infoAlertBannerFnPlaceholder)()).SET_ALERT_BANNER;
+    var _d = (0, react_1.useState)(0), noOfImagesUploading = _d[0], setNoOfImagesUploading = _d[1];
+    var _e = (0, react_1.useState)(undefined), publicUrlBeingReplaced = _e[0], setPublicUrlBeingReplaced = _e[1];
+    var handleUpload = function (_a) {
+        var files = _a.files, callback = _a.callback, publicUrlToReplace = _a.publicUrlToReplace;
+        //publicUrlToReplace passed only if replace action
+        if (!files)
+            return;
+        publicUrlToReplace
+            ? setPublicUrlBeingReplaced(publicUrlToReplace)
+            : setNoOfImagesUploading(files.length);
+        upload(files, {
+            onSuccess: function (data) {
+                //extract out all the successful uploads' fileData
+                var successfulUploads = data.reduce(function (result, d) {
+                    return d.status === "success" ? __spreadArray(__spreadArray([], result, true), [d.fileData], false) : result;
+                }, []);
+                //error banner for all failed uploads
+                data.forEach(function (d) {
+                    return d.status === "error" && SET_ALERT_BANNER(d.message, "red", 3500);
+                });
+                callback({ successfulUploads: successfulUploads });
+                publicUrlToReplace
+                    ? setPublicUrlBeingReplaced(undefined)
+                    : setNoOfImagesUploading(0);
+            },
+            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", 4000);
+                publicUrlToReplace
+                    ? setPublicUrlBeingReplaced(undefined)
+                    : setNoOfImagesUploading(0);
+            },
+        });
+    };
+    /**
+     * this is specifically required in the RTE scenario,
+     * wherein, the minute files are uploaded from the RTE,
+     * we want to generate the ImageInput, so that things like
+     * loading state, errors etc, are handled internally.
+     *
+     * Very important to remember though, that in other cases,
+     * files prop SHOULD NOT BE PASSED, else everytime the comp
+     * renders for the first time, it will upload said files to
+     * cloud storage.
+     */
+    (0, react_1.useEffect)(function () {
+        if (files) {
+            handleUpload({
+                files: files,
+                callback: function (_a) {
+                    var successfulUploads = _a.successfulUploads;
+                    onChange(id, multiple
+                        ? __spreadArray(__spreadArray([], successfulUploads, true), (value || []), true) : successfulUploads);
+                }
+            });
+        }
+    }, []);
+    /**
+     * example alt code to display image directly from uploaded files
+     * this will be used for preview purposes only in storybook
+     *
+     *
+      document.getElementById('picField').onchange = function (evt) {
+        var tgt = evt.target || window.event.srcElement,
+            files = tgt.files;
+        
+        // FileReader support
+        if (FileReader && files && files.length) {
+            var fr = new FileReader();
+            fr.onload = function () {
+                document.getElementById(outImage).src = fr.result;
+            }
+            fr.readAsDataURL(files[0]);
+        }
+        
+        // Not supported
+        else {
+            // fallback -- perhaps submit the input to an iframe and temporarily store
+            // them on the server until the user's session ends.
+        }
+      }
+     */
+    var handleSingleImageDataChange = function (_a) {
+        var publicUrl = _a.publicUrl, imageData = _a.imageData;
+        //publicUrl is used as an 'id' identifier
+        var newValue = __spreadArray([], value, true);
+        var imgIdxToReplace = newValue.findIndex(function (d) { return d.publicUrl === publicUrl; });
+        newValue[imgIdxToReplace] = imageData;
+        onChange(id, newValue);
+    };
+    var handleDeleteSingleImage = function (_a) {
+        var publicUrl = _a.publicUrl;
+        var newValue = __spreadArray([], value, true);
+        newValue = newValue.filter(function (d) { return d.publicUrl !== publicUrl; });
+        onChange(id, newValue);
+    };
+    var handleReplaceSingleImage = function (_a) {
+        var publicUrl = _a.publicUrl, newImage = _a.newImage;
+        var newValue = __spreadArray([], value, true);
+        var idx = newValue.findIndex(function (d) { return d.publicUrl === publicUrl; });
+        newValue[idx] = newImage;
+        onChange(id, newValue);
+    };
+    var _f = (0, react_1.useState)(false), imageUnderEdit = _f[0], setImageUnderEdit = _f[1];
+    return (react_1.default.createElement(exports.ImageInputContext.Provider, { value: {
+            //props
+            id: id,
+            value: value,
+            onChange: onChange,
+            multiple: multiple,
+            allowedFormats: allowedFormats,
+            aspectRatio: aspectRatio,
+            readOnly: readOnly,
+            enableCaptions: enableCaptions,
+            defaultImageSpread: defaultImageSpread,
+            invert: invert,
+            containerShape: containerShape,
+            stretchToFullHeight: stretchToFullHeight,
+            dropzoneLabel: dropzoneLabel,
+            dropzoneSublabel: dropzoneSublabel,
+            disableImageBorder: disableImageBorder,
+            omitEditorTools: omitEditorTools,
+            //handlers, states initiated in this Context
+            upload: upload,
+            handleUpload: handleUpload,
+            noOfImagesUploading: noOfImagesUploading,
+            publicUrlBeingReplaced: publicUrlBeingReplaced,
+            uploadProgress: uploadProgress,
+            isLoading: isLoading,
+            handleSingleImageDataChange: handleSingleImageDataChange,
+            handleDeleteSingleImage: handleDeleteSingleImage,
+            handleReplaceSingleImage: handleReplaceSingleImage,
+            imageUnderEdit: imageUnderEdit,
+            setImageUnderEdit: setImageUnderEdit,
+            showOptionalLabelInDropzone: showOptionalLabelInDropzone,
+            isRequired: isRequired,
+            isInRTE: isInRTE
+        } }, children));
+};
+exports.ImageInputContextProvider = ImageInputContextProvider;
+var useImageInputContext = function () {
+    return (0, react_1.useContext)(exports.ImageInputContext);
+};
+exports.useImageInputContext = useImageInputContext;

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

@@ -0,0 +1,12 @@
+export default AspectRatioShell;
+declare function AspectRatioShell({ id, invert, aspectRatio, children, stretchToFullHeight, containerShape, disableImageBorder, onShellPrepared }: {
+    id: any;
+    invert: any;
+    aspectRatio: any;
+    children: any;
+    stretchToFullHeight: any;
+    containerShape: any;
+    disableImageBorder: any;
+    onShellPrepared: any;
+}): React.JSX.Element;
+import React from "react";

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

@@ -0,0 +1,61 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var styled_1 = require("./styled");
+var calcAspectRatio_1 = require("../ImageEditor/utils/calcAspectRatio");
+var useScreenWidth_1 = require("../../../../utils/customHooks/useScreenWidth");
+var AspectRatioShell = function (_a) {
+    var id = _a.id, invert = _a.invert, aspectRatio = _a.aspectRatio, children = _a.children, stretchToFullHeight = _a.stretchToFullHeight, containerShape = _a.containerShape, disableImageBorder = _a.disableImageBorder, onShellPrepared = _a.onShellPrepared;
+    var wrapperRef = (0, react_1.useRef)(null);
+    var _b = (0, react_1.useState)("auto"), wrapperHeight = _b[0], setWrapperHeight = _b[1];
+    var handleSetWrapperHeight = function () {
+        wrapperRef.current && //somehow on screen resize, somethings the wrapperRef.current doesnt exist. no idea why.
+            setWrapperHeight(wrapperRef.current.offsetWidth / (0, calcAspectRatio_1.calcAspectRatio)(aspectRatio));
+    };
+    //relevant only if stretchToFullHeight === true
+    var _c = (0, react_1.useState)("auto"), wrapperWidth = _c[0], setWrapperWidth = _c[1];
+    var handleSetWrapperWidth = function () {
+        wrapperRef.current &&
+            setWrapperWidth(wrapperRef.current.clientHeight * (0, calcAspectRatio_1.calcAspectRatio)(aspectRatio));
+    };
+    (0, react_1.useLayoutEffect)(function () {
+        if (stretchToFullHeight) {
+            handleSetWrapperWidth();
+        }
+        else {
+            handleSetWrapperHeight();
+        }
+    }, []);
+    (0, react_1.useEffect)(function () {
+        if (wrapperWidth !== 'auto' || wrapperHeight !== 'auto') {
+            //means the shell is ready with the proper dimensions
+            onShellPrepared && onShellPrepared(); //we use this fn. in imageEditor to trigger off the decision on toolbar style
+        }
+    }, [wrapperWidth, wrapperHeight]);
+    (0, useScreenWidth_1.useScreenWidth)(handleSetWrapperHeight);
+    return (react_1.default.createElement(styled_1.StyledAspectRatioWrapper, { id: 'StyledAspectRatioWrapper', ref: wrapperRef, width: stretchToFullHeight ? "".concat(wrapperWidth, "px") : "100%", height: stretchToFullHeight ? "100%" : "".concat(wrapperHeight, "px"), containerShape: containerShape, invert: invert, disableImageBorder: disableImageBorder }, children));
+};
+exports.default = AspectRatioShell;

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

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

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

@@ -0,0 +1,46 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledAspectRatioWrapper = void 0;
+var styled_components_1 = __importStar(require("styled-components"));
+var themes_1 = require("../../../../themes");
+exports.StyledAspectRatioWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n", "\nborder-radius: ", ";\noverflow: hidden;\nbackground-color: ", ";\n  ", ";\n"], ["\n", "\nborder-radius: ", ";\noverflow: hidden;\nbackground-color: ", ";\n  ", ";\n"])), function (_a) {
+    var width = _a.width, height = _a.height;
+    return "\n  width: ".concat(width, ";\n  height: ").concat(height, ";\n");
+}, function (_a) {
+    var containerShape = _a.containerShape;
+    return containerShape === 'circle' && '50%';
+}, function (_a) {
+    var invert = _a.invert;
+    return invert ? themes_1.colors.greyColor90 : themes_1.colors.greyColor5;
+}, function (_a) {
+    var disableImageBorder = _a.disableImageBorder, invert = _a.invert;
+    return !disableImageBorder && (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    border: 2px solid ", "\n  "], ["\n    border: 2px solid ", "\n  "])), invert ? themes_1.colors.greyColor90 : themes_1.colors.greyColor5);
+});
+var templateObject_1, templateObject_2;

package/dist/components/ImageInput/comps/GallerySlider/comps/GalleryThumbnails/index.d.ts

@@ -0,0 +1,5 @@
+export function GalleryThumbnails({ activeIdx, setActiveIdx, }: {
+    activeIdx: any;
+    setActiveIdx: any;
+}): React.JSX.Element;
+import React from "react";

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

@@ -0,0 +1,94 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+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 Plus = icons_1.icons.Plus;
+var GalleryThumbnails = function (_a) {
+    var activeIdx = _a.activeIdx, setActiveIdx = _a.setActiveIdx;
+    var _b = (0, ImageInputContext_1.useImageInputContext)(), value = _b.value, isLoading = _b.isLoading, noOfImagesUploading = _b.noOfImagesUploading, readOnly = _b.readOnly, invert = _b.invert, aspectRatio = _b.aspectRatio;
+    var _c = (0, react_1.useState)(0), placeholderThumbsToRender = _c[0], setPlaceholderThumbsToRender = _c[1];
+    var totThumbsSpaceRef = (0, react_1.useRef)(null);
+    var addMoreThumbnailRef = (0, react_1.useRef)(null);
+    var screenWidth = (0, useScreenWidth_1.useScreenWidth)();
+    (0, react_1.useEffect)(function () {
+        if (!readOnly) {
+            var thumbnailWidth = addMoreThumbnailRef.current.offsetWidth;
+            var totAvailableSpace = totThumbsSpaceRef.current.offsetWidth - thumbnailWidth - 10;
+            var gap = 10;
+            var noOfThumbsWillFit = Math.floor(totAvailableSpace / (thumbnailWidth + gap));
+            setPlaceholderThumbsToRender(noOfThumbsWillFit);
+        }
+    }, [screenWidth]);
+    /**
+     * create array of thumbnails to render.
+     * this is made up of 2 things:
+     * 1 : the value array which holds the images data
+     * PLUS 2 : the noOfImagesUploading that will render skeleton loaders for images currently loading
+     */
+    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("div", { style: {
+                        display: "grid",
+                        placeItems: "center",
+                        cursor: "pointer",
+                        height: "100%",
+                    } },
+                    react_1.default.createElement(Plus, { size: 24, weight: "bold", color: invert ? themes_1.colors.greyColor100 : themes_1.colors.white }))))),
+        react_1.default.createElement(styled_1.StyledSliderWrapper, null,
+            imageThumbnailsData.map(function (v, idx) {
+                return (react_1.default.createElement(styled_1.StyledImageThumbnail, { key: (v === null || v === void 0 ? void 0 : v.publicUrl) || idx, onClick: function () { return setActiveIdx(idx); }, isActive: activeIdx === idx, invert: invert }, v
+                    ? react_1.default.createElement(ImageDisplayInMask_1.ImageDisplayInMask, { maskAspectRatio: '1', id: 'thumb' + idx, invert: invert, disableImageBorder: true, defaultImageSpread: 'contain', value: [v], aspectRatio: aspectRatio })
+                    : react_1.default.createElement(SkeletonLoader_1.SkeletonLoader, { style: { width: '100%', height: '100%' } })));
+            }),
+            (!value || value.length === 0) &&
+                (0, makeArrayFromLength_1.makeArrayFromLength)(placeholderThumbsToRender).map(function (order) {
+                    return (react_1.default.createElement(styled_1.StyledPlaceholderThumbnail, { key: "blank thumbnail" + order, isBlank: true }));
+                }))));
+};
+exports.GalleryThumbnails = GalleryThumbnails;

package/dist/components/ImageInput/comps/GallerySlider/comps/GalleryThumbnails/styled.d.ts

@@ -0,0 +1,5 @@
+export const StyledSliderWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const thumbnailBaseCss: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
+export const StyledAddMoreThumbnail: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledImageThumbnail: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledPlaceholderThumbnail: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,68 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledPlaceholderThumbnail = exports.StyledImageThumbnail = exports.StyledAddMoreThumbnail = exports.thumbnailBaseCss = exports.StyledSliderWrapper = void 0;
+var styled_components_1 = __importStar(require("styled-components"));
+var themes_1 = require("../../../../../../themes");
+var mixins_1 = require("../../../../../../themes/mixins");
+var utilsOolib_1 = require("../../../../../../utilsOolib");
+var greyColor15 = themes_1.colors.greyColor15, greyColor80 = themes_1.colors.greyColor80, greyColor70 = themes_1.colors.greyColor70, greyColor40 = themes_1.colors.greyColor40, none = themes_1.colors.none;
+exports.StyledSliderWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  flex-shrink: 1;\n  display: flex;\n  gap: 1rem;\n  overflow-x: auto;\n"], ["\n  flex-shrink: 1;\n  display: flex;\n  gap: 1rem;\n  overflow-x: auto;\n"])));
+exports.thumbnailBaseCss = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  cursor: ", ";\n  width: 6rem;\n  height: 6rem;\n  flex-shrink: 0;\n\n  ", " {\n    width: 9rem;\n    height: 9rem;\n  }\n\n  ", ";\n"], ["\n  background-color: ", ";\n  cursor: ", ";\n  width: 6rem;\n  height: 6rem;\n  flex-shrink: 0;\n\n  ", " {\n    width: 9rem;\n    height: 9rem;\n  }\n\n  ", ";\n"])), function (_a) {
+    var invert = _a.invert, theme = _a.theme;
+    return invert ? (0, utilsOolib_1.getPrimaryColor40)(theme === null || theme === void 0 ? void 0 : theme.colors) : (0, utilsOolib_1.getPrimaryColor100)(theme === null || theme === void 0 ? void 0 : theme.colors);
+}, function (_a) {
+    var isLoading = _a.isLoading;
+    return (isLoading ? "initial" : "pointer");
+}, (0, mixins_1.mediaQuery)("sm"), (0, mixins_1.transition)("background-color"));
+exports.StyledAddMoreThumbnail = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", ";\n  flex-shrink: 0;\n  @media (hover: hover) {\n    &:hover {\n      background-color: ", ";\n    }\n  }\n\n  ", "\n"], ["\n  ", ";\n  flex-shrink: 0;\n  @media (hover: hover) {\n    &:hover {\n      background-color: ", ";\n    }\n  }\n\n  ", "\n"])), exports.thumbnailBaseCss, function (_a) {
+    var invert = _a.invert, theme = _a.theme;
+    return invert ? (0, utilsOolib_1.getPrimaryColor10)(theme === null || theme === void 0 ? void 0 : theme.colors) : (0, utilsOolib_1.getPrimaryColor40)(theme === null || theme === void 0 ? void 0 : theme.colors);
+}, function (_a) {
+    var disabled = _a.disabled;
+    return disabled && (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      background-color: ", ";\n      color: ", ";\n      pointer-events: none;\n    "], ["\n      background-color: ", ";\n      color: ", ";\n      pointer-events: none;\n    "])), function (_a) {
+        var invert = _a.invert;
+        return (invert ? greyColor70 : greyColor15);
+    }, greyColor40);
+});
+exports.StyledImageThumbnail = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  ", ";\n  position: relative;\n  overflow: hidden;\n  ", "\n"], ["\n  ", ";\n  position: relative;\n  overflow: hidden;\n  ", "\n"])), exports.thumbnailBaseCss, function (_a) {
+    var theme = _a.theme, isActive = _a.isActive, invert = _a.invert;
+    return (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    border: 2px solid ", "};\n  "], ["\n    border: 2px solid ", "};\n  "])), isActive
+        ? invert
+            ? (0, utilsOolib_1.getPrimaryColor40)(theme === null || theme === void 0 ? void 0 : theme.colors)
+            : (0, utilsOolib_1.getPrimaryColor100)(theme === null || theme === void 0 ? void 0 : theme.colors)
+        : invert
+            ? greyColor80
+            : greyColor15);
+});
+exports.StyledPlaceholderThumbnail = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  ", ";\n  background-color: ", ";\n  border: 2px solid ", ";\n"], ["\n  ", ";\n  background-color: ", ";\n  border: 2px solid ", ";\n"])), exports.thumbnailBaseCss, none, function (_a) {
+    var theme = _a.theme;
+    return (0, utilsOolib_1.getPrimaryColor10)(theme === null || theme === void 0 ? void 0 : theme.colors);
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/dist/components/ImageInput/comps/GallerySlider/comps/SliderShell/index.d.ts

@@ -0,0 +1,7 @@
+export function SliderShell({ value, activeIdx, setActiveIdx, render, }: {
+    value: any;
+    activeIdx: any;
+    setActiveIdx: any;
+    render: any;
+}): React.JSX.Element;
+import React from "react";

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

@@ -0,0 +1,58 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SliderShell = void 0;
+var react_1 = __importStar(require("react"));
+var styled_1 = require("./styled");
+var ImageInputContext_1 = require("../../../../ImageInputContext");
+var calcAspectRatio_1 = require("../../../ImageEditor/utils/calcAspectRatio");
+var themes_1 = require("../../../../../../themes");
+var icons_1 = require("../../../../../../icons");
+var Typo_1 = require("../../../../../Typo");
+var greyColor80 = themes_1.colors.greyColor80;
+var CaretLeft = icons_1.icons.CaretLeft, CaretRight = icons_1.icons.CaretRight;
+var SliderShell = function (_a) {
+    var value = _a.value, activeIdx = _a.activeIdx, setActiveIdx = _a.setActiveIdx, render = _a.render;
+    var _b = (0, ImageInputContext_1.useImageInputContext)(), aspectRatio = _b.aspectRatio, isLoading = _b.isLoading, imageUnderEdit = _b.imageUnderEdit;
+    var wrapperRef = (0, react_1.useRef)(null);
+    var _c = (0, react_1.useState)(undefined), imageMinusCaptionHeight = _c[0], setImageMinusCaptionHeight = _c[1];
+    (0, react_1.useEffect)(function () {
+        setImageMinusCaptionHeight(wrapperRef.current.clientWidth / (0, calcAspectRatio_1.calcAspectRatio)(aspectRatio));
+    }, []);
+    return (react_1.default.createElement(styled_1.StyledFlexWrapper, { ref: wrapperRef },
+        value.map(function (v, idx) { return (react_1.default.createElement(styled_1.StyledFlexItem, { key: (v === null || v === void 0 ? void 0 : v.publicUrl) || idx, marginLeft: idx === 0 && activeIdx * -100 + "%" }, render(v, idx) /* explicitly called, cuz we want an error to throw if render prop aint passed thru */)); }),
+        !isLoading && value.length > 1 && !imageUnderEdit && react_1.default.createElement(react_1.Fragment, null,
+            react_1.default.createElement(styled_1.StyledCaretLeft, { onClick: function () {
+                    return setActiveIdx(activeIdx > 0 ? activeIdx - 1 : value.length - 1);
+                }, imageMinusCaptionHeight: imageMinusCaptionHeight },
+                react_1.default.createElement(CaretLeft, { weight: "duotone", size: 45, color: greyColor80 })),
+            react_1.default.createElement(styled_1.StyledCaretRight, { imageMinusCaptionHeight: imageMinusCaptionHeight, onClick: function () {
+                    return setActiveIdx(activeIdx < value.length - 1 ? activeIdx + 1 : 0);
+                } },
+                react_1.default.createElement(CaretRight, { weight: "duotone", size: 45, color: greyColor80 })),
+            react_1.default.createElement(styled_1.StyledXOfY, { imageMinusCaptionHeight: imageMinusCaptionHeight },
+                react_1.default.createElement(Typo_1.SANS_3, null, activeIdx + 1 + "/" + value.length)))));
+};
+exports.SliderShell = SliderShell;

package/dist/components/ImageInput/comps/GallerySlider/comps/SliderShell/styled.d.ts

@@ -0,0 +1,5 @@
+export const StyledFlexWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledFlexItem: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledCaretLeft: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledCaretRight: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledXOfY: import("styled-components").StyledComponent<"div", any, {}, never>;