igloo-d2c-components 1.0.32 → 1.0.34

package/dist/esm/index.js

@@ -2,7 +2,7 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
 import { createContext, useMemo, useContext, useState, useEffect } from 'react';
-import { Button as Button$1, Card as Card$1, CardHeader, CardContent, CardActions, Box, Typography, Menu, MenuItem, Avatar, Drawer, IconButton, FormControlLabel, useTheme, useMediaQuery, Toolbar, Icon, RadioGroup, Radio, AppBar as AppBar$1, Divider, List, ListItem, ListItemButton, ListItemText, styled as styled$1, ButtonBase, Slider, Checkbox, Accordion, AccordionSummary, AccordionDetails } from '@mui/material';
+import { Button as Button$1, Card as Card$1, CardHeader, CardContent, CardActions, Box, Typography, Menu, MenuItem, Avatar, Drawer, IconButton, FormControlLabel, useTheme, useMediaQuery, Toolbar, Icon, RadioGroup, Radio, AppBar as AppBar$1, Divider, List, ListItem, ListItemButton, ListItemText, styled as styled$1, Dialog, ButtonBase, Slider, Checkbox, Accordion, AccordionSummary, AccordionDetails } from '@mui/material';
 import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
 import CloseIcon from '@mui/icons-material/Close';
 import AppBar from '@mui/material/AppBar';
@@ -2232,6 +2232,85 @@ const StyledDrawer = styled$1(Drawer)(() => ({
         maxHeight: '90vh',
     },
 }));
