@whop/embedded-components-react-js 0.0.0 → 0.0.2

package/CHANGELOG.md

@@ -0,0 +1,8 @@
+# @whop/embedded-components-react-js
+
+## 0.0.1
+
+### Patch Changes
+
+- a9b1659: initial embedded components scaffold
+  - @whop/embedded-components-vanilla-js@0.0.1

package/dist/index.d.ts

@@ -1,7 +1,12 @@
-export { Elements, useElements } from './provider.js';
 export { PayoutsSession, usePayoutsSession } from './payouts/session.js';
+export { BalanceElement } from './payouts/elements/balance.js';
+export { ChangeAccountCountryElement } from './payouts/elements/change-account-country.js';
+export { ResetAccountElement } from './payouts/elements/reset-account.js';
 export { VerifyElement } from './payouts/elements/verify.js';
 export { WithdrawButtonElement } from './payouts/elements/withdraw-button.js';
-export { BalanceElement } from './payouts/elements/balance.js';
+export { WithdrawalBreakdownElement } from './payouts/elements/withdrawal-breakdown.js';
+export { WithdrawalsElement } from './payouts/elements/withdrawals.js';
+export { usePayoutsSessionRef } from './payouts/use-session-ref.js';
+export { Elements, useElements } from './provider.js';
 import '@whop/embedded-components-vanilla-js/types';
 import 'react';

package/dist/index.js

@@ -15,6 +15,7 @@ var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "defau
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var index_exports = {};
 module.exports = __toCommonJS(index_exports);
-__reExport(index_exports, require("./provider"), module.exports);
 __reExport(index_exports, require("./payouts"), module.exports);
+__reExport(index_exports, require("./payouts/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":["export * from \"./provider\";\nexport type * from \"./provider\";\n\nexport * from \"./payouts\";\nexport type * from \"./payouts\";\n"],"mappings":";;;;;;;;;;;;;;;AAAA;AAAA;AAAA,0BAAc,uBAAd;AAGA,0BAAc,sBAHd;","names":[]}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export * from \"./payouts\";\nexport * from \"./payouts/use-session-ref\";\nexport * from \"./provider\";\n"],"mappings":";;;;;;;;;;;;;;;AAAA;AAAA;AAAA,0BAAc,sBAAd;AACA,0BAAc,sCADd;AAEA,0BAAc,uBAFd;","names":[]}

package/dist/index.mjs

@@ -1,2 +1,3 @@
-export * from "./provider.mjs";
 export * from "./payouts/index.mjs";
+export * from "./payouts/use-session-ref.mjs";
+export * from "./provider.mjs";

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export * from \"./provider\";\nexport type * from \"./provider\";\n\nexport * from \"./payouts\";\nexport type * from \"./payouts\";\n"],"mappings":"AAAA,cAAc;AAGd,cAAc;","names":[]}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export * from \"./payouts\";\nexport * from \"./payouts/use-session-ref\";\nexport * from \"./provider\";\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;","names":[]}

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

@@ -1,13 +1,13 @@
 import { BalanceElementOptions } from '@whop/embedded-components-vanilla-js/types';
