@clerk/react 6.9.0 → 6.9.1-canary.v20260610190754

package/dist/experimental.mjs

@@ -1,170 +1,206 @@
-import {
-  assertSingleChild,
-  normalizeWithDefaultValue,
-  safeExecute,
-  useAuth,
-  withClerk
-} from "./chunk-FQVXBXXF.mjs";
-import "./chunk-RQWALB2R.mjs";
-import "./chunk-E5QRIS4Z.mjs";
-
-// src/components/CheckoutButton.tsx
+import { G as safeExecute, U as assertSingleChild, W as normalizeWithDefaultValue, b as useAuth, z as withClerk } from "./hooks-BiY5Zgpp.mjs";
 import React from "react";
-var CheckoutButton = withClerk(
-  ({ clerk, children, ...props }) => {
-    const {
-      planId,
-      planPeriod,
-      seatsQuantity,
-      priceId,
-      for: _for,
-      onSubscriptionComplete,
-      newSubscriptionRedirectUrl,
-      checkoutProps,
-      getContainer,
-      component,
-      ...rest
-    } = props;
-    const { userId, orgId } = useAuth();
-    if (userId === null) {
-      throw new Error(
-        'Clerk: Ensure that `<CheckoutButton />` is rendered only when the user is signed in (wrap with `<Show when="signed-in">` or guard with `useAuth()`).'
-      );
-    }
-    if (orgId === null && _for === "organization") {
-      throw new Error(
-        'Clerk: Wrap `<CheckoutButton for="organization" />` with a check for an active organization. Retrieve `orgId` from `useAuth()` and confirm it is defined. For SSR, see: https://clerk.com/docs/reference/backend/types/auth-object#how-to-access-the-auth-object'
-      );
-    }
-    children = normalizeWithDefaultValue(children, "Checkout");
-    const child = assertSingleChild(children)("CheckoutButton");
-    const clickHandler = () => {
-      if (!clerk) {
-        return;
-      }
-      return clerk.__internal_openCheckout({
-        planId,
-        planPeriod,
-        seatsQuantity,
-        priceId,
-        for: _for,
-        onSubscriptionComplete,
-        newSubscriptionRedirectUrl,
-        ...checkoutProps
-      });
-    };
-    const wrappedChildClickHandler = async (e) => {
-      if (child && typeof child === "object" && "props" in child) {
-        await safeExecute(child.props.onClick)(e);
-      }
-      return clickHandler();
-    };
-    const childProps = { ...rest, onClick: wrappedChildClickHandler };
-    return React.cloneElement(child, childProps);
-  },
-  { component: "CheckoutButton", renderWhileLoading: true }
-);
+import { __experimental_CheckoutProvider as CheckoutProvider, __experimental_PaymentElement as PaymentElement, __experimental_PaymentElementProvider as PaymentElementProvider, __experimental_useCheckout as useCheckout, __experimental_usePaymentAttempts as usePaymentAttempts, __experimental_usePaymentElement as usePaymentElement, __experimental_usePaymentMethods as usePaymentMethods, __experimental_usePlans as usePlans, __experimental_useStatements as useStatements, __experimental_useSubscription as useSubscription } from "@clerk/shared/react";
+
+//#region src/components/CheckoutButton.tsx
+/**
+* A button component that opens the Clerk Checkout drawer when clicked. Render only when the user is signed in (e.g., wrap with `<Show when="signed-in">`).
+*
+* @example
+* ```tsx
+* import { Show } from '@clerk/react';
+* import { CheckoutButton } from '@clerk/react/experimental';
+*
+* // Basic usage with default "Checkout" text
+* function BasicCheckout() {
+*   return (
+*     <Show when="signed-in">
+*       <CheckoutButton planId="plan_123" />
+*     </Show>
+*   );
+* }
+*
+* // Custom button with organization subscription
+* function OrganizationCheckout() {
+*   return (
+*     <Show when="signed-in">
+*       <CheckoutButton
+*         planId="plan_123"
+*         planPeriod="month"
+*         for="organization"
+*         onSubscriptionComplete={() => console.log('Subscription completed!')}
+*       >
+*         <button className="custom-button">Subscribe Now</button>
+*       </CheckoutButton>
+*     </Show>
+*   );
+* }
+* ```
+*
+* @throws {Error} When rendered while the user is signed out
+* @throws {Error} When `for="organization"` is used without an active organization context
+*
+* @experimental This is an experimental API for the Billing feature that is available under a public beta, and the API is subject to change. It is advised to [pin](https://clerk.com/docs/pinning) the SDK version and the clerk-js version to avoid breaking changes.
+*/
+const CheckoutButton = withClerk(({ clerk, children, ...props }) => {
+	const { planId, planPeriod, seatsQuantity, priceId, for: _for, onSubscriptionComplete, newSubscriptionRedirectUrl, checkoutProps, getContainer, component, ...rest } = props;
+	const { userId, orgId } = useAuth();
+	if (userId === null) throw new Error("Clerk: Ensure that `<CheckoutButton />` is rendered only when the user is signed in (wrap with `<Show when=\"signed-in\">` or guard with `useAuth()`).");
+	if (orgId === null && _for === "organization") throw new Error("Clerk: Wrap `<CheckoutButton for=\"organization\" />` with a check for an active organization. Retrieve `orgId` from `useAuth()` and confirm it is defined. For SSR, see: https://clerk.com/docs/reference/backend/types/auth-object#how-to-access-the-auth-object");
+	children = normalizeWithDefaultValue(children, "Checkout");
+	const child = assertSingleChild(children)("CheckoutButton");
+	const clickHandler = () => {
+		if (!clerk) return;
+		return clerk.__internal_openCheckout({
+			planId,
+			planPeriod,
+			seatsQuantity,
+			priceId,
+			for: _for,
+			onSubscriptionComplete,
+			newSubscriptionRedirectUrl,
+			...checkoutProps
+		});
+	};
+	const wrappedChildClickHandler = async (e) => {
+		if (child && typeof child === "object" && "props" in child) await safeExecute(child.props.onClick)(e);
+		return clickHandler();
+	};
+	const childProps = {
+		...rest,
+		onClick: wrappedChildClickHandler
+	};
+	return React.cloneElement(child, childProps);
+}, {
+	component: "CheckoutButton",
+	renderWhileLoading: true
+});
 
