@whop/embedded-components-react-js 0.0.5-beta.2 → 0.0.5-beta.21

package/dist/payouts/elements/withdrawal-breakdown.js

@@ -1,10 +1,8 @@
 "use strict";
 "use client";
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -18,69 +16,15 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var withdrawal_breakdown_exports = {};
 __export(withdrawal_breakdown_exports, {
   WithdrawalBreakdownElement: () => WithdrawalBreakdownElement
 });
 module.exports = __toCommonJS(withdrawal_breakdown_exports);
-var import_react = __toESM(require("react"));
-var import_use_element_snapshot = require("../../lib/use-element-snapshot");
-var import_session = require("../session");
-function WithdrawalBreakdownElement({
-  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(
-      WithdrawalBreakdownElement,
-      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));
-}
-WithdrawalBreakdownElement.displayName = "WithdrawalBreakdownElement";
-WithdrawalBreakdownElement.type = "withdrawal-breakdown-element";
+var import_with_fallback = require("../../lib/with-fallback");
+const WithdrawalBreakdownElement = (0, import_with_fallback.withFallback)({
+  displayName: "WithdrawalBreakdownElement",
+  type: "withdrawal-breakdown-element"
+});
 //# sourceMappingURL=withdrawal-breakdown.js.map

package/dist/payouts/elements/withdrawal-breakdown.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/payouts/elements/withdrawal-breakdown.tsx"],"sourcesContent":["\"use client\";\n\nimport type { WithdrawalBreakdownElementOptions } 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 WithdrawalBreakdownElement({\n\toptions,\n\tclassName,\n\tstyle,\n\tonReady,\n\tfallback,\n}: {\n\toptions: WithdrawalBreakdownElementOptions;\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\tWithdrawalBreakdownElement,\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\nWithdrawalBreakdownElement.displayName = \"WithdrawalBreakdownElement\";\nWithdrawalBreakdownElement.type = \"withdrawal-breakdown-element\" as const;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA,mBAAmE;AACnE,kCAAmC;AACnC,qBAAkC;AAE3B,SAAS,2BAA2B;AAAA,EAC1C;AAAA,EACA;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,2BAA2B,cAAc;AACzC,2BAA2B,OAAO;","names":["React"]}
+{"version":3,"sources":["../../../src/payouts/elements/withdrawal-breakdown.tsx"],"sourcesContent":["\"use client\";\n\nimport { withFallback } from \"../../lib/with-fallback\";\n\nexport const WithdrawalBreakdownElement = withFallback<\n\t\"withdrawal-breakdown-element\",\n\ttrue\n>({\n\tdisplayName: \"WithdrawalBreakdownElement\",\n\ttype: \"withdrawal-breakdown-element\",\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,2BAA6B;AAEtB,MAAM,iCAA6B,mCAGxC;AAAA,EACD,aAAa;AAAA,EACb,MAAM;AACP,CAAC;","names":[]}

package/dist/payouts/elements/withdrawal-breakdown.mjs

@@ -1,56 +1,8 @@
 "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 WithdrawalBreakdownElement({ options, className, style, onReady, fallback }) {
-    const payoutsSession = usePayoutsSession();
-    const ref = useRef(null);
-    const element = useMemo(()=>{
-        if (!payoutsSession) return null;
-        const createdElement = payoutsSession.createElement(WithdrawalBreakdownElement, 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));
-}
-WithdrawalBreakdownElement.displayName = "WithdrawalBreakdownElement";
-WithdrawalBreakdownElement.type = "withdrawal-breakdown-element";
+import { withFallback } from "../../lib/with-fallback.mjs";
+const WithdrawalBreakdownElement = withFallback({
+    displayName: "WithdrawalBreakdownElement",
+    type: "withdrawal-breakdown-element"
+});
 export { WithdrawalBreakdownElement };

package/dist/payouts/elements/withdrawal-breakdown.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/payouts/elements/withdrawal-breakdown.tsx"],"sourcesContent":["\"use client\";\n\nimport type { WithdrawalBreakdownElementOptions } 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 WithdrawalBreakdownElement({\n\toptions,\n\tclassName,\n\tstyle,\n\tonReady,\n\tfallback,\n}: {\n\toptions: WithdrawalBreakdownElementOptions;\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\tWithdrawalBreakdownElement,\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\nWithdrawalBreakdownElement.displayName = \"WithdrawalBreakdownElement\";\nWithdrawalBreakdownElement.type = \"withdrawal-breakdown-element\" as const;\n"],"mappings":";;AAIA,OAAO,SAAS,WAAW,iBAAiB,SAAS,cAAc;AACnE,SAAS,0BAA0B;AACnC,SAAS,yBAAyB;AAE3B,SAAS,2BAA2B;AAAA,EAC1C;AAAA,EACA;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,2BAA2B,cAAc;AACzC,2BAA2B,OAAO;","names":[]}
+{"version":3,"sources":["../../../src/payouts/elements/withdrawal-breakdown.tsx"],"sourcesContent":["\"use client\";\n\nimport { withFallback } from \"../../lib/with-fallback\";\n\nexport const WithdrawalBreakdownElement = withFallback<\n\t\"withdrawal-breakdown-element\",\n\ttrue\n>({\n\tdisplayName: \"WithdrawalBreakdownElement\",\n\ttype: \"withdrawal-breakdown-element\",\n});\n"],"mappings":";;AAEA,SAAS,oBAAoB;AAEtB,MAAM,6BAA6B,aAGxC;AAAA,EACD,aAAa;AAAA,EACb,MAAM;AACP,CAAC;","names":[]}

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

