igloo-d2c-components 1.0.34 → 1.0.36

package/dist/cjs/index.js

@@ -1090,10 +1090,10 @@ const PurchaseButton = styles.styled(material.Button)(() => ({
     borderRadius: '24px',
     whiteSpace: 'nowrap',
     '&:hover': {
-        backgroundColor: '#007bb8',
+        backgroundColor: 'rgba(0, 144, 218, 0.7)',
     },
     '&:active': {
-        backgroundColor: '#006a9e',
+        backgroundColor: '#0090DA',
     },
 }));
 /**
@@ -1170,11 +1170,34 @@ function DesktopHeaderMenuBar({ logo, logoAlt = 'Logo', menuItems,
 // Legacy props (deprecated)
 showLoginButton, loginButtonText, onLoginClick, 
 // New CTA props
-showCtaButton = true, ctaButtonText = 'Purchase Now', onCtaClick, ctaScrollTargetId, onScrollToSection, onLogoClick, formatMessage = (descriptor) => descriptor.id, className, }) {
+showCtaButton = true, ctaButtonText = 'Purchase Now', onCtaClick, ctaScrollTargetId, onScrollToSection, onLogoClick, formatMessage = (descriptor) => descriptor.id, className, 
+// Language switcher props
+languages = [], currentLocale, onLanguageChange, }) {
     var _a;
     // Track which dropdown is currently open (for backward compatibility)
     const [openMenuKey, setOpenMenuKey] = React__namespace.useState(null);
     const [anchorEl, setAnchorEl] = React__namespace.useState(null);
+    // Language menu state
+    const [langAnchorEl, setLangAnchorEl] = React__namespace.useState(null);
+    const isLangMenuOpen = Boolean(langAnchorEl);
+    const handleLangMenuOpen = (event) => {
+        setLangAnchorEl(event.currentTarget);
+    };
+    const handleLangMenuClose = () => {
+        setLangAnchorEl(null);
+    };
+    const handleLangSelect = (locale, value) => {
+        onLanguageChange === null || onLanguageChange === void 0 ? void 0 : onLanguageChange(locale, value);
+        handleLangMenuClose();
+    };
+    // Derive short code for language switch trigger (per Figma: "EN" with chevron)
+    const currentLangShortCode = React__namespace.useMemo(() => {
+        var _a;
+        const match = languages.find((l) => l.locale === currentLocale);
+        if (match === null || match === void 0 ? void 0 : match.shortCode)
+            return match.shortCode;
+        return ((_a = match === null || match === void 0 ? void 0 : match.locale) === null || _a === void 0 ? void 0 : _a.toUpperCase().substring(0, 2)) || 'EN';
+    }, [languages, currentLocale]);
     // Determine which button props to use (support legacy props)
     const shouldShowCtaButton = (_a = showCtaButton !== null && showCtaButton !== void 0 ? showCtaButton : showLoginButton) !== null && _a !== void 0 ? _a : true;
     const ctaText = ctaButtonText || loginButtonText || 'Purchase Now';
@@ -1241,7 +1264,20 @@ showCtaButton = true, ctaButtonText = 'Purchase Now', onCtaClick, ctaScrollTarge
                                         horizontal: 'left',
                                     }, MenuListProps: {
                                         'aria-labelledby': `menu-button-${item.key}`,
-                                    } }, { children: item.subItems.map((subItem) => (jsxRuntime.jsxs(StyledMenuItem$1, Object.assign({ onClick: () => handleSubItemClick(item, subItem.key), "data-testid": `submenu-item-${subItem.key}` }, { children: [subItem.icon && (jsxRuntime.jsx(MenuItemIcon, { src: subItem.icon, alt: subItem.label })), formatMessage({ id: subItem.label })] }), subItem.key))) })))] }, item.key))), shouldShowCtaButton && (jsxRuntime.jsx(PurchaseButton, Object.assign({ onClick: handleCtaButtonClick, "data-testid": "header-cta-button" }, { children: formatMessage({ id: ctaText }) })))] })] }) })));
+                                    } }, { children: item.subItems.map((subItem) => (jsxRuntime.jsxs(StyledMenuItem$1, Object.assign({ onClick: () => handleSubItemClick(item, subItem.key), "data-testid": `submenu-item-${subItem.key}` }, { children: [subItem.icon && (jsxRuntime.jsx(MenuItemIcon, { src: subItem.icon, alt: subItem.label })), formatMessage({ id: subItem.label })] }), subItem.key))) })))] }, item.key))), languages.length > 0 && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(MenuItemButton, Object.assign({ onClick: handleLangMenuOpen, "aria-haspopup": "true", "aria-expanded": isLangMenuOpen, "data-testid": "language-switcher" }, { children: [jsxRuntime.jsx(MenuItemText, { children: currentLangShortCode }), jsxRuntime.jsx(DropdownIcon, { sx: {
+                                                transform: isLangMenuOpen
+                                                    ? 'rotate(180deg)'
+                                                    : 'rotate(0deg)',
+                                                transition: 'transform 0.2s',
+                                            } })] })), jsxRuntime.jsx(StyledMenu$1, Object.assign({ id: "language-menu", anchorEl: langAnchorEl, open: isLangMenuOpen, onClose: handleLangMenuClose, anchorOrigin: {
+                                        vertical: 'bottom',
+                                        horizontal: 'left',
+                                    }, transformOrigin: {
+                                        vertical: 'top',
+                                        horizontal: 'left',
+                                    }, MenuListProps: {
+                                        'aria-labelledby': 'language-switcher',
+                                    } }, { children: languages.map((lang) => (jsxRuntime.jsx(StyledMenuItem$1, Object.assign({ onClick: () => handleLangSelect(lang.locale, lang.value), selected: lang.locale === currentLocale, "data-testid": `lang-${lang.locale}` }, { children: lang.label }), lang.value))) }))] })), shouldShowCtaButton && (jsxRuntime.jsx(PurchaseButton, Object.assign({ onClick: handleCtaButtonClick, "data-testid": "header-cta-button" }, { children: formatMessage({ id: ctaText }) })))] })] }) })));
 }
 
 const StyledAppBar$1 = styles.styled(AppBar)(({ theme, ispartnershippagemobileview, scrolled }) => {
@@ -1660,7 +1696,7 @@ function Header$1({ logo, navigationLinks, languages, currentLocale, userToken,
     // Render new desktop layout when enabled and on actual desktop viewport
     // Uses isActuallyDesktop to avoid SSR/prop issues with isMobile detection
     if (useNewDesktopLayout && isActuallyDesktop) {
-        return (jsxRuntime.jsx(DesktopHeaderMenuBar, { logo: logo, logoAlt: "Logo", menuItems: convertedDesktopMenuItems, showCtaButton: showCtaButton, ctaButtonText: ctaButtonText, onCtaClick: onCtaClick, ctaScrollTargetId: ctaScrollTargetId, onScrollToSection: onScrollToSection, onLogoClick: onLogoClick, formatMessage: formatMessage }));
+        return (jsxRuntime.jsx(DesktopHeaderMenuBar, { logo: logo, logoAlt: "Logo", menuItems: convertedDesktopMenuItems, showCtaButton: showCtaButton, ctaButtonText: ctaButtonText, onCtaClick: onCtaClick, ctaScrollTargetId: ctaScrollTargetId, onScrollToSection: onScrollToSection, onLogoClick: onLogoClick, formatMessage: formatMessage, languages: languages, currentLocale: currentLocale, onLanguageChange: onLanguageChange }));
     }
     return (jsxRuntime.jsx(StyledAppBar$1, Object.assign({ ispartnershippagemobileview: isPartnershipPageMobileView, scrolled: scrolled }, { children: jsxRuntime.jsx(ResponsiveB2CLayout, { children: jsxRuntime.jsx(StyledContainer, Object.assign({ ispartnershippagemobileview: isPartnershipPageMobileView, scrolled: scrolled, maxWidth: "xl" }, { children: jsxRuntime.jsxs(material.Toolbar, Object.assign({ disableGutters: true }, { children: [jsxRuntime.jsx("a", Object.assign({ href: host || '#', onClick: (e) => {
                                 e === null || e === void 0 ? void 0 : e.preventDefault();
@@ -2077,7 +2113,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)(() => ({
+const StyledDrawer$1 = styles.styled(material.Drawer)(({ theme }) => ({
     zIndex: '1300 !important',
     '& .MuiDrawer-root': {
         zIndex: 1300,
@@ -2087,17 +2123,26 @@ const StyledDrawer$1 = styles.styled(material.Drawer)(() => ({
         boxSizing: 'border-box',
         overflow: 'hidden',
         zIndex: 1300,
+        [theme.breakpoints.up('md')]: {
+            maxWidth: '680px',
+            margin: '0 auto',
+            borderRadius: '16px',
+        },
     },
     '& .MuiBackdrop-root': {
         zIndex: 1299,
     },
 }));
-const DrawerHeader$1 = styles.styled(material.Box)(() => ({
+const DrawerHeader$1 = styles.styled(material.Box)(({ theme }) => ({
     display: 'flex',
     alignItems: 'center',
-    justifyContent: 'flex-end',
-    padding: '16px',
-    minHeight: '56px',
+    justifyContent: 'flex-start',
+    padding: '16px 24px',
+    minHeight: '64px',
+    [theme.breakpoints.down('md')]: {
+        padding: '16px',
+        minHeight: '56px',
+    },
 }));
 const DrawerContent$1 = styles.styled(material.Box)(() => ({
     flex: 1,
@@ -2176,6 +2221,15 @@ const SecondaryButton = styles.styled(material.Button)(() => ({
     lineHeight: '18px',
     wordSpacing: '-5px',
 }));
+const BackArrowButton = styles.styled(material.IconButton)(() => ({
+    padding: 0,
+    width: '32px',
+    height: '32px',
+    color: '#13131B',
+    '& .MuiSvgIcon-root': {
+        fontSize: '24px',
+    },
+}));
 
 /**
  * RecommendationsDrawer - Mobile drawer for recommendations and forms
@@ -2231,7 +2285,7 @@ function RecommendationsDrawer({ open, onClose, children, headerIcon, title, sub
             },
         }, sx: {
             zIndex: 1300,
-        } }, { children: jsxRuntime.jsxs(material.Box, Object.assign({ sx: { display: 'flex', flexDirection: 'column', height: '100%' } }, { children: [jsxRuntime.jsx(DrawerHeader$1, { children: jsxRuntime.jsx(material.IconButton, Object.assign({ onClick: handleBackOrClose, sx: { padding: 0 }, "aria-label": showBackButton ? 'back' : 'close' }, { children: showBackButton ? jsxRuntime.jsx(ArrowBackIcon, {}) : jsxRuntime.jsx(CloseIcon, {}) })) }), (title || subtitle || headerIcon) && (jsxRuntime.jsxs(HeaderSection, { children: [headerIcon && (jsxRuntime.jsx(CategoryIcon, { children: jsxRuntime.jsx("img", { src: headerIcon, alt: "Category icon", width: 32, height: 32 }) })), title && (jsxRuntime.jsx(TitleText, Object.assign({ variant: "h5" }, { children: formatMessage({ id: title }) }))), subtitle && (jsxRuntime.jsx(SubtitleText, Object.assign({ variant: "body2" }, { children: formatMessage({ id: subtitle }) })))] })), jsxRuntime.jsx(DrawerContent$1, { children: children }), showFooter && (jsxRuntime.jsx(DrawerFooter, { children: customFooter ? (customFooter) : (jsxRuntime.jsxs(FooterButtons, { children: [primaryButtonText && (jsxRuntime.jsx(PrimaryButton, Object.assign({ variant: "contained", fullWidth: true, onClick: onPrimaryAction, disabled: primaryButtonDisabled, sx: {
+        } }, { children: jsxRuntime.jsxs(material.Box, Object.assign({ sx: { display: 'flex', flexDirection: 'column', height: '100%' } }, { children: [jsxRuntime.jsx(DrawerHeader$1, { children: jsxRuntime.jsx(BackArrowButton, Object.assign({ onClick: handleBackOrClose, "aria-label": showBackButton ? 'back' : 'close' }, { children: showBackButton ? jsxRuntime.jsx(ArrowBackIcon, {}) : jsxRuntime.jsx(CloseIcon, {}) })) }), (title || subtitle || headerIcon) && (jsxRuntime.jsxs(HeaderSection, { children: [headerIcon && (jsxRuntime.jsx(CategoryIcon, { children: jsxRuntime.jsx("img", { src: headerIcon, alt: "Category icon", width: 32, height: 32 }) })), title && (jsxRuntime.jsx(TitleText, Object.assign({ variant: "h5" }, { children: formatMessage({ id: title }) }))), subtitle && (jsxRuntime.jsx(SubtitleText, Object.assign({ variant: "body2" }, { children: formatMessage({ id: subtitle }) })))] })), jsxRuntime.jsx(DrawerContent$1, { children: children }), showFooter && (jsxRuntime.jsx(DrawerFooter, { children: customFooter ? (customFooter) : (jsxRuntime.jsxs(FooterButtons, { children: [primaryButtonText && (jsxRuntime.jsx(PrimaryButton, Object.assign({ variant: "contained", fullWidth: true, onClick: onPrimaryAction, disabled: primaryButtonDisabled, sx: {
                                     backgroundColor: primaryColor,
                                     '&:hover': {
                                         backgroundColor: primaryColor,
@@ -2293,12 +2347,25 @@ const DialogContent = material.styled(material.Box)(() => ({
     overflowY: 'auto',
     padding: '24px',
 }));
-const DialogProductsGrid = material.styled(material.Box)(() => ({
+/** Product grid for dialog - matches featured-form-section ProductGrid from life-landing-page */
+const DialogProductsGrid = material.styled(material.Box, {
+    shouldForwardProp: (prop) => prop !== 'productCount',
+})(({ theme, productCount = 1 }) => ({
     display: 'grid',
     gridTemplateColumns: 'repeat(2, 1fr)',
-    gap: '16px',
+    gap: '12px',
+    width: '100%',
+    maxWidth: '744px',
+    [theme.breakpoints.up('md')]: Object.assign(Object.assign({}, (productCount >= 2
+        ? {
+            gridTemplateColumns: `repeat(${productCount}, 158px)`,
+            justifyContent: 'left',
+        }
+        : {
+            gridTemplateColumns: '1fr',
+        })), { gap: '12px' }),
 }));
