autumn-js 0.0.103 → 0.0.105

package/dist/libraries/react/components/pricing-table/pricing-table-synced.js

@@ -42,7 +42,7 @@ __export(pricing_table_synced_exports, {
   usePricingTableContext: () => usePricingTableContext
 });
 module.exports = __toCommonJS(pricing_table_synced_exports);
-var import_react8 = __toESM(require("react"));
+var import_react10 = __toESM(require("react"));
 
 // src/libraries/react/BaseAutumnProvider.tsx
 var import_react3 = require("react");
@@ -96,6 +96,12 @@ var AutumnError = class _AutumnError extends Error {
 };
 
 // src/sdk/general/genMethods.ts
+var handleCheckout = async ({
+  instance,
+  params
+}) => {
+  return instance.post("/checkout", params);
+};
 var handleAttach = async ({
   instance,
   params
@@ -114,18 +120,6 @@ var handleCancel = async ({
 }) => {
   return instance.post("/cancel", params);
 };
-var handleEntitled = async ({
-  instance,
-  params
-}) => {
-  return instance.post("/entitled", params);
-};
-var handleEvent = async ({
-  instance,
-  params
-}) => {
-  return instance.post("/events", params);
-};
 var handleTrack = async ({
   instance,
   params
@@ -472,6 +466,13 @@ var Autumn = class {
   products = productMethods(this);
   entities = entityMethods(this);
   referrals = referralMethods(this);
+  static checkout = (params) => staticWrapper(handleCheckout, void 0, { params });
+  async checkout(params) {
+    return handleCheckout({
+      instance: this,
+      params
+    });
+  }
   static attach = (params) => staticWrapper(handleAttach, void 0, { params });
   static usage = (params) => staticWrapper(handleUsage, void 0, { params });
   async attach(params) {
@@ -494,21 +495,6 @@ var Autumn = class {
       params
     });
   }
-  /**
-   * @deprecated This method is deprecated and will be removed in a future version.
-   * Please use the new check() method instead.
-   */
-  static entitled = (params) => staticWrapper(handleEntitled, void 0, { params });
-  /**
-   * @deprecated This method is deprecated and will be removed in a future version.
-   * Please use the new check() method instead.
-   */
-  async entitled(params) {
-    return handleEntitled({
-      instance: this,
-      params
-    });
-  }
   static check = (params) => staticWrapper(handleCheck, void 0, { params });
   async check(params) {
     return handleCheck({
@@ -516,21 +502,6 @@ var Autumn = class {
       params
     });
   }
-  /**
-   * @deprecated This method is deprecated and will be removed in a future version.
-   * Please use the new track() method instead.
-   */
-  static event = (params) => staticWrapper(handleEvent, void 0, { params });
-  /**
-   * @deprecated This method is deprecated and will be removed in a future version.
-   * Please use the new track() method instead.
-   */
-  async event(params) {
-    return handleEvent({
-      instance: this,
-      params
-    });
-  }
   static track = (params) => staticWrapper(handleTrack, void 0, { params });
   async track(params) {
     return handleTrack({
@@ -555,44 +526,6 @@ var EntityDataSchema = import_zod.z.object({
 
 // src/sdk/general/genTypes.ts
 var import_zod2 = require("zod");
-var AttachFeatureOptionsSchema = import_zod2.z.object({
-  feature_id: import_zod2.z.string(),
-  quantity: import_zod2.z.number()
-});
-var AttachParamsSchema = import_zod2.z.object({
-  customer_id: import_zod2.z.string(),
-  product_id: import_zod2.z.string().optional(),
-  entity_id: import_zod2.z.string().optional(),
-  options: import_zod2.z.array(
-    import_zod2.z.object({
-      feature_id: import_zod2.z.string(),
-      quantity: import_zod2.z.number()
-    })
-  ).optional(),
-  product_ids: import_zod2.z.array(import_zod2.z.string()).optional(),
-  // If set, will attach multiple products to the customer (cannot be used with product_id)
-  free_trial: import_zod2.z.boolean().optional(),
-  // Default is true -- if set to false, will bypass product free trial
-  success_url: import_zod2.z.string().optional(),
-  // Passed to Stripe
-  metadata: import_zod2.z.record(import_zod2.z.string()).optional(),
-  // Passed to Stripe
-  force_checkout: import_zod2.z.boolean().optional(),
-  // Default is false -- if set to true, will force the customer to checkout (not allowed for upgrades / downgrades)
-  customer_data: import_zod2.z.any().optional(),
-  entity_data: import_zod2.z.any().optional(),
-  checkout_session_params: import_zod2.z.record(import_zod2.z.any()).optional(),
-  // Passed to Stripe
-  reward: import_zod2.z.string().optional()
-});
-var AttachResultSchema = import_zod2.z.object({
-  checkout_url: import_zod2.z.string().optional(),
-  customer_id: import_zod2.z.string(),
-  product_ids: import_zod2.z.array(import_zod2.z.string()),
-  code: import_zod2.z.string(),
-  message: import_zod2.z.string(),
-  customer_data: import_zod2.z.any().optional()
-});
 var CancelParamsSchema = import_zod2.z.object({
   customer_id: import_zod2.z.string(),
   product_id: import_zod2.z.string(),
@@ -646,6 +579,11 @@ var CustomerExpandEnum = import_zod3.z.enum([
 
 // src/sdk/customers/cusTypes.ts
 var import_zod4 = require("zod");
+var CustomerDataSchema = import_zod4.z.object({
+  name: import_zod4.z.string().nullish(),
+  email: import_zod4.z.string().nullish(),
+  fingerprint: import_zod4.z.string().nullish()
+});
 var CreateCustomerParamsSchema = import_zod4.z.object({
   id: import_zod4.z.string().nullish(),
   email: import_zod4.z.string().nullish(),
@@ -669,6 +607,44 @@ var RedeemReferralCodeParamsSchema = import_zod5.z.object({
   customer_id: import_zod5.z.string()
 });
 
+// src/sdk/general/attachTypes.ts
+var import_zod6 = require("zod");
+var AttachFeatureOptionsSchema = import_zod6.z.object({
+  feature_id: import_zod6.z.string(),
+  quantity: import_zod6.z.number()
+});
+var AttachParamsSchema = import_zod6.z.object({
+  customer_id: import_zod6.z.string(),
+  product_id: import_zod6.z.string().optional(),
+  entity_id: import_zod6.z.string().optional(),
+  options: import_zod6.z.array(AttachFeatureOptionsSchema).optional(),
+  product_ids: import_zod6.z.array(import_zod6.z.string()).optional(),
+  free_trial: import_zod6.z.boolean().optional(),
+  success_url: import_zod6.z.string().optional(),
+  metadata: import_zod6.z.record(import_zod6.z.string()).optional(),
+  force_checkout: import_zod6.z.boolean().optional(),
+  customer_data: CustomerDataSchema.optional(),
+  entity_data: import_zod6.z.any().optional(),
+  checkout_session_params: import_zod6.z.record(import_zod6.z.any()).optional(),
+  reward: import_zod6.z.string().optional()
+});
+var AttachResultSchema = import_zod6.z.object({
+  checkout_url: import_zod6.z.string().optional(),
+  customer_id: import_zod6.z.string(),
+  product_ids: import_zod6.z.array(import_zod6.z.string()),
+  code: import_zod6.z.string(),
+  message: import_zod6.z.string(),
+  customer_data: import_zod6.z.any().optional()
+});
+var CheckoutParamsSchema = import_zod6.z.object({
+  customer_id: import_zod6.z.string(),
+  product_id: import_zod6.z.string(),
+  entity_id: import_zod6.z.string().optional(),
+  success_url: import_zod6.z.string().optional(),
+  customer_data: CustomerDataSchema.optional(),
+  options: import_zod6.z.array(AttachFeatureOptionsSchema).optional()
+});
+
 // src/libraries/react/errorUtils/logFetchError.ts
 var logFetchError = ({
   method,
@@ -744,9 +720,13 @@ async function deleteEntityMethod(entityId) {
 }
 
 // src/libraries/react/client/clientGenMethods.ts
+async function checkoutMethod(params) {
+  let snakeParams = toSnakeCase(params);
+  const res = await this.post(`${this.prefix}/checkout`, snakeParams);
+  return res;
+}
 async function attachMethod(params) {
-  let { dialog, ...rest } = params;
-  let snakeParams = toSnakeCase(rest, ["checkoutSessionparams"]);
+  let snakeParams = toSnakeCase(params, ["checkoutSessionparams"]);
   const res = await this.post(`${this.prefix}/attach`, snakeParams);
   return res;
 }
@@ -953,6 +933,7 @@ var AutumnClient = class {
     return await getPricingTableMethod.bind(this)();
   }
   attach = attachMethod.bind(this);
+  checkout = checkoutMethod.bind(this);
   cancel = cancelMethod.bind(this);
   check = checkMethod.bind(this);
   track = trackMethod.bind(this);
@@ -1173,15 +1154,13 @@ var defaultSWRConfig = {
 };
 var usePricingTableBase = ({
   AutumnContext: AutumnContext2,
-  params,
-  authClient
+  params
 }) => {
   const context = useAutumnContext({
     AutumnContext: AutumnContext2,
-    name: "usePricingTable",
-    errorIfNotInitialized: !authClient
+    name: "usePricingTable"
   });
-  const client = authClient ? authClient.autumn : context.client;
+  const client = context.client;
   const fetcher = async () => {
     try {
       const { data: data2, error: error2 } = await client.products.list();
@@ -1201,7 +1180,6 @@ var usePricingTableBase = ({
   );
   return {
     products: mergeProductDetails(data || [], params?.productDetails),
-    // products: data || [],
     isLoading: !error && !data,
     error,
     refetch: mutate
@@ -1211,20 +1189,16 @@ var usePricingTableBase = ({
 // src/libraries/react/hooks/useAutumnBase.tsx
 var useAutumnBase = ({
   AutumnContext: AutumnContext2,
-  authClient,
   refetchCustomer
 }) => {
   const context = useAutumnContext({
     AutumnContext: AutumnContext2,
-    name: "useAutumn",
-    errorIfNotInitialized: !authClient
+    name: "useAutumn"
   });
   const { attachDialog, paywallDialog } = context;
-  const client = authClient ? authClient.autumn : context.client;
-  const authClientExists = !!authClient;
+  const client = context.client;
   const { refetch: refetchPricingTable } = usePricingTableBase({
-    AutumnContext: AutumnContext2,
-    authClient
+    AutumnContext: AutumnContext2
   });
   let {
     open: attachOpen,
@@ -1259,8 +1233,29 @@ var useAutumnBase = ({
     }
     return result;
   };
+  const checkout = async (params) => {
+    const { data, error } = await client.checkout(params);
+    const { dialog, ...rest } = params;
+    if (error) {
+      return { data, error };
+    }
+    if (data.url) {
+      if (params.openInNewTab) {
+        window.open(data.url, "_blank");
+      } else {
+        window.location.href = data.url;
+      }
+      return { data, error };
+    }
+    if (params.dialog) {
+      setAttachProps({ checkoutResult: data, attachParams: rest });
+      setAttachComponent(params.dialog);
+      setAttachOpen(true);
+    }
+    return { data, error };
+  };
   const attachWithDialog = async (params) => {
-    let { dialog, ...rest } = params;
+    let { ...rest } = params;
     const { productId, entityId, entityData } = params;
     const checkRes = await client.check({
       productId,
@@ -1281,14 +1276,8 @@ var useAutumnBase = ({
     return checkRes;
   };
   const attach = async (params) => {
-    const { dialog, openInNewTab } = params;
+    const { dialog } = params;
     let finalDialog = dialog;
-    if (dialog && authClientExists) {
-      console.error(
-        "[Autumn] Attach dialog cannot be used with better auth plugin. To use this, please switch to <AutumnProvider /> and autumnHandler. Learn more here: https://docs.useautumn.com/quickstart/quickstart"
-      );
-      return void 0;
-    }
     if (finalDialog && !attachOpen) {
       setAttachComponent(finalDialog);
       return await attachWithDialog(params);
@@ -1304,12 +1293,6 @@ var useAutumnBase = ({
   };
   const check = async (params) => {
     let { dialog, withPreview } = params;
-    if (dialog && authClientExists) {
-      console.error(
-        "[Autumn] Check dialog cannot be used with better auth plugin. To use this, please switch to <AutumnProvider /> and autumnHandler. Learn more here: https://docs.useautumn.com/quickstart/quickstart"
-      );
-      return void 0;
-    }
     if (dialog) {
       setPaywallComponent(dialog);
     }
@@ -1385,7 +1368,8 @@ var useAutumnBase = ({
     track,
     cancel,
     openBillingPortal,
-    setupPayment
+    setupPayment,
+    checkout
   };
 };
 
@@ -1457,7 +1441,8 @@ var emptyDefaultFunctions = {
   track: "",
   cancel: "",
   openBillingPortal: "",
-  setupPayment: ""
+  setupPayment: "",
+  checkout: ""
 };
 var useCustomerBase = ({
   params,
@@ -1546,7 +1531,8 @@ var import_swr3 = __toESM(require("swr"));
 var import_react4 = require("react");
 
 // src/libraries/react/components/attach-dialog/attach-dialog-synced.tsx
-var import_react6 = require("react");
+var AccordionPrimitive2 = __toESM(require("@radix-ui/react-accordion"));
+var import_react8 = require("react");
 
 // ../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
 function r(e) {
@@ -4076,10 +4062,10 @@ function cn(...inputs) {
 // src/libraries/react/components/ui/button.tsx
 var React3 = __toESM(require("react"));
 
-// ../node_modules/.pnpm/@radix-ui+react-slot@1.2.3_@types+react@18.3.23_react@19.1.0/node_modules/@radix-ui/react-slot/dist/index.mjs
+// ../node_modules/.pnpm/@radix-ui+react-slot@1.2.3_@types+react@19.1.8_react@19.1.0/node_modules/@radix-ui/react-slot/dist/index.mjs
 var React2 = __toESM(require("react"), 1);
 
-// ../node_modules/.pnpm/@radix-ui+react-compose-refs@1.1.2_@types+react@18.3.23_react@19.1.0/node_modules/@radix-ui/react-compose-refs/dist/index.mjs
+// ../node_modules/.pnpm/@radix-ui+react-compose-refs@1.1.2_@types+react@19.1.8_react@19.1.0/node_modules/@radix-ui/react-compose-refs/dist/index.mjs
 var React = __toESM(require("react"), 1);
 function setRef(ref, value) {
   if (typeof ref === "function") {
@@ -4116,7 +4102,7 @@ function useComposedRefs(...refs) {
   return React.useCallback(composeRefs(...refs), refs);
 }
 
-// ../node_modules/.pnpm/@radix-ui+react-slot@1.2.3_@types+react@18.3.23_react@19.1.0/node_modules/@radix-ui/react-slot/dist/index.mjs
+// ../node_modules/.pnpm/@radix-ui+react-slot@1.2.3_@types+react@19.1.8_react@19.1.0/node_modules/@radix-ui/react-slot/dist/index.mjs
 var import_jsx_runtime3 = require("react/jsx-runtime");
 // @__NO_SIDE_EFFECTS__
 function createSlot(ownerName) {
@@ -4289,7 +4275,7 @@ Button.displayName = "Button";
 // src/libraries/react/components/ui/dialog.tsx
 var React26 = __toESM(require("react"));
 
-// ../node_modules/.pnpm/@radix-ui+react-dialog@1.1.14_@types+react-dom@19.1.6_@types+react@18.3.23__@types+react@18.3_6jqxb3tj3w4wyxj7ukcjjle5fm/node_modules/@radix-ui/react-dialog/dist/index.mjs
+// ../node_modules/.pnpm/@radix-ui+react-dialog@1.1.14_@types+react-dom@19.1.6_@types+react@19.1.8__@types+react@19.1._xkx6efnpqhhb4lkirxfs4qofci/node_modules/@radix-ui/react-dialog/dist/index.mjs
 var React25 = __toESM(require("react"), 1);
 
 // ../node_modules/.pnpm/@radix-ui+primitive@1.1.2/node_modules/@radix-ui/primitive/dist/index.mjs
@@ -4302,7 +4288,7 @@ function composeEventHandlers(originalEventHandler, ourEventHandler, { checkForD
   };
 }
 
-// ../node_modules/.pnpm/@radix-ui+react-context@1.1.2_@types+react@18.3.23_react@19.1.0/node_modules/@radix-ui/react-context/dist/index.mjs
+// ../node_modules/.pnpm/@radix-ui+react-context@1.1.2_@types+react@19.1.8_react@19.1.0/node_modules/@radix-ui/react-context/dist/index.mjs
 var React4 = __toESM(require("react"), 1);
 var import_jsx_runtime5 = require("react/jsx-runtime");
 function createContext22(rootComponentName, defaultContext) {
@@ -4379,15 +4365,15 @@ function composeContextScopes(...scopes) {
   return createScope;
 }
 
-// ../node_modules/.pnpm/@radix-ui+react-id@1.1.1_@types+react@18.3.23_react@19.1.0/node_modules/@radix-ui/react-id/dist/index.mjs
+// ../node_modules/.pnpm/@radix-ui+react-id@1.1.1_@types+react@19.1.8_react@19.1.0/node_modules/@radix-ui/react-id/dist/index.mjs
 var React6 = __toESM(require("react"), 1);
 
-// ../node_modules/.pnpm/@radix-ui+react-use-layout-effect@1.1.1_@types+react@18.3.23_react@19.1.0/node_modules/@radix-ui/react-use-layout-effect/dist/index.mjs
+// ../node_modules/.pnpm/@radix-ui+react-use-layout-effect@1.1.1_@types+react@19.1.8_react@19.1.0/node_modules/@radix-ui/react-use-layout-effect/dist/index.mjs
 var React5 = __toESM(require("react"), 1);
 var useLayoutEffect2 = globalThis?.document ? React5.useLayoutEffect : () => {
 };
 
-// ../node_modules/.pnpm/@radix-ui+react-id@1.1.1_@types+react@18.3.23_react@19.1.0/node_modules/@radix-ui/react-id/dist/index.mjs
+// ../node_modules/.pnpm/@radix-ui+react-id@1.1.1_@types+react@19.1.8_react@19.1.0/node_modules/@radix-ui/react-id/dist/index.mjs
 var useReactId = React6[" useId ".trim().toString()] || (() => void 0);
 var count = 0;
 function useId(deterministicId) {
@@ -4398,7 +4384,7 @@ function useId(deterministicId) {
   return deterministicId || (id ? `radix-${id}` : "");
 }
 
-// ../node_modules/.pnpm/@radix-ui+react-use-controllable-state@1.2.2_@types+react@18.3.23_react@19.1.0/node_modules/@radix-ui/react-use-controllable-state/dist/index.mjs
+// ../node_modules/.pnpm/@radix-ui+react-use-controllable-state@1.2.2_@types+react@19.1.8_react@19.1.0/node_modules/@radix-ui/react-use-controllable-state/dist/index.mjs
 var React7 = __toESM(require("react"), 1);
 var React22 = __toESM(require("react"), 1);
 var useInsertionEffect = React7[" useInsertionEffect ".trim().toString()] || useLayoutEffect2;
@@ -4467,10 +4453,10 @@ function isFunction(value) {
 }
 var SYNC_STATE = Symbol("RADIX:SYNC_STATE");
 
-// ../node_modules/.pnpm/@radix-ui+react-dismissable-layer@1.1.10_@types+react-dom@19.1.6_@types+react@18.3.23__@types_drwlkfjdq4wgdhzmir3o6m26pm/node_modules/@radix-ui/react-dismissable-layer/dist/index.mjs
+// ../node_modules/.pnpm/@radix-ui+react-dismissable-layer@1.1.10_@types+react-dom@19.1.6_@types+react@19.1.8__@types+_ya5augm4xgo65hmrlxfyu743vi/node_modules/@radix-ui/react-dismissable-layer/dist/index.mjs
 var React11 = __toESM(require("react"), 1);
 
-// ../node_modules/.pnpm/@radix-ui+react-primitive@2.1.3_@types+react-dom@19.1.6_@types+react@18.3.23__@types+react@18_nioct6cchui7iasnxutwakzwo4/node_modules/@radix-ui/react-primitive/dist/index.mjs
+// ../node_modules/.pnpm/@radix-ui+react-primitive@2.1.3_@types+react-dom@19.1.6_@types+react@19.1.8__@types+react@19._sqnj4wa3mllckai5din6afvope/node_modules/@radix-ui/react-primitive/dist/index.mjs
 var React8 = __toESM(require("react"), 1);
 var ReactDOM = __toESM(require("react-dom"), 1);
 var import_jsx_runtime6 = require("react/jsx-runtime");
@@ -4510,7 +4496,7 @@ function dispatchDiscreteCustomEvent(target, event) {
   if (target) ReactDOM.flushSync(() => target.dispatchEvent(event));
 }
 
-// ../node_modules/.pnpm/@radix-ui+react-use-callback-ref@1.1.1_@types+react@18.3.23_react@19.1.0/node_modules/@radix-ui/react-use-callback-ref/dist/index.mjs
+// ../node_modules/.pnpm/@radix-ui+react-use-callback-ref@1.1.1_@types+react@19.1.8_react@19.1.0/node_modules/@radix-ui/react-use-callback-ref/dist/index.mjs
 var React9 = __toESM(require("react"), 1);
 function useCallbackRef(callback) {
   const callbackRef = React9.useRef(callback);
@@ -4520,7 +4506,7 @@ function useCallbackRef(callback) {
   return React9.useMemo(() => (...args) => callbackRef.current?.(...args), []);
 }
 
-// ../node_modules/.pnpm/@radix-ui+react-use-escape-keydown@1.1.1_@types+react@18.3.23_react@19.1.0/node_modules/@radix-ui/react-use-escape-keydown/dist/index.mjs
+// ../node_modules/.pnpm/@radix-ui+react-use-escape-keydown@1.1.1_@types+react@19.1.8_react@19.1.0/node_modules/@radix-ui/react-use-escape-keydown/dist/index.mjs
 var React10 = __toESM(require("react"), 1);
 function useEscapeKeydown(onEscapeKeyDownProp, ownerDocument = globalThis?.document) {
   const onEscapeKeyDown = useCallbackRef(onEscapeKeyDownProp);
@@ -4535,7 +4521,7 @@ function useEscapeKeydown(onEscapeKeyDownProp, ownerDocument = globalThis?.docum
   }, [onEscapeKeyDown, ownerDocument]);
 }
 
-// ../node_modules/.pnpm/@radix-ui+react-dismissable-layer@1.1.10_@types+react-dom@19.1.6_@types+react@18.3.23__@types_drwlkfjdq4wgdhzmir3o6m26pm/node_modules/@radix-ui/react-dismissable-layer/dist/index.mjs
+// ../node_modules/.pnpm/@radix-ui+react-dismissable-layer@1.1.10_@types+react-dom@19.1.6_@types+react@19.1.8__@types+_ya5augm4xgo65hmrlxfyu743vi/node_modules/@radix-ui/react-dismissable-layer/dist/index.mjs
 var import_jsx_runtime7 = require("react/jsx-runtime");
 var DISMISSABLE_LAYER_NAME = "DismissableLayer";
 var CONTEXT_UPDATE = "dismissableLayer.update";
@@ -4740,7 +4726,7 @@ function handleAndDispatchCustomEvent(name, handler, detail, { discrete }) {
   }
 }
 
-// ../node_modules/.pnpm/@radix-ui+react-focus-scope@1.1.7_@types+react-dom@19.1.6_@types+react@18.3.23__@types+react@_tzcmconc5ragkl5g7l4v5nw77e/node_modules/@radix-ui/react-focus-scope/dist/index.mjs
+// ../node_modules/.pnpm/@radix-ui+react-focus-scope@1.1.7_@types+react-dom@19.1.6_@types+react@19.1.8__@types+react@1_7liqdxmess7vaws2bkjw22mwva/node_modules/@radix-ui/react-focus-scope/dist/index.mjs
 var React12 = __toESM(require("react"), 1);
 var import_jsx_runtime8 = require("react/jsx-runtime");
 var AUTOFOCUS_ON_MOUNT = "focusScope.autoFocusOnMount";
@@ -4944,7 +4930,7 @@ function removeLinks(items) {
   return items.filter((item) => item.tagName !== "A");
 }
 
-// ../node_modules/.pnpm/@radix-ui+react-portal@1.1.9_@types+react-dom@19.1.6_@types+react@18.3.23__@types+react@18.3._i6nxrodwqs37ebgrrch2pubydm/node_modules/@radix-ui/react-portal/dist/index.mjs
+// ../node_modules/.pnpm/@radix-ui+react-portal@1.1.9_@types+react-dom@19.1.6_@types+react@19.1.8__@types+react@19.1.8_5jmzxxd65wsdfod4yurl7mkae4/node_modules/@radix-ui/react-portal/dist/index.mjs
 var React13 = __toESM(require("react"), 1);
 var import_react_dom = __toESM(require("react-dom"), 1);
 var import_jsx_runtime9 = require("react/jsx-runtime");
@@ -4958,7 +4944,7 @@ var Portal = React13.forwardRef((props, forwardedRef) => {
 });
 Portal.displayName = PORTAL_NAME;
 
-// ../node_modules/.pnpm/@radix-ui+react-presence@1.1.4_@types+react-dom@19.1.6_@types+react@18.3.23__@types+react@18._bzol5sev26xbtplj3ab5nkoo5a/node_modules/@radix-ui/react-presence/dist/index.mjs
+// ../node_modules/.pnpm/@radix-ui+react-presence@1.1.4_@types+react-dom@19.1.6_@types+react@19.1.8__@types+react@19.1_2lguv7jzxii6s3eigxktbpwkji/node_modules/@radix-ui/react-presence/dist/index.mjs
 var React23 = __toESM(require("react"), 1);
 var React14 = __toESM(require("react"), 1);
 function useStateMachine(initialState, machine) {
@@ -5084,7 +5070,7 @@ function getElementRef2(element) {
   return element.props.ref || element.ref;
 }
 
-// ../node_modules/.pnpm/@radix-ui+react-focus-guards@1.1.2_@types+react@18.3.23_react@19.1.0/node_modules/@radix-ui/react-focus-guards/dist/index.mjs
+// ../node_modules/.pnpm/@radix-ui+react-focus-guards@1.1.2_@types+react@19.1.8_react@19.1.0/node_modules/@radix-ui/react-focus-guards/dist/index.mjs
 var React15 = __toESM(require("react"), 1);
 var count2 = 0;
 function useFocusGuards() {
@@ -5144,19 +5130,19 @@ function __spreadArray(to, from, pack) {
   return to.concat(ar || Array.prototype.slice.call(from));
 }
 
-// ../node_modules/.pnpm/react-remove-scroll@2.7.1_@types+react@18.3.23_react@19.1.0/node_modules/react-remove-scroll/dist/es2015/Combination.js
+// ../node_modules/.pnpm/react-remove-scroll@2.7.1_@types+react@19.1.8_react@19.1.0/node_modules/react-remove-scroll/dist/es2015/Combination.js
 var React24 = __toESM(require("react"));
 
-// ../node_modules/.pnpm/react-remove-scroll@2.7.1_@types+react@18.3.23_react@19.1.0/node_modules/react-remove-scroll/dist/es2015/UI.js
+// ../node_modules/.pnpm/react-remove-scroll@2.7.1_@types+react@19.1.8_react@19.1.0/node_modules/react-remove-scroll/dist/es2015/UI.js
 var React18 = __toESM(require("react"));
 
-// ../node_modules/.pnpm/react-remove-scroll-bar@2.3.8_@types+react@18.3.23_react@19.1.0/node_modules/react-remove-scroll-bar/dist/es2015/constants.js
+// ../node_modules/.pnpm/react-remove-scroll-bar@2.3.8_@types+react@19.1.8_react@19.1.0/node_modules/react-remove-scroll-bar/dist/es2015/constants.js
 var zeroRightClassName = "right-scroll-bar-position";
 var fullWidthClassName = "width-before-scroll-bar";
 var noScrollbarsClassName = "with-scroll-bars-hidden";
 var removedBarSizeVariable = "--removed-body-scroll-bar-size";
 
-// ../node_modules/.pnpm/use-callback-ref@1.3.3_@types+react@18.3.23_react@19.1.0/node_modules/use-callback-ref/dist/es2015/assignRef.js
+// ../node_modules/.pnpm/use-callback-ref@1.3.3_@types+react@19.1.8_react@19.1.0/node_modules/use-callback-ref/dist/es2015/assignRef.js
 function assignRef(ref, value) {
   if (typeof ref === "function") {
     ref(value);
@@ -5166,7 +5152,7 @@ function assignRef(ref, value) {
   return ref;
 }
 
-// ../node_modules/.pnpm/use-callback-ref@1.3.3_@types+react@18.3.23_react@19.1.0/node_modules/use-callback-ref/dist/es2015/useRef.js
+// ../node_modules/.pnpm/use-callback-ref@1.3.3_@types+react@19.1.8_react@19.1.0/node_modules/use-callback-ref/dist/es2015/useRef.js
 var import_react5 = require("react");
 function useCallbackRef2(initialValue, callback) {
   var ref = (0, import_react5.useState)(function() {
@@ -5194,7 +5180,7 @@ function useCallbackRef2(initialValue, callback) {
   return ref.facade;
 }
 
-// ../node_modules/.pnpm/use-callback-ref@1.3.3_@types+react@18.3.23_react@19.1.0/node_modules/use-callback-ref/dist/es2015/useMergeRef.js
+// ../node_modules/.pnpm/use-callback-ref@1.3.3_@types+react@19.1.8_react@19.1.0/node_modules/use-callback-ref/dist/es2015/useMergeRef.js
 var React16 = __toESM(require("react"));
 var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React16.useLayoutEffect : React16.useEffect;
 var currentValues = /* @__PURE__ */ new WeakMap();
@@ -5226,7 +5212,7 @@ function useMergeRefs(refs, defaultValue) {
   return callbackRef;
 }
 
-// ../node_modules/.pnpm/use-sidecar@1.1.3_@types+react@18.3.23_react@19.1.0/node_modules/use-sidecar/dist/es2015/medium.js
+// ../node_modules/.pnpm/use-sidecar@1.1.3_@types+react@19.1.8_react@19.1.0/node_modules/use-sidecar/dist/es2015/medium.js
 function ItoI(a) {
   return a;
 }
@@ -5312,7 +5298,7 @@ function createSidecarMedium(options) {
   return medium;
 }
 
-// ../node_modules/.pnpm/use-sidecar@1.1.3_@types+react@18.3.23_react@19.1.0/node_modules/use-sidecar/dist/es2015/exports.js
+// ../node_modules/.pnpm/use-sidecar@1.1.3_@types+react@19.1.8_react@19.1.0/node_modules/use-sidecar/dist/es2015/exports.js
 var React17 = __toESM(require("react"));
 var SideCar = function(_a) {
   var sideCar = _a.sideCar, rest = __rest(_a, ["sideCar"]);
@@ -5331,10 +5317,10 @@ function exportSidecar(medium, exported) {
   return SideCar;
 }
 
-// ../node_modules/.pnpm/react-remove-scroll@2.7.1_@types+react@18.3.23_react@19.1.0/node_modules/react-remove-scroll/dist/es2015/medium.js
+// ../node_modules/.pnpm/react-remove-scroll@2.7.1_@types+react@19.1.8_react@19.1.0/node_modules/react-remove-scroll/dist/es2015/medium.js
 var effectCar = createSidecarMedium();
 
-// ../node_modules/.pnpm/react-remove-scroll@2.7.1_@types+react@18.3.23_react@19.1.0/node_modules/react-remove-scroll/dist/es2015/UI.js
+// ../node_modules/.pnpm/react-remove-scroll@2.7.1_@types+react@19.1.8_react@19.1.0/node_modules/react-remove-scroll/dist/es2015/UI.js
 var nothing = function() {
   return;
 };
@@ -5366,13 +5352,13 @@ RemoveScroll.classNames = {
   zeroRight: zeroRightClassName
 };
 
-// ../node_modules/.pnpm/react-remove-scroll@2.7.1_@types+react@18.3.23_react@19.1.0/node_modules/react-remove-scroll/dist/es2015/SideEffect.js
+// ../node_modules/.pnpm/react-remove-scroll@2.7.1_@types+react@19.1.8_react@19.1.0/node_modules/react-remove-scroll/dist/es2015/SideEffect.js
 var React21 = __toESM(require("react"));
 
-// ../node_modules/.pnpm/react-remove-scroll-bar@2.3.8_@types+react@18.3.23_react@19.1.0/node_modules/react-remove-scroll-bar/dist/es2015/component.js
+// ../node_modules/.pnpm/react-remove-scroll-bar@2.3.8_@types+react@19.1.8_react@19.1.0/node_modules/react-remove-scroll-bar/dist/es2015/component.js
 var React20 = __toESM(require("react"));
 
-// ../node_modules/.pnpm/react-style-singleton@2.2.3_@types+react@18.3.23_react@19.1.0/node_modules/react-style-singleton/dist/es2015/hook.js
+// ../node_modules/.pnpm/react-style-singleton@2.2.3_@types+react@19.1.8_react@19.1.0/node_modules/react-style-singleton/dist/es2015/hook.js
 var React19 = __toESM(require("react"));
 
 // ../node_modules/.pnpm/get-nonce@1.0.1/node_modules/get-nonce/dist/es2015/index.js
@@ -5387,7 +5373,7 @@ var getNonce = function() {
   return void 0;
 };
 
-// ../node_modules/.pnpm/react-style-singleton@2.2.3_@types+react@18.3.23_react@19.1.0/node_modules/react-style-singleton/dist/es2015/singleton.js
+// ../node_modules/.pnpm/react-style-singleton@2.2.3_@types+react@19.1.8_react@19.1.0/node_modules/react-style-singleton/dist/es2015/singleton.js
 function makeStyleTag() {
   if (!document)
     return null;
@@ -5433,7 +5419,7 @@ var stylesheetSingleton = function() {
   };
 };
 
-// ../node_modules/.pnpm/react-style-singleton@2.2.3_@types+react@18.3.23_react@19.1.0/node_modules/react-style-singleton/dist/es2015/hook.js
+// ../node_modules/.pnpm/react-style-singleton@2.2.3_@types+react@19.1.8_react@19.1.0/node_modules/react-style-singleton/dist/es2015/hook.js
 var styleHookSingleton = function() {
   var sheet = stylesheetSingleton();
   return function(styles, isDynamic) {
@@ -5446,7 +5432,7 @@ var styleHookSingleton = function() {
   };
 };
 
-// ../node_modules/.pnpm/react-style-singleton@2.2.3_@types+react@18.3.23_react@19.1.0/node_modules/react-style-singleton/dist/es2015/component.js
+// ../node_modules/.pnpm/react-style-singleton@2.2.3_@types+react@19.1.8_react@19.1.0/node_modules/react-style-singleton/dist/es2015/component.js
 var styleSingleton = function() {
   var useStyle = styleHookSingleton();
   var Sheet = function(_a) {
@@ -5457,7 +5443,7 @@ var styleSingleton = function() {
   return Sheet;
 };
 
-// ../node_modules/.pnpm/react-remove-scroll-bar@2.3.8_@types+react@18.3.23_react@19.1.0/node_modules/react-remove-scroll-bar/dist/es2015/utils.js
+// ../node_modules/.pnpm/react-remove-scroll-bar@2.3.8_@types+react@19.1.8_react@19.1.0/node_modules/react-remove-scroll-bar/dist/es2015/utils.js
 var zeroGap = {
   left: 0,
   top: 0,
@@ -5492,7 +5478,7 @@ var getGapWidth = function(gapMode) {
   };
 };
 
-// ../node_modules/.pnpm/react-remove-scroll-bar@2.3.8_@types+react@18.3.23_react@19.1.0/node_modules/react-remove-scroll-bar/dist/es2015/component.js
+// ../node_modules/.pnpm/react-remove-scroll-bar@2.3.8_@types+react@19.1.8_react@19.1.0/node_modules/react-remove-scroll-bar/dist/es2015/component.js
 var Style = styleSingleton();
 var lockAttribute = "data-scroll-locked";
 var getStyles = function(_a, allowRelative, gapMode, important) {
@@ -5532,7 +5518,7 @@ var RemoveScrollBar = function(_a) {
   return React20.createElement(Style, { styles: getStyles(gap, !noRelative, gapMode, !noImportant ? "!important" : "") });
 };
 
-// ../node_modules/.pnpm/react-remove-scroll@2.7.1_@types+react@18.3.23_react@19.1.0/node_modules/react-remove-scroll/dist/es2015/aggresiveCapture.js
+// ../node_modules/.pnpm/react-remove-scroll@2.7.1_@types+react@19.1.8_react@19.1.0/node_modules/react-remove-scroll/dist/es2015/aggresiveCapture.js
 var passiveSupported = false;
 if (typeof window !== "undefined") {
   try {
@@ -5551,7 +5537,7 @@ if (typeof window !== "undefined") {
 var options;
 var nonPassive = passiveSupported ? { passive: false } : false;
 
-// ../node_modules/.pnpm/react-remove-scroll@2.7.1_@types+react@18.3.23_react@19.1.0/node_modules/react-remove-scroll/dist/es2015/handleScroll.js
+// ../node_modules/.pnpm/react-remove-scroll@2.7.1_@types+react@19.1.8_react@19.1.0/node_modules/react-remove-scroll/dist/es2015/handleScroll.js
 var alwaysContainsScroll = function(node) {
   return node.tagName === "TEXTAREA";
 };
@@ -5651,7 +5637,7 @@ var handleScroll = function(axis, endTarget, event, sourceDelta, noOverscroll) {
   return shouldCancelScroll;
 };
 
-// ../node_modules/.pnpm/react-remove-scroll@2.7.1_@types+react@18.3.23_react@19.1.0/node_modules/react-remove-scroll/dist/es2015/SideEffect.js
+// ../node_modules/.pnpm/react-remove-scroll@2.7.1_@types+react@19.1.8_react@19.1.0/node_modules/react-remove-scroll/dist/es2015/SideEffect.js
 var getTouchXY = function(event) {
   return "changedTouches" in event ? [event.changedTouches[0].clientX, event.changedTouches[0].clientY] : [0, 0];
 };
@@ -5816,10 +5802,10 @@ function getOutermostShadowParent(node) {
   return shadowParent;
 }
 
-// ../node_modules/.pnpm/react-remove-scroll@2.7.1_@types+react@18.3.23_react@19.1.0/node_modules/react-remove-scroll/dist/es2015/sidecar.js
+// ../node_modules/.pnpm/react-remove-scroll@2.7.1_@types+react@19.1.8_react@19.1.0/node_modules/react-remove-scroll/dist/es2015/sidecar.js
 var sidecar_default = exportSidecar(effectCar, RemoveScrollSideCar);
 
-// ../node_modules/.pnpm/react-remove-scroll@2.7.1_@types+react@18.3.23_react@19.1.0/node_modules/react-remove-scroll/dist/es2015/Combination.js
+// ../node_modules/.pnpm/react-remove-scroll@2.7.1_@types+react@19.1.8_react@19.1.0/node_modules/react-remove-scroll/dist/es2015/Combination.js
 var ReactRemoveScroll = React24.forwardRef(function(props, ref) {
   return React24.createElement(RemoveScroll, __assign({}, props, { ref, sideCar: sidecar_default }));
 });
@@ -5947,7 +5933,7 @@ var hideOthers = function(originalTarget, parentNode, markerName) {
   return applyAttributeToOthers(targets, activeParentNode, markerName, "aria-hidden");
 };
 
-// ../node_modules/.pnpm/@radix-ui+react-dialog@1.1.14_@types+react-dom@19.1.6_@types+react@18.3.23__@types+react@18.3_6jqxb3tj3w4wyxj7ukcjjle5fm/node_modules/@radix-ui/react-dialog/dist/index.mjs
+// ../node_modules/.pnpm/@radix-ui+react-dialog@1.1.14_@types+react-dom@19.1.6_@types+react@19.1.8__@types+react@19.1._xkx6efnpqhhb4lkirxfs4qofci/node_modules/@radix-ui/react-dialog/dist/index.mjs
 var import_jsx_runtime10 = require("react/jsx-runtime");
 var DIALOG_NAME = "Dialog";
 var [createDialogContext, createDialogScope] = createContextScope(DIALOG_NAME);
@@ -6265,7 +6251,7 @@ var DialogOverlay2 = React26.forwardRef(({ className, ...props }, ref) => /* @__
   {
     ref,
     className: cn(
-      "au-fixed au-inset-0 au-z-50 au-bg-black/80  data-[state=open]:au-animate-in data-[state=closed]:au-animate-out data-[state=closed]:au-fade-out-0 data-[state=open]:au-fade-in-0",
+      "au-fixed au-inset-0 au-z-50  data-[state=open]:au-animate-in data-[state=closed]:au-animate-out data-[state=closed]:au-fade-out-0 data-[state=open]:au-fade-in-0 au-backdrop-blur-sm au-bg-black/40",
       className
     ),
     ...props
@@ -6343,27 +6329,61 @@ DialogDescription2.displayName = Description.displayName;
 
 // src/libraries/react/components/attach-dialog/lib/attach-content.tsx
 var import_jsx_runtime12 = require("react/jsx-runtime");
-var getAttachContent = (preview) => {
-  const {
-    scenario,
-    product_name,
-    recurring,
-    current_product_name,
-    next_cycle_at
-  } = preview;
-  const nextCycleAtStr = next_cycle_at ? new Date(next_cycle_at).toLocaleDateString() : void 0;
+var getAttachContent = (checkoutResult) => {
+  const { product, current_product, next_cycle } = checkoutResult;
+  const { is_one_off, is_free, has_trial, has_prepaid } = product.properties;
+  const scenario = product.scenario;
+  const nextCycleAtStr = next_cycle ? new Date(next_cycle.starts_at).toLocaleDateString() : void 0;
+  const productName = product.name;
+  if (is_one_off) {
+    return {
+      title: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("p", { children: [
+        "Purchase ",
+        productName
+      ] }),
+      message: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("p", { children: [
+        "By clicking confirm, you will purchase ",
+        productName,
+        " and your card will be charged immediately."
+      ] })
+    };
+  }
+  if (scenario == "active" && has_prepaid) {
+    if (has_prepaid) {
+      return {
+        title: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { children: "Update Plan" }),
+        message: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { children: "Update your prepaid quantity. You'll be charged or credited the prorated difference based on your current billing cycle." })
+      };
+    }
+  }
+  if (has_trial) {
+    return {
+      title: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("p", { children: [
+        "Start trial for ",
+        productName
+      ] }),
+      message: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("p", { children: [
+        "By clicking confirm, you will start a free trial of ",
+        productName,
+        " ",
+        "which ends on ",
+        nextCycleAtStr,
+        "."
+      ] })
+    };
+  }
   switch (scenario) {
     case "scheduled":
       return {
         title: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("p", { children: [
-          product_name,
+          productName,
           " product already scheduled"
         ] }),
         message: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("p", { children: [
           "You are currently on product ",
-          current_product_name,
+          current_product.name,
           " and are scheduled to start ",
-          product_name,
+          productName,
           " on ",
           nextCycleAtStr,
           "."
@@ -6375,38 +6395,37 @@ var getAttachContent = (preview) => {
         message: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { children: "You are already subscribed to this product." })
       };
     case "new":
-      if (recurring) {
-        return {
-          title: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("p", { children: [
-            "Subscribe to ",
-            product_name
-          ] }),
-          message: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("p", { children: [
-            "By clicking confirm, you will be subscribed to ",
-            product_name,
-            " and your card will be charged immediately."
-          ] })
-        };
-      } else {
+      if (is_free) {
         return {
           title: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("p", { children: [
-            "Purchase ",
-            product_name
+            "Enable ",
+            productName
           ] }),
           message: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("p", { children: [
-            "By clicking confirm, you will purchase ",
-            product_name,
-            " and your card will be charged immediately."
+            "By clicking confirm, ",
+            productName,
+            " will be enabled immediately."
           ] })
         };
       }
+      return {
+        title: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("p", { children: [
+          "Subscribe to ",
+          productName
+        ] }),
+        message: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("p", { children: [
+          "By clicking confirm, you will be subscribed to ",
+          productName,
+          " and your card will be charged immediately."
+        ] })
+      };
     case "renew":
       return {
         title: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { children: "Renew" }),
         message: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("p", { children: [
           "By clicking confirm, you will renew your subscription to",
           " ",
-          product_name,
+          productName,
           "."
         ] })
       };
@@ -6414,11 +6433,11 @@ var getAttachContent = (preview) => {
       return {
         title: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("p", { children: [
           "Upgrade to ",
-          product_name
+          productName
         ] }),
         message: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("p", { children: [
           "By clicking confirm, you will upgrade to ",
-          product_name,
+          productName,
           " and your payment method will be charged immediately."
         ] })
       };
@@ -6426,15 +6445,15 @@ var getAttachContent = (preview) => {
       return {
         title: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("p", { children: [
           "Downgrade to ",
-          product_name
+          productName
         ] }),
         message: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("p", { children: [
           "By clicking confirm, your current subscription to",
           " ",
-          current_product_name,
+          current_product.name,
           " will be cancelled and a new subscription to",
           " ",
-          product_name,
+          productName,
           " will begin on ",
           nextCycleAtStr,
           "."
@@ -6445,7 +6464,7 @@ var getAttachContent = (preview) => {
         title: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { children: "Cancel" }),
         message: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("p", { children: [
           "By clicking confirm, your subscription to ",
-          current_product_name,
+          current_product.name,
           " ",
           "will end on ",
           nextCycleAtStr,
@@ -6460,213 +6479,495 @@ var getAttachContent = (preview) => {
   }
 };
 
-// src/libraries/react/components/attach-dialog/attach-dialog-synced.tsx
+// ../node_modules/.pnpm/lucide-react@0.523.0_react@19.1.0/node_modules/lucide-react/dist/esm/createLucideIcon.js
+var import_react7 = require("react");
+
+// ../node_modules/.pnpm/lucide-react@0.523.0_react@19.1.0/node_modules/lucide-react/dist/esm/shared/src/utils.js
+var toKebabCase = (string) => string.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+var toCamelCase = (string) => string.replace(
+  /^([A-Z])|[\s-_]+(\w)/g,
+  (match, p1, p2) => p2 ? p2.toUpperCase() : p1.toLowerCase()
+);
+var toPascalCase = (string) => {
+  const camelCase = toCamelCase(string);
+  return camelCase.charAt(0).toUpperCase() + camelCase.slice(1);
+};
+var mergeClasses = (...classes) => classes.filter((className, index, array) => {
+  return Boolean(className) && className.trim() !== "" && array.indexOf(className) === index;
+}).join(" ").trim();
+var hasA11yProp = (props) => {
+  for (const prop in props) {
+    if (prop.startsWith("aria-") || prop === "role" || prop === "title") {
+      return true;
+    }
+  }
+};
+
+// ../node_modules/.pnpm/lucide-react@0.523.0_react@19.1.0/node_modules/lucide-react/dist/esm/Icon.js
+var import_react6 = require("react");
+
+// ../node_modules/.pnpm/lucide-react@0.523.0_react@19.1.0/node_modules/lucide-react/dist/esm/defaultAttributes.js
+var defaultAttributes = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: 24,
+  height: 24,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: 2,
+  strokeLinecap: "round",
+  strokeLinejoin: "round"
+};
+
+// ../node_modules/.pnpm/lucide-react@0.523.0_react@19.1.0/node_modules/lucide-react/dist/esm/Icon.js
+var Icon = (0, import_react6.forwardRef)(
+  ({
+    color = "currentColor",
+    size = 24,
+    strokeWidth = 2,
+    absoluteStrokeWidth,
+    className = "",
+    children,
+    iconNode,
+    ...rest
+  }, ref) => (0, import_react6.createElement)(
+    "svg",
+    {
+      ref,
+      ...defaultAttributes,
+      width: size,
+      height: size,
+      stroke: color,
+      strokeWidth: absoluteStrokeWidth ? Number(strokeWidth) * 24 / Number(size) : strokeWidth,
+      className: mergeClasses("lucide", className),
+      ...!children && !hasA11yProp(rest) && { "aria-hidden": "true" },
+      ...rest
+    },
+    [
+      ...iconNode.map(([tag, attrs]) => (0, import_react6.createElement)(tag, attrs)),
+      ...Array.isArray(children) ? children : [children]
+    ]
+  )
+);
+
+// ../node_modules/.pnpm/lucide-react@0.523.0_react@19.1.0/node_modules/lucide-react/dist/esm/createLucideIcon.js
+var createLucideIcon = (iconName, iconNode) => {
+  const Component = (0, import_react7.forwardRef)(
+    ({ className, ...props }, ref) => (0, import_react7.createElement)(Icon, {
+      ref,
+      iconNode,
+      className: mergeClasses(
+        `lucide-${toKebabCase(toPascalCase(iconName))}`,
+        `lucide-${iconName}`,
+        className
+      ),
+      ...props
+    })
+  );
+  Component.displayName = toPascalCase(iconName);
+  return Component;
+};
+
+// ../node_modules/.pnpm/lucide-react@0.523.0_react@19.1.0/node_modules/lucide-react/dist/esm/icons/chevron-down.js
+var __iconNode = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
+var ChevronDown = createLucideIcon("chevron-down", __iconNode);
+
+// ../node_modules/.pnpm/lucide-react@0.523.0_react@19.1.0/node_modules/lucide-react/dist/esm/icons/loader-circle.js
+var __iconNode2 = [["path", { d: "M21 12a9 9 0 1 1-6.219-8.56", key: "13zald" }]];
+var LoaderCircle = createLucideIcon("loader-circle", __iconNode2);
+
+// src/libraries/react/components/ui/accordion.tsx
+var React27 = __toESM(require("react"));
+var AccordionPrimitive = __toESM(require("@radix-ui/react-accordion"));
 var import_jsx_runtime13 = require("react/jsx-runtime");
+var Accordion = AccordionPrimitive.Root;
+var AccordionItem = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  AccordionPrimitive.Item,
+  {
+    ref,
+    className: cn("au-border-b", className),
+    ...props
+  }
+));
+AccordionItem.displayName = "AccordionItem";
+var AccordionTrigger = React27.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(AccordionPrimitive.Header, { className: "au-flex", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+  AccordionPrimitive.Trigger,
+  {
+    ref,
+    className: cn(
+      "au-flex au-flex-1 au-items-center au-justify-between au-py-4 au-text-sm au-font-medium au-transition-all hover:au-underline au-text-left [&[data-state=open]>svg]:au-rotate-180",
+      className
+    ),
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ChevronDown, { className: "au-h-4 au-w-4 au-shrink-0 au-text-muted-foreground au-transition-transform au-duration-200" })
+    ]
+  }
+) }));
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
+var AccordionContent = React27.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  AccordionPrimitive.Content,
+  {
+    ref,
+    className: "au-overflow-hidden au-text-sm data-[state=closed]:au-animate-accordion-up data-[state=open]:au-animate-accordion-down",
+    ...props,
+    children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: cn("au-pb-4 au-pt-0", className), children })
+  }
+));
+AccordionContent.displayName = AccordionPrimitive.Content.displayName;
+
+// src/libraries/react/components/ui/popover.tsx
+var React28 = __toESM(require("react"));
+var PopoverPrimitive = __toESM(require("@radix-ui/react-popover"));
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var Popover = PopoverPrimitive.Root;
+var PopoverTrigger = PopoverPrimitive.Trigger;
+var PopoverContent = React28.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(PopoverPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  PopoverPrimitive.Content,
+  {
+    ref,
+    align,
+    sideOffset,
+    className: cn(
+      "au-z-50 au-w-72 au-rounded-md au-border au-bg-popover au-p-4 au-text-popover-foreground au-shadow-md au-outline-none data-[state=open]:au-animate-in data-[state=closed]:au-animate-out data-[state=closed]:au-fade-out-0 data-[state=open]:au-fade-in-0 data-[state=closed]:au-zoom-out-95 data-[state=open]:au-zoom-in-95 data-[side=bottom]:au-slide-in-from-top-2 data-[side=left]:au-slide-in-from-right-2 data-[side=right]:au-slide-in-from-left-2 data-[side=top]:au-slide-in-from-bottom-2 au-origin-[--radix-popover-content-transform-origin]",
+      className
+    ),
+    ...props
+  }
+) }));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+// src/libraries/react/components/ui/input.tsx
+var React29 = __toESM(require("react"));
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var Input = React29.forwardRef(
+  ({ className, type, ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      "input",
+      {
+        type,
+        className: cn(
+          "au-flex au-h-9 au-w-full au-rounded-md au-border au-border-input au-bg-transparent au-px-3 au-py-1 au-text-base au-shadow-sm au-transition-colors file:au-border-0 file:au-bg-transparent file:au-text-sm file:au-font-medium file:au-text-foreground placeholder:au-text-muted-foreground focus-visible:au-outline-none focus-visible:au-ring-1 focus-visible:au-ring-ring disabled:au-cursor-not-allowed disabled:au-opacity-50 md:au-text-sm",
+          className
+        ),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Input.displayName = "Input";
+
+// src/libraries/react/components/attach-dialog/attach-dialog-synced.tsx
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var formatCurrency = ({
+  amount,
+  currency
+}) => {
+  return new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency
+  }).format(amount);
+};
 function AttachDialog(params) {
   const { attach } = useCustomer();
-  const [loading, setLoading] = (0, import_react6.useState)(false);
-  const [optionsInput, setOptionsInput] = (0, import_react6.useState)(
-    params?.preview?.options || []
+  const [checkoutResult, setCheckoutResult] = (0, import_react8.useState)(params?.checkoutResult);
+  (0, import_react8.useEffect)(() => {
+    if (params.checkoutResult) {
+      setCheckoutResult(params.checkoutResult);
+    }
+  }, [params.checkoutResult]);
+  const [loading, setLoading] = (0, import_react8.useState)(false);
+  if (!checkoutResult) {
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, {});
+  }
+  const { open, setOpen } = params;
+  const { title, message } = getAttachContent(checkoutResult);
+  const isFree = checkoutResult?.product.properties?.is_free;
+  const isPaid = isFree === false;
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Dialog2, { open, onOpenChange: setOpen, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(DialogContent2, { className: "au-p-0 au-pt-4 au-gap-0 au-text-foreground au-overflow-hidden au-text-sm", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(DialogTitle2, { className: "au-px-6 au-mb-1", children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "au-px-6 au-mt-1 au-mb-4 au-text-muted-foreground", children: message }),
+    isPaid && checkoutResult && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      PriceInformation,
+      {
+        checkoutResult,
+        setCheckoutResult
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(DialogFooter, { className: "au-flex au-flex-col sm:au-flex-row au-justify-between au-gap-x-4 au-py-2 au-pl-6 au-pr-3 au-bg-secondary au-border-t au-shadow-inner", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      Button,
+      {
+        size: "sm",
+        onClick: async () => {
+          setLoading(true);
+          const options = checkoutResult.options.map((option) => {
+            return {
+              featureId: option.feature_id,
+              quantity: option.quantity
+            };
+          });
+          await attach({
+            productId: checkoutResult.product.id,
+            options
+          });
+          setOpen(false);
+          setLoading(false);
+        },
+        disabled: loading,
+        className: "au-min-w-16 au-flex au-items-center au-gap-2",
+        children: loading ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(LoaderCircle, { className: "au-w-4 au-h-4 au-animate-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "au-whitespace-nowrap au-flex au-gap-1", children: "Confirm" }) })
+      }
+    ) })
+  ] }) });
+}
+function PriceInformation({
+  checkoutResult,
+  setCheckoutResult
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "au-px-6 au-mb-4 au-flex au-flex-col au-gap-4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      ProductItems,
+      {
+        checkoutResult,
+        setCheckoutResult
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "au-flex au-flex-col au-gap-2", children: [
+      checkoutResult?.has_prorations && checkoutResult.lines.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(CheckoutLines, { checkoutResult }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(DueAmounts, { checkoutResult })
+    ] })
+  ] });
+}
+function DueAmounts({ checkoutResult }) {
+  const { next_cycle, product } = checkoutResult;
+  const nextCycleAtStr = next_cycle ? new Date(next_cycle.starts_at).toLocaleDateString() : void 0;
+  const hasUsagePrice = product.items.some(
+    (item) => item.usage_model === "pay_per_use"
   );
-  const getTotalPrice = () => {
-    let sum = due_today?.price || 0;
-    optionsInput.forEach((option) => {
-      if (option.price && option.quantity) {
-        sum += option.price * (option.quantity / option.billing_units);
+  const showNextCycle = next_cycle && next_cycle.total !== checkoutResult.total;
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "au-flex au-flex-col au-gap-1", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "au-flex au-justify-between", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "au-font-medium au-text-md", children: "Total due today" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "au-font-medium au-text-md", children: formatCurrency({
+        amount: checkoutResult?.total,
+        currency: checkoutResult?.currency
+      }) })
+    ] }),
+    showNextCycle && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "au-flex au-justify-between au-text-muted-foreground", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("p", { className: "au-text-md", children: [
+        "Due next cycle (",
+        nextCycleAtStr,
+        ")"
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("p", { className: "au-text-md", children: [
+        formatCurrency({
+          amount: next_cycle.total,
+          currency: checkoutResult?.currency
+        }),
+        hasUsagePrice && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { children: " + usage prices" })
+      ] })
+    ] })
+  ] });
+}
+function ProductItems({
+  checkoutResult,
+  setCheckoutResult
+}) {
+  const isUpdateQuantity = checkoutResult?.product.scenario === "active" && checkoutResult.product.properties.has_prepaid;
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "au-flex au-flex-col au-gap-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "au-text-sm au-font-medium", children: "Price" }),
+    checkoutResult?.product.items.filter((item) => item.type !== "feature").map((item, index) => {
+      if (item.usage_model == "prepaid") {
+        return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          PrepaidItem,
+          {
+            item,
+            checkoutResult,
+            setCheckoutResult
+          },
+          index
+        );
       }
-    });
-    return sum;
-  };
-  (0, import_react6.useEffect)(() => {
-    setOptionsInput(params?.preview?.options || []);
-  }, [params?.preview?.options]);
-  if (!params || !params.preview) {
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_jsx_runtime13.Fragment, {});
-  }
-  const { open, setOpen, preview } = params;
-  const { items, due_today } = preview;
-  const { title, message } = getAttachContent(preview);
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Dialog2, { open, onOpenChange: setOpen, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
-    DialogContent2,
-    {
-      className: cn(
-        "au-p-0 au-pt-4 au-gap-0 au-text-foreground au-overflow-hidden au-text-sm"
-      ),
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DialogTitle2, { className: cn("au-px-6 au-mb-1 "), children: title }),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: cn("au-px-6 au-mt-1 au-mb-4 au-text-muted-foreground"), children: message }),
-        (items || optionsInput.length > 0) && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "au-mb-6 au-px-6", children: [
-          items?.map((item) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(PriceItem, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "au-truncate au-flex-1", children: item.description }),
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children: item.price })
-          ] }, item.description)),
-          optionsInput?.map((option, index) => {
-            return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-              OptionsInput,
-              {
-                option,
-                optionsInput,
-                setOptionsInput,
-                index
-              },
-              option.feature_name
-            );
-          })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(DialogFooter, { className: "au-flex au-flex-col sm:au-flex-row au-justify-between au-gap-x-4 au-py-2 au-pl-6 au-pr-3 au-bg-secondary au-border-t au-shadow-inner", children: [
-          due_today && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(TotalPrice, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children: "Due Today" }),
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children: new Intl.NumberFormat("en-US", {
-              style: "currency",
-              currency: due_today.currency
-            }).format(getTotalPrice()) })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-            Button,
-            {
-              size: "sm",
-              onClick: async () => {
-                setLoading(true);
-                await attach({
-                  productId: preview.product_id,
-                  options: optionsInput.map((option) => ({
-                    featureId: option.feature_id,
-                    quantity: option.quantity || 0
-                  }))
-                });
-                setOpen(false);
-                setLoading(false);
-              },
-              disabled: loading,
-              className: "au-min-w-16 au-flex au-items-center au-gap-2"
-            }
-          )
+      if (isUpdateQuantity) {
+        return null;
+      }
+      return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "au-flex au-justify-between", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "au-text-muted-foreground", children: item.feature ? item.feature.name : "Subscription" }),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("p", { children: [
+          item.display?.primary_text,
+          " ",
+          item.display?.secondary_text
         ] })
-      ]
-    }
-  ) });
+      ] }, index);
+    })
+  ] });
 }
-var PriceItem = ({
-  children,
+function CheckoutLines({ checkoutResult }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Accordion, { type: "single", collapsible: true, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(AccordionItem, { value: "total", className: "au-border-b-0", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(CustomAccordionTrigger, { className: "au-justify-between au-w-full au-my-0 au-py-0 au-border-none", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "au-cursor-pointer au-flex au-items-center au-gap-1 au-w-full au-justify-end", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "au-font-light au-text-muted-foreground", children: "View details" }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        ChevronDown,
+        {
+          className: "au-text-muted-foreground au-mt-0.5 au-rotate-90 au-transition-transform au-duration-200 au-ease-in-out",
+          size: 14
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(AccordionContent, { className: "au-mt-2 au-mb-0 au-pb-2 au-flex au-flex-col au-gap-2", children: checkoutResult?.lines.filter((line) => line.amount != 0).map((line, index) => {
+      return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "au-flex au-justify-between", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "au-text-muted-foreground", children: line.description }),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "au-text-muted-foreground", children: new Intl.NumberFormat("en-US", {
+          style: "currency",
+          currency: checkoutResult?.currency
+        }).format(line.amount) })
+      ] }, index);
+    }) })
+  ] }) });
+}
+function CustomAccordionTrigger({
   className,
+  children,
   ...props
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-    "div",
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(AccordionPrimitive2.Header, { className: "au-flex", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    AccordionPrimitive2.Trigger,
     {
+      "data-slot": "accordion-trigger",
       className: cn(
-        "au-flex au-flex-col au-pb-4 sm:au-pb-0 au-gap-1 sm:au-flex-row au-justify-between sm:au-h-7 sm:au-gap-2 sm:au-items-center",
+        "focus-visible:au-border-ring focus-visible:au-ring-ring/50 au-flex au-flex-1 au-items-start au-justify-between au-gap-4 au-rounded-md au-py-4 au-text-left au-text-sm au-font-medium au-transition-all au-outline-none focus-visible:au-ring-[3px] disabled:au-pointer-events-none disabled:au-opacity-50 [&[data-state=open]_svg]:au-rotate-0",
         className
       ),
       ...props,
       children
     }
-  );
-};
-var OptionsInput = ({
-  className,
-  option,
-  optionsInput,
-  setOptionsInput,
-  index,
-  ...props
-}) => {
-  const { feature_name, billing_units, quantity, price } = option;
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(PriceItem, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children: feature_name }),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-      QuantityInput,
-      {
-        value: quantity ? quantity / billing_units : "",
-        onChange: (e) => {
-          const newOptions = [...optionsInput];
-          newOptions[index].quantity = parseInt(e.target.value) * billing_units;
-          setOptionsInput(newOptions);
-        },
-        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "", children: [
-          "\xD7 $",
-          price,
-          " per ",
-          billing_units === 1 ? " " : billing_units,
-          " ",
-          feature_name
-        ] })
-      },
-      feature_name
-    )
-  ] }, feature_name);
-};
-var QuantityInput = ({
-  children,
-  onChange,
-  value,
-  className,
-  ...props
+  ) });
+}
+var PrepaidItem = ({
+  item,
+  checkoutResult,
+  setCheckoutResult
 }) => {
-  const currentValue = Number(value) || 0;
-  const handleValueChange = (newValue) => {
-    const syntheticEvent = {
-      target: { value: String(newValue) }
-    };
-    onChange(syntheticEvent);
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
-    "div",
-    {
-      className: cn(className, "au-flex au-flex-row au-items-center au-gap-4"),
-      ...props,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "au-flex au-items-center au-gap-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-            Button,
-            {
-              variant: "outline",
-              size: "icon",
-              onClick: () => currentValue > 0 && handleValueChange(currentValue - 1),
-              disabled: currentValue <= 0,
-              className: "au-h-6 au-w-6 au-pb-0.5",
-              children: "-"
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "au-w-8 au-text-center au-text-foreground", children: currentValue }),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-            Button,
-            {
-              variant: "outline",
-              size: "icon",
-              onClick: () => handleValueChange(currentValue + 1),
-              className: "au-h-6 au-w-6 au-pb-0.5",
-              children: "+"
-            }
-          )
-        ] }),
-        children
-      ]
-    }
+  const { quantity = 0, billing_units: billingUnits = 1 } = item;
+  const [quantityInput, setQuantityInput] = (0, import_react8.useState)(
+    (quantity / billingUnits).toString()
   );
-};
-var TotalPrice = ({ children }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "au-w-full au-font-semibold au-flex au-justify-between au-items-center", children });
+  const { checkout } = useCustomer();
+  const [loading, setLoading] = (0, import_react8.useState)(false);
+  const [open, setOpen] = (0, import_react8.useState)(false);
+  const scenario = checkoutResult.product.scenario;
+  const handleSave = async () => {
+    setLoading(true);
+    try {
+      const newOptions = checkoutResult.options.filter((option) => option.feature_id !== item.feature_id).map((option) => {
+        return {
+          featureId: option.feature_id,
+          quantity: option.quantity
+        };
+      });
+      newOptions.push({
+        featureId: item.feature_id,
+        quantity: Number(quantityInput) * billingUnits
+      });
+      const { data, error } = await checkout({
+        productId: checkoutResult.product.id,
+        options: newOptions
+      });
+      if (error) {
+        console.error(error);
+        return;
+      }
+      setCheckoutResult(data);
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setLoading(false);
+      setOpen(false);
+    }
+  };
+  const disableSelection = scenario === "renew";
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "au-flex au-justify-between", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "au-flex au-gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "au-text-muted-foreground", children: item.feature?.name }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Popover, { open, onOpenChange: setOpen, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+          PopoverTrigger,
+          {
+            className: cn(
+              "au-text-muted-foreground au-text-xs au-px-1 au-py-0.5 au-rounded-md au-flex au-items-center au-gap-1 au-bg-accent/80 hover:au-bg-accent hover:au-text-foreground"
+            ),
+            disabled: disableSelection,
+            children: [
+              "Qty: ",
+              quantity,
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ChevronDown, { size: 12 })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+          PopoverContent,
+          {
+            align: "start",
+            className: "au-w-80 au-text-sm au-p-4 au-pt-3 au-flex au-flex-col au-gap-4",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "au-flex au-flex-col au-gap-1", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "au-text-sm au-font-medium", children: item.feature?.name }),
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("p", { className: "au-text-muted-foreground", children: [
+                  item.display?.primary_text,
+                  " ",
+                  item.display?.secondary_text
+                ] })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "au-flex au-justify-between au-items-end", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "au-flex au-gap-2 au-items-center", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                    Input,
+                    {
+                      className: "au-h-7 au-w-16 focus:!au-ring-2",
+                      value: quantityInput,
+                      onChange: (e) => setQuantityInput(e.target.value)
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("p", { className: "au-text-muted-foreground", children: [
+                    billingUnits > 1 && `x ${billingUnits} `,
+                    item.feature?.name
+                  ] })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Button, { onClick: handleSave, className: "au-w-14", children: loading ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(LoaderCircle, { className: "au-text-muted-foreground au-animate-spin !au-w-4 !au-h-4" }) : "Save" })
+              ] })
+            ]
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("p", { children: [
+      item.display?.primary_text,
+      " ",
+      item.display?.secondary_text
+    ] })
+  ] });
 };
 
 // src/libraries/react/components/check-dialog/check-dialog-synced.tsx
-var import_react7 = require("react");
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_react9 = require("react");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 
 // src/libraries/react/components/pricing-table/pricing-table-synced.tsx
-var import_react9 = require("react");
+var import_react11 = require("react");
 
 // src/libraries/react/components/ui/switch.tsx
-var React31 = __toESM(require("react"));
+var React34 = __toESM(require("react"));
 
-// ../node_modules/.pnpm/@radix-ui+react-switch@1.2.5_@types+react-dom@19.1.6_@types+react@18.3.23__@types+react@18.3._6zzey5cj563f4jvdnd6324q4ry/node_modules/@radix-ui/react-switch/dist/index.mjs
-var React30 = __toESM(require("react"), 1);
+// ../node_modules/.pnpm/@radix-ui+react-switch@1.2.5_@types+react-dom@19.1.6_@types+react@19.1.8__@types+react@19.1.8_uhx276sbw7dr3tfricp4xfbxsq/node_modules/@radix-ui/react-switch/dist/index.mjs
+var React33 = __toESM(require("react"), 1);
 
-// ../node_modules/.pnpm/@radix-ui+react-use-previous@1.1.1_@types+react@18.3.23_react@19.1.0/node_modules/@radix-ui/react-use-previous/dist/index.mjs
-var React28 = __toESM(require("react"), 1);
+// ../node_modules/.pnpm/@radix-ui+react-use-previous@1.1.1_@types+react@19.1.8_react@19.1.0/node_modules/@radix-ui/react-use-previous/dist/index.mjs
+var React31 = __toESM(require("react"), 1);
 function usePrevious(value) {
-  const ref = React28.useRef({ value, previous: value });
-  return React28.useMemo(() => {
+  const ref = React31.useRef({ value, previous: value });
+  return React31.useMemo(() => {
     if (ref.current.value !== value) {
       ref.current.previous = ref.current.value;
       ref.current.value = value;
@@ -6675,10 +6976,10 @@ function usePrevious(value) {
   }, [value]);
 }
 
-// ../node_modules/.pnpm/@radix-ui+react-use-size@1.1.1_@types+react@18.3.23_react@19.1.0/node_modules/@radix-ui/react-use-size/dist/index.mjs
-var React29 = __toESM(require("react"), 1);
+// ../node_modules/.pnpm/@radix-ui+react-use-size@1.1.1_@types+react@19.1.8_react@19.1.0/node_modules/@radix-ui/react-use-size/dist/index.mjs
+var React32 = __toESM(require("react"), 1);
 function useSize(element) {
-  const [size, setSize] = React29.useState(void 0);
+  const [size, setSize] = React32.useState(void 0);
   useLayoutEffect2(() => {
     if (element) {
       setSize({ width: element.offsetWidth, height: element.offsetHeight });
@@ -6712,12 +7013,12 @@ function useSize(element) {
   return size;
 }
 
-// ../node_modules/.pnpm/@radix-ui+react-switch@1.2.5_@types+react-dom@19.1.6_@types+react@18.3.23__@types+react@18.3._6zzey5cj563f4jvdnd6324q4ry/node_modules/@radix-ui/react-switch/dist/index.mjs
-var import_jsx_runtime15 = require("react/jsx-runtime");
+// ../node_modules/.pnpm/@radix-ui+react-switch@1.2.5_@types+react-dom@19.1.6_@types+react@19.1.8__@types+react@19.1.8_uhx276sbw7dr3tfricp4xfbxsq/node_modules/@radix-ui/react-switch/dist/index.mjs
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var SWITCH_NAME = "Switch";
 var [createSwitchContext, createSwitchScope] = createContextScope(SWITCH_NAME);
 var [SwitchProvider, useSwitchContext] = createSwitchContext(SWITCH_NAME);
-var Switch = React30.forwardRef(
+var Switch = React33.forwardRef(
   (props, forwardedRef) => {
     const {
       __scopeSwitch,
@@ -6731,9 +7032,9 @@ var Switch = React30.forwardRef(
       form,
       ...switchProps
     } = props;
-    const [button, setButton] = React30.useState(null);
+    const [button, setButton] = React33.useState(null);
     const composedRefs = useComposedRefs(forwardedRef, (node) => setButton(node));
-    const hasConsumerStoppedPropagationRef = React30.useRef(false);
+    const hasConsumerStoppedPropagationRef = React33.useRef(false);
     const isFormControl = button ? form || !!button.closest("form") : true;
     const [checked, setChecked] = useControllableState({
       prop: checkedProp,
@@ -6741,8 +7042,8 @@ var Switch = React30.forwardRef(
       onChange: onCheckedChange,
       caller: SWITCH_NAME
     });
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(SwitchProvider, { scope: __scopeSwitch, checked, disabled, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(SwitchProvider, { scope: __scopeSwitch, checked, disabled, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
         Primitive.button,
         {
           type: "button",
@@ -6764,7 +7065,7 @@ var Switch = React30.forwardRef(
           })
         }
       ),
-      isFormControl && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      isFormControl && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
         SwitchBubbleInput,
         {
           control: button,
@@ -6783,11 +7084,11 @@ var Switch = React30.forwardRef(
 );
 Switch.displayName = SWITCH_NAME;
 var THUMB_NAME = "SwitchThumb";
-var SwitchThumb = React30.forwardRef(
+var SwitchThumb = React33.forwardRef(
   (props, forwardedRef) => {
     const { __scopeSwitch, ...thumbProps } = props;
     const context = useSwitchContext(THUMB_NAME, __scopeSwitch);
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       Primitive.span,
       {
         "data-state": getState2(context.checked),
@@ -6800,7 +7101,7 @@ var SwitchThumb = React30.forwardRef(
 );
 SwitchThumb.displayName = THUMB_NAME;
 var BUBBLE_INPUT_NAME = "SwitchBubbleInput";
-var SwitchBubbleInput = React30.forwardRef(
+var SwitchBubbleInput = React33.forwardRef(
   ({
     __scopeSwitch,
     control,
@@ -6808,11 +7109,11 @@ var SwitchBubbleInput = React30.forwardRef(
     bubbles = true,
     ...props
   }, forwardedRef) => {
-    const ref = React30.useRef(null);
+    const ref = React33.useRef(null);
     const composedRefs = useComposedRefs(ref, forwardedRef);
     const prevChecked = usePrevious(checked);
     const controlSize = useSize(control);
-    React30.useEffect(() => {
+    React33.useEffect(() => {
       const input = ref.current;
       if (!input) return;
       const inputProto = window.HTMLInputElement.prototype;
@@ -6827,7 +7128,7 @@ var SwitchBubbleInput = React30.forwardRef(
         input.dispatchEvent(event);
       }
     }, [prevChecked, checked, bubbles]);
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       "input",
       {
         type: "checkbox",
@@ -6852,13 +7153,13 @@ SwitchBubbleInput.displayName = BUBBLE_INPUT_NAME;
 function getState2(checked) {
   return checked ? "checked" : "unchecked";
 }
-var Root2 = Switch;
+var Root4 = Switch;
 var Thumb = SwitchThumb;
 
 // src/libraries/react/components/ui/switch.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
-var Switch2 = React31.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-  Root2,
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var Switch2 = React34.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  Root4,
   {
     className: cn(
       "au-peer au-inline-flex au-h-5 au-w-9 au-shrink-0 au-cursor-pointer au-items-center au-rounded-full au-border-2 au-border-transparent au-shadow-sm au-transition-colors focus-visible:au-outline-none focus-visible:au-ring-2 focus-visible:au-ring-ring focus-visible:au-ring-offset-2 focus-visible:au-ring-offset-background au-disabled:cursor-not-allowed au-disabled:opacity-50 data-[state=checked]:au-bg-primary data-[state=unchecked]:au-bg-input",
@@ -6866,7 +7167,7 @@ var Switch2 = React31.forwardRef(({ className, ...props }, ref) => /* @__PURE__
     ),
     ...props,
     ref,
-    children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       Thumb,
       {
         className: cn(
@@ -6876,55 +7177,60 @@ var Switch2 = React31.forwardRef(({ className, ...props }, ref) => /* @__PURE__
     )
   }
 ));
-Switch2.displayName = Root2.displayName;
+Switch2.displayName = Root4.displayName;
 
 // src/libraries/react/components/pricing-table/lib/pricing-table-content.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 var getPricingTableContent = (product) => {
-  const { scenario, free_trial } = product;
-  if (free_trial && free_trial.trial_available) {
+  const { scenario, free_trial, properties } = product;
+  const { is_one_off, has_prepaid, has_trial } = properties;
+  if (has_trial) {
     return {
-      buttonText: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { children: "Start Free Trial" })
+      buttonText: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { children: "Start Free Trial" })
     };
   }
   switch (scenario) {
     case "scheduled":
       return {
-        buttonText: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { children: "Plan Scheduled" })
+        buttonText: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { children: "Plan Scheduled" })
       };
     case "active":
+      if (has_prepaid) {
+        return {
+          buttonText: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { children: "Update Plan" })
+        };
+      }
       return {
-        buttonText: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { children: "Current Plan" })
+        buttonText: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { children: "Current Plan" })
       };
     case "new":
-      if (product.properties?.is_one_off) {
-        return {
-          buttonText: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { children: "Purchase" })
-        };
-      } else {
+      if (is_one_off) {
         return {
-          buttonText: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { children: "Get started" })
+          buttonText: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { children: "Purchase" })
         };
       }
+      return {
+        buttonText: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { children: "Get started" })
+      };
     case "renew":
       return {
-        buttonText: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { children: "Renew" })
+        buttonText: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { children: "Renew" })
       };
     case "upgrade":
       return {
-        buttonText: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { children: "Upgrade" })
+        buttonText: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { children: "Upgrade" })
       };
     case "downgrade":
       return {
-        buttonText: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { children: "Downgrade" })
+        buttonText: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { children: "Downgrade" })
       };
     case "cancel":
       return {
-        buttonText: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { children: "Cancel Plan" })
+        buttonText: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { children: "Cancel Plan" })
       };
     default:
       return {
-        buttonText: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { children: "Get Started" })
+        buttonText: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { children: "Get Started" })
       };
   }
 };
@@ -6938,6 +7244,12 @@ var loadingStyles = {
   alignItems: "center",
   minHeight: "300px"
 };
+var spinnerStyles = {
+  width: "1.5rem",
+  height: "1.5rem",
+  color: "rgb(161 161 170)",
+  animation: "spin 1s linear infinite"
+};
 if (typeof document !== "undefined") {
   const styleId = "au-spinner-keyframes";
   if (!document.getElementById(styleId)) {
@@ -6954,18 +7266,18 @@ if (typeof document !== "undefined") {
 }
 
 // src/libraries/react/components/pricing-table/pricing-table-synced.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 function PricingTable({
   productDetails
 }) {
-  const { attach } = useCustomer();
-  const [isAnnual, setIsAnnual] = (0, import_react9.useState)(false);
+  const { checkout } = useCustomer();
+  const [isAnnual, setIsAnnual] = (0, import_react11.useState)(false);
   const { products, isLoading, error } = usePricingTable({ productDetails });
   if (isLoading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: loadingStyles });
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { style: loadingStyles, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(LoaderCircle, { style: spinnerStyles }) });
   }
   if (error) {
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { children: " Something went wrong..." });
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { children: " Something went wrong..." });
   }
   const intervals = Array.from(
     new Set(
@@ -6986,22 +7298,22 @@ function PricingTable({
     }
     return true;
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: cn("au-root"), children: products && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: cn("au-root"), children: products && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     PricingTableContainer,
     {
       products,
       isAnnualToggle: isAnnual,
       setIsAnnualToggle: setIsAnnual,
       multiInterval,
-      children: products.filter(intervalFilter).map((product, index) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      children: products.filter(intervalFilter).map((product, index) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
         PricingCard,
         {
           productId: product.id,
           buttonProps: {
-            disabled: product.scenario === "active" || product.scenario === "scheduled",
+            disabled: product.scenario === "active" && !product.properties.has_prepaid || product.scenario === "scheduled",
             onClick: async () => {
               if (product.id) {
-                await attach({
+                await checkout({
                   productId: product.id,
                   dialog: AttachDialog
                 });
@@ -7016,7 +7328,7 @@ function PricingTable({
     }
   ) });
 }
-var PricingTableContext = (0, import_react9.createContext)({
+var PricingTableContext = (0, import_react11.createContext)({
   isAnnualToggle: false,
   setIsAnnualToggle: () => {
   },
@@ -7024,7 +7336,7 @@ var PricingTableContext = (0, import_react9.createContext)({
   showFeatures: true
 });
 var usePricingTableContext = (componentName) => {
-  const context = (0, import_react9.useContext)(PricingTableContext);
+  const context = (0, import_react11.useContext)(PricingTableContext);
   if (context === void 0) {
     throw new Error(`${componentName} must be used within <PricingTable />`);
   }
@@ -7043,14 +7355,14 @@ var PricingTableContainer = ({
     throw new Error("products is required in <PricingTable />");
   }
   if (products.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_jsx_runtime18.Fragment, {});
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_jsx_runtime21.Fragment, {});
   }
   const hasRecommended = products?.some((p) => p.display?.recommend_text);
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     PricingTableContext.Provider,
     {
       value: { isAnnualToggle, setIsAnnualToggle, products, showFeatures },
-      children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
         "div",
         {
           className: cn(
@@ -7058,13 +7370,13 @@ var PricingTableContainer = ({
             hasRecommended && "!au-py-10"
           ),
           children: [
-            multiInterval && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+            multiInterval && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
               "div",
               {
                 className: cn(
                   products.some((p) => p.display?.recommend_text) && "au-mb-8"
                 ),
-                children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                   AnnualSwitch,
                   {
                     isAnnualToggle,
@@ -7073,7 +7385,7 @@ var PricingTableContainer = ({
                 )
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
               "div",
               {
                 className: cn(
@@ -7106,7 +7418,7 @@ var PricingCard = ({
     primary_text: "Free"
   } : product.items[0].display;
   const featureItems = product.properties?.is_free ? product.items : product.items.slice(1);
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
     "div",
     {
       className: cn(
@@ -7115,8 +7427,8 @@ var PricingCard = ({
         className
       ),
       children: [
-        productDisplay?.recommend_text && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(RecommendedBadge, { recommended: productDisplay?.recommend_text }),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+        productDisplay?.recommend_text && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(RecommendedBadge, { recommended: productDisplay?.recommend_text }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
           "div",
           {
             className: cn(
@@ -7124,19 +7436,19 @@ var PricingCard = ({
               isRecommended && "lg:au-translate-y-6"
             ),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "au-h-full", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "au-flex au-flex-col", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "au-pb-4", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("h2", { className: "au-text-2xl au-font-semibold au-px-6 au-truncate", children: productDisplay?.name || name }),
-                    productDisplay?.description && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "au-text-sm au-text-muted-foreground au-px-6 au-h-8", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "au-line-clamp-2", children: productDisplay?.description }) })
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "au-h-full", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "au-flex au-flex-col", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "au-pb-4", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("h2", { className: "au-text-2xl au-font-semibold au-px-6 au-truncate", children: productDisplay?.name || name }),
+                    productDisplay?.description && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "au-text-sm au-text-muted-foreground au-px-6 au-h-8", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "au-line-clamp-2", children: productDisplay?.description }) })
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "au-mb-2", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("h3", { className: "au-font-semibold au-h-16 au-flex au-px-6 au-items-center au-border-y au-mb-4 au-bg-secondary/40", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "au-line-clamp-2", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "au-mb-2", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("h3", { className: "au-font-semibold au-h-16 au-flex au-px-6 au-items-center au-border-y au-mb-4 au-bg-secondary/40", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "au-line-clamp-2", children: [
                     mainPriceDisplay?.primary_text,
                     " ",
-                    mainPriceDisplay?.secondary_text && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "au-font-normal au-text-muted-foreground au-mt-1", children: mainPriceDisplay?.secondary_text })
+                    mainPriceDisplay?.secondary_text && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "au-font-normal au-text-muted-foreground au-mt-1", children: mainPriceDisplay?.secondary_text })
                   ] }) }) })
                 ] }),
-                showFeatures && featureItems.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "au-flex-grow au-px-6 au-mb-6", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                showFeatures && featureItems.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "au-flex-grow au-px-6 au-mb-6", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                   PricingFeatureList,
                   {
                     items: featureItems,
@@ -7145,11 +7457,11 @@ var PricingCard = ({
                   }
                 ) })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                 "div",
                 {
                   className: cn(" au-px-6 ", isRecommended && "lg:au--translate-y-12"),
-                  children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                     PricingCardButton,
                     {
                       recommended: productDisplay?.recommend_text ? true : false,
@@ -7172,27 +7484,27 @@ var PricingFeatureList = ({
   everythingFrom,
   className
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: cn("au-flex-grow", className), children: [
-    everythingFrom && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("p", { className: "au-text-sm au-mb-4", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: cn("au-flex-grow", className), children: [
+    everythingFrom && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("p", { className: "au-text-sm au-mb-4", children: [
       "Everything from ",
       everythingFrom,
       ", plus:"
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "au-space-y-3", children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "au-space-y-3", children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
       "div",
       {
         className: "au-flex au-items-start au-gap-2 au-text-sm",
-        children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "au-flex au-flex-col", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { children: item.display?.primary_text }),
-          item.display?.secondary_text && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "au-text-sm au-text-muted-foreground", children: item.display?.secondary_text })
+        children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "au-flex au-flex-col", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children: item.display?.primary_text }),
+          item.display?.secondary_text && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "au-text-sm au-text-muted-foreground", children: item.display?.secondary_text })
         ] })
       },
       index
     )) })
   ] });
 };
-var PricingCardButton = import_react8.default.forwardRef(({ recommended, children, className, onClick, ...props }, ref) => {
-  const [loading, setLoading] = (0, import_react9.useState)(false);
+var PricingCardButton = import_react10.default.forwardRef(({ recommended, children, className, onClick, ...props }, ref) => {
+  const [loading, setLoading] = (0, import_react11.useState)(false);
   const handleClick = async (e) => {
     setLoading(true);
     try {
@@ -7203,7 +7515,7 @@ var PricingCardButton = import_react8.default.forwardRef(({ recommended, childre
       setLoading(false);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     Button,
     {
       className: cn(
@@ -7214,7 +7526,17 @@ var PricingCardButton = import_react8.default.forwardRef(({ recommended, childre
       variant: recommended ? "default" : "secondary",
       ref,
       disabled: loading || props.disabled,
-      onClick: handleClick
+      onClick: handleClick,
+      children: loading ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(LoaderCircle, { className: "au-h-4 au-w-4 au-animate-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "au-flex au-items-center au-justify-between au-w-full au-transition-transform au-duration-300 group-hover:au-translate-y-[-130%]", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children }),
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "au-text-sm", children: "\u2192" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "au-flex au-items-center au-justify-between au-w-full au-absolute au-px-4 au-translate-y-[130%] au-transition-transform au-duration-300 group-hover:au-translate-y-0 au-mt-2 group-hover:au-mt-0", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children }),
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "au-text-sm", children: "\u2192" })
+        ] })
+      ] })
     }
   );
 });
@@ -7223,9 +7545,9 @@ var AnnualSwitch = ({
   isAnnualToggle,
   setIsAnnualToggle
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "au-flex au-items-center au-space-x-2 au-mb-4", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "au-text-sm au-text-muted-foreground", children: "Monthly" }),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "au-flex au-items-center au-space-x-2 au-mb-4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "au-text-sm au-text-muted-foreground", children: "Monthly" }),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
       Switch2,
       {
         id: "annual-billing",
@@ -7233,11 +7555,11 @@ var AnnualSwitch = ({
         onCheckedChange: setIsAnnualToggle
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "au-text-sm au-text-muted-foreground", children: "Annual" })
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "au-text-sm au-text-muted-foreground", children: "Annual" })
   ] });
 };
 var RecommendedBadge = ({ recommended }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "au-bg-secondary au-absolute au-border au-text-muted-foreground au-text-sm au-font-medium lg:au-rounded-full au-px-3 lg:au-py-0.5 lg:au-top-4 lg:au-right-4 au-top-[-1px] au-right-[-1px] au-rounded-bl-lg", children: recommended });
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "au-bg-secondary au-absolute au-border au-text-muted-foreground au-text-sm au-font-medium lg:au-rounded-full au-px-3 lg:au-py-0.5 lg:au-top-4 lg:au-right-4 au-top-[-1px] au-right-[-1px] au-rounded-bl-lg", children: recommended });
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
@@ -7249,3 +7571,19 @@ var RecommendedBadge = ({ recommended }) => {
   RecommendedBadge,
   usePricingTableContext
 });
+/*! Bundled license information:
+
+lucide-react/dist/esm/shared/src/utils.js:
+lucide-react/dist/esm/defaultAttributes.js:
+lucide-react/dist/esm/Icon.js:
+lucide-react/dist/esm/createLucideIcon.js:
+lucide-react/dist/esm/icons/chevron-down.js:
+lucide-react/dist/esm/icons/loader-circle.js:
+lucide-react/dist/esm/lucide-react.js:
+  (**
+   * @license lucide-react v0.523.0 - ISC
+   *
+   * This source code is licensed under the ISC license.
+   * See the LICENSE file in the root directory of this source tree.
+   *)
+*/