@mobielnl/elements 0.4.0 → 0.6.1

package/dist/{index-BD8t3ZMS.js → index-DkHYB7u1.js}

@@ -1,5 +1,5 @@
 "use client";
-import { r as pt, t as Z, i as Re, a as q, n as De, p as mt, b as fn, c as Ve, d as pn, v as mn, e as gn, f as x, g as le, s as vn, h as yn, j as Ie, k as H, l as gt, m as Y, o as bn, q as Tn, u as te, w as ue, x as I, y as ne, z as Vn, A as An, B as vt, C as Ne, D as Sn, E as wn, F as Pn, G as D, H as yt, I as bt, J as Tt, K as je, L as Vt, M as xn, N as Cn, O as Mn, P as ze, Q as Fn, R as On, S as Rn, T as Dn, U as In, V as Nn, W as Kn, X as En, Y as Bn, Z as Ln, _ as kn } from "./index-CJzOpHdk.js";
+import { r as pt, t as Z, i as Re, a as q, n as De, p as mt, b as fn, c as Ve, d as pn, v as mn, e as gn, f as x, g as le, s as vn, h as yn, j as Ie, k as H, l as gt, m as Y, o as bn, q as Tn, u as te, w as ue, x as I, y as ne, z as Vn, A as An, B as vt, C as Ne, D as Sn, E as wn, F as Pn, G as D, H as yt, I as bt, J as Tt, K as je, L as Vt, M as xn, N as Cn, O as Mn, P as ze, Q as Fn, R as On, S as Rn, T as Dn, U as In, V as Nn, W as Kn, X as En, Y as Bn, Z as Ln, _ as kn } from "./index-DAyzaGWL.js";
 import { Fragment as _n } from "react";
 var ae = typeof globalThis < "u" && globalThis.process ? globalThis.process : { env: { NODE_ENV: "production" } };
 function At(t, e) {

package/dist/index.d.ts

@@ -1,5 +1,10 @@
+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';
 
@@ -55,6 +60,16 @@ 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']>;
+};
+
 /**
  * ClassNames for styling the `ElementsRoot` component
  */
@@ -86,6 +101,57 @@ 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 = {
+    /** 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;
+    };
+    /** Refresh page button */
+    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 = {
@@ -185,35 +251,6 @@ declare type FilterValue = {
     value: string | string[];
 };
 
-/**
- * ClassNames for styling the `FooterInfo` component within `PropositionCard`
- */
-export declare type FooterInfoClassNames = {
-    /** Wrapper container for the footer info section */
-    base?: string;
-    /** tcoPerMonth/average price text
-     * @example "gem. 10,- /mnd" */
-    averagePrice?: string;
-    /** Device discount text
-     * @example "100,- toestelkorting" */
-    deviceDiscount?: string;
-};
-
-export declare type FooterInfoProps = {
-    /** Device discount text
-     * @example "100,- toestelkorting" */
-    deviceDiscount?: string;
-    /** Average total cost per month text
-     * @example "gem. 10,- /mnd" */
-    tcoPerMonth?: string;
-    /** Class slots for styling */
-    classNames?: FooterInfoClassNames;
-    /** Whether the PropositionCard is horizontal */
-    horizontal?: boolean;
-    /** Whether the footer info is for a proposition with a product */
-    hasProduct?: boolean;
-};
-
 declare type GetPageByPathQuery = {
     __typename?: 'RootQueryType';
     page?: {
@@ -261,6 +298,8 @@ declare type ListBoxClassNames = {
     selectedIcon?: string;
 };
 
+declare type Maybe<T> = T | null;
+
 declare type ModalClassNames = {
     /** The backdrop slot, it is displayed behind the modal */
     backdrop?: string;
@@ -282,6 +321,59 @@ declare type ModalClassNames = {
     primaryButton?: 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 */
+    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 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;
@@ -304,6 +396,80 @@ declare type PostcodeCheckLoadingClassNames = {
     addressText?: string;
 };
 
+export declare type PostcodeCheckModalClassNames = {
+    /** Modal dialog class styling slots - see type `ModalClassNames` */
+    modal?: ModalClassNames_2;
+    /** Header section containing icon and title */
+    header?: {
+        /** Container wrapping the header content */
+        container?: string;
+        /** Icon wrapper with background */
+        iconWrapper?: string;
+        /** Home location icon */
+        icon?: string;
+        /** Main title text */
+        title?: string;
+        /** Description text below title */
+        description?: string;
+    };
+    /** Form section for address input */
+    form?: {
+        /** Form element container */
+        container?: string;
+        /** Address section label */
+        addressLabel?: string;
+        /** Container for postcode, number, and numberAddon inputs */
+        inputsContainer?: string;
+        /** Input field styling slots */
+        input?: {
+            /** Input wrapper styling */
+            inputWrapper?: string;
+            /** Input element styling */
+            input?: string;
+            /** Input label styling */
+            label?: string;
+        };
+        /** Error message container */
+        error?: {
+            /** Error container wrapper */
+            container?: string;
+            /** Error text styling */
+            text?: string;
+        };
+    };
+    /** Provider selection section */
+    provider?: {
+        /** Provider section label */
+        label?: 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;
+        };
+    };
+    /** Submit button styling */
+    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;
+};
+
 /**
  * ClassNames for styling the `PricingSection` component within `PropositionCard`
  */
@@ -324,25 +490,18 @@ export declare type PricingSectionClassNames = {
     /** 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 = {
-    /** Promotion text for monthly fee
-     * @example "12 mnd van 10,- voor:" */
-    monthlyFeePromotionText?: string;
-    /** Monthly fee text
-     * @example "10,-" */
-    monthlyFee: string;
-    /** Product price text (one-time payment - only visible for phone propositions)
-     * @example "+ 100,- eenmalig" */
-    productPrice?: string;
+export declare type PricingSectionProps = Pick<PropositionCardProps, 'onInfoClick' | 'productPrice' | 'monthlyFee' | 'tcoPerMonth' | 'monthlyFeePromotionText'> & {
     /** Class slots for styling */
     classNames?: PricingSectionClassNames;
 };
 
-declare type ProductCategory = 'sim-only-proposition' | 'smartphone-proposition' | 'phone-and-subscription' | 'fixed-proposition';
+declare type ProductCategory = 'sim-only-proposition' | 'fixed-proposition' | 'smartphone-proposition' | 'smartphone-proposition-extended';
 
-export declare function ProductResults({ productCategory, initialSelectedFilters, limit, propositionCardLayout, classNames, profile, onProfileChange, }: ProductResultsProps): JSX.Element;
+export declare function ProductResults({ productCategory, initialSelectedFilters, limit, classNames, initialProfile, onProfileChange, onError, }: ProductResultsProps): JSX.Element;
 
 /**
  * ClassNames for styling different parts of the `ProductResults` component
@@ -372,23 +531,25 @@ export declare type ProductResultsClassNames = {
     propositionCard?: PropositionCardClassNames;
     /** PostcodeCheck loading card class styling slots (only for fixed propositions) - see type `PostcodeCheckLoadingClassNames` */
     postcodeCheckLoading?: PostcodeCheckLoadingClassNames;
+    /** Postcode check modal class styling slots - see type `PostcodeCheckModalClassNames` */
+    postcodeCheckModal?: PostcodeCheckModalClassNames;
 };
 
 export declare type ProductResultsProps = {
     /** Product type of the results */
-    productCategory: ProductCategory;
+    productCategory: Exclude<ProductCategory, 'smartphone-proposition-extended'>;
     /** Initial selected filters */
     initialSelectedFilters?: FilterValue[];
     /** Limit the number of propositions to display */
     limit?: number;
-    /** Layout of the proposition cards */
-    propositionCardLayout?: 'vertical' | 'horizontal';
     /** Class slots for styling */
     classNames?: ProductResultsClassNames;
-    /** User profile */
-    profile?: Profile;
+    /** Initial user profile */
+    initialProfile?: Partial<Profile>;
     /** Callback function to handle profile changes */
     onProfileChange?: (profile: Partial<Profile>) => void;
+    /** Callback function called when an error occurs */
+    onError?: (error: Error) => void;
 };
 
 /**
@@ -401,59 +562,18 @@ export declare type ProductSectionClassNames = {
     imageWrapper?: string;
     /** Product image element */
     image?: string;
-    /** Product title text
-     * @example "iPhone 17" */
-    title?: string;
-    /** Product subtitle/brand text
-     * @example "Apple" */
-    subtitle?: string;
-    /** Stock status badge
-     * @example "Op voorraad" */
-    stockStatus?: string;
-    /** Average review score text
-     * @example "9.5" */
-    reviewScore?: string;
-    /** Amount of reviews text
-     * @example "(100)" */
-    reviewCount?: string;
-    /** Product specifications list container
-     * @example "6.3 inch • 256GB opslag • 5 kleuren" */
-    specifications?: string;
-};
-
-export declare type ProductSectionProps = {
-    /** Product title text
-     * @example "iPhone 17" */
-    title: string;
-    /** Product subtitle/brand text
-     * @example "Apple" */
-    subtitle: string;
-    /** Product image URL */
-    imageUrl: string;
-    /** Product image alt text */
-    imageAlt: string;
-    /** Product specifications */
-    specifications?: {
-        title: string;
-    }[];
-    /** Stock status
-     * @example "Op voorraad" */
-    stockStatus?: string;
-    /** Amount of reviews
-     * @example 100 */
-    reviewCount?: number;
-    /** Average review score
-     * @example 9.5 */
-    reviewScore?: number;
-    /** Class slots for styling */
-    classNames?: ProductSectionClassNames;
-    horizontal?: boolean;
+    /** 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<{
     keepCurrentMsisdn: z_2.ZodOptional<z_2.ZodBoolean>;
+    currentMsisdn: z_2.ZodOptional<z_2.ZodString>;
     currentSubscriptionType: z_2.ZodOptional<z_2.ZodEnum<{
         subscription: "subscription";
         prepaid: "prepaid";
@@ -480,20 +600,21 @@ declare const profileSchema: z_2.ZodObject<{
 export declare type PromotionsListClassNames = {
     /** Wrapper container for the promotions list */
     base?: string;
-    /** Individual special/modification promotion item
+    /** Individual promotion item
      * @example "€4,50 korting per maand" */
     item?: string;
-    /** Checkmark icon for each special promotion item */
-    specialPromotionIcon?: string;
-    /** Checkmark icon for each modification promotion item */
-    modificationPromotionIcon?: string;
+    /** Checkmark icon for each promotion item */
+    promotionIcon?: string;
+    /** Urgent text chip */
+    urgentChip?: string;
 };
 
 export declare type PromotionsListProps = {
-    /** Special promotions to display */
-    specialPromotions: string[];
-    /** Modification promotions to display */
-    modificationPromotions: string[];
+    /** Promotions to display */
+    promotions: string[];
+    /** Urgent text to display as a chip above promotions
+     * @example "Actie nog 6 dagen" */
+    urgentText?: string;
     /** Class slots for styling */
     classNames?: PromotionsListClassNames;
 };
@@ -510,15 +631,15 @@ export declare type PropositionCardClassNames = {
     header?: string;
     /** Card body wrapper around `specifications`, `urgentChip` and `promotionsList` */
     body?: string;
-    /** Card footer wrapper around `deliveryText`, `pricingSection` and `button` */
+    /** Card footer wrapper around `pricingSection` and `button` */
     footer?: string;
-    /** Image wrapper for main product or proposition image on Horizontal card
+    /** Image wrapper for proposition provider image (only on Horizontal card)
      *
-     * It handles alignment, placement, and general appearance for the product image */
+     * It handles alignment, placement, and general appearance for the proposition provider image */
     imageWrapper?: string;
-    /** Main product or proposition image on Horizontal card */
+    /** Proposition provider image (only on Horizontal card) */
     image?: string;
-    /** Product section (only visible for phone propositions) class styling slots - see type `ProductSectionClassNames` */
+    /** Product section (only visible for smartphone propositions) class styling slots - see type `ProductSectionClassNames` */
     productSection?: ProductSectionClassNames;
     /** Proposition header class styling slots - see type `PropositionHeaderClassNames` */
     propositionHeader?: PropositionHeaderClassNames;
@@ -526,8 +647,6 @@ export declare type PropositionCardClassNames = {
     pricingSection?: PricingSectionClassNames;
     /** Promotions list class styling slots - see type `PromotionsListClassNames` */
     promotionsList?: PromotionsListClassNames;
-    /** Footer info (tcoPerMonth/average price and device discount) class styling slots - see type `FooterInfoClassNames` */
-    footerInfo?: FooterInfoClassNames;
     /** Specifications grid (only visible for sim only and fixed propositions)
      * @example
      * - "2 jaar"
@@ -538,42 +657,34 @@ export declare type PropositionCardClassNames = {
     /** Urgent text chip (only visible when promotion is urgent)
      * @example "Actie nog 6 dagen" */
     urgentChip?: string;
-    /** Delivery promise text
-     * @example "Voor 23:59 besteld, morgen in huis" */
-    deliveryText?: string;
     /** Call To Action button
      * @example "Bekijk" */
     button?: string;
+    /** Card wrapper (container for the label and card) */
+    cardWrapper?: string;
+    /** Label text styling */
+    label?: string;
 };
 
 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;
-    /** Link to the proposition page */
-    href: string;
-    /** Product title
-     * @example "iPhone 17" */
+    /** Product title - should include brand + phone name
+     * @example "Apple iPhone 17" */
     productTitle?: string;
-    /** Product subtitle (brand)
-     * @example "Apple" */
-    productSubtitle?: string;
     /** Product image URL */
     productImageUrl?: string;
     /** Product image alt text */
     productImageAlt?: string;
-    /** Product specifications */
-    productSpecifications?: {
-        title: string;
-    }[];
     /** Product stock status
      * @example "in_stock" */
     productStockStatus?: string;
-    /** Product review count
-     * @example 100 */
-    productReviewCount?: number;
-    /** Product review score
-     * @example 9.5 */
-    productReviewScore?: number;
     /** Product price
      * @example "100,-" */
     productPrice?: string;
@@ -610,12 +721,12 @@ export declare type PropositionCardProps = {
     /** Device discount
      * @example "100,-" */
     deviceDiscount?: string;
-    /** Delivery text
-     * @example "Voor 23:59 besteld, morgen in huis" */
-    deliveryText?: string | null;
     /** Urgent text for urgent special promotion
      * @example "Actie nog 6 dagen" */
     urgentText?: string;
+    /** Label text to display above the card
+     * @example "Meest gekozen" */
+    label?: string;
     /** Class slots for styling */
     classNames?: PropositionCardClassNames;
     horizontal?: boolean;
@@ -627,9 +738,9 @@ export declare type PropositionCardProps = {
 export 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 */
+    /** Image wrapper, it handles alignment, placement, and general appearance for the proposition provider image (only on Vertical card) */
     imageWrapper?: string;
-    /** Proposition provider image element*/
+    /** Proposition provider image element (only on Vertical card) */
     image?: string;
     /** Proposition title text
      * @example "30 GB"
@@ -639,23 +750,35 @@ export declare type PropositionHeaderClassNames = {
      * @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" */
-    title: string;
+    propositionTitle: string;
     /** Proposition subtitle text
      * @example "Onbp min / sms"
      * @example "Glasvezel" */
-    subtitle: string;
-    /** Proposition image URL */
-    imageUrl: string;
-    /** Proposition image alt text */
-    imageAlt: string;
+    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;
@@ -741,6 +864,38 @@ 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;
+    };
+};
+
 export declare function SelectFilter({ id, options, values, onChange, classNames, }: SelectFilterProps): JSX.Element;
 
 /**
@@ -788,6 +943,58 @@ export declare type SelectFilterProps = {
     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;
+};
+
 /**
  * ClassNames for styling different parts of the `RangeFilter`, `MinFilter` and `MaxFilter` component
  */
@@ -876,4 +1083,11 @@ declare type SortSelectClassNames = {
     endWrapper?: string;
 };
 
+declare type VersionDistinctProperty = {
+    __typename?: 'VersionDistinctProperty';
+    key: Scalars['String']['output'];
+    label: Scalars['String']['output'];
+    option: DistinctPropertyOption;
+};
+
 export { }