@mobielnl/elements 0.12.23 → 0.12.24

package/dist/{index-D7hWcsBq.js → index-V6otpA26.js}

@@ -1,5 +1,5 @@
 "use client";
-import { n as j, i as N, m as Z, r as ze, h as qe, a as Lt, w as Q, b as pe, c as Ce, d as Xe, e as oe, f as Pe, t as O, g as Nt, j as G, v as Gt, k as $, M as H, K as Ye, l as $t, o as Ht, p as ge, q as Wt, s as _t, u as jt, x as Je, y as Ut, z as zt, A as qt, B as ke, C as Fe, D as z, E as Oe, F as Xt, V as Yt, G as Jt, H as Zt, I as Qt, J as en, L as tn, N as Ze, O as nn, P as sn, Q as rn, R as an, S as on, T as Qe, U as et, W as tt, X as nt, Y as ln } from "./index-q4BtYrTI.js";
+import { n as j, i as N, m as Z, r as ze, h as qe, a as Lt, w as Q, b as pe, c as Ce, d as Xe, e as oe, f as Pe, t as O, g as Nt, j as G, v as Gt, k as $, M as H, K as Ye, l as $t, o as Ht, p as ge, q as Wt, s as _t, u as jt, x as Je, y as Ut, z as zt, A as qt, B as ke, C as Fe, D as z, E as Oe, F as Xt, V as Yt, G as Jt, H as Zt, I as Qt, J as en, L as tn, N as Ze, O as nn, P as sn, Q as rn, R as an, S as on, T as Qe, U as et, W as tt, X as nt, Y as ln } from "./index-D3B78uDJ.js";
 import { Fragment as un } from "react";
 var Bt = typeof globalThis < "u" && globalThis.process ? globalThis.process : { env: { NODE_ENV: "production" } };
 // @__NO_SIDE_EFFECTS__

package/dist/index.d.ts

@@ -110,6 +110,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 +136,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 +230,8 @@ declare type CheckboxGroupClassNames = {
         icon?: string;
         /** The text associated with the checkbox */
         label?: string;
+        /** Bundle Price component class styling slots - see type `BundlePriceClassNames` */
+        bundlePrice?: BundlePriceClassNames;
     };
 };
 
@@ -1410,6 +1434,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` */
@@ -1818,6 +1844,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,10 +1863,22 @@ 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;
     };
@@ -1871,6 +1915,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 */
@@ -1993,6 +2044,8 @@ declare type RadioGroupClassNames = {
         control?: string;
         /** Description slot for the radio */
         description?: string;
+        /** Bundle Price component class styling slots - see type `BundlePriceClassNames` */
+        bundlePrice?: BundlePriceClassNames;
     };
 };
 
@@ -2604,6 +2657,7 @@ export declare type Translations = {
         productVersionTitle: string;
         benefitsTitle: string;
         bundleSelectorTitle: string;
+        moreBundleInfo: string;
         totalCostsOverviewTitle: string;
         cta: string;
         handsetCreditTitle: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mobielnl/elements",
-  "version": "0.12.23",
+  "version": "0.12.24",
   "description": "Mobiel.nl Elements - React component library for partner websites",
   "private": false,
   "type": "module",
@@ -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"