npm - @schematichq/schematic-react - Versions diffs - 0.2.0-rc.1 → 0.2.0-rc.2 - Mend

@schematichq/schematic-react 0.2.0-rc.1 → 0.2.0-rc.2

Files changed (4) hide show

package/dist/schematic-react.cjs.js +1510 -394
package/dist/schematic-react.d.ts +403 -4
package/dist/schematic-react.esm.js +1551 -433
package/package.json +7 -3

package/dist/schematic-react.cjs.js CHANGED Viewed

@@ -133,6 +133,7 @@ __export(src_exports, {
   Box: () => Box,
   Button: () => Button2,
   Card: () => Card,
+  Column: () => Column,
   EmbedContext: () => EmbedContext,
   EmbedProvider: () => EmbedProvider,
   Flex: () => Flex,
@@ -141,14 +142,19 @@ __export(src_exports, {
   IncludedFeatures: () => IncludedFeatures,
   Invoices: () => Invoices,
   MeteredFeatures: () => MeteredFeatures,
+  OverlayHeader: () => OverlayHeader,
+  OverlaySideBar: () => OverlaySideBar,
+  OverlayWrapper: () => OverlayWrapper,
   PaymentMethod: () => PaymentMethod,
   PlanManager: () => PlanManager,
   ProgressBar: () => ProgressBar,
+  Root: () => Root,
   Schematic: () => Schematic,
   SchematicEmbed: () => SchematicEmbed,
   SchematicProvider: () => SchematicProvider,
   Text: () => Text,
   UpcomingBill: () => UpcomingBill,
+  Viewport: () => Viewport,
   defaultSettings: () => defaultSettings,
   defaultTheme: () => defaultTheme,
   useEmbed: () => useEmbed,
@@ -4972,7 +4978,7 @@ var unitlessKeys = {
 var f = "undefined" != typeof process && void 0 !== process.env && (process.env.REACT_APP_SC_ATTR || process.env.SC_ATTR) || "data-styled";
 var m = "active";
 var y = "data-styled-version";
-var v = "6.1.12";
+var v = "6.1.13";
 var g = "/*!sc*/\n";
 var S = "undefined" != typeof window && "HTMLElement" in window;
 var w = Boolean("boolean" == typeof SC_DISABLE_SPEEDY ? SC_DISABLE_SPEEDY : "undefined" != typeof process && void 0 !== process.env && void 0 !== process.env.REACT_APP_SC_DISABLE_SPEEDY && "" !== process.env.REACT_APP_SC_DISABLE_SPEEDY ? "false" !== process.env.REACT_APP_SC_DISABLE_SPEEDY && process.env.REACT_APP_SC_DISABLE_SPEEDY : "undefined" != typeof process && void 0 !== process.env && void 0 !== process.env.SC_DISABLE_SPEEDY && "" !== process.env.SC_DISABLE_SPEEDY ? "false" !== process.env.SC_DISABLE_SPEEDY && process.env.SC_DISABLE_SPEEDY : true);
@@ -5652,6 +5658,143 @@ var vt = function() {
 var St = "__sc-".concat(f, "__");
 "undefined" != typeof window && (window[St] || (window[St] = 0), 1 === window[St] && console.warn("It looks like there are several instances of 'styled-components' initialized in this application. This may cause dynamic styles to not render properly, errors during the rehydration process, a missing theme prop, and makes your application bigger without good reason.\n\nSee https://s-c.sh/2BAXzed for more info."), window[St] += 1);
+// node_modules/@stripe/stripe-js/dist/index.mjs
+var V3_URL = "https://js.stripe.com/v3";
+var V3_URL_REGEX = /^https:\/\/js\.stripe\.com\/v3\/?(\?.*)?$/;
+var EXISTING_SCRIPT_MESSAGE = "loadStripe.setLoadParameters was called but an existing Stripe.js script already exists in the document; existing script parameters will be used";
+var findScript = function findScript2() {
+  var scripts = document.querySelectorAll('script[src^="'.concat(V3_URL, '"]'));
+  for (var i2 = 0; i2 < scripts.length; i2++) {
+    var script = scripts[i2];
+    if (!V3_URL_REGEX.test(script.src)) {
+      continue;
+    }
+    return script;
+  }
+  return null;
+};
+var injectScript = function injectScript2(params) {
+  var queryString = params && !params.advancedFraudSignals ? "?advancedFraudSignals=false" : "";
+  var script = document.createElement("script");
+  script.src = "".concat(V3_URL).concat(queryString);
+  var headOrBody = document.head || document.body;
+  if (!headOrBody) {
+    throw new Error("Expected document.body not to be null. Stripe.js requires a <body> element.");
+  }
+  headOrBody.appendChild(script);
+  return script;
+};
+var registerWrapper = function registerWrapper2(stripe, startTime) {
+  if (!stripe || !stripe._registerWrapper) {
+    return;
+  }
+  stripe._registerWrapper({
+    name: "stripe-js",
+    version: "4.3.0",
+    startTime
+  });
+};
+var stripePromise = null;
+var onErrorListener = null;
+var onLoadListener = null;
+var onError = function onError2(reject) {
+  return function() {
+    reject(new Error("Failed to load Stripe.js"));
+  };
+};
+var onLoad = function onLoad2(resolve, reject) {
+  return function() {
+    if (window.Stripe) {
+      resolve(window.Stripe);
+    } else {
+      reject(new Error("Stripe.js not available"));
+    }
+  };
+};
+var loadScript = function loadScript2(params) {
+  if (stripePromise !== null) {
+    return stripePromise;
+  }
+  stripePromise = new Promise(function(resolve, reject) {
+    if (typeof window === "undefined" || typeof document === "undefined") {
+      resolve(null);
+      return;
+    }
+    if (window.Stripe && params) {
+      console.warn(EXISTING_SCRIPT_MESSAGE);
+    }
+    if (window.Stripe) {
+      resolve(window.Stripe);
+      return;
+    }
+    try {
+      var script = findScript();
+      if (script && params) {
+        console.warn(EXISTING_SCRIPT_MESSAGE);
+      } else if (!script) {
+        script = injectScript(params);
+      } else if (script && onLoadListener !== null && onErrorListener !== null) {
+        var _script$parentNode;
+        script.removeEventListener("load", onLoadListener);
+        script.removeEventListener("error", onErrorListener);
+        (_script$parentNode = script.parentNode) === null || _script$parentNode === void 0 ? void 0 : _script$parentNode.removeChild(script);
+        script = injectScript(params);
+      }
+      onLoadListener = onLoad(resolve, reject);
+      onErrorListener = onError(reject);
+      script.addEventListener("load", onLoadListener);
+      script.addEventListener("error", onErrorListener);
+    } catch (error) {
+      reject(error);
+      return;
+    }
+  });
+  return stripePromise["catch"](function(error) {
+    stripePromise = null;
+    return Promise.reject(error);
+  });
+};
+var initStripe = function initStripe2(maybeStripe, args, startTime) {
+  if (maybeStripe === null) {
+    return null;
+  }
+  var stripe = maybeStripe.apply(void 0, args);
+  registerWrapper(stripe, startTime);
+  return stripe;
+};
+var stripePromise$1;
+var loadCalled = false;
+var getStripePromise = function getStripePromise2() {
+  if (stripePromise$1) {
+    return stripePromise$1;
+  }
+  stripePromise$1 = loadScript(null)["catch"](function(error) {
+    stripePromise$1 = null;
+    return Promise.reject(error);
+  });
+  return stripePromise$1;
+};
+Promise.resolve().then(function() {
+  return getStripePromise();
+})["catch"](function(error) {
+  if (!loadCalled) {
+    console.warn(error);
+  }
+});
+var loadStripe = function loadStripe2() {
+  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+    args[_key] = arguments[_key];
+  }
+  loadCalled = true;
+  var startTime = Date.now();
+  return getStripePromise().then(function(maybeStripe) {
+    return initStripe(maybeStripe, args, startTime);
+  });
+};
+// src/context/embed.tsx
+var import_react_stripe_js = require("@stripe/react-stripe-js");
 // src/api/runtime.ts
 var BASE_PATH = "https://api.schematichq.com".replace(/\/+$/, "");
 var Configuration = class {
@@ -5968,6 +6111,30 @@ function BillingProductDetailResponseDataFromJSONTyped(json, ignoreDiscriminator
   };
 }
+// src/api/models/BillingProductForSubscriptionResponseData.ts
+function BillingProductForSubscriptionResponseDataFromJSON(json) {
+  return BillingProductForSubscriptionResponseDataFromJSONTyped(json, false);
+}
+function BillingProductForSubscriptionResponseDataFromJSONTyped(json, ignoreDiscriminator) {
+  if (json == null) {
+    return json;
+  }
+  return {
+    accountId: json["account_id"],
+    createdAt: new Date(json["created_at"]),
+    currency: json["currency"],
+    environmentId: json["environment_id"],
+    externalId: json["external_id"],
+    id: json["id"],
+    interval: json["interval"] == null ? void 0 : json["interval"],
+    name: json["name"],
+    price: json["price"],
+    quantity: json["quantity"],
+    subscriptionId: json["subscription_id"],
+    updatedAt: new Date(json["updated_at"])
+  };
+}
 // src/api/models/BillingSubscriptionResponseData.ts
 function BillingSubscriptionResponseDataFromJSON(json) {
   return BillingSubscriptionResponseDataFromJSONTyped(json, false);
@@ -5990,7 +6157,6 @@ function ChangeSubscriptionRequestBodyToJSON(value) {
     return value;
   }
   return {
-    action: value["action"],
     new_plan_id: value["newPlanId"],
     new_price_id: value["newPriceId"]
   };
@@ -6402,6 +6568,81 @@ function CompanyPlanDetailResponseDataFromJSONTyped(json, ignoreDiscriminator) {
   };
 }
+// src/api/models/InvoiceResponseData.ts
+function InvoiceResponseDataFromJSON(json) {
+  return InvoiceResponseDataFromJSONTyped(json, false);
+}
+function InvoiceResponseDataFromJSONTyped(json, ignoreDiscriminator) {
+  if (json == null) {
+    return json;
+  }
+  return {
+    amountDue: json["amount_due"],
+    amountPaid: json["amount_paid"],
+    amountRemaining: json["amount_remaining"],
+    collectionMethod: json["collection_method"],
+    companyId: json["company_id"] == null ? void 0 : json["company_id"],
+    createdAt: new Date(json["created_at"]),
+    currency: json["currency"],
+    customerExternalId: json["customer_external_id"],
+    dueDate: json["due_date"] == null ? void 0 : new Date(json["due_date"]),
+    environmentId: json["environment_id"],
+    externalId: json["external_id"],
+    id: json["id"],
+    subscriptionExternalId: json["subscription_external_id"] == null ? void 0 : json["subscription_external_id"],
+    subtotal: json["subtotal"],
+    updatedAt: new Date(json["updated_at"])
+  };
+}
+// src/api/models/PaymentMethodResponseData.ts
+function PaymentMethodResponseDataFromJSON(json) {
+  return PaymentMethodResponseDataFromJSONTyped(json, false);
+}
+function PaymentMethodResponseDataFromJSONTyped(json, ignoreDiscriminator) {
+  if (json == null) {
+    return json;
+  }
+  return {
+    cardBrand: json["card_brand"] == null ? void 0 : json["card_brand"],
+    cardExpMonth: json["card_exp_month"] == null ? void 0 : json["card_exp_month"],
+    cardExpYear: json["card_exp_year"] == null ? void 0 : json["card_exp_year"],
+    cardLast4: json["card_last4"] == null ? void 0 : json["card_last4"],
+    companyId: json["company_id"] == null ? void 0 : json["company_id"],
+    createdAt: new Date(json["created_at"]),
+    customerExternalId: json["customer_external_id"],
+    environmentId: json["environment_id"],
+    externalId: json["external_id"],
+    id: json["id"],
+    invoiceExternalId: json["invoice_external_id"] == null ? void 0 : json["invoice_external_id"],
+    paymentMethodType: json["payment_method_type"],
+    subscriptionExternalId: json["subscription_external_id"] == null ? void 0 : json["subscription_external_id"],
+    updatedAt: new Date(json["updated_at"])
+  };
+}
+// src/api/models/CompanySubscriptionResponseData.ts
+function CompanySubscriptionResponseDataFromJSON(json) {
+  return CompanySubscriptionResponseDataFromJSONTyped(json, false);
+}
+function CompanySubscriptionResponseDataFromJSONTyped(json, ignoreDiscriminator) {
+  if (json == null) {
+    return json;
+  }
+  return {
+    customerExternalId: json["customer_external_id"],
+    expiredAt: json["expired_at"] == null ? void 0 : new Date(json["expired_at"]),
+    interval: json["interval"],
+    latestInvoice: json["latest_invoice"] == null ? void 0 : InvoiceResponseDataFromJSON(json["latest_invoice"]),
+    paymentMethod: json["payment_method"] == null ? void 0 : PaymentMethodResponseDataFromJSON(json["payment_method"]),
+    products: json["products"].map(
+      BillingProductForSubscriptionResponseDataFromJSON
+    ),
+    subscriptionExternalId: json["subscription_external_id"],
+    totalPrice: json["total_price"]
+  };
+}
 // src/api/models/ComponentResponseData.ts
 function ComponentResponseDataFromJSON(json) {
   return ComponentResponseDataFromJSONTyped(json, false);
@@ -6466,7 +6707,7 @@ function StripeEmbedInfoFromJSONTyped(json, ignoreDiscriminator) {
     return json;
   }
   return {
-    customerEkey: json["customer_ekey"],
+    customerEkey: json["customer_ekey"] == null ? void 0 : json["customer_ekey"],
     publishableKey: json["publishable_key"]
   };
 }
@@ -6486,7 +6727,8 @@ function ComponentHydrateResponseDataFromJSONTyped(json, ignoreDiscriminator) {
     company: json["company"] == null ? void 0 : CompanyDetailResponseDataFromJSON(json["company"]),
     component: json["component"] == null ? void 0 : ComponentResponseDataFromJSON(json["component"]),
     featureUsage: json["feature_usage"] == null ? void 0 : FeatureUsageDetailResponseDataFromJSON(json["feature_usage"]),
-    stripeEmbed: json["stripe_embed"] == null ? void 0 : StripeEmbedInfoFromJSON(json["stripe_embed"])
+    stripeEmbed: json["stripe_embed"] == null ? void 0 : StripeEmbedInfoFromJSON(json["stripe_embed"]),
+    subscription: json["subscription"] == null ? void 0 : CompanySubscriptionResponseDataFromJSON(json["subscription"])
   };
 }
@@ -6699,28 +6941,36 @@ async function fetchComponent(id, accessToken, options) {
     const json = inflate_1(Uint8Array.from(Object.values(compressed)), {
       to: "string"
     });
-    const ast = getEditorState(JSON.stringify(json));
+    const ast = getEditorState(json);
     if (ast) {
       Object.assign(settings, ast.ROOT.props);
       nodes.push(...parseEditorState(ast));
     }
   }
+  let stripe = null;
+  if (data.stripeEmbed?.publishableKey) {
+    stripe = loadStripe(data.stripeEmbed.publishableKey);
+  }
   return {
     data,
     nodes,
-    settings
+    settings,
+    stripe
   };
 }
 var EmbedContext = (0, import_react2.createContext)({
   data: {},
   nodes: [],
   settings: { ...defaultSettings },
+  stripe: null,
   layout: "portal",
   error: void 0,
   setData: () => {
   },
   updateSettings: () => {
   },
+  setStripe: () => {
+  },
   setLayout: () => {
   }
 });
@@ -6736,12 +6986,15 @@ var EmbedProvider = ({
       data: {},
       nodes: [],
       settings: { ...defaultSettings },
+      stripe: null,
       layout: "portal",
       error: void 0,
       setData: () => {
       },
       updateSettings: () => {
       },
+      setStripe: () => {
+      },
       setLayout: () => {
       }
     };
@@ -6761,7 +7014,7 @@ var EmbedProvider = ({
     if (!id || !accessToken) {
       return;
     }
-    fetchComponent(id, accessToken, apiConfig).then((resolvedData) => {
+    fetchComponent(id, accessToken, apiConfig).then(async (resolvedData) => {
       setState((prev2) => ({ ...prev2, ...resolvedData }));
     }).catch((error) => setState((prev2) => ({ ...prev2, error })));
   }, [id, accessToken, apiConfig]);
@@ -6795,6 +7048,15 @@ var EmbedProvider = ({
     },
     [setState]
   );
+  const setStripe = (0, import_react2.useCallback)(
+    (stripe) => {
+      setState((prev2) => ({
+        ...prev2,
+        stripe
+      }));
+    },
+    [setState]
+  );
   const setLayout = (0, import_react2.useCallback)(
     (layout) => {
       setState((prev2) => ({
@@ -6804,6 +7066,47 @@ var EmbedProvider = ({
     },
     [setState]
   );
+  const renderChildren = () => {
+    if (state.stripe) {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_react_stripe_js.Elements,
+        {
+          stripe: state.stripe,
+          options: {
+            appearance: {
+              theme: "stripe",
+              variables: {
+                // Base
+                spacingUnit: ".25rem",
+                colorPrimary: "#0570de",
+                colorBackground: "#FFFFFF",
+                colorText: "#30313d",
+                colorDanger: "#df1b41",
+                fontFamily: "Public Sans, system-ui, sans-serif",
+                borderRadius: ".5rem",
+                // Layout
+                gridRowSpacing: "1.5rem",
+                gridColumnSpacing: "1.5rem"
+              },
+              rules: {
+                ".Label": {
+                  color: "#020202",
+                  fontWeight: "400",
+                  fontSize: "16px",
+                  marginBottom: "12px"
+                }
+              }
+            },
+            ...state.data.stripeEmbed?.customerEkey && {
+              clientSecret: state.data.stripeEmbed.customerEkey
+            }
+          },
+          children
+        }
+      );
+    }
+    return children;
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     EmbedContext.Provider,
     {
@@ -6811,13 +7114,15 @@ var EmbedProvider = ({
         data: state.data,
         nodes: state.nodes,
         settings: state.settings,
+        stripe: state.stripe,
         layout: state.layout,
         error: state.error,
         setData,
         updateSettings,
+        setStripe,
         setLayout
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ot, { theme: state.settings.theme, children })
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ot, { theme: state.settings.theme, children: renderChildren() })
     }
   );
 };
@@ -7755,11 +8060,9 @@ var useSchematicFlag = (key, opts) => {
   return value;
 };
-// src/components/elements/card/Card.tsx
-var import_react6 = require("react");
-// src/const/index.ts
-var TEXT_BASE_SIZE = 16;
+// src/components/elements/plan-manager/PlanManager.tsx
+var import_react7 = require("react");
+var import_react_dom = require("react-dom");
 // src/utils/color.ts
 function hexToHSL(color) {
@@ -7871,6 +8174,9 @@ function camelToHyphen(str) {
   return str.replace(/([a-z][A-Z])/g, (g2) => `${g2[0]}-${g2[1].toLowerCase()}`);
 }
+// src/const/index.ts
+var TEXT_BASE_SIZE = 16;
 // src/utils/style.ts
 function attr(key, value) {
   return typeof value !== "undefined" && lt`
@@ -7888,88 +8194,6 @@ attr.rem = function propAsRem(key, value) {
     `;
 };
-// src/components/elements/card/styles.ts
-var StyledCard = dt.div(
-  ({
-    theme,
-    $sectionLayout = "merged",
-    $borderRadius = 8,
-    $padding = 48,
-    $shadow = true
-  }) => {
-    return lt`
-      box-sizing: border-box;
-      font-size: ${TEXT_BASE_SIZE}px;
-      *,
-      *::before,
-      *::after {
-        box-sizing: inherit;
-      }
-      > * {
-        padding: ${$padding * 0.75 / TEXT_BASE_SIZE}rem
-          ${$padding / TEXT_BASE_SIZE}rem;
-        color: ${theme.typography.text.color};
-      }
-      ${() => {
-      const { l: l2 } = hexToHSL(theme.card.background);
-      const borderColor = l2 > 50 ? darken(theme.card.background, 10) : lighten(theme.card.background, 30);
-      const borderRadius = `${$borderRadius / TEXT_BASE_SIZE}rem`;
-      const boxShadow = "0px 1px 20px 0px #1018280F, 0px 1px 3px 0px #1018281A";
-      if ($sectionLayout === "merged") {
-        return lt`
-            background: ${({ theme: theme2 }) => theme2.card.background};
-            border-radius: ${borderRadius};
-            ${$shadow && `box-shadow: ${boxShadow};`}
-            > :not(:last-child) {
-              border-bottom: 1px solid ${borderColor};
-            }
-          `;
-      }
-      return lt`
-          > :not(:last-child) {
-            margin-bottom: 1rem;
-          }
-          > * {
-            background: ${theme.card.background};
-            border-radius: ${borderRadius};
-            ${$shadow && `box-shadow: ${boxShadow};`}
-          }
-        `;
-    }}
-    `;
-  }
-);
-// src/components/elements/card/Card.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var Card = (0, import_react6.forwardRef)(
-  ({ children, className }, ref) => {
-    const { settings } = useEmbed();
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-      StyledCard,
-      {
-        ref,
-        className,
-        $sectionLayout: settings.theme?.sectionLayout,
-        $borderRadius: settings.theme?.card?.borderRadius,
-        $padding: settings.theme?.card?.padding,
-        $shadow: settings.theme?.card?.hasShadow,
-        children
-      }
-    );
-  }
-);
-// src/components/elements/plan-manager/PlanManager.tsx
-var import_react7 = require("react");
-var import_react_dom = require("react-dom");
 // src/components/ui/box/styles.ts
 var Box = dt.div((props) => {
   const initialStyles = [];
@@ -8087,7 +8311,7 @@ var Button = dt.button`
 `;
 // src/components/ui/button/Button.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var Button2 = ({
   color = "white",
   size = "md",
@@ -8096,7 +8320,7 @@ var Button2 = ({
   children,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     Button,
     {
       $color: color,
@@ -8127,6 +8351,7 @@ var Container = dt.div`
   display: flex;
   justify-content: center;
   align-items: center;
+  flex-shrink: 0;
   border-radius: 9999px;
   ${({ $size }) => {
   const base = 24;
@@ -8163,13 +8388,13 @@ var Container = dt.div`
 `;
 // src/components/ui/icon/Icon.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var Icon2 = ({ name, className, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { className: (0, import_classnames.default)("i", `i-${name}`, className), ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { className: (0, import_classnames.default)("i", `i-${name}`, className), ...props });
 };
 // src/components/ui/icon/IconRound.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var IconRound = ({
   name,
   variant = "filled",
@@ -8177,7 +8402,7 @@ var IconRound = ({
   colors = ["white", "#e5e7eb"],
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Container, { $size: size, $variant: variant, $colors: colors, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon2, { name }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Container, { $size: size, $variant: variant, $colors: colors, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon2, { name }) });
 };
 // src/components/ui/progress-bar/styles.ts
@@ -8186,7 +8411,7 @@ var Container2 = dt(Flex)`
 `;
 // src/components/ui/progress-bar/ProgressBar.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var ProgressBar = ({
   progress,
   value,
@@ -8202,21 +8427,21 @@ var ProgressBar = ({
     orange: "#DB6769",
     red: "#EF4444"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     Container2,
     {
       $alignItems: "center",
       $gap: `${16 / TEXT_BASE_SIZE}rem`,
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           Flex,
           {
             $position: "relative",
             $alignItems: "center",
             $width: `${barWidth}`,
             $maxWidth: "100%",
-            children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
               Flex,
               {
                 $position: "relative",
@@ -8225,7 +8450,7 @@ var ProgressBar = ({
                 $height: `${8 / TEXT_BASE_SIZE}rem`,
                 $background: "#F2F4F7",
                 $borderRadius: "9999px",
-                children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                   Box,
                   {
                     $width: `${Math.min(progress, 100)}%`,
@@ -8238,7 +8463,7 @@ var ProgressBar = ({
             )
           }
         ),
-        total !== 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Text, { $size: 14, $weight: 500, children: [
+        total !== 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(Text, { $size: 14, $weight: 500, children: [
           value,
           "/",
           total
@@ -8248,41 +8473,152 @@ var ProgressBar = ({
   );
 };
+// src/components/elements/plan-manager/CheckoutForm.tsx
+var import_react6 = require("react");
+var import_react_stripe_js2 = require("@stripe/react-stripe-js");
+var import_react_stripe_js3 = require("@stripe/react-stripe-js");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var CheckoutForm = () => {
+  const stripe = (0, import_react_stripe_js3.useStripe)();
+  const elements = (0, import_react_stripe_js3.useElements)();
+  const [message, setMessage] = (0, import_react6.useState)(null);
+  const [isLoading, setIsLoading] = (0, import_react6.useState)(false);
+  const handleSubmit = async (event) => {
+    event.preventDefault();
+    if (!stripe || !elements) {
+      return;
+    }
+    setIsLoading(true);
+    const { error } = await stripe.confirmPayment({
+      elements,
+      confirmParams: {
+        return_url: window.location.href
+      }
+    });
+    if (error.type === "card_error" || error.type === "validation_error") {
+      setMessage(error.message);
+    } else {
+      setMessage("An unexpected error occured.");
+    }
+    setIsLoading(false);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    "form",
+    {
+      id: "payment-form",
+      onSubmit: handleSubmit,
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        height: "100%"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+          Box,
+          {
+            $fontSize: "18px",
+            $marginBottom: "1.5rem",
+            $display: "inline-block",
+            $width: "100%",
+            children: [
+              "Add payment method",
+              " "
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          Flex,
+          {
+            $flexDirection: "column",
+            $gap: "1.5rem",
+            $marginBottom: "1.5rem",
+            $width: "100%",
+            children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              import_react_stripe_js2.LinkAuthenticationElement,
+              {
+                id: "link-authentication-element"
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Flex, { $flexDirection: "column", $width: "100%", $flex: "1", $height: "100%", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_stripe_js2.PaymentElement, { id: "payment-element" }),
+          message && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { id: "payment-message", children: message })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "button",
+          {
+            disabled: isLoading || !stripe || !elements,
+            id: "submit",
+            style: {
+              backgroundColor: "#000000",
+              color: "#ffffff",
+              paddingTop: ".75rem",
+              paddingBottom: ".75rem",
+              fontSize: "15px",
+              width: "100%",
+              borderRadius: ".5rem",
+              textAlign: "center",
+              cursor: "pointer"
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { id: "button-text", style: { marginTop: "2.5rem" }, children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "spinner", id: "spinner" }) : "Save payment method" })
+          }
+        ) })
+      ]
+    }
+  );
+};
 // src/components/elements/plan-manager/styles.ts
 var StyledButton = dt(Button2)`
   font-family: "Public Sans", sans-serif;
   font-weight: 500;
   text-align: center;
   width: 100%;
   ${({ $color = "primary", theme }) => {
   const { l: l2 } = hexToHSL(theme[$color]);
-  const color = l2 > 50 ? "#000000" : "#FFFFFF";
+  const textColor = l2 > 50 ? "#000000" : "#FFFFFF";
   return lt`
-      color: ${color};
+      color: ${textColor};
       ${Text} {
-        color: ${color};
+        color: ${textColor};
       }
     `;
 }};
-  ${({ $color = "primary", theme }) => {
+  ${({ $color = "primary", theme, $variant = "filled" }) => {
   const color = theme[$color];
-  return lt`
-      background-color: ${color};
-      border-color: ${color};
-    `;
+  return $variant === "filled" ? lt`
+          background-color: ${color};
+          border-color: ${color};
+        ` : lt`
+          background-color: transparent;
+          border-color: #d2d2d2;
+          color: #194bfb;
+          ${Text} {
+            color: #194bfb;
+          }
+        `;
 }}
   &:hover {
-    ${({ $color = "primary", theme }) => {
+    ${({ $color = "primary", theme, $variant = "filled" }) => {
   const specified = theme[$color];
   const lightened = lighten(specified, 15);
   const color = specified === lightened ? darken(specified, 15) : lightened;
-  return lt`
-        background-color: ${color};
-        border-color: ${color};
-      `;
+  return $variant === "filled" ? lt`
+            background-color: ${color};
+            border-color: ${color};
+          ` : lt`
+            background-color: ${color};
+            border-color: ${color};
+            color: #ffffff;
+            ${Text} {
+              color: #ffffff;
+            }
+          `;
 }}
   }
@@ -8292,19 +8628,19 @@ var StyledButton = dt(Button2)`
       return lt`
           font-size: ${15 / 16}rem;
           padding: ${12 / 16}rem 0;
-          border-radius: ${8 / 16}rem;
+          border-radius: ${6 / 16}rem;
         `;
     case "md":
       return lt`
           font-size: ${17 / 16}rem;
           padding: ${16 / 16}rem 0;
-          border-radius: ${10 / 16}rem;
+          border-radius: ${8 / 16}rem;
         `;
     case "lg":
       return lt`
           font-size: ${19 / 16}rem;
           padding: ${20 / 16}rem 0;
-          border-radius: ${12 / 16}rem;
+          border-radius: ${10 / 16}rem;
         `;
   }
 }}
@@ -8312,6 +8648,301 @@ var StyledButton = dt(Button2)`
 // src/components/elements/plan-manager/PlanManager.tsx
 var import_jsx_runtime8 = require("react/jsx-runtime");
+var OverlayHeader = ({ children }) => {
+  const { setLayout } = useEmbed();
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    Flex,
+    {
+      $paddingLeft: "2.5rem",
+      $paddingRight: "2.5rem",
+      $padding: ".75rem 2.5rem",
+      $flexDirection: "row",
+      $justifyContent: "space-between",
+      $alignItems: "center",
+      $borderBottom: "1px solid #DEDEDE",
+      $gap: "1rem",
+      $backgroundColor: "#FFFFFF",
+      $borderRadius: ".5rem .5rem 0 0",
+      children: [
+        children,
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          Box,
+          {
+            $cursor: "pointer",
+            onClick: () => {
+              setLayout("portal");
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon2, { name: "close", style: { fontSize: 36, color: "#B8B8B8" } })
+          }
+        ) })
+      ]
+    }
+  );
+};
+var OverlayWrapper = ({
+  children,
+  size = "lg"
+}) => {
+  const sizeWidthMap = {
+    md: "700px",
+    lg: "75%"
+  };
+  const sizeHeighthMap = {
+    md: "auto",
+    lg: "75%"
+  };
+  const sizeMaxWidthMap = {
+    md: "auto",
+    lg: "1140px"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    Box,
+    {
+      $position: "absolute",
+      $top: "50%",
+      $left: "50%",
+      $zIndex: "999999",
+      $transform: "translate(-50%, -50%)",
+      $width: "100%",
+      $height: "100%",
+      $backgroundColor: "#D9D9D9",
+      $overflow: "hidden",
+      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        Flex,
+        {
+          $position: "relative",
+          $top: "50%",
+          $left: "50%",
+          $transform: "translate(-50%, -50%)",
+          $flexDirection: "column",
+          $maxWidth: sizeMaxWidthMap[size],
+          $width: sizeWidthMap[size],
+          $height: sizeHeighthMap[size],
+          $backgroundColor: "#FBFBFB",
+          $borderBottom: "1px solid #DEDEDE",
+          $borderRadius: "8px",
+          $boxShadow: "0px 1px 20px 0px #1018280F, 0px 1px 3px 0px #1018281A;",
+          id: "select-plan-dialog",
+          role: "dialog",
+          "aria-labelledby": "select-plan-dialog-label",
+          "aria-modal": "true",
+          children
+        }
+      )
+    }
+  );
+};
+var OverlaySideBar = ({
+  pricePeriod,
+  setPricePeriod,
+  setCheckoutStage
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    Flex,
+    {
+      $flexDirection: "column",
+      $background: "white",
+      $borderRadius: "0 0 0.5rem",
+      $maxWidth: "275px",
+      $height: "100%",
+      $boxShadow: "0px 1px 20px 0px #1018280F, 0px 1px 3px 0px #1018281A;",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+          Flex,
+          {
+            $flexDirection: "column",
+            $position: "relative",
+            $gap: "1rem",
+            $width: "100%",
+            $height: "auto",
+            $padding: "1.5rem",
+            $borderBottom: "1px solid #DEDEDE",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Flex, { $flexDirection: "row", $justifyContent: "space-between", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text, { $size: 20, $weight: 600, children: "Subscription" }),
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+                  Flex,
+                  {
+                    $border: "1px solid #D9D9D9",
+                    $padding: ".15rem .45rem .15rem .55rem",
+                    $alignItems: "center",
+                    $borderRadius: "5px",
+                    $fontSize: "12px",
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Box, { $display: "inline-block", $marginRight: ".5rem", children: "$ USD" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                        Icon2,
+                        {
+                          name: "chevron-down",
+                          style: {
+                            fontSize: "20px",
+                            lineHeight: "1em"
+                          }
+                        }
+                      )
+                    ]
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+                Flex,
+                {
+                  $flexDirection: "row",
+                  $border: "1px solid #D9D9D9",
+                  $borderRadius: "40px",
+                  $fontSize: "12px",
+                  $textAlign: "center",
+                  $cursor: "pointer",
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                      Box,
+                      {
+                        onClick: () => setPricePeriod("month"),
+                        $padding: ".25rem .5rem",
+                        $flex: "1",
+                        $fontWeight: pricePeriod === "month" ? "600" : "400",
+                        $backgroundColor: pricePeriod === "month" ? "#DDDDDD" : "white",
+                        $borderRadius: "40px",
+                        children: "Billed monthly"
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                      Box,
+                      {
+                        onClick: () => setPricePeriod("year"),
+                        $padding: ".25rem .5rem",
+                        $flex: "1",
+                        $fontWeight: pricePeriod === "year" ? "600" : "400",
+                        $backgroundColor: pricePeriod === "year" ? "#DDDDDD" : "white",
+                        $borderRadius: "40px",
+                        children: "Billed yearly"
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Box, { $fontSize: "11px", $color: "#194BFB", children: "Save up to 33% with yearly billing" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+          Flex,
+          {
+            $flexDirection: "column",
+            $position: "relative",
+            $gap: "1rem",
+            $width: "100%",
+            $height: "auto",
+            $padding: "1.5rem",
+            $flex: "1",
+            $borderBottom: "1px solid #DEDEDE",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Box, { $fontSize: "14px", $color: "#5D5D5D", children: "Plan" }),
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+                Flex,
+                {
+                  $flexDirection: "column",
+                  $fontSize: "14px",
+                  $color: "#5D5D5D",
+                  $gap: ".5rem",
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+                      Flex,
+                      {
+                        $flexDirection: "row",
+                        $alignItems: "center",
+                        $justifyContent: "space-between",
+                        $fontSize: "14px",
+                        $color: "#5D5D5D",
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Flex, { $fontSize: "14px", $color: "#5D5D5D", children: "Free" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Flex, { $fontSize: "12px", $color: "#000000", children: [
+                            "$0/",
+                            pricePeriod
+                          ] })
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                      Box,
+                      {
+                        $width: "100%",
+                        $textAlign: "left",
+                        $opacity: "50%",
+                        $marginBottom: "-.25rem",
+                        $marginTop: "-.25rem",
+                        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                          Icon2,
+                          {
+                            name: "arrow-down",
+                            style: {
+                              display: "inline-block"
+                            }
+                          }
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+                      Flex,
+                      {
+                        $flexDirection: "row",
+                        $alignItems: "center",
+                        $justifyContent: "space-between",
+                        $fontSize: "14px",
+                        $color: "#5D5D5D",
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Flex, { $fontSize: "14px", $color: "#000000", $fontWeight: "600", children: "Professional" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Flex, { $fontSize: "12px", $color: "#000000", children: [
+                            "$285/",
+                            pricePeriod
+                          ] })
+                        ]
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+          Flex,
+          {
+            $flexDirection: "column",
+            $position: "relative",
+            $gap: ".75rem",
+            $width: "100%",
+            $height: "auto",
+            $padding: "1.5rem",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Flex, { $fontSize: "12px", $color: "#5D5D5D", $justifyContent: "space-between", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Box, { $fontSize: "12px", $color: "#5D5D5D", children: [
+                  "Monthly total:",
+                  " "
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Box, { $fontSize: "12px", $color: "#000000", children: "$285/mo" })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                StyledButton,
+                {
+                  $size: "sm",
+                  onClick: () => {
+                    setCheckoutStage("checkout");
+                  },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Flex, { $gap: ".5rem", $alignItems: "center", $justifyContent: "center", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: "Next: Checkout" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon2, { name: "arrow-right" })
+                  ] })
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Box, { $fontSize: "12px", $color: "#5D5D5D", children: "Discounts & credits applied at checkout" })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
 var resolveDesignProps = (props) => {
   return {
     header: {
@@ -8342,118 +8973,89 @@ var resolveDesignProps = (props) => {
 };
 var PlanManager = (0, import_react7.forwardRef)(({ children, className, portal, ...rest }, ref) => {
   const props = resolveDesignProps(rest);
-  const { data, settings, layout, setLayout } = useEmbed();
-  const { plan, plans, addOns } = (0, import_react7.useMemo)(() => {
-    return {
-      plan: data.company?.plan || {},
-      plans: data.company?.plans?.map(({ name, description }) => ({
-        name,
-        description,
-        price: void 0
-      })) || [],
-      addOns: data.company?.addOns?.map(({ name, description }) => ({
+  const [checkoutStage, setCheckoutStage] = (0, import_react7.useState)(
+    "plan"
+  );
+  const [planPeriod, setPlanPeriod] = (0, import_react7.useState)("month");
+  const { data, settings, layout, stripe, setLayout } = useEmbed();
+  const { currentPlan, canChangePlan, availablePlans } = (0, import_react7.useMemo)(() => {
+    const canChangePlan2 = stripe !== null;
+    const availablePlans2 = data.activePlans?.map(
+      ({ name, description, current, monthlyPrice, yearlyPrice }) => ({
         name,
         description,
-        price: void 0
-      })) || []
+        price: planPeriod === "month" ? monthlyPrice?.price : yearlyPrice?.price,
+        current
+      })
+    );
+    return {
+      currentPlan: data.company?.plan,
+      canChangePlan: canChangePlan2,
+      availablePlans: availablePlans2
     };
-  }, [data.company]);
+  }, [data.company, data.activePlans, stripe, planPeriod]);
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { ref, className, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Flex, { $flexDirection: "column", $gap: "0.75rem", $margin: "0 0 3rem", children: [
-      props.header.isVisible && plan && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
-        Flex,
-        {
-          $justifyContent: "space-between",
-          $alignItems: "center",
-          $width: "100%",
-          $margin: "0 0 1.5rem",
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Box, { $margin: "0 0 0.75rem", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                Text,
-                {
-                  $font: settings.theme.typography[props.header.title.fontStyle].fontFamily,
-                  $size: settings.theme.typography[props.header.title.fontStyle].fontSize,
-                  $weight: settings.theme.typography[props.header.title.fontStyle].fontWeight,
-                  $color: settings.theme.typography[props.header.title.fontStyle].color,
-                  $lineHeight: 1,
-                  children: plan.name
-                }
-              ) }),
-              props.header.description.isVisible && plan.description && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                Text,
-                {
-                  $font: settings.theme.typography[props.header.description.fontStyle].fontFamily,
-                  $size: settings.theme.typography[props.header.description.fontStyle].fontSize,
-                  $weight: settings.theme.typography[props.header.description.fontStyle].fontWeight,
-                  $color: settings.theme.typography[props.header.description.fontStyle].color,
-                  children: plan.description
-                }
-              )
-            ] }),
-            props.header.price.isVisible && plan.planPrice >= 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
-              Text,
-              {
-                $font: settings.theme.typography[props.header.price.fontStyle].fontFamily,
-                $size: settings.theme.typography[props.header.price.fontStyle].fontSize,
-                $weight: settings.theme.typography[props.header.price.fontStyle].fontWeight,
-                $color: settings.theme.typography[props.header.price.fontStyle].color,
-                children: [
-                  "$",
-                  plan.planPrice,
-                  "/",
-                  plan.planPeriod
-                ]
-              }
-            )
-          ]
-        }
-      ),
-      props.addOns.isVisible && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
-        props.addOns.showLabel && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-          Text,
-          {
-            $font: settings.theme.typography.text.fontFamily,
-            $size: settings.theme.typography.text.fontSize,
-            $weight: 500,
-            $color: darken(settings.theme.typography.text.color, 20),
-            children: "Add-Ons"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Box, { $width: "100%", $margin: "0 0 1rem", children: addOns.map((addOn, index) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      Flex,
+      {
+        $flexDirection: "column",
+        $gap: "0.75rem",
+        ...canChangePlan && { $margin: "0 0 0.5rem" },
+        children: props.header.isVisible && currentPlan && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
           Flex,
           {
             $justifyContent: "space-between",
             $alignItems: "center",
             $width: "100%",
+            ...canChangePlan && { $margin: "0 0 1.5rem" },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Box, { $margin: "0 0 0.75rem", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                  Text,
+                  {
+                    $font: settings.theme.typography[props.header.title.fontStyle].fontFamily,
+                    $size: settings.theme.typography[props.header.title.fontStyle].fontSize,
+                    $weight: settings.theme.typography[props.header.title.fontStyle].fontWeight,
+                    $color: settings.theme.typography[props.header.title.fontStyle].color,
+                    $lineHeight: 1,
+                    children: currentPlan.name
+                  }
+                ) }),
+                props.header.description.isVisible && currentPlan.description && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                  Text,
+                  {
+                    $font: settings.theme.typography[props.header.description.fontStyle].fontFamily,
+                    $size: settings.theme.typography[props.header.description.fontStyle].fontSize,
+                    $weight: settings.theme.typography[props.header.description.fontStyle].fontWeight,
+                    $color: settings.theme.typography[props.header.description.fontStyle].color,
+                    children: currentPlan.description
+                  }
+                )
+              ] }),
+              props.header.price.isVisible && currentPlan.planPrice >= 0 && currentPlan.planPeriod && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
                 Text,
                 {
-                  $font: settings.theme.typography[props.addOns.fontStyle].fontFamily,
-                  $size: settings.theme.typography[props.addOns.fontStyle].fontSize,
-                  $weight: settings.theme.typography[props.addOns.fontStyle].fontWeight,
-                  $color: settings.theme.typography[props.addOns.fontStyle].color,
-                  children: addOn.name
+                  $font: settings.theme.typography[props.header.price.fontStyle].fontFamily,
+                  $size: settings.theme.typography[props.header.price.fontStyle].fontSize,
+                  $weight: settings.theme.typography[props.header.price.fontStyle].fontWeight,
+                  $color: settings.theme.typography[props.header.price.fontStyle].color,
+                  children: [
+                    "$",
+                    currentPlan.planPrice,
+                    "/",
+                    currentPlan.planPeriod
+                  ]
                 }
-              ),
-              addOn.price >= 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Text, { $weight: 500, children: [
-                "$",
-                addOn.price,
-                "/mo"
-              ] })
+              )
             ]
-          },
-          index
-        )) })
-      ] })
-    ] }),
-    props.callToAction.isVisible && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          }
+        )
+      }
+    ),
+    canChangePlan && props.callToAction.isVisible && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       StyledButton,
       {
         onClick: () => {
-          if (layout !== "checkout")
-            return;
           setLayout("checkout");
         },
         $size: props.callToAction.buttonSize,
@@ -8469,83 +9071,269 @@ var PlanManager = (0, import_react7.forwardRef)(({ children, className, portal,
         )
       }
     ),
-    children,
-    layout === "checkout" && (0, import_react_dom.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-        Box,
-        {
-          $position: "absolute",
-          $top: "50%",
-          $left: "50%",
-          $zIndex: "999999",
-          $transform: "translate(-50%, -50%)",
-          $width: "100%",
-          $height: "100%",
-          $backgroundColor: "#B5B5B580",
-          children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    canChangePlan && layout === "checkout" && (0, import_react_dom.createPortal)(
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(OverlayWrapper, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(OverlayHeader, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Flex, { $gap: "1rem", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Flex, { $flexDirection: "row", $gap: "0.5rem", $alignItems: "center", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              Box,
+              {
+                $width: "15px",
+                $height: "15px",
+                $border: "2px solid #DDDDDD",
+                $borderRadius: "999px",
+                $backgroundColor: "white"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              "div",
+              {
+                ...checkoutStage === "plan" && {
+                  style: {
+                    fontWeight: "700"
+                  }
+                },
+                children: "1. Select plan"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              Icon2,
+              {
+                name: "chevron-right",
+                style: { fontSize: 16, color: "#D0D0D0" }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Flex, { $flexDirection: "row", $gap: "0.5rem", $alignItems: "center", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              Box,
+              {
+                $width: "15px",
+                $height: "15px",
+                $border: "2px solid #DDDDDD",
+                $borderRadius: "999px",
+                $backgroundColor: "white"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              "div",
+              {
+                ...checkoutStage === "checkout" && {
+                  style: {
+                    fontWeight: "700"
+                  }
+                },
+                children: "2. Checkout"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              Icon2,
+              {
+                name: "chevron-right",
+                style: { fontSize: 16, color: "#D0D0D0" }
+              }
+            )
+          ] })
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Flex, { $flexDirection: "row", $height: "100%", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
             Flex,
             {
-              $position: "relative",
-              $top: "50%",
-              $left: "50%",
-              $transform: "translate(-50%, -50%)",
-              $width: "956px",
-              $height: "700px",
+              $flexDirection: "column",
+              $gap: "1rem",
+              $padding: "2rem 2.5rem 2rem 2.5rem",
               $backgroundColor: "#FBFBFB",
-              $borderRadius: "8px",
-              $boxShadow: "0px 1px 20px 0px #1018280F, 0px 1px 3px 0px #1018281A;",
-              id: "select-plan-dialog",
-              role: "dialog",
-              "aria-labelledby": "select-plan-dialog-label",
-              "aria-modal": "true",
+              $borderRadius: "0 0.5rem 0",
+              $flex: "1",
+              $height: "100%",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                  Box,
-                  {
-                    $position: "absolute",
-                    $top: "0.25rem",
-                    $right: "0.75rem",
-                    $cursor: "pointer",
-                    onClick: () => {
-                      setLayout("portal");
-                    },
-                    children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon2, { name: "close", style: { fontSize: 36, color: "#B8B8B8" } })
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Flex, { $flexDirection: "column", $gap: "1rem", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                    Text,
+                checkoutStage === "plan" && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+                    Flex,
                     {
-                      as: "h1",
-                      id: "select-plan-dialog-label",
-                      $size: 24,
-                      $weight: 800,
-                      children: "Select plan"
+                      $flexDirection: "column",
+                      $gap: "1rem",
+                      $marginBottom: "1rem",
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                          Text,
+                          {
+                            as: "h1",
+                            id: "select-plan-dialog-label",
+                            $size: 18,
+                            $marginBottom: ".5rem",
+                            children: "Select plan"
+                          }
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                          Text,
+                          {
+                            as: "p",
+                            id: "select-plan-dialog-description",
+                            $size: 14,
+                            $weight: 400,
+                            children: "Choose your base plan"
+                          }
+                        )
+                      ]
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Flex, { $flexDirection: "column", $gap: "1rem", children: plans.map((plan2, index) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                     Flex,
                     {
-                      $justifyContent: "space-between",
-                      $alignItems: "center",
-                      $width: "100%",
-                      children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text, { $size: 20, $weight: 800, children: plan2.name }),
-                        plan2.price >= 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Text, { children: [
-                          "$",
-                          plan2.price,
-                          "/mo"
-                        ] })
-                      ]
-                    },
-                    index
-                  )) })
-                ] })
+                      $flexDirection: "row",
+                      $gap: "1rem",
+                      $flex: "1",
+                      $height: "100%",
+                      children: availablePlans?.map((plan) => {
+                        return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+                          Flex,
+                          {
+                            $height: "100%",
+                            $flexDirection: "column",
+                            $backgroundColor: "white",
+                            $border: plan?.current ? `2px solid #194BFB` : "",
+                            $flex: "1",
+                            $borderRadius: ".5rem",
+                            $boxShadow: "0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 20px rgba(16, 24, 40, 0.06)",
+                            children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+                                Flex,
+                                {
+                                  $flexDirection: "column",
+                                  $position: "relative",
+                                  $gap: "1rem",
+                                  $width: "100%",
+                                  $height: "auto",
+                                  $padding: "1.5rem",
+                                  $borderBottom: "1px solid #DEDEDE",
+                                  children: [
+                                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text, { $size: 20, $weight: 600, children: plan?.name }),
+                                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text, { $size: 14, children: plan?.description }),
+                                    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Text, { children: [
+                                      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Box, { $display: "inline-block", $fontSize: ".90rem", children: "$" }),
+                                      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Box, { $display: "inline-block", $fontSize: "1.5rem", children: plan?.price ? plan.price : "350" }),
+                                      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Box, { $display: "inline-block", $fontSize: ".75rem", children: [
+                                        "/",
+                                        planPeriod
+                                      ] })
+                                    ] }),
+                                    plan?.current && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                                      Flex,
+                                      {
+                                        $position: "absolute",
+                                        $right: "1rem",
+                                        $top: "1rem",
+                                        $fontSize: ".75rem",
+                                        $color: "white",
+                                        $backgroundColor: "#194BFB",
+                                        $borderRadius: "999px",
+                                        $padding: ".125rem .85rem",
+                                        children: "Current plan"
+                                      }
+                                    )
+                                  ]
+                                }
+                              ),
+                              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                                Flex,
+                                {
+                                  $flexDirection: "column",
+                                  $position: "relative",
+                                  $gap: "0.5rem",
+                                  $flex: "1",
+                                  $width: "100%",
+                                  $height: "auto",
+                                  $padding: "1.5rem",
+                                  children: [{}, {}, {}].map(() => {
+                                    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Flex, { $flexShrink: "0", $gap: "1rem", children: [
+                                      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                                        IconRound,
+                                        {
+                                          name: "server-search",
+                                          size: "tn",
+                                          colors: ["#00000", "#F5F5F5"]
+                                        }
+                                      ),
+                                      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Flex, { $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text, { $size: ".75rem", $color: "#00000", children: "5 Queries/mo" }) })
+                                    ] });
+                                  })
+                                }
+                              ),
+                              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                                Flex,
+                                {
+                                  $flexDirection: "column",
+                                  $position: "relative",
+                                  $gap: "1rem",
+                                  $width: "100%",
+                                  $height: "auto",
+                                  $padding: "1.5rem",
+                                  children: plan.current ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+                                    Flex,
+                                    {
+                                      $flexDirection: "row",
+                                      $gap: ".5rem",
+                                      $justifyContent: "center",
+                                      $alignItems: "center",
+                                      children: [
+                                        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                                          Icon2,
+                                          {
+                                            name: "check-rounded",
+                                            style: {
+                                              fontSize: 24,
+                                              lineHeight: "1em",
+                                              color: "#194BFB"
+                                            }
+                                          }
+                                        ),
+                                        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                                          "span",
+                                          {
+                                            style: {
+                                              fontSize: "1rem",
+                                              color: "#7B7B7B"
+                                            },
+                                            children: "Selected"
+                                          }
+                                        )
+                                      ]
+                                    }
+                                  ) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                                    StyledButton,
+                                    {
+                                      $size: "sm",
+                                      $color: "secondary",
+                                      $variant: "outline",
+                                      onClick: () => {
+                                      },
+                                      children: "Select"
+                                    }
+                                  )
+                                }
+                              )
+                            ]
+                          }
+                        );
+                      })
+                    }
+                  )
+                ] }),
+                checkoutStage === "checkout" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CheckoutForm, {})
               ]
             }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            OverlaySideBar,
