@whop/embedded-components-react-js 1.1.1 → 1.2.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @whop/embedded-components-react-js
 
+## 1.2.0
+
+### Minor Changes
+
+- 4e3a97c: New wallet deposit element: `session.createElement("deposit-element")` / `session.showDepositModal()` on the wallet session, and `<DepositElement />` in the React package. Renders the whop.com deposit flow inline — amount entry, bank transfer instructions, and per-network crypto deposit addresses.
+
+### Patch Changes
+
+- Updated dependencies [4e3a97c]
+  - @whop/embedded-components-vanilla-js@1.2.0
+
 ## 1.1.1
 
 ### Patch Changes

package/dist/chat/elements/chat.d.ts

@@ -1,4 +1,4 @@
-import { WithFallbackPropsRequired } from '../with-fallback.js';
+import { WithFallbackPropsRequired } from '../../lib/create-with-fallback.js';
 import * as _whop_embedded_components_vanilla_js_types from '@whop/embedded-components-vanilla-js/types';
 import 'react';
 

package/dist/chat/elements/dms-list.d.ts

@@ -1,4 +1,4 @@
-import { WithFallbackPropsOptional } from '../with-fallback.js';
+import { WithFallbackPropsOptional } from '../../lib/create-with-fallback.js';
 import * as _whop_embedded_components_vanilla_js_types from '@whop/embedded-components-vanilla-js/types';
 import 'react';
 

package/dist/chat/elements/index.d.ts

@@ -1,6 +1,6 @@
 export { ChatElement } from './chat.js';
 export { DmsListElement } from './dms-list.js';
 export { SearchElement } from './search-element.js';
-import '../with-fallback.js';
-import '@whop/embedded-components-vanilla-js/types';
+import '../../lib/create-with-fallback.js';
 import 'react';
+import '@whop/embedded-components-vanilla-js/types';

package/dist/chat/elements/search-element.d.ts

@@ -1,4 +1,4 @@
-import { WithFallbackPropsOptional } from '../with-fallback.js';
+import { WithFallbackPropsOptional } from '../../lib/create-with-fallback.js';
 import * as _whop_embedded_components_vanilla_js_types from '@whop/embedded-components-vanilla-js/types';
 import 'react';
 

package/dist/chat/index.d.ts

@@ -2,6 +2,6 @@ export { ChatElement } from './elements/chat.js';
 export { DmsListElement } from './elements/dms-list.js';
 export { SearchElement } from './elements/search-element.js';
 export { ChatSession, useChatSession } from './session.js';
-import './with-fallback.js';
-import '@whop/embedded-components-vanilla-js/types';
+import '../lib/create-with-fallback.js';
 import 'react';
+import '@whop/embedded-components-vanilla-js/types';

package/dist/chat/with-fallback.d.ts

@@ -1,55 +1,14 @@
+import { WithFallbackPropsRequired, WithFallbackPropsOptional } from '../lib/create-with-fallback.js';
 import { ChatSessionElements } from '@whop/embedded-components-vanilla-js/types';
-import React__default from 'react';
+import 'react';
 
-/**
- * Valid element type strings that can be passed to createElement.
- */
-type ElementType = keyof ChatSessionElements;
-/**
- * Extract the options type for a given element type using indexed access.
- * PayoutsSessionElements maps element types to [Options, Element] tuples.
- */
-type ElementOptionsFor<T extends ElementType> = ChatSessionElements[T][0];
-/**
- * Component definition with a constrained element type.
- * The type must be a valid element type from the SDK.
- */
-interface ElementComponentDefinition<T extends ElementType = ElementType> {
+declare const withFallback: <const T extends "chat-element" | "dms-list-element" | "search-element", TRequired extends boolean = false>(Component: {
     displayName: string;
     type: T;
-}
-interface WithFallbackPropsBase {
-    className?: string;
-    style?: React__default.CSSProperties;
-    onReady?: () => void;
-    fallback?: React__default.ReactNode;
-}
-interface WithFallbackPropsRequired<TOptions> extends WithFallbackPropsBase {
-    options: TOptions;
-}
-interface WithFallbackPropsOptional<TOptions> extends WithFallbackPropsBase {
-    options?: TOptions;
-}
-type WithFallbackComponent<TOptions, TRequired extends boolean> = {
-    (props: TRequired extends true ? WithFallbackPropsRequired<TOptions> : WithFallbackPropsOptional<TOptions>): React__default.ReactNode;
+}) => {
+    (props: TRequired extends true ? WithFallbackPropsRequired<ChatSessionElements[T][0]> : WithFallbackPropsOptional<ChatSessionElements[T][0]>): React.ReactNode;
     displayName: string;
     type: string;
 };
-/**
- * Creates a React component that wraps an embedded element with fallback support.
- *
- * @example
- * ```tsx
- * // Type-safe: options type is inferred from the element type
- * export const ChatElement = withFallback({
- *   displayName: "ChatElement",
- *   type: "chat-element",
- * } as const);
- *
- * // Usage - TypeScript knows the correct options type
- * <ChatElement options={{ channelId: "channel_xxx" }} />
- * ```
- */
-declare function withFallback<const T extends ElementType, TRequired extends boolean = false>(Component: ElementComponentDefinition<T>): WithFallbackComponent<ElementOptionsFor<T>, TRequired>;
 
-export { type WithFallbackPropsOptional, type WithFallbackPropsRequired, withFallback };
+export { WithFallbackPropsOptional, WithFallbackPropsRequired, withFallback };

package/dist/chat/with-fallback.js

@@ -1,10 +1,8 @@
 "use strict";
 "use client";
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -18,68 +16,13 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var with_fallback_exports = {};
 __export(with_fallback_exports, {
   withFallback: () => withFallback
 });
 module.exports = __toCommonJS(with_fallback_exports);
-var import_react = __toESM(require("react"));
-var import_use_element_snapshot = require("../lib/use-element-snapshot");
+var import_create_with_fallback = require("../lib/create-with-fallback");
 var import_session = require("./session");
-function withFallback(Component) {
-  function WrappedElement({
-    options,
-    className,
-    style,
-    onReady,
-    fallback
-  }) {
-    const chatSession = (0, import_session.useChatSession)();
-    const ref = (0, import_react.useRef)(null);
-    const element = (0, import_react.useMemo)(() => {
-      if (!chatSession) return null;
-      return chatSession.createElement(Component, options ?? {});
-    }, [chatSession]);
-    const elementSnapshot = (0, import_use_element_snapshot.useElementSnapshot)(element);
-    const isReady = elementSnapshot?.state === "ready";
-    (0, import_react.useEffect)(() => {
-      if (!element) return;
-      element.updateOptions(options ?? {});
-    }, [options, element]);
-    (0, import_react.useEffect)(() => {
-      if (!element || !onReady) return;
-      element.on("ready", onReady);
-      return () => {
-        element.off("ready", onReady);
-      };
-    }, [element, onReady]);
-    (0, import_react.useLayoutEffect)(() => {
-      if (!element || !ref.current) return;
-      element.mount(ref.current);
-      return () => {
-        element.unmount();
-      };
-    }, [element, ref.current]);
-    return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
-      "div",
-      {
-        style: { ...style, visibility: isReady ? void 0 : "hidden" },
-        className,
-        ref
-      }
-    ), !isReady && (fallback ?? null));
-  }
-  WrappedElement.displayName = Component.displayName;
-  WrappedElement.type = Component.type;
-  return WrappedElement;
-}
+const withFallback = (0, import_create_with_fallback.createWithFallback)(import_session.useChatSession);
 //# sourceMappingURL=with-fallback.js.map

