@mobielnl/elements 0.7.0 → 0.8.1

package/dist/index.d.ts

@@ -1,15 +1,8 @@
-import { Component } from 'react';
-import { ErrorInfo } from 'react';
 import { JSX } from 'react/jsx-runtime';
-import { JSXElementConstructor } from 'react';
-import { ReactElement } from 'react';
 import { ReactNode } from 'react';
-import { ReactPortal } from 'react';
 import { z } from 'zod';
 import * as z_2 from 'zod';
 
-export declare function ActiveFilterChips({ activeFilters, filterOptions, onFilterRemove, classNames, }: ActiveFilterChipsProps): JSX.Element | null;
-
 declare type ActiveFilterChipsClassNames = {
     /** The container of the filter chips */
     container?: string;
@@ -17,15 +10,177 @@ declare type ActiveFilterChipsClassNames = {
     filterChip?: FilterChipClassNames;
 };
 
-declare type ActiveFilterChipsProps = {
-    /** Currently active filter values */
-    activeFilters: FilterValue[];
-    /** Available filter options to display */
-    filterOptions: FilterOption[];
-    /** Callback when a filter value is removed */
-    onFilterRemove: (filter: FilterValue) => void;
-    /** Class slots for styling */
-    classNames?: ActiveFilterChipsClassNames;
+declare type AverageSectionClassNames = {
+    /** Container for the average per month section */
+    container?: string;
+    /** Header section with icon and title */
+    header?: string;
+    /** Container for icon and text */
+    headerContent?: string;
+    /** Icon container */
+    icon?: string;
+    /** Title text */
+    title?: string;
+    /** Subtitle/description text */
+    subtitle?: string;
+    /** Price display in header */
+    price?: string;
+    /** Container for monthly fees list */
+    monthlyFeesContainer?: string;
+    /** Individual monthly fee item */
+    monthlyFee?: MonthlyFeeClassNames;
+    /** One-time fee row */
+    oneTimeFee?: {
+        container?: string;
+        label?: string;
+        price?: string;
+    };
+    /** Activation fee row */
+    activationFee?: {
+        container?: string;
+        label?: string;
+        price?: string;
+    };
+    /** Installation fee row (for fixed products) */
+    installationFee?: {
+        container?: string;
+        label?: string;
+        price?: string;
+    };
+    /** Cashback row */
+    cashback?: {
+        container?: string;
+        label?: string;
+        price?: string;
+    };
+    /** Horizontal separator */
+    separator?: string;
+    /** Total costs row */
+    totalCosts?: {
+        container?: string;
+        label?: string;
+        price?: string;
+    };
+};
+
+declare type ChannelsClassNames = {
+    /** The base slot of the channels section, it is the container of the channels section */
+    base?: string;
+    /** The description text above the channels list */
+    description?: string;
+    /** The list container for channels */
+    list?: string;
+    /** Individual list item styles */
+    listItem?: string;
+    /** Container for channel name and HD badge */
+    channelContainer?: string;
+    /** HD icon */
+    hdIcon?: string;
+};
+
+declare type CombiDealModalClassNames = {
+    /** Modal dialog class styling slots - see type `ModalClassNames` */
+    modal?: ModalClassNames_3;
+    /** Header section containing icon and title */
+    header?: {
+        /** Container wrapping the header content */
+        container?: string;
+        /** Icon wrapper with background */
+        iconWrapper?: string;
+        /** Discount icon */
+        icon?: string;
+        /** Main title text */
+        title?: string;
+        /** Description text below title */
+        description?: string;
+    };
+    /** Home internet provider selection section */
+    providerSelection?: {
+        /** Home internet provider section title
+         * @example 'Thuis internet' */
+        title?: string;
+        /** Select component styling */
+        select?: {
+            /** Select label styling */
+            label?: string;
+            /** Select trigger button styling */
+            trigger?: string;
+            /** Provider item container in select */
+            itemContainer?: string;
+            /** Provider icon styling */
+            icon?: string;
+        };
+    };
+    /** Other subscriptions section */
+    otherSubscriptions?: {
+        /** Container for the section */
+        container?: string;
+        /** Section label */
+        label?: string;
+        /** Description text below label */
+        description?: string;
+        /** Listbox container wrapper */
+        listboxContainer?: string;
+        /** The slot for the listbox component. You can see this slot as the `ul` slot */
+        listboxList?: string;
+        /** Listbox item styling */
+        listboxItem?: {
+            /** The main slot for the listbox item. It wraps all the other slots */
+            base?: string;
+            /** The title and description wrapper */
+            wrapper?: string;
+            /** Provider image styling */
+            image?: string;
+            /** Provider name title text
+             * @example 'Odido' */
+            title?: string;
+            /** Provider description text
+             * @example 'Één of meer mobiele abonnementen' */
+            description?: string;
+            /** The selected icon slot. This is only visible when the item is selected */
+            selectedIcon?: string;
+        };
+    };
+    /** Submit button styling */
+    submitButton?: string;
+};
+
+declare type CostOverviewClassNames = {
+    /** The base container of the cost overview */
+    base?: string;
+    /** Container for the monthly fees section */
+    monthlySection?: string;
+    /** Monthly fees container */
+    monthlyFeesContainer?: string;
+    /** Main monthly price header */
+    monthlyPriceHeader?: {
+        container?: string;
+        label?: string;
+        price?: string;
+    };
+    /** Monthly fee transition row */
+    monthlyFeeTransition?: MonthlyFeeTransitionClassNames;
+    /** Lifetime fee row */
+    lifetimeFee?: MonthlyFeeTransitionClassNames;
+    /** Provider contract row */
+    providerContract?: PriceRowClassNames;
+    /** Bundle row */
+    bundle?: PriceRowClassNames;
+    /** Handset bundle row */
+    handsetBundle?: PriceRowClassNames;
+    /** Separator line */
+    separator?: string;
+    /** One-time payment section */
+    oneTimeSection?: {
+        header?: {
+            container?: string;
+            label?: string;
+            price?: string;
+        };
+        productRow?: PriceRowClassNames;
+    };
+    /** Proposition overview section */
+    propositionOverview?: PropositionOverviewClassNames;
 };
 
 declare type CreditInfoClassNames = {
@@ -60,22 +215,89 @@ declare type CreditInfoClassNames = {
     descriptionLink?: string;
 };
 
-declare type DistinctPropertyOption = {
-    hex?: Maybe<Scalars['String']['output']>;
-    indexable: Scalars['Boolean']['output'];
-    key: Scalars['String']['output'];
-    label: Scalars['String']['output'];
-    name?: Maybe<Scalars['String']['output']>;
-    slug: Scalars['String']['output'];
-    value?: Maybe<Scalars['Value']['output']>;
+declare type CreditInfoClassNames_2 = {
+    /** The base container of the credit info section */
+    base?: string;
+    /** Table class names */
+    table?: TableClassNames_2;
+    /** Description text */
+    description?: string;
+    /** Links in the description */
+    descriptionLink?: string;
 };
 
-/**
- * ClassNames for styling the `ElementsRoot` component
- */
-export declare type ElementsClassNames = {
-    /** The only slot */
-    base?: string;
+declare type DetailsModalClassNames = {
+    /** Modal class names */
+    modal?: ModalClassNames_5;
+    /** Proposition info section */
+    propositionInfo?: {
+        container?: string;
+        image?: string;
+        content?: string;
+        name?: string;
+        details?: string;
+        productName?: string;
+        productProperties?: string;
+    };
+    /** Tabs class names */
+    tabs?: TabsClassNames;
+    /** General tab content class names */
+    general?: GeneralClassNames;
+    /** Terms tab content class names */
+    terms?: TermsClassNames;
+    /** Channels tab content class names */
+    channels?: ChannelsClassNames;
+    /** Cost overview tab content class names */
+    costOverview?: CostOverviewClassNames;
+};
+
+declare type DiscountSectionClassNames = {
+    /** Container for the discount section */
+    container?: string;
+    /** Header section with icon and title */
+    header?: string;
+    /** Container for icon and text */
+    headerContent?: string;
+    /** Icon container */
+    icon?: string;
+    /** Title text */
+    title?: string;
+    /** Subtitle/description text */
+    subtitle?: string;
+    /** Price display in header */
+    price?: string;
+    /** Price without subscription row */
+    priceWithoutSubscription?: {
+        container?: string;
+        label?: string;
+        price?: string;
+    };
+    /** Price with subscription row */
+    priceWithSubscription?: {
+        container?: string;
+        label?: string;
+        price?: string;
+    };
+    /** Handset costs row */
+    handsetCosts?: {
+        container?: string;
+        label?: string;
+        price?: string;
+    };
+    /** One-time fee row */
+    oneTimeFee?: {
+        container?: string;
+        label?: string;
+        price?: string;
+    };
+    /** Horizontal separator */
+    separator?: string;
+    /** Total discount row */
+    totalDiscount?: {
+        container?: string;
+        label?: string;
+        price?: string;
+    };
 };
 
 export declare function ElementsRoot({ withShadowDOM, ...props }: ElementsRootProps): JSX.Element;
@@ -83,8 +305,8 @@ export declare function ElementsRoot({ withShadowDOM, ...props }: ElementsRootPr
 export declare type ElementsRootProps = {
     /** The content to be rendered within the ElementsRoot component */
     children: ReactNode;
-    /** Class slots for styling */
-    classNames?: ElementsClassNames;
+    /** Only class slot for styling */
+    className?: string;
     /**
      * Enable Shadow DOM wrapping for complete style isolation
      * - When `undefinded` or `false`, no Shadow DOM is applied
@@ -101,29 +323,7 @@ export declare type ElementsRootProps = {
     };
 };
 
-export declare class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
-    state: ErrorBoundaryState;
-    static getDerivedStateFromError(_error: Error): ErrorBoundaryState;
-    componentDidCatch(error: Error, _errorInfo: ErrorInfo): void;
-    render(): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | ReactPortal | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | JSX.Element | null | undefined;
-}
-
-export declare type ErrorBoundaryProps = {
-    /** The content to be wrapped by the ErrorBoundary */
-    children: ReactNode;
-    /** Callback function called when an error is caught */
-    onError?: (error: Error) => void;
-    /** Custom fallback UI to render when an error occurs */
-    fallback?: ReactNode;
-};
-
-export declare type ErrorBoundaryState = {
-    hasError: boolean;
-};
-
-export declare function ErrorComponent({ classNames }: ErrorComponentProps): JSX.Element;
-
-export declare type ErrorComponentClassNames = {
+declare type ErrorAlertClassNames = {
     /** Main wrapper container for the error component */
     base?: string;
     /** Alert component class styling slots */
@@ -147,13 +347,6 @@ export declare type ErrorComponentClassNames = {
     button?: string;
 };
 
-export declare type ErrorComponentProps = {
-    /** Class slots for styling */
-    classNames?: ErrorComponentClassNames;
-};
-
-export declare function FilterChip({ filter, filterOption, onRemove, classNames, }: FilterChipProps): JSX.Element | null;
-
 declare type FilterChipClassNames = {
     /** The base slot of the chip, it is the container of the chip */
     base?: string;
@@ -163,48 +356,10 @@ declare type FilterChipClassNames = {
     closeButton?: string;
 };
 
-declare type FilterChipProps = {
-    /** Filter value */
-    filter: FilterValue;
-    /** Filter option */
-    filterOption: FilterOption;
-    /** Callback when the filter is removed */
-    onRemove: (filter: FilterValue) => void;
-    /** Class slots for styling */
-    classNames?: FilterChipClassNames;
-};
-
-export declare function FilterModal({ filterOptions, activeFilters, onFilterChange, classNames, }: FilterModalProps): JSX.Element;
-
-/**
- * ClassNames for styling different parts of the `FilterModal` component
- */
-export declare type FilterModalClassNames = {
-    /** Trigger button that opens the modal
-     * @example "Filters" */
-    button?: string;
-    /** Modal dialog class styling slots - see type `ModalClassNames` */
-    modal?: ModalClassNames;
-    /** Filters component class styling slots - see type `FiltersClassNames` */
-    filters?: FiltersClassNames;
-};
-
-export declare type FilterModalProps = Omit<FiltersProps, 'classNames'> & {
-    /** Class slots for styling */
-    classNames?: FilterModalClassNames;
-};
-
-/**
- * Configuration for a single filter option
- */
-declare type FilterOption = NonNullable<GetPageByPathQuery['page']>['pageFilters'][number];
-
-export declare function Filters({ filterOptions, activeFilters, onFilterChange, classNames, }: FiltersProps): JSX.Element | null;
-
 /**
  * ClassNames for styling different parts of the `Filters` component
  */
-export declare type FiltersClassNames = {
+declare type FiltersClassNames = {
     /** The foundational slot, encompassing all other slots and elements
      *
      * It serves as the primary container */
@@ -224,17 +379,6 @@ export declare type FiltersClassNames = {
     radioFilter?: RadioFilterClassNames;
 };
 
-export declare type FiltersProps = {
-    /** Available filter options to display */
-    filterOptions: FilterOption[];
-    /** Currently active filter values */
-    activeFilters: FilterValue[];
-    /** Callback when a filter value changes */
-    onFilterChange: (filter: FilterValue) => void;
-    /** Class slots for styling */
-    classNames?: FiltersClassNames;
-};
-
 /**
  * Represents an active filter value selected by the user
  */
@@ -251,47 +395,19 @@ declare type FilterValue = {
     value: string | string[];
 };
 
-declare type GetPageByPathQuery = {
-    __typename?: 'RootQueryType';
-    page?: {
-        __typename?: 'Page';
-        productCategory: string;
-        filter: string;
-        filterDefaults: string;
-        pageFilters: Array<{
-            __typename?: 'PageFilter';
-            id: string;
-            name: string;
-            shortName: string;
-            slug: string;
-            column: string;
-            type: string;
-            valueType: string;
-            dynamic: boolean;
-            min?: number | null;
-            max?: number | null;
-            rank: number;
-            operator: string;
-            url?: string | null;
-            formatType: string;
-            showCounts: boolean;
-            options: Array<{
-                __typename?: 'PageFilterOption';
-                name: string;
-                descriptiveName: string;
-                value: string;
-            }>;
-            aliases: Array<{
-                __typename?: 'PageFilterAlias';
-                name: string;
-                value: string;
-            }>;
-        }>;
-    } | null;
-};
+declare type GeneralClassNames = {
+    /** The base slot of the general section, it is the container of the general section */
+    base?: string;
+} & SectionClassNames;
 
+/**
+ * ClassNames for styling the `Label` component within `PropositionCard`
+ */
 declare type LabelClassNames = {
+    /** Base wrapper container for the label */
     wrapper?: string;
+    /** Text for the label
+     * @example "Meest voordelig" */
     text?: string;
 };
 
@@ -303,9 +419,62 @@ declare type ListBoxClassNames = {
     selectedIcon?: string;
 };
 
-declare type Maybe<T> = T | null;
+/**
+ * ClassNames for styling the `MainImage` component within `PropositionCard`
+ */
+declare type MainImageClassNames = {
+    /** When phone image is the main image
+     *
+     * Only available for Smartphone Propositions when no phone is selected */
+    phoneImage?: {
+        /** Wrapper container for the phone image and stock indicator */
+        wrapper?: string;
+        /** Wrapper container for the phone image */
+        imageWrapper?: string;
+        /** Phone image element */
+        image?: string;
+        /** Stock indicator under the phone image
+         *
+         * Only available when the phone is in stock */
+        stockIndicator?: {
+            /** Wrapper container for the stock indicator */
+            wrapper?: string;
+            /** Stock indicator icon */
+            icon?: string;
+            /** Stock indicator text
+             * @example "Direct leverbaar" */
+            text?: string;
+        };
+    };
+    /** When Provider image is the main image
+     *
+     * Not available for Smartphone Propositions when no phone is selected */
+    providerImage?: {
+        /** Wrapper container for the provider image */
+        imageWrapper?: string;
+        /** Provider image element */
+        image?: string;
+    };
+};
 
 declare type ModalClassNames = {
+    /** The backdrop slot, it is displayed behind the modal */
+    backdrop?: string;
+    /** The wrapper slot of the modal. It wraps the base and the backdrop slots */
+    wrapper?: string;
+    /** The main slot of the modal content */
+    base?: string;
+    /** The header of the modal, it is displayed at the top of the modal */
+    header?: string;
+    /** The body of the modal, it is displayed in the middle of the modal */
+    body?: string;
+    /** The footer of the modal, it is displayed at the bottom of the modal */
+    footer?: string;
+    /** The close button (X) of the modal in top-right corner */
+    closeButton?: string;
+};
+
+declare type ModalClassNames_2 = {
     /** The backdrop slot, it is displayed behind the modal */
     backdrop?: string;
     /** The wrapper slot of the modal. It wraps the base and the backdrop slots */
@@ -326,7 +495,7 @@ declare type ModalClassNames = {
     primaryButton?: string;
 };
 
-declare type ModalClassNames_2 = {
+declare type ModalClassNames_3 = {
     /** The backdrop slot, it is displayed behind the modal */
     backdrop?: string;
     /** The wrapper slot of the modal. It wraps the base and the backdrop slots */
@@ -343,7 +512,7 @@ declare type ModalClassNames_2 = {
     closeButton?: string;
 };
 
-declare type ModalClassNames_3 = {
+declare type ModalClassNames_4 = {
     /** The backdrop slot, it is displayed behind the modal */
     backdrop?: string;
     /** The wrapper slot of the modal. It wraps the base and the backdrop slots */
@@ -360,9 +529,46 @@ declare type ModalClassNames_3 = {
     closeButton?: string;
 };
 
+declare type ModalClassNames_5 = {
+    /** The backdrop slot, it is displayed behind the modal */
+    backdrop?: string;
+    /** The wrapper slot of the modal. It wraps the base and the backdrop slots */
+    wrapper?: string;
+    /** The main slot of the modal content */
+    base?: string;
+    /** The header of the modal, it is displayed at the top of the modal */
+    header?: string;
+    /** The body of the modal, it is displayed in the middle of the modal */
+    body?: string;
+    /** The footer of the modal, it is displayed at the bottom of the modal */
+    footer?: string;
+    /** The close button (X) of the modal in top-right corner */
+    closeButton?: string;
+};
+
+declare type MonthlyFeeClassNames = {
+    /** Container for the monthly fee row */
+    container?: string;
+    /** Label text for the monthly fee */
+    label?: string;
+    /** Price value for the monthly fee */
+    price?: string;
+};
+
+declare type MonthlyFeeTransitionClassNames = {
+    /** Container for the transition row */
+    container?: string;
+    /** Label with icon */
+    label?: string;
+    /** Icon */
+    icon?: string;
+    /** Price */
+    price?: string;
+};
+
 declare type NumberPreservationModalClassNames = {
     /** Modal dialog class styling slots - see type `ModalClassNames` */
-    modal?: ModalClassNames_3;
+    modal?: ModalClassNames_4;
     /** Header section containing icon and title */
     header?: {
         /** Container wrapping the header content */
@@ -434,42 +640,6 @@ declare type NumberPreservationModalClassNames = {
     submitButton?: string;
 };
 
-declare type PhoneListContainerClassNames = {
-    base?: string;
-    wrapper?: string;
-    title?: string;
-    description?: string;
-    selectedIcon?: string;
-    item?: string;
-    itemWrapper?: string;
-    itemContent?: string;
-    itemLabel?: string;
-    itemDescription?: string;
-    emptyContent?: string;
-};
-
-export declare function PhoneSelector({ onChange, classNames, disabled, productSlug: initialProductSlug, selectedDistinctProperties: initialSelectedDistinctProperties, }: PhoneSelectorProps): JSX.Element;
-
-declare type PhoneSelectorClassNames = {
-    base?: string;
-    button?: string;
-    /** Filter modal class styling slots - see type `ModalClassNames` */
-    modal?: ModalClassNames;
-    brandTabs?: string;
-    phoneList?: PhoneListContainerClassNames;
-    variantList?: string;
-    confirmButton?: string;
-};
-
-declare type PhoneSelectorProps = {
-    onChange?: (productSlug: string, distinctProperties: VersionDistinctProperty[]) => void;
-    classNames?: PhoneSelectorClassNames;
-    disabled?: boolean;
-    placeholder?: string;
-    productSlug?: string;
-    selectedDistinctProperties?: VersionDistinctProperty[];
-};
-
 declare type PopoverContentClassNames = {
     base?: string;
     trigger?: string;
@@ -494,7 +664,7 @@ declare type PostcodeCheckLoadingClassNames = {
 
 export declare type PostcodeCheckModalClassNames = {
     /** Modal dialog class styling slots - see type `ModalClassNames` */
-    modal?: ModalClassNames_2;
+    modal?: ModalClassNames;
     /** Header section containing icon and title */
     header?: {
         /** Container wrapping the header content */
@@ -525,12 +695,22 @@ export declare type PostcodeCheckModalClassNames = {
             /** Input label styling */
             label?: string;
         };
-        /** Error message container */
-        error?: {
-            /** Error container wrapper */
-            container?: string;
-            /** Error text styling */
-            text?: string;
+        /** Error alert message */
+        errorAlert?: {
+            /** Alert container */
+            base?: string;
+            /** Alert title text */
+            title?: string;
+            /** Alert description text */
+            description?: string;
+            /** Alert main content wrapper */
+            mainWrapper?: string;
+            /** Alert close button */
+            closeButton?: string;
+            /** Alert icon wrapper */
+            iconWrapper?: string;
+            /** Alert icon */
+            alertIcon?: string;
         };
     };
     /** Provider selection section */
@@ -553,51 +733,53 @@ export declare type PostcodeCheckModalClassNames = {
     submitButton?: string;
 };
 
-export declare type PostcodeCheckModalProps = {
-    /** Whether the modal is open */
-    open: boolean;
-    /** Callback function to handle modal open state changes */
-    onOpenChange: (open: boolean) => void;
-    /** Class slots for styling */
-    classNames?: PostcodeCheckModalClassNames;
-    /** Callback function to handle profile changes */
-    onProfileChange?: (profile: Partial<Profile>) => void;
-    /** User profile */
-    profile: Profile;
+declare type PriceRowClassNames = {
+    /** Container for the price row */
+    container?: string;
+    /** Label text */
+    label?: string;
+    /** Price container */
+    priceContainer?: string;
+    /** Original price (strikethrough) */
+    originalPrice?: string;
+    /** Current price */
+    currentPrice?: string;
 };
 
 /**
- * ClassNames for styling the `PricingSection` component within `PropositionCard`
+ * ClassNames for styling the `Pricing` component within `PropositionCard`
  */
-export declare type PricingSectionClassNames = {
+declare type PricingClassNames = {
     /** Wrapper container for the pricing section */
-    base?: string;
-    /** Product price text (one-time payment - only visible for phone propositions)
-     * @example "+ 100,- eenmalig" */
-    productPrice?: string;
-    /** Monthly fee container */
-    monthlyFee?: string;
+    wrapper?: string;
+    /** Promotion text for monthly fee
+     * @example "12 mnd van 10,- voor:" */
+    promotionText?: string;
+    /** Wrapper container for the monthly fee */
+    monthlyFeeWrapper?: string;
     /** Monthly fee value text (price per month)
      * @example "10,-" */
     monthlyFeeValue?: string;
     /** Monthly fee label text
-     * @example "/mnd" */
+     /* @example "/ maand" */
     monthlyFeeLabel?: string;
-    /** Promotion text for monthly fee
-     * @example "12 mnd van 10,- voor:" */
-    promotionText?: string;
-    /** Average price container (TCO per month) */
-    averagePrice?: string;
-};
-
-export declare type PricingSectionProps = Pick<PropositionCardProps, 'onInfoClick' | 'productPrice' | 'monthlyFee' | 'tcoPerMonth' | 'monthlyFeePromotionText'> & {
-    /** Class slots for styling */
-    classNames?: PricingSectionClassNames;
+    /** Product price text (one-time fee for phone)
+     *
+     * Only visible for Smartphone Propositions
+     * @example "+ 100,- eenmalig" */
+    oneTimeFee?: string;
+    /** Wrapper container for the average price */
+    averagePriceWrapper?: string;
+    /** Average price Icon */
+    averagePriceIcon?: string;
+    /** Average price value text (TCO per month)
+     * @example "gem. 54,- / maand" */
+    averagePriceValue?: string;
 };
 
-declare type ProductCategory = 'sim-only-proposition' | 'fixed-proposition' | 'smartphone-proposition' | 'smartphone-proposition-extended';
+export declare type ProductCategory = 'sim-only-proposition' | 'fixed-proposition' | 'smartphone-proposition' | 'smartphone-proposition-extended';
 
-export declare function ProductResults({ productCategory, initialSelectedFilters, limit, classNames, initialProfile, texts, showTopPropositions, onProfileChange, onError, }: ProductResultsProps): JSX.Element;
+export declare function ProductResults({ classNames, initialSelectedFilters, initialProfile, onProfileChange, onError, ...props }: ProductResultsProps): JSX.Element;
 
 /**
  * ClassNames for styling different parts of the `ProductResults` component
@@ -614,13 +796,17 @@ export declare type ProductResultsClassNames = {
     /** Filter button (only on mobile & tablet screens) */
     filterButton?: string;
     /** Filter modal class styling slots - see type `ModalClassNames` */
-    filterModal?: ModalClassNames;
+    filterModal?: ModalClassNames_2;
     /** Postcode check modal class styling slots - see type `PostcodeCheckModalClassNames` */
     postcodeCheckModal?: PostcodeCheckModalClassNames;
+    /** CombiDeal modal class styling slots - see type `CombiDealModalClassNames` */
+    combiDealModal?: CombiDealModalClassNames;
     /** Number preservation modal class styling slots - see type `NumberPreservationModalClassNames` */
     numberPreservationModal?: NumberPreservationModalClassNames;
-    /** Results class styling slots - see type `ResultsClassNames` */
+    /** Proposition results class styling slots - see type `ResultsClassNames` */
     results?: ResultsClassNames;
+    /** Error alert class styling slots - see type `ErrorAlertClassNames` */
+    errorAlert?: ErrorAlertClassNames;
 };
 
 export declare type ProductResultsProps = {
@@ -632,12 +818,15 @@ export declare type ProductResultsProps = {
     showTopPropositions?: boolean;
     /** Customize texts  */
     texts?: {
+        /** Title above profile buttons
+         * @default "Personaliseer" */
+        profileTitle?: string;
         /** Title above top propositions (only shown when `showTopPropositions` is set to `true`)
          * @default "Beste providers voor jou" */
-        topPropositionsTitle: string;
+        topPropositionsTitle?: string;
         /** Title above all propositions (only shown when `showTopPropositions` is set to `true`)
          * @default "Alle providers op een rijtje" */
-        allPropositionsTitle: string;
+        allPropositionsTitle?: string;
     };
     /** Initial selected filters */
     initialSelectedFilters?: FilterValue[];
@@ -649,27 +838,12 @@ export declare type ProductResultsProps = {
     initialProfile?: Partial<Profile>;
     /** Callback function to handle profile changes */
     onProfileChange?: (profile: Partial<Profile>) => void;
+    /** Callback function to add search params for the click-out URL on the proposition cards */
+    addClickoutSearchParams?: (searchParams: URLSearchParams) => URLSearchParams;
     /** Callback function called when an error occurs */
     onError?: (error: Error) => void;
 };
 
-/**
- * ClassNames for styling the `ProductSection` component within `PropositionCard`
- */
-export declare type ProductSectionClassNames = {
-    /** Wrapper container for the entire product section */
-    base?: string;
-    /** Image wrapper, it handles alignment, placement, and general appearance for the product image */
-    imageWrapper?: string;
-    /** Product image element */
-    image?: string;
-    /** Delivery Text Icon " */
-    deliveryTextIcon?: string;
-    /** Delivery Text
-     * @example "Direct leverbaar" */
-    deliveryText?: string;
-};
-
 declare type Profile = z.infer<typeof profileSchema>;
 
 declare const profileSchema: z_2.ZodObject<{
@@ -696,9 +870,9 @@ declare const profileSchema: z_2.ZodObject<{
 }, z_2.core.$strip>;
 
 /**
- * ClassNames for styling the `PromotionsList` component within `PropositionCard`
+ * ClassNames for styling the `PromotionList` component within `PropositionCard`
  */
-export declare type PromotionsListClassNames = {
+declare type PromotionListClassNames = {
     /** Wrapper container for the promotions list */
     base?: string;
     /** Individual promotion item
@@ -706,201 +880,144 @@ export declare type PromotionsListClassNames = {
     item?: string;
     /** Checkmark icon for each promotion item */
     promotionIcon?: string;
-    /** Urgent text chip */
-    urgentChip?: string;
-};
-
-export declare type PromotionsListProps = {
-    /** Promotions to display */
-    promotions: string[];
-    /** Urgent text to display as a chip above promotions
+    /** Urgent text chip (only visible when promotion is urgent)
      * @example "Actie nog 6 dagen" */
-    urgentText?: string;
-    /** Class slots for styling */
-    classNames?: PromotionsListClassNames;
+    urgentChip?: {
+        /** The base slot of the chip, it is the container of the chip */
+        base?: string;
+        /** The content slot of the chip, it is the container of the text */
+        content?: string;
+    };
 };
 
-export declare function PropositionCard({ horizontal, ...props }: PropositionCardProps): JSX.Element;
-
 /**
  * ClassNames for styling different parts of the `PropositionCard` component
  */
-export declare type PropositionCardClassNames = {
-    /** Main card wrapper */
+declare type PropositionCardClassNames = {
+    /** Base wrapper container for the label and proposition card
+     *
+     * Only available when there is a label */
+    cardWrapper?: string;
+    /** Label class styling slots - see type `LabelClassNames`
+     *
+     * Only available when there is a label */
+    label?: LabelClassNames;
+    /** Card container for the proposition card */
     card?: string;
-    /** Card header wrapper around `productSection` and `propositionHeader` */
-    header?: string;
-    /** Card body wrapper around `specifications`, `urgentChip` and `promotionsList` */
-    body?: string;
-    /** Card footer wrapper around `pricingSection` and `button` */
-    footer?: string;
-    /** Image wrapper for proposition provider image (only on Horizontal card)
+    /** Specific section wrapper styles for horizontal card layout  */
+    horizontalCard?: {
+        /** Card header wrapper around `mainImage` */
+        header?: string;
+        /** Vertical divider between `header` and `body` */
+        divider?: string;
+        /** Card body wrapper around `propositionHeader` and `promotionList` */
+        body?: string;
+        /** Card footer wrapper around `pricing` and `button` */
+        footer?: string;
+    };
+    /** Specific section wrapper styles for vertical card layout  */
+    verticalCard?: {
+        /** Card header wrapper around `mainImage` */
+        header?: string;
+        /** Card body wrapper around `propositionHeader` and `promotionList` */
+        body?: string;
+        /** Horizontal divider between `body` and `footer` */
+        divider?: string;
+        /** Card footer wrapper around `pricing` and `button` */
+        footer?: string;
+    };
+    /** Main image class styling slots - see type `MainImageClassNames`
+     *
+     * Within the `header` section */
+    mainImage?: MainImageClassNames;
+    /** Proposition header class styling slots - see type `PropositionHeaderClassNames`
      *
-     * It handles alignment, placement, and general appearance for the proposition provider image */
-    imageWrapper?: string;
-    /** Proposition provider image (only on Horizontal card) */
-    image?: string;
-    /** Product section (only visible for smartphone propositions) class styling slots - see type `ProductSectionClassNames` */
-    productSection?: ProductSectionClassNames;
-    /** Proposition header class styling slots - see type `PropositionHeaderClassNames` */
+     * Within the `body` section */
     propositionHeader?: PropositionHeaderClassNames;
-    /** Pricing section class styling slots - see type `PricingSectionClassNames` */
-    pricingSection?: PricingSectionClassNames;
-    /** Promotions list class styling slots - see type `PromotionsListClassNames` */
-    promotionsList?: PromotionsListClassNames;
-    /** Specifications grid (only visible for sim only and fixed propositions)
-     * @example
-     * - "2 jaar"
-     * - "350 / 400 Mb/s"
-     * - "66 (60 HD)"
-     * - "Via TV app" */
-    specifications?: string;
-    /** Urgent text chip (only visible when promotion is urgent)
-     * @example "Actie nog 6 dagen" */
-    urgentChip?: string;
+    /** Promotion list class styling slots - see type `PromotionListClassNames`
+     *
+     * Within the `body` section */
+    promotionList?: PromotionListClassNames;
+    /** Pricing section class styling slots - see type `PricingClassNames`
+     *
+     * Within the `footer` section */
+    pricing?: PricingClassNames;
     /** Call To Action button
+     *
+     * Within the `footer` section
      * @example "Bekijk" */
     button?: string;
-    /** Card wrapper (container for the label and card) */
-    cardWrapper?: string;
-    /** Label class styling slots - see type `LabelClassNames` */
-    label?: LabelClassNames;
-};
-
-export declare type PropositionCardProps = {
-    /** Click handler on the card */
-    onClick: (e: {
-        target: Element;
-    }) => void;
-    /** Click handler to open the details modal */
-    onInfoClick: (tab: 'general' | 'conditions' | 'channels' | 'costs') => void;
-    /** Whether the proposition is disabled */
-    disabled?: boolean;
-    /** Product title - should include brand + phone name
-     * @example "Apple iPhone 17" */
-    productTitle?: string;
-    /** Product image URL */
-    productImageUrl?: string;
-    /** Product image alt text */
-    productImageAlt?: string;
-    /** Product stock status
-     * @example "in_stock" */
-    productStockStatus?: string;
-    /** Product price
-     * @example "100,-" */
-    productPrice?: string;
-    /** Proposition title
-     * @example "30 GB" */
-    propositionTitle: string;
-    /** Proposition subtitle
-     * @example "Onbp min / sms" */
-    propositionSubtitle: string;
-    /** Proposition image URL */
-    propositionImageUrl: string;
-    /** Proposition image alt text */
-    propositionImageAlt: string;
-    /** Proposition specifications */
-    propositionSpecifications?: {
-        slug: string;
-        title: string;
-    }[];
-    /** Monthly fee for subscription
-     * @example "10,-" */
-    monthlyFee: string;
-    /** Average total cost per month
-     * @example "10,-" */
-    tcoPerMonth: string;
-    /** Special promotions
-     * @example ["Geen aansluitingskosten"] */
-    specialPromotions: string[];
-    /** Modification promotions
-     * @example ["€ 4,50 korting per maand"] */
-    modificationPromotions: string[];
-    /** Monthly fee promotion text
-     * @example "12 mnd van 10,- voor:" */
-    monthlyFeePromotionText?: string;
-    /** Device discount
-     * @example "100,-" */
-    deviceDiscount?: string;
-    /** Urgent text for urgent special promotion
-     * @example "Actie nog 6 dagen" */
-    urgentText?: string;
-    /** Label properties to display above the card */
-    label?: Pick<PropositionLabel, 'displayName' | 'color'>;
-    /** Class slots for styling */
-    classNames?: PropositionCardClassNames;
-    horizontal?: boolean;
 };
 
 /**
  * ClassNames for styling the `PropositionHeader` component within `PropositionCard`
  */
-export declare type PropositionHeaderClassNames = {
+declare type PropositionHeaderClassNames = {
     /** Wrapper container for the proposition header */
     base?: string;
-    /** Image wrapper, it handles alignment, placement, and general appearance for the proposition provider image (only on Vertical card) */
-    imageWrapper?: string;
-    /** Proposition provider image element (only on Vertical card) */
-    image?: string;
-    /** Proposition title text
-     * @example "30 GB"
-     * @example "100 Mb/s" */
-    title?: string;
-    /** Proposition subtitle text
-     * @example "Onbp min / sms"
-     * @example "Glasvezel" */
-    subtitle?: string;
-    /** Specifications container */
-    specifications?: string;
-};
-
-export declare type PropositionHeaderProps = {
-    /** Product title (for smartphone propositions) - should include brand + phone name
-     * @example "Apple iPhone 17" */
-    productTitle?: string;
-    /** Proposition title text
-     * @example "30 GB"
-     * @example "100 Mb/s" */
-    propositionTitle: string;
-    /** Proposition subtitle text
-     * @example "Onbp min / sms"
-     * @example "Glasvezel" */
-    propositionSubtitle: string;
-    /** Proposition provider image URL */
-    imageUrl?: string;
-    /** Proposition provider image alt text */
-    imageAlt?: string;
-    /** Whether the proposition has a product/phone */
-    hasProduct: boolean;
-    /** Proposition specifications */
-    propositionSpecifications?: {
-        slug: string;
-        title: string;
-    }[];
-    /** Click handler to open the details modal */
-    onInfoClick?: (tab: 'general' | 'conditions' | 'channels' | 'costs') => void;
-    /** Class slots for styling */
-    classNames?: PropositionHeaderClassNames;
-    horizontal?: boolean;
+    /** Wrapper container for the title, subtitle and optional provider image */
+    titleWrapper?: string;
+    /** Phone class styling slots
+     *
+     * Only available for Smartphone Propositions when no phone is selected */
+    phone?: {
+        /** Phone title text
+         * @example "Apple iPhone 16" */
+        title?: string;
+        /** Phone subtitle text
+         * @example "20 GB • Onbp min / sms" */
+        subtitle?: string;
+        /** Wrapper container for the provider image */
+        providerImageWrapper?: string;
+        /** Provider image element */
+        providerImage?: string;
+    };
+    /** Proposition class styling slots
+     *
+     * Not available for Smartphone Propositions when no phone is selected */
+    proposition?: {
+        /** Wrapper container for the proposition title and subtitle */
+        wrapper?: string;
+        /** Proposition title text
+         * @example "30 GB"
+         * @example "100 Mb/s" */
+        title?: string;
+        /** Proposition subtitle text
+         * @example "Onbp min / sms"
+         * @example "Glasvezel" */
+        subtitle?: string;
+        /** Specifications class styling slots */
+        specifications?: {
+            /** Wrapper container for the specifications */
+            wrapper?: string;
+            /** Specification item text
+             * @example "2 jaar"
+             * @example "350 / 400 Mb/s"
+             * @example "66 (60 HD)" */
+            item?: string;
+            /** Specification icon */
+            icon?: string;
+        };
+    };
 };
 
-declare type PropositionLabel = {
-    type: PropositionLabelType;
-    displayName: string;
-    rank: number;
-    color: PropositionLabelColor;
+declare type PropositionOverviewClassNames = {
+    /** The base container of the proposition overview */
+    base?: string;
+    /** Average per month section class names */
+    averageSection?: AverageSectionClassNames;
+    /** Discount section class names (for smartphone products) */
+    discountSection?: DiscountSectionClassNames;
+    /** Credit info label text */
+    creditInfoLabel?: string;
+    /** Credit info component class styling slots - see type `CreditInfoClassNames` */
+    creditInfo?: CreditInfoClassNames_2;
 };
 
-declare type PropositionLabelColor = 'primary' | 'secondary' | 'default';
-
-declare type PropositionLabelType = 'isRetention' | 'isCheapestPhone' | 'isBudget' | 'isBudgetFiber' | 'isCombi' | 'isFastestInternet' | 'isBudgetOwnNetwork' | 'isBudgetNetwork';
-
-export declare function RadioFilter({ id, options, value, onChange, classNames, }: RadioFilterProps): JSX.Element;
-
 /**
  * ClassNames for styling different parts of the `RadioFilter` component
  */
-export declare type RadioFilterClassNames = {
+declare type RadioFilterClassNames = {
     /** Radio group */
     radioGroup?: {
         /** Radio group root wrapper, it wraps the label and the wrapper */
@@ -933,21 +1050,6 @@ export declare type RadioFilterClassNames = {
     };
 };
 
-export declare type RadioFilterProps = {
-    /** Unique identifier for this filter */
-    id: string;
-    /** Available options to display as radio options */
-    options: FilterOption['options'];
-    /** Currently selected value */
-    value?: string;
-    /** Callback when selection changes */
-    onChange: (value: string) => void;
-    /** Class slots for styling */
-    classNames?: RadioFilterClassNames;
-};
-
-export declare function RangeFilter({ min, max, step, value, options, maxOptionValue, marks, formatType, onChange, classNames, }: SliderFilterProps): JSX.Element;
-
 declare type ResultsClassNames = {
     /** Title above top propositions (only shown when `showTopPropositions` is set to `true`)
      * @example "Beste providers voor jou" */
@@ -959,6 +1061,8 @@ declare type ResultsClassNames = {
     topPropositionsGrid?: string;
     /** Grid wrapper of the all propositions */
     allPropositionsGrid?: string;
+    /** Skeleton card shown in the loading state */
+    skeletonCard?: string;
     /** Results not found component class styling slots - see type `ResultsNotFoundClassNames` */
     resultsNotFound?: ResultsNotFoundClassNames;
     /** Credit info component class styling slots - see type `CreditInfoClassNames` */
@@ -969,6 +1073,8 @@ declare type ResultsClassNames = {
     propositionCard?: PropositionCardClassNames;
     /** PostcodeCheck loading card class styling slots (only for fixed propositions) - see type `PostcodeCheckLoadingClassNames` */
     postcodeCheckLoading?: PostcodeCheckLoadingClassNames;
+    /** Details modal class styling slots - see type `DetailsModalClassNames` */
+    detailsModal?: DetailsModalClassNames;
 };
 
 declare type ResultsNotFoundClassNames = {
@@ -998,44 +1104,19 @@ declare type ResultsNotFoundClassNames = {
     };
 };
 
-/** All built-in and custom scalars, mapped to their actual values */
-declare type Scalars = {
-    ID: {
-        input: string;
-        output: string;
-    };
-    String: {
-        input: string;
-        output: string;
-    };
-    Boolean: {
-        input: boolean;
-        output: boolean;
-    };
-    Int: {
-        input: number;
-        output: number;
-    };
-    Float: {
-        input: number;
-        output: number;
-    };
-    Json: {
-        input: any;
-        output: any;
-    };
-    Value: {
-        input: any;
-        output: any;
-    };
+declare type SectionClassNames = {
+    /** Link text value */
+    link?: string;
+    /** The title of the table section, it is the title of the table section */
+    title?: string;
+    /** Table class names */
+    table?: TableClassNames;
 };
 
-export declare function SelectFilter({ id, options, values, onChange, classNames, }: SelectFilterProps): JSX.Element;
-
 /**
  * ClassNames for styling different parts of the `SelectFilter` component
  */
-export declare type SelectFilterClassNames = {
+declare type SelectFilterClassNames = {
     /** Checkbox group */
     checkboxGroup?: {
         /** Checkbox group root wrapper, it wraps the label and the wrapper */
@@ -1062,77 +1143,17 @@ export declare type SelectFilterClassNames = {
         /** The text associated with the checkbox */
         label?: string;
     };
-};
-
-export declare type SelectFilterProps = {
-    /** Unique identifier for this filter */
-    id: string;
-    /** Available options to display as checkboxes */
-    options: FilterOption['options'];
-    /** Currently selected values */
-    values?: string[];
-    /** Callback when selection changes */
-    onChange: (values: string[]) => void;
-    /** Class slots for styling */
-    classNames?: SelectFilterClassNames;
-};
-
-export declare function Selector({ classNames, onClick, disabled, title, description, imageUrl, imageAlt, Icon, avatarName, selected, }: SelectorProps): JSX.Element;
-
-/**
- * ClassNames for styling different parts of the `Selector` component
- */
-export declare type SelectorClassNames = {
-    /** Title text styling */
-    title?: string;
-    /** Description text styling */
-    description?: string;
-    /** Main button wrapper */
-    button?: string;
-    /** Badge component (visible when not selected) */
-    badge?: string;
-    /** Avatar component displaying the image or icon */
-    avatar?: {
-        /** Base wrapper styling for the avatar container */
-        base?: string;
-        /** Image element styling */
-        img?: string;
-        /** Name text styling (when displaying initials) */
-        name?: string;
-        /** Icon wrapper styling */
-        icon?: string;
-        /** Fallback content styling (when no image is available) */
-        fallback?: string;
-    };
-};
-
-export declare type SelectorProps = {
-    /** Class slots for styling */
-    classNames?: SelectorClassNames;
-    /** Main title text */
-    title: string;
-    /** Optional description text below the title */
-    description?: string;
-    /** Whether the selector is in selected state */
-    selected?: boolean;
-    /** Click handler for the selector */
-    onClick: () => void;
-    /** Icon component to display as fallback when no image is provided */
-    Icon?: React.ElementType;
-    /** Name to display as initials in the avatar when no image is available */
-    avatarName?: string;
-    /** Image URL for the avatar */
-    imageUrl?: string | null;
-    /** Alt text for the image */
-    imageAlt?: string | null;
-    /** Whether the selector is disabled */
-    disabled?: boolean;
+    /** Link to collapse the options
+     * @example "Bekijk meer (2)"
+     * @example "Bekijk minder"
+     */
+    collapseLink?: string;
 };
 
 /**
  * ClassNames for styling different parts of the `RangeFilter`, `MinFilter` and `MaxFilter` component
  */
-export declare type SliderFilterClassNames = {
+declare type SliderFilterClassNames = {
     /** The foundational slot, encompassing all other slots and elements
      *
      * It serves as the primary container */
@@ -1162,42 +1183,6 @@ export declare type SliderFilterClassNames = {
     thumb?: string;
 };
 
-export declare type SliderFilterProps = {
-    /** Unique identifier for this filter */
-    id: string;
-    /** Minimum value of the range */
-    min: number;
-    /** Maximum value of the range */
-    max: number;
-    /** Step increment for the slider
-     * @example 5 */
-    step: number;
-    /** Available fixed values within the slider
-     * @example "[0,100,150,200,400,UNLIMITED]" // from 0 to Unlimited */
-    options: number[];
-    /** The maximum value of the slider, calculated from the options and step */
-    maxOptionValue: number;
-    /** Currently selected value
-     * @example "150-400" // Range: from 150 to 400
-     * @example "150-" // Min: from 150
-     * @example "-400" // Max: up to 400
-     */
-    value?: string;
-    /** The marks to display on the Slider's steps. */
-    marks: {
-        /** The value corresponding to the mark */
-        value: number;
-        /** The label text of the mark */
-        label: string;
-    }[];
-    /** Format type for the filter value */
-    formatType?: FilterOption['formatType'];
-    /** Callback when value changes */
-    onChange: (value: string) => void;
-    /** Class slots for styling */
-    classNames?: SliderFilterClassNames;
-};
-
 declare type SortSelectClassNames = {
     description?: string;
     errorMessage?: string;
@@ -1217,11 +1202,60 @@ declare type SortSelectClassNames = {
     endWrapper?: string;
 };
 
-declare type VersionDistinctProperty = {
-    __typename?: 'VersionDistinctProperty';
-    key: Scalars['String']['output'];
-    label: Scalars['String']['output'];
-    option: DistinctPropertyOption;
+declare type TableClassNames = {
+    /** Defines a flexible column layout and relative positioning for the table component */
+    base?: string;
+    /** Applies to the outermost wrapper, providing padding, flexible layout, relative positioning, visual styles, and scrollable overflow handling */
+    wrapper?: string;
+    /** Sets the table to have a full minimum width and auto-adjusting height */
+    table?: string;
+    /** Specifies rounded corners for the first child row in the table header */
+    thead?: string;
+    /** No specific styles are applied to the body of the table */
+    tbody?: string;
+    /** Styles for table rows including group focus, outline properties, and a set of undefined focus-visible classes */
+    tr?: string;
+    /** Styles for table headers, including padding, text alignment, font properties, and special styles for sortable columns */
+    th?: string;
+    /** Applies to table cells, with properties for padding, alignment, and relative positioning, plus special styles for first child elements, selection indication, and disabled cells */
+    td?: string;
+};
+
+declare type TableClassNames_2 = {
+    /** Defines a flexible column layout and relative positioning for the table component */
+    base?: string;
+    /** Applies to the outermost wrapper, providing padding, flexible layout, relative positioning, visual styles, and scrollable overflow handling */
+    wrapper?: string;
+    /** Sets the table to have a full minimum width and auto-adjusting height */
+    table?: string;
+    /** Specifies rounded corners for the first child row in the table header */
+    thead?: string;
+    /** No specific styles are applied to the body of the table */
+    tbody?: string;
+    /** Styles for table rows including group focus, outline properties, and a set of undefined focus-visible classes */
+    tr?: string;
+    /** Styles for table headers, including padding, text alignment, font properties, and special styles for sortable columns */
+    th?: string;
+    /** Applies to table cells, with properties for padding, alignment, and relative positioning, plus special styles for first child elements, selection indication, and disabled cells */
+    td?: string;
 };
 
+declare type TabsClassNames = {
+    /** The base slot of the tabs component */
+    base?: string;
+    /** The tab list container */
+    tabList?: string;
+    /** Individual tab */
+    tab?: string;
+    /** Tab panel */
+    panel?: string;
+    /** Tab cursor (active indicator) */
+    cursor?: string;
+};
+
+declare type TermsClassNames = {
+    /** The base slot of the terms section, it is the container of the terms section */
+    base?: string;
+} & SectionClassNames;
+
 export { }