igloo-d2c-components 1.0.17 → 1.0.19

package/dist/cjs/index.js

@@ -218,7 +218,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
@@ -316,7 +500,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',
@@ -485,7 +669,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',
@@ -1469,7 +1653,7 @@ const StyledDrawer$1 = styles.styled(material.Drawer)(({ theme }) => ({
 const DrawerHeader$1 = styles.styled(material.Box)(({ theme }) => ({
     display: 'flex',
     alignItems: 'center',
-    justifyContent: 'flex-start',
+    justifyContent: 'flex-end',
     padding: '16px',
     minHeight: '56px',
 }));
@@ -1525,7 +1709,7 @@ const FooterButtons = styles.styled(material.Box)(({ theme }) => ({
 // Base button styles - colors will be injected via sx prop from component
 const PrimaryButton = styles.styled(material.Button)(({ theme }) => ({
     color: '#FFFFFF',
-    borderRadius: '8px',
+    borderRadius: '24px',
     height: '48px',
     textTransform: 'none',
     fontFamily: '"Montserrat", sans-serif',
@@ -1570,8 +1754,8 @@ function RecommendationsDrawer({ open, onClose, children, headerIcon, title, sub
     material.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);
@@ -1606,7 +1790,7 @@ function RecommendationsDrawer({ open, onClose, children, headerIcon, title, sub
         } }, { children: jsxRuntime.jsxs(material.Box, Object.assign({ sx: { display: 'flex', flexDirection: 'column', height: '100%' } }, { children: [jsxRuntime.jsx(DrawerHeader$1, { children: jsxRuntime.jsx(material.IconButton, Object.assign({ onClick: handleBackOrClose, sx: { padding: 0 }, "aria-label": showBackButton ? 'back' : 'close' }, { children: showBackButton ? jsxRuntime.jsx(ArrowBackIcon, {}) : jsxRuntime.jsx(CloseIcon, {}) })) }), (title || subtitle || headerIcon) && (jsxRuntime.jsxs(HeaderSection, { children: [headerIcon && (jsxRuntime.jsx(CategoryIcon, { children: jsxRuntime.jsx("img", { src: headerIcon, alt: "Category icon", width: 32, height: 32 }) })), title && (jsxRuntime.jsx(TitleText, Object.assign({ variant: "h5" }, { children: formatMessage({ id: title }) }))), subtitle && (jsxRuntime.jsx(SubtitleText, Object.assign({ variant: "body2" }, { children: formatMessage({ id: subtitle }) })))] })), jsxRuntime.jsx(DrawerContent$1, { children: children }), showFooter && (jsxRuntime.jsx(DrawerFooter, { children: customFooter ? (customFooter) : (jsxRuntime.jsxs(FooterButtons, { children: [primaryButtonText && (jsxRuntime.jsx(PrimaryButton, Object.assign({ variant: "contained", fullWidth: true, onClick: onPrimaryAction, disabled: primaryButtonDisabled, sx: {
                                     backgroundColor: primaryColor,
                                     '&:hover': {
-                                        backgroundColor: primaryDark,
+                                        backgroundColor: primaryColor,
                                     },
                                 } }, { children: formatMessage({ id: primaryButtonText }) }))), secondaryButtonText && (jsxRuntime.jsx(SecondaryButton, Object.assign({ variant: "text", fullWidth: true, onClick: onSecondaryAction, sx: {
                                     color: primaryColor,
@@ -1761,7 +1945,7 @@ const QuestionHeader = styles.styled(material.Box)(({ theme }) => ({
 }));
 const QuestionTitle = styles.styled(material.Typography)(({ theme }) => ({
     fontFamily: '"Montserrat", sans-serif',
-    fontWeight: 600,
+    fontWeight: 700,
     fontSize: '14px',
     lineHeight: '20px',
     color: '#13131B',
@@ -1812,20 +1996,40 @@ function QuestionSection({ questionNumber, question, helperText, options, select
                 }) })] }));
 }
 
-const StyledOptionButton = styles.styled(material.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 = styles.styled(material.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',
@@ -1833,7 +2037,8 @@ const StyledOptionButton = styles.styled(material.ButtonBase)(({ theme, selected
         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',
@@ -1843,48 +2048,59 @@ const StyledOptionButton = styles.styled(material.ButtonBase)(({ theme, selected
         },
     };
 });
-const OptionContent = styles.styled(material.Box)(({ theme }) => ({
+const OptionContent = styles.styled(material.Box)(() => ({
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
     gap: '8px',
     width: '100%',
 }));
-const OptionIcon = styles.styled('span')(({ theme }) => ({
+const OptionIcon = styles.styled('span')(() => ({
     fontSize: '18px',
     lineHeight: 1,
     flexShrink: 0,
 }));
-const OptionLabel = styles.styled(material.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 = styles.styled(material.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 (jsxRuntime.jsx(StyledOptionButton, Object.assign({ selected: selected, disabled: disabled, onClick: handleClick, size: size, fullWidth: fullWidth }, { children: jsxRuntime.jsxs(OptionContent, { children: [icon && jsxRuntime.jsx(OptionIcon, { children: icon }), jsxRuntime.jsx(OptionLabel, Object.assign({ selected: selected, disabled: disabled, variant: "body2" }, { children: formatMessage({ id: label }) }))] }) })));
+    return (jsxRuntime.jsx(StyledOptionButton, Object.assign({ selected: selected, disabled: disabled, onClick: handleClick, size: size, fullWidth: fullWidth, colorVariant: variant }, { children: jsxRuntime.jsxs(OptionContent, { children: [icon && jsxRuntime.jsx(OptionIcon, { children: icon }), jsxRuntime.jsx(OptionLabel, Object.assign({ selected: selected, disabled: disabled, colorVariant: variant }, { children: formatMessage({ id: label }) }))] }) })));
 }
 
 const ToggleContainer$1 = styles.styled(material.Box)(({ theme }) => ({
@@ -2093,12 +2309,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 (jsxRuntime.jsxs(ToggleContainer, Object.assign({ sx: {
             backgroundColor: toggleBgColor,
+            border: `1px solid ${toggleActiveColor}`,
         } }, { children: [jsxRuntime.jsx(ToggleButton, Object.assign({ active: value === 'annually', onClick: () => onChange('monthly'), sx: {
                     backgroundColor: value === 'monthly' ? toggleActiveColor : 'transparent',
                     color: value === 'monthly'
@@ -2666,15 +2883,15 @@ const ButtonContainer = styles.styled(material.Box)(({ isFixed }) => ({
     zIndex: 999,
 }));
 const StyledButton = styles.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',
@@ -2685,7 +2902,7 @@ const StyledButton = styles.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',
         },
     });
 });
@@ -2698,10 +2915,8 @@ const QuestionContainer = styles.styled(material.Box)({
     display: 'flex',
     flexDirection: 'column',
     gap: '8px',
-    marginBottom: '24px',
 });
 const QuestionText = styles.styled(material.Typography)({
-    fontFamily: 'Montserrat',
     fontSize: '14px',
     fontWeight: 400,
     color: '#13131B',
@@ -2712,7 +2927,7 @@ const OptionsContainer = styles.styled(material.Box)({
     gap: '16px',
     marginTop: '12px',
 });
-const OptionButton = styles.styled(material.Box)(({ selected }) => ({
+styles.styled(material.Box)(({ selected }) => ({
     flex: 1,
     height: '48px',
     border: `1px solid ${selected ? '#13131B' : '#929094'}`,
@@ -2727,7 +2942,7 @@ const OptionButton = styles.styled(material.Box)(({ selected }) => ({
         borderColor: '#13131B',
     },
 }));
-const OptionText = styles.styled(material.Typography)(({ selected }) => ({
+styles.styled(material.Typography)(({ selected }) => ({
     fontFamily: 'Montserrat',
     fontSize: '14px',
     fontWeight: 600,
@@ -2736,16 +2951,15 @@ const OptionText = styles.styled(material.Typography)(({ selected }) => ({
 }));
 
 const HealthQuestionGroup = ({ question, questionNumber, value, onChange, error, labels = { yes: 'Yes', no: 'No' }, sx, }) => {
-    return (jsxRuntime.jsxs(QuestionContainer, Object.assign({ sx: sx }, { children: [jsxRuntime.jsxs(QuestionText, { children: [questionNumber && `${questionNumber}. `, question] }), jsxRuntime.jsxs(OptionsContainer, { children: [jsxRuntime.jsx(OptionButton, Object.assign({ selected: value === 'yes', onClick: () => onChange('yes'), role: "button", "aria-pressed": value === 'yes' }, { children: jsxRuntime.jsx(OptionText, Object.assign({ selected: value === 'yes' }, { children: labels.yes || 'Yes' })) })), jsxRuntime.jsx(OptionButton, Object.assign({ selected: value === 'no', onClick: () => onChange('no'), role: "button", "aria-pressed": value === 'no' }, { children: jsxRuntime.jsx(OptionText, Object.assign({ selected: value === 'no' }, { children: labels.no || 'No' })) }))] }), error && (jsxRuntime.jsx(material.Typography, Object.assign({ sx: {
+    return (jsxRuntime.jsxs(QuestionContainer, Object.assign({ sx: sx }, { children: [jsxRuntime.jsxs(QuestionText, { children: [questionNumber && `${questionNumber}. `, question] }), jsxRuntime.jsxs(OptionsContainer, { children: [jsxRuntime.jsx(OptionButton, { value: "yes", label: labels.yes || 'Yes', selected: value === 'yes', onClick: () => onChange('yes'), variant: "form" }), jsxRuntime.jsx(OptionButton, { value: "no", label: labels.no || 'No', selected: value === 'no', onClick: () => onChange('no'), variant: "form" })] }), error && (jsxRuntime.jsx(material.Typography, Object.assign({ sx: {
                     color: 'error.main',
                     fontSize: '12px',
                     mt: 0.5,
-                    ml: 2,
                 } }, { children: error })))] })));
 };
 
 const FormContainer$3 = styles.styled(material.Box)({
-    padding: '0 16px 100px',
+    padding: '0 16px 24px',
 });
 const CheckboxContainer$1 = styles.styled(material.Box)({
     marginTop: '12px',
@@ -2785,7 +2999,7 @@ const PersonalInformationForm = ({ renderField, fields, consents, onSubmit, form
 };
 
 const FormContainer$2 = styles.styled(material.Box)({
-    padding: '0 16px 100px',
+    padding: '0 16px 24px',
 });
 const CheckboxContainer = styles.styled(material.Box)({
     marginTop: '12px',
@@ -2824,28 +3038,24 @@ const ContactDetailsForm = ({ renderField, fields, mailingFields, mailingAddress
                             } }, { 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,
-                                ml: 2,
                                 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,
-                                ml: 2,
                                 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,
-                                        ml: 2,
                                         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,
-                                        ml: 2,
                                         color: '#5F5E62',
                                         fontSize: '12px',
                                         fontFamily: 'Montserrat',
@@ -2858,7 +3068,7 @@ const ContactDetailsForm = ({ renderField, fields, mailingFields, mailingAddress
 };
 
 const FormContainer$1 = styles.styled(material.Box)({
-    padding: '0 16px 100px',
+    padding: '0 16px 24px',
 });
 
 const HealthInformationForm = ({ renderField, measurementFields, healthQuestions, onSubmit, formRef, sx, }) => {
@@ -2866,7 +3076,7 @@ const HealthInformationForm = ({ renderField, measurementFields, healthQuestions
 };
 
 const FormContainer = styles.styled(material.Box)({
-    padding: '0 16px 100px',
+    padding: '0 16px 24px',
 });
 
 const ChildInformationForm = ({ renderField, fields, onSubmit, formRef, sx, }) => {
@@ -2877,7 +3087,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)] })) })));
 };
 
 /**
@@ -2942,7 +3152,7 @@ const StyledAccordionSummary = material.styled(material.AccordionSummary)(({ the
     },
 }));
 const FAQQuestion = material.styled(material.Typography)(({ theme }) => ({
-    fontWeight: 600,
+    fontWeight: 700,
     fontSize: '14px',
     lineHeight: '20px',
     flex: 1,
@@ -3062,7 +3272,7 @@ const BenefitContent = material.styled(material.Box)({
     gap: '6px',
 });
 const BenefitTitle = material.styled(material.Typography)(({ theme }) => ({
-    fontWeight: 600,
+    fontWeight: 700,
     fontSize: '14px',
     lineHeight: '20px',
     margin: 0,
@@ -3263,7 +3473,7 @@ exports.HealthQuestionGroup = HealthQuestionGroup;
 exports.ICON_PATHS = ICON_PATHS;
 exports.InfoCallout = InfoCallout;
 exports.NewHeader = NewHeader;
-exports.OptionButton = OptionButton$1;
+exports.OptionButton = OptionButton;
 exports.PersonalInformationForm = PersonalInformationForm;
 exports.ProductCard = ProductCard;
 exports.ProductSelectionDrawer = ProductSelectionDrawer;