igloo-d2c-components 1.0.51 → 1.0.53-non-prod

package/dist/cjs/index.js

@@ -738,7 +738,7 @@ function useIsTenant(checkTenantId) {
  * <Button color="primary">Click Me</Button>
  * ```
  */
-function Button({ tenantColored = false, variant = 'contained', sx, color, ...props }) {
+const Button = React__namespace.default.memo(function Button({ tenantColored = false, variant = 'contained', sx, color, ...props }) {
     const tenantTheme = useTenantTheme();
     const theme = tenantTheme?.theme;
     const baseWordSpacingSx = { wordSpacing: '0px' };
@@ -757,7 +757,7 @@ function Button({ tenantColored = false, variant = 'contained', sx, color, ...pr
             ...sx,
         };
     return (jsxRuntime.jsx(material.Button, { variant: variant, color: tenantColored ? undefined : color, sx: buttonSx, ...props }));
-}
+});
 
 /**
  * Card component with tenant theme support
@@ -772,7 +772,7 @@ function Button({ tenantColored = false, variant = 'contained', sx, color, ...pr
  * />
  * ```
  */
-function Card({ title, headerAction, content, actions, tenantAccent = false, sx, children, ...props }) {
+const Card = React__namespace.default.memo(function Card({ title, headerAction, content, actions, tenantAccent = false, sx, children, ...props }) {
     const tenantTheme = useTenantTheme();
     const theme = tenantTheme?.theme;
     const cardSx = tenantAccent && theme
@@ -782,7 +782,7 @@ function Card({ title, headerAction, content, actions, tenantAccent = false, sx,
         }
         : sx;
     return (jsxRuntime.jsxs(material.Card, { sx: cardSx, ...props, children: [title && jsxRuntime.jsx(material.CardHeader, { title: title, action: headerAction }), (content || children) && (jsxRuntime.jsx(material.CardContent, { children: content || children })), actions && jsxRuntime.jsx(material.CardActions, { children: actions })] }));
-}
+});
 
 /**
  * Banner component with tenant theme support
@@ -797,7 +797,7 @@ function Card({ title, headerAction, content, actions, tenantAccent = false, sx,
  * />
  * ```
  */
-function Banner({ title, description, action, gradient = true, sx, ...props }) {
+const Banner = React__namespace.default.memo(function Banner({ title, description, action, gradient = true, sx, ...props }) {
     const tenantTheme = useTenantTheme();
     const theme = tenantTheme?.theme;
     const primaryColor = theme?.palette?.primary?.main || '#000000';
@@ -813,6 +813,54 @@ function Banner({ title, description, action, gradient = true, sx, ...props }) {
             textAlign: 'center',
             ...sx,
         }, ...props, children: [jsxRuntime.jsx(material.Typography, { variant: "h4", component: "h2", gutterBottom: true, fontWeight: "bold", children: title }), description && (jsxRuntime.jsx(material.Typography, { variant: "body1", sx: { opacity: 0.95, mb: action ? 2 : 0 }, children: description })), action && jsxRuntime.jsx(material.Box, { sx: { mt: 2 }, children: action })] }));
+});
+
+/**
+ * Component Resolver Utility
+ * Handles resolution of ES modules that may have default exports
+ * Provides type-safe resolution for MUI icons and other components
+ */
+/**
+ * Recursively resolves a component that may be wrapped in default exports
+ * This handles cases where module bundlers wrap exports differently
+ *
+ * @param component - Component or module to resolve
+ * @returns The resolved component
+ *
+ * @example
+ * ```typescript
+ * import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
+ * const ResolvedIcon = resolveComponent(ArrowDropDownIcon);
+ * <ResolvedIcon />
+ * ```
+ */
+function resolveComponent(component) {
+    let resolved = component;
+    // Unwrap nested default exports
+    while (resolved &&
+        typeof resolved === 'object' &&
+        'default' in resolved) {
+        resolved = resolved.default;
+    }
+    return resolved;
+}
+/**
+ * Type-safe resolver specifically for MUI SvgIcon components
+ *
+ * @param icon - MUI icon component to resolve
+ * @returns Resolved icon component
+ */
+function resolveSvgIcon(icon) {
+    return resolveComponent(icon);
+}
+/**
+ * Type-safe resolver for React components
+ *
+ * @param component - React component to resolve
+ * @returns Resolved component
+ */
+function resolveReactComponent(component) {
+    return resolveComponent(component);
 }
 
 /**
@@ -829,16 +877,7 @@ function Banner({ title, description, action, gradient = true, sx, ...props }) {
  * - CTA Button: Filled, #0090da, border-radius 24px, height 48px
  * - CTA text: MetLife Circular Medium, 16px, white, line-height 20px
  */
