@schematichq/schematic-components 1.2.0 → 1.4.0

package/dist/schematic-components.esm.js

@@ -573,10 +573,10 @@ var require_coreJsData = __commonJS({
 var require_isMasked = __commonJS({
   "node_modules/lodash/_isMasked.js"(exports, module) {
     var coreJsData = require_coreJsData();
-    var maskSrcKey = function() {
+    var maskSrcKey = (function() {
       var uid = /[^.]+$/.exec(coreJsData && coreJsData.keys && coreJsData.keys.IE_PROTO || "");
       return uid ? "Symbol(src)_1." + uid : "";
-    }();
+    })();
     function isMasked(func) {
       return !!maskSrcKey && maskSrcKey in func;
     }
@@ -939,14 +939,14 @@ var require_Stack = __commonJS({
 var require_defineProperty = __commonJS({
   "node_modules/lodash/_defineProperty.js"(exports, module) {
     var getNative = require_getNative();
-    var defineProperty = function() {
+    var defineProperty = (function() {
       try {
         var func = getNative(Object, "defineProperty");
         func({}, "", {});
         return func;
       } catch (e2) {
       }
-    }();
+    })();
     module.exports = defineProperty;
   }
 });
@@ -1088,7 +1088,7 @@ var require_baseCreate = __commonJS({
   "node_modules/lodash/_baseCreate.js"(exports, module) {
     var isObject2 = require_isObject();
     var objectCreate = Object.create;
-    var baseCreate = /* @__PURE__ */ function() {
+    var baseCreate = /* @__PURE__ */ (function() {
       function object() {
       }
       return function(proto) {
@@ -1103,7 +1103,7 @@ var require_baseCreate = __commonJS({
         object.prototype = void 0;
         return result;
       };
-    }();
+    })();
     module.exports = baseCreate;
   }
 });
@@ -1175,9 +1175,9 @@ var require_isArguments = __commonJS({
     var objectProto = Object.prototype;
     var hasOwnProperty = objectProto.hasOwnProperty;
     var propertyIsEnumerable = objectProto.propertyIsEnumerable;
-    var isArguments = baseIsArguments(/* @__PURE__ */ function() {
+    var isArguments = baseIsArguments(/* @__PURE__ */ (function() {
       return arguments;
-    }()) ? baseIsArguments : function(value) {
+    })()) ? baseIsArguments : function(value) {
       return isObjectLike(value) && hasOwnProperty.call(value, "callee") && !propertyIsEnumerable.call(value, "callee");
     };
     module.exports = isArguments;
@@ -1339,7 +1339,7 @@ var require_nodeUtil = __commonJS({
     var freeModule = freeExports && typeof module == "object" && module && !module.nodeType && module;
     var moduleExports = freeModule && freeModule.exports === freeExports;
     var freeProcess = moduleExports && freeGlobal.process;
-    var nodeUtil = function() {
+    var nodeUtil = (function() {
       try {
         var types = freeModule && freeModule.require && freeModule.require("util").types;
         if (types) {
@@ -1348,7 +1348,7 @@ var require_nodeUtil = __commonJS({
         return freeProcess && freeProcess.binding && freeProcess.binding("util");
       } catch (e2) {
       }
-    }();
+    })();
     module.exports = nodeUtil;
   }
 });
@@ -1879,8 +1879,8 @@ function getPriceValue(billingPrice) {
   const price = typeof billingPrice.priceDecimal === "string" ? Number(billingPrice.priceDecimal) : billingPrice.price;
   return price;
 }
-function getPlanPrice(plan, period = "month") {
-  const billingPrice = period === "year" ? plan.yearlyPrice : plan.monthlyPrice;
+function getPlanPrice(plan, period = "month", options2 = { useSelectedPeriod: true }) {
+  const billingPrice = options2.useSelectedPeriod ? period === "year" ? plan.yearlyPrice : plan.monthlyPrice : plan.yearlyPrice && !plan.monthlyPrice ? plan.yearlyPrice : plan.monthlyPrice;
   if (billingPrice) {
     return { ...billingPrice, price: getPriceValue(billingPrice) };
   }
@@ -3547,7 +3547,7 @@ function he(t2) {
   for (var n = [], o2 = 1; o2 < arguments.length; o2++) n[o2 - 1] = arguments[o2];
   return false ? new Error("An error occurred. See https://github.com/styled-components/styled-components/blob/main/packages/styled-components/src/utils/errors.md#".concat(t2, " for more information.").concat(n.length > 0 ? " Args: ".concat(n.join(", ")) : "")) : new Error(de.apply(void 0, __spreadArray([pe[t2]], n, false)).trim());
 }
-var fe = function() {
+var fe = (function() {
   function e2(e3) {
     this.groupSizes = new Uint32Array(512), this.length = 512, this.tag = e3;
   }
@@ -3573,7 +3573,7 @@ var fe = function() {
     for (var n = this.groupSizes[e3], o2 = this.indexOfGroup(e3), r2 = o2 + n, s2 = o2; s2 < r2; s2++) t2 += "".concat(this.tag.getRule(s2)).concat(g);
     return t2;
   }, e2;
-}();
+})();
 var me = 1 << 30;
 var ye = /* @__PURE__ */ new Map();
 var ve = /* @__PURE__ */ new Map();
@@ -3615,24 +3615,24 @@ function Ce() {
   return "undefined" != typeof __webpack_nonce__ ? __webpack_nonce__ : null;
 }
 var Ie = function(e2) {
-  var t2 = document.head, n = e2 || t2, o2 = document.createElement("style"), r2 = function(e3) {
+  var t2 = document.head, n = e2 || t2, o2 = document.createElement("style"), r2 = (function(e3) {
     var t3 = Array.from(e3.querySelectorAll("style[".concat(f, "]")));
     return t3[t3.length - 1];
-  }(n), s2 = void 0 !== r2 ? r2.nextSibling : null;
+  })(n), s2 = void 0 !== r2 ? r2.nextSibling : null;
   o2.setAttribute(f, m), o2.setAttribute(y, v);
   var i2 = Ce();
   return i2 && o2.setAttribute("nonce", i2), n.insertBefore(o2, s2), o2;
 };
-var Ae = function() {
+var Ae = (function() {
   function e2(e3) {
-    this.element = Ie(e3), this.element.appendChild(document.createTextNode("")), this.sheet = function(e4) {
+    this.element = Ie(e3), this.element.appendChild(document.createTextNode("")), this.sheet = (function(e4) {
       if (e4.sheet) return e4.sheet;
       for (var t2 = document.styleSheets, n = 0, o2 = t2.length; n < o2; n++) {
         var r2 = t2[n];
         if (r2.ownerNode === e4) return r2;
       }
       throw he(17);
-    }(this.element), this.length = 0;
+    })(this.element), this.length = 0;
   }
   return e2.prototype.insertRule = function(e3, t2) {
     try {
@@ -3646,8 +3646,8 @@ var Ae = function() {
     var t2 = this.sheet.cssRules[e3];
     return t2 && t2.cssText ? t2.cssText : "";
   }, e2;
-}();
-var Oe = function() {
+})();
+var Oe = (function() {
   function e2(e3) {
     this.element = Ie(e3), this.nodes = this.element.childNodes, this.length = 0;
   }
@@ -3662,8 +3662,8 @@ var Oe = function() {
   }, e2.prototype.getRule = function(e3) {
     return e3 < this.length ? this.nodes[e3].textContent : "";
   }, e2;
-}();
-var De = function() {
+})();
+var De = (function() {
   function e2(e3) {
     this.rules = [], this.length = 0;
   }
@@ -3674,19 +3674,19 @@ var De = function() {
   }, e2.prototype.getRule = function(e3) {
     return e3 < this.length ? this.rules[e3] : "";
   }, e2;
-}();
+})();
 var Re = S;
 var Te = { isServer: !S, useCSSOMInjection: !w };
-var ke = function() {
+var ke = (function() {
   function e2(e3, n, o2) {
     void 0 === e3 && (e3 = C), void 0 === n && (n = {});
     var r2 = this;
     this.options = __assign(__assign({}, Te), e3), this.gs = n, this.names = new Map(o2), this.server = !!e3.isServer, !this.server && S && Re && (Re = false, _e(this)), ue(this, function() {
-      return function(e4) {
+      return (function(e4) {
         for (var t2 = e4.getTag(), n2 = t2.length, o3 = "", r3 = function(n3) {
-          var r4 = function(e5) {
+          var r4 = (function(e5) {
             return ve.get(e5);
-          }(n3);
+          })(n3);
           if (void 0 === r4) return "continue";
           var s3 = e4.names.get(r4), i2 = t2.getGroup(n3);
           if (void 0 === s3 || !s3.size || 0 === i2.length) return "continue";
@@ -3696,7 +3696,7 @@ var ke = function() {
           }), o3 += "".concat(i2).concat(a2, '{content:"').concat(c2, '"}').concat(g);
         }, s2 = 0; s2 < n2; s2++) r3(s2);
         return o3;
-      }(r2);
+      })(r2);
     });
   }
   return e2.registerId = function(e3) {
@@ -3708,10 +3708,10 @@ var ke = function() {
   }, e2.prototype.allocateGSInstance = function(e3) {
     return this.gs[e3] = (this.gs[e3] || 0) + 1;
   }, e2.prototype.getTag = function() {
-    return this.tag || (this.tag = (e3 = function(e4) {
+    return this.tag || (this.tag = (e3 = (function(e4) {
       var t2 = e4.useCSSOMInjection, n = e4.target;
       return e4.isServer ? new De(n) : t2 ? new Ae(n) : new Oe(n);
-    }(this.options), new fe(e3)));
+    })(this.options), new fe(e3)));
     var e3;
   }, e2.prototype.hasNameForId = function(e3, t2) {
     return this.names.has(e3) && this.names.get(e3).has(t2);
@@ -3730,7 +3730,7 @@ var ke = function() {
   }, e2.prototype.clearTag = function() {
     this.tag = void 0;
   }, e2;
-}();
+})();
 var je = /&/g;
 var xe = /^\s*\/\/.*$/gm;
 function Ve(e2, t2) {
@@ -3783,7 +3783,7 @@ function Ye(e2) {
   }, [e2.shouldForwardProp, l2, u2]);
   return o.createElement($e.Provider, { value: d }, o.createElement(Le.Provider, { value: u2 }, e2.children));
 }
-var We = function() {
+var We = (function() {
   function e2(e3, t2) {
     var n = this;
     this.inject = function(e4, t3) {
@@ -3797,7 +3797,7 @@ var We = function() {
   return e2.prototype.getName = function(e3) {
     return void 0 === e3 && (e3 = ze), this.name + e3.hash;
   }, e2;
-}();
+})();
 var qe = function(e2) {
   return e2 >= "A" && e2 <= "Z";
 };
@@ -3841,7 +3841,7 @@ function Ze(e2) {
   return true;
 }
 var Ke = z(v);
-var Qe = function() {
+var Qe = (function() {
   function e2(e3, t2, n) {
     this.rules = e3, this.staticRulesId = "", this.isStatic = false, this.componentId = t2, this.baseHash = M(Ke, t2), this.baseStyle = n, ke.registerId(t2);
   }
@@ -3872,12 +3872,12 @@ var Qe = function() {
     }
     return o2;
   }, e2;
-}();
+})();
 var et = o.createContext(void 0);
 var tt = et.Consumer;
 function ot(e2) {
   var n = o.useContext(et), r2 = i(function() {
-    return function(e3, n2) {
+    return (function(e3, n2) {
       if (!e3) throw he(14);
       if (re(e3)) {
         var o2 = e3(n2);
@@ -3886,21 +3886,21 @@ function ot(e2) {
       }
       if (Array.isArray(e3) || "object" != typeof e3) throw he(8);
       return n2 ? __assign(__assign({}, n2), e3) : e3;
-    }(e2.theme, n);
+    })(e2.theme, n);
   }, [e2.theme, n]);
   return e2.children ? o.createElement(et.Provider, { value: r2 }, e2.children) : null;
 }
 var rt = {};
 var st = /* @__PURE__ */ new Set();
 function it(e2, r2, s2) {
-  var i2 = se(e2), a2 = e2, c2 = !L(e2), p2 = r2.attrs, d = void 0 === p2 ? _ : p2, h = r2.componentId, f2 = void 0 === h ? function(e3, t2) {
+  var i2 = se(e2), a2 = e2, c2 = !L(e2), p2 = r2.attrs, d = void 0 === p2 ? _ : p2, h = r2.componentId, f2 = void 0 === h ? (function(e3, t2) {
     var n = "string" != typeof e3 ? "sc" : R(e3);
     rt[n] = (rt[n] || 0) + 1;
     var o2 = "".concat(n, "-").concat($(v + n + rt[n]));
     return t2 ? "".concat(t2, "-").concat(o2) : o2;
-  }(r2.displayName, r2.parentComponentId) : h, m2 = r2.displayName, y2 = void 0 === m2 ? function(e3) {
+  })(r2.displayName, r2.parentComponentId) : h, m2 = r2.displayName, y2 = void 0 === m2 ? (function(e3) {
     return L(e3) ? "styled.".concat(e3) : "Styled(".concat(B(e3), ")");
-  }(e2) : m2, g2 = r2.displayName && r2.componentId ? "".concat(R(r2.displayName), "-").concat(r2.componentId) : r2.componentId || f2, S2 = i2 && a2.attrs ? a2.attrs.concat(d).filter(Boolean) : d, w2 = r2.shouldForwardProp;
+  })(e2) : m2, g2 = r2.displayName && r2.componentId ? "".concat(R(r2.displayName), "-").concat(r2.componentId) : r2.componentId || f2, S2 = i2 && a2.attrs ? a2.attrs.concat(d).filter(Boolean) : d, w2 = r2.shouldForwardProp;
   if (i2 && a2.shouldForwardProp) {
     var b2 = a2.shouldForwardProp;
     if (r2.shouldForwardProp) {
@@ -3912,37 +3912,37 @@ function it(e2, r2, s2) {
   }
   var N2 = new Qe(s2, g2, i2 ? a2.componentStyle : void 0);
   function O2(e3, r3) {
-    return function(e4, r4, s3) {
+    return (function(e4, r4, s3) {
       var i3 = e4.attrs, a3 = e4.componentStyle, c3 = e4.defaultProps, p3 = e4.foldedComponentIds, d2 = e4.styledComponentId, h2 = e4.target, f3 = o.useContext(et), m3 = Ge(), y3 = e4.shouldForwardProp || m3.shouldForwardProp;
       l(d2);
-      var v2 = I(r4, f3, c3) || C, g3 = function(e5, n, o2) {
+      var v2 = I(r4, f3, c3) || C, g3 = (function(e5, n, o2) {
         for (var r5, s4 = __assign(__assign({}, n), { className: void 0, theme: o2 }), i4 = 0; i4 < e5.length; i4 += 1) {
           var a4 = re(r5 = e5[i4]) ? r5(s4) : r5;
           for (var c4 in a4) s4[c4] = "className" === c4 ? ie(s4[c4], a4[c4]) : "style" === c4 ? __assign(__assign({}, s4[c4]), a4[c4]) : a4[c4];
         }
         return n.className && (s4.className = ie(s4.className, n.className)), s4;
-      }(i3, r4, v2), S3 = g3.as || h2, w3 = {};
+      })(i3, r4, v2), S3 = g3.as || h2, w3 = {};
       for (var b3 in g3) void 0 === g3[b3] || "$" === b3[0] || "as" === b3 || "theme" === b3 && g3.theme === v2 || ("forwardedAs" === b3 ? w3.as = g3.forwardedAs : y3 && !y3(b3, S3) || (w3[b3] = g3[b3], y3 || false || isPropValid(b3) || st.has(b3) || !A.has(S3) || (st.add(b3), console.warn('styled-components: it looks like an unknown prop "'.concat(b3, '" 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.)')))));
-      var E3 = function(e5, t2) {
+      var E3 = (function(e5, t2) {
         var n = Ge(), o2 = e5.generateAndInjectStyles(t2, n.styleSheet, n.stylis);
         return l(o2), o2;
-      }(a3, g3);
+      })(a3, g3);
       e4.warnTooManyClasses && e4.warnTooManyClasses(E3);
       var N3 = ie(p3, d2);
       return E3 && (N3 += " " + E3), g3.className && (N3 += " " + g3.className), w3[L(S3) && !A.has(S3) ? "class" : "className"] = N3, s3 && (w3.ref = s3), u(S3, w3);
-    }(D2, e3, r3);
+    })(D2, e3, r3);
   }
   O2.displayName = y2;
   var D2 = o.forwardRef(O2);
   return D2.attrs = S2, D2.componentStyle = N2, D2.displayName = y2, D2.shouldForwardProp = w2, D2.foldedComponentIds = i2 ? ie(a2.foldedComponentIds, a2.styledComponentId) : "", D2.styledComponentId = g2, D2.target = i2 ? a2.target : e2, Object.defineProperty(D2, "defaultProps", { get: function() {
     return this._foldedDefaultProps;
   }, set: function(e3) {
-    this._foldedDefaultProps = i2 ? function(e4) {
+    this._foldedDefaultProps = i2 ? (function(e4) {
       for (var t2 = [], n = 1; n < arguments.length; n++) t2[n - 1] = arguments[n];
       for (var o2 = 0, r3 = t2; o2 < r3.length; o2++) le(e4, r3[o2], true);
       return e4;
-    }({}, a2.defaultProps, e3) : e3;
-  } }), P(y2, g2), D2.warnTooManyClasses = /* @__PURE__ */ function(e3, t2) {
+    })({}, a2.defaultProps, e3) : e3;
+  } }), P(y2, g2), D2.warnTooManyClasses = /* @__PURE__ */ (function(e3, t2) {
     var n = {}, o2 = false;
     return function(r3) {
       if (!o2 && (n[r3] = true, Object.keys(n).length >= 200)) {
@@ -3950,7 +3950,7 @@ function it(e2, r2, s2) {
         console.warn("Over ".concat(200, " classes were generated for component ").concat(e3).concat(s3, ".\n") + "Consider using the attrs method, together with a style object for frequently changed styles.\nExample:\n  const Component = styled.div.attrs(props => ({\n    style: {\n      background: props.background,\n    },\n  }))`width: 100%;`\n\n  <Component />"), o2 = true, n = {};
       }
     };
-  }(y2, g2), ue(D2, function() {
+  })(y2, g2), ue(D2, function() {
     return ".".concat(D2.styledComponentId);
   }), c2 && oe(D2, e2, { attrs: true, componentStyle: true, displayName: true, foldedComponentIds: true, shouldForwardProp: true, styledComponentId: true, target: true }), D2;
 }
@@ -3986,7 +3986,7 @@ var dt = pt;
 A.forEach(function(e2) {
   dt[e2] = pt(e2);
 });
-var ht = function() {
+var ht = (function() {
   function e2(e3, t2) {
     this.rules = e3, this.componentId = t2, this.isStatic = Ze(e3), ke.registerId(this.componentId + 1);
   }
@@ -3998,7 +3998,7 @@ var ht = function() {
   }, e2.prototype.renderStyles = function(e3, t2, n, o2) {
     e3 > 2 && ke.registerId(this.componentId + e3), this.removeStyles(e3, n), this.createStyles(e3, t2, n, o2);
   }, e2;
-}();
+})();
 function ft(n) {
   for (var r2 = [], s2 = 1; s2 < arguments.length; s2++) r2[s2 - 1] = arguments[s2];
   var i2 = lt.apply(void 0, __spreadArray([n], r2, false)), a2 = "sc-global-".concat($(JSON.stringify(i2))), c2 = new ht(i2, a2);
@@ -4028,7 +4028,7 @@ function mt(t2) {
   var r2 = ae(lt.apply(void 0, __spreadArray([t2], n, false))), s2 = $(r2);
   return new We(s2, r2);
 }
-var vt = function() {
+var vt = (function() {
   function e2() {
     var e3 = this;
     this._emitSheetCSS = function() {
@@ -4056,7 +4056,7 @@ var vt = function() {
   }, e2.prototype.interleaveWithNodeStream = function(e3) {
     throw he(3);
   }, e2;
-}();
+})();
 "undefined" != typeof navigator && "ReactNative" === navigator.product && console.warn("It looks like you've imported 'styled-components' on React Native.\nPerhaps you're looking to import 'styled-components/native'?\nRead more about this at https://www.styled-components.com/docs/basics#react-native");
 var St = "__sc-".concat(f, "__");
 "undefined" != typeof window && (window[St] || (window[St] = 0), 1 === window[St] && console.warn("It looks like there are several instances of 'styled-components' initialized in this application. This may cause dynamic styles to not render properly, errors during the rehydration process, a missing theme prop, and makes your application bigger without good reason.\n\nSee https://s-c.sh/2BAXzed for more info."), window[St] += 1);
@@ -4079,7 +4079,7 @@ attr.rem = function propAsRem(key, value) {
 };
 
 // src/hooks/useAvailablePlans.ts
-function useAvailablePlans(activePeriod) {
+function useAvailablePlans(activePeriod, options2 = { useSelectedPeriod: true }) {
   const { data, settings } = useEmbed();
   const getAvailablePeriods = useCallback(() => {
     const periods = [];
@@ -4093,12 +4093,15 @@ function useAvailablePlans(activePeriod) {
   }, [data?.activePlans, data?.activeAddOns]);
   const getActivePlans = useCallback(
     (plans) => {
-      const activePlans = settings.mode === "edit" ? plans.slice() : plans.filter(
-        (plan) => activePeriod === "month" && plan.monthlyPrice || activePeriod === "year" && plan.yearlyPrice || plan.chargeType === ChargeType.oneTime
-      );
+      const activePlans = settings.mode === "edit" ? plans.slice() : plans.filter((plan) => {
+        if (options2.useSelectedPeriod) {
+          return activePeriod === "month" && plan.monthlyPrice || activePeriod === "year" && plan.yearlyPrice || plan.chargeType === ChargeType.oneTime;
+        }
+        return plan.monthlyPrice || plan.yearlyPrice || plan.chargeType === ChargeType.oneTime;
+      });
       return activePlans.map((plan) => ({ ...plan, isSelected: false }));
     },
-    [activePeriod, settings.mode]
+    [activePeriod, options2.useSelectedPeriod, settings.mode]
   );
   return useMemo(() => {
     return {
@@ -4200,6 +4203,7 @@ var stub = () => {
 var initialContext = {
   ...initialState,
   hydratePublic: stub,
+  hydrate: stub,
   hydrateComponent: stub,
   hydrateExternal: stub,
   getUpcomingInvoice: stub,
@@ -4648,6 +4652,26 @@ var postProcessor = {
     return value;
   }
 };
+var PATH_KEY = Symbol("i18next/PATH_KEY");
+function createProxy() {
+  const state = [];
+  const handler = /* @__PURE__ */ Object.create(null);
+  let proxy;
+  handler.get = (target, key) => {
+    proxy?.revoke?.();
+    if (key === PATH_KEY) return state;
+    state.push(key);
+    proxy = Proxy.revocable(target, handler);
+    return proxy.proxy;
+  };
+  return Proxy.revocable(/* @__PURE__ */ Object.create(null), handler).proxy;
+}
+function keysFromSelector(selector, opts) {
+  const {
+    [PATH_KEY]: path
+  } = selector(createProxy());
+  return path.join(opts?.keySeparator ?? ".");
+}
 var checkedLoadedFor = {};
 var shouldHandleAsObject = (res) => !isString(res) && typeof res !== "boolean" && typeof res !== "number";
 var Translator = class _Translator extends EventEmitter {
@@ -4709,6 +4733,7 @@ var Translator = class _Translator extends EventEmitter {
     };
     if (!opt) opt = {};
     if (keys == null) return "";
+    if (typeof keys === "function") keys = keysFromSelector(keys, opt);
     if (!Array.isArray(keys)) keys = [String(keys)];
     const returnDetails = opt.returnDetails !== void 0 ? opt.returnDetails : this.options.returnDetails;
     const keySeparator = opt.keySeparator !== void 0 ? opt.keySeparator : this.options.keySeparator;
@@ -4986,22 +5011,22 @@ var Translator = class _Translator extends EventEmitter {
             const zeroSuffix = `${this.options.pluralSeparator}zero`;
             const ordinalPrefix = `${this.options.pluralSeparator}ordinal${this.options.pluralSeparator}`;
             if (needsPluralHandling) {
-              finalKeys.push(key + pluralSuffix);
               if (opt.ordinal && pluralSuffix.indexOf(ordinalPrefix) === 0) {
                 finalKeys.push(key + pluralSuffix.replace(ordinalPrefix, this.options.pluralSeparator));
               }
+              finalKeys.push(key + pluralSuffix);
               if (needsZeroSuffixLookup) {
                 finalKeys.push(key + zeroSuffix);
               }
             }
             if (needsContextHandling) {
-              const contextKey = `${key}${this.options.contextSeparator}${opt.context}`;
+              const contextKey = `${key}${this.options.contextSeparator || "_"}${opt.context}`;
               finalKeys.push(contextKey);
               if (needsPluralHandling) {
-                finalKeys.push(contextKey + pluralSuffix);
                 if (opt.ordinal && pluralSuffix.indexOf(ordinalPrefix) === 0) {
                   finalKeys.push(contextKey + pluralSuffix.replace(ordinalPrefix, this.options.pluralSeparator));
                 }
+                finalKeys.push(contextKey + pluralSuffix);
                 if (needsZeroSuffixLookup) {
                   finalKeys.push(contextKey + zeroSuffix);
                 }
@@ -5962,7 +5987,7 @@ var I18n = class _I18n extends EventEmitter {
       });
       const usingLegacyFormatFunction = this.options.interpolation.format && this.options.interpolation.format !== defOpts.interpolation.format;
       if (usingLegacyFormatFunction) {
-        this.logger.warn(`init: you are still using the legacy format function, please use the new approach: https://www.i18next.com/translation-function/formatting`);
+        this.logger.deprecate(`init: you are still using the legacy format function, please use the new approach: https://www.i18next.com/translation-function/formatting`);
       }
       if (formatter && (!this.options.interpolation.format || this.options.interpolation.format === defOpts.interpolation.format)) {
         s2.formatter = createClassOnDemand(formatter);
@@ -6657,6 +6682,7 @@ var en_default = {
     "Add new payment method": "Add new payment method",
     "Add Seats": "Add More",
     "Add-ons": "Add-ons",
+    "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.",
@@ -6727,6 +6753,7 @@ var en_default = {
     "Powered by": "Powered by",
     "Price by unit based on final tier reached.": "Price by unit based on final tier reached.",
     Proration: "Proration",
+    "Quantity to pay for in advance": "Quantity to pay for in advance",
     "Remove add-on": "Remove add-on",
     Resets: "Resets {{date}}",
     "Save payment method": "Save payment method",
@@ -6741,6 +6768,7 @@ var en_default = {
     "Select payment method": "Select payment method",
     "Select plan": "Select plan",
     "Select quantity": "Select quantity",
+    "Select quantities for add-ons": "Select quantities for add-ons",
     Selected: "Selected",
     "Selected plan or associated price is missing.": "Selected plan or associated price is missing.",
     "Session expired. Please refresh and try again.": "Session expired. Please refresh and try again.",
@@ -7787,6 +7815,33 @@ function CheckoutUnsubscribeResponseFromJSONTyped(json, ignoreDiscriminator) {
   };
 }
 
+// src/api/checkoutexternal/models/CurrencyBalance.ts
+function CurrencyBalanceFromJSON(json) {
+  return CurrencyBalanceFromJSONTyped(json, false);
+}
+function CurrencyBalanceFromJSONTyped(json, ignoreDiscriminator) {
+  if (json == null) {
+    return json;
+  }
+  return {
+    balance: json["balance"],
+    currency: json["currency"]
+  };
+}
+
+// src/api/checkoutexternal/models/CompanyCustomerBalance.ts
+function CompanyCustomerBalanceFromJSON(json) {
+  return CompanyCustomerBalanceFromJSONTyped(json, false);
+}
+function CompanyCustomerBalanceFromJSONTyped(json, ignoreDiscriminator) {
+  if (json == null) {
+    return json;
+  }
+  return {
+    balances: json["balances"].map(CurrencyBalanceFromJSON)
+  };
+}
+
 // src/api/checkoutexternal/models/CompanyEventPeriodMetricsResponseData.ts
 function CompanyEventPeriodMetricsResponseDataFromJSON(json) {
   return CompanyEventPeriodMetricsResponseDataFromJSONTyped(json, false);
@@ -8047,12 +8102,12 @@ function EventSummaryResponseDataFromJSONTyped(json, ignoreDiscriminator) {
     return json;
   }
   return {
-    companyCount: json["company_count"] == null ? void 0 : json["company_count"],
+    companyCount: json["company_count"],
     environmentId: json["environment_id"],
     eventCount: json["event_count"],
     eventSubtype: json["event_subtype"],
     lastSeenAt: json["last_seen_at"] == null ? void 0 : new Date(json["last_seen_at"]),
-    userCount: json["user_count"] == null ? void 0 : json["user_count"]
+    userCount: json["user_count"]
   };
 }
 
@@ -8617,6 +8672,7 @@ 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"]),
+    showPeriodToggle: json["show_period_toggle"],
     stripeEmbed: json["stripe_embed"] == null ? void 0 : StripeEmbedInfoFromJSON(json["stripe_embed"]),
     subscription: json["subscription"] == null ? void 0 : CompanySubscriptionResponseDataFromJSON(json["subscription"]),
     trialPaymentMethodRequired: json["trial_payment_method_required"] == null ? void 0 : json["trial_payment_method_required"],
@@ -8668,6 +8724,20 @@ function DeletePaymentMethodResponseFromJSONTyped(json, ignoreDiscriminator) {
   };
 }
 
+// src/api/checkoutexternal/models/FetchCustomerBalanceResponse.ts
+function FetchCustomerBalanceResponseFromJSON(json) {
+  return FetchCustomerBalanceResponseFromJSONTyped(json, false);
+}
+function FetchCustomerBalanceResponseFromJSONTyped(json, ignoreDiscriminator) {
+  if (json == null) {
+    return json;
+  }
+  return {
+    data: CompanyCustomerBalanceFromJSON(json["data"]),
+    params: json["params"]
+  };
+}
+
 // src/api/checkoutexternal/models/GetSetupIntentResponse.ts
 function GetSetupIntentResponseFromJSON(json) {
   return GetSetupIntentResponseFromJSONTyped(json, false);
@@ -8696,6 +8766,20 @@ function HydrateComponentResponseFromJSONTyped(json, ignoreDiscriminator) {
   };
 }
 
+// src/api/checkoutexternal/models/HydrateResponse.ts
+function HydrateResponseFromJSON(json) {
+  return HydrateResponseFromJSONTyped(json, false);
+}
+function HydrateResponseFromJSONTyped(json, ignoreDiscriminator) {
+  if (json == null) {
+    return json;
+  }
+  return {
+    data: ComponentHydrateResponseDataFromJSON(json["data"]),
+    params: json["params"]
+  };
+}
+
 // src/api/checkoutexternal/models/HydrateUpcomingInvoiceResponse.ts
 function HydrateUpcomingInvoiceResponseFromJSON(json) {
   return HydrateUpcomingInvoiceResponseFromJSONTyped(json, false);
@@ -8991,6 +9075,38 @@ var CheckoutexternalApi = class extends BaseAPI {
     );
     return await response.value();
   }
+  /**
+   * Fetch customer balance
+   */
+  async fetchCustomerBalanceRaw(initOverrides) {
+    const queryParameters = {};
+    const headerParameters = {};
+    if (this.configuration && this.configuration.apiKey) {
+      headerParameters["X-Schematic-Api-Key"] = await this.configuration.apiKey(
+        "X-Schematic-Api-Key"
+      );
+    }
+    const response = await this.request(
+      {
+        path: `/checkout/balance`,
+        method: "GET",
+        headers: headerParameters,
+        query: queryParameters
+      },
+      initOverrides
+    );
+    return new JSONApiResponse(
+      response,
+      (jsonValue) => FetchCustomerBalanceResponseFromJSON(jsonValue)
+    );
+  }
+  /**
+   * Fetch customer balance
+   */
+  async fetchCustomerBalance(initOverrides) {
+    const response = await this.fetchCustomerBalanceRaw(initOverrides);
+    return await response.value();
+  }
   /**
    * Get setup intent
    */
@@ -9035,6 +9151,38 @@ var CheckoutexternalApi = class extends BaseAPI {
     );
     return await response.value();
   }
+  /**
+   * Hydrate
+   */
+  async hydrateRaw(initOverrides) {
+    const queryParameters = {};
+    const headerParameters = {};
+    if (this.configuration && this.configuration.apiKey) {
+      headerParameters["X-Schematic-Api-Key"] = await this.configuration.apiKey(
+        "X-Schematic-Api-Key"
+      );
+    }
+    const response = await this.request(
+      {
+        path: `/components/hydrate`,
+        method: "GET",
+        headers: headerParameters,
+        query: queryParameters
+      },
+      initOverrides
+    );
+    return new JSONApiResponse(
+      response,
+      (jsonValue) => HydrateResponseFromJSON(jsonValue)
+    );
+  }
+  /**
+   * Hydrate
+   */
+  async hydrate(initOverrides) {
+    const response = await this.hydrateRaw(initOverrides);
+    return await response.value();
+  }
   /**
    * Hydrate component
    */
@@ -9725,12 +9873,12 @@ function EventSummaryResponseDataFromJSONTyped3(json, ignoreDiscriminator) {
     return json;
   }
   return {
-    companyCount: json["company_count"] == null ? void 0 : json["company_count"],
+    companyCount: json["company_count"],
     environmentId: json["environment_id"],
     eventCount: json["event_count"],
     eventSubtype: json["event_subtype"],
     lastSeenAt: json["last_seen_at"] == null ? void 0 : new Date(json["last_seen_at"]),
-    userCount: json["user_count"] == null ? void 0 : json["user_count"]
+    userCount: json["user_count"]
   };
 }
 
@@ -9931,6 +10079,32 @@ function FeatureDetailResponseDataFromJSONTyped6(json, ignoreDiscriminator) {
   };
 }
 
+// src/api/componentspublic/models/PlanCreditGrantView.ts
+function PlanCreditGrantViewFromJSON2(json) {
+  return PlanCreditGrantViewFromJSONTyped3(json, false);
+}
+function PlanCreditGrantViewFromJSONTyped3(json, ignoreDiscriminator) {
+  if (json == null) {
+    return json;
+  }
+  return {
+    createdAt: new Date(json["created_at"]),
+    creditAmount: json["credit_amount"],
+    creditDescription: json["credit_description"],
+    creditIcon: json["credit_icon"] == null ? void 0 : json["credit_icon"],
+    creditId: json["credit_id"],
+    creditName: json["credit_name"],
+    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"],
+    singularName: json["singular_name"] == null ? void 0 : json["singular_name"],
+    updatedAt: new Date(json["updated_at"])
+  };
+}
+
 // src/api/componentspublic/models/PlanResponseData.ts
 function PlanResponseDataFromJSON2(json) {
   return PlanResponseDataFromJSONTyped4(json, false);
@@ -10014,6 +10188,9 @@ function PlanViewPublicResponseDataFromJSONTyped(json, ignoreDiscriminator) {
     ),
     icon: json["icon"],
     id: json["id"],
+    includedCreditGrants: json["included_credit_grants"].map(
+      PlanCreditGrantViewFromJSON2
+    ),
     isCustom: json["is_custom"],
     isDefault: json["is_default"],
     isFree: json["is_free"],
@@ -10125,6 +10302,7 @@ var reducer = (state, action) => {
       };
     }
     case "HYDRATE_PUBLIC":
+    case "HYDRATE":
     case "HYDRATE_COMPONENT":
     case "HYDRATE_EXTERNAL": {
       return {
@@ -10243,7 +10421,7 @@ var EmbedProvider = ({
   });
   const customHeaders = useMemo3(
     () => ({
-      "X-Schematic-Components-Version": "1.2.0",
+      "X-Schematic-Components-Version": "1.4.0",
       "X-Schematic-Session-ID": sessionIdRef.current
     }),
     []
@@ -10279,6 +10457,28 @@ var EmbedProvider = ({
     () => (0, import_debounce.default)(hydratePublic, FETCH_DEBOUNCE_TIMEOUT, debounceOptions),
     [hydratePublic]
   );
+  const hydrate = useCallback3(async () => {
+    dispatch({ type: "HYDRATE_STARTED" });
+    try {
+      const response = await api.checkout?.hydrate();
+      if (response) {
+        dispatch({
+          type: "HYDRATE",
+          data: response.data
+        });
+      }
+      return response?.data;
+    } catch (err2) {
+      dispatch({
+        type: "ERROR",
+        error: isError(err2) ? err2 : ERROR_UNKNOWN
+      });
+    }
+  }, [api.checkout]);
+  const debouncedHydrate = useMemo3(
+    () => (0, import_debounce.default)(hydrate, FETCH_DEBOUNCE_TIMEOUT, debounceOptions),
+    [hydrate]
+  );
   const hydrateComponent = useCallback3(
     async (id) => {
       dispatch({ type: "HYDRATE_STARTED" });
@@ -10561,6 +10761,7 @@ var EmbedProvider = ({
         layout: state.layout,
         checkoutState: state.checkoutState,
         hydratePublic: debouncedHydratePublic,
+        hydrate: debouncedHydrate,
         hydrateComponent: debouncedHydrateComponent,
         hydrateExternal: debouncedHydrateExternal,
         createSetupIntent: debouncedCreateSetupIntent,
@@ -12097,6 +12298,47 @@ var StageButton = ({
     );
   }
   if (checkoutStage === "addons") {
+    const hasAddonsUsageStage = checkoutStages?.some(
+      (stage) => stage.id === "addonsUsage"
+    );
+    const hasCreditsStage = checkoutStages?.some(
+      (stage) => stage.id === "credits"
+    );
+    if (!isPaymentMethodRequired && !hasAddonsUsageStage && !hasCreditsStage) {
+      return /* @__PURE__ */ jsx12(NoPaymentRequired, {});
+    }
+    return /* @__PURE__ */ jsx12(
+      Button,
+      {
+        type: "button",
+        disabled: isDisabled,
+        onClick: async () => {
+          setCheckoutStage?.(
+            hasAddonsUsageStage ? "addonsUsage" : hasCreditsStage ? "credits" : "checkout"
+          );
+        },
+        $isLoading: isLoading,
+        $fullWidth: true,
+        children: /* @__PURE__ */ jsxs8(
+          Flex,
+          {
+            $gap: "0.5rem",
+            $justifyContent: "center",
+            $alignItems: "center",
+            $padding: "0 1rem",
+            children: [
+              t2("Next"),
+              ":",
+              " ",
+              hasAddonsUsageStage ? t2("Add-ons Quantity") : hasCreditsStage ? t2("Credits") : t2("Checkout"),
+              /* @__PURE__ */ jsx12(Icon3, { name: "arrow-right" })
+            ]
+          }
+        )
+      }
+    );
+  }
+  if (checkoutStage === "addonsUsage") {
     if (!isPaymentMethodRequired && !checkoutStages?.some((stage) => stage.id === "credits")) {
       return /* @__PURE__ */ jsx12(NoPaymentRequired, {});
     }
@@ -12992,6 +13234,22 @@ var AddOns = ({ addOns, toggle, isLoading, period }) => {
         const { price, currency } = getAddOnPrice(addOn, period) || {};
         const isAddOnValid = isHydratedPlan(addOn) && addOn.valid;
         const isAddOnCurrent = isHydratedPlan(addOn) && addOn.current;
+        const overageEntitlement = addOn.entitlements?.find(
+          (entitlement) => entitlement.priceBehavior === "overage" /* Overage */
+        );
+        let overageInfo = null;
+        if (overageEntitlement) {
+          const priceData = period === "year" ? overageEntitlement.meteredYearlyPrice : overageEntitlement.meteredMonthlyPrice;
+          if (priceData?.priceTier && priceData.priceTier.length >= 2) {
+            const overageTier = priceData.priceTier[priceData.priceTier.length - 1];
+            overageInfo = {
+              softLimit: overageEntitlement.softLimit,
+              perUnitPrice: overageTier.perUnitPriceDecimal ? Number(overageTier.perUnitPriceDecimal) : overageTier.perUnitPrice || 0,
+              currency: priceData.currency || currency,
+              featureName: overageEntitlement.feature?.name
+            };
+          }
+        }
         return /* @__PURE__ */ jsxs10(
           Flex,
           {
@@ -13011,19 +13269,34 @@ var AddOns = ({ addOns, toggle, isLoading, period }) => {
               /* @__PURE__ */ jsxs10(Flex, { $flexDirection: "column", $gap: "0.75rem", children: [
                 /* @__PURE__ */ jsx14(Box, { children: /* @__PURE__ */ jsx14(Text, { display: "heading3", children: addOn.name }) }),
                 addOn.description && /* @__PURE__ */ jsx14(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ jsx14(Text, { children: addOn.description }) }),
-                (addOn[periodKey] || addOn.chargeType === ChargeType.oneTime) && /* @__PURE__ */ jsxs10(Box, { children: [
-                  /* @__PURE__ */ jsx14(Text, { display: "heading2", children: formatCurrency(price ?? 0, currency) }),
-                  /* @__PURE__ */ jsx14(
-                    Text,
-                    {
-                      display: "heading2",
-                      $size: 16 / 30 * settings.theme.typography.heading2.fontSize,
-                      children: addOn.chargeType === ChargeType.oneTime ? /* @__PURE__ */ jsxs10(Fragment5, { children: [
-                        " ",
-                        t2("one time")
-                      ] }) : `/${period}`
-                    }
-                  )
+                (addOn[periodKey] || addOn.chargeType === ChargeType.oneTime) && /* @__PURE__ */ jsxs10(Flex, { $flexDirection: "column", $gap: "0.25rem", children: [
+                  /* @__PURE__ */ jsxs10(Box, { children: [
+                    /* @__PURE__ */ jsx14(Text, { display: "heading2", children: formatCurrency(price ?? 0, currency) }),
+                    /* @__PURE__ */ jsx14(
+                      Text,
+                      {
+                        display: "heading2",
+                        $size: 16 / 30 * settings.theme.typography.heading2.fontSize,
+                        children: addOn.chargeType === ChargeType.oneTime ? /* @__PURE__ */ jsxs10(Fragment5, { children: [
+                          " ",
+                          t2("one time")
+                        ] }) : `/${period}`
+                      }
+                    )
+                  ] }),
+                  overageInfo && overageInfo.softLimit && /* @__PURE__ */ jsx14(Box, { children: /* @__PURE__ */ jsxs10(Text, { $size: 0.875, style: { opacity: 0.8 }, children: [
+                    overageInfo.softLimit,
+                    " ",
+                    overageInfo.featureName || "units",
+                    " included, then",
+                    " ",
+                    formatCurrency(
+                      overageInfo.perUnitPrice,
+                      overageInfo.currency
+                    ),
+                    "/",
+                    overageInfo.featureName?.toLowerCase() || "unit"
+                  ] }) })
                 ] }),
                 isAddOnCurrent && /* @__PURE__ */ jsx14(
                   Flex,
@@ -13444,7 +13717,8 @@ var Plan = ({
   selectedPlan,
   period,
   selectPlan,
-  shouldTrial
+  shouldTrial,
+  showPeriodToggle
 }) => {
   const { t: t2 } = useTranslation();
   const { data, settings } = useEmbed();
@@ -13483,8 +13757,9 @@ var Plan = ({
       $gap: "1rem",
       $flexGrow: 1,
       children: plans.map((plan, planIndex) => {
-        const { price: planPrice, currency: planCurrency } = getPlanPrice(plan, period) || {};
-        const credits = isHydratedPlan(plan) ? groupPlanCreditGrants(plan.includedCreditGrants) : [];
+        const planPeriod = showPeriodToggle ? period : plan.yearlyPrice && !plan.monthlyPrice ? "year" /* Year */ : "month" /* Month */;
+        const { price: planPrice, currency: planCurrency } = getPlanPrice(plan, planPeriod) || {};
+        const credits = groupPlanCreditGrants(plan.includedCreditGrants);
         const hasUsageBasedEntitlements = plan.entitlements.some(
           (entitlement) => !!entitlement.priceBehavior
         );
@@ -13543,7 +13818,7 @@ var Plan = ({
                           $size: 16 / 30 * settings.theme.typography.heading2.fontSize,
                           children: [
                             "/",
-                            period
+                            planPeriod
                           ]
                         }
                       )
@@ -13639,7 +13914,7 @@ var Plan = ({
                           priceTier: entitlementPriceTiers,
                           currency: entitlementCurrency,
                           packageSize: entitlementPackageSize = 1
-                        } = getEntitlementPrice(entitlement, period) || {};
+                        } = getEntitlementPrice(entitlement, planPeriod) || {};
                         const metricPeriodName = getMetricPeriodName(entitlement);
                         return /* @__PURE__ */ jsx18(
                           Flex,
@@ -13685,13 +13960,13 @@ var Plan = ({
                                         " ",
                                         t2("per"),
                                         " ",
-                                        period
+                                        planPeriod
                                       ] })
                                     ] }) : entitlement.priceBehavior === "tier" /* Tiered */ ? /* @__PURE__ */ jsx18(
                                       TieredPricingDetails,
                                       {
                                         entitlement,
-                                        period
+                                        period: planPeriod
                                       }
                                     ) : entitlement.priceBehavior === "credit_burndown" /* Credit */ && entitlement.valueCredit ? /* @__PURE__ */ jsxs14(Fragment8, { children: [
                                       entitlement.consumptionRate,
@@ -13748,7 +14023,7 @@ var Plan = ({
                                           ),
                                           entitlement.feature.featureType === "trait" /* Trait */ && /* @__PURE__ */ jsxs14(Fragment8, { children: [
                                             "/",
-                                            shortenPeriod(period)
+                                            shortenPeriod(planPeriod)
                                           ] })
                                         ]
                                       }
@@ -13757,7 +14032,7 @@ var Plan = ({
                                         PricingTiersTooltip,
                                         {
                                           feature: entitlement.feature,
-                                          period,
+                                          period: planPeriod,
                                           currency: entitlementCurrency,
                                           priceTiers: entitlementPriceTiers
                                         }
@@ -14014,26 +14289,32 @@ var CheckoutDialog = ({ top = 0 }) => {
     addOns: availableAddOns,
     periods: availablePeriods
   } = useAvailablePlans(planPeriod);
-  const { currentPlanId, currentEntitlements, trialPaymentMethodRequired } = useMemo9(() => {
+  const {
+    currentPlanId,
+    currentEntitlements,
+    showPeriodToggle,
+    trialPaymentMethodRequired
+  } = useMemo9(() => {
     if (isCheckoutData(data)) {
       return {
         currentPlanId: data.company?.plan?.id,
         currentEntitlements: data.featureUsage ? data.featureUsage.features : [],
+        showPeriodToggle: data.showPeriodToggle,
         trialPaymentMethodRequired: data.trialPaymentMethodRequired === true
       };
     }
     return {
       currentPlanId: void 0,
       currentEntitlements: [],
+      showPeriodToggle: true,
       trialPaymentMethodRequired: false
     };
   }, [data]);
   const [selectedPlan, setSelectedPlan] = useState9(
     () => {
-      const currentSelectedPlan = availablePlans.find(
+      return availablePlans.find(
         (plan) => checkoutState?.planId ? plan.id === checkoutState.planId : isHydratedPlan(plan) && plan.current
       );
-      return currentSelectedPlan;
     }
   );
   const [shouldTrial, setShouldTrial] = useState9(false);
@@ -14066,6 +14347,23 @@ var CheckoutDialog = ({ top = 0 }) => {
       []
     )
   );
+  const [addOnUsageBasedEntitlements, setAddOnUsageBasedEntitlements] = useState9(() => {
+    if (!isCheckoutData(data)) return [];
+    const currentAddOns = data.company?.addOns || [];
+    return currentAddOns.flatMap((currentAddOn) => {
+      const availableAddOn = availableAddOns.find(
+        (available) => available.id === currentAddOn.id
+      );
+      if (!availableAddOn) return [];
+      return availableAddOn.entitlements.reduce(
+        createActiveUsageBasedEntitlementsReducer(
+          currentEntitlements,
+          planPeriod
+        ),
+        []
+      );
+    });
+  });
   const payInAdvanceEntitlements = useMemo9(
     () => usageBasedEntitlements.filter(
       (entitlement) => entitlement.priceBehavior === "pay_in_advance" /* PayInAdvance */
@@ -14106,6 +14404,19 @@ var CheckoutDialog = ({ top = 0 }) => {
         description: t2("Optionally add features to your subscription")
       });
     }
+    const hasUsageBasedAddOnSelected = addOns.some((addOn) => {
+      return addOn.isSelected && addOn.entitlements.some((entitlement) => {
+        return entitlement.priceBehavior === "pay_in_advance" /* PayInAdvance */;
+      });
+    });
+    if (hasUsageBasedAddOnSelected) {
+      stages.push({
+        id: "addonsUsage",
+        name: t2("Add-ons Quantity"),
+        label: t2("Select quantities for add-ons"),
+        description: t2("Quantity to pay for in advance")
+      });
+    }
     if (creditBundles.length > 0) {
       stages.push({
         id: "credits",
@@ -14137,6 +14448,9 @@ var CheckoutDialog = ({ top = 0 }) => {
     if (checkoutState?.addOnId) {
       return "addons";
     }
+    if (checkoutState?.addOnUsage) {
+      return "addonsUsage";
+    }
     if (checkoutState?.usage) {
       return "usage";
     }
@@ -14144,7 +14458,19 @@ var CheckoutDialog = ({ top = 0 }) => {
       return "credits";
     }
     if (checkoutState?.planId !== currentPlanId) {
-      return checkoutStages.some((stage) => stage.id === "usage") ? "usage" : checkoutStages.some((stage) => stage.id === "addons") ? "addons" : checkoutStages.some((stage) => stage.id === "credits") ? "credits" : "plan";
+      const hasUsageStage = checkoutStages.some(
+        (stage) => stage.id === "usage"
+      );
+      const hasAddonsStage = checkoutStages.some(
+        (stage) => stage.id === "addons"
+      );
+      const hasAddonsUsageStage = checkoutStages.some(
+        (stage) => stage.id === "addonsUsage"
+      );
+      if (hasUsageStage) return "usage";
+      if (hasAddonsStage) return "addons";
+      if (hasAddonsUsageStage) return "addonsUsage";
+      return "plan";
     }
     return "plan";
   });
@@ -14181,19 +14507,34 @@ var CheckoutDialog = ({ top = 0 }) => {
             },
             []
           ),
-          payInAdvance: (updates.payInAdvanceEntitlements || payInAdvanceEntitlements).reduce(
-            (acc, { meteredMonthlyPrice, meteredYearlyPrice, quantity }) => {
-              const priceId = (period === "year" ? meteredYearlyPrice : meteredMonthlyPrice)?.priceId;
-              if (priceId) {
-                acc.push({
-                  priceId,
-                  quantity
-                });
-              }
-              return acc;
-            },
-            []
-          ),
+          payInAdvance: [
+            ...(updates.payInAdvanceEntitlements || payInAdvanceEntitlements).reduce(
+              (acc, { meteredMonthlyPrice, meteredYearlyPrice, quantity }) => {
+                const priceId = (period === "year" ? meteredYearlyPrice : meteredMonthlyPrice)?.priceId;
+                if (priceId) {
+                  acc.push({
+                    priceId,
+                    quantity
+                  });
+                }
+                return acc;
+              },
+              []
+            ),
+            ...(updates.addOnPayInAdvanceEntitlements || addOnUsageBasedEntitlements).reduce(
+              (acc, { meteredMonthlyPrice, meteredYearlyPrice, quantity }) => {
+                const priceId = (period === "year" ? meteredYearlyPrice : meteredMonthlyPrice)?.priceId;
+                if (priceId) {
+                  acc.push({
+                    priceId,
+                    quantity
+                  });
+                }
+                return acc;
+              },
+              []
+            )
+          ],
           creditBundles: (updates.creditBundles || creditBundles).reduce(
             (acc, { id, count }) => {
               if (count > 0) {
@@ -14250,6 +14591,7 @@ var CheckoutDialog = ({ top = 0 }) => {
       planPeriod,
       selectedPlan,
       payInAdvanceEntitlements,
+      addOnUsageBasedEntitlements,
       addOns,
       creditBundles,
       shouldTrial,
@@ -14323,6 +14665,17 @@ var CheckoutDialog = ({ top = 0 }) => {
           ...addOn,
           ...addOn.id === id && { isSelected: !addOn.isSelected }
         }));
+        const updatedAddOnEntitlements = updated.filter((addOn) => addOn.isSelected).flatMap(
+          (addOn) => addOn.entitlements.filter(
+            (entitlement) => entitlement.priceBehavior === "pay_in_advance" /* PayInAdvance */
+          ).map((entitlement) => ({
+            ...entitlement,
+            allocation: entitlement.valueNumeric || 0,
+            usage: 0,
+            quantity: 1
+          }))
+        );
+        setAddOnUsageBasedEntitlements(updatedAddOnEntitlements);
         handlePreviewCheckout({ addOns: updated });
         return updated;
       });
@@ -14363,6 +14716,23 @@ var CheckoutDialog = ({ top = 0 }) => {
     },
     [handlePreviewCheckout]
   );
+  const updateAddOnEntitlementQuantity = useCallback9(
+    (id, updatedQuantity) => {
+      setAddOnUsageBasedEntitlements((prev2) => {
+        const updated = prev2.map(
+          (entitlement) => entitlement.id === id ? {
+            ...entitlement,
+            quantity: updatedQuantity
+          } : entitlement
+        );
+        handlePreviewCheckout({
+          addOnPayInAdvanceEntitlements: updated
+        });
+        return updated;
+      });
+    },
+    [handlePreviewCheckout]
+  );
   const updatePromoCode = useCallback9(
     async (code) => {
       handlePreviewCheckout({ promoCode: code });
@@ -14496,7 +14866,7 @@ var CheckoutDialog = ({ top = 0 }) => {
                         ),
                         activeCheckoutStage.description && /* @__PURE__ */ jsx20(Text, { as: "p", children: activeCheckoutStage.description })
                       ] }),
-                      checkoutStage === "plan" && availablePeriods.length > 1 && /* @__PURE__ */ jsx20(
+                      checkoutStage === "plan" && showPeriodToggle && availablePeriods.length > 1 && /* @__PURE__ */ jsx20(
                         PeriodToggle,
                         {
                           options: availablePeriods,
@@ -14516,7 +14886,8 @@ var CheckoutDialog = ({ top = 0 }) => {
                     plans: availablePlans,
                     selectedPlan,
                     selectPlan,
-                    shouldTrial
+                    shouldTrial,
+                    showPeriodToggle
                   }
                 ),
                 checkoutStage === "usage" && /* @__PURE__ */ jsx20(
@@ -14538,6 +14909,16 @@ var CheckoutDialog = ({ top = 0 }) => {
                     toggle: (id) => toggleAddOn(id)
                   }
                 ),
+                checkoutStage === "addonsUsage" && /* @__PURE__ */ jsx20(
+                  Usage,
+                  {
+                    isLoading,
+                    period: planPeriod,
+                    selectedPlan,
+                    entitlements: addOnUsageBasedEntitlements,
+                    updateQuantity: updateAddOnEntitlementQuantity
+                  }
+                ),
                 checkoutStage === "credits" && /* @__PURE__ */ jsx20(
                   Credits,
                   {
@@ -17962,7 +18343,7 @@ var Plan2 = ({
   );
   const isActivePlan = isHydratedPlan(plan) && plan.current && currentPeriod === selectedPeriod;
   const { price: planPrice, currency: planCurrency } = getPlanPrice(plan, selectedPeriod) || {};
-  const credits = isHydratedPlan(plan) ? groupPlanCreditGrants(plan.includedCreditGrants) : [];
+  const credits = groupPlanCreditGrants(plan.includedCreditGrants);
   const hasUsageBasedEntitlements = plan.entitlements.some(
     (entitlement) => !!entitlement.priceBehavior
   );
@@ -18256,8 +18637,8 @@ var PricingTable = forwardRef12(
   ({ className, callToActionUrl, callToActionTarget, onCallToAction, ...rest }, ref) => {
     const props = resolveDesignProps8(rest);
     const { t: t2 } = useTranslation();
-    const { data, settings, hydratePublic } = useEmbed();
-    const { currentPeriod, isStandalone } = useMemo26(() => {
+    const { data, settings, isPending, hydratePublic } = useEmbed();
+    const { currentPeriod, showPeriodToggle, isStandalone } = useMemo26(() => {
       if (isCheckoutData(data)) {
         const billingSubscription = data.company?.billingSubscription;
         const isTrialSubscription = billingSubscription?.status === "trialing";
@@ -18266,6 +18647,7 @@ var PricingTable = forwardRef12(
           currentPeriod: data.company?.plan?.planPeriod || "month",
           currentAddOns: data.company?.addOns || [],
           canCheckout: data.capabilities?.checkout ?? true,
+          showPeriodToggle: data.showPeriodToggle ?? props.showPeriodToggle,
           isTrialSubscription,
           willSubscriptionCancel,
           isStandalone: false
@@ -18275,13 +18657,16 @@ var PricingTable = forwardRef12(
         currentPeriod: "month",
         currentAddOns: [],
         canCheckout: true,
+        showPeriodToggle: props.showPeriodToggle,
         isTrialSubscription: false,
         willSubscriptionCancel: false,
         isStandalone: true
       };
-    }, [data]);
+    }, [props.showPeriodToggle, data]);
     const [selectedPeriod, setSelectedPeriod] = useState17(currentPeriod);
-    const { plans, addOns, periods } = useAvailablePlans(selectedPeriod);
+    const { plans, addOns, periods } = useAvailablePlans(selectedPeriod, {
+      useSelectedPeriod: showPeriodToggle
+    });
     const [entitlementCounts, setEntitlementCounts] = useState17(
       () => plans.reduce(entitlementCountsReducer, {})
     );
@@ -18308,6 +18693,19 @@ var PricingTable = forwardRef12(
     useEffect8(() => {
       setEntitlementCounts(plans.reduce(entitlementCountsReducer, {}));
     }, [plans]);
+    if (isStandalone && isPending) {
+      return /* @__PURE__ */ jsx46(
+        Flex,
+        {
+          $width: "100%",
+          $height: "100%",
+          $alignItems: "center",
+          $justifyContent: "center",
+          $padding: `${settings.theme.card.padding / TEXT_BASE_SIZE}rem`,
+          children: /* @__PURE__ */ jsx46(Loader, { $size: "2xl" })
+        }
+      );
+    }
     const Wrapper = isStandalone ? Container : Fragment24;
     return /* @__PURE__ */ jsx46(Wrapper, { children: /* @__PURE__ */ jsxs38(
       FussyChild,
@@ -18342,7 +18740,7 @@ var PricingTable = forwardRef12(
                       children: props.header.isVisible && props.plans.isVisible && plans.length > 0 && t2("Plans")
                     }
                   ),
-                  props.showPeriodToggle && periods.length > 1 && /* @__PURE__ */ jsx46(
+                  showPeriodToggle && periods.length > 1 && /* @__PURE__ */ jsx46(
                     PeriodToggle,
                     {
                       options: periods,
@@ -18363,24 +18761,27 @@ var PricingTable = forwardRef12(
                 $display: "grid",
                 $gridTemplateColumns: "repeat(auto-fill, minmax(320px, 1fr))",
                 $gap: "1rem",
-                children: plans.map((plan, index, self2) => /* @__PURE__ */ jsx46(
-                  Plan2,
-                  {
-                    plan,
-                    index,
-                    sharedProps: {
-                      layout: props,
-                      callToActionUrl,
-                      callToActionTarget,
-                      onCallToAction
+                children: plans.map((plan, index, self2) => {
+                  const planPeriod = showPeriodToggle ? selectedPeriod : plan.yearlyPrice && !plan.monthlyPrice ? "year" /* Year */ : "month" /* Month */;
+                  return /* @__PURE__ */ jsx46(
+                    Plan2,
+                    {
+                      plan,
+                      index,
+                      sharedProps: {
+                        layout: props,
+                        callToActionUrl,
+                        callToActionTarget,
+                        onCallToAction
+                      },
+                      plans: self2,
+                      selectedPeriod: planPeriod,
+                      entitlementCounts,
+                      handleToggleShowAll
                     },
-                    plans: self2,
-                    selectedPeriod,
-                    entitlementCounts,
-                    handleToggleShowAll
-                  },
-                  index
-                ))
+                    index
+                  );
+                })
               }
             )
           ] }),
@@ -18407,20 +18808,23 @@ var PricingTable = forwardRef12(
                 $display: "grid",
                 $gridTemplateColumns: "repeat(auto-fill, minmax(320px, 1fr))",
                 $gap: "1rem",
-                children: addOns.map((addOn, index) => /* @__PURE__ */ jsx46(
-                  AddOn2,
-                  {
-                    addOn,
-                    sharedProps: {
-                      layout: props,
-                      callToActionUrl,
-                      callToActionTarget,
-                      onCallToAction
+                children: addOns.map((addOn, index) => {
+                  const addOnPeriod = showPeriodToggle ? selectedPeriod : addOn.yearlyPrice && !addOn.monthlyPrice ? "year" /* Year */ : "month" /* Month */;
+                  return /* @__PURE__ */ jsx46(
+                    AddOn2,
+                    {
+                      addOn,
+                      sharedProps: {
+                        layout: props,
+                        callToActionUrl,
+                        callToActionTarget,
+                        onCallToAction
+                      },
+                      selectedPeriod: addOnPeriod
                     },
-                    selectedPeriod
-                  },
-                  index
-                ))
+                    index
+                  );
+                })
               }
             )
           ] }) })
@@ -23064,6 +23468,7 @@ export {
   Button,
   ButtonElement,
   Card,
+  CheckoutDialog,
   Column,
   Container,
   Element,
@@ -23097,6 +23502,7 @@ export {
   UpcomingBill,
   Viewport,
   cardBoxShadow,
+  createActiveUsageBasedEntitlementsReducer,
   defaultSettings,
   defaultTheme,
   iconsList,