igloo-d2c-components 1.0.13 → 1.0.14

package/dist/types/assets/icons/index.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Common UI Icons
+ * Path references to reusable icons
+ * Assets are copied to dist/assets folder during build
+ */
+export declare const ICON_PATHS: {
+    readonly close: "/assets/icons/close.svg";
+    readonly arrow: "/assets/icons/arrow.svg";
+    readonly arrowDown: "/assets/icons/arrow-down.svg";
+    readonly alert: "/assets/icons/alert.svg";
+    readonly facebook: "/assets/icons/facebook.svg";
+    readonly instagram: "/assets/icons/instagram.svg";
+    readonly youtube: "/assets/icons/youtube.svg";
+};
+export type IconName = keyof typeof ICON_PATHS;
+/**
+ * Get icon path by name
+ * @param iconName - Name of the icon
+ * @returns Path to icon asset
+ */
+export declare function getIconPath(iconName: IconName): string;

package/dist/types/assets/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Asset Exports
+ * Centralized exports for all assets
+ *
+ * Note: Assets are copied to dist/assets during build
+ * Use the provided utilities to reference asset paths
+ */
+export { ICON_PATHS, getIconPath } from './icons';
+export type { IconName } from './icons';

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

@@ -0,0 +1,22 @@
+/**
+ * Benefits Summary Component
+ * A reusable, tenant-aware benefits summary component
+ */
+import { BenefitsSummaryProps } from './types';
+/**
+ * BenefitsSummary - Displays a list of product benefits
+ *
+ * @example
+ * ```tsx
+ * const benefits = [
+ *   { id: 'benefit-1', icon: '/icons/health.svg', title: 'Death Benefit', description: '100% of Sum Assured' },
+ *   { id: 'benefit-2', icon: <HealthIcon />, title: 'TPD Coverage', description: 'Total & Permanent Disability' },
+ * ]
+ *
+ * <BenefitsSummary
+ *   benefits={benefits}
+ *   title="Benefits Summary"
+ * />
+ * ```
+ */
+export declare function BenefitsSummary({ benefits, title, formatMessage, backgroundColor, maxWidth, className, iconSize, }: BenefitsSummaryProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/BenefitsSummary/index.d.ts

@@ -0,0 +1,2 @@
+export { BenefitsSummary } from './BenefitsSummary';
+export type { BenefitItem, BenefitsSummaryProps } from './types';

package/dist/types/components/BenefitsSummary/styled.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Benefits Summary Styled Components
+ * MUI styled components for the Benefits Summary
+ */
+/// <reference types="react" />
+export declare const SectionContainer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const SectionTitle: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+    ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
+}, "fontFamily" | "children" | "p" | "style" | "fontSize" | "fontStyle" | "fontWeight" | "lineHeight" | "border" | "className" | "classes" | "sx" | "boxShadow" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "color" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint" | "variant" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const BenefitsList: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const BenefitItemContainer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const BenefitIcon: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const BenefitContent: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const BenefitTitle: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+    ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
+}, "fontFamily" | "children" | "p" | "style" | "fontSize" | "fontStyle" | "fontWeight" | "lineHeight" | "border" | "className" | "classes" | "sx" | "boxShadow" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "color" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint" | "variant" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const BenefitDescription: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+    ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
+}, "fontFamily" | "children" | "p" | "style" | "fontSize" | "fontStyle" | "fontWeight" | "lineHeight" | "border" | "className" | "classes" | "sx" | "boxShadow" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "color" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint" | "variant" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

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

@@ -0,0 +1,58 @@
+/**
+ * Benefits Summary Types
+ * Type definitions for the Benefits Summary component
+ */
+import * as React from 'react';
+export interface BenefitItem {
+    /**
+     * Unique identifier for the benefit
+     */
+    id: string;
+    /**
+     * Icon for the benefit - can be a URL string or React node
+     */
+    icon: string | React.ReactNode;
+    /**
+     * Title of the benefit
+     */
+    title: string;
+    /**
+     * Description of the benefit (supports newline characters for multi-line text)
+     */
+    description: string;
+}
+export interface BenefitsSummaryProps {
+    /**
+     * Array of benefits to display
+     */
+    benefits: BenefitItem[];
+    /**
+     * Title for the benefits section
+     */
+    title?: string;
+    /**
+     * Optional format message function for i18n support
+     */
+    formatMessage?: (descriptor: {
+        id: string;
+        defaultMessage?: string;
+    }) => string;
+    /**
+     * Custom background color for the container
+     */
+    backgroundColor?: string;
+    /**
+     * Maximum width for the content area
+     * @default '1128px'
+     */
+    maxWidth?: string;
+    /**
+     * Custom class name for additional styling
+     */
+    className?: string;
+    /**
+     * Size of the benefit icons
+     * @default 24
+     */
+    iconSize?: number;
+}

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