-const resolveComponent$2 = (component) => {
-    let resolved = component;
-    while (resolved &&
-        typeof resolved === 'object' &&
-        'default' in resolved) {
-        resolved = resolved.default;
-    }
-    return resolved;
-};
-const ResolvedArrowDropDownIcon$1 = resolveComponent$2(ArrowDropDownIcon__default.default);
+const ResolvedArrowDropDownIcon$1 = resolveSvgIcon(ArrowDropDownIcon__default.default);
 /**
  * Design System Colors (from Figma node 1581-22604)
  */
@@ -1287,17 +1326,8 @@ languages = [], currentLocale, onLanguageChange, }) {
                                     }, children: languages.map((lang) => (jsxRuntime.jsx(StyledMenuItem$1, { onClick: () => handleLangSelect(lang.locale, lang.value), selected: lang.locale === currentLocale, "data-testid": `lang-${lang.locale}`, children: lang.label }, lang.value))) })] })), shouldShowCtaButton && (jsxRuntime.jsx(PurchaseButton, { onClick: handleCtaButtonClick, "data-testid": "header-cta-button", children: formatMessage({ id: ctaText }) }))] })] }) }));
 }
 
-const resolveComponent$1 = (component) => {
-    let resolved = component;
-    while (resolved &&
-        typeof resolved === 'object' &&
-        'default' in resolved) {
-        resolved = resolved.default;
-    }
-    return resolved;
-};
-const ResolvedCloseIcon$1 = resolveComponent$1(CloseIcon__default.default);
-const ResolvedMenuIcon = resolveComponent$1(MenuIcon__default.default);
+const ResolvedCloseIcon$1 = resolveSvgIcon(CloseIcon__default.default);
+const ResolvedMenuIcon = resolveSvgIcon(MenuIcon__default.default);
 const StyledAppBar$1 = styles.styled(AppBar__default.default)(({ theme, ispartnershippagemobileview, scrolled }) => ({
     zIndex: '1000 !important',
     backgroundColor: ispartnershippagemobileview && !scrolled
@@ -1589,18 +1619,9 @@ const TypographyBtnText = styles.styled(material.Typography)(({ theme }) => ({
     textTransform: 'none',
 }));
 
-function resolveComponent(component) {
-    let resolved = component;
-    while (resolved &&
-        typeof resolved === 'object' &&
-        'default' in resolved) {
-        resolved = resolved.default;
-    }
-    return resolved;
-}
-const ResolvedArrowDropDownIcon = resolveComponent(ArrowDropDownIcon__default.default);
-const ResolvedCloseIcon = resolveComponent(CloseIcon__default.default);
-const ResolvedDesktopHeaderMenuBar = resolveComponent(DesktopHeaderMenuBar);
+const ResolvedArrowDropDownIcon = resolveSvgIcon(ArrowDropDownIcon__default.default);
+const ResolvedCloseIcon = resolveSvgIcon(CloseIcon__default.default);
+const ResolvedDesktopHeaderMenuBar = resolveReactComponent(DesktopHeaderMenuBar);
 /**
  * Header component with tenant theme support and responsive navigation
  *
@@ -3205,8 +3226,8 @@ const CalloutHeader = styles.styled(material.Box)(() => ({
     alignItems: 'center',
 }));
 const CalloutIcon = styles.styled(InfoIcon__default.default)(({ theme }) => ({
-    width: '20px',
-    height: '20px',
+    width: '100%',
+    height: '100%',
     color: theme?.palette?.natural?.dim || '#13131b',
 }));
 const CalloutTitle = styles.styled(material.Typography)(({ theme }) => ({
@@ -3246,7 +3267,7 @@ const CalloutText = styles.styled(material.Typography)(({ theme }) => ({
  * </InfoCallout>
  * ```
  */
-function InfoCallout({ title = 'Helpful tip', children, formatMessage = (descriptor) => descriptor.defaultMessage || descriptor.id, }) {
+const InfoCallout = React__namespace.memo(function InfoCallout({ title = 'Helpful tip', children, formatMessage = (descriptor) => descriptor.defaultMessage || descriptor.id, }) {
     // Safely get theme, handle SSR case where it might be undefined
     const tenantTheme = useTenantTheme();
     const theme = tenantTheme?.theme;
@@ -3262,7 +3283,7 @@ function InfoCallout({ title = 'Helpful tip', children, formatMessage = (descrip
                             id: title,
                             defaultMessage: title,
                         }) })] }), jsxRuntime.jsx(CalloutText, { sx: { color: subtitleColor }, children: children })] }));