package/dist/chat/with-fallback.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/chat/with-fallback.tsx"],"sourcesContent":["\"use client\";\n\nimport type {\n\tChatSessionElements,\n\tWhopElement,\n} from \"@whop/embedded-components-vanilla-js/types\";\nimport React, { useEffect, useLayoutEffect, useMemo, useRef } from \"react\";\nimport { useElementSnapshot } from \"../lib/use-element-snapshot\";\nimport { useChatSession } from \"./session\";\n\n/**\n * Valid element type strings that can be passed to createElement.\n */\ntype ElementType = keyof ChatSessionElements;\n\n/**\n * Extract the options type for a given element type using indexed access.\n * PayoutsSessionElements maps element types to [Options, Element] tuples.\n */\ntype ElementOptionsFor<T extends ElementType> = ChatSessionElements[T][0];\n\n/**\n * Base element type that all created elements conform to.\n * Using WhopElement<any, any, any> gives us access to common methods\n * (mount, unmount, on, off, updateOptions) without union type issues.\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype BaseElement = WhopElement<any, any, any>;\n\n/**\n * Component definition with a constrained element type.\n * The type must be a valid element type from the SDK.\n */\ninterface ElementComponentDefinition<T extends ElementType = ElementType> {\n\tdisplayName: string;\n\ttype: T;\n}\n\ninterface WithFallbackPropsBase {\n\tclassName?: string;\n\tstyle?: React.CSSProperties;\n\tonReady?: () => void;\n\tfallback?: React.ReactNode;\n}\n\nexport interface WithFallbackPropsRequired<\n\tTOptions,\n> extends WithFallbackPropsBase {\n\toptions: TOptions;\n}\n\nexport interface WithFallbackPropsOptional<\n\tTOptions,\n> extends WithFallbackPropsBase {\n\toptions?: TOptions;\n}\n\ntype WithFallbackComponent<TOptions, TRequired extends boolean> = {\n\t(\n\t\tprops: TRequired extends true\n\t\t\t? WithFallbackPropsRequired<TOptions>\n\t\t\t: WithFallbackPropsOptional<TOptions>,\n\t): React.ReactNode;\n\tdisplayName: string;\n\ttype: string;\n};\n\n/**\n * Creates a React component that wraps an embedded element with fallback support.\n *\n * @example\n * ```tsx\n * // Type-safe: options type is inferred from the element type\n * export const ChatElement = withFallback({\n *   displayName: \"ChatElement\",\n *   type: \"chat-element\",\n * } as const);\n *\n * // Usage - TypeScript knows the correct options type\n * <ChatElement options={{ channelId: \"channel_xxx\" }} />\n * ```\n */\nexport function withFallback<\n\tconst T extends ElementType,\n\tTRequired extends boolean = false,\n>(\n\tComponent: ElementComponentDefinition<T>,\n): WithFallbackComponent<ElementOptionsFor<T>, TRequired> {\n\ttype TOptions = ElementOptionsFor<T>;\n\n\tfunction WrappedElement({\n\t\toptions,\n\t\tclassName,\n\t\tstyle,\n\t\tonReady,\n\t\tfallback,\n\t}: WithFallbackPropsOptional<TOptions>) {\n\t\tconst chatSession = useChatSession();\n\t\tconst ref = useRef<HTMLDivElement>(null);\n\n\t\tconst element = useMemo((): BaseElement | null => {\n\t\t\tif (!chatSession) return null;\n\t\t\t// Safe: T is constrained to valid element types, and options matches T\n\t\t\treturn chatSession.createElement(Component, options ?? ({} as TOptions));\n\t\t}, [chatSession]);\n\n\t\tconst elementSnapshot = useElementSnapshot(element);\n\n\t\tconst isReady = elementSnapshot?.state === \"ready\";\n\n\t\tuseEffect(() => {\n\t\t\tif (!element) return;\n\t\t\telement.updateOptions(options ?? {});\n\t\t}, [options, element]);\n\n\t\tuseEffect(() => {\n\t\t\tif (!element || !onReady) return;\n\t\t\telement.on(\"ready\", onReady);\n\t\t\treturn () => {\n\t\t\t\telement.off(\"ready\", onReady);\n\t\t\t};\n\t\t}, [element, onReady]);\n\n\t\tuseLayoutEffect(() => {\n\t\t\tif (!element || !ref.current) return;\n\t\t\telement.mount(ref.current);\n\t\t\treturn () => {\n\t\t\t\telement.unmount();\n\t\t\t};\n\t\t}, [element, ref.current]);\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<div\n\t\t\t\t\tstyle={{ ...style, visibility: isReady ? undefined : \"hidden\" }}\n\t\t\t\t\tclassName={className}\n\t\t\t\t\tref={ref}\n\t\t\t\t/>\n\t\t\t\t{!isReady && (fallback ?? null)}\n\t\t\t</>\n\t\t);\n\t}\n\n\tWrappedElement.displayName = Component.displayName;\n\tWrappedElement.type = Component.type;\n\n\treturn WrappedElement as WithFallbackComponent<TOptions, TRequired>;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAMA,mBAAmE;AACnE,kCAAmC;AACnC,qBAA+B;AA0ExB,SAAS,aAIf,WACyD;AAGzD,WAAS,eAAe;AAAA,IACvB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,GAAwC;AACvC,UAAM,kBAAc,+BAAe;AACnC,UAAM,UAAM,qBAAuB,IAAI;AAEvC,UAAM,cAAU,sBAAQ,MAA0B;AACjD,UAAI,CAAC,YAAa,QAAO;AAEzB,aAAO,YAAY,cAAc,WAAW,WAAY,CAAC,CAAc;AAAA,IACxE,GAAG,CAAC,WAAW,CAAC;AAEhB,UAAM,sBAAkB,gDAAmB,OAAO;AAElD,UAAM,UAAU,iBAAiB,UAAU;AAE3C,gCAAU,MAAM;AACf,UAAI,CAAC,QAAS;AACd,cAAQ,cAAc,WAAW,CAAC,CAAC;AAAA,IACpC,GAAG,CAAC,SAAS,OAAO,CAAC;AAErB,gCAAU,MAAM;AACf,UAAI,CAAC,WAAW,CAAC,QAAS;AAC1B,cAAQ,GAAG,SAAS,OAAO;AAC3B,aAAO,MAAM;AACZ,gBAAQ,IAAI,SAAS,OAAO;AAAA,MAC7B;AAAA,IACD,GAAG,CAAC,SAAS,OAAO,CAAC;AAErB,sCAAgB,MAAM;AACrB,UAAI,CAAC,WAAW,CAAC,IAAI,QAAS;AAC9B,cAAQ,MAAM,IAAI,OAAO;AACzB,aAAO,MAAM;AACZ,gBAAQ,QAAQ;AAAA,MACjB;AAAA,IACD,GAAG,CAAC,SAAS,IAAI,OAAO,CAAC;AAEzB,WACC,6BAAAA,QAAA,2BAAAA,QAAA,gBACC,6BAAAA,QAAA;AAAA,MAAC;AAAA;AAAA,QACA,OAAO,EAAE,GAAG,OAAO,YAAY,UAAU,SAAY,SAAS;AAAA,QAC9D;AAAA,QACA;AAAA;AAAA,IACD,GACC,CAAC,YAAY,YAAY,KAC3B;AAAA,EAEF;AAEA,iBAAe,cAAc,UAAU;AACvC,iBAAe,OAAO,UAAU;AAEhC,SAAO;AACR;","names":["React"]}
+{"version":3,"sources":["../../src/chat/with-fallback.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ChatSessionElements } from \"@whop/embedded-components-vanilla-js/types\";\n\nimport { createWithFallback } from \"../lib/create-with-fallback\";\nimport { useChatSession } from \"./session\";\n\nexport type {\n\tWithFallbackPropsOptional,\n\tWithFallbackPropsRequired,\n} from \"../lib/create-with-fallback\";\n\nexport const withFallback =\n\tcreateWithFallback<ChatSessionElements>(useChatSession);\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA,kCAAmC;AACnC,qBAA+B;AAOxB,MAAM,mBACZ,gDAAwC,6BAAc;","names":[]}

package/dist/chat/with-fallback.mjs

@@ -1,58 +1,6 @@
 "use client";
 import "../chunk-NSSMTXJJ.mjs";
-import React, { useEffect, useLayoutEffect, useMemo, useRef } from "react";
-import { useElementSnapshot } from "../lib/use-element-snapshot.mjs";
+import { createWithFallback } from "../lib/create-with-fallback.mjs";
 import { useChatSession } from "./session.mjs";
-function withFallback(Component) {
-    function WrappedElement({ options, className, style, onReady, fallback }) {
-        const chatSession = useChatSession();
-        const ref = useRef(null);
-        const element = useMemo(()=>{
-            if (!chatSession) return null;
-            return chatSession.createElement(Component, options ?? {});
-        }, [
-            chatSession
-        ]);
-        const elementSnapshot = useElementSnapshot(element);
-        const isReady = elementSnapshot?.state === "ready";
-        useEffect(()=>{
-            if (!element) return;
-            element.updateOptions(options ?? {});
-        }, [
-            options,
-            element
-        ]);
-        useEffect(()=>{
-            if (!element || !onReady) return;
-            element.on("ready", onReady);
-            return ()=>{
-                element.off("ready", onReady);
-            };
-        }, [
-            element,
-            onReady
-        ]);
-        useLayoutEffect(()=>{
-            if (!element || !ref.current) return;
-            element.mount(ref.current);
-            return ()=>{
-                element.unmount();
-            };
-        }, [
-            element,
-            ref.current
-        ]);
-        return React.createElement(React.Fragment, null, React.createElement("div", {
-            style: {
-                ...style,
-                visibility: isReady ? void 0 : "hidden"
-            },
-            className,
-            ref
-        }), !isReady && (fallback ?? null));
-    }
-    WrappedElement.displayName = Component.displayName;
-    WrappedElement.type = Component.type;
-    return WrappedElement;
-}
+const withFallback = createWithFallback(useChatSession);
 export { withFallback };

package/dist/chat/with-fallback.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/chat/with-fallback.tsx"],"sourcesContent":["\"use client\";\n\nimport type {\n\tChatSessionElements,\n\tWhopElement,\n} from \"@whop/embedded-components-vanilla-js/types\";\nimport React, { useEffect, useLayoutEffect, useMemo, useRef } from \"react\";\nimport { useElementSnapshot } from \"../lib/use-element-snapshot\";\nimport { useChatSession } from \"./session\";\n\n/**\n * Valid element type strings that can be passed to createElement.\n */\ntype ElementType = keyof ChatSessionElements;\n\n/**\n * Extract the options type for a given element type using indexed access.\n * PayoutsSessionElements maps element types to [Options, Element] tuples.\n */\ntype ElementOptionsFor<T extends ElementType> = ChatSessionElements[T][0];\n\n/**\n * Base element type that all created elements conform to.\n * Using WhopElement<any, any, any> gives us access to common methods\n * (mount, unmount, on, off, updateOptions) without union type issues.\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype BaseElement = WhopElement<any, any, any>;\n\n/**\n * Component definition with a constrained element type.\n * The type must be a valid element type from the SDK.\n */\ninterface ElementComponentDefinition<T extends ElementType = ElementType> {\n\tdisplayName: string;\n\ttype: T;\n}\n\ninterface WithFallbackPropsBase {\n\tclassName?: string;\n\tstyle?: React.CSSProperties;\n\tonReady?: () => void;\n\tfallback?: React.ReactNode;\n}\n\nexport interface WithFallbackPropsRequired<\n\tTOptions,\n> extends WithFallbackPropsBase {\n\toptions: TOptions;\n}\n\nexport interface WithFallbackPropsOptional<\n\tTOptions,\n> extends WithFallbackPropsBase {\n\toptions?: TOptions;\n}\n\ntype WithFallbackComponent<TOptions, TRequired extends boolean> = {\n\t(\n\t\tprops: TRequired extends true\n\t\t\t? WithFallbackPropsRequired<TOptions>\n\t\t\t: WithFallbackPropsOptional<TOptions>,\n\t): React.ReactNode;\n\tdisplayName: string;\n\ttype: string;\n};\n\n/**\n * Creates a React component that wraps an embedded element with fallback support.\n *\n * @example\n * ```tsx\n * // Type-safe: options type is inferred from the element type\n * export const ChatElement = withFallback({\n *   displayName: \"ChatElement\",\n *   type: \"chat-element\",\n * } as const);\n *\n * // Usage - TypeScript knows the correct options type\n * <ChatElement options={{ channelId: \"channel_xxx\" }} />\n * ```\n */\nexport function withFallback<\n\tconst T extends ElementType,\n\tTRequired extends boolean = false,\n>(\n\tComponent: ElementComponentDefinition<T>,\n): WithFallbackComponent<ElementOptionsFor<T>, TRequired> {\n\ttype TOptions = ElementOptionsFor<T>;\n\n\tfunction WrappedElement({\n\t\toptions,\n\t\tclassName,\n\t\tstyle,\n\t\tonReady,\n\t\tfallback,\n\t}: WithFallbackPropsOptional<TOptions>) {\n\t\tconst chatSession = useChatSession();\n\t\tconst ref = useRef<HTMLDivElement>(null);\n\n\t\tconst element = useMemo((): BaseElement | null => {\n\t\t\tif (!chatSession) return null;\n\t\t\t// Safe: T is constrained to valid element types, and options matches T\n\t\t\treturn chatSession.createElement(Component, options ?? ({} as TOptions));\n\t\t}, [chatSession]);\n\n\t\tconst elementSnapshot = useElementSnapshot(element);\n\n\t\tconst isReady = elementSnapshot?.state === \"ready\";\n\n\t\tuseEffect(() => {\n\t\t\tif (!element) return;\n\t\t\telement.updateOptions(options ?? {});\n\t\t}, [options, element]);\n\n\t\tuseEffect(() => {\n\t\t\tif (!element || !onReady) return;\n\t\t\telement.on(\"ready\", onReady);\n\t\t\treturn () => {\n\t\t\t\telement.off(\"ready\", onReady);\n\t\t\t};\n\t\t}, [element, onReady]);\n\n\t\tuseLayoutEffect(() => {\n\t\t\tif (!element || !ref.current) return;\n\t\t\telement.mount(ref.current);\n\t\t\treturn () => {\n\t\t\t\telement.unmount();\n\t\t\t};\n\t\t}, [element, ref.current]);\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<div\n\t\t\t\t\tstyle={{ ...style, visibility: isReady ? undefined : \"hidden\" }}\n\t\t\t\t\tclassName={className}\n\t\t\t\t\tref={ref}\n\t\t\t\t/>\n\t\t\t\t{!isReady && (fallback ?? null)}\n\t\t\t</>\n\t\t);\n\t}\n\n\tWrappedElement.displayName = Component.displayName;\n\tWrappedElement.type = Component.type;\n\n\treturn WrappedElement as WithFallbackComponent<TOptions, TRequired>;\n}\n"],"mappings":";;AAMA,OAAO,SAAS,WAAW,iBAAiB,SAAS,cAAc;AACnE,SAAS,0BAA0B;AACnC,SAAS,sBAAsB;AA0ExB,SAAS,aAIf,WACyD;AAGzD,WAAS,eAAe;AAAA,IACvB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,GAAwC;AACvC,UAAM,cAAc,eAAe;AACnC,UAAM,MAAM,OAAuB,IAAI;AAEvC,UAAM,UAAU,QAAQ,MAA0B;AACjD,UAAI,CAAC,YAAa,QAAO;AAEzB,aAAO,YAAY,cAAc,WAAW,WAAY,CAAC,CAAc;AAAA,IACxE,GAAG,CAAC,WAAW,CAAC;AAEhB,UAAM,kBAAkB,mBAAmB,OAAO;AAElD,UAAM,UAAU,iBAAiB,UAAU;AAE3C,cAAU,MAAM;AACf,UAAI,CAAC,QAAS;AACd,cAAQ,cAAc,WAAW,CAAC,CAAC;AAAA,IACpC,GAAG,CAAC,SAAS,OAAO,CAAC;AAErB,cAAU,MAAM;AACf,UAAI,CAAC,WAAW,CAAC,QAAS;AAC1B,cAAQ,GAAG,SAAS,OAAO;AAC3B,aAAO,MAAM;AACZ,gBAAQ,IAAI,SAAS,OAAO;AAAA,MAC7B;AAAA,IACD,GAAG,CAAC,SAAS,OAAO,CAAC;AAErB,oBAAgB,MAAM;AACrB,UAAI,CAAC,WAAW,CAAC,IAAI,QAAS;AAC9B,cAAQ,MAAM,IAAI,OAAO;AACzB,aAAO,MAAM;AACZ,gBAAQ,QAAQ;AAAA,MACjB;AAAA,IACD,GAAG,CAAC,SAAS,IAAI,OAAO,CAAC;AAEzB,WACC,0DACC;AAAA,MAAC;AAAA;AAAA,QACA,OAAO,EAAE,GAAG,OAAO,YAAY,UAAU,SAAY,SAAS;AAAA,QAC9D;AAAA,QACA;AAAA;AAAA,IACD,GACC,CAAC,YAAY,YAAY,KAC3B;AAAA,EAEF;AAEA,iBAAe,cAAc,UAAU;AACvC,iBAAe,OAAO,UAAU;AAEhC,SAAO;AACR;","names":[]}
+{"version":3,"sources":["../../src/chat/with-fallback.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ChatSessionElements } from \"@whop/embedded-components-vanilla-js/types\";\n\nimport { createWithFallback } from \"../lib/create-with-fallback\";\nimport { useChatSession } from \"./session\";\n\nexport type {\n\tWithFallbackPropsOptional,\n\tWithFallbackPropsRequired,\n} from \"../lib/create-with-fallback\";\n\nexport const withFallback =\n\tcreateWithFallback<ChatSessionElements>(useChatSession);\n"],"mappings":";;AAIA,SAAS,0BAA0B;AACnC,SAAS,sBAAsB;AAOxB,MAAM,eACZ,mBAAwC,cAAc;","names":[]}

