magneto365.ui 2.47.0 → 2.48.0

package/dist/cjs/index.js

@@ -250,7 +250,7 @@ var useMediaQuery = function (defaultValue, options) {
 
 var style$Y = {"magneto-ui-icon":"mg_icon_magneto-ui-icon_4jxnv","magneto-ui-hover":"mg_icon_magneto-ui-hover_4jxnv"};
 
-var Component$1_ = function (_a) {
+var Component$1$ = 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;
     var _d = React.useState(false), imageError = _d[0], setImageError = _d[1];
     var handleError = function () {
@@ -266,7 +266,7 @@ var Component$1_ = function (_a) {
 /**
  * Atom UI component of Icon for general purpose
  */
-var IconItem = Component$1_;
+var IconItem = Component$1$;
 
 var styles$1X = {"avatarComponent":"mg_avatar_avatarComponent_1upgt","magneto-ui-default-avatar":"mg_avatar_magneto-ui-default-avatar_1upgt"};
 
@@ -332,6 +332,8 @@ var Close = "https://static.magneto365.com/lib/assets/2cb852fd568fb219.svg";
 
 var CloseCircle = "https://static.magneto365.com/lib/assets/8cfd4406b512a517.svg";
 
+var CloseCircleRedBold = "https://static.magneto365.com/lib/assets/216605c9a4ba8eeb.svg";
+
 var CoinBlackOutline = "https://static.magneto365.com/lib/assets/360b8d098be3a53b.svg";
 
 var Danger = "https://static.magneto365.com/lib/assets/9a7bd42035ea607a.svg";
@@ -390,6 +392,8 @@ var ImageWhiteOutline = "https://static.magneto365.com/lib/assets/2d1479bc672d97
 
 var Info = "https://static.magneto365.com/lib/assets/ae6472919de3f2cd.svg";
 
+var InfoCircleBlueBold = "https://static.magneto365.com/lib/assets/53122d74f38b05ed.svg";
+
 var Instagram = "https://static.magneto365.com/lib/assets/2f6e7422de96c0e8.svg";
 
 var InstagramSolid = "https://static.magneto365.com/lib/assets/b0d4cd86c4b553f3.svg";
@@ -482,6 +486,8 @@ var TaskBlueBold = "https://static.magneto365.com/lib/assets/546c3401e6c1ab39.sv
 
 var TaskWhiteOutline = "https://static.magneto365.com/lib/assets/e8987356bcb0eb69.svg";
 
+var TickCircleGreenBold = "https://static.magneto365.com/lib/assets/b7c5dd6900f044db.svg";
+
 var Tiktok = "https://static.magneto365.com/lib/assets/f3e3f11bce735190.svg";
 
 var TiktokSolid = "https://static.magneto365.com/lib/assets/6fb8b692c5ce240a.svg";
@@ -504,6 +510,8 @@ var UserSearchWhiteOutline = "https://static.magneto365.com/lib/assets/eb30208cb
 
 var Warning = "https://static.magneto365.com/lib/assets/bfab45bdc4d8d900.svg";
 
+var WarningYellowBold = "https://static.magneto365.com/lib/assets/8949e8e4bfb2ef16.svg";
+
 var WhatsAppColor = "https://static.magneto365.com/lib/assets/75c50160036c6fdf.svg";
 
 var WhatsAppDark = "https://static.magneto365.com/lib/assets/7fda674d8825bc06.svg";
@@ -514,7 +522,7 @@ var Youtube = "https://static.magneto365.com/lib/assets/f78dbede1bdf3dd0.svg";
 
 var YoutubeSolid = "https://static.magneto365.com/lib/assets/cdcc07646d43bd9d.svg";
 
-var Component$1Z = function (_a) {
+var Component$1_ = function (_a) {
     var userImage = _a.userImage, fallbackImage = _a.fallbackImage, onClick = _a.onClick;
     var _b = React.useState(false), imageError = _b[0], setImageError = _b[1];
     var handleError = function () {
@@ -528,7 +536,7 @@ var Component$1Z = function (_a) {
 /**
  * UI Atom component of Avatar
  */
-var Avatar = Component$1Z;
+var Avatar = Component$1_;
 
 var BAR_LOADER_PREFIX = '--bar-loader';
 
@@ -667,7 +675,7 @@ var ShareIcons = {
     }
 };
 
-var Component$1Y = function (_a) {
+var Component$1Z = function (_a) {
     var ActionsAnchorIcons = _a.ActionsAnchorIcons, ActionsAnchorLinks = _a.ActionsAnchorLinks, ActionAnchorText = _a.ActionAnchorText, ActionsHeader = _a.ActionsHeader, externalButtonChild = _a.externalButtonChild, saveButtonProps = _a.saveButtonProps, shareButtonProps = _a.shareButtonProps, copyButtonProps = _a.copyButtonProps, offerCompanyName = _a.offerCompanyName, backText = _a.backText;
     var _b = React.useState(), component = _b[0], setComponent = _b[1];
     var actionsLinkList = ActionsAnchorIcons === null || ActionsAnchorIcons === void 0 ? void 0 : ActionsAnchorIcons.map(function (_, index) { return ({
@@ -719,7 +727,7 @@ var ShareLinksAction = function (_a) {
 /**
  * UI Molecule componet of Actions
  */
-var Actions = Object.assign(Component$1Y, { ShareLinks: ShareLinksAction });
+var Actions = Object.assign(Component$1Z, { ShareLinks: ShareLinksAction });
 
 var style$X = {"magneto-ui-alert":"mg_alert_magneto-ui-alert_1v3n3","magneto-ui-warning":"mg_alert_magneto-ui-warning_1v3n3","magneto-ui-warning--with-border":"mg_alert_magneto-ui-warning--with-border_1v3n3","magneto-ui-success":"mg_alert_magneto-ui-success_1v3n3","magneto-ui-success--with-border":"mg_alert_magneto-ui-success--with-border_1v3n3","magneto-ui-error":"mg_alert_magneto-ui-error_1v3n3","magneto-ui-error--with-border":"mg_alert_magneto-ui-error--with-border_1v3n3","magneto-ui-info":"mg_alert_magneto-ui-info_1v3n3","magneto-ui-info--with-border":"mg_alert_magneto-ui-info--with-border_1v3n3","magneto-ui-close-action":"mg_alert_magneto-ui-close-action_1v3n3"};
 
@@ -745,7 +753,7 @@ var alertIcons = {
     warning: Warning,
     error: Error
 };
-var Component$1X = function (_a) {
+var Component$1Y = function (_a) {
     var text = _a.text, type = _a.type, customText = _a.customText, _b = _a.border, border = _b === void 0 ? false : _b, size = _a.size, onClose = _a.onClose, _c = _a.className, className = _c === void 0 ? '' : _c, extraButton = _a.extraButton;
     var borderStyle = border ? style$X["".concat(classMUI, "-").concat(type, "--with-border")] : '';
     var typeStyle = style$X["".concat(classMUI, "-").concat(type)];
@@ -757,7 +765,7 @@ var Component$1X = function (_a) {
             React__default["default"].createElement(IconItem, { icon: Close, alt: type }))),
         extraButton));
 };
-var Alert = Component$1X;
+var Alert = Component$1Y;
 
 var style$V = {"magneto-ui-brands__header--row":"mg_brands_container_magneto-ui-brands_header--row_1pjqh","magneto-ui-brands-container":"mg_brands_container_magneto-ui-brands-container_1pjqh","magneto-ui-brands-container__brands":"mg_brands_container_magneto-ui-brands-container_brands_1pjqh","magneto-ui-brands-container__brands--brand":"mg_brands_container_magneto-ui-brands-container_brands--brand_1pjqh"};
 
@@ -799,7 +807,7 @@ var DrawerPortal = function (_a) {
 
 var style$U = {"magneto-ui-mobile-drawer":"mg_mobile_drawer_magneto-ui-mobile-drawer_kxkzo","magneto-ui-close-button":"mg_mobile_drawer_magneto-ui-close-button_kxkzo","magneto-ui-container":"mg_mobile_drawer_magneto-ui-container_kxkzo","background-drawer":"mg_mobile_drawer_background-drawer_kxkzo","fadeIn":"mg_mobile_drawer_fadeIn_kxkzo","show":"mg_mobile_drawer_show_kxkzo","hidden":"mg_mobile_drawer_hidden_kxkzo"};
 
-var Component$1W = function (_a) {
+var Component$1X = 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;
     var _d = React.useState(false), showContent = _d[0], setShowContent = _d[1];
     var _e = React.useState(isOpen), renderPortal = _e[0], setRenderPortal = _e[1];
@@ -835,7 +843,7 @@ var Component$1W = function (_a) {
 /**
  * Molecule UI component for Mobile Drawer
  */
-var MobileDrawer = Component$1W;
+var MobileDrawer = Component$1X;
 
 var style$T = {"magneto-ui-brand-button":"mg_brand_button_magneto-ui-brand-button_145qe","magneto-ui-brand-button__company-logo":"mg_brand_button_magneto-ui-brand-button_company-logo_145qe","magneto-ui-brand-button__company-logo--img":"mg_brand_button_magneto-ui-brand-button_company-logo--img_145qe","magneto-ui-brand-button__icon":"mg_brand_button_magneto-ui-brand-button_icon_145qe","rotate":"mg_brand_button_rotate_145qe"};
 
@@ -893,7 +901,7 @@ var BrandsMenuPopover$1 = withClickOut(BrandsMenuPopover);
 
 var styles$1U = {"BreadcrumbsComponent":"mg_breadcrumbs_BreadcrumbsComponent_13csm"};
 
-var Component$1V = function (_a) {
+var Component$1W = function (_a) {
     var homeUrl = _a.homeUrl, breadcrumbProps = _a.breadcrumbProps, _b = _a.iconProps, iconProps = _b === void 0 ? iconPropsBreadCrumb : _b;
     return (React__default["default"].createElement("div", { className: styles$1U.BreadcrumbsComponent },
         React__default["default"].createElement("a", { href: homeUrl },
@@ -903,7 +911,7 @@ var Component$1V = function (_a) {
 /**
  * Molecule UI component for breadcrums information
  */
-var Breadcrumbs = Component$1V;
+var Breadcrumbs = Component$1W;
 
 var styles$1T = {"magneto-ui-cities-detail-drawer":"mg_cities_detail_drawer_magneto-ui-cities-detail-drawer_16b6c","magneto-ui-cities-detail-drawer__item-detail-icon":"mg_cities_detail_drawer_magneto-ui-cities-detail-drawer_item-detail-icon_16b6c","magneto-ui-cities-detail-drawer__item-detail-text":"mg_cities_detail_drawer_magneto-ui-cities-detail-drawer_item-detail-text_16b6c","magneto-ui-cities-detail-drawer__item-detail-text-remote":"mg_cities_detail_drawer_magneto-ui-cities-detail-drawer_item-detail-text-remote_16b6c","magneto-ui-cities-detail-drawer__item-detail-text-link":"mg_cities_detail_drawer_magneto-ui-cities-detail-drawer_item-detail-text-link_16b6c"};
 
@@ -925,7 +933,7 @@ var CitiesDetailDrawer = function (_a) {
 
 var styles$1S = {"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$1U = function (_a) {
+var Component$1V = 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 = React.useMemo(function () {
         if (disabled)
@@ -941,14 +949,14 @@ var Component$1U = function (_a) {
             })),
         React__default["default"].createElement("span", { className: styles$1S['magneto-ui--date-dropdown__icon'] }, disabledArrow)));
 };
-var DateDropdown = Component$1U;
+var DateDropdown = Component$1V;
 
 var styles$1R = {"magneto-ui--date-picker__wrapper":"mg_date_picker_magneto-ui--date-picker_wrapper_12pj2"};
 
 var defaultValue$1 = function (value) {
     return value ? parseDate(value) : { initialMonth: '', initialYear: '' };
 };
-var Component$1T = function (_a) {
+var Component$1U = function (_a) {
     var monthOptionsLabels = _a.monthOptionsLabels, monthPlaceholder = _a.monthPlaceholder, yearPlaceholder = _a.yearPlaceholder, value = _a.value, disabled = _a.disabled, onChange = _a.onChange, futureYears = _a.futureYears, pastYears = _a.pastYears;
     var _b = React.useState(defaultValue$1(value).initialMonth), selectedMonth = _b[0], setSelectedMonth = _b[1];
     var _c = React.useState(defaultValue$1(value).initialYear), selectedYear = _c[0], setSelectedYear = _c[1];
@@ -986,12 +994,12 @@ var Component$1T = function (_a) {
         React__default["default"].createElement(DateDropdown, { placeholderLabel: monthPlaceholder, dateOptions: monthOptionsList, selectedOption: selectedMonth, onOptionChanged: handleMonthChange, disabled: disabled }),
         React__default["default"].createElement(DateDropdown, { placeholderLabel: yearPlaceholder, dateOptions: yearOptionsList, selectedOption: selectedYear, onOptionChanged: handleYearChange, disabled: disabled })));
 };
-var DatePicker = Component$1T;
+var DatePicker = Component$1U;
 
 var style$S = {"magneto-ui-drawer":"mg_drawer_magneto-ui-drawer_1hxen","magneto-ui-close-button":"mg_drawer_magneto-ui-close-button_1hxen","background-drawer":"mg_drawer_background-drawer_1hxen","fadeIn":"mg_drawer_fadeIn_1hxen","show-left":"mg_drawer_show-left_1hxen","hidden-left":"mg_drawer_hidden-left_1hxen","show-right":"mg_drawer_show-right_1hxen","hidden-right":"mg_drawer_hidden-right_1hxen","full-drawer":"mg_drawer_full-drawer_1hxen"};
 
 var DEFAULT_PADDING = 20;
-var Component$1S = function (_a) {
+var Component$1T = function (_a) {
     var _b = _a.className, className = _b === void 0 ? '' : _b, isOpen = _a.isOpen, _c = _a.direction, direction = _c === void 0 ? 'left' : _c, isFull = _a.isFull, customPadding = _a.customPadding, drawerWidth = _a.drawerWidth, isMobile = _a.isMobile, hideButton = _a.hideButton, children = _a.children, onClose = _a.onClose, _d = _a.blockBackgroundClose, blockBackgroundClose = _d === void 0 ? false : _d;
     var fullDrawer = isFull ? "full-drawer" : '';
     var paddingValue = customPadding !== undefined ? "".concat(customPadding, "px") : "".concat(DEFAULT_PADDING, "px");
@@ -1037,7 +1045,7 @@ var Component$1S = function (_a) {
 /**
  * Molecule UI component for Drawer
  */
-var Drawer = Component$1S;
+var Drawer = Component$1T;
 
 var style$R = {"magneto-ui-empty-result":"mg_empty_results_magneto-ui-empty-result_1g4q8","fadeIn":"mg_empty_results_fadeIn_1g4q8","magneto-ui-empty-result__img-container":"mg_empty_results_magneto-ui-empty-result_img-container_1g4q8","magneto-ui-empty-result__img-container--img":"mg_empty_results_magneto-ui-empty-result_img-container--img_1g4q8","magneto-ui-empty-result__info":"mg_empty_results_magneto-ui-empty-result_info_1g4q8","magneto-ui-empty-result__info--search":"mg_empty_results_magneto-ui-empty-result_info--search_1g4q8","magneto-ui-empty-result__tags":"mg_empty_results_magneto-ui-empty-result_tags_1g4q8"};
 
@@ -1102,7 +1110,7 @@ var EXPANDABLE_INFO_ACTION_ICONS = {
 
 var styles$1Q = {"magneto-ui-expandable-info-action__button":"mg_expandable_info_action_magneto-ui-expandable-info-action_button_11ax1","magneto-ui-expandable-info-action__button--dark-blue":"mg_expandable_info_action_magneto-ui-expandable-info-action_button--dark-blue_11ax1","magneto-ui-expandable-info-action__button--light-blue":"mg_expandable_info_action_magneto-ui-expandable-info-action_button--light-blue_11ax1","magneto-ui-expandable-info-action__button--white":"mg_expandable_info_action_magneto-ui-expandable-info-action_button--white_11ax1","magneto-ui-expandable-info-action__button--green":"mg_expandable_info_action_magneto-ui-expandable-info-action_button--green_11ax1","magneto-ui-expandable-info-action__title":"mg_expandable_info_action_magneto-ui-expandable-info-action_title_11ax1"};
 
-var Component$1R = function (_a) {
+var Component$1S = function (_a) {
     var className = _a.className, loading = _a.loading, onAction = _a.onAction, prefixIcon = _a.prefixIcon, suffixIcon = _a.suffixIcon, title = _a.title, _b = _a.variant, variant = _b === void 0 ? 'blue' : _b;
     var isUrl = React.useMemo(function () { return onAction && typeof onAction === 'string'; }, [onAction]);
     var Component = React.useMemo(function () { return (isUrl ? 'a' : 'button'); }, [isUrl]);
@@ -1140,11 +1148,11 @@ var Component$1R = function (_a) {
 /**
  * Molecule UI child component of expandable info
  */
-var ExpandableInfoAction = Component$1R;
+var ExpandableInfoAction = Component$1S;
 
 var styles$1P = {"magneto-ui-expandable-info-details__container":"mg_expandable_info_details_magneto-ui-expandable-info-details_container_1l94q","magneto-ui-expandable-info-details__section":"mg_expandable_info_details_magneto-ui-expandable-info-details_section_1l94q","magneto-ui-expandable-info-details__section--multiple":"mg_expandable_info_details_magneto-ui-expandable-info-details_section--multiple_1l94q","magneto-ui-expandable-info-details__sub-section":"mg_expandable_info_details_magneto-ui-expandable-info-details_sub-section_1l94q","magneto-ui-expandable-info-details__sub-section--initial":"mg_expandable_info_details_magneto-ui-expandable-info-details_sub-section--initial_1l94q","magneto-ui-expandable-info-details__item":"mg_expandable_info_details_magneto-ui-expandable-info-details_item_1l94q","magneto-ui-expandable-info-details__item--first":"mg_expandable_info_details_magneto-ui-expandable-info-details_item--first_1l94q","magneto-ui-expandable-info-details__text":"mg_expandable_info_details_magneto-ui-expandable-info-details_text_1l94q","magneto-ui-expandable-info-details__text--bold":"mg_expandable_info_details_magneto-ui-expandable-info-details_text--bold_1l94q","magneto-ui-expandable-info-details__footer":"mg_expandable_info_details_magneto-ui-expandable-info-details_footer_1l94q","magneto-ui-expandable-info-details__action":"mg_expandable_info_details_magneto-ui-expandable-info-details_action_1l94q"};
 
-var Component$1Q = function (_a) {
+var Component$1R = function (_a) {
     var sections = _a.sections, footer = _a.footer;
     var sectionStyles = React.useCallback(function (multiple) {
         return CNM.get({
@@ -1191,7 +1199,7 @@ var Component$1Q = function (_a) {
 /**
  * Molecule UI child component of expandable info
  */
-var ExpandableInfoDetails = Component$1Q;
+var ExpandableInfoDetails = Component$1R;
 
 exports.EExpandableInfoVariant = void 0;
 (function (EExpandableInfoVariant) {
@@ -1214,7 +1222,7 @@ var EXPANDABLE_INFO_MESSAGE_ICONS = {
 
 var styles$1O = {"magneto-ui-expandable-info-message__container":"mg_expandable_info_message_magneto-ui-expandable-info-message_container_oubsq","magneto-ui-expandable-info-message__text":"mg_expandable_info_message_magneto-ui-expandable-info-message_text_oubsq","magneto-ui-expandable-info-message__text--blue":"mg_expandable_info_message_magneto-ui-expandable-info-message_text--blue_oubsq","magneto-ui-expandable-info-message__text--white":"mg_expandable_info_message_magneto-ui-expandable-info-message_text--white_oubsq"};
 
-var Component$1P = function (_a) {
+var Component$1Q = function (_a) {
     var className = _a.className, title = _a.title, prefixIcon = _a.prefixIcon, variant = _a.variant;
     var icon = React.useCallback(function (icon) {
         if (icon) {
@@ -1238,11 +1246,11 @@ var Component$1P = function (_a) {
 /**
  * Molecule UI child component of expandable info
  */
-var ExpandableInfoMessage = Component$1P;
+var ExpandableInfoMessage = Component$1Q;
 
 var styles$1N = {"magneto-ui-expandable-info-modal":"mg_expandable_info_modal_magneto-ui-expandable-info-modal_mka0n"};
 
-var Component$1O = function (_a) {
+var Component$1P = function (_a) {
     var toggler = _a.toggler, details = _a.details;
     var _b = React.useState(false), visible = _b[0], setVisible = _b[1];
     var handleOnToggle = React.useCallback(function () {
@@ -1256,7 +1264,7 @@ var Component$1O = function (_a) {
 /**
  * Molecule UI child component of expandable info
  */
-var ExpandableInfoModal = Component$1O;
+var ExpandableInfoModal = Component$1P;
 
 var styles$1M = {"magneto-ui-expandable-info-popover":"mg_expandable_info_popover_magneto-ui-expandable-info-popover_13xbj","magneto-ui-expandable-info-popover--small":"mg_expandable_info_popover_magneto-ui-expandable-info-popover--small_13xbj","magneto-ui-expandable-info-popover--large":"mg_expandable_info_popover_magneto-ui-expandable-info-popover--large_13xbj","magneto-ui-expandable-info-popover--white":"mg_expandable_info_popover_magneto-ui-expandable-info-popover--white_13xbj","magneto-ui-expandable-info-popover__arrow":"mg_expandable_info_popover_magneto-ui-expandable-info-popover_arrow_13xbj","magneto-ui-expandable-info-popover__arrow--small":"mg_expandable_info_popover_magneto-ui-expandable-info-popover_arrow--small_13xbj","magneto-ui-expandable-info-popover__arrow--large":"mg_expandable_info_popover_magneto-ui-expandable-info-popover_arrow--large_13xbj"};
 
@@ -1322,7 +1330,7 @@ var withMegaMenuContainer = function (WrappedComponent) {
     return Component;
 };
 
-var Component$1N = function (_a) {
+var Component$1O = function (_a) {
     var details = _a.details, toggler = _a.toggler, _b = _a.clickOut, clickOut = _b === void 0 ? false : _b, _c = _a.setClickOut, setClickOut = _c === void 0 ? function () { return ({}); } : _c;
     return (React__default["default"].createElement(Popover, { widthBase: 'auto', show: clickOut, positionX: "right", positionY: toggler.size === exports.EExpandableInfoSize.LARGE ? 'top' : 'bottom', className: CNM.get({
             styles: styles$1M,
@@ -1342,7 +1350,7 @@ var Component$1N = function (_a) {
 /**
  * Molecule UI child component of expandable info
  */
-var ExpandableInfoPopover = withClickOut(Component$1N);
+var ExpandableInfoPopover = withClickOut(Component$1O);
 
 var EXPANDABLE_INFO_TOGGLER_ICONS = {
     coin: CoinBlackOutline
@@ -1350,7 +1358,7 @@ var EXPANDABLE_INFO_TOGGLER_ICONS = {
 
 var styles$1I = {"magneto-ui-expandable-info-toggler__container":"mg_expandable_info_toggler_magneto-ui-expandable-info-toggler_container_uiv7v","magneto-ui-expandable-info-toggler__container--no-details":"mg_expandable_info_toggler_magneto-ui-expandable-info-toggler_container--no-details_uiv7v","magneto-ui-expandable-info-toggler__container--blue":"mg_expandable_info_toggler_magneto-ui-expandable-info-toggler_container--blue_uiv7v","magneto-ui-expandable-info-toggler__container--white":"mg_expandable_info_toggler_magneto-ui-expandable-info-toggler_container--white_uiv7v","magneto-ui-expandable-info-toggler__container--small":"mg_expandable_info_toggler_magneto-ui-expandable-info-toggler_container--small_uiv7v","magneto-ui-expandable-info-toggler__text":"mg_expandable_info_toggler_magneto-ui-expandable-info-toggler_text_uiv7v","magneto-ui-expandable-info-toggler__text--blue":"mg_expandable_info_toggler_magneto-ui-expandable-info-toggler_text--blue_uiv7v","magneto-ui-expandable-info-toggler__text--white":"mg_expandable_info_toggler_magneto-ui-expandable-info-toggler_text--white_uiv7v","magneto-ui-expandable-info-toggler__text--small":"mg_expandable_info_toggler_magneto-ui-expandable-info-toggler_text--small_uiv7v","magneto-ui-expandable-info-toggler__summary":"mg_expandable_info_toggler_magneto-ui-expandable-info-toggler_summary_uiv7v","magneto-ui-expandable-info-toggler__summary--small":"mg_expandable_info_toggler_magneto-ui-expandable-info-toggler_summary--small_uiv7v","magneto-ui-expandable-info-toggler__summary--large":"mg_expandable_info_toggler_magneto-ui-expandable-info-toggler_summary--large_uiv7v"};
 
-var Component$1M = function (_a) {
+var Component$1N = function (_a) {
     var details = _a.details, onToggle = _a.onToggle, prefixIcon = _a.prefixIcon, size = _a.size, suffixIcon = _a.suffixIcon, summary = _a.summary, title = _a.title, _b = _a.variant, variant = _b === void 0 ? 'white' : _b;
     var styleGenerator = React.useCallback(function (base) {
         return CNM.get({
@@ -1399,11 +1407,11 @@ var Component$1M = function (_a) {
 /**
  * Molecule UI child component of expandable info
  */
-var ExpandableInfoToggler = Component$1M;
+var ExpandableInfoToggler = Component$1N;
 
 var styles$1H = {"magneto-ui-expandable-info":"mg_expandable_info_magneto-ui-expandable-info_bokzy","magneto-ui-expandable-info__container":"mg_expandable_info_magneto-ui-expandable-info_container_bokzy","magneto-ui-expandable-info__container--white":"mg_expandable_info_magneto-ui-expandable-info_container--white_bokzy","magneto-ui-expandable-info__container--blue":"mg_expandable_info_magneto-ui-expandable-info_container--blue_bokzy","magneto-ui-expandable-info__container--small":"mg_expandable_info_magneto-ui-expandable-info_container--small_bokzy","magneto-ui-expandable-info__container--floating":"mg_expandable_info_magneto-ui-expandable-info_container--floating_bokzy","magneto-ui-expandable-info__actions":"mg_expandable_info_magneto-ui-expandable-info_actions_bokzy"};
 
-var Component$1L = function (_a) {
+var Component$1M = function (_a) {
     var actions = _a.actions, details = _a.details, floating = _a.floating, message = _a.message, prefixIcon = _a.prefixIcon, _b = _a.size, size = _b === void 0 ? 'large' : _b, suffixIcon = _a.suffixIcon, summary = _a.summary, title = _a.title, _c = _a.variant, variant = _c === void 0 ? 'white' : _c;
     var togglerProps = React.useMemo(function () { return ({
         details: details,
@@ -1435,7 +1443,7 @@ var Component$1L = function (_a) {
 /**
  * Molecule UI component for expandable info
  */
-var ExpandableInfo = Component$1L;
+var ExpandableInfo = Component$1M;
 
 var style$P = {"magneto-ui-filter-container":"mg_filter_container_menu_magneto-ui-filter-container_r9inc"};
 
@@ -1532,7 +1540,7 @@ var FilterSearchItem = function (_a) {
 
 var styles$1E = {"magneto-ui-frequent-search":"mg_frequent_search_magneto-ui-frequent-search_46vb2","magneto-ui-frequent-search__heading":"mg_frequent_search_magneto-ui-frequent-search_heading_46vb2","magneto-ui-frequent-search__items":"mg_frequent_search_magneto-ui-frequent-search_items_46vb2","magneto-ui-frequent-search__buttons-container":"mg_frequent_search_magneto-ui-frequent-search_buttons-container_46vb2","magneto-ui-frequent-search__buttons-container--btn":"mg_frequent_search_magneto-ui-frequent-search_buttons-container--btn_46vb2"};
 
-var Component$1K = function (_a) {
+var Component$1L = function (_a) {
     var searchHeading = _a.searchHeading, searchList = _a.searchList, showLess = _a.showLess, showMore = _a.showMore, showFrequentSearch = _a.showFrequentSearch;
     var _b = React.useState(true), showFullList = _b[0], setShowFullList = _b[1];
     var searchListDinamyc = React.useMemo(function () {
@@ -1557,29 +1565,29 @@ var Component$1K = function (_a) {
 /**
  * UI Atom component of Frequent Search
  */
-var FrequentSearch = Component$1K;
+var FrequentSearch = Component$1L;
 
 var style$O = {"header-drawer-company":"mg_header_drawer_company_header-drawer-company_jtdka"};
 
-var Component$1J = function (_a) {
+var Component$1K = function (_a) {
     var logo = _a.logo, alt = _a.alt, logoCompany = _a.logoCompany, logoCompanyAlt = _a.logoCompanyAlt, flag = _a.flag, flagAlt = _a.flagAlt;
     return (React__default["default"].createElement("div", { className: style$O['header-drawer-company'] },
         React__default["default"].createElement(LogoComponent, { logo: logo, alt: alt }),
         React__default["default"].createElement(LogoComponent, { logo: logoCompany, alt: logoCompanyAlt }),
         React__default["default"].createElement("img", { src: flag, alt: flagAlt, loading: "lazy", width: '25px', height: '20px' })));
 };
-var HeaderDrawerCompany = Component$1J;
+var HeaderDrawerCompany = Component$1K;
 
 var styles$1D = {"TabComponent":"mg_tab_TabComponent_zqqnn"};
 
-var Component$1I = function (_a) {
+var Component$1J = function (_a) {
     var children = _a.children;
     return React__default["default"].createElement("div", { className: styles$1D.TabComponent }, children);
 };
 /**
  * Molecule UI for Tab
  */
-var Tab = Component$1I;
+var Tab = Component$1J;
 
 var styles$1C = {"TabButtonComponent":"mg_tab_button_TabButtonComponent_hysss"};
 
@@ -1596,7 +1604,7 @@ var toCSSVariables = function (input) {
     return output;
 };
 
-var Component$1H = function (_a) {
+var Component$1I = function (_a) {
     var tabButtonLink = _a.tabButtonLink, tabButtonLinkStyles = _a.tabButtonLinkStyles, tabButtonStyles = _a.tabButtonStyles;
     var stylesValue = React.useMemo(function () { return toCSSVariables(tabButtonStyles); }, [tabButtonStyles]);
     var boxShadow = (tabButtonStyles || {}).boxShadow;
@@ -1605,11 +1613,11 @@ var Component$1H = function (_a) {
 /**
  * Molecule UI component for Tab Button
  */
-var TabButton = Component$1H;
+var TabButton = Component$1I;
 
 var styles$1B = {"HeaderDrawerTabsComponent":"mg_header_drawer_tabs_HeaderDrawerTabsComponent_1wrvo"};
 
-var Component$1G = function (_a) {
+var Component$1H = function (_a) {
     var logoProps = _a.logoProps, leftTabLink = _a.leftTabLink, rightTabLink = _a.rightTabLink, leftTabStyle = _a.leftTabStyle, rightTabStyle = _a.rightTabStyle, homeUrl = _a.homeUrl;
     return (React__default["default"].createElement("div", { className: styles$1B.HeaderDrawerTabsComponent },
         React__default["default"].createElement("a", { href: homeUrl },
@@ -1618,11 +1626,11 @@ var Component$1G = function (_a) {
             React__default["default"].createElement(TabButton, { tabButtonLink: leftTabLink, tabButtonLinkStyles: leftTabStyle === null || leftTabStyle === void 0 ? void 0 : leftTabStyle.tabButtonLinkStyles, tabButtonStyles: leftTabStyle === null || leftTabStyle === void 0 ? void 0 : leftTabStyle.tabButtonStyles }),
             React__default["default"].createElement(TabButton, { tabButtonLink: rightTabLink, tabButtonLinkStyles: rightTabStyle === null || rightTabStyle === void 0 ? void 0 : rightTabStyle.tabButtonLinkStyles, tabButtonStyles: rightTabStyle === null || rightTabStyle === void 0 ? void 0 : rightTabStyle.tabButtonStyles }))));
 };
-var HeaderDrawerTabs = Component$1G;
+var HeaderDrawerTabs = Component$1H;
 
 var styles$1A = {"HeaderTabsComponent":"mg_header_tabs_HeaderTabsComponent_yjqx4"};
 
-var Component$1F = function (_a) {
+var Component$1G = function (_a) {
     var _b = _a.headerTabList, headerTabList = _b === void 0 ? [] : _b, _c = _a.urlParam, urlParam = _c === void 0 ? '' : _c, addDivider = _a.addDivider;
     return (React__default["default"].createElement("div", { className: styles$1A.HeaderTabsComponent, "data-add-divider": addDivider }, headerTabList.map(function (_a, index) {
         var headerTabProps = __rest(_a, []);
@@ -1635,7 +1643,7 @@ var Component$1F = function (_a) {
 /**
  * Molecule UI component for header tabs information`
  */
-var HeaderTabs = Component$1F;
+var HeaderTabs = Component$1G;
 
 var styles$1z = {"magneto-ui-input":"mg_input_magneto-ui-input_tifvx","magneto-ui-input--container":"mg_input_magneto-ui-input--container_tifvx","magneto-ui-input--container__input":"mg_input_magneto-ui-input--container_input_tifvx","magneto-ui-input--container__label":"mg_input_magneto-ui-input--container_label_tifvx","magneto-ui-input--container__icon":"mg_input_magneto-ui-input--container_icon_tifvx","magneto-ui-input--container__icon-action":"mg_input_magneto-ui-input--container_icon-action_tifvx","magneto-ui-input--container__error":"mg_input_magneto-ui-input--container_error_tifvx","magneto-ui-input__footer":"mg_input_magneto-ui-input_footer_tifvx","footer-without-error":"mg_input_footer-without-error_tifvx"};
 
@@ -1693,7 +1701,7 @@ var Input = function (_a) {
 
 var styles$1y = {"magneto-ui-flat-loader":"mg_flat_loader_magneto-ui-flat-loader_q96bq","rotation":"mg_flat_loader_rotation_q96bq"};
 
-var Component$1E = function (_a) {
+var Component$1F = function (_a) {
     var color = _a.color, size = _a.size, secondColor = _a.secondColor;
     var loadingSize = React.useMemo(function () {
         if (size) {
@@ -1709,7 +1717,7 @@ var Component$1E = function (_a) {
     }, [size]);
     return (React__default["default"].createElement("div", { style: __assign(__assign({}, loadingSize), { border: "2px solid ".concat(color || '#090467'), borderBottomColor: secondColor || 'white' }), className: styles$1y["".concat(classMUI, "-flat-loader")] }));
 };
-var FlatLoader = Component$1E;
+var FlatLoader = Component$1F;
 
 var styles$1x = {"magneto-ui-input-plus":"mg_input_plus_magneto-ui-input-plus_1diki","magneto-ui-input-plus__plus-button":"mg_input_plus_magneto-ui-input-plus_plus-button_1diki","disabled":"mg_input_plus_disabled_1diki","disabled-img":"mg_input_plus_disabled-img_1diki"};
 
@@ -1764,7 +1772,7 @@ var styles$1w = {"magneto-ui-job-actions":"mg_job_actions_magneto-ui-job-actions
 
 var style$N = {"popover":"mg_share_popover_popover_nlj0v","popover--hidden":"mg_share_popover_popover--hidden_nlj0v","popover__btn":"mg_share_popover_popover_btn_nlj0v","content":"mg_share_popover_content_nlj0v","content__link":"mg_share_popover_content_link_nlj0v"};
 
-var Component$1D = function (_a) {
+var Component$1E = function (_a) {
     var _b = _a.shareLinks, shareLinks = _b === void 0 ? [] : _b, _c = _a.btnProps, btnProps = _c === void 0 ? {} : _c, _d = _a.classNameContent, classNameContent = _d === void 0 ? '' : _d, _e = _a.classNameButton, classNameButton = _e === void 0 ? '' : _e, rest = __rest(_a, ["shareLinks", "btnProps", "classNameContent", "classNameButton"]);
     var _f = React.useState(false), show = _f[0], setShow = _f[1];
     return (React__default["default"].createElement(Popover, { className: [style$N['popover'], !show ? style$N['popover--hidden'] : ''].join(' '), positionX: "right", positionY: "bottom", show: show, widthBase: 45, content: React__default["default"].createElement("ul", { className: [style$N['content'], classNameContent].join(' ') },
@@ -1782,10 +1790,10 @@ var Component$1D = function (_a) {
         React__default["default"].createElement("button", __assign({}, btnProps, { className: [style$N['popover__btn'], classNameButton].join(' '), onClick: function () { return setShow(function (show) { return !show; }); }, onBlur: function () { return setShow(false); } }),
             React__default["default"].createElement(IconItem, { size: 20, icon: Share }))));
 };
-Component$1D.displayName = 'SharePopover';
-var SharePopover = Component$1D;
+Component$1E.displayName = 'SharePopover';
+var SharePopover = Component$1E;
 
-var Component$1C = function (_a) {
+var Component$1D = function (_a) {
     var actionsAnchorIcons = _a.actionsAnchorIcons, actionsAnchorLinks = _a.actionsAnchorLinks, actionsAnchorTitle = _a.actionsAnchorTitle, externalButtonChild = _a.externalButtonChild, saveButtonProps = _a.saveButtonProps, shareButtonProps = _a.shareButtonProps;
     var actionsLinkList = actionsAnchorIcons === null || actionsAnchorIcons === void 0 ? void 0 : actionsAnchorIcons.map(function (_, index) { return ({
         icon: actionsAnchorIcons === null || actionsAnchorIcons === void 0 ? void 0 : actionsAnchorIcons[index],
@@ -1808,11 +1816,11 @@ var Component$1C = function (_a) {
 /**
  * UI Molecule Component for Jobs Actions
  */
-var JobActions = Component$1C;
+var JobActions = Component$1D;
 
 var styles$1v = {"magneto-ui-job-apply-card":"mg_job_apply_card_magneto-ui-job-apply-card_qw6j6","magneto-ui-job-apply-card__wrapper":"mg_job_apply_card_magneto-ui-job-apply-card_wrapper_qw6j6","magneto-ui-job-apply-card__header":"mg_job_apply_card_magneto-ui-job-apply-card_header_qw6j6","magneto-ui-job-apply-card__requirements":"mg_job_apply_card_magneto-ui-job-apply-card_requirements_qw6j6","magneto-ui__external-child":"mg_job_apply_card_magneto-ui_external-child_qw6j6"};
 
-var Component$1B = function (_a) {
+var Component$1C = function (_a) {
     var offerApplyHeader = _a.offerApplyHeader, offerApplyElements = _a.offerApplyElements, externalChild = _a.externalChild;
     return (React__default["default"].createElement("div", { className: styles$1v['magneto-ui-job-apply-card'] },
         React__default["default"].createElement("div", { className: styles$1v['magneto-ui-job-apply-card__wrapper'] },
@@ -1835,7 +1843,7 @@ var Component$1B = function (_a) {
 /**
  * UI Molecule Component for Job Apply Card
  */
-var JobApplyCard = Component$1B;
+var JobApplyCard = Component$1C;
 
 var style$M = {"magneto-ui-card-jobs":"mg_job_card_desktop_magneto-ui-card-jobs_1u1yc","magneto-ui-card-jobs--arrow":"mg_job_card_desktop_magneto-ui-card-jobs--arrow_1u1yc","magneto-ui-card-jobs--data":"mg_job_card_desktop_magneto-ui-card-jobs--data_1u1yc","magneto-ui-card-jobs--row1":"mg_job_card_desktop_magneto-ui-card-jobs--row1_1u1yc","magneto-ui-card-jobs--row2":"mg_job_card_desktop_magneto-ui-card-jobs--row2_1u1yc","magneto-ui-card-jobs--row3":"mg_job_card_desktop_magneto-ui-card-jobs--row3_1u1yc","magneto-ui-card-jobs--row4":"mg_job_card_desktop_magneto-ui-card-jobs--row4_1u1yc","magneto-ui-card-jobs--row2__position":"mg_job_card_desktop_magneto-ui-card-jobs--row2_position_1u1yc","magneto-ui-card-jobs--row2__urgent":"mg_job_card_desktop_magneto-ui-card-jobs--row2_urgent_1u1yc","magneto-ui-card-jobs--row2__variant":"mg_job_card_desktop_magneto-ui-card-jobs--row2_variant_1u1yc","magneto-ui-card-jobs--row3__info1":"mg_job_card_desktop_magneto-ui-card-jobs--row3_info1_1u1yc","magneto-ui-card-jobs--row3__info2":"mg_job_card_desktop_magneto-ui-card-jobs--row3_info2_1u1yc","magneto-ui-card-jobs--brand":"mg_job_card_desktop_magneto-ui-card-jobs--brand_1u1yc","magneto-ui-card-jobs--brand__img":"mg_job_card_desktop_magneto-ui-card-jobs--brand_img_1u1yc","was-seen":"mg_job_card_desktop_was-seen_1u1yc","is-active":"mg_job_card_desktop_is-active_1u1yc"};
 
@@ -1921,7 +1929,7 @@ var JobCard = function (_a) {
 
 var styles$1u = {"magneto-ui-job-company-header":"mg_job_company_header_magneto-ui-job-company-header_13130"};
 
-var Component$1A = function (_a) {
+var Component$1B = function (_a) {
     var jobCompanyLogoProps = _a.jobCompanyLogoProps, jobHeaderProps = _a.jobHeaderProps;
     return (React__default["default"].createElement("div", { className: styles$1u['magneto-ui-job-company-header'] },
         React__default["default"].createElement(JobCompanyLogo, __assign({}, jobCompanyLogoProps)),
@@ -1930,18 +1938,18 @@ var Component$1A = function (_a) {
 /**
  * UI Molecule component for Company Job Header
  */
-var JobCompanyHeader = Component$1A;
+var JobCompanyHeader = Component$1B;
 
 var styles$1t = {"magneto-ui-job-detail-card":"mg_job_detail_card_magneto-ui-job-detail-card_htydq"};
 
-var Component$1z = function (_a) {
+var Component$1A = function (_a) {
     var offerDescription = _a.offerDescription;
     return (React__default["default"].createElement("div", { className: styles$1t['magneto-ui-job-detail-card'] }, offerDescription !== null ? React__default["default"].createElement("div", { dangerouslySetInnerHTML: { __html: offerDescription } }) : React__default["default"].createElement(React.Fragment, null)));
 };
 /**
  * UI Molecule Component for Job Detail Card Header
  */
-var JobDetailCard = Component$1z;
+var JobDetailCard = Component$1A;
 
 var style$K = {"magneto-ui-job-detail-container":"mg_job_detail_container_magneto-ui-job-detail-container_2904j","magneto-ui-job-detail-container--btn":"mg_job_detail_container_magneto-ui-job-detail-container--btn_2904j","is-open":"mg_job_detail_container_is-open_2904j"};
 
@@ -1958,7 +1966,7 @@ var JobDetailContainer = function (_a) {
 
 var styles$1s = {"magneto-ui-job-details":"mg_job_details_magneto-ui-job-details_nkmig","magneto-ui-job-details__wrapper":"mg_job_details_magneto-ui-job-details_wrapper_nkmig","magneto-ui-job-details__item-detail":"mg_job_details_magneto-ui-job-details_item-detail_nkmig","magneto-ui-job-details__item-detail-icon":"mg_job_details_magneto-ui-job-details_item-detail-icon_nkmig","magneto-ui-job-details__item-detail-text":"mg_job_details_magneto-ui-job-details_item-detail-text_nkmig"};
 
-var Component$1y = function (_a) {
+var Component$1z = function (_a) {
     var offerDetailsList = _a.offerDetailsList, iconList = _a.iconList, altList = _a.altList, cities = _a.cities, textRemote = _a.textRemote, isRemote = _a.isRemote;
     var jobDetailsList = offerDetailsList === null || offerDetailsList === void 0 ? void 0 : offerDetailsList.map(function (offerDetailText, index) { return ({
         icon: iconList && iconList[index],
@@ -1983,12 +1991,12 @@ var Component$1y = function (_a) {
 /**
  * UI Molecule component for Job Detail
  */
-Component$1y.displayName = 'JobDetails';
-var JobDetails = Component$1y;
+Component$1z.displayName = 'JobDetails';
+var JobDetails = Component$1z;
 
 var styles$1r = {"magneto-ui-job-footer-card":"mg_job_footer_card_magneto-ui-job-footer-card_xmrf6","magneto-ui-job-footer-card__icons":"mg_job_footer_card_magneto-ui-job-footer-card_icons_xmrf6","magneto-ui-job-footer-card__wrapper":"mg_job_footer_card_magneto-ui-job-footer-card_wrapper_xmrf6","magneto-ui__share-button":"mg_job_footer_card_magneto-ui_share-button_xmrf6"};
 
-var Component$1x = function (_a) {
+var Component$1y = function (_a) {
     var offerFooterHeader = _a.offerFooterHeader, offerCompanyLogo = _a.offerCompanyLogo, offerFooterList = _a.offerFooterList, iconList = _a.iconList, shareButtonProps = _a.shareButtonProps, companyImgAlt = _a.companyImgAlt;
     var jobFooterList = offerFooterList === null || offerFooterList === void 0 ? void 0 : offerFooterList.map(function (_a, index) {
         var href = _a.href, title = _a.title, ariaLabel = _a.ariaLabel;
@@ -2016,11 +2024,11 @@ var Component$1x = function (_a) {
 /**
  * UI Molecule component for Job Footer Card
  */
-var JobFooterCard = Component$1x;
+var JobFooterCard = Component$1y;
 
 var styles$1q = {"magneto-ui-skill":"mg_skill_magneto-ui-skill_1nwsu","magneto-ui-skill__wrapper":"mg_skill_magneto-ui-skill_wrapper_1nwsu","magneto-ui-skill__bar":"mg_skill_magneto-ui-skill_bar_1nwsu","one":"mg_skill_one_1nwsu","two":"mg_skill_two_1nwsu","three":"mg_skill_three_1nwsu","four":"mg_skill_four_1nwsu"};
 
-var Component$1w = function (_a) {
+var Component$1x = function (_a) {
     var name = _a.name, score = _a.score;
     var _b = React.useState(false), animationApplied = _b[0], setAnimationApplied = _b[1];
     var skillRef = React.useRef(null);
@@ -2062,11 +2070,11 @@ var Component$1w = function (_a) {
             React__default["default"].createElement("p", null, name),
             React__default["default"].createElement("div", { className: "".concat(styles$1q['magneto-ui-skill__bar'], " ").concat(fillAnimation || styles$1q['magneto-ui-skill--no-animation']) }))));
 };
-var Skill = Component$1w;
+var Skill = Component$1x;
 
 var styles$1p = {"magneto-ui-job-skills-card":"mg_job_skills_card_magneto-ui-job-skills-card_o3vgw","magneto-ui-job-skills-card__skills-wrapper":"mg_job_skills_card_magneto-ui-job-skills-card_skills-wrapper_o3vgw"};
 
-var Component$1v = function (_a) {
+var Component$1w = function (_a) {
     var offerSkillsLabel = _a.offerSkillsLabel, offerSkills = _a.offerSkills;
     return (React__default["default"].createElement(React.Fragment, null, offerSkills && offerSkills.length >= 1 && (React__default["default"].createElement("div", { className: styles$1p['magneto-ui-job-skills-card'] },
         React__default["default"].createElement("p", null, offerSkillsLabel),
@@ -2079,7 +2087,7 @@ var Component$1v = function (_a) {
 /**
  * UI Molecule component of Job Skills Card
  */
-var JobSkillsCard = Component$1v;
+var JobSkillsCard = Component$1w;
 
 var styles$1o = {"magneto-ui-job-video":"mg_job_video_magneto-ui-job-video_ntfx8","magneto-ui-play-button":"mg_job_video_magneto-ui-play-button_ntfx8","jobDetailsVideo":"mg_job_video_jobDetailsVideo_ntfx8"};
 
@@ -2102,7 +2110,7 @@ var JobVideo = function (_a) {
 
 var style$J = {"magneto-ui-list-icon":"mg_list_icon_link_magneto-ui-list-icon_1b3zm"};
 
-var Component$1u = function (_a) {
+var Component$1v = function (_a) {
     var listIcon = _a.listIcon, size = _a.size, _b = _a.hover, hover = _b === void 0 ? true : _b, spacing = _a.spacing;
     return (React__default["default"].createElement("div", { style: { gap: "".concat(spacing, "px") }, className: style$J['magneto-ui-list-icon'] }, listIcon.map(function (_a, index) {
         var icon = _a.icon, url = _a.url, title = _a.title;
@@ -2110,11 +2118,11 @@ var Component$1u = function (_a) {
             React__default["default"].createElement(IconItem, { alt: title, hover: hover, size: size, icon: icon })));
     })));
 };
-var ListIconLink = Component$1u;
+var ListIconLink = Component$1v;
 
 var style$I = {"magneto-ui-menu-icon":"mg_menu_icon_magneto-ui-menu-icon_1nc3s","magneto-ui-menu-icon__menu-text":"mg_menu_icon_magneto-ui-menu-icon_menu-text_1nc3s","isActive":"mg_menu_icon_isActive_1nc3s"};
 
-var Component$1t = function (_a) {
+var Component$1u = function (_a) {
     var text = _a.text, icon = _a.icon, iconProps = _a.iconProps, _b = _a.iconSize, iconSize = _b === void 0 ? 20 : _b, url = _a.url, _c = _a.type, type = _c === void 0 ? 'link' : _c, onClick = _a.onClick, isActive = _a.isActive, _d = _a.className, className = _d === void 0 ? '' : _d, rel = _a.rel, target = _a.target;
     var menuActive = isActive ? style$I['isActive'] : '';
     return (React__default["default"].createElement(React__default["default"].Fragment, null, type === 'link' ? (React__default["default"].createElement("a", { href: url, className: "".concat(style$I['magneto-ui-menu-icon'], " ").concat(menuActive, " ").concat(className), title: text, rel: rel, target: target },
@@ -2123,11 +2131,11 @@ var Component$1t = function (_a) {
         icon && React__default["default"].createElement(IconItem, __assign({ size: iconSize, hover: false, icon: icon }, iconProps)),
         React__default["default"].createElement("p", { className: style$I['magneto-ui-menu-icon__menu-text'] }, text)))));
 };
-var MenuIcon = Component$1t;
+var MenuIcon = Component$1u;
 
 var style$H = {"mangeto-ui-list-menu-icons":"mg_list_menu_icons_mangeto-ui-list-menu-icons_u92cd"};
 
-var Component$1s = function (_a) {
+var Component$1t = function (_a) {
     var urlParam = _a.urlParam, menuItems = _a.menuItems, menuItems1440 = _a.menuItems1440, logout = _a.logout, settings = _a.settings, haveGif = _a.haveGif;
     var logoutText = logout.logoutText, onClick = logout.onClick;
     var settingsText = settings.settingsText, onClickSettings = settings.onClick;
@@ -2148,16 +2156,16 @@ var Component$1s = function (_a) {
         React__default["default"].createElement(Divider, null),
         React__default["default"].createElement(MenuIcon, { type: "button", onClick: onClick, icon: LogoutIcon, text: logoutText })));
 };
-var ListMenuIcons = Component$1s;
+var ListMenuIcons = Component$1t;
 
-var Component$1r = function (_a) {
+var Component$1s = function (_a) {
     var _b = _a.menuList, menuList = _b === void 0 ? [] : _b, _c = _a.urlParam, urlParam = _c === void 0 ? '' : _c;
     return (React__default["default"].createElement("div", null, menuList.map(function (_a, index) {
         var text = _a.text, url = _a.url, slug = _a.slug;
         return (React__default["default"].createElement(MenuItem, { key: index, isActive: urlParam === slug ? true : false, url: url, text: text }));
     })));
 };
-var ListMenuItems = Component$1r;
+var ListMenuItems = Component$1s;
 
 var style$G = {"magneto-ui-list-menu":"mg_list_menu_text_magneto-ui-list-menu_1m4l3","magneto-ui-list-menu__title":"mg_list_menu_text_magneto-ui-list-menu_title_1m4l3","magneto-ui-list-menu__link":"mg_list_menu_text_magneto-ui-list-menu_link_1m4l3","magneto-ui-list-menu__create-account":"mg_list_menu_text_magneto-ui-list-menu_create-account_1m4l3","magneto-ui-list-menu__create-account--btn":"mg_list_menu_text_magneto-ui-list-menu_create-account--btn_1m4l3"};
 
@@ -2204,7 +2212,7 @@ var style$D = {"mega-menu-cards":"mg_mega_menu_cards_mega-menu-cards_11ld6","meg
 
 var styles$1n = {"button-link":"mg_button_link_button-link_1iyy1","button-link__text":"mg_button_link_button-link_text_1iyy1"};
 
-var Component$1q = function (_a) {
+var Component$1r = 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;
     var handleClick = React.useCallback(function (event) {
         if (onClick) {
@@ -2220,7 +2228,7 @@ var Component$1q = function (_a) {
 /**
  * UI Atom Component of Save Button
  */
-var ButtonLink = Component$1q;
+var ButtonLink = Component$1r;
 
 var MegaMenuCards = function (_a) {
     var jobs = _a.jobs, action = _a.action, title = _a.title, actionTitle = _a.actionTitle, className = _a.className;
@@ -2332,51 +2340,80 @@ var MenuSearch = function (_a) {
             React__default["default"].createElement("div", { className: "".concat(styles$1l['magneto-ui-menu-search_content'], " ").concat(show && styles$1l.open) }, content))));
 };
 
-var initialState = {
-    text: '',
-    type: 'info',
-    duration: 3000
-};
 var iconByType = {
-    info: Info,
-    success: Success,
-    warning: Warning,
-    error: Error
+    info: InfoCircleBlueBold,
+    success: TickCircleGreenBold,
+    warning: WarningYellowBold,
+    error: CloseCircleRedBold
 };
+var transitionDuration = 300;
 
-var styles$1k = {"container":"mg_message_container_ccx0d","show":"mg_message_show_ccx0d","fadeIn":"mg_message_fadeIn_ccx0d","fadeOut":"mg_message_fadeOut_ccx0d","icon":"mg_message_icon_ccx0d"};
+var styles$1k = {"magneto-ui-message__container":"mg_message_magneto-ui-message_container_bk7n3","magneto-ui-message__container--show":"mg_message_magneto-ui-message_container--show_bk7n3","magneto-ui-message__container--hidden":"mg_message_magneto-ui-message_container--hidden_bk7n3","magneto-ui-message__container--info":"mg_message_magneto-ui-message_container--info_bk7n3","magneto-ui-message__container--success":"mg_message_magneto-ui-message_container--success_bk7n3","magneto-ui-message__container--warning":"mg_message_magneto-ui-message_container--warning_bk7n3","magneto-ui-message__container--error":"mg_message_magneto-ui-message_container--error_bk7n3","magneto-ui-message__text":"mg_message_magneto-ui-message_text_bk7n3","magneto-ui-message__text--bold":"mg_message_magneto-ui-message_text--bold_bk7n3","magneto-ui-message__icon":"mg_message_magneto-ui-message_icon_bk7n3"};
 
-var Message = function (props) {
-    var _a = React.useState(__assign(__assign({}, initialState), props)), _b = _a[0], text = _b.text, _c = _b.type, type = _c === void 0 ? 'info' : _c, _d = _b.duration, duration = _d === void 0 ? 3000 : _d, setContent = _a[1];
-    var messageRef = React.useRef(null);
+var Component$1q = function (_a) {
+    var className = _a.className, description = _a.description, _b = _a.duration, duration = _b === void 0 ? 3000 : _b, iconProps = _a.iconProps, onHide = _a.onHide, text = _a.text, _c = _a.type, type = _c === void 0 ? 'info' : _c, _d = _a.visible, visible = _d === void 0 ? true : _d;
+    var _e = React.useState(false), toggleAnimation = _e[0], setToggleAnimation = _e[1];
+    var _f = React.useState(visible), localVisible = _f[0], setLocalVisible = _f[1];
+    var _g = React.useState(false), isAnimating = _g[0], setIsAnimating = _g[1];
+    var removeTimeoutRef = React.useRef(null);
+    var hideTimeoutRef = React.useRef(null);
+    var containerVar = React.useMemo(function () { return ({
+        '--transition-duration': "".concat(transitionDuration / 1000, "s")
+    }); }, []);
+    var containerStyles = React.useMemo(function () {
+        return CNM.get({
+            styles: styles$1k,
+            cls: [
+                'message__container',
+                "message__container--".concat(toggleAnimation ? 'show' : 'hidden'),
+                "message__container--".concat(type)
+            ]
+        });
+    }, [type, toggleAnimation]);
+    var textStyles = React.useCallback(function (bold) { return CNM.get({ styles: styles$1k, cls: ['message__text', bold && 'message__text--bold'] }); }, []);
     React.useEffect(function () {
-        setTimeout(function () { return setContent(initialState); }, duration);
-    }, [duration]);
+        if (!localVisible)
+            return;
+        hideTimeoutRef.current = setTimeout(function () {
+            setToggleAnimation(false);
+        }, duration);
+        removeTimeoutRef.current = setTimeout(function () {
+            setLocalVisible(false);
+            onHide === null || onHide === void 0 ? void 0 : onHide(false);
+        }, duration + transitionDuration);
+        return function () {
+            if (hideTimeoutRef.current)
+                clearTimeout(hideTimeoutRef.current);
+            if (removeTimeoutRef.current)
+                clearTimeout(removeTimeoutRef.current);
+        };
+    }, [duration, localVisible, onHide]);
     React.useEffect(function () {
-        if (!messageRef.current)
+        if (!localVisible)
             return;
-        var exitDuration = "".concat((duration - 500) / 1000, "s");
-        messageRef.current.style.setProperty('--default-duration', exitDuration);
-    }, [duration]);
-    return (React__default["default"].createElement(React.Fragment, null, text &&
-        ReactDOM__default["default"].createPortal(React__default["default"].createElement("div", { ref: messageRef, className: "".concat(styles$1k.container, " ").concat(styles$1k.show) },
-            React__default["default"].createElement("img", { src: iconByType[type], className: styles$1k.icon, alt: type }),
-            text), document.body)));
-};
-var message = function (props) {
-    var idMessageDiv = 'magneto-ui-message';
-    if (!document)
-        return;
-    var messageActive = document.querySelector("#".concat(idMessageDiv));
-    if (messageActive)
-        return;
-    var container = document.createElement('div');
-    container.setAttribute('id', idMessageDiv);
-    document.body.appendChild(container);
-    ReactDOM__default["default"].render(React__default["default"].createElement(Message, __assign({}, props)), container);
-    var duration = props.duration ? props.duration : initialState.duration;
-    setTimeout(function () { return document.body.removeChild(container); }, duration);
+        setTimeout(function () {
+            setToggleAnimation(true);
+        }, 10);
+    }, [localVisible]);
+    React.useEffect(function () {
+        if ((!visible && !isAnimating) || (visible && isAnimating))
+            return;
+        setLocalVisible(visible);
+        setIsAnimating(visible);
+    }, [isAnimating, visible]);
+    return localVisible
+        ? ReactDOM__default["default"].createPortal(React__default["default"].createElement("div", { style: containerVar, className: CNM.get({ styles: styles$1k, cls: [className] }) },
+            React__default["default"].createElement("div", { className: containerStyles },
+                React__default["default"].createElement(IconItem, __assign({ alt: type, className: CNM.get({ styles: styles$1k, cls: ['message__icon'] }), icon: iconByType[type], showDefaultFallback: false, size: 20 }, iconProps)),
+                React__default["default"].createElement("div", null,
+                    text && React__default["default"].createElement("span", { className: textStyles(!!description) }, text),
+                    description && React__default["default"].createElement("span", { className: textStyles() }, description)))), document.body)
+        : null;
 };
+/**
+ * Molecule UI component for Message
+ */
+var Message = Component$1q;
 
 var styles$1j = {"magneto-ui-mobile-job-details-header":"mg_mobile_job_detail_header_magneto-ui-mobile-job-details-header_1fct0"};
 
@@ -7734,7 +7771,6 @@ exports.UserMenu = UserMenu;
 exports.UserMenuAnalyst = UserMenuAnalyst;
 exports.UserMenuButtonAnalyst = UserMenuButtonAnalyst;
 exports.UserMenuWrapperAnalyst = UserMenuWrapperAnalyst;
-exports.message = message;
 exports.useMediaQuery = useMediaQuery;
 exports.withClickOut = withClickOut;
 exports.withMegaMenuContainer = withMegaMenuContainer;