oolib 2.110.0 → 2.111.0

package/dist/components/Dropdowns/comps/VirtualizedWrapper/index.d.ts

@@ -4,4 +4,4 @@ export function VirtualizedWrapper({ children, options, lightboxHeight, searchSt
     lightboxHeight: any;
     searchString: any;
 }): React.JSX.Element;
-import React from "react";
+import React from 'react';

package/dist/components/EmptyStates/index.js

@@ -1,15 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -27,6 +16,6 @@ var EmptyStates = function (_a) {
         commaSeparatedTags: commaSeparatedTags,
         title: titleProp
     }), image = _c.image, title = _c.title, subtitle = _c.subtitle, link = _c.link, button = _c.button, align = _c.align;
-    return (react_1.default.createElement(EmptyStatesRenderer_1.EmptyStatesRenderer, __assign({}, { image: image, align: align, title: title, subtitle: subtitle, link: link, button: button, onClick: onClick, preset: preset })));
+    return (react_1.default.createElement(EmptyStatesRenderer_1.EmptyStatesRenderer, { image: image, align: align, title: title, subtitle: subtitle, link: link, button: button, onClick: onClick, preset: preset }));
 };
 exports.EmptyStates = EmptyStates;

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

@@ -14,4 +14,4 @@ export function FileUploadShell({ isLoading, children, disabled, enableFilesDrop
     width: any;
     enableClickUpload?: boolean;
 }): React.JSX.Element;
-import React from "react";
+import React from 'react';

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

@@ -16,4 +16,4 @@ export function FileUploadWrapper({ smallPlaceholderUI, isLoading, multiple, con
     enableFilesDrop: any;
     styledPlaceholderWrapperRef: any;
 }): React.JSX.Element;
-import React from "react";
+import React from 'react';

package/dist/components/FileUploadWrapper/index.js

@@ -1,15 +1,4 @@
 "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);
@@ -46,6 +35,6 @@ var FileUploadWrapper = function (_a) {
     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(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)))));
+        react_1.default.createElement(styled_1.StyledPlaceholder, { containerShape: containerShape, smallPlaceholderUI: smallPlaceholderUI, enableClickUpload: enableClickUpload }, children)))));
 };
 exports.FileUploadWrapper = FileUploadWrapper;

package/dist/components/IFrameInput/comps/Embed.d.ts

@@ -5,4 +5,4 @@ export function Embed({ isBlock, readOnly, value, isValidURL, onChange }: {
     isValidURL: any;
     onChange: any;
 }): React.JSX.Element;
-import React from "react";
+import React from 'react';

package/dist/components/IFrameInput/index.js

