igloo-d2c-components 1.0.10 → 1.0.12

package/dist/cjs/index.js

@@ -13,7 +13,6 @@ var styles = require('@mui/material/styles');
 var ArrowBackIcon = require('@mui/icons-material/ArrowBack');
 var InfoIcon = require('@mui/icons-material/Info');
 var AddIcon = require('@mui/icons-material/Add');
-var DragHandleIcon = require('@mui/icons-material/DragHandle');
 var RemoveIcon = require('@mui/icons-material/Remove');
 
 function _interopNamespaceDefault(e) {
@@ -415,12 +414,12 @@ const cimbTheme = {
 const ammetlifeTheme = {
     palette: {
         primary: {
-            dark: '#0D47A1',
-            main: '#1976D2',
+            dark: '#2869a8',
+            main: '#317abc',
             light: '#42A5F5',
             bright: '#90CAF9',
             plain: '#E3F2FD',
-            border: '#1976D2',
+            border: '#317abc',
         },
         secondary: {
             dim: '#E65100',
@@ -958,7 +957,7 @@ const AnchorLink$1 = styles.styled('a')(({ theme }) => ({
         color: 'inherit',
     },
 }));
-const StyledButton = styles.styled(material.Button)(({ theme }) => {
+const StyledButton$1 = styles.styled(material.Button)(({ theme }) => {
     var _a, _b, _c, _d;
     return ({
         alignSelf: 'start',
@@ -1055,7 +1054,7 @@ function Header$1({ logo, alternateLogo, showAlternateLogo = false, navigationLi
                                         },
                                     } }, { children: [shouldShowContent && (jsxRuntime.jsxs(ButtonDesktopMenu, Object.assign({ onClick: handleOpenLanguageMenu, sx: { my: 2, textTransform: 'capitalize' }, "data-testid": "selectedLocale" }, { children: [jsxRuntime.jsx(material.Typography, Object.assign({ variant: "h6" }, { children: formatMessage({
                                                         id: `${currentLocale === null || currentLocale === void 0 ? void 0 : currentLocale.toLocaleUpperCase()}`,
-                                                    }) })), jsxRuntime.jsx(material.Icon, { component: ArrowDropDownIcon })] }), "language")), isPartnershipPagePCView && scrolled ? (jsxRuntime.jsx(StyledButton, Object.assign({ variant: "contained", onClick: onPartnershipCTAClick }, { children: jsxRuntime.jsx(TypographyBtnText, Object.assign({ variant: "body1" }, { children: formatMessage({ id: 'Be Our Partner' }) })) }))) : isSeoPageView && scrolled && bannerData ? (jsxRuntime.jsx(StyledButtonBanner, Object.assign({ style: { background: bannerData === null || bannerData === void 0 ? void 0 : bannerData.ctaBGColor }, variant: "contained", onClick: onGetQuoteClick }, { children: jsxRuntime.jsx(material.Typography, Object.assign({ style: {
+                                                    }) })), jsxRuntime.jsx(material.Icon, { component: ArrowDropDownIcon })] }), "language")), isPartnershipPagePCView && scrolled ? (jsxRuntime.jsx(StyledButton$1, Object.assign({ variant: "contained", onClick: onPartnershipCTAClick }, { children: jsxRuntime.jsx(TypographyBtnText, Object.assign({ variant: "body1" }, { children: formatMessage({ id: 'Be Our Partner' }) })) }))) : isSeoPageView && scrolled && bannerData ? (jsxRuntime.jsx(StyledButtonBanner, Object.assign({ style: { background: bannerData === null || bannerData === void 0 ? void 0 : bannerData.ctaBGColor }, variant: "contained", onClick: onGetQuoteClick }, { children: jsxRuntime.jsx(material.Typography, Object.assign({ style: {
                                                     color: bannerData === null || bannerData === void 0 ? void 0 : bannerData.ctaTextColor,
                                                     textTransform: 'none',
                                                 }, variant: "body1" }, { children: bannerData === null || bannerData === void 0 ? void 0 : bannerData.ctaText })) }))) : userToken ? (jsxRuntime.jsx(StyledAvatar, Object.assign({ onClick: handleOpenUserMenu, "data-testid": "user-profile-avatar" }, { children: firstName1stLetter }))) : (jsxRuntime.jsxs(DivButtonWrapper, { children: [jsxRuntime.jsx(ButtonAuth, Object.assign({ color: "primary", variant: "outlined", sx: { textTransform: 'capitalize' }, onClick: onLoginClick, "data-testid": "headerLogin" }, { children: jsxRuntime.jsx(TypographyAuth, Object.assign({ variant: "body1" }, { children: formatMessage({ id: 'Log in' }) })) })), jsxRuntime.jsx(ButtonAuth, Object.assign({ color: "primary", variant: "contained", sx: { textTransform: 'capitalize' }, onClick: onSignupClick }, { children: jsxRuntime.jsx(TypographyAuth, Object.assign({ variant: "body1" }, { children: formatMessage({ id: 'Sign up' }) })) }))] }))] })), jsxRuntime.jsx(StyledMenu, Object.assign({ id: "menu-appbar", anchorEl: anchorElNav, anchorOrigin: {
@@ -1105,7 +1104,7 @@ function Header$1({ logo, alternateLogo, showAlternateLogo = false, navigationLi
                                             handleOpenNavMenu(e);
                                         }
                                     }, color: "inherit", sx: Object.assign({}, (isPartnershipPageMobileView &&
-                                        scrolled && { padding: '0px !important' })) }, { children: Boolean(anchorElNav) ? (jsxRuntime.jsx(StyledCloseIcon, {})) : isPartnershipPageMobileView && scrolled ? (jsxRuntime.jsx(StyledButton, Object.assign({ variant: "contained", onClick: onPartnershipCTAClick }, { children: jsxRuntime.jsx(TypographyBtnText, Object.assign({ variant: "body1" }, { children: formatMessage({ id: 'Be Our Partner' }) })) }))) : isSeoPageView && scrolled && bannerData ? (jsxRuntime.jsx(StyledButtonBanner, Object.assign({ style: {
+                                        scrolled && { padding: '0px !important' })) }, { children: Boolean(anchorElNav) ? (jsxRuntime.jsx(StyledCloseIcon, {})) : isPartnershipPageMobileView && scrolled ? (jsxRuntime.jsx(StyledButton$1, Object.assign({ variant: "contained", onClick: onPartnershipCTAClick }, { children: jsxRuntime.jsx(TypographyBtnText, Object.assign({ variant: "body1" }, { children: formatMessage({ id: 'Be Our Partner' }) })) }))) : isSeoPageView && scrolled && bannerData ? (jsxRuntime.jsx(StyledButtonBanner, Object.assign({ style: {
                                             background: bannerData === null || bannerData === void 0 ? void 0 : bannerData.ctaBGColor,
                                         }, variant: "contained", onClick: onGetQuoteClick }, { children: jsxRuntime.jsx(material.Typography, Object.assign({ style: {
                                                 color: bannerData === null || bannerData === void 0 ? void 0 : bannerData.ctaTextColor,
@@ -1157,7 +1156,7 @@ const StyledToolbar = styles.styled(material.Toolbar)(({ theme }) => ({
         padding: '12px 16px',
     },
 }));
-const LogoContainer = styles.styled('div')(({ theme }) => ({
+const LogoContainer$1 = styles.styled('div')(({ theme }) => ({
     display: 'flex',
     alignItems: 'center',
     cursor: 'pointer',
@@ -1254,7 +1253,7 @@ function NewHeader({ logo: propLogo, navigationLinks = [], additionalMenuSection
         (_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item);
         handleDrawerClose();
     };
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(StyledAppBar, Object.assign({ position: "fixed" }, { children: jsxRuntime.jsxs(StyledToolbar, Object.assign({ disableGutters: true }, { children: [jsxRuntime.jsx(LogoContainer, Object.assign({ onClick: handleLogoClick }, { children: jsxRuntime.jsx(LogoImage, { src: logo, alt: "Logo" }) })), jsxRuntime.jsx(MenuIconButton, Object.assign({ size: "large", edge: "end", "aria-label": "menu", onClick: handleDrawerOpen }, { children: jsxRuntime.jsx(MenuIcon, {}) }))] })) })), jsxRuntime.jsx(StyledDrawer$2, Object.assign({ anchor: "right", open: drawerOpen, onClose: handleDrawerClose }, { children: customDrawerContent ? (jsxRuntime.jsx(material.Box, Object.assign({ sx: { width: isMobile ? '100vw' : 350 } }, { children: customDrawerContent }))) : (jsxRuntime.jsxs(material.Box, Object.assign({ sx: { width: isMobile ? '100vw' : 350 } }, { children: [jsxRuntime.jsxs(DrawerHeader$2, { children: [jsxRuntime.jsx(DrawerLogoContainer, Object.assign({ onClick: handleLogoClick }, { children: jsxRuntime.jsx(LogoImage, { src: logo, alt: "Logo" }) })), jsxRuntime.jsx(CloseIconButton, Object.assign({ onClick: handleDrawerClose, "aria-label": "close" }, { children: jsxRuntime.jsx(CloseIcon, {}) }))] }), jsxRuntime.jsx(material.Divider, {}), jsxRuntime.jsxs(DrawerContent$2, { children: [navigationLinks.length > 0 && (jsxRuntime.jsx(material.List, { children: navigationLinks.map((item) => (jsxRuntime.jsx(material.ListItem, Object.assign({ disablePadding: true }, { children: jsxRuntime.jsx(material.ListItemButton, Object.assign({ onClick: () => handleMenuItemClick(item) }, { children: jsxRuntime.jsx(material.ListItemText, { primary: formatMessage({ id: item.label }) }) })) }), item.key))) })), additionalMenuSections.map((section, index) => (jsxRuntime.jsxs(React__namespace.Fragment, { children: [section.title && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(material.Divider, {}), jsxRuntime.jsx(material.Box, Object.assign({ sx: { px: 2, py: 1 } }, { children: jsxRuntime.jsx(material.ListItemText, { primary: formatMessage({ id: section.title }), primaryTypographyProps: {
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(StyledAppBar, Object.assign({ position: "fixed" }, { children: jsxRuntime.jsxs(StyledToolbar, Object.assign({ disableGutters: true }, { children: [jsxRuntime.jsx(LogoContainer$1, Object.assign({ onClick: handleLogoClick }, { children: jsxRuntime.jsx(LogoImage, { src: logo, alt: "Logo" }) })), jsxRuntime.jsx(MenuIconButton, Object.assign({ size: "large", edge: "end", "aria-label": "menu", onClick: handleDrawerOpen }, { children: jsxRuntime.jsx(MenuIcon, {}) }))] })) })), jsxRuntime.jsx(StyledDrawer$2, Object.assign({ anchor: "right", open: drawerOpen, onClose: handleDrawerClose }, { children: customDrawerContent ? (jsxRuntime.jsx(material.Box, Object.assign({ sx: { width: isMobile ? '100vw' : 350 } }, { children: customDrawerContent }))) : (jsxRuntime.jsxs(material.Box, Object.assign({ sx: { width: isMobile ? '100vw' : 350 } }, { children: [jsxRuntime.jsxs(DrawerHeader$2, { children: [jsxRuntime.jsx(DrawerLogoContainer, Object.assign({ onClick: handleLogoClick }, { children: jsxRuntime.jsx(LogoImage, { src: logo, alt: "Logo" }) })), jsxRuntime.jsx(CloseIconButton, Object.assign({ onClick: handleDrawerClose, "aria-label": "close" }, { children: jsxRuntime.jsx(CloseIcon, {}) }))] }), jsxRuntime.jsx(material.Divider, {}), jsxRuntime.jsxs(DrawerContent$2, { children: [navigationLinks.length > 0 && (jsxRuntime.jsx(material.List, { children: navigationLinks.map((item) => (jsxRuntime.jsx(material.ListItem, Object.assign({ disablePadding: true }, { children: jsxRuntime.jsx(material.ListItemButton, Object.assign({ onClick: () => handleMenuItemClick(item) }, { children: jsxRuntime.jsx(material.ListItemText, { primary: formatMessage({ id: item.label }) }) })) }), item.key))) })), additionalMenuSections.map((section, index) => (jsxRuntime.jsxs(React__namespace.Fragment, { children: [section.title && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(material.Divider, {}), jsxRuntime.jsx(material.Box, Object.assign({ sx: { px: 2, py: 1 } }, { children: jsxRuntime.jsx(material.ListItemText, { primary: formatMessage({ id: section.title }), primaryTypographyProps: {
                                                             variant: 'caption',
                                                             color: 'text.secondary',
                                                         } }) }))] })), jsxRuntime.jsx(material.List, { children: section.items.map((item) => (jsxRuntime.jsx(material.ListItem, Object.assign({ disablePadding: true }, { children: jsxRuntime.jsx(material.ListItemButton, Object.assign({ onClick: () => handleMenuItemClick(item) }, { children: jsxRuntime.jsx(material.ListItemText, { primary: formatMessage({ id: item.label }) }) })) }), item.key))) })] }, index)))] })] }))) }))] }));
@@ -1525,8 +1524,8 @@ const FooterButtons = styles.styled(material.Box)(({ theme }) => ({
     gap: '16px',
     width: '100%',
 }));
+// Base button styles - colors will be injected via sx prop from component
 const PrimaryButton = styles.styled(material.Button)(({ theme }) => ({
-    backgroundColor: '#4E4EEB',
     color: '#FFFFFF',
     borderRadius: '8px',
     height: '48px',
@@ -1535,16 +1534,12 @@ const PrimaryButton = styles.styled(material.Button)(({ theme }) => ({
     fontWeight: 500,
     fontSize: '14px',
     lineHeight: '18px',
-    '&:hover': {
-        backgroundColor: '#3E3EDB',
-    },
     '&:disabled': {
         backgroundColor: '#C8C5CA',
         color: '#FFFFFF',
     },
 }));
 const SecondaryButton = styles.styled(material.Button)(({ theme }) => ({
-    color: '#4E4EEB',
     borderRadius: '8px',
     height: '40px',
     textTransform: 'none',
@@ -1552,9 +1547,6 @@ const SecondaryButton = styles.styled(material.Button)(({ theme }) => ({
     fontWeight: 500,
     fontSize: '14px',
     lineHeight: '18px',
-    '&:hover': {
-        backgroundColor: 'rgba(78, 78, 235, 0.08)',
-    },
 }));
 
 /**
@@ -1575,9 +1567,24 @@ const SecondaryButton = styles.styled(material.Button)(({ theme }) => ({
  * ```
  */
 function RecommendationsDrawer({ open, onClose, children, headerIcon, title, subtitle, showBackButton = false, onBack, primaryButtonText, onPrimaryAction, primaryButtonDisabled = false, secondaryButtonText, onSecondaryAction, showFooter = true, customFooter, formatMessage = (descriptor) => descriptor.id, }) {
-    var _a;
+    var _a, _b, _c, _d, _e, _f, _g;
     const muiTheme = material.useTheme();
     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';
+    // 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);
+        if (result) {
+            const r = parseInt(result[1], 16);
+            const g = parseInt(result[2], 16);
+            const b = parseInt(result[3], 16);
+            return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+        }
+        return `rgba(49, 122, 188, ${alpha})`;
+    };
     const handleClose = () => {
         onClose();
     };
@@ -1598,7 +1605,17 @@ function RecommendationsDrawer({ open, onClose, children, headerIcon, title, sub
             },
         }, sx: {
             zIndex: 1300,
-        } }, { 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 }, { children: formatMessage({ id: primaryButtonText }) }))), secondaryButtonText && (jsxRuntime.jsx(SecondaryButton, Object.assign({ variant: "text", fullWidth: true, onClick: onSecondaryAction }, { children: formatMessage({ id: secondaryButtonText }) })))] })) }))] })) })));
+        } }, { 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,
+                                    },
+                                } }, { children: formatMessage({ id: primaryButtonText }) }))), secondaryButtonText && (jsxRuntime.jsx(SecondaryButton, Object.assign({ variant: "text", fullWidth: true, onClick: onSecondaryAction, sx: {
+                                    color: primaryColor,
+                                    '&:hover': {
+                                        backgroundColor: hexToRgba(primaryColor, 0.08),
+                                    },
+                                } }, { children: formatMessage({ id: secondaryButtonText }) })))] })) }))] })) })));
 }
 
 const StyledDrawer = material.styled(material.Drawer)(({ theme }) => ({
@@ -1656,7 +1673,7 @@ const ProductsGrid = material.styled(material.Box)({
     gridTemplateColumns: 'repeat(2, 1fr)',
     gap: '12px',
 });
-const ProductCard = material.styled(material.Box)({
+const ProductCard$1 = material.styled(material.Box)({
     display: 'flex',
     flexDirection: 'column',
     gap: '16px',
@@ -1666,7 +1683,7 @@ const ProductCard = material.styled(material.Box)({
     padding: '16px 12px 12px',
     height: '168px',
 });
-const ProductInfo = material.styled(material.Box)({
+const ProductInfo$1 = material.styled(material.Box)({
     display: 'flex',
     flexDirection: 'column',
     gap: '6px',
@@ -1680,7 +1697,7 @@ const ProductLogo = material.styled(material.Box)({
     justifyContent: 'center',
     padding: '4px',
 });
-const ProductName = material.styled(material.Typography)({
+const ProductName$1 = material.styled(material.Typography)({
     fontFamily: 'Montserrat, sans-serif',
     fontSize: '14px',
     fontWeight: 700,
@@ -1696,8 +1713,8 @@ 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)({
-    backgroundColor: '#317abc',
     color: '#ffffff',
     borderRadius: '8px',
     height: '36px',
@@ -1706,23 +1723,31 @@ const ViewPlansButton = material.styled(material.Button)({
     fontSize: '14px',
     fontWeight: 500,
     lineHeight: '18px',
-    '&:hover': {
-        backgroundColor: '#2869a8',
-    },
-    '&:active': {
-        backgroundColor: '#1f5489',
-    },
 });
 
 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', }) {
-    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, { children: [jsxRuntime.jsxs(ProductInfo, { children: [jsxRuntime.jsx(ProductLogo, { children: jsxRuntime.jsx("img", { src: product.logo, alt: product.name, style: {
+    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) || '#317abc';
+    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) || '#2869a8';
+    const primaryDarker = '#1f5489'; // Active state
+    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, { children: product.name }), jsxRuntime.jsx(ProductType, { children: product.type })] }))] }), jsxRuntime.jsx(ViewPlansButton, Object.assign({ variant: "contained", fullWidth: true, onClick: () => onProductSelect(product.id) }, { children: viewPlansButtonText }))] }, product.id))) }) })] }) })));
+                                                } }) }), 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))) }) })] }) })));
 }
 
