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

package/dist/cjs/index.js

@@ -15,6 +15,8 @@ var InfoIcon = require('@mui/icons-material/Info');
 var AddIcon = require('@mui/icons-material/Add');
 var RemoveIcon = require('@mui/icons-material/Remove');
 var ExpandMoreIcon = require('@mui/icons-material/ExpandMore');
+var AddCircleOutlineIcon = require('@mui/icons-material/AddCircleOutline');
+var RemoveCircleOutlineIcon = require('@mui/icons-material/RemoveCircleOutline');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -47,6 +49,8 @@ var InfoIcon__default = /*#__PURE__*/_interopDefault(InfoIcon);
 var AddIcon__default = /*#__PURE__*/_interopDefault(AddIcon);
 var RemoveIcon__default = /*#__PURE__*/_interopDefault(RemoveIcon);
 var ExpandMoreIcon__default = /*#__PURE__*/_interopDefault(ExpandMoreIcon);
+var AddCircleOutlineIcon__default = /*#__PURE__*/_interopDefault(AddCircleOutlineIcon);
+var RemoveCircleOutlineIcon__default = /*#__PURE__*/_interopDefault(RemoveCircleOutlineIcon);
 
 /**
  * Tenant Typography Configurations
@@ -434,6 +438,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
@@ -441,6 +1711,7 @@ const ammetlifeTypography = {
 const tenantTypography = {
     igloo: iglooTypography,
     ammetlife: ammetlifeTypography,
+    b2cid: b2cidTypography,
 };
 /**
  * Get typography configuration by tenant ID
@@ -626,6 +1897,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
@@ -633,6 +1989,7 @@ const ammetlifeTheme = {
 const tenantThemes = {
     igloo: iglooTheme,
     ammetlife: ammetlifeTheme,
+    b2cid: b2cidTheme,
 };
 /**
  * Get theme configuration by tenant ID
@@ -937,7 +2294,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
@@ -1010,13 +2367,16 @@ const LogoContainer$2 = styles.styled(material.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 = styles.styled('img')({
+const LogoImage$1 = styles.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
@@ -1269,7 +2629,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
@@ -1365,7 +2725,7 @@ languages = [], currentLocale, onLanguageChange, }) {
         }
         return `AMP ${normalizedCode}`;
     };
-    return (jsxRuntime.jsx(StyledAppBar$2, { className: className, children: jsxRuntime.jsxs(HeaderContainer$1, { children: [jsxRuntime.jsx(LeftSection, { children: jsxRuntime.jsx(LogoContainer$2, { onClick: handleLogoClick, children: logo ? jsxRuntime.jsx(LogoImage$1, { src: logo, alt: logoAlt }) : null }) }), jsxRuntime.jsxs(RightSection, { children: [menuItems.map((item) => (jsxRuntime.jsxs(React__namespace.Fragment, { children: [jsxRuntime.jsxs(MenuItemContainer, { onMouseEnter: () => setHoveredMenuKey(item.key), onMouseLeave: () => setHoveredMenuKey(null), children: [jsxRuntime.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: jsxRuntime.jsxs(MenuItemContent, { isHovered: hoveredMenuKey === item.key, children: [hoveredMenuKey === item.key &&
+    return (jsxRuntime.jsx(StyledAppBar$2, { className: className, children: jsxRuntime.jsxs(HeaderContainer$1, { children: [jsxRuntime.jsx(LeftSection, { children: jsxRuntime.jsx(LogoContainer$2, { onClick: handleLogoClick, children: logo ? jsxRuntime.jsx(LogoImage$1, { src: logo, alt: logoAlt, "$logoHeight": logoHeight }) : null }) }), jsxRuntime.jsxs(RightSection, { children: [menuItems.map((item) => (jsxRuntime.jsxs(React__namespace.Fragment, { children: [jsxRuntime.jsxs(MenuItemContainer, { onMouseEnter: () => setHoveredMenuKey(item.key), onMouseLeave: () => setHoveredMenuKey(null), children: [jsxRuntime.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: jsxRuntime.jsxs(MenuItemContent, { isHovered: hoveredMenuKey === item.key, children: [hoveredMenuKey === item.key &&
                                                         (Boolean(item.scrollTargetProductCode) ||
                                                             item.key in MENU_HOVER_ICONS) && (jsxRuntime.jsx(MenuItemTopIcon, { children: jsxRuntime.jsx(MenuItemIcon, { src: MENU_HOVER_ICONS[item.key] ?? '/assets/tenants/ammetlife/shield_icon.png', alt: "" }) })), jsxRuntime.jsx(MenuItemText, { children: formatMessage({ id: item.label }) }), item.hasDropdown && jsxRuntime.jsx(DropdownIcon, {})] }) }), hoveredMenuKey === item.key &&
                                             Boolean(item.scrollTargetProductCode) && (jsxRuntime.jsx(MenuItemTooltip, { "data-testid": `menu-tooltip-${item.key}`, children: jsxRuntime.jsx(MenuItemTooltipText, { children: getHoverTooltipLabel(item.scrollTargetProductCode) }) }))] }), item.hasDropdown && item.subItems && (jsxRuntime.jsx(StyledMenu$1, { id: `menu-${item.key}`, anchorEl: anchorEl, open: openMenuKey === item.key, onClose: handleCloseMenu, anchorOrigin: {
@@ -1394,7 +2754,9 @@ languages = [], currentLocale, onLanguageChange, }) {
 
 const ResolvedCloseIcon$1 = resolveSvgIcon(CloseIcon__default.default);
 const ResolvedMenuIcon = resolveSvgIcon(MenuIcon__default.default);
-const StyledAppBar$1 = styles.styled(AppBar__default.default)(({ theme, ispartnershippagemobileview, scrolled }) => ({
+const StyledAppBar$1 = styles.styled(AppBar__default.default, {
+    shouldForwardProp: (prop) => prop !== 'ispartnershippagemobileview' && prop !== 'scrolled',
+})(({ theme, ispartnershippagemobileview, scrolled }) => ({
     zIndex: '1000 !important',
     backgroundColor: ispartnershippagemobileview && !scrolled
         ? 'transparent !important'
@@ -1417,7 +2779,9 @@ const ResponsiveB2CLayout = styles.styled('div')(({ theme }) => ({
         margin: '0 auto',
     },
 }));
-const StyledContainer = styles.styled(Container__default.default)(({ theme, scrolled }) => ({
+const StyledContainer = styles.styled(Container__default.default, {
+    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)',
@@ -1428,11 +2792,11 @@ const TypographyLogo = styles.styled(material.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',
     },
 }));
@@ -1559,12 +2923,14 @@ const StyledAvatarUserIcon = styles.styled(material.Avatar)(({ theme }) => ({
         margin: '0',
     },
 }));
-const StyledMenuIcon = styles.styled(ResolvedMenuIcon)(({ theme, ispartnershippagemobileview, scrolled }) => ({
+const StyledMenuIcon = styles.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 = styles.styled(material.Drawer)(({ theme }) => ({
+const StyledDrawer$4 = styles.styled(material.Drawer)(({ theme }) => ({
     '& .MuiMenu-paper': {
         left: 'auto',
         width: 'fit-content',
@@ -1703,7 +3069,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 = material.useTheme();
     const themeBreakpoint = material.useMediaQuery(muiTheme?.breakpoints?.down('md'));
@@ -1750,7 +3116,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 (jsxRuntime.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 (jsxRuntime.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 (jsxRuntime.jsx(StyledAppBar$1, { ispartnershippagemobileview: isPartnershipPageMobileView, scrolled: scrolled, children: jsxRuntime.jsx(ResponsiveB2CLayout, { children: jsxRuntime.jsx(StyledContainer, { ispartnershippagemobileview: isPartnershipPageMobileView, scrolled: scrolled, maxWidth: "xl", children: jsxRuntime.jsxs(material.Toolbar, { disableGutters: true, children: [jsxRuntime.jsx("button", { onClick: (e) => {
                                 e?.preventDefault();
@@ -1777,13 +3143,14 @@ function Header$1({ logo, navigationLinks, languages, currentLocale, userToken,
                                     letterSpacing: '.3rem',
                                     color: 'inherit',
                                     textDecoration: 'none',
-                                }, children: logo ? (jsxRuntime.jsx("img", { src: logo, alt: "Logo", height: 'auto', width: '126px', style: {
-                                        height: 'auto',
-                                        width: '126px',
+                                }, children: logo ? (jsxRuntime.jsx("img", { src: logo, alt: "Logo", style: {
+                                        height: '100%',
+                                        width: 'auto',
+                                        objectFit: 'contain',
                                     } })) : null }) }), !isMobile && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [shouldShowContent && (jsxRuntime.jsxs(material.Box, { sx: {
                                         flexGrow: 1,
                                         display: { xs: 'none', md: 'flex', gap: 40 },
-                                    }, children: [jsxRuntime.jsxs(ButtonDesktopMenu, { onClick: handleOpenNavMenu, sx: { my: 2, textTransform: 'capitalize' }, "data-testid": "productNavigationMenu", children: [jsxRuntime.jsx(material.Typography, { variant: "h6", children: formatMessage({ id: 'Products' }) }), jsxRuntime.jsx(ResolvedArrowDropDownIcon, {})] }, "product"), menuItems?.partnership && (jsxRuntime.jsx(ButtonDesktopMenu, { onClick: onPartnershipClick, sx: { my: 2, textTransform: 'capitalize' }, children: jsxRuntime.jsx(material.Typography, { variant: "h6", children: jsxRuntime.jsx(AnchorLink$1, { href: `${host}${menuItems.partnership.route}`, onClick: (e) => e?.preventDefault(), children: menuItems.partnership.label }) }) }, "partnership")), menuItems?.aboutUs && (jsxRuntime.jsx(ButtonDesktopMenu, { onClick: onAboutUsClick, sx: { my: 2, textTransform: 'capitalize' }, children: jsxRuntime.jsx(material.Typography, { variant: "h6", children: jsxRuntime.jsx(AnchorLinks, { href: `${host}${menuItems.aboutUs.route}`, onClick: (e) => e?.preventDefault(), children: menuItems.aboutUs.label }) }) }, "aboutus")), menuItems?.blog && (jsxRuntime.jsx(ButtonDesktopMenu, { onClick: onBlogClick, sx: { my: 2, textTransform: 'capitalize' }, children: jsxRuntime.jsx(material.Typography, { variant: "h6", children: jsxRuntime.jsx(AnchorLink$1, { href: menuItems.blog.url, onClick: (e) => e?.preventDefault(), children: menuItems.blog.label }) }) }, "blog"))] })), jsxRuntime.jsxs(material.Box, { sx: {
+                                    }, children: [jsxRuntime.jsxs(ButtonDesktopMenu, { onClick: handleOpenNavMenu, sx: { my: 2, textTransform: 'capitalize' }, "data-testid": "productNavigationMenu", children: [jsxRuntime.jsx(material.Typography, { variant: desktopMenuTextVariant, children: formatMessage({ id: 'Products' }) }), jsxRuntime.jsx(ResolvedArrowDropDownIcon, {})] }, "product"), menuItems?.partnership && (jsxRuntime.jsx(ButtonDesktopMenu, { onClick: onPartnershipClick, sx: { my: 2, textTransform: 'capitalize' }, children: jsxRuntime.jsx(material.Typography, { variant: desktopMenuTextVariant, children: jsxRuntime.jsx(AnchorLink$1, { href: `${host}${menuItems.partnership.route}`, onClick: (e) => e?.preventDefault(), children: menuItems.partnership.label }) }) }, "partnership")), menuItems?.aboutUs && (jsxRuntime.jsx(ButtonDesktopMenu, { onClick: onAboutUsClick, sx: { my: 2, textTransform: 'capitalize' }, children: jsxRuntime.jsx(material.Typography, { variant: desktopMenuTextVariant, children: jsxRuntime.jsx(AnchorLinks, { href: `${host}${menuItems.aboutUs.route}`, onClick: (e) => e?.preventDefault(), children: menuItems.aboutUs.label }) }) }, "aboutus")), menuItems?.blog && (jsxRuntime.jsx(ButtonDesktopMenu, { onClick: onBlogClick, sx: { my: 2, textTransform: 'capitalize' }, children: jsxRuntime.jsx(material.Typography, { variant: desktopMenuTextVariant, children: jsxRuntime.jsx(AnchorLink$1, { href: menuItems.blog.url, onClick: (e) => e?.preventDefault(), children: menuItems.blog.label }) }) }, "blog"))] })), jsxRuntime.jsxs(material.Box, { sx: {
                                         flexGrow: 1,
                                         display: {
                                             xs: 'none',
@@ -1791,12 +3158,12 @@ function Header$1({ logo, navigationLinks, languages, currentLocale, userToken,
                                             gap: 40,
                                             justifyContent: 'flex-end',
                                         },
-                                    }, children: [shouldShowContent && (jsxRuntime.jsxs(ButtonDesktopMenu, { onClick: handleOpenLanguageMenu, sx: { my: 2, textTransform: 'capitalize' }, "data-testid": "selectedLocale", children: [jsxRuntime.jsx(material.Typography, { variant: "h6", children: formatMessage({
+                                    }, children: [shouldShowContent && (jsxRuntime.jsxs(ButtonDesktopMenu, { onClick: handleOpenLanguageMenu, sx: { my: 2, textTransform: 'capitalize' }, "data-testid": "selectedLocale", children: [jsxRuntime.jsx(material.Typography, { variant: desktopMenuTextVariant, children: formatMessage({
                                                         id: `${currentLocale?.toLocaleUpperCase()}`,
                                                     }) }), jsxRuntime.jsx(ResolvedArrowDropDownIcon, {})] }, "language")), isPartnershipPagePCView && scrolled ? (jsxRuntime.jsx(StyledButton$1, { variant: "contained", onClick: onPartnershipCTAClick, children: jsxRuntime.jsx(TypographyBtnText, { variant: "body1", children: formatMessage({ id: 'Be Our Partner' }) }) })) : isSeoPageView && scrolled && bannerData ? (jsxRuntime.jsx(StyledButtonBanner, { style: { background: bannerData?.ctaBGColor }, variant: "contained", onClick: onGetQuoteClick, children: jsxRuntime.jsx(material.Typography, { style: {
                                                     color: bannerData?.ctaTextColor,
                                                     textTransform: 'none',
-                                                }, variant: "body1", children: bannerData?.ctaText }) })) : userToken ? (jsxRuntime.jsx(StyledAvatar, { onClick: handleOpenUserMenu, "data-testid": "user-profile-avatar", children: firstName1stLetter })) : (jsxRuntime.jsxs(DivButtonWrapper, { children: [jsxRuntime.jsx(ButtonAuth, { color: "primary", variant: "outlined", sx: { textTransform: 'capitalize' }, onClick: onLoginClick, "data-testid": "headerLogin", children: jsxRuntime.jsx(TypographyAuth, { variant: "body1", children: formatMessage({ id: 'Log in' }) }) }), jsxRuntime.jsx(ButtonAuth, { color: "primary", variant: "contained", sx: { textTransform: 'capitalize' }, onClick: onSignupClick, children: jsxRuntime.jsx(TypographyAuth, { variant: "body1", children: formatMessage({ id: 'Sign up' }) }) })] }))] }), jsxRuntime.jsx(StyledMenu, { id: "menu-appbar", anchorEl: anchorElNav, anchorOrigin: {
+                                                }, variant: "body1", children: bannerData?.ctaText }) })) : userToken ? (jsxRuntime.jsx(StyledAvatar, { onClick: handleOpenUserMenu, "data-testid": "user-profile-avatar", children: firstName1stLetter })) : (jsxRuntime.jsxs(DivButtonWrapper, { children: [jsxRuntime.jsx(ButtonAuth, { color: "primary", variant: "outlined", sx: { textTransform: 'capitalize' }, onClick: onLoginClick, "data-testid": "headerLogin", children: jsxRuntime.jsx(TypographyAuth, { variant: desktopAuthTextVariant, children: formatMessage({ id: 'Log in' }) }) }), jsxRuntime.jsx(ButtonAuth, { color: "primary", variant: "contained", sx: { textTransform: 'capitalize' }, onClick: onSignupClick, children: jsxRuntime.jsx(TypographyAuth, { variant: desktopAuthTextVariant, children: formatMessage({ id: 'Sign up' }) }) })] }))] }), jsxRuntime.jsx(StyledMenu, { id: "menu-appbar", anchorEl: anchorElNav, anchorOrigin: {
                                         vertical: 'bottom',
                                         horizontal: 'left',
                                     }, keepMounted: true, transformOrigin: {
@@ -1815,10 +3182,10 @@ function Header$1({ logo, navigationLinks, languages, currentLocale, userToken,
                                         horizontal: 'left',
                                     }, open: Boolean(anchorElLanguage), onClose: handleCloseLanguageMenu, sx: {
                                         display: { xs: 'none', md: 'block' },
-                                    }, children: jsxRuntime.jsx(DivProductListing, { children: languages.map(({ value, locale, label }) => (jsxRuntime.jsx(StyledMenuItem, { onClick: () => {
+                                    }, children: jsxRuntime.jsx(DivProductListing, { children: languages.map(({ value, locale, label, desktopLabel }) => (jsxRuntime.jsx(StyledMenuItem, { onClick: () => {
                                                 onLanguageChange?.(locale, value);
                                                 handleCloseLanguageMenu();
-                                            }, "data-testid": `lang-${locale}`, children: jsxRuntime.jsx(material.Typography, { variant: "body1", textAlign: "center", children: label }) }, value))) }) }), jsxRuntime.jsx(StyledMenu, { id: "user-menu", anchorEl: anchorElUserMenu, anchorOrigin: {
+                                            }, "data-testid": `lang-${locale}`, children: jsxRuntime.jsx(material.Typography, { variant: "body1", textAlign: "center", children: desktopLabel || label }) }, value))) }) }), jsxRuntime.jsx(StyledMenu, { id: "user-menu", anchorEl: anchorElUserMenu, anchorOrigin: {
                                         vertical: 'bottom',
                                         horizontal: 'left',
                                     }, keepMounted: true, transformOrigin: {
@@ -1850,7 +3217,7 @@ function Header$1({ logo, navigationLinks, languages, currentLocale, userToken,
                                         }, variant: "contained", onClick: onGetQuoteClick, children: jsxRuntime.jsx(material.Typography, { style: {
                                                 color: bannerData?.ctaTextColor,
                                                 textTransform: 'none',
-                                            }, variant: "body1", children: bannerData?.ctaText }) })) : userToken ? (jsxRuntime.jsx(StyledAvatarUserIcon, { "data-testid": "user-profile-avatar", children: firstName1stLetter })) : (jsxRuntime.jsx(StyledMenuIcon, { ispartnershippagemobileview: isPartnershipPageMobileView, scrolled: scrolled })) }), jsxRuntime.jsxs(StyledDrawer$3, { id: "menu-appbar", anchor: "top", keepMounted: true, open: Boolean(anchorElNav), onClose: handleCloseNavMenu, sx: {
+                                            }, variant: "body1", children: bannerData?.ctaText }) })) : userToken ? (jsxRuntime.jsx(StyledAvatarUserIcon, { "data-testid": "user-profile-avatar", children: firstName1stLetter })) : (jsxRuntime.jsx(StyledMenuIcon, { ispartnershippagemobileview: isPartnershipPageMobileView, scrolled: scrolled })) }), jsxRuntime.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,
@@ -1919,13 +3286,13 @@ const MenuIconButton = styles.styled(material.IconButton)(() => ({
         fontSize: '24px',
     },
 }));
-const StyledDrawer$2 = styles.styled(material.Drawer)(() => ({
+const StyledDrawer$3 = styles.styled(material.Drawer)(() => ({
     '& .MuiDrawer-paper': {
         backgroundColor: '#FFFFFF',
         boxSizing: 'border-box',
     },
 }));
-const DrawerHeader$2 = styles.styled(material.Box)(() => ({
+const DrawerHeader$3 = styles.styled(material.Box)(() => ({
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'space-between',
@@ -1945,7 +3312,7 @@ const CloseIconButton = styles.styled(material.IconButton)(() => ({
         fontSize: '24px',
     },
 }));
-const DrawerContent$2 = styles.styled(material.Box)(({ theme }) => ({
+const DrawerContent$3 = styles.styled(material.Box)(({ theme }) => ({
     flex: 1,
     overflowY: 'auto',
     paddingBottom: theme.spacing(2),
@@ -1993,7 +3360,7 @@ function NewHeader({ logo: propLogo, logoAltText = 'Logo', navigationLinks = [],
         item.onClick?.();
         handleDrawerClose();
     };
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(StyledAppBar, { position: "fixed", children: jsxRuntime.jsxs(StyledToolbar, { disableGutters: true, children: [jsxRuntime.jsx(LogoContainer$1, { onClick: handleLogoClick, children: jsxRuntime.jsx(LogoImage, { src: logo, alt: logoAltText }) }), jsxRuntime.jsx(MenuIconButton, { size: "large", edge: "end", "aria-label": "menu", onClick: handleDrawerOpen, children: jsxRuntime.jsx(MenuIcon__default.default, {}) })] }) }), jsxRuntime.jsx(StyledDrawer$2, { anchor: "right", open: drawerOpen, onClose: handleDrawerClose, children: customDrawerContent ? (jsxRuntime.jsx(material.Box, { sx: { width: isMobile ? '100vw' : 350 }, children: customDrawerContent })) : (jsxRuntime.jsxs(material.Box, { sx: { width: isMobile ? '100vw' : 350 }, children: [jsxRuntime.jsxs(DrawerHeader$2, { children: [jsxRuntime.jsx(DrawerLogoContainer, { onClick: handleLogoClick, children: jsxRuntime.jsx(LogoImage, { src: logo, alt: logoAltText }) }), jsxRuntime.jsx(CloseIconButton, { onClick: handleDrawerClose, "aria-label": "close", children: jsxRuntime.jsx(CloseIcon__default.default, {}) })] }), jsxRuntime.jsx(material.Divider, {}), jsxRuntime.jsx(DrawerContent$2, { children: navigationLinks.length > 0 && (jsxRuntime.jsx(material.List, { children: navigationLinks.map((item) => (jsxRuntime.jsx(material.ListItem, { disablePadding: true, children: jsxRuntime.jsx(material.ListItemButton, { onClick: () => handleMenuItemClick(item), children: jsxRuntime.jsx(material.ListItemText, { primary: formatMessage({ id: item.label }) }) }) }, item.key))) })) })] })) })] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(StyledAppBar, { position: "fixed", children: jsxRuntime.jsxs(StyledToolbar, { disableGutters: true, children: [jsxRuntime.jsx(LogoContainer$1, { onClick: handleLogoClick, children: jsxRuntime.jsx(LogoImage, { src: logo, alt: logoAltText }) }), jsxRuntime.jsx(MenuIconButton, { size: "large", edge: "end", "aria-label": "menu", onClick: handleDrawerOpen, children: jsxRuntime.jsx(MenuIcon__default.default, {}) })] }) }), jsxRuntime.jsx(StyledDrawer$3, { anchor: "right", open: drawerOpen, onClose: handleDrawerClose, children: customDrawerContent ? (jsxRuntime.jsx(material.Box, { sx: { width: isMobile ? '100vw' : 350 }, children: customDrawerContent })) : (jsxRuntime.jsxs(material.Box, { sx: { width: isMobile ? '100vw' : 350 }, children: [jsxRuntime.jsxs(DrawerHeader$3, { children: [jsxRuntime.jsx(DrawerLogoContainer, { onClick: handleLogoClick, children: jsxRuntime.jsx(LogoImage, { src: logo, alt: logoAltText }) }), jsxRuntime.jsx(CloseIconButton, { onClick: handleDrawerClose, "aria-label": "close", children: jsxRuntime.jsx(CloseIcon__default.default, {}) })] }), jsxRuntime.jsx(material.Divider, {}), jsxRuntime.jsx(DrawerContent$3, { children: navigationLinks.length > 0 && (jsxRuntime.jsx(material.List, { children: navigationLinks.map((item) => (jsxRuntime.jsx(material.ListItem, { disablePadding: true, children: jsxRuntime.jsx(material.ListItemButton, { onClick: () => handleMenuItemClick(item), children: jsxRuntime.jsx(material.ListItemText, { primary: formatMessage({ id: item.label }) }) }) }, item.key))) })) })] })) })] }));
 }
 
 /**
@@ -2293,7 +3660,7 @@ function Footer({ simplifiedLayout = false, introText, addressText, socialLinks,
                                     }), index === navigationLinks.length - 1 && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ButtonBottomLink, { onClick: onPrivacyPolicyClick, children: jsxRuntime.jsx(material.Typography, { variant: "body1", children: jsxRuntime.jsx(AnchorLink, { href: `${host}/${currentLocale}/terms/privacypolicy`, onClick: (e) => e?.preventDefault(), children: formatMessage({ id: 'Privacy Policy' }) }) }) }), jsxRuntime.jsx(ButtonBottomLink, { onClick: onTermsOfServiceClick, children: jsxRuntime.jsx(material.Typography, { variant: "body1", children: jsxRuntime.jsx(AnchorLink, { href: `${host}/${currentLocale}/terms/termsofservice`, onClick: (e) => e?.preventDefault(), children: formatMessage({ id: 'Terms of Service' }) }) }) }), jsxRuntime.jsx(DivSocial, { children: socialLinks.map((social) => (jsxRuntime.jsx(ButtonIcon, { onClick: () => onSocialClick?.(social.platform, social.url), "aria-label": social.ariaLabel || social.platform, children: jsxRuntime.jsx(AnchorLink, { href: sanitizeUrl(social.url, '#'), onClick: (e) => e?.preventDefault(), children: jsxRuntime.jsx("img", { src: social.icon, alt: social.platform, height: isMobile ? '24' : '28', width: isMobile ? '24' : '28', loading: "lazy" }) }) }, social.platform))) })] }))] }, index))) }))] }), isMobile && jsxRuntime.jsx(StyledDivider, {}), isMobile && (jsxRuntime.jsx(DivBottom, { children: jsxRuntime.jsxs(DivLinks, { children: [jsxRuntime.jsx("div", { onClick: onPrivacyPolicyClick, style: { cursor: 'pointer' }, children: jsxRuntime.jsx(material.Typography, { variant: "body2", children: jsxRuntime.jsx(AnchorLink, { href: `${host}/${currentLocale}/terms/privacypolicy`, onClick: (e) => e?.preventDefault(), children: formatMessage({ id: 'Privacy Policy' }) }) }) }), jsxRuntime.jsx(DivSep, {}), jsxRuntime.jsx("div", { onClick: onTermsOfServiceClick, style: { cursor: 'pointer' }, children: jsxRuntime.jsx(material.Typography, { variant: "body2", children: jsxRuntime.jsx(AnchorLink, { href: `${host}/${currentLocale}/terms/termsofservice`, onClick: (e) => e?.preventDefault(), children: formatMessage({ id: 'Terms of Service' }) }) }) })] }) }))] }) }));
 }
 
-const StyledDrawer$1 = styles.styled(material.Drawer)(({ theme }) => ({
+const StyledDrawer$2 = styles.styled(material.Drawer)(({ theme }) => ({
     zIndex: '1300 !important',
     '& .MuiDrawer-root': {
         zIndex: 1300,
@@ -2313,7 +3680,7 @@ const StyledDrawer$1 = styles.styled(material.Drawer)(({ theme }) => ({
         zIndex: 1299,
     },
 }));
-const DrawerHeader$1 = styles.styled(material.Box)(({ theme }) => ({
+const DrawerHeader$2 = styles.styled(material.Box)(({ theme }) => ({
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'flex-start',
@@ -2324,7 +3691,7 @@ const DrawerHeader$1 = styles.styled(material.Box)(({ theme }) => ({
         minHeight: '56px',
     },
 }));
-const DrawerContent$1 = styles.styled(material.Box)(() => ({
+const DrawerContent$2 = styles.styled(material.Box)(() => ({
     flex: 1,
     overflowY: 'auto',
     padding: '16px 0',
@@ -2455,7 +3822,7 @@ function RecommendationsDrawer({ open, onClose, children, headerIcon, title, sub
             onClose();
         }
     };
-    return (jsxRuntime.jsx(StyledDrawer$1, { anchor: "bottom", open: open, onClose: handleClose, PaperProps: {
+    return (jsxRuntime.jsx(StyledDrawer$2, { anchor: "bottom", open: open, onClose: handleClose, PaperProps: {
             sx: {
                 height: '95vh',
                 borderTopLeftRadius: '16px',
@@ -2464,7 +3831,7 @@ function RecommendationsDrawer({ open, onClose, children, headerIcon, title, sub
             },
         }, sx: {
             zIndex: 1300,
-        }, children: jsxRuntime.jsxs(material.Box, { sx: { display: 'flex', flexDirection: 'column', height: '100%' }, children: [jsxRuntime.jsx(DrawerHeader$1, { children: jsxRuntime.jsx(BackArrowButton, { onClick: handleBackOrClose, "aria-label": showBackButton ? 'back' : 'close', children: showBackButton ? jsxRuntime.jsx(ArrowBackIcon__default.default, {}) : jsxRuntime.jsx(CloseIcon__default.default, {}) }) }), (title || subtitle || headerIcon) && (jsxRuntime.jsxs(HeaderSection, { children: [headerIcon && (jsxRuntime.jsx(CategoryIcon, { children: jsxRuntime.jsx("img", { src: headerIcon, alt: "Category icon", width: 32, height: 32 }) })), title && (jsxRuntime.jsx(TitleText, { variant: "h5", children: formatMessage({ id: title }) })), subtitle && (jsxRuntime.jsx(SubtitleText, { variant: "body2", children: formatMessage({ id: subtitle }) }))] })), jsxRuntime.jsx(DrawerContent$1, { children: children }), showFooter && (jsxRuntime.jsx(DrawerFooter, { children: customFooter ? (customFooter) : (jsxRuntime.jsxs(FooterButtons, { children: [primaryButtonText && (jsxRuntime.jsx(PrimaryButton, { variant: "contained", fullWidth: true, onClick: onPrimaryAction, disabled: primaryButtonDisabled, sx: {
+        }, children: jsxRuntime.jsxs(material.Box, { sx: { display: 'flex', flexDirection: 'column', height: '100%' }, children: [jsxRuntime.jsx(DrawerHeader$2, { children: jsxRuntime.jsx(BackArrowButton, { onClick: handleBackOrClose, "aria-label": showBackButton ? 'back' : 'close', children: showBackButton ? jsxRuntime.jsx(ArrowBackIcon__default.default, {}) : jsxRuntime.jsx(CloseIcon__default.default, {}) }) }), (title || subtitle || headerIcon) && (jsxRuntime.jsxs(HeaderSection, { children: [headerIcon && (jsxRuntime.jsx(CategoryIcon, { children: jsxRuntime.jsx("img", { src: headerIcon, alt: "Category icon", width: 32, height: 32 }) })), title && (jsxRuntime.jsx(TitleText, { variant: "h5", children: formatMessage({ id: title }) })), subtitle && (jsxRuntime.jsx(SubtitleText, { variant: "body2", children: formatMessage({ id: subtitle }) }))] })), jsxRuntime.jsx(DrawerContent$2, { children: children }), showFooter && (jsxRuntime.jsx(DrawerFooter, { children: customFooter ? (customFooter) : (jsxRuntime.jsxs(FooterButtons, { children: [primaryButtonText && (jsxRuntime.jsx(PrimaryButton, { variant: "contained", fullWidth: true, onClick: onPrimaryAction, disabled: primaryButtonDisabled, sx: {
                                     backgroundColor: primaryColor,
                                     '&:hover': {
                                         backgroundColor: primaryColor,
@@ -2477,7 +3844,7 @@ function RecommendationsDrawer({ open, onClose, children, headerIcon, title, sub
                                 }, children: formatMessage({ id: secondaryButtonText }) }))] })) }))] }) }));
 }
 
-const StyledDrawer = material.styled(material.Drawer)(() => ({
+const StyledDrawer$1 = material.styled(material.Drawer)(() => ({
     zIndex: 1300,
     '& .MuiDrawer-paper': {
         borderTopLeftRadius: '8px',
@@ -2580,13 +3947,13 @@ material.styled(material.Typography)(() => ({
     textAlign: 'center',
     wordSpacing: '0px',
 }));
-const DrawerContent = material.styled(material.Box)({
+const DrawerContent$1 = material.styled(material.Box)({
     display: 'flex',
     flexDirection: 'column',
     width: '100%',
     backgroundColor: '#ffffff',
 });
-const DrawerHeader = material.styled(material.Box)({
+const DrawerHeader$1 = material.styled(material.Box)({
     display: 'flex',
     justifyContent: 'flex-end',
     alignItems: 'center',
@@ -2818,7 +4185,7 @@ function ProductSelectionDrawer({ open, onClose, products, onProductSelect, titl
                                     }, children: [product.cardImage ? (jsxRuntime.jsx(ProductCardImage, { src: product.cardImage, alt: product.name, className: "product-card-image-layer" })) : (jsxRuntime.jsx(ProductCardPlaceholder, { className: "product-card-placeholder-layer" })), jsxRuntime.jsxs(ProductCardBottomBar, { className: "product-card-bottom-bar", children: [jsxRuntime.jsx(ProductIcon, { className: "product-card-icon", children: jsxRuntime.jsx("img", { src: product.icon ?? product.logo, alt: "" }) }), jsxRuntime.jsx(ProductName$1, { className: "product-card-name", children: product.name })] })] })] }, product.id))) }) })] }));
     }
     // Mobile Drawer variant (default)
-    return (jsxRuntime.jsx(StyledDrawer, { anchor: "bottom", open: open, onClose: onClose, children: jsxRuntime.jsxs(DrawerContent, { children: [jsxRuntime.jsx(DrawerHeader, { children: jsxRuntime.jsx(CloseButtonContainer, { children: jsxRuntime.jsx(material.IconButton, { onClick: onClose, sx: { padding: 0 }, children: jsxRuntime.jsx(CloseIcon__default.default, { sx: { fontSize: 24, color: '#13131b' } }) }) }) }), jsxRuntime.jsxs(Header, { children: [jsxRuntime.jsx(HeaderTitle, { children: title }), jsxRuntime.jsx(HeaderSubtitle, { children: subtitle })] }), jsxRuntime.jsx(ProductsContainer, { children: jsxRuntime.jsx(ProductsGrid, { productCount: products.length, children: products.map((product) => (jsxRuntime.jsxs(ProductCardWrapper, { children: [jsxRuntime.jsx(ProductCategoryLabel, { children: product.subtitle ?? product.type }), jsxRuntime.jsxs(ProductCard$1, { onClick: () => onProductSelect(product.id), role: "button", tabIndex: 0, onKeyDown: (e) => {
+    return (jsxRuntime.jsx(StyledDrawer$1, { anchor: "bottom", open: open, onClose: onClose, children: jsxRuntime.jsxs(DrawerContent$1, { children: [jsxRuntime.jsx(DrawerHeader$1, { children: jsxRuntime.jsx(CloseButtonContainer, { children: jsxRuntime.jsx(material.IconButton, { onClick: onClose, sx: { padding: 0 }, children: jsxRuntime.jsx(CloseIcon__default.default, { sx: { fontSize: 24, color: '#13131b' } }) }) }) }), jsxRuntime.jsxs(Header, { children: [jsxRuntime.jsx(HeaderTitle, { children: title }), jsxRuntime.jsx(HeaderSubtitle, { children: subtitle })] }), jsxRuntime.jsx(ProductsContainer, { children: jsxRuntime.jsx(ProductsGrid, { productCount: products.length, children: products.map((product) => (jsxRuntime.jsxs(ProductCardWrapper, { children: [jsxRuntime.jsx(ProductCategoryLabel, { children: product.subtitle ?? product.type }), jsxRuntime.jsxs(ProductCard$1, { onClick: () => onProductSelect(product.id), role: "button", tabIndex: 0, onKeyDown: (e) => {
                                         if (e.key === 'Enter' || e.key === ' ') {
                                             e.preventDefault();
                                             onProductSelect(product.id);
@@ -4770,6 +6137,243 @@ function isStaticImageData(image) {
         typeof image.src === 'string');
 }
 
+const CardContainer = material.styled(material.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 = material.styled('img')({
+    width: 80,
+    height: 80,
+    marginBottom: 16,
+    objectFit: 'contain',
+});
+const CardTitle = material.styled(material.Typography)({
+    fontWeight: 600,
+    textAlign: 'center',
+    marginBottom: 4,
+});
+const CardDescription = material.styled(material.Typography)(({ theme }) => ({
+    textAlign: 'center',
+    color: theme.palette.text.secondary,
+}));
+const InsurerLogos = material.styled(material.Box)({
+    display: 'flex',
+    gap: 8,
+    marginTop: 16,
+    alignItems: 'center',
+});
+const InsurerLogo = material.styled('img')({
+    height: 24,
+    objectFit: 'contain',
+});
+
+function TravelCategoryCard({ categoryKey, icon, title, description, insurerLogos, onClick, testId, }) {
+    return (jsxRuntime.jsxs(CardContainer, { onClick: () => onClick?.(categoryKey), "data-testid": testId ?? `travel-category-${categoryKey.toLowerCase()}`, children: [jsxRuntime.jsx(CardIcon, { src: icon, alt: title }), jsxRuntime.jsx(CardTitle, { variant: "h6", children: title }), jsxRuntime.jsx(CardDescription, { variant: "body2", children: description }), insurerLogos && insurerLogos.length > 0 && (jsxRuntime.jsx(InsurerLogos, { children: insurerLogos.map((logo, index) => (jsxRuntime.jsx(InsurerLogo, { src: logo, alt: `insurer-${index}` }, index))) }))] }));
+}
+
+const StyledDrawer = material.styled(material.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 = material.styled(material.Box)(({ theme }) => ({
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    padding: '16px 20px',
+    borderBottom: `1px solid ${theme.palette.divider}`,
+}));
+const DrawerTitle = material.styled(material.Typography)({
+    fontWeight: 600,
+    fontSize: '18px',
+});
+const DrawerContent = material.styled(material.Box)({
+    padding: '20px',
+    overflowY: 'auto',
+    flex: 1,
+});
+const FormSection = material.styled(material.Box)({
+    marginBottom: 24,
+});
+const FormLabel = material.styled(material.Typography)(({ theme }) => ({
+    fontWeight: 500,
+    marginBottom: 8,
+    color: theme.palette.text.primary,
+}));
+const GroupSizeGrid = material.styled(material.Box)({
+    display: 'grid',
+    gridTemplateColumns: 'repeat(2, 1fr)',
+    gap: 8,
+});
+const GroupSizeOption = material.styled(material.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 = material.styled(material.Box)({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    padding: '8px 0',
+});
+const CounterLabel = material.styled(material.Typography)({
+    fontWeight: 500,
+});
+const CounterControls = material.styled(material.Box)({
+    display: 'flex',
+    alignItems: 'center',
+    gap: 12,
+});
+const CounterValue = material.styled(material.Typography)({
+    fontWeight: 600,
+    minWidth: 24,
+    textAlign: 'center',
+});
+const DatePickerRow = material.styled(material.Box)({
+    display: 'grid',
+    gridTemplateColumns: '1fr 1fr',
+    gap: 12,
+});
+const SubmitButton = material.styled(material.Button)({
+    width: '100%',
+    padding: '12px 24px',
+    borderRadius: 8,
+    fontWeight: 600,
+    fontSize: '16px',
+    textTransform: 'none',
+    marginTop: 16,
+});
+const DestinationChipsContainer = material.styled(material.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 = material.useTheme();
+    const isMobile = material.useMediaQuery(theme.breakpoints.down('md'));
+    const [groupSize, setGroupSize] = React.useState('Individual');
+    const [startDate, setStartDate] = React.useState('');
+    const [endDate, setEndDate] = React.useState('');
+    const [adultCount, setAdultCount] = React.useState(1);
+    const [childCount, setChildCount] = React.useState(0);
+    const [selectedCountries, setSelectedCountries] = React.useState([]);
+    const [selectedCity, setSelectedCity] = React.useState('');
+    const isInternational = category === 'International';
+    const handleGroupSizeChange = React.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 = React.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 = React.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 (jsxRuntime.jsxs(StyledDrawer, { anchor: isMobile ? 'bottom' : 'right', open: open, onClose: onClose, children: [jsxRuntime.jsxs(DrawerHeader, { children: [jsxRuntime.jsx(DrawerTitle, { variant: "h6", children: drawerTitle }), jsxRuntime.jsx(material.IconButton, { onClick: onClose, size: "small", children: jsxRuntime.jsx(CloseIcon__default.default, {}) })] }), jsxRuntime.jsxs(DrawerContent, { children: [jsxRuntime.jsxs(FormSection, { children: [jsxRuntime.jsx(FormLabel, { variant: "body2", children: labels.groupSizeLabel ?? 'Group Size' }), jsxRuntime.jsx(GroupSizeGrid, { children: GROUP_SIZE_OPTIONS.map((option) => (jsxRuntime.jsx(GroupSizeOption, { selected: groupSize === option.key, onClick: () => handleGroupSizeChange(option.key), children: groupSizeLabelMap[option.key] }, option.key))) })] }), jsxRuntime.jsxs(FormSection, { children: [jsxRuntime.jsx(FormLabel, { variant: "body2", children: labels.travelDatesLabel ?? 'Travel Dates' }), jsxRuntime.jsxs(DatePickerRow, { children: [jsxRuntime.jsx(material.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 }), jsxRuntime.jsx(material.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 })] })] }), jsxRuntime.jsxs(FormSection, { children: [jsxRuntime.jsx(FormLabel, { variant: "body2", children: labels.destinationLabel ?? 'Destination' }), isInternational ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(material.Autocomplete, { multiple: true, options: countryOptions, getOptionLabel: (option) => option.label, value: selectedCountries, onChange: (_, newValue) => setSelectedCountries(newValue), groupBy: (option) => option.group ?? '', renderInput: (params) => (jsxRuntime.jsx(material.TextField, { ...params, placeholder: "Search countries...", size: "small" })), renderTags: () => null }), selectedCountries.length > 0 && (jsxRuntime.jsx(DestinationChipsContainer, { children: selectedCountries.map((country) => (jsxRuntime.jsx(material.Chip, { label: country.label, size: "small", onDelete: () => setSelectedCountries((prev) => prev.filter((c) => c.value !==
+                                                country.value)) }, country.value))) }))] })) : (jsxRuntime.jsx(material.Autocomplete, { options: cityOptions.map((c) => c.name), value: selectedCity || null, onChange: (_, newValue) => setSelectedCity(newValue ?? ''), renderInput: (params) => (jsxRuntime.jsx(material.TextField, { ...params, placeholder: "Search cities...", size: "small" })) }))] }), isFamily && (jsxRuntime.jsxs(FormSection, { children: [jsxRuntime.jsxs(CounterContainer, { children: [jsxRuntime.jsx(CounterLabel, { variant: "body2", children: labels.adultsLabel ?? 'Adults' }), jsxRuntime.jsxs(CounterControls, { children: [jsxRuntime.jsx(material.IconButton, { size: "small", disabled: adultCount <= 1, onClick: () => setAdultCount((c) => Math.max(1, c - 1)), children: jsxRuntime.jsx(RemoveCircleOutlineIcon__default.default, {}) }), jsxRuntime.jsx(CounterValue, { variant: "body1", children: adultCount }), jsxRuntime.jsx(material.IconButton, { size: "small", disabled: adultCount >= MAX_ADULTS, onClick: () => setAdultCount((c) => Math.min(MAX_ADULTS, c + 1)), children: jsxRuntime.jsx(AddCircleOutlineIcon__default.default, {}) })] })] }), jsxRuntime.jsxs(CounterContainer, { children: [jsxRuntime.jsx(CounterLabel, { variant: "body2", children: labels.childrenLabel ?? 'Children' }), jsxRuntime.jsxs(CounterControls, { children: [jsxRuntime.jsx(material.IconButton, { size: "small", disabled: childCount <= 0, onClick: () => setChildCount((c) => Math.max(0, c - 1)), children: jsxRuntime.jsx(RemoveCircleOutlineIcon__default.default, {}) }), jsxRuntime.jsx(CounterValue, { variant: "body1", children: childCount }), jsxRuntime.jsx(material.IconButton, { size: "small", disabled: childCount >= MAX_CHILDREN, onClick: () => setChildCount((c) => Math.min(MAX_CHILDREN, c + 1)), children: jsxRuntime.jsx(AddCircleOutlineIcon__default.default, {}) })] })] })] })), jsxRuntime.jsx(SubmitButton, { variant: "contained", color: "primary", onClick: handleSubmit, disabled: loading, children: labels.submitLabel ?? 'Get Quote' })] })] }));
+}
+
 /**
  * Common UI Icons
  * Path references to reusable icons
@@ -4822,8 +6426,12 @@ exports.QuestionSection = QuestionSection;
 exports.RecommendationsDrawer = RecommendationsDrawer;
 exports.TenantThemeProvider = TenantThemeProvider;
 exports.ToggleGroup = ToggleGroup;
+exports.TravelCategoryCard = TravelCategoryCard;
+exports.TravelQuoteDrawer = TravelQuoteDrawer;
 exports.ammetlifeTheme = ammetlifeTheme;
 exports.ammetlifeTypography = ammetlifeTypography;
+exports.b2cidTheme = b2cidTheme;
+exports.b2cidTypography = b2cidTypography;
 exports.createThemeCSSVariables = createThemeCSSVariables;
 exports.getAvailableTenants = getAvailableTenants;
 exports.getIconPath = getIconPath;