igloo-d2c-components 1.0.10 → 1.0.12

package/dist/esm/index.js

@@ -2,7 +2,7 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
 import { createContext, useMemo, useContext, useState, useEffect } from 'react';
-import { Button as Button$1, Card as Card$1, CardHeader, CardContent, CardActions, Box, Typography, Avatar, Menu, MenuItem, Drawer, IconButton, FormControlLabel, useTheme, useMediaQuery, Toolbar, Icon, RadioGroup, Radio, AppBar as AppBar$1, Divider, List, ListItem, ListItemButton, ListItemText, styled as styled$1, ButtonBase } from '@mui/material';
+import { Button as Button$1, Card as Card$1, CardHeader, CardContent, CardActions, Box, Typography, Avatar, Menu, MenuItem, Drawer, IconButton, FormControlLabel, useTheme, useMediaQuery, Toolbar, Icon, RadioGroup, Radio, AppBar as AppBar$1, Divider, List, ListItem, ListItemButton, ListItemText, styled as styled$1, ButtonBase, Slider, Checkbox } from '@mui/material';
 import CloseIcon from '@mui/icons-material/Close';
 import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
 import MenuIcon from '@mui/icons-material/Menu';
@@ -12,7 +12,6 @@ import { styled } from '@mui/material/styles';
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import InfoIcon from '@mui/icons-material/Info';
 import AddIcon from '@mui/icons-material/Add';
-import DragHandleIcon from '@mui/icons-material/DragHandle';
 import RemoveIcon from '@mui/icons-material/Remove';
 
 const TenantThemeContext = createContext(undefined);
@@ -395,12 +394,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',
@@ -938,7 +937,7 @@ const AnchorLink$1 = styled('a')(({ theme }) => ({
         color: 'inherit',
     },
 }));