-}
+});
 
 const SliderContainer = styles.styled(material.Box)(({ theme }) => ({
     display: 'flex',
@@ -3674,9 +3695,9 @@ const PricePeriod = styles.styled(material.Typography)({
     wordSpacing: '0px',
 });
 
-const ProductCard = ({ productName, planName, logoUrl, price, currency = 'RM', period = '/month', sx, showIndicator = true, }) => {
+const ProductCard = React__namespace.memo(function ProductCard({ productName, planName, logoUrl, price, currency = 'RM', period = '/month', sx, showIndicator = true, }) {
     return (jsxRuntime.jsxs(ProductCardContainer, { sx: sx, showIndicator: showIndicator, children: [logoUrl && (jsxRuntime.jsx(LogoContainer, { children: jsxRuntime.jsx("img", { src: logoUrl, alt: productName, style: { maxWidth: '100%', maxHeight: '100%' } }) })), jsxRuntime.jsxs(ProductInfo, { children: [jsxRuntime.jsx(ProductName, { children: productName }), planName && jsxRuntime.jsx(PlanName, { children: planName })] }), jsxRuntime.jsxs(PriceContainer, { children: [jsxRuntime.jsxs(Price, { children: [currency, " ", price] }), jsxRuntime.jsx(PricePeriod, { children: period })] })] }));
-};
+});
 
 const HeaderContainer = styles.styled(material.Box)(({ sticky }) => ({
     ...(sticky && {
@@ -4297,7 +4318,7 @@ function FAQAccordion({ faqs, title = 'Frequently Asked Questions', formatMessag
     const textColor = getThemeColor(theme, 'natural.dim', '#13131b');
     const subtitleColor = getThemeColor(theme, 'natural.dark', '#5f5e62');
     const bgColor = backgroundColor || getThemeColor(theme, 'natural.light', '#ffffff');
-    const handleChange = (panel) => (event, isExpanded) => {
+    const handleChange = (panel) => (_event, isExpanded) => {
         setExpanded(isExpanded ? panel : false);
         onAccordionChange?.(panel, isExpanded);
     };
@@ -4439,6 +4460,89 @@ function BenefitsSummary({ benefits, title = 'Benefits Summary', formatMessage =
                             }, children: renderIcon(benefit.icon) }), jsxRuntime.jsxs(BenefitContent, { children: [jsxRuntime.jsx(BenefitTitle, { sx: { color: textColor }, children: benefit.title }), jsxRuntime.jsx(BenefitDescription, { sx: { color: subtitleColor }, children: renderDescription(benefit.description) })] })] }, benefit.id))) })] }));
 }
 
