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

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');
@@ -663,6 +663,7 @@ const TenantThemeContext = React.createContext(undefined);
 /**
  * TenantThemeProvider
  * Wraps components to provide tenant-specific theming
+ * Creates MUI theme from tenant configuration
  *
  * @example
  * ```tsx
@@ -674,12 +675,72 @@ 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',
+            },
+        },
+        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 +800,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 +833,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 +858,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 +2112,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 +2131,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 +2201,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',