igloo-d2c-components 1.0.56-non-prod → 1.1.1

package/dist/cjs/index.js

@@ -3,11 +3,11 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
+var styles = require('@mui/material/styles');
 var material = require('@mui/material');
 var ArrowDropDownIcon = require('@mui/icons-material/ArrowDropDown');
 var CloseIcon = require('@mui/icons-material/Close');
 var AppBar = require('@mui/material/AppBar');
-var styles = require('@mui/material/styles');
 var MenuIcon = require('@mui/icons-material/Menu');
 var Container = require('@mui/material/Container');
 var ArrowBackIcon = require('@mui/icons-material/ArrowBack');
@@ -504,6 +504,8 @@ const iglooTheme = {
             calloutBorder: '#ffffff',
             inputBackground: '#ffffff',
             inputBorder: '#eeeeee',
+            buttonPrimary: '#5656F6',
+            buttonPrimaryHover: 'rgba(86, 86, 246, 0.7)',
         },
         motor: {
             main: '#00CCFF',
@@ -545,11 +547,11 @@ const ammetlifeTheme = {
     palette: {
         primary: {
             dark: '#2869a8',
-            main: '#317abc',
+            main: '#0090DA',
             light: '#42A5F5',
             bright: '#90CAF9',
             plain: '#E3F2FD',
-            border: '#317abc',
+            border: '#0090DA',
         },
         secondary: {
             dim: '#E65100',
@@ -580,13 +582,15 @@ const ammetlifeTheme = {
             sliderActive: '#317abc',
             sliderInactive: '#c8c5ca',
             sliderBackground: '#f9f9f9',
-            toggleActive: '#a4ce4e',
+            toggleActive: 'rgb(0, 144, 218)',
             toggleActiveText: '#fefbff',
-            toggleInactiveText: '#5f5e62',
+            toggleInactiveText: '#0090DA',
             calloutBackground: '#f9f9f9',
             calloutBorder: '#ffffff',
             inputBackground: '#ffffff',
             inputBorder: '#eeeeee',
+            buttonPrimary: '#0090da',
+            buttonPrimaryHover: 'rgba(0, 144, 218, 0.7)',
         },
         motor: {
             main: '#1976D2',
@@ -663,6 +667,7 @@ const TenantThemeContext = React.createContext(undefined);
 /**
  * TenantThemeProvider
  * Wraps components to provide tenant-specific theming
+ * Creates MUI theme from tenant configuration
  *
  * @example
  * ```tsx
@@ -674,12 +679,74 @@ const TenantThemeContext = React.createContext(undefined);
  * </TenantThemeProvider>
  * ```
  */
-function TenantThemeProvider({ children, tenantId, theme, }) {
+function TenantThemeProvider({ children, tenantId, theme: tenantTheme, }) {
+    // Create MUI theme with tenant brand + defaults
+    const muiTheme = React.useMemo(() => styles.createTheme({
+        palette: {
+            // Tenant brand colors
+            primary: {
+                main: tenantTheme.palette.primary.main,
+                dark: tenantTheme.palette.primary.dark || tenantTheme.palette.primary.main,
+                light: tenantTheme.palette.primary.light || tenantTheme.palette.primary.main,
+                contrastText: '#fff',
+            },
+            secondary: {
+                main: tenantTheme.palette.secondary.main,
+                dark: tenantTheme.palette.secondary.dark || tenantTheme.palette.secondary.main,
+                light: tenantTheme.palette.secondary.light || tenantTheme.palette.secondary.main,
+            },
+            // MUI defaults for common patterns
+            background: {
+                default: '#ffffff',
+                paper: '#f9f9f9',
+            },
+            text: {
+                primary: '#13131B',
+                secondary: '#5F5E62',
+            },
+            divider: '#E1E2EB',
+            // Standard grey palette
+            grey: {
+                50: '#FAFAFA',
+                100: '#F5F5F5',
+                200: '#EEEEEE',
+                300: '#E0E0E0',
+                400: '#BDBDBD',
+                500: '#9E9E9E',
+                600: '#757575',
+                700: '#616161',
+                800: '#424242',
+                900: '#212121',
+            },
+            common: {
+                white: '#ffffff',
+                black: '#000000',
+            },
+            // Add tenant UI colors to MUI theme
+            ui: tenantTheme.palette.ui,
+        },
+        typography: {
+            fontFamily: tenantTheme.typography?.fontFamily || 'Roboto, sans-serif',
+        },
+        spacing: 8,
+        shape: {
+            borderRadius: 8,
+        },
+        breakpoints: {
+            values: {
+                xs: 0,
+                sm: 600,
+                md: 900,
+                lg: 1200,
+                xl: 1536,
+            },
+        },
+    }), [tenantTheme]);
     const value = React.useMemo(() => ({
         tenantId,
-        theme,
-    }), [tenantId, theme]);
-    return (jsxRuntime.jsx(TenantThemeContext.Provider, { value: value, children: children }));
+        theme: tenantTheme,
+    }), [tenantId, tenantTheme]);
+    return (jsxRuntime.jsx(styles.ThemeProvider, { theme: muiTheme, children: jsxRuntime.jsx(TenantThemeContext.Provider, { value: value, children: children }) }));
 }
 /**
  * Hook to access tenant theme configuration
@@ -739,21 +806,20 @@ function useIsTenant(checkTenantId) {
  * ```
  */
 const Button = React__namespace.default.memo(function Button({ tenantColored = false, variant = 'contained', sx, color, ...props }) {
+    const theme = material.useTheme();
     const tenantTheme = useTenantTheme();
-    const theme = tenantTheme?.theme;
-    const baseWordSpacingSx = { wordSpacing: '0px' };
-    const buttonSx = tenantColored && theme
+    const buttonSx = tenantColored && tenantTheme?.theme
         ? {
-            ...baseWordSpacingSx,
-            backgroundColor: theme.palette?.primary?.main,
-            color: '#fff',
+            wordSpacing: 0,
+            backgroundColor: tenantTheme.theme.palette?.primary?.main,
+            color: theme.palette.common.white,
             '&:hover': {
-                backgroundColor: theme.palette?.primary?.dark || theme.palette?.primary?.main,
+                backgroundColor: tenantTheme.theme.palette?.primary?.dark || tenantTheme.theme.palette?.primary?.main,
             },
             ...sx,
         }
         : {
-            ...baseWordSpacingSx,
+            wordSpacing: 0,
             ...sx,
         };
     return (jsxRuntime.jsx(material.Button, { variant: variant, color: tenantColored ? undefined : color, sx: buttonSx, ...props }));
@@ -773,11 +839,11 @@ const Button = React__namespace.default.memo(function Button({ tenantColored = f
  * ```
  */
 const Card = React__namespace.default.memo(function Card({ title, headerAction, content, actions, tenantAccent = false, sx, children, ...props }) {
+    const theme = material.useTheme();
     const tenantTheme = useTenantTheme();
-    const theme = tenantTheme?.theme;
-    const cardSx = tenantAccent && theme
+    const cardSx = tenantAccent && tenantTheme?.theme
         ? {
-            borderTop: `4px solid ${theme.palette?.primary?.main || '#000000'}`,
+            borderTop: `4px solid ${tenantTheme.theme.palette?.primary?.main || theme.palette.primary.main}`,
             ...sx,
         }
         : sx;
@@ -798,18 +864,18 @@ const Card = React__namespace.default.memo(function Card({ title, headerAction,
  * ```
  */
 const Banner = React__namespace.default.memo(function Banner({ title, description, action, gradient = true, sx, ...props }) {
+    const theme = material.useTheme();
     const tenantTheme = useTenantTheme();
-    const theme = tenantTheme?.theme;
-    const primaryColor = theme?.palette?.primary?.main || '#000000';
-    const lightColor = theme?.palette?.primary?.light || primaryColor;
+    const primaryColor = tenantTheme?.theme?.palette?.primary?.main || theme.palette.primary.main;
+    const lightColor = tenantTheme?.theme?.palette?.primary?.light || theme.palette.primary.light;
     const background = gradient
         ? `linear-gradient(135deg, ${primaryColor} 0%, ${lightColor} 100%)`
         : primaryColor;
     return (jsxRuntime.jsxs(material.Box, { sx: {
             background,
-            color: 'white',
-            padding: '32px',
-            borderRadius: '12px',
+            color: theme.palette.common.white,
+            padding: theme.spacing(4),
+            borderRadius: `${theme.shape.borderRadius}px`,
             textAlign: 'center',
             ...sx,
         }, ...props, children: [jsxRuntime.jsx(material.Typography, { variant: "h4", component: "h2", gutterBottom: true, fontWeight: "bold", children: title }), description && (jsxRuntime.jsx(material.Typography, { variant: "body1", sx: { opacity: 0.95, mb: action ? 2 : 0 }, children: description })), action && jsxRuntime.jsx(material.Box, { sx: { mt: 2 }, children: action })] }));
@@ -2052,16 +2118,16 @@ function sanitizeUrl(url, fallback = '#') {
     return fallback;
 }
 
-const DivFooter = styles.styled('div')(() => ({
-    backgroundColor: '#424242',
-    padding: '20px 16px',
-    '@media (min-width: 769px)': {
-        padding: '70px 0px',
+const DivFooter = styles.styled('div')(({ theme }) => ({
+    backgroundColor: theme.palette.grey[800],
+    padding: theme.spacing(2.5, 2),
+    [theme.breakpoints.up('md')]: {
+        padding: theme.spacing(8.75, 0),
     },
 }));
 const DivFooterConterResponsiveLayout = styles.styled('div')(({ theme }) => ({
-    color: '#fff',
-    [theme.breakpoints.up(1025)]: {
+    color: theme.palette.common.white,
+    [theme.breakpoints.up('lg')]: {
         minWidth: '1128px',
         maxWidth: '1128px',
         margin: '0 auto',
@@ -2071,68 +2137,64 @@ const FooterHiddenContent = styles.styled('div')(({ simplifiedLayout }) => simpl
 const DivIglooIntro = styles.styled('div')(({ theme }) => ({
     display: 'flex',
     flexDirection: 'column',
-    gap: '24px',
-    color: theme?.palette.common?.white || '#fff',
-    '@media (min-width: 769px)': {
+    gap: theme.spacing(3),
+    color: theme.palette.common.white,
+    [theme.breakpoints.up('md')]: {
         width: 320,
         marginRight: 194,
     },
 }));
-const DivSocial = styles.styled('div')(() => ({
+const DivSocial = styles.styled('div')(({ theme }) => ({
     display: 'flex',
     alignItems: 'center',
     margin: '0 auto',
-    columnGap: '32px',
+    columnGap: theme.spacing(4),
     flexDirection: 'row',
-    '@media (min-width: 769px)': {
+    [theme.breakpoints.up('md')]: {
         margin: 'initial',
     },
 }));
 const ButtonIcon = styles.styled(material.Button)(({ theme }) => ({
-    color: theme.palette.common?.white || '#fff',
-    padding: '0 !important',
-    minWidth: 'auto !important',
+    color: theme.palette.common.white,
+    padding: 0,
+    minWidth: 'auto',
 }));
-const TypographyIntro = styles.styled(material.Typography)(() => ({
+const TypographyIntro = styles.styled(material.Typography)(({ theme }) => ({
     textAlign: 'center',
-    color: `#fff !important`,
-    '@media (min-width: 769px)': {
+    color: theme.palette.common.white,
+    [theme.breakpoints.up('md')]: {
         textAlign: 'left',
     },
 }));
-const TypographyAddressFooter = styles.styled(material.Typography)(() => ({
-    marginTop: 16,
+const TypographyAddressFooter = styles.styled(material.Typography)(({ theme }) => ({
+    marginTop: theme.spacing(2),
     textAlign: 'center',
-    color: '#fff',
-    '@media (min-width: 769px)': {
+    color: theme.palette.common.white,
+    [theme.breakpoints.up('md')]: {
         textAlign: 'left',
     },
 }));
-const DivLogos = styles.styled('div')(() => ({
+const DivLogos = styles.styled('div')(({ theme }) => ({
     display: 'flex',
     flexDirection: 'column',
-    gap: 16,
+    gap: theme.spacing(2),
     alignItems: 'center',
-    marginTop: 16,
-    '@media (min-width: 769px)': {
+    marginTop: theme.spacing(2),
+    [theme.breakpoints.up('md')]: {
         width: '100%',
         marginTop: 0,
         gap: 'initial',
         alignItems: 'baseline',
     },
 }));
-const DivFirstRow = styles.styled('div')(() => ({
+const DivFirstRow = styles.styled('div')(({ theme }) => ({
     display: 'flex',
     flexDirection: 'row',
-    gap: 16,
+    gap: theme.spacing(2),
 }));
 const ButtonOjkLink = styles.styled(material.Button)(() => ({
     display: 'flex',
     justifyContent: 'flex-start',
-    '@media (min-width: 769px)': {
-        display: 'flex !important',
-        justifyContent: 'flex-start !important ',
-    },
 }));
 const ImageOjkLicense = styles.styled('img')(() => ({
     alignSelf: 'flex-start',
@@ -2145,53 +2207,53 @@ const ButtonSolisoustamaLink = styles.styled(material.Button)(() => ({
 const ImageSolisoustama = styles.styled('img')(() => ({
     height: 'auto',
 }));
-const DivLinks = styles.styled('div')(() => ({
+const DivLinks = styles.styled('div')(({ theme }) => ({
     display: 'flex',
     flex: 1,
     alignItems: 'center',
-    gap: 16,
+    gap: theme.spacing(2),
     justifyContent: 'center',
-    '@media (min-width: 769px)': {
+    [theme.breakpoints.up('md')]: {
         flex: '1 1',
         alignItems: 'normal',
     },
 }));
-const DivSection = styles.styled('div')(() => ({
+const DivSection = styles.styled('div')(({ theme }) => ({
     display: 'flex',
     flexDirection: 'column',
-    gap: 16,
+    gap: theme.spacing(2),
     flex: 1,
     alignItems: 'flex-start',
-    '@media (min-width: 769px)': {
-        gap: 24,
+    [theme.breakpoints.up('md')]: {
+        gap: theme.spacing(3),
         '&:not(:first-of-type)': {
             marginLeft: 194,
         },
     },
 }));
-const ButtonBottomLink = styles.styled(material.Button)(() => ({
-    color: '#fff !important',
+const ButtonBottomLink = styles.styled(material.Button)(({ theme }) => ({
+    color: theme.palette.common.white,
     textTransform: 'capitalize',
-    '@media (min-width: 769px)': {
-        padding: '0 !important',
-        textAlign: 'left !important',
-        minWidth: 'auto !important',
+    [theme.breakpoints.up('md')]: {
+        padding: 0,
+        textAlign: 'left',
+        minWidth: 'auto',
     },
 }));
-const StyledDivider = styles.styled(material.Divider)(() => ({
-    margin: '24px 0 16px !important',
-    borderColor: '#5F5E62 !important',
+const StyledDivider = styles.styled(material.Divider)(({ theme }) => ({
+    margin: theme.spacing(3, 0, 2),
+    borderColor: '#5F5E62',
 }));
 const DivBottom = styles.styled('div')(() => ({
     display: 'flex',
     justifyContent: 'space-between',
     alignItems: 'center',
 }));
-const DivSep = styles.styled('div')(() => ({
+const DivSep = styles.styled('div')(({ theme }) => ({
     width: '1px',
     height: 10,
     borderRadius: '1px',
-    backgroundColor: '#fff',
+    backgroundColor: theme.palette.common.white,
 }));
 const AnchorLink = styles.styled('a')(() => ({
     color: 'inherit',
@@ -2369,9 +2431,9 @@ const BackArrowButton = styles.styled(material.IconButton)(() => ({
 function RecommendationsDrawer({ open, onClose, children, headerIcon, title, subtitle, showBackButton = false, onBack, primaryButtonText, onPrimaryAction, primaryButtonDisabled = false, secondaryButtonText, onSecondaryAction, showFooter = true, customFooter, formatMessage = (descriptor) => descriptor.id, }) {
     material.useTheme();
     const tenantTheme = useTenantTheme();
-    // Get primary color from tenant theme, fallback to default
-    const primaryColor = tenantTheme?.theme?.palette?.primary?.main || '#0090DA';
-    // Helper to convert hex to rgba
+    const primaryColor = tenantTheme?.theme?.palette?.ui?.buttonPrimary
+        || tenantTheme?.theme?.palette?.primary?.main
+        || '#0090DA';
     const hexToRgba = (hex, alpha) => {
         const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
         if (result) {
@@ -2380,7 +2442,7 @@ function RecommendationsDrawer({ open, onClose, children, headerIcon, title, sub
             const b = parseInt(result[3], 16);
             return `rgba(${r}, ${g}, ${b}, ${alpha})`;
         }
-        return `rgba(49, 122, 188, ${alpha})`;
+        return `rgba(0, 144, 218, ${alpha})`;
     };
     const handleClose = () => {
         onClose();
@@ -3152,7 +3214,7 @@ const ToggleButton = styles.styled(material.Box)(({ theme, active }) => ({
         : 'transparent',
     color: active
         ? theme?.palette?.ui?.toggleActiveText || '#fefbff'
-        : theme?.palette?.ui?.toggleInactiveText || '#5f5e62',
+        : theme?.palette?.ui?.toggleInactiveText || '#0090DA',
     transition: 'all 0.2s ease',
     '&:hover': {
         opacity: 0.9,
@@ -3761,42 +3823,47 @@ const ButtonContainer = styles.styled(material.Box)(({ isFixed, desktopRightAlig
         position: 'relative',
     },
 }));
-const StyledButton = styles.styled('button')(({ isDisabled, desktopWidth }) => ({
-    width: '100%',
-    minHeight: '48px',
-    padding: '14px 32px',
-    borderRadius: '100px',
-    border: 'none',
-    backgroundColor: isDisabled ? '#f2f2f2' : '#0090da',
-    color: isDisabled ? '#75787b' : '#ffffff',
-    fontFamily: '"MetLifeCircular", "Roboto", "Helvetica", "Arial", sans-serif',
-    fontSize: '16px',
-    fontWeight: 500,
-    lineHeight: '20px',
-    letterSpacing: 0,
-    textTransform: 'none',
-    wordSpacing: '0px',
-    cursor: isDisabled ? 'not-allowed' : 'pointer',
-    transition: 'all 0.2s ease-in-out',
-    boxSizing: 'border-box',
-    '&:hover': {
-        backgroundColor: isDisabled ? '#f2f2f2' : 'rgba(0, 144, 218, 0.7)',
-    },
-    '&:focus': {
-        outline: isDisabled ? 'none' : '2px solid #0090da',
-        outlineOffset: '2px',
-    },
-    '&:active': {
-        backgroundColor: isDisabled ? '#f2f2f2' : 'rgba(0, 144, 218, 0.7)',
-    },
-    // Desktop styles for fixed width button
-    '@media (min-width: 900px)': desktopWidth
-        ? {
-            width: desktopWidth,
-            minWidth: desktopWidth,
-        }
-        : {},
-}));
+const StyledButton = styles.styled('button')(({ theme, isDisabled, desktopWidth }) => {
+    const extendedTheme = theme;
+    const buttonPrimary = extendedTheme?.palette?.ui?.buttonPrimary || '#0090da';
+    const buttonPrimaryHover = extendedTheme?.palette?.ui?.buttonPrimaryHover || 'rgba(0, 144, 218, 0.7)';
+    return {
+        width: '100%',
+        minHeight: '48px',
+        padding: '14px 32px',
+        borderRadius: '100px',
+        border: 'none',
+        backgroundColor: isDisabled ? '#f2f2f2' : buttonPrimary,
+        color: isDisabled ? '#75787b' : '#ffffff',
+        fontFamily: '"MetLifeCircular", "Roboto", "Helvetica", "Arial", sans-serif',
+        fontSize: '16px',
+        fontWeight: 500,
+        lineHeight: '20px',
+        letterSpacing: 0,
+        textTransform: 'none',
+        wordSpacing: '0px',
+        cursor: isDisabled ? 'not-allowed' : 'pointer',
+        transition: 'all 0.2s ease-in-out',
+        boxSizing: 'border-box',
+        '&:hover': {
+            backgroundColor: isDisabled ? '#f2f2f2' : buttonPrimaryHover,
+        },
+        '&:focus': {
+            outline: isDisabled ? 'none' : `2px solid ${buttonPrimary}`,
+            outlineOffset: '2px',
+        },
+        '&:active': {
+            backgroundColor: isDisabled ? '#f2f2f2' : buttonPrimaryHover,
+        },
+        // Desktop styles for fixed width button
+        '@media (min-width: 900px)': desktopWidth
+            ? {
+                width: desktopWidth,
+                minWidth: desktopWidth,
+            }
+            : {},
+    };
+});
 
 const CheckoutFormButton = ({ text = 'Next', disabled = false, onClick, fixed = true, type = 'button', sx, loading = false, desktopRightAligned = false, desktopWidth = '180px', }) => {
     return (jsxRuntime.jsx(ButtonContainer, { isFixed: fixed, desktopRightAligned: desktopRightAligned, sx: sx, children: jsxRuntime.jsx(StyledButton, { type: type, disabled: disabled || loading, isDisabled: disabled || loading, desktopWidth: desktopWidth, onClick: onClick, children: loading ? 'Processing...' : text }) }));