-// src/components/PlanDetailsButton.tsx
-import React2 from "react";
-var PlanDetailsButton = withClerk(
-  ({ clerk, children, ...props }) => {
-    const { plan, planId, initialPlanPeriod, planDetailsProps, getContainer, component, ...rest } = props;
-    children = normalizeWithDefaultValue(children, "Plan details");
-    const child = assertSingleChild(children)("PlanDetailsButton");
-    const clickHandler = () => {
-      if (!clerk) {
-        return;
-      }
-      return clerk.__internal_openPlanDetails({
-        plan,
-        planId,
-        initialPlanPeriod,
-        ...planDetailsProps
-      });
-    };
-    const wrappedChildClickHandler = async (e) => {
-      if (child && typeof child === "object" && "props" in child) {
-        await safeExecute(child.props.onClick)(e);
-      }
-      return clickHandler();
-    };
-    const childProps = { ...rest, onClick: wrappedChildClickHandler };
-    return React2.cloneElement(child, childProps);
-  },
-  { component: "PlanDetailsButton", renderWhileLoading: true }
-);
+//#endregion
+//#region src/components/PlanDetailsButton.tsx
+/**
+* A button component that opens the Clerk Plan Details drawer when clicked. This component is part of
+* Clerk's Billing feature which is available under a public beta.
+*
+* @example
+* ```tsx
+* import { Show } from '@clerk/react';
+* import { PlanDetailsButton } from '@clerk/react/experimental';
+*
+* // Basic usage with default "Plan details" text
+* function BasicPlanDetails() {
+*   return <PlanDetailsButton planId="plan_123" />;
+* }
+*
+* // Custom button with custom text
+* function CustomPlanDetails() {
+*   return (
+*     <Show when="signed-in">
+*       <PlanDetailsButton planId="plan_123">
+*         <button>View Plan Details</button>
+*       </PlanDetailsButton>
+*     </Show>
+*   );
+* }
+* ```
+*
+* @experimental This is an experimental API for the Billing feature that is available under a public beta, and the API is subject to change. It is advised to [pin](https://clerk.com/docs/pinning) the SDK version and the clerk-js version to avoid breaking changes.
+*/
+const PlanDetailsButton = withClerk(({ clerk, children, ...props }) => {
+	const { plan, planId, initialPlanPeriod, planDetailsProps, getContainer, component, ...rest } = props;
+	children = normalizeWithDefaultValue(children, "Plan details");
+	const child = assertSingleChild(children)("PlanDetailsButton");
+	const clickHandler = () => {
+		if (!clerk) return;
+		return clerk.__internal_openPlanDetails({
+			plan,
+			planId,
+			initialPlanPeriod,
+			...planDetailsProps
+		});
+	};
+	const wrappedChildClickHandler = async (e) => {
+		if (child && typeof child === "object" && "props" in child) await safeExecute(child.props.onClick)(e);
+		return clickHandler();
+	};
+	const childProps = {
+		...rest,
+		onClick: wrappedChildClickHandler
+	};
+	return React.cloneElement(child, childProps);
+}, {
+	component: "PlanDetailsButton",
+	renderWhileLoading: true
+});
 