+/**
+ * ErrorBoundary - Catches React errors in child component tree
+ *
+ * @example
+ * ```tsx
+ * <ErrorBoundary fallback={<div>Something went wrong</div>}>
+ *   <MyComponent />
+ * </ErrorBoundary>
+ * ```
+ */
+class ErrorBoundary extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            hasError: false,
+            error: null,
+        };
+    }
+    static getDerivedStateFromError(error) {
+        return {
+            hasError: true,
+            error,
+        };
+    }
+    componentDidCatch(error, errorInfo) {
+        const { onError, componentName } = this.props;
+        // Log error to console in development
+        if (process.env.NODE_ENV === 'development') {
+            console.error(`ErrorBoundary caught an error${componentName ? ` in ${componentName}` : ''}:`, error, errorInfo);
+        }
+        // Call custom error handler if provided
+        if (onError) {
+            onError(error, errorInfo);
+        }
+    }
+    render() {
+        const { hasError, error } = this.state;
+        const { children, fallback, componentName } = this.props;
+        if (hasError) {
+            // Use custom fallback if provided
+            if (fallback) {
+                return fallback;
+            }
+            // Default fallback UI
+            return (jsxRuntime.jsxs("div", { style: {
+                    padding: '20px',
+                    border: '1px solid #ff6b6b',
+                    borderRadius: '8px',
+                    backgroundColor: '#fff5f5',
+                    color: '#c92a2a',
+                    fontFamily: 'system-ui, -apple-system, sans-serif',
+                }, children: [jsxRuntime.jsx("h3", { style: { margin: '0 0 10px 0', fontSize: '16px', fontWeight: 600 }, children: componentName ? `Error in ${componentName}` : 'Something went wrong' }), process.env.NODE_ENV === 'development' && error && (jsxRuntime.jsxs("details", { style: { marginTop: '10px', fontSize: '14px' }, children: [jsxRuntime.jsx("summary", { style: { cursor: 'pointer', userSelect: 'none' }, children: "Error details" }), jsxRuntime.jsx("pre", { style: {
+                                    marginTop: '10px',
+                                    padding: '10px',
+                                    backgroundColor: '#fff',
+                                    border: '1px solid #ffdedb',
+                                    borderRadius: '4px',
+                                    fontSize: '12px',
+                                    overflow: 'auto',
+                                }, children: error.toString() })] }))] }));
+        }
+        return children;
+    }
+}
+/**
+ * Higher-Order Component that wraps a component with an ErrorBoundary
+ *
+ * @param Component - Component to wrap
+ * @param fallback - Optional custom fallback UI
+ * @returns Wrapped component with error boundary
+ *
+ * @example
+ * ```tsx
+ * const SafeButton = withErrorBoundary(Button, <div>Button failed to render</div>);
+ * <SafeButton {...props} />
+ * ```
+ */
+function withErrorBoundary(Component, fallback) {
+    const WrappedComponent = React__namespace.default.forwardRef((props, ref) => (jsxRuntime.jsx(ErrorBoundary, { fallback: fallback, componentName: Component.displayName || Component.name, children: jsxRuntime.jsx(Component, { ...props, ref: ref }) })));
+    WrappedComponent.displayName = `withErrorBoundary(${Component.displayName || Component.name || 'Component'})`;
+    return WrappedComponent;
+}
+
 /**
  * Asset Management Utilities
  * Helper functions for managing tenant-specific assets
@@ -4634,6 +4738,7 @@ exports.ChildInformationForm = ChildInformationForm;
 exports.ContactDetailsForm = ContactDetailsForm;
 exports.CoverageAmountSlider = CoverageAmountSlider;
 exports.DesktopHeaderMenuBar = DesktopHeaderMenuBar;
+exports.ErrorBoundary = ErrorBoundary;
 exports.FAQAccordion = FAQAccordion;
 exports.Footer = Footer;
 exports.Header = Header$1;
@@ -4667,6 +4772,9 @@ exports.isStaticImageData = isStaticImageData;
 exports.isValidExternalUrl = isValidExternalUrl;
 exports.isValidTenantId = isValidTenantId;
 exports.mergeTenantTheme = mergeTenantTheme;
+exports.resolveComponent = resolveComponent;
+exports.resolveReactComponent = resolveReactComponent;
+exports.resolveSvgIcon = resolveSvgIcon;
 exports.safeWindowOpen = safeWindowOpen;
 exports.sanitizeUrl = sanitizeUrl;
 exports.tenantThemes = tenantThemes;
@@ -4677,4 +4785,4 @@ exports.useTenantFavicon = useTenantFavicon;
 exports.useTenantId = useTenantId;
 exports.useTenantLogo = useTenantLogo;
 exports.useTenantTheme = useTenantTheme;
-//# sourceMappingURL=index.js.map
+exports.withErrorBoundary = withErrorBoundary;

package/dist/esm/index.js

@@ -1,7 +1,7 @@
 "use client"
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
-import { createContext, useMemo, useContext, useState, useEffect } from 'react';
+import React__default, { createContext, useMemo, useContext, useState, useEffect, Component } from 'react';
 import { Button as Button$1, Card as Card$1, CardHeader, CardContent, CardActions, Box, Typography, Menu, MenuItem, Avatar, Drawer, IconButton, FormControlLabel, useTheme, useMediaQuery, Toolbar, RadioGroup, Radio, AppBar as AppBar$1, Divider, List, ListItem, ListItemButton, ListItemText, styled as styled$1, Dialog, ButtonBase, Slider, Checkbox, Accordion, AccordionSummary, AccordionDetails } from '@mui/material';
 import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
 import CloseIcon from '@mui/icons-material/Close';
@@ -705,7 +705,7 @@ function useIsTenant(checkTenantId) {
  * <Button color="primary">Click Me</Button>
  * ```
  */