-import React from 'react';
+import React__default from 'react';
 
 declare function BalanceElement({ options, className, style, onReady, fallback, }: {
     options?: BalanceElementOptions;
     className?: string;
-    style?: React.CSSProperties;
+    style?: React__default.CSSProperties;
     onReady?: () => void;
-    fallback?: React.ReactNode;
-}): React.JSX.Element;
+    fallback?: React__default.ReactNode;
+}): React__default.JSX.Element;
 declare namespace BalanceElement {
     var displayName: string;
     var type: "balance-element";

package/dist/payouts/elements/balance.js

@@ -75,7 +75,7 @@ function BalanceElement({
   return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
     "div",
     {
-      style: { ...style, visibility: isReady ? "visible" : "hidden" },
+      style: { ...style, visibility: isReady ? void 0 : "hidden" },
       className,
       ref
     }

package/dist/payouts/elements/balance.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/payouts/elements/balance.tsx"],"sourcesContent":["\"use client\";\n\nimport type { BalanceElementOptions } from \"@whop/embedded-components-vanilla-js/types\";\n\nimport React, { useEffect, useLayoutEffect, useMemo, useRef } from \"react\";\nimport { useElementSnapshot } from \"../../lib/use-element-snapshot\";\nimport { usePayoutsSession } from \"../session\";\n\nexport function BalanceElement({\n\toptions = {},\n\tclassName,\n\tstyle,\n\tonReady,\n\tfallback,\n}: {\n\toptions?: BalanceElementOptions;\n\tclassName?: string;\n\tstyle?: React.CSSProperties;\n\tonReady?: () => void;\n\tfallback?: React.ReactNode;\n}) {\n\tconst payoutsSession = usePayoutsSession();\n\tconst ref = useRef<HTMLDivElement>(null);\n\tconst element = useMemo(() => {\n\t\tif (!payoutsSession) return null;\n\t\tconst createdElement = payoutsSession.createElement(\n\t\t\tBalanceElement,\n\t\t\toptions,\n\t\t);\n\t\treturn createdElement;\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [payoutsSession]);\n\n\tconst elementSnapshot = useElementSnapshot(element);\n\n\tconst isReady = elementSnapshot?.state === \"ready\";\n\n\tuseEffect(() => {\n\t\tif (!element) return;\n\t\telement.updateOptions(options);\n\t}, [options, element]);\n\n\tuseEffect(() => {\n\t\tif (!element || !onReady) return;\n\t\telement.on(\"ready\", onReady);\n\t\treturn () => {\n\t\t\telement.off(\"ready\", onReady);\n\t\t};\n\t}, [element, onReady]);\n\n\tuseLayoutEffect(() => {\n\t\tif (!element || !ref.current) return;\n\t\telement.mount(ref.current);\n\t\treturn () => {\n\t\t\telement.unmount();\n\t\t};\n\t}, [element, ref.current]);\n\n\treturn (\n\t\t<>\n\t\t\t<div\n\t\t\t\tstyle={{ ...style, visibility: isReady ? \"visible\" : \"hidden\" }}\n\t\t\t\tclassName={className}\n\t\t\t\tref={ref}\n\t\t\t/>\n\t\t\t{!isReady && (fallback ?? null)}\n\t\t</>\n\t);\n}\n\nBalanceElement.displayName = \"BalanceElement\";\nBalanceElement.type = \"balance-element\" as const;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA,mBAAmE;AACnE,kCAAmC;AACnC,qBAAkC;AAE3B,SAAS,eAAe;AAAA,EAC9B,UAAU,CAAC;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAMG;AACF,QAAM,qBAAiB,kCAAkB;AACzC,QAAM,UAAM,qBAAuB,IAAI;AACvC,QAAM,cAAU,sBAAQ,MAAM;AAC7B,QAAI,CAAC,eAAgB,QAAO;AAC5B,UAAM,iBAAiB,eAAe;AAAA,MACrC;AAAA,MACA;AAAA,IACD;AACA,WAAO;AAAA,EAER,GAAG,CAAC,cAAc,CAAC;AAEnB,QAAM,sBAAkB,gDAAmB,OAAO;AAElD,QAAM,UAAU,iBAAiB,UAAU;AAE3C,8BAAU,MAAM;AACf,QAAI,CAAC,QAAS;AACd,YAAQ,cAAc,OAAO;AAAA,EAC9B,GAAG,CAAC,SAAS,OAAO,CAAC;AAErB,8BAAU,MAAM;AACf,QAAI,CAAC,WAAW,CAAC,QAAS;AAC1B,YAAQ,GAAG,SAAS,OAAO;AAC3B,WAAO,MAAM;AACZ,cAAQ,IAAI,SAAS,OAAO;AAAA,IAC7B;AAAA,EACD,GAAG,CAAC,SAAS,OAAO,CAAC;AAErB,oCAAgB,MAAM;AACrB,QAAI,CAAC,WAAW,CAAC,IAAI,QAAS;AAC9B,YAAQ,MAAM,IAAI,OAAO;AACzB,WAAO,MAAM;AACZ,cAAQ,QAAQ;AAAA,IACjB;AAAA,EACD,GAAG,CAAC,SAAS,IAAI,OAAO,CAAC;AAEzB,SACC,6BAAAA,QAAA,2BAAAA,QAAA,gBACC,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACA,OAAO,EAAE,GAAG,OAAO,YAAY,UAAU,YAAY,SAAS;AAAA,MAC9D;AAAA,MACA;AAAA;AAAA,EACD,GACC,CAAC,YAAY,YAAY,KAC3B;AAEF;AAEA,eAAe,cAAc;AAC7B,eAAe,OAAO;","names":["React"]}
+{"version":3,"sources":["../../../src/payouts/elements/balance.tsx"],"sourcesContent":["\"use client\";\n\nimport type { BalanceElementOptions } from \"@whop/embedded-components-vanilla-js/types\";\n\nimport React, { useEffect, useLayoutEffect, useMemo, useRef } from \"react\";\nimport { useElementSnapshot } from \"../../lib/use-element-snapshot\";\nimport { usePayoutsSession } from \"../session\";\n\nexport function BalanceElement({\n\toptions = {},\n\tclassName,\n\tstyle,\n\tonReady,\n\tfallback,\n}: {\n\toptions?: BalanceElementOptions;\n\tclassName?: string;\n\tstyle?: React.CSSProperties;\n\tonReady?: () => void;\n\tfallback?: React.ReactNode;\n}) {\n\tconst payoutsSession = usePayoutsSession();\n\tconst ref = useRef<HTMLDivElement>(null);\n\tconst element = useMemo(() => {\n\t\tif (!payoutsSession) return null;\n\t\tconst createdElement = payoutsSession.createElement(\n\t\t\tBalanceElement,\n\t\t\toptions,\n\t\t);\n\t\treturn createdElement;\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [payoutsSession]);\n\n\tconst elementSnapshot = useElementSnapshot(element);\n\n\tconst isReady = elementSnapshot?.state === \"ready\";\n\n\tuseEffect(() => {\n\t\tif (!element) return;\n\t\telement.updateOptions(options);\n\t}, [options, element]);\n\n\tuseEffect(() => {\n\t\tif (!element || !onReady) return;\n\t\telement.on(\"ready\", onReady);\n\t\treturn () => {\n\t\t\telement.off(\"ready\", onReady);\n\t\t};\n\t}, [element, onReady]);\n\n\tuseLayoutEffect(() => {\n\t\tif (!element || !ref.current) return;\n\t\telement.mount(ref.current);\n\t\treturn () => {\n\t\t\telement.unmount();\n\t\t};\n\t}, [element, ref.current]);\n\n\treturn (\n\t\t<>\n\t\t\t<div\n\t\t\t\tstyle={{ ...style, visibility: isReady ? undefined : \"hidden\" }}\n\t\t\t\tclassName={className}\n\t\t\t\tref={ref}\n\t\t\t/>\n\t\t\t{!isReady && (fallback ?? null)}\n\t\t</>\n\t);\n}\n\nBalanceElement.displayName = \"BalanceElement\";\nBalanceElement.type = \"balance-element\" as const;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA,mBAAmE;AACnE,kCAAmC;AACnC,qBAAkC;AAE3B,SAAS,eAAe;AAAA,EAC9B,UAAU,CAAC;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAMG;AACF,QAAM,qBAAiB,kCAAkB;AACzC,QAAM,UAAM,qBAAuB,IAAI;AACvC,QAAM,cAAU,sBAAQ,MAAM;AAC7B,QAAI,CAAC,eAAgB,QAAO;AAC5B,UAAM,iBAAiB,eAAe;AAAA,MACrC;AAAA,MACA;AAAA,IACD;AACA,WAAO;AAAA,EAER,GAAG,CAAC,cAAc,CAAC;AAEnB,QAAM,sBAAkB,gDAAmB,OAAO;AAElD,QAAM,UAAU,iBAAiB,UAAU;AAE3C,8BAAU,MAAM;AACf,QAAI,CAAC,QAAS;AACd,YAAQ,cAAc,OAAO;AAAA,EAC9B,GAAG,CAAC,SAAS,OAAO,CAAC;AAErB,8BAAU,MAAM;AACf,QAAI,CAAC,WAAW,CAAC,QAAS;AAC1B,YAAQ,GAAG,SAAS,OAAO;AAC3B,WAAO,MAAM;AACZ,cAAQ,IAAI,SAAS,OAAO;AAAA,IAC7B;AAAA,EACD,GAAG,CAAC,SAAS,OAAO,CAAC;AAErB,oCAAgB,MAAM;AACrB,QAAI,CAAC,WAAW,CAAC,IAAI,QAAS;AAC9B,YAAQ,MAAM,IAAI,OAAO;AACzB,WAAO,MAAM;AACZ,cAAQ,QAAQ;AAAA,IACjB;AAAA,EACD,GAAG,CAAC,SAAS,IAAI,OAAO,CAAC;AAEzB,SACC,6BAAAA,QAAA,2BAAAA,QAAA,gBACC,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACA,OAAO,EAAE,GAAG,OAAO,YAAY,UAAU,SAAY,SAAS;AAAA,MAC9D;AAAA,MACA;AAAA;AAAA,EACD,GACC,CAAC,YAAY,YAAY,KAC3B;AAEF;AAEA,eAAe,cAAc;AAC7B,eAAe,OAAO;","names":["React"]}

package/dist/payouts/elements/balance.mjs

@@ -45,7 +45,7 @@ function BalanceElement({ options = {}, className, style, onReady, fallback }) {
     return React.createElement(React.Fragment, null, React.createElement("div", {
         style: {
             ...style,
-            visibility: isReady ? "visible" : "hidden"
+            visibility: isReady ? void 0 : "hidden"
         },
         className,
         ref

package/dist/payouts/elements/balance.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/payouts/elements/balance.tsx"],"sourcesContent":["\"use client\";\n\nimport type { BalanceElementOptions } from \"@whop/embedded-components-vanilla-js/types\";\n\nimport React, { useEffect, useLayoutEffect, useMemo, useRef } from \"react\";\nimport { useElementSnapshot } from \"../../lib/use-element-snapshot\";\nimport { usePayoutsSession } from \"../session\";\n\nexport function BalanceElement({\n\toptions = {},\n\tclassName,\n\tstyle,\n\tonReady,\n\tfallback,\n}: {\n\toptions?: BalanceElementOptions;\n\tclassName?: string;\n\tstyle?: React.CSSProperties;\n\tonReady?: () => void;\n\tfallback?: React.ReactNode;\n}) {\n\tconst payoutsSession = usePayoutsSession();\n\tconst ref = useRef<HTMLDivElement>(null);\n\tconst element = useMemo(() => {\n\t\tif (!payoutsSession) return null;\n\t\tconst createdElement = payoutsSession.createElement(\n\t\t\tBalanceElement,\n\t\t\toptions,\n\t\t);\n\t\treturn createdElement;\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [payoutsSession]);\n\n\tconst elementSnapshot = useElementSnapshot(element);\n\n\tconst isReady = elementSnapshot?.state === \"ready\";\n\n\tuseEffect(() => {\n\t\tif (!element) return;\n\t\telement.updateOptions(options);\n\t}, [options, element]);\n\n\tuseEffect(() => {\n\t\tif (!element || !onReady) return;\n\t\telement.on(\"ready\", onReady);\n\t\treturn () => {\n\t\t\telement.off(\"ready\", onReady);\n\t\t};\n\t}, [element, onReady]);\n\n\tuseLayoutEffect(() => {\n\t\tif (!element || !ref.current) return;\n\t\telement.mount(ref.current);\n\t\treturn () => {\n\t\t\telement.unmount();\n\t\t};\n\t}, [element, ref.current]);\n\n\treturn (\n\t\t<>\n\t\t\t<div\n\t\t\t\tstyle={{ ...style, visibility: isReady ? \"visible\" : \"hidden\" }}\n\t\t\t\tclassName={className}\n\t\t\t\tref={ref}\n\t\t\t/>\n\t\t\t{!isReady && (fallback ?? null)}\n\t\t</>\n\t);\n}\n\nBalanceElement.displayName = \"BalanceElement\";\nBalanceElement.type = \"balance-element\" as const;\n"],"mappings":";;AAIA,OAAO,SAAS,WAAW,iBAAiB,SAAS,cAAc;AACnE,SAAS,0BAA0B;AACnC,SAAS,yBAAyB;AAE3B,SAAS,eAAe;AAAA,EAC9B,UAAU,CAAC;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAMG;AACF,QAAM,iBAAiB,kBAAkB;AACzC,QAAM,MAAM,OAAuB,IAAI;AACvC,QAAM,UAAU,QAAQ,MAAM;AAC7B,QAAI,CAAC,eAAgB,QAAO;AAC5B,UAAM,iBAAiB,eAAe;AAAA,MACrC;AAAA,MACA;AAAA,IACD;AACA,WAAO;AAAA,EAER,GAAG,CAAC,cAAc,CAAC;AAEnB,QAAM,kBAAkB,mBAAmB,OAAO;AAElD,QAAM,UAAU,iBAAiB,UAAU;AAE3C,YAAU,MAAM;AACf,QAAI,CAAC,QAAS;AACd,YAAQ,cAAc,OAAO;AAAA,EAC9B,GAAG,CAAC,SAAS,OAAO,CAAC;AAErB,YAAU,MAAM;AACf,QAAI,CAAC,WAAW,CAAC,QAAS;AAC1B,YAAQ,GAAG,SAAS,OAAO;AAC3B,WAAO,MAAM;AACZ,cAAQ,IAAI,SAAS,OAAO;AAAA,IAC7B;AAAA,EACD,GAAG,CAAC,SAAS,OAAO,CAAC;AAErB,kBAAgB,MAAM;AACrB,QAAI,CAAC,WAAW,CAAC,IAAI,QAAS;AAC9B,YAAQ,MAAM,IAAI,OAAO;AACzB,WAAO,MAAM;AACZ,cAAQ,QAAQ;AAAA,IACjB;AAAA,EACD,GAAG,CAAC,SAAS,IAAI,OAAO,CAAC;AAEzB,SACC,0DACC;AAAA,IAAC;AAAA;AAAA,MACA,OAAO,EAAE,GAAG,OAAO,YAAY,UAAU,YAAY,SAAS;AAAA,MAC9D;AAAA,MACA;AAAA;AAAA,EACD,GACC,CAAC,YAAY,YAAY,KAC3B;AAEF;AAEA,eAAe,cAAc;AAC7B,eAAe,OAAO;","names":[]}
+{"version":3,"sources":["../../../src/payouts/elements/balance.tsx"],"sourcesContent":["\"use client\";\n\nimport type { BalanceElementOptions } from \"@whop/embedded-components-vanilla-js/types\";\n\nimport React, { useEffect, useLayoutEffect, useMemo, useRef } from \"react\";\nimport { useElementSnapshot } from \"../../lib/use-element-snapshot\";\nimport { usePayoutsSession } from \"../session\";\n\nexport function BalanceElement({\n\toptions = {},\n\tclassName,\n\tstyle,\n\tonReady,\n\tfallback,\n}: {\n\toptions?: BalanceElementOptions;\n\tclassName?: string;\n\tstyle?: React.CSSProperties;\n\tonReady?: () => void;\n\tfallback?: React.ReactNode;\n}) {\n\tconst payoutsSession = usePayoutsSession();\n\tconst ref = useRef<HTMLDivElement>(null);\n\tconst element = useMemo(() => {\n\t\tif (!payoutsSession) return null;\n\t\tconst createdElement = payoutsSession.createElement(\n\t\t\tBalanceElement,\n\t\t\toptions,\n\t\t);\n\t\treturn createdElement;\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [payoutsSession]);\n\n\tconst elementSnapshot = useElementSnapshot(element);\n\n\tconst isReady = elementSnapshot?.state === \"ready\";\n\n\tuseEffect(() => {\n\t\tif (!element) return;\n\t\telement.updateOptions(options);\n\t}, [options, element]);\n\n\tuseEffect(() => {\n\t\tif (!element || !onReady) return;\n\t\telement.on(\"ready\", onReady);\n\t\treturn () => {\n\t\t\telement.off(\"ready\", onReady);\n\t\t};\n\t}, [element, onReady]);\n\n\tuseLayoutEffect(() => {\n\t\tif (!element || !ref.current) return;\n\t\telement.mount(ref.current);\n\t\treturn () => {\n\t\t\telement.unmount();\n\t\t};\n\t}, [element, ref.current]);\n\n\treturn (\n\t\t<>\n\t\t\t<div\n\t\t\t\tstyle={{ ...style, visibility: isReady ? undefined : \"hidden\" }}\n\t\t\t\tclassName={className}\n\t\t\t\tref={ref}\n\t\t\t/>\n\t\t\t{!isReady && (fallback ?? null)}\n\t\t</>\n\t);\n}\n\nBalanceElement.displayName = \"BalanceElement\";\nBalanceElement.type = \"balance-element\" as const;\n"],"mappings":";;AAIA,OAAO,SAAS,WAAW,iBAAiB,SAAS,cAAc;AACnE,SAAS,0BAA0B;AACnC,SAAS,yBAAyB;AAE3B,SAAS,eAAe;AAAA,EAC9B,UAAU,CAAC;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAMG;AACF,QAAM,iBAAiB,kBAAkB;AACzC,QAAM,MAAM,OAAuB,IAAI;AACvC,QAAM,UAAU,QAAQ,MAAM;AAC7B,QAAI,CAAC,eAAgB,QAAO;AAC5B,UAAM,iBAAiB,eAAe;AAAA,MACrC;AAAA,MACA;AAAA,IACD;AACA,WAAO;AAAA,EAER,GAAG,CAAC,cAAc,CAAC;AAEnB,QAAM,kBAAkB,mBAAmB,OAAO;AAElD,QAAM,UAAU,iBAAiB,UAAU;AAE3C,YAAU,MAAM;AACf,QAAI,CAAC,QAAS;AACd,YAAQ,cAAc,OAAO;AAAA,EAC9B,GAAG,CAAC,SAAS,OAAO,CAAC;AAErB,YAAU,MAAM;AACf,QAAI,CAAC,WAAW,CAAC,QAAS;AAC1B,YAAQ,GAAG,SAAS,OAAO;AAC3B,WAAO,MAAM;AACZ,cAAQ,IAAI,SAAS,OAAO;AAAA,IAC7B;AAAA,EACD,GAAG,CAAC,SAAS,OAAO,CAAC;AAErB,kBAAgB,MAAM;AACrB,QAAI,CAAC,WAAW,CAAC,IAAI,QAAS;AAC9B,YAAQ,MAAM,IAAI,OAAO;AACzB,WAAO,MAAM;AACZ,cAAQ,QAAQ;AAAA,IACjB;AAAA,EACD,GAAG,CAAC,SAAS,IAAI,OAAO,CAAC;AAEzB,SACC,0DACC;AAAA,IAAC;AAAA;AAAA,MACA,OAAO,EAAE,GAAG,OAAO,YAAY,UAAU,SAAY,SAAS;AAAA,MAC9D;AAAA,MACA;AAAA;AAAA,EACD,GACC,CAAC,YAAY,YAAY,KAC3B;AAEF;AAEA,eAAe,cAAc;AAC7B,eAAe,OAAO;","names":[]}

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

@@ -0,0 +1,16 @@
+import { ChangeAccountCountryElementOptions } from '@whop/embedded-components-vanilla-js/types';
+import React__default from 'react';
+
+declare function ChangeAccountCountryElement({ options, className, style, onReady, fallback, }: {
+    options?: ChangeAccountCountryElementOptions;
+    className?: string;
+    style?: React__default.CSSProperties;
+    onReady?: () => void;
+    fallback?: React__default.ReactNode;
+}): React__default.JSX.Element;
+declare namespace ChangeAccountCountryElement {
+    var displayName: string;
+    var type: "change-account-country-element";
+}
+
+export { ChangeAccountCountryElement };

package/dist/payouts/elements/change-account-country.js

@@ -0,0 +1,86 @@
+"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 change_account_country_exports = {};
+__export(change_account_country_exports, {
+  ChangeAccountCountryElement: () => ChangeAccountCountryElement
+});
+module.exports = __toCommonJS(change_account_country_exports);
+var import_react = __toESM(require("react"));
+var import_use_element_snapshot = require("../../lib/use-element-snapshot");
+var import_session = require("../session");
+function ChangeAccountCountryElement({
+  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;
+    const createdElement = payoutsSession.createElement(
+      ChangeAccountCountryElement,
+      options
+    );
+    return createdElement;
+  }, [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));
+}
+ChangeAccountCountryElement.displayName = "ChangeAccountCountryElement";
+ChangeAccountCountryElement.type = "change-account-country-element";
+//# sourceMappingURL=change-account-country.js.map

package/dist/payouts/elements/change-account-country.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/payouts/elements/change-account-country.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ChangeAccountCountryElementOptions } from \"@whop/embedded-components-vanilla-js/types\";\n\nimport React, { useEffect, useLayoutEffect, useMemo, useRef } from \"react\";\nimport { useElementSnapshot } from \"../../lib/use-element-snapshot\";\nimport { usePayoutsSession } from \"../session\";\n\nexport function ChangeAccountCountryElement({\n\toptions = {},\n\tclassName,\n\tstyle,\n\tonReady,\n\tfallback,\n}: {\n\toptions?: ChangeAccountCountryElementOptions;\n\tclassName?: string;\n\tstyle?: React.CSSProperties;\n\tonReady?: () => void;\n\tfallback?: React.ReactNode;\n}) {\n\tconst payoutsSession = usePayoutsSession();\n\tconst ref = useRef<HTMLDivElement>(null);\n\tconst element = useMemo(() => {\n\t\tif (!payoutsSession) return null;\n\t\tconst createdElement = payoutsSession.createElement(\n\t\t\tChangeAccountCountryElement,\n\t\t\toptions,\n\t\t);\n\t\treturn createdElement;\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [payoutsSession]);\n\n\tconst elementSnapshot = useElementSnapshot(element);\n\n\tconst isReady = elementSnapshot?.state === \"ready\";\n\n\tuseEffect(() => {\n\t\tif (!element) return;\n\t\telement.updateOptions(options);\n\t}, [options, element]);\n\n\tuseEffect(() => {\n\t\tif (!element || !onReady) return;\n\t\telement.on(\"ready\", onReady);\n\t\treturn () => {\n\t\t\telement.off(\"ready\", onReady);\n\t\t};\n\t}, [element, onReady]);\n\n\tuseLayoutEffect(() => {\n\t\tif (!element || !ref.current) return;\n\t\telement.mount(ref.current);\n\t\treturn () => {\n\t\t\telement.unmount();\n\t\t};\n\t}, [element, ref.current]);\n\n\treturn (\n\t\t<>\n\t\t\t<div\n\t\t\t\tstyle={{ ...style, visibility: isReady ? undefined : \"hidden\" }}\n\t\t\t\tclassName={className}\n\t\t\t\tref={ref}\n\t\t\t/>\n\t\t\t{!isReady && (fallback ?? null)}\n\t\t</>\n\t);\n}\n\nChangeAccountCountryElement.displayName = \"ChangeAccountCountryElement\";\nChangeAccountCountryElement.type = \"change-account-country-element\" as const;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA,mBAAmE;AACnE,kCAAmC;AACnC,qBAAkC;AAE3B,SAAS,4BAA4B;AAAA,EAC3C,UAAU,CAAC;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAMG;AACF,QAAM,qBAAiB,kCAAkB;AACzC,QAAM,UAAM,qBAAuB,IAAI;AACvC,QAAM,cAAU,sBAAQ,MAAM;AAC7B,QAAI,CAAC,eAAgB,QAAO;AAC5B,UAAM,iBAAiB,eAAe;AAAA,MACrC;AAAA,MACA;AAAA,IACD;AACA,WAAO;AAAA,EAER,GAAG,CAAC,cAAc,CAAC;AAEnB,QAAM,sBAAkB,gDAAmB,OAAO;AAElD,QAAM,UAAU,iBAAiB,UAAU;AAE3C,8BAAU,MAAM;AACf,QAAI,CAAC,QAAS;AACd,YAAQ,cAAc,OAAO;AAAA,EAC9B,GAAG,CAAC,SAAS,OAAO,CAAC;AAErB,8BAAU,MAAM;AACf,QAAI,CAAC,WAAW,CAAC,QAAS;AAC1B,YAAQ,GAAG,SAAS,OAAO;AAC3B,WAAO,MAAM;AACZ,cAAQ,IAAI,SAAS,OAAO;AAAA,IAC7B;AAAA,EACD,GAAG,CAAC,SAAS,OAAO,CAAC;AAErB,oCAAgB,MAAM;AACrB,QAAI,CAAC,WAAW,CAAC,IAAI,QAAS;AAC9B,YAAQ,MAAM,IAAI,OAAO;AACzB,WAAO,MAAM;AACZ,cAAQ,QAAQ;AAAA,IACjB;AAAA,EACD,GAAG,CAAC,SAAS,IAAI,OAAO,CAAC;AAEzB,SACC,6BAAAA,QAAA,2BAAAA,QAAA,gBACC,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACA,OAAO,EAAE,GAAG,OAAO,YAAY,UAAU,SAAY,SAAS;AAAA,MAC9D;AAAA,MACA;AAAA;AAAA,EACD,GACC,CAAC,YAAY,YAAY,KAC3B;AAEF;AAEA,4BAA4B,cAAc;AAC1C,4BAA4B,OAAO;","names":["React"]}

package/dist/payouts/elements/change-account-country.mjs

@@ -0,0 +1,56 @@
+"use client";
+import "../../chunk-NSSMTXJJ.mjs";
+import React, { useEffect, useLayoutEffect, useMemo, useRef } from "react";
+import { useElementSnapshot } from "../../lib/use-element-snapshot.mjs";
+import { usePayoutsSession } from "../session.mjs";
+function ChangeAccountCountryElement({ options = {}, className, style, onReady, fallback }) {
+    const payoutsSession = usePayoutsSession();
+    const ref = useRef(null);
+    const element = useMemo(()=>{
+        if (!payoutsSession) return null;
+        const createdElement = payoutsSession.createElement(ChangeAccountCountryElement, options);
+        return createdElement;
+    }, [
+        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));
+}
+ChangeAccountCountryElement.displayName = "ChangeAccountCountryElement";
+ChangeAccountCountryElement.type = "change-account-country-element";
+export { ChangeAccountCountryElement };

package/dist/payouts/elements/change-account-country.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/payouts/elements/change-account-country.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ChangeAccountCountryElementOptions } from \"@whop/embedded-components-vanilla-js/types\";\n\nimport React, { useEffect, useLayoutEffect, useMemo, useRef } from \"react\";\nimport { useElementSnapshot } from \"../../lib/use-element-snapshot\";\nimport { usePayoutsSession } from \"../session\";\n\nexport function ChangeAccountCountryElement({\n\toptions = {},\n\tclassName,\n\tstyle,\n\tonReady,\n\tfallback,\n}: {\n\toptions?: ChangeAccountCountryElementOptions;\n\tclassName?: string;\n\tstyle?: React.CSSProperties;\n\tonReady?: () => void;\n\tfallback?: React.ReactNode;\n}) {\n\tconst payoutsSession = usePayoutsSession();\n\tconst ref = useRef<HTMLDivElement>(null);\n\tconst element = useMemo(() => {\n\t\tif (!payoutsSession) return null;\n\t\tconst createdElement = payoutsSession.createElement(\n\t\t\tChangeAccountCountryElement,\n\t\t\toptions,\n\t\t);\n\t\treturn createdElement;\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [payoutsSession]);\n\n\tconst elementSnapshot = useElementSnapshot(element);\n\n\tconst isReady = elementSnapshot?.state === \"ready\";\n\n\tuseEffect(() => {\n\t\tif (!element) return;\n\t\telement.updateOptions(options);\n\t}, [options, element]);\n\n\tuseEffect(() => {\n\t\tif (!element || !onReady) return;\n\t\telement.on(\"ready\", onReady);\n\t\treturn () => {\n\t\t\telement.off(\"ready\", onReady);\n\t\t};\n\t}, [element, onReady]);\n\n\tuseLayoutEffect(() => {\n\t\tif (!element || !ref.current) return;\n\t\telement.mount(ref.current);\n\t\treturn () => {\n\t\t\telement.unmount();\n\t\t};\n\t}, [element, ref.current]);\n\n\treturn (\n\t\t<>\n\t\t\t<div\n\t\t\t\tstyle={{ ...style, visibility: isReady ? undefined : \"hidden\" }}\n\t\t\t\tclassName={className}\n\t\t\t\tref={ref}\n\t\t\t/>\n\t\t\t{!isReady && (fallback ?? null)}\n\t\t</>\n\t);\n}\n\nChangeAccountCountryElement.displayName = \"ChangeAccountCountryElement\";\nChangeAccountCountryElement.type = \"change-account-country-element\" as const;\n"],"mappings":";;AAIA,OAAO,SAAS,WAAW,iBAAiB,SAAS,cAAc;AACnE,SAAS,0BAA0B;AACnC,SAAS,yBAAyB;AAE3B,SAAS,4BAA4B;AAAA,EAC3C,UAAU,CAAC;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAMG;AACF,QAAM,iBAAiB,kBAAkB;AACzC,QAAM,MAAM,OAAuB,IAAI;AACvC,QAAM,UAAU,QAAQ,MAAM;AAC7B,QAAI,CAAC,eAAgB,QAAO;AAC5B,UAAM,iBAAiB,eAAe;AAAA,MACrC;AAAA,MACA;AAAA,IACD;AACA,WAAO;AAAA,EAER,GAAG,CAAC,cAAc,CAAC;AAEnB,QAAM,kBAAkB,mBAAmB,OAAO;AAElD,QAAM,UAAU,iBAAiB,UAAU;AAE3C,YAAU,MAAM;AACf,QAAI,CAAC,QAAS;AACd,YAAQ,cAAc,OAAO;AAAA,EAC9B,GAAG,CAAC,SAAS,OAAO,CAAC;AAErB,YAAU,MAAM;AACf,QAAI,CAAC,WAAW,CAAC,QAAS;AAC1B,YAAQ,GAAG,SAAS,OAAO;AAC3B,WAAO,MAAM;AACZ,cAAQ,IAAI,SAAS,OAAO;AAAA,IAC7B;AAAA,EACD,GAAG,CAAC,SAAS,OAAO,CAAC;AAErB,kBAAgB,MAAM;AACrB,QAAI,CAAC,WAAW,CAAC,IAAI,QAAS;AAC9B,YAAQ,MAAM,IAAI,OAAO;AACzB,WAAO,MAAM;AACZ,cAAQ,QAAQ;AAAA,IACjB;AAAA,EACD,GAAG,CAAC,SAAS,IAAI,OAAO,CAAC;AAEzB,SACC,0DACC;AAAA,IAAC;AAAA;AAAA,MACA,OAAO,EAAE,GAAG,OAAO,YAAY,UAAU,SAAY,SAAS;AAAA,MAC9D;AAAA,MACA;AAAA;AAAA,EACD,GACC,CAAC,YAAY,YAAY,KAC3B;AAEF;AAEA,4BAA4B,cAAc;AAC1C,4BAA4B,OAAO;","names":[]}

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