+            {
+              pricePeriod: planPeriod,
+              setPricePeriod: setPlanPeriod,
+              setCheckoutStage
+            }
           )
-        }
-      ),
+        ] })
+      ] }),
       portal || document.body
     )
   ] });
@@ -8587,7 +9375,7 @@ var IncludedFeatures = (0, import_react8.forwardRef)(({ className, ...rest }, re
         allocationType,
         feature,
         period,
-        usage,
+        usage = 0,
         ...props2
       }) => {
         return {
@@ -8632,7 +9420,7 @@ var IncludedFeatures = (0, import_react8.forwardRef)(({ className, ...rest }, re
               $alignItems: "center",
               $gap: "1rem",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Flex, { $flexShrink: "0", $gap: "1rem", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Flex, { $gap: "1rem", children: [
                   props.icons.isVisible && feature?.icon && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                     IconRound,
                     {
@@ -8651,7 +9439,6 @@ var IncludedFeatures = (0, import_react8.forwardRef)(({ className, ...rest }, re
                       $size: settings.theme.typography[props.icons.fontStyle].fontSize,
                       $weight: settings.theme.typography[props.icons.fontStyle].fontWeight,
                       $color: settings.theme.typography[props.icons.fontStyle].color,
-                      $align: "center",
                       children: feature.name
                     }
                   ) })
@@ -8852,19 +9639,29 @@ function resolveDesignProps4(props) {
 }
 var UpcomingBill = (0, import_react10.forwardRef)(({ className, ...rest }, ref) => {
   const props = resolveDesignProps4(rest);
-  const { settings } = useEmbed();
-  const { bill } = (0, import_react10.useMemo)(() => {
+  const { data, settings, stripe } = useEmbed();
+  const { latestInvoice } = (0, import_react10.useMemo)(() => {
     return {
-      bill: {
-        amount: 200,
-        period: "monthly",
-        dueDate: toPrettyDate(/* @__PURE__ */ new Date("2024-06-12")),
-        endDate: (/* @__PURE__ */ new Date("2025-05-12")).toLocaleDateString()
+      latestInvoice: {
+        ...data.subscription?.latestInvoice?.amountDue && {
+          amountDue: data.subscription.latestInvoice.amountDue
+        },
+        ...data.subscription?.interval && {
+          interval: data.subscription.interval
+        },
+        ...data.subscription?.latestInvoice?.dueDate && {
+          dueDate: toPrettyDate(
+            new Date(data.subscription.latestInvoice.dueDate)
+          )
+        }
       }
     };
-  }, []);
+  }, [data.subscription]);
+  if (!stripe || !data.subscription?.latestInvoice) {
+    return null;
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { ref, className, children: [
-    props.header.isVisible && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    props.header.isVisible && latestInvoice.dueDate && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       Flex,
       {
         $justifyContent: "space-between",
@@ -8880,13 +9677,13 @@ var UpcomingBill = (0, import_react10.forwardRef)(({ className, ...rest }, ref)
             children: [
               props.header.prefix,
               " ",
-              bill.dueDate
+              latestInvoice.dueDate
             ]
           }
         )
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Flex, { $justifyContent: "space-between", $alignItems: "start", $gap: "1rem", children: [
+    latestInvoice.amountDue && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Flex, { $justifyContent: "space-between", $alignItems: "start", $gap: "1rem", children: [
       props.price.isVisible && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Flex, { $alignItems: "end", $flexGrow: "1", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
         Text,
         {
@@ -8904,27 +9701,18 @@ var UpcomingBill = (0, import_react10.forwardRef)(({ className, ...rest }, ref)
                 children: "$"
               }
             ),
-            bill.amount
+            latestInvoice.amountDue
           ]
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Box, { $maxWidth: "140px", $lineHeight: "1", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Box, { $maxWidth: "10rem", $lineHeight: "1", $textAlign: "right", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         Text,
         {
           $font: settings.theme.typography[props.contractEndDate.fontStyle].fontFamily,
           $size: settings.theme.typography[props.contractEndDate.fontStyle].fontSize,
           $weight: settings.theme.typography[props.contractEndDate.fontStyle].fontWeight,
           $color: settings.theme.typography[props.contractEndDate.fontStyle].color,
-          children: [
-            "Estimated monthly bill.",
-            props.contractEndDate.isVisible && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
-              "\xA0",
-              props.contractEndDate.prefix,
-              " ",
-              bill.endDate,
-              "."
-            ] })
-          ]
+          children: "Estimated monthly bill."
         }
       ) })
     ] })
@@ -8948,21 +9736,26 @@ var resolveDesignProps5 = (props) => {
 };
 var PaymentMethod = (0, import_react11.forwardRef)(({ children, className, portal, ...rest }, ref) => {
   const props = resolveDesignProps5(rest);
-  const { settings, layout, setLayout } = useEmbed();
+  const { data, settings, stripe, layout, setLayout } = useEmbed();
   const paymentMethod = (0, import_react11.useMemo)(() => {
-    const cardNumber = "4512";
-    const expirationDate = "2024-12-22";
-    const timeToExpiration = Math.round(
-      +new Date(expirationDate) - +/* @__PURE__ */ new Date()
-    );
-    const monthsToExpiration = Math.round(
-      timeToExpiration / (1e3 * 60 * 60 * 24 * 30)
-    );
+    const { cardLast4, cardExpMonth, cardExpYear } = data.subscription?.paymentMethod || {};
+    let monthsToExpiration;
+    if (typeof cardExpYear === "number" && typeof cardExpMonth === "number") {
+      const timeToExpiration = Math.round(
+        +new Date(cardExpYear, cardExpMonth - 1) - +/* @__PURE__ */ new Date()
+      );
+      monthsToExpiration = Math.round(
+        timeToExpiration / (1e3 * 60 * 60 * 24 * 30)
+      );
+    }
     return {
-      cardNumber,
+      cardLast4,
       monthsToExpiration
     };
-  }, []);
+  }, [data.subscription?.paymentMethod]);
+  if (!stripe || !data.subscription?.paymentMethod) {
+    return null;
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { ref, className, children: [
     props.header.isVisible && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
       Flex,
@@ -8981,7 +9774,7 @@ var PaymentMethod = (0, import_react11.forwardRef)(({ children, className, porta
               children: "Payment Method"
             }
           ),
-          Math.abs(paymentMethod.monthsToExpiration) < 4 && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          typeof paymentMethod.monthsToExpiration === "number" && Math.abs(paymentMethod.monthsToExpiration) < 4 && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
             Text,
             {
               $font: settings.theme.typography.text.fontFamily,
@@ -8993,7 +9786,7 @@ var PaymentMethod = (0, import_react11.forwardRef)(({ children, className, porta
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+    paymentMethod.cardLast4 && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
       Flex,
       {
         $justifyContent: "space-between",
@@ -9005,7 +9798,7 @@ var PaymentMethod = (0, import_react11.forwardRef)(({ children, className, porta
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Text, { $font: settings.theme.typography.text.fontFamily, $size: 14, children: [
             "\u{1F4B3} Card ending in ",
-            paymentMethod.cardNumber
+            paymentMethod.cardLast4
           ] }),
           props.functions.allowEdit && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
             Text,
@@ -9027,62 +9820,246 @@ var PaymentMethod = (0, import_react11.forwardRef)(({ children, className, porta
       }
     ),
     layout === "payment" && (0, import_react_dom2.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-        Box,
-        {
-          $position: "absolute",
-          $top: "50%",
-          $left: "50%",
-          $zIndex: "999999",
-          $transform: "translate(-50%, -50%)",
-          $width: "100%",
-          $height: "100%",
-          $backgroundColor: "#B5B5B580",
-          children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
-            Flex,
-            {
-              $position: "relative",
-              $top: "50%",
-              $left: "50%",
-              $transform: "translate(-50%, -50%)",
-              $width: "956px",
-              $height: "700px",
-              $backgroundColor: "#FBFBFB",
-              $borderRadius: "8px",
-              $boxShadow: "0px 1px 20px 0px #1018280F, 0px 1px 3px 0px #1018281A;",
-              id: "select-plan-dialog",
-              role: "dialog",
-              "aria-labelledby": "select-plan-dialog-label",
-              "aria-modal": "true",
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-                  Box,
-                  {
-                    $position: "absolute",
-                    $top: "0.25rem",
-                    $right: "0.75rem",
-                    $cursor: "pointer",
-                    onClick: () => {
-                      setLayout("portal");
-                    },
-                    children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Icon2, { name: "close", style: { fontSize: 36, color: "#B8B8B8" } })
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Flex, { $flexDirection: "column", $gap: "1rem", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-                  Text,
-                  {
-                    as: "h1",
-                    id: "select-plan-dialog-label",
-                    $size: 24,
-                    $weight: 800,
-                    children: "Add payment method"
-                  }
-                ) })
-              ]
-            }
-          )
-        }
-      ),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(OverlayWrapper, { size: "md", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(OverlayHeader, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { $fontWeight: "600", children: "Edit payment method" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+          Flex,
+          {
+            $flexDirection: "column",
+            $padding: "2.5rem",
+            $height: "100%",
+            $gap: "1.5rem",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                Flex,
+                {
+                  $flexDirection: "column",
+                  $gap: "1rem",
+                  $backgroundColor: "#FBFBFB",
+                  $borderRadius: "0 0 0.5rem 0.5rem",
+                  $flex: "1",
+                  $height: "100%",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Flex, { $flexDirection: "column", $height: "100%", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                      Box,
+                      {
+                        $fontSize: "18px",
+                        $marginBottom: "1.5rem",
+                        $display: "inline-block",
+                        $width: "100%",
+                        children: "Default"
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Flex, { $gap: "1rem", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                        Flex,
+                        {
+                          $alignItems: "center",
+                          $padding: ".5rem 1rem",
+                          $border: "1px solid #E2E5E9",
+                          $borderRadius: ".5rem",
+                          $backgroundColor: "#ffffff",
+                          $flexDirection: "row",
+                          $gap: "1rem",
+                          $width: "100%",
+                          children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+                            Flex,
+                            {
+                              $flexDirection: "row",
+                              $justifyContent: "space-between",
+                              $flex: "1",
+                              children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+                                  Flex,
+                                  {
+                                    $flexDirection: "row",
+                                    $alignItems: "center",
+                                    $gap: "1rem",
+                                    children: [
+                                      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { $display: "inline-block", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                                        "svg",
+                                        {
+                                          viewBox: "0 0 24 16",
+                                          fill: "none",
+                                          xmlns: "http://www.w3.org/2000/svg",
+                                          width: "26px",
+                                          height: "auto",
+                                          children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("g", { children: [
+                                            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                                              "rect",
+                                              {
+                                                stroke: "#DDD",
+                                                fill: "#FFF",
+                                                x: ".25",
+                                                y: ".25",
+                                                width: "23",
+                                                height: "15.5",
+                                                rx: "2"
+                                              }
+                                            ),
+                                            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                                              "path",
+                                              {
+                                                d: "M2.788 5.914A7.201 7.201 0 0 0 1 5.237l.028-.125h2.737c.371.013.672.125.77.519l.595 2.836.182.854 1.666-4.21h1.799l-2.674 6.167H4.304L2.788 5.914Zm7.312 5.37H8.399l1.064-6.172h1.7L10.1 11.284Zm6.167-6.021-.232 1.333-.153-.066a3.054 3.054 0 0 0-1.268-.236c-.671 0-.972.269-.98.531 0 .29.365.48.96.762.98.44 1.435.979 1.428 1.681-.014 1.28-1.176 2.108-2.96 2.108-.764-.007-1.5-.158-1.898-.328l.238-1.386.224.099c.553.23.917.328 1.596.328.49 0 1.015-.19 1.022-.604 0-.27-.224-.466-.882-.769-.644-.295-1.505-.788-1.491-1.674C11.878 5.84 13.06 5 14.74 5c.658 0 1.19.138 1.526.263Zm2.26 3.834h1.415c-.07-.308-.392-1.786-.392-1.786l-.12-.531c-.083.23-.23.604-.223.59l-.68 1.727Zm2.1-3.985L22 11.284h-1.575s-.154-.71-.203-.926h-2.184l-.357.926h-1.785l2.527-5.66c.175-.4.483-.512.889-.512h1.316Z",
+                                                fill: "#1434CB"
+                                              }
+                                            )
+                                          ] })
+                                        }
+                                      ) }),
+                                      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { $whiteSpace: "nowrap", children: "Visa **** 4242" })
+                                    ]
+                                  }
+                                ),
+                                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Flex, { $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { $fontSize: "12px", $color: "#5D5D5D", children: "Expires: 3/30" }) })
+                              ]
+                            }
+                          )
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Flex, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                        StyledButton,
+                        {
+                          $size: "sm",
+                          $color: "secondary",
+                          $variant: "outline",
+                          style: {
+                            whiteSpace: "nowrap",
+                            paddingLeft: "1rem",
+                            paddingRight: "1rem"
+                          },
+                          children: "Edit"
+                        }
+                      ) })
+                    ] })
+                  ] })
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                Flex,
+                {
+                  $flexDirection: "column",
+                  $gap: "1rem",
+                  $backgroundColor: "#FBFBFB",
+                  $borderRadius: "0 0 0.5rem 0.5rem",
+                  $flex: "1",
+                  $height: "100%",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Flex, { $flexDirection: "column", $height: "100%", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                      Box,
+                      {
+                        $fontSize: "18px",
+                        $marginBottom: "1.5rem",
+                        $display: "inline-block",
+                        $width: "100%",
+                        children: "Others"
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Flex, { $gap: "1rem", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                        Flex,
+                        {
+                          $alignItems: "center",
+                          $padding: ".5rem 1rem",
+                          $border: "1px solid #E2E5E9",
+                          $borderRadius: ".5rem",
+                          $backgroundColor: "#ffffff",
+                          $flexDirection: "row",
+                          $gap: "1rem",
+                          $width: "100%",
+                          children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+                            Flex,
+                            {
+                              $flexDirection: "row",
+                              $justifyContent: "space-between",
+                              $flex: "1",
+                              children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+                                  Flex,
+                                  {
+                                    $flexDirection: "row",
+                                    $alignItems: "center",
+                                    $gap: "1rem",
+                                    children: [
+                                      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { $display: "inline-block", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                                        "svg",
+                                        {
+                                          viewBox: "0 0 24 16",
+                                          fill: "none",
+                                          xmlns: "http://www.w3.org/2000/svg",
+                                          width: "26px",
+                                          height: "auto",
+                                          children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("g", { children: [
+                                            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                                              "rect",
+                                              {
+                                                stroke: "#DDD",
+                                                fill: "#FFF",
+                                                x: ".25",
+                                                y: ".25",
+                                                width: "23",
+                                                height: "15.5",
+                                                rx: "2"
+                                              }
+                                            ),
+                                            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                                              "path",
+                                              {
+                                                d: "M2.788 5.914A7.201 7.201 0 0 0 1 5.237l.028-.125h2.737c.371.013.672.125.77.519l.595 2.836.182.854 1.666-4.21h1.799l-2.674 6.167H4.304L2.788 5.914Zm7.312 5.37H8.399l1.064-6.172h1.7L10.1 11.284Zm6.167-6.021-.232 1.333-.153-.066a3.054 3.054 0 0 0-1.268-.236c-.671 0-.972.269-.98.531 0 .29.365.48.96.762.98.44 1.435.979 1.428 1.681-.014 1.28-1.176 2.108-2.96 2.108-.764-.007-1.5-.158-1.898-.328l.238-1.386.224.099c.553.23.917.328 1.596.328.49 0 1.015-.19 1.022-.604 0-.27-.224-.466-.882-.769-.644-.295-1.505-.788-1.491-1.674C11.878 5.84 13.06 5 14.74 5c.658 0 1.19.138 1.526.263Zm2.26 3.834h1.415c-.07-.308-.392-1.786-.392-1.786l-.12-.531c-.083.23-.23.604-.223.59l-.68 1.727Zm2.1-3.985L22 11.284h-1.575s-.154-.71-.203-.926h-2.184l-.357.926h-1.785l2.527-5.66c.175-.4.483-.512.889-.512h1.316Z",
+                                                fill: "#1434CB"
+                                              }
+                                            )
+                                          ] })
+                                        }
+                                      ) }),
+                                      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { $whiteSpace: "nowrap", children: "Visa **** 2929" })
+                                    ]
+                                  }
+                                ),
+                                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Flex, { $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { $fontSize: "12px", $color: "#5D5D5D", children: "Expires: 3/30" }) })
+                              ]
+                            }
+                          )
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Flex, { $gap: "1rem", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                          StyledButton,
+                          {
+                            $size: "sm",
+                            $color: "secondary",
+                            $variant: "outline",
+                            style: {
+                              whiteSpace: "nowrap",
+                              paddingLeft: "1rem",
+                              paddingRight: "1rem"
+                            },
+                            children: "Make Default"
+                          }
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                          StyledButton,
+                          {
+                            $size: "sm",
+                            $color: "secondary",
+                            $variant: "outline",
+                            style: {
+                              whiteSpace: "nowrap",
+                              paddingLeft: "1rem",
+                              paddingRight: "1rem"
+                            },
+                            children: "Edit"
+                          }
+                        )
+                      ] })
+                    ] })
+                  ] })
+                }
+              )
+            ]
+          }
+        )
+      ] }),
       portal || document.body
     )
   ] });
