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

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

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

Files changed (4) hide show

package/dist/schematic-react.cjs.js +3115 -621
package/dist/schematic-react.d.ts +1433 -435
package/dist/schematic-react.esm.js +3123 -630
package/package.json +13 -7

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,
@@ -140,14 +141,22 @@ __export(src_exports, {
   IconRound: () => IconRound,
   IncludedFeatures: () => IncludedFeatures,
   Invoices: () => Invoices,
-  NextBillDue: () => NextBillDue,
+  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,
   useSchematic: () => useSchematic,
   useSchematicContext: () => useSchematicContext,
@@ -4969,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);
@@ -5649,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 {
@@ -5906,6 +6052,130 @@ var JSONApiResponse = class {
   }
 };
+// src/api/models/BillingPlan.ts
+function BillingPlanFromJSON(json) {
+  return BillingPlanFromJSONTyped(json, false);
+}
+function BillingPlanFromJSONTyped(json, ignoreDiscriminator) {
+  if (json == null) {
+    return json;
+  }
+  return {
+    description: json["description"] == null ? void 0 : json["description"],
+    id: json["id"],
+    imageUrl: json["image_url"] == null ? void 0 : json["image_url"],
+    name: json["name"],
+    planPeriod: json["plan_period"] == null ? void 0 : json["plan_period"],
+    planPrice: json["plan_price"] == null ? void 0 : json["plan_price"]
+  };
+}
+// src/api/models/BillingPriceResponseData.ts
+function BillingPriceResponseDataFromJSON(json) {
+  return BillingPriceResponseDataFromJSONTyped(json, false);
+}
+function BillingPriceResponseDataFromJSONTyped(json, ignoreDiscriminator) {
+  if (json == null) {
+    return json;
+  }
+  return {
+    externalPriceId: json["external_price_id"],
+    id: json["id"],
+    interval: json["interval"],
+    price: json["price"]
+  };
+}
+// src/api/models/BillingProductDetailResponseData.ts
+function BillingProductDetailResponseDataFromJSON(json) {
+  return BillingProductDetailResponseDataFromJSONTyped(json, false);
+}
+function BillingProductDetailResponseDataFromJSONTyped(json, ignoreDiscriminator) {
+  if (json == null) {
+    return json;
+  }
+  return {
+    prices: json["Prices"].map(
+      BillingPriceResponseDataFromJSON
+    ),
+    accountId: json["account_id"],
+    createdAt: new Date(json["created_at"]),
+    currency: json["currency"],
+    environmentId: json["environment_id"],
+    externalId: json["external_id"],
+    name: json["name"],
+    price: json["price"],
+    productId: json["product_id"],
+    quantity: json["quantity"],
+    updatedAt: new Date(json["updated_at"])
+  };
+}
+// 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);
+}
+function BillingSubscriptionResponseDataFromJSONTyped(json, ignoreDiscriminator) {
+  if (json == null) {
+    return json;
+  }
+  return {
+    expiredAt: json["expired_at"] == null ? void 0 : new Date(json["expired_at"]),
+    externalId: json["external_id"],
+    id: json["id"],
+    updatedAt: new Date(json["updated_at"])
+  };
+}
+// src/api/models/ChangeSubscriptionRequestBody.ts
+function ChangeSubscriptionRequestBodyToJSON(value) {
+  if (value == null) {
+    return value;
+  }
+  return {
+    new_plan_id: value["newPlanId"],
+    new_price_id: value["newPriceId"]
+  };
+}
+// src/api/models/CheckoutResponse.ts
+function CheckoutResponseFromJSON(json) {
+  return CheckoutResponseFromJSONTyped(json, false);
+}
+function CheckoutResponseFromJSONTyped(json, ignoreDiscriminator) {
+  if (json == null) {
+    return json;
+  }
+  return {
+    data: BillingSubscriptionResponseDataFromJSON(json["data"]),
+    params: json["params"]
+  };
+}
 // src/api/models/PreviewObject.ts
 function PreviewObjectFromJSON(json) {
   return PreviewObjectFromJSONTyped(json, false);
@@ -6008,7 +6278,7 @@ function CompanyDetailResponseDataFromJSONTyped(json, ignoreDiscriminator) {
     return json;
   }
   return {
-    addOns: json["add_ons"].map(PreviewObjectFromJSON),
+    addOns: json["add_ons"].map(BillingPlanFromJSON),
     createdAt: new Date(json["created_at"]),
     entityTraits: json["entity_traits"].map(
       EntityTraitDetailResponseDataFromJSON
@@ -6019,7 +6289,7 @@ function CompanyDetailResponseDataFromJSONTyped(json, ignoreDiscriminator) {
     lastSeenAt: json["last_seen_at"] == null ? void 0 : new Date(json["last_seen_at"]),
     logoUrl: json["logo_url"] == null ? void 0 : json["logo_url"],
     name: json["name"],
-    plan: json["plan"] == null ? void 0 : PreviewObjectFromJSON(json["plan"]),
+    plan: json["plan"] == null ? void 0 : BillingPlanFromJSON(json["plan"]),
     plans: json["plans"].map(PreviewObjectFromJSON),
     traits: json["traits"] == null ? void 0 : json["traits"],
     updatedAt: new Date(json["updated_at"]),
@@ -6027,25 +6297,6 @@ function CompanyDetailResponseDataFromJSONTyped(json, ignoreDiscriminator) {
   };
 }
-// src/api/models/ComponentResponseData.ts
-function ComponentResponseDataFromJSON(json) {
-  return ComponentResponseDataFromJSONTyped(json, false);
-}
-function ComponentResponseDataFromJSONTyped(json, ignoreDiscriminator) {
-  if (json == null) {
-    return json;
-  }
-  return {
-    ast: json["ast"],
-    createdAt: new Date(json["created_at"]),
-    id: json["id"],
-    name: json["name"],
-    state: json["state"],
-    type: json["type"],
-    updatedAt: new Date(json["updated_at"])
-  };
-}
 // src/api/models/EventSummaryResponseData.ts
 function EventSummaryResponseDataFromJSON(json) {
   return EventSummaryResponseDataFromJSONTyped(json, false);
@@ -6247,13 +6498,166 @@ function PlanResponseDataFromJSONTyped(json, ignoreDiscriminator) {
     return json;
   }
   return {
-    audienceType: json["audience_type"],
+    audienceType: json["audience_type"] == null ? void 0 : json["audience_type"],
+    createdAt: new Date(json["created_at"]),
+    description: json["description"],
+    icon: json["icon"],
+    id: json["id"],
+    name: json["name"],
+    planType: json["plan_type"],
+    updatedAt: new Date(json["updated_at"])
+  };
+}
+// src/api/models/PlanEntitlementResponseData.ts
+function PlanEntitlementResponseDataFromJSON(json) {
+  return PlanEntitlementResponseDataFromJSONTyped(json, false);
+}
+function PlanEntitlementResponseDataFromJSONTyped(json, ignoreDiscriminator) {
+  if (json == null) {
+    return json;
+  }
+  return {
+    createdAt: new Date(json["created_at"]),
+    environmentId: json["environment_id"],
+    feature: json["feature"] == null ? void 0 : FeatureResponseDataFromJSON(json["feature"]),
+    featureId: json["feature_id"],
+    id: json["id"],
+    metricPeriod: json["metric_period"] == null ? void 0 : json["metric_period"],
+    plan: json["plan"] == null ? void 0 : PlanResponseDataFromJSON(json["plan"]),
+    planId: json["plan_id"],
+    ruleId: json["rule_id"],
+    updatedAt: new Date(json["updated_at"]),
+    valueBool: json["value_bool"] == null ? void 0 : json["value_bool"],
+    valueNumeric: json["value_numeric"] == null ? void 0 : json["value_numeric"],
+    valueTrait: json["value_trait"] == null ? void 0 : EntityTraitDefinitionResponseDataFromJSON(json["value_trait"]),
+    valueTraitId: json["value_trait_id"] == null ? void 0 : json["value_trait_id"],
+    valueType: json["value_type"]
+  };
+}
+// src/api/models/CompanyPlanDetailResponseData.ts
+function CompanyPlanDetailResponseDataFromJSON(json) {
+  return CompanyPlanDetailResponseDataFromJSONTyped(json, false);
+}
+function CompanyPlanDetailResponseDataFromJSONTyped(json, ignoreDiscriminator) {
+  if (json == null) {
+    return json;
+  }
+  return {
+    audienceType: json["audience_type"] == null ? void 0 : json["audience_type"],
+    billingProduct: json["billing_product"] == null ? void 0 : BillingProductDetailResponseDataFromJSON(json["billing_product"]),
+    companyCount: json["company_count"],
     createdAt: new Date(json["created_at"]),
+    current: json["current"],
     description: json["description"],
+    entitlements: json["entitlements"].map(
+      PlanEntitlementResponseDataFromJSON
+    ),
+    features: json["features"].map(
+      FeatureDetailResponseDataFromJSON
+    ),
     icon: json["icon"],
     id: json["id"],
+    monthlyPrice: json["monthly_price"] == null ? void 0 : BillingPriceResponseDataFromJSON(json["monthly_price"]),
     name: json["name"],
     planType: json["plan_type"],
+    updatedAt: new Date(json["updated_at"]),
+    valid: json["valid"],
+    yearlyPrice: json["yearly_price"] == null ? void 0 : BillingPriceResponseDataFromJSON(json["yearly_price"])
+  };
+}
+// 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);
+}
+function ComponentResponseDataFromJSONTyped(json, ignoreDiscriminator) {
+  if (json == null) {
+    return json;
+  }
+  return {
+    ast: json["ast"] == null ? void 0 : json["ast"],
+    createdAt: new Date(json["created_at"]),
+    id: json["id"],
+    name: json["name"],
+    state: json["state"],
+    type: json["type"],
     updatedAt: new Date(json["updated_at"])
   };
 }
@@ -6294,6 +6698,20 @@ function FeatureUsageDetailResponseDataFromJSONTyped(json, ignoreDiscriminator)
   };
 }
+// src/api/models/StripeEmbedInfo.ts
+function StripeEmbedInfoFromJSON(json) {
+  return StripeEmbedInfoFromJSONTyped(json, false);
+}
+function StripeEmbedInfoFromJSONTyped(json, ignoreDiscriminator) {
+  if (json == null) {
+    return json;
+  }
+  return {
+    customerEkey: json["customer_ekey"] == null ? void 0 : json["customer_ekey"],
+    publishableKey: json["publishable_key"]
+  };
+}
 // src/api/models/ComponentHydrateResponseData.ts
 function ComponentHydrateResponseDataFromJSON(json) {
   return ComponentHydrateResponseDataFromJSONTyped(json, false);
@@ -6303,9 +6721,14 @@ function ComponentHydrateResponseDataFromJSONTyped(json, ignoreDiscriminator) {
     return json;
   }
   return {
+    activePlans: json["active_plans"].map(
+      CompanyPlanDetailResponseDataFromJSON
+    ),
     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"])
+    featureUsage: json["feature_usage"] == null ? void 0 : FeatureUsageDetailResponseDataFromJSON(json["feature_usage"]),
+    stripeEmbed: json["stripe_embed"] == null ? void 0 : StripeEmbedInfoFromJSON(json["stripe_embed"]),
+    subscription: json["subscription"] == null ? void 0 : CompanySubscriptionResponseDataFromJSON(json["subscription"])
   };
 }
