igloo-d2c-components 1.0.30 → 1.0.32

package/dist/esm/index.js

@@ -979,7 +979,7 @@ const MenuItemButton = styled(Button$1)(() => ({
     fontSize: '18px',
     lineHeight: '24px',
     letterSpacing: '0px',
-    wordSpacing: '-5px',
+    wordSpacing: '0px',
     borderRadius: 0,
     '&:hover': {
         backgroundColor: 'transparent',
@@ -996,7 +996,7 @@ const MenuItemText = styled(Typography)({
     fontSize: '18px',
     lineHeight: '24px',
     letterSpacing: '0px',
-    wordSpacing: '-5px',
+    wordSpacing: '0px',
     color: 'inherit',
 });
 /**
@@ -1037,7 +1037,7 @@ styled(Button$1)(() => ({
     fontSize: '18px',
     lineHeight: '24px',
     letterSpacing: '0px',
-    wordSpacing: '-5px',
+    wordSpacing: '0px',
     borderRadius: 0,
     backgroundColor: 'transparent',
     '&:hover': {
@@ -1066,7 +1066,7 @@ const PurchaseButton = styled(Button$1)(() => ({
     fontSize: '16px',
     lineHeight: '20px',
     letterSpacing: '0px',
-    wordSpacing: '-5px',
+    wordSpacing: '0',
     borderRadius: '24px',
     whiteSpace: 'nowrap',
     '&:hover': {
@@ -1099,7 +1099,7 @@ const StyledMenuItem$1 = styled(MenuItem)(() => ({
     fontWeight: 500,
     fontSize: '16px',
     lineHeight: '24px',
-    wordSpacing: '-5px',
+    wordSpacing: '0px',
     color: designColors.natural.dim100,
     '&:hover': {
         backgroundColor: 'rgba(0, 144, 218, 0.08)',
@@ -1239,7 +1239,7 @@ const StyledAppBar$1 = styled(AppBar)(({ theme, ispartnershippagemobileview, scr
             },
         },
         [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',
         },
     });
 });
@@ -1250,7 +1250,7 @@ const ResponsiveB2CLayout = styled('div')(({ theme }) => ({
         margin: '0 auto',
     },
 }));
-const StyledContainer = styled(Container)(({ theme, ispartnershippagemobileview, scrolled }) => {
+const StyledContainer = styled(Container)(({ theme, scrolled }) => {
     var _a;
     return ({
         boxShadow: 'none',
@@ -1286,7 +1286,7 @@ const ButtonDesktopMenu = styled(Button$1)(({ theme }) => {
         alignSelf: 'stretch',
     });
 });
-const AnchorLinks = styled('a')(({ theme }) => ({
+const AnchorLinks = styled('a')(() => ({
     color: 'inherit',
     '&:hover': {
         color: 'inherit',
@@ -1328,7 +1328,7 @@ const ButtonAuth = styled(Button$1)(({ theme }) => ({
     height: 40,
     minWidth: 'max-content !important',
 }));
-const TypographyAuth = styled(Typography)(({ theme }) => ({
+const TypographyAuth = styled(Typography)(() => ({
     textTransform: 'none',
 }));
 const StyledMenu = styled(Menu)(({ theme }) => {
@@ -1378,13 +1378,13 @@ const StyledMenuItem = styled(MenuItem)(({ theme }) => {
         },
     });
 });
-const SpanImageWrapper = styled('span')(({ theme }) => ({
+const SpanImageWrapper = styled('span')(() => ({
     alignItems: 'center',
     display: 'flex',
     justifyContent: 'center',
     margin: 'auto 0',
 }));
-const ImageProductIcon = styled('img')(({ theme }) => ({
+const ImageProductIcon = styled('img')(() => ({
     aspectRatio: 1,
     objectPosition: 'center',
     width: 18,
@@ -1451,7 +1451,7 @@ const StyledDrawer$3 = styled(Drawer)(({ theme }) => {
         },
     });
 });
-const DivLogoWrapper = styled('div')(({ theme }) => ({
+const DivLogoWrapper = styled('div')(() => ({
     justifyContent: 'space-between',
     alignSelf: 'stretch',
     backgroundColor: '',
@@ -1476,7 +1476,7 @@ const DivLogo = styled('div')(({ theme }) => {
         },
     });
 });
-const DivCrossIconWrapper = styled('div')(({ theme }) => ({
+const DivCrossIconWrapper = styled('div')(() => ({
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
@@ -1489,14 +1489,14 @@ const StyledCloseIconBtn = styled(IconButton)(({ theme }) => {
         padding: '0 !important',
     });
 });
-const DivLoginActionContainer = styled('div')(({ theme }) => ({
+const DivLoginActionContainer = styled('div')(() => ({
     justifyContent: 'center',
     alignSelf: 'stretch',
     display: 'flex',
     flexDirection: 'column',
     padding: ' 0 16px',
 }));
-const DivCommonMenus = styled('div')(({ theme }) => ({
+const DivCommonMenus = styled('div')(() => ({
     padding: 16,
     display: 'flex',
     flexDirection: 'column',
@@ -1516,7 +1516,7 @@ const MenuItemOtherLinks = styled(MenuItem)(({ theme }) => ({
     width: '100%',
     gap: '50%',
 }));
-const StyledFormControlLabel = styled(FormControlLabel)(({ theme }) => ({
+const StyledFormControlLabel = styled(FormControlLabel)(() => ({
     '& .MuiRadio-root': {
         padding: '0 9px',
     },
@@ -1538,10 +1538,10 @@ const ButtonLogout = styled(Button$1)(({ theme }) => {
         color: `${((_b = theme.palette.secondary) === null || _b === void 0 ? void 0 : _b.main) || '#f00'} !important`,
     });
 });
-const DivLogoutBtnWrapper = styled('div')(({ theme }) => ({
+const DivLogoutBtnWrapper = styled('div')(() => ({
     margin: 16,
 }));
-const AnchorLink$1 = styled('a')(({ theme }) => ({
+const AnchorLink$1 = styled('a')(() => ({
     color: 'inherit',
     '&:hover': {
         color: 'inherit',
@@ -1558,7 +1558,7 @@ const StyledButton$1 = styled(Button$1)(({ theme }) => {
         padding: '10px 24px',
     });
 });
-const StyledButtonBanner = styled(Button$1)(({ theme }) => ({
+const StyledButtonBanner = styled(Button$1)(() => ({
     alignSelf: 'start',
     height: '40px',
     borderRadius: '100px',
@@ -1587,10 +1587,9 @@ const TypographyBtnText = styled(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 = useTheme();
     const themeBreakpoint = 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;
@@ -1770,19 +1769,19 @@ const StyledToolbar = styled(Toolbar)(({ theme }) => ({
         padding: '12px 16px',
     },
 }));
-const LogoContainer$1 = styled('div')(({ theme }) => ({
+const LogoContainer$1 = styled('div')(() => ({
     display: 'flex',
     alignItems: 'center',
     cursor: 'pointer',
     height: '16px',
     width: '116px',
 }));
-const LogoImage = styled('img')(({ theme }) => ({
+const LogoImage = styled('img')(() => ({
     height: '16px',
     width: '116px',
     objectFit: 'contain',
 }));
-const MenuIconButton = styled(IconButton)(({ theme }) => ({
+const MenuIconButton = styled(IconButton)(() => ({
     padding: '6px',
     borderRadius: '25px',
     width: '40px',
@@ -1792,26 +1791,26 @@ const MenuIconButton = styled(IconButton)(({ theme }) => ({
         fontSize: '24px',
     },
 }));
-const StyledDrawer$2 = styled(Drawer)(({ theme }) => ({
+const StyledDrawer$2 = styled(Drawer)(() => ({
     '& .MuiDrawer-paper': {
         backgroundColor: '#FFFFFF',
         boxSizing: 'border-box',
     },
 }));
-const DrawerHeader$2 = styled(Box)(({ theme }) => ({
+const DrawerHeader$2 = styled(Box)(() => ({
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'space-between',
     padding: '12px 16px',
     minHeight: '64px',
 }));
-const DrawerLogoContainer = styled('div')(({ theme }) => ({
+const DrawerLogoContainer = styled('div')(() => ({
     display: 'flex',
     alignItems: 'center',
     cursor: 'pointer',
     height: '32px',
 }));
-const CloseIconButton = styled(IconButton)(({ theme }) => ({
+const CloseIconButton = styled(IconButton)(() => ({
     padding: '6px',
     '& .MuiSvgIcon-root': {
         color: '#000000',
@@ -1840,7 +1839,7 @@ styled(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;
@@ -1871,18 +1870,12 @@ function NewHeader({ logo: propLogo, navigationLinks = [], additionalMenuSection
     return (jsxs(Fragment, { children: [jsx(StyledAppBar, Object.assign({ position: "fixed" }, { children: jsxs(StyledToolbar, Object.assign({ disableGutters: true }, { children: [jsx(LogoContainer$1, Object.assign({ onClick: handleLogoClick }, { children: jsx(LogoImage, { src: logo, alt: "Logo" }) })), jsx(MenuIconButton, Object.assign({ size: "large", edge: "end", "aria-label": "menu", onClick: handleDrawerOpen }, { children: jsx(MenuIcon, {}) }))] })) })), jsx(StyledDrawer$2, Object.assign({ anchor: "right", open: drawerOpen, onClose: handleDrawerClose }, { children: customDrawerContent ? (jsx(Box, Object.assign({ sx: { width: isMobile ? '100vw' : 350 } }, { children: customDrawerContent }))) : (jsxs(Box, Object.assign({ sx: { width: isMobile ? '100vw' : 350 } }, { children: [jsxs(DrawerHeader$2, { children: [jsx(DrawerLogoContainer, Object.assign({ onClick: handleLogoClick }, { children: jsx(LogoImage, { src: logo, alt: "Logo" }) })), jsx(CloseIconButton, Object.assign({ onClick: handleDrawerClose, "aria-label": "close" }, { children: jsx(CloseIcon, {}) }))] }), jsx(Divider, {}), jsx(DrawerContent$2, { children: navigationLinks.length > 0 && (jsx(List, { children: navigationLinks.map((item) => (jsx(ListItem, Object.assign({ disablePadding: true }, { children: jsx(ListItemButton, Object.assign({ onClick: () => handleMenuItemClick(item) }, { children: jsx(ListItemText, { primary: formatMessage({ id: item.label }) }) })) }), item.key))) })) })] }))) }))] }));
 }
 
-const DivFooter = styled('div')(({ theme }) => ({
+const DivFooter = styled('div')(() => ({
     backgroundColor: '#424242',
     padding: '20px 16px',
     '@media (min-width: 769px)': {
         padding: '70px 0px',
     },
-    anchorLinks: {
-        color: 'inherit',
-        '&:hover': {
-            color: 'inherit',
-        },
-    },
 }));
 const DivFooterConterResponsiveLayout = styled('div')(({ theme }) => ({
     color: '#fff',
@@ -1892,7 +1885,7 @@ const DivFooterConterResponsiveLayout = styled('div')(({ theme }) => ({
         margin: '0 auto',
     },
 }));
-const FooterHiddenContent = styled('div')(({ theme, simplifiedLayout }) => simplifiedLayout ? { display: 'none' } : { display: 'flex' });
+const FooterHiddenContent = styled('div')(({ simplifiedLayout }) => simplifiedLayout ? { display: 'none' } : { display: 'flex' });
 const DivIglooIntro = styled('div')(({ theme }) => {
     var _a;
     return ({
@@ -1906,7 +1899,7 @@ const DivIglooIntro = styled('div')(({ theme }) => {
         },
     });
 });
-const DivSocial = styled('div')(({ theme }) => ({
+const DivSocial = styled('div')(() => ({
     display: 'flex',
     alignItems: 'center',
     margin: '0 auto',
@@ -1924,14 +1917,14 @@ const ButtonIcon = styled(Button$1)(({ theme }) => {
         minWidth: 'auto !important',
     });
 });
-const TypographyIntro = styled(Typography)(({ theme }) => ({
+const TypographyIntro = styled(Typography)(() => ({
     textAlign: 'center',
     color: `#fff !important`,
     '@media (min-width: 769px)': {
         textAlign: 'left',
     },
 }));
-const TypographyAddressFooter = styled(Typography)(({ theme }) => ({
+const TypographyAddressFooter = styled(Typography)(() => ({
     marginTop: 16,
     textAlign: 'center',
     color: '#fff',
@@ -1939,7 +1932,7 @@ const TypographyAddressFooter = styled(Typography)(({ theme }) => ({
         textAlign: 'left',
     },
 }));
-const DivLogos = styled('div')(({ theme }) => ({
+const DivLogos = styled('div')(() => ({
     display: 'flex',
     flexDirection: 'column',
     gap: 16,
@@ -1952,12 +1945,12 @@ const DivLogos = styled('div')(({ theme }) => ({
         alignItems: 'baseline',
     },
 }));
-const DivFirstRow = styled('div')(({ theme }) => ({
+const DivFirstRow = styled('div')(() => ({
     display: 'flex',
     flexDirection: 'row',
     gap: 16,
 }));
-const ButtonOjkLink = styled(Button$1)(({ theme }) => ({
+const ButtonOjkLink = styled(Button$1)(() => ({
     display: 'flex',
     justifyContent: 'flex-start',
     '@media (min-width: 769px)': {
@@ -1965,18 +1958,18 @@ const ButtonOjkLink = styled(Button$1)(({ theme }) => ({
         justifyContent: 'flex-start !important ',
     },
 }));
-const ImageOjkLicense = styled('img')(({ theme }) => ({
+const ImageOjkLicense = styled('img')(() => ({
     alignSelf: 'flex-start',
     height: 36,
 }));
-const ButtonSolisoustamaLink = styled(Button$1)(({ theme }) => ({
+const ButtonSolisoustamaLink = styled(Button$1)(() => ({
     display: 'flex',
     justifyContent: 'flex-start',
 }));
-const ImageSolisoustama = styled('img')(({ theme }) => ({
+const ImageSolisoustama = styled('img')(() => ({
     height: 'auto',
 }));
-const DivLinks = styled('div')(({ theme }) => ({
+const DivLinks = styled('div')(() => ({
     display: 'flex',
     flex: 1,
     alignItems: 'center',
@@ -1987,7 +1980,7 @@ const DivLinks = styled('div')(({ theme }) => ({
         alignItems: 'normal',
     },
 }));
-const DivSection = styled('div')(({ theme }) => ({
+const DivSection = styled('div')(() => ({
     display: 'flex',
     flexDirection: 'column',
     gap: 16,
@@ -2000,7 +1993,7 @@ const DivSection = styled('div')(({ theme }) => ({
         },
     },
 }));
-const ButtonBottomLink = styled(Button$1)(({ theme }) => ({
+const ButtonBottomLink = styled(Button$1)(() => ({
     color: '#fff !important',
     textTransform: 'capitalize',
     '@media (min-width: 769px)': {
@@ -2009,22 +2002,22 @@ const ButtonBottomLink = styled(Button$1)(({ theme }) => ({
         minWidth: 'auto !important',
     },
 }));
-const StyledDivider = styled(Divider)(({ theme }) => ({
+const StyledDivider = styled(Divider)(() => ({
     margin: '24px 0 16px !important',
     borderColor: '#5F5E62 !important',
 }));
-const DivBottom = styled('div')(({ theme }) => ({
+const DivBottom = styled('div')(() => ({
     display: 'flex',
     justifyContent: 'space-between',
     alignItems: 'center',
 }));
-const DivSep = styled('div')(({ theme }) => ({
+const DivSep = styled('div')(() => ({
     width: '1px',
     height: 10,
     borderRadius: '1px',
     backgroundColor: '#fff',
 }));
-const AnchorLink = styled('a')(({ theme }) => ({
+const AnchorLink = styled('a')(() => ({
     color: 'inherit',
     '&:hover': {
         color: 'inherit',
@@ -2047,8 +2040,7 @@ const AnchorLink = 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 = useTheme();
     const themeBreakpoint = 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;
@@ -2065,7 +2057,7 @@ function Footer({ simplifiedLayout = false, introText, addressText, socialLinks,
                                     }), index === navigationLinks.length - 1 && (jsxs(Fragment, { children: [jsx(ButtonBottomLink, Object.assign({ onClick: onPrivacyPolicyClick }, { children: jsx(Typography, Object.assign({ variant: "body1" }, { children: 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' }) })) })) })), jsx(ButtonBottomLink, Object.assign({ onClick: onTermsOfServiceClick }, { children: jsx(Typography, Object.assign({ variant: "body1" }, { children: 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' }) })) })) })), jsx(DivSocial, { children: socialLinks.map((social) => (jsx(ButtonIcon, Object.assign({ onClick: () => onSocialClick === null || onSocialClick === void 0 ? void 0 : onSocialClick(social.platform, social.url), "aria-label": social.ariaLabel || social.platform }, { children: jsx(AnchorLink, Object.assign({ href: social.url, onClick: (e) => e === null || e === void 0 ? void 0 : e.preventDefault() }, { children: jsx("img", { src: social.icon, alt: social.platform, height: isMobile ? '24' : '28', width: isMobile ? '24' : '28', loading: "lazy" }) })) }), social.platform))) })] }))] }, index))) }))] })), isMobile && jsx(StyledDivider, {}), isMobile && (jsx(DivBottom, { children: jsxs(DivLinks, { children: [jsx("div", Object.assign({ onClick: onPrivacyPolicyClick, style: { cursor: 'pointer' } }, { children: jsx(Typography, Object.assign({ variant: "body2" }, { children: 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' }) })) })) })), jsx(DivSep, {}), jsx("div", Object.assign({ onClick: onTermsOfServiceClick, style: { cursor: 'pointer' } }, { children: jsx(Typography, Object.assign({ variant: "body2" }, { children: 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 = styled(Drawer)(({ theme }) => ({
+const StyledDrawer$1 = styled(Drawer)(() => ({
     zIndex: '1300 !important',
     '& .MuiDrawer-root': {
         zIndex: 1300,
@@ -2080,36 +2072,36 @@ const StyledDrawer$1 = styled(Drawer)(({ theme }) => ({
         zIndex: 1299,
     },
 }));
-const DrawerHeader$1 = styled(Box)(({ theme }) => ({
+const DrawerHeader$1 = styled(Box)(() => ({
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'flex-end',
     padding: '16px',
     minHeight: '56px',
 }));
-const DrawerContent$1 = styled(Box)(({ theme }) => ({
+const DrawerContent$1 = styled(Box)(() => ({
     flex: 1,
     overflowY: 'auto',
     padding: '16px 0',
 }));
-const DrawerFooter = styled(Box)(({ theme }) => ({
+const DrawerFooter = styled(Box)(() => ({
     padding: '16px',
     backgroundColor: '#FFFFFF',
     borderTop: 'none',
     boxShadow: '0px -2px 8px rgba(0, 0, 0, 0.08)',
 }));
-styled(Button$1)(({ theme }) => ({
+styled(Button$1)(() => ({
     minWidth: 'auto',
     padding: 0,
 }));
-const HeaderSection = styled(Box)(({ theme }) => ({
+const HeaderSection = styled(Box)(() => ({
     backgroundColor: '#FFFFFF',
     padding: '16px',
     display: 'flex',
     flexDirection: 'column',
     gap: '12px',
 }));
-const CategoryIcon = styled(Box)(({ theme }) => ({
+const CategoryIcon = styled(Box)(() => ({
     width: '32px',
     height: '32px',
     display: 'flex',
@@ -2127,21 +2119,21 @@ const TitleText = styled(Typography)(({ theme }) => ({
         lineHeight: '24px',
     },
 }));
-const SubtitleText = styled(Typography)(({ theme }) => ({
+const SubtitleText = styled(Typography)(() => ({
     fontWeight: 400,
     fontSize: '14px',
     lineHeight: '18px',
     wordSpacing: '-5px',
     color: '#5F5E62',
 }));
-const FooterButtons = styled(Box)(({ theme }) => ({
+const FooterButtons = styled(Box)(() => ({
     display: 'flex',
     flexDirection: 'column',
     gap: '16px',
     width: '100%',
 }));
 // Base button styles - colors will be injected via sx prop from component
-const PrimaryButton = styled(Button$1)(({ theme }) => ({
+const PrimaryButton = styled(Button$1)(() => ({
     color: '#FFFFFF',
     borderRadius: '24px',
     height: '48px',
@@ -2155,7 +2147,7 @@ const PrimaryButton = styled(Button$1)(({ theme }) => ({
         color: '#FFFFFF',
     },
 }));
-const SecondaryButton = styled(Button$1)(({ theme }) => ({
+const SecondaryButton = styled(Button$1)(() => ({
     borderRadius: '8px',
     height: '40px',
     textTransform: 'none',
@@ -2183,13 +2175,11 @@ const SecondaryButton = styled(Button$1)(({ 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 = useTheme();
-    useMediaQuery((_a = muiTheme === null || muiTheme === void 0 ? void 0 : muiTheme.breakpoints) === null || _a === void 0 ? void 0 : _a.down('md'));
+    var _a, _b, _c;
+    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);
@@ -2234,7 +2224,7 @@ function RecommendationsDrawer({ open, onClose, children, headerIcon, title, sub
                                 } }, { children: formatMessage({ id: secondaryButtonText }) })))] })) }))] })) })));
 }
 
-const StyledDrawer = styled$1(Drawer)(({ theme }) => ({
+const StyledDrawer = styled$1(Drawer)(() => ({
     zIndex: 1300,
     '& .MuiDrawer-paper': {
         borderTopLeftRadius: '8px',
@@ -2368,7 +2358,7 @@ function ProductSelectionDrawer({ open, onClose, products, onProductSelect, titl
                                     } }, { children: viewPlansButtonText }))] }, product.id))) }) })] }) })));
 }
 
-const QuestionContainer$1 = styled(Box)(({ theme }) => ({
+const QuestionContainer$1 = styled(Box)(() => ({
     backgroundColor: '#FFFFFF',
     padding: '12px 16px',
     display: 'flex',
@@ -2376,7 +2366,7 @@ const QuestionContainer$1 = styled(Box)(({ theme }) => ({
     gap: '16px',
     width: '100%',
 }));
-const QuestionHeader = styled(Box)(({ theme }) => ({
+const QuestionHeader = styled(Box)(() => ({
     display: 'flex',
     flexDirection: 'column',
     gap: '6px',
@@ -2430,7 +2420,7 @@ const OptionsContainer$1 = styled(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);
@@ -2568,7 +2558,7 @@ function OptionButton({ value, label, icon, selected = false, disabled = false,
     return (jsx(StyledOptionButton, Object.assign({ selected: selected, disabled: disabled, onClick: handleClick, size: size, fullWidth: fullWidth, colorVariant: variant }, { children: jsxs(OptionContent, { children: [icon && jsx(OptionIcon, { children: icon }), jsx(OptionLabel, Object.assign({ selected: selected, disabled: disabled, colorVariant: variant }, { children: formatMessage({ id: label }) }))] }) })));
 }
 
-const ToggleContainer$1 = styled(Box)(({ theme }) => ({
+const ToggleContainer$1 = styled(Box)(() => ({
     backgroundColor: '#F9F9F9',
     borderRadius: '40px',
     display: 'flex',
@@ -2577,7 +2567,7 @@ const ToggleContainer$1 = styled(Box)(({ theme }) => ({
     padding: '0',
     width: '100%',
 }));
-const ToggleButton$1 = styled(ButtonBase)(({ theme, selected }) => ({
+const ToggleButton$1 = styled(ButtonBase)(({ selected }) => ({
     flex: 1,
     display: 'flex',
     alignItems: 'center',
@@ -2591,7 +2581,7 @@ const ToggleButton$1 = styled(ButtonBase)(({ theme, selected }) => ({
         backgroundColor: selected ? '#00D080' : 'rgba(0, 0, 0, 0.04)',
     },
 }));
-const ToggleIcon = styled(Box)(({ theme }) => ({
+const ToggleIcon = styled(Box)(() => ({
     backgroundColor: '#FFFFFF',
     borderRadius: '50px',
     width: '32px',
@@ -2601,7 +2591,7 @@ const ToggleIcon = styled(Box)(({ theme }) => ({
     justifyContent: 'center',
     padding: '6px',
 }));
-const ToggleLabel = styled(Typography)(({ theme, selected }) => ({
+const ToggleLabel = styled(Typography)(({ selected }) => ({
     fontFamily: '"Montserrat", sans-serif',
     fontWeight: 600,
     fontSize: '14px',
@@ -2748,12 +2738,12 @@ const ToggleButton = styled(Box)(({ theme, active }) => {
     });
 });
 const ToggleText = styled(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',
     });
@@ -2814,7 +2804,7 @@ const CalloutContainer = styled(Box)(({ theme }) => {
         width: '100%',
     });
 });
-const CalloutHeader = styled(Box)(({ theme }) => ({
+const CalloutHeader = styled(Box)(() => ({
     display: 'flex',
     gap: '4px',
     alignItems: 'center',
@@ -2828,14 +2818,14 @@ const CalloutIcon = styled(InfoIcon)(({ theme }) => {
     });
 });
 const CalloutTitle = styled(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',
@@ -2843,15 +2833,14 @@ const CalloutTitle = styled(Typography)(({ theme }) => {
     });
 });
 const CalloutText = styled(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',
@@ -2899,22 +2888,21 @@ const SliderContainer = styled(Box)(({ theme }) => {
         width: '100%',
     });
 });
-const InputSection = styled(Box)(({ theme }) => ({
+const InputSection = styled(Box)(() => ({
     display: 'flex',
     flexDirection: 'column',
     gap: '8px',
     width: '100%',
 }));
 const InputLabel = styled(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 = styled(Box)(({ theme }) => {
@@ -2930,24 +2918,23 @@ const InputContainer = styled(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 = styled(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,
     });
 });
-styled(Box)(({ theme }) => ({
+styled(Box)(() => ({
     display: 'flex',
     alignItems: 'center',
     position: 'relative',
@@ -2987,7 +2974,7 @@ styled(Box)(({ theme, active }) => {
         },
     });
 });
-styled(Box)(({ theme }) => ({
+styled(Box)(() => ({
     position: 'absolute',
     width: '18px',
     height: '18px',
@@ -3016,22 +3003,21 @@ styled(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',
     });
 });
-styled(Box)(({ theme }) => ({
+styled(Box)(() => ({
     display: 'flex',
     justifyContent: 'space-between',
     width: '100%',
-    maxWidth: 'initial', // Match slider track width
+    maxWidth: 'initial',
 }));
 const RangeLabel = styled(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 = styled(Slider)(({ theme, sliderActiveColor, sliderInactiveColor }) => {
@@ -3094,7 +3080,7 @@ const StyledMuiSlider = styled(Slider)(({ theme, sliderActiveColor, sliderInacti
         },
     });
 });
-const SliderLabelsContainer = styled(Box)(({ theme }) => ({
+const SliderLabelsContainer = styled(Box)(() => ({
     display: 'flex',
     justifyContent: 'space-between',
     width: '100%',
@@ -3272,7 +3258,6 @@ const ProductCardContainer = styled(Box)(({ theme, showIndicator }) => {
 const LogoContainer = styled(Box)({
     width: '45px',
     height: '40px',
-    border: '1.25px solid rgba(0, 0, 0, 0.1)',
     borderRadius: '10px',
     display: 'flex',
     alignItems: 'center',
@@ -3455,6 +3440,7 @@ const HealthQuestionGroup = ({ question, questionNumber, value, onChange, error,
                     color: 'error.main',
                     fontSize: '12px',
                     mt: 0.5,
+                    wordSpacing: '-5px',
                 } }, { children: error })))] })));
 };
 
@@ -3528,18 +3514,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 ? (jsx(FullWidthField$1, { children: jsxs(CheckboxContainer$1, { children: [jsx(FormControlLabel, { control: jsx(Checkbox, { checked: consents.bank_account_confirmation.checked, onChange: (e) => consents.bank_account_confirmation.onChange(e.target.checked), name: "bank_account_confirmation" }), label: jsx(CheckboxLabel$1, { children: consents.bank_account_confirmation.label ||
                                         defaultBankConfirmationLabel }) }), consents.bank_account_confirmation.error && (jsx(Typography, Object.assign({ sx: {
                                     color: 'error.main',
                                     fontSize: '12px',
                                     mt: 0.5,
                                     ml: 4,
+                                    wordSpacing: '-5px',
                                 } }, { children: consents.bank_account_confirmation.error })))] }) })) : (jsxs(CheckboxContainer$1, { children: [jsx(FormControlLabel, { control: jsx(Checkbox, { checked: consents.bank_account_confirmation.checked, onChange: (e) => consents.bank_account_confirmation.onChange(e.target.checked), name: "bank_account_confirmation" }), label: jsx(CheckboxLabel$1, { children: consents.bank_account_confirmation.label ||
                                     defaultBankConfirmationLabel }) }), consents.bank_account_confirmation.error && (jsx(Typography, Object.assign({ sx: {
                                 color: 'error.main',
                                 fontSize: '12px',
                                 mt: 0.5,
                                 ml: 4,
+                                wordSpacing: '-5px',
                             } }, { children: consents.bank_account_confirmation.error })))] })), desktopGridLayout ? (jsx(FullWidthField$1, { children: jsx(CheckboxContainer$1, { children: jsx(FormControlLabel, { control: jsx(Checkbox, { checked: consents.marketing_consent.checked, onChange: (e) => consents.marketing_consent.onChange(e.target.checked), name: "marketing_consent" }), label: jsx(CheckboxLabel$1, { children: consents.marketing_consent.label || defaultMarketingLabel }) }) }) })) : (jsx(CheckboxContainer$1, { children: jsx(FormControlLabel, { control: jsx(Checkbox, { checked: consents.marketing_consent.checked, onChange: (e) => consents.marketing_consent.onChange(e.target.checked), name: "marketing_consent" }), label: jsx(CheckboxLabel$1, { children: consents.marketing_consent.label || defaultMarketingLabel }) }) }))] })) })));
 };
 
@@ -3753,6 +3742,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
@@ -3762,6 +3752,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)] })) })));
 };
 
@@ -3780,23 +3771,23 @@ const FAQContainer = styled$1(Box)(({ theme }) => ({
     backgroundColor: '#ffffff',
     [theme.breakpoints.up('md')]: {
         padding: '70px 0',
-        gap: '32px',
+        gap: '40px',
     },
 }));
 const FAQTitle = styled$1(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 = styled$1(Accordion)(({ theme }) => ({
+const StyledAccordion = styled$1(Accordion)(() => ({
     backgroundColor: 'transparent',
     boxShadow: 'none',
     borderRadius: 0,
@@ -3809,16 +3800,8 @@ const StyledAccordion = styled$1(Accordion)(({ theme }) => ({
     '&.Mui-expanded': {
         margin: 0,
     },
-    [theme.breakpoints.up('md')]: {
-        marginTop: '12px',
-        marginBottom: '12px',
-        '&.Mui-expanded': {
-            marginTop: '12px',
-            marginBottom: '12px',
-        },
-    },
 }));
-const StyledAccordionSummary = styled$1(AccordionSummary)(({ theme }) => ({
+const StyledAccordionSummary = styled$1(AccordionSummary)(() => ({
     minHeight: '48px',
     padding: '12px 0',
     gap: '6px',
@@ -3833,34 +3816,45 @@ const StyledAccordionSummary = styled$1(AccordionSummary)(({ theme }) => ({
     },
     '& .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 = styled$1(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 = styled$1(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 = styled$1(Box)({
+const FAQContentWrapper = styled$1(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