igloo-d2c-components 1.0.23 → 1.0.25

package/dist/esm/index.js

@@ -81,7 +81,7 @@ function useIsTenant(checkTenantId) {
  * Igloo Typography Configuration
  */
 const iglooTypography = {
-    fontFamily: 'Montserrat',
+    fontFamily: 'Inter, sans-serif',
     fontWeightRegular: 400,
     fontWeightMedium: 500,
     fontWeightSemiBold: 600,
@@ -829,29 +829,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 = 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 = 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 = styled(Box)(({ theme }) => ({
     display: 'flex',
@@ -868,6 +886,7 @@ const HeaderContainer$1 = styled(Box)(({ theme }) => ({
 }));
 /**
  * Left section containing logo and menu items
+ * Gap: 32px between all children (logo and menu items)
  */
 const LeftSection = styled(Box)({
     display: 'flex',
@@ -883,57 +902,58 @@ const LogoContainer$2 = styled(Box)({
     alignItems: 'center',
     cursor: 'pointer',
     height: '100%',
+    flexShrink: 0,
 });
 /**
  * Logo image
- * Width: 126px, height: auto
+ * Width: 126px, height: 16px (per Figma)
  */
 const LogoImage$1 = 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 = styled(Box)({
+styled(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 = 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',
-        },
-    });
-});
+const MenuItemButton = styled(Button$1)(({ 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 = styled(Typography)({
-    fontFamily: '"Montserrat", "MetLife_Circular", sans-serif',
+    fontFamily: '"MetLifeCircular", "Montserrat", "Roboto", "Helvetica", "Arial", sans-serif',
     fontWeight: 700,
     fontSize: '18px',
     lineHeight: '24px',
@@ -942,12 +962,12 @@ const MenuItemText = styled(Typography)({
 });
 /**
  * Dropdown arrow icon
- * Size: 24px
+ * Size: 24px, color: #13131B
  */
 const DropdownIcon = styled(ArrowDropDownIcon)({
     width: '24px',
     height: '24px',
-    color: '#13131B',
+    color: designColors.natural.dim100,
 });
 /**
  * Right section containing login button
@@ -960,30 +980,28 @@ const RightSection = styled(Box)({
 /**
  * Login button (text style)
  * Based on Figma: Style=Text, State=enabled, Show Icon=False
+ * Color: #0090da (primary blue/teal)
  */
-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,
+const LoginButton = styled(Button$1)(({ 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
  */
@@ -1003,11 +1021,11 @@ const StyledMenuItem$1 = styled(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)',
     },
@@ -1072,15 +1090,15 @@ function DesktopHeaderMenuBar({ logo, logoAlt = 'Logo', menuItems, showLoginButt
         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 }) }))) })] }) })));