-function Button({ tenantColored = false, variant = 'contained', sx, color, ...props }) {
+const Button = React__default.memo(function Button({ tenantColored = false, variant = 'contained', sx, color, ...props }) {
     const tenantTheme = useTenantTheme();
     const theme = tenantTheme?.theme;
     const baseWordSpacingSx = { wordSpacing: '0px' };
@@ -724,7 +724,7 @@ function Button({ tenantColored = false, variant = 'contained', sx, color, ...pr
             ...sx,
         };
     return (jsx(Button$1, { variant: variant, color: tenantColored ? undefined : color, sx: buttonSx, ...props }));
-}
+});
 
 /**
  * Card component with tenant theme support
@@ -739,7 +739,7 @@ function Button({ tenantColored = false, variant = 'contained', sx, color, ...pr
  * />
  * ```
  */
-function Card({ title, headerAction, content, actions, tenantAccent = false, sx, children, ...props }) {
+const Card = React__default.memo(function Card({ title, headerAction, content, actions, tenantAccent = false, sx, children, ...props }) {
     const tenantTheme = useTenantTheme();
     const theme = tenantTheme?.theme;
     const cardSx = tenantAccent && theme
@@ -749,7 +749,7 @@ function Card({ title, headerAction, content, actions, tenantAccent = false, sx,
         }
         : sx;
     return (jsxs(Card$1, { sx: cardSx, ...props, children: [title && jsx(CardHeader, { title: title, action: headerAction }), (content || children) && (jsx(CardContent, { children: content || children })), actions && jsx(CardActions, { children: actions })] }));
-}
+});
 
 /**
  * Banner component with tenant theme support
@@ -764,7 +764,7 @@ function Card({ title, headerAction, content, actions, tenantAccent = false, sx,
  * />
  * ```
  */
-function Banner({ title, description, action, gradient = true, sx, ...props }) {
+const Banner = React__default.memo(function Banner({ title, description, action, gradient = true, sx, ...props }) {
     const tenantTheme = useTenantTheme();
     const theme = tenantTheme?.theme;
     const primaryColor = theme?.palette?.primary?.main || '#000000';
@@ -780,6 +780,54 @@ function Banner({ title, description, action, gradient = true, sx, ...props }) {
             textAlign: 'center',
             ...sx,
         }, ...props, children: [jsx(Typography, { variant: "h4", component: "h2", gutterBottom: true, fontWeight: "bold", children: title }), description && (jsx(Typography, { variant: "body1", sx: { opacity: 0.95, mb: action ? 2 : 0 }, children: description })), action && jsx(Box, { sx: { mt: 2 }, children: action })] }));
+});
+
+/**
+ * Component Resolver Utility
+ * Handles resolution of ES modules that may have default exports
+ * Provides type-safe resolution for MUI icons and other components
+ */
+/**
+ * Recursively resolves a component that may be wrapped in default exports
+ * This handles cases where module bundlers wrap exports differently
+ *
+ * @param component - Component or module to resolve
+ * @returns The resolved component
+ *
+ * @example
+ * ```typescript
+ * import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
+ * const ResolvedIcon = resolveComponent(ArrowDropDownIcon);
+ * <ResolvedIcon />
+ * ```
+ */
+function resolveComponent(component) {
+    let resolved = component;
+    // Unwrap nested default exports
+    while (resolved &&
+        typeof resolved === 'object' &&
+        'default' in resolved) {
+        resolved = resolved.default;
+    }
+    return resolved;
+}
+/**
+ * Type-safe resolver specifically for MUI SvgIcon components
+ *
+ * @param icon - MUI icon component to resolve
+ * @returns Resolved icon component
+ */
+function resolveSvgIcon(icon) {
+    return resolveComponent(icon);
+}
+/**
+ * Type-safe resolver for React components
+ *
+ * @param component - React component to resolve
+ * @returns Resolved component
+ */
+function resolveReactComponent(component) {
+    return resolveComponent(component);
 }
 
 /**
@@ -796,16 +844,7 @@ function Banner({ title, description, action, gradient = true, sx, ...props }) {
  * - CTA Button: Filled, #0090da, border-radius 24px, height 48px
  * - CTA text: MetLife Circular Medium, 16px, white, line-height 20px
  */
-const resolveComponent$2 = (component) => {
-    let resolved = component;
-    while (resolved &&
-        typeof resolved === 'object' &&
-        'default' in resolved) {
-        resolved = resolved.default;
-    }
-    return resolved;
-};
-const ResolvedArrowDropDownIcon$1 = resolveComponent$2(ArrowDropDownIcon);
+const ResolvedArrowDropDownIcon$1 = resolveSvgIcon(ArrowDropDownIcon);
 /**
  * Design System Colors (from Figma node 1581-22604)
  */