-const QuestionContainer = styles.styled(material.Box)(({ theme }) => ({
+const QuestionContainer$1 = styles.styled(material.Box)(({ theme }) => ({
     backgroundColor: '#FFFFFF',
     padding: '12px 16px',
     display: 'flex',
@@ -1750,7 +1775,7 @@ const QuestionSubtext = styles.styled(material.Typography)(({ theme }) => ({
     lineHeight: '16px',
     color: '#5F5E62',
 }));
-const OptionsContainer = styles.styled(material.Box)(({ theme }) => ({
+const OptionsContainer$1 = styles.styled(material.Box)(({ theme }) => ({
     display: 'flex',
     flexDirection: 'column',
     gap: '8px',
@@ -1779,7 +1804,7 @@ function QuestionSection({ questionNumber, question, helperText, options, select
         }
         return selectedValue === optionValue;
     };
-    return (jsxRuntime.jsxs(QuestionContainer, { children: [jsxRuntime.jsxs(QuestionHeader, { children: [jsxRuntime.jsxs(QuestionTitle, Object.assign({ variant: "subtitle1" }, { children: [questionNumber && `${questionNumber}. `, formatMessage({ id: question })] })), helperText && (jsxRuntime.jsx(QuestionSubtext, Object.assign({ variant: "caption" }, { children: formatMessage({ id: helperText }) })))] }), jsxRuntime.jsx(OptionsContainer, { children: options.map((option) => {
+    return (jsxRuntime.jsxs(QuestionContainer$1, { children: [jsxRuntime.jsxs(QuestionHeader, { children: [jsxRuntime.jsxs(QuestionTitle, Object.assign({ variant: "subtitle1" }, { children: [questionNumber && `${questionNumber}. `, formatMessage({ id: question })] })), helperText && (jsxRuntime.jsx(QuestionSubtext, Object.assign({ variant: "caption" }, { children: formatMessage({ id: helperText }) })))] }), jsxRuntime.jsx(OptionsContainer$1, { children: options.map((option) => {
                     const selected = isSelected(option.value);
                     if (renderOption) {
                         return renderOption(option, selected);
@@ -1855,7 +1880,7 @@ const OptionLabel = styles.styled(material.Typography)(({ theme, selected, disab
  * />
  * ```
  */
-function OptionButton({ value, label, icon, selected = false, disabled = false, onClick, size = 'medium', fullWidth = true, formatMessage = (descriptor) => descriptor.id, }) {
+function OptionButton$1({ value, label, icon, selected = false, disabled = false, onClick, size = 'medium', fullWidth = true, formatMessage = (descriptor) => descriptor.id, }) {
     const handleClick = () => {
         if (!disabled && onClick) {
             onClick(value);
@@ -2214,7 +2239,7 @@ const InputContainer = styles.styled(material.Box)(({ theme }) => {
         border: `1px solid ${((_d = (_c = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _c === void 0 ? void 0 : _c.ui) === null || _d === void 0 ? void 0 : _d.inputBorder) || '#eeeeee'}`,
         borderRadius: '8px',
         width: '100%',
-        maxWidth: '298px', // Match slider track width
+        maxWidth: 'initial', // Match slider track width
     });
 });
 const InputValue = styles.styled(material.Typography)(({ theme }) => {
@@ -2230,15 +2255,15 @@ const InputValue = styles.styled(material.Typography)(({ theme }) => {
         flex: 1,
     });
 });
-const SliderTrack = styles.styled(material.Box)(({ theme }) => ({
+styles.styled(material.Box)(({ theme }) => ({
     display: 'flex',
     alignItems: 'center',
     position: 'relative',
     width: '100%',
-    maxWidth: '298px',
+    maxWidth: 'initial',
     height: '4px',
 }));
-const SliderSegment = styles.styled(material.Box)(({ theme, active }) => {
+styles.styled(material.Box)(({ theme, active }) => {
     var _a, _b, _c, _d;
     return ({
         height: '4px',
@@ -2250,7 +2275,7 @@ const SliderSegment = styles.styled(material.Box)(({ theme, active }) => {
         marginRight: '-1px',
     });
 });
-const SliderDot = styles.styled(material.Box)(({ theme, active }) => {
+styles.styled(material.Box)(({ theme, active }) => {
     var _a, _b, _c, _d;
     return ({
         width: '10px',
@@ -2270,7 +2295,7 @@ const SliderDot = styles.styled(material.Box)(({ theme, active }) => {
         },
     });
 });
-const SliderThumb = styles.styled(material.Box)(({ theme }) => ({
+styles.styled(material.Box)(({ theme }) => ({
     position: 'absolute',
     width: '18px',
     height: '18px',
@@ -2288,7 +2313,7 @@ const SliderThumb = styles.styled(material.Box)(({ theme }) => ({
         cursor: 'grabbing',
     },
 }));
-const ThumbIcon = styles.styled(material.Box)(({ theme }) => {
+styles.styled(material.Box)(({ theme }) => {
     var _a, _b;
     return ({
         width: '13px',
@@ -2299,11 +2324,11 @@ const ThumbIcon = styles.styled(material.Box)(({ theme }) => {
         color: ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _a === void 0 ? void 0 : _a.ui) === null || _b === void 0 ? void 0 : _b.sliderActive) || '#317abc',
     });
 });
-const RangeLabels = styles.styled(material.Box)(({ theme }) => ({
+styles.styled(material.Box)(({ theme }) => ({
     display: 'flex',
     justifyContent: 'space-between',
     width: '100%',
-    maxWidth: '298px', // Match slider track width
+    maxWidth: 'initial', // Match slider track width
 }));
 const RangeLabel = styles.styled(material.Typography)(({ theme }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j;
@@ -2316,6 +2341,72 @@ const RangeLabel = styles.styled(material.Typography)(({ theme }) => {
         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.main) || '#929094',
     });
 });
+const StyledMuiSlider = styles.styled(material.Slider)(({ theme, sliderActiveColor, sliderInactiveColor }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    return ({
+        width: '100%',
+        marginBottom: '0px !important',
+        padding: '7px 0px !important',
+        '& .MuiSlider-markLabel': {
+            display: 'none',
+        },
+        '& .MuiSlider-mark': {
+            width: 10,
+            height: 10,
+            borderRadius: '50%',
+            backgroundColor: sliderInactiveColor || ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _a === void 0 ? void 0 : _a.ui) === null || _b === void 0 ? void 0 : _b.sliderInactive) || '#c8c5ca',
+        },
+        '& .MuiSlider-track': {
+            height: 4,
+            backgroundColor: sliderActiveColor || ((_d = (_c = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _c === void 0 ? void 0 : _c.ui) === null || _d === void 0 ? void 0 : _d.sliderActive) || '#317abc',
+        },
+        '& .MuiSlider-rail': {
+            height: 4,
+            backgroundColor: sliderInactiveColor || ((_f = (_e = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _e === void 0 ? void 0 : _e.ui) === null || _f === void 0 ? void 0 : _f.sliderInactive) || '#c8c5ca',
+        },
+        '& .MuiSlider-markActive': {
+            backgroundColor: sliderActiveColor || ((_h = (_g = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _g === void 0 ? void 0 : _g.ui) === null || _h === void 0 ? void 0 : _h.sliderActive) || '#317abc',
+        },
+        '& .MuiSlider-thumb': {
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            height: 18,
+            width: 18,
+            backgroundColor: '#ffffff',
+            border: 'none',
+            cursor: 'pointer',
+            borderRadius: '50%',
+            boxShadow: '0px 2px 20px 4px rgba(0, 0, 0, 0.14)',
+            color: `${sliderActiveColor || ((_k = (_j = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _j === void 0 ? void 0 : _j.ui) === null || _k === void 0 ? void 0 : _k.sliderActive) || '#317abc'} !important`,
+            transform: 'translate(-50%, -50%) !important',
+            '&::before': {
+                content: '""',
+                width: '13px',
+                height: '10px',
+                backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='${encodeURIComponent(sliderActiveColor || '#317abc')}'%3E%3Cpath d='M4 18h16v-2H4v2zm0-5h16v-2H4v2zm0-7v2h16V6H4z'/%3E%3C/svg%3E")`,
+                backgroundRepeat: 'no-repeat',
+                backgroundPosition: 'center',
+                backgroundSize: 'contain',
+            },
+            '&:hover': {
+                boxShadow: '0px 2px 20px 4px rgba(0, 0, 0, 0.2)',
+            },
+            '&.Mui-focusVisible': {
+                boxShadow: '0px 2px 20px 4px rgba(0, 0, 0, 0.2)',
+            },
+            '&.Mui-active': {
+                boxShadow: '0px 2px 20px 4px rgba(0, 0, 0, 0.2)',
+            },
+        },
+    });
+});
+const SliderLabelsContainer = styles.styled(material.Box)(({ theme }) => ({
+    display: 'flex',
+    justifyContent: 'space-between',
+    width: '100%',
+    marginTop: '6px',
+}));
 
 /**
  * CoverageAmountSlider - Interactive slider for selecting coverage amounts
@@ -2330,11 +2421,12 @@ const RangeLabel = styles.styled(material.Typography)(({ theme }) => {
  * />
  * ```
  */
-function CoverageAmountSlider({ min, max, value, onChange, label = 'Choose your coverage amount', segments = 8, currency = 'RM', formatCurrency: customFormatCurrency, }) {
+function CoverageAmountSlider({ min, max, value, onChange, label = 'Choose your coverage amount', steps = 5, currency = 'RM', formatCurrency: customFormatCurrency, disabled = false, }) {
     // Safely get theme, handle SSR case where it might be undefined
     const tenantTheme = useTenantTheme();
     const theme = tenantTheme === null || tenantTheme === void 0 ? void 0 : tenantTheme.theme;
     const [localValue, setLocalValue] = React.useState(value);
+    const [sliderIndex, setSliderIndex] = React.useState(0);
     // Get theme colors with SSR-safe fallbacks
     const sliderActiveColor = getThemeColor(theme, 'ui.sliderActive', '#317abc');
     const sliderInactiveColor = getThemeColor(theme, 'ui.sliderInactive', '#c8c5ca');
@@ -2343,9 +2435,33 @@ function CoverageAmountSlider({ min, max, value, onChange, label = 'Choose your
     const inputBorderColor = getThemeColor(theme, 'ui.inputBorder', '#eeeeee');
     const textColor = getThemeColor(theme, 'natural.dim', '#13131b');
     const labelColor = getThemeColor(theme, 'natural.main', '#929094');
+    // Generate slider marks/options based on min, max, and steps
+    const { sliderMarks, stepSize, maxSliderValue, defaultSliderValue } = React.useMemo(() => {
+        const stepAmount = (max - min) / (steps - 1);
+        const marks = [];
+        for (let i = 0; i < steps; i++) {
+            const coverageValue = min + stepAmount * i;
+            marks.push({
+                value: i * 10,
+                label: `${(coverageValue / 1000).toFixed(0)}k`,
+                coverageVal: coverageValue,
+            });
+        }
+        // Find the default slider position based on the initial value
+        const defaultIdx = marks.findIndex((m) => m.coverageVal >= value) || 0;
+        return {
+            sliderMarks: marks,
+            stepSize: 10,
+            maxSliderValue: (steps - 1) * 10,
+            defaultSliderValue: defaultIdx * 10,
+        };
+    }, [min, max, steps, value]);
     React.useEffect(() => {
         setLocalValue(value);
-    }, [value]);
+        // Update slider index when value changes externally
+        const idx = sliderMarks.findIndex((m) => m.coverageVal >= value);
+        setSliderIndex(idx >= 0 ? idx * 10 : 0);
+    }, [value, sliderMarks]);
     const defaultFormatCurrency = (amount) => {
         return `${currency} ${amount.toLocaleString('en-US', {
             minimumFractionDigits: 0,
@@ -2354,79 +2470,378 @@ function CoverageAmountSlider({ min, max, value, onChange, label = 'Choose your
     };
     const formatCurrency = customFormatCurrency || defaultFormatCurrency;
     const handleDecrease = () => {
-        // Use total segments (9) for step calculation to match visual dots
-        const totalSegmentsForSteps = segments + 1; // 9 segments between 10 dots
-        const step = (max - min) / totalSegmentsForSteps;
-        const newValue = Math.max(min, localValue - step);
-        setLocalValue(newValue);
-        onChange(newValue);
+        if (disabled)
+            return;
+        const currentIdx = sliderMarks.findIndex((m) => m.coverageVal === localValue);
+        if (currentIdx > 0) {
+            const newValue = sliderMarks[currentIdx - 1].coverageVal;
+            setLocalValue(newValue);
+            setSliderIndex((currentIdx - 1) * 10);
+            onChange(newValue);
+        }
     };
     const handleIncrease = () => {
-        // Use total segments (9) for step calculation to match visual dots
-        const totalSegmentsForSteps = segments + 1; // 9 segments between 10 dots
-        const step = (max - min) / totalSegmentsForSteps;
-        const newValue = Math.min(max, localValue + step);
-        setLocalValue(newValue);
-        onChange(newValue);
+        if (disabled)
+            return;
+        const currentIdx = sliderMarks.findIndex((m) => m.coverageVal === localValue);
+        if (currentIdx < sliderMarks.length - 1) {
+            const newValue = sliderMarks[currentIdx + 1].coverageVal;
+            setLocalValue(newValue);
+            setSliderIndex((currentIdx + 1) * 10);
+            onChange(newValue);
+        }
     };
-    const handleDotClick = (dotIndex) => {
-        // Calculate the value for this dot position
-        const dotValue = min + (dotIndex * (max - min)) / (totalDots - 1);
-        setLocalValue(dotValue);
-        onChange(dotValue);
+    const handleSliderChange = (_event, newValue) => {
+        if (disabled)
+            return;
+        const sliderVal = newValue;
+        const currentMark = sliderMarks.find((opt) => opt.value === sliderVal);
+        if (currentMark) {
+            setSliderIndex(sliderVal);
+            setLocalValue(currentMark.coverageVal);
+            onChange(currentMark.coverageVal);
+        }
     };
-    const percentage = ((localValue - min) / (max - min)) * 100;
-    // Track width is 298px (10 dots * 10px + 9 gaps * 22px = 298px)
-    // Each dot is 10px wide, so dot centers are at: 5px, 37px, 69px, ... (5 + dotIndex * 32)
-    // First dot center: 5px (half of 10px dot width)
-    // Last dot center: 298px - 5px = 293px
-    // Thumb is 18px wide, so thumb center offset from left edge is 9px
-    // Position thumb so its center aligns with the dot center
-    // left = dotCenter - thumbCenterOffset = dotCenter - 9px
-    const firstDotCenter = 5; // First dot center position
-    const lastDotCenter = 298 - 5; // Last dot center position
-    const thumbCenterOffset = 9; // Half of thumb width (18px / 2)
-    const dotCenterPosition = firstDotCenter + (percentage / 100) * (lastDotCenter - firstDotCenter);
-    const thumbPosition = dotCenterPosition - thumbCenterOffset;
-    // Create slider with dots: dot-segment-dot-segment-...-dot
-    // With 8 segments, we have 9 dots total (start + 8 in between + end)
-    // But user wants 8 dots in between, so total = 1 (start) + 8 (between) + 1 (end) = 10 dots
-    // This means 9 segments between the 10 dots
-    const dotsInBetween = segments; // 8 dots in between
-    const totalDots = dotsInBetween + 2; // start + 8 in between + end = 10 dots
     return (jsxRuntime.jsxs(SliderContainer, Object.assign({ sx: {
             backgroundColor: sliderBgColor,
         } }, { children: [jsxRuntime.jsxs(InputSection, { children: [jsxRuntime.jsx(InputLabel, Object.assign({ sx: { color: textColor } }, { children: label })), jsxRuntime.jsxs(InputContainer, Object.assign({ sx: {
                             backgroundColor: inputBgColor,
                             border: `1px solid ${inputBorderColor}`,
-                        } }, { children: [jsxRuntime.jsx(material.IconButton, Object.assign({ onClick: handleDecrease, sx: {
+                            opacity: disabled ? 0.5 : 1,
+                        } }, { children: [jsxRuntime.jsx(material.IconButton, Object.assign({ onClick: handleDecrease, disabled: disabled, sx: {
                                     padding: 0,
                                     width: '24px',
                                     height: '24px',
                                     color: textColor,
-                                } }, { children: jsxRuntime.jsx(RemoveIcon, { sx: { fontSize: 24 } }) })), jsxRuntime.jsx(InputValue, Object.assign({ sx: { color: textColor } }, { children: formatCurrency(localValue) })), jsxRuntime.jsx(material.IconButton, Object.assign({ onClick: handleIncrease, sx: {
+                                } }, { children: jsxRuntime.jsx(RemoveIcon, { sx: { fontSize: 24 } }) })), jsxRuntime.jsx(InputValue, Object.assign({ sx: { color: textColor } }, { children: formatCurrency(localValue) })), jsxRuntime.jsx(material.IconButton, Object.assign({ onClick: handleIncrease, disabled: disabled, sx: {
                                     padding: 0,
                                     width: '24px',
                                     height: '24px',
                                     color: textColor,
-                                } }, { children: jsxRuntime.jsx(AddIcon, { sx: { fontSize: 24 } }) }))] }))] }), jsxRuntime.jsxs(material.Box, Object.assign({ sx: { display: 'flex', flexDirection: 'column', gap: '10px' } }, { children: [jsxRuntime.jsxs(SliderTrack, { children: [Array.from({ length: totalDots }).map((_, index) => {
-                                const dotValue = min + (index * (max - min)) / (totalDots - 1);
-                                const isActive = localValue >= dotValue;
-                                const isLast = index === totalDots - 1;
-                                return (jsxRuntime.jsxs(material.Box, Object.assign({ sx: { display: 'flex', alignItems: 'center' } }, { children: [jsxRuntime.jsx(SliderDot, { active: isActive, onClick: () => handleDotClick(index), sx: {
-                                                backgroundColor: isActive
-                                                    ? sliderActiveColor
-                                                    : sliderInactiveColor,
-                                            } }), !isLast && (jsxRuntime.jsx(SliderSegment, { active: localValue > dotValue, sx: {
-                                                backgroundColor: localValue > dotValue
-                                                    ? sliderActiveColor
-                                                    : sliderInactiveColor,
-                                            } }))] }), index));
-                            }), jsxRuntime.jsx(SliderThumb, Object.assign({ style: {
-                                    left: `${thumbPosition}px`,
-                                } }, { children: jsxRuntime.jsx(ThumbIcon, Object.assign({ sx: { color: sliderActiveColor } }, { children: jsxRuntime.jsx(DragHandleIcon, { sx: { fontSize: 16 } }) })) }))] }), jsxRuntime.jsxs(RangeLabels, { children: [jsxRuntime.jsx(RangeLabel, Object.assign({ sx: { color: labelColor } }, { children: formatCurrency(min) })), jsxRuntime.jsx(RangeLabel, Object.assign({ sx: { textAlign: 'right', color: labelColor } }, { children: formatCurrency(max) }))] })] }))] })));
+                                } }, { children: jsxRuntime.jsx(AddIcon, { sx: { fontSize: 24 } }) }))] }))] }), jsxRuntime.jsxs(material.Box, Object.assign({ sx: { display: 'flex', flexDirection: 'column', width: '100%' } }, { children: [jsxRuntime.jsx(StyledMuiSlider, { value: sliderIndex, defaultValue: defaultSliderValue, step: stepSize, min: 0, max: maxSliderValue, marks: sliderMarks, valueLabelDisplay: "off", onChange: handleSliderChange, disabled: disabled, sliderActiveColor: sliderActiveColor, sliderInactiveColor: sliderInactiveColor }), jsxRuntime.jsx(SliderLabelsContainer, { children: sliderMarks.map((mark, index) => (jsxRuntime.jsx(RangeLabel, Object.assign({ sx: {
+                                color: sliderIndex === mark.value
+                                    ? sliderActiveColor
+                                    : labelColor,
+                                textAlign: index === 0 ? 'left' : index === sliderMarks.length - 1 ? 'right' : 'center',
+                                flex: index === 0 || index === sliderMarks.length - 1 ? 'none' : 1,
+                            } }, { children: mark.label }), index))) })] }))] })));
 }
 
+const ProgressBarContainer = styles.styled(material.Box)({
+    display: 'flex',
+    alignItems: 'center',
+    gap: '8px',
+    padding: '16px',
+});
+const ProgressBar = styles.styled(material.Box)({
+    display: 'flex',
+    alignItems: 'center',
+    flex: 1,
+    height: '4px',
+    backgroundColor: 'rgba(0, 0, 0, 0.1)',
+    borderRadius: '2px',
+    overflow: 'hidden',
+});
+const ProgressFill = styles.styled(material.Box)(({ width, progressBarTheme }) => ({
+    height: '100%',
+    width: `${width}%`,
+    background: progressBarTheme || 'linear-gradient(90deg, #0090DA 0.06%, #A4CE4E 99.94%)',
+    transition: 'width 0.3s ease',
+}));
+const ProgressText = styles.styled(material.Typography)({
+    fontFamily: 'Montserrat',
+    fontSize: '12px',
+    color: '#5F5E62',
+    fontWeight: 400,
+    lineHeight: '16px',
+});
+
+const CheckoutProgress = ({ currentStep, totalSteps, onBack, showBackButton = true, progressBarTheme, sx, }) => {
+    const progressPercentage = ((currentStep + 1) / totalSteps) * 100;
+    return (jsxRuntime.jsxs(ProgressBarContainer, Object.assign({ sx: sx }, { children: [showBackButton && onBack && (jsxRuntime.jsx(material.IconButton, Object.assign({ onClick: onBack, sx: { p: 0, width: '24px', height: '24px' }, "aria-label": "Go back" }, { children: jsxRuntime.jsx(ArrowBackIcon, { sx: { fontSize: '20px', color: '#13131B' } }) }))), jsxRuntime.jsx(ProgressBar, { children: jsxRuntime.jsx(ProgressFill, { width: progressPercentage, progressBarTheme: progressBarTheme }) }), jsxRuntime.jsxs(ProgressText, { children: [currentStep + 1, "/", totalSteps] })] })));
+};
+
+const ProductCardContainer = styles.styled(material.Box)(({ theme, showIndicator }) => {
+    var _a, _b;
+    return (Object.assign({ backgroundColor: '#fff', boxShadow: '0px 2px 10px 0px rgba(0, 0, 0, 0.12)', borderRadius: '8px', padding: '12px 20px 12px 12px', display: 'flex', gap: '4px', alignItems: 'center', position: 'relative' }, (showIndicator && {
+        '&::before': {
+            content: '""',
+            position: 'absolute',
+            left: 0,
+            top: 0,
+            width: '8px',
+            height: '64px',
+            borderRadius: '0 0 8px 8px',
+            backgroundColor: ((_b = (_a = theme.palette) === null || _a === void 0 ? void 0 : _a.primary) === null || _b === void 0 ? void 0 : _b.main) || '#13131B',
+        },
+    })));
+});
+const LogoContainer = styles.styled(material.Box)({
+    width: '45px',
+    height: '40px',
+    border: '1.25px solid rgba(0, 0, 0, 0.1)',
+    borderRadius: '10px',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexShrink: 0,
+    marginLeft: '8px',
+});
+const ProductInfo = styles.styled(material.Box)({
+    flex: 1,
+    marginLeft: '4px',
+});
+const ProductName = styles.styled(material.Typography)({
+    fontFamily: 'Montserrat',
+    fontSize: '14px',
+    fontWeight: 600,
+    color: '#13131B',
+    lineHeight: '20px',
+});
+const PlanName = styles.styled(material.Typography)({
+    fontFamily: 'Montserrat',
+    fontSize: '12px',
+    fontWeight: 400,
+    color: '#13131B',
+    lineHeight: '16px',
+});
+const PriceContainer = styles.styled(material.Box)({
+    display: 'flex',
+    alignItems: 'baseline',
+    gap: '2px',
+});
+const Price = styles.styled(material.Typography)({
+    fontFamily: 'Montserrat',
+    fontSize: '14px',
+    fontWeight: 600,
+    color: '#13131B',
+    lineHeight: '20px',
+});
+const PricePeriod = styles.styled(material.Typography)({
+    fontFamily: 'Montserrat',
+    fontSize: '12px',
+    fontWeight: 400,
+    color: '#13131B',
+    lineHeight: '16px',
+});
+
+const ProductCard = ({ productName, planName, logoUrl, price, currency = 'RM', period = '/month', sx, showIndicator = true, }) => {
+    return (jsxRuntime.jsxs(ProductCardContainer, Object.assign({ sx: sx, showIndicator: showIndicator }, { children: [logoUrl && (jsxRuntime.jsx(LogoContainer, { children: jsxRuntime.jsx("img", { src: logoUrl, alt: productName, style: { maxWidth: '100%', maxHeight: '100%' } }) })), jsxRuntime.jsxs(ProductInfo, { children: [jsxRuntime.jsx(ProductName, { children: productName }), planName && jsxRuntime.jsx(PlanName, { children: planName })] }), jsxRuntime.jsxs(PriceContainer, { children: [jsxRuntime.jsxs(Price, { children: [currency, " ", price] }), jsxRuntime.jsx(PricePeriod, { children: period })] })] })));
+};
+
+const HeaderContainer = styles.styled(material.Box)(({ sticky }) => (Object.assign(Object.assign({}, (sticky && {
+    position: 'sticky',
+    top: 0,
+    zIndex: 1000,
+})), { backgroundColor: '#fff', width: '100%' })));
+const SectionHeader = styles.styled(material.Box)({
+    padding: '0 16px 24px',
+});
+const SectionTitle = styles.styled(material.Typography)({
+    fontFamily: 'Montserrat',
+    fontSize: '20px',
+    fontWeight: 700,
+    color: '#13131B',
+    lineHeight: '28px',
+    marginBottom: '8px',
+});
+const SectionDescription = styles.styled(material.Typography)({
+    fontFamily: 'Montserrat',
+    fontSize: '14px',
+    fontWeight: 400,
+    color: '#5F5E62',
+    lineHeight: '18px',
+});
+
+const CheckoutHeader = ({ progress, product, sectionTitle, sectionDescription, sticky = true, progressBarTheme, sx, }) => {
+    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, { children: sectionTitle }), jsxRuntime.jsx(SectionDescription, { children: sectionDescription })] })] })));
+};
+
+const ButtonContainer = styles.styled(material.Box)(({ isFixed }) => ({
+    position: isFixed ? 'fixed' : 'relative',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    backgroundColor: '#fff',
+    padding: '16px',
+    boxShadow: isFixed ? '0px 2px 10px 0px rgba(0, 0, 0, 0.12)' : 'none',
+    zIndex: 999,
+}));
+const StyledButton = styles.styled('button')(({ theme, isDisabled }) => {
+    var _a, _b, _c, _d;
+    return ({
+        width: '100%',
+        height: '48px',
+        borderRadius: '8px',
+        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',
+        color: isDisabled ? '#929094' : '#fff',
+        fontFamily: 'Montserrat',
+        fontSize: '14px',
+        fontWeight: 500,
+        lineHeight: '18px',
+        cursor: isDisabled ? 'not-allowed' : 'pointer',
+        transition: 'all 0.2s ease',
+        '&: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',
+        },
+    });
+});
+
+const CheckoutFormButton = ({ text = 'Next', disabled = false, onClick, fixed = true, type = 'button', sx, loading = false, }) => {
+    return (jsxRuntime.jsx(ButtonContainer, Object.assign({ isFixed: fixed, sx: sx }, { children: jsxRuntime.jsx(StyledButton, Object.assign({ type: type, disabled: disabled || loading, isDisabled: disabled || loading, onClick: onClick }, { children: loading ? 'Processing...' : text })) })));
+};
+
+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',
+    lineHeight: '20px',
+});
+const OptionsContainer = styles.styled(material.Box)({
+    display: 'flex',
+    gap: '16px',
+    marginTop: '12px',
+});
+const OptionButton = styles.styled(material.Box)(({ selected }) => ({
+    flex: 1,
+    height: '48px',
+    border: `1px solid ${selected ? '#13131B' : '#929094'}`,
+    borderRadius: '8px',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    cursor: 'pointer',
+    backgroundColor: selected ? '#F5F5F7' : '#fff',
+    transition: 'all 0.2s ease',
+    '&:hover': {
+        borderColor: '#13131B',
+    },
+}));
+const OptionText = styles.styled(material.Typography)(({ selected }) => ({
+    fontFamily: 'Montserrat',
+    fontSize: '14px',
+    fontWeight: 600,
+    color: selected ? '#13131B' : '#5F5E62',
+    lineHeight: '20px',
+}));
+
+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: {
+                    color: 'error.main',
+                    fontSize: '12px',
+                    mt: 0.5,
+                    ml: 2,
+                } }, { children: error })))] })));
+};
+
+const FormContainer$3 = styles.styled(material.Box)({
+    padding: '0 16px 100px',
+});
+const CheckboxContainer$1 = styles.styled(material.Box)({
+    marginTop: '12px',
+    '& .MuiFormControlLabel-root': {
+        alignItems: 'flex-start',
+        marginLeft: 0,
+    },
+    '& .MuiCheckbox-root': {
+        padding: '4px 8px 4px 0',
+    },
+});
+const CheckboxLabel$1 = styles.styled(material.Typography)({
+    fontFamily: 'Montserrat',
+    fontSize: '14px',
+    fontWeight: 400,
+    color: '#5F5E62',
+    lineHeight: '18px',
+});
+
+const PersonalInformationForm = ({ renderField, fields, consents, onSubmit, formRef, sx, }) => {
+    const defaultBankConfirmationLabel = 'I confirm this bank account is mine and consent to AmMetLife crediting payouts to it';
+    const defaultMarketingLabel = 'I/We consent to AmMetLife Insurance Berhad using my personal data for marketing and communication via digital platforms such as email, WhatsApp, and mobile';
+    return (jsxRuntime.jsx(FormContainer$3, Object.assign({ ref: formRef, component: "form", onSubmit: onSubmit, sx: sx }, { children: jsxRuntime.jsxs(material.Box, Object.assign({ sx: { display: 'flex', flexDirection: 'column', gap: '24px' } }, { children: [jsxRuntime.jsxs(material.Box, { children: [renderField(fields.full_name), fields.full_name.helperText && (jsxRuntime.jsx(material.Typography, Object.assign({ variant: "caption", sx: {
+                                display: 'block',
+                                mt: 0.5,
+                                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), 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',
+                                mt: 0.5,
+                                ml: 4,
+                            } }, { children: consents.bank_account_confirmation.error })))] }), jsxRuntime.jsx(CheckboxContainer$1, { children: jsxRuntime.jsx(material.FormControlLabel, { control: jsxRuntime.jsx(material.Checkbox, { checked: consents.marketing_consent.checked, onChange: (e) => consents.marketing_consent.onChange(e.target.checked), name: "marketing_consent" }), label: jsxRuntime.jsx(CheckboxLabel$1, { children: consents.marketing_consent.label || defaultMarketingLabel }) }) })] })) })));
+};
+
+const FormContainer$2 = styles.styled(material.Box)({
+    padding: '0 16px 100px',
+});
+const CheckboxContainer = styles.styled(material.Box)({
+    marginTop: '12px',
+    '& .MuiFormControlLabel-root': {
+        alignItems: 'flex-start',
+        marginLeft: 0,
+    },
+    '& .MuiCheckbox-root': {
+        padding: '4px 8px 4px 0',
+    },
+});
+const CheckboxLabel = styles.styled(material.Typography)({
+    fontFamily: 'Montserrat',
+    fontSize: '14px',
+    fontWeight: 400,
+    color: '#5F5E62',
+    lineHeight: '18px',
+});
+
+const ContactDetailsForm = ({ renderField, fields, mailingAddressSame, onSubmit, formRef, sx, }) => {
+    const defaultMailingLabel = 'My mailing address is the same as residential';
+    return (jsxRuntime.jsx(FormContainer$2, Object.assign({ ref: formRef, component: "form", onSubmit: onSubmit, sx: sx }, { children: jsxRuntime.jsxs(material.Box, Object.assign({ sx: { display: 'flex', flexDirection: 'column', gap: '24px' } }, { children: [jsxRuntime.jsxs(material.Box, { children: [renderField(fields.phone_number), fields.phone_number.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.phone_number.helperText })))] }), renderField(fields.email_address), renderField(fields.residential_address), renderField(fields.postal_code), renderField(fields.city), renderField(fields.state), mailingAddressSame && (jsxRuntime.jsx(CheckboxContainer, { children: jsxRuntime.jsx(material.FormControlLabel, { control: jsxRuntime.jsx(material.Checkbox, { checked: mailingAddressSame.checked, onChange: (e) => mailingAddressSame.onChange(e.target.checked), name: "mailing_same_as_residential" }), label: jsxRuntime.jsx(CheckboxLabel, { children: mailingAddressSame.label || defaultMailingLabel }) }) }))] })) })));
+};
+
+const FormContainer$1 = styles.styled(material.Box)({
+    padding: '0 16px 100px',
+});
+
+const HealthInformationForm = ({ renderField, measurementFields, healthQuestions, onSubmit, formRef, sx, }) => {
+    return (jsxRuntime.jsx(FormContainer$1, 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: [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)))] })) })));
+};
+
+const FormContainer = styles.styled(material.Box)({
+    padding: '0 16px 100px',
+});
+
+const ChildInformationForm = ({ renderField, fields, onSubmit, formRef, sx, }) => {
+    return (jsxRuntime.jsx(FormContainer, Object.assign({ ref: formRef, component: "form", onSubmit: onSubmit, sx: sx }, { children: jsxRuntime.jsxs(material.Box, Object.assign({ sx: { display: 'flex', flexDirection: 'column', gap: '24px' } }, { children: [jsxRuntime.jsxs(material.Box, { children: [renderField(fields.full_name), fields.full_name.helperText && (jsxRuntime.jsx(material.Box, Object.assign({ component: "span", sx: {
+                                display: 'block',
+                                mt: 0.5,
+                                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.nationality)] })) })));
+};
+
 /**
  * Asset Management Utilities
  * Helper functions for managing tenant-specific assets
@@ -2545,13 +2960,22 @@ exports.Banner = Banner;
 exports.BillingToggle = BillingToggle;
 exports.Button = Button;
 exports.Card = Card;
+exports.CheckoutFormButton = CheckoutFormButton;
+exports.CheckoutHeader = CheckoutHeader;
+exports.CheckoutProgress = CheckoutProgress;
+exports.ChildInformationForm = ChildInformationForm;
+exports.ContactDetailsForm = ContactDetailsForm;
 exports.CoverageAmountSlider = CoverageAmountSlider;
 exports.Footer = Footer;
 exports.Header = Header$1;
+exports.HealthInformationForm = HealthInformationForm;
+exports.HealthQuestionGroup = HealthQuestionGroup;
 exports.ICON_PATHS = ICON_PATHS;
 exports.InfoCallout = InfoCallout;
 exports.NewHeader = NewHeader;
-exports.OptionButton = OptionButton;
+exports.OptionButton = OptionButton$1;
+exports.PersonalInformationForm = PersonalInformationForm;
+exports.ProductCard = ProductCard;
 exports.ProductSelectionDrawer = ProductSelectionDrawer;
 exports.QuestionSection = QuestionSection;
 exports.RecommendationsDrawer = RecommendationsDrawer;