@whop/embedded-components-react-js 1.0.0-beta.11 → 1.1.1

package/CHANGELOG.md

@@ -1,5 +1,37 @@
 # @whop/embedded-components-react-js
 
+## 1.1.1
+
+### Patch Changes
+
+- b282677: add messageDeleted event to ChatElement
+- Updated dependencies [b282677]
+  - @whop/embedded-components-vanilla-js@1.1.1
+
+## 1.1.0
+
+### Minor Changes
+
+- 76d83c4: Add i18n translation support with 10 new locales (es, zh, nl, pt, de, it, fr, ja, pl, tr)
+
+### Patch Changes
+
+- Updated dependencies [76d83c4]
+  - @whop/embedded-components-vanilla-js@1.1.0
+
+## 1.0.0
+
+### Major Changes
+
+- ea27ce0: New train: apollo
+
+### Patch Changes
+
+- 15f8c67: standardize embedded components class names for better styling capabilities
+- Updated dependencies [15f8c67]
+- Updated dependencies [ea27ce0]
+  - @whop/embedded-components-vanilla-js@1.0.0
+
 ## 1.0.0-beta.11
 
 ### Major Changes

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<TOptions>\n\textends WithFallbackPropsBase {\n\toptions: TOptions;\n}\n\nexport interface WithFallbackPropsOptional<TOptions>\n\textends 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;AAwExB,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 {\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"]}

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<TOptions>\n\textends WithFallbackPropsBase {\n\toptions: TOptions;\n}\n\nexport interface WithFallbackPropsOptional<TOptions>\n\textends 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;AAwExB,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 {\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":[]}

package/dist/index.d.ts

@@ -22,6 +22,8 @@ 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 { 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';

package/dist/index.js

@@ -19,5 +19,7 @@ __reExport(index_exports, require("./payouts"), module.exports);
 __reExport(index_exports, require("./payouts/use-session-ref"), module.exports);
 __reExport(index_exports, require("./chat"), module.exports);
 __reExport(index_exports, require("./chat/use-session-ref"), module.exports);
+__reExport(index_exports, require("./wallet"), module.exports);
+__reExport(index_exports, require("./wallet/use-session-ref"), module.exports);
 __reExport(index_exports, require("./provider"), module.exports);
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"sourcesContent":["// Payouts\nexport * from \"./payouts\";\nexport * from \"./payouts/use-session-ref\";\n\n// Chat\nexport * from \"./chat\";\nexport * from \"./chat/use-session-ref\";\n\nexport * from \"./provider\";\n"],"mappings":";;;;;;;;;;;;;;;AAAA;AAAA;AACA,0BAAc,sBADd;AAEA,0BAAc,sCAFd;AAKA,0BAAc,mBALd;AAMA,0BAAc,mCANd;AAQA,0BAAc,uBARd;","names":[]}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["// Payouts\nexport * from \"./payouts\";\nexport * from \"./payouts/use-session-ref\";\n\n// Chat\nexport * from \"./chat\";\nexport * from \"./chat/use-session-ref\";\n\n// Wallet\nexport * from \"./wallet\";\nexport * from \"./wallet/use-session-ref\";\n\nexport * from \"./provider\";\n"],"mappings":";;;;;;;;;;;;;;;AAAA;AAAA;AACA,0BAAc,sBADd;AAEA,0BAAc,sCAFd;AAKA,0BAAc,mBALd;AAMA,0BAAc,mCANd;AASA,0BAAc,qBATd;AAUA,0BAAc,qCAVd;AAYA,0BAAc,uBAZd;","names":[]}

package/dist/index.mjs

@@ -2,4 +2,6 @@ export * from "./payouts/index.mjs";
 export * from "./payouts/use-session-ref.mjs";
 export * from "./chat/index.mjs";
 export * from "./chat/use-session-ref.mjs";
+export * from "./wallet/index.mjs";
+export * from "./wallet/use-session-ref.mjs";
 export * from "./provider.mjs";

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"sourcesContent":["// Payouts\nexport * from \"./payouts\";\nexport * from \"./payouts/use-session-ref\";\n\n// Chat\nexport * from \"./chat\";\nexport * from \"./chat/use-session-ref\";\n\nexport * from \"./provider\";\n"],"mappings":"AACA,cAAc;AACd,cAAc;AAGd,cAAc;AACd,cAAc;AAEd,cAAc;","names":[]}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["// Payouts\nexport * from \"./payouts\";\nexport * from \"./payouts/use-session-ref\";\n\n// Chat\nexport * from \"./chat\";\nexport * from \"./chat/use-session-ref\";\n\n// Wallet\nexport * from \"./wallet\";\nexport * from \"./wallet/use-session-ref\";\n\nexport * from \"./provider\";\n"],"mappings":"AACA,cAAc;AACd,cAAc;AAGd,cAAc;AACd,cAAc;AAGd,cAAc;AACd,cAAc;AAEd,cAAc;","names":[]}

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<TOptions>\n\textends WithFallbackPropsBase {\n\toptions: TOptions;\n}\n\nexport interface WithFallbackPropsOptional<TOptions>\n\textends 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;AAwE3B,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 {\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"]}

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<TOptions>\n\textends WithFallbackPropsBase {\n\toptions: TOptions;\n}\n\nexport interface WithFallbackPropsOptional<TOptions>\n\textends 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;AAwE3B,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 {\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":[]}

package/dist/wallet/index.d.ts

@@ -0,0 +1,3 @@
+export { WalletSession, useWalletSession } from './session.js';
+import '@whop/embedded-components-vanilla-js/types';
+import 'react';

package/dist/wallet/index.js

@@ -0,0 +1,19 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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 __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var wallet_exports = {};
+module.exports = __toCommonJS(wallet_exports);
+__reExport(wallet_exports, require("./session"), module.exports);
+//# sourceMappingURL=index.js.map

package/dist/wallet/index.js.map

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

package/dist/wallet/index.mjs

@@ -0,0 +1 @@
+export * from "./session.mjs";

package/dist/wallet/index.mjs.map

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

package/dist/wallet/session.d.ts

@@ -0,0 +1,11 @@
+import { WalletSessionOptions, WalletSession as WalletSession$1 } from '@whop/embedded-components-vanilla-js/types';
+import React__default, { PropsWithChildren } from 'react';
+
+declare function WalletSession({ children, token, companyId, currency, ref, }: PropsWithChildren<WalletSessionOptions & {
+    ref?: React__default.RefObject<{
+        walletSession: WalletSession$1 | null;
+    } | null>;
+}>): React__default.JSX.Element;
+declare function useWalletSession(): WalletSession$1 | null;
+
+export { WalletSession, useWalletSession };

package/dist/wallet/session.js

@@ -0,0 +1,73 @@
+"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 session_exports = {};
+__export(session_exports, {
+  WalletSession: () => WalletSession,
+  useWalletSession: () => useWalletSession
+});
+module.exports = __toCommonJS(session_exports);
+var import_react = __toESM(require("react"));
+var import_provider = require("../provider");
+const WalletSessionContext = (0, import_react.createContext)(null);
+function WalletSession({
+  children,
+  token,
+  companyId,
+  currency,
+  ref
+}) {
+  const elements = (0, import_provider.useElements)();
+  const walletSession = (0, import_react.useMemo)(() => {
+    if (!elements) return null;
+    return elements.createWalletSession({ token, companyId, currency });
+  }, [elements]);
+  (0, import_react.useEffect)(() => {
+    if (!walletSession) return;
+    walletSession.updateOptions({ token, companyId, currency });
+  }, [walletSession, token, companyId, currency]);
+  const value = (0, import_react.useMemo)(
+    () => ({
+      walletSession
+    }),
+    [walletSession]
+  );
+  (0, import_react.useImperativeHandle)(ref, () => ({ walletSession }), [walletSession]);
+  return /* @__PURE__ */ import_react.default.createElement(WalletSessionContext.Provider, { value }, children);
+}
+function useWalletSession() {
+  const ctx = (0, import_react.useContext)(WalletSessionContext);
+  if (!ctx) {
+    throw new Error(
+      "useWalletSession must be used within a WalletSessionProvider"
+    );
+  }
+  return ctx.walletSession;
+}
+//# sourceMappingURL=session.js.map

package/dist/wallet/session.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/wallet/session.tsx"],"sourcesContent":["\"use client\";\n\nimport type {\n\tWalletSessionOptions,\n\tWalletSession as WalletSessionType,\n} from \"@whop/embedded-components-vanilla-js/types\";\nimport type { PropsWithChildren } from \"react\";\n\nimport React, {\n\tcreateContext,\n\tuseContext,\n\tuseEffect,\n\tuseImperativeHandle,\n\tuseMemo,\n} from \"react\";\nimport { useElements } from \"../provider\";\n\ninterface ContextState {\n\twalletSession: WalletSessionType | null;\n}\n\nconst WalletSessionContext = createContext<ContextState | null>(null);\n\nexport function WalletSession({\n\tchildren,\n\ttoken,\n\tcompanyId,\n\tcurrency,\n\tref,\n}: PropsWithChildren<\n\tWalletSessionOptions & {\n\t\tref?: React.RefObject<{\n\t\t\twalletSession: WalletSessionType | null;\n\t\t} | null>;\n\t}\n>) {\n\tconst elements = useElements();\n\n\tconst walletSession = useMemo(() => {\n\t\tif (!elements) return null;\n\t\treturn elements.createWalletSession({ token, companyId, currency });\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps -- session created once per elements instance\n\t}, [elements]);\n\n\tuseEffect(() => {\n\t\tif (!walletSession) return;\n\t\twalletSession.updateOptions({ token, companyId, currency });\n\t}, [walletSession, token, companyId, currency]);\n\n\tconst value: ContextState = useMemo(\n\t\t() => ({\n\t\t\twalletSession,\n\t\t}),\n\t\t[walletSession],\n\t);\n\n\tuseImperativeHandle(ref, () => ({ walletSession }), [walletSession]);\n\n\treturn (\n\t\t<WalletSessionContext.Provider value={value}>\n\t\t\t{children}\n\t\t</WalletSessionContext.Provider>\n\t);\n}\n\nexport function useWalletSession() {\n\tconst ctx = useContext(WalletSessionContext);\n\tif (!ctx) {\n\t\tthrow new Error(\n\t\t\t\"useWalletSession must be used within a WalletSessionProvider\",\n\t\t);\n\t}\n\treturn ctx.walletSession;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQA,mBAMO;AACP,sBAA4B;AAM5B,MAAM,2BAAuB,4BAAmC,IAAI;AAE7D,SAAS,cAAc;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAMG;AACF,QAAM,eAAW,6BAAY;AAE7B,QAAM,oBAAgB,sBAAQ,MAAM;AACnC,QAAI,CAAC,SAAU,QAAO;AACtB,WAAO,SAAS,oBAAoB,EAAE,OAAO,WAAW,SAAS,CAAC;AAAA,EAEnE,GAAG,CAAC,QAAQ,CAAC;AAEb,8BAAU,MAAM;AACf,QAAI,CAAC,cAAe;AACpB,kBAAc,cAAc,EAAE,OAAO,WAAW,SAAS,CAAC;AAAA,EAC3D,GAAG,CAAC,eAAe,OAAO,WAAW,QAAQ,CAAC;AAE9C,QAAM,YAAsB;AAAA,IAC3B,OAAO;AAAA,MACN;AAAA,IACD;AAAA,IACA,CAAC,aAAa;AAAA,EACf;AAEA,wCAAoB,KAAK,OAAO,EAAE,cAAc,IAAI,CAAC,aAAa,CAAC;AAEnE,SACC,6BAAAA,QAAA,cAAC,qBAAqB,UAArB,EAA8B,SAC7B,QACF;AAEF;AAEO,SAAS,mBAAmB;AAClC,QAAM,UAAM,yBAAW,oBAAoB;AAC3C,MAAI,CAAC,KAAK;AACT,UAAM,IAAI;AAAA,MACT;AAAA,IACD;AAAA,EACD;AACA,SAAO,IAAI;AACZ;","names":["React"]}

package/dist/wallet/session.mjs

@@ -0,0 +1,52 @@
+"use client";
+import "../chunk-NSSMTXJJ.mjs";
+import React, { createContext, useContext, useEffect, useImperativeHandle, useMemo } from "react";
+import { useElements } from "../provider.mjs";
+const WalletSessionContext = createContext(null);
+function WalletSession({ children, token, companyId, currency, ref }) {
+    const elements = useElements();
+    const walletSession = useMemo(()=>{
+        if (!elements) return null;
+        return elements.createWalletSession({
+            token,
+            companyId,
+            currency
+        });
+    }, [
+        elements
+    ]);
+    useEffect(()=>{
+        if (!walletSession) return;
+        walletSession.updateOptions({
+            token,
+            companyId,
+            currency
+        });
+    }, [
+        walletSession,
+        token,
+        companyId,
+        currency
+    ]);
+    const value = useMemo(()=>({
+            walletSession
+        }), [
+        walletSession
+    ]);
+    useImperativeHandle(ref, ()=>({
+            walletSession
+        }), [
+        walletSession
+    ]);
+    return React.createElement(WalletSessionContext.Provider, {
+        value
+    }, children);
+}
+function useWalletSession() {
+    const ctx = useContext(WalletSessionContext);
+    if (!ctx) {
+        throw new Error("useWalletSession must be used within a WalletSessionProvider");
+    }
+    return ctx.walletSession;
+}
+export { WalletSession, useWalletSession };

package/dist/wallet/session.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/wallet/session.tsx"],"sourcesContent":["\"use client\";\n\nimport type {\n\tWalletSessionOptions,\n\tWalletSession as WalletSessionType,\n} from \"@whop/embedded-components-vanilla-js/types\";\nimport type { PropsWithChildren } from \"react\";\n\nimport React, {\n\tcreateContext,\n\tuseContext,\n\tuseEffect,\n\tuseImperativeHandle,\n\tuseMemo,\n} from \"react\";\nimport { useElements } from \"../provider\";\n\ninterface ContextState {\n\twalletSession: WalletSessionType | null;\n}\n\nconst WalletSessionContext = createContext<ContextState | null>(null);\n\nexport function WalletSession({\n\tchildren,\n\ttoken,\n\tcompanyId,\n\tcurrency,\n\tref,\n}: PropsWithChildren<\n\tWalletSessionOptions & {\n\t\tref?: React.RefObject<{\n\t\t\twalletSession: WalletSessionType | null;\n\t\t} | null>;\n\t}\n>) {\n\tconst elements = useElements();\n\n\tconst walletSession = useMemo(() => {\n\t\tif (!elements) return null;\n\t\treturn elements.createWalletSession({ token, companyId, currency });\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps -- session created once per elements instance\n\t}, [elements]);\n\n\tuseEffect(() => {\n\t\tif (!walletSession) return;\n\t\twalletSession.updateOptions({ token, companyId, currency });\n\t}, [walletSession, token, companyId, currency]);\n\n\tconst value: ContextState = useMemo(\n\t\t() => ({\n\t\t\twalletSession,\n\t\t}),\n\t\t[walletSession],\n\t);\n\n\tuseImperativeHandle(ref, () => ({ walletSession }), [walletSession]);\n\n\treturn (\n\t\t<WalletSessionContext.Provider value={value}>\n\t\t\t{children}\n\t\t</WalletSessionContext.Provider>\n\t);\n}\n\nexport function useWalletSession() {\n\tconst ctx = useContext(WalletSessionContext);\n\tif (!ctx) {\n\t\tthrow new Error(\n\t\t\t\"useWalletSession must be used within a WalletSessionProvider\",\n\t\t);\n\t}\n\treturn ctx.walletSession;\n}\n"],"mappings":";;AAQA,OAAO;AAAA,EACN;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACM;AACP,SAAS,mBAAmB;AAM5B,MAAM,uBAAuB,cAAmC,IAAI;AAE7D,SAAS,cAAc;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAMG;AACF,QAAM,WAAW,YAAY;AAE7B,QAAM,gBAAgB,QAAQ,MAAM;AACnC,QAAI,CAAC,SAAU,QAAO;AACtB,WAAO,SAAS,oBAAoB,EAAE,OAAO,WAAW,SAAS,CAAC;AAAA,EAEnE,GAAG,CAAC,QAAQ,CAAC;AAEb,YAAU,MAAM;AACf,QAAI,CAAC,cAAe;AACpB,kBAAc,cAAc,EAAE,OAAO,WAAW,SAAS,CAAC;AAAA,EAC3D,GAAG,CAAC,eAAe,OAAO,WAAW,QAAQ,CAAC;AAE9C,QAAM,QAAsB;AAAA,IAC3B,OAAO;AAAA,MACN;AAAA,IACD;AAAA,IACA,CAAC,aAAa;AAAA,EACf;AAEA,sBAAoB,KAAK,OAAO,EAAE,cAAc,IAAI,CAAC,aAAa,CAAC;AAEnE,SACC,oCAAC,qBAAqB,UAArB,EAA8B,SAC7B,QACF;AAEF;AAEO,SAAS,mBAAmB;AAClC,QAAM,MAAM,WAAW,oBAAoB;AAC3C,MAAI,CAAC,KAAK;AACT,UAAM,IAAI;AAAA,MACT;AAAA,IACD;AAAA,EACD;AACA,SAAO,IAAI;AACZ;","names":[]}

