magneto365.ui 2.65.9 → 2.67.0

package/dist/cjs/index.js

@@ -295,7 +295,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 +303,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
@@ -668,7 +668,7 @@ var Component$35 = function (_a) {
 };
 var Badge = Component$35;
 
-var styles$2V = {"magneto-ui-chart-bar":"mg_bar_chart_magneto-ui-chart-bar_by1hf","magneto-ui-chart-bar__popover":"mg_bar_chart_magneto-ui-chart-bar_popover_by1hf","popover-left":"mg_bar_chart_popover-left_by1hf","popover-right":"mg_bar_chart_popover-right_by1hf"};
+var styles$2V = {"magneto-ui-chart-bar":"mg_bar_chart_magneto-ui-chart-bar_1jzzq","magneto-ui-chart-bar__point":"mg_bar_chart_magneto-ui-chart-bar_point_1jzzq","magneto-ui-chart-bar__popover":"mg_bar_chart_magneto-ui-chart-bar_popover_1jzzq","popover-left":"mg_bar_chart_popover-left_1jzzq","popover-right":"mg_bar_chart_popover-right_1jzzq"};
 
 var numberToCurrency = function (currency, withSymbol) {
     if (withSymbol === void 0) { withSymbol = true; }
@@ -685,7 +685,7 @@ var EPositions;
 })(EPositions || (EPositions = {}));
 
 var Component$34 = function (_a) {
-    var range = _a.bin, percentage = _a.heightPercentage, jobText = _a.jobText, _b = _a.maxHeight, maxHeight = _b === void 0 ? 400 : _b, _c = _a.maxPercentage, maxPercentage = _c === void 0 ? 1 : _c;
+    var range = _a.bin, percentage = _a.heightPercentage, jobText = _a.jobText, point = _a.point, _b = _a.maxHeight, maxHeight = _b === void 0 ? 400 : _b, _c = _a.maxPercentage, maxPercentage = _c === void 0 ? 1 : _c;
     var barRef = React.useRef(null);
     var _d = React.useState(false), isHover = _d[0], setIsHover = _d[1];
     var _e = React.useMemo(function () { return range; }, [range]), minRange = _e[0], maxRange = _e[1];
@@ -712,7 +712,9 @@ var Component$34 = function (_a) {
     }, [isHover, jobText, maxRange, minRange, percentage, popoverPosition]);
     return (React__default["default"].createElement("div", { style: {
             height: Math.max((percentage / maxPercentage) * maxHeight, 1)
-        }, ref: barRef, className: styles$2V['magneto-ui-chart-bar'], onMouseEnter: function () { return setIsHover(true); }, onMouseLeave: function () { return setIsHover(false); } }, popoverContent));
+        }, ref: barRef, className: styles$2V['magneto-ui-chart-bar'], onMouseEnter: function () { return setIsHover(true); }, onMouseLeave: function () { return setIsHover(false); } },
+        React__default["default"].createElement("div", { className: styles$2V['magneto-ui-chart-bar__point'], style: { backgroundColor: point } }),
+        popoverContent));
 };
 var BarChart = Component$34;
 
@@ -1651,16 +1653,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 },
@@ -1705,17 +1707,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))));
 };
@@ -1726,10 +1728,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
@@ -1738,7 +1740,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;
@@ -1747,7 +1749,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
@@ -2054,10 +2056,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
@@ -2066,10 +2068,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
@@ -2078,7 +2080,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);
@@ -2102,9 +2104,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
@@ -2542,13 +2544,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
@@ -2717,7 +2719,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;
@@ -2728,7 +2730,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,
@@ -2746,11 +2748,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 = [
@@ -2985,44 +2987,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 })));
 };
@@ -3049,7 +3051,7 @@ var DrawerPortal = function (_a) {
 
 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];
