@mobielnl/elements 0.12.23 → 0.12.25

package/dist/index.d.ts

@@ -30,6 +30,23 @@ export declare type AddToCartEvent = {
     proposition: ProductCardPropositionFragment;
 };
 
+declare type AlertClassNames = {
+    /** 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;
+};
+
 declare type AverageSectionClassNames = {
     /** Container for the average per month section */
     container?: string;
@@ -110,6 +127,22 @@ declare type BundleModalClassNames = {
     confirmButton?: string;
 };
 
+/**
+ * ClassNames for styling different parts of the `BundlePrice` component
+ */
+declare type BundlePriceClassNames = {
+    /** The base container for the pricing and promotion text */
+    base?: string;
+    /** The wrapper container for the pricing */
+    wrapper?: string;
+    /** The normal price of the radio */
+    normalPrice?: string;
+    /** The promotion price of the radio */
+    promotionPrice?: string;
+    /** The promotion text of the radio */
+    promotionText?: string;
+};
+
 /**
  * ClassNames for styling different parts of the `BundleSelector` component
  */
@@ -120,12 +153,18 @@ declare type BundleSelectorClassNames = {
     contractTermGroup?: string;
     /** Contract term section heading */
     contractTermLabel?: string;
+    /** Contract term section heading number */
+    contractTermLabelNumber?: string;
     /** Contract term radio group class styling slots - see type `RadioGroupClassNames` */
     contractTermRadioGroup?: RadioGroupClassNames;
     /** Container wrapping each bundle type set heading and its radio/checkbox group */
     bundleTypeSetGroup?: string;
     /** Bundle type set section heading */
     bundleTypeSetLabel?: string;
+    /** Bundle type set section heading number */
+    bundleTypeSetLabelNumber?: string;
+    /** Bundle type set section heading info icon */
+    bundleTypeSetLabelInfoIcon?: string;
     /** Button that opens the modal with more bundle options */
     showMoreButton?: string;
     /** Bundle type set radio group class styling slots (used when `multiSelect` is false) - see type `RadioGroupClassNames` */
@@ -208,6 +247,12 @@ declare type CheckboxGroupClassNames = {
         icon?: string;
         /** The text associated with the checkbox */
         label?: string;
+        /** Bundle Price component class styling slots - see type `BundlePriceClassNames` */
+        bundlePrice?: BundlePriceClassNames;
+        /** Image wrapper */
+        imgWrapper?: string;
+        /** Image */
+        img?: string;
     };
 };
 
@@ -548,22 +593,7 @@ declare type ErrorAlertClassNames = {
     /** Main wrapper container for the error component */
     base?: string;
     /** Alert component class styling slots */
-    alert?: {
-        /** 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;
-    };
+    alert?: AlertClassNames;
     /** Refresh page button */
     button?: string;
 };
@@ -1410,6 +1440,8 @@ declare type ProductHeaderClassNames = {
     };
     /** Stock status indicator – see ProductStockStatus */
     productStockStatus?: NonNullable<MainImageClassNames['phoneImage']>['stockIndicator'];
+    /** Wrapper container for the proposition header and promotion list */
+    propositionHeaderPromotionListWrapper?: string;
     /** Proposition header class styling slots */
     propositionHeader?: PropositionHeaderClassNames;
     /** Carousel class styling slots (smartphone product images) - see type `CarouselClassNames` */
@@ -1806,6 +1838,11 @@ export declare function PropositionSelector({ propositionKey, classNames, initia
 export declare type PropositionSelectorClassNames = {
     /** Wrapper container for the entire proposition selector */
     base?: string;
+    /** Main content wrapper container */
+    mainContentWrapper?: string;
+    /** Alert class styling slots - see type `AlertClassNames`
+     * @note only visible for fixed propositions with the same fixed provider in profile */
+    sameFixedProviderAlert?: AlertClassNames;
     /** HandsetCreditSelector component class styling slots - see type `HandsetCreditSelectorClassNames` */
     handsetCreditSelector?: HandsetCreditSelectorClassNames;
     /** ProductHeader class styling slots - see type `ProductHeaderClassNames` */
@@ -1818,6 +1855,12 @@ export declare type PropositionSelectorClassNames = {
     promotionList?: PromotionListClassNames;
     /** PropositionSpecifications class styling slots (bundle info section) */
     propositionSpecifications?: {
+        /** Base container for the bundle info section */
+        base?: string;
+        /** Title for the bundle info section */
+        title?: string;
+        /** Link for the bundle info section */
+        link?: string;
         /** Wrapper container for the specifications */
         wrapper?: string;
         /** Specification item */
@@ -1831,15 +1874,31 @@ export declare type PropositionSelectorClassNames = {
     extraCosts?: string;
     /** Sidebar card containing the cost overview, CTA button and extra costs */
     sidebarCard?: {
+        /** Sidebar layout wrapper container for the sidebar card and content below the CTA
+         *
+         * @note Desktop: This wrapper the second column of the layout and is sticky to the top of the screen
+         */
+        layoutWrapper?: string;
         /** The Card wrapper element */
         base?: string;
+        /** Wrapper container for the title and provider image */
+        titleWrapper?: string;
         /** The "Totale kosten overzicht" title heading */
         title?: string;
+        /** Provider image – wrapper and img */
+        providerImage?: {
+            wrapper?: string;
+            img?: string;
+        };
         /** The add-to-cart CTA button */
         ctaButton?: string;
     };
     /** BundleSelector component class styling slots - see type `BundleSelectorClassNames` */
     bundleSelector?: BundleSelectorClassNames;
+    /** Retention section class styling slots - see type `SectionClassNames` */
+    retentionSelector?: SectionClassNames_2;
+    /** Modification section class styling slots - see type `SectionClassNames` */
+    modificationSelector?: SectionClassNames_2;
     /** BundleModal component class styling slots - see type `BundleModalClassNames` */
     bundleModal?: BundleModalClassNames;
     /** Profile buttons component class styling slots - see type `SelectorClassNames` */
@@ -1871,6 +1930,13 @@ export declare type PropositionSelectorProps = {
     /** Target for the click-out URL on mobiel.nl
      * @default 'cart' */
     clickOutTarget?: 'cart' | 'checkout';
+    /** Custom ReactNode content below the CTA card component
+     *
+     * @note Desktop: Content will be displayed below the CTA card component in the sidebar/second column
+     * @note Mobile: Content will be displayed below the CTA card component at the bottom of the screen
+     * @default null
+     */
+    contentBelowCTA?: ReactNode;
     /** Callback function to handle proposition key changes */
     onPropositionKeyChange?: (propositionKey: string) => void;
     /** Callback function to handle profile changes */
@@ -1916,6 +1982,8 @@ export declare type PropositionSelectorProps = {
      * }}
      */
     onRender?: () => void;
+    /** Boolean to hide number retention question when profile if filled. Does not apply to fixed propositions */
+    hideRetentionOnFilledProfile?: boolean;
 };
 
 export declare type ProviderOption = {
@@ -1993,6 +2061,12 @@ declare type RadioGroupClassNames = {
         control?: string;
         /** Description slot for the radio */
         description?: string;
+        /** Bundle Price component class styling slots - see type `BundlePriceClassNames` */
+        bundlePrice?: BundlePriceClassNames;
+        /** Image wrapper */
+        imgWrapper?: string;
+        /** Image */
+        img?: string;
     };
 };
 
@@ -2061,6 +2135,20 @@ declare type SectionClassNames = {
     table?: TableClassNames;
 };
 
+/**
+ * ClassNames for styling different parts of the `Section` component
+ */
+declare type SectionClassNames_2 = {
+    /** Root container */
+    base?: string;
+    /** Section title */
+    title?: string;
+    /** Section number pill */
+    number?: string;
+    /** Section description */
+    description?: string;
+};
+
 /**
  * ClassNames for styling different parts of the `SelectFilter` component
  */
@@ -2601,9 +2689,12 @@ export declare type Translations = {
     };
     propositionSelector: {
         return: string;
+        sameFixedProviderTitle: string;
+        sameFixedProviderDescription: string;
         productVersionTitle: string;
         benefitsTitle: string;
         bundleSelectorTitle: string;
+        moreBundleInfo: string;
         totalCostsOverviewTitle: string;
         cta: string;
         handsetCreditTitle: string;
@@ -2615,6 +2706,14 @@ export declare type Translations = {
         installationFee: string;
         none: string;
         showMore: string;
+        retentionTitle: string;
+        retentionDescription: string;
+        retentionYes: string;
+        retentionNo: string;
+        modificationTitle: string;
+        modificationDescription: string;
+        modificationYes: string;
+        modificationNo: string;
     };
     handsetCreditSelector: {
         handsetPriceInfo: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mobielnl/elements",
-  "version": "0.12.23",
+  "version": "0.12.25",
   "description": "Mobiel.nl Elements - React component library for partner websites",
   "private": false,
   "type": "module",
@@ -50,14 +50,14 @@
     "@graphql-codegen/typescript-operations": "^4.4.0",
     "@heroui/accordion": "^2.2.29",
     "@heroui/alert": "^2.2.29",
-    "@heroui/avatar": "^2.2.24",
+    "@heroui/avatar": "^2.2.25",
     "@heroui/badge": "^2.2.18",
     "@heroui/button": "^2.2.29",
     "@heroui/card": "^2.2.27",
     "@heroui/checkbox": "^2.3.29",
     "@heroui/chip": "^2.2.24",
     "@heroui/divider": "^2.2.21",
-    "@heroui/image": "^2.2.18",
+    "@heroui/image": "^2.2.19",
     "@heroui/input": "^2.4.30",
     "@heroui/link": "^2.2.25",
     "@heroui/listbox": "^2.3.28",
@@ -108,7 +108,7 @@
     "swr": "^2.3.2",
     "tailwindcss": "^4.1.18",
     "typescript": "~5.8.3",
-    "vite": "7.3.2",
+    "vite": "7.3.5",
     "vite-plugin-dts": "^4.5.0",
     "vitest": "^4.1.8",
     "zod": "^4.1.12"