@@ -0,0 +1,34 @@
+/**
+ * Billing Toggle Component
+ * Toggle between monthly and annual billing options
+ * Based on Figma design (node-id: 98-21872)
+ */
+export interface BillingToggleProps {
+    /**
+     * Currently selected billing type
+     */
+    value: 'monthly' | 'annually';
+    /**
+     * Callback when billing type changes
+     */
+    onChange: (value: 'monthly' | 'annually') => void;
+    /**
+     * Optional format message function for i18n
+     */
+    formatMessage?: (descriptor: {
+        id: string;
+        defaultMessage?: string;
+    }) => string;
+}
+/**
+ * BillingToggle - Toggle between monthly and annual billing
+ *
+ * @example
+ * ```tsx
+ * <BillingToggle
+ *   value={billingType}
+ *   onChange={setBillingType}
+ * />
+ * ```
+ */
+export declare function BillingToggle({ value, onChange, formatMessage, }: BillingToggleProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/BillingToggle/index.d.ts

@@ -0,0 +1,3 @@
+export { BillingToggle } from './BillingToggle';
+export type { BillingToggleProps } from './BillingToggle';
+export * from './styled';

package/dist/types/components/BillingToggle/styled.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+export declare const ToggleContainer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const ToggleButton: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    active: boolean;
+}, {}, {}>;
+export declare const ToggleText: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+    ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
+}, "fontFamily" | "children" | "p" | "style" | "fontSize" | "fontStyle" | "fontWeight" | "lineHeight" | "border" | "className" | "classes" | "sx" | "boxShadow" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "color" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint" | "variant" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

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

@@ -0,0 +1,39 @@
+/**
+ * Checkout Form Button Component
+ * Fixed/floating button for checkout form submission
+ */
+import * as React from 'react';
+export interface CheckoutFormButtonProps {
+    /**
+     * Button text
+     * @default 'Next'
+     */
+    text?: string;
+    /**
+     * Whether button is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Click handler
+     */
+    onClick?: () => void;
+    /**
+     * Whether button should be fixed at bottom
+     * @default true
+     */
+    fixed?: boolean;
+    /**
+     * Button type
+     * @default 'button'
+     */
+    type?: 'button' | 'submit';
+    /**
+     * Optional custom styles
+     */
+    sx?: any;
+    /**
+     * Whether the button is in loading state
+     */
+    loading?: boolean;
+}
+export declare const CheckoutFormButton: React.FC<CheckoutFormButtonProps>;

package/dist/types/components/CheckoutFormButton/index.d.ts

@@ -0,0 +1,2 @@
+export { CheckoutFormButton } from './CheckoutFormButton';
+export type { CheckoutFormButtonProps } from './CheckoutFormButton';

package/dist/types/components/CheckoutFormButton/styled.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export declare const ButtonContainer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    isFixed?: boolean | undefined;
+}, {}, {}>;
+export declare const StyledButton: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    isDisabled?: boolean | undefined;
+}, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;

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

@@ -0,0 +1,41 @@
+/**
+ * Checkout Header Component
+ * Complete header for checkout flows with progress, product card, and section info
+ */
+import { SxProps, Theme } from '@mui/material';
+import * as React from 'react';
+import { CheckoutProgressProps } from '../CheckoutProgress';
+import { ProductCardProps } from '../ProductCard';
+export interface CheckoutHeaderProps {
+    /**
+     * Progress props
+     */
+    progress: CheckoutProgressProps;
+    /**
+     * Product card props (optional)
+     */
+    product?: ProductCardProps;
+    /**
+     * Section title
+     */
+    sectionTitle: string;
+    /**
+     * Section description
+     */
+    sectionDescription: string;
+    /**
+     * Whether header should be sticky
+     * @default true
+     */
+    sticky?: boolean;
+    /**
+     * Progress bar theme (background gradient or color)
+     * @default 'linear-gradient(90deg, #0090DA 0.06%, #A4CE4E 99.94%)'
+     */
+    progressBarTheme?: string;
+    /**
+     * Optional custom styles
+     */
+    sx?: SxProps<Theme>;
+}
+export declare const CheckoutHeader: React.FC<CheckoutHeaderProps>;

