igloo-d2c-components 1.0.30 → 1.0.32

package/dist/cjs/index.js

@@ -999,7 +999,7 @@ const MenuItemButton = styles.styled(material.Button)(() => ({
     fontSize: '18px',
     lineHeight: '24px',
     letterSpacing: '0px',
-    wordSpacing: '-5px',
+    wordSpacing: '0px',
     borderRadius: 0,
     '&:hover': {
         backgroundColor: 'transparent',
@@ -1016,7 +1016,7 @@ const MenuItemText = styles.styled(material.Typography)({
     fontSize: '18px',
     lineHeight: '24px',
     letterSpacing: '0px',
-    wordSpacing: '-5px',
+    wordSpacing: '0px',
     color: 'inherit',
 });
 /**
@@ -1057,7 +1057,7 @@ styles.styled(material.Button)(() => ({
     fontSize: '18px',
     lineHeight: '24px',
     letterSpacing: '0px',
-    wordSpacing: '-5px',
+    wordSpacing: '0px',
     borderRadius: 0,
     backgroundColor: 'transparent',
     '&:hover': {
@@ -1086,7 +1086,7 @@ const PurchaseButton = styles.styled(material.Button)(() => ({
     fontSize: '16px',
     lineHeight: '20px',
     letterSpacing: '0px',
-    wordSpacing: '-5px',
+    wordSpacing: '0',
     borderRadius: '24px',
     whiteSpace: 'nowrap',
     '&:hover': {
@@ -1119,7 +1119,7 @@ const StyledMenuItem$1 = styles.styled(material.MenuItem)(() => ({
     fontWeight: 500,
     fontSize: '16px',
     lineHeight: '24px',
-    wordSpacing: '-5px',
+    wordSpacing: '0px',
     color: designColors.natural.dim100,
     '&:hover': {
         backgroundColor: 'rgba(0, 144, 218, 0.08)',
@@ -1259,7 +1259,7 @@ const StyledAppBar$1 = styles.styled(AppBar)(({ theme, ispartnershippagemobilevi
             },
         },
         [theme.breakpoints.up(1025)]: {
-            boxShadow: scrolled && '0px 2px 20px 4px rgba(0, 0, 0, 0.14) !important',
+            boxShadow: scrolled ? '0px 2px 20px 4px rgba(0, 0, 0, 0.14) !important' : 'none',
         },
     });
 });
@@ -1270,7 +1270,7 @@ const ResponsiveB2CLayout = styles.styled('div')(({ theme }) => ({
         margin: '0 auto',
     },
 }));
-const StyledContainer = styles.styled(Container)(({ theme, ispartnershippagemobileview, scrolled }) => {
+const StyledContainer = styles.styled(Container)(({ theme, scrolled }) => {
     var _a;
     return ({
         boxShadow: 'none',
@@ -1306,7 +1306,7 @@ const ButtonDesktopMenu = styles.styled(material.Button)(({ theme }) => {
         alignSelf: 'stretch',
     });
 });
-const AnchorLinks = styles.styled('a')(({ theme }) => ({
+const AnchorLinks = styles.styled('a')(() => ({
     color: 'inherit',
     '&:hover': {
         color: 'inherit',
@@ -1348,7 +1348,7 @@ const ButtonAuth = styles.styled(material.Button)(({ theme }) => ({
     height: 40,
     minWidth: 'max-content !important',
 }));
-const TypographyAuth = styles.styled(material.Typography)(({ theme }) => ({
+const TypographyAuth = styles.styled(material.Typography)(() => ({
     textTransform: 'none',
 }));
 const StyledMenu = styles.styled(material.Menu)(({ theme }) => {
@@ -1398,13 +1398,13 @@ const StyledMenuItem = styles.styled(material.MenuItem)(({ theme }) => {
         },
     });
 });
-const SpanImageWrapper = styles.styled('span')(({ theme }) => ({
+const SpanImageWrapper = styles.styled('span')(() => ({
     alignItems: 'center',
     display: 'flex',
     justifyContent: 'center',
     margin: 'auto 0',
 }));
-const ImageProductIcon = styles.styled('img')(({ theme }) => ({
+const ImageProductIcon = styles.styled('img')(() => ({
     aspectRatio: 1,
     objectPosition: 'center',
     width: 18,
@@ -1471,7 +1471,7 @@ const StyledDrawer$3 = styles.styled(material.Drawer)(({ theme }) => {
         },
     });
 });
-const DivLogoWrapper = styles.styled('div')(({ theme }) => ({
+const DivLogoWrapper = styles.styled('div')(() => ({
     justifyContent: 'space-between',
     alignSelf: 'stretch',
     backgroundColor: '',
@@ -1496,7 +1496,7 @@ const DivLogo = styles.styled('div')(({ theme }) => {
         },
     });
 });
-const DivCrossIconWrapper = styles.styled('div')(({ theme }) => ({
+const DivCrossIconWrapper = styles.styled('div')(() => ({
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
@@ -1509,14 +1509,14 @@ const StyledCloseIconBtn = styles.styled(material.IconButton)(({ theme }) => {
         padding: '0 !important',
     });
 });
-const DivLoginActionContainer = styles.styled('div')(({ theme }) => ({
+const DivLoginActionContainer = styles.styled('div')(() => ({
     justifyContent: 'center',
     alignSelf: 'stretch',
     display: 'flex',
     flexDirection: 'column',
     padding: ' 0 16px',
 }));
-const DivCommonMenus = styles.styled('div')(({ theme }) => ({
+const DivCommonMenus = styles.styled('div')(() => ({
     padding: 16,
     display: 'flex',
     flexDirection: 'column',
@@ -1536,7 +1536,7 @@ const MenuItemOtherLinks = styles.styled(material.MenuItem)(({ theme }) => ({
     width: '100%',
     gap: '50%',
 }));
-const StyledFormControlLabel = styles.styled(material.FormControlLabel)(({ theme }) => ({
+const StyledFormControlLabel = styles.styled(material.FormControlLabel)(() => ({
     '& .MuiRadio-root': {
         padding: '0 9px',
     },
@@ -1558,10 +1558,10 @@ const ButtonLogout = styles.styled(material.Button)(({ theme }) => {
         color: `${((_b = theme.palette.secondary) === null || _b === void 0 ? void 0 : _b.main) || '#f00'} !important`,
     });
 });
-const DivLogoutBtnWrapper = styles.styled('div')(({ theme }) => ({
+const DivLogoutBtnWrapper = styles.styled('div')(() => ({
     margin: 16,
 }));
-const AnchorLink$1 = styles.styled('a')(({ theme }) => ({
+const AnchorLink$1 = styles.styled('a')(() => ({
     color: 'inherit',
     '&:hover': {
         color: 'inherit',
@@ -1578,7 +1578,7 @@ const StyledButton$1 = styles.styled(material.Button)(({ theme }) => {
         padding: '10px 24px',
     });
 });
-const StyledButtonBanner = styles.styled(material.Button)(({ theme }) => ({
+const StyledButtonBanner = styles.styled(material.Button)(() => ({
     alignSelf: 'start',
     height: '40px',
     borderRadius: '100px',
@@ -1607,10 +1607,9 @@ const TypographyBtnText = styles.styled(material.Typography)(({ theme }) => {
  * />
  * ```
  */
-function Header$1({ logo, alternateLogo, showAlternateLogo = false, navigationLinks, languages, currentLocale, currentLang, userToken, userFirstName, isMobile: propIsMobile, scrolled = false, isPartnershipPageMobileView = false, isPartnershipPagePCView = false, isSeoPageView = false, showGetQuoteButton = false, bannerData, ctaData, host = '', welcomeMessage, formatMessage = (descriptor) => descriptor.id, menuItems, userProfileComponent, onLogoClick, onProductMenuClick, onLanguageChange, onLoginClick, onSignupClick, onLogoutClick, onPartnershipClick, onAboutUsClick, onBlogClick, onMyProfileClick, onGetQuoteClick, onPartnershipCTAClick, useNewDesktopLayout = false, desktopMenuItems = [], showCtaButton = true, ctaButtonText = 'Purchase Now', onCtaClick, ctaScrollTargetId, onScrollToSection, }) {
+function Header$1({ logo, navigationLinks, languages, currentLocale, userToken, userFirstName, isMobile: propIsMobile, scrolled = false, isPartnershipPageMobileView = false, isPartnershipPagePCView = false, isSeoPageView = false, bannerData, host = '', welcomeMessage, formatMessage = (descriptor) => descriptor.id, menuItems, userProfileComponent, onLogoClick, onProductMenuClick, onLanguageChange, onLoginClick, onSignupClick, onLogoutClick, onPartnershipClick, onAboutUsClick, onBlogClick, onMyProfileClick, onGetQuoteClick, onPartnershipCTAClick, useNewDesktopLayout = false, desktopMenuItems = [], showCtaButton = true, ctaButtonText = 'Purchase Now', onCtaClick, ctaScrollTargetId, onScrollToSection, }) {
     var _a, _b, _c;
-    const tenantTheme = useTenantTheme();
-    tenantTheme === null || tenantTheme === void 0 ? void 0 : tenantTheme.theme;
+    useTenantTheme();
     const muiTheme = material.useTheme();
     const themeBreakpoint = material.useMediaQuery((_a = muiTheme === null || muiTheme === void 0 ? void 0 : muiTheme.breakpoints) === null || _a === void 0 ? void 0 : _a.down('md'));
     const isMobile = propIsMobile !== undefined ? propIsMobile : themeBreakpoint;
@@ -1790,19 +1789,19 @@ const StyledToolbar = styles.styled(material.Toolbar)(({ theme }) => ({
         padding: '12px 16px',
     },
 }));
-const LogoContainer$1 = styles.styled('div')(({ theme }) => ({
+const LogoContainer$1 = styles.styled('div')(() => ({
     display: 'flex',
     alignItems: 'center',
     cursor: 'pointer',
     height: '16px',
     width: '116px',
 }));
-const LogoImage = styles.styled('img')(({ theme }) => ({
+const LogoImage = styles.styled('img')(() => ({
     height: '16px',
     width: '116px',
     objectFit: 'contain',
 }));
-const MenuIconButton = styles.styled(material.IconButton)(({ theme }) => ({
+const MenuIconButton = styles.styled(material.IconButton)(() => ({
     padding: '6px',
     borderRadius: '25px',
     width: '40px',
@@ -1812,26 +1811,26 @@ const MenuIconButton = styles.styled(material.IconButton)(({ theme }) => ({
         fontSize: '24px',
     },
 }));
-const StyledDrawer$2 = styles.styled(material.Drawer)(({ theme }) => ({
+const StyledDrawer$2 = styles.styled(material.Drawer)(() => ({
     '& .MuiDrawer-paper': {
         backgroundColor: '#FFFFFF',
         boxSizing: 'border-box',
     },
 }));
-const DrawerHeader$2 = styles.styled(material.Box)(({ theme }) => ({
+const DrawerHeader$2 = styles.styled(material.Box)(() => ({
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'space-between',
     padding: '12px 16px',
     minHeight: '64px',
 }));
-const DrawerLogoContainer = styles.styled('div')(({ theme }) => ({
+const DrawerLogoContainer = styles.styled('div')(() => ({
     display: 'flex',
     alignItems: 'center',
     cursor: 'pointer',
     height: '32px',
 }));
-const CloseIconButton = styles.styled(material.IconButton)(({ theme }) => ({
+const CloseIconButton = styles.styled(material.IconButton)(() => ({
     padding: '6px',
     '& .MuiSvgIcon-root': {
         color: '#000000',
@@ -1860,7 +1859,7 @@ styles.styled(material.Box)(({ theme }) => ({
  * />
  * ```
  */
-function NewHeader({ logo: propLogo, navigationLinks = [], additionalMenuSections = [], isMobile: propIsMobile, onLogoClick, onMenuOpen, onMenuClose, customDrawerContent, formatMessage = (descriptor) => descriptor.id, }) {
+function NewHeader({ logo: propLogo, navigationLinks = [], isMobile: propIsMobile, onLogoClick, onMenuOpen, onMenuClose, customDrawerContent, formatMessage = (descriptor) => descriptor.id, }) {
     var _a;
     const tenantTheme = useTenantTheme();
     const theme = tenantTheme === null || tenantTheme === void 0 ? void 0 : tenantTheme.theme;
@@ -1891,18 +1890,12 @@ function NewHeader({ logo: propLogo, navigationLinks = [], additionalMenuSection
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(StyledAppBar, Object.assign({ position: "fixed" }, { children: jsxRuntime.jsxs(StyledToolbar, Object.assign({ disableGutters: true }, { children: [jsxRuntime.jsx(LogoContainer$1, Object.assign({ onClick: handleLogoClick }, { children: jsxRuntime.jsx(LogoImage, { src: logo, alt: "Logo" }) })), jsxRuntime.jsx(MenuIconButton, Object.assign({ size: "large", edge: "end", "aria-label": "menu", onClick: handleDrawerOpen }, { children: jsxRuntime.jsx(MenuIcon, {}) }))] })) })), jsxRuntime.jsx(StyledDrawer$2, Object.assign({ anchor: "right", open: drawerOpen, onClose: handleDrawerClose }, { children: customDrawerContent ? (jsxRuntime.jsx(material.Box, Object.assign({ sx: { width: isMobile ? '100vw' : 350 } }, { children: customDrawerContent }))) : (jsxRuntime.jsxs(material.Box, Object.assign({ sx: { width: isMobile ? '100vw' : 350 } }, { children: [jsxRuntime.jsxs(DrawerHeader$2, { children: [jsxRuntime.jsx(DrawerLogoContainer, Object.assign({ onClick: handleLogoClick }, { children: jsxRuntime.jsx(LogoImage, { src: logo, alt: "Logo" }) })), jsxRuntime.jsx(CloseIconButton, Object.assign({ onClick: handleDrawerClose, "aria-label": "close" }, { children: jsxRuntime.jsx(CloseIcon, {}) }))] }), jsxRuntime.jsx(material.Divider, {}), jsxRuntime.jsx(DrawerContent$2, { children: navigationLinks.length > 0 && (jsxRuntime.jsx(material.List, { children: navigationLinks.map((item) => (jsxRuntime.jsx(material.ListItem, Object.assign({ disablePadding: true }, { children: jsxRuntime.jsx(material.ListItemButton, Object.assign({ onClick: () => handleMenuItemClick(item) }, { children: jsxRuntime.jsx(material.ListItemText, { primary: formatMessage({ id: item.label }) }) })) }), item.key))) })) })] }))) }))] }));
 }
 
-const DivFooter = styles.styled('div')(({ theme }) => ({
+const DivFooter = styles.styled('div')(() => ({
     backgroundColor: '#424242',
     padding: '20px 16px',
     '@media (min-width: 769px)': {
         padding: '70px 0px',
     },
-    anchorLinks: {
-        color: 'inherit',
-        '&:hover': {
-            color: 'inherit',
-        },
-    },
 }));
 const DivFooterConterResponsiveLayout = styles.styled('div')(({ theme }) => ({
     color: '#fff',
@@ -1912,7 +1905,7 @@ const DivFooterConterResponsiveLayout = styles.styled('div')(({ theme }) => ({
         margin: '0 auto',
     },
 }));
-const FooterHiddenContent = styles.styled('div')(({ theme, simplifiedLayout }) => simplifiedLayout ? { display: 'none' } : { display: 'flex' });
+const FooterHiddenContent = styles.styled('div')(({ simplifiedLayout }) => simplifiedLayout ? { display: 'none' } : { display: 'flex' });
 const DivIglooIntro = styles.styled('div')(({ theme }) => {
     var _a;
     return ({
@@ -1926,7 +1919,7 @@ const DivIglooIntro = styles.styled('div')(({ theme }) => {
         },
     });
 });
-const DivSocial = styles.styled('div')(({ theme }) => ({
+const DivSocial = styles.styled('div')(() => ({
     display: 'flex',
     alignItems: 'center',
     margin: '0 auto',
@@ -1944,14 +1937,14 @@ const ButtonIcon = styles.styled(material.Button)(({ theme }) => {
         minWidth: 'auto !important',
     });
 });
-const TypographyIntro = styles.styled(material.Typography)(({ theme }) => ({
+const TypographyIntro = styles.styled(material.Typography)(() => ({
     textAlign: 'center',
     color: `#fff !important`,
     '@media (min-width: 769px)': {
         textAlign: 'left',
     },
 }));
-const TypographyAddressFooter = styles.styled(material.Typography)(({ theme }) => ({
+const TypographyAddressFooter = styles.styled(material.Typography)(() => ({
     marginTop: 16,
     textAlign: 'center',
     color: '#fff',
@@ -1959,7 +1952,7 @@ const TypographyAddressFooter = styles.styled(material.Typography)(({ theme }) =
         textAlign: 'left',
     },
 }));
-const DivLogos = styles.styled('div')(({ theme }) => ({
+const DivLogos = styles.styled('div')(() => ({
     display: 'flex',
     flexDirection: 'column',
     gap: 16,
@@ -1972,12 +1965,12 @@ const DivLogos = styles.styled('div')(({ theme }) => ({
         alignItems: 'baseline',
     },
 }));
-const DivFirstRow = styles.styled('div')(({ theme }) => ({
+const DivFirstRow = styles.styled('div')(() => ({
     display: 'flex',
     flexDirection: 'row',
     gap: 16,
 }));
-const ButtonOjkLink = styles.styled(material.Button)(({ theme }) => ({
+const ButtonOjkLink = styles.styled(material.Button)(() => ({
     display: 'flex',
     justifyContent: 'flex-start',
     '@media (min-width: 769px)': {
@@ -1985,18 +1978,18 @@ const ButtonOjkLink = styles.styled(material.Button)(({ theme }) => ({
         justifyContent: 'flex-start !important ',
     },
 }));
-const ImageOjkLicense = styles.styled('img')(({ theme }) => ({
+const ImageOjkLicense = styles.styled('img')(() => ({
     alignSelf: 'flex-start',
     height: 36,
 }));
-const ButtonSolisoustamaLink = styles.styled(material.Button)(({ theme }) => ({
+const ButtonSolisoustamaLink = styles.styled(material.Button)(() => ({
     display: 'flex',
     justifyContent: 'flex-start',
 }));
-const ImageSolisoustama = styles.styled('img')(({ theme }) => ({
+const ImageSolisoustama = styles.styled('img')(() => ({
     height: 'auto',
 }));
-const DivLinks = styles.styled('div')(({ theme }) => ({
+const DivLinks = styles.styled('div')(() => ({
     display: 'flex',
     flex: 1,
     alignItems: 'center',
@@ -2007,7 +2000,7 @@ const DivLinks = styles.styled('div')(({ theme }) => ({
         alignItems: 'normal',
     },
 }));
-const DivSection = styles.styled('div')(({ theme }) => ({
+const DivSection = styles.styled('div')(() => ({
     display: 'flex',
     flexDirection: 'column',
     gap: 16,
@@ -2020,7 +2013,7 @@ const DivSection = styles.styled('div')(({ theme }) => ({
         },
     },
 }));
-const ButtonBottomLink = styles.styled(material.Button)(({ theme }) => ({
+const ButtonBottomLink = styles.styled(material.Button)(() => ({
     color: '#fff !important',
     textTransform: 'capitalize',
     '@media (min-width: 769px)': {
@@ -2029,22 +2022,22 @@ const ButtonBottomLink = styles.styled(material.Button)(({ theme }) => ({
         minWidth: 'auto !important',
     },
 }));
-const StyledDivider = styles.styled(material.Divider)(({ theme }) => ({
+const StyledDivider = styles.styled(material.Divider)(() => ({
     margin: '24px 0 16px !important',
     borderColor: '#5F5E62 !important',
 }));
-const DivBottom = styles.styled('div')(({ theme }) => ({
+const DivBottom = styles.styled('div')(() => ({
     display: 'flex',
     justifyContent: 'space-between',
     alignItems: 'center',
 }));
-const DivSep = styles.styled('div')(({ theme }) => ({
+const DivSep = styles.styled('div')(() => ({
     width: '1px',
     height: 10,
     borderRadius: '1px',
     backgroundColor: '#fff',
 }));
-const AnchorLink = styles.styled('a')(({ theme }) => ({
+const AnchorLink = styles.styled('a')(() => ({
     color: 'inherit',
     '&:hover': {
         color: 'inherit',
@@ -2067,8 +2060,7 @@ const AnchorLink = styles.styled('a')(({ theme }) => ({
  */
 function Footer({ simplifiedLayout = false, introText, addressText, socialLinks, licenseImages, poweredByImage, navigationLinks = [], currentLocale, host = '', isMobile: propIsMobile, onLinkClick, onSocialClick, onPrivacyPolicyClick, onTermsOfServiceClick, formatMessage = (descriptor) => descriptor.id, }) {
     var _a;
-    const tenantTheme = useTenantTheme();
-    tenantTheme === null || tenantTheme === void 0 ? void 0 : tenantTheme.theme;
+    useTenantTheme();
     const muiTheme = material.useTheme();
     const themeBreakpoint = material.useMediaQuery((_a = muiTheme === null || muiTheme === void 0 ? void 0 : muiTheme.breakpoints) === null || _a === void 0 ? void 0 : _a.down('md'));
     const isMobile = propIsMobile !== undefined ? propIsMobile : themeBreakpoint;
@@ -2085,7 +2077,7 @@ function Footer({ simplifiedLayout = false, introText, addressText, socialLinks,
                                     }), index === navigationLinks.length - 1 && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ButtonBottomLink, Object.assign({ onClick: onPrivacyPolicyClick }, { children: jsxRuntime.jsx(material.Typography, Object.assign({ variant: "body1" }, { children: jsxRuntime.jsx(AnchorLink, Object.assign({ href: `${host}/${currentLocale}/terms/privacypolicy`, onClick: (e) => e === null || e === void 0 ? void 0 : e.preventDefault() }, { children: formatMessage({ id: 'Privacy Policy' }) })) })) })), jsxRuntime.jsx(ButtonBottomLink, Object.assign({ onClick: onTermsOfServiceClick }, { children: jsxRuntime.jsx(material.Typography, Object.assign({ variant: "body1" }, { children: jsxRuntime.jsx(AnchorLink, Object.assign({ href: `${host}/${currentLocale}/terms/termsofservice`, onClick: (e) => e === null || e === void 0 ? void 0 : e.preventDefault() }, { children: formatMessage({ id: 'Terms of Service' }) })) })) })), jsxRuntime.jsx(DivSocial, { children: socialLinks.map((social) => (jsxRuntime.jsx(ButtonIcon, Object.assign({ onClick: () => onSocialClick === null || onSocialClick === void 0 ? void 0 : onSocialClick(social.platform, social.url), "aria-label": social.ariaLabel || social.platform }, { children: jsxRuntime.jsx(AnchorLink, Object.assign({ href: social.url, onClick: (e) => e === null || e === void 0 ? void 0 : e.preventDefault() }, { children: jsxRuntime.jsx("img", { src: social.icon, alt: social.platform, height: isMobile ? '24' : '28', width: isMobile ? '24' : '28', loading: "lazy" }) })) }), social.platform))) })] }))] }, index))) }))] })), isMobile && jsxRuntime.jsx(StyledDivider, {}), isMobile && (jsxRuntime.jsx(DivBottom, { children: jsxRuntime.jsxs(DivLinks, { children: [jsxRuntime.jsx("div", Object.assign({ onClick: onPrivacyPolicyClick, style: { cursor: 'pointer' } }, { children: jsxRuntime.jsx(material.Typography, Object.assign({ variant: "body2" }, { children: jsxRuntime.jsx(AnchorLink, Object.assign({ href: `${host}/${currentLocale}/terms/privacypolicy`, onClick: (e) => e === null || e === void 0 ? void 0 : e.preventDefault() }, { children: formatMessage({ id: 'Privacy Policy' }) })) })) })), jsxRuntime.jsx(DivSep, {}), jsxRuntime.jsx("div", Object.assign({ onClick: onTermsOfServiceClick, style: { cursor: 'pointer' } }, { children: jsxRuntime.jsx(material.Typography, Object.assign({ variant: "body2" }, { children: jsxRuntime.jsx(AnchorLink, Object.assign({ href: `${host}/${currentLocale}/terms/termsofservice`, onClick: (e) => e === null || e === void 0 ? void 0 : e.preventDefault() }, { children: formatMessage({ id: 'Terms of Service' }) })) })) }))] }) }))] }) }));
 }
 
-const StyledDrawer$1 = styles.styled(material.Drawer)(({ theme }) => ({
+const StyledDrawer$1 = styles.styled(material.Drawer)(() => ({
     zIndex: '1300 !important',
     '& .MuiDrawer-root': {
         zIndex: 1300,
@@ -2100,36 +2092,36 @@ const StyledDrawer$1 = styles.styled(material.Drawer)(({ theme }) => ({
         zIndex: 1299,
     },
 }));
-const DrawerHeader$1 = styles.styled(material.Box)(({ theme }) => ({
+const DrawerHeader$1 = styles.styled(material.Box)(() => ({
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'flex-end',
     padding: '16px',
     minHeight: '56px',
 }));
-const DrawerContent$1 = styles.styled(material.Box)(({ theme }) => ({
+const DrawerContent$1 = styles.styled(material.Box)(() => ({
     flex: 1,
     overflowY: 'auto',
     padding: '16px 0',
 }));
-const DrawerFooter = styles.styled(material.Box)(({ theme }) => ({
+const DrawerFooter = styles.styled(material.Box)(() => ({
     padding: '16px',
     backgroundColor: '#FFFFFF',
     borderTop: 'none',
     boxShadow: '0px -2px 8px rgba(0, 0, 0, 0.08)',
 }));
-styles.styled(material.Button)(({ theme }) => ({
+styles.styled(material.Button)(() => ({
     minWidth: 'auto',
     padding: 0,
 }));
-const HeaderSection = styles.styled(material.Box)(({ theme }) => ({
+const HeaderSection = styles.styled(material.Box)(() => ({
     backgroundColor: '#FFFFFF',
     padding: '16px',
     display: 'flex',
     flexDirection: 'column',
     gap: '12px',
 }));
-const CategoryIcon = styles.styled(material.Box)(({ theme }) => ({
+const CategoryIcon = styles.styled(material.Box)(() => ({
     width: '32px',
     height: '32px',
     display: 'flex',
@@ -2147,21 +2139,21 @@ const TitleText = styles.styled(material.Typography)(({ theme }) => ({
         lineHeight: '24px',
     },
 }));
-const SubtitleText = styles.styled(material.Typography)(({ theme }) => ({
+const SubtitleText = styles.styled(material.Typography)(() => ({
     fontWeight: 400,
     fontSize: '14px',
     lineHeight: '18px',
     wordSpacing: '-5px',
     color: '#5F5E62',
 }));
-const FooterButtons = styles.styled(material.Box)(({ theme }) => ({
+const FooterButtons = styles.styled(material.Box)(() => ({
     display: 'flex',
     flexDirection: 'column',
     gap: '16px',
     width: '100%',
 }));
 // Base button styles - colors will be injected via sx prop from component
-const PrimaryButton = styles.styled(material.Button)(({ theme }) => ({
+const PrimaryButton = styles.styled(material.Button)(() => ({
     color: '#FFFFFF',
     borderRadius: '24px',
     height: '48px',
@@ -2175,7 +2167,7 @@ const PrimaryButton = styles.styled(material.Button)(({ theme }) => ({
         color: '#FFFFFF',
     },
 }));
-const SecondaryButton = styles.styled(material.Button)(({ theme }) => ({
+const SecondaryButton = styles.styled(material.Button)(() => ({
     borderRadius: '8px',
     height: '40px',
     textTransform: 'none',
@@ -2203,13 +2195,11 @@ const SecondaryButton = styles.styled(material.Button)(({ theme }) => ({
  * ```
  */
 function RecommendationsDrawer({ open, onClose, children, headerIcon, title, subtitle, showBackButton = false, onBack, primaryButtonText, onPrimaryAction, primaryButtonDisabled = false, secondaryButtonText, onSecondaryAction, showFooter = true, customFooter, formatMessage = (descriptor) => descriptor.id, }) {
-    var _a, _b, _c, _d, _e, _f, _g;
-    const muiTheme = material.useTheme();
-    material.useMediaQuery((_a = muiTheme === null || muiTheme === void 0 ? void 0 : muiTheme.breakpoints) === null || _a === void 0 ? void 0 : _a.down('md'));
+    var _a, _b, _c;
+    material.useTheme();
     const tenantTheme = useTenantTheme();
     // Get primary color from tenant theme, fallback to default
-    const primaryColor = ((_d = (_c = (_b = tenantTheme === null || tenantTheme === void 0 ? void 0 : tenantTheme.theme) === null || _b === void 0 ? void 0 : _b.palette) === null || _c === void 0 ? void 0 : _c.primary) === null || _d === void 0 ? void 0 : _d.main) || '#0090DA';
-    ((_g = (_f = (_e = tenantTheme === null || tenantTheme === void 0 ? void 0 : tenantTheme.theme) === null || _e === void 0 ? void 0 : _e.palette) === null || _f === void 0 ? void 0 : _f.primary) === null || _g === void 0 ? void 0 : _g.dark) || '#2869a8';
+    const primaryColor = ((_c = (_b = (_a = tenantTheme === null || tenantTheme === void 0 ? void 0 : tenantTheme.theme) === null || _a === void 0 ? void 0 : _a.palette) === null || _b === void 0 ? void 0 : _b.primary) === null || _c === void 0 ? void 0 : _c.main) || '#0090DA';
     // Helper to convert hex to rgba
     const hexToRgba = (hex, alpha) => {
         const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
@@ -2254,7 +2244,7 @@ function RecommendationsDrawer({ open, onClose, children, headerIcon, title, sub
                                 } }, { children: formatMessage({ id: secondaryButtonText }) })))] })) }))] })) })));
 }
 
-const StyledDrawer = material.styled(material.Drawer)(({ theme }) => ({
+const StyledDrawer = material.styled(material.Drawer)(() => ({
     zIndex: 1300,
     '& .MuiDrawer-paper': {
         borderTopLeftRadius: '8px',
@@ -2388,7 +2378,7 @@ function ProductSelectionDrawer({ open, onClose, products, onProductSelect, titl
                                     } }, { children: viewPlansButtonText }))] }, product.id))) }) })] }) })));
 }
 
-const QuestionContainer$1 = styles.styled(material.Box)(({ theme }) => ({
+const QuestionContainer$1 = styles.styled(material.Box)(() => ({
     backgroundColor: '#FFFFFF',
     padding: '12px 16px',
     display: 'flex',
@@ -2396,7 +2386,7 @@ const QuestionContainer$1 = styles.styled(material.Box)(({ theme }) => ({
     gap: '16px',
     width: '100%',
 }));
-const QuestionHeader = styles.styled(material.Box)(({ theme }) => ({
+const QuestionHeader = styles.styled(material.Box)(() => ({
     display: 'flex',
     flexDirection: 'column',
     gap: '6px',
@@ -2450,7 +2440,7 @@ const OptionsContainer$1 = styles.styled(material.Box)(({ theme }) => ({
  * />
  * ```
  */
-function QuestionSection({ questionNumber, question, helperText, options, selectedValue, onSelect, multiple = false, selectedValues = [], renderOption, formatMessage = (descriptor) => descriptor.id, }) {
+function QuestionSection({ questionNumber, question, helperText, options, selectedValue, multiple = false, selectedValues = [], renderOption, formatMessage = (descriptor) => descriptor.id, }) {
     const isSelected = (optionValue) => {
         if (multiple) {
             return selectedValues.includes(optionValue);
@@ -2588,7 +2578,7 @@ function OptionButton({ value, label, icon, selected = false, disabled = false,
     return (jsxRuntime.jsx(StyledOptionButton, Object.assign({ selected: selected, disabled: disabled, onClick: handleClick, size: size, fullWidth: fullWidth, colorVariant: variant }, { children: jsxRuntime.jsxs(OptionContent, { children: [icon && jsxRuntime.jsx(OptionIcon, { children: icon }), jsxRuntime.jsx(OptionLabel, Object.assign({ selected: selected, disabled: disabled, colorVariant: variant }, { children: formatMessage({ id: label }) }))] }) })));
 }
 
-const ToggleContainer$1 = styles.styled(material.Box)(({ theme }) => ({
+const ToggleContainer$1 = styles.styled(material.Box)(() => ({
     backgroundColor: '#F9F9F9',
     borderRadius: '40px',
     display: 'flex',
@@ -2597,7 +2587,7 @@ const ToggleContainer$1 = styles.styled(material.Box)(({ theme }) => ({
     padding: '0',
     width: '100%',
 }));
-const ToggleButton$1 = styles.styled(material.ButtonBase)(({ theme, selected }) => ({
+const ToggleButton$1 = styles.styled(material.ButtonBase)(({ selected }) => ({
     flex: 1,
     display: 'flex',
     alignItems: 'center',
@@ -2611,7 +2601,7 @@ const ToggleButton$1 = styles.styled(material.ButtonBase)(({ theme, selected })
         backgroundColor: selected ? '#00D080' : 'rgba(0, 0, 0, 0.04)',
     },
 }));
-const ToggleIcon = styles.styled(material.Box)(({ theme }) => ({
+const ToggleIcon = styles.styled(material.Box)(() => ({
     backgroundColor: '#FFFFFF',
     borderRadius: '50px',
     width: '32px',
@@ -2621,7 +2611,7 @@ const ToggleIcon = styles.styled(material.Box)(({ theme }) => ({
     justifyContent: 'center',
     padding: '6px',
 }));
-const ToggleLabel = styles.styled(material.Typography)(({ theme, selected }) => ({
+const ToggleLabel = styles.styled(material.Typography)(({ selected }) => ({
     fontFamily: '"Montserrat", sans-serif',
     fontWeight: 600,
     fontSize: '14px',
@@ -2768,12 +2758,12 @@ const ToggleButton = styles.styled(material.Box)(({ theme, active }) => {
     });
 });
 const ToggleText = styles.styled(material.Typography)(({ theme }) => {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d, _e;
     return ({
-        fontFamily: (_a = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _a === void 0 ? void 0 : _a.fontFamily,
-        fontSize: ((_c = (_b = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _b === void 0 ? void 0 : _b.bodyMedium) === null || _c === void 0 ? void 0 : _c.fontSize) || '14px',
-        fontWeight: ((_d = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _d === void 0 ? void 0 : _d.fontWeightSemiBold) || 600,
-        lineHeight: ((_f = (_e = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _e === void 0 ? void 0 : _e.bodyMedium) === null || _f === void 0 ? void 0 : _f.lineHeight) || '20px',
+        fontFamily: theme.typography.fontFamily,
+        fontSize: ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _a === void 0 ? void 0 : _a.bodyMedium) === null || _b === void 0 ? void 0 : _b.fontSize) || '14px',
+        fontWeight: ((_c = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _c === void 0 ? void 0 : _c.fontWeightSemiBold) || 600,
+        lineHeight: ((_e = (_d = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _d === void 0 ? void 0 : _d.bodyMedium) === null || _e === void 0 ? void 0 : _e.lineHeight) || '20px',
         whiteSpace: 'nowrap',
         wordSpacing: '-5px',
     });
@@ -2834,7 +2824,7 @@ const CalloutContainer = styles.styled(material.Box)(({ theme }) => {
         width: '100%',
     });
 });
-const CalloutHeader = styles.styled(material.Box)(({ theme }) => ({
+const CalloutHeader = styles.styled(material.Box)(() => ({
     display: 'flex',
     gap: '4px',
     alignItems: 'center',
@@ -2848,14 +2838,14 @@ const CalloutIcon = styles.styled(InfoIcon)(({ theme }) => {
     });
 });
 const CalloutTitle = styles.styled(material.Typography)(({ theme }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
+    var _a, _b, _c, _d, _e, _f, _g;
     return ({
-        fontFamily: (_a = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _a === void 0 ? void 0 : _a.fontFamily,
-        fontSize: ((_c = (_b = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _b === void 0 ? void 0 : _b.bodyMedium) === null || _c === void 0 ? void 0 : _c.fontSize) || '16px',
-        fontWeight: ((_d = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _d === void 0 ? void 0 : _d.fontWeightSemiBold) || 700,
-        lineHeight: ((_f = (_e = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _e === void 0 ? void 0 : _e.bodyMedium) === null || _f === void 0 ? void 0 : _f.lineHeight) || '20px',
+        fontFamily: theme.typography.fontFamily,
+        fontSize: ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _a === void 0 ? void 0 : _a.bodyMedium) === null || _b === void 0 ? void 0 : _b.fontSize) || '16px',
+        fontWeight: ((_c = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _c === void 0 ? void 0 : _c.fontWeightSemiBold) || 700,
+        lineHeight: ((_e = (_d = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _d === void 0 ? void 0 : _d.bodyMedium) === null || _e === void 0 ? void 0 : _e.lineHeight) || '20px',
         wordSpacing: '-5px',
-        color: ((_h = (_g = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _g === void 0 ? void 0 : _g.natural) === null || _h === void 0 ? void 0 : _h.dim) || '#13131b',
+        color: ((_g = (_f = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _f === void 0 ? void 0 : _f.natural) === null || _g === void 0 ? void 0 : _g.dim) || '#13131b',
         [theme.breakpoints.down('md')]: {
             fontSize: '14px',
             lineHeight: '20px',
@@ -2863,15 +2853,14 @@ const CalloutTitle = styles.styled(material.Typography)(({ theme }) => {
     });
 });
 const CalloutText = styles.styled(material.Typography)(({ theme }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     return ({
-        fontFamily: ((_a = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _a === void 0 ? void 0 : _a.fontFamily) ||
-            '',
-        fontSize: ((_c = (_b = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _b === void 0 ? void 0 : _b.bodySmall) === null || _c === void 0 ? void 0 : _c.fontSize) || '14px',
-        fontWeight: ((_e = (_d = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _d === void 0 ? void 0 : _d.bodySmall) === null || _e === void 0 ? void 0 : _e.fontWeight) || 400,
-        lineHeight: ((_g = (_f = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _f === void 0 ? void 0 : _f.bodySmall) === null || _g === void 0 ? void 0 : _g.lineHeight) || '16px',
+        fontFamily: theme.typography.fontFamily || '',
+        fontSize: ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _a === void 0 ? void 0 : _a.bodySmall) === null || _b === void 0 ? void 0 : _b.fontSize) || '14px',
+        fontWeight: ((_d = (_c = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _c === void 0 ? void 0 : _c.bodySmall) === null || _d === void 0 ? void 0 : _d.fontWeight) || 400,
+        lineHeight: ((_f = (_e = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _e === void 0 ? void 0 : _e.bodySmall) === null || _f === void 0 ? void 0 : _f.lineHeight) || '16px',
         wordSpacing: '-5px',
-        color: ((_j = (_h = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _h === void 0 ? void 0 : _h.natural) === null || _j === void 0 ? void 0 : _j.dark) || '#5f5e62',
+        color: ((_h = (_g = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _g === void 0 ? void 0 : _g.natural) === null || _h === void 0 ? void 0 : _h.dark) || '#5f5e62',
         [theme.breakpoints.down('md')]: {
             fontSize: '12px',
             lineHeight: '14px',
@@ -2919,22 +2908,21 @@ const SliderContainer = styles.styled(material.Box)(({ theme }) => {
         width: '100%',
     });
 });
-const InputSection = styles.styled(material.Box)(({ theme }) => ({
+const InputSection = styles.styled(material.Box)(() => ({
     display: 'flex',
     flexDirection: 'column',
     gap: '8px',
     width: '100%',
 }));
 const InputLabel = styles.styled(material.Typography)(({ theme }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     return ({
-        fontFamily: ((_a = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _a === void 0 ? void 0 : _a.fontFamily) ||
-            '',
-        fontSize: ((_c = (_b = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _b === void 0 ? void 0 : _b.bodySmall) === null || _c === void 0 ? void 0 : _c.fontSize) || '12px',
-        fontWeight: ((_e = (_d = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _d === void 0 ? void 0 : _d.bodySmall) === null || _e === void 0 ? void 0 : _e.fontWeight) || 400,
-        lineHeight: ((_g = (_f = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _f === void 0 ? void 0 : _f.bodySmall) === null || _g === void 0 ? void 0 : _g.lineHeight) || '16px',
+        fontFamily: theme.typography.fontFamily || '',
+        fontSize: ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _a === void 0 ? void 0 : _a.bodySmall) === null || _b === void 0 ? void 0 : _b.fontSize) || '12px',
+        fontWeight: ((_d = (_c = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _c === void 0 ? void 0 : _c.bodySmall) === null || _d === void 0 ? void 0 : _d.fontWeight) || 400,
+        lineHeight: ((_f = (_e = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _e === void 0 ? void 0 : _e.bodySmall) === null || _f === void 0 ? void 0 : _f.lineHeight) || '16px',
         wordSpacing: '-5px',
-        color: ((_j = (_h = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _h === void 0 ? void 0 : _h.natural) === null || _j === void 0 ? void 0 : _j.dim) || '#13131b',
+        color: ((_h = (_g = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _g === void 0 ? void 0 : _g.natural) === null || _h === void 0 ? void 0 : _h.dim) || '#13131b',
     });
 });
 const InputContainer = styles.styled(material.Box)(({ theme }) => {
@@ -2950,24 +2938,23 @@ const InputContainer = styles.styled(material.Box)(({ theme }) => {
         border: `1px solid ${((_d = (_c = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _c === void 0 ? void 0 : _c.ui) === null || _d === void 0 ? void 0 : _d.inputBorder) || '#eeeeee'}`,
         borderRadius: '8px',
         width: '100%',
-        maxWidth: 'initial', // Match slider track width
+        maxWidth: 'initial',
     });
 });
 const InputValue = styles.styled(material.Typography)(({ theme }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     return ({
-        fontFamily: ((_a = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _a === void 0 ? void 0 : _a.fontFamily) ||
-            '',
-        fontSize: ((_c = (_b = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _b === void 0 ? void 0 : _b.bodyMedium) === null || _c === void 0 ? void 0 : _c.fontSize) || '14px',
-        fontWeight: ((_e = (_d = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _d === void 0 ? void 0 : _d.bodyMedium) === null || _e === void 0 ? void 0 : _e.fontWeight) || 400,
-        lineHeight: ((_g = (_f = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _f === void 0 ? void 0 : _f.bodyMedium) === null || _g === void 0 ? void 0 : _g.lineHeight) || '18px',
+        fontFamily: theme.typography.fontFamily || '',
+        fontSize: ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _a === void 0 ? void 0 : _a.bodyMedium) === null || _b === void 0 ? void 0 : _b.fontSize) || '14px',
+        fontWeight: ((_d = (_c = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _c === void 0 ? void 0 : _c.bodyMedium) === null || _d === void 0 ? void 0 : _d.fontWeight) || 400,
+        lineHeight: ((_f = (_e = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _e === void 0 ? void 0 : _e.bodyMedium) === null || _f === void 0 ? void 0 : _f.lineHeight) || '18px',
         wordSpacing: '-5px',
-        color: ((_j = (_h = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _h === void 0 ? void 0 : _h.natural) === null || _j === void 0 ? void 0 : _j.dim) || '#13131b',
+        color: ((_h = (_g = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _g === void 0 ? void 0 : _g.natural) === null || _h === void 0 ? void 0 : _h.dim) || '#13131b',
         textAlign: 'center',
         flex: 1,
     });
 });
-styles.styled(material.Box)(({ theme }) => ({
+styles.styled(material.Box)(() => ({
     display: 'flex',
     alignItems: 'center',
     position: 'relative',
@@ -3007,7 +2994,7 @@ styles.styled(material.Box)(({ theme, active }) => {
         },
     });
 });
-styles.styled(material.Box)(({ theme }) => ({
+styles.styled(material.Box)(() => ({
     position: 'absolute',
     width: '18px',
     height: '18px',
@@ -3036,22 +3023,21 @@ styles.styled(material.Box)(({ theme }) => {
         color: ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _a === void 0 ? void 0 : _a.ui) === null || _b === void 0 ? void 0 : _b.sliderActive) || '#317abc',
     });
 });
-styles.styled(material.Box)(({ theme }) => ({
+styles.styled(material.Box)(() => ({
     display: 'flex',
     justifyContent: 'space-between',
     width: '100%',
-    maxWidth: 'initial', // Match slider track width
+    maxWidth: 'initial',
 }));
 const RangeLabel = styles.styled(material.Typography)(({ theme }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     return ({
-        fontFamily: ((_a = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _a === void 0 ? void 0 : _a.fontFamily) ||
-            '',
-        fontSize: ((_c = (_b = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _b === void 0 ? void 0 : _b.smallText) === null || _c === void 0 ? void 0 : _c.fontSize) || '8px',
-        fontWeight: ((_e = (_d = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _d === void 0 ? void 0 : _d.smallText) === null || _e === void 0 ? void 0 : _e.fontWeight) || 500,
-        lineHeight: ((_g = (_f = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _f === void 0 ? void 0 : _f.smallText) === null || _g === void 0 ? void 0 : _g.lineHeight) || '16px',
+        fontFamily: theme.typography.fontFamily || '',
+        fontSize: ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _a === void 0 ? void 0 : _a.smallText) === null || _b === void 0 ? void 0 : _b.fontSize) || '8px',
+        fontWeight: ((_d = (_c = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _c === void 0 ? void 0 : _c.smallText) === null || _d === void 0 ? void 0 : _d.fontWeight) || 500,
+        lineHeight: ((_f = (_e = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _e === void 0 ? void 0 : _e.smallText) === null || _f === void 0 ? void 0 : _f.lineHeight) || '16px',
         wordSpacing: '-5px',
-        color: ((_j = (_h = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _h === void 0 ? void 0 : _h.natural) === null || _j === void 0 ? void 0 : _j.main) || '#929094',
+        color: ((_h = (_g = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _g === void 0 ? void 0 : _g.natural) === null || _h === void 0 ? void 0 : _h.main) || '#929094',
     });
 });
 const StyledMuiSlider = styles.styled(material.Slider)(({ theme, sliderActiveColor, sliderInactiveColor }) => {
@@ -3114,7 +3100,7 @@ const StyledMuiSlider = styles.styled(material.Slider)(({ theme, sliderActiveCol
         },
     });
 });
-const SliderLabelsContainer = styles.styled(material.Box)(({ theme }) => ({
+const SliderLabelsContainer = styles.styled(material.Box)(() => ({
     display: 'flex',
     justifyContent: 'space-between',
     width: '100%',
@@ -3292,7 +3278,6 @@ const ProductCardContainer = styles.styled(material.Box)(({ theme, showIndicator
 const LogoContainer = styles.styled(material.Box)({
     width: '45px',
     height: '40px',
-    border: '1.25px solid rgba(0, 0, 0, 0.1)',
     borderRadius: '10px',
     display: 'flex',
     alignItems: 'center',
@@ -3475,6 +3460,7 @@ const HealthQuestionGroup = ({ question, questionNumber, value, onChange, error,
                     color: 'error.main',
                     fontSize: '12px',
                     mt: 0.5,
+                    wordSpacing: '-5px',
                 } }, { children: error })))] })));
 };
 
@@ -3548,18 +3534,21 @@ const PersonalInformationForm = ({ renderField, fields, consents, onSubmit, form
                                 ml: 2,
                                 color: '#5F5E62',
                                 fontSize: '12px',
+                                wordSpacing: '-5px',
                             } }, { children: fields.full_name.helperText })))] }), renderField(fields.nric), renderField(fields.date_of_birth), renderField(fields.gender), renderField(fields.salutation), renderField(fields.nationality), renderField(fields.occupation), renderField(fields.industry), renderField(fields.crediting_bank_name), renderField(fields.crediting_bank_account_number), desktopGridLayout ? (jsxRuntime.jsx(FullWidthField$1, { children: jsxRuntime.jsxs(CheckboxContainer$1, { children: [jsxRuntime.jsx(material.FormControlLabel, { control: jsxRuntime.jsx(material.Checkbox, { checked: consents.bank_account_confirmation.checked, onChange: (e) => consents.bank_account_confirmation.onChange(e.target.checked), name: "bank_account_confirmation" }), label: jsxRuntime.jsx(CheckboxLabel$1, { children: consents.bank_account_confirmation.label ||
                                         defaultBankConfirmationLabel }) }), consents.bank_account_confirmation.error && (jsxRuntime.jsx(material.Typography, Object.assign({ sx: {
                                     color: 'error.main',
                                     fontSize: '12px',
                                     mt: 0.5,
                                     ml: 4,
+                                    wordSpacing: '-5px',
                                 } }, { children: consents.bank_account_confirmation.error })))] }) })) : (jsxRuntime.jsxs(CheckboxContainer$1, { children: [jsxRuntime.jsx(material.FormControlLabel, { control: jsxRuntime.jsx(material.Checkbox, { checked: consents.bank_account_confirmation.checked, onChange: (e) => consents.bank_account_confirmation.onChange(e.target.checked), name: "bank_account_confirmation" }), label: jsxRuntime.jsx(CheckboxLabel$1, { children: consents.bank_account_confirmation.label ||
                                     defaultBankConfirmationLabel }) }), consents.bank_account_confirmation.error && (jsxRuntime.jsx(material.Typography, Object.assign({ sx: {
                                 color: 'error.main',
                                 fontSize: '12px',
                                 mt: 0.5,
                                 ml: 4,
+                                wordSpacing: '-5px',
                             } }, { children: consents.bank_account_confirmation.error })))] })), desktopGridLayout ? (jsxRuntime.jsx(FullWidthField$1, { children: jsxRuntime.jsx(CheckboxContainer$1, { children: jsxRuntime.jsx(material.FormControlLabel, { control: jsxRuntime.jsx(material.Checkbox, { checked: consents.marketing_consent.checked, onChange: (e) => consents.marketing_consent.onChange(e.target.checked), name: "marketing_consent" }), label: jsxRuntime.jsx(CheckboxLabel$1, { children: consents.marketing_consent.label || defaultMarketingLabel }) }) }) })) : (jsxRuntime.jsx(CheckboxContainer$1, { children: jsxRuntime.jsx(material.FormControlLabel, { control: jsxRuntime.jsx(material.Checkbox, { checked: consents.marketing_consent.checked, onChange: (e) => consents.marketing_consent.onChange(e.target.checked), name: "marketing_consent" }), label: jsxRuntime.jsx(CheckboxLabel$1, { children: consents.marketing_consent.label || defaultMarketingLabel }) }) }))] })) })));
 };
 
@@ -3773,6 +3762,7 @@ const ChildInformationForm = ({ renderField, fields, onSubmit, formRef, sx, desk
                                     ml: 2,
                                     color: '#5F5E62',
                                     fontSize: '12px',
+                                    wordSpacing: '-5px',
                                 } }, { children: fields.full_name.helperText })))] }), fields.nric ? renderField(fields.nric) : renderField(fields.date_of_birth), fields.nric && renderField(fields.date_of_birth), renderField(fields.gender), renderField(fields.nationality)] }) })));
     }
     // Mobile layout - single column
@@ -3782,6 +3772,7 @@ const ChildInformationForm = ({ renderField, fields, onSubmit, formRef, sx, desk
                                 ml: 2,
                                 color: '#5F5E62',
                                 fontSize: '12px',
+                                wordSpacing: '-5px',
                             } }, { children: fields.full_name.helperText })))] }), fields.nric && renderField(fields.nric), renderField(fields.date_of_birth), renderField(fields.gender), renderField(fields.nationality)] })) })));
 };
 
@@ -3800,23 +3791,23 @@ const FAQContainer = material.styled(material.Box)(({ theme }) => ({
     backgroundColor: '#ffffff',
     [theme.breakpoints.up('md')]: {
         padding: '70px 0',
-        gap: '32px',
+        gap: '40px',
     },
 }));
 const FAQTitle = material.styled(material.Typography)(({ theme }) => ({
     fontWeight: 700,
     fontSize: '20px',
     lineHeight: '28px',
-    wordSpacing: '-5px',
+    wordSpacing: '0px',
     textAlign: 'center',
     width: '100%',
     margin: 0,
     [theme.breakpoints.up('md')]: {
         fontSize: '28px',
-        lineHeight: '36px',
+        lineHeight: '38px',
     },
 }));
-const StyledAccordion = material.styled(material.Accordion)(({ theme }) => ({
+const StyledAccordion = material.styled(material.Accordion)(() => ({
     backgroundColor: 'transparent',
     boxShadow: 'none',
     borderRadius: 0,
@@ -3829,16 +3820,8 @@ const StyledAccordion = material.styled(material.Accordion)(({ theme }) => ({
     '&.Mui-expanded': {
         margin: 0,
     },
-    [theme.breakpoints.up('md')]: {
-        marginTop: '12px',
-        marginBottom: '12px',
-        '&.Mui-expanded': {
-            marginTop: '12px',
-            marginBottom: '12px',
-        },
-    },
 }));
-const StyledAccordionSummary = material.styled(material.AccordionSummary)(({ theme }) => ({
+const StyledAccordionSummary = material.styled(material.AccordionSummary)(() => ({
     minHeight: '48px',
     padding: '12px 0',
     gap: '6px',
@@ -3853,34 +3836,45 @@ const StyledAccordionSummary = material.styled(material.AccordionSummary)(({ the
     },
     '& .MuiAccordionSummary-expandIconWrapper': {
         transition: 'transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
+        width: '48px',
+        height: '48px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
     },
 }));
 const FAQQuestion = material.styled(material.Typography)(({ theme }) => ({
     fontWeight: 700,
     fontSize: '14px',
     lineHeight: '20px',
-    wordSpacing: '-5px',
+    wordSpacing: '0px',
     flex: 1,
     [theme.breakpoints.up('md')]: {
-        fontSize: '15px',
-        lineHeight: '22px',
+        fontSize: '18px',
+        lineHeight: '24px',
     },
 }));
 const StyledAccordionDetails = material.styled(material.AccordionDetails)(({ theme }) => ({
     fontWeight: 400,
     fontSize: '14px',
     lineHeight: '20px',
-    wordSpacing: '-5px',
+    wordSpacing: '0px',
     padding: '0 0 16px 0',
     [theme.breakpoints.up('md')]: {
-        fontSize: '15px',
-        lineHeight: '22px',
+        fontSize: '16px',
+        lineHeight: '20px',
         padding: '0 0 20px 0',
     },
 }));
-const FAQContentWrapper = material.styled(material.Box)({
+const FAQContentWrapper = material.styled(material.Box)(({ theme }) => ({
     width: '100%',
-});
+    display: 'flex',
+    flexDirection: 'column',
+    borderRadius: '12px',
+    [theme.breakpoints.up('md')]: {
+    // gap: '12px',
+    },
+}));
 
 /**
  * FAQAccordion - Displays a list of frequently asked questions in an accordion format