@schematichq/schematic-components 2.23.0 → 2.24.0

package/dist/schematic-components.browser.cjs.js

@@ -5959,7 +5959,7 @@ var i;
 var c = "undefined" != typeof process && void 0 !== process.env && (process.env.REACT_APP_SC_ATTR || process.env.SC_ATTR) || "data-styled";
 var a = "active";
 var l = "data-styled-version";
-var u = "6.5.0";
+var u = "6.5.3";
 var h = "/*!sc*/\n";
 var d = "undefined" != typeof window && "undefined" != typeof document;
 function p(e2) {
@@ -6553,23 +6553,20 @@ function ut(o, s, r2) {
           return r4 === n3;
         })(n2[0], s3, n2[4])) y3 = n2[5], g3 = n2[6];
         else {
-          y3 = (function(e3, t3, n4) {
-            const o4 = Object.assign(Object.assign({}, t3), { className: void 0, theme: n4 }), s4 = e3.length > 1;
-            for (let n5 = 0; n5 < e3.length; n5++) {
-              const r4 = e3[n5], i4 = re(r4) ? r4(s4 ? Object.assign({}, o4) : o4) : r4;
-              for (const e4 in i4) "className" === e4 ? o4.className = ae(o4.className, i4[e4]) : "style" === e4 ? o4.style = Object.assign(Object.assign({}, o4.style), i4[e4]) : e4 in t3 && void 0 === t3[e4] || (o4[e4] = i4[e4]);
+          y3 = (function(e3, t4, n3) {
+            const o4 = Object.assign(Object.assign({}, t4), { className: void 0, theme: n3 }), s4 = e3.length > 1;
+            for (let n4 = 0; n4 < e3.length; n4++) {
+              const r4 = e3[n4], i4 = re(r4) ? r4(s4 ? Object.assign({}, o4) : o4) : r4;
+              for (const e4 in i4) "className" === e4 ? o4.className = ae(o4.className, i4[e4]) : "style" === e4 ? o4.style = Object.assign(Object.assign({}, o4.style), i4[e4]) : e4 in t4 && void 0 === t4[e4] || (o4[e4] = i4[e4]);
             }
-            return "className" in t3 && "string" == typeof t3.className && (o4.className = ae(o4.className, t3.className)), o4;
-          })(i3, s3, m3), g3 = (function(e3, n4, o4, s4) {
-            const r4 = e3.generateAndInjectStyles(n4, o4, s4);
-            return import_react13.default.useDebugValue && import_react13.default.useDebugValue(r4), r4;
-          })(c3, y3, p3.styleSheet, p3.stylis);
-          let n3 = 0;
-          for (const e3 in s3) it.call(s3, e3) && n3++;
-          e2.current = [s3, m3, p3.styleSheet, p3.stylis, n3, y3, g3, c3];
+            return "className" in t4 && "string" == typeof t4.className && (o4.className = ae(o4.className, t4.className)), o4;
+          })(i3, s3, m3), g3 = c3.generateAndInjectStyles(y3, p3.styleSheet, p3.stylis);
+          let t3 = 0;
+          for (const e3 in s3) it.call(s3, e3) && t3++;
+          e2.current = [s3, m3, p3.styleSheet, p3.stylis, t3, y3, g3, c3];
         }
       }