@@ -6323,8 +6746,50 @@ function HydrateComponentResponseFromJSONTyped(json, ignoreDiscriminator) {
   };
 }
-// src/api/apis/ComponentsApi.ts
-var ComponentsApi = class extends BaseAPI {
+// src/api/apis/CheckoutApi.ts
+var CheckoutApi = class extends BaseAPI {
+  /**
+   * Checkout
+   */
+  async checkoutRaw(requestParameters, initOverrides) {
+    if (requestParameters["changeSubscriptionRequestBody"] == null) {
+      throw new RequiredError(
+        "changeSubscriptionRequestBody",
+        'Required parameter "changeSubscriptionRequestBody" was null or undefined when calling checkout().'
+      );
+    }
+    const queryParameters = {};
+    const headerParameters = {};
+    headerParameters["Content-Type"] = "application/json";
+    if (this.configuration && this.configuration.apiKey) {
+      headerParameters["X-Schematic-Api-Key"] = await this.configuration.apiKey(
+        "X-Schematic-Api-Key"
+      );
+    }
+    const response = await this.request(
+      {
+        path: `/checkout`,
+        method: "POST",
+        headers: headerParameters,
+        query: queryParameters,
+        body: ChangeSubscriptionRequestBodyToJSON(
+          requestParameters["changeSubscriptionRequestBody"]
+        )
+      },
+      initOverrides
+    );
+    return new JSONApiResponse(
+      response,
+      (jsonValue) => CheckoutResponseFromJSON(jsonValue)
+    );
+  }
+  /**
+   * Checkout
+   */
+  async checkout(requestParameters, initOverrides) {
+    const response = await this.checkoutRaw(requestParameters, initOverrides);
+    return await response.value();
+  }
   /**
    * Hydrate component
    */
@@ -6371,30 +6836,73 @@ var ComponentsApi = class extends BaseAPI {
   }
 };
-// src/components/theme.ts
-var light = {
-  text: "#000000",
-  textDetail: "#767676",
-  background: "#FFFFFF",
-  button: "#000000"
-};
-var dark = {
-  text: "#FFFFFF",
-  textDetail: "#A5A5A5",
-  background: "#000000",
-  button: "#194BFB"
-};
 // src/context/embed.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
-var defaultSettings = {
-  theme: "light",
+var defaultTheme = {
+  numberOfColumns: 2,
   sectionLayout: "merged",
-  borderWidth: 0,
-  borderColor: "#E9E9E9",
-  borderRadius: 10,
-  boxShadow: "none",
-  boxPadding: 50
+  colorMode: "light",
+  primary: "#000000",
+  secondary: "#000000",
+  card: {
+    background: "#FFFFFF",
+    borderRadius: 10,
+    hasShadow: true,
+    padding: 45
+  },
+  typography: {
+    heading1: {
+      fontFamily: "Manrope",
+      fontSize: 37,
+      fontWeight: 800,
+      color: "#000000"
+    },
+    heading2: {
+      fontFamily: "Manrope",
+      fontSize: 29,
+      fontWeight: 800,
+      color: "#000000"
+    },
+    heading3: {
+      fontFamily: "Manrope",
+      fontSize: 20,
+      fontWeight: 600,
+      color: "#000000"
+    },
+    heading4: {
+      fontFamily: "Manrope",
+      fontSize: 18,
+      fontWeight: 800,
+      color: "#000000"
+    },
+    heading5: {
+      fontFamily: "Public Sans",
+      fontSize: 17,
+      fontWeight: 500,
+      color: "#000000"
+    },
+    heading6: {
+      fontFamily: "Public Sans",
+      fontSize: 14,
+      fontWeight: 400,
+      color: "#8A8A8A"
+    },
+    text: {
+      fontFamily: "Public Sans",
+      fontSize: 16,
+      fontWeight: 400,
+      color: "#000000"
+    },
+    link: {
+      fontFamily: "Inter",
+      fontSize: 16,
+      fontWeight: 400,
+      color: "#194BFB"
+    }
+  }
+};
+var defaultSettings = {
+  theme: defaultTheme
 };
 function isEditorState(obj) {
   return Object.entries(obj).every(([key, value]) => {
@@ -6421,11 +6929,11 @@ function parseEditorState(data) {
   });
   return arr;
 }
-async function fetchComponent(id, accessToken) {
+async function fetchComponent(id, accessToken, options) {
   const settings = { ...defaultSettings };
   const nodes = [];
-  const config = new Configuration({ apiKey: accessToken });
-  const api = new ComponentsApi(config);
+  const config = new Configuration({ ...options, apiKey: accessToken });
+  const api = new CheckoutApi(config);
   const response = await api.hydrateComponent({ componentId: id });
   const { data } = response;
   if (data.component?.ast) {
@@ -6439,74 +6947,166 @@ async function fetchComponent(id, accessToken) {
       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: {},
+  settings: { ...defaultSettings },
+  stripe: null,
+  layout: "portal",
+  error: void 0,
   setData: () => {
   },
-  setSettings: () => {
-  },
   updateSettings: () => {
+  },
+  setStripe: () => {
+  },
+  setLayout: () => {
   }
 });
 var EmbedProvider = ({
   id,
   accessToken,
+  apiConfig,
   children
 }) => {
-  const [state, setState] = (0, import_react2.useState)({
-    data: {},
-    nodes: [],
-    settings: { ...defaultSettings },
-    setData: () => {
-    },
-    setSettings: () => {
-    },
-    updateSettings: () => {
-    }
+  const styleRef = (0, import_react2.useRef)(null);
+  const [state, setState] = (0, import_react2.useState)(() => {
+    return {
+      data: {},
+      nodes: [],
+      settings: { ...defaultSettings },
+      stripe: null,
+      layout: "portal",
+      error: void 0,
+      setData: () => {
+      },
+      updateSettings: () => {
+      },
+      setStripe: () => {
+      },
+      setLayout: () => {
+      }
+    };
   });
+  (0, import_react2.useEffect)(() => {
+    const element = document.getElementById("schematic-fonts");
+    if (element) {
+      return void (styleRef.current = element);
+    }
+    const style = document.createElement("link");
+    style.id = "schematic-fonts";
+    style.rel = "stylesheet";
+    document.head.appendChild(style);
+    styleRef.current = style;
+  }, []);
   (0, import_react2.useEffect)(() => {
     if (!id || !accessToken) {
       return;
     }
-    fetchComponent(id, accessToken).then((resolvedData) => {
+    fetchComponent(id, accessToken, apiConfig).then(async (resolvedData) => {
       setState((prev2) => ({ ...prev2, ...resolvedData }));
     }).catch((error) => setState((prev2) => ({ ...prev2, error })));
-  }, [id, accessToken]);
+  }, [id, accessToken, apiConfig]);
+  (0, import_react2.useEffect)(() => {
+    const fontSet = /* @__PURE__ */ new Set([]);
+    Object.values(state.settings.theme.typography).forEach(({ fontFamily }) => {
+      fontSet.add(fontFamily);
+    });
+    if (fontSet.size > 0) {
+      const src = `https://fonts.googleapis.com/css2?${[...fontSet].map((fontFamily) => `family=${fontFamily}&display=swap`).join("&")}`;
+      if (styleRef.current) {
+        styleRef.current.href = src;
+      }
+    }
+  }, [state.settings.theme.typography]);
   const setData = (0, import_react2.useCallback)(
     (data) => {
       setState((prev2) => ({
         ...prev2,
-        data
+        data: Object.assign({}, data)
       }));
     },
     [setState]
   );
-  const setSettings = (0, import_react2.useCallback)(
+  const updateSettings = (0, import_react2.useCallback)(
     (settings) => {
       setState((prev2) => ({
         ...prev2,
-        settings
+        settings: Object.assign({}, prev2.settings, settings)
       }));
     },
     [setState]
   );
-  const updateSettings = (0, import_react2.useCallback)(
-    (settings) => {
+  const setStripe = (0, import_react2.useCallback)(
+    (stripe) => {
+      setState((prev2) => ({
+        ...prev2,
+        stripe
+      }));
+    },
+    [setState]
+  );
+  const setLayout = (0, import_react2.useCallback)(
+    (layout) => {
       setState((prev2) => ({
         ...prev2,
-        settings: { ...prev2.settings, ...settings }
+        layout
       }));
     },
     [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,
     {
@@ -6514,17 +7114,545 @@ var EmbedProvider = ({
         data: state.data,
         nodes: state.nodes,
         settings: state.settings,
+        stripe: state.stripe,
+        layout: state.layout,
         error: state.error,
         setData,
-        setSettings,
-        updateSettings
+        updateSettings,
+        setStripe,
+        setLayout
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ot, { theme: state.settings.theme === "dark" ? dark : light, children })
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ot, { theme: state.settings.theme, children: renderChildren() })
     }
   );
 };
 // node_modules/@schematichq/schematic-js/dist/schematic.esm.js
+var __create2 = Object.create;
+var __defProp2 = Object.defineProperty;
+var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames2 = Object.getOwnPropertyNames;
+var __getProtoOf2 = Object.getPrototypeOf;
+var __hasOwnProp2 = Object.prototype.hasOwnProperty;
+var __commonJS2 = (cb, mod) => function __require() {
+  return mod || (0, cb[__getOwnPropNames2(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+};
+var __copyProps2 = (to, from2, except, desc) => {
+  if (from2 && typeof from2 === "object" || typeof from2 === "function") {
+    for (let key of __getOwnPropNames2(from2))
+      if (!__hasOwnProp2.call(to, key) && key !== except)
+        __defProp2(to, key, { get: () => from2[key], enumerable: !(desc = __getOwnPropDesc2(from2, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM2 = (mod, isNodeMode, target) => (target = mod != null ? __create2(__getProtoOf2(mod)) : {}, __copyProps2(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp2(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var require_browser_polyfill = __commonJS2({
+  "node_modules/cross-fetch/dist/browser-polyfill.js"(exports) {
+    (function(self2) {
+      var irrelevant = function(exports2) {
+        var global = typeof globalThis !== "undefined" && globalThis || typeof self2 !== "undefined" && self2 || typeof global !== "undefined" && global;
+        var support = {
+          searchParams: "URLSearchParams" in global,
+          iterable: "Symbol" in global && "iterator" in Symbol,
+          blob: "FileReader" in global && "Blob" in global && function() {
+            try {
+              new Blob();
+              return true;
+            } catch (e) {
+              return false;
+            }
+          }(),
+          formData: "FormData" in global,
+          arrayBuffer: "ArrayBuffer" in global
+        };
+        function isDataView(obj) {
+          return obj && DataView.prototype.isPrototypeOf(obj);
+        }
+        if (support.arrayBuffer) {
+          var viewClasses = [
+            "[object Int8Array]",
+            "[object Uint8Array]",
+            "[object Uint8ClampedArray]",
+            "[object Int16Array]",
+            "[object Uint16Array]",
+            "[object Int32Array]",
+            "[object Uint32Array]",
+            "[object Float32Array]",
+            "[object Float64Array]"
+          ];
+          var isArrayBufferView = ArrayBuffer.isView || function(obj) {
+            return obj && viewClasses.indexOf(Object.prototype.toString.call(obj)) > -1;
+          };
+        }
+        function normalizeName(name) {
+          if (typeof name !== "string") {
+            name = String(name);
+          }
+          if (/[^a-z0-9\-#$%&'*+.^_`|~!]/i.test(name) || name === "") {
+            throw new TypeError('Invalid character in header field name: "' + name + '"');
+          }
+          return name.toLowerCase();
+        }
+        function normalizeValue(value) {
+          if (typeof value !== "string") {
+            value = String(value);
+          }
+          return value;
+        }
+        function iteratorFor(items) {
+          var iterator = {
+            next: function() {
+              var value = items.shift();
+              return { done: value === void 0, value };
+            }
+          };
+          if (support.iterable) {
+            iterator[Symbol.iterator] = function() {
+              return iterator;
+            };
+          }
+          return iterator;
+        }
+        function Headers(headers) {
+          this.map = {};
+          if (headers instanceof Headers) {
+            headers.forEach(function(value, name) {
+              this.append(name, value);
+            }, this);
+          } else if (Array.isArray(headers)) {
+            headers.forEach(function(header) {
+              this.append(header[0], header[1]);
+            }, this);
+          } else if (headers) {
+            Object.getOwnPropertyNames(headers).forEach(function(name) {
+              this.append(name, headers[name]);
+            }, this);
+          }
+        }
+        Headers.prototype.append = function(name, value) {
+          name = normalizeName(name);
+          value = normalizeValue(value);
+          var oldValue = this.map[name];
+          this.map[name] = oldValue ? oldValue + ", " + value : value;
+        };
+        Headers.prototype["delete"] = function(name) {
+          delete this.map[normalizeName(name)];
+        };
+        Headers.prototype.get = function(name) {
+          name = normalizeName(name);
+          return this.has(name) ? this.map[name] : null;
+        };
+        Headers.prototype.has = function(name) {
+          return this.map.hasOwnProperty(normalizeName(name));
+        };
+        Headers.prototype.set = function(name, value) {
+          this.map[normalizeName(name)] = normalizeValue(value);
+        };
+        Headers.prototype.forEach = function(callback, thisArg) {
+          for (var name in this.map) {
+            if (this.map.hasOwnProperty(name)) {
+              callback.call(thisArg, this.map[name], name, this);
+            }
+          }
+        };
+        Headers.prototype.keys = function() {
+          var items = [];
+          this.forEach(function(value, name) {
+            items.push(name);
+          });
+          return iteratorFor(items);
+        };
+        Headers.prototype.values = function() {
+          var items = [];
+          this.forEach(function(value) {
+            items.push(value);
+          });
+          return iteratorFor(items);
+        };
+        Headers.prototype.entries = function() {
+          var items = [];
+          this.forEach(function(value, name) {
+            items.push([name, value]);
+          });
+          return iteratorFor(items);
+        };
+        if (support.iterable) {
+          Headers.prototype[Symbol.iterator] = Headers.prototype.entries;
+        }
+        function consumed(body) {
+          if (body.bodyUsed) {
+            return Promise.reject(new TypeError("Already read"));
+          }
+          body.bodyUsed = true;
+        }
+        function fileReaderReady(reader) {
+          return new Promise(function(resolve, reject) {
+            reader.onload = function() {
+              resolve(reader.result);
+            };
+            reader.onerror = function() {
+              reject(reader.error);
+            };
+          });
+        }
+        function readBlobAsArrayBuffer(blob) {
+          var reader = new FileReader();
+          var promise = fileReaderReady(reader);
+          reader.readAsArrayBuffer(blob);
+          return promise;
+        }
+        function readBlobAsText(blob) {
+          var reader = new FileReader();
+          var promise = fileReaderReady(reader);
+          reader.readAsText(blob);
+          return promise;
+        }
+        function readArrayBufferAsText(buf) {
+          var view = new Uint8Array(buf);
+          var chars = new Array(view.length);
+          for (var i2 = 0; i2 < view.length; i2++) {
+            chars[i2] = String.fromCharCode(view[i2]);
+          }
+          return chars.join("");
+        }
+        function bufferClone(buf) {
+          if (buf.slice) {
+            return buf.slice(0);
+          } else {
+            var view = new Uint8Array(buf.byteLength);
+            view.set(new Uint8Array(buf));
+            return view.buffer;
+          }
+        }
+        function Body() {
+          this.bodyUsed = false;
+          this._initBody = function(body) {
+            this.bodyUsed = this.bodyUsed;
+            this._bodyInit = body;
+            if (!body) {
+              this._bodyText = "";
+            } else if (typeof body === "string") {
+              this._bodyText = body;
+            } else if (support.blob && Blob.prototype.isPrototypeOf(body)) {
+              this._bodyBlob = body;
+            } else if (support.formData && FormData.prototype.isPrototypeOf(body)) {
+              this._bodyFormData = body;
+            } else if (support.searchParams && URLSearchParams.prototype.isPrototypeOf(body)) {
+              this._bodyText = body.toString();
+            } else if (support.arrayBuffer && support.blob && isDataView(body)) {
+              this._bodyArrayBuffer = bufferClone(body.buffer);
+              this._bodyInit = new Blob([this._bodyArrayBuffer]);
+            } else if (support.arrayBuffer && (ArrayBuffer.prototype.isPrototypeOf(body) || isArrayBufferView(body))) {
+              this._bodyArrayBuffer = bufferClone(body);
+            } else {
+              this._bodyText = body = Object.prototype.toString.call(body);
+            }
+            if (!this.headers.get("content-type")) {
+              if (typeof body === "string") {
+                this.headers.set("content-type", "text/plain;charset=UTF-8");
+              } else if (this._bodyBlob && this._bodyBlob.type) {
+                this.headers.set("content-type", this._bodyBlob.type);
+              } else if (support.searchParams && URLSearchParams.prototype.isPrototypeOf(body)) {
+                this.headers.set("content-type", "application/x-www-form-urlencoded;charset=UTF-8");
+              }
+            }
+          };
+          if (support.blob) {
+            this.blob = function() {
+              var rejected = consumed(this);
+              if (rejected) {
+                return rejected;
+              }
+              if (this._bodyBlob) {
+                return Promise.resolve(this._bodyBlob);
+              } else if (this._bodyArrayBuffer) {
+                return Promise.resolve(new Blob([this._bodyArrayBuffer]));
+              } else if (this._bodyFormData) {
+                throw new Error("could not read FormData body as blob");
+              } else {
+                return Promise.resolve(new Blob([this._bodyText]));
+              }
+            };
+            this.arrayBuffer = function() {
+              if (this._bodyArrayBuffer) {
+                var isConsumed = consumed(this);
+                if (isConsumed) {
+                  return isConsumed;
+                }
+                if (ArrayBuffer.isView(this._bodyArrayBuffer)) {
+                  return Promise.resolve(
+                    this._bodyArrayBuffer.buffer.slice(
+                      this._bodyArrayBuffer.byteOffset,
+                      this._bodyArrayBuffer.byteOffset + this._bodyArrayBuffer.byteLength
+                    )
+                  );
+                } else {
+                  return Promise.resolve(this._bodyArrayBuffer);
+                }
+              } else {
+                return this.blob().then(readBlobAsArrayBuffer);
+              }
+            };
+          }
+          this.text = function() {
+            var rejected = consumed(this);
+            if (rejected) {
+              return rejected;
+            }
+            if (this._bodyBlob) {
+              return readBlobAsText(this._bodyBlob);
+            } else if (this._bodyArrayBuffer) {
+              return Promise.resolve(readArrayBufferAsText(this._bodyArrayBuffer));
+            } else if (this._bodyFormData) {
+              throw new Error("could not read FormData body as text");
+            } else {
+              return Promise.resolve(this._bodyText);
+            }
+          };
+          if (support.formData) {
+            this.formData = function() {
+              return this.text().then(decode);
+            };
+          }
+          this.json = function() {
+            return this.text().then(JSON.parse);
+          };
+          return this;
+        }
+        var methods = ["DELETE", "GET", "HEAD", "OPTIONS", "POST", "PUT"];
+        function normalizeMethod(method) {
+          var upcased = method.toUpperCase();
+          return methods.indexOf(upcased) > -1 ? upcased : method;
+        }
+        function Request(input, options) {
+          if (!(this instanceof Request)) {
+            throw new TypeError('Please use the "new" operator, this DOM object constructor cannot be called as a function.');
+          }
+          options = options || {};
+          var body = options.body;
+          if (input instanceof Request) {
+            if (input.bodyUsed) {
+              throw new TypeError("Already read");
+            }
+            this.url = input.url;
+            this.credentials = input.credentials;
+            if (!options.headers) {
+              this.headers = new Headers(input.headers);
+            }
+            this.method = input.method;
+            this.mode = input.mode;
+            this.signal = input.signal;
+            if (!body && input._bodyInit != null) {
+              body = input._bodyInit;
+              input.bodyUsed = true;
+            }
+          } else {
+            this.url = String(input);
+          }
+          this.credentials = options.credentials || this.credentials || "same-origin";
+          if (options.headers || !this.headers) {
+            this.headers = new Headers(options.headers);
+          }
+          this.method = normalizeMethod(options.method || this.method || "GET");
+          this.mode = options.mode || this.mode || null;
+          this.signal = options.signal || this.signal;
+          this.referrer = null;
+          if ((this.method === "GET" || this.method === "HEAD") && body) {
+            throw new TypeError("Body not allowed for GET or HEAD requests");
+          }
+          this._initBody(body);
+          if (this.method === "GET" || this.method === "HEAD") {
+            if (options.cache === "no-store" || options.cache === "no-cache") {
+              var reParamSearch = /([?&])_=[^&]*/;
+              if (reParamSearch.test(this.url)) {
+                this.url = this.url.replace(reParamSearch, "$1_=" + (/* @__PURE__ */ new Date()).getTime());
+              } else {
+                var reQueryString = /\?/;
+                this.url += (reQueryString.test(this.url) ? "&" : "?") + "_=" + (/* @__PURE__ */ new Date()).getTime();
+              }
+            }
+          }
+        }
+        Request.prototype.clone = function() {
+          return new Request(this, { body: this._bodyInit });
+        };
+        function decode(body) {
+          var form = new FormData();
+          body.trim().split("&").forEach(function(bytes) {
+            if (bytes) {
+              var split = bytes.split("=");
+              var name = split.shift().replace(/\+/g, " ");
+              var value = split.join("=").replace(/\+/g, " ");
+              form.append(decodeURIComponent(name), decodeURIComponent(value));
+            }
+          });
+          return form;
+        }
+        function parseHeaders(rawHeaders) {
+          var headers = new Headers();
+          var preProcessedHeaders = rawHeaders.replace(/\r?\n[\t ]+/g, " ");
+          preProcessedHeaders.split("\r").map(function(header) {
+            return header.indexOf("\n") === 0 ? header.substr(1, header.length) : header;
+          }).forEach(function(line2) {
+            var parts = line2.split(":");
+            var key = parts.shift().trim();
+            if (key) {
+              var value = parts.join(":").trim();
+              headers.append(key, value);
+            }
+          });
+          return headers;
+        }
+        Body.call(Request.prototype);
+        function Response(bodyInit, options) {
+          if (!(this instanceof Response)) {
+            throw new TypeError('Please use the "new" operator, this DOM object constructor cannot be called as a function.');
+          }
+          if (!options) {
+            options = {};
+          }
+          this.type = "default";
+          this.status = options.status === void 0 ? 200 : options.status;
+          this.ok = this.status >= 200 && this.status < 300;
+          this.statusText = options.statusText === void 0 ? "" : "" + options.statusText;
+          this.headers = new Headers(options.headers);
+          this.url = options.url || "";
+          this._initBody(bodyInit);
+        }
+        Body.call(Response.prototype);
+        Response.prototype.clone = function() {
+          return new Response(this._bodyInit, {
+            status: this.status,
+            statusText: this.statusText,
+            headers: new Headers(this.headers),
+            url: this.url
+          });
+        };
+        Response.error = function() {
+          var response = new Response(null, { status: 0, statusText: "" });
+          response.type = "error";
+          return response;
+        };
+        var redirectStatuses = [301, 302, 303, 307, 308];
+        Response.redirect = function(url, status) {
+          if (redirectStatuses.indexOf(status) === -1) {
+            throw new RangeError("Invalid status code");
+          }
+          return new Response(null, { status, headers: { location: url } });
+        };
+        exports2.DOMException = global.DOMException;
+        try {
+          new exports2.DOMException();
+        } catch (err2) {
+          exports2.DOMException = function(message, name) {
+            this.message = message;
+            this.name = name;
+            var error = Error(message);
+            this.stack = error.stack;
+          };
+          exports2.DOMException.prototype = Object.create(Error.prototype);
+          exports2.DOMException.prototype.constructor = exports2.DOMException;
+        }
+        function fetch2(input, init) {
+          return new Promise(function(resolve, reject) {
+            var request = new Request(input, init);
+            if (request.signal && request.signal.aborted) {
+              return reject(new exports2.DOMException("Aborted", "AbortError"));
+            }
+            var xhr = new XMLHttpRequest();
+            function abortXhr() {
+              xhr.abort();
+            }
+            xhr.onload = function() {
+              var options = {
+                status: xhr.status,
+                statusText: xhr.statusText,
+                headers: parseHeaders(xhr.getAllResponseHeaders() || "")
+              };
+              options.url = "responseURL" in xhr ? xhr.responseURL : options.headers.get("X-Request-URL");
+              var body = "response" in xhr ? xhr.response : xhr.responseText;
+              setTimeout(function() {
+                resolve(new Response(body, options));
+              }, 0);
+            };
+            xhr.onerror = function() {
+              setTimeout(function() {
+                reject(new TypeError("Network request failed"));
+              }, 0);
+            };
+            xhr.ontimeout = function() {
+              setTimeout(function() {
+                reject(new TypeError("Network request failed"));
+              }, 0);
+            };
+            xhr.onabort = function() {
+              setTimeout(function() {
+                reject(new exports2.DOMException("Aborted", "AbortError"));
+              }, 0);
+            };
+            function fixUrl(url) {
+              try {
+                return url === "" && global.location.href ? global.location.href : url;
+              } catch (e) {
+                return url;
+              }
+            }
+            xhr.open(request.method, fixUrl(request.url), true);
+            if (request.credentials === "include") {
+              xhr.withCredentials = true;
+            } else if (request.credentials === "omit") {
+              xhr.withCredentials = false;
+            }
+            if ("responseType" in xhr) {
+              if (support.blob) {
+                xhr.responseType = "blob";
+              } else if (support.arrayBuffer && request.headers.get("Content-Type") && request.headers.get("Content-Type").indexOf("application/octet-stream") !== -1) {
+                xhr.responseType = "arraybuffer";
+              }
+            }
+            if (init && typeof init.headers === "object" && !(init.headers instanceof Headers)) {
+              Object.getOwnPropertyNames(init.headers).forEach(function(name) {
+                xhr.setRequestHeader(name, normalizeValue(init.headers[name]));
+              });
+            } else {
+              request.headers.forEach(function(value, name) {
+                xhr.setRequestHeader(name, value);
+              });
+            }
+            if (request.signal) {
+              request.signal.addEventListener("abort", abortXhr);
+              xhr.onreadystatechange = function() {
+                if (xhr.readyState === 4) {
+                  request.signal.removeEventListener("abort", abortXhr);
+                }
+              };
+            }
+            xhr.send(typeof request._bodyInit === "undefined" ? null : request._bodyInit);
+          });
+        }
+        fetch2.polyfill = true;
+        if (!global.fetch) {
+          global.fetch = fetch2;
+          global.Headers = Headers;
+          global.Request = Request;
+          global.Response = Response;
+        }
+        exports2.Headers = Headers;
+        exports2.Request = Request;
+        exports2.Response = Response;
+        exports2.fetch = fetch2;
+        return exports2;
+      }({});
+    })(typeof self !== "undefined" ? self : exports);
+  }
+});
 var getRandomValues;
 var rnds8 = new Uint8Array(16);
 function rng() {
@@ -6565,6 +7693,7 @@ function v4(options, buf, offset) {
   return unsafeStringify(rnds);
 }
 var v4_default = v4;
+var import_polyfill = __toESM2(require_browser_polyfill());
 var anonymousIdKey = "schematicId";
 var Schematic = class {
   apiKey;
@@ -6931,14 +8060,9 @@ var useSchematicFlag = (key, opts) => {
   return value;
 };
-// src/components/embed/ComponentTree.tsx
-var import_react10 = require("react");
-// src/components/embed/renderer.ts
-var import_react9 = require("react");
-// src/components/elements/included-features/IncludedFeatures.tsx
+// 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) {
@@ -7025,15 +8149,24 @@ function hslToHex({ h, s: s2, l: l2 }) {
     bs = "0" + bs;
   return "#" + rs + gs + bs;
 }
-function adjustHexLightness(color, amount) {
+function adjustLightness(color, amount) {
   const { h, s: s2, l: l2 } = hexToHSL(color);
   return hslToHex({ h, s: s2, l: Math.max(Math.min(l2 + amount, 100), 0) });
 }
 function lighten(color, amount) {
-  return adjustHexLightness(color, amount);
+  return adjustLightness(color, amount);
 }
 function darken(color, amount) {
-  return adjustHexLightness(color, -amount);
+  return adjustLightness(color, -amount);
+}
+// src/utils/date.ts
+function toPrettyDate(date) {
+  return new Intl.DateTimeFormat("en-US", {
+    month: "long",
+    day: "numeric",
+    year: "numeric"
+  }).format(new Date(date));
 }
 // src/utils/string.ts
@@ -7079,10 +8212,13 @@ var Box = dt.div((props) => {
 var Text = dt.span`
   font-family: ${({ $font = "Inter" }) => `${$font}, sans-serif`};
   font-size: ${({ $size = 16 }) => typeof $size === "number" ? `${$size / TEXT_BASE_SIZE}rem` : $size};
-  font-weight: ${({ $weight = 400 }) => $weight};
-  line-height: 1.25;
+  ${({ $weight = 400 }) => lt`
+    font-weight: ${$weight};
+    font-variation-settings: "wght" ${$weight};
+  `};
+  line-height: ${({ $lineHeight = 1.25 }) => $lineHeight};
   ${({ $align }) => attr("text-align", $align)};
-  color: ${({ $color, theme }) => $color || theme.text};
+  color: ${({ $color, theme }) => $color || theme.typography.text.color};
   &:focus-visible {
     outline: 2px solid ${({ theme }) => theme.primary};
@@ -7107,46 +8243,46 @@ var Button = dt.button`
   switch ($size) {
     case "sm":
       return lt`
-          font-size: ${12 / 16}rem;
+          font-size: ${12 / TEXT_BASE_SIZE}rem;
           ${$variant !== "link" && lt`
-            padding: ${7 / 16}rem ${20 / 16}rem;
+            padding: ${7 / TEXT_BASE_SIZE}rem ${20 / TEXT_BASE_SIZE}rem;
           `}
-          border-radius: ${4 / 16}rem;
+          border-radius: ${4 / TEXT_BASE_SIZE}rem;
         `;
     case "md":
     default:
       return lt`
-          font-size: ${14 / 16}rem;
+          font-size: ${14 / TEXT_BASE_SIZE}rem;
           ${$variant !== "link" && lt`
-            padding: ${8 / 16}rem ${24 / 16}rem;
+            padding: ${8 / TEXT_BASE_SIZE}rem ${24 / TEXT_BASE_SIZE}rem;
           `}
-          border-radius: ${8 / 16}rem;
+          border-radius: ${8 / TEXT_BASE_SIZE}rem;
         `;
     case "lg":
       return lt`
-          font-size: ${16 / 16}rem;
+          font-size: ${16 / TEXT_BASE_SIZE}rem;
           ${$variant !== "link" && lt`
-            padding: ${9 / 16}rem ${28 / 16}rem;
+            padding: ${9 / TEXT_BASE_SIZE}rem ${28 / TEXT_BASE_SIZE}rem;
           `}
-          border-radius: ${12 / 16}rem;
+          border-radius: ${12 / TEXT_BASE_SIZE}rem;
         `;
   }
 }}
   ${({ $color, $variant }) => {
-  let color = "#ffffff";
+  let color = "#FFFFFF";
   let bgColor;
   switch ($color) {
     case "blue":
     default:
-      bgColor = "#194bfb";
+      bgColor = "#194BFB";
       break;
     case "red":
-      bgColor = "#ef4444";
+      bgColor = "#EF4444";
       break;
     case "white":
       color = "#000000";
-      bgColor = "#ffffff";
+      bgColor = "#FFFFFF";
       break;
     case "black":
       bgColor = "#000000";
@@ -7197,72 +8333,6 @@ var Button2 = ({
   );
 };
-// src/components/ui/card/Card.tsx
-var import_react6 = require("react");
-// src/components/ui/card/styles.ts
-var StyledCard = dt.div`
-  box-sizing: border-box;
-  font-size: ${TEXT_BASE_SIZE}px;
-  *,
-  *::before,
-  *::after {
-    box-sizing: inherit;
-  }
-  > * {
-    padding: ${40 / 16}rem ${50 / 16}rem;
-    color: ${({ theme }) => theme.color};
-    background: ${({ theme }) => theme.background};
-    box-shadow:
-      0px 1px 20px 0px #1018280f,
-      0px 1px 3px 0px #1018281a;
-  }
-  ${({ $sectionLayout = "merged", $borderRadius = 8 }) => $sectionLayout === "merged" ? lt`
-          > :first-child {
-            border-top-left-radius: ${$borderRadius / 16}rem;
-            border-top-right-radius: ${$borderRadius / 16}rem;
-          }
-          > :last-child {
-            border-bottom-left-radius: ${$borderRadius / 16}rem;
-            border-bottom-right-radius: ${$borderRadius / 16}rem;
-          }
-          > :not(:last-child) {
-            border-bottom: 1px solid #eaeaea;
-          }
-        ` : lt`
-          > :not(:last-child) {
-            margin-bottom: 2rem;
-          }
-          > * {
-            border-radius: ${$borderRadius / 16}rem;
-          }
-        `}
-`;
-// src/components/ui/card/Card.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var Card = (0, import_react6.forwardRef)(
-  ({ children, className }, ref) => {
-    const { settings } = useEmbed();
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-      StyledCard,
-      {
-        ref,
-        className,
-        $sectionLayout: settings.sectionLayout,
-        $borderRadius: settings.borderRadius,
-        children
-      }
-    );
-  }
-);
 // src/components/ui/flex/styles.ts
 var Flex = dt(Box)`
   display: flex;
@@ -7281,9 +8351,8 @@ var Container = dt.div`
   display: flex;
   justify-content: center;
   align-items: center;
-  border-width: 1px;
-  border-style: solid;
-  border-radius: 100%;
+  flex-shrink: 0;
+  border-radius: 9999px;
   ${({ $size }) => {
   const base = 24;
   let scale = 1;
@@ -7303,35 +8372,37 @@ var Container = dt.div`
       break;
   }
   return lt`
-      font-size: ${base * scale / 16}rem;
+      font-size: ${base * scale / TEXT_BASE_SIZE}rem;
       line-height: 1;
-      width: ${(base + 8) * scale / 16}rem;
-      height: ${(base + 8) * scale / 16}rem;
+      width: ${(base + 8) * scale / TEXT_BASE_SIZE}rem;
+      height: ${(base + 8) * scale / TEXT_BASE_SIZE}rem;
     `;
 }}
-  ${({ $style }) => $style === "outline" ? lt`
+  ${({ $variant, $colors }) => $variant === "outline" ? lt`
+          color: ${$colors[0]};
           background-color: transparent;
-          border-color: #d1d5db;
         ` : lt`
-          background-color: #e5e7eb;
-          border-color: #e5e7eb;
+          color: ${$colors[0]};
+          background-color: ${$colors[1]};
         `}
 `;
 // 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,
-  style = "filled",
-  size = "md"
+  variant = "filled",
+  size = "md",
+  colors = ["white", "#e5e7eb"],
+  ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Container, { $size: size, $style: style, 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
@@ -7340,13 +8411,13 @@ 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,
   total = 0,
   color = "gray",
-  barWidth,
+  barWidth = "100%",
   ...props
 }) => {
   const barColorMap = {
@@ -7356,477 +8427,1899 @@ var ProgressBar = ({
     orange: "#DB6769",
     red: "#EF4444"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Container2, { $alignItems: "center", $gap: `${16 / 16}rem`, ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Flex, { $alignItems: "center", $width: `${barWidth}`, $position: "relative", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-      Flex,
-      {
-        $position: "relative",
-        $overflow: "hidden",
-        $width: "100%",
-        $height: `${8 / TEXT_BASE_SIZE}rem`,
-        $background: "#F2F4F7",
-        $borderRadius: "9999px",
-        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-          Box,
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    Container2,
+    {
+      $alignItems: "center",
+      $gap: `${16 / TEXT_BASE_SIZE}rem`,
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          Flex,
           {
-            $width: `${Math.min(progress, 100)}%`,
-            $height: "100%",
-            $background: barColorMap[color],
-            $borderRadius: "9999px"
+            $position: "relative",
+            $alignItems: "center",
+            $width: `${barWidth}`,
+            $maxWidth: "100%",
+            children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              Flex,
+              {
+                $position: "relative",
+                $overflow: "hidden",
+                $width: "100%",
+                $height: `${8 / TEXT_BASE_SIZE}rem`,
+                $background: "#F2F4F7",
+                $borderRadius: "9999px",
+                children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                  Box,
+                  {
+                    $width: `${Math.min(progress, 100)}%`,
+                    $height: "100%",
+                    $background: barColorMap[color],
+                    $borderRadius: "9999px"
+                  }
+                )
+              }
+            )
           }
-        )
-      }
-    ) }),
-    total !== 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Text, { $size: `${14 / 16}rem`, $weight: "500", children: [
-      value,
-      "/",
-      total
-    ] })
-  ] });
+        ),
+        total !== 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(Text, { $size: 14, $weight: 500, children: [
+          value,
+          "/",
+          total
+        ] })
+      ]
+    }
+  );
 };
-// src/components/elements/included-features/IncludedFeatures.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
-function resolveDesignProps(props) {
-  return {
-    name: {
-      text: props.name?.text || "Included features",
-      style: {
-        fontFamily: props.name?.style?.fontFamily || "Inter",
-        fontSize: props.name?.style?.fontSize || 16,
-        fontWeight: props.name?.style?.fontWeight || 500,
-        color: props.name?.style?.color || "#000000"
+// 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
       }
-    },
-    limits: {
-      isVisible: props.limits?.isVisible || true
-    },
-    usage: {
-      isVisible: props.usage?.isVisible || true
-    },
-    count: props.count || 3
+    });
+    if (error.type === "card_error" || error.type === "validation_error") {
+      setMessage(error.message);
+    } else {
+      setMessage("An unexpected error occured.");
+    }
+    setIsLoading(false);
   };
-}
-var LimitFeature = ({
-  feature,
-  allocation,
-  usage
-}) => {
-  if (!feature) {
-    return null;
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Flex, { $justifyContent: "space-between", $margin: "0 0 1.5rem", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Flex, { $gap: `${16 / 16}rem`, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(IconRound, { name: feature.icon, size: "sm" }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Flex, { $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-        Text,
-        {
-          $font: "Public Sans",
-          $size: `${18 / 16}rem`,
-          $weight: "500",
-          $align: "center",
-          children: feature.name
-        }
-      ) })
-    ] }),
-    typeof allocation === "number" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-      ProgressBar,
-      {
-        progress: (usage || 0) / allocation * 100,
-        value: usage || 0,
-        total: allocation,
-        color: "blue",
-        barWidth: "140px"
+  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 textColor = l2 > 50 ? "#000000" : "#FFFFFF";
+  return lt`
+      color: ${textColor};
+      ${Text} {
+        color: ${textColor};
       }
-    )
-  ] });
+    `;
+}};
+  ${({ $color = "primary", theme, $variant = "filled" }) => {
+  const color = theme[$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, $variant = "filled" }) => {
+  const specified = theme[$color];
+  const lightened = lighten(specified, 15);
+  const color = specified === lightened ? darken(specified, 15) : lightened;
+  return $variant === "filled" ? lt`
+            background-color: ${color};
+            border-color: ${color};
+          ` : lt`
+            background-color: ${color};
+            border-color: ${color};
+            color: #ffffff;
+            ${Text} {
+              color: #ffffff;
+            }
+          `;
+}}
+  }
+  ${({ $size = "md" }) => {
+  switch ($size) {
+    case "sm":
+      return lt`
+          font-size: ${15 / 16}rem;
+          padding: ${12 / 16}rem 0;
+          border-radius: ${6 / 16}rem;
+        `;
+    case "md":
+      return lt`
+          font-size: ${17 / 16}rem;
+          padding: ${16 / 16}rem 0;
+          border-radius: ${8 / 16}rem;
+        `;
+    case "lg":
+      return lt`
+          font-size: ${19 / 16}rem;
+          padding: ${20 / 16}rem 0;
+          border-radius: ${10 / 16}rem;
+        `;
+  }
+}}
+`;
+// 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 UsageFeature = ({
-  feature,
-  usage
+var OverlaySideBar = ({
+  pricePeriod,
+  setPricePeriod,
+  setCheckoutStage
 }) => {
-  if (!feature) {
+  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: {
+      isVisible: props.header?.isVisible ?? true,
+      title: {
+        fontStyle: props.header?.title?.fontStyle ?? "heading1"
+      },
+      description: {
+        isVisible: props.header?.description?.isVisible ?? true,
+        fontStyle: props.header?.description?.fontStyle ?? "text"
+      },
+      price: {
+        isVisible: props.header?.price?.isVisible ?? true,
+        fontStyle: props.header?.price?.fontStyle ?? "text"
+      }
+    },
+    addOns: {
+      isVisible: props.addOns?.isVisible ?? true,
+      fontStyle: props.addOns?.fontStyle ?? "heading4",
+      showLabel: props.addOns?.showLabel ?? true
+    },
+    callToAction: {
+      isVisible: props.callToAction?.isVisible ?? true,
+      buttonSize: props.callToAction?.buttonSize ?? "md",
+      buttonStyle: props.callToAction?.buttonStyle ?? "secondary"
+    }
+  };
+};
+var PlanManager = (0, import_react7.forwardRef)(({ children, className, portal, ...rest }, ref) => {
+  const props = resolveDesignProps(rest);
+  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: planPeriod === "month" ? monthlyPrice?.price : yearlyPrice?.price,
+        current
+      })
+    );
+    return {
+      currentPlan: data.company?.plan,
+      canChangePlan: canChangePlan2,
+      availablePlans: availablePlans2
+    };
+  }, [data.company, data.activePlans, stripe, planPeriod]);
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { ref, className, children: [
+    /* @__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.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.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
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      }
+    ),
+    canChangePlan && props.callToAction.isVisible && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      StyledButton,
+      {
+        onClick: () => {
+          setLayout("checkout");
+        },
+        $size: props.callToAction.buttonSize,
+        $color: props.callToAction.buttonStyle,
+        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          Text,
+          {
+            $font: settings.theme.typography.text.fontFamily,
+            $size: settings.theme.typography.text.fontSize,
+            $weight: settings.theme.typography.text.fontWeight,
+            children: "Change Plan"
+          }
+        )
+      }
+    ),
+    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,
+            {
+              $flexDirection: "column",
+              $gap: "1rem",
+              $padding: "2rem 2.5rem 2rem 2.5rem",
+              $backgroundColor: "#FBFBFB",
+              $borderRadius: "0 0.5rem 0",
+              $flex: "1",
+              $height: "100%",
+              children: [
+                checkoutStage === "plan" && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+                    Flex,
+                    {
+                      $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: "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
+    )
+  ] });
+});
+// src/components/elements/included-features/IncludedFeatures.tsx
+var import_react8 = require("react");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+function resolveDesignProps2(props) {
+  return {
+    header: {
+      isVisible: props.header?.isVisible ?? true,
+      fontStyle: props.header?.fontStyle ?? "heading4",
+      text: props.header?.text ?? "Included features"
+    },
+    icons: {
+      isVisible: props.icons?.isVisible ?? true,
+      fontStyle: props.icons?.fontStyle ?? "heading3",
+      style: props.icons?.style ?? "light"
+    },
+    entitlement: {
+      isVisible: props.entitlement?.isVisible ?? true,
+      fontStyle: props.entitlement?.fontStyle ?? "heading5"
+    },
+    usage: {
+      isVisible: props.usage?.isVisible ?? true,
+      fontStyle: props.usage?.fontStyle ?? "heading6"
+    }
+  };
+}
+var IncludedFeatures = (0, import_react8.forwardRef)(({ className, ...rest }, ref) => {
+  const props = resolveDesignProps2(rest);
+  const { data, settings } = useEmbed();
+  const features = (0, import_react8.useMemo)(() => {
+    return (data.featureUsage?.features || []).map(
+      ({
+        access,
+        allocation,
+        allocationType,
+        feature,
+        period,
+        usage = 0,
+        ...props2
+      }) => {
+        return {
+          access,
+          allocation,
+          allocationType,
+          feature,
+          period,
+          /**
+           * @TODO: resolve feature price
+           */
+          price: void 0,
+          usage,
+          ...props2
+        };
+      }
+    );
+  }, [data.featureUsage]);
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Flex, { ref, className, $flexDirection: "column", $gap: "1.5rem", children: [
+    props.header.isVisible && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      Text,
+      {
+        $font: settings.theme.typography[props.header.fontStyle].fontFamily,
+        $size: settings.theme.typography[props.header.fontStyle].fontSize,
+        $weight: settings.theme.typography[props.header.fontStyle].fontWeight,
+        $color: settings.theme.typography[props.header.fontStyle].color,
+        children: props.header.text
+      }
+    ) }),
+    features.reduce(
+      (acc, { allocation, allocationType, feature, usage }, index) => {
+        if (!allocationType) {
+          return acc;
+        }
+        return [
+          ...acc,
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+            Flex,
+            {
+              $flexWrap: "wrap",
+              $justifyContent: "space-between",
+              $alignItems: "center",
+              $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,
+                    {
+                      name: feature.icon,
+                      size: "sm",
+                      colors: [
+                        settings.theme.card.background,
+                        settings.theme.primary
+                      ]
+                    }
+                  ),
+                  feature?.name && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Flex, { $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                    Text,
+                    {
+                      $font: settings.theme.typography[props.icons.fontStyle].fontFamily,
+                      $size: settings.theme.typography[props.icons.fontStyle].fontSize,
+                      $weight: settings.theme.typography[props.icons.fontStyle].fontWeight,
+                      $color: settings.theme.typography[props.icons.fontStyle].color,
+                      children: feature.name
+                    }
+                  ) })
+                ] }),
+                allocationType === "numeric" && feature?.name && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Box, { $textAlign: "right", children: [
+                  props.entitlement.isVisible && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                    Text,
+                    {
+                      as: Box,
+                      $font: settings.theme.typography[props.entitlement.fontStyle].fontFamily,
+                      $size: settings.theme.typography[props.entitlement.fontStyle].fontSize,
+                      $weight: settings.theme.typography[props.entitlement.fontStyle].fontWeight,
+                      $color: settings.theme.typography[props.entitlement.fontStyle].color,
+                      children: typeof allocation === "number" ? `${allocation} ${feature.name}` : `Unlimited ${feature.name}`
+                    }
+                  ),
+                  props.usage.isVisible && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                    Text,
+                    {
+                      as: Box,
+                      $font: settings.theme.typography[props.usage.fontStyle].fontFamily,
+                      $size: settings.theme.typography[props.usage.fontStyle].fontSize,
+                      $weight: settings.theme.typography[props.usage.fontStyle].fontWeight,
+                      $color: settings.theme.typography[props.usage.fontStyle].color,
+                      children: typeof allocation === "number" ? `${usage} of ${allocation} used` : `${usage} used`
+                    }
+                  )
+                ] })
+              ]
+            },
+            index
+          )
+        ];
+      },
+      []
+    )
+  ] });
+});
+// src/components/elements/metered-features/MeteredFeatures.tsx
+var import_react9 = require("react");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+function resolveDesignProps3(props) {
+  return {
+    isVisible: props.isVisible ?? true,
+    header: {
+      fontStyle: props.header?.fontStyle ?? "heading2"
+    },
+    description: {
+      isVisible: props.description?.isVisible ?? true,
+      fontStyle: props.description?.fontStyle ?? "text"
+    },
+    icon: {
+      isVisible: props.icon?.isVisible ?? true
+    },
+    allocation: {
+      isVisible: props.allocation?.isVisible ?? true,
+      fontStyle: props.allocation?.fontStyle ?? "heading4"
+    },
+    usage: {
+      isVisible: props.usage?.isVisible ?? true,
+      fontStyle: props.usage?.fontStyle ?? "heading5"
+    },
+    callToAction: {
+      isVisible: props.callToAction?.isVisible ?? true,
+      buttonSize: props.callToAction?.buttonSize ?? "md",
+      buttonStyle: props.callToAction?.buttonStyle ?? "secondary"
+    }
+  };
+}
+var MeteredFeatures = (0, import_react9.forwardRef)(({ className, ...rest }, ref) => {
+  const props = resolveDesignProps3(rest);
+  const { data, settings } = useEmbed();
+  const features = (0, import_react9.useMemo)(() => {
+    return (data.featureUsage?.features || []).map(
+      ({
+        access,
+        allocation,
+        allocationType,
+        feature,
+        period,
+        usage,
+        ...props2
+      }) => {
+        return {
+          access,
+          allocation,
+          allocationType,
+          feature,
+          period,
+          /**
+           * @TODO: resolve feature price
+           */
+          price: void 0,
+          usage,
+          ...props2
+        };
+      }
+    );
+  }, [data.featureUsage]);
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Flex, { ref, className, $flexDirection: "column", $gap: "1.5rem", children: features.reduce(
+    (acc, { allocation, allocationType, feature, usage }, index) => {
+      if (!props.isVisible || allocationType !== "numeric" || typeof allocation !== "number") {
+        return acc;
+      }
+      return [
+        ...acc,
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Flex, { $gap: "1.5rem", children: [
+          props.icon.isVisible && feature?.icon && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Box, { $flexShrink: "0", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(IconRound, { name: feature.icon, size: "sm" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Box, { $flexGrow: "1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Flex, { children: [
+              feature?.name && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Box, { $flexGrow: "1", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                  Text,
+                  {
+                    as: Box,
+                    $font: settings.theme.typography[props.header.fontStyle].fontFamily,
+                    $size: settings.theme.typography[props.header.fontStyle].fontSize,
+                    $weight: settings.theme.typography[props.header.fontStyle].fontWeight,
+                    $color: settings.theme.typography[props.header.fontStyle].color,
+                    children: feature.name
+                  }
+                ),
+                props.description.isVisible && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                  Text,
+                  {
+                    as: Box,
+                    $font: settings.theme.typography[props.description.fontStyle].fontFamily,
+                    $size: settings.theme.typography[props.description.fontStyle].fontSize,
+                    $weight: settings.theme.typography[props.description.fontStyle].fontWeight,
+                    $color: settings.theme.typography[props.description.fontStyle].color,
+                    children: feature.description
+                  }
+                )
+              ] }),
+              allocationType === "numeric" && feature?.name && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Box, { $textAlign: "right", children: [
+                props.allocation.isVisible && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                  Text,
+                  {
+                    as: Box,
+                    $font: settings.theme.typography[props.allocation.fontStyle].fontFamily,
+                    $size: settings.theme.typography[props.allocation.fontStyle].fontSize,
+                    $weight: settings.theme.typography[props.allocation.fontStyle].fontWeight,
+                    $color: settings.theme.typography[props.allocation.fontStyle].color,
+                    children: typeof allocation === "number" ? `${allocation} ${feature.name}` : `Unlimited ${feature.name}`
+                  }
+                ),
+                props.usage.isVisible && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                  Text,
+                  {
+                    as: Box,
+                    $font: settings.theme.typography[props.usage.fontStyle].fontFamily,
+                    $size: settings.theme.typography[props.usage.fontStyle].fontSize,
+                    $weight: settings.theme.typography[props.usage.fontStyle].fontWeight,
+                    $color: settings.theme.typography[props.usage.fontStyle].color,
+                    children: typeof allocation === "number" ? `${usage} of ${allocation} used` : `${usage} used`
+                  }
+                )
+              ] })
+            ] }),
+            typeof usage === "number" && typeof allocation === "number" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+              ProgressBar,
+              {
+                progress: usage / allocation * 100,
+                value: usage,
+                total: allocation,
+                color: "blue"
+              }
+            ) })
+          ] })
+        ] }, index)
+      ];
+    },
+    []
+  ) });
+});
+// src/components/elements/upcoming-bill/UpcomingBill.tsx
+var import_react10 = require("react");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+function resolveDesignProps4(props) {
+  return {
+    header: {
+      isVisible: props.header?.isVisible ?? true,
+      fontStyle: props.header?.fontStyle ?? "heading4",
+      prefix: props.header?.prefix ?? "Next bill due"
+    },
+    price: {
+      isVisible: props.price?.isVisible ?? true,
+      fontStyle: props.price?.fontStyle ?? "heading1"
+    },
+    contractEndDate: {
+      isVisible: props.contractEndDate?.isVisible ?? true,
+      fontStyle: props.contractEndDate?.fontStyle ?? "heading6",
+      prefix: props.contractEndDate?.prefix ?? "Contract ends"
+    }
+  };
+}
+var UpcomingBill = (0, import_react10.forwardRef)(({ className, ...rest }, ref) => {
+  const props = resolveDesignProps4(rest);
+  const { data, settings, stripe } = useEmbed();
+  const { latestInvoice } = (0, import_react10.useMemo)(() => {
+    return {
+      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_runtime8.jsxs)(Flex, { $justifyContent: "space-between", $margin: "0 0 1.5rem", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Flex, { $gap: `${16 / 16}rem`, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(IconRound, { name: feature.icon, size: "sm" }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Flex, { $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { ref, className, children: [
+    props.header.isVisible && latestInvoice.dueDate && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      Flex,
+      {
+        $justifyContent: "space-between",
+        $alignItems: "center",
+        $margin: "0 0 0.75rem",
+        children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+          Text,
+          {
+            $font: settings.theme.typography[props.header.fontStyle].fontFamily,
+            $size: settings.theme.typography[props.header.fontStyle].fontSize,
+            $weight: settings.theme.typography[props.header.fontStyle].fontWeight,
+            $color: settings.theme.typography[props.header.fontStyle].color,
+            children: [
+              props.header.prefix,
+              " ",
+              latestInvoice.dueDate
+            ]
+          }
+        )
+      }
+    ),
+    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,
+        {
+          $font: settings.theme.typography[props.price.fontStyle].fontFamily,
+          $size: settings.theme.typography[props.price.fontStyle].fontSize,
+          $weight: settings.theme.typography[props.price.fontStyle].fontWeight,
+          $color: settings.theme.typography[props.price.fontStyle].color,
+          $lineHeight: 1,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              Text,
+              {
+                $size: "0.75em",
+                $color: settings.theme.typography[props.price.fontStyle].color,
+                children: "$"
+              }
+            ),
+            latestInvoice.amountDue
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Box, { $maxWidth: "10rem", $lineHeight: "1", $textAlign: "right", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         Text,
         {
-          $font: "Public Sans",
-          $size: `${18 / 16}rem`,
-          $weight: "500",
-          $align: "center",
-          children: feature.name
+          $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."
         }
       ) })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Flex, { $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Text, { as: Box, $font: "Public Sans", $weight: "500", $align: "right", children: [
-      usage,
-      " ",
-      feature.featureType,
-      " used"
-    ] }) })
+    ] })
   ] });