package/dist/index.d.ts

@@ -22,10 +22,10 @@ export { DmsListElement } from './chat/elements/dms-list.js';
 export { SearchElement } from './chat/elements/search-element.js';
 export { ChatSession, useChatSession } from './chat/session.js';
 export { useChatSessionRef } from './chat/use-session-ref.js';
+export { DepositElement } from './wallet/elements/deposit.js';
 export { WalletSession, useWalletSession } from './wallet/session.js';
 export { useWalletSessionRef } from './wallet/use-session-ref.js';
 export { Elements, useElements } from './provider.js';
 import '@whop/embedded-components-vanilla-js/types';
 import 'react';
-import './payouts/with-fallback.js';
-import './chat/with-fallback.js';
+import './lib/create-with-fallback.js';

package/dist/lib/create-with-fallback.d.ts

@@ -0,0 +1,51 @@
+import React__default from 'react';
+
+/**
+ * The minimal session surface the wrapper needs — the registry-typed
+ * createElement every session exposes.
+ */
+interface SessionLike<Registry extends Record<string, [unknown, unknown]>> {
+    createElement<T extends keyof Registry>(type: T | {
+        type: T;
+    }, options: Registry[T][0]): unknown;
+}
+interface WithFallbackPropsBase {
+    className?: string;
+    style?: React__default.CSSProperties;
+    onReady?: () => void;
+    fallback?: React__default.ReactNode;
+}
+interface WithFallbackPropsRequired<TOptions> extends WithFallbackPropsBase {
+    options: TOptions;
+}
+interface WithFallbackPropsOptional<TOptions> extends WithFallbackPropsBase {
+    options?: TOptions;
+}
+type WithFallbackComponent<TOptions, TRequired extends boolean> = {
+    (props: TRequired extends true ? WithFallbackPropsRequired<TOptions> : WithFallbackPropsOptional<TOptions>): React__default.ReactNode;
+    displayName: string;
+    type: string;
+};
+/**
+ * Builds a namespace-specific `withFallback` from that namespace's session
+ * hook. The returned helper creates a React component that wraps an embedded
+ * element with fallback support.
+ *
+ * @example
+ * ```tsx
+ * // src/wallet/with-fallback.tsx
+ * export const withFallback = createWithFallback<WalletSessionElements>(useWalletSession);
+ *
+ * // src/wallet/elements/deposit.tsx — options type inferred from the element type
+ * export const DepositElement = withFallback({
+ *   displayName: "DepositElement",
+ *   type: "deposit-element",
+ * } as const);
+ * ```
+ */
+declare function createWithFallback<Registry extends Record<string, [unknown, unknown]>>(useSession: () => SessionLike<Registry> | null): <const T extends keyof Registry & string, TRequired extends boolean = false>(Component: {
+    displayName: string;
+    type: T;
+}) => WithFallbackComponent<Registry[T][0], TRequired>;
+
+export { type WithFallbackPropsOptional, type WithFallbackPropsRequired, createWithFallback };

package/dist/lib/create-with-fallback.js

@@ -0,0 +1,89 @@
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var create_with_fallback_exports = {};
+__export(create_with_fallback_exports, {
+  createWithFallback: () => createWithFallback
+});
+module.exports = __toCommonJS(create_with_fallback_exports);
+var import_react = __toESM(require("react"));
+var import_use_element_snapshot = require("./use-element-snapshot");
+function createWithFallback(useSession) {
+  return function withFallback(Component) {
+    function WrappedElement({
+      options,
+      className,
+      style,
+      onReady,
+      fallback
+    }) {
+      const session = useSession();
+      const ref = (0, import_react.useRef)(null);
+      const element = (0, import_react.useMemo)(() => {
+        if (!session) return null;
+        return session.createElement(
+          Component,
+          options ?? {}
+        );
+      }, [session]);
+      const elementSnapshot = (0, import_use_element_snapshot.useElementSnapshot)(element);
+      const isReady = elementSnapshot?.state === "ready";
+      (0, import_react.useEffect)(() => {
+        if (!element) return;
+        element.updateOptions(options ?? {});
+      }, [options, element]);
+      (0, import_react.useEffect)(() => {
+        if (!element || !onReady) return;
+        element.on("ready", onReady);
+        return () => {
+          element.off("ready", onReady);
+        };
+      }, [element, onReady]);
+      (0, import_react.useLayoutEffect)(() => {
+        if (!element || !ref.current) return;
+        element.mount(ref.current);
+        return () => {
+          element.unmount();
+        };
+      }, [element, ref.current]);
+      return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
+        "div",
+        {
+          style: { ...style, visibility: isReady ? void 0 : "hidden" },
+          className,
+          ref
+        }
+      ), !isReady && (fallback ?? null));
+    }
+    WrappedElement.displayName = Component.displayName;
+    WrappedElement.type = Component.type;
+    return WrappedElement;
+  };
+}
+//# sourceMappingURL=create-with-fallback.js.map

