igloo-d2c-components 1.0.24 → 1.0.26

package/dist/esm/index.js

@@ -829,29 +829,47 @@ function Banner(_a) {
 /**
  * Styled components for Desktop Header Menu Bar
  * Based on Figma Design: Tech-Solution-V1.0 (node 1581-22604)
+ *
+ * Design Specifications:
+ * - Header height: 80px
+ * - Background: white (#ffffff)
+ * - Content max-width: 1128px (equivalent to 156px padding on 1440px width)
+ * - Logo width: 126px
+ * - Gap between logo and menu items: 32px
+ * - Menu text: MetLife Circular Bold, 18px, #13131B
+ * - Login button: Text style, #0090da (teal/cyan)
  */
+/**
+ * Design System Colors (from Figma node 1581-22604)
+ */
+const designColors = {
+    natural: {
+        dim100: '#13131B',
+        light00: '#ffffff',
+    },
+    primary: {
+        main60: '#0090da',
+    },
+};
 /**
  * Main AppBar container
  * Height: 80px, white background, centered content
  */
-const StyledAppBar$2 = styled(AppBar)(({ theme }) => {
-    var _a;
-    return ({
-        backgroundColor: ((_a = theme.palette.background) === null || _a === void 0 ? void 0 : _a.paper) || '#ffffff',
-        boxShadow: 'none',
-        position: 'fixed',
-        top: 0,
-        left: 0,
-        right: 0,
-        zIndex: 1000,
-        height: '80px',
-        display: 'flex',
-        justifyContent: 'center',
-    });
-});
+const StyledAppBar$2 = styled(AppBar)(({ theme }) => ({
+    backgroundColor: designColors.natural.light00,
+    boxShadow: 'none',
+    position: 'fixed',
+    top: 0,
+    left: 0,
+    right: 0,
+    zIndex: 1000,
+    height: '80px',
+    display: 'flex',
+    justifyContent: 'center',
+}));
 /**
  * Inner container with max-width constraint
- * Max-width: 1128px, centered
+ * Max-width: 1128px, centered (equivalent to px-156 on 1440px viewport)
  */
 const HeaderContainer$1 = styled(Box)(({ theme }) => ({
     display: 'flex',
@@ -868,6 +886,7 @@ const HeaderContainer$1 = styled(Box)(({ theme }) => ({
 }));
 /**
  * Left section containing logo and menu items
+ * Gap: 32px between all children (logo and menu items)
  */
 const LeftSection = styled(Box)({
     display: 'flex',
@@ -883,57 +902,58 @@ const LogoContainer$2 = styled(Box)({
     alignItems: 'center',
     cursor: 'pointer',
     height: '100%',
+    flexShrink: 0,
 });
 /**
  * Logo image
- * Width: 126px, height: auto
+ * Width: 126px, height: 16px (per Figma)
  */
 const LogoImage$1 = styled('img')({
     width: '126px',
-    height: 'auto',
+    height: '16px',
     objectFit: 'contain',
 });
 /**
  * Navigation menu container
+ * No additional gap - items are spaced by LeftSection's gap
  */
-const NavMenu = styled(Box)({
+styled(Box)({
     display: 'flex',
     alignItems: 'center',
     height: '100%',
-    gap: '32px',
+    gap: '0',
 });
 /**
  * Individual menu item button
- * Font: MetLife Circular Bold, 18px
+ * Font: MetLife Circular Bold, 18px, color: #13131B
+ * Padding: 10px horizontal (creates visual spacing between items)
  */
-const MenuItemButton = styled(Button$1)(({ theme }) => {
-    var _a;
-    return ({
-        display: 'flex',
-        alignItems: 'center',
-        gap: '8px',
-        padding: '0 10px',
-        height: '100%',
-        minWidth: 'auto',
-        textTransform: 'none',
-        color: '#13131B',
-        fontFamily: '"Montserrat", "MetLife_Circular", sans-serif',
-        fontWeight: 700,
-        fontSize: '18px',
-        lineHeight: '24px',
-        letterSpacing: '0px',
-        borderRadius: 0,
-        '&:hover': {
-            backgroundColor: 'transparent',
-            color: ((_a = theme.palette.primary) === null || _a === void 0 ? void 0 : _a.main) || '#0090DA',
-        },
-    });
-});
+const MenuItemButton = styled(Button$1)(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    gap: '8px',
+    padding: '0 10px',
+    height: '100%',
+    minWidth: 'auto',
+    textTransform: 'none',
+    color: designColors.natural.dim100,
+    fontFamily: '"MetLifeCircular", "Montserrat", "Roboto", "Helvetica", "Arial", sans-serif',
+    fontWeight: 700,
+    fontSize: '18px',
+    lineHeight: '24px',
+    letterSpacing: '0px',
+    borderRadius: 0,
+    '&:hover': {
+        backgroundColor: 'transparent',
+        color: designColors.primary.main60,
+    },
+}));
 /**
  * Menu item text
+ * Font: MetLife Circular Bold, 18px
  */
 const MenuItemText = styled(Typography)({
-    fontFamily: '"Montserrat", "MetLife_Circular", sans-serif',
+    fontFamily: '"MetLifeCircular", "Montserrat", "Roboto", "Helvetica", "Arial", sans-serif',
     fontWeight: 700,
     fontSize: '18px',
     lineHeight: '24px',
@@ -942,12 +962,12 @@ const MenuItemText = styled(Typography)({
 });
 /**
  * Dropdown arrow icon
- * Size: 24px
+ * Size: 24px, color: #13131B
  */
 const DropdownIcon = styled(ArrowDropDownIcon)({
     width: '24px',
     height: '24px',
-    color: '#13131B',
+    color: designColors.natural.dim100,
 });
 /**
  * Right section containing login button
@@ -960,30 +980,28 @@ const RightSection = styled(Box)({
 /**
  * Login button (text style)
  * Based on Figma: Style=Text, State=enabled, Show Icon=False
+ * Color: #0090da (primary blue/teal)
  */
-const LoginButton = styled(Button$1)(({ theme }) => {
-    var _a;
-    return ({
-        display: 'flex',
-        alignItems: 'center',
-        padding: '0 10px',
-        height: '100%',
-        minWidth: 'auto',
-        textTransform: 'none',
-        color: ((_a = theme.palette.primary) === null || _a === void 0 ? void 0 : _a.main) || '#E11931',
-        fontFamily: '"Montserrat", "MetLife_Circular", sans-serif',
-        fontWeight: 700,
-        fontSize: '18px',
-        lineHeight: '24px',
-        letterSpacing: '0px',
-        borderRadius: 0,
+const LoginButton = styled(Button$1)(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    padding: '0 10px',
+    height: '100%',
+    minWidth: 'auto',
+    textTransform: 'none',
+    color: designColors.primary.main60,
+    fontFamily: '"MetLifeCircular", "Montserrat", "Roboto", "Helvetica", "Arial", sans-serif',
+    fontWeight: 700,
+    fontSize: '18px',
+    lineHeight: '24px',
+    letterSpacing: '0px',
+    borderRadius: 0,
+    backgroundColor: 'transparent',
+    '&:hover': {
         backgroundColor: 'transparent',
-        '&:hover': {
-            backgroundColor: 'transparent',
-            textDecoration: 'underline',
-        },
-    });
-});
+        textDecoration: 'underline',
+    },
+}));
 /**
  * Dropdown menu container
  */
@@ -1003,11 +1021,11 @@ const StyledMenuItem$1 = styled(MenuItem)(({ theme }) => ({
     alignItems: 'center',
     gap: '12px',
     padding: '16px 20px',
-    fontFamily: '"Montserrat", "MetLife_Circular", sans-serif',
+    fontFamily: '"MetLifeCircular", "Montserrat", "Roboto", "Helvetica", "Arial", sans-serif',
     fontWeight: 500,
     fontSize: '16px',
     lineHeight: '24px',
-    color: '#13131B',
+    color: designColors.natural.dim100,
     '&:hover': {
         backgroundColor: 'rgba(0, 144, 218, 0.08)',
     },
@@ -1072,15 +1090,15 @@ function DesktopHeaderMenuBar({ logo, logoAlt = 'Logo', menuItems, showLoginButt
         e.preventDefault();
         onLogoClick === null || onLogoClick === void 0 ? void 0 : onLogoClick();
     };
-    return (jsx(StyledAppBar$2, Object.assign({ className: className }, { children: jsxs(HeaderContainer$1, { children: [jsxs(LeftSection, { children: [jsx(LogoContainer$2, Object.assign({ onClick: handleLogoClick }, { children: jsx(LogoImage$1, { src: logo, alt: logoAlt }) })), jsx(NavMenu, { children: menuItems.map((item) => (jsxs(React.Fragment, { children: [jsxs(MenuItemButton, Object.assign({ onClick: (e) => handleMenuClick(e, item), "aria-haspopup": item.hasDropdown ? 'true' : undefined, "aria-expanded": item.hasDropdown ? openMenuKey === item.key : undefined, "data-testid": `menu-item-${item.key}` }, { children: [jsx(MenuItemText, { children: formatMessage({ id: item.label }) }), item.hasDropdown && jsx(DropdownIcon, {})] })), item.hasDropdown && item.subItems && (jsx(StyledMenu$1, Object.assign({ id: `menu-${item.key}`, anchorEl: anchorEl, open: openMenuKey === item.key, onClose: handleCloseMenu, anchorOrigin: {
-                                            vertical: 'bottom',
-                                            horizontal: 'left',
-                                        }, transformOrigin: {
-                                            vertical: 'top',
-                                            horizontal: 'left',
-                                        }, MenuListProps: {
-                                            'aria-labelledby': `menu-button-${item.key}`,
-                                        } }, { children: item.subItems.map((subItem) => (jsxs(StyledMenuItem$1, Object.assign({ onClick: () => handleSubItemClick(item, subItem.key), "data-testid": `submenu-item-${subItem.key}` }, { children: [subItem.icon && (jsx(MenuItemIcon, { src: subItem.icon, alt: subItem.label })), formatMessage({ id: subItem.label })] }), subItem.key))) })))] }, item.key))) })] }), jsx(RightSection, { children: showLoginButton && (jsx(LoginButton, Object.assign({ onClick: onLoginClick, "data-testid": "header-login-button" }, { children: formatMessage({ id: loginButtonText }) }))) })] }) })));
+    return (jsx(StyledAppBar$2, Object.assign({ className: className }, { children: jsxs(HeaderContainer$1, { children: [jsxs(LeftSection, { children: [jsx(LogoContainer$2, Object.assign({ onClick: handleLogoClick }, { children: jsx(LogoImage$1, { src: logo, alt: logoAlt }) })), menuItems.map((item) => (jsxs(React.Fragment, { children: [jsxs(MenuItemButton, Object.assign({ onClick: (e) => handleMenuClick(e, item), "aria-haspopup": item.hasDropdown ? 'true' : undefined, "aria-expanded": item.hasDropdown ? openMenuKey === item.key : undefined, "data-testid": `menu-item-${item.key}` }, { children: [jsx(MenuItemText, { children: formatMessage({ id: item.label }) }), item.hasDropdown && jsx(DropdownIcon, {})] })), item.hasDropdown && item.subItems && (jsx(StyledMenu$1, Object.assign({ id: `menu-${item.key}`, anchorEl: anchorEl, open: openMenuKey === item.key, onClose: handleCloseMenu, anchorOrigin: {
+                                        vertical: 'bottom',
+                                        horizontal: 'left',
+                                    }, transformOrigin: {
+                                        vertical: 'top',
+                                        horizontal: 'left',
+                                    }, MenuListProps: {
+                                        'aria-labelledby': `menu-button-${item.key}`,
+                                    } }, { children: item.subItems.map((subItem) => (jsxs(StyledMenuItem$1, Object.assign({ onClick: () => handleSubItemClick(item, subItem.key), "data-testid": `submenu-item-${subItem.key}` }, { children: [subItem.icon && (jsx(MenuItemIcon, { src: subItem.icon, alt: subItem.label })), formatMessage({ id: subItem.label })] }), subItem.key))) })))] }, item.key)))] }), jsx(RightSection, { children: showLoginButton && (jsx(LoginButton, Object.assign({ onClick: onLoginClick, "data-testid": "header-login-button" }, { children: formatMessage({ id: loginButtonText }) }))) })] }) })));
 }
 
 const StyledAppBar$1 = styled(AppBar)(({ theme, ispartnershippagemobileview, scrolled }) => {
@@ -2323,19 +2341,21 @@ const StyledOptionButton = styled(ButtonBase, {
     const colors = variantColors[colorVariant];
     return {
         height: heights[size],
-        // On desktop: auto width (inline), on mobile: full width
+        // Allow flex to control width when in flex container, otherwise auto or full
         width: fullWidth ? '100%' : 'auto',
+        minWidth: 0,
         borderRadius: '24px',
         border: selected
             ? '2px solid #0090DA'
             : `1px solid ${colors.unselectedBorder}`,
         backgroundColor: selected ? colors.selectedBg : colors.unselectedBg,
-        padding: '10px 24px',
+        padding: '12px 24px',
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
         cursor: 'pointer',
         transition: 'all 0.2s ease',
+        boxSizing: 'border-box',
         '&:hover': {
             backgroundColor: selected ? colors.selectedBg : colors.hoverBg,
             borderColor: selected ? '#0090DA' : colors.hoverBorder,
@@ -2368,12 +2388,12 @@ const OptionLabel = styled(Typography)(({ theme, selected, colorVariant = 'defau
     const colors = variantColors[colorVariant];
     return {
         fontWeight: selected ? 700 : 500,
-        fontSize: '16px',
-        lineHeight: '24px',
+        fontSize: '14px',
+        lineHeight: '20px',
         color: selected ? '#0090DA' : colors.unselectedText,
         textAlign: 'center',
+        fontFamily: '"MetLifeCircular", "Montserrat", sans-serif',
         [theme.breakpoints.down('md')]: {
-            lineHeight: '20px',
             fontWeight: 500,
         },
     };
@@ -3237,18 +3257,22 @@ const CheckoutFormButton = ({ text = 'Next', disabled = false, onClick, fixed =
 const QuestionContainer = styled(Box)({
     display: 'flex',
     flexDirection: 'column',
-    gap: '8px',
+    gap: '16px',
 });
 const QuestionText = styled(Typography)({
-    fontSize: '14px',
+    fontSize: '16px',
     fontWeight: 400,
     color: '#13131B',
-    lineHeight: '20px',
+    lineHeight: '24px',
+    fontFamily: '"MetLifeCircular", "Montserrat", sans-serif',
 });
 const OptionsContainer = styled(Box)({
     display: 'flex',
     gap: '16px',
-    marginTop: '12px',
+    // Make children fill equal width
+    '& > *': {
+        flex: 1,
+    },
 });
 styled(Box)(({ selected }) => ({
     flex: 1,
@@ -3273,7 +3297,7 @@ styled(Typography)(({ selected }) => ({
 }));
 
 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" }), jsx(OptionButton, { value: "no", label: labels.no || 'No', selected: value === 'no', onClick: () => onChange('no'), variant: "form" })] }), error && (jsx(Typography, Object.assign({ 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: {
                     color: 'error.main',
                     fontSize: '12px',
                     mt: 0.5,