@@ -1,5 +1,9 @@
+export { BalanceElement } from './balance.js';
+export { ChangeAccountCountryElement } from './change-account-country.js';
+export { ResetAccountElement } from './reset-account.js';
 export { VerifyElement } from './verify.js';
 export { WithdrawButtonElement } from './withdraw-button.js';
-export { BalanceElement } from './balance.js';
+export { WithdrawalBreakdownElement } from './withdrawal-breakdown.js';
+export { WithdrawalsElement } from './withdrawals.js';
 import '@whop/embedded-components-vanilla-js/types';
 import 'react';

package/dist/payouts/elements/index.js

@@ -15,7 +15,11 @@ var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "defau
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var elements_exports = {};
 module.exports = __toCommonJS(elements_exports);
+__reExport(elements_exports, require("./balance"), module.exports);
+__reExport(elements_exports, require("./change-account-country"), module.exports);
+__reExport(elements_exports, require("./reset-account"), module.exports);
 __reExport(elements_exports, require("./verify"), module.exports);
 __reExport(elements_exports, require("./withdraw-button"), module.exports);
-__reExport(elements_exports, require("./balance"), module.exports);
+__reExport(elements_exports, require("./withdrawal-breakdown"), module.exports);
+__reExport(elements_exports, require("./withdrawals"), module.exports);
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/payouts/elements/index.tsx"],"sourcesContent":["export * from \"./verify\";\nexport * from \"./withdraw-button\";\nexport * from \"./balance\";\n"],"mappings":";;;;;;;;;;;;;;;AAAA;AAAA;AAAA,6BAAc,qBAAd;AACA,6BAAc,8BADd;AAEA,6BAAc,sBAFd;","names":[]}
+{"version":3,"sources":["../../../src/payouts/elements/index.tsx"],"sourcesContent":["export * from \"./balance\";\nexport * from \"./change-account-country\";\nexport * from \"./reset-account\";\nexport * from \"./verify\";\nexport * from \"./withdraw-button\";\nexport * from \"./withdrawal-breakdown\";\nexport * from \"./withdrawals\";\n"],"mappings":";;;;;;;;;;;;;;;AAAA;AAAA;AAAA,6BAAc,sBAAd;AACA,6BAAc,qCADd;AAEA,6BAAc,4BAFd;AAGA,6BAAc,qBAHd;AAIA,6BAAc,8BAJd;AAKA,6BAAc,mCALd;AAMA,6BAAc,0BANd;","names":[]}

