@clerk/react 6.0.0-snapshot.v20251208202852 → 6.0.0-snapshot.v20251215203425

package/dist/experimental.js

@@ -31,24 +31,24 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var experimental_exports = {};
 __export(experimental_exports, {
   CheckoutButton: () => CheckoutButton,
-  CheckoutProvider: () => import_react22.__experimental_CheckoutProvider,
-  PaymentElement: () => import_react22.__experimental_PaymentElement,
-  PaymentElementProvider: () => import_react22.__experimental_PaymentElementProvider,
+  CheckoutProvider: () => import_react23.__experimental_CheckoutProvider,
+  PaymentElement: () => import_react23.__experimental_PaymentElement,
+  PaymentElementProvider: () => import_react23.__experimental_PaymentElementProvider,
   PlanDetailsButton: () => PlanDetailsButton,
   SubscriptionDetailsButton: () => SubscriptionDetailsButton,
-  useAPIKeys: () => import_react22.__experimental_useAPIKeys,
-  useCheckout: () => import_react22.__experimental_useCheckout,
-  usePaymentAttempts: () => import_react22.__experimental_usePaymentAttempts,
-  usePaymentElement: () => import_react22.__experimental_usePaymentElement,
-  usePaymentMethods: () => import_react22.__experimental_usePaymentMethods,
-  usePlans: () => import_react22.__experimental_usePlans,
-  useStatements: () => import_react22.__experimental_useStatements,
-  useSubscription: () => import_react22.__experimental_useSubscription
+  useAPIKeys: () => import_react23.__experimental_useAPIKeys,
+  useCheckout: () => import_react23.__experimental_useCheckout,
+  usePaymentAttempts: () => import_react23.__experimental_usePaymentAttempts,
+  usePaymentElement: () => import_react23.__experimental_usePaymentElement,
+  usePaymentMethods: () => import_react23.__experimental_usePaymentMethods,
+  usePlans: () => import_react23.__experimental_usePlans,
+  useStatements: () => import_react23.__experimental_useStatements,
+  useSubscription: () => import_react23.__experimental_useSubscription
 });
 module.exports = __toCommonJS(experimental_exports);
 
 // src/components/CheckoutButton.tsx
-var import_react19 = __toESM(require("react"));
+var import_react20 = __toESM(require("react"));
 
 // src/hooks/useAuth.ts
 var import_authorization = require("@clerk/shared/authorization");