@@ -1254,17 +1293,8 @@ languages = [], currentLocale, onLanguageChange, }) {
                                     }, children: languages.map((lang) => (jsx(StyledMenuItem$1, { onClick: () => handleLangSelect(lang.locale, lang.value), selected: lang.locale === currentLocale, "data-testid": `lang-${lang.locale}`, children: lang.label }, lang.value))) })] })), shouldShowCtaButton && (jsx(PurchaseButton, { onClick: handleCtaButtonClick, "data-testid": "header-cta-button", children: formatMessage({ id: ctaText }) }))] })] }) }));
 }
 
-const resolveComponent$1 = (component) => {
-    let resolved = component;
-    while (resolved &&
-        typeof resolved === 'object' &&
-        'default' in resolved) {
-        resolved = resolved.default;
-    }
-    return resolved;
-};
-const ResolvedCloseIcon$1 = resolveComponent$1(CloseIcon);
-const ResolvedMenuIcon = resolveComponent$1(MenuIcon);
+const ResolvedCloseIcon$1 = resolveSvgIcon(CloseIcon);
+const ResolvedMenuIcon = resolveSvgIcon(MenuIcon);
 const StyledAppBar$1 = styled(AppBar)(({ theme, ispartnershippagemobileview, scrolled }) => ({
     zIndex: '1000 !important',
     backgroundColor: ispartnershippagemobileview && !scrolled
@@ -1556,18 +1586,9 @@ const TypographyBtnText = styled(Typography)(({ theme }) => ({
     textTransform: 'none',
 }));
 
-function resolveComponent(component) {
-    let resolved = component;
-    while (resolved &&
-        typeof resolved === 'object' &&
-        'default' in resolved) {
-        resolved = resolved.default;
-    }
-    return resolved;
-}
-const ResolvedArrowDropDownIcon = resolveComponent(ArrowDropDownIcon);
-const ResolvedCloseIcon = resolveComponent(CloseIcon);
-const ResolvedDesktopHeaderMenuBar = resolveComponent(DesktopHeaderMenuBar);
+const ResolvedArrowDropDownIcon = resolveSvgIcon(ArrowDropDownIcon);
+const ResolvedCloseIcon = resolveSvgIcon(CloseIcon);
+const ResolvedDesktopHeaderMenuBar = resolveReactComponent(DesktopHeaderMenuBar);
 /**
  * Header component with tenant theme support and responsive navigation
  *
@@ -3172,8 +3193,8 @@ const CalloutHeader = styled(Box)(() => ({
     alignItems: 'center',
 }));
 const CalloutIcon = styled(InfoIcon)(({ theme }) => ({
-    width: '20px',
-    height: '20px',
+    width: '100%',
+    height: '100%',
     color: theme?.palette?.natural?.dim || '#13131b',
 }));
 const CalloutTitle = styled(Typography)(({ theme }) => ({
@@ -3213,7 +3234,7 @@ const CalloutText = styled(Typography)(({ theme }) => ({
  * </InfoCallout>
  * ```
  */
-function InfoCallout({ title = 'Helpful tip', children, formatMessage = (descriptor) => descriptor.defaultMessage || descriptor.id, }) {
+const InfoCallout = React.memo(function InfoCallout({ title = 'Helpful tip', children, formatMessage = (descriptor) => descriptor.defaultMessage || descriptor.id, }) {
     // Safely get theme, handle SSR case where it might be undefined
     const tenantTheme = useTenantTheme();
     const theme = tenantTheme?.theme;
@@ -3229,7 +3250,7 @@ function InfoCallout({ title = 'Helpful tip', children, formatMessage = (descrip
                             id: title,
                             defaultMessage: title,
                         }) })] }), jsx(CalloutText, { sx: { color: subtitleColor }, children: children })] }));