package/dist/payouts/elements/index.mjs

@@ -1,3 +1,7 @@
+export * from "./balance.mjs";
+export * from "./change-account-country.mjs";
+export * from "./reset-account.mjs";
 export * from "./verify.mjs";
 export * from "./withdraw-button.mjs";
-export * from "./balance.mjs";
+export * from "./withdrawal-breakdown.mjs";
+export * from "./withdrawals.mjs";

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/payouts/elements/index.tsx"],"sourcesContent":["export * from \"./verify\";\nexport * from \"./withdraw-button\";\nexport * from \"./balance\";\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;","names":[]}
+{"version":3,"sources":["../../../src/payouts/elements/index.tsx"],"sourcesContent":["export * from \"./balance\";\nexport * from \"./change-account-country\";\nexport * from \"./reset-account\";\nexport * from \"./verify\";\nexport * from \"./withdraw-button\";\nexport * from \"./withdrawal-breakdown\";\nexport * from \"./withdrawals\";\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;","names":[]}

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

@@ -0,0 +1,16 @@
+import { ResetAccountElementOptions } from '@whop/embedded-components-vanilla-js/types';
+import React__default from 'react';
+
+declare function ResetAccountElement({ options, className, style, onReady, fallback, }: {
+    options?: ResetAccountElementOptions;
+    className?: string;
+    style?: React__default.CSSProperties;
+    onReady?: () => void;
+    fallback?: React__default.ReactNode;
+}): React__default.JSX.Element;
+declare namespace ResetAccountElement {
+    var displayName: string;
+    var type: "reset-account-element";
+}
+
+export { ResetAccountElement };

package/dist/payouts/elements/reset-account.js

@@ -0,0 +1,86 @@
+"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 reset_account_exports = {};
+__export(reset_account_exports, {
+  ResetAccountElement: () => ResetAccountElement
+});
+module.exports = __toCommonJS(reset_account_exports);
+var import_react = __toESM(require("react"));
+var import_use_element_snapshot = require("../../lib/use-element-snapshot");
+var import_session = require("../session");
+function ResetAccountElement({
+  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;
+    const createdElement = payoutsSession.createElement(
+      ResetAccountElement,
+      options
+    );
+    return createdElement;
+  }, [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));
+}
+ResetAccountElement.displayName = "ResetAccountElement";
+ResetAccountElement.type = "reset-account-element";
+//# sourceMappingURL=reset-account.js.map