package/dist/wallet/use-session-ref.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { WalletSession } from '@whop/embedded-components-vanilla-js/types';
+
+declare function useWalletSessionRef(): React.RefObject<{
+    walletSession: WalletSession | null;
+} | null>;
+
+export { useWalletSessionRef };

package/dist/wallet/use-session-ref.js

@@ -0,0 +1,29 @@
+"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 use_session_ref_exports = {};
+__export(use_session_ref_exports, {
+  useWalletSessionRef: () => useWalletSessionRef
+});
+module.exports = __toCommonJS(use_session_ref_exports);
+var import_react = require("react");
+function useWalletSessionRef() {
+  const ref = (0, import_react.useRef)(null);
+  return ref;
+}
+//# sourceMappingURL=use-session-ref.js.map

package/dist/wallet/use-session-ref.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/wallet/use-session-ref.ts"],"sourcesContent":["import type { WalletSession as WalletSessionType } from \"@whop/embedded-components-vanilla-js/types\";\n\nimport { useRef } from \"react\";\n\nexport function useWalletSessionRef() {\n\tconst ref = useRef<{\n\t\twalletSession: WalletSessionType | null;\n\t}>(null);\n\treturn ref;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAAuB;AAEhB,SAAS,sBAAsB;AACrC,QAAM,UAAM,qBAET,IAAI;AACP,SAAO;AACR;","names":[]}

