igloo-d2c-components 1.1.1 → 1.1.3-non-prod

package/dist/esm/index.js

@@ -1,9 +1,9 @@
 "use client"
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
-import React__default, { createContext, useMemo, useContext, useState, useEffect, Component } from 'react';
+import React__default, { createContext, useMemo, useContext, useState, useEffect, Component, useCallback } from 'react';
 import { createTheme, ThemeProvider, styled } from '@mui/material/styles';
-import { useTheme, Button as Button$1, Card as Card$1, CardHeader, CardContent, CardActions, Box, Typography, Menu, MenuItem, Avatar, Drawer, IconButton, FormControlLabel, useMediaQuery, Toolbar, 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 { useTheme, Button as Button$1, Card as Card$1, CardHeader, CardContent, CardActions, Box, Typography, Menu, MenuItem, Avatar, Drawer, IconButton, FormControlLabel, useMediaQuery, Toolbar, RadioGroup, Radio, AppBar as AppBar$1, Divider, List, ListItem, ListItemButton, ListItemText, styled as styled$1, Dialog, ButtonBase, Slider, Checkbox, Accordion, AccordionSummary, AccordionDetails, TextField, Autocomplete, Chip } from '@mui/material';
 import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
 import CloseIcon from '@mui/icons-material/Close';
 import AppBar from '@mui/material/AppBar';
@@ -14,6 +14,8 @@ import InfoIcon from '@mui/icons-material/Info';
 import AddIcon from '@mui/icons-material/Add';
 import RemoveIcon from '@mui/icons-material/Remove';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline';
+import RemoveCircleOutlineIcon from '@mui/icons-material/RemoveCircleOutline';
 
 /**
  * Tenant Typography Configurations
@@ -401,6 +403,1272 @@ const ammetlifeTypography = {
      * These map to the new Figma-based variants
      * ======================================== */
 };