-}
+});
 
 const SliderContainer = styled(Box)(({ theme }) => ({
     display: 'flex',
@@ -3641,9 +3662,9 @@ const PricePeriod = styled(Typography)({
     wordSpacing: '0px',
 });
 
-const ProductCard = ({ productName, planName, logoUrl, price, currency = 'RM', period = '/month', sx, showIndicator = true, }) => {
+const ProductCard = React.memo(function ProductCard({ productName, planName, logoUrl, price, currency = 'RM', period = '/month', sx, showIndicator = true, }) {
     return (jsxs(ProductCardContainer, { sx: sx, showIndicator: showIndicator, children: [logoUrl && (jsx(LogoContainer, { children: jsx("img", { src: logoUrl, alt: productName, style: { maxWidth: '100%', maxHeight: '100%' } }) })), jsxs(ProductInfo, { children: [jsx(ProductName, { children: productName }), planName && jsx(PlanName, { children: planName })] }), jsxs(PriceContainer, { children: [jsxs(Price, { children: [currency, " ", price] }), jsx(PricePeriod, { children: period })] })] }));
-};
+});
 
 const HeaderContainer = styled(Box)(({ sticky }) => ({
     ...(sticky && {
@@ -4264,7 +4285,7 @@ function FAQAccordion({ faqs, title = 'Frequently Asked Questions', formatMessag
     const textColor = getThemeColor(theme, 'natural.dim', '#13131b');
     const subtitleColor = getThemeColor(theme, 'natural.dark', '#5f5e62');
     const bgColor = backgroundColor || getThemeColor(theme, 'natural.light', '#ffffff');
-    const handleChange = (panel) => (event, isExpanded) => {
+    const handleChange = (panel) => (_event, isExpanded) => {
         setExpanded(isExpanded ? panel : false);
         onAccordionChange?.(panel, isExpanded);
     };
@@ -4406,6 +4427,89 @@ function BenefitsSummary({ benefits, title = 'Benefits Summary', formatMessage =
                             }, children: renderIcon(benefit.icon) }), jsxs(BenefitContent, { children: [jsx(BenefitTitle, { sx: { color: textColor }, children: benefit.title }), jsx(BenefitDescription, { sx: { color: subtitleColor }, children: renderDescription(benefit.description) })] })] }, benefit.id))) })] }));
 }
 