package/dist/payouts/elements/reset-account.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/payouts/elements/reset-account.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ResetAccountElementOptions } from \"@whop/embedded-components-vanilla-js/types\";\n\nimport React, { useEffect, useLayoutEffect, useMemo, useRef } from \"react\";\nimport { useElementSnapshot } from \"../../lib/use-element-snapshot\";\nimport { usePayoutsSession } from \"../session\";\n\nexport function ResetAccountElement({\n\toptions = {},\n\tclassName,\n\tstyle,\n\tonReady,\n\tfallback,\n}: {\n\toptions?: ResetAccountElementOptions;\n\tclassName?: string;\n\tstyle?: React.CSSProperties;\n\tonReady?: () => void;\n\tfallback?: React.ReactNode;\n}) {\n\tconst payoutsSession = usePayoutsSession();\n\tconst ref = useRef<HTMLDivElement>(null);\n\tconst element = useMemo(() => {\n\t\tif (!payoutsSession) return null;\n\t\tconst createdElement = payoutsSession.createElement(\n\t\t\tResetAccountElement,\n\t\t\toptions,\n\t\t);\n\t\treturn createdElement;\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [payoutsSession]);\n\n\tconst elementSnapshot = useElementSnapshot(element);\n\n\tconst isReady = elementSnapshot?.state === \"ready\";\n\n\tuseEffect(() => {\n\t\tif (!element) return;\n\t\telement.updateOptions(options);\n\t}, [options, element]);\n\n\tuseEffect(() => {\n\t\tif (!element || !onReady) return;\n\t\telement.on(\"ready\", onReady);\n\t\treturn () => {\n\t\t\telement.off(\"ready\", onReady);\n\t\t};\n\t}, [element, onReady]);\n\n\tuseLayoutEffect(() => {\n\t\tif (!element || !ref.current) return;\n\t\telement.mount(ref.current);\n\t\treturn () => {\n\t\t\telement.unmount();\n\t\t};\n\t}, [element, ref.current]);\n\n\treturn (\n\t\t<>\n\t\t\t<div\n\t\t\t\tstyle={{ ...style, visibility: isReady ? undefined : \"hidden\" }}\n\t\t\t\tclassName={className}\n\t\t\t\tref={ref}\n\t\t\t/>\n\t\t\t{!isReady && (fallback ?? null)}\n\t\t</>\n\t);\n}\n\nResetAccountElement.displayName = \"ResetAccountElement\";\nResetAccountElement.type = \"reset-account-element\" as const;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA,mBAAmE;AACnE,kCAAmC;AACnC,qBAAkC;AAE3B,SAAS,oBAAoB;AAAA,EACnC,UAAU,CAAC;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAMG;AACF,QAAM,qBAAiB,kCAAkB;AACzC,QAAM,UAAM,qBAAuB,IAAI;AACvC,QAAM,cAAU,sBAAQ,MAAM;AAC7B,QAAI,CAAC,eAAgB,QAAO;AAC5B,UAAM,iBAAiB,eAAe;AAAA,MACrC;AAAA,MACA;AAAA,IACD;AACA,WAAO;AAAA,EAER,GAAG,CAAC,cAAc,CAAC;AAEnB,QAAM,sBAAkB,gDAAmB,OAAO;AAElD,QAAM,UAAU,iBAAiB,UAAU;AAE3C,8BAAU,MAAM;AACf,QAAI,CAAC,QAAS;AACd,YAAQ,cAAc,OAAO;AAAA,EAC9B,GAAG,CAAC,SAAS,OAAO,CAAC;AAErB,8BAAU,MAAM;AACf,QAAI,CAAC,WAAW,CAAC,QAAS;AAC1B,YAAQ,GAAG,SAAS,OAAO;AAC3B,WAAO,MAAM;AACZ,cAAQ,IAAI,SAAS,OAAO;AAAA,IAC7B;AAAA,EACD,GAAG,CAAC,SAAS,OAAO,CAAC;AAErB,oCAAgB,MAAM;AACrB,QAAI,CAAC,WAAW,CAAC,IAAI,QAAS;AAC9B,YAAQ,MAAM,IAAI,OAAO;AACzB,WAAO,MAAM;AACZ,cAAQ,QAAQ;AAAA,IACjB;AAAA,EACD,GAAG,CAAC,SAAS,IAAI,OAAO,CAAC;AAEzB,SACC,6BAAAA,QAAA,2BAAAA,QAAA,gBACC,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACA,OAAO,EAAE,GAAG,OAAO,YAAY,UAAU,SAAY,SAAS;AAAA,MAC9D;AAAA,MACA;AAAA;AAAA,EACD,GACC,CAAC,YAAY,YAAY,KAC3B;AAEF;AAEA,oBAAoB,cAAc;AAClC,oBAAoB,OAAO;","names":["React"]}