+/**
+ * B2C ID Typography Configuration
+ */
+const b2cidTypography = {
+    fontFamily: 'Montserrat',
+    fontWeightRegular: 400,
+    fontWeightMedium: 500,
+    fontWeightSemiBold: 600,
+    fontWeightBold: 700,
+    fontWeightExtraBold: 800,
+    fontWeightExtraBlack: 900,
+    H1: {
+        fontSize: '64px',
+        fontStyle: 'normal',
+        fontWeight: 900,
+        lineHeight: '72px',
+    },
+    h1: {
+        fontSize: '42px',
+        fontStyle: 'normal',
+        fontWeight: 700,
+        lineHeight: '48px',
+        '@media (max-width:600px)': {
+            fontSize: '24px',
+            fontStyle: 'normal',
+            fontWeight: 700,
+            lineHeight: '30px',
+        },
+    },
+    h2: {
+        fontSize: '22px',
+        fontStyle: 'normal',
+        fontWeight: 700,
+        lineHeight: '26px',
+        '@media (max-width:600px)': {
+            fontSize: '16px',
+            fontStyle: 'normal',
+            fontWeight: 600,
+            lineHeight: '22px',
+        },
+    },
+    h3: {
+        fontSize: '18px',
+        fontStyle: 'normal',
+        fontWeight: 600,
+        lineHeight: '24px',
+        '@media (max-width:600px)': {
+            fontSize: '14px',
+            fontStyle: 'normal',
+            fontWeight: 600,
+            lineHeight: '20px',
+        },
+    },
+    bodyStrongLarge: {
+        fontSize: '16px',
+        fontStyle: 'normal',
+        fontWeight: 500,
+        lineHeight: '20px',
+        '@media (max-width:600px)': {
+            fontSize: '14px',
+            fontStyle: 'normal',
+            fontWeight: 400,
+            lineHeight: '18px',
+        },
+    },
+    bodyStrongMedium: {
+        fontSize: '14px',
+        fontStyle: 'normal',
+        fontWeight: 500,
+        lineHeight: '18px',
+    },
+    bodyStrongSmall: {
+        fontSize: '12px',
+        fontStyle: 'normal',
+        fontWeight: 500,
+        lineHeight: '16px',
+    },
+    bodyStrongSmallBoth: {
+        fontSize: '14px',
+        fontStyle: 'normal',
+        fontWeight: 500,
+        lineHeight: '18px',
+        '@media (max-width:600px)': {
+            fontSize: '12px',
+            fontStyle: 'normal',
+            fontWeight: 500,
+            lineHeight: '16px',
+        },
+    },
+    bodyStrongSM: {
+        fontSize: '14px',
+        fontStyle: 'normal',
+        fontWeight: 500,
+        lineHeight: '18px',
+        '@media (max-width:600px)': {
+            fontSize: '12px',
+            fontStyle: 'normal',
+            fontWeight: 500,
+            lineHeight: '16px',
+        },
+    },
+    bodyFeedbackText: {
+        fontSize: '12px',
+        fontStyle: 'normal',
+        fontWeight: 600,
+        lineHeight: '16px',
+    },
+    bodyStrongSmallBadgeText: {
+        fontSize: '14px',
+        fontStyle: 'normal',
+        fontWeight: 500,
+        lineHeight: '16px',
+        '@media (max-width:600px)': {
+            fontSize: '12px',
+            fontStyle: 'normal',
+            fontWeight: 400,
+            lineHeight: '18px',
+        },
+    },
+    bodyLarge: {
+        fontSize: '16px',
+        fontStyle: 'normal',
+        fontWeight: 400,
+        lineHeight: '20px',
+        '@media (max-width:600px)': {
+            fontSize: '14px',
+            fontStyle: 'normal',
+            fontWeight: 400,
+            lineHeight: '18px',
+        },
+    },
+    bodyLargeXL: {
+        fontSize: '16px',
+        fontStyle: 'normal',
+        fontWeight: 500,
+        lineHeight: '20px',
+        '@media (max-width:600px)': {
+            fontSize: '14px',
+            fontStyle: 'normal',
+            fontWeight: 400,
+            lineHeight: '18px',
+        },
+    },
+    bodyMedium: {
+        fontSize: '14px',
+        fontStyle: 'normal',
+        fontWeight: 400,
+        lineHeight: '18px',
+    },
+    bodyMediumCountryLabel: {
+        fontSize: '16px',
+        fontStyle: 'normal',
+        fontWeight: 400,
+        lineHeight: '20px',
+        '@media (max-width:600px)': {
+            fontSize: '14px',
+            fontStyle: 'normal',
+            fontWeight: 400,
+            lineHeight: '18px',
+        },
+    },
+    bodyMediumLarge: {
+        fontSize: '14px',
+        fontStyle: 'normal',
+        fontWeight: 600,
+        lineHeight: '18px',
+    },
+    bodySmall: {
+        fontSize: '12px',
+        fontStyle: 'normal',
+        fontWeight: 400,
+        lineHeight: '16px',
+    },
+    displayLarge: {
+        fontSize: '57px',
+        fontStyle: 'normal',
+        fontWeight: 900,
+        lineHeight: '64px',
+    },
+    displayMedium: {
+        fontSize: '45px',
+        fontStyle: 'normal',
+        fontWeight: 800,
+        lineHeight: '52px',
+    },
+    displaySmall: {
+        fontSize: '30px',
+        fontStyle: 'normal',
+        fontWeight: 700,
+        lineHeight: '44px',
+        '@media (max-width:600px)': {
+            fontSize: '22px',
+            fontStyle: 'normal',
+            fontWeight: 700,
+            lineHeight: '30px',
+        },
+    },
+    displaySmallForTitle: {
+        fontSize: '22px',
+        fontStyle: 'normal',
+        fontWeight: 700,
+        lineHeight: '26px',
+        '@media (max-width:600px)': {
+            fontSize: '16px',
+            fontStyle: 'normal',
+            fontWeight: 600,
+            lineHeight: '22px',
+        },
+    },
+    drawerMainTitle: {
+        fontSize: '24px',
+        fontStyle: 'normal',
+        fontWeight: 700,
+        lineHeight: '30px',
+    },
+    drawerTitle: {
+        fontSize: '16px',
+        fontStyle: 'normal',
+        fontWeight: 600,
+        lineHeight: '22px',
+    },
+    bannerTopTextHome: {
+        fontSize: '64px',
+        fontStyle: 'normal',
+        fontWeight: 800,
+        lineHeight: '86.966px',
+        '@media (max-width:600px)': {
+            fontSize: '45px',
+            fontStyle: 'normal',
+            fontWeight: 800,
+            lineHeight: '52px',
+        },
+    },
+    bannerLowerTextHome: {
+        fontSize: '64px',
+        fontStyle: 'normal',
+        fontWeight: 800,
+        lineHeight: '86.966px',
+        '@media (max-width:600px)': {
+            fontSize: '36px',
+            fontStyle: 'normal',
+            fontWeight: 700,
+            lineHeight: '44px',
+        },
+    },
+    categoryBanner: {
+        fontSize: '64px',
+        fontStyle: 'normal',
+        fontWeight: 800,
+        lineHeight: '86.966px',
+        '@media (max-width:600px)': {
+            fontSize: '34px',
+            fontStyle: 'normal',
+            fontWeight: 700,
+            lineHeight: '44px',
+        },
+    },
+    description: {
+        fontSize: '18px',
+        fontStyle: 'normal',
+        fontWeight: 600,
+        lineHeight: '24px',
+        '@media (max-width:600px)': {
+            fontSize: '8px',
+            fontStyle: 'normal',
+            fontWeight: 600,
+            lineHeight: '16px',
+        },
+    },
+    tileDescription: {
+        fontSize: '16px',
+        fontStyle: 'normal',
+        fontWeight: '500',
+        lineHeight: '20px',
+        '@media (max-width:600px)': {
+            fontSize: '12px',
+            fontStyle: 'normal',
+            fontWeight: '500',
+            lineHeight: '16px',
+        },
+    },
+    ctaButton: {
+        fontSize: '14px',
+        fontStyle: 'normal',
+        fontWeight: '600',
+        lineHeight: '20px',
+    },
+    bodyStrongDescription: {
+        fontSize: '16px',
+        fontStyle: 'normal',
+        fontWeight: 500,
+        lineHeight: '20px',
+        '@media (max-width:600px)': {
+            fontSize: '14px',
+            fontStyle: 'normal',
+            fontWeight: 500,
+            lineHeight: '18px',
+        },
+    },
+    bodyStrongLargeOnlyDesktop: {
+        fontSize: '16px',
+        fontStyle: 'normal',
+        fontWeight: 500,
+        lineHeight: '20px',
+    },
+    imageLabel: {
+        fontSize: '16px',
+        fontStyle: 'normal',
+        fontWeight: 400,
+        lineHeight: '20px',
+    },
+    currencyValue: {
+        fontSize: '6px',
+        fontStyle: 'normal',
+        fontWeight: 600,
+        lineHeight: '16px',
+    },
+    smallText: {
+        fontSize: '8px',
+        fontStyle: 'normal',
+        fontWeight: 500,
+        lineHeight: '16px',
+    },
+    tableHeaderText: {
+        fontSize: '18px',
+        fontStyle: 'normal',
+        fontWeight: 600,
+        lineHeight: '24px',
+        '@media (max-width:600px)': {
+            fontSize: '14px',
+            fontStyle: 'normal',
+            fontWeight: 600,
+            lineHeight: '20px',
+        },
+    },
+    tableHeaderPremiumValue: {
+        fontSize: '14px',
+        fontStyle: 'normal',
+        fontWeight: 400,
+        lineHeight: '16px',
+        '@media (max-width:600px)': {
+            fontSize: '12px',
+            fontStyle: 'normal',
+            fontWeight: 400,
+            lineHeight: '16px',
+        },
+    },
+    tableHeaderDiscountedPremiumValue: {
+        fontSize: '14px',
+        fontStyle: 'normal',
+        fontWeight: 400,
+        lineHeight: '16px',
+        '@media (max-width:600px)': {
+            fontSize: '12px',
+            fontStyle: 'normal',
+            fontWeight: 500,
+            lineHeight: '16px',
+        },
+    },
+    addonRp: {
+        fontSize: '8px',
+        fontStyle: 'normal',
+        fontWeight: 600,
+        lineHeight: '16px',
+    },
+    aiNotification: {
+        fontSize: '9px',
+        fontStyle: 'normal',
+        fontWeight: 500,
+        lineHeight: '14px',
+    },
+    mobileH2: {
+        fontSize: '16px',
+        fontStyle: 'normal',
+        fontWeight: 700,
+        lineHeight: '20px',
+    },
+    annuallyTag: {
+        fontSize: '14px',
+        fontStyle: 'normal',
+        fontWeight: 400,
+        lineHeight: '16px',
+        '@media (max-width:600px)': {
+            fontSize: '12px',
+            fontStyle: 'normal',
+            fontWeight: 400,
+            lineHeight: '20px',
+        },
+    },
+    descriptionContact: {
+        fontSize: '16px',
+        fontStyle: 'normal',
+        fontWeight: 400,
+        lineHeight: '20px',
+        '@media (max-width:600px)': {
+            fontSize: '12px',
+            fontStyle: 'normal',
+            fontWeight: 400,
+            lineHeight: '16px',
+        },
+    },
+    radioGroupHeader: {
+        fontSize: '14px',
+        fontStyle: 'normal',
+        fontWeight: 400,
+        lineHeight: '20px',
+        '@media (min-width:600px)': {
+            fontSize: '16px',
+            fontStyle: 'normal',
+            fontWeight: 400,
+            lineHeight: '24px',
+        },
+    },
+    title: {
+        fontSize: '16px',
+        fontStyle: 'normal',
+        fontWeight: 700,
+        lineHeight: '24px',
+    },
+    aboutUsDesc: {
+        fontSize: '24px',
+        fontStyle: 'normal',
+        fontWeight: 400,
+        lineHeight: '30px',
+        '@media (max-width:600px)': {
+            fontSize: '14px',
+            fontStyle: 'normal',
+            fontWeight: 500,
+            lineHeight: '18px',
+        },
+    },
+    ppandtosdescription: {
+        fontSize: '14px',
+        fontStyle: 'normal',
+        fontWeight: 400,
+        lineHeight: '18px',
+        '@media (max-width:600px)': {
+            fontSize: '12px',
+            fontStyle: 'normal',
+            fontWeight: 400,
+            lineHeight: '16px',
+        },
+    },
+    ppandtosheader: {
+        fontSize: '16px',
+        fontStyle: 'normal',
+        fontWeight: 500,
+        lineHeight: '20px',
+        '@media (max-width:600px)': {
+            fontSize: '14px',
+            fontStyle: 'normal',
+            fontWeight: 500,
+            lineHeight: '18px',
+        },
+    },
+    contactUsDescription: {
+        fontSize: '12px',
+        fontStyle: 'normal',
+        fontWeight: 500,
+        lineHeight: '16px',
+        '@media (max-width:600px)': {
+            fontSize: '8px',
+            fontStyle: 'normal',
+            fontWeight: 600,
+            lineHeight: '16px',
+        },
+    },
+    descriptionForContact: {
+        fontSize: '18px',
+        fontStyle: 'normal',
+        fontWeight: 600,
+        lineHeight: '24px',
+        '@media (max-width:600px)': {
+            fontSize: '12px',
+            fontStyle: 'normal',
+            fontWeight: 500,
+            lineHeight: '16px',
+        },
+    },
+    policystatus: {
+        fontSize: '14px',
+        fontStyle: 'normal',
+        fontWeight: 500,
+        lineHeight: '18px',
+        '@media (max-width:600px)': {
+            fontSize: '12px',
+            fontStyle: 'normal',
+            fontWeight: 500,
+            lineHeight: '16px',
+        },
+    },
+    policyitemdetails: {
+        fontSize: '16px',
+        fontStyle: 'normal',
+        fontWeight: 400,
+        lineHeight: '20px',
+        '@media (max-width:600px)': {
+            fontSize: '14px',
+            fontStyle: 'normal',
+            fontWeight: 400,
+            lineHeight: '18px',
+        },
+    },
+    amountOnFloating: {
+        fontSize: '14px',
+        fontStyle: 'normal',
+        fontWeight: 600,
+        lineHeight: '20px',
+    },
+    ratingEmoji: {
+        fontSize: '14px',
+        fontStyle: 'normal',
+        fontWeight: 600,
+        lineHeight: '20px',
+        '@media (max-width:600px)': {
+            fontSize: '12px',
+            fontStyle: 'normal',
+            fontWeight: 600,
+            lineHeight: '16px',
+        },
+    },
+    displayMediumForBoth: {
+        fontSize: '45px',
+        fontStyle: 'normal',
+        fontWeight: 800,
+        lineHeight: '52px',
+        '@media (max-width:600px)': {
+            fontSize: '24px',
+            fontStyle: 'normal',
+            fontWeight: 800,
+            lineHeight: '24px',
+        },
+    },
+    bodyLargeSubHeading: {
+        fontSize: '16px',
+        fontStyle: 'normal',
+        fontWeight: 400,
+        lineHeight: '20px',
+        '@media (max-width:600px)': {
+            fontSize: '10px',
+            fontStyle: 'normal',
+            fontWeight: 500,
+            lineHeight: '12px',
+        },
+    },
+    h2Contact: {
+        fontSize: '22px',
+        fontStyle: 'normal',
+        fontWeight: 700,
+        lineHeight: '26px',
+        '@media (max-width:600px)': {
+            fontSize: '14px',
+            fontStyle: 'normal',
+            fontWeight: 600,
+            lineHeight: '20px',
+        },
+    },
+    tileDescriptionContact: {
+        fontSize: '18px',
+        fontStyle: 'normal',
+        fontWeight: '600',
+        lineHeight: '24px',
+        '@media (max-width:600px)': {
+            fontSize: '12px',
+            fontStyle: 'normal',
+            fontWeight: '500',
+            lineHeight: '16px',
+        },
+    },
+    bodyStrongLargePartners: {
+        fontSize: '16px',
+        fontStyle: 'normal',
+        fontWeight: 500,
+        lineHeight: '20px',
+        '@media (max-width:600px)': {
+            fontSize: '14px',
+            fontStyle: 'normal',
+            fontWeight: 600,
+            lineHeight: '20px',
+        },
+    },
+    h4: {
+        fontSize: '18px',
+        fontStyle: 'normal',
+        fontWeight: 600,
+        lineHeight: '24px',
+        '@media (max-width:600px)': {
+            fontSize: '14px',
+            fontStyle: 'normal',
+            fontWeight: 500,
+            lineHeight: '18px',
+        },
+    },
+    mobileH3: {
+        fontSize: '10px',
+        fontStyle: 'normal',
+        fontWeight: 700,
+        lineHeight: '16px',
+    },
+    mobileDescription: {
+        fontSize: '10px',
+        fontStyle: 'normal',
+        fontWeight: 400,
+        lineHeight: '16px',
+    },
+    termsTitle: {
+        fontSize: '14px',
+        fontStyle: 'normal',
+        fontWeight: 500,
+        lineHeight: '20px',
+    },
+    policyTitle: {
+        fontSize: '14px',
+        fontStyle: 'normal',
+        fontWeight: 600,
+        lineHeight: '22px',
+    },
+    infoMessage: {
+        fontSize: '10px',
+        fontStyle: 'normal',
+        fontWeight: 500,
+        lineHeight: '16px',
+    },
+    seoBanner: {
+        fontSize: '40px',
+        fontStyle: 'normal',
+        fontWeight: 700,
+        lineHeight: '44px',
+        '@media (max-width:600px)': {
+            fontSize: '30px',
+            fontStyle: 'normal',
+            fontWeight: 700,
+            lineHeight: '120%',
+        },
+    },
+    h3SEO: {
+        fontSize: '18px',
+        fontStyle: 'normal',
+        fontWeight: 600,
+        lineHeight: '24px',
+        '@media (max-width:600px)': {
+            fontSize: '14px',
+            fontStyle: 'normal',
+            fontWeight: 600,
+            lineHeight: '20px',
+        },
+    },
+    h2SEO: {
+        fontSize: '22px',
+        fontStyle: 'normal',
+        fontWeight: 700,
+        lineHeight: '26px',
+        '@media (max-width:600px)': {
+            fontSize: '16px',
+            fontStyle: 'normal',
+            fontWeight: 600,
+            lineHeight: '22px',
+        },
+    },
+    descriptionForZsurvey: {
+        fontSize: '14px',
+        fontStyle: 'normal',
+        fontWeight: 500,
+        lineHeight: '18px',
+        '@media (max-width:600px)': {
+            fontSize: '10px',
+            fontStyle: 'normal',
+            fontWeight: 500,
+            lineHeight: '16px',
+        },
+    },
+    interstialText: {
+        fontSize: '18px',
+        fontStyle: 'normal',
+        fontWeight: 600,
+        lineHeight: '24px',
+        '@media (max-width:600px)': {
+            fontSize: '10px',
+            fontStyle: 'normal',
+            fontWeight: 600,
+            lineHeight: '20px',
+        },
+    },
+    interstialTitle: {
+        fontSize: '18px',
+        fontStyle: 'normal',
+        fontWeight: 600,
+        lineHeight: '24px',
+        '@media (max-width:600px)': {
+            fontSize: '16px',
+            fontStyle: 'normal',
+            fontWeight: 600,
+            lineHeight: '24px',
+        },
+    },
+    interstialHighlights: {
+        fontSize: '14px',
+        fontStyle: 'normal',
+        fontWeight: 400,
+        lineHeight: '18px',
+        '@media (max-width:600px)': {
+            fontSize: '12px',
+            fontStyle: 'normal',
+            fontWeight: 400,
+            lineHeight: '16px',
+        },
+    },
+    interstialPrefixText: {
+        fontSize: '12px',
+        fontStyle: 'normal',
+        fontWeight: 600,
+        lineHeight: '14.4px',
+        '@media (max-width:600px)': {
+            fontSize: '10px',
+            fontStyle: 'normal',
+            fontWeight: 600,
+            lineHeight: '12px',
+        },
+    },
+    interstialAmountText: {
+        fontSize: '16px',
+        fontStyle: 'normal',
+        fontWeight: 600,
+        lineHeight: '24px',
+        '@media (max-width:600px)': {
+            fontSize: '14px',
+            fontStyle: 'normal',
+            fontWeight: 600,
+            lineHeight: '22px',
+        },
+    },
+    interstialPostText: {
+        fontSize: '12px',
+        fontStyle: 'normal',
+        fontWeight: 600,
+        lineHeight: '16px',
+        '@media (max-width:600px)': {
+            fontSize: '10px',
+            fontStyle: 'normal',
+            fontWeight: 600,
+            lineHeight: '16px',
+        },
+    },
+    interstialButtonText: {
+        fontSize: '16px',
+        fontStyle: 'normal',
+        fontWeight: 600,
+        lineHeight: '24px',
+        '@media (max-width:600px)': {
+            fontSize: '14px',
+            fontStyle: 'normal',
+            fontWeight: 600,
+            lineHeight: '20px',
+        },
+    },
+    interstialRecommendationTag: {
+        fontSize: '12px',
+        fontStyle: 'normal',
+        fontWeight: 700,
+        lineHeight: '16px',
+        '@media (max-width:600px)': {
+            fontSize: '10px',
+            fontStyle: 'normal',
+            fontWeight: 700,
+            lineHeight: '16px',
+        },
+    },
+    interstialPromotionTag: {
+        fontSize: '12px',
+        fontStyle: 'normal',
+        fontWeight: 700,
+        lineHeight: '16px',
+        '@media (max-width:600px)': {
+            fontSize: '10px',
+            fontStyle: 'normal',
+            fontWeight: 700,
+            lineHeight: '16px',
+        },
+    },
+    recommendationTag: {
+        fontSize: '12px',
+        fontStyle: 'normal',
+        fontWeight: 400,
+        lineHeight: '14.4px',
+        '@media (max-width:600px)': {
+            fontSize: '10px',
+            fontStyle: 'normal',
+            fontWeight: 400,
+            lineHeight: '12px',
+        },
+    },
+    aiRecommendationTitle: {
+        fontSize: '12px',
+        fontStyle: 'normal',
+        fontWeight: 700,
+        lineHeight: '12px',
+        '@media (max-width:600px)': {
+            fontSize: '10px',
+            fontStyle: 'normal',
+            fontWeight: 700,
+            lineHeight: '12px',
+        },
+    },
+    h2Interstitial: {
+        fontSize: '22px',
+        fontStyle: 'normal',
+        fontWeight: 700,
+        lineHeight: '28px',
+        '@media (max-width:600px)': {
+            fontSize: '20px',
+            fontStyle: 'normal',
+            fontWeight: 700,
+            lineHeight: '26px',
+        },
+    },
+    contactDescription: {
+        fontSize: '12px',
+        fontStyle: 'normal',
+        fontWeight: 400,
+        lineHeight: '16px',
+        '@media (max-width:600px)': {
+            fontSize: '10px',
+            fontStyle: 'normal',
+            fontWeight: 400,
+            lineHeight: '14px',
+        },
+    },
+    personalizedPlanHeaderTitle: {
+        fontSize: '16px',
+        fontStyle: 'normal',
+        fontWeight: 600,
+        lineHeight: '24px',
+        '@media (max-width:600px)': {
+            fontSize: '12px',
+            fontStyle: 'normal',
+            fontWeight: 600,
+            lineHeight: '16px',
+        },
+    },
+    h4ForBoth: {
+        fontSize: '14px',
+        fontStyle: 'normal',
+        fontWeight: 500,
+        lineHeight: '18px',
+    },
+    interstialAmountTextForBoth: {
+        fontSize: '16px',
+        fontStyle: 'normal',
+        fontWeight: 600,
+        lineHeight: '24px',
+        '@media (max-width:600px)': {
+            fontSize: '12px',
+            fontStyle: 'normal',
+            fontWeight: 600,
+            lineHeight: '16px',
+        },
+    },
+    personalizedPlanHeaderSubtitle: {
+        fontSize: '12px',
+        fontStyle: 'normal',
+        fontWeight: 400,
+        lineHeight: '16px',
+        '@media (max-width:600px)': {
+            fontSize: '9px',
+            fontStyle: 'normal',
+            fontWeight: 400,
+            lineHeight: '14px',
+        },
+    },
+    personalizedPlanNewTag: {
+        fontSize: '10px',
+        fontStyle: 'normal',
+        fontWeight: 700,
+        lineHeight: '14px',
+    },
+    personalizedPlanNewTagBoth: {
+        fontSize: '12px',
+        fontStyle: 'normal',
+        fontWeight: 700,
+        lineHeight: '16px',
+        '@media (max-width:600px)': {
+            fontSize: '10px',
+            fontStyle: 'normal',
+            fontWeight: 700,
+            lineHeight: '14px',
+        },
+    },
+    drawerMainTitleTwo: {
+        fontSize: '24px',
+        fontStyle: 'normal',
+        fontWeight: 700,
+        lineHeight: '32px',
+        '@media (max-width:600px)': {
+            fontSize: '16px',
+            fontStyle: 'normal',
+            fontWeight: 600,
+            lineHeight: '24px',
+        },
+    },
+    bodyStrongLargeOnlyMobile: {
+        fontSize: '16px',
+        fontStyle: 'normal',
+        fontWeight: 500,
+        lineHeight: '20px',
+        '@media (max-width:600px)': {
+            fontSize: '12px',
+            fontStyle: 'normal',
+            fontWeight: 500,
+            lineHeight: '16px',
+        },
+    },
+    personalizedCount: {
+        fontSize: '16px',
+        fontStyle: 'normal',
+        fontWeight: 600,
+        lineHeight: '14.4px',
+        '@media (max-width:600px)': {
+            fontSize: '10px',
+            fontStyle: 'normal',
+            fontWeight: 600,
+            lineHeight: '12px',
+        },
+    },
+    questionaireQuestionTitle: {
+        fontSize: '16px',
+        fontStyle: 'normal',
+        fontWeight: 600,
+        lineHeight: '24px',
+        '@media (max-width:600px)': {
+            fontSize: '14px',
+            fontStyle: 'normal',
+            fontWeight: 600,
+            lineHeight: '20px',
+        },
+    },
+    questionaireQuestionDescription: {
+        fontSize: '14px',
+        fontStyle: 'normal',
+        fontWeight: 400,
+        lineHeight: '18px',
+        '@media (max-width:600px)': {
+            fontSize: '12px',
+            fontStyle: 'normal',
+            fontWeight: 400,
+            lineHeight: '16px',
+        },
+    },
+    searchAirline: {
+        fontSize: '16px',
+        fontStyle: 'normal',
+        fontWeight: 600,
+        lineHeight: '24px',
+        '@media (max-width:600px)': {
+            fontSize: '14px',
+            fontStyle: 'normal',
+            fontWeight: 600,
+            lineHeight: '20px',
+        },
+    },
+    displaySmallTwo: {
+        fontSize: '30px',
+        fontStyle: 'normal',
+        fontWeight: 700,
+        lineHeight: '44px',
+        '@media (max-width:600px)': {
+            fontSize: '20px',
+            fontStyle: 'normal',
+            fontWeight: 700,
+            lineHeight: '28px',
+        },
+    },
+    annualFeeEntryone: {
+        fontSize: '18px',
+        fontStyle: 'normal',
+        fontWeight: 500,
+        lineHeight: '32px',
+        '@media (max-width:600px)': {
+            fontSize: '10px',
+            fontStyle: 'normal',
+            fontWeight: 400,
+            lineHeight: '14px',
+        },
+    },
+    annualFeeEntrytwo: {
+        fontSize: '18px',
+        fontStyle: 'normal',
+        fontWeight: 700,
+        lineHeight: '32px',
+        '@media (max-width:600px)': {
+            fontSize: '10px',
+            fontStyle: 'normal',
+            fontWeight: 700,
+            lineHeight: '14px',
+        },
+    },
+    displaySmallForModalTitle: {
+        fontSize: '22px',
+        fontStyle: 'normal',
+        fontWeight: 700,
+        lineHeight: '26px',
+        '@media (max-width:600px)': {
+            fontSize: '20px',
+            fontStyle: 'normal',
+            fontWeight: 700,
+            lineHeight: '28px',
+        },
+    },
+    bodyMediumModalDesc: {
+        fontSize: '16px',
+        fontStyle: 'normal',
+        fontWeight: 400,
+        lineHeight: '20px',
+        '@media (max-width:600px)': {
+            fontSize: '14px',
+            fontStyle: 'normal',
+            fontWeight: 400,
+            lineHeight: '18px',
+        },
+    },
+    personalizedPlanNewTagForBoth: {
+        fontSize: '12px',
+        fontStyle: 'normal',
+        fontWeight: 700,
+        lineHeight: '16px',
+        '@media (max-width:600px)': {
+            fontSize: '10px',
+            fontStyle: 'normal',
+            fontWeight: 700,
+            lineHeight: '14px',
+        },
+    },
+    personalizedPlanHeaderTitleReverse: {
+        fontSize: '18px',
+        fontStyle: 'normal',
+        fontWeight: 700,
+        lineHeight: '24px',
+        '@media (max-width:600px)': {
+            fontSize: '16px',
+            fontStyle: 'normal',
+            fontWeight: 600,
+            lineHeight: '24px',
+        },
+    },
+    h3Reverse: {
+        fontSize: '14px',
+        fontStyle: 'normal',
+        fontWeight: 600,
+        lineHeight: '20px',
+        '@media (max-width:600px)': {
+            fontSize: '12px',
+            fontStyle: 'normal',
+            fontWeight: 600,
+            lineHeight: '16px',
+        },
+    },
+    bodyStrongSmallForboth: {
+        fontSize: '14px',
+        fontStyle: 'normal',
+        fontWeight: 500,
+        lineHeight: '18px',
+        '@media (max-width:600px)': {
+            fontSize: '12px',
+            fontStyle: 'normal',
+            fontWeight: 500,
+            lineHeight: '16px',
+        },
+    },
+    bodyFeedbackTextForBoth: {
+        fontSize: '14px',
+        fontStyle: 'normal',
+        fontWeight: 600,
+        lineHeight: '18px',
+        '@media (max-width:600px)': {
+            fontSize: '12px',
+            fontStyle: 'normal',
+            fontWeight: 600,
+            lineHeight: '16px',
+        },
+    },
+    personalizedPlanNewTagReverse: {
+        fontSize: '12px',
+        fontStyle: 'normal',
+        fontWeight: 700,
+        lineHeight: '16px',
+        '@media (max-width:600px)': {
+            fontSize: '10px',
+            fontStyle: 'normal',
+            fontWeight: 700,
+            lineHeight: '14px',
+        },
+    },
+    seoPageTitle: {
+        fontSize: '22px',
+        fontStyle: 'normal',
+        fontWeight: 700,
+        lineHeight: '26px',
+        '@media (max-width:600px)': {
+            fontSize: '16px',
+            fontStyle: 'normal',
+            fontWeight: 700,
+            lineHeight: '24px',
+        },
+    },
+    h3ForBoth: {
+        fontSize: '14px',
+        fontStyle: 'normal',
+        fontWeight: 600,
+        lineHeight: '20px',
+    },
+    bodyMediumModalDescLarge: {
+        fontSize: '16px',
+        fontStyle: 'normal',
+        fontWeight: 500,
+        lineHeight: '20px',
+        '@media (max-width:600px)': {
+            fontSize: '14px',
+            fontStyle: 'normal',
+            fontWeight: 400,
+            lineHeight: '18px',
+        },
+    },
+    bodySmallForBoth: {
+        fontSize: '14px',
+        fontStyle: 'normal',
+        fontWeight: 400,
+        lineHeight: '18px',
+        '@media (max-width:600px)': {
+            fontSize: '12px',
+            fontStyle: 'normal',
+            fontWeight: 400,
+            lineHeight: '16px',
+        },
+    },
+    switchFromPetToCar: {
+        fontSize: '12px',
+        fontStyle: 'normal',
+        fontWeight: 400,
+        lineHeight: '16px',
+        '@media (max-width:600px)': {
+            fontSize: '10px',
+            fontStyle: 'normal',
+            fontWeight: 400,
+            lineHeight: '14px',
+        },
+    },
+    interstialPetToCar: {
+        fontSize: '16px',
+        fontStyle: 'normal',
+        fontWeight: 600,
+        lineHeight: '24px',
+        '@media (max-width:600px)': {
+            fontSize: '10px',
+            fontStyle: 'normal',
+            fontWeight: 600,
+            lineHeight: '14px',
+        },
+    },
+    interstialPetToCarButton: {
+        fontSize: '16px',
+        fontStyle: 'normal',
+        fontWeight: 600,
+        lineHeight: '24px',
+        '@media (max-width:600px)': {
+            fontSize: '10px',
+            fontStyle: 'normal',
+            fontWeight: 600,
+            lineHeight: '16px',
+        },
+    },
+    countPercentage: {
+        fontSize: '14px',
+        fontStyle: 'normal',
+        fontWeight: 600,
+        lineHeight: '20px',
+        '@media (max-width:600px)': {
+            fontSize: '12px',
+            fontStyle: 'normal',
+            fontWeight: 600,
+            lineHeight: '16px',
+        },
+    },
+    h2Large: {
+        fontSize: '22px',
+        fontStyle: 'normal',
+        fontWeight: 700,
+        lineHeight: '26px',
+        '@media (max-width:600px)': {
+            fontSize: '16px',
+            fontStyle: 'normal',
+            fontWeight: 600,
+            lineHeight: '24px',
+        },
+    },
+    aiTimeStamp: {
+        fontSize: '10px',
+        fontStyle: 'normal',
+        fontWeight: 400,
+        lineHeight: '14px',
+    },
+    originalPriceDescription: {
+        fontSize: '12px',
+        fontStyle: 'normal',
+        fontWeight: 500,
+        lineHeight: '16px',
+        '@media (max-width:600px)': {
+            fontSize: '10px',
+            fontStyle: 'normal',
+            fontWeight: 500,
+            lineHeight: '14px',
+        },
+    },
+    interstialAmountTextOne: {
+        fontSize: '16px',
+        fontStyle: 'normal',
+        fontWeight: 600,
+        lineHeight: '24px',
+    },
+    interstialAmountTextNew: {
+        fontSize: '22px',
+        fontStyle: 'normal',
+        fontWeight: 700,
+        lineHeight: '26px',
+        '@media (max-width:600px)': {
+            fontSize: '16px',
+            fontStyle: 'normal',
+            fontWeight: 600,
+            lineHeight: '24px',
+        },
+    },
+    ratingEmojiBold: {
+        fontSize: '16px',
+        fontStyle: 'normal',
+        fontWeight: 600,
+        lineHeight: '20px',
+        '@media (max-width:600px)': {
+            fontSize: '14px',
+            fontStyle: 'normal',
+            fontWeight: 600,
+            lineHeight: '20px',
+        },
+    },
+    ratingEmojiBoldTwo: {
+        fontSize: '16px',
+        fontStyle: 'normal',
+        fontWeight: 600,
+        lineHeight: '20px',
+        '@media (max-width:600px)': {
+            fontSize: '14px',
+            fontStyle: 'normal',
+            fontWeight: 400,
+            lineHeight: '18px',
+        },
+    },
+    interstialAmountTextOneForboth: {
+        fontSize: '18px',
+        fontStyle: 'normal',
+        fontWeight: 700,
+        lineHeight: '24px',
+        '@media (max-width:600px)': {
+            fontSize: '16px',
+            fontStyle: 'normal',
+            fontWeight: 600,
+            lineHeight: '24px',
+        },
+    },
+};
 /**
  * Typography Registry
  * Map of tenant IDs to their typography configurations
@@ -408,6 +1676,7 @@ const ammetlifeTypography = {
 const tenantTypography = {
     igloo: iglooTypography,
     ammetlife: ammetlifeTypography,
+    b2cid: b2cidTypography,
 };
 /**
  * Get typography configuration by tenant ID
@@ -593,6 +1862,91 @@ const ammetlifeTheme = {
     favicon: 'https://static.iglooinsure.com/icons/favicon.ico',
     assetBaseUrl: '/assets/tenants/ammetlife',
 };
+/**
+ * B2C ID Theme Configuration
+ */
+const b2cidTheme = {
+    palette: {
+        primary: {
+            dark: '#1300A9',
+            main: '#4E4EEB',
+            light: '#8183FF',
+            bright: '#C1C1FF',
+            plain: '#E1DFFF',
+            border: '#4E4EFD',
+        },
+        secondary: {
+            dim: '#650713',
+            dark: '#C55153',
+            main: '#FF7D7D',
+            bright: '#FF7378',
+            mediumBright: '#FF7062',
+            light: '#FFB3B1',
+            lighter: '#FFEBEB',
+        },
+        tertiary: {
+            dim: '#C5C6CF',
+            dark: '#E1E2EB',
+            main: '#F5F5FF',
+            light: '#FEFBFF',
+            bright: '#F9F9F9',
+        },
+        natural: {
+            dim: '#13131B',
+            dark: '#5F5E62',
+            main: '#929094',
+            light: '#C8C5CA',
+            bright: '#fff',
+            granite: '#666',
+        },
+        ui: {
+            sliderActive: '#4E4EEB',
+            sliderInactive: '#c8c5ca',
+            sliderBackground: '#f9f9f9',
+            toggleActive: '#4E4EEB',
+            toggleActiveText: '#ffffff',
+            toggleInactiveText: '#5f5e62',
+            calloutBackground: '#f9f9f9',
+            calloutBorder: '#ffffff',
+            inputBackground: '#ffffff',
+            inputBorder: '#eeeeee',
+            buttonPrimary: '#4E4EEB',
+            buttonPrimaryHover: 'rgba(78, 78, 235, 0.7)',
+        },
+        motor: {
+            main: '#00CCFF',
+            light: 'rgba(0, 208, 255, 0.10)',
+            bright: '#DFF9FF',
+        },
+        car: {
+            main: '#00CCFF',
+            light: 'rgba(0, 208, 255, 0.10)',
+            darkAI: '#06BDCE',
+        },
+        travel: {
+            main: '#00E08B',
+            light: 'rgba(0, 228, 130, 0.10)',
+        },
+        health: {
+            main: '#FD72E7',
+        },
+        life: {
+            main: '#C3214B',
+            light: 'rgba(195, 33, 75, 0.10)',
+        },
+        pet: {
+            main: '#F3A100',
+        },
+    },
+    typography: {
+        ...b2cidTypography,
+        fontFamily: '"Montserrat", "Roboto", "Helvetica", "Arial", sans-serif',
+    },
+    logo: '/assets/tenants/b2cid/logo.svg',
+    logoWhite: '/assets/tenants/b2cid/logo_white.svg',
+    favicon: 'https://static.iglooinsure.com/icons/favicon.ico',
+    assetBaseUrl: '/assets/tenants/b2cid',
+};
 /**
  * Theme Registry
  * Map of tenant IDs to their theme configurations
@@ -600,6 +1954,7 @@ const ammetlifeTheme = {
 const tenantThemes = {
     igloo: iglooTheme,
     ammetlife: ammetlifeTheme,
+    b2cid: b2cidTheme,
 };
 /**
  * Get theme configuration by tenant ID
@@ -904,7 +2259,7 @@ function resolveReactComponent(component) {
  * - Header height: 80px
  * - Background: white (#ffffff)
  * - Content padding: 156px horizontal on 1440px viewport
- * - Logo dimensions: 126px × 16px
+ * - Logo dimensions: 126px × 16px (default)
  * - Gap between menu items: 32px
  * - Menu text: MetLife Circular Bold, 18px, #13131B, line-height 24px
  * - CTA Button: Filled, #0090da, border-radius 24px, height 48px
@@ -977,13 +2332,16 @@ const LogoContainer$2 = styled(Box)({
 });
 /**
  * Logo image
- * Width: 126px, height: 16px (per Figma node 1328:28463)
+ * Width: 126px, height: 16px by default.
+ * Height can be overridden with `$logoHeight` for tenant-specific needs.
  */
