igloo-d2c-components 1.0.36 → 1.0.38

package/dist/esm/index.js

@@ -1690,7 +1690,10 @@ function Header$1({ logo, navigationLinks, languages, currentLocale, userToken,
                                     letterSpacing: '.3rem',
                                     color: 'inherit',
                                     textDecoration: 'none',
-                                } }, { children: jsx("img", { src: logo, alt: "Logo", style: Object.assign({}, (isMobile && { height: '32px', width: '119px' })), height: isMobile ? '32px' : '57px', width: isMobile ? '119px' : '93.36px' }) })) })), !isMobile && (jsxs(Fragment, { children: [shouldShowContent && (jsxs(Box, Object.assign({ sx: {
+                                } }, { children: jsx("img", { src: logo, alt: "Logo", height: 'auto', width: '126px', style: {
+                                        height: 'auto',
+                                        width: '126px',
+                                    } }) })) })), !isMobile && (jsxs(Fragment, { children: [shouldShowContent && (jsxs(Box, Object.assign({ sx: {
                                         flexGrow: 1,
                                         display: { xs: 'none', md: 'flex', gap: 40 },
                                     } }, { children: [jsxs(ButtonDesktopMenu, Object.assign({ onClick: handleOpenNavMenu, sx: { my: 2, textTransform: 'capitalize' }, "data-testid": "productNavigationMenu" }, { children: [jsx(Typography, Object.assign({ variant: "h6" }, { children: formatMessage({ id: 'Products' }) })), jsx(Icon, { component: ArrowDropDownIcon })] }), "product"), (menuItems === null || menuItems === void 0 ? void 0 : menuItems.partnership) && (jsx(ButtonDesktopMenu, Object.assign({ onClick: onPartnershipClick, sx: { my: 2, textTransform: 'capitalize' } }, { children: jsx(Typography, Object.assign({ variant: "h6" }, { children: 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) && (jsx(ButtonDesktopMenu, Object.assign({ onClick: onAboutUsClick, sx: { my: 2, textTransform: 'capitalize' } }, { children: jsx(Typography, Object.assign({ variant: "h6" }, { children: 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) && (jsx(ButtonDesktopMenu, Object.assign({ onClick: onBlogClick, sx: { my: 2, textTransform: 'capitalize' } }, { children: jsx(Typography, Object.assign({ variant: "h6" }, { children: 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"))] }))), jsxs(Box, Object.assign({ sx: {
@@ -1875,7 +1878,7 @@ styled(Box)(({ theme }) => ({
  * />
  * ```
  */
-function NewHeader({ logo: propLogo, navigationLinks = [], isMobile: propIsMobile, onLogoClick, onMenuOpen, onMenuClose, customDrawerContent, formatMessage = (descriptor) => descriptor.id, }) {
+function NewHeader({ logo: propLogo, logoAltText = 'Logo', navigationLinks = [], 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;
@@ -1903,7 +1906,7 @@ function NewHeader({ logo: propLogo, navigationLinks = [], isMobile: propIsMobil
         (_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item);
         handleDrawerClose();
     };
-    return (jsxs(Fragment, { children: [jsx(StyledAppBar, Object.assign({ position: "fixed" }, { children: jsxs(StyledToolbar, Object.assign({ disableGutters: true }, { children: [jsx(LogoContainer$1, Object.assign({ onClick: handleLogoClick }, { children: jsx(LogoImage, { src: logo, alt: "Logo" }) })), jsx(MenuIconButton, Object.assign({ size: "large", edge: "end", "aria-label": "menu", onClick: handleDrawerOpen }, { children: jsx(MenuIcon, {}) }))] })) })), jsx(StyledDrawer$2, Object.assign({ anchor: "right", open: drawerOpen, onClose: handleDrawerClose }, { children: customDrawerContent ? (jsx(Box, Object.assign({ sx: { width: isMobile ? '100vw' : 350 } }, { children: customDrawerContent }))) : (jsxs(Box, Object.assign({ sx: { width: isMobile ? '100vw' : 350 } }, { children: [jsxs(DrawerHeader$2, { children: [jsx(DrawerLogoContainer, Object.assign({ onClick: handleLogoClick }, { children: jsx(LogoImage, { src: logo, alt: "Logo" }) })), jsx(CloseIconButton, Object.assign({ onClick: handleDrawerClose, "aria-label": "close" }, { children: jsx(CloseIcon, {}) }))] }), jsx(Divider, {}), jsx(DrawerContent$2, { children: navigationLinks.length > 0 && (jsx(List, { children: navigationLinks.map((item) => (jsx(ListItem, Object.assign({ disablePadding: true }, { children: jsx(ListItemButton, Object.assign({ onClick: () => handleMenuItemClick(item) }, { children: jsx(ListItemText, { primary: formatMessage({ id: item.label }) }) })) }), item.key))) })) })] }))) }))] }));
+    return (jsxs(Fragment, { children: [jsx(StyledAppBar, Object.assign({ position: "fixed" }, { children: jsxs(StyledToolbar, Object.assign({ disableGutters: true }, { children: [jsx(LogoContainer$1, Object.assign({ onClick: handleLogoClick }, { children: jsx(LogoImage, { src: logo, alt: logoAltText }) })), jsx(MenuIconButton, Object.assign({ size: "large", edge: "end", "aria-label": "menu", onClick: handleDrawerOpen }, { children: jsx(MenuIcon, {}) }))] })) })), jsx(StyledDrawer$2, Object.assign({ anchor: "right", open: drawerOpen, onClose: handleDrawerClose }, { children: customDrawerContent ? (jsx(Box, Object.assign({ sx: { width: isMobile ? '100vw' : 350 } }, { children: customDrawerContent }))) : (jsxs(Box, Object.assign({ sx: { width: isMobile ? '100vw' : 350 } }, { children: [jsxs(DrawerHeader$2, { children: [jsx(DrawerLogoContainer, Object.assign({ onClick: handleLogoClick }, { children: jsx(LogoImage, { src: logo, alt: logoAltText }) })), jsx(CloseIconButton, Object.assign({ onClick: handleDrawerClose, "aria-label": "close" }, { children: jsx(CloseIcon, {}) }))] }), jsx(Divider, {}), jsx(DrawerContent$2, { children: navigationLinks.length > 0 && (jsx(List, { children: navigationLinks.map((item) => (jsx(ListItem, Object.assign({ disablePadding: true }, { children: jsx(ListItemButton, Object.assign({ onClick: () => handleMenuItemClick(item) }, { children: jsx(ListItemText, { primary: formatMessage({ id: item.label }) }) })) }), item.key))) })) })] }))) }))] }));
 }
 
 const DivFooter = styled('div')(() => ({
@@ -2312,7 +2315,7 @@ const DialogHeaderTitle = styled$1(Typography)(() => ({
     color: '#13131b',
     marginBottom: '8px',
     paddingRight: '32px',
-    wordSpacing: '0px',
+    wordSpacing: '-5px',
 }));
 const DialogHeaderSubtitle = styled$1(Typography)(() => ({
     fontFamily: 'Montserrat, sans-serif',
@@ -2561,7 +2564,7 @@ styled$1(Box)({
     padding: '4px',
 });
 
-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', }) {
+function ProductSelectionDrawer({ open, onClose, products, onProductSelect, title = 'Select your product', subtitle = 'Pick the product that suits your protection goals to view available plans', variant = 'drawer', }) {
     // 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: {
@@ -3693,8 +3696,10 @@ styled(Typography)(({ selected }) => ({
     wordSpacing: '-5px',
 }));
 
-const HealthQuestionGroup = ({ question, questionNumber, value, onChange, error, labels = { yes: 'Yes', no: 'No' }, sx, }) => {
-    return (jsxs(QuestionContainer, Object.assign({ sx: sx }, { children: [jsxs(QuestionText, { children: [questionNumber && `${questionNumber}. `, question] }), jsxs(OptionsContainer, { children: [jsx(OptionButton, { value: "yes", label: labels.yes || 'Yes', selected: value === 'yes', onClick: () => onChange('yes'), variant: "form", size: "large" }), jsx(OptionButton, { value: "no", label: labels.no || 'No', selected: value === 'no', onClick: () => onChange('no'), variant: "form", size: "large" })] }), error && (jsx(Typography, Object.assign({ sx: {
+const HealthQuestionGroup = ({ question, questionNumber, value, onChange, error, labels = { yes: 'Yes', no: 'No' }, sx, OptionButtonComponent, }) => {
+    const yesLabel = labels.yes || 'Yes';
+    const noLabel = labels.no || 'No';
+    return (jsxs(QuestionContainer, Object.assign({ sx: sx }, { children: [jsxs(QuestionText, { children: [questionNumber && `${questionNumber}. `, question] }), jsx(OptionsContainer, { children: OptionButtonComponent ? (jsxs(Fragment, { children: [jsx(OptionButtonComponent, Object.assign({ variant: "filledLightBorder", selected: value === 'yes', onClick: () => onChange('yes'), fullWidth: true }, { children: yesLabel })), jsx(OptionButtonComponent, Object.assign({ variant: "filledLightBorder", selected: value === 'no', onClick: () => onChange('no'), fullWidth: true }, { children: noLabel }))] })) : (jsxs(Fragment, { children: [jsx(OptionButton, { value: "yes", label: yesLabel, selected: value === 'yes', onClick: () => onChange('yes'), variant: "form", size: "large" }), jsx(OptionButton, { value: "no", label: noLabel, selected: value === 'no', onClick: () => onChange('no'), variant: "form", size: "large" })] })) }), error && (jsx(Typography, Object.assign({ sx: {
                     color: 'error.main',
                     fontSize: '12px',
                     mt: 0.5,
@@ -3968,9 +3973,9 @@ const MeasurementFieldsGrid = styled(Box)({
     },
 });
 
-const HealthInformationForm = ({ renderField, measurementFields, healthQuestions, onSubmit, formRef, sx, desktopGridLayout = false, }) => {
+const HealthInformationForm = ({ renderField, measurementFields, healthQuestions, onSubmit, formRef, sx, desktopGridLayout = false, OptionButtonComponent, }) => {
     const Container = desktopGridLayout ? DesktopFormContainer$1 : FormContainer$1;
-    return (jsx(Container, Object.assign({ ref: formRef, component: "form", onSubmit: onSubmit, sx: sx }, { children: jsxs(Box, Object.assign({ sx: { display: 'flex', flexDirection: 'column', gap: '24px' } }, { children: [desktopGridLayout ? (jsxs(MeasurementFieldsGrid, { children: [renderField(measurementFields.weight), renderField(measurementFields.height)] })) : (jsxs(Fragment, { children: [renderField(measurementFields.weight), renderField(measurementFields.height)] })), healthQuestions.map((question, index) => (jsx(HealthQuestionGroup, { question: question.question, questionNumber: question.questionNumber, value: question.value, onChange: question.onChange, error: question.error, labels: question.labels }, question.name || index)))] })) })));
+    return (jsx(Container, Object.assign({ ref: formRef, component: "form", onSubmit: onSubmit, sx: sx }, { children: jsxs(Box, Object.assign({ sx: { display: 'flex', flexDirection: 'column', gap: '24px' } }, { children: [desktopGridLayout ? (jsxs(MeasurementFieldsGrid, { children: [renderField(measurementFields.weight), renderField(measurementFields.height)] })) : (jsxs(Fragment, { children: [renderField(measurementFields.weight), renderField(measurementFields.height)] })), healthQuestions.map((question, index) => (jsx(HealthQuestionGroup, { question: question.question, questionNumber: question.questionNumber, value: question.value, onChange: question.onChange, error: question.error, labels: question.labels, OptionButtonComponent: OptionButtonComponent }, question.name || index)))] })) })));
 };
 
 const FormContainer = styled(Box)({