+});
+// src/components/elements/payment-method/PaymentMethod.tsx
+var import_react11 = require("react");
+var import_react_dom2 = require("react-dom");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var resolveDesignProps5 = (props) => {
+  return {
+    header: {
+      isVisible: props.header?.isVisible ?? true,
+      fontStyle: props.header?.fontStyle ?? "heading4"
+    },
+    functions: {
+      allowEdit: props.functions?.allowEdit ?? true
+    }
+  };
 };
-var AddonFeature = ({
-  feature
-}) => {
-  if (!feature) {
+var PaymentMethod = (0, import_react11.forwardRef)(({ children, className, portal, ...rest }, ref) => {
+  const props = resolveDesignProps5(rest);
+  const { data, settings, stripe, layout, setLayout } = useEmbed();
+  const paymentMethod = (0, import_react11.useMemo)(() => {
+    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 {
+      cardLast4,
+      monthsToExpiration
+    };
+  }, [data.subscription?.paymentMethod]);
+  if (!stripe || !data.subscription?.paymentMethod) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Flex, { $justifyContent: "space-between", $margin: "0 0 1.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Flex, { $gap: `${16 / 16}rem`, children: [
-    feature.icon && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(IconRound, { name: feature.icon, size: "sm" }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Flex, { $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-      Text,
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { ref, className, children: [
+    props.header.isVisible && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+      Flex,
       {
-        $font: "Public Sans",
-        $size: `${18 / 16}rem`,
-        $weight: "500",
-        $align: "center",
-        children: feature.name
+        $justifyContent: "space-between",
+        $alignItems: "center",
+        $margin: "0 0 1rem",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            Text,
+            {
+              $font: settings.theme.typography[props.header.fontStyle].fontFamily,
+              $size: settings.theme.typography[props.header.fontStyle].fontSize,
+              $weight: settings.theme.typography[props.header.fontStyle].fontWeight,
+              $color: settings.theme.typography[props.header.fontStyle].color,
+              children: "Payment Method"
+            }
+          ),
+          typeof paymentMethod.monthsToExpiration === "number" && Math.abs(paymentMethod.monthsToExpiration) < 4 && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            Text,
+            {
+              $font: settings.theme.typography.text.fontFamily,
+              $size: 14,
+              $color: "#DB6769",
+              children: paymentMethod.monthsToExpiration > 0 ? `Expires in ${paymentMethod.monthsToExpiration} mo` : "Expired"
+            }
+          )
+        ]
       }
-    ) })
-  ] }) });
-};
-var IncludedFeatures = ({
-  className,
-  ...props
-}) => {
-  const designPropsWithDefaults = resolveDesignProps(props);
-  const { data } = useEmbed();
-  const [numVisible, setNumVisible] = (0, import_react7.useState)(designPropsWithDefaults.count);
-  const isExpanded = (0, import_react7.useMemo)(
-    () => numVisible > designPropsWithDefaults.count,
-    [numVisible, designPropsWithDefaults.count]
-  );
-  const features = (0, import_react7.useMemo)(() => {
-    return (data.featureUsage?.features || []).map(
-      ({
-        access,
-        allocation,
-        allocationType,
-        feature,
-        period,
-        usage,
-        ...props2
-      }) => {
-        return {
-          access,
-          allocation,
-          allocationType,
-          feature,
-          period,
-          /**
-           * @TODO: resolve feature price
-           */
-          price: void 0,
-          usage,
-          ...props2
-        };
+    ),
+    paymentMethod.cardLast4 && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+      Flex,
+      {
+        $justifyContent: "space-between",
+        $alignItems: "center",
+        $margin: "0 0 1rem",
+        $background: `${hexToHSL(settings.theme.card.background).l > 50 ? darken(settings.theme.card.background, 10) : lighten(settings.theme.card.background, 20)}`,
+        $padding: "0.375rem 1rem",
+        $borderRadius: "9999px",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Text, { $font: settings.theme.typography.text.fontFamily, $size: 14, children: [
+            "\u{1F4B3} Card ending in ",
+            paymentMethod.cardLast4
+          ] }),
+          props.functions.allowEdit && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            Text,
+            {
+              tabIndex: 0,
+              onClick: () => {
+                if (layout !== "payment")
+                  return;
+                setLayout("payment");
+              },
+              $font: settings.theme.typography.link.fontFamily,
+              $size: settings.theme.typography.link.fontSize,
+              $weight: settings.theme.typography.link.fontWeight,
+              $color: settings.theme.typography.link.color,
+              children: "Edit"
+            }
+          )
+        ]
       }
-    );
-  }, [data.featureUsage]);
-  const resize = () => {
-    setNumVisible(
-      (prev2) => prev2 > designPropsWithDefaults.count ? designPropsWithDefaults.count : features.length
-    );
+    ),
+    layout === "payment" && (0, import_react_dom2.createPortal)(
+      /* @__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
+    )
+  ] });
+});
+// src/components/elements/invoices/Invoices.tsx
+var import_react12 = require("react");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function resolveDesignProps6(props) {
+  return {
+    header: {
+      isVisible: props.header?.isVisible ?? true,
+      fontStyle: props.header?.fontStyle ?? "heading4"
+    },
+    date: {
+      isVisible: props.date?.isVisible ?? true,
+      fontStyle: props.date?.fontStyle ?? "link"
+    },
+    amount: {
+      isVisible: props.amount?.isVisible ?? true,
+      fontStyle: props.amount?.fontStyle ?? "text"
+    },
+    limit: {
+      isVisible: props.limit?.isVisible ?? true,
+      number: props.limit?.number ?? 2
+    },
+    collapse: {
+      isVisible: props.collapse?.isVisible ?? true,
+      fontStyle: props.collapse?.fontStyle ?? "link"
+    }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Box, { $margin: "0 0 1.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+}
+var Invoices = (0, import_react12.forwardRef)(({ className, ...rest }, ref) => {
+  const props = resolveDesignProps6(rest);
+  const { settings } = useEmbed();
+  const { invoices } = (0, import_react12.useMemo)(() => {
+    return {
+      invoices: [
+        {
+          date: toPrettyDate(/* @__PURE__ */ new Date("2024-05-12")),
+          amount: 200
+        },
+        {
+          date: toPrettyDate(/* @__PURE__ */ new Date("2024-04-12")),
+          amount: 200
+        }
+      ]
+    };
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { ref, className, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Flex, { $flexDirection: "column", $gap: "1rem", children: [
+    props.header.isVisible && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Flex, { $justifyContent: "space-between", $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       Text,
       {
-        $font: "Inter",
-        $size: `${15 / 16}rem`,
-        $weight: "500",
-        $color: "#767676",
-        children: designPropsWithDefaults.name.text
+        $font: settings.theme.typography[props.header.fontStyle].fontFamily,
+        $size: settings.theme.typography[props.header.fontStyle].fontSize,
+        $weight: settings.theme.typography[props.header.fontStyle].fontWeight,
+        $color: settings.theme.typography[props.header.fontStyle].color,
+        children: "Invoices"
       }
     ) }),
-    features.slice(0, numVisible).reduce((acc, feature, index) => {
-      if (feature.allocationType === "boolean") {
-        return [...acc, /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AddonFeature, { ...feature }, index)];
-      }
-      if (feature.allocationType === "numeric" || feature.allocationType === "trait" || feature.allocationType === "unlimited") {
-        if (typeof feature.allocation === "number") {
-          return [...acc, /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(LimitFeature, { ...feature }, index)];
-        }
-        return [...acc, /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(UsageFeature, { ...feature }, index)];
-      }
-      return acc;
-    }, []),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Flex, { $alignItems: "center", $gap: `${4 / 16}rem`, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-        Icon2,
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Flex, { $flexDirection: "column", $gap: "0.5rem", children: invoices.slice(
+      0,
+      props.limit.isVisible && props.limit.number || invoices.length
+    ).map(({ date, amount }, index) => {
+      return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Flex, { $justifyContent: "space-between", children: [
+        props.date.isVisible && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          Text,
+          {
+            $font: settings.theme.typography[props.date.fontStyle].fontFamily,
+            $size: settings.theme.typography[props.date.fontStyle].fontSize,
+            $weight: settings.theme.typography[props.date.fontStyle].fontWeight,
+            $color: settings.theme.typography[props.date.fontStyle].color,
+            children: toPrettyDate(date)
+          }
+        ),
+        props.amount.isVisible && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+          Text,
+          {
+            $font: settings.theme.typography[props.amount.fontStyle].fontFamily,
+            $size: settings.theme.typography[props.amount.fontStyle].fontSize,
+            $weight: settings.theme.typography[props.amount.fontStyle].fontWeight,
+            $color: settings.theme.typography[props.amount.fontStyle].color,
+            children: [
+              "$",
+              amount
+            ]
+          }
+        )
+      ] }, index);
+    }) }),
+    props.collapse.isVisible && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Flex, { $alignItems: "center", $gap: "0.5rem", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon2, { name: "chevron-down", style: { color: "#D0D0D0" } }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        Text,
         {
-          name: isExpanded ? "chevron-up" : "chevron-down",
-          style: { fontSize: "1.25rem", color: "#D0D0D0" }
+          $font: settings.theme.typography[props.collapse.fontStyle].fontFamily,
+          $size: settings.theme.typography[props.collapse.fontStyle].fontSize,
+          $weight: settings.theme.typography[props.collapse.fontStyle].fontWeight,
+          $color: settings.theme.typography[props.collapse.fontStyle].color,
+          children: "See all"
         }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Button2, { onClick: resize, color: "blue", variant: "link", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text, { $weight: "500", children: "See all" }) })