@@ -1,16 +1,11 @@
-import { WithdrawalsElementOptions } from '@whop/embedded-components-vanilla-js/types';
-import React__default from 'react';
+import { WithFallbackPropsOptional } from '../../lib/with-fallback.js';
+import * as _whop_embedded_components_vanilla_js_types from '@whop/embedded-components-vanilla-js/types';
+import 'react';
 
-declare function WithdrawalsElement({ options, className, style, onReady, fallback, }: {
-    options?: WithdrawalsElementOptions;
-    className?: string;
-    style?: React__default.CSSProperties;
-    onReady?: () => void;
-    fallback?: React__default.ReactNode;
-}): React__default.JSX.Element;
-declare namespace WithdrawalsElement {
-    var displayName: string;
-    var type: "withdrawals-element";
-}
+declare const WithdrawalsElement: {
+    (props: WithFallbackPropsOptional<_whop_embedded_components_vanilla_js_types.WithdrawalsElementOptions>): React.ReactNode;
+    displayName: string;
+    type: string;
+};
 
 export { WithdrawalsElement };

package/dist/payouts/elements/withdrawals.js

@@ -1,10 +1,8 @@
 "use strict";
 "use client";
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -18,69 +16,15 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var withdrawals_exports = {};
 __export(withdrawals_exports, {
   WithdrawalsElement: () => WithdrawalsElement
 });
 module.exports = __toCommonJS(withdrawals_exports);
-var import_react = __toESM(require("react"));
-var import_use_element_snapshot = require("../../lib/use-element-snapshot");
-var import_session = require("../session");
-function WithdrawalsElement({
-  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(
-      WithdrawalsElement,
-      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));
-}
-WithdrawalsElement.displayName = "WithdrawalsElement";
-WithdrawalsElement.type = "withdrawals-element";
+var import_with_fallback = require("../../lib/with-fallback");
+const WithdrawalsElement = (0, import_with_fallback.withFallback)({
+  displayName: "WithdrawalsElement",
+  type: "withdrawals-element"
+});
 //# sourceMappingURL=withdrawals.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/payouts/elements/withdrawals.tsx"],"sourcesContent":["\"use client\";\n\nimport type { WithdrawalsElementOptions } 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 WithdrawalsElement({\n\toptions = {},\n\tclassName,\n\tstyle,\n\tonReady,\n\tfallback,\n}: {\n\toptions?: WithdrawalsElementOptions;\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\tWithdrawalsElement,\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\nWithdrawalsElement.displayName = \"WithdrawalsElement\";\nWithdrawalsElement.type = \"withdrawals-element\" as const;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA,mBAAmE;AACnE,kCAAmC;AACnC,qBAAkC;AAE3B,SAAS,mBAAmB;AAAA,EAClC,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,mBAAmB,cAAc;AACjC,mBAAmB,OAAO;","names":["React"]}
