igloo-d2c-components 1.0.32 → 1.0.33

package/dist/cjs/index.js

@@ -2252,6 +2252,85 @@ const StyledDrawer = material.styled(material.Drawer)(() => ({
         maxHeight: '90vh',
     },
 }));
+// Desktop Dialog styles
+const StyledDialog = material.styled(material.Dialog)(() => ({
+    '& .MuiDialog-paper': {
+        borderRadius: '0px',
+        maxHeight: '90vh',
+        display: 'flex',
+        flexDirection: 'column',
+        width: '100%',
+        maxWidth: '900px',
+    },
+}));
+const DialogHeader = material.styled(material.Box)(() => ({
+    position: 'sticky',
+    top: 0,
+    backgroundColor: '#fff',
+    zIndex: 1,
+    padding: '24px 24px 0',
+}));
+const DialogHeaderTitle = material.styled(material.Typography)(() => ({
+    fontFamily: 'Montserrat, sans-serif',
+    fontSize: '24px',
+    fontWeight: 600,
+    lineHeight: '32px',
+    color: '#13131b',
+    marginBottom: '8px',
+    paddingRight: '32px',
+    wordSpacing: '0px',
+}));
+const DialogHeaderSubtitle = material.styled(material.Typography)(() => ({
+    fontFamily: 'Montserrat, sans-serif',
+    fontSize: '14px',
+    fontWeight: 400,
+    lineHeight: '20px',
+    color: '#5f5e62',
+    wordSpacing: '-5px',
+}));
+const DialogContent = material.styled(material.Box)(() => ({
+    flex: 1,
+    overflowY: 'auto',
+    padding: '24px',
+}));
+const DialogProductsGrid = material.styled(material.Box)(() => ({
+    display: 'grid',
+    gridTemplateColumns: 'repeat(2, 1fr)',
+    gap: '16px',
+}));
+const DialogProductCard = material.styled(material.Box)(() => ({
+    border: '1px solid #E0E0E0',
+    borderRadius: '0px',
+    padding: '16px',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    gap: '16px',
+}));
+const DialogProductLogo = material.styled(material.Box)(() => ({
+    height: '32px',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+}));
+const DialogProductName = material.styled(material.Typography)(() => ({
+    fontFamily: 'Montserrat, sans-serif',
+    fontSize: '16px',
+    fontWeight: 600,
+    lineHeight: '24px',
+    color: '#13131b',
+    textAlign: 'center',
+    wordSpacing: '0px',
+}));
+const DialogProductType = material.styled(material.Typography)(() => ({
+    fontFamily: 'Montserrat, sans-serif',
+    fontSize: '14px',
+    fontWeight: 400,
+    lineHeight: '20px',
+    color: '#5f5e62',
+    textAlign: 'center',
+    wordSpacing: '-5px',
+}));
 const DrawerContent = material.styled(material.Box)({
     display: 'flex',
     flexDirection: 'column',
@@ -2349,20 +2428,40 @@ const ViewPlansButton = material.styled(material.Button)({
     borderRadius: '8px',
     height: '36px',
     textTransform: 'none',
-    fontFamily: 'Montserrat, sans-serif',
     fontSize: '14px',
     fontWeight: 500,
     lineHeight: '18px',
     wordSpacing: '-5px',
 });
 
-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 (jsxRuntime.jsxs(StyledDialog, Object.assign({ open: open, onClose: onClose, maxWidth: "md", fullWidth: true }, { children: [jsxRuntime.jsxs(DialogHeader, { children: [jsxRuntime.jsx(material.IconButton, Object.assign({ onClick: onClose, sx: {
+                                position: 'absolute',
+                                right: 16,
+                                top: 16,
+                            } }, { children: jsxRuntime.jsx(CloseIcon, {}) })), jsxRuntime.jsx(DialogHeaderTitle, { children: title }), jsxRuntime.jsx(DialogHeaderSubtitle, { children: subtitle })] }), jsxRuntime.jsx(DialogContent, { children: jsxRuntime.jsx(DialogProductsGrid, { children: products.map((product) => (jsxRuntime.jsxs(DialogProductCard, { children: [jsxRuntime.jsx(DialogProductLogo, { 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' } }, { children: [jsxRuntime.jsx(DialogProductName, { children: product.name }), jsxRuntime.jsx(DialogProductType, { 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))) }) })] })));
+    }
+    // Mobile Drawer variant (default)
     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',
@@ -3390,7 +3489,7 @@ const StyledButton = styles.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': {