oolib 2.85.0 → 2.86.1

package/dist/components/AudioInput/comps/AudioAction.d.ts

@@ -1,4 +1,5 @@
-export function AudioAction({ inputRef, parentOnChange, isInRTE }: {
+export function AudioAction({ id, inputRef, parentOnChange, isInRTE }: {
+    id: any;
     inputRef: any;
     parentOnChange: any;
     isInRTE: any;

package/dist/components/AudioInput/comps/AudioAction.js

@@ -18,11 +18,11 @@ exports.AudioAction = void 0;
 var react_1 = __importDefault(require("react"));
 var ActionMenu_1 = require("../../ActionMenu");
 var AudioAction = function (_a) {
-    var inputRef = _a.inputRef, parentOnChange = _a.parentOnChange, isInRTE = _a.isInRTE;
+    var id = _a.id, inputRef = _a.inputRef, parentOnChange = _a.parentOnChange, isInRTE = _a.isInRTE;
     return (react_1.default.createElement("div", { style: __assign({}, (isInRTE ? { display: "none" } : {})) },
         react_1.default.createElement(ActionMenu_1.ActionMenu, { popOutOfOverflowHiddenParent: true, ButtonComp: "ButtonGhost", M: true, actions: [
                 {
-                    id: "reuploadAudio",
+                    id: "".concat(id, "_reuploadAudio"),
                     display: "Replace Audio",
                     onClick: function () {
                         inputRef.current.click();

package/dist/components/AudioInput/index.js

@@ -101,7 +101,7 @@ function AudioInput(_a) {
                     ? uploadProgress + "%"
                     : "Almost Done..." }))) : (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({}, { isInRTE: isInRTE, inputRef: inputRef, parentOnChange: parentOnChange }))))),
+            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.
             , accept: "audio/*", ref: inputRef, style: { display: "none" }, id: "AudioField", onChange: function (v) { return handleUpload(v.target.files); } })));
 }

package/dist/components/Dropdowns/comps/OptionsShell/index.js

@@ -42,7 +42,7 @@ var mixins_1 = require("../../../../themes/mixins");
 var useScreenWidth_1 = require("../../../../utils/customHooks/useScreenWidth");
 var usePopOutOfOverflowHiddenParent_1 = require("../../../../utils/usePopOutOfOverflowHiddenParent");
 var Buttons_1 = require("../../../Buttons");
-var ModalLarge_1 = require("../../../Modals/ModalLarge");
+var Modal_1 = require("../../../Modals/Modal");
 var styled_1 = require("./styled");
 var OptionsAnimateWrapper_1 = require("./comps/OptionsAnimateWrapper");
 exports.OptionsShell = react_1.default.forwardRef(function (_a, ref) {
@@ -73,7 +73,7 @@ exports.OptionsShell = react_1.default.forwardRef(function (_a, ref) {
         }),
             react_1.default.createElement(styled_1.StyledOptionsWrapper, { id: "StyledOptionsWrapper", ref: ref, invert: invert, lightboxHeight: lightboxHeight, 
                 // className={className}
-                style: __assign(__assign({}, (lightboxStyle || {})), { position: "absolute", bottom: yOrientation === "top" ? undefined : 0, top: yOrientation === "top" ? 0 : undefined }) }, children)))) : (react_1.default.createElement(framer_motion_1.AnimatePresence, null, showOptions ? (react_1.default.createElement(ModalLarge_1.ModalLarge, { fitToContentHeight: true, title: optionsModalLabel || label, onClose: handleHideOptions, invert: invert, S: S },
+                style: __assign(__assign({}, (lightboxStyle || {})), { position: "absolute", bottom: yOrientation === "top" ? undefined : 0, top: yOrientation === "top" ? 0 : undefined }) }, children)))) : (react_1.default.createElement(framer_motion_1.AnimatePresence, null, showOptions ? (react_1.default.createElement(Modal_1.Modal, { fitToContentHeight: true, title: optionsModalLabel || label, onClose: handleHideOptions, invert: invert, S: S },
         SelectComp && SelectComp,
         react_1.default.createElement(styled_1.StyledModalOptionsWrapper, { invert: invert, ref: ref }, children),
         showDoneButton && (react_1.default.createElement("div", { style: {

package/dist/components/Hints/index.js

@@ -41,10 +41,10 @@ var contextApi_1 = require("../Hints/contextApi");
 var colors_1 = require("../../themes/colors");
 var DisplayIcon_1 = require("../../utils/comps/DisplayIcon");
 var Buttons_1 = require("../Buttons");
-var ModalLarge_1 = require("../Modals/ModalLarge");
+var Modal_1 = require("../Modals/Modal");
 var mixins_1 = require("../../themes/mixins");
 var useScreenWidth_1 = require("../../utils/customHooks/useScreenWidth");
-var styled_2 = require("../Modals/ModalLarge/styled");
+var styled_2 = require("../Modals/Modal/styled");
 var OKELink_1 = require("../OKELink");
 var greyColor80 = colors_1.colors.greyColor80, greyColor15 = colors_1.colors.greyColor15, greyColor100 = colors_1.colors.greyColor100;
 var TriangleIconComp = function (props) { return (react_1.default.createElement("svg", __assign({ width: 20, height: 13, fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
@@ -107,7 +107,7 @@ var Hints = function (_a) {
                 react_1.default.createElement(styled_1.StyledLightBoxContent, null,
                     react_1.default.createElement(styled_1.StyledLightBoxList, null, hints.map(function (d) { return (react_1.default.createElement("li", null,
                         react_1.default.createElement(BulletIcon, null),
-                        react_1.default.createElement(Typo_1.SANS_3, null, d))); })))))) : (react_1.default.createElement(ModalLarge_1.ModalLarge, { isStorybook: true, headerStyle: "style2", id: "modal", title: title, onClose: function () { return setActive(""); } },
+                        react_1.default.createElement(Typo_1.SANS_3, null, d))); })))))) : (react_1.default.createElement(Modal_1.Modal, { isStorybook: true, headerStyle: "style2", id: "modal", title: title, onClose: function () { return setActive(""); } },
             react_1.default.createElement("div", { style: { padding: ".5rem 2rem" } },
                 react_1.default.createElement(styled_1.StyledLightBoxList, null, hints.map(function (d) { return (react_1.default.createElement("li", null,
                     react_1.default.createElement("div", { style: { marginTop: ".5rem", lineHeight: 0 } },

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

@@ -54,7 +54,7 @@ var useReorientImage_1 = require("./utils/useReorientImage");
 var styled_components_1 = require("styled-components");
 var renderRTEPlaceholderForOolibPreview_1 = require("../../../../utilsOolib/renderRTEPlaceholderForOolibPreview");
 var themes_1 = require("../../../../themes");
-var ModalLarge_1 = require("../../../Modals/ModalLarge");
+var Modal_1 = require("../../../Modals/Modal");
 var SkeletonLoader_1 = require("../../../LoadersAndProgress/SkeletonLoader");
 /**
  * fiddle for dealing with rotation: https://jsfiddle.net/wunderbart/w1hw5kv1/
@@ -123,7 +123,7 @@ function ImageEditor(_a) {
     var modalStyleEditorIsCurrentlyOpen = function () {
         return editorStyle === "modal" && !!underEditImageData;
     };
-    var genModalStyleEditor = function () { return (react_1.default.createElement(ModalLarge_1.ModalLarge, { title: "Edit Image" },
+    var genModalStyleEditor = function () { return (react_1.default.createElement(Modal_1.Modal, { title: "Edit Image" },
         react_1.default.createElement(Container_1.Container, null,
             react_1.default.createElement(Wrappers_1.Wrapper650, null,
                 react_1.default.createElement(Paddings_1.PaddingTopBottom40, null,

package/dist/components/Modals/{ModalLarge → Modal}/comps/ModalHeaderStyle1/index.js

@@ -18,7 +18,7 @@ var ModalHeaderStyle1 = function (_a) {
                 alignItems: "center",
             } },
             !linkTo && title && (react_1.default.createElement("div", null,
-                react_1.default.createElement(Typo_1.SANS_3_4, { invert: invert, semibold: true }, title))),
+                react_1.default.createElement(Typo_1.SANS_3, { invert: invert, semibold: true }, title))),
             linkTo && (react_1.default.createElement(Typo_1.SANS_4, { semibold: true },
                 react_1.default.createElement(OKELink_1.OKELink, { iconAfter: "ArrowLineUpRight", linkType: "action", onClick: function () { return window.open(linkTo); }, iconSize: 15, color: "black", invert: invert }, title)))),
         onClose && (react_1.default.createElement(Buttons_1.ButtonGhost, { invert: invert, icon: "X", onClick: function () { return setAnimPos(initAnimPos); } }))));

package/dist/components/Modals/{ModalLarge → Modal}/comps/ModalHeaderStyle2/index.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ModalHeaderStyle2 = void 0;
 var react_1 = __importDefault(require("react"));
 var Buttons_1 = require("../../../../Buttons");
-var OKELink_1 = require("../../../../OKELink");
 var Typo_1 = require("../../../../Typo");
 var themes_1 = require("../../../../../themes");
 var DisplayIcon_1 = require("../../../../../utils/comps/DisplayIcon");

package/dist/components/Modals/{ModalLarge → Modal}/index.d.ts

@@ -1,4 +1,4 @@
-export function ModalLarge({ title, onClose, children, linkTo, desktopWidth, headerStyle, subtitle, fitToContentHeight, invert }: {
+export function Modal({ title, onClose, children, linkTo, desktopWidth, headerStyle, subtitle, fitToContentHeight, invert, }: {
     title: any;
     onClose: any;
     children: any;

package/dist/components/Modals/{ModalLarge → Modal}/index.js

@@ -34,7 +34,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ModalLarge = void 0;
+exports.Modal = void 0;
 var react_1 = __importStar(require("react"));
 var react_dom_1 = require("react-dom");
 var framer_motion_1 = require("framer-motion");
@@ -43,7 +43,9 @@ var useScreenWidth_1 = require("../../../utils/customHooks/useScreenWidth");
 var ModalHeaderStyle1_1 = require("./comps/ModalHeaderStyle1");
 var ModalHeaderStyle2_1 = require("./comps/ModalHeaderStyle2");
 var styled_1 = require("./styled");
-var ModalLarge = function (_a) {
+var Buttons_1 = require("../../Buttons");
+var Divider_1 = require("../../Divider");
+var Modal = function (_a) {
     var title = _a.title, onClose = _a.onClose, children = _a.children, linkTo = _a.linkTo, _b = _a.desktopWidth, desktopWidth = _b === void 0 ? "80%" : _b, _c = _a.headerStyle, headerStyle = _c === void 0 ? "style1" : _c, subtitle = _a.subtitle, _d = _a.fitToContentHeight, fitToContentHeight = _d === void 0 ? false : _d, invert = _a.invert;
     var screenWidth = (0, useScreenWidth_1.useScreenWidth)();
     var handleClose = function () { return onClose(); };
@@ -71,14 +73,17 @@ var ModalLarge = function (_a) {
     var takeFullScreenOnScroll = ["style1"].indexOf(headerStyle) !== -1
         ? true
         : ["style2"].indexOf(headerStyle) !== -1 && false;
-    var genModalContents = function () { return (react_1.default.createElement(styled_1.StyledModalLargeContentWrapper, { desktopWidth: desktopWidth, takeFullScreenOnScroll: takeFullScreenOnScroll, style: !fitToContentHeight ? { minHeight: 'calc(100vh - 4rem)' } : {} },
+    var genModalContents = function () { return (react_1.default.createElement(styled_1.StyledModalLargeContentWrapper, { className: "StyledModalLargeContentWrapper", desktopWidth: desktopWidth, takeFullScreenOnScroll: takeFullScreenOnScroll, style: !fitToContentHeight ? { minHeight: 'calc(100vh - 4rem)' } : {} },
         genHeader(),
-        react_1.default.createElement(styled_1.StyledModalLargeBody, { takeFullScreenOnScroll: takeFullScreenOnScroll }, children))); };
+        react_1.default.createElement(styled_1.StyledModalBodyWrapper, { style: !fitToContentHeight ? { minHeight: 'calc(100vh - 8rem)' } : {}, 
+            // showActionPanel={showActionPanel} 
+            takeFullScreenOnScroll: takeFullScreenOnScroll },
+            react_1.default.createElement(styled_1.StyledModalLargeBody, { takeFullScreenOnScroll: takeFullScreenOnScroll }, children)))); };
     return ((0, react_dom_1.createPortal)(react_1.default.createElement(styled_1.StyledModalLargeBg, null,
         react_1.default.createElement(styled_1.StyledModalLargeBgColor, { initial: { opacity: initAnimPos.opacity }, animate: { opacity: animPos.opacity }, transition: {
                 type: "tween",
                 ease: "easeOut",
-            } }),
+            }, onClick: function () { return handleClose(); } }),
         screenWidth < (0, mixins_1.getBreakPoint)("sm") ? (react_1.default.createElement(framer_motion_1.motion.div, { style: __assign({ position: "relative" }, (fitToContentHeight
                 ? {
                     minHeight: '100vh',
@@ -91,12 +96,12 @@ var ModalLarge = function (_a) {
             }, onAnimationComplete: function () {
                 if (animPos.marginTop === initAnimPos.marginTop)
                     handleClose();
-            } }, genModalContents())) : (react_1.default.createElement(framer_motion_1.motion.div, { style: { width: "100%" }, initial: initAnimPos, animate: animPos, transition: {
+            }, onClick: function (e) { return e.stopPropagation(); } }, genModalContents())) : (react_1.default.createElement(framer_motion_1.motion.div, { style: { width: "100%" }, initial: initAnimPos, animate: animPos, transition: {
                 type: "tween",
                 ease: "easeOut",
             }, onAnimationComplete: function () {
                 if (animPos.marginTop === initAnimPos.marginTop)
                     handleClose();
-            } }, genModalContents()))), document.getElementById("modal-root")));
+            }, onClick: function (e) { return e.stopPropagation(); } }, genModalContents()))), document.getElementById("modal-root")));
 };
-exports.ModalLarge = ModalLarge;
+exports.Modal = Modal;

package/dist/components/Modals/{ModalLarge → Modal}/styled.d.ts

@@ -2,6 +2,8 @@ export const StyledModalLargeBg: import("styled-components").StyledComponent<any
 export const StyledModalLargeBgColor: import("styled-components").StyledComponent<any, any, object, string | number | symbol>;
 export const StyledModalLargeContentWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const StyledModalLargeHeader: import("styled-components").StyledComponent<"header", any, {}, never>;
+export const StyledModalBodyWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const StyledModalLargeBody: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledActionButtonsWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const StyledModalHeaderStyle2Container: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const StyledModalHeaderStyle2Title: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/components/Modals/{ModalLarge → Modal}/styled.js

@@ -27,7 +27,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledModalHeaderStyle2Title = exports.StyledModalHeaderStyle2Container = exports.StyledModalLargeBody = exports.StyledModalLargeHeader = exports.StyledModalLargeContentWrapper = exports.StyledModalLargeBgColor = exports.StyledModalLargeBg = void 0;
+exports.StyledModalHeaderStyle2Title = exports.StyledModalHeaderStyle2Container = exports.StyledActionButtonsWrapper = exports.StyledModalLargeBody = exports.StyledModalBodyWrapper = exports.StyledModalLargeHeader = exports.StyledModalLargeContentWrapper = exports.StyledModalLargeBgColor = exports.StyledModalLargeBg = void 0;
 var mixins_1 = require("../../../themes/mixins");
 var themes_1 = require("../../../themes");
 var framer_motion_1 = require("framer-motion");
@@ -35,25 +35,39 @@ var styled_components_1 = __importStar(require("styled-components"));
 var black_opacity80 = themes_1.colors.black_opacity80, white = themes_1.colors.white, greyColor5 = themes_1.colors.greyColor5, greyColor15 = themes_1.colors.greyColor15;
 exports.StyledModalLargeBg = (0, styled_components_1.default)(framer_motion_1.motion.div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100vw;\n  height: 100%;\n  position: fixed;\n  left: 0;\n  bottom: 0;\n  z-index: 999999999;\n  overflow-y: auto;\n  overflow-x: hidden;\n  ", " {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n"], ["\n  width: 100vw;\n  height: 100%;\n  position: fixed;\n  left: 0;\n  bottom: 0;\n  z-index: 999999999;\n  overflow-y: auto;\n  overflow-x: hidden;\n  ", " {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n"])), (0, mixins_1.mediaQuery)("sm"));
 exports.StyledModalLargeBgColor = (0, styled_components_1.default)(framer_motion_1.motion.div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background: ", ";\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100vw;\n  height: 100vh;\n"], ["\n  background: ", ";\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100vw;\n  height: 100vh;\n"])), black_opacity80);
-exports.StyledModalLargeContentWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  width: 100%;\n  margin-top: 4rem;\n  background-color: ", ";\n  ", "\n\n  ", " {\n    margin-top: 0;\n    border: 2px solid ", ";\n    width: ", ";\n    /* min-height: 50vh; */\n    max-height: 90vh;\n    position: relative;\n    overflow: ", ";\n    border-radius: 0.2rem;\n    margin: 0 auto;\n  }\n"], ["\n  width: 100%;\n  margin-top: 4rem;\n  background-color: ", ";\n  ", "\n\n  ", " {\n    margin-top: 0;\n    border: 2px solid ", ";\n    width: ", ";\n    /* min-height: 50vh; */\n    max-height: 90vh;\n    position: relative;\n    overflow: ", ";\n    border-radius: 0.2rem;\n    margin: 0 auto;\n  }\n"])), white, function (_a) {
+exports.StyledModalLargeContentWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  width: 100%;\n  margin-top: 4rem;\n  background-color: ", ";\n  ", "\n\n  ", " {\n    margin-top: 0;\n    border: 2px solid ", ";\n    width: ", ";\n    /* min-height: 50vh; */\n    max-height: 90vh;\n    position: relative;\n    display: flex;\n    flex-direction: column;\n   \n    border-radius: 0.2rem;\n    margin: 0 auto;\n  }\n"], ["\n  width: 100%;\n  margin-top: 4rem;\n  background-color: ", ";\n  ", "\n\n  ", " {\n    margin-top: 0;\n    border: 2px solid ", ";\n    width: ", ";\n    /* min-height: 50vh; */\n    max-height: 90vh;\n    position: relative;\n    display: flex;\n    flex-direction: column;\n   \n    border-radius: 0.2rem;\n    margin: 0 auto;\n  }\n"])), white, function (_a) {
     var takeFullScreenOnScroll = _a.takeFullScreenOnScroll;
     return takeFullScreenOnScroll
         ? (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n          /* min-height: calc(100vh - 4rem); */\n        "], ["\n          /* min-height: calc(100vh - 4rem); */\n        "]))) : (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n          height: calc(100vh - 4rem);\n          display: flex;\n          flex-direction: column;\n        "], ["\n          height: calc(100vh - 4rem);\n          display: flex;\n          flex-direction: column;\n        "])));
 }, (0, mixins_1.mediaQuery)("sm"), white, function (_a) {
     var desktopWidth = _a.desktopWidth;
     return desktopWidth;
-}, function (_a) {
-    var takeFullScreenOnScroll = _a.takeFullScreenOnScroll;
-    return takeFullScreenOnScroll ? "auto" : "unset";
 });
 exports.StyledModalLargeHeader = styled_components_1.default.header(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  background-color: ", ";\n  /* width: 100%; */\n  height: 4rem;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 0 2rem;\n  position: sticky;\n  top: 0;\n  z-index: 100;\n"], ["\n  background-color: ", ";\n  /* width: 100%; */\n  height: 4rem;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 0 2rem;\n  position: sticky;\n  top: 0;\n  z-index: 100;\n"])), function (_a) {
     var invert = _a.invert;
     return invert ? themes_1.colors.greyColor90 : greyColor5;
 });
-exports.StyledModalLargeBody = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  position: relative;\n  ", "\n"], ["\n  position: relative;\n  ", "\n"])), function (_a) {
+exports.StyledModalBodyWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  overflow: ", ";\n"], ["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  overflow: ", ";\n"])), function (_a) {
+    var takeFullScreenOnScroll = _a.takeFullScreenOnScroll;
+    return takeFullScreenOnScroll ? "auto" : "unset";
+});
+exports.StyledModalLargeBody = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  padding: ", "; \n  ", "\n"], ["\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  padding: ", "; \n  ", "\n"])), function (_a) {
+    var noPadding = _a.noPadding;
+    return noPadding && '2rem';
+}, function (_a) {
     var takeFullScreenOnScroll = _a.takeFullScreenOnScroll;
-    return !takeFullScreenOnScroll && (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      flex: 1;\n      overflow: auto;\n    "], ["\n      flex: 1;\n      overflow: auto;\n    "])));
+    return !takeFullScreenOnScroll && (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      flex: 1;\n      overflow: auto;\n    "], ["\n      flex: 1;\n      overflow: auto;\n    "])));
+});
+exports.StyledActionButtonsWrapper = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  gap: 1rem;\n  display: flex;\n  justify-content: ", ";\n  padding: 1rem 0;\n  padding-left: ", ";\n  padding-right: ", ";\n  background-color: white;\n"], ["\n  gap: 1rem;\n  display: flex;\n  justify-content: ", ";\n  padding: 1rem 0;\n  padding-left: ", ";\n  padding-right: ", ";\n  background-color: white;\n"])), function (_a) {
+    var alignActions = _a.alignActions;
+    return alignActions === "right" ? 'flex-end' : '';
+}, function (_a) {
+    var noPadding = _a.noPadding;
+    return !noPadding && '2rem';
+}, function (_a) {
+    var noPadding = _a.noPadding;
+    return !noPadding ? '2rem' : '0.5rem';
 });
-exports.StyledModalHeaderStyle2Container = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  display: flex;\n  border-bottom: 1px solid ", ";\n  padding: 1rem 2rem;\n  position: relative;\n"], ["\n  display: flex;\n  border-bottom: 1px solid ", ";\n  padding: 1rem 2rem;\n  position: relative;\n"])), greyColor15);
-exports.StyledModalHeaderStyle2Title = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  padding-top: 1rem;\n  display: flex;\n  flex-grow: 1;\n  gap: 1.5rem;\n  justify-content: space-between;\n  align-items: center;\n"], ["\n  padding-top: 1rem;\n  display: flex;\n  flex-grow: 1;\n  gap: 1.5rem;\n  justify-content: space-between;\n  align-items: center;\n"])));
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;
+exports.StyledModalHeaderStyle2Container = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  display: flex;\n  border-bottom: 1px solid ", ";\n  padding: 1rem 2rem;\n  position: relative;\n"], ["\n  display: flex;\n  border-bottom: 1px solid ", ";\n  padding: 1rem 2rem;\n  position: relative;\n"])), greyColor15);
+exports.StyledModalHeaderStyle2Title = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  padding-top: 1rem;\n  display: flex;\n  flex-grow: 1;\n  gap: 1.5rem;\n  justify-content: space-between;\n  align-items: center;\n"], ["\n  padding-top: 1rem;\n  display: flex;\n  flex-grow: 1;\n  gap: 1.5rem;\n  justify-content: space-between;\n  align-items: center;\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12;

package/dist/components/Modals/ModalSmall/index.js

@@ -41,6 +41,7 @@ var ModalSmall = function (_a) {
         document.body.style.overflow = "hidden";
         return function () { return (document.body.style.overflow = "unset"); };
     }, []);
+    var SubTitleText = screenWidth >= (0, mixins_1.getBreakPoint)('sm') ? Typo_1.SANS_4 : Typo_1.SANS_3;
     var genModalContents = function () { return (react_1.default.createElement(react_1.Fragment, null,
         onClose && (react_1.default.createElement(styled_1.StyledModalSmallClose, null,
             react_1.default.createElement(Buttons_1.ButtonPrimary, { S: true, icon: "X", onClick: function () { return setAnimPos(initAnimPos); } }))),
@@ -48,15 +49,15 @@ var ModalSmall = function (_a) {
             title && (react_1.default.createElement("div", null,
                 react_1.default.createElement(Typo_1.SERIF_5_6, null, title))),
             subTitle && (react_1.default.createElement(styled_1.StyledModalSmallContentSubtitle, null,
-                react_1.default.createElement(Typo_1.SANS_4, null, subTitle))),
+                react_1.default.createElement(SubTitleText, null, subTitle))),
             react_1.default.createElement("div", { style: { marginTop: (title || subTitle) && "2rem" } }, children ? children : null)))); };