-    ] })
-  ] });
-};
-// src/components/elements/invoices/Invoices.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var Invoices = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "p-8", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "relative z-[1] bg-white flex flex-col space-y-4", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "font-bold text-base", children: "Invoices" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex flex-col space-y-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex justify-between text-sm", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-blue-400", children: "May 12, 2024" }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-gray-400", children: "$315.00" })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex justify-between text-sm", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-blue-400", children: "May 12, 2024" }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-gray-400", children: "$315.00" })
-      ] })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex flex-row space-x-2 items-center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Icon2, { name: "chevron-down", className: "text-gray-400 leading-none" }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-blue-400 font-medium font-display text-sm", children: "See all" })
+      )
     ] })
   ] }) });
-};
+});
-// src/components/elements/next-bill-due/NextBillDue.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var NextBillDue = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "bg-white p-8", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex items-center justify-between mb-3", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "font-bold text-base", children: "Next bill due June 12, 2024" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center leading-none justify-between", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-row items-end flex-1   font-medium font-display text-gray-700", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "text-lg mr-0.5 translate-y-[3px]", children: "$" }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "text-3xl", children: "315.00" })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "text-gray-400 text-xs max-w-[160px]", children: [
-        "Estimated monthly bill, ",
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("br", {}),
-        "Contract ends 5/12/24."
-      ] })
-    ] })
-  ] });
-};
+// src/components/embed/ComponentTree.tsx
+var import_react18 = require("react");
-// src/components/elements/payment-method/PaymentMethod.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
-var PaymentMethod = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "relative px-8 py-8 bg-white", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "relative z-[1] bg-white", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-center justify-between mb-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "font-bold text-base", children: "Payment Method" }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "text-xs text-red-400", children: "Expires in 4 mo" })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex flex-row justify-between bg-gray-50 text-sm px-4 py-1.5 rounded-full", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "", children: "\u{1F4B3} Card ending 4512" }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "text-blue-400", children: "Edit" })
-    ] })
-  ] }) });
-};
+// src/components/embed/renderer.ts
+var import_react17 = require("react");
-// src/components/elements/plan-manager/PlanManager.tsx
-var import_react8 = 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/elements/plan-manager/styles.ts
-var Button3 = dt(Button2)`
-  font-family: "Public Sans", sans-serif;
-  font-weight: 500;
-  text-align: center;
-  width: 100%;
-  color: ${({ $color, theme }) => $color || theme.text};
-  ${({ $backgroundColor, theme }) => {
-  const color = $backgroundColor || theme.button;
-  return lt`
-      background-color: ${color};
-      border-color: ${color};
-    `;
-}}
+// src/components/layout/viewport/Viewport.tsx
+var import_react14 = require("react");
-  &:hover {
-    ${({ $backgroundColor, theme }) => {
-  const specified = $backgroundColor || theme.button;
-  const lightened = lighten(specified, 12.5);
-  const color = specified === lightened ? darken(specified, 12.5) : lightened;
-  return lt`
-        background-color: ${color};
-        border-color: ${color};
-      `;
-}}
+// 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
+      }
+    );
   }
+);
-  ${({ $size = "md" }) => {
-  switch ($size) {
-    case "sm":
-      return lt`
-          font-size: ${15 / 16}rem;
-          padding: ${12 / 16}rem 0;
-          border-radius: ${8 / 16}rem;
-        `;
-    case "md":
-      return lt`
-          font-size: ${17 / 16}rem;
-          padding: ${16 / 16}rem 0;
-          border-radius: ${10 / 16}rem;
-        `;
-    case "lg":
+// 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`
-          font-size: ${19 / 16}rem;
-          padding: ${20 / 16}rem 0;
-          border-radius: ${12 / 16}rem;
+          > :not(:last-child) {
+            margin-bottom: 1rem;
+          }
+          > * {
+            background: ${theme.card.background};
+            border-radius: ${borderRadius};
+            ${$shadow && `box-shadow: ${boxShadow};`}
+          }
         `;
+    }}
+    `;
   }