-const LogoImage$1 = styled('img')({
+const LogoImage$1 = styled('img', {
+    shouldForwardProp: (prop) => prop !== '$logoHeight',
+})(({ $logoHeight }) => ({
     width: '126px',
-    height: '16px',
+    height: $logoHeight || '16px',
     objectFit: 'contain',
-});
+}));
 /**
  * Navigation menu container
  * No additional gap - items are spaced by LeftSection's gap
@@ -1236,7 +2594,7 @@ const MENU_HOVER_ICONS = {
  * @param onLogoClick - Handler for logo click
  * @param formatMessage - i18n function for translations
  */
-function DesktopHeaderMenuBar({ logo, logoAlt = 'Logo', menuItems, 
+function DesktopHeaderMenuBar({ logo, logoAlt = 'Logo', logoHeight, menuItems, 
 // Legacy props (deprecated)
 showLoginButton, loginButtonText, onLoginClick, 
 // New CTA props
@@ -1332,7 +2690,7 @@ languages = [], currentLocale, onLanguageChange, }) {
         }
         return `AMP ${normalizedCode}`;
     };
-    return (jsx(StyledAppBar$2, { className: className, children: jsxs(HeaderContainer$1, { children: [jsx(LeftSection, { children: jsx(LogoContainer$2, { onClick: handleLogoClick, children: logo ? jsx(LogoImage$1, { src: logo, alt: logoAlt }) : null }) }), jsxs(RightSection, { children: [menuItems.map((item) => (jsxs(React.Fragment, { children: [jsxs(MenuItemContainer, { onMouseEnter: () => setHoveredMenuKey(item.key), onMouseLeave: () => setHoveredMenuKey(null), children: [jsx(MenuItemButton, { 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: jsxs(MenuItemContent, { isHovered: hoveredMenuKey === item.key, children: [hoveredMenuKey === item.key &&
+    return (jsx(StyledAppBar$2, { className: className, children: jsxs(HeaderContainer$1, { children: [jsx(LeftSection, { children: jsx(LogoContainer$2, { onClick: handleLogoClick, children: logo ? jsx(LogoImage$1, { src: logo, alt: logoAlt, "$logoHeight": logoHeight }) : null }) }), jsxs(RightSection, { children: [menuItems.map((item) => (jsxs(React.Fragment, { children: [jsxs(MenuItemContainer, { onMouseEnter: () => setHoveredMenuKey(item.key), onMouseLeave: () => setHoveredMenuKey(null), children: [jsx(MenuItemButton, { 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: jsxs(MenuItemContent, { isHovered: hoveredMenuKey === item.key, children: [hoveredMenuKey === item.key &&
                                                         (Boolean(item.scrollTargetProductCode) ||
                                                             item.key in MENU_HOVER_ICONS) && (jsx(MenuItemTopIcon, { children: jsx(MenuItemIcon, { src: MENU_HOVER_ICONS[item.key] ?? '/assets/tenants/ammetlife/shield_icon.png', alt: "" }) })), jsx(MenuItemText, { children: formatMessage({ id: item.label }) }), item.hasDropdown && jsx(DropdownIcon, {})] }) }), hoveredMenuKey === item.key &&
                                             Boolean(item.scrollTargetProductCode) && (jsx(MenuItemTooltip, { "data-testid": `menu-tooltip-${item.key}`, children: jsx(MenuItemTooltipText, { children: getHoverTooltipLabel(item.scrollTargetProductCode) }) }))] }), item.hasDropdown && item.subItems && (jsx(StyledMenu$1, { id: `menu-${item.key}`, anchorEl: anchorEl, open: openMenuKey === item.key, onClose: handleCloseMenu, anchorOrigin: {
@@ -1361,7 +2719,9 @@ languages = [], currentLocale, onLanguageChange, }) {
 
 const ResolvedCloseIcon$1 = resolveSvgIcon(CloseIcon);
 const ResolvedMenuIcon = resolveSvgIcon(MenuIcon);
-const StyledAppBar$1 = styled(AppBar)(({ theme, ispartnershippagemobileview, scrolled }) => ({
+const StyledAppBar$1 = styled(AppBar, {
+    shouldForwardProp: (prop) => prop !== 'ispartnershippagemobileview' && prop !== 'scrolled',
+})(({ theme, ispartnershippagemobileview, scrolled }) => ({
     zIndex: '1000 !important',
     backgroundColor: ispartnershippagemobileview && !scrolled
         ? 'transparent !important'
@@ -1384,7 +2744,9 @@ const ResponsiveB2CLayout = styled('div')(({ theme }) => ({
         margin: '0 auto',
     },
 }));
-const StyledContainer = styled(Container)(({ theme, scrolled }) => ({
+const StyledContainer = styled(Container, {
+    shouldForwardProp: (prop) => prop !== 'ispartnershippagemobileview' && prop !== 'scrolled',
+})(({ theme, scrolled }) => ({
     boxShadow: 'none',
     [theme?.breakpoints?.down('md')]: {
         boxShadow: !scrolled ? 'none' : '0px 2px 20px 4px rgba(0, 0, 0, 0.14)',
@@ -1395,11 +2757,11 @@ const TypographyLogo = styled(Typography)(({ theme }) => ({
     display: '-webkit-box',
     alignItems: 'anchor-center',
     [theme?.breakpoints?.up('md')]: {
-        width: 95,
+        width: 'auto',
         height: 57,
     },
     [theme?.breakpoints?.down('md')]: {
-        width: 73.3,
+        width: 'auto',
         display: 'flex',
     },
 }));
@@ -1526,12 +2888,14 @@ const StyledAvatarUserIcon = styled(Avatar)(({ theme }) => ({
         margin: '0',
     },
 }));
-const StyledMenuIcon = styled(ResolvedMenuIcon)(({ theme, ispartnershippagemobileview, scrolled }) => ({
+const StyledMenuIcon = styled(ResolvedMenuIcon, {
+    shouldForwardProp: (prop) => prop !== 'ispartnershippagemobileview' && prop !== 'scrolled',
+})(({ theme, ispartnershippagemobileview, scrolled }) => ({
     color: ispartnershippagemobileview && !scrolled
         ? theme.palette.common?.white || '#fff'
         : `${theme.palette.text?.primary || '#000'}`,
 }));
-const StyledDrawer$3 = styled(Drawer)(({ theme }) => ({
+const StyledDrawer$4 = styled(Drawer)(({ theme }) => ({
     '& .MuiMenu-paper': {
         left: 'auto',
         width: 'fit-content',
@@ -1670,7 +3034,7 @@ const ResolvedDesktopHeaderMenuBar = resolveReactComponent(DesktopHeaderMenuBar)
  * />
  * ```
  */
-function Header$1({ logo, navigationLinks, languages, currentLocale, userToken, userFirstName, isMobile: propIsMobile, scrolled = false, isPartnershipPageMobileView = false, isPartnershipPagePCView = false, isSeoPageView = false, bannerData, host = '', welcomeMessage, formatMessage = (descriptor) => descriptor.id, menuItems, userProfileComponent, onLogoClick, onProductMenuClick, onLanguageChange, onLoginClick, onSignupClick, onLogoutClick, onPartnershipClick, onAboutUsClick, onBlogClick, onMyProfileClick, onGetQuoteClick, onPartnershipCTAClick, useNewDesktopLayout = false, desktopMenuItems = [], showCtaButton = true, ctaButtonText = 'Purchase Now', onCtaClick, ctaScrollTargetId, onScrollToSection, }) {
+function Header$1({ logo, logoHeight, navigationLinks, languages, currentLocale, userToken, userFirstName, isMobile: propIsMobile, scrolled = false, isPartnershipPageMobileView = false, isPartnershipPagePCView = false, isSeoPageView = false, bannerData, host = '', welcomeMessage, formatMessage = (descriptor) => descriptor.id, menuItems, userProfileComponent, onLogoClick, onProductMenuClick, onLanguageChange, onLoginClick, onSignupClick, onLogoutClick, onPartnershipClick, onAboutUsClick, onBlogClick, onMyProfileClick, onGetQuoteClick, onPartnershipCTAClick, useNewDesktopLayout = false, desktopMenuItems = [], desktopMenuTextVariant = 'h6', desktopAuthTextVariant = 'body1', showCtaButton = true, ctaButtonText = 'Purchase Now', onCtaClick, ctaScrollTargetId, onScrollToSection, }) {
     useTenantTheme();
     const muiTheme = useTheme();
     const themeBreakpoint = useMediaQuery(muiTheme?.breakpoints?.down('md'));
@@ -1717,7 +3081,7 @@ function Header$1({ logo, navigationLinks, languages, currentLocale, userToken,
     // Render new desktop layout whenever enabled in non-mobile mode.
     // This avoids falling back to the legacy desktop path during SSR.
     if (useNewDesktopLayout && !isMobile) {
-        return (jsx(ResolvedDesktopHeaderMenuBar, { logo: logo, logoAlt: "Logo", menuItems: convertedDesktopMenuItems, showCtaButton: showCtaButton, ctaButtonText: ctaButtonText, onCtaClick: onCtaClick, ctaScrollTargetId: ctaScrollTargetId, onScrollToSection: onScrollToSection, onLogoClick: onLogoClick, formatMessage: formatMessage, languages: languages, currentLocale: currentLocale, onLanguageChange: onLanguageChange }));
+        return (jsx(ResolvedDesktopHeaderMenuBar, { logo: logo, logoHeight: logoHeight, logoAlt: "Logo", menuItems: convertedDesktopMenuItems, showCtaButton: showCtaButton, ctaButtonText: ctaButtonText, onCtaClick: onCtaClick, ctaScrollTargetId: ctaScrollTargetId, onScrollToSection: onScrollToSection, onLogoClick: onLogoClick, formatMessage: formatMessage, languages: languages, currentLocale: currentLocale, onLanguageChange: onLanguageChange }));
     }
     return (jsx(StyledAppBar$1, { ispartnershippagemobileview: isPartnershipPageMobileView, scrolled: scrolled, children: jsx(ResponsiveB2CLayout, { children: jsx(StyledContainer, { ispartnershippagemobileview: isPartnershipPageMobileView, scrolled: scrolled, maxWidth: "xl", children: jsxs(Toolbar, { disableGutters: true, children: [jsx("button", { onClick: (e) => {
                                 e?.preventDefault();
@@ -1744,13 +3108,14 @@ function Header$1({ logo, navigationLinks, languages, currentLocale, userToken,
                                     letterSpacing: '.3rem',
                                     color: 'inherit',
                                     textDecoration: 'none',
-                                }, children: logo ? (jsx("img", { src: logo, alt: "Logo", height: 'auto', width: '126px', style: {
-                                        height: 'auto',
-                                        width: '126px',
+                                }, children: logo ? (jsx("img", { src: logo, alt: "Logo", style: {
+                                        height: '100%',
+                                        width: 'auto',
+                                        objectFit: 'contain',
                                     } })) : null }) }), !isMobile && (jsxs(Fragment, { children: [shouldShowContent && (jsxs(Box, { sx: {
                                         flexGrow: 1,
                                         display: { xs: 'none', md: 'flex', gap: 40 },
-                                    }, children: [jsxs(ButtonDesktopMenu, { onClick: handleOpenNavMenu, sx: { my: 2, textTransform: 'capitalize' }, "data-testid": "productNavigationMenu", children: [jsx(Typography, { variant: "h6", children: formatMessage({ id: 'Products' }) }), jsx(ResolvedArrowDropDownIcon, {})] }, "product"), menuItems?.partnership && (jsx(ButtonDesktopMenu, { onClick: onPartnershipClick, sx: { my: 2, textTransform: 'capitalize' }, children: jsx(Typography, { variant: "h6", children: jsx(AnchorLink$1, { href: `${host}${menuItems.partnership.route}`, onClick: (e) => e?.preventDefault(), children: menuItems.partnership.label }) }) }, "partnership")), menuItems?.aboutUs && (jsx(ButtonDesktopMenu, { onClick: onAboutUsClick, sx: { my: 2, textTransform: 'capitalize' }, children: jsx(Typography, { variant: "h6", children: jsx(AnchorLinks, { href: `${host}${menuItems.aboutUs.route}`, onClick: (e) => e?.preventDefault(), children: menuItems.aboutUs.label }) }) }, "aboutus")), menuItems?.blog && (jsx(ButtonDesktopMenu, { onClick: onBlogClick, sx: { my: 2, textTransform: 'capitalize' }, children: jsx(Typography, { variant: "h6", children: jsx(AnchorLink$1, { href: menuItems.blog.url, onClick: (e) => e?.preventDefault(), children: menuItems.blog.label }) }) }, "blog"))] })), jsxs(Box, { sx: {
+                                    }, children: [jsxs(ButtonDesktopMenu, { onClick: handleOpenNavMenu, sx: { my: 2, textTransform: 'capitalize' }, "data-testid": "productNavigationMenu", children: [jsx(Typography, { variant: desktopMenuTextVariant, children: formatMessage({ id: 'Products' }) }), jsx(ResolvedArrowDropDownIcon, {})] }, "product"), menuItems?.partnership && (jsx(ButtonDesktopMenu, { onClick: onPartnershipClick, sx: { my: 2, textTransform: 'capitalize' }, children: jsx(Typography, { variant: desktopMenuTextVariant, children: jsx(AnchorLink$1, { href: `${host}${menuItems.partnership.route}`, onClick: (e) => e?.preventDefault(), children: menuItems.partnership.label }) }) }, "partnership")), menuItems?.aboutUs && (jsx(ButtonDesktopMenu, { onClick: onAboutUsClick, sx: { my: 2, textTransform: 'capitalize' }, children: jsx(Typography, { variant: desktopMenuTextVariant, children: jsx(AnchorLinks, { href: `${host}${menuItems.aboutUs.route}`, onClick: (e) => e?.preventDefault(), children: menuItems.aboutUs.label }) }) }, "aboutus")), menuItems?.blog && (jsx(ButtonDesktopMenu, { onClick: onBlogClick, sx: { my: 2, textTransform: 'capitalize' }, children: jsx(Typography, { variant: desktopMenuTextVariant, children: jsx(AnchorLink$1, { href: menuItems.blog.url, onClick: (e) => e?.preventDefault(), children: menuItems.blog.label }) }) }, "blog"))] })), jsxs(Box, { sx: {
                                         flexGrow: 1,
                                         display: {
                                             xs: 'none',
@@ -1758,12 +3123,12 @@ function Header$1({ logo, navigationLinks, languages, currentLocale, userToken,
                                             gap: 40,
                                             justifyContent: 'flex-end',
                                         },
-                                    }, children: [shouldShowContent && (jsxs(ButtonDesktopMenu, { onClick: handleOpenLanguageMenu, sx: { my: 2, textTransform: 'capitalize' }, "data-testid": "selectedLocale", children: [jsx(Typography, { variant: "h6", children: formatMessage({
+                                    }, children: [shouldShowContent && (jsxs(ButtonDesktopMenu, { onClick: handleOpenLanguageMenu, sx: { my: 2, textTransform: 'capitalize' }, "data-testid": "selectedLocale", children: [jsx(Typography, { variant: desktopMenuTextVariant, children: formatMessage({
                                                         id: `${currentLocale?.toLocaleUpperCase()}`,
                                                     }) }), jsx(ResolvedArrowDropDownIcon, {})] }, "language")), isPartnershipPagePCView && scrolled ? (jsx(StyledButton$1, { variant: "contained", onClick: onPartnershipCTAClick, children: jsx(TypographyBtnText, { variant: "body1", children: formatMessage({ id: 'Be Our Partner' }) }) })) : isSeoPageView && scrolled && bannerData ? (jsx(StyledButtonBanner, { style: { background: bannerData?.ctaBGColor }, variant: "contained", onClick: onGetQuoteClick, children: jsx(Typography, { style: {
                                                     color: bannerData?.ctaTextColor,
                                                     textTransform: 'none',
-                                                }, variant: "body1", children: bannerData?.ctaText }) })) : userToken ? (jsx(StyledAvatar, { onClick: handleOpenUserMenu, "data-testid": "user-profile-avatar", children: firstName1stLetter })) : (jsxs(DivButtonWrapper, { children: [jsx(ButtonAuth, { color: "primary", variant: "outlined", sx: { textTransform: 'capitalize' }, onClick: onLoginClick, "data-testid": "headerLogin", children: jsx(TypographyAuth, { variant: "body1", children: formatMessage({ id: 'Log in' }) }) }), jsx(ButtonAuth, { color: "primary", variant: "contained", sx: { textTransform: 'capitalize' }, onClick: onSignupClick, children: jsx(TypographyAuth, { variant: "body1", children: formatMessage({ id: 'Sign up' }) }) })] }))] }), jsx(StyledMenu, { id: "menu-appbar", anchorEl: anchorElNav, anchorOrigin: {
+                                                }, variant: "body1", children: bannerData?.ctaText }) })) : userToken ? (jsx(StyledAvatar, { onClick: handleOpenUserMenu, "data-testid": "user-profile-avatar", children: firstName1stLetter })) : (jsxs(DivButtonWrapper, { children: [jsx(ButtonAuth, { color: "primary", variant: "outlined", sx: { textTransform: 'capitalize' }, onClick: onLoginClick, "data-testid": "headerLogin", children: jsx(TypographyAuth, { variant: desktopAuthTextVariant, children: formatMessage({ id: 'Log in' }) }) }), jsx(ButtonAuth, { color: "primary", variant: "contained", sx: { textTransform: 'capitalize' }, onClick: onSignupClick, children: jsx(TypographyAuth, { variant: desktopAuthTextVariant, children: formatMessage({ id: 'Sign up' }) }) })] }))] }), jsx(StyledMenu, { id: "menu-appbar", anchorEl: anchorElNav, anchorOrigin: {
                                         vertical: 'bottom',
                                         horizontal: 'left',
                                     }, keepMounted: true, transformOrigin: {
@@ -1782,10 +3147,10 @@ function Header$1({ logo, navigationLinks, languages, currentLocale, userToken,
                                         horizontal: 'left',
                                     }, open: Boolean(anchorElLanguage), onClose: handleCloseLanguageMenu, sx: {
                                         display: { xs: 'none', md: 'block' },
-                                    }, children: jsx(DivProductListing, { children: languages.map(({ value, locale, label }) => (jsx(StyledMenuItem, { onClick: () => {
+                                    }, children: jsx(DivProductListing, { children: languages.map(({ value, locale, label, desktopLabel }) => (jsx(StyledMenuItem, { onClick: () => {
                                                 onLanguageChange?.(locale, value);
                                                 handleCloseLanguageMenu();
-                                            }, "data-testid": `lang-${locale}`, children: jsx(Typography, { variant: "body1", textAlign: "center", children: label }) }, value))) }) }), jsx(StyledMenu, { id: "user-menu", anchorEl: anchorElUserMenu, anchorOrigin: {
+                                            }, "data-testid": `lang-${locale}`, children: jsx(Typography, { variant: "body1", textAlign: "center", children: desktopLabel || label }) }, value))) }) }), jsx(StyledMenu, { id: "user-menu", anchorEl: anchorElUserMenu, anchorOrigin: {
                                         vertical: 'bottom',
                                         horizontal: 'left',
                                     }, keepMounted: true, transformOrigin: {
@@ -1817,7 +3182,7 @@ function Header$1({ logo, navigationLinks, languages, currentLocale, userToken,
                                         }, variant: "contained", onClick: onGetQuoteClick, children: jsx(Typography, { style: {
                                                 color: bannerData?.ctaTextColor,
                                                 textTransform: 'none',
-                                            }, variant: "body1", children: bannerData?.ctaText }) })) : userToken ? (jsx(StyledAvatarUserIcon, { "data-testid": "user-profile-avatar", children: firstName1stLetter })) : (jsx(StyledMenuIcon, { ispartnershippagemobileview: isPartnershipPageMobileView, scrolled: scrolled })) }), jsxs(StyledDrawer$3, { id: "menu-appbar", anchor: "top", keepMounted: true, open: Boolean(anchorElNav), onClose: handleCloseNavMenu, sx: {
+                                            }, variant: "body1", children: bannerData?.ctaText }) })) : userToken ? (jsx(StyledAvatarUserIcon, { "data-testid": "user-profile-avatar", children: firstName1stLetter })) : (jsx(StyledMenuIcon, { ispartnershippagemobileview: isPartnershipPageMobileView, scrolled: scrolled })) }), jsxs(StyledDrawer$4, { id: "menu-appbar", anchor: "top", keepMounted: true, open: Boolean(anchorElNav), onClose: handleCloseNavMenu, sx: {
                                         display: { xs: 'block', md: 'none' },
                                         width: '100%',
                                         left: 0,
@@ -1886,13 +3251,13 @@ const MenuIconButton = styled(IconButton)(() => ({
         fontSize: '24px',
     },
 }));
-const StyledDrawer$2 = styled(Drawer)(() => ({
+const StyledDrawer$3 = styled(Drawer)(() => ({
     '& .MuiDrawer-paper': {
         backgroundColor: '#FFFFFF',
         boxSizing: 'border-box',
     },
 }));
-const DrawerHeader$2 = styled(Box)(() => ({
+const DrawerHeader$3 = styled(Box)(() => ({
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'space-between',
@@ -1912,7 +3277,7 @@ const CloseIconButton = styled(IconButton)(() => ({
         fontSize: '24px',
     },
 }));
-const DrawerContent$2 = styled(Box)(({ theme }) => ({
+const DrawerContent$3 = styled(Box)(({ theme }) => ({
     flex: 1,
     overflowY: 'auto',
     paddingBottom: theme.spacing(2),
@@ -1960,7 +3325,7 @@ function NewHeader({ logo: propLogo, logoAltText = 'Logo', navigationLinks = [],
         item.onClick?.();
         handleDrawerClose();
     };
-    return (jsxs(Fragment, { children: [jsx(StyledAppBar, { position: "fixed", children: jsxs(StyledToolbar, { disableGutters: true, children: [jsx(LogoContainer$1, { onClick: handleLogoClick, children: jsx(LogoImage, { src: logo, alt: logoAltText }) }), jsx(MenuIconButton, { size: "large", edge: "end", "aria-label": "menu", onClick: handleDrawerOpen, children: jsx(MenuIcon, {}) })] }) }), jsx(StyledDrawer$2, { anchor: "right", open: drawerOpen, onClose: handleDrawerClose, children: customDrawerContent ? (jsx(Box, { sx: { width: isMobile ? '100vw' : 350 }, children: customDrawerContent })) : (jsxs(Box, { sx: { width: isMobile ? '100vw' : 350 }, children: [jsxs(DrawerHeader$2, { children: [jsx(DrawerLogoContainer, { onClick: handleLogoClick, children: jsx(LogoImage, { src: logo, alt: logoAltText }) }), jsx(CloseIconButton, { 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, { disablePadding: true, children: jsx(ListItemButton, { onClick: () => handleMenuItemClick(item), children: jsx(ListItemText, { primary: formatMessage({ id: item.label }) }) }) }, item.key))) })) })] })) })] }));
+    return (jsxs(Fragment, { children: [jsx(StyledAppBar, { position: "fixed", children: jsxs(StyledToolbar, { disableGutters: true, children: [jsx(LogoContainer$1, { onClick: handleLogoClick, children: jsx(LogoImage, { src: logo, alt: logoAltText }) }), jsx(MenuIconButton, { size: "large", edge: "end", "aria-label": "menu", onClick: handleDrawerOpen, children: jsx(MenuIcon, {}) })] }) }), jsx(StyledDrawer$3, { anchor: "right", open: drawerOpen, onClose: handleDrawerClose, children: customDrawerContent ? (jsx(Box, { sx: { width: isMobile ? '100vw' : 350 }, children: customDrawerContent })) : (jsxs(Box, { sx: { width: isMobile ? '100vw' : 350 }, children: [jsxs(DrawerHeader$3, { children: [jsx(DrawerLogoContainer, { onClick: handleLogoClick, children: jsx(LogoImage, { src: logo, alt: logoAltText }) }), jsx(CloseIconButton, { onClick: handleDrawerClose, "aria-label": "close", children: jsx(CloseIcon, {}) })] }), jsx(Divider, {}), jsx(DrawerContent$3, { children: navigationLinks.length > 0 && (jsx(List, { children: navigationLinks.map((item) => (jsx(ListItem, { disablePadding: true, children: jsx(ListItemButton, { onClick: () => handleMenuItemClick(item), children: jsx(ListItemText, { primary: formatMessage({ id: item.label }) }) }) }, item.key))) })) })] })) })] }));
 }
 
 /**
@@ -2260,7 +3625,7 @@ function Footer({ simplifiedLayout = false, introText, addressText, socialLinks,
                                     }), index === navigationLinks.length - 1 && (jsxs(Fragment, { children: [jsx(ButtonBottomLink, { onClick: onPrivacyPolicyClick, children: jsx(Typography, { variant: "body1", children: jsx(AnchorLink, { href: `${host}/${currentLocale}/terms/privacypolicy`, onClick: (e) => e?.preventDefault(), children: formatMessage({ id: 'Privacy Policy' }) }) }) }), jsx(ButtonBottomLink, { onClick: onTermsOfServiceClick, children: jsx(Typography, { variant: "body1", children: jsx(AnchorLink, { href: `${host}/${currentLocale}/terms/termsofservice`, onClick: (e) => e?.preventDefault(), children: formatMessage({ id: 'Terms of Service' }) }) }) }), jsx(DivSocial, { children: socialLinks.map((social) => (jsx(ButtonIcon, { onClick: () => onSocialClick?.(social.platform, social.url), "aria-label": social.ariaLabel || social.platform, children: jsx(AnchorLink, { href: sanitizeUrl(social.url, '#'), onClick: (e) => e?.preventDefault(), children: jsx("img", { src: social.icon, alt: social.platform, height: isMobile ? '24' : '28', width: isMobile ? '24' : '28', loading: "lazy" }) }) }, social.platform))) })] }))] }, index))) }))] }), isMobile && jsx(StyledDivider, {}), isMobile && (jsx(DivBottom, { children: jsxs(DivLinks, { children: [jsx("div", { onClick: onPrivacyPolicyClick, style: { cursor: 'pointer' }, children: jsx(Typography, { variant: "body2", children: jsx(AnchorLink, { href: `${host}/${currentLocale}/terms/privacypolicy`, onClick: (e) => e?.preventDefault(), children: formatMessage({ id: 'Privacy Policy' }) }) }) }), jsx(DivSep, {}), jsx("div", { onClick: onTermsOfServiceClick, style: { cursor: 'pointer' }, children: jsx(Typography, { variant: "body2", children: jsx(AnchorLink, { href: `${host}/${currentLocale}/terms/termsofservice`, onClick: (e) => e?.preventDefault(), children: formatMessage({ id: 'Terms of Service' }) }) }) })] }) }))] }) }));
 }
 
-const StyledDrawer$1 = styled(Drawer)(({ theme }) => ({
+const StyledDrawer$2 = styled(Drawer)(({ theme }) => ({
     zIndex: '1300 !important',
     '& .MuiDrawer-root': {
         zIndex: 1300,
@@ -2280,7 +3645,7 @@ const StyledDrawer$1 = styled(Drawer)(({ theme }) => ({
         zIndex: 1299,
     },
 }));
-const DrawerHeader$1 = styled(Box)(({ theme }) => ({
+const DrawerHeader$2 = styled(Box)(({ theme }) => ({
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'flex-start',
@@ -2291,7 +3656,7 @@ const DrawerHeader$1 = styled(Box)(({ theme }) => ({
         minHeight: '56px',
     },
 }));
-const DrawerContent$1 = styled(Box)(() => ({
+const DrawerContent$2 = styled(Box)(() => ({
     flex: 1,
     overflowY: 'auto',
     padding: '16px 0',
@@ -2422,7 +3787,7 @@ function RecommendationsDrawer({ open, onClose, children, headerIcon, title, sub
             onClose();
         }
     };
-    return (jsx(StyledDrawer$1, { anchor: "bottom", open: open, onClose: handleClose, PaperProps: {
+    return (jsx(StyledDrawer$2, { anchor: "bottom", open: open, onClose: handleClose, PaperProps: {
             sx: {
                 height: '95vh',
                 borderTopLeftRadius: '16px',
@@ -2431,7 +3796,7 @@ function RecommendationsDrawer({ open, onClose, children, headerIcon, title, sub
             },
         }, sx: {
             zIndex: 1300,
-        }, children: jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', height: '100%' }, children: [jsx(DrawerHeader$1, { children: jsx(BackArrowButton, { onClick: handleBackOrClose, "aria-label": showBackButton ? 'back' : 'close', children: showBackButton ? jsx(ArrowBackIcon, {}) : jsx(CloseIcon, {}) }) }), (title || subtitle || headerIcon) && (jsxs(HeaderSection, { children: [headerIcon && (jsx(CategoryIcon, { children: jsx("img", { src: headerIcon, alt: "Category icon", width: 32, height: 32 }) })), title && (jsx(TitleText, { variant: "h5", children: formatMessage({ id: title }) })), subtitle && (jsx(SubtitleText, { variant: "body2", children: formatMessage({ id: subtitle }) }))] })), jsx(DrawerContent$1, { children: children }), showFooter && (jsx(DrawerFooter, { children: customFooter ? (customFooter) : (jsxs(FooterButtons, { children: [primaryButtonText && (jsx(PrimaryButton, { variant: "contained", fullWidth: true, onClick: onPrimaryAction, disabled: primaryButtonDisabled, sx: {
+        }, children: jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', height: '100%' }, children: [jsx(DrawerHeader$2, { children: jsx(BackArrowButton, { onClick: handleBackOrClose, "aria-label": showBackButton ? 'back' : 'close', children: showBackButton ? jsx(ArrowBackIcon, {}) : jsx(CloseIcon, {}) }) }), (title || subtitle || headerIcon) && (jsxs(HeaderSection, { children: [headerIcon && (jsx(CategoryIcon, { children: jsx("img", { src: headerIcon, alt: "Category icon", width: 32, height: 32 }) })), title && (jsx(TitleText, { variant: "h5", children: formatMessage({ id: title }) })), subtitle && (jsx(SubtitleText, { variant: "body2", children: formatMessage({ id: subtitle }) }))] })), jsx(DrawerContent$2, { children: children }), showFooter && (jsx(DrawerFooter, { children: customFooter ? (customFooter) : (jsxs(FooterButtons, { children: [primaryButtonText && (jsx(PrimaryButton, { variant: "contained", fullWidth: true, onClick: onPrimaryAction, disabled: primaryButtonDisabled, sx: {
                                     backgroundColor: primaryColor,
                                     '&:hover': {
                                         backgroundColor: primaryColor,
@@ -2444,7 +3809,7 @@ function RecommendationsDrawer({ open, onClose, children, headerIcon, title, sub
                                 }, children: formatMessage({ id: secondaryButtonText }) }))] })) }))] }) }));
 }
 
-const StyledDrawer = styled$1(Drawer)(() => ({
+const StyledDrawer$1 = styled$1(Drawer)(() => ({
     zIndex: 1300,
     '& .MuiDrawer-paper': {
         borderTopLeftRadius: '8px',
@@ -2547,13 +3912,13 @@ styled$1(Typography)(() => ({
     textAlign: 'center',
     wordSpacing: '0px',
 }));
-const DrawerContent = styled$1(Box)({
+const DrawerContent$1 = styled$1(Box)({
     display: 'flex',
     flexDirection: 'column',
     width: '100%',
     backgroundColor: '#ffffff',
 });
-const DrawerHeader = styled$1(Box)({
+const DrawerHeader$1 = styled$1(Box)({
     display: 'flex',
     justifyContent: 'flex-end',
     alignItems: 'center',
@@ -2785,7 +4150,7 @@ function ProductSelectionDrawer({ open, onClose, products, onProductSelect, titl
                                     }, children: [product.cardImage ? (jsx(ProductCardImage, { src: product.cardImage, alt: product.name, className: "product-card-image-layer" })) : (jsx(ProductCardPlaceholder, { className: "product-card-placeholder-layer" })), jsxs(ProductCardBottomBar, { className: "product-card-bottom-bar", children: [jsx(ProductIcon, { className: "product-card-icon", children: jsx("img", { src: product.icon ?? product.logo, alt: "" }) }), jsx(ProductName$1, { className: "product-card-name", children: product.name })] })] })] }, product.id))) }) })] }));
     }
     // Mobile Drawer variant (default)
-    return (jsx(StyledDrawer, { anchor: "bottom", open: open, onClose: onClose, children: jsxs(DrawerContent, { children: [jsx(DrawerHeader, { children: jsx(CloseButtonContainer, { children: jsx(IconButton, { 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, { productCount: products.length, children: products.map((product) => (jsxs(ProductCardWrapper, { children: [jsx(ProductCategoryLabel, { children: product.subtitle ?? product.type }), jsxs(ProductCard$1, { onClick: () => onProductSelect(product.id), role: "button", tabIndex: 0, onKeyDown: (e) => {
+    return (jsx(StyledDrawer$1, { anchor: "bottom", open: open, onClose: onClose, children: jsxs(DrawerContent$1, { children: [jsx(DrawerHeader$1, { children: jsx(CloseButtonContainer, { children: jsx(IconButton, { 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, { productCount: products.length, children: products.map((product) => (jsxs(ProductCardWrapper, { children: [jsx(ProductCategoryLabel, { children: product.subtitle ?? product.type }), jsxs(ProductCard$1, { onClick: () => onProductSelect(product.id), role: "button", tabIndex: 0, onKeyDown: (e) => {
                                         if (e.key === 'Enter' || e.key === ' ') {
                                             e.preventDefault();
                                             onProductSelect(product.id);
@@ -4737,6 +6102,243 @@ function isStaticImageData(image) {
         typeof image.src === 'string');
 }
 
+const CardContainer = styled$1(Box)(({ theme }) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    padding: '32px 24px',
+    borderRadius: '16px',
+    border: '1px solid',
+    borderColor: theme.palette.divider,
+    cursor: 'pointer',
+    transition: 'all 0.2s ease',
+    backgroundColor: '#fff',
+    '&:hover': {
+        borderColor: theme.palette.primary.main,
+        boxShadow: '0 4px 20px rgba(0, 0, 0, 0.08)',
+        transform: 'translateY(-2px)',
+    },
+}));
+const CardIcon = styled$1('img')({
+    width: 80,
+    height: 80,
+    marginBottom: 16,
+    objectFit: 'contain',
+});
+const CardTitle = styled$1(Typography)({
+    fontWeight: 600,
+    textAlign: 'center',
+    marginBottom: 4,
+});
+const CardDescription = styled$1(Typography)(({ theme }) => ({
+    textAlign: 'center',
+    color: theme.palette.text.secondary,
+}));
+const InsurerLogos = styled$1(Box)({
+    display: 'flex',
+    gap: 8,
+    marginTop: 16,
+    alignItems: 'center',
+});
+const InsurerLogo = styled$1('img')({
+    height: 24,
+    objectFit: 'contain',
+});
+
+function TravelCategoryCard({ categoryKey, icon, title, description, insurerLogos, onClick, testId, }) {
+    return (jsxs(CardContainer, { onClick: () => onClick?.(categoryKey), "data-testid": testId ?? `travel-category-${categoryKey.toLowerCase()}`, children: [jsx(CardIcon, { src: icon, alt: title }), jsx(CardTitle, { variant: "h6", children: title }), jsx(CardDescription, { variant: "body2", children: description }), insurerLogos && insurerLogos.length > 0 && (jsx(InsurerLogos, { children: insurerLogos.map((logo, index) => (jsx(InsurerLogo, { src: logo, alt: `insurer-${index}` }, index))) }))] }));
+}
+
+const StyledDrawer = styled$1(Drawer)(({ theme }) => ({
+    '& .MuiDrawer-paper': {
+        width: '100%',
+        maxWidth: '480px',
+        borderTopLeftRadius: 16,
+        borderTopRightRadius: 16,
+        maxHeight: '90vh',
+        [theme.breakpoints.up('md')]: {
+            borderTopLeftRadius: 0,
+            borderTopRightRadius: 0,
+            maxHeight: '100vh',
+        },
+    },
+}));
+const DrawerHeader = styled$1(Box)(({ theme }) => ({
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    padding: '16px 20px',
+    borderBottom: `1px solid ${theme.palette.divider}`,
+}));
+const DrawerTitle = styled$1(Typography)({
+    fontWeight: 600,
+    fontSize: '18px',
+});
+const DrawerContent = styled$1(Box)({
+    padding: '20px',
+    overflowY: 'auto',
+    flex: 1,
+});
+const FormSection = styled$1(Box)({
+    marginBottom: 24,
+});
+const FormLabel = styled$1(Typography)(({ theme }) => ({
+    fontWeight: 500,
+    marginBottom: 8,
+    color: theme.palette.text.primary,
+}));
+const GroupSizeGrid = styled$1(Box)({
+    display: 'grid',
+    gridTemplateColumns: 'repeat(2, 1fr)',
+    gap: 8,
+});
+const GroupSizeOption = styled$1(Box, {
+    shouldForwardProp: (prop) => prop !== 'selected',
+})(({ theme, selected }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: '10px 16px',
+    borderRadius: 8,
+    border: `1.5px solid ${selected ? theme.palette.primary.main : theme.palette.divider}`,
+    backgroundColor: selected ? `${theme.palette.primary.main}10` : '#fff',
+    cursor: 'pointer',
+    fontWeight: selected ? 600 : 400,
+    color: selected ? theme.palette.primary.main : theme.palette.text.primary,
+    transition: 'all 0.15s ease',
+    '&:hover': {
+        borderColor: theme.palette.primary.main,
+    },
+}));
+const CounterContainer = styled$1(Box)({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    padding: '8px 0',
+});
+const CounterLabel = styled$1(Typography)({
+    fontWeight: 500,
+});
+const CounterControls = styled$1(Box)({
+    display: 'flex',
+    alignItems: 'center',
+    gap: 12,
+});
+const CounterValue = styled$1(Typography)({
+    fontWeight: 600,
+    minWidth: 24,
+    textAlign: 'center',
+});
+const DatePickerRow = styled$1(Box)({
+    display: 'grid',
+    gridTemplateColumns: '1fr 1fr',
+    gap: 12,
+});
+const SubmitButton = styled$1(Button$1)({
+    width: '100%',
+    padding: '12px 24px',
+    borderRadius: 8,
+    fontWeight: 600,
+    fontSize: '16px',
+    textTransform: 'none',
+    marginTop: 16,
+});
+const DestinationChipsContainer = styled$1(Box)({
+    display: 'flex',
+    flexWrap: 'wrap',
+    gap: 6,
+    marginTop: 8,
+});
+
+const GROUP_SIZE_OPTIONS = [
+    { key: 'Individual', defaultLabel: 'Individual' },
+    { key: 'Dual', defaultLabel: 'Dual' },
+    { key: 'Couple', defaultLabel: 'Couple' },
+    { key: 'Family', defaultLabel: 'Family' },
+];
+const MAX_ADULTS = 10;
+const MAX_CHILDREN = 10;
+function TravelQuoteDrawer({ open, category, onClose, onSubmit, countryOptions = [], cityOptions = [], loading = false, labels = {}, }) {
+    const theme = useTheme();
+    const isMobile = useMediaQuery(theme.breakpoints.down('md'));
+    const [groupSize, setGroupSize] = useState('Individual');
+    const [startDate, setStartDate] = useState('');
+    const [endDate, setEndDate] = useState('');
+    const [adultCount, setAdultCount] = useState(1);
+    const [childCount, setChildCount] = useState(0);
+    const [selectedCountries, setSelectedCountries] = useState([]);
+    const [selectedCity, setSelectedCity] = useState('');
+    const isInternational = category === 'International';
+    const handleGroupSizeChange = useCallback((size) => {
+        setGroupSize(size);
+        switch (size) {
+            case 'Individual':
+                setAdultCount(1);
+                setChildCount(0);
+                break;
+            case 'Dual':
+            case 'Couple':
+                setAdultCount(2);
+                setChildCount(0);
+                break;
+            case 'Family':
+                setAdultCount(2);
+                setChildCount(1);
+                break;
+        }
+    }, []);
+    const isFamily = groupSize === 'Family';
+    const handleSubmit = useCallback(() => {
+        if (!category)
+            return;
+        const values = {
+            category,
+            groupSize,
+            travelStartDate: startDate,
+            travelEndDate: endDate,
+            adultCount,
+            childCount,
+            destinations: isInternational
+                ? selectedCountries.map((c) => c.value)
+                : selectedCity
+                    ? [selectedCity]
+                    : [],
+            ...(isInternational
+                ? { countries: selectedCountries }
+                : { cities: selectedCity }),
+        };
+        onSubmit(values);
+    }, [
+        category,
+        groupSize,
+        startDate,
+        endDate,
+        adultCount,
+        childCount,
+        selectedCountries,
+        selectedCity,
+        isInternational,
+        onSubmit,
+    ]);
+    const groupSizeLabelMap = useMemo(() => ({
+        Individual: labels.individual ?? 'Individual',
+        Dual: labels.dual ?? 'Dual',
+        Couple: labels.couple ?? 'Couple',
+        Family: labels.family ?? 'Family',
+    }), [labels]);
+    const drawerTitle = labels.title
+        ?? (isInternational
+            ? 'International Travel Insurance'
+            : 'Domestic Travel Insurance');
+    return (jsxs(StyledDrawer, { anchor: isMobile ? 'bottom' : 'right', open: open, onClose: onClose, children: [jsxs(DrawerHeader, { children: [jsx(DrawerTitle, { variant: "h6", children: drawerTitle }), jsx(IconButton, { onClick: onClose, size: "small", children: jsx(CloseIcon, {}) })] }), jsxs(DrawerContent, { children: [jsxs(FormSection, { children: [jsx(FormLabel, { variant: "body2", children: labels.groupSizeLabel ?? 'Group Size' }), jsx(GroupSizeGrid, { children: GROUP_SIZE_OPTIONS.map((option) => (jsx(GroupSizeOption, { selected: groupSize === option.key, onClick: () => handleGroupSizeChange(option.key), children: groupSizeLabelMap[option.key] }, option.key))) })] }), jsxs(FormSection, { children: [jsx(FormLabel, { variant: "body2", children: labels.travelDatesLabel ?? 'Travel Dates' }), jsxs(DatePickerRow, { children: [jsx(TextField, { type: "date", label: labels.startDateLabel ?? 'Start Date', value: startDate, onChange: (e) => setStartDate(e.target.value), InputLabelProps: { shrink: true }, inputProps: {
+                                            min: new Date().toISOString().split('T')[0],
+                                        }, size: "small", fullWidth: true }), jsx(TextField, { type: "date", label: labels.endDateLabel ?? 'End Date', value: endDate, onChange: (e) => setEndDate(e.target.value), InputLabelProps: { shrink: true }, inputProps: {
+                                            min: startDate ||
+                                                new Date().toISOString().split('T')[0],
+                                        }, size: "small", fullWidth: true })] })] }), jsxs(FormSection, { children: [jsx(FormLabel, { variant: "body2", children: labels.destinationLabel ?? 'Destination' }), isInternational ? (jsxs(Fragment, { children: [jsx(Autocomplete, { multiple: true, options: countryOptions, getOptionLabel: (option) => option.label, value: selectedCountries, onChange: (_, newValue) => setSelectedCountries(newValue), groupBy: (option) => option.group ?? '', renderInput: (params) => (jsx(TextField, { ...params, placeholder: "Search countries...", size: "small" })), renderTags: () => null }), selectedCountries.length > 0 && (jsx(DestinationChipsContainer, { children: selectedCountries.map((country) => (jsx(Chip, { label: country.label, size: "small", onDelete: () => setSelectedCountries((prev) => prev.filter((c) => c.value !==
+                                                country.value)) }, country.value))) }))] })) : (jsx(Autocomplete, { options: cityOptions.map((c) => c.name), value: selectedCity || null, onChange: (_, newValue) => setSelectedCity(newValue ?? ''), renderInput: (params) => (jsx(TextField, { ...params, placeholder: "Search cities...", size: "small" })) }))] }), isFamily && (jsxs(FormSection, { children: [jsxs(CounterContainer, { children: [jsx(CounterLabel, { variant: "body2", children: labels.adultsLabel ?? 'Adults' }), jsxs(CounterControls, { children: [jsx(IconButton, { size: "small", disabled: adultCount <= 1, onClick: () => setAdultCount((c) => Math.max(1, c - 1)), children: jsx(RemoveCircleOutlineIcon, {}) }), jsx(CounterValue, { variant: "body1", children: adultCount }), jsx(IconButton, { size: "small", disabled: adultCount >= MAX_ADULTS, onClick: () => setAdultCount((c) => Math.min(MAX_ADULTS, c + 1)), children: jsx(AddCircleOutlineIcon, {}) })] })] }), jsxs(CounterContainer, { children: [jsx(CounterLabel, { variant: "body2", children: labels.childrenLabel ?? 'Children' }), jsxs(CounterControls, { children: [jsx(IconButton, { size: "small", disabled: childCount <= 0, onClick: () => setChildCount((c) => Math.max(0, c - 1)), children: jsx(RemoveCircleOutlineIcon, {}) }), jsx(CounterValue, { variant: "body1", children: childCount }), jsx(IconButton, { size: "small", disabled: childCount >= MAX_CHILDREN, onClick: () => setChildCount((c) => Math.min(MAX_CHILDREN, c + 1)), children: jsx(AddCircleOutlineIcon, {}) })] })] })] })), jsx(SubmitButton, { variant: "contained", color: "primary", onClick: handleSubmit, disabled: loading, children: labels.submitLabel ?? 'Get Quote' })] })] }));
+}
+
 /**
  * Common UI Icons
  * Path references to reusable icons
@@ -4760,4 +6362,4 @@ function getIconPath(iconName) {
     return ICON_PATHS[iconName];
 }
 
-export { Banner, BenefitsSummary, BillingToggle, Button, Card, CheckoutFormButton, CheckoutHeader, CheckoutProgress, ChildInformationForm, ContactDetailsForm, CoverageAmountSlider, DesktopHeaderMenuBar, ErrorBoundary, FAQAccordion, Footer, Header$1 as Header, HealthInformationForm, HealthQuestionGroup, ICON_PATHS, InfoCallout, NewHeader, OptionButton, PersonalInformationForm, ProductCard, ProductSelectionDrawer, QuestionSection, RecommendationsDrawer, TenantThemeProvider, ToggleGroup, ammetlifeTheme, ammetlifeTypography, createThemeCSSVariables, getAvailableTenants, getIconPath, getImageSrc, getTenantAssetPath, getTenantLogoPath, getTenantTheme, getTenantTypography, getThemeColor, iglooTheme, iglooTypography, isStaticImageData, isValidExternalUrl, isValidTenantId, mergeTenantTheme, resolveComponent, resolveReactComponent, resolveSvgIcon, safeWindowOpen, sanitizeUrl, tenantThemes, tenantTypography, useIsTenant, useTenantAsset, useTenantFavicon, useTenantId, useTenantLogo, useTenantTheme, withErrorBoundary };
+export { Banner, BenefitsSummary, BillingToggle, Button, Card, CheckoutFormButton, CheckoutHeader, CheckoutProgress, ChildInformationForm, ContactDetailsForm, CoverageAmountSlider, DesktopHeaderMenuBar, ErrorBoundary, FAQAccordion, Footer, Header$1 as Header, HealthInformationForm, HealthQuestionGroup, ICON_PATHS, InfoCallout, NewHeader, OptionButton, PersonalInformationForm, ProductCard, ProductSelectionDrawer, QuestionSection, RecommendationsDrawer, TenantThemeProvider, ToggleGroup, TravelCategoryCard, TravelQuoteDrawer, ammetlifeTheme, ammetlifeTypography, b2cidTheme, b2cidTypography, createThemeCSSVariables, getAvailableTenants, getIconPath, getImageSrc, getTenantAssetPath, getTenantLogoPath, getTenantTheme, getTenantTypography, getThemeColor, iglooTheme, iglooTypography, isStaticImageData, isValidExternalUrl, isValidTenantId, mergeTenantTheme, resolveComponent, resolveReactComponent, resolveSvgIcon, safeWindowOpen, sanitizeUrl, tenantThemes, tenantTypography, useIsTenant, useTenantAsset, useTenantFavicon, useTenantId, useTenantLogo, useTenantTheme, withErrorBoundary };