-      o3.warnTooManyClasses && o3.warnTooManyClasses(g3);
+      import_react13.default.useDebugValue && import_react13.default.useDebugValue(g3), o3.warnTooManyClasses && o3.warnTooManyClasses(g3);
       const v2 = y3.as || h3, S2 = (function(t3, n2, o4, s4) {
         const r4 = {};
         for (const i4 in t3) void 0 === t3[i4] || "$" === i4[0] || "as" === i4 || "theme" === i4 && t3.theme === o4 || ("forwardedAs" === i4 ? r4.as = t3.forwardedAs : s4 && !s4(i4, n2) || (r4[i4] = t3[i4], s4 || false || isPropValid(i4) || (lt || (lt = /* @__PURE__ */ new Set())).has(i4) || !L(n2) || n2.includes("-") || (lt.add(i4), console.warn(`styled-components: it looks like an unknown prop "${i4}" is being sent through to the DOM, which will likely trigger a React console error. If you would like automatic filtering of unknown props, you can opt-into that behavior via \`<StyleSheetManager shouldForwardProp={...}>\` (connect an API like \`@emotion/is-prop-valid\`) or consider using transient props (\`$\` prefix for automatic filtering.)`))));
@@ -13186,30 +13183,29 @@ function isAutoTopupOff(grant) {
 function isSelfServiceAutoTopupAvailable(grant) {
   return !!grant?.billingCreditAutoTopupSelfService && !isAutoTopupOff(grant);
 }
-function isBundlePurchaseOff(grant) {
-  return grant?.billingCreditCanBuyBundles === false;
-}
-function getBundleOffCreditIds(grants) {
-  const ids = /* @__PURE__ */ new Set();
-  (grants ?? []).forEach((grant) => {
-    if (isBundlePurchaseOff(grant)) {
-      ids.add(grant.creditId);
-    }
-  });
-  return ids;
+function isBundleCompatibleWithPlan(bundle, planId) {
+  const compatiblePlanIds = bundle.compatiblePlanIds ?? [];
+  if (compatiblePlanIds.length === 0) {
+    return true;
+  }
+  return !!planId && compatiblePlanIds.includes(planId);
 }
-function filterCreditBundles(grants, bundles) {
-  const bundleOffCreditIds = getBundleOffCreditIds(grants);
+function filterCreditBundles(bundles, planId) {
   return (bundles ?? []).filter(
-    (bundle) => !bundleOffCreditIds.has(bundle.creditId)
+    (bundle) => isBundleCompatibleWithPlan(bundle, planId)
   );
 }
-function deriveCreditBundles(grants, bundles, counts) {
-  return filterCreditBundles(grants, bundles).map((bundle) => ({
+function deriveCreditBundles(bundles, planId, counts) {
+  return filterCreditBundles(bundles, planId).map((bundle) => ({
     ...bundle,
     count: counts[bundle.id] ?? 0
   }));
 }
+function getPurchasableCreditIds(bundles, planId) {
+  return new Set(
+    filterCreditBundles(bundles, planId).map((bundle) => bundle.creditId)
+  );
+}
 function getAutoTopupThresholdCredits(grant) {
   return grant?.companyAutoTopupThresholdCredits ?? grant?.billingCreditAutoTopupThresholdCredits;
 }
@@ -14532,7 +14528,7 @@ var reducer = (state, action) => {
 // src/context/EmbedProvider.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var getCustomHeaders = (sessionId) => ({
-  "X-Schematic-Components-Version": "2.23.0",
+  "X-Schematic-Components-Version": "2.24.0",
   "X-Schematic-Session-ID": sessionId
 });
 var normalizeCurrencyFilter = (filter2) => {
@@ -18903,14 +18899,14 @@ var CheckoutDialog = ({ top }) => {
   const isIndividualBundlePurchase = data?.checkoutSettings.bundlePurchaseBehavior === CheckoutBundlePurchaseBehavior.Individual;
   const [bundleCounts, setBundleCounts] = (0, import_react39.useState)({});
   const bundleCountsRef = (0, import_react39.useRef)(bundleCounts);
-  const bundleGatingGrants = selectedPlan?.includedCreditGrants ?? data?.company?.plan?.includedCreditGrants;
+  const bundleGatingPlanId = selectedPlan?.id ?? data?.company?.plan?.id;
   const creditBundles = (0, import_react39.useMemo)(() => {
     return deriveCreditBundles(
-      bundleGatingGrants,
       data?.creditBundles,
+      bundleGatingPlanId,
       bundleCounts
     );
-  }, [bundleGatingGrants, data?.creditBundles, bundleCounts]);
+  }, [bundleGatingPlanId, data?.creditBundles, bundleCounts]);
   const selectedPlanPriceId = (0, import_react39.useMemo)(() => {
     if (!selectedPlan) {
       return void 0;
@@ -19241,8 +19237,8 @@ var CheckoutDialog = ({ top }) => {
       const code = typeof updates.promoCode !== "undefined" ? updates.promoCode : promoCode;
       const skipTrial = !(updates.shouldTrial ?? shouldTrial);
       const resolvedCreditBundles = filterCreditBundles(
-        plan?.includedCreditGrants ?? data?.company?.plan?.includedCreditGrants,
-        updates.creditBundles || creditBundles
+        updates.creditBundles || creditBundles,
+        plan?.id ?? data?.company?.plan?.id
       );
       const isCreditOnly = !data?.company?.billingSubscription && !planPriceId && resolvedCreditBundles.some((bundle) => bundle.count > 0) && !(updates.addOns || addOns).some(
         (addOn) => addOn.isSelected && !!getAddOnPrice(addOn, period, resolvedCurrency)?.id
@@ -19384,6 +19380,7 @@ var CheckoutDialog = ({ top }) => {
     [
       t3,
       addOnCompatibilityLookup,
+      data?.company?.plan?.id,
       data?.company?.plan?.includedCreditGrants,
       data?.company?.billingSubscription,
       previewCheckout,
@@ -19667,13 +19664,13 @@ var CheckoutDialog = ({ top }) => {
       setBundleCounts(nextCounts);
       debouncedPreviewCheckout({
         creditBundles: deriveCreditBundles(
-          bundleGatingGrants,
           data?.creditBundles,
+          bundleGatingPlanId,
           nextCounts
         )
       });
     },
-    [bundleGatingGrants, data?.creditBundles, debouncedPreviewCheckout]
+    [bundleGatingPlanId, data?.creditBundles, debouncedPreviewCheckout]
   );
   const toggleCreditBundle = (0, import_react39.useCallback)(
     (id) => {
@@ -19687,13 +19684,13 @@ var CheckoutDialog = ({ top }) => {
       setBundleCounts(nextCounts);
       handlePreviewCheckout({
         creditBundles: deriveCreditBundles(
-          bundleGatingGrants,
           data?.creditBundles,
+          bundleGatingPlanId,
           nextCounts
         )
       });
     },
-    [bundleGatingGrants, data?.creditBundles, handlePreviewCheckout]
+    [bundleGatingPlanId, data?.creditBundles, handlePreviewCheckout]
   );
   const updateAddOnEntitlementQuantity = (0, import_react39.useCallback)(
     (id, updatedQuantity) => {
@@ -24221,9 +24218,9 @@ var MeteredFeatures = (0, import_react55.forwardRef)(({ className, ...rest }, re
     },
     [data?.featureUsage?.features]
   );
-  const bundleOffCreditIds = (0, import_react55.useMemo)(
-    () => getBundleOffCreditIds(data?.company?.plan?.includedCreditGrants),
-    [data?.company?.plan?.includedCreditGrants]
+  const purchasableCreditIds = (0, import_react55.useMemo)(
+    () => getPurchasableCreditIds(data?.creditBundles, data?.company?.plan?.id),
+    [data?.creditBundles, data?.company?.plan?.id]
   );
   const [expandedCreditIds, setExpandedCreditIds] = (0, import_react55.useState)(
     () => /* @__PURE__ */ new Set()
@@ -24401,7 +24398,7 @@ var MeteredFeatures = (0, import_react55.forwardRef)(({ className, ...rest }, re
                   )]
                 }
               ),
-              canCheckout && !bundleOffCreditIds.has(credit.id) && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+              canCheckout && purchasableCreditIds.has(credit.id) && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
                 Button,
                 {
                   type: "button",
@@ -24967,7 +24964,7 @@ var registerWrapper = function registerWrapper2(stripe, startTime) {
   }
   stripe._registerWrapper({
     name: "stripe-js",
-    version: "9.12.1",
+    version: "9.13.0",
     startTime
   });
 };
@@ -25045,7 +25042,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("9.12.1", " 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("9.13.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);

package/dist/schematic-components.browser.esm.js

@@ -5868,7 +5868,7 @@ var i;
 var c = "undefined" != typeof process && void 0 !== process.env && (process.env.REACT_APP_SC_ATTR || process.env.SC_ATTR) || "data-styled";
 var a = "active";
 var l = "data-styled-version";
-var u = "6.5.0";
+var u = "6.5.3";
 var h = "/*!sc*/\n";
 var d = "undefined" != typeof window && "undefined" != typeof document;
 function p(e2) {
@@ -6462,23 +6462,20 @@ function ut(o, s, r2) {
           return r4 === n3;
         })(n2[0], s3, n2[4])) y3 = n2[5], g3 = n2[6];
         else {
-          y3 = (function(e3, t3, n4) {
-            const o4 = Object.assign(Object.assign({}, t3), { className: void 0, theme: n4 }), s4 = e3.length > 1;
-            for (let n5 = 0; n5 < e3.length; n5++) {
-              const r4 = e3[n5], i4 = re(r4) ? r4(s4 ? Object.assign({}, o4) : o4) : r4;
-              for (const e4 in i4) "className" === e4 ? o4.className = ae(o4.className, i4[e4]) : "style" === e4 ? o4.style = Object.assign(Object.assign({}, o4.style), i4[e4]) : e4 in t3 && void 0 === t3[e4] || (o4[e4] = i4[e4]);
+          y3 = (function(e3, t4, n3) {
+            const o4 = Object.assign(Object.assign({}, t4), { className: void 0, theme: n3 }), s4 = e3.length > 1;
+            for (let n4 = 0; n4 < e3.length; n4++) {
+              const r4 = e3[n4], i4 = re(r4) ? r4(s4 ? Object.assign({}, o4) : o4) : r4;
+              for (const e4 in i4) "className" === e4 ? o4.className = ae(o4.className, i4[e4]) : "style" === e4 ? o4.style = Object.assign(Object.assign({}, o4.style), i4[e4]) : e4 in t4 && void 0 === t4[e4] || (o4[e4] = i4[e4]);
             }
-            return "className" in t3 && "string" == typeof t3.className && (o4.className = ae(o4.className, t3.className)), o4;
-          })(i3, s3, m3), g3 = (function(e3, n4, o4, s4) {
-            const r4 = e3.generateAndInjectStyles(n4, o4, s4);
-            return t2.useDebugValue && t2.useDebugValue(r4), r4;
-          })(c3, y3, p3.styleSheet, p3.stylis);
-          let n3 = 0;
-          for (const e3 in s3) it.call(s3, e3) && n3++;
-          e2.current = [s3, m3, p3.styleSheet, p3.stylis, n3, y3, g3, c3];
+            return "className" in t4 && "string" == typeof t4.className && (o4.className = ae(o4.className, t4.className)), o4;
+          })(i3, s3, m3), g3 = c3.generateAndInjectStyles(y3, p3.styleSheet, p3.stylis);
+          let t3 = 0;
+          for (const e3 in s3) it.call(s3, e3) && t3++;
+          e2.current = [s3, m3, p3.styleSheet, p3.stylis, t3, y3, g3, c3];
         }
       }
-      o3.warnTooManyClasses && o3.warnTooManyClasses(g3);
+      t2.useDebugValue && t2.useDebugValue(g3), o3.warnTooManyClasses && o3.warnTooManyClasses(g3);
       const v2 = y3.as || h3, S2 = (function(t3, n2, o4, s4) {
         const r4 = {};
         for (const i4 in t3) void 0 === t3[i4] || "$" === i4[0] || "as" === i4 || "theme" === i4 && t3.theme === o4 || ("forwardedAs" === i4 ? r4.as = t3.forwardedAs : s4 && !s4(i4, n2) || (r4[i4] = t3[i4], s4 || false || isPropValid(i4) || (lt || (lt = /* @__PURE__ */ new Set())).has(i4) || !L(n2) || n2.includes("-") || (lt.add(i4), console.warn(`styled-components: it looks like an unknown prop "${i4}" is being sent through to the DOM, which will likely trigger a React console error. If you would like automatic filtering of unknown props, you can opt-into that behavior via \`<StyleSheetManager shouldForwardProp={...}>\` (connect an API like \`@emotion/is-prop-valid\`) or consider using transient props (\`$\` prefix for automatic filtering.)`))));
@@ -13095,30 +13092,29 @@ function isAutoTopupOff(grant) {
 function isSelfServiceAutoTopupAvailable(grant) {
   return !!grant?.billingCreditAutoTopupSelfService && !isAutoTopupOff(grant);
 }
-function isBundlePurchaseOff(grant) {
-  return grant?.billingCreditCanBuyBundles === false;
-}
-function getBundleOffCreditIds(grants) {
-  const ids = /* @__PURE__ */ new Set();
-  (grants ?? []).forEach((grant) => {
-    if (isBundlePurchaseOff(grant)) {
-      ids.add(grant.creditId);
-    }
-  });
-  return ids;
+function isBundleCompatibleWithPlan(bundle, planId) {
+  const compatiblePlanIds = bundle.compatiblePlanIds ?? [];
+  if (compatiblePlanIds.length === 0) {
+    return true;
+  }
+  return !!planId && compatiblePlanIds.includes(planId);
 }
-function filterCreditBundles(grants, bundles) {
-  const bundleOffCreditIds = getBundleOffCreditIds(grants);
+function filterCreditBundles(bundles, planId) {
   return (bundles ?? []).filter(
-    (bundle) => !bundleOffCreditIds.has(bundle.creditId)
+    (bundle) => isBundleCompatibleWithPlan(bundle, planId)
   );
 }
-function deriveCreditBundles(grants, bundles, counts) {
-  return filterCreditBundles(grants, bundles).map((bundle) => ({
+function deriveCreditBundles(bundles, planId, counts) {
+  return filterCreditBundles(bundles, planId).map((bundle) => ({
     ...bundle,
     count: counts[bundle.id] ?? 0
   }));
 }
+function getPurchasableCreditIds(bundles, planId) {
+  return new Set(
+    filterCreditBundles(bundles, planId).map((bundle) => bundle.creditId)
+  );
+}
 function getAutoTopupThresholdCredits(grant) {
   return grant?.companyAutoTopupThresholdCredits ?? grant?.billingCreditAutoTopupThresholdCredits;
 }
@@ -14441,7 +14437,7 @@ var reducer = (state, action) => {
 // src/context/EmbedProvider.tsx
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 var getCustomHeaders = (sessionId) => ({
-  "X-Schematic-Components-Version": "2.23.0",
+  "X-Schematic-Components-Version": "2.24.0",
   "X-Schematic-Session-ID": sessionId
 });
 var normalizeCurrencyFilter = (filter2) => {
@@ -18831,14 +18827,14 @@ var CheckoutDialog = ({ top }) => {
   const isIndividualBundlePurchase = data?.checkoutSettings.bundlePurchaseBehavior === CheckoutBundlePurchaseBehavior.Individual;
   const [bundleCounts, setBundleCounts] = useState9({});
   const bundleCountsRef = useRef6(bundleCounts);
-  const bundleGatingGrants = selectedPlan?.includedCreditGrants ?? data?.company?.plan?.includedCreditGrants;
+  const bundleGatingPlanId = selectedPlan?.id ?? data?.company?.plan?.id;
   const creditBundles = useMemo15(() => {
     return deriveCreditBundles(
-      bundleGatingGrants,
       data?.creditBundles,
+      bundleGatingPlanId,
       bundleCounts
     );
-  }, [bundleGatingGrants, data?.creditBundles, bundleCounts]);
+  }, [bundleGatingPlanId, data?.creditBundles, bundleCounts]);
   const selectedPlanPriceId = useMemo15(() => {
     if (!selectedPlan) {
       return void 0;
@@ -19169,8 +19165,8 @@ var CheckoutDialog = ({ top }) => {
       const code = typeof updates.promoCode !== "undefined" ? updates.promoCode : promoCode;
       const skipTrial = !(updates.shouldTrial ?? shouldTrial);
       const resolvedCreditBundles = filterCreditBundles(
-        plan?.includedCreditGrants ?? data?.company?.plan?.includedCreditGrants,
-        updates.creditBundles || creditBundles
+        updates.creditBundles || creditBundles,
+        plan?.id ?? data?.company?.plan?.id
       );
       const isCreditOnly = !data?.company?.billingSubscription && !planPriceId && resolvedCreditBundles.some((bundle) => bundle.count > 0) && !(updates.addOns || addOns).some(
         (addOn) => addOn.isSelected && !!getAddOnPrice(addOn, period, resolvedCurrency)?.id
@@ -19312,6 +19308,7 @@ var CheckoutDialog = ({ top }) => {
     [
       t3,
       addOnCompatibilityLookup,
+      data?.company?.plan?.id,
       data?.company?.plan?.includedCreditGrants,
       data?.company?.billingSubscription,
       previewCheckout,
@@ -19595,13 +19592,13 @@ var CheckoutDialog = ({ top }) => {
       setBundleCounts(nextCounts);
       debouncedPreviewCheckout({
         creditBundles: deriveCreditBundles(
-          bundleGatingGrants,
           data?.creditBundles,
+          bundleGatingPlanId,
           nextCounts
         )
       });
     },
-    [bundleGatingGrants, data?.creditBundles, debouncedPreviewCheckout]
+    [bundleGatingPlanId, data?.creditBundles, debouncedPreviewCheckout]
   );
   const toggleCreditBundle = useCallback8(
     (id) => {
@@ -19615,13 +19612,13 @@ var CheckoutDialog = ({ top }) => {
       setBundleCounts(nextCounts);
       handlePreviewCheckout({
         creditBundles: deriveCreditBundles(
-          bundleGatingGrants,
           data?.creditBundles,
+          bundleGatingPlanId,
           nextCounts
         )
       });
     },
-    [bundleGatingGrants, data?.creditBundles, handlePreviewCheckout]
+    [bundleGatingPlanId, data?.creditBundles, handlePreviewCheckout]
   );
   const updateAddOnEntitlementQuantity = useCallback8(
     (id, updatedQuantity) => {
@@ -24161,9 +24158,9 @@ var MeteredFeatures = forwardRef12(({ className, ...rest }, ref) => {
     },
     [data?.featureUsage?.features]
   );
-  const bundleOffCreditIds = useMemo27(
-    () => getBundleOffCreditIds(data?.company?.plan?.includedCreditGrants),
-    [data?.company?.plan?.includedCreditGrants]
+  const purchasableCreditIds = useMemo27(
+    () => getPurchasableCreditIds(data?.creditBundles, data?.company?.plan?.id),
+    [data?.creditBundles, data?.company?.plan?.id]
   );
   const [expandedCreditIds, setExpandedCreditIds] = useState18(
     () => /* @__PURE__ */ new Set()
@@ -24341,7 +24338,7 @@ var MeteredFeatures = forwardRef12(({ className, ...rest }, ref) => {
                   )]
                 }
               ),
-              canCheckout && !bundleOffCreditIds.has(credit.id) && /* @__PURE__ */ jsx55(
+              canCheckout && purchasableCreditIds.has(credit.id) && /* @__PURE__ */ jsx55(
                 Button,
                 {
                   type: "button",
@@ -24907,7 +24904,7 @@ var registerWrapper = function registerWrapper2(stripe, startTime) {
   }
   stripe._registerWrapper({
     name: "stripe-js",
-    version: "9.12.1",
+    version: "9.13.0",
     startTime
   });
 };
@@ -24985,7 +24982,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("9.12.1", " 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("9.13.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);

package/dist/schematic-components.cjs.js

@@ -778,7 +778,7 @@ var require_styled_components_cjs = __commonJS({
     var u = "undefined" != typeof process && void 0 !== process.env && (process.env.REACT_APP_SC_ATTR || process.env.SC_ATTR) || "data-styled";
     var d = "active";
     var h = "data-styled-version";
-    var p = "6.5.0";
+    var p = "6.5.3";
     var f = "/*!sc*/\n";
     var m = "undefined" != typeof window && "undefined" != typeof document;
     var y = void 0 === a.default.createContext;
@@ -1450,10 +1450,7 @@ See https://styled-components.com/docs/basics#define-styled-components-outside-o
               for (const e7 in i4) "className" === e7 ? o4.className = he(o4.className, i4[e7]) : "style" === e7 ? o4.style = Object.assign(Object.assign({}, o4.style), i4[e7]) : e7 in t3 && void 0 === t3[e7] || (o4[e7] = i4[e7]);
             }
             return "className" in t3 && "string" == typeof t3.className && (o4.className = he(o4.className, t3.className)), o4;
-          })(s3, n4, v3), b3 = (function(e6, t3, n5, o4) {
-            const s4 = e6.generateAndInjectStyles(t3, n5, o4);
-            return a.default.useDebugValue && a.default.useDebugValue(s4), s4;
-          })(r3, S3, m3.styleSheet, m3.stylis), e5.warnTooManyClasses && e5.warnTooManyClasses(b3);
+          })(s3, n4, v3), b3 = r3.generateAndInjectStyles(S3, m3.styleSheet, m3.stylis), a.default.useDebugValue && a.default.useDebugValue(b3), e5.warnTooManyClasses && e5.warnTooManyClasses(b3);
           const w2 = S3.as || h3, C2 = (function(e6, t3, n5, o4) {
             const s4 = {};
             for (const r4 in e6) void 0 === e6[r4] || "$" === r4[0] || "as" === r4 || "theme" === r4 && e6.theme === n5 || ("forwardedAs" === r4 ? s4.as = e6.forwardedAs : o4 && !o4(r4, t3) || (s4[r4] = e6[r4], o4 || false || l.default(r4) || (Pt || (Pt = /* @__PURE__ */ new Set())).has(r4) || !U(t3) || t3.includes("-") || (Pt.add(r4), console.warn(`styled-components: it looks like an unknown prop "${r4}" is being sent through to the DOM, which will likely trigger a React console error. If you would like automatic filtering of unknown props, you can opt-into that behavior via \`<StyleSheetManager shouldForwardProp={...}>\` (connect an API like \`@emotion/is-prop-valid\`) or consider using transient props (\`$\` prefix for automatic filtering.)`))));
@@ -13542,30 +13539,29 @@ function isAutoTopupOff(grant) {
 function isSelfServiceAutoTopupAvailable(grant) {
   return !!grant?.billingCreditAutoTopupSelfService && !isAutoTopupOff(grant);
 }
-function isBundlePurchaseOff(grant) {
-  return grant?.billingCreditCanBuyBundles === false;
-}
-function getBundleOffCreditIds(grants) {
-  const ids = /* @__PURE__ */ new Set();
-  (grants ?? []).forEach((grant) => {
-    if (isBundlePurchaseOff(grant)) {
-      ids.add(grant.creditId);
-    }
-  });
-  return ids;
+function isBundleCompatibleWithPlan(bundle, planId) {
+  const compatiblePlanIds = bundle.compatiblePlanIds ?? [];
+  if (compatiblePlanIds.length === 0) {
+    return true;
+  }
+  return !!planId && compatiblePlanIds.includes(planId);
 }
-function filterCreditBundles(grants, bundles) {
-  const bundleOffCreditIds = getBundleOffCreditIds(grants);
+function filterCreditBundles(bundles, planId) {
   return (bundles ?? []).filter(
-    (bundle) => !bundleOffCreditIds.has(bundle.creditId)
+    (bundle) => isBundleCompatibleWithPlan(bundle, planId)
   );
 }
-function deriveCreditBundles(grants, bundles, counts) {
-  return filterCreditBundles(grants, bundles).map((bundle) => ({
+function deriveCreditBundles(bundles, planId, counts) {
+  return filterCreditBundles(bundles, planId).map((bundle) => ({
     ...bundle,
     count: counts[bundle.id] ?? 0
   }));
 }
+function getPurchasableCreditIds(bundles, planId) {
+  return new Set(
+    filterCreditBundles(bundles, planId).map((bundle) => bundle.creditId)
+  );
+}
 function getAutoTopupThresholdCredits(grant) {
   return grant?.companyAutoTopupThresholdCredits ?? grant?.billingCreditAutoTopupThresholdCredits;
 }
@@ -14889,7 +14885,7 @@ var reducer = (state, action) => {
 // src/context/EmbedProvider.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var getCustomHeaders = (sessionId) => ({
-  "X-Schematic-Components-Version": "2.23.0",
+  "X-Schematic-Components-Version": "2.24.0",
   "X-Schematic-Session-ID": sessionId
 });
 var normalizeCurrencyFilter = (filter) => {
@@ -19279,14 +19275,14 @@ var CheckoutDialog = ({ top }) => {
   const isIndividualBundlePurchase = data?.checkoutSettings.bundlePurchaseBehavior === CheckoutBundlePurchaseBehavior.Individual;
   const [bundleCounts, setBundleCounts] = (0, import_react38.useState)({});
   const bundleCountsRef = (0, import_react38.useRef)(bundleCounts);
-  const bundleGatingGrants = selectedPlan?.includedCreditGrants ?? data?.company?.plan?.includedCreditGrants;
+  const bundleGatingPlanId = selectedPlan?.id ?? data?.company?.plan?.id;
   const creditBundles = (0, import_react38.useMemo)(() => {
     return deriveCreditBundles(
-      bundleGatingGrants,
       data?.creditBundles,
+      bundleGatingPlanId,
       bundleCounts
     );
-  }, [bundleGatingGrants, data?.creditBundles, bundleCounts]);
+  }, [bundleGatingPlanId, data?.creditBundles, bundleCounts]);
   const selectedPlanPriceId = (0, import_react38.useMemo)(() => {
     if (!selectedPlan) {
       return void 0;
@@ -19617,8 +19613,8 @@ var CheckoutDialog = ({ top }) => {
       const code = typeof updates.promoCode !== "undefined" ? updates.promoCode : promoCode;
       const skipTrial = !(updates.shouldTrial ?? shouldTrial);
       const resolvedCreditBundles = filterCreditBundles(
-        plan?.includedCreditGrants ?? data?.company?.plan?.includedCreditGrants,
-        updates.creditBundles || creditBundles
+        updates.creditBundles || creditBundles,
+        plan?.id ?? data?.company?.plan?.id
       );
       const isCreditOnly = !data?.company?.billingSubscription && !planPriceId && resolvedCreditBundles.some((bundle) => bundle.count > 0) && !(updates.addOns || addOns).some(
         (addOn) => addOn.isSelected && !!getAddOnPrice(addOn, period, resolvedCurrency)?.id
@@ -19760,6 +19756,7 @@ var CheckoutDialog = ({ top }) => {
     [
       t2,
       addOnCompatibilityLookup,
+      data?.company?.plan?.id,
       data?.company?.plan?.includedCreditGrants,
       data?.company?.billingSubscription,
       previewCheckout,
@@ -20043,13 +20040,13 @@ var CheckoutDialog = ({ top }) => {
       setBundleCounts(nextCounts);
       debouncedPreviewCheckout({
         creditBundles: deriveCreditBundles(
-          bundleGatingGrants,
           data?.creditBundles,
+          bundleGatingPlanId,
           nextCounts
         )
       });
     },
-    [bundleGatingGrants, data?.creditBundles, debouncedPreviewCheckout]
+    [bundleGatingPlanId, data?.creditBundles, debouncedPreviewCheckout]
   );
   const toggleCreditBundle = (0, import_react38.useCallback)(
     (id) => {
@@ -20063,13 +20060,13 @@ var CheckoutDialog = ({ top }) => {
       setBundleCounts(nextCounts);
       handlePreviewCheckout({
         creditBundles: deriveCreditBundles(
-          bundleGatingGrants,
           data?.creditBundles,
+          bundleGatingPlanId,
           nextCounts
         )
       });
     },
-    [bundleGatingGrants, data?.creditBundles, handlePreviewCheckout]
+    [bundleGatingPlanId, data?.creditBundles, handlePreviewCheckout]
   );
   const updateAddOnEntitlementQuantity = (0, import_react38.useCallback)(
     (id, updatedQuantity) => {
@@ -24599,9 +24596,9 @@ var MeteredFeatures = (0, import_react54.forwardRef)(({ className, ...rest }, re
     },
     [data?.featureUsage?.features]
   );
-  const bundleOffCreditIds = (0, import_react54.useMemo)(
-    () => getBundleOffCreditIds(data?.company?.plan?.includedCreditGrants),
-    [data?.company?.plan?.includedCreditGrants]
+  const purchasableCreditIds = (0, import_react54.useMemo)(
+    () => getPurchasableCreditIds(data?.creditBundles, data?.company?.plan?.id),
+    [data?.creditBundles, data?.company?.plan?.id]
   );
   const [expandedCreditIds, setExpandedCreditIds] = (0, import_react54.useState)(
     () => /* @__PURE__ */ new Set()
@@ -24779,7 +24776,7 @@ var MeteredFeatures = (0, import_react54.forwardRef)(({ className, ...rest }, re
                   )]
                 }
               ),
-              canCheckout && !bundleOffCreditIds.has(credit.id) && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+              canCheckout && purchasableCreditIds.has(credit.id) && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
                 Button,
                 {
                   type: "button",
@@ -25345,7 +25342,7 @@ var registerWrapper = function registerWrapper2(stripe, startTime) {
   }
   stripe._registerWrapper({
     name: "stripe-js",
-    version: "9.12.1",
+    version: "9.13.0",
     startTime
   });
 };
@@ -25423,7 +25420,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("9.12.1", " 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("9.13.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);