igloo-d2c-components 1.0.23 → 1.0.25

package/dist/cjs/index.js

@@ -101,7 +101,7 @@ function useIsTenant(checkTenantId) {
  * Igloo Typography Configuration
  */
 const iglooTypography = {
-    fontFamily: 'Montserrat',
+    fontFamily: 'Inter, sans-serif',
     fontWeightRegular: 400,
     fontWeightMedium: 500,
     fontWeightSemiBold: 600,
@@ -849,29 +849,47 @@ function Banner(_a) {
 /**
  * Styled components for Desktop Header Menu Bar
  * Based on Figma Design: Tech-Solution-V1.0 (node 1581-22604)
+ *
+ * Design Specifications:
+ * - Header height: 80px
+ * - Background: white (#ffffff)
+ * - Content max-width: 1128px (equivalent to 156px padding on 1440px width)
+ * - Logo width: 126px
+ * - Gap between logo and menu items: 32px
+ * - Menu text: MetLife Circular Bold, 18px, #13131B
+ * - Login button: Text style, #0090da (teal/cyan)
  */
+/**
+ * Design System Colors (from Figma node 1581-22604)
+ */
+const designColors = {
+    natural: {
+        dim100: '#13131B',
+        light00: '#ffffff',
+    },
+    primary: {
+        main60: '#0090da',
+    },
+};
 /**
  * Main AppBar container
  * Height: 80px, white background, centered content
  */
-const StyledAppBar$2 = styles.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',
-    });
-});
+const StyledAppBar$2 = styles.styled(AppBar)(({ theme }) => ({
+    backgroundColor: designColors.natural.light00,
+    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
+ * Max-width: 1128px, centered (equivalent to px-156 on 1440px viewport)
  */
 const HeaderContainer$1 = styles.styled(material.Box)(({ theme }) => ({
     display: 'flex',
@@ -888,6 +906,7 @@ const HeaderContainer$1 = styles.styled(material.Box)(({ theme }) => ({
 }));
 /**
  * Left section containing logo and menu items
+ * Gap: 32px between all children (logo and menu items)
  */
 const LeftSection = styles.styled(material.Box)({
     display: 'flex',
@@ -903,57 +922,58 @@ const LogoContainer$2 = styles.styled(material.Box)({
     alignItems: 'center',
     cursor: 'pointer',
     height: '100%',
+    flexShrink: 0,
 });
 /**
  * Logo image
- * Width: 126px, height: auto
+ * Width: 126px, height: 16px (per Figma)
  */
 const LogoImage$1 = styles.styled('img')({
     width: '126px',
-    height: 'auto',
+    height: '16px',
     objectFit: 'contain',
 });
 /**
  * Navigation menu container
+ * No additional gap - items are spaced by LeftSection's gap
  */
-const NavMenu = styles.styled(material.Box)({
+styles.styled(material.Box)({
     display: 'flex',
     alignItems: 'center',
     height: '100%',
-    gap: '32px',
+    gap: '0',
 });
 /**
  * Individual menu item button
- * Font: MetLife Circular Bold, 18px
+ * Font: MetLife Circular Bold, 18px, color: #13131B
+ * Padding: 10px horizontal (creates visual spacing between items)
  */
-const MenuItemButton = styles.styled(material.Button)(({ 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',
-        },
-    });
-});
+const MenuItemButton = styles.styled(material.Button)(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    gap: '8px',
+    padding: '0 10px',
+    height: '100%',
+    minWidth: 'auto',
+    textTransform: 'none',
+    color: designColors.natural.dim100,
+    fontFamily: '"MetLifeCircular", "Montserrat", "Roboto", "Helvetica", "Arial", sans-serif',
+    fontWeight: 700,
+    fontSize: '18px',
+    lineHeight: '24px',
+    letterSpacing: '0px',
+    borderRadius: 0,
+    '&:hover': {
+        backgroundColor: 'transparent',
+        color: designColors.primary.main60,
+    },
+}));
 /**
  * Menu item text
+ * Font: MetLife Circular Bold, 18px
  */
 const MenuItemText = styles.styled(material.Typography)({
-    fontFamily: '"Montserrat", "MetLife_Circular", sans-serif',
+    fontFamily: '"MetLifeCircular", "Montserrat", "Roboto", "Helvetica", "Arial", sans-serif',
     fontWeight: 700,
     fontSize: '18px',
     lineHeight: '24px',
@@ -962,12 +982,12 @@ const MenuItemText = styles.styled(material.Typography)({
 });
 /**
  * Dropdown arrow icon
- * Size: 24px
+ * Size: 24px, color: #13131B
  */
 const DropdownIcon = styles.styled(ArrowDropDownIcon)({
     width: '24px',
     height: '24px',
-    color: '#13131B',
+    color: designColors.natural.dim100,
 });
 /**
  * Right section containing login button
@@ -980,30 +1000,28 @@ const RightSection = styles.styled(material.Box)({
 /**
  * Login button (text style)
  * Based on Figma: Style=Text, State=enabled, Show Icon=False
+ * Color: #0090da (primary blue/teal)
  */
-const LoginButton = styles.styled(material.Button)(({ 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,
+const LoginButton = styles.styled(material.Button)(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    padding: '0 10px',
+    height: '100%',
+    minWidth: 'auto',
+    textTransform: 'none',
+    color: designColors.primary.main60,
+    fontFamily: '"MetLifeCircular", "Montserrat", "Roboto", "Helvetica", "Arial", sans-serif',
+    fontWeight: 700,
+    fontSize: '18px',
+    lineHeight: '24px',
+    letterSpacing: '0px',
+    borderRadius: 0,
+    backgroundColor: 'transparent',
+    '&:hover': {
         backgroundColor: 'transparent',
-        '&:hover': {
-            backgroundColor: 'transparent',
-            textDecoration: 'underline',
-        },
-    });
-});
+        textDecoration: 'underline',
+    },
+}));
 /**
  * Dropdown menu container
  */
@@ -1023,11 +1041,11 @@ const StyledMenuItem$1 = styles.styled(material.MenuItem)(({ theme }) => ({
     alignItems: 'center',
     gap: '12px',
     padding: '16px 20px',
-    fontFamily: '"Montserrat", "MetLife_Circular", sans-serif',
+    fontFamily: '"MetLifeCircular", "Montserrat", "Roboto", "Helvetica", "Arial", sans-serif',
     fontWeight: 500,
     fontSize: '16px',
     lineHeight: '24px',
-    color: '#13131B',
+    color: designColors.natural.dim100,
     '&:hover': {
         backgroundColor: 'rgba(0, 144, 218, 0.08)',
     },
@@ -1092,15 +1110,15 @@ function DesktopHeaderMenuBar({ logo, logoAlt = 'Logo', menuItems, showLoginButt
         e.preventDefault();
         onLogoClick === null || onLogoClick === void 0 ? void 0 : onLogoClick();
     };
-    return (jsxRuntime.jsx(StyledAppBar$2, Object.assign({ className: className }, { children: jsxRuntime.jsxs(HeaderContainer$1, { children: [jsxRuntime.jsxs(LeftSection, { children: [jsxRuntime.jsx(LogoContainer$2, Object.assign({ onClick: handleLogoClick }, { children: jsxRuntime.jsx(LogoImage$1, { src: logo, alt: logoAlt }) })), jsxRuntime.jsx(NavMenu, { children: menuItems.map((item) => (jsxRuntime.jsxs(React__namespace.Fragment, { children: [jsxRuntime.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: [jsxRuntime.jsx(MenuItemText, { children: formatMessage({ id: item.label }) }), item.hasDropdown && jsxRuntime.jsx(DropdownIcon, {})] })), item.hasDropdown && item.subItems && (jsxRuntime.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) => (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))) })] }), jsxRuntime.jsx(RightSection, { children: showLoginButton && (jsxRuntime.jsx(LoginButton, Object.assign({ onClick: onLoginClick, "data-testid": "header-login-button" }, { children: formatMessage({ id: loginButtonText }) }))) })] }) })));
+    return (jsxRuntime.jsx(StyledAppBar$2, Object.assign({ className: className }, { children: jsxRuntime.jsxs(HeaderContainer$1, { children: [jsxRuntime.jsxs(LeftSection, { children: [jsxRuntime.jsx(LogoContainer$2, Object.assign({ onClick: handleLogoClick }, { children: jsxRuntime.jsx(LogoImage$1, { src: logo, alt: logoAlt }) })), menuItems.map((item) => (jsxRuntime.jsxs(React__namespace.Fragment, { children: [jsxRuntime.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: [jsxRuntime.jsx(MenuItemText, { children: formatMessage({ id: item.label }) }), item.hasDropdown && jsxRuntime.jsx(DropdownIcon, {})] })), item.hasDropdown && item.subItems && (jsxRuntime.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) => (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)))] }), jsxRuntime.jsx(RightSection, { children: showLoginButton && (jsxRuntime.jsx(LoginButton, Object.assign({ onClick: onLoginClick, "data-testid": "header-login-button" }, { children: formatMessage({ id: loginButtonText }) }))) })] }) })));
 }
 
 const StyledAppBar$1 = styles.styled(AppBar)(({ theme, ispartnershippagemobileview, scrolled }) => {
@@ -1994,14 +2012,16 @@ const CategoryIcon = styles.styled(material.Box)(({ theme }) => ({
     justifyContent: 'center',
 }));
 const TitleText = styles.styled(material.Typography)(({ theme }) => ({
-    fontFamily: '"Montserrat", sans-serif',
     fontWeight: 700,
-    fontSize: '20px',
+    fontSize: '28px',
     lineHeight: '28px',
     color: '#13131B',
+    [theme.breakpoints.down('md')]: {
+        fontSize: '20px',
+        lineHeight: '24px',
+    },
 }));
 const SubtitleText = styles.styled(material.Typography)(({ theme }) => ({
-    fontFamily: '"Montserrat", sans-serif',
     fontWeight: 400,
     fontSize: '14px',
     lineHeight: '18px',
@@ -2019,7 +2039,6 @@ const PrimaryButton = styles.styled(material.Button)(({ theme }) => ({
     borderRadius: '24px',
     height: '48px',
     textTransform: 'none',
-    fontFamily: '"Montserrat", sans-serif',
     fontWeight: 500,
     fontSize: '14px',
     lineHeight: '18px',
@@ -2032,7 +2051,6 @@ const SecondaryButton = styles.styled(material.Button)(({ theme }) => ({
     borderRadius: '8px',
     height: '40px',
     textTransform: 'none',
-    fontFamily: '"Montserrat", sans-serif',
     fontWeight: 500,
     fontSize: '14px',
     lineHeight: '18px',
@@ -2251,24 +2269,34 @@ const QuestionHeader = styles.styled(material.Box)(({ theme }) => ({
     width: '100%',
 }));
 const QuestionTitle = styles.styled(material.Typography)(({ theme }) => ({
-    fontFamily: '"Montserrat", sans-serif',
     fontWeight: 700,
-    fontSize: '14px',
-    lineHeight: '20px',
+    fontSize: '18px',
+    lineHeight: '24px',
     color: '#13131B',
+    [theme.breakpoints.down('md')]: {
+        fontSize: '14px',
+        lineHeight: '20px',
+    },
 }));
 const QuestionSubtext = styles.styled(material.Typography)(({ theme }) => ({
-    fontFamily: '"Montserrat", sans-serif',
     fontWeight: 400,
-    fontSize: '12px',
-    lineHeight: '16px',
+    fontSize: '16px',
+    lineHeight: '20px',
     color: '#5F5E62',
+    [theme.breakpoints.down('md')]: {
+        fontSize: '12px',
+        lineHeight: '14px',
+    },
 }));
 const OptionsContainer$1 = styles.styled(material.Box)(({ theme }) => ({
     display: 'flex',
-    flexDirection: 'column',
+    flexDirection: 'row',
+    flexWrap: 'wrap',
     gap: '8px',
     width: '100%',
+    [theme.breakpoints.down('md')]: {
+        flexDirection: 'column',
+    },
 }));
 
 /**
@@ -2322,7 +2350,9 @@ const variantColors = {
         hoverBorder: '#5f5e62',
     },
 };
-const StyledOptionButton = styles.styled(material.ButtonBase)(({ selected, size = 'medium', fullWidth, colorVariant = 'default' }) => {
+const StyledOptionButton = styles.styled(material.ButtonBase, {
+    shouldForwardProp: (prop) => prop !== 'colorVariant',
+})(({ theme, selected, size = 'medium', fullWidth, colorVariant = 'default' }) => {
     const heights = {
         small: '32px',
         medium: '40px',
@@ -2331,6 +2361,7 @@ const StyledOptionButton = styles.styled(material.ButtonBase)(({ selected, size
     const colors = variantColors[colorVariant];
     return {
         height: heights[size],
+        // On desktop: auto width (inline), on mobile: full width
         width: fullWidth ? '100%' : 'auto',
         borderRadius: '24px',
         border: selected
@@ -2353,6 +2384,10 @@ const StyledOptionButton = styles.styled(material.ButtonBase)(({ selected, size
             cursor: 'not-allowed',
             opacity: 0.6,
         },
+        // Mobile: always full width
+        [theme.breakpoints.down('md')]: {
+            width: '100%',
+        },
     };
 });
 const OptionContent = styles.styled(material.Box)(() => ({
@@ -2367,14 +2402,18 @@ const OptionIcon = styles.styled('span')(() => ({
     lineHeight: 1,
     flexShrink: 0,
 }));
-const OptionLabel = styles.styled(material.Typography)(({ selected, colorVariant = 'default' }) => {
+const OptionLabel = styles.styled(material.Typography)(({ theme, selected, colorVariant = 'default' }) => {
     const colors = variantColors[colorVariant];
     return {
-        fontWeight: selected ? 600 : 500,
+        fontWeight: selected ? 700 : 500,
         fontSize: '16px',
-        lineHeight: '20px',
+        lineHeight: '24px',
         color: selected ? '#0090DA' : colors.unselectedText,
         textAlign: 'center',
+        [theme.breakpoints.down('md')]: {
+            lineHeight: '20px',
+            fontWeight: 500,
+        },
     };
 });
 
@@ -2401,7 +2440,7 @@ const OptionLabel = styles.styled(material.Typography)(({ selected, colorVariant
  * />
  * ```
  */
-function OptionButton({ value, label, icon, selected = false, disabled = false, onClick, size = 'medium', fullWidth = true, variant = 'default', formatMessage = (descriptor) => descriptor.id, }) {
+function OptionButton({ value, label, icon, selected = false, disabled = false, onClick, size = 'medium', fullWidth = false, variant = 'default', formatMessage = (descriptor) => descriptor.id, }) {
     const handleClick = () => {
         if (!disabled && onClick) {
             onClick(value);
@@ -2591,8 +2630,7 @@ const ToggleButton = styles.styled(material.Box)(({ theme, active }) => {
 const ToggleText = styles.styled(material.Typography)(({ theme }) => {
     var _a, _b, _c, _d, _e, _f;
     return ({
-        fontFamily: ((_a = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _a === void 0 ? void 0 : _a.fontFamily) ||
-            "'Montserrat', sans-serif",
+        fontFamily: (_a = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _a === void 0 ? void 0 : _a.fontFamily,
         fontSize: ((_c = (_b = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _b === void 0 ? void 0 : _b.bodyMedium) === null || _c === void 0 ? void 0 : _c.fontSize) || '14px',
         fontWeight: ((_d = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _d === void 0 ? void 0 : _d.fontWeightSemiBold) || 600,
         lineHeight: ((_f = (_e = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _e === void 0 ? void 0 : _e.bodyMedium) === null || _f === void 0 ? void 0 : _f.lineHeight) || '20px',
@@ -2671,23 +2709,30 @@ const CalloutIcon = styles.styled(InfoIcon)(({ theme }) => {
 const CalloutTitle = styles.styled(material.Typography)(({ theme }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h;
     return ({
-        fontFamily: ((_a = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _a === void 0 ? void 0 : _a.fontFamily) ||
-            "'Montserrat', sans-serif",
-        fontSize: ((_c = (_b = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _b === void 0 ? void 0 : _b.bodyMedium) === null || _c === void 0 ? void 0 : _c.fontSize) || '14px',
-        fontWeight: ((_d = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _d === void 0 ? void 0 : _d.fontWeightSemiBold) || 600,
+        fontFamily: (_a = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _a === void 0 ? void 0 : _a.fontFamily,
+        fontSize: ((_c = (_b = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _b === void 0 ? void 0 : _b.bodyMedium) === null || _c === void 0 ? void 0 : _c.fontSize) || '16px',
+        fontWeight: ((_d = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _d === void 0 ? void 0 : _d.fontWeightSemiBold) || 700,
         lineHeight: ((_f = (_e = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _e === void 0 ? void 0 : _e.bodyMedium) === null || _f === void 0 ? void 0 : _f.lineHeight) || '20px',
         color: ((_h = (_g = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _g === void 0 ? void 0 : _g.natural) === null || _h === void 0 ? void 0 : _h.dim) || '#13131b',
+        [theme.breakpoints.down('md')]: {
+            fontSize: '14px',
+            lineHeight: '20px',
+        },
     });
 });
 const CalloutText = styles.styled(material.Typography)(({ theme }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     return ({
         fontFamily: ((_a = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _a === void 0 ? void 0 : _a.fontFamily) ||
-            "'Montserrat', sans-serif",
-        fontSize: ((_c = (_b = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _b === void 0 ? void 0 : _b.bodySmall) === null || _c === void 0 ? void 0 : _c.fontSize) || '12px',
+            '',
+        fontSize: ((_c = (_b = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _b === void 0 ? void 0 : _b.bodySmall) === null || _c === void 0 ? void 0 : _c.fontSize) || '14px',
         fontWeight: ((_e = (_d = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _d === void 0 ? void 0 : _d.bodySmall) === null || _e === void 0 ? void 0 : _e.fontWeight) || 400,
         lineHeight: ((_g = (_f = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _f === void 0 ? void 0 : _f.bodySmall) === null || _g === void 0 ? void 0 : _g.lineHeight) || '16px',
         color: ((_j = (_h = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _h === void 0 ? void 0 : _h.natural) === null || _j === void 0 ? void 0 : _j.dark) || '#5f5e62',
+        [theme.breakpoints.down('md')]: {
+            fontSize: '12px',
+            lineHeight: '14px',
+        },
     });
 });
 
@@ -2741,7 +2786,7 @@ const InputLabel = styles.styled(material.Typography)(({ theme }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     return ({
         fontFamily: ((_a = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _a === void 0 ? void 0 : _a.fontFamily) ||
-            "'Montserrat', sans-serif",
+            '',
         fontSize: ((_c = (_b = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _b === void 0 ? void 0 : _b.bodySmall) === null || _c === void 0 ? void 0 : _c.fontSize) || '12px',
         fontWeight: ((_e = (_d = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _d === void 0 ? void 0 : _d.bodySmall) === null || _e === void 0 ? void 0 : _e.fontWeight) || 400,
         lineHeight: ((_g = (_f = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _f === void 0 ? void 0 : _f.bodySmall) === null || _g === void 0 ? void 0 : _g.lineHeight) || '16px',
@@ -2768,7 +2813,7 @@ const InputValue = styles.styled(material.Typography)(({ theme }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     return ({
         fontFamily: ((_a = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _a === void 0 ? void 0 : _a.fontFamily) ||
-            "'Montserrat', sans-serif",
+            '',
         fontSize: ((_c = (_b = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _b === void 0 ? void 0 : _b.bodyMedium) === null || _c === void 0 ? void 0 : _c.fontSize) || '14px',
         fontWeight: ((_e = (_d = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _d === void 0 ? void 0 : _d.bodyMedium) === null || _e === void 0 ? void 0 : _e.fontWeight) || 400,
         lineHeight: ((_g = (_f = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _f === void 0 ? void 0 : _f.bodyMedium) === null || _g === void 0 ? void 0 : _g.lineHeight) || '18px',
@@ -2856,7 +2901,7 @@ const RangeLabel = styles.styled(material.Typography)(({ theme }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     return ({
         fontFamily: ((_a = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _a === void 0 ? void 0 : _a.fontFamily) ||
-            "'Montserrat', sans-serif",
+            '',
         fontSize: ((_c = (_b = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _b === void 0 ? void 0 : _b.smallText) === null || _c === void 0 ? void 0 : _c.fontSize) || '8px',
         fontWeight: ((_e = (_d = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _d === void 0 ? void 0 : _d.smallText) === null || _e === void 0 ? void 0 : _e.fontWeight) || 500,
         lineHeight: ((_g = (_f = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _f === void 0 ? void 0 : _f.smallText) === null || _g === void 0 ? void 0 : _g.lineHeight) || '16px',
@@ -3071,7 +3116,6 @@ const ProgressFill = styles.styled(material.Box)(({ width, progressBarTheme }) =
     transition: 'width 0.3s ease',
 }));
 const ProgressText = styles.styled(material.Typography)({
-    fontFamily: 'Montserrat',
     fontSize: '12px',
     color: '#5F5E62',
     fontWeight: 400,
@@ -3114,14 +3158,12 @@ const ProductInfo = styles.styled(material.Box)({
     marginLeft: '4px',
 });
 const ProductName = styles.styled(material.Typography)({
-    fontFamily: 'Montserrat',
     fontSize: '14px',
     fontWeight: 600,
     color: '#13131B',
     lineHeight: '20px',
 });
 const PlanName = styles.styled(material.Typography)({
-    fontFamily: 'Montserrat',
     fontSize: '12px',
     fontWeight: 400,
     color: '#13131B',
@@ -3133,14 +3175,12 @@ const PriceContainer = styles.styled(material.Box)({
     gap: '2px',
 });
 const Price = styles.styled(material.Typography)({
-    fontFamily: 'Montserrat',
     fontSize: '14px',
     fontWeight: 600,
     color: '#13131B',
     lineHeight: '20px',
 });
 const PricePeriod = styles.styled(material.Typography)({
-    fontFamily: 'Montserrat',
     fontSize: '12px',
     fontWeight: 400,
     color: '#13131B',
@@ -3160,7 +3200,6 @@ const SectionHeader = styles.styled(material.Box)({
     padding: '0 16px 24px',
 });
 const SectionTitle$2 = styles.styled(material.Typography)({
-    fontFamily: 'Montserrat',
     fontSize: '20px',
     fontWeight: 700,
     color: '#13131B',
@@ -3168,7 +3207,6 @@ const SectionTitle$2 = styles.styled(material.Typography)({
     marginBottom: '8px',
 });
 const SectionDescription = styles.styled(material.Typography)({
-    fontFamily: 'Montserrat',
     fontSize: '14px',
     fontWeight: 400,
     color: '#5F5E62',
@@ -3211,7 +3249,6 @@ const StyledButton = styles.styled('button')(({ isDisabled, desktopWidth }) => (
         ? '#E1E2EB'
         : '#0090DA',
     color: isDisabled ? '#929094' : '#fff',
-    fontFamily: 'Montserrat',
     fontSize: '14px',
     fontWeight: 500,
     lineHeight: '18px',
@@ -3267,7 +3304,6 @@ styles.styled(material.Box)(({ selected }) => ({
     },
 }));
 styles.styled(material.Typography)(({ selected }) => ({
-    fontFamily: 'Montserrat',
     fontSize: '14px',
     fontWeight: 600,
     color: selected ? '#13131B' : '#5F5E62',
@@ -3315,7 +3351,7 @@ const FieldsGridContainer$2 = styles.styled(material.Box)({
 /**
  * Full width field - spans both columns on desktop grid
  */
-const FullWidthField$2 = styles.styled(material.Box)({
+const FullWidthField$1 = styles.styled(material.Box)({
     '@media (min-width: 900px)': {
         gridColumn: '1 / -1',
     },
@@ -3331,7 +3367,6 @@ const CheckboxContainer$1 = styles.styled(material.Box)({
     },
 });
 const CheckboxLabel$1 = styles.styled(material.Typography)({
-    fontFamily: 'Montserrat',
     fontSize: '14px',
     fontWeight: 400,
     color: '#5F5E62',
@@ -3352,8 +3387,7 @@ const PersonalInformationForm = ({ renderField, fields, consents, onSubmit, form
                                 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), desktopGridLayout ? (jsxRuntime.jsx(FullWidthField$2, { 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), renderField(fields.occupation), renderField(fields.industry), renderField(fields.crediting_bank_name), renderField(fields.crediting_bank_account_number), desktopGridLayout ? (jsxRuntime.jsx(FullWidthField$1, { children: jsxRuntime.jsxs(CheckboxContainer$1, { children: [jsxRuntime.jsx(material.FormControlLabel, { control: jsxRuntime.jsx(material.Checkbox, { checked: consents.bank_account_confirmation.checked, onChange: (e) => consents.bank_account_confirmation.onChange(e.target.checked), name: "bank_account_confirmation" }), label: jsxRuntime.jsx(CheckboxLabel$1, { children: consents.bank_account_confirmation.label ||
                                         defaultBankConfirmationLabel }) }), consents.bank_account_confirmation.error && (jsxRuntime.jsx(material.Typography, Object.assign({ sx: {
                                     color: 'error.main',
                                     fontSize: '12px',
@@ -3365,7 +3399,7 @@ const PersonalInformationForm = ({ renderField, fields, consents, onSubmit, form
                                 fontSize: '12px',
                                 mt: 0.5,
                                 ml: 4,
-                            } }, { children: consents.bank_account_confirmation.error })))] })), desktopGridLayout ? (jsxRuntime.jsx(FullWidthField$2, { children: jsxRuntime.jsx(CheckboxContainer$1, { children: jsxRuntime.jsx(material.FormControlLabel, { control: jsxRuntime.jsx(material.Checkbox, { checked: consents.marketing_consent.checked, onChange: (e) => consents.marketing_consent.onChange(e.target.checked), name: "marketing_consent" }), label: jsxRuntime.jsx(CheckboxLabel$1, { children: consents.marketing_consent.label || defaultMarketingLabel }) }) }) })) : (jsxRuntime.jsx(CheckboxContainer$1, { children: jsxRuntime.jsx(material.FormControlLabel, { control: jsxRuntime.jsx(material.Checkbox, { checked: consents.marketing_consent.checked, onChange: (e) => consents.marketing_consent.onChange(e.target.checked), name: "marketing_consent" }), label: jsxRuntime.jsx(CheckboxLabel$1, { children: consents.marketing_consent.label || defaultMarketingLabel }) }) }))] })) })));
+                            } }, { children: consents.bank_account_confirmation.error })))] })), desktopGridLayout ? (jsxRuntime.jsx(FullWidthField$1, { children: jsxRuntime.jsx(CheckboxContainer$1, { children: jsxRuntime.jsx(material.FormControlLabel, { control: jsxRuntime.jsx(material.Checkbox, { checked: consents.marketing_consent.checked, onChange: (e) => consents.marketing_consent.onChange(e.target.checked), name: "marketing_consent" }), label: jsxRuntime.jsx(CheckboxLabel$1, { children: consents.marketing_consent.label || defaultMarketingLabel }) }) }) })) : (jsxRuntime.jsx(CheckboxContainer$1, { children: jsxRuntime.jsx(material.FormControlLabel, { control: jsxRuntime.jsx(material.Checkbox, { checked: consents.marketing_consent.checked, onChange: (e) => consents.marketing_consent.onChange(e.target.checked), name: "marketing_consent" }), label: jsxRuntime.jsx(CheckboxLabel$1, { children: consents.marketing_consent.label || defaultMarketingLabel }) }) }))] })) })));
 };
 
 const FormContainer$2 = styles.styled(material.Box)({
@@ -3401,7 +3435,7 @@ const FieldsGridContainer$1 = styles.styled(material.Box)({
 /**
  * Full width field - spans both columns on desktop grid
  */
-const FullWidthField$1 = styles.styled(material.Box)({
+const FullWidthField = styles.styled(material.Box)({
     '@media (min-width: 900px)': {
         gridColumn: '1 / -1',
     },
@@ -3420,14 +3454,12 @@ const CheckboxContainer = styles.styled(material.Box)({
     },
 });
 const CheckboxLabel = styles.styled(material.Typography)({
-    fontFamily: 'Montserrat',
     fontSize: '14px',
     fontWeight: 400,
     color: '#5F5E62',
     lineHeight: '18px',
 });
 const SectionTitle$1 = styles.styled(material.Typography)({
-    fontFamily: 'Montserrat',
     fontSize: '16px',
     fontWeight: 600,
     color: '#13131B',
@@ -3440,7 +3472,7 @@ const ContactDetailsForm = ({ renderField, fields, mailingFields, mailingAddress
     // Helper to render field with or without full width wrapper
     const renderFieldWithLayout = (field, fullWidth = false) => {
         if (desktopGridLayout && fullWidth) {
-            return jsxRuntime.jsx(FullWidthField$1, { children: renderField(field) });
+            return jsxRuntime.jsx(FullWidthField, { children: renderField(field) });
         }
         return renderField(field);
     };
@@ -3451,14 +3483,13 @@ const ContactDetailsForm = ({ renderField, fields, mailingFields, mailingAddress
                         mt: 0.5,
                         color: '#5F5E62',
                         fontSize: '12px',
-                        fontFamily: 'Montserrat',
                     } }, { children: field.helperText })))] }));
         if (desktopGridLayout && fullWidth) {
-            return jsxRuntime.jsx(FullWidthField$1, { children: content });
+            return jsxRuntime.jsx(FullWidthField, { children: content });
         }
         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$1, { children: jsxRuntime.jsx(material.Divider, { sx: { borderColor: 'rgba(0,0,0,0.1)' } }) }), jsxRuntime.jsx(FullWidthField$1, { 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$1, { 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$1, { 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$1, { 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: [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: {
                                     color: '#929094',
                                     '&.Mui-checked': {
                                         color: '#317abc',
@@ -3469,31 +3500,26 @@ const ContactDetailsForm = ({ renderField, fields, mailingFields, mailingAddress
                                 ml: 2,
                                 color: '#5F5E62',
                                 fontSize: '12px',
-                                fontFamily: 'Montserrat',
                             } }, { 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: {
                                 display: 'block',
                                 mt: 0.5,
                                 color: '#5F5E62',
                                 fontSize: '12px',
-                                fontFamily: 'Montserrat',
                             } }, { children: fields.residential_address_line1.helperText })))] }), jsxRuntime.jsxs(material.Box, { children: [renderField(fields.residential_address_line2), fields.residential_address_line2.helperText && (jsxRuntime.jsx(material.Box, Object.assign({ component: "span", sx: {
                                 display: 'block',
                                 mt: 0.5,
                                 color: '#5F5E62',
                                 fontSize: '12px',
-                                fontFamily: 'Montserrat',
                             } }, { 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: {
                                         display: 'block',
                                         mt: 0.5,
                                         color: '#5F5E62',
                                         fontSize: '12px',
-                                        fontFamily: 'Montserrat',
                                     } }, { children: mailingFields.mailing_address_line1.helperText })))] }), jsxRuntime.jsxs(material.Box, { children: [renderField(mailingFields.mailing_address_line2), mailingFields.mailing_address_line2.helperText && (jsxRuntime.jsx(material.Box, Object.assign({ component: "span", sx: {
                                         display: 'block',
                                         mt: 0.5,
                                         color: '#5F5E62',
                                         fontSize: '12px',
-                                        fontFamily: 'Montserrat',
                                     } }, { 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: {
                                 color: '#929094',
                                 '&.Mui-checked': {
@@ -3568,7 +3594,7 @@ const FieldsGridContainer = styles.styled(material.Box)({
 /**
  * Full width field - spans both columns on desktop grid
  */
-const FullWidthField = styles.styled(material.Box)({
+styles.styled(material.Box)({
     '@media (min-width: 900px)': {
         gridColumn: '1 / -1',
     },
@@ -3578,14 +3604,13 @@ const ChildInformationForm = ({ renderField, fields, onSubmit, formRef, sx, desk
     const Container = desktopGridLayout ? DesktopFormContainer : FormContainer;
     // 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(FullWidthField, { children: [renderField(fields.full_name), fields.full_name.helperText && (jsxRuntime.jsx(material.Box, Object.assign({ component: "span", sx: {
+        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',
-                                    fontFamily: 'Montserrat',
-                                } }, { children: fields.full_name.helperText })))] }), fields.nric && (jsxRuntime.jsx(FullWidthField, { children: renderField(fields.nric) })), renderField(fields.date_of_birth), renderField(fields.gender), renderField(fields.nationality)] }) })));
+                                } }, { children: fields.full_name.helperText })))] }), fields.nric ? renderField(fields.nric) : renderField(fields.date_of_birth), fields.nric && renderField(fields.date_of_birth), renderField(fields.gender), renderField(fields.nationality)] }) })));
     }
     // Mobile layout - single column
     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: {
@@ -3594,7 +3619,6 @@ const ChildInformationForm = ({ renderField, fields, onSubmit, formRef, sx, desk
                                 ml: 2,
                                 color: '#5F5E62',
                                 fontSize: '12px',
-                                fontFamily: 'Montserrat',
                             } }, { children: fields.full_name.helperText })))] }), fields.nric && renderField(fields.nric), renderField(fields.date_of_birth), renderField(fields.gender), renderField(fields.nationality)] })) })));
 };