package/dist/lib/create-with-fallback.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/create-with-fallback.tsx"],"sourcesContent":["\"use client\";\n\nimport type { WhopElement } from \"@whop/embedded-components-vanilla-js/types\";\nimport React, { useEffect, useLayoutEffect, useMemo, useRef } from \"react\";\nimport { useElementSnapshot } from \"./use-element-snapshot\";\n\n/**\n * Base element type that all created elements conform to.\n * Using WhopElement<any, any, any> gives us access to common methods\n * (mount, unmount, on, off, updateOptions) without union type issues.\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype BaseElement = WhopElement<any, any, any>;\n\n/**\n * The minimal session surface the wrapper needs — the registry-typed\n * createElement every session exposes.\n */\ninterface SessionLike<Registry extends Record<string, [unknown, unknown]>> {\n\tcreateElement<T extends keyof Registry>(\n\t\ttype: T | { type: T },\n\t\toptions: Registry[T][0],\n\t): unknown;\n}\n\ninterface WithFallbackPropsBase {\n\tclassName?: string;\n\tstyle?: React.CSSProperties;\n\tonReady?: () => void;\n\tfallback?: React.ReactNode;\n}\n\nexport interface WithFallbackPropsRequired<\n\tTOptions,\n> extends WithFallbackPropsBase {\n\toptions: TOptions;\n}\n\nexport interface WithFallbackPropsOptional<\n\tTOptions,\n> extends WithFallbackPropsBase {\n\toptions?: TOptions;\n}\n\ntype WithFallbackComponent<TOptions, TRequired extends boolean> = {\n\t(\n\t\tprops: TRequired extends true\n\t\t\t? WithFallbackPropsRequired<TOptions>\n\t\t\t: WithFallbackPropsOptional<TOptions>,\n\t): React.ReactNode;\n\tdisplayName: string;\n\ttype: string;\n};\n\n/**\n * Builds a namespace-specific `withFallback` from that namespace's session\n * hook. The returned helper creates a React component that wraps an embedded\n * element with fallback support.\n *\n * @example\n * ```tsx\n * // src/wallet/with-fallback.tsx\n * export const withFallback = createWithFallback<WalletSessionElements>(useWalletSession);\n *\n * // src/wallet/elements/deposit.tsx — options type inferred from the element type\n * export const DepositElement = withFallback({\n *   displayName: \"DepositElement\",\n *   type: \"deposit-element\",\n * } as const);\n * ```\n */\nexport function createWithFallback<\n\tRegistry extends Record<string, [unknown, unknown]>,\n>(useSession: () => SessionLike<Registry> | null) {\n\treturn function withFallback<\n\t\tconst T extends keyof Registry & string,\n\t\tTRequired extends boolean = false,\n\t>(Component: {\n\t\tdisplayName: string;\n\t\ttype: T;\n\t}): WithFallbackComponent<Registry[T][0], TRequired> {\n\t\ttype TOptions = Registry[T][0];\n\n\t\tfunction WrappedElement({\n\t\t\toptions,\n\t\t\tclassName,\n\t\t\tstyle,\n\t\t\tonReady,\n\t\t\tfallback,\n\t\t}: WithFallbackPropsOptional<TOptions>) {\n\t\t\tconst session = useSession();\n\t\t\tconst ref = useRef<HTMLDivElement>(null);\n\n\t\t\tconst element = useMemo((): BaseElement | null => {\n\t\t\t\tif (!session) return null;\n\t\t\t\t// Safe: T is constrained to valid element types, and options matches T\n\t\t\t\treturn session.createElement(\n\t\t\t\t\tComponent,\n\t\t\t\t\toptions ?? ({} as TOptions),\n\t\t\t\t) as BaseElement;\n\t\t\t\t// eslint-disable-next-line react-hooks/exhaustive-deps -- element is created once per session; options updates flow through updateOptions below\n\t\t\t}, [session]);\n\n\t\t\tconst elementSnapshot = useElementSnapshot(element);\n\n\t\t\tconst isReady = elementSnapshot?.state === \"ready\";\n\n\t\t\tuseEffect(() => {\n\t\t\t\tif (!element) return;\n\t\t\t\telement.updateOptions(options ?? {});\n\t\t\t}, [options, element]);\n\n\t\t\tuseEffect(() => {\n\t\t\t\tif (!element || !onReady) return;\n\t\t\t\telement.on(\"ready\", onReady);\n\t\t\t\treturn () => {\n\t\t\t\t\telement.off(\"ready\", onReady);\n\t\t\t\t};\n\t\t\t}, [element, onReady]);\n\n\t\t\tuseLayoutEffect(() => {\n\t\t\t\tif (!element || !ref.current) return;\n\t\t\t\telement.mount(ref.current);\n\t\t\t\treturn () => {\n\t\t\t\t\telement.unmount();\n\t\t\t\t};\n\t\t\t\t// eslint-disable-next-line react-hooks/exhaustive-deps -- ref.current intentionally re-runs the mount when the container attaches\n\t\t\t}, [element, ref.current]);\n\n\t\t\treturn (\n\t\t\t\t<>\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{ ...style, visibility: isReady ? undefined : \"hidden\" }}\n\t\t\t\t\t\tclassName={className}\n\t\t\t\t\t\tref={ref}\n\t\t\t\t\t/>\n\t\t\t\t\t{!isReady && (fallback ?? null)}\n\t\t\t\t</>\n\t\t\t);\n\t\t}\n\n\t\tWrappedElement.displayName = Component.displayName;\n\t\tWrappedElement.type = Component.type;\n\n\t\treturn WrappedElement as WithFallbackComponent<TOptions, TRequired>;\n\t};\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,mBAAmE;AACnE,kCAAmC;AAmE5B,SAAS,mBAEd,YAAgD;AACjD,SAAO,SAAS,aAGd,WAGmD;AAGpD,aAAS,eAAe;AAAA,MACvB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACD,GAAwC;AACvC,YAAM,UAAU,WAAW;AAC3B,YAAM,UAAM,qBAAuB,IAAI;AAEvC,YAAM,cAAU,sBAAQ,MAA0B;AACjD,YAAI,CAAC,QAAS,QAAO;AAErB,eAAO,QAAQ;AAAA,UACd;AAAA,UACA,WAAY,CAAC;AAAA,QACd;AAAA,MAED,GAAG,CAAC,OAAO,CAAC;AAEZ,YAAM,sBAAkB,gDAAmB,OAAO;AAElD,YAAM,UAAU,iBAAiB,UAAU;AAE3C,kCAAU,MAAM;AACf,YAAI,CAAC,QAAS;AACd,gBAAQ,cAAc,WAAW,CAAC,CAAC;AAAA,MACpC,GAAG,CAAC,SAAS,OAAO,CAAC;AAErB,kCAAU,MAAM;AACf,YAAI,CAAC,WAAW,CAAC,QAAS;AAC1B,gBAAQ,GAAG,SAAS,OAAO;AAC3B,eAAO,MAAM;AACZ,kBAAQ,IAAI,SAAS,OAAO;AAAA,QAC7B;AAAA,MACD,GAAG,CAAC,SAAS,OAAO,CAAC;AAErB,wCAAgB,MAAM;AACrB,YAAI,CAAC,WAAW,CAAC,IAAI,QAAS;AAC9B,gBAAQ,MAAM,IAAI,OAAO;AACzB,eAAO,MAAM;AACZ,kBAAQ,QAAQ;AAAA,QACjB;AAAA,MAED,GAAG,CAAC,SAAS,IAAI,OAAO,CAAC;AAEzB,aACC,6BAAAA,QAAA,2BAAAA,QAAA,gBACC,6BAAAA,QAAA;AAAA,QAAC;AAAA;AAAA,UACA,OAAO,EAAE,GAAG,OAAO,YAAY,UAAU,SAAY,SAAS;AAAA,UAC9D;AAAA,UACA;AAAA;AAAA,MACD,GACC,CAAC,YAAY,YAAY,KAC3B;AAAA,IAEF;AAEA,mBAAe,cAAc,UAAU;AACvC,mBAAe,OAAO,UAAU;AAEhC,WAAO;AAAA,EACR;AACD;","names":["React"]}

package/dist/lib/create-with-fallback.mjs

@@ -0,0 +1,59 @@
+"use client";
+import "../chunk-NSSMTXJJ.mjs";
+import React, { useEffect, useLayoutEffect, useMemo, useRef } from "react";
+import { useElementSnapshot } from "./use-element-snapshot.mjs";
+function createWithFallback(useSession) {
+    return function withFallback(Component) {
+        function WrappedElement({ options, className, style, onReady, fallback }) {
+            const session = useSession();
+            const ref = useRef(null);
+            const element = useMemo(()=>{
+                if (!session) return null;
+                return session.createElement(Component, options ?? {});
+            }, [
+                session
+            ]);
+            const elementSnapshot = useElementSnapshot(element);
+            const isReady = elementSnapshot?.state === "ready";
+            useEffect(()=>{
+                if (!element) return;
+                element.updateOptions(options ?? {});
+            }, [
+                options,
+                element
+            ]);
+            useEffect(()=>{
+                if (!element || !onReady) return;
+                element.on("ready", onReady);
+                return ()=>{
+                    element.off("ready", onReady);
+                };
+            }, [
+                element,
+                onReady
+            ]);
+            useLayoutEffect(()=>{
+                if (!element || !ref.current) return;
+                element.mount(ref.current);
+                return ()=>{
+                    element.unmount();
+                };
+            }, [
+                element,
+                ref.current
+            ]);
+            return React.createElement(React.Fragment, null, React.createElement("div", {
+                style: {
+                    ...style,
+                    visibility: isReady ? void 0 : "hidden"
+                },
+                className,
+                ref
+            }), !isReady && (fallback ?? null));
+        }
+        WrappedElement.displayName = Component.displayName;
+        WrappedElement.type = Component.type;
+        return WrappedElement;
+    };
+}
+export { createWithFallback };

