igloo-d2c-components 1.0.28 → 1.0.30

package/dist/esm/index.js

@@ -331,7 +331,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: {
@@ -870,11 +870,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)
@@ -892,7 +893,7 @@ const designColors = {
  * Main AppBar container
  * Height: 80px, white background, centered content
  */
-const StyledAppBar$2 = styled(AppBar)(({ theme }) => ({
+const StyledAppBar$2 = styled(AppBar)(() => ({
     backgroundColor: designColors.natural.light00,
     boxShadow: 'none',
     position: 'fixed',
@@ -922,13 +923,12 @@ const HeaderContainer$1 = styled(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 = styled(Box)({
     display: 'flex',
     alignItems: 'center',
-    gap: '32px',
     height: '100%',
 });
 /**
@@ -943,11 +943,11 @@ const LogoContainer$2 = styled(Box)({
 });
 /**
  * Logo image
- * Width: 126px, height: 16px (per Figma)
+ * Width: 126px, height: 16px (per Figma node 1328:28463)
  */
 const LogoImage$1 = styled('img')({
-    width: '94px',
-    height: '32px',
+    width: '126px',
+    height: '16px',
     objectFit: 'contain',
 });
 /**
@@ -965,7 +965,7 @@ styled(Box)({
  * Font: MetLife Circular Bold, 18px, color: #13131B
  * Padding: 10px horizontal (creates visual spacing between items)
  */
-const MenuItemButton = styled(Button$1)(({ theme }) => ({
+const MenuItemButton = styled(Button$1)(() => ({
     display: 'flex',
     alignItems: 'center',
     gap: '8px',
@@ -979,6 +979,7 @@ const MenuItemButton = styled(Button$1)(({ theme }) => ({
     fontSize: '18px',
     lineHeight: '24px',
     letterSpacing: '0px',
+    wordSpacing: '-5px',
     borderRadius: 0,
     '&:hover': {
         backgroundColor: 'transparent',
@@ -995,6 +996,7 @@ const MenuItemText = styled(Typography)({
     fontSize: '18px',
     lineHeight: '24px',
     letterSpacing: '0px',
+    wordSpacing: '-5px',
     color: 'inherit',
 });
 /**
@@ -1007,19 +1009,22 @@ const DropdownIcon = 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 = styled(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 = styled(Button$1)(({ theme }) => ({
+styled(Button$1)(() => ({
     display: 'flex',
     alignItems: 'center',
     padding: '0 10px',
@@ -1032,6 +1037,7 @@ const LoginButton = styled(Button$1)(({ theme }) => ({
     fontSize: '18px',
     lineHeight: '24px',
     letterSpacing: '0px',
+    wordSpacing: '-5px',
     borderRadius: 0,
     backgroundColor: 'transparent',
     '&:hover': {
@@ -1039,10 +1045,41 @@ const LoginButton = styled(Button$1)(({ 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 = styled(Button$1)(() => ({
+    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 = styled(Menu)(({ theme }) => ({
+const StyledMenu$1 = styled(Menu)(() => ({
     '& .MuiPaper-root': {
         borderRadius: '16px',
         marginTop: '8px',
@@ -1053,7 +1090,7 @@ const StyledMenu$1 = styled(Menu)(({ theme }) => ({
 /**
  * Dropdown menu item
  */
-const StyledMenuItem$1 = styled(MenuItem)(({ theme }) => ({
+const StyledMenuItem$1 = styled(MenuItem)(() => ({
     display: 'flex',
     alignItems: 'center',
     gap: '12px',
@@ -1062,6 +1099,7 @@ const StyledMenuItem$1 = styled(MenuItem)(({ theme }) => ({
     fontWeight: 500,
     fontSize: '16px',
     lineHeight: '24px',
+    wordSpacing: '-5px',
     color: designColors.natural.dim100,
     '&:hover': {
         backgroundColor: 'rgba(0, 144, 218, 0.08)',
@@ -1076,28 +1114,65 @@ const MenuItemIcon = 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.useState(null);
     const [anchorEl, setAnchorEl] = React.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();
             }
@@ -1127,7 +1202,18 @@ function DesktopHeaderMenuBar({ logo, logoAlt = 'Logo', menuItems, showLoginButt
         e.preventDefault();
         onLogoClick === null || onLogoClick === void 0 ? void 0 : onLogoClick();
     };
-    return (jsx(StyledAppBar$2, Object.assign({ className: className }, { children: jsxs(HeaderContainer$1, { children: [jsxs(LeftSection, { children: [jsx(LogoContainer$2, Object.assign({ onClick: handleLogoClick }, { children: jsx(LogoImage$1, { src: logo, alt: logoAlt }) })), menuItems.map((item) => (jsxs(React.Fragment, { children: [jsxs(MenuItemButton, Object.assign({ onClick: (e) => handleMenuClick(e, item), "aria-haspopup": item.hasDropdown ? 'true' : undefined, "aria-expanded": item.hasDropdown ? openMenuKey === item.key : undefined, "data-testid": `menu-item-${item.key}` }, { children: [jsx(MenuItemText, { children: formatMessage({ id: item.label }) }), item.hasDropdown && jsx(DropdownIcon, {})] })), item.hasDropdown && item.subItems && (jsx(StyledMenu$1, Object.assign({ id: `menu-${item.key}`, anchorEl: anchorEl, open: openMenuKey === item.key, onClose: handleCloseMenu, anchorOrigin: {
+    const handleCtaButtonClick = () => {
+        if (ctaScrollTargetId) {
+            if (onScrollToSection) {
+                onScrollToSection(ctaScrollTargetId);
+            }
+            else {
+                scrollToElement(ctaScrollTargetId);
+            }
+        }
+        handleCtaClick === null || handleCtaClick === void 0 ? void 0 : handleCtaClick();
+    };
+    return (jsx(StyledAppBar$2, Object.assign({ className: className }, { children: jsxs(HeaderContainer$1, { children: [jsx(LeftSection, { children: jsx(LogoContainer$2, Object.assign({ onClick: handleLogoClick }, { children: jsx(LogoImage$1, { src: logo, alt: logoAlt }) })) }), jsxs(RightSection, { children: [menuItems.map((item) => (jsxs(React.Fragment, { children: [jsxs(MenuItemButton, Object.assign({ onClick: (e) => handleMenuClick(e, item), "aria-haspopup": item.hasDropdown ? 'true' : undefined, "aria-expanded": item.hasDropdown ? openMenuKey === item.key : undefined, "data-testid": `menu-item-${item.key}` }, { children: [jsx(MenuItemText, { children: formatMessage({ id: item.label }) }), item.hasDropdown && jsx(DropdownIcon, {})] })), item.hasDropdown && item.subItems && (jsx(StyledMenu$1, Object.assign({ id: `menu-${item.key}`, anchorEl: anchorEl, open: openMenuKey === item.key, onClose: handleCloseMenu, anchorOrigin: {
                                         vertical: 'bottom',
                                         horizontal: 'left',
                                     }, transformOrigin: {
@@ -1135,7 +1221,7 @@ function DesktopHeaderMenuBar({ logo, logoAlt = 'Logo', menuItems, showLoginButt
                                         horizontal: 'left',
                                     }, MenuListProps: {
                                         'aria-labelledby': `menu-button-${item.key}`,
-                                    } }, { children: item.subItems.map((subItem) => (jsxs(StyledMenuItem$1, Object.assign({ onClick: () => handleSubItemClick(item, subItem.key), "data-testid": `submenu-item-${subItem.key}` }, { children: [subItem.icon && (jsx(MenuItemIcon, { src: subItem.icon, alt: subItem.label })), formatMessage({ id: subItem.label })] }), subItem.key))) })))] }, item.key)))] }), jsx(RightSection, { children: showLoginButton && (jsx(LoginButton, Object.assign({ onClick: onLoginClick, "data-testid": "header-login-button" }, { children: formatMessage({ id: loginButtonText }) }))) })] }) })));
+                                    } }, { children: item.subItems.map((subItem) => (jsxs(StyledMenuItem$1, Object.assign({ onClick: () => handleSubItemClick(item, subItem.key), "data-testid": `submenu-item-${subItem.key}` }, { children: [subItem.icon && (jsx(MenuItemIcon, { src: subItem.icon, alt: subItem.label })), formatMessage({ id: subItem.label })] }), subItem.key))) })))] }, item.key))), shouldShowCtaButton && (jsx(PurchaseButton, Object.assign({ onClick: handleCtaButtonClick, "data-testid": "header-cta-button" }, { children: formatMessage({ id: ctaText }) })))] })] }) })));
 }
 
 const StyledAppBar$1 = styled(AppBar)(({ theme, ispartnershippagemobileview, scrolled }) => {
@@ -1501,7 +1587,7 @@ const TypographyBtnText = styled(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;
@@ -1548,12 +1634,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 (jsx(DesktopHeaderMenuBar, { logo: logo, logoAlt: "Logo", menuItems: convertedDesktopMenuItems, showLoginButton: !userToken, loginButtonText: "Log in", onLogoClick: onLogoClick, onLoginClick: onLoginClick, formatMessage: formatMessage }));
+        return (jsx(DesktopHeaderMenuBar, { logo: logo, logoAlt: "Logo", menuItems: convertedDesktopMenuItems, showCtaButton: showCtaButton, ctaButtonText: ctaButtonText, onCtaClick: onCtaClick, ctaScrollTargetId: ctaScrollTargetId, onScrollToSection: onScrollToSection, onLogoClick: onLogoClick, formatMessage: formatMessage }));
     }
     return (jsx(StyledAppBar$1, Object.assign({ ispartnershippagemobileview: isPartnershipPageMobileView, scrolled: scrolled }, { children: jsx(ResponsiveB2CLayout, { children: jsx(StyledContainer, Object.assign({ ispartnershippagemobileview: isPartnershipPageMobileView, scrolled: scrolled, maxWidth: "xl" }, { children: jsxs(Toolbar, Object.assign({ disableGutters: true }, { children: [jsx("a", Object.assign({ href: host || '#', onClick: (e) => {
                                 e === null || e === void 0 ? void 0 : e.preventDefault();
@@ -2032,6 +2120,7 @@ const TitleText = styled(Typography)(({ theme }) => ({
     fontWeight: 700,
     fontSize: '28px',
     lineHeight: '28px',
+    wordSpacing: '-5px',
     color: '#13131B',
     [theme.breakpoints.down('md')]: {
         fontSize: '20px',
@@ -2042,6 +2131,7 @@ const SubtitleText = styled(Typography)(({ theme }) => ({
     fontWeight: 400,
     fontSize: '14px',
     lineHeight: '18px',
+    wordSpacing: '-5px',
     color: '#5F5E62',
 }));
 const FooterButtons = styled(Box)(({ theme }) => ({
@@ -2059,6 +2149,7 @@ const PrimaryButton = styled(Button$1)(({ theme }) => ({
     fontWeight: 500,
     fontSize: '14px',
     lineHeight: '18px',
+    wordSpacing: '-5px',
     '&:disabled': {
         backgroundColor: '#C8C5CA',
         color: '#FFFFFF',
@@ -2071,6 +2162,7 @@ const SecondaryButton = styled(Button$1)(({ theme }) => ({
     fontWeight: 500,
     fontSize: '14px',
     lineHeight: '18px',
+    wordSpacing: '-5px',
 }));
 
 /**
@@ -2179,6 +2271,7 @@ const HeaderTitle = styled$1(Typography)({
     fontSize: '20px',
     fontWeight: 700,
     lineHeight: '28px',
+    wordSpacing: '-5px',
     color: '#13131b',
 });
 const HeaderSubtitle = styled$1(Typography)({
@@ -2186,6 +2279,7 @@ const HeaderSubtitle = styled$1(Typography)({
     fontSize: '14px',
     fontWeight: 400,
     lineHeight: '18px',
+    wordSpacing: '-5px',
     color: 'rgba(0, 0, 0, 0.6)',
 });
 const ProductsContainer = styled$1(Box)({
@@ -2226,6 +2320,7 @@ const ProductName$1 = styled$1(Typography)({
     fontSize: '14px',
     fontWeight: 700,
     lineHeight: '22px',
+    wordSpacing: '-5px',
     color: '#13131b',
     textAlign: 'center',
 });
@@ -2234,6 +2329,7 @@ const ProductType = styled$1(Typography)({
     fontSize: '12px',
     fontWeight: 400,
     lineHeight: '16px',
+    wordSpacing: '-5px',
     color: '#13131b',
     textAlign: 'center',
 });
@@ -2247,6 +2343,7 @@ const ViewPlansButton = styled$1(Button$1)({
     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', }) {
@@ -2289,6 +2386,7 @@ const QuestionTitle = styled(Typography)(({ theme }) => ({
     fontWeight: 700,
     fontSize: '18px',
     lineHeight: '24px',
+    wordSpacing: '-5px',
     color: '#13131B',
     [theme.breakpoints.down('md')]: {
         fontSize: '14px',
@@ -2299,6 +2397,7 @@ const QuestionSubtext = styled(Typography)(({ theme }) => ({
     fontWeight: 400,
     fontSize: '16px',
     lineHeight: '20px',
+    wordSpacing: '-5px',
     color: '#5F5E62',
     [theme.breakpoints.down('md')]: {
         fontSize: '12px',
@@ -2427,6 +2526,7 @@ const OptionLabel = styled(Typography)(({ theme, selected, colorVariant = 'defau
         fontWeight: selected ? 700 : 500,
         fontSize: '14px',
         lineHeight: '20px',
+        wordSpacing: '0px',
         color: selected ? '#0090DA' : colors.unselectedText,
         textAlign: 'center',
         fontFamily: '"MetLifeCircular", "Montserrat", sans-serif',
@@ -2506,6 +2606,7 @@ const ToggleLabel = styled(Typography)(({ theme, selected }) => ({
     fontWeight: 600,
     fontSize: '14px',
     lineHeight: '20px',
+    wordSpacing: '-5px',
     color: selected ? '#FEFBFF' : '#5F5E62',
     whiteSpace: 'nowrap',
 }));
@@ -2654,6 +2755,7 @@ const ToggleText = styled(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',
     });
 });
 
@@ -2732,6 +2834,7 @@ const CalloutTitle = styled(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',
@@ -2747,6 +2850,7 @@ const CalloutText = styled(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',
@@ -2809,6 +2913,7 @@ const InputLabel = styled(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',
     });
 });
@@ -2836,6 +2941,7 @@ const InputValue = styled(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,
@@ -2924,6 +3030,7 @@ const RangeLabel = styled(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',
     });
 });
@@ -3139,6 +3246,7 @@ const ProgressText = styled(Typography)({
     color: '#5F5E62',
     fontWeight: 400,
     lineHeight: '16px',
+    wordSpacing: '-5px',
 });
 
 const CheckoutProgress = ({ currentStep, totalSteps, onBack, showBackButton = true, progressBarTheme, sx, }) => {
@@ -3181,12 +3289,14 @@ const ProductName = styled(Typography)({
     fontWeight: 600,
     color: '#13131B',
     lineHeight: '20px',
+    wordSpacing: '-5px',
 });
 const PlanName = styled(Typography)({
     fontSize: '12px',
     fontWeight: 400,
     color: '#13131B',
     lineHeight: '16px',
+    wordSpacing: '-5px',
 });
 const PriceContainer = styled(Box)({
     display: 'flex',
@@ -3198,12 +3308,14 @@ const Price = styled(Typography)({
     fontWeight: 600,
     color: '#13131B',
     lineHeight: '20px',
+    wordSpacing: '-5px',
 });
 const PricePeriod = styled(Typography)({
     fontSize: '12px',
     fontWeight: 400,
     color: '#13131B',
     lineHeight: '16px',
+    wordSpacing: '-5px',
 });
 
 const ProductCard = ({ productName, planName, logoUrl, price, currency = 'RM', period = '/month', sx, showIndicator = true, }) => {
@@ -3223,6 +3335,7 @@ const SectionTitle$2 = styled(Typography)({
     fontWeight: 700,
     color: '#13131B',
     lineHeight: '28px',
+    wordSpacing: '-5px',
     marginBottom: '8px',
 });
 const SectionDescription = styled(Typography)({
@@ -3230,6 +3343,7 @@ const SectionDescription = styled(Typography)({
     fontWeight: 400,
     color: '#5F5E62',
     lineHeight: '18px',
+    wordSpacing: '-5px',
 });
 
 const CheckoutHeader = ({ progress, product, sectionTitle, sectionDescription, sticky = true, progressBarTheme, sx, }) => {
@@ -3271,6 +3385,7 @@ const StyledButton = styled('button')(({ isDisabled, desktopWidth }) => ({
     fontSize: '14px',
     fontWeight: 500,
     lineHeight: '18px',
+    wordSpacing: '-5px',
     cursor: isDisabled ? 'not-allowed' : 'pointer',
     transition: 'all 0.2s ease',
     '&:hover': {
@@ -3301,6 +3416,7 @@ const QuestionText = styled(Typography)({
     fontWeight: 400,
     color: '#13131B',
     lineHeight: '24px',
+    wordSpacing: '-5px',
     fontFamily: '"MetLifeCircular", "Montserrat", sans-serif',
 });
 const OptionsContainer = styled(Box)({
@@ -3331,6 +3447,7 @@ styled(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, }) => {
@@ -3382,7 +3499,7 @@ const FullWidthField$1 = styled(Box)({
 const CheckboxContainer$1 = styled(Box)({
     marginTop: '12px',
     '& .MuiFormControlLabel-root': {
-        alignItems: 'flex-start',
+        alignItems: 'center',
         marginLeft: 0,
     },
     '& .MuiCheckbox-root': {
@@ -3394,6 +3511,7 @@ const CheckboxLabel$1 = styled(Typography)({
     fontWeight: 400,
     color: '#5F5E62',
     lineHeight: '18px',
+    wordSpacing: '-5px',
 });
 
 const PersonalInformationForm = ({ renderField, fields, consents, onSubmit, formRef, sx, desktopGridLayout = false, }) => {
@@ -3481,12 +3599,14 @@ const CheckboxLabel = styled(Typography)({
     fontWeight: 400,
     color: '#5F5E62',
     lineHeight: '18px',
+    wordSpacing: '-5px',
 });
 const SectionTitle$1 = styled(Typography)({
     fontSize: '16px',
     fontWeight: 600,
     color: '#13131B',
     lineHeight: '24px',
+    wordSpacing: '-5px',
 });
 
 const ContactDetailsForm = ({ renderField, fields, mailingFields, mailingAddressSame, onSubmit, formRef, sx, desktopGridLayout = false, }) => {
@@ -3659,7 +3779,7 @@ const FAQContainer = styled$1(Box)(({ theme }) => ({
     width: '100%',
     backgroundColor: '#ffffff',
     [theme.breakpoints.up('md')]: {
-        padding: '64px 32px',
+        padding: '70px 0',
         gap: '32px',
     },
 }));
@@ -3667,6 +3787,7 @@ const FAQTitle = styled$1(Typography)(({ theme }) => ({
     fontWeight: 700,
     fontSize: '20px',
     lineHeight: '28px',
+    wordSpacing: '-5px',
     textAlign: 'center',
     width: '100%',
     margin: 0,
@@ -3688,6 +3809,14 @@ const StyledAccordion = styled$1(Accordion)(({ theme }) => ({
     '&.Mui-expanded': {
         margin: 0,
     },
+    [theme.breakpoints.up('md')]: {
+        marginTop: '12px',
+        marginBottom: '12px',
+        '&.Mui-expanded': {
+            marginTop: '12px',
+            marginBottom: '12px',
+        },
+    },
 }));
 const StyledAccordionSummary = styled$1(AccordionSummary)(({ theme }) => ({
     minHeight: '48px',
@@ -3710,6 +3839,7 @@ const FAQQuestion = styled$1(Typography)(({ theme }) => ({
     fontWeight: 700,
     fontSize: '14px',
     lineHeight: '20px',
+    wordSpacing: '-5px',
     flex: 1,
     [theme.breakpoints.up('md')]: {
         fontSize: '15px',
@@ -3720,6 +3850,7 @@ const StyledAccordionDetails = styled$1(AccordionDetails)(({ theme }) => ({
     fontWeight: 400,
     fontSize: '14px',
     lineHeight: '20px',
+    wordSpacing: '-5px',
     padding: '0 0 16px 0',
     [theme.breakpoints.up('md')]: {
         fontSize: '15px',
@@ -3780,13 +3911,14 @@ const SectionContainer = styled$1(Box)(({ theme }) => ({
     width: '100%',
     backgroundColor: '#ffffff',
     [theme.breakpoints.up('md')]: {
-        padding: '64px 32px',
+        padding: '70px 0',
         gap: '40px',
     },
 }));
 const SectionTitle = styled$1(Typography)(({ theme }) => ({
     fontWeight: 700,
     fontSize: '20px',
+    wordSpacing: '-5px',
     lineHeight: '28px',
     textAlign: 'center',
     width: '100%',
@@ -3802,7 +3934,7 @@ const BenefitsList = styled$1(Box)(({ theme }) => ({
     gap: '16px',
     width: '100%',
     [theme.breakpoints.up('md')]: {
-        gap: '24px',
+        gap: '16px',
     },
 }));
 const BenefitItemContainer = styled$1(Box)(({ theme }) => ({
@@ -3811,7 +3943,7 @@ const BenefitItemContainer = styled$1(Box)(({ theme }) => ({
     alignItems: 'flex-start',
     width: '100%',
     [theme.breakpoints.up('md')]: {
-        gap: '16px',
+        gap: '6px',
     },
 }));
 const BenefitIcon = styled$1(Box)({
@@ -3830,6 +3962,7 @@ const BenefitTitle = styled$1(Typography)(({ theme }) => ({
     fontWeight: 700,
     fontSize: '14px',
     lineHeight: '20px',
+    wordSpacing: '-5px',
     margin: 0,
     [theme.breakpoints.up('md')]: {
         fontSize: '18px',
@@ -3840,6 +3973,7 @@ const BenefitDescription = styled$1(Typography)(({ theme }) => ({
     fontWeight: 400,
     fontSize: '14px',
     lineHeight: '18px',
+    wordSpacing: '-5px',
     margin: 0,
     [theme.breakpoints.up('md')]: {
         fontSize: '16px',