igloo-d2c-components 1.0.21 → 1.0.23

package/dist/esm/index.js

@@ -2,13 +2,13 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
 import { createContext, useMemo, useContext, useState, useEffect } from 'react';
-import { Button as Button$1, Card as Card$1, CardHeader, CardContent, CardActions, Box, Typography, Avatar, Menu, MenuItem, Drawer, IconButton, FormControlLabel, useTheme, useMediaQuery, Toolbar, Icon, RadioGroup, Radio, AppBar as AppBar$1, Divider, List, ListItem, ListItemButton, ListItemText, styled as styled$1, ButtonBase, Slider, Checkbox, Accordion, AccordionSummary, AccordionDetails } from '@mui/material';
+import { Button as Button$1, Card as Card$1, CardHeader, CardContent, CardActions, Box, Typography, Menu, MenuItem, Avatar, Drawer, IconButton, FormControlLabel, useTheme, useMediaQuery, Toolbar, Icon, RadioGroup, Radio, AppBar as AppBar$1, Divider, List, ListItem, ListItemButton, ListItemText, styled as styled$1, ButtonBase, Slider, Checkbox, Accordion, AccordionSummary, AccordionDetails } from '@mui/material';
 import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
 import CloseIcon from '@mui/icons-material/Close';
-import MenuIcon from '@mui/icons-material/Menu';
 import AppBar from '@mui/material/AppBar';
-import Container from '@mui/material/Container';
 import { styled } from '@mui/material/styles';
+import MenuIcon from '@mui/icons-material/Menu';
+import Container from '@mui/material/Container';
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import InfoIcon from '@mui/icons-material/Info';
 import AddIcon from '@mui/icons-material/Add';