-// src/components/SubscriptionDetailsButton.tsx
-import React3 from "react";
-var SubscriptionDetailsButton = withClerk(
-  ({
-    clerk,
-    children,
-    ...props
-  }) => {
-    const { for: _for, subscriptionDetailsProps, onSubscriptionCancel, getContainer, component, ...rest } = props;
-    children = normalizeWithDefaultValue(children, "Subscription details");
-    const child = assertSingleChild(children)("SubscriptionDetailsButton");
-    const { userId, orgId } = useAuth();
-    if (userId === null) {
-      throw new Error(
-        'Clerk: Ensure that `<SubscriptionDetailsButton />` is rendered only when the user is signed in (wrap with `<Show when="signed-in">` or guard with `useAuth()`).'
-      );
-    }
-    if (orgId === null && _for === "organization") {
-      throw new Error(
-        'Clerk: Wrap `<SubscriptionDetailsButton for="organization" />` with a check for an active organization. Retrieve `orgId` from `useAuth()` and confirm it is defined. For SSR, see: https://clerk.com/docs/reference/backend/types/auth-object#how-to-access-the-auth-object'
-      );
-    }
-    const clickHandler = () => {
-      if (!clerk) {
-        return;
-      }
-      return clerk.__internal_openSubscriptionDetails({
-        for: _for,
-        onSubscriptionCancel,
-        ...subscriptionDetailsProps
-      });
-    };
-    const wrappedChildClickHandler = async (e) => {
-      if (child && typeof child === "object" && "props" in child) {
-        await safeExecute(child.props.onClick)(e);
-      }
-      return clickHandler();
-    };
-    const childProps = { ...rest, onClick: wrappedChildClickHandler };
-    return React3.cloneElement(child, childProps);
-  },
-  { component: "SubscriptionDetailsButton", renderWhileLoading: true }
-);
+//#endregion
+//#region src/components/SubscriptionDetailsButton.tsx
+/**
+* A button component that opens the Clerk Subscription Details drawer when clicked. Render only when the user is signed in (e.g., wrap with `<Show when="signed-in">`).
+*
+* @example
+* ```tsx
+* import { Show } from '@clerk/react';
+* import { SubscriptionDetailsButton } from '@clerk/react/experimental';
+*
+* // Basic usage with default "Subscription details" text
+* function BasicSubscriptionDetails() {
+*   return (
+*     <Show when="signed-in">
+*       <SubscriptionDetailsButton />
+*     </Show>
+*   );
+* }
+*
+* // Custom button with Organization Subscription
+* function OrganizationSubscriptionDetails() {
+*   return (
+*     <Show when="signed-in">
+*       <SubscriptionDetailsButton
+*         for="organization"
+*         onSubscriptionCancel={() => console.log('Subscription canceled')}
+*       >
+*         <button>View Organization Subscription</button>
+*       </SubscriptionDetailsButton>
+*     </Show>
+*   );
+* }
+* ```
+*
+* @throws {Error} When rendered while the user is signed out
+* @throws {Error} When `for="organization"` is used without an Active Organization context
+*
+* @experimental This is an experimental API for the Billing feature that is available under a public beta, and the API is subject to change. It is advised to [pin](https://clerk.com/docs/pinning) the SDK version and the clerk-js version to avoid breaking changes.
+*/
+const SubscriptionDetailsButton = withClerk(({ clerk, children, ...props }) => {
+	const { for: _for, subscriptionDetailsProps, onSubscriptionCancel, getContainer, component, ...rest } = props;
+	children = normalizeWithDefaultValue(children, "Subscription details");
+	const child = assertSingleChild(children)("SubscriptionDetailsButton");
+	const { userId, orgId } = useAuth();
+	if (userId === null) throw new Error("Clerk: Ensure that `<SubscriptionDetailsButton />` is rendered only when the user is signed in (wrap with `<Show when=\"signed-in\">` or guard with `useAuth()`).");
+	if (orgId === null && _for === "organization") throw new Error("Clerk: Wrap `<SubscriptionDetailsButton for=\"organization\" />` with a check for an active organization. Retrieve `orgId` from `useAuth()` and confirm it is defined. For SSR, see: https://clerk.com/docs/reference/backend/types/auth-object#how-to-access-the-auth-object");
+	const clickHandler = () => {
+		if (!clerk) return;
+		return clerk.__internal_openSubscriptionDetails({
+			for: _for,
+			onSubscriptionCancel,
+			...subscriptionDetailsProps
+		});
+	};
+	const wrappedChildClickHandler = async (e) => {
+		if (child && typeof child === "object" && "props" in child) await safeExecute(child.props.onClick)(e);
+		return clickHandler();
+	};
+	const childProps = {
+		...rest,
+		onClick: wrappedChildClickHandler
+	};
+	return React.cloneElement(child, childProps);
+}, {
+	component: "SubscriptionDetailsButton",
+	renderWhileLoading: true
+});
 
-// src/experimental.ts
-import {
-  __experimental_PaymentElementProvider,
-  __experimental_usePaymentElement,
-  __experimental_PaymentElement,
-  __experimental_usePaymentAttempts,
-  __experimental_useStatements,
-  __experimental_usePaymentMethods,
-  __experimental_usePlans,
-  __experimental_useSubscription,
-  __experimental_CheckoutProvider,
-  __experimental_useCheckout
-} from "@clerk/shared/react";
-export {
-  CheckoutButton,
-  __experimental_CheckoutProvider as CheckoutProvider,
-  __experimental_PaymentElement as PaymentElement,
-  __experimental_PaymentElementProvider as PaymentElementProvider,
-  PlanDetailsButton,
-  SubscriptionDetailsButton,
-  __experimental_useCheckout as useCheckout,
-  __experimental_usePaymentAttempts as usePaymentAttempts,
-  __experimental_usePaymentElement as usePaymentElement,
-  __experimental_usePaymentMethods as usePaymentMethods,
-  __experimental_usePlans as usePlans,
-  __experimental_useStatements as useStatements,
-  __experimental_useSubscription as useSubscription
-};
+//#endregion
+export { CheckoutButton, CheckoutProvider, PaymentElement, PaymentElementProvider, PlanDetailsButton, SubscriptionDetailsButton, useCheckout, usePaymentAttempts, usePaymentElement, usePaymentMethods, usePlans, useStatements, useSubscription };
 //# sourceMappingURL=experimental.mjs.map