@@ -242,11 +242,11 @@ var useCustomElementPortal = (elements) => {
 
 // src/utils/useCustomPages.tsx
 var import_utils4 = require("@clerk/shared/utils");
-var import_react17 = __toESM(require("react"));
+var import_react18 = __toESM(require("react"));
 
 // src/components/uiComponents.tsx
 var import_utils2 = require("@clerk/shared/utils");
-var import_react15 = __toESM(require("react"));
+var import_react16 = __toESM(require("react"));
 
 // src/utils/useWaitForComponentMount.ts
 var import_react11 = require("react");
@@ -389,7 +389,8 @@ var ClerkHostRenderer = class extends import_react13.default.PureComponent {
 };
 
 // src/components/withClerk.tsx
-var import_react14 = __toESM(require("react"));
+var import_react14 = require("@clerk/shared/react");
+var import_react15 = __toESM(require("react"));
 var withClerk = (Component, displayNameOrOptions) => {
   const passedDisplayedName = typeof displayNameOrOptions === "string" ? displayNameOrOptions : displayNameOrOptions == null ? void 0 : displayNameOrOptions.component;
   const displayName = passedDisplayedName || Component.displayName || Component.name || "Component";
@@ -398,12 +399,14 @@ var withClerk = (Component, displayNameOrOptions) => {
   const HOC = (props) => {
     useAssertWrappedByClerkProvider(displayName || "withClerk");
     const clerk = useIsomorphicClerkContext();
+    const getContainer = (0, import_react14.usePortalRoot)();
     if (!clerk.loaded && !(options == null ? void 0 : options.renderWhileLoading)) {
       return null;
     }
-    return /* @__PURE__ */ import_react14.default.createElement(
+    return /* @__PURE__ */ import_react15.default.createElement(
       Component,
       {
+        getContainer,
         ...props,
         component: displayName,
         clerk
@@ -417,7 +420,7 @@ var withClerk = (Component, displayNameOrOptions) => {
 // src/components/uiComponents.tsx
 var CustomPortalsRenderer = (props) => {
   var _a, _b;
-  return /* @__PURE__ */ import_react15.default.createElement(import_react15.default.Fragment, null, (_a = props == null ? void 0 : props.customPagesPortals) == null ? void 0 : _a.map((portal, index) => (0, import_react15.createElement)(portal, { key: index })), (_b = props == null ? void 0 : props.customMenuItemsPortals) == null ? void 0 : _b.map((portal, index) => (0, import_react15.createElement)(portal, { key: index })));
+  return /* @__PURE__ */ import_react16.default.createElement(import_react16.default.Fragment, null, (_a = props == null ? void 0 : props.customPagesPortals) == null ? void 0 : _a.map((portal, index) => (0, import_react16.createElement)(portal, { key: index })), (_b = props == null ? void 0 : props.customMenuItemsPortals) == null ? void 0 : _b.map((portal, index) => (0, import_react16.createElement)(portal, { key: index })));
 };
 var SignIn = withClerk(
   ({ clerk, component, fallback, ...props }) => {
@@ -426,7 +429,7 @@ var SignIn = withClerk(
     const rendererRootProps = {
       ...shouldShowFallback && fallback && { style: { display: "none" } }
     };
-    return /* @__PURE__ */ import_react15.default.createElement(import_react15.default.Fragment, null, shouldShowFallback && fallback, clerk.loaded && /* @__PURE__ */ import_react15.default.createElement(
+    return /* @__PURE__ */ import_react16.default.createElement(import_react16.default.Fragment, null, shouldShowFallback && fallback, clerk.loaded && /* @__PURE__ */ import_react16.default.createElement(
       ClerkHostRenderer,
       {
         component,
@@ -447,7 +450,7 @@ var SignUp = withClerk(
     const rendererRootProps = {
       ...shouldShowFallback && fallback && { style: { display: "none" } }
     };
-    return /* @__PURE__ */ import_react15.default.createElement(import_react15.default.Fragment, null, shouldShowFallback && fallback, clerk.loaded && /* @__PURE__ */ import_react15.default.createElement(
+    return /* @__PURE__ */ import_react16.default.createElement(import_react16.default.Fragment, null, shouldShowFallback && fallback, clerk.loaded && /* @__PURE__ */ import_react16.default.createElement(
       ClerkHostRenderer,
       {
         component,
@@ -463,11 +466,11 @@ var SignUp = withClerk(
 );
 function UserProfilePage({ children }) {
   (0, import_utils2.logErrorInDevMode)(userProfilePageRenderedError);
-  return /* @__PURE__ */ import_react15.default.createElement(import_react15.default.Fragment, null, children);
+  return /* @__PURE__ */ import_react16.default.createElement(import_react16.default.Fragment, null, children);
 }
 function UserProfileLink({ children }) {
   (0, import_utils2.logErrorInDevMode)(userProfileLinkRenderedError);
-  return /* @__PURE__ */ import_react15.default.createElement(import_react15.default.Fragment, null, children);
+  return /* @__PURE__ */ import_react16.default.createElement(import_react16.default.Fragment, null, children);
 }
 var _UserProfile = withClerk(
   ({
@@ -482,7 +485,7 @@ var _UserProfile = withClerk(
       ...shouldShowFallback && fallback && { style: { display: "none" } }
     };
     const { customPages, customPagesPortals } = useUserProfileCustomPages(props.children);
-    return /* @__PURE__ */ import_react15.default.createElement(import_react15.default.Fragment, null, shouldShowFallback && fallback, /* @__PURE__ */ import_react15.default.createElement(
+    return /* @__PURE__ */ import_react16.default.createElement(import_react16.default.Fragment, null, shouldShowFallback && fallback, /* @__PURE__ */ import_react16.default.createElement(
       ClerkHostRenderer,
       {
         component,
@@ -492,7 +495,7 @@ var _UserProfile = withClerk(
         props: { ...props, customPages },
         rootProps: rendererRootProps
       },
-      /* @__PURE__ */ import_react15.default.createElement(CustomPortalsRenderer, { customPagesPortals })
+      /* @__PURE__ */ import_react16.default.createElement(CustomPortalsRenderer, { customPagesPortals })
     ));
   },
   { component: "UserProfile", renderWhileLoading: true }
@@ -501,7 +504,7 @@ var UserProfile = Object.assign(_UserProfile, {
   Page: UserProfilePage,
   Link: UserProfileLink
 });
-var UserButtonContext = (0, import_react15.createContext)({
+var UserButtonContext = (0, import_react16.createContext)({
   mount: () => {
   },
   unmount: () => {
@@ -539,7 +542,7 @@ var _UserButton = withClerk(
       customPagesPortals,
       customMenuItemsPortals
     };
-    return /* @__PURE__ */ import_react15.default.createElement(UserButtonContext.Provider, { value: passableProps }, shouldShowFallback && fallback, clerk.loaded && /* @__PURE__ */ import_react15.default.createElement(
+    return /* @__PURE__ */ import_react16.default.createElement(UserButtonContext.Provider, { value: passableProps }, shouldShowFallback && fallback, clerk.loaded && /* @__PURE__ */ import_react16.default.createElement(
       ClerkHostRenderer,
       {
         component,
@@ -548,25 +551,25 @@ var _UserButton = withClerk(
         rootProps: rendererRootProps
       },
       props.__experimental_asProvider ? sanitizedChildren : null,
-      /* @__PURE__ */ import_react15.default.createElement(CustomPortalsRenderer, { ...portalProps })
+      /* @__PURE__ */ import_react16.default.createElement(CustomPortalsRenderer, { ...portalProps })
     ));
   },
   { component: "UserButton", renderWhileLoading: true }
 );
 function MenuItems({ children }) {
   (0, import_utils2.logErrorInDevMode)(userButtonMenuItemsRenderedError);
-  return /* @__PURE__ */ import_react15.default.createElement(import_react15.default.Fragment, null, children);
+  return /* @__PURE__ */ import_react16.default.createElement(import_react16.default.Fragment, null, children);
 }
 function MenuAction({ children }) {
   (0, import_utils2.logErrorInDevMode)(userButtonMenuActionRenderedError);
-  return /* @__PURE__ */ import_react15.default.createElement(import_react15.default.Fragment, null, children);
+  return /* @__PURE__ */ import_react16.default.createElement(import_react16.default.Fragment, null, children);
 }
 function MenuLink({ children }) {
   (0, import_utils2.logErrorInDevMode)(userButtonMenuLinkRenderedError);
-  return /* @__PURE__ */ import_react15.default.createElement(import_react15.default.Fragment, null, children);
+  return /* @__PURE__ */ import_react16.default.createElement(import_react16.default.Fragment, null, children);
 }
 function UserButtonOutlet(outletProps) {
-  const providerProps = (0, import_react15.useContext)(UserButtonContext);
+  const providerProps = (0, import_react16.useContext)(UserButtonContext);
   const portalProps = {
     ...providerProps,
     props: {
@@ -574,7 +577,7 @@ function UserButtonOutlet(outletProps) {
       ...outletProps
     }
   };
-  return /* @__PURE__ */ import_react15.default.createElement(ClerkHostRenderer, { ...portalProps });
+  return /* @__PURE__ */ import_react16.default.createElement(ClerkHostRenderer, { ...portalProps });
 }
 var UserButton = Object.assign(_UserButton, {
   UserProfilePage,
@@ -586,11 +589,11 @@ var UserButton = Object.assign(_UserButton, {
 });
 function OrganizationProfilePage({ children }) {
   (0, import_utils2.logErrorInDevMode)(organizationProfilePageRenderedError);
-  return /* @__PURE__ */ import_react15.default.createElement(import_react15.default.Fragment, null, children);
+  return /* @__PURE__ */ import_react16.default.createElement(import_react16.default.Fragment, null, children);
 }
 function OrganizationProfileLink({ children }) {
   (0, import_utils2.logErrorInDevMode)(organizationProfileLinkRenderedError);
-  return /* @__PURE__ */ import_react15.default.createElement(import_react15.default.Fragment, null, children);
+  return /* @__PURE__ */ import_react16.default.createElement(import_react16.default.Fragment, null, children);
 }
 var _OrganizationProfile = withClerk(
   ({
@@ -605,7 +608,7 @@ var _OrganizationProfile = withClerk(
       ...shouldShowFallback && fallback && { style: { display: "none" } }
     };
     const { customPages, customPagesPortals } = useOrganizationProfileCustomPages(props.children);
-    return /* @__PURE__ */ import_react15.default.createElement(import_react15.default.Fragment, null, shouldShowFallback && fallback, clerk.loaded && /* @__PURE__ */ import_react15.default.createElement(
+    return /* @__PURE__ */ import_react16.default.createElement(import_react16.default.Fragment, null, shouldShowFallback && fallback, clerk.loaded && /* @__PURE__ */ import_react16.default.createElement(
       ClerkHostRenderer,
       {
         component,
@@ -615,7 +618,7 @@ var _OrganizationProfile = withClerk(
         props: { ...props, customPages },
         rootProps: rendererRootProps
       },
-      /* @__PURE__ */ import_react15.default.createElement(CustomPortalsRenderer, { customPagesPortals })
+      /* @__PURE__ */ import_react16.default.createElement(CustomPortalsRenderer, { customPagesPortals })
     ));
   },
   { component: "OrganizationProfile", renderWhileLoading: true }
@@ -631,7 +634,7 @@ var CreateOrganization = withClerk(
     const rendererRootProps = {
       ...shouldShowFallback && fallback && { style: { display: "none" } }
     };
-    return /* @__PURE__ */ import_react15.default.createElement(import_react15.default.Fragment, null, shouldShowFallback && fallback, clerk.loaded && /* @__PURE__ */ import_react15.default.createElement(
+    return /* @__PURE__ */ import_react16.default.createElement(import_react16.default.Fragment, null, shouldShowFallback && fallback, clerk.loaded && /* @__PURE__ */ import_react16.default.createElement(
       ClerkHostRenderer,
       {
         component,
@@ -645,7 +648,7 @@ var CreateOrganization = withClerk(
   },
   { component: "CreateOrganization", renderWhileLoading: true }
 );
-var OrganizationSwitcherContext = (0, import_react15.createContext)({
+var OrganizationSwitcherContext = (0, import_react16.createContext)({
   mount: () => {
   },
   unmount: () => {
@@ -679,20 +682,20 @@ var _OrganizationSwitcher = withClerk(
       component
     };
     clerk.__experimental_prefetchOrganizationSwitcher();
-    return /* @__PURE__ */ import_react15.default.createElement(OrganizationSwitcherContext.Provider, { value: passableProps }, /* @__PURE__ */ import_react15.default.createElement(import_react15.default.Fragment, null, shouldShowFallback && fallback, clerk.loaded && /* @__PURE__ */ import_react15.default.createElement(
+    return /* @__PURE__ */ import_react16.default.createElement(OrganizationSwitcherContext.Provider, { value: passableProps }, /* @__PURE__ */ import_react16.default.createElement(import_react16.default.Fragment, null, shouldShowFallback && fallback, clerk.loaded && /* @__PURE__ */ import_react16.default.createElement(
       ClerkHostRenderer,
       {
         ...passableProps,
         hideRootHtmlElement: !!props.__experimental_asProvider
       },
       props.__experimental_asProvider ? sanitizedChildren : null,
-      /* @__PURE__ */ import_react15.default.createElement(CustomPortalsRenderer, { customPagesPortals })
+      /* @__PURE__ */ import_react16.default.createElement(CustomPortalsRenderer, { customPagesPortals })
     )));
   },
   { component: "OrganizationSwitcher", renderWhileLoading: true }
 );
 function OrganizationSwitcherOutlet(outletProps) {
-  const providerProps = (0, import_react15.useContext)(OrganizationSwitcherContext);
+  const providerProps = (0, import_react16.useContext)(OrganizationSwitcherContext);
   const portalProps = {
     ...providerProps,
     props: {
@@ -700,7 +703,7 @@ function OrganizationSwitcherOutlet(outletProps) {
       ...outletProps
     }
   };
-  return /* @__PURE__ */ import_react15.default.createElement(ClerkHostRenderer, { ...portalProps });
+  return /* @__PURE__ */ import_react16.default.createElement(ClerkHostRenderer, { ...portalProps });
 }
 var OrganizationSwitcher = Object.assign(_OrganizationSwitcher, {
   OrganizationProfilePage,
@@ -714,7 +717,7 @@ var OrganizationList = withClerk(
     const rendererRootProps = {
       ...shouldShowFallback && fallback && { style: { display: "none" } }
     };
-    return /* @__PURE__ */ import_react15.default.createElement(import_react15.default.Fragment, null, shouldShowFallback && fallback, clerk.loaded && /* @__PURE__ */ import_react15.default.createElement(
+    return /* @__PURE__ */ import_react16.default.createElement(import_react16.default.Fragment, null, shouldShowFallback && fallback, clerk.loaded && /* @__PURE__ */ import_react16.default.createElement(
       ClerkHostRenderer,
       {
         component,
@@ -735,7 +738,7 @@ var GoogleOneTap = withClerk(
     const rendererRootProps = {
       ...shouldShowFallback && fallback && { style: { display: "none" } }
     };
-    return /* @__PURE__ */ import_react15.default.createElement(import_react15.default.Fragment, null, shouldShowFallback && fallback, clerk.loaded && /* @__PURE__ */ import_react15.default.createElement(
+    return /* @__PURE__ */ import_react16.default.createElement(import_react16.default.Fragment, null, shouldShowFallback && fallback, clerk.loaded && /* @__PURE__ */ import_react16.default.createElement(
       ClerkHostRenderer,
       {
         component,
@@ -756,7 +759,7 @@ var Waitlist = withClerk(
     const rendererRootProps = {
       ...shouldShowFallback && fallback && { style: { display: "none" } }
     };
-    return /* @__PURE__ */ import_react15.default.createElement(import_react15.default.Fragment, null, shouldShowFallback && fallback, clerk.loaded && /* @__PURE__ */ import_react15.default.createElement(
+    return /* @__PURE__ */ import_react16.default.createElement(import_react16.default.Fragment, null, shouldShowFallback && fallback, clerk.loaded && /* @__PURE__ */ import_react16.default.createElement(
       ClerkHostRenderer,
       {
         component,
@@ -780,7 +783,7 @@ var PricingTable = withClerk(
     const rendererRootProps = {
       ...shouldShowFallback && fallback && { style: { display: "none" } }
     };
-    return /* @__PURE__ */ import_react15.default.createElement(import_react15.default.Fragment, null, shouldShowFallback && fallback, clerk.loaded && /* @__PURE__ */ import_react15.default.createElement(
+    return /* @__PURE__ */ import_react16.default.createElement(import_react16.default.Fragment, null, shouldShowFallback && fallback, clerk.loaded && /* @__PURE__ */ import_react16.default.createElement(
       ClerkHostRenderer,
       {
         component,
@@ -801,7 +804,7 @@ var APIKeys = withClerk(
     const rendererRootProps = {
       ...shouldShowFallback && fallback && { style: { display: "none" } }
     };
-    return /* @__PURE__ */ import_react15.default.createElement(import_react15.default.Fragment, null, shouldShowFallback && fallback, clerk.loaded && /* @__PURE__ */ import_react15.default.createElement(
+    return /* @__PURE__ */ import_react16.default.createElement(import_react16.default.Fragment, null, shouldShowFallback && fallback, clerk.loaded && /* @__PURE__ */ import_react16.default.createElement(
       ClerkHostRenderer,
       {
         component,
@@ -822,7 +825,7 @@ var UserAvatar = withClerk(
     const rendererRootProps = {
       ...shouldShowFallback && fallback && { style: { display: "none" } }
     };
-    return /* @__PURE__ */ import_react15.default.createElement(import_react15.default.Fragment, null, shouldShowFallback && fallback, clerk.loaded && /* @__PURE__ */ import_react15.default.createElement(
+    return /* @__PURE__ */ import_react16.default.createElement(import_react16.default.Fragment, null, shouldShowFallback && fallback, clerk.loaded && /* @__PURE__ */ import_react16.default.createElement(
       ClerkHostRenderer,
       {
         component,
@@ -843,7 +846,7 @@ var TaskChooseOrganization = withClerk(
     const rendererRootProps = {
       ...shouldShowFallback && fallback && { style: { display: "none" } }
     };
-    return /* @__PURE__ */ import_react15.default.createElement(import_react15.default.Fragment, null, shouldShowFallback && fallback, clerk.loaded && /* @__PURE__ */ import_react15.default.createElement(
+    return /* @__PURE__ */ import_react16.default.createElement(import_react16.default.Fragment, null, shouldShowFallback && fallback, clerk.loaded && /* @__PURE__ */ import_react16.default.createElement(
       ClerkHostRenderer,
       {
         component,
@@ -864,7 +867,7 @@ var TaskResetPassword = withClerk(
     const rendererRootProps = {
       ...shouldShowFallback && fallback && { style: { display: "none" } }
     };
-    return /* @__PURE__ */ import_react15.default.createElement(import_react15.default.Fragment, null, shouldShowFallback && fallback, clerk.loaded && /* @__PURE__ */ import_react15.default.createElement(
+    return /* @__PURE__ */ import_react16.default.createElement(import_react16.default.Fragment, null, shouldShowFallback && fallback, clerk.loaded && /* @__PURE__ */ import_react16.default.createElement(
       ClerkHostRenderer,
       {
         component,
@@ -880,9 +883,9 @@ var TaskResetPassword = withClerk(
 );
 
 // src/utils/componentValidation.ts
-var import_react16 = __toESM(require("react"));
+var import_react17 = __toESM(require("react"));
 var isThatComponent = (v, component) => {
-  return !!v && import_react16.default.isValidElement(v) && (v == null ? void 0 : v.type) === component;
+  return !!v && import_react17.default.isValidElement(v) && (v == null ? void 0 : v.type) === component;
 };
 
 // src/utils/useCustomPages.tsx
@@ -922,7 +925,7 @@ var useSanitizedChildren = (children) => {
     UserProfilePage,
     UserProfileLink
   ];
-  import_react17.default.Children.forEach(children, (child) => {
+  import_react18.default.Children.forEach(children, (child) => {
     if (!excludedComponents.some((component) => isThatComponent(child, component))) {
       sanitizedChildren.push(child);
     }
@@ -933,7 +936,7 @@ var useCustomPages = (params, options) => {
   const { children, LinkComponent, PageComponent, MenuItemsComponent, reorderItemsLabels, componentName } = params;
   const { allowForAnyChildren = false } = options || {};
   const validChildren = [];
-  import_react17.default.Children.forEach(children, (child) => {
+  import_react18.default.Children.forEach(children, (child) => {
     if (!isThatComponent(child, PageComponent) && !isThatComponent(child, LinkComponent) && !isThatComponent(child, MenuItemsComponent)) {
       if (child && !allowForAnyChildren) {
         (0, import_utils4.logErrorInDevMode)(customPagesIgnoredComponent(componentName));
@@ -1028,7 +1031,7 @@ var isExternalLink = (childProps) => {
 
 // src/utils/useCustomMenuItems.tsx
 var import_utils5 = require("@clerk/shared/utils");
-var import_react18 = __toESM(require("react"));
+var import_react19 = __toESM(require("react"));
 var useUserButtonCustomMenuItems = (children, options) => {
   var _a;
   const reorderItemsLabels = ["manageAccount", "signOut"];
@@ -1056,7 +1059,7 @@ var useCustomMenuItems = ({
   const validChildren = [];
   const customMenuItems = [];
   const customMenuItemsPortals = [];
-  import_react18.default.Children.forEach(children, (child) => {
+  import_react19.default.Children.forEach(children, (child) => {
     if (!isThatComponent(child, MenuItemsComponent) && !isThatComponent(child, UserProfileLinkComponent) && !isThatComponent(child, UserProfilePageComponent)) {
       if (child && !allowForAnyChildren) {
         (0, import_utils5.logErrorInDevMode)(userButtonIgnoredComponent);
@@ -1067,7 +1070,7 @@ var useCustomMenuItems = ({
       return;
     }
     const { props } = child;
-    import_react18.default.Children.forEach(props.children, (child2) => {
+    import_react19.default.Children.forEach(props.children, (child2) => {
       if (!isThatComponent(child2, MenuActionComponent) && !isThatComponent(child2, MenuLinkComponent)) {
         if (child2) {
           (0, import_utils5.logErrorInDevMode)(customMenuItemsIgnoredComponent);
@@ -1223,13 +1226,13 @@ var CheckoutButton = withClerk(
       return clickHandler();
     };
     const childProps = { ...rest, onClick: wrappedChildClickHandler };
-    return import_react19.default.cloneElement(child, childProps);
+    return import_react20.default.cloneElement(child, childProps);
   },
   { component: "CheckoutButton", renderWhileLoading: true }
 );
 
 // src/components/PlanDetailsButton.tsx
-var import_react20 = __toESM(require("react"));
+var import_react21 = __toESM(require("react"));
 var PlanDetailsButton = withClerk(
   ({ clerk, children, ...props }) => {
     const { plan, planId, initialPlanPeriod, planDetailsProps, ...rest } = props;
@@ -1253,13 +1256,13 @@ var PlanDetailsButton = withClerk(
       return clickHandler();
     };
     const childProps = { ...rest, onClick: wrappedChildClickHandler };
-    return import_react20.default.cloneElement(child, childProps);
+    return import_react21.default.cloneElement(child, childProps);
   },
   { component: "PlanDetailsButton", renderWhileLoading: true }
 );
 
 // src/components/SubscriptionDetailsButton.tsx
-var import_react21 = __toESM(require("react"));
+var import_react22 = __toESM(require("react"));
 var SubscriptionDetailsButton = withClerk(
   ({
     clerk,
@@ -1297,13 +1300,13 @@ var SubscriptionDetailsButton = withClerk(
       return clickHandler();
     };
     const childProps = { ...rest, onClick: wrappedChildClickHandler };
-    return import_react21.default.cloneElement(child, childProps);
+    return import_react22.default.cloneElement(child, childProps);
   },
   { component: "SubscriptionDetailsButton", renderWhileLoading: true }
 );
 
 // src/experimental.ts
-var import_react22 = require("@clerk/shared/react");
+var import_react23 = require("@clerk/shared/react");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   CheckoutButton,