igloo-d2c-components 1.0.28 → 1.0.30

package/dist/cjs/index.js

@@ -351,7 +351,7 @@ const ammetlifeTypography = Object.assign(Object.assign({}, iglooTypography), {
         fontWeight: 700,
         lineHeight: '38px',
         letterSpacing: 0,
-        wordSpacing: '-5px',
+        wordSpacing: '-10px',
     }, 
     // Title Medium (H2) - MetLife Circular Bold 16/24
     titleMedium: {
@@ -890,11 +890,12 @@ function Banner(_a) {
  * Design Specifications:
  * - Header height: 80px
  * - Background: white (#ffffff)
- * - Content max-width: 1128px (equivalent to 156px padding on 1440px width)
- * - Logo width: 126px
- * - Gap between logo and menu items: 32px
- * - Menu text: MetLife Circular Bold, 18px, #13131B
- * - Login button: Text style, #0090da (teal/cyan)
+ * - Content padding: 156px horizontal on 1440px viewport
+ * - Logo dimensions: 126px × 16px
+ * - Gap between menu items: 32px
+ * - Menu text: MetLife Circular Bold, 18px, #13131B, line-height 24px
+ * - CTA Button: Filled, #0090da, border-radius 24px, height 48px
+ * - CTA text: MetLife Circular Medium, 16px, white, line-height 20px
  */
 /**
  * Design System Colors (from Figma node 1581-22604)
@@ -912,7 +913,7 @@ const designColors = {
  * Main AppBar container
  * Height: 80px, white background, centered content
  */
-const StyledAppBar$2 = styles.styled(AppBar)(({ theme }) => ({
+const StyledAppBar$2 = styles.styled(AppBar)(() => ({
     backgroundColor: designColors.natural.light00,
     boxShadow: 'none',
     position: 'fixed',
@@ -942,13 +943,12 @@ const HeaderContainer$1 = styles.styled(material.Box)(({ theme }) => ({
     },
 }));
 /**
- * Left section containing logo and menu items
- * Gap: 32px between all children (logo and menu items)
+ * Left section containing logo only
+ * Per Figma: Logo on left side of header
  */
 const LeftSection = styles.styled(material.Box)({
     display: 'flex',
     alignItems: 'center',
-    gap: '32px',
     height: '100%',
 });
 /**
@@ -963,11 +963,11 @@ const LogoContainer$2 = styles.styled(material.Box)({
 });
 /**
  * Logo image
- * Width: 126px, height: 16px (per Figma)
+ * Width: 126px, height: 16px (per Figma node 1328:28463)
  */
 const LogoImage$1 = styles.styled('img')({
-    width: '94px',
-    height: '32px',
+    width: '126px',
+    height: '16px',
     objectFit: 'contain',
 });
 /**
@@ -985,7 +985,7 @@ styles.styled(material.Box)({
  * Font: MetLife Circular Bold, 18px, color: #13131B
  * Padding: 10px horizontal (creates visual spacing between items)
  */
-const MenuItemButton = styles.styled(material.Button)(({ theme }) => ({
+const MenuItemButton = styles.styled(material.Button)(() => ({
     display: 'flex',
     alignItems: 'center',
     gap: '8px',
@@ -999,6 +999,7 @@ const MenuItemButton = styles.styled(material.Button)(({ theme }) => ({
     fontSize: '18px',
     lineHeight: '24px',
     letterSpacing: '0px',
+    wordSpacing: '-5px',
     borderRadius: 0,
     '&:hover': {
         backgroundColor: 'transparent',
@@ -1015,6 +1016,7 @@ const MenuItemText = styles.styled(material.Typography)({
     fontSize: '18px',
     lineHeight: '24px',
     letterSpacing: '0px',
+    wordSpacing: '-5px',
     color: 'inherit',
 });
 /**
@@ -1027,19 +1029,22 @@ const DropdownIcon = styles.styled(ArrowDropDownIcon)({
     color: designColors.natural.dim100,
 });
 /**
- * Right section containing login button
+ * Right section containing menu items and CTA button
+ * Gap: 32px between menu items (per Figma node 3506:35611)
  */
 const RightSection = styles.styled(material.Box)({
     display: 'flex',
     alignItems: 'center',
+    gap: '32px',
     height: '100%',
 });
 /**
- * Login button (text style)
+ * Login button (text style) - DEPRECATED
+ * @deprecated Use PurchaseButton instead
  * Based on Figma: Style=Text, State=enabled, Show Icon=False
  * Color: #0090da (primary blue/teal)
  */
-const LoginButton = styles.styled(material.Button)(({ theme }) => ({
+styles.styled(material.Button)(() => ({
     display: 'flex',
     alignItems: 'center',
     padding: '0 10px',
@@ -1052,6 +1057,7 @@ const LoginButton = styles.styled(material.Button)(({ theme }) => ({
     fontSize: '18px',
     lineHeight: '24px',
     letterSpacing: '0px',
+    wordSpacing: '-5px',
     borderRadius: 0,
     backgroundColor: 'transparent',
     '&:hover': {
@@ -1059,10 +1065,41 @@ const LoginButton = styles.styled(material.Button)(({ theme }) => ({
         textDecoration: 'underline',
     },
 }));
+/**
+ * Purchase Now CTA Button (filled style)
+ * Based on Figma: Style=Filled, State=Enabled (node 3506:36976)
+ * Background: #0090da, border-radius: 24px, height: 48px
+ * Text: MetLife Circular Medium, 16px, white, line-height 20px
+ */
+const PurchaseButton = styles.styled(material.Button)(() => ({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: '10px 24px',
+    height: '48px',
+    minWidth: 'auto',
+    textTransform: 'none',
+    color: designColors.natural.light00,
+    backgroundColor: designColors.primary.main60,
+    fontFamily: '"MetLifeCircular", "Montserrat", "Roboto", "Helvetica", "Arial", sans-serif',
+    fontWeight: 500,
+    fontSize: '16px',
+    lineHeight: '20px',
+    letterSpacing: '0px',
+    wordSpacing: '-5px',
+    borderRadius: '24px',
+    whiteSpace: 'nowrap',
+    '&:hover': {
+        backgroundColor: '#007bb8',
+    },
+    '&:active': {
+        backgroundColor: '#006a9e',
+    },
+}));
 /**
  * Dropdown menu container
  */
-const StyledMenu$1 = styles.styled(material.Menu)(({ theme }) => ({
+const StyledMenu$1 = styles.styled(material.Menu)(() => ({
     '& .MuiPaper-root': {
         borderRadius: '16px',
         marginTop: '8px',
@@ -1073,7 +1110,7 @@ const StyledMenu$1 = styles.styled(material.Menu)(({ theme }) => ({
 /**
  * Dropdown menu item
  */
-const StyledMenuItem$1 = styles.styled(material.MenuItem)(({ theme }) => ({
+const StyledMenuItem$1 = styles.styled(material.MenuItem)(() => ({
     display: 'flex',
     alignItems: 'center',
     gap: '12px',
@@ -1082,6 +1119,7 @@ const StyledMenuItem$1 = styles.styled(material.MenuItem)(({ theme }) => ({
     fontWeight: 500,
     fontSize: '16px',
     lineHeight: '24px',
+    wordSpacing: '-5px',
     color: designColors.natural.dim100,
     '&:hover': {
         backgroundColor: 'rgba(0, 144, 218, 0.08)',
@@ -1096,28 +1134,65 @@ const MenuItemIcon = styles.styled('img')({
     objectFit: 'contain',
 });
 
+/**
+ * Smooth scroll utility function
+ * Scrolls to a target element by ID with smooth behavior
+ */
+const scrollToElement = (targetId, offset = 80) => {
+    const element = document.getElementById(targetId);
+    if (element) {
+        const elementPosition = element.getBoundingClientRect().top;
+        const offsetPosition = elementPosition + window.pageYOffset - offset;
+        window.scrollTo({
+            top: offsetPosition,
+            behavior: 'smooth',
+        });
+    }
+};
 /**
  * DesktopHeaderMenuBar Component
  *
- * A responsive desktop header with navigation menu items and dropdown support.
+ * A desktop header with logo on left, navigation menu items and CTA button on right.
+ * Supports scroll-to-section interactions for menu items.
  *
  * @param logo - Logo image source URL
  * @param logoAlt - Alt text for the logo image
  * @param menuItems - Array of menu items to display
- * @param showLoginButton - Whether to show the login button (default: true)
- * @param loginButtonText - Text for the login button (default: 'Log in')
+ * @param showCtaButton - Whether to show the CTA button (default: true)
+ * @param ctaButtonText - Text for the CTA button (default: 'Purchase Now')
+ * @param onCtaClick - Handler for CTA button click
+ * @param ctaScrollTargetId - Target element ID for CTA scroll action
+ * @param onScrollToSection - Callback when menu item triggers scroll
  * @param onLogoClick - Handler for logo click
- * @param onLoginClick - Handler for login button click
  * @param formatMessage - i18n function for translations
  */
-function DesktopHeaderMenuBar({ logo, logoAlt = 'Logo', menuItems, showLoginButton = true, loginButtonText = 'Log in', onLogoClick, onLoginClick, formatMessage = (descriptor) => descriptor.id, className, }) {
-    // Track which dropdown is currently open
+function DesktopHeaderMenuBar({ logo, logoAlt = 'Logo', menuItems, 
+// Legacy props (deprecated)
+showLoginButton, loginButtonText, onLoginClick, 
+// New CTA props
+showCtaButton = true, ctaButtonText = 'Purchase Now', onCtaClick, ctaScrollTargetId, onScrollToSection, onLogoClick, formatMessage = (descriptor) => descriptor.id, className, }) {
+    var _a;
+    // Track which dropdown is currently open (for backward compatibility)
     const [openMenuKey, setOpenMenuKey] = React__namespace.useState(null);
     const [anchorEl, setAnchorEl] = React__namespace.useState(null);
+    // Determine which button props to use (support legacy props)
+    const shouldShowCtaButton = (_a = showCtaButton !== null && showCtaButton !== void 0 ? showCtaButton : showLoginButton) !== null && _a !== void 0 ? _a : true;
+    const ctaText = ctaButtonText || loginButtonText || 'Purchase Now';
+    const handleCtaClick = onCtaClick || onLoginClick;
     const handleMenuClick = (event, item) => {
         var _a;
+        // Handle scroll-to-section behavior
+        if (item.scrollTargetId) {
+            if (onScrollToSection) {
+                onScrollToSection(item.scrollTargetId, item.scrollTargetProductCode);
+            }
+            else {
+                scrollToElement(item.scrollTargetId);
+            }
+            return;
+        }
+        // Handle dropdown behavior (backward compatibility)
         if (item.hasDropdown && item.subItems && item.subItems.length > 0) {
-            // Toggle dropdown
             if (openMenuKey === item.key) {
                 handleCloseMenu();
             }
@@ -1147,7 +1222,18 @@ function DesktopHeaderMenuBar({ logo, logoAlt = 'Logo', menuItems, showLoginButt
         e.preventDefault();
         onLogoClick === null || onLogoClick === void 0 ? void 0 : onLogoClick();
     };
-    return (jsxRuntime.jsx(StyledAppBar$2, Object.assign({ className: className }, { children: jsxRuntime.jsxs(HeaderContainer$1, { children: [jsxRuntime.jsxs(LeftSection, { children: [jsxRuntime.jsx(LogoContainer$2, Object.assign({ onClick: handleLogoClick }, { children: jsxRuntime.jsx(LogoImage$1, { src: logo, alt: logoAlt }) })), menuItems.map((item) => (jsxRuntime.jsxs(React__namespace.Fragment, { children: [jsxRuntime.jsxs(MenuItemButton, Object.assign({ onClick: (e) => handleMenuClick(e, item), "aria-haspopup": item.hasDropdown ? 'true' : undefined, "aria-expanded": item.hasDropdown ? openMenuKey === item.key : undefined, "data-testid": `menu-item-${item.key}` }, { children: [jsxRuntime.jsx(MenuItemText, { children: formatMessage({ id: item.label }) }), item.hasDropdown && jsxRuntime.jsx(DropdownIcon, {})] })), item.hasDropdown && item.subItems && (jsxRuntime.jsx(StyledMenu$1, Object.assign({ id: `menu-${item.key}`, anchorEl: anchorEl, open: openMenuKey === item.key, onClose: handleCloseMenu, anchorOrigin: {
+    const handleCtaButtonClick = () => {
+        if (ctaScrollTargetId) {
+            if (onScrollToSection) {
+                onScrollToSection(ctaScrollTargetId);
+            }
+            else {
+                scrollToElement(ctaScrollTargetId);
+            }
+        }
+        handleCtaClick === null || handleCtaClick === void 0 ? void 0 : handleCtaClick();
+    };
+    return (jsxRuntime.jsx(StyledAppBar$2, Object.assign({ className: className }, { children: jsxRuntime.jsxs(HeaderContainer$1, { children: [jsxRuntime.jsx(LeftSection, { children: jsxRuntime.jsx(LogoContainer$2, Object.assign({ onClick: handleLogoClick }, { children: jsxRuntime.jsx(LogoImage$1, { src: logo, alt: logoAlt }) })) }), jsxRuntime.jsxs(RightSection, { children: [menuItems.map((item) => (jsxRuntime.jsxs(React__namespace.Fragment, { children: [jsxRuntime.jsxs(MenuItemButton, Object.assign({ onClick: (e) => handleMenuClick(e, item), "aria-haspopup": item.hasDropdown ? 'true' : undefined, "aria-expanded": item.hasDropdown ? openMenuKey === item.key : undefined, "data-testid": `menu-item-${item.key}` }, { children: [jsxRuntime.jsx(MenuItemText, { children: formatMessage({ id: item.label }) }), item.hasDropdown && jsxRuntime.jsx(DropdownIcon, {})] })), item.hasDropdown && item.subItems && (jsxRuntime.jsx(StyledMenu$1, Object.assign({ id: `menu-${item.key}`, anchorEl: anchorEl, open: openMenuKey === item.key, onClose: handleCloseMenu, anchorOrigin: {
                                         vertical: 'bottom',
                                         horizontal: 'left',
                                     }, transformOrigin: {
@@ -1155,7 +1241,7 @@ function DesktopHeaderMenuBar({ logo, logoAlt = 'Logo', menuItems, showLoginButt
                                         horizontal: 'left',
                                     }, MenuListProps: {
                                         'aria-labelledby': `menu-button-${item.key}`,
-                                    } }, { children: item.subItems.map((subItem) => (jsxRuntime.jsxs(StyledMenuItem$1, Object.assign({ onClick: () => handleSubItemClick(item, subItem.key), "data-testid": `submenu-item-${subItem.key}` }, { children: [subItem.icon && (jsxRuntime.jsx(MenuItemIcon, { src: subItem.icon, alt: subItem.label })), formatMessage({ id: subItem.label })] }), subItem.key))) })))] }, item.key)))] }), jsxRuntime.jsx(RightSection, { children: showLoginButton && (jsxRuntime.jsx(LoginButton, Object.assign({ onClick: onLoginClick, "data-testid": "header-login-button" }, { children: formatMessage({ id: loginButtonText }) }))) })] }) })));
+                                    } }, { children: item.subItems.map((subItem) => (jsxRuntime.jsxs(StyledMenuItem$1, Object.assign({ onClick: () => handleSubItemClick(item, subItem.key), "data-testid": `submenu-item-${subItem.key}` }, { children: [subItem.icon && (jsxRuntime.jsx(MenuItemIcon, { src: subItem.icon, alt: subItem.label })), formatMessage({ id: subItem.label })] }), subItem.key))) })))] }, item.key))), shouldShowCtaButton && (jsxRuntime.jsx(PurchaseButton, Object.assign({ onClick: handleCtaButtonClick, "data-testid": "header-cta-button" }, { children: formatMessage({ id: ctaText }) })))] })] }) })));
 }
 
 const StyledAppBar$1 = styles.styled(AppBar)(({ theme, ispartnershippagemobileview, scrolled }) => {
@@ -1521,7 +1607,7 @@ const TypographyBtnText = styles.styled(material.Typography)(({ theme }) => {
  * />
  * ```
  */
-function Header$1({ logo, alternateLogo, showAlternateLogo = false, navigationLinks, languages, currentLocale, currentLang, userToken, userFirstName, isMobile: propIsMobile, scrolled = false, isPartnershipPageMobileView = false, isPartnershipPagePCView = false, isSeoPageView = false, showGetQuoteButton = false, bannerData, ctaData, host = '', welcomeMessage, formatMessage = (descriptor) => descriptor.id, menuItems, userProfileComponent, onLogoClick, onProductMenuClick, onLanguageChange, onLoginClick, onSignupClick, onLogoutClick, onPartnershipClick, onAboutUsClick, onBlogClick, onMyProfileClick, onGetQuoteClick, onPartnershipCTAClick, useNewDesktopLayout = false, desktopMenuItems = [], }) {
+function Header$1({ logo, alternateLogo, showAlternateLogo = false, navigationLinks, languages, currentLocale, currentLang, userToken, userFirstName, isMobile: propIsMobile, scrolled = false, isPartnershipPageMobileView = false, isPartnershipPagePCView = false, isSeoPageView = false, showGetQuoteButton = false, bannerData, ctaData, 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, }) {
     var _a, _b, _c;
     const tenantTheme = useTenantTheme();
     tenantTheme === null || tenantTheme === void 0 ? void 0 : tenantTheme.theme;
@@ -1568,12 +1654,14 @@ function Header$1({ logo, alternateLogo, showAlternateLogo = false, navigationLi
                 onClick: subItem.onClick,
             })),
             onClick: item.onClick,
+            scrollTargetId: item.scrollTargetId,
+            scrollTargetProductCode: item.scrollTargetProductCode,
         });
     });
     // Render new desktop layout when enabled and on actual desktop viewport
     // Uses isActuallyDesktop to avoid SSR/prop issues with isMobile detection
     if (useNewDesktopLayout && isActuallyDesktop) {
-        return (jsxRuntime.jsx(DesktopHeaderMenuBar, { logo: logo, logoAlt: "Logo", menuItems: convertedDesktopMenuItems, showLoginButton: !userToken, loginButtonText: "Log in", onLogoClick: onLogoClick, onLoginClick: onLoginClick, formatMessage: formatMessage }));
+        return (jsxRuntime.jsx(DesktopHeaderMenuBar, { logo: logo, logoAlt: "Logo", menuItems: convertedDesktopMenuItems, showCtaButton: showCtaButton, ctaButtonText: ctaButtonText, onCtaClick: onCtaClick, ctaScrollTargetId: ctaScrollTargetId, onScrollToSection: onScrollToSection, onLogoClick: onLogoClick, formatMessage: formatMessage }));
     }
     return (jsxRuntime.jsx(StyledAppBar$1, Object.assign({ ispartnershippagemobileview: isPartnershipPageMobileView, scrolled: scrolled }, { children: jsxRuntime.jsx(ResponsiveB2CLayout, { children: jsxRuntime.jsx(StyledContainer, Object.assign({ ispartnershippagemobileview: isPartnershipPageMobileView, scrolled: scrolled, maxWidth: "xl" }, { children: jsxRuntime.jsxs(material.Toolbar, Object.assign({ disableGutters: true }, { children: [jsxRuntime.jsx("a", Object.assign({ href: host || '#', onClick: (e) => {
                                 e === null || e === void 0 ? void 0 : e.preventDefault();
@@ -2052,6 +2140,7 @@ const TitleText = styles.styled(material.Typography)(({ theme }) => ({
     fontWeight: 700,
     fontSize: '28px',
     lineHeight: '28px',
+    wordSpacing: '-5px',
     color: '#13131B',
     [theme.breakpoints.down('md')]: {
         fontSize: '20px',
@@ -2062,6 +2151,7 @@ const SubtitleText = styles.styled(material.Typography)(({ theme }) => ({
     fontWeight: 400,
     fontSize: '14px',
     lineHeight: '18px',
+    wordSpacing: '-5px',
     color: '#5F5E62',
 }));
 const FooterButtons = styles.styled(material.Box)(({ theme }) => ({
@@ -2079,6 +2169,7 @@ const PrimaryButton = styles.styled(material.Button)(({ theme }) => ({
     fontWeight: 500,
     fontSize: '14px',
     lineHeight: '18px',
+    wordSpacing: '-5px',
     '&:disabled': {
         backgroundColor: '#C8C5CA',
         color: '#FFFFFF',
@@ -2091,6 +2182,7 @@ const SecondaryButton = styles.styled(material.Button)(({ theme }) => ({
     fontWeight: 500,
     fontSize: '14px',
     lineHeight: '18px',
+    wordSpacing: '-5px',
 }));
 
 /**
@@ -2199,6 +2291,7 @@ const HeaderTitle = material.styled(material.Typography)({
     fontSize: '20px',
     fontWeight: 700,
     lineHeight: '28px',
+    wordSpacing: '-5px',
     color: '#13131b',
 });
 const HeaderSubtitle = material.styled(material.Typography)({
@@ -2206,6 +2299,7 @@ const HeaderSubtitle = material.styled(material.Typography)({
     fontSize: '14px',
     fontWeight: 400,
     lineHeight: '18px',
+    wordSpacing: '-5px',
     color: 'rgba(0, 0, 0, 0.6)',
 });
 const ProductsContainer = material.styled(material.Box)({
@@ -2246,6 +2340,7 @@ const ProductName$1 = material.styled(material.Typography)({
     fontSize: '14px',
     fontWeight: 700,
     lineHeight: '22px',
+    wordSpacing: '-5px',
     color: '#13131b',
     textAlign: 'center',
 });
@@ -2254,6 +2349,7 @@ const ProductType = material.styled(material.Typography)({
     fontSize: '12px',
     fontWeight: 400,
     lineHeight: '16px',
+    wordSpacing: '-5px',
     color: '#13131b',
     textAlign: 'center',
 });
@@ -2267,6 +2363,7 @@ const ViewPlansButton = material.styled(material.Button)({
     fontSize: '14px',
     fontWeight: 500,
     lineHeight: '18px',
+    wordSpacing: '-5px',
 });
 
 function ProductSelectionDrawer({ open, onClose, products, onProductSelect, title = 'Select your product', subtitle = 'Pick the product that suits your protection goals to view available plans', viewPlansButtonText = 'View plans', }) {
@@ -2309,6 +2406,7 @@ const QuestionTitle = styles.styled(material.Typography)(({ theme }) => ({
     fontWeight: 700,
     fontSize: '18px',
     lineHeight: '24px',
+    wordSpacing: '-5px',
     color: '#13131B',
     [theme.breakpoints.down('md')]: {
         fontSize: '14px',
@@ -2319,6 +2417,7 @@ const QuestionSubtext = styles.styled(material.Typography)(({ theme }) => ({
     fontWeight: 400,
     fontSize: '16px',
     lineHeight: '20px',
+    wordSpacing: '-5px',
     color: '#5F5E62',
     [theme.breakpoints.down('md')]: {
         fontSize: '12px',
@@ -2447,6 +2546,7 @@ const OptionLabel = styles.styled(material.Typography)(({ theme, selected, color
         fontWeight: selected ? 700 : 500,
         fontSize: '14px',
         lineHeight: '20px',
+        wordSpacing: '0px',
         color: selected ? '#0090DA' : colors.unselectedText,
         textAlign: 'center',
         fontFamily: '"MetLifeCircular", "Montserrat", sans-serif',
@@ -2526,6 +2626,7 @@ const ToggleLabel = styles.styled(material.Typography)(({ theme, selected }) =>
     fontWeight: 600,
     fontSize: '14px',
     lineHeight: '20px',
+    wordSpacing: '-5px',
     color: selected ? '#FEFBFF' : '#5F5E62',
     whiteSpace: 'nowrap',
 }));
@@ -2674,6 +2775,7 @@ const ToggleText = styles.styled(material.Typography)(({ theme }) => {
         fontWeight: ((_d = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _d === void 0 ? void 0 : _d.fontWeightSemiBold) || 600,
         lineHeight: ((_f = (_e = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _e === void 0 ? void 0 : _e.bodyMedium) === null || _f === void 0 ? void 0 : _f.lineHeight) || '20px',
         whiteSpace: 'nowrap',
+        wordSpacing: '-5px',
     });
 });
 
@@ -2752,6 +2854,7 @@ const CalloutTitle = styles.styled(material.Typography)(({ theme }) => {
         fontSize: ((_c = (_b = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _b === void 0 ? void 0 : _b.bodyMedium) === null || _c === void 0 ? void 0 : _c.fontSize) || '16px',
         fontWeight: ((_d = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _d === void 0 ? void 0 : _d.fontWeightSemiBold) || 700,
         lineHeight: ((_f = (_e = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _e === void 0 ? void 0 : _e.bodyMedium) === null || _f === void 0 ? void 0 : _f.lineHeight) || '20px',
+        wordSpacing: '-5px',
         color: ((_h = (_g = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _g === void 0 ? void 0 : _g.natural) === null || _h === void 0 ? void 0 : _h.dim) || '#13131b',
         [theme.breakpoints.down('md')]: {
             fontSize: '14px',
@@ -2767,6 +2870,7 @@ const CalloutText = styles.styled(material.Typography)(({ theme }) => {
         fontSize: ((_c = (_b = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _b === void 0 ? void 0 : _b.bodySmall) === null || _c === void 0 ? void 0 : _c.fontSize) || '14px',
         fontWeight: ((_e = (_d = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _d === void 0 ? void 0 : _d.bodySmall) === null || _e === void 0 ? void 0 : _e.fontWeight) || 400,
         lineHeight: ((_g = (_f = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _f === void 0 ? void 0 : _f.bodySmall) === null || _g === void 0 ? void 0 : _g.lineHeight) || '16px',
+        wordSpacing: '-5px',
         color: ((_j = (_h = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _h === void 0 ? void 0 : _h.natural) === null || _j === void 0 ? void 0 : _j.dark) || '#5f5e62',
         [theme.breakpoints.down('md')]: {
             fontSize: '12px',
@@ -2829,6 +2933,7 @@ const InputLabel = styles.styled(material.Typography)(({ theme }) => {
         fontSize: ((_c = (_b = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _b === void 0 ? void 0 : _b.bodySmall) === null || _c === void 0 ? void 0 : _c.fontSize) || '12px',
         fontWeight: ((_e = (_d = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _d === void 0 ? void 0 : _d.bodySmall) === null || _e === void 0 ? void 0 : _e.fontWeight) || 400,
         lineHeight: ((_g = (_f = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _f === void 0 ? void 0 : _f.bodySmall) === null || _g === void 0 ? void 0 : _g.lineHeight) || '16px',
+        wordSpacing: '-5px',
         color: ((_j = (_h = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _h === void 0 ? void 0 : _h.natural) === null || _j === void 0 ? void 0 : _j.dim) || '#13131b',
     });
 });
@@ -2856,6 +2961,7 @@ const InputValue = styles.styled(material.Typography)(({ theme }) => {
         fontSize: ((_c = (_b = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _b === void 0 ? void 0 : _b.bodyMedium) === null || _c === void 0 ? void 0 : _c.fontSize) || '14px',
         fontWeight: ((_e = (_d = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _d === void 0 ? void 0 : _d.bodyMedium) === null || _e === void 0 ? void 0 : _e.fontWeight) || 400,
         lineHeight: ((_g = (_f = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _f === void 0 ? void 0 : _f.bodyMedium) === null || _g === void 0 ? void 0 : _g.lineHeight) || '18px',
+        wordSpacing: '-5px',
         color: ((_j = (_h = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _h === void 0 ? void 0 : _h.natural) === null || _j === void 0 ? void 0 : _j.dim) || '#13131b',
         textAlign: 'center',
         flex: 1,
@@ -2944,6 +3050,7 @@ const RangeLabel = styles.styled(material.Typography)(({ theme }) => {
         fontSize: ((_c = (_b = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _b === void 0 ? void 0 : _b.smallText) === null || _c === void 0 ? void 0 : _c.fontSize) || '8px',
         fontWeight: ((_e = (_d = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _d === void 0 ? void 0 : _d.smallText) === null || _e === void 0 ? void 0 : _e.fontWeight) || 500,
         lineHeight: ((_g = (_f = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _f === void 0 ? void 0 : _f.smallText) === null || _g === void 0 ? void 0 : _g.lineHeight) || '16px',
+        wordSpacing: '-5px',
         color: ((_j = (_h = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _h === void 0 ? void 0 : _h.natural) === null || _j === void 0 ? void 0 : _j.main) || '#929094',
     });
 });
@@ -3159,6 +3266,7 @@ const ProgressText = styles.styled(material.Typography)({
     color: '#5F5E62',
     fontWeight: 400,
     lineHeight: '16px',
+    wordSpacing: '-5px',
 });
 
 const CheckoutProgress = ({ currentStep, totalSteps, onBack, showBackButton = true, progressBarTheme, sx, }) => {
@@ -3201,12 +3309,14 @@ const ProductName = styles.styled(material.Typography)({
     fontWeight: 600,
     color: '#13131B',
     lineHeight: '20px',
+    wordSpacing: '-5px',
 });
 const PlanName = styles.styled(material.Typography)({
     fontSize: '12px',
     fontWeight: 400,
     color: '#13131B',
     lineHeight: '16px',
+    wordSpacing: '-5px',
 });
 const PriceContainer = styles.styled(material.Box)({
     display: 'flex',
@@ -3218,12 +3328,14 @@ const Price = styles.styled(material.Typography)({
     fontWeight: 600,
     color: '#13131B',
     lineHeight: '20px',
+    wordSpacing: '-5px',
 });
 const PricePeriod = styles.styled(material.Typography)({
     fontSize: '12px',
     fontWeight: 400,
     color: '#13131B',
     lineHeight: '16px',
+    wordSpacing: '-5px',
 });
 
 const ProductCard = ({ productName, planName, logoUrl, price, currency = 'RM', period = '/month', sx, showIndicator = true, }) => {
@@ -3243,6 +3355,7 @@ const SectionTitle$2 = styles.styled(material.Typography)({
     fontWeight: 700,
     color: '#13131B',
     lineHeight: '28px',
+    wordSpacing: '-5px',
     marginBottom: '8px',
 });
 const SectionDescription = styles.styled(material.Typography)({
@@ -3250,6 +3363,7 @@ const SectionDescription = styles.styled(material.Typography)({
     fontWeight: 400,
     color: '#5F5E62',
     lineHeight: '18px',
+    wordSpacing: '-5px',
 });
 
 const CheckoutHeader = ({ progress, product, sectionTitle, sectionDescription, sticky = true, progressBarTheme, sx, }) => {
@@ -3291,6 +3405,7 @@ const StyledButton = styles.styled('button')(({ isDisabled, desktopWidth }) => (
     fontSize: '14px',
     fontWeight: 500,
     lineHeight: '18px',
+    wordSpacing: '-5px',
     cursor: isDisabled ? 'not-allowed' : 'pointer',
     transition: 'all 0.2s ease',
     '&:hover': {
@@ -3321,6 +3436,7 @@ const QuestionText = styles.styled(material.Typography)({
     fontWeight: 400,
     color: '#13131B',
     lineHeight: '24px',
+    wordSpacing: '-5px',
     fontFamily: '"MetLifeCircular", "Montserrat", sans-serif',
 });
 const OptionsContainer = styles.styled(material.Box)({
@@ -3351,6 +3467,7 @@ styles.styled(material.Typography)(({ selected }) => ({
     fontWeight: 600,
     color: selected ? '#13131B' : '#5F5E62',
     lineHeight: '20px',
+    wordSpacing: '-5px',
 }));
 
 const HealthQuestionGroup = ({ question, questionNumber, value, onChange, error, labels = { yes: 'Yes', no: 'No' }, sx, }) => {
@@ -3402,7 +3519,7 @@ const FullWidthField$1 = styles.styled(material.Box)({
 const CheckboxContainer$1 = styles.styled(material.Box)({
     marginTop: '12px',
     '& .MuiFormControlLabel-root': {
-        alignItems: 'flex-start',
+        alignItems: 'center',
         marginLeft: 0,
     },
     '& .MuiCheckbox-root': {
@@ -3414,6 +3531,7 @@ const CheckboxLabel$1 = styles.styled(material.Typography)({
     fontWeight: 400,
     color: '#5F5E62',
     lineHeight: '18px',
+    wordSpacing: '-5px',
 });
 
 const PersonalInformationForm = ({ renderField, fields, consents, onSubmit, formRef, sx, desktopGridLayout = false, }) => {
@@ -3501,12 +3619,14 @@ const CheckboxLabel = styles.styled(material.Typography)({
     fontWeight: 400,
     color: '#5F5E62',
     lineHeight: '18px',
+    wordSpacing: '-5px',
 });
 const SectionTitle$1 = styles.styled(material.Typography)({
     fontSize: '16px',
     fontWeight: 600,
     color: '#13131B',
     lineHeight: '24px',
+    wordSpacing: '-5px',
 });
 
 const ContactDetailsForm = ({ renderField, fields, mailingFields, mailingAddressSame, onSubmit, formRef, sx, desktopGridLayout = false, }) => {
@@ -3679,7 +3799,7 @@ const FAQContainer = material.styled(material.Box)(({ theme }) => ({
     width: '100%',
     backgroundColor: '#ffffff',
     [theme.breakpoints.up('md')]: {
-        padding: '64px 32px',
+        padding: '70px 0',
         gap: '32px',
     },
 }));
@@ -3687,6 +3807,7 @@ const FAQTitle = material.styled(material.Typography)(({ theme }) => ({
     fontWeight: 700,
     fontSize: '20px',
     lineHeight: '28px',
+    wordSpacing: '-5px',
     textAlign: 'center',
     width: '100%',
     margin: 0,
@@ -3708,6 +3829,14 @@ const StyledAccordion = material.styled(material.Accordion)(({ theme }) => ({
     '&.Mui-expanded': {
         margin: 0,
     },
+    [theme.breakpoints.up('md')]: {
+        marginTop: '12px',
+        marginBottom: '12px',
+        '&.Mui-expanded': {
+            marginTop: '12px',
+            marginBottom: '12px',
+        },
+    },
 }));
 const StyledAccordionSummary = material.styled(material.AccordionSummary)(({ theme }) => ({
     minHeight: '48px',
@@ -3730,6 +3859,7 @@ const FAQQuestion = material.styled(material.Typography)(({ theme }) => ({
     fontWeight: 700,
     fontSize: '14px',
     lineHeight: '20px',
+    wordSpacing: '-5px',
     flex: 1,
     [theme.breakpoints.up('md')]: {
         fontSize: '15px',
@@ -3740,6 +3870,7 @@ const StyledAccordionDetails = material.styled(material.AccordionDetails)(({ the
     fontWeight: 400,
     fontSize: '14px',
     lineHeight: '20px',
+    wordSpacing: '-5px',
     padding: '0 0 16px 0',
     [theme.breakpoints.up('md')]: {
         fontSize: '15px',
@@ -3800,13 +3931,14 @@ const SectionContainer = material.styled(material.Box)(({ theme }) => ({
     width: '100%',
     backgroundColor: '#ffffff',
     [theme.breakpoints.up('md')]: {
-        padding: '64px 32px',
+        padding: '70px 0',
         gap: '40px',
     },
 }));
 const SectionTitle = material.styled(material.Typography)(({ theme }) => ({
     fontWeight: 700,
     fontSize: '20px',
+    wordSpacing: '-5px',
     lineHeight: '28px',
     textAlign: 'center',
     width: '100%',
@@ -3822,7 +3954,7 @@ const BenefitsList = material.styled(material.Box)(({ theme }) => ({
     gap: '16px',
     width: '100%',
     [theme.breakpoints.up('md')]: {
-        gap: '24px',
+        gap: '16px',
     },
 }));
 const BenefitItemContainer = material.styled(material.Box)(({ theme }) => ({
@@ -3831,7 +3963,7 @@ const BenefitItemContainer = material.styled(material.Box)(({ theme }) => ({
     alignItems: 'flex-start',
     width: '100%',
     [theme.breakpoints.up('md')]: {
-        gap: '16px',
+        gap: '6px',
     },
 }));
 const BenefitIcon = material.styled(material.Box)({
@@ -3850,6 +3982,7 @@ const BenefitTitle = material.styled(material.Typography)(({ theme }) => ({
     fontWeight: 700,
     fontSize: '14px',
     lineHeight: '20px',
+    wordSpacing: '-5px',
     margin: 0,
     [theme.breakpoints.up('md')]: {
         fontSize: '18px',
@@ -3860,6 +3993,7 @@ const BenefitDescription = material.styled(material.Typography)(({ theme }) => (
     fontWeight: 400,
     fontSize: '14px',
     lineHeight: '18px',
+    wordSpacing: '-5px',
     margin: 0,
     [theme.breakpoints.up('md')]: {
         fontSize: '16px',