@@ -3076,12 +3078,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
@@ -3148,10 +3150,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,
@@ -3166,15 +3168,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
@@ -3183,23 +3185,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,
@@ -3214,8 +3216,17 @@ var Component$2g = function (_a) {
     var maxHeight = _a.maxHeight, data = _a.data, mean = _a.mean, texts = _a.texts;
     var minValue = React.useMemo(function () { return data[0].bin[0]; }, [data]);
     var maxValue = React.useMemo(function () { return data[data.length - 1].bin[1]; }, [data]);
+    var _b = React.useMemo(function () {
+        var getHeightPercentage = function (_a) {
+            var heightPercentage = _a.heightPercentage;
+            return heightPercentage;
+        };
+        var shorterBar = Math.min.apply(Math, data.map(getHeightPercentage));
+        var talestBar = Math.max.apply(Math, data.map(getHeightPercentage));
+        return { talestBar: talestBar, shorterBar: shorterBar };
+    }, [data]), talestBar = _b.talestBar, shorterBar = _b.shorterBar;
     return (React__default["default"].createElement("div", { className: styles$2d['magneto-ui-chart-bars'] },
-        React__default["default"].createElement("div", { className: styles$2d['magneto-ui-chart-bars__chart'] }, data.map(function (bar, key) { return (React__default["default"].createElement(BarChart, __assign({ key: key }, bar, { jobText: texts.jobs, maxHeight: maxHeight }))); })),
+        React__default["default"].createElement("div", { className: styles$2d['magneto-ui-chart-bars__chart'] }, data.map(function (bar, key) { return (React__default["default"].createElement(BarChart, __assign({ key: key }, bar, { jobText: texts.jobs, maxHeight: maxHeight, point: talestBar == bar.heightPercentage || shorterBar == bar.heightPercentage ? '#1a324c' : undefined }))); })),
         React__default["default"].createElement("div", { className: styles$2d['magneto-ui-chart-bars__minmax'] },
             React__default["default"].createElement("p", null,
                 " ",
@@ -3470,13 +3481,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 })))));
 };
 /**
@@ -3486,11 +3497,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));
 };
@@ -3501,11 +3512,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));
 };
@@ -3516,7 +3527,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;
@@ -3524,7 +3535,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 })));
@@ -3542,11 +3553,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
@@ -4286,7 +4297,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];
@@ -4297,13 +4308,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); } })));
@@ -4514,7 +4525,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 () {
@@ -4531,13 +4542,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));
@@ -4547,7 +4558,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];
@@ -4572,17 +4583,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);
@@ -4591,7 +4602,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];
@@ -4606,16 +4617,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));
@@ -4625,7 +4636,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);
@@ -4641,8 +4652,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) {
@@ -4672,7 +4683,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++) {
@@ -4693,28 +4704,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) {
@@ -5465,7 +5476,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];
@@ -5479,9 +5490,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 })));
     })));
 };
@@ -5611,27 +5622,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,
@@ -5714,25 +5725,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 timelineIcons = {
+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 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;
 
@@ -6816,13 +6837,13 @@ var MagnetoSocialMedia = function (_a) {
         }))));
 };
 
-var style$o = {"mega-menu-cards":"mg_mega_menu_cards_mega-menu-cards_16j6z","mega-menu-cards__filter":"mg_mega_menu_cards_mega-menu-cards_filter_16j6z","mega-menu-cards__title":"mg_mega_menu_cards_mega-menu-cards_title_16j6z","mega-menu-cards__action":"mg_mega_menu_cards_mega-menu-cards_action_16j6z","mega-menu-cards__action--grey":"mg_mega_menu_cards_mega-menu-cards_action--grey_16j6z"};
+var style$o = {"mega-menu-cards":"mg_mega_menu_cards_mega-menu-cards_2819j","mega-menu-cards__filter":"mg_mega_menu_cards_mega-menu-cards_filter_2819j","mega-menu-cards__title":"mg_mega_menu_cards_mega-menu-cards_title_2819j","mega-menu-cards__action":"mg_mega_menu_cards_mega-menu-cards_action_2819j","mega-menu-cards__action--grey":"mg_mega_menu_cards_mega-menu-cards_action--grey_2819j"};
 
 var MegaMenuCards = function (_a) {
     var _b;
     var jobs = _a.jobs, action = _a.action, title = _a.title, actionTitle = _a.actionTitle, className = _a.className, filterProps = _a.filterProps, _c = _a.maxCards, maxCards = _c === void 0 ? 39 : _c;
     var renderTitle = useMediaQuery(title && (React__default["default"].createElement("div", { className: "".concat(style$o["mega-menu-cards__title"]) },
-        React__default["default"].createElement("h4", null, title),
+        React__default["default"].createElement("p", null, title),
         actionTitle && (React__default["default"].createElement(ButtonLink, { href: actionTitle.url, buttonText: actionTitle.label, onClick: actionTitle.onClick, prefixIcon: ArrowRight2, iconSize: 14, className: "".concat(style$o["mega-menu-cards__action--grey"]) })))), {
         md: title && actionTitle && (React__default["default"].createElement(ButtonLink, { href: actionTitle.url, buttonText: actionTitle.label, onClick: actionTitle.onClick, prefixIcon: ArrowRight2, iconSize: 14, className: "".concat(style$o["mega-menu-cards__action--grey"]) }))
     });
@@ -8699,22 +8720,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;