-const DialogProductCard = material.styled(material.Box)(() => ({
+material.styled(material.Box)(() => ({
     border: '1px solid #E0E0E0',
     borderRadius: '0px',
     padding: '16px',
@@ -2307,13 +2374,13 @@ const DialogProductCard = material.styled(material.Box)(() => ({
     alignItems: 'center',
     gap: '16px',
 }));
-const DialogProductLogo = material.styled(material.Box)(() => ({
+material.styled(material.Box)(() => ({
     height: '32px',
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
 }));
-const DialogProductName = material.styled(material.Typography)(() => ({
+material.styled(material.Typography)(() => ({
     fontFamily: 'Montserrat, sans-serif',
     fontSize: '16px',
     fontWeight: 600,
@@ -2322,7 +2389,7 @@ const DialogProductName = material.styled(material.Typography)(() => ({
     textAlign: 'center',
     wordSpacing: '0px',
 }));
-const DialogProductType = material.styled(material.Typography)(() => ({
+material.styled(material.Typography)(() => ({
     fontFamily: 'Montserrat, sans-serif',
     fontSize: '14px',
     fontWeight: 400,
@@ -2375,45 +2442,120 @@ const ProductsContainer = material.styled(material.Box)({
     padding: '16px',
     backgroundColor: '#ffffff',
 });
-const ProductsGrid = material.styled(material.Box)({
+/** Product grid - matches featured-form-section ProductGrid from life-landing-page */
+const ProductsGrid = material.styled(material.Box, {
+    shouldForwardProp: (prop) => prop !== 'productCount',
+})(({ theme, productCount = 1 }) => ({
     display: 'grid',
     gridTemplateColumns: 'repeat(2, 1fr)',
     gap: '12px',
-});
-const ProductCard$1 = material.styled(material.Box)({
+    width: '100%',
+    maxWidth: '744px',
+    [theme.breakpoints.up('md')]: Object.assign(Object.assign({}, (productCount >= 2
+        ? {
+            gridTemplateColumns: `repeat(${productCount}, 158px)`,
+            justifyContent: 'left',
+        }
+        : {
+            gridTemplateColumns: '1fr',
+        })), { gap: '12px' }),
+}));
+/** Category label above the product card (e.g., "Medical", "Critical Illness") */
+const ProductCategoryLabel = material.styled(material.Typography)(() => ({
+    fontFamily: '"MetLifeCircular", "Montserrat", sans-serif',
+    fontWeight: 500,
+    fontSize: '12px',
+    lineHeight: '16px',
+    color: '#5f5e62',
+    letterSpacing: '0px',
+}));
+/** Product card wrapper: includes category label + card */
+const ProductCardWrapper = material.styled(material.Box)(() => ({
     display: 'flex',
     flexDirection: 'column',
-    gap: '16px',
-    backgroundColor: '#ffffff',
-    borderRadius: '0',
-    boxShadow: '0px 2px 10px 0px rgba(0, 0, 0, 0.12)',
-    padding: '16px 12px 12px',
-    height: '168px',
-});
-const ProductInfo$1 = material.styled(material.Box)({
+    gap: '4px',
+    alignItems: 'flex-start',
+}));
+/** Product card - square, clickable, matches featured-form-section design */
+const ProductCard$1 = material.styled(material.Box)(() => ({
+    position: 'relative',
+    width: '100%',
+    aspectRatio: '1 / 1',
+    border: '1px solid #0090da',
+    borderRadius: '0px',
     display: 'flex',
     flexDirection: 'column',
-    gap: '6px',
+    justifyContent: 'flex-end',
+    cursor: 'pointer',
+    overflow: 'clip',
+    transition: 'border 0.2s ease, box-shadow 0.2s ease',
+    '&:hover': {
+        borderWidth: '2px',
+        boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
+    },
+    '&:focus': {
+        outline: '2px solid #ffffff',
+        outlineOffset: '2px',
+    },
+    '@media (min-width: 900px)': {
+        width: '158px',
+        height: '158px',
+    },
+}));
+/** Background image that fills the product card */
+const ProductCardImage = material.styled('img')(() => ({
+    position: 'absolute',
+    inset: 0,
+    width: '100%',
+    height: '100%',
+    objectFit: 'cover',
+    pointerEvents: 'none',
+}));
+/** Placeholder gradient when no card image is provided */
+const ProductCardPlaceholder = material.styled(material.Box)(() => ({
+    position: 'absolute',
+    inset: 0,
+    background: 'linear-gradient(135deg, #e8f4fd 0%, #b8dff5 100%)',
+    pointerEvents: 'none',
+}));
+/** White bottom bar with logo + product name */
+const ProductCardBottomBar = material.styled(material.Box)(() => ({
+    position: 'relative',
+    display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
-    flex: 1,
-});
-const ProductLogo = material.styled(material.Box)({
+    gap: '4px',
+    height: '32px',
+    width: '100%',
+    flexShrink: 0,
+    backgroundColor: '#ffffff',
+}));
+/** Icon inside the bottom bar */
+const ProductIcon = material.styled(material.Box)(() => ({
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
-    padding: '4px',
-});
+    flexShrink: 0,
+    height: '11px',
+    width: '40.7px',
+    '& img': {
+        width: '100%',
+        height: '100%',
+        objectFit: 'contain',
+    },
+}));
 const ProductName$1 = material.styled(material.Typography)({
-    fontFamily: 'Montserrat, sans-serif',
-    fontSize: '14px',
+    fontFamily: '"MetLifeCircular", "Montserrat", sans-serif',
     fontWeight: 700,
-    lineHeight: '22px',
-    wordSpacing: '-5px',
-    color: '#13131b',
+    fontSize: '14px',
+    lineHeight: '20px',
+    color: '#75787b',
     textAlign: 'center',
+    letterSpacing: '0px',
+    whiteSpace: 'nowrap',
 });
-const ProductType = material.styled(material.Typography)({
+/** @deprecated Use ProductCategoryLabel - kept for Dialog variant */
+material.styled(material.Typography)({
     fontFamily: 'Montserrat, sans-serif',
     fontSize: '12px',
     fontWeight: 400,
@@ -2422,68 +2564,62 @@ const ProductType = material.styled(material.Typography)({
     color: '#13131b',
     textAlign: 'center',
 });
-// Base button styles - colors will be injected via sx prop from component
-const ViewPlansButton = material.styled(material.Button)({
-    color: '#ffffff',
-    borderRadius: '8px',
-    height: '36px',
-    textTransform: 'none',
-    fontSize: '14px',
-    fontWeight: 500,
-    lineHeight: '18px',
-    wordSpacing: '0px',
+/** @deprecated Use new ProductCard - kept for Dialog variant */
+material.styled(material.Box)({
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '6px',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flex: 1,
+});
+/** @deprecated Use ProductIcon - kept for Dialog variant */
+material.styled(material.Box)({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: '4px',
 });
 
 function ProductSelectionDrawer({ open, onClose, products, onProductSelect, title = 'Select your product', subtitle = 'Pick the product that suits your protection goals to view available plans', viewPlansButtonText = 'View plans', variant = 'drawer', }) {
-    var _a, _b, _c, _d, _e, _f;
-    const tenantTheme = useTenantTheme();
-    // Get primary color from tenant theme, fallback to default
-    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';
-    const primaryDark = ((_f = (_e = (_d = tenantTheme === null || tenantTheme === void 0 ? void 0 : tenantTheme.theme) === null || _d === void 0 ? void 0 : _d.palette) === null || _e === void 0 ? void 0 : _e.primary) === null || _f === void 0 ? void 0 : _f.dark) || '#007bb8';
-    const primaryDarker = '#006699'; // Active state
     // Desktop Dialog variant
     if (variant === 'dialog') {
         return (jsxRuntime.jsxs(StyledDialog, Object.assign({ open: open, onClose: onClose, maxWidth: "md", fullWidth: true }, { children: [jsxRuntime.jsxs(DialogHeader, { children: [jsxRuntime.jsx(material.IconButton, Object.assign({ onClick: onClose, sx: {
                                 position: 'absolute',
                                 right: 16,
                                 top: 16,
-                            } }, { children: jsxRuntime.jsx(CloseIcon, {}) })), jsxRuntime.jsx(DialogHeaderTitle, { children: title }), jsxRuntime.jsx(DialogHeaderSubtitle, { children: subtitle })] }), jsxRuntime.jsx(DialogContent, { children: jsxRuntime.jsx(DialogProductsGrid, { children: products.map((product) => (jsxRuntime.jsxs(DialogProductCard, { children: [jsxRuntime.jsx(DialogProductLogo, { children: jsxRuntime.jsx("img", { src: product.logo, alt: product.name, style: {
-                                            width: '88px',
-                                            height: '32px',
-                                            objectFit: 'cover',
-                                        } }) }), jsxRuntime.jsxs(material.Box, Object.assign({ sx: { textAlign: 'center' } }, { children: [jsxRuntime.jsx(DialogProductName, { children: product.name }), jsxRuntime.jsx(DialogProductType, { children: product.type })] })), jsxRuntime.jsx(ViewPlansButton, Object.assign({ variant: "contained", fullWidth: true, onClick: () => onProductSelect(product.id), sx: {
-                                        backgroundColor: primaryColor,
-                                        '&:hover': {
-                                            backgroundColor: primaryDark,
-                                        },
-                                        '&:active': {
-                                            backgroundColor: primaryDarker,
-                                        },
-                                    } }, { children: viewPlansButtonText }))] }, product.id))) }) })] })));
+                            } }, { children: jsxRuntime.jsx(CloseIcon, {}) })), jsxRuntime.jsx(DialogHeaderTitle, { children: title }), jsxRuntime.jsx(DialogHeaderSubtitle, { children: subtitle })] }), jsxRuntime.jsx(DialogContent, { children: jsxRuntime.jsx(DialogProductsGrid, Object.assign({ productCount: products.length }, { children: products.map((product) => {
+                            var _a, _b;
+                            return (jsxRuntime.jsxs(ProductCardWrapper, { children: [jsxRuntime.jsx(ProductCategoryLabel, { children: (_a = product.subtitle) !== null && _a !== void 0 ? _a : product.type }), jsxRuntime.jsxs(ProductCard$1, Object.assign({ onClick: () => onProductSelect(product.id), role: "button", tabIndex: 0, onKeyDown: (e) => {
+                                            if (e.key === 'Enter' || e.key === ' ') {
+                                                e.preventDefault();
+                                                onProductSelect(product.id);
+                                            }
+                                        } }, { children: [product.cardImage ? (jsxRuntime.jsx(ProductCardImage, { src: product.cardImage, alt: product.name })) : (jsxRuntime.jsx(ProductCardPlaceholder, {})), jsxRuntime.jsxs(ProductCardBottomBar, { children: [jsxRuntime.jsx(ProductIcon, { children: jsxRuntime.jsx("img", { src: (_b = product.icon) !== null && _b !== void 0 ? _b : product.logo, alt: "" }) }), jsxRuntime.jsx(ProductName$1, { children: product.name })] })] }))] }, product.id));
+                        }) })) })] })));
     }
     // Mobile Drawer variant (default)
-    return (jsxRuntime.jsx(StyledDrawer, Object.assign({ anchor: "bottom", open: open, onClose: onClose }, { children: jsxRuntime.jsxs(DrawerContent, { children: [jsxRuntime.jsx(DrawerHeader, { children: jsxRuntime.jsx(CloseButtonContainer, { children: jsxRuntime.jsx(material.IconButton, Object.assign({ onClick: onClose, sx: { padding: 0 } }, { children: jsxRuntime.jsx(CloseIcon, { sx: { fontSize: 24, color: '#13131b' } }) })) }) }), jsxRuntime.jsxs(Header, { children: [jsxRuntime.jsx(HeaderTitle, { children: title }), jsxRuntime.jsx(HeaderSubtitle, { children: subtitle })] }), jsxRuntime.jsx(ProductsContainer, { children: jsxRuntime.jsx(ProductsGrid, { children: products.map((product) => (jsxRuntime.jsxs(ProductCard$1, { children: [jsxRuntime.jsxs(ProductInfo$1, { children: [jsxRuntime.jsx(ProductLogo, { children: jsxRuntime.jsx("img", { src: product.logo, alt: product.name, style: {
-                                                    width: '88px',
-                                                    height: '32px',
-                                                    objectFit: 'cover',
-                                                } }) }), jsxRuntime.jsxs(material.Box, Object.assign({ sx: { textAlign: 'center', width: '100%' } }, { children: [jsxRuntime.jsx(ProductName$1, { children: product.name }), jsxRuntime.jsx(ProductType, { children: product.type })] }))] }), jsxRuntime.jsx(ViewPlansButton, Object.assign({ variant: "contained", fullWidth: true, onClick: () => onProductSelect(product.id), sx: {
-                                        backgroundColor: primaryColor,
-                                        '&:hover': {
-                                            backgroundColor: primaryDark,
-                                        },
-                                        '&:active': {
-                                            backgroundColor: primaryDarker,
-                                        },
-                                    } }, { children: viewPlansButtonText }))] }, product.id))) }) })] }) })));
+    return (jsxRuntime.jsx(StyledDrawer, Object.assign({ anchor: "bottom", open: open, onClose: onClose }, { children: jsxRuntime.jsxs(DrawerContent, { children: [jsxRuntime.jsx(DrawerHeader, { children: jsxRuntime.jsx(CloseButtonContainer, { children: jsxRuntime.jsx(material.IconButton, Object.assign({ onClick: onClose, sx: { padding: 0 } }, { children: jsxRuntime.jsx(CloseIcon, { sx: { fontSize: 24, color: '#13131b' } }) })) }) }), jsxRuntime.jsxs(Header, { children: [jsxRuntime.jsx(HeaderTitle, { children: title }), jsxRuntime.jsx(HeaderSubtitle, { children: subtitle })] }), jsxRuntime.jsx(ProductsContainer, { children: jsxRuntime.jsx(ProductsGrid, Object.assign({ productCount: products.length }, { children: products.map((product) => {
+                            var _a, _b;
+                            return (jsxRuntime.jsxs(ProductCardWrapper, { children: [jsxRuntime.jsx(ProductCategoryLabel, { children: (_a = product.subtitle) !== null && _a !== void 0 ? _a : product.type }), jsxRuntime.jsxs(ProductCard$1, Object.assign({ onClick: () => onProductSelect(product.id), role: "button", tabIndex: 0, onKeyDown: (e) => {
+                                            if (e.key === 'Enter' || e.key === ' ') {
+                                                e.preventDefault();
+                                                onProductSelect(product.id);
+                                            }
+                                        } }, { children: [product.cardImage ? (jsxRuntime.jsx(ProductCardImage, { src: product.cardImage, alt: product.name })) : (jsxRuntime.jsx(ProductCardPlaceholder, {})), jsxRuntime.jsxs(ProductCardBottomBar, { children: [jsxRuntime.jsx(ProductIcon, { children: jsxRuntime.jsx("img", { src: (_b = product.icon) !== null && _b !== void 0 ? _b : product.logo, alt: "" }) }), jsxRuntime.jsx(ProductName$1, { children: product.name })] })] }))] }, product.id));
+                        }) })) })] }) })));
 }
 
-const QuestionContainer$1 = styles.styled(material.Box)(() => ({
+const QuestionContainer$1 = styles.styled(material.Box)(({ theme }) => ({
     backgroundColor: '#FFFFFF',
-    padding: '12px 16px',
+    padding: '12px 0px',
     display: 'flex',
     flexDirection: 'column',
     gap: '16px',
     width: '100%',
+    [theme.breakpoints.down('md')]: {
+        padding: '8px 12px',
+    },
 }));
 const QuestionHeader = styles.styled(material.Box)(() => ({
     display: 'flex',
@@ -2574,6 +2710,14 @@ const variantColors = {
         hoverBg: 'rgba(0, 0, 0, 0.02)',
         hoverBorder: '#5f5e62',
     },
+    formLightBorder: {
+        unselectedBorder: '#E0E0E0',
+        unselectedText: '#5f5e62',
+        unselectedBg: 'transparent',
+        selectedBg: 'rgba(61, 147, 222, 0.1)',
+        hoverBg: 'rgba(0, 0, 0, 0.02)',
+        hoverBorder: '#D0D0D0',
+    },
 };
 const StyledOptionButton = styles.styled(material.ButtonBase, {
     shouldForwardProp: (prop) => prop !== 'colorVariant',
@@ -2897,16 +3041,16 @@ function BillingToggle({ value, onChange, formatMessage = (descriptor) => descri
                         ? toggleActiveTextColor
                         : toggleInactiveTextColor,
                 } }, { children: jsxRuntime.jsx(ToggleText, { children: formatMessage({
-                        id: 'Billed monthly',
-                        defaultMessage: 'Billed monthly',
+                        id: 'Billed Monthly',
+                        defaultMessage: 'Billed Monthly',
                     }) }) })), jsxRuntime.jsx(ToggleButton, Object.assign({ active: value === 'annually', onClick: () => onChange('annually'), sx: {
                     backgroundColor: value === 'annually' ? toggleActiveColor : 'transparent',
                     color: value === 'annually'
                         ? toggleActiveTextColor
                         : toggleInactiveTextColor,
                 } }, { children: jsxRuntime.jsx(ToggleText, { children: formatMessage({
-                        id: 'Billed annually',
-                        defaultMessage: 'Billed annually',
+                        id: 'Billed Annually',
+                        defaultMessage: 'Billed Annually',
                     }) }) }))] })));
 }
 
@@ -3454,6 +3598,15 @@ const CheckoutHeader = ({ progress, product, sectionTitle, sectionDescription, s
     return (jsxRuntime.jsxs(HeaderContainer, Object.assign({ sticky: sticky, sx: sx }, { children: [jsxRuntime.jsx(CheckoutProgress, Object.assign({}, progress, { progressBarTheme: progressBarTheme })), product && (jsxRuntime.jsx(material.Box, Object.assign({ sx: { padding: '0 16px 24px' } }, { children: jsxRuntime.jsx(ProductCard, Object.assign({}, product)) }))), jsxRuntime.jsxs(SectionHeader, { children: [jsxRuntime.jsx(SectionTitle$2, { children: sectionTitle }), jsxRuntime.jsx(SectionDescription, { children: sectionDescription })] })] })));
 };
 
+/**
+ * Checkout Form Button - styled components
+ * Aligns with Figma button design system (node 133-11111)
+ *
+ * Filled button tokens:
+ * - Default: #0090da bg, #ffffff text
+ * - Hover: #007AC1
+ * - Disabled: #f2f2f2 bg, #75787b text, 1px solid #a7a8aa
+ */
 const ButtonContainer = styles.styled(material.Box)(({ isFixed, desktopRightAligned }) => ({
     position: isFixed ? 'fixed' : 'relative',
     bottom: 0,
@@ -3463,39 +3616,45 @@ const ButtonContainer = styles.styled(material.Box)(({ isFixed, desktopRightAlig
     padding: '16px',
     boxShadow: isFixed ? '0px 2px 10px 0px rgba(0, 0, 0, 0.12)' : 'none',
     zIndex: 999,
-    // Desktop styles for right-aligned button
-    '@media (min-width: 900px)': desktopRightAligned
-        ? {
-            display: 'flex',
-            justifyContent: 'flex-end',
-            maxWidth: '938px',
-            margin: '0 auto',
-            padding: '24px 0',
-            backgroundColor: 'transparent',
-            boxShadow: 'none',
-            position: 'relative',
-        }
-        : {},
+    // Desktop styles for button alignment
+    '@media (min-width: 900px)': {
+        display: 'flex',
+        justifyContent: desktopRightAligned ? 'flex-end' : 'center',
+        maxWidth: '938px',
+        margin: '0 auto',
+        padding: '24px 0',
+        backgroundColor: 'transparent',
+        boxShadow: 'none',
+        position: 'relative',
+    },
 }));
 const StyledButton = styles.styled('button')(({ isDisabled, desktopWidth }) => ({
     width: '100%',
-    height: '48px',
-    borderRadius: '24px',
+    minHeight: '48px',
+    padding: '14px 32px',
+    borderRadius: '100px',
     border: 'none',
-    backgroundColor: isDisabled
-        ? '#E1E2EB'
-        : '#0090DA',
-    color: isDisabled ? '#929094' : '#fff',
-    fontSize: '14px',
+    backgroundColor: isDisabled ? '#f2f2f2' : '#0090da',
+    color: isDisabled ? '#75787b' : '#ffffff',
+    fontFamily: '"MetLifeCircular", "Roboto", "Helvetica", "Arial", sans-serif',
+    fontSize: '16px',
     fontWeight: 500,
-    lineHeight: '18px',
+    lineHeight: '20px',
+    letterSpacing: 0,
+    textTransform: 'none',
     wordSpacing: '0px',
     cursor: isDisabled ? 'not-allowed' : 'pointer',
-    transition: 'all 0.2s ease',
+    transition: 'all 0.2s ease-in-out',
+    boxSizing: 'border-box',
     '&:hover': {
-        backgroundColor: isDisabled
-            ? '#E1E2EB'
-            : '#007bb8',
+        backgroundColor: isDisabled ? '#f2f2f2' : 'rgba(0, 144, 218, 0.7)',
+    },
+    '&:focus': {
+        outline: isDisabled ? 'none' : '2px solid #0090da',
+        outlineOffset: '2px',
+    },
+    '&:active': {
+        backgroundColor: isDisabled ? '#f2f2f2' : 'rgba(0, 144, 218, 0.7)',
     },
     // Desktop styles for fixed width button
     '@media (min-width: 900px)': desktopWidth
@@ -3507,7 +3666,7 @@ const StyledButton = styles.styled('button')(({ isDisabled, desktopWidth }) => (
 }));
 
 const CheckoutFormButton = ({ text = 'Next', disabled = false, onClick, fixed = true, type = 'button', sx, loading = false, desktopRightAligned = false, desktopWidth = '180px', }) => {
-    return (jsxRuntime.jsx(ButtonContainer, Object.assign({ isFixed: fixed, desktopRightAligned: desktopRightAligned, sx: sx }, { children: jsxRuntime.jsx(StyledButton, Object.assign({ type: type, disabled: disabled || loading, isDisabled: disabled || loading, desktopWidth: desktopRightAligned ? desktopWidth : undefined, onClick: onClick }, { children: loading ? 'Processing...' : text })) })));
+    return (jsxRuntime.jsx(ButtonContainer, Object.assign({ isFixed: fixed, desktopRightAligned: desktopRightAligned, sx: sx }, { children: jsxRuntime.jsx(StyledButton, Object.assign({ type: type, disabled: disabled || loading, isDisabled: disabled || loading, desktopWidth: desktopWidth, onClick: onClick }, { children: loading ? 'Processing...' : text })) })));
 };
 
 const QuestionContainer = styles.styled(material.Box)({
@@ -3634,7 +3793,7 @@ const PersonalInformationForm = ({ renderField, fields, consents, onSubmit, form
                                 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 ||
+                            } }, { children: fields.full_name.helperText })))] }), renderField(fields.nric), renderField(fields.date_of_birth), renderField(fields.gender), renderField(fields.salutation), renderField(fields.nationality), fields.place_of_birth && renderField(fields.place_of_birth), fields.marital_status && renderField(fields.marital_status), fields.race && renderField(fields.race), fields.religion && renderField(fields.religion), renderField(fields.occupation), renderField(fields.industry), renderField(fields.crediting_bank_name), renderField(fields.crediting_bank_account_number), fields.annual_income && renderField(fields.annual_income), 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',
@@ -3717,8 +3876,10 @@ const SectionTitle$1 = styles.styled(material.Typography)({
     wordSpacing: '-5px',
 });
 
-const ContactDetailsForm = ({ renderField, fields, mailingFields, mailingAddressSame, onSubmit, formRef, sx, desktopGridLayout = false, }) => {
+const ContactDetailsForm = ({ renderField, fields, isForChild = false, mailingFields, mailingAddressSame, childContactFields, childContactNotSame, onSubmit, formRef, sx, desktopGridLayout = false, }) => {
     const defaultMailingLabel = 'My mailing address is not the same as residential';
+    const defaultChildContactLabel = 'My child contact details is not the same as residential';
+    const childContactHelperText = 'Tick this box if the child has a different address, phone number, or email';
     const Container = desktopGridLayout ? DesktopFormContainer$2 : FormContainer$2;
     // Helper to render field with or without full width wrapper
     const renderFieldWithLayout = (field, fullWidth = false) => {
@@ -3740,18 +3901,28 @@ const ContactDetailsForm = ({ renderField, fields, mailingFields, mailingAddress
         }
         return content;
     };
-    return (jsxRuntime.jsx(Container, Object.assign({ ref: formRef, component: "form", onSubmit: onSubmit, sx: sx }, { children: desktopGridLayout ? (jsxRuntime.jsxs(FieldsGridContainer$1, { children: [renderFieldWithHelperText(fields.phone_number, false), renderFieldWithLayout(fields.email_address, false), jsxRuntime.jsx(FullWidthField, { children: jsxRuntime.jsx(material.Divider, { sx: { borderColor: 'rgba(0,0,0,0.1)' } }) }), jsxRuntime.jsx(FullWidthField, { children: jsxRuntime.jsx(SectionTitle$1, { children: "Residential address" }) }), renderFieldWithHelperText(fields.residential_address_line1, false), renderFieldWithHelperText(fields.residential_address_line2, false), renderField(fields.postal_code), renderField(fields.city), renderField(fields.state), jsxRuntime.jsx(FullWidthField, { children: jsxRuntime.jsx(material.Divider, { sx: { borderColor: 'rgba(0,0,0,0.1)' } }) }), (mailingAddressSame === null || mailingAddressSame === void 0 ? void 0 : mailingAddressSame.checked) && mailingFields && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(FullWidthField, { children: jsxRuntime.jsx(SectionTitle$1, { children: "Mailing address" }) }), renderFieldWithHelperText(mailingFields.mailing_address_line1, false), renderFieldWithHelperText(mailingFields.mailing_address_line2, false), renderField(mailingFields.mailing_postal_code), renderField(mailingFields.mailing_city), renderField(mailingFields.mailing_state)] })), mailingAddressSame && (jsxRuntime.jsx(FullWidthField, { children: jsxRuntime.jsx(CheckboxContainer, { children: jsxRuntime.jsx(material.FormControlLabel, { control: jsxRuntime.jsx(material.Checkbox, { checked: mailingAddressSame.checked, onChange: (e) => mailingAddressSame.onChange(e.target.checked), name: "mailing_not_same_as_residential", sx: {
+    return (jsxRuntime.jsx(Container, Object.assign({ ref: formRef, component: "form", onSubmit: onSubmit, sx: sx }, { children: desktopGridLayout ? (jsxRuntime.jsxs(FieldsGridContainer$1, { children: [isForChild && (jsxRuntime.jsx(FullWidthField, { children: jsxRuntime.jsx(SectionTitle$1, { children: "Policyowner contact details" }) })), renderFieldWithHelperText(fields.phone_number, false), renderFieldWithLayout(fields.email_address, false), ((mailingAddressSame === null || mailingAddressSame === void 0 ? void 0 : mailingAddressSame.checked) && !isForChild) && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(FullWidthField, { children: jsxRuntime.jsx(material.Divider, { sx: { borderColor: 'rgba(0,0,0,0.1)' } }) }), jsxRuntime.jsx(FullWidthField, { children: jsxRuntime.jsx(SectionTitle$1, { children: "Residential address" }) })] })), renderFieldWithHelperText(fields.residential_address_line1, false), renderFieldWithHelperText(fields.residential_address_line2, false), fields.country && renderField(fields.country), renderField(fields.postal_code), renderField(fields.city), renderField(fields.state), (mailingAddressSame === null || mailingAddressSame === void 0 ? void 0 : mailingAddressSame.checked) && mailingFields && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(FullWidthField, { children: jsxRuntime.jsx(material.Divider, { sx: { borderColor: 'rgba(0,0,0,0.1)' } }) }), jsxRuntime.jsx(FullWidthField, { children: jsxRuntime.jsx(SectionTitle$1, { children: isForChild ? 'Policyowner mailing address' : 'Mailing address' }) }), isForChild && mailingFields.mailing_phone_number && (renderFieldWithHelperText(mailingFields.mailing_phone_number, false)), isForChild && mailingFields.mailing_email_address && (renderFieldWithLayout(mailingFields.mailing_email_address, false)), renderFieldWithHelperText(mailingFields.mailing_address_line1, false), renderFieldWithHelperText(mailingFields.mailing_address_line2, false), mailingFields.mailing_country && renderField(mailingFields.mailing_country), renderField(mailingFields.mailing_postal_code), renderField(mailingFields.mailing_city), renderField(mailingFields.mailing_state)] })), (childContactNotSame === null || childContactNotSame === void 0 ? void 0 : childContactNotSame.checked) && childContactFields && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(FullWidthField, { children: jsxRuntime.jsx(material.Divider, { sx: { borderColor: 'rgba(0,0,0,0.1)' } }) }), jsxRuntime.jsx(FullWidthField, { children: jsxRuntime.jsx(SectionTitle$1, { children: "Child's contact details" }) }), renderFieldWithHelperText(childContactFields.child_phone_number, false), renderFieldWithLayout(childContactFields.child_email_address, false), renderFieldWithHelperText(childContactFields.child_address_line1, false), renderFieldWithHelperText(childContactFields.child_address_line2, false), renderField(childContactFields.child_postal_code), childContactFields.child_country && renderField(childContactFields.child_country), renderField(childContactFields.child_city), renderField(childContactFields.child_state)] })), mailingAddressSame && (jsxRuntime.jsx(FullWidthField, { children: jsxRuntime.jsx(CheckboxContainer, { children: jsxRuntime.jsx(material.FormControlLabel, { control: jsxRuntime.jsx(material.Checkbox, { checked: mailingAddressSame.checked, onChange: (e) => mailingAddressSame.onChange(e.target.checked), name: "mailing_not_same_as_residential", sx: {
                                     color: '#929094',
                                     '&.Mui-checked': {
                                         color: '#317abc',
                                     },
-                                } }), label: jsxRuntime.jsx(CheckboxLabel, { children: mailingAddressSame.label || defaultMailingLabel }) }) }) }))] })) : (jsxRuntime.jsxs(material.Box, Object.assign({ sx: { display: 'flex', flexDirection: 'column', gap: '24px' } }, { children: [jsxRuntime.jsxs(material.Box, { children: [renderField(fields.phone_number), fields.phone_number.helperText && (jsxRuntime.jsx(material.Box, Object.assign({ component: "span", sx: {
+                                } }), label: jsxRuntime.jsx(CheckboxLabel, { children: mailingAddressSame.label || defaultMailingLabel }) }) }) })), childContactNotSame && (jsxRuntime.jsx(FullWidthField, { children: jsxRuntime.jsx(CheckboxContainer, { children: jsxRuntime.jsx(material.FormControlLabel, { control: jsxRuntime.jsx(material.Checkbox, { checked: childContactNotSame.checked, onChange: (e) => childContactNotSame.onChange(e.target.checked), name: "child_contact_not_same", sx: {
+                                    color: '#929094',
+                                    '&.Mui-checked': {
+                                        color: '#317abc',
+                                    },
+                                } }), label: jsxRuntime.jsxs(material.Box, { children: [jsxRuntime.jsx(CheckboxLabel, { children: childContactNotSame.label || defaultChildContactLabel }), jsxRuntime.jsx(material.Box, Object.assign({ component: "span", sx: {
+                                            display: 'block',
+                                            fontSize: '12px',
+                                            color: '#5F5E62',
+                                            mt: 0.5,
+                                        } }, { children: childContactHelperText }))] }) }) }) }))] })) : (jsxRuntime.jsxs(material.Box, Object.assign({ sx: { display: 'flex', flexDirection: 'column', gap: '24px' } }, { children: [isForChild && (jsxRuntime.jsx(SectionTitle$1, { children: "Policyowner contact details" })), jsxRuntime.jsxs(material.Box, { children: [renderField(fields.phone_number), fields.phone_number.helperText && (jsxRuntime.jsx(material.Box, Object.assign({ component: "span", sx: {
                                 display: 'block',
                                 mt: 0.5,
                                 ml: 2,
                                 color: '#5F5E62',
                                 fontSize: '12px',
-                            } }, { children: fields.phone_number.helperText })))] }), renderField(fields.email_address), jsxRuntime.jsx(material.Divider, { sx: { borderColor: 'rgba(0,0,0,0.1)' } }), jsxRuntime.jsx(SectionTitle$1, { children: "Residential address" }), jsxRuntime.jsxs(material.Box, { children: [renderField(fields.residential_address_line1), fields.residential_address_line1.helperText && (jsxRuntime.jsx(material.Box, Object.assign({ component: "span", sx: {
+                            } }, { children: fields.phone_number.helperText })))] }), renderField(fields.email_address), ((mailingAddressSame === null || mailingAddressSame === void 0 ? void 0 : mailingAddressSame.checked) && !isForChild) && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(material.Divider, { sx: { borderColor: 'rgba(0,0,0,0.1)' } }), jsxRuntime.jsx(SectionTitle$1, { children: "Residential address" })] })), jsxRuntime.jsxs(material.Box, { children: [renderField(fields.residential_address_line1), fields.residential_address_line1.helperText && (jsxRuntime.jsx(material.Box, Object.assign({ component: "span", sx: {
                                 display: 'block',
                                 mt: 0.5,
                                 color: '#5F5E62',
@@ -3761,7 +3932,7 @@ const ContactDetailsForm = ({ renderField, fields, mailingFields, mailingAddress
                                 mt: 0.5,
                                 color: '#5F5E62',
                                 fontSize: '12px',
-                            } }, { children: fields.residential_address_line2.helperText })))] }), renderField(fields.postal_code), renderField(fields.city), renderField(fields.state), jsxRuntime.jsx(material.Divider, { sx: { borderColor: 'rgba(0,0,0,0.1)' } }), (mailingAddressSame === null || mailingAddressSame === void 0 ? void 0 : mailingAddressSame.checked) && mailingFields && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(SectionTitle$1, { children: "Mailing address" }), jsxRuntime.jsxs(material.Box, { children: [renderField(mailingFields.mailing_address_line1), mailingFields.mailing_address_line1.helperText && (jsxRuntime.jsx(material.Box, Object.assign({ component: "span", sx: {
+                            } }, { children: fields.residential_address_line2.helperText })))] }), fields.country && renderField(fields.country), renderField(fields.postal_code), renderField(fields.city), renderField(fields.state), (mailingAddressSame === null || mailingAddressSame === void 0 ? void 0 : mailingAddressSame.checked) && mailingFields && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(material.Divider, { sx: { borderColor: 'rgba(0,0,0,0.1)' } }), jsxRuntime.jsx(SectionTitle$1, { children: isForChild ? 'Policyowner mailing address' : 'Mailing address' }), isForChild && mailingFields.mailing_phone_number && (jsxRuntime.jsxs(material.Box, { children: [renderField(mailingFields.mailing_phone_number), mailingFields.mailing_phone_number.helperText && (jsxRuntime.jsx(material.Box, Object.assign({ component: "span", sx: { display: 'block', mt: 0.5, ml: 2, color: '#5F5E62', fontSize: '12px' } }, { children: mailingFields.mailing_phone_number.helperText })))] })), isForChild && mailingFields.mailing_email_address && (renderField(mailingFields.mailing_email_address)), jsxRuntime.jsxs(material.Box, { children: [renderField(mailingFields.mailing_address_line1), mailingFields.mailing_address_line1.helperText && (jsxRuntime.jsx(material.Box, Object.assign({ component: "span", sx: {
                                         display: 'block',
                                         mt: 0.5,
                                         color: '#5F5E62',
@@ -3771,12 +3942,22 @@ const ContactDetailsForm = ({ renderField, fields, mailingFields, mailingAddress
                                         mt: 0.5,
                                         color: '#5F5E62',
                                         fontSize: '12px',
-                                    } }, { children: mailingFields.mailing_address_line2.helperText })))] }), renderField(mailingFields.mailing_postal_code), renderField(mailingFields.mailing_city), renderField(mailingFields.mailing_state)] })), mailingAddressSame && (jsxRuntime.jsx(CheckboxContainer, { children: jsxRuntime.jsx(material.FormControlLabel, { control: jsxRuntime.jsx(material.Checkbox, { checked: mailingAddressSame.checked, onChange: (e) => mailingAddressSame.onChange(e.target.checked), name: "mailing_not_same_as_residential", sx: {
+                                    } }, { children: mailingFields.mailing_address_line2.helperText })))] }), mailingFields.mailing_country && renderField(mailingFields.mailing_country), renderField(mailingFields.mailing_postal_code), renderField(mailingFields.mailing_city), renderField(mailingFields.mailing_state)] })), (childContactNotSame === null || childContactNotSame === void 0 ? void 0 : childContactNotSame.checked) && childContactFields && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(material.Divider, { sx: { borderColor: 'rgba(0,0,0,0.1)' } }), jsxRuntime.jsx(SectionTitle$1, { children: "Child's contact details" }), jsxRuntime.jsxs(material.Box, { children: [renderField(childContactFields.child_phone_number), childContactFields.child_phone_number.helperText && (jsxRuntime.jsx(material.Box, Object.assign({ component: "span", sx: { display: 'block', mt: 0.5, ml: 2, color: '#5F5E62', fontSize: '12px' } }, { children: childContactFields.child_phone_number.helperText })))] }), renderField(childContactFields.child_email_address), jsxRuntime.jsxs(material.Box, { children: [renderField(childContactFields.child_address_line1), childContactFields.child_address_line1.helperText && (jsxRuntime.jsx(material.Box, Object.assign({ component: "span", sx: { display: 'block', mt: 0.5, color: '#5F5E62', fontSize: '12px' } }, { children: childContactFields.child_address_line1.helperText })))] }), jsxRuntime.jsxs(material.Box, { children: [renderField(childContactFields.child_address_line2), childContactFields.child_address_line2.helperText && (jsxRuntime.jsx(material.Box, Object.assign({ component: "span", sx: { display: 'block', mt: 0.5, color: '#5F5E62', fontSize: '12px' } }, { children: childContactFields.child_address_line2.helperText })))] }), renderField(childContactFields.child_postal_code), childContactFields.child_country && renderField(childContactFields.child_country), renderField(childContactFields.child_city), renderField(childContactFields.child_state)] })), mailingAddressSame && (jsxRuntime.jsx(CheckboxContainer, { children: jsxRuntime.jsx(material.FormControlLabel, { control: jsxRuntime.jsx(material.Checkbox, { checked: mailingAddressSame.checked, onChange: (e) => mailingAddressSame.onChange(e.target.checked), name: "mailing_not_same_as_residential", sx: {
+                                color: '#929094',
+                                '&.Mui-checked': {
+                                    color: '#317abc',
+                                },
+                            } }), label: jsxRuntime.jsx(CheckboxLabel, { children: mailingAddressSame.label || defaultMailingLabel }) }) })), childContactNotSame && (jsxRuntime.jsx(CheckboxContainer, { children: jsxRuntime.jsx(material.FormControlLabel, { control: jsxRuntime.jsx(material.Checkbox, { checked: childContactNotSame.checked, onChange: (e) => childContactNotSame.onChange(e.target.checked), name: "child_contact_not_same", sx: {
                                 color: '#929094',
                                 '&.Mui-checked': {
                                     color: '#317abc',
                                 },
-                            } }), label: jsxRuntime.jsx(CheckboxLabel, { children: mailingAddressSame.label || defaultMailingLabel }) }) }))] }))) })));
+                            } }), label: jsxRuntime.jsxs(material.Box, { children: [jsxRuntime.jsx(CheckboxLabel, { children: childContactNotSame.label || defaultChildContactLabel }), jsxRuntime.jsx(material.Box, Object.assign({ component: "span", sx: {
+                                        display: 'block',
+                                        fontSize: '12px',
+                                        color: '#5F5E62',
+                                        mt: 0.5,
+                                    } }, { children: childContactHelperText }))] }) }) }))] }))) })));
 };
 
 const FormContainer$1 = styles.styled(material.Box)({
@@ -3851,28 +4032,30 @@ styles.styled(material.Box)({
     },
 });
 
-const ChildInformationForm = ({ renderField, fields, onSubmit, formRef, sx, desktopGridLayout = false, }) => {
+const ChildInformationForm = ({ renderField, fields, consents, onSubmit, formRef, sx, desktopGridLayout = false, }) => {
     const Container = desktopGridLayout ? DesktopFormContainer : FormContainer;
+    const defaultBankConfirmationLabel = "I confirm this bank account is my child's and consent to AmMetLife crediting payouts to it";
+    const defaultMarketingLabel = "I/We consent to AmMetLife Insurance Berhad using my child's personal data for marketing and communication via digital platforms such as email, WhatsApp, and mobile";
+    const renderHelperField = (field) => (jsxRuntime.jsxs(material.Box, { children: [renderField(field), field.helperText && (jsxRuntime.jsx(material.Box, Object.assign({ component: "span", sx: {
+                    display: 'block',
+                    mt: 0.5,
+                    ml: 2,
+                    color: '#5F5E62',
+                    fontSize: '12px',
+                    wordSpacing: '-5px',
+                } }, { children: field.helperText })))] }));
+    const renderConsents = () => {
+        if (!consents)
+            return null;
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [consents.bank_account_confirmation && (jsxRuntime.jsxs(material.Box, Object.assign({ sx: desktopGridLayout ? { gridColumn: '1 / -1' } : undefined }, { children: [jsxRuntime.jsx(material.FormControlLabel, { control: jsxRuntime.jsx(material.Checkbox, { checked: consents.bank_account_confirmation.checked, onChange: (e) => { var _a; return (_a = consents.bank_account_confirmation) === null || _a === void 0 ? void 0 : _a.onChange(e.target.checked); }, name: "bank_account_confirmation" }), label: jsxRuntime.jsx(material.Typography, Object.assign({ sx: { fontSize: '14px', color: '#5f5e62', lineHeight: '18px' } }, { children: consents.bank_account_confirmation.label || defaultBankConfirmationLabel })), sx: { alignItems: 'flex-start', m: 0, '& .MuiCheckbox-root': { pt: '2px' } } }), consents.bank_account_confirmation.error && (jsxRuntime.jsx(material.Typography, Object.assign({ sx: { color: 'error.main', fontSize: '12px', mt: 0.5, ml: 4 } }, { children: consents.bank_account_confirmation.error })))] }))), consents.marketing_consent && (jsxRuntime.jsx(material.Box, Object.assign({ sx: desktopGridLayout ? { gridColumn: '1 / -1' } : undefined }, { children: jsxRuntime.jsx(material.FormControlLabel, { control: jsxRuntime.jsx(material.Checkbox, { checked: consents.marketing_consent.checked, onChange: (e) => { var _a; return (_a = consents.marketing_consent) === null || _a === void 0 ? void 0 : _a.onChange(e.target.checked); }, name: "marketing_consent" }), label: jsxRuntime.jsx(material.Typography, Object.assign({ sx: { fontSize: '14px', color: '#5f5e62', lineHeight: '18px' } }, { children: consents.marketing_consent.label || defaultMarketingLabel })), sx: { alignItems: 'flex-start', m: 0, '& .MuiCheckbox-root': { pt: '2px' } } }) })))] }));
+    };
+    const renderAdditionalFields = () => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [fields.place_of_birth && renderField(fields.place_of_birth), fields.marital_status && renderField(fields.marital_status), fields.race && renderField(fields.race), fields.religion && renderField(fields.religion), fields.occupation && renderField(fields.occupation), fields.industry && renderField(fields.industry), fields.crediting_bank_name && renderField(fields.crediting_bank_name), fields.crediting_bank_account_number && renderField(fields.crediting_bank_account_number), fields.annual_income && renderField(fields.annual_income)] }));
     // Desktop layout with 2-column grid
     if (desktopGridLayout) {
-        return (jsxRuntime.jsx(Container, Object.assign({ ref: formRef, component: "form", onSubmit: onSubmit, sx: sx }, { children: jsxRuntime.jsxs(FieldsGridContainer, { children: [jsxRuntime.jsxs(material.Box, { children: [renderField(fields.full_name), fields.full_name.helperText && (jsxRuntime.jsx(material.Box, Object.assign({ component: "span", sx: {
-                                    display: 'block',
-                                    mt: 0.5,
-                                    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)] }) })));
+        return (jsxRuntime.jsx(Container, Object.assign({ ref: formRef, component: "form", onSubmit: onSubmit, sx: sx }, { children: jsxRuntime.jsxs(FieldsGridContainer, { children: [renderHelperField(fields.full_name), fields.nric ? renderHelperField(fields.nric) : renderField(fields.date_of_birth), fields.nric && renderField(fields.date_of_birth), renderField(fields.gender), fields.salutation && renderField(fields.salutation), renderField(fields.nationality), renderAdditionalFields(), renderConsents()] }) })));
     }
     // Mobile layout - single column
-    return (jsxRuntime.jsx(Container, Object.assign({ ref: formRef, component: "form", onSubmit: onSubmit, sx: sx }, { children: jsxRuntime.jsxs(material.Box, Object.assign({ sx: { display: 'flex', flexDirection: 'column', gap: '24px' } }, { children: [jsxRuntime.jsxs(material.Box, { children: [renderField(fields.full_name), fields.full_name.helperText && (jsxRuntime.jsx(material.Box, Object.assign({ component: "span", sx: {
-                                display: 'block',
-                                mt: 0.5,
-                                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)] })) })));
+    return (jsxRuntime.jsx(Container, Object.assign({ ref: formRef, component: "form", onSubmit: onSubmit, sx: sx }, { children: jsxRuntime.jsxs(material.Box, Object.assign({ sx: { display: 'flex', flexDirection: 'column', gap: '24px' } }, { children: [renderHelperField(fields.full_name), fields.nric && renderHelperField(fields.nric), renderField(fields.date_of_birth), renderField(fields.gender), fields.salutation && renderField(fields.salutation), renderField(fields.nationality), renderAdditionalFields(), renderConsents()] })) })));
 };
 
 /**