@@ -9190,20 +10167,159 @@ var Invoices = (0, import_react12.forwardRef)(({ className, ...rest }, ref) => {
 });
 // src/components/embed/ComponentTree.tsx
-var import_react14 = require("react");
+var import_react18 = require("react");
 // src/components/embed/renderer.ts
+var import_react17 = require("react");
+// src/components/layout/root/Root.tsx
 var import_react13 = require("react");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var Root = (0, import_react13.forwardRef)(
+  (props, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { ref, ...props });
+  }
+);
+// src/components/layout/viewport/Viewport.tsx
+var import_react14 = require("react");
+// src/components/layout/viewport/styles.ts
+var StyledViewport = dt.div`
+  display: flex;
+  flex-wrap: wrap;
+  margin-left: auto;
+  margin-right: auto;
+`;
+// src/components/layout/viewport/Viewport.tsx
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var Viewport = (0, import_react14.forwardRef)(
+  ({ children, ...props }, ref) => {
+    const { settings, layout } = useEmbed();
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      StyledViewport,
+      {
+        ref,
+        $numberOfColumns: settings.theme.numberOfColumns,
+        ...props,
+        children: layout === "disabled" ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "", children: "DISABLED" }) : children
+      }
+    );
+  }
+);
+// src/components/layout/column/Column.tsx
+var import_react16 = require("react");
+// src/components/layout/card/Card.tsx
+var import_react15 = require("react");
+// src/components/layout/card/styles.ts
+var StyledCard = dt.div(
+  ({
+    theme,
+    $sectionLayout = "merged",
+    $borderRadius = 8,
+    $padding = 48,
+    $shadow = true
+  }) => {
+    return lt`
+      box-sizing: border-box;
+      font-size: ${TEXT_BASE_SIZE}px;
+      *,
+      *::before,
+      *::after {
+        box-sizing: inherit;
+      }
+      > * {
+        padding: ${$padding * 0.75 / TEXT_BASE_SIZE}rem
+          ${$padding / TEXT_BASE_SIZE}rem;
+        color: ${theme.typography.text.color};
+      }
+      ${() => {
+      const { l: l2 } = hexToHSL(theme.card.background);
+      const borderColor = l2 > 50 ? darken(theme.card.background, 10) : lighten(theme.card.background, 30);
+      const borderRadius = `${$borderRadius / TEXT_BASE_SIZE}rem`;
+      const boxShadow = "0px 1px 20px 0px #1018280F, 0px 1px 3px 0px #1018281A";
+      if ($sectionLayout === "merged") {
+        return lt`
+            background: ${({ theme: theme2 }) => theme2.card.background};
+            border-radius: ${borderRadius};
+            ${$shadow && `box-shadow: ${boxShadow};`}
+            > :not(:last-child) {
+              border-bottom: 1px solid ${borderColor};
+            }
+          `;
+      }
+      return lt`
+          > :not(:last-child) {
+            margin-bottom: 1rem;
+          }
+          > * {
+            background: ${theme.card.background};
+            border-radius: ${borderRadius};
+            ${$shadow && `box-shadow: ${boxShadow};`}
+          }
+        `;
+    }}
+    `;
+  }
+);
+// src/components/layout/card/Card.tsx
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var Card = (0, import_react15.forwardRef)(
+  ({ children, className }, ref) => {
+    const { settings } = useEmbed();
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      StyledCard,
+      {
+        ref,
+        className,
+        $sectionLayout: settings.theme?.sectionLayout,
+        $borderRadius: settings.theme?.card?.borderRadius,
+        $padding: settings.theme?.card?.padding,
+        $shadow: settings.theme?.card?.hasShadow,
+        children
+      }
+    );
+  }
+);
+// src/components/layout/column/styles.ts
+var StyledColumn = dt.div`
+  flex-grow: 1;
+  padding: 0.75rem;
+`;
+// src/components/layout/column/Column.tsx
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var Column = (0, import_react16.forwardRef)(
+  ({ children, ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(StyledColumn, { ref, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Card, { children }) });
+  }
+);
+// src/components/embed/renderer.ts
 var components = {
+  Root,
+  Viewport,
+  Column,
   Card,
   PlanManager,
   IncludedFeatures,
   UpcomingBill,
-  PaymentMethod,
-  MeteredFeatures
+  PaymentMethod
 };
 function createRenderer(options) {
-  const { useFallback = true } = options || {};
+  const { useFallback = false } = options || {};
   return function renderNode(node2, index) {
     const { type, props = {}, custom = {}, children } = node2;
     const name = typeof type !== "string" ? type.resolvedName : type;
@@ -9220,12 +10336,12 @@ function createRenderer(options) {
     const { className, ...rest } = props;
     const resolvedProps = component === "div" ? rest : props;
     const resolvedChildren = children.map(renderNode);
-    return (0, import_react13.createElement)(
+    return (0, import_react17.createElement)(
       component,
       {
         className,
         ...component !== "div" && { resolvedProps },
-        ...Object.keys(custom).length > 0 && { custom },
+        ...component !== "div" && Object.keys(custom).length > 0 && { custom },
         key: index
       },
       resolvedChildren
@@ -9234,30 +10350,30 @@ function createRenderer(options) {
 }
 // src/components/embed/ComponentTree.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var ComponentTree = () => {
-  const [children, setChildren] = (0, import_react14.useState)("Loading");
+  const [children, setChildren] = (0, import_react18.useState)("Loading");
   const { error, nodes } = useEmbed();
-  (0, import_react14.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     const renderer = createRenderer();
     setChildren(nodes.map(renderer));
   }, [nodes]);
   if (error) {
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { children: error.message });
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { children: error.message });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_jsx_runtime14.Fragment, { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_jsx_runtime18.Fragment, { children });
 };
 // src/components/embed/Embed.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 var SchematicEmbed = ({ id, accessToken, apiConfig }) => {
   if (accessToken?.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { children: "Please provide an access token." });
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { children: "Please provide an access token." });
   }
   if (!accessToken?.startsWith("token_")) {
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { children: 'Invalid access token; your temporary access token will start with "token_".' });
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { children: 'Invalid access token; your temporary access token will start with "token_".' });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(EmbedProvider, { id, accessToken, apiConfig, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ComponentTree, {}) });
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(EmbedProvider, { id, accessToken, apiConfig, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ComponentTree, {}) });
 };
 /*! Bundled license information: