magneto365.ui 2.63.8 → 2.64.0

package/dist/esm/index.js

@@ -239,7 +239,7 @@ var useMediaQuery = function (defaultValue, options) {
     return component;
 };
 
-var styles$2u = {"magneto-ui-icon":"mg_icon_magneto-ui-icon_tp25u","magneto-ui-hover":"mg_icon_magneto-ui-hover_tp25u","magneto-ui-rotate":"mg_icon_magneto-ui-rotate_tp25u"};
+var styles$2y = {"magneto-ui-icon":"mg_icon_magneto-ui-icon_tp25u","magneto-ui-hover":"mg_icon_magneto-ui-hover_tp25u","magneto-ui-rotate":"mg_icon_magneto-ui-rotate_tp25u"};
 
 function formatNumber(num) {
     if (typeof num !== 'number')
@@ -286,7 +286,7 @@ var classNames = {
     }
 };
 
-var cx$P = classNames.bind(styles$2u);
+var cx$U = classNames.bind(styles$2y);
 var Component$2D = function (_a) {
     var fallbackIcon = _a.fallbackIcon, _b = _a.showDefaultFallback, showDefaultFallback = _b === void 0 ? true : _b, icon = _a.icon, _c = _a.hover, hover = _c === void 0 ? false : _c, size = _a.size, className = _a.className, alt = _a.alt, isRotate = _a.isRotate;
     var _d = useState(false), imageError = _d[0], setImageError = _d[1];
@@ -294,18 +294,18 @@ var Component$2D = function (_a) {
         setImageError(true);
     };
     var iconSrc = useMemo(function () { return (!imageError ? icon !== null && icon !== void 0 ? icon : undefined : fallbackIcon); }, [fallbackIcon, imageError, icon]);
-    var isHover = hover ? cx$P('magneto-ui-hover') : '';
+    var isHover = hover ? cx$U('magneto-ui-hover') : '';
     var customStyle = size ? { width: size + 'px' } : {};
     if (!iconSrc && !showDefaultFallback)
         return null;
-    return (React.createElement(Fragment, null, icon && (React.createElement("img", { "data-name": "icon", style: customStyle, className: cx$P('magneto-ui-icon', { 'magneto-ui-rotate': isRotate }, isHover, className), src: iconSrc, alt: alt !== null && alt !== void 0 ? alt : "".concat(icon, " icon item"), loading: "lazy", width: '25px', onError: handleError }))));
+    return (React.createElement(Fragment, null, icon && (React.createElement("img", { "data-name": "icon", style: customStyle, className: cx$U('magneto-ui-icon', { 'magneto-ui-rotate': isRotate }, isHover, className), src: iconSrc, alt: alt !== null && alt !== void 0 ? alt : "".concat(icon, " icon item"), loading: "lazy", width: '25px', onError: handleError }))));
 };
 /**
  * Atom UI component of Icon for general purpose
  */
 var IconItem = Component$2D;
 
-var styles$2t = {"avatarComponent":"mg_avatar_avatarComponent_1upgt","magneto-ui-default-avatar":"mg_avatar_magneto-ui-default-avatar_1upgt"};
+var styles$2x = {"avatarComponent":"mg_avatar_avatarComponent_1upgt","magneto-ui-default-avatar":"mg_avatar_magneto-ui-default-avatar_1upgt"};
 
 var Add = "https://static.magneto365.com/lib/assets/f738cef7b76c444f.svg";
 
@@ -359,10 +359,12 @@ var BriefcaseWhiteOutline = "https://static.magneto365.com/lib/assets/01089d38d7
 
 var Broom = "https://static.magneto365.com/lib/assets/9c1d55cc247b09da.svg";
 
-var BuildingSlashBlackOutline = "https://static.magneto365.com/lib/assets/da7646bb56b7e29c.svg";
+var Building5 = "https://static.magneto365.com/lib/assets/5724480fa00284be.svg";
 
 var Buildings2 = "https://static.magneto365.com/lib/assets/11dece484f88eed0.svg";
 
+var BuildingSlashBlackOutline = "https://static.magneto365.com/lib/assets/da7646bb56b7e29c.svg";
+
 var Calendar1 = "https://static.magneto365.com/lib/assets/0b8544276681f8c8.svg";
 
 var Checked = "https://static.magneto365.com/lib/assets/530e8da9d7699174.svg";
@@ -453,10 +455,10 @@ var IsoLogoMagnetoDark = "https://static.magneto365.com/lib/assets/7e60e6c4b8305
 
 var Link1 = "https://static.magneto365.com/lib/assets/38e44ce280218375.svg";
 
-var LinkedInBlue = "https://static.magneto365.com/lib/assets/cff89749dd038dca.svg";
-
 var Linkedin = "https://static.magneto365.com/lib/assets/86746fb681bfc4fe.svg";
 
+var LinkedInBlue = "https://static.magneto365.com/lib/assets/cff89749dd038dca.svg";
+
 var LinkedinSolid = "https://static.magneto365.com/lib/assets/e064bafd7de57824.svg";
 
 var Location = "https://static.magneto365.com/lib/assets/1d2b2fdbb7ac3a22.svg";
@@ -479,12 +481,12 @@ var MessageQuestion = "https://static.magneto365.com/lib/assets/4be843dae5de2ab7
 
 var Messages2BlackOutline = "https://static.magneto365.com/lib/assets/801c14292dfce9f7.svg";
 
-var MinTrabajo = "https://static.magneto365.com/lib/assets/756115bfe5634bf3.svg";
-
 var MiniArrowGrayDown = "https://static.magneto365.com/lib/assets/0385a8005062bc95.svg";
 
 var MiniArrowGrayUp = "https://static.magneto365.com/lib/assets/e5049168ea868a14.svg";
 
+var MinTrabajo = "https://static.magneto365.com/lib/assets/756115bfe5634bf3.svg";
+
 var Mobile = "https://static.magneto365.com/lib/assets/1ffa551d093c61e8.svg";
 
 var More = "https://static.magneto365.com/lib/assets/257cb9e07aa4ed0f.svg";
@@ -509,8 +511,6 @@ var RedoDarkBlue = "https://static.magneto365.com/lib/assets/4cf47c41aa26c92f.sv
 
 var Refresh = "https://static.magneto365.com/lib/assets/ccf7b78b6ea5c7b1.svg";
 
-var SMSBlue = "https://static.magneto365.com/lib/assets/b7ccde33a6f717b4.svg";
-
 var SearchIcon = "https://static.magneto365.com/lib/assets/d62a2c77122eb864.svg";
 
 var SearchNormal1 = "https://static.magneto365.com/lib/assets/37c68bee58e241c3.svg";
@@ -527,10 +527,16 @@ var SettingWhiteOutline = "https://static.magneto365.com/lib/assets/aa52049cee4a
 
 var Share = "https://static.magneto365.com/lib/assets/2349a66212a9afeb.svg";
 
+var Share2 = "https://static.magneto365.com/lib/assets/40ead0ba61f8ecca.svg";
+
+var Share2Bold = "https://static.magneto365.com/lib/assets/d56b874c91887b05.svg";
+
 var ShoppingCartBlueOutline = "https://static.magneto365.com/lib/assets/bdaa69e0d22124aa.svg";
 
 var SmallClose = "https://static.magneto365.com/lib/assets/08aa49c5bd43a865.svg";
 
+var SMSBlue = "https://static.magneto365.com/lib/assets/b7ccde33a6f717b4.svg";
+
 var SpinnerWhite = "https://static.magneto365.com/lib/assets/b97768a94b8e244b.svg";
 
 var Success = "https://static.magneto365.com/lib/assets/d08d09ab2ca482fb.svg";