package/dist/lib/create-with-fallback.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/create-with-fallback.tsx"],"sourcesContent":["\"use client\";\n\nimport type { WhopElement } from \"@whop/embedded-components-vanilla-js/types\";\nimport React, { useEffect, useLayoutEffect, useMemo, useRef } from \"react\";\nimport { useElementSnapshot } from \"./use-element-snapshot\";\n\n/**\n * Base element type that all created elements conform to.\n * Using WhopElement<any, any, any> gives us access to common methods\n * (mount, unmount, on, off, updateOptions) without union type issues.\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype BaseElement = WhopElement<any, any, any>;\n\n/**\n * The minimal session surface the wrapper needs — the registry-typed\n * createElement every session exposes.\n */\ninterface SessionLike<Registry extends Record<string, [unknown, unknown]>> {\n\tcreateElement<T extends keyof Registry>(\n\t\ttype: T | { type: T },\n\t\toptions: Registry[T][0],\n\t): unknown;\n}\n\ninterface WithFallbackPropsBase {\n\tclassName?: string;\n\tstyle?: React.CSSProperties;\n\tonReady?: () => void;\n\tfallback?: React.ReactNode;\n}\n\nexport interface WithFallbackPropsRequired<\n\tTOptions,\n> extends WithFallbackPropsBase {\n\toptions: TOptions;\n}\n\nexport interface WithFallbackPropsOptional<\n\tTOptions,\n> extends WithFallbackPropsBase {\n\toptions?: TOptions;\n}\n\ntype WithFallbackComponent<TOptions, TRequired extends boolean> = {\n\t(\n\t\tprops: TRequired extends true\n\t\t\t? WithFallbackPropsRequired<TOptions>\n\t\t\t: WithFallbackPropsOptional<TOptions>,\n\t): React.ReactNode;\n\tdisplayName: string;\n\ttype: string;\n};\n\n/**\n * Builds a namespace-specific `withFallback` from that namespace's session\n * hook. The returned helper creates a React component that wraps an embedded\n * element with fallback support.\n *\n * @example\n * ```tsx\n * // src/wallet/with-fallback.tsx\n * export const withFallback = createWithFallback<WalletSessionElements>(useWalletSession);\n *\n * // src/wallet/elements/deposit.tsx — options type inferred from the element type\n * export const DepositElement = withFallback({\n *   displayName: \"DepositElement\",\n *   type: \"deposit-element\",\n * } as const);\n * ```\n */\nexport function createWithFallback<\n\tRegistry extends Record<string, [unknown, unknown]>,\n>(useSession: () => SessionLike<Registry> | null) {\n\treturn function withFallback<\n\t\tconst T extends keyof Registry & string,\n\t\tTRequired extends boolean = false,\n\t>(Component: {\n\t\tdisplayName: string;\n\t\ttype: T;\n\t}): WithFallbackComponent<Registry[T][0], TRequired> {\n\t\ttype TOptions = Registry[T][0];\n\n\t\tfunction WrappedElement({\n\t\t\toptions,\n\t\t\tclassName,\n\t\t\tstyle,\n\t\t\tonReady,\n\t\t\tfallback,\n\t\t}: WithFallbackPropsOptional<TOptions>) {\n\t\t\tconst session = useSession();\n\t\t\tconst ref = useRef<HTMLDivElement>(null);\n\n\t\t\tconst element = useMemo((): BaseElement | null => {\n\t\t\t\tif (!session) return null;\n\t\t\t\t// Safe: T is constrained to valid element types, and options matches T\n\t\t\t\treturn session.createElement(\n\t\t\t\t\tComponent,\n\t\t\t\t\toptions ?? ({} as TOptions),\n\t\t\t\t) as BaseElement;\n\t\t\t\t// eslint-disable-next-line react-hooks/exhaustive-deps -- element is created once per session; options updates flow through updateOptions below\n\t\t\t}, [session]);\n\n\t\t\tconst elementSnapshot = useElementSnapshot(element);\n\n\t\t\tconst isReady = elementSnapshot?.state === \"ready\";\n\n\t\t\tuseEffect(() => {\n\t\t\t\tif (!element) return;\n\t\t\t\telement.updateOptions(options ?? {});\n\t\t\t}, [options, element]);\n\n\t\t\tuseEffect(() => {\n\t\t\t\tif (!element || !onReady) return;\n\t\t\t\telement.on(\"ready\", onReady);\n\t\t\t\treturn () => {\n\t\t\t\t\telement.off(\"ready\", onReady);\n\t\t\t\t};\n\t\t\t}, [element, onReady]);\n\n\t\t\tuseLayoutEffect(() => {\n\t\t\t\tif (!element || !ref.current) return;\n\t\t\t\telement.mount(ref.current);\n\t\t\t\treturn () => {\n\t\t\t\t\telement.unmount();\n\t\t\t\t};\n\t\t\t\t// eslint-disable-next-line react-hooks/exhaustive-deps -- ref.current intentionally re-runs the mount when the container attaches\n\t\t\t}, [element, ref.current]);\n\n\t\t\treturn (\n\t\t\t\t<>\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{ ...style, visibility: isReady ? undefined : \"hidden\" }}\n\t\t\t\t\t\tclassName={className}\n\t\t\t\t\t\tref={ref}\n\t\t\t\t\t/>\n\t\t\t\t\t{!isReady && (fallback ?? null)}\n\t\t\t\t</>\n\t\t\t);\n\t\t}\n\n\t\tWrappedElement.displayName = Component.displayName;\n\t\tWrappedElement.type = Component.type;\n\n\t\treturn WrappedElement as WithFallbackComponent<TOptions, TRequired>;\n\t};\n}\n"],"mappings":";;AAGA,OAAO,SAAS,WAAW,iBAAiB,SAAS,cAAc;AACnE,SAAS,0BAA0B;AAmE5B,SAAS,mBAEd,YAAgD;AACjD,SAAO,SAAS,aAGd,WAGmD;AAGpD,aAAS,eAAe;AAAA,MACvB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACD,GAAwC;AACvC,YAAM,UAAU,WAAW;AAC3B,YAAM,MAAM,OAAuB,IAAI;AAEvC,YAAM,UAAU,QAAQ,MAA0B;AACjD,YAAI,CAAC,QAAS,QAAO;AAErB,eAAO,QAAQ;AAAA,UACd;AAAA,UACA,WAAY,CAAC;AAAA,QACd;AAAA,MAED,GAAG,CAAC,OAAO,CAAC;AAEZ,YAAM,kBAAkB,mBAAmB,OAAO;AAElD,YAAM,UAAU,iBAAiB,UAAU;AAE3C,gBAAU,MAAM;AACf,YAAI,CAAC,QAAS;AACd,gBAAQ,cAAc,WAAW,CAAC,CAAC;AAAA,MACpC,GAAG,CAAC,SAAS,OAAO,CAAC;AAErB,gBAAU,MAAM;AACf,YAAI,CAAC,WAAW,CAAC,QAAS;AAC1B,gBAAQ,GAAG,SAAS,OAAO;AAC3B,eAAO,MAAM;AACZ,kBAAQ,IAAI,SAAS,OAAO;AAAA,QAC7B;AAAA,MACD,GAAG,CAAC,SAAS,OAAO,CAAC;AAErB,sBAAgB,MAAM;AACrB,YAAI,CAAC,WAAW,CAAC,IAAI,QAAS;AAC9B,gBAAQ,MAAM,IAAI,OAAO;AACzB,eAAO,MAAM;AACZ,kBAAQ,QAAQ;AAAA,QACjB;AAAA,MAED,GAAG,CAAC,SAAS,IAAI,OAAO,CAAC;AAEzB,aACC,0DACC;AAAA,QAAC;AAAA;AAAA,UACA,OAAO,EAAE,GAAG,OAAO,YAAY,UAAU,SAAY,SAAS;AAAA,UAC9D;AAAA,UACA;AAAA;AAAA,MACD,GACC,CAAC,YAAY,YAAY,KAC3B;AAAA,IAEF;AAEA,mBAAe,cAAc,UAAU;AACvC,mBAAe,OAAO,UAAU;AAEhC,WAAO;AAAA,EACR;AACD;","names":[]}

package/dist/payouts/elements/add-payout-method.d.ts

@@ -1,4 +1,4 @@
-import { WithFallbackPropsOptional } from '../with-fallback.js';
+import { WithFallbackPropsOptional } from '../../lib/create-with-fallback.js';
 import * as _whop_embedded_components_vanilla_js_types from '@whop/embedded-components-vanilla-js/types';
 import 'react';
 

package/dist/payouts/elements/automatic-withdraw.d.ts

@@ -1,4 +1,4 @@
-import { WithFallbackPropsOptional } from '../with-fallback.js';
+import { WithFallbackPropsOptional } from '../../lib/create-with-fallback.js';
 import * as _whop_embedded_components_vanilla_js_types from '@whop/embedded-components-vanilla-js/types';
 import 'react';
 

package/dist/payouts/elements/available-cash-breakdown.d.ts

@@ -1,4 +1,4 @@
-import { WithFallbackPropsOptional } from '../with-fallback.js';
+import { WithFallbackPropsOptional } from '../../lib/create-with-fallback.js';
 import * as _whop_embedded_components_vanilla_js_types from '@whop/embedded-components-vanilla-js/types';
 import 'react';
 

package/dist/payouts/elements/balance.d.ts

@@ -1,4 +1,4 @@
-import { WithFallbackPropsOptional } from '../with-fallback.js';
+import { WithFallbackPropsOptional } from '../../lib/create-with-fallback.js';
 import * as _whop_embedded_components_vanilla_js_types from '@whop/embedded-components-vanilla-js/types';
 import 'react';
 

package/dist/payouts/elements/balances.d.ts

@@ -1,4 +1,4 @@
-import { WithFallbackPropsOptional } from '../with-fallback.js';
+import { WithFallbackPropsOptional } from '../../lib/create-with-fallback.js';
 import * as _whop_embedded_components_vanilla_js_types from '@whop/embedded-components-vanilla-js/types';
 import 'react';
 

package/dist/payouts/elements/change-account-country.d.ts

@@ -1,4 +1,4 @@
-import { WithFallbackPropsOptional } from '../with-fallback.js';
+import { WithFallbackPropsOptional } from '../../lib/create-with-fallback.js';
 import * as _whop_embedded_components_vanilla_js_types from '@whop/embedded-components-vanilla-js/types';
 import 'react';
 

package/dist/payouts/elements/generate-withdrawal-receipt.d.ts

@@ -1,4 +1,4 @@
-import { WithFallbackPropsRequired } from '../with-fallback.js';
+import { WithFallbackPropsRequired } from '../../lib/create-with-fallback.js';
 import * as _whop_embedded_components_vanilla_js_types from '@whop/embedded-components-vanilla-js/types';
 import 'react';
 

package/dist/payouts/elements/index.d.ts

@@ -15,6 +15,6 @@ export { WithdrawElement } from './withdraw.js';
 export { WithdrawButtonElement } from './withdraw-button.js';
 export { WithdrawalBreakdownElement } from './withdrawal-breakdown.js';
 export { WithdrawalsElement } from './withdrawals.js';
-import '../with-fallback.js';
-import '@whop/embedded-components-vanilla-js/types';
+import '../../lib/create-with-fallback.js';
 import 'react';
+import '@whop/embedded-components-vanilla-js/types';

package/dist/payouts/elements/pending-breakdown.d.ts

@@ -1,4 +1,4 @@
-import { WithFallbackPropsOptional } from '../with-fallback.js';
+import { WithFallbackPropsOptional } from '../../lib/create-with-fallback.js';
 import * as _whop_embedded_components_vanilla_js_types from '@whop/embedded-components-vanilla-js/types';
 import 'react';
 

package/dist/payouts/elements/reserve-breakdown.d.ts

@@ -1,4 +1,4 @@
-import { WithFallbackPropsOptional } from '../with-fallback.js';
+import { WithFallbackPropsOptional } from '../../lib/create-with-fallback.js';
 import * as _whop_embedded_components_vanilla_js_types from '@whop/embedded-components-vanilla-js/types';
 import 'react';
 

package/dist/payouts/elements/reset-account.d.ts

@@ -1,4 +1,4 @@
-import { WithFallbackPropsOptional } from '../with-fallback.js';
+import { WithFallbackPropsOptional } from '../../lib/create-with-fallback.js';
 import * as _whop_embedded_components_vanilla_js_types from '@whop/embedded-components-vanilla-js/types';
 import 'react';
 

package/dist/payouts/elements/treasury-breakdown.d.ts

@@ -1,4 +1,4 @@
-import { WithFallbackPropsOptional } from '../with-fallback.js';
+import { WithFallbackPropsOptional } from '../../lib/create-with-fallback.js';
 import * as _whop_embedded_components_vanilla_js_types from '@whop/embedded-components-vanilla-js/types';
 import 'react';
 

package/dist/payouts/elements/verify.d.ts

@@ -1,4 +1,4 @@
-import { WithFallbackPropsOptional } from '../with-fallback.js';
+import { WithFallbackPropsOptional } from '../../lib/create-with-fallback.js';
 import * as _whop_embedded_components_vanilla_js_types from '@whop/embedded-components-vanilla-js/types';
 import 'react';
 

package/dist/payouts/elements/withdraw-button.d.ts

@@ -1,4 +1,4 @@
-import { WithFallbackPropsOptional } from '../with-fallback.js';
+import { WithFallbackPropsOptional } from '../../lib/create-with-fallback.js';
 import * as _whop_embedded_components_vanilla_js_types from '@whop/embedded-components-vanilla-js/types';
 import 'react';
 

package/dist/payouts/elements/withdraw.d.ts

@@ -1,4 +1,4 @@
-import { WithFallbackPropsOptional } from '../with-fallback.js';
+import { WithFallbackPropsOptional } from '../../lib/create-with-fallback.js';
 import * as _whop_embedded_components_vanilla_js_types from '@whop/embedded-components-vanilla-js/types';
 import 'react';
 

package/dist/payouts/elements/withdrawal-breakdown.d.ts

@@ -1,4 +1,4 @@
-import { WithFallbackPropsRequired } from '../with-fallback.js';
+import { WithFallbackPropsRequired } from '../../lib/create-with-fallback.js';
 import * as _whop_embedded_components_vanilla_js_types from '@whop/embedded-components-vanilla-js/types';
 import 'react';
 

package/dist/payouts/elements/withdrawals.d.ts

@@ -1,4 +1,4 @@
-import { WithFallbackPropsOptional } from '../with-fallback.js';
+import { WithFallbackPropsOptional } from '../../lib/create-with-fallback.js';
 import * as _whop_embedded_components_vanilla_js_types from '@whop/embedded-components-vanilla-js/types';
 import 'react';
 

package/dist/payouts/index.d.ts