-const StyledButton = styled(Button$1)(({ theme }) => {
+const StyledButton$1 = styled(Button$1)(({ theme }) => {
     var _a, _b, _c, _d;
     return ({
         alignSelf: 'start',
@@ -1035,7 +1034,7 @@ function Header$1({ logo, alternateLogo, showAlternateLogo = false, navigationLi
                                         },
                                     } }, { children: [shouldShowContent && (jsxs(ButtonDesktopMenu, Object.assign({ onClick: handleOpenLanguageMenu, sx: { my: 2, textTransform: 'capitalize' }, "data-testid": "selectedLocale" }, { children: [jsx(Typography, Object.assign({ variant: "h6" }, { children: formatMessage({
                                                         id: `${currentLocale === null || currentLocale === void 0 ? void 0 : currentLocale.toLocaleUpperCase()}`,
-                                                    }) })), jsx(Icon, { component: ArrowDropDownIcon })] }), "language")), isPartnershipPagePCView && scrolled ? (jsx(StyledButton, Object.assign({ variant: "contained", onClick: onPartnershipCTAClick }, { children: jsx(TypographyBtnText, Object.assign({ variant: "body1" }, { children: formatMessage({ id: 'Be Our Partner' }) })) }))) : isSeoPageView && scrolled && bannerData ? (jsx(StyledButtonBanner, Object.assign({ style: { background: bannerData === null || bannerData === void 0 ? void 0 : bannerData.ctaBGColor }, variant: "contained", onClick: onGetQuoteClick }, { children: jsx(Typography, Object.assign({ style: {
+                                                    }) })), jsx(Icon, { component: ArrowDropDownIcon })] }), "language")), isPartnershipPagePCView && scrolled ? (jsx(StyledButton$1, Object.assign({ variant: "contained", onClick: onPartnershipCTAClick }, { children: jsx(TypographyBtnText, Object.assign({ variant: "body1" }, { children: formatMessage({ id: 'Be Our Partner' }) })) }))) : isSeoPageView && scrolled && bannerData ? (jsx(StyledButtonBanner, Object.assign({ style: { background: bannerData === null || bannerData === void 0 ? void 0 : bannerData.ctaBGColor }, variant: "contained", onClick: onGetQuoteClick }, { children: jsx(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 ? (jsx(StyledAvatar, Object.assign({ onClick: handleOpenUserMenu, "data-testid": "user-profile-avatar" }, { children: firstName1stLetter }))) : (jsxs(DivButtonWrapper, { children: [jsx(ButtonAuth, Object.assign({ color: "primary", variant: "outlined", sx: { textTransform: 'capitalize' }, onClick: onLoginClick, "data-testid": "headerLogin" }, { children: jsx(TypographyAuth, Object.assign({ variant: "body1" }, { children: formatMessage({ id: 'Log in' }) })) })), jsx(ButtonAuth, Object.assign({ color: "primary", variant: "contained", sx: { textTransform: 'capitalize' }, onClick: onSignupClick }, { children: jsx(TypographyAuth, Object.assign({ variant: "body1" }, { children: formatMessage({ id: 'Sign up' }) })) }))] }))] })), jsx(StyledMenu, Object.assign({ id: "menu-appbar", anchorEl: anchorElNav, anchorOrigin: {
@@ -1085,7 +1084,7 @@ function Header$1({ logo, alternateLogo, showAlternateLogo = false, navigationLi
                                             handleOpenNavMenu(e);
                                         }
                                     }, color: "inherit", sx: Object.assign({}, (isPartnershipPageMobileView &&
-                                        scrolled && { padding: '0px !important' })) }, { children: Boolean(anchorElNav) ? (jsx(StyledCloseIcon, {})) : isPartnershipPageMobileView && scrolled ? (jsx(StyledButton, Object.assign({ variant: "contained", onClick: onPartnershipCTAClick }, { children: jsx(TypographyBtnText, Object.assign({ variant: "body1" }, { children: formatMessage({ id: 'Be Our Partner' }) })) }))) : isSeoPageView && scrolled && bannerData ? (jsx(StyledButtonBanner, Object.assign({ style: {
+                                        scrolled && { padding: '0px !important' })) }, { children: Boolean(anchorElNav) ? (jsx(StyledCloseIcon, {})) : isPartnershipPageMobileView && scrolled ? (jsx(StyledButton$1, Object.assign({ variant: "contained", onClick: onPartnershipCTAClick }, { children: jsx(TypographyBtnText, Object.assign({ variant: "body1" }, { children: formatMessage({ id: 'Be Our Partner' }) })) }))) : isSeoPageView && scrolled && bannerData ? (jsx(StyledButtonBanner, Object.assign({ style: {
                                             background: bannerData === null || bannerData === void 0 ? void 0 : bannerData.ctaBGColor,
                                         }, variant: "contained", onClick: onGetQuoteClick }, { children: jsx(Typography, Object.assign({ style: {
                                                 color: bannerData === null || bannerData === void 0 ? void 0 : bannerData.ctaTextColor,
@@ -1137,7 +1136,7 @@ const StyledToolbar = styled(Toolbar)(({ theme }) => ({
         padding: '12px 16px',
     },
 }));
-const LogoContainer = styled('div')(({ theme }) => ({
+const LogoContainer$1 = styled('div')(({ theme }) => ({
     display: 'flex',
     alignItems: 'center',
     cursor: 'pointer',
@@ -1234,7 +1233,7 @@ function NewHeader({ logo: propLogo, navigationLinks = [], additionalMenuSection
         (_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item);
         handleDrawerClose();
     };
-    return (jsxs(Fragment, { children: [jsx(StyledAppBar, Object.assign({ position: "fixed" }, { children: jsxs(StyledToolbar, Object.assign({ disableGutters: true }, { children: [jsx(LogoContainer, Object.assign({ onClick: handleLogoClick }, { children: jsx(LogoImage, { src: logo, alt: "Logo" }) })), jsx(MenuIconButton, Object.assign({ size: "large", edge: "end", "aria-label": "menu", onClick: handleDrawerOpen }, { children: jsx(MenuIcon, {}) }))] })) })), jsx(StyledDrawer$2, Object.assign({ anchor: "right", open: drawerOpen, onClose: handleDrawerClose }, { children: customDrawerContent ? (jsx(Box, Object.assign({ sx: { width: isMobile ? '100vw' : 350 } }, { children: customDrawerContent }))) : (jsxs(Box, Object.assign({ sx: { width: isMobile ? '100vw' : 350 } }, { children: [jsxs(DrawerHeader$2, { children: [jsx(DrawerLogoContainer, Object.assign({ onClick: handleLogoClick }, { children: jsx(LogoImage, { src: logo, alt: "Logo" }) })), jsx(CloseIconButton, Object.assign({ onClick: handleDrawerClose, "aria-label": "close" }, { children: jsx(CloseIcon, {}) }))] }), jsx(Divider, {}), jsxs(DrawerContent$2, { children: [navigationLinks.length > 0 && (jsx(List, { children: navigationLinks.map((item) => (jsx(ListItem, Object.assign({ disablePadding: true }, { children: jsx(ListItemButton, Object.assign({ onClick: () => handleMenuItemClick(item) }, { children: jsx(ListItemText, { primary: formatMessage({ id: item.label }) }) })) }), item.key))) })), additionalMenuSections.map((section, index) => (jsxs(React.Fragment, { children: [section.title && (jsxs(Fragment, { children: [jsx(Divider, {}), jsx(Box, Object.assign({ sx: { px: 2, py: 1 } }, { children: jsx(ListItemText, { primary: formatMessage({ id: section.title }), primaryTypographyProps: {
+    return (jsxs(Fragment, { children: [jsx(StyledAppBar, Object.assign({ position: "fixed" }, { children: jsxs(StyledToolbar, Object.assign({ disableGutters: true }, { children: [jsx(LogoContainer$1, Object.assign({ onClick: handleLogoClick }, { children: jsx(LogoImage, { src: logo, alt: "Logo" }) })), jsx(MenuIconButton, Object.assign({ size: "large", edge: "end", "aria-label": "menu", onClick: handleDrawerOpen }, { children: jsx(MenuIcon, {}) }))] })) })), jsx(StyledDrawer$2, Object.assign({ anchor: "right", open: drawerOpen, onClose: handleDrawerClose }, { children: customDrawerContent ? (jsx(Box, Object.assign({ sx: { width: isMobile ? '100vw' : 350 } }, { children: customDrawerContent }))) : (jsxs(Box, Object.assign({ sx: { width: isMobile ? '100vw' : 350 } }, { children: [jsxs(DrawerHeader$2, { children: [jsx(DrawerLogoContainer, Object.assign({ onClick: handleLogoClick }, { children: jsx(LogoImage, { src: logo, alt: "Logo" }) })), jsx(CloseIconButton, Object.assign({ onClick: handleDrawerClose, "aria-label": "close" }, { children: jsx(CloseIcon, {}) }))] }), jsx(Divider, {}), jsxs(DrawerContent$2, { children: [navigationLinks.length > 0 && (jsx(List, { children: navigationLinks.map((item) => (jsx(ListItem, Object.assign({ disablePadding: true }, { children: jsx(ListItemButton, Object.assign({ onClick: () => handleMenuItemClick(item) }, { children: jsx(ListItemText, { primary: formatMessage({ id: item.label }) }) })) }), item.key))) })), additionalMenuSections.map((section, index) => (jsxs(React.Fragment, { children: [section.title && (jsxs(Fragment, { children: [jsx(Divider, {}), jsx(Box, Object.assign({ sx: { px: 2, py: 1 } }, { children: jsx(ListItemText, { primary: formatMessage({ id: section.title }), primaryTypographyProps: {
                                                             variant: 'caption',
                                                             color: 'text.secondary',
                                                         } }) }))] })), jsx(List, { children: section.items.map((item) => (jsx(ListItem, Object.assign({ disablePadding: true }, { children: jsx(ListItemButton, Object.assign({ onClick: () => handleMenuItemClick(item) }, { children: jsx(ListItemText, { primary: formatMessage({ id: item.label }) }) })) }), item.key))) })] }, index)))] })] }))) }))] }));
@@ -1505,8 +1504,8 @@ const FooterButtons = styled(Box)(({ theme }) => ({
     gap: '16px',
     width: '100%',
 }));
+// Base button styles - colors will be injected via sx prop from component
 const PrimaryButton = styled(Button$1)(({ theme }) => ({
-    backgroundColor: '#4E4EEB',
     color: '#FFFFFF',
     borderRadius: '8px',
     height: '48px',
@@ -1515,16 +1514,12 @@ const PrimaryButton = styled(Button$1)(({ theme }) => ({
     fontWeight: 500,
     fontSize: '14px',
     lineHeight: '18px',
-    '&:hover': {
-        backgroundColor: '#3E3EDB',
-    },
     '&:disabled': {
         backgroundColor: '#C8C5CA',
         color: '#FFFFFF',
     },
 }));
 const SecondaryButton = styled(Button$1)(({ theme }) => ({
-    color: '#4E4EEB',
     borderRadius: '8px',
     height: '40px',
     textTransform: 'none',
@@ -1532,9 +1527,6 @@ const SecondaryButton = styled(Button$1)(({ theme }) => ({
     fontWeight: 500,
     fontSize: '14px',
     lineHeight: '18px',
-    '&:hover': {
-        backgroundColor: 'rgba(78, 78, 235, 0.08)',
-    },
 }));
 
 /**
@@ -1555,9 +1547,24 @@ const SecondaryButton = styled(Button$1)(({ 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 = useTheme();
     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();
     };
@@ -1578,7 +1585,17 @@ function RecommendationsDrawer({ open, onClose, children, headerIcon, title, sub
             },
         }, sx: {
             zIndex: 1300,
-        } }, { children: jsxs(Box, Object.assign({ sx: { display: 'flex', flexDirection: 'column', height: '100%' } }, { children: [jsx(DrawerHeader$1, { children: jsx(IconButton, Object.assign({ onClick: handleBackOrClose, sx: { padding: 0 }, "aria-label": showBackButton ? 'back' : 'close' }, { children: showBackButton ? jsx(ArrowBackIcon, {}) : jsx(CloseIcon, {}) })) }), (title || subtitle || headerIcon) && (jsxs(HeaderSection, { children: [headerIcon && (jsx(CategoryIcon, { children: jsx("img", { src: headerIcon, alt: "Category icon", width: 32, height: 32 }) })), title && (jsx(TitleText, Object.assign({ variant: "h5" }, { children: formatMessage({ id: title }) }))), subtitle && (jsx(SubtitleText, Object.assign({ variant: "body2" }, { children: formatMessage({ id: subtitle }) })))] })), jsx(DrawerContent$1, { children: children }), showFooter && (jsx(DrawerFooter, { children: customFooter ? (customFooter) : (jsxs(FooterButtons, { children: [primaryButtonText && (jsx(PrimaryButton, Object.assign({ variant: "contained", fullWidth: true, onClick: onPrimaryAction, disabled: primaryButtonDisabled }, { children: formatMessage({ id: primaryButtonText }) }))), secondaryButtonText && (jsx(SecondaryButton, Object.assign({ variant: "text", fullWidth: true, onClick: onSecondaryAction }, { children: formatMessage({ id: secondaryButtonText }) })))] })) }))] })) })));
+        } }, { children: jsxs(Box, Object.assign({ sx: { display: 'flex', flexDirection: 'column', height: '100%' } }, { children: [jsx(DrawerHeader$1, { children: jsx(IconButton, Object.assign({ onClick: handleBackOrClose, sx: { padding: 0 }, "aria-label": showBackButton ? 'back' : 'close' }, { children: showBackButton ? jsx(ArrowBackIcon, {}) : jsx(CloseIcon, {}) })) }), (title || subtitle || headerIcon) && (jsxs(HeaderSection, { children: [headerIcon && (jsx(CategoryIcon, { children: jsx("img", { src: headerIcon, alt: "Category icon", width: 32, height: 32 }) })), title && (jsx(TitleText, Object.assign({ variant: "h5" }, { children: formatMessage({ id: title }) }))), subtitle && (jsx(SubtitleText, Object.assign({ variant: "body2" }, { children: formatMessage({ id: subtitle }) })))] })), jsx(DrawerContent$1, { children: children }), showFooter && (jsx(DrawerFooter, { children: customFooter ? (customFooter) : (jsxs(FooterButtons, { children: [primaryButtonText && (jsx(PrimaryButton, Object.assign({ variant: "contained", fullWidth: true, onClick: onPrimaryAction, disabled: primaryButtonDisabled, sx: {
+                                    backgroundColor: primaryColor,
+                                    '&:hover': {
+                                        backgroundColor: primaryDark,
+                                    },
+                                } }, { children: formatMessage({ id: primaryButtonText }) }))), secondaryButtonText && (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 = styled$1(Drawer)(({ theme }) => ({
@@ -1636,7 +1653,7 @@ const ProductsGrid = styled$1(Box)({
     gridTemplateColumns: 'repeat(2, 1fr)',
     gap: '12px',
 });
-const ProductCard = styled$1(Box)({
+const ProductCard$1 = styled$1(Box)({
     display: 'flex',
     flexDirection: 'column',
     gap: '16px',
@@ -1646,7 +1663,7 @@ const ProductCard = styled$1(Box)({
     padding: '16px 12px 12px',
     height: '168px',
 });
-const ProductInfo = styled$1(Box)({
+const ProductInfo$1 = styled$1(Box)({
     display: 'flex',
     flexDirection: 'column',
     gap: '6px',
@@ -1660,7 +1677,7 @@ const ProductLogo = styled$1(Box)({
     justifyContent: 'center',
     padding: '4px',
 });
-const ProductName = styled$1(Typography)({
+const ProductName$1 = styled$1(Typography)({
     fontFamily: 'Montserrat, sans-serif',
     fontSize: '14px',
     fontWeight: 700,
@@ -1676,8 +1693,8 @@ const ProductType = styled$1(Typography)({
     color: '#13131b',
     textAlign: 'center',
 });
+// Base button styles - colors will be injected via sx prop from component
 const ViewPlansButton = styled$1(Button$1)({
-    backgroundColor: '#317abc',
     color: '#ffffff',
     borderRadius: '8px',
     height: '36px',
@@ -1686,23 +1703,31 @@ const ViewPlansButton = styled$1(Button$1)({
     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 (jsx(StyledDrawer, Object.assign({ anchor: "bottom", open: open, onClose: onClose }, { children: jsxs(DrawerContent, { children: [jsx(DrawerHeader, { children: jsx(CloseButtonContainer, { children: jsx(IconButton, Object.assign({ onClick: onClose, sx: { padding: 0 } }, { children: jsx(CloseIcon, { sx: { fontSize: 24, color: '#13131b' } }) })) }) }), jsxs(Header, { children: [jsx(HeaderTitle, { children: title }), jsx(HeaderSubtitle, { children: subtitle })] }), jsx(ProductsContainer, { children: jsx(ProductsGrid, { children: products.map((product) => (jsxs(ProductCard, { children: [jsxs(ProductInfo, { children: [jsx(ProductLogo, { children: 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 (jsx(StyledDrawer, Object.assign({ anchor: "bottom", open: open, onClose: onClose }, { children: jsxs(DrawerContent, { children: [jsx(DrawerHeader, { children: jsx(CloseButtonContainer, { children: jsx(IconButton, Object.assign({ onClick: onClose, sx: { padding: 0 } }, { children: jsx(CloseIcon, { sx: { fontSize: 24, color: '#13131b' } }) })) }) }), jsxs(Header, { children: [jsx(HeaderTitle, { children: title }), jsx(HeaderSubtitle, { children: subtitle })] }), jsx(ProductsContainer, { children: jsx(ProductsGrid, { children: products.map((product) => (jsxs(ProductCard$1, { children: [jsxs(ProductInfo$1, { children: [jsx(ProductLogo, { children: jsx("img", { src: product.logo, alt: product.name, style: {
                                                     width: '88px',
                                                     height: '32px',
                                                     objectFit: 'cover',
-                                                } }) }), jsxs(Box, Object.assign({ sx: { textAlign: 'center', width: '100%' } }, { children: [jsx(ProductName, { children: product.name }), jsx(ProductType, { children: product.type })] }))] }), jsx(ViewPlansButton, Object.assign({ variant: "contained", fullWidth: true, onClick: () => onProductSelect(product.id) }, { children: viewPlansButtonText }))] }, product.id))) }) })] }) })));
+                                                } }) }), jsxs(Box, Object.assign({ sx: { textAlign: 'center', width: '100%' } }, { children: [jsx(ProductName$1, { children: product.name }), jsx(ProductType, { children: product.type })] }))] }), 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 = styled(Box)(({ theme }) => ({
+const QuestionContainer$1 = styled(Box)(({ theme }) => ({
     backgroundColor: '#FFFFFF',
     padding: '12px 16px',
     display: 'flex',
@@ -1730,7 +1755,7 @@ const QuestionSubtext = styled(Typography)(({ theme }) => ({
     lineHeight: '16px',
     color: '#5F5E62',
 }));
-const OptionsContainer = styled(Box)(({ theme }) => ({
+const OptionsContainer$1 = styled(Box)(({ theme }) => ({
     display: 'flex',
     flexDirection: 'column',
     gap: '8px',
@@ -1759,7 +1784,7 @@ function QuestionSection({ questionNumber, question, helperText, options, select
         }
         return selectedValue === optionValue;
     };
-    return (jsxs(QuestionContainer, { children: [jsxs(QuestionHeader, { children: [jsxs(QuestionTitle, Object.assign({ variant: "subtitle1" }, { children: [questionNumber && `${questionNumber}. `, formatMessage({ id: question })] })), helperText && (jsx(QuestionSubtext, Object.assign({ variant: "caption" }, { children: formatMessage({ id: helperText }) })))] }), jsx(OptionsContainer, { children: options.map((option) => {
+    return (jsxs(QuestionContainer$1, { children: [jsxs(QuestionHeader, { children: [jsxs(QuestionTitle, Object.assign({ variant: "subtitle1" }, { children: [questionNumber && `${questionNumber}. `, formatMessage({ id: question })] })), helperText && (jsx(QuestionSubtext, Object.assign({ variant: "caption" }, { children: formatMessage({ id: helperText }) })))] }), jsx(OptionsContainer$1, { children: options.map((option) => {
                     const selected = isSelected(option.value);
                     if (renderOption) {
                         return renderOption(option, selected);
@@ -1835,7 +1860,7 @@ const OptionLabel = styled(Typography)(({ theme, selected, disabled }) => ({
  * />
  * ```
  */
-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);
@@ -2194,7 +2219,7 @@ const InputContainer = styled(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 = styled(Typography)(({ theme }) => {
@@ -2210,15 +2235,15 @@ const InputValue = styled(Typography)(({ theme }) => {
         flex: 1,
     });
 });
-const SliderTrack = styled(Box)(({ theme }) => ({
+styled(Box)(({ theme }) => ({
     display: 'flex',
     alignItems: 'center',
     position: 'relative',
     width: '100%',
-    maxWidth: '298px',
+    maxWidth: 'initial',
     height: '4px',
 }));
-const SliderSegment = styled(Box)(({ theme, active }) => {
+styled(Box)(({ theme, active }) => {
     var _a, _b, _c, _d;
     return ({
         height: '4px',
@@ -2230,7 +2255,7 @@ const SliderSegment = styled(Box)(({ theme, active }) => {
         marginRight: '-1px',
     });
 });
-const SliderDot = styled(Box)(({ theme, active }) => {
+styled(Box)(({ theme, active }) => {
     var _a, _b, _c, _d;
     return ({
         width: '10px',
@@ -2250,7 +2275,7 @@ const SliderDot = styled(Box)(({ theme, active }) => {
         },
     });
 });
-const SliderThumb = styled(Box)(({ theme }) => ({
+styled(Box)(({ theme }) => ({
     position: 'absolute',
     width: '18px',
     height: '18px',
@@ -2268,7 +2293,7 @@ const SliderThumb = styled(Box)(({ theme }) => ({
         cursor: 'grabbing',
     },
 }));
-const ThumbIcon = styled(Box)(({ theme }) => {
+styled(Box)(({ theme }) => {
     var _a, _b;
     return ({
         width: '13px',
@@ -2279,11 +2304,11 @@ const ThumbIcon = styled(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 = styled(Box)(({ theme }) => ({
+styled(Box)(({ theme }) => ({
     display: 'flex',
     justifyContent: 'space-between',
     width: '100%',
-    maxWidth: '298px', // Match slider track width
+    maxWidth: 'initial', // Match slider track width
 }));
 const RangeLabel = styled(Typography)(({ theme }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j;
@@ -2296,6 +2321,72 @@ const RangeLabel = styled(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 = styled(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 = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    justifyContent: 'space-between',
+    width: '100%',
+    marginTop: '6px',
+}));
 
 /**
  * CoverageAmountSlider - Interactive slider for selecting coverage amounts
@@ -2310,11 +2401,12 @@ const RangeLabel = styled(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] = useState(value);
+    const [sliderIndex, setSliderIndex] = useState(0);
     // Get theme colors with SSR-safe fallbacks
     const sliderActiveColor = getThemeColor(theme, 'ui.sliderActive', '#317abc');
     const sliderInactiveColor = getThemeColor(theme, 'ui.sliderInactive', '#c8c5ca');
@@ -2323,9 +2415,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 } = 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]);
     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,
@@ -2334,79 +2450,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 (jsxs(SliderContainer, Object.assign({ sx: {
             backgroundColor: sliderBgColor,
         } }, { children: [jsxs(InputSection, { children: [jsx(InputLabel, Object.assign({ sx: { color: textColor } }, { children: label })), jsxs(InputContainer, Object.assign({ sx: {
                             backgroundColor: inputBgColor,
                             border: `1px solid ${inputBorderColor}`,
-                        } }, { children: [jsx(IconButton, Object.assign({ onClick: handleDecrease, sx: {
+                            opacity: disabled ? 0.5 : 1,
+                        } }, { children: [jsx(IconButton, Object.assign({ onClick: handleDecrease, disabled: disabled, sx: {
                                     padding: 0,
                                     width: '24px',
                                     height: '24px',
                                     color: textColor,
-                                } }, { children: jsx(RemoveIcon, { sx: { fontSize: 24 } }) })), jsx(InputValue, Object.assign({ sx: { color: textColor } }, { children: formatCurrency(localValue) })), jsx(IconButton, Object.assign({ onClick: handleIncrease, sx: {
+                                } }, { children: jsx(RemoveIcon, { sx: { fontSize: 24 } }) })), jsx(InputValue, Object.assign({ sx: { color: textColor } }, { children: formatCurrency(localValue) })), jsx(IconButton, Object.assign({ onClick: handleIncrease, disabled: disabled, sx: {
                                     padding: 0,
                                     width: '24px',
                                     height: '24px',
                                     color: textColor,
-                                } }, { children: jsx(AddIcon, { sx: { fontSize: 24 } }) }))] }))] }), jsxs(Box, Object.assign({ sx: { display: 'flex', flexDirection: 'column', gap: '10px' } }, { children: [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 (jsxs(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center' } }, { children: [jsx(SliderDot, { active: isActive, onClick: () => handleDotClick(index), sx: {
-                                                backgroundColor: isActive
-                                                    ? sliderActiveColor
-                                                    : sliderInactiveColor,
-                                            } }), !isLast && (jsx(SliderSegment, { active: localValue > dotValue, sx: {
-                                                backgroundColor: localValue > dotValue
-                                                    ? sliderActiveColor
-                                                    : sliderInactiveColor,
-                                            } }))] }), index));
-                            }), jsx(SliderThumb, Object.assign({ style: {
-                                    left: `${thumbPosition}px`,
-                                } }, { children: jsx(ThumbIcon, Object.assign({ sx: { color: sliderActiveColor } }, { children: jsx(DragHandleIcon, { sx: { fontSize: 16 } }) })) }))] }), jsxs(RangeLabels, { children: [jsx(RangeLabel, Object.assign({ sx: { color: labelColor } }, { children: formatCurrency(min) })), jsx(RangeLabel, Object.assign({ sx: { textAlign: 'right', color: labelColor } }, { children: formatCurrency(max) }))] })] }))] })));
+                                } }, { children: jsx(AddIcon, { sx: { fontSize: 24 } }) }))] }))] }), jsxs(Box, Object.assign({ sx: { display: 'flex', flexDirection: 'column', width: '100%' } }, { children: [jsx(StyledMuiSlider, { value: sliderIndex, defaultValue: defaultSliderValue, step: stepSize, min: 0, max: maxSliderValue, marks: sliderMarks, valueLabelDisplay: "off", onChange: handleSliderChange, disabled: disabled, sliderActiveColor: sliderActiveColor, sliderInactiveColor: sliderInactiveColor }), jsx(SliderLabelsContainer, { children: sliderMarks.map((mark, index) => (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 = styled(Box)({
+    display: 'flex',
+    alignItems: 'center',
+    gap: '8px',
+    padding: '16px',
+});
+const ProgressBar = styled(Box)({
+    display: 'flex',
+    alignItems: 'center',
+    flex: 1,
+    height: '4px',
+    backgroundColor: 'rgba(0, 0, 0, 0.1)',
+    borderRadius: '2px',
+    overflow: 'hidden',
+});
+const ProgressFill = styled(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 = styled(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 (jsxs(ProgressBarContainer, Object.assign({ sx: sx }, { children: [showBackButton && onBack && (jsx(IconButton, Object.assign({ onClick: onBack, sx: { p: 0, width: '24px', height: '24px' }, "aria-label": "Go back" }, { children: jsx(ArrowBackIcon, { sx: { fontSize: '20px', color: '#13131B' } }) }))), jsx(ProgressBar, { children: jsx(ProgressFill, { width: progressPercentage, progressBarTheme: progressBarTheme }) }), jsxs(ProgressText, { children: [currentStep + 1, "/", totalSteps] })] })));
+};
+
+const ProductCardContainer = styled(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 = styled(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 = styled(Box)({
+    flex: 1,
+    marginLeft: '4px',
+});
+const ProductName = styled(Typography)({
+    fontFamily: 'Montserrat',
+    fontSize: '14px',
+    fontWeight: 600,
+    color: '#13131B',
+    lineHeight: '20px',
+});
+const PlanName = styled(Typography)({
+    fontFamily: 'Montserrat',
+    fontSize: '12px',
+    fontWeight: 400,
+    color: '#13131B',
+    lineHeight: '16px',
+});
+const PriceContainer = styled(Box)({
+    display: 'flex',
+    alignItems: 'baseline',
+    gap: '2px',
+});
+const Price = styled(Typography)({
+    fontFamily: 'Montserrat',
+    fontSize: '14px',
+    fontWeight: 600,
+    color: '#13131B',
+    lineHeight: '20px',
+});
+const PricePeriod = styled(Typography)({
+    fontFamily: 'Montserrat',
+    fontSize: '12px',
+    fontWeight: 400,
+    color: '#13131B',
+    lineHeight: '16px',
+});
+
+const ProductCard = ({ productName, planName, logoUrl, price, currency = 'RM', period = '/month', sx, showIndicator = true, }) => {
+    return (jsxs(ProductCardContainer, Object.assign({ sx: sx, showIndicator: showIndicator }, { children: [logoUrl && (jsx(LogoContainer, { children: jsx("img", { src: logoUrl, alt: productName, style: { maxWidth: '100%', maxHeight: '100%' } }) })), jsxs(ProductInfo, { children: [jsx(ProductName, { children: productName }), planName && jsx(PlanName, { children: planName })] }), jsxs(PriceContainer, { children: [jsxs(Price, { children: [currency, " ", price] }), jsx(PricePeriod, { children: period })] })] })));
+};
+
+const HeaderContainer = styled(Box)(({ sticky }) => (Object.assign(Object.assign({}, (sticky && {
+    position: 'sticky',
+    top: 0,
+    zIndex: 1000,
+})), { backgroundColor: '#fff', width: '100%' })));
+const SectionHeader = styled(Box)({
+    padding: '0 16px 24px',
+});
+const SectionTitle = styled(Typography)({
+    fontFamily: 'Montserrat',
+    fontSize: '20px',
+    fontWeight: 700,
+    color: '#13131B',
+    lineHeight: '28px',
+    marginBottom: '8px',
+});
+const SectionDescription = styled(Typography)({
+    fontFamily: 'Montserrat',
+    fontSize: '14px',
+    fontWeight: 400,
+    color: '#5F5E62',
+    lineHeight: '18px',
+});
+
+const CheckoutHeader = ({ progress, product, sectionTitle, sectionDescription, sticky = true, progressBarTheme, sx, }) => {
+    return (jsxs(HeaderContainer, Object.assign({ sticky: sticky, sx: sx }, { children: [jsx(CheckoutProgress, Object.assign({}, progress, { progressBarTheme: progressBarTheme })), product && (jsx(Box, Object.assign({ sx: { padding: '0 16px 24px' } }, { children: jsx(ProductCard, Object.assign({}, product)) }))), jsxs(SectionHeader, { children: [jsx(SectionTitle, { children: sectionTitle }), jsx(SectionDescription, { children: sectionDescription })] })] })));
+};
+
+const ButtonContainer = styled(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 = 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 (jsx(ButtonContainer, Object.assign({ isFixed: fixed, sx: sx }, { children: jsx(StyledButton, Object.assign({ type: type, disabled: disabled || loading, isDisabled: disabled || loading, onClick: onClick }, { children: loading ? 'Processing...' : text })) })));
+};
+
+const QuestionContainer = styled(Box)({
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '8px',
+    marginBottom: '24px',
+});
+const QuestionText = styled(Typography)({
+    fontFamily: 'Montserrat',
+    fontSize: '14px',
+    fontWeight: 400,
+    color: '#13131B',
+    lineHeight: '20px',
+});
+const OptionsContainer = styled(Box)({
+    display: 'flex',
+    gap: '16px',
+    marginTop: '12px',
+});
+const OptionButton = styled(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 = styled(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 (jsxs(QuestionContainer, Object.assign({ sx: sx }, { children: [jsxs(QuestionText, { children: [questionNumber && `${questionNumber}. `, question] }), jsxs(OptionsContainer, { children: [jsx(OptionButton, Object.assign({ selected: value === 'yes', onClick: () => onChange('yes'), role: "button", "aria-pressed": value === 'yes' }, { children: jsx(OptionText, Object.assign({ selected: value === 'yes' }, { children: labels.yes || 'Yes' })) })), jsx(OptionButton, Object.assign({ selected: value === 'no', onClick: () => onChange('no'), role: "button", "aria-pressed": value === 'no' }, { children: jsx(OptionText, Object.assign({ selected: value === 'no' }, { children: labels.no || 'No' })) }))] }), error && (jsx(Typography, Object.assign({ sx: {
+                    color: 'error.main',
+                    fontSize: '12px',
+                    mt: 0.5,
+                    ml: 2,
+                } }, { children: error })))] })));
+};
+
+const FormContainer$3 = styled(Box)({
+    padding: '0 16px 100px',
+});
+const CheckboxContainer$1 = styled(Box)({
+    marginTop: '12px',
+    '& .MuiFormControlLabel-root': {
+        alignItems: 'flex-start',
+        marginLeft: 0,
+    },
+    '& .MuiCheckbox-root': {
+        padding: '4px 8px 4px 0',
+    },
+});
+const CheckboxLabel$1 = styled(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 (jsx(FormContainer$3, Object.assign({ ref: formRef, component: "form", onSubmit: onSubmit, sx: sx }, { children: jsxs(Box, Object.assign({ sx: { display: 'flex', flexDirection: 'column', gap: '24px' } }, { children: [jsxs(Box, { children: [renderField(fields.full_name), fields.full_name.helperText && (jsx(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), jsxs(CheckboxContainer$1, { children: [jsx(FormControlLabel, { control: jsx(Checkbox, { checked: consents.bank_account_confirmation.checked, onChange: (e) => consents.bank_account_confirmation.onChange(e.target.checked), name: "bank_account_confirmation" }), label: jsx(CheckboxLabel$1, { children: consents.bank_account_confirmation.label ||
+                                    defaultBankConfirmationLabel }) }), consents.bank_account_confirmation.error && (jsx(Typography, Object.assign({ sx: {
+                                color: 'error.main',
+                                fontSize: '12px',
+                                mt: 0.5,
+                                ml: 4,
+                            } }, { children: consents.bank_account_confirmation.error })))] }), jsx(CheckboxContainer$1, { children: jsx(FormControlLabel, { control: jsx(Checkbox, { checked: consents.marketing_consent.checked, onChange: (e) => consents.marketing_consent.onChange(e.target.checked), name: "marketing_consent" }), label: jsx(CheckboxLabel$1, { children: consents.marketing_consent.label || defaultMarketingLabel }) }) })] })) })));
+};
+
+const FormContainer$2 = styled(Box)({
+    padding: '0 16px 100px',
+});
+const CheckboxContainer = styled(Box)({
+    marginTop: '12px',
+    '& .MuiFormControlLabel-root': {
+        alignItems: 'flex-start',
+        marginLeft: 0,
+    },
+    '& .MuiCheckbox-root': {
+        padding: '4px 8px 4px 0',
+    },
+});
+const CheckboxLabel = styled(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 (jsx(FormContainer$2, Object.assign({ ref: formRef, component: "form", onSubmit: onSubmit, sx: sx }, { children: jsxs(Box, Object.assign({ sx: { display: 'flex', flexDirection: 'column', gap: '24px' } }, { children: [jsxs(Box, { children: [renderField(fields.phone_number), fields.phone_number.helperText && (jsx(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 && (jsx(CheckboxContainer, { children: jsx(FormControlLabel, { control: jsx(Checkbox, { checked: mailingAddressSame.checked, onChange: (e) => mailingAddressSame.onChange(e.target.checked), name: "mailing_same_as_residential" }), label: jsx(CheckboxLabel, { children: mailingAddressSame.label || defaultMailingLabel }) }) }))] })) })));
+};
+
+const FormContainer$1 = styled(Box)({
+    padding: '0 16px 100px',
+});
+
+const HealthInformationForm = ({ renderField, measurementFields, healthQuestions, onSubmit, formRef, sx, }) => {
+    return (jsx(FormContainer$1, Object.assign({ ref: formRef, component: "form", onSubmit: onSubmit, sx: sx }, { children: jsxs(Box, Object.assign({ sx: { display: 'flex', flexDirection: 'column', gap: '24px' } }, { children: [renderField(measurementFields.weight), renderField(measurementFields.height), healthQuestions.map((question, index) => (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 = styled(Box)({
+    padding: '0 16px 100px',
+});
+
+const ChildInformationForm = ({ renderField, fields, onSubmit, formRef, sx, }) => {
+    return (jsx(FormContainer, Object.assign({ ref: formRef, component: "form", onSubmit: onSubmit, sx: sx }, { children: jsxs(Box, Object.assign({ sx: { display: 'flex', flexDirection: 'column', gap: '24px' } }, { children: [jsxs(Box, { children: [renderField(fields.full_name), fields.full_name.helperText && (jsx(Box, Object.assign({ component: "span", sx: {
+                                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
@@ -2521,5 +2936,5 @@ function getIconPath(iconName) {
     return ICON_PATHS[iconName];
 }
 
-export { Banner, BillingToggle, Button, Card, CoverageAmountSlider, Footer, Header$1 as Header, ICON_PATHS, InfoCallout, NewHeader, OptionButton, ProductSelectionDrawer, QuestionSection, RecommendationsDrawer, TenantThemeProvider, ToggleGroup, ammetlifeTheme, ammetlifeTypography, cimbTheme, cimbTypography, createThemeCSSVariables, getAvailableTenants, getIconPath, getTenantAssetPath, getTenantLogoPath, getTenantTheme, getTenantTypography, getThemeColor, iglooTheme, iglooTypography, isValidTenantId, mergeTenantTheme, tenantThemes, tenantTypography, useIsTenant, useTenantAsset, useTenantFavicon, useTenantId, useTenantLogo, useTenantTheme };
+export { Banner, BillingToggle, Button, Card, CheckoutFormButton, CheckoutHeader, CheckoutProgress, ChildInformationForm, ContactDetailsForm, CoverageAmountSlider, Footer, Header$1 as Header, HealthInformationForm, HealthQuestionGroup, ICON_PATHS, InfoCallout, NewHeader, OptionButton$1 as OptionButton, PersonalInformationForm, ProductCard, ProductSelectionDrawer, QuestionSection, RecommendationsDrawer, TenantThemeProvider, ToggleGroup, ammetlifeTheme, ammetlifeTypography, cimbTheme, cimbTypography, createThemeCSSVariables, getAvailableTenants, getIconPath, getTenantAssetPath, getTenantLogoPath, getTenantTheme, getTenantTypography, getThemeColor, iglooTheme, iglooTypography, isValidTenantId, mergeTenantTheme, tenantThemes, tenantTypography, useIsTenant, useTenantAsset, useTenantFavicon, useTenantId, useTenantLogo, useTenantTheme };
 //# sourceMappingURL=index.js.map