igloo-d2c-components 1.0.35 → 1.0.37

package/README.md

@@ -683,7 +683,6 @@ const products: Product[] = [
   }}
   title="Select your product"
   subtitle="Pick the product that suits your protection goals"
-  viewPlansButtonText="View plans"
 />
 ```
 

package/dist/cjs/index.js

@@ -6,7 +6,6 @@ var React = require('react');
 var material = require('@mui/material');
 var ArrowDropDownIcon = require('@mui/icons-material/ArrowDropDown');
 var CloseIcon = require('@mui/icons-material/Close');
-var LanguageIcon = require('@mui/icons-material/Language');
 var AppBar = require('@mui/material/AppBar');
 var styles = require('@mui/material/styles');
 var MenuIcon = require('@mui/icons-material/Menu');
@@ -1091,10 +1090,10 @@ const PurchaseButton = styles.styled(material.Button)(() => ({
     borderRadius: '24px',
     whiteSpace: 'nowrap',
     '&:hover': {
-        backgroundColor: '#007bb8',
+        backgroundColor: 'rgba(0, 144, 218, 0.7)',
     },
     '&:active': {
-        backgroundColor: '#006a9e',
+        backgroundColor: '#0090DA',
     },
 }));
 /**
@@ -1191,10 +1190,13 @@ languages = [], currentLocale, onLanguageChange, }) {
         onLanguageChange === null || onLanguageChange === void 0 ? void 0 : onLanguageChange(locale, value);
         handleLangMenuClose();
     };
-    // Derive current language label from locale
-    const currentLangLabel = React__namespace.useMemo(() => {
+    // Derive short code for language switch trigger (per Figma: "EN" with chevron)
+    const currentLangShortCode = React__namespace.useMemo(() => {
+        var _a;
         const match = languages.find((l) => l.locale === currentLocale);
-        return (match === null || match === void 0 ? void 0 : match.label) || 'English';
+        if (match === null || match === void 0 ? void 0 : match.shortCode)
+            return match.shortCode;
+        return ((_a = match === null || match === void 0 ? void 0 : match.locale) === null || _a === void 0 ? void 0 : _a.toUpperCase().substring(0, 2)) || 'EN';
     }, [languages, currentLocale]);
     // Determine which button props to use (support legacy props)
     const shouldShowCtaButton = (_a = showCtaButton !== null && showCtaButton !== void 0 ? showCtaButton : showLoginButton) !== null && _a !== void 0 ? _a : true;
@@ -1262,7 +1264,7 @@ languages = [], currentLocale, onLanguageChange, }) {
                                         horizontal: 'left',
                                     }, MenuListProps: {
                                         'aria-labelledby': `menu-button-${item.key}`,
-                                    } }, { children: item.subItems.map((subItem) => (jsxRuntime.jsxs(StyledMenuItem$1, Object.assign({ onClick: () => handleSubItemClick(item, subItem.key), "data-testid": `submenu-item-${subItem.key}` }, { children: [subItem.icon && (jsxRuntime.jsx(MenuItemIcon, { src: subItem.icon, alt: subItem.label })), formatMessage({ id: subItem.label })] }), subItem.key))) })))] }, item.key))), languages.length > 0 && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(MenuItemButton, Object.assign({ onClick: handleLangMenuOpen, "aria-haspopup": "true", "aria-expanded": isLangMenuOpen, "data-testid": "language-switcher" }, { children: [jsxRuntime.jsx(LanguageIcon, { sx: { fontSize: '20px', mr: '4px' } }), jsxRuntime.jsx(MenuItemText, { children: currentLangLabel }), jsxRuntime.jsx(DropdownIcon, { sx: {
+                                    } }, { children: item.subItems.map((subItem) => (jsxRuntime.jsxs(StyledMenuItem$1, Object.assign({ onClick: () => handleSubItemClick(item, subItem.key), "data-testid": `submenu-item-${subItem.key}` }, { children: [subItem.icon && (jsxRuntime.jsx(MenuItemIcon, { src: subItem.icon, alt: subItem.label })), formatMessage({ id: subItem.label })] }), subItem.key))) })))] }, item.key))), languages.length > 0 && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(MenuItemButton, Object.assign({ onClick: handleLangMenuOpen, "aria-haspopup": "true", "aria-expanded": isLangMenuOpen, "data-testid": "language-switcher" }, { children: [jsxRuntime.jsx(MenuItemText, { children: currentLangShortCode }), jsxRuntime.jsx(DropdownIcon, { sx: {
                                                 transform: isLangMenuOpen
                                                     ? 'rotate(180deg)'
                                                     : 'rotate(0deg)',
@@ -2345,12 +2347,25 @@ const DialogContent = material.styled(material.Box)(() => ({
     overflowY: 'auto',
     padding: '24px',
 }));
-const DialogProductsGrid = material.styled(material.Box)(() => ({
+/** Product grid for dialog - matches featured-form-section ProductGrid from life-landing-page */
+const DialogProductsGrid = material.styled(material.Box, {
+    shouldForwardProp: (prop) => prop !== 'productCount',
+})(({ theme, productCount = 1 }) => ({
     display: 'grid',
     gridTemplateColumns: 'repeat(2, 1fr)',
-    gap: '16px',
+    gap: '12px',
+    width: '100%',
+    maxWidth: '744px',
+    [theme.breakpoints.up('md')]: Object.assign(Object.assign({}, (productCount >= 2
+        ? {
+            gridTemplateColumns: `repeat(${productCount}, 158px)`,
+            justifyContent: 'left',
+        }
+        : {
+            gridTemplateColumns: '1fr',
+        })), { gap: '12px' }),
 }));
-const DialogProductCard = material.styled(material.Box)(() => ({
+material.styled(material.Box)(() => ({
     border: '1px solid #E0E0E0',
     borderRadius: '0px',
     padding: '16px',
@@ -2359,13 +2374,13 @@ const DialogProductCard = material.styled(material.Box)(() => ({
     alignItems: 'center',
     gap: '16px',
 }));
-const DialogProductLogo = material.styled(material.Box)(() => ({
+material.styled(material.Box)(() => ({
     height: '32px',
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
 }));
-const DialogProductName = material.styled(material.Typography)(() => ({
+material.styled(material.Typography)(() => ({
     fontFamily: 'Montserrat, sans-serif',
     fontSize: '16px',
     fontWeight: 600,
@@ -2374,7 +2389,7 @@ const DialogProductName = material.styled(material.Typography)(() => ({
     textAlign: 'center',
     wordSpacing: '0px',
 }));
-const DialogProductType = material.styled(material.Typography)(() => ({
+material.styled(material.Typography)(() => ({
     fontFamily: 'Montserrat, sans-serif',
     fontSize: '14px',
     fontWeight: 400,
@@ -2427,45 +2442,120 @@ const ProductsContainer = material.styled(material.Box)({
     padding: '16px',
     backgroundColor: '#ffffff',
 });
-const ProductsGrid = material.styled(material.Box)({
+/** Product grid - matches featured-form-section ProductGrid from life-landing-page */
+const ProductsGrid = material.styled(material.Box, {
+    shouldForwardProp: (prop) => prop !== 'productCount',
+})(({ theme, productCount = 1 }) => ({
     display: 'grid',
     gridTemplateColumns: 'repeat(2, 1fr)',
     gap: '12px',
-});
-const ProductCard$1 = material.styled(material.Box)({
+    width: '100%',
+    maxWidth: '744px',
+    [theme.breakpoints.up('md')]: Object.assign(Object.assign({}, (productCount >= 2
+        ? {
+            gridTemplateColumns: `repeat(${productCount}, 158px)`,
+            justifyContent: 'left',
+        }
+        : {
+            gridTemplateColumns: '1fr',
+        })), { gap: '12px' }),
+}));
+/** Category label above the product card (e.g., "Medical", "Critical Illness") */
+const ProductCategoryLabel = material.styled(material.Typography)(() => ({
+    fontFamily: '"MetLifeCircular", "Montserrat", sans-serif',
+    fontWeight: 500,
+    fontSize: '12px',
+    lineHeight: '16px',
+    color: '#5f5e62',
+    letterSpacing: '0px',
+}));
+/** Product card wrapper: includes category label + card */
+const ProductCardWrapper = material.styled(material.Box)(() => ({
     display: 'flex',
     flexDirection: 'column',
-    gap: '16px',
-    backgroundColor: '#ffffff',
-    borderRadius: '0',
-    boxShadow: '0px 2px 10px 0px rgba(0, 0, 0, 0.12)',
-    padding: '16px 12px 12px',
-    height: '168px',
-});
-const ProductInfo$1 = material.styled(material.Box)({
+    gap: '4px',
+    alignItems: 'flex-start',
+}));
+/** Product card - square, clickable, matches featured-form-section design */
+const ProductCard$1 = material.styled(material.Box)(() => ({
+    position: 'relative',
+    width: '100%',
+    aspectRatio: '1 / 1',
+    border: '1px solid #0090da',
+    borderRadius: '0px',
     display: 'flex',
     flexDirection: 'column',
-    gap: '6px',
+    justifyContent: 'flex-end',
+    cursor: 'pointer',
+    overflow: 'clip',
+    transition: 'border 0.2s ease, box-shadow 0.2s ease',
+    '&:hover': {
+        borderWidth: '2px',
+        boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
+    },
+    '&:focus': {
+        outline: '2px solid #ffffff',
+        outlineOffset: '2px',
+    },
+    '@media (min-width: 900px)': {
+        width: '158px',
+        height: '158px',
+    },
+}));
+/** Background image that fills the product card */
+const ProductCardImage = material.styled('img')(() => ({
+    position: 'absolute',
+    inset: 0,
+    width: '100%',
+    height: '100%',
+    objectFit: 'cover',
+    pointerEvents: 'none',
+}));
+/** Placeholder gradient when no card image is provided */
+const ProductCardPlaceholder = material.styled(material.Box)(() => ({
+    position: 'absolute',
+    inset: 0,
+    background: 'linear-gradient(135deg, #e8f4fd 0%, #b8dff5 100%)',
+    pointerEvents: 'none',
+}));
+/** White bottom bar with logo + product name */
+const ProductCardBottomBar = material.styled(material.Box)(() => ({
+    position: 'relative',
+    display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
-    flex: 1,
-});
-const ProductLogo = material.styled(material.Box)({
+    gap: '4px',
+    height: '32px',
+    width: '100%',
+    flexShrink: 0,
+    backgroundColor: '#ffffff',
+}));
+/** Icon inside the bottom bar */
+const ProductIcon = material.styled(material.Box)(() => ({
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
-    padding: '4px',
-});
+    flexShrink: 0,
+    height: '11px',
+    width: '40.7px',
+    '& img': {
+        width: '100%',
+        height: '100%',
+        objectFit: 'contain',
+    },
+}));
 const ProductName$1 = material.styled(material.Typography)({
-    fontFamily: 'Montserrat, sans-serif',
-    fontSize: '14px',
+    fontFamily: '"MetLifeCircular", "Montserrat", sans-serif',
     fontWeight: 700,
-    lineHeight: '22px',
-    wordSpacing: '-5px',
-    color: '#13131b',
+    fontSize: '14px',
+    lineHeight: '20px',
+    color: '#75787b',
     textAlign: 'center',
+    letterSpacing: '0px',
+    whiteSpace: 'nowrap',
 });
-const ProductType = material.styled(material.Typography)({
+/** @deprecated Use ProductCategoryLabel - kept for Dialog variant */
+material.styled(material.Typography)({
     fontFamily: 'Montserrat, sans-serif',
     fontSize: '12px',
     fontWeight: 400,
@@ -2474,59 +2564,50 @@ const ProductType = material.styled(material.Typography)({
     color: '#13131b',
     textAlign: 'center',
 });
-// Base button styles - colors will be injected via sx prop from component
-const ViewPlansButton = material.styled(material.Button)({
-    color: '#ffffff',
-    borderRadius: '8px',
-    height: '36px',
-    textTransform: 'none',
-    fontSize: '14px',
-    fontWeight: 500,
-    lineHeight: '18px',
-    wordSpacing: '0px',
+/** @deprecated Use new ProductCard - kept for Dialog variant */
+material.styled(material.Box)({
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '6px',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flex: 1,
+});
+/** @deprecated Use ProductIcon - kept for Dialog variant */
+material.styled(material.Box)({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: '4px',
 });
 
-function ProductSelectionDrawer({ open, onClose, products, onProductSelect, title = 'Select your product', subtitle = 'Pick the product that suits your protection goals to view available plans', viewPlansButtonText = 'View plans', variant = 'drawer', }) {
-    var _a, _b, _c, _d, _e, _f;
-    const tenantTheme = useTenantTheme();
-    // Get primary color from tenant theme, fallback to default
-    const primaryColor = ((_c = (_b = (_a = tenantTheme === null || tenantTheme === void 0 ? void 0 : tenantTheme.theme) === null || _a === void 0 ? void 0 : _a.palette) === null || _b === void 0 ? void 0 : _b.primary) === null || _c === void 0 ? void 0 : _c.main) || '#0090DA';
-    const primaryDark = ((_f = (_e = (_d = tenantTheme === null || tenantTheme === void 0 ? void 0 : tenantTheme.theme) === null || _d === void 0 ? void 0 : _d.palette) === null || _e === void 0 ? void 0 : _e.primary) === null || _f === void 0 ? void 0 : _f.dark) || '#007bb8';
-    const primaryDarker = '#006699'; // Active state
+function ProductSelectionDrawer({ open, onClose, products, onProductSelect, title = 'Select your product', subtitle = 'Pick the product that suits your protection goals to view available plans', variant = 'drawer', }) {
     // Desktop Dialog variant
     if (variant === 'dialog') {
         return (jsxRuntime.jsxs(StyledDialog, Object.assign({ open: open, onClose: onClose, maxWidth: "md", fullWidth: true }, { children: [jsxRuntime.jsxs(DialogHeader, { children: [jsxRuntime.jsx(material.IconButton, Object.assign({ onClick: onClose, sx: {
                                 position: 'absolute',
                                 right: 16,
                                 top: 16,
-                            } }, { children: jsxRuntime.jsx(CloseIcon, {}) })), jsxRuntime.jsx(DialogHeaderTitle, { children: title }), jsxRuntime.jsx(DialogHeaderSubtitle, { children: subtitle })] }), jsxRuntime.jsx(DialogContent, { children: jsxRuntime.jsx(DialogProductsGrid, { children: products.map((product) => (jsxRuntime.jsxs(DialogProductCard, { children: [jsxRuntime.jsx(DialogProductLogo, { children: jsxRuntime.jsx("img", { src: product.logo, alt: product.name, style: {
-                                            width: '88px',
-                                            height: '32px',
-                                            objectFit: 'cover',
-                                        } }) }), jsxRuntime.jsxs(material.Box, Object.assign({ sx: { textAlign: 'center' } }, { children: [jsxRuntime.jsx(DialogProductName, { children: product.name }), jsxRuntime.jsx(DialogProductType, { children: product.type })] })), jsxRuntime.jsx(ViewPlansButton, Object.assign({ variant: "contained", fullWidth: true, onClick: () => onProductSelect(product.id), sx: {
-                                        backgroundColor: primaryColor,
-                                        '&:hover': {
-                                            backgroundColor: primaryDark,
-                                        },
-                                        '&:active': {
-                                            backgroundColor: primaryDarker,
-                                        },
-                                    } }, { children: viewPlansButtonText }))] }, product.id))) }) })] })));
+                            } }, { children: jsxRuntime.jsx(CloseIcon, {}) })), jsxRuntime.jsx(DialogHeaderTitle, { children: title }), jsxRuntime.jsx(DialogHeaderSubtitle, { children: subtitle })] }), jsxRuntime.jsx(DialogContent, { children: jsxRuntime.jsx(DialogProductsGrid, Object.assign({ productCount: products.length }, { children: products.map((product) => {
+                            var _a, _b;
+                            return (jsxRuntime.jsxs(ProductCardWrapper, { children: [jsxRuntime.jsx(ProductCategoryLabel, { children: (_a = product.subtitle) !== null && _a !== void 0 ? _a : product.type }), jsxRuntime.jsxs(ProductCard$1, Object.assign({ onClick: () => onProductSelect(product.id), role: "button", tabIndex: 0, onKeyDown: (e) => {
+                                            if (e.key === 'Enter' || e.key === ' ') {
+                                                e.preventDefault();
+                                                onProductSelect(product.id);
+                                            }
+                                        } }, { children: [product.cardImage ? (jsxRuntime.jsx(ProductCardImage, { src: product.cardImage, alt: product.name })) : (jsxRuntime.jsx(ProductCardPlaceholder, {})), jsxRuntime.jsxs(ProductCardBottomBar, { children: [jsxRuntime.jsx(ProductIcon, { children: jsxRuntime.jsx("img", { src: (_b = product.icon) !== null && _b !== void 0 ? _b : product.logo, alt: "" }) }), jsxRuntime.jsx(ProductName$1, { children: product.name })] })] }))] }, product.id));
+                        }) })) })] })));
     }
     // Mobile Drawer variant (default)
-    return (jsxRuntime.jsx(StyledDrawer, Object.assign({ anchor: "bottom", open: open, onClose: onClose }, { children: jsxRuntime.jsxs(DrawerContent, { children: [jsxRuntime.jsx(DrawerHeader, { children: jsxRuntime.jsx(CloseButtonContainer, { children: jsxRuntime.jsx(material.IconButton, Object.assign({ onClick: onClose, sx: { padding: 0 } }, { children: jsxRuntime.jsx(CloseIcon, { sx: { fontSize: 24, color: '#13131b' } }) })) }) }), jsxRuntime.jsxs(Header, { children: [jsxRuntime.jsx(HeaderTitle, { children: title }), jsxRuntime.jsx(HeaderSubtitle, { children: subtitle })] }), jsxRuntime.jsx(ProductsContainer, { children: jsxRuntime.jsx(ProductsGrid, { children: products.map((product) => (jsxRuntime.jsxs(ProductCard$1, { children: [jsxRuntime.jsxs(ProductInfo$1, { children: [jsxRuntime.jsx(ProductLogo, { children: jsxRuntime.jsx("img", { src: product.logo, alt: product.name, style: {
-                                                    width: '88px',
-                                                    height: '32px',
-                                                    objectFit: 'cover',
-                                                } }) }), jsxRuntime.jsxs(material.Box, Object.assign({ sx: { textAlign: 'center', width: '100%' } }, { children: [jsxRuntime.jsx(ProductName$1, { children: product.name }), jsxRuntime.jsx(ProductType, { children: product.type })] }))] }), jsxRuntime.jsx(ViewPlansButton, Object.assign({ variant: "contained", fullWidth: true, onClick: () => onProductSelect(product.id), sx: {
-                                        backgroundColor: primaryColor,
-                                        '&:hover': {
-                                            backgroundColor: primaryDark,
-                                        },
-                                        '&:active': {
-                                            backgroundColor: primaryDarker,
-                                        },
-                                    } }, { children: viewPlansButtonText }))] }, product.id))) }) })] }) })));
+    return (jsxRuntime.jsx(StyledDrawer, Object.assign({ anchor: "bottom", open: open, onClose: onClose }, { children: jsxRuntime.jsxs(DrawerContent, { children: [jsxRuntime.jsx(DrawerHeader, { children: jsxRuntime.jsx(CloseButtonContainer, { children: jsxRuntime.jsx(material.IconButton, Object.assign({ onClick: onClose, sx: { padding: 0 } }, { children: jsxRuntime.jsx(CloseIcon, { sx: { fontSize: 24, color: '#13131b' } }) })) }) }), jsxRuntime.jsxs(Header, { children: [jsxRuntime.jsx(HeaderTitle, { children: title }), jsxRuntime.jsx(HeaderSubtitle, { children: subtitle })] }), jsxRuntime.jsx(ProductsContainer, { children: jsxRuntime.jsx(ProductsGrid, Object.assign({ productCount: products.length }, { children: products.map((product) => {
+                            var _a, _b;
+                            return (jsxRuntime.jsxs(ProductCardWrapper, { children: [jsxRuntime.jsx(ProductCategoryLabel, { children: (_a = product.subtitle) !== null && _a !== void 0 ? _a : product.type }), jsxRuntime.jsxs(ProductCard$1, Object.assign({ onClick: () => onProductSelect(product.id), role: "button", tabIndex: 0, onKeyDown: (e) => {
+                                            if (e.key === 'Enter' || e.key === ' ') {
+                                                e.preventDefault();
+                                                onProductSelect(product.id);
+                                            }
+                                        } }, { children: [product.cardImage ? (jsxRuntime.jsx(ProductCardImage, { src: product.cardImage, alt: product.name })) : (jsxRuntime.jsx(ProductCardPlaceholder, {})), jsxRuntime.jsxs(ProductCardBottomBar, { children: [jsxRuntime.jsx(ProductIcon, { children: jsxRuntime.jsx("img", { src: (_b = product.icon) !== null && _b !== void 0 ? _b : product.logo, alt: "" }) }), jsxRuntime.jsx(ProductName$1, { children: product.name })] })] }))] }, product.id));
+                        }) })) })] }) })));
 }
 
 const QuestionContainer$1 = styles.styled(material.Box)(({ theme }) => ({
@@ -2629,6 +2710,14 @@ const variantColors = {
         hoverBg: 'rgba(0, 0, 0, 0.02)',
         hoverBorder: '#5f5e62',
     },
+    formLightBorder: {
+        unselectedBorder: '#E0E0E0',
+        unselectedText: '#5f5e62',
+        unselectedBg: 'transparent',
+        selectedBg: 'rgba(61, 147, 222, 0.1)',
+        hoverBg: 'rgba(0, 0, 0, 0.02)',
+        hoverBorder: '#D0D0D0',
+    },
 };
 const StyledOptionButton = styles.styled(material.ButtonBase, {
     shouldForwardProp: (prop) => prop !== 'colorVariant',
@@ -3509,6 +3598,15 @@ const CheckoutHeader = ({ progress, product, sectionTitle, sectionDescription, s
     return (jsxRuntime.jsxs(HeaderContainer, Object.assign({ sticky: sticky, sx: sx }, { children: [jsxRuntime.jsx(CheckoutProgress, Object.assign({}, progress, { progressBarTheme: progressBarTheme })), product && (jsxRuntime.jsx(material.Box, Object.assign({ sx: { padding: '0 16px 24px' } }, { children: jsxRuntime.jsx(ProductCard, Object.assign({}, product)) }))), jsxRuntime.jsxs(SectionHeader, { children: [jsxRuntime.jsx(SectionTitle$2, { children: sectionTitle }), jsxRuntime.jsx(SectionDescription, { children: sectionDescription })] })] })));
 };
 
+/**
+ * Checkout Form Button - styled components
+ * Aligns with Figma button design system (node 133-11111)
+ *
+ * Filled button tokens:
+ * - Default: #0090da bg, #ffffff text
+ * - Hover: #007AC1
+ * - Disabled: #f2f2f2 bg, #75787b text, 1px solid #a7a8aa
+ */
 const ButtonContainer = styles.styled(material.Box)(({ isFixed, desktopRightAligned }) => ({
     position: isFixed ? 'fixed' : 'relative',
     bottom: 0,
@@ -3532,23 +3630,31 @@ const ButtonContainer = styles.styled(material.Box)(({ isFixed, desktopRightAlig
 }));
 const StyledButton = styles.styled('button')(({ isDisabled, desktopWidth }) => ({
     width: '100%',
-    height: '48px',
-    borderRadius: '24px',
+    minHeight: '48px',
+    padding: '14px 32px',
+    borderRadius: '100px',
     border: 'none',
-    backgroundColor: isDisabled
-        ? '#E1E2EB'
-        : '#0090DA',
-    color: isDisabled ? '#929094' : '#fff',
-    fontSize: '14px',
+    backgroundColor: isDisabled ? '#f2f2f2' : '#0090da',
+    color: isDisabled ? '#75787b' : '#ffffff',
+    fontFamily: '"MetLifeCircular", "Roboto", "Helvetica", "Arial", sans-serif',
+    fontSize: '16px',
     fontWeight: 500,
-    lineHeight: '18px',
+    lineHeight: '20px',
+    letterSpacing: 0,
+    textTransform: 'none',
     wordSpacing: '0px',
     cursor: isDisabled ? 'not-allowed' : 'pointer',
-    transition: 'all 0.2s ease',
+    transition: 'all 0.2s ease-in-out',
+    boxSizing: 'border-box',
     '&:hover': {
-        backgroundColor: isDisabled
-            ? '#E1E2EB'
-            : '#007bb8',
+        backgroundColor: isDisabled ? '#f2f2f2' : 'rgba(0, 144, 218, 0.7)',
+    },
+    '&:focus': {
+        outline: isDisabled ? 'none' : '2px solid #0090da',
+        outlineOffset: '2px',
+    },
+    '&:active': {
+        backgroundColor: isDisabled ? '#f2f2f2' : 'rgba(0, 144, 218, 0.7)',
     },
     // Desktop styles for fixed width button
     '@media (min-width: 900px)': desktopWidth
@@ -3607,8 +3713,10 @@ styles.styled(material.Typography)(({ selected }) => ({
     wordSpacing: '-5px',
 }));
 
-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, { value: "yes", label: labels.yes || 'Yes', selected: value === 'yes', onClick: () => onChange('yes'), variant: "form", size: "large" }), jsxRuntime.jsx(OptionButton, { value: "no", label: labels.no || 'No', selected: value === 'no', onClick: () => onChange('no'), variant: "form", size: "large" })] }), error && (jsxRuntime.jsx(material.Typography, Object.assign({ sx: {
+const HealthQuestionGroup = ({ question, questionNumber, value, onChange, error, labels = { yes: 'Yes', no: 'No' }, sx, OptionButtonComponent, }) => {
+    const yesLabel = labels.yes || 'Yes';
+    const noLabel = labels.no || 'No';
+    return (jsxRuntime.jsxs(QuestionContainer, Object.assign({ sx: sx }, { children: [jsxRuntime.jsxs(QuestionText, { children: [questionNumber && `${questionNumber}. `, question] }), jsxRuntime.jsx(OptionsContainer, { children: OptionButtonComponent ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(OptionButtonComponent, Object.assign({ variant: "filledLightBorder", selected: value === 'yes', onClick: () => onChange('yes'), fullWidth: true }, { children: yesLabel })), jsxRuntime.jsx(OptionButtonComponent, Object.assign({ variant: "filledLightBorder", selected: value === 'no', onClick: () => onChange('no'), fullWidth: true }, { children: noLabel }))] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(OptionButton, { value: "yes", label: yesLabel, selected: value === 'yes', onClick: () => onChange('yes'), variant: "form", size: "large" }), jsxRuntime.jsx(OptionButton, { value: "no", label: noLabel, selected: value === 'no', onClick: () => onChange('no'), variant: "form", size: "large" })] })) }), error && (jsxRuntime.jsx(material.Typography, Object.assign({ sx: {
                     color: 'error.main',
                     fontSize: '12px',
                     mt: 0.5,
@@ -3687,7 +3795,7 @@ const PersonalInformationForm = ({ renderField, fields, consents, onSubmit, form
                                 color: '#5F5E62',
                                 fontSize: '12px',
                                 wordSpacing: '-5px',
-                            } }, { children: fields.full_name.helperText })))] }), renderField(fields.nric), renderField(fields.date_of_birth), renderField(fields.gender), renderField(fields.salutation), renderField(fields.nationality), fields.place_of_birth && renderField(fields.place_of_birth), fields.marital_status && renderField(fields.marital_status), fields.race && renderField(fields.race), fields.religion && renderField(fields.religion), fields.annual_income && renderField(fields.annual_income), renderField(fields.occupation), renderField(fields.industry), renderField(fields.crediting_bank_name), renderField(fields.crediting_bank_account_number), desktopGridLayout ? (jsxRuntime.jsx(FullWidthField$1, { children: jsxRuntime.jsxs(CheckboxContainer$1, { children: [jsxRuntime.jsx(material.FormControlLabel, { control: jsxRuntime.jsx(material.Checkbox, { checked: consents.bank_account_confirmation.checked, onChange: (e) => consents.bank_account_confirmation.onChange(e.target.checked), name: "bank_account_confirmation" }), label: jsxRuntime.jsx(CheckboxLabel$1, { children: consents.bank_account_confirmation.label ||
+                            } }, { children: fields.full_name.helperText })))] }), renderField(fields.nric), renderField(fields.date_of_birth), renderField(fields.gender), renderField(fields.salutation), renderField(fields.nationality), fields.place_of_birth && renderField(fields.place_of_birth), fields.marital_status && renderField(fields.marital_status), fields.race && renderField(fields.race), fields.religion && renderField(fields.religion), renderField(fields.occupation), renderField(fields.industry), renderField(fields.crediting_bank_name), renderField(fields.crediting_bank_account_number), fields.annual_income && renderField(fields.annual_income), desktopGridLayout ? (jsxRuntime.jsx(FullWidthField$1, { children: jsxRuntime.jsxs(CheckboxContainer$1, { children: [jsxRuntime.jsx(material.FormControlLabel, { control: jsxRuntime.jsx(material.Checkbox, { checked: consents.bank_account_confirmation.checked, onChange: (e) => consents.bank_account_confirmation.onChange(e.target.checked), name: "bank_account_confirmation" }), label: jsxRuntime.jsx(CheckboxLabel$1, { children: consents.bank_account_confirmation.label ||
                                         defaultBankConfirmationLabel }) }), consents.bank_account_confirmation.error && (jsxRuntime.jsx(material.Typography, Object.assign({ sx: {
                                     color: 'error.main',
                                     fontSize: '12px',
@@ -3882,9 +3990,9 @@ const MeasurementFieldsGrid = styles.styled(material.Box)({
     },
 });
 
-const HealthInformationForm = ({ renderField, measurementFields, healthQuestions, onSubmit, formRef, sx, desktopGridLayout = false, }) => {
+const HealthInformationForm = ({ renderField, measurementFields, healthQuestions, onSubmit, formRef, sx, desktopGridLayout = false, OptionButtonComponent, }) => {
     const Container = desktopGridLayout ? DesktopFormContainer$1 : FormContainer$1;
-    return (jsxRuntime.jsx(Container, Object.assign({ ref: formRef, component: "form", onSubmit: onSubmit, sx: sx }, { children: jsxRuntime.jsxs(material.Box, Object.assign({ sx: { display: 'flex', flexDirection: 'column', gap: '24px' } }, { children: [desktopGridLayout ? (jsxRuntime.jsxs(MeasurementFieldsGrid, { children: [renderField(measurementFields.weight), renderField(measurementFields.height)] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [renderField(measurementFields.weight), renderField(measurementFields.height)] })), healthQuestions.map((question, index) => (jsxRuntime.jsx(HealthQuestionGroup, { question: question.question, questionNumber: question.questionNumber, value: question.value, onChange: question.onChange, error: question.error, labels: question.labels }, question.name || index)))] })) })));
+    return (jsxRuntime.jsx(Container, Object.assign({ ref: formRef, component: "form", onSubmit: onSubmit, sx: sx }, { children: jsxRuntime.jsxs(material.Box, Object.assign({ sx: { display: 'flex', flexDirection: 'column', gap: '24px' } }, { children: [desktopGridLayout ? (jsxRuntime.jsxs(MeasurementFieldsGrid, { children: [renderField(measurementFields.weight), renderField(measurementFields.height)] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [renderField(measurementFields.weight), renderField(measurementFields.height)] })), healthQuestions.map((question, index) => (jsxRuntime.jsx(HealthQuestionGroup, { question: question.question, questionNumber: question.questionNumber, value: question.value, onChange: question.onChange, error: question.error, labels: question.labels, OptionButtonComponent: OptionButtonComponent }, question.name || index)))] })) })));
 };
 
 const FormContainer = styles.styled(material.Box)({