@@ -18,4 +18,4 @@ export { WithdrawalBreakdownElement } from './elements/withdrawal-breakdown.js';
 export { WithdrawalsElement } from './elements/withdrawals.js';
 import '@whop/embedded-components-vanilla-js/types';
 import 'react';
-import './with-fallback.js';
+import '../lib/create-with-fallback.js';

package/dist/payouts/with-fallback.d.ts

@@ -1,55 +1,14 @@
+import { WithFallbackPropsRequired, WithFallbackPropsOptional } from '../lib/create-with-fallback.js';
 import { PayoutsSessionElements } from '@whop/embedded-components-vanilla-js/types';
-import React__default from 'react';
+import 'react';
 
-/**
- * Valid element type strings that can be passed to createElement.
- */
-type ElementType = keyof PayoutsSessionElements;
-/**
- * Extract the options type for a given element type using indexed access.
- * PayoutsSessionElements maps element types to [Options, Element] tuples.
- */
-type ElementOptionsFor<T extends ElementType> = PayoutsSessionElements[T][0];
-/**
- * Component definition with a constrained element type.
- * The type must be a valid element type from the SDK.
- */
-interface ElementComponentDefinition<T extends ElementType = ElementType> {
+declare const withFallback: <const T extends "add-payout-method-element" | "available-cash-breakdown-element" | "balance-element" | "withdraw-button-element" | "withdraw-element" | "automatic-withdraw-element" | "verify-element" | "withdrawals-element" | "withdrawal-breakdown-element" | "change-account-country-element" | "reset-account-element" | "generate-withdrawal-receipt-element" | "status-banner-element" | "balances-element" | "pending-breakdown-element" | "reserve-breakdown-element" | "treasury-breakdown-element", TRequired extends boolean = false>(Component: {
     displayName: string;
     type: T;
-}
-interface WithFallbackPropsBase {
-    className?: string;
-    style?: React__default.CSSProperties;
-    onReady?: () => void;
-    fallback?: React__default.ReactNode;
-}
-interface WithFallbackPropsRequired<TOptions> extends WithFallbackPropsBase {
-    options: TOptions;
-}
-interface WithFallbackPropsOptional<TOptions> extends WithFallbackPropsBase {
-    options?: TOptions;
-}
-type WithFallbackComponent<TOptions, TRequired extends boolean> = {
-    (props: TRequired extends true ? WithFallbackPropsRequired<TOptions> : WithFallbackPropsOptional<TOptions>): React__default.ReactNode;
+}) => {
+    (props: TRequired extends true ? WithFallbackPropsRequired<PayoutsSessionElements[T][0]> : WithFallbackPropsOptional<PayoutsSessionElements[T][0]>): React.ReactNode;
     displayName: string;
     type: string;
 };
-/**
- * Creates a React component that wraps an embedded element with fallback support.
- *
- * @example
- * ```tsx
- * // Type-safe: options type is inferred from the element type
- * export const BalanceElement = withFallback({
- *   displayName: "BalanceElement",
- *   type: "balance-element",
- * } as const);
- *
- * // Usage - TypeScript knows the correct options type
- * <BalanceElement options={{ hidePendingBalance: true }} />
- * ```
- */
-declare function withFallback<const T extends ElementType, TRequired extends boolean = false>(Component: ElementComponentDefinition<T>): WithFallbackComponent<ElementOptionsFor<T>, TRequired>;
 
-export { type WithFallbackPropsOptional, type WithFallbackPropsRequired, withFallback };
+export { WithFallbackPropsOptional, WithFallbackPropsRequired, withFallback };

package/dist/payouts/with-fallback.js

@@ -1,10 +1,8 @@
 "use strict";
 "use client";
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -18,68 +16,13 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var with_fallback_exports = {};
 __export(with_fallback_exports, {
   withFallback: () => withFallback
 });
 module.exports = __toCommonJS(with_fallback_exports);
-var import_react = __toESM(require("react"));
-var import_use_element_snapshot = require("../lib/use-element-snapshot");
+var import_create_with_fallback = require("../lib/create-with-fallback");
 var import_session = require("./session");
-function withFallback(Component) {
-  function WrappedElement({
-    options,
-    className,
-    style,
-    onReady,
-    fallback
-  }) {
-    const payoutsSession = (0, import_session.usePayoutsSession)();
-    const ref = (0, import_react.useRef)(null);
-    const element = (0, import_react.useMemo)(() => {
-      if (!payoutsSession) return null;
-      return payoutsSession.createElement(Component, options ?? {});
-    }, [payoutsSession]);
-    const elementSnapshot = (0, import_use_element_snapshot.useElementSnapshot)(element);
-    const isReady = elementSnapshot?.state === "ready";
-    (0, import_react.useEffect)(() => {
-      if (!element) return;
-      element.updateOptions(options ?? {});
-    }, [options, element]);
-    (0, import_react.useEffect)(() => {
-      if (!element || !onReady) return;
-      element.on("ready", onReady);
-      return () => {
-        element.off("ready", onReady);
-      };
-    }, [element, onReady]);
-    (0, import_react.useLayoutEffect)(() => {
-      if (!element || !ref.current) return;
-      element.mount(ref.current);
-      return () => {
-        element.unmount();
-      };
-    }, [element, ref.current]);
-    return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
-      "div",
-      {
-        style: { ...style, visibility: isReady ? void 0 : "hidden" },
-        className,
-        ref
-      }
-    ), !isReady && (fallback ?? null));
-  }
-  WrappedElement.displayName = Component.displayName;
-  WrappedElement.type = Component.type;
-  return WrappedElement;
-}
+const withFallback = (0, import_create_with_fallback.createWithFallback)(import_session.usePayoutsSession);
 //# sourceMappingURL=with-fallback.js.map