-    return ((0, react_dom_1.createPortal)(react_1.default.createElement(styled_1.StyledModalSmall, { initial: { opacity: initAnimPos.opacity }, animate: { opacity: animPos.opacity }, transition: { type: "tween", ease: "easeOut" } }, screenWidth < (0, mixins_1.getBreakPoint)("sm") ? (react_1.default.createElement(styled_1.StyledModalSmallContentWrapper, { initial: initAnimPos, animate: animPos, transition: {
+    return ((0, react_dom_1.createPortal)(react_1.default.createElement(styled_1.StyledModalSmall, { initial: { opacity: initAnimPos.opacity }, animate: { opacity: animPos.opacity }, transition: { type: "tween", ease: "easeOut" }, onClick: function () { return onClose(); } }, screenWidth < (0, mixins_1.getBreakPoint)("sm") ? (react_1.default.createElement(styled_1.StyledModalSmallContentWrapper, { initial: initAnimPos, animate: animPos, transition: {
             type: "tween",
             ease: "easeOut",
         }, onAnimationComplete: function () {
             if (animPos.marginTop === initAnimPos.marginTop)
                 onClose();
-        } }, genModalContents())) : (react_1.default.createElement(styled_1.StyledModalSmallContentWrapper
+        }, onClick: function (e) { return e.stopPropagation(); } }, genModalContents())) : (react_1.default.createElement(styled_1.StyledModalSmallContentWrapper
     // style={{ width: "100%" }}
     , { 
         // style={{ width: "100%" }}
@@ -72,6 +73,6 @@ var ModalSmall = function (_a) {
         }, onAnimationComplete: function () {
             if (animPos.marginTop === initAnimPos.marginTop)
                 onClose();
-        } }, genModalContents()))), document.getElementById("modal-root")));
+        }, onClick: function (e) { return e.stopPropagation(); } }, genModalContents()))), document.getElementById("modal-root")));
 };
 exports.ModalSmall = ModalSmall;

package/dist/components/Modals/ModalSmall/styled.js

@@ -36,7 +36,7 @@ var white = themes_1.colors.white, greyColor100_opacity70 = themes_1.colors.grey
 var ModalStyles = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  position: fixed;\n  top: 0;\n  left: 0;\n  background: ", ";\n  z-index: 999999999;\n"], ["\n  width: 100%;\n  height: 100%;\n  position: fixed;\n  top: 0;\n  left: 0;\n  background: ", ";\n  z-index: 999999999;\n"])), greyColor100_opacity70);
 exports.StyledModalSmall = (0, styled_components_1.default)(framer_motion_1.motion.div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n\n  ", " {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n  }\n"], ["\n  ", "\n\n  ", " {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n  }\n"])), ModalStyles, (0, mixins_1.mediaQuery)("sm"));
 exports.StyledModalSmallContentWrapper = (0, styled_components_1.default)(framer_motion_1.motion.div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 100%;\n  position: absolute;\n  bottom: 0;\n  background-color: ", ";\n\n  ", " {\n      border: 2px solid ", ";\n      width: 50vw;\n      position: relative;\n      border-radius: 0.2rem;\n  }\n"], ["\n  width: 100%;\n  position: absolute;\n  bottom: 0;\n  background-color: ", ";\n\n  ", " {\n      border: 2px solid ", ";\n      width: 50vw;\n      position: relative;\n      border-radius: 0.2rem;\n  }\n"])), white, (0, mixins_1.mediaQuery)("sm"), white);
-exports.StyledModalSmallContent = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  padding: 0 2rem 4rem 2rem;\n\n  ", " {\n      position: relative;\n      display: flex;\n      flex-direction: column;\n      justify-content: flex-start;\n      padding: 0 4rem 4rem 4rem;\n  }\n"], ["\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  padding: 0 2rem 4rem 2rem;\n\n  ", " {\n      position: relative;\n      display: flex;\n      flex-direction: column;\n      justify-content: flex-start;\n      padding: 0 4rem 4rem 4rem;\n  }\n"])), (0, mixins_1.mediaQuery)("sm"));
+exports.StyledModalSmallContent = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  padding: 0 2rem 2rem 2rem;\n\n  ", " {\n      position: relative;\n      display: flex;\n      flex-direction: column;\n      justify-content: flex-start;\n      padding: 0 3rem 3rem 3rem;\n  }\n"], ["\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  padding: 0 2rem 2rem 2rem;\n\n  ", " {\n      position: relative;\n      display: flex;\n      flex-direction: column;\n      justify-content: flex-start;\n      padding: 0 3rem 3rem 3rem;\n  }\n"])), (0, mixins_1.mediaQuery)("sm"));
 exports.StyledModalSmallClose = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  width: 100%;\n  display: flex;\n  justify-content: flex-end;\n"], ["\n  width: 100%;\n  display: flex;\n  justify-content: flex-end;\n"])));
 exports.StyledModalSmallContentSubtitle = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  margin-top: 0.5rem;\n"], ["\n  margin-top: 0.5rem;\n"])));
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/dist/components/Modals/derivedComps/ModalConfirm/index.js

@@ -23,11 +23,16 @@ var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 var Buttons_1 = require("../../../Buttons");
 var ModalSmall_1 = require("../../ModalSmall");
-var StyledFlexWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  gap: 1rem;\n  align-items: center;\n"], ["\n  display: flex;\n  gap: 1rem;\n  align-items: center;\n"])));
+var StyledFlexWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  justify-content: ", ";\n  gap: 1rem;\n  align-items: center;\n"], ["\n  display: flex;\n  justify-content: ", ";\n  gap: 1rem;\n  align-items: center;\n"])), function (_a) {
+    var alignActions = _a.alignActions;
+    return alignActions === "right" ? 'flex-end' : '';
+});
 var ModalConfirm = function (_a) {
     var title = _a.title, subTitle = _a.subTitle, onClose = _a.onClose, _b = _a.onCloseText, onCloseText = _b === void 0 ? "Cancel" : _b, children = _a.children, onConfirm = _a.onConfirm, _c = _a.onConfirmText, onConfirmText = _c === void 0 ? "Delete" : _c;
     return (react_1.default.createElement(ModalSmall_1.ModalSmall, __assign({}, { title: title, subTitle: subTitle, onClose: onClose, children: children }),
-        react_1.default.createElement(StyledFlexWrapper, null,
+        react_1.default.createElement(StyledFlexWrapper
+        // alignActions={alignActions}
+        , null,
             react_1.default.createElement(Buttons_1.ButtonPrimary, { onClick: onConfirm }, onConfirmText),
             react_1.default.createElement(Buttons_1.ButtonSecondary, { onClick: onClose }, onCloseText))));
 };

package/dist/components/PDFInput/comps/PDFActions.d.ts

@@ -1,4 +1,5 @@
-export function PDFActions({ inputRef, parentOnChange, isInRTE }: {
+export function PDFActions({ id, inputRef, parentOnChange, isInRTE }: {
+    id: any;
     inputRef: any;
     parentOnChange: any;
     isInRTE: any;

package/dist/components/PDFInput/comps/PDFActions.js

@@ -18,11 +18,11 @@ exports.PDFActions = void 0;
 var react_1 = __importDefault(require("react"));
 var ActionMenu_1 = require("../../ActionMenu");
 var PDFActions = function (_a) {
-    var inputRef = _a.inputRef, parentOnChange = _a.parentOnChange, isInRTE = _a.isInRTE;
+    var id = _a.id, inputRef = _a.inputRef, parentOnChange = _a.parentOnChange, isInRTE = _a.isInRTE;
     return (react_1.default.createElement("div", { style: __assign({}, (isInRTE ? { display: "none" } : {})) },
         react_1.default.createElement(ActionMenu_1.ActionMenu, { popOutOfOverflowHiddenParent: true, ButtonComp: "ButtonGhost", M: true, align: 'right', iconSize: 'M', actions: [
                 {
-                    id: "replacePDF",
+                    id: "".concat(id, "_replacePDF"),
                     display: "Replace PDF",
                     onClick: function () {
                         inputRef.current.click();

package/dist/components/PDFInput/index.js

@@ -112,7 +112,7 @@ function PDFInput(_a) {
                         : "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 },
                 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({}, { isInRTE: isInRTE, inputRef: inputRef, parentOnChange: parentOnChange }))))); })),
+                    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); } })));
 }

package/dist/index.d.ts

@@ -28,7 +28,7 @@ export { PercentCompletedPie } from "./components/PercentCompletedPie";
 export { Divider } from "./components/Divider";
 export { SkeletonLoader } from "./components/LoadersAndProgress/SkeletonLoader";
 export { ModalConfirm } from "./components/Modals/derivedComps/ModalConfirm";
-export { ModalLarge } from "./components/Modals/ModalLarge";
+export { Modal } from "./components/Modals/Modal";
 export { ModalSmall } from "./components/Modals/ModalSmall";
 export { EmptyStates } from "./components/EmptyStates";
 export { HomeCover } from "./components/HomeCover";

package/dist/index.js

@@ -17,7 +17,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.BannerAlert = exports.IFrameInput = exports.PDFInput = exports.AudioInput = exports.VideoInput = exports.ProfileImageInput = exports.ImageInput = exports.MetaBlock = exports.HintsProvider = exports.genTagComp = exports.generateOptions = exports.OptionsSingle = exports.DropdownMulti = exports.DropdownSingle = exports.parseCardConfig = exports.ListProfile = exports.CardProfile = exports.CardEmbed = exports.ListContent = exports.CardContent = exports.DateTimeRangePicker = exports.DateTimePicker = exports.TimeRangePicker = exports.TimePicker = exports.DateRangePicker = exports.DatePicker = exports.TextLoader = exports.BarChart = exports.PageScrollIndicator = exports.HomeCover = exports.EmptyStates = exports.ModalSmall = exports.ModalLarge = exports.ModalConfirm = exports.SkeletonLoader = exports.Divider = exports.PercentCompletedPie = exports.Accordion = exports.ActionMenu = exports.Tooltip = exports.OKELink = exports.UserRoleBadge = exports.Section = exports.LoaderOverlay = exports.Loader = exports.ProgressBar = exports.LoaderCircle = exports.icons = exports.colors = exports.GlobalStyles = void 0;
+exports.BannerAlert = exports.IFrameInput = exports.PDFInput = exports.AudioInput = exports.VideoInput = exports.ProfileImageInput = exports.ImageInput = exports.MetaBlock = exports.HintsProvider = exports.genTagComp = exports.generateOptions = exports.OptionsSingle = exports.DropdownMulti = exports.DropdownSingle = exports.parseCardConfig = exports.ListProfile = exports.CardProfile = exports.CardEmbed = exports.ListContent = exports.CardContent = exports.DateTimeRangePicker = exports.DateTimePicker = exports.TimeRangePicker = exports.TimePicker = exports.DateRangePicker = exports.DatePicker = exports.TextLoader = exports.BarChart = exports.PageScrollIndicator = exports.HomeCover = exports.EmptyStates = exports.ModalSmall = exports.Modal = exports.ModalConfirm = exports.SkeletonLoader = exports.Divider = exports.PercentCompletedPie = exports.Accordion = exports.ActionMenu = exports.Tooltip = exports.OKELink = exports.UserRoleBadge = exports.Section = exports.LoaderOverlay = exports.Loader = exports.ProgressBar = exports.LoaderCircle = exports.icons = exports.colors = exports.GlobalStyles = void 0;
 exports.styledOKELinkCSS = exports.SimpleTable = exports.ModalConfirmAction = exports.BannerProvider = exports.useBannerContext = exports.BannerContext = exports.BannerInfo = void 0;
 //css and styling related ( styled-components )
 var globalStyles_1 = require("./globalStyles");
@@ -70,8 +70,8 @@ var SkeletonLoader_1 = require("./components/LoadersAndProgress/SkeletonLoader")
 Object.defineProperty(exports, "SkeletonLoader", { enumerable: true, get: function () { return SkeletonLoader_1.SkeletonLoader; } });
 var ModalConfirm_1 = require("./components/Modals/derivedComps/ModalConfirm");
 Object.defineProperty(exports, "ModalConfirm", { enumerable: true, get: function () { return ModalConfirm_1.ModalConfirm; } });
-var ModalLarge_1 = require("./components/Modals/ModalLarge");
-Object.defineProperty(exports, "ModalLarge", { enumerable: true, get: function () { return ModalLarge_1.ModalLarge; } });
+var Modal_1 = require("./components/Modals/Modal");
+Object.defineProperty(exports, "Modal", { enumerable: true, get: function () { return Modal_1.Modal; } });
 var ModalSmall_1 = require("./components/Modals/ModalSmall");
 Object.defineProperty(exports, "ModalSmall", { enumerable: true, get: function () { return ModalSmall_1.ModalSmall; } });
 var EmptyStates_1 = require("./components/EmptyStates");

package/package.json

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