@@ -53,11 +53,11 @@ function IFrameInput(_a) {
             case react_player_1.default.canPlay(value): // We don't want to show video if it is valid video url
                 return (react_1.default.createElement(Typo_1.SANS_0, { color: themes_1.colors.red }, "Video Links are not allowed"));
             default:
-                return react_1.default.createElement(Embed_1.Embed, __assign({}, __assign(__assign({}, readOnly), { value: value, isValidURL: isValidURL, onChange: onChange })));
+                return react_1.default.createElement(Embed_1.Embed, __assign({}, readOnly, { value: value, isValidURL: isValidURL, onChange: onChange }));
         }
     };
     return (react_1.default.createElement(react_1.Fragment, null, readOnly ?
-        react_1.default.createElement(Embed_1.Embed, __assign({}, __assign(__assign({}, readOnly), { value: value, isValidURL: isValidURL, onChange: onChange }), { isBlock: true }))
+        react_1.default.createElement(Embed_1.Embed, __assign({}, readOnly, { value: value, isValidURL: isValidURL, onChange: onChange, isBlock: true }))
         :
             react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(TextInputs_1.URLInput, { placeholder: placeholder || 'Enter a valid embedable url', onChange: function (k, v) { return onChange(k, v); }, value: value, isRequired: isRequired, label: label, S: true, invert: invert, readOnly: readOnly, sublabel: sublabel, passValidationErrorToFormValidation: function (type) { return type === "error" ? setIsValidURL(false) : setIsValidURL(true); }, icon: "LinkSimple", clearBtn: !isInRTE && { text: "Clear", onClick: function () { return onChange(undefined); }, invert: invert } }),

package/dist/components/IFrameInput/utils/DisplayCoachmark.d.ts

@@ -0,0 +1,7 @@
+declare const _default: React.ForwardRefExoticComponent<{
+    user: any;
+    url: any;
+    setUrl: any;
+} & React.RefAttributes<any>>;
+export default _default;
+import React from 'react';

package/dist/components/IFrameInput/utils/DisplayCoachmark.js

@@ -0,0 +1,83 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var config_1 = __importDefault(require("../../Coachmark/config"));
+var index_1 = require("../../Coachmark/index");
+var mixins_1 = require("../../../themes/mixins");
+var DisplayCoachmark = function (_a, ref) {
+    var user = _a.user, url = _a.url, setUrl = _a.setUrl;
+    var _b = (0, index_1.useCoachmark)({ coachmarks: config_1.default.H5PEmbed, compIdentifier: "H5PEmbed" }), activeMark = _b.activeMark, rank = _b.rank, removeCoachmark = _b.removeCoachmark, showNextMark = _b.showNextMark, useReliableRef = _b.useReliableRef;
+    var optimizeForResize = function (func, delay) {
+        if (delay === void 0) { delay = 500; }
+        var timerId;
+        return function () {
+            clearTimeout(timerId);
+            timerId = setTimeout(func, delay);
+        };
+    };
+    ref = useReliableRef([0, 1]);
+    var showNextMarkOnTilt = function () {
+        var _a = document.documentElement, clientWidth = _a.clientWidth, clientHeight = _a.clientHeight;
+        if (activeMark === undefined) { // we are done coaching, this func ic called bec of the too many resize events registered
+            window.removeEventListener('resize', showNextOptimized);
+            return;
+        }
+        if (clientWidth > clientHeight) { // user tilited then pressed done
+            showNextMark();
+        }
+        else { // temporarily remove the mark & show next mark on tilt (recursion)
+            showNextMark(false);
+            window.addEventListener('resize', showNextOptimized);
+        }
+    };
+    var showNextOptimized = optimizeForResize(showNextMarkOnTilt);
+    /* a hack to to avoid google slides bug of
+        height not autoAdjusting upon phone screen rotation,
+        we adjus it for 1 time (the time we show users the pop up to tilit the screen)
+        however.. it's unrelated to the normal flow of coachmarks
+    */
+    (0, react_1.useEffect)(function () {
+        if (window.innerWidth < (0, mixins_1.getBreakPoint)('md')) { // only use the hack for mobile users
+            var windowWidth_1 = window.innerWidth;
+            var adjustSlidesHeight = function () {
+                if (windowWidth_1 === window.innerWidth)
+                    return; // if resize was called for height change not width change
+                windowWidth_1 = window.innerWidth;
+                setUrl('');
+                setTimeout(function () { return setUrl(url); }, 300);
+                window.removeEventListener('resize', adjustOptimized_1);
+            };
+            var adjustOptimized_1 = optimizeForResize(adjustSlidesHeight, 100);
+            window.addEventListener('resize', adjustOptimized_1);
+            return function () { return window.removeEventListener('resize', adjustOptimized_1); };
+        }
+    }, []);
+    return (react_1.default.createElement(index_1.Coachmark, { active: (user === null || user === void 0 ? void 0 : user.coachmarkChecklist.H5PEmbed) === false && url && url.includes("h5p"), rank: rank, observerThreshold: 0.3, currentMark: activeMark, handleNext: showNextMarkOnTilt, handleSkip: removeCoachmark }));
+};
+exports.default = (0, react_1.forwardRef)(DisplayCoachmark);

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

@@ -1,15 +1,4 @@
 "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);
@@ -71,10 +60,6 @@ var GallerySlider = function () {
     }).handleDragStart;
     return (react_1.default.createElement(styled_1.StyledGallery, { invert: invert },
         react_1.default.createElement(GalleryThumbnails_1.GalleryThumbnails, { setActiveIdx: setActiveIdx, activeIdx: activeIdx }),
-        (value === null || value === void 0 ? void 0 : value.length) > 0 ? (react_1.default.createElement(SliderShell_1.SliderShell, { value: __spreadArray(__spreadArray([], uploadingPlaceholders, true), value, true), activeIdx: activeIdx, setActiveIdx: setActiveIdx, render: function (v) { return (react_1.default.createElement(SingleImageInput_1.SingleImageInput, __assign({}, {
-                value: v,
-                handleDragStart: handleDragStart,
-                // key: v?.publicUrl || idx, //cuz this is done inside the SliderShell
-            }))); } })) : (react_1.default.createElement(Placeholder_1.default, null))));
+        (value === null || value === void 0 ? void 0 : value.length) > 0 ? (react_1.default.createElement(SliderShell_1.SliderShell, { value: __spreadArray(__spreadArray([], uploadingPlaceholders, true), value, true), activeIdx: activeIdx, setActiveIdx: setActiveIdx, render: function (v) { return (react_1.default.createElement(SingleImageInput_1.SingleImageInput, { value: v, handleDragStart: handleDragStart })); } })) : (react_1.default.createElement(Placeholder_1.default, null))));
 };
 exports.default = GallerySlider;

