@schematichq/schematic-components 1.6.1 → 1.7.0

package/dist/schematic-components.cjs.js

@@ -1894,6 +1894,7 @@ __export(index_exports, {
   useAvailablePlans: () => useAvailablePlans,
   useEmbed: () => useEmbed,
   useIsLightBackground: () => useIsLightBackground,
+  usePaymentConfirmation: () => usePaymentConfirmation,
   usePrevious: () => usePrevious2,
   useRequest: () => useRequest,
   useTrialEnd: () => useTrialEnd,
@@ -1902,10 +1903,10 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/components/elements/button/Button.tsx
-var import_react39 = require("react");
+var import_react40 = require("react");
 
 // src/components/layout/card/Card.tsx
-var import_react23 = require("react");
+var import_react24 = require("react");
 
 // src/const/components.ts
 var VISIBLE_ENTITLEMENT_COUNT = 4;
@@ -2041,6 +2042,18 @@ function getEntitlementCost(entitlement, period = "month") {
     }
   }
 }
+function isBillingAddressRequiredForTax(financeData) {
+  if (!financeData) {
+    return false;
+  }
+  return financeData.taxRequireBillingDetails;
+}
+function shouldCollectBillingAddress(collectAddressSetting, financeData) {
+  if (collectAddressSetting) {
+    return true;
+  }
+  return isBillingAddressRequiredForTax(financeData);
+}
 
 // src/utils/api/credit.ts
 function getResetCadencePeriod(cadence) {
@@ -4287,7 +4300,8 @@ var initialContext = {
   setCheckoutState: stub,
   setData: stub,
   updateSettings: stub,
-  debug: stub
+  debug: stub,
+  finishCheckout: stub
 };
 var EmbedContext = (0, import_react3.createContext)(initialContext);
 
@@ -6766,7 +6780,7 @@ var en_default = {
     "Add-ons Quantity": "Add-ons Quantity",
     Additional: "Additional",
     "After the trial, cancel no default": "After the trial, you will be lose access to {{planName}} plan and your subscription will be cancelled.",
-    "After the trial, cancel": "After the trial, you will be downgraded to the {{defaultPlanName}} plan and your subscription will be cancelled.",
+    "After the trial, cancel": "After the trial, you will be downgraded to the {{postTrialPlanName}} plan and your subscription will be cancelled.",
     "After the trial, subscribe": "After the trial, subscription starts and you will be billed.",
     "Amount off": "{{amount}} off",
     "An invoice is created when charges reach $X; the rest is billed monthly.": "An invoice is created when charges reach {{amount}}; the rest is billed monthly.",
@@ -6866,6 +6880,7 @@ var en_default = {
     "Subscription canceled": "Subscription canceled",
     Subscription: "Subscription",
     "Talk to support": "Talk to support",
+    "Tax (description):": "Tax ({{description}}):",
     "There was a problem retrieving your upcoming invoice.": "There was a problem retrieving your upcoming invoice.",
     "There was a problem retrieving your invoices.": "There was a problem retrieving your invoices.",
     "Tiers apply progressively as quantity increases.": "Tiers apply progressively as quantity increases.",
@@ -7552,11 +7567,15 @@ function BillingPlanCreditGrantResponseDataFromJSONTyped(json, ignoreDiscriminat
     creditName: json["credit_name"],
     creditPluralName: json["credit_plural_name"] == null ? void 0 : json["credit_plural_name"],
     creditSingularName: json["credit_singular_name"] == null ? void 0 : json["credit_singular_name"],
+    expiryType: json["expiry_type"] == null ? void 0 : json["expiry_type"],
+    expiryUnit: json["expiry_unit"] == null ? void 0 : json["expiry_unit"],
+    expiryUnitCount: json["expiry_unit_count"] == null ? void 0 : json["expiry_unit_count"],
     id: json["id"],
     planId: json["plan_id"],
     planName: json["plan_name"],
     resetCadence: json["reset_cadence"],
     resetStart: json["reset_start"],
+    resetType: json["reset_type"] == null ? void 0 : json["reset_type"],
     updatedAt: new Date(json["updated_at"])
   };
 }
@@ -7701,36 +7720,6 @@ function BillingSubscriptionDiscountViewFromJSONTyped(json, ignoreDiscriminator)
   };
 }
 
-// src/api/checkoutexternal/models/BillingSubscriptionResponseData.ts
-function BillingSubscriptionResponseDataFromJSON(json) {
-  return BillingSubscriptionResponseDataFromJSONTyped(json, false);
-}
-function BillingSubscriptionResponseDataFromJSONTyped(json, ignoreDiscriminator) {
-  if (json == null) {
-    return json;
-  }
-  return {
-    cancelAt: json["cancel_at"] == null ? void 0 : json["cancel_at"],
-    cancelAtPeriodEnd: json["cancel_at_period_end"],
-    companyId: json["company_id"] == null ? void 0 : json["company_id"],
-    createdAt: new Date(json["created_at"]),
-    currency: json["currency"],
-    customerExternalId: json["customer_external_id"],
-    defaultPaymentMethodId: json["default_payment_method_id"] == null ? void 0 : json["default_payment_method_id"],
-    expiredAt: json["expired_at"] == null ? void 0 : new Date(json["expired_at"]),
-    id: json["id"],
-    interval: json["interval"],
-    metadata: json["metadata"] == null ? void 0 : json["metadata"],
-    periodEnd: json["period_end"],
-    periodStart: json["period_start"],
-    status: json["status"],
-    subscriptionExternalId: json["subscription_external_id"],
-    totalPrice: json["total_price"],
-    trialEnd: json["trial_end"] == null ? void 0 : json["trial_end"],
-    trialEndSetting: json["trial_end_setting"] == null ? void 0 : json["trial_end_setting"]
-  };
-}
-
 // src/api/checkoutexternal/models/InvoiceResponseData.ts
 function InvoiceResponseDataFromJSON(json) {
   return InvoiceResponseDataFromJSONTyped(json, false);
@@ -7884,6 +7873,38 @@ function ChangeSubscriptionRequestBodyToJSON(value) {
   };
 }
 
+// src/api/checkoutexternal/models/CheckoutResponseData.ts
+function CheckoutResponseDataFromJSON(json) {
+  return CheckoutResponseDataFromJSONTyped(json, false);
+}
+function CheckoutResponseDataFromJSONTyped(json, ignoreDiscriminator) {
+  if (json == null) {
+    return json;
+  }
+  return {
+    cancelAt: json["cancel_at"] == null ? void 0 : json["cancel_at"],
+    cancelAtPeriodEnd: json["cancel_at_period_end"],
+    companyId: json["company_id"] == null ? void 0 : json["company_id"],
+    confirmPaymentIntentClientSecret: json["confirm_payment_intent_client_secret"] == null ? void 0 : json["confirm_payment_intent_client_secret"],
+    confirmPaymentIntentId: json["confirm_payment_intent_id"] == null ? void 0 : json["confirm_payment_intent_id"],
+    createdAt: new Date(json["created_at"]),
+    currency: json["currency"],
+    customerExternalId: json["customer_external_id"],
+    defaultPaymentMethodId: json["default_payment_method_id"] == null ? void 0 : json["default_payment_method_id"],
+    expiredAt: json["expired_at"] == null ? void 0 : new Date(json["expired_at"]),
+    id: json["id"],
+    interval: json["interval"],
+    metadata: json["metadata"] == null ? void 0 : json["metadata"],
+    periodEnd: json["period_end"],
+    periodStart: json["period_start"],
+    status: json["status"],
+    subscriptionExternalId: json["subscription_external_id"],
+    totalPrice: json["total_price"],
+    trialEnd: json["trial_end"] == null ? void 0 : json["trial_end"],
+    trialEndSetting: json["trial_end_setting"] == null ? void 0 : json["trial_end_setting"]
+  };
+}
+
 // src/api/checkoutexternal/models/CheckoutResponse.ts
 function CheckoutResponseFromJSON(json) {
   return CheckoutResponseFromJSONTyped(json, false);
@@ -7893,7 +7914,7 @@ function CheckoutResponseFromJSONTyped(json, ignoreDiscriminator) {
     return json;
   }
   return {
-    data: BillingSubscriptionResponseDataFromJSON(json["data"]),
+    data: CheckoutResponseDataFromJSON(json["data"]),
     params: json["params"]
   };
 }
@@ -8131,6 +8152,24 @@ function CompanyDetailResponseDataFromJSONTyped(json, ignoreDiscriminator) {
   };
 }
 