package/dist/payouts/elements/reset-account.mjs

@@ -0,0 +1,56 @@
+"use client";
+import "../../chunk-NSSMTXJJ.mjs";
+import React, { useEffect, useLayoutEffect, useMemo, useRef } from "react";
+import { useElementSnapshot } from "../../lib/use-element-snapshot.mjs";
+import { usePayoutsSession } from "../session.mjs";
+function ResetAccountElement({ options = {}, className, style, onReady, fallback }) {
+    const payoutsSession = usePayoutsSession();
+    const ref = useRef(null);
+    const element = useMemo(()=>{
+        if (!payoutsSession) return null;
+        const createdElement = payoutsSession.createElement(ResetAccountElement, options);
+        return createdElement;
+    }, [
+        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));
+}
+ResetAccountElement.displayName = "ResetAccountElement";
+ResetAccountElement.type = "reset-account-element";
+export { ResetAccountElement };

package/dist/payouts/elements/reset-account.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/payouts/elements/reset-account.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ResetAccountElementOptions } from \"@whop/embedded-components-vanilla-js/types\";\n\nimport React, { useEffect, useLayoutEffect, useMemo, useRef } from \"react\";\nimport { useElementSnapshot } from \"../../lib/use-element-snapshot\";\nimport { usePayoutsSession } from \"../session\";\n\nexport function ResetAccountElement({\n\toptions = {},\n\tclassName,\n\tstyle,\n\tonReady,\n\tfallback,\n}: {\n\toptions?: ResetAccountElementOptions;\n\tclassName?: string;\n\tstyle?: React.CSSProperties;\n\tonReady?: () => void;\n\tfallback?: React.ReactNode;\n}) {\n\tconst payoutsSession = usePayoutsSession();\n\tconst ref = useRef<HTMLDivElement>(null);\n\tconst element = useMemo(() => {\n\t\tif (!payoutsSession) return null;\n\t\tconst createdElement = payoutsSession.createElement(\n\t\t\tResetAccountElement,\n\t\t\toptions,\n\t\t);\n\t\treturn createdElement;\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [payoutsSession]);\n\n\tconst elementSnapshot = useElementSnapshot(element);\n\n\tconst isReady = elementSnapshot?.state === \"ready\";\n\n\tuseEffect(() => {\n\t\tif (!element) return;\n\t\telement.updateOptions(options);\n\t}, [options, element]);\n\n\tuseEffect(() => {\n\t\tif (!element || !onReady) return;\n\t\telement.on(\"ready\", onReady);\n\t\treturn () => {\n\t\t\telement.off(\"ready\", onReady);\n\t\t};\n\t}, [element, onReady]);\n\n\tuseLayoutEffect(() => {\n\t\tif (!element || !ref.current) return;\n\t\telement.mount(ref.current);\n\t\treturn () => {\n\t\t\telement.unmount();\n\t\t};\n\t}, [element, ref.current]);\n\n\treturn (\n\t\t<>\n\t\t\t<div\n\t\t\t\tstyle={{ ...style, visibility: isReady ? undefined : \"hidden\" }}\n\t\t\t\tclassName={className}\n\t\t\t\tref={ref}\n\t\t\t/>\n\t\t\t{!isReady && (fallback ?? null)}\n\t\t</>\n\t);\n}\n\nResetAccountElement.displayName = \"ResetAccountElement\";\nResetAccountElement.type = \"reset-account-element\" as const;\n"],"mappings":";;AAIA,OAAO,SAAS,WAAW,iBAAiB,SAAS,cAAc;AACnE,SAAS,0BAA0B;AACnC,SAAS,yBAAyB;AAE3B,SAAS,oBAAoB;AAAA,EACnC,UAAU,CAAC;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAMG;AACF,QAAM,iBAAiB,kBAAkB;AACzC,QAAM,MAAM,OAAuB,IAAI;AACvC,QAAM,UAAU,QAAQ,MAAM;AAC7B,QAAI,CAAC,eAAgB,QAAO;AAC5B,UAAM,iBAAiB,eAAe;AAAA,MACrC;AAAA,MACA;AAAA,IACD;AACA,WAAO;AAAA,EAER,GAAG,CAAC,cAAc,CAAC;AAEnB,QAAM,kBAAkB,mBAAmB,OAAO;AAElD,QAAM,UAAU,iBAAiB,UAAU;AAE3C,YAAU,MAAM;AACf,QAAI,CAAC,QAAS;AACd,YAAQ,cAAc,OAAO;AAAA,EAC9B,GAAG,CAAC,SAAS,OAAO,CAAC;AAErB,YAAU,MAAM;AACf,QAAI,CAAC,WAAW,CAAC,QAAS;AAC1B,YAAQ,GAAG,SAAS,OAAO;AAC3B,WAAO,MAAM;AACZ,cAAQ,IAAI,SAAS,OAAO;AAAA,IAC7B;AAAA,EACD,GAAG,CAAC,SAAS,OAAO,CAAC;AAErB,kBAAgB,MAAM;AACrB,QAAI,CAAC,WAAW,CAAC,IAAI,QAAS;AAC9B,YAAQ,MAAM,IAAI,OAAO;AACzB,WAAO,MAAM;AACZ,cAAQ,QAAQ;AAAA,IACjB;AAAA,EACD,GAAG,CAAC,SAAS,IAAI,OAAO,CAAC;AAEzB,SACC,0DACC;AAAA,IAAC;AAAA;AAAA,MACA,OAAO,EAAE,GAAG,OAAO,YAAY,UAAU,SAAY,SAAS;AAAA,MAC9D;AAAA,MACA;AAAA;AAAA,EACD,GACC,CAAC,YAAY,YAAY,KAC3B;AAEF;AAEA,oBAAoB,cAAc;AAClC,oBAAoB,OAAO;","names":[]}

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

@@ -1,13 +1,13 @@
 import { VerifyElementOptions } from '@whop/embedded-components-vanilla-js/types';