package/dist/types/components/CheckoutHeader/index.d.ts

@@ -0,0 +1,2 @@
+export { CheckoutHeader } from './CheckoutHeader';
+export type { CheckoutHeaderProps } from './CheckoutHeader';

package/dist/types/components/CheckoutHeader/styled.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+export declare const HeaderContainer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    sticky?: boolean | undefined;
+}, {}, {}>;
+export declare const SectionHeader: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const SectionTitle: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+    ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
+}, "fontFamily" | "children" | "p" | "style" | "fontSize" | "fontStyle" | "fontWeight" | "lineHeight" | "border" | "className" | "classes" | "sx" | "boxShadow" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "color" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint" | "variant" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const SectionDescription: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+    ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
+}, "fontFamily" | "children" | "p" | "style" | "fontSize" | "fontStyle" | "fontWeight" | "lineHeight" | "border" | "className" | "classes" | "sx" | "boxShadow" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "color" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint" | "variant" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

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

@@ -0,0 +1,35 @@
+/**
+ * Checkout Progress Component
+ * Displays progress bar with step indicator for multi-step checkout flows
+ */
+import { SxProps, Theme } from '@mui/material';
+import * as React from 'react';
+export interface CheckoutProgressProps {
+    /**
+     * Current step (0-indexed)
+     */
+    currentStep: number;
+    /**
+     * Total number of steps
+     */
+    totalSteps: number;
+    /**
+     * Callback when back button is clicked
+     */
+    onBack?: () => void;
+    /**
+     * Whether to show the back button
+     * @default true
+     */
+    showBackButton?: boolean;
+    /**
+     * Progress bar theme (background gradient or color)
+     * @default 'linear-gradient(90deg, #0090DA 0.06%, #A4CE4E 99.94%)'
+     */
+    progressBarTheme?: string;
+    /**
+     * Optional custom styles
+     */
+    sx?: SxProps<Theme>;
+}
+export declare const CheckoutProgress: React.FC<CheckoutProgressProps>;

package/dist/types/components/CheckoutProgress/index.d.ts

@@ -0,0 +1,2 @@
+export { CheckoutProgress } from './CheckoutProgress';
+export type { CheckoutProgressProps } from './CheckoutProgress';

package/dist/types/components/CheckoutProgress/styled.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+export declare const ProgressBarContainer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const ProgressBar: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const ProgressFill: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    width: number;
+    progressBarTheme?: string | undefined;
+}, {}, {}>;
+export declare const ProgressText: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+    ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
+}, "fontFamily" | "children" | "p" | "style" | "fontSize" | "fontStyle" | "fontWeight" | "lineHeight" | "border" | "className" | "classes" | "sx" | "boxShadow" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "color" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint" | "variant" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

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

@@ -0,0 +1,52 @@
+/**
+ * Child Information Form Component
+ * Collects child's personal details for insurance applications
+ */
+import * as React from 'react';
+export interface ChildInformationField {
+    name: string;
+    label: string;
+    value: any;
+    error?: string;
+    touched?: boolean;
+    helperText?: string;
+    disabled?: boolean;
+    type?: string;
+    options?: Array<{
+        label: string;
+        value: any;
+    }>;
+    inputProps?: any;
+    onChange?: (e: any) => void;
+    onBlur?: (e: any) => void;
+}
+export interface ChildInformationFormProps {
+    /**
+     * Render function for form fields
+     * This allows the parent to control the form field implementation
+     */
+    renderField: (field: ChildInformationField) => React.ReactNode;
+    /**
+     * Form field values
+     */
+    fields: {
+        full_name: ChildInformationField;
+        nric: ChildInformationField;
+        date_of_birth: ChildInformationField;
+        gender: ChildInformationField;
+        nationality: ChildInformationField;
+    };
+    /**
+     * Form submission handler
+     */
+    onSubmit?: (e: React.FormEvent) => void;
+    /**
+     * Optional reference for scroll handling
+     */
+    formRef?: React.RefObject<HTMLDivElement>;
+    /**
+     * Optional custom styles
+     */
+    sx?: any;
+}
+export declare const ChildInformationForm: React.FC<ChildInformationFormProps>;