package/dist/payouts/with-fallback.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/payouts/with-fallback.tsx"],"sourcesContent":["\"use client\";\n\nimport type {\n\tPayoutsSessionElements,\n\tWhopElement,\n} from \"@whop/embedded-components-vanilla-js/types\";\nimport React, { useEffect, useLayoutEffect, useMemo, useRef } from \"react\";\nimport { useElementSnapshot } from \"../lib/use-element-snapshot\";\nimport { usePayoutsSession } from \"./session\";\n\n/**\n * Valid element type strings that can be passed to createElement.\n */\ntype ElementType = keyof PayoutsSessionElements;\n\n/**\n * Extract the options type for a given element type using indexed access.\n * PayoutsSessionElements maps element types to [Options, Element] tuples.\n */\ntype ElementOptionsFor<T extends ElementType> = PayoutsSessionElements[T][0];\n\n/**\n * Base element type that all created elements conform to.\n * Using WhopElement<any, any, any> gives us access to common methods\n * (mount, unmount, on, off, updateOptions) without union type issues.\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype BaseElement = WhopElement<any, any, any>;\n\n/**\n * Component definition with a constrained element type.\n * The type must be a valid element type from the SDK.\n */\ninterface ElementComponentDefinition<T extends ElementType = ElementType> {\n\tdisplayName: string;\n\ttype: T;\n}\n\ninterface WithFallbackPropsBase {\n\tclassName?: string;\n\tstyle?: React.CSSProperties;\n\tonReady?: () => void;\n\tfallback?: React.ReactNode;\n}\n\nexport interface WithFallbackPropsRequired<\n\tTOptions,\n> extends WithFallbackPropsBase {\n\toptions: TOptions;\n}\n\nexport interface WithFallbackPropsOptional<\n\tTOptions,\n> extends WithFallbackPropsBase {\n\toptions?: TOptions;\n}\n\ntype WithFallbackComponent<TOptions, TRequired extends boolean> = {\n\t(\n\t\tprops: TRequired extends true\n\t\t\t? WithFallbackPropsRequired<TOptions>\n\t\t\t: WithFallbackPropsOptional<TOptions>,\n\t): React.ReactNode;\n\tdisplayName: string;\n\ttype: string;\n};\n\n/**\n * Creates a React component that wraps an embedded element with fallback support.\n *\n * @example\n * ```tsx\n * // Type-safe: options type is inferred from the element type\n * export const BalanceElement = withFallback({\n *   displayName: \"BalanceElement\",\n *   type: \"balance-element\",\n * } as const);\n *\n * // Usage - TypeScript knows the correct options type\n * <BalanceElement options={{ hidePendingBalance: true }} />\n * ```\n */\nexport function withFallback<\n\tconst T extends ElementType,\n\tTRequired extends boolean = false,\n>(\n\tComponent: ElementComponentDefinition<T>,\n): WithFallbackComponent<ElementOptionsFor<T>, TRequired> {\n\ttype TOptions = ElementOptionsFor<T>;\n\n\tfunction WrappedElement({\n\t\toptions,\n\t\tclassName,\n\t\tstyle,\n\t\tonReady,\n\t\tfallback,\n\t}: WithFallbackPropsOptional<TOptions>) {\n\t\tconst payoutsSession = usePayoutsSession();\n\t\tconst ref = useRef<HTMLDivElement>(null);\n\n\t\tconst element = useMemo((): BaseElement | null => {\n\t\t\tif (!payoutsSession) return null;\n\t\t\t// Safe: T is constrained to valid element types, and options matches T\n\t\t\treturn payoutsSession.createElement(Component, options ?? {});\n\t\t}, [payoutsSession]);\n\n\t\tconst elementSnapshot = useElementSnapshot(element);\n\n\t\tconst isReady = elementSnapshot?.state === \"ready\";\n\n\t\tuseEffect(() => {\n\t\t\tif (!element) return;\n\t\t\telement.updateOptions(options ?? {});\n\t\t}, [options, element]);\n\n\t\tuseEffect(() => {\n\t\t\tif (!element || !onReady) return;\n\t\t\telement.on(\"ready\", onReady);\n\t\t\treturn () => {\n\t\t\t\telement.off(\"ready\", onReady);\n\t\t\t};\n\t\t}, [element, onReady]);\n\n\t\tuseLayoutEffect(() => {\n\t\t\tif (!element || !ref.current) return;\n\t\t\telement.mount(ref.current);\n\t\t\treturn () => {\n\t\t\t\telement.unmount();\n\t\t\t};\n\t\t}, [element, ref.current]);\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<div\n\t\t\t\t\tstyle={{ ...style, visibility: isReady ? undefined : \"hidden\" }}\n\t\t\t\t\tclassName={className}\n\t\t\t\t\tref={ref}\n\t\t\t\t/>\n\t\t\t\t{!isReady && (fallback ?? null)}\n\t\t\t</>\n\t\t);\n\t}\n\n\tWrappedElement.displayName = Component.displayName;\n\tWrappedElement.type = Component.type;\n\n\treturn WrappedElement as WithFallbackComponent<TOptions, TRequired>;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAMA,mBAAmE;AACnE,kCAAmC;AACnC,qBAAkC;AA0E3B,SAAS,aAIf,WACyD;AAGzD,WAAS,eAAe;AAAA,IACvB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,GAAwC;AACvC,UAAM,qBAAiB,kCAAkB;AACzC,UAAM,UAAM,qBAAuB,IAAI;AAEvC,UAAM,cAAU,sBAAQ,MAA0B;AACjD,UAAI,CAAC,eAAgB,QAAO;AAE5B,aAAO,eAAe,cAAc,WAAW,WAAW,CAAC,CAAC;AAAA,IAC7D,GAAG,CAAC,cAAc,CAAC;AAEnB,UAAM,sBAAkB,gDAAmB,OAAO;AAElD,UAAM,UAAU,iBAAiB,UAAU;AAE3C,gCAAU,MAAM;AACf,UAAI,CAAC,QAAS;AACd,cAAQ,cAAc,WAAW,CAAC,CAAC;AAAA,IACpC,GAAG,CAAC,SAAS,OAAO,CAAC;AAErB,gCAAU,MAAM;AACf,UAAI,CAAC,WAAW,CAAC,QAAS;AAC1B,cAAQ,GAAG,SAAS,OAAO;AAC3B,aAAO,MAAM;AACZ,gBAAQ,IAAI,SAAS,OAAO;AAAA,MAC7B;AAAA,IACD,GAAG,CAAC,SAAS,OAAO,CAAC;AAErB,sCAAgB,MAAM;AACrB,UAAI,CAAC,WAAW,CAAC,IAAI,QAAS;AAC9B,cAAQ,MAAM,IAAI,OAAO;AACzB,aAAO,MAAM;AACZ,gBAAQ,QAAQ;AAAA,MACjB;AAAA,IACD,GAAG,CAAC,SAAS,IAAI,OAAO,CAAC;AAEzB,WACC,6BAAAA,QAAA,2BAAAA,QAAA,gBACC,6BAAAA,QAAA;AAAA,MAAC;AAAA;AAAA,QACA,OAAO,EAAE,GAAG,OAAO,YAAY,UAAU,SAAY,SAAS;AAAA,QAC9D;AAAA,QACA;AAAA;AAAA,IACD,GACC,CAAC,YAAY,YAAY,KAC3B;AAAA,EAEF;AAEA,iBAAe,cAAc,UAAU;AACvC,iBAAe,OAAO,UAAU;AAEhC,SAAO;AACR;","names":["React"]}
+{"version":3,"sources":["../../src/payouts/with-fallback.tsx"],"sourcesContent":["\"use client\";\n\nimport type { PayoutsSessionElements } from \"@whop/embedded-components-vanilla-js/types\";\n\nimport { createWithFallback } from \"../lib/create-with-fallback\";\nimport { usePayoutsSession } from \"./session\";\n\nexport type {\n\tWithFallbackPropsOptional,\n\tWithFallbackPropsRequired,\n} from \"../lib/create-with-fallback\";\n\nexport const withFallback =\n\tcreateWithFallback<PayoutsSessionElements>(usePayoutsSession);\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA,kCAAmC;AACnC,qBAAkC;AAO3B,MAAM,mBACZ,gDAA2C,gCAAiB;","names":[]}

package/dist/payouts/with-fallback.mjs

@@ -1,58 +1,6 @@
 "use client";
 import "../chunk-NSSMTXJJ.mjs";
-import React, { useEffect, useLayoutEffect, useMemo, useRef } from "react";
-import { useElementSnapshot } from "../lib/use-element-snapshot.mjs";
+import { createWithFallback } from "../lib/create-with-fallback.mjs";
 import { usePayoutsSession } from "./session.mjs";
-function withFallback(Component) {
-    function WrappedElement({ options, className, style, onReady, fallback }) {
-        const payoutsSession = usePayoutsSession();
-        const ref = useRef(null);
-        const element = useMemo(()=>{
-            if (!payoutsSession) return null;
-            return payoutsSession.createElement(Component, options ?? {});
-        }, [
-            payoutsSession
-        ]);
-        const elementSnapshot = useElementSnapshot(element);
-        const isReady = elementSnapshot?.state === "ready";
-        useEffect(()=>{
-            if (!element) return;
-            element.updateOptions(options ?? {});
-        }, [
-            options,
-            element
-        ]);
-        useEffect(()=>{
-            if (!element || !onReady) return;
-            element.on("ready", onReady);
-            return ()=>{
-                element.off("ready", onReady);
-            };
-        }, [
-            element,
-            onReady
-        ]);
-        useLayoutEffect(()=>{
-            if (!element || !ref.current) return;
-            element.mount(ref.current);
-            return ()=>{
-                element.unmount();
-            };
-        }, [
-            element,
-            ref.current
-        ]);
-        return React.createElement(React.Fragment, null, React.createElement("div", {
-            style: {
-                ...style,
-                visibility: isReady ? void 0 : "hidden"
-            },
-            className,
-            ref
-        }), !isReady && (fallback ?? null));
-    }
-    WrappedElement.displayName = Component.displayName;
-    WrappedElement.type = Component.type;
-    return WrappedElement;
-}
+const withFallback = createWithFallback(usePayoutsSession);
 export { withFallback };

package/dist/payouts/with-fallback.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/payouts/with-fallback.tsx"],"sourcesContent":["\"use client\";\n\nimport type {\n\tPayoutsSessionElements,\n\tWhopElement,\n} from \"@whop/embedded-components-vanilla-js/types\";\nimport React, { useEffect, useLayoutEffect, useMemo, useRef } from \"react\";\nimport { useElementSnapshot } from \"../lib/use-element-snapshot\";\nimport { usePayoutsSession } from \"./session\";\n\n/**\n * Valid element type strings that can be passed to createElement.\n */\ntype ElementType = keyof PayoutsSessionElements;\n\n/**\n * Extract the options type for a given element type using indexed access.\n * PayoutsSessionElements maps element types to [Options, Element] tuples.\n */\ntype ElementOptionsFor<T extends ElementType> = PayoutsSessionElements[T][0];\n\n/**\n * Base element type that all created elements conform to.\n * Using WhopElement<any, any, any> gives us access to common methods\n * (mount, unmount, on, off, updateOptions) without union type issues.\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype BaseElement = WhopElement<any, any, any>;\n\n/**\n * Component definition with a constrained element type.\n * The type must be a valid element type from the SDK.\n */\ninterface ElementComponentDefinition<T extends ElementType = ElementType> {\n\tdisplayName: string;\n\ttype: T;\n}\n\ninterface WithFallbackPropsBase {\n\tclassName?: string;\n\tstyle?: React.CSSProperties;\n\tonReady?: () => void;\n\tfallback?: React.ReactNode;\n}\n\nexport interface WithFallbackPropsRequired<\n\tTOptions,\n> extends WithFallbackPropsBase {\n\toptions: TOptions;\n}\n\nexport interface WithFallbackPropsOptional<\n\tTOptions,\n> extends WithFallbackPropsBase {\n\toptions?: TOptions;\n}\n\ntype WithFallbackComponent<TOptions, TRequired extends boolean> = {\n\t(\n\t\tprops: TRequired extends true\n\t\t\t? WithFallbackPropsRequired<TOptions>\n\t\t\t: WithFallbackPropsOptional<TOptions>,\n\t): React.ReactNode;\n\tdisplayName: string;\n\ttype: string;\n};\n\n/**\n * Creates a React component that wraps an embedded element with fallback support.\n *\n * @example\n * ```tsx\n * // Type-safe: options type is inferred from the element type\n * export const BalanceElement = withFallback({\n *   displayName: \"BalanceElement\",\n *   type: \"balance-element\",\n * } as const);\n *\n * // Usage - TypeScript knows the correct options type\n * <BalanceElement options={{ hidePendingBalance: true }} />\n * ```\n */\nexport function withFallback<\n\tconst T extends ElementType,\n\tTRequired extends boolean = false,\n>(\n\tComponent: ElementComponentDefinition<T>,\n): WithFallbackComponent<ElementOptionsFor<T>, TRequired> {\n\ttype TOptions = ElementOptionsFor<T>;\n\n\tfunction WrappedElement({\n\t\toptions,\n\t\tclassName,\n\t\tstyle,\n\t\tonReady,\n\t\tfallback,\n\t}: WithFallbackPropsOptional<TOptions>) {\n\t\tconst payoutsSession = usePayoutsSession();\n\t\tconst ref = useRef<HTMLDivElement>(null);\n\n\t\tconst element = useMemo((): BaseElement | null => {\n\t\t\tif (!payoutsSession) return null;\n\t\t\t// Safe: T is constrained to valid element types, and options matches T\n\t\t\treturn payoutsSession.createElement(Component, options ?? {});\n\t\t}, [payoutsSession]);\n\n\t\tconst elementSnapshot = useElementSnapshot(element);\n\n\t\tconst isReady = elementSnapshot?.state === \"ready\";\n\n\t\tuseEffect(() => {\n\t\t\tif (!element) return;\n\t\t\telement.updateOptions(options ?? {});\n\t\t}, [options, element]);\n\n\t\tuseEffect(() => {\n\t\t\tif (!element || !onReady) return;\n\t\t\telement.on(\"ready\", onReady);\n\t\t\treturn () => {\n\t\t\t\telement.off(\"ready\", onReady);\n\t\t\t};\n\t\t}, [element, onReady]);\n\n\t\tuseLayoutEffect(() => {\n\t\t\tif (!element || !ref.current) return;\n\t\t\telement.mount(ref.current);\n\t\t\treturn () => {\n\t\t\t\telement.unmount();\n\t\t\t};\n\t\t}, [element, ref.current]);\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<div\n\t\t\t\t\tstyle={{ ...style, visibility: isReady ? undefined : \"hidden\" }}\n\t\t\t\t\tclassName={className}\n\t\t\t\t\tref={ref}\n\t\t\t\t/>\n\t\t\t\t{!isReady && (fallback ?? null)}\n\t\t\t</>\n\t\t);\n\t}\n\n\tWrappedElement.displayName = Component.displayName;\n\tWrappedElement.type = Component.type;\n\n\treturn WrappedElement as WithFallbackComponent<TOptions, TRequired>;\n}\n"],"mappings":";;AAMA,OAAO,SAAS,WAAW,iBAAiB,SAAS,cAAc;AACnE,SAAS,0BAA0B;AACnC,SAAS,yBAAyB;AA0E3B,SAAS,aAIf,WACyD;AAGzD,WAAS,eAAe;AAAA,IACvB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,GAAwC;AACvC,UAAM,iBAAiB,kBAAkB;AACzC,UAAM,MAAM,OAAuB,IAAI;AAEvC,UAAM,UAAU,QAAQ,MAA0B;AACjD,UAAI,CAAC,eAAgB,QAAO;AAE5B,aAAO,eAAe,cAAc,WAAW,WAAW,CAAC,CAAC;AAAA,IAC7D,GAAG,CAAC,cAAc,CAAC;AAEnB,UAAM,kBAAkB,mBAAmB,OAAO;AAElD,UAAM,UAAU,iBAAiB,UAAU;AAE3C,cAAU,MAAM;AACf,UAAI,CAAC,QAAS;AACd,cAAQ,cAAc,WAAW,CAAC,CAAC;AAAA,IACpC,GAAG,CAAC,SAAS,OAAO,CAAC;AAErB,cAAU,MAAM;AACf,UAAI,CAAC,WAAW,CAAC,QAAS;AAC1B,cAAQ,GAAG,SAAS,OAAO;AAC3B,aAAO,MAAM;AACZ,gBAAQ,IAAI,SAAS,OAAO;AAAA,MAC7B;AAAA,IACD,GAAG,CAAC,SAAS,OAAO,CAAC;AAErB,oBAAgB,MAAM;AACrB,UAAI,CAAC,WAAW,CAAC,IAAI,QAAS;AAC9B,cAAQ,MAAM,IAAI,OAAO;AACzB,aAAO,MAAM;AACZ,gBAAQ,QAAQ;AAAA,MACjB;AAAA,IACD,GAAG,CAAC,SAAS,IAAI,OAAO,CAAC;AAEzB,WACC,0DACC;AAAA,MAAC;AAAA;AAAA,QACA,OAAO,EAAE,GAAG,OAAO,YAAY,UAAU,SAAY,SAAS;AAAA,QAC9D;AAAA,QACA;AAAA;AAAA,IACD,GACC,CAAC,YAAY,YAAY,KAC3B;AAAA,EAEF;AAEA,iBAAe,cAAc,UAAU;AACvC,iBAAe,OAAO,UAAU;AAEhC,SAAO;AACR;","names":[]}
+{"version":3,"sources":["../../src/payouts/with-fallback.tsx"],"sourcesContent":["\"use client\";\n\nimport type { PayoutsSessionElements } from \"@whop/embedded-components-vanilla-js/types\";\n\nimport { createWithFallback } from \"../lib/create-with-fallback\";\nimport { usePayoutsSession } from \"./session\";\n\nexport type {\n\tWithFallbackPropsOptional,\n\tWithFallbackPropsRequired,\n} from \"../lib/create-with-fallback\";\n\nexport const withFallback =\n\tcreateWithFallback<PayoutsSessionElements>(usePayoutsSession);\n"],"mappings":";;AAIA,SAAS,0BAA0B;AACnC,SAAS,yBAAyB;AAO3B,MAAM,eACZ,mBAA2C,iBAAiB;","names":[]}