+{"version":3,"sources":["../../../src/payouts/elements/withdrawals.tsx"],"sourcesContent":["\"use client\";\n\nimport { withFallback } from \"../../lib/with-fallback\";\n\nexport const WithdrawalsElement = withFallback({\n\tdisplayName: \"WithdrawalsElement\",\n\ttype: \"withdrawals-element\",\n} as const);\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,2BAA6B;AAEtB,MAAM,yBAAqB,mCAAa;AAAA,EAC9C,aAAa;AAAA,EACb,MAAM;AACP,CAAU;","names":[]}

package/dist/payouts/elements/withdrawals.mjs

@@ -1,56 +1,8 @@
 "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 WithdrawalsElement({ options = {}, className, style, onReady, fallback }) {
-    const payoutsSession = usePayoutsSession();
-    const ref = useRef(null);
-    const element = useMemo(()=>{
-        if (!payoutsSession) return null;
-        const createdElement = payoutsSession.createElement(WithdrawalsElement, 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));
-}
-WithdrawalsElement.displayName = "WithdrawalsElement";
-WithdrawalsElement.type = "withdrawals-element";
+import { withFallback } from "../../lib/with-fallback.mjs";
+const WithdrawalsElement = withFallback({
+    displayName: "WithdrawalsElement",
+    type: "withdrawals-element"
+});
 export { WithdrawalsElement };

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/payouts/elements/withdrawals.tsx"],"sourcesContent":["\"use client\";\n\nimport type { WithdrawalsElementOptions } 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 WithdrawalsElement({\n\toptions = {},\n\tclassName,\n\tstyle,\n\tonReady,\n\tfallback,\n}: {\n\toptions?: WithdrawalsElementOptions;\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\tWithdrawalsElement,\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\nWithdrawalsElement.displayName = \"WithdrawalsElement\";\nWithdrawalsElement.type = \"withdrawals-element\" as const;\n"],"mappings":";;AAIA,OAAO,SAAS,WAAW,iBAAiB,SAAS,cAAc;AACnE,SAAS,0BAA0B;AACnC,SAAS,yBAAyB;AAE3B,SAAS,mBAAmB;AAAA,EAClC,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,mBAAmB,cAAc;AACjC,mBAAmB,OAAO;","names":[]}
+{"version":3,"sources":["../../../src/payouts/elements/withdrawals.tsx"],"sourcesContent":["\"use client\";\n\nimport { withFallback } from \"../../lib/with-fallback\";\n\nexport const WithdrawalsElement = withFallback({\n\tdisplayName: \"WithdrawalsElement\",\n\ttype: \"withdrawals-element\",\n} as const);\n"],"mappings":";;AAEA,SAAS,oBAAoB;AAEtB,MAAM,qBAAqB,aAAa;AAAA,EAC9C,aAAa;AAAA,EACb,MAAM;AACP,CAAU;","names":[]}

package/dist/payouts/index.d.ts

@@ -1,4 +1,6 @@
 export { PayoutsSession, usePayoutsSession } from './session.js';
+export { AddPayoutMethodElement } from './elements/add-payout-method.js';
+export { AutomaticWithdrawElement } from './elements/automatic-withdraw.js';
 export { BalanceElement } from './elements/balance.js';
 export { ChangeAccountCountryElement } from './elements/change-account-country.js';
 export { ResetAccountElement } from './elements/reset-account.js';
@@ -14,3 +16,4 @@ export { GenerateWithdrawalReceiptElement } from './elements/generate-withdrawal
 export { StatusBannerElement } from './elements/status-banner.js';
 import '@whop/embedded-components-vanilla-js/types';
 import 'react';
+import '../lib/with-fallback.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@whop/embedded-components-react-js",
-  "version": "0.0.5-beta.2",
+  "version": "0.0.5-beta.21",
   "description": "React components for Whop.js",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -21,7 +21,7 @@
     "access": "public"
   },
   "peerDependencies": {
-    "@whop/embedded-components-vanilla-js": "^0.0.5-beta.2",
+    "@whop/embedded-components-vanilla-js": "^0.0.5-beta.21",
     "react": ">=16.8.0 <20.0.0",
     "react-dom": ">=16.8.0 <20.0.0"
   }

package/package.json.temp

@@ -1,44 +0,0 @@
-{
-	"name": "@whop/embedded-components-react-js",
-	"private": true,
-	"version": "0.0.5-beta.2",
-	"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",
-	"scripts": {
-		"build": "rimraf dist && NODE_ENV=production tsup",
-		"dev": "NODE_ENV=development tsup --watch",
-		"prepublishOnly": "node ./scripts/pre-publish.mjs",
-		"postpublish": "node ./scripts/post-publish.mjs"
-	},
-	"keywords": ["Whop", "Whop.js", "React", "embedded", "payments", "payouts"],
-	"author": "Whop (https://whop.com)",
-	"license": "MIT",
-	"publishConfig": {
-		"access": "public"
-	},
-	"devDependencies": {
-		"@local/eslint-config": "workspace:*",
-		"@local/typescript-config": "workspace:*",
-		"@swc/core": "1.11.29",
-		"@types/node": "latest",
-		"@types/react": "^18.0.0",
-		"@types/react-dom": "^18.0.0",
-		"@whop/embedded-components-vanilla-js": "workspace:^",
-		"eslint": "latest",
-		"fast-glob": "^3.3.3",
-		"react": "18.1.0",
-		"react-dom": "18.1.0",
-		"rimraf": "^6.1.0",
-		"tsup": "latest",
-		"typescript": "latest"
-	},
-	"peerDependencies": {
-		"@whop/embedded-components-vanilla-js": "workspace:^",
-		"react": ">=16.8.0 <20.0.0",
-		"react-dom": ">=16.8.0 <20.0.0"
-	}
-}