@@ -595,9 +601,9 @@ var Component$2C = function (_a) {
     var handleError = function () {
         setImageError(true);
     };
-    return (React.createElement("div", { className: styles$2t.avatarComponent, onClick: onClick },
+    return (React.createElement("div", { className: styles$2x.avatarComponent, onClick: onClick },
         userImage && !imageError && React.createElement("img", { src: userImage, alt: "User Avatar", loading: "lazy", onError: handleError }),
-        (!userImage || imageError) && (React.createElement("div", { className: styles$2t['magneto-ui-default-avatar'] },
+        (!userImage || imageError) && (React.createElement("div", { className: styles$2x['magneto-ui-default-avatar'] },
             React.createElement(IconItem, { icon: fallbackImage || User, hover: false })))));
 };
 /**
@@ -605,12 +611,12 @@ var Component$2C = function (_a) {
  */
 var Avatar = Component$2C;
 
-var styles$2s = {"badge-count":"mg_badge_badge-count_15t5z","badge-count__animation":"mg_badge_badge-count_animation_15t5z","pulse":"mg_badge_pulse_15t5z"};
+var styles$2w = {"badge-count":"mg_badge_badge-count_15t5z","badge-count__animation":"mg_badge_badge-count_animation_15t5z","pulse":"mg_badge_pulse_15t5z"};
 
 var Component$2B = function (_a) {
     var _b = _a.number, number = _b === void 0 ? undefined : _b, className = _a.className;
-    return (React.createElement("p", { className: "".concat(styles$2s['badge-count'], " ").concat(className) },
-        React.createElement("span", { className: styles$2s['badge-count__animation'] }),
+    return (React.createElement("p", { className: "".concat(styles$2w['badge-count'], " ").concat(className) },
+        React.createElement("span", { className: styles$2w['badge-count__animation'] }),
         number && number));
 };
 var Badge = Component$2B;
@@ -968,6 +974,301 @@ var TYPE_TITLE = {
     SUB_TITLE: 'SubTitle'
 };
 
+[
+    {
+        id: 1,
+        title: 'Desarrollador Web',
+        cities: ['Medellin', 'Barranquila', 'Bogota', 'Cali', 'Pasto', 'Cartagena'],
+        companyLogo: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS0KGGKFa3GNtqGOaHoMxCqhaIj1Xauu3n61Q&usqp=CAU',
+        companyName: 'Adidas',
+        companySlug: 'adidas',
+        educationLevel: 'Básica primaria, Bachillerato (grados 6°, 7° u 8°), Bachillerato (grados 9°, 10° y 11°), Bachillerato completo, Técnico, Tecnólogo, Profesional, Especialización/ Maestría, Doctorado.',
+        experience: '6 meses de experiencia',
+        salary: '1.200.000 a 4.000.000',
+        formatPublishDate: 'hace 10 dias',
+        others: 'otras',
+        contractType: 'Termino fijo',
+        offerVacancyData: '30 cupos, 2 postulantes',
+        offerDescription: '<h1>¡Trabaja con el Grupo Éxito!</h1><br /><p>Importante no estar en ningun otro proceso con el Grupo Éxito. Buscamos personas como tú,  que deseen trabajar en el cargo auxiliar polivalente.</p> <h1>¿Qué necesitas?</h1><br /><p>Mínimo 2 años de experiencia, ser profesional.<br /><br />Disponibilidad de tiempo para laborar del  21 de Enero 2022  al 17 de Julio de 2023 turnos de 6  horas diarias, con posibilidad  de continuar en otras temporadas o seguir en cargos fijos.<br /><br />Estar cursando los últimos grados de la carrera o haberla finalizado.</p><h1>¿Qué te ofrecemos?</h1><br /><p>Salario entre $2’000.000 a $3’000.000 aproximadamente.</p> <h1>¡Aplica y no te pierdas esta oportunidad!</h1><br /><p>Si está interesado(a) y cumple con los requisitos debe estar pendiente de su correo electrónico y número de celular personal para envío de pruebas psicotécnicas y citación a video entrevista. FAVOR actualice esta información en la plataforma si cambió de número o el correo no es suyo o no puede ingresar.</p>',
+        urgent: '¡Se requiere urgente!',
+        offerSkills: {
+            offerSkillsLabel: 'Habilidades',
+            offerSkills: [
+                { id: 12, name: 'Habilidades comerciales', score: 2 },
+                { id: 12, name: 'Capacidad de negociación', score: 4 },
+                { id: 12, name: 'Conocimiento de microfinanzas', score: 1 }
+            ]
+        },
+        menu: []
+    },
+    {
+        id: 2,
+        title: 'Analista',
+        cities: ['Medellin', 'Barranquila', 'Bogota'],
+        companyLogo: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR5KMoo9RUN_NnD4aWgDuHUeEGTUfJXpimlWA&usqp=CAU',
+        companyName: 'Coca-cola',
+        companySlug: 'coca-cola',
+        educationLevel: 'Arquitecto',
+        experience: '12 meses de experiencia',
+        salary: '3.200.000',
+        formatPublishDate: 'hace 20 dias',
+        others: 'otras',
+        contractType: 'Prestacion de servicios',
+        offerVacancyData: '30 cupos, 2 postulantes',
+        offerDescription: '<h1>¡Trabaja con el Grupo Éxito!</h1><br /><p>Importante no estar en ningun otro proceso con el Grupo Éxito. Buscamos personas como tú,  que deseen trabajar en el cargo auxiliar polivalente.</p> <h1>¿Qué necesitas?</h1><br /><p>Mínimo 2 años de experiencia, ser profesional.<br /><br />Disponibilidad de tiempo para laborar del  21 de Enero 2022  al 17 de Julio de 2023 turnos de 6  horas diarias, con posibilidad  de continuar en otras temporadas o seguir en cargos fijos.<br /><br />Estar cursando los últimos grados de la carrera o haberla finalizado.</p><h1>¿Qué te ofrecemos?</h1><br /><p>Salario entre $2’000.000 a $3’000.000 aproximadamente.</p> <h1>¡Aplica y no te pierdas esta oportunidad!</h1><br /><p>Si está interesado(a) y cumple con los requisitos debe estar pendiente de su correo electrónico y número de celular personal para envío de pruebas psicotécnicas y citación a video entrevista. FAVOR actualice esta información en la plataforma si cambió de número o el correo no es suyo o no puede ingresar.</p>',
+        offerSkills: {
+            offerSkillsLabel: 'Habilidades',
+            offerSkills: [
+                { id: 12, name: 'Habilidades comerciales', score: 2 },
+                { id: 12, name: 'Capacidad de negociación', score: 4 },
+                { id: 12, name: 'Conocimiento de microfinanzas', score: 1 }
+            ]
+        },
+        backText: 'Atrás',
+        menu: []
+    },
+    {
+        id: 3,
+        title: 'UX | UI designer',
+        cities: ['Medellin', 'Barranquila', 'Cali', 'Pasto'],
+        companyLogo: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRPt4mvHEh4kyEkHx7bRVB1PXGPd_rvGZDmaA&usqp=CAU',
+        companyName: 'Lego',
+        companySlug: 'legos',
+        educationLevel: 'Tecnologo',
+        experience: '6 meses de experiencia',
+        salary: 'COP $ 3.000.000',
+        formatPublishDate: 'hace 2 meses',
+        others: 'otras',
+        contractType: 'Termino indefinido',
+        offerVacancyData: '30 cupos, 2 postulantes',
+        urgent: '¡Se requiere urgente!',
+        offerDescription: '<h1>¡Trabaja con el Grupo Éxito!</h1><br /><p>Importante no estar en ningun otro proceso con el Grupo Éxito. Buscamos personas como tú,  que deseen trabajar en el cargo auxiliar polivalente.</p> <h1>¿Qué necesitas?</h1><br /><p>Mínimo 2 años de experiencia, ser profesional.<br /><br />Disponibilidad de tiempo para laborar del  21 de Enero 2022  al 17 de Julio de 2023 turnos de 6  horas diarias, con posibilidad  de continuar en otras temporadas o seguir en cargos fijos.<br /><br />Estar cursando los últimos grados de la carrera o haberla finalizado.</p><h1>¿Qué te ofrecemos?</h1><br /><p>Salario entre $2’000.000 a $3’000.000 aproximadamente.</p> <h1>¡Aplica y no te pierdas esta oportunidad!</h1><br /><p>Si está interesado(a) y cumple con los requisitos debe estar pendiente de su correo electrónico y número de celular personal para envío de pruebas psicotécnicas y citación a video entrevista. FAVOR actualice esta información en la plataforma si cambió de número o el correo no es suyo o no puede ingresar.</p>',
+        offerSkills: {
+            offerSkillsLabel: 'Habilidades',
+            offerSkills: [
+                { id: 12, name: 'Habilidades comerciales', score: 2 },
+                { id: 12, name: 'Capacidad de negociación', score: 4 },
+                { id: 12, name: 'Conocimiento de microfinanzas', score: 1 }
+            ]
+        },
+        menu: []
+    },
+    {
+        id: 4,
+        title: 'Desarrollador Web',
+        cities: ['Medellin', 'Barranquila', 'Bogota', 'Cali', 'Pasto', 'Cartagena'],
+        companyLogo: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS0KGGKFa3GNtqGOaHoMxCqhaIj1Xauu3n61Q&usqp=CAU',
+        companyName: 'Adidas',
+        companySlug: 'adidas',
+        educationLevel: 'Básica primaria, Bachillerato (grados 6°, 7° u 8°), Bachillerato (grados 9°, 10° y 11°), Bachillerato completo, Técnico, Tecnólogo, Profesional, Especialización/ Maestría, Doctorado.',
+        experience: '6 meses de experiencia',
+        salary: '1.200.000 a 4.000.000',
+        formatPublishDate: 'hace 10 dias',
+        others: 'otras',
+        contractType: 'Termino fijo',
+        offerVacancyData: '30 cupos, 2 postulantes',
+        offerDescription: '<h1>¡Trabaja con el Grupo Éxito!</h1><br /><p>Importante no estar en ningun otro proceso con el Grupo Éxito. Buscamos personas como tú,  que deseen trabajar en el cargo auxiliar polivalente.</p> <h1>¿Qué necesitas?</h1><br /><p>Mínimo 2 años de experiencia, ser profesional.<br /><br />Disponibilidad de tiempo para laborar del  21 de Enero 2022  al 17 de Julio de 2023 turnos de 6  horas diarias, con posibilidad  de continuar en otras temporadas o seguir en cargos fijos.<br /><br />Estar cursando los últimos grados de la carrera o haberla finalizado.</p><h1>¿Qué te ofrecemos?</h1><br /><p>Salario entre $2’000.000 a $3’000.000 aproximadamente.</p> <h1>¡Aplica y no te pierdas esta oportunidad!</h1><br /><p>Si está interesado(a) y cumple con los requisitos debe estar pendiente de su correo electrónico y número de celular personal para envío de pruebas psicotécnicas y citación a video entrevista. FAVOR actualice esta información en la plataforma si cambió de número o el correo no es suyo o no puede ingresar.</p>',
+        offerSkills: {
+            offerSkillsLabel: 'Habilidades',
+            offerSkills: [
+                { id: 12, name: 'Habilidades comerciales', score: 2 },
+                { id: 12, name: 'Capacidad de negociación', score: 4 },
+                { id: 12, name: 'Conocimiento de microfinanzas', score: 1 }
+            ]
+        },
+        menu: []
+    },
+    {
+        id: 5,
+        title: 'Analista',
+        cities: ['Medellin', 'Barranquila', 'Bogota'],
+        companyLogo: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR5KMoo9RUN_NnD4aWgDuHUeEGTUfJXpimlWA&usqp=CAU',
+        companyName: 'Coca-cola',
+        companySlug: 'coca-cola',
+        educationLevel: 'Arquitecto',
+        experience: '12 meses de experiencia',
+        salary: '3.200.000',
+        formatPublishDate: 'hace 20 dias',
+        others: 'otras',
+        contractType: 'Prestacion de servicios',
+        offerVacancyData: '30 cupos, 2 postulantes',
+        offerDescription: '<h1>¡Trabaja con el Grupo Éxito!</h1><br /><p>Importante no estar en ningun otro proceso con el Grupo Éxito. Buscamos personas como tú,  que deseen trabajar en el cargo auxiliar polivalente.</p> <h1>¿Qué necesitas?</h1><br /><p>Mínimo 2 años de experiencia, ser profesional.<br /><br />Disponibilidad de tiempo para laborar del  21 de Enero 2022  al 17 de Julio de 2023 turnos de 6  horas diarias, con posibilidad  de continuar en otras temporadas o seguir en cargos fijos.<br /><br />Estar cursando los últimos grados de la carrera o haberla finalizado.</p><h1>¿Qué te ofrecemos?</h1><br /><p>Salario entre $2’000.000 a $3’000.000 aproximadamente.</p> <h1>¡Aplica y no te pierdas esta oportunidad!</h1><br /><p>Si está interesado(a) y cumple con los requisitos debe estar pendiente de su correo electrónico y número de celular personal para envío de pruebas psicotécnicas y citación a video entrevista. FAVOR actualice esta información en la plataforma si cambió de número o el correo no es suyo o no puede ingresar.</p>',
+        offerSkills: {
+            offerSkillsLabel: 'Habilidades',
+            offerSkills: [
+                { id: 12, name: 'Habilidades comerciales', score: 2 },
+                { id: 12, name: 'Capacidad de negociación', score: 4 },
+                { id: 12, name: 'Conocimiento de microfinanzas', score: 1 }
+            ]
+        },
+        menu: []
+    },
+    {
+        id: 6,
+        title: 'UX | UI designer',
+        cities: ['Medellin', 'Barranquila', 'Cali', 'Pasto'],
+        companyLogo: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRPt4mvHEh4kyEkHx7bRVB1PXGPd_rvGZDmaA&usqp=CAU',
+        companyName: 'Lego',
+        companySlug: 'legos',
+        educationLevel: 'Tecnologo',
+        experience: '6 meses de experiencia',
+        salary: '3.000.000',
+        formatPublishDate: 'hace 2 meses',
+        others: 'otras',
+        contractType: 'Termino indefinido',
+        offerVacancyData: '30 cupos, 2 postulantes',
+        offerDescription: '<h1>¡Trabaja con el Grupo Éxito!</h1><br /><p>Importante no estar en ningun otro proceso con el Grupo Éxito. Buscamos personas como tú,  que deseen trabajar en el cargo auxiliar polivalente.</p> <h1>¿Qué necesitas?</h1><br /><p>Mínimo 2 años de experiencia, ser profesional.<br /><br />Disponibilidad de tiempo para laborar del  21 de Enero 2022  al 17 de Julio de 2023 turnos de 6  horas diarias, con posibilidad  de continuar en otras temporadas o seguir en cargos fijos.<br /><br />Estar cursando los últimos grados de la carrera o haberla finalizado.</p><h1>¿Qué te ofrecemos?</h1><br /><p>Salario entre $2’000.000 a $3’000.000 aproximadamente.</p> <h1>¡Aplica y no te pierdas esta oportunidad!</h1><br /><p>Si está interesado(a) y cumple con los requisitos debe estar pendiente de su correo electrónico y número de celular personal para envío de pruebas psicotécnicas y citación a video entrevista. FAVOR actualice esta información en la plataforma si cambió de número o el correo no es suyo o no puede ingresar.</p>',
+        offerSkills: {
+            offerSkillsLabel: 'Habilidades',
+            offerSkills: [
+                { id: 12, name: 'Habilidades comerciales', score: 2 },
+                { id: 12, name: 'Capacidad de negociación', score: 4 },
+                { id: 12, name: 'Conocimiento de microfinanzas', score: 1 }
+            ]
+        },
+        menu: []
+    },
+    {
+        id: 7,
+        title: 'Desarrollador Web',
+        cities: ['Medellin', 'Barranquila', 'Bogota', 'Cali', 'Pasto', 'Cartagena'],
+        companyLogo: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS0KGGKFa3GNtqGOaHoMxCqhaIj1Xauu3n61Q&usqp=CAU',
+        companyName: 'Adidas',
+        companySlug: 'adidas',
+        educationLevel: 'Básica primaria, Bachillerato (grados 6°, 7° u 8°), Bachillerato (grados 9°, 10° y 11°), Bachillerato completo, Técnico, Tecnólogo, Profesional, Especialización/ Maestría, Doctorado.',
+        experience: '6 meses de experiencia',
+        salary: '1.200.000 a 4.000.000',
+        formatPublishDate: 'hace 10 dias',
+        others: 'otras',
+        contractType: 'Termino fijo',
+        offerVacancyData: '30 cupos, 2 postulantes',
+        offerDescription: '<h1>¡Trabaja con el Grupo Éxito!</h1><br /><p>Importante no estar en ningun otro proceso con el Grupo Éxito. Buscamos personas como tú,  que deseen trabajar en el cargo auxiliar polivalente.</p> <h1>¿Qué necesitas?</h1><br /><p>Mínimo 2 años de experiencia, ser profesional.<br /><br />Disponibilidad de tiempo para laborar del  21 de Enero 2022  al 17 de Julio de 2023 turnos de 6  horas diarias, con posibilidad  de continuar en otras temporadas o seguir en cargos fijos.<br /><br />Estar cursando los últimos grados de la carrera o haberla finalizado.</p><h1>¿Qué te ofrecemos?</h1><br /><p>Salario entre $2’000.000 a $3’000.000 aproximadamente.</p> <h1>¡Aplica y no te pierdas esta oportunidad!</h1><br /><p>Si está interesado(a) y cumple con los requisitos debe estar pendiente de su correo electrónico y número de celular personal para envío de pruebas psicotécnicas y citación a video entrevista. FAVOR actualice esta información en la plataforma si cambió de número o el correo no es suyo o no puede ingresar.</p>',
+        offerSkills: {
+            offerSkillsLabel: 'Habilidades',
+            offerSkills: [
+                { id: 12, name: 'Habilidades comerciales', score: 2 },
+                { id: 12, name: 'Capacidad de negociación', score: 4 },
+                { id: 12, name: 'Conocimiento de microfinanzas', score: 1 }
+            ]
+        },
+        menu: []
+    },
+    {
+        id: 8,
+        title: 'Analista',
+        cities: ['Medellin', 'Barranquila', 'Bogota'],
+        companyLogo: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR5KMoo9RUN_NnD4aWgDuHUeEGTUfJXpimlWA&usqp=CAU',
+        companyName: 'Coca-cola',
+        companySlug: 'coca-cola',
+        educationLevel: 'Arquitecto',
+        experience: '12 meses de experiencia',
+        salary: '3.200.000',
+        formatPublishDate: 'hace 20 dias',
+        others: 'otras',
+        contractType: 'Prestacion de servicios',
+        offerVacancyData: '30 cupos, 2 postulantes',
+        offerDescription: '<h1>¡Trabaja con el Grupo Éxito!</h1><br /><p>Importante no estar en ningun otro proceso con el Grupo Éxito. Buscamos personas como tú,  que deseen trabajar en el cargo auxiliar polivalente.</p> <h1>¿Qué necesitas?</h1><br /><p>Mínimo 2 años de experiencia, ser profesional.<br /><br />Disponibilidad de tiempo para laborar del  21 de Enero 2022  al 17 de Julio de 2023 turnos de 6  horas diarias, con posibilidad  de continuar en otras temporadas o seguir en cargos fijos.<br /><br />Estar cursando los últimos grados de la carrera o haberla finalizado.</p><h1>¿Qué te ofrecemos?</h1><br /><p>Salario entre $2’000.000 a $3’000.000 aproximadamente.</p> <h1>¡Aplica y no te pierdas esta oportunidad!</h1><br /><p>Si está interesado(a) y cumple con los requisitos debe estar pendiente de su correo electrónico y número de celular personal para envío de pruebas psicotécnicas y citación a video entrevista. FAVOR actualice esta información en la plataforma si cambió de número o el correo no es suyo o no puede ingresar.</p>',
+        offerSkills: {
+            offerSkillsLabel: 'Habilidades',
+            offerSkills: [
+                { id: 12, name: 'Habilidades comerciales', score: 2 },
+                { id: 12, name: 'Capacidad de negociación', score: 4 },
+                { id: 12, name: 'Conocimiento de microfinanzas', score: 1 }
+            ]
+        },
+        menu: []
+    },
+    {
+        id: 9,
+        title: 'UX | UI designer',
+        cities: ['Medellin', 'Barranquila', 'Cali', 'Pasto'],
+        companyLogo: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRPt4mvHEh4kyEkHx7bRVB1PXGPd_rvGZDmaA&usqp=CAU',
+        companyName: 'Lego',
+        companySlug: 'legos',
+        educationLevel: 'Tecnologo',
+        experience: '6 meses de experiencia',
+        salary: '3.000.000',
+        formatPublishDate: 'hace 2 meses',
+        others: 'otras',
+        contractType: 'Termino indefinido',
+        offerVacancyData: '30 cupos, 2 postulantes',
+        offerDescription: '<h1>¡Trabaja con el Grupo Éxito!</h1><br /><p>Importante no estar en ningun otro proceso con el Grupo Éxito. Buscamos personas como tú,  que deseen trabajar en el cargo auxiliar polivalente.</p> <h1>¿Qué necesitas?</h1><br /><p>Mínimo 2 años de experiencia, ser profesional.<br /><br />Disponibilidad de tiempo para laborar del  21 de Enero 2022  al 17 de Julio de 2023 turnos de 6  horas diarias, con posibilidad  de continuar en otras temporadas o seguir en cargos fijos.<br /><br />Estar cursando los últimos grados de la carrera o haberla finalizado.</p><h1>¿Qué te ofrecemos?</h1><br /><p>Salario entre $2’000.000 a $3’000.000 aproximadamente.</p> <h1>¡Aplica y no te pierdas esta oportunidad!</h1><br /><p>Si está interesado(a) y cumple con los requisitos debe estar pendiente de su correo electrónico y número de celular personal para envío de pruebas psicotécnicas y citación a video entrevista. FAVOR actualice esta información en la plataforma si cambió de número o el correo no es suyo o no puede ingresar.</p>',
+        offerSkills: {
+            offerSkillsLabel: 'Habilidades',
+            offerSkills: [
+                { id: 12, name: 'Habilidades comerciales', score: 2 },
+                { id: 12, name: 'Capacidad de negociación', score: 4 },
+                { id: 12, name: 'Conocimiento de microfinanzas', score: 1 }
+            ]
+        },
+        menu: []
+    }
+].map(function (vacant) { return (__assign(__assign({}, vacant), { menu: [
+        {
+            type: 'button',
+            label: 'Guardar Vacante',
+            icon: 'ArchiveAdd'
+        },
+        {
+            type: 'menu',
+            label: 'Compartir',
+            icon: 'Share',
+            children: [
+                {
+                    type: 'link',
+                    label: 'Facebook',
+                    href: 'facebook',
+                    className: 'icon--big',
+                    icon: 'Facebook'
+                },
+                {
+                    type: 'link',
+                    label: 'Whatsapp',
+                    icon: 'WhatsApp',
+                    className: 'icon--big',
+                    href: 'whastapp'
+                },
+                {
+                    type: 'link',
+                    label: 'Linkedin',
+                    href: 'linkedin',
+                    className: 'icon--big',
+                    icon: 'LinkedIn'
+                },
+                {
+                    type: 'link',
+                    label: 'X',
+                    href: 'x',
+                    className: 'icon--big',
+                    icon: 'X'
+                },
+                {
+                    type: 'link',
+                    label: 'Correo',
+                    href: 'email',
+                    className: 'icon--big',
+                    icon: 'Sms'
+                },
+                {
+                    type: 'button',
+                    label: 'Copiar Enlace',
+                    icon: 'ShareBold'
+                }
+            ]
+        },
+        {
+            type: 'link',
+            label: 'Abrir en otra pestaña',
+            href: 'other link',
+            icon: 'Export'
+        },
+        {
+            type: 'link',
+            label: 'Ver empresa',
+            icon: 'Building',
+            href: 'enterprise'
+        }
+    ] })); });
 var anchorIconList = [Export3, Buildings2];
 var iconDetailList = [Calendar1, People, Briefcase, DollarCircle, Location, Tag];
 var altList = [
@@ -1058,7 +1359,7 @@ var CNM = /** @class */ (function () {
     return CNM;
 }());
 
-var styles$2r = {"magneto-ui-bar-loader":"mg_bar_loader_magneto-ui-bar-loader_1f3jh","magneto-ui-bar-loader__bar":"mg_bar_loader_magneto-ui-bar-loader_bar_1f3jh","magneto-ui-bar-loader__bar--animated":"mg_bar_loader_magneto-ui-bar-loader_bar--animated_1f3jh","progress":"mg_bar_loader_progress_1f3jh","magneto-ui-bar-loader__bar--completed":"mg_bar_loader_magneto-ui-bar-loader_bar--completed_1f3jh"};
+var styles$2v = {"magneto-ui-bar-loader":"mg_bar_loader_magneto-ui-bar-loader_1f3jh","magneto-ui-bar-loader__bar":"mg_bar_loader_magneto-ui-bar-loader_bar_1f3jh","magneto-ui-bar-loader__bar--animated":"mg_bar_loader_magneto-ui-bar-loader_bar--animated_1f3jh","progress":"mg_bar_loader_progress_1f3jh","magneto-ui-bar-loader__bar--completed":"mg_bar_loader_magneto-ui-bar-loader_bar--completed_1f3jh"};
 
 var Component$2A = function (_a) {
     var className = _a.className, color = _a.color, percent = _a.percent;
@@ -1080,10 +1381,10 @@ var Component$2A = function (_a) {
         var _a;
         return (_a = {}, _a["".concat(BAR_LOADER_PREFIX, "-completed")] = "".concat(validateCompleted(percent), "%"), _a);
     }, [percent, validateCompleted]);
-    return (React.createElement("div", { className: CNM.get({ styles: styles$2r, cls: [className] }) },
-        React.createElement("div", { className: CNM.get({ styles: styles$2r, cls: ['bar-loader'] }), style: __assign(__assign({}, barColor), barCompleted) },
+    return (React.createElement("div", { className: CNM.get({ styles: styles$2v, cls: [className] }) },
+        React.createElement("div", { className: CNM.get({ styles: styles$2v, cls: ['bar-loader'] }), style: __assign(__assign({}, barColor), barCompleted) },
             React.createElement("div", { className: CNM.get({
-                    styles: styles$2r,
+                    styles: styles$2v,
                     cls: ['bar-loader__bar', percent !== undefined ? 'bar-loader__bar--completed' : 'bar-loader__bar--animated']
                 }) }))));
 };
@@ -1092,7 +1393,7 @@ var Component$2A = function (_a) {
  */
 var BarLoader = Component$2A;
 
-var styles$2q = {"breadcrumbComponent":"mg_breadcrumb_breadcrumbComponent_vlbg8","magneto-ui-bc":"mg_breadcrumb_magneto-ui-bc_vlbg8","magneto-ui-bc-active":"mg_breadcrumb_magneto-ui-bc-active_vlbg8","no-transform":"mg_breadcrumb_no-transform_vlbg8"};
+var styles$2u = {"breadcrumbComponent":"mg_breadcrumb_breadcrumbComponent_vlbg8","magneto-ui-bc":"mg_breadcrumb_magneto-ui-bc_vlbg8","magneto-ui-bc-active":"mg_breadcrumb_magneto-ui-bc-active_vlbg8","no-transform":"mg_breadcrumb_no-transform_vlbg8"};
 
 var Component$2z = function (_a) {
     var breadcrumbText = _a.breadcrumbText, breadcrumbCustomText = _a.breadcrumbCustomText, queryParams = _a.queryParams, _b = _a.haveRedirect, haveRedirect = _b === void 0 ? true : _b, _c = _a.detailTitle, detailTitle = _c === void 0 ? '' : _c, breadCrumbFromServer = _a.breadCrumbFromServer, urlFromServer = _a.urlFromServer;
@@ -1100,7 +1401,7 @@ var Component$2z = function (_a) {
     var breadcrumbSplitText = breadcrumbs === null || breadcrumbs === void 0 ? void 0 : breadcrumbs.split('/');
     var lastIndexBC = (breadcrumbSplitText === null || breadcrumbSplitText === void 0 ? void 0 : breadcrumbSplitText.length) - 1;
     var haveDetailTitle = detailTitle !== '';
-    var detailTileStyle = detailTitle ? styles$2q['no-transform'] : '';
+    var detailTileStyle = detailTitle ? styles$2u['no-transform'] : '';
     var regexBase4 = /[0-9a-f]{8} [0-9a-f]{4} [0-9a-f]{4} [0-9a-f]{4} [0-9a-f]{12}/g;
     // This removes the base64 from the vacancy breadcrumbs
     var title = breadcrumbSplitText[lastIndexBC].replace(/-/g, ' ').replace(regexBase4, '');
@@ -1112,9 +1413,9 @@ var Component$2z = function (_a) {
                         "/ ",
                         href)));
             }),
-            React.createElement("p", { className: "".concat(styles$2q['magneto-ui-bc-active'], " ").concat(detailTileStyle) },
+            React.createElement("p", { className: "".concat(styles$2u['magneto-ui-bc-active'], " ").concat(detailTileStyle) },
                 "/ ",
-                haveDetailTitle ? detailTitle : title))) : (React.createElement(React.Fragment, null, breadcrumbSplitText.map(function (bc, i) { return (React.createElement("p", { className: "".concat(lastIndexBC == i ? styles$2q['magneto-ui-bc-active'] : '', " ").concat(styles$2q['magneto-ui-bc']), key: i },
+                haveDetailTitle ? detailTitle : title))) : (React.createElement(React.Fragment, null, breadcrumbSplitText.map(function (bc, i) { return (React.createElement("p", { className: "".concat(lastIndexBC == i ? styles$2u['magneto-ui-bc-active'] : '', " ").concat(styles$2u['magneto-ui-bc']), key: i },
             i > 0 && '/',
             " ",
             bc)); })));
@@ -1130,28 +1431,28 @@ var Component$2z = function (_a) {
         queryParams,
         lastIndexBC
     ]);
-    return React.createElement("div", { className: styles$2q.breadcrumbComponent }, breadCrumbsRender);
+    return React.createElement("div", { className: styles$2u.breadcrumbComponent }, breadCrumbsRender);
 };
 /**
  * Atom UI of breadcrumb
  */
 var Breadcrumb = Component$2z;
 
-var styles$2p = {"magneto-ui-button":"mg_button_magneto-ui-button_2zrcl","magneto-ui-button__mobile-text":"mg_button_magneto-ui-button_mobile-text_2zrcl","magneto-ui-button__icon":"mg_button_magneto-ui-button_icon_2zrcl","hover-effect":"mg_button_hover-effect_2zrcl"};
+var styles$2t = {"magneto-ui-button":"mg_button_magneto-ui-button_2zrcl","magneto-ui-button__mobile-text":"mg_button_magneto-ui-button_mobile-text_2zrcl","magneto-ui-button__icon":"mg_button_magneto-ui-button_icon_2zrcl","hover-effect":"mg_button_hover-effect_2zrcl"};
 
 var Component$2y = function (_a) {
     var buttonText = _a.buttonText, buttonTitle = _a.buttonTitle, addHover = _a.addHover, onClick = _a.onClick, suffixIcon = _a.suffixIcon, prefixIcon = _a.prefixIcon, className = _a.className, _b = _a.iconSize, iconSize = _b === void 0 ? 20 : _b;
-    return (React.createElement("button", { className: "".concat(className, " ").concat(styles$2p['magneto-ui-button'], " ").concat(addHover ? styles$2p['hover-effect'] : '', " "), type: "button", onClick: onClick, title: buttonTitle },
-        typeof suffixIcon === 'string' ? (React.createElement(IconItem, { size: iconSize, icon: suffixIcon, hover: addHover, className: styles$2p['magneto-ui-button__icon'] })) : (suffixIcon),
-        buttonText && React.createElement("p", { className: styles$2p['magneto-ui-button__mobile-text'] }, buttonText),
-        typeof prefixIcon === 'string' ? (React.createElement(IconItem, { size: iconSize, icon: prefixIcon, hover: addHover, className: styles$2p['magneto-ui-button__icon'] })) : (prefixIcon)));
+    return (React.createElement("button", { className: "".concat(className, " ").concat(styles$2t['magneto-ui-button'], " ").concat(addHover ? styles$2t['hover-effect'] : '', " "), type: "button", onClick: onClick, title: buttonTitle },
+        typeof suffixIcon === 'string' ? (React.createElement(IconItem, { size: iconSize, icon: suffixIcon, hover: addHover, className: styles$2t['magneto-ui-button__icon'] })) : (suffixIcon),
+        buttonText && React.createElement("p", { className: styles$2t['magneto-ui-button__mobile-text'] }, buttonText),
+        typeof prefixIcon === 'string' ? (React.createElement(IconItem, { size: iconSize, icon: prefixIcon, hover: addHover, className: styles$2t['magneto-ui-button__icon'] })) : (prefixIcon)));
 };
 /**
  * UI Atom Component of Save Button
  */
 var Button = Component$2y;
 
-var styles$2o = {"button-link":"mg_button_link_button-link_1iyy1","button-link__text":"mg_button_link_button-link_text_1iyy1"};
+var styles$2s = {"button-link":"mg_button_link_button-link_1iyy1","button-link__text":"mg_button_link_button-link_text_1iyy1"};
 
 var Component$2x = 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;
@@ -1161,17 +1462,17 @@ var Component$2x = function (_a) {
             onClick();
         }
     }, [onClick]);
-    return (React.createElement("a", { className: "".concat(className ? className : styles$2o['button-link']), type: "button", onClick: handleClick, href: href, rel: rel, target: target },
-        suffixIcon && (React.createElement(IconItem, { size: iconSize, icon: suffixIcon, hover: true, className: styles$2o['button-link__icon'] })),
-        buttonText && React.createElement("p", { className: styles$2o['button-link__text'] }, buttonText),
-        prefixIcon && (React.createElement(IconItem, { size: iconSize, icon: prefixIcon, hover: true, className: styles$2o['button-link__icon'] }))));
+    return (React.createElement("a", { className: "".concat(className ? className : styles$2s['button-link']), type: "button", onClick: handleClick, href: href, rel: rel, target: target },
+        suffixIcon && (React.createElement(IconItem, { size: iconSize, icon: suffixIcon, hover: true, className: styles$2s['button-link__icon'] })),
+        buttonText && React.createElement("p", { className: styles$2s['button-link__text'] }, buttonText),
+        prefixIcon && (React.createElement(IconItem, { size: iconSize, icon: prefixIcon, hover: true, className: styles$2s['button-link__icon'] }))));
 };
 /**
  * UI Atom Component of Save Button
  */
 var ButtonLink = Component$2x;
 
-var styles$2n = {"magneto-ui-comparative-counter":"mg_comparative_counter_magneto-ui-comparative-counter_1ue4r","error-label":"mg_comparative_counter_error-label_1ue4r"};
+var styles$2r = {"magneto-ui-comparative-counter":"mg_comparative_counter_magneto-ui-comparative-counter_1ue4r","error-label":"mg_comparative_counter_error-label_1ue4r"};
 
 var nf = new Intl.NumberFormat('de-DE');
 var Component$2w = function (_a) {
@@ -1179,7 +1480,7 @@ var Component$2w = function (_a) {
     var currentHigherMax = useMemo(function () {
         return current > max;
     }, [current, max]);
-    return (React.createElement("p", { style: { textAlign: position }, className: "".concat(styles$2n["".concat(classMUI, "-comparative-counter")], " ").concat(currentHigherMax ? styles$2n['error-label'] : '') },
+    return (React.createElement("p", { style: { textAlign: position }, className: "".concat(styles$2r["".concat(classMUI, "-comparative-counter")], " ").concat(currentHigherMax ? styles$2r['error-label'] : '') },
         nf.format(current),
         React.createElement("span", null,
             " / ",
@@ -1187,18 +1488,18 @@ var Component$2w = function (_a) {
 };
 var ComparativeCounter = Component$2w;
 
-var styles$2m = {"checkbox":"mg_checkbox_checkbox_1w9e7","checkbox--inline":"mg_checkbox_checkbox--inline_1w9e7","checkbox--block":"mg_checkbox_checkbox--block_1w9e7","checkbox--background":"mg_checkbox_checkbox--background_1w9e7","checkbox--checked":"mg_checkbox_checkbox--checked_1w9e7","custom-checked":"mg_checkbox_custom-checked_1w9e7","checkbox__box":"mg_checkbox_checkbox_box_1w9e7","checkbox__box--checked":"mg_checkbox_checkbox_box--checked_1w9e7"};
+var styles$2q = {"checkbox":"mg_checkbox_checkbox_1w9e7","checkbox--inline":"mg_checkbox_checkbox--inline_1w9e7","checkbox--block":"mg_checkbox_checkbox--block_1w9e7","checkbox--background":"mg_checkbox_checkbox--background_1w9e7","checkbox--checked":"mg_checkbox_checkbox--checked_1w9e7","custom-checked":"mg_checkbox_custom-checked_1w9e7","checkbox__box":"mg_checkbox_checkbox_box_1w9e7","checkbox__box--checked":"mg_checkbox_checkbox_box--checked_1w9e7"};
 
-var cx$O = classNames.bind(styles$2m);
+var cx$T = classNames.bind(styles$2q);
 var defaultCheck = function (_a) {
     var type = _a.type, checked = _a.checked;
     if (type === 'background')
         return;
-    return (React.createElement("div", { "aria-checked": checked, role: "checkbox", className: cx$O('checkbox__box', { 'checkbox__box--checked': checked }) }, checked ? React.createElement(React.Fragment, null, "\u2713") : null));
+    return (React.createElement("div", { "aria-checked": checked, role: "checkbox", className: cx$T('checkbox__box', { 'checkbox__box--checked': checked }) }, checked ? React.createElement(React.Fragment, null, "\u2713") : null));
 };
 var Component$2v = function (_a) {
     var id = _a.id, checked = _a.checked, _b = _a.onChange, onChange = _b === void 0 ? stubTrue : _b, children = _a.children, _c = _a.type, type = _c === void 0 ? 'box' : _c, className = _a.className, _d = _a.display, display = _d === void 0 ? 'inline' : _d, _e = _a.renderCheck, renderCheck = _e === void 0 ? defaultCheck : _e, rest = __rest(_a, ["id", "checked", "onChange", "children", "type", "className", "display", "renderCheck"]);
-    return (React.createElement("label", { className: cx$O('checkbox', "checkbox--".concat(display), className, {
+    return (React.createElement("label", { className: cx$T('checkbox', "checkbox--".concat(display), className, {
             'checkbox--checked': checked,
             'checkbox--background': type === 'background'
         }), "data-name": "checkbox-container", htmlFor: id },
@@ -1211,23 +1512,23 @@ var Component$2v = function (_a) {
 };
 var Checkbox = Component$2v;
 
-var styles$2l = {"magneto-ui--date-dropdown__icon":"mg_date_dropdown_magneto-ui--date-dropdown_icon_1xs1p","magneto-ui--date-dropdown__wrapper":"mg_date_dropdown_magneto-ui--date-dropdown_wrapper_1xs1p","magneto-ui--date-dropdown__select":"mg_date_dropdown_magneto-ui--date-dropdown_select_1xs1p","magneto-ui--date-dropdown__option":"mg_date_dropdown_magneto-ui--date-dropdown_option_1xs1p"};
+var styles$2p = {"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$2u = function (_a) {
     var placeholderLabel = _a.placeholderLabel, dateOptions = _a.dateOptions, _b = _a.selectedOption, selectedOption = _b === void 0 ? '' : _b, onOptionChanged = _a.onOptionChanged, _c = _a.disabled, disabled = _c === void 0 ? false : _c;
     var disabledArrow = useMemo(function () {
         if (disabled)
-            return (React.createElement(IconItem, { className: styles$2l['magneto-ui--date-dropdown__icon'], icon: ArrowDown2, alt: "arrow-icon", size: 24 }));
+            return (React.createElement(IconItem, { className: styles$2p['magneto-ui--date-dropdown__icon'], icon: ArrowDown2, alt: "arrow-icon", size: 24 }));
         return React.createElement(IconItem, { icon: ArrowDown3, alt: "arrow-icon", size: 24 });
     }, [disabled]);
-    return (React.createElement("div", { className: styles$2l['magneto-ui--date-dropdown__wrapper'] },
-        React.createElement("select", { className: styles$2l["magneto-ui--date-dropdown__select"], value: selectedOption, onChange: onOptionChanged, disabled: disabled },
-            React.createElement("option", { className: styles$2l['magneto-ui--date-dropdown__option'], value: "", disabled: true, hidden: true }, placeholderLabel), dateOptions === null || dateOptions === void 0 ? void 0 :
+    return (React.createElement("div", { className: styles$2p['magneto-ui--date-dropdown__wrapper'] },
+        React.createElement("select", { className: styles$2p["magneto-ui--date-dropdown__select"], value: selectedOption, onChange: onOptionChanged, disabled: disabled },
+            React.createElement("option", { className: styles$2p['magneto-ui--date-dropdown__option'], value: "", disabled: true, hidden: true }, placeholderLabel), dateOptions === null || dateOptions === void 0 ? void 0 :
             dateOptions.map(function (_a) {
                 var optionValue = _a.optionValue, optionLabel = _a.optionLabel;
-                return (React.createElement("option", { className: styles$2l['magneto-ui--date-dropdown__option'], key: optionValue, value: optionValue }, optionLabel));
+                return (React.createElement("option", { className: styles$2p['magneto-ui--date-dropdown__option'], key: optionValue, value: optionValue }, optionLabel));
             })),
-        React.createElement("span", { className: styles$2l['magneto-ui--date-dropdown__icon'] }, disabledArrow)));
+        React.createElement("span", { className: styles$2p['magneto-ui--date-dropdown__icon'] }, disabledArrow)));
 };
 var DateDropdown = Component$2u;
 
@@ -1284,7 +1585,7 @@ var fixArrayDate = function (array) {
     return dateArray.setArray(array).fixMonth().getArray();
 };
 
-var styles$2k = {"date-input":"mg_date_input_date-input_1o5wy","date-input__input":"mg_date_input_date-input_input_1o5wy","date-input__separator":"mg_date_input_date-input_separator_1o5wy","date-input__separator--filled":"mg_date_input_date-input_separator--filled_1o5wy","date-input--fit":"mg_date_input_date-input--fit_1o5wy","date-input--error":"mg_date_input_date-input--error_1o5wy","date-input__left":"mg_date_input_date-input_left_1o5wy","date-input__right":"mg_date_input_date-input_right_1o5wy"};
+var styles$2o = {"date-input":"mg_date_input_date-input_1o5wy","date-input__input":"mg_date_input_date-input_input_1o5wy","date-input__separator":"mg_date_input_date-input_separator_1o5wy","date-input__separator--filled":"mg_date_input_date-input_separator--filled_1o5wy","date-input--fit":"mg_date_input_date-input--fit_1o5wy","date-input--error":"mg_date_input_date-input--error_1o5wy","date-input__left":"mg_date_input_date-input_left_1o5wy","date-input__right":"mg_date_input_date-input_right_1o5wy"};
 
 // placeholder to every input.
 var placeholder = ['D', 'D', 'M', 'M', 'A', 'A', 'A', 'A'];
@@ -1395,21 +1696,21 @@ var Component$2t = function (_a) {
         }
     }, []);
     return (React.createElement("div", { className: [
-            styles$2k['date-input'],
+            styles$2o['date-input'],
             className,
-            fit ? styles$2k['date-input--fit'] : '',
-            hasError ? styles$2k['date-input--error'] : ''
+            fit ? styles$2o['date-input--fit'] : '',
+            hasError ? styles$2o['date-input--error'] : ''
         ].join(' ') },
-        React.createElement("div", { className: styles$2k['date-input__left'], onClick: function () {
+        React.createElement("div", { className: styles$2o['date-input__left'], onClick: function () {
                 var _a;
                 (_a = inputsRef.current[0]) === null || _a === void 0 ? void 0 : _a.focus();
             } }),
         internalValues.map(function (value, index) { return (React.createElement(React.Fragment, { key: index },
             [2, 4].includes(index) ? (
             // include / separator in date (DD / MM / YYYY)
-            React.createElement("span", { className: [styles$2k['date-input__separator'], value ? styles$2k['date-input__separator--filled'] : ''].join(' ') }, "/")) : null,
-            React.createElement("input", { className: styles$2k['date-input__input'], style: { width: width }, type: "text", maxLength: 1, value: value, placeholder: placeholder[index], onChange: function (e) { return handleChange(index, e.target.value); }, onKeyDown: function (e) { return handleKeyDown(index, e.key); }, onPaste: function (e) { return handlePaste(index, e); }, ref: function (el) { return (inputsRef.current[index] = el); }, inputMode: "numeric" }))); }),
-        React.createElement("div", { className: styles$2k['date-input__right'], onClick: function () {
+            React.createElement("span", { className: [styles$2o['date-input__separator'], value ? styles$2o['date-input__separator--filled'] : ''].join(' ') }, "/")) : null,
+            React.createElement("input", { className: styles$2o['date-input__input'], style: { width: width }, type: "text", maxLength: 1, value: value, placeholder: placeholder[index], onChange: function (e) { return handleChange(index, e.target.value); }, onKeyDown: function (e) { return handleKeyDown(index, e.key); }, onPaste: function (e) { return handlePaste(index, e); }, ref: function (el) { return (inputsRef.current[index] = el); }, inputMode: "numeric" }))); }),
+        React.createElement("div", { className: styles$2o['date-input__right'], onClick: function () {
                 var _a;
                 (_a = inputsRef.current[inputsRef.current.length - 1]) === null || _a === void 0 ? void 0 : _a.focus();
             } })));
@@ -1430,15 +1731,15 @@ var Component$2s = function (_a) {
  */
 var Divider = Component$2s;
 
-var styles$2j = {"dots-loader":"mg_dots_loader_dots-loader_zwly0","dots-loader__dot":"mg_dots_loader_dots-loader_dot_zwly0","bounce":"mg_dots_loader_bounce_zwly0"};
+var styles$2n = {"dots-loader":"mg_dots_loader_dots-loader_zwly0","dots-loader__dot":"mg_dots_loader_dots-loader_dot_zwly0","bounce":"mg_dots_loader_bounce_zwly0"};
 
 var Component$2r = function (_a) {
     var _b = _a.count, count = _b === void 0 ? 3 : _b, _c = _a.color, color = _c === void 0 ? '#000' : _c;
-    return (React.createElement("div", { className: styles$2j['dots-loader'] }, Array.from({ length: count }).map(function (_, index) { return (React.createElement("span", { key: index, className: styles$2j['dots-loader__dot'], style: { animationDelay: "".concat(index * 0.2, "s"), backgroundColor: color } })); })));
+    return (React.createElement("div", { className: styles$2n['dots-loader'] }, Array.from({ length: count }).map(function (_, index) { return (React.createElement("span", { key: index, className: styles$2n['dots-loader__dot'], style: { animationDelay: "".concat(index * 0.2, "s"), backgroundColor: color } })); })));
 };
 var DotsLoader = Component$2r;
 
-var styles$2i = {"magneto-ui-flat-loader":"mg_flat_loader_magneto-ui-flat-loader_q96bq","rotation":"mg_flat_loader_rotation_q96bq"};
+var styles$2m = {"magneto-ui-flat-loader":"mg_flat_loader_magneto-ui-flat-loader_q96bq","rotation":"mg_flat_loader_rotation_q96bq"};
 
 var Component$2q = function (_a) {
     var color = _a.color, size = _a.size, secondColor = _a.secondColor;
@@ -1454,33 +1755,33 @@ var Component$2q = function (_a) {
             height: '15px'
         };
     }, [size]);
-    return (React.createElement("div", { style: __assign(__assign({}, loadingSize), { border: "2px solid ".concat(color || '#090467'), borderBottomColor: secondColor || 'white' }), className: styles$2i["".concat(classMUI, "-flat-loader")] }));
+    return (React.createElement("div", { style: __assign(__assign({}, loadingSize), { border: "2px solid ".concat(color || '#090467'), borderBottomColor: secondColor || 'white' }), className: styles$2m["".concat(classMUI, "-flat-loader")] }));
 };
 var FlatLoader = Component$2q;
 
-var styles$2h = {"headerTabComponent":"mg_header_tab_headerTabComponent_1mp3q","headerTabComponent__count":"mg_header_tab_headerTabComponent_count_1mp3q","headerTabComponent__text":"mg_header_tab_headerTabComponent_text_1mp3q"};
+var styles$2l = {"headerTabComponent":"mg_header_tab_headerTabComponent_1mp3q","headerTabComponent__count":"mg_header_tab_headerTabComponent_count_1mp3q","headerTabComponent__text":"mg_header_tab_headerTabComponent_text_1mp3q"};
 
 var Component$2p = function (_a) {
     var tabType = _a.tabType, tabText = _a.tabText, url = _a.url, isActive = _a.isActive, _b = _a.count, count = _b === void 0 ? 0 : _b;
     var TabLink = tabType === 'tabOption' ? url : '';
-    return (React.createElement(React.Fragment, null, tabType === 'tabTitle' ? (React.createElement("div", { className: styles$2h.headerTabComponent, "data-tab-type": "tabTitle" },
-        count > 0 && React.createElement(Badge, { number: count, className: styles$2h['headerTabComponent__count'] }),
-        React.createElement("p", { className: styles$2h['headerTabComponent__text'] }, tabText))) : (React.createElement("a", { className: styles$2h.headerTabComponent, href: TabLink, "data-tab-type": "tabOption", "data-is-active": isActive },
-        count > 0 && React.createElement(Badge, { number: count, className: styles$2h['headerTabComponent__count'] }),
-        React.createElement("p", { className: styles$2h['headerTabComponent__text'] }, tabText)))));
+    return (React.createElement(React.Fragment, null, tabType === 'tabTitle' ? (React.createElement("div", { className: styles$2l.headerTabComponent, "data-tab-type": "tabTitle" },
+        count > 0 && React.createElement(Badge, { number: count, className: styles$2l['headerTabComponent__count'] }),
+        React.createElement("p", { className: styles$2l['headerTabComponent__text'] }, tabText))) : (React.createElement("a", { className: styles$2l.headerTabComponent, href: TabLink, "data-tab-type": "tabOption", "data-is-active": isActive },
+        count > 0 && React.createElement(Badge, { number: count, className: styles$2l['headerTabComponent__count'] }),
+        React.createElement("p", { className: styles$2l['headerTabComponent__text'] }, tabText)))));
 };
 /**
  * UI Atom component for HeaderTab
  */
 var HeaderTab = Component$2p;
 
-var styles$2g = {"magneto-ui-play-button":"mg_image_magneto-ui-play-button_7q9yc"};
+var styles$2k = {"magneto-ui-play-button":"mg_image_magneto-ui-play-button_7q9yc"};
 
 var Image = function (_a) {
     var image = _a.image, alt = _a.alt, playIcon = _a.playIcon, className = _a.className;
     return (React.createElement(React.Fragment, null,
         React.createElement("img", { src: image, alt: alt, loading: "lazy", className: className }),
-        playIcon && React.createElement("div", { className: styles$2g['magneto-ui-play-button'] }, playIcon)));
+        playIcon && React.createElement("div", { className: styles$2k['magneto-ui-play-button'] }, playIcon)));
 };
 
 var style$$ = {"magneto-ui-container":"mg_input_search_magneto-ui-container_171v5","magneto-ui-container__input-search":"mg_input_search_magneto-ui-container_input-search_171v5","magneto-ui-container__input-search--btn":"mg_input_search_magneto-ui-container_input-search--btn_171v5","magneto-ui-container__input-search--icon":"mg_input_search_magneto-ui-container_input-search--icon_171v5"};
@@ -1500,22 +1801,22 @@ var InputSearch = function (_a) {
             React.createElement(IconItem, { icon: Close, alt: "search-icon" }))) : (hasASearchFunction)));
 };
 
-var styles$2f = {"magneto-ui-job-company-logo":"mg_job_company_logo_magneto-ui-job-company-logo_roy42"};
+var styles$2j = {"magneto-ui-job-company-logo":"mg_job_company_logo_magneto-ui-job-company-logo_roy42"};
 
 var Component$2o = function (_a) {
     var offerCompanyLogo = _a.offerCompanyLogo;
     if (typeof offerCompanyLogo === 'string' || !offerCompanyLogo) {
-        return (React.createElement("div", { className: styles$2f['magneto-ui-job-company-logo'] },
+        return (React.createElement("div", { className: styles$2j['magneto-ui-job-company-logo'] },
             React.createElement("img", { src: offerCompanyLogo ? offerCompanyLogo : NoLogo, loading: "lazy", width: '100px', height: '100px' })));
     }
-    return React.createElement("div", { className: styles$2f['magneto-ui-job-company-logo'] }, offerCompanyLogo);
+    return React.createElement("div", { className: styles$2j['magneto-ui-job-company-logo'] }, offerCompanyLogo);
 };
 /**
  * UI Atom component of Company Logo
  */
 var JobCompanyLogo = Component$2o;
 
-var styles$2e = {"magneto-ui-job-header":"mg_job_header_magneto-ui-job-header_vn7ok","magneto-ui-job-header__title":"mg_job_header_magneto-ui-job-header_title_vn7ok","magneto-ui-job-header__subtitle":"mg_job_header_magneto-ui-job-header_subtitle_vn7ok","magneto-ui-job-header__link":"mg_job_header_magneto-ui-job-header_link_vn7ok"};
+var styles$2i = {"magneto-ui-job-header":"mg_job_header_magneto-ui-job-header_vn7ok","magneto-ui-job-header__title":"mg_job_header_magneto-ui-job-header_title_vn7ok","magneto-ui-job-header__subtitle":"mg_job_header_magneto-ui-job-header_subtitle_vn7ok","magneto-ui-job-header__link":"mg_job_header_magneto-ui-job-header_link_vn7ok"};
 
 var Component$2n = function (_a) {
     var title = _a.title, styles = _a.styles;
@@ -1541,16 +1842,16 @@ var Component$2l = function (_a) {
         if (isHidden || !offerCompanyName)
             return React.createElement(Fragment, null);
         if (offerCompanyLink) {
-            return (React.createElement("a", { className: styles$2e['magneto-ui-job-header__link'], href: offerCompanyLink, title: offerCompanyName }, offerCompanyName));
+            return (React.createElement("a", { className: styles$2i['magneto-ui-job-header__link'], href: offerCompanyLink, title: offerCompanyName }, offerCompanyName));
         }
-        return React.createElement("h2", { className: styles$2e['magneto-ui-job-header__subtitle'] }, offerCompanyName);
+        return React.createElement("h2", { className: styles$2i['magneto-ui-job-header__subtitle'] }, offerCompanyName);
     }, [isHidden, offerCompanyLink, offerCompanyName]);
     var GenerateTitle = function () {
         if (typeTitle === TYPE_TITLE.SUB_TITLE)
-            return React.createElement(SubTitleJobDetails, { styles: styles$2e['magneto-ui-job-header__title'], title: String(offerTitle) });
-        return React.createElement(MainTitleJobDetails, { styles: styles$2e['magneto-ui-job-header__title'], title: String(offerTitle) });
+            return React.createElement(SubTitleJobDetails, { styles: styles$2i['magneto-ui-job-header__title'], title: String(offerTitle) });
+        return React.createElement(MainTitleJobDetails, { styles: styles$2i['magneto-ui-job-header__title'], title: String(offerTitle) });
     };
-    return (React.createElement("div", { className: styles$2e['magneto-ui-job-header'] },
+    return (React.createElement("div", { className: styles$2i['magneto-ui-job-header'] },
         GenerateTitle(),
         showCompanyName));
 };
@@ -1559,7 +1860,7 @@ var Component$2l = function (_a) {
  */
 var JobHeader = Component$2l;
 
-var styles$2d = {"linkComponent":"mg_link_linkComponent_1sftl"};
+var styles$2h = {"linkComponent":"mg_link_linkComponent_1sftl"};
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 var toCSSVariables = function (input) {
@@ -1578,7 +1879,7 @@ var toCSSVariables = function (input) {
 var Component$2k = function (_a) {
     var type = _a.type, href = _a.href, text = _a.text, title = _a.title, iconProps = _a.iconProps, linkStyles = _a.linkStyles, isMobile = _a.isMobile, rel = _a.rel, target = _a.target;
     var stylesValue = useMemo(function () { return toCSSVariables(linkStyles); }, [linkStyles]);
-    return (React.createElement("a", { className: styles$2d.linkComponent, style: stylesValue, href: href, title: title ? title : text, "data-link-type": type, "data-is-mobile": isMobile, rel: rel, target: target },
+    return (React.createElement("a", { className: styles$2h.linkComponent, style: stylesValue, href: href, title: title ? title : text, "data-link-type": type, "data-is-mobile": isMobile, rel: rel, target: target },
         iconProps && React.createElement(IconItem, __assign({}, iconProps)),
         !isMobile && React.createElement("p", null, text)));
 };
@@ -1587,11 +1888,11 @@ var Component$2k = function (_a) {
  */
 var Link = Component$2k;
 
-var styles$2c = {"loadingComponent":"mg_loading_loadingComponent_qi83n","animate":"mg_loading_animate_qi83n"};
+var styles$2g = {"loadingComponent":"mg_loading_loadingComponent_qi83n","animate":"mg_loading_animate_qi83n"};
 
 var Component$2j = function (_a) {
     var loadingIcon = _a.loadingIcon;
-    return (React.createElement("div", { className: styles$2c.loadingComponent },
+    return (React.createElement("div", { className: styles$2g.loadingComponent },
         React.createElement(IconItem, __assign({}, loadingIcon))));
 };
 /**
@@ -1615,7 +1916,7 @@ var Component$2i = function (_a) {
 };
 var LogoComponent = Component$2i;
 
-var styles$2b = {"MainButtonComponent":"mg_main_button_MainButtonComponent_lh5z0","disabled":"mg_main_button_disabled_lh5z0"};
+var styles$2f = {"MainButtonComponent":"mg_main_button_MainButtonComponent_lh5z0","disabled":"mg_main_button_disabled_lh5z0"};
 
 var Component$2h = function (_a) {
     var buttonType = _a.buttonType, buttonSize = _a.buttonSize, buttonText = _a.buttonText, buttonStyles = _a.buttonStyles, loadingState = _a.loadingState, iconProps = _a.iconProps, isMobile = _a.isMobile, className = _a.className, _b = _a.title, title = _b === void 0 ? '' : _b, disabled = _a.disabled, onClick = _a.onClick;
@@ -1630,21 +1931,21 @@ var Component$2h = function (_a) {
             iconProps && React.createElement(IconItem, __assign({}, iconProps)),
             !isMobile && React.createElement("p", null, buttonText)));
     };
-    return (React.createElement("button", { className: "".concat(styles$2b.MainButtonComponent, " ").concat(className, " ").concat(disabled ? styles$2b.disabled : ''), type: buttonType, style: stylesValue, onClick: onClick, "data-button-size": buttonSize, "data-is-mobile": isMobile, title: title ? title : buttonText, disabled: disabled }, renderContent()));
+    return (React.createElement("button", { className: "".concat(styles$2f.MainButtonComponent, " ").concat(className, " ").concat(disabled ? styles$2f.disabled : ''), type: buttonType, style: stylesValue, onClick: onClick, "data-button-size": buttonSize, "data-is-mobile": isMobile, title: title ? title : buttonText, disabled: disabled }, renderContent()));
 };
 /**
  * Atom UI component of button for general purpose
  */
 var MainButton = Component$2h;
 
-var styles$2a = {"magneto-ui-mega-menu-tab":"mg_mega_menu_tab_magneto-ui-mega-menu-tab_f61nm","magneto-ui-mega-menu-tab__icon":"mg_mega_menu_tab_magneto-ui-mega-menu-tab_icon_f61nm","magneto-ui-mega-menu-tab__selected":"mg_mega_menu_tab_magneto-ui-mega-menu-tab_selected_f61nm","magneto-ui-mega-menu-tab__label":"mg_mega_menu_tab_magneto-ui-mega-menu-tab_label_f61nm","magneto-ui-mega-menu-tab__label-selected":"mg_mega_menu_tab_magneto-ui-mega-menu-tab_label-selected_f61nm"};
+var styles$2e = {"magneto-ui-mega-menu-tab":"mg_mega_menu_tab_magneto-ui-mega-menu-tab_f61nm","magneto-ui-mega-menu-tab__icon":"mg_mega_menu_tab_magneto-ui-mega-menu-tab_icon_f61nm","magneto-ui-mega-menu-tab__selected":"mg_mega_menu_tab_magneto-ui-mega-menu-tab_selected_f61nm","magneto-ui-mega-menu-tab__label":"mg_mega_menu_tab_magneto-ui-mega-menu-tab_label_f61nm","magneto-ui-mega-menu-tab__label-selected":"mg_mega_menu_tab_magneto-ui-mega-menu-tab_label-selected_f61nm"};
 
-var styles$29 = {"magneto-ui--search-item":"mg_search_item_magneto-ui--search-item_15w47","magneto-ui--search-item__text":"mg_search_item_magneto-ui--search-item_text_15w47"};
+var styles$2d = {"magneto-ui--search-item":"mg_search_item_magneto-ui--search-item_15w47","magneto-ui--search-item__text":"mg_search_item_magneto-ui--search-item_text_15w47"};
 
 var Component$2g = function (_a) {
     var tag = _a.tag, url = _a.url, className = _a.className, _b = _a.icon, icon = _b === void 0 ? ArrowRight2 : _b;
-    return (React.createElement("a", { title: tag, className: "".concat(className ? className : styles$29['magneto-ui--search-item']), href: url },
-        React.createElement("p", { className: styles$29['magneto-ui--search-item__text'] }, tag),
+    return (React.createElement("a", { title: tag, className: "".concat(className ? className : styles$2d['magneto-ui--search-item']), href: url },
+        React.createElement("p", { className: styles$2d['magneto-ui--search-item__text'] }, tag),
         React.createElement(IconItem, { alt: "arrow icon", hover: false, icon: icon, size: 14 })));
 };
 /**
@@ -1659,21 +1960,21 @@ var MegaMenuTab = function (_a) {
             return '';
         return ArrowDown2;
     }, [selected, showArrow]);
-    return (React.createElement("div", { className: "".concat(styles$2a["".concat(classMUI, "-mega-menu-tab")], " ").concat(selected ? styles$2a["".concat(classMUI, "-mega-menu-tab__selected")] : '') },
-        React.createElement(SearchItem, { tag: label, url: url, icon: icon, className: "".concat(styles$2a["".concat(classMUI, "-mega-menu-tab__label")], " ").concat(selected ? styles$2a["".concat(classMUI, "-mega-menu-tab__label-selected")] : '') })));
+    return (React.createElement("div", { className: "".concat(styles$2e["".concat(classMUI, "-mega-menu-tab")], " ").concat(selected ? styles$2e["".concat(classMUI, "-mega-menu-tab__selected")] : '') },
+        React.createElement(SearchItem, { tag: label, url: url, icon: icon, className: "".concat(styles$2e["".concat(classMUI, "-mega-menu-tab__label")], " ").concat(selected ? styles$2e["".concat(classMUI, "-mega-menu-tab__label-selected")] : '') })));
 };
 
-var styles$28 = {"magneto-ui-menu-dropdown-list":"mg_menu_dropdown_list_magneto-ui-menu-dropdown-list_18usg","magneto-ui-menu-dropdown-list--visible":"mg_menu_dropdown_list_magneto-ui-menu-dropdown-list--visible_18usg","magneto-ui-menu-dropdown-list__container":"mg_menu_dropdown_list_magneto-ui-menu-dropdown-list_container_18usg","magneto-ui-menu-dropdown-list__container--visible":"mg_menu_dropdown_list_magneto-ui-menu-dropdown-list_container--visible_18usg","magneto-ui-menu-dropdown-list__children":"mg_menu_dropdown_list_magneto-ui-menu-dropdown-list_children_18usg","magneto-ui-menu-dropdown-list__children--visible":"mg_menu_dropdown_list_magneto-ui-menu-dropdown-list_children--visible_18usg"};
+var styles$2c = {"magneto-ui-menu-dropdown-list":"mg_menu_dropdown_list_magneto-ui-menu-dropdown-list_18usg","magneto-ui-menu-dropdown-list--visible":"mg_menu_dropdown_list_magneto-ui-menu-dropdown-list--visible_18usg","magneto-ui-menu-dropdown-list__container":"mg_menu_dropdown_list_magneto-ui-menu-dropdown-list_container_18usg","magneto-ui-menu-dropdown-list__container--visible":"mg_menu_dropdown_list_magneto-ui-menu-dropdown-list_container--visible_18usg","magneto-ui-menu-dropdown-list__children":"mg_menu_dropdown_list_magneto-ui-menu-dropdown-list_children_18usg","magneto-ui-menu-dropdown-list__children--visible":"mg_menu_dropdown_list_magneto-ui-menu-dropdown-list_children--visible_18usg"};
 
 var Component$2f = function (_a) {
     var children = _a.children, listClassName = _a.listClassName, opened = _a.opened;
-    return (React.createElement("div", { className: CNM.get({ styles: styles$28, cls: ['menu-dropdown-list', opened && 'menu-dropdown-list--visible'] }) },
+    return (React.createElement("div", { className: CNM.get({ styles: styles$2c, cls: ['menu-dropdown-list', opened && 'menu-dropdown-list--visible'] }) },
         React.createElement("div", { className: CNM.get({
-                styles: styles$28,
+                styles: styles$2c,
                 cls: ['menu-dropdown-list__container', opened && 'menu-dropdown-list__container--visible']
             }) },
             React.createElement("div", { className: CNM.get({
-                    styles: styles$28,
+                    styles: styles$2c,
                     cls: ['menu-dropdown-list__children', opened && 'menu-dropdown-list__children--visible', listClassName]
                 }) }, children))));
 };
@@ -1682,7 +1983,7 @@ var Component$2f = function (_a) {
  */
 var MenuDropdownList = Component$2f;
 
-var styles$27 = {"magneto-ui-menu-dropdown__content":"mg_menu_dropdown_magneto-ui-menu-dropdown_content_v03jf","magneto-ui-menu-dropdown__container":"mg_menu_dropdown_magneto-ui-menu-dropdown_container_v03jf","magneto-ui-menu-dropdown__title":"mg_menu_dropdown_magneto-ui-menu-dropdown_title_v03jf","magneto-ui-menu-dropdown__suffix":"mg_menu_dropdown_magneto-ui-menu-dropdown_suffix_v03jf","magneto-ui-menu-dropdown__suffix--visible":"mg_menu_dropdown_magneto-ui-menu-dropdown_suffix--visible_v03jf"};
+var styles$2b = {"magneto-ui-menu-dropdown__content":"mg_menu_dropdown_magneto-ui-menu-dropdown_content_v03jf","magneto-ui-menu-dropdown__container":"mg_menu_dropdown_magneto-ui-menu-dropdown_container_v03jf","magneto-ui-menu-dropdown__title":"mg_menu_dropdown_magneto-ui-menu-dropdown_title_v03jf","magneto-ui-menu-dropdown__suffix":"mg_menu_dropdown_magneto-ui-menu-dropdown_suffix_v03jf","magneto-ui-menu-dropdown__suffix--visible":"mg_menu_dropdown_magneto-ui-menu-dropdown_suffix--visible_v03jf"};
 
 var Component$2e = function (_a) {
     var children = _a.children, _b = _a.className, className = _b === void 0 ? '' : _b, _c = _a.listClassName, listClassName = _c === void 0 ? '' : _c, onClick = _a.onClick, opened = _a.opened, prefixIcon = _a.prefixIcon, _d = _a.suffixIcon, suffixIcon = _d === void 0 ? { icon: ArrowDownWhite } : _d, title = _a.title;
@@ -1699,13 +2000,13 @@ var Component$2e = function (_a) {
     var handleButtonClick = useCallback(function (e) {
         e.stopPropagation();
     }, []);
-    return (React.createElement("div", { className: CNM.get({ styles: styles$27, cls: ['menu-dropdown', className] }), onClick: toggleOptions },
-        React.createElement("div", { className: CNM.get({ styles: styles$27, cls: ['menu-dropdown__content'] }) },
-            React.createElement("div", { className: CNM.get({ styles: styles$27, cls: ['menu-dropdown__container'] }) },
+    return (React.createElement("div", { className: CNM.get({ styles: styles$2b, cls: ['menu-dropdown', className] }), onClick: toggleOptions },
+        React.createElement("div", { className: CNM.get({ styles: styles$2b, cls: ['menu-dropdown__content'] }) },
+            React.createElement("div", { className: CNM.get({ styles: styles$2b, cls: ['menu-dropdown__container'] }) },
                 prefixIcon && React.createElement(IconItem, __assign({ size: 18 }, prefixIcon)),
-                React.createElement("span", { className: CNM.get({ styles: styles$27, cls: ['menu-dropdown__title'] }) }, title),
+                React.createElement("span", { className: CNM.get({ styles: styles$2b, cls: ['menu-dropdown__title'] }) }, title),
                 React.createElement("div", { className: CNM.get({
-                        styles: styles$27,
+                        styles: styles$2b,
                         cls: ['menu-dropdown__suffix', localOpened && 'menu-dropdown__suffix--visible']
                     }) },
                     React.createElement(IconItem, __assign({ size: 18 }, suffixIcon)))),
@@ -1728,7 +2029,7 @@ var MenuItem = function (_a) {
             React.createElement("p", null, text))));
 };
 
-var styles$26 = {"container":"mg_multi_range_slider_container_y44v2","slider":"mg_multi_range_slider_slider_y44v2","track":"mg_multi_range_slider_track_y44v2","range":"mg_multi_range_slider_range_y44v2","values":"mg_multi_range_slider_values_y44v2","left_value":"mg_multi_range_slider_left_value_y44v2","right_value":"mg_multi_range_slider_right_value_y44v2","thumb":"mg_multi_range_slider_thumb_y44v2","zIndex_3":"mg_multi_range_slider_zIndex_3_y44v2","zIndex_4":"mg_multi_range_slider_zIndex_4_y44v2","zIndex_5":"mg_multi_range_slider_zIndex_5_y44v2"};
+var styles$2a = {"container":"mg_multi_range_slider_container_y44v2","slider":"mg_multi_range_slider_slider_y44v2","track":"mg_multi_range_slider_track_y44v2","range":"mg_multi_range_slider_range_y44v2","values":"mg_multi_range_slider_values_y44v2","left_value":"mg_multi_range_slider_left_value_y44v2","right_value":"mg_multi_range_slider_right_value_y44v2","thumb":"mg_multi_range_slider_thumb_y44v2","zIndex_3":"mg_multi_range_slider_zIndex_3_y44v2","zIndex_4":"mg_multi_range_slider_zIndex_4_y44v2","zIndex_5":"mg_multi_range_slider_zIndex_5_y44v2"};
 
 var MultiRangeSlider = function (_a) {
     var min = _a.min, max = _a.max, currentMin = _a.currentMin, currentMax = _a.currentMax, _b = _a.showValues, showValues = _b === void 0 ? true : _b, onChange = _a.onChange, currency = _a.currency, _c = _a.steps, steps = _c === void 0 ? 0 : _c, _d = _a.size, size = _d === void 0 ? 260 : _d, defaultMin = _a.defaultMin, defaultMax = _a.defaultMax;
@@ -1786,30 +2087,30 @@ var MultiRangeSlider = function (_a) {
     var handleMouseUpValues = useCallback(function () {
         onChange({ min: minVal, max: maxVal });
     }, [minVal, maxVal, onChange]);
-    return (React.createElement("div", { className: styles$26.container },
+    return (React.createElement("div", { className: styles$2a.container },
         React.createElement("input", { style: { width: size }, type: "range", min: min, max: max, step: steps, value: minVal, ref: minValRef, onMouseUp: handleMouseUpValues, onChange: function (event) {
                 var value = Math.min(+event.target.value, maxVal - 1);
                 setMinVal(value);
                 event.target.value = value.toString();
-            }, className: "\n          ".concat(styles$26.thumb, " \n          ").concat(styles$26.zIndex_3, "  \n          ").concat(minVal > max - 100 ? styles$26.zIndex_5 : '', "\n        ") }),
+            }, className: "\n          ".concat(styles$2a.thumb, " \n          ").concat(styles$2a.zIndex_3, "  \n          ").concat(minVal > max - 100 ? styles$2a.zIndex_5 : '', "\n        ") }),
         React.createElement("input", { type: "range", style: { width: size }, min: min, max: max, step: steps, value: maxVal, ref: maxValRef, onMouseUp: handleMouseUpValues, onChange: function (event) {
                 var value = Math.max(+event.target.value, minVal + 1);
                 setMaxVal(value);
                 event.target.value = value.toString();
-            }, className: "".concat(styles$26.thumb, " ").concat(styles$26.zIndex_4) }),
-        React.createElement("div", { style: { width: size }, className: styles$26.slider },
-            React.createElement("div", { className: styles$26.track }),
-            React.createElement("div", { ref: range, className: styles$26.range }),
-            showValues && (React.createElement("div", { className: styles$26.values },
-                React.createElement("div", { className: styles$26.left_value }, hasCurrency),
-                React.createElement("div", { className: styles$26.right_value }, maxVal.toLocaleString()))))));
+            }, className: "".concat(styles$2a.thumb, " ").concat(styles$2a.zIndex_4) }),
+        React.createElement("div", { style: { width: size }, className: styles$2a.slider },
+            React.createElement("div", { className: styles$2a.track }),
+            React.createElement("div", { ref: range, className: styles$2a.range }),
+            showValues && (React.createElement("div", { className: styles$2a.values },
+                React.createElement("div", { className: styles$2a.left_value }, hasCurrency),
+                React.createElement("div", { className: styles$2a.right_value }, maxVal.toLocaleString()))))));
 };
 
-var styles$25 = {"content":"mg_paragraph_content_1mtnz"};
+var styles$29 = {"content":"mg_paragraph_content_1mtnz"};
 
 var Component$2d = function (_a) {
     var paragraph = _a.paragraph;
-    return React.createElement("p", { className: styles$25.content }, paragraph);
+    return React.createElement("p", { className: styles$29.content }, paragraph);
 };
 var Paragraph = memo(Component$2d);
 
@@ -1825,9 +2126,10 @@ var Component$2c = function (_a) {
             setHideComponent(true);
             return;
         }
-        setTimeout(function () {
+        var timer = setTimeout(function () {
             setHideComponent(false);
         }, 300);
+        return function () { return clearTimeout(timer); };
     }, [show]);
     return (React.createElement("div", { style: { width: widthBase }, className: [style$Y['magneto-ui-popover-container'], staticContentClass, className].join(' ') },
         React.createElement("div", { className: "".concat(style$Y['magneto-ui-popover'], " ").concat(style$Y[positionX], " ").concat(style$Y[positionY], " ").concat(style$Y[showMenu]) }, hideComponent && content),
@@ -1845,12 +2147,12 @@ var ERadioType;
     ERadioType["button"] = "button";
 })(ERadioType || (ERadioType = {}));
 
-var styles$24 = {"magneto-ui-radio-button":"mg_radio_button_magneto-ui-radio-button_1ekre","magneto-ui-radio-button--checked":"mg_radio_button_magneto-ui-radio-button--checked_1ekre","magneto-ui-radio-button--disabled":"mg_radio_button_magneto-ui-radio-button--disabled_1ekre","magneto-ui-radio-button__children":"mg_radio_button_magneto-ui-radio-button_children_1ekre"};
+var styles$28 = {"magneto-ui-radio-button":"mg_radio_button_magneto-ui-radio-button_1ekre","magneto-ui-radio-button--checked":"mg_radio_button_magneto-ui-radio-button--checked_1ekre","magneto-ui-radio-button--disabled":"mg_radio_button_magneto-ui-radio-button--disabled_1ekre","magneto-ui-radio-button__children":"mg_radio_button_magneto-ui-radio-button_children_1ekre"};
 
 var Component$2b = function (_a) {
     var checked = _a.checked, children = _a.children, childrenClassName = _a.childrenClassName, className = _a.className, defaultChecked = _a.defaultChecked, disabled = _a.disabled, id = _a.id, onChange = _a.onChange, prefixIcon = _a.prefixIcon, suffixIcon = _a.suffixIcon;
     return (React.createElement("label", { className: CNM.get({
-            styles: styles$24,
+            styles: styles$28,
             cls: [
                 'radio-button',
                 (checked || defaultChecked) && 'radio-button--checked',
@@ -1860,7 +2162,7 @@ var Component$2b = function (_a) {
         }), htmlFor: id },
         prefixIcon && React.createElement(IconItem, __assign({ size: 18 }, prefixIcon)),
         React.createElement("input", { type: "radio", disabled: disabled, id: id, checked: checked || defaultChecked, onChange: onChange }),
-        children && (React.createElement("span", { className: CNM.get({ styles: styles$24, cls: ['radio-button__children', childrenClassName] }) }, children)),
+        children && (React.createElement("span", { className: CNM.get({ styles: styles$28, cls: ['radio-button__children', childrenClassName] }) }, children)),
         suffixIcon && React.createElement(IconItem, __assign({ size: 18 }, suffixIcon))));
 };
 /**
@@ -1868,21 +2170,21 @@ var Component$2b = function (_a) {
  */
 var RadioButton = Component$2b;
 
-var styles$23 = {"magneto-ui-radio-default":"mg_radio_default_magneto-ui-radio-default_1csy4","magneto-ui-radio-default--disabled":"mg_radio_default_magneto-ui-radio-default--disabled_1csy4","magneto-ui-radio-default__indicator":"mg_radio_default_magneto-ui-radio-default_indicator_1csy4","magneto-ui-radio-default__indicator--checked":"mg_radio_default_magneto-ui-radio-default_indicator--checked_1csy4","magneto-ui-radio-default__label":"mg_radio_default_magneto-ui-radio-default_label_1csy4"};
+var styles$27 = {"magneto-ui-radio-default":"mg_radio_default_magneto-ui-radio-default_1csy4","magneto-ui-radio-default--disabled":"mg_radio_default_magneto-ui-radio-default--disabled_1csy4","magneto-ui-radio-default__indicator":"mg_radio_default_magneto-ui-radio-default_indicator_1csy4","magneto-ui-radio-default__indicator--checked":"mg_radio_default_magneto-ui-radio-default_indicator--checked_1csy4","magneto-ui-radio-default__label":"mg_radio_default_magneto-ui-radio-default_label_1csy4"};
 
 var Component$2a = function (_a) {
     var checked = _a.checked, children = _a.children, childrenClassName = _a.childrenClassName, className = _a.className, defaultChecked = _a.defaultChecked, disabled = _a.disabled, id = _a.id, indicatorClassName = _a.indicatorClassName, onChange = _a.onChange;
-    return (React.createElement("label", { className: CNM.get({ styles: styles$23, cls: ['radio-default', disabled && 'radio-default--disabled', className] }), htmlFor: id },
+    return (React.createElement("label", { className: CNM.get({ styles: styles$27, cls: ['radio-default', disabled && 'radio-default--disabled', className] }), htmlFor: id },
         React.createElement("input", { type: "radio", id: id, disabled: disabled, checked: checked || defaultChecked, onChange: onChange }),
         React.createElement("div", { className: CNM.get({
-                styles: styles$23,
+                styles: styles$27,
                 cls: [
                     'radio-default__indicator',
                     (checked || defaultChecked) && 'radio-default__indicator--checked',
                     indicatorClassName
                 ]
             }) }),
-        children && (React.createElement("span", { className: CNM.get({ styles: styles$23, cls: ['radio-default-label', childrenClassName] }) }, children))));
+        children && (React.createElement("span", { className: CNM.get({ styles: styles$27, cls: ['radio-default-label', childrenClassName] }) }, children))));
 };
 /**
  * Molecule UI component for radio default
@@ -1908,21 +2210,21 @@ var Component$29 = function (_a) {
  */
 var Radio = Component$29;
 
-var styles$22 = {"magneto-ui-save-button":"mg_save_button_magneto-ui-save-button_1d7nc","magneto-ui-save-button__mobile-text":"mg_save_button_magneto-ui-save-button_mobile-text_1d7nc","button-content":"mg_save_button_button-content_1d7nc","hover-effect":"mg_save_button_hover-effect_1d7nc"};
+var styles$26 = {"magneto-ui-save-button":"mg_save_button_magneto-ui-save-button_1d7nc","magneto-ui-save-button__mobile-text":"mg_save_button_magneto-ui-save-button_mobile-text_1d7nc","button-content":"mg_save_button_button-content_1d7nc","hover-effect":"mg_save_button_hover-effect_1d7nc"};
 
 var Component$28 = function (_a) {
     var isAuthenticated = _a.isAuthenticated, isSaved = _a.isSaved, buttonText = _a.buttonText, buttonTitle = _a.buttonTitle, addHover = _a.addHover, onClick = _a.onClick;
-    return isAuthenticated ? (React.createElement("button", { className: "".concat(styles$22['magneto-ui-save-button'], " ").concat(addHover && styles$22['hover-effect']), type: "button", onClick: onClick, "aria-label": buttonTitle },
-        React.createElement("div", { className: styles$22['button-content'] },
+    return isAuthenticated ? (React.createElement("button", { className: "".concat(styles$26['magneto-ui-save-button'], " ").concat(addHover && styles$26['hover-effect']), type: "button", onClick: onClick, "aria-label": buttonTitle },
+        React.createElement("div", { className: styles$26['button-content'] },
             React.createElement(IconItem, { size: 20, icon: isSaved ? ArchiveRemove : ArchiveAdd, hover: addHover }),
-            buttonText && React.createElement("p", { className: styles$22['magneto-ui-save-button__mobile-text'] }, buttonText)))) : null;
+            buttonText && React.createElement("p", { className: styles$26['magneto-ui-save-button__mobile-text'] }, buttonText)))) : null;
 };
 /**
  * UI Atom Component of Save Button
  */
 var SaveButton = Component$28;
 
-var styles$21 = {"magneto-ui-share-button":"mg_share_button_magneto-ui-share-button_15yvi","magneto-ui-share-button__mobile-text":"mg_share_button_magneto-ui-share-button_mobile-text_15yvi","button-content":"mg_share_button_button-content_15yvi","hover-effect":"mg_share_button_hover-effect_15yvi"};
+var styles$25 = {"magneto-ui-share-button":"mg_share_button_magneto-ui-share-button_15yvi","magneto-ui-share-button__mobile-text":"mg_share_button_magneto-ui-share-button_mobile-text_15yvi","button-content":"mg_share_button_button-content_15yvi","hover-effect":"mg_share_button_hover-effect_15yvi"};
 
 var Component$27 = function (_a) {
     var _b = _a.className, className = _b === void 0 ? '' : _b, buttonTitle = _a.buttonTitle, buttonText = _a.buttonText, detailUrl = _a.detailUrl, addHover = _a.addHover, onCopySuccess = _a.onCopySuccess;
@@ -1931,14 +2233,14 @@ var Component$27 = function (_a) {
             navigator.clipboard.writeText(detailUrl).then(function () { return onCopySuccess(); });
         }
     };
-    return (React.createElement("button", { className: "".concat(styles$21['magneto-ui-share-button'], " ").concat(addHover && styles$21['hover-effect'], " ").concat(className), type: "button", onClick: handleCopyClick, title: buttonTitle },
-        React.createElement("div", { className: styles$21['button-content'] },
+    return (React.createElement("button", { className: "".concat(styles$25['magneto-ui-share-button'], " ").concat(addHover && styles$25['hover-effect'], " ").concat(className), type: "button", onClick: handleCopyClick, title: buttonTitle },
+        React.createElement("div", { className: styles$25['button-content'] },
             React.createElement(IconItem, { size: 20, icon: Link1, hover: addHover }),
-            buttonText && React.createElement("p", { className: styles$21['magneto-ui-share-button__mobile-text'] }, buttonText))));
+            buttonText && React.createElement("p", { className: styles$25['magneto-ui-share-button__mobile-text'] }, buttonText))));
 };
 var ShareButton = Component$27;
 
-var styles$20 = {"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 styles$24 = {"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$26 = function (_a) {
     var name = _a.name, score = _a.score;
@@ -1976,15 +2278,15 @@ var Component$26 = function (_a) {
         4: 'four'
     };
     var levelClass = scoreToLevel[score || 0] || '';
-    var fillAnimation = animationApplied ? styles$20[levelClass] : '';
-    return (React.createElement("div", { ref: skillRef, className: styles$20['magneto-ui-skill'] },
-        React.createElement("div", { className: styles$20['magneto-ui-skill__wrapper'] },
+    var fillAnimation = animationApplied ? styles$24[levelClass] : '';
+    return (React.createElement("div", { ref: skillRef, className: styles$24['magneto-ui-skill'] },
+        React.createElement("div", { className: styles$24['magneto-ui-skill__wrapper'] },
             React.createElement("p", null, name),
-            React.createElement("div", { className: "".concat(styles$20['magneto-ui-skill__bar'], " ").concat(fillAnimation || styles$20['magneto-ui-skill--no-animation']) }))));
+            React.createElement("div", { className: "".concat(styles$24['magneto-ui-skill__bar'], " ").concat(fillAnimation || styles$24['magneto-ui-skill--no-animation']) }))));
 };
 var Skill = Component$26;
 
-var styles$1$ = {"magneto-ui-switch_container":"mg_switch_magneto-ui-switch_container_1g2ul","magneto-ui-switch":"mg_switch_magneto-ui-switch_1g2ul","magneto-ui-slider":"mg_switch_magneto-ui-slider_1g2ul","magneto-ui-round":"mg_switch_magneto-ui-round_1g2ul"};
+var styles$23 = {"magneto-ui-switch_container":"mg_switch_magneto-ui-switch_container_1g2ul","magneto-ui-switch":"mg_switch_magneto-ui-switch_1g2ul","magneto-ui-slider":"mg_switch_magneto-ui-slider_1g2ul","magneto-ui-round":"mg_switch_magneto-ui-round_1g2ul"};
 
 var Switch = function (_a) {
     var _b = _a.isActive, isActive = _b === void 0 ? false : _b, _c = _a.setIsActive, setIsActive = _c === void 0 ? function () { return null; } : _c, _d = _a.title, title = _d === void 0 ? '' : _d, _e = _a.className, className = _e === void 0 ? '' : _e, _f = _a.isDisabled, isDisabled = _f === void 0 ? false : _f;
@@ -1998,10 +2300,10 @@ var Switch = function (_a) {
         setChecked(function (state) { return !state; });
         setIsActive(!isActive);
     }, [isDisabled, setIsActive, isActive]);
-    return (React.createElement("div", { className: "".concat(styles$1$['magneto-ui-switch_container'], " ").concat(className) },
-        React.createElement("label", { className: styles$1$['magneto-ui-switch'] },
+    return (React.createElement("div", { className: "".concat(styles$23['magneto-ui-switch_container'], " ").concat(className) },
+        React.createElement("label", { className: styles$23['magneto-ui-switch'] },
             React.createElement("input", { type: "checkbox", onChange: handleChange, checked: checked, role: "switch" }),
-            React.createElement("span", { className: "".concat(styles$1$['magneto-ui-slider'], " ").concat(styles$1$['magneto-ui-round']) })),
+            React.createElement("span", { className: "".concat(styles$23['magneto-ui-slider'], " ").concat(styles$23['magneto-ui-round']) })),
         title && React.createElement("p", null, title)));
 };
 
@@ -2029,7 +2331,7 @@ var Tags = function (_a) {
         React.createElement(IconItem, { icon: icon, alt: "tag-icon" })));
 };
 
-var styles$1_ = {"magneto-ui-toggle-button":"mg_toggle_button_magneto-ui-toggle-button_1g06c","magneto-ui-toggle-button__img":"mg_toggle_button_magneto-ui-toggle-button_img_1g06c","toggle-button-selected":"mg_toggle_button_toggle-button-selected_1g06c","toggle-image-selected":"mg_toggle_button_toggle-image-selected_1g06c"};
+var styles$22 = {"magneto-ui-toggle-button":"mg_toggle_button_magneto-ui-toggle-button_1g06c","magneto-ui-toggle-button__img":"mg_toggle_button_magneto-ui-toggle-button_img_1g06c","toggle-button-selected":"mg_toggle_button_toggle-button-selected_1g06c","toggle-image-selected":"mg_toggle_button_toggle-image-selected_1g06c"};
 
 var Component$25 = function (_a) {
     var className = _a.className, _b = _a.color, color = _b === void 0 ? '#001B38' : _b, _c = _a.onChange, onChange = _c === void 0 ? function () { return ({}); } : _c, id = _a.id, name = _a.name, currentSelect = _a.currentSelect, _d = _a.baseColor, baseColor = _d === void 0 ? 'transparent' : _d, _e = _a.customIcon, customIcon = _e === void 0 ? '' : _e;
@@ -2062,20 +2364,20 @@ var Component$25 = function (_a) {
             color: isColorDark(baseColor || '#FFFFFF') ? '#FFFFFF' : '#000000'
         };
     }, [baseColor, color, currentSelect]);
-    return (React.createElement("button", { className: "".concat(styles$1_["".concat(classMUI, "-toggle-button")], " ").concat(className || '', " ").concat(currentSelect ? styles$1_['toggle-button-selected'] : ''), style: __assign({}, selectStyles), onClick: function () { return handleClick({ id: id, name: name }); }, type: "button" },
-        customIcon && (React.createElement("img", { className: "".concat(styles$1_["".concat(classMUI, "-toggle-button__img")], " ").concat(currentSelect ? styles$1_['toggle-image-selected'] : ''), src: customIcon, alt: "toogle-btn" })),
+    return (React.createElement("button", { className: "".concat(styles$22["".concat(classMUI, "-toggle-button")], " ").concat(className || '', " ").concat(currentSelect ? styles$22['toggle-button-selected'] : ''), style: __assign({}, selectStyles), onClick: function () { return handleClick({ id: id, name: name }); }, type: "button" },
+        customIcon && (React.createElement("img", { className: "".concat(styles$22["".concat(classMUI, "-toggle-button__img")], " ").concat(currentSelect ? styles$22['toggle-image-selected'] : ''), src: customIcon, alt: "toogle-btn" })),
         name));
 };
 var ToggleButton = Component$25;
 
-var styles$1Z = {"magneto-ui-user-menu-button-analyst":"mg_user_menu_button_analyst_magneto-ui-user-menu-button-analyst_1crg0"};
+var styles$21 = {"magneto-ui-user-menu-button-analyst":"mg_user_menu_button_analyst_magneto-ui-user-menu-button-analyst_1crg0"};
 
 var Component$24 = function (_a) {
     var className = _a.className, title = _a.title, onClick = _a.onClick, user = _a.user;
     var userInfo = useMediaQuery(React.createElement("span", null, "".concat(user, " | ").concat(title)), {
         sm: null
     });
-    return (React.createElement("button", { className: CNM.get({ styles: styles$1Z, cls: ['user-menu-button-analyst', className] }), onClick: onClick },
+    return (React.createElement("button", { className: CNM.get({ styles: styles$21, cls: ['user-menu-button-analyst', className] }), onClick: onClick },
         React.createElement(IconItem, { icon: UserRoundedBlue, size: 20 }),
         userInfo,
         React.createElement(IconItem, { icon: ArrowDownBlue, size: 16 })));
@@ -2085,7 +2387,7 @@ var Component$24 = function (_a) {
  */
 var UserMenuButtonAnalyst = Component$24;
 
-var styles$1Y = {"magneto-ui-actions":"mg_actions_magneto-ui-actions_ks5p3","magneto-ui-actions__header":"mg_actions_magneto-ui-actions_header_ks5p3","magneto-ui-actions__header-title":"mg_actions_magneto-ui-actions_header-title_ks5p3","magneto-ui-actions__header-subtitle":"mg_actions_magneto-ui-actions_header-subtitle_ks5p3","magneto-ui-actions__button":"mg_actions_magneto-ui-actions_button_ks5p3","magneto-ui-actions__link":"mg_actions_magneto-ui-actions_link_ks5p3","magneto-ui-actions__link--no-decorator":"mg_actions_magneto-ui-actions_link--no-decorator_ks5p3","magneto-ui-actions__apply-button":"mg_actions_magneto-ui-actions_apply-button_ks5p3","magneto-ui-actions__back":"mg_actions_magneto-ui-actions_back_ks5p3","magneto-ui-actions__share":"mg_actions_magneto-ui-actions_share_ks5p3","magneto-ui__external-child":"mg_actions_magneto-ui_external-child_ks5p3"};
+var styles$20 = {"magneto-ui-actions":"mg_actions_magneto-ui-actions_ks5p3","magneto-ui-actions__header":"mg_actions_magneto-ui-actions_header_ks5p3","magneto-ui-actions__header-title":"mg_actions_magneto-ui-actions_header-title_ks5p3","magneto-ui-actions__header-subtitle":"mg_actions_magneto-ui-actions_header-subtitle_ks5p3","magneto-ui-actions__button":"mg_actions_magneto-ui-actions_button_ks5p3","magneto-ui-actions__link":"mg_actions_magneto-ui-actions_link_ks5p3","magneto-ui-actions__link--no-decorator":"mg_actions_magneto-ui-actions_link--no-decorator_ks5p3","magneto-ui-actions__apply-button":"mg_actions_magneto-ui-actions_apply-button_ks5p3","magneto-ui-actions__back":"mg_actions_magneto-ui-actions_back_ks5p3","magneto-ui-actions__share":"mg_actions_magneto-ui-actions_share_ks5p3","magneto-ui__external-child":"mg_actions_magneto-ui_external-child_ks5p3"};
 
 var ShareIcons = {
     Facebook: {
@@ -2102,6 +2404,24 @@ var ShareIcons = {
     },
     Sms: {
         icon: SMSBlue
+    },
+    Share: {
+        icon: Share2
+    },
+    ShareBold: {
+        icon: Share2Bold
+    },
+    ArchiveAdd: {
+        icon: ArchiveAdd
+    },
+    ArchiveRemove: {
+        icon: ArchiveRemove
+    },
+    Export: {
+        icon: Export3
+    },
+    Building: {
+        icon: Building5
     }
 };
 
@@ -2118,39 +2438,39 @@ var Component$23 = function (_a) {
     };
     if (component)
         return component;
-    return (React.createElement("div", { className: styles$1Y['magneto-ui-actions'] },
-        React.createElement("div", { id: styles$1Y['magneto-ui__external-child'] }, !isApplied && externalButtonChild),
+    return (React.createElement("div", { className: styles$20['magneto-ui-actions'] },
+        React.createElement("div", { id: styles$20['magneto-ui__external-child'] }, !isApplied && externalButtonChild),
         React.createElement(SaveButton, __assign({}, saveButtonProps)),
-        React.createElement("button", { className: styles$1Y['magneto-ui-actions__button'], "aria-label": shareButtonProps.title, onClick: function () {
+        React.createElement("button", { className: styles$20['magneto-ui-actions__button'], "aria-label": shareButtonProps.title, onClick: function () {
                 return setComponent(React.createElement(Actions.ShareLinks, { offerCompanyName: offerCompanyName, shareButtonProps: copyButtonProps, ActionsHeader: ActionsHeader, backText: backText, onBack: handleBack }));
             } },
             React.createElement(IconItem, { size: 20, icon: Share }),
             shareButtonProps.content), actionsLinkList === null || actionsLinkList === void 0 ? void 0 :
         actionsLinkList.map(function (_a, index) {
             var url = _a.url, text = _a.text, Icon = _a.Icon;
-            return (React.createElement("a", { className: styles$1Y['magneto-ui-actions__link'], key: index, href: url, target: "_blank", rel: "noreferrer" },
+            return (React.createElement("a", { className: styles$20['magneto-ui-actions__link'], key: index, href: url, target: "_blank", rel: "noreferrer" },
                 React.createElement(IconItem, { hover: false, size: 20, icon: Icon }),
                 React.createElement("p", { key: index }, text)));
         }),
-        React.createElement("div", { className: styles$1Y['magneto-ui-actions__header'] },
-            React.createElement("p", { className: styles$1Y['magneto-ui-actions__header-title'] }, ActionsHeader),
-            offerCompanyName ? React.createElement("p", { className: styles$1Y['magneto-ui-actions__header-subtitle'] }, offerCompanyName) : null)));
+        React.createElement("div", { className: styles$20['magneto-ui-actions__header'] },
+            React.createElement("p", { className: styles$20['magneto-ui-actions__header-title'] }, ActionsHeader),
+            offerCompanyName ? React.createElement("p", { className: styles$20['magneto-ui-actions__header-subtitle'] }, offerCompanyName) : null)));
 };
 var ShareLinksAction = function (_a) {
     var onBack = _a.onBack, _b = _a.shareButtonProps, _c = _b.shareLinks, shareLinks = _c === void 0 ? [] : _c, shareProps = __rest(_b, ["shareLinks"]), ActionsHeader = _a.ActionsHeader, offerCompanyName = _a.offerCompanyName, backText = _a.backText;
-    return (React.createElement("div", { className: styles$1Y['magneto-ui-actions'] },
-        React.createElement(ShareButton, __assign({ className: styles$1Y['magneto-ui-actions__share'] }, shareProps)),
+    return (React.createElement("div", { className: styles$20['magneto-ui-actions'] },
+        React.createElement(ShareButton, __assign({ className: styles$20['magneto-ui-actions__share'] }, shareProps)),
         shareLinks.map(function (_a, index) {
             var title = _a.title, ariaLabel = _a.ariaLabel, href = _a.href, icon = _a.icon, name = _a.name;
-            return (React.createElement("a", { key: "".concat(title, "-").concat(index), target: "_blank", rel: "noreferrer", "aria-label": ariaLabel, href: href, className: [styles$1Y['magneto-ui-actions__link'], styles$1Y['magneto-ui-actions__link--no-decorator']].join(' ') },
+            return (React.createElement("a", { key: "".concat(title, "-").concat(index), target: "_blank", rel: "noreferrer", "aria-label": ariaLabel, href: href, className: [styles$20['magneto-ui-actions__link'], styles$20['magneto-ui-actions__link--no-decorator']].join(' ') },
                 React.createElement(IconItem, { size: 40, icon: name ? ShareIcons[name].icon : icon }),
                 React.createElement("span", null, title)));
         }),
-        React.createElement("div", { className: styles$1Y['magneto-ui-actions__header'] },
-            React.createElement("p", { className: styles$1Y['magneto-ui-actions__header-title'] }, ActionsHeader),
-            offerCompanyName ? React.createElement("p", { className: styles$1Y['magneto-ui-actions__header-subtitle'] }, offerCompanyName) : null),
-        React.createElement("div", { className: styles$1Y['magneto-ui-actions__back'] },
-            React.createElement("button", { className: styles$1Y['magneto-ui-actions__button'], onClick: function () { return onBack(); } },
+        React.createElement("div", { className: styles$20['magneto-ui-actions__header'] },
+            React.createElement("p", { className: styles$20['magneto-ui-actions__header-title'] }, ActionsHeader),
+            offerCompanyName ? React.createElement("p", { className: styles$20['magneto-ui-actions__header-subtitle'] }, offerCompanyName) : null),
+        React.createElement("div", { className: styles$20['magneto-ui-actions__back'] },
+            React.createElement("button", { className: styles$20['magneto-ui-actions__button'], onClick: function () { return onBack(); } },
                 React.createElement(IconItem, { size: 20, icon: ArrowLeft2 })),
             backText)));
 };
@@ -2221,7 +2541,7 @@ var DrawerPortal = function (_a) {
 
 var style$T = {"magneto-ui-mobile-drawer":"mg_mobile_drawer_magneto-ui-mobile-drawer_1e2s0","magneto-ui-close-button":"mg_mobile_drawer_magneto-ui-close-button_1e2s0","magneto-ui-container":"mg_mobile_drawer_magneto-ui-container_1e2s0","background-drawer":"mg_mobile_drawer_background-drawer_1e2s0","fadeIn":"mg_mobile_drawer_fadeIn_1e2s0","show":"mg_mobile_drawer_show_1e2s0","hidden":"mg_mobile_drawer_hidden_1e2s0"};
 
-var cx$N = classNames.bind(style$T);
+var cx$S = classNames.bind(style$T);
 var Component$21 = 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];
@@ -2248,12 +2568,12 @@ var Component$21 = function (_a) {
         };
     }, [isOpen]);
     return (React.createElement(React.Fragment, null, renderPortal && (React.createElement(DrawerPortal, null,
-        React.createElement("div", { className: cx$N('magneto-ui-mobile-drawer', className) },
+        React.createElement("div", { className: cx$S('magneto-ui-mobile-drawer', className) },
             React.createElement("aside", { className: style$T[showMenu] },
-                React.createElement("button", { "data-name": "close-drawer", title: "close-modal", className: cx$N('magneto-ui-close-button'), onClick: onClose },
+                React.createElement("button", { "data-name": "close-drawer", title: "close-modal", className: cx$S('magneto-ui-close-button'), onClick: onClose },
                     React.createElement(IconItem, { icon: Add, hover: false })),
-                React.createElement("div", { className: cx$N('magneto-ui-container') }, children)),
-            isOpen && (React.createElement("span", { className: cx$N('background-drawer'), onClick: blockBackgroundClose ? function () { return null; } : onClose })))))));
+                React.createElement("div", { className: cx$S('magneto-ui-container') }, children)),
+            isOpen && (React.createElement("span", { className: cx$S('background-drawer'), onClick: blockBackgroundClose ? function () { return null; } : onClose })))))));
 };
 /**
  * Molecule UI component for Mobile Drawer
@@ -2314,11 +2634,11 @@ var BrandsMenuPopover = function (_a) {
 };
 var BrandsMenuPopover$1 = withClickOut(BrandsMenuPopover);
 
-var styles$1X = {"BreadcrumbsComponent":"mg_breadcrumbs_BreadcrumbsComponent_13csm"};
+var styles$1$ = {"BreadcrumbsComponent":"mg_breadcrumbs_BreadcrumbsComponent_13csm"};
 
 var Component$20 = function (_a) {
     var homeUrl = _a.homeUrl, breadcrumbProps = _a.breadcrumbProps, _b = _a.iconProps, iconProps = _b === void 0 ? iconPropsBreadCrumb : _b;
-    return (React.createElement("div", { className: styles$1X.BreadcrumbsComponent },
+    return (React.createElement("div", { className: styles$1$.BreadcrumbsComponent },
         React.createElement("a", { href: homeUrl },
             React.createElement(IconItem, __assign({}, iconProps))),
         breadcrumbProps && React.createElement(Breadcrumb, __assign({}, breadcrumbProps))));
@@ -2328,19 +2648,19 @@ var Component$20 = function (_a) {
  */
 var Breadcrumbs = Component$20;
 
-var styles$1W = {"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"};
+var styles$1_ = {"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"};
 
 var CitiesDetailDrawer = function (_a) {
     var cities = _a.cities, isRemote = _a.isRemote, textRemote = _a.textRemote;
-    return (React.createElement("div", { className: styles$1W['magneto-ui-cities-detail-drawer'] }, cities && (cities === null || cities === void 0 ? void 0 : cities.length) ? (React.createElement(React.Fragment, null,
-        React.createElement("div", { className: styles$1W['magneto-ui-cities-detail-drawer__item-detail-icon'] },
+    return (React.createElement("div", { className: styles$1_['magneto-ui-cities-detail-drawer'] }, cities && (cities === null || cities === void 0 ? void 0 : cities.length) ? (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: styles$1_['magneto-ui-cities-detail-drawer__item-detail-icon'] },
             React.createElement(IconItem, { alt: 'Location-icon', icon: Location, hover: false, size: 16 })),
-        React.createElement("div", { className: styles$1W['magneto-ui-cities-detail-drawer__item-detail-text'] },
-            isRemote && (React.createElement("p", { className: styles$1W['magneto-ui-cities-detail-drawer__item-detail-text-remote'] }, textRemote)),
+        React.createElement("div", { className: styles$1_['magneto-ui-cities-detail-drawer__item-detail-text'] },
+            isRemote && (React.createElement("p", { className: styles$1_['magneto-ui-cities-detail-drawer__item-detail-text-remote'] }, textRemote)),
             cities &&
                 cities.map(function (_a, index) {
                     var name = _a.name, url = _a.url, title = _a.title;
-                    return (React.createElement("div", { className: styles$1W['magneto-ui-cities-detail-drawer__item-detail-text-link'], key: url },
+                    return (React.createElement("div", { className: styles$1_['magneto-ui-cities-detail-drawer__item-detail-text-link'], key: url },
                         url ? React.createElement(Link, { href: url, target: "_blank", text: name, title: title }) : React.createElement("span", null, name),
                         index !== cities.length - 1 && React.createElement("span", null, ' - ')));
                 })))) : null));
@@ -2348,21 +2668,21 @@ var CitiesDetailDrawer = function (_a) {
 
 var Avatar3DImg = "https://static.magneto365.com/lib/assets/img/d01f8eef0ddaca1f.png";
 
-var styles$1V = {"create-account-cta":"mg_create_account_c_t_a_create-account-cta_kugln","create-account-cta__loader":"mg_create_account_c_t_a_create-account-cta_loader_kugln","create-account-cta__avatar":"mg_create_account_c_t_a_create-account-cta_avatar_kugln","create-account-cta__summary":"mg_create_account_c_t_a_create-account-cta_summary_kugln","create-account-cta__arrow":"mg_create_account_c_t_a_create-account-cta_arrow_kugln"};
+var styles$1Z = {"create-account-cta":"mg_create_account_c_t_a_create-account-cta_kugln","create-account-cta__loader":"mg_create_account_c_t_a_create-account-cta_loader_kugln","create-account-cta__avatar":"mg_create_account_c_t_a_create-account-cta_avatar_kugln","create-account-cta__summary":"mg_create_account_c_t_a_create-account-cta_summary_kugln","create-account-cta__arrow":"mg_create_account_c_t_a_create-account-cta_arrow_kugln"};
 
 var Component$1$ = function (_a) {
     var ctaClick = _a.ctaClick, description = _a.description, title = _a.title, isLoading = _a.isLoading;
-    return (React.createElement("button", { disabled: isLoading, onClick: ctaClick, className: styles$1V['create-account-cta'] }, isLoading ? (React.createElement("div", { className: styles$1V['create-account-cta__loader'] },
+    return (React.createElement("button", { disabled: isLoading, onClick: ctaClick, className: styles$1Z['create-account-cta'] }, isLoading ? (React.createElement("div", { className: styles$1Z['create-account-cta__loader'] },
         React.createElement(DotsLoader, { color: "#1a324c", count: 3 }))) : (React.createElement(React.Fragment, null,
-        React.createElement("img", { className: styles$1V['create-account-cta__avatar'], src: Avatar3DImg, alt: "avatar" }),
-        React.createElement("div", { className: styles$1V['create-account-cta__summary'] },
+        React.createElement("img", { className: styles$1Z['create-account-cta__avatar'], src: Avatar3DImg, alt: "avatar" }),
+        React.createElement("div", { className: styles$1Z['create-account-cta__summary'] },
             React.createElement("h4", null, title),
             React.createElement("p", null, description)),
-        React.createElement("img", { className: styles$1V['create-account-cta__arrow'], src: ArrowRight2, alt: "arrow" })))));
+        React.createElement("img", { className: styles$1Z['create-account-cta__arrow'], src: ArrowRight2, alt: "arrow" })))));
 };
 var CreateAccountCTA = Component$1$;
 
-var styles$1U = {"magneto-ui--date-picker__wrapper":"mg_date_picker_magneto-ui--date-picker_wrapper_12pj2"};
+var styles$1Y = {"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: '' };
@@ -2401,7 +2721,7 @@ var Component$1_ = function (_a) {
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [disabled]);
-    return (React.createElement("div", { className: styles$1U['magneto-ui--date-picker__wrapper'] },
+    return (React.createElement("div", { className: styles$1Y['magneto-ui--date-picker__wrapper'] },
         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 })));
 };
@@ -2519,7 +2839,7 @@ var EXPANDABLE_INFO_ACTION_ICONS = {
         _c)
 };
 
-var styles$1T = {"magneto-ui-expandable-info-action__button":"mg_expandable_info_action_magneto-ui-expandable-info-action_button_1ajzq","magneto-ui-expandable-info-action__button--dark-blue":"mg_expandable_info_action_magneto-ui-expandable-info-action_button--dark-blue_1ajzq","magneto-ui-expandable-info-action__button--light-blue":"mg_expandable_info_action_magneto-ui-expandable-info-action_button--light-blue_1ajzq","magneto-ui-expandable-info-action__button--white":"mg_expandable_info_action_magneto-ui-expandable-info-action_button--white_1ajzq","magneto-ui-expandable-info-action__button--green":"mg_expandable_info_action_magneto-ui-expandable-info-action_button--green_1ajzq","magneto-ui-expandable-info-action__title":"mg_expandable_info_action_magneto-ui-expandable-info-action_title_1ajzq"};
+var styles$1X = {"magneto-ui-expandable-info-action__button":"mg_expandable_info_action_magneto-ui-expandable-info-action_button_1ajzq","magneto-ui-expandable-info-action__button--dark-blue":"mg_expandable_info_action_magneto-ui-expandable-info-action_button--dark-blue_1ajzq","magneto-ui-expandable-info-action__button--light-blue":"mg_expandable_info_action_magneto-ui-expandable-info-action_button--light-blue_1ajzq","magneto-ui-expandable-info-action__button--white":"mg_expandable_info_action_magneto-ui-expandable-info-action_button--white_1ajzq","magneto-ui-expandable-info-action__button--green":"mg_expandable_info_action_magneto-ui-expandable-info-action_button--green_1ajzq","magneto-ui-expandable-info-action__title":"mg_expandable_info_action_magneto-ui-expandable-info-action_title_1ajzq"};
 
 var Component$1Y = 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;
@@ -2527,7 +2847,7 @@ var Component$1Y = function (_a) {
     var Component = useMemo(function () { return (isUrl ? 'a' : 'button'); }, [isUrl]);
     var componentProps = useMemo(function () {
         var className = CNM.get({
-            styles: styles$1T,
+            styles: styles$1X,
             cls: ['expandable-info-action__button', "expandable-info-action__button--".concat(variant)]
         });
         if (isUrl)
@@ -2549,11 +2869,11 @@ var Component$1Y = function (_a) {
         }
         return;
     }, [loading, variant]);
-    return (React.createElement("div", { className: CNM.get({ styles: styles$1T, cls: ['expandable-info-action', className] }) },
-        React.createElement("div", { className: CNM.get({ styles: styles$1T, cls: ['expandable-info-action__container'] }) },
+    return (React.createElement("div", { className: CNM.get({ styles: styles$1X, cls: ['expandable-info-action', className] }) },
+        React.createElement("div", { className: CNM.get({ styles: styles$1X, cls: ['expandable-info-action__container'] }) },
             React.createElement(Component, __assign({}, componentProps),
                 (prefixIcon || loading) && React.createElement(IconItem, __assign({ size: 12 }, prefixIcon, { icon: icon(prefixIcon === null || prefixIcon === void 0 ? void 0 : prefixIcon.icon) })),
-                React.createElement("span", { className: CNM.get({ styles: styles$1T, cls: ['expandable-info-action__title'] }) }, title),
+                React.createElement("span", { className: CNM.get({ styles: styles$1X, cls: ['expandable-info-action__title'] }) }, title),
                 suffixIcon && React.createElement(IconItem, __assign({ size: 12 }, suffixIcon, { icon: icon(suffixIcon.icon) }))))));
 };
 /**
@@ -2561,36 +2881,36 @@ var Component$1Y = function (_a) {
  */
 var ExpandableInfoAction = Component$1Y;
 
-var styles$1S = {"magneto-ui-expandable-info-details__container":"mg_expandable_info_details_magneto-ui-expandable-info-details_container_1o8tr","magneto-ui-expandable-info-details__section":"mg_expandable_info_details_magneto-ui-expandable-info-details_section_1o8tr","magneto-ui-expandable-info-details__section--multiple":"mg_expandable_info_details_magneto-ui-expandable-info-details_section--multiple_1o8tr","magneto-ui-expandable-info-details__sub-section":"mg_expandable_info_details_magneto-ui-expandable-info-details_sub-section_1o8tr","magneto-ui-expandable-info-details__sub-section--initial":"mg_expandable_info_details_magneto-ui-expandable-info-details_sub-section--initial_1o8tr","magneto-ui-expandable-info-details__item":"mg_expandable_info_details_magneto-ui-expandable-info-details_item_1o8tr","magneto-ui-expandable-info-details__item--first":"mg_expandable_info_details_magneto-ui-expandable-info-details_item--first_1o8tr","magneto-ui-expandable-info-details__text":"mg_expandable_info_details_magneto-ui-expandable-info-details_text_1o8tr","magneto-ui-expandable-info-details__text--bold":"mg_expandable_info_details_magneto-ui-expandable-info-details_text--bold_1o8tr","magneto-ui-expandable-info-details__footer":"mg_expandable_info_details_magneto-ui-expandable-info-details_footer_1o8tr","magneto-ui-expandable-info-details__action":"mg_expandable_info_details_magneto-ui-expandable-info-details_action_1o8tr"};
+var styles$1W = {"magneto-ui-expandable-info-details__container":"mg_expandable_info_details_magneto-ui-expandable-info-details_container_1o8tr","magneto-ui-expandable-info-details__section":"mg_expandable_info_details_magneto-ui-expandable-info-details_section_1o8tr","magneto-ui-expandable-info-details__section--multiple":"mg_expandable_info_details_magneto-ui-expandable-info-details_section--multiple_1o8tr","magneto-ui-expandable-info-details__sub-section":"mg_expandable_info_details_magneto-ui-expandable-info-details_sub-section_1o8tr","magneto-ui-expandable-info-details__sub-section--initial":"mg_expandable_info_details_magneto-ui-expandable-info-details_sub-section--initial_1o8tr","magneto-ui-expandable-info-details__item":"mg_expandable_info_details_magneto-ui-expandable-info-details_item_1o8tr","magneto-ui-expandable-info-details__item--first":"mg_expandable_info_details_magneto-ui-expandable-info-details_item--first_1o8tr","magneto-ui-expandable-info-details__text":"mg_expandable_info_details_magneto-ui-expandable-info-details_text_1o8tr","magneto-ui-expandable-info-details__text--bold":"mg_expandable_info_details_magneto-ui-expandable-info-details_text--bold_1o8tr","magneto-ui-expandable-info-details__footer":"mg_expandable_info_details_magneto-ui-expandable-info-details_footer_1o8tr","magneto-ui-expandable-info-details__action":"mg_expandable_info_details_magneto-ui-expandable-info-details_action_1o8tr"};
 
 var Component$1X = function (_a) {
     var sections = _a.sections, footer = _a.footer;
     var sectionStyles = useCallback(function (multiple) {
         return CNM.get({
-            styles: styles$1S,
+            styles: styles$1W,
             cls: ['expandable-info-details__section', multiple && 'expandable-info-details__section--multiple']
         });
     }, []);
     var subSectionStyles = useCallback(function (initial) {
         return CNM.get({
-            styles: styles$1S,
+            styles: styles$1W,
             cls: ['expandable-info-details__sub-section', initial && 'expandable-info-details__sub-section--initial']
         });
     }, []);
     var itemStyles = useCallback(function (first) {
         return CNM.get({
-            styles: styles$1S,
+            styles: styles$1W,
             cls: ['expandable-info-details__item', first && 'expandable-info-details__item--first']
         });
     }, []);
     var textStyles = useCallback(function (bold) {
         return CNM.get({
-            styles: styles$1S,
+            styles: styles$1W,
             cls: ['expandable-info-details__text', bold && 'expandable-info-details__text--bold']
         });
     }, []);
-    return (React.createElement("div", { className: CNM.get({ styles: styles$1S, cls: ['expandable-info-details'] }) },
-        React.createElement("div", { className: CNM.get({ styles: styles$1S, cls: ['expandable-info-details__container'] }) }, sections === null || sections === void 0 ? void 0 :
+    return (React.createElement("div", { className: CNM.get({ styles: styles$1W, cls: ['expandable-info-details'] }) },
+        React.createElement("div", { className: CNM.get({ styles: styles$1W, cls: ['expandable-info-details__container'] }) }, sections === null || sections === void 0 ? void 0 :
             sections.map(function (section, index) {
                 var _a, _b;
                 return (React.createElement("div", { key: "eids-".concat(index), className: sectionStyles(((_a = section === null || section === void 0 ? void 0 : section.children) === null || _a === void 0 ? void 0 : _a.length) > 1) }, (_b = section === null || section === void 0 ? void 0 : section.children) === null || _b === void 0 ? void 0 : _b.map(function (subSection, subIndex) {
@@ -2604,8 +2924,8 @@ var Component$1X = function (_a) {
                             React.createElement("span", { className: textStyles(false) }, content.summary))); }))));
                 })));
             }),
-            (footer === null || footer === void 0 ? void 0 : footer.title) && footer.onAction && (React.createElement("div", { className: CNM.get({ styles: styles$1S, cls: ['expandable-info-details__footer'] }) },
-                React.createElement(ExpandableInfoAction, { variant: "white", title: footer === null || footer === void 0 ? void 0 : footer.title, onAction: footer === null || footer === void 0 ? void 0 : footer.onAction, className: CNM.get({ styles: styles$1S, cls: ['expandable-info-details__action'] }) }))))));
+            (footer === null || footer === void 0 ? void 0 : footer.title) && footer.onAction && (React.createElement("div", { className: CNM.get({ styles: styles$1W, cls: ['expandable-info-details__footer'] }) },
+                React.createElement(ExpandableInfoAction, { variant: "white", title: footer === null || footer === void 0 ? void 0 : footer.title, onAction: footer === null || footer === void 0 ? void 0 : footer.onAction, className: CNM.get({ styles: styles$1W, cls: ['expandable-info-details__action'] }) }))))));
 };
 /**
  * Molecule UI child component of expandable info
@@ -2631,7 +2951,7 @@ var EXPANDABLE_INFO_MESSAGE_ICONS = {
         _a$2)
 };
 
-var styles$1R = {"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 styles$1V = {"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$1W = function (_a) {
     var className = _a.className, title = _a.title, prefixIcon = _a.prefixIcon, variant = _a.variant;
@@ -2646,11 +2966,11 @@ var Component$1W = function (_a) {
     }, [variant]);
     if (!title)
         return null;
-    return (React.createElement("div", { className: CNM.get({ styles: styles$1R, cls: ['expandable-info-message', className] }) },
-        React.createElement("div", { className: CNM.get({ styles: styles$1R, cls: ['expandable-info-message__container'] }) },
+    return (React.createElement("div", { className: CNM.get({ styles: styles$1V, cls: ['expandable-info-message', className] }) },
+        React.createElement("div", { className: CNM.get({ styles: styles$1V, cls: ['expandable-info-message__container'] }) },
             prefixIcon && React.createElement(IconItem, __assign({ size: 16 }, prefixIcon, { icon: icon(prefixIcon.icon) })),
             React.createElement("span", { className: CNM.get({
-                    styles: styles$1R,
+                    styles: styles$1V,
                     cls: ['expandable-info-message__text', "expandable-info-message__text--".concat(variant)]
                 }) }, title))));
 };
@@ -2659,7 +2979,7 @@ var Component$1W = function (_a) {
  */
 var ExpandableInfoMessage = Component$1W;
 
-var styles$1Q = {"magneto-ui-expandable-info-modal":"mg_expandable_info_modal_magneto-ui-expandable-info-modal_56w98"};
+var styles$1U = {"magneto-ui-expandable-info-modal":"mg_expandable_info_modal_magneto-ui-expandable-info-modal_56w98"};
 
 var Component$1V = function (_a) {
     var toggler = _a.toggler, details = _a.details;
@@ -2669,7 +2989,7 @@ var Component$1V = function (_a) {
     }, []);
     return (React.createElement(React.Fragment, null,
         React.createElement(ExpandableInfoToggler, __assign({}, toggler, { onToggle: handleOnToggle })),
-        React.createElement(MobileDrawer, { isOpen: visible, onClose: handleOnToggle, className: CNM.get({ styles: styles$1Q, cls: ['expandable-info-modal'] }) },
+        React.createElement(MobileDrawer, { isOpen: visible, onClose: handleOnToggle, className: CNM.get({ styles: styles$1U, cls: ['expandable-info-modal'] }) },
             React.createElement(ExpandableInfoDetails, __assign({}, details)))));
 };
 /**
@@ -2677,23 +2997,23 @@ var Component$1V = function (_a) {
  */
 var ExpandableInfoModal = Component$1V;
 
-var styles$1P = {"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"};
+var styles$1T = {"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"};
 
-var styles$1O = {"mega-menu-side-container":"mg_with_side_cards_mega-menu-side-container_16koz","mega-menu-side-container__side":"mg_with_side_cards_mega-menu-side-container_side_16koz","mega-menu-side-container__main":"mg_with_side_cards_mega-menu-side-container_main_16koz"};
+var styles$1S = {"mega-menu-side-container":"mg_with_side_cards_mega-menu-side-container_16koz","mega-menu-side-container__side":"mg_with_side_cards_mega-menu-side-container_side_16koz","mega-menu-side-container__main":"mg_with_side_cards_mega-menu-side-container_main_16koz"};
 
 var DesktopSideCards = function (_a) {
     var WrappedComponent = _a.WrappedComponent, sideProps = _a.sideProps, wrapperProps = _a.wrapperProps;
-    return (React.createElement("div", { className: styles$1O['mega-menu-side-container'] },
-        React.createElement("div", { className: styles$1O['mega-menu-side-container__side'] },
+    return (React.createElement("div", { className: styles$1S['mega-menu-side-container'] },
+        React.createElement("div", { className: styles$1S['mega-menu-side-container__side'] },
             React.createElement(MegaMenuSideCards, __assign({}, sideProps))),
-        React.createElement("div", { className: styles$1O['mega-menu-side-container__main'] },
+        React.createElement("div", { className: styles$1S['mega-menu-side-container__main'] },
             React.createElement(WrappedComponent, __assign({}, wrapperProps)))));
 };
 
 var MobileSideCards = function (_a) {
     var WrappedComponent = _a.WrappedComponent, sideProps = _a.sideProps, wrapperProps = _a.wrapperProps, showContent = _a.showContent;
-    return (React.createElement("div", { className: styles$1O['mega-menu-side-container'] }, showContent ? (React.createElement("div", { className: styles$1O['mega-menu-side-container__main'] },
-        React.createElement(WrappedComponent, __assign({}, wrapperProps)))) : (React.createElement("div", { className: styles$1O['mega-menu-side-container__side'] },
+    return (React.createElement("div", { className: styles$1S['mega-menu-side-container'] }, showContent ? (React.createElement("div", { className: styles$1S['mega-menu-side-container__main'] },
+        React.createElement(WrappedComponent, __assign({}, wrapperProps)))) : (React.createElement("div", { className: styles$1S['mega-menu-side-container__side'] },
         React.createElement(MegaMenuSideCards, __assign({}, sideProps))))));
 };
 
@@ -2750,9 +3070,9 @@ var MobileSideCardsDrawer = function (_a) {
         updateDrawerContent(index);
         toogleDrawer();
     }, [toogleDrawer, updateDrawerContent]);
-    return (React.createElement("div", { className: styles$1O['mega-menu-side-container'] },
+    return (React.createElement("div", { className: styles$1S['mega-menu-side-container'] },
         React.createElement(MegaMenuSideCards, __assign({}, sideProps, { onSelectCard: onSelectSideCard })),
-        React.createElement(Drawer, { isOpen: showDrawer, toggleDrawer: toogleDrawer, content: React.createElement("div", { className: styles$1O['mega-menu-side-container__main'] },
+        React.createElement(Drawer, { isOpen: showDrawer, toggleDrawer: toogleDrawer, content: React.createElement("div", { className: styles$1S['mega-menu-side-container__main'] },
                 React.createElement(WrappedComponent, __assign({}, wrapperProps))), title: title })));
 };
 
@@ -2770,7 +3090,7 @@ var withMegaMenuSideCards = function (WrappedComponent) {
 var Component$1T = 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$1P,
+            styles: styles$1T,
             cls: [
                 'expandable-info-popover',
                 "expandable-info-popover--".concat(toggler.size),
@@ -2778,7 +3098,7 @@ var Component$1T = function (_a) {
             ]
         }), content: React.createElement(React.Fragment, null,
             React.createElement("span", { className: CNM.get({
-                    styles: styles$1P,
+                    styles: styles$1T,
                     cls: ['expandable-info-popover__arrow', "expandable-info-popover__arrow--".concat(toggler.size)]
                 }) }),
             React.createElement(ExpandableInfoDetails, __assign({}, details))) },
@@ -2793,13 +3113,13 @@ var EXPANDABLE_INFO_TOGGLER_ICONS = {
     coin: CoinBlackOutline
 };
 
-var styles$1N = {"magneto-ui-expandable-info-toggler__container":"mg_expandable_info_toggler_magneto-ui-expandable-info-toggler_container_x381d","magneto-ui-expandable-info-toggler__container--no-details":"mg_expandable_info_toggler_magneto-ui-expandable-info-toggler_container--no-details_x381d","magneto-ui-expandable-info-toggler__container--blue":"mg_expandable_info_toggler_magneto-ui-expandable-info-toggler_container--blue_x381d","magneto-ui-expandable-info-toggler__container--white":"mg_expandable_info_toggler_magneto-ui-expandable-info-toggler_container--white_x381d","magneto-ui-expandable-info-toggler__container--small":"mg_expandable_info_toggler_magneto-ui-expandable-info-toggler_container--small_x381d","magneto-ui-expandable-info-toggler__text":"mg_expandable_info_toggler_magneto-ui-expandable-info-toggler_text_x381d","magneto-ui-expandable-info-toggler__text--blue":"mg_expandable_info_toggler_magneto-ui-expandable-info-toggler_text--blue_x381d","magneto-ui-expandable-info-toggler__text--white":"mg_expandable_info_toggler_magneto-ui-expandable-info-toggler_text--white_x381d","magneto-ui-expandable-info-toggler__text--small":"mg_expandable_info_toggler_magneto-ui-expandable-info-toggler_text--small_x381d","magneto-ui-expandable-info-toggler__summary":"mg_expandable_info_toggler_magneto-ui-expandable-info-toggler_summary_x381d","magneto-ui-expandable-info-toggler__summary--small":"mg_expandable_info_toggler_magneto-ui-expandable-info-toggler_summary--small_x381d","magneto-ui-expandable-info-toggler__summary--large":"mg_expandable_info_toggler_magneto-ui-expandable-info-toggler_summary--large_x381d"};
+var styles$1R = {"magneto-ui-expandable-info-toggler__container":"mg_expandable_info_toggler_magneto-ui-expandable-info-toggler_container_x381d","magneto-ui-expandable-info-toggler__container--no-details":"mg_expandable_info_toggler_magneto-ui-expandable-info-toggler_container--no-details_x381d","magneto-ui-expandable-info-toggler__container--blue":"mg_expandable_info_toggler_magneto-ui-expandable-info-toggler_container--blue_x381d","magneto-ui-expandable-info-toggler__container--white":"mg_expandable_info_toggler_magneto-ui-expandable-info-toggler_container--white_x381d","magneto-ui-expandable-info-toggler__container--small":"mg_expandable_info_toggler_magneto-ui-expandable-info-toggler_container--small_x381d","magneto-ui-expandable-info-toggler__text":"mg_expandable_info_toggler_magneto-ui-expandable-info-toggler_text_x381d","magneto-ui-expandable-info-toggler__text--blue":"mg_expandable_info_toggler_magneto-ui-expandable-info-toggler_text--blue_x381d","magneto-ui-expandable-info-toggler__text--white":"mg_expandable_info_toggler_magneto-ui-expandable-info-toggler_text--white_x381d","magneto-ui-expandable-info-toggler__text--small":"mg_expandable_info_toggler_magneto-ui-expandable-info-toggler_text--small_x381d","magneto-ui-expandable-info-toggler__summary":"mg_expandable_info_toggler_magneto-ui-expandable-info-toggler_summary_x381d","magneto-ui-expandable-info-toggler__summary--small":"mg_expandable_info_toggler_magneto-ui-expandable-info-toggler_summary--small_x381d","magneto-ui-expandable-info-toggler__summary--large":"mg_expandable_info_toggler_magneto-ui-expandable-info-toggler_summary--large_x381d"};
 
 var Component$1S = 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({
-            styles: styles$1N,
+            styles: styles$1R,
             cls: __spreadArray(__spreadArray([], base, true), ["".concat(base.at(0), "--").concat(variant)], false)
         });
     }, [variant]);
@@ -2831,7 +3151,7 @@ var Component$1S = function (_a) {
         prefixIcon && React.createElement(IconItem, __assign({ size: 16 }, prefixIcon, { icon: icon(prefixIcon.icon) })),
         React.createElement("span", { className: styleGenerator(['expandable-info-toggler__text']) }, title + ':'),
         React.createElement("div", { className: CNM.get({
-                styles: styles$1N,
+                styles: styles$1R,
                 cls: [
                     'expandable-info-toggler__summary',
                     (size === EExpandableInfoSize.SMALL || suffixIcon) && 'expandable-info-toggler__summary--small',
@@ -2846,7 +3166,7 @@ var Component$1S = function (_a) {
  */
 var ExpandableInfoToggler = Component$1S;
 
-var styles$1M = {"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 styles$1Q = {"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$1R = 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;
@@ -2862,9 +3182,9 @@ var Component$1R = function (_a) {
     var container = useMediaQuery(React.createElement(ExpandableInfoPopover, { details: details, toggler: togglerProps }), {
         sm: React.createElement(ExpandableInfoModal, { details: details, toggler: togglerProps })
     });
-    return (React.createElement("div", { className: CNM.get({ styles: styles$1M, cls: ['expandable-info'] }) },
+    return (React.createElement("div", { className: CNM.get({ styles: styles$1Q, cls: ['expandable-info'] }) },
         React.createElement("div", { className: CNM.get({
-                styles: styles$1M,
+                styles: styles$1Q,
                 cls: [
                     'expandable-info__container',
                     "expandable-info__container--".concat(variant),
@@ -2874,7 +3194,7 @@ var Component$1R = function (_a) {
             }) },
             container,
             size === EExpandableInfoSize.LARGE && (React.createElement(React.Fragment, null,
-                actions && (actions === null || actions === void 0 ? void 0 : actions.length) > 0 && (React.createElement("div", { className: CNM.get({ styles: styles$1M, cls: ['expandable-info__actions'] }) }, actions === null || actions === void 0 ? void 0 : actions.map(function (action) { return action && React.createElement(ExpandableInfoAction, __assign({ key: action.title }, action)); }))),
+                actions && (actions === null || actions === void 0 ? void 0 : actions.length) > 0 && (React.createElement("div", { className: CNM.get({ styles: styles$1Q, cls: ['expandable-info__actions'] }) }, actions === null || actions === void 0 ? void 0 : actions.map(function (action) { return action && React.createElement(ExpandableInfoAction, __assign({ key: action.title }, action)); }))),
                 React.createElement(ExpandableInfoMessage, __assign({ variant: variant }, message)))))));
 };
 /**
@@ -2908,7 +3228,7 @@ var FilterContainerMenu = function (_a) {
     return React.createElement("div", { className: style$N["".concat(classMUI, "-filter-container")] }, children);
 };
 
-var styles$1L = {"magneto-ui-filter-item":"mg_filter_menu_item_magneto-ui-filter-item_m5cdm","selected":"mg_filter_menu_item_selected_m5cdm","disabled":"mg_filter_menu_item_disabled_m5cdm","isSearched":"mg_filter_menu_item_isSearched_m5cdm","skeleton":"mg_filter_menu_item_skeleton_m5cdm","shimmer":"mg_filter_menu_item_shimmer_m5cdm"};
+var styles$1P = {"magneto-ui-filter-item":"mg_filter_menu_item_magneto-ui-filter-item_m5cdm","selected":"mg_filter_menu_item_selected_m5cdm","disabled":"mg_filter_menu_item_disabled_m5cdm","isSearched":"mg_filter_menu_item_isSearched_m5cdm","skeleton":"mg_filter_menu_item_skeleton_m5cdm","shimmer":"mg_filter_menu_item_shimmer_m5cdm"};
 
 var FilterMenuItem = function (_a) {
     var id = _a.id, label = _a.label, total = _a.total, field = _a.field, multiple = _a.multiple, loading = _a.loading, type = _a.type, isApplied = _a.isApplied, hasTotal = _a.hasTotal, _b = _a.isSearched, isSearched = _b === void 0 ? false : _b, customClass = _a.customClass, customId = _a.customId, _c = _a.hiddenCount, hiddenCount = _c === void 0 ? false : _c, setIsApplied = _a.setIsApplied, props = __rest(_a, ["id", "label", "total", "field", "multiple", "loading", "type", "isApplied", "hasTotal", "isSearched", "customClass", "customId", "hiddenCount", "setIsApplied"]);
@@ -2923,49 +3243,49 @@ var FilterMenuItem = function (_a) {
         return isSearched || isApplied || hiddenCount ? false : !total;
     }, [total, isApplied, isSearched, hiddenCount]);
     var className = useMemo(function () {
-        return isApplied ? styles$1L.selected : isSearched ? styles$1L.isSearched : hiddenCount ? '' : !total && styles$1L.disabled;
+        return isApplied ? styles$1P.selected : isSearched ? styles$1P.isSearched : hiddenCount ? '' : !total && styles$1P.disabled;
     }, [total, isApplied, isSearched, hiddenCount]);
     var handleClick = useCallback(function () {
         var customId = type === 'RANGE' ? { id: id, from: props.from, to: props.to } : id;
         setIsApplied({ id: customId, field: field, isApplied: isApplied, multiple: multiple });
     }, [setIsApplied, id, field, isApplied, multiple, type, props.from, props.to]);
     if (loading)
-        return React.createElement("div", { className: styles$1L.skeleton });
-    return (React.createElement("button", { id: customId, className: "".concat(styles$1L['magneto-ui-filter-item'], " ").concat(className, " ").concat(customClass ? customClass : ''), title: label, onClick: handleClick, disabled: disabled },
+        return React.createElement("div", { className: styles$1P.skeleton });
+    return (React.createElement("button", { id: customId, className: "".concat(styles$1P['magneto-ui-filter-item'], " ").concat(className, " ").concat(customClass ? customClass : ''), title: label, onClick: handleClick, disabled: disabled },
         React.createElement("span", null, label),
         displayOutput));
 };
 
-var styles$1K = {"magneto-ui-filter-search":"mg_filter_search_item_magneto-ui-filter-search_1ibtk","disabled":"mg_filter_search_item_disabled_1ibtk","skeleton":"mg_filter_search_item_skeleton_1ibtk","shimmer":"mg_filter_search_item_shimmer_1ibtk"};
+var styles$1O = {"magneto-ui-filter-search":"mg_filter_search_item_magneto-ui-filter-search_1ibtk","disabled":"mg_filter_search_item_disabled_1ibtk","skeleton":"mg_filter_search_item_skeleton_1ibtk","shimmer":"mg_filter_search_item_shimmer_1ibtk"};
 
 var FilterSearchItem = function (_a) {
     var placeholder = _a.placeholder, _b = _a.disabled, disabled = _b === void 0 ? false : _b, loading = _a.loading, handleSearch = _a.handleSearch;
     var inputRef = useRef(null);
     if (loading)
-        return (React.createElement("div", { className: styles$1K.skeleton },
+        return (React.createElement("div", { className: styles$1O.skeleton },
             React.createElement(IconItem, { icon: SearchIcon, size: 17 })));
-    return (React.createElement("div", { className: "".concat(styles$1K['magneto-ui-filter-search'], " ").concat(disabled ? styles$1K.disabled : '') },
+    return (React.createElement("div", { className: "".concat(styles$1O['magneto-ui-filter-search'], " ").concat(disabled ? styles$1O.disabled : '') },
         React.createElement(IconItem, { icon: SearchIcon, size: 17 }),
         React.createElement("input", { ref: inputRef, type: "search", placeholder: placeholder, onChange: function (event) { return handleSearch(event, inputRef); }, disabled: disabled })));
 };
 
-var styles$1J = {"fraud-card-job":"mg_fraud_card_job_fraud-card-job_136f2","fraud-card-job__header":"mg_fraud_card_job_fraud-card-job_header_136f2","fraud-card-job__text":"mg_fraud_card_job_fraud-card-job_text_136f2","fraud-card-job__link":"mg_fraud_card_job_fraud-card-job_link_136f2"};
+var styles$1N = {"fraud-card-job":"mg_fraud_card_job_fraud-card-job_136f2","fraud-card-job__header":"mg_fraud_card_job_fraud-card-job_header_136f2","fraud-card-job__text":"mg_fraud_card_job_fraud-card-job_text_136f2","fraud-card-job__link":"mg_fraud_card_job_fraud-card-job_link_136f2"};
 
 var Component$1Q = function (_a) {
     var title = _a.title, content = _a.content, linkText = _a.linkText, link = _a.link;
-    return (React.createElement("div", { className: styles$1J['fraud-card-job'] },
-        React.createElement("div", { className: styles$1J['fraud-card-job__header'] },
+    return (React.createElement("div", { className: styles$1N['fraud-card-job'] },
+        React.createElement("div", { className: styles$1N['fraud-card-job__header'] },
             React.createElement("img", { src: Warning3D, alt: "warning" }),
             React.createElement("h4", null, title)),
         React.createElement("div", null,
-            React.createElement("p", { className: styles$1J['fraud-card-job__text'] }, content),
-            React.createElement("a", { target: "_blank", rel: "noreferrer", className: styles$1J['fraud-card-job__link'], href: link },
+            React.createElement("p", { className: styles$1N['fraud-card-job__text'] }, content),
+            React.createElement("a", { target: "_blank", rel: "noreferrer", className: styles$1N['fraud-card-job__link'], href: link },
                 React.createElement("img", { src: WarningHex, alt: "warning" }),
                 linkText))));
 };
 var FraudCardJob = Component$1Q;
 
-var styles$1I = {"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 styles$1M = {"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$1P = function (_a) {
     var searchHeading = _a.searchHeading, searchList = _a.searchList, showLess = _a.showLess, showMore = _a.showMore, showFrequentSearch = _a.showFrequentSearch;
@@ -2977,17 +3297,17 @@ var Component$1P = function (_a) {
         return searchList;
     }, [searchList, showFullList]);
     var searchListResponsive = useMediaQuery(searchList, { md: searchListDinamyc });
-    return (React.createElement(React.Fragment, null, showFrequentSearch !== false ? (React.createElement("div", { className: styles$1I['magneto-ui-frequent-search'] },
-        React.createElement("h2", { className: styles$1I['magneto-ui-frequent-search__heading'] }, searchHeading),
-        React.createElement("div", { className: styles$1I['magneto-ui-frequent-search__items'] }, searchListResponsive.map(function (_a, i) {
+    return (React.createElement(React.Fragment, null, showFrequentSearch !== false ? (React.createElement("div", { className: styles$1M['magneto-ui-frequent-search'] },
+        React.createElement("h2", { className: styles$1M['magneto-ui-frequent-search__heading'] }, searchHeading),
+        React.createElement("div", { className: styles$1M['magneto-ui-frequent-search__items'] }, searchListResponsive.map(function (_a, i) {
             var props = __rest(_a, []);
             return (React.createElement(SearchItem, __assign({ key: i }, props)));
         })),
-        React.createElement("div", { className: styles$1I['magneto-ui-frequent-search__buttons-container'] }, showFullList ? (React.createElement("button", { className: styles$1I['magneto-ui-frequent-search__buttons-container--btn'], onClick: function () { return setShowFullList(false); }, title: showMore },
+        React.createElement("div", { className: styles$1M['magneto-ui-frequent-search__buttons-container'] }, showFullList ? (React.createElement("button", { className: styles$1M['magneto-ui-frequent-search__buttons-container--btn'], onClick: function () { return setShowFullList(false); }, title: showMore },
             showMore,
             " (",
             searchList.length,
-            ")")) : (React.createElement("button", { className: styles$1I['magneto-ui-frequent-search__buttons-container--btn'], onClick: function () { return setShowFullList(true); }, title: showLess }, showLess))))) : (React.createElement(Fragment, null))));
+            ")")) : (React.createElement("button", { className: styles$1M['magneto-ui-frequent-search__buttons-container--btn'], onClick: function () { return setShowFullList(true); }, title: showLess }, showLess))))) : (React.createElement(Fragment, null))));
 };
 /**
  * UI Atom component of Frequent Search
@@ -3005,35 +3325,35 @@ var Component$1O = function (_a) {
 };
 var HeaderDrawerCompany = Component$1O;
 
-var styles$1H = {"TabComponent":"mg_tab_TabComponent_zqqnn"};
+var styles$1L = {"TabComponent":"mg_tab_TabComponent_zqqnn"};
 
 var Component$1N = function (_a) {
     var children = _a.children;
-    return React.createElement("div", { className: styles$1H.TabComponent }, children);
+    return React.createElement("div", { className: styles$1L.TabComponent }, children);
 };
 /**
  * Molecule UI for Tab
  */
 var Tab = Component$1N;
 
-var styles$1G = {"TabButtonComponent":"mg_tab_button_TabButtonComponent_hysss"};
+var styles$1K = {"TabButtonComponent":"mg_tab_button_TabButtonComponent_hysss"};
 
 var Component$1M = function (_a) {
     var tabButtonLink = _a.tabButtonLink, tabButtonLinkStyles = _a.tabButtonLinkStyles, tabButtonStyles = _a.tabButtonStyles;
     var stylesValue = useMemo(function () { return toCSSVariables(tabButtonStyles); }, [tabButtonStyles]);
     var boxShadow = (tabButtonStyles || {}).boxShadow;
-    return (React.createElement("div", { className: styles$1G.TabButtonComponent, style: stylesValue, "data-box-shadow": boxShadow }, tabButtonLink && React.createElement(Link, __assign({}, tabButtonLink, { linkStyles: tabButtonLinkStyles }))));
+    return (React.createElement("div", { className: styles$1K.TabButtonComponent, style: stylesValue, "data-box-shadow": boxShadow }, tabButtonLink && React.createElement(Link, __assign({}, tabButtonLink, { linkStyles: tabButtonLinkStyles }))));
 };
 /**
  * Molecule UI component for Tab Button
  */
 var TabButton = Component$1M;
 
-var styles$1F = {"HeaderDrawerTabsComponent":"mg_header_drawer_tabs_HeaderDrawerTabsComponent_1wrvo"};
+var styles$1J = {"HeaderDrawerTabsComponent":"mg_header_drawer_tabs_HeaderDrawerTabsComponent_1wrvo"};
 
 var Component$1L = 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$1F.HeaderDrawerTabsComponent },
+    return (React.createElement("div", { className: styles$1J.HeaderDrawerTabsComponent },
         React.createElement("a", { href: homeUrl },
             React.createElement(LogoComponent, __assign({}, logoProps, { isoView: true }))),
         React.createElement(Tab, null,
@@ -3042,11 +3362,11 @@ var Component$1L = function (_a) {
 };
 var HeaderDrawerTabs = Component$1L;
 
-var styles$1E = {"HeaderTabsComponent":"mg_header_tabs_HeaderTabsComponent_yjqx4"};
+var styles$1I = {"HeaderTabsComponent":"mg_header_tabs_HeaderTabsComponent_yjqx4"};
 
 var Component$1K = 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$1E.HeaderTabsComponent, "data-add-divider": addDivider }, headerTabList.map(function (_a, index) {
+    return (React.createElement("div", { className: styles$1I.HeaderTabsComponent, "data-add-divider": addDivider }, headerTabList.map(function (_a, index) {
         var headerTabProps = __rest(_a, []);
         return (React.createElement(React.Fragment, { key: index },
             React.createElement(HeaderTab, __assign({}, headerTabProps, { isActive: Array.isArray(headerTabProps.slug)
@@ -3059,7 +3379,7 @@ var Component$1K = function (_a) {
  */
 var HeaderTabs = Component$1K;
 
-var styles$1D = {"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"};
+var styles$1H = {"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"};
 
 var Input = function (_a) {
     var _b = _a.value, value = _b === void 0 ? '' : _b, onChange = _a.onChange, _c = _a.name, name = _c === void 0 ? '' : _c, type = _a.type, placeholder = _a.placeholder, customIcon = _a.customIcon, _d = _a.hideIcon, hideIcon = _d === void 0 ? false : _d, error = _a.error, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.autoFocus, autoFocus = _f === void 0 ? false : _f, _g = _a.hasCounter, hasCounter = _g === void 0 ? false : _g, _h = _a.maxCounterValue, maxCounterValue = _h === void 0 ? 0 : _h, actionIcon = _a.actionIcon, _j = _a.actionInputIcon, actionInputIcon = _j === void 0 ? function () { return null; } : _j, props = __rest(_a, ["value", "onChange", "name", "type", "placeholder", "customIcon", "hideIcon", "error", "disabled", "autoFocus", "hasCounter", "maxCounterValue", "actionIcon", "actionInputIcon"]);
@@ -3094,26 +3414,26 @@ var Input = function (_a) {
         setInputValue(e.target.value);
     }, [onChange]);
     return (React.createElement("div", { style: { height: 'auto', width: '100%' } },
-        React.createElement("div", { className: styles$1D["".concat(classMUI, "-input")] },
+        React.createElement("div", { className: styles$1H["".concat(classMUI, "-input")] },
             React.createElement("div", null,
-                React.createElement("div", { className: styles$1D["".concat(classMUI, "-input--container")] },
+                React.createElement("div", { className: styles$1H["".concat(classMUI, "-input--container")] },
                     React.createElement("label", { htmlFor: name, style: {
                             left: hideIcon ? '10px' : '40px',
                             top: haveValueOrFocus ? '30%' : '45%',
                             fontSize: haveValueOrFocus ? '12px' : '14px'
-                        }, className: styles$1D["".concat(classMUI, "-input--container__label")] }, placeholder),
+                        }, className: styles$1H["".concat(classMUI, "-input--container__label")] }, placeholder),
                     React.createElement("input", __assign({}, props, { style: {
                             padding: hideIcon ? '0px 10px' : '0px 40px'
-                        }, disabled: disabled, className: styles$1D["".concat(classMUI, "-input--container__input")], type: type, name: name, value: value, onChange: handleChange, onFocus: function () { return setOnFocus(true); }, onBlur: function () { return setOnFocus(false); }, id: name, autoComplete: "off" })),
-                    hideIcon ? null : (React.createElement("img", { className: styles$1D["".concat(classMUI, "-input--container__icon")], src: customIcon ? customIcon : dinamyIcon[type] || DocumentTextGray })),
-                    actionIcon ? (React.createElement("button", { type: "button", onClick: actionInputIcon, className: styles$1D["".concat(classMUI, "-input--container__icon-action")] },
+                        }, disabled: disabled, className: styles$1H["".concat(classMUI, "-input--container__input")], type: type, name: name, value: value, onChange: handleChange, onFocus: function () { return setOnFocus(true); }, onBlur: function () { return setOnFocus(false); }, id: name, autoComplete: "off" })),
+                    hideIcon ? null : (React.createElement("img", { className: styles$1H["".concat(classMUI, "-input--container__icon")], src: customIcon ? customIcon : dinamyIcon[type] || DocumentTextGray })),
+                    actionIcon ? (React.createElement("button", { type: "button", onClick: actionInputIcon, className: styles$1H["".concat(classMUI, "-input--container__icon-action")] },
                         React.createElement("img", { "data-name": "icon", src: actionIcon }))) : null))),
-        React.createElement("div", { className: "".concat(styles$1D["".concat(classMUI, "-input__footer")], " ").concat(!error && hasCounter ? styles$1D['footer-without-error'] : '') },
-            error && (React.createElement("span", { style: { width: hasCounter ? '80%' : '100%' }, className: styles$1D["".concat(classMUI, "-input--container__error")] }, error)),
+        React.createElement("div", { className: "".concat(styles$1H["".concat(classMUI, "-input__footer")], " ").concat(!error && hasCounter ? styles$1H['footer-without-error'] : '') },
+            error && (React.createElement("span", { style: { width: hasCounter ? '80%' : '100%' }, className: styles$1H["".concat(classMUI, "-input--container__error")] }, error)),
             hasCounter && React.createElement(ComparativeCounter, { current: inputValue.length, max: maxCounterValue }))));
 };
 
-var styles$1C = {"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"};
+var styles$1G = {"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"};
 
 var InputPlus = function (_a) {
     var onChange = _a.onChange, placeholder = _a.placeholder, _b = _a.maxWords, maxWords = _b === void 0 ? 4 : _b, disabled = _a.disabled, isLoading = _a.isLoading, _c = _a.className, className = _c === void 0 ? '' : _c, getValue = _a.getValue;
@@ -3157,23 +3477,23 @@ var InputPlus = function (_a) {
             }
         }
     }, [disabledBtn, handleSubmmit]);
-    return (React.createElement("div", { className: "".concat(styles$1C["".concat(classMUI, "-input-plus")], " ").concat(className) },
+    return (React.createElement("div", { className: "".concat(styles$1G["".concat(classMUI, "-input-plus")], " ").concat(className) },
         React.createElement("input", { onKeyDown: handleKeyDown, placeholder: placeholder, value: inputValue, onChange: handleValue, type: "text" }),
-        React.createElement("button", { type: "button", onClick: handleSubmmit, className: "".concat(styles$1C["".concat(classMUI, "-input-plus__plus-button")], " ").concat(disabledBtn ? styles$1C.disabled : ''), disabled: disabledBtn }, isLoading ? (React.createElement(FlatLoader, { color: "white", secondColor: "transparent" })) : (React.createElement("img", { className: "".concat(disabledBtn ? styles$1C['disabled-img'] : ''), src: Add2, alt: "icon" })))));
+        React.createElement("button", { type: "button", onClick: handleSubmmit, className: "".concat(styles$1G["".concat(classMUI, "-input-plus__plus-button")], " ").concat(disabledBtn ? styles$1G.disabled : ''), disabled: disabledBtn }, isLoading ? (React.createElement(FlatLoader, { color: "white", secondColor: "transparent" })) : (React.createElement("img", { className: "".concat(disabledBtn ? styles$1G['disabled-img'] : ''), src: Add2, alt: "icon" })))));
 };
 
-var styles$1B = {"magneto-ui-job-actions":"mg_job_actions_magneto-ui-job-actions_1awr3","magneto-ui-job-actions__button-wrapper":"mg_job_actions_magneto-ui-job-actions_button-wrapper_1awr3","magneto-ui-job-actions__buttons-wrapper":"mg_job_actions_magneto-ui-job-actions_buttons-wrapper_1awr3","magneto-ui-job-actions__icon-wrapper":"mg_job_actions_magneto-ui-job-actions_icon-wrapper_1awr3","magneto-ui-job-actions__icon-anchor":"mg_job_actions_magneto-ui-job-actions_icon-anchor_1awr3","magneto-ui__external-child":"mg_job_actions_magneto-ui_external-child_1awr3"};
+var styles$1F = {"magneto-ui-job-actions":"mg_job_actions_magneto-ui-job-actions_1awr3","magneto-ui-job-actions__button-wrapper":"mg_job_actions_magneto-ui-job-actions_button-wrapper_1awr3","magneto-ui-job-actions__buttons-wrapper":"mg_job_actions_magneto-ui-job-actions_buttons-wrapper_1awr3","magneto-ui-job-actions__icon-wrapper":"mg_job_actions_magneto-ui-job-actions_icon-wrapper_1awr3","magneto-ui-job-actions__icon-anchor":"mg_job_actions_magneto-ui-job-actions_icon-anchor_1awr3","magneto-ui__external-child":"mg_job_actions_magneto-ui_external-child_1awr3"};
 
 var style$L = {"popover":"mg_share_popover_popover_3xlr8","popover--hidden":"mg_share_popover_popover--hidden_3xlr8","popover__btn":"mg_share_popover_popover_btn_3xlr8","content":"mg_share_popover_content_3xlr8","content__link":"mg_share_popover_content_link_3xlr8","content__share":"mg_share_popover_content_share_3xlr8"};
 
-var styles$1A = {"tooltip-container":"mg_tooltip_tooltip-container_6uf1v","tooltip":"mg_tooltip_tooltip_6uf1v","tooltip-text":"mg_tooltip_tooltip-text_6uf1v","tooltip-top":"mg_tooltip_tooltip-top_6uf1v","tooltip-bottom":"mg_tooltip_tooltip-bottom_6uf1v","tooltip-left":"mg_tooltip_tooltip-left_6uf1v","tooltip-right":"mg_tooltip_tooltip-right_6uf1v"};
+var styles$1E = {"tooltip-container":"mg_tooltip_tooltip-container_6uf1v","tooltip":"mg_tooltip_tooltip_6uf1v","tooltip-text":"mg_tooltip_tooltip-text_6uf1v","tooltip-top":"mg_tooltip_tooltip-top_6uf1v","tooltip-bottom":"mg_tooltip_tooltip-bottom_6uf1v","tooltip-left":"mg_tooltip_tooltip-left_6uf1v","tooltip-right":"mg_tooltip_tooltip-right_6uf1v"};
 
 var Tooltip = function (_a) {
     var title = _a.title, _b = _a.position, position = _b === void 0 ? 'top' : _b, children = _a.children, _c = _a.width, width = _c === void 0 ? '10rem' : _c, _d = _a.visible, visible = _d === void 0 ? true : _d;
-    return (React.createElement("div", { className: "".concat(styles$1A['tooltip-container'], " ").concat(styles$1A["tooltip-".concat(position)]) },
-        React.createElement("div", { className: "".concat(styles$1A['tooltip'], " ").concat(styles$1A["tooltip-".concat(position)]) },
+    return (React.createElement("div", { className: "".concat(styles$1E['tooltip-container'], " ").concat(styles$1E["tooltip-".concat(position)]) },
+        React.createElement("div", { className: "".concat(styles$1E['tooltip'], " ").concat(styles$1E["tooltip-".concat(position)]) },
             children,
-            visible && (React.createElement("span", { className: "".concat(styles$1A['tooltip-text'], " ").concat(styles$1A["tooltip-text-".concat(position)]), style: { width: width } }, title)))));
+            visible && (React.createElement("span", { className: "".concat(styles$1E['tooltip-text'], " ").concat(styles$1E["tooltip-text-".concat(position)]), style: { width: width } }, title)))));
 };
 
 var Component$1J = function (_a) {
@@ -3208,20 +3528,20 @@ var Component$1I = function (_a) {
     var isMobile = useMediaQuery(true, { md: false });
     var ActionLink = function (_a) {
         var url = _a.url, title = _a.title, icon = _a.icon;
-        var iconContent = (React.createElement("a", { className: styles$1B['magneto-ui-job-actions__icon-anchor'], href: url, target: "_blank", rel: "noreferrer" },
+        var iconContent = (React.createElement("a", { className: styles$1F['magneto-ui-job-actions__icon-anchor'], href: url, target: "_blank", rel: "noreferrer" },
             React.createElement(IconItem, { hover: true, size: 20, icon: icon })));
         return (React.createElement(Tooltip, { title: title, position: "bottom", visible: isMobile }, iconContent));
     };
     var filteredActionsLinkList = actionsLinkList === null || actionsLinkList === void 0 ? void 0 : actionsLinkList.filter(function (item) { return item.url !== null && item.url !== undefined; });
-    return (React.createElement("div", { className: styles$1B['magneto-ui-job-actions'] },
-        !isApplied && React.createElement("div", { id: styles$1B['magneto-ui__external-child'] }, externalButtonChild),
-        React.createElement("div", { className: styles$1B['magneto-ui-job-actions__buttons-wrapper'] },
+    return (React.createElement("div", { className: styles$1F['magneto-ui-job-actions'] },
+        !isApplied && React.createElement("div", { id: styles$1F['magneto-ui__external-child'] }, externalButtonChild),
+        React.createElement("div", { className: styles$1F['magneto-ui-job-actions__buttons-wrapper'] },
             !isApplied && (React.createElement(Tooltip, { title: saveButtonProps.buttonTitle || 'Guardar', position: "bottom", visible: isMobile },
                 React.createElement(SaveButton, __assign({}, saveButtonProps)))),
             React.createElement(SharePopover, __assign({}, shareButtonProps)), filteredActionsLinkList === null || filteredActionsLinkList === void 0 ? void 0 :
             filteredActionsLinkList.map(function (_a) {
                 var url = _a.url, title = _a.title, icon = _a.icon;
-                return (React.createElement("div", { className: styles$1B['magneto-ui-job-actions__icon-wrapper'], key: "".concat(url, "-JobActions") },
+                return (React.createElement("div", { className: styles$1F['magneto-ui-job-actions__icon-wrapper'], key: "".concat(url, "-JobActions") },
                     React.createElement(ActionLink, { url: url, title: title, icon: icon })));
             }))));
 };
@@ -3230,13 +3550,13 @@ var Component$1I = function (_a) {
  */
 var JobActions = Component$1I;
 
-var styles$1z = {"magneto-ui-job-apply-card":"mg_job_apply_card_magneto-ui-job-apply-card_16e1d","magneto-ui-job-apply-card__wrapper":"mg_job_apply_card_magneto-ui-job-apply-card_wrapper_16e1d","magneto-ui-job-apply-card__header":"mg_job_apply_card_magneto-ui-job-apply-card_header_16e1d","magneto-ui-job-apply-card__requirements":"mg_job_apply_card_magneto-ui-job-apply-card_requirements_16e1d","magneto-ui__external-child":"mg_job_apply_card_magneto-ui_external-child_16e1d"};
+var styles$1D = {"magneto-ui-job-apply-card":"mg_job_apply_card_magneto-ui-job-apply-card_16e1d","magneto-ui-job-apply-card__wrapper":"mg_job_apply_card_magneto-ui-job-apply-card_wrapper_16e1d","magneto-ui-job-apply-card__header":"mg_job_apply_card_magneto-ui-job-apply-card_header_16e1d","magneto-ui-job-apply-card__requirements":"mg_job_apply_card_magneto-ui-job-apply-card_requirements_16e1d","magneto-ui__external-child":"mg_job_apply_card_magneto-ui_external-child_16e1d"};
 
 var Component$1H = function (_a) {
     var offerApplyHeader = _a.offerApplyHeader, offerApplyElements = _a.offerApplyElements, externalChild = _a.externalChild, isApplied = _a.isApplied;
-    return (React.createElement("div", { className: styles$1z['magneto-ui-job-apply-card'] },
-        React.createElement("div", { className: styles$1z['magneto-ui-job-apply-card__wrapper'] },
-            React.createElement("div", { className: styles$1z['magneto-ui-job-apply-card__header'] },
+    return (React.createElement("div", { className: styles$1D['magneto-ui-job-apply-card'] },
+        React.createElement("div", { className: styles$1D['magneto-ui-job-apply-card__wrapper'] },
+            React.createElement("div", { className: styles$1D['magneto-ui-job-apply-card__header'] },
                 React.createElement("p", null, offerApplyHeader),
                 (offerApplyElements === null || offerApplyElements === void 0 ? void 0 : offerApplyElements.length) &&
                     offerApplyElements
@@ -3246,49 +3566,238 @@ var Component$1H = function (_a) {
                     })
                         .map(function (_a) {
                         var offerApplyLabel = _a.offerApplyLabel, offerApplyInfo = _a.offerApplyInfo;
-                        return (React.createElement("div", { className: styles$1z['magneto-ui-job-apply-card__requirements'], key: "".concat(offerApplyLabel, "-JobApplyCard") },
+                        return (React.createElement("div", { className: styles$1D['magneto-ui-job-apply-card__requirements'], key: "".concat(offerApplyLabel, "-JobApplyCard") },
                             React.createElement("p", null, offerApplyLabel),
                             React.createElement("p", null, offerApplyInfo)));
                     })),
-            !isApplied && React.createElement("div", { id: styles$1z['magneto-ui__external-child'] }, externalChild))));
+            !isApplied && React.createElement("div", { id: styles$1D['magneto-ui__external-child'] }, externalChild))));
 };
 /**
  * UI Molecule Component for Job Apply Card
  */
 var JobApplyCard = Component$1H;
 
-var style$K = {"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"};
+var styles$1C = {"option":"mg_vacant_option_mobile_option_10cgk","option--link":"mg_vacant_option_mobile_option--link_10cgk","option--button":"mg_vacant_option_mobile_option--button_10cgk","icon--big":"mg_vacant_option_mobile_icon--big_10cgk"};
+
+var cx$R = classNames.bind(styles$1C);
+var VacantOptionMobile = function (_a) {
+    var option = _a.option, onClick = _a.onClick, onMenu = _a.onMenu;
+    var handleClick = function () {
+        var _a;
+        if (option.type === 'button') {
+            (_a = option.onClick) === null || _a === void 0 ? void 0 : _a.call(option);
+            onClick === null || onClick === void 0 ? void 0 : onClick();
+        }
+        if (option.type === 'menu') {
+            onMenu === null || onMenu === void 0 ? void 0 : onMenu(option.children);
+        }
+    };
+    var icon = ShareIcons[option.icon]
+        ? ShareIcons[option.icon].icon
+        : option.icon;
+    if (option.type === 'link') {
+        return (React.createElement("a", { href: option.href, target: "_blank", rel: "noopener noreferrer", className: cx$R('option', 'option--link', option.className) },
+            option.icon ? React.createElement(IconItem, { size: 18, icon: icon }) : null,
+            " ",
+            option.label));
+    }
+    if (option.type === 'button' || option.type === 'menu') {
+        return (React.createElement("button", { className: cx$R('option', 'option--button', option.className), onClick: handleClick, type: "button" },
+            option.icon ? React.createElement(IconItem, { size: 18, icon: icon }) : null,
+            " ",
+            option.label));
+    }
+    return React.createElement(React.Fragment, null);
+};
+
+var styles$1B = {"button":"mg_job_card_option_drawer_button_1b6xo","button-back":"mg_job_card_option_drawer_button-back_1b6xo","drawer":"mg_job_card_option_drawer_drawer_1b6xo","drawer__title":"mg_job_card_option_drawer_drawer_title_1b6xo","drawer__company":"mg_job_card_option_drawer_drawer_company_1b6xo","drawer__header":"mg_job_card_option_drawer_drawer_header_1b6xo"};
+
+var cx$Q = classNames.bind(styles$1B);
+var JobCardOptionDrawer = function (_a) {
+    var title = _a.title, company = _a.company, menu = _a.menu, backText = _a.backText;
+    var _b = useState(false), isOpen = _b[0], setOpen = _b[1];
+    var _c = useState(false), showBack = _c[0], setShowBack = _c[1];
+    var _d = useState(menu), options = _d[0], setOptions = _d[1];
+    var toggle = function () { return setOpen(function (prev) { return !prev; }); };
+    var handleMenu = useCallback(function (options, showBack) {
+        if (showBack === void 0) { showBack = true; }
+        setOptions(options);
+        setShowBack(showBack);
+    }, []);
+    useEffect(function () {
+        var _a;
+        var onBlurWindow = function () {
+            setOpen(false);
+            handleMenu(menu, false);
+        };
+        (_a = window === null || window === void 0 ? void 0 : window.addEventListener) === null || _a === void 0 ? void 0 : _a.call(window, 'blur', onBlurWindow);
+        return function () {
+            var _a;
+            (_a = window === null || window === void 0 ? void 0 : window.removeEventListener) === null || _a === void 0 ? void 0 : _a.call(window, 'blur', onBlurWindow);
+        };
+    }, [handleMenu, menu]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("button", { onClick: toggle, className: cx$Q('button'), type: "button" },
+            React.createElement(IconItem, { icon: More, size: 18 })),
+        React.createElement(MobileDrawer, { className: cx$Q('drawer'), isOpen: isOpen, onClose: toggle },
+            React.createElement("header", { className: cx$Q('drawer__header') },
+                showBack ? (React.createElement("section", null,
+                    React.createElement("button", { type: "button", className: cx$Q('button-back'), onClick: function () { return handleMenu(menu, false); } },
+                        React.createElement(IconItem, { icon: ArrowLeft2, size: 20 }),
+                        " ",
+                        backText))) : null,
+                React.createElement("h4", { className: cx$Q('drawer__title') }, title),
+                React.createElement("h5", { className: cx$Q('drawer__company') }, company)),
+            React.createElement("div", null, options.map(function (option, index) { return (React.createElement(VacantOptionMobile, { key: index + option.label, option: option, onMenu: handleMenu, onClick: function () {
+                    toggle();
+                    handleMenu(menu, false);
+                } })); })))));
+};
+
+var styles$1A = {"option":"mg_vacant_option_option_14jrn","option--link":"mg_vacant_option_option--link_14jrn","option--menu":"mg_vacant_option_option--menu_14jrn","option--menu-open":"mg_vacant_option_option--menu-open_14jrn","option__menu-list":"mg_vacant_option_option_menu-list_14jrn","option--button":"mg_vacant_option_option--button_14jrn","icon--big":"mg_vacant_option_icon--big_14jrn"};
+
+var cx$P = classNames.bind(styles$1A);
+var VacantOption = function (_a) {
+    var option = _a.option, onClick = _a.onClick;
+    var _b = useState(false), open = _b[0], setOpen = _b[1];
+    var handleClick = function () {
+        var _a;
+        if (option.type === 'button') {
+            (_a = option.onClick) === null || _a === void 0 ? void 0 : _a.call(option);
+        }
+        onClick === null || onClick === void 0 ? void 0 : onClick();
+    };
+    var icon = ShareIcons[option.icon]
+        ? ShareIcons[option.icon].icon
+        : option.icon;
+    if (option.type === 'menu') {
+        return (React.createElement(MenuDropdown, { title: option.label, opened: open, onClick: setOpen, prefixIcon: { icon: icon, size: 18 }, suffixIcon: { icon: ArrowDown2 }, className: cx$P('option', 'option--menu', { 'option--menu-open': open }, option.className), listClassName: cx$P('option__menu-list') }, option.children.map(function (child) { return (React.createElement(VacantOption, { onClick: handleClick, key: child.label, option: child })); })));
+    }
+    if (option.type === 'link') {
+        return (React.createElement("a", { href: option.href, target: "_blank", rel: "noopener noreferrer", className: cx$P('option', 'option--link', option.className) },
+            option.icon ? React.createElement(IconItem, { size: 18, icon: icon }) : null,
+            " ",
+            option.label));
+    }
+    if (option.type === 'button') {
+        return (React.createElement("button", { className: cx$P('option', 'option--button', option.className), onClick: handleClick, type: "button" },
+            option.icon ? React.createElement(IconItem, { size: 18, icon: icon }) : null,
+            " ",
+            option.label));
+    }
+    return React.createElement(React.Fragment, null);
+};
+
+var styles$1z = {"popover--open":"mg_job_card_option_popover--open_12kph","popover":"mg_job_card_option_popover_12kph","button":"mg_job_card_option_button_12kph"};
+
+var cx$O = classNames.bind(styles$1z);
+var JobCardOption = function (_a) {
+    var _b = _a.clickOut, clickOut = _b === void 0 ? false : _b, _c = _a.setClickOut, setClickOut = _c === void 0 ? stubUndefined : _c, menu = _a.menu;
+    var ref = useRef(null);
+    var toggle = function () { return setClickOut(function (prev) { return !prev; }); };
+    useEffect(function () {
+        var _a;
+        var onBlurWindow = function () {
+            setClickOut(false);
+        };
+        (_a = window === null || window === void 0 ? void 0 : window.addEventListener) === null || _a === void 0 ? void 0 : _a.call(window, 'blur', onBlurWindow);
+        return function () {
+            var _a;
+            (_a = window === null || window === void 0 ? void 0 : window.removeEventListener) === null || _a === void 0 ? void 0 : _a.call(window, 'blur', onBlurWindow);
+        };
+    }, [setClickOut]);
+    return (React.createElement(Popover, { className: cx$O('popover', { 'popover--open': clickOut }), content: React.createElement("div", { onBlur: toggle, ref: ref }, menu.map(function (option) { return (React.createElement(VacantOption, { key: option.label, onClick: toggle, option: option })); })), show: clickOut, widthBase: 35, positionX: "left", positionY: "bottom" },
+        React.createElement("button", { type: "button", className: cx$O('button'), onClick: function () {
+                setClickOut(function (prev) {
+                    var _a;
+                    if (!prev) {
+                        (_a = ref.current) === null || _a === void 0 ? void 0 : _a.focus();
+                    }
+                    return !prev;
+                });
+            } },
+            React.createElement(IconItem, { icon: More, size: 18 }))));
+};
+var JobCardOption$1 = withClickOut(JobCardOption);
+
+var style$K = {"magneto-ui-card-jobs":"mg_job_card_desktop_magneto-ui-card-jobs_1sr9b","magneto-ui-card-jobs--urgent":"mg_job_card_desktop_magneto-ui-card-jobs--urgent_1sr9b","magneto-ui-card-jobs__container":"mg_job_card_desktop_magneto-ui-card-jobs_container_1sr9b","magneto-ui-card-jobs--job-open":"mg_job_card_desktop_magneto-ui-card-jobs--job-open_1sr9b","magneto-ui-card-jobs__render-right":"mg_job_card_desktop_magneto-ui-card-jobs_render-right_1sr9b","magneto-ui-card-jobs__options":"mg_job_card_desktop_magneto-ui-card-jobs_options_1sr9b","magneto-ui-card-jobs__data":"mg_job_card_desktop_magneto-ui-card-jobs_data_1sr9b","magneto-ui-card-jobs__button":"mg_job_card_desktop_magneto-ui-card-jobs_button_1sr9b","magneto-ui-card-jobs__white-space":"mg_job_card_desktop_magneto-ui-card-jobs_white-space_1sr9b","magneto-ui-card-jobs__header":"mg_job_card_desktop_magneto-ui-card-jobs_header_1sr9b","magneto-ui-card-jobs__arrow":"mg_job_card_desktop_magneto-ui-card-jobs_arrow_1sr9b","magneto-ui-card-jobs__text":"mg_job_card_desktop_magneto-ui-card-jobs_text_1sr9b","magneto-ui-card-jobs__text--bold":"mg_job_card_desktop_magneto-ui-card-jobs_text--bold_1sr9b","magneto-ui-card-jobs__text--big":"mg_job_card_desktop_magneto-ui-card-jobs_text--big_1sr9b","magneto-ui-card-jobs__text--small":"mg_job_card_desktop_magneto-ui-card-jobs_text--small_1sr9b","magneto-ui-card-jobs__published":"mg_job_card_desktop_magneto-ui-card-jobs_published_1sr9b","magneto-ui-card-jobs__urgent":"mg_job_card_desktop_magneto-ui-card-jobs_urgent_1sr9b","magneto-ui-card-jobs__urgent-icon":"mg_job_card_desktop_magneto-ui-card-jobs_urgent-icon_1sr9b","magneto-ui-card-jobs__a":"mg_job_card_desktop_magneto-ui-card-jobs_a_1sr9b","magneto-ui-card-jobs__company":"mg_job_card_desktop_magneto-ui-card-jobs_company_1sr9b","magneto-ui-card-jobs__brand":"mg_job_card_desktop_magneto-ui-card-jobs_brand_1sr9b","magneto-ui-card-jobs__brand-img":"mg_job_card_desktop_magneto-ui-card-jobs_brand-img_1sr9b"};
+
+var useWithElement = function (ref) {
+    var _a = useState(null), width = _a[0], setWidth = _a[1];
+    useEffect(function () {
+        if (!ref.current)
+            return;
+        var observer = new ResizeObserver(function (_a) {
+            var entry = _a[0];
+            setWidth(entry.contentRect.width);
+        });
+        observer.observe(ref.current);
+        return function () { return observer.disconnect(); };
+    }, [ref]);
+    return width;
+};
 
+var cx$N = classNames.bind(style$K);
+var getJobSubtitle = function (companyName) {
+    var args = [];
+    for (var _i = 1; _i < arguments.length; _i++) {
+        args[_i - 1] = arguments[_i];
+    }
+    var additionalData = args.filter(function (arg) { return arg !== undefined; }).join(', ');
+    if (companyName)
+        return "".concat(companyName, " | ").concat(additionalData);
+    return additionalData;
+};
 var JobCardDesktop = function (_a) {
-    var _b = _a.isCompanyPage, isCompanyPage = _b === void 0 ? false : _b, workSeen = _a.workSeen, jobOpen = _a.jobOpen, _c = _a.cities, cities = _c === void 0 ? [] : _c, salary = _a.salary, companyName = _a.companyName, title = _a.title, educationLevel = _a.educationLevel, formatPublishDate = _a.formatPublishDate, companyLogo = _a.companyLogo, companySlug = _a.companySlug, experience = _a.experience, contractType = _a.contractType, showDetail = _a.showDetail, urgent = _a.urgent, _d = _a.others, others = _d === void 0 ? '' : _d, jobSlug = _a.jobSlug, dynamicUrl = _a.dynamicUrl;
+    var _b = _a.isCompanyPage, isCompanyPage = _b === void 0 ? false : _b, jobOpen = _a.jobOpen, _c = _a.cities, cities = _c === void 0 ? [] : _c, salary = _a.salary, companyName = _a.companyName, title = _a.title, formatPublishDate = _a.formatPublishDate, companyLogo = _a.companyLogo, companySlug = _a.companySlug, contractType = _a.contractType, showDetail = _a.showDetail, urgent = _a.urgent, jobSlug = _a.jobSlug, dynamicUrl = _a.dynamicUrl, renderRight = _a.renderRight;
+    var optionsRef = useRef(null);
+    var width = useWithElement(optionsRef);
     var citiesformatted = useMemo(function () {
         if ((cities === null || cities === void 0 ? void 0 : cities.length) > 5) {
             return cities === null || cities === void 0 ? void 0 : cities.slice(0, 5).join(', ');
         }
         return cities === null || cities === void 0 ? void 0 : cities.join(', ');
     }, [cities]);
-    var infoRow4 = [contractType, salary, experience, educationLevel].join(' ');
-    return (React.createElement("article", { onClick: showDetail, className: "".concat(style$K["".concat(classMUI, "-card-jobs")], " ").concat(workSeen ? style$K[workSeen] : '', " ").concat(jobOpen ? style$K[jobOpen] : '') },
-        !isCompanyPage && (React.createElement("div", { className: style$K["".concat(classMUI, "-card-jobs--row1")] },
-            React.createElement("div", { className: style$K["".concat(classMUI, "-card-jobs--brand")] },
-                React.createElement("img", { className: style$K["".concat(classMUI, "-card-jobs--brand__img")], alt: companySlug ? companySlug : 'company-slug', src: companyLogo ? companyLogo : NoLogo, loading: "lazy", width: '67px', height: '67px' })))),
-        React.createElement("div", { className: style$K["".concat(classMUI, "-card-jobs--data")] },
-            React.createElement("div", { className: style$K["".concat(classMUI, "-card-jobs--row2")] },
-                React.createElement("a", { href: "".concat(dynamicUrl, "/").concat(jobSlug), title: title, target: "_blank", rel: "noreferrer", onClick: function (e) { return e.preventDefault(); } },
-                    React.createElement("h2", { className: "".concat(style$K["".concat(classMUI, "-card-jobs--row2__position")], " ").concat(workSeen) }, title)),
-                React.createElement("h3", null, companyName),
-                React.createElement("p", null, formatPublishDate),
-                urgent && (React.createElement("div", { className: style$K["".concat(classMUI, "-card-jobs--row2__urgent")] },
-                    React.createElement(IconItem, { alt: 'alt', icon: Urgent, hover: false, size: 18 }),
-                    React.createElement("p", null, urgent)))),
-            React.createElement("div", { className: style$K["".concat(classMUI, "-card-jobs--row3")] },
-                React.createElement("p", null,
-                    citiesformatted,
-                    (cities === null || cities === void 0 ? void 0 : cities.length) > 5 && ', ' + others)),
-            React.createElement("div", { className: style$K["".concat(classMUI, "-card-jobs--row4")] },
-                React.createElement("p", null, infoRow4))),
-        React.createElement("div", { className: style$K["".concat(classMUI, "-card-jobs--arrow")] },
-            React.createElement(IconItem, { icon: ArrowRight2 }))));
+    return (React.createElement("div", { className: cx$N("".concat(classMUI, "-card-jobs__container"), jobOpen && "".concat(classMUI, "-card-jobs--job-open")) },
+        React.createElement("article", { onClick: showDetail, className: cx$N("".concat(classMUI, "-card-jobs"), urgent && "".concat(classMUI, "-card-jobs--urgent")) },
+            !isCompanyPage && (React.createElement("div", { className: cx$N("".concat(classMUI, "-card-jobs__brand")) },
+                React.createElement("div", null,
+                    React.createElement("img", { className: cx$N("".concat(classMUI, "-card-jobs__brand-img")), alt: companySlug ? companySlug : 'company-slug', src: companyLogo ? companyLogo : NoLogo, loading: "lazy", width: '67px', height: '67px' })))),
+            React.createElement("div", { className: cx$N("".concat(classMUI, "-card-jobs__data")) },
+                React.createElement("section", { className: cx$N("".concat(classMUI, "-card-jobs__header")) },
+                    React.createElement("span", { className: cx$N("".concat(classMUI, "-card-jobs__text"), "".concat(classMUI, "-card-jobs__published")) }, formatPublishDate),
+                    React.createElement("section", { ref: optionsRef, className: cx$N("".concat(classMUI, "-card-jobs__options"), 'opciones') })),
+                React.createElement("h2", { className: cx$N("".concat(classMUI, "-card-jobs__text"), "".concat(classMUI, "-card-jobs__text--big"), "".concat(classMUI, "-card-jobs__text--bold")) },
+                    React.createElement("a", { href: "".concat(dynamicUrl, "/").concat(jobSlug), title: title, target: "_blank", rel: "noreferrer", onClick: function (e) { return e.preventDefault(); }, className: cx$N("".concat(classMUI, "-card-jobs__a")) }, title)),
+                React.createElement("h3", { className: cx$N("".concat(classMUI, "-card-jobs__text")) }, getJobSubtitle(companyName, contractType)),
+                React.createElement("p", { className: cx$N("".concat(classMUI, "-card-jobs__text")) }, salary),
+                React.createElement("p", { className: cx$N("".concat(classMUI, "-card-jobs__text")) }, citiesformatted))),
+        React.createElement("div", { style: { width: width || 300 }, className: cx$N("".concat(classMUI, "-card-jobs__render-right")) },
+            React.createElement("div", { className: cx$N("".concat(classMUI, "-card-jobs__white-space")), onClick: function () { return showDetail === null || showDetail === void 0 ? void 0 : showDetail(); } }, urgent ? (React.createElement("span", { className: cx$N("".concat(classMUI, "-card-jobs__urgent"), "".concat(classMUI, "-card-jobs__text--small")) },
+                React.createElement(IconItem, { className: cx$N("".concat(classMUI, "-card-jobs__urgent-icon")), icon: Urgent, size: 14 }),
+                " ",
+                urgent)) : null),
+            renderRight ? renderRight() : null,
+            React.createElement("button", { className: cx$N("".concat(classMUI, "-card-jobs__button")), onClick: function () { return showDetail === null || showDetail === void 0 ? void 0 : showDetail(); } },
+                React.createElement(IconItem, { icon: ArrowLeft2, size: 16, className: cx$N("".concat(classMUI, "-card-jobs__arrow")) })))));
+};
+
+var JobCard = function (_a) {
+    var _b = _a.wasSeen, wasSeen = _b === void 0 ? false : _b, _c = _a.isActive, isActive = _c === void 0 ? false : _c, props = __rest(_a, ["wasSeen", "isActive"]);
+    var _d = useMemo(function () {
+        var workSeen = wasSeen ? 'was-seen' : '';
+        var jobOpen = isActive ? 'is-active' : '';
+        return { workSeen: workSeen, jobOpen: jobOpen };
+    }, [wasSeen, isActive]), workSeen = _d.workSeen, jobOpen = _d.jobOpen;
+    var cardProps = __assign({ workSeen: workSeen, jobOpen: jobOpen }, props);
+    var device = useMediaQuery('desktop', { md: 'mobile' });
+    if (device === 'mobile') {
+        return (React.createElement(JobCardDesktop, __assign({ renderRight: function () {
+                var _a;
+                return (React.createElement(JobCardOptionDrawer, { backText: cardProps.backText, menu: (_a = cardProps.menu) !== null && _a !== void 0 ? _a : [], title: cardProps.title, company: cardProps.companyName }));
+            } }, cardProps)));
+    }
+    return React.createElement(JobCardDesktop, __assign({ renderRight: function () { var _a; return React.createElement(JobCardOption$1, { menu: (_a = cardProps.menu) !== null && _a !== void 0 ? _a : [] }); } }, cardProps));
 };
 
 var style$J = {"magneto-ui-card-mobile-jobs":"mg_job_card_mobile_magneto-ui-card-mobile-jobs_18tcb","magneto-ui-card-mobile-jobs--data":"mg_job_card_mobile_magneto-ui-card-mobile-jobs--data_18tcb","magneto-ui-card-mobile-jobs--row1":"mg_job_card_mobile_magneto-ui-card-mobile-jobs--row1_18tcb","magneto-ui-card-mobile-jobs--row2":"mg_job_card_mobile_magneto-ui-card-mobile-jobs--row2_18tcb","magneto-ui-card-mobile-jobs--row2__position":"mg_job_card_mobile_magneto-ui-card-mobile-jobs--row2_position_18tcb","magneto-ui-card-mobile-jobs--row2__info":"mg_job_card_mobile_magneto-ui-card-mobile-jobs--row2_info_18tcb","magneto-ui-card-mobile-jobs--brand":"mg_job_card_mobile_magneto-ui-card-mobile-jobs--brand_18tcb","magneto-ui-card-mobile-jobs--brand__img":"mg_job_card_mobile_magneto-ui-card-mobile-jobs--brand_img_18tcb"};
@@ -3325,20 +3834,6 @@ var JobCardMobile = function (_a) {
                     React.createElement("p", null, educationLevel))))));
 };
 
-var JobCard = function (_a) {
-    var _b = _a.wasSeen, wasSeen = _b === void 0 ? false : _b, _c = _a.isActive, isActive = _c === void 0 ? false : _c, props = __rest(_a, ["wasSeen", "isActive"]);
-    var _d = useMemo(function () {
-        var workSeen = wasSeen ? 'was-seen' : '';
-        var jobOpen = isActive ? 'is-active' : '';
-        return { workSeen: workSeen, jobOpen: jobOpen };
-    }, [wasSeen, isActive]), workSeen = _d.workSeen, jobOpen = _d.jobOpen;
-    var cardProps = __assign({ workSeen: workSeen, jobOpen: jobOpen }, props);
-    var cardResponsive = useMediaQuery(React.createElement(JobCardDesktop, __assign({}, cardProps)), {
-        md: React.createElement(JobCardMobile, __assign({}, cardProps))
-    });
-    return React.createElement(React.Fragment, null, cardResponsive);
-};
-
 var styles$1y = {"magneto-ui-job-company-header":"mg_job_company_header_magneto-ui-job-company-header_5apvk","magneto-ui-job-company-header__data-actions":"mg_job_company_header_magneto-ui-job-company-header_data-actions_5apvk"};
 
 var Component$1G = function (_a) {
@@ -7976,7 +8471,7 @@ var showDetailByWindow = function (elementID) {
     return true;
 };
 
-var style$2 = {"magneto-ui-jobs-page":"mg_jobs_page_magneto-ui-jobs-page_18fvy","magneto-ui-jobs-page--filter-row":"mg_jobs_page_magneto-ui-jobs-page--filter-row_18fvy","magneto-ui-jobs-page--center-row":"mg_jobs_page_magneto-ui-jobs-page--center-row_18fvy","magneto-ui-jobs-page--center-row__jobs-result":"mg_jobs_page_magneto-ui-jobs-page--center-row_jobs-result_18fvy","magneto-ui-jobs-page--title":"mg_jobs_page_magneto-ui-jobs-page--title_18fvy"};
+var style$2 = {"magneto-ui-jobs-page":"mg_jobs_page_magneto-ui-jobs-page_ptua1","magneto-ui-jobs-page--filter-row":"mg_jobs_page_magneto-ui-jobs-page--filter-row_ptua1","magneto-ui-jobs-page--center-row":"mg_jobs_page_magneto-ui-jobs-page--center-row_ptua1","magneto-ui-jobs-page--center-row__jobs-result":"mg_jobs_page_magneto-ui-jobs-page--center-row_jobs-result_ptua1","magneto-ui-jobs-page--title":"mg_jobs_page_magneto-ui-jobs-page--title_ptua1"};
 
 var style$1 = {"magneto-ui-job-card-skeleton":"mg_job_card_skeleton_magneto-ui-job-card-skeleton_yzrwa","magneto-ui-job-card-skeleton__row1":"mg_job_card_skeleton_magneto-ui-job-card-skeleton_row1_yzrwa","magneto-ui-job-card-skeleton__container":"mg_job_card_skeleton_magneto-ui-job-card-skeleton_container_yzrwa","magneto-ui-job-card-skeleton__container--row2":"mg_job_card_skeleton_magneto-ui-job-card-skeleton_container--row2_yzrwa","skeleton":"mg_job_card_skeleton_skeleton_yzrwa","shimmer":"mg_job_card_skeleton_shimmer_yzrwa"};