igloo-d2c-components 1.0.18 → 1.0.19

package/dist/esm/index.js

@@ -198,7 +198,191 @@ const cimbTypography = Object.assign(Object.assign({}, iglooTypography), { fontF
 /**
  * AmmetLife Typography Configuration
  */
-const ammetlifeTypography = Object.assign(Object.assign({}, iglooTypography), { fontFamily: 'Montserrat' });
+const ammetlifeTypography = Object.assign(Object.assign({}, iglooTypography), { fontFamily: 'MetLifeCircular', 
+    /**
+     * AmMetLife Typography Configuration
+     * Font: MetLifeCircular
+     * Based on Figma Design: Tech-Solution-V1.0 (node 2901-37059)
+     *
+     * Typography Scale Reference:
+     * ===========================
+     * DISPLAY (Large promotional text):
+     *   - Display Large: Bold 64/72
+     *   - Display Medium: Bold 45/52
+     *   - Display Small: Bold 34/44
+     *
+     * HEADLINE PC (Desktop headings):
+     *   - Headline Large (H1): Bold 30/44
+     *   - Headline Medium (H2): Bold 22/26
+     *   - Headline Small (H3): Bold 18/24
+     *
+     * TITLE MOBILE (Mobile headings):
+     *   - Title Large (H1): Bold 20/28
+     *   - Title Medium (H2): Bold 16/24
+     *   - Title Small (H3): Bold 14/20
+     *
+     * BODY STRONG (Emphasized body text):
+     *   - Body Large Strong: Medium 16/20
+     *   - Body Medium Strong: Medium 14/18
+     *   - Body Small Strong: Medium 12/16
+     *
+     * BODY (Regular body text):
+     *   - Body Large: Normal 16/20
+     *   - Body Medium: Normal 14/18
+     *   - Body Small: Normal 12/16
+     */
+    fontWeightLight: 300, fontWeightNormal: 400, fontWeightMedium: 500, fontWeightBold: 700, 
+    /* ========================================
+     * DISPLAY VARIANTS
+     * For hero banners and large promotional text
+     * Font: MetLife Circular Bold
+     * ======================================== */
+    // Display Large - MetLife Circular Bold 64/72
+    displayLargeFigma: {
+        fontSize: '64px',
+        fontStyle: 'normal',
+        fontWeight: 700,
+        lineHeight: '72px',
+        letterSpacing: 0,
+    }, 
+    // Display Medium - MetLife Circular Bold 45/52
+    displayMediumFigma: {
+        fontSize: '45px',
+        fontStyle: 'normal',
+        fontWeight: 700,
+        lineHeight: '52px',
+        letterSpacing: 0,
+    }, 
+    // Display Small - MetLife Circular Bold 34/44
+    displaySmallFigma: {
+        fontSize: '34px',
+        fontStyle: 'normal',
+        fontWeight: 700,
+        lineHeight: '44px',
+        letterSpacing: 0,
+    }, 
+    /* ========================================
+     * HEADLINE VARIANTS (PC/Desktop)
+     * For desktop headings
+     * Font: MetLife Circular Bold
+     * ======================================== */
+    // Headline Large (H1) - MetLife Circular Bold 30/44
+    headlineLarge: {
+        fontSize: '30px',
+        fontStyle: 'normal',
+        fontWeight: 700,
+        lineHeight: '44px',
+        letterSpacing: 0,
+    }, 
+    // Headline Medium (H2) - MetLife Circular Bold 22/26
+    headlineMedium: {
+        fontSize: '22px',
+        fontStyle: 'normal',
+        fontWeight: 700,
+        lineHeight: '26px',
+        letterSpacing: 0,
+    }, 
+    // Headline Small (H3) - MetLife Circular Bold 18/24
+    headlineSmall: {
+        fontSize: '18px',
+        fontStyle: 'normal',
+        fontWeight: 700,
+        lineHeight: '24px',
+        letterSpacing: 0,
+    }, 
+    /* ========================================
+     * TITLE VARIANTS (Mobile)
+     * For mobile headings
+     * Font: MetLife Circular Bold
+     * ======================================== */
+    // Title Large (H1) - MetLife Circular Bold 20/28
+    titleLarge: {
+        fontSize: '20px',
+        fontStyle: 'normal',
+        fontWeight: 700,
+        lineHeight: '28px',
+        letterSpacing: 0,
+    }, 
+    // Title Medium (H2) - MetLife Circular Bold 16/24
+    titleMedium: {
+        fontSize: '16px',
+        fontStyle: 'normal',
+        fontWeight: 700,
+        lineHeight: '24px',
+        letterSpacing: 0,
+    }, 
+    // Title Small (H3) - MetLife Circular Bold 14/20
+    titleSmall: {
+        fontSize: '14px',
+        fontStyle: 'normal',
+        fontWeight: 700,
+        lineHeight: '20px',
+        letterSpacing: 0,
+    }, 
+    /* ========================================
+     * BODY STRONG VARIANTS
+     * Emphasized body text with medium weight
+     * Font: MetLife Circular Medium
+     * ======================================== */
+    // Body Large Strong - MetLife Circular Medium 16/20
+    bodyLargeStrong: {
+        fontSize: '16px',
+        fontStyle: 'normal',
+        fontWeight: 500,
+        lineHeight: '20px',
+        letterSpacing: 0,
+    }, 
+    // Body Medium Strong - MetLife Circular Medium 14/18
+    bodyMediumStrong: {
+        fontSize: '14px',
+        fontStyle: 'normal',
+        fontWeight: 500,
+        lineHeight: '18px',
+        letterSpacing: 0,
+    }, 
+    // Body Small Strong - MetLife Circular Medium 12/16
+    bodySmallStrong: {
+        fontSize: '12px',
+        fontStyle: 'normal',
+        fontWeight: 500,
+        lineHeight: '16px',
+        letterSpacing: 0,
+    }, 
+    /* ========================================
+     * BODY VARIANTS
+     * Regular body text
+     * Font: MetLife Circular Normal
+     * ======================================== */
+    // Body Large - MetLife Circular Normal 16/20
+    bodyLargeFigma: {
+        fontSize: '16px',
+        fontStyle: 'normal',
+        fontWeight: 400,
+        lineHeight: '20px',
+        letterSpacing: 0,
+    }, 
+    // Body Medium - MetLife Circular Normal 14/18
+    bodyMediumFigma: {
+        fontSize: '14px',
+        fontStyle: 'normal',
+        fontWeight: 400,
+        lineHeight: '18px',
+        letterSpacing: 0,
+    }, 
+    // Body Small - MetLife Circular Normal 12/16
+    bodySmallFigma: {
+        fontSize: '12px',
+        fontStyle: 'normal',
+        fontWeight: 400,
+        lineHeight: '16px',
+        letterSpacing: 0,
+    }, bodyTinyFigma: {
+        fontSize: '9px',
+        fontStyle: 'normal',
+        fontWeight: 400,
+        lineHeight: 'normal',
+        letterSpacing: 0,
+    } });
 /**
  * Typography Registry
  * Map of tenant IDs to their typography configurations
@@ -296,7 +480,7 @@ const iglooTheme = {
             main: '#F3A100',
         },
     },
-    typography: Object.assign(Object.assign({}, iglooTypography), { fontFamily: '"Manrope", "Roboto", "Helvetica", "Arial", sans-serif' }),
+    typography: Object.assign(Object.assign({}, iglooTypography), { fontFamily: '"Montserrat", "Roboto", "Helvetica", "Arial", sans-serif' }),
     logo: '/assets/tenants/igloo/logo.svg',
     favicon: 'https://static.iglooinsure.com/icons/favicon.ico',
     assetBaseUrl: '/assets/tenants/igloo',
@@ -465,7 +649,7 @@ const ammetlifeTheme = {
             main: '#FF9800',
         },
     },
-    typography: Object.assign(Object.assign({}, ammetlifeTypography), { fontFamily: '"Montserrat", "Roboto", "Helvetica", "Arial", sans-serif' }),
+    typography: Object.assign(Object.assign({}, ammetlifeTypography), { fontFamily: '"MetLifeCircular", "Roboto", "Helvetica", "Arial", sans-serif' }),
     logo: '/assets/tenants/ammetlife/logo_aml.svg',
     favicon: 'https://static.iglooinsure.com/icons/favicon.ico',
     assetBaseUrl: '/assets/tenants/ammetlife',
@@ -1449,7 +1633,7 @@ const StyledDrawer$1 = styled(Drawer)(({ theme }) => ({
 const DrawerHeader$1 = styled(Box)(({ theme }) => ({
     display: 'flex',
     alignItems: 'center',
-    justifyContent: 'flex-start',
+    justifyContent: 'flex-end',
     padding: '16px',
     minHeight: '56px',
 }));
@@ -1505,7 +1689,7 @@ const FooterButtons = styled(Box)(({ theme }) => ({
 // Base button styles - colors will be injected via sx prop from component
 const PrimaryButton = styled(Button$1)(({ theme }) => ({
     color: '#FFFFFF',
-    borderRadius: '8px',
+    borderRadius: '24px',
     height: '48px',
     textTransform: 'none',
     fontFamily: '"Montserrat", sans-serif',
@@ -1550,8 +1734,8 @@ function RecommendationsDrawer({ open, onClose, children, headerIcon, title, sub
     useMediaQuery((_a = muiTheme === null || muiTheme === void 0 ? void 0 : muiTheme.breakpoints) === null || _a === void 0 ? void 0 : _a.down('md'));
     const tenantTheme = useTenantTheme();
     // Get primary color from tenant theme, fallback to default
-    const primaryColor = ((_d = (_c = (_b = tenantTheme === null || tenantTheme === void 0 ? void 0 : tenantTheme.theme) === null || _b === void 0 ? void 0 : _b.palette) === null || _c === void 0 ? void 0 : _c.primary) === null || _d === void 0 ? void 0 : _d.main) || '#317abc';
-    const primaryDark = ((_g = (_f = (_e = tenantTheme === null || tenantTheme === void 0 ? void 0 : tenantTheme.theme) === null || _e === void 0 ? void 0 : _e.palette) === null || _f === void 0 ? void 0 : _f.primary) === null || _g === void 0 ? void 0 : _g.dark) || '#2869a8';
+    const primaryColor = ((_d = (_c = (_b = tenantTheme === null || tenantTheme === void 0 ? void 0 : tenantTheme.theme) === null || _b === void 0 ? void 0 : _b.palette) === null || _c === void 0 ? void 0 : _c.primary) === null || _d === void 0 ? void 0 : _d.main) || '#0090DA';
+    ((_g = (_f = (_e = tenantTheme === null || tenantTheme === void 0 ? void 0 : tenantTheme.theme) === null || _e === void 0 ? void 0 : _e.palette) === null || _f === void 0 ? void 0 : _f.primary) === null || _g === void 0 ? void 0 : _g.dark) || '#2869a8';
     // Helper to convert hex to rgba
     const hexToRgba = (hex, alpha) => {
         const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
@@ -1586,7 +1770,7 @@ function RecommendationsDrawer({ open, onClose, children, headerIcon, title, sub
         } }, { children: jsxs(Box, Object.assign({ sx: { display: 'flex', flexDirection: 'column', height: '100%' } }, { children: [jsx(DrawerHeader$1, { children: jsx(IconButton, Object.assign({ onClick: handleBackOrClose, sx: { padding: 0 }, "aria-label": showBackButton ? 'back' : 'close' }, { children: showBackButton ? jsx(ArrowBackIcon, {}) : jsx(CloseIcon, {}) })) }), (title || subtitle || headerIcon) && (jsxs(HeaderSection, { children: [headerIcon && (jsx(CategoryIcon, { children: jsx("img", { src: headerIcon, alt: "Category icon", width: 32, height: 32 }) })), title && (jsx(TitleText, Object.assign({ variant: "h5" }, { children: formatMessage({ id: title }) }))), subtitle && (jsx(SubtitleText, Object.assign({ variant: "body2" }, { children: formatMessage({ id: subtitle }) })))] })), jsx(DrawerContent$1, { children: children }), showFooter && (jsx(DrawerFooter, { children: customFooter ? (customFooter) : (jsxs(FooterButtons, { children: [primaryButtonText && (jsx(PrimaryButton, Object.assign({ variant: "contained", fullWidth: true, onClick: onPrimaryAction, disabled: primaryButtonDisabled, sx: {
                                     backgroundColor: primaryColor,
                                     '&:hover': {
-                                        backgroundColor: primaryDark,
+                                        backgroundColor: primaryColor,
                                     },
                                 } }, { children: formatMessage({ id: primaryButtonText }) }))), secondaryButtonText && (jsx(SecondaryButton, Object.assign({ variant: "text", fullWidth: true, onClick: onSecondaryAction, sx: {
                                     color: primaryColor,
@@ -1741,7 +1925,7 @@ const QuestionHeader = styled(Box)(({ theme }) => ({
 }));
 const QuestionTitle = styled(Typography)(({ theme }) => ({
     fontFamily: '"Montserrat", sans-serif',
-    fontWeight: 600,
+    fontWeight: 700,
     fontSize: '14px',
     lineHeight: '20px',
     color: '#13131B',
@@ -1792,20 +1976,40 @@ function QuestionSection({ questionNumber, question, helperText, options, select
                 }) })] }));
 }
 
-const StyledOptionButton = styled(ButtonBase)(({ theme, selected, size = 'medium', fullWidth }) => {
+// Color configurations for different variants
+const variantColors = {
+    default: {
+        unselectedBorder: '#D9D9D6',
+        unselectedText: 'rgba(0, 0, 0, 0.40)',
+        unselectedBg: '#FFFFFF',
+        selectedBg: 'rgba(49, 122, 188, 0.10)',
+        hoverBg: 'rgba(0, 0, 0, 0.04)',
+        hoverBorder: '#D9D9D6',
+    },
+    form: {
+        unselectedBorder: '#929094',
+        unselectedText: '#5f5e62',
+        unselectedBg: 'transparent',
+        selectedBg: 'rgba(61, 147, 222, 0.1)',
+        hoverBg: 'rgba(0, 0, 0, 0.02)',
+        hoverBorder: '#5f5e62',
+    },
+};
+const StyledOptionButton = styled(ButtonBase)(({ selected, size = 'medium', fullWidth, colorVariant = 'default' }) => {
     const heights = {
         small: '32px',
         medium: '40px',
         large: '48px',
     };
+    const colors = variantColors[colorVariant];
     return {
         height: heights[size],
         width: fullWidth ? '100%' : 'auto',
-        borderRadius: '8px',
+        borderRadius: '24px',
         border: selected
-            ? '2px solid #317ABC'
-            : '1px solid #C8C5CA',
-        backgroundColor: selected ? 'rgba(49, 122, 188, 0.1)' : '#FFFFFF',
+            ? '2px solid #0090DA'
+            : `1px solid ${colors.unselectedBorder}`,
+        backgroundColor: selected ? colors.selectedBg : colors.unselectedBg,
         padding: '10px 24px',
         display: 'flex',
         alignItems: 'center',
@@ -1813,7 +2017,8 @@ const StyledOptionButton = styled(ButtonBase)(({ theme, selected, size = 'medium
         cursor: 'pointer',
         transition: 'all 0.2s ease',
         '&:hover': {
-            backgroundColor: selected ? 'rgba(49, 122, 188, 0.15)' : 'rgba(0, 0, 0, 0.04)',
+            backgroundColor: selected ? colors.selectedBg : colors.hoverBg,
+            borderColor: selected ? '#0090DA' : colors.hoverBorder,
         },
         '&:disabled': {
             backgroundColor: '#F5F5F5',
@@ -1823,48 +2028,59 @@ const StyledOptionButton = styled(ButtonBase)(({ theme, selected, size = 'medium
         },
     };
 });
-const OptionContent = styled(Box)(({ theme }) => ({
+const OptionContent = styled(Box)(() => ({
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
     gap: '8px',
     width: '100%',
 }));
-const OptionIcon = styled('span')(({ theme }) => ({
+const OptionIcon = styled('span')(() => ({
     fontSize: '18px',
     lineHeight: 1,
     flexShrink: 0,
 }));
-const OptionLabel = styled(Typography)(({ theme, selected, disabled }) => ({
-    fontFamily: '"Montserrat", sans-serif',
-    fontWeight: selected ? 600 : 500,
-    fontSize: '14px',
-    lineHeight: '20px',
-    color: disabled ? 'rgba(0, 0, 0, 0.4)' : '#13131B',
-    textAlign: 'center',
-}));
+const OptionLabel = styled(Typography)(({ selected, colorVariant = 'default' }) => {
+    const colors = variantColors[colorVariant];
+    return {
+        fontWeight: selected ? 600 : 500,
+        fontSize: '16px',
+        lineHeight: '20px',
+        color: selected ? '#0090DA' : colors.unselectedText,
+        textAlign: 'center',
+    };
+});
 
 /**
  * OptionButton - Selectable button for questionnaire options
  *
  * @example
  * ```tsx
+ * // Default variant (lighter colors) for recommendations
  * <OptionButton
  *   value="option1"
  *   label="Option 1"
- *   icon="🎯"
  *   selected={selectedValue === 'option1'}
  *   onClick={(value) => setSelectedValue(value)}
  * />
+ *
+ * // Form variant (darker colors) for gender selection, health questions
+ * <OptionButton
+ *   value="male"
+ *   label="Male"
+ *   variant="form"
+ *   selected={gender === 'male'}
+ *   onClick={(value) => setGender(value)}
+ * />
  * ```
  */
-function OptionButton$1({ value, label, icon, selected = false, disabled = false, onClick, size = 'medium', fullWidth = true, formatMessage = (descriptor) => descriptor.id, }) {
+function OptionButton({ value, label, icon, selected = false, disabled = false, onClick, size = 'medium', fullWidth = true, variant = 'default', formatMessage = (descriptor) => descriptor.id, }) {
     const handleClick = () => {
         if (!disabled && onClick) {
             onClick(value);
         }
     };
-    return (jsx(StyledOptionButton, Object.assign({ selected: selected, disabled: disabled, onClick: handleClick, size: size, fullWidth: fullWidth }, { children: jsxs(OptionContent, { children: [icon && jsx(OptionIcon, { children: icon }), jsx(OptionLabel, Object.assign({ selected: selected, disabled: disabled, variant: "body2" }, { children: formatMessage({ id: label }) }))] }) })));
+    return (jsx(StyledOptionButton, Object.assign({ selected: selected, disabled: disabled, onClick: handleClick, size: size, fullWidth: fullWidth, colorVariant: variant }, { children: jsxs(OptionContent, { children: [icon && jsx(OptionIcon, { children: icon }), jsx(OptionLabel, Object.assign({ selected: selected, disabled: disabled, colorVariant: variant }, { children: formatMessage({ id: label }) }))] }) })));
 }
 
 const ToggleContainer$1 = styled(Box)(({ theme }) => ({
@@ -2073,12 +2289,13 @@ function BillingToggle({ value, onChange, formatMessage = (descriptor) => descri
     const tenantTheme = useTenantTheme();
     const theme = tenantTheme === null || tenantTheme === void 0 ? void 0 : tenantTheme.theme;
     // Get theme colors with SSR-safe fallbacks
-    const toggleActiveColor = getThemeColor(theme, 'ui.toggleActive', '#a4ce4e');
+    const toggleActiveColor = getThemeColor(theme, 'ui.toggleActive', '#0090DA');
     const toggleActiveTextColor = getThemeColor(theme, 'ui.toggleActiveText', '#fefbff');
-    const toggleInactiveTextColor = getThemeColor(theme, 'ui.toggleInactiveText', '#5f5e62');
+    const toggleInactiveTextColor = getThemeColor(theme, 'ui.toggleInactiveText', '#0090DA');
     const toggleBgColor = getThemeColor(theme, 'ui.sliderBackground', '#f9f9f9');
     return (jsxs(ToggleContainer, Object.assign({ sx: {
             backgroundColor: toggleBgColor,
+            border: `1px solid ${toggleActiveColor}`,
         } }, { children: [jsx(ToggleButton, Object.assign({ active: value === 'annually', onClick: () => onChange('monthly'), sx: {
                     backgroundColor: value === 'monthly' ? toggleActiveColor : 'transparent',
                     color: value === 'monthly'
@@ -2646,15 +2863,15 @@ const ButtonContainer = styled(Box)(({ isFixed }) => ({
     zIndex: 999,
 }));
 const StyledButton = styled('button')(({ theme, isDisabled }) => {
-    var _a, _b, _c, _d;
+    var _a, _b;
     return ({
         width: '100%',
         height: '48px',
-        borderRadius: '8px',
+        borderRadius: '24px',
         border: 'none',
         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.main) || '#13131B',
+            : '#0090DA',
         color: isDisabled ? '#929094' : '#fff',
         fontFamily: 'Montserrat',
         fontSize: '14px',
@@ -2665,7 +2882,7 @@ const StyledButton = styled('button')(({ theme, isDisabled }) => {
         '&:hover': {
             backgroundColor: isDisabled
                 ? '#E1E2EB'
-                : ((_d = (_c = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _c === void 0 ? void 0 : _c.primary) === null || _d === void 0 ? void 0 : _d.dark) || '#2a2a33',
+                : ((_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',
         },
     });
 });
@@ -2678,10 +2895,8 @@ const QuestionContainer = styled(Box)({
     display: 'flex',
     flexDirection: 'column',
     gap: '8px',
-    marginBottom: '24px',
 });
 const QuestionText = styled(Typography)({
-    fontFamily: 'Montserrat',
     fontSize: '14px',
     fontWeight: 400,
     color: '#13131B',
@@ -2692,7 +2907,7 @@ const OptionsContainer = styled(Box)({
     gap: '16px',
     marginTop: '12px',
 });
-const OptionButton = styled(Box)(({ selected }) => ({
+styled(Box)(({ selected }) => ({
     flex: 1,
     height: '48px',
     border: `1px solid ${selected ? '#13131B' : '#929094'}`,
@@ -2707,7 +2922,7 @@ const OptionButton = styled(Box)(({ selected }) => ({
         borderColor: '#13131B',
     },
 }));
-const OptionText = styled(Typography)(({ selected }) => ({
+styled(Typography)(({ selected }) => ({
     fontFamily: 'Montserrat',
     fontSize: '14px',
     fontWeight: 600,
@@ -2716,11 +2931,10 @@ const OptionText = styled(Typography)(({ selected }) => ({
 }));
 
 const HealthQuestionGroup = ({ question, questionNumber, value, onChange, error, labels = { yes: 'Yes', no: 'No' }, sx, }) => {
-    return (jsxs(QuestionContainer, Object.assign({ sx: sx }, { children: [jsxs(QuestionText, { children: [questionNumber && `${questionNumber}. `, question] }), jsxs(OptionsContainer, { children: [jsx(OptionButton, Object.assign({ selected: value === 'yes', onClick: () => onChange('yes'), role: "button", "aria-pressed": value === 'yes' }, { children: jsx(OptionText, Object.assign({ selected: value === 'yes' }, { children: labels.yes || 'Yes' })) })), jsx(OptionButton, Object.assign({ selected: value === 'no', onClick: () => onChange('no'), role: "button", "aria-pressed": value === 'no' }, { children: jsx(OptionText, Object.assign({ selected: value === 'no' }, { children: labels.no || 'No' })) }))] }), error && (jsx(Typography, Object.assign({ sx: {
+    return (jsxs(QuestionContainer, Object.assign({ sx: sx }, { children: [jsxs(QuestionText, { children: [questionNumber && `${questionNumber}. `, question] }), jsxs(OptionsContainer, { children: [jsx(OptionButton, { value: "yes", label: labels.yes || 'Yes', selected: value === 'yes', onClick: () => onChange('yes'), variant: "form" }), jsx(OptionButton, { value: "no", label: labels.no || 'No', selected: value === 'no', onClick: () => onChange('no'), variant: "form" })] }), error && (jsx(Typography, Object.assign({ sx: {
                     color: 'error.main',
                     fontSize: '12px',
                     mt: 0.5,
-                    ml: 2,
                 } }, { children: error })))] })));
 };
 
@@ -2804,28 +3018,24 @@ const ContactDetailsForm = ({ renderField, fields, mailingFields, mailingAddress
                             } }, { 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,
-                                ml: 2,
                                 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,
-                                ml: 2,
                                 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,
-                                        ml: 2,
                                         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,
-                                        ml: 2,
                                         color: '#5F5E62',
                                         fontSize: '12px',
                                         fontFamily: 'Montserrat',
@@ -2857,7 +3067,7 @@ const ChildInformationForm = ({ renderField, fields, onSubmit, formRef, sx, }) =
                                 color: '#5F5E62',
                                 fontSize: '12px',
                                 fontFamily: 'Montserrat',
-                            } }, { children: fields.full_name.helperText })))] }), 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), renderField(fields.gender), renderField(fields.nationality)] })) })));
 };
 
 /**
@@ -2922,7 +3132,7 @@ const StyledAccordionSummary = styled$1(AccordionSummary)(({ theme }) => ({
     },
 }));
 const FAQQuestion = styled$1(Typography)(({ theme }) => ({
-    fontWeight: 600,
+    fontWeight: 700,
     fontSize: '14px',
     lineHeight: '20px',
     flex: 1,
@@ -3042,7 +3252,7 @@ const BenefitContent = styled$1(Box)({
     gap: '6px',
 });
 const BenefitTitle = styled$1(Typography)(({ theme }) => ({
-    fontWeight: 600,
+    fontWeight: 700,
     fontSize: '14px',
     lineHeight: '20px',
     margin: 0,
@@ -3224,5 +3434,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$1 as 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, 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