package/dist/types/components/ChildInformationForm/index.d.ts

@@ -0,0 +1,2 @@
+export { ChildInformationForm } from './ChildInformationForm';
+export type { ChildInformationField, ChildInformationFormProps } from './ChildInformationForm';

package/dist/types/components/ChildInformationForm/styled.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const FormContainer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

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

@@ -0,0 +1,63 @@
+/**
+ * Contact Details Form Component
+ * Collects contact and address information for life insurance checkout
+ */
+import * as React from 'react';
+export interface ContactDetailsField {
+    name: string;
+    label: string;
+    value: any;
+    error?: string;
+    touched?: boolean;
+    helperText?: string;
+    disabled?: boolean;
+    type?: string;
+    options?: Array<{
+        label: string;
+        value: any;
+    }>;
+    multiline?: boolean;
+    rows?: number;
+    inputProps?: any;
+    onChange?: (e: any) => void;
+    onBlur?: (e: any) => void;
+}
+export interface ContactDetailsFormProps {
+    /**
+     * Render function for form fields
+     * This allows the parent to control the form field implementation
+     */
+    renderField: (field: ContactDetailsField) => React.ReactNode;
+    /**
+     * Form field values
+     */
+    fields: {
+        phone_number: ContactDetailsField;
+        email_address: ContactDetailsField;
+        residential_address: ContactDetailsField;
+        postal_code: ContactDetailsField;
+        city: ContactDetailsField;
+        state: ContactDetailsField;
+    };
+    /**
+     * Mailing address checkbox
+     */
+    mailingAddressSame?: {
+        checked: boolean;
+        onChange: (checked: boolean) => void;
+        label?: string;
+    };
+    /**
+     * Form submission handler
+     */
+    onSubmit?: (e: React.FormEvent) => void;
+    /**
+     * Optional reference for scroll handling
+     */
+    formRef?: React.RefObject<HTMLDivElement>;
+    /**
+     * Optional custom styles
+     */
+    sx?: any;
+}
+export declare const ContactDetailsForm: React.FC<ContactDetailsFormProps>;

package/dist/types/components/ContactDetailsForm/index.d.ts

@@ -0,0 +1,2 @@
+export { ContactDetailsForm } from './ContactDetailsForm';
+export type { ContactDetailsField, ContactDetailsFormProps } from './ContactDetailsForm';

package/dist/types/components/ContactDetailsForm/styled.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+export declare const FormContainer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const CheckboxContainer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const CheckboxLabel: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+    ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
+}, "fontFamily" | "children" | "p" | "style" | "fontSize" | "fontStyle" | "fontWeight" | "lineHeight" | "border" | "className" | "classes" | "sx" | "boxShadow" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "color" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint" | "variant" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

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

@@ -0,0 +1,57 @@
+/**
+ * Coverage Amount Slider Component
+ * Interactive slider for selecting coverage amounts with plus/minus controls
+ * Based on Figma design (node-id: 98-21900)
+ */
+export interface CoverageAmountSliderProps {
+    /**
+     * Minimum coverage amount
+     */
+    min: number;
+    /**
+     * Maximum coverage amount
+     */
+    max: number;
+    /**
+     * Current coverage amount value
+     */
+    value: number;
+    /**
+     * Callback when coverage amount changes
+     */
+    onChange: (value: number) => void;
+    /**
+     * Label text for the input (default: "Choose your coverage amount")
+     */
+    label?: string;
+    /**
+     * Number of steps/marks in the slider (default: 5)
+     */
+    steps?: number;
+    /**
+     * Currency symbol (default: "RM")
+     */
+    currency?: string;
+    /**
+     * Format function for displaying currency
+     */
+    formatCurrency?: (amount: number) => string;
+    /**
+     * Whether the slider is disabled
+     */
+    disabled?: boolean;
+}
+/**
+ * CoverageAmountSlider - Interactive slider for selecting coverage amounts
+ *
+ * @example
+ * ```tsx
+ * <CoverageAmountSlider
+ *   min={100000}
+ *   max={550000}
+ *   value={coverageAmount}
+ *   onChange={setCoverageAmount}
+ * />
+ * ```
+ */
+export declare function CoverageAmountSlider({ min, max, value, onChange, label, steps, currency, formatCurrency: customFormatCurrency, disabled, }: CoverageAmountSliderProps): import("react/jsx-runtime").JSX.Element;