@schematichq/schematic-components 2.2.0 → 2.2.1

package/README.md

@@ -14,8 +14,60 @@ pnpm add @schematichq/schematic-components
 
 ## Usage
 
+Import components and functions and compose them into your project.
+
+```js
+import { EmbedProvider, SchematicEmbed, useEmbed } from '@schematichq/schematic-components';
+```
+
 See the [Schematic documentation](https://docs.schematichq.com/components/set-up) for a full guide on how to set up and use Schematic components.
 
+## Advanced Checkout Usage
+
+We provide a function `initializeWithPlan` as an alternate entrypoint into a
+checkout flow. It's suitable for click handlers, and must be extracted from
+the library's embedded context.
+
+```ts
+const { initializeWithPlan } = useEmbed();
+```
+
+This function allows developers to create their own button that
+
+* Pre-selects a Plan
+* Pre-selects Add-ons (if available)
+* Skips and hides plan selection stages
+
+The `initializeWithPlan` function can be called with a Schematic plan ID, or
+with a more powerful `BypassConfig` object.
+
+Providing a plan ID as a string will preselect that plan and skip the plan
+selection stage.
+
+```ts
+initializeWithPlan('plan_VBXv4bHjSf3');
+```
+
+Passing a config object allows pre-selecting Add-ons as well as hiding
+specific stages.
+
+```ts
+const config = {
+  planId: 'plan_VBXv4bHjSf3',      // pre-select a Plan
+  addOnIds: ['plan_AWv7bPjSx2'],   // pre-select 1 or more Add-ons
+  skipped: {
+    planStage: true,               // if true, skip Plan selection
+    addOnStage: true               // if true, skip Add-on selection
+  }
+  hideSkipped:  true               // if true, hide skipped stages from breadcrumb navigation
+};
+
+initializeWithPlan(config);
+```
+
+The Plans and Add-ons available to the checkout flows must be live in your
+Schematic account [Catalog configuration](https://docs.schematichq.com/catalog/overview).
+
 ## License
 
 MIT

package/dist/schematic-components.cjs.js

@@ -8315,12 +8315,29 @@ var reducer = (state, action) => {
       };
     }
     case "SET_PLANID_BYPASS": {
+      const isStringFormat = typeof action.config === "string";
+      const config = isStringFormat ? { planId: action.config, hideSkipped: false } : action.config;
+      let bypassPlanSelection;
+      let bypassAddOnSelection;
+      if (config.skipped !== void 0) {
+        bypassPlanSelection = config.skipped.planStage ?? false;
+        bypassAddOnSelection = config.skipped.addOnStage ?? false;
+      } else if (isStringFormat) {
+        bypassPlanSelection = true;
+        bypassAddOnSelection = false;
+      } else {
+        bypassPlanSelection = false;
+        bypassAddOnSelection = false;
+      }
       return {
         ...state,
         layout: "checkout",
         checkoutState: {
-          planId: action.planId,
-          bypassPlanSelection: true
+          ...config.planId && { planId: config.planId },
+          bypassPlanSelection,
+          bypassAddOnSelection,
+          ...config.addOnIds && { addOnIds: config.addOnIds },
+          hideSkippedStages: config.hideSkipped ?? false
         }
       };
     }
@@ -8330,7 +8347,7 @@ var reducer = (state, action) => {
 // src/context/EmbedProvider.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var getCustomHeaders = (sessionId) => ({
-  "X-Schematic-Components-Version": "2.2.0",
+  "X-Schematic-Components-Version": "2.2.1",
   "X-Schematic-Session-ID": sessionId
 });
 var EmbedProvider = ({
@@ -8622,8 +8639,8 @@ var EmbedProvider = ({
   const setCheckoutState = (0, import_react4.useCallback)((state2) => {
     dispatch({ type: "SET_CHECKOUT_STATE", state: state2 });
   }, []);
-  const initializeWithPlan = (0, import_react4.useCallback)((planId) => {
-    dispatch({ type: "SET_PLANID_BYPASS", planId });
+  const initializeWithPlan = (0, import_react4.useCallback)((config) => {
+    dispatch({ type: "SET_PLANID_BYPASS", config });
   }, []);
   (0, import_react4.useEffect)(() => {
     const element = document.getElementById(
@@ -11843,7 +11860,7 @@ var Checkout = ({
   if (!isPaymentMethodRequired) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Flex, { $position: "relative", $flexDirection: "column", $gap: "1.5rem", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Flex, { $flexDirection: "column", $gap: "1.5rem", children: [
     /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       PaymentMethodDetails,
       {
@@ -12818,20 +12835,13 @@ var CheckoutDialog = ({ top = 0 }) => {
   );
   const [isLoading, setIsLoading] = (0, import_react23.useState)(false);
   const [error, setError] = (0, import_react23.useState)();
-  const {
-    currentPlanId,
-    currentEntitlements,
-    showPeriodToggle,
-    trialPaymentMethodRequired
-  } = (0, import_react23.useMemo)(() => {
+  const { currentEntitlements, showPeriodToggle, trialPaymentMethodRequired } = (0, import_react23.useMemo)(() => {
     return {
-      currentPlanId: data?.company?.plan?.id,
       currentEntitlements: data?.featureUsage ? data.featureUsage.features : [],
       showPeriodToggle: data?.showPeriodToggle ?? true,
       trialPaymentMethodRequired: data?.trialPaymentMethodRequired === true
     };
   }, [
-    data?.company?.plan?.id,
     data?.featureUsage,
     data?.showPeriodToggle,
     data?.trialPaymentMethodRequired
@@ -12859,8 +12869,12 @@ var CheckoutDialog = ({ top = 0 }) => {
   const [addOns, setAddOns] = (0, import_react23.useState)(() => {
     return availableAddOns.map((addOn) => ({
       ...addOn,
-      isSelected: typeof checkoutState?.addOnId !== "undefined" ? addOn.id === checkoutState.addOnId : (data?.company?.addOns || []).some(
-        (currentAddOn) => addOn.id === currentAddOn.id
+      isSelected: (
+        // Check if bypassed with specific add-on IDs
+        checkoutState?.addOnIds?.includes(addOn.id) || // Check if single add-on ID provided
+        (typeof checkoutState?.addOnId !== "undefined" ? addOn.id === checkoutState.addOnId : (data?.company?.addOns || []).some(
+          (currentAddOn) => addOn.id === currentAddOn.id
+        ))
       )
     }));
   });
@@ -12880,19 +12894,47 @@ var CheckoutDialog = ({ top = 0 }) => {
     )
   );
   const [addOnUsageBasedEntitlements, setAddOnUsageBasedEntitlements] = (0, import_react23.useState)(() => {
-    return (data?.company?.addOns || []).flatMap((currentAddOn) => {
-      const availableAddOn = availableAddOns.find(
-        (available) => available.id === currentAddOn.id
-      );
-      if (!availableAddOn) return [];
-      return availableAddOn.entitlements.reduce(
-        createActiveUsageBasedEntitlementsReducer(
-          currentEntitlements,
-          planPeriod
-        ),
-        []
+    const currentAddOnEntitlements = (data?.company?.addOns || []).flatMap(
+      (currentAddOn) => {
+        const availableAddOn = availableAddOns.find(
+          (available) => available.id === currentAddOn.id
+        );
+        if (!availableAddOn) return [];
+        return availableAddOn.entitlements.reduce(
+          createActiveUsageBasedEntitlementsReducer(
+            currentEntitlements,
+            planPeriod
+          ),
+          []
+        );
+      }
+    );
+    const bypassAddOnEntitlements = (checkoutState?.addOnIds || []).flatMap(
+      (addOnId) => {
+        const availableAddOn = availableAddOns.find(
+          (available) => available.id === addOnId
+        );
+        if (!availableAddOn) return [];
+        return availableAddOn.entitlements.filter(
+          (entitlement) => entitlement.priceBehavior === "pay_in_advance" /* PayInAdvance */
+        ).map((entitlement) => ({
+          ...entitlement,
+          allocation: entitlement.valueNumeric || 0,
+          usage: 0,
+          quantity: 1
+        }));
+      }
+    );
+    const allEntitlements = [...currentAddOnEntitlements];
+    for (const bypassEnt of bypassAddOnEntitlements) {
+      const exists = currentAddOnEntitlements.some(
+        (current) => current.featureId === bypassEnt.featureId
       );
-    });
+      if (!exists) {
+        allEntitlements.push(bypassEnt);
+      }
+    }
+    return allEntitlements;
   });
   const payInAdvanceEntitlements = (0, import_react23.useMemo)(
     () => usageBasedEntitlements.filter(
@@ -12981,6 +13023,10 @@ var CheckoutDialog = ({ top = 0 }) => {
     isPaymentMethodRequired
   ]);
   const [hasSkippedInitialPlan, setHasSkippedInitialPlan] = (0, import_react23.useState)(false);
+  const [hasSkippedInitialAddOns, setHasSkippedInitialAddOns] = (0, import_react23.useState)(false);
+  const [isBypassLoading, setIsBypassLoading] = (0, import_react23.useState)(
+    () => checkoutState?.bypassPlanSelection || checkoutState?.bypassAddOnSelection
+  );
   const [checkoutStage, setCheckoutStage] = (0, import_react23.useState)(() => {
     if (checkoutState?.addOnId) {
       return "addons";
@@ -12994,24 +13040,35 @@ var CheckoutDialog = ({ top = 0 }) => {
     if (checkoutState?.credits) {
       return "credits";
     }
-    if (typeof checkoutState?.planId !== "undefined" && checkoutState.planId !== currentPlanId || checkoutState?.bypassPlanSelection) {
+    if (checkoutState?.bypassPlanSelection) {
       return checkoutStages.some((stage) => stage.id === "usage") ? "usage" : checkoutStages.some((stage) => stage.id === "addons") ? "addons" : checkoutStages.some((stage) => stage.id === "addonsUsage") ? "addonsUsage" : checkoutStages.some((stage) => stage.id === "credits") ? "credits" : checkoutStages.some((stage) => stage.id === "checkout") ? "checkout" : checkoutStages[0]?.id || "plan";
     }
     return "plan";
   });
   (0, import_react23.useEffect)(() => {
     if (checkoutState?.bypassPlanSelection && checkoutStage === "plan" && !hasSkippedInitialPlan) {
-      const nextStage = checkoutStages.find((stage) => stage.id !== "plan");
+      const currentIndex = checkoutStages.findIndex((s2) => s2.id === "plan");
+      const nextStage = checkoutStages[currentIndex + 1];
       if (nextStage) {
         setHasSkippedInitialPlan(true);
         setCheckoutStage(nextStage.id);
       }
     }
+    if (checkoutState?.bypassAddOnSelection && checkoutStage === "addons" && !hasSkippedInitialAddOns) {
+      const currentIndex = checkoutStages.findIndex((s2) => s2.id === "addons");
+      const nextStage = checkoutStages[currentIndex + 1];
+      if (nextStage) {
+        setHasSkippedInitialAddOns(true);
+        setCheckoutStage(nextStage.id);
+      }
+    }
   }, [
     checkoutStages,
     checkoutState?.bypassPlanSelection,
+    checkoutState?.bypassAddOnSelection,
     checkoutStage,
-    hasSkippedInitialPlan
+    hasSkippedInitialPlan,
+    hasSkippedInitialAddOns
   ]);
   const handlePreviewCheckout = (0, import_react23.useCallback)(
     async (updates) => {
@@ -13122,6 +13179,9 @@ var CheckoutDialog = ({ top = 0 }) => {
         setError(msg);
       } finally {
         setIsLoading(false);
+        if (isBypassLoading) {
+          setIsBypassLoading(false);
+        }
       }
     },
     [
@@ -13134,7 +13194,8 @@ var CheckoutDialog = ({ top = 0 }) => {
       addOns,
       creditBundles,
       shouldTrial,
-      promoCode
+      promoCode,
+      isBypassLoading
     ]
   );
   const selectPlan = (0, import_react23.useCallback)(
@@ -13281,34 +13342,29 @@ var CheckoutDialog = ({ top = 0 }) => {
     },
     [handlePreviewCheckout]
   );
+  const hasInitializedPlan = (0, import_react23.useRef)(false);
   (0, import_react23.useEffect)(() => {
-    if (selectedPlan) {
+    if (!hasInitializedPlan.current && selectedPlan) {
+      hasInitializedPlan.current = true;
       selectPlan({ plan: selectedPlan, period: currentPeriod });
     }
-  }, []);
+  }, [selectedPlan, currentPeriod, selectPlan]);
   (0, import_react23.useEffect)(() => {
     if (checkoutState?.planId) {
       const plan = availablePlans.find(
         (plan2) => plan2.id === checkoutState.planId
       );
-      setSelectedPlan(plan);
-    }
-  }, [availablePlans, checkoutState?.planId]);
-  (0, import_react23.useEffect)(() => {
-    if (checkoutState?.addOnId) {
-      const checkoutStateAddOn = availableAddOns.find(
-        (addOn) => addOn.id === checkoutState.addOnId
-      );
-      setAddOns(
-        (prev2) => prev2.map((addOn) => ({
-          ...addOn,
-          ...addOn.id === checkoutStateAddOn?.id && {
-            isSelected: true
-          }
-        }))
-      );
+      if (plan && plan.id !== selectedPlan?.id) {
+        selectPlan({ plan, period: currentPeriod });
+      }
     }
-  }, [availableAddOns, checkoutState?.addOnId]);
+  }, [
+    availablePlans,
+    checkoutState?.planId,
+    currentPeriod,
+    selectPlan,
+    selectedPlan?.id
+  ]);
   (0, import_react23.useEffect)(() => {
     setAddOns((prevAddOns) => {
       return availableAddOns.filter((availAddOn) => {
@@ -13350,7 +13406,21 @@ var CheckoutDialog = ({ top = 0 }) => {
   const activeCheckoutStage = checkoutStages.find(
     (stage) => stage.id === checkoutStage
   );
-  const shouldShowBypassOverlay = checkoutState?.bypassPlanSelection && checkoutStage === "plan" && !hasSkippedInitialPlan;
+  const visibleStages = (0, import_react23.useMemo)(() => {
+    if (!checkoutState?.hideSkippedStages) {
+      return checkoutStages;
+    }
+    return checkoutStages.filter((stage) => {
+      if (stage.id === "plan" && checkoutState.bypassPlanSelection) {
+        return false;
+      }
+      if (stage.id === "addons" && checkoutState.bypassAddOnSelection) {
+        return false;
+      }
+      return true;
+    });
+  }, [checkoutStages, checkoutState]);
+  const shouldShowBypassOverlay = isBypassLoading || checkoutState?.bypassPlanSelection && checkoutStage === "plan" && !hasSkippedInitialPlan || checkoutState?.bypassAddOnSelection && checkoutStage === "addons" && !hasSkippedInitialAddOns;
   return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(Modal2, { ref: modalRef, size: "lg", top, children: [
     shouldShowBypassOverlay && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       Flex,
@@ -13384,12 +13454,12 @@ var CheckoutDialog = ({ top = 0 }) => {
             $gap: "1rem"
           }
         },
-        children: checkoutStages.map((stage, index, stages) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        children: visibleStages.map((stage, index, stages) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
           Navigation,
           {
             name: stage.name,
             index,
-            activeIndex: checkoutStages.findIndex(
+            activeIndex: visibleStages.findIndex(
               (s2) => s2.id === checkoutStage
             ),
             isLast: index === stages.length - 1,
@@ -15792,7 +15862,7 @@ var registerWrapper = function registerWrapper2(stripe, startTime) {
   }
   stripe._registerWrapper({
     name: "stripe-js",
-    version: "8.3.0",
+    version: "8.4.0",
     startTime
   });
 };
@@ -15867,7 +15937,7 @@ var initStripe = function initStripe2(maybeStripe, args, startTime) {
   var version = runtimeVersionToUrlVersion(maybeStripe.version);
   var expectedVersion = RELEASE_TRAIN;
   if (isTestKey && version !== expectedVersion) {
-    console.warn("Stripe.js@".concat(version, " was loaded on the page, but @stripe/stripe-js@").concat("8.3.0", " expected Stripe.js@").concat(expectedVersion, ". This may result in unexpected behavior. For more information, see https://docs.stripe.com/sdks/stripejs-versioning"));
+    console.warn("Stripe.js@".concat(version, " was loaded on the page, but @stripe/stripe-js@").concat("8.4.0", " expected Stripe.js@").concat(expectedVersion, ". This may result in unexpected behavior. For more information, see https://docs.stripe.com/sdks/stripejs-versioning"));
   }
   var stripe = maybeStripe.apply(void 0, args);
   registerWrapper(stripe, startTime);
@@ -16061,7 +16131,7 @@ var PaymentMethodDetails = ({
     showPaymentForm,
     initializePaymentMethod
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_jsx_runtime43.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(Flex, { $position: "relative", $flexDirection: "column", $gap: "1.5rem", children: [
     /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
       Flex,
       {

package/dist/schematic-components.d.ts

@@ -1869,6 +1869,89 @@ export declare type ButtonSize = "sm" | "md" | "lg";
 
 export declare type ButtonVariant = "filled" | "outline" | "ghost" | "text";
 
+/**
+ * Configuration for controlling checkout stage flow and pre-selection.
+ *
+ * ## Three Behavior Modes
+ *
+ * ### 1. Pre-Selection Mode (object without `skipped`)
+ * When you provide planId/addOnIds without explicit skip config, stages are
+ * shown with values pre-selected for user review.
+ *
+ * @example
+ * // Pre-select plan, show plan stage for review
+ * initializeWithPlan({ planId: 'plan_xyz' })
+ *
+ * @example
+ * // Pre-select plan and add-ons, show both stages for review
+ * initializeWithPlan({
+ *   planId: 'plan_xyz',
+ *   addOnIds: ['addon_1', 'addon_2']
+ * })
+ *
+ * ### 2. Explicit Skip Mode (object with `skipped`)
+ * With explicit skip configuration, you control exactly which stages to skip.
+ * You can skip stages without pre-selecting, or pre-select and skip together.
+ *
+ * @example
+ * // Skip plan stage without pre-selecting (user chooses plan)
+ * initializeWithPlan({
+ *   skipped: { planStage: true }
+ * })
+ *
+ * @example
+ * // Pre-select plan AND skip plan stage (go directly to add-ons)
+ * initializeWithPlan({
+ *   planId: 'plan_xyz',
+ *   skipped: { planStage: true }
+ * })
+ *
+ * @example
+ * // Pre-select plan but show it, skip add-ons stage
+ * initializeWithPlan({
+ *   planId: 'plan_xyz',
+ *   skipped: { planStage: false, addOnStage: true }
+ * })
+ *
+ * @example
+ * // Skip both stages, go straight to checkout
+ * initializeWithPlan({
+ *   planId: 'plan_xyz',
+ *   addOnIds: ['addon_1'],
+ *   skipped: { planStage: true, addOnStage: true }
+ * })
+ *
+ * ### 3. Legacy String Format
+ * Backwards compatible mode: pre-selects plan and skips plan stage.
+ *
+ * @example
+ * initializeWithPlan('plan_xyz')
+ * // Equivalent to: { planId: 'plan_xyz', skipped: { planStage: true } }
+ */
+export declare interface BypassConfig {
+    /**
+     * Plan ID to pre-select.
+     * Optional - you can skip stages without pre-selecting a plan.
+     */
+    planId?: string;
+    /**
+     * Add-on IDs to pre-select.
+     * Optional - you can skip stages without pre-selecting add-ons.
+     */
+    addOnIds?: string[];
+    /**
+     * Explicit skip configuration for stages.
+     * - If not provided: stages are shown with pre-selected values (review mode)
+     * - If provided: you control exactly which stages to skip
+     */
+    skipped?: CheckoutStageSkipConfig;
+    /**
+     * Hide skipped stages from breadcrumb navigation.
+     * Default: false (skipped stages still appear in breadcrumbs)
+     */
+    hideSkipped?: boolean;
+}
+
 export declare const Card: ForwardRefExoticComponent<CardProps & RefAttributes<HTMLDivElement | null>>;
 
 export declare const cardBoxShadow = "0px 1px 20px 0px #1018280F, 0px 1px 3px 0px #1018281A";
@@ -2118,6 +2201,49 @@ export declare interface CheckoutStage {
     description?: string;
 }
 
+/**
+ * Explicit configuration for skipping checkout stages.
+ *
+ * This configuration is independent of pre-selection (planId/addOnIds).
+ * You have full control to:
+ * - Skip stages without pre-selecting values
+ * - Pre-select values without skipping stages
+ * - Pre-select AND skip stages
+ * - Any combination that suits your checkout flow
+ *
+ * @example
+ * // Skip both stages (go directly to checkout/payment)
+ * { planStage: true, addOnStage: true }
+ *
+ * @example
+ * // Skip only plan stage (show add-ons)
+ * { planStage: true, addOnStage: false }
+ *
+ * @example
+ * // Show plan stage, skip add-ons stage
+ * { planStage: false, addOnStage: true }
+ *
+ * @example
+ * // Show both stages (same as not providing skipped config)
+ * { planStage: false, addOnStage: false }
+ */
+export declare interface CheckoutStageSkipConfig {
+    /**
+     * Skip the plan selection stage.
+     * - true: Skip directly to next stage
+     * - false: Show plan stage (user can review/change selection)
+     * - undefined: Defaults to false (show stage)
+     */
+    planStage?: boolean;
+    /**
+     * Skip the add-on selection stage.
+     * - true: Skip directly to next stage
+     * - false: Show add-on stage (user can review/change selection)
+     * - undefined: Defaults to false (show stage)
+     */
+    addOnStage?: boolean;
+}
+
 export declare type CheckoutState = {
     period?: string;
     planId?: string | null;
@@ -2126,6 +2252,9 @@ export declare type CheckoutState = {
     addOnUsage?: boolean;
     credits?: boolean;
     bypassPlanSelection?: boolean;
+    bypassAddOnSelection?: boolean;
+    addOnIds?: string[];
+    hideSkippedStages?: boolean;
 };
 
 /**
@@ -4100,7 +4229,7 @@ export declare interface EmbedContextProps extends EmbedState {
     setError: (error: Error) => void;
     setLayout: (layout: EmbedLayout) => void;
     setCheckoutState: (state: CheckoutState) => void;
-    initializeWithPlan: (planId: string) => void;
+    initializeWithPlan: (config: string | BypassConfig) => void;
     setData: (data: HydrateDataWithCompanyContext) => void;
     updateSettings: (settings: DeepPartial<EmbedSettings>, options?: {
         update?: boolean;

package/dist/schematic-components.esm.js

@@ -8255,12 +8255,29 @@ var reducer = (state, action) => {
       };
     }
     case "SET_PLANID_BYPASS": {
+      const isStringFormat = typeof action.config === "string";
+      const config = isStringFormat ? { planId: action.config, hideSkipped: false } : action.config;
+      let bypassPlanSelection;
+      let bypassAddOnSelection;
+      if (config.skipped !== void 0) {
+        bypassPlanSelection = config.skipped.planStage ?? false;
+        bypassAddOnSelection = config.skipped.addOnStage ?? false;
+      } else if (isStringFormat) {
+        bypassPlanSelection = true;
+        bypassAddOnSelection = false;
+      } else {
+        bypassPlanSelection = false;
+        bypassAddOnSelection = false;
+      }
       return {
         ...state,
         layout: "checkout",
         checkoutState: {
-          planId: action.planId,
-          bypassPlanSelection: true
+          ...config.planId && { planId: config.planId },
+          bypassPlanSelection,
+          bypassAddOnSelection,
+          ...config.addOnIds && { addOnIds: config.addOnIds },
+          hideSkippedStages: config.hideSkipped ?? false
         }
       };
     }
@@ -8270,7 +8287,7 @@ var reducer = (state, action) => {
 // src/context/EmbedProvider.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 var getCustomHeaders = (sessionId) => ({
-  "X-Schematic-Components-Version": "2.2.0",
+  "X-Schematic-Components-Version": "2.2.1",
   "X-Schematic-Session-ID": sessionId
 });
 var EmbedProvider = ({
@@ -8562,8 +8579,8 @@ var EmbedProvider = ({
   const setCheckoutState = useCallback2((state2) => {
     dispatch({ type: "SET_CHECKOUT_STATE", state: state2 });
   }, []);
-  const initializeWithPlan = useCallback2((planId) => {
-    dispatch({ type: "SET_PLANID_BYPASS", planId });
+  const initializeWithPlan = useCallback2((config) => {
+    dispatch({ type: "SET_PLANID_BYPASS", config });
   }, []);
   useEffect(() => {
     const element = document.getElementById(
@@ -11803,7 +11820,7 @@ var Checkout = ({
   if (!isPaymentMethodRequired) {
     return null;
   }
-  return /* @__PURE__ */ jsxs11(Flex, { $position: "relative", $flexDirection: "column", $gap: "1.5rem", children: [
+  return /* @__PURE__ */ jsxs11(Flex, { $flexDirection: "column", $gap: "1.5rem", children: [
     /* @__PURE__ */ jsx17(
       PaymentMethodDetails,
       {
@@ -12778,20 +12795,13 @@ var CheckoutDialog = ({ top = 0 }) => {
   );
   const [isLoading, setIsLoading] = useState10(false);
   const [error, setError] = useState10();
-  const {
-    currentPlanId,
-    currentEntitlements,
-    showPeriodToggle,
-    trialPaymentMethodRequired
-  } = useMemo8(() => {
+  const { currentEntitlements, showPeriodToggle, trialPaymentMethodRequired } = useMemo8(() => {
     return {
-      currentPlanId: data?.company?.plan?.id,
       currentEntitlements: data?.featureUsage ? data.featureUsage.features : [],
       showPeriodToggle: data?.showPeriodToggle ?? true,
       trialPaymentMethodRequired: data?.trialPaymentMethodRequired === true
     };
   }, [
-    data?.company?.plan?.id,
     data?.featureUsage,
     data?.showPeriodToggle,
     data?.trialPaymentMethodRequired
@@ -12819,8 +12829,12 @@ var CheckoutDialog = ({ top = 0 }) => {
   const [addOns, setAddOns] = useState10(() => {
     return availableAddOns.map((addOn) => ({
       ...addOn,
-      isSelected: typeof checkoutState?.addOnId !== "undefined" ? addOn.id === checkoutState.addOnId : (data?.company?.addOns || []).some(
-        (currentAddOn) => addOn.id === currentAddOn.id
+      isSelected: (
+        // Check if bypassed with specific add-on IDs
+        checkoutState?.addOnIds?.includes(addOn.id) || // Check if single add-on ID provided
+        (typeof checkoutState?.addOnId !== "undefined" ? addOn.id === checkoutState.addOnId : (data?.company?.addOns || []).some(
+          (currentAddOn) => addOn.id === currentAddOn.id
+        ))
       )
     }));
   });
@@ -12840,19 +12854,47 @@ var CheckoutDialog = ({ top = 0 }) => {
     )
   );
   const [addOnUsageBasedEntitlements, setAddOnUsageBasedEntitlements] = useState10(() => {
-    return (data?.company?.addOns || []).flatMap((currentAddOn) => {
-      const availableAddOn = availableAddOns.find(
-        (available) => available.id === currentAddOn.id
-      );
-      if (!availableAddOn) return [];
-      return availableAddOn.entitlements.reduce(
-        createActiveUsageBasedEntitlementsReducer(
-          currentEntitlements,
-          planPeriod
-        ),
-        []
+    const currentAddOnEntitlements = (data?.company?.addOns || []).flatMap(
+      (currentAddOn) => {
+        const availableAddOn = availableAddOns.find(
+          (available) => available.id === currentAddOn.id
+        );
+        if (!availableAddOn) return [];
+        return availableAddOn.entitlements.reduce(
+          createActiveUsageBasedEntitlementsReducer(
+            currentEntitlements,
+            planPeriod
+          ),
+          []
+        );
+      }
+    );
+    const bypassAddOnEntitlements = (checkoutState?.addOnIds || []).flatMap(
+      (addOnId) => {
+        const availableAddOn = availableAddOns.find(
+          (available) => available.id === addOnId
+        );
+        if (!availableAddOn) return [];
+        return availableAddOn.entitlements.filter(
+          (entitlement) => entitlement.priceBehavior === "pay_in_advance" /* PayInAdvance */
+        ).map((entitlement) => ({
+          ...entitlement,
+          allocation: entitlement.valueNumeric || 0,
+          usage: 0,
+          quantity: 1
+        }));
+      }
+    );
+    const allEntitlements = [...currentAddOnEntitlements];
+    for (const bypassEnt of bypassAddOnEntitlements) {
+      const exists = currentAddOnEntitlements.some(
+        (current) => current.featureId === bypassEnt.featureId
       );
-    });
+      if (!exists) {
+        allEntitlements.push(bypassEnt);
+      }
+    }
+    return allEntitlements;
   });
   const payInAdvanceEntitlements = useMemo8(
     () => usageBasedEntitlements.filter(
@@ -12941,6 +12983,10 @@ var CheckoutDialog = ({ top = 0 }) => {
     isPaymentMethodRequired
   ]);
   const [hasSkippedInitialPlan, setHasSkippedInitialPlan] = useState10(false);
+  const [hasSkippedInitialAddOns, setHasSkippedInitialAddOns] = useState10(false);
+  const [isBypassLoading, setIsBypassLoading] = useState10(
+    () => checkoutState?.bypassPlanSelection || checkoutState?.bypassAddOnSelection
+  );
   const [checkoutStage, setCheckoutStage] = useState10(() => {
     if (checkoutState?.addOnId) {
       return "addons";
@@ -12954,24 +13000,35 @@ var CheckoutDialog = ({ top = 0 }) => {
     if (checkoutState?.credits) {
       return "credits";
     }
-    if (typeof checkoutState?.planId !== "undefined" && checkoutState.planId !== currentPlanId || checkoutState?.bypassPlanSelection) {
+    if (checkoutState?.bypassPlanSelection) {
       return checkoutStages.some((stage) => stage.id === "usage") ? "usage" : checkoutStages.some((stage) => stage.id === "addons") ? "addons" : checkoutStages.some((stage) => stage.id === "addonsUsage") ? "addonsUsage" : checkoutStages.some((stage) => stage.id === "credits") ? "credits" : checkoutStages.some((stage) => stage.id === "checkout") ? "checkout" : checkoutStages[0]?.id || "plan";
     }
     return "plan";
   });
   useEffect5(() => {
     if (checkoutState?.bypassPlanSelection && checkoutStage === "plan" && !hasSkippedInitialPlan) {
-      const nextStage = checkoutStages.find((stage) => stage.id !== "plan");
+      const currentIndex = checkoutStages.findIndex((s2) => s2.id === "plan");
+      const nextStage = checkoutStages[currentIndex + 1];
       if (nextStage) {
         setHasSkippedInitialPlan(true);
         setCheckoutStage(nextStage.id);
       }
     }
+    if (checkoutState?.bypassAddOnSelection && checkoutStage === "addons" && !hasSkippedInitialAddOns) {
+      const currentIndex = checkoutStages.findIndex((s2) => s2.id === "addons");
+      const nextStage = checkoutStages[currentIndex + 1];
+      if (nextStage) {
+        setHasSkippedInitialAddOns(true);
+        setCheckoutStage(nextStage.id);
+      }
+    }
   }, [
     checkoutStages,
     checkoutState?.bypassPlanSelection,
+    checkoutState?.bypassAddOnSelection,
     checkoutStage,
-    hasSkippedInitialPlan
+    hasSkippedInitialPlan,
+    hasSkippedInitialAddOns
   ]);
   const handlePreviewCheckout = useCallback9(
     async (updates) => {
@@ -13082,6 +13139,9 @@ var CheckoutDialog = ({ top = 0 }) => {
         setError(msg);
       } finally {
         setIsLoading(false);
+        if (isBypassLoading) {
+          setIsBypassLoading(false);
+        }
       }
     },
     [
@@ -13094,7 +13154,8 @@ var CheckoutDialog = ({ top = 0 }) => {
       addOns,
       creditBundles,
       shouldTrial,
-      promoCode
+      promoCode,
+      isBypassLoading
     ]
   );
   const selectPlan = useCallback9(
@@ -13241,34 +13302,29 @@ var CheckoutDialog = ({ top = 0 }) => {
     },
     [handlePreviewCheckout]
   );
+  const hasInitializedPlan = useRef6(false);
   useEffect5(() => {
-    if (selectedPlan) {
+    if (!hasInitializedPlan.current && selectedPlan) {
+      hasInitializedPlan.current = true;
       selectPlan({ plan: selectedPlan, period: currentPeriod });
     }
-  }, []);
+  }, [selectedPlan, currentPeriod, selectPlan]);
   useEffect5(() => {
     if (checkoutState?.planId) {
       const plan = availablePlans.find(
         (plan2) => plan2.id === checkoutState.planId
       );
-      setSelectedPlan(plan);
-    }
-  }, [availablePlans, checkoutState?.planId]);
-  useEffect5(() => {
-    if (checkoutState?.addOnId) {
-      const checkoutStateAddOn = availableAddOns.find(
-        (addOn) => addOn.id === checkoutState.addOnId
-      );
-      setAddOns(
-        (prev2) => prev2.map((addOn) => ({
-          ...addOn,
-          ...addOn.id === checkoutStateAddOn?.id && {
-            isSelected: true
-          }
-        }))
-      );
+      if (plan && plan.id !== selectedPlan?.id) {
+        selectPlan({ plan, period: currentPeriod });
+      }
     }
-  }, [availableAddOns, checkoutState?.addOnId]);
+  }, [
+    availablePlans,
+    checkoutState?.planId,
+    currentPeriod,
+    selectPlan,
+    selectedPlan?.id
+  ]);
   useEffect5(() => {
     setAddOns((prevAddOns) => {
       return availableAddOns.filter((availAddOn) => {
@@ -13310,7 +13366,21 @@ var CheckoutDialog = ({ top = 0 }) => {
   const activeCheckoutStage = checkoutStages.find(
     (stage) => stage.id === checkoutStage
   );
-  const shouldShowBypassOverlay = checkoutState?.bypassPlanSelection && checkoutStage === "plan" && !hasSkippedInitialPlan;
+  const visibleStages = useMemo8(() => {
+    if (!checkoutState?.hideSkippedStages) {
+      return checkoutStages;
+    }
+    return checkoutStages.filter((stage) => {
+      if (stage.id === "plan" && checkoutState.bypassPlanSelection) {
+        return false;
+      }
+      if (stage.id === "addons" && checkoutState.bypassAddOnSelection) {
+        return false;
+      }
+      return true;
+    });
+  }, [checkoutStages, checkoutState]);
+  const shouldShowBypassOverlay = isBypassLoading || checkoutState?.bypassPlanSelection && checkoutStage === "plan" && !hasSkippedInitialPlan || checkoutState?.bypassAddOnSelection && checkoutStage === "addons" && !hasSkippedInitialAddOns;
   return /* @__PURE__ */ jsxs16(Modal2, { ref: modalRef, size: "lg", top, children: [
     shouldShowBypassOverlay && /* @__PURE__ */ jsx22(
       Flex,
@@ -13344,12 +13414,12 @@ var CheckoutDialog = ({ top = 0 }) => {
             $gap: "1rem"
           }
         },
-        children: checkoutStages.map((stage, index, stages) => /* @__PURE__ */ jsx22(
+        children: visibleStages.map((stage, index, stages) => /* @__PURE__ */ jsx22(
           Navigation,
           {
             name: stage.name,
             index,
-            activeIndex: checkoutStages.findIndex(
+            activeIndex: visibleStages.findIndex(
               (s2) => s2.id === checkoutStage
             ),
             isLast: index === stages.length - 1,
@@ -15757,7 +15827,7 @@ var registerWrapper = function registerWrapper2(stripe, startTime) {
   }
   stripe._registerWrapper({
     name: "stripe-js",
-    version: "8.3.0",
+    version: "8.4.0",
     startTime
   });
 };
@@ -15832,7 +15902,7 @@ var initStripe = function initStripe2(maybeStripe, args, startTime) {
   var version = runtimeVersionToUrlVersion(maybeStripe.version);
   var expectedVersion = RELEASE_TRAIN;
   if (isTestKey && version !== expectedVersion) {
-    console.warn("Stripe.js@".concat(version, " was loaded on the page, but @stripe/stripe-js@").concat("8.3.0", " expected Stripe.js@").concat(expectedVersion, ". This may result in unexpected behavior. For more information, see https://docs.stripe.com/sdks/stripejs-versioning"));
+    console.warn("Stripe.js@".concat(version, " was loaded on the page, but @stripe/stripe-js@").concat("8.4.0", " expected Stripe.js@").concat(expectedVersion, ". This may result in unexpected behavior. For more information, see https://docs.stripe.com/sdks/stripejs-versioning"));
   }
   var stripe = maybeStripe.apply(void 0, args);
   registerWrapper(stripe, startTime);
@@ -15871,7 +15941,7 @@ var loadStripe = function loadStripe2() {
 // src/components/elements/payment-method/PaymentMethodDetails.tsx
 import { useCallback as useCallback12, useEffect as useEffect7, useMemo as useMemo20, useState as useState17 } from "react";
 import { useTranslation as useTranslation26 } from "react-i18next";
-import { Fragment as Fragment17, jsx as jsx42, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx42, jsxs as jsxs31 } from "react/jsx-runtime";
 var resolveDesignProps6 = () => {
   return {
     header: {
@@ -16026,7 +16096,7 @@ var PaymentMethodDetails = ({
     showPaymentForm,
     initializePaymentMethod
   ]);
-  return /* @__PURE__ */ jsxs31(Fragment17, { children: [
+  return /* @__PURE__ */ jsxs31(Flex, { $position: "relative", $flexDirection: "column", $gap: "1.5rem", children: [
     /* @__PURE__ */ jsx42(
       Flex,
       {
@@ -16197,9 +16267,9 @@ var AddOn = ({ addOn, currency, layout }) => {
 };
 
 // src/components/elements/plan-manager/UsageDetails.tsx
-import { Fragment as Fragment18, useMemo as useMemo21 } from "react";
+import { Fragment as Fragment17, useMemo as useMemo21 } from "react";
 import { useTranslation as useTranslation27 } from "react-i18next";
-import { Fragment as Fragment19, jsx as jsx44, jsxs as jsxs33 } from "react/jsx-runtime";
+import { Fragment as Fragment18, jsx as jsx44, jsxs as jsxs33 } from "react/jsx-runtime";
 var UsageDetails2 = ({
   entitlement,
   period,
@@ -16222,9 +16292,9 @@ var UsageDetails2 = ({
     let index = 0;
     if (entitlement.priceBehavior === "overage" /* Overage */) {
       acc.push(
-        amount > 0 ? /* @__PURE__ */ jsx44(Fragment18, { children: t2("X additional", {
+        amount > 0 ? /* @__PURE__ */ jsx44(Fragment17, { children: t2("X additional", {
           amount
-        }) }, index) : /* @__PURE__ */ jsxs33(Fragment18, { children: [
+        }) }, index) : /* @__PURE__ */ jsxs33(Fragment17, { children: [
           t2("Additional"),
           ": "
         ] }, index)
@@ -16235,16 +16305,16 @@ var UsageDetails2 = ({
     if (entitlement.priceBehavior !== "tier" /* Tiered */ && entitlement.feature && typeof price === "number" && !amount) {
       const packageSize = billingPrice?.packageSize ?? 1;
       acc.push(
-        /* @__PURE__ */ jsxs33(Fragment18, { children: [
+        /* @__PURE__ */ jsxs33(Fragment17, { children: [
           formatCurrency(price, billingPrice?.currency),
           /* @__PURE__ */ jsxs33("sub", { children: [
             "/",
-            packageSize > 1 && /* @__PURE__ */ jsxs33(Fragment19, { children: [
+            packageSize > 1 && /* @__PURE__ */ jsxs33(Fragment18, { children: [
               packageSize,
               " "
             ] }),
             getFeatureName(entitlement.feature, packageSize),
-            entitlement.feature.featureType === "trait" /* Trait */ && /* @__PURE__ */ jsxs33(Fragment19, { children: [
+            entitlement.feature.featureType === "trait" /* Trait */ && /* @__PURE__ */ jsxs33(Fragment18, { children: [
               "/",
               shortenPeriod(period)
             ] })
@@ -16256,7 +16326,7 @@ var UsageDetails2 = ({
     if (showCredits && entitlement.priceBehavior === "credit_burndown" /* Credit */ && entitlement.planEntitlement?.consumptionRate && entitlement.planEntitlement?.valueCredit) {
       const creditAmount = entitlement.planEntitlement.consumptionRate * amount;
       acc.push(
-        creditAmount > 0 ? /* @__PURE__ */ jsxs33(Fragment18, { children: [
+        creditAmount > 0 ? /* @__PURE__ */ jsxs33(Fragment17, { children: [
           creditAmount,
           " ",
           getFeatureName(
@@ -16265,7 +16335,7 @@ var UsageDetails2 = ({
           ),
           " ",
           t2("used")
-        ] }, index) : /* @__PURE__ */ jsxs33(Fragment18, { children: [
+        ] }, index) : /* @__PURE__ */ jsxs33(Fragment17, { children: [
           entitlement.planEntitlement.consumptionRate,
           " ",
           getFeatureName(
@@ -16294,7 +16364,7 @@ var UsageDetails2 = ({
       $flexWrap: "wrap",
       $gap: "0.5rem",
       children: [
-        /* @__PURE__ */ jsx44(Text, { display: layout.addOns.fontStyle, children: typeof quantity === "number" && quantity > 0 ? /* @__PURE__ */ jsxs33(Fragment19, { children: [
+        /* @__PURE__ */ jsx44(Text, { display: layout.addOns.fontStyle, children: typeof quantity === "number" && quantity > 0 ? /* @__PURE__ */ jsxs33(Fragment18, { children: [
           quantity,
           " ",
           entitlement.feature.name
@@ -16334,7 +16404,7 @@ var UsageDetails2 = ({
 };
 
 // src/components/elements/plan-manager/PlanManager.tsx
-import { Fragment as Fragment20, jsx as jsx45, jsxs as jsxs34 } from "react/jsx-runtime";
+import { Fragment as Fragment19, jsx as jsx45, jsxs as jsxs34 } from "react/jsx-runtime";
 var resolveDesignProps7 = (props) => {
   return {
     header: {
@@ -16455,7 +16525,7 @@ var PlanManager = forwardRef14(({ children, className, portal, ...rest }, ref) =
     const isUsageBasedPlan2 = isFreePlan2 && usageBasedEntitlements.length > 0;
     return { isFreePlan: isFreePlan2, isUsageBasedPlan: isUsageBasedPlan2 };
   }, [currentPlan, usageBasedEntitlements]);
-  return /* @__PURE__ */ jsxs34(Fragment20, { children: [
+  return /* @__PURE__ */ jsxs34(Fragment19, { children: [
     isTrialSubscription && !willSubscriptionCancel ? /* @__PURE__ */ jsxs34(
       Notice,
       {
@@ -16616,7 +16686,7 @@ var PlanManager = forwardRef14(({ children, className, portal, ...rest }, ref) =
                             " ",
                             getFeatureName(group, group.quantity),
                             " ",
-                            subscriptionInterval && /* @__PURE__ */ jsxs34(Fragment20, { children: [
+                            subscriptionInterval && /* @__PURE__ */ jsxs34(Fragment19, { children: [
                               t2("per"),
                               " ",
                               t2(subscriptionInterval)
@@ -16647,7 +16717,7 @@ var PlanManager = forwardRef14(({ children, className, portal, ...rest }, ref) =
                           typeof planCreditGrant.billingCreditAutoTopupThresholdPercent === "number" ? t2("Auto-topup enabled at X%", {
                             threshold: planCreditGrant.billingCreditAutoTopupThresholdPercent
                           }) : t2("Auto-topup enabled"),
-                          planCreditGrant.billingCreditAutoTopupAmount && /* @__PURE__ */ jsxs34(Fragment20, { children: [
+                          planCreditGrant.billingCreditAutoTopupAmount && /* @__PURE__ */ jsxs34(Fragment19, { children: [
                             " ",
                             "(+",
                             planCreditGrant.billingCreditAutoTopupAmount,
@@ -16787,7 +16857,7 @@ PlanManager.displayName = "PlanManager";
 
 // src/components/elements/pricing-table/PricingTable.tsx
 import {
-  Fragment as Fragment24,
+  Fragment as Fragment23,
   forwardRef as forwardRef15,
   useCallback as useCallback13,
   useEffect as useEffect8,
@@ -16798,7 +16868,7 @@ import { useTranslation as useTranslation32 } from "react-i18next";
 // src/components/elements/pricing-table/AddOn.tsx
 import { useMemo as useMemo23 } from "react";
 import { useTranslation as useTranslation29 } from "react-i18next";
-import { Fragment as Fragment21, jsx as jsx46, jsxs as jsxs35 } from "react/jsx-runtime";
+import { Fragment as Fragment20, jsx as jsx46, jsxs as jsxs35 } from "react/jsx-runtime";
 function renderMeteredEntitlementPricing2({
   priceBehavior,
   softLimit,
@@ -16810,7 +16880,7 @@ function renderMeteredEntitlementPricing2({
   isTiered
 }) {
   if (priceBehavior === "overage" /* Overage */ && softLimit) {
-    return /* @__PURE__ */ jsxs35(Fragment21, { children: [
+    return /* @__PURE__ */ jsxs35(Fragment20, { children: [
       "Additional: ",
       formatCurrency(price, currency),
       "/",
@@ -16821,10 +16891,10 @@ function renderMeteredEntitlementPricing2({
     ] });
   }
   if (priceBehavior === "pay_as_you_go" /* PayAsYouGo */ || priceBehavior === "pay_in_advance" /* PayInAdvance */) {
-    return /* @__PURE__ */ jsxs35(Fragment21, { children: [
+    return /* @__PURE__ */ jsxs35(Fragment20, { children: [
       formatCurrency(price, currency),
       "/",
-      packageSize > 1 && /* @__PURE__ */ jsxs35(Fragment21, { children: [
+      packageSize > 1 && /* @__PURE__ */ jsxs35(Fragment20, { children: [
         packageSize,
         " "
       ] }),
@@ -16835,7 +16905,7 @@ function renderMeteredEntitlementPricing2({
     ] });
   }
   if (isTiered) {
-    return /* @__PURE__ */ jsx46(Fragment21, { children: "Tier-based pricing" });
+    return /* @__PURE__ */ jsx46(Fragment20, { children: "Tier-based pricing" });
   }
   return null;
 }
@@ -16922,7 +16992,7 @@ var AddOn2 = ({ addOn, sharedProps, selectedPeriod }) => {
                 {
                   "data-testid": "sch-addon-price",
                   display: layout.plans.name.fontStyle,
-                  children: shouldShowUsageBased2(addOnPrice ?? 0, displayableEntitlements) ? t2("Usage-based") : /* @__PURE__ */ jsxs35(Fragment21, { children: [
+                  children: shouldShowUsageBased2(addOnPrice ?? 0, displayableEntitlements) ? t2("Usage-based") : /* @__PURE__ */ jsxs35(Fragment20, { children: [
                     formatCurrency(addOnPrice ?? 0, addOnCurrency),
                     /* @__PURE__ */ jsxs35("sub", { children: [
                       "/",
@@ -17086,7 +17156,7 @@ import { useTranslation as useTranslation31 } from "react-i18next";
 
 // src/components/elements/pricing-table/Entitlement.tsx
 import { useTranslation as useTranslation30 } from "react-i18next";
-import { Fragment as Fragment22, jsx as jsx47, jsxs as jsxs36 } from "react/jsx-runtime";
+import { Fragment as Fragment21, jsx as jsx47, jsxs as jsxs36 } from "react/jsx-runtime";
 var Entitlement = ({
   entitlement,
   sharedProps,
@@ -17123,17 +17193,17 @@ var Entitlement = ({
     ),
     entitlement.feature?.name && /* @__PURE__ */ jsxs36(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
       /* @__PURE__ */ jsxs36(Flex, { $flexDirection: "column", $justifyContent: "center", $flexGrow: 1, children: [
-        /* @__PURE__ */ jsx47(Text, { children: typeof entitlementPrice === "number" && (entitlement.priceBehavior === "pay_in_advance" /* PayInAdvance */ || entitlement.priceBehavior === "pay_as_you_go" /* PayAsYouGo */) ? /* @__PURE__ */ jsxs36(Fragment22, { children: [
+        /* @__PURE__ */ jsx47(Text, { children: typeof entitlementPrice === "number" && (entitlement.priceBehavior === "pay_in_advance" /* PayInAdvance */ || entitlement.priceBehavior === "pay_as_you_go" /* PayAsYouGo */) ? /* @__PURE__ */ jsxs36(Fragment21, { children: [
           formatCurrency(entitlementPrice, entitlementCurrency),
           " ",
           t2("per"),
           " ",
-          entitlementPackageSize > 1 && /* @__PURE__ */ jsxs36(Fragment22, { children: [
+          entitlementPackageSize > 1 && /* @__PURE__ */ jsxs36(Fragment21, { children: [
             formatNumber(entitlementPackageSize),
             " "
           ] }),
           getFeatureName(entitlement.feature, entitlementPackageSize),
-          entitlement.priceBehavior === "pay_in_advance" /* PayInAdvance */ && /* @__PURE__ */ jsxs36(Fragment22, { children: [
+          entitlement.priceBehavior === "pay_in_advance" /* PayInAdvance */ && /* @__PURE__ */ jsxs36(Fragment21, { children: [
             " ",
             t2("per"),
             " ",
@@ -17145,7 +17215,7 @@ var Entitlement = ({
             entitlement,
             period: selectedPeriod
           }
-        ) : showCredits && entitlement.priceBehavior === "credit_burndown" /* Credit */ && entitlement.valueCredit && entitlement.consumptionRate ? /* @__PURE__ */ jsxs36(Fragment22, { children: [
+        ) : showCredits && entitlement.priceBehavior === "credit_burndown" /* Credit */ && entitlement.valueCredit && entitlement.consumptionRate ? /* @__PURE__ */ jsxs36(Fragment21, { children: [
           formatNumber(entitlement.consumptionRate),
           " ",
           getFeatureName(
@@ -17156,7 +17226,7 @@ var Entitlement = ({
           t2("per"),
           " ",
           getFeatureName(entitlement.feature, 1)
-        ] }) : entitlement.priceBehavior === "credit_burndown" /* Credit */ && creditBasedEntitlementLimit ? /* @__PURE__ */ jsx47(Fragment22, { children: creditBasedEntitlementLimit?.period ? t2("Up to X units per period", {
+        ] }) : entitlement.priceBehavior === "credit_burndown" /* Credit */ && creditBasedEntitlementLimit ? /* @__PURE__ */ jsx47(Fragment21, { children: creditBasedEntitlementLimit?.period ? t2("Up to X units per period", {
           amount: formatNumber(creditBasedEntitlementLimit.limit),
           units: getFeatureName(
             entitlement.feature,
@@ -17169,17 +17239,17 @@ var Entitlement = ({
             entitlement.feature,
             creditBasedEntitlementLimit.limit
           )
-        }) }) : entitlement.valueType === "numeric" /* Numeric */ || entitlement.valueType === "unlimited" /* Unlimited */ || entitlement.valueType === "trait" /* Trait */ ? /* @__PURE__ */ jsxs36(Fragment22, { children: [
+        }) }) : entitlement.valueType === "numeric" /* Numeric */ || entitlement.valueType === "unlimited" /* Unlimited */ || entitlement.valueType === "trait" /* Trait */ ? /* @__PURE__ */ jsxs36(Fragment21, { children: [
           entitlement.valueType === "unlimited" /* Unlimited */ && !entitlement.priceBehavior ? t2("Unlimited", {
             item: getFeatureName(entitlement.feature)
-          }) : /* @__PURE__ */ jsxs36(Fragment22, { children: [
-            typeof limit === "number" && /* @__PURE__ */ jsxs36(Fragment22, { children: [
+          }) : /* @__PURE__ */ jsxs36(Fragment21, { children: [
+            typeof limit === "number" && /* @__PURE__ */ jsxs36(Fragment21, { children: [
               formatNumber(limit),
               " "
             ] }),
             getFeatureName(entitlement.feature, limit)
           ] }),
-          metricPeriodName && /* @__PURE__ */ jsxs36(Fragment22, { children: [
+          metricPeriodName && /* @__PURE__ */ jsxs36(Fragment21, { children: [
             " ",
             t2("per"),
             " ",
@@ -17197,12 +17267,12 @@ var Entitlement = ({
                 " ",
                 formatCurrency(entitlementPrice, entitlementCurrency),
                 "/",
-                entitlementPackageSize > 1 && /* @__PURE__ */ jsxs36(Fragment22, { children: [
+                entitlementPackageSize > 1 && /* @__PURE__ */ jsxs36(Fragment21, { children: [
                   formatNumber(entitlementPackageSize),
                   " "
                 ] }),
                 getFeatureName(entitlement.feature, entitlementPackageSize),
-                entitlement.feature.featureType === "trait" /* Trait */ && /* @__PURE__ */ jsxs36(Fragment22, { children: [
+                entitlement.feature.featureType === "trait" /* Trait */ && /* @__PURE__ */ jsxs36(Fragment21, { children: [
                   "/",
                   shortenPeriod(selectedPeriod)
                 ] })
@@ -17249,7 +17319,7 @@ var Entitlement = ({
 };
 
 // src/components/elements/pricing-table/Plan.tsx
-import { Fragment as Fragment23, jsx as jsx48, jsxs as jsxs37 } from "react/jsx-runtime";
+import { Fragment as Fragment22, jsx as jsx48, jsxs as jsxs37 } from "react/jsx-runtime";
 var Plan2 = ({
   plan,
   index,
@@ -17382,7 +17452,7 @@ var Plan2 = ({
                             credit.quantity,
                             " ",
                             getFeatureName(credit, credit.quantity),
-                            credit.period && /* @__PURE__ */ jsxs37(Fragment23, { children: [
+                            credit.period && /* @__PURE__ */ jsxs37(Fragment22, { children: [
                               " ",
                               t2("per"),
                               " ",
@@ -17549,7 +17619,7 @@ var Plan2 = ({
 };
 
 // src/components/elements/pricing-table/PricingTable.tsx
-import { Fragment as Fragment25, jsx as jsx49, jsxs as jsxs38 } from "react/jsx-runtime";
+import { Fragment as Fragment24, jsx as jsx49, jsxs as jsxs38 } from "react/jsx-runtime";
 var resolveDesignProps8 = (props) => {
   return {
     showPeriodToggle: props.showPeriodToggle ?? true,
@@ -17665,7 +17735,7 @@ var PricingTable = forwardRef15(({ className, ...rest }, ref) => {
     rest.callToActionUrl,
     rest.callToActionTarget
   );
-  const Wrapper = typeof data?.component === "undefined" ? Container : Fragment24;
+  const Wrapper = typeof data?.component === "undefined" ? Container : Fragment23;
   return /* @__PURE__ */ jsx49(Wrapper, { children: /* @__PURE__ */ jsxs38(
     FussyChild,
     {
@@ -17741,7 +17811,7 @@ var PricingTable = forwardRef15(({ className, ...rest }, ref) => {
             }
           )
         ] }),
-        /* @__PURE__ */ jsx49(Box, { children: props.addOns.isVisible && addOns.length > 0 && /* @__PURE__ */ jsxs38(Fragment25, { children: [
+        /* @__PURE__ */ jsx49(Box, { children: props.addOns.isVisible && addOns.length > 0 && /* @__PURE__ */ jsxs38(Fragment24, { children: [
           props.header.isVisible && /* @__PURE__ */ jsx49(
             Flex,
             {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@schematichq/schematic-components",
-  "version": "2.2.0",
+  "version": "2.2.1",
   "main": "dist/schematic-components.cjs.js",
   "module": "dist/schematic-components.esm.js",
   "types": "dist/schematic-components.d.ts",
@@ -27,13 +27,14 @@
     "format": "prettier --write \"src/**/*.{ts,tsx}\"",
     "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --fix",
     "openapi": "./generate_openapi.sh -c ./src/api/config_checkoutexternal.yml && ./generate_openapi.sh -c ./src/api/config_componentspublic.yml",
-    "test": "yarn node --experimental-vm-modules $(yarn bin jest)",
+    "test": "./test.sh",
+    "test:watch": "vitest",
     "tsc": "npx tsc",
     "test:demo": "../scripts/test-components.sh"
   },
   "dependencies": {
     "@schematichq/schematic-icons": "^0.5.2",
-    "@stripe/stripe-js": "^8.3.0",
+    "@stripe/stripe-js": "^8.4.0",
     "lodash": "^4.17.21",
     "pako": "^2.1.0",
     "styled-components": "^6.1.19",
@@ -43,41 +44,36 @@
     "@eslint/js": "^9.39.1",
     "@eslint/json": "^0.14.0",
     "@eslint/markdown": "^7.5.1",
-    "@jest/globals": "^30.2.0",
-    "@microsoft/api-extractor": "^7.54.0",
+    "@microsoft/api-extractor": "^7.55.0",
     "@openapitools/openapi-generator-cli": "^2.25.0",
     "@stripe/react-stripe-js": "^5.3.0",
-    "@swc/core": "^1.15.1",
-    "@swc/jest": "^0.2.39",
-    "@swc/plugin-styled-components": "^11.0.0",
+    "@swc/core": "^1.15.2",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.0",
-    "@types/jest": "^30.0.0",
     "@types/lodash": "^4.17.20",
     "@types/pako": "^2.0.4",
-    "@types/react": "^19.2.2",
-    "@types/react-dom": "^19.2.2",
+    "@types/react": "^19.2.5",
+    "@types/react-dom": "^19.2.3",
+    "@vitest/browser": "^4.0.10",
     "esbuild": "^0.27.0",
     "eslint": "^9.39.1",
     "eslint-import-resolver-typescript": "^4.4.4",
     "eslint-plugin-import": "^2.32.0",
-    "eslint-plugin-jest": "^29.1.0",
     "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-react-hooks": "^7.0.0",
+    "eslint-plugin-react-hooks": "^7.0.1",
     "globals": "^16.5.0",
-    "i18next": "^25.6.1",
-    "jest": "^30.2.0",
-    "jest-environment-jsdom": "^30.2.0",
-    "jest-fixed-jsdom": "^0.0.10",
-    "jest-styled-components": "^7.2.0",
-    "msw": "2.11.6",
+    "happy-dom": "^20.0.10",
+    "i18next": "^25.6.2",
+    "jsdom": "^27.2.0",
+    "msw": "^2.12.2",
     "prettier": "^3.6.2",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
-    "react-i18next": "^16.2.4",
+    "react-i18next": "^16.3.3",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.46.4"
+    "typescript-eslint": "^8.47.0",
+    "vitest": "^4.0.10"
   },
   "peerDependencies": {
     "@stripe/react-stripe-js": ">=3",