igloo-d2c-components 1.0.13 → 1.0.14

package/dist/cjs/index.js

@@ -2,10 +2,40 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
+var React = require('react');
 var material = require('@mui/material');
+var CloseIcon = require('@mui/icons-material/Close');
+var ArrowDropDownIcon = require('@mui/icons-material/ArrowDropDown');
+var MenuIcon = require('@mui/icons-material/Menu');
+var AppBar = require('@mui/material/AppBar');
+var Container = require('@mui/material/Container');
+var styles = require('@mui/material/styles');
+var ArrowBackIcon = require('@mui/icons-material/ArrowBack');
+var InfoIcon = require('@mui/icons-material/Info');
+var AddIcon = require('@mui/icons-material/Add');
+var RemoveIcon = require('@mui/icons-material/Remove');
+var ExpandMoreIcon = require('@mui/icons-material/ExpandMore');
 
-const TenantThemeContext = react.createContext(undefined);
+function _interopNamespaceDefault(e) {
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n.default = e;
+    return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+const TenantThemeContext = React.createContext(undefined);
 /**
  * TenantThemeProvider
  * Wraps components to provide tenant-specific theming
@@ -21,7 +51,7 @@ const TenantThemeContext = react.createContext(undefined);
  * ```
  */
 function TenantThemeProvider({ children, tenantId, theme, }) {
-    const value = react.useMemo(() => ({
+    const value = React.useMemo(() => ({
         tenantId,
         theme,
     }), [tenantId, theme]);
@@ -29,11 +59,20 @@ function TenantThemeProvider({ children, tenantId, theme, }) {
 }
 /**
  * Hook to access tenant theme configuration
- * @throws Error if used outside TenantThemeProvider
+ * Returns undefined during SSR if context is not available
+ * @returns TenantContextValue or undefined during SSR
  */
 function useTenantTheme() {
-    const context = react.useContext(TenantThemeContext);
+    const context = React.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;
@@ -42,15 +81,160 @@ function useTenantTheme() {
  * Hook to get tenant ID
  */
 function useTenantId() {
-    const { tenantId } = useTenantTheme();
-    return tenantId;
+    const tenantTheme = useTenantTheme();
+    return (tenantTheme === null || tenantTheme === void 0 ? void 0 : tenantTheme.tenantId) || '';
 }
 /**
  * Hook to check if current tenant matches given tenant ID
  */
 function useIsTenant(checkTenantId) {
-    const { tenantId } = useTenantTheme();
-    return tenantId === 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;
 }
 
 /**
@@ -94,6 +278,19 @@ 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)',
@@ -119,11 +316,10 @@ const iglooTheme = {
             main: '#F3A100',
         },
     },
-    typography: {
-        fontFamily: '"Manrope", "Roboto", "Helvetica", "Arial", sans-serif',
-    },
-    logo: '/assets/igloo_nobeta.svg',
+    typography: Object.assign(Object.assign({}, iglooTypography), { fontFamily: '"Manrope", "Roboto", "Helvetica", "Arial", sans-serif' }),
+    logo: '/assets/tenants/igloo/logo.svg',
     favicon: 'https://static.iglooinsure.com/icons/favicon.ico',
+    assetBaseUrl: '/assets/tenants/igloo',
 };
 /**
  * CIMB Theme Configuration
@@ -168,6 +364,19 @@ 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)',
@@ -194,11 +403,11 @@ const cimbTheme = {
             main: '#F3A100',
         },
     },
-    typography: {
-        fontFamily: '"CIMB Sans", "Roboto", "Helvetica", "Arial", sans-serif',
-    },
-    logo: '/assets/cimb/cimb-logo.svg',
+    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',
     favicon: 'https://static.iglooinsure.com/icons/favicon.ico',
+    assetBaseUrl: '/assets/tenants/cimb',
 };
 /**
  * Ammetlife Theme Configuration
@@ -206,12 +415,12 @@ const cimbTheme = {
 const ammetlifeTheme = {
     palette: {
         primary: {
-            dark: '#0D47A1',
-            main: '#1976D2',
+            dark: '#2869a8',
+            main: '#317abc',
             light: '#42A5F5',
             bright: '#90CAF9',
             plain: '#E3F2FD',
-            border: '#1976D2',
+            border: '#317abc',
         },
         secondary: {
             dim: '#E65100',
@@ -237,6 +446,19 @@ 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)',
@@ -263,11 +485,10 @@ const ammetlifeTheme = {
             main: '#FF9800',
         },
     },
-    typography: {
-        fontFamily: '"Open Sans", "Roboto", "Helvetica", "Arial", sans-serif',
-    },
-    logo: '/assets/ammetlife/logo-AmMetLife.svg',
+    typography: Object.assign(Object.assign({}, ammetlifeTypography), { fontFamily: '"Montserrat", "Roboto", "Helvetica", "Arial", sans-serif' }),
+    logo: '/assets/tenants/ammetlife/logo.svg',
     favicon: 'https://static.iglooinsure.com/icons/favicon.ico',
+    assetBaseUrl: '/assets/tenants/ammetlife',
 };
 /**
  * Theme Registry
@@ -354,12 +575,13 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
  * ```
  */
 function Button(_a) {
-    var _b, _c, _d;
+    var _b, _c, _d, _e, _f, _g;
     var { tenantColored = false, variant = 'contained', sx, color } = _a, props = __rest(_a, ["tenantColored", "variant", "sx", "color"]);
-    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),
+    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),
             } }, sx) : sx;
     return (jsxRuntime.jsx(material.Button, Object.assign({ variant: variant, color: tenantColored ? undefined : color, sx: buttonSx }, props)));
 }
@@ -378,11 +600,12 @@ function Button(_a) {
  * ```
  */
 function Card(_a) {
-    var _b;
+    var _b, _c;
     var { title, headerAction, content, actions, tenantAccent = false, sx, children } = _a, props = __rest(_a, ["title", "headerAction", "content", "actions", "tenantAccent", "sx", "children"]);
-    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;
+    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;
     return (jsxRuntime.jsxs(material.Card, Object.assign({ sx: cardSx }, props, { children: [title && jsxRuntime.jsx(material.CardHeader, { title: title, action: headerAction }), (content || children) && (jsxRuntime.jsx(material.CardContent, { children: content || children })), actions && jsxRuntime.jsx(material.CardActions, { children: actions })] })));
 }
 
@@ -402,25 +625,1348 @@ 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 { theme } = useTenantTheme();
+    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 background = gradient
-        ? `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;
+        ? `linear-gradient(135deg, ${primaryColor} 0%, ${lightColor} 100%)`
+        : primaryColor;
     return (jsxRuntime.jsxs(material.Box, Object.assign({ sx: Object.assign({ background, color: 'white', padding: '32px', borderRadius: '12px', textAlign: 'center' }, sx) }, props, { children: [jsxRuntime.jsx(material.Typography, Object.assign({ variant: "h4", component: "h2", gutterBottom: true, fontWeight: "bold" }, { children: title })), description && (jsxRuntime.jsx(material.Typography, Object.assign({ variant: "body1", sx: { opacity: 0.95, mb: action ? 2 : 0 } }, { children: description }))), action && jsxRuntime.jsx(material.Box, Object.assign({ sx: { mt: 2 } }, { children: action }))] })));
 }
 
+const StyledAppBar$1 = styles.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 = styles.styled('div')(({ theme }) => ({
+    [theme.breakpoints.up(1025)]: {
+        minWidth: '1128px',
+        maxWidth: '1128px',
+        margin: '0 auto',
+    },
+}));
+const StyledContainer = styles.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 = styles.styled(material.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 = styles.styled(material.Button)(({ 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 = styles.styled('a')(({ theme }) => ({
+    color: 'inherit',
+    '&:hover': {
+        color: 'inherit',
+    },
+}));
+const StyledAvatar = styles.styled(material.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 = styles.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 = styles.styled(material.Button)(({ 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 = styles.styled(material.Typography)(({ theme }) => ({
+    textTransform: 'none',
+}));
+const StyledMenu = styles.styled(material.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 = styles.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 = styles.styled(material.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 = styles.styled('span')(({ theme }) => ({
+    alignItems: 'center',
+    display: 'flex',
+    justifyContent: 'center',
+    margin: 'auto 0',
+}));
+const ImageProductIcon = styles.styled('img')(({ theme }) => ({
+    aspectRatio: 1,
+    objectPosition: 'center',
+    width: 18,
+    height: 18,
+}));
+const StyledMenuItemDesktop = styles.styled(material.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 = styles.styled(CloseIcon)(({ theme }) => {
+    var _a;
+    return ({
+        color: `${((_a = theme.palette.text) === null || _a === void 0 ? void 0 : _a.primary) || '#000'}`,
+    });
+});
+const StyledAvatarUserIcon = styles.styled(material.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 = styles.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 = styles.styled(material.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 = styles.styled('div')(({ theme }) => ({
+    justifyContent: 'space-between',
+    alignSelf: 'stretch',
+    backgroundColor: '',
+    display: 'flex',
+    gap: '20px',
+    padding: '12px 16px',
+    marginBottom: 16,
+}));
+const DivLogo = styles.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 = styles.styled('div')(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 6,
+}));
+const StyledCloseIconBtn = styles.styled(material.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 = styles.styled('div')(({ theme }) => ({
+    justifyContent: 'center',
+    alignSelf: 'stretch',
+    display: 'flex',
+    flexDirection: 'column',
+    padding: ' 0 16px',
+}));
+const DivCommonMenus = styles.styled('div')(({ theme }) => ({
+    padding: 16,
+    display: 'flex',
+    flexDirection: 'column',
+    alignSelf: 'stretch',
+    alignItems: 'flex-start',
+}));
+const MenuItemOtherLinks = styles.styled(material.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 = styles.styled(material.FormControlLabel)(({ theme }) => ({
+    '& .MuiRadio-root': {
+        padding: '0 9px',
+    },
+}));
+const ButtonLogout = styles.styled(material.Button)(({ 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 = styles.styled('div')(({ theme }) => ({
+    margin: 16,
+}));
+const AnchorLink$1 = styles.styled('a')(({ theme }) => ({
+    color: 'inherit',
+    '&:hover': {
+        color: 'inherit',
+    },
+}));
+const StyledButton$1 = styles.styled(material.Button)(({ 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 = styles.styled(material.Button)(({ theme }) => ({
+    alignSelf: 'start',
+    height: '40px',
+    borderRadius: '100px',
+    padding: '10px 24px',
+}));
+const TypographyBtnText = styles.styled(material.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 = material.useTheme();
+    const themeBreakpoint = material.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__namespace.useState(null);
+    const [anchorElLanguage, setAnchorElLanguage] = React__namespace.useState(null);
+    const [anchorElUserMenu, setAnchorElUserMenu] = React__namespace.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 (jsxRuntime.jsx(StyledAppBar$1, Object.assign({ ispartnershippagemobileview: isPartnershipPageMobileView, scrolled: scrolled }, { children: jsxRuntime.jsx(ResponsiveB2CLayout, { children: jsxRuntime.jsx(StyledContainer, Object.assign({ ispartnershippagemobileview: isPartnershipPageMobileView, scrolled: scrolled, maxWidth: "xl" }, { children: jsxRuntime.jsxs(material.Toolbar, Object.assign({ disableGutters: true }, { children: [jsxRuntime.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: jsxRuntime.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: jsxRuntime.jsx("img", { src: displayLogo, alt: "Logo", style: Object.assign({}, (isMobile && { height: '32px', width: '119px' })), height: isMobile ? '32px' : '57px', width: isMobile ? '119px' : '93.36px' }) })) })), !isMobile && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [shouldShowContent && (jsxRuntime.jsxs(material.Box, Object.assign({ sx: {
+                                        flexGrow: 1,
+                                        display: { xs: 'none', md: 'flex', gap: 40 },
+                                    } }, { children: [jsxRuntime.jsxs(ButtonDesktopMenu, Object.assign({ onClick: handleOpenNavMenu, sx: { my: 2, textTransform: 'capitalize' }, "data-testid": "productNavigationMenu" }, { children: [jsxRuntime.jsx(material.Typography, Object.assign({ variant: "h6" }, { children: formatMessage({ id: 'Products' }) })), jsxRuntime.jsx(material.Icon, { component: ArrowDropDownIcon })] }), "product"), (menuItems === null || menuItems === void 0 ? void 0 : menuItems.partnership) && (jsxRuntime.jsx(ButtonDesktopMenu, Object.assign({ onClick: onPartnershipClick, sx: { my: 2, textTransform: 'capitalize' } }, { children: jsxRuntime.jsx(material.Typography, Object.assign({ variant: "h6" }, { children: jsxRuntime.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) && (jsxRuntime.jsx(ButtonDesktopMenu, Object.assign({ onClick: onAboutUsClick, sx: { my: 2, textTransform: 'capitalize' } }, { children: jsxRuntime.jsx(material.Typography, Object.assign({ variant: "h6" }, { children: jsxRuntime.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) && (jsxRuntime.jsx(ButtonDesktopMenu, Object.assign({ onClick: onBlogClick, sx: { my: 2, textTransform: 'capitalize' } }, { children: jsxRuntime.jsx(material.Typography, Object.assign({ variant: "h6" }, { children: jsxRuntime.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"))] }))), jsxRuntime.jsxs(material.Box, Object.assign({ sx: {
+                                        flexGrow: 1,
+                                        display: {
+                                            xs: 'none',
+                                            md: 'flex',
+                                            gap: 40,
+                                            justifyContent: 'flex-end',
+                                        },
+                                    } }, { children: [shouldShowContent && (jsxRuntime.jsxs(ButtonDesktopMenu, Object.assign({ onClick: handleOpenLanguageMenu, sx: { my: 2, textTransform: 'capitalize' }, "data-testid": "selectedLocale" }, { children: [jsxRuntime.jsx(material.Typography, Object.assign({ variant: "h6" }, { children: formatMessage({
+                                                        id: `${currentLocale === null || currentLocale === void 0 ? void 0 : currentLocale.toLocaleUpperCase()}`,
+                                                    }) })), jsxRuntime.jsx(material.Icon, { component: ArrowDropDownIcon })] }), "language")), isPartnershipPagePCView && scrolled ? (jsxRuntime.jsx(StyledButton$1, Object.assign({ variant: "contained", onClick: onPartnershipCTAClick }, { children: jsxRuntime.jsx(TypographyBtnText, Object.assign({ variant: "body1" }, { children: formatMessage({ id: 'Be Our Partner' }) })) }))) : isSeoPageView && scrolled && bannerData ? (jsxRuntime.jsx(StyledButtonBanner, Object.assign({ style: { background: bannerData === null || bannerData === void 0 ? void 0 : bannerData.ctaBGColor }, variant: "contained", onClick: onGetQuoteClick }, { children: jsxRuntime.jsx(material.Typography, Object.assign({ style: {
+                                                    color: bannerData === null || bannerData === void 0 ? void 0 : bannerData.ctaTextColor,
+                                                    textTransform: 'none',
+                                                }, variant: "body1" }, { children: bannerData === null || bannerData === void 0 ? void 0 : bannerData.ctaText })) }))) : userToken ? (jsxRuntime.jsx(StyledAvatar, Object.assign({ onClick: handleOpenUserMenu, "data-testid": "user-profile-avatar" }, { children: firstName1stLetter }))) : (jsxRuntime.jsxs(DivButtonWrapper, { children: [jsxRuntime.jsx(ButtonAuth, Object.assign({ color: "primary", variant: "outlined", sx: { textTransform: 'capitalize' }, onClick: onLoginClick, "data-testid": "headerLogin" }, { children: jsxRuntime.jsx(TypographyAuth, Object.assign({ variant: "body1" }, { children: formatMessage({ id: 'Log in' }) })) })), jsxRuntime.jsx(ButtonAuth, Object.assign({ color: "primary", variant: "contained", sx: { textTransform: 'capitalize' }, onClick: onSignupClick }, { children: jsxRuntime.jsx(TypographyAuth, Object.assign({ variant: "body1" }, { children: formatMessage({ id: 'Sign up' }) })) }))] }))] })), jsxRuntime.jsx(StyledMenu, Object.assign({ id: "menu-appbar", anchorEl: anchorElNav, anchorOrigin: {
+                                        vertical: 'bottom',
+                                        horizontal: 'left',
+                                    }, keepMounted: true, transformOrigin: {
+                                        vertical: 'top',
+                                        horizontal: 'left',
+                                    }, open: Boolean(anchorElNav), onClose: handleCloseNavMenu, sx: {
+                                        display: { xs: 'none', md: 'block' },
+                                    } }, { children: jsxRuntime.jsx(DivProductListing, { children: navigationLinks.map(({ key, name, icon }) => (jsxRuntime.jsxs(StyledMenuItem, Object.assign({ onClick: () => {
+                                                onProductMenuClick === null || onProductMenuClick === void 0 ? void 0 : onProductMenuClick(key);
+                                                handleCloseNavMenu();
+                                            }, "data-testid": `product-navigation-${key}` }, { children: [jsxRuntime.jsx(SpanImageWrapper, { children: jsxRuntime.jsx(ImageProductIcon, { src: icon, width: 18, height: 18, alt: name }) }), jsxRuntime.jsx(material.Typography, Object.assign({ variant: "body1", textAlign: "center" }, { children: jsxRuntime.jsx(AnchorLinks, Object.assign({ href: `#${key}`, onClick: (e) => e === null || e === void 0 ? void 0 : e.preventDefault() }, { children: formatMessage({ id: `${name}` }) })) }))] }), key))) }) })), jsxRuntime.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: jsxRuntime.jsx(DivProductListing, { children: languages.map(({ value, locale, label }) => (jsxRuntime.jsx(StyledMenuItem, Object.assign({ onClick: () => {
+                                                onLanguageChange === null || onLanguageChange === void 0 ? void 0 : onLanguageChange(locale, value);
+                                                handleCloseLanguageMenu();
+                                            }, "data-testid": `lang-${locale}` }, { children: jsxRuntime.jsx(material.Typography, Object.assign({ variant: "body1", textAlign: "center" }, { children: label })) }), value))) }) })), jsxRuntime.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: jsxRuntime.jsxs(DivProductListing, { children: [jsxRuntime.jsx(StyledMenuItem, Object.assign({ onClick: () => {
+                                                    onMyProfileClick === null || onMyProfileClick === void 0 ? void 0 : onMyProfileClick();
+                                                    handleCloseUserMenu();
+                                                } }, { children: jsxRuntime.jsx(material.Typography, Object.assign({ variant: "body1", textAlign: "center" }, { children: formatMessage({ id: `My profile` }) })) }), "myProfile"), jsxRuntime.jsx(StyledMenuItemDesktop, Object.assign({ onClick: () => {
+                                                    onLogoutClick === null || onLogoutClick === void 0 ? void 0 : onLogoutClick();
+                                                    handleCloseUserMenu();
+                                                } }, { children: jsxRuntime.jsx(material.Typography, Object.assign({ variant: "body1", textAlign: "center" }, { children: formatMessage({ id: `Logout` }) })) }), "logout")] }) }))] })), isMobile && (jsxRuntime.jsxs(material.Box, Object.assign({ sx: { flexGrow: 0, display: { xs: 'flex', md: 'none' } } }, { children: [jsxRuntime.jsx(material.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: anchorElNav ? (jsxRuntime.jsx(StyledCloseIcon, {})) : isPartnershipPageMobileView && scrolled ? (jsxRuntime.jsx(StyledButton$1, Object.assign({ variant: "contained", onClick: onPartnershipCTAClick }, { children: jsxRuntime.jsx(TypographyBtnText, Object.assign({ variant: "body1" }, { children: formatMessage({ id: 'Be Our Partner' }) })) }))) : isSeoPageView && scrolled && bannerData ? (jsxRuntime.jsx(StyledButtonBanner, Object.assign({ style: {
+                                            background: bannerData === null || bannerData === void 0 ? void 0 : bannerData.ctaBGColor,
+                                        }, variant: "contained", onClick: onGetQuoteClick }, { children: jsxRuntime.jsx(material.Typography, Object.assign({ style: {
+                                                color: bannerData === null || bannerData === void 0 ? void 0 : bannerData.ctaTextColor,
+                                                textTransform: 'none',
+                                            }, variant: "body1" }, { children: bannerData === null || bannerData === void 0 ? void 0 : bannerData.ctaText })) }))) : userToken ? (jsxRuntime.jsx(StyledAvatarUserIcon, Object.assign({ "data-testid": "user-profile-avatar" }, { children: firstName1stLetter }))) : (jsxRuntime.jsx(StyledMenuIcon, { ispartnershippagemobileview: isPartnershipPageMobileView, scrolled: scrolled })) })), jsxRuntime.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: [jsxRuntime.jsxs(DivLogoWrapper, { children: [jsxRuntime.jsx(DivLogo, { children: jsxRuntime.jsx("img", { src: logo, alt: "logo", width: "100%", height: "100%" }) }), jsxRuntime.jsx(DivCrossIconWrapper, { children: jsxRuntime.jsx(StyledCloseIconBtn, Object.assign({ size: "large", "aria-label": "close menu", "aria-controls": "menu-appbar", "aria-haspopup": "true", onClick: handleCloseNavMenu, color: "inherit" }, { children: jsxRuntime.jsx(CloseIcon, {}) })) })] }), userToken ? (userProfileComponent) : (jsxRuntime.jsxs(DivLoginActionContainer, { children: [jsxRuntime.jsx(material.Typography, Object.assign({ variant: "h6" }, { children: welcomeMessage || formatMessage({ id: 'Welcome' }) })), jsxRuntime.jsxs(DivButtonWrapper, { children: [jsxRuntime.jsx(ButtonAuth, Object.assign({ color: "primary", variant: "outlined", onClick: () => {
+                                                                onLoginClick === null || onLoginClick === void 0 ? void 0 : onLoginClick();
+                                                                handleCloseNavMenu();
+                                                            }, "data-testid": "headerLogin" }, { children: jsxRuntime.jsx(TypographyAuth, Object.assign({ variant: "body1" }, { children: formatMessage({ id: 'Log in' }) })) })), jsxRuntime.jsx(ButtonAuth, Object.assign({ color: "primary", variant: "contained", onClick: () => {
+                                                                onSignupClick === null || onSignupClick === void 0 ? void 0 : onSignupClick();
+                                                                handleCloseNavMenu();
+                                                            } }, { children: jsxRuntime.jsx(TypographyAuth, Object.assign({ variant: "body1" }, { children: formatMessage({ id: 'Sign up' }) })) }))] })] })), jsxRuntime.jsx(DivProductListing, { children: navigationLinks.map(({ key, name, icon }) => (jsxRuntime.jsxs(StyledMenuItem, Object.assign({ onClick: () => {
+                                                    onProductMenuClick === null || onProductMenuClick === void 0 ? void 0 : onProductMenuClick(key);
+                                                    handleCloseNavMenu();
+                                                }, "data-testid": `product-navigation-${key}` }, { children: [jsxRuntime.jsx(SpanImageWrapper, { children: jsxRuntime.jsx(ImageProductIcon, { src: icon, width: 18, height: 18, alt: name }) }), jsxRuntime.jsx(material.Typography, Object.assign({ variant: "body1", textAlign: "center" }, { children: formatMessage({ id: `${name}` }) }))] }), key))) }), jsxRuntime.jsxs(DivCommonMenus, { children: [userToken && (jsxRuntime.jsx(MenuItemOtherLinks, Object.assign({ onClick: () => {
+                                                        handleCloseNavMenu();
+                                                        onMyProfileClick === null || onMyProfileClick === void 0 ? void 0 : onMyProfileClick();
+                                                    } }, { children: jsxRuntime.jsx(material.Typography, Object.assign({ variant: "body1", textAlign: "center" }, { children: formatMessage({ id: 'My Policy' }) })) }))), (menuItems === null || menuItems === void 0 ? void 0 : menuItems.blog) && (jsxRuntime.jsx(MenuItemOtherLinks, Object.assign({ onClick: onBlogClick }, { children: jsxRuntime.jsx(material.Typography, Object.assign({ variant: "body1", textAlign: "center" }, { children: jsxRuntime.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) && (jsxRuntime.jsx(MenuItemOtherLinks, Object.assign({ onClick: () => {
+                                                        handleCloseNavMenu();
+                                                        onPartnershipClick === null || onPartnershipClick === void 0 ? void 0 : onPartnershipClick();
+                                                    } }, { children: jsxRuntime.jsx(material.Typography, Object.assign({ variant: "body1", textAlign: "center" }, { children: menuItems.partnership.label })) }))), (menuItems === null || menuItems === void 0 ? void 0 : menuItems.aboutUs) && (jsxRuntime.jsx(MenuItemOtherLinks, Object.assign({ onClick: () => {
+                                                        handleCloseNavMenu();
+                                                        onAboutUsClick === null || onAboutUsClick === void 0 ? void 0 : onAboutUsClick();
+                                                    } }, { children: jsxRuntime.jsx(material.Typography, Object.assign({ variant: "body1", textAlign: "center" }, { children: menuItems.aboutUs.label })) }))), jsxRuntime.jsxs(MenuItemOtherLinks, { children: [jsxRuntime.jsx(material.Typography, Object.assign({ variant: "body1", textAlign: "center" }, { children: formatMessage({ id: 'Language' }) })), jsxRuntime.jsx(material.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) => (jsxRuntime.jsx(StyledFormControlLabel, { value: lang.locale, control: jsxRuntime.jsx(material.Radio, {}), label: lang.label, "data-testid": `lang-${lang.locale}` }, lang.locale))) }))] })] }), isMobile && userToken && (jsxRuntime.jsx(DivLogoutBtnWrapper, { children: jsxRuntime.jsx(ButtonLogout, Object.assign({ onClick: onLogoutClick }, { children: formatMessage({ id: 'Logout' }) })) }))] }))] })))] })) })) }) })));
+}
+
+const StyledAppBar = styles.styled(material.AppBar)(({ theme }) => ({
+    backgroundColor: '#FFFFFF',
+    boxShadow: '0px 2px 20px 4px rgba(0, 0, 0, 0.14)',
+    zIndex: theme.zIndex.drawer + 1,
+}));
+const StyledToolbar = styles.styled(material.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 = styles.styled('div')(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    cursor: 'pointer',
+    height: '32px',
+}));
+const LogoImage = styles.styled('img')(({ theme }) => ({
+    height: '32px',
+    width: 'auto',
+    objectFit: 'contain',
+}));
+const MenuIconButton = styles.styled(material.IconButton)(({ theme }) => ({
+    padding: '6px',
+    borderRadius: '25px',
+    width: '40px',
+    height: '40px',
+    '& .MuiSvgIcon-root': {
+        color: '#000000',
+        fontSize: '24px',
+    },
+}));
+const StyledDrawer$2 = styles.styled(material.Drawer)(({ theme }) => ({
+    '& .MuiDrawer-paper': {
+        backgroundColor: '#FFFFFF',
+        boxSizing: 'border-box',
+    },
+}));
+const DrawerHeader$2 = styles.styled(material.Box)(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    padding: '12px 16px',
+    minHeight: '64px',
+}));
+const DrawerLogoContainer = styles.styled('div')(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    cursor: 'pointer',
+    height: '32px',
+}));
+const CloseIconButton = styles.styled(material.IconButton)(({ theme }) => ({
+    padding: '6px',
+    '& .MuiSvgIcon-root': {
+        color: '#000000',
+        fontSize: '24px',
+    },
+}));
+const DrawerContent$2 = styles.styled(material.Box)(({ theme }) => ({
+    flex: 1,
+    overflowY: 'auto',
+    paddingBottom: theme.spacing(2),
+}));
+styles.styled(material.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 = material.useTheme();
+    const themeBreakpoint = material.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__namespace.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 (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(StyledAppBar, Object.assign({ position: "fixed" }, { children: jsxRuntime.jsxs(StyledToolbar, Object.assign({ disableGutters: true }, { children: [jsxRuntime.jsx(LogoContainer$1, Object.assign({ onClick: handleLogoClick }, { children: jsxRuntime.jsx(LogoImage, { src: logo, alt: "Logo" }) })), jsxRuntime.jsx(MenuIconButton, Object.assign({ size: "large", edge: "end", "aria-label": "menu", onClick: handleDrawerOpen }, { children: jsxRuntime.jsx(MenuIcon, {}) }))] })) })), jsxRuntime.jsx(StyledDrawer$2, Object.assign({ anchor: "right", open: drawerOpen, onClose: handleDrawerClose }, { children: customDrawerContent ? (jsxRuntime.jsx(material.Box, Object.assign({ sx: { width: isMobile ? '100vw' : 350 } }, { children: customDrawerContent }))) : (jsxRuntime.jsxs(material.Box, Object.assign({ sx: { width: isMobile ? '100vw' : 350 } }, { children: [jsxRuntime.jsxs(DrawerHeader$2, { children: [jsxRuntime.jsx(DrawerLogoContainer, Object.assign({ onClick: handleLogoClick }, { children: jsxRuntime.jsx(LogoImage, { src: logo, alt: "Logo" }) })), jsxRuntime.jsx(CloseIconButton, Object.assign({ onClick: handleDrawerClose, "aria-label": "close" }, { children: jsxRuntime.jsx(CloseIcon, {}) }))] }), jsxRuntime.jsx(material.Divider, {}), jsxRuntime.jsxs(DrawerContent$2, { children: [navigationLinks.length > 0 && (jsxRuntime.jsx(material.List, { children: navigationLinks.map((item) => (jsxRuntime.jsx(material.ListItem, Object.assign({ disablePadding: true }, { children: jsxRuntime.jsx(material.ListItemButton, Object.assign({ onClick: () => handleMenuItemClick(item) }, { children: jsxRuntime.jsx(material.ListItemText, { primary: formatMessage({ id: item.label }) }) })) }), item.key))) })), additionalMenuSections.map((section, index) => (jsxRuntime.jsxs(React__namespace.Fragment, { children: [section.title && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(material.Divider, {}), jsxRuntime.jsx(material.Box, Object.assign({ sx: { px: 2, py: 1 } }, { children: jsxRuntime.jsx(material.ListItemText, { primary: formatMessage({ id: section.title }), primaryTypographyProps: {
+                                                            variant: 'caption',
+                                                            color: 'text.secondary',
+                                                        } }) }))] })), jsxRuntime.jsx(material.List, { children: section.items.map((item) => (jsxRuntime.jsx(material.ListItem, Object.assign({ disablePadding: true }, { children: jsxRuntime.jsx(material.ListItemButton, Object.assign({ onClick: () => handleMenuItemClick(item) }, { children: jsxRuntime.jsx(material.ListItemText, { primary: formatMessage({ id: item.label }) }) })) }), item.key))) })] }, index)))] })] }))) }))] }));
+}
+
+const DivFooter = styles.styled('div')(({ theme }) => ({
+    backgroundColor: '#424242',
+    padding: '20px 16px',
+    '@media (min-width: 769px)': {
+        padding: '70px 0px',
+    },
+    anchorLinks: {
+        color: 'inherit',
+        '&:hover': {
+            color: 'inherit',
+        },
+    },
+}));
+const DivFooterConterResponsiveLayout = styles.styled('div')(({ theme }) => ({
+    color: '#fff',
+    [theme.breakpoints.up(1025)]: {
+        minWidth: '1128px',
+        maxWidth: '1128px',
+        margin: '0 auto',
+    },
+}));
+const FooterHiddenContent = styles.styled('div')(({ theme, simplifiedLayout }) => simplifiedLayout ? { display: 'none' } : { display: 'flex' });
+const DivIglooIntro = styles.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 = styles.styled('div')(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    margin: '0 auto',
+    columnGap: '32px',
+    flexDirection: 'row',
+    '@media (min-width: 769px)': {
+        margin: 'initial',
+    },
+}));
+const ButtonIcon = styles.styled(material.Button)(({ 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 = styles.styled(material.Typography)(({ theme }) => ({
+    textAlign: 'center',
+    color: `#fff !important`,
+    '@media (min-width: 769px)': {
+        textAlign: 'left',
+    },
+}));
+const TypographyAddressFooter = styles.styled(material.Typography)(({ theme }) => ({
+    marginTop: 16,
+    textAlign: 'center',
+    color: '#fff',
+    '@media (min-width: 769px)': {
+        textAlign: 'left',
+    },
+}));
+const DivLogos = styles.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 = styles.styled('div')(({ theme }) => ({
+    display: 'flex',
+    flexDirection: 'row',
+    gap: 16,
+}));
+const ButtonOjkLink = styles.styled(material.Button)(({ theme }) => ({
+    display: 'flex',
+    justifyContent: 'flex-start',
+    '@media (min-width: 769px)': {
+        display: 'flex !important',
+        justifyContent: 'flex-start !important ',
+    },
+}));
+const ImageOjkLicense = styles.styled('img')(({ theme }) => ({
+    alignSelf: 'flex-start',
+    height: 36,
+}));
+const ButtonSolisoustamaLink = styles.styled(material.Button)(({ theme }) => ({
+    display: 'flex',
+    justifyContent: 'flex-start',
+}));
+const ImageSolisoustama = styles.styled('img')(({ theme }) => ({
+    height: 'auto',
+}));
+const DivLinks = styles.styled('div')(({ theme }) => ({
+    display: 'flex',
+    flex: 1,
+    alignItems: 'center',
+    gap: 16,
+    justifyContent: 'center',
+    '@media (min-width: 769px)': {
+        flex: '1 1',
+        alignItems: 'normal',
+    },
+}));
+const DivSection = styles.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 = styles.styled(material.Button)(({ theme }) => ({
+    color: '#fff !important',
+    textTransform: 'capitalize',
+    '@media (min-width: 769px)': {
+        padding: '0 !important',
+        textAlign: 'left !important',
+        minWidth: 'auto !important',
+    },
+}));
+const StyledDivider = styles.styled(material.Divider)(({ theme }) => ({
+    margin: '24px 0 16px !important',
+    borderColor: '#5F5E62 !important',
+}));
+const DivBottom = styles.styled('div')(({ theme }) => ({
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+}));
+const DivSep = styles.styled('div')(({ theme }) => ({
+    width: '1px',
+    height: 10,
+    borderRadius: '1px',
+    backgroundColor: '#fff',
+}));
+const AnchorLink = styles.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 = material.useTheme();
+    const themeBreakpoint = material.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 (jsxRuntime.jsx(DivFooter, { children: jsxRuntime.jsxs(DivFooterConterResponsiveLayout, { children: [jsxRuntime.jsxs(FooterHiddenContent, Object.assign({ simplifiedLayout: simplifiedLayout }, { children: [jsxRuntime.jsxs(DivIglooIntro, { children: [isMobile && (jsxRuntime.jsx(DivSocial, { children: socialLinks.map((social) => (jsxRuntime.jsx(ButtonIcon, Object.assign({ onClick: () => onSocialClick === null || onSocialClick === void 0 ? void 0 : onSocialClick(social.platform, social.url), "aria-label": social.ariaLabel || social.platform }, { children: jsxRuntime.jsx("img", { src: social.icon, alt: social.platform, loading: "lazy", height: "24px", width: "24px" }) }), social.platform))) })), jsxRuntime.jsx(TypographyIntro, Object.assign({ variant: "body2" }, { children: formatMessage({ id: introText }) })), addressText && (jsxRuntime.jsx(TypographyAddressFooter, Object.assign({ variant: "body2" }, { children: addressText }))), jsxRuntime.jsxs(DivLogos, { children: [jsxRuntime.jsx(DivFirstRow, { children: licenseImages.map((license, index) => (jsxRuntime.jsx(ButtonOjkLink, Object.assign({ onClick: () => license.url && window.open(license.url), "aria-label": license.ariaLabel || license.alt }, { children: jsxRuntime.jsx(ImageOjkLicense, { src: license.src, alt: license.alt, width: license.width, height: license.height, loading: "lazy" }) }), index))) }), poweredByImage && (jsxRuntime.jsx(ButtonSolisoustamaLink, Object.assign({ "aria-label": poweredByImage.ariaLabel || 'Powered by' }, { children: jsxRuntime.jsx(ImageSolisoustama, { src: poweredByImage.src, alt: poweredByImage.alt, width: poweredByImage.width, height: poweredByImage.height, loading: "lazy" }) })))] })] }), !isMobile && (jsxRuntime.jsx(DivLinks, { children: navigationLinks === null || navigationLinks === void 0 ? void 0 : navigationLinks.map((items, index) => (jsxRuntime.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 (jsxRuntime.jsx(ButtonBottomLink, Object.assign({ onClick: () => {
+                                                onLinkClick === null || onLinkClick === void 0 ? void 0 : onLinkClick(link);
+                                            } }, { children: jsxRuntime.jsx(material.Typography, Object.assign({ variant: "body1" }, { children: jsxRuntime.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 && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ButtonBottomLink, Object.assign({ onClick: onPrivacyPolicyClick }, { children: jsxRuntime.jsx(material.Typography, Object.assign({ variant: "body1" }, { children: jsxRuntime.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' }) })) })) })), jsxRuntime.jsx(ButtonBottomLink, Object.assign({ onClick: onTermsOfServiceClick }, { children: jsxRuntime.jsx(material.Typography, Object.assign({ variant: "body1" }, { children: jsxRuntime.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' }) })) })) })), jsxRuntime.jsx(DivSocial, { children: socialLinks.map((social) => (jsxRuntime.jsx(ButtonIcon, Object.assign({ onClick: () => onSocialClick === null || onSocialClick === void 0 ? void 0 : onSocialClick(social.platform, social.url), "aria-label": social.ariaLabel || social.platform }, { children: jsxRuntime.jsx(AnchorLink, Object.assign({ href: social.url, onClick: (e) => e === null || e === void 0 ? void 0 : e.preventDefault() }, { children: jsxRuntime.jsx("img", { src: social.icon, alt: social.platform, height: isMobile ? '24' : '28', width: isMobile ? '24' : '28', loading: "lazy" }) })) }), social.platform))) })] }))] }, index))) }))] })), isMobile && jsxRuntime.jsx(StyledDivider, {}), isMobile && (jsxRuntime.jsx(DivBottom, { children: jsxRuntime.jsxs(DivLinks, { children: [jsxRuntime.jsx("div", Object.assign({ onClick: onPrivacyPolicyClick, style: { cursor: 'pointer' } }, { children: jsxRuntime.jsx(material.Typography, Object.assign({ variant: "body2" }, { children: jsxRuntime.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' }) })) })) })), jsxRuntime.jsx(DivSep, {}), jsxRuntime.jsx("div", Object.assign({ onClick: onTermsOfServiceClick, style: { cursor: 'pointer' } }, { children: jsxRuntime.jsx(material.Typography, Object.assign({ variant: "body2" }, { children: jsxRuntime.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 = styles.styled(material.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 = styles.styled(material.Box)(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+    padding: '16px',
+    minHeight: '56px',
+}));
+const DrawerContent$1 = styles.styled(material.Box)(({ theme }) => ({
+    flex: 1,
+    overflowY: 'auto',
+    paddingBottom: theme.spacing(2),
+}));
+const DrawerFooter = styles.styled(material.Box)(({ theme }) => ({
+    padding: '16px',
+    backgroundColor: '#FFFFFF',
+    borderTop: 'none',
+    boxShadow: '0px -2px 8px rgba(0, 0, 0, 0.08)',
+}));
+styles.styled(material.Button)(({ theme }) => ({
+    minWidth: 'auto',
+    padding: 0,
+}));
+const HeaderSection = styles.styled(material.Box)(({ theme }) => ({
+    backgroundColor: '#FFFFFF',
+    padding: '16px',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '12px',
+}));
+const CategoryIcon = styles.styled(material.Box)(({ theme }) => ({
+    width: '32px',
+    height: '32px',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+}));
+const TitleText = styles.styled(material.Typography)(({ theme }) => ({
+    fontFamily: '"Montserrat", sans-serif',
+    fontWeight: 700,
+    fontSize: '20px',
+    lineHeight: '28px',
+    color: '#13131B',
+}));
+const SubtitleText = styles.styled(material.Typography)(({ theme }) => ({
+    fontFamily: '"Montserrat", sans-serif',
+    fontWeight: 400,
+    fontSize: '14px',
+    lineHeight: '18px',
+    color: '#5F5E62',
+}));
+const FooterButtons = styles.styled(material.Box)(({ theme }) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '16px',
+    width: '100%',
+}));
+// Base button styles - colors will be injected via sx prop from component
+const PrimaryButton = styles.styled(material.Button)(({ 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 = styles.styled(material.Button)(({ 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 = material.useTheme();
+    material.useMediaQuery((_a = muiTheme === null || muiTheme === void 0 ? void 0 : muiTheme.breakpoints) === null || _a === void 0 ? void 0 : _a.down('md'));
+    const tenantTheme = useTenantTheme();
+    // Get primary color from tenant theme, fallback to default
+    const primaryColor = ((_d = (_c = (_b = tenantTheme === null || tenantTheme === void 0 ? void 0 : tenantTheme.theme) === null || _b === void 0 ? void 0 : _b.palette) === null || _c === void 0 ? void 0 : _c.primary) === null || _d === void 0 ? void 0 : _d.main) || '#317abc';
+    const primaryDark = ((_g = (_f = (_e = tenantTheme === null || tenantTheme === void 0 ? void 0 : tenantTheme.theme) === null || _e === void 0 ? void 0 : _e.palette) === null || _f === void 0 ? void 0 : _f.primary) === null || _g === void 0 ? void 0 : _g.dark) || '#2869a8';
+    // Helper to convert hex to rgba
+    const hexToRgba = (hex, alpha) => {
+        const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+        if (result) {
+            const r = parseInt(result[1], 16);
+            const g = parseInt(result[2], 16);
+            const b = parseInt(result[3], 16);
+            return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+        }
+        return `rgba(49, 122, 188, ${alpha})`;
+    };
+    const handleClose = () => {
+        onClose();
+    };
+    const handleBackOrClose = () => {
+        if (showBackButton && onBack) {
+            onBack();
+        }
+        else {
+            onClose();
+        }
+    };
+    return (jsxRuntime.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: jsxRuntime.jsxs(material.Box, Object.assign({ sx: { display: 'flex', flexDirection: 'column', height: '100%' } }, { children: [jsxRuntime.jsx(DrawerHeader$1, { children: jsxRuntime.jsx(material.IconButton, Object.assign({ onClick: handleBackOrClose, sx: { padding: 0 }, "aria-label": showBackButton ? 'back' : 'close' }, { children: showBackButton ? jsxRuntime.jsx(ArrowBackIcon, {}) : jsxRuntime.jsx(CloseIcon, {}) })) }), (title || subtitle || headerIcon) && (jsxRuntime.jsxs(HeaderSection, { children: [headerIcon && (jsxRuntime.jsx(CategoryIcon, { children: jsxRuntime.jsx("img", { src: headerIcon, alt: "Category icon", width: 32, height: 32 }) })), title && (jsxRuntime.jsx(TitleText, Object.assign({ variant: "h5" }, { children: formatMessage({ id: title }) }))), subtitle && (jsxRuntime.jsx(SubtitleText, Object.assign({ variant: "body2" }, { children: formatMessage({ id: subtitle }) })))] })), jsxRuntime.jsx(DrawerContent$1, { children: children }), showFooter && (jsxRuntime.jsx(DrawerFooter, { children: customFooter ? (customFooter) : (jsxRuntime.jsxs(FooterButtons, { children: [primaryButtonText && (jsxRuntime.jsx(PrimaryButton, Object.assign({ variant: "contained", fullWidth: true, onClick: onPrimaryAction, disabled: primaryButtonDisabled, sx: {
+                                    backgroundColor: primaryColor,
+                                    '&:hover': {
+                                        backgroundColor: primaryDark,
+                                    },
+                                } }, { children: formatMessage({ id: primaryButtonText }) }))), secondaryButtonText && (jsxRuntime.jsx(SecondaryButton, Object.assign({ variant: "text", fullWidth: true, onClick: onSecondaryAction, sx: {
+                                    color: primaryColor,
+                                    '&:hover': {
+                                        backgroundColor: hexToRgba(primaryColor, 0.08),
+                                    },
+                                } }, { children: formatMessage({ id: secondaryButtonText }) })))] })) }))] })) })));
+}
+
+const StyledDrawer = material.styled(material.Drawer)(({ theme }) => ({
+    zIndex: 1300,
+    '& .MuiDrawer-paper': {
+        borderTopLeftRadius: '8px',
+        borderTopRightRadius: '8px',
+        maxHeight: '90vh',
+    },
+}));
+const DrawerContent = material.styled(material.Box)({
+    display: 'flex',
+    flexDirection: 'column',
+    width: '100%',
+    backgroundColor: '#ffffff',
+});
+const DrawerHeader = material.styled(material.Box)({
+    display: 'flex',
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+    padding: '16px 16px 0',
+    backgroundColor: '#ffffff',
+});
+const CloseButtonContainer = material.styled(material.Box)({
+    width: '24px',
+    height: '24px',
+});
+const Header = material.styled(material.Box)({
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '6px',
+    padding: '16px',
+    backgroundColor: '#ffffff',
+});
+const HeaderTitle = material.styled(material.Typography)({
+    fontFamily: 'Montserrat, sans-serif',
+    fontSize: '20px',
+    fontWeight: 700,
+    lineHeight: '28px',
+    color: '#13131b',
+});
+const HeaderSubtitle = material.styled(material.Typography)({
+    fontFamily: 'Montserrat, sans-serif',
+    fontSize: '14px',
+    fontWeight: 400,
+    lineHeight: '18px',
+    color: 'rgba(0, 0, 0, 0.6)',
+});
+const ProductsContainer = material.styled(material.Box)({
+    padding: '16px',
+    backgroundColor: '#ffffff',
+});
+const ProductsGrid = material.styled(material.Box)({
+    display: 'grid',
+    gridTemplateColumns: 'repeat(2, 1fr)',
+    gap: '12px',
+});
+const ProductCard$1 = material.styled(material.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 = material.styled(material.Box)({
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '6px',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flex: 1,
+});
+const ProductLogo = material.styled(material.Box)({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: '4px',
+});
+const ProductName$1 = material.styled(material.Typography)({
+    fontFamily: 'Montserrat, sans-serif',
+    fontSize: '14px',
+    fontWeight: 700,
+    lineHeight: '22px',
+    color: '#13131b',
+    textAlign: 'center',
+});
+const ProductType = material.styled(material.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 = material.styled(material.Button)({
+    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 (jsxRuntime.jsx(StyledDrawer, Object.assign({ anchor: "bottom", open: open, onClose: onClose }, { children: jsxRuntime.jsxs(DrawerContent, { children: [jsxRuntime.jsx(DrawerHeader, { children: jsxRuntime.jsx(CloseButtonContainer, { children: jsxRuntime.jsx(material.IconButton, Object.assign({ onClick: onClose, sx: { padding: 0 } }, { children: jsxRuntime.jsx(CloseIcon, { sx: { fontSize: 24, color: '#13131b' } }) })) }) }), jsxRuntime.jsxs(Header, { children: [jsxRuntime.jsx(HeaderTitle, { children: title }), jsxRuntime.jsx(HeaderSubtitle, { children: subtitle })] }), jsxRuntime.jsx(ProductsContainer, { children: jsxRuntime.jsx(ProductsGrid, { children: products.map((product) => (jsxRuntime.jsxs(ProductCard$1, { children: [jsxRuntime.jsxs(ProductInfo$1, { children: [jsxRuntime.jsx(ProductLogo, { children: jsxRuntime.jsx("img", { src: product.logo, alt: product.name, style: {
+                                                    width: '88px',
+                                                    height: '32px',
+                                                    objectFit: 'cover',
+                                                } }) }), jsxRuntime.jsxs(material.Box, Object.assign({ sx: { textAlign: 'center', width: '100%' } }, { children: [jsxRuntime.jsx(ProductName$1, { children: product.name }), jsxRuntime.jsx(ProductType, { children: product.type })] }))] }), jsxRuntime.jsx(ViewPlansButton, Object.assign({ variant: "contained", fullWidth: true, onClick: () => onProductSelect(product.id), sx: {
+                                        backgroundColor: primaryColor,
+                                        '&:hover': {
+                                            backgroundColor: primaryDark,
+                                        },
+                                        '&:active': {
+                                            backgroundColor: primaryDarker,
+                                        },
+                                    } }, { children: viewPlansButtonText }))] }, product.id))) }) })] }) })));
+}
+
+const QuestionContainer$1 = styles.styled(material.Box)(({ theme }) => ({
+    backgroundColor: '#FFFFFF',
+    padding: '12px 16px',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '16px',
+    width: '100%',
+}));
+const QuestionHeader = styles.styled(material.Box)(({ theme }) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '6px',
+    width: '100%',
+}));
+const QuestionTitle = styles.styled(material.Typography)(({ theme }) => ({
+    fontFamily: '"Montserrat", sans-serif',
+    fontWeight: 600,
+    fontSize: '14px',
+    lineHeight: '20px',
+    color: '#13131B',
+}));
+const QuestionSubtext = styles.styled(material.Typography)(({ theme }) => ({
+    fontFamily: '"Montserrat", sans-serif',
+    fontWeight: 400,
+    fontSize: '12px',
+    lineHeight: '16px',
+    color: '#5F5E62',
+}));
+const OptionsContainer$1 = styles.styled(material.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 (jsxRuntime.jsxs(QuestionContainer$1, { children: [jsxRuntime.jsxs(QuestionHeader, { children: [jsxRuntime.jsxs(QuestionTitle, Object.assign({ variant: "subtitle1" }, { children: [questionNumber && `${questionNumber}. `, formatMessage({ id: question })] })), helperText && (jsxRuntime.jsx(QuestionSubtext, Object.assign({ variant: "caption" }, { children: formatMessage({ id: helperText }) })))] }), jsxRuntime.jsx(OptionsContainer$1, { children: options.map((option) => {
+                    const selected = isSelected(option.value);
+                    if (renderOption) {
+                        return renderOption(option, selected);
+                    }
+                    // Default rendering handled by parent or OptionButton component
+                    return null;
+                }) })] }));
+}
+
+const StyledOptionButton = styles.styled(material.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 = styles.styled(material.Box)(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: '8px',
+    width: '100%',
+}));
+const OptionIcon = styles.styled('span')(({ theme }) => ({
+    fontSize: '18px',
+    lineHeight: 1,
+    flexShrink: 0,
+}));
+const OptionLabel = styles.styled(material.Typography)(({ theme, selected, disabled }) => ({
+    fontFamily: '"Montserrat", sans-serif',
+    fontWeight: selected ? 600 : 500,
+    fontSize: '14px',
+    lineHeight: '20px',
+    color: disabled ? 'rgba(0, 0, 0, 0.4)' : '#13131B',
+    textAlign: 'center',
+}));
+
+/**
+ * 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 (jsxRuntime.jsx(StyledOptionButton, Object.assign({ selected: selected, disabled: disabled, onClick: handleClick, size: size, fullWidth: fullWidth }, { children: jsxRuntime.jsxs(OptionContent, { children: [icon && jsxRuntime.jsx(OptionIcon, { children: icon }), jsxRuntime.jsx(OptionLabel, Object.assign({ selected: selected, disabled: disabled, variant: "body2" }, { children: formatMessage({ id: label }) }))] }) })));
+}
+
+const ToggleContainer$1 = styles.styled(material.Box)(({ theme }) => ({
+    backgroundColor: '#F9F9F9',
+    borderRadius: '40px',
+    display: 'flex',
+    gap: '6px',
+    height: '48px',
+    padding: '0',
+    width: '100%',
+}));
+const ToggleButton$1 = styles.styled(material.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 = styles.styled(material.Box)(({ theme }) => ({
+    backgroundColor: '#FFFFFF',
+    borderRadius: '50px',
+    width: '32px',
+    height: '32px',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: '6px',
+}));
+const ToggleLabel = styles.styled(material.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 (jsxRuntime.jsx(ToggleContainer$1, { children: options.map((option) => (jsxRuntime.jsxs(ToggleButton$1, Object.assign({ selected: value === option.value, onClick: () => onChange(option.value) }, { children: [option.icon && (jsxRuntime.jsx(ToggleIcon, { children: jsxRuntime.jsx("img", { src: option.icon, alt: option.label, width: 19.2, height: 19.2 }) })), jsxRuntime.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
+ * @param theme - Tenant theme configuration (can be undefined/null for SSR)
  * @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) {
@@ -435,15 +1981,22 @@ 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) {
-    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) });
+    // 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 });
 }
 /**
  * Create CSS variables from tenant theme
@@ -478,21 +2031,1231 @@ function createThemeCSSVariables(theme, prefix = '--tenant') {
     return variables;
 }
 
+const ToggleContainer = styles.styled(material.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 = styles.styled(material.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 = styles.styled(material.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 (jsxRuntime.jsxs(ToggleContainer, Object.assign({ sx: {
+            backgroundColor: toggleBgColor,
+        } }, { children: [jsxRuntime.jsx(ToggleButton, Object.assign({ active: value === 'monthly', onClick: () => onChange('monthly'), sx: {
+                    backgroundColor: value === 'monthly' ? toggleActiveColor : 'transparent',
+                    color: value === 'monthly'
+                        ? toggleActiveTextColor
+                        : toggleInactiveTextColor,
+                } }, { children: jsxRuntime.jsx(ToggleText, { children: formatMessage({
+                        id: 'Billed monthly',
+                        defaultMessage: 'Billed monthly',
+                    }) }) })), jsxRuntime.jsx(ToggleButton, Object.assign({ active: value === 'annually', onClick: () => onChange('annually'), sx: {
+                    backgroundColor: value === 'annually' ? toggleActiveColor : 'transparent',
+                    color: value === 'annually'
+                        ? toggleActiveTextColor
+                        : toggleInactiveTextColor,
+                } }, { children: jsxRuntime.jsx(ToggleText, { children: formatMessage({
+                        id: 'Billed annually',
+                        defaultMessage: 'Billed annually',
+                    }) }) }))] })));
+}
+
+const CalloutContainer = styles.styled(material.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 = styles.styled(material.Box)(({ theme }) => ({
+    display: 'flex',
+    gap: '4px',
+    alignItems: 'center',
+}));
+const CalloutIcon = styles.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 = styles.styled(material.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 = styles.styled(material.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 (jsxRuntime.jsxs(CalloutContainer, Object.assign({ sx: {
+            backgroundColor: calloutBgColor,
+            border: `1px solid ${calloutBorderColor}`,
+        } }, { children: [jsxRuntime.jsxs(CalloutHeader, { children: [jsxRuntime.jsx(CalloutIcon, { sx: { color: textColor } }), jsxRuntime.jsx(CalloutTitle, Object.assign({ sx: { color: textColor } }, { children: formatMessage({
+                            id: title,
+                            defaultMessage: title,
+                        }) }))] }), jsxRuntime.jsx(CalloutText, Object.assign({ sx: { color: subtitleColor } }, { children: children }))] })));
+}
+
+const SliderContainer = styles.styled(material.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 = styles.styled(material.Box)(({ theme }) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '8px',
+    width: '100%',
+}));
+const InputLabel = styles.styled(material.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 = styles.styled(material.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 = styles.styled(material.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,
+    });
+});
+styles.styled(material.Box)(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    position: 'relative',
+    width: '100%',
+    maxWidth: 'initial',
+    height: '4px',
+}));
+styles.styled(material.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',
+    });
+});
+styles.styled(material.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',
+        },
+    });
+});
+styles.styled(material.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',
+    },
+}));
+styles.styled(material.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',
+    });
+});
+styles.styled(material.Box)(({ theme }) => ({
+    display: 'flex',
+    justifyContent: 'space-between',
+    width: '100%',
+    maxWidth: 'initial', // Match slider track width
+}));
+const RangeLabel = styles.styled(material.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 = styles.styled(material.Slider)(({ theme, sliderActiveColor, sliderInactiveColor }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    return ({
+        width: '100%',
+        marginBottom: '0px !important',
+        padding: '7px 0px !important',
+        '& .MuiSlider-markLabel': {
+            display: 'none',
+        },
+        '& .MuiSlider-mark': {
+            width: 10,
+            height: 10,
+            borderRadius: '50%',
+            backgroundColor: sliderInactiveColor || ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _a === void 0 ? void 0 : _a.ui) === null || _b === void 0 ? void 0 : _b.sliderInactive) || '#c8c5ca',
+        },
+        '& .MuiSlider-track': {
+            height: 4,
+            backgroundColor: sliderActiveColor || ((_d = (_c = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _c === void 0 ? void 0 : _c.ui) === null || _d === void 0 ? void 0 : _d.sliderActive) || '#317abc',
+        },
+        '& .MuiSlider-rail': {
+            height: 4,
+            backgroundColor: sliderInactiveColor || ((_f = (_e = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _e === void 0 ? void 0 : _e.ui) === null || _f === void 0 ? void 0 : _f.sliderInactive) || '#c8c5ca',
+        },
+        '& .MuiSlider-markActive': {
+            backgroundColor: sliderActiveColor || ((_h = (_g = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _g === void 0 ? void 0 : _g.ui) === null || _h === void 0 ? void 0 : _h.sliderActive) || '#317abc',
+        },
+        '& .MuiSlider-thumb': {
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            height: 18,
+            width: 18,
+            backgroundColor: '#ffffff',
+            border: 'none',
+            cursor: 'pointer',
+            borderRadius: '50%',
+            boxShadow: '0px 2px 20px 4px rgba(0, 0, 0, 0.14)',
+            color: `${sliderActiveColor || ((_k = (_j = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _j === void 0 ? void 0 : _j.ui) === null || _k === void 0 ? void 0 : _k.sliderActive) || '#317abc'} !important`,
+            transform: 'translate(-50%, -50%) !important',
+            '&::before': {
+                content: '""',
+                width: '13px',
+                height: '10px',
+                backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='${encodeURIComponent(sliderActiveColor || '#317abc')}'%3E%3Cpath d='M4 18h16v-2H4v2zm0-5h16v-2H4v2zm0-7v2h16V6H4z'/%3E%3C/svg%3E")`,
+                backgroundRepeat: 'no-repeat',
+                backgroundPosition: 'center',
+                backgroundSize: 'contain',
+            },
+            '&:hover': {
+                boxShadow: '0px 2px 20px 4px rgba(0, 0, 0, 0.2)',
+            },
+            '&.Mui-focusVisible': {
+                boxShadow: '0px 2px 20px 4px rgba(0, 0, 0, 0.2)',
+            },
+            '&.Mui-active': {
+                boxShadow: '0px 2px 20px 4px rgba(0, 0, 0, 0.2)',
+            },
+        },
+    });
+});
+const SliderLabelsContainer = styles.styled(material.Box)(({ theme }) => ({
+    display: 'flex',
+    justifyContent: 'space-between',
+    width: '100%',
+    marginTop: '6px',
+}));
+
+/**
+ * CoverageAmountSlider - Interactive slider for selecting coverage amounts
+ *
+ * @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] = React.useState(value);
+    const [sliderIndex, setSliderIndex] = React.useState(0);
+    // Get theme colors with SSR-safe fallbacks
+    const sliderActiveColor = getThemeColor(theme, 'ui.sliderActive', '#317abc');
+    const sliderInactiveColor = getThemeColor(theme, 'ui.sliderInactive', '#c8c5ca');
+    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 } = React.useMemo(() => {
+        const stepAmount = (max - min) / (steps - 1);
+        const marks = [];
+        for (let i = 0; i < steps; i++) {
+            const coverageValue = min + stepAmount * i;
+            marks.push({
+                value: i * 10,
+                label: `${(coverageValue / 1000).toFixed(0)}k`,
+                coverageVal: coverageValue,
+            });
+        }
+        // Find the default slider position based on the initial value
+        const defaultIdx = marks.findIndex((m) => m.coverageVal >= value) || 0;
+        return {
+            sliderMarks: marks,
+            stepSize: 10,
+            maxSliderValue: (steps - 1) * 10,
+            defaultSliderValue: defaultIdx * 10,
+        };
+    }, [min, max, steps, value]);
+    React.useEffect(() => {
+        setLocalValue(value);
+        // 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 (jsxRuntime.jsxs(SliderContainer, Object.assign({ sx: {
+            backgroundColor: sliderBgColor,
+        } }, { children: [jsxRuntime.jsxs(InputSection, { children: [jsxRuntime.jsx(InputLabel, Object.assign({ sx: { color: textColor } }, { children: label })), jsxRuntime.jsxs(InputContainer, Object.assign({ sx: {
+                            backgroundColor: inputBgColor,
+                            border: `1px solid ${inputBorderColor}`,
+                            opacity: disabled ? 0.5 : 1,
+                        } }, { children: [jsxRuntime.jsx(material.IconButton, Object.assign({ onClick: handleDecrease, disabled: disabled, sx: {
+                                    padding: 0,
+                                    width: '24px',
+                                    height: '24px',
+                                    color: textColor,
+                                } }, { children: jsxRuntime.jsx(RemoveIcon, { sx: { fontSize: 24 } }) })), jsxRuntime.jsx(InputValue, Object.assign({ sx: { color: textColor } }, { children: formatCurrency(localValue) })), jsxRuntime.jsx(material.IconButton, Object.assign({ onClick: handleIncrease, disabled: disabled, sx: {
+                                    padding: 0,
+                                    width: '24px',
+                                    height: '24px',
+                                    color: textColor,
+                                } }, { children: jsxRuntime.jsx(AddIcon, { sx: { fontSize: 24 } }) }))] }))] }), jsxRuntime.jsxs(material.Box, Object.assign({ sx: { display: 'flex', flexDirection: 'column', width: '100%' } }, { children: [jsxRuntime.jsx(StyledMuiSlider, { value: sliderIndex, defaultValue: defaultSliderValue, step: stepSize, min: 0, max: maxSliderValue, marks: sliderMarks, valueLabelDisplay: "off", onChange: handleSliderChange, disabled: disabled, sliderActiveColor: sliderActiveColor, sliderInactiveColor: sliderInactiveColor }), jsxRuntime.jsx(SliderLabelsContainer, { children: sliderMarks.map((mark, index) => (jsxRuntime.jsx(RangeLabel, Object.assign({ sx: {
+                                color: sliderIndex === mark.value
+                                    ? sliderActiveColor
+                                    : labelColor,
+                                textAlign: index === 0 ? 'left' : index === sliderMarks.length - 1 ? 'right' : 'center',
+                                flex: index === 0 || index === sliderMarks.length - 1 ? 'none' : 1,
+                            } }, { children: mark.label }), index))) })] }))] })));
+}
+
+const ProgressBarContainer = styles.styled(material.Box)({
+    display: 'flex',
+    alignItems: 'center',
+    gap: '8px',
+    padding: '16px',
+});
+const ProgressBar = styles.styled(material.Box)({
+    display: 'flex',
+    alignItems: 'center',
+    flex: 1,
+    height: '4px',
+    backgroundColor: 'rgba(0, 0, 0, 0.1)',
+    borderRadius: '2px',
+    overflow: 'hidden',
+});
+const ProgressFill = styles.styled(material.Box)(({ width, progressBarTheme }) => ({
+    height: '100%',
+    width: `${width}%`,
+    background: progressBarTheme || 'linear-gradient(90deg, #0090DA 0.06%, #A4CE4E 99.94%)',
+    transition: 'width 0.3s ease',
+}));
+const ProgressText = styles.styled(material.Typography)({
+    fontFamily: 'Montserrat',
+    fontSize: '12px',
+    color: '#5F5E62',
+    fontWeight: 400,
+    lineHeight: '16px',
+});
+
+const CheckoutProgress = ({ currentStep, totalSteps, onBack, showBackButton = true, progressBarTheme, sx, }) => {
+    const progressPercentage = ((currentStep + 1) / totalSteps) * 100;
+    return (jsxRuntime.jsxs(ProgressBarContainer, Object.assign({ sx: sx }, { children: [showBackButton && onBack && (jsxRuntime.jsx(material.IconButton, Object.assign({ onClick: onBack, sx: { p: 0, width: '24px', height: '24px' }, "aria-label": "Go back" }, { children: jsxRuntime.jsx(ArrowBackIcon, { sx: { fontSize: '20px', color: '#13131B' } }) }))), jsxRuntime.jsx(ProgressBar, { children: jsxRuntime.jsx(ProgressFill, { width: progressPercentage, progressBarTheme: progressBarTheme }) }), jsxRuntime.jsxs(ProgressText, { children: [currentStep + 1, "/", totalSteps] })] })));
+};
+
+const ProductCardContainer = styles.styled(material.Box)(({ theme, showIndicator }) => {
+    var _a, _b;
+    return (Object.assign({ backgroundColor: '#fff', boxShadow: '0px 2px 10px 0px rgba(0, 0, 0, 0.12)', borderRadius: '8px', padding: '12px 20px 12px 12px', display: 'flex', gap: '4px', alignItems: 'center', position: 'relative' }, (showIndicator && {
+        '&::before': {
+            content: '""',
+            position: 'absolute',
+            left: 0,
+            top: 0,
+            width: '8px',
+            height: '64px',
+            borderRadius: '0 0 8px 8px',
+            backgroundColor: ((_b = (_a = theme.palette) === null || _a === void 0 ? void 0 : _a.primary) === null || _b === void 0 ? void 0 : _b.main) || '#13131B',
+        },
+    })));
+});
+const LogoContainer = styles.styled(material.Box)({
+    width: '45px',
+    height: '40px',
+    border: '1.25px solid rgba(0, 0, 0, 0.1)',
+    borderRadius: '10px',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexShrink: 0,
+    marginLeft: '8px',
+});
+const ProductInfo = styles.styled(material.Box)({
+    flex: 1,
+    marginLeft: '4px',
+});
+const ProductName = styles.styled(material.Typography)({
+    fontFamily: 'Montserrat',
+    fontSize: '14px',
+    fontWeight: 600,
+    color: '#13131B',
+    lineHeight: '20px',
+});
+const PlanName = styles.styled(material.Typography)({
+    fontFamily: 'Montserrat',
+    fontSize: '12px',
+    fontWeight: 400,
+    color: '#13131B',
+    lineHeight: '16px',
+});
+const PriceContainer = styles.styled(material.Box)({
+    display: 'flex',
+    alignItems: 'baseline',
+    gap: '2px',
+});
+const Price = styles.styled(material.Typography)({
+    fontFamily: 'Montserrat',
+    fontSize: '14px',
+    fontWeight: 600,
+    color: '#13131B',
+    lineHeight: '20px',
+});
+const PricePeriod = styles.styled(material.Typography)({
+    fontFamily: 'Montserrat',
+    fontSize: '12px',
+    fontWeight: 400,
+    color: '#13131B',
+    lineHeight: '16px',
+});
+
+const ProductCard = ({ productName, planName, logoUrl, price, currency = 'RM', period = '/month', sx, showIndicator = true, }) => {
+    return (jsxRuntime.jsxs(ProductCardContainer, Object.assign({ sx: sx, showIndicator: showIndicator }, { children: [logoUrl && (jsxRuntime.jsx(LogoContainer, { children: jsxRuntime.jsx("img", { src: logoUrl, alt: productName, style: { maxWidth: '100%', maxHeight: '100%' } }) })), jsxRuntime.jsxs(ProductInfo, { children: [jsxRuntime.jsx(ProductName, { children: productName }), planName && jsxRuntime.jsx(PlanName, { children: planName })] }), jsxRuntime.jsxs(PriceContainer, { children: [jsxRuntime.jsxs(Price, { children: [currency, " ", price] }), jsxRuntime.jsx(PricePeriod, { children: period })] })] })));
+};
+
+const HeaderContainer = styles.styled(material.Box)(({ sticky }) => (Object.assign(Object.assign({}, (sticky && {
+    position: 'sticky',
+    top: 0,
+    zIndex: 1000,
+})), { backgroundColor: '#fff', width: '100%' })));
+const SectionHeader = styles.styled(material.Box)({
+    padding: '0 16px 24px',
+});
+const SectionTitle$1 = styles.styled(material.Typography)({
+    fontFamily: 'Montserrat',
+    fontSize: '20px',
+    fontWeight: 700,
+    color: '#13131B',
+    lineHeight: '28px',
+    marginBottom: '8px',
+});
+const SectionDescription = styles.styled(material.Typography)({
+    fontFamily: 'Montserrat',
+    fontSize: '14px',
+    fontWeight: 400,
+    color: '#5F5E62',
+    lineHeight: '18px',
+});
+
+const CheckoutHeader = ({ progress, product, sectionTitle, sectionDescription, sticky = true, progressBarTheme, sx, }) => {
+    return (jsxRuntime.jsxs(HeaderContainer, Object.assign({ sticky: sticky, sx: sx }, { children: [jsxRuntime.jsx(CheckoutProgress, Object.assign({}, progress, { progressBarTheme: progressBarTheme })), product && (jsxRuntime.jsx(material.Box, Object.assign({ sx: { padding: '0 16px 24px' } }, { children: jsxRuntime.jsx(ProductCard, Object.assign({}, product)) }))), jsxRuntime.jsxs(SectionHeader, { children: [jsxRuntime.jsx(SectionTitle$1, { children: sectionTitle }), jsxRuntime.jsx(SectionDescription, { children: sectionDescription })] })] })));
+};
+
+const ButtonContainer = styles.styled(material.Box)(({ isFixed }) => ({
+    position: isFixed ? 'fixed' : 'relative',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    backgroundColor: '#fff',
+    padding: '16px',
+    boxShadow: isFixed ? '0px 2px 10px 0px rgba(0, 0, 0, 0.12)' : 'none',
+    zIndex: 999,
+}));
+const StyledButton = styles.styled('button')(({ theme, isDisabled }) => {
+    var _a, _b, _c, _d;
+    return ({
+        width: '100%',
+        height: '48px',
+        borderRadius: '8px',
+        border: 'none',
+        backgroundColor: isDisabled
+            ? '#E1E2EB'
+            : ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _a === void 0 ? void 0 : _a.primary) === null || _b === void 0 ? void 0 : _b.main) || '#13131B',
+        color: isDisabled ? '#929094' : '#fff',
+        fontFamily: 'Montserrat',
+        fontSize: '14px',
+        fontWeight: 500,
+        lineHeight: '18px',
+        cursor: isDisabled ? 'not-allowed' : 'pointer',
+        transition: 'all 0.2s ease',
+        '&:hover': {
+            backgroundColor: isDisabled
+                ? '#E1E2EB'
+                : ((_d = (_c = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _c === void 0 ? void 0 : _c.primary) === null || _d === void 0 ? void 0 : _d.dark) || '#2a2a33',
+        },
+    });
+});
+
+const CheckoutFormButton = ({ text = 'Next', disabled = false, onClick, fixed = true, type = 'button', sx, loading = false, }) => {
+    return (jsxRuntime.jsx(ButtonContainer, Object.assign({ isFixed: fixed, sx: sx }, { children: jsxRuntime.jsx(StyledButton, Object.assign({ type: type, disabled: disabled || loading, isDisabled: disabled || loading, onClick: onClick }, { children: loading ? 'Processing...' : text })) })));
+};
+
+const QuestionContainer = styles.styled(material.Box)({
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '8px',
+    marginBottom: '24px',
+});
+const QuestionText = styles.styled(material.Typography)({
+    fontFamily: 'Montserrat',
+    fontSize: '14px',
+    fontWeight: 400,
+    color: '#13131B',
+    lineHeight: '20px',
+});
+const OptionsContainer = styles.styled(material.Box)({
+    display: 'flex',
+    gap: '16px',
+    marginTop: '12px',
+});
+const OptionButton = styles.styled(material.Box)(({ selected }) => ({
+    flex: 1,
+    height: '48px',
+    border: `1px solid ${selected ? '#13131B' : '#929094'}`,
+    borderRadius: '8px',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    cursor: 'pointer',
+    backgroundColor: selected ? '#F5F5F7' : '#fff',
+    transition: 'all 0.2s ease',
+    '&:hover': {
+        borderColor: '#13131B',
+    },
+}));
+const OptionText = styles.styled(material.Typography)(({ selected }) => ({
+    fontFamily: 'Montserrat',
+    fontSize: '14px',
+    fontWeight: 600,
+    color: selected ? '#13131B' : '#5F5E62',
+    lineHeight: '20px',
+}));
+
+const HealthQuestionGroup = ({ question, questionNumber, value, onChange, error, labels = { yes: 'Yes', no: 'No' }, sx, }) => {
+    return (jsxRuntime.jsxs(QuestionContainer, Object.assign({ sx: sx }, { children: [jsxRuntime.jsxs(QuestionText, { children: [questionNumber && `${questionNumber}. `, question] }), jsxRuntime.jsxs(OptionsContainer, { children: [jsxRuntime.jsx(OptionButton, Object.assign({ selected: value === 'yes', onClick: () => onChange('yes'), role: "button", "aria-pressed": value === 'yes' }, { children: jsxRuntime.jsx(OptionText, Object.assign({ selected: value === 'yes' }, { children: labels.yes || 'Yes' })) })), jsxRuntime.jsx(OptionButton, Object.assign({ selected: value === 'no', onClick: () => onChange('no'), role: "button", "aria-pressed": value === 'no' }, { children: jsxRuntime.jsx(OptionText, Object.assign({ selected: value === 'no' }, { children: labels.no || 'No' })) }))] }), error && (jsxRuntime.jsx(material.Typography, Object.assign({ sx: {
+                    color: 'error.main',
+                    fontSize: '12px',
+                    mt: 0.5,
+                    ml: 2,
+                } }, { children: error })))] })));
+};
+
+const FormContainer$3 = styles.styled(material.Box)({
+    padding: '0 16px 100px',
+});
+const CheckboxContainer$1 = styles.styled(material.Box)({
+    marginTop: '12px',
+    '& .MuiFormControlLabel-root': {
+        alignItems: 'flex-start',
+        marginLeft: 0,
+    },
+    '& .MuiCheckbox-root': {
+        padding: '4px 8px 4px 0',
+    },
+});
+const CheckboxLabel$1 = styles.styled(material.Typography)({
+    fontFamily: 'Montserrat',
+    fontSize: '14px',
+    fontWeight: 400,
+    color: '#5F5E62',
+    lineHeight: '18px',
+});
+
+const PersonalInformationForm = ({ renderField, fields, consents, onSubmit, formRef, sx, }) => {
+    const defaultBankConfirmationLabel = 'I confirm this bank account is mine and consent to AmMetLife crediting payouts to it';
+    const defaultMarketingLabel = 'I/We consent to AmMetLife Insurance Berhad using my personal data for marketing and communication via digital platforms such as email, WhatsApp, and mobile';
+    return (jsxRuntime.jsx(FormContainer$3, Object.assign({ ref: formRef, component: "form", onSubmit: onSubmit, sx: sx }, { children: jsxRuntime.jsxs(material.Box, Object.assign({ sx: { display: 'flex', flexDirection: 'column', gap: '24px' } }, { children: [jsxRuntime.jsxs(material.Box, { children: [renderField(fields.full_name), fields.full_name.helperText && (jsxRuntime.jsx(material.Typography, Object.assign({ variant: "caption", sx: {
+                                display: 'block',
+                                mt: 0.5,
+                                ml: 2,
+                                color: '#5F5E62',
+                                fontSize: '12px',
+                                fontFamily: 'Montserrat',
+                            } }, { children: fields.full_name.helperText })))] }), renderField(fields.nric), renderField(fields.date_of_birth), renderField(fields.gender), renderField(fields.salutation), renderField(fields.nationality), renderField(fields.occupation), renderField(fields.industry), renderField(fields.crediting_bank_name), renderField(fields.crediting_bank_account_number), jsxRuntime.jsxs(CheckboxContainer$1, { children: [jsxRuntime.jsx(material.FormControlLabel, { control: jsxRuntime.jsx(material.Checkbox, { checked: consents.bank_account_confirmation.checked, onChange: (e) => consents.bank_account_confirmation.onChange(e.target.checked), name: "bank_account_confirmation" }), label: jsxRuntime.jsx(CheckboxLabel$1, { children: consents.bank_account_confirmation.label ||
+                                    defaultBankConfirmationLabel }) }), consents.bank_account_confirmation.error && (jsxRuntime.jsx(material.Typography, Object.assign({ sx: {
+                                color: 'error.main',
+                                fontSize: '12px',
+                                mt: 0.5,
+                                ml: 4,
+                            } }, { children: consents.bank_account_confirmation.error })))] }), jsxRuntime.jsx(CheckboxContainer$1, { children: jsxRuntime.jsx(material.FormControlLabel, { control: jsxRuntime.jsx(material.Checkbox, { checked: consents.marketing_consent.checked, onChange: (e) => consents.marketing_consent.onChange(e.target.checked), name: "marketing_consent" }), label: jsxRuntime.jsx(CheckboxLabel$1, { children: consents.marketing_consent.label || defaultMarketingLabel }) }) })] })) })));
+};
+
+const FormContainer$2 = styles.styled(material.Box)({
+    padding: '0 16px 100px',
+});
+const CheckboxContainer = styles.styled(material.Box)({
+    marginTop: '12px',
+    '& .MuiFormControlLabel-root': {
+        alignItems: 'flex-start',
+        marginLeft: 0,
+    },
+    '& .MuiCheckbox-root': {
+        padding: '4px 8px 4px 0',
+    },
+});
+const CheckboxLabel = styles.styled(material.Typography)({
+    fontFamily: 'Montserrat',
+    fontSize: '14px',
+    fontWeight: 400,
+    color: '#5F5E62',
+    lineHeight: '18px',
+});
+
+const ContactDetailsForm = ({ renderField, fields, mailingAddressSame, onSubmit, formRef, sx, }) => {
+    const defaultMailingLabel = 'My mailing address is the same as residential';
+    return (jsxRuntime.jsx(FormContainer$2, Object.assign({ ref: formRef, component: "form", onSubmit: onSubmit, sx: sx }, { children: jsxRuntime.jsxs(material.Box, Object.assign({ sx: { display: 'flex', flexDirection: 'column', gap: '24px' } }, { children: [jsxRuntime.jsxs(material.Box, { children: [renderField(fields.phone_number), fields.phone_number.helperText && (jsxRuntime.jsx(material.Box, Object.assign({ component: "span", sx: {
+                                display: 'block',
+                                mt: 0.5,
+                                ml: 2,
+                                color: '#5F5E62',
+                                fontSize: '12px',
+                                fontFamily: 'Montserrat',
+                            } }, { children: fields.phone_number.helperText })))] }), renderField(fields.email_address), renderField(fields.residential_address), renderField(fields.postal_code), renderField(fields.city), renderField(fields.state), mailingAddressSame && (jsxRuntime.jsx(CheckboxContainer, { children: jsxRuntime.jsx(material.FormControlLabel, { control: jsxRuntime.jsx(material.Checkbox, { checked: mailingAddressSame.checked, onChange: (e) => mailingAddressSame.onChange(e.target.checked), name: "mailing_same_as_residential" }), label: jsxRuntime.jsx(CheckboxLabel, { children: mailingAddressSame.label || defaultMailingLabel }) }) }))] })) })));
+};
+
+const FormContainer$1 = styles.styled(material.Box)({
+    padding: '0 16px 100px',
+});
+
+const HealthInformationForm = ({ renderField, measurementFields, healthQuestions, onSubmit, formRef, sx, }) => {
+    return (jsxRuntime.jsx(FormContainer$1, Object.assign({ ref: formRef, component: "form", onSubmit: onSubmit, sx: sx }, { children: jsxRuntime.jsxs(material.Box, Object.assign({ sx: { display: 'flex', flexDirection: 'column', gap: '24px' } }, { children: [renderField(measurementFields.weight), renderField(measurementFields.height), healthQuestions.map((question, index) => (jsxRuntime.jsx(HealthQuestionGroup, { question: question.question, questionNumber: question.questionNumber, value: question.value, onChange: question.onChange, error: question.error, labels: question.labels }, question.name || index)))] })) })));
+};
+
+const FormContainer = styles.styled(material.Box)({
+    padding: '0 16px 100px',
+});
+
+const ChildInformationForm = ({ renderField, fields, onSubmit, formRef, sx, }) => {
+    return (jsxRuntime.jsx(FormContainer, Object.assign({ ref: formRef, component: "form", onSubmit: onSubmit, sx: sx }, { children: jsxRuntime.jsxs(material.Box, Object.assign({ sx: { display: 'flex', flexDirection: 'column', gap: '24px' } }, { children: [jsxRuntime.jsxs(material.Box, { children: [renderField(fields.full_name), fields.full_name.helperText && (jsxRuntime.jsx(material.Box, Object.assign({ component: "span", sx: {
+                                display: 'block',
+                                mt: 0.5,
+                                ml: 2,
+                                color: '#5F5E62',
+                                fontSize: '12px',
+                                fontFamily: 'Montserrat',
+                            } }, { children: fields.full_name.helperText })))] }), renderField(fields.nric), renderField(fields.date_of_birth), renderField(fields.gender), renderField(fields.nationality)] })) })));
+};
+
+/**
+ * FAQ Accordion Styled Components
+ * MUI styled components for the FAQ Accordion
+ */
+const FAQContainer = material.styled(material.Box)(({ theme }) => ({
+    padding: '50px 16px',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '24px',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '100%',
+    backgroundColor: '#ffffff',
+    [theme.breakpoints.up('md')]: {
+        padding: '64px 32px',
+        gap: '32px',
+    },
+}));
+const FAQTitle = material.styled(material.Typography)(({ theme }) => ({
+    fontWeight: 700,
+    fontSize: '20px',
+    lineHeight: '28px',
+    textAlign: 'center',
+    width: '100%',
+    margin: 0,
+    [theme.breakpoints.up('md')]: {
+        fontSize: '28px',
+        lineHeight: '36px',
+    },
+}));
+const StyledAccordion = material.styled(material.Accordion)(({ theme }) => ({
+    backgroundColor: 'transparent',
+    boxShadow: 'none',
+    borderRadius: 0,
+    '&:before': {
+        display: 'none',
+    },
+    '&:not(:last-child)': {
+        borderBottom: '1px solid rgba(0, 0, 0, 0.1)',
+    },
+    '&.Mui-expanded': {
+        margin: 0,
+    },
+}));
+const StyledAccordionSummary = material.styled(material.AccordionSummary)(({ theme }) => ({
+    minHeight: '48px',
+    padding: '12px 0',
+    gap: '6px',
+    '&.Mui-expanded': {
+        minHeight: '48px',
+    },
+    '& .MuiAccordionSummary-content': {
+        margin: 0,
+        '&.Mui-expanded': {
+            margin: 0,
+        },
+    },
+    '& .MuiAccordionSummary-expandIconWrapper': {
+        transition: 'transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
+    },
+}));
+const FAQQuestion = material.styled(material.Typography)(({ theme }) => ({
+    fontWeight: 600,
+    fontSize: '14px',
+    lineHeight: '20px',
+    flex: 1,
+    [theme.breakpoints.up('md')]: {
+        fontSize: '15px',
+        lineHeight: '22px',
+    },
+}));
+const StyledAccordionDetails = material.styled(material.AccordionDetails)(({ theme }) => ({
+    fontWeight: 400,
+    fontSize: '14px',
+    lineHeight: '20px',
+    padding: '0 0 16px 0',
+    [theme.breakpoints.up('md')]: {
+        fontSize: '15px',
+        lineHeight: '22px',
+        padding: '0 0 20px 0',
+    },
+}));
+const FAQContentWrapper = material.styled(material.Box)({
+    width: '100%',
+});
+
+/**
+ * FAQAccordion - Displays a list of frequently asked questions in an accordion format
+ *
+ * @example
+ * ```tsx
+ * const faqs = [
+ *   { id: 'faq-1', question: 'What is this product?', answer: 'This is a great product.' },
+ *   { id: 'faq-2', question: 'How does it work?', answer: 'It works seamlessly.' },
+ * ]
+ *
+ * <FAQAccordion
+ *   faqs={faqs}
+ *   title="Frequently Asked Questions"
+ * />
+ * ```
+ */
+function FAQAccordion({ faqs, title = 'Frequently Asked Questions', formatMessage = (descriptor) => descriptor.defaultMessage || descriptor.id, backgroundColor, maxWidth = '1128px', className, defaultExpanded, onAccordionChange, }) {
+    const [expanded, setExpanded] = React.useState(defaultExpanded || 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;
+    // Get theme colors with SSR-safe fallbacks
+    const textColor = getThemeColor(theme, 'natural.dim', '#13131b');
+    const subtitleColor = getThemeColor(theme, 'natural.dark', '#5f5e62');
+    const bgColor = backgroundColor || getThemeColor(theme, 'natural.light', '#ffffff');
+    const handleChange = (panel) => (event, isExpanded) => {
+        setExpanded(isExpanded ? panel : false);
+        onAccordionChange === null || onAccordionChange === void 0 ? void 0 : onAccordionChange(panel, isExpanded);
+    };
+    const displayTitle = formatMessage({
+        id: title,
+        defaultMessage: title,
+    });
+    return (jsxRuntime.jsxs(FAQContainer, Object.assign({ className: className, sx: { backgroundColor: bgColor } }, { children: [jsxRuntime.jsx(FAQTitle, Object.assign({ sx: { color: textColor, maxWidth } }, { children: displayTitle })), jsxRuntime.jsx(FAQContentWrapper, Object.assign({ sx: { maxWidth } }, { children: faqs.map((faq) => (jsxRuntime.jsxs(StyledAccordion, Object.assign({ expanded: expanded === faq.id, onChange: handleChange(faq.id), disableGutters: true, elevation: 0 }, { children: [jsxRuntime.jsx(StyledAccordionSummary, Object.assign({ expandIcon: jsxRuntime.jsx(ExpandMoreIcon, { sx: { color: textColor } }), "aria-controls": `${faq.id}-content`, id: `${faq.id}-header` }, { children: jsxRuntime.jsx(FAQQuestion, Object.assign({ sx: { color: textColor } }, { children: faq.question })) })), jsxRuntime.jsx(StyledAccordionDetails, Object.assign({ sx: { color: subtitleColor } }, { children: faq.answer }))] }), faq.id))) }))] })));
+}
+
+/**
+ * Benefits Summary Styled Components
+ * MUI styled components for the Benefits Summary
+ */
+const SectionContainer = material.styled(material.Box)(({ theme }) => ({
+    padding: '50px 16px',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '32px',
+    alignItems: 'center',
+    width: '100%',
+    backgroundColor: '#ffffff',
+    [theme.breakpoints.up('md')]: {
+        padding: '64px 32px',
+        gap: '40px',
+    },
+}));
+const SectionTitle = material.styled(material.Typography)(({ theme }) => ({
+    fontWeight: 700,
+    fontSize: '20px',
+    lineHeight: '28px',
+    textAlign: 'center',
+    width: '100%',
+    margin: 0,
+    [theme.breakpoints.up('md')]: {
+        fontSize: '28px',
+        lineHeight: '36px',
+    },
+}));
+const BenefitsList = material.styled(material.Box)(({ theme }) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '16px',
+    width: '100%',
+    [theme.breakpoints.up('md')]: {
+        gap: '24px',
+    },
+}));
+const BenefitItemContainer = material.styled(material.Box)(({ theme }) => ({
+    display: 'flex',
+    gap: '12px',
+    alignItems: 'flex-start',
+    width: '100%',
+    [theme.breakpoints.up('md')]: {
+        gap: '16px',
+    },
+}));
+const BenefitIcon = material.styled(material.Box)({
+    flexShrink: 0,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+});
+const BenefitContent = material.styled(material.Box)({
+    flex: 1,
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '6px',
+});
+const BenefitTitle = material.styled(material.Typography)(({ theme }) => ({
+    fontWeight: 600,
+    fontSize: '14px',
+    lineHeight: '20px',
+    margin: 0,
+    [theme.breakpoints.up('md')]: {
+        fontSize: '16px',
+        lineHeight: '22px',
+    },
+}));
+const BenefitDescription = material.styled(material.Typography)(({ theme }) => ({
+    fontWeight: 400,
+    fontSize: '14px',
+    lineHeight: '18px',
+    margin: 0,
+    [theme.breakpoints.up('md')]: {
+        fontSize: '15px',
+        lineHeight: '20px',
+    },
+}));
+
+/**
+ * BenefitsSummary - Displays a list of product benefits
+ *
+ * @example
+ * ```tsx
+ * const benefits = [
+ *   { id: 'benefit-1', icon: '/icons/health.svg', title: 'Death Benefit', description: '100% of Sum Assured' },
+ *   { id: 'benefit-2', icon: <HealthIcon />, title: 'TPD Coverage', description: 'Total & Permanent Disability' },
+ * ]
+ *
+ * <BenefitsSummary
+ *   benefits={benefits}
+ *   title="Benefits Summary"
+ * />
+ * ```
+ */
+function BenefitsSummary({ benefits, title = 'Benefits Summary', formatMessage = (descriptor) => descriptor.defaultMessage || descriptor.id, backgroundColor, maxWidth = '1128px', className, iconSize = 24, }) {
+    // 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 textColor = getThemeColor(theme, 'natural.dim', '#13131b');
+    const subtitleColor = getThemeColor(theme, 'natural.dark', '#5f5e62');
+    const bgColor = backgroundColor || getThemeColor(theme, 'natural.bright', '#ffffff');
+    const displayTitle = formatMessage({
+        id: title,
+        defaultMessage: title,
+    });
+    const renderIcon = (icon) => {
+        if (typeof icon === 'string') {
+            return (jsxRuntime.jsx("img", { src: icon, alt: "", style: {
+                    width: iconSize,
+                    height: iconSize,
+                    objectFit: 'contain',
+                } }));
+        }
+        return icon;
+    };
+    const renderDescription = (description) => {
+        const lines = description.split('\n');
+        return lines.map((line, index) => (jsxRuntime.jsxs(React__namespace.Fragment, { children: [line, index < lines.length - 1 && jsxRuntime.jsx("br", {})] }, index)));
+    };
+    return (jsxRuntime.jsxs(SectionContainer, Object.assign({ className: className, sx: { backgroundColor: bgColor } }, { children: [jsxRuntime.jsx(SectionTitle, Object.assign({ sx: { color: textColor, maxWidth } }, { children: displayTitle })), jsxRuntime.jsx(BenefitsList, Object.assign({ sx: { maxWidth } }, { children: benefits.map((benefit) => (jsxRuntime.jsxs(BenefitItemContainer, { children: [jsxRuntime.jsx(BenefitIcon, Object.assign({ sx: {
+                                width: iconSize,
+                                height: iconSize,
+                            } }, { children: renderIcon(benefit.icon) })), jsxRuntime.jsxs(BenefitContent, { children: [jsxRuntime.jsx(BenefitTitle, Object.assign({ sx: { color: textColor } }, { children: benefit.title })), jsxRuntime.jsx(BenefitDescription, Object.assign({ sx: { color: subtitleColor } }, { children: renderDescription(benefit.description) }))] })] }, benefit.id))) }))] })));
+}
+
+/**
+ * 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];
+}
+
 exports.Banner = Banner;
+exports.BenefitsSummary = BenefitsSummary;
+exports.BillingToggle = BillingToggle;
 exports.Button = Button;
 exports.Card = Card;
+exports.CheckoutFormButton = CheckoutFormButton;
+exports.CheckoutHeader = CheckoutHeader;
+exports.CheckoutProgress = CheckoutProgress;
+exports.ChildInformationForm = ChildInformationForm;
+exports.ContactDetailsForm = ContactDetailsForm;
+exports.CoverageAmountSlider = CoverageAmountSlider;
+exports.FAQAccordion = FAQAccordion;
+exports.Footer = Footer;
+exports.Header = Header$1;
+exports.HealthInformationForm = HealthInformationForm;
+exports.HealthQuestionGroup = HealthQuestionGroup;
+exports.ICON_PATHS = ICON_PATHS;
+exports.InfoCallout = InfoCallout;
+exports.NewHeader = NewHeader;
+exports.OptionButton = OptionButton$1;
+exports.PersonalInformationForm = PersonalInformationForm;
+exports.ProductCard = ProductCard;
+exports.ProductSelectionDrawer = ProductSelectionDrawer;
+exports.QuestionSection = QuestionSection;
+exports.RecommendationsDrawer = RecommendationsDrawer;
 exports.TenantThemeProvider = TenantThemeProvider;
+exports.ToggleGroup = ToggleGroup;
 exports.ammetlifeTheme = ammetlifeTheme;
+exports.ammetlifeTypography = ammetlifeTypography;
 exports.cimbTheme = cimbTheme;
+exports.cimbTypography = cimbTypography;
 exports.createThemeCSSVariables = createThemeCSSVariables;
 exports.getAvailableTenants = getAvailableTenants;
+exports.getIconPath = getIconPath;
+exports.getTenantAssetPath = getTenantAssetPath;
+exports.getTenantLogoPath = getTenantLogoPath;
 exports.getTenantTheme = getTenantTheme;
+exports.getTenantTypography = getTenantTypography;
 exports.getThemeColor = getThemeColor;
 exports.iglooTheme = iglooTheme;
+exports.iglooTypography = iglooTypography;
 exports.isValidTenantId = isValidTenantId;
 exports.mergeTenantTheme = mergeTenantTheme;
 exports.tenantThemes = tenantThemes;
+exports.tenantTypography = tenantTypography;
 exports.useIsTenant = useIsTenant;
+exports.useTenantAsset = useTenantAsset;
+exports.useTenantFavicon = useTenantFavicon;
 exports.useTenantId = useTenantId;
+exports.useTenantLogo = useTenantLogo;
 exports.useTenantTheme = useTenantTheme;
 //# sourceMappingURL=index.js.map