npm - @schematichq/schematic-components - Versions diffs - 1.9.0 → 2.0.0 - Mend

@schematichq/schematic-components 1.9.0 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/LICENSE +21 -0
package/dist/schematic-components.cjs.js +1802 -1167
package/dist/schematic-components.d.ts +18 -19
package/dist/schematic-components.esm.js +1652 -1010
package/package.json +34 -19

package/dist/schematic-components.esm.js CHANGED Viewed

@@ -4,7 +4,13 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __commonJS = (cb, mod) => function __require() {
+var __require = /* @__PURE__ */ ((x2) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x2, {
+  get: (a2, b2) => (typeof require !== "undefined" ? require : a2)[b2]
+}) : x2)(function(x2) {
+  if (typeof require !== "undefined") return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x2 + '" is not supported');
+});
+var __commonJS = (cb, mod) => function __require2() {
   return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
 };
 var __copyProps = (to, from2, except, desc) => {
@@ -83,6 +89,82 @@ var require_void_elements = __commonJS({
   }
 });
+// node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.development.js
+var require_use_sync_external_store_shim_development = __commonJS({
+  "node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.development.js"(exports) {
+    "use strict";
+    (function() {
+      function is(x2, y2) {
+        return x2 === y2 && (0 !== x2 || 1 / x2 === 1 / y2) || x2 !== x2 && y2 !== y2;
+      }
+      function useSyncExternalStore$2(subscribe, getSnapshot) {
+        didWarnOld18Alpha || void 0 === React3.startTransition || (didWarnOld18Alpha = true, console.error(
+          "You are using an outdated, pre-release alpha of React 18 that does not support useSyncExternalStore. The use-sync-external-store shim will not work correctly. Upgrade to a newer pre-release."
+        ));
+        var value = getSnapshot();
+        if (!didWarnUncachedGetSnapshot) {
+          var cachedValue = getSnapshot();
+          objectIs(value, cachedValue) || (console.error(
+            "The result of getSnapshot should be cached to avoid an infinite loop"
+          ), didWarnUncachedGetSnapshot = true);
+        }
+        cachedValue = useState21({
+          inst: { value, getSnapshot }
+        });
+        var inst = cachedValue[0].inst, forceUpdate = cachedValue[1];
+        useLayoutEffect6(
+          function() {
+            inst.value = value;
+            inst.getSnapshot = getSnapshot;
+            checkIfSnapshotChanged(inst) && forceUpdate({ inst });
+          },
+          [subscribe, value, getSnapshot]
+        );
+        useEffect11(
+          function() {
+            checkIfSnapshotChanged(inst) && forceUpdate({ inst });
+            return subscribe(function() {
+              checkIfSnapshotChanged(inst) && forceUpdate({ inst });
+            });
+          },
+          [subscribe]
+        );
+        useDebugValue(value);
+        return value;
+      }
+      function checkIfSnapshotChanged(inst) {
+        var latestGetSnapshot = inst.getSnapshot;
+        inst = inst.value;
+        try {
+          var nextValue = latestGetSnapshot();
+          return !objectIs(inst, nextValue);
+        } catch (error) {
+          return true;
+        }
+      }
+      function useSyncExternalStore$1(subscribe, getSnapshot) {
+        return getSnapshot();
+      }
+      "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());
+      var React3 = __require("react"), objectIs = "function" === typeof Object.is ? Object.is : is, useState21 = React3.useState, useEffect11 = React3.useEffect, useLayoutEffect6 = React3.useLayoutEffect, useDebugValue = React3.useDebugValue, didWarnOld18Alpha = false, didWarnUncachedGetSnapshot = false, shim = "undefined" === typeof window || "undefined" === typeof window.document || "undefined" === typeof window.document.createElement ? useSyncExternalStore$1 : useSyncExternalStore$2;
+      exports.useSyncExternalStore = void 0 !== React3.useSyncExternalStore ? React3.useSyncExternalStore : shim;
+      "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error());
+    })();
+  }
+});
+// node_modules/use-sync-external-store/shim/index.js
+var require_shim = __commonJS({
+  "node_modules/use-sync-external-store/shim/index.js"(exports, module) {
+    "use strict";
+    if (false) {
+      module.exports = null;
+    } else {
+      module.exports = require_use_sync_external_store_shim_development();
+    }
+  }
+});
 // node_modules/lodash/isObject.js
 var require_isObject = __commonJS({
   "node_modules/lodash/isObject.js"(exports, module) {
@@ -2546,15 +2628,7 @@ function getFeatureName(feature, count = 0) {
   return pluralize(name, count);
 }
-// src/utils/api/hydrate.ts
-function isCheckoutData(data) {
-  return typeof data === "object" && data !== null && "company" in data;
-}
 // src/utils/api/plan.ts
-function isHydratedPlan(plan) {
-  return typeof plan !== "undefined" && "current" in plan;
-}
 function entitlementCountsReducer(acc, plan) {
   acc[plan.id] = {
     size: plan.entitlements.length,
@@ -4109,20 +4183,12 @@ var St = "__sc-".concat(f, "__");
 // src/utils/style.ts
 function attr(key, value) {
-  return typeof value !== "undefined" && lt`
+  if (typeof value !== "undefined") {
+    return lt`
       ${key}: ${value};
     `;
+  }
 }
-attr.px = function propAsPx(key, value) {
-  return typeof value !== "undefined" && lt`
-      ${key}: ${typeof value === "number" ? `${value}px` : value};
-    `;
-};
-attr.rem = function propAsRem(key, value) {
-  return typeof value !== "undefined" && lt`
-      ${key}: ${typeof value === "number" ? `${value / TEXT_BASE_SIZE}rem` : value};
-    `;
-};
 // src/hooks/useAvailablePlans.ts
 function useAvailablePlans(activePeriod, options = { useSelectedPeriod: true }) {
@@ -4155,11 +4221,16 @@ function useAvailablePlans(activePeriod, options = { useSelectedPeriod: true })
       addOns: getActivePlans(data?.activeAddOns || []),
       periods: getAvailablePeriods()
     };
-  }, [data, getAvailablePeriods, getActivePlans]);
+  }, [
+    data?.activePlans,
+    data?.activeAddOns,
+    getActivePlans,
+    getAvailablePeriods
+  ]);
 }
 // src/hooks/useEmbed.ts
-import { useContext as useContext4 } from "react";
+import { useContext as useContext5 } from "react";
 // src/context/embedState.ts
 var defaultTheme = {
@@ -6620,17 +6691,485 @@ var ReportNamespaces = class {
   }
 };
+// node_modules/react-i18next/dist/es/IcuTrans.js
+import { useContext as useContext2 } from "react";
+// node_modules/react-i18next/dist/es/IcuTransWithoutContext.js
+import React2 from "react";
+// node_modules/react-i18next/dist/es/IcuTransUtils/TranslationParserError.js
+var TranslationParserError = class _TranslationParserError extends Error {
+  constructor(message, position2, translationString) {
+    super(message);
+    this.name = "TranslationParserError";
+    this.position = position2;
+    this.translationString = translationString;
+    if (Error.captureStackTrace) {
+      Error.captureStackTrace(this, _TranslationParserError);
+    }
+  }
+};
+// node_modules/react-i18next/dist/es/IcuTransUtils/htmlEntityDecoder.js
+var commonEntities = {
+  "&nbsp;": "\xA0",
+  "&amp;": "&",
+  "&lt;": "<",
+  "&gt;": ">",
+  "&quot;": '"',
+  "&apos;": "'",
+  "&copy;": "\xA9",
+  "&reg;": "\xAE",
+  "&trade;": "\u2122",
+  "&hellip;": "\u2026",
+  "&ndash;": "\u2013",
+  "&mdash;": "\u2014",
+  "&lsquo;": "\u2018",
+  "&rsquo;": "\u2019",
+  "&sbquo;": "\u201A",
+  "&ldquo;": "\u201C",
+  "&rdquo;": "\u201D",
+  "&bdquo;": "\u201E",
+  "&dagger;": "\u2020",
+  "&Dagger;": "\u2021",
+  "&bull;": "\u2022",
+  "&prime;": "\u2032",
+  "&Prime;": "\u2033",
+  "&lsaquo;": "\u2039",
+  "&rsaquo;": "\u203A",
+  "&sect;": "\xA7",
+  "&para;": "\xB6",
+  "&middot;": "\xB7",
+  "&ensp;": "\u2002",
+  "&emsp;": "\u2003",
+  "&thinsp;": "\u2009",
+  "&euro;": "\u20AC",
+  "&pound;": "\xA3",
+  "&yen;": "\xA5",
+  "&cent;": "\xA2",
+  "&curren;": "\xA4",
+  "&times;": "\xD7",
+  "&divide;": "\xF7",
+  "&minus;": "\u2212",
+  "&plusmn;": "\xB1",
+  "&ne;": "\u2260",
+  "&le;": "\u2264",
+  "&ge;": "\u2265",
+  "&asymp;": "\u2248",
+  "&equiv;": "\u2261",
+  "&infin;": "\u221E",
+  "&int;": "\u222B",
+  "&sum;": "\u2211",
+  "&prod;": "\u220F",
+  "&radic;": "\u221A",
+  "&part;": "\u2202",
+  "&permil;": "\u2030",
+  "&deg;": "\xB0",
+  "&micro;": "\xB5",
+  "&larr;": "\u2190",
+  "&uarr;": "\u2191",
+  "&rarr;": "\u2192",
+  "&darr;": "\u2193",
+  "&harr;": "\u2194",
+  "&crarr;": "\u21B5",
+  "&lArr;": "\u21D0",
+  "&uArr;": "\u21D1",
+  "&rArr;": "\u21D2",
+  "&dArr;": "\u21D3",
+  "&hArr;": "\u21D4",
+  "&alpha;": "\u03B1",
+  "&beta;": "\u03B2",
+  "&gamma;": "\u03B3",
+  "&delta;": "\u03B4",
+  "&epsilon;": "\u03B5",
+  "&zeta;": "\u03B6",
+  "&eta;": "\u03B7",
+  "&theta;": "\u03B8",
+  "&iota;": "\u03B9",
+  "&kappa;": "\u03BA",
+  "&lambda;": "\u03BB",
+  "&mu;": "\u03BC",
+  "&nu;": "\u03BD",
+  "&xi;": "\u03BE",
+  "&omicron;": "\u03BF",
+  "&pi;": "\u03C0",
+  "&rho;": "\u03C1",
+  "&sigma;": "\u03C3",
+  "&tau;": "\u03C4",
+  "&upsilon;": "\u03C5",
+  "&phi;": "\u03C6",
+  "&chi;": "\u03C7",
+  "&psi;": "\u03C8",
+  "&omega;": "\u03C9",
+  "&Alpha;": "\u0391",
+  "&Beta;": "\u0392",
+  "&Gamma;": "\u0393",
+  "&Delta;": "\u0394",
+  "&Epsilon;": "\u0395",
+  "&Zeta;": "\u0396",
+  "&Eta;": "\u0397",
+  "&Theta;": "\u0398",
+  "&Iota;": "\u0399",
+  "&Kappa;": "\u039A",
+  "&Lambda;": "\u039B",
+  "&Mu;": "\u039C",
+  "&Nu;": "\u039D",
+  "&Xi;": "\u039E",
+  "&Omicron;": "\u039F",
+  "&Pi;": "\u03A0",
+  "&Rho;": "\u03A1",
+  "&Sigma;": "\u03A3",
+  "&Tau;": "\u03A4",
+  "&Upsilon;": "\u03A5",
+  "&Phi;": "\u03A6",
+  "&Chi;": "\u03A7",
+  "&Psi;": "\u03A8",
+  "&Omega;": "\u03A9",
+  "&Agrave;": "\xC0",
+  "&Aacute;": "\xC1",
+  "&Acirc;": "\xC2",
+  "&Atilde;": "\xC3",
+  "&Auml;": "\xC4",
+  "&Aring;": "\xC5",
+  "&AElig;": "\xC6",
+  "&Ccedil;": "\xC7",
+  "&Egrave;": "\xC8",
+  "&Eacute;": "\xC9",
+  "&Ecirc;": "\xCA",
+  "&Euml;": "\xCB",
+  "&Igrave;": "\xCC",
+  "&Iacute;": "\xCD",
+  "&Icirc;": "\xCE",
+  "&Iuml;": "\xCF",
+  "&ETH;": "\xD0",
+  "&Ntilde;": "\xD1",
+  "&Ograve;": "\xD2",
+  "&Oacute;": "\xD3",
+  "&Ocirc;": "\xD4",
+  "&Otilde;": "\xD5",
+  "&Ouml;": "\xD6",
+  "&Oslash;": "\xD8",
+  "&Ugrave;": "\xD9",
+  "&Uacute;": "\xDA",
+  "&Ucirc;": "\xDB",
+  "&Uuml;": "\xDC",
+  "&Yacute;": "\xDD",
+  "&THORN;": "\xDE",
+  "&szlig;": "\xDF",
+  "&agrave;": "\xE0",
+  "&aacute;": "\xE1",
+  "&acirc;": "\xE2",
+  "&atilde;": "\xE3",
+  "&auml;": "\xE4",
+  "&aring;": "\xE5",
+  "&aelig;": "\xE6",
+  "&ccedil;": "\xE7",
+  "&egrave;": "\xE8",
+  "&eacute;": "\xE9",
+  "&ecirc;": "\xEA",
+  "&euml;": "\xEB",
+  "&igrave;": "\xEC",
+  "&iacute;": "\xED",
+  "&icirc;": "\xEE",
+  "&iuml;": "\xEF",
+  "&eth;": "\xF0",
+  "&ntilde;": "\xF1",
+  "&ograve;": "\xF2",
+  "&oacute;": "\xF3",
+  "&ocirc;": "\xF4",
+  "&otilde;": "\xF5",
+  "&ouml;": "\xF6",
+  "&oslash;": "\xF8",
+  "&ugrave;": "\xF9",
+  "&uacute;": "\xFA",
+  "&ucirc;": "\xFB",
+  "&uuml;": "\xFC",
+  "&yacute;": "\xFD",
+  "&thorn;": "\xFE",
+  "&yuml;": "\xFF",
+  "&iexcl;": "\xA1",
+  "&iquest;": "\xBF",
+  "&fnof;": "\u0192",
+  "&circ;": "\u02C6",
+  "&tilde;": "\u02DC",
+  "&OElig;": "\u0152",
+  "&oelig;": "\u0153",
+  "&Scaron;": "\u0160",
+  "&scaron;": "\u0161",
+  "&Yuml;": "\u0178",
+  "&ordf;": "\xAA",
+  "&ordm;": "\xBA",
+  "&macr;": "\xAF",
+  "&acute;": "\xB4",
+  "&cedil;": "\xB8",
+  "&sup1;": "\xB9",
+  "&sup2;": "\xB2",
+  "&sup3;": "\xB3",
+  "&frac14;": "\xBC",
+  "&frac12;": "\xBD",
+  "&frac34;": "\xBE",
+  "&spades;": "\u2660",
+  "&clubs;": "\u2663",
+  "&hearts;": "\u2665",
+  "&diams;": "\u2666",
+  "&loz;": "\u25CA",
+  "&oline;": "\u203E",
+  "&frasl;": "\u2044",
+  "&weierp;": "\u2118",
+  "&image;": "\u2111",
+  "&real;": "\u211C",
+  "&alefsym;": "\u2135"
+};
+var entityPattern = new RegExp(Object.keys(commonEntities).map((entity) => entity.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")).join("|"), "g");
+var decodeHtmlEntities = (text) => text.replace(entityPattern, (match2) => commonEntities[match2]).replace(/&#(\d+);/g, (_2, num) => String.fromCharCode(parseInt(num, 10))).replace(/&#x([0-9a-fA-F]+);/g, (_2, hex) => String.fromCharCode(parseInt(hex, 16)));
+// node_modules/react-i18next/dist/es/IcuTransUtils/tokenizer.js
+var tokenize2 = (translation) => {
+  const tokens = [];
+  let position2 = 0;
+  let currentText = "";
+  const flushText = () => {
+    if (currentText) {
+      tokens.push({
+        type: "Text",
+        value: currentText,
+        position: position2 - currentText.length
+      });
+      currentText = "";
+    }
+  };
+  while (position2 < translation.length) {
+    const char2 = translation[position2];
+    if (char2 === "<") {
+      const tagMatch = translation.slice(position2).match(/^<(\d+)>/);
+      if (tagMatch) {
+        flushText();
+        tokens.push({
+          type: "TagOpen",
+          value: tagMatch[0],
+          position: position2,
+          tagNumber: parseInt(tagMatch[1], 10)
+        });
+        position2 += tagMatch[0].length;
+      } else {
+        const closeTagMatch = translation.slice(position2).match(/^<\/(\d+)>/);
+        if (closeTagMatch) {
+          flushText();
+          tokens.push({
+            type: "TagClose",
+            value: closeTagMatch[0],
+            position: position2,
+            tagNumber: parseInt(closeTagMatch[1], 10)
+          });
+          position2 += closeTagMatch[0].length;
+        } else {
+          currentText += char2;
+          position2 += 1;
+        }
+      }
+    } else {
+      currentText += char2;
+      position2 += 1;
+    }
+  }
+  flushText();
+  return tokens;
+};
+// node_modules/react-i18next/dist/es/IcuTransUtils/renderTranslation.js
+import React from "react";
+var renderDeclarationNode = (declaration2, children, childDeclarations) => {
+  const {
+    type,
+    props = {}
+  } = declaration2;
+  if (props.children && Array.isArray(props.children) && childDeclarations) {
+    const {
+      children: _childrenToRemove,
+      ...propsWithoutChildren
+    } = props;
+    return React.createElement(type, propsWithoutChildren, ...children);
+  }
+  if (children.length === 0) {
+    return React.createElement(type, props);
+  }
+  if (children.length === 1) {
+    return React.createElement(type, props, children[0]);
+  }
+  return React.createElement(type, props, ...children);
+};
+var renderTranslation = (translation, declarations = []) => {
+  if (!translation) {
+    return [];
+  }
+  const tokens = tokenize2(translation);
+  const result = [];
+  const stack = [];
+  const literalTagNumbers = /* @__PURE__ */ new Set();
+  const getCurrentDeclarations = () => {
+    if (stack.length === 0) {
+      return declarations;
+    }
+    const parentFrame = stack[stack.length - 1];
+    if (parentFrame.declaration.props?.children && Array.isArray(parentFrame.declaration.props.children)) {
+      return parentFrame.declaration.props.children;
+    }
+    return parentFrame.declarations;
+  };
+  tokens.forEach((token2) => {
+    switch (token2.type) {
+      case "Text":
+        {
+          const decoded = decodeHtmlEntities(token2.value);
+          const targetArray = stack.length > 0 ? stack[stack.length - 1].children : result;
+          targetArray.push(decoded);
+        }
+        break;
+      case "TagOpen":
+        {
+          const {
+            tagNumber
+          } = token2;
+          const currentDeclarations = getCurrentDeclarations();
+          const declaration2 = currentDeclarations[tagNumber];
+          if (!declaration2) {
+            literalTagNumbers.add(tagNumber);
+            const literalText = `<${tagNumber}>`;
+            const targetArray = stack.length > 0 ? stack[stack.length - 1].children : result;
+            targetArray.push(literalText);
+            break;
+          }
+          stack.push({
+            tagNumber,
+            children: [],
+            position: token2.position,
+            declaration: declaration2,
+            declarations: currentDeclarations
+          });
+        }
+        break;
+      case "TagClose":
+        {
+          const {
+            tagNumber
+          } = token2;
+          if (literalTagNumbers.has(tagNumber)) {
+            const literalText = `</${tagNumber}>`;
+            const literalTargetArray = stack.length > 0 ? stack[stack.length - 1].children : result;
+            literalTargetArray.push(literalText);
+            literalTagNumbers.delete(tagNumber);
+            break;
+          }
+          if (stack.length === 0) {
+            throw new TranslationParserError(`Unexpected closing tag </${tagNumber}> at position ${token2.position}`, token2.position, translation);
+          }
+          const frame = stack.pop();
+          if (frame.tagNumber !== tagNumber) {
+            throw new TranslationParserError(`Mismatched tags: expected </${frame.tagNumber}> but got </${tagNumber}> at position ${token2.position}`, token2.position, translation);
+          }
+          const element = renderDeclarationNode(frame.declaration, frame.children, frame.declarations);
+          const elementTargetArray = stack.length > 0 ? stack[stack.length - 1].children : result;
+          elementTargetArray.push(element);
+        }
+        break;
+    }
+  });
+  if (stack.length > 0) {
+    const unclosed = stack[stack.length - 1];
+    throw new TranslationParserError(`Unclosed tag <${unclosed.tagNumber}> at position ${unclosed.position}`, unclosed.position, translation);
+  }
+  return result;
+};
+// node_modules/react-i18next/dist/es/IcuTransWithoutContext.js
+function IcuTransWithoutContext({
+  i18nKey,
+  defaultTranslation,
+  content,
+  ns,
+  values = {},
+  i18n: i18nFromProps,
+  t: tFromProps
+}) {
+  const i18n = i18nFromProps || getI18n();
+  if (!i18n) {
+    warnOnce(i18n, "NO_I18NEXT_INSTANCE", `IcuTrans: You need to pass in an i18next instance using i18nextReactModule`, {
+      i18nKey
+    });
+    return React2.createElement(React2.Fragment, {}, defaultTranslation);
+  }
+  const t2 = tFromProps || i18n.t?.bind(i18n) || ((k2) => k2);
+  let namespaces = ns || t2.ns || i18n.options?.defaultNS;
+  namespaces = isString2(namespaces) ? [namespaces] : namespaces || ["translation"];
+  let mergedValues = values;
+  if (i18n.options?.interpolation?.defaultVariables) {
+    mergedValues = values && Object.keys(values).length > 0 ? {
+      ...values,
+      ...i18n.options.interpolation.defaultVariables
+    } : {
+      ...i18n.options.interpolation.defaultVariables
+    };
+  }
+  const translation = t2(i18nKey, {
+    defaultValue: defaultTranslation,
+    ...mergedValues,
+    ns: namespaces
+  });
+  try {
+    const rendered = renderTranslation(translation, content);
+    return React2.createElement(React2.Fragment, {}, ...rendered);
+  } catch (error) {
+    warn(i18n, "ICU_TRANS_RENDER_ERROR", `IcuTrans component error for key "${i18nKey}": ${error.message}`, {
+      i18nKey,
+      error
+    });
+    return React2.createElement(React2.Fragment, {}, translation);
+  }
+}
+IcuTransWithoutContext.displayName = "IcuTransWithoutContext";
+// node_modules/react-i18next/dist/es/IcuTrans.js
+function IcuTrans({
+  i18nKey,
+  defaultTranslation,
+  content,
+  ns,
+  values = {},
+  i18n: i18nFromProps,
+  t: tFromProps
+}) {
+  const {
+    i18n: i18nFromContext,
+    defaultNS: defaultNSFromContext
+  } = useContext2(I18nContext) || {};
+  const i18n = i18nFromProps || i18nFromContext || getI18n();
+  const t2 = tFromProps || i18n?.t.bind(i18n);
+  return IcuTransWithoutContext({
+    i18nKey,
+    defaultTranslation,
+    content,
+    ns: ns || t2?.ns || defaultNSFromContext || i18n?.options?.defaultNS,
+    values,
+    i18n,
+    t: tFromProps
+  });
+}
+IcuTrans.displayName = "IcuTrans";
 // node_modules/react-i18next/dist/es/useTranslation.js
-import { useState, useEffect, useContext as useContext2, useRef, useCallback as useCallback2 } from "react";
-var usePrevious = (value, ignore) => {
-  const ref = useRef();
-  useEffect(() => {
-    ref.current = ignore ? ref.current : value;
-  }, [value, ignore]);
-  return ref.current;
+var import_shim = __toESM(require_shim(), 1);
+import { useContext as useContext3, useCallback as useCallback2, useMemo as useMemo2, useEffect, useRef, useState } from "react";
+var notReadyT = (k2, optsOrDefaultValue) => {
+  if (isString2(optsOrDefaultValue)) return optsOrDefaultValue;
+  if (isObject(optsOrDefaultValue) && isString2(optsOrDefaultValue.defaultValue)) return optsOrDefaultValue.defaultValue;
+  return Array.isArray(k2) ? k2[k2.length - 1] : k2;
+};
+var notReadySnapshot = {
+  t: notReadyT,
+  ready: false
+};
+var dummySubscribe = () => () => {
 };
-var alwaysNewT = (i18n, language, namespace, keyPrefix) => i18n.getFixedT(language, namespace, keyPrefix);
-var useMemoizedT = (i18n, language, namespace, keyPrefix) => useCallback2(alwaysNewT(i18n, language, namespace, keyPrefix), [i18n, language, namespace, keyPrefix]);
 var useTranslation = (ns, props = {}) => {
   const {
     i18n: i18nFromProps
@@ -6638,106 +7177,106 @@ var useTranslation = (ns, props = {}) => {
   const {
     i18n: i18nFromContext,
     defaultNS: defaultNSFromContext
-  } = useContext2(I18nContext) || {};
+  } = useContext3(I18nContext) || {};
   const i18n = i18nFromProps || i18nFromContext || getI18n();
   if (i18n && !i18n.reportNamespaces) i18n.reportNamespaces = new ReportNamespaces();
   if (!i18n) {
     warnOnce(i18n, "NO_I18NEXT_INSTANCE", "useTranslation: You will need to pass in an i18next instance by using initReactI18next");
-    const notReadyT = (k2, optsOrDefaultValue) => {
-      if (isString2(optsOrDefaultValue)) return optsOrDefaultValue;
-      if (isObject(optsOrDefaultValue) && isString2(optsOrDefaultValue.defaultValue)) return optsOrDefaultValue.defaultValue;
-      return Array.isArray(k2) ? k2[k2.length - 1] : k2;
-    };
-    const retNotReady = [notReadyT, {}, false];
-    retNotReady.t = notReadyT;
-    retNotReady.i18n = {};
-    retNotReady.ready = false;
-    return retNotReady;
-  }
-  if (i18n.options.react?.wait) warnOnce(i18n, "DEPRECATED_OPTION", "useTranslation: It seems you are still using the old wait option, you may migrate to the new useSuspense behaviour.");
-  const i18nOptions = {
+  }
+  const i18nOptions = useMemo2(() => ({
     ...getDefaults(),
-    ...i18n.options.react,
+    ...i18n?.options?.react,
     ...props
-  };
+  }), [i18n, props]);
   const {
     useSuspense,
     keyPrefix
   } = i18nOptions;
-  let namespaces = ns || defaultNSFromContext || i18n.options?.defaultNS;
-  namespaces = isString2(namespaces) ? [namespaces] : namespaces || ["translation"];
-  i18n.reportNamespaces.addUsedNamespaces?.(namespaces);
-  const ready = (i18n.isInitialized || i18n.initializedStoreOnce) && namespaces.every((n) => hasLoadedNamespace2(n, i18n, i18nOptions));
-  const memoGetT = useMemoizedT(i18n, props.lng || null, i18nOptions.nsMode === "fallback" ? namespaces : namespaces[0], keyPrefix);
-  const getT = () => memoGetT;
-  const getNewT = () => alwaysNewT(i18n, props.lng || null, i18nOptions.nsMode === "fallback" ? namespaces : namespaces[0], keyPrefix);
-  const [t2, setT] = useState(getT);
-  let joinedNS = namespaces.join();
-  if (props.lng) joinedNS = `${props.lng}${joinedNS}`;
-  const previousJoinedNS = usePrevious(joinedNS);
-  const isMounted = useRef(true);
-  useEffect(() => {
+  const namespaces = useMemo2(() => {
+    const nsOrContext = ns || defaultNSFromContext || i18n?.options?.defaultNS;
+    return isString2(nsOrContext) ? [nsOrContext] : nsOrContext || ["translation"];
+  }, [ns, defaultNSFromContext, i18n]);
+  i18n?.reportNamespaces?.addUsedNamespaces?.(namespaces);
+  const subscribe = useCallback2((callback) => {
+    if (!i18n) return dummySubscribe;
     const {
       bindI18n,
       bindI18nStore
     } = i18nOptions;
-    isMounted.current = true;
-    if (!ready && !useSuspense) {
-      if (props.lng) {
-        loadLanguages2(i18n, props.lng, namespaces, () => {
-          if (isMounted.current) setT(getNewT);
-        });
-      } else {
-        loadNamespaces2(i18n, namespaces, () => {
-          if (isMounted.current) setT(getNewT);
-        });
-      }
-    }
-    if (ready && previousJoinedNS && previousJoinedNS !== joinedNS && isMounted.current) {
-      setT(getNewT);
-    }
-    const boundReset = () => {
-      if (isMounted.current) setT(getNewT);
-    };
-    if (bindI18n) i18n?.on(bindI18n, boundReset);
-    if (bindI18nStore) i18n?.store.on(bindI18nStore, boundReset);
+    if (bindI18n) i18n.on(bindI18n, callback);
+    if (bindI18nStore) i18n.store.on(bindI18nStore, callback);
     return () => {
-      isMounted.current = false;
-      if (i18n && bindI18n) bindI18n?.split(" ").forEach((e2) => i18n.off(e2, boundReset));
-      if (bindI18nStore && i18n) bindI18nStore.split(" ").forEach((e2) => i18n.store.off(e2, boundReset));
+      if (bindI18n) bindI18n.split(" ").forEach((e2) => i18n.off(e2, callback));
+      if (bindI18nStore) bindI18nStore.split(" ").forEach((e2) => i18n.store.off(e2, callback));
+    };
+  }, [i18n, i18nOptions]);
+  const snapshotRef = useRef();
+  const getSnapshot = useCallback2(() => {
+    if (!i18n) {
+      return notReadySnapshot;
+    }
+    const calculatedReady = !!(i18n.isInitialized || i18n.initializedStoreOnce) && namespaces.every((n) => hasLoadedNamespace2(n, i18n, i18nOptions));
+    const calculatedT = i18n.getFixedT(props.lng || i18n.language, i18nOptions.nsMode === "fallback" ? namespaces : namespaces[0], keyPrefix);
+    const lastSnapshot = snapshotRef.current;
+    if (lastSnapshot && lastSnapshot.ready === calculatedReady && lastSnapshot.lng === (props.lng || i18n.language) && lastSnapshot.keyPrefix === keyPrefix) {
+      return lastSnapshot;
+    }
+    const newSnapshot = {
+      t: calculatedT,
+      ready: calculatedReady,
+      lng: props.lng || i18n.language,
+      keyPrefix
     };
-  }, [i18n, joinedNS]);
+    snapshotRef.current = newSnapshot;
+    return newSnapshot;
+  }, [i18n, namespaces, keyPrefix, i18nOptions, props.lng]);
+  const [loadCount, setLoadCount] = useState(0);
+  const {
+    t: t2,
+    ready
+  } = (0, import_shim.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
   useEffect(() => {
-    if (isMounted.current && ready) {
-      setT(getT);
-    }
-  }, [i18n, keyPrefix, ready]);
-  const ret = [t2, i18n, ready];
-  ret.t = t2;
-  ret.i18n = i18n;
-  ret.ready = ready;
-  if (ready) return ret;
-  if (!ready && !useSuspense) return ret;
-  throw new Promise((resolve) => {
-    if (props.lng) {
-      loadLanguages2(i18n, props.lng, namespaces, () => resolve());
-    } else {
-      loadNamespaces2(i18n, namespaces, () => resolve());
-    }
-  });
+    if (i18n && !ready && !useSuspense) {
+      const onLoaded = () => setLoadCount((c2) => c2 + 1);
+      if (props.lng) {
+        loadLanguages2(i18n, props.lng, namespaces, onLoaded);
+      } else {
+        loadNamespaces2(i18n, namespaces, onLoaded);
+      }
+    }
+  }, [i18n, props.lng, namespaces, ready, useSuspense, loadCount]);
+  const finalI18n = i18n || {};
+  const ret = useMemo2(() => {
+    const arr = [t2, finalI18n, ready];
+    arr.t = t2;
+    arr.i18n = finalI18n;
+    arr.ready = ready;
+    return arr;
+  }, [t2, finalI18n, ready]);
+  if (i18n && useSuspense && !ready) {
+    throw new Promise((resolve) => {
+      const onLoaded = () => resolve();
+      if (props.lng) {
+        loadLanguages2(i18n, props.lng, namespaces, onLoaded);
+      } else {
+        loadNamespaces2(i18n, namespaces, onLoaded);
+      }
+    });
+  }
+  return ret;
 };
 // node_modules/react-i18next/dist/es/withTranslation.js
 import { createElement as createElement2, forwardRef as forwardRefReact } from "react";
 // node_modules/react-i18next/dist/es/I18nextProvider.js
-import { createElement as createElement3, useMemo as useMemo2 } from "react";
+import { createElement as createElement3, useMemo as useMemo3 } from "react";
 // node_modules/react-i18next/dist/es/withSSR.js
 import { createElement as createElement4 } from "react";
 // node_modules/react-i18next/dist/es/useSSR.js
-import { useContext as useContext3 } from "react";
+import { useContext as useContext4 } from "react";
 // src/localization/en.json
 var en_default = {
@@ -6747,7 +7286,7 @@ var en_default = {
     Active: "Active",
     Add: "Add",
     "Add new payment method": "Add new payment method",
-    "Add Seats": "Add More",
+    "Add More": "Add More",
     "Add-ons": "Add-ons",
     "Add-ons Quantity": "Add-ons Quantity",
     Additional: "Additional",
@@ -7083,12 +7622,12 @@ var Icon = ({ name, className = "", ...rest }) => {
 };
 // src/context/EmbedProvider.tsx
-var import_debounce = __toESM(require_debounce());
-var import_merge2 = __toESM(require_merge());
+var import_debounce = __toESM(require_debounce(), 1);
+var import_merge2 = __toESM(require_merge(), 1);
 import {
   useCallback as useCallback3,
   useEffect as useEffect2,
-  useMemo as useMemo3,
+  useMemo as useMemo4,
   useReducer,
   useRef as useRef2,
   useState as useState2
@@ -10573,7 +11112,7 @@ var ComponentspublicApi = class extends BaseAPI2 {
 };
 // src/context/embedReducer.ts
-var import_merge = __toESM(require_merge());
+var import_merge = __toESM(require_merge(), 1);
 var dispatchPlanChangedEvent = (detail) => {
   const event = new CustomEvent("plan-changed", {
     bubbles: true,
@@ -10581,6 +11120,33 @@ var dispatchPlanChangedEvent = (detail) => {
   });
   window.dispatchEvent(event);
 };
+function normalize(data) {
+  return (0, import_merge.default)({}, data, {
+    activePlans: data?.activePlans.map((plan) => ({
+      companyCanTrial: false,
+      current: false,
+      valid: true,
+      usageViolations: [],
+      ...plan
+    })),
+    activeAddOns: data?.activeAddOns.map((plan) => ({
+      companyCanTrial: false,
+      current: false,
+      valid: true,
+      usageViolations: [],
+      ...plan
+    })),
+    activeUsageBasedEntitlements: [],
+    checkoutSettings: {
+      collectAddress: false,
+      collectEmail: false,
+      collectPhone: false,
+      taxCollectionEnabled: false
+    },
+    creditBundles: [],
+    creditGrants: []
+  });
+}
 var reducer = (state, action) => {
   switch (action.type) {
     case "SET_ACCESS_TOKEN": {
@@ -10596,7 +11162,15 @@ var reducer = (state, action) => {
         isPending: true
       };
     }
-    case "HYDRATE_PUBLIC":
+    case "HYDRATE_PUBLIC": {
+      return {
+        ...state,
+        data: normalize(action.data),
+        error: void 0,
+        isPending: false,
+        stale: false
+      };
+    }
     case "HYDRATE":
     case "HYDRATE_COMPONENT":
     case "HYDRATE_EXTERNAL": {
@@ -10617,44 +11191,38 @@ var reducer = (state, action) => {
       };
     }
     case "UPDATE_PAYMENT_METHOD": {
-      if (!isCheckoutData(state.data)) {
-        return state;
-      }
-      const data = { ...state.data };
-      if (data.subscription) {
-        data.subscription.paymentMethod = action.paymentMethod;
+      const updated = normalize(state.data);
+      if (updated.subscription) {
+        updated.subscription.paymentMethod = action.paymentMethod;
       }
-      if (data.company) {
-        const updatedPaymentMethods = data.company.paymentMethods.filter(
+      if (updated.company) {
+        const updatedPaymentMethods = updated.company.paymentMethods.filter(
           (paymentMethod) => paymentMethod.id !== action.paymentMethod.id
         );
-        data.company.paymentMethods = [
+        updated.company.paymentMethods = [
           action.paymentMethod,
           ...updatedPaymentMethods
         ];
-        if (!data.subscription) {
-          data.company.defaultPaymentMethod = action.paymentMethod;
+        if (!updated.subscription) {
+          updated.company.defaultPaymentMethod = action.paymentMethod;
         }
       }
       return {
         ...state,
-        data
+        data: updated
       };
     }
     case "DELETE_PAYMENT_METHOD": {
-      if (!isCheckoutData(state.data)) {
-        return state;
-      }
-      const data = { ...state.data };
-      if (data.company) {
-        const paymentMethods = [...data.company.paymentMethods];
-        data.company.paymentMethods = paymentMethods.filter(
+      const updated = normalize(state.data);
+      if (updated.company) {
+        const paymentMethods = [...updated.company.paymentMethods];
+        updated.company.paymentMethods = paymentMethods.filter(
           (paymentMethod) => paymentMethod.id !== action.paymentMethodId
         );
       }
       return {
         ...state,
-        data
+        data: updated
       };
     }
     case "RESET": {
@@ -10701,6 +11269,10 @@ var reducer = (state, action) => {
 // src/context/EmbedProvider.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
+var getCustomHeaders = (sessionId) => ({
+  "X-Schematic-Components-Version": "2.0.0",
+  "X-Schematic-Session-ID": sessionId
+});
 var EmbedProvider = ({
   children,
   apiKey,
@@ -10714,13 +11286,6 @@ var EmbedProvider = ({
     const resolvedState = (0, import_merge2.default)({}, initialState, providedState);
     return resolvedState;
   });
-  const customHeaders = useMemo3(
-    () => ({
-      "X-Schematic-Components-Version": "1.9.0",
-      "X-Schematic-Session-ID": sessionIdRef.current
-    }),
-    []
-  );
   const [api, setApi] = useState2({});
   const debug = useCallback3(
     (message, ...args) => {
@@ -10757,7 +11322,7 @@ var EmbedProvider = ({
       });
     }
   }, [api.public]);
-  const debouncedHydratePublic = useMemo3(
+  const debouncedHydratePublic = useMemo4(
     () => (0, import_debounce.default)(
       hydratePublic,
       FETCH_DEBOUNCE_TIMEOUT,
@@ -10783,7 +11348,7 @@ var EmbedProvider = ({
       });
     }
   }, [api.checkout]);
-  const debouncedHydrate = useMemo3(
+  const debouncedHydrate = useMemo4(
     () => (0, import_debounce.default)(hydrate, FETCH_DEBOUNCE_TIMEOUT, LEADING_DEBOUNCE_SETTINGS),
     [hydrate]
   );
@@ -10810,7 +11375,7 @@ var EmbedProvider = ({
     },
     [api.checkout]
   );
-  const debouncedHydrateComponent = useMemo3(
+  const debouncedHydrateComponent = useMemo4(
     () => (0, import_debounce.default)(
       hydrateComponent,
       FETCH_DEBOUNCE_TIMEOUT,
@@ -10834,7 +11399,7 @@ var EmbedProvider = ({
       });
     }
   }, []);
-  const debouncedHydrateExternal = useMemo3(
+  const debouncedHydrateExternal = useMemo4(
     () => (0, import_debounce.default)(
       hydrateExternal,
       FETCH_DEBOUNCE_TIMEOUT,
@@ -10845,7 +11410,7 @@ var EmbedProvider = ({
   const createSetupIntent = useCallback3(async () => {
     return api.checkout?.createSetupIntent();
   }, [api.checkout]);
-  const debouncedCreateSetupIntent = useMemo3(
+  const debouncedCreateSetupIntent = useMemo4(
     () => (0, import_debounce.default)(
       createSetupIntent,
       FETCH_DEBOUNCE_TIMEOUT,
@@ -10868,7 +11433,7 @@ var EmbedProvider = ({
     },
     [api.checkout]
   );
-  const debouncedUpdatePaymentMethod = useMemo3(
+  const debouncedUpdatePaymentMethod = useMemo4(
     () => (0, import_debounce.default)(
       updatePaymentMethod,
       FETCH_DEBOUNCE_TIMEOUT,
@@ -10891,7 +11456,7 @@ var EmbedProvider = ({
     },
     [api.checkout]
   );
-  const debouncedDeletePaymentMethod = useMemo3(
+  const debouncedDeletePaymentMethod = useMemo4(
     () => (0, import_debounce.default)(
       deletePaymentMethod,
       FETCH_DEBOUNCE_TIMEOUT,
@@ -10914,7 +11479,7 @@ var EmbedProvider = ({
     },
     [api.checkout]
   );
-  const debouncedCheckout = useMemo3(
+  const debouncedCheckout = useMemo4(
     () => (0, import_debounce.default)(checkout, FETCH_DEBOUNCE_TIMEOUT, LEADING_DEBOUNCE_SETTINGS),
     [checkout]
   );
@@ -10934,7 +11499,7 @@ var EmbedProvider = ({
     }
     return response;
   }, [api.checkout]);
-  const debouncedUnsubscribe = useMemo3(
+  const debouncedUnsubscribe = useMemo4(
     () => (0, import_debounce.default)(unsubscribe, FETCH_DEBOUNCE_TIMEOUT, LEADING_DEBOUNCE_SETTINGS),
     [unsubscribe]
   );
@@ -10946,7 +11511,7 @@ var EmbedProvider = ({
     },
     [api.checkout]
   );
-  const debouncedGetUpcomingInvoice = useMemo3(
+  const debouncedGetUpcomingInvoice = useMemo4(
     () => (0, import_debounce.default)(
       getUpcomingInvoice,
       FETCH_DEBOUNCE_TIMEOUT,
@@ -10957,7 +11522,7 @@ var EmbedProvider = ({
   const getCustomerBalance = useCallback3(async () => {
     return api.checkout?.fetchCustomerBalance();
   }, [api.checkout]);
-  const debouncedGetCustomerBalance = useMemo3(
+  const debouncedGetCustomerBalance = useMemo4(
     () => (0, import_debounce.default)(
       getCustomerBalance,
       FETCH_DEBOUNCE_TIMEOUT,
@@ -10968,7 +11533,7 @@ var EmbedProvider = ({
   const listInvoices = useCallback3(async () => {
     return api.checkout?.listInvoices();
   }, [api.checkout]);
-  const debouncedListInvoices = useMemo3(
+  const debouncedListInvoices = useMemo4(
     () => (0, import_debounce.default)(listInvoices, FETCH_DEBOUNCE_TIMEOUT, LEADING_DEBOUNCE_SETTINGS),
     [listInvoices]
   );
@@ -11049,7 +11614,7 @@ var EmbedProvider = ({
     if (apiKey) {
       const configParams = (0, import_merge2.default)({}, apiConfig, {
         apiKey,
-        headers: customHeaders
+        headers: getCustomHeaders(sessionIdRef.current)
       });
       const publicApi = new ComponentspublicApi(
         new Configuration2(configParams)
@@ -11059,12 +11624,12 @@ var EmbedProvider = ({
         public: publicApi
       }));
     }
-  }, [apiKey, apiConfig, customHeaders]);
+  }, [apiKey, apiConfig]);
   useEffect2(() => {
     if (state.accessToken) {
       const configParams = (0, import_merge2.default)({}, apiConfig, {
         apiKey: state.accessToken,
-        headers: customHeaders
+        headers: getCustomHeaders(sessionIdRef.current)
       });
       setApi((prev2) => ({
         ...prev2,
@@ -11073,7 +11638,7 @@ var EmbedProvider = ({
         )
       }));
     }
-  }, [state.accessToken, apiConfig, customHeaders]);
+  }, [state.accessToken, apiConfig]);
   useEffect2(() => {
     if (options.settings) {
       updateSettings(options.settings, { update: true });
@@ -11132,13 +11697,13 @@ var EmbedProvider = ({
 };
 // src/hooks/useEmbed.ts
-var useEmbed = () => useContext4(EmbedContext);
+var useEmbed = () => useContext5(EmbedContext);
 // src/hooks/useIsLightBackground.ts
-import { useMemo as useMemo4 } from "react";
+import { useMemo as useMemo5 } from "react";
 function useIsLightBackground() {
   const { settings } = useEmbed();
-  const isLightBackground = useMemo4(() => {
+  const isLightBackground = useMemo5(() => {
     return hexToHSL(settings.theme.card.background).l > 50;
   }, [settings.theme.card.background]);
   return isLightBackground;
@@ -11252,18 +11817,8 @@ var usePaymentConfirmation = ({
   };
 };
-// src/hooks/usePrevious.ts
-import { useEffect as useEffect4, useRef as useRef4 } from "react";
-function usePrevious2(value) {
-  const ref = useRef4(void 0);
-  useEffect4(() => {
-    ref.current = value;
-  }, [value]);
-  return ref.current;
-}
 // src/hooks/useRequest.ts
-import { useCallback as useCallback5, useMemo as useMemo5, useState as useState4 } from "react";
+import { useCallback as useCallback5, useMemo as useMemo6, useState as useState4 } from "react";
 function useRequest(fn) {
   const [isLoading, setIsLoading] = useState4(false);
   const [error, setError] = useState4(null);
@@ -11283,7 +11838,7 @@ function useRequest(fn) {
       setIsLoading(false);
     }
   }, [fn]);
-  const value = useMemo5(() => {
+  const value = useMemo6(() => {
     const state = { isLoading, error, data };
     return [state, request];
   }, [isLoading, error, data, request]);
@@ -11291,12 +11846,12 @@ function useRequest(fn) {
 }
 // src/hooks/useTrialEnd.ts
-import { useMemo as useMemo6 } from "react";
+import { useMemo as useMemo7 } from "react";
 function useTrialEnd() {
   const { t: t2 } = useTranslation();
   const { data } = useEmbed();
-  const { endDate, formatted } = useMemo6(() => {
-    const billingSubscription = isCheckoutData(data) ? data.company?.billingSubscription : void 0;
+  const { endDate, formatted } = useMemo7(() => {
+    const billingSubscription = data?.company?.billingSubscription;
     const end = typeof billingSubscription?.trialEnd === "number" ? new Date(billingSubscription.trialEnd * 1e3) : void 0;
     let formatted2;
     if (end) {
@@ -11323,21 +11878,19 @@ function useTrialEnd() {
       });
     }
     return { endDate: end, formatted: formatted2 };
-  }, [t2, data]);
+  }, [t2, data?.company?.billingSubscription]);
   return { endDate, formatted };
 }
 // src/hooks/useWrapChildren.ts
 import { useLayoutEffect, useState as useState5 } from "react";
-function useWrapChildren(elements) {
-  const [shouldWrap, setShouldWrap] = useState5(
-    () => new Array(elements.length).fill(false)
-  );
+function useWrapChildren(ref) {
+  const [shouldWrap, setShouldWrap] = useState5([]);
   useLayoutEffect(() => {
     const rowShouldWrap = (parent) => [...parent.children].some(
       (el) => el instanceof HTMLElement && el.previousElementSibling instanceof HTMLElement && el.offsetLeft <= el.previousElementSibling.offsetLeft
     );
-    elements.forEach((el, idx) => {
+    ref.current.forEach((el, idx) => {
       new ResizeObserver((entries) => {
         setShouldWrap((prev2) => {
           const next2 = [...prev2];
@@ -11351,12 +11904,12 @@ function useWrapChildren(elements) {
         return next2;
       });
     });
-  }, [elements]);
+  }, [ref]);
   return shouldWrap.some((wrap) => wrap);
 }
 // src/components/ui/box/styles.ts
-var Box = dt.div((props) => {
+var Box = dt("div")((props) => {
   function reducer2(acc, [key, value]) {
     if (key.startsWith("$") && !["$viewport"].includes(key)) {
       acc.push(
@@ -11854,7 +12407,7 @@ var Input = dt.input(({ theme, $size = "md", $variant = "filled" }) => {
 });
 // src/components/ui/modal/Modal.tsx
-import { useCallback as useCallback6, useLayoutEffect as useLayoutEffect2, useRef as useRef5 } from "react";
+import { useCallback as useCallback6, useLayoutEffect as useLayoutEffect2, useRef as useRef4 } from "react";
 // src/components/ui/modal/styles.ts
 var Overlay = dt(Box)`
@@ -11919,7 +12472,7 @@ var Modal2 = ({
 }) => {
   const { setLayout } = useEmbed();
   const isLightBackground = useIsLightBackground();
-  const ref = useRef5(null);
+  const ref = useRef4(null);
   const handleClose = useCallback6(() => {
     setLayout("portal");
     onClose?.();
@@ -12151,8 +12704,8 @@ var Text = dt.span.withConfig({
 );
 // src/components/ui/tooltip/Tooltip.tsx
-var import_debounce2 = __toESM(require_debounce());
-import { useCallback as useCallback8, useLayoutEffect as useLayoutEffect3, useRef as useRef6, useState as useState6 } from "react";
+var import_debounce2 = __toESM(require_debounce(), 1);
+import { useCallback as useCallback8, useLayoutEffect as useLayoutEffect3, useRef as useRef5, useState as useState6 } from "react";
 import { createPortal } from "react-dom";
 // src/components/ui/tooltip/styles.ts
@@ -12302,6 +12855,22 @@ var Content = dt.div.withConfig({
 // src/components/ui/tooltip/Tooltip.tsx
 import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+var getCoords = (element, { position: position2 }) => {
+  const { top: offsetTop, left: offsetLeft } = document.body.getBoundingClientRect();
+  const rect = element.getBoundingClientRect();
+  let x2 = position2 === "left" ? rect.left : rect.right;
+  if (position2 === "top" || position2 === "bottom") {
+    x2 -= rect.width / 2;
+  }
+  let y2 = position2 === "top" ? rect.top : rect.bottom;
+  if (position2 === "left" || position2 === "right") {
+    y2 -= rect.height / 2;
+  }
+  return {
+    x: Math.round(x2 - offsetLeft),
+    y: Math.round(y2 - offsetTop)
+  };
+};
 var Tooltip = ({
   trigger,
   content,
@@ -12309,42 +12878,29 @@ var Tooltip = ({
   fullWidth = false,
   ...rest
 }) => {
-  const ref = useRef6(null);
+  const ref = useRef5(null);
   const [show, setShow] = useState6(false);
   const [coords2, setCoords] = useState6({ x: 0, y: 0 });
   const updateCoords = useCallback8(() => {
     if (ref.current) {
-      const { top: offsetTop, left: offsetLeft } = document.body.getBoundingClientRect();
-      const rect = ref.current.getBoundingClientRect();
-      let x2 = position2 === "left" ? rect.left : rect.right;
-      if (position2 === "top" || position2 === "bottom") {
-        x2 -= rect.width / 2;
-      }
-      let y2 = position2 === "top" ? rect.top : rect.bottom;
-      if (position2 === "left" || position2 === "right") {
-        y2 -= rect.height / 2;
-      }
-      setCoords({
-        x: Math.round(x2 - offsetLeft),
-        y: Math.round(y2 - offsetTop)
-      });
+      setCoords(getCoords(ref.current, { position: position2 }));
     }
   }, [position2]);
   useLayoutEffect3(() => {
     const handleResize = (0, import_debounce2.default)(updateCoords, EVENT_DEBOUNCE_TIMEOUT);
     window.addEventListener("resize", handleResize);
+    updateCoords();
     return () => {
       window.removeEventListener("resize", handleResize);
     };
   }, [updateCoords]);
-  useLayoutEffect3(() => {
-    updateCoords();
-  }, [updateCoords, show]);
   return /* @__PURE__ */ jsxs4(Fragment2, { children: [
     /* @__PURE__ */ jsx6(
       Trigger,
       {
         ref,
+        onFocus: () => setShow(true),
+        onBlur: () => setShow(false),
         onPointerEnter: () => setShow(true),
         onPointerLeave: () => setShow(false),
         $fullWidth: fullWidth,
@@ -12490,8 +13046,8 @@ var Root = forwardRef4(
 Root.displayName = "Root";
 // src/components/layout/viewport/Viewport.tsx
-var import_debounce3 = __toESM(require_debounce());
-import { forwardRef as forwardRef5, useLayoutEffect as useLayoutEffect5, useMemo as useMemo15, useState as useState13 } from "react";
+var import_debounce3 = __toESM(require_debounce(), 1);
+import { forwardRef as forwardRef5, useLayoutEffect as useLayoutEffect5, useMemo as useMemo16, useRef as useRef9, useState as useState13 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
 // src/components/shared/billing-threshold-tooltip/BillingThresholdTooltip.tsx
@@ -12526,17 +13082,17 @@ var BillingThresholdTooltip = ({
 // src/components/shared/checkout-dialog/CheckoutDialog.tsx
 import {
   useCallback as useCallback10,
-  useEffect as useEffect6,
+  useEffect as useEffect5,
   useLayoutEffect as useLayoutEffect4,
-  useMemo as useMemo9,
-  useRef as useRef7,
+  useMemo as useMemo10,
+  useRef as useRef6,
   useState as useState10
 } from "react";
 // src/components/shared/sidebar/Sidebar.tsx
 import {
   useCallback as useCallback9,
-  useMemo as useMemo7
+  useMemo as useMemo8
 } from "react";
 // src/components/shared/sidebar/EntitlementRow.tsx
@@ -12657,6 +13213,24 @@ var Proration = ({ currency, charges }) => {
 // src/components/shared/sidebar/StageButton.tsx
 import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
+var NoPaymentRequired = ({
+  isDisabled,
+  isLoading,
+  onClick
+}) => {
+  const { t: t2 } = useTranslation();
+  return /* @__PURE__ */ jsx13(
+    Button,
+    {
+      type: "button",
+      disabled: isDisabled,
+      onClick,
+      $isLoading: isLoading,
+      $fullWidth: true,
+      children: t2("Subscribe and close")
+    }
+  );
+};
 var StageButton = ({
   checkout,
   checkoutStage,
@@ -12677,19 +13251,6 @@ var StageButton = ({
 }) => {
   const { t: t2 } = useTranslation();
   const isDisabled = isLoading || !hasPlan || inEditMode;
-  const NoPaymentRequired = () => {
-    return /* @__PURE__ */ jsx13(
-      Button,
-      {
-        type: "button",
-        disabled: isDisabled,
-        onClick: checkout,
-        $isLoading: isLoading,
-        $fullWidth: true,
-        children: t2("Subscribe and close")
-      }
-    );
-  };
   if (checkoutStage === "plan") {
     if (isSelectedPlanTrialable && trialPaymentMethodRequired && shouldTrial) {
       return /* @__PURE__ */ jsx13(
@@ -12723,7 +13284,14 @@ var StageButton = ({
     if (!isPaymentMethodRequired && !checkoutStages?.some(
       (stage) => stage.id === "usage" || stage.id === "addons" || stage.id === "credits"
     )) {
-      return /* @__PURE__ */ jsx13(NoPaymentRequired, {});
+      return /* @__PURE__ */ jsx13(
+        NoPaymentRequired,
+        {
+          isDisabled,
+          isLoading,
+          onClick: checkout
+        }
+      );
     }
     return /* @__PURE__ */ jsx13(
       Button,
@@ -12751,7 +13319,14 @@ var StageButton = ({
     if (!isPaymentMethodRequired && !checkoutStages?.some(
       (stage) => stage.id === "addons" || stage.id === "credits"
     )) {
-      return /* @__PURE__ */ jsx13(NoPaymentRequired, {});
+      return /* @__PURE__ */ jsx13(
+        NoPaymentRequired,
+        {
+          isDisabled,
+          isLoading,
+          onClick: checkout
+        }
+      );
     }
     return /* @__PURE__ */ jsx13(
       Button,
@@ -12792,7 +13367,14 @@ var StageButton = ({
       (stage) => stage.id === "credits"
     );
     if (!isPaymentMethodRequired && !hasAddonsUsageStage && !hasCreditsStage) {
-      return /* @__PURE__ */ jsx13(NoPaymentRequired, {});
+      return /* @__PURE__ */ jsx13(
+        NoPaymentRequired,
+        {
+          isDisabled,
+          isLoading,
+          onClick: checkout
+        }
+      );
     }
     return /* @__PURE__ */ jsx13(
       Button,
@@ -12827,7 +13409,14 @@ var StageButton = ({
   }
   if (checkoutStage === "addonsUsage") {
     if (!isPaymentMethodRequired && !checkoutStages?.some((stage) => stage.id === "credits")) {
-      return /* @__PURE__ */ jsx13(NoPaymentRequired, {});
+      return /* @__PURE__ */ jsx13(
+        NoPaymentRequired,
+        {
+          isDisabled,
+          isLoading,
+          onClick: checkout
+        }
+      );
     }
     return /* @__PURE__ */ jsx13(
       Button,
@@ -12859,7 +13448,14 @@ var StageButton = ({
   }
   if (checkoutStage === "credits") {
     if (!isPaymentMethodRequired) {
-      return /* @__PURE__ */ jsx13(NoPaymentRequired, {});
+      return /* @__PURE__ */ jsx13(
+        NoPaymentRequired,
+        {
+          isDisabled,
+          isLoading,
+          onClick: checkout
+        }
+      );
     }
     return /* @__PURE__ */ jsx13(
       Button,
@@ -12891,7 +13487,14 @@ var StageButton = ({
   }
   if (checkoutStage === "checkout") {
     if (!isPaymentMethodRequired) {
-      return /* @__PURE__ */ jsx13(NoPaymentRequired, {});
+      return /* @__PURE__ */ jsx13(
+        NoPaymentRequired,
+        {
+          isDisabled,
+          isLoading,
+          onClick: checkout
+        }
+      );
     }
     return /* @__PURE__ */ jsx13(
       Button,
@@ -12953,33 +13556,30 @@ var Sidebar = ({
     billingSubscription,
     paymentMethod,
     trialPaymentMethodRequired
-  } = useMemo7(() => {
-    if (isCheckoutData(data)) {
-      const currentEntitlements2 = data.featureUsage?.features || [];
-      return {
-        currentPlan: data.company?.plan,
-        currentAddOns: data.company?.addOns || [],
-        currentEntitlements: currentEntitlements2,
-        currentUsageBasedEntitlements: extractCurrentUsageBasedEntitlements(
-          data.featureUsage?.features,
-          planPeriod
-        ),
-        billingSubscription: data.company?.billingSubscription,
-        paymentMethod: data.subscription?.paymentMethod,
-        trialPaymentMethodRequired: data.trialPaymentMethodRequired === true
-      };
-    }
+  } = useMemo8(() => {
+    const currentEntitlements2 = data?.featureUsage?.features || [];
     return {
-      currentPlan: void 0,
-      currentAddOns: [],
-      currentEntitlements: [],
-      currentUsageBasedEntitlements: [],
-      billingSubscription: void 0,
-      paymentMethod: void 0,
-      trialPaymentMethodRequired: false
+      currentPlan: data?.company?.plan,
+      currentAddOns: data?.company?.addOns || [],
+      currentEntitlements: currentEntitlements2,
+      currentUsageBasedEntitlements: extractCurrentUsageBasedEntitlements(
+        currentEntitlements2,
+        planPeriod
+      ),
+      billingSubscription: data?.company?.billingSubscription,
+      paymentMethod: data?.subscription?.paymentMethod,
+      trialPaymentMethodRequired: data?.trialPaymentMethodRequired === true
     };
-  }, [data, planPeriod]);
-  const { payInAdvanceEntitlements } = useMemo7(() => {
+  }, [
+    planPeriod,
+    data?.company?.addOns,
+    data?.company?.billingSubscription,
+    data?.company?.plan,
+    data?.featureUsage?.features,
+    data?.subscription?.paymentMethod,
+    data?.trialPaymentMethodRequired
+  ]);
+  const { payInAdvanceEntitlements } = useMemo8(() => {
     const payAsYouGoEntitlements = [];
     const payInAdvanceEntitlements2 = usageBasedEntitlements.filter(
       (entitlement) => {
@@ -12991,7 +13591,7 @@ var Sidebar = ({
     );
     return { payAsYouGoEntitlements, payInAdvanceEntitlements: payInAdvanceEntitlements2 };
   }, [usageBasedEntitlements]);
-  const subscriptionPrice = useMemo7(() => {
+  const subscriptionPrice = useMemo8(() => {
     let planPrice;
     let currency;
     if (selectedPlan) {
@@ -13028,7 +13628,7 @@ var Sidebar = ({
     proration,
     taxAmount,
     taxDescription
-  } = useMemo7(() => {
+  } = useMemo8(() => {
     return {
       amountOff: charges?.amountOff ?? 0,
       dueNow: charges?.dueNow ?? 0,
@@ -13040,7 +13640,7 @@ var Sidebar = ({
       taxDescription: charges?.taxDisplayName
     };
   }, [charges]);
-  const updatedUsageBasedEntitlements = useMemo7(() => {
+  const updatedUsageBasedEntitlements = useMemo8(() => {
     const changedUsageBasedEntitlements = [];
     const addedUsageBasedEntitlements = selectedPlan ? usageBasedEntitlements.reduce(
       (acc, selected) => {
@@ -13091,15 +13691,15 @@ var Sidebar = ({
     currentUsageBasedEntitlements,
     usageBasedEntitlements
   ]);
-  const selectedAddOns = useMemo7(
+  const selectedAddOns = useMemo8(
     () => addOns.filter((addOn) => addOn.isSelected),
     [addOns]
   );
-  const addedCreditBundles = useMemo7(
+  const addedCreditBundles = useMemo8(
     () => creditBundles.filter((bundle) => bundle.count > 0),
     [creditBundles]
   );
-  const discountApplied = useMemo7(
+  const discountApplied = useMemo8(
     () => promoCode && (amountOff > 0 || percentOff > 0),
     [promoCode, amountOff, percentOff]
   );
@@ -13145,7 +13745,7 @@ var Sidebar = ({
         newPlanId: planId,
         newPriceId: priceId,
         addOnIds: addOns.reduce((acc, addOn) => {
-          if (addOn.isSelected && isHydratedPlan(selectedPlan) && !selectedPlan.companyCanTrial) {
+          if (addOn.isSelected && !selectedPlan.companyCanTrial) {
             const addOnPriceId = getAddOnPrice(addOn, planPeriod)?.id;
             if (addOnPriceId) {
               acc.push({
@@ -13237,8 +13837,7 @@ var Sidebar = ({
       setError(t2("Unsubscribe failed"));
     }
   }, [t2, unsubscribe, setError, setIsLoading, setLayout]);
-  const willPlanChange = isHydratedPlan(selectedPlan) && !selectedPlan.current;
-  const { removedAddOns, willAddOnsChange } = useMemo7(() => {
+  const { removedAddOns, willAddOnsChange } = useMemo8(() => {
     const addedAddOns = selectedAddOns.filter(
       (selected) => !currentAddOns.some((current) => selected.id === current.id)
     );
@@ -13252,7 +13851,7 @@ var Sidebar = ({
       willAddOnsChange: willAddOnsChange2
     };
   }, [currentAddOns, selectedAddOns]);
-  const isSelectedPlanTrialable = isHydratedPlan(selectedPlan) && selectedPlan?.companyCanTrial === true && selectedPlan?.isTrialable === true;
+  const isSelectedPlanTrialable = selectedPlan?.companyCanTrial === true && selectedPlan?.isTrialable === true;
   const now = /* @__PURE__ */ new Date();
   const trialEndsOn = new Date(now);
   if (isSelectedPlanTrialable && selectedPlan.trialDays) {
@@ -13312,7 +13911,7 @@ var Sidebar = ({
                     $justifyContent: "space-between",
                     $alignItems: "center",
                     $gap: "1rem",
-                    ...willPlanChange && {
+                    ...selectedPlan && !selectedPlan.current && {
                       $opacity: "0.625",
                       $textDecoration: "line-through",
                       $color: settings.theme.typography.heading4.color
@@ -13332,7 +13931,7 @@ var Sidebar = ({
                     ]
                   }
                 ),
-                willPlanChange && /* @__PURE__ */ jsxs9(Box, { children: [
+                selectedPlan && !selectedPlan.current && /* @__PURE__ */ jsxs9(Box, { children: [
                   /* @__PURE__ */ jsx14(
                     Box,
                     {
@@ -13834,8 +14433,6 @@ var AddOns = ({ addOns, toggle, isLoading, period }) => {
       $gap: "1rem",
       children: addOns.map((addOn, index) => {
         const { price, currency } = getAddOnPrice(addOn, period) || {};
-        const isAddOnValid = isHydratedPlan(addOn) && addOn.valid;
-        const isAddOnCurrent = isHydratedPlan(addOn) && addOn.current;
         const displayableEntitlements = addOn.entitlements?.filter(
           (entitlement) => entitlement.valueType === "unlimited" || entitlement.priceBehavior && [
             "pay_as_you_go" /* PayAsYouGo */,
@@ -13906,7 +14503,7 @@ var AddOns = ({ addOns, toggle, isLoading, period }) => {
                         }
                       )
                     ] }) }),
-                    isAddOnCurrent && /* @__PURE__ */ jsx15(
+                    addOn.current && /* @__PURE__ */ jsx15(
                       Flex,
                       {
                         $position: "absolute",
@@ -14026,7 +14623,7 @@ var AddOns = ({ addOns, toggle, isLoading, period }) => {
                       Button,
                       {
                         type: "button",
-                        disabled: isLoading || !isAddOnValid,
+                        disabled: isLoading || !addOn.valid,
                         onClick: () => toggle(addOn.id),
                         $size: "sm",
                         $color: "primary",
@@ -14038,13 +14635,13 @@ var AddOns = ({ addOns, toggle, isLoading, period }) => {
                       Button,
                       {
                         type: "button",
-                        disabled: isLoading || !isAddOnValid,
+                        disabled: isLoading || !addOn.valid,
                         onClick: () => toggle(addOn.id),
                         $size: "sm",
-                        $color: isAddOnCurrent ? "danger" : "primary",
-                        $variant: isAddOnCurrent ? "ghost" : "text",
+                        $color: addOn.current ? "danger" : "primary",
+                        $variant: addOn.current ? "ghost" : "text",
                         $fullWidth: true,
-                        children: isAddOnCurrent ? t2("Remove add-on") : /* @__PURE__ */ jsxs10(Fragment5, { children: [
+                        children: addOn.current ? t2("Remove add-on") : /* @__PURE__ */ jsxs10(Fragment5, { children: [
                           /* @__PURE__ */ jsx15(Icon3, { name: "check-rounded", size: "sm" }),
                           t2("Selected")
                         ] })
@@ -14289,7 +14886,7 @@ var Navigation = ({
 };
 // src/components/shared/checkout-dialog/Plan.tsx
-import { Fragment as Fragment8, useEffect as useEffect5, useMemo as useMemo8, useState as useState9 } from "react";
+import { Fragment as Fragment8, useEffect as useEffect4, useMemo as useMemo9, useState as useState9 } from "react";
 // src/components/shared/checkout-dialog/styles.ts
 var FlexWithAlignEnd = dt(Flex)`
@@ -14301,7 +14898,7 @@ import { Fragment as Fragment9, jsx as jsx19, jsxs as jsxs14 } from "react/jsx-r
 var Selected = ({ isCurrent = false, isTrial = false }) => {
   const { t: t2 } = useTranslation();
   const { settings } = useEmbed();
-  const text = useMemo8(() => {
+  const text = useMemo9(() => {
     if (isCurrent) {
       return isTrial ? t2("Trial in progress") : t2("Current plan");
     }
@@ -14337,22 +14934,16 @@ var PlanButtonGroup = ({
 }) => {
   const { t: t2 } = useTranslation();
   const { data } = useEmbed();
-  const isTrialing = useMemo8(() => {
-    return isCheckoutData(data) && data.subscription?.status === "trialing" || false;
+  const isTrialing = useMemo9(() => {
+    return data?.subscription?.status === "trialing" || false;
   }, [data]);
-  const { isCurrentPlan, isValidPlan } = useMemo8(() => {
-    if (isCheckoutData(data)) {
-      return {
-        isCurrentPlan: data.company?.plan?.id === plan.id,
-        isValidPlan: isHydratedPlan(plan) && plan.valid
-      };
-    }
+  const { isCurrentPlan, isValidPlan } = useMemo9(() => {
     return {
-      isCurrentPlan: false,
-      isValidPlan: true
+      isCurrentPlan: data?.company?.plan?.id === plan.id,
+      isValidPlan: plan.valid
     };
-  }, [data, plan]);
-  if (isHydratedPlan(plan) && plan.companyCanTrial && plan.isTrialable) {
+  }, [plan.id, plan.valid, data?.company?.plan?.id]);
+  if (plan.companyCanTrial && plan.isTrialable) {
     return /* @__PURE__ */ jsxs14(Flex, { $flexDirection: "column", $gap: "1.5rem", children: [
       !isTrialing && /* @__PURE__ */ jsx19(Fragment9, { children: isSelected && shouldTrial ? /* @__PURE__ */ jsx19(Selected, { isCurrent: isCurrentPlan, isTrial: shouldTrial }) : /* @__PURE__ */ jsxs14(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
         /* @__PURE__ */ jsx19(
@@ -14380,7 +14971,7 @@ var PlanButtonGroup = ({
             children: plan.custom ? plan.customPlanConfig?.ctaText ?? t2("Talk to support") : !isValidPlan ? /* @__PURE__ */ jsx19(Text, { as: Box, $align: "center", children: t2("Over plan limit") }) : t2("Start X day trial", { days: plan.trialDays })
           }
         ),
-        isHydratedPlan(plan) && !plan.valid && /* @__PURE__ */ jsx19(UsageViolationText, { violations: plan.usageViolations })
+        !plan.valid && /* @__PURE__ */ jsx19(UsageViolationText, { violations: plan.usageViolations })
       ] }) }),
       !plan.custom && /* @__PURE__ */ jsx19(Fragment9, { children: isSelected && (!shouldTrial || isTrialing) ? /* @__PURE__ */ jsx19(Selected, { isCurrent: isCurrentPlan }) : /* @__PURE__ */ jsxs14(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
         /* @__PURE__ */ jsx19(
@@ -14398,7 +14989,7 @@ var PlanButtonGroup = ({
             children: !isValidPlan ? /* @__PURE__ */ jsx19(Box, { $textAlign: "center", children: /* @__PURE__ */ jsx19(Text, { as: Box, $align: "center", children: t2("Over plan limit") }) }) : t2("Choose plan")
           }
         ),
-        isHydratedPlan(plan) && !plan.valid && /* @__PURE__ */ jsx19(UsageViolationText, { violations: plan.usageViolations })
+        !plan.valid && /* @__PURE__ */ jsx19(UsageViolationText, { violations: plan.usageViolations })
       ] }) })
     ] });
   }
@@ -14425,7 +15016,7 @@ var PlanButtonGroup = ({
         children: plan.custom ? plan.customPlanConfig?.ctaText ?? t2("Talk to support") : !isValidPlan ? /* @__PURE__ */ jsx19(Text, { as: Box, $align: "center", children: t2("Over plan limit") }) : t2("Choose plan")
       }
     ),
-    isHydratedPlan(plan) && !plan.valid && /* @__PURE__ */ jsx19(UsageViolationText, { violations: plan.usageViolations })
+    !plan.valid && /* @__PURE__ */ jsx19(UsageViolationText, { violations: plan.usageViolations })
   ] });
 };
 var Plan = ({
@@ -14442,25 +15033,19 @@ var Plan = ({
   const [entitlementCounts, setEntitlementCounts] = useState9(
     () => plans.reduce(entitlementCountsReducer, {})
   );
-  const { isTrialing, showCredits, showPeriodToggle, showZeroPriceAsFree } = useMemo8(() => {
-    const showCredits2 = data?.showCredits ?? true;
-    const showPeriodToggle2 = data?.showPeriodToggle ?? true;
-    const showZeroPriceAsFree2 = data?.showZeroPriceAsFree ?? false;
-    if (isCheckoutData(data)) {
-      return {
-        isTrialing: data.subscription?.status === "trialing",
-        showCredits: showCredits2,
-        showPeriodToggle: showPeriodToggle2,
-        showZeroPriceAsFree: showZeroPriceAsFree2
-      };
-    }
+  const { isTrialing, showCredits, showPeriodToggle, showZeroPriceAsFree } = useMemo9(() => {
     return {
-      isTrialing: false,
-      showCredits: showCredits2,
-      showPeriodToggle: showPeriodToggle2,
-      showZeroPriceAsFree: showZeroPriceAsFree2
+      isTrialing: data?.subscription?.status === "trialing",
+      showCredits: data?.showCredits ?? true,
+      showPeriodToggle: data?.showPeriodToggle ?? true,
+      showZeroPriceAsFree: data?.showZeroPriceAsFree ?? false
     };
-  }, [data]);
+  }, [
+    data?.showCredits,
+    data?.showPeriodToggle,
+    data?.showZeroPriceAsFree,
+    data?.subscription?.status
+  ]);
   const handleToggleShowAll = (id) => {
     setEntitlementCounts((prev2) => {
       const count = prev2[id] ? { ...prev2[id] } : void 0;
@@ -14476,7 +15061,7 @@ var Plan = ({
       return prev2;
     });
   };
-  useEffect5(() => {
+  useEffect4(() => {
     setEntitlementCounts(plans.reduce(entitlementCountsReducer, {}));
   }, [plans]);
   const cardPadding = settings.theme.card.padding / TEXT_BASE_SIZE;
@@ -14606,7 +15191,7 @@ var Plan = ({
                         })
                       }
                     ),
-                    isHydratedPlan(plan) && plan.current && /* @__PURE__ */ jsx19(
+                    plan.current && /* @__PURE__ */ jsx19(
                       Flex,
                       {
                         $position: "absolute",
@@ -14919,7 +15504,7 @@ var Usage = ({ entitlements, updateQuantity, period }) => {
                       {
                         $size: "lg",
                         type: "number",
-                        value: entitlement.quantity,
+                        defaultValue: entitlement.quantity,
                         min: 0,
                         autoFocus: true,
                         onFocus: (event) => {
@@ -15007,8 +15592,8 @@ var createActiveUsageBasedEntitlementsReducer = (entitlements, period) => (acc,
     const featureUsage = entitlements.find(
       (usage2) => usage2.feature?.id === entitlement.feature?.id
     );
-    const allocation = featureUsage?.allocation || 0;
-    const usage = featureUsage?.usage || 0;
+    const allocation = featureUsage?.allocation ?? entitlement.valueNumeric ?? 0;
+    const usage = featureUsage?.usage ?? 0;
     acc.push({
       ...entitlement,
       allocation,
@@ -15022,15 +15607,13 @@ var CheckoutDialog = ({ top = 0 }) => {
   const { t: t2 } = useTranslation();
   const { data, settings, isPending, checkoutState, previewCheckout } = useEmbed();
   const isLightBackground = useIsLightBackground();
-  const contentRef = useRef7(null);
-  const checkoutRef = useRef7(null);
+  const contentRef = useRef6(null);
+  const checkoutRef = useRef6(null);
   const [confirmPaymentIntentProps, setConfirmPaymentIntentProps] = useState10(void 0);
   const [charges, setCharges] = useState10();
   const [paymentMethodId, setPaymentMethodId] = useState10(
     () => {
-      if (isCheckoutData(data)) {
-        return (data.subscription?.paymentMethod || data.company?.defaultPaymentMethod)?.externalId;
-      }
+      return data?.subscription?.paymentMethod?.externalId || data?.company?.defaultPaymentMethod?.externalId;
     }
   );
   const [isLoading, setIsLoading] = useState10(false);
@@ -15040,26 +15623,22 @@ var CheckoutDialog = ({ top = 0 }) => {
     currentEntitlements,
     showPeriodToggle,
     trialPaymentMethodRequired
-  } = useMemo9(() => {
-    const showPeriodToggle2 = data?.showPeriodToggle ?? true;
-    if (isCheckoutData(data)) {
-      return {
-        currentPlanId: data.company?.plan?.id,
-        currentEntitlements: data.featureUsage ? data.featureUsage.features : [],
-        showPeriodToggle: showPeriodToggle2,
-        trialPaymentMethodRequired: data.trialPaymentMethodRequired === true
-      };
-    }
+  } = useMemo10(() => {
     return {
-      currentPlanId: void 0,
-      currentEntitlements: [],
-      showPeriodToggle: showPeriodToggle2,
-      trialPaymentMethodRequired: false
+      currentPlanId: data?.company?.plan?.id,
+      currentEntitlements: data?.featureUsage ? data.featureUsage.features : [],
+      showPeriodToggle: data?.showPeriodToggle ?? true,
+      trialPaymentMethodRequired: data?.trialPaymentMethodRequired === true
     };
-  }, [data]);
-  const currentPeriod = useMemo9(
-    () => checkoutState?.period || isCheckoutData(data) && data.company?.plan?.planPeriod || "month",
-    [data, checkoutState?.period]
+  }, [
+    data?.company?.plan?.id,
+    data?.featureUsage,
+    data?.showPeriodToggle,
+    data?.trialPaymentMethodRequired
+  ]);
+  const currentPeriod = useMemo10(
+    () => checkoutState?.period || data?.company?.plan?.planPeriod || "month",
+    [data?.company?.plan?.planPeriod, checkoutState?.period]
   );
   const [planPeriod, setPlanPeriod] = useState10(currentPeriod);
   const {
@@ -15072,30 +15651,24 @@ var CheckoutDialog = ({ top = 0 }) => {
   const [selectedPlan, setSelectedPlan] = useState10(
     () => {
       return availablePlans.find(
-        (plan) => checkoutState?.planId ? plan.id === checkoutState.planId : isHydratedPlan(plan) && plan.current
+        (plan) => checkoutState?.planId ? plan.id === checkoutState.planId : plan.current
       );
     }
   );
   const [shouldTrial, setShouldTrial] = useState10(false);
   const [addOns, setAddOns] = useState10(() => {
-    if (isCheckoutData(data)) {
-      return availableAddOns.map((addOn) => ({
-        ...addOn,
-        isSelected: typeof checkoutState?.addOnId !== "undefined" ? addOn.id === checkoutState.addOnId : (data.company?.addOns || []).some(
-          (currentAddOn) => addOn.id === currentAddOn.id
-        )
-      }));
-    }
-    return [];
+    return availableAddOns.map((addOn) => ({
+      ...addOn,
+      isSelected: typeof checkoutState?.addOnId !== "undefined" ? addOn.id === checkoutState.addOnId : (data?.company?.addOns || []).some(
+        (currentAddOn) => addOn.id === currentAddOn.id
+      )
+    }));
   });
   const [creditBundles, setCreditBundles] = useState10(() => {
-    if (isCheckoutData(data)) {
-      return data.creditBundles.map((bundle) => ({
-        ...bundle,
-        count: 0
-      }));
-    }
-    return [];
+    return (data?.creditBundles || []).map((bundle) => ({
+      ...bundle,
+      count: 0
+    }));
   });
   const [usageBasedEntitlements, setUsageBasedEntitlements] = useState10(
     () => (selectedPlan?.entitlements || []).reduce(
@@ -15107,9 +15680,7 @@ var CheckoutDialog = ({ top = 0 }) => {
     )
   );
   const [addOnUsageBasedEntitlements, setAddOnUsageBasedEntitlements] = useState10(() => {
-    if (!isCheckoutData(data)) return [];
-    const currentAddOns = data.company?.addOns || [];
-    return currentAddOns.flatMap((currentAddOn) => {
+    return (data?.company?.addOns || []).flatMap((currentAddOn) => {
       const availableAddOn = availableAddOns.find(
         (available) => available.id === currentAddOn.id
       );
@@ -15123,13 +15694,13 @@ var CheckoutDialog = ({ top = 0 }) => {
       );
     });
   });
-  const payInAdvanceEntitlements = useMemo9(
+  const payInAdvanceEntitlements = useMemo10(
     () => usageBasedEntitlements.filter(
       (entitlement) => entitlement.priceBehavior === "pay_in_advance" /* PayInAdvance */
     ),
     [usageBasedEntitlements]
   );
-  const addOnPayInAdvanceEntitlements = useMemo9(
+  const addOnPayInAdvanceEntitlements = useMemo10(
     () => addOnUsageBasedEntitlements.filter(
       (entitlement) => entitlement.priceBehavior === "pay_in_advance" /* PayInAdvance */
     ),
@@ -15137,12 +15708,12 @@ var CheckoutDialog = ({ top = 0 }) => {
   );
   const [promoCode, setPromoCode] = useState10(null);
   const [isPaymentMethodRequired, setIsPaymentMethodRequired] = useState10(false);
-  const willTrialWithoutPaymentMethod = useMemo9(
+  const willTrialWithoutPaymentMethod = useMemo10(
     () => shouldTrial && !trialPaymentMethodRequired,
     [shouldTrial, trialPaymentMethodRequired]
   );
-  const isSelectedPlanTrialable = isHydratedPlan(selectedPlan) && selectedPlan.isTrialable && selectedPlan.companyCanTrial;
-  const checkoutStages = useMemo9(() => {
+  const isSelectedPlanTrialable = selectedPlan && selectedPlan.isTrialable && selectedPlan.companyCanTrial;
+  const checkoutStages = useMemo10(() => {
     const stages = [];
     if (availablePlans.length > 0) {
       stages.push({
@@ -15355,24 +15926,13 @@ var CheckoutDialog = ({ top = 0 }) => {
     (updates) => {
       const plan = updates.plan;
       const period = updates.period || planPeriod;
-      const entitlements = plan.entitlements.reduce(
-        (acc, entitlement) => {
-          if (entitlement.priceBehavior && (period === "month" && entitlement.meteredMonthlyPrice || period === "year" && entitlement.meteredYearlyPrice)) {
-            const allocation = entitlement.valueNumeric || 0;
-            acc.push({
-              ...entitlement,
-              allocation,
-              usage: 0,
-              quantity: allocation
-            });
-          }
-          return acc;
-        },
+      const updatedUsageBasedEntitlements = plan.entitlements.reduce(
+        createActiveUsageBasedEntitlementsReducer(currentEntitlements, period),
         []
       );
       if (plan.id !== selectedPlan?.id) {
         setSelectedPlan(plan);
-        setUsageBasedEntitlements(entitlements);
+        setUsageBasedEntitlements(updatedUsageBasedEntitlements);
       }
       const updatedShouldTrial = updates.shouldTrial ?? shouldTrial;
       setShouldTrial(updatedShouldTrial);
@@ -15392,7 +15952,7 @@ var CheckoutDialog = ({ top = 0 }) => {
           addOns: [],
           payInAdvanceEntitlements: []
         } : {
-          payInAdvanceEntitlements: entitlements.filter(
+          payInAdvanceEntitlements: updatedUsageBasedEntitlements.filter(
             ({ priceBehavior }) => priceBehavior === "pay_in_advance" /* PayInAdvance */
           )
         }
@@ -15401,6 +15961,7 @@ var CheckoutDialog = ({ top = 0 }) => {
     [
       selectedPlan?.id,
       planPeriod,
+      currentEntitlements,
       shouldTrial,
       willTrialWithoutPaymentMethod,
       handlePreviewCheckout
@@ -15499,12 +16060,18 @@ var CheckoutDialog = ({ top = 0 }) => {
     },
     [handlePreviewCheckout]
   );
-  useEffect6(() => {
+  useEffect5(() => {
     if (selectedPlan) {
       selectPlan({ plan: selectedPlan, period: currentPeriod });
     }
   }, []);
-  useEffect6(() => {
+  useEffect5(() => {
+    const plan = availablePlans.find(
+      (plan2) => checkoutState?.planId ? plan2.id === checkoutState.planId : plan2.current
+    );
+    setSelectedPlan(plan);
+  }, [availablePlans, checkoutState?.planId]);
+  useEffect5(() => {
     setAddOns((prevAddOns) => {
       return availableAddOns.filter((availAddOn) => {
         if (!selectedPlan) {
@@ -15525,8 +16092,8 @@ var CheckoutDialog = ({ top = 0 }) => {
         };
       });
     });
-  }, [availableAddOns, data?.addOnCompatibilities, selectedPlan]);
-  useEffect6(() => {
+  }, [data?.addOnCompatibilities, availableAddOns, selectedPlan]);
+  useEffect5(() => {
     if (charges) {
       checkoutRef.current?.scrollTo({
         top: 0,
@@ -15739,11 +16306,11 @@ var CheckoutDialog = ({ top = 0 }) => {
 };
 // src/components/shared/payment-dialog/PaymentDialog.tsx
-import { useRef as useRef8 } from "react";
+import { useRef as useRef7 } from "react";
 import { jsx as jsx22, jsxs as jsxs17 } from "react/jsx-runtime";
 var PaymentDialog = ({ top = 0 }) => {
   const { t: t2 } = useTranslation();
-  const contentRef = useRef8(null);
+  const contentRef = useRef7(null);
   return /* @__PURE__ */ jsxs17(Modal2, { size: "md", top, contentRef, children: [
     /* @__PURE__ */ jsx22(ModalHeader, { bordered: true, children: /* @__PURE__ */ jsx22(Text, { $size: 18, children: t2("Edit payment method") }) }),
     /* @__PURE__ */ jsx22(PaymentMethodDetails, {})
@@ -15825,11 +16392,8 @@ var PaymentForm = ({ onConfirm, financeData }) => {
   const [isConfirmed, setIsConfirmed] = useState11(false);
   const [isPaymentComplete, setIsPaymentComplete] = useState11(false);
   const [isAddressComplete, setIsAddressComplete] = useState11(() => {
-    if (!isCheckoutData(data)) {
-      return true;
-    }
     const shouldCollectAddress = shouldCollectBillingAddress(
-      data.checkoutSettings.collectAddress,
+      data?.checkoutSettings.collectAddress ?? false,
       financeData
     );
     return !shouldCollectAddress;
@@ -15888,7 +16452,7 @@ var PaymentForm = ({ onConfirm, financeData }) => {
             }
           }
         ) }),
-        stripe && isCheckoutData(data) && data.checkoutSettings.collectEmail && /* @__PURE__ */ jsxs18(Box, { "data-field": "name", $marginBottom: "1.5rem", $verticalAlign: "top", children: [
+        stripe && data?.checkoutSettings.collectEmail && /* @__PURE__ */ jsxs18(Box, { "data-field": "name", $marginBottom: "1.5rem", $verticalAlign: "top", children: [
           /* @__PURE__ */ jsx23(Label, { htmlFor: "email", children: "Email" }),
           /* @__PURE__ */ jsx23(
             Input2,
@@ -15902,16 +16466,16 @@ var PaymentForm = ({ onConfirm, financeData }) => {
             }
           )
         ] }),
-        isCheckoutData(data) && (shouldCollectBillingAddress(
-          data.checkoutSettings.collectAddress,
+        (shouldCollectBillingAddress(
+          data?.checkoutSettings.collectAddress ?? false,
           financeData
-        ) || data.checkoutSettings.collectPhone) && /* @__PURE__ */ jsx23(Box, { $marginBottom: "3.5rem", children: /* @__PURE__ */ jsx23(
+        ) || data?.checkoutSettings.collectPhone) && /* @__PURE__ */ jsx23(Box, { $marginBottom: "3.5rem", children: /* @__PURE__ */ jsx23(
           AddressElement,
           {
             options: {
               mode: "billing",
               fields: {
-                phone: data.checkoutSettings.collectPhone ? "always" : "never"
+                phone: data?.checkoutSettings.collectPhone ? "always" : "never"
               }
             },
             id: "address-element",
@@ -15939,7 +16503,7 @@ var PaymentForm = ({ onConfirm, financeData }) => {
 };
 // src/components/shared/period-toggle/PeriodToggle.tsx
-import { useMemo as useMemo10 } from "react";
+import { useMemo as useMemo11 } from "react";
 import { jsx as jsx24 } from "react/jsx-runtime";
 var PeriodToggle = ({
   options,
@@ -15950,7 +16514,7 @@ var PeriodToggle = ({
   const { t: t2 } = useTranslation();
   const { settings } = useEmbed();
   const isLightBackground = useIsLightBackground();
-  const savingsPercentage = useMemo10(() => {
+  const savingsPercentage = useMemo11(() => {
     if (selectedPlan) {
       const monthlyBillingPrice = getPlanPrice(selectedPlan, "month");
       const yearlyBillingPrice = getPlanPrice(selectedPlan, "year");
@@ -15963,6 +16527,7 @@ var PeriodToggle = ({
   return /* @__PURE__ */ jsx24(
     Flex,
     {
+      "data-testid": "sch-period-toggle",
       $margin: 0,
       $backgroundColor: settings.theme.card.background,
       $borderWidth: "1px",
@@ -15977,9 +16542,11 @@ var PeriodToggle = ({
       },
       children: options.map((option) => {
         const element = /* @__PURE__ */ jsx24(
-          Flex,
+          Button,
           {
-            tabIndex: 0,
+            "data-testid": "sch-period-toggle-button",
+            $size: "sm",
+            $variant: "text",
             onClick: () => onSelect(option),
             onKeyDown: (event) => {
               if (event.key === "Enter" || event.key === " ") {
@@ -15987,19 +16554,22 @@ var PeriodToggle = ({
                 onSelect(option);
               }
             },
-            $justifyContent: "center",
-            $alignItems: "center",
-            $flexBasis: "50%",
-            $whiteSpace: "nowrap",
-            $padding: "0.75rem 1rem",
-            ...option === selectedOption && {
-              $backgroundColor: isLightBackground ? "hsla(0, 0%, 0%, 0.125)" : "hsla(0, 0%, 100%, 0.125)"
+            style: {
+              flexBasis: "50%",
+              textDecoration: "none",
+              whiteSpace: "nowrap",
+              borderRadius: "2.5rem",
+              ...option === selectedOption && {
+                backgroundColor: isLightBackground ? "hsla(0, 0%, 0%, 0.125)" : "hsla(0, 0%, 100%, 0.125)"
+              }
             },
-            $borderRadius: "2.5rem",
             children: /* @__PURE__ */ jsx24(
               Text,
               {
-                style: { flexShrink: 0 },
+                style: {
+                  flexShrink: 0,
+                  color: settings.theme.typography.text.color
+                },
                 $size: 15,
                 $weight: option === selectedOption ? 600 : 400,
                 children: t2("Billed", { period: adjectify(option) })
@@ -16008,7 +16578,7 @@ var PeriodToggle = ({
           },
           option
         );
-        if (option === "year" && savingsPercentage > 0) {
+        if (option === "year") {
           return /* @__PURE__ */ jsx24(
             Tooltip,
             {
@@ -16030,10 +16600,10 @@ var PeriodToggle = ({
 };
 // src/components/shared/pricing-tiers-tooltip/PricingTiersTooltip.tsx
-import { useMemo as useMemo12 } from "react";
+import { useMemo as useMemo13 } from "react";
 // src/components/shared/pricing-tiers-tooltip/PriceText.tsx
-import { useMemo as useMemo11 } from "react";
+import { useMemo as useMemo12 } from "react";
 import { Fragment as Fragment11, jsx as jsx25, jsxs as jsxs19 } from "react/jsx-runtime";
 var PriceText = ({
   feature,
@@ -16043,7 +16613,7 @@ var PriceText = ({
   perUnitPrice = 0
 }) => {
   const { settings } = useEmbed();
-  const text = useMemo11(() => {
+  const text = useMemo12(() => {
     if (!flatAmount && perUnitPrice) {
       return /* @__PURE__ */ jsxs19(Fragment11, { children: [
         formatCurrency(perUnitPrice, currency),
@@ -16091,19 +16661,22 @@ var PricingTiersTooltip = ({
   const { t: t2 } = useTranslation();
   const { settings } = useEmbed();
   const isLightBackground = useIsLightBackground();
-  const tiers = useMemo12(() => {
-    let start = 1;
-    return priceTiers.map((tier) => {
-      const { upTo, ...rest } = tier;
-      const end = upTo ?? Infinity;
-      const mapped = {
-        ...rest,
-        from: start,
-        to: end
-      };
-      start = end + 1;
-      return mapped;
-    });
+  const { tiers } = useMemo13(() => {
+    return priceTiers.reduce(
+      (acc, tier) => {
+        const end = tier.upTo ?? Infinity;
+        acc.tiers.push({
+          flatAmount: tier.flatAmount ?? void 0,
+          perUnitPrice: tier.perUnitPrice ?? void 0,
+          perUnitPriceDecimal: tier.perUnitPriceDecimal ?? void 0,
+          from: acc.start,
+          to: end
+        });
+        acc.start = end + 1;
+        return acc;
+      },
+      { start: 1, tiers: [] }
+    );
   }, [priceTiers]);
   if (!priceTiers.length) {
     return null;
@@ -16179,13 +16752,13 @@ var PricingTiersTooltip = ({
 };
 // src/components/shared/tiered-pricing-details/TieredPricingDetails.tsx
-import { useMemo as useMemo13 } from "react";
+import { useMemo as useMemo14 } from "react";
 var TieredPricingDetails = ({
   entitlement,
   period
 }) => {
   const { t: t2 } = useTranslation();
-  const { currency, flatAmount, perUnitPrice, upTo } = useMemo13(() => {
+  const { currency, flatAmount, perUnitPrice, upTo } = useMemo14(() => {
     const { currency: currency2, priceTier } = getEntitlementPrice(entitlement, period) || {};
     const { flatAmount: flatAmount2, perUnitPrice: perUnitPrice2, perUnitPriceDecimal, upTo: upTo2 } = priceTier?.[0] || {};
     return {
@@ -16233,36 +16806,32 @@ var TieredPricingDetails = ({
 };
 // src/components/shared/unsubscribe-dialog/UnsubscribeDialog.tsx
-import { useMemo as useMemo14, useRef as useRef9, useState as useState12 } from "react";
+import { useMemo as useMemo15, useRef as useRef8, useState as useState12 } from "react";
 import { jsx as jsx27, jsxs as jsxs21 } from "react/jsx-runtime";
 var UnsubscribeDialog = ({ top = 0 }) => {
   const { t: t2 } = useTranslation();
   const { data, setCheckoutState } = useEmbed();
-  const contentRef = useRef9(null);
+  const contentRef = useRef8(null);
   const [error, setError] = useState12();
   const [isLoading, setIsLoading] = useState12(false);
-  const { planPeriod, currentPlan, currentAddOns, featureUsage, cancelDate } = useMemo14(() => {
-    if (isCheckoutData(data)) {
-      return {
-        planPeriod: data.company?.plan?.planPeriod || "month",
-        currentPlan: data.company?.plan,
-        currentAddOns: data.company?.addOns || [],
-        featureUsage: data.featureUsage,
-        cancelDate: new Date(
-          data.subscription?.cancelAt || data.upcomingInvoice?.dueDate || Date.now()
-        )
-      };
-    }
+  const { planPeriod, currentPlan, currentAddOns, featureUsage, cancelDate } = useMemo15(() => {
+    const cancelDate2 = data?.subscription?.cancelAt || data?.upcomingInvoice?.dueDate;
     return {
-      planPeriod: "month",
-      currentPlan: void 0,
-      currentAddOns: [],
-      featureUsage: void 0,
-      cancelDate: /* @__PURE__ */ new Date()
+      planPeriod: data?.company?.plan?.planPeriod || "month",
+      currentPlan: data?.company?.plan,
+      currentAddOns: data?.company?.addOns || [],
+      featureUsage: data?.featureUsage,
+      cancelDate: cancelDate2 ? new Date(cancelDate2) : /* @__PURE__ */ new Date()
     };
-  }, [data]);
+  }, [
+    data?.company?.addOns,
+    data?.company?.plan,
+    data?.featureUsage,
+    data?.subscription?.cancelAt,
+    data?.upcomingInvoice?.dueDate
+  ]);
   const { plans: availablePlans, addOns: availableAddOns } = useAvailablePlans(planPeriod);
-  const selectedPlan = useMemo14(
+  const selectedPlan = useMemo15(
     () => availablePlans.find((plan) => plan.id === currentPlan?.id),
     [currentPlan?.id, availablePlans]
   );
@@ -16271,7 +16840,7 @@ var UnsubscribeDialog = ({ top = 0 }) => {
     createActiveUsageBasedEntitlementsReducer(currentEntitlements, planPeriod),
     []
   );
-  const addOns = useMemo14(
+  const addOns = useMemo15(
     () => availableAddOns.map((available) => ({
       ...available,
       isSelected: currentAddOns.some((current) => available.id === current.id) ?? false
@@ -16537,29 +17106,34 @@ var StyledViewport = dt.div.withConfig({
 import { Fragment as Fragment13, jsx as jsx31, jsxs as jsxs24 } from "react/jsx-runtime";
 var Viewport = forwardRef5(
   ({ children, portal, ...props }, ref) => {
+    const portalRef = useRef9(portal || document.body);
     const { data, layout, settings } = useEmbed();
     const [top, setTop] = useState13(0);
-    const { canCheckout, isBadgeVisible } = useMemo15(() => {
+    const { canCheckout, isBadgeVisible } = useMemo16(() => {
       return {
         canCheckout: data?.capabilities?.checkout ?? true,
         isBadgeVisible: !data?.capabilities?.badgeVisibility || settings.badge?.visibility !== "hidden"
       };
-    }, [data, settings]);
+    }, [
+      data?.capabilities?.badgeVisibility,
+      data?.capabilities?.checkout,
+      settings.badge?.visibility
+    ]);
     useLayoutEffect5(() => {
-      const parent = portal || document.body;
+      const portal2 = portalRef.current;
       const setModalY = (0, import_debounce3.default)(() => {
         const value = Math.abs(
-          (parent === document.body ? window.scrollY : parent.scrollTop) ?? 0
+          (portal2 === document.body ? window.scrollY : portal2.scrollTop) ?? 0
         );
         setTop(value);
       }, 250);
-      parent.style.overflow = layout === "checkout" || layout === "unsubscribe" || layout === "payment" ? "hidden" : "";
+      portal2.style.overflow = layout === "checkout" || layout === "unsubscribe" || layout === "payment" ? "hidden" : "";
       window.addEventListener("scroll", setModalY);
       return () => {
         window.removeEventListener("scroll", setModalY);
-        parent.style.overflow = "";
+        portal2.style.overflow = "";
       };
-    }, [portal, layout]);
+    }, [layout]);
     return /* @__PURE__ */ jsxs24(Fragment13, { children: [
       /* @__PURE__ */ jsxs24(StyledViewport, { ref, ...props, children: [
         /* @__PURE__ */ jsx31(RenderLayout, { children }),
@@ -16637,10 +17211,10 @@ var ButtonElement = forwardRef6(({ children, className, ...rest }, ref) => {
 ButtonElement.displayName = "Button";
 // src/components/elements/included-features/IncludedFeatures.tsx
-import { forwardRef as forwardRef7, useMemo as useMemo17, useRef as useRef10, useState as useState14 } from "react";
+import { forwardRef as forwardRef7, useMemo as useMemo18, useRef as useRef10, useState as useState14 } from "react";
 // src/components/elements/included-features/UsageDetails.tsx
-import { Fragment as Fragment14, useMemo as useMemo16 } from "react";
+import { Fragment as Fragment14, useMemo as useMemo17 } from "react";
 import { Fragment as Fragment15, jsx as jsx33, jsxs as jsxs25 } from "react/jsx-runtime";
 var UsageDetails = ({
   entitlement,
@@ -16659,24 +17233,17 @@ var UsageDetails = ({
   } = entitlement;
   const { t: t2 } = useTranslation();
   const { data } = useEmbed();
-  const { period, showCredits } = useMemo16(() => {
-    const showCredits2 = data?.showCredits ?? true;
-    if (isCheckoutData(data)) {
-      return {
-        period: data.company?.plan?.planPeriod || void 0,
-        showCredits: showCredits2
-      };
-    }
+  const { period, showCredits } = useMemo17(() => {
     return {
-      period: void 0,
-      showCredits: showCredits2
+      period: data?.company?.plan?.planPeriod || void 0,
+      showCredits: data?.showCredits ?? true
     };
-  }, [data]);
-  const { billingPrice, cost, currentTier } = useMemo16(
+  }, [data?.company?.plan?.planPeriod, data?.showCredits]);
+  const { billingPrice, cost, currentTier } = useMemo17(
     () => getUsageDetails(entitlement, period),
     [entitlement, period]
   );
-  const text = useMemo16(() => {
+  const text = useMemo17(() => {
     if (!feature) {
       return;
     }
@@ -16749,10 +17316,10 @@ var UsageDetails = ({
     priceBehavior,
     softLimit,
     billingPrice,
-    currentTier?.to,
+    currentTier,
     showCredits
   ]);
-  const usageText = useMemo16(() => {
+  const usageText = useMemo17(() => {
     if (!feature) {
       return;
     }
@@ -16901,36 +17468,34 @@ var IncludedFeatures = forwardRef7(({ className, ...rest }, ref) => {
   const props = resolveDesignProps2(rest);
   const { t: t2 } = useTranslation();
   const { data, settings } = useEmbed();
-  const elements = useRef10([]);
-  const shouldWrapChildren = useWrapChildren(elements.current);
+  const elementsRef = useRef10([]);
+  const shouldWrapChildren = useWrapChildren(elementsRef);
   const isLightBackground = useIsLightBackground();
   const [showCount, setShowCount] = useState14(VISIBLE_ENTITLEMENT_COUNT);
-  const { plan, addOns, featureUsage } = useMemo17(() => {
-    if (isCheckoutData(data)) {
-      const orderedFeatureUsage = props.visibleFeatures?.reduce(
-        (acc, id) => {
-          const mappedFeatureUsage = data.featureUsage?.features.find(
-            (usage) => usage.feature?.id === id
-          );
-          if (mappedFeatureUsage) {
-            acc.push(mappedFeatureUsage);
-          }
-          return acc;
-        },
-        []
-      );
-      return {
-        plan: data.company?.plan,
-        addOns: data.company?.addOns || [],
-        featureUsage: orderedFeatureUsage || data.featureUsage?.features || []
-      };
-    }
+  const { plan, addOns, featureUsage } = useMemo18(() => {
+    const orderedFeatureUsage = props.visibleFeatures?.reduce(
+      (acc, id) => {
+        const mappedFeatureUsage = data?.featureUsage?.features.find(
+          (usage) => usage.feature?.id === id
+        );
+        if (mappedFeatureUsage) {
+          acc.push(mappedFeatureUsage);
+        }
+        return acc;
+      },
+      []
+    );
     return {
-      plan: void 0,
-      addOns: [],
-      featureUsage: []
+      plan: data?.company?.plan,
+      addOns: data?.company?.addOns || [],
+      featureUsage: orderedFeatureUsage || data?.featureUsage?.features || []
     };
-  }, [props.visibleFeatures, data]);
+  }, [
+    props.visibleFeatures,
+    data?.company?.plan,
+    data?.company?.addOns,
+    data?.featureUsage?.features
+  ]);
   const featureListSize = featureUsage.length;
   const handleToggleShowAll = () => {
     setShowCount(
@@ -16960,7 +17525,7 @@ var IncludedFeatures = forwardRef7(({ className, ...rest }, ref) => {
             {
               ref: (el) => {
                 if (el) {
-                  elements.current.push(el);
+                  elementsRef.current.push(el);
                 }
               },
               $flexWrap: "wrap",
@@ -17041,7 +17606,7 @@ var IncludedFeatures = forwardRef7(({ className, ...rest }, ref) => {
 IncludedFeatures.displayName = "IncludedFeatures";
 // src/components/elements/invoices/Invoices.tsx
-import { forwardRef as forwardRef8, useCallback as useCallback11, useEffect as useEffect7, useState as useState15 } from "react";
+import { forwardRef as forwardRef8, useCallback as useCallback11, useEffect as useEffect6, useState as useState15 } from "react";
 import { Fragment as Fragment16, jsx as jsx35, jsxs as jsxs27 } from "react/jsx-runtime";
 function resolveDesignProps3(props) {
   return {
@@ -17103,10 +17668,10 @@ var Invoices = forwardRef8(({ className, data, ...rest }, ref) => {
       (prev2) => prev2 !== props.limit.number ? props.limit.number : MAX_VISIBLE_INVOICE_COUNT
     );
   };
-  useEffect7(() => {
+  useEffect6(() => {
     getInvoices();
   }, [getInvoices]);
-  useEffect7(() => {
+  useEffect6(() => {
     setInvoices(formatInvoices(data));
   }, [data]);
   if (invoices.length === 0) {
@@ -17186,7 +17751,7 @@ var Invoices = forwardRef8(({ className, data, ...rest }, ref) => {
 Invoices.displayName = "Invoices";
 // src/components/elements/metered-features/MeteredFeatures.tsx
-import { forwardRef as forwardRef9, useCallback as useCallback12, useMemo as useMemo18, useRef as useRef11, useState as useState16 } from "react";
+import { forwardRef as forwardRef9, useCallback as useCallback12, useMemo as useMemo19, useRef as useRef11, useState as useState16 } from "react";
 // src/components/elements/metered-features/Meter.tsx
 import { jsx as jsx36 } from "react/jsx-runtime";
@@ -17388,45 +17953,31 @@ function resolveDesignProps4(props) {
 }
 var MeteredFeatures = forwardRef9(({ className, ...rest }, ref) => {
   const props = resolveDesignProps4(rest);
-  const elements = useRef11([]);
-  const shouldWrapChildren = useWrapChildren(elements.current);
+  const elementsRef = useRef11([]);
+  const shouldWrapChildren = useWrapChildren(elementsRef);
   const { t: t2 } = useTranslation();
   const { data, settings, setCheckoutState } = useEmbed();
   const isLightBackground = useIsLightBackground();
-  const { period, meteredFeatures, creditGroups, showCredits } = useMemo18(() => {
-    const showCredits2 = data?.showCredits ?? true;
-    if (isCheckoutData(data)) {
-      const period2 = typeof data.company?.plan?.planPeriod === "string" ? data.company?.plan?.planPeriod : void 0;
-      const orderedFeatureUsage = props.visibleFeatures?.reduce(
-        (acc, id) => {
-          const mappedFeatureUsage = data.featureUsage?.features.find(
-            (usage) => usage.feature?.id === id
-          );
-          if (mappedFeatureUsage) {
-            acc.push(mappedFeatureUsage);
-          }
-          return acc;
-        },
-        []
-      );
-      return {
-        period: period2,
-        meteredFeatures: (orderedFeatureUsage || data.featureUsage?.features || []).filter(
-          ({ feature }) => feature?.featureType === "event" /* Event */ || feature?.featureType === "trait" /* Trait */
-        ),
-        creditGroups: groupCreditGrants(data.creditGrants, {
-          groupBy: "credit"
-        }),
-        showCredits: showCredits2
-      };
-    }
-    return {
-      period: void 0,
-      meteredFeatures: [],
-      creditGroups: [],
-      showCredits: showCredits2
-    };
-  }, [props.visibleFeatures, data]);
+  const meteredFeatures = useMemo19(() => {
+    const orderedFeatureUsage = props.visibleFeatures?.reduce(
+      (acc, id) => {
+        const mappedFeatureUsage = data?.featureUsage?.features.find(
+          (usage) => usage.feature?.id === id
+        );
+        if (mappedFeatureUsage) {
+          acc.push(mappedFeatureUsage);
+        }
+        return acc;
+      },
+      []
+    );
+    return (orderedFeatureUsage || data?.featureUsage?.features || []).filter(
+      ({ feature }) => feature?.featureType === "event" /* Event */ || feature?.featureType === "trait" /* Trait */
+    );
+  }, [props.visibleFeatures, data?.featureUsage?.features]);
+  const creditGroups = groupCreditGrants(data?.creditGrants || [], {
+    groupBy: "credit"
+  });
   const [creditVisibility, setCreditVisibility] = useState16(
     creditGroups.map(({ id }) => ({ id, isExpanded: false }))
   );
@@ -17441,6 +17992,9 @@ var MeteredFeatures = forwardRef9(({ className, ...rest }, ref) => {
   if (!shouldShowFeatures) {
     return null;
   }
+  const period = typeof data?.company?.plan?.planPeriod === "string" ? data.company?.plan?.planPeriod : void 0;
+  const canCheckout = data?.capabilities?.checkout ?? false;
+  const showCredits = data?.showCredits ?? true;
   return /* @__PURE__ */ jsxs29(Container2, { ref, className, children: [
     meteredFeatures.reduce((acc, entitlement, index) => {
       if (!entitlement.feature) {
@@ -17467,7 +18021,7 @@ var MeteredFeatures = forwardRef9(({ className, ...rest }, ref) => {
                 {
                   ref: (el) => {
                     if (el) {
-                      elements.current.push(el);
+                      elementsRef.current.push(el);
                     }
                   },
                   $flexWrap: "wrap",
@@ -17518,7 +18072,7 @@ var MeteredFeatures = forwardRef9(({ className, ...rest }, ref) => {
                   usageDetails
                 }
               ),
-              priceBehavior === "pay_in_advance" /* PayInAdvance */ && /* @__PURE__ */ jsx38(
+              canCheckout && priceBehavior === "pay_in_advance" /* PayInAdvance */ && /* @__PURE__ */ jsx38(
                 Button,
                 {
                   type: "button",
@@ -17573,7 +18127,7 @@ var MeteredFeatures = forwardRef9(({ className, ...rest }, ref) => {
                   )]
                 }
               ),
-              /* @__PURE__ */ jsx38(
+              canCheckout && /* @__PURE__ */ jsx38(
                 Button,
                 {
                   type: "button",
@@ -17699,10 +18253,10 @@ var MeteredFeatures = forwardRef9(({ className, ...rest }, ref) => {
 MeteredFeatures.displayName = "MeteredFeatures";
 // src/components/elements/payment-method/PaymentMethod.tsx
-import { forwardRef as forwardRef10, useMemo as useMemo20 } from "react";
+import { forwardRef as forwardRef10, useMemo as useMemo21 } from "react";
 // src/components/elements/payment-method/PaymentMethodElement.tsx
-import { useMemo as useMemo19 } from "react";
+import { useMemo as useMemo20 } from "react";
 import { jsx as jsx39, jsxs as jsxs30 } from "react/jsx-runtime";
 var PaymentElement2 = ({
   iconName,
@@ -17822,7 +18376,7 @@ var PaymentListElement = ({
 }) => {
   const isLightBackground = useIsLightBackground();
   const { iconName, iconTitle, label, paymentLast4 } = getPaymentMethodData(paymentMethod);
-  const expirationDate = useMemo19(() => {
+  const expirationDate = useMemo20(() => {
     const { cardExpMonth, cardExpYear } = paymentMethod;
     if (!cardExpMonth || !cardExpYear) {
       return;
@@ -17910,31 +18464,25 @@ var resolveDesignProps5 = (props) => {
 var PaymentMethod = forwardRef10(({ children, className, portal, allowEdit = true, ...rest }, ref) => {
   const props = resolveDesignProps5(rest);
   const { data, setLayout } = useEmbed();
-  const { paymentMethod, monthsToExpiration } = useMemo20(() => {
-    if (isCheckoutData(data)) {
-      const paymentMethod2 = data.subscription?.paymentMethod || data.company?.defaultPaymentMethod;
-      let monthsToExpiration2;
-      if (typeof paymentMethod2?.cardExpYear === "number" && typeof paymentMethod2?.cardExpMonth === "number") {
-        const now = /* @__PURE__ */ new Date();
-        const currentYear = now.getFullYear();
-        const currentMonth = now.getMonth();
-        const timeToExpiration = Math.round(
-          +new Date(paymentMethod2.cardExpYear, paymentMethod2.cardExpMonth - 1) - +new Date(currentYear, currentMonth)
-        );
-        monthsToExpiration2 = Math.round(
-          timeToExpiration / (1e3 * 60 * 60 * 24 * 30)
-        );
-      }
-      return {
-        paymentMethod: paymentMethod2,
-        monthsToExpiration: monthsToExpiration2
-      };
+  const { paymentMethod, monthsToExpiration } = useMemo21(() => {
+    const paymentMethod2 = data?.subscription?.paymentMethod || data?.company?.defaultPaymentMethod;
+    let monthsToExpiration2;
+    if (typeof paymentMethod2?.cardExpYear === "number" && typeof paymentMethod2?.cardExpMonth === "number") {
+      const now = /* @__PURE__ */ new Date();
+      const currentYear = now.getFullYear();
+      const currentMonth = now.getMonth();
+      const timeToExpiration = Math.round(
+        +new Date(paymentMethod2.cardExpYear, paymentMethod2.cardExpMonth - 1) - +new Date(currentYear, currentMonth)
+      );
+      monthsToExpiration2 = Math.round(
+        timeToExpiration / (1e3 * 60 * 60 * 24 * 30)
+      );
     }
     return {
-      paymentMethod: void 0,
-      monthsToExpiration: void 0
+      paymentMethod: paymentMethod2,
+      monthsToExpiration: monthsToExpiration2
     };
-  }, [data]);
+  }, [data?.company?.defaultPaymentMethod, data?.subscription?.paymentMethod]);
   return /* @__PURE__ */ jsx40(Element, { ref, className, children: /* @__PURE__ */ jsx40(
     PaymentMethodElement,
     {
@@ -18103,7 +18651,7 @@ var loadStripe = function loadStripe2() {
 };
 // src/components/elements/payment-method/PaymentMethodDetails.tsx
-import { useCallback as useCallback13, useEffect as useEffect8, useMemo as useMemo21, useState as useState17 } from "react";
+import { useCallback as useCallback13, useEffect as useEffect7, useMemo as useMemo22, useState as useState17 } from "react";
 import { jsx as jsx41, jsxs as jsxs31 } from "react/jsx-runtime";
 var resolveDesignProps6 = () => {
   return {
@@ -18132,20 +18680,17 @@ var PaymentMethodDetails = ({
     updatePaymentMethod,
     deletePaymentMethod
   } = useEmbed();
-  const { defaultPaymentMethod, paymentMethods, subscription } = useMemo21(() => {
-    if (isCheckoutData(data)) {
-      return {
-        defaultPaymentMethod: data.company?.defaultPaymentMethod,
-        paymentMethods: data.company?.paymentMethods || [],
-        subscription: data.subscription
-      };
-    }
+  const { defaultPaymentMethod, paymentMethods, subscription } = useMemo22(() => {
     return {
-      defaultPaymentMethod: void 0,
-      paymentMethods: [],
-      subscription: void 0
+      defaultPaymentMethod: data?.company?.defaultPaymentMethod,
+      paymentMethods: data?.company?.paymentMethods || [],
+      subscription: data?.subscription
     };
-  }, [data]);
+  }, [
+    data?.company?.defaultPaymentMethod,
+    data?.company?.paymentMethods,
+    data?.subscription
+  ]);
   const isLightBackground = useIsLightBackground();
   const [isLoading, setIsLoading] = useState17(false);
   const [error, setError] = useState17();
@@ -18166,7 +18711,7 @@ var PaymentMethodDetails = ({
     },
     autoConfirm: true
   });
-  const monthsToExpiration = useMemo21(() => {
+  const monthsToExpiration = useMemo22(() => {
     let expiration;
     if (typeof currentPaymentMethod?.cardExpYear === "number" && typeof currentPaymentMethod?.cardExpMonth === "number") {
       const now = /* @__PURE__ */ new Date();
@@ -18240,7 +18785,7 @@ var PaymentMethodDetails = ({
     },
     [t2, deletePaymentMethod]
   );
-  useEffect8(() => {
+  useEffect7(() => {
     if (!stripe && setupIntent) {
       let publishableKey = setupIntent.publishableKey || setupIntent.schematicPublishableKey;
       const stripeOptions = {};
@@ -18252,7 +18797,7 @@ var PaymentMethodDetails = ({
       setStripe(stripePromise2);
     }
   }, [stripe, setupIntent]);
-  useEffect8(() => {
+  useEffect7(() => {
     if (!setupIntent && (!currentPaymentMethod || showPaymentForm)) {
       initializePaymentMethod();
     }
@@ -18409,7 +18954,7 @@ var PaymentMethodDetails = ({
 };
 // src/components/elements/plan-manager/PlanManager.tsx
-import { forwardRef as forwardRef11, useMemo as useMemo23 } from "react";
+import { forwardRef as forwardRef11, useMemo as useMemo24 } from "react";
 // src/components/elements/plan-manager/AddOn.tsx
 import { jsx as jsx42, jsxs as jsxs32 } from "react/jsx-runtime";
@@ -18433,7 +18978,7 @@ var AddOn = ({ addOn, currency, layout }) => {
 };
 // src/components/elements/plan-manager/UsageDetails.tsx
-import { Fragment as Fragment19, useMemo as useMemo22 } from "react";
+import { Fragment as Fragment19, useMemo as useMemo23 } from "react";
 import { Fragment as Fragment20, jsx as jsx43, jsxs as jsxs33 } from "react/jsx-runtime";
 var UsageDetails2 = ({
   entitlement,
@@ -18448,11 +18993,11 @@ var UsageDetails2 = ({
     limit,
     amount = 0,
     cost = 0
-  } = useMemo22(
+  } = useMemo23(
     () => getUsageDetails(entitlement, period),
     [entitlement, period]
   );
-  const description = useMemo22(() => {
+  const description = useMemo23(() => {
     const acc = [];
     let index = 0;
     if (entitlement.priceBehavior === "overage" /* Overage */) {
@@ -18616,20 +19161,12 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
     showCredits,
     showZeroPriceAsFree,
     trialPaymentMethodRequired
-  } = useMemo23(() => {
-    const showCredits2 = data?.showCredits ?? true;
-    const showZeroPriceAsFree2 = data?.showZeroPriceAsFree ?? false;
-    if (isCheckoutData(data)) {
-      const {
-        company,
-        creditBundles: creditBundles2,
-        creditGrants,
-        capabilities,
-        postTrialPlan: postTrialPlan2,
-        featureUsage: featureUsage2,
-        trialPaymentMethodRequired: trialPaymentMethodRequired2
-      } = data;
-      const creditGroups2 = groupCreditGrants(creditGrants, {
+  } = useMemo24(() => {
+    return {
+      currentPlan: data?.company?.plan,
+      currentAddOns: data?.company?.addOns || [],
+      creditBundles: data?.creditBundles || [],
+      creditGroups: groupCreditGrants(data?.creditGrants || [], {
         groupBy: "bundle"
       }).reduce(
         (acc, grant) => {
@@ -18646,36 +19183,29 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
           return acc;
         },
         { plan: [], bundles: [], promotional: [] }
-      );
-      return {
-        currentPlan: company?.plan,
-        currentAddOns: company?.addOns || [],
-        creditBundles: creditBundles2,
-        creditGroups: creditGroups2,
-        billingSubscription: company?.billingSubscription,
-        canCheckout: capabilities?.checkout ?? true,
-        postTrialPlan: postTrialPlan2,
-        featureUsage: featureUsage2?.features || [],
-        trialPaymentMethodRequired: trialPaymentMethodRequired2,
-        showCredits: showCredits2,
-        showZeroPriceAsFree: showZeroPriceAsFree2
-      };
-    }
-    return {
-      currentPlan: void 0,
-      currentAddOns: [],
-      creditBundles: [],
-      creditGroups: { plan: [], bundles: [], promotional: [] },
-      billingSubscription: void 0,
-      canCheckout: false,
-      postTrialPlan: void 0,
-      featureUsage: [],
-      trialPaymentMethodRequired: false,
-      showCredits: showCredits2,
-      showZeroPriceAsFree: showZeroPriceAsFree2
+      ),
+      billingSubscription: data?.company?.billingSubscription,
+      canCheckout: data?.capabilities?.checkout ?? false,
+      postTrialPlan: data?.postTrialPlan,
+      featureUsage: data?.featureUsage?.features || [],
+      trialPaymentMethodRequired: data?.trialPaymentMethodRequired ?? false,
+      showCredits: data?.showCredits ?? true,
+      showZeroPriceAsFree: data?.showZeroPriceAsFree ?? false
     };
-  }, [data]);
-  const usageBasedEntitlements = useMemo23(
+  }, [
+    data?.capabilities?.checkout,
+    data?.company?.addOns,
+    data?.company?.billingSubscription,
+    data?.company?.plan,
+    data?.creditBundles,
+    data?.creditGrants,
+    data?.featureUsage?.features,
+    data?.postTrialPlan,
+    data?.showCredits,
+    data?.showZeroPriceAsFree,
+    data?.trialPaymentMethodRequired
+  ]);
+  const usageBasedEntitlements = useMemo24(
     () => featureUsage.filter((usage) => typeof usage.priceBehavior === "string"),
     [featureUsage]
   );
@@ -18684,7 +19214,7 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
     subscriptionCurrency,
     willSubscriptionCancel,
     isTrialSubscription
-  } = useMemo23(() => {
+  } = useMemo24(() => {
     const subscriptionInterval2 = billingSubscription?.interval;
     const subscriptionCurrency2 = billingSubscription?.currency;
     const isTrialSubscription2 = billingSubscription?.status === "trialing";
@@ -19000,46 +19530,111 @@ PlanManager.displayName = "PlanManager";
 import {
   Fragment as Fragment25,
   forwardRef as forwardRef12,
-  useEffect as useEffect9,
-  useMemo as useMemo26,
+  useCallback as useCallback14,
+  useEffect as useEffect8,
+  useMemo as useMemo27,
   useState as useState18
 } from "react";
 // src/components/elements/pricing-table/AddOn.tsx
-import { useMemo as useMemo24 } from "react";
+import { useMemo as useMemo25 } from "react";
 import { Fragment as Fragment22, jsx as jsx45, jsxs as jsxs35 } from "react/jsx-runtime";
+function renderMeteredEntitlementPricing2({
+  priceBehavior,
+  softLimit,
+  price,
+  currency,
+  packageSize,
+  feature,
+  featureName,
+  isTiered
+}) {
+  if (priceBehavior === "overage" /* Overage */ && softLimit) {
+    return /* @__PURE__ */ jsxs35(Fragment22, { children: [
+      "Additional: ",
+      formatCurrency(price, currency),
+      "/",
+      feature ? getFeatureName(
+        feature,
+        packageSize
+      ) : featureName || "unit"
+    ] });
+  }
+  if (priceBehavior === "pay_as_you_go" /* PayAsYouGo */ || priceBehavior === "pay_in_advance" /* PayInAdvance */) {
+    return /* @__PURE__ */ jsxs35(Fragment22, { children: [
+      formatCurrency(price, currency),
+      "/",
+      packageSize > 1 && /* @__PURE__ */ jsxs35(Fragment22, { children: [
+        packageSize,
+        " "
+      ] }),
+      feature ? getFeatureName(
+        feature,
+        packageSize
+      ) : featureName || "unit"
+    ] });
+  }
+  if (isTiered) {
+    return /* @__PURE__ */ jsx45(Fragment22, { children: "Tier-based pricing" });
+  }
+  return null;
+}
+function shouldShowUsageBased2(price, displayableEntitlements) {
+  return price < 0.01 && displayableEntitlements.some((ent) => !ent.isUnlimited);
+}
 var AddOn2 = ({ addOn, sharedProps, selectedPeriod }) => {
   const { layout } = sharedProps;
   const { t: t2 } = useTranslation();
   const { data, settings, setCheckoutState } = useEmbed();
   const isLightBackground = useIsLightBackground();
-  const { currentAddOns, canCheckout, isStandalone, showCallToAction } = useMemo24(() => {
-    if (isCheckoutData(data)) {
+  const { currentAddOns, canCheckout, isStandalone } = useMemo25(() => {
+    const isStandalone2 = typeof data?.component === "undefined";
+    return {
+      currentAddOns: data?.company?.addOns || [],
+      canCheckout: isStandalone2 || (data?.capabilities?.checkout ?? true),
+      isStandalone: isStandalone2
+    };
+  }, [data?.capabilities?.checkout, data?.company?.addOns, data?.component]);
+  const cardPadding = settings.theme.card.padding / TEXT_BASE_SIZE;
+  const isActiveAddOn = addOn.current && selectedPeriod === currentAddOns.find((currentAddOn) => currentAddOn.id === addOn.id)?.planPeriod;
+  const { price: addOnPrice, currency: addOnCurrency } = getAddOnPrice(addOn, selectedPeriod) || {};
+  const displayableEntitlements = addOn.entitlements?.filter(
+    (entitlement) => entitlement.valueType === "unlimited" || entitlement.priceBehavior && [
+      "pay_as_you_go" /* PayAsYouGo */,
+      "pay_in_advance" /* PayInAdvance */,
+      "overage" /* Overage */,
+      "tier" /* Tiered */
+    ].includes(entitlement.priceBehavior)
+  ).map((entitlement) => {
+    if (entitlement.valueType === "unlimited" && !entitlement.priceBehavior) {
       return {
-        currentAddOns: data.company?.addOns || [],
-        canCheckout: data.capabilities?.checkout ?? true,
-        isStandalone: false,
-        showCallToAction: true
+        isUnlimited: true,
+        featureName: entitlement.feature?.name,
+        feature: entitlement.feature
       };
     }
+    const priceData = getEntitlementPrice(entitlement, selectedPeriod);
     return {
-      currentAddOns: [],
-      canCheckout: true,
-      isStandalone: true,
-      showCallToAction: typeof layout.callToActionUrl === "string"
+      isUnlimited: false,
+      featureName: entitlement.feature?.name,
+      feature: entitlement.feature,
+      priceBehavior: entitlement.priceBehavior,
+      softLimit: entitlement.softLimit,
+      price: priceData?.price ?? 0,
+      currency: priceData?.currency || addOnCurrency,
+      packageSize: priceData?.packageSize ?? 1,
+      isTiered: entitlement.priceBehavior === "tier" /* Tiered */
     };
-  }, [data, layout.callToActionUrl]);
-  const cardPadding = settings.theme.card.padding / TEXT_BASE_SIZE;
-  const isCurrentAddOn = isHydratedPlan(addOn) && addOn.current;
-  const isActiveAddOn = isCurrentAddOn && selectedPeriod === currentAddOns.find((currentAddOn) => currentAddOn.id === addOn.id)?.planPeriod;
-  const { price: addOnPrice, currency: addOnCurrency } = getAddOnPrice(addOn, selectedPeriod) || {};
+  }) || [];
   return /* @__PURE__ */ jsxs35(
     Flex,
     {
+      className: "sch-PricingTable_AddOn",
+      "data-testid": "sch-addon",
+      "data-addon-id": addOn.id,
       $position: "relative",
       $flexDirection: "column",
-      $gap: "2rem",
-      $padding: `${cardPadding}rem`,
+      $padding: `${0.75 * cardPadding}rem 0`,
       $backgroundColor: settings.theme.card.background,
       $borderRadius: `${settings.theme.card.borderRadius / TEXT_BASE_SIZE}rem`,
       $outlineWidth: "2px",
@@ -19049,36 +19644,56 @@ var AddOn2 = ({ addOn, sharedProps, selectedPeriod }) => {
         $boxShadow: cardBoxShadow
       },
       children: [
-        /* @__PURE__ */ jsxs35(Flex, { $flexDirection: "column", $gap: "0.75rem", children: [
-          /* @__PURE__ */ jsx45(Box, { children: /* @__PURE__ */ jsx45(Text, { display: layout.plans.name.fontStyle, children: addOn.name }) }),
-          layout.addOns.showDescription && /* @__PURE__ */ jsx45(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ jsx45(Text, { display: layout.plans.description.fontStyle, children: addOn.description }) }),
-          /* @__PURE__ */ jsx45(Box, { children: /* @__PURE__ */ jsxs35(Text, { display: layout.plans.name.fontStyle, children: [
-            formatCurrency(addOnPrice ?? 0, addOnCurrency),
-            /* @__PURE__ */ jsxs35("sub", { children: [
-              "/",
-              selectedPeriod
-            ] })
-          ] }) }),
-          isActiveAddOn && /* @__PURE__ */ jsx45(
-            Flex,
-            {
-              $position: "absolute",
-              $right: "1rem",
-              $top: "1rem",
-              $backgroundColor: settings.theme.primary,
-              $borderRadius: "9999px",
-              $padding: "0.125rem 0.85rem",
-              children: /* @__PURE__ */ jsx45(
+        /* @__PURE__ */ jsxs35(
+          Flex,
+          {
+            $flexDirection: "column",
+            $gap: "0.75rem",
+            $padding: `0 ${cardPadding}rem ${displayableEntitlements.length > 0 ? 0.75 * cardPadding : 0}rem`,
+            $borderWidth: "0",
+            $borderBottomWidth: displayableEntitlements.length > 0 ? "1px" : "0",
+            $borderStyle: "solid",
+            $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.175)" : "hsla(0, 0%, 100%, 0.175)",
+            children: [
+              /* @__PURE__ */ jsx45(Box, { children: /* @__PURE__ */ jsx45(Text, { display: layout.plans.name.fontStyle, children: addOn.name }) }),
+              layout.addOns.showDescription && /* @__PURE__ */ jsx45(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ jsx45(Text, { display: layout.plans.description.fontStyle, children: addOn.description }) }),
+              /* @__PURE__ */ jsx45(Box, { children: /* @__PURE__ */ jsx45(
                 Text,
                 {
-                  $size: 0.75 * settings.theme.typography.text.fontSize,
-                  $color: hexToHSL(settings.theme.primary).l > 50 ? "#000000" : "#FFFFFF",
-                  children: t2("Active")
+                  "data-testid": "sch-addon-price",
+                  display: layout.plans.name.fontStyle,
+                  children: shouldShowUsageBased2(addOnPrice ?? 0, displayableEntitlements) ? t2("Usage-based") : /* @__PURE__ */ jsxs35(Fragment22, { children: [
+                    formatCurrency(addOnPrice ?? 0, addOnCurrency),
+                    /* @__PURE__ */ jsxs35("sub", { children: [
+                      "/",
+                      selectedPeriod
+                    ] })
+                  ] })
+                }
+              ) }),
+              isActiveAddOn && /* @__PURE__ */ jsx45(
+                Flex,
+                {
+                  "data-testid": "sch-addon-active",
+                  $position: "absolute",
+                  $right: "1rem",
+                  $top: "1rem",
+                  $backgroundColor: settings.theme.primary,
+                  $borderRadius: "9999px",
+                  $padding: "0.125rem 0.85rem",
+                  children: /* @__PURE__ */ jsx45(
+                    Text,
+                    {
+                      $size: 0.75 * settings.theme.typography.text.fontSize,
+                      $color: hexToHSL(settings.theme.primary).l > 50 ? "#000000" : "#FFFFFF",
+                      children: t2("Active")
+                    }
+                  )
                 }
               )
-            }
-          )
-        ] }),
+            ]
+          }
+        ),
         /* @__PURE__ */ jsxs35(
           Flex,
           {
@@ -19086,24 +19701,19 @@ var AddOn2 = ({ addOn, sharedProps, selectedPeriod }) => {
             $justifyContent: "end",
             $gap: `${cardPadding}rem`,
             $flexGrow: 1,
+            $padding: `${0.75 * cardPadding}rem ${cardPadding}rem 0`,
             children: [
-              layout.addOns.showEntitlements && /* @__PURE__ */ jsx45(
-                Flex,
-                {
-                  $flexDirection: "column",
-                  $position: "relative",
-                  $gap: "1rem",
-                  $flexGrow: 1,
-                  children: addOn.entitlements.map((entitlement, entitlementIndex) => {
-                    const metricPeriodName = getMetricPeriodName(entitlement);
-                    return /* @__PURE__ */ jsx45(
-                      Flex,
-                      {
-                        $flexWrap: "wrap",
-                        $justifyContent: "space-between",
-                        $alignItems: "center",
-                        $gap: "1rem",
-                        children: /* @__PURE__ */ jsxs35(Flex, { $gap: "1rem", children: [
+              layout.addOns.showEntitlements && displayableEntitlements.length > 0 && /* @__PURE__ */ jsx45(Flex, { $flexDirection: "column", $gap: "1rem", $flexGrow: 1, children: displayableEntitlements.map((entitlement, idx) => {
+                if (entitlement.isUnlimited) {
+                  return /* @__PURE__ */ jsxs35(
+                    Flex,
+                    {
+                      $flexWrap: "wrap",
+                      $justifyContent: "space-between",
+                      $alignItems: "center",
+                      $gap: "1rem",
+                      children: [
+                        /* @__PURE__ */ jsxs35(Flex, { $gap: "1rem", children: [
                           layout.addOns.showFeatureIcons && entitlement.feature?.icon && /* @__PURE__ */ jsx45(
                             Icon3,
                             {
@@ -19113,57 +19723,82 @@ var AddOn2 = ({ addOn, sharedProps, selectedPeriod }) => {
                               rounded: true
                             }
                           ),
-                          /* @__PURE__ */ jsxs35(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
-                            entitlement.feature?.name && /* @__PURE__ */ jsx45(Flex, { $alignItems: "center", $flexGrow: 1, children: /* @__PURE__ */ jsx45(Text, { children: entitlement.valueType === "numeric" /* Numeric */ || entitlement.valueType === "unlimited" /* Unlimited */ || entitlement.valueType === "trait" /* Trait */ ? /* @__PURE__ */ jsxs35(Fragment22, { children: [
-                              entitlement.valueType === "unlimited" /* Unlimited */ ? t2("Unlimited", {
-                                item: getFeatureName(entitlement.feature)
-                              }) : typeof entitlement.valueNumeric === "number" && /* @__PURE__ */ jsxs35(Fragment22, { children: [
-                                formatNumber(entitlement.valueNumeric),
-                                " ",
-                                getFeatureName(
-                                  entitlement.feature,
-                                  entitlement.valueNumeric
-                                )
-                              ] }),
-                              metricPeriodName && /* @__PURE__ */ jsxs35(Fragment22, { children: [
-                                " ",
-                                t2("per"),
-                                " ",
-                                t2(metricPeriodName)
-                              ] })
-                            ] }) : entitlement.feature.name }) }),
-                            layout.plans.showFeatureDescriptions && entitlement.feature?.description && /* @__PURE__ */ jsx45(
-                              Text,
-                              {
-                                $size: 0.875 * settings.theme.typography.text.fontSize,
-                                $color: `color-mix(in oklch, ${settings.theme.typography.text.color}, ${settings.theme.card.background})`,
-                                children: entitlement.feature.description
-                              }
-                            )
-                          ] })
-                        ] })
-                      },
-                      entitlementIndex
-                    );
-                  })
+                          entitlement.feature && /* @__PURE__ */ jsx45(
+                            Flex,
+                            {
+                              $flexDirection: "column",
+                              $justifyContent: "center",
+                              children: /* @__PURE__ */ jsx45(Text, { children: getFeatureName(entitlement.feature) })
+                            }
+                          )
+                        ] }),
+                        /* @__PURE__ */ jsx45(
+                          Text,
+                          {
+                            style: { opacity: 0.54 },
+                            $size: 0.875 * settings.theme.typography.text.fontSize,
+                            $color: settings.theme.typography.text.color,
+                            children: "Unlimited"
+                          }
+                        )
+                      ]
+                    },
+                    idx
+                  );
                 }
-              ),
-              showCallToAction && layout.upgrade.isVisible && /* @__PURE__ */ jsx45(
+                const meteredEntitlement = entitlement;
+                return /* @__PURE__ */ jsxs35(
+                  Flex,
+                  {
+                    $flexWrap: "wrap",
+                    $justifyContent: "space-between",
+                    $alignItems: "center",
+                    $gap: "1rem",
+                    children: [
+                      /* @__PURE__ */ jsxs35(Flex, { $gap: "1rem", children: [
+                        meteredEntitlement.feature?.icon && /* @__PURE__ */ jsx45(
+                          Icon3,
+                          {
+                            "data-testid": "sch-feature-icon",
+                            name: meteredEntitlement.feature.icon,
+                            color: settings.theme.primary,
+                            background: isLightBackground ? "hsla(0, 0%, 0%, 0.0625)" : "hsla(0, 0%, 100%, 0.25)",
+                            rounded: true
+                          }
+                        ),
+                        /* @__PURE__ */ jsx45(Flex, { $flexDirection: "column", $justifyContent: "center", children: /* @__PURE__ */ jsx45(Text, { children: meteredEntitlement.priceBehavior === "overage" /* Overage */ && meteredEntitlement.softLimit ? `${meteredEntitlement.softLimit} ${getEntitlementFeatureName(meteredEntitlement, "units")}` : getEntitlementFeatureName(meteredEntitlement) }) })
+                      ] }),
+                      /* @__PURE__ */ jsx45(
+                        Text,
+                        {
+                          style: { opacity: 0.54 },
+                          $size: 0.875 * settings.theme.typography.text.fontSize,
+                          $color: settings.theme.typography.text.color,
+                          children: renderMeteredEntitlementPricing2(meteredEntitlement)
+                        }
+                      )
+                    ]
+                  },
+                  idx
+                );
+              }) }),
+              sharedProps.showCallToAction && (layout.upgrade.isVisible || layout.downgrade.isVisible) && /* @__PURE__ */ jsx45(Flex, { $flexDirection: "column", $gap: "0.5rem", children: /* @__PURE__ */ jsx45(
                 Button,
                 {
                   type: "button",
-                  disabled: isHydratedPlan(addOn) && !addOn.valid || !canCheckout,
+                  disabled: !addOn.valid || !canCheckout,
+                  "data-testid": "sch-addon-cta-button",
                   $size: layout.upgrade.buttonSize,
                   $color: isActiveAddOn ? "danger" : layout.upgrade.buttonStyle,
-                  $variant: isActiveAddOn ? "ghost" : isCurrentAddOn ? "outline" : "filled",
-                  ...layout.callToActionUrl ? {
+                  $variant: isActiveAddOn ? "ghost" : addOn.current ? "outline" : "filled",
+                  ...sharedProps.callToActionUrl ? {
                     as: "a",
-                    href: layout.callToActionUrl,
+                    href: sharedProps.callToActionUrl,
                     rel: "noreferrer",
                     target: "_blank"
                   } : {
                     onClick: () => {
-                      layout.onCallToAction?.(addOn);
+                      sharedProps.onCallToAction?.(addOn);
                       if (!isStandalone && !addOn.custom) {
                         setCheckoutState({
                           period: selectedPeriod,
@@ -19174,9 +19809,9 @@ var AddOn2 = ({ addOn, sharedProps, selectedPeriod }) => {
                     }
                   },
                   $fullWidth: true,
-                  children: isActiveAddOn ? t2("Remove add-on") : isCurrentAddOn ? t2("Change add-on") : t2("Choose add-on")
+                  children: isActiveAddOn ? t2("Remove add-on") : addOn.current ? t2("Change add-on") : t2("Choose add-on")
                 }
-              )
+              ) })
             ]
           }
         )
@@ -19186,16 +19821,16 @@ var AddOn2 = ({ addOn, sharedProps, selectedPeriod }) => {
 };
 // src/components/elements/pricing-table/Plan.tsx
-import { useMemo as useMemo25 } from "react";
+import { useMemo as useMemo26 } from "react";
 // src/components/elements/pricing-table/Entitlement.tsx
 import { Fragment as Fragment23, jsx as jsx46, jsxs as jsxs36 } from "react/jsx-runtime";
 var Entitlement = ({
   entitlement,
+  sharedProps,
+  selectedPeriod = "month" /* Month */,
   credits = [],
-  selectedPeriod,
-  showCredits,
-  sharedProps
+  showCredits = true
 }) => {
   const { layout } = sharedProps;
   const { t: t2 } = useTranslation();
@@ -19207,7 +19842,7 @@ var Entitlement = ({
     currency: entitlementCurrency,
     packageSize: entitlementPackageSize = 1
   } = getEntitlementPrice(entitlement, selectedPeriod) || {};
-  const limit = entitlement.softLimit ?? entitlement.valueNumeric;
+  const limit = entitlement.softLimit ?? entitlement.valueNumeric ?? void 0;
   const metricPeriodName = getMetricPeriodName(entitlement);
   const creditBasedEntitlementLimit = getCreditBasedEntitlementLimit(
     entitlement,
@@ -19217,6 +19852,7 @@ var Entitlement = ({
     layout.plans.showFeatureIcons && entitlement.feature?.icon && /* @__PURE__ */ jsx46(
       Icon3,
       {
+        "data-testid": "sch-feature-icon",
         name: entitlement.feature.icon,
         color: settings.theme.primary,
         background: `color-mix(in oklch, ${settings.theme.card.background} 87.5%, ${isLightBackground ? "black" : "white"})`,
@@ -19231,7 +19867,7 @@ var Entitlement = ({
           t2("per"),
           " ",
           entitlementPackageSize > 1 && /* @__PURE__ */ jsxs36(Fragment23, { children: [
-            entitlementPackageSize,
+            formatNumber(entitlementPackageSize),
             " "
           ] }),
           getFeatureName(entitlement.feature, entitlementPackageSize),
@@ -19247,26 +19883,26 @@ var Entitlement = ({
             entitlement,
             period: selectedPeriod
           }
-        ) : showCredits && entitlement.priceBehavior === "credit_burndown" /* Credit */ && entitlement.valueCredit ? /* @__PURE__ */ jsxs36(Fragment23, { children: [
-          entitlement.consumptionRate,
+        ) : showCredits && entitlement.priceBehavior === "credit_burndown" /* Credit */ && entitlement.valueCredit && entitlement.consumptionRate ? /* @__PURE__ */ jsxs36(Fragment23, { children: [
+          formatNumber(entitlement.consumptionRate),
           " ",
           getFeatureName(
             entitlement.valueCredit,
-            entitlement.consumptionRate || void 0
+            entitlement.consumptionRate
           ),
           " ",
           t2("per"),
           " ",
           getFeatureName(entitlement.feature, 1)
         ] }) : entitlement.priceBehavior === "credit_burndown" /* Credit */ && creditBasedEntitlementLimit ? /* @__PURE__ */ jsx46(Fragment23, { children: creditBasedEntitlementLimit?.period ? t2("Up to X units per period", {
-          amount: creditBasedEntitlementLimit.limit,
+          amount: formatNumber(creditBasedEntitlementLimit.limit),
           units: getFeatureName(
             entitlement.feature,
             creditBasedEntitlementLimit.limit
           ),
           period: creditBasedEntitlementLimit.period
         }) : t2("Up to X units", {
-          amount: creditBasedEntitlementLimit.limit,
+          amount: formatNumber(creditBasedEntitlementLimit.limit),
           units: getFeatureName(
             entitlement.feature,
             creditBasedEntitlementLimit.limit
@@ -19274,9 +19910,11 @@ var Entitlement = ({
         }) }) : entitlement.valueType === "numeric" /* Numeric */ || entitlement.valueType === "unlimited" /* Unlimited */ || entitlement.valueType === "trait" /* Trait */ ? /* @__PURE__ */ jsxs36(Fragment23, { children: [
           entitlement.valueType === "unlimited" /* Unlimited */ && !entitlement.priceBehavior ? t2("Unlimited", {
             item: getFeatureName(entitlement.feature)
-          }) : typeof limit === "number" && /* @__PURE__ */ jsxs36(Fragment23, { children: [
-            formatNumber(limit),
-            " ",
+          }) : /* @__PURE__ */ jsxs36(Fragment23, { children: [
+            typeof limit === "number" && /* @__PURE__ */ jsxs36(Fragment23, { children: [
+              formatNumber(limit),
+              " "
+            ] }),
             getFeatureName(entitlement.feature, limit)
           ] }),
           metricPeriodName && /* @__PURE__ */ jsxs36(Fragment23, { children: [
@@ -19298,7 +19936,7 @@ var Entitlement = ({
                 formatCurrency(entitlementPrice, entitlementCurrency),
                 "/",
                 entitlementPackageSize > 1 && /* @__PURE__ */ jsxs36(Fragment23, { children: [
-                  entitlementPackageSize,
+                  formatNumber(entitlementPackageSize),
                   " "
                 ] }),
                 getFeatureName(entitlement.feature, entitlementPackageSize),
@@ -19364,9 +20002,6 @@ var Plan2 = ({
   const { data, settings, setCheckoutState } = useEmbed();
   const isLightBackground = useIsLightBackground();
   const trialEnd = useTrialEnd();
-  const showCallToAction = useMemo25(() => {
-    return typeof sharedProps.callToActionUrl === "string" || typeof sharedProps.onCallToAction === "function";
-  }, [sharedProps.callToActionUrl, sharedProps.onCallToAction]);
   const {
     currentPeriod,
     canCheckout,
@@ -19375,53 +20010,29 @@ var Plan2 = ({
     isStandalone,
     showCredits,
     showZeroPriceAsFree
-  } = useMemo25(() => {
-    const showCredits2 = data?.showCredits ?? true;
-    const showZeroPriceAsFree2 = data?.showZeroPriceAsFree ?? false;
-    if (isCheckoutData(data)) {
-      const billingSubscription = data.company?.billingSubscription;
-      const isTrialSubscription2 = billingSubscription?.status === "trialing";
-      const willSubscriptionCancel2 = typeof billingSubscription?.cancelAt === "number";
-      return {
-        currentPeriod: data.company?.plan?.planPeriod || "month",
-        canCheckout: data.capabilities?.checkout ?? true,
-        isTrialSubscription: isTrialSubscription2,
-        willSubscriptionCancel: willSubscriptionCancel2,
-        isStandalone: false,
-        showCredits: showCredits2,
-        showZeroPriceAsFree: showZeroPriceAsFree2
-      };
-    }
+  } = useMemo26(() => {
+    const isStandalone2 = typeof data?.component === "undefined";
     return {
-      currentPeriod: "month",
-      canCheckout: true,
-      isTrialSubscription: false,
-      willSubscriptionCancel: false,
-      isStandalone: true,
-      showCredits: showCredits2,
-      showZeroPriceAsFree: showZeroPriceAsFree2
+      currentPeriod: data?.company?.plan?.planPeriod || "month",
+      canCheckout: isStandalone2 || (data?.capabilities?.checkout ?? true),
+      isTrialSubscription: data?.company?.billingSubscription?.status === "trialing",
+      willSubscriptionCancel: typeof data?.company?.billingSubscription?.cancelAt === "number",
+      isStandalone: isStandalone2,
+      showCredits: data?.showCredits ?? true,
+      showZeroPriceAsFree: data?.showZeroPriceAsFree ?? false
     };
-  }, [data]);
-  const callToActionTarget = useMemo25(() => {
-    if (sharedProps.callToActionTarget) {
-      return sharedProps.callToActionTarget;
-    }
-    if (sharedProps.callToActionUrl) {
-      try {
-        const ctaUrlOrigin = new URL(sharedProps.callToActionUrl).origin;
-        if (ctaUrlOrigin === window.location.hostname) {
-          return "_self";
-        }
-      } catch {
-      }
-    }
-    return "_blank";
-  }, [sharedProps.callToActionUrl, sharedProps.callToActionTarget]);
+  }, [
+    data?.capabilities?.checkout,
+    data?.company?.billingSubscription?.cancelAt,
+    data?.company?.billingSubscription?.status,
+    data?.company?.plan?.planPeriod,
+    data?.component,
+    data?.showCredits,
+    data?.showZeroPriceAsFree
+  ]);
   const cardPadding = settings.theme.card.padding / TEXT_BASE_SIZE;
-  const currentPlanIndex = plans.findIndex(
-    (plan2) => isHydratedPlan(plan2) && plan2.current
-  );
-  const isActivePlan = isHydratedPlan(plan) && plan.current && currentPeriod === selectedPeriod;
+  const currentPlanIndex = plans.findIndex((plan2) => plan2.current);
+  const isActivePlan = plan.current && currentPeriod === selectedPeriod;
   const { price: planPrice, currency: planCurrency } = getPlanPrice(plan, selectedPeriod) || {};
   const credits = groupPlanCreditGrants(plan.includedCreditGrants);
   const hasUsageBasedEntitlements = plan.entitlements.some(
@@ -19436,6 +20047,7 @@ var Plan2 = ({
     Flex,
     {
       className: "sch-PricingTable_Plan",
+      "data-testid": "sch-plan",
       "data-plan-id": plan.id,
       $position: "relative",
       $flexDirection: "column",
@@ -19465,6 +20077,7 @@ var Plan2 = ({
               /* @__PURE__ */ jsx47(Box, { children: /* @__PURE__ */ jsxs37(
                 Text,
                 {
+                  "data-testid": "sch-plan-price",
                   $font: headerPriceFontStyle.fontFamily,
                   $size: headerPriceFontStyle.fontSize,
                   $weight: headerPriceFontStyle.fontWeight,
@@ -19490,6 +20103,7 @@ var Plan2 = ({
                       layout.plans.showFeatureIcons && credit.icon && /* @__PURE__ */ jsx47(
                         Icon3,
                         {
+                          "data-testid": "sch-feature-icon",
                           name: credit.icon,
                           color: settings.theme.primary,
                           background: `color-mix(in oklch, ${settings.theme.card.background} 87.5%, ${isLightBackground ? "black" : "white"})`,
@@ -19522,6 +20136,7 @@ var Plan2 = ({
               isActivePlan && /* @__PURE__ */ jsx47(
                 Flex,
                 {
+                  "data-testid": "sch-plan-active",
                   $position: "absolute",
                   $right: "1rem",
                   $top: "1rem",
@@ -19619,12 +20234,13 @@ var Plan2 = ({
                     /* @__PURE__ */ jsx47(Text, { $size: 15, $leading: 1, children: t2("Current plan") })
                   ]
                 }
-              ) : showCallToAction && (layout.upgrade.isVisible || layout.downgrade.isVisible) && /* @__PURE__ */ jsxs37(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
+              ) : sharedProps.showCallToAction && (layout.upgrade.isVisible || layout.downgrade.isVisible) && /* @__PURE__ */ jsxs37(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
                 /* @__PURE__ */ jsx47(
                   Button,
                   {
                     type: "button",
-                    disabled: (isHydratedPlan(plan) && !plan.valid || !canCheckout) && !plan.custom,
+                    disabled: (!plan.valid || !canCheckout) && !plan.custom,
+                    "data-testid": "sch-plan-cta-button",
                     ...index > currentPlanIndex ? {
                       $size: layout.upgrade.buttonSize,
                       $color: layout.upgrade.buttonStyle,
@@ -19642,12 +20258,12 @@ var Plan2 = ({
                     } : sharedProps.callToActionUrl ? {
                       as: "a",
                       href: sharedProps.callToActionUrl,
-                      target: callToActionTarget,
+                      target: sharedProps.callToActionTarget,
                       rel: "noreferrer"
                     } : {
                       onClick: () => {
                         sharedProps.onCallToAction?.(plan);
-                        if (!isStandalone && isHydratedPlan(plan) && !plan.custom) {
+                        if (!isStandalone && !plan.custom) {
                           setCheckoutState({
                             period: selectedPeriod,
                             planId: isActivePlan ? null : plan.id,
@@ -19657,10 +20273,10 @@ var Plan2 = ({
                       }
                     },
                     $fullWidth: true,
-                    children: plan.custom ? plan.customPlanConfig?.ctaText ?? t2("Talk to support") : isHydratedPlan(plan) && !plan.valid ? /* @__PURE__ */ jsx47(Text, { as: Box, $align: "center", children: t2("Over plan limit") }) : isHydratedPlan(plan) && plan.companyCanTrial && plan.isTrialable ? t2("Start X day trial", { days: plan.trialDays }) : t2("Choose plan")
+                    children: plan.custom ? plan.customPlanConfig?.ctaText ?? t2("Talk to support") : !plan.valid ? /* @__PURE__ */ jsx47(Text, { as: Box, $align: "center", children: t2("Over plan limit") }) : t2("Choose plan")
                   }
                 ),
-                isHydratedPlan(plan) && !plan.valid && /* @__PURE__ */ jsx47(UsageViolationText, { violations: plan.usageViolations })
+                !plan.valid && /* @__PURE__ */ jsx47(UsageViolationText, { violations: plan.usageViolations })
               ] })
             ]
           }
@@ -19713,193 +20329,211 @@ var resolveDesignProps8 = (props) => {
     }
   };
 };
-var PricingTable = forwardRef12(
-  ({ className, callToActionUrl, callToActionTarget, onCallToAction, ...rest }, ref) => {
-    const props = resolveDesignProps8(rest);
-    const { t: t2 } = useTranslation();
-    const { data, settings, isPending, hydratePublic } = useEmbed();
-    const { currentPeriod, showPeriodToggle, isStandalone } = useMemo26(() => {
-      const showPeriodToggle2 = data?.showPeriodToggle ?? props.showPeriodToggle;
-      if (isCheckoutData(data)) {
-        const billingSubscription = data.company?.billingSubscription;
-        const isTrialSubscription = billingSubscription?.status === "trialing";
-        const willSubscriptionCancel = billingSubscription?.cancelAt;
+var PricingTable = forwardRef12(({ className, ...rest }, ref) => {
+  const props = resolveDesignProps8(rest);
+  const { t: t2 } = useTranslation();
+  const { data, settings, isPending, hydratePublic } = useEmbed();
+  const getCallToActionTarget = useCallback14(
+    (url, target) => {
+      if (target) {
+        return target;
+      }
+      if (url) {
+        try {
+          const ctaUrlOrigin = new URL(url).origin;
+          if (ctaUrlOrigin === window.location.hostname) {
+            return "_self";
+          }
+        } catch {
+        }
+      }
+      return "_blank";
+    },
+    []
+  );
+  const { currentPeriod, isStandalone } = useMemo27(() => {
+    const isStandalone2 = typeof data?.component === "undefined";
+    return {
+      currentPeriod: data?.company?.plan?.planPeriod || "month",
+      currentAddOns: data?.company?.addOns || [],
+      canCheckout: isStandalone2 ?? data?.capabilities?.checkout ?? true,
+      isTrialSubscription: data?.company?.billingSubscription?.status === "trialing",
+      willSubscriptionCancel: data?.company?.billingSubscription?.cancelAt,
+      isStandalone: isStandalone2
+    };
+  }, [
+    data?.capabilities?.checkout,
+    data?.company?.addOns,
+    data?.company?.billingSubscription?.cancelAt,
+    data?.company?.billingSubscription?.status,
+    data?.company?.plan?.planPeriod,
+    data?.component
+  ]);
+  const [selectedPeriod, setSelectedPeriod] = useState18(currentPeriod);
+  const showPeriodToggle = rest.showPeriodToggle ?? data?.showPeriodToggle ?? true;
+  const { plans, addOns, periods } = useAvailablePlans(selectedPeriod, {
+    useSelectedPeriod: showPeriodToggle
+  });
+  const [entitlementCounts, setEntitlementCounts] = useState18(
+    () => plans.reduce(entitlementCountsReducer, {})
+  );
+  const handleToggleShowAll = (id) => {
+    setEntitlementCounts((prev2) => {
+      const count = prev2[id] ? { ...prev2[id] } : void 0;
+      if (count) {
         return {
-          currentPeriod: data.company?.plan?.planPeriod || "month",
-          currentAddOns: data.company?.addOns || [],
-          canCheckout: data.capabilities?.checkout ?? true,
-          showPeriodToggle: showPeriodToggle2,
-          isTrialSubscription,
-          willSubscriptionCancel,
-          isStandalone: false
+          ...prev2,
+          [id]: {
+            size: count.size,
+            limit: count.limit > VISIBLE_ENTITLEMENT_COUNT ? VISIBLE_ENTITLEMENT_COUNT : count.size
+          }
         };
       }
-      return {
-        currentPeriod: "month",
-        currentAddOns: [],
-        canCheckout: true,
-        showPeriodToggle: showPeriodToggle2,
-        isTrialSubscription: false,
-        willSubscriptionCancel: false,
-        isStandalone: true
-      };
-    }, [props.showPeriodToggle, data]);
-    const [selectedPeriod, setSelectedPeriod] = useState18(currentPeriod);
-    const { plans, addOns, periods } = useAvailablePlans(selectedPeriod, {
-      useSelectedPeriod: showPeriodToggle
+      return prev2;
     });
-    const [entitlementCounts, setEntitlementCounts] = useState18(
-      () => plans.reduce(entitlementCountsReducer, {})
-    );
-    const handleToggleShowAll = (id) => {
-      setEntitlementCounts((prev2) => {
-        const count = prev2[id] ? { ...prev2[id] } : void 0;
-        if (count) {
-          return {
-            ...prev2,
-            [id]: {
-              size: count.size,
-              limit: count.limit > VISIBLE_ENTITLEMENT_COUNT ? VISIBLE_ENTITLEMENT_COUNT : count.size
-            }
-          };
-        }
-        return prev2;
-      });
-    };
-    useEffect9(() => {
-      if (isStandalone) {
-        hydratePublic();
-      }
-    }, [isStandalone, hydratePublic]);
-    useEffect9(() => {
-      setEntitlementCounts(plans.reduce(entitlementCountsReducer, {}));
-    }, [plans]);
-    if (isPending) {
-      return /* @__PURE__ */ jsx48(
-        Flex,
-        {
-          $width: "100%",
-          $height: "100%",
-          $alignItems: "center",
-          $justifyContent: "center",
-          $padding: `${settings.theme.card.padding / TEXT_BASE_SIZE}rem`,
-          children: /* @__PURE__ */ jsx48(Loader, { $size: "2xl" })
-        }
-      );
+  };
+  useEffect8(() => {
+    if (isStandalone) {
+      hydratePublic();
     }
-    const Wrapper = isStandalone ? Container : Fragment25;
-    return /* @__PURE__ */ jsx48(Wrapper, { children: /* @__PURE__ */ jsxs38(
-      FussyChild,
+  }, [isStandalone, hydratePublic]);
+  useEffect8(() => {
+    setEntitlementCounts(plans.reduce(entitlementCountsReducer, {}));
+  }, [plans]);
+  if (isPending) {
+    return /* @__PURE__ */ jsx48(
+      Flex,
       {
-        ref,
-        className: `sch-PricingTable ${className}`,
-        as: Flex,
-        $flexDirection: "column",
-        $gap: "2rem",
-        children: [
-          /* @__PURE__ */ jsxs38(Box, { children: [
-            /* @__PURE__ */ jsxs38(
-              Flex,
-              {
-                $flexDirection: "column",
-                $justifyContent: "center",
-                $alignItems: "center",
-                $gap: "1rem",
-                $marginBottom: "1rem",
-                $viewport: {
-                  md: {
-                    $flexDirection: "row",
-                    $justifyContent: "space-between"
-                  }
-                },
-                children: [
-                  /* @__PURE__ */ jsx48(Text, { display: props.header.fontStyle, children: props.header.isVisible && props.plans.isVisible && plans.length > 0 && t2("Plans") }),
-                  showPeriodToggle && periods.length > 1 && /* @__PURE__ */ jsx48(
-                    PeriodToggle,
-                    {
-                      options: periods,
-                      selectedOption: selectedPeriod,
-                      onSelect: (period) => {
-                        if (period !== selectedPeriod) {
-                          setSelectedPeriod(period);
-                        }
+        $width: "100%",
+        $height: "100%",
+        $alignItems: "center",
+        $justifyContent: "center",
+        $padding: `${settings.theme.card.padding / TEXT_BASE_SIZE}rem`,
+        children: /* @__PURE__ */ jsx48(Loader, { "aria-label": "loading", $size: "2xl" })
+      }
+    );
+  }
+  const showCallToAction = typeof data?.component !== "undefined" || typeof rest.callToActionUrl === "string" || typeof rest.onCallToAction === "function";
+  const callToActionTarget = getCallToActionTarget(
+    rest.callToActionUrl,
+    rest.callToActionTarget
+  );
+  const Wrapper = isStandalone ? Container : Fragment25;
+  return /* @__PURE__ */ jsx48(Wrapper, { children: /* @__PURE__ */ jsxs38(
+    FussyChild,
+    {
+      ref,
+      className: `sch-PricingTable ${className}`,
+      as: Flex,
+      "data-testid": "sch-pricing-table",
+      $flexDirection: "column",
+      $gap: "2rem",
+      children: [
+        /* @__PURE__ */ jsxs38(Box, { children: [
+          /* @__PURE__ */ jsxs38(
+            Flex,
+            {
+              $flexDirection: "column",
+              $justifyContent: "center",
+              $alignItems: "center",
+              $gap: "1rem",
+              $marginBottom: "1rem",
+              $viewport: {
+                md: {
+                  $flexDirection: "row",
+                  $justifyContent: "space-between"
+                }
+              },
+              children: [
+                /* @__PURE__ */ jsx48(Text, { display: props.header.fontStyle, children: props.header.isVisible && props.plans.isVisible && plans.length > 0 && t2("Plans") }),
+                showPeriodToggle && periods.length > 1 && /* @__PURE__ */ jsx48(
+                  PeriodToggle,
+                  {
+                    options: periods,
+                    selectedOption: selectedPeriod,
+                    onSelect: (period) => {
+                      if (period !== selectedPeriod) {
+                        setSelectedPeriod(period);
                       }
                     }
-                  )
-                ]
-              }
-            ),
-            props.plans.isVisible && plans.length > 0 && /* @__PURE__ */ jsx48(
-              Box,
-              {
-                $display: "grid",
-                $gridTemplateColumns: "repeat(auto-fill, minmax(320px, 1fr))",
-                $gap: "1rem",
-                children: plans.map((plan, index, self2) => {
-                  const planPeriod = showPeriodToggle ? selectedPeriod : plan.yearlyPrice && !plan.monthlyPrice ? "year" /* Year */ : "month" /* Month */;
-                  return /* @__PURE__ */ jsx48(
-                    Plan2,
-                    {
-                      plan,
-                      index,
-                      sharedProps: {
-                        layout: props,
-                        callToActionUrl,
-                        callToActionTarget,
-                        onCallToAction
-                      },
-                      plans: self2,
-                      selectedPeriod: planPeriod,
-                      entitlementCounts,
-                      handleToggleShowAll
+                  }
+                )
+              ]
+            }
+          ),
+          props.plans.isVisible && plans.length > 0 && /* @__PURE__ */ jsx48(
+            Box,
+            {
+              "data-testid": "sch-plans",
+              $display: "grid",
+              $gridTemplateColumns: "repeat(auto-fill, minmax(320px, 1fr))",
+              $gap: "1rem",
+              children: plans.map((plan, index, self2) => {
+                const planPeriod = showPeriodToggle ? selectedPeriod : plan.yearlyPrice && !plan.monthlyPrice ? "year" /* Year */ : "month" /* Month */;
+                return /* @__PURE__ */ jsx48(
+                  Plan2,
+                  {
+                    plan,
+                    index,
+                    sharedProps: {
+                      layout: props,
+                      showCallToAction,
+                      callToActionUrl: rest.callToActionUrl,
+                      callToActionTarget,
+                      onCallToAction: rest.onCallToAction
                     },
-                    index
-                  );
-                })
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx48(Box, { children: props.addOns.isVisible && addOns.length > 0 && /* @__PURE__ */ jsxs38(Fragment26, { children: [
-            props.header.isVisible && /* @__PURE__ */ jsx48(
-              Flex,
-              {
-                $justifyContent: "space-between",
-                $alignItems: "center",
-                $marginBottom: "1rem",
-                children: /* @__PURE__ */ jsx48(Text, { display: props.header.fontStyle, children: t2("Add-ons") })
-              }
-            ),
-            /* @__PURE__ */ jsx48(
-              Box,
-              {
-                $display: "grid",
-                $gridTemplateColumns: "repeat(auto-fill, minmax(320px, 1fr))",
-                $gap: "1rem",
-                children: addOns.map((addOn, index) => {
-                  const addOnPeriod = showPeriodToggle ? selectedPeriod : addOn.yearlyPrice && !addOn.monthlyPrice ? "year" /* Year */ : "month" /* Month */;
-                  return /* @__PURE__ */ jsx48(
-                    AddOn2,
-                    {
-                      addOn,
-                      sharedProps: {
-                        layout: props,
-                        callToActionUrl,
-                        callToActionTarget,
-                        onCallToAction
-                      },
-                      selectedPeriod: addOnPeriod
+                    plans: self2,
+                    selectedPeriod: planPeriod,
+                    entitlementCounts,
+                    handleToggleShowAll
+                  },
+                  index
+                );
+              })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx48(Box, { children: props.addOns.isVisible && addOns.length > 0 && /* @__PURE__ */ jsxs38(Fragment26, { children: [
+          props.header.isVisible && /* @__PURE__ */ jsx48(
+            Flex,
+            {
+              $justifyContent: "space-between",
+              $alignItems: "center",
+              $marginBottom: "1rem",
+              children: /* @__PURE__ */ jsx48(Text, { display: props.header.fontStyle, children: t2("Add-ons") })
+            }
+          ),
+          /* @__PURE__ */ jsx48(
+            Box,
+            {
+              $display: "grid",
+              $gridTemplateColumns: "repeat(auto-fill, minmax(320px, 1fr))",
+              $gap: "1rem",
+              children: addOns.map((addOn, index) => {
+                const addOnPeriod = showPeriodToggle ? selectedPeriod : addOn.yearlyPrice && !addOn.monthlyPrice ? "year" /* Year */ : "month" /* Month */;
+                return /* @__PURE__ */ jsx48(
+                  AddOn2,
+                  {
+                    addOn,
+                    sharedProps: {
+                      layout: props,
+                      showCallToAction,
+                      callToActionUrl: rest.callToActionUrl,
+                      callToActionTarget,
+                      onCallToAction: rest.onCallToAction
                     },
-                    index
-                  );
-                })
-              }
-            )
-          ] }) })
-        ]
-      }
-    ) });
-  }
-);
+                    selectedPeriod: addOnPeriod
+                  },
+                  index
+                );
+              })
+            }
+          )
+        ] }) })
+      ]
+    }
+  ) });
+});
 PricingTable.displayName = "PricingTable";
 // src/components/elements/text/Text.tsx
@@ -19929,7 +20563,7 @@ var TextElement = forwardRef13(({ children, className, ...rest }, ref) => {
 TextElement.displayName = "Text";
 // src/components/elements/unsubscribe-button/UnsubscribeButton.tsx
-import { forwardRef as forwardRef14, useMemo as useMemo27 } from "react";
+import { forwardRef as forwardRef14, useMemo as useMemo28 } from "react";
 import { jsx as jsx50 } from "react/jsx-runtime";
 var buttonStyles = {
   primary: {
@@ -19960,9 +20594,9 @@ var UnsubscribeButton = forwardRef14(({ children, className, ...rest }, ref) =>
   const props = resolveDesignProps10(rest);
   const { t: t2 } = useTranslation();
   const { data, setLayout } = useEmbed();
-  const hasActiveSubscription = useMemo27(() => {
-    return isCheckoutData(data) && data.subscription && data.subscription.status !== "cancelled" && !data.subscription.cancelAt;
-  }, [data]);
+  const hasActiveSubscription = useMemo28(() => {
+    return data?.subscription && data.subscription.status !== "cancelled" && !data.subscription.cancelAt;
+  }, [data?.subscription]);
   if (!hasActiveSubscription) {
     return null;
   }
@@ -19995,7 +20629,7 @@ var UnsubscribeButton = forwardRef14(({ children, className, ...rest }, ref) =>
 UnsubscribeButton.displayName = "UnsubscribeButton";
 // src/components/elements/upcoming-bill/UpcomingBill.tsx
-import { forwardRef as forwardRef15, useCallback as useCallback14, useEffect as useEffect10, useMemo as useMemo28, useState as useState19 } from "react";
+import { forwardRef as forwardRef15, useCallback as useCallback15, useEffect as useEffect9, useMemo as useMemo29, useState as useState19 } from "react";
 import { jsx as jsx51, jsxs as jsxs39 } from "react/jsx-runtime";
 function resolveDesignProps11(props) {
   return {
@@ -20024,20 +20658,18 @@ var UpcomingBill = forwardRef15(({ className, ...rest }, ref) => {
   const [error, setError] = useState19();
   const [upcomingInvoice, setUpcomingInvoice] = useState19();
   const [balances, setBalances] = useState19([]);
-  const discounts = useMemo28(() => {
-    return (isCheckoutData(data) && data.subscription?.discounts || []).map(
-      (discount) => ({
-        couponId: discount.couponId,
-        customerFacingCode: discount.customerFacingCode || void 0,
-        currency: discount.currency || void 0,
-        amountOff: discount.amountOff ?? void 0,
-        percentOff: discount.percentOff ?? void 0,
-        isActive: discount.isActive
-      })
-    );
-  }, [data]);
-  const getInvoice = useCallback14(async () => {
-    if (isCheckoutData(data) && data.component?.id && data.subscription && !data.subscription.cancelAt) {
+  const discounts = useMemo29(() => {
+    return (data?.subscription?.discounts || []).map((discount) => ({
+      couponId: discount.couponId,
+      customerFacingCode: discount.customerFacingCode || void 0,
+      currency: discount.currency || void 0,
+      amountOff: discount.amountOff ?? void 0,
+      percentOff: discount.percentOff ?? void 0,
+      isActive: discount.isActive
+    }));
+  }, [data?.subscription?.discounts]);
+  const getInvoice = useCallback15(async () => {
+    if (data?.component?.id && data?.subscription && !data.subscription.cancelAt) {
       try {
         setError(void 0);
         setIsLoading(true);
@@ -20051,8 +20683,8 @@ var UpcomingBill = forwardRef15(({ className, ...rest }, ref) => {
         setIsLoading(false);
       }
     }
-  }, [data, getUpcomingInvoice]);
-  const getBalances = useCallback14(async () => {
+  }, [data?.component?.id, data?.subscription, getUpcomingInvoice]);
+  const getBalances = useCallback15(async () => {
     try {
       const response = await getCustomerBalance();
       if (response) {
@@ -20062,13 +20694,13 @@ var UpcomingBill = forwardRef15(({ className, ...rest }, ref) => {
       debug("Failed to fetch customer balance.", err2);
     }
   }, [debug, getCustomerBalance]);
-  useEffect10(() => {
+  useEffect9(() => {
     getInvoice();
   }, [getInvoice]);
-  useEffect10(() => {
+  useEffect9(() => {
     getBalances();
   }, [getBalances]);
-  if (!isCheckoutData(data) || !data.subscription || data.subscription.cancelAt) {
+  if (!data?.subscription || data.subscription.cancelAt) {
     return null;
   }
   return /* @__PURE__ */ jsxs39(Element, { ref, className, children: [
@@ -24377,7 +25009,7 @@ var { Inflate, inflate, inflateRaw, ungzip } = inflate_1$1;
 var inflate_1 = inflate;
 // src/components/embed/Embed.tsx
-import { useContext as useContext5, useEffect as useEffect11, useState as useState20 } from "react";
+import { useContext as useContext6, useEffect as useEffect10, useState as useState20 } from "react";
 // src/components/embed/renderer.ts
 import { createElement as createElement5 } from "react";
@@ -24457,7 +25089,8 @@ function createRenderer(options) {
 }
 // src/components/embed/Embed.tsx
-import { Fragment as Fragment27, jsx as jsx52, jsxs as jsxs40 } from "react/jsx-runtime";
+import { jsx as jsx52, jsxs as jsxs40 } from "react/jsx-runtime";
+var renderer = createRenderer();
 var Loading = () => {
   const { settings } = useEmbed();
   return /* @__PURE__ */ jsx52(
@@ -24493,7 +25126,7 @@ var Error2 = ({ message }) => {
 };
 var SchematicEmbed = ({ id, accessToken }) => {
   const [children, setChildren] = useState20(/* @__PURE__ */ jsx52(Loading, {}));
-  const theme = useContext5(et);
+  const theme = useContext6(et);
   const {
     data,
     error,
@@ -24504,20 +25137,19 @@ var SchematicEmbed = ({ id, accessToken }) => {
     setAccessToken,
     updateSettings
   } = useEmbed();
-  useEffect11(() => {
+  useEffect10(() => {
     if (accessToken) {
       setAccessToken(accessToken);
     }
   }, [accessToken, setAccessToken]);
-  useEffect11(() => {
+  useEffect10(() => {
     if (id && stale) {
       hydrateComponent(id);
     }
   }, [id, hydrateComponent, stale]);
-  useEffect11(() => {
-    const renderer = createRenderer();
+  useEffect10(() => {
     try {
-      if (isCheckoutData(data) && data.component?.ast) {
+      if (data?.component?.ast) {
         const nodes = [];
         const compressed = data.component.ast;
         const json = inflate_1(
@@ -24537,7 +25169,7 @@ var SchematicEmbed = ({ id, accessToken }) => {
     } catch (err2) {
       setError(isError(err2) ? err2 : ERROR_UNKNOWN);
     }
-  }, [data, setError, updateSettings]);
+  }, [data?.component?.ast, setError, updateSettings]);
   if (!theme) {
     return stub();
   }
@@ -24558,7 +25190,7 @@ var SchematicEmbed = ({ id, accessToken }) => {
   if (isPending) {
     return /* @__PURE__ */ jsx52(Loading, {});
   }
-  return /* @__PURE__ */ jsx52(Fragment27, { children });
+  return /* @__PURE__ */ jsx52(Box, { className: "sch-Embed", "data-testid": "sch-embed", children });
 };
 export {
   Box,
@@ -24612,13 +25244,23 @@ export {
   useEmbed,
   useIsLightBackground,
   usePaymentConfirmation,
-  usePrevious2 as usePrevious,
   useRequest,
   useTrialEnd,
   useWrapChildren
 };
 /*! Bundled license information:
+use-sync-external-store/cjs/use-sync-external-store-shim.development.js:
+  (**
+   * @license React
+   * use-sync-external-store-shim.development.js
+   *
+   * Copyright (c) Meta Platforms, Inc. and affiliates.
+   *
+   * This source code is licensed under the MIT license found in the
+   * LICENSE file in the root directory of this source tree.
+   *)
 pako/dist/pako.esm.mjs:
   (*! pako 2.1.0 https://github.com/nodeca/pako @license (MIT AND Zlib) *)
 */