magneto365.ui 2.47.0 → 2.48.0

package/dist/esm/index.js

@@ -241,7 +241,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 = useState(false), imageError = _d[0], setImageError = _d[1];
     var handleError = function () {
@@ -257,7 +257,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"};
 
@@ -323,6 +323,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";
@@ -381,6 +383,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";
@@ -473,6 +477,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";
@@ -495,6 +501,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";
@@ -505,7 +513,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 = useState(false), imageError = _b[0], setImageError = _b[1];
     var handleError = function () {
@@ -519,7 +527,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';
 
@@ -658,7 +666,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 = useState(), component = _b[0], setComponent = _b[1];
     var actionsLinkList = ActionsAnchorIcons === null || ActionsAnchorIcons === void 0 ? void 0 : ActionsAnchorIcons.map(function (_, index) { return ({
@@ -710,7 +718,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"};
 
@@ -736,7 +744,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)];
@@ -748,7 +756,7 @@ var Component$1X = function (_a) {
             React.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"};
 
@@ -790,7 +798,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 = useState(false), showContent = _d[0], setShowContent = _d[1];
     var _e = useState(isOpen), renderPortal = _e[0], setRenderPortal = _e[1];
@@ -826,7 +834,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"};
 
@@ -884,7 +892,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.createElement("div", { className: styles$1U.BreadcrumbsComponent },
         React.createElement("a", { href: homeUrl },
@@ -894,7 +902,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"};
 
@@ -916,7 +924,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 = useMemo(function () {
         if (disabled)
@@ -932,14 +940,14 @@ var Component$1U = function (_a) {
             })),
         React.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 = useState(defaultValue$1(value).initialMonth), selectedMonth = _b[0], setSelectedMonth = _b[1];
     var _c = useState(defaultValue$1(value).initialYear), selectedYear = _c[0], setSelectedYear = _c[1];
@@ -977,12 +985,12 @@ var Component$1T = function (_a) {
         React.createElement(DateDropdown, { placeholderLabel: monthPlaceholder, dateOptions: monthOptionsList, selectedOption: selectedMonth, onOptionChanged: handleMonthChange, disabled: disabled }),
         React.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");
@@ -1028,7 +1036,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"};
 
@@ -1093,7 +1101,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 = useMemo(function () { return onAction && typeof onAction === 'string'; }, [onAction]);
     var Component = useMemo(function () { return (isUrl ? 'a' : 'button'); }, [isUrl]);
@@ -1131,11 +1139,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 = useCallback(function (multiple) {
         return CNM.get({
@@ -1182,7 +1190,7 @@ var Component$1Q = function (_a) {
 /**
  * Molecule UI child component of expandable info
  */
-var ExpandableInfoDetails = Component$1Q;
+var ExpandableInfoDetails = Component$1R;
 
 var EExpandableInfoVariant;
 (function (EExpandableInfoVariant) {
@@ -1205,7 +1213,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 = useCallback(function (icon) {
         if (icon) {
@@ -1229,11 +1237,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 = useState(false), visible = _b[0], setVisible = _b[1];
     var handleOnToggle = useCallback(function () {
@@ -1247,7 +1255,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"};
 
@@ -1313,7 +1321,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.createElement(Popover, { widthBase: 'auto', show: clickOut, positionX: "right", positionY: toggler.size === EExpandableInfoSize.LARGE ? 'top' : 'bottom', className: CNM.get({
             styles: styles$1M,
@@ -1333,7 +1341,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
@@ -1341,7 +1349,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 = useCallback(function (base) {
         return CNM.get({
@@ -1390,11 +1398,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 = useMemo(function () { return ({
         details: details,
@@ -1426,7 +1434,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"};
 
@@ -1523,7 +1531,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 = useState(true), showFullList = _b[0], setShowFullList = _b[1];
     var searchListDinamyc = useMemo(function () {
@@ -1548,29 +1556,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.createElement("div", { className: style$O['header-drawer-company'] },
         React.createElement(LogoComponent, { logo: logo, alt: alt }),
         React.createElement(LogoComponent, { logo: logoCompany, alt: logoCompanyAlt }),
         React.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.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"};
 
@@ -1587,7 +1595,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 = useMemo(function () { return toCSSVariables(tabButtonStyles); }, [tabButtonStyles]);
     var boxShadow = (tabButtonStyles || {}).boxShadow;
@@ -1596,11 +1604,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.createElement("div", { className: styles$1B.HeaderDrawerTabsComponent },
         React.createElement("a", { href: homeUrl },
@@ -1609,11 +1617,11 @@ var Component$1G = function (_a) {
             React.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.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.createElement("div", { className: styles$1A.HeaderTabsComponent, "data-add-divider": addDivider }, headerTabList.map(function (_a, index) {
         var headerTabProps = __rest(_a, []);
@@ -1626,7 +1634,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"};
 
@@ -1684,7 +1692,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 = useMemo(function () {
         if (size) {
@@ -1700,7 +1708,7 @@ var Component$1E = function (_a) {
     }, [size]);
     return (React.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"};
 
@@ -1755,7 +1763,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 = useState(false), show = _f[0], setShow = _f[1];
     return (React.createElement(Popover, { className: [style$N['popover'], !show ? style$N['popover--hidden'] : ''].join(' '), positionX: "right", positionY: "bottom", show: show, widthBase: 45, content: React.createElement("ul", { className: [style$N['content'], classNameContent].join(' ') },
@@ -1773,10 +1781,10 @@ var Component$1D = function (_a) {
         React.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.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],
@@ -1799,11 +1807,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.createElement("div", { className: styles$1v['magneto-ui-job-apply-card'] },
         React.createElement("div", { className: styles$1v['magneto-ui-job-apply-card__wrapper'] },
@@ -1826,7 +1834,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"};
 
@@ -1912,7 +1920,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.createElement("div", { className: styles$1u['magneto-ui-job-company-header'] },
         React.createElement(JobCompanyLogo, __assign({}, jobCompanyLogoProps)),
@@ -1921,18 +1929,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.createElement("div", { className: styles$1t['magneto-ui-job-detail-card'] }, offerDescription !== null ? React.createElement("div", { dangerouslySetInnerHTML: { __html: offerDescription } }) : React.createElement(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"};
 
@@ -1949,7 +1957,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],
@@ -1974,12 +1982,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;
@@ -2007,11 +2015,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 = useState(false), animationApplied = _b[0], setAnimationApplied = _b[1];
     var skillRef = useRef(null);
@@ -2053,11 +2061,11 @@ var Component$1w = function (_a) {
             React.createElement("p", null, name),
             React.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.createElement(Fragment, null, offerSkills && offerSkills.length >= 1 && (React.createElement("div", { className: styles$1p['magneto-ui-job-skills-card'] },
         React.createElement("p", null, offerSkillsLabel),
@@ -2070,7 +2078,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"};
 
@@ -2093,7 +2101,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.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;
@@ -2101,11 +2109,11 @@ var Component$1u = function (_a) {
             React.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.createElement(React.Fragment, null, type === 'link' ? (React.createElement("a", { href: url, className: "".concat(style$I['magneto-ui-menu-icon'], " ").concat(menuActive, " ").concat(className), title: text, rel: rel, target: target },
@@ -2114,11 +2122,11 @@ var Component$1t = function (_a) {
         icon && React.createElement(IconItem, __assign({ size: iconSize, hover: false, icon: icon }, iconProps)),
         React.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;
@@ -2139,16 +2147,16 @@ var Component$1s = function (_a) {
         React.createElement(Divider, null),
         React.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.createElement("div", null, menuList.map(function (_a, index) {
         var text = _a.text, url = _a.url, slug = _a.slug;
         return (React.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"};
 
@@ -2195,7 +2203,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 = useCallback(function (event) {
         if (onClick) {
@@ -2211,7 +2219,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;
@@ -2323,51 +2331,80 @@ var MenuSearch = function (_a) {
             React.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 = 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 = 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 = useState(false), toggleAnimation = _e[0], setToggleAnimation = _e[1];
+    var _f = useState(visible), localVisible = _f[0], setLocalVisible = _f[1];
+    var _g = useState(false), isAnimating = _g[0], setIsAnimating = _g[1];
+    var removeTimeoutRef = useRef(null);
+    var hideTimeoutRef = useRef(null);
+    var containerVar = useMemo(function () { return ({
+        '--transition-duration': "".concat(transitionDuration / 1000, "s")
+    }); }, []);
+    var containerStyles = 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 = useCallback(function (bold) { return CNM.get({ styles: styles$1k, cls: ['message__text', bold && 'message__text--bold'] }); }, []);
     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]);
     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.createElement(Fragment, null, text &&
-        ReactDOM.createPortal(React.createElement("div", { ref: messageRef, className: "".concat(styles$1k.container, " ").concat(styles$1k.show) },
-            React.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.render(React.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]);
+    useEffect(function () {
+        if ((!visible && !isAnimating) || (visible && isAnimating))
+            return;
+        setLocalVisible(visible);
+        setIsAnimating(visible);
+    }, [isAnimating, visible]);
+    return localVisible
+        ? ReactDOM.createPortal(React.createElement("div", { style: containerVar, className: CNM.get({ styles: styles$1k, cls: [className] }) },
+            React.createElement("div", { className: containerStyles },
+                React.createElement(IconItem, __assign({ alt: type, className: CNM.get({ styles: styles$1k, cls: ['message__icon'] }), icon: iconByType[type], showDefaultFallback: false, size: 20 }, iconProps)),
+                React.createElement("div", null,
+                    text && React.createElement("span", { className: textStyles(!!description) }, text),
+                    description && React.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"};
 
@@ -7586,5 +7623,5 @@ var Component = function (_a) {
 };
 var SuggestedJobsPage = Component;
 
-export { Actions, Alert, AnalystTemplate, Avatar, BarLoader, BrandMenu, BrandsContainer, BrandsMenuMobile, BrandsMenuPopover$1 as BrandsMenuPopover, Breadcrumb, Breadcrumbs, Button, CitiesDetailDrawer, ComparativeCounter, DateDropdown, DateInput, DatePicker, DatePickerResponsiveComponent, Divider, Drawer, DrawerMenu, EExpandableInfoSize, EExpandableInfoVariant, ERadioType, EmptyResult as EmptyResults, ExpandableInfo, FilterCard, FilterContainerMenu, FilterHeader, FilterMenuItem, FilterSearchItem, FlatLoader, Footer, FooterMenuLinks, FrequentSearch, HeaderAnalyst, HeaderDrawerCompany, HeaderDrawerTabs, HeaderTab, HeaderTabs, IconItem, Image, Input, InputPlus, InputSearch, JobActions, JobApplyCard, JobCard, JobCardDesktop, JobCardMobile, JobCompanyHeader, JobCompanyLogo, JobDetailCard, JobDetailContainer, JobDetails, JobDetailsDrawer, JobFooterCard, JobHeader, JobSkillsCard, JobVideo, JobsPage, Link, ListIconLink, ListMenuIcons, ListMenuItems, ListMenuText, ListSortMenu, Loading, LoginHeader, LoginJobsHeader, LoginJobsTemplate, LoginTemplate, LogoComponent, LogoutHeader, LogoutJobsHeader, LogoutJobsTemplate, LogoutTemplate, MagnetoResolution, MagnetoSocialMedia, ContextAppProvider as MagnetoUIProvider, MainButton, MegaMenu, MegaMenuCard, MegaMenuCards, MegaMenuJobsTabs, MegaMenuPopover, MegaMenuTab, MenuDropdown, MenuIcon, MenuItem, MenuSearch, Message, MobileDatePicker, MobileDrawer, MobileDrawerMenu, MobileJobDetailsDrawer, MobileJobDetailsHeader, MobileSearchbar, MobileSortMenu, Modal$1 as Modal, ModalAnalyst, MultiRangeSlider, MultipleSelectionEntry, NavMenuAnalyst, NavMenuAnalystRegionModal, NavMenuDrawerAnalyst, OneSelectionEntry, Pagination, Paragraph, Popover, Radio, RightsReservedText, SaveButton, ScoreLevel, ScoreLevelStatic, SearchButton, SearchItem, Searchbar, Select, Select2, ShareButton, SharePopover, SideFilter, SimilarJobs, SimilarJobsCard, Skill, SortBar, SortMenu$1 as SortMenu, SuggestedJobsPage, Switch, Tab, TabButton, Tags as Tag, TextArea, Timeline, TimelineEvent, ToggleButton, Tooltip, UserMenu, UserMenuAnalyst, UserMenuButtonAnalyst, UserMenuWrapperAnalyst, message, useMediaQuery, withClickOut, withMegaMenuContainer };
+export { Actions, Alert, AnalystTemplate, Avatar, BarLoader, BrandMenu, BrandsContainer, BrandsMenuMobile, BrandsMenuPopover$1 as BrandsMenuPopover, Breadcrumb, Breadcrumbs, Button, CitiesDetailDrawer, ComparativeCounter, DateDropdown, DateInput, DatePicker, DatePickerResponsiveComponent, Divider, Drawer, DrawerMenu, EExpandableInfoSize, EExpandableInfoVariant, ERadioType, EmptyResult as EmptyResults, ExpandableInfo, FilterCard, FilterContainerMenu, FilterHeader, FilterMenuItem, FilterSearchItem, FlatLoader, Footer, FooterMenuLinks, FrequentSearch, HeaderAnalyst, HeaderDrawerCompany, HeaderDrawerTabs, HeaderTab, HeaderTabs, IconItem, Image, Input, InputPlus, InputSearch, JobActions, JobApplyCard, JobCard, JobCardDesktop, JobCardMobile, JobCompanyHeader, JobCompanyLogo, JobDetailCard, JobDetailContainer, JobDetails, JobDetailsDrawer, JobFooterCard, JobHeader, JobSkillsCard, JobVideo, JobsPage, Link, ListIconLink, ListMenuIcons, ListMenuItems, ListMenuText, ListSortMenu, Loading, LoginHeader, LoginJobsHeader, LoginJobsTemplate, LoginTemplate, LogoComponent, LogoutHeader, LogoutJobsHeader, LogoutJobsTemplate, LogoutTemplate, MagnetoResolution, MagnetoSocialMedia, ContextAppProvider as MagnetoUIProvider, MainButton, MegaMenu, MegaMenuCard, MegaMenuCards, MegaMenuJobsTabs, MegaMenuPopover, MegaMenuTab, MenuDropdown, MenuIcon, MenuItem, MenuSearch, Message, MobileDatePicker, MobileDrawer, MobileDrawerMenu, MobileJobDetailsDrawer, MobileJobDetailsHeader, MobileSearchbar, MobileSortMenu, Modal$1 as Modal, ModalAnalyst, MultiRangeSlider, MultipleSelectionEntry, NavMenuAnalyst, NavMenuAnalystRegionModal, NavMenuDrawerAnalyst, OneSelectionEntry, Pagination, Paragraph, Popover, Radio, RightsReservedText, SaveButton, ScoreLevel, ScoreLevelStatic, SearchButton, SearchItem, Searchbar, Select, Select2, ShareButton, SharePopover, SideFilter, SimilarJobs, SimilarJobsCard, Skill, SortBar, SortMenu$1 as SortMenu, SuggestedJobsPage, Switch, Tab, TabButton, Tags as Tag, TextArea, Timeline, TimelineEvent, ToggleButton, Tooltip, UserMenu, UserMenuAnalyst, UserMenuButtonAnalyst, UserMenuWrapperAnalyst, useMediaQuery, withClickOut, withMegaMenuContainer };
 //# sourceMappingURL=index.js.map