+// src/api/checkoutexternal/models/CompanyOverrideNoteResponseData.ts
+function CompanyOverrideNoteResponseDataFromJSON(json) {
+  return CompanyOverrideNoteResponseDataFromJSONTyped(json, false);
+}
+function CompanyOverrideNoteResponseDataFromJSONTyped(json, ignoreDiscriminator) {
+  if (json == null) {
+    return json;
+  }
+  return {
+    createdAt: new Date(json["created_at"]),
+    externalUserId: json["external_user_id"],
+    externalUserName: json["external_user_name"],
+    id: json["id"],
+    note: json["note"],
+    updatedAt: new Date(json["updated_at"])
+  };
+}
+
 // src/api/checkoutexternal/models/FeatureResponseData.ts
 function FeatureResponseDataFromJSON(json) {
   return FeatureResponseDataFromJSONTyped(json, false);
@@ -8176,6 +8215,9 @@ function CompanyOverrideResponseDataFromJSONTyped(json, ignoreDiscriminator) {
     id: json["id"],
     metricPeriod: json["metric_period"] == null ? void 0 : json["metric_period"],
     metricPeriodMonthReset: json["metric_period_month_reset"] == null ? void 0 : json["metric_period_month_reset"],
+    notes: json["notes"].map(
+      CompanyOverrideNoteResponseDataFromJSON
+    ),
     ruleId: json["rule_id"] == null ? void 0 : json["rule_id"],
     ruleIdUsageExceeded: json["rule_id_usage_exceeded"] == null ? void 0 : json["rule_id_usage_exceeded"],
     updatedAt: new Date(json["updated_at"]),
@@ -8392,12 +8434,16 @@ function PlanCreditGrantViewFromJSONTyped(json, ignoreDiscriminator) {
     creditIcon: json["credit_icon"] == null ? void 0 : json["credit_icon"],
     creditId: json["credit_id"],
     creditName: json["credit_name"],
+    expiryType: json["expiry_type"] == null ? void 0 : json["expiry_type"],
+    expiryUnit: json["expiry_unit"] == null ? void 0 : json["expiry_unit"],
+    expiryUnitCount: json["expiry_unit_count"] == null ? void 0 : json["expiry_unit_count"],
     id: json["id"],
     planId: json["plan_id"],
     planName: json["plan_name"],
     pluralName: json["plural_name"] == null ? void 0 : json["plural_name"],
     resetCadence: json["reset_cadence"],
     resetStart: json["reset_start"],
+    resetType: json["reset_type"],
     singularName: json["singular_name"] == null ? void 0 : json["singular_name"],
     updatedAt: new Date(json["updated_at"])
   };
@@ -8651,7 +8697,8 @@ function ComponentCheckoutSettingsFromJSONTyped(json, ignoreDiscriminator) {
   return {
     collectAddress: json["collect_address"],
     collectEmail: json["collect_email"],
-    collectPhone: json["collect_phone"]
+    collectPhone: json["collect_phone"],
+    taxCollectionEnabled: json["tax_collection_enabled"]
   };
 }
 
@@ -8838,6 +8885,8 @@ function ComponentHydrateResponseDataFromJSONTyped(json, ignoreDiscriminator) {
     ),
     defaultPlan: json["default_plan"] == null ? void 0 : PlanDetailResponseDataFromJSON(json["default_plan"]),
     featureUsage: json["feature_usage"] == null ? void 0 : FeatureUsageDetailResponseDataFromJSON(json["feature_usage"]),
+    postTrialPlan: json["post_trial_plan"] == null ? void 0 : PlanDetailResponseDataFromJSON(json["post_trial_plan"]),
+    showCredits: json["show_credits"],
     showPeriodToggle: json["show_period_toggle"],
     showZeroPriceAsFree: json["show_zero_price_as_free"],
     stripeEmbed: json["stripe_embed"] == null ? void 0 : StripeEmbedInfoFromJSON(json["stripe_embed"]),
@@ -9022,6 +9071,9 @@ function PreviewSubscriptionFinanceResponseDataFromJSONTyped(json, ignoreDiscrim
     periodStart: new Date(json["period_start"]),
     promoCodeApplied: json["promo_code_applied"],
     proration: json["proration"],
+    taxAmount: json["tax_amount"] == null ? void 0 : json["tax_amount"],
+    taxDisplayName: json["tax_display_name"] == null ? void 0 : json["tax_display_name"],
+    taxRequireBillingDetails: json["tax_require_billing_details"],
     trialEnd: json["trial_end"] == null ? void 0 : new Date(json["trial_end"]),
     upcomingInvoiceLineItems: json["upcoming_invoice_line_items"].map(PreviewSubscriptionUpcomingInvoiceLineItemsFromJSON)
   };
@@ -10261,12 +10313,16 @@ function PlanCreditGrantViewFromJSONTyped3(json, ignoreDiscriminator) {
     creditIcon: json["credit_icon"] == null ? void 0 : json["credit_icon"],
     creditId: json["credit_id"],
     creditName: json["credit_name"],
+    expiryType: json["expiry_type"] == null ? void 0 : json["expiry_type"],
+    expiryUnit: json["expiry_unit"] == null ? void 0 : json["expiry_unit"],
+    expiryUnitCount: json["expiry_unit_count"] == null ? void 0 : json["expiry_unit_count"],
     id: json["id"],
     planId: json["plan_id"],
     planName: json["plan_name"],
     pluralName: json["plural_name"] == null ? void 0 : json["plural_name"],
     resetCadence: json["reset_cadence"],
     resetStart: json["reset_start"],
+    resetType: json["reset_type"],
     singularName: json["singular_name"] == null ? void 0 : json["singular_name"],
     updatedAt: new Date(json["updated_at"])
   };
@@ -10392,6 +10448,7 @@ function PublicPlansResponseDataFromJSONTyped(json, ignoreDiscriminator) {
       CompatiblePlansFromJSON2
     ),
     capabilities: json["capabilities"] == null ? void 0 : ComponentCapabilitiesFromJSON2(json["capabilities"]),
+    showCredits: json["show_credits"],
     showPeriodToggle: json["show_period_toggle"],
     showZeroPriceAsFree: json["show_zero_price_as_free"]
   };
@@ -10591,7 +10648,7 @@ var EmbedProvider = ({
   });
   const customHeaders = (0, import_react12.useMemo)(
     () => ({
-      "X-Schematic-Components-Version": "1.6.1",
+      "X-Schematic-Components-Version": "1.7.0",
       "X-Schematic-Session-ID": sessionIdRef.current
     }),
     []
@@ -10605,6 +10662,15 @@ var EmbedProvider = ({
     },
     [options.debug]
   );
+  const finishCheckout = (0, import_react12.useCallback)(
+    (checkoutData) => {
+      dispatch({
+        type: "CHECKOUT",
+        data: checkoutData
+      });
+    },
+    [dispatch]
+  );
   const hydratePublic = (0, import_react12.useCallback)(async () => {
     dispatch({ type: "HYDRATE_STARTED" });
     try {
@@ -10746,7 +10812,7 @@ var EmbedProvider = ({
       const response = await api.checkout?.checkout({
         changeSubscriptionRequestBody
       });
-      if (response) {
+      if (response && !response.data.confirmPaymentIntentClientSecret) {
         dispatch({
           type: "CHECKOUT",
           data: response.data
@@ -10957,6 +11023,7 @@ var EmbedProvider = ({
         getUpcomingInvoice: debouncedGetUpcomingInvoice,
         getCustomerBalance: debouncedGetCustomerBalance,
         listInvoices: debouncedListInvoices,
+        finishCheckout,
         setError,
         setAccessToken,
         setLayout,
@@ -10986,23 +11053,131 @@ function useIsLightBackground() {
   return isLightBackground;
 }
 
-// src/hooks/usePrevious.ts
+// src/hooks/usePaymentConfirmation.ts
 var import_react15 = require("react");
-function usePrevious2(value) {
-  const ref = (0, import_react15.useRef)(void 0);
+var usePaymentConfirmation = ({
+  stripe,
+  clientSecret,
+  onSuccess,
+  onError: onError3,
+  autoConfirm = false
+}) => {
+  const [isConfirming, setIsConfirming] = (0, import_react15.useState)(false);
+  const [error, setError] = (0, import_react15.useState)(null);
+  const [status, setStatus] = (0, import_react15.useState)("idle");
+  const confirmedSecrets = (0, import_react15.useRef)(/* @__PURE__ */ new Set());
+  const abortControllerRef = (0, import_react15.useRef)(null);
+  const confirmPayment = (0, import_react15.useCallback)(async () => {
+    if (!stripe || !clientSecret) {
+      const error2 = new Error(
+        "Missing required parameters: stripe instance or client secret"
+      );
+      setError(error2);
+      setStatus("failed");
+      onError3?.(error2);
+      return;
+    }
+    if (confirmedSecrets.current.has(clientSecret) || isConfirming) {
+      console.warn("Payment confirmation already attempted or in progress");
+      return;
+    }
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort();
+    }
+    abortControllerRef.current = new AbortController();
+    const { signal } = abortControllerRef.current;
+    setIsConfirming(true);
+    setError(null);
+    setStatus("confirming");
+    try {
+      confirmedSecrets.current.add(clientSecret);
+      const stripeInstance = await stripe;
+      if (signal.aborted) {
+        throw new Error("Payment confirmation was cancelled");
+      }
+      if (!stripeInstance) {
+        throw new Error("Failed to load Stripe instance");
+      }
+      const result = await stripeInstance.confirmCardPayment(clientSecret);
+      if (signal.aborted) {
+        throw new Error("Payment confirmation was cancelled");
+      }
+      if (result.error) {
+        throw new Error(result.error.message || "Payment confirmation failed");
+      }
+      setStatus("succeeded");
+      onSuccess?.();
+    } catch (err2) {
+      if (!signal.aborted) {
+        const error2 = err2 instanceof Error ? err2 : new Error("Unknown error occurred");
+        setError(error2);
+        setStatus("failed");
+        onError3?.(error2);
+        confirmedSecrets.current.delete(clientSecret);
+      }
+    } finally {
+      if (!signal.aborted) {
+        setIsConfirming(false);
+      }
+      abortControllerRef.current = null;
+    }
+  }, [stripe, clientSecret, onSuccess, onError3, isConfirming]);
+  const reset = (0, import_react15.useCallback)(() => {
+    if (clientSecret) {
+      confirmedSecrets.current.delete(clientSecret);
+    }
+    setIsConfirming(false);
+    setError(null);
+    setStatus("idle");
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort();
+      abortControllerRef.current = null;
+    }
+  }, [clientSecret]);
   (0, import_react15.useEffect)(() => {
+    if (autoConfirm && status === "idle" && stripe && clientSecret) {
+      confirmPayment();
+    }
+  }, [autoConfirm, stripe, clientSecret]);
+  (0, import_react15.useEffect)(() => {
+    return () => {
+      if (abortControllerRef.current) {
+        abortControllerRef.current.abort();
+        abortControllerRef.current = null;
+      }
+    };
+  }, []);
+  (0, import_react15.useEffect)(() => {
+    if (clientSecret && status !== "idle") {
+      reset();
+    }
+  }, [clientSecret]);
+  return {
+    confirmPayment,
+    isConfirming,
+    error,
+    status,
+    reset
+  };
+};
+
+// src/hooks/usePrevious.ts
+var import_react16 = require("react");
+function usePrevious2(value) {
+  const ref = (0, import_react16.useRef)(void 0);
+  (0, import_react16.useEffect)(() => {
     ref.current = value;
   }, [value]);
   return ref.current;
 }
 
 // src/hooks/useRequest.ts
-var import_react16 = require("react");
+var import_react17 = require("react");
 function useRequest(fn) {
-  const [isLoading, setIsLoading] = (0, import_react16.useState)(false);
-  const [error, setError] = (0, import_react16.useState)(null);
-  const [data, setData] = (0, import_react16.useState)(void 0);
-  const request = (0, import_react16.useCallback)(async () => {
+  const [isLoading, setIsLoading] = (0, import_react17.useState)(false);
+  const [error, setError] = (0, import_react17.useState)(null);
+  const [data, setData] = (0, import_react17.useState)(void 0);
+  const request = (0, import_react17.useCallback)(async () => {
     try {
       setError(null);
       setIsLoading(true);
@@ -11017,7 +11192,7 @@ function useRequest(fn) {
       setIsLoading(false);
     }
   }, [fn]);
-  const value = (0, import_react16.useMemo)(() => {
+  const value = (0, import_react17.useMemo)(() => {
     const state = { isLoading, error, data };
     return [state, request];
   }, [isLoading, error, data, request]);
@@ -11025,11 +11200,11 @@ function useRequest(fn) {
 }
 
 // src/hooks/useTrialEnd.ts
-var import_react17 = require("react");
+var import_react18 = require("react");
 function useTrialEnd() {
   const { t: t2 } = useTranslation();
   const { data } = useEmbed();
-  const { endDate, formatted } = (0, import_react17.useMemo)(() => {
+  const { endDate, formatted } = (0, import_react18.useMemo)(() => {
     const billingSubscription = isCheckoutData(data) ? data.company?.billingSubscription : void 0;
     const end = typeof billingSubscription?.trialEnd === "number" ? new Date(billingSubscription.trialEnd * 1e3) : void 0;
     let formatted2;
@@ -11062,12 +11237,12 @@ function useTrialEnd() {
 }
 
 // src/hooks/useWrapChildren.ts
-var import_react18 = require("react");
+var import_react19 = require("react");
 function useWrapChildren(elements) {
-  const [shouldWrap, setShouldWrap] = (0, import_react18.useState)(
+  const [shouldWrap, setShouldWrap] = (0, import_react19.useState)(
     () => new Array(elements.length).fill(false)
   );
-  (0, import_react18.useLayoutEffect)(() => {
+  (0, import_react19.useLayoutEffect)(() => {
     const rowShouldWrap = (parent) => [...parent.children].some(
       (el) => el instanceof HTMLElement && el.previousElementSibling instanceof HTMLElement && el.offsetLeft <= el.previousElementSibling.offsetLeft
     );
@@ -11588,7 +11763,7 @@ var Input = dt.input(({ theme, $size = "md", $variant = "filled" }) => {
 });
 
 // src/components/ui/modal/Modal.tsx
-var import_react19 = require("react");
+var import_react20 = require("react");
 
 // src/components/ui/modal/styles.ts
 var Overlay = dt(Box)`
@@ -11653,12 +11828,12 @@ var Modal2 = ({
 }) => {
   const { setLayout } = useEmbed();
   const isLightBackground = useIsLightBackground();
-  const ref = (0, import_react19.useRef)(null);
-  const handleClose = (0, import_react19.useCallback)(() => {
+  const ref = (0, import_react20.useRef)(null);
+  const handleClose = (0, import_react20.useCallback)(() => {
     setLayout("portal");
     onClose?.();
   }, [setLayout, onClose]);
-  (0, import_react19.useLayoutEffect)(() => {
+  (0, import_react20.useLayoutEffect)(() => {
     contentRef?.current?.focus({ preventScroll: true });
   }, [contentRef]);
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Container, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
@@ -11688,7 +11863,7 @@ var Modal2 = ({
 Modal2.displayName = "Modal";
 
 // src/components/ui/modal/ModalHeader.tsx
-var import_react20 = require("react");
+var import_react21 = require("react");
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var ModalHeader = ({
   children,
@@ -11697,7 +11872,7 @@ var ModalHeader = ({
 }) => {
   const { settings, setLayout } = useEmbed();
   const isLightBackground = useIsLightBackground();
-  const handleClose = (0, import_react20.useCallback)(() => {
+  const handleClose = (0, import_react21.useCallback)(() => {
     setLayout("portal");
     onClose?.();
   }, [setLayout, onClose]);
@@ -11754,7 +11929,7 @@ var ModalHeader = ({
 };
 
 // src/components/ui/progress-bar/ProgressBar.tsx
-var import_react21 = require("react");
+var import_react22 = require("react");
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var progressColorMap = [
   "blue",
@@ -11764,7 +11939,7 @@ var progressColorMap = [
   "red",
   "red"
 ];
-var ProgressBar = (0, import_react21.forwardRef)(
+var ProgressBar = (0, import_react22.forwardRef)(
   ({
     progress,
     value,
@@ -11886,7 +12061,7 @@ var Text = dt.span.withConfig({
 
 // src/components/ui/tooltip/Tooltip.tsx
 var import_debounce2 = __toESM(require_debounce());
-var import_react22 = require("react");
+var import_react23 = require("react");
 var import_react_dom = require("react-dom");
 
 // src/components/ui/tooltip/styles.ts
@@ -12043,10 +12218,10 @@ var Tooltip = ({
   fullWidth = false,
   ...rest
 }) => {
-  const ref = (0, import_react22.useRef)(null);
-  const [show, setShow] = (0, import_react22.useState)(false);
-  const [coords2, setCoords] = (0, import_react22.useState)({ x: 0, y: 0 });
-  const updateCoords = (0, import_react22.useCallback)(() => {
+  const ref = (0, import_react23.useRef)(null);
+  const [show, setShow] = (0, import_react23.useState)(false);
+  const [coords2, setCoords] = (0, import_react23.useState)({ x: 0, y: 0 });
+  const updateCoords = (0, import_react23.useCallback)(() => {
     if (ref.current) {
       const { top: offsetTop, left: offsetLeft } = document.body.getBoundingClientRect();
       const rect = ref.current.getBoundingClientRect();
@@ -12064,14 +12239,14 @@ var Tooltip = ({
       });
     }
   }, [position2]);
-  (0, import_react22.useLayoutEffect)(() => {
+  (0, import_react23.useLayoutEffect)(() => {
     const handleResize = (0, import_debounce2.default)(updateCoords, EVENT_DEBOUNCE_TIMEOUT);
     window.addEventListener("resize", handleResize);
     return () => {
       window.removeEventListener("resize", handleResize);
     };
   }, [updateCoords]);
-  (0, import_react22.useLayoutEffect)(() => {
+  (0, import_react23.useLayoutEffect)(() => {
     updateCoords();
   }, [updateCoords, show]);
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
@@ -12134,7 +12309,7 @@ var StyledCard = dt.div(({ theme }) => {
 
 // src/components/layout/card/Card.tsx
 var import_jsx_runtime8 = require("react/jsx-runtime");
-var Card = (0, import_react23.forwardRef)(
+var Card = (0, import_react24.forwardRef)(
   ({ children, className }, ref) => {
     const { settings, isPending } = useEmbed();
     return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(StyledCard, { ref, className, children: [
@@ -12162,7 +12337,7 @@ var Card = (0, import_react23.forwardRef)(
 Card.displayName = "Card";
 
 // src/components/layout/column/Column.tsx
-var import_react24 = require("react");
+var import_react25 = require("react");
 
 // src/components/layout/column/styles.ts
 var StyledColumn = dt.div`
@@ -12171,15 +12346,15 @@ var StyledColumn = dt.div`
 
 // src/components/layout/column/Column.tsx
 var import_jsx_runtime9 = require("react/jsx-runtime");
-var Column = (0, import_react24.forwardRef)(
+var Column = (0, import_react25.forwardRef)(
   ({ children, basis, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(StyledColumn, { ref, ...props, children: import_react24.Children.count(children) > 0 ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Card, { children }) : children });
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(StyledColumn, { ref, ...props, children: import_react25.Children.count(children) > 0 ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Card, { children }) : children });
   }
 );
 Column.displayName = "Column";
 
 // src/components/layout/root/Root.tsx
-var import_react25 = require("react");
+var import_react26 = require("react");
 
 // src/components/layout/root/styles.ts
 var Container = dt.div`
@@ -12216,7 +12391,7 @@ var Container = dt.div`
 
 // src/components/layout/root/Root.tsx
 var import_jsx_runtime10 = require("react/jsx-runtime");
-var Root = (0, import_react25.forwardRef)(
+var Root = (0, import_react26.forwardRef)(
   ({ data, settings, ...props }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Container, { ref, ...props });
   }
@@ -12225,7 +12400,7 @@ Root.displayName = "Root";
 
 // src/components/layout/viewport/Viewport.tsx
 var import_debounce3 = __toESM(require_debounce());
-var import_react38 = require("react");
+var import_react39 = require("react");
 var import_react_dom2 = require("react-dom");
 
 // src/components/shared/billing-threshold-tooltip/BillingThresholdTooltip.tsx
@@ -12258,10 +12433,10 @@ var BillingThresholdTooltip = ({
 };
 
 // src/components/shared/checkout-dialog/CheckoutDialog.tsx
-var import_react30 = require("react");
+var import_react31 = require("react");
 
 // src/components/shared/sidebar/Sidebar.tsx
-var import_react27 = require("react");
+var import_react28 = require("react");
 
 // src/components/shared/sidebar/EntitlementRow.tsx
 var import_jsx_runtime12 = require("react/jsx-runtime");
@@ -12335,11 +12510,11 @@ var EntitlementRow = (entitlement) => {
 };
 
 // src/components/shared/sidebar/Proration.tsx
-var import_react26 = require("react");
+var import_react27 = require("react");
 var import_jsx_runtime13 = require("react/jsx-runtime");
 var Proration = ({ currency, charges }) => {
   const { t: t2 } = useTranslation();
-  const [open, setOpen] = (0, import_react26.useState)(false);
+  const [open, setOpen] = (0, import_react27.useState)(false);
   const toggle = (e2) => {
     e2.preventDefault();
     e2.stopPropagation();
@@ -12655,10 +12830,19 @@ var Sidebar = ({
   updatePromoCode,
   showHeader = true,
   shouldTrial = false,
-  willTrialWithoutPaymentMethod = false
+  willTrialWithoutPaymentMethod = false,
+  setConfirmPaymentIntent
 }) => {
   const { t: t2 } = useTranslation();
-  const { data, settings, layout, setLayout, checkout, unsubscribe } = useEmbed();
+  const {
+    data,
+    settings,
+    layout,
+    setLayout,
+    checkout,
+    finishCheckout,
+    unsubscribe
+  } = useEmbed();
   const isLightBackground = useIsLightBackground();
   const {
     currentPlan,
@@ -12668,7 +12852,7 @@ var Sidebar = ({
     billingSubscription,
     paymentMethod,
     trialPaymentMethodRequired
-  } = (0, import_react27.useMemo)(() => {
+  } = (0, import_react28.useMemo)(() => {
     if (isCheckoutData(data)) {
       const currentEntitlements2 = data.featureUsage?.features || [];
       return {
@@ -12706,7 +12890,7 @@ var Sidebar = ({
       trialPaymentMethodRequired: false
     };
   }, [data, planPeriod]);
-  const { payInAdvanceEntitlements } = (0, import_react27.useMemo)(() => {
+  const { payInAdvanceEntitlements } = (0, import_react28.useMemo)(() => {
     const payAsYouGoEntitlements = [];
     const payInAdvanceEntitlements2 = usageBasedEntitlements.filter(
       (entitlement) => {
@@ -12718,7 +12902,7 @@ var Sidebar = ({
     );
     return { payAsYouGoEntitlements, payInAdvanceEntitlements: payInAdvanceEntitlements2 };
   }, [usageBasedEntitlements]);
-  const subscriptionPrice = (0, import_react27.useMemo)(() => {
+  const subscriptionPrice = (0, import_react28.useMemo)(() => {
     let planPrice;
     let currency;
     if (selectedPlan) {
@@ -12746,17 +12930,28 @@ var Sidebar = ({
     total += payInAdvanceCost;
     return formatCurrency(total, currency);
   }, [selectedPlan, currentPlan, planPeriod, addOns, payInAdvanceEntitlements]);
-  const { amountOff, dueNow, newCharges, percentOff, periodStart, proration } = (0, import_react27.useMemo)(() => {
+  const {
+    amountOff,
+    dueNow,
+    newCharges,
+    percentOff,
+    periodStart,
+    proration,
+    taxAmount,
+    taxDescription
+  } = (0, import_react28.useMemo)(() => {
     return {
       amountOff: charges?.amountOff ?? 0,
       dueNow: charges?.dueNow ?? 0,
       newCharges: charges?.newCharges ?? 0,
       percentOff: charges?.percentOff ?? 0,
       periodStart: charges?.periodStart,
-      proration: charges?.proration ?? 0
+      proration: charges?.proration ?? 0,
+      taxAmount: charges?.taxAmount ?? 0,
+      taxDescription: charges?.taxDisplayName
     };
   }, [charges]);
-  const updatedUsageBasedEntitlements = (0, import_react27.useMemo)(() => {
+  const updatedUsageBasedEntitlements = (0, import_react28.useMemo)(() => {
     const changedUsageBasedEntitlements = [];
     const addedUsageBasedEntitlements = selectedPlan ? usageBasedEntitlements.reduce(
       (acc, selected) => {
@@ -12807,19 +13002,19 @@ var Sidebar = ({
     currentUsageBasedEntitlements,
     usageBasedEntitlements
   ]);
-  const selectedAddOns = (0, import_react27.useMemo)(
+  const selectedAddOns = (0, import_react28.useMemo)(
     () => addOns.filter((addOn) => addOn.isSelected),
     [addOns]
   );
-  const addedCreditBundles = (0, import_react27.useMemo)(
+  const addedCreditBundles = (0, import_react28.useMemo)(
     () => creditBundles.filter((bundle) => bundle.count > 0),
     [creditBundles]
   );
-  const discountApplied = (0, import_react27.useMemo)(
+  const discountApplied = (0, import_react28.useMemo)(
     () => promoCode && (amountOff > 0 || percentOff > 0),
     [promoCode, amountOff, percentOff]
   );
-  const handleCheckout = (0, import_react27.useCallback)(async () => {
+  const handleCheckout = (0, import_react28.useCallback)(async () => {
     const planId = selectedPlan?.id;
     const priceId = (planPeriod === "year" ? selectedPlan?.yearlyPrice : selectedPlan?.monthlyPrice)?.id;
     try {
@@ -12857,7 +13052,7 @@ var Sidebar = ({
         []
       );
       const allPayInAdvance = [...planPayInAdvance, ...addOnPayInAdvance];
-      await checkout({
+      const checkoutResponseFromBackend = await checkout({
         newPlanId: planId,
         newPriceId: priceId,
         addOnIds: addOns.reduce((acc, addOn) => {
@@ -12889,8 +13084,32 @@ var Sidebar = ({
         ...paymentMethodId && { paymentMethodId },
         ...promoCode && { promoCode }
       });
-      setIsLoading(false);
-      setLayout("portal");
+      if (checkoutResponseFromBackend?.data.confirmPaymentIntentClientSecret) {
+        setConfirmPaymentIntent({
+          clientSecret: checkoutResponseFromBackend?.data.confirmPaymentIntentClientSecret,
+          callback: (confirmed) => {
+            if (typeof confirmed === "undefined") {
+              return;
+            }
+            console.log("Payment intent has confirmed. Result: ", confirmed);
+            setIsLoading(false);
+            if (!confirmed) {
+              setError(
+                t2(
+                  "Error processing payment. Please try a different payment method."
+                )
+              );
+              setLayout("checkout");
+            } else {
+              finishCheckout(checkoutResponseFromBackend?.data);
+              setLayout("portal");
+            }
+          }
+        });
+      } else {
+        setIsLoading(false);
+        setLayout("portal");
+      }
     } catch {
       setIsLoading(false);
       setLayout("checkout");
@@ -12901,6 +13120,7 @@ var Sidebar = ({
   }, [
     t2,
     checkout,
+    setConfirmPaymentIntent,
     paymentMethodId,
     planPeriod,
     selectedPlan,
@@ -12912,9 +13132,10 @@ var Sidebar = ({
     payInAdvanceEntitlements,
     addOnUsageBasedEntitlements,
     shouldTrial,
-    promoCode
+    promoCode,
+    finishCheckout
   ]);
-  const handleUnsubscribe = (0, import_react27.useCallback)(async () => {
+  const handleUnsubscribe = (0, import_react28.useCallback)(async () => {
     try {
       setError(void 0);
       setIsLoading(true);
@@ -12928,7 +13149,7 @@ var Sidebar = ({
     }
   }, [t2, unsubscribe, setError, setIsLoading, setLayout]);
   const willPlanChange = isHydratedPlan(selectedPlan) && !selectedPlan.current;
-  const { removedAddOns, willAddOnsChange } = (0, import_react27.useMemo)(() => {
+  const { removedAddOns, willAddOnsChange } = (0, import_react28.useMemo)(() => {
     const addedAddOns = selectedAddOns.filter(
       (selected) => !currentAddOns.some((current) => selected.id === current.id)
     );
@@ -13386,6 +13607,20 @@ var Sidebar = ({
                   ]
                 }
               ),
+              taxAmount > 0 && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+                Flex,
+                {
+                  $justifyContent: "space-between",
+                  $alignItems: "center",
+                  $gap: "1rem",
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Box, { $opacity: "0.625", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Text, { children: t2("Tax (description):", {
+                      description: taxDescription
+                    }) }) }),
+                    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Text, { children: formatCurrency(taxAmount, selectedPlanCurrency) }) })
+                  ]
+                }
+              ),
               charges && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
                 Flex,
                 {
@@ -13590,21 +13825,32 @@ var AddOns = ({ addOns, toggle, isLoading, period }) => {
 };
 
 // src/components/shared/checkout-dialog/Checkout.tsx
-var import_react28 = require("react");
+var import_react29 = require("react");
 var import_jsx_runtime17 = require("react/jsx-runtime");
 var Checkout = ({
   isPaymentMethodRequired,
   setPaymentMethodId,
-  updatePromoCode
+  updatePromoCode,
+  confirmPaymentIntentProps,
+  financeData,
+  onPaymentMethodSaved
 }) => {
   const { t: t2 } = useTranslation();
   const isLightBackground = useIsLightBackground();
-  const [discount, setDiscount] = (0, import_react28.useState)("");
+  const [discount, setDiscount] = (0, import_react29.useState)("");
   if (!isPaymentMethodRequired) {
     return null;
   }
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(PaymentMethodDetails, { setPaymentMethodId }),
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      PaymentMethodDetails,
+      {
+        confirmPaymentIntentProps,
+        setPaymentMethodId,
+        financeData,
+        onPaymentMethodSaved
+      }
+    ),
     /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Flex, { $flexDirection: "column", $gap: "1rem", children: [
       /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Text, { display: "heading4", children: t2("Discount") }) }),
       /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
@@ -13805,12 +14051,12 @@ var Navigation = ({
 };
 
 // src/components/shared/checkout-dialog/Plan.tsx
-var import_react29 = require("react");
+var import_react30 = require("react");
 var import_jsx_runtime20 = require("react/jsx-runtime");
 var Selected = ({ isCurrent = false, isTrial = false }) => {
   const { t: t2 } = useTranslation();
   const { settings } = useEmbed();
-  const text = (0, import_react29.useMemo)(() => {
+  const text = (0, import_react30.useMemo)(() => {
     if (isCurrent) {
       return isTrial ? t2("Trial in progress") : t2("Current plan");
     }
@@ -13846,7 +14092,7 @@ var PlanButtonGroup = ({
 }) => {
   const { t: t2 } = useTranslation();
   const { data } = useEmbed();
-  const { isCurrentPlan, isValidPlan, isTrialing } = (0, import_react29.useMemo)(() => {
+  const { isCurrentPlan, isValidPlan, isTrialing } = (0, import_react30.useMemo)(() => {
     if (isCheckoutData(data)) {
       return {
         isCurrentPlan: data.company?.plan?.id === plan.id,
@@ -13957,10 +14203,10 @@ var Plan = ({
   const { t: t2 } = useTranslation();
   const { data, settings } = useEmbed();
   const isLightBackground = useIsLightBackground();
-  const [entitlementCounts, setEntitlementCounts] = (0, import_react29.useState)(
+  const [entitlementCounts, setEntitlementCounts] = (0, import_react30.useState)(
     () => plans.reduce(entitlementCountsReducer, {})
   );
-  const { isTrialing, showZeroPriceAsFree } = (0, import_react29.useMemo)(() => {
+  const { isTrialing, showZeroPriceAsFree } = (0, import_react30.useMemo)(() => {
     if (isCheckoutData(data)) {
       return {
         isTrialing: data.subscription?.status === "trialing",
@@ -13987,7 +14233,7 @@ var Plan = ({
       return prev2;
     });
   };
-  (0, import_react29.useEffect)(() => {
+  (0, import_react30.useEffect)(() => {
     setEntitlementCounts(plans.reduce(entitlementCountsReducer, {}));
   }, [plans]);
   const cardPadding = settings.theme.card.padding / TEXT_BASE_SIZE;
@@ -14518,24 +14764,25 @@ var CheckoutDialog = ({ top = 0 }) => {
   const { t: t2 } = useTranslation();
   const { data, settings, isPending, checkoutState, previewCheckout } = useEmbed();
   const isLightBackground = useIsLightBackground();
-  const contentRef = (0, import_react30.useRef)(null);
-  const checkoutRef = (0, import_react30.useRef)(null);
-  const [charges, setCharges] = (0, import_react30.useState)();
-  const [paymentMethodId, setPaymentMethodId] = (0, import_react30.useState)(
+  const contentRef = (0, import_react31.useRef)(null);
+  const checkoutRef = (0, import_react31.useRef)(null);
+  const [confirmPaymentIntentProps, setConfirmPaymentIntentProps] = (0, import_react31.useState)(void 0);
+  const [charges, setCharges] = (0, import_react31.useState)();
+  const [paymentMethodId, setPaymentMethodId] = (0, import_react31.useState)(
     () => {
       if (isCheckoutData(data)) {
         return (data.subscription?.paymentMethod || data.company?.defaultPaymentMethod)?.externalId;
       }
     }
   );
-  const [isLoading, setIsLoading] = (0, import_react30.useState)(false);
-  const [error, setError] = (0, import_react30.useState)();
+  const [isLoading, setIsLoading] = (0, import_react31.useState)(false);
+  const [error, setError] = (0, import_react31.useState)();
   const {
     currentPlanId,
     currentEntitlements,
     showPeriodToggle,
     trialPaymentMethodRequired
-  } = (0, import_react30.useMemo)(() => {
+  } = (0, import_react31.useMemo)(() => {
     if (isCheckoutData(data)) {
       return {
         currentPlanId: data.company?.plan?.id,
@@ -14551,11 +14798,11 @@ var CheckoutDialog = ({ top = 0 }) => {
       trialPaymentMethodRequired: false
     };
   }, [data]);
-  const currentPeriod = (0, import_react30.useMemo)(
+  const currentPeriod = (0, import_react31.useMemo)(
     () => checkoutState?.period || isCheckoutData(data) && data.company?.plan?.planPeriod || "month",
     [data, checkoutState?.period]
   );
-  const [planPeriod, setPlanPeriod] = (0, import_react30.useState)(currentPeriod);
+  const [planPeriod, setPlanPeriod] = (0, import_react31.useState)(currentPeriod);
   const {
     plans: availablePlans,
     addOns: availableAddOns,
@@ -14563,15 +14810,15 @@ var CheckoutDialog = ({ top = 0 }) => {
   } = useAvailablePlans(planPeriod, {
     useSelectedPeriod: showPeriodToggle
   });
-  const [selectedPlan, setSelectedPlan] = (0, import_react30.useState)(
+  const [selectedPlan, setSelectedPlan] = (0, import_react31.useState)(
     () => {
       return availablePlans.find(
         (plan) => checkoutState?.planId ? plan.id === checkoutState.planId : isHydratedPlan(plan) && plan.current
       );
     }
   );
-  const [shouldTrial, setShouldTrial] = (0, import_react30.useState)(false);
-  const [addOns, setAddOns] = (0, import_react30.useState)(() => {
+  const [shouldTrial, setShouldTrial] = (0, import_react31.useState)(false);
+  const [addOns, setAddOns] = (0, import_react31.useState)(() => {
     if (isCheckoutData(data)) {
       return availableAddOns.map((addOn) => ({
         ...addOn,
@@ -14582,7 +14829,7 @@ var CheckoutDialog = ({ top = 0 }) => {
     }
     return [];
   });
-  const [creditBundles, setCreditBundles] = (0, import_react30.useState)(() => {
+  const [creditBundles, setCreditBundles] = (0, import_react31.useState)(() => {
     if (isCheckoutData(data)) {
       return data.creditBundles.map((bundle) => ({
         ...bundle,
@@ -14591,7 +14838,7 @@ var CheckoutDialog = ({ top = 0 }) => {
     }
     return [];
   });
-  const [usageBasedEntitlements, setUsageBasedEntitlements] = (0, import_react30.useState)(
+  const [usageBasedEntitlements, setUsageBasedEntitlements] = (0, import_react31.useState)(
     () => (selectedPlan?.entitlements || []).reduce(
       createActiveUsageBasedEntitlementsReducer(
         currentEntitlements,
@@ -14600,7 +14847,7 @@ var CheckoutDialog = ({ top = 0 }) => {
       []
     )
   );
-  const [addOnUsageBasedEntitlements, setAddOnUsageBasedEntitlements] = (0, import_react30.useState)(() => {
+  const [addOnUsageBasedEntitlements, setAddOnUsageBasedEntitlements] = (0, import_react31.useState)(() => {
     if (!isCheckoutData(data)) return [];
     const currentAddOns = data.company?.addOns || [];
     return currentAddOns.flatMap((currentAddOn) => {
@@ -14617,26 +14864,26 @@ var CheckoutDialog = ({ top = 0 }) => {
       );
     });
   });
-  const payInAdvanceEntitlements = (0, import_react30.useMemo)(
+  const payInAdvanceEntitlements = (0, import_react31.useMemo)(
     () => usageBasedEntitlements.filter(
       (entitlement) => entitlement.priceBehavior === "pay_in_advance" /* PayInAdvance */
     ),
     [usageBasedEntitlements]
   );
-  const addOnPayInAdvanceEntitlements = (0, import_react30.useMemo)(
+  const addOnPayInAdvanceEntitlements = (0, import_react31.useMemo)(
     () => addOnUsageBasedEntitlements.filter(
       (entitlement) => entitlement.priceBehavior === "pay_in_advance" /* PayInAdvance */
     ),
     [addOnUsageBasedEntitlements]
   );
-  const [promoCode, setPromoCode] = (0, import_react30.useState)(null);
-  const [isPaymentMethodRequired, setIsPaymentMethodRequired] = (0, import_react30.useState)(false);
-  const willTrialWithoutPaymentMethod = (0, import_react30.useMemo)(
+  const [promoCode, setPromoCode] = (0, import_react31.useState)(null);
+  const [isPaymentMethodRequired, setIsPaymentMethodRequired] = (0, import_react31.useState)(false);
+  const willTrialWithoutPaymentMethod = (0, import_react31.useMemo)(
     () => shouldTrial && !trialPaymentMethodRequired,
     [shouldTrial, trialPaymentMethodRequired]
   );
   const isSelectedPlanTrialable = isHydratedPlan(selectedPlan) && selectedPlan.isTrialable && selectedPlan.companyCanTrial;
-  const checkoutStages = (0, import_react30.useMemo)(() => {
+  const checkoutStages = (0, import_react31.useMemo)(() => {
     const stages = [];
     if (availablePlans.length > 0) {
       stages.push({
@@ -14703,7 +14950,7 @@ var CheckoutDialog = ({ top = 0 }) => {
     creditBundles,
     isPaymentMethodRequired
   ]);
-  const [checkoutStage, setCheckoutStage] = (0, import_react30.useState)(() => {
+  const [checkoutStage, setCheckoutStage] = (0, import_react31.useState)(() => {
     if (checkoutState?.addOnId) {
       return "addons";
     }
@@ -14721,7 +14968,7 @@ var CheckoutDialog = ({ top = 0 }) => {
     }
     return "plan";
   });
-  const handlePreviewCheckout = (0, import_react30.useCallback)(
+  const handlePreviewCheckout = (0, import_react31.useCallback)(
     async (updates) => {
       const period = updates.period || planPeriod;
       const plan = updates.plan || selectedPlan;
@@ -14845,7 +15092,7 @@ var CheckoutDialog = ({ top = 0 }) => {
       promoCode
     ]
   );
-  const selectPlan = (0, import_react30.useCallback)(
+  const selectPlan = (0, import_react31.useCallback)(
     (updates) => {
       const plan = updates.plan;
       const period = updates.period || planPeriod;
@@ -14900,7 +15147,7 @@ var CheckoutDialog = ({ top = 0 }) => {
       handlePreviewCheckout
     ]
   );
-  const changePlanPeriod = (0, import_react30.useCallback)(
+  const changePlanPeriod = (0, import_react31.useCallback)(
     (period) => {
       if (period !== planPeriod) {
         setPlanPeriod(period);
@@ -14909,7 +15156,7 @@ var CheckoutDialog = ({ top = 0 }) => {
     },
     [planPeriod, setPlanPeriod, handlePreviewCheckout]
   );
-  const toggleAddOn = (0, import_react30.useCallback)(
+  const toggleAddOn = (0, import_react31.useCallback)(
     (id) => {
       setAddOns((prev2) => {
         const updated = prev2.map((addOn) => ({
@@ -14936,7 +15183,7 @@ var CheckoutDialog = ({ top = 0 }) => {
     },
     [handlePreviewCheckout]
   );
-  const updateUsageBasedEntitlementQuantity = (0, import_react30.useCallback)(
+  const updateUsageBasedEntitlementQuantity = (0, import_react31.useCallback)(
     (id, updatedQuantity) => {
       setUsageBasedEntitlements((prev2) => {
         const updated = prev2.map(
@@ -14955,7 +15202,7 @@ var CheckoutDialog = ({ top = 0 }) => {
     },
     [handlePreviewCheckout]
   );
-  const updateCreditBundleCount = (0, import_react30.useCallback)(
+  const updateCreditBundleCount = (0, import_react31.useCallback)(
     (id, updatedCount) => {
       setCreditBundles((prev2) => {
         const updated = prev2.map(
@@ -14970,7 +15217,7 @@ var CheckoutDialog = ({ top = 0 }) => {
     },
     [handlePreviewCheckout]
   );
-  const updateAddOnEntitlementQuantity = (0, import_react30.useCallback)(
+  const updateAddOnEntitlementQuantity = (0, import_react31.useCallback)(
     (id, updatedQuantity) => {
       setAddOnUsageBasedEntitlements((prev2) => {
         const updated = prev2.map(
@@ -14987,18 +15234,18 @@ var CheckoutDialog = ({ top = 0 }) => {
     },
     [handlePreviewCheckout]
   );
-  const updatePromoCode = (0, import_react30.useCallback)(
+  const updatePromoCode = (0, import_react31.useCallback)(
     async (code) => {
       handlePreviewCheckout({ promoCode: code });
     },
     [handlePreviewCheckout]
   );
-  (0, import_react30.useEffect)(() => {
+  (0, import_react31.useEffect)(() => {
     if (selectedPlan) {
       selectPlan({ plan: selectedPlan, period: currentPeriod });
     }
   }, []);
-  (0, import_react30.useEffect)(() => {
+  (0, import_react31.useEffect)(() => {
     setAddOns((prevAddOns) => {
       return availableAddOns.filter((availAddOn) => {
         if (!selectedPlan) {
@@ -15020,7 +15267,7 @@ var CheckoutDialog = ({ top = 0 }) => {
       });
     });
   }, [availableAddOns, data?.addOnCompatibilities, selectedPlan]);
-  (0, import_react30.useEffect)(() => {
+  (0, import_react31.useEffect)(() => {
     if (charges) {
       checkoutRef.current?.scrollTo({
         top: 0,
@@ -15029,7 +15276,7 @@ var CheckoutDialog = ({ top = 0 }) => {
       });
     }
   }, [charges]);
-  (0, import_react30.useLayoutEffect)(() => {
+  (0, import_react31.useLayoutEffect)(() => {
     contentRef.current?.scrollTo({
       top: 0,
       left: 0,
@@ -15191,7 +15438,10 @@ var CheckoutDialog = ({ top = 0 }) => {
                   {
                     isPaymentMethodRequired,
                     setPaymentMethodId: (id) => setPaymentMethodId(id),
-                    updatePromoCode
+                    updatePromoCode,
+                    confirmPaymentIntentProps,
+                    financeData: charges,
+                    onPaymentMethodSaved: handlePreviewCheckout
                   }
                 )
               ]
@@ -15220,6 +15470,7 @@ var CheckoutDialog = ({ top = 0 }) => {
               setIsLoading,
               updatePromoCode,
               shouldTrial,
+              setConfirmPaymentIntent: setConfirmPaymentIntentProps,
               willTrialWithoutPaymentMethod
             }
           )
@@ -15230,11 +15481,11 @@ var CheckoutDialog = ({ top = 0 }) => {
 };
 
 // src/components/shared/payment-dialog/PaymentDialog.tsx
-var import_react31 = require("react");
+var import_react32 = require("react");
 var import_jsx_runtime23 = require("react/jsx-runtime");
 var PaymentDialog = ({ top = 0 }) => {
   const { t: t2 } = useTranslation();
-  const contentRef = (0, import_react31.useRef)(null);
+  const contentRef = (0, import_react32.useRef)(null);
   return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(Modal2, { size: "md", top, contentRef, children: [
     /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ModalHeader, { bordered: true, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Text, { $size: 18, children: t2("Edit payment method") }) }),
     /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(PaymentMethodDetails, {})
@@ -15243,7 +15494,7 @@ var PaymentDialog = ({ top = 0 }) => {
 
 // src/components/shared/payment-form/PaymentForm.tsx
 var import_react_stripe_js = require("@stripe/react-stripe-js");
-var import_react32 = require("react");
+var import_react33 = require("react");
 
 // src/components/shared/payment-form/styles.ts
 var Label = dt.label`
@@ -15300,19 +15551,26 @@ var Input2 = dt.input`
 
 // src/components/shared/payment-form/PaymentForm.tsx
 var import_jsx_runtime24 = require("react/jsx-runtime");
-var PaymentForm = ({ onConfirm }) => {
+var PaymentForm = ({ onConfirm, financeData }) => {
   const { t: t2 } = useTranslation();
   const stripe = (0, import_react_stripe_js.useStripe)();
   const elements = (0, import_react_stripe_js.useElements)();
   const { data } = useEmbed();
-  const [email, setEmail] = (0, import_react32.useState)("");
-  const [message, setMessage] = (0, import_react32.useState)();
-  const [isLoading, setIsLoading] = (0, import_react32.useState)(false);
-  const [isConfirmed, setIsConfirmed] = (0, import_react32.useState)(false);
-  const [isPaymentComplete, setIsPaymentComplete] = (0, import_react32.useState)(false);
-  const [isAddressComplete, setIsAddressComplete] = (0, import_react32.useState)(
-    () => !isCheckoutData(data) || !data.checkoutSettings.collectAddress
-  );
+  const [email, setEmail] = (0, import_react33.useState)("");
+  const [message, setMessage] = (0, import_react33.useState)();
+  const [isLoading, setIsLoading] = (0, import_react33.useState)(false);
+  const [isConfirmed, setIsConfirmed] = (0, import_react33.useState)(false);
+  const [isPaymentComplete, setIsPaymentComplete] = (0, import_react33.useState)(false);
+  const [isAddressComplete, setIsAddressComplete] = (0, import_react33.useState)(() => {
+    if (!isCheckoutData(data)) {
+      return true;
+    }
+    const shouldCollectAddress = shouldCollectBillingAddress(
+      data.checkoutSettings.collectAddress,
+      financeData
+    );
+    return !shouldCollectAddress;
+  });
   const handleSubmit = async (event) => {
     event.preventDefault();
     if (!stripe || !elements) {
@@ -15381,7 +15639,10 @@ var PaymentForm = ({ onConfirm }) => {
             }
           )
         ] }),
-        isCheckoutData(data) && (data.checkoutSettings.collectAddress || data.checkoutSettings.collectPhone) && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Box, { $marginBottom: "3.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        isCheckoutData(data) && (shouldCollectBillingAddress(
+          data.checkoutSettings.collectAddress,
+          financeData
+        ) || data.checkoutSettings.collectPhone) && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Box, { $marginBottom: "3.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
           import_react_stripe_js.AddressElement,
           {
             options: {
@@ -15415,7 +15676,7 @@ var PaymentForm = ({ onConfirm }) => {
 };
 
 // src/components/shared/period-toggle/PeriodToggle.tsx
-var import_react33 = require("react");
+var import_react34 = require("react");
 var import_jsx_runtime25 = require("react/jsx-runtime");
 var PeriodToggle = ({
   options,
@@ -15426,7 +15687,7 @@ var PeriodToggle = ({
   const { t: t2 } = useTranslation();
   const { settings } = useEmbed();
   const isLightBackground = useIsLightBackground();
-  const savingsPercentage = (0, import_react33.useMemo)(() => {
+  const savingsPercentage = (0, import_react34.useMemo)(() => {
     if (selectedPlan) {
       const monthlyBillingPrice = getPlanPrice(selectedPlan, "month");
       const yearlyBillingPrice = getPlanPrice(selectedPlan, "year");
@@ -15506,10 +15767,10 @@ var PeriodToggle = ({
 };
 
 // src/components/shared/pricing-tiers-tooltip/PricingTiersTooltip.tsx
-var import_react35 = require("react");
+var import_react36 = require("react");
 
 // src/components/shared/pricing-tiers-tooltip/PriceText.tsx
-var import_react34 = require("react");
+var import_react35 = require("react");
 var import_jsx_runtime26 = require("react/jsx-runtime");
 var PriceText = ({
   feature,
@@ -15519,7 +15780,7 @@ var PriceText = ({
   perUnitPrice = 0
 }) => {
   const { settings } = useEmbed();
-  const text = (0, import_react34.useMemo)(() => {
+  const text = (0, import_react35.useMemo)(() => {
     if (!flatAmount && perUnitPrice) {
       return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
         formatCurrency(perUnitPrice, currency),
@@ -15567,7 +15828,7 @@ var PricingTiersTooltip = ({
   const { t: t2 } = useTranslation();
   const { settings } = useEmbed();
   const isLightBackground = useIsLightBackground();
-  const tiers = (0, import_react35.useMemo)(() => {
+  const tiers = (0, import_react36.useMemo)(() => {
     let start = 1;
     return priceTiers.map((tier) => {
       const { upTo, ...rest } = tier;
@@ -15655,13 +15916,13 @@ var PricingTiersTooltip = ({
 };
 
 // src/components/shared/tiered-pricing-details/TieredPricingDetails.tsx
-var import_react36 = require("react");
+var import_react37 = require("react");
 var TieredPricingDetails = ({
   entitlement,
   period
 }) => {
   const { t: t2 } = useTranslation();
-  const { currency, flatAmount, perUnitPrice, upTo } = (0, import_react36.useMemo)(() => {
+  const { currency, flatAmount, perUnitPrice, upTo } = (0, import_react37.useMemo)(() => {
     const { currency: currency2, priceTier } = getEntitlementPrice(entitlement, period) || {};
     const { flatAmount: flatAmount2, perUnitPrice: perUnitPrice2, perUnitPriceDecimal, upTo: upTo2 } = priceTier?.[0] || {};
     return {
@@ -15709,15 +15970,15 @@ var TieredPricingDetails = ({
 };
 
 // src/components/shared/unsubscribe-dialog/UnsubscribeDialog.tsx
-var import_react37 = require("react");
+var import_react38 = require("react");
 var import_jsx_runtime28 = require("react/jsx-runtime");
 var UnsubscribeDialog = ({ top = 0 }) => {
   const { t: t2 } = useTranslation();
   const { data, setCheckoutState } = useEmbed();
-  const contentRef = (0, import_react37.useRef)(null);
-  const [error, setError] = (0, import_react37.useState)();
-  const [isLoading, setIsLoading] = (0, import_react37.useState)(false);
-  const { planPeriod, currentPlan, currentAddOns, featureUsage, cancelDate } = (0, import_react37.useMemo)(() => {
+  const contentRef = (0, import_react38.useRef)(null);
+  const [error, setError] = (0, import_react38.useState)();
+  const [isLoading, setIsLoading] = (0, import_react38.useState)(false);
+  const { planPeriod, currentPlan, currentAddOns, featureUsage, cancelDate } = (0, import_react38.useMemo)(() => {
     if (isCheckoutData(data)) {
       return {
         planPeriod: data.company?.plan?.planPeriod || "month",
@@ -15738,7 +15999,7 @@ var UnsubscribeDialog = ({ top = 0 }) => {
     };
   }, [data]);
   const { plans: availablePlans, addOns: availableAddOns } = useAvailablePlans(planPeriod);
-  const selectedPlan = (0, import_react37.useMemo)(
+  const selectedPlan = (0, import_react38.useMemo)(
     () => availablePlans.find((plan) => plan.id === currentPlan?.id),
     [currentPlan?.id, availablePlans]
   );
@@ -15747,7 +16008,7 @@ var UnsubscribeDialog = ({ top = 0 }) => {
     createActiveUsageBasedEntitlementsReducer(currentEntitlements, planPeriod),
     []
   );
-  const addOns = (0, import_react37.useMemo)(
+  const addOns = (0, import_react38.useMemo)(
     () => availableAddOns.map((available) => ({
       ...available,
       isSelected: currentAddOns.some((current) => available.id === current.id) ?? false
@@ -15823,7 +16084,9 @@ var UnsubscribeDialog = ({ top = 0 }) => {
               isPaymentMethodRequired: false,
               showHeader: false,
               setError: (msg) => setError(msg),
-              setIsLoading
+              setIsLoading,
+              setConfirmPaymentIntent: () => {
+              }
             }
           )
         ]
@@ -15986,17 +16249,17 @@ var StyledViewport = dt.div.withConfig({
 
 // src/components/layout/viewport/Viewport.tsx
 var import_jsx_runtime31 = require("react/jsx-runtime");
-var Viewport = (0, import_react38.forwardRef)(
+var Viewport = (0, import_react39.forwardRef)(
   ({ children, portal, ...props }, ref) => {
     const { data, layout, settings } = useEmbed();
-    const [top, setTop] = (0, import_react38.useState)(0);
-    const { canCheckout, isBadgeVisible } = (0, import_react38.useMemo)(() => {
+    const [top, setTop] = (0, import_react39.useState)(0);
+    const { canCheckout, isBadgeVisible } = (0, import_react39.useMemo)(() => {
       return {
         canCheckout: data?.capabilities?.checkout ?? true,
         isBadgeVisible: !data?.capabilities?.badgeVisibility || settings.badge?.visibility !== "hidden"
       };
     }, [data, settings]);
-    (0, import_react38.useLayoutEffect)(() => {
+    (0, import_react39.useLayoutEffect)(() => {
       const parent = portal || document.body;
       const setModalY = (0, import_debounce3.default)(() => {
         const value = Math.abs(
@@ -16043,7 +16306,7 @@ var resolveDesignProps = (props) => {
     }
   };
 };
-var ButtonElement = (0, import_react39.forwardRef)(({ children, className, ...rest }, ref) => {
+var ButtonElement = (0, import_react40.forwardRef)(({ children, className, ...rest }, ref) => {
   const props = resolveDesignProps(rest);
   const buttonStyles2 = {
     primary: {
@@ -16088,10 +16351,10 @@ var ButtonElement = (0, import_react39.forwardRef)(({ children, className, ...re
 ButtonElement.displayName = "Button";
 
 // src/components/elements/included-features/IncludedFeatures.tsx
-var import_react41 = require("react");
+var import_react42 = require("react");
 
 // src/components/elements/included-features/UsageDetails.tsx
-var import_react40 = require("react");
+var import_react41 = require("react");
 var import_jsx_runtime33 = require("react/jsx-runtime");
 var UsageDetails = ({
   entitlement,
@@ -16110,14 +16373,14 @@ var UsageDetails = ({
   } = entitlement;
   const { t: t2 } = useTranslation();
   const { data } = useEmbed();
-  const period = (0, import_react40.useMemo)(() => {
+  const period = (0, import_react41.useMemo)(() => {
     return isCheckoutData(data) && typeof data.company?.plan?.planPeriod === "string" ? data.company.plan.planPeriod : void 0;
   }, [data]);
-  const { billingPrice, cost, currentTier } = (0, import_react40.useMemo)(
+  const { billingPrice, cost, currentTier } = (0, import_react41.useMemo)(
     () => getUsageDetails(entitlement, period),
     [entitlement, period]
   );
-  const text = (0, import_react40.useMemo)(() => {
+  const text = (0, import_react41.useMemo)(() => {
     if (!feature) {
       return;
     }
@@ -16192,7 +16455,7 @@ var UsageDetails = ({
     billingPrice,
     currentTier?.to
   ]);
-  const usageText = (0, import_react40.useMemo)(() => {
+  const usageText = (0, import_react41.useMemo)(() => {
     if (!feature) {
       return;
     }
@@ -16201,7 +16464,7 @@ var UsageDetails = ({
     let index = 0;
     if (priceBehavior === "pay_in_advance" /* PayInAdvance */ && typeof period === "string" && typeof price === "number") {
       acc.push(
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_react40.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_react41.Fragment, { children: [
           formatCurrency(price, currency),
           "/",
           packageSize > 1 && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
@@ -16216,7 +16479,7 @@ var UsageDetails = ({
       index += 1;
     } else if ((priceBehavior === "pay_as_you_go" /* PayAsYouGo */ || priceBehavior === "overage" /* Overage */ || priceBehavior === "tier" /* Tiered */ || priceBehavior === "credit_burndown" /* Credit */) && typeof usage === "number") {
       acc.push(
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_react40.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_react41.Fragment, { children: [
           usage,
           " ",
           getFeatureName(feature, usage),
@@ -16228,14 +16491,14 @@ var UsageDetails = ({
     }
     if (typeof cost === "number" && cost > 0) {
       acc.push(
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_react40.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_react41.Fragment, { children: [
           acc.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_jsx_runtime33.Fragment, { children: " \u2022 " }),
           formatCurrency(cost, currency)
         ] }, index)
       );
       index += 1;
       if (feature.featureType === "trait" /* Trait */ && typeof period === "string") {
-        acc.push(/* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_react40.Fragment, { children: [
+        acc.push(/* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_react41.Fragment, { children: [
           "/",
           shortenPeriod(period)
         ] }, index));
@@ -16244,7 +16507,7 @@ var UsageDetails = ({
     }
     if (metricResetAt) {
       acc.push(
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_react40.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_react41.Fragment, { children: [
           acc.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_jsx_runtime33.Fragment, { children: " \u2022 " }),
           t2("Resets", {
             date: toPrettyDate(metricResetAt, {
@@ -16337,15 +16600,15 @@ function resolveDesignProps2(props) {
     visibleFeatures: props.visibleFeatures
   };
 }
-var IncludedFeatures = (0, import_react41.forwardRef)(({ className, ...rest }, ref) => {
+var IncludedFeatures = (0, import_react42.forwardRef)(({ className, ...rest }, ref) => {
   const props = resolveDesignProps2(rest);
   const { t: t2 } = useTranslation();
   const { data, settings } = useEmbed();
-  const elements = (0, import_react41.useRef)([]);
+  const elements = (0, import_react42.useRef)([]);
   const shouldWrapChildren = useWrapChildren(elements.current);
   const isLightBackground = useIsLightBackground();
-  const [showCount, setShowCount] = (0, import_react41.useState)(VISIBLE_ENTITLEMENT_COUNT);
-  const { plan, addOns, featureUsage } = (0, import_react41.useMemo)(() => {
+  const [showCount, setShowCount] = (0, import_react42.useState)(VISIBLE_ENTITLEMENT_COUNT);
+  const { plan, addOns, featureUsage } = (0, import_react42.useMemo)(() => {
     if (isCheckoutData(data)) {
       const orderedFeatureUsage = props.visibleFeatures?.reduce(
         (acc, id) => {
@@ -16481,7 +16744,7 @@ var IncludedFeatures = (0, import_react41.forwardRef)(({ className, ...rest }, r
 IncludedFeatures.displayName = "IncludedFeatures";
 
 // src/components/elements/invoices/Invoices.tsx
-var import_react42 = require("react");
+var import_react43 = require("react");
 var import_jsx_runtime35 = require("react/jsx-runtime");
 function resolveDesignProps3(props) {
   return {
@@ -16516,15 +16779,15 @@ function formatInvoices(invoices, options) {
     url: url || void 0
   }));
 }
-var Invoices = (0, import_react42.forwardRef)(({ className, data, ...rest }, ref) => {
+var Invoices = (0, import_react43.forwardRef)(({ className, data, ...rest }, ref) => {
   const props = resolveDesignProps3(rest);
   const { t: t2 } = useTranslation();
   const { listInvoices, settings } = useEmbed();
-  const [isLoading, setIsLoading] = (0, import_react42.useState)(false);
-  const [error, setError] = (0, import_react42.useState)();
-  const [invoices, setInvoices] = (0, import_react42.useState)(() => formatInvoices(data));
-  const [listSize, setListSize] = (0, import_react42.useState)(props.limit.number);
-  const getInvoices = (0, import_react42.useCallback)(async () => {
+  const [isLoading, setIsLoading] = (0, import_react43.useState)(false);
+  const [error, setError] = (0, import_react43.useState)();
+  const [invoices, setInvoices] = (0, import_react43.useState)(() => formatInvoices(data));
+  const [listSize, setListSize] = (0, import_react43.useState)(props.limit.number);
+  const getInvoices = (0, import_react43.useCallback)(async () => {
     try {
       setError(void 0);
       setIsLoading(true);
@@ -16543,10 +16806,10 @@ var Invoices = (0, import_react42.forwardRef)(({ className, data, ...rest }, ref
       (prev2) => prev2 !== props.limit.number ? props.limit.number : MAX_VISIBLE_INVOICE_COUNT
     );
   };
-  (0, import_react42.useEffect)(() => {
+  (0, import_react43.useEffect)(() => {
     getInvoices();
   }, [getInvoices]);
-  (0, import_react42.useEffect)(() => {
+  (0, import_react43.useEffect)(() => {
     setInvoices(formatInvoices(data));
   }, [data]);
   if (invoices.length === 0) {
@@ -16626,7 +16889,7 @@ var Invoices = (0, import_react42.forwardRef)(({ className, data, ...rest }, ref
 Invoices.displayName = "Invoices";
 
 // src/components/elements/metered-features/MeteredFeatures.tsx
-var import_react43 = require("react");
+var import_react44 = require("react");
 
 // src/components/elements/metered-features/Meter.tsx
 var import_jsx_runtime36 = require("react/jsx-runtime");
@@ -16824,14 +17087,14 @@ function resolveDesignProps4(props) {
     visibleFeatures: props.visibleFeatures
   };
 }
-var MeteredFeatures = (0, import_react43.forwardRef)(({ className, ...rest }, ref) => {
+var MeteredFeatures = (0, import_react44.forwardRef)(({ className, ...rest }, ref) => {
   const props = resolveDesignProps4(rest);
-  const elements = (0, import_react43.useRef)([]);
+  const elements = (0, import_react44.useRef)([]);
   const shouldWrapChildren = useWrapChildren(elements.current);
   const { t: t2 } = useTranslation();
   const { data, settings, setCheckoutState } = useEmbed();
   const isLightBackground = useIsLightBackground();
-  const { period, meteredFeatures, creditGroups } = (0, import_react43.useMemo)(() => {
+  const { period, meteredFeatures, creditGroups } = (0, import_react44.useMemo)(() => {
     if (isCheckoutData(data)) {
       const period2 = typeof data.company?.plan?.planPeriod === "string" ? data.company?.plan?.planPeriod : void 0;
       const orderedFeatureUsage = props.visibleFeatures?.reduce(
@@ -16865,10 +17128,10 @@ var MeteredFeatures = (0, import_react43.forwardRef)(({ className, ...rest }, re
       creditGroups: []
     };
   }, [props.visibleFeatures, data]);
-  const [creditVisibility, setCreditVisibility] = (0, import_react43.useState)(
+  const [creditVisibility, setCreditVisibility] = (0, import_react44.useState)(
     creditGroups.map(({ id }) => ({ id, isExpanded: false }))
   );
-  const toggleBalanceDetails = (0, import_react43.useCallback)((id) => {
+  const toggleBalanceDetails = (0, import_react44.useCallback)((id) => {
     setCreditVisibility(
       (prev2) => prev2.map(
         (item) => item.id === id ? { ...item, isExpanded: !item.isExpanded } : item
@@ -17137,10 +17400,10 @@ var MeteredFeatures = (0, import_react43.forwardRef)(({ className, ...rest }, re
 MeteredFeatures.displayName = "MeteredFeatures";
 
 // src/components/elements/payment-method/PaymentMethod.tsx
-var import_react45 = require("react");
+var import_react46 = require("react");
 
 // src/components/elements/payment-method/PaymentMethodElement.tsx
-var import_react44 = require("react");
+var import_react45 = require("react");
 var import_jsx_runtime39 = require("react/jsx-runtime");
 var PaymentElement2 = ({
   iconName,
@@ -17260,7 +17523,7 @@ var PaymentListElement = ({
 }) => {
   const isLightBackground = useIsLightBackground();
   const { iconName, iconTitle, label, paymentLast4 } = getPaymentMethodData(paymentMethod);
-  const expirationDate = (0, import_react44.useMemo)(() => {
+  const expirationDate = (0, import_react45.useMemo)(() => {
     const { cardExpMonth, cardExpYear } = paymentMethod;
     if (!cardExpMonth || !cardExpYear) {
       return;
@@ -17345,10 +17608,10 @@ var resolveDesignProps5 = (props) => {
     }
   };
 };
-var PaymentMethod = (0, import_react45.forwardRef)(({ children, className, portal, allowEdit = true, ...rest }, ref) => {
+var PaymentMethod = (0, import_react46.forwardRef)(({ children, className, portal, allowEdit = true, ...rest }, ref) => {
   const props = resolveDesignProps5(rest);
   const { data, setLayout } = useEmbed();
-  const { paymentMethod, monthsToExpiration } = (0, import_react45.useMemo)(() => {
+  const { paymentMethod, monthsToExpiration } = (0, import_react46.useMemo)(() => {
     if (isCheckoutData(data)) {
       const paymentMethod2 = data.subscription?.paymentMethod || data.company?.defaultPaymentMethod;
       let monthsToExpiration2;
@@ -17541,7 +17804,7 @@ var loadStripe = function loadStripe2() {
 };
 
 // src/components/elements/payment-method/PaymentMethodDetails.tsx
-var import_react46 = require("react");
+var import_react47 = require("react");
 var import_jsx_runtime41 = require("react/jsx-runtime");
 var resolveDesignProps6 = () => {
   return {
@@ -17556,7 +17819,10 @@ var resolveDesignProps6 = () => {
   };
 };
 var PaymentMethodDetails = ({
-  setPaymentMethodId
+  setPaymentMethodId,
+  confirmPaymentIntentProps,
+  financeData,
+  onPaymentMethodSaved
 }) => {
   const props = resolveDesignProps6();
   const { t: t2 } = useTranslation();
@@ -17567,7 +17833,7 @@ var PaymentMethodDetails = ({
     updatePaymentMethod,
     deletePaymentMethod
   } = useEmbed();
-  const { defaultPaymentMethod, paymentMethods, subscription } = (0, import_react46.useMemo)(() => {
+  const { defaultPaymentMethod, paymentMethods, subscription } = (0, import_react47.useMemo)(() => {
     if (isCheckoutData(data)) {
       return {
         defaultPaymentMethod: data.company?.defaultPaymentMethod,
@@ -17582,14 +17848,26 @@ var PaymentMethodDetails = ({
     };
   }, [data]);
   const isLightBackground = useIsLightBackground();
-  const [isLoading, setIsLoading] = (0, import_react46.useState)(false);
-  const [error, setError] = (0, import_react46.useState)();
-  const [showPaymentForm, setShowPaymentForm] = (0, import_react46.useState)(false);
-  const [stripe, setStripe] = (0, import_react46.useState)(null);
-  const [setupIntent, setSetupIntent] = (0, import_react46.useState)();
-  const [showDifferentPaymentMethods, setShowDifferentPaymentMethods] = (0, import_react46.useState)(false);
-  const [currentPaymentMethod, setCurrentPaymentMethod] = (0, import_react46.useState)(subscription?.paymentMethod || defaultPaymentMethod);
-  const monthsToExpiration = (0, import_react46.useMemo)(() => {
+  const [isLoading, setIsLoading] = (0, import_react47.useState)(false);
+  const [error, setError] = (0, import_react47.useState)();
+  const [showPaymentForm, setShowPaymentForm] = (0, import_react47.useState)(false);
+  const [stripe, setStripe] = (0, import_react47.useState)(null);
+  const [setupIntent, setSetupIntent] = (0, import_react47.useState)();
+  const [showDifferentPaymentMethods, setShowDifferentPaymentMethods] = (0, import_react47.useState)(false);
+  const [currentPaymentMethod, setCurrentPaymentMethod] = (0, import_react47.useState)(subscription?.paymentMethod || defaultPaymentMethod);
+  const { isConfirming: isConfirmingPayment } = usePaymentConfirmation({
+    stripe,
+    clientSecret: confirmPaymentIntentProps?.clientSecret,
+    onSuccess: () => {
+      confirmPaymentIntentProps?.callback(true);
+    },
+    onError: (error2) => {
+      console.error("Payment confirmation error:", error2);
+      confirmPaymentIntentProps?.callback(false);
+    },
+    autoConfirm: true
+  });
+  const monthsToExpiration = (0, import_react47.useMemo)(() => {
     let expiration;
     if (typeof currentPaymentMethod?.cardExpYear === "number" && typeof currentPaymentMethod?.cardExpMonth === "number") {
       const now = /* @__PURE__ */ new Date();
@@ -17612,7 +17890,7 @@ var PaymentMethodDetails = ({
   const toggleShowPaymentMethods = () => {
     setShowDifferentPaymentMethods((prev2) => !prev2);
   };
-  const initializePaymentMethod = (0, import_react46.useCallback)(async () => {
+  const initializePaymentMethod = (0, import_react47.useCallback)(async () => {
     try {
       setIsLoading(true);
       const response = await createSetupIntent();
@@ -17628,7 +17906,7 @@ var PaymentMethodDetails = ({
       setIsLoading(false);
     }
   }, [t2, createSetupIntent]);
-  const handleUpdatePaymentMethod = (0, import_react46.useCallback)(
+  const handleUpdatePaymentMethod = (0, import_react47.useCallback)(
     async (paymentMethodId) => {
       try {
         setIsLoading(true);
@@ -17638,6 +17916,9 @@ var PaymentMethodDetails = ({
           if (setPaymentMethodId) {
             setPaymentMethodId(response.data.externalId);
           }
+          if (onPaymentMethodSaved) {
+            onPaymentMethodSaved({});
+          }
         }
       } catch {
         setError(t2("Error updating payment method. Please try again."));
@@ -17645,9 +17926,9 @@ var PaymentMethodDetails = ({
         setIsLoading(false);
       }
     },
-    [t2, setPaymentMethodId, updatePaymentMethod]
+    [t2, setPaymentMethodId, updatePaymentMethod, onPaymentMethodSaved]
   );
-  const handleDeletePaymentMethod = (0, import_react46.useCallback)(
+  const handleDeletePaymentMethod = (0, import_react47.useCallback)(
     async (paymentMethodId) => {
       try {
         setIsLoading(true);
@@ -17660,7 +17941,7 @@ var PaymentMethodDetails = ({
     },
     [t2, deletePaymentMethod]
   );
-  (0, import_react46.useEffect)(() => {
+  (0, import_react47.useEffect)(() => {
     if (!stripe && setupIntent) {
       let publishableKey = setupIntent.publishableKey || setupIntent.schematicPublishableKey;
       const stripeOptions = {};
@@ -17668,10 +17949,11 @@ var PaymentMethodDetails = ({
         publishableKey = setupIntent.schematicPublishableKey;
         stripeOptions.stripeAccount = setupIntent.accountId;
       }
-      setStripe(loadStripe(publishableKey, stripeOptions));
+      const stripePromise2 = loadStripe(publishableKey, stripeOptions);
+      setStripe(stripePromise2);
     }
   }, [stripe, setupIntent]);
-  (0, import_react46.useEffect)(() => {
+  (0, import_react47.useEffect)(() => {
     if (!setupIntent && (!currentPaymentMethod || showPaymentForm)) {
       initializePaymentMethod();
     }
@@ -17686,7 +17968,7 @@ var PaymentMethodDetails = ({
       Flex,
       {
         $position: "absolute",
-        $zIndex: isLoading ? 1 : 0,
+        $zIndex: isLoading || isConfirmingPayment ? 1 : 0,
         $justifyContent: "center",
         $alignItems: "center",
         $width: "100%",
@@ -17696,7 +17978,7 @@ var PaymentMethodDetails = ({
           {
             $color: settings.theme.primary,
             $size: "2xl",
-            $isLoading: isLoading
+            $isLoading: isLoading || isConfirmingPayment
           }
         )
       }
@@ -17705,16 +17987,16 @@ var PaymentMethodDetails = ({
       Flex,
       {
         $position: "relative",
-        $zIndex: isLoading ? 0 : 1,
+        $zIndex: isLoading || isConfirmingPayment ? 0 : 1,
         $flexDirection: "column",
         $flexGrow: 1,
         $gap: "1rem",
         $overflow: "auto",
         $padding: "2rem 2.5rem 2rem 2.5rem",
-        $visibility: isLoading ? "hidden" : "visible",
+        $visibility: isLoading || isConfirmingPayment ? "hidden" : "visible",
         $backgroundColor: isLightBackground ? "hsla(0, 0%, 0%, 0.025)" : "hsla(0, 0%, 100%, 0.025)",
         children: [
-          setupIntent && showPaymentForm ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+          setupIntent && showPaymentForm && stripe ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
             import_react_stripe_js2.Elements,
             {
               stripe,
@@ -17747,6 +18029,7 @@ var PaymentMethodDetails = ({
                 /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
                   PaymentForm,
                   {
+                    financeData,
                     onConfirm: async (paymentMethodId) => {
                       await handleUpdatePaymentMethod(paymentMethodId);
                       setShowPaymentForm(false);
@@ -17827,7 +18110,7 @@ var PaymentMethodDetails = ({
 };
 
 // src/components/elements/plan-manager/PlanManager.tsx
-var import_react48 = require("react");
+var import_react49 = require("react");
 
 // src/components/elements/plan-manager/AddOn.tsx
 var import_jsx_runtime42 = require("react/jsx-runtime");
@@ -17851,7 +18134,7 @@ var AddOn = ({ addOn, currency, layout }) => {
 };
 
 // src/components/elements/plan-manager/UsageDetails.tsx
-var import_react47 = require("react");
+var import_react48 = require("react");
 var import_jsx_runtime43 = require("react/jsx-runtime");
 var UsageDetails2 = ({
   entitlement,
@@ -17865,18 +18148,18 @@ var UsageDetails2 = ({
     limit,
     amount = 0,
     cost = 0
-  } = (0, import_react47.useMemo)(
+  } = (0, import_react48.useMemo)(
     () => getUsageDetails(entitlement, period),
     [entitlement, period]
   );
-  const description = (0, import_react47.useMemo)(() => {
+  const description = (0, import_react48.useMemo)(() => {
     const acc = [];
     let index = 0;
     if (entitlement.priceBehavior === "overage" /* Overage */) {
       acc.push(
-        amount > 0 ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_react47.Fragment, { children: t2("X additional", {
+        amount > 0 ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_react48.Fragment, { children: t2("X additional", {
           amount
-        }) }, index) : /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_react47.Fragment, { children: [
+        }) }, index) : /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_react48.Fragment, { children: [
           t2("Additional"),
           ": "
         ] }, index)
@@ -17887,7 +18170,7 @@ var UsageDetails2 = ({
     if (entitlement.priceBehavior !== "tier" /* Tiered */ && entitlement.feature && typeof price === "number" && !amount) {
       const packageSize = billingPrice?.packageSize ?? 1;
       acc.push(
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_react47.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_react48.Fragment, { children: [
           formatCurrency(price, billingPrice?.currency),
           /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("sub", { children: [
             "/",
@@ -17908,7 +18191,7 @@ var UsageDetails2 = ({
     if (entitlement.priceBehavior === "credit_burndown" /* Credit */ && entitlement.planEntitlement?.consumptionRate && entitlement.planEntitlement?.valueCredit) {
       const creditAmount = entitlement.planEntitlement.consumptionRate * amount;
       acc.push(
-        creditAmount > 0 ? /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_react47.Fragment, { children: [
+        creditAmount > 0 ? /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_react48.Fragment, { children: [
           creditAmount,
           " ",
           getFeatureName(
@@ -17917,7 +18200,7 @@ var UsageDetails2 = ({
           ),
           " ",
           t2("used")
-        ] }, index) : /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_react47.Fragment, { children: [
+        ] }, index) : /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_react48.Fragment, { children: [
           entitlement.planEntitlement.consumptionRate,
           " ",
           getFeatureName(
@@ -18015,7 +18298,7 @@ var resolveDesignProps7 = (props) => {
     }
   };
 };
-var PlanManager = (0, import_react48.forwardRef)(({ children, className, portal, ...rest }, ref) => {
+var PlanManager = (0, import_react49.forwardRef)(({ children, className, portal, ...rest }, ref) => {
   const props = resolveDesignProps7(rest);
   const { t: t2 } = useTranslation();
   const { data, settings, setCheckoutState } = useEmbed();
@@ -18028,18 +18311,18 @@ var PlanManager = (0, import_react48.forwardRef)(({ children, className, portal,
     creditGroups,
     billingSubscription,
     canCheckout,
-    defaultPlan,
+    postTrialPlan,
     featureUsage,
     showZeroPriceAsFree,
     trialPaymentMethodRequired
-  } = (0, import_react48.useMemo)(() => {
+  } = (0, import_react49.useMemo)(() => {
     if (isCheckoutData(data)) {
       const {
         company,
         creditBundles: creditBundles2,
         creditGrants,
         capabilities,
-        defaultPlan: defaultPlan2,
+        postTrialPlan: postTrialPlan2,
         featureUsage: featureUsage2,
         showZeroPriceAsFree: showZeroPriceAsFree2,
         trialPaymentMethodRequired: trialPaymentMethodRequired2
@@ -18069,7 +18352,7 @@ var PlanManager = (0, import_react48.forwardRef)(({ children, className, portal,
         creditGroups: creditGroups2,
         billingSubscription: company?.billingSubscription,
         canCheckout: capabilities?.checkout ?? true,
-        defaultPlan: defaultPlan2,
+        postTrialPlan: postTrialPlan2,
         featureUsage: featureUsage2?.features || [],
         showZeroPriceAsFree: showZeroPriceAsFree2,
         trialPaymentMethodRequired: trialPaymentMethodRequired2
@@ -18082,13 +18365,13 @@ var PlanManager = (0, import_react48.forwardRef)(({ children, className, portal,
       creditGroups: { plan: [], bundles: [], promotional: [] },
       billingSubscription: void 0,
       canCheckout: false,
-      defaultPlan: void 0,
+      postTrialPlan: void 0,
       featureUsage: [],
       showZeroPriceAsFree: false,
       trialPaymentMethodRequired: false
     };
   }, [data]);
-  const usageBasedEntitlements = (0, import_react48.useMemo)(
+  const usageBasedEntitlements = (0, import_react49.useMemo)(
     () => featureUsage.filter((usage) => typeof usage.priceBehavior === "string"),
     [featureUsage]
   );
@@ -18097,7 +18380,7 @@ var PlanManager = (0, import_react48.forwardRef)(({ children, className, portal,
     subscriptionCurrency,
     willSubscriptionCancel,
     isTrialSubscription
-  } = (0, import_react48.useMemo)(() => {
+  } = (0, import_react49.useMemo)(() => {
     const subscriptionInterval2 = billingSubscription?.interval;
     const subscriptionCurrency2 = billingSubscription?.currency;
     const isTrialSubscription2 = billingSubscription?.status === "trialing";
@@ -18123,8 +18406,8 @@ var PlanManager = (0, import_react48.forwardRef)(({ children, className, portal,
         $backgroundColor: isLightBackground ? darken(settings.theme.card.background, 0.04) : lighten(settings.theme.card.background, 0.04),
         children: [
           typeof trialEnd.formatted !== "undefined" && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Text, { as: "h3", display: "heading3", children: trialEnd.formatted }),
-          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Text, { as: "p", $size: 0.8125 * settings.theme.typography.text.fontSize, children: trialPaymentMethodRequired ? t2("After the trial, subscribe") : defaultPlan ? t2("After the trial, cancel", {
-            defaultPlanName: defaultPlan?.name
+          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Text, { as: "p", $size: 0.8125 * settings.theme.typography.text.fontSize, children: trialPaymentMethodRequired ? t2("After the trial, subscribe") : postTrialPlan ? t2("After the trial, cancel", {
+            postTrialPlanName: postTrialPlan?.name
           }) : t2("After the trial, cancel no default", {
             planName: currentPlan?.name
           }) })
@@ -18409,17 +18692,17 @@ var PlanManager = (0, import_react48.forwardRef)(({ children, className, portal,
 PlanManager.displayName = "PlanManager";
 
 // src/components/elements/pricing-table/PricingTable.tsx
-var import_react51 = require("react");
+var import_react52 = require("react");
 
 // src/components/elements/pricing-table/AddOn.tsx
-var import_react49 = require("react");
+var import_react50 = require("react");
 var import_jsx_runtime45 = require("react/jsx-runtime");
 var AddOn2 = ({ addOn, sharedProps, selectedPeriod }) => {
   const { layout } = sharedProps;
   const { t: t2 } = useTranslation();
   const { data, settings, setCheckoutState } = useEmbed();
   const isLightBackground = useIsLightBackground();
-  const { currentAddOns, canCheckout, isStandalone, showCallToAction } = (0, import_react49.useMemo)(() => {
+  const { currentAddOns, canCheckout, isStandalone, showCallToAction } = (0, import_react50.useMemo)(() => {
     if (isCheckoutData(data)) {
       return {
         currentAddOns: data.company?.addOns || [],
@@ -18592,7 +18875,7 @@ var AddOn2 = ({ addOn, sharedProps, selectedPeriod }) => {
 };
 
 // src/components/elements/pricing-table/Plan.tsx
-var import_react50 = require("react");
+var import_react51 = require("react");
 
 // src/components/elements/pricing-table/Entitlement.tsx
 var import_jsx_runtime46 = require("react/jsx-runtime");
@@ -18751,7 +19034,7 @@ var Plan2 = ({
     isStandalone,
     showCallToAction,
     showZeroPriceAsFree
-  } = (0, import_react50.useMemo)(() => {
+  } = (0, import_react51.useMemo)(() => {
     if (isCheckoutData(data)) {
       const billingSubscription = data.company?.billingSubscription;
       const isTrialSubscription2 = billingSubscription?.status === "trialing";
@@ -18776,7 +19059,7 @@ var Plan2 = ({
       showZeroPriceAsFree: false
     };
   }, [data, sharedProps.callToActionUrl, sharedProps.onCallToAction]);
-  const callToActionTarget = (0, import_react50.useMemo)(() => {
+  const callToActionTarget = (0, import_react51.useMemo)(() => {
     if (sharedProps.callToActionTarget) {
       return sharedProps.callToActionTarget;
     }
@@ -19088,12 +19371,12 @@ var resolveDesignProps8 = (props) => {
     }
   };
 };
-var PricingTable = (0, import_react51.forwardRef)(
+var PricingTable = (0, import_react52.forwardRef)(
   ({ className, callToActionUrl, callToActionTarget, onCallToAction, ...rest }, ref) => {
     const props = resolveDesignProps8(rest);
     const { t: t2 } = useTranslation();
     const { data, settings, isPending, hydratePublic } = useEmbed();
-    const { currentPeriod, showPeriodToggle, isStandalone } = (0, import_react51.useMemo)(() => {
+    const { currentPeriod, showPeriodToggle, isStandalone } = (0, import_react52.useMemo)(() => {
       const showPeriodToggle2 = data?.showPeriodToggle ?? props.showPeriodToggle;
       if (isCheckoutData(data)) {
         const billingSubscription = data.company?.billingSubscription;
@@ -19119,11 +19402,11 @@ var PricingTable = (0, import_react51.forwardRef)(
         isStandalone: true
       };
     }, [props.showPeriodToggle, data]);
-    const [selectedPeriod, setSelectedPeriod] = (0, import_react51.useState)(currentPeriod);
+    const [selectedPeriod, setSelectedPeriod] = (0, import_react52.useState)(currentPeriod);
     const { plans, addOns, periods } = useAvailablePlans(selectedPeriod, {
       useSelectedPeriod: showPeriodToggle
     });
-    const [entitlementCounts, setEntitlementCounts] = (0, import_react51.useState)(
+    const [entitlementCounts, setEntitlementCounts] = (0, import_react52.useState)(
       () => plans.reduce(entitlementCountsReducer, {})
     );
     const handleToggleShowAll = (id) => {
@@ -19141,12 +19424,12 @@ var PricingTable = (0, import_react51.forwardRef)(
         return prev2;
       });
     };
-    (0, import_react51.useEffect)(() => {
+    (0, import_react52.useEffect)(() => {
       if (isStandalone) {
         hydratePublic();
       }
     }, [isStandalone, hydratePublic]);
-    (0, import_react51.useEffect)(() => {
+    (0, import_react52.useEffect)(() => {
       setEntitlementCounts(plans.reduce(entitlementCountsReducer, {}));
     }, [plans]);
     if (isPending) {
@@ -19162,7 +19445,7 @@ var PricingTable = (0, import_react51.forwardRef)(
         }
       );
     }
-    const Wrapper = isStandalone ? Container : import_react51.Fragment;
+    const Wrapper = isStandalone ? Container : import_react52.Fragment;
     return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Wrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
       FussyChild,
       {
@@ -19188,14 +19471,7 @@ var PricingTable = (0, import_react51.forwardRef)(
                   }
                 },
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-                    Text,
-                    {
-                      display: props.header.fontStyle,
-                      $color: settings.theme.card.background,
-                      children: props.header.isVisible && props.plans.isVisible && plans.length > 0 && t2("Plans")
-                    }
-                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Text, { display: props.header.fontStyle, children: props.header.isVisible && props.plans.isVisible && plans.length > 0 && t2("Plans") }),
                   showPeriodToggle && periods.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
                     PeriodToggle,
                     {
@@ -19248,14 +19524,7 @@ var PricingTable = (0, import_react51.forwardRef)(
                 $justifyContent: "space-between",
                 $alignItems: "center",
                 $marginBottom: "1rem",
-                children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-                  Text,
-                  {
-                    display: props.header.fontStyle,
-                    $color: settings.theme.card.background,
-                    children: t2("Add-ons")
-                  }
-                )
+                children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Text, { display: props.header.fontStyle, children: t2("Add-ons") })
               }
             ),
             /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
@@ -19292,7 +19561,7 @@ var PricingTable = (0, import_react51.forwardRef)(
 PricingTable.displayName = "PricingTable";
 
 // src/components/elements/text/Text.tsx
-var import_react52 = require("react");
+var import_react53 = require("react");
 var import_jsx_runtime49 = require("react/jsx-runtime");
 var resolveDesignProps9 = (props) => {
   return {
@@ -19303,7 +19572,7 @@ var resolveDesignProps9 = (props) => {
     }
   };
 };
-var TextElement = (0, import_react52.forwardRef)(({ children, className, ...rest }, ref) => {
+var TextElement = (0, import_react53.forwardRef)(({ children, className, ...rest }, ref) => {
   const props = resolveDesignProps9(rest);
   return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Element, { as: Flex, ref, className, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
     Text,
@@ -19318,7 +19587,7 @@ var TextElement = (0, import_react52.forwardRef)(({ children, className, ...rest
 TextElement.displayName = "Text";
 
 // src/components/elements/unsubscribe-button/UnsubscribeButton.tsx
-var import_react53 = require("react");
+var import_react54 = require("react");
 var import_jsx_runtime50 = require("react/jsx-runtime");
 var buttonStyles = {
   primary: {
@@ -19345,11 +19614,11 @@ var resolveDesignProps10 = (props) => {
     }
   };
 };
-var UnsubscribeButton = (0, import_react53.forwardRef)(({ children, className, ...rest }, ref) => {
+var UnsubscribeButton = (0, import_react54.forwardRef)(({ children, className, ...rest }, ref) => {
   const props = resolveDesignProps10(rest);
   const { t: t2 } = useTranslation();
   const { data, setLayout } = useEmbed();
-  const hasActiveSubscription = (0, import_react53.useMemo)(() => {
+  const hasActiveSubscription = (0, import_react54.useMemo)(() => {
     return isCheckoutData(data) && data.subscription && data.subscription.status !== "cancelled" && !data.subscription.cancelAt;
   }, [data]);
   if (!hasActiveSubscription) {
@@ -19384,7 +19653,7 @@ var UnsubscribeButton = (0, import_react53.forwardRef)(({ children, className, .
 UnsubscribeButton.displayName = "UnsubscribeButton";
 
 // src/components/elements/upcoming-bill/UpcomingBill.tsx
-var import_react54 = require("react");
+var import_react55 = require("react");
 var import_jsx_runtime51 = require("react/jsx-runtime");
 function resolveDesignProps11(props) {
   return {
@@ -19404,16 +19673,16 @@ function resolveDesignProps11(props) {
     }
   };
 }
-var UpcomingBill = (0, import_react54.forwardRef)(({ className, ...rest }, ref) => {
+var UpcomingBill = (0, import_react55.forwardRef)(({ className, ...rest }, ref) => {
   const props = resolveDesignProps11(rest);
   const { t: t2 } = useTranslation();
   const { data, settings, debug, getUpcomingInvoice, getCustomerBalance } = useEmbed();
   const isLightBackground = useIsLightBackground();
-  const [isLoading, setIsLoading] = (0, import_react54.useState)(false);
-  const [error, setError] = (0, import_react54.useState)();
-  const [upcomingInvoice, setUpcomingInvoice] = (0, import_react54.useState)();
-  const [balances, setBalances] = (0, import_react54.useState)([]);
-  const discounts = (0, import_react54.useMemo)(() => {
+  const [isLoading, setIsLoading] = (0, import_react55.useState)(false);
+  const [error, setError] = (0, import_react55.useState)();
+  const [upcomingInvoice, setUpcomingInvoice] = (0, import_react55.useState)();
+  const [balances, setBalances] = (0, import_react55.useState)([]);
+  const discounts = (0, import_react55.useMemo)(() => {
     return (isCheckoutData(data) && data.subscription?.discounts || []).map(
       (discount) => ({
         couponId: discount.couponId,
@@ -19425,7 +19694,7 @@ var UpcomingBill = (0, import_react54.forwardRef)(({ className, ...rest }, ref)
       })
     );
   }, [data]);
-  const getInvoice = (0, import_react54.useCallback)(async () => {
+  const getInvoice = (0, import_react55.useCallback)(async () => {
     if (isCheckoutData(data) && data.component?.id && data.subscription && !data.subscription.cancelAt) {
       try {
         setError(void 0);
@@ -19441,7 +19710,7 @@ var UpcomingBill = (0, import_react54.forwardRef)(({ className, ...rest }, ref)
       }
     }
   }, [data, getUpcomingInvoice]);
-  const getBalances = (0, import_react54.useCallback)(async () => {
+  const getBalances = (0, import_react55.useCallback)(async () => {
     try {
       const response = await getCustomerBalance();
       if (response) {
@@ -19451,10 +19720,10 @@ var UpcomingBill = (0, import_react54.forwardRef)(({ className, ...rest }, ref)
       debug("Failed to fetch customer balance.", err2);
     }
   }, [debug, getCustomerBalance]);
-  (0, import_react54.useEffect)(() => {
+  (0, import_react55.useEffect)(() => {
     getInvoice();
   }, [getInvoice]);
-  (0, import_react54.useEffect)(() => {
+  (0, import_react55.useEffect)(() => {
     getBalances();
   }, [getBalances]);
   if (!isCheckoutData(data) || !data.subscription || data.subscription.cancelAt) {
@@ -23766,10 +24035,10 @@ var { Inflate, inflate, inflateRaw, ungzip } = inflate_1$1;
 var inflate_1 = inflate;
 
 // src/components/embed/Embed.tsx
-var import_react56 = require("react");
+var import_react57 = require("react");
 
 // src/components/embed/renderer.ts
-var import_react55 = require("react");
+var import_react56 = require("react");
 var components = {
   Root,
   Viewport,
@@ -23833,7 +24102,7 @@ function createRenderer(options) {
     const { className, ...rest } = props;
     const resolvedProps = component === "div" ? rest : props;
     const resolvedChildren = children.map(renderNode);
-    return (0, import_react55.createElement)(
+    return (0, import_react56.createElement)(
       component,
       {
         key: index,
@@ -23881,8 +24150,8 @@ var Error2 = ({ message }) => {
   );
 };
 var SchematicEmbed = ({ id, accessToken }) => {
-  const [children, setChildren] = (0, import_react56.useState)(/* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Loading, {}));
-  const theme = (0, import_react56.useContext)(et);
+  const [children, setChildren] = (0, import_react57.useState)(/* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Loading, {}));
+  const theme = (0, import_react57.useContext)(et);
   const {
     data,
     error,
@@ -23893,17 +24162,17 @@ var SchematicEmbed = ({ id, accessToken }) => {
     setAccessToken,
     updateSettings
   } = useEmbed();
-  (0, import_react56.useEffect)(() => {
+  (0, import_react57.useEffect)(() => {
     if (accessToken) {
       setAccessToken(accessToken);
     }
   }, [accessToken, setAccessToken]);
-  (0, import_react56.useEffect)(() => {
+  (0, import_react57.useEffect)(() => {
     if (id && stale) {
       hydrateComponent(id);
     }
   }, [id, hydrateComponent, stale]);
-  (0, import_react56.useEffect)(() => {
+  (0, import_react57.useEffect)(() => {
     const renderer = createRenderer();
     try {
       if (isCheckoutData(data) && data.component?.ast) {