+/**
+ * ErrorBoundary - Catches React errors in child component tree
+ *
+ * @example
+ * ```tsx
+ * <ErrorBoundary fallback={<div>Something went wrong</div>}>
+ *   <MyComponent />
+ * </ErrorBoundary>
+ * ```
+ */
+class ErrorBoundary extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            hasError: false,
+            error: null,
+        };
+    }
+    static getDerivedStateFromError(error) {
+        return {
+            hasError: true,
+            error,
+        };
+    }
+    componentDidCatch(error, errorInfo) {
+        const { onError, componentName } = this.props;
+        // Log error to console in development
+        if (process.env.NODE_ENV === 'development') {
+            console.error(`ErrorBoundary caught an error${componentName ? ` in ${componentName}` : ''}:`, error, errorInfo);
+        }
+        // Call custom error handler if provided
+        if (onError) {
+            onError(error, errorInfo);
+        }
+    }
+    render() {
+        const { hasError, error } = this.state;
+        const { children, fallback, componentName } = this.props;
+        if (hasError) {
+            // Use custom fallback if provided
+            if (fallback) {
+                return fallback;
+            }
+            // Default fallback UI
+            return (jsxs("div", { style: {
+                    padding: '20px',
+                    border: '1px solid #ff6b6b',
+                    borderRadius: '8px',
+                    backgroundColor: '#fff5f5',
+                    color: '#c92a2a',
+                    fontFamily: 'system-ui, -apple-system, sans-serif',
+                }, children: [jsx("h3", { style: { margin: '0 0 10px 0', fontSize: '16px', fontWeight: 600 }, children: componentName ? `Error in ${componentName}` : 'Something went wrong' }), process.env.NODE_ENV === 'development' && error && (jsxs("details", { style: { marginTop: '10px', fontSize: '14px' }, children: [jsx("summary", { style: { cursor: 'pointer', userSelect: 'none' }, children: "Error details" }), jsx("pre", { style: {
+                                    marginTop: '10px',
+                                    padding: '10px',
+                                    backgroundColor: '#fff',
+                                    border: '1px solid #ffdedb',
+                                    borderRadius: '4px',
+                                    fontSize: '12px',
+                                    overflow: 'auto',
+                                }, children: error.toString() })] }))] }));
+        }
+        return children;
+    }
+}
+/**
+ * Higher-Order Component that wraps a component with an ErrorBoundary
+ *
+ * @param Component - Component to wrap
+ * @param fallback - Optional custom fallback UI
+ * @returns Wrapped component with error boundary
+ *
+ * @example
+ * ```tsx
+ * const SafeButton = withErrorBoundary(Button, <div>Button failed to render</div>);
+ * <SafeButton {...props} />
+ * ```
+ */
+function withErrorBoundary(Component, fallback) {
+    const WrappedComponent = React__default.forwardRef((props, ref) => (jsx(ErrorBoundary, { fallback: fallback, componentName: Component.displayName || Component.name, children: jsx(Component, { ...props, ref: ref }) })));
+    WrappedComponent.displayName = `withErrorBoundary(${Component.displayName || Component.name || 'Component'})`;
+    return WrappedComponent;
+}
+
 /**
  * Asset Management Utilities
  * Helper functions for managing tenant-specific assets
@@ -4589,5 +4693,4 @@ function getIconPath(iconName) {
     return ICON_PATHS[iconName];
 }
 
-export { Banner, BenefitsSummary, BillingToggle, Button, Card, CheckoutFormButton, CheckoutHeader, CheckoutProgress, ChildInformationForm, ContactDetailsForm, CoverageAmountSlider, DesktopHeaderMenuBar, FAQAccordion, Footer, Header$1 as Header, HealthInformationForm, HealthQuestionGroup, ICON_PATHS, InfoCallout, NewHeader, OptionButton, PersonalInformationForm, ProductCard, ProductSelectionDrawer, QuestionSection, RecommendationsDrawer, TenantThemeProvider, ToggleGroup, ammetlifeTheme, ammetlifeTypography, createThemeCSSVariables, getAvailableTenants, getIconPath, getImageSrc, getTenantAssetPath, getTenantLogoPath, getTenantTheme, getTenantTypography, getThemeColor, iglooTheme, iglooTypography, isStaticImageData, isValidExternalUrl, isValidTenantId, mergeTenantTheme, safeWindowOpen, sanitizeUrl, tenantThemes, tenantTypography, useIsTenant, useTenantAsset, useTenantFavicon, useTenantId, useTenantLogo, useTenantTheme };
-//# sourceMappingURL=index.js.map
+export { Banner, BenefitsSummary, BillingToggle, Button, Card, CheckoutFormButton, CheckoutHeader, CheckoutProgress, ChildInformationForm, ContactDetailsForm, CoverageAmountSlider, DesktopHeaderMenuBar, ErrorBoundary, FAQAccordion, Footer, Header$1 as Header, HealthInformationForm, HealthQuestionGroup, ICON_PATHS, InfoCallout, NewHeader, OptionButton, PersonalInformationForm, ProductCard, ProductSelectionDrawer, QuestionSection, RecommendationsDrawer, TenantThemeProvider, ToggleGroup, ammetlifeTheme, ammetlifeTypography, createThemeCSSVariables, getAvailableTenants, getIconPath, getImageSrc, getTenantAssetPath, getTenantLogoPath, getTenantTheme, getTenantTypography, getThemeColor, iglooTheme, iglooTypography, isStaticImageData, isValidExternalUrl, isValidTenantId, mergeTenantTheme, resolveComponent, resolveReactComponent, resolveSvgIcon, safeWindowOpen, sanitizeUrl, tenantThemes, tenantTypography, useIsTenant, useTenantAsset, useTenantFavicon, useTenantId, useTenantLogo, useTenantTheme, withErrorBoundary };

package/dist/types/components/Banner/Banner.d.ts

@@ -2,7 +2,7 @@
  * Tenant-Aware Banner Component
  * Promotional banner with tenant theming
  */
-/// <reference types="react" />
+import React from 'react';
 import { BoxProps } from '@mui/material';
 export interface BannerProps extends Omit<BoxProps, 'title'> {
     /**
@@ -35,4 +35,4 @@ export interface BannerProps extends Omit<BoxProps, 'title'> {
  * />
  * ```
  */
-export declare function Banner({ title, description, action, gradient, sx, ...props }: BannerProps): import("react/jsx-runtime").JSX.Element;
+export declare const Banner: React.NamedExoticComponent<BannerProps>;

package/dist/types/components/Button/Button.d.ts

@@ -2,6 +2,7 @@
  * Tenant-Aware Button Component
  * MUI Button with tenant theming support
  */
+import React from 'react';
 import { ButtonProps as MuiButtonProps } from '@mui/material';
 export interface ButtonProps extends Omit<MuiButtonProps, 'color'> {
     /**
@@ -29,4 +30,4 @@ export interface ButtonProps extends Omit<MuiButtonProps, 'color'> {
  * <Button color="primary">Click Me</Button>
  * ```
  */
-export declare function Button({ tenantColored, variant, sx, color, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare const Button: React.NamedExoticComponent<ButtonProps>;