package/dist/wallet/elements/deposit.d.ts

@@ -0,0 +1,11 @@
+import { WithFallbackPropsOptional } from '../../lib/create-with-fallback.js';
+import * as _whop_embedded_components_vanilla_js_types from '@whop/embedded-components-vanilla-js/types';
+import 'react';
+
+declare const DepositElement: {
+    (props: WithFallbackPropsOptional<_whop_embedded_components_vanilla_js_types.DepositElementOptions>): React.ReactNode;
+    displayName: string;
+    type: string;
+};
+
+export { DepositElement };

package/dist/wallet/elements/deposit.js

@@ -0,0 +1,30 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var deposit_exports = {};
+__export(deposit_exports, {
+  DepositElement: () => DepositElement
+});
+module.exports = __toCommonJS(deposit_exports);
+var import_with_fallback = require("../with-fallback");
+const DepositElement = (0, import_with_fallback.withFallback)({
+  displayName: "DepositElement",
+  type: "deposit-element"
+});
+//# sourceMappingURL=deposit.js.map

package/dist/wallet/elements/deposit.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/wallet/elements/deposit.tsx"],"sourcesContent":["\"use client\";\n\nimport { withFallback } from \"../with-fallback\";\n\nexport const DepositElement = withFallback({\n\tdisplayName: \"DepositElement\",\n\ttype: \"deposit-element\",\n} as const);\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,2BAA6B;AAEtB,MAAM,qBAAiB,mCAAa;AAAA,EAC1C,aAAa;AAAA,EACb,MAAM;AACP,CAAU;","names":[]}

package/dist/wallet/elements/deposit.mjs

@@ -0,0 +1,8 @@
+"use client";
+import "../../chunk-NSSMTXJJ.mjs";
+import { withFallback } from "../with-fallback.mjs";
+const DepositElement = withFallback({
+    displayName: "DepositElement",
+    type: "deposit-element"
+});
+export { DepositElement };

package/dist/wallet/elements/deposit.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/wallet/elements/deposit.tsx"],"sourcesContent":["\"use client\";\n\nimport { withFallback } from \"../with-fallback\";\n\nexport const DepositElement = withFallback({\n\tdisplayName: \"DepositElement\",\n\ttype: \"deposit-element\",\n} as const);\n"],"mappings":";;AAEA,SAAS,oBAAoB;AAEtB,MAAM,iBAAiB,aAAa;AAAA,EAC1C,aAAa;AAAA,EACb,MAAM;AACP,CAAU;","names":[]}

package/dist/wallet/elements/index.d.ts

@@ -0,0 +1,4 @@
+export { DepositElement } from './deposit.js';
+import '../../lib/create-with-fallback.js';
+import 'react';
+import '@whop/embedded-components-vanilla-js/types';

package/dist/wallet/elements/index.js

@@ -0,0 +1,25 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var elements_exports = {};
+__export(elements_exports, {
+  DepositElement: () => import_deposit.DepositElement
+});
+module.exports = __toCommonJS(elements_exports);
+var import_deposit = require("./deposit");
+//# sourceMappingURL=index.js.map

package/dist/wallet/elements/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/wallet/elements/index.tsx"],"sourcesContent":["export { DepositElement } from \"./deposit\";\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAA+B;","names":[]}

package/dist/wallet/elements/index.mjs

@@ -0,0 +1,3 @@
+import "../../chunk-NSSMTXJJ.mjs";
+import { DepositElement } from "./deposit.mjs";
+export { DepositElement };

package/dist/wallet/elements/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/wallet/elements/index.tsx"],"sourcesContent":["export { DepositElement } from \"./deposit\";\n"],"mappings":";AAAA,SAAS,sBAAsB;","names":[]}

package/dist/wallet/index.d.ts

@@ -1,3 +1,5 @@
+export { DepositElement } from './elements/deposit.js';
 export { WalletSession, useWalletSession } from './session.js';
-import '@whop/embedded-components-vanilla-js/types';
+import '../lib/create-with-fallback.js';
 import 'react';
+import '@whop/embedded-components-vanilla-js/types';

package/dist/wallet/index.js

@@ -15,5 +15,6 @@ var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "defau
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var wallet_exports = {};
 module.exports = __toCommonJS(wallet_exports);
+__reExport(wallet_exports, require("./elements"), module.exports);
 __reExport(wallet_exports, require("./session"), module.exports);
 //# sourceMappingURL=index.js.map

package/dist/wallet/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/wallet/index.tsx"],"sourcesContent":["export * from \"./session\";\n"],"mappings":";;;;;;;;;;;;;;;AAAA;AAAA;AAAA,2BAAc,sBAAd;","names":[]}
+{"version":3,"sources":["../../src/wallet/index.tsx"],"sourcesContent":["export * from \"./elements\";\nexport * from \"./session\";\n"],"mappings":";;;;;;;;;;;;;;;AAAA;AAAA;AAAA,2BAAc,uBAAd;AACA,2BAAc,sBADd;","names":[]}

package/dist/wallet/index.mjs

@@ -1 +1,2 @@
+export * from "./elements/index.mjs";
 export * from "./session.mjs";

package/dist/wallet/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/wallet/index.tsx"],"sourcesContent":["export * from \"./session\";\n"],"mappings":"AAAA,cAAc;","names":[]}
+{"version":3,"sources":["../../src/wallet/index.tsx"],"sourcesContent":["export * from \"./elements\";\nexport * from \"./session\";\n"],"mappings":"AAAA,cAAc;AACd,cAAc;","names":[]}

package/dist/wallet/with-fallback.d.ts

@@ -0,0 +1,14 @@
+import { WithFallbackPropsRequired, WithFallbackPropsOptional } from '../lib/create-with-fallback.js';
+import { WalletSessionElements } from '@whop/embedded-components-vanilla-js/types';
+import 'react';
+
+declare const withFallback: <const T extends "deposit-element", TRequired extends boolean = false>(Component: {
+    displayName: string;
+    type: T;
+}) => {
+    (props: TRequired extends true ? WithFallbackPropsRequired<WalletSessionElements[T][0]> : WithFallbackPropsOptional<WalletSessionElements[T][0]>): React.ReactNode;
+    displayName: string;
+    type: string;
+};
+
+export { WithFallbackPropsOptional, WithFallbackPropsRequired, withFallback };

package/dist/wallet/with-fallback.js

@@ -0,0 +1,28 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var with_fallback_exports = {};
+__export(with_fallback_exports, {
+  withFallback: () => withFallback
+});
+module.exports = __toCommonJS(with_fallback_exports);
+var import_create_with_fallback = require("../lib/create-with-fallback");
+var import_session = require("./session");
+const withFallback = (0, import_create_with_fallback.createWithFallback)(import_session.useWalletSession);
+//# sourceMappingURL=with-fallback.js.map

package/dist/wallet/with-fallback.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/wallet/with-fallback.tsx"],"sourcesContent":["\"use client\";\n\nimport type { WalletSessionElements } from \"@whop/embedded-components-vanilla-js/types\";\n\nimport { createWithFallback } from \"../lib/create-with-fallback\";\nimport { useWalletSession } from \"./session\";\n\nexport type {\n\tWithFallbackPropsOptional,\n\tWithFallbackPropsRequired,\n} from \"../lib/create-with-fallback\";\n\nexport const withFallback =\n\tcreateWithFallback<WalletSessionElements>(useWalletSession);\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA,kCAAmC;AACnC,qBAAiC;AAO1B,MAAM,mBACZ,gDAA0C,+BAAgB;","names":[]}

package/dist/wallet/with-fallback.mjs

@@ -0,0 +1,6 @@
+"use client";
+import "../chunk-NSSMTXJJ.mjs";
+import { createWithFallback } from "../lib/create-with-fallback.mjs";
+import { useWalletSession } from "./session.mjs";
+const withFallback = createWithFallback(useWalletSession);
+export { withFallback };

package/dist/wallet/with-fallback.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/wallet/with-fallback.tsx"],"sourcesContent":["\"use client\";\n\nimport type { WalletSessionElements } from \"@whop/embedded-components-vanilla-js/types\";\n\nimport { createWithFallback } from \"../lib/create-with-fallback\";\nimport { useWalletSession } from \"./session\";\n\nexport type {\n\tWithFallbackPropsOptional,\n\tWithFallbackPropsRequired,\n} from \"../lib/create-with-fallback\";\n\nexport const withFallback =\n\tcreateWithFallback<WalletSessionElements>(useWalletSession);\n"],"mappings":";;AAIA,SAAS,0BAA0B;AACnC,SAAS,wBAAwB;AAO1B,MAAM,eACZ,mBAA0C,gBAAgB;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@whop/embedded-components-react-js",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "React components for Whop.js",
   "keywords": [
     "React",
@@ -22,7 +22,7 @@
   "peerDependencies": {
     "react": ">=16.8.0 <20.0.0",
     "react-dom": ">=16.8.0 <20.0.0",
-    "@whop/embedded-components-vanilla-js": "^1.1.1"
+    "@whop/embedded-components-vanilla-js": "^1.2.0"
   },
   "typing": "dist/index.d.ts"
 }