-import React from 'react';
+import React__default from 'react';
 
 declare function VerifyElement({ options, className, style, onReady, fallback, }: {
     options?: VerifyElementOptions;
     className?: string;
-    style?: React.CSSProperties;
+    style?: React__default.CSSProperties;
     onReady?: () => void;
-    fallback?: React.ReactNode;
-}): React.JSX.Element;
+    fallback?: React__default.ReactNode;
+}): React__default.JSX.Element;
 declare namespace VerifyElement {
     var displayName: string;
     var type: "verify-element";

package/dist/payouts/elements/verify.js

@@ -72,7 +72,7 @@ function VerifyElement({
   return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
     "div",
     {
-      style: { ...style, visibility: isReady ? "visible" : "hidden" },
+      style: { ...style, visibility: isReady ? void 0 : "hidden" },
       className,
       ref
     }

package/dist/payouts/elements/verify.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/payouts/elements/verify.tsx"],"sourcesContent":["\"use client\";\n\nimport type { VerifyElementOptions } from \"@whop/embedded-components-vanilla-js/types\";\n\nimport React, { useEffect, useLayoutEffect, useMemo, useRef } from \"react\";\nimport { useElementSnapshot } from \"../../lib/use-element-snapshot\";\nimport { usePayoutsSession } from \"../session\";\n\nexport function VerifyElement({\n\toptions = {},\n\tclassName,\n\tstyle,\n\tonReady,\n\tfallback,\n}: {\n\toptions?: VerifyElementOptions;\n\tclassName?: string;\n\tstyle?: React.CSSProperties;\n\tonReady?: () => void;\n\tfallback?: React.ReactNode;\n}) {\n\tconst payoutsSession = usePayoutsSession();\n\tconst ref = useRef<HTMLDivElement>(null);\n\tconst element = useMemo(() => {\n\t\tif (!payoutsSession) return null;\n\t\tconst createdElement = payoutsSession.createElement(VerifyElement, options);\n\t\treturn createdElement;\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [payoutsSession]);\n\n\tconst elementSnapshot = useElementSnapshot(element);\n\n\tconst isReady = elementSnapshot?.state === \"ready\";\n\n\tuseEffect(() => {\n\t\tif (!element) return;\n\t\telement.updateOptions(options);\n\t}, [options, element]);\n\n\tuseEffect(() => {\n\t\tif (!element || !onReady) return;\n\t\telement.on(\"ready\", onReady);\n\t\treturn () => {\n\t\t\telement.off(\"ready\", onReady);\n\t\t};\n\t}, [element, onReady]);\n\n\tuseLayoutEffect(() => {\n\t\tif (!element || !ref.current) return;\n\t\telement.mount(ref.current);\n\t\treturn () => {\n\t\t\telement.unmount();\n\t\t};\n\t}, [element, ref.current]);\n\n\treturn (\n\t\t<>\n\t\t\t<div\n\t\t\t\tstyle={{ ...style, visibility: isReady ? \"visible\" : \"hidden\" }}\n\t\t\t\tclassName={className}\n\t\t\t\tref={ref}\n\t\t\t/>\n\t\t\t{!isReady && (fallback ?? null)}\n\t\t</>\n\t);\n}\n\nVerifyElement.displayName = \"VerifyElement\";\nVerifyElement.type = \"verify-element\" as const;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA,mBAAmE;AACnE,kCAAmC;AACnC,qBAAkC;AAE3B,SAAS,cAAc;AAAA,EAC7B,UAAU,CAAC;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAMG;AACF,QAAM,qBAAiB,kCAAkB;AACzC,QAAM,UAAM,qBAAuB,IAAI;AACvC,QAAM,cAAU,sBAAQ,MAAM;AAC7B,QAAI,CAAC,eAAgB,QAAO;AAC5B,UAAM,iBAAiB,eAAe,cAAc,eAAe,OAAO;AAC1E,WAAO;AAAA,EAER,GAAG,CAAC,cAAc,CAAC;AAEnB,QAAM,sBAAkB,gDAAmB,OAAO;AAElD,QAAM,UAAU,iBAAiB,UAAU;AAE3C,8BAAU,MAAM;AACf,QAAI,CAAC,QAAS;AACd,YAAQ,cAAc,OAAO;AAAA,EAC9B,GAAG,CAAC,SAAS,OAAO,CAAC;AAErB,8BAAU,MAAM;AACf,QAAI,CAAC,WAAW,CAAC,QAAS;AAC1B,YAAQ,GAAG,SAAS,OAAO;AAC3B,WAAO,MAAM;AACZ,cAAQ,IAAI,SAAS,OAAO;AAAA,IAC7B;AAAA,EACD,GAAG,CAAC,SAAS,OAAO,CAAC;AAErB,oCAAgB,MAAM;AACrB,QAAI,CAAC,WAAW,CAAC,IAAI,QAAS;AAC9B,YAAQ,MAAM,IAAI,OAAO;AACzB,WAAO,MAAM;AACZ,cAAQ,QAAQ;AAAA,IACjB;AAAA,EACD,GAAG,CAAC,SAAS,IAAI,OAAO,CAAC;AAEzB,SACC,6BAAAA,QAAA,2BAAAA,QAAA,gBACC,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACA,OAAO,EAAE,GAAG,OAAO,YAAY,UAAU,YAAY,SAAS;AAAA,MAC9D;AAAA,MACA;AAAA;AAAA,EACD,GACC,CAAC,YAAY,YAAY,KAC3B;AAEF;AAEA,cAAc,cAAc;AAC5B,cAAc,OAAO;","names":["React"]}
+{"version":3,"sources":["../../../src/payouts/elements/verify.tsx"],"sourcesContent":["\"use client\";\n\nimport type { VerifyElementOptions } from \"@whop/embedded-components-vanilla-js/types\";\n\nimport React, { useEffect, useLayoutEffect, useMemo, useRef } from \"react\";\nimport { useElementSnapshot } from \"../../lib/use-element-snapshot\";\nimport { usePayoutsSession } from \"../session\";\n\nexport function VerifyElement({\n\toptions = {},\n\tclassName,\n\tstyle,\n\tonReady,\n\tfallback,\n}: {\n\toptions?: VerifyElementOptions;\n\tclassName?: string;\n\tstyle?: React.CSSProperties;\n\tonReady?: () => void;\n\tfallback?: React.ReactNode;\n}) {\n\tconst payoutsSession = usePayoutsSession();\n\tconst ref = useRef<HTMLDivElement>(null);\n\tconst element = useMemo(() => {\n\t\tif (!payoutsSession) return null;\n\t\tconst createdElement = payoutsSession.createElement(VerifyElement, options);\n\t\treturn createdElement;\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [payoutsSession]);\n\n\tconst elementSnapshot = useElementSnapshot(element);\n\n\tconst isReady = elementSnapshot?.state === \"ready\";\n\n\tuseEffect(() => {\n\t\tif (!element) return;\n\t\telement.updateOptions(options);\n\t}, [options, element]);\n\n\tuseEffect(() => {\n\t\tif (!element || !onReady) return;\n\t\telement.on(\"ready\", onReady);\n\t\treturn () => {\n\t\t\telement.off(\"ready\", onReady);\n\t\t};\n\t}, [element, onReady]);\n\n\tuseLayoutEffect(() => {\n\t\tif (!element || !ref.current) return;\n\t\telement.mount(ref.current);\n\t\treturn () => {\n\t\t\telement.unmount();\n\t\t};\n\t}, [element, ref.current]);\n\n\treturn (\n\t\t<>\n\t\t\t<div\n\t\t\t\tstyle={{ ...style, visibility: isReady ? undefined : \"hidden\" }}\n\t\t\t\tclassName={className}\n\t\t\t\tref={ref}\n\t\t\t/>\n\t\t\t{!isReady && (fallback ?? null)}\n\t\t</>\n\t);\n}\n\nVerifyElement.displayName = \"VerifyElement\";\nVerifyElement.type = \"verify-element\" as const;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA,mBAAmE;AACnE,kCAAmC;AACnC,qBAAkC;AAE3B,SAAS,cAAc;AAAA,EAC7B,UAAU,CAAC;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAMG;AACF,QAAM,qBAAiB,kCAAkB;AACzC,QAAM,UAAM,qBAAuB,IAAI;AACvC,QAAM,cAAU,sBAAQ,MAAM;AAC7B,QAAI,CAAC,eAAgB,QAAO;AAC5B,UAAM,iBAAiB,eAAe,cAAc,eAAe,OAAO;AAC1E,WAAO;AAAA,EAER,GAAG,CAAC,cAAc,CAAC;AAEnB,QAAM,sBAAkB,gDAAmB,OAAO;AAElD,QAAM,UAAU,iBAAiB,UAAU;AAE3C,8BAAU,MAAM;AACf,QAAI,CAAC,QAAS;AACd,YAAQ,cAAc,OAAO;AAAA,EAC9B,GAAG,CAAC,SAAS,OAAO,CAAC;AAErB,8BAAU,MAAM;AACf,QAAI,CAAC,WAAW,CAAC,QAAS;AAC1B,YAAQ,GAAG,SAAS,OAAO;AAC3B,WAAO,MAAM;AACZ,cAAQ,IAAI,SAAS,OAAO;AAAA,IAC7B;AAAA,EACD,GAAG,CAAC,SAAS,OAAO,CAAC;AAErB,oCAAgB,MAAM;AACrB,QAAI,CAAC,WAAW,CAAC,IAAI,QAAS;AAC9B,YAAQ,MAAM,IAAI,OAAO;AACzB,WAAO,MAAM;AACZ,cAAQ,QAAQ;AAAA,IACjB;AAAA,EACD,GAAG,CAAC,SAAS,IAAI,OAAO,CAAC;AAEzB,SACC,6BAAAA,QAAA,2BAAAA,QAAA,gBACC,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACA,OAAO,EAAE,GAAG,OAAO,YAAY,UAAU,SAAY,SAAS;AAAA,MAC9D;AAAA,MACA;AAAA;AAAA,EACD,GACC,CAAC,YAAY,YAAY,KAC3B;AAEF;AAEA,cAAc,cAAc;AAC5B,cAAc,OAAO;","names":["React"]}

package/dist/payouts/elements/verify.mjs

@@ -45,7 +45,7 @@ function VerifyElement({ options = {}, className, style, onReady, fallback }) {
     return React.createElement(React.Fragment, null, React.createElement("div", {
         style: {
             ...style,
-            visibility: isReady ? "visible" : "hidden"
+            visibility: isReady ? void 0 : "hidden"
         },
         className,
         ref

package/dist/payouts/elements/verify.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/payouts/elements/verify.tsx"],"sourcesContent":["\"use client\";\n\nimport type { VerifyElementOptions } from \"@whop/embedded-components-vanilla-js/types\";\n\nimport React, { useEffect, useLayoutEffect, useMemo, useRef } from \"react\";\nimport { useElementSnapshot } from \"../../lib/use-element-snapshot\";\nimport { usePayoutsSession } from \"../session\";\n\nexport function VerifyElement({\n\toptions = {},\n\tclassName,\n\tstyle,\n\tonReady,\n\tfallback,\n}: {\n\toptions?: VerifyElementOptions;\n\tclassName?: string;\n\tstyle?: React.CSSProperties;\n\tonReady?: () => void;\n\tfallback?: React.ReactNode;\n}) {\n\tconst payoutsSession = usePayoutsSession();\n\tconst ref = useRef<HTMLDivElement>(null);\n\tconst element = useMemo(() => {\n\t\tif (!payoutsSession) return null;\n\t\tconst createdElement = payoutsSession.createElement(VerifyElement, options);\n\t\treturn createdElement;\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [payoutsSession]);\n\n\tconst elementSnapshot = useElementSnapshot(element);\n\n\tconst isReady = elementSnapshot?.state === \"ready\";\n\n\tuseEffect(() => {\n\t\tif (!element) return;\n\t\telement.updateOptions(options);\n\t}, [options, element]);\n\n\tuseEffect(() => {\n\t\tif (!element || !onReady) return;\n\t\telement.on(\"ready\", onReady);\n\t\treturn () => {\n\t\t\telement.off(\"ready\", onReady);\n\t\t};\n\t}, [element, onReady]);\n\n\tuseLayoutEffect(() => {\n\t\tif (!element || !ref.current) return;\n\t\telement.mount(ref.current);\n\t\treturn () => {\n\t\t\telement.unmount();\n\t\t};\n\t}, [element, ref.current]);\n\n\treturn (\n\t\t<>\n\t\t\t<div\n\t\t\t\tstyle={{ ...style, visibility: isReady ? \"visible\" : \"hidden\" }}\n\t\t\t\tclassName={className}\n\t\t\t\tref={ref}\n\t\t\t/>\n\t\t\t{!isReady && (fallback ?? null)}\n\t\t</>\n\t);\n}\n\nVerifyElement.displayName = \"VerifyElement\";\nVerifyElement.type = \"verify-element\" as const;\n"],"mappings":";;AAIA,OAAO,SAAS,WAAW,iBAAiB,SAAS,cAAc;AACnE,SAAS,0BAA0B;AACnC,SAAS,yBAAyB;AAE3B,SAAS,cAAc;AAAA,EAC7B,UAAU,CAAC;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAMG;AACF,QAAM,iBAAiB,kBAAkB;AACzC,QAAM,MAAM,OAAuB,IAAI;AACvC,QAAM,UAAU,QAAQ,MAAM;AAC7B,QAAI,CAAC,eAAgB,QAAO;AAC5B,UAAM,iBAAiB,eAAe,cAAc,eAAe,OAAO;AAC1E,WAAO;AAAA,EAER,GAAG,CAAC,cAAc,CAAC;AAEnB,QAAM,kBAAkB,mBAAmB,OAAO;AAElD,QAAM,UAAU,iBAAiB,UAAU;AAE3C,YAAU,MAAM;AACf,QAAI,CAAC,QAAS;AACd,YAAQ,cAAc,OAAO;AAAA,EAC9B,GAAG,CAAC,SAAS,OAAO,CAAC;AAErB,YAAU,MAAM;AACf,QAAI,CAAC,WAAW,CAAC,QAAS;AAC1B,YAAQ,GAAG,SAAS,OAAO;AAC3B,WAAO,MAAM;AACZ,cAAQ,IAAI,SAAS,OAAO;AAAA,IAC7B;AAAA,EACD,GAAG,CAAC,SAAS,OAAO,CAAC;AAErB,kBAAgB,MAAM;AACrB,QAAI,CAAC,WAAW,CAAC,IAAI,QAAS;AAC9B,YAAQ,MAAM,IAAI,OAAO;AACzB,WAAO,MAAM;AACZ,cAAQ,QAAQ;AAAA,IACjB;AAAA,EACD,GAAG,CAAC,SAAS,IAAI,OAAO,CAAC;AAEzB,SACC,0DACC;AAAA,IAAC;AAAA;AAAA,MACA,OAAO,EAAE,GAAG,OAAO,YAAY,UAAU,YAAY,SAAS;AAAA,MAC9D;AAAA,MACA;AAAA;AAAA,EACD,GACC,CAAC,YAAY,YAAY,KAC3B;AAEF;AAEA,cAAc,cAAc;AAC5B,cAAc,OAAO;","names":[]}
+{"version":3,"sources":["../../../src/payouts/elements/verify.tsx"],"sourcesContent":["\"use client\";\n\nimport type { VerifyElementOptions } from \"@whop/embedded-components-vanilla-js/types\";\n\nimport React, { useEffect, useLayoutEffect, useMemo, useRef } from \"react\";\nimport { useElementSnapshot } from \"../../lib/use-element-snapshot\";\nimport { usePayoutsSession } from \"../session\";\n\nexport function VerifyElement({\n\toptions = {},\n\tclassName,\n\tstyle,\n\tonReady,\n\tfallback,\n}: {\n\toptions?: VerifyElementOptions;\n\tclassName?: string;\n\tstyle?: React.CSSProperties;\n\tonReady?: () => void;\n\tfallback?: React.ReactNode;\n}) {\n\tconst payoutsSession = usePayoutsSession();\n\tconst ref = useRef<HTMLDivElement>(null);\n\tconst element = useMemo(() => {\n\t\tif (!payoutsSession) return null;\n\t\tconst createdElement = payoutsSession.createElement(VerifyElement, options);\n\t\treturn createdElement;\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [payoutsSession]);\n\n\tconst elementSnapshot = useElementSnapshot(element);\n\n\tconst isReady = elementSnapshot?.state === \"ready\";\n\n\tuseEffect(() => {\n\t\tif (!element) return;\n\t\telement.updateOptions(options);\n\t}, [options, element]);\n\n\tuseEffect(() => {\n\t\tif (!element || !onReady) return;\n\t\telement.on(\"ready\", onReady);\n\t\treturn () => {\n\t\t\telement.off(\"ready\", onReady);\n\t\t};\n\t}, [element, onReady]);\n\n\tuseLayoutEffect(() => {\n\t\tif (!element || !ref.current) return;\n\t\telement.mount(ref.current);\n\t\treturn () => {\n\t\t\telement.unmount();\n\t\t};\n\t}, [element, ref.current]);\n\n\treturn (\n\t\t<>\n\t\t\t<div\n\t\t\t\tstyle={{ ...style, visibility: isReady ? undefined : \"hidden\" }}\n\t\t\t\tclassName={className}\n\t\t\t\tref={ref}\n\t\t\t/>\n\t\t\t{!isReady && (fallback ?? null)}\n\t\t</>\n\t);\n}\n\nVerifyElement.displayName = \"VerifyElement\";\nVerifyElement.type = \"verify-element\" as const;\n"],"mappings":";;AAIA,OAAO,SAAS,WAAW,iBAAiB,SAAS,cAAc;AACnE,SAAS,0BAA0B;AACnC,SAAS,yBAAyB;AAE3B,SAAS,cAAc;AAAA,EAC7B,UAAU,CAAC;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAMG;AACF,QAAM,iBAAiB,kBAAkB;AACzC,QAAM,MAAM,OAAuB,IAAI;AACvC,QAAM,UAAU,QAAQ,MAAM;AAC7B,QAAI,CAAC,eAAgB,QAAO;AAC5B,UAAM,iBAAiB,eAAe,cAAc,eAAe,OAAO;AAC1E,WAAO;AAAA,EAER,GAAG,CAAC,cAAc,CAAC;AAEnB,QAAM,kBAAkB,mBAAmB,OAAO;AAElD,QAAM,UAAU,iBAAiB,UAAU;AAE3C,YAAU,MAAM;AACf,QAAI,CAAC,QAAS;AACd,YAAQ,cAAc,OAAO;AAAA,EAC9B,GAAG,CAAC,SAAS,OAAO,CAAC;AAErB,YAAU,MAAM;AACf,QAAI,CAAC,WAAW,CAAC,QAAS;AAC1B,YAAQ,GAAG,SAAS,OAAO;AAC3B,WAAO,MAAM;AACZ,cAAQ,IAAI,SAAS,OAAO;AAAA,IAC7B;AAAA,EACD,GAAG,CAAC,SAAS,OAAO,CAAC;AAErB,kBAAgB,MAAM;AACrB,QAAI,CAAC,WAAW,CAAC,IAAI,QAAS;AAC9B,YAAQ,MAAM,IAAI,OAAO;AACzB,WAAO,MAAM;AACZ,cAAQ,QAAQ;AAAA,IACjB;AAAA,EACD,GAAG,CAAC,SAAS,IAAI,OAAO,CAAC;AAEzB,SACC,0DACC;AAAA,IAAC;AAAA;AAAA,MACA,OAAO,EAAE,GAAG,OAAO,YAAY,UAAU,SAAY,SAAS;AAAA,MAC9D;AAAA,MACA;AAAA;AAAA,EACD,GACC,CAAC,YAAY,YAAY,KAC3B;AAEF;AAEA,cAAc,cAAc;AAC5B,cAAc,OAAO;","names":[]}