+    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 }) })), 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 }) => {
@@ -1974,14 +1992,16 @@ const CategoryIcon = styled(Box)(({ theme }) => ({
     justifyContent: 'center',
 }));
 const TitleText = styled(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 = styled(Typography)(({ theme }) => ({
-    fontFamily: '"Montserrat", sans-serif',
     fontWeight: 400,
     fontSize: '14px',
     lineHeight: '18px',
@@ -1999,7 +2019,6 @@ const PrimaryButton = styled(Button$1)(({ theme }) => ({
     borderRadius: '24px',
     height: '48px',
     textTransform: 'none',
-    fontFamily: '"Montserrat", sans-serif',
     fontWeight: 500,
     fontSize: '14px',
     lineHeight: '18px',
@@ -2012,7 +2031,6 @@ const SecondaryButton = styled(Button$1)(({ theme }) => ({
     borderRadius: '8px',
     height: '40px',
     textTransform: 'none',
-    fontFamily: '"Montserrat", sans-serif',
     fontWeight: 500,
     fontSize: '14px',
     lineHeight: '18px',
@@ -2231,24 +2249,34 @@ const QuestionHeader = styled(Box)(({ theme }) => ({
     width: '100%',
 }));
 const QuestionTitle = styled(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 = styled(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 = styled(Box)(({ theme }) => ({
     display: 'flex',
-    flexDirection: 'column',
+    flexDirection: 'row',
+    flexWrap: 'wrap',
     gap: '8px',
     width: '100%',
+    [theme.breakpoints.down('md')]: {
+        flexDirection: 'column',
+    },
 }));
 
 /**
@@ -2302,7 +2330,9 @@ const variantColors = {
         hoverBorder: '#5f5e62',
     },
 };
-const StyledOptionButton = styled(ButtonBase)(({ selected, size = 'medium', fullWidth, colorVariant = 'default' }) => {
+const StyledOptionButton = styled(ButtonBase, {
+    shouldForwardProp: (prop) => prop !== 'colorVariant',
+})(({ theme, selected, size = 'medium', fullWidth, colorVariant = 'default' }) => {
     const heights = {
         small: '32px',
         medium: '40px',
@@ -2311,6 +2341,7 @@ const StyledOptionButton = styled(ButtonBase)(({ selected, size = 'medium', full
     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
@@ -2333,6 +2364,10 @@ const StyledOptionButton = styled(ButtonBase)(({ selected, size = 'medium', full
             cursor: 'not-allowed',
             opacity: 0.6,
         },
+        // Mobile: always full width
+        [theme.breakpoints.down('md')]: {
+            width: '100%',
+        },
     };
 });
 const OptionContent = styled(Box)(() => ({
@@ -2347,14 +2382,18 @@ const OptionIcon = styled('span')(() => ({
     lineHeight: 1,
     flexShrink: 0,
 }));
-const OptionLabel = styled(Typography)(({ selected, colorVariant = 'default' }) => {
+const OptionLabel = styled(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,
+        },
     };
 });
 
@@ -2381,7 +2420,7 @@ const OptionLabel = styled(Typography)(({ selected, colorVariant = 'default' })
  * />
  * ```
  */
-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);
@@ -2571,8 +2610,7 @@ const ToggleButton = styled(Box)(({ theme, active }) => {
 const ToggleText = styled(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',
@@ -2651,23 +2689,30 @@ const CalloutIcon = styled(InfoIcon)(({ theme }) => {
 const CalloutTitle = styled(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 = styled(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',
+        },
     });
 });
 
@@ -2721,7 +2766,7 @@ const InputLabel = styled(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',
@@ -2748,7 +2793,7 @@ const InputValue = styled(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',
@@ -2836,7 +2881,7 @@ const RangeLabel = styled(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',
@@ -3051,7 +3096,6 @@ const ProgressFill = styled(Box)(({ width, progressBarTheme }) => ({
     transition: 'width 0.3s ease',
 }));
 const ProgressText = styled(Typography)({
-    fontFamily: 'Montserrat',
     fontSize: '12px',
     color: '#5F5E62',
     fontWeight: 400,
@@ -3094,14 +3138,12 @@ const ProductInfo = styled(Box)({
     marginLeft: '4px',
 });
 const ProductName = styled(Typography)({
-    fontFamily: 'Montserrat',
     fontSize: '14px',
     fontWeight: 600,
     color: '#13131B',
     lineHeight: '20px',
 });
 const PlanName = styled(Typography)({
-    fontFamily: 'Montserrat',
     fontSize: '12px',
     fontWeight: 400,
     color: '#13131B',
@@ -3113,14 +3155,12 @@ const PriceContainer = styled(Box)({
     gap: '2px',
 });
 const Price = styled(Typography)({
-    fontFamily: 'Montserrat',
     fontSize: '14px',
     fontWeight: 600,
     color: '#13131B',
     lineHeight: '20px',
 });
 const PricePeriod = styled(Typography)({
-    fontFamily: 'Montserrat',
     fontSize: '12px',
     fontWeight: 400,
     color: '#13131B',
@@ -3140,7 +3180,6 @@ const SectionHeader = styled(Box)({
     padding: '0 16px 24px',
 });
 const SectionTitle$2 = styled(Typography)({
-    fontFamily: 'Montserrat',
     fontSize: '20px',
     fontWeight: 700,
     color: '#13131B',
@@ -3148,7 +3187,6 @@ const SectionTitle$2 = styled(Typography)({
     marginBottom: '8px',
 });
 const SectionDescription = styled(Typography)({
-    fontFamily: 'Montserrat',
     fontSize: '14px',
     fontWeight: 400,
     color: '#5F5E62',
@@ -3191,7 +3229,6 @@ const StyledButton = styled('button')(({ isDisabled, desktopWidth }) => ({
         ? '#E1E2EB'
         : '#0090DA',
     color: isDisabled ? '#929094' : '#fff',
-    fontFamily: 'Montserrat',
     fontSize: '14px',
     fontWeight: 500,
     lineHeight: '18px',
@@ -3247,7 +3284,6 @@ styled(Box)(({ selected }) => ({
     },
 }));
 styled(Typography)(({ selected }) => ({
-    fontFamily: 'Montserrat',
     fontSize: '14px',
     fontWeight: 600,
     color: selected ? '#13131B' : '#5F5E62',
@@ -3295,7 +3331,7 @@ const FieldsGridContainer$2 = styled(Box)({
 /**
  * Full width field - spans both columns on desktop grid
  */
-const FullWidthField$2 = styled(Box)({
+const FullWidthField$1 = styled(Box)({
     '@media (min-width: 900px)': {
         gridColumn: '1 / -1',
     },
@@ -3311,7 +3347,6 @@ const CheckboxContainer$1 = styled(Box)({
     },
 });
 const CheckboxLabel$1 = styled(Typography)({
-    fontFamily: 'Montserrat',
     fontSize: '14px',
     fontWeight: 400,
     color: '#5F5E62',
@@ -3332,8 +3367,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 ? (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 ||
+                            } }, { children: fields.full_name.helperText })))] }), renderField(fields.nric), renderField(fields.date_of_birth), renderField(fields.gender), renderField(fields.salutation), renderField(fields.nationality), renderField(fields.occupation), renderField(fields.industry), renderField(fields.crediting_bank_name), renderField(fields.crediting_bank_account_number), desktopGridLayout ? (jsx(FullWidthField$1, { children: jsxs(CheckboxContainer$1, { children: [jsx(FormControlLabel, { control: jsx(Checkbox, { checked: consents.bank_account_confirmation.checked, onChange: (e) => consents.bank_account_confirmation.onChange(e.target.checked), name: "bank_account_confirmation" }), label: jsx(CheckboxLabel$1, { children: consents.bank_account_confirmation.label ||
                                         defaultBankConfirmationLabel }) }), consents.bank_account_confirmation.error && (jsx(Typography, Object.assign({ sx: {
                                     color: 'error.main',
                                     fontSize: '12px',
@@ -3345,7 +3379,7 @@ const PersonalInformationForm = ({ renderField, fields, consents, onSubmit, form
                                 fontSize: '12px',
                                 mt: 0.5,
                                 ml: 4,
-                            } }, { 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 }) }) }))] })) })));
+                            } }, { children: consents.bank_account_confirmation.error })))] })), desktopGridLayout ? (jsx(FullWidthField$1, { children: jsx(CheckboxContainer$1, { children: jsx(FormControlLabel, { control: jsx(Checkbox, { checked: consents.marketing_consent.checked, onChange: (e) => consents.marketing_consent.onChange(e.target.checked), name: "marketing_consent" }), label: jsx(CheckboxLabel$1, { children: consents.marketing_consent.label || defaultMarketingLabel }) }) }) })) : (jsx(CheckboxContainer$1, { children: jsx(FormControlLabel, { control: jsx(Checkbox, { checked: consents.marketing_consent.checked, onChange: (e) => consents.marketing_consent.onChange(e.target.checked), name: "marketing_consent" }), label: jsx(CheckboxLabel$1, { children: consents.marketing_consent.label || defaultMarketingLabel }) }) }))] })) })));
 };
 
 const FormContainer$2 = styled(Box)({
@@ -3381,7 +3415,7 @@ const FieldsGridContainer$1 = styled(Box)({
 /**
  * Full width field - spans both columns on desktop grid
  */
-const FullWidthField$1 = styled(Box)({
+const FullWidthField = styled(Box)({
     '@media (min-width: 900px)': {
         gridColumn: '1 / -1',
     },
@@ -3400,14 +3434,12 @@ const CheckboxContainer = styled(Box)({
     },
 });
 const CheckboxLabel = styled(Typography)({
-    fontFamily: 'Montserrat',
     fontSize: '14px',
     fontWeight: 400,
     color: '#5F5E62',
     lineHeight: '18px',
 });
 const SectionTitle$1 = styled(Typography)({
-    fontFamily: 'Montserrat',
     fontSize: '16px',
     fontWeight: 600,
     color: '#13131B',
@@ -3420,7 +3452,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 jsx(FullWidthField$1, { children: renderField(field) });
+            return jsx(FullWidthField, { children: renderField(field) });
         }
         return renderField(field);
     };
@@ -3431,14 +3463,13 @@ const ContactDetailsForm = ({ renderField, fields, mailingFields, mailingAddress
                         mt: 0.5,
                         color: '#5F5E62',
                         fontSize: '12px',
-                        fontFamily: 'Montserrat',
                     } }, { children: field.helperText })))] }));
         if (desktopGridLayout && fullWidth) {
-            return jsx(FullWidthField$1, { children: content });
+            return jsx(FullWidthField, { 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: {
+    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, { children: jsx(Divider, { sx: { borderColor: 'rgba(0,0,0,0.1)' } }) }), jsx(FullWidthField, { 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, { 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, { 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, { 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',
@@ -3449,31 +3480,26 @@ const ContactDetailsForm = ({ renderField, fields, mailingFields, mailingAddress
                                 ml: 2,
                                 color: '#5F5E62',
                                 fontSize: '12px',
-                                fontFamily: 'Montserrat',
                             } }, { children: fields.phone_number.helperText })))] }), renderField(fields.email_address), jsx(Divider, { sx: { borderColor: 'rgba(0,0,0,0.1)' } }), jsx(SectionTitle$1, { children: "Residential address" }), jsxs(Box, { children: [renderField(fields.residential_address_line1), fields.residential_address_line1.helperText && (jsx(Box, Object.assign({ component: "span", sx: {
                                 display: 'block',
                                 mt: 0.5,
                                 color: '#5F5E62',
                                 fontSize: '12px',
-                                fontFamily: 'Montserrat',
                             } }, { children: fields.residential_address_line1.helperText })))] }), jsxs(Box, { children: [renderField(fields.residential_address_line2), fields.residential_address_line2.helperText && (jsx(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), jsx(Divider, { sx: { borderColor: 'rgba(0,0,0,0.1)' } }), (mailingAddressSame === null || mailingAddressSame === void 0 ? void 0 : mailingAddressSame.checked) && mailingFields && (jsxs(Fragment, { children: [jsx(SectionTitle$1, { children: "Mailing address" }), jsxs(Box, { children: [renderField(mailingFields.mailing_address_line1), mailingFields.mailing_address_line1.helperText && (jsx(Box, Object.assign({ component: "span", sx: {
                                         display: 'block',
                                         mt: 0.5,
                                         color: '#5F5E62',
                                         fontSize: '12px',
-                                        fontFamily: 'Montserrat',
                                     } }, { children: mailingFields.mailing_address_line1.helperText })))] }), jsxs(Box, { children: [renderField(mailingFields.mailing_address_line2), mailingFields.mailing_address_line2.helperText && (jsx(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 && (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': {
@@ -3548,7 +3574,7 @@ const FieldsGridContainer = styled(Box)({
 /**
  * Full width field - spans both columns on desktop grid
  */
-const FullWidthField = styled(Box)({
+styled(Box)({
     '@media (min-width: 900px)': {
         gridColumn: '1 / -1',
     },
@@ -3558,14 +3584,13 @@ const ChildInformationForm = ({ renderField, fields, onSubmit, formRef, sx, desk
     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: {
+        return (jsx(Container, Object.assign({ ref: formRef, component: "form", onSubmit: onSubmit, sx: sx }, { children: jsxs(FieldsGridContainer, { 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,
                                     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)] }) })));
+                                } }, { 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 (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: {
@@ -3574,7 +3599,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)] })) })));
 };