package/dist/experimental.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/CheckoutButton.tsx","../src/components/PlanDetailsButton.tsx","../src/components/SubscriptionDetailsButton.tsx","../src/experimental.ts"],"sourcesContent":["import type { __experimental_CheckoutButtonProps } from '@clerk/shared/types';\nimport React from 'react';\n\nimport { useAuth } from '../hooks';\nimport type { WithClerkProp } from '../types';\nimport { assertSingleChild, normalizeWithDefaultValue, safeExecute } from '../utils';\nimport { withClerk } from './withClerk';\n\n/**\n * A button component that opens the Clerk Checkout drawer when clicked. Render only when the user is signed in (e.g., wrap with `<Show when=\"signed-in\">`).\n *\n * @example\n * ```tsx\n * import { Show } from '@clerk/react';\n * import { CheckoutButton } from '@clerk/react/experimental';\n *\n * // Basic usage with default \"Checkout\" text\n * function BasicCheckout() {\n *   return (\n *     <Show when=\"signed-in\">\n *       <CheckoutButton planId=\"plan_123\" />\n *     </Show>\n *   );\n * }\n *\n * // Custom button with organization subscription\n * function OrganizationCheckout() {\n *   return (\n *     <Show when=\"signed-in\">\n *       <CheckoutButton\n *         planId=\"plan_123\"\n *         planPeriod=\"month\"\n *         for=\"organization\"\n *         onSubscriptionComplete={() => console.log('Subscription completed!')}\n *       >\n *         <button className=\"custom-button\">Subscribe Now</button>\n *       </CheckoutButton>\n *     </Show>\n *   );\n * }\n * ```\n *\n * @throws {Error} When rendered while the user is signed out\n * @throws {Error} When `for=\"organization\"` is used without an active organization context\n *\n * @experimental This is an experimental API for the Billing feature that is available under a public beta, and the API is subject to change. It is advised to [pin](https://clerk.com/docs/pinning) the SDK version and the clerk-js version to avoid breaking changes.\n */\nexport const CheckoutButton = withClerk(\n  ({ clerk, children, ...props }: WithClerkProp<React.PropsWithChildren<__experimental_CheckoutButtonProps>>) => {\n    const {\n      planId,\n      planPeriod,\n      seatsQuantity,\n      priceId,\n      for: _for,\n      onSubscriptionComplete,\n      newSubscriptionRedirectUrl,\n      checkoutProps,\n      getContainer,\n      component,\n      ...rest\n    } = props;\n\n    const { userId, orgId } = useAuth();\n\n    if (userId === null) {\n      throw new Error(\n        'Clerk: Ensure that `<CheckoutButton />` is rendered only when the user is signed in (wrap with `<Show when=\"signed-in\">` or guard with `useAuth()`).',\n      );\n    }\n\n    if (orgId === null && _for === 'organization') {\n      throw new Error(\n        'Clerk: Wrap `<CheckoutButton for=\"organization\" />` with a check for an active organization. Retrieve `orgId` from `useAuth()` and confirm it is defined. For SSR, see: https://clerk.com/docs/reference/backend/types/auth-object#how-to-access-the-auth-object',\n      );\n    }\n\n    children = normalizeWithDefaultValue(children, 'Checkout');\n    const child = assertSingleChild(children)('CheckoutButton');\n\n    const clickHandler = () => {\n      if (!clerk) {\n        return;\n      }\n\n      return clerk.__internal_openCheckout({\n        planId,\n        planPeriod,\n        seatsQuantity,\n        priceId,\n        for: _for,\n        onSubscriptionComplete,\n        newSubscriptionRedirectUrl,\n        ...checkoutProps,\n      });\n    };\n\n    const wrappedChildClickHandler: React.MouseEventHandler = async e => {\n      if (child && typeof child === 'object' && 'props' in child) {\n        await safeExecute(child.props.onClick)(e);\n      }\n      return clickHandler();\n    };\n\n    const childProps = { ...rest, onClick: wrappedChildClickHandler };\n    return React.cloneElement(child as React.ReactElement<unknown>, childProps);\n  },\n  { component: 'CheckoutButton', renderWhileLoading: true },\n);\n","import type { __experimental_PlanDetailsButtonProps } from '@clerk/shared/types';\nimport React from 'react';\n\nimport type { WithClerkProp } from '../types';\nimport { assertSingleChild, normalizeWithDefaultValue, safeExecute } from '../utils';\nimport { withClerk } from './withClerk';\n\n/**\n * A button component that opens the Clerk Plan Details drawer when clicked. This component is part of\n * Clerk's Billing feature which is available under a public beta.\n *\n * @example\n * ```tsx\n * import { Show } from '@clerk/react';\n * import { PlanDetailsButton } from '@clerk/react/experimental';\n *\n * // Basic usage with default \"Plan details\" text\n * function BasicPlanDetails() {\n *   return <PlanDetailsButton planId=\"plan_123\" />;\n * }\n *\n * // Custom button with custom text\n * function CustomPlanDetails() {\n *   return (\n *     <Show when=\"signed-in\">\n *       <PlanDetailsButton planId=\"plan_123\">\n *         <button>View Plan Details</button>\n *       </PlanDetailsButton>\n *     </Show>\n *   );\n * }\n * ```\n *\n * @experimental This is an experimental API for the Billing feature that is available under a public beta, and the API is subject to change. It is advised to [pin](https://clerk.com/docs/pinning) the SDK version and the clerk-js version to avoid breaking changes.\n */\nexport const PlanDetailsButton = withClerk(\n  ({ clerk, children, ...props }: WithClerkProp<React.PropsWithChildren<__experimental_PlanDetailsButtonProps>>) => {\n    const { plan, planId, initialPlanPeriod, planDetailsProps, getContainer, component, ...rest } = props;\n\n    children = normalizeWithDefaultValue(children, 'Plan details');\n    const child = assertSingleChild(children)('PlanDetailsButton');\n\n    const clickHandler = () => {\n      if (!clerk) {\n        return;\n      }\n\n      return clerk.__internal_openPlanDetails({\n        plan,\n        planId,\n        initialPlanPeriod,\n        ...planDetailsProps,\n      } as __experimental_PlanDetailsButtonProps);\n    };\n\n    const wrappedChildClickHandler: React.MouseEventHandler = async e => {\n      if (child && typeof child === 'object' && 'props' in child) {\n        await safeExecute(child.props.onClick)(e);\n      }\n      return clickHandler();\n    };\n\n    const childProps = { ...rest, onClick: wrappedChildClickHandler };\n    return React.cloneElement(child as React.ReactElement<unknown>, childProps);\n  },\n  { component: 'PlanDetailsButton', renderWhileLoading: true },\n);\n","import type { __experimental_SubscriptionDetailsButtonProps } from '@clerk/shared/types';\nimport React from 'react';\n\nimport { useAuth } from '../hooks';\nimport type { WithClerkProp } from '../types';\nimport { assertSingleChild, normalizeWithDefaultValue, safeExecute } from '../utils';\nimport { withClerk } from './withClerk';\n\n/**\n * A button component that opens the Clerk Subscription Details drawer when clicked. Render only when the user is signed in (e.g., wrap with `<Show when=\"signed-in\">`).\n *\n * @example\n * ```tsx\n * import { Show } from '@clerk/react';\n * import { SubscriptionDetailsButton } from '@clerk/react/experimental';\n *\n * // Basic usage with default \"Subscription details\" text\n * function BasicSubscriptionDetails() {\n *   return (\n *     <Show when=\"signed-in\">\n *       <SubscriptionDetailsButton />\n *     </Show>\n *   );\n * }\n *\n * // Custom button with Organization Subscription\n * function OrganizationSubscriptionDetails() {\n *   return (\n *     <Show when=\"signed-in\">\n *       <SubscriptionDetailsButton\n *         for=\"organization\"\n *         onSubscriptionCancel={() => console.log('Subscription canceled')}\n *       >\n *         <button>View Organization Subscription</button>\n *       </SubscriptionDetailsButton>\n *     </Show>\n *   );\n * }\n * ```\n *\n * @throws {Error} When rendered while the user is signed out\n * @throws {Error} When `for=\"organization\"` is used without an Active Organization context\n *\n * @experimental This is an experimental API for the Billing feature that is available under a public beta, and the API is subject to change. It is advised to [pin](https://clerk.com/docs/pinning) the SDK version and the clerk-js version to avoid breaking changes.\n */\nexport const SubscriptionDetailsButton = withClerk(\n  ({\n    clerk,\n    children,\n    ...props\n  }: WithClerkProp<React.PropsWithChildren<__experimental_SubscriptionDetailsButtonProps>>) => {\n    const { for: _for, subscriptionDetailsProps, onSubscriptionCancel, getContainer, component, ...rest } = props;\n    children = normalizeWithDefaultValue(children, 'Subscription details');\n    const child = assertSingleChild(children)('SubscriptionDetailsButton');\n\n    const { userId, orgId } = useAuth();\n\n    if (userId === null) {\n      throw new Error(\n        'Clerk: Ensure that `<SubscriptionDetailsButton />` is rendered only when the user is signed in (wrap with `<Show when=\"signed-in\">` or guard with `useAuth()`).',\n      );\n    }\n\n    if (orgId === null && _for === 'organization') {\n      throw new Error(\n        'Clerk: Wrap `<SubscriptionDetailsButton for=\"organization\" />` with a check for an active organization. Retrieve `orgId` from `useAuth()` and confirm it is defined. For SSR, see: https://clerk.com/docs/reference/backend/types/auth-object#how-to-access-the-auth-object',\n      );\n    }\n\n    const clickHandler = () => {\n      if (!clerk) {\n        return;\n      }\n\n      return clerk.__internal_openSubscriptionDetails({\n        for: _for,\n        onSubscriptionCancel,\n        ...subscriptionDetailsProps,\n      });\n    };\n\n    const wrappedChildClickHandler: React.MouseEventHandler = async e => {\n      if (child && typeof child === 'object' && 'props' in child) {\n        await safeExecute(child.props.onClick)(e);\n      }\n      return clickHandler();\n    };\n\n    const childProps = { ...rest, onClick: wrappedChildClickHandler };\n    return React.cloneElement(child as React.ReactElement<unknown>, childProps);\n  },\n  { component: 'SubscriptionDetailsButton', renderWhileLoading: true },\n);\n","export { CheckoutButton } from './components/CheckoutButton';\nexport { PlanDetailsButton } from './components/PlanDetailsButton';\nexport { SubscriptionDetailsButton } from './components/SubscriptionDetailsButton';\n\nexport type {\n  __experimental_CheckoutButtonProps as CheckoutButtonProps,\n  __experimental_SubscriptionDetailsButtonProps as SubscriptionDetailsButtonProps,\n  __experimental_PlanDetailsButtonProps as PlanDetailsButtonProps,\n} from '@clerk/shared/types';\n\nexport {\n  __experimental_PaymentElementProvider as PaymentElementProvider,\n  __experimental_usePaymentElement as usePaymentElement,\n  __experimental_PaymentElement as PaymentElement,\n  __experimental_usePaymentAttempts as usePaymentAttempts,\n  __experimental_useStatements as useStatements,\n  __experimental_usePaymentMethods as usePaymentMethods,\n  __experimental_usePlans as usePlans,\n  __experimental_useSubscription as useSubscription,\n  __experimental_CheckoutProvider as CheckoutProvider,\n  __experimental_useCheckout as useCheckout,\n} from '@clerk/shared/react';\n"],"mappings":"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","names":["React","React","React","React"]}
+{"version":3,"file":"experimental.mjs","names":[],"sources":["../src/components/CheckoutButton.tsx","../src/components/PlanDetailsButton.tsx","../src/components/SubscriptionDetailsButton.tsx"],"sourcesContent":["import type { __experimental_CheckoutButtonProps } from '@clerk/shared/types';\nimport React from 'react';\n\nimport { useAuth } from '../hooks';\nimport type { WithClerkProp } from '../types';\nimport { assertSingleChild, normalizeWithDefaultValue, safeExecute } from '../utils';\nimport { withClerk } from './withClerk';\n\n/**\n * A button component that opens the Clerk Checkout drawer when clicked. Render only when the user is signed in (e.g., wrap with `<Show when=\"signed-in\">`).\n *\n * @example\n * ```tsx\n * import { Show } from '@clerk/react';\n * import { CheckoutButton } from '@clerk/react/experimental';\n *\n * // Basic usage with default \"Checkout\" text\n * function BasicCheckout() {\n *   return (\n *     <Show when=\"signed-in\">\n *       <CheckoutButton planId=\"plan_123\" />\n *     </Show>\n *   );\n * }\n *\n * // Custom button with organization subscription\n * function OrganizationCheckout() {\n *   return (\n *     <Show when=\"signed-in\">\n *       <CheckoutButton\n *         planId=\"plan_123\"\n *         planPeriod=\"month\"\n *         for=\"organization\"\n *         onSubscriptionComplete={() => console.log('Subscription completed!')}\n *       >\n *         <button className=\"custom-button\">Subscribe Now</button>\n *       </CheckoutButton>\n *     </Show>\n *   );\n * }\n * ```\n *\n * @throws {Error} When rendered while the user is signed out\n * @throws {Error} When `for=\"organization\"` is used without an active organization context\n *\n * @experimental This is an experimental API for the Billing feature that is available under a public beta, and the API is subject to change. It is advised to [pin](https://clerk.com/docs/pinning) the SDK version and the clerk-js version to avoid breaking changes.\n */\nexport const CheckoutButton = withClerk(\n  ({ clerk, children, ...props }: WithClerkProp<React.PropsWithChildren<__experimental_CheckoutButtonProps>>) => {\n    const {\n      planId,\n      planPeriod,\n      seatsQuantity,\n      priceId,\n      for: _for,\n      onSubscriptionComplete,\n      newSubscriptionRedirectUrl,\n      checkoutProps,\n      getContainer,\n      component,\n      ...rest\n    } = props;\n\n    const { userId, orgId } = useAuth();\n\n    if (userId === null) {\n      throw new Error(\n        'Clerk: Ensure that `<CheckoutButton />` is rendered only when the user is signed in (wrap with `<Show when=\"signed-in\">` or guard with `useAuth()`).',\n      );\n    }\n\n    if (orgId === null && _for === 'organization') {\n      throw new Error(\n        'Clerk: Wrap `<CheckoutButton for=\"organization\" />` with a check for an active organization. Retrieve `orgId` from `useAuth()` and confirm it is defined. For SSR, see: https://clerk.com/docs/reference/backend/types/auth-object#how-to-access-the-auth-object',\n      );\n    }\n\n    children = normalizeWithDefaultValue(children, 'Checkout');\n    const child = assertSingleChild(children)('CheckoutButton');\n\n    const clickHandler = () => {\n      if (!clerk) {\n        return;\n      }\n\n      return clerk.__internal_openCheckout({\n        planId,\n        planPeriod,\n        seatsQuantity,\n        priceId,\n        for: _for,\n        onSubscriptionComplete,\n        newSubscriptionRedirectUrl,\n        ...checkoutProps,\n      });\n    };\n\n    const wrappedChildClickHandler: React.MouseEventHandler = async e => {\n      if (child && typeof child === 'object' && 'props' in child) {\n        await safeExecute(child.props.onClick)(e);\n      }\n      return clickHandler();\n    };\n\n    const childProps = { ...rest, onClick: wrappedChildClickHandler };\n    return React.cloneElement(child as React.ReactElement<unknown>, childProps);\n  },\n  { component: 'CheckoutButton', renderWhileLoading: true },\n);\n","import type { __experimental_PlanDetailsButtonProps } from '@clerk/shared/types';\nimport React from 'react';\n\nimport type { WithClerkProp } from '../types';\nimport { assertSingleChild, normalizeWithDefaultValue, safeExecute } from '../utils';\nimport { withClerk } from './withClerk';\n\n/**\n * A button component that opens the Clerk Plan Details drawer when clicked. This component is part of\n * Clerk's Billing feature which is available under a public beta.\n *\n * @example\n * ```tsx\n * import { Show } from '@clerk/react';\n * import { PlanDetailsButton } from '@clerk/react/experimental';\n *\n * // Basic usage with default \"Plan details\" text\n * function BasicPlanDetails() {\n *   return <PlanDetailsButton planId=\"plan_123\" />;\n * }\n *\n * // Custom button with custom text\n * function CustomPlanDetails() {\n *   return (\n *     <Show when=\"signed-in\">\n *       <PlanDetailsButton planId=\"plan_123\">\n *         <button>View Plan Details</button>\n *       </PlanDetailsButton>\n *     </Show>\n *   );\n * }\n * ```\n *\n * @experimental This is an experimental API for the Billing feature that is available under a public beta, and the API is subject to change. It is advised to [pin](https://clerk.com/docs/pinning) the SDK version and the clerk-js version to avoid breaking changes.\n */\nexport const PlanDetailsButton = withClerk(\n  ({ clerk, children, ...props }: WithClerkProp<React.PropsWithChildren<__experimental_PlanDetailsButtonProps>>) => {\n    const { plan, planId, initialPlanPeriod, planDetailsProps, getContainer, component, ...rest } = props;\n\n    children = normalizeWithDefaultValue(children, 'Plan details');\n    const child = assertSingleChild(children)('PlanDetailsButton');\n\n    const clickHandler = () => {\n      if (!clerk) {\n        return;\n      }\n\n      return clerk.__internal_openPlanDetails({\n        plan,\n        planId,\n        initialPlanPeriod,\n        ...planDetailsProps,\n      } as __experimental_PlanDetailsButtonProps);\n    };\n\n    const wrappedChildClickHandler: React.MouseEventHandler = async e => {\n      if (child && typeof child === 'object' && 'props' in child) {\n        await safeExecute(child.props.onClick)(e);\n      }\n      return clickHandler();\n    };\n\n    const childProps = { ...rest, onClick: wrappedChildClickHandler };\n    return React.cloneElement(child as React.ReactElement<unknown>, childProps);\n  },\n  { component: 'PlanDetailsButton', renderWhileLoading: true },\n);\n","import type { __experimental_SubscriptionDetailsButtonProps } from '@clerk/shared/types';\nimport React from 'react';\n\nimport { useAuth } from '../hooks';\nimport type { WithClerkProp } from '../types';\nimport { assertSingleChild, normalizeWithDefaultValue, safeExecute } from '../utils';\nimport { withClerk } from './withClerk';\n\n/**\n * A button component that opens the Clerk Subscription Details drawer when clicked. Render only when the user is signed in (e.g., wrap with `<Show when=\"signed-in\">`).\n *\n * @example\n * ```tsx\n * import { Show } from '@clerk/react';\n * import { SubscriptionDetailsButton } from '@clerk/react/experimental';\n *\n * // Basic usage with default \"Subscription details\" text\n * function BasicSubscriptionDetails() {\n *   return (\n *     <Show when=\"signed-in\">\n *       <SubscriptionDetailsButton />\n *     </Show>\n *   );\n * }\n *\n * // Custom button with Organization Subscription\n * function OrganizationSubscriptionDetails() {\n *   return (\n *     <Show when=\"signed-in\">\n *       <SubscriptionDetailsButton\n *         for=\"organization\"\n *         onSubscriptionCancel={() => console.log('Subscription canceled')}\n *       >\n *         <button>View Organization Subscription</button>\n *       </SubscriptionDetailsButton>\n *     </Show>\n *   );\n * }\n * ```\n *\n * @throws {Error} When rendered while the user is signed out\n * @throws {Error} When `for=\"organization\"` is used without an Active Organization context\n *\n * @experimental This is an experimental API for the Billing feature that is available under a public beta, and the API is subject to change. It is advised to [pin](https://clerk.com/docs/pinning) the SDK version and the clerk-js version to avoid breaking changes.\n */\nexport const SubscriptionDetailsButton = withClerk(\n  ({\n    clerk,\n    children,\n    ...props\n  }: WithClerkProp<React.PropsWithChildren<__experimental_SubscriptionDetailsButtonProps>>) => {\n    const { for: _for, subscriptionDetailsProps, onSubscriptionCancel, getContainer, component, ...rest } = props;\n    children = normalizeWithDefaultValue(children, 'Subscription details');\n    const child = assertSingleChild(children)('SubscriptionDetailsButton');\n\n    const { userId, orgId } = useAuth();\n\n    if (userId === null) {\n      throw new Error(\n        'Clerk: Ensure that `<SubscriptionDetailsButton />` is rendered only when the user is signed in (wrap with `<Show when=\"signed-in\">` or guard with `useAuth()`).',\n      );\n    }\n\n    if (orgId === null && _for === 'organization') {\n      throw new Error(\n        'Clerk: Wrap `<SubscriptionDetailsButton for=\"organization\" />` with a check for an active organization. Retrieve `orgId` from `useAuth()` and confirm it is defined. For SSR, see: https://clerk.com/docs/reference/backend/types/auth-object#how-to-access-the-auth-object',\n      );\n    }\n\n    const clickHandler = () => {\n      if (!clerk) {\n        return;\n      }\n\n      return clerk.__internal_openSubscriptionDetails({\n        for: _for,\n        onSubscriptionCancel,\n        ...subscriptionDetailsProps,\n      });\n    };\n\n    const wrappedChildClickHandler: React.MouseEventHandler = async e => {\n      if (child && typeof child === 'object' && 'props' in child) {\n        await safeExecute(child.props.onClick)(e);\n      }\n      return clickHandler();\n    };\n\n    const childProps = { ...rest, onClick: wrappedChildClickHandler };\n    return React.cloneElement(child as React.ReactElement<unknown>, childProps);\n  },\n  { component: 'SubscriptionDetailsButton', renderWhileLoading: true },\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+CA,MAAa,iBAAiB,WAC3B,EAAE,OAAO,UAAU,GAAG,YAAwF;CAC7G,MAAM,EACJ,QACA,YACA,eACA,SACA,KAAK,MACL,wBACA,4BACA,eACA,cACA,WACA,GAAG,SACD;CAEJ,MAAM,EAAE,QAAQ,UAAU,QAAQ;CAElC,IAAI,WAAW,MACb,MAAM,IAAI,MACR,wJACF;CAGF,IAAI,UAAU,QAAQ,SAAS,gBAC7B,MAAM,IAAI,MACR,oQACF;CAGF,WAAW,0BAA0B,UAAU,UAAU;CACzD,MAAM,QAAQ,kBAAkB,QAAQ,CAAC,CAAC,gBAAgB;CAE1D,MAAM,qBAAqB;EACzB,IAAI,CAAC,OACH;EAGF,OAAO,MAAM,wBAAwB;GACnC;GACA;GACA;GACA;GACA,KAAK;GACL;GACA;GACA,GAAG;EACL,CAAC;CACH;CAEA,MAAM,2BAAoD,OAAM,MAAK;EACnE,IAAI,SAAS,OAAO,UAAU,YAAY,WAAW,OACnD,MAAM,YAAY,MAAM,MAAM,OAAO,CAAC,CAAC,CAAC;EAE1C,OAAO,aAAa;CACtB;CAEA,MAAM,aAAa;EAAE,GAAG;EAAM,SAAS;CAAyB;CAChE,OAAO,MAAM,aAAa,OAAsC,UAAU;AAC5E,GACA;CAAE,WAAW;CAAkB,oBAAoB;AAAK,CAC1D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACzEA,MAAa,oBAAoB,WAC9B,EAAE,OAAO,UAAU,GAAG,YAA2F;CAChH,MAAM,EAAE,MAAM,QAAQ,mBAAmB,kBAAkB,cAAc,WAAW,GAAG,SAAS;CAEhG,WAAW,0BAA0B,UAAU,cAAc;CAC7D,MAAM,QAAQ,kBAAkB,QAAQ,CAAC,CAAC,mBAAmB;CAE7D,MAAM,qBAAqB;EACzB,IAAI,CAAC,OACH;EAGF,OAAO,MAAM,2BAA2B;GACtC;GACA;GACA;GACA,GAAG;EACL,CAA0C;CAC5C;CAEA,MAAM,2BAAoD,OAAM,MAAK;EACnE,IAAI,SAAS,OAAO,UAAU,YAAY,WAAW,OACnD,MAAM,YAAY,MAAM,MAAM,OAAO,CAAC,CAAC,CAAC;EAE1C,OAAO,aAAa;CACtB;CAEA,MAAM,aAAa;EAAE,GAAG;EAAM,SAAS;CAAyB;CAChE,OAAO,MAAM,aAAa,OAAsC,UAAU;AAC5E,GACA;CAAE,WAAW;CAAqB,oBAAoB;AAAK,CAC7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACrBA,MAAa,4BAA4B,WACtC,EACC,OACA,UACA,GAAG,YACwF;CAC3F,MAAM,EAAE,KAAK,MAAM,0BAA0B,sBAAsB,cAAc,WAAW,GAAG,SAAS;CACxG,WAAW,0BAA0B,UAAU,sBAAsB;CACrE,MAAM,QAAQ,kBAAkB,QAAQ,CAAC,CAAC,2BAA2B;CAErE,MAAM,EAAE,QAAQ,UAAU,QAAQ;CAElC,IAAI,WAAW,MACb,MAAM,IAAI,MACR,mKACF;CAGF,IAAI,UAAU,QAAQ,SAAS,gBAC7B,MAAM,IAAI,MACR,+QACF;CAGF,MAAM,qBAAqB;EACzB,IAAI,CAAC,OACH;EAGF,OAAO,MAAM,mCAAmC;GAC9C,KAAK;GACL;GACA,GAAG;EACL,CAAC;CACH;CAEA,MAAM,2BAAoD,OAAM,MAAK;EACnE,IAAI,SAAS,OAAO,UAAU,YAAY,WAAW,OACnD,MAAM,YAAY,MAAM,MAAM,OAAO,CAAC,CAAC,CAAC;EAE1C,OAAO,aAAa;CACtB;CAEA,MAAM,aAAa;EAAE,GAAG;EAAM,SAAS;CAAyB;CAChE,OAAO,MAAM,aAAa,OAAsC,UAAU;AAC5E,GACA;CAAE,WAAW;CAA6B,oBAAoB;AAAK,CACrE"}