@whop/embedded-components-vanilla-js 0.0.13-beta.8 → 1.0.0

package/dist/lib/index.d.ts

@@ -14,16 +14,6 @@ interface TypedEventCreatorFn<Events, EventKeys extends keyof Events> {
 }
 type InferEvent<Fn> = Fn extends TypedEventCreatorFn<infer Events, infer EventKeys> ? TypedEventUnion<Events, EventKeys> : never;
 
-interface EmptyStateOptions {
-    image?: {
-        url: string;
-        width?: number;
-        height?: number;
-    };
-    title?: string;
-    description?: string;
-}
-
 /**
  * A CSS property value.
  */
@@ -154,6 +144,31 @@ declare class TypedEmitterType<L extends ListenerSignature<L> = DefaultListener>
     setMaxListeners(n: number): this;
 }
 
+/**
+ * Error codes emitted by Whop elements when something goes wrong.
+ *
+ * - `"UNKNOWN_ERROR"` — An unrecognized or unexpected error occurred inside the element.
+ */
+type WhopElementErrorCode = "UNKNOWN_ERROR";
+/**
+ * Structured error emitted by Whop elements.
+ *
+ * Provides a stable `code` for programmatic handling instead of leaking
+ * internal error messages to the embed host.
+ *
+ * @example
+ * ```typescript
+ * element.on("error", (error) => {
+ *   if (error instanceof WhopElementError) {
+ *     console.log(error.code); // "UNKNOWN_ERROR"
+ *   }
+ * });
+ * ```
+ */
+declare class WhopElementError extends Error {
+    readonly code: WhopElementErrorCode;
+    constructor(code: WhopElementErrorCode, message?: string);
+}
 /**
  * Base interface for all Whop embeddable elements.
  *
@@ -251,6 +266,16 @@ interface WhopElement<ElementOptions, ElementEvents extends ListenerSignature<El
     getSnapshot: () => ElementSnapshot;
 }
 
+interface EmptyStateOptions {
+    image?: {
+        url: string;
+        width?: number;
+        height?: number;
+    };
+    title?: string;
+    description?: string;
+}
+
 /**
  * Events emitted by the ChatElement.
  *
@@ -293,10 +318,12 @@ interface ChatElementEvents {
     }>) => void;
     /**
      * Emitted when the user sends a message.
-     * @param ev - The event containing the `message` in `ev.detail`.
+     * @param ev - The event containing the `id`, `content`, and `channelId` in `ev.detail`.
      */
     messageSent: (ev: CustomEvent<{
+        id: string;
         content: string;
+        channelId: string;
     }>) => void;
     /**
      * Emitted when the user clicks on an experience mention.
@@ -305,8 +332,24 @@ interface ChatElementEvents {
     experienceClick: (ev: CustomEvent<{
         id: string;
     }>) => void;
+    /**
+     * Emitted when the user clicks on an attachment.
+     * @param ev - The event containing the `messageId` and `attachments` in `ev.detail`.
+     */
+    attachmentClick: (ev: CustomEvent<{
+        messageId: string;
+        attachments: AttachmentClickEventAttachment[];
+    }>) => void;
+}
+interface AttachmentClickEventAttachment {
+    id: string;
+    url: string;
+    contentType?: string;
+    filename?: string;
+    width?: number;
+    height?: number;
 }
-declare const createTypedEvent$1: TypedEventCreatorFn<ChatElementEvents, "profileClick" | "linkClick" | "messageSent" | "experienceClick">;
+declare const createTypedEvent$1: TypedEventCreatorFn<ChatElementEvents, "profileClick" | "linkClick" | "messageSent" | "experienceClick" | "attachmentClick">;
 type ChatElementEvent = InferEvent<typeof createTypedEvent$1>;
 /**
  * Configuration options for the ChatElement.
@@ -340,6 +383,40 @@ interface ChatElementOptions {
      * Custom empty state displayed when there are no messages.
      */
     emptyState?: EmptyStateOptions;
+    /**
+     * The style of the chat.
+     * @default 'imessage'
+     */
+    style?: "imessage" | "discord";
+    /**
+     * Configure which features are available in chat.
+     */
+    features?: {
+        /**
+         * Allow admins to ban users.
+         * When disabled, removes the "Ban user" option from message menu.
+         * @default true
+         */
+        banUser?: boolean;
+        /**
+         * Allow admins to mute users.
+         * When disabled, removes the "Mute user" option from message menu.
+         * @default true
+         */
+        muteUser?: boolean;
+        /**
+         * Allow users to preview attachments.
+         * When disabled, clicking an attachment does not open the preview modal.
+         * @default true
+         */
+        previewAttachments?: boolean;
+        /**
+         * Allow users to mention experiences.
+         * When disabled, typing # will not show experience suggestions.
+         * @default true
+         */
+        mentionExperiences?: boolean;
+    };
     /**
      * Callback fired when the element has finished loading and is ready for interaction.
      * This is equivalent to listening to the `ready` event.
@@ -401,7 +478,7 @@ interface ChatElementSnapshot {
  * });
  *
  * element.on("messageSent", (ev) => {
- *   console.log("Message sent:", ev.detail.content);
+ *   console.log("Message sent:", ev.detail.id, ev.detail.content, ev.detail.channelId);
  * });
  *
  * element.on("experienceClick", (ev) => {
@@ -532,6 +609,141 @@ interface DmsListElementSnapshot {
  */
 type DmsListElement = WhopElement<DmsListElementOptions, DmsListElementEvents, DmsListElementSnapshot>;
 
+/**
+ * Events emitted by the SearchElement.
+ *
+ * Listen to these events using the `on()` method or by passing callback functions in the options.
+ */
+interface SearchElementEvents {
+    /**
+     * Emitted when an error occurs during element initialization or operation.
+     * @param error - The error that occurred
+     */
+    error: (error: unknown) => void;
+    /**
+     * Emitted when the element has finished loading and is ready for user interaction.
+     * @param element - The element instance
+     */
+    ready: (element: SearchElement) => void;
+    /**
+     * Emitted when the element's options are updated via `updateOptions()`.
+     * @param options - The updated options object
+     */
+    optionsUpdated: (options: SearchElementOptions) => void;
+    /**
+     * Emitted when the element's internal state changes.
+     * @param snapshot - The current state snapshot
+     */
+    snapshot: (snapshot: SearchElementSnapshot) => void;
+    /**
+     * Emitted when the user closes the search element.
+     * Call `ev.preventDefault()` to prevent the element from automatically unmounting.
+     * @param ev - The close event. Access the element via `ev.detail`.
+     */
+    close: (ev: CustomEvent) => void;
+    /**
+     * Callback fired when the user clicks on a search result.
+     * Call `ev.preventDefault()` to prevent the element from automatically unmounting.
+     * @param ev - The event containing the `messageId` in `ev.detail`.
+     */
+    resultClick: (ev: CustomEvent<{
+        messageId: string;
+        channelId: string;
+    }>) => void;
+}
+/**
+ * Configuration options for the SearchElement.
+ *
+ * @example
+ * ```typescript
+ * const element = session.createElement("search-element", {
+ *   channelId: "feed_XXXXXXXXXXXXXX",
+ *   onReady: (element) => {
+ *     console.log("Search element is ready");
+ *   },
+ * });
+ * ```
+ */
+interface SearchElementOptions {
+    /**
+     * The ID of the company to search messages in.
+     */
+    companyId?: string;
+    /**
+     * The ID of the chat channel to search messages in.
+     */
+    channelId?: string;
+    /**
+     * Callback fired when the element has finished loading and is ready for interaction.
+     * This is equivalent to listening to the `ready` event.
+     * @param element - The element instance
+     */
+    onReady?: (element: SearchElement) => void;
+    /**
+     * Callback fired when the user closes the element.
+     * By default, the element will unmount when closed. Call `ev.preventDefault()` to keep it mounted.
+     * @param ev - The close event
+     */
+    onClose?: (ev: CustomEvent) => void;
+    /**
+     * Callback fired when the user clicks on a search result.
+     * By default, the element will unmount after the result is clicked. Call `ev.preventDefault()` to keep it mounted.
+     * @param ev - The event
+     */
+    onResultClick?: (ev: CustomEvent<{
+        messageId: string;
+        channelId: string;
+    }>) => void;
+}
+/**
+ * Represents the current state of the SearchElement.
+ *
+ * Use `element.getSnapshot()` to get the current state, or listen to the `snapshot` event for changes.
+ */
+interface SearchElementSnapshot {
+    /**
+     * The current loading state of the element.
+     * - `"loading"` - The element is initializing
+     * - `"ready"` - The element is fully loaded and interactive
+     */
+    state: "loading" | "ready";
+}
+/**
+ * A UI element that allows users to search for messages in a chat channel.
+ *
+ * @example Basic usage
+ * ```typescript
+ * // Create the element
+ * const element = session.createElement("search-element", {
+ *   onClose: (ev) => {
+ *     console.log("Search element closed");
+ *   },
+ * });
+ *
+ * // Mount it to a container
+ * element.mount("#search-container");
+ * ```
+ *
+ * @example Using as a modal
+ * ```typescript
+ * // Show the element in a modal overlay
+ * const modal = session.showSearchModal({
+ *   channelId: "feed_XXXXXXXXXXXXXX",
+ *   onResultClick: (ev) => {
+ *     console.log("Result clicked!", ev.detail.messageId);
+ *     // Element auto-unmounts by default
+ *   },
+ * });
+ * ```
+ */
+type SearchElement = WhopElement<SearchElementOptions, SearchElementEvents, SearchElementSnapshot>;
+
+interface ModalContainer {
+    modalContainer: HTMLElement;
+    mount: () => void;
+    close: () => void;
+}
+
 type Token = string | Promise<string | null> | null;
 type GetToken = (opts: {
     abortSignal: AbortSignal;
@@ -607,6 +819,7 @@ interface ChatSessionEvents {
 type ChatSessionElements = {
     "chat-element": [ChatElementOptions, ChatElement];
     "dms-list-element": [DmsListElementOptions, DmsListElement];
+    "search-element": [SearchElementOptions, SearchElement];
 };
 /**
  * Manages authentication and creates chat elements.
@@ -668,6 +881,17 @@ interface ChatSession extends TypedEmitter<ChatSessionEvents> {
     createElement<T extends keyof ChatSessionElements>(type: T | {
         type: T;
     }, options: ChatSessionElements[T][0]): ChatSessionElements[T][1];
+    /**
+     * Show the search element in a modal overlay.
+     *
+     * By default, the modal auto-closes on completion (`onResultClick`) or dismiss (`onClose`).
+     * Call `ev.preventDefault()` in a callback to prevent auto-close.
+     *
+     * @category modal
+     * @param options - Element options or a callback that receives the modal container
+     * @returns The modal container, or undefined if a modal is already open (unless force is true)
+     */
+    showSearchModal<Force extends boolean = false>(options: SearchElementOptions | ((modal: ModalContainer) => SearchElementOptions), force?: Force): Force extends true ? ModalContainer : ModalContainer | undefined;
 }
 
 /**
@@ -971,6 +1195,130 @@ interface AutomaticWithdrawElementSnapshot {
  */
 type AutomaticWithdrawElement = WhopElement<AutomaticWithdrawElementOptions, AutomaticWithdrawElementEvents, AutomaticWithdrawElementSnapshot>;
 
+/**
+ * Events emitted by the AvailableCashBreakdownElement.
+ *
+ * Listen to these events using the `on()` method or by passing callback functions in the options.
+ */
+interface AvailableCashBreakdownElementEvents {
+    /**
+     * Emitted when an error occurs during element initialization or operation.
+     * @param error - The error that occurred
+     */
+    error: (error: unknown) => void;
+    /**
+     * Emitted when the element has finished loading and is ready for user interaction.
+     * @param element - The element instance
+     */
+    ready: (element: AvailableCashBreakdownElement) => void;
+    /**
+     * Emitted when the element's options are updated via `updateOptions()`.
+     * @param options - The updated options object
+     */
+    optionsUpdated: (options: AvailableCashBreakdownElementOptions) => void;
+    /**
+     * Emitted when the user closes the breakdown view.
+     * Call `ev.preventDefault()` to prevent the element from automatically unmounting.
+     * @param ev - The close event. Access the element via `ev.detail`.
+     */
+    close: (ev: CustomEvent) => void;
+    /**
+     * Emitted when the element's internal state changes.
+     * @param snapshot - The current state snapshot
+     */
+    snapshot: (snapshot: AvailableCashBreakdownElementSnapshot) => void;
+}
+/**
+ * Configuration options for the AvailableCashBreakdownElement.
+ *
+ * @example
+ * ```typescript
+ * const element = session.createElement("available-cash-breakdown-element", {
+ *   onReady: (element) => {
+ *     console.log("Breakdown is ready");
+ *   },
+ *   onClose: (ev) => {
+ *     console.log("User closed the breakdown");
+ *   },
+ * });
+ * ```
+ */
+interface AvailableCashBreakdownElementOptions {
+    /**
+     * Callback fired when the element has finished loading and is ready for interaction.
+     * This is equivalent to listening to the `ready` event.
+     * @param element - The element instance
+     */
+    onReady?: (element: AvailableCashBreakdownElement) => void;
+    /**
+     * Callback fired when the user closes the breakdown view.
+     * By default, the element will unmount when closed. Call `ev.preventDefault()` to keep it mounted.
+     * @param ev - The close event
+     */
+    onClose?: (ev: CustomEvent) => void;
+}
+/**
+ * Represents the current state of the AvailableCashBreakdownElement.
+ *
+ * Use `element.getSnapshot()` to get the current state, or listen to the `snapshot` event for changes.
+ */
+interface AvailableCashBreakdownElementSnapshot {
+    /**
+     * The current loading state of the element.
+     * - `"loading"` - The element is initializing
+     * - `"ready"` - The element is fully loaded and interactive
+     */
+    state: "loading" | "ready";
+}
+/**
+ * A UI element that shows a detailed breakdown of the available (withdrawable) cash balance.
+ *
+ * This element provides a detailed view of available funds, including:
+ * - Itemized breakdown of available cash by source
+ * - Total withdrawable amount
+ * - Close action to dismiss the breakdown
+ *
+ * @example Basic usage
+ * ```typescript
+ * // Create the element
+ * const element = session.createElement("available-cash-breakdown-element", {
+ *   onClose: (ev) => {
+ *     console.log("Breakdown closed");
+ *   },
+ * });
+ *
+ * // Mount it to a container
+ * element.mount("#breakdown-container");
+ * ```
+ *
+ * @example Using as a modal
+ * ```typescript
+ * // Show the breakdown in a modal overlay
+ * const modal = session.showAvailableCashBreakdownModal({
+ *   onClose: (ev) => {
+ *     ev.preventDefault();
+ *     modal.close();
+ *   },
+ * });
+ * ```
+ *
+ * @example Listening to events
+ * ```typescript
+ * const element = session.createElement("available-cash-breakdown-element", {});
+ *
+ * element.on("ready", () => {
+ *   console.log("Breakdown loaded");
+ * });
+ *
+ * element.on("close", (ev) => {
+ *   console.log("User closed the breakdown");
+ * });
+ *
+ * element.mount("#container");
+ * ```
+ */
+type AvailableCashBreakdownElement = WhopElement<AvailableCashBreakdownElementOptions, AvailableCashBreakdownElementEvents, AvailableCashBreakdownElementSnapshot>;
+
 /**
  * Events emitted by the BalanceElement.
  *
@@ -998,23 +1346,16 @@ interface BalanceElementEvents {
      */
     snapshot: (snapshot: BalanceElementSnapshot) => void;
     /**
-     * Emitted when the user clicks to view the available balance breakdown.
-     * By default, opens the TotalBalanceBreakdown modal. Call `ev.preventDefault()` to handle this yourself.
-     * @param ev - The event. Access the element via `ev.detail`.
-     */
-    showAvailableBalanceBreakdown: (ev: CustomEvent<BalanceElement>) => void;
-    /**
-     * Emitted when the user clicks to view the regular reserve balance breakdown.
-     * By default, opens the RegularReserveBalanceBreakdown modal. Call `ev.preventDefault()` to handle this yourself.
-     * @param ev - The event. Access the element via `ev.detail`.
+     * Emitted when the user clicks the withdraw button.
+     * Call `ev.preventDefault()` to prevent the element from automatically opening the withdraw modal.
+     * @param ev - The withdraw event. Access the element via `ev.detail`.
      */
-    showRegularReserveBalanceBreakdown: (ev: CustomEvent<BalanceElement>) => void;
+    withdraw: (ev: CustomEvent<BalanceElement>) => void;
     /**
-     * Emitted when the user clicks to view the BNPL reserve balance breakdown.
-     * By default, opens the BnplReserveBalanceBreakdown modal. Call `ev.preventDefault()` to handle this yourself.
-     * @param ev - The event. Access the element via `ev.detail`.
+     * Emitted when the user needs to verify their account before withdrawing.
+     * @param ev - The verify event. Access the element via `ev.detail`.
      */
-    showBnplReserveBalanceBreakdown: (ev: CustomEvent<BalanceElement>) => void;
+    verify: (ev: CustomEvent<BalanceElement>) => void;
 }
 /**
  * Configuration options for the BalanceElement.
@@ -1022,25 +1363,25 @@ interface BalanceElementEvents {
  * @example
  * ```typescript
  * const element = session.createElement("balance-element", {
- *   hidePendingBalance: true,
+ *   showWithdrawButton: true,
  *   onReady: (element) => {
  *     console.log("Balance element is ready");
  *   },
- *   onShowAvailableBalanceBreakdown: (ev) => {
- *     // Custom handling - prevent default modal
- *     ev.preventDefault();
- *     showCustomBreakdownModal();
+ *   onWithdraw: (ev) => {
+ *     console.log("User clicked withdraw");
+ *   },
+ *   onVerify: (ev) => {
+ *     console.log("User needs to verify their account");
  *   },
  * });
  * ```
  */
 interface BalanceElementOptions {
     /**
-     * Whether to hide the pending balance from the display.
-     * When `true`, only the available balance will be shown.
-     * @default false
+     * Whether to show the withdraw button within the balance element.
+     * When enabled, the user can initiate a withdrawal directly from the balance view.
      */
-    hidePendingBalance?: boolean;
+    showWithdrawButton?: boolean;
     /**
      * Callback fired when the element has finished loading and is ready for interaction.
      * This is equivalent to listening to the `ready` event.
@@ -1048,23 +1389,16 @@ interface BalanceElementOptions {
      */
     onReady?: (element: BalanceElement) => void;
     /**
-     * Callback fired when the user clicks to view the available balance breakdown.
-     * By default, opens the TotalBalanceBreakdown modal. Call `ev.preventDefault()` to handle this yourself.
-     * @param ev - The event. Access the element via `ev.detail`.
-     */
-    onShowAvailableBalanceBreakdown?: (ev: CustomEvent<BalanceElement>) => void;
-    /**
-     * Callback fired when the user clicks to view the regular reserve balance breakdown.
-     * By default, opens the RegularReserveBalanceBreakdown modal. Call `ev.preventDefault()` to handle this yourself.
-     * @param ev - The event. Access the element via `ev.detail`.
+     * Callback fired when the user clicks the withdraw button.
+     * By default, the element will open the withdraw modal. Call `ev.preventDefault()` to handle the withdrawal yourself.
+     * @param ev - The withdraw event. Access the element via `ev.detail`.
      */
-    onShowRegularReserveBalanceBreakdown?: (ev: CustomEvent<BalanceElement>) => void;
+    onWithdraw?: (ev: CustomEvent<BalanceElement>) => void;
     /**
-     * Callback fired when the user clicks to view the BNPL reserve balance breakdown.
-     * By default, opens the BnplReserveBalanceBreakdown modal. Call `ev.preventDefault()` to handle this yourself.
-     * @param ev - The event. Access the element via `ev.detail`.
+     * Callback fired when the user needs to verify their account before withdrawing.
+     * @param ev - The verify event. Access the element via `ev.detail`.
      */
-    onShowBnplReserveBalanceBreakdown?: (ev: CustomEvent<BalanceElement>) => void;
+    onVerify?: (ev: CustomEvent<BalanceElement>) => void;
 }
 /**
  * Represents the current state of the BalanceElement.
@@ -1080,22 +1414,21 @@ interface BalanceElementSnapshot {
     state: "loading" | "ready";
 }
 /**
- * A UI element that displays the user's balance information including available, pending, and reserve balances.
- *
- * This element provides a comprehensive view of the user's financial status:
- * - Available balance (funds ready for withdrawal)
- * - Pending balance (funds being processed)
- * - Regular reserve balance (funds held in reserve)
- * - BNPL reserve balance (Buy Now Pay Later reserve funds)
+ * A UI element that displays the user's current balance including available, pending, and reserve amounts with an optional withdraw button.
  *
- * Clicking on balance sections opens detailed breakdown modals by default.
+ * This element provides a complete balance overview, including:
+ * - Displaying available, pending, and reserve balance amounts
+ * - Optional withdraw button to initiate withdrawals
+ * - Clickable balance rows that open detailed breakdown modals
+ * - Treasury balance display when enabled
  *
  * @example Basic usage
  * ```typescript
  * // Create the element
  * const element = session.createElement("balance-element", {
- *   onReady: () => {
- *     console.log("Balance loaded!");
+ *   showWithdrawButton: true,
+ *   onWithdraw: (ev) => {
+ *     console.log("User initiated withdrawal");
  *   },
  * });
  *
@@ -1103,40 +1436,25 @@ interface BalanceElementSnapshot {
  * element.mount("#balance-container");
  * ```
  *
- * @example Hiding pending balance
+ * @example Listening to events
  * ```typescript
  * const element = session.createElement("balance-element", {
- *   hidePendingBalance: true,
+ *   showWithdrawButton: true,
  * });
  *
- * element.mount("#balance-container");
- * ```
- *
- * @example Custom breakdown handling
- * ```typescript
- * const element = session.createElement("balance-element", {
- *   onShowAvailableBalanceBreakdown: (ev) => {
- *     // Prevent the default modal from opening
- *     ev.preventDefault();
- *     // Show your own custom breakdown UI
- *     showCustomBreakdownModal();
- *   },
+ * element.on("ready", () => {
+ *   console.log("Balance loaded");
  * });
  *
- * element.mount("#balance-container");
- * ```
- *
- * @example Listening to events
- * ```typescript
- * const element = session.createElement("balance-element", {});
- *
- * element.on("ready", () => {
- *   console.log("Element loaded");
+ * element.on("withdraw", (ev) => {
+ *   // Prevent the default withdraw modal from opening
+ *   ev.preventDefault();
+ *   // Handle withdrawal with your own UI
+ *   openCustomWithdrawFlow();
  * });
  *
- * element.on("showAvailableBalanceBreakdown", (ev) => {
- *   console.log("User clicked on available balance");
- *   // Let default modal open, or call ev.preventDefault() to handle yourself
+ * element.on("verify", (ev) => {
+ *   console.log("Account verification required");
  * });
  *
  * element.mount("#container");
@@ -1145,11 +1463,11 @@ interface BalanceElementSnapshot {
 type BalanceElement = WhopElement<BalanceElementOptions, BalanceElementEvents, BalanceElementSnapshot>;
 
 /**
- * Events emitted by the BnplReserveBalanceBreakdownElement.
+ * Events emitted by the BalancesElement.
  *
  * Listen to these events using the `on()` method or by passing callback functions in the options.
  */
-interface BnplReserveBalanceBreakdownElementEvents {
+interface BalancesElementEvents {
     /**
      * Emitted when an error occurs during element initialization or operation.
      * @param error - The error that occurred
@@ -1159,116 +1477,106 @@ interface BnplReserveBalanceBreakdownElementEvents {
      * Emitted when the element has finished loading and is ready for user interaction.
      * @param element - The element instance
      */
-    ready: (element: BnplReserveBalanceBreakdownElement) => void;
+    ready: (element: BalancesElement) => void;
     /**
      * Emitted when the element's options are updated via `updateOptions()`.
      * @param options - The updated options object
      */
-    optionsUpdated: (options: BnplReserveBalanceBreakdownElementOptions) => void;
-    /**
-     * Emitted when the user closes the breakdown view.
-     * Call `ev.preventDefault()` to prevent the element from automatically unmounting.
-     * @param ev - The close event. Access the element via `ev.detail`.
-     */
-    close: (ev: CustomEvent) => void;
+    optionsUpdated: (options: BalancesElementOptions) => void;
     /**
      * Emitted when the element's internal state changes.
      * @param snapshot - The current state snapshot
      */
-    snapshot: (snapshot: BnplReserveBalanceBreakdownElementSnapshot) => void;
+    snapshot: (snapshot: BalancesElementSnapshot) => void;
 }
 /**
- * Configuration options for the BnplReserveBalanceBreakdownElement.
+ * Configuration options for the BalancesElement.
  *
  * @example
  * ```typescript
- * const element = session.createElement("bnpl-reserve-balance-breakdown-element", {
+ * const element = session.createElement("balances-element", {
+ *   primaryCurrency: "usd",
  *   onReady: (element) => {
- *     console.log("Breakdown is ready");
- *   },
- *   onClose: (ev) => {
- *     console.log("User closed the breakdown");
+ *     console.log("Balances element is ready");
  *   },
  * });
  * ```
  */
-interface BnplReserveBalanceBreakdownElementOptions {
+interface BalancesElementOptions {
+    /**
+     * The ISO currency code to display as the primary (top-level) currency.
+     * Other currencies with balances will appear below it.
+     */
+    primaryCurrency?: string;
     /**
      * Callback fired when the element has finished loading and is ready for interaction.
      * This is equivalent to listening to the `ready` event.
      * @param element - The element instance
      */
-    onReady?: (element: BnplReserveBalanceBreakdownElement) => void;
-    /**
-     * Callback fired when the user closes the breakdown view.
-     * By default, the element will unmount when closed. Call `ev.preventDefault()` to keep it mounted.
-     * @param ev - The close event
-     */
-    onClose?: (ev: CustomEvent) => void;
+    onReady?: (element: BalancesElement) => void;
 }
 /**
- * Represents the current state of the BnplReserveBalanceBreakdownElement.
+ * Represents the current state of the BalancesElement.
  *
  * Use `element.getSnapshot()` to get the current state, or listen to the `snapshot` event for changes.
  */
-interface BnplReserveBalanceBreakdownElementSnapshot {
+interface BalancesElementSnapshot {
     /**
      * The current loading state of the element.
      * - `"loading"` - The element is initializing
      * - `"ready"` - The element is fully loaded and interactive
+     * - `"error"` - The element encountered an error during initialization
      */
-    state: "loading" | "ready";
+    state: "loading" | "ready" | "error";
+    /**
+     * The list of ISO currency codes that have balances.
+     */
+    currencies: string[];
+    /**
+     * Whether the treasury (crypto portfolio) feature is enabled for this account.
+     */
+    treasuryEnabled: boolean;
 }
 /**
- * A UI element that displays a detailed breakdown of the BNPL (Buy Now Pay Later) reserve balance.
+ * A UI element that displays a multi-currency balance overview with expandable currency rows showing available, pending, and reserve breakdowns per currency.
  *
- * This element shows how funds are allocated in the BNPL reserve, including:
- * - Total BNPL reserve amount
- * - Individual transaction holds
- * - Expected release dates for reserved funds
- *
- * BNPL reserves are funds held to cover potential refunds or chargebacks from Buy Now Pay Later transactions.
+ * This element provides a comprehensive multi-currency balance view, including:
+ * - Aggregated total balance across all currencies
+ * - Expandable rows for each currency with available, pending, and reserve breakdowns
+ * - Primary currency pinned at the top of the list
+ * - Treasury (crypto portfolio) section when enabled
  *
  * @example Basic usage
  * ```typescript
  * // Create the element
- * const element = session.createElement("bnpl-reserve-balance-breakdown-element", {
- *   onClose: () => {
- *     console.log("Breakdown closed");
+ * const element = session.createElement("balances-element", {
+ *   primaryCurrency: "usd",
+ *   onReady: (element) => {
+ *     console.log("Balances loaded");
  *   },
  * });
  *
  * // Mount it to a container
- * element.mount("#bnpl-breakdown-container");
- * ```
- *
- * @example Using as a modal
- * ```typescript
- * // Show the breakdown in a modal overlay
- * const modal = session.showBnplReserveBalanceBreakdownModal({
- *   onClose: (ev) => {
- *     ev.preventDefault();
- *     modal.close();
- *   },
- * });
+ * element.mount("#balances-container");
  * ```
  *
  * @example Listening to events
  * ```typescript
- * const element = session.createElement("bnpl-reserve-balance-breakdown-element", {});
+ * const element = session.createElement("balances-element", {});
  *
  * element.on("ready", () => {
- *   console.log("Breakdown loaded");
+ *   console.log("Element loaded");
  * });
  *
- * element.on("close", (ev) => {
- *   console.log("User closed the breakdown");
+ * element.on("snapshot", (snapshot) => {
+ *   console.log("Currencies:", snapshot.currencies);
+ *   console.log("Treasury enabled:", snapshot.treasuryEnabled);
  * });
  *
  * element.mount("#container");
  * ```
  */
-type BnplReserveBalanceBreakdownElement = WhopElement<BnplReserveBalanceBreakdownElementOptions, BnplReserveBalanceBreakdownElementEvents, BnplReserveBalanceBreakdownElementSnapshot>;
+type BalancesElement = WhopElement<BalancesElementOptions, BalancesElementEvents, BalancesElementSnapshot>;
 
 /**
  * Events emitted by the ChangeAccountCountryElement.
@@ -1580,11 +1888,11 @@ interface GenerateWithdrawalReceiptElementSnapshot {
 type GenerateWithdrawalReceiptElement = WhopElement<GenerateWithdrawalReceiptElementOptions, GenerateWithdrawalReceiptElementEvents, GenerateWithdrawalReceiptElementSnapshot>;
 
 /**
- * Events emitted by the RegularReserveBalanceBreakdownElement.
+ * Events emitted by the PendingBreakdownElement.
  *
  * Listen to these events using the `on()` method or by passing callback functions in the options.
  */
-interface RegularReserveBalanceBreakdownElementEvents {
+interface PendingBreakdownElementEvents {
     /**
      * Emitted when an error occurs during element initialization or operation.
      * @param error - The error that occurred
@@ -1594,12 +1902,12 @@ interface RegularReserveBalanceBreakdownElementEvents {
      * Emitted when the element has finished loading and is ready for user interaction.
      * @param element - The element instance
      */
-    ready: (element: RegularReserveBalanceBreakdownElement) => void;
+    ready: (element: PendingBreakdownElement) => void;
     /**
      * Emitted when the element's options are updated via `updateOptions()`.
      * @param options - The updated options object
      */
-    optionsUpdated: (options: RegularReserveBalanceBreakdownElementOptions) => void;
+    optionsUpdated: (options: PendingBreakdownElementOptions) => void;
     /**
      * Emitted when the user closes the breakdown view.
      * Call `ev.preventDefault()` to prevent the element from automatically unmounting.
@@ -1610,14 +1918,14 @@ interface RegularReserveBalanceBreakdownElementEvents {
      * Emitted when the element's internal state changes.
      * @param snapshot - The current state snapshot
      */
-    snapshot: (snapshot: RegularReserveBalanceBreakdownElementSnapshot) => void;
+    snapshot: (snapshot: PendingBreakdownElementSnapshot) => void;
 }
 /**
- * Configuration options for the RegularReserveBalanceBreakdownElement.
+ * Configuration options for the PendingBreakdownElement.
  *
  * @example
  * ```typescript
- * const element = session.createElement("regular-reserve-balance-breakdown-element", {
+ * const element = session.createElement("pending-breakdown-element", {
  *   onReady: (element) => {
  *     console.log("Breakdown is ready");
  *   },
@@ -1627,13 +1935,13 @@ interface RegularReserveBalanceBreakdownElementEvents {
  * });
  * ```
  */
-interface RegularReserveBalanceBreakdownElementOptions {
+interface PendingBreakdownElementOptions {
     /**
      * Callback fired when the element has finished loading and is ready for interaction.
      * This is equivalent to listening to the `ready` event.
      * @param element - The element instance
      */
-    onReady?: (element: RegularReserveBalanceBreakdownElement) => void;
+    onReady?: (element: PendingBreakdownElement) => void;
     /**
      * Callback fired when the user closes the breakdown view.
      * By default, the element will unmount when closed. Call `ev.preventDefault()` to keep it mounted.
@@ -1642,11 +1950,11 @@ interface RegularReserveBalanceBreakdownElementOptions {
     onClose?: (ev: CustomEvent) => void;
 }
 /**
- * Represents the current state of the RegularReserveBalanceBreakdownElement.
+ * Represents the current state of the PendingBreakdownElement.
  *
  * Use `element.getSnapshot()` to get the current state, or listen to the `snapshot` event for changes.
  */
-interface RegularReserveBalanceBreakdownElementSnapshot {
+interface PendingBreakdownElementSnapshot {
     /**
      * The current loading state of the element.
      * - `"loading"` - The element is initializing
@@ -1655,32 +1963,155 @@ interface RegularReserveBalanceBreakdownElementSnapshot {
     state: "loading" | "ready";
 }
 /**
- * A UI element that displays a detailed breakdown of the regular reserve balance.
+ * A UI element that displays a breakdown of pending balance amounts that are being processed.
  *
- * This element shows how funds are allocated in the regular reserve, including:
- * - Total reserve amount
- * - Individual transaction holds
- * - Expected release dates for reserved funds
+ * This element provides a detailed view of pending funds, including:
+ * - Itemized list of pending transactions and their expected settlement
+ * - Total pending amount
+ * - Close action to dismiss the breakdown
+ *
+ * @example Basic usage
+ * ```typescript
+ * // Create the element
+ * const element = session.createElement("pending-breakdown-element", {
+ *   onClose: (ev) => {
+ *     console.log("Breakdown closed");
+ *   },
+ * });
+ *
+ * // Mount it to a container
+ * element.mount("#breakdown-container");
+ * ```
+ *
+ * @example Using as a modal
+ * ```typescript
+ * // Show the breakdown in a modal overlay
+ * const modal = session.showPendingBreakdownModal({
+ *   onClose: (ev) => {
+ *     ev.preventDefault();
+ *     modal.close();
+ *   },
+ * });
+ * ```
  *
- * Regular reserves are funds held to cover potential refunds, chargebacks, or disputes from standard transactions.
+ * @example Listening to events
+ * ```typescript
+ * const element = session.createElement("pending-breakdown-element", {});
+ *
+ * element.on("ready", () => {
+ *   console.log("Breakdown loaded");
+ * });
+ *
+ * element.on("close", (ev) => {
+ *   console.log("User closed the breakdown");
+ * });
+ *
+ * element.mount("#container");
+ * ```
+ */
+type PendingBreakdownElement = WhopElement<PendingBreakdownElementOptions, PendingBreakdownElementEvents, PendingBreakdownElementSnapshot>;
+
+/**
+ * Events emitted by the ReserveBreakdownElement.
+ *
+ * Listen to these events using the `on()` method or by passing callback functions in the options.
+ */
+interface ReserveBreakdownElementEvents {
+    /**
+     * Emitted when an error occurs during element initialization or operation.
+     * @param error - The error that occurred
+     */
+    error: (error: unknown) => void;
+    /**
+     * Emitted when the element has finished loading and is ready for user interaction.
+     * @param element - The element instance
+     */
+    ready: (element: ReserveBreakdownElement) => void;
+    /**
+     * Emitted when the element's options are updated via `updateOptions()`.
+     * @param options - The updated options object
+     */
+    optionsUpdated: (options: ReserveBreakdownElementOptions) => void;
+    /**
+     * Emitted when the user closes the breakdown view.
+     * Call `ev.preventDefault()` to prevent the element from automatically unmounting.
+     * @param ev - The close event. Access the element via `ev.detail`.
+     */
+    close: (ev: CustomEvent) => void;
+    /**
+     * Emitted when the element's internal state changes.
+     * @param snapshot - The current state snapshot
+     */
+    snapshot: (snapshot: ReserveBreakdownElementSnapshot) => void;
+}
+/**
+ * Configuration options for the ReserveBreakdownElement.
+ *
+ * @example
+ * ```typescript
+ * const element = session.createElement("reserve-breakdown-element", {
+ *   onReady: (element) => {
+ *     console.log("Breakdown is ready");
+ *   },
+ *   onClose: (ev) => {
+ *     console.log("User closed the breakdown");
+ *   },
+ * });
+ * ```
+ */
+interface ReserveBreakdownElementOptions {
+    /**
+     * Callback fired when the element has finished loading and is ready for interaction.
+     * This is equivalent to listening to the `ready` event.
+     * @param element - The element instance
+     */
+    onReady?: (element: ReserveBreakdownElement) => void;
+    /**
+     * Callback fired when the user closes the breakdown view.
+     * By default, the element will unmount when closed. Call `ev.preventDefault()` to keep it mounted.
+     * @param ev - The close event
+     */
+    onClose?: (ev: CustomEvent) => void;
+}
+/**
+ * Represents the current state of the ReserveBreakdownElement.
+ *
+ * Use `element.getSnapshot()` to get the current state, or listen to the `snapshot` event for changes.
+ */
+interface ReserveBreakdownElementSnapshot {
+    /**
+     * The current loading state of the element.
+     * - `"loading"` - The element is initializing
+     * - `"ready"` - The element is fully loaded and interactive
+     */
+    state: "loading" | "ready";
+}
+/**
+ * A UI element that shows a breakdown of reserve balance amounts explaining held funds and their expected availability.
+ *
+ * This element provides a detailed view of reserved funds, including:
+ * - Itemized list of reserve holds and their reasons
+ * - Expected release dates for held funds
+ * - Total reserve amount
+ * - Close action to dismiss the breakdown
  *
  * @example Basic usage
  * ```typescript
  * // Create the element
- * const element = session.createElement("regular-reserve-balance-breakdown-element", {
- *   onClose: () => {
+ * const element = session.createElement("reserve-breakdown-element", {
+ *   onClose: (ev) => {
  *     console.log("Breakdown closed");
  *   },
  * });
  *
  * // Mount it to a container
- * element.mount("#reserve-breakdown-container");
+ * element.mount("#breakdown-container");
  * ```
  *
  * @example Using as a modal
  * ```typescript
  * // Show the breakdown in a modal overlay
- * const modal = session.showRegularReserveBalanceBreakdownModal({
+ * const modal = session.showReserveBreakdownModal({
  *   onClose: (ev) => {
  *     ev.preventDefault();
  *     modal.close();
@@ -1690,7 +2121,7 @@ interface RegularReserveBalanceBreakdownElementSnapshot {
  *
  * @example Listening to events
  * ```typescript
- * const element = session.createElement("regular-reserve-balance-breakdown-element", {});
+ * const element = session.createElement("reserve-breakdown-element", {});
  *
  * element.on("ready", () => {
  *   console.log("Breakdown loaded");
@@ -1703,7 +2134,7 @@ interface RegularReserveBalanceBreakdownElementSnapshot {
  * element.mount("#container");
  * ```
  */
-type RegularReserveBalanceBreakdownElement = WhopElement<RegularReserveBalanceBreakdownElementOptions, RegularReserveBalanceBreakdownElementEvents, RegularReserveBalanceBreakdownElementSnapshot>;
+type ReserveBreakdownElement = WhopElement<ReserveBreakdownElementOptions, ReserveBreakdownElementEvents, ReserveBreakdownElementSnapshot>;
 
 /**
  * Events emitted by the ResetAccountElement.
@@ -2028,11 +2459,11 @@ interface StatusBannerElementSnapshot {
 type StatusBannerElement = WhopElement<StatusBannerElementOptions, StatusBannerElementEvents, StatusBannerElementSnapshot>;
 
 /**
- * Events emitted by the TotalBalanceBreakdownElement.
+ * Events emitted by the TreasuryBreakdownElement.
  *
  * Listen to these events using the `on()` method or by passing callback functions in the options.
  */
-interface TotalBalanceBreakdownElementEvents {
+interface TreasuryBreakdownElementEvents {
     /**
      * Emitted when an error occurs during element initialization or operation.
      * @param error - The error that occurred
@@ -2042,12 +2473,12 @@ interface TotalBalanceBreakdownElementEvents {
      * Emitted when the element has finished loading and is ready for user interaction.
      * @param element - The element instance
      */
-    ready: (element: TotalBalanceBreakdownElement) => void;
+    ready: (element: TreasuryBreakdownElement) => void;
     /**
      * Emitted when the element's options are updated via `updateOptions()`.
      * @param options - The updated options object
      */
-    optionsUpdated: (options: TotalBalanceBreakdownElementOptions) => void;
+    optionsUpdated: (options: TreasuryBreakdownElementOptions) => void;
     /**
      * Emitted when the user closes the breakdown view.
      * Call `ev.preventDefault()` to prevent the element from automatically unmounting.
@@ -2058,14 +2489,14 @@ interface TotalBalanceBreakdownElementEvents {
      * Emitted when the element's internal state changes.
      * @param snapshot - The current state snapshot
      */
-    snapshot: (snapshot: TotalBalanceBreakdownElementSnapshot) => void;
+    snapshot: (snapshot: TreasuryBreakdownElementSnapshot) => void;
 }
 /**
- * Configuration options for the TotalBalanceBreakdownElement.
+ * Configuration options for the TreasuryBreakdownElement.
  *
  * @example
  * ```typescript
- * const element = session.createElement("total-balance-breakdown-element", {
+ * const element = session.createElement("treasury-breakdown-element", {
  *   onReady: (element) => {
  *     console.log("Breakdown is ready");
  *   },
@@ -2075,13 +2506,13 @@ interface TotalBalanceBreakdownElementEvents {
  * });
  * ```
  */
-interface TotalBalanceBreakdownElementOptions {
+interface TreasuryBreakdownElementOptions {
     /**
      * Callback fired when the element has finished loading and is ready for interaction.
      * This is equivalent to listening to the `ready` event.
      * @param element - The element instance
      */
-    onReady?: (element: TotalBalanceBreakdownElement) => void;
+    onReady?: (element: TreasuryBreakdownElement) => void;
     /**
      * Callback fired when the user closes the breakdown view.
      * By default, the element will unmount when closed. Call `ev.preventDefault()` to keep it mounted.
@@ -2090,11 +2521,11 @@ interface TotalBalanceBreakdownElementOptions {
     onClose?: (ev: CustomEvent) => void;
 }
 /**
- * Represents the current state of the TotalBalanceBreakdownElement.
+ * Represents the current state of the TreasuryBreakdownElement.
  *
  * Use `element.getSnapshot()` to get the current state, or listen to the `snapshot` event for changes.
  */
-interface TotalBalanceBreakdownElementSnapshot {
+interface TreasuryBreakdownElementSnapshot {
     /**
      * The current loading state of the element.
      * - `"loading"` - The element is initializing
@@ -2103,31 +2534,30 @@ interface TotalBalanceBreakdownElementSnapshot {
     state: "loading" | "ready";
 }
 /**
- * A UI element that displays a detailed breakdown of the user's total available balance.
+ * A UI element that displays a breakdown of treasury funds including crypto portfolio holdings.
  *
- * This element shows how the total balance is composed, including:
- * - Available balance (funds ready for withdrawal)
- * - Pending transactions
- * - Expected deposits
- * - Any holds or adjustments
+ * This element provides a detailed view of treasury funds, including:
+ * - Crypto portfolio holdings and their current values
+ * - Total treasury balance
+ * - Close action to dismiss the breakdown
  *
  * @example Basic usage
  * ```typescript
  * // Create the element
- * const element = session.createElement("total-balance-breakdown-element", {
- *   onClose: () => {
+ * const element = session.createElement("treasury-breakdown-element", {
+ *   onClose: (ev) => {
  *     console.log("Breakdown closed");
  *   },
  * });
  *
  * // Mount it to a container
- * element.mount("#balance-breakdown-container");
+ * element.mount("#breakdown-container");
  * ```
  *
  * @example Using as a modal
  * ```typescript
  * // Show the breakdown in a modal overlay
- * const modal = session.showTotalBalanceBreakdownModal({
+ * const modal = session.showTreasuryBreakdownModal({
  *   onClose: (ev) => {
  *     ev.preventDefault();
  *     modal.close();
@@ -2137,7 +2567,7 @@ interface TotalBalanceBreakdownElementSnapshot {
  *
  * @example Listening to events
  * ```typescript
- * const element = session.createElement("total-balance-breakdown-element", {});
+ * const element = session.createElement("treasury-breakdown-element", {});
  *
  * element.on("ready", () => {
  *   console.log("Breakdown loaded");
@@ -2150,7 +2580,7 @@ interface TotalBalanceBreakdownElementSnapshot {
  * element.mount("#container");
  * ```
  */
-type TotalBalanceBreakdownElement = WhopElement<TotalBalanceBreakdownElementOptions, TotalBalanceBreakdownElementEvents, TotalBalanceBreakdownElementSnapshot>;
+type TreasuryBreakdownElement = WhopElement<TreasuryBreakdownElementOptions, TreasuryBreakdownElementEvents, TreasuryBreakdownElementSnapshot>;
 
 /**
  * Events emitted by the VerifyElement.
@@ -2438,6 +2868,11 @@ interface WithdrawButtonElementOptions {
      * @default false
      */
     highContrast?: boolean;
+    /**
+     * Whether to show an icon in the button.
+     * @default false
+     */
+    showIcon?: boolean;
 }
 /**
  * Represents the current state of the WithdrawButtonElement.
@@ -2588,6 +3023,12 @@ interface WithdrawElementOptions {
      * @param ev - The close event
      */
     onClose?: (ev: CustomEvent) => void;
+    /**
+     * When true, shows a currency picker before the withdrawal form.
+     * This allows the user to choose which currency to withdraw from when they have balances in multiple currencies.
+     * The session's default currency will be omitted so the picker can display all available options.
+     */
+    showCurrencySelector?: boolean;
 }
 /**
  * Represents the current state of the WithdrawElement.
@@ -2935,12 +3376,6 @@ interface WithdrawalsElementSnapshot {
  */
 type WithdrawalsElement = WhopElement<WithdrawalsElementOptions, WithdrawalsElementEvents, WithdrawalsElementSnapshot>;
 
-interface ModalContainer {
-    modalContainer: HTMLElement;
-    mount: () => void;
-    close: () => void;
-}
-
 /** elements types */
 
 interface PayoutsSessionOptions {
@@ -3029,6 +3464,10 @@ type PayoutsSessionElements = {
         AddPayoutMethodElementOptions,
         AddPayoutMethodElement
     ];
+    "available-cash-breakdown-element": [
+        AvailableCashBreakdownElementOptions,
+        AvailableCashBreakdownElement
+    ];
     "balance-element": [BalanceElementOptions, BalanceElement];
     "withdraw-button-element": [
         WithdrawButtonElementOptions,
@@ -3050,23 +3489,24 @@ type PayoutsSessionElements = {
         ChangeAccountCountryElement
     ];
     "reset-account-element": [ResetAccountElementOptions, ResetAccountElement];
-    "regular-reserve-balance-breakdown-element": [
-        RegularReserveBalanceBreakdownElementOptions,
-        RegularReserveBalanceBreakdownElement
-    ];
-    "bnpl-reserve-balance-breakdown-element": [
-        BnplReserveBalanceBreakdownElementOptions,
-        BnplReserveBalanceBreakdownElement
-    ];
-    "total-balance-breakdown-element": [
-        TotalBalanceBreakdownElementOptions,
-        TotalBalanceBreakdownElement
-    ];
     "generate-withdrawal-receipt-element": [
         GenerateWithdrawalReceiptElementOptions,
         GenerateWithdrawalReceiptElement
     ];
     "status-banner-element": [StatusBannerElementOptions, StatusBannerElement];
+    "balances-element": [BalancesElementOptions, BalancesElement];
+    "pending-breakdown-element": [
+        PendingBreakdownElementOptions,
+        PendingBreakdownElement
+    ];
+    "reserve-breakdown-element": [
+        ReserveBreakdownElementOptions,
+        ReserveBreakdownElement
+    ];
+    "treasury-breakdown-element": [
+        TreasuryBreakdownElementOptions,
+        TreasuryBreakdownElement
+    ];
 };
 /**
  * Manages authentication and creates payout elements.
@@ -3104,20 +3544,21 @@ type PayoutsSessionElements = {
  *
  * @example Using modal methods
  * ```typescript
- * // With options object
+ * // No args — the modal auto-closes on completion or dismiss
+ * session.showWithdrawModal();
+ *
+ * // Custom callback — runs your handler, then auto-closes
  * session.showWithdrawModal({
  *   onWithdraw: () => console.log("Withdrawal submitted"),
- *   onClose: () => console.log("Modal closed"),
  * });
  *
- * // With callback for modal reference
- * session.showWithdrawModal((modal) => ({
- *   onWithdraw: () => {
- *     console.log("Withdrawal submitted");
- *     modal.close();
+ * // preventDefault() opts out of auto-close
+ * session.showWithdrawModal({
+ *   onWithdraw: (ev) => {
+ *     ev.preventDefault(); // modal stays open
+ *     showConfirmation();
  *   },
- *   onClose: () => modal.close(),
- * }));
+ * });
  * ```
  */
 interface PayoutsSession extends TypedEmitter<PayoutsSessionEvents> {
@@ -3155,81 +3596,136 @@ interface PayoutsSession extends TypedEmitter<PayoutsSessionEvents> {
     }, options: PayoutsSessionElements[T][0]): PayoutsSessionElements[T][1];
     /**
      * Show the withdraw element in a modal overlay.
+     *
+     * By default, the modal auto-closes on completion (`onWithdraw`) or dismiss (`onClose`).
+     * Call `ev.preventDefault()` in a callback to prevent auto-close.
+     *
      * @category modal
      * @param options - Element options or a callback that receives the modal container
      * @returns The modal container, or undefined if a modal is already open (unless force is true)
      */
-    showWithdrawModal: <Force extends boolean = false>(options: WithdrawElementOptions | ((modal: ModalContainer) => WithdrawElementOptions), force?: Force) => Force extends true ? ModalContainer : ModalContainer | undefined;
+    showWithdrawModal: <Force extends boolean = false>(options?: WithdrawElementOptions | ((modal: ModalContainer) => WithdrawElementOptions), force?: Force) => Force extends true ? ModalContainer : ModalContainer | undefined;
     /**
      * Show the add payout method element in a modal overlay.
+     *
+     * By default, the modal auto-closes on completion (`onComplete`) or dismiss (`onClose`).
+     * Call `ev.preventDefault()` in a callback to prevent auto-close.
+     *
      * @category modal
      * @param options - Element options or a callback that receives the modal container
      * @returns The modal container, or undefined if a modal is already open (unless force is true)
      */
-    showAddPayoutMethodModal: <Force extends boolean = false>(options: AddPayoutMethodElementOptions | ((modal: ModalContainer) => AddPayoutMethodElementOptions), force?: Force) => Force extends true ? ModalContainer : ModalContainer | undefined;
+    showAddPayoutMethodModal: <Force extends boolean = false>(options?: AddPayoutMethodElementOptions | ((modal: ModalContainer) => AddPayoutMethodElementOptions), force?: Force) => Force extends true ? ModalContainer : ModalContainer | undefined;
     /**
      * Show the automatic withdraw settings element in a modal overlay.
+     *
+     * By default, the modal auto-closes on completion (`onComplete`) or dismiss (`onClose`).
+     * Call `ev.preventDefault()` in a callback to prevent auto-close.
+     *
      * @category modal
      * @param options - Element options or a callback that receives the modal container
      * @returns The modal container, or undefined if a modal is already open (unless force is true)
      */
-    showAutomaticWithdrawModal: <Force extends boolean = false>(options: AutomaticWithdrawElementOptions | ((modal: ModalContainer) => AutomaticWithdrawElementOptions), force?: Force) => Force extends true ? ModalContainer : ModalContainer | undefined;
+    showAutomaticWithdrawModal: <Force extends boolean = false>(options?: AutomaticWithdrawElementOptions | ((modal: ModalContainer) => AutomaticWithdrawElementOptions), force?: Force) => Force extends true ? ModalContainer : ModalContainer | undefined;
     /**
      * Show the identity verification element in a modal overlay.
+     *
+     * By default, the modal auto-closes on completion (`onVerificationSubmitted`) or dismiss (`onClose`).
+     * Call `ev.preventDefault()` in a callback to prevent auto-close.
+     *
      * @category modal
      * @param options - Element options or a callback that receives the modal container
      * @returns The modal container, or undefined if a modal is already open (unless force is true)
      */
-    showVerifyModal: <Force extends boolean = false>(options: VerifyElementOptions | ((modal: ModalContainer) => VerifyElementOptions), force?: Force) => Force extends true ? ModalContainer : ModalContainer | undefined;
+    showVerifyModal: <Force extends boolean = false>(options?: VerifyElementOptions | ((modal: ModalContainer) => VerifyElementOptions), force?: Force) => Force extends true ? ModalContainer : ModalContainer | undefined;
     /**
      * Show the withdrawal breakdown element in a modal overlay.
+     *
+     * By default, the modal auto-closes on dismiss (`onClose`).
+     * Call `ev.preventDefault()` in a callback to prevent auto-close.
+     *
      * @category modal
-     * @param options - Element options or a callback that receives the modal container
+     * @param options - Element options or a callback that receives the modal container. Must include `withdrawalId`.
      * @returns The modal container, or undefined if a modal is already open (unless force is true)
      */
     showWithdrawalBreakdownModal: <Force extends boolean = false>(options: WithdrawalBreakdownElementOptions | ((modal: ModalContainer) => WithdrawalBreakdownElementOptions), force?: Force) => Force extends true ? ModalContainer : ModalContainer | undefined;
     /**
      * Show the change account country element in a modal overlay.
+     *
+     * By default, the modal auto-closes on completion (`onCountryChanged`) or dismiss (`onClose`).
+     * Call `ev.preventDefault()` in a callback to prevent auto-close.
+     *
      * @category modal
      * @param options - Element options or a callback that receives the modal container
      * @returns The modal container, or undefined if a modal is already open (unless force is true)
      */
-    showChangeAccountCountryModal: <Force extends boolean = false>(options: ChangeAccountCountryElementOptions | ((modal: ModalContainer) => ChangeAccountCountryElementOptions), force?: Force) => Force extends true ? ModalContainer : ModalContainer | undefined;
+    showChangeAccountCountryModal: <Force extends boolean = false>(options?: ChangeAccountCountryElementOptions | ((modal: ModalContainer) => ChangeAccountCountryElementOptions), force?: Force) => Force extends true ? ModalContainer : ModalContainer | undefined;
     /**
      * Show the reset account element in a modal overlay.
+     *
+     * By default, the modal auto-closes on completion (`onReset`) or dismiss (`onClose`).
+     * Call `ev.preventDefault()` in a callback to prevent auto-close.
+     *
      * @category modal
      * @param options - Element options or a callback that receives the modal container
      * @returns The modal container, or undefined if a modal is already open (unless force is true)
      */
-    showResetAccountModal: <Force extends boolean = false>(options: ResetAccountElementOptions | ((modal: ModalContainer) => ResetAccountElementOptions), force?: Force) => Force extends true ? ModalContainer : ModalContainer | undefined;
+    showResetAccountModal: <Force extends boolean = false>(options?: ResetAccountElementOptions | ((modal: ModalContainer) => ResetAccountElementOptions), force?: Force) => Force extends true ? ModalContainer : ModalContainer | undefined;
     /**
-     * Show the total balance breakdown element in a modal overlay.
+     * Show the available cash breakdown element in a modal overlay.
+     *
+     * By default, the modal auto-closes on dismiss (`onClose`).
+     * Call `ev.preventDefault()` in a callback to prevent auto-close.
+     *
      * @category modal
      * @param options - Element options or a callback that receives the modal container
      * @returns The modal container, or undefined if a modal is already open (unless force is true)
      */
-    showTotalBalanceBreakdownModal: <Force extends boolean = false>(options: TotalBalanceBreakdownElementOptions | ((modal: ModalContainer) => TotalBalanceBreakdownElementOptions), force?: Force) => Force extends true ? ModalContainer : ModalContainer | undefined;
+    showAvailableCashBreakdownModal: <Force extends boolean = false>(options?: AvailableCashBreakdownElementOptions | ((modal: ModalContainer) => AvailableCashBreakdownElementOptions), force?: Force) => Force extends true ? ModalContainer : ModalContainer | undefined;
     /**
-     * Show the regular reserve balance breakdown element in a modal overlay.
+     * Show the generate withdrawal receipt element in a modal overlay.
+     *
+     * By default, the modal auto-closes on completion (`onReceiptRequested`) or dismiss (`onClose`).
+     * Call `ev.preventDefault()` in a callback to prevent auto-close.
+     *
+     * @category modal
+     * @param options - Element options or a callback that receives the modal container. Must include `withdrawalId`.
+     * @returns The modal container, or undefined if a modal is already open (unless force is true)
+     */
+    showGenerateWithdrawalReceiptModal: <Force extends boolean = false>(options: GenerateWithdrawalReceiptElementOptions | ((modal: ModalContainer) => GenerateWithdrawalReceiptElementOptions), force?: Force) => Force extends true ? ModalContainer : ModalContainer | undefined;
+    /**
+     * Show the pending breakdown element in a modal overlay.
+     *
+     * By default, the modal auto-closes on dismiss (`onClose`).
+     * Call `ev.preventDefault()` in a callback to prevent auto-close.
+     *
      * @category modal
      * @param options - Element options or a callback that receives the modal container
      * @returns The modal container, or undefined if a modal is already open (unless force is true)
      */
-    showRegularReserveBalanceBreakdownModal: <Force extends boolean = false>(options: RegularReserveBalanceBreakdownElementOptions | ((modal: ModalContainer) => RegularReserveBalanceBreakdownElementOptions), force?: Force) => Force extends true ? ModalContainer : ModalContainer | undefined;
+    showPendingBreakdownModal: <Force extends boolean = false>(options?: PendingBreakdownElementOptions | ((modal: ModalContainer) => PendingBreakdownElementOptions), force?: Force) => Force extends true ? ModalContainer : ModalContainer | undefined;
     /**
-     * Show the BNPL reserve balance breakdown element in a modal overlay.
+     * Show the reserve breakdown element in a modal overlay.
+     *
+     * By default, the modal auto-closes on dismiss (`onClose`).
+     * Call `ev.preventDefault()` in a callback to prevent auto-close.
+     *
      * @category modal
      * @param options - Element options or a callback that receives the modal container
      * @returns The modal container, or undefined if a modal is already open (unless force is true)
      */
-    showBnplReserveBalanceBreakdownModal: <Force extends boolean = false>(options: BnplReserveBalanceBreakdownElementOptions | ((modal: ModalContainer) => BnplReserveBalanceBreakdownElementOptions), force?: Force) => Force extends true ? ModalContainer : ModalContainer | undefined;
+    showReserveBreakdownModal: <Force extends boolean = false>(options?: ReserveBreakdownElementOptions | ((modal: ModalContainer) => ReserveBreakdownElementOptions), force?: Force) => Force extends true ? ModalContainer : ModalContainer | undefined;
     /**
-     * Show the generate withdrawal receipt element in a modal overlay.
+     * Show the treasury breakdown element in a modal overlay.
+     *
+     * By default, the modal auto-closes on dismiss (`onClose`).
+     * Call `ev.preventDefault()` in a callback to prevent auto-close.
+     *
      * @category modal
      * @param options - Element options or a callback that receives the modal container
      * @returns The modal container, or undefined if a modal is already open (unless force is true)
      */
-    showGenerateWithdrawalReceiptModal: <Force extends boolean = false>(options: GenerateWithdrawalReceiptElementOptions | ((modal: ModalContainer) => GenerateWithdrawalReceiptElementOptions), force?: Force) => Force extends true ? ModalContainer : ModalContainer | undefined;
+    showTreasuryBreakdownModal: <Force extends boolean = false>(options?: TreasuryBreakdownElementOptions | ((modal: ModalContainer) => TreasuryBreakdownElementOptions), force?: Force) => Force extends true ? ModalContainer : ModalContainer | undefined;
 }
 
 declare global {
@@ -3380,4 +3876,4 @@ interface WhopElementsEvents {
     optionsUpdated: (options: WhopElementsOptions) => void;
 }
 
-export type { AddPayoutMethodElement, AddPayoutMethodElementOptions, AddPayoutMethodElementSnapshot, Appearance, AutomaticWithdrawElement, AutomaticWithdrawElementOptions, AutomaticWithdrawElementSnapshot, BalanceElement, BalanceElementOptions, BalanceElementSnapshot, BnplReserveBalanceBreakdownElement, BnplReserveBalanceBreakdownElementOptions, BnplReserveBalanceBreakdownElementSnapshot, ChangeAccountCountryElement, ChangeAccountCountryElementOptions, ChangeAccountCountryElementSnapshot, ChatElement, ChatElementEvent, ChatElementOptions, ChatElementSnapshot, ChatSession, ChatSessionElements, ChatSessionEvents, ChatSessionOptions, DmsListElement, DmsListElementEvent, DmsListElementOptions, DmsListElementSnapshot, ExpandedChatSessionOptions, ExpandedPayoutsSessionOptions, GenerateWithdrawalReceiptElement, GenerateWithdrawalReceiptElementOptions, GenerateWithdrawalReceiptElementSnapshot, I18nSupportedLocale, PayoutsSession, PayoutsSessionElements, PayoutsSessionEvents, PayoutsSessionOptions, RegularReserveBalanceBreakdownElement, RegularReserveBalanceBreakdownElementOptions, RegularReserveBalanceBreakdownElementSnapshot, ResetAccountElement, ResetAccountElementOptions, ResetAccountElementSnapshot, StatusBannerElement, StatusBannerElementOptions, StatusBannerElementSnapshot, StatusBannerType, TotalBalanceBreakdownElement, TotalBalanceBreakdownElementOptions, TotalBalanceBreakdownElementSnapshot, VerifyElement, VerifyElementOptions, VerifyElementSnapshot, WhopElement, WhopElements, WhopElementsConstructor, WhopElementsEnvironment, WhopElementsEvents, WhopElementsOptions, WithdrawButtonElement, WithdrawButtonElementOptions, WithdrawElement, WithdrawElementOptions, WithdrawElementSnapshot, WithdrawalBreakdownElement, WithdrawalBreakdownElementOptions, WithdrawalBreakdownElementSnapshot, WithdrawalsElement, WithdrawalsElementOptions, WithdrawalsElementSnapshot };
+export { type AddPayoutMethodElement, type AddPayoutMethodElementOptions, type AddPayoutMethodElementSnapshot, type Appearance, type AutomaticWithdrawElement, type AutomaticWithdrawElementOptions, type AutomaticWithdrawElementSnapshot, type AvailableCashBreakdownElement, type AvailableCashBreakdownElementOptions, type AvailableCashBreakdownElementSnapshot, type BalanceElement, type BalanceElementOptions, type BalanceElementSnapshot, type BalancesElement, type BalancesElementOptions, type BalancesElementSnapshot, type ChangeAccountCountryElement, type ChangeAccountCountryElementOptions, type ChangeAccountCountryElementSnapshot, type ChatElement, type ChatElementEvent, type ChatElementOptions, type ChatElementSnapshot, type ChatSession, type ChatSessionElements, type ChatSessionEvents, type ChatSessionOptions, type DmsListElement, type DmsListElementEvent, type DmsListElementOptions, type DmsListElementSnapshot, type ExpandedChatSessionOptions, type ExpandedPayoutsSessionOptions, type GenerateWithdrawalReceiptElement, type GenerateWithdrawalReceiptElementOptions, type GenerateWithdrawalReceiptElementSnapshot, type I18nSupportedLocale, type PayoutsSession, type PayoutsSessionElements, type PayoutsSessionEvents, type PayoutsSessionOptions, type PendingBreakdownElement, type PendingBreakdownElementOptions, type PendingBreakdownElementSnapshot, type ReserveBreakdownElement, type ReserveBreakdownElementOptions, type ReserveBreakdownElementSnapshot, type ResetAccountElement, type ResetAccountElementOptions, type ResetAccountElementSnapshot, type SearchElement, type SearchElementOptions, type SearchElementSnapshot, type StatusBannerElement, type StatusBannerElementOptions, type StatusBannerElementSnapshot, type StatusBannerType, type TreasuryBreakdownElement, type TreasuryBreakdownElementOptions, type TreasuryBreakdownElementSnapshot, type VerifyElement, type VerifyElementOptions, type VerifyElementSnapshot, type WhopElement, WhopElementError, type WhopElementErrorCode, type WhopElements, type WhopElementsConstructor, type WhopElementsEnvironment, type WhopElementsEvents, type WhopElementsOptions, type WithdrawButtonElement, type WithdrawButtonElementOptions, type WithdrawElement, type WithdrawElementOptions, type WithdrawElementSnapshot, type WithdrawalBreakdownElement, type WithdrawalBreakdownElementOptions, type WithdrawalBreakdownElementSnapshot, type WithdrawalsElement, type WithdrawalsElementOptions, type WithdrawalsElementSnapshot };