igloo-d2c-components 1.0.11 → 1.0.13

package/dist/esm/index.js

@@ -1,18 +1,7 @@
 "use client"
-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, 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';
-import AppBar from '@mui/material/AppBar';
-import Container from '@mui/material/Container';
-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 RemoveIcon from '@mui/icons-material/Remove';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { createContext, useMemo, useContext } from 'react';
+import { Button as Button$1, Card as Card$1, CardHeader, CardContent, CardActions, Box, Typography } from '@mui/material';
 
 const TenantThemeContext = createContext(undefined);
 /**
@@ -38,20 +27,11 @@ function TenantThemeProvider({ children, tenantId, theme, }) {
 }
 /**
  * Hook to access tenant theme configuration
- * Returns undefined during SSR if context is not available
- * @returns TenantContextValue or undefined during SSR
+ * @throws Error if used outside TenantThemeProvider
  */
 function useTenantTheme() {
     const context = useContext(TenantThemeContext);
-    // During SSR, context might be undefined - return undefined instead of throwing
-    // This allows components to handle SSR gracefully with fallback values
     if (context === undefined) {
-        // Check if we're in a browser environment
-        if (typeof window === 'undefined') {
-            // SSR - return undefined to allow fallback handling
-            return undefined;
-        }
-        // Client-side but no provider - throw error for development
         throw new Error('useTenantTheme must be used within a TenantThemeProvider');
     }
     return context;
@@ -60,160 +40,15 @@ function useTenantTheme() {
  * Hook to get tenant ID
  */
 function useTenantId() {
-    const tenantTheme = useTenantTheme();
-    return (tenantTheme === null || tenantTheme === void 0 ? void 0 : tenantTheme.tenantId) || '';
+    const { tenantId } = useTenantTheme();
+    return tenantId;
 }
 /**
  * Hook to check if current tenant matches given tenant ID
  */
 function useIsTenant(checkTenantId) {
-    const tenantTheme = useTenantTheme();
-    return (tenantTheme === null || tenantTheme === void 0 ? void 0 : tenantTheme.tenantId) === checkTenantId;
-}
-
-/**
- * Tenant Typography Configurations
- * Centralized typography definitions for all tenants
- * Based on b2c-web-demo typography structure
- */
-/**
- * Igloo Typography Configuration
- */
-const iglooTypography = {
-    fontFamily: 'Montserrat',
-    fontWeightRegular: 400,
-    fontWeightMedium: 500,
-    fontWeightSemiBold: 600,
-    fontWeightBold: 700,
-    fontWeightExtraBold: 800,
-    fontWeightExtraBlack: 900,
-    h1: {
-        fontSize: '42px',
-        fontStyle: 'normal',
-        fontWeight: 700,
-        lineHeight: '48px',
-        '@media (max-width:600px)': {
-            fontSize: '24px',
-            fontStyle: 'normal',
-            fontWeight: 700,
-            lineHeight: '30px',
-        },
-    },
-    h2: {
-        fontSize: '22px',
-        fontStyle: 'normal',
-        fontWeight: 700,
-        lineHeight: '26px',
-        '@media (max-width:600px)': {
-            fontSize: '14px',
-            fontStyle: 'normal',
-            fontWeight: 700,
-            lineHeight: '22px',
-        },
-    },
-    h3: {
-        fontSize: '18px',
-        fontStyle: 'normal',
-        fontWeight: 600,
-        lineHeight: '24px',
-        '@media (max-width:600px)': {
-            fontSize: '14px',
-            fontStyle: 'normal',
-            fontWeight: 600,
-            lineHeight: '20px',
-        },
-    },
-    h4: {
-        fontSize: '18px',
-        fontStyle: 'normal',
-        fontWeight: 600,
-        lineHeight: '24px',
-        '@media (max-width:600px)': {
-            fontSize: '14px',
-            fontStyle: 'normal',
-            fontWeight: 500,
-            lineHeight: '18px',
-        },
-    },
-    bodyStrongLarge: {
-        fontSize: '16px',
-        fontStyle: 'normal',
-        fontWeight: 500,
-        lineHeight: '20px',
-        '@media (max-width:600px)': {
-            fontSize: '14px',
-            fontStyle: 'normal',
-            fontWeight: 400,
-            lineHeight: '18px',
-        },
-    },
-    bodyStrongMedium: {
-        fontSize: '14px',
-        fontStyle: 'normal',
-        fontWeight: 500,
-        lineHeight: '18px',
-    },
-    bodyStrongSmall: {
-        fontSize: '12px',
-        fontStyle: 'normal',
-        fontWeight: 500,
-        lineHeight: '16px',
-    },
-    bodyLarge: {
-        fontSize: '16px',
-        fontStyle: 'normal',
-        fontWeight: 400,
-        lineHeight: '20px',
-        '@media (max-width:600px)': {
-            fontSize: '14px',
-            fontStyle: 'normal',
-            fontWeight: 400,
-            lineHeight: '18px',
-        },
-    },
-    bodyMedium: {
-        fontSize: '14px',
-        fontStyle: 'normal',
-        fontWeight: 400,
-        lineHeight: '20px',
-    },
-    bodySmall: {
-        fontSize: '12px',
-        fontStyle: 'normal',
-        fontWeight: 400,
-        lineHeight: '16px',
-    },
-    smallText: {
-        fontSize: '8px',
-        fontStyle: 'normal',
-        fontWeight: 500,
-        lineHeight: '16px',
-    },
-};
-/**
- * CIMB Typography Configuration
- */
-const cimbTypography = Object.assign(Object.assign({}, iglooTypography), { fontFamily: 'CIMB Sans' });
-/**
- * AmmetLife Typography Configuration
- */
-const ammetlifeTypography = Object.assign(Object.assign({}, iglooTypography), { fontFamily: 'Montserrat' });
-/**
- * Typography Registry
- * Map of tenant IDs to their typography configurations
- */
-const tenantTypography = {
-    igloo: iglooTypography,
-    cimb: cimbTypography,
-    ammetlife: ammetlifeTypography,
-};
-/**
- * Get typography configuration by tenant ID
- * @param tenantId - The tenant identifier
- * @returns Typography configuration for the specified tenant
- */
-function getTenantTypography(tenantId) {
-    return tenantTypography[tenantId] || iglooTypography;
+    const { tenantId } = useTenantTheme();
+    return tenantId === checkTenantId;
 }
 
 /**
@@ -257,19 +92,6 @@ const iglooTheme = {
             bright: '#fff',
             granite: '#666',
         },
-        // UI Component Colors
-        ui: {
-            sliderActive: '#5656F6',
-            sliderInactive: '#c8c5ca',
-            sliderBackground: '#f9f9f9',
-            toggleActive: '#5656F6',
-            toggleActiveText: '#ffffff',
-            toggleInactiveText: '#5f5e62',
-            calloutBackground: '#f9f9f9',
-            calloutBorder: '#ffffff',
-            inputBackground: '#ffffff',
-            inputBorder: '#eeeeee',
-        },
         motor: {
             main: '#00CCFF',
             light: 'rgba(0, 208, 255, 0.10)',
@@ -295,10 +117,11 @@ const iglooTheme = {
             main: '#F3A100',
         },
     },
-    typography: Object.assign(Object.assign({}, iglooTypography), { fontFamily: '"Manrope", "Roboto", "Helvetica", "Arial", sans-serif' }),
-    logo: '/assets/tenants/igloo/logo.svg',
+    typography: {
+        fontFamily: '"Manrope", "Roboto", "Helvetica", "Arial", sans-serif',
+    },
+    logo: '/assets/igloo_nobeta.svg',
     favicon: 'https://static.iglooinsure.com/icons/favicon.ico',
-    assetBaseUrl: '/assets/tenants/igloo',
 };
 /**
  * CIMB Theme Configuration
@@ -343,19 +166,6 @@ const cimbTheme = {
             bright: '#fff',
             granite: '#666',
         },
-        // UI Component Colors
-        ui: {
-            sliderActive: '#C3214B',
-            sliderInactive: '#c8c5ca',
-            sliderBackground: '#f9f9f9',
-            toggleActive: '#EE0500',
-            toggleActiveText: '#fefbff',
-            toggleInactiveText: '#5f5e62',
-            calloutBackground: '#f9f9f9',
-            calloutBorder: '#ffffff',
-            inputBackground: '#ffffff',
-            inputBorder: '#eeeeee',
-        },
         motor: {
             main: '#C3214B',
             light: 'rgba(195, 33, 75, 0.10)',
@@ -382,11 +192,11 @@ const cimbTheme = {
             main: '#F3A100',
         },
     },
-    typography: Object.assign(Object.assign({}, cimbTypography), { fontFamily: '"CIMB Sans", "Roboto", "Helvetica", "Arial", sans-serif' }),
-    logo: '/assets/tenants/cimb/logo.svg',
-    logoWhite: '/assets/tenants/cimb/logo-white.png',
+    typography: {
+        fontFamily: '"CIMB Sans", "Roboto", "Helvetica", "Arial", sans-serif',
+    },
+    logo: '/assets/cimb/cimb-logo.svg',
     favicon: 'https://static.iglooinsure.com/icons/favicon.ico',
-    assetBaseUrl: '/assets/tenants/cimb',
 };
 /**
  * Ammetlife Theme Configuration
@@ -394,12 +204,12 @@ const cimbTheme = {
 const ammetlifeTheme = {
     palette: {
         primary: {
-            dark: '#2869a8',
-            main: '#317abc',
+            dark: '#0D47A1',
+            main: '#1976D2',
             light: '#42A5F5',
             bright: '#90CAF9',
             plain: '#E3F2FD',
-            border: '#317abc',
+            border: '#1976D2',
         },
         secondary: {
             dim: '#E65100',
@@ -425,19 +235,6 @@ const ammetlifeTheme = {
             bright: '#fff',
             granite: '#666',
         },
-        // UI Component Colors
-        ui: {
-            sliderActive: '#317abc',
-            sliderInactive: '#c8c5ca',
-            sliderBackground: '#f9f9f9',
-            toggleActive: '#a4ce4e',
-            toggleActiveText: '#fefbff',
-            toggleInactiveText: '#5f5e62',
-            calloutBackground: '#f9f9f9',
-            calloutBorder: '#ffffff',
-            inputBackground: '#ffffff',
-            inputBorder: '#eeeeee',
-        },
         motor: {
             main: '#1976D2',
             light: 'rgba(25, 118, 210, 0.10)',
@@ -464,10 +261,11 @@ const ammetlifeTheme = {
             main: '#FF9800',
         },
     },
-    typography: Object.assign(Object.assign({}, ammetlifeTypography), { fontFamily: '"Montserrat", "Roboto", "Helvetica", "Arial", sans-serif' }),
-    logo: '/assets/tenants/ammetlife/logo.svg',
+    typography: {
+        fontFamily: '"Open Sans", "Roboto", "Helvetica", "Arial", sans-serif',
+    },
+    logo: '/assets/ammetlife/logo-AmMetLife.svg',
     favicon: 'https://static.iglooinsure.com/icons/favicon.ico',
-    assetBaseUrl: '/assets/tenants/ammetlife',
 };
 /**
  * Theme Registry
@@ -554,13 +352,12 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
  * ```
  */
 function Button(_a) {
-    var _b, _c, _d, _e, _f, _g;
+    var _b, _c, _d;
     var { tenantColored = false, variant = 'contained', sx, color } = _a, props = __rest(_a, ["tenantColored", "variant", "sx", "color"]);
-    const tenantTheme = useTenantTheme();
-    const theme = tenantTheme === null || tenantTheme === void 0 ? void 0 : tenantTheme.theme;
-    const buttonSx = tenantColored && theme
-        ? Object.assign({ backgroundColor: (_c = (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.primary) === null || _c === void 0 ? void 0 : _c.main, color: '#fff', '&:hover': {
-                backgroundColor: ((_e = (_d = theme.palette) === null || _d === void 0 ? void 0 : _d.primary) === null || _e === void 0 ? void 0 : _e.dark) || ((_g = (_f = theme.palette) === null || _f === void 0 ? void 0 : _f.primary) === null || _g === void 0 ? void 0 : _g.main),
+    const { theme } = useTenantTheme();
+    const buttonSx = tenantColored
+        ? Object.assign({ backgroundColor: (_b = theme.palette.primary) === null || _b === void 0 ? void 0 : _b.main, color: '#fff', '&:hover': {
+                backgroundColor: ((_c = theme.palette.primary) === null || _c === void 0 ? void 0 : _c.dark) || ((_d = theme.palette.primary) === null || _d === void 0 ? void 0 : _d.main),
             } }, sx) : sx;
     return (jsx(Button$1, Object.assign({ variant: variant, color: tenantColored ? undefined : color, sx: buttonSx }, props)));
 }
@@ -579,12 +376,11 @@ function Button(_a) {
  * ```
  */
 function Card(_a) {
-    var _b, _c;
+    var _b;
     var { title, headerAction, content, actions, tenantAccent = false, sx, children } = _a, props = __rest(_a, ["title", "headerAction", "content", "actions", "tenantAccent", "sx", "children"]);
-    const tenantTheme = useTenantTheme();
-    const theme = tenantTheme === null || tenantTheme === void 0 ? void 0 : tenantTheme.theme;
-    const cardSx = tenantAccent && theme
-        ? Object.assign({ borderTop: `4px solid ${((_c = (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.primary) === null || _c === void 0 ? void 0 : _c.main) || '#000000'}` }, sx) : sx;
+    const { theme } = useTenantTheme();
+    const cardSx = tenantAccent
+        ? Object.assign({ borderTop: `4px solid ${(_b = theme.palette.primary) === null || _b === void 0 ? void 0 : _b.main}` }, sx) : sx;
     return (jsxs(Card$1, Object.assign({ sx: cardSx }, props, { children: [title && jsx(CardHeader, { title: title, action: headerAction }), (content || children) && (jsx(CardContent, { children: content || children })), actions && jsx(CardActions, { children: actions })] })));
 }
 
@@ -604,1348 +400,25 @@ function Card(_a) {
 function Banner(_a) {
     var _b, _c, _d, _e;
     var { title, description, action, gradient = true, sx } = _a, props = __rest(_a, ["title", "description", "action", "gradient", "sx"]);
-    const tenantTheme = useTenantTheme();
-    const theme = tenantTheme === null || tenantTheme === void 0 ? void 0 : tenantTheme.theme;
-    const primaryColor = ((_c = (_b = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _b === void 0 ? void 0 : _b.primary) === null || _c === void 0 ? void 0 : _c.main) || '#000000';
-    const lightColor = ((_e = (_d = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _d === void 0 ? void 0 : _d.primary) === null || _e === void 0 ? void 0 : _e.light) || primaryColor;
+    const { theme } = useTenantTheme();
     const background = gradient
-        ? `linear-gradient(135deg, ${primaryColor} 0%, ${lightColor} 100%)`
-        : primaryColor;
+        ? `linear-gradient(135deg, ${(_b = theme.palette.primary) === null || _b === void 0 ? void 0 : _b.main} 0%, ${((_c = theme.palette.primary) === null || _c === void 0 ? void 0 : _c.light) || ((_d = theme.palette.primary) === null || _d === void 0 ? void 0 : _d.main)} 100%)`
+        : (_e = theme.palette.primary) === null || _e === void 0 ? void 0 : _e.main;
     return (jsxs(Box, Object.assign({ sx: Object.assign({ background, color: 'white', padding: '32px', borderRadius: '12px', textAlign: 'center' }, sx) }, props, { children: [jsx(Typography, Object.assign({ variant: "h4", component: "h2", gutterBottom: true, fontWeight: "bold" }, { children: title })), description && (jsx(Typography, Object.assign({ variant: "body1", sx: { opacity: 0.95, mb: action ? 2 : 0 } }, { children: description }))), action && jsx(Box, Object.assign({ sx: { mt: 2 } }, { children: action }))] })));
 }
 
-const StyledAppBar$1 = styled(AppBar)(({ theme, ispartnershippagemobileview, scrolled }) => {
-    var _a, _b;
-    return ({
-        zIndex: '1000 !important',
-        backgroundColor: ispartnershippagemobileview && !scrolled
-            ? 'transparent !important'
-            : `${((_a = theme.palette.background) === null || _a === void 0 ? void 0 : _a.paper) || '#fff'} !important`,
-        boxShadow: 'none !important',
-        '& .MuiToolbar-root': {
-            minHeight: '80px',
-            [(_b = theme === null || theme === void 0 ? void 0 : theme.breakpoints) === null || _b === void 0 ? void 0 : _b.down('md')]: {
-                minHeight: '64px',
-            },
-        },
-        [theme.breakpoints.up(1025)]: {
-            boxShadow: scrolled && '0px 2px 20px 4px rgba(0, 0, 0, 0.14) !important',
-        },
-    });
-});
-const ResponsiveB2CLayout = styled('div')(({ theme }) => ({
-    [theme.breakpoints.up(1025)]: {
-        minWidth: '1128px',
-        maxWidth: '1128px',
-        margin: '0 auto',
-    },
-}));
-const StyledContainer = styled(Container)(({ theme, ispartnershippagemobileview, scrolled }) => {
-    var _a;
-    return ({
-        boxShadow: 'none',
-        [(_a = theme === null || theme === void 0 ? void 0 : theme.breakpoints) === null || _a === void 0 ? void 0 : _a.down('md')]: {
-            boxShadow: !scrolled ? 'none' : '0px 2px 20px 4px rgba(0, 0, 0, 0.14)',
-        },
-    });
-});
-const TypographyLogo = styled(Typography)(({ theme }) => {
-    var _a, _b;
-    return ({
-        margin: 'auto 40 auto 0',
-        display: '-webkit-box',
-        alignItems: 'anchor-center',
-        [(_a = theme === null || theme === void 0 ? void 0 : theme.breakpoints) === null || _a === void 0 ? void 0 : _a.up('md')]: {
-            width: 95,
-            height: 57,
-        },
-        [(_b = theme === null || theme === void 0 ? void 0 : theme.breakpoints) === null || _b === void 0 ? void 0 : _b.down('md')]: {
-            width: 73.3,
-            display: 'flex',
-        },
-    });
-});
-const ButtonDesktopMenu = styled(Button$1)(({ theme }) => {
-    var _a;
-    return ({
-        color: ((_a = theme.palette.text) === null || _a === void 0 ? void 0 : _a.primary) || '#000',
-        display: 'flex',
-        padding: '0px 10px',
-        alignItems: 'center',
-        gap: 8,
-        alignSelf: 'stretch',
-    });
-});
-const AnchorLinks = styled('a')(({ theme }) => ({
-    color: 'inherit',
-    '&:hover': {
-        color: 'inherit',
-    },
-}));
-const StyledAvatar = styled(Avatar)(({ theme }) => {
-    var _a;
-    return ({
-        margin: '15px 0',
-        cursor: 'pointer',
-        backgroundColor: `${theme.palette.primary.main} !important`,
-        [(_a = theme === null || theme === void 0 ? void 0 : theme.breakpoints) === null || _a === void 0 ? void 0 : _a.down('md')]: {
-            margin: '0',
-        },
-    });
-});
-const DivButtonWrapper = styled('div')(({ theme }) => {
-    var _a;
-    return ({
-        justifyContent: 'end',
-        display: 'flex',
-        marginTop: 0,
-        padding: `16px 0`,
-        gap: 12,
-        [(_a = theme === null || theme === void 0 ? void 0 : theme.breakpoints) === null || _a === void 0 ? void 0 : _a.down('md')]: {
-            marginTop: 24,
-            padding: 0,
-        },
-    });
-});
-const ButtonAuth = styled(Button$1)(({ theme }) => ({
-    justifyContent: 'center',
-    alignItems: 'center',
-    borderRadius: '100px !important',
-    borderColor: theme.palette.primary.main,
-    borderStyle: 'solid',
-    borderWidth: 1,
-    flex: 1,
-    height: 40,
-    minWidth: 'max-content !important',
-}));
-const TypographyAuth = styled(Typography)(({ theme }) => ({
-    textTransform: 'none',
-}));
-const StyledMenu = styled(Menu)(({ theme }) => {
-    var _a;
-    return ({
-        '& .MuiMenu-paper': {
-            left: 'auto',
-            width: 'fit-content',
-            maxWidth: 'unset',
-            boxShadow: 'inset',
-            borderRadius: 16,
-            [(_a = theme === null || theme === void 0 ? void 0 : theme.breakpoints) === null || _a === void 0 ? void 0 : _a.down('md')]: {
-                left: `0 !important`,
-                width: '100%',
-                boxShadow: 'none !important',
-                borderRadius: 'none',
-            },
-        },
-    });
-});
-const DivProductListing = styled('div')(({ theme }) => {
-    var _a;
-    return ({
-        padding: '0 16px',
-        display: 'flex',
-        flexDirection: 'column',
-        alignSelf: 'stretch',
-        [(_a = theme === null || theme === void 0 ? void 0 : theme.breakpoints) === null || _a === void 0 ? void 0 : _a.down('md')]: {
-            padding: 16,
-        },
-    });
-});
-const StyledMenuItem = styled(MenuItem)(({ theme }) => {
-    var _a;
-    return ({
-        display: 'flex',
-        borderBottom: 'none',
-        alignItems: 'flex-start',
-        gap: 6,
-        padding: '16px 0 !important',
-        '&:last-child': {
-            borderBottom: 'none !important',
-        },
-        width: '100%',
-        [(_a = theme === null || theme === void 0 ? void 0 : theme.breakpoints) === null || _a === void 0 ? void 0 : _a.down('md')]: {
-            borderBottom: `1px solid ${theme.palette.divider} !important`,
-        },
-    });
-});
-const SpanImageWrapper = styled('span')(({ theme }) => ({
-    alignItems: 'center',
-    display: 'flex',
-    justifyContent: 'center',
-    margin: 'auto 0',
-}));
-const ImageProductIcon = styled('img')(({ theme }) => ({
-    aspectRatio: 1,
-    objectPosition: 'center',
-    width: 18,
-    height: 18,
-}));
-const StyledMenuItemDesktop = styled(MenuItem)(({ theme }) => {
-    var _a, _b;
-    return ({
-        color: `${((_a = theme.palette.secondary) === null || _a === void 0 ? void 0 : _a.main) || '#f00'} !important`,
-        display: 'flex',
-        borderBottom: 'none',
-        alignItems: 'flex-start',
-        gap: 6,
-        padding: '16px 0 !important',
-        '&:last-child': {
-            borderBottom: 'none !important',
-        },
-        width: '100%',
-        [(_b = theme === null || theme === void 0 ? void 0 : theme.breakpoints) === null || _b === void 0 ? void 0 : _b.down('md')]: {
-            borderBottom: `1px solid ${theme.palette.divider} !important`,
-        },
-    });
-});
-const StyledCloseIcon = styled(CloseIcon)(({ theme }) => {
-    var _a;
-    return ({
-        color: `${((_a = theme.palette.text) === null || _a === void 0 ? void 0 : _a.primary) || '#000'}`,
-    });
-});
-const StyledAvatarUserIcon = styled(Avatar)(({ theme }) => {
-    var _a, _b;
-    return ({
-        margin: '15px 0',
-        cursor: 'pointer',
-        backgroundColor: `${((_a = theme.palette.text) === null || _a === void 0 ? void 0 : _a.primary) || '#000'} !important`,
-        [(_b = theme === null || theme === void 0 ? void 0 : theme.breakpoints) === null || _b === void 0 ? void 0 : _b.down('md')]: {
-            margin: '0',
-        },
-    });
-});
-const StyledMenuIcon = styled(MenuIcon)(({ theme, ispartnershippagemobileview, scrolled }) => {
-    var _a, _b;
-    return ({
-        color: ispartnershippagemobileview && !scrolled
-            ? ((_a = theme.palette.common) === null || _a === void 0 ? void 0 : _a.white) || '#fff'
-            : `${((_b = theme.palette.text) === null || _b === void 0 ? void 0 : _b.primary) || '#000'}`,
-    });
-});
-const StyledDrawer$3 = styled(Drawer)(({ theme }) => {
-    var _a;
-    return ({
-        '& .MuiMenu-paper': {
-            left: 'auto',
-            width: 'fit-content',
-            maxWidth: 'unset',
-            boxShadow: 'inset',
-            borderRadius: 16,
-            [(_a = theme === null || theme === void 0 ? void 0 : theme.breakpoints) === null || _a === void 0 ? void 0 : _a.down('md')]: {
-                left: `0 !important`,
-                width: '100%',
-                boxShadow: 'none !important',
-                borderRadius: 'none',
-            },
-        },
-    });
-});
-const DivLogoWrapper = styled('div')(({ theme }) => ({
-    justifyContent: 'space-between',
-    alignSelf: 'stretch',
-    backgroundColor: '',
-    display: 'flex',
-    gap: '20px',
-    padding: '12px 16px',
-    marginBottom: 16,
-}));
-const DivLogo = styled('div')(({ theme }) => {
-    var _a, _b;
-    return ({
-        margin: 'auto 40 auto 0',
-        display: '-webkit-box',
-        [(_a = theme === null || theme === void 0 ? void 0 : theme.breakpoints) === null || _a === void 0 ? void 0 : _a.up('md')]: {
-            width: 95,
-            height: 57,
-        },
-        [(_b = theme === null || theme === void 0 ? void 0 : theme.breakpoints) === null || _b === void 0 ? void 0 : _b.down('md')]: {
-            width: 60,
-            height: 36,
-            display: 'flex',
-        },
-    });
-});
-const DivCrossIconWrapper = styled('div')(({ theme }) => ({
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    padding: 6,
-}));
-const StyledCloseIconBtn = styled(IconButton)(({ theme }) => {
-    var _a;
-    return ({
-        color: `${((_a = theme.palette.text) === null || _a === void 0 ? void 0 : _a.primary) || '#000'} !important`,
-        padding: '0 !important',
-    });
-});
-const DivLoginActionContainer = styled('div')(({ theme }) => ({
-    justifyContent: 'center',
-    alignSelf: 'stretch',
-    display: 'flex',
-    flexDirection: 'column',
-    padding: ' 0 16px',
-}));
-const DivCommonMenus = styled('div')(({ theme }) => ({
-    padding: 16,
-    display: 'flex',
-    flexDirection: 'column',
-    alignSelf: 'stretch',
-    alignItems: 'flex-start',
-}));
-const MenuItemOtherLinks = styled(MenuItem)(({ theme }) => ({
-    display: 'flex',
-    borderBottom: `1px solid ${theme.palette.divider} !important`,
-    alignItems: 'flex-start',
-    padding: '16px 0 !important',
-    '&:last-child': {
-        borderBottom: 'none !important',
-        gap: '30px',
-        justifyContent: 'space-between',
-    },
-    width: '100%',
-    gap: '50%',
-}));
-const StyledFormControlLabel = styled(FormControlLabel)(({ theme }) => ({
-    '& .MuiRadio-root': {
-        padding: '0 9px',
-    },
-}));
-const ButtonLogout = styled(Button$1)(({ theme }) => {
-    var _a, _b;
-    return ({
-        display: 'flex',
-        padding: 16,
-        alignItems: 'center',
-        gap: 78,
-        alignSelf: 'stretch',
-        width: '100%',
-        flex: '1 0 0',
-        justifyContent: 'center',
-        flexDirection: 'column',
-        borderRadius: '100px !important',
-        border: `1px solid ${((_a = theme.palette.secondary) === null || _a === void 0 ? void 0 : _a.main) || '#f00'} !important`,
-        color: `${((_b = theme.palette.secondary) === null || _b === void 0 ? void 0 : _b.main) || '#f00'} !important`,
-    });
-});
-const DivLogoutBtnWrapper = styled('div')(({ theme }) => ({
-    margin: 16,
-}));
-const AnchorLink$1 = styled('a')(({ theme }) => ({
-    color: 'inherit',
-    '&:hover': {
-        color: 'inherit',
-    },
-}));
-const StyledButton$1 = styled(Button$1)(({ theme }) => {
-    var _a, _b, _c, _d;
-    return ({
-        alignSelf: 'start',
-        backgroundColor: (_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,
-        color: ((_d = (_c = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _c === void 0 ? void 0 : _c.common) === null || _d === void 0 ? void 0 : _d.white) || '#fff',
-        height: '40px',
-        borderRadius: '100px',
-        padding: '10px 24px',
-    });
-});
-const StyledButtonBanner = styled(Button$1)(({ theme }) => ({
-    alignSelf: 'start',
-    height: '40px',
-    borderRadius: '100px',
-    padding: '10px 24px',
-}));
-const TypographyBtnText = styled(Typography)(({ theme }) => {
-    var _a, _b;
-    return ({
-        color: ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _a === void 0 ? void 0 : _a.common) === null || _b === void 0 ? void 0 : _b.white) || '#fff',
-        textTransform: 'none',
-    });
-});
-
-/**
- * Header component with tenant theme support and responsive navigation
- *
- * @example
- * ```tsx
- * <Header
- *   logo={logoSrc}
- *   navigationLinks={navLinks}
- *   languages={languageOptions}
- *   currentLocale="en"
- *   onLogoClick={() => history.push('/')}
- *   onLoginClick={() => setShowLoginModal(true)}
- * />
- * ```
- */
-function Header$1({ logo, alternateLogo, showAlternateLogo = false, navigationLinks, languages, currentLocale, currentLang, userToken, userFirstName, isMobile: propIsMobile, scrolled = false, isPartnershipPageMobileView = false, isPartnershipPagePCView = false, isSeoPageView = false, showGetQuoteButton = false, bannerData, ctaData, host = '', welcomeMessage, formatMessage = (descriptor) => descriptor.id, menuItems, userProfileComponent, onLogoClick, onProductMenuClick, onLanguageChange, onLoginClick, onSignupClick, onLogoutClick, onPartnershipClick, onAboutUsClick, onBlogClick, onMyProfileClick, onGetQuoteClick, onPartnershipCTAClick, }) {
-    var _a, _b;
-    const tenantTheme = useTenantTheme();
-    tenantTheme === null || tenantTheme === void 0 ? void 0 : tenantTheme.theme;
-    const muiTheme = useTheme();
-    const themeBreakpoint = useMediaQuery((_a = muiTheme === null || muiTheme === void 0 ? void 0 : muiTheme.breakpoints) === null || _a === void 0 ? void 0 : _a.down('md'));
-    const isMobile = propIsMobile !== undefined ? propIsMobile : themeBreakpoint;
-    const [anchorElNav, setAnchorElNav] = React.useState(null);
-    const [anchorElLanguage, setAnchorElLanguage] = React.useState(null);
-    const [anchorElUserMenu, setAnchorElUserMenu] = React.useState(null);
-    const shouldShowContent = (!isPartnershipPagePCView || (isPartnershipPagePCView && !scrolled)) &&
-        (!isSeoPageView || (isSeoPageView && !scrolled));
-    const firstName1stLetter = ((_b = userFirstName === null || userFirstName === void 0 ? void 0 : userFirstName.trim()) === null || _b === void 0 ? void 0 : _b.slice(0, 1)) || '';
-    const handleOpenNavMenu = (event) => {
-        setAnchorElNav(event.currentTarget);
-    };
-    const handleOpenLanguageMenu = (event) => {
-        setAnchorElLanguage(event.currentTarget);
-    };
-    const handleCloseNavMenu = () => {
-        setAnchorElNav(null);
-    };
-    const handleCloseLanguageMenu = () => {
-        setAnchorElLanguage(null);
-    };
-    const handleOpenUserMenu = (event) => {
-        setAnchorElUserMenu(event.currentTarget);
-    };
-    const handleCloseUserMenu = () => {
-        setAnchorElUserMenu(null);
-    };
-    const displayLogo = showAlternateLogo && alternateLogo ? alternateLogo : logo;
-    return (jsx(StyledAppBar$1, Object.assign({ ispartnershippagemobileview: isPartnershipPageMobileView, scrolled: scrolled }, { children: jsx(ResponsiveB2CLayout, { children: jsx(StyledContainer, Object.assign({ ispartnershippagemobileview: isPartnershipPageMobileView, scrolled: scrolled, maxWidth: "xl" }, { children: jsxs(Toolbar, Object.assign({ disableGutters: true }, { children: [jsx("a", Object.assign({ href: host || '#', onClick: (e) => {
-                                e === null || e === void 0 ? void 0 : e.preventDefault();
-                                onLogoClick === null || onLogoClick === void 0 ? void 0 : onLogoClick();
-                            }, style: Object.assign({ marginRight: isMobile ? 2 : 5, display: 'flex', flexGrow: isMobile ? 1 : 0, fontFamily: 'monospace', fontWeight: 700, letterSpacing: '.3rem', color: 'inherit' }, (isMobile && { height: '44px', width: '73.3px' })) }, { children: jsx(TypographyLogo, Object.assign({ variant: "h6", noWrap: true, sx: {
-                                    mr: isMobile ? 2 : 5,
-                                    display: { xs: 'flex', md: 'flex' },
-                                    flexGrow: isMobile ? 1 : 0,
-                                    fontFamily: 'monospace',
-                                    fontWeight: 700,
-                                    letterSpacing: '.3rem',
-                                    color: 'inherit',
-                                    textDecoration: 'none',
-                                } }, { children: jsx("img", { src: displayLogo, alt: "Logo", style: Object.assign({}, (isMobile && { height: '32px', width: '119px' })), height: isMobile ? '32px' : '57px', width: isMobile ? '119px' : '93.36px' }) })) })), !isMobile && (jsxs(Fragment, { children: [shouldShowContent && (jsxs(Box, Object.assign({ sx: {
-                                        flexGrow: 1,
-                                        display: { xs: 'none', md: 'flex', gap: 40 },
-                                    } }, { children: [jsxs(ButtonDesktopMenu, Object.assign({ onClick: handleOpenNavMenu, sx: { my: 2, textTransform: 'capitalize' }, "data-testid": "productNavigationMenu" }, { children: [jsx(Typography, Object.assign({ variant: "h6" }, { children: formatMessage({ id: 'Products' }) })), jsx(Icon, { component: ArrowDropDownIcon })] }), "product"), (menuItems === null || menuItems === void 0 ? void 0 : menuItems.partnership) && (jsx(ButtonDesktopMenu, Object.assign({ onClick: onPartnershipClick, sx: { my: 2, textTransform: 'capitalize' } }, { children: jsx(Typography, Object.assign({ variant: "h6" }, { children: jsx(AnchorLink$1, Object.assign({ href: `${host}${menuItems.partnership.route}`, onClick: (e) => e === null || e === void 0 ? void 0 : e.preventDefault() }, { children: menuItems.partnership.label })) })) }), "partnership")), (menuItems === null || menuItems === void 0 ? void 0 : menuItems.aboutUs) && (jsx(ButtonDesktopMenu, Object.assign({ onClick: onAboutUsClick, sx: { my: 2, textTransform: 'capitalize' } }, { children: jsx(Typography, Object.assign({ variant: "h6" }, { children: jsx(AnchorLinks, Object.assign({ href: `${host}${menuItems.aboutUs.route}`, onClick: (e) => e === null || e === void 0 ? void 0 : e.preventDefault() }, { children: menuItems.aboutUs.label })) })) }), "aboutus")), (menuItems === null || menuItems === void 0 ? void 0 : menuItems.blog) && (jsx(ButtonDesktopMenu, Object.assign({ onClick: onBlogClick, sx: { my: 2, textTransform: 'capitalize' } }, { children: jsx(Typography, Object.assign({ variant: "h6" }, { children: jsx(AnchorLink$1, Object.assign({ href: menuItems.blog.url, onClick: (e) => e === null || e === void 0 ? void 0 : e.preventDefault() }, { children: menuItems.blog.label })) })) }), "blog"))] }))), jsxs(Box, Object.assign({ sx: {
-                                        flexGrow: 1,
-                                        display: {
-                                            xs: 'none',
-                                            md: 'flex',
-                                            gap: 40,
-                                            justifyContent: 'flex-end',
-                                        },
-                                    } }, { 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$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: {
-                                        vertical: 'bottom',
-                                        horizontal: 'left',
-                                    }, keepMounted: true, transformOrigin: {
-                                        vertical: 'top',
-                                        horizontal: 'left',
-                                    }, open: Boolean(anchorElNav), onClose: handleCloseNavMenu, sx: {
-                                        display: { xs: 'none', md: 'block' },
-                                    } }, { children: jsx(DivProductListing, { children: navigationLinks.map(({ key, name, icon }) => (jsxs(StyledMenuItem, Object.assign({ onClick: () => {
-                                                onProductMenuClick === null || onProductMenuClick === void 0 ? void 0 : onProductMenuClick(key);
-                                                handleCloseNavMenu();
-                                            }, "data-testid": `product-navigation-${key}` }, { children: [jsx(SpanImageWrapper, { children: jsx(ImageProductIcon, { src: icon, width: 18, height: 18, alt: name }) }), jsx(Typography, Object.assign({ variant: "body1", textAlign: "center" }, { children: jsx(AnchorLinks, Object.assign({ href: `#${key}`, onClick: (e) => e === null || e === void 0 ? void 0 : e.preventDefault() }, { children: formatMessage({ id: `${name}` }) })) }))] }), key))) }) })), jsx(StyledMenu, Object.assign({ id: "language-menu", anchorEl: anchorElLanguage, anchorOrigin: {
-                                        vertical: 'bottom',
-                                        horizontal: 'left',
-                                    }, keepMounted: true, transformOrigin: {
-                                        vertical: 'top',
-                                        horizontal: 'left',
-                                    }, open: Boolean(anchorElLanguage), onClose: handleCloseLanguageMenu, sx: {
-                                        display: { xs: 'none', md: 'block' },
-                                    } }, { children: jsx(DivProductListing, { children: languages.map(({ value, locale, label }) => (jsx(StyledMenuItem, Object.assign({ onClick: () => {
-                                                onLanguageChange === null || onLanguageChange === void 0 ? void 0 : onLanguageChange(locale, value);
-                                                handleCloseLanguageMenu();
-                                            }, "data-testid": `lang-${locale}` }, { children: jsx(Typography, Object.assign({ variant: "body1", textAlign: "center" }, { children: label })) }), value))) }) })), jsx(StyledMenu, Object.assign({ id: "user-menu", anchorEl: anchorElUserMenu, anchorOrigin: {
-                                        vertical: 'bottom',
-                                        horizontal: 'left',
-                                    }, keepMounted: true, transformOrigin: {
-                                        vertical: 'top',
-                                        horizontal: 'left',
-                                    }, open: Boolean(anchorElUserMenu), onClose: handleCloseUserMenu, sx: {
-                                        display: { xs: 'none', md: 'block' },
-                                    } }, { children: jsxs(DivProductListing, { children: [jsx(StyledMenuItem, Object.assign({ onClick: () => {
-                                                    onMyProfileClick === null || onMyProfileClick === void 0 ? void 0 : onMyProfileClick();
-                                                    handleCloseUserMenu();
-                                                } }, { children: jsx(Typography, Object.assign({ variant: "body1", textAlign: "center" }, { children: formatMessage({ id: `My profile` }) })) }), "myProfile"), jsx(StyledMenuItemDesktop, Object.assign({ onClick: () => {
-                                                    onLogoutClick === null || onLogoutClick === void 0 ? void 0 : onLogoutClick();
-                                                    handleCloseUserMenu();
-                                                } }, { children: jsx(Typography, Object.assign({ variant: "body1", textAlign: "center" }, { children: formatMessage({ id: `Logout` }) })) }), "logout")] }) }))] })), isMobile && (jsxs(Box, Object.assign({ sx: { flexGrow: 0, display: { xs: 'flex', md: 'none' } } }, { children: [jsx(IconButton, Object.assign({ size: "large", "aria-label": "account of current user", "aria-controls": "menu-appbar", "aria-haspopup": "true", "aria-labelledby": "menu icon", onClick: (e) => {
-                                        if (isPartnershipPageMobileView && scrolled) {
-                                            onPartnershipCTAClick === null || onPartnershipCTAClick === void 0 ? void 0 : onPartnershipCTAClick();
-                                        }
-                                        else if (isSeoPageView && scrolled) {
-                                            onGetQuoteClick === null || onGetQuoteClick === void 0 ? void 0 : onGetQuoteClick();
-                                        }
-                                        else {
-                                            handleOpenNavMenu(e);
-                                        }
-                                    }, color: "inherit", sx: Object.assign({}, (isPartnershipPageMobileView &&
-                                        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,
-                                                textTransform: 'none',
-                                            }, variant: "body1" }, { children: bannerData === null || bannerData === void 0 ? void 0 : bannerData.ctaText })) }))) : userToken ? (jsx(StyledAvatarUserIcon, Object.assign({ "data-testid": "user-profile-avatar" }, { children: firstName1stLetter }))) : (jsx(StyledMenuIcon, { ispartnershippagemobileview: isPartnershipPageMobileView, scrolled: scrolled })) })), jsxs(StyledDrawer$3, Object.assign({ id: "menu-appbar", anchor: "top", keepMounted: true, open: Boolean(anchorElNav), onClose: handleCloseNavMenu, sx: {
-                                        display: { xs: 'block', md: 'none' },
-                                        width: '100%',
-                                        left: 0,
-                                    } }, { children: [jsxs(DivLogoWrapper, { children: [jsx(DivLogo, { children: jsx("img", { src: logo, alt: "logo", width: "100%", height: "100%" }) }), jsx(DivCrossIconWrapper, { children: jsx(StyledCloseIconBtn, Object.assign({ size: "large", "aria-label": "close menu", "aria-controls": "menu-appbar", "aria-haspopup": "true", onClick: handleCloseNavMenu, color: "inherit" }, { children: jsx(CloseIcon, {}) })) })] }), userToken ? (userProfileComponent) : (jsxs(DivLoginActionContainer, { children: [jsx(Typography, Object.assign({ variant: "h6" }, { children: welcomeMessage || formatMessage({ id: 'Welcome' }) })), jsxs(DivButtonWrapper, { children: [jsx(ButtonAuth, Object.assign({ color: "primary", variant: "outlined", onClick: () => {
-                                                                onLoginClick === null || onLoginClick === void 0 ? void 0 : onLoginClick();
-                                                                handleCloseNavMenu();
-                                                            }, "data-testid": "headerLogin" }, { children: jsx(TypographyAuth, Object.assign({ variant: "body1" }, { children: formatMessage({ id: 'Log in' }) })) })), jsx(ButtonAuth, Object.assign({ color: "primary", variant: "contained", onClick: () => {
-                                                                onSignupClick === null || onSignupClick === void 0 ? void 0 : onSignupClick();
-                                                                handleCloseNavMenu();
-                                                            } }, { children: jsx(TypographyAuth, Object.assign({ variant: "body1" }, { children: formatMessage({ id: 'Sign up' }) })) }))] })] })), jsx(DivProductListing, { children: navigationLinks.map(({ key, name, icon }) => (jsxs(StyledMenuItem, Object.assign({ onClick: () => {
-                                                    onProductMenuClick === null || onProductMenuClick === void 0 ? void 0 : onProductMenuClick(key);
-                                                    handleCloseNavMenu();
-                                                }, "data-testid": `product-navigation-${key}` }, { children: [jsx(SpanImageWrapper, { children: jsx(ImageProductIcon, { src: icon, width: 18, height: 18, alt: name }) }), jsx(Typography, Object.assign({ variant: "body1", textAlign: "center" }, { children: formatMessage({ id: `${name}` }) }))] }), key))) }), jsxs(DivCommonMenus, { children: [userToken && (jsx(MenuItemOtherLinks, Object.assign({ onClick: () => {
-                                                        handleCloseNavMenu();
-                                                        onMyProfileClick === null || onMyProfileClick === void 0 ? void 0 : onMyProfileClick();
-                                                    } }, { children: jsx(Typography, Object.assign({ variant: "body1", textAlign: "center" }, { children: formatMessage({ id: 'My Policy' }) })) }))), (menuItems === null || menuItems === void 0 ? void 0 : menuItems.blog) && (jsx(MenuItemOtherLinks, Object.assign({ onClick: onBlogClick }, { children: jsx(Typography, Object.assign({ variant: "body1", textAlign: "center" }, { children: jsx(AnchorLink$1, Object.assign({ href: menuItems.blog.url, onClick: (e) => e === null || e === void 0 ? void 0 : e.preventDefault() }, { children: menuItems.blog.label })) })) }))), (menuItems === null || menuItems === void 0 ? void 0 : menuItems.partnership) && (jsx(MenuItemOtherLinks, Object.assign({ onClick: () => {
-                                                        handleCloseNavMenu();
-                                                        onPartnershipClick === null || onPartnershipClick === void 0 ? void 0 : onPartnershipClick();
-                                                    } }, { children: jsx(Typography, Object.assign({ variant: "body1", textAlign: "center" }, { children: menuItems.partnership.label })) }))), (menuItems === null || menuItems === void 0 ? void 0 : menuItems.aboutUs) && (jsx(MenuItemOtherLinks, Object.assign({ onClick: () => {
-                                                        handleCloseNavMenu();
-                                                        onAboutUsClick === null || onAboutUsClick === void 0 ? void 0 : onAboutUsClick();
-                                                    } }, { children: jsx(Typography, Object.assign({ variant: "body1", textAlign: "center" }, { children: menuItems.aboutUs.label })) }))), jsxs(MenuItemOtherLinks, { children: [jsx(Typography, Object.assign({ variant: "body1", textAlign: "center" }, { children: formatMessage({ id: 'Language' }) })), jsx(RadioGroup, Object.assign({ row: true, "aria-labelledby": "language-selector", name: "language-selector", onChange: (e) => {
-                                                                const value = e.target.value;
-                                                                const selectedLang = languages.find((lang) => lang.locale === value);
-                                                                if (selectedLang) {
-                                                                    onLanguageChange === null || onLanguageChange === void 0 ? void 0 : onLanguageChange(selectedLang.locale, selectedLang.value);
-                                                                }
-                                                            }, defaultValue: currentLocale, value: currentLocale }, { children: languages.map((lang) => (jsx(StyledFormControlLabel, { value: lang.locale, control: jsx(Radio, {}), label: lang.label, "data-testid": `lang-${lang.locale}` }, lang.locale))) }))] })] }), isMobile && userToken && (jsx(DivLogoutBtnWrapper, { children: jsx(ButtonLogout, Object.assign({ onClick: onLogoutClick }, { children: formatMessage({ id: 'Logout' }) })) }))] }))] })))] })) })) }) })));
-}
-
-const StyledAppBar = styled(AppBar$1)(({ theme }) => ({
-    backgroundColor: '#FFFFFF',
-    boxShadow: '0px 2px 20px 4px rgba(0, 0, 0, 0.14)',
-    zIndex: theme.zIndex.drawer + 1,
-}));
-const StyledToolbar = styled(Toolbar)(({ theme }) => ({
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    padding: '12px 16px',
-    minHeight: '64px !important',
-    [theme.breakpoints.down('md')]: {
-        minHeight: '56px !important',
-        padding: '12px 16px',
-    },
-}));
-const LogoContainer$1 = styled('div')(({ theme }) => ({
-    display: 'flex',
-    alignItems: 'center',
-    cursor: 'pointer',
-    height: '32px',
-}));
-const LogoImage = styled('img')(({ theme }) => ({
-    height: '32px',
-    width: 'auto',
-    objectFit: 'contain',
-}));
-const MenuIconButton = styled(IconButton)(({ theme }) => ({
-    padding: '6px',
-    borderRadius: '25px',
-    width: '40px',
-    height: '40px',
-    '& .MuiSvgIcon-root': {
-        color: '#000000',
-        fontSize: '24px',
-    },
-}));
-const StyledDrawer$2 = styled(Drawer)(({ theme }) => ({
-    '& .MuiDrawer-paper': {
-        backgroundColor: '#FFFFFF',
-        boxSizing: 'border-box',
-    },
-}));
-const DrawerHeader$2 = styled(Box)(({ theme }) => ({
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    padding: '12px 16px',
-    minHeight: '64px',
-}));
-const DrawerLogoContainer = styled('div')(({ theme }) => ({
-    display: 'flex',
-    alignItems: 'center',
-    cursor: 'pointer',
-    height: '32px',
-}));
-const CloseIconButton = styled(IconButton)(({ theme }) => ({
-    padding: '6px',
-    '& .MuiSvgIcon-root': {
-        color: '#000000',
-        fontSize: '24px',
-    },
-}));
-const DrawerContent$2 = styled(Box)(({ theme }) => ({
-    flex: 1,
-    overflowY: 'auto',
-    paddingBottom: theme.spacing(2),
-}));
-styled(Box)(({ theme }) => ({
-    padding: theme.spacing(2),
-    borderTop: `1px solid ${theme.palette.divider}`,
-}));
-
-/**
- * NewHeader component - simplified design based on Figma
- *
- * @example
- * ```tsx
- * <NewHeader
- *   logo={logoSrc}
- *   navigationLinks={navLinks}
- *   onLogoClick={() => history.push('/')}
- * />
- * ```
- */
-function NewHeader({ logo: propLogo, navigationLinks = [], additionalMenuSections = [], isMobile: propIsMobile, onLogoClick, onMenuOpen, onMenuClose, customDrawerContent, formatMessage = (descriptor) => descriptor.id, }) {
-    var _a;
-    const tenantTheme = useTenantTheme();
-    const theme = tenantTheme === null || tenantTheme === void 0 ? void 0 : tenantTheme.theme;
-    const muiTheme = useTheme();
-    const themeBreakpoint = useMediaQuery((_a = muiTheme === null || muiTheme === void 0 ? void 0 : muiTheme.breakpoints) === null || _a === void 0 ? void 0 : _a.down('md'));
-    const isMobile = propIsMobile !== undefined ? propIsMobile : themeBreakpoint;
-    // Use prop logo if provided, otherwise try to get from theme
-    // Fallback to empty string to avoid SSR errors
-    const logo = propLogo || (theme === null || theme === void 0 ? void 0 : theme.logo) || '';
-    const [drawerOpen, setDrawerOpen] = React.useState(false);
-    const handleDrawerOpen = () => {
-        setDrawerOpen(true);
-        onMenuOpen === null || onMenuOpen === void 0 ? void 0 : onMenuOpen();
-    };
-    const handleDrawerClose = () => {
-        setDrawerOpen(false);
-        onMenuClose === null || onMenuClose === void 0 ? void 0 : onMenuClose();
-    };
-    const handleLogoClick = (e) => {
-        e.preventDefault();
-        onLogoClick === null || onLogoClick === void 0 ? void 0 : onLogoClick();
-    };
-    const handleMenuItemClick = (item) => {
-        var _a;
-        (_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$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)))] })] }))) }))] }));
-}
-
-const DivFooter = styled('div')(({ theme }) => ({
-    backgroundColor: '#424242',
-    padding: '20px 16px',
-    '@media (min-width: 769px)': {
-        padding: '70px 0px',
-    },
-    anchorLinks: {
-        color: 'inherit',
-        '&:hover': {
-            color: 'inherit',
-        },
-    },
-}));
-const DivFooterConterResponsiveLayout = styled('div')(({ theme }) => ({
-    color: '#fff',
-    [theme.breakpoints.up(1025)]: {
-        minWidth: '1128px',
-        maxWidth: '1128px',
-        margin: '0 auto',
-    },
-}));
-const FooterHiddenContent = styled('div')(({ theme, simplifiedLayout }) => simplifiedLayout ? { display: 'none' } : { display: 'flex' });
-const DivIglooIntro = styled('div')(({ theme }) => {
-    var _a;
-    return ({
-        display: 'flex',
-        flexDirection: 'column',
-        gap: '24px',
-        color: ((_a = theme === null || theme === void 0 ? void 0 : theme.palette.common) === null || _a === void 0 ? void 0 : _a.white) || '#fff',
-        '@media (min-width: 769px)': {
-            width: 320,
-            marginRight: 194,
-        },
-    });
-});
-const DivSocial = styled('div')(({ theme }) => ({
-    display: 'flex',
-    alignItems: 'center',
-    margin: '0 auto',
-    columnGap: '32px',
-    flexDirection: 'row',
-    '@media (min-width: 769px)': {
-        margin: 'initial',
-    },
-}));
-const ButtonIcon = styled(Button$1)(({ theme }) => {
-    var _a;
-    return ({
-        color: ((_a = theme.palette.common) === null || _a === void 0 ? void 0 : _a.white) || '#fff',
-        padding: '0 !important',
-        minWidth: 'auto !important',
-    });
-});
-const TypographyIntro = styled(Typography)(({ theme }) => ({
-    textAlign: 'center',
-    color: `#fff !important`,
-    '@media (min-width: 769px)': {
-        textAlign: 'left',
-    },
-}));
-const TypographyAddressFooter = styled(Typography)(({ theme }) => ({
-    marginTop: 16,
-    textAlign: 'center',
-    color: '#fff',
-    '@media (min-width: 769px)': {
-        textAlign: 'left',
-    },
-}));
-const DivLogos = styled('div')(({ theme }) => ({
-    display: 'flex',
-    flexDirection: 'column',
-    gap: 16,
-    alignItems: 'center',
-    marginTop: 16,
-    '@media (min-width: 769px)': {
-        width: '100%',
-        marginTop: 0,
-        gap: 'initial',
-        alignItems: 'baseline',
-    },
-}));
-const DivFirstRow = styled('div')(({ theme }) => ({
-    display: 'flex',
-    flexDirection: 'row',
-    gap: 16,
-}));
-const ButtonOjkLink = styled(Button$1)(({ theme }) => ({
-    display: 'flex',
-    justifyContent: 'flex-start',
-    '@media (min-width: 769px)': {
-        display: 'flex !important',
-        justifyContent: 'flex-start !important ',
-    },
-}));
-const ImageOjkLicense = styled('img')(({ theme }) => ({
-    alignSelf: 'flex-start',
-    height: 36,
-}));
-const ButtonSolisoustamaLink = styled(Button$1)(({ theme }) => ({
-    display: 'flex',
-    justifyContent: 'flex-start',
-}));
-const ImageSolisoustama = styled('img')(({ theme }) => ({
-    height: 'auto',
-}));
-const DivLinks = styled('div')(({ theme }) => ({
-    display: 'flex',
-    flex: 1,
-    alignItems: 'center',
-    gap: 16,
-    justifyContent: 'center',
-    '@media (min-width: 769px)': {
-        flex: '1 1',
-        alignItems: 'normal',
-    },
-}));
-const DivSection = styled('div')(({ theme }) => ({
-    display: 'flex',
-    flexDirection: 'column',
-    gap: 16,
-    flex: 1,
-    alignItems: 'flex-start',
-    '@media (min-width: 769px)': {
-        gap: 24,
-        '&:not(:first-of-type)': {
-            marginLeft: 194,
-        },
-    },
-}));
-const ButtonBottomLink = styled(Button$1)(({ theme }) => ({
-    color: '#fff !important',
-    textTransform: 'capitalize',
-    '@media (min-width: 769px)': {
-        padding: '0 !important',
-        textAlign: 'left !important',
-        minWidth: 'auto !important',
-    },
-}));
-const StyledDivider = styled(Divider)(({ theme }) => ({
-    margin: '24px 0 16px !important',
-    borderColor: '#5F5E62 !important',
-}));
-const DivBottom = styled('div')(({ theme }) => ({
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-}));
-const DivSep = styled('div')(({ theme }) => ({
-    width: '1px',
-    height: 10,
-    borderRadius: '1px',
-    backgroundColor: '#fff',
-}));
-const AnchorLink = styled('a')(({ theme }) => ({
-    color: 'inherit',
-    '&:hover': {
-        color: 'inherit',
-    },
-}));
-
-/**
- * Footer component with tenant theme support
- *
- * @example
- * ```tsx
- * <Footer
- *   introText="Company introduction..."
- *   socialLinks={socialMediaLinks}
- *   licenseImages={licenses}
- *   navigationLinks={footerNavLinks}
- *   currentLocale="en"
- * />
- * ```
- */
-function Footer({ simplifiedLayout = false, introText, addressText, socialLinks, licenseImages, poweredByImage, navigationLinks = [], currentLocale, host = '', isMobile: propIsMobile, onLinkClick, onSocialClick, onPrivacyPolicyClick, onTermsOfServiceClick, formatMessage = (descriptor) => descriptor.id, }) {
-    var _a;
-    const tenantTheme = useTenantTheme();
-    tenantTheme === null || tenantTheme === void 0 ? void 0 : tenantTheme.theme;
-    const muiTheme = useTheme();
-    const themeBreakpoint = useMediaQuery((_a = muiTheme === null || muiTheme === void 0 ? void 0 : muiTheme.breakpoints) === null || _a === void 0 ? void 0 : _a.down('md'));
-    const isMobile = propIsMobile !== undefined ? propIsMobile : themeBreakpoint;
-    return (jsx(DivFooter, { children: jsxs(DivFooterConterResponsiveLayout, { children: [jsxs(FooterHiddenContent, Object.assign({ simplifiedLayout: simplifiedLayout }, { children: [jsxs(DivIglooIntro, { children: [isMobile && (jsx(DivSocial, { children: socialLinks.map((social) => (jsx(ButtonIcon, Object.assign({ onClick: () => onSocialClick === null || onSocialClick === void 0 ? void 0 : onSocialClick(social.platform, social.url), "aria-label": social.ariaLabel || social.platform }, { children: jsx("img", { src: social.icon, alt: social.platform, loading: "lazy", height: "24px", width: "24px" }) }), social.platform))) })), jsx(TypographyIntro, Object.assign({ variant: "body2" }, { children: formatMessage({ id: introText }) })), addressText && (jsx(TypographyAddressFooter, Object.assign({ variant: "body2" }, { children: addressText }))), jsxs(DivLogos, { children: [jsx(DivFirstRow, { children: licenseImages.map((license, index) => (jsx(ButtonOjkLink, Object.assign({ onClick: () => license.url && window.open(license.url), "aria-label": license.ariaLabel || license.alt }, { children: jsx(ImageOjkLicense, { src: license.src, alt: license.alt, width: license.width, height: license.height, loading: "lazy" }) }), index))) }), poweredByImage && (jsx(ButtonSolisoustamaLink, Object.assign({ "aria-label": poweredByImage.ariaLabel || 'Powered by' }, { children: jsx(ImageSolisoustama, { src: poweredByImage.src, alt: poweredByImage.alt, width: poweredByImage.width, height: poweredByImage.height, loading: "lazy" }) })))] })] }), !isMobile && (jsx(DivLinks, { children: navigationLinks === null || navigationLinks === void 0 ? void 0 : navigationLinks.map((items, index) => (jsxs(DivSection, { children: [items === null || items === void 0 ? void 0 : items.map((link, _index) => {
-                                        var _a, _b, _c;
-                                        const isExternalURL = (_c = (_b = (_a = link.outerHref) === null || _a === void 0 ? void 0 : _a.split(':')) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.includes('http');
-                                        const anchorLinkOuterRef = isExternalURL
-                                            ? link.outerHref || ''
-                                            : `${host}${link.outerHref}`;
-                                        const anchorLinkInnerRef = `${host}${link.innerHref}`;
-                                        return (jsx(ButtonBottomLink, Object.assign({ onClick: () => {
-                                                onLinkClick === null || onLinkClick === void 0 ? void 0 : onLinkClick(link);
-                                            } }, { children: jsx(Typography, Object.assign({ variant: "body1" }, { children: jsx(AnchorLink, Object.assign({ href: link.innerHref ? anchorLinkInnerRef : anchorLinkOuterRef || '', onClick: (e) => e === null || e === void 0 ? void 0 : e.preventDefault() }, { children: formatMessage({ id: `${link.label}` }) })) })) }), _index));
-                                    }), index === navigationLinks.length - 1 && (jsxs(Fragment, { children: [jsx(ButtonBottomLink, Object.assign({ onClick: onPrivacyPolicyClick }, { children: jsx(Typography, Object.assign({ variant: "body1" }, { children: jsx(AnchorLink, Object.assign({ href: `${host}/${currentLocale}/terms/privacypolicy`, onClick: (e) => e === null || e === void 0 ? void 0 : e.preventDefault() }, { children: formatMessage({ id: 'Privacy Policy' }) })) })) })), jsx(ButtonBottomLink, Object.assign({ onClick: onTermsOfServiceClick }, { children: jsx(Typography, Object.assign({ variant: "body1" }, { children: jsx(AnchorLink, Object.assign({ href: `${host}/${currentLocale}/terms/termsofservice`, onClick: (e) => e === null || e === void 0 ? void 0 : e.preventDefault() }, { children: formatMessage({ id: 'Terms of Service' }) })) })) })), jsx(DivSocial, { children: socialLinks.map((social) => (jsx(ButtonIcon, Object.assign({ onClick: () => onSocialClick === null || onSocialClick === void 0 ? void 0 : onSocialClick(social.platform, social.url), "aria-label": social.ariaLabel || social.platform }, { children: jsx(AnchorLink, Object.assign({ href: social.url, onClick: (e) => e === null || e === void 0 ? void 0 : e.preventDefault() }, { children: jsx("img", { src: social.icon, alt: social.platform, height: isMobile ? '24' : '28', width: isMobile ? '24' : '28', loading: "lazy" }) })) }), social.platform))) })] }))] }, index))) }))] })), isMobile && jsx(StyledDivider, {}), isMobile && (jsx(DivBottom, { children: jsxs(DivLinks, { children: [jsx("div", Object.assign({ onClick: onPrivacyPolicyClick, style: { cursor: 'pointer' } }, { children: jsx(Typography, Object.assign({ variant: "body2" }, { children: jsx(AnchorLink, Object.assign({ href: `${host}/${currentLocale}/terms/privacypolicy`, onClick: (e) => e === null || e === void 0 ? void 0 : e.preventDefault() }, { children: formatMessage({ id: 'Privacy Policy' }) })) })) })), jsx(DivSep, {}), jsx("div", Object.assign({ onClick: onTermsOfServiceClick, style: { cursor: 'pointer' } }, { children: jsx(Typography, Object.assign({ variant: "body2" }, { children: jsx(AnchorLink, Object.assign({ href: `${host}/${currentLocale}/terms/termsofservice`, onClick: (e) => e === null || e === void 0 ? void 0 : e.preventDefault() }, { children: formatMessage({ id: 'Terms of Service' }) })) })) }))] }) }))] }) }));
-}
-
-const StyledDrawer$1 = styled(Drawer)(({ theme }) => ({
-    zIndex: '1300 !important',
-    '& .MuiDrawer-root': {
-        zIndex: 1300,
-    },
-    '& .MuiDrawer-paper': {
-        backgroundColor: '#FFFFFF',
-        boxSizing: 'border-box',
-        overflow: 'hidden',
-        zIndex: 1300,
-    },
-    '& .MuiBackdrop-root': {
-        zIndex: 1299,
-    },
-}));
-const DrawerHeader$1 = styled(Box)(({ theme }) => ({
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'flex-start',
-    padding: '16px',
-    minHeight: '56px',
-}));
-const DrawerContent$1 = styled(Box)(({ theme }) => ({
-    flex: 1,
-    overflowY: 'auto',
-    paddingBottom: theme.spacing(2),
-}));
-const DrawerFooter = styled(Box)(({ theme }) => ({
-    padding: '16px',
-    backgroundColor: '#FFFFFF',
-    borderTop: 'none',
-    boxShadow: '0px -2px 8px rgba(0, 0, 0, 0.08)',
-}));
-styled(Button$1)(({ theme }) => ({
-    minWidth: 'auto',
-    padding: 0,
-}));
-const HeaderSection = styled(Box)(({ theme }) => ({
-    backgroundColor: '#FFFFFF',
-    padding: '16px',
-    display: 'flex',
-    flexDirection: 'column',
-    gap: '12px',
-}));
-const CategoryIcon = styled(Box)(({ theme }) => ({
-    width: '32px',
-    height: '32px',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-}));
-const TitleText = styled(Typography)(({ theme }) => ({
-    fontFamily: '"Montserrat", sans-serif',
-    fontWeight: 700,
-    fontSize: '20px',
-    lineHeight: '28px',
-    color: '#13131B',
-}));
-const SubtitleText = styled(Typography)(({ theme }) => ({
-    fontFamily: '"Montserrat", sans-serif',
-    fontWeight: 400,
-    fontSize: '14px',
-    lineHeight: '18px',
-    color: '#5F5E62',
-}));
-const FooterButtons = styled(Box)(({ theme }) => ({
-    display: 'flex',
-    flexDirection: 'column',
-    gap: '16px',
-    width: '100%',
-}));
-// Base button styles - colors will be injected via sx prop from component
-const PrimaryButton = styled(Button$1)(({ theme }) => ({
-    color: '#FFFFFF',
-    borderRadius: '8px',
-    height: '48px',
-    textTransform: 'none',
-    fontFamily: '"Montserrat", sans-serif',
-    fontWeight: 500,
-    fontSize: '14px',
-    lineHeight: '18px',
-    '&:disabled': {
-        backgroundColor: '#C8C5CA',
-        color: '#FFFFFF',
-    },
-}));
-const SecondaryButton = styled(Button$1)(({ theme }) => ({
-    borderRadius: '8px',
-    height: '40px',
-    textTransform: 'none',
-    fontFamily: '"Montserrat", sans-serif',
-    fontWeight: 500,
-    fontSize: '14px',
-    lineHeight: '18px',
-}));
-
-/**
- * RecommendationsDrawer - Mobile drawer for recommendations and forms
- *
- * @example
- * ```tsx
- * <RecommendationsDrawer
- *   open={isOpen}
- *   onClose={handleClose}
- *   title="Personalize Your Plan"
- *   subtitle="Answer a few questions"
- *   primaryButtonText="Next"
- *   onPrimaryAction={handleNext}
- * >
- *   <QuestionSection question="What is your budget?" />
- * </RecommendationsDrawer>
- * ```
- */
-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, _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();
-    };
-    const handleBackOrClose = () => {
-        if (showBackButton && onBack) {
-            onBack();
-        }
-        else {
-            onClose();
-        }
-    };
-    return (jsx(StyledDrawer$1, Object.assign({ anchor: "bottom", open: open, onClose: handleClose, PaperProps: {
-            sx: {
-                height: '95vh',
-                borderTopLeftRadius: '16px',
-                borderTopRightRadius: '16px',
-                maxHeight: '95vh',
-            },
-        }, 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, 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 }) => ({
-    zIndex: 1300,
-    '& .MuiDrawer-paper': {
-        borderTopLeftRadius: '8px',
-        borderTopRightRadius: '8px',
-        maxHeight: '90vh',
-    },
-}));
-const DrawerContent = styled$1(Box)({
-    display: 'flex',
-    flexDirection: 'column',
-    width: '100%',
-    backgroundColor: '#ffffff',
-});
-const DrawerHeader = styled$1(Box)({
-    display: 'flex',
-    justifyContent: 'flex-end',
-    alignItems: 'center',
-    padding: '16px 16px 0',
-    backgroundColor: '#ffffff',
-});
-const CloseButtonContainer = styled$1(Box)({
-    width: '24px',
-    height: '24px',
-});
-const Header = styled$1(Box)({
-    display: 'flex',
-    flexDirection: 'column',
-    gap: '6px',
-    padding: '16px',
-    backgroundColor: '#ffffff',
-});
-const HeaderTitle = styled$1(Typography)({
-    fontFamily: 'Montserrat, sans-serif',
-    fontSize: '20px',
-    fontWeight: 700,
-    lineHeight: '28px',
-    color: '#13131b',
-});
-const HeaderSubtitle = styled$1(Typography)({
-    fontFamily: 'Montserrat, sans-serif',
-    fontSize: '14px',
-    fontWeight: 400,
-    lineHeight: '18px',
-    color: 'rgba(0, 0, 0, 0.6)',
-});
-const ProductsContainer = styled$1(Box)({
-    padding: '16px',
-    backgroundColor: '#ffffff',
-});
-const ProductsGrid = styled$1(Box)({
-    display: 'grid',
-    gridTemplateColumns: 'repeat(2, 1fr)',
-    gap: '12px',
-});
-const ProductCard$1 = styled$1(Box)({
-    display: 'flex',
-    flexDirection: 'column',
-    gap: '16px',
-    backgroundColor: '#ffffff',
-    borderRadius: '12px',
-    boxShadow: '0px 2px 10px 0px rgba(0, 0, 0, 0.12)',
-    padding: '16px 12px 12px',
-    height: '168px',
-});
-const ProductInfo$1 = styled$1(Box)({
-    display: 'flex',
-    flexDirection: 'column',
-    gap: '6px',
-    alignItems: 'center',
-    justifyContent: 'center',
-    flex: 1,
-});
-const ProductLogo = styled$1(Box)({
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    padding: '4px',
-});
-const ProductName$1 = styled$1(Typography)({
-    fontFamily: 'Montserrat, sans-serif',
-    fontSize: '14px',
-    fontWeight: 700,
-    lineHeight: '22px',
-    color: '#13131b',
-    textAlign: 'center',
-});
-const ProductType = styled$1(Typography)({
-    fontFamily: 'Montserrat, sans-serif',
-    fontSize: '12px',
-    fontWeight: 400,
-    lineHeight: '16px',
-    color: '#13131b',
-    textAlign: 'center',
-});
-// Base button styles - colors will be injected via sx prop from component
-const ViewPlansButton = styled$1(Button$1)({
-    color: '#ffffff',
-    borderRadius: '8px',
-    height: '36px',
-    textTransform: 'none',
-    fontFamily: 'Montserrat, sans-serif',
-    fontSize: '14px',
-    fontWeight: 500,
-    lineHeight: '18px',
-});
-
-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', }) {
-    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$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$1 = styled(Box)(({ theme }) => ({
-    backgroundColor: '#FFFFFF',
-    padding: '12px 16px',
-    display: 'flex',
-    flexDirection: 'column',
-    gap: '16px',
-    width: '100%',
-}));
-const QuestionHeader = styled(Box)(({ theme }) => ({
-    display: 'flex',
-    flexDirection: 'column',
-    gap: '6px',
-    width: '100%',
-}));
-const QuestionTitle = styled(Typography)(({ theme }) => ({
-    fontFamily: '"Montserrat", sans-serif',
-    fontWeight: 600,
-    fontSize: '14px',
-    lineHeight: '20px',
-    color: '#13131B',
-}));
-const QuestionSubtext = styled(Typography)(({ theme }) => ({
-    fontFamily: '"Montserrat", sans-serif',
-    fontWeight: 400,
-    fontSize: '12px',
-    lineHeight: '16px',
-    color: '#5F5E62',
-}));
-const OptionsContainer$1 = styled(Box)(({ theme }) => ({
-    display: 'flex',
-    flexDirection: 'column',
-    gap: '8px',
-    width: '100%',
-}));
-
-/**
- * QuestionSection - Displays a question with selectable options
- *
- * @example
- * ```tsx
- * <QuestionSection
- *   questionNumber="1"
- *   question="Which plan feels right for you?"
- *   helperText="Select one option"
- *   options={planOptions}
- *   selectedValue={selectedPlan}
- *   onSelect={setSelectedPlan}
- * />
- * ```
- */
-function QuestionSection({ questionNumber, question, helperText, options, selectedValue, onSelect, multiple = false, selectedValues = [], renderOption, formatMessage = (descriptor) => descriptor.id, }) {
-    const isSelected = (optionValue) => {
-        if (multiple) {
-            return selectedValues.includes(optionValue);
-        }
-        return selectedValue === optionValue;
-    };
-    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);
-                    }
-                    // Default rendering handled by parent or OptionButton component
-                    return null;
-                }) })] }));
-}
-
-const StyledOptionButton = styled(ButtonBase)(({ theme, selected, size = 'medium', fullWidth }) => {
-    const heights = {
-        small: '32px',
-        medium: '40px',
-        large: '48px',
-    };
-    return {
-        height: heights[size],
-        width: fullWidth ? '100%' : 'auto',
-        borderRadius: '8px',
-        border: selected
-            ? '2px solid #317ABC'
-            : '1px solid #C8C5CA',
-        backgroundColor: selected ? 'rgba(49, 122, 188, 0.1)' : '#FFFFFF',
-        padding: '10px 24px',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        cursor: 'pointer',
-        transition: 'all 0.2s ease',
-        '&:hover': {
-            backgroundColor: selected ? 'rgba(49, 122, 188, 0.15)' : 'rgba(0, 0, 0, 0.04)',
-        },
-        '&:disabled': {
-            backgroundColor: '#F5F5F5',
-            border: '1px solid #EEEEEE',
-            cursor: 'not-allowed',
-            opacity: 0.6,
-        },
-    };
-});
-const OptionContent = styled(Box)(({ theme }) => ({
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    gap: '8px',
-    width: '100%',
-}));
-const OptionIcon = styled('span')(({ theme }) => ({
-    fontSize: '18px',
-    lineHeight: 1,
-    flexShrink: 0,
-}));
-const OptionLabel = styled(Typography)(({ theme, selected, disabled }) => ({
-    fontFamily: '"Montserrat", sans-serif',
-    fontWeight: selected ? 600 : 500,
-    fontSize: '14px',
-    lineHeight: '20px',
-    color: disabled ? 'rgba(0, 0, 0, 0.4)' : '#13131B',
-    textAlign: 'center',
-}));
-
-/**
- * OptionButton - Selectable button for questionnaire options
- *
- * @example
- * ```tsx
- * <OptionButton
- *   value="option1"
- *   label="Option 1"
- *   icon="🎯"
- *   selected={selectedValue === 'option1'}
- *   onClick={(value) => setSelectedValue(value)}
- * />
- * ```
- */
-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);
-        }
-    };
-    return (jsx(StyledOptionButton, Object.assign({ selected: selected, disabled: disabled, onClick: handleClick, size: size, fullWidth: fullWidth }, { children: jsxs(OptionContent, { children: [icon && jsx(OptionIcon, { children: icon }), jsx(OptionLabel, Object.assign({ selected: selected, disabled: disabled, variant: "body2" }, { children: formatMessage({ id: label }) }))] }) })));
-}
-
-const ToggleContainer$1 = styled(Box)(({ theme }) => ({
-    backgroundColor: '#F9F9F9',
-    borderRadius: '40px',
-    display: 'flex',
-    gap: '6px',
-    height: '48px',
-    padding: '0',
-    width: '100%',
-}));
-const ToggleButton$1 = styled(ButtonBase)(({ theme, selected }) => ({
-    flex: 1,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    gap: '4px',
-    padding: '8px',
-    borderRadius: selected ? '40px' : '104px',
-    backgroundColor: selected ? '#00E08B' : 'transparent',
-    transition: 'all 0.3s ease',
-    '&:hover': {
-        backgroundColor: selected ? '#00D080' : 'rgba(0, 0, 0, 0.04)',
-    },
-}));
-const ToggleIcon = styled(Box)(({ theme }) => ({
-    backgroundColor: '#FFFFFF',
-    borderRadius: '50px',
-    width: '32px',
-    height: '32px',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    padding: '6px',
-}));
-const ToggleLabel = styled(Typography)(({ theme, selected }) => ({
-    fontFamily: '"Montserrat", sans-serif',
-    fontWeight: 600,
-    fontSize: '14px',
-    lineHeight: '20px',
-    color: selected ? '#FEFBFF' : '#5F5E62',
-    whiteSpace: 'nowrap',
-}));
-
-/**
- * ToggleGroup - Segmented control for switching between options
- *
- * @example
- * ```tsx
- * <ToggleGroup
- *   options={[
- *     { value: 'domestic', label: 'Domestic', icon: '🏠' },
- *     { value: 'international', label: 'International', icon: '✈️' }
- *   ]}
- *   value={selectedType}
- *   onChange={setSelectedType}
- * />
- * ```
- */
-function ToggleGroup({ options, value, onChange, formatMessage = (descriptor) => descriptor.id, }) {
-    return (jsx(ToggleContainer$1, { children: options.map((option) => (jsxs(ToggleButton$1, Object.assign({ selected: value === option.value, onClick: () => onChange(option.value) }, { children: [option.icon && (jsx(ToggleIcon, { children: jsx("img", { src: option.icon, alt: option.label, width: 19.2, height: 19.2 }) })), jsx(ToggleLabel, Object.assign({ selected: value === option.value }, { children: formatMessage({ id: option.label }) }))] }), option.value))) }));
-}
-
 /**
  * Theme Utility Functions
  * Helper functions for working with tenant themes
  */
 /**
  * Get color value from theme palette path
- * @param theme - Tenant theme configuration (can be undefined/null for SSR)
+ * @param theme - Tenant theme configuration
  * @param path - Dot-notation path to color (e.g., 'primary.main')
  * @param defaultColor - Fallback color if path not found
  * @returns Color string
  */
 function getThemeColor(theme, path, defaultColor = '#000000') {
-    // Handle SSR case where theme might be undefined
-    if (!theme || !theme.palette) {
-        return defaultColor;
-    }
     const keys = path.split('.');
     let value = theme.palette;
     for (const key of keys) {
@@ -1960,22 +433,15 @@ function getThemeColor(theme, path, defaultColor = '#000000') {
 }
 /**
  * Merge tenant theme with base MUI theme
- * This makes tenant theme accessible in styled components via theme parameter
  * @param baseTheme - Base MUI theme
  * @param tenantTheme - Tenant-specific theme configuration
  * @returns Merged theme
  */
 function mergeTenantTheme(baseTheme, tenantTheme) {
-    // Merge tenant palette and typography into MUI theme
-    const mergedPalette = Object.assign(Object.assign(Object.assign({}, baseTheme.palette), tenantTheme.palette), { 
-        // Make tenant colors accessible via theme.palette
-        tenant: tenantTheme.palette });
-    const mergedTypography = Object.assign(Object.assign(Object.assign({}, baseTheme.typography), tenantTheme.typography), { 
-        // Make tenant typography accessible via theme.typography
-        tenant: tenantTheme.typography });
-    return Object.assign(Object.assign({}, baseTheme), { palette: mergedPalette, typography: mergedTypography, 
-        // Also add tenant theme at root level for easy access
-        tenantTheme });
+    var _a, _b;
+    return Object.assign(Object.assign({}, baseTheme), { palette: Object.assign(Object.assign(Object.assign({}, baseTheme.palette), tenantTheme.palette), { 
+            // Deep merge for nested objects
+            primary: Object.assign(Object.assign({}, (((_a = baseTheme.palette) === null || _a === void 0 ? void 0 : _a.primary) || {})), (tenantTheme.palette.primary || {})), secondary: Object.assign(Object.assign({}, (((_b = baseTheme.palette) === null || _b === void 0 ? void 0 : _b.secondary) || {})), (tenantTheme.palette.secondary || {})) }), typography: Object.assign(Object.assign({}, baseTheme.typography), tenantTheme.typography) });
 }
 /**
  * Create CSS variables from tenant theme
@@ -2010,931 +476,5 @@ function createThemeCSSVariables(theme, prefix = '--tenant') {
     return variables;
 }
 
-const ToggleContainer = styled(Box)(({ theme }) => {
-    var _a, _b;
-    return ({
-        display: 'flex',
-        gap: '6px',
-        height: '48px',
-        backgroundColor: ((_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.sliderBackground) || '#f9f9f9',
-        borderRadius: '40px',
-        width: '100%',
-        padding: '0',
-        position: 'relative',
-    });
-});
-const ToggleButton = styled(Box)(({ theme, active }) => {
-    var _a, _b, _c, _d, _e, _f;
-    return ({
-        flex: 1,
-        display: 'flex',
-        gap: '4px',
-        alignItems: 'center',
-        justifyContent: 'center',
-        padding: '8px',
-        height: '100%',
-        borderRadius: '40px',
-        cursor: 'pointer',
-        backgroundColor: active
-            ? ((_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.toggleActive) || '#a4ce4e'
-            : 'transparent',
-        color: active
-            ? ((_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.toggleActiveText) || '#fefbff'
-            : ((_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.toggleInactiveText) || '#5f5e62',
-        transition: 'all 0.2s ease',
-        '&:hover': {
-            opacity: 0.9,
-        },
-    });
-});
-const ToggleText = styled(Typography)(({ theme }) => {
-    var _a, _b, _c, _d, _e, _f;
-    return ({
-        fontFamily: ((_a = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _a === void 0 ? void 0 : _a.fontFamily) ||
-            "'Montserrat', sans-serif",
-        fontSize: ((_c = (_b = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _b === void 0 ? void 0 : _b.bodyMedium) === null || _c === void 0 ? void 0 : _c.fontSize) || '14px',
-        fontWeight: ((_d = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _d === void 0 ? void 0 : _d.fontWeightSemiBold) || 600,
-        lineHeight: ((_f = (_e = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _e === void 0 ? void 0 : _e.bodyMedium) === null || _f === void 0 ? void 0 : _f.lineHeight) || '20px',
-        whiteSpace: 'nowrap',
-    });
-});
-
-/**
- * BillingToggle - Toggle between monthly and annual billing
- *
- * @example
- * ```tsx
- * <BillingToggle
- *   value={billingType}
- *   onChange={setBillingType}
- * />
- * ```
- */
-function BillingToggle({ value, onChange, formatMessage = (descriptor) => descriptor.defaultMessage || descriptor.id, }) {
-    // 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;
-    // Get theme colors with SSR-safe fallbacks
-    const toggleActiveColor = getThemeColor(theme, 'ui.toggleActive', '#a4ce4e');
-    const toggleActiveTextColor = getThemeColor(theme, 'ui.toggleActiveText', '#fefbff');
-    const toggleInactiveTextColor = getThemeColor(theme, 'ui.toggleInactiveText', '#5f5e62');
-    const toggleBgColor = getThemeColor(theme, 'ui.sliderBackground', '#f9f9f9');
-    return (jsxs(ToggleContainer, Object.assign({ sx: {
-            backgroundColor: toggleBgColor,
-        } }, { children: [jsx(ToggleButton, Object.assign({ active: value === 'monthly', onClick: () => onChange('monthly'), sx: {
-                    backgroundColor: value === 'monthly' ? toggleActiveColor : 'transparent',
-                    color: value === 'monthly'
-                        ? toggleActiveTextColor
-                        : toggleInactiveTextColor,
-                } }, { children: jsx(ToggleText, { children: formatMessage({
-                        id: 'Billed monthly',
-                        defaultMessage: 'Billed monthly',
-                    }) }) })), jsx(ToggleButton, Object.assign({ active: value === 'annually', onClick: () => onChange('annually'), sx: {
-                    backgroundColor: value === 'annually' ? toggleActiveColor : 'transparent',
-                    color: value === 'annually'
-                        ? toggleActiveTextColor
-                        : toggleInactiveTextColor,
-                } }, { children: jsx(ToggleText, { children: formatMessage({
-                        id: 'Billed annually',
-                        defaultMessage: 'Billed annually',
-                    }) }) }))] })));
-}
-
-const CalloutContainer = styled(Box)(({ theme }) => {
-    var _a, _b, _c, _d;
-    return ({
-        display: 'flex',
-        flexDirection: 'column',
-        gap: '8px',
-        padding: '12px',
-        backgroundColor: ((_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.calloutBackground) || '#f9f9f9',
-        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.calloutBorder) || '#ffffff'}`,
-        borderRadius: '8px',
-        width: '100%',
-    });
-});
-const CalloutHeader = styled(Box)(({ theme }) => ({
-    display: 'flex',
-    gap: '4px',
-    alignItems: 'center',
-}));
-const CalloutIcon = styled(InfoIcon)(({ theme }) => {
-    var _a, _b;
-    return ({
-        width: '20px',
-        height: '20px',
-        color: ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _a === void 0 ? void 0 : _a.natural) === null || _b === void 0 ? void 0 : _b.dim) || '#13131b',
-    });
-});
-const CalloutTitle = styled(Typography)(({ theme }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
-    return ({
-        fontFamily: ((_a = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _a === void 0 ? void 0 : _a.fontFamily) ||
-            "'Montserrat', sans-serif",
-        fontSize: ((_c = (_b = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _b === void 0 ? void 0 : _b.bodyMedium) === null || _c === void 0 ? void 0 : _c.fontSize) || '14px',
-        fontWeight: ((_d = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _d === void 0 ? void 0 : _d.fontWeightSemiBold) || 600,
-        lineHeight: ((_f = (_e = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _e === void 0 ? void 0 : _e.bodyMedium) === null || _f === void 0 ? void 0 : _f.lineHeight) || '20px',
-        color: ((_h = (_g = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _g === void 0 ? void 0 : _g.natural) === null || _h === void 0 ? void 0 : _h.dim) || '#13131b',
-    });
-});
-const CalloutText = styled(Typography)(({ theme }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-    return ({
-        fontFamily: ((_a = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _a === void 0 ? void 0 : _a.fontFamily) ||
-            "'Montserrat', sans-serif",
-        fontSize: ((_c = (_b = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _b === void 0 ? void 0 : _b.bodySmall) === null || _c === void 0 ? void 0 : _c.fontSize) || '12px',
-        fontWeight: ((_e = (_d = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _d === void 0 ? void 0 : _d.bodySmall) === null || _e === void 0 ? void 0 : _e.fontWeight) || 400,
-        lineHeight: ((_g = (_f = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _f === void 0 ? void 0 : _f.bodySmall) === null || _g === void 0 ? void 0 : _g.lineHeight) || '16px',
-        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.dark) || '#5f5e62',
-    });
-});
-
-/**
- * InfoCallout - Displays helpful information or tips
- *
- * @example
- * ```tsx
- * <InfoCallout title="Helpful tip">
- *   Many Malaysians aim for life protection that's at least 10–12 times their annual income
- * </InfoCallout>
- * ```
- */
-function InfoCallout({ title = 'Helpful tip', children, formatMessage = (descriptor) => descriptor.defaultMessage || descriptor.id, }) {
-    // 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;
-    // Get theme colors with SSR-safe fallbacks
-    const calloutBgColor = getThemeColor(theme, 'ui.calloutBackground', '#f9f9f9');
-    const calloutBorderColor = getThemeColor(theme, 'ui.calloutBorder', '#ffffff');
-    const textColor = getThemeColor(theme, 'natural.dim', '#13131b');
-    const subtitleColor = getThemeColor(theme, 'natural.dark', '#5f5e62');
-    return (jsxs(CalloutContainer, Object.assign({ sx: {
-            backgroundColor: calloutBgColor,
-            border: `1px solid ${calloutBorderColor}`,
-        } }, { children: [jsxs(CalloutHeader, { children: [jsx(CalloutIcon, { sx: { color: textColor } }), jsx(CalloutTitle, Object.assign({ sx: { color: textColor } }, { children: formatMessage({
-                            id: title,
-                            defaultMessage: title,
-                        }) }))] }), jsx(CalloutText, Object.assign({ sx: { color: subtitleColor } }, { children: children }))] })));
-}
-
-const SliderContainer = styled(Box)(({ theme }) => {
-    var _a, _b;
-    return ({
-        display: 'flex',
-        flexDirection: 'column',
-        gap: '16px',
-        padding: '12px',
-        backgroundColor: ((_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.sliderBackground) || '#f9f9f9',
-        borderRadius: '8px',
-        width: '100%',
-    });
-});
-const InputSection = styled(Box)(({ theme }) => ({
-    display: 'flex',
-    flexDirection: 'column',
-    gap: '8px',
-    width: '100%',
-}));
-const InputLabel = styled(Typography)(({ theme }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-    return ({
-        fontFamily: ((_a = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _a === void 0 ? void 0 : _a.fontFamily) ||
-            "'Montserrat', sans-serif",
-        fontSize: ((_c = (_b = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _b === void 0 ? void 0 : _b.bodySmall) === null || _c === void 0 ? void 0 : _c.fontSize) || '12px',
-        fontWeight: ((_e = (_d = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _d === void 0 ? void 0 : _d.bodySmall) === null || _e === void 0 ? void 0 : _e.fontWeight) || 400,
-        lineHeight: ((_g = (_f = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _f === void 0 ? void 0 : _f.bodySmall) === null || _g === void 0 ? void 0 : _g.lineHeight) || '16px',
-        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.dim) || '#13131b',
-    });
-});
-const InputContainer = styled(Box)(({ theme }) => {
-    var _a, _b, _c, _d;
-    return ({
-        display: 'flex',
-        gap: '24px',
-        alignItems: 'center',
-        justifyContent: 'center',
-        padding: '8px 16px',
-        height: '44px',
-        backgroundColor: ((_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.inputBackground) || '#ffffff',
-        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: 'initial', // Match slider track width
-    });
-});
-const InputValue = styled(Typography)(({ theme }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-    return ({
-        fontFamily: ((_a = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _a === void 0 ? void 0 : _a.fontFamily) ||
-            "'Montserrat', sans-serif",
-        fontSize: ((_c = (_b = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _b === void 0 ? void 0 : _b.bodyMedium) === null || _c === void 0 ? void 0 : _c.fontSize) || '14px',
-        fontWeight: ((_e = (_d = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _d === void 0 ? void 0 : _d.bodyMedium) === null || _e === void 0 ? void 0 : _e.fontWeight) || 400,
-        lineHeight: ((_g = (_f = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _f === void 0 ? void 0 : _f.bodyMedium) === null || _g === void 0 ? void 0 : _g.lineHeight) || '18px',
-        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.dim) || '#13131b',
-        textAlign: 'center',
-        flex: 1,
-    });
-});
-styled(Box)(({ theme }) => ({
-    display: 'flex',
-    alignItems: 'center',
-    position: 'relative',
-    width: '100%',
-    maxWidth: 'initial',
-    height: '4px',
-}));
-styled(Box)(({ theme, active }) => {
-    var _a, _b, _c, _d;
-    return ({
-        height: '4px',
-        backgroundColor: active
-            ? ((_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'
-            : ((_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.sliderInactive) || '#c8c5ca',
-        borderRadius: '8px',
-        width: '22px',
-        marginRight: '-1px',
-    });
-});
-styled(Box)(({ theme, active }) => {
-    var _a, _b, _c, _d;
-    return ({
-        width: '10px',
-        height: '10px',
-        borderRadius: '8px',
-        backgroundColor: active
-            ? ((_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'
-            : ((_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.sliderInactive) || '#c8c5ca',
-        boxShadow: active ? '0px 2px 20px 4px rgba(0, 0, 0, 0.14)' : 'none',
-        marginRight: '-1px',
-        cursor: 'pointer',
-        position: 'relative',
-        zIndex: 2,
-        '&:hover': {
-            transform: 'scale(1.2)',
-            transition: 'transform 0.2s ease',
-        },
-    });
-});
-styled(Box)(({ theme }) => ({
-    position: 'absolute',
-    width: '18px',
-    height: '18px',
-    borderRadius: '34px',
-    backgroundColor: '#ffffff',
-    boxShadow: '0px 2px 20px 4px rgba(0, 0, 0, 0.14)',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    top: '-21px',
-    left: '0px',
-    cursor: 'grab',
-    zIndex: 10,
-    '&:active': {
-        cursor: 'grabbing',
-    },
-}));
-styled(Box)(({ theme }) => {
-    var _a, _b;
-    return ({
-        width: '13px',
-        height: '10px',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        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',
-    });
-});
-styled(Box)(({ theme }) => ({
-    display: 'flex',
-    justifyContent: 'space-between',
-    width: '100%',
-    maxWidth: 'initial', // Match slider track width
-}));
-const RangeLabel = styled(Typography)(({ theme }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-    return ({
-        fontFamily: ((_a = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _a === void 0 ? void 0 : _a.fontFamily) ||
-            "'Montserrat', sans-serif",
-        fontSize: ((_c = (_b = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _b === void 0 ? void 0 : _b.smallText) === null || _c === void 0 ? void 0 : _c.fontSize) || '8px',
-        fontWeight: ((_e = (_d = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _d === void 0 ? void 0 : _d.smallText) === null || _e === void 0 ? void 0 : _e.fontWeight) || 500,
-        lineHeight: ((_g = (_f = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _f === void 0 ? void 0 : _f.smallText) === null || _g === void 0 ? void 0 : _g.lineHeight) || '16px',
-        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
- *
- * @example
- * ```tsx
- * <CoverageAmountSlider
- *   min={100000}
- *   max={550000}
- *   value={coverageAmount}
- *   onChange={setCoverageAmount}
- * />
- * ```
- */
-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');
-    const sliderBgColor = getThemeColor(theme, 'ui.sliderBackground', '#f9f9f9');
-    const inputBgColor = getThemeColor(theme, 'ui.inputBackground', '#ffffff');
-    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);
-        // 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,
-            maximumFractionDigits: 0,
-        })}`;
-    };
-    const formatCurrency = customFormatCurrency || defaultFormatCurrency;
-    const handleDecrease = () => {
-        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 = () => {
-        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 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);
-        }
-    };
-    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}`,
-                            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, 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', 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
- */
-/**
- * Hook to get tenant-specific asset URL
- * @param assetPath - Relative path to asset within tenant folder
- * @returns Full path to tenant-specific asset
- *
- * @example
- * ```tsx
- * const bannerImage = useTenantAsset('promotional-banner.jpg')
- * <img src={bannerImage} alt="Promo" />
- * ```
- */
-function useTenantAsset(assetPath) {
-    const tenantId = useTenantId();
-    // Return tenant-specific asset path that will be resolved at build time
-    return `/assets/tenants/${tenantId}/${assetPath}`;
-}
-/**
- * Hook to get tenant logo URL
- * @param variant - Logo variant ('default' | 'dark' | 'alt' | 'white')
- * @returns Logo URL from theme configuration
- *
- * @example
- * ```tsx
- * const logo = useTenantLogo()
- * const darkLogo = useTenantLogo('dark')
- * <img src={logo} alt="Logo" />
- * ```
- */
-function useTenantLogo(variant = 'default') {
-    const tenantTheme = useTenantTheme();
-    const theme = tenantTheme === null || tenantTheme === void 0 ? void 0 : tenantTheme.theme;
-    // Guard against undefined theme (SSR or initialization issues)
-    if (!theme || !theme.logo) {
-        console.warn('useTenantLogo: Theme or logo is undefined, returning empty string');
-        return '';
-    }
-    switch (variant) {
-        case 'dark':
-            return theme.logoDark || theme.logo;
-        case 'alt':
-            return theme.logoAlt || theme.logo;
-        case 'white':
-            return theme.logoWhite || theme.logo;
-        default:
-            return theme.logo;
-    }
-}
-/**
- * Hook to get tenant favicon URL
- * @returns Favicon URL from theme configuration
- *
- * @example
- * ```tsx
- * const favicon = useTenantFavicon()
- * <link rel="icon" href={favicon} />
- * ```
- */
-function useTenantFavicon() {
-    const tenantTheme = useTenantTheme();
-    const theme = tenantTheme === null || tenantTheme === void 0 ? void 0 : tenantTheme.theme;
-    // Guard against undefined theme
-    if (!theme || !theme.favicon) {
-        console.warn('useTenantFavicon: Theme or favicon is undefined');
-        return '';
-    }
-    return theme.favicon;
-}
-/**
- * Get tenant asset path (non-hook version for use outside components)
- * @param tenantId - Tenant identifier
- * @param assetPath - Relative path to asset
- * @returns Full asset path
- */
-function getTenantAssetPath(tenantId, assetPath) {
-    return `/assets/tenants/${tenantId}/${assetPath}`;
-}
-/**
- * Get tenant logo path (non-hook version)
- * @param tenantId - Tenant identifier
- * @param variant - Logo variant
- * @returns Logo path
- */
-function getTenantLogoPath(tenantId, variant = 'default') {
-    const variantSuffix = variant === 'default' ? '' : `-${variant}`;
-    return `/assets/tenants/${tenantId}/logo${variantSuffix}.svg`;
-}
-
-/**
- * Common UI Icons
- * Path references to reusable icons
- * Assets are copied to dist/assets folder during build
- */
-const ICON_PATHS = {
-    close: '/assets/icons/close.svg',
-    arrow: '/assets/icons/arrow.svg',
-    arrowDown: '/assets/icons/arrow-down.svg',
-    alert: '/assets/icons/alert.svg',
-    facebook: '/assets/icons/facebook.svg',
-    instagram: '/assets/icons/instagram.svg',
-    youtube: '/assets/icons/youtube.svg',
-};
-/**
- * Get icon path by name
- * @param iconName - Name of the icon
- * @returns Path to icon asset
- */
-function getIconPath(iconName) {
-    return ICON_PATHS[iconName];
-}
-
-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 };
+export { Banner, Button, Card, TenantThemeProvider, ammetlifeTheme, cimbTheme, createThemeCSSVariables, getAvailableTenants, getTenantTheme, getThemeColor, iglooTheme, isValidTenantId, mergeTenantTheme, tenantThemes, useIsTenant, useTenantId, useTenantTheme };
 //# sourceMappingURL=index.js.map