magneto365.ui 2.68.1 → 2.69.0-beta

package/dist/esm/index.js

@@ -260,7 +260,7 @@ var useMediaQuery = function (defaultValue, options) {
     return component;
 };
 
-var styles$2Y = {"magneto-ui-icon":"mg_icon_magneto-ui-icon_tp25u","magneto-ui-hover":"mg_icon_magneto-ui-hover_tp25u","magneto-ui-rotate":"mg_icon_magneto-ui-rotate_tp25u"};
+var styles$2Z = {"magneto-ui-icon":"mg_icon_magneto-ui-icon_tp25u","magneto-ui-hover":"mg_icon_magneto-ui-hover_tp25u","magneto-ui-rotate":"mg_icon_magneto-ui-rotate_tp25u"};
 
 function formatNumber(num) {
     if (typeof num !== 'number')
@@ -307,7 +307,7 @@ var classNames = {
     }
 };
 
-var cx$1d = classNames.bind(styles$2Y);
+var cx$1d = classNames.bind(styles$2Z);
 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 = useState(false), imageError = _d[0], setImageError = _d[1];
@@ -326,7 +326,7 @@ var Component$37 = function (_a) {
  */
 var IconItem = Component$37;
 
-var styles$2X = {"avatarComponent":"mg_avatar_avatarComponent_1upgt","magneto-ui-default-avatar":"mg_avatar_magneto-ui-default-avatar_1upgt"};
+var styles$2Y = {"avatarComponent":"mg_avatar_avatarComponent_1upgt","magneto-ui-default-avatar":"mg_avatar_magneto-ui-default-avatar_1upgt"};
 
 var Add = "https://static.magneto365.com/lib/assets/f738cef7b76c444f.svg";
 
@@ -368,8 +368,6 @@ var ArrowRight2 = "https://static.magneto365.com/lib/assets/ce1843403fbc32ff.svg
 
 var ArrowRightWhite = "https://static.magneto365.com/lib/assets/cc2f903ba305015e.svg";
 
-var ArrowSwapVertical = "https://static.magneto365.com/lib/assets/11314346afd968cf.svg";
-
 var Bell = "https://static.magneto365.com/lib/assets/b8b5d3e12f55ef1a.svg";
 
 var BookBlueBold = "https://static.magneto365.com/lib/assets/1d63e2974f98ed3e.svg";
@@ -654,15 +652,19 @@ var Youtube = "https://static.magneto365.com/lib/assets/f78dbede1bdf3dd0.svg";
 
 var YoutubeSolid = "https://static.magneto365.com/lib/assets/cdcc07646d43bd9d.svg";
 
+var FilterIcon = "https://static.magneto365.com/lib/assets/a9f25ebc43dd2922.svg";
+
+var SortIcon = "https://static.magneto365.com/lib/assets/3c9ef5949d25901a.svg";
+
 var Component$36 = function (_a) {
     var userImage = _a.userImage, fallbackImage = _a.fallbackImage, onClick = _a.onClick;
     var _b = useState(false), imageError = _b[0], setImageError = _b[1];
     var handleError = function () {
         setImageError(true);
     };
-    return (React.createElement("div", { className: styles$2X.avatarComponent, onClick: onClick },
+    return (React.createElement("div", { className: styles$2Y.avatarComponent, onClick: onClick },
         userImage && !imageError && React.createElement("img", { src: userImage, alt: "User Avatar", loading: "lazy", onError: handleError }),
-        (!userImage || imageError) && (React.createElement("div", { className: styles$2X['magneto-ui-default-avatar'] },
+        (!userImage || imageError) && (React.createElement("div", { className: styles$2Y['magneto-ui-default-avatar'] },
             React.createElement(IconItem, { icon: fallbackImage || User, hover: false })))));
 };
 /**
@@ -670,17 +672,17 @@ var Component$36 = function (_a) {
  */
 var Avatar = Component$36;
 
-var styles$2W = {"badge-count":"mg_badge_badge-count_15t5z","badge-count__animation":"mg_badge_badge-count_animation_15t5z","pulse":"mg_badge_pulse_15t5z"};
+var styles$2X = {"badge-count":"mg_badge_badge-count_15t5z","badge-count__animation":"mg_badge_badge-count_animation_15t5z","pulse":"mg_badge_pulse_15t5z"};
 
 var Component$35 = function (_a) {
     var _b = _a.number, number = _b === void 0 ? undefined : _b, className = _a.className;
-    return (React.createElement("p", { className: "".concat(styles$2W['badge-count'], " ").concat(className) },
-        React.createElement("span", { className: styles$2W['badge-count__animation'] }),
+    return (React.createElement("p", { className: "".concat(styles$2X['badge-count'], " ").concat(className) },
+        React.createElement("span", { className: styles$2X['badge-count__animation'] }),
         number && number));
 };
 var Badge = Component$35;
 
-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 styles$2W = {"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; }
@@ -718,14 +720,14 @@ var Component$34 = function (_a) {
         }
     }, [isHover]);
     var popoverContent = useMemo(function () {
-        return isHover && (React.createElement("div", { className: "".concat(styles$2V['magneto-ui-chart-bar__popover'], " ").concat(styles$2V["popover-".concat(popoverPosition)]) },
+        return isHover && (React.createElement("div", { className: "".concat(styles$2W['magneto-ui-chart-bar__popover'], " ").concat(styles$2W["popover-".concat(popoverPosition)]) },
             React.createElement("div", null, "".concat(numberToCurrency(minRange), " - ").concat(numberToCurrency(maxRange))),
             React.createElement("div", null, "".concat(Math.round(percentage * 100), "% ").concat(jobText))));
     }, [isHover, jobText, maxRange, minRange, percentage, popoverPosition]);
     return (React.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); } },
-        React.createElement("div", { className: styles$2V['magneto-ui-chart-bar__point'], style: { backgroundColor: point } }),
+        }, ref: barRef, className: styles$2W['magneto-ui-chart-bar'], onMouseEnter: function () { return setIsHover(true); }, onMouseLeave: function () { return setIsHover(false); } },
+        React.createElement("div", { className: styles$2W['magneto-ui-chart-bar__point'], style: { backgroundColor: point } }),
         popoverContent));
 };
 var BarChart = Component$34;
@@ -1126,7 +1128,7 @@ var menuSortButton = {
     size: 17
 };
 var iconFilterOrder = {
-    icon: ArrowSwapVertical,
+    icon: SortIcon,
     hover: false,
     size: 20
 };
@@ -1550,7 +1552,7 @@ var CNM = /** @class */ (function () {
     return CNM;
 }());
 
-var styles$2U = {"magneto-ui-bar-loader":"mg_bar_loader_magneto-ui-bar-loader_1f3jh","magneto-ui-bar-loader__bar":"mg_bar_loader_magneto-ui-bar-loader_bar_1f3jh","magneto-ui-bar-loader__bar--animated":"mg_bar_loader_magneto-ui-bar-loader_bar--animated_1f3jh","progress":"mg_bar_loader_progress_1f3jh","magneto-ui-bar-loader__bar--completed":"mg_bar_loader_magneto-ui-bar-loader_bar--completed_1f3jh"};
+var styles$2V = {"magneto-ui-bar-loader":"mg_bar_loader_magneto-ui-bar-loader_1f3jh","magneto-ui-bar-loader__bar":"mg_bar_loader_magneto-ui-bar-loader_bar_1f3jh","magneto-ui-bar-loader__bar--animated":"mg_bar_loader_magneto-ui-bar-loader_bar--animated_1f3jh","progress":"mg_bar_loader_progress_1f3jh","magneto-ui-bar-loader__bar--completed":"mg_bar_loader_magneto-ui-bar-loader_bar--completed_1f3jh"};
 
 var Component$33 = function (_a) {
     var className = _a.className, color = _a.color, percent = _a.percent;
@@ -1572,10 +1574,10 @@ var Component$33 = function (_a) {
         var _a;
         return (_a = {}, _a["".concat(BAR_LOADER_PREFIX, "-completed")] = "".concat(validateCompleted(percent), "%"), _a);
     }, [percent, validateCompleted]);
-    return (React.createElement("div", { className: CNM.get({ styles: styles$2U, cls: [className] }) },
-        React.createElement("div", { className: CNM.get({ styles: styles$2U, cls: ['bar-loader'] }), style: __assign(__assign({}, barColor), barCompleted) },
+    return (React.createElement("div", { className: CNM.get({ styles: styles$2V, cls: [className] }) },
+        React.createElement("div", { className: CNM.get({ styles: styles$2V, cls: ['bar-loader'] }), style: __assign(__assign({}, barColor), barCompleted) },
             React.createElement("div", { className: CNM.get({
-                    styles: styles$2U,
+                    styles: styles$2V,
                     cls: ['bar-loader__bar', percent !== undefined ? 'bar-loader__bar--completed' : 'bar-loader__bar--animated']
                 }) }))));
 };
@@ -1584,7 +1586,7 @@ var Component$33 = function (_a) {
  */
 var BarLoader = Component$33;
 
-var styles$2T = {"breadcrumbComponent":"mg_breadcrumb_breadcrumbComponent_vlbg8","magneto-ui-bc":"mg_breadcrumb_magneto-ui-bc_vlbg8","magneto-ui-bc-active":"mg_breadcrumb_magneto-ui-bc-active_vlbg8","no-transform":"mg_breadcrumb_no-transform_vlbg8"};
+var styles$2U = {"breadcrumbComponent":"mg_breadcrumb_breadcrumbComponent_vlbg8","magneto-ui-bc":"mg_breadcrumb_magneto-ui-bc_vlbg8","magneto-ui-bc-active":"mg_breadcrumb_magneto-ui-bc-active_vlbg8","no-transform":"mg_breadcrumb_no-transform_vlbg8"};
 
 var Component$32 = function (_a) {
     var breadcrumbText = _a.breadcrumbText, breadcrumbCustomText = _a.breadcrumbCustomText, queryParams = _a.queryParams, _b = _a.haveRedirect, haveRedirect = _b === void 0 ? true : _b, _c = _a.detailTitle, detailTitle = _c === void 0 ? '' : _c, breadCrumbFromServer = _a.breadCrumbFromServer, urlFromServer = _a.urlFromServer;
@@ -1592,7 +1594,7 @@ var Component$32 = function (_a) {
     var breadcrumbSplitText = breadcrumbs === null || breadcrumbs === void 0 ? void 0 : breadcrumbs.split('/');
     var lastIndexBC = (breadcrumbSplitText === null || breadcrumbSplitText === void 0 ? void 0 : breadcrumbSplitText.length) - 1;
     var haveDetailTitle = detailTitle !== '';
-    var detailTileStyle = detailTitle ? styles$2T['no-transform'] : '';
+    var detailTileStyle = detailTitle ? styles$2U['no-transform'] : '';
     var regexBase4 = /[0-9a-f]{8} [0-9a-f]{4} [0-9a-f]{4} [0-9a-f]{4} [0-9a-f]{12}/g;
     // This removes the base64 from the vacancy breadcrumbs
     var title = breadcrumbSplitText[lastIndexBC].replace(/-/g, ' ').replace(regexBase4, '');
@@ -1604,9 +1606,9 @@ var Component$32 = function (_a) {
                         "/ ",
                         href)));
             }),
-            React.createElement("p", { className: "".concat(styles$2T['magneto-ui-bc-active'], " ").concat(detailTileStyle) },
+            React.createElement("p", { className: "".concat(styles$2U['magneto-ui-bc-active'], " ").concat(detailTileStyle) },
                 "/ ",
-                haveDetailTitle ? detailTitle : title))) : (React.createElement(React.Fragment, null, breadcrumbSplitText.map(function (bc, i) { return (React.createElement("p", { className: "".concat(lastIndexBC == i ? styles$2T['magneto-ui-bc-active'] : '', " ").concat(styles$2T['magneto-ui-bc']), key: i },
+                haveDetailTitle ? detailTitle : title))) : (React.createElement(React.Fragment, null, breadcrumbSplitText.map(function (bc, i) { return (React.createElement("p", { className: "".concat(lastIndexBC == i ? styles$2U['magneto-ui-bc-active'] : '', " ").concat(styles$2U['magneto-ui-bc']), key: i },
             i > 0 && '/',
             " ",
             bc)); })));
@@ -1622,28 +1624,28 @@ var Component$32 = function (_a) {
         queryParams,
         lastIndexBC
     ]);
-    return React.createElement("div", { className: styles$2T.breadcrumbComponent }, breadCrumbsRender);
+    return React.createElement("div", { className: styles$2U.breadcrumbComponent }, breadCrumbsRender);
 };
 /**
  * Atom UI of breadcrumb
  */
 var Breadcrumb = Component$32;
 
-var styles$2S = {"magneto-ui-button":"mg_button_magneto-ui-button_2zrcl","magneto-ui-button__mobile-text":"mg_button_magneto-ui-button_mobile-text_2zrcl","magneto-ui-button__icon":"mg_button_magneto-ui-button_icon_2zrcl","hover-effect":"mg_button_hover-effect_2zrcl"};
+var styles$2T = {"magneto-ui-button":"mg_button_magneto-ui-button_2zrcl","magneto-ui-button__mobile-text":"mg_button_magneto-ui-button_mobile-text_2zrcl","magneto-ui-button__icon":"mg_button_magneto-ui-button_icon_2zrcl","hover-effect":"mg_button_hover-effect_2zrcl"};
 
 var Component$31 = function (_a) {
     var buttonText = _a.buttonText, buttonTitle = _a.buttonTitle, addHover = _a.addHover, onClick = _a.onClick, suffixIcon = _a.suffixIcon, prefixIcon = _a.prefixIcon, className = _a.className, _b = _a.iconSize, iconSize = _b === void 0 ? 20 : _b;
-    return (React.createElement("button", { className: "".concat(className, " ").concat(styles$2S['magneto-ui-button'], " ").concat(addHover ? styles$2S['hover-effect'] : '', " "), type: "button", onClick: onClick, title: buttonTitle },
-        typeof suffixIcon === 'string' ? (React.createElement(IconItem, { size: iconSize, icon: suffixIcon, hover: addHover, className: styles$2S['magneto-ui-button__icon'] })) : (suffixIcon),
-        buttonText && React.createElement("p", { className: styles$2S['magneto-ui-button__mobile-text'] }, buttonText),
-        typeof prefixIcon === 'string' ? (React.createElement(IconItem, { size: iconSize, icon: prefixIcon, hover: addHover, className: styles$2S['magneto-ui-button__icon'] })) : (prefixIcon)));
+    return (React.createElement("button", { className: "".concat(className, " ").concat(styles$2T['magneto-ui-button'], " ").concat(addHover ? styles$2T['hover-effect'] : '', " "), type: "button", onClick: onClick, title: buttonTitle },
+        typeof suffixIcon === 'string' ? (React.createElement(IconItem, { size: iconSize, icon: suffixIcon, hover: addHover, className: styles$2T['magneto-ui-button__icon'] })) : (suffixIcon),
+        buttonText && React.createElement("p", { className: styles$2T['magneto-ui-button__mobile-text'] }, buttonText),
+        typeof prefixIcon === 'string' ? (React.createElement(IconItem, { size: iconSize, icon: prefixIcon, hover: addHover, className: styles$2T['magneto-ui-button__icon'] })) : (prefixIcon)));
 };
 /**
  * UI Atom Component of Save Button
  */
 var Button = Component$31;
 
-var styles$2R = {"button-link":"mg_button_link_button-link_1iyy1","button-link__text":"mg_button_link_button-link_text_1iyy1"};
+var styles$2S = {"button-link":"mg_button_link_button-link_1iyy1","button-link__text":"mg_button_link_button-link_text_1iyy1"};
 
 var Component$30 = function (_a) {
     var buttonText = _a.buttonText, onClick = _a.onClick, suffixIcon = _a.suffixIcon, prefixIcon = _a.prefixIcon, className = _a.className, _b = _a.iconSize, iconSize = _b === void 0 ? 20 : _b, href = _a.href, rel = _a.rel, target = _a.target;
@@ -1653,19 +1655,19 @@ var Component$30 = function (_a) {
             onClick();
         }
     }, [onClick]);
-    return (React.createElement("a", { className: "".concat(className ? className : styles$2R['button-link']), type: "button", onClick: handleClick, href: href, rel: rel, target: target },
-        suffixIcon && (React.createElement(IconItem, { size: iconSize, icon: suffixIcon, hover: true, className: styles$2R['button-link__icon'] })),
-        buttonText && React.createElement("p", { className: styles$2R['button-link__text'] }, buttonText),
-        prefixIcon && (React.createElement(IconItem, { size: iconSize, icon: prefixIcon, hover: true, className: styles$2R['button-link__icon'] }))));
+    return (React.createElement("a", { className: "".concat(className ? className : styles$2S['button-link']), type: "button", onClick: handleClick, href: href, rel: rel, target: target },
+        suffixIcon && (React.createElement(IconItem, { size: iconSize, icon: suffixIcon, hover: true, className: styles$2S['button-link__icon'] })),
+        buttonText && React.createElement("p", { className: styles$2S['button-link__text'] }, buttonText),
+        prefixIcon && (React.createElement(IconItem, { size: iconSize, icon: prefixIcon, hover: true, className: styles$2S['button-link__icon'] }))));
 };
 /**
  * UI Atom Component of Save Button
  */
 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 styles$2R = {"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$1c = classNames.bind(styles$2Q);
+var cx$1c = classNames.bind(styles$2R);
 var defaultCheck = function (_a) {
     var type = _a.type, checked = _a.checked;
     if (type === 'background')
@@ -1717,9 +1719,9 @@ var context$2 = /*#__PURE__*/Object.freeze({
     useCollapse: useCollapse
 });
 
-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 styles$2Q = {"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$1b = classNames.bind(styles$2P);
+var cx$1b = classNames.bind(styles$2Q);
 var Component$2_ = function (_a) {
     var className = _a.className, children = _a.children, props = __rest(_a, ["className", "children"]);
     var open = useCollapse().open;
@@ -1738,9 +1740,9 @@ var Component$2_ = function (_a) {
  */
 var CollapseBody = Component$2_;
 
-var styles$2O = {"magneto-ui-collapse-header":"mg_collapse_header_magneto-ui-collapse-header_1wc3x"};
+var styles$2P = {"magneto-ui-collapse-header":"mg_collapse_header_magneto-ui-collapse-header_1wc3x"};
 
-var cx$1a = classNames.bind(styles$2O);
+var cx$1a = classNames.bind(styles$2P);
 var Component$2Z = function (_a) {
     var children = _a.children, className = _a.className, props = __rest(_a, ["children", "className"]);
     return (React.createElement("header", __assign({ className: cx$1a('magneto-ui-collapse-header', className) }, props), children));
@@ -1750,9 +1752,9 @@ var Component$2Z = function (_a) {
  */
 var CollapseHeader = Component$2Z;
 
-var styles$2N = {"magneto-ui-collapse-toggler":"mg_collapse_toggler_magneto-ui-collapse-toggler_1ngmx"};
+var styles$2O = {"magneto-ui-collapse-toggler":"mg_collapse_toggler_magneto-ui-collapse-toggler_1ngmx"};
 
-var cx$19 = classNames.bind(styles$2N);
+var cx$19 = classNames.bind(styles$2O);
 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;
@@ -1778,7 +1780,7 @@ var Component$2X = function (_a) {
  */
 var Collapse = Object.assign(Component$2X, __assign({ Body: CollapseBody, Header: CollapseHeader, Toggler: CollapseToggler }, context$2));
 
-var styles$2M = {"magneto-ui-comparative-counter":"mg_comparative_counter_magneto-ui-comparative-counter_1ue4r","error-label":"mg_comparative_counter_error-label_1ue4r"};
+var styles$2N = {"magneto-ui-comparative-counter":"mg_comparative_counter_magneto-ui-comparative-counter_1ue4r","error-label":"mg_comparative_counter_error-label_1ue4r"};
 
 var nf = new Intl.NumberFormat('de-DE');
 var Component$2W = function (_a) {
@@ -1786,7 +1788,7 @@ var Component$2W = function (_a) {
     var currentHigherMax = useMemo(function () {
         return current > max;
     }, [current, max]);
-    return (React.createElement("p", { style: { textAlign: position }, className: "".concat(styles$2M["".concat(classMUI, "-comparative-counter")], " ").concat(currentHigherMax ? styles$2M['error-label'] : '') },
+    return (React.createElement("p", { style: { textAlign: position }, className: "".concat(styles$2N["".concat(classMUI, "-comparative-counter")], " ").concat(currentHigherMax ? styles$2N['error-label'] : '') },
         nf.format(current),
         React.createElement("span", null,
             " / ",
@@ -1794,23 +1796,23 @@ var Component$2W = function (_a) {
 };
 var ComparativeCounter = Component$2W;
 
-var styles$2L = {"magneto-ui--date-dropdown__icon":"mg_date_dropdown_magneto-ui--date-dropdown_icon_1xs1p","magneto-ui--date-dropdown__wrapper":"mg_date_dropdown_magneto-ui--date-dropdown_wrapper_1xs1p","magneto-ui--date-dropdown__select":"mg_date_dropdown_magneto-ui--date-dropdown_select_1xs1p","magneto-ui--date-dropdown__option":"mg_date_dropdown_magneto-ui--date-dropdown_option_1xs1p"};
+var styles$2M = {"magneto-ui--date-dropdown__icon":"mg_date_dropdown_magneto-ui--date-dropdown_icon_1xs1p","magneto-ui--date-dropdown__wrapper":"mg_date_dropdown_magneto-ui--date-dropdown_wrapper_1xs1p","magneto-ui--date-dropdown__select":"mg_date_dropdown_magneto-ui--date-dropdown_select_1xs1p","magneto-ui--date-dropdown__option":"mg_date_dropdown_magneto-ui--date-dropdown_option_1xs1p"};
 
 var Component$2V = function (_a) {
     var placeholderLabel = _a.placeholderLabel, dateOptions = _a.dateOptions, _b = _a.selectedOption, selectedOption = _b === void 0 ? '' : _b, onOptionChanged = _a.onOptionChanged, _c = _a.disabled, disabled = _c === void 0 ? false : _c;
     var disabledArrow = useMemo(function () {
         if (disabled)
-            return (React.createElement(IconItem, { className: styles$2L['magneto-ui--date-dropdown__icon'], icon: ArrowDown2, alt: "arrow-icon", size: 24 }));
+            return (React.createElement(IconItem, { className: styles$2M['magneto-ui--date-dropdown__icon'], icon: ArrowDown2, alt: "arrow-icon", size: 24 }));
         return React.createElement(IconItem, { icon: ArrowDown3, alt: "arrow-icon", size: 24 });
     }, [disabled]);
-    return (React.createElement("div", { className: styles$2L['magneto-ui--date-dropdown__wrapper'] },
-        React.createElement("select", { className: styles$2L["magneto-ui--date-dropdown__select"], value: selectedOption, onChange: onOptionChanged, disabled: disabled },
-            React.createElement("option", { className: styles$2L['magneto-ui--date-dropdown__option'], value: "", disabled: true, hidden: true }, placeholderLabel), dateOptions === null || dateOptions === void 0 ? void 0 :
+    return (React.createElement("div", { className: styles$2M['magneto-ui--date-dropdown__wrapper'] },
+        React.createElement("select", { className: styles$2M["magneto-ui--date-dropdown__select"], value: selectedOption, onChange: onOptionChanged, disabled: disabled },
+            React.createElement("option", { className: styles$2M['magneto-ui--date-dropdown__option'], value: "", disabled: true, hidden: true }, placeholderLabel), dateOptions === null || dateOptions === void 0 ? void 0 :
             dateOptions.map(function (_a) {
                 var optionValue = _a.optionValue, optionLabel = _a.optionLabel;
-                return (React.createElement("option", { className: styles$2L['magneto-ui--date-dropdown__option'], key: optionValue, value: optionValue }, optionLabel));
+                return (React.createElement("option", { className: styles$2M['magneto-ui--date-dropdown__option'], key: optionValue, value: optionValue }, optionLabel));
             })),
-        React.createElement("span", { className: styles$2L['magneto-ui--date-dropdown__icon'] }, disabledArrow)));
+        React.createElement("span", { className: styles$2M['magneto-ui--date-dropdown__icon'] }, disabledArrow)));
 };
 var DateDropdown = Component$2V;
 
@@ -1867,7 +1869,7 @@ var fixArrayDate = function (array) {
     return dateArray.setArray(array).fixMonth().getArray();
 };
 
-var styles$2K = {"date-input":"mg_date_input_date-input_1o5wy","date-input__input":"mg_date_input_date-input_input_1o5wy","date-input__separator":"mg_date_input_date-input_separator_1o5wy","date-input__separator--filled":"mg_date_input_date-input_separator--filled_1o5wy","date-input--fit":"mg_date_input_date-input--fit_1o5wy","date-input--error":"mg_date_input_date-input--error_1o5wy","date-input__left":"mg_date_input_date-input_left_1o5wy","date-input__right":"mg_date_input_date-input_right_1o5wy"};
+var styles$2L = {"date-input":"mg_date_input_date-input_1o5wy","date-input__input":"mg_date_input_date-input_input_1o5wy","date-input__separator":"mg_date_input_date-input_separator_1o5wy","date-input__separator--filled":"mg_date_input_date-input_separator--filled_1o5wy","date-input--fit":"mg_date_input_date-input--fit_1o5wy","date-input--error":"mg_date_input_date-input--error_1o5wy","date-input__left":"mg_date_input_date-input_left_1o5wy","date-input__right":"mg_date_input_date-input_right_1o5wy"};
 
 // placeholder to every input.
 var placeholder = ['D', 'D', 'M', 'M', 'A', 'A', 'A', 'A'];
@@ -1978,50 +1980,50 @@ var Component$2U = function (_a) {
         }
     }, []);
     return (React.createElement("div", { className: [
-            styles$2K['date-input'],
+            styles$2L['date-input'],
             className,
-            fit ? styles$2K['date-input--fit'] : '',
-            hasError ? styles$2K['date-input--error'] : ''
+            fit ? styles$2L['date-input--fit'] : '',
+            hasError ? styles$2L['date-input--error'] : ''
         ].join(' ') },
-        React.createElement("div", { className: styles$2K['date-input__left'], onClick: function () {
+        React.createElement("div", { className: styles$2L['date-input__left'], onClick: function () {
                 var _a;
                 (_a = inputsRef.current[0]) === null || _a === void 0 ? void 0 : _a.focus();
             } }),
         internalValues.map(function (value, index) { return (React.createElement(React.Fragment, { key: index },
             [2, 4].includes(index) ? (
             // include / separator in date (DD / MM / YYYY)
-            React.createElement("span", { className: [styles$2K['date-input__separator'], value ? styles$2K['date-input__separator--filled'] : ''].join(' ') }, "/")) : null,
-            React.createElement("input", { className: styles$2K['date-input__input'], style: { width: width }, type: "text", maxLength: 1, value: value, placeholder: placeholder[index], onChange: function (e) { return handleChange(index, e.target.value); }, onKeyDown: function (e) { return handleKeyDown(index, e.key); }, onPaste: function (e) { return handlePaste(index, e); }, ref: function (el) { return (inputsRef.current[index] = el); }, inputMode: "numeric" }))); }),
-        React.createElement("div", { className: styles$2K['date-input__right'], onClick: function () {
+            React.createElement("span", { className: [styles$2L['date-input__separator'], value ? styles$2L['date-input__separator--filled'] : ''].join(' ') }, "/")) : null,
+            React.createElement("input", { className: styles$2L['date-input__input'], style: { width: width }, type: "text", maxLength: 1, value: value, placeholder: placeholder[index], onChange: function (e) { return handleChange(index, e.target.value); }, onKeyDown: function (e) { return handleKeyDown(index, e.key); }, onPaste: function (e) { return handlePaste(index, e); }, ref: function (el) { return (inputsRef.current[index] = el); }, inputMode: "numeric" }))); }),
+        React.createElement("div", { className: styles$2L['date-input__right'], onClick: function () {
                 var _a;
                 (_a = inputsRef.current[inputsRef.current.length - 1]) === null || _a === void 0 ? void 0 : _a.focus();
             } })));
 };
 var DateInput = Component$2U;
 
-var style$15 = {"divider":"mg_divider_divider_1vn87"};
+var style$14 = {"divider":"mg_divider_divider_1vn87"};
 
 var Component$2T = function (_a) {
     var _b = _a.direction, direction = _b === void 0 ? 'HORIZONTAL' : _b, _c = _a.spacing, spacing = _c === void 0 ? 0 : _c;
     var inlineStyle = direction == 'HORIZONTAL'
         ? { width: 'calc(100% - 10px)', height: 1, margin: "".concat(spacing, "px 0px") }
         : { width: 1, margin: "0px ".concat(spacing, "px ") };
-    return React.createElement("div", { style: inlineStyle, className: style$15.divider });
+    return React.createElement("div", { style: inlineStyle, className: style$14.divider });
 };
 /**
  * Atom UI Divider Component
  */
 var Divider = Component$2T;
 
-var styles$2J = {"dots-loader":"mg_dots_loader_dots-loader_zwly0","dots-loader__dot":"mg_dots_loader_dots-loader_dot_zwly0","bounce":"mg_dots_loader_bounce_zwly0"};
+var styles$2K = {"dots-loader":"mg_dots_loader_dots-loader_zwly0","dots-loader__dot":"mg_dots_loader_dots-loader_dot_zwly0","bounce":"mg_dots_loader_bounce_zwly0"};
 
 var Component$2S = function (_a) {
     var _b = _a.count, count = _b === void 0 ? 3 : _b, _c = _a.color, color = _c === void 0 ? '#000' : _c;
-    return (React.createElement("div", { className: styles$2J['dots-loader'] }, Array.from({ length: count }).map(function (_, index) { return (React.createElement("span", { key: index, className: styles$2J['dots-loader__dot'], style: { animationDelay: "".concat(index * 0.2, "s"), backgroundColor: color } })); })));
+    return (React.createElement("div", { className: styles$2K['dots-loader'] }, Array.from({ length: count }).map(function (_, index) { return (React.createElement("span", { key: index, className: styles$2K['dots-loader__dot'], style: { animationDelay: "".concat(index * 0.2, "s"), backgroundColor: color } })); })));
 };
 var DotsLoader = Component$2S;
 
-var styles$2I = {"magneto-ui-flat-loader":"mg_flat_loader_magneto-ui-flat-loader_q96bq","rotation":"mg_flat_loader_rotation_q96bq"};
+var styles$2J = {"magneto-ui-flat-loader":"mg_flat_loader_magneto-ui-flat-loader_q96bq","rotation":"mg_flat_loader_rotation_q96bq"};
 
 var Component$2R = function (_a) {
     var color = _a.color, size = _a.size, secondColor = _a.secondColor;
@@ -2037,38 +2039,38 @@ var Component$2R = function (_a) {
             height: '15px'
         };
     }, [size]);
-    return (React.createElement("div", { style: __assign(__assign({}, loadingSize), { border: "2px solid ".concat(color || '#090467'), borderBottomColor: secondColor || 'white' }), className: styles$2I["".concat(classMUI, "-flat-loader")] }));
+    return (React.createElement("div", { style: __assign(__assign({}, loadingSize), { border: "2px solid ".concat(color || '#090467'), borderBottomColor: secondColor || 'white' }), className: styles$2J["".concat(classMUI, "-flat-loader")] }));
 };
 var FlatLoader = Component$2R;
 
-var styles$2H = {"headerTabComponent":"mg_header_tab_headerTabComponent_1mp3q","headerTabComponent__count":"mg_header_tab_headerTabComponent_count_1mp3q","headerTabComponent__text":"mg_header_tab_headerTabComponent_text_1mp3q"};
+var styles$2I = {"headerTabComponent":"mg_header_tab_headerTabComponent_1mp3q","headerTabComponent__count":"mg_header_tab_headerTabComponent_count_1mp3q","headerTabComponent__text":"mg_header_tab_headerTabComponent_text_1mp3q"};
 
 var Component$2Q = function (_a) {
     var tabType = _a.tabType, tabText = _a.tabText, url = _a.url, isActive = _a.isActive, _b = _a.count, count = _b === void 0 ? 0 : _b;
     var TabLink = tabType === 'tabOption' ? url : '';
-    return (React.createElement(React.Fragment, null, tabType === 'tabTitle' ? (React.createElement("div", { className: styles$2H.headerTabComponent, "data-tab-type": "tabTitle" },
-        count > 0 && React.createElement(Badge, { number: count, className: styles$2H['headerTabComponent__count'] }),
-        React.createElement("p", { className: styles$2H['headerTabComponent__text'] }, tabText))) : (React.createElement("a", { className: styles$2H.headerTabComponent, href: TabLink, "data-tab-type": "tabOption", "data-is-active": isActive },
-        count > 0 && React.createElement(Badge, { number: count, className: styles$2H['headerTabComponent__count'] }),
-        React.createElement("p", { className: styles$2H['headerTabComponent__text'] }, tabText)))));
+    return (React.createElement(React.Fragment, null, tabType === 'tabTitle' ? (React.createElement("div", { className: styles$2I.headerTabComponent, "data-tab-type": "tabTitle" },
+        count > 0 && React.createElement(Badge, { number: count, className: styles$2I['headerTabComponent__count'] }),
+        React.createElement("p", { className: styles$2I['headerTabComponent__text'] }, tabText))) : (React.createElement("a", { className: styles$2I.headerTabComponent, href: TabLink, "data-tab-type": "tabOption", "data-is-active": isActive },
+        count > 0 && React.createElement(Badge, { number: count, className: styles$2I['headerTabComponent__count'] }),
+        React.createElement("p", { className: styles$2I['headerTabComponent__text'] }, tabText)))));
 };
 /**
  * UI Atom component for HeaderTab
  */
 var HeaderTab = Component$2Q;
 
-var styles$2G = {"magneto-ui-play-button":"mg_image_magneto-ui-play-button_7q9yc"};
+var styles$2H = {"magneto-ui-play-button":"mg_image_magneto-ui-play-button_7q9yc"};
 
 var Image = function (_a) {
     var image = _a.image, alt = _a.alt, playIcon = _a.playIcon, className = _a.className;
     return (React.createElement(React.Fragment, null,
         React.createElement("img", { src: image, alt: alt, loading: "lazy", className: className }),
-        playIcon && React.createElement("div", { className: styles$2G['magneto-ui-play-button'] }, playIcon)));
+        playIcon && React.createElement("div", { className: styles$2H['magneto-ui-play-button'] }, playIcon)));
 };
 
-var style$14 = {"magneto-ui-input-file-button":"mg_input_file_button_magneto-ui-input-file-button_18zx0"};
+var style$13 = {"magneto-ui-input-file-button":"mg_input_file_button_magneto-ui-input-file-button_18zx0"};
 
-var cx$18 = classNames.bind(style$14);
+var cx$18 = classNames.bind(style$13);
 var Component$2P = function (_a) {
     var children = _a.children, className = _a.className, props = __rest(_a, ["children", "className"]);
     return (React.createElement("button", __assign({ className: cx$18('magneto-ui-input-file-button', className) }, props), children));
@@ -2078,9 +2080,9 @@ var Component$2P = function (_a) {
  */
 var InputFileButton = Component$2P;
 
-var style$13 = {"magneto-ui-input-file-container":"mg_input_file_container_magneto-ui-input-file-container_1b7ef"};
+var style$12 = {"magneto-ui-input-file-container":"mg_input_file_container_magneto-ui-input-file-container_1b7ef"};
 
-var cx$17 = classNames.bind(style$13);
+var cx$17 = classNames.bind(style$12);
 var Component$2O = function (_a) {
     var className = _a.className, children = _a.children, props = __rest(_a, ["className", "children"]);
     return (React.createElement("div", __assign({ className: cx$17('magneto-ui-input-file-container', className) }, props), children));
@@ -2090,9 +2092,9 @@ var Component$2O = function (_a) {
  */
 var InputFileContainer = Component$2O;
 
-var style$12 = {"magneto-ui-input-file":"mg_input_file_magneto-ui-input-file_18kpr"};
+var style$11 = {"magneto-ui-input-file":"mg_input_file_magneto-ui-input-file_18kpr"};
 
-var cx$16 = classNames.bind(style$12);
+var cx$16 = classNames.bind(style$11);
 var Component$2N = function (_a) {
     var children = _a.children, className = _a.className, onChange = _a.onChange, props = __rest(_a, ["children", "className", "onChange"]);
     var inputFileRef = useRef(null);
@@ -2128,39 +2130,39 @@ var InputFile = Object.assign(Component$2N, {
     Container: InputFileContainer
 });
 
-var style$11 = {"magneto-ui-container":"mg_input_search_magneto-ui-container_171v5","magneto-ui-container__input-search":"mg_input_search_magneto-ui-container_input-search_171v5","magneto-ui-container__input-search--btn":"mg_input_search_magneto-ui-container_input-search--btn_171v5","magneto-ui-container__input-search--icon":"mg_input_search_magneto-ui-container_input-search--icon_171v5"};
+var style$10 = {"magneto-ui-container":"mg_input_search_magneto-ui-container_171v5","magneto-ui-container__input-search":"mg_input_search_magneto-ui-container_input-search_171v5","magneto-ui-container__input-search--btn":"mg_input_search_magneto-ui-container_input-search--btn_171v5","magneto-ui-container__input-search--icon":"mg_input_search_magneto-ui-container_input-search--icon_171v5"};
 
 var InputSearch = function (_a) {
     var _b = _a.inputValue, inputValue = _b === void 0 ? '' : _b, onChange = _a.onChange, closeOnClick = _a.closeOnClick, placeholder = _a.placeholder, searchOnClick = _a.searchOnClick;
     var hasASearchFunction = useMemo(function () {
         if (searchOnClick) {
-            return (React.createElement("button", { className: style$11["".concat(classMUI, "-container__input-search--btn")], onClick: searchOnClick },
-                React.createElement(IconItem, { className: style$11["".concat(classMUI, "-container__input-search--icon")], icon: SearchIcon, alt: "search-icon" })));
+            return (React.createElement("button", { className: style$10["".concat(classMUI, "-container__input-search--btn")], onClick: searchOnClick },
+                React.createElement(IconItem, { className: style$10["".concat(classMUI, "-container__input-search--icon")], icon: SearchIcon, alt: "search-icon" })));
         }
-        return (React.createElement(IconItem, { className: style$11["".concat(classMUI, "-container__input-search--icon")], icon: SearchIcon, alt: "search-icon" }));
+        return (React.createElement(IconItem, { className: style$10["".concat(classMUI, "-container__input-search--icon")], icon: SearchIcon, alt: "search-icon" }));
     }, [searchOnClick]);
-    return (React.createElement("div", { className: style$11["".concat(classMUI, "-container")] },
-        React.createElement("input", { className: style$11["".concat(classMUI, "-container__input-search")], placeholder: placeholder, style: { flex: 1 }, value: inputValue, onChange: onChange, type: "text" }),
-        inputValue.length !== 0 ? (React.createElement("button", { className: style$11["".concat(classMUI, "-container__input-search--btn")], onClick: closeOnClick },
+    return (React.createElement("div", { className: style$10["".concat(classMUI, "-container")] },
+        React.createElement("input", { className: style$10["".concat(classMUI, "-container__input-search")], placeholder: placeholder, style: { flex: 1 }, value: inputValue, onChange: onChange, type: "text" }),
+        inputValue.length !== 0 ? (React.createElement("button", { className: style$10["".concat(classMUI, "-container__input-search--btn")], onClick: closeOnClick },
             React.createElement(IconItem, { icon: Close, alt: "search-icon" }))) : (hasASearchFunction)));
 };
 
-var styles$2F = {"magneto-ui-job-company-logo":"mg_job_company_logo_magneto-ui-job-company-logo_roy42"};
+var styles$2G = {"magneto-ui-job-company-logo":"mg_job_company_logo_magneto-ui-job-company-logo_roy42"};
 
 var Component$2M = function (_a) {
     var offerCompanyLogo = _a.offerCompanyLogo;
     if (typeof offerCompanyLogo === 'string' || !offerCompanyLogo) {
-        return (React.createElement("div", { className: styles$2F['magneto-ui-job-company-logo'] },
+        return (React.createElement("div", { className: styles$2G['magneto-ui-job-company-logo'] },
             React.createElement("img", { src: offerCompanyLogo ? offerCompanyLogo : NoLogo, loading: "lazy", width: '100px', height: '100px' })));
     }
-    return React.createElement("div", { className: styles$2F['magneto-ui-job-company-logo'] }, offerCompanyLogo);
+    return React.createElement("div", { className: styles$2G['magneto-ui-job-company-logo'] }, offerCompanyLogo);
 };
 /**
  * UI Atom component of Company Logo
  */
 var JobCompanyLogo = Component$2M;
 
-var styles$2E = {"magneto-ui-job-header":"mg_job_header_magneto-ui-job-header_vn7ok","magneto-ui-job-header__title":"mg_job_header_magneto-ui-job-header_title_vn7ok","magneto-ui-job-header__subtitle":"mg_job_header_magneto-ui-job-header_subtitle_vn7ok","magneto-ui-job-header__link":"mg_job_header_magneto-ui-job-header_link_vn7ok"};
+var styles$2F = {"magneto-ui-job-header":"mg_job_header_magneto-ui-job-header_vn7ok","magneto-ui-job-header__title":"mg_job_header_magneto-ui-job-header_title_vn7ok","magneto-ui-job-header__subtitle":"mg_job_header_magneto-ui-job-header_subtitle_vn7ok","magneto-ui-job-header__link":"mg_job_header_magneto-ui-job-header_link_vn7ok"};
 
 var Component$2L = function (_a) {
     var title = _a.title, styles = _a.styles;
@@ -2186,16 +2188,16 @@ var Component$2J = function (_a) {
         if (isHidden || !offerCompanyName)
             return React.createElement(Fragment, null);
         if (offerCompanyLink) {
-            return (React.createElement("a", { className: styles$2E['magneto-ui-job-header__link'], href: offerCompanyLink, title: offerCompanyName }, offerCompanyName));
+            return (React.createElement("a", { className: styles$2F['magneto-ui-job-header__link'], href: offerCompanyLink, title: offerCompanyName }, offerCompanyName));
         }
-        return React.createElement("h2", { className: styles$2E['magneto-ui-job-header__subtitle'] }, offerCompanyName);
+        return React.createElement("h2", { className: styles$2F['magneto-ui-job-header__subtitle'] }, offerCompanyName);
     }, [isHidden, offerCompanyLink, offerCompanyName]);
     var GenerateTitle = function () {
         if (typeTitle === TYPE_TITLE.SUB_TITLE)
-            return React.createElement(SubTitleJobDetails, { styles: styles$2E['magneto-ui-job-header__title'], title: String(offerTitle) });
-        return React.createElement(MainTitleJobDetails, { styles: styles$2E['magneto-ui-job-header__title'], title: String(offerTitle) });
+            return React.createElement(SubTitleJobDetails, { styles: styles$2F['magneto-ui-job-header__title'], title: String(offerTitle) });
+        return React.createElement(MainTitleJobDetails, { styles: styles$2F['magneto-ui-job-header__title'], title: String(offerTitle) });
     };
-    return (React.createElement("div", { className: styles$2E['magneto-ui-job-header'] },
+    return (React.createElement("div", { className: styles$2F['magneto-ui-job-header'] },
         GenerateTitle(),
         showCompanyName));
 };
@@ -2204,7 +2206,7 @@ var Component$2J = function (_a) {
  */
 var JobHeader = Component$2J;
 
-var styles$2D = {"linkComponent":"mg_link_linkComponent_1sftl"};
+var styles$2E = {"linkComponent":"mg_link_linkComponent_1sftl"};
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 var toCSSVariables = function (input) {
@@ -2223,7 +2225,7 @@ var toCSSVariables = function (input) {
 var Component$2I = function (_a) {
     var type = _a.type, href = _a.href, text = _a.text, title = _a.title, iconProps = _a.iconProps, linkStyles = _a.linkStyles, isMobile = _a.isMobile, rel = _a.rel, target = _a.target;
     var stylesValue = useMemo(function () { return toCSSVariables(linkStyles); }, [linkStyles]);
-    return (React.createElement("a", { className: styles$2D.linkComponent, style: stylesValue, href: href, title: title ? title : text, "data-link-type": type, "data-is-mobile": isMobile, rel: rel, target: target },
+    return (React.createElement("a", { className: styles$2E.linkComponent, style: stylesValue, href: href, title: title ? title : text, "data-link-type": type, "data-is-mobile": isMobile, rel: rel, target: target },
         iconProps && React.createElement(IconItem, __assign({}, iconProps)),
         !isMobile && React.createElement("p", null, text)));
 };
@@ -2232,11 +2234,11 @@ var Component$2I = function (_a) {
  */
 var Link = Component$2I;
 
-var styles$2C = {"loadingComponent":"mg_loading_loadingComponent_qi83n","animate":"mg_loading_animate_qi83n"};
+var styles$2D = {"loadingComponent":"mg_loading_loadingComponent_qi83n","animate":"mg_loading_animate_qi83n"};
 
 var Component$2H = function (_a) {
     var loadingIcon = _a.loadingIcon;
-    return (React.createElement("div", { className: styles$2C.loadingComponent },
+    return (React.createElement("div", { className: styles$2D.loadingComponent },
         React.createElement(IconItem, __assign({}, loadingIcon))));
 };
 /**
@@ -2244,7 +2246,7 @@ var Component$2H = function (_a) {
  */
 var Loading = Component$2H;
 
-var style$10 = {"magneto-ui-logo":"mg_logo_magneto-ui-logo_e7jog","magneto-ui-isologo":"mg_logo_magneto-ui-isologo_e7jog"};
+var style$$ = {"magneto-ui-logo":"mg_logo_magneto-ui-logo_e7jog","magneto-ui-isologo":"mg_logo_magneto-ui-isologo_e7jog"};
 
 var Component$2G = function (_a) {
     var fallbackImage = _a.fallbackImage, _b = _a.showDefaultFallback, showDefaultFallback = _b === void 0 ? true : _b, _c = _a.isoView, isoView = _c === void 0 ? false : _c, logo = _a.logo, isoType = _a.isoType, alt = _a.alt;
@@ -2256,11 +2258,11 @@ var Component$2G = function (_a) {
     var logoWidth = useMemo(function () { return (isoView ? 'magneto-ui-isologo' : 'magneto-ui-logo'); }, [isoView]);
     if (!logoSrc && !showDefaultFallback)
         return null;
-    return (React.createElement("img", { className: style$10[logoWidth], src: logoSrc, alt: alt, width: isoView ? '25px' : '110px', height: "auto", loading: "lazy", onError: handleError }));
+    return (React.createElement("img", { className: style$$[logoWidth], src: logoSrc, alt: alt, width: isoView ? '25px' : '110px', height: "auto", loading: "lazy", onError: handleError }));
 };
 var LogoComponent = Component$2G;
 
-var styles$2B = {"MainButtonComponent":"mg_main_button_MainButtonComponent_lh5z0","disabled":"mg_main_button_disabled_lh5z0"};
+var styles$2C = {"MainButtonComponent":"mg_main_button_MainButtonComponent_lh5z0","disabled":"mg_main_button_disabled_lh5z0"};
 
 var Component$2F = function (_a) {
     var buttonType = _a.buttonType, buttonSize = _a.buttonSize, buttonText = _a.buttonText, buttonStyles = _a.buttonStyles, loadingState = _a.loadingState, iconProps = _a.iconProps, isMobile = _a.isMobile, className = _a.className, _b = _a.title, title = _b === void 0 ? '' : _b, disabled = _a.disabled, onClick = _a.onClick;
@@ -2275,21 +2277,21 @@ var Component$2F = function (_a) {
             iconProps && React.createElement(IconItem, __assign({}, iconProps)),
             !isMobile && React.createElement("p", null, buttonText)));
     };
-    return (React.createElement("button", { className: "".concat(styles$2B.MainButtonComponent, " ").concat(className, " ").concat(disabled ? styles$2B.disabled : ''), type: buttonType, style: stylesValue, onClick: onClick, "data-button-size": buttonSize, "data-is-mobile": isMobile, title: title ? title : buttonText, disabled: disabled }, renderContent()));
+    return (React.createElement("button", { className: "".concat(styles$2C.MainButtonComponent, " ").concat(className, " ").concat(disabled ? styles$2C.disabled : ''), type: buttonType, style: stylesValue, onClick: onClick, "data-button-size": buttonSize, "data-is-mobile": isMobile, title: title ? title : buttonText, disabled: disabled }, renderContent()));
 };
 /**
  * Atom UI component of button for general purpose
  */
 var MainButton = Component$2F;
 
-var styles$2A = {"magneto-ui-mega-menu-tab":"mg_mega_menu_tab_magneto-ui-mega-menu-tab_f61nm","magneto-ui-mega-menu-tab__icon":"mg_mega_menu_tab_magneto-ui-mega-menu-tab_icon_f61nm","magneto-ui-mega-menu-tab__selected":"mg_mega_menu_tab_magneto-ui-mega-menu-tab_selected_f61nm","magneto-ui-mega-menu-tab__label":"mg_mega_menu_tab_magneto-ui-mega-menu-tab_label_f61nm","magneto-ui-mega-menu-tab__label-selected":"mg_mega_menu_tab_magneto-ui-mega-menu-tab_label-selected_f61nm"};
+var styles$2B = {"magneto-ui-mega-menu-tab":"mg_mega_menu_tab_magneto-ui-mega-menu-tab_f61nm","magneto-ui-mega-menu-tab__icon":"mg_mega_menu_tab_magneto-ui-mega-menu-tab_icon_f61nm","magneto-ui-mega-menu-tab__selected":"mg_mega_menu_tab_magneto-ui-mega-menu-tab_selected_f61nm","magneto-ui-mega-menu-tab__label":"mg_mega_menu_tab_magneto-ui-mega-menu-tab_label_f61nm","magneto-ui-mega-menu-tab__label-selected":"mg_mega_menu_tab_magneto-ui-mega-menu-tab_label-selected_f61nm"};
 
-var styles$2z = {"magneto-ui--search-item":"mg_search_item_magneto-ui--search-item_15w47","magneto-ui--search-item__text":"mg_search_item_magneto-ui--search-item_text_15w47"};
+var styles$2A = {"magneto-ui--search-item":"mg_search_item_magneto-ui--search-item_15w47","magneto-ui--search-item__text":"mg_search_item_magneto-ui--search-item_text_15w47"};
 
 var Component$2E = function (_a) {
     var tag = _a.tag, url = _a.url, className = _a.className, _b = _a.icon, icon = _b === void 0 ? ArrowRight2 : _b;
-    return (React.createElement("a", { title: tag, className: "".concat(className ? className : styles$2z['magneto-ui--search-item']), href: url },
-        React.createElement("p", { className: styles$2z['magneto-ui--search-item__text'] }, tag),
+    return (React.createElement("a", { title: tag, className: "".concat(className ? className : styles$2A['magneto-ui--search-item']), href: url },
+        React.createElement("p", { className: styles$2A['magneto-ui--search-item__text'] }, tag),
         React.createElement(IconItem, { alt: "arrow icon", hover: false, icon: icon, size: 14 })));
 };
 /**
@@ -2304,21 +2306,21 @@ var MegaMenuTab = function (_a) {
             return '';
         return ArrowDown2;
     }, [selected, showArrow]);
-    return (React.createElement("div", { className: "".concat(styles$2A["".concat(classMUI, "-mega-menu-tab")], " ").concat(selected ? styles$2A["".concat(classMUI, "-mega-menu-tab__selected")] : '') },
-        React.createElement(SearchItem, { tag: label, url: url, icon: icon, className: "".concat(styles$2A["".concat(classMUI, "-mega-menu-tab__label")], " ").concat(selected ? styles$2A["".concat(classMUI, "-mega-menu-tab__label-selected")] : '') })));
+    return (React.createElement("div", { className: "".concat(styles$2B["".concat(classMUI, "-mega-menu-tab")], " ").concat(selected ? styles$2B["".concat(classMUI, "-mega-menu-tab__selected")] : '') },
+        React.createElement(SearchItem, { tag: label, url: url, icon: icon, className: "".concat(styles$2B["".concat(classMUI, "-mega-menu-tab__label")], " ").concat(selected ? styles$2B["".concat(classMUI, "-mega-menu-tab__label-selected")] : '') })));
 };
 
-var styles$2y = {"magneto-ui-menu-dropdown-list":"mg_menu_dropdown_list_magneto-ui-menu-dropdown-list_18usg","magneto-ui-menu-dropdown-list--visible":"mg_menu_dropdown_list_magneto-ui-menu-dropdown-list--visible_18usg","magneto-ui-menu-dropdown-list__container":"mg_menu_dropdown_list_magneto-ui-menu-dropdown-list_container_18usg","magneto-ui-menu-dropdown-list__container--visible":"mg_menu_dropdown_list_magneto-ui-menu-dropdown-list_container--visible_18usg","magneto-ui-menu-dropdown-list__children":"mg_menu_dropdown_list_magneto-ui-menu-dropdown-list_children_18usg","magneto-ui-menu-dropdown-list__children--visible":"mg_menu_dropdown_list_magneto-ui-menu-dropdown-list_children--visible_18usg"};
+var styles$2z = {"magneto-ui-menu-dropdown-list":"mg_menu_dropdown_list_magneto-ui-menu-dropdown-list_18usg","magneto-ui-menu-dropdown-list--visible":"mg_menu_dropdown_list_magneto-ui-menu-dropdown-list--visible_18usg","magneto-ui-menu-dropdown-list__container":"mg_menu_dropdown_list_magneto-ui-menu-dropdown-list_container_18usg","magneto-ui-menu-dropdown-list__container--visible":"mg_menu_dropdown_list_magneto-ui-menu-dropdown-list_container--visible_18usg","magneto-ui-menu-dropdown-list__children":"mg_menu_dropdown_list_magneto-ui-menu-dropdown-list_children_18usg","magneto-ui-menu-dropdown-list__children--visible":"mg_menu_dropdown_list_magneto-ui-menu-dropdown-list_children--visible_18usg"};
 
 var Component$2D = function (_a) {
     var children = _a.children, listClassName = _a.listClassName, opened = _a.opened;
-    return (React.createElement("div", { className: CNM.get({ styles: styles$2y, cls: ['menu-dropdown-list', opened && 'menu-dropdown-list--visible'] }) },
+    return (React.createElement("div", { className: CNM.get({ styles: styles$2z, cls: ['menu-dropdown-list', opened && 'menu-dropdown-list--visible'] }) },
         React.createElement("div", { className: CNM.get({
-                styles: styles$2y,
+                styles: styles$2z,
                 cls: ['menu-dropdown-list__container', opened && 'menu-dropdown-list__container--visible']
             }) },
             React.createElement("div", { className: CNM.get({
-                    styles: styles$2y,
+                    styles: styles$2z,
                     cls: ['menu-dropdown-list__children', opened && 'menu-dropdown-list__children--visible', listClassName]
                 }) }, children))));
 };
@@ -2327,7 +2329,7 @@ var Component$2D = function (_a) {
  */
 var MenuDropdownList = Component$2D;
 
-var styles$2x = {"magneto-ui-menu-dropdown__content":"mg_menu_dropdown_magneto-ui-menu-dropdown_content_v03jf","magneto-ui-menu-dropdown__container":"mg_menu_dropdown_magneto-ui-menu-dropdown_container_v03jf","magneto-ui-menu-dropdown__title":"mg_menu_dropdown_magneto-ui-menu-dropdown_title_v03jf","magneto-ui-menu-dropdown__suffix":"mg_menu_dropdown_magneto-ui-menu-dropdown_suffix_v03jf","magneto-ui-menu-dropdown__suffix--visible":"mg_menu_dropdown_magneto-ui-menu-dropdown_suffix--visible_v03jf"};
+var styles$2y = {"magneto-ui-menu-dropdown__content":"mg_menu_dropdown_magneto-ui-menu-dropdown_content_v03jf","magneto-ui-menu-dropdown__container":"mg_menu_dropdown_magneto-ui-menu-dropdown_container_v03jf","magneto-ui-menu-dropdown__title":"mg_menu_dropdown_magneto-ui-menu-dropdown_title_v03jf","magneto-ui-menu-dropdown__suffix":"mg_menu_dropdown_magneto-ui-menu-dropdown_suffix_v03jf","magneto-ui-menu-dropdown__suffix--visible":"mg_menu_dropdown_magneto-ui-menu-dropdown_suffix--visible_v03jf"};
 
 var Component$2C = function (_a) {
     var children = _a.children, _b = _a.className, className = _b === void 0 ? '' : _b, _c = _a.listClassName, listClassName = _c === void 0 ? '' : _c, onClick = _a.onClick, opened = _a.opened, prefixIcon = _a.prefixIcon, _d = _a.suffixIcon, suffixIcon = _d === void 0 ? { icon: ArrowDownWhite } : _d, title = _a.title;
@@ -2344,13 +2346,13 @@ var Component$2C = function (_a) {
     var handleButtonClick = useCallback(function (e) {
         e.stopPropagation();
     }, []);
-    return (React.createElement("div", { className: CNM.get({ styles: styles$2x, cls: ['menu-dropdown', className] }), onClick: toggleOptions },
-        React.createElement("div", { className: CNM.get({ styles: styles$2x, cls: ['menu-dropdown__content'] }) },
-            React.createElement("div", { className: CNM.get({ styles: styles$2x, cls: ['menu-dropdown__container'] }) },
+    return (React.createElement("div", { className: CNM.get({ styles: styles$2y, cls: ['menu-dropdown', className] }), onClick: toggleOptions },
+        React.createElement("div", { className: CNM.get({ styles: styles$2y, cls: ['menu-dropdown__content'] }) },
+            React.createElement("div", { className: CNM.get({ styles: styles$2y, cls: ['menu-dropdown__container'] }) },
                 prefixIcon && React.createElement(IconItem, __assign({ size: 18 }, prefixIcon)),
-                React.createElement("span", { className: CNM.get({ styles: styles$2x, cls: ['menu-dropdown__title'] }) }, title),
+                React.createElement("span", { className: CNM.get({ styles: styles$2y, cls: ['menu-dropdown__title'] }) }, title),
                 React.createElement("div", { className: CNM.get({
-                        styles: styles$2x,
+                        styles: styles$2y,
                         cls: ['menu-dropdown__suffix', localOpened && 'menu-dropdown__suffix--visible']
                     }) },
                     React.createElement(IconItem, __assign({ size: 18 }, suffixIcon)))),
@@ -2362,18 +2364,18 @@ var Component$2C = function (_a) {
  */
 var MenuDropdown = Component$2C;
 
-var style$$ = {"magneto-ui-menu-item":"mg_menu_items_magneto-ui-menu-item_1dxy3","is-active":"mg_menu_items_is-active_1dxy3"};
+var style$_ = {"magneto-ui-menu-item":"mg_menu_items_magneto-ui-menu-item_1dxy3","is-active":"mg_menu_items_is-active_1dxy3"};
 
 var MenuItem = function (_a) {
     var _b = _a.url, url = _b === void 0 ? '#' : _b, _c = _a.text, text = _c === void 0 ? '' : _c, isActive = _a.isActive;
-    var menuActive = isActive ? style$$['is-active'] : '';
+    var menuActive = isActive ? style$_['is-active'] : '';
     return (React.createElement("div", null,
-        React.createElement("a", { href: url, className: "".concat(style$$['magneto-ui-menu-item'], " ").concat(menuActive) },
+        React.createElement("a", { href: url, className: "".concat(style$_['magneto-ui-menu-item'], " ").concat(menuActive) },
             React.createElement(IconItem, { icon: ArrowRight2, hover: false }),
             React.createElement("p", null, text))));
 };
 
-var styles$2w = {"container":"mg_multi_range_slider_container_y44v2","slider":"mg_multi_range_slider_slider_y44v2","track":"mg_multi_range_slider_track_y44v2","range":"mg_multi_range_slider_range_y44v2","values":"mg_multi_range_slider_values_y44v2","left_value":"mg_multi_range_slider_left_value_y44v2","right_value":"mg_multi_range_slider_right_value_y44v2","thumb":"mg_multi_range_slider_thumb_y44v2","zIndex_3":"mg_multi_range_slider_zIndex_3_y44v2","zIndex_4":"mg_multi_range_slider_zIndex_4_y44v2","zIndex_5":"mg_multi_range_slider_zIndex_5_y44v2"};
+var styles$2x = {"container":"mg_multi_range_slider_container_y44v2","slider":"mg_multi_range_slider_slider_y44v2","track":"mg_multi_range_slider_track_y44v2","range":"mg_multi_range_slider_range_y44v2","values":"mg_multi_range_slider_values_y44v2","left_value":"mg_multi_range_slider_left_value_y44v2","right_value":"mg_multi_range_slider_right_value_y44v2","thumb":"mg_multi_range_slider_thumb_y44v2","zIndex_3":"mg_multi_range_slider_zIndex_3_y44v2","zIndex_4":"mg_multi_range_slider_zIndex_4_y44v2","zIndex_5":"mg_multi_range_slider_zIndex_5_y44v2"};
 
 var MultiRangeSlider = function (_a) {
     var min = _a.min, max = _a.max, currentMin = _a.currentMin, currentMax = _a.currentMax, _b = _a.showValues, showValues = _b === void 0 ? true : _b, onChange = _a.onChange, currency = _a.currency, _c = _a.steps, steps = _c === void 0 ? 0 : _c, _d = _a.size, size = _d === void 0 ? 260 : _d, defaultMin = _a.defaultMin, defaultMax = _a.defaultMax;
@@ -2431,39 +2433,39 @@ var MultiRangeSlider = function (_a) {
     var handleMouseUpValues = useCallback(function () {
         onChange({ min: minVal, max: maxVal });
     }, [minVal, maxVal, onChange]);
-    return (React.createElement("div", { className: styles$2w.container },
+    return (React.createElement("div", { className: styles$2x.container },
         React.createElement("input", { style: { width: size }, type: "range", min: min, max: max, step: steps, value: minVal, ref: minValRef, onMouseUp: handleMouseUpValues, onChange: function (event) {
                 var value = Math.min(+event.target.value, maxVal - 1);
                 setMinVal(value);
                 event.target.value = value.toString();
-            }, className: "\n          ".concat(styles$2w.thumb, " \n          ").concat(styles$2w.zIndex_3, "  \n          ").concat(minVal > max - 100 ? styles$2w.zIndex_5 : '', "\n        ") }),
+            }, className: "\n          ".concat(styles$2x.thumb, " \n          ").concat(styles$2x.zIndex_3, "  \n          ").concat(minVal > max - 100 ? styles$2x.zIndex_5 : '', "\n        ") }),
         React.createElement("input", { type: "range", style: { width: size }, min: min, max: max, step: steps, value: maxVal, ref: maxValRef, onMouseUp: handleMouseUpValues, onChange: function (event) {
                 var value = Math.max(+event.target.value, minVal + 1);
                 setMaxVal(value);
                 event.target.value = value.toString();
-            }, className: "".concat(styles$2w.thumb, " ").concat(styles$2w.zIndex_4) }),
-        React.createElement("div", { style: { width: size }, className: styles$2w.slider },
-            React.createElement("div", { className: styles$2w.track }),
-            React.createElement("div", { ref: range, className: styles$2w.range }),
-            showValues && (React.createElement("div", { className: styles$2w.values },
-                React.createElement("div", { className: styles$2w.left_value }, hasCurrency),
-                React.createElement("div", { className: styles$2w.right_value }, maxVal.toLocaleString()))))));
+            }, className: "".concat(styles$2x.thumb, " ").concat(styles$2x.zIndex_4) }),
+        React.createElement("div", { style: { width: size }, className: styles$2x.slider },
+            React.createElement("div", { className: styles$2x.track }),
+            React.createElement("div", { ref: range, className: styles$2x.range }),
+            showValues && (React.createElement("div", { className: styles$2x.values },
+                React.createElement("div", { className: styles$2x.left_value }, hasCurrency),
+                React.createElement("div", { className: styles$2x.right_value }, maxVal.toLocaleString()))))));
 };
 
-var styles$2v = {"content":"mg_paragraph_content_1mtnz"};
+var styles$2w = {"content":"mg_paragraph_content_1mtnz"};
 
 var Component$2B = function (_a) {
     var paragraph = _a.paragraph;
-    return React.createElement("p", { className: styles$2v.content }, paragraph);
+    return React.createElement("p", { className: styles$2w.content }, paragraph);
 };
 var Paragraph = memo(Component$2B);
 
-var style$_ = {"magneto-ui-popover-container":"mg_popover_magneto-ui-popover-container_h7qn6","magneto-ui-popover":"mg_popover_magneto-ui-popover_h7qn6","magneto-ui-popover-children":"mg_popover_magneto-ui-popover-children_h7qn6","left":"mg_popover_left_h7qn6","right":"mg_popover_right_h7qn6","center":"mg_popover_center_h7qn6","top":"mg_popover_top_h7qn6","bottom":"mg_popover_bottom_h7qn6","show":"mg_popover_show_h7qn6","static-content":"mg_popover_static-content_h7qn6","hidden":"mg_popover_hidden_h7qn6"};
+var styles$2v = {"magneto-ui-popover-container":"mg_popover_magneto-ui-popover-container_h7qn6","magneto-ui-popover":"mg_popover_magneto-ui-popover_h7qn6","magneto-ui-popover-children":"mg_popover_magneto-ui-popover-children_h7qn6","left":"mg_popover_left_h7qn6","right":"mg_popover_right_h7qn6","center":"mg_popover_center_h7qn6","top":"mg_popover_top_h7qn6","bottom":"mg_popover_bottom_h7qn6","show":"mg_popover_show_h7qn6","static-content":"mg_popover_static-content_h7qn6","hidden":"mg_popover_hidden_h7qn6"};
 
 var Component$2A = function (_a) {
-    var children = _a.children, content = _a.content, positionX = _a.positionX, positionY = _a.positionY, show = _a.show, widthBase = _a.widthBase, staticContent = _a.staticContent, _b = _a.className, className = _b === void 0 ? '' : _b;
+    var children = _a.children, content = _a.content, positionX = _a.positionX, positionY = _a.positionY, show = _a.show, widthBase = _a.widthBase, staticContent = _a.staticContent, _b = _a.className, className = _b === void 0 ? '' : _b, style = _a.style;
     var showMenu = show ? 'show' : 'hidden';
-    var staticContentClass = staticContent ? style$_['static-content'] : '';
+    var staticContentClass = staticContent ? styles$2v['static-content'] : '';
     var _c = useState(false), hideComponent = _c[0], setHideComponent = _c[1];
     useEffect(function () {
         if (show) {
@@ -2475,9 +2477,9 @@ var Component$2A = function (_a) {
         }, 300);
         return function () { return clearTimeout(timer); };
     }, [show]);
-    return (React.createElement("div", { style: { width: widthBase }, className: [style$_['magneto-ui-popover-container'], staticContentClass, className].join(' ') },
-        React.createElement("div", { className: "".concat(style$_['magneto-ui-popover'], " ").concat(style$_[positionX], " ").concat(style$_[positionY], " ").concat(style$_[showMenu]) }, hideComponent && content),
-        React.createElement("div", { className: style$_['magneto-ui-popover-children'] }, children)));
+    return (React.createElement("div", { style: { width: widthBase }, className: [styles$2v['magneto-ui-popover-container'], staticContentClass, className].join(' ') },
+        React.createElement("div", { className: "".concat(styles$2v['magneto-ui-popover'], " ").concat(styles$2v[positionX], " ").concat(styles$2v[positionY], " ").concat(styles$2v[showMenu]) }, hideComponent && content),
+        React.createElement("div", { style: style, className: styles$2v['magneto-ui-popover-children'] }, children)));
 };
 /**
  * Atom Ui component of popover
@@ -4159,7 +4161,7 @@ var FilterContainerMenu = function (_a) {
     return React.createElement("div", { className: style$P["".concat(classMUI, "-filter-container")] }, children);
 };
 
-var styles$1S = {"magneto-ui-filter-item":"mg_filter_menu_item_magneto-ui-filter-item_m5cdm","selected":"mg_filter_menu_item_selected_m5cdm","disabled":"mg_filter_menu_item_disabled_m5cdm","isSearched":"mg_filter_menu_item_isSearched_m5cdm","skeleton":"mg_filter_menu_item_skeleton_m5cdm","shimmer":"mg_filter_menu_item_shimmer_m5cdm"};
+var styles$1S = {"magneto-ui-filter-item":"mg_filter_menu_item_magneto-ui-filter-item_1wlwy","magneto-ui-filter-item__counter":"mg_filter_menu_item_magneto-ui-filter-item_counter_1wlwy","selected":"mg_filter_menu_item_selected_1wlwy","disabled":"mg_filter_menu_item_disabled_1wlwy","isSearched":"mg_filter_menu_item_isSearched_1wlwy","skeleton":"mg_filter_menu_item_skeleton_1wlwy","shimmer":"mg_filter_menu_item_shimmer_1wlwy"};
 
 var FilterMenuItem = function (_a) {
     var id = _a.id, label = _a.label, total = _a.total, field = _a.field, multiple = _a.multiple, loading = _a.loading, type = _a.type, isApplied = _a.isApplied, hasTotal = _a.hasTotal, _b = _a.isSearched, isSearched = _b === void 0 ? false : _b, customClass = _a.customClass, customId = _a.customId, _c = _a.hiddenCount, hiddenCount = _c === void 0 ? false : _c, setIsApplied = _a.setIsApplied, props = __rest(_a, ["id", "label", "total", "field", "multiple", "loading", "type", "isApplied", "hasTotal", "isSearched", "customClass", "customId", "hiddenCount", "setIsApplied"]);
@@ -4168,7 +4170,7 @@ var FilterMenuItem = function (_a) {
             return React.createElement(IconItem, { icon: SmallClose, size: 17 });
         if (!hasTotal || hiddenCount)
             return React.createElement(Fragment, null);
-        return React.createElement("output", null, formatNumber(total));
+        return React.createElement("div", { className: styles$1S['magneto-ui-filter-item__counter'] }, formatNumber(total));
     }, [total, isApplied, hasTotal, hiddenCount]);
     var disabled = useMemo(function () {
         return isSearched || isApplied || hiddenCount ? false : !total;
@@ -4187,7 +4189,7 @@ var FilterMenuItem = function (_a) {
         displayOutput));
 };
 
-var styles$1R = {"magneto-ui-filter-search":"mg_filter_search_item_magneto-ui-filter-search_1ibtk","disabled":"mg_filter_search_item_disabled_1ibtk","skeleton":"mg_filter_search_item_skeleton_1ibtk","shimmer":"mg_filter_search_item_shimmer_1ibtk"};
+var styles$1R = {"magneto-ui-filter-search":"mg_filter_search_item_magneto-ui-filter-search_14sdz","disabled":"mg_filter_search_item_disabled_14sdz","skeleton":"mg_filter_search_item_skeleton_14sdz","shimmer":"mg_filter_search_item_shimmer_14sdz"};
 
 var FilterSearchItem = function (_a) {
     var placeholder = _a.placeholder, _b = _a.disabled, disabled = _b === void 0 ? false : _b, loading = _a.loading, handleSearch = _a.handleSearch;
@@ -5684,10 +5686,11 @@ var SimilarJobsCard = function (_a) {
         React.createElement(IconItem, { className: "".concat(styles$1e["".concat(classMUI, "-similar-jobs__arrow")]), icon: ArrowRight2, alt: "arow-right-icon" })));
 };
 
-var style$z = {"magneto-ui-btn-menu":"mg_sort_menu_magneto-ui-btn-menu_lw7uc","magneto-ui-btn-text":"mg_sort_menu_magneto-ui-btn-text_lw7uc","disabled":"mg_sort_menu_disabled_lw7uc"};
+var style$z = {"magneto-ui-btn-menu":"mg_sort_menu_magneto-ui-btn-menu_1g7nr","magneto-ui-btn-text":"mg_sort_menu_magneto-ui-btn-text_1g7nr","disabled":"mg_sort_menu_disabled_1g7nr"};
 
 var SortMenu = function (_a) {
     var orderFields = _a.orderFields, textOrderFilter = _a.textOrderFilter, setFilter = _a.setFilter, _b = _a.clickOut, clickOut = _b === void 0 ? false : _b, loading = _a.loading, _c = _a.setClickOut, setClickOut = _c === void 0 ? function () { return ({}); } : _c;
+    var buttonTextRef = useRef(null);
     var listMenuProps = useMemo(function () {
         return {
             orderFields: orderFields,
@@ -5696,9 +5699,16 @@ var SortMenu = function (_a) {
             textOrderFilter: textOrderFilter
         };
     }, [orderFields, textOrderFilter, setFilter, setClickOut]);
-    return (React.createElement(Popover, { widthBase: 180, show: clickOut, content: React.createElement(ListSortMenu, __assign({}, listMenuProps)), positionX: "left", positionY: "bottom" },
+    var getButtonWidth = function () {
+        if (buttonTextRef.current) {
+            var rect = buttonTextRef.current.getBoundingClientRect();
+            return rect.width + 42;
+        }
+        return 180;
+    };
+    return (React.createElement(Popover, { widthBase: getButtonWidth(), show: clickOut, content: React.createElement(ListSortMenu, __assign({}, listMenuProps)), positionX: "left", positionY: "bottom", style: { height: '75%' } },
         React.createElement("button", { className: "".concat(style$z['magneto-ui-btn-menu'], " ").concat(loading && style$z.disabled), title: textOrderFilter, onClick: function () { return setClickOut(!clickOut); }, disabled: loading },
-            React.createElement("p", { className: style$z['magneto-ui-btn-text'] }, textOrderFilter),
+            React.createElement("p", { className: style$z['magneto-ui-btn-text'], ref: buttonTextRef }, textOrderFilter),
             React.createElement(IconItem, __assign({}, menuSortButton, { isRotate: clickOut })))));
 };
 var SortMenu$1 = withClickOut(SortMenu);
@@ -6318,38 +6328,72 @@ var Component$13 = function (_a) {
 };
 var DrawerMenu = Component$13;
 
-var styles$V = {"magneto-ui-filter-card":"mg_filter_card_magneto-ui-filter-card_1ex6b","magneto-ui-filter-card_header":"mg_filter_card_magneto-ui-filter-card_header_1ex6b","magneto-ui-filter-card_options":"mg_filter_card_magneto-ui-filter-card_options_1ex6b","hasSearch":"mg_filter_card_hasSearch_1ex6b"};
+var styles$V = {"magneto-ui-filter-card":"mg_filter_card_magneto-ui-filter-card_yypjj","magneto-ui-filter-card__search":"mg_filter_card_magneto-ui-filter-card_search_yypjj","magneto-ui-filter-card_header":"mg_filter_card_magneto-ui-filter-card_header_yypjj","magneto-ui-filter-card_header--arrow":"mg_filter_card_magneto-ui-filter-card_header--arrow_yypjj","--open":"mg_filter_card_--open_yypjj","magneto-ui-filter-card_options":"mg_filter_card_magneto-ui-filter-card_options_yypjj","hasSearch":"mg_filter_card_hasSearch_yypjj"};
 
 var FilterCard = function (_a) {
-    var label = _a.label, values = _a.values, renderType = _a.renderType, _b = _a.searchPlaceholder, searchPlaceholder = _b === void 0 ? '' : _b, _c = _a.switchText, switchText = _c === void 0 ? '' : _c, setIsApplied = _a.setIsApplied, props = __rest(_a, ["label", "values", "renderType", "searchPlaceholder", "switchText", "setIsApplied"]);
-    var _d = useState([]), options = _d[0], setOptions = _d[1];
-    useEffect(function () {
-        var appliedOptions = values.filter(function (opt) { return opt.isApplied; });
-        var unAppliedOptions = values.filter(function (opt) { return !opt.isApplied; });
-        setOptions(__spreadArray(__spreadArray([], appliedOptions, true), unAppliedOptions, true));
-    }, [values]);
+    var label = _a.label, values = _a.values, renderType = _a.renderType, _b = _a.searchPlaceholder, searchPlaceholder = _b === void 0 ? '' : _b, _c = _a.switchText, switchText = _c === void 0 ? '' : _c, setIsApplied = _a.setIsApplied, index = _a.index, setCurrentOpenFilter = _a.setCurrentOpenFilter, showFilters = _a.showFilters, props = __rest(_a, ["label", "values", "renderType", "searchPlaceholder", "switchText", "setIsApplied", "index", "setCurrentOpenFilter", "showFilters"]);
+    var _d = useState(values), options = _d[0], setOptions = _d[1];
+    var _e = useState(showFilters), showItems = _e[0], setShowItems = _e[1];
     var hasSearch = useMemo(function () { return renderType === ERenderType.multiSelect; }, [renderType]);
     var hasTotal = useMemo(function () { return !values.find(function (value) { return value.isApplied; }); }, [values]);
+    var appliedOption = useMemo(function () {
+        var option = options.find(function (_a) {
+            var isApplied = _a.isApplied;
+            return isApplied;
+        });
+        if (option != undefined)
+            setShowItems(true);
+        return option;
+    }, [options]);
+    var hasntOptions = useMemo(function () { return options.every(function (_a) {
+        var total = _a.total;
+        return total == 0 || total == undefined;
+    }); }, [options]);
+    var isInteractiveSection = useMemo(function () { return !hasntOptions && !appliedOption; }, [hasntOptions, appliedOption]);
     var handleSearch = useCallback(function (event) {
         event.preventDefault();
-        var appliedOptions = values.filter(function (opt) { return opt.isApplied; });
         var searchedOptions = values.filter(function (opt) { return opt.label.toLowerCase().includes(event.target.value.toLowerCase()); });
-        setOptions(__spreadArray(__spreadArray([], appliedOptions, true), searchedOptions, true));
+        setOptions(searchedOptions);
     }, [values, setOptions]);
+    var handleShowItems = useCallback(function () {
+        if (!showItems)
+            setCurrentOpenFilter(index);
+        else
+            setCurrentOpenFilter(99);
+        setShowItems(!showItems);
+    }, [showItems, index, setCurrentOpenFilter]);
+    var renderItem = useCallback(function (opt, key) {
+        if (key === void 0) { key = 0; }
+        var optProps = __assign(__assign(__assign({}, props), opt), { hasTotal: hasTotal, setIsApplied: setIsApplied, type: props.type });
+        return React.createElement(FilterMenuItem, __assign({ key: "".concat(key, "-").concat(opt.label) }, optProps));
+    }, [hasTotal, setIsApplied, props]);
+    var optionsRendered = useMemo(function () {
+        if (appliedOption)
+            return renderItem(appliedOption);
+        if (hasntOptions)
+            return React.createElement(Fragment, null);
+        return options.map(renderItem);
+    }, [options, appliedOption, renderItem, hasntOptions]);
+    useEffect(function () {
+        setOptions(values);
+    }, [values]);
+    useEffect(function () {
+        if (!appliedOption && !hasntOptions && showFilters != showItems)
+            setShowItems(showFilters);
+    }, [showFilters, appliedOption, hasntOptions, showItems]);
     if (!values.length)
         return React.createElement(Fragment, null);
-    return (React.createElement("article", { className: "".concat(styles$V['magneto-ui-filter-card'], " ").concat(hasSearch && styles$V.hasSearch) },
-        React.createElement("div", { className: styles$V['magneto-ui-filter-card_header'] },
+    return (React.createElement("article", { className: "".concat(styles$V["magneto-ui-filter-card"], " ").concat(hasSearch && showItems && isInteractiveSection ? styles$V.hasSearch : '') },
+        React.createElement("div", { className: "".concat(styles$V["magneto-ui-filter-card_header"], " ").concat(styles$V[showItems ? '--open' : '']), onClick: isInteractiveSection ? handleShowItems : undefined },
             React.createElement("p", null, label),
-            switchText && (React.createElement(Switch, { title: switchText, setIsActive: function (value) { return console.log('Change isActive', value); }, isActive: true }))),
-        hasSearch && (React.createElement(FilterSearchItem, { loading: props.loading, placeholder: searchPlaceholder, handleSearch: handleSearch })),
-        React.createElement("div", { className: styles$V['magneto-ui-filter-card_options'] }, options.map(function (opt, key) {
-            var optProps = __assign(__assign(__assign({}, props), opt), { hasTotal: hasTotal, setIsApplied: setIsApplied, type: props.type });
-            return React.createElement(FilterMenuItem, __assign({ key: "".concat(key, "-").concat(opt.label) }, optProps));
-        }))));
+            switchText && (React.createElement(Switch, { title: switchText, setIsActive: function (value) { return console.log('Change isActive', value); }, isActive: true })),
+            isInteractiveSection && (React.createElement(IconItem, { icon: ArrowDown2, size: 16, className: styles$V["magneto-ui-filter-card_header--arrow"] }))),
+        showItems && isInteractiveSection && hasSearch && (React.createElement("div", { className: styles$V['magneto-ui-filter-card__search'] },
+            React.createElement(FilterSearchItem, { loading: props.loading, placeholder: searchPlaceholder, handleSearch: handleSearch }))),
+        showItems && React.createElement("div", { className: styles$V['magneto-ui-filter-card_options'] }, optionsRendered)));
 };
 
-var styles$U = {"magneto-ui-filter-header":"mg_filter_header_magneto-ui-filter-header_c34vr","magneto-ui-filter-header_title":"mg_filter_header_magneto-ui-filter-header_title_c34vr","magneto-ui-filter-header_clean":"mg_filter_header_magneto-ui-filter-header_clean_c34vr","magneto-ui-filter-header_btn":"mg_filter_header_magneto-ui-filter-header_btn_c34vr","magneto-ui-filter-header_switch":"mg_filter_header_magneto-ui-filter-header_switch_c34vr","magneto-ui-filter-header_summary":"mg_filter_header_magneto-ui-filter-header_summary_c34vr","disabled":"mg_filter_header_disabled_c34vr"};
+var styles$U = {"magneto-ui-filter-header":"mg_filter_header_magneto-ui-filter-header_dd3me","magneto-ui-filter-header_title":"mg_filter_header_magneto-ui-filter-header_title_dd3me","magneto-ui-filter-header_clean":"mg_filter_header_magneto-ui-filter-header_clean_dd3me","magneto-ui-filter-header_btn":"mg_filter_header_magneto-ui-filter-header_btn_dd3me","magneto-ui-filter-header_switch":"mg_filter_header_magneto-ui-filter-header_switch_dd3me","magneto-ui-filter-header_summary":"mg_filter_header_magneto-ui-filter-header_summary_dd3me","disabled":"mg_filter_header_disabled_dd3me"};
 
 var FilterHeader = function (_a) {
     var title = _a.title, buttonText = _a.buttonText, filterSummary = _a.filterSummary, totalApplied = _a.totalApplied, clearFilters = _a.clearFilters, switchText = _a.switchText;
@@ -6373,7 +6417,9 @@ var FilterHeader = function (_a) {
     }, [filterSummary]);
     return (React.createElement("article", { className: styles$U['magneto-ui-filter-header'] },
         React.createElement("div", { className: styles$U['magneto-ui-filter-header_title'] },
-            React.createElement("p", null, title),
+            React.createElement("p", null,
+                React.createElement(IconItem, { icon: FilterIcon, size: 16 }),
+                title),
             displayBtnClear),
         switchText && (React.createElement(Switch
         //TODO: review isActive, setIsActive
@@ -9490,10 +9536,11 @@ var CardByRenderType = function (_a) {
     return React.createElement(CardByRenderType, __assign({ renderType: renderType }, props));
 };
 
-var styles$1 = {"magneto-iu-side-filter":"mg_side_filter_magneto-iu-side-filter_11nkr","open":"mg_side_filter_open_11nkr","magneto-ui-side-filter_btn__close":"mg_side_filter_magneto-ui-side-filter_btn_close_11nkr","magneto-ui-side-filter_btn__main":"mg_side_filter_magneto-ui-side-filter_btn_main_11nkr","btn_main-open":"mg_side_filter_btn_main-open_11nkr","magneto-iu-side-filter_content":"mg_side_filter_magneto-iu-side-filter_content_11nkr","magneto-iu-side-filter_background":"mg_side_filter_magneto-iu-side-filter_background_11nkr","fadeIn":"mg_side_filter_fadeIn_11nkr"};
+var styles$1 = {"magneto-iu-side-filter":"mg_side_filter_magneto-iu-side-filter_1jmbj","open":"mg_side_filter_open_1jmbj","magneto-ui-side-filter_btn__close":"mg_side_filter_magneto-ui-side-filter_btn_close_1jmbj","magneto-ui-side-filter_btn__main":"mg_side_filter_magneto-ui-side-filter_btn_main_1jmbj","btn_main-open":"mg_side_filter_btn_main-open_1jmbj","magneto-iu-side-filter_content":"mg_side_filter_magneto-iu-side-filter_content_1jmbj","magneto-iu-side-filter_background":"mg_side_filter_magneto-iu-side-filter_background_1jmbj","fadeIn":"mg_side_filter_fadeIn_1jmbj"};
 
 var SideFilter = function (_a) {
     var title = _a.title, _b = _a.filters, filters = _b === void 0 ? [] : _b, totalAppliedFilters = _a.totalAppliedFilters, filterSummary = _a.filterSummary, buttonText = _a.buttonText, loading = _a.loading, isFiltersOpen = _a.isFiltersOpen, textBtnMain = _a.textBtnMain, titleBtnClose = _a.titleBtnClose, setIsFiltersOpen = _a.setIsFiltersOpen, setIsApplied = _a.setIsApplied, clearFilters = _a.clearFilters, unApplyWithChild = _a.unApplyWithChild, getOptionsOnLoad = _a.getOptionsOnLoad, getOptionsOnSearch = _a.getOptionsOnSearch;
+    var _c = useState(99), currentOpenFilter = _c[0], setCurrentOpenFilter = _c[1];
     var cardProps = useMemo(function () {
         return {
             setIsApplied: setIsApplied,
@@ -9515,9 +9562,9 @@ var SideFilter = function (_a) {
     var displayFilters = useMemo(function () {
         var renderFilters = filters.length ? filters : defaultFilters;
         return renderFilters === null || renderFilters === void 0 ? void 0 : renderFilters.map(function (item, i) {
-            return React.createElement(CardByRenderType, __assign({ key: "".concat(i, "-").concat(item.field) }, item, cardProps));
+            return (React.createElement(CardByRenderType, __assign({ key: "".concat(i, "-").concat(item.field) }, item, { index: i, showFilters: currentOpenFilter === i, setCurrentOpenFilter: setCurrentOpenFilter }, cardProps)));
         });
-    }, [filters, cardProps]);
+    }, [filters, cardProps, currentOpenFilter]);
     var displayBtnMain = useMemo(function () {
         if (!totalAppliedFilters)
             return React.createElement(Fragment, null);
@@ -9545,11 +9592,12 @@ var SideFilter = function (_a) {
         displayBackground));
 };
 
-var styles = {"magneto-ui-sort-menu":"mg_sort_bar_magneto-ui-sort-menu_11tya","magneto-ui-section-filter":"mg_sort_bar_magneto-ui-section-filter_11tya","magneto-ui-main-title":"mg_sort_bar_magneto-ui-main-title_11tya","magneto-ui-btn-text":"mg_sort_bar_magneto-ui-btn-text_11tya","magneto-ui-tooltip-quotas":"mg_sort_bar_magneto-ui-tooltip-quotas_11tya","magneto-ui-btn-menu":"mg_sort_bar_magneto-ui-btn-menu_11tya","magneto-ui-section-menu":"mg_sort_bar_magneto-ui-section-menu_11tya","magneto-ui-btn-order":"mg_sort_bar_magneto-ui-btn-order_11tya","hidden":"mg_sort_bar_hidden_11tya"};
+var styles = {"magneto-ui-sort-menu":"mg_sort_bar_magneto-ui-sort-menu_1i5rn","magneto-ui-section-filter":"mg_sort_bar_magneto-ui-section-filter_1i5rn","magneto-ui-main-title":"mg_sort_bar_magneto-ui-main-title_1i5rn","magneto-ui-btn-text":"mg_sort_bar_magneto-ui-btn-text_1i5rn","magneto-ui-tooltip-quotas":"mg_sort_bar_magneto-ui-tooltip-quotas_1i5rn","magneto-ui-btn-menu":"mg_sort_bar_magneto-ui-btn-menu_1i5rn","magneto-ui-section-menu":"mg_sort_bar_magneto-ui-section-menu_1i5rn","magneto-ui-btn-order":"mg_sort_bar_magneto-ui-btn-order_1i5rn","hidden":"mg_sort_bar_hidden_1i5rn"};
 
 var SortBar = function (_a) {
     var textSortButton = _a.textSortButton, mainTitle = _a.mainTitle, filterSummary = _a.filterSummary, textOrderFilter = _a.textOrderFilter, orderFields = _a.orderFields, orderByText = _a.orderByText, loading = _a.loading, _b = _a.titleBtnOrder, titleBtnOrder = _b === void 0 ? '' : _b, setIsFiltersOpen = _a.setIsFiltersOpen, orderFilter = _a.orderFilter, setFilter = _a.setFilter, emptyVacant = _a.emptyVacant, infoMessageQuotas = _a.infoMessageQuotas, widthInfoMessage = _a.widthInfoMessage;
     var _c = useState(false), showMenu = _c[0], setShowMenu = _c[1];
+    var _d = useState(false), rotateOrderIcon = _d[0], setRotateOrderIcon = _d[1];
     var tooltip = useMediaQuery(React.createElement(Tooltip, { title: infoMessageQuotas || '', position: "bottom", width: widthInfoMessage },
         React.createElement("div", { className: "".concat(styles['magneto-ui-tooltip-quotas']) },
             React.createElement("span", null, "?"))), { sm: React.createElement(Fragment, null) });
@@ -9561,14 +9609,18 @@ var SortBar = function (_a) {
     var mainTitleByMediaQuery = useMediaQuery(React.createElement("h1", { className: styles['magneto-ui-main-title'] }, mainTitle), {
         md: React.createElement(Fragment, null)
     });
+    var handleOrder = useCallback(function () {
+        orderFilter();
+        setRotateOrderIcon(!rotateOrderIcon);
+    }, [rotateOrderIcon, orderFilter]);
     var sortBarButtonAltRender = useMemo(function () {
         if (emptyVacant)
             return;
         return (React.createElement("div", { className: styles['magneto-ui-section-menu'] },
             sortMenu,
-            React.createElement("button", { className: "".concat(styles['magneto-ui-btn-order'], " ").concat(styles.hidden), title: titleBtnOrder, onClick: orderFilter },
-                React.createElement(IconItem, __assign({}, iconFilterOrder)))));
-    }, [emptyVacant, orderFilter, sortMenu, titleBtnOrder]);
+            React.createElement("button", { className: "".concat(styles['magneto-ui-btn-order'], " ").concat(styles.hidden), title: titleBtnOrder, onClick: handleOrder },
+                React.createElement(IconItem, __assign({ isRotate: rotateOrderIcon }, iconFilterOrder)))));
+    }, [emptyVacant, sortMenu, titleBtnOrder, handleOrder, rotateOrderIcon]);
     return (React.createElement(Fragment, null,
         React.createElement("div", { className: styles['magneto-ui-sort-menu'] },
             React.createElement("div", { className: styles['magneto-ui-section-filter'] },