@@ -295,12 +295,18 @@ const ammetlifeTypography = Object.assign(Object.assign({}, iglooTypography), {
      * For mobile headings
      * Font: MetLife Circular Bold
      * ======================================== */
-    // Title Large (H1) - MetLife Circular Bold 20/28
+    // Title Large (H1) - MetLife Circular Bold 28/38 (desktop), 20/28 (mobile)
+    /* ========================================
+     * TITLE VARIANTS (Mobile)
+     * For mobile headings
+     * Font: MetLife Circular Bold
+     * ======================================== */
+    // Title Large (H1) - MetLife Circular Bold 28/38 (desktop), 20/28 (mobile)
     titleLarge: {
-        fontSize: '20px',
+        fontSize: '28px',
         fontStyle: 'normal',
         fontWeight: 700,
-        lineHeight: '28px',
+        lineHeight: '38px',
         letterSpacing: 0,
     }, 
     // Title Medium (H2) - MetLife Circular Bold 16/24
@@ -318,6 +324,12 @@ const ammetlifeTypography = Object.assign(Object.assign({}, iglooTypography), {
         fontWeight: 700,
         lineHeight: '20px',
         letterSpacing: 0,
+    }, titleTiny: {
+        fontSize: '10px',
+        fontStyle: 'normal',
+        fontWeight: 700,
+        lineHeight: '20px',
+        letterSpacing: 0,
     }, 
     /* ========================================
      * BODY STRONG VARIANTS
@@ -382,6 +394,21 @@ const ammetlifeTypography = Object.assign(Object.assign({}, iglooTypography), {
         fontWeight: 400,
         lineHeight: 'normal',
         letterSpacing: 0,
+    }, textFieldMedium: {
+        fontSize: '14px',
+        fontStyle: 'normal',
+        fontWeight: 500,
+        lineHeight: '18px',
+    }, textFieldNormal: {
+        fontSize: '12px',
+        fontStyle: 'normal',
+        fontWeight: 400,
+        lineHeight: '16px',
+    }, optionButton: {
+        fontSize: '14px',
+        fontStyle: 'normal',
+        fontWeight: 700,
+        lineHeight: '20px',
     } });
 /**
  * Typography Registry
@@ -799,6 +826,263 @@ function Banner(_a) {
     return (jsxs(Box, Object.assign({ sx: Object.assign({ background, color: 'white', padding: '32px', borderRadius: '12px', textAlign: 'center' }, sx) }, props, { children: [jsx(Typography, Object.assign({ variant: "h4", component: "h2", gutterBottom: true, fontWeight: "bold" }, { children: title })), description && (jsx(Typography, Object.assign({ variant: "body1", sx: { opacity: 0.95, mb: action ? 2 : 0 } }, { children: description }))), action && jsx(Box, Object.assign({ sx: { mt: 2 } }, { children: action }))] })));
 }
 
+/**
+ * Styled components for Desktop Header Menu Bar
+ * Based on Figma Design: Tech-Solution-V1.0 (node 1581-22604)
+ */
+/**
+ * Main AppBar container
+ * Height: 80px, white background, centered content
+ */
+const StyledAppBar$2 = styled(AppBar)(({ theme }) => {
+    var _a;
+    return ({
+        backgroundColor: ((_a = theme.palette.background) === null || _a === void 0 ? void 0 : _a.paper) || '#ffffff',
+        boxShadow: 'none',
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        right: 0,
+        zIndex: 1000,
+        height: '80px',
+        display: 'flex',
+        justifyContent: 'center',
+    });
+});
+/**
+ * Inner container with max-width constraint
+ * Max-width: 1128px, centered
+ */
+const HeaderContainer$1 = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    width: '100%',
+    maxWidth: '1128px',
+    margin: '0 auto',
+    padding: '0 16px',
+    height: '80px',
+    [theme.breakpoints.up('lg')]: {
+        padding: '0',
+    },
+}));
+/**
+ * Left section containing logo and menu items
+ */
+const LeftSection = styled(Box)({
+    display: 'flex',
+    alignItems: 'center',
+    gap: '32px',
+    height: '100%',
+});
+/**
+ * Logo container
+ */
+const LogoContainer$2 = styled(Box)({
+    display: 'flex',
+    alignItems: 'center',
+    cursor: 'pointer',
+    height: '100%',
+});
+/**
+ * Logo image
+ * Width: 126px, height: auto
+ */
+const LogoImage$1 = styled('img')({
+    width: '126px',
+    height: 'auto',
+    objectFit: 'contain',
+});
+/**
+ * Navigation menu container
+ */
+const NavMenu = styled(Box)({
+    display: 'flex',
+    alignItems: 'center',
+    height: '100%',
+    gap: '32px',
+});
+/**
+ * Individual menu item button
+ * Font: MetLife Circular Bold, 18px
+ */
+const MenuItemButton = styled(Button$1)(({ theme }) => {
+    var _a;
+    return ({
+        display: 'flex',
+        alignItems: 'center',
+        gap: '8px',
+        padding: '0 10px',
+        height: '100%',
+        minWidth: 'auto',
+        textTransform: 'none',
+        color: '#13131B',
+        fontFamily: '"Montserrat", "MetLife_Circular", sans-serif',
+        fontWeight: 700,
+        fontSize: '18px',
+        lineHeight: '24px',
+        letterSpacing: '0px',
+        borderRadius: 0,
+        '&:hover': {
+            backgroundColor: 'transparent',
+            color: ((_a = theme.palette.primary) === null || _a === void 0 ? void 0 : _a.main) || '#0090DA',
+        },
+    });
+});
+/**
+ * Menu item text
+ */
+const MenuItemText = styled(Typography)({
+    fontFamily: '"Montserrat", "MetLife_Circular", sans-serif',
+    fontWeight: 700,
+    fontSize: '18px',
+    lineHeight: '24px',
+    letterSpacing: '0px',
+    color: 'inherit',
+});
+/**
+ * Dropdown arrow icon
+ * Size: 24px
+ */
+const DropdownIcon = styled(ArrowDropDownIcon)({
+    width: '24px',
+    height: '24px',
+    color: '#13131B',
+});
+/**
+ * Right section containing login button
+ */
+const RightSection = styled(Box)({
+    display: 'flex',
+    alignItems: 'center',
+    height: '100%',
+});
+/**
+ * Login button (text style)
+ * Based on Figma: Style=Text, State=enabled, Show Icon=False
+ */
+const LoginButton = styled(Button$1)(({ theme }) => {
+    var _a;
+    return ({
+        display: 'flex',
+        alignItems: 'center',
+        padding: '0 10px',
+        height: '100%',
+        minWidth: 'auto',
+        textTransform: 'none',
+        color: ((_a = theme.palette.primary) === null || _a === void 0 ? void 0 : _a.main) || '#E11931',
+        fontFamily: '"Montserrat", "MetLife_Circular", sans-serif',
+        fontWeight: 700,
+        fontSize: '18px',
+        lineHeight: '24px',
+        letterSpacing: '0px',
+        borderRadius: 0,
+        backgroundColor: 'transparent',
+        '&:hover': {
+            backgroundColor: 'transparent',
+            textDecoration: 'underline',
+        },
+    });
+});
+/**
+ * Dropdown menu container
+ */
+const StyledMenu$1 = styled(Menu)(({ theme }) => ({
+    '& .MuiPaper-root': {
+        borderRadius: '16px',
+        marginTop: '8px',
+        minWidth: '200px',
+        boxShadow: '0px 4px 20px rgba(0, 0, 0, 0.1)',
+    },
+}));
+/**
+ * Dropdown menu item
+ */
+const StyledMenuItem$1 = styled(MenuItem)(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    gap: '12px',
+    padding: '16px 20px',
+    fontFamily: '"Montserrat", "MetLife_Circular", sans-serif',
+    fontWeight: 500,
+    fontSize: '16px',
+    lineHeight: '24px',
+    color: '#13131B',
+    '&:hover': {
+        backgroundColor: 'rgba(0, 144, 218, 0.08)',
+    },
+}));
+/**
+ * Menu item icon
+ */
+const MenuItemIcon = styled('img')({
+    width: '24px',
+    height: '24px',
+    objectFit: 'contain',
+});
+
+/**
+ * DesktopHeaderMenuBar Component
+ *
+ * A responsive desktop header with navigation menu items and dropdown support.
+ *
+ * @param logo - Logo image source URL
+ * @param logoAlt - Alt text for the logo image
+ * @param menuItems - Array of menu items to display
+ * @param showLoginButton - Whether to show the login button (default: true)
+ * @param loginButtonText - Text for the login button (default: 'Log in')
+ * @param onLogoClick - Handler for logo click
+ * @param onLoginClick - Handler for login button click
+ * @param formatMessage - i18n function for translations
+ */
+function DesktopHeaderMenuBar({ logo, logoAlt = 'Logo', menuItems, showLoginButton = true, loginButtonText = 'Log in', onLogoClick, onLoginClick, formatMessage = (descriptor) => descriptor.id, className, }) {
+    // Track which dropdown is currently open
+    const [openMenuKey, setOpenMenuKey] = React.useState(null);
+    const [anchorEl, setAnchorEl] = React.useState(null);
+    const handleMenuClick = (event, item) => {
+        var _a;
+        if (item.hasDropdown && item.subItems && item.subItems.length > 0) {
+            // Toggle dropdown
+            if (openMenuKey === item.key) {
+                handleCloseMenu();
+            }
+            else {
+                setAnchorEl(event.currentTarget);
+                setOpenMenuKey(item.key);
+            }
+        }
+        else {
+            // Direct navigation
+            (_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item);
+        }
+    };
+    const handleCloseMenu = () => {
+        setAnchorEl(null);
+        setOpenMenuKey(null);
+    };
+    const handleSubItemClick = (item, subItemKey) => {
+        var _a;
+        const subItem = (_a = item.subItems) === null || _a === void 0 ? void 0 : _a.find((si) => si.key === subItemKey);
+        if (subItem === null || subItem === void 0 ? void 0 : subItem.onClick) {
+            subItem.onClick();
+        }
+        handleCloseMenu();
+    };
+    const handleLogoClick = (e) => {
+        e.preventDefault();
+        onLogoClick === null || onLogoClick === void 0 ? void 0 : onLogoClick();
+    };
+    return (jsx(StyledAppBar$2, Object.assign({ className: className }, { children: jsxs(HeaderContainer$1, { children: [jsxs(LeftSection, { children: [jsx(LogoContainer$2, Object.assign({ onClick: handleLogoClick }, { children: jsx(LogoImage$1, { src: logo, alt: logoAlt }) })), jsx(NavMenu, { children: menuItems.map((item) => (jsxs(React.Fragment, { children: [jsxs(MenuItemButton, Object.assign({ onClick: (e) => handleMenuClick(e, item), "aria-haspopup": item.hasDropdown ? 'true' : undefined, "aria-expanded": item.hasDropdown ? openMenuKey === item.key : undefined, "data-testid": `menu-item-${item.key}` }, { children: [jsx(MenuItemText, { children: formatMessage({ id: item.label }) }), item.hasDropdown && jsx(DropdownIcon, {})] })), item.hasDropdown && item.subItems && (jsx(StyledMenu$1, Object.assign({ id: `menu-${item.key}`, anchorEl: anchorEl, open: openMenuKey === item.key, onClose: handleCloseMenu, anchorOrigin: {
+                                            vertical: 'bottom',
+                                            horizontal: 'left',
+                                        }, transformOrigin: {
+                                            vertical: 'top',
+                                            horizontal: 'left',
+                                        }, MenuListProps: {
+                                            'aria-labelledby': `menu-button-${item.key}`,
+                                        } }, { children: item.subItems.map((subItem) => (jsxs(StyledMenuItem$1, Object.assign({ onClick: () => handleSubItemClick(item, subItem.key), "data-testid": `submenu-item-${subItem.key}` }, { children: [subItem.icon && (jsx(MenuItemIcon, { src: subItem.icon, alt: subItem.label })), formatMessage({ id: subItem.label })] }), subItem.key))) })))] }, item.key))) })] }), jsx(RightSection, { children: showLoginButton && (jsx(LoginButton, Object.assign({ onClick: onLoginClick, "data-testid": "header-login-button" }, { children: formatMessage({ id: loginButtonText }) }))) })] }) })));
+}
+
 const StyledAppBar$1 = styled(AppBar)(({ theme, ispartnershippagemobileview, scrolled }) => {
     var _a, _b;
     return ({
@@ -1162,19 +1446,21 @@ 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, }) {
-    var _a, _b;
+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 = [], }) {
+    var _a, _b, _c;
     const tenantTheme = useTenantTheme();
     tenantTheme === null || tenantTheme === void 0 ? void 0 : tenantTheme.theme;
     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;
+    // For new desktop layout, always use actual viewport detection (ignore SSR/prop value)
+    const isActuallyDesktop = useMediaQuery((_b = muiTheme === null || muiTheme === void 0 ? void 0 : muiTheme.breakpoints) === null || _b === void 0 ? void 0 : _b.up('md'));
     const [anchorElNav, setAnchorElNav] = React.useState(null);
     const [anchorElLanguage, setAnchorElLanguage] = React.useState(null);
     const [anchorElUserMenu, setAnchorElUserMenu] = React.useState(null);
     const shouldShowContent = (!isPartnershipPagePCView || (isPartnershipPagePCView && !scrolled)) &&
         (!isSeoPageView || (isSeoPageView && !scrolled));
-    const firstName1stLetter = ((_b = userFirstName === null || userFirstName === void 0 ? void 0 : userFirstName.trim()) === null || _b === void 0 ? void 0 : _b.slice(0, 1)) || '';
+    const firstName1stLetter = ((_c = userFirstName === null || userFirstName === void 0 ? void 0 : userFirstName.trim()) === null || _c === void 0 ? void 0 : _c.slice(0, 1)) || '';
     const handleOpenNavMenu = (event) => {
         setAnchorElNav(event.currentTarget);
     };
@@ -1193,6 +1479,27 @@ function Header$1({ logo, alternateLogo, showAlternateLogo = false, navigationLi
     const handleCloseUserMenu = () => {
         setAnchorElUserMenu(null);
     };
+    // Convert desktopMenuItems to MenuItemWithDropdown format for DesktopHeaderMenuBar
+    const convertedDesktopMenuItems = desktopMenuItems.map((item) => {
+        var _a;
+        return ({
+            key: item.key,
+            label: item.label,
+            hasDropdown: item.hasDropdown,
+            subItems: (_a = item.subItems) === null || _a === void 0 ? void 0 : _a.map((subItem) => ({
+                key: subItem.key,
+                label: subItem.label,
+                icon: subItem.icon,
+                onClick: subItem.onClick,
+            })),
+            onClick: item.onClick,
+        });
+    });
+    // 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 (jsx(DesktopHeaderMenuBar, { logo: logo, logoAlt: "Logo", menuItems: convertedDesktopMenuItems, showLoginButton: !userToken, loginButtonText: "Log in", onLogoClick: onLogoClick, onLoginClick: onLoginClick, formatMessage: formatMessage }));
+    }
     return (jsx(StyledAppBar$1, Object.assign({ ispartnershippagemobileview: isPartnershipPageMobileView, scrolled: scrolled }, { children: jsx(ResponsiveB2CLayout, { children: jsx(StyledContainer, Object.assign({ ispartnershippagemobileview: isPartnershipPageMobileView, scrolled: scrolled, maxWidth: "xl" }, { children: jsxs(Toolbar, Object.assign({ disableGutters: true }, { children: [jsx("a", Object.assign({ href: host || '#', onClick: (e) => {
                                 e === null || e === void 0 ? void 0 : e.preventDefault();
                                 onLogoClick === null || onLogoClick === void 0 ? void 0 : onLogoClick();
@@ -2852,7 +3159,7 @@ const CheckoutHeader = ({ progress, product, sectionTitle, sectionDescription, s
     return (jsxs(HeaderContainer, Object.assign({ sticky: sticky, sx: sx }, { children: [jsx(CheckoutProgress, Object.assign({}, progress, { progressBarTheme: progressBarTheme })), product && (jsx(Box, Object.assign({ sx: { padding: '0 16px 24px' } }, { children: jsx(ProductCard, Object.assign({}, product)) }))), jsxs(SectionHeader, { children: [jsx(SectionTitle$2, { children: sectionTitle }), jsx(SectionDescription, { children: sectionDescription })] })] })));
 };
 
-const ButtonContainer = styled(Box)(({ isFixed }) => ({
+const ButtonContainer = styled(Box)(({ isFixed, desktopRightAligned }) => ({
     position: isFixed ? 'fixed' : 'relative',
     bottom: 0,
     left: 0,
@@ -2861,34 +3168,51 @@ const ButtonContainer = styled(Box)(({ isFixed }) => ({
     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',
+        }
+        : {},
 }));
-const StyledButton = styled('button')(({ theme, isDisabled }) => {
-    var _a, _b;
-    return ({
-        width: '100%',
-        height: '48px',
-        borderRadius: '24px',
-        border: 'none',
+const StyledButton = styled('button')(({ isDisabled, desktopWidth }) => ({
+    width: '100%',
+    height: '48px',
+    borderRadius: '24px',
+    border: 'none',
+    backgroundColor: isDisabled
+        ? '#E1E2EB'
+        : '#0090DA',
+    color: isDisabled ? '#929094' : '#fff',
+    fontFamily: 'Montserrat',
+    fontSize: '14px',
+    fontWeight: 500,
+    lineHeight: '18px',
+    cursor: isDisabled ? 'not-allowed' : 'pointer',
+    transition: 'all 0.2s ease',
+    '&:hover': {
         backgroundColor: isDisabled
             ? '#E1E2EB'
-            : '#0090DA',
-        color: isDisabled ? '#929094' : '#fff',
-        fontFamily: 'Montserrat',
-        fontSize: '14px',
-        fontWeight: 500,
-        lineHeight: '18px',
-        cursor: isDisabled ? 'not-allowed' : 'pointer',
-        transition: 'all 0.2s ease',
-        '&:hover': {
-            backgroundColor: isDisabled
-                ? '#E1E2EB'
-                : ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _a === void 0 ? void 0 : _a.primary) === null || _b === void 0 ? void 0 : _b.dark) || '#2a2a33',
-        },
-    });
-});
+            : '#007bb8',
+    },
+    // Desktop styles for fixed width button
+    '@media (min-width: 900px)': desktopWidth
+        ? {
+            width: desktopWidth,
+            minWidth: desktopWidth,
+        }
+        : {},
+}));
 
-const CheckoutFormButton = ({ text = 'Next', disabled = false, onClick, fixed = true, type = 'button', sx, loading = false, }) => {
-    return (jsx(ButtonContainer, Object.assign({ isFixed: fixed, sx: sx }, { children: jsx(StyledButton, Object.assign({ type: type, disabled: disabled || loading, isDisabled: disabled || loading, onClick: onClick }, { children: loading ? 'Processing...' : text })) })));
+const CheckoutFormButton = ({ text = 'Next', disabled = false, onClick, fixed = true, type = 'button', sx, loading = false, desktopRightAligned = false, desktopWidth = '180px', }) => {
+    return (jsx(ButtonContainer, Object.assign({ isFixed: fixed, desktopRightAligned: desktopRightAligned, sx: sx }, { children: jsx(StyledButton, Object.assign({ type: type, disabled: disabled || loading, isDisabled: disabled || loading, desktopWidth: desktopRightAligned ? desktopWidth : undefined, onClick: onClick }, { children: loading ? 'Processing...' : text })) })));
 };
 
 const QuestionContainer = styled(Box)({
@@ -2941,6 +3265,41 @@ const HealthQuestionGroup = ({ question, questionNumber, value, onChange, error,
 const FormContainer$3 = styled(Box)({
     padding: '0 16px 24px',
 });
+/**
+ * Desktop form container - constrains content to 938px max-width and centers it
+ */
+const DesktopFormContainer$3 = styled(Box)({
+    padding: '0 16px 24px',
+    '@media (min-width: 900px)': {
+        maxWidth: '938px',
+        margin: '0 auto',
+        padding: '0 0 24px',
+    },
+});
+/**
+ * Fields grid container - displays fields in 2-column grid on desktop
+ */
+const FieldsGridContainer$2 = styled(Box)({
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '24px',
+    '@media (min-width: 900px)': {
+        display: 'grid',
+        gridTemplateColumns: 'repeat(2, 1fr)',
+        gap: '24px',
+        '& > *': {
+            minWidth: 0,
+        },
+    },
+});
+/**
+ * Full width field - spans both columns on desktop grid
+ */
+const FullWidthField$2 = styled(Box)({
+    '@media (min-width: 900px)': {
+        gridColumn: '1 / -1',
+    },
+});
 const CheckboxContainer$1 = styled(Box)({
     marginTop: '12px',
     '& .MuiFormControlLabel-root': {
@@ -2959,33 +3318,82 @@ const CheckboxLabel$1 = styled(Typography)({
     lineHeight: '18px',
 });
 
-const PersonalInformationForm = ({ renderField, fields, consents, onSubmit, formRef, sx, }) => {
+const PersonalInformationForm = ({ renderField, fields, consents, onSubmit, formRef, sx, desktopGridLayout = false, }) => {
     const defaultBankConfirmationLabel = 'I confirm this bank account is mine and consent to AmMetLife crediting payouts to it';
     const defaultMarketingLabel = 'I/We consent to AmMetLife Insurance Berhad using my personal data for marketing and communication via digital platforms such as email, WhatsApp, and mobile';
-    return (jsx(FormContainer$3, Object.assign({ ref: formRef, component: "form", onSubmit: onSubmit, sx: sx }, { children: jsxs(Box, Object.assign({ sx: { display: 'flex', flexDirection: 'column', gap: '24px' } }, { children: [jsxs(Box, { children: [renderField(fields.full_name), fields.full_name.helperText && (jsx(Typography, Object.assign({ variant: "caption", sx: {
+    const Container = desktopGridLayout ? DesktopFormContainer$3 : FormContainer$3;
+    const FieldsWrapper = desktopGridLayout ? FieldsGridContainer$2 : Box;
+    const fieldsWrapperProps = desktopGridLayout
+        ? {}
+        : { sx: { display: 'flex', flexDirection: 'column', gap: '24px' } };
+    return (jsx(Container, Object.assign({ ref: formRef, component: "form", onSubmit: onSubmit, sx: sx }, { children: jsxs(FieldsWrapper, Object.assign({}, fieldsWrapperProps, { children: [jsxs(Box, { children: [renderField(fields.full_name), fields.full_name.helperText && (jsx(Typography, Object.assign({ variant: "caption", sx: {
                                 display: 'block',
                                 mt: 0.5,
                                 ml: 2,
                                 color: '#5F5E62',
                                 fontSize: '12px',
                                 fontFamily: 'Montserrat',
-                            } }, { 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), 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 ||
+                            } }, { 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$2, { 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,
+                                } }, { 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,
-                            } }, { children: consents.bank_account_confirmation.error })))] }), 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 }) }) })] })) })));
+                            } }, { children: consents.bank_account_confirmation.error })))] })), desktopGridLayout ? (jsx(FullWidthField$2, { 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 }) }) }))] })) })));
 };
 
 const FormContainer$2 = styled(Box)({
     padding: '0 16px 24px',
 });
+/**
+ * Desktop form container - constrains content to 938px max-width and centers it
+ */
+const DesktopFormContainer$2 = styled(Box)({
+    padding: '0 16px 24px',
+    '@media (min-width: 900px)': {
+        maxWidth: '938px',
+        margin: '0 auto',
+        padding: '0 0 24px',
+    },
+});
+/**
+ * Fields grid container - displays fields in 2-column grid on desktop
+ */
+const FieldsGridContainer$1 = styled(Box)({
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '24px',
+    '@media (min-width: 900px)': {
+        display: 'grid',
+        gridTemplateColumns: 'repeat(2, 1fr)',
+        gap: '24px',
+        '& > *': {
+            minWidth: 0,
+        },
+    },
+});
+/**
+ * Full width field - spans both columns on desktop grid
+ */
+const FullWidthField$1 = styled(Box)({
+    '@media (min-width: 900px)': {
+        gridColumn: '1 / -1',
+    },
+});
 const CheckboxContainer = styled(Box)({
     marginTop: '12px',
     '& .MuiFormControlLabel-root': {
         alignItems: 'flex-start',
         marginLeft: 0,
+        '@media (min-width: 900px)': {
+            alignItems: 'center',
+        },
     },
     '& .MuiCheckbox-root': {
         padding: '4px 8px 4px 0',
@@ -3006,9 +3414,36 @@ const SectionTitle$1 = styled(Typography)({
     lineHeight: '24px',
 });
 
-const ContactDetailsForm = ({ renderField, fields, mailingFields, mailingAddressSame, onSubmit, formRef, sx, }) => {
+const ContactDetailsForm = ({ renderField, fields, mailingFields, mailingAddressSame, onSubmit, formRef, sx, desktopGridLayout = false, }) => {
     const defaultMailingLabel = 'My mailing address is not the same as residential';
-    return (jsx(FormContainer$2, Object.assign({ ref: formRef, component: "form", onSubmit: onSubmit, sx: sx }, { children: jsxs(Box, Object.assign({ sx: { display: 'flex', flexDirection: 'column', gap: '24px' } }, { children: [jsxs(Box, { children: [renderField(fields.phone_number), fields.phone_number.helperText && (jsx(Box, Object.assign({ component: "span", sx: {
+    const Container = desktopGridLayout ? DesktopFormContainer$2 : FormContainer$2;
+    // Helper to render field with or without full width wrapper
+    const renderFieldWithLayout = (field, fullWidth = false) => {
+        if (desktopGridLayout && fullWidth) {
+            return jsx(FullWidthField$1, { children: renderField(field) });
+        }
+        return renderField(field);
+    };
+    // Helper to render field with helper text
+    const renderFieldWithHelperText = (field, fullWidth = false) => {
+        const content = (jsxs(Box, { children: [renderField(field), field.helperText && (jsx(Box, Object.assign({ component: "span", sx: {
+                        display: 'block',
+                        mt: 0.5,
+                        color: '#5F5E62',
+                        fontSize: '12px',
+                        fontFamily: 'Montserrat',
+                    } }, { children: field.helperText })))] }));
+        if (desktopGridLayout && fullWidth) {
+            return jsx(FullWidthField$1, { children: content });
+        }
+        return content;
+    };
+    return (jsx(Container, Object.assign({ ref: formRef, component: "form", onSubmit: onSubmit, sx: sx }, { children: desktopGridLayout ? (jsxs(FieldsGridContainer$1, { children: [renderFieldWithHelperText(fields.phone_number, false), renderFieldWithLayout(fields.email_address, false), jsx(FullWidthField$1, { children: jsx(Divider, { sx: { borderColor: 'rgba(0,0,0,0.1)' } }) }), jsx(FullWidthField$1, { children: 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), jsx(FullWidthField$1, { children: jsx(Divider, { sx: { borderColor: 'rgba(0,0,0,0.1)' } }) }), (mailingAddressSame === null || mailingAddressSame === void 0 ? void 0 : mailingAddressSame.checked) && mailingFields && (jsxs(Fragment, { children: [jsx(FullWidthField$1, { children: 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 && (jsx(FullWidthField$1, { children: jsx(CheckboxContainer, { children: jsx(FormControlLabel, { control: jsx(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: jsx(CheckboxLabel, { children: mailingAddressSame.label || defaultMailingLabel }) }) }) }))] })) : (jsxs(Box, Object.assign({ sx: { display: 'flex', flexDirection: 'column', gap: '24px' } }, { children: [jsxs(Box, { children: [renderField(fields.phone_number), fields.phone_number.helperText && (jsx(Box, Object.assign({ component: "span", sx: {
                                 display: 'block',
                                 mt: 0.5,
                                 ml: 2,
@@ -3044,23 +3479,96 @@ const ContactDetailsForm = ({ renderField, fields, mailingFields, mailingAddress
                                 '&.Mui-checked': {
                                     color: '#317abc',
                                 },
-                            } }), label: jsx(CheckboxLabel, { children: mailingAddressSame.label || defaultMailingLabel }) }) }))] })) })));
+                            } }), label: jsx(CheckboxLabel, { children: mailingAddressSame.label || defaultMailingLabel }) }) }))] }))) })));
 };
 
 const FormContainer$1 = styled(Box)({
     padding: '0 16px 24px',
 });
+/**
+ * Desktop form container - constrains content to 938px max-width and centers it
+ */
+const DesktopFormContainer$1 = styled(Box)({
+    padding: '0 16px 24px',
+    '@media (min-width: 900px)': {
+        maxWidth: '938px',
+        margin: '0 auto',
+        padding: '0 0 24px',
+    },
+});
+/**
+ * Measurement fields grid - displays weight and height side by side on desktop
+ */
+const MeasurementFieldsGrid = styled(Box)({
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '24px',
+    '@media (min-width: 900px)': {
+        display: 'grid',
+        gridTemplateColumns: 'repeat(2, 1fr)',
+        gap: '24px',
+    },
+});
 
-const HealthInformationForm = ({ renderField, measurementFields, healthQuestions, onSubmit, formRef, sx, }) => {
-    return (jsx(FormContainer$1, Object.assign({ ref: formRef, component: "form", onSubmit: onSubmit, sx: sx }, { children: jsxs(Box, Object.assign({ sx: { display: 'flex', flexDirection: 'column', gap: '24px' } }, { children: [renderField(measurementFields.weight), renderField(measurementFields.height), healthQuestions.map((question, index) => (jsx(HealthQuestionGroup, { question: question.question, questionNumber: question.questionNumber, value: question.value, onChange: question.onChange, error: question.error, labels: question.labels }, question.name || index)))] })) })));
+const HealthInformationForm = ({ renderField, measurementFields, healthQuestions, onSubmit, formRef, sx, desktopGridLayout = false, }) => {
+    const Container = desktopGridLayout ? DesktopFormContainer$1 : FormContainer$1;
+    return (jsx(Container, Object.assign({ ref: formRef, component: "form", onSubmit: onSubmit, sx: sx }, { children: jsxs(Box, Object.assign({ sx: { display: 'flex', flexDirection: 'column', gap: '24px' } }, { children: [desktopGridLayout ? (jsxs(MeasurementFieldsGrid, { children: [renderField(measurementFields.weight), renderField(measurementFields.height)] })) : (jsxs(Fragment, { children: [renderField(measurementFields.weight), renderField(measurementFields.height)] })), healthQuestions.map((question, index) => (jsx(HealthQuestionGroup, { question: question.question, questionNumber: question.questionNumber, value: question.value, onChange: question.onChange, error: question.error, labels: question.labels }, question.name || index)))] })) })));
 };
 
 const FormContainer = styled(Box)({
     padding: '0 16px 24px',
 });
+/**
+ * Desktop form container - constrains content to 938px max-width and centers it
+ */
+const DesktopFormContainer = styled(Box)({
+    padding: '0 16px 24px',
+    '@media (min-width: 900px)': {
+        maxWidth: '938px',
+        margin: '0 auto',
+        padding: '0 0 24px',
+    },
+});
+/**
+ * Fields grid container - displays fields in 2-column grid on desktop
+ */
+const FieldsGridContainer = styled(Box)({
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '24px',
+    '@media (min-width: 900px)': {
+        display: 'grid',
+        gridTemplateColumns: 'repeat(2, 1fr)',
+        gap: '24px',
+        '& > *': {
+            minWidth: 0,
+        },
+    },
+});
+/**
+ * Full width field - spans both columns on desktop grid
+ */
+const FullWidthField = styled(Box)({
+    '@media (min-width: 900px)': {
+        gridColumn: '1 / -1',
+    },
+});
 
-const ChildInformationForm = ({ renderField, fields, onSubmit, formRef, sx, }) => {
-    return (jsx(FormContainer, Object.assign({ ref: formRef, component: "form", onSubmit: onSubmit, sx: sx }, { children: jsxs(Box, Object.assign({ sx: { display: 'flex', flexDirection: 'column', gap: '24px' } }, { children: [jsxs(Box, { children: [renderField(fields.full_name), fields.full_name.helperText && (jsx(Box, Object.assign({ component: "span", sx: {
+const ChildInformationForm = ({ renderField, fields, onSubmit, formRef, sx, desktopGridLayout = false, }) => {
+    const Container = desktopGridLayout ? DesktopFormContainer : FormContainer;
+    // Desktop layout with 2-column grid
+    if (desktopGridLayout) {
+        return (jsx(Container, Object.assign({ ref: formRef, component: "form", onSubmit: onSubmit, sx: sx }, { children: jsxs(FieldsGridContainer, { children: [jsxs(FullWidthField, { children: [renderField(fields.full_name), fields.full_name.helperText && (jsx(Box, Object.assign({ component: "span", sx: {
+                                    display: 'block',
+                                    mt: 0.5,
+                                    ml: 2,
+                                    color: '#5F5E62',
+                                    fontSize: '12px',
+                                    fontFamily: 'Montserrat',
+                                } }, { children: fields.full_name.helperText })))] }), fields.nric && (jsx(FullWidthField, { children: renderField(fields.nric) })), renderField(fields.date_of_birth), renderField(fields.gender), renderField(fields.nationality)] }) })));
+    }
+    // Mobile layout - single column
+    return (jsx(Container, Object.assign({ ref: formRef, component: "form", onSubmit: onSubmit, sx: sx }, { children: jsxs(Box, Object.assign({ sx: { display: 'flex', flexDirection: 'column', gap: '24px' } }, { children: [jsxs(Box, { children: [renderField(fields.full_name), fields.full_name.helperText && (jsx(Box, Object.assign({ component: "span", sx: {
                                 display: 'block',
                                 mt: 0.5,
                                 ml: 2,
@@ -3257,8 +3765,8 @@ const BenefitTitle = styled$1(Typography)(({ theme }) => ({
     lineHeight: '20px',
     margin: 0,
     [theme.breakpoints.up('md')]: {
-        fontSize: '16px',
-        lineHeight: '22px',
+        fontSize: '18px',
+        lineHeight: '24px',
     },
 }));
 const BenefitDescription = styled$1(Typography)(({ theme }) => ({
@@ -3267,7 +3775,7 @@ const BenefitDescription = styled$1(Typography)(({ theme }) => ({
     lineHeight: '18px',
     margin: 0,
     [theme.breakpoints.up('md')]: {
-        fontSize: '15px',
+        fontSize: '16px',
         lineHeight: '20px',
     },
 }));
@@ -3434,5 +3942,5 @@ function getIconPath(iconName) {
     return ICON_PATHS[iconName];
 }
 
-export { Banner, BenefitsSummary, BillingToggle, Button, Card, CheckoutFormButton, CheckoutHeader, CheckoutProgress, ChildInformationForm, ContactDetailsForm, CoverageAmountSlider, FAQAccordion, Footer, Header$1 as Header, HealthInformationForm, HealthQuestionGroup, ICON_PATHS, InfoCallout, NewHeader, OptionButton, PersonalInformationForm, ProductCard, ProductSelectionDrawer, QuestionSection, RecommendationsDrawer, TenantThemeProvider, ToggleGroup, ammetlifeTheme, ammetlifeTypography, cimbTheme, cimbTypography, createThemeCSSVariables, getAvailableTenants, getIconPath, getTenantAssetPath, getTenantLogoPath, getTenantTheme, getTenantTypography, getThemeColor, iglooTheme, iglooTypography, isValidTenantId, mergeTenantTheme, tenantThemes, tenantTypography, useIsTenant, useTenantAsset, useTenantFavicon, useTenantId, useTenantLogo, useTenantTheme };
+export { Banner, BenefitsSummary, BillingToggle, Button, Card, CheckoutFormButton, CheckoutHeader, CheckoutProgress, ChildInformationForm, ContactDetailsForm, CoverageAmountSlider, DesktopHeaderMenuBar, FAQAccordion, Footer, Header$1 as Header, HealthInformationForm, HealthQuestionGroup, ICON_PATHS, InfoCallout, NewHeader, OptionButton, PersonalInformationForm, ProductCard, ProductSelectionDrawer, QuestionSection, RecommendationsDrawer, TenantThemeProvider, ToggleGroup, ammetlifeTheme, ammetlifeTypography, cimbTheme, cimbTypography, createThemeCSSVariables, getAvailableTenants, getIconPath, getTenantAssetPath, getTenantLogoPath, getTenantTheme, getTenantTypography, getThemeColor, iglooTheme, iglooTypography, isValidTenantId, mergeTenantTheme, tenantThemes, tenantTypography, useIsTenant, useTenantAsset, useTenantFavicon, useTenantId, useTenantLogo, useTenantTheme };
 //# sourceMappingURL=index.js.map