+// Desktop Dialog styles
+const StyledDialog = styled$1(Dialog)(() => ({
+    '& .MuiDialog-paper': {
+        borderRadius: '0px',
+        maxHeight: '90vh',
+        display: 'flex',
+        flexDirection: 'column',
+        width: '100%',
+        maxWidth: '900px',
+    },
+}));
+const DialogHeader = styled$1(Box)(() => ({
+    position: 'sticky',
+    top: 0,
+    backgroundColor: '#fff',
+    zIndex: 1,
+    padding: '24px 24px 0',
+}));
+const DialogHeaderTitle = styled$1(Typography)(() => ({
+    fontFamily: 'Montserrat, sans-serif',
+    fontSize: '24px',
+    fontWeight: 600,
+    lineHeight: '32px',
+    color: '#13131b',
+    marginBottom: '8px',
+    paddingRight: '32px',
+    wordSpacing: '0px',
+}));
+const DialogHeaderSubtitle = styled$1(Typography)(() => ({
+    fontFamily: 'Montserrat, sans-serif',
+    fontSize: '14px',
+    fontWeight: 400,
+    lineHeight: '20px',
+    color: '#5f5e62',
+    wordSpacing: '-5px',
+}));
+const DialogContent = styled$1(Box)(() => ({
+    flex: 1,
+    overflowY: 'auto',
+    padding: '24px',
+}));
+const DialogProductsGrid = styled$1(Box)(() => ({
+    display: 'grid',
+    gridTemplateColumns: 'repeat(2, 1fr)',
+    gap: '16px',
+}));
+const DialogProductCard = styled$1(Box)(() => ({
+    border: '1px solid #E0E0E0',
+    borderRadius: '0px',
+    padding: '16px',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    gap: '16px',
+}));
+const DialogProductLogo = styled$1(Box)(() => ({
+    height: '32px',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+}));
+const DialogProductName = styled$1(Typography)(() => ({
+    fontFamily: 'Montserrat, sans-serif',
+    fontSize: '16px',
+    fontWeight: 600,
+    lineHeight: '24px',
+    color: '#13131b',
+    textAlign: 'center',
+    wordSpacing: '0px',
+}));
+const DialogProductType = styled$1(Typography)(() => ({
+    fontFamily: 'Montserrat, sans-serif',
+    fontSize: '14px',
+    fontWeight: 400,
+    lineHeight: '20px',
+    color: '#5f5e62',
+    textAlign: 'center',
+    wordSpacing: '-5px',
+}));
 const DrawerContent = styled$1(Box)({
     display: 'flex',
     flexDirection: 'column',
@@ -2286,7 +2365,7 @@ const ProductCard$1 = styled$1(Box)({
     flexDirection: 'column',
     gap: '16px',
     backgroundColor: '#ffffff',
-    borderRadius: '12px',
+    borderRadius: '0',
     boxShadow: '0px 2px 10px 0px rgba(0, 0, 0, 0.12)',
     padding: '16px 12px 12px',
     height: '168px',
@@ -2329,20 +2408,40 @@ const ViewPlansButton = styled$1(Button$1)({
     borderRadius: '8px',
     height: '36px',
     textTransform: 'none',
-    fontFamily: 'Montserrat, sans-serif',
     fontSize: '14px',
     fontWeight: 500,
     lineHeight: '18px',
-    wordSpacing: '-5px',
+    wordSpacing: '0px',
 });
 
-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', }) {
+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', variant = 'drawer', }) {
     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
+    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) || '#0090DA';
+    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) || '#007bb8';
+    const primaryDarker = '#006699'; // Active state
+    // Desktop Dialog variant
+    if (variant === 'dialog') {
+        return (jsxs(StyledDialog, Object.assign({ open: open, onClose: onClose, maxWidth: "md", fullWidth: true }, { children: [jsxs(DialogHeader, { children: [jsx(IconButton, Object.assign({ onClick: onClose, sx: {
+                                position: 'absolute',
+                                right: 16,
+                                top: 16,
+                            } }, { children: jsx(CloseIcon, {}) })), jsx(DialogHeaderTitle, { children: title }), jsx(DialogHeaderSubtitle, { children: subtitle })] }), jsx(DialogContent, { children: jsx(DialogProductsGrid, { children: products.map((product) => (jsxs(DialogProductCard, { children: [jsx(DialogProductLogo, { children: jsx("img", { src: product.logo, alt: product.name, style: {
+                                            width: '88px',
+                                            height: '32px',
+                                            objectFit: 'cover',
+                                        } }) }), jsxs(Box, Object.assign({ sx: { textAlign: 'center' } }, { children: [jsx(DialogProductName, { children: product.name }), jsx(DialogProductType, { children: product.type })] })), jsx(ViewPlansButton, Object.assign({ variant: "contained", fullWidth: true, onClick: () => onProductSelect(product.id), sx: {
+                                        backgroundColor: primaryColor,
+                                        '&:hover': {
+                                            backgroundColor: primaryDark,
+                                        },
+                                        '&:active': {
+                                            backgroundColor: primaryDarker,
+                                        },
+                                    } }, { children: viewPlansButtonText }))] }, product.id))) }) })] })));
+    }
+    // Mobile Drawer variant (default)
     return (jsx(StyledDrawer, Object.assign({ anchor: "bottom", open: open, onClose: onClose }, { children: jsxs(DrawerContent, { children: [jsx(DrawerHeader, { children: jsx(CloseButtonContainer, { children: jsx(IconButton, Object.assign({ onClick: onClose, sx: { padding: 0 } }, { children: jsx(CloseIcon, { sx: { fontSize: 24, color: '#13131b' } }) })) }) }), jsxs(Header, { children: [jsx(HeaderTitle, { children: title }), jsx(HeaderSubtitle, { children: subtitle })] }), jsx(ProductsContainer, { children: jsx(ProductsGrid, { children: products.map((product) => (jsxs(ProductCard$1, { children: [jsxs(ProductInfo$1, { children: [jsx(ProductLogo, { children: jsx("img", { src: product.logo, alt: product.name, style: {
                                                     width: '88px',
                                                     height: '32px',
@@ -3370,7 +3469,7 @@ const StyledButton = styled('button')(({ isDisabled, desktopWidth }) => ({
     fontSize: '14px',
     fontWeight: 500,
     lineHeight: '18px',
-    wordSpacing: '-5px',
+    wordSpacing: '0px',
     cursor: isDisabled ? 'not-allowed' : 'pointer',
     transition: 'all 0.2s ease',
     '&:hover': {
@@ -3573,7 +3672,7 @@ const FullWidthField = styled(Box)({
 const CheckboxContainer = styled(Box)({
     marginTop: '12px',
     '& .MuiFormControlLabel-root': {
-        alignItems: 'flex-start',
+        alignItems: 'center',
         marginLeft: 0,
         '@media (min-width: 900px)': {
             alignItems: 'center',
@@ -3778,7 +3877,7 @@ const FAQTitle = styled$1(Typography)(({ theme }) => ({
     fontWeight: 700,
     fontSize: '20px',
     lineHeight: '28px',
-    wordSpacing: '0px',
+    wordSpacing: '-5px',
     textAlign: 'center',
     width: '100%',
     margin: 0,
@@ -3827,7 +3926,7 @@ const FAQQuestion = styled$1(Typography)(({ theme }) => ({
     fontWeight: 700,
     fontSize: '14px',
     lineHeight: '20px',
-    wordSpacing: '0px',
+    wordSpacing: '-5px',
     flex: 1,
     [theme.breakpoints.up('md')]: {
         fontSize: '18px',