package/dist/components/ImageInput/comps/ImageEditor/comps/ConfirmDeleteModal/index.d.ts

@@ -3,4 +3,4 @@ export function ConfirmDeleteModal({ showDeleteImageModal, setShowDeleteImageMod
     setShowDeleteImageModal: any;
     handleDeleteSingleImage: any;
 }): React.JSX.Element;
-import React from "react";
+import React from 'react';

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

@@ -127,77 +127,21 @@ function ImageEditor(_a) {
     var genModalStyleEditor = function () { return (react_1.default.createElement(Modal_1.Modal, { title: "Edit Image", fitToContentHeight: screenWidth >= (0, mixins_1.getBreakPoint)('sm') ? true : false, desktopWidth: "500px" },
         react_1.default.createElement(Paddings_1.PaddingTop40, null,
             react_1.default.createElement(ImageEditor, __assign({}, props, { id: 'insideModal', underEditImageData: underEditImageData, setUnderEditImageData: setUnderEditImageData, isInPopUp: true }))))); };
-    var genToolbarStyledEditor = function () { return (react_1.default.createElement(EditToolbar_1.EditToolbar, __assign({}, {
-        setUnderEditImageData: setUnderEditImageData,
-        underEditImageData: underEditImageData,
-        imageData: imageData,
-        handleSingleImageDataChange: handleSingleImageDataChange,
-        setImageUnderEdit: setImageUnderEdit,
-        imageSpread: imageSpread,
-        publicUrl: publicUrl,
-        defaultImageSpread: defaultImageSpread,
-        omitEditorTools: omitEditorTools,
-        isInPopUp: isInPopUp
-    }))); };
+    var genToolbarStyledEditor = function () { return (react_1.default.createElement(EditToolbar_1.EditToolbar, { setUnderEditImageData: setUnderEditImageData, underEditImageData: underEditImageData, imageData: imageData, handleSingleImageDataChange: handleSingleImageDataChange, setImageUnderEdit: setImageUnderEdit, //comes from ImageInput context if used inside it
+        imageSpread: imageSpread, publicUrl: publicUrl, defaultImageSpread: defaultImageSpread, omitEditorTools: omitEditorTools, isInPopUp: isInPopUp })); };
     return (react_1.default.createElement("div", { id: id && id + '_ImageEditor', style: {
             position: "relative",
             height: stretchToFullHeight ? "100%" : "auto",
-        } }, imageLazyLoading && !modalStyleEditorIsCurrentlyOpen() ? (react_1.default.createElement(AspectRatioShell_1.default, __assign({}, {
-        key: "loaderShell",
-        aspectRatio: aspectRatio,
-        stretchToFullHeight: stretchToFullHeight,
-        containerShape: containerShape,
-        disableImageBorder: disableImageBorder,
-    }),
+        } }, imageLazyLoading && !modalStyleEditorIsCurrentlyOpen() ? (react_1.default.createElement(AspectRatioShell_1.default, { key: "loaderShell", aspectRatio: aspectRatio, stretchToFullHeight: stretchToFullHeight, containerShape: containerShape, disableImageBorder: disableImageBorder },
         react_1.default.createElement(SkeletonLoader_1.SkeletonLoader, { style: { height: "100%" } }))) : (react_1.default.createElement(react_1.Fragment, null,
-        react_1.default.createElement(AspectRatioShell_1.default, __assign({}, {
-            id: id,
-            invert: invert,
-            key: "imageShell",
-            aspectRatio: aspectRatio,
-            stretchToFullHeight: stretchToFullHeight,
-            containerShape: containerShape,
-            disableImageBorder: disableImageBorder,
-            onShellPrepared: decideEditorStyle,
-        }),
-            showDeleteImageModal && (react_1.default.createElement(ConfirmDeleteModal_1.ConfirmDeleteModal, __assign({}, {
-                showDeleteImageModal: showDeleteImageModal,
-                setShowDeleteImageModal: setShowDeleteImageModal,
-                handleDeleteSingleImage: handleDeleteSingleImage,
-            }))),
+        react_1.default.createElement(AspectRatioShell_1.default, { id: id, invert: invert, key: "imageShell", //by adding key we are forcing this AspectRatioShell to rerender, so that decideEditorStyle() calculation happens
+            aspectRatio: aspectRatio, stretchToFullHeight: stretchToFullHeight, containerShape: containerShape, disableImageBorder: disableImageBorder, onShellPrepared: decideEditorStyle },
+            showDeleteImageModal && (react_1.default.createElement(ConfirmDeleteModal_1.ConfirmDeleteModal, { showDeleteImageModal: showDeleteImageModal, setShowDeleteImageModal: setShowDeleteImageModal, handleDeleteSingleImage: handleDeleteSingleImage })),
             react_1.default.createElement(styled_1.StyledFullWidthImgWrapper, { ref: wrapperRef, invert: invert, disableImageBorder: disableImageBorder },
-                react_1.default.createElement(styled_1.StyledImg, __assign({}, {
-                    ref: renderedImageRef,
-                    fullWidthOrFullHeightImg: fullWidthOrFullHeightImg,
-                    src: reorientedImageTempUrl || publicUrl,
-                    imageSpread: imageSpread,
-                    cropX: cropX,
-                    cropY: cropY,
-                }, { onTouchStart: handleDragStart && handleDragStart, onMouseDown: handleDragStart && handleDragStart })),
+                react_1.default.createElement(styled_1.StyledImg, { ref: renderedImageRef, fullWidthOrFullHeightImg: fullWidthOrFullHeightImg, src: reorientedImageTempUrl || publicUrl, imageSpread: imageSpread, cropX: cropX, cropY: cropY, onTouchStart: handleDragStart && handleDragStart, onMouseDown: handleDragStart && handleDragStart }),
                 underEditImageData !== undefined &&
-                    !omitEditorTools.includes("reposition") && (react_1.default.createElement(ImageReposManager_1.ImageReposManager, __assign({}, {
-                    fullWidthOrFullHeightImg: fullWidthOrFullHeightImg,
-                    wrapperRef: wrapperRef,
-                    renderedImageRef: renderedImageRef,
-                    setUnderEditImageData: setUnderEditImageData,
-                }))))),
-        !readOnly && (react_1.default.createElement(styled_1.StyledImageEditToolbar, __assign({}, {
-            underEditImageData: underEditImageData,
-            containerShape: containerShape,
-            isInPopUp: isInPopUp,
-        }), underEditImageData === undefined ? (react_1.default.createElement(ImageActionsMenu_1.ImageActionsMenu, __assign({}, {
-            id: id,
-            invert: invert,
-            setUnderEditImageData: setUnderEditImageData,
-            setImageUnderEdit: setImageUnderEdit,
-            inputRef: inputRef,
-            setShowDeleteImageModal: setShowDeleteImageModal,
-            publicUrl: publicUrl,
-            imageData: imageData,
-            handleReplaceSingleImage: handleReplaceSingleImage,
-            handleUpload: handleUpload,
-            isInRTE: isInRTE
-        }))) : editorStyle === "toolbar" ? (genToolbarStyledEditor()) : (editorStyle === "modal" && genModalStyleEditor()))),
+                    !omitEditorTools.includes("reposition") && (react_1.default.createElement(ImageReposManager_1.ImageReposManager, { fullWidthOrFullHeightImg: fullWidthOrFullHeightImg, wrapperRef: wrapperRef, renderedImageRef: renderedImageRef, setUnderEditImageData: setUnderEditImageData })))),
+        !readOnly && (react_1.default.createElement(styled_1.StyledImageEditToolbar, { underEditImageData: underEditImageData, containerShape: containerShape, isInPopUp: isInPopUp }, underEditImageData === undefined ? (react_1.default.createElement(ImageActionsMenu_1.ImageActionsMenu, { id: id, invert: invert, setUnderEditImageData: setUnderEditImageData, setImageUnderEdit: setImageUnderEdit, inputRef: inputRef, setShowDeleteImageModal: setShowDeleteImageModal, publicUrl: publicUrl, imageData: imageData, handleReplaceSingleImage: handleReplaceSingleImage, handleUpload: handleUpload, isInRTE: isInRTE })) : editorStyle === "toolbar" ? (genToolbarStyledEditor()) : (editorStyle === "modal" && genModalStyleEditor()))),
         enableCaptions && (readOnly &&
             !lexicalTextEditorHasValue(imageData.caption) &&
             !richTextHasValue(imageData.caption) //backwards compat cuz its possible caption data might be in draftjs shape

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

@@ -1,15 +1,4 @@
 "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);
@@ -76,12 +65,7 @@ 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,
-    }),
+    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),

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

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

@@ -0,0 +1,39 @@
+"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/ImageInput/comps/SingleImageInput/index.js

@@ -1,15 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -34,26 +23,6 @@ var SingleImageInput = function (_a) {
     var _b = (0, ImageInputContext_1.useImageInputContext)(), id = _b.id, aspectRatio = _b.aspectRatio, onChange = _b.onChange, handleUpload = _b.handleUpload, publicUrlBeingReplaced = _b.publicUrlBeingReplaced, readOnly = _b.readOnly, enableCaptions = _b.enableCaptions, invert = _b.invert, containerShape = _b.containerShape, defaultImageSpread = _b.defaultImageSpread, handleSingleImageDataChange = _b.handleSingleImageDataChange, handleDeleteSingleImage = _b.handleDeleteSingleImage, handleReplaceSingleImage = _b.handleReplaceSingleImage, setImageUnderEdit = _b.setImageUnderEdit, stretchToFullHeight = _b.stretchToFullHeight, disableImageBorder = _b.disableImageBorder, omitEditorTools = _b.omitEditorTools, isInRTE = _b.isInRTE;
     //this helps for the ImageSlider, since ImageSlider uses SingleImageInput as child
     var isBeingReplaced = publicUrlBeingReplaced && publicUrlBeingReplaced === (value === null || value === void 0 ? void 0 : value.publicUrl);
-    return !value || !value.publicUrl || isBeingReplaced ? (react_1.default.createElement(Placeholder_1.default, null)) : (react_1.default.createElement(ImageEditor_1.ImageEditor, __assign({}, {
-        id: id,
-        value: value,
-        aspectRatio: aspectRatio,
-        invert: invert,
-        containerShape: containerShape,
-        readOnly: readOnly,
-        onChange: onChange,
-        enableCaptions: enableCaptions,
-        defaultImageSpread: defaultImageSpread,
-        handleSingleImageDataChange: handleSingleImageDataChange,
-        handleDeleteSingleImage: handleDeleteSingleImage,
-        handleReplaceSingleImage: handleReplaceSingleImage,
-        handleUpload: handleUpload,
-        setImageUnderEdit: setImageUnderEdit,
-        stretchToFullHeight: stretchToFullHeight,
-        disableImageBorder: disableImageBorder,
-        omitEditorTools: omitEditorTools,
-        isInRTE: isInRTE,
-        handleDragStart: handleDragStart
-    })));
+    return !value || !value.publicUrl || isBeingReplaced ? (react_1.default.createElement(Placeholder_1.default, null)) : (react_1.default.createElement(ImageEditor_1.ImageEditor, { id: id, value: value, aspectRatio: aspectRatio, invert: invert, containerShape: containerShape, readOnly: readOnly, onChange: onChange, enableCaptions: enableCaptions, defaultImageSpread: defaultImageSpread, handleSingleImageDataChange: handleSingleImageDataChange, handleDeleteSingleImage: handleDeleteSingleImage, handleReplaceSingleImage: handleReplaceSingleImage, handleUpload: handleUpload, setImageUnderEdit: setImageUnderEdit, stretchToFullHeight: stretchToFullHeight, disableImageBorder: disableImageBorder, omitEditorTools: omitEditorTools, isInRTE: isInRTE, handleDragStart: handleDragStart }));
 };
 exports.SingleImageInput = SingleImageInput;

package/dist/components/ImageInput/derivedComps/ImageDisplayInMask/index.js

@@ -47,7 +47,7 @@ var ImageDisplayInMask = function (_a) {
         imgHeight: parseInt(aspectRatio.split("/")[1]),
         wrapperAspectRatio: maskAspectRatio,
     });
-    return (react_1.default.createElement(styled_1.StyledAbsPosShellImageEditor, __assign({}, { rendererStretch: rendererStretch }),
+    return (react_1.default.createElement(styled_1.StyledAbsPosShellImageEditor, { rendererStretch: rendererStretch },
         react_1.default.createElement(__1.ImageInput, __assign({}, imageInputProps, { aspectRatio: aspectRatio, stretchToFullHeight: rendererStretch === "fullHeight" && true, readOnly: true, enableCaptions: false }))));
 };
 exports.ImageDisplayInMask = ImageDisplayInMask;

package/dist/components/ImageInput/index.js

@@ -32,37 +32,15 @@ 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 ? 'cover' : _f, _g = _a.allowedFormats, allowedFormats = _g === void 0 ? ["jpg", "jpeg", "png"] : _g, _h = _a.folderName, folderName = _h === void 0 ? 'images' : _h, bucketEnv = _a.bucketEnv, formatConvertConfig = _a.formatConvertConfig, dropzoneLabel = _a.dropzoneLabel, dropzoneSublabel = _a.dropzoneSublabel, _j = _a.disableImageBorder, disableImageBorder = _j === void 0 ? false : _j, _k = _a.omitEditorTools, omitEditorTools = _k === void 0 ? [] : _k, //can include : 'cover_contain' | 'rotate' | 'reposition'
+    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
     isInRTE = _a.isInRTE;
     var props = arguments[0];
     var showOptionalLabelInDropzone = !props.label && !props.sublabel;
-    return (react_1.default.createElement(ImageInputContext_1.ImageInputContextProvider, __assign({}, {
-        value: value,
-        onChange: onChange,
-        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"),
+    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,
-        isRequired: isRequired,
-        files: files,
-        isInRTE: isInRTE
-    }),
+            "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 },
         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/InlineAlert/index.d.ts

@@ -1,8 +1,25 @@
-export function InlineAlert({ text, link, type, style, invert }: {
-    text: any;
-    link: any;
-    type?: string;
-    style: any;
-    invert: any;
-}): React.JSX.Element;
-import React from "react";
+import React from 'react';
+type AlertType = 'success' | 'danger' | 'neutral' | 'neutralInactive';
+interface InlineAlertProps {
+    text: string;
+    link?: {
+        url: string;
+        text: string;
+    };
+    type?: AlertType;
+    style?: React.CSSProperties;
+    invert?: boolean;
+}
+/**
+ * @component Renders a inline alert component with customizable text and style.
+ *
+ * - The props object containing the following properties:
+ * @prop {string} props.text: The text to be displayed in the inline alert.
+ * @prop {'success' | 'danger' | 'neutral' | 'neutralInactive'} props.type: The type of alert to be displayed. Defaults to "neutral".
+ * @prop {React.CSSProperties} props.style: Additional CSS styles to apply to the inline alert.
+ * @prop {boolean} props.invert: A boolean indicating whether to invert the colors of the inline alert. Defaults to false.
+ * @prop {object} props.link: An object containing the link properties: url and text. If provided, a link is rendered next to the text.
+ * @return {ReactElement} The rendered inline alert component.
+ */
+export declare const InlineAlert: React.FC<InlineAlertProps>;
+export {};

package/dist/components/InlineAlert/index.js

@@ -19,6 +19,17 @@ var react_1 = __importDefault(require("react"));
 var colors_1 = require("../../themes/colors");
 var utilsOolib_1 = require("../../utilsOolib");
 var red = colors_1.colors.red, invertRed = colors_1.colors.invertRed, white = colors_1.colors.white, green = colors_1.colors.green, invertGreen = colors_1.colors.invertGreen, greyColor15 = colors_1.colors.greyColor15, greyColor70 = colors_1.colors.greyColor70, greyColor100 = colors_1.colors.greyColor100;
+/**
+ * @component Renders a inline alert component with customizable text and style.
+ *
+ * - The props object containing the following properties:
+ * @prop {string} props.text: The text to be displayed in the inline alert.
+ * @prop {'success' | 'danger' | 'neutral' | 'neutralInactive'} props.type: The type of alert to be displayed. Defaults to "neutral".
+ * @prop {React.CSSProperties} props.style: Additional CSS styles to apply to the inline alert.
+ * @prop {boolean} props.invert: A boolean indicating whether to invert the colors of the inline alert. Defaults to false.
+ * @prop {object} props.link: An object containing the link properties: url and text. If provided, a link is rendered next to the text.
+ * @return {ReactElement} The rendered inline alert component.
+ */
 var InlineAlert = function (_a) {
     var text = _a.text, link = _a.link, _b = _a.type, type = _b === void 0 ? 'neutral' : _b, style = _a.style, invert = _a.invert;
     var localize = (0, utilsOolib_1.useLocale)();
@@ -30,6 +41,10 @@ var InlineAlert = function (_a) {
     };
     return (react_1.default.createElement("h5", { style: __assign({ display: 'flex', alignItems: 'center', gap: '0.5rem' }, style) },
         react_1.default.createElement("span", { className: 'SANS_2', style: { color: typeColor[type][invert ? 'invert' : 'normal'] } }, localize(text)),
-        link && (react_1.default.createElement("a", { className: 'SANS_2', style: { paddingLeft: '1rem', textDecoration: 'underline', color: invert ? white : greyColor100 }, href: link.url, target: "_blank" }, localize(link.text)))));
+        link && (react_1.default.createElement("a", { className: 'SANS_2', style: {
+                paddingLeft: '1rem',
+                textDecoration: 'underline',
+                color: invert ? white : greyColor100,
+            }, href: link.url, target: "_blank", rel: "noopener noreferrer" }, localize(link.text)))));
 };
 exports.InlineAlert = InlineAlert;

package/dist/components/LegendRadioCheckList/LegendButton/index.d.ts

@@ -0,0 +1,10 @@
+export function LegendButton({ option, isActive, onClick, onMouseOver, onMouseOut, onTouchStart, onTouchEnd, }: {
+    option: any;
+    isActive: any;
+    onClick: any;
+    onMouseOver: any;
+    onMouseOut: any;
+    onTouchStart: any;
+    onTouchEnd: any;
+}): React.JSX.Element;
+import React from "react";

package/dist/components/LegendRadioCheckList/LegendButton/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LegendButton = void 0;
+var react_1 = __importDefault(require("react"));
+var Typo_1 = require("../../Typo");
+var styled_1 = require("./styled");
+var LegendButton = function (_a) {
+    var option = _a.option, isActive = _a.isActive, onClick = _a.onClick, onMouseOver = _a.onMouseOver, onMouseOut = _a.onMouseOut, onTouchStart = _a.onTouchStart, onTouchEnd = _a.onTouchEnd;
+    return (react_1.default.createElement(styled_1.StyledLegendButton, { active: isActive, onClick: onClick, onMouseOver: onMouseOver, onMouseOut: onMouseOut, onTouchStart: onTouchStart, onTouchEnd: onTouchEnd },
+        react_1.default.createElement(styled_1.StyledButtonContents, null,
+            option.color && (react_1.default.createElement(styled_1.StyledButtonColorTag, { style: { backgroundColor: option.color } })),
+            react_1.default.createElement(Typo_1.SANS_2, { bold: !!option.desc }, option.display),
+            option.desc && react_1.default.createElement(Typo_1.SANS_2, null, option.desc))));
+};
+exports.LegendButton = LegendButton;

package/dist/components/LegendRadioCheckList/LegendButton/styled.d.ts

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