-}}
-`;
+);
-// src/components/elements/plan-manager/PlanManager.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
-function resolveDesignProps2(props) {
-  return {
-    header: {
-      isVisible: props.header?.isVisible || true,
-      title: {
-        fontFamily: props.header?.title?.fontFamily || "Manrope",
-        fontSize: props.header?.title?.fontSize || 37,
-        fontWeight: props.header?.title?.fontWeight || 800,
-        color: props.header?.title?.color || "black"
-      },
-      description: {
-        isVisible: props.header?.description?.isVisible || true,
-        fontFamily: props.header?.description?.fontFamily || "Public Sans",
-        fontSize: props.header?.description?.fontSize || 16,
-        fontWeight: props.header?.description?.fontWeight || 400,
-        color: props.header?.description?.color || "black"
-      },
-      price: {
-        isVisible: props.header?.price?.isVisible || true,
-        fontFamily: props.header?.price?.fontFamily || "Inter",
-        fontSize: props.header?.price?.fontSize || 16,
-        fontWeight: props.header?.price?.fontWeight || 500,
-        color: props.header?.price?.color || "black"
-      }
-    },
-    addOns: {
-      isVisible: props.addOns?.isVisible || true
-    },
-    usageBased: {
-      isVisible: props.usageBased?.isVisible || true
-    },
-    callToAction: {
-      isVisible: props.callToAction?.isVisible || true,
-      size: props.callToAction?.size || "md",
-      color: props.callToAction?.color || "white",
-      backgroundColor: props.callToAction?.backgroundColor || "black"
-    }
-  };
-}
-var PlanManager = ({ className, ...props }) => {
-  const designPropsWithDefaults = resolveDesignProps2(props);
-  const { data } = useEmbed();
-  const plans = (0, import_react8.useMemo)(() => {
-    return (data.company?.plans || []).map(({ name, description }) => {
-      return {
-        name,
-        description,
-        /**
-         * @TODO: resolve plan/addon prices
-         */
-        price: void 0
-      };
-    });
-  }, [data.company?.plans]);
-  const plan = plans.at(0);
-  const addons = plans.slice(1);
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Flex, { $flexDirection: "column", $gap: `${12 / 16}rem`, $margin: "0 0 3rem", children: [
-      designPropsWithDefaults.header.isVisible && plan && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
-        Flex,
-        {
-          $justifyContent: "space-between",
-          $alignItems: "center",
-          $width: "100%",
-          $margin: "0 0 1.5rem",
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { $margin: "0 0 0.75rem", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-                Text,
-                {
-                  $font: designPropsWithDefaults.header.title.fontFamily,
-                  $size: `${designPropsWithDefaults.header.title.fontSize / 16}rem`,
-                  $weight: `${designPropsWithDefaults.header.title.fontWeight}`,
-                  $color: designPropsWithDefaults.header.title.color,
-                  children: plan.name
-                }
-              ) }),
-              designPropsWithDefaults.header.description.isVisible && plan.description && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-                Text,
-                {
-                  $font: designPropsWithDefaults.header.description.fontFamily,
-                  $size: `${designPropsWithDefaults.header.description.fontSize / 16}rem`,
-                  $weight: `${designPropsWithDefaults.header.description.fontWeight}`,
-                  $color: designPropsWithDefaults.header.description.color,
-                  children: plan.description
-                }
-              )
-            ] }),
-            designPropsWithDefaults.header.price.isVisible && plan.price >= 0 && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
-              Text,
-              {
-                $font: designPropsWithDefaults.header.price.fontFamily,
-                $size: `${designPropsWithDefaults.header.price.fontSize / 16}`,
-                $weight: `${designPropsWithDefaults.header.price.fontWeight}`,
-                $color: designPropsWithDefaults.header.price.color,
-                children: [
-                  "$",
-                  plan.price,
-                  "/mo"
-                ]
-              }
-            )
-          ]
-        }
-      ),
-      designPropsWithDefaults.addOns.isVisible && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Text, { $size: `${15 / 16}rem`, $weight: "500", children: "Add-Ons" }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { $width: "100%", $margin: "0 0 1rem", children: addons.map((addon, index) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
-          Flex,
-          {
-            $justifyContent: "space-between",
-            $alignItems: "center",
-            $width: "100%",
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Text, { $font: "Manrope", $size: `${18 / 16}rem`, $weight: "800", children: addon.name }),
-              addon.price >= 0 && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Text, { $weight: "500", children: [
-                "$",
-                addon.price,
-                "/mo"
-              ] })
-            ]
-          },
-          index
-        )) })
-      ] })
-    ] }),
-    designPropsWithDefaults.callToAction.isVisible && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-      Button3,
+// 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,
       {
-        $size: designPropsWithDefaults.callToAction.size,
-        $color: designPropsWithDefaults.callToAction.color,
-        $backgroundColor: designPropsWithDefaults.callToAction.backgroundColor,
-        children: "Change Plan"
+        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,
-  PlanManager
+  UpcomingBill,
+  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;
@@ -7840,14 +10333,15 @@ function createRenderer(options) {
     if (!component) {
       return null;
     }
-    const { className, style, ...rootProps } = props;
-    const resolvedProps = node2.id === "ROOT" ? rootProps : props;
+    const { className, ...rest } = props;
+    const resolvedProps = component === "div" ? rest : props;
     const resolvedChildren = children.map(renderNode);
-    return (0, import_react9.createElement)(
+    return (0, import_react17.createElement)(
       component,
       {
-        ...resolvedProps,
-        ...Object.keys(custom).length > 0 && { custom },
+        className,
+        ...component !== "div" && { resolvedProps },
+        ...component !== "div" && Object.keys(custom).length > 0 && { custom },
         key: index
       },
       resolvedChildren
@@ -7856,30 +10350,30 @@ function createRenderer(options) {
 }
 // src/components/embed/ComponentTree.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var ComponentTree = () => {
-  const [children, setChildren] = (0, import_react10.useState)("Loading");
+  const [children, setChildren] = (0, import_react18.useState)("Loading");
   const { error, nodes } = useEmbed();
-  (0, import_react10.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     const renderer = createRenderer();
     setChildren(nodes.map(renderer));
   }, [nodes]);
   if (error) {
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { children: error.message });
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { children: error.message });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_jsx_runtime13.Fragment, { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_jsx_runtime18.Fragment, { children });
 };
 // src/components/embed/Embed.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
-var SchematicEmbed = ({ id, accessToken }) => {
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var SchematicEmbed = ({ id, accessToken, apiConfig }) => {
   if (accessToken?.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime14.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_runtime14.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_runtime14.jsx)(EmbedProvider, { id, accessToken, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ComponentTree, {}) });
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(EmbedProvider, { id, accessToken, apiConfig, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ComponentTree, {}) });
 };
 /*! Bundled license information: