magneto365.ui 2.66.0 → 2.68.0

package/dist/cjs/index.js

@@ -221,10 +221,31 @@ var ResponsiveContextProvider = function (_a) {
     return React__default["default"].createElement(ResponsiveContext.Provider, { value: { dim: dim } }, children);
 };
 
+var isClient = typeof window !== 'undefined';
+var isServer = !isClient;
+
+var ContainerContext = React.createContext({
+    container: isClient ? window.document.body : null
+});
+var ContainerContextProvider = function (_a) {
+    var children = _a.children, _b = _a.container, container = _b === void 0 ? null : _b;
+    var ctx = React.useMemo(function () {
+        var element = container;
+        if (!element && isClient) {
+            element = document.body;
+        }
+        return {
+            container: element
+        };
+    }, [container]);
+    return React__default["default"].createElement(ContainerContext.Provider, { value: ctx }, children);
+};
+
 var ContextAppProvider = function (_a) {
-    var children = _a.children, device = _a.device;
+    var children = _a.children, device = _a.device, container = _a.container;
     return (React__default["default"].createElement(EventDispatcherContextProvider, null,
-        React__default["default"].createElement(ResponsiveContextProvider, { device: device }, children)));
+        React__default["default"].createElement(ContainerContextProvider, { container: container },
+            React__default["default"].createElement(ResponsiveContextProvider, { device: device }, children))));
 };
 
 var screenList = Object.entries(screenSize).sort(function (a, b) { return a[1] - b[1]; });
@@ -295,7 +316,7 @@ var classNames = {
     }
 };
 
-var cx$1c = classNames.bind(styles$2Y);
+var cx$1d = classNames.bind(styles$2Y);
 var Component$37 = function (_a) {
     var fallbackIcon = _a.fallbackIcon, _b = _a.showDefaultFallback, showDefaultFallback = _b === void 0 ? true : _b, icon = _a.icon, _c = _a.hover, hover = _c === void 0 ? false : _c, size = _a.size, className = _a.className, alt = _a.alt, isRotate = _a.isRotate;
     var _d = React.useState(false), imageError = _d[0], setImageError = _d[1];
@@ -303,11 +324,11 @@ var Component$37 = function (_a) {
         setImageError(true);
     };
     var iconSrc = React.useMemo(function () { return (!imageError ? icon !== null && icon !== void 0 ? icon : undefined : fallbackIcon); }, [fallbackIcon, imageError, icon]);
-    var isHover = hover ? cx$1c('magneto-ui-hover') : '';
+    var isHover = hover ? cx$1d('magneto-ui-hover') : '';
     var customStyle = size ? { width: size + 'px' } : {};
     if (!iconSrc && !showDefaultFallback)
         return null;
-    return (React__default["default"].createElement(React.Fragment, null, icon && (React__default["default"].createElement("img", { "data-name": "icon", style: customStyle, className: cx$1c('magneto-ui-icon', { 'magneto-ui-rotate': isRotate }, isHover, className), src: iconSrc, alt: alt !== null && alt !== void 0 ? alt : "".concat(icon, " icon item"), loading: "lazy", width: '25px', onError: handleError }))));
+    return (React__default["default"].createElement(React.Fragment, null, icon && (React__default["default"].createElement("img", { "data-name": "icon", style: customStyle, className: cx$1d('magneto-ui-icon', { 'magneto-ui-rotate': isRotate }, isHover, className), src: iconSrc, alt: alt !== null && alt !== void 0 ? alt : "".concat(icon, " icon item"), loading: "lazy", width: '25px', onError: handleError }))));
 };
 /**
  * Atom UI component of Icon for general purpose
@@ -1653,16 +1674,16 @@ var ButtonLink = Component$30;
 
 var styles$2Q = {"checkbox":"mg_checkbox_checkbox_1w9e7","checkbox--inline":"mg_checkbox_checkbox--inline_1w9e7","checkbox--block":"mg_checkbox_checkbox--block_1w9e7","checkbox--background":"mg_checkbox_checkbox--background_1w9e7","checkbox--checked":"mg_checkbox_checkbox--checked_1w9e7","custom-checked":"mg_checkbox_custom-checked_1w9e7","checkbox__box":"mg_checkbox_checkbox_box_1w9e7","checkbox__box--checked":"mg_checkbox_checkbox_box--checked_1w9e7"};
 
-var cx$1b = classNames.bind(styles$2Q);
+var cx$1c = classNames.bind(styles$2Q);
 var defaultCheck = function (_a) {
     var type = _a.type, checked = _a.checked;
     if (type === 'background')
         return;
-    return (React__default["default"].createElement("div", { "aria-checked": checked, role: "checkbox", className: cx$1b('checkbox__box', { 'checkbox__box--checked': checked }) }, checked ? React__default["default"].createElement(React__default["default"].Fragment, null, "\u2713") : null));
+    return (React__default["default"].createElement("div", { "aria-checked": checked, role: "checkbox", className: cx$1c('checkbox__box', { 'checkbox__box--checked': checked }) }, checked ? React__default["default"].createElement(React__default["default"].Fragment, null, "\u2713") : null));
 };
 var Component$2$ = function (_a) {
     var id = _a.id, checked = _a.checked, _b = _a.onChange, onChange = _b === void 0 ? stubTrue : _b, children = _a.children, _c = _a.type, type = _c === void 0 ? 'box' : _c, className = _a.className, _d = _a.display, display = _d === void 0 ? 'inline' : _d, _e = _a.renderCheck, renderCheck = _e === void 0 ? defaultCheck : _e, rest = __rest(_a, ["id", "checked", "onChange", "children", "type", "className", "display", "renderCheck"]);
-    return (React__default["default"].createElement("label", { className: cx$1b('checkbox', "checkbox--".concat(display), className, {
+    return (React__default["default"].createElement("label", { className: cx$1c('checkbox', "checkbox--".concat(display), className, {
             'checkbox--checked': checked,
             'checkbox--background': type === 'background'
         }), "data-name": "checkbox-container", htmlFor: id },
@@ -1707,17 +1728,17 @@ var context$2 = /*#__PURE__*/Object.freeze({
 
 var styles$2P = {"magneto-ui-collapse-body":"mg_collapse_body_magneto-ui-collapse-body_1sj1m","magneto-ui-collapse-body--visible":"mg_collapse_body_magneto-ui-collapse-body--visible_1sj1m","magneto-ui-collapse-body__container":"mg_collapse_body_magneto-ui-collapse-body_container_1sj1m","magneto-ui-collapse-body__container--visible":"mg_collapse_body_magneto-ui-collapse-body_container--visible_1sj1m","magneto-ui-collapse-body__content":"mg_collapse_body_magneto-ui-collapse-body_content_1sj1m","magneto-ui-collapse-body__content--visible":"mg_collapse_body_magneto-ui-collapse-body_content--visible_1sj1m"};
 
-var cx$1a = classNames.bind(styles$2P);
+var cx$1b = classNames.bind(styles$2P);
 var Component$2_ = function (_a) {
     var className = _a.className, children = _a.children, props = __rest(_a, ["className", "children"]);
     var open = useCollapse().open;
-    return (React__default["default"].createElement("div", __assign({}, props, { className: cx$1a('magneto-ui-collapse-body', {
+    return (React__default["default"].createElement("div", __assign({}, props, { className: cx$1b('magneto-ui-collapse-body', {
             'magneto-ui-collapse-body--visible': open
         }) }),
-        React__default["default"].createElement("div", { className: cx$1a('magneto-ui-collapse-body__container', {
+        React__default["default"].createElement("div", { className: cx$1b('magneto-ui-collapse-body__container', {
                 'magneto-ui-collapse-body__container--visible': open
             }) },
-            React__default["default"].createElement("div", { className: cx$1a('magneto-ui-collapse-body__content', {
+            React__default["default"].createElement("div", { className: cx$1b('magneto-ui-collapse-body__content', {
                     'magneto-ui-collapse-body__content--visible': open
                 }, className) }, children))));
 };
@@ -1728,10 +1749,10 @@ var CollapseBody = Component$2_;
 
 var styles$2O = {"magneto-ui-collapse-header":"mg_collapse_header_magneto-ui-collapse-header_1wc3x"};
 
-var cx$19 = classNames.bind(styles$2O);
+var cx$1a = classNames.bind(styles$2O);
 var Component$2Z = function (_a) {
     var children = _a.children, className = _a.className, props = __rest(_a, ["children", "className"]);
-    return (React__default["default"].createElement("header", __assign({ className: cx$19('magneto-ui-collapse-header', className) }, props), children));
+    return (React__default["default"].createElement("header", __assign({ className: cx$1a('magneto-ui-collapse-header', className) }, props), children));
 };
 /**
  * Atom UI component child of Collapse
@@ -1740,7 +1761,7 @@ var CollapseHeader = Component$2Z;
 
 var styles$2N = {"magneto-ui-collapse-toggler":"mg_collapse_toggler_magneto-ui-collapse-toggler_1ngmx"};
 
-var cx$18 = classNames.bind(styles$2N);
+var cx$19 = classNames.bind(styles$2N);
 var Component$2Y = function (_a) {
     var children = _a.children, className = _a.className, onClick = _a.onClick, props = __rest(_a, ["children", "className", "onClick"]);
     var _b = useCollapse(), open = _b.open, onChangeOpen = _b.onChangeOpen;
@@ -1749,7 +1770,7 @@ var Component$2Y = function (_a) {
             onClick(evt);
         onChangeOpen(!open);
     }, [open, onChangeOpen, onClick]);
-    return (React__default["default"].createElement("button", __assign({}, props, { onClick: handleOnClick, className: cx$18('magneto-ui-collapse-toggler', className) }), children));
+    return (React__default["default"].createElement("button", __assign({}, props, { onClick: handleOnClick, className: cx$19('magneto-ui-collapse-toggler', className) }), children));
 };
 /**
  * Atom UI component child of Collapse
@@ -2056,10 +2077,10 @@ var Image = function (_a) {
 
 var style$14 = {"magneto-ui-input-file-button":"mg_input_file_button_magneto-ui-input-file-button_18zx0"};
 
-var cx$17 = classNames.bind(style$14);
+var cx$18 = classNames.bind(style$14);
 var Component$2P = function (_a) {
     var children = _a.children, className = _a.className, props = __rest(_a, ["children", "className"]);
-    return (React__default["default"].createElement("button", __assign({ className: cx$17('magneto-ui-input-file-button', className) }, props), children));
+    return (React__default["default"].createElement("button", __assign({ className: cx$18('magneto-ui-input-file-button', className) }, props), children));
 };
 /**
  * Atom UI child component of Input File
@@ -2068,10 +2089,10 @@ var InputFileButton = Component$2P;
 
 var style$13 = {"magneto-ui-input-file-container":"mg_input_file_container_magneto-ui-input-file-container_1b7ef"};
 
-var cx$16 = classNames.bind(style$13);
+var cx$17 = classNames.bind(style$13);
 var Component$2O = function (_a) {
     var className = _a.className, children = _a.children, props = __rest(_a, ["className", "children"]);
-    return (React__default["default"].createElement("div", __assign({ className: cx$16('magneto-ui-input-file-container', className) }, props), children));
+    return (React__default["default"].createElement("div", __assign({ className: cx$17('magneto-ui-input-file-container', className) }, props), children));
 };
 /**
  * Atom UI component of Input File
@@ -2080,7 +2101,7 @@ var InputFileContainer = Component$2O;
 
 var style$12 = {"magneto-ui-input-file":"mg_input_file_magneto-ui-input-file_18kpr"};
 
-var cx$15 = classNames.bind(style$12);
+var cx$16 = classNames.bind(style$12);
 var Component$2N = function (_a) {
     var children = _a.children, className = _a.className, onChange = _a.onChange, props = __rest(_a, ["children", "className", "onChange"]);
     var inputFileRef = React.useRef(null);
@@ -2104,9 +2125,9 @@ var Component$2N = function (_a) {
     var handleDragOver = function (event) {
         event.preventDefault();
     };
-    return (React__default["default"].createElement("div", { className: cx$15(className), onClick: handleFileClick, onDrop: handleFileDrop, onDragOver: handleDragOver },
+    return (React__default["default"].createElement("div", { className: cx$16(className), onClick: handleFileClick, onDrop: handleFileDrop, onDragOver: handleDragOver },
         children,
-        React__default["default"].createElement("input", __assign({ className: cx$15('magneto-ui-input-file'), onChange: handleFileChange, ref: inputFileRef, type: "file" }, props))));
+        React__default["default"].createElement("input", __assign({ className: cx$16('magneto-ui-input-file'), onChange: handleFileChange, ref: inputFileRef, type: "file" }, props))));
 };
 /**
  * Atom UI component of Input File
@@ -2544,13 +2565,13 @@ var Radio = Component$2x;
 
 var styles$2s = {"magneto-ui-rating-badge__container":"mg_rating_badge_magneto-ui-rating-badge_container_1b19u","magneto-ui-rating-badge__icon":"mg_rating_badge_magneto-ui-rating-badge_icon_1b19u","magneto-ui-rating-badge__score":"mg_rating_badge_magneto-ui-rating-badge_score_1b19u"};
 
-var cx$14 = classNames.bind(styles$2s);
+var cx$15 = classNames.bind(styles$2s);
 var Component$2w = function (_a) {
     var score = _a.score;
-    return (React__default["default"].createElement("div", { className: cx$14('magneto-ui-rating-badge') },
-        React__default["default"].createElement("div", { className: cx$14('magneto-ui-rating-badge__container') },
-            React__default["default"].createElement("img", { src: StarBoldYellow, alt: StarBoldYellow, className: cx$14('magneto-ui-rating-badge__icon') }),
-            React__default["default"].createElement("span", { className: cx$14('magneto-ui-rating-badge__score') }, score))));
+    return (React__default["default"].createElement("div", { className: cx$15('magneto-ui-rating-badge') },
+        React__default["default"].createElement("div", { className: cx$15('magneto-ui-rating-badge__container') },
+            React__default["default"].createElement("img", { src: StarBoldYellow, alt: StarBoldYellow, className: cx$15('magneto-ui-rating-badge__icon') }),
+            React__default["default"].createElement("span", { className: cx$15('magneto-ui-rating-badge__score') }, score))));
 };
 /**
  * Atom UI component of Rating Badge
@@ -2719,7 +2740,7 @@ var ToggleButton = Component$2s;
 
 var styles$2m = {"magneto-ui-typography":"mg_typography_magneto-ui-typography_tpbip","magneto-ui-typography--size-xs":"mg_typography_magneto-ui-typography--size-xs_tpbip","magneto-ui-typography--size-sm":"mg_typography_magneto-ui-typography--size-sm_tpbip","magneto-ui-typography--size-md":"mg_typography_magneto-ui-typography--size-md_tpbip","magneto-ui-typography--size-lg":"mg_typography_magneto-ui-typography--size-lg_tpbip","magneto-ui-typography--size-xl":"mg_typography_magneto-ui-typography--size-xl_tpbip","magneto-ui-typography--size-xl-2":"mg_typography_magneto-ui-typography--size-xl-2_tpbip","magneto-ui-typography--size-xl-3":"mg_typography_magneto-ui-typography--size-xl-3_tpbip","magneto-ui-typography--size-xl-4":"mg_typography_magneto-ui-typography--size-xl-4_tpbip","magneto-ui-typography--size-xl-5":"mg_typography_magneto-ui-typography--size-xl-5_tpbip","magneto-ui-typography--size-xl-6":"mg_typography_magneto-ui-typography--size-xl-6_tpbip","magneto-ui-typography--size-xl-7":"mg_typography_magneto-ui-typography--size-xl-7_tpbip","magneto-ui-typography--weight-thin":"mg_typography_magneto-ui-typography--weight-thin_tpbip","magneto-ui-typography--weight-extra-light":"mg_typography_magneto-ui-typography--weight-extra-light_tpbip","magneto-ui-typography--weight-light":"mg_typography_magneto-ui-typography--weight-light_tpbip","magneto-ui-typography--weight-normal":"mg_typography_magneto-ui-typography--weight-normal_tpbip","magneto-ui-typography--weight-medium":"mg_typography_magneto-ui-typography--weight-medium_tpbip","magneto-ui-typography--weight-semi-bold":"mg_typography_magneto-ui-typography--weight-semi-bold_tpbip","magneto-ui-typography--weight-bold":"mg_typography_magneto-ui-typography--weight-bold_tpbip","magneto-ui-typography--weight-extra-bold":"mg_typography_magneto-ui-typography--weight-extra-bold_tpbip","magneto-ui-typography--weight-black":"mg_typography_magneto-ui-typography--weight-black_tpbip","magneto-ui-typography--color-gray":"mg_typography_magneto-ui-typography--color-gray_tpbip","magneto-ui-typography--color-white":"mg_typography_magneto-ui-typography--color-white_tpbip","magneto-ui-typography--color-black":"mg_typography_magneto-ui-typography--color-black_tpbip","magneto-ui-typography--color-green":"mg_typography_magneto-ui-typography--color-green_tpbip","magneto-ui-typography--color-blue":"mg_typography_magneto-ui-typography--color-blue_tpbip","magneto-ui-typography--code":"mg_typography_magneto-ui-typography--code_tpbip","magneto-ui-typography--delete":"mg_typography_magneto-ui-typography--delete_tpbip","magneto-ui-typography--italic":"mg_typography_magneto-ui-typography--italic_tpbip","magneto-ui-typography--keyboard":"mg_typography_magneto-ui-typography--keyboard_tpbip","magneto-ui-typography--mark":"mg_typography_magneto-ui-typography--mark_tpbip","magneto-ui-typography--strong":"mg_typography_magneto-ui-typography--strong_tpbip","magneto-ui-typography--underline":"mg_typography_magneto-ui-typography--underline_tpbip","magneto-ui-typography--ellipsis":"mg_typography_magneto-ui-typography--ellipsis_tpbip","magneto-ui-typography--ellipsis-multiline":"mg_typography_magneto-ui-typography--ellipsis-multiline_tpbip"};
 
-var cx$13 = classNames.bind(styles$2m);
+var cx$14 = classNames.bind(styles$2m);
 var typographyStyles = function (_a) {
     var _b;
     var className = _a.className, color = _a.color, ellipsis = _a.ellipsis, size = _a.size, style = _a.style, weight = _a.weight;
@@ -2730,7 +2751,7 @@ var typographyStyles = function (_a) {
         _b['magneto-ui-typography--ellipsis'] = ellipsis === true,
         _b['magneto-ui-typography--ellipsis-multiline'] = typeof ellipsis === 'object' && typeof ellipsis.rows === 'number',
         _b);
-    var finalClassName = cx$13('magneto-ui-typography', customizedClassName, className);
+    var finalClassName = cx$14('magneto-ui-typography', customizedClassName, className);
     var finalStyle = __assign(__assign(__assign({}, (typeof size === 'number' && { '--size': "".concat(size, "px") })), (typeof weight === 'number' && { '--weight': weight })), (typeof ellipsis === 'object' && ellipsis.rows && { '--ellipsis-lines': ellipsis.rows }));
     return {
         className: finalClassName,
@@ -2748,11 +2769,11 @@ var applyWrappers = function (children, props) {
         props.underline ? { tag: 'u', className: 'magneto-ui-typography--underline' } : null
     ].filter(Boolean);
     if (wrappers.length === 1) {
-        return React.createElement(wrappers[0].tag, { className: cx$13(wrappers[0].className) }, children);
+        return React.createElement(wrappers[0].tag, { className: cx$14(wrappers[0].className) }, children);
     }
     return wrappers.reduce(function (acc, _a) {
         var tag = _a.tag, className = _a.className;
-        return React.createElement(tag, { className: cx$13(className) }, acc);
+        return React.createElement(tag, { className: cx$14(className) }, acc);
     }, children);
 };
 var OMITTED_PROPS = [
@@ -2987,44 +3008,44 @@ var Alert = Component$2l;
 
 var styles$2j = {"alert-modal":"mg_alert_job_modal_alert-modal_oyuqf","alert-modal__mobile":"mg_alert_job_modal_alert-modal_mobile_oyuqf","alert-modal__header":"mg_alert_job_modal_alert-modal_header_oyuqf","alert-modal__body":"mg_alert_job_modal_alert-modal_body_oyuqf","alert-modal__footer":"mg_alert_job_modal_alert-modal_footer_oyuqf","alert-modal__icon":"mg_alert_job_modal_alert-modal_icon_oyuqf","alert-modal__title":"mg_alert_job_modal_alert-modal_title_oyuqf","alert-modal__checkbox":"mg_alert_job_modal_alert-modal_checkbox_oyuqf","alert-modal__button":"mg_alert_job_modal_alert-modal_button_oyuqf"};
 
-var cx$12 = classNames.bind(styles$2j);
+var cx$13 = classNames.bind(styles$2j);
 var AlertJobModalIcon = function (_a) {
     var src = _a.src, _b = _a.size, size = _b === void 0 ? 50 : _b, alt = _a.alt, className = _a.className;
     var customWidth = size ? { width: size + 'px' } : {};
-    return (React__default["default"].createElement("img", { style: customWidth, className: cx$12('alert-job__icon', className), src: src !== null && src !== void 0 ? src : Urgent, alt: alt !== null && alt !== void 0 ? alt : "icon-item", loading: "lazy" }));
+    return (React__default["default"].createElement("img", { style: customWidth, className: cx$13('alert-job__icon', className), src: src !== null && src !== void 0 ? src : Urgent, alt: alt !== null && alt !== void 0 ? alt : "icon-item", loading: "lazy" }));
 };
 
-var cx$11 = classNames.bind(styles$2j);
+var cx$12 = classNames.bind(styles$2j);
 var AlertJobModalHeader = function (_a) {
     var className = _a.className, children = _a.children;
-    return React__default["default"].createElement("div", { className: cx$11('alert-modal__header', className) }, children);
+    return React__default["default"].createElement("div", { className: cx$12('alert-modal__header', className) }, children);
 };
 
-var cx$10 = classNames.bind(styles$2j);
+var cx$11 = classNames.bind(styles$2j);
 var AlertJobModalTitle = function (_a) {
     var title = _a.title, subtitle = _a.subtitle, className = _a.className, children = _a.children;
-    return (React__default["default"].createElement("div", { className: cx$10('alert-modal__title', className) },
+    return (React__default["default"].createElement("div", { className: cx$11('alert-modal__title', className) },
         React__default["default"].createElement("p", null, subtitle),
         React__default["default"].createElement("p", null, "\u201C".concat(title, "\u201D")),
         children));
 };
 
-var cx$$ = classNames.bind(styles$2j);
+var cx$10 = classNames.bind(styles$2j);
 var AlertJobModalBody = function (_a) {
     var className = _a.className, children = _a.children;
-    return React__default["default"].createElement("div", { className: cx$$('alert-modal__body', className) }, children);
+    return React__default["default"].createElement("div", { className: cx$10('alert-modal__body', className) }, children);
 };
 
-var cx$_ = classNames.bind(styles$2j);
+var cx$$ = classNames.bind(styles$2j);
 var AlertJobModalFooter = function (_a) {
     var className = _a.className, children = _a.children;
-    return React__default["default"].createElement("div", { className: cx$_('alert-modal__footer', className) }, children);
+    return React__default["default"].createElement("div", { className: cx$$('alert-modal__footer', className) }, children);
 };
 
-var cx$Z = classNames.bind(styles$2j);
+var cx$_ = classNames.bind(styles$2j);
 var AlertJobModalButton = function (_a) {
     var className = _a.className, children = _a.children, _b = _a.icon, icon = _b === void 0 ? ArrowRightWhite : _b, _c = _a.sizeIcon, sizeIcon = _c === void 0 ? 14 : _c, buttonProps = __rest(_a, ["className", "children", "icon", "sizeIcon"]);
-    return (React__default["default"].createElement("button", __assign({ className: cx$Z('alert-modal__button', className) }, buttonProps),
+    return (React__default["default"].createElement("button", __assign({ className: cx$_('alert-modal__button', className) }, buttonProps),
         React__default["default"].createElement("p", null, children),
         React__default["default"].createElement(IconItem, { alt: "arrow-icon", hover: false, icon: icon, size: sizeIcon })));
 };
@@ -3032,26 +3053,27 @@ var AlertJobModalButton = function (_a) {
 var DrawerPortal = function (_a) {
     var children = _a.children;
     var portalNode = React.useRef(null);
+    var container = React.useContext(ContainerContext).container;
     var _b = React.useState(false), mounted = _b[0], setMounted = _b[1];
     React.useEffect(function () {
-        if (!document)
+        if (isServer || !container)
             return;
         portalNode.current = document.createElement('div');
         portalNode.current.classList.add('magneto-ui-drawer');
-        document.body.appendChild(portalNode.current);
+        container.appendChild(portalNode.current);
         setMounted(true);
         return function () {
             if (portalNode.current) {
-                document.body.removeChild(portalNode.current);
+                container.removeChild(portalNode.current);
             }
         };
-    }, []);
+    }, [container]);
     return mounted && portalNode.current ? ReactDOM__default["default"].createPortal(children, portalNode.current) : null;
 };
 
 var style$W = {"magneto-ui-mobile-drawer":"mg_mobile_drawer_magneto-ui-mobile-drawer_1e2s0","magneto-ui-close-button":"mg_mobile_drawer_magneto-ui-close-button_1e2s0","magneto-ui-container":"mg_mobile_drawer_magneto-ui-container_1e2s0","background-drawer":"mg_mobile_drawer_background-drawer_1e2s0","fadeIn":"mg_mobile_drawer_fadeIn_1e2s0","show":"mg_mobile_drawer_show_1e2s0","hidden":"mg_mobile_drawer_hidden_1e2s0"};
 
-var cx$Y = classNames.bind(style$W);
+var cx$Z = classNames.bind(style$W);
 var Component$2k = function (_a) {
     var onClose = _a.onClose, isOpen = _a.isOpen, children = _a.children, _b = _a.className, className = _b === void 0 ? '' : _b, _c = _a.blockBackgroundClose, blockBackgroundClose = _c === void 0 ? false : _c, _d = _a.backgroundClassName, backgroundClassName = _d === void 0 ? '' : _d;
     var _e = React.useState(false), showContent = _e[0], setShowContent = _e[1];
@@ -3078,12 +3100,12 @@ var Component$2k = function (_a) {
         };
     }, [isOpen]);
     return (React__default["default"].createElement(React__default["default"].Fragment, null, renderPortal && (React__default["default"].createElement(DrawerPortal, null,
-        React__default["default"].createElement("div", { className: cx$Y('magneto-ui-mobile-drawer') },
-            React__default["default"].createElement("aside", { className: cx$Y(showMenu, className) },
-                React__default["default"].createElement("button", { "data-name": "close-drawer", title: "close-modal", className: cx$Y('magneto-ui-close-button'), onClick: onClose },
+        React__default["default"].createElement("div", { className: cx$Z('magneto-ui-mobile-drawer') },
+            React__default["default"].createElement("aside", { className: cx$Z(showMenu, className) },
+                React__default["default"].createElement("button", { "data-name": "close-drawer", title: "close-modal", className: cx$Z('magneto-ui-close-button'), onClick: onClose },
                     React__default["default"].createElement(IconItem, { icon: Add, hover: false })),
-                React__default["default"].createElement("div", { className: cx$Y('magneto-ui-container') }, children)),
-            isOpen && (React__default["default"].createElement("span", { className: cx$Y('background-drawer', backgroundClassName), onClick: blockBackgroundClose ? function () { return null; } : onClose })))))));
+                React__default["default"].createElement("div", { className: cx$Z('magneto-ui-container') }, children)),
+            isOpen && (React__default["default"].createElement("span", { className: cx$Z('background-drawer', backgroundClassName), onClick: blockBackgroundClose ? function () { return null; } : onClose })))))));
 };
 /**
  * Molecule UI component for Mobile Drawer
@@ -3094,21 +3116,22 @@ var styles$2i = {"magneto-ui-modal":"mg_modal_magneto-ui-modal_1ffsw","magneto-u
 
 var ModalPortal = function (_a) {
     var children = _a.children;
+    var container = React.useContext(ContainerContext).container;
     var portalNode = React.useRef(null);
     var _b = React.useState(false), mounted = _b[0], setMounted = _b[1];
     React.useEffect(function () {
-        if (!document)
+        if (isServer || !container)
             return;
         portalNode.current = document.createElement('div');
         portalNode.current.classList.add('modal-ui-drawer');
-        document.body.appendChild(portalNode.current);
+        container.appendChild(portalNode.current);
         setMounted(true);
         return function () {
             if (portalNode.current) {
-                document.body.removeChild(portalNode.current);
+                container.removeChild(portalNode.current);
             }
         };
-    }, []);
+    }, [container]);
     return mounted && portalNode.current ? ReactDOM__default["default"].createPortal(children, portalNode.current) : null;
 };
 
@@ -3150,10 +3173,10 @@ var Component$2j = function (_a) {
 };
 var ModalResponsive = Component$2j;
 
-var cx$X = classNames.bind(styles$2j);
+var cx$Y = classNames.bind(styles$2j);
 var Component$2i = function (_a) {
     var children = _a.children, className = _a.className, mobileClassName = _a.mobileClassName, open = _a.open, onClose = _a.onClose;
-    return (React__default["default"].createElement(ModalResponsive, { open: open, onClose: onClose, modalClassName: cx$X('alert-modal', className), mobileDrawerClassName: cx$X('alert-modal__mobile', mobileClassName) }, children));
+    return (React__default["default"].createElement(ModalResponsive, { open: open, onClose: onClose, modalClassName: cx$Y('alert-modal', className), mobileDrawerClassName: cx$Y('alert-modal__mobile', mobileClassName) }, children));
 };
 var AlertJobModal = Object.assign(Component$2i, {
     Header: AlertJobModalHeader,
@@ -3168,15 +3191,15 @@ var styles$2h = {"alert-job":"mg_alert_job_status_alert-job_1qnyy","normal":"mg_
 
 var styles$2g = {"alert-job__content":"mg_alert_job_status_container_alert-job_content_g6vk0"};
 
-var cx$W = classNames.bind(styles$2g);
+var cx$X = classNames.bind(styles$2g);
 var AlertJobStatusContainer = function (_a) {
     var className = _a.className, children = _a.children;
-    return React__default["default"].createElement("div", { className: cx$W('alert-job__content', className) }, children);
+    return React__default["default"].createElement("div", { className: cx$X('alert-job__content', className) }, children);
 };
 
 var styles$2f = {"alert-job__icon":"mg_alert_job_status_icon_alert-job_icon_1d1sg"};
 
-var cx$V = classNames.bind(styles$2f);
+var cx$W = classNames.bind(styles$2f);
 var alertIcons = {
     success: Checked2,
     warning: Warning3D
@@ -3185,23 +3208,23 @@ var AlertJobStatusIcon = function (_a) {
     var src = _a.src, _b = _a.size, size = _b === void 0 ? 34 : _b, alt = _a.alt, className = _a.className, _c = _a.type, type = _c === void 0 ? 'warning' : _c;
     var customWidth = size ? { width: size + 'px' } : {};
     var iconByType = React.useMemo(function () { return alertIcons[type]; }, [type]);
-    return (React__default["default"].createElement("img", { style: customWidth, className: cx$V('alert-job__icon', className), src: src !== null && src !== void 0 ? src : iconByType, alt: alt !== null && alt !== void 0 ? alt : "icon-item", loading: "lazy" }));
+    return (React__default["default"].createElement("img", { style: customWidth, className: cx$W('alert-job__icon', className), src: src !== null && src !== void 0 ? src : iconByType, alt: alt !== null && alt !== void 0 ? alt : "icon-item", loading: "lazy" }));
 };
 
 var styles$2e = {"alert-modal__button":"mg_alert_job_status_button_alert-modal_button_d8bsk"};
 
-var cx$U = classNames.bind(styles$2e);
+var cx$V = classNames.bind(styles$2e);
 var AlertJobStatusButton = function (_a) {
     var className = _a.className, children = _a.children, _b = _a.icon, icon = _b === void 0 ? ArrowRightWhite : _b, _c = _a.sizeIcon, sizeIcon = _c === void 0 ? 14 : _c, buttonProps = __rest(_a, ["className", "children", "icon", "sizeIcon"]);
-    return (React__default["default"].createElement("button", __assign({ className: cx$U('alert-modal__button', className) }, buttonProps),
+    return (React__default["default"].createElement("button", __assign({ className: cx$V('alert-modal__button', className) }, buttonProps),
         React__default["default"].createElement("p", null, children),
         React__default["default"].createElement(IconItem, { alt: "arrow-icon", hover: false, icon: icon, size: sizeIcon })));
 };
 
-var cx$T = classNames.bind(styles$2h);
+var cx$U = classNames.bind(styles$2h);
 var Component$2h = function (_a) {
     var children = _a.children, className = _a.className, type = _a.type;
-    return React__default["default"].createElement("div", { className: cx$T('alert-job', className, type) }, children);
+    return React__default["default"].createElement("div", { className: cx$U('alert-job', className, type) }, children);
 };
 var AlertJobStatus = Object.assign(Component$2h, {
     Container: AlertJobStatusContainer,
@@ -3290,6 +3313,7 @@ var BrandsMenuMobile = function (_a) {
 
 var withClickOut = function (WrappedComponent) {
     var Component = function (props) {
+        var container = React.useContext(ContainerContext).container;
         var _a = React.useState(false), clickOut = _a[0], setClickOut = _a[1];
         var ref = React.useRef(null);
         var handleClick = React.useCallback(function (e) {
@@ -3300,11 +3324,11 @@ var withClickOut = function (WrappedComponent) {
             }
         }, [clickOut]);
         React.useEffect(function () {
-            document.addEventListener('click', handleClick);
+            container === null || container === void 0 ? void 0 : container.addEventListener('click', handleClick);
             return function () {
-                document.removeEventListener('click', handleClick);
+                container === null || container === void 0 ? void 0 : container.removeEventListener('click', handleClick);
             };
-        }, [handleClick]);
+        }, [handleClick, container]);
         return (React__default["default"].createElement("div", { ref: ref },
             React__default["default"].createElement(WrappedComponent, __assign({ clickOut: clickOut, setClickOut: setClickOut }, props))));
     };
@@ -3481,13 +3505,13 @@ var styles$26 = {"magneto-ui-candidate-profile":"mg_candidate_profile_magneto-ui
 
 var styles$25 = {"magneto-ui-candidate-profile-avatar":"mg_candidate_profile_avatar_magneto-ui-candidate-profile-avatar_1849j","magneto-ui-candidate-profile-avatar__picture":"mg_candidate_profile_avatar_magneto-ui-candidate-profile-avatar_picture_1849j","magneto-ui-candidate-profile-avatar__score":"mg_candidate_profile_avatar_magneto-ui-candidate-profile-avatar_score_1849j"};
 
-var cx$S = classNames.bind(styles$25);
+var cx$T = classNames.bind(styles$25);
 var Component$29 = function (_a) {
     var avatar = _a.avatar, score = _a.score, props = __rest(_a, ["avatar", "score"]);
-    return (React__default["default"].createElement("div", __assign({ className: cx$S('magneto-ui-candidate-profile-avatar') }, props),
-        React__default["default"].createElement("picture", { className: cx$S('magneto-ui-candidate-profile-avatar__picture') },
+    return (React__default["default"].createElement("div", __assign({ className: cx$T('magneto-ui-candidate-profile-avatar') }, props),
+        React__default["default"].createElement("picture", { className: cx$T('magneto-ui-candidate-profile-avatar__picture') },
             React__default["default"].createElement(Avatar, __assign({}, avatar))),
-        score && (React__default["default"].createElement("div", { className: cx$S('magneto-ui-candidate-profile-avatar__score') },
+        score && (React__default["default"].createElement("div", { className: cx$T('magneto-ui-candidate-profile-avatar__score') },
             React__default["default"].createElement(RatingBadge, { score: score })))));
 };
 /**
@@ -3497,11 +3521,11 @@ var CandidateProfileAvatar = Component$29;
 
 var styles$24 = {"magneto-ui-candidate-profile-body":"mg_candidate_profile_body_magneto-ui-candidate-profile-body_z5hdu","magneto-ui-candidate-profile-body--open":"mg_candidate_profile_body_magneto-ui-candidate-profile-body--open_z5hdu"};
 
-var cx$R = classNames.bind(styles$24);
+var cx$S = classNames.bind(styles$24);
 var Component$28 = function (_a) {
     var children = _a.children, props = __rest(_a, ["children"]);
     var open = Collapse.useCollapse().open;
-    return (React__default["default"].createElement(Collapse.Body, __assign({ className: cx$R('magneto-ui-candidate-profile-body', {
+    return (React__default["default"].createElement(Collapse.Body, __assign({ className: cx$S('magneto-ui-candidate-profile-body', {
             'magneto-ui-candidate-profile-body--open': open
         }) }, props), children));
 };
@@ -3512,11 +3536,11 @@ var CandidateProfileBody = Component$28;
 
 var styles$23 = {"magneto-ui-candidate-profile-header":"mg_candidate_profile_header_magneto-ui-candidate-profile-header_1x5m8","magneto-ui-candidate-profile-header--open":"mg_candidate_profile_header_magneto-ui-candidate-profile-header--open_1x5m8"};
 
-var cx$Q = classNames.bind(styles$23);
+var cx$R = classNames.bind(styles$23);
 var Component$27 = function (_a) {
     var children = _a.children, className = _a.className, props = __rest(_a, ["children", "className"]);
     var open = Collapse.useCollapse().open;
-    return (React__default["default"].createElement(Collapse.Header, __assign({ className: cx$Q('magneto-ui-candidate-profile-header', className, {
+    return (React__default["default"].createElement(Collapse.Header, __assign({ className: cx$R('magneto-ui-candidate-profile-header', className, {
             'magneto-ui-candidate-profile-header--open': open
         }) }, props), children));
 };
@@ -3527,7 +3551,7 @@ var CandidateProfileHeader = Component$27;
 
 var styles$22 = {"magneto-ui-candidate-profile-toggler":"mg_candidate_profile_toggler_magneto-ui-candidate-profile-toggler_r3x9t","magneto-ui-candidate-profile-toggler--open":"mg_candidate_profile_toggler_magneto-ui-candidate-profile-toggler--open_r3x9t"};
 
-var cx$P = classNames.bind(styles$22);
+var cx$Q = classNames.bind(styles$22);
 var Component$26 = function (_a) {
     var className = _a.className, onClick = _a.onClick, props = __rest(_a, ["className", "onClick"]);
     var _b = Collapse.useCollapse(), open = _b.open, onChangeOpen = _b.onChangeOpen;
@@ -3535,7 +3559,7 @@ var Component$26 = function (_a) {
         onClick === null || onClick === void 0 ? void 0 : onClick(evt);
         onChangeOpen(!open);
     }, [open, onChangeOpen, onClick]);
-    return (React__default["default"].createElement(Collapse.Toggler, __assign({}, props, { className: cx$P('magneto-ui-candidate-profile-toggler', className, {
+    return (React__default["default"].createElement(Collapse.Toggler, __assign({}, props, { className: cx$Q('magneto-ui-candidate-profile-toggler', className, {
             'magneto-ui-candidate-profile-toggler--open': open
         }), onClick: handleOnClick }),
         React__default["default"].createElement(IconItem, { icon: ArrowDownGreen, hover: false })));
@@ -3553,11 +3577,11 @@ var children = /*#__PURE__*/Object.freeze({
     Toggler: CandidateProfileToggler
 });
 
-var cx$O = classNames.bind(styles$26);
+var cx$P = classNames.bind(styles$26);
 var Component$25 = function (_a) {
     var children = _a.children, className = _a.className, _b = _a.defaultOpen, defaultOpen = _b === void 0 ? true : _b, onChangeOpen = _a.onChangeOpen, open = _a.open, props = __rest(_a, ["children", "className", "defaultOpen", "onChangeOpen", "open"]);
     return (React__default["default"].createElement(Collapse.Provider, { defaultOpen: defaultOpen, open: open, onChangeOpen: onChangeOpen },
-        React__default["default"].createElement("article", __assign({ className: cx$O('magneto-ui-candidate-profile', className) }, props), children)));
+        React__default["default"].createElement("article", __assign({ className: cx$P('magneto-ui-candidate-profile', className) }, props), children)));
 };
 /**
  * Molecule UI component of candidate profile
@@ -4297,7 +4321,7 @@ var HeaderTabs = Component$1P;
 
 var styles$1K = {"magneto-ui-horizontal-menu":"mg_horizontal_menu_magneto-ui-horizontal-menu_1m6q0","magneto-ui-horizontal-menu__back":"mg_horizontal_menu_magneto-ui-horizontal-menu_back_1m6q0","magneto-ui-horizontal-menu__nav":"mg_horizontal_menu_magneto-ui-horizontal-menu_nav_1m6q0","magneto-ui-horizontal-menu__list":"mg_horizontal_menu_magneto-ui-horizontal-menu_list_1m6q0","magneto-ui-horizontal-menu__button":"mg_horizontal_menu_magneto-ui-horizontal-menu_button_1m6q0","magneto-ui-horizontal-menu__button--active":"mg_horizontal_menu_magneto-ui-horizontal-menu_button--active_1m6q0"};
 
-var cx$N = classNames.bind(styles$1K);
+var cx$O = classNames.bind(styles$1K);
 var Component$1O = function (_a) {
     var className = _a.className, options = _a.options, onChange = _a.onChange, onClick = _a.onClick;
     var _b = React.useState(0), selectedItem = _b[0], setSelectedItem = _b[1];
@@ -4308,13 +4332,13 @@ var Component$1O = function (_a) {
     }, [selectedItem, onChange]);
     if (!options || !Array.isArray(options))
         return null;
-    return (React__default["default"].createElement("header", { className: cx$N('magneto-ui-horizontal-menu', className) },
-        React__default["default"].createElement("button", { className: cx$N('magneto-ui-horizontal-menu__back'), onClick: function () { return onClick === null || onClick === void 0 ? void 0 : onClick(); } },
+    return (React__default["default"].createElement("header", { className: cx$O('magneto-ui-horizontal-menu', className) },
+        React__default["default"].createElement("button", { className: cx$O('magneto-ui-horizontal-menu__back'), onClick: function () { return onClick === null || onClick === void 0 ? void 0 : onClick(); } },
             React__default["default"].createElement(IconItem, { icon: ArrowLeft2, size: 20 })),
-        React__default["default"].createElement("nav", { className: cx$N('magneto-ui-horizontal-menu__nav') },
-            React__default["default"].createElement("ul", { className: cx$N('magneto-ui-horizontal-menu__list') }, options.map(function (_a, key) {
+        React__default["default"].createElement("nav", { className: cx$O('magneto-ui-horizontal-menu__nav') },
+            React__default["default"].createElement("ul", { className: cx$O('magneto-ui-horizontal-menu__list') }, options.map(function (_a, key) {
                 var icon = _a.icon, title = _a.title;
-                return (React__default["default"].createElement("li", { key: key, className: cx$N('magneto-ui-horizontal-menu__button', {
+                return (React__default["default"].createElement("li", { key: key, className: cx$O('magneto-ui-horizontal-menu__button', {
                         'magneto-ui-horizontal-menu__button--active': selectedItem === key
                     }) },
                     React__default["default"].createElement(Button, { suffixIcon: icon, buttonText: title, onClick: function () { return setSelectedItem(key); } })));
@@ -4525,7 +4549,7 @@ var JobApplyCard = Component$1L;
 
 var styles$1E = {"option":"mg_vacant_option_mobile_option_10cgk","option--link":"mg_vacant_option_mobile_option--link_10cgk","option--button":"mg_vacant_option_mobile_option--button_10cgk","icon--big":"mg_vacant_option_mobile_icon--big_10cgk"};
 
-var cx$M = classNames.bind(styles$1E);
+var cx$N = classNames.bind(styles$1E);
 var VacantOptionMobile = function (_a) {
     var option = _a.option, onClick = _a.onClick, onMenu = _a.onMenu;
     var handleClick = function () {
@@ -4542,13 +4566,13 @@ var VacantOptionMobile = function (_a) {
         ? ShareIcons[option.icon].icon
         : option.icon;
     if (option.type === 'link') {
-        return (React__default["default"].createElement("a", { href: option.href, target: "_blank", rel: "noopener noreferrer", className: cx$M('option', 'option--link', option.className) },
+        return (React__default["default"].createElement("a", { href: option.href, target: "_blank", rel: "noopener noreferrer", className: cx$N('option', 'option--link', option.className) },
             option.icon ? React__default["default"].createElement(IconItem, { size: 18, icon: icon }) : null,
             " ",
             option.label));
     }
     if (option.type === 'button' || option.type === 'menu') {
-        return (React__default["default"].createElement("button", { className: cx$M('option', 'option--button', option.className), onClick: handleClick, type: "button" },
+        return (React__default["default"].createElement("button", { className: cx$N('option', 'option--button', option.className), onClick: handleClick, type: "button" },
             option.icon ? React__default["default"].createElement(IconItem, { size: 18, icon: icon }) : null,
             " ",
             option.label));
@@ -4558,7 +4582,7 @@ var VacantOptionMobile = function (_a) {
 
 var styles$1D = {"button":"mg_job_card_option_drawer_button_1b6xo","button-back":"mg_job_card_option_drawer_button-back_1b6xo","drawer":"mg_job_card_option_drawer_drawer_1b6xo","drawer__title":"mg_job_card_option_drawer_drawer_title_1b6xo","drawer__company":"mg_job_card_option_drawer_drawer_company_1b6xo","drawer__header":"mg_job_card_option_drawer_drawer_header_1b6xo"};
 
-var cx$L = classNames.bind(styles$1D);
+var cx$M = classNames.bind(styles$1D);
 var JobCardOptionDrawer = function (_a) {
     var title = _a.title, company = _a.company, menu = _a.menu, backText = _a.backText;
     var _b = React.useState(false), isOpen = _b[0], setOpen = _b[1];
@@ -4583,17 +4607,17 @@ var JobCardOptionDrawer = function (_a) {
         };
     }, [handleMenu, menu]);
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement("button", { onClick: toggle, className: cx$L('button'), type: "button" },
+        React__default["default"].createElement("button", { onClick: toggle, className: cx$M('button'), type: "button" },
             React__default["default"].createElement(IconItem, { icon: More, size: 18 })),
-        React__default["default"].createElement(MobileDrawer, { className: cx$L('drawer'), isOpen: isOpen, onClose: toggle },
-            React__default["default"].createElement("header", { className: cx$L('drawer__header') },
+        React__default["default"].createElement(MobileDrawer, { className: cx$M('drawer'), isOpen: isOpen, onClose: toggle },
+            React__default["default"].createElement("header", { className: cx$M('drawer__header') },
                 showBack ? (React__default["default"].createElement("section", null,
-                    React__default["default"].createElement("button", { type: "button", className: cx$L('button-back'), onClick: function () { return handleMenu(menu, false); } },
+                    React__default["default"].createElement("button", { type: "button", className: cx$M('button-back'), onClick: function () { return handleMenu(menu, false); } },
                         React__default["default"].createElement(IconItem, { icon: ArrowLeft2, size: 20 }),
                         " ",
                         backText))) : null,
-                React__default["default"].createElement("h4", { className: cx$L('drawer__title') }, title),
-                React__default["default"].createElement("h5", { className: cx$L('drawer__company') }, company)),
+                React__default["default"].createElement("h4", { className: cx$M('drawer__title') }, title),
+                React__default["default"].createElement("h5", { className: cx$M('drawer__company') }, company)),
             React__default["default"].createElement("div", null, options.map(function (option, index) { return (React__default["default"].createElement(VacantOptionMobile, { key: index + option.label, option: option, onMenu: handleMenu, onClick: function () {
                     toggle();
                     handleMenu(menu, false);
@@ -4602,7 +4626,7 @@ var JobCardOptionDrawer = function (_a) {
 
 var styles$1C = {"option":"mg_vacant_option_option_14jrn","option--link":"mg_vacant_option_option--link_14jrn","option--menu":"mg_vacant_option_option--menu_14jrn","option--menu-open":"mg_vacant_option_option--menu-open_14jrn","option__menu-list":"mg_vacant_option_option_menu-list_14jrn","option--button":"mg_vacant_option_option--button_14jrn","icon--big":"mg_vacant_option_icon--big_14jrn"};
 
-var cx$K = classNames.bind(styles$1C);
+var cx$L = classNames.bind(styles$1C);
 var VacantOption = function (_a) {
     var option = _a.option, onClick = _a.onClick;
     var _b = React.useState(false), open = _b[0], setOpen = _b[1];
@@ -4617,16 +4641,16 @@ var VacantOption = function (_a) {
         ? ShareIcons[option.icon].icon
         : option.icon;
     if (option.type === 'menu') {
-        return (React__default["default"].createElement(MenuDropdown, { title: option.label, opened: open, onClick: setOpen, prefixIcon: { icon: icon, size: 18 }, suffixIcon: { icon: ArrowDown2 }, className: cx$K('option', 'option--menu', { 'option--menu-open': open }, option.className), listClassName: cx$K('option__menu-list') }, option.children.map(function (child) { return (React__default["default"].createElement(VacantOption, { onClick: handleClick, key: child.label, option: child })); })));
+        return (React__default["default"].createElement(MenuDropdown, { title: option.label, opened: open, onClick: setOpen, prefixIcon: { icon: icon, size: 18 }, suffixIcon: { icon: ArrowDown2 }, className: cx$L('option', 'option--menu', { 'option--menu-open': open }, option.className), listClassName: cx$L('option__menu-list') }, option.children.map(function (child) { return (React__default["default"].createElement(VacantOption, { onClick: handleClick, key: child.label, option: child })); })));
     }
     if (option.type === 'link') {
-        return (React__default["default"].createElement("a", { href: option.href, target: "_blank", rel: "noopener noreferrer", className: cx$K('option', 'option--link', option.className) },
+        return (React__default["default"].createElement("a", { href: option.href, target: "_blank", rel: "noopener noreferrer", className: cx$L('option', 'option--link', option.className) },
             option.icon ? React__default["default"].createElement(IconItem, { size: 18, icon: icon }) : null,
             " ",
             option.label));
     }
     if (option.type === 'button') {
-        return (React__default["default"].createElement("button", { className: cx$K('option', 'option--button', option.className), onClick: handleClick, type: "button" },
+        return (React__default["default"].createElement("button", { className: cx$L('option', 'option--button', option.className), onClick: handleClick, type: "button" },
             option.icon ? React__default["default"].createElement(IconItem, { size: 18, icon: icon }) : null,
             " ",
             option.label));
@@ -4636,7 +4660,7 @@ var VacantOption = function (_a) {
 
 var styles$1B = {"popover--open":"mg_job_card_option_popover--open_12kph","popover":"mg_job_card_option_popover_12kph","button":"mg_job_card_option_button_12kph"};
 
-var cx$J = classNames.bind(styles$1B);
+var cx$K = classNames.bind(styles$1B);
 var JobCardOption = function (_a) {
     var _b = _a.clickOut, clickOut = _b === void 0 ? false : _b, _c = _a.setClickOut, setClickOut = _c === void 0 ? stubUndefined : _c, menu = _a.menu;
     var ref = React.useRef(null);
@@ -4652,8 +4676,8 @@ var JobCardOption = function (_a) {
             (_a = window === null || window === void 0 ? void 0 : window.removeEventListener) === null || _a === void 0 ? void 0 : _a.call(window, 'blur', onBlurWindow);
         };
     }, [setClickOut]);
-    return (React__default["default"].createElement(Popover, { className: cx$J('popover', { 'popover--open': clickOut }), content: React__default["default"].createElement("div", { onBlur: toggle, ref: ref }, menu.map(function (option) { return (React__default["default"].createElement(VacantOption, { key: option.label, onClick: toggle, option: option })); })), show: clickOut, widthBase: 35, positionX: "left", positionY: "bottom" },
-        React__default["default"].createElement("button", { type: "button", className: cx$J('button'), onClick: function () {
+    return (React__default["default"].createElement(Popover, { className: cx$K('popover', { 'popover--open': clickOut }), content: React__default["default"].createElement("div", { onBlur: toggle, ref: ref }, menu.map(function (option) { return (React__default["default"].createElement(VacantOption, { key: option.label, onClick: toggle, option: option })); })), show: clickOut, widthBase: 35, positionX: "left", positionY: "bottom" },
+        React__default["default"].createElement("button", { type: "button", className: cx$K('button'), onClick: function () {
                 setClickOut(function (prev) {
                     var _a;
                     if (!prev) {
@@ -4683,7 +4707,7 @@ var useWithElement = function (ref) {
     return width;
 };
 
-var cx$I = classNames.bind(style$M);
+var cx$J = classNames.bind(style$M);
 var getJobSubtitle = function (companyName) {
     var args = [];
     for (var _i = 1; _i < arguments.length; _i++) {
@@ -4704,28 +4728,28 @@ var JobCardDesktop = function (_a) {
         }
         return cities === null || cities === void 0 ? void 0 : cities.join(', ');
     }, [cities]);
-    return (React__default["default"].createElement("div", { className: cx$I("".concat(classMUI, "-card-jobs__container"), jobOpen && "".concat(classMUI, "-card-jobs--job-open")) },
-        React__default["default"].createElement("article", { onClick: showDetail, className: cx$I("".concat(classMUI, "-card-jobs"), urgent && "".concat(classMUI, "-card-jobs--urgent")) },
-            !isCompanyPage && (React__default["default"].createElement("div", { className: cx$I("".concat(classMUI, "-card-jobs__brand")) },
+    return (React__default["default"].createElement("div", { className: cx$J("".concat(classMUI, "-card-jobs__container"), jobOpen && "".concat(classMUI, "-card-jobs--job-open")) },
+        React__default["default"].createElement("article", { onClick: showDetail, className: cx$J("".concat(classMUI, "-card-jobs"), urgent && "".concat(classMUI, "-card-jobs--urgent")) },
+            !isCompanyPage && (React__default["default"].createElement("div", { className: cx$J("".concat(classMUI, "-card-jobs__brand")) },
                 React__default["default"].createElement("div", null,
-                    React__default["default"].createElement("img", { className: cx$I("".concat(classMUI, "-card-jobs__brand-img")), alt: companySlug ? companySlug : 'company-slug', src: companyLogo ? companyLogo : NoLogo, loading: "lazy", width: '67px', height: '67px' })))),
-            React__default["default"].createElement("div", { className: cx$I("".concat(classMUI, "-card-jobs__data")) },
-                React__default["default"].createElement("section", { className: cx$I("".concat(classMUI, "-card-jobs__header")) },
-                    React__default["default"].createElement("span", { className: cx$I("".concat(classMUI, "-card-jobs__text"), "".concat(classMUI, "-card-jobs__published")) }, formatPublishDate),
-                    React__default["default"].createElement("section", { ref: optionsRef, className: cx$I("".concat(classMUI, "-card-jobs__options"), 'opciones') })),
-                React__default["default"].createElement("h2", { className: cx$I("".concat(classMUI, "-card-jobs__text"), "".concat(classMUI, "-card-jobs__text--big"), "".concat(classMUI, "-card-jobs__text--bold")) },
-                    React__default["default"].createElement("a", { href: "".concat(dynamicUrl, "/").concat(jobSlug), title: title, target: "_blank", rel: "noreferrer", onClick: function (e) { return e.preventDefault(); }, className: cx$I("".concat(classMUI, "-card-jobs__a")) }, title)),
-                React__default["default"].createElement("h3", { className: cx$I("".concat(classMUI, "-card-jobs__text")) }, getJobSubtitle(companyName, contractType)),
-                React__default["default"].createElement("p", { className: cx$I("".concat(classMUI, "-card-jobs__text")) }, salary),
-                React__default["default"].createElement("p", { className: cx$I("".concat(classMUI, "-card-jobs__text")) }, citiesformatted))),
-        React__default["default"].createElement("div", { style: { width: width || 300 }, className: cx$I("".concat(classMUI, "-card-jobs__render-right")) },
-            React__default["default"].createElement("div", { className: cx$I("".concat(classMUI, "-card-jobs__white-space")), onClick: function () { return showDetail === null || showDetail === void 0 ? void 0 : showDetail(); } }, urgent ? (React__default["default"].createElement("span", { className: cx$I("".concat(classMUI, "-card-jobs__urgent"), "".concat(classMUI, "-card-jobs__text--small")) },
-                React__default["default"].createElement(IconItem, { className: cx$I("".concat(classMUI, "-card-jobs__urgent-icon")), icon: Urgent, size: 14 }),
+                    React__default["default"].createElement("img", { className: cx$J("".concat(classMUI, "-card-jobs__brand-img")), alt: companySlug ? companySlug : 'company-slug', src: companyLogo ? companyLogo : NoLogo, loading: "lazy", width: '67px', height: '67px' })))),
+            React__default["default"].createElement("div", { className: cx$J("".concat(classMUI, "-card-jobs__data")) },
+                React__default["default"].createElement("section", { className: cx$J("".concat(classMUI, "-card-jobs__header")) },
+                    React__default["default"].createElement("span", { className: cx$J("".concat(classMUI, "-card-jobs__text"), "".concat(classMUI, "-card-jobs__published")) }, formatPublishDate),
+                    React__default["default"].createElement("section", { ref: optionsRef, className: cx$J("".concat(classMUI, "-card-jobs__options"), 'opciones') })),
+                React__default["default"].createElement("h2", { className: cx$J("".concat(classMUI, "-card-jobs__text"), "".concat(classMUI, "-card-jobs__text--big"), "".concat(classMUI, "-card-jobs__text--bold")) },
+                    React__default["default"].createElement("a", { href: "".concat(dynamicUrl, "/").concat(jobSlug), title: title, target: "_blank", rel: "noreferrer", onClick: function (e) { return e.preventDefault(); }, className: cx$J("".concat(classMUI, "-card-jobs__a")) }, title)),
+                React__default["default"].createElement("h3", { className: cx$J("".concat(classMUI, "-card-jobs__text")) }, getJobSubtitle(companyName, contractType)),
+                React__default["default"].createElement("p", { className: cx$J("".concat(classMUI, "-card-jobs__text")) }, salary),
+                React__default["default"].createElement("p", { className: cx$J("".concat(classMUI, "-card-jobs__text")) }, citiesformatted))),
+        React__default["default"].createElement("div", { style: { width: width || 300 }, className: cx$J("".concat(classMUI, "-card-jobs__render-right")) },
+            React__default["default"].createElement("div", { className: cx$J("".concat(classMUI, "-card-jobs__white-space")), onClick: function () { return showDetail === null || showDetail === void 0 ? void 0 : showDetail(); } }, urgent ? (React__default["default"].createElement("span", { className: cx$J("".concat(classMUI, "-card-jobs__urgent"), "".concat(classMUI, "-card-jobs__text--small")) },
+                React__default["default"].createElement(IconItem, { className: cx$J("".concat(classMUI, "-card-jobs__urgent-icon")), icon: Urgent, size: 14 }),
                 " ",
                 urgent)) : null),
             renderRight ? renderRight() : null,
-            React__default["default"].createElement("button", { className: cx$I("".concat(classMUI, "-card-jobs__button")), onClick: function () { return showDetail === null || showDetail === void 0 ? void 0 : showDetail(); } },
-                React__default["default"].createElement(IconItem, { icon: ArrowLeft2, size: 16, className: cx$I("".concat(classMUI, "-card-jobs__arrow")) })))));
+            React__default["default"].createElement("button", { className: cx$J("".concat(classMUI, "-card-jobs__button")), onClick: function () { return showDetail === null || showDetail === void 0 ? void 0 : showDetail(); } },
+                React__default["default"].createElement(IconItem, { icon: ArrowLeft2, size: 16, className: cx$J("".concat(classMUI, "-card-jobs__arrow")) })))));
 };
 
 var JobCard = function (_a) {
@@ -5214,6 +5238,7 @@ var Component$1B = function (_a) {
     var _g = React.useState(false), isAnimating = _g[0], setIsAnimating = _g[1];
     var removeTimeoutRef = React.useRef(null);
     var hideTimeoutRef = React.useRef(null);
+    var container = React.useContext(ContainerContext).container;
     var containerVar = React.useMemo(function () { return ({
         '--transition-duration': "".concat(transitionDuration / 1000, "s")
     }); }, []);
@@ -5258,13 +5283,13 @@ var Component$1B = function (_a) {
         setLocalVisible(visible);
         setIsAnimating(visible);
     }, [isAnimating, visible]);
-    return localVisible
+    return localVisible && container
         ? ReactDOM__default["default"].createPortal(React__default["default"].createElement("div", { style: containerVar, className: CNM.get({ styles: styles$1r, cls: [className] }) },
             React__default["default"].createElement("div", { className: containerStyles },
                 React__default["default"].createElement(IconItem, __assign({ alt: type, className: CNM.get({ styles: styles$1r, cls: ['message__icon'] }), icon: iconByType[type], showDefaultFallback: false, size: 20 }, iconProps)),
                 React__default["default"].createElement("div", null,
                     text && React__default["default"].createElement("span", { className: textStyles(!!description) }, text),
-                    description && React__default["default"].createElement("span", { className: textStyles() }, description)))), document.body)
+                    description && React__default["default"].createElement("span", { className: textStyles() }, description)))), container)
         : null;
 };
 /**
@@ -5476,7 +5501,7 @@ var QUALIFICATION = [
 
 var styles$1l = {"magneto-ui-qualification":"mg_qualification_magneto-ui-qualification_a2ncq","magneto-ui-qualification__star":"mg_qualification_magneto-ui-qualification_star_a2ncq"};
 
-var cx$H = classNames.bind(styles$1l);
+var cx$I = classNames.bind(styles$1l);
 var Component$1y = function (_a) {
     var _b = _a.rating, rating = _b === void 0 ? -1 : _b, onClick = _a.onClick;
     var _c = React.useState(-1), qualification = _c[0], setQualification = _c[1];
@@ -5490,9 +5515,9 @@ var Component$1y = function (_a) {
             setQualification(Math.round(rating) - 1);
         }
     }, [rating]);
-    return (React__default["default"].createElement("ul", { className: cx$H('magneto-ui-qualification') }, QUALIFICATION.map(function (_a, index) {
+    return (React__default["default"].createElement("ul", { className: cx$I('magneto-ui-qualification') }, QUALIFICATION.map(function (_a, index) {
         var alt = _a.alt, icon = _a.icon, iconHover = _a.iconHover, iconSelect = _a.iconSelect;
-        return (React__default["default"].createElement("li", { className: cx$H('magneto-ui-qualification__star'), onMouseEnter: function () { return setHover(index); }, onMouseLeave: function () { return setHover(-1); }, onClick: function () { return onClickQualification(index); }, key: "qualification-star-".concat(index) },
+        return (React__default["default"].createElement("li", { className: cx$I('magneto-ui-qualification__star'), onMouseEnter: function () { return setHover(index); }, onMouseLeave: function () { return setHover(-1); }, onClick: function () { return onClickQualification(index); }, key: "qualification-star-".concat(index) },
             React__default["default"].createElement("img", { alt: alt, src: index <= Number(qualification) ? iconSelect : index <= Number(hover) ? iconHover : icon })));
     })));
 };
@@ -5622,27 +5647,27 @@ var styles$1g = {"similar-card":"mg_similar_card_similar-card_8mo62","similar-ca
 
 var styles$1f = {"similar-card-logo":"mg_similar_card_logo_similar-card-logo_1adpr"};
 
-var cx$G = classNames.bind(styles$1f);
+var cx$H = classNames.bind(styles$1f);
 var Component$1t = function (_a) {
     var className = _a.className, src = _a.src, alt = _a.alt, _b = _a.hideLogo, hideLogo = _b === void 0 ? false : _b;
     if (hideLogo)
         return null;
-    return (React__default["default"].createElement("img", { className: cx$G("similar-card-logo", className), src: src || NoLogo, alt: (alt === null || alt === void 0 ? void 0 : alt.toLowerCase()) || 'company-logo' }));
+    return (React__default["default"].createElement("img", { className: cx$H("similar-card-logo", className), src: src || NoLogo, alt: (alt === null || alt === void 0 ? void 0 : alt.toLowerCase()) || 'company-logo' }));
 };
 var SimilarCardLogo = Component$1t;
 
-var cx$F = classNames.bind(styles$1g);
+var cx$G = classNames.bind(styles$1g);
 var Component$1s = function (_a) {
     var className = _a.className, src = _a.src, alt = _a.alt, _b = _a.showIconMobile, showIconMobile = _b === void 0 ? false : _b;
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement(IconItem, { className: cx$F('similar-card__arrow', { 'similar-card__arrow-mobile': !showIconMobile }, className), icon: src || ArrowRight2, alt: (alt === null || alt === void 0 ? void 0 : alt.toLowerCase()) || 'card-icon' })));
+        React__default["default"].createElement(IconItem, { className: cx$G('similar-card__arrow', { 'similar-card__arrow-mobile': !showIconMobile }, className), icon: src || ArrowRight2, alt: (alt === null || alt === void 0 ? void 0 : alt.toLowerCase()) || 'card-icon' })));
 };
 var SimilarCardIcon = Component$1s;
 
-var cx$E = classNames.bind(styles$1g);
+var cx$F = classNames.bind(styles$1g);
 var Component$1r = function (_a) {
     var children = _a.children, _b = _a.title, title = _b === void 0 ? 'jobLink' : _b, _c = _a.jobUrlSlug, jobUrlSlug = _c === void 0 ? '#' : _c, className = _a.className;
-    return (React__default["default"].createElement("a", { className: cx$E("similar-card", className), href: jobUrlSlug, title: title }, children));
+    return (React__default["default"].createElement("a", { className: cx$F("similar-card", className), href: jobUrlSlug, title: title }, children));
 };
 var SimilarCard = Object.assign(Component$1r, {
     Text: TextCustom,
@@ -5725,25 +5750,35 @@ var TextArea = function (_a) {
             hasCounter && React__default["default"].createElement(ComparativeCounter, { current: inputValue === null || inputValue === void 0 ? void 0 : inputValue.length, max: maxCounterValue }))));
 };
 
-var style$y = {"magneto-ui-timeline-event":"mg_timeline_event_magneto-ui-timeline-event_1jv11","magneto-ui-timeline-event__icon":"mg_timeline_event_magneto-ui-timeline-event_icon_1jv11","magneto-ui-timeline-event__icon--bar":"mg_timeline_event_magneto-ui-timeline-event_icon--bar_1jv11","magneto-ui-timeline-event__icon--icon":"mg_timeline_event_magneto-ui-timeline-event_icon--icon_1jv11","magneto-ui-timeline-event__text":"mg_timeline_event_magneto-ui-timeline-event_text_1jv11","magneto-ui-timeline-event__text--title":"mg_timeline_event_magneto-ui-timeline-event_text--title_1jv11","magneto-ui-timeline-event__text--title-checked":"mg_timeline_event_magneto-ui-timeline-event_text--title-checked_1jv11","magneto-ui-timeline-event__text--title-current":"mg_timeline_event_magneto-ui-timeline-event_text--title-current_1jv11","magneto-ui-timeline-event__text--title-blocked":"mg_timeline_event_magneto-ui-timeline-event_text--title-blocked_1jv11","magneto-ui-timeline-event__text--subtitle":"mg_timeline_event_magneto-ui-timeline-event_text--subtitle_1jv11","magneto-ui-timeline-event__text--subtitle-current":"mg_timeline_event_magneto-ui-timeline-event_text--subtitle-current_1jv11","magneto-ui-timeline-event__text--subtitle-blocked":"mg_timeline_event_magneto-ui-timeline-event_text--subtitle-blocked_1jv11","checked":"mg_timeline_event_checked_1jv11","current":"mg_timeline_event_current_1jv11","blocked":"mg_timeline_event_blocked_1jv11"};
+exports.TimeLineItemStatus = void 0;
+(function (TimeLineItemStatus) {
+    TimeLineItemStatus["CHECKED"] = "checked";
+    TimeLineItemStatus["CURRENT"] = "current";
+    TimeLineItemStatus["BLOCKED"] = "blocked";
+    TimeLineItemStatus["UNLOCKED"] = "unlocked";
+})(exports.TimeLineItemStatus || (exports.TimeLineItemStatus = {}));
+
+var style$y = {"magneto-ui-timeline-event":"mg_timeline_event_magneto-ui-timeline-event_1mvbj","magneto-ui-timeline-event__icon":"mg_timeline_event_magneto-ui-timeline-event_icon_1mvbj","magneto-ui-timeline-event__icon-bar":"mg_timeline_event_magneto-ui-timeline-event_icon-bar_1mvbj","magneto-ui-timeline-event__icon-bar--checked":"mg_timeline_event_magneto-ui-timeline-event_icon-bar--checked_1mvbj","magneto-ui-timeline-event__icon-bar--current":"mg_timeline_event_magneto-ui-timeline-event_icon-bar--current_1mvbj","magneto-ui-timeline-event__icon-bar--blocked":"mg_timeline_event_magneto-ui-timeline-event_icon-bar--blocked_1mvbj","magneto-ui-timeline-event__icon-bar--unlocked":"mg_timeline_event_magneto-ui-timeline-event_icon-bar--unlocked_1mvbj","magneto-ui-timeline-event__icon-icon":"mg_timeline_event_magneto-ui-timeline-event_icon-icon_1mvbj","magneto-ui-timeline-event__icon-icon--unlocked":"mg_timeline_event_magneto-ui-timeline-event_icon-icon--unlocked_1mvbj","magneto-ui-timeline-event__text":"mg_timeline_event_magneto-ui-timeline-event_text_1mvbj","magneto-ui-timeline-event__text-title":"mg_timeline_event_magneto-ui-timeline-event_text-title_1mvbj","magneto-ui-timeline-event__text-title--blocked":"mg_timeline_event_magneto-ui-timeline-event_text-title--blocked_1mvbj","magneto-ui-timeline-event__text-title--unlocked":"mg_timeline_event_magneto-ui-timeline-event_text-title--unlocked_1mvbj","magneto-ui-timeline-event__text-subtitle":"mg_timeline_event_magneto-ui-timeline-event_text-subtitle_1mvbj","magneto-ui-timeline-event__text-subtitle--current":"mg_timeline_event_magneto-ui-timeline-event_text-subtitle--current_1mvbj","magneto-ui-timeline-event__text-subtitle--blocked":"mg_timeline_event_magneto-ui-timeline-event_text-subtitle--blocked_1mvbj","magneto-ui-timeline-event__text-subtitle--unlocked":"mg_timeline_event_magneto-ui-timeline-event_text-subtitle--unlocked_1mvbj"};
 
-var timelineIcons = {
+var BASE_CLASS = "".concat(classMUI, "-timeline-event");
+var TIMELINE_ICONS = {
     checked: Checked,
     current: Clock,
+    unlocked: Clock,
     blocked: Lock
 };
+
+var cx$E = classNames.bind(style$y);
 var Component$1q = function (_a) {
     var title = _a.title, subtitle = _a.subtitle, status = _a.status, _b = _a.index, index = _b === void 0 ? 0 : _b, _c = _a.onClick, onClick = _c === void 0 ? function () { return ({}); } : _c;
-    var iconByType = React.useMemo(function () { return timelineIcons[status]; }, [status]);
-    var titleStyle = style$y["".concat(classMUI, "-timeline-event__text--title-").concat(status)];
-    var subtitleStyle = style$y["".concat(classMUI, "-timeline-event__text--subtitle-").concat(status)];
-    return (React__default["default"].createElement("button", { type: "button", onClick: function () { return onClick(status, index); }, className: style$y["".concat(classMUI, "-timeline-event")] },
-        React__default["default"].createElement("div", { className: style$y["".concat(classMUI, "-timeline-event__icon")] },
-            React__default["default"].createElement("div", { className: "".concat(style$y["".concat(classMUI, "-timeline-event__icon--bar")], " ").concat(style$y[status]) }),
-            React__default["default"].createElement(IconItem, { className: style$y["".concat(classMUI, "-timeline-event__icon--icon")], icon: iconByType, alt: status })),
-        React__default["default"].createElement("div", { className: style$y["".concat(classMUI, "-timeline-event__text")] },
-            React__default["default"].createElement("p", { className: "".concat(style$y["".concat(classMUI, "-timeline-event__text--title")], " ").concat(titleStyle) }, title),
-            React__default["default"].createElement("p", { className: "".concat(style$y["".concat(classMUI, "-timeline-event__text--subtitle")], " ").concat(subtitleStyle) }, subtitle))));
+    var iconByType = React.useMemo(function () { return TIMELINE_ICONS[status]; }, [status]);
+    return (React__default["default"].createElement("button", { type: "button", onClick: function () { return onClick(status, index); }, className: style$y[BASE_CLASS] },
+        React__default["default"].createElement("div", { className: cx$E("".concat(BASE_CLASS, "__icon")) },
+            React__default["default"].createElement("div", { className: cx$E("".concat(BASE_CLASS, "__icon-bar"), "".concat(BASE_CLASS, "__icon-bar--").concat(status)) }),
+            React__default["default"].createElement(IconItem, { className: cx$E("".concat(BASE_CLASS, "__icon-icon"), "".concat(BASE_CLASS, "__icon-icon--").concat(status)), icon: iconByType, alt: status })),
+        React__default["default"].createElement("div", { className: cx$E("".concat(BASE_CLASS, "__text")) },
+            React__default["default"].createElement("p", { className: cx$E("".concat(BASE_CLASS, "__text-title"), "".concat(BASE_CLASS, "__text-title--").concat(status)) }, title),
+            React__default["default"].createElement("p", { className: cx$E("".concat(BASE_CLASS, "__text-subtitle"), "".concat(BASE_CLASS, "__text-subtitle--").concat(status)) }, subtitle))));
 };
 var TimelineEvent = Component$1q;
 
@@ -7498,6 +7533,7 @@ var useContainerDesktop$1 = function (_a) {
 var ContainerDesktop$3 = function (_a) {
     var inputSearchProps = _a.inputSearchProps, selectedValues = _a.selectedValues, listOptions = _a.listOptions, removeValueToArray = _a.removeValueToArray, addValueToArray = _a.addValueToArray, numberOfSelectable = _a.numberOfSelectable, dropDownTitle = _a.dropDownTitle;
     var _b = useContainerDesktop$1({ numberOfSelectable: numberOfSelectable, selectedValues: selectedValues }), containerOptions = _b.containerOptions, menuPosition = _b.menuPosition, toggleDropdown = _b.toggleDropdown, limitOfSelectable = _b.limitOfSelectable, inputRef = _b.inputRef, isOpen = _b.isOpen, dropdownRef = _b.dropdownRef;
+    var container = React.useContext(ContainerContext).container;
     var hideComponent = React.useMemo(function () {
         return isOpen ? style$f['hide'] : '';
     }, [isOpen]);
@@ -7506,6 +7542,7 @@ var ContainerDesktop$3 = function (_a) {
             React__default["default"].createElement(DropDownButton$1, { title: dropDownTitle, onClick: toggleDropdown }))),
         React__default["default"].createElement("div", { className: "".concat(style$f["".concat(classMUI, "-container-options-tags-container")], " ").concat(hideComponent) }, selectedValues.map(function (itemSelected) { return (React__default["default"].createElement(Tags, { key: itemSelected.id, text: itemSelected.name, icon: Close, bgColor: "#FFF", onClick: function () { return removeValueToArray(itemSelected); } })); })),
         React__default["default"].createElement("div", { ref: containerOptions, className: "".concat(style$f["".concat(classMUI, "-container-options")]) }, isOpen &&
+            container &&
             ReactDOM__default["default"].createPortal(React__default["default"].createElement("div", { style: {
                     position: 'absolute',
                     top: "".concat(menuPosition.top - 60, "px "),
@@ -7515,7 +7552,7 @@ var ContainerDesktop$3 = function (_a) {
                 }, ref: dropdownRef, className: "".concat(style$f["".concat(classMUI, "-container-options__menu")]) },
                 inputSearchProps && React__default["default"].createElement(InputSearch, __assign({}, inputSearchProps)),
                 React__default["default"].createElement("div", { className: "".concat(style$f["".concat(classMUI, "-container-options__menu--tags")]) }, selectedValues.map(function (itemSelected) { return (React__default["default"].createElement(Tags, { key: itemSelected.id, text: itemSelected.name, icon: Close, bgColor: "#F4F4FA", onClick: function () { return removeValueToArray(itemSelected); } })); })),
-                React__default["default"].createElement("div", { className: "".concat(style$f["".concat(classMUI, "-container-options__menu--list")]) }, listOptions.map(function (value) { return (React__default["default"].createElement(SelectItem$1, { disable: !limitOfSelectable || selectedValues.includes(value), key: value.id, onClick: function () { return addValueToArray(value); }, text: value.name })); }))), document.body))));
+                React__default["default"].createElement("div", { className: "".concat(style$f["".concat(classMUI, "-container-options__menu--list")]) }, listOptions.map(function (value) { return (React__default["default"].createElement(SelectItem$1, { disable: !limitOfSelectable || selectedValues.includes(value), key: value.id, onClick: function () { return addValueToArray(value); }, text: value.name })); }))), container))));
 };
 
 var style$e = {"magneto-ui-container-options":"mg_container_mobile_magneto-ui-container-options_1caxk","magneto-ui-container-options-tags-container":"mg_container_mobile_magneto-ui-container-options-tags-container_1caxk","magneto-ui-container-options__menu":"mg_container_mobile_magneto-ui-container-options_menu_1caxk","magneto-ui-container-options__menu--tags":"mg_container_mobile_magneto-ui-container-options_menu--tags_1caxk","magneto-ui-container-options__menu--list":"mg_container_mobile_magneto-ui-container-options_menu--list_1caxk"};
@@ -8087,10 +8124,12 @@ var useContainerDesktop = function (_a) {
 var ContainerDesktop$1 = function (_a) {
     var listOptions = _a.listOptions, addValue = _a.addValue, dropDownTitle = _a.dropDownTitle, selectedValue = _a.selectedValue;
     var _b = useContainerDesktop({ addValue: addValue }), containerOptions = _b.containerOptions, menuPosition = _b.menuPosition, toggleDropdown = _b.toggleDropdown, isOpen = _b.isOpen, dropdownRef = _b.dropdownRef, inputRef = _b.inputRef, selectValue = _b.selectValue;
+    var container = React.useContext(ContainerContext).container;
     return (React__default["default"].createElement("div", { style: { zIndex: 999999 } },
         React__default["default"].createElement("div", { ref: inputRef },
             React__default["default"].createElement(DropDownButton, { title: dropDownTitle, onClick: toggleDropdown })),
         React__default["default"].createElement("div", { ref: containerOptions, className: "".concat(style$b["".concat(classMUI, "-container-options")]) }, isOpen &&
+            container &&
             ReactDOM__default["default"].createPortal(React__default["default"].createElement("div", { style: {
                     position: 'absolute',
                     top: "".concat(menuPosition.top - 8, "px "),
@@ -8098,7 +8137,7 @@ var ContainerDesktop$1 = function (_a) {
                     width: "".concat(menuPosition.width, "px"),
                     zIndex: 999999
                 }, ref: dropdownRef, className: "".concat(style$b["".concat(classMUI, "-container-options__menu")]) },
-                React__default["default"].createElement("div", { className: "".concat(style$b["".concat(classMUI, "-container-options__menu--list")]) }, listOptions.map(function (value) { return (React__default["default"].createElement(SelectItem, { selected: (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.id) === value.id, disable: (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.id) === value.id, key: value.id, onClick: function () { return selectValue(value.id); }, text: value.label })); }))), document.body))));
+                React__default["default"].createElement("div", { className: "".concat(style$b["".concat(classMUI, "-container-options__menu--list")]) }, listOptions.map(function (value) { return (React__default["default"].createElement(SelectItem, { selected: (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.id) === value.id, disable: (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.id) === value.id, key: value.id, onClick: function () { return selectValue(value.id); }, text: value.label })); }))), container))));
 };
 
 var style$a = {"magneto-ui-container-options":"mg_container_mobile_magneto-ui-container-options_16tb3","magneto-ui-container-options__menu":"mg_container_mobile_magneto-ui-container-options_menu_16tb3","magneto-ui-container-options__menu--list":"mg_container_mobile_magneto-ui-container-options_menu--list_16tb3"};
@@ -8710,22 +8749,20 @@ var Select2 = withClickOut(Component$o);
 
 var style$8 = {"magneto-ui-timeline":"mg_timeline_magneto-ui-timeline_lr29v"};
 
-var STATUS = {
-    CHECKED: 'checked',
-    CURRENT: 'current',
-    BLOCKED: 'blocked'
-};
 var Component$n = function (_a) {
-    var steps = _a.steps, currentStep = _a.currentStep, _b = _a.onClick, onClick = _b === void 0 ? function () { return ({}); } : _b;
+    var steps = _a.steps, currentStep = _a.currentStep, _b = _a.onClick, onClick = _b === void 0 ? function () { return ({}); } : _b, isNotBlocked = _a.isNotBlocked;
     currentStep = Math.max(currentStep, 1);
     var getStatus = function (index) {
         if (index + 1 < currentStep) {
-            return STATUS.CHECKED;
+            return exports.TimeLineItemStatus.CHECKED;
         }
         if (index + 1 === currentStep) {
-            return STATUS.CURRENT;
+            return exports.TimeLineItemStatus.CURRENT;
+        }
+        if (isNotBlocked) {
+            return exports.TimeLineItemStatus.UNLOCKED;
         }
-        return STATUS.BLOCKED;
+        return exports.TimeLineItemStatus.BLOCKED;
     };
     return (React__default["default"].createElement("div", { className: style$8["".concat(classMUI, "-timeline")] }, steps.map(function (_a, index) {
         var subtitle = _a.subtitle, title = _a.title;