package/dist/wallet/use-session-ref.mjs

@@ -0,0 +1,7 @@
+import "../chunk-NSSMTXJJ.mjs";
+import { useRef } from "react";
+function useWalletSessionRef() {
+    const ref = useRef(null);
+    return ref;
+}
+export { useWalletSessionRef };

package/dist/wallet/use-session-ref.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/wallet/use-session-ref.ts"],"sourcesContent":["import type { WalletSession as WalletSessionType } from \"@whop/embedded-components-vanilla-js/types\";\n\nimport { useRef } from \"react\";\n\nexport function useWalletSessionRef() {\n\tconst ref = useRef<{\n\t\twalletSession: WalletSessionType | null;\n\t}>(null);\n\treturn ref;\n}\n"],"mappings":";AAEA,SAAS,cAAc;AAEhB,SAAS,sBAAsB;AACrC,QAAM,MAAM,OAET,IAAI;AACP,SAAO;AACR;","names":[]}

package/package.json

@@ -1,28 +1,28 @@
 {
   "name": "@whop/embedded-components-react-js",
-  "version": "1.0.0-beta.11",
+  "version": "1.1.1",
   "description": "React components for Whop.js",
-  "main": "dist/index.js",
-  "module": "dist/index.mjs",
-  "jsnext:main": "dist/index.mjs",
-  "types": "dist/index.d.ts",
-  "typing": "dist/index.d.ts",
   "keywords": [
+    "React",
     "Whop",
     "Whop.js",
-    "React",
     "embedded",
     "payments",
     "payouts"
   ],
-  "author": "Whop (https://whop.com)",
   "license": "MIT",
+  "author": "Whop (https://whop.com)",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "jsnext:main": "dist/index.mjs",
   "publishConfig": {
     "access": "public"
   },
   "peerDependencies": {
     "react": ">=16.8.0 <20.0.0",
     "react-dom": ">=16.8.0 <20.0.0",
-    "@whop/embedded-components-vanilla-js": "^1.0.0-beta.11"
-  }
+    "@whop/embedded-components-vanilla-js": "^1.1.1"
+  },
+  "typing": "dist/index.d.ts"
 }