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.esm.js CHANGED Viewed

@@ -122,7 +122,7 @@ var require_classnames = __commonJS({
 });
 // src/context/embed.tsx
-import { createContext, useCallback, useEffect, useState } from "react";
+import { createContext, useCallback, useEffect, useRef, useState } from "react";
 // node_modules/pako/dist/pako.esm.mjs
 var Z_FIXED$1 = 4;
@@ -4934,7 +4934,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);
@@ -5614,6 +5614,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
+import { Elements } from "@stripe/react-stripe-js";
 // src/api/runtime.ts
 var BASE_PATH = "https://api.schematichq.com".replace(/\/+$/, "");
 var Configuration = class {
@@ -5871,6 +6008,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);
@@ -5973,7 +6234,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
@@ -5984,7 +6245,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"]),
@@ -5992,25 +6253,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);
@@ -6212,13 +6454,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"])
   };
 }
@@ -6259,6 +6654,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);
@@ -6268,9 +6677,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"])
   };
 }
@@ -6288,8 +6702,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
    */
@@ -6336,30 +6792,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
 import { jsx } from "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]) => {
@@ -6386,11 +6885,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) {
@@ -6404,74 +6903,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 = 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] = useState({
-    data: {},
-    nodes: [],
-    settings: { ...defaultSettings },
-    setData: () => {
-    },
-    setSettings: () => {
-    },
-    updateSettings: () => {
-    }
+  const styleRef = useRef(null);
+  const [state, setState] = useState(() => {
+    return {
+      data: {},
+      nodes: [],
+      settings: { ...defaultSettings },
+      stripe: null,
+      layout: "portal",
+      error: void 0,
+      setData: () => {
+      },
+      updateSettings: () => {
+      },
+      setStripe: () => {
+      },
+      setLayout: () => {
+      }
+    };
   });
+  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;
+  }, []);
   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]);
+  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 = useCallback(
     (data) => {
       setState((prev2) => ({
         ...prev2,
-        data
+        data: Object.assign({}, data)
       }));
     },
     [setState]
   );
-  const setSettings = useCallback(
+  const updateSettings = useCallback(
     (settings) => {
       setState((prev2) => ({
         ...prev2,
-        settings
+        settings: Object.assign({}, prev2.settings, settings)
       }));
     },
     [setState]
   );
-  const updateSettings = useCallback(
-    (settings) => {
+  const setStripe = useCallback(
+    (stripe) => {
+      setState((prev2) => ({
+        ...prev2,
+        stripe
+      }));
+    },
+    [setState]
+  );
+  const setLayout = useCallback(
+    (layout) => {
       setState((prev2) => ({
         ...prev2,
-        settings: { ...prev2.settings, ...settings }
+        layout
       }));
     },
     [setState]
   );
+  const renderChildren = () => {
+    if (state.stripe) {
+      return /* @__PURE__ */ jsx(
+        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__ */ jsx(
     EmbedContext.Provider,
     {
@@ -6479,17 +7070,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__ */ jsx(ot, { theme: state.settings.theme === "dark" ? dark : light, children })
+      children: /* @__PURE__ */ 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() {
@@ -6530,6 +7649,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;
@@ -6803,12 +7923,7 @@ function contextString(context) {
 }
 // src/context/schematic.tsx
-import {
-  createContext as createContext2,
-  useEffect as useEffect2,
-  useMemo,
-  useState as useState2
-} from "react";
+import { createContext as createContext2, useEffect as useEffect2, useMemo, useState as useState2 } from "react";
 import { jsx as jsx2 } from "react/jsx-runtime";
 var SchematicContext = createContext2({
   flagValues: {}
@@ -6901,17 +8016,13 @@ var useSchematicFlag = (key, opts) => {
   return value;
 };
-// src/components/embed/ComponentTree.tsx
+// src/components/elements/plan-manager/PlanManager.tsx
 import {
-  useEffect as useEffect4,
+  forwardRef,
+  useMemo as useMemo2,
   useState as useState5
 } from "react";
-// src/components/embed/renderer.ts
-import { createElement } from "react";
-// src/components/elements/included-features/IncludedFeatures.tsx
-import { useMemo as useMemo2, useState as useState4 } from "react";
+import { createPortal } from "react-dom";
 // src/utils/color.ts
 function hexToHSL(color) {
@@ -6998,15 +8109,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
@@ -7052,10 +8172,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};
@@ -7080,46 +8203,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";
@@ -7170,72 +8293,6 @@ var Button2 = ({
   );
 };
-// src/components/ui/card/Card.tsx
-import { forwardRef } from "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
-import { jsx as jsx4 } from "react/jsx-runtime";
-var Card = forwardRef(
-  ({ children, className }, ref) => {
-    const { settings } = useEmbed();
-    return /* @__PURE__ */ jsx4(
-      StyledCard,
-      {
-        ref,
-        className,
-        $sectionLayout: settings.sectionLayout,
-        $borderRadius: settings.borderRadius,
-        children
-      }
-    );
-  }
-);
 // src/components/ui/flex/styles.ts
 var Flex = dt(Box)`
   display: flex;
@@ -7254,9 +8311,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;
@@ -7276,35 +8332,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
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx4 } from "react/jsx-runtime";
 var Icon2 = ({ name, className, ...props }) => {
-  return /* @__PURE__ */ jsx5(Icon, { className: (0, import_classnames.default)("i", `i-${name}`, className), ...props });
+  return /* @__PURE__ */ jsx4(Icon, { className: (0, import_classnames.default)("i", `i-${name}`, className), ...props });
 };
 // src/components/ui/icon/IconRound.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx5 } from "react/jsx-runtime";
 var IconRound = ({
   name,
-  style = "filled",
-  size = "md"
+  variant = "filled",
+  size = "md",
+  colors = ["white", "#e5e7eb"],
+  ...props
 }) => {
-  return /* @__PURE__ */ jsx6(Container, { $size: size, $style: style, children: /* @__PURE__ */ jsx6(Icon2, { name }) });
+  return /* @__PURE__ */ jsx5(Container, { $size: size, $variant: variant, $colors: colors, ...props, children: /* @__PURE__ */ jsx5(Icon2, { name }) });
 };
 // src/components/ui/progress-bar/styles.ts
@@ -7313,13 +8371,13 @@ var Container2 = dt(Flex)`
 `;
 // src/components/ui/progress-bar/ProgressBar.tsx
-import { jsx as jsx7, jsxs } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs } from "react/jsx-runtime";
 var ProgressBar = ({
   progress,
   value,
   total = 0,
   color = "gray",
-  barWidth,
+  barWidth = "100%",
   ...props
 }) => {
   const barColorMap = {
@@ -7329,477 +8387,1902 @@ var ProgressBar = ({
     orange: "#DB6769",
     red: "#EF4444"
   };
-  return /* @__PURE__ */ jsxs(Container2, { $alignItems: "center", $gap: `${16 / 16}rem`, ...props, children: [
-    /* @__PURE__ */ jsx7(Flex, { $alignItems: "center", $width: `${barWidth}`, $position: "relative", children: /* @__PURE__ */ jsx7(
-      Flex,
-      {
-        $position: "relative",
-        $overflow: "hidden",
-        $width: "100%",
-        $height: `${8 / TEXT_BASE_SIZE}rem`,
-        $background: "#F2F4F7",
-        $borderRadius: "9999px",
-        children: /* @__PURE__ */ jsx7(
-          Box,
+  return /* @__PURE__ */ jsxs(
+    Container2,
+    {
+      $alignItems: "center",
+      $gap: `${16 / TEXT_BASE_SIZE}rem`,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx6(
+          Flex,
           {
-            $width: `${Math.min(progress, 100)}%`,
-            $height: "100%",
-            $background: barColorMap[color],
-            $borderRadius: "9999px"
+            $position: "relative",
+            $alignItems: "center",
+            $width: `${barWidth}`,
+            $maxWidth: "100%",
+            children: /* @__PURE__ */ jsx6(
+              Flex,
+              {
+                $position: "relative",
+                $overflow: "hidden",
+                $width: "100%",
+                $height: `${8 / TEXT_BASE_SIZE}rem`,
+                $background: "#F2F4F7",
+                $borderRadius: "9999px",
+                children: /* @__PURE__ */ jsx6(
+                  Box,
+                  {
+                    $width: `${Math.min(progress, 100)}%`,
+                    $height: "100%",
+                    $background: barColorMap[color],
+                    $borderRadius: "9999px"
+                  }
+                )
+              }
+            )
           }
-        )
-      }
-    ) }),
-    total !== 0 && /* @__PURE__ */ jsxs(Text, { $size: `${14 / 16}rem`, $weight: "500", children: [
-      value,
-      "/",
-      total
-    ] })
-  ] });
+        ),
+        total !== 0 && /* @__PURE__ */ jsxs(Text, { $size: 14, $weight: 500, children: [
+          value,
+          "/",
+          total
+        ] })
+      ]
+    }
+  );
 };
-// src/components/elements/included-features/IncludedFeatures.tsx
-import { jsx as jsx8, jsxs as jsxs2 } from "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
+import { useState as useState4 } from "react";
+import {
+  LinkAuthenticationElement,
+  PaymentElement
+} from "@stripe/react-stripe-js";
+import { useStripe, useElements } from "@stripe/react-stripe-js";
+import { jsx as jsx7, jsxs as jsxs2 } from "react/jsx-runtime";
+var CheckoutForm = () => {
+  const stripe = useStripe();
+  const elements = useElements();
+  const [message, setMessage] = useState4(null);
+  const [isLoading, setIsLoading] = useState4(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__ */ jsxs2(Flex, { $justifyContent: "space-between", $margin: "0 0 1.5rem", children: [
-    /* @__PURE__ */ jsxs2(Flex, { $gap: `${16 / 16}rem`, children: [
-      /* @__PURE__ */ jsx8(IconRound, { name: feature.icon, size: "sm" }),
-      /* @__PURE__ */ jsx8(Flex, { $alignItems: "center", children: /* @__PURE__ */ jsx8(
-        Text,
-        {
-          $font: "Public Sans",
-          $size: `${18 / 16}rem`,
-          $weight: "500",
-          $align: "center",
-          children: feature.name
-        }
-      ) })
-    ] }),
-    typeof allocation === "number" && /* @__PURE__ */ jsx8(
-      ProgressBar,
-      {
-        progress: (usage || 0) / allocation * 100,
-        value: usage || 0,
-        total: allocation,
-        color: "blue",
-        barWidth: "140px"
-      }
-    )
-  ] });
-};
-var UsageFeature = ({
-  feature,
-  usage
-}) => {
-  if (!feature) {
+  return /* @__PURE__ */ jsxs2(
+    "form",
+    {
+      id: "payment-form",
+      onSubmit: handleSubmit,
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        height: "100%"
+      },
+      children: [
+        /* @__PURE__ */ jsxs2(
+          Box,
+          {
+            $fontSize: "18px",
+            $marginBottom: "1.5rem",
+            $display: "inline-block",
+            $width: "100%",
+            children: [
+              "Add payment method",
+              " "
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx7(
+          Flex,
+          {
+            $flexDirection: "column",
+            $gap: "1.5rem",
+            $marginBottom: "1.5rem",
+            $width: "100%",
+            children: /* @__PURE__ */ jsx7(
+              LinkAuthenticationElement,
+              {
+                id: "link-authentication-element"
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs2(Flex, { $flexDirection: "column", $width: "100%", $flex: "1", $height: "100%", children: [
+          /* @__PURE__ */ jsx7(PaymentElement, { id: "payment-element" }),
+          message && /* @__PURE__ */ jsx7("div", { id: "payment-message", children: message })
+        ] }),
+        /* @__PURE__ */ jsx7("div", { children: /* @__PURE__ */ jsx7(
+          "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__ */ jsx7("span", { id: "button-text", style: { marginTop: "2.5rem" }, children: isLoading ? /* @__PURE__ */ jsx7("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
+import { Fragment, jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
+var OverlayHeader = ({ children }) => {
+  const { setLayout } = useEmbed();
+  return /* @__PURE__ */ jsxs3(
+    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__ */ jsx8("div", { children: /* @__PURE__ */ jsx8(
+          Box,
+          {
+            $cursor: "pointer",
+            onClick: () => {
+              setLayout("portal");
+            },
+            children: /* @__PURE__ */ jsx8(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__ */ jsx8(
+    Box,
+    {
+      $position: "absolute",
+      $top: "50%",
+      $left: "50%",
+      $zIndex: "999999",
+      $transform: "translate(-50%, -50%)",
+      $width: "100%",
+      $height: "100%",
+      $backgroundColor: "#D9D9D9",
+      $overflow: "hidden",
+      children: /* @__PURE__ */ jsx8(
+        Flex,
+        {
+          $position: "relative",
+          $top: "50%",
+          $left: "50%",
+          $transform: "translate(-50%, -50%)",
+          $flexDirection: "column",
+          $maxWidth: sizeMaxWidthMap[size],
+          $width: sizeWidthMap[size],
+          $height: sizeHeighthMap[size],
+          $backgroundColor: "#FBFBFB",
+          $borderBottom: "1px solid #DEDEDE",
+          $borderRadius: "8px",
+          $boxShadow: "0px 1px 20px 0px #1018280F, 0px 1px 3px 0px #1018281A;",
+          id: "select-plan-dialog",
+          role: "dialog",
+          "aria-labelledby": "select-plan-dialog-label",
+          "aria-modal": "true",
+          children
+        }
+      )
+    }
+  );
+};
+var OverlaySideBar = ({
+  pricePeriod,
+  setPricePeriod,
+  setCheckoutStage
+}) => {
+  return /* @__PURE__ */ jsxs3(
+    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__ */ jsxs3(
+          Flex,
+          {
+            $flexDirection: "column",
+            $position: "relative",
+            $gap: "1rem",
+            $width: "100%",
+            $height: "auto",
+            $padding: "1.5rem",
+            $borderBottom: "1px solid #DEDEDE",
+            children: [
+              /* @__PURE__ */ jsxs3(Flex, { $flexDirection: "row", $justifyContent: "space-between", children: [
+                /* @__PURE__ */ jsx8(Text, { $size: 20, $weight: 600, children: "Subscription" }),
+                /* @__PURE__ */ jsxs3(
+                  Flex,
+                  {
+                    $border: "1px solid #D9D9D9",
+                    $padding: ".15rem .45rem .15rem .55rem",
+                    $alignItems: "center",
+                    $borderRadius: "5px",
+                    $fontSize: "12px",
+                    children: [
+                      /* @__PURE__ */ jsx8(Box, { $display: "inline-block", $marginRight: ".5rem", children: "$ USD" }),
+                      /* @__PURE__ */ jsx8(
+                        Icon2,
+                        {
+                          name: "chevron-down",
+                          style: {
+                            fontSize: "20px",
+                            lineHeight: "1em"
+                          }
+                        }
+                      )
+                    ]
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs3(
+                Flex,
+                {
+                  $flexDirection: "row",
+                  $border: "1px solid #D9D9D9",
+                  $borderRadius: "40px",
+                  $fontSize: "12px",
+                  $textAlign: "center",
+                  $cursor: "pointer",
+                  children: [
+                    /* @__PURE__ */ jsx8(
+                      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__ */ jsx8(
+                      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__ */ jsx8(Box, { $fontSize: "11px", $color: "#194BFB", children: "Save up to 33% with yearly billing" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs3(
+          Flex,
+          {
+            $flexDirection: "column",
+            $position: "relative",
+            $gap: "1rem",
+            $width: "100%",
+            $height: "auto",
+            $padding: "1.5rem",
+            $flex: "1",
+            $borderBottom: "1px solid #DEDEDE",
+            children: [
+              /* @__PURE__ */ jsx8(Box, { $fontSize: "14px", $color: "#5D5D5D", children: "Plan" }),
+              /* @__PURE__ */ jsxs3(
+                Flex,
+                {
+                  $flexDirection: "column",
+                  $fontSize: "14px",
+                  $color: "#5D5D5D",
+                  $gap: ".5rem",
+                  children: [
+                    /* @__PURE__ */ jsxs3(
+                      Flex,
+                      {
+                        $flexDirection: "row",
+                        $alignItems: "center",
+                        $justifyContent: "space-between",
+                        $fontSize: "14px",
+                        $color: "#5D5D5D",
+                        children: [
+                          /* @__PURE__ */ jsx8(Flex, { $fontSize: "14px", $color: "#5D5D5D", children: "Free" }),
+                          /* @__PURE__ */ jsxs3(Flex, { $fontSize: "12px", $color: "#000000", children: [
+                            "$0/",
+                            pricePeriod
+                          ] })
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsx8(
+                      Box,
+                      {
+                        $width: "100%",
+                        $textAlign: "left",
+                        $opacity: "50%",
+                        $marginBottom: "-.25rem",
+                        $marginTop: "-.25rem",
+                        children: /* @__PURE__ */ jsx8(
+                          Icon2,
+                          {
+                            name: "arrow-down",
+                            style: {
+                              display: "inline-block"
+                            }
+                          }
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs3(
+                      Flex,
+                      {
+                        $flexDirection: "row",
+                        $alignItems: "center",
+                        $justifyContent: "space-between",
+                        $fontSize: "14px",
+                        $color: "#5D5D5D",
+                        children: [
+                          /* @__PURE__ */ jsx8(Flex, { $fontSize: "14px", $color: "#000000", $fontWeight: "600", children: "Professional" }),
+                          /* @__PURE__ */ jsxs3(Flex, { $fontSize: "12px", $color: "#000000", children: [
+                            "$285/",
+                            pricePeriod
+                          ] })
+                        ]
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs3(
+          Flex,
+          {
+            $flexDirection: "column",
+            $position: "relative",
+            $gap: ".75rem",
+            $width: "100%",
+            $height: "auto",
+            $padding: "1.5rem",
+            children: [
+              /* @__PURE__ */ jsxs3(Flex, { $fontSize: "12px", $color: "#5D5D5D", $justifyContent: "space-between", children: [
+                /* @__PURE__ */ jsxs3(Box, { $fontSize: "12px", $color: "#5D5D5D", children: [
+                  "Monthly total:",
+                  " "
+                ] }),
+                /* @__PURE__ */ jsx8(Box, { $fontSize: "12px", $color: "#000000", children: "$285/mo" })
+              ] }),
+              /* @__PURE__ */ jsx8(
+                StyledButton,
+                {
+                  $size: "sm",
+                  onClick: () => {
+                    setCheckoutStage("checkout");
+                  },
+                  children: /* @__PURE__ */ jsxs3(Flex, { $gap: ".5rem", $alignItems: "center", $justifyContent: "center", children: [
+                    /* @__PURE__ */ jsx8("span", { children: "Next: Checkout" }),
+                    /* @__PURE__ */ jsx8(Icon2, { name: "arrow-right" })
+                  ] })
+                }
+              ),
+              /* @__PURE__ */ jsx8(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 = forwardRef(({ children, className, portal, ...rest }, ref) => {
+  const props = resolveDesignProps(rest);
+  const [checkoutStage, setCheckoutStage] = useState5(
+    "plan"
+  );
+  const [planPeriod, setPlanPeriod] = useState5("month");
+  const { data, settings, layout, stripe, setLayout } = useEmbed();
+  const { currentPlan, canChangePlan, availablePlans } = useMemo2(() => {
+    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__ */ jsxs3("div", { ref, className, children: [
+    /* @__PURE__ */ jsx8(
+      Flex,
+      {
+        $flexDirection: "column",
+        $gap: "0.75rem",
+        ...canChangePlan && { $margin: "0 0 0.5rem" },
+        children: props.header.isVisible && currentPlan && /* @__PURE__ */ jsxs3(
+          Flex,
+          {
+            $justifyContent: "space-between",
+            $alignItems: "center",
+            $width: "100%",
+            ...canChangePlan && { $margin: "0 0 1.5rem" },
+            children: [
+              /* @__PURE__ */ jsxs3("div", { children: [
+                /* @__PURE__ */ jsx8(Box, { $margin: "0 0 0.75rem", children: /* @__PURE__ */ jsx8(
+                  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__ */ jsx8(
+                  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__ */ jsxs3(
+                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__ */ jsx8(
+      StyledButton,
+      {
+        onClick: () => {
+          setLayout("checkout");
+        },
+        $size: props.callToAction.buttonSize,
+        $color: props.callToAction.buttonStyle,
+        children: /* @__PURE__ */ jsx8(
+          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" && createPortal(
+      /* @__PURE__ */ jsxs3(OverlayWrapper, { children: [
+        /* @__PURE__ */ jsx8(OverlayHeader, { children: /* @__PURE__ */ jsxs3(Flex, { $gap: "1rem", children: [
+          /* @__PURE__ */ jsxs3(Flex, { $flexDirection: "row", $gap: "0.5rem", $alignItems: "center", children: [
+            /* @__PURE__ */ jsx8(
+              Box,
+              {
+                $width: "15px",
+                $height: "15px",
+                $border: "2px solid #DDDDDD",
+                $borderRadius: "999px",
+                $backgroundColor: "white"
+              }
+            ),
+            /* @__PURE__ */ jsx8(
+              "div",
+              {
+                ...checkoutStage === "plan" && {
+                  style: {
+                    fontWeight: "700"
+                  }
+                },
+                children: "1. Select plan"
+              }
+            ),
+            /* @__PURE__ */ jsx8(
+              Icon2,
+              {
+                name: "chevron-right",
+                style: { fontSize: 16, color: "#D0D0D0" }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs3(Flex, { $flexDirection: "row", $gap: "0.5rem", $alignItems: "center", children: [
+            /* @__PURE__ */ jsx8(
+              Box,
+              {
+                $width: "15px",
+                $height: "15px",
+                $border: "2px solid #DDDDDD",
+                $borderRadius: "999px",
+                $backgroundColor: "white"
+              }
+            ),
+            /* @__PURE__ */ jsx8(
+              "div",
+              {
+                ...checkoutStage === "checkout" && {
+                  style: {
+                    fontWeight: "700"
+                  }
+                },
+                children: "2. Checkout"
+              }
+            ),
+            /* @__PURE__ */ jsx8(
+              Icon2,
+              {
+                name: "chevron-right",
+                style: { fontSize: 16, color: "#D0D0D0" }
+              }
+            )
+          ] })
+        ] }) }),
+        /* @__PURE__ */ jsxs3(Flex, { $flexDirection: "row", $height: "100%", children: [
+          /* @__PURE__ */ jsxs3(
+            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__ */ jsxs3(Fragment, { children: [
+                  /* @__PURE__ */ jsxs3(
+                    Flex,
+                    {
+                      $flexDirection: "column",
+                      $gap: "1rem",
+                      $marginBottom: "1rem",
+                      children: [
+                        /* @__PURE__ */ jsx8(
+                          Text,
+                          {
+                            as: "h1",
+                            id: "select-plan-dialog-label",
+                            $size: 18,
+                            $marginBottom: ".5rem",
+                            children: "Select plan"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx8(
+                          Text,
+                          {
+                            as: "p",
+                            id: "select-plan-dialog-description",
+                            $size: 14,
+                            $weight: 400,
+                            children: "Choose your base plan"
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsx8(
+                    Flex,
+                    {
+                      $flexDirection: "row",
+                      $gap: "1rem",
+                      $flex: "1",
+                      $height: "100%",
+                      children: availablePlans?.map((plan) => {
+                        return /* @__PURE__ */ jsxs3(
+                          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__ */ jsxs3(
+                                Flex,
+                                {
+                                  $flexDirection: "column",
+                                  $position: "relative",
+                                  $gap: "1rem",
+                                  $width: "100%",
+                                  $height: "auto",
+                                  $padding: "1.5rem",
+                                  $borderBottom: "1px solid #DEDEDE",
+                                  children: [
+                                    /* @__PURE__ */ jsx8(Text, { $size: 20, $weight: 600, children: plan?.name }),
+                                    /* @__PURE__ */ jsx8(Text, { $size: 14, children: plan?.description }),
+                                    /* @__PURE__ */ jsxs3(Text, { children: [
+                                      /* @__PURE__ */ jsx8(Box, { $display: "inline-block", $fontSize: ".90rem", children: "$" }),
+                                      /* @__PURE__ */ jsx8(Box, { $display: "inline-block", $fontSize: "1.5rem", children: plan?.price ? plan.price : "350" }),
+                                      /* @__PURE__ */ jsxs3(Box, { $display: "inline-block", $fontSize: ".75rem", children: [
+                                        "/",
+                                        planPeriod
+                                      ] })
+                                    ] }),
+                                    plan?.current && /* @__PURE__ */ jsx8(
+                                      Flex,
+                                      {
+                                        $position: "absolute",
+                                        $right: "1rem",
+                                        $top: "1rem",
+                                        $fontSize: ".75rem",
+                                        $color: "white",
+                                        $backgroundColor: "#194BFB",
+                                        $borderRadius: "999px",
+                                        $padding: ".125rem .85rem",
+                                        children: "Current plan"
+                                      }
+                                    )
+                                  ]
+                                }
+                              ),
+                              /* @__PURE__ */ jsx8(
+                                Flex,
+                                {
+                                  $flexDirection: "column",
+                                  $position: "relative",
+                                  $gap: "0.5rem",
+                                  $flex: "1",
+                                  $width: "100%",
+                                  $height: "auto",
+                                  $padding: "1.5rem",
+                                  children: [{}, {}, {}].map(() => {
+                                    return /* @__PURE__ */ jsxs3(Flex, { $flexShrink: "0", $gap: "1rem", children: [
+                                      /* @__PURE__ */ jsx8(
+                                        IconRound,
+                                        {
+                                          name: "server-search",
+                                          size: "tn",
+                                          colors: ["#00000", "#F5F5F5"]
+                                        }
+                                      ),
+                                      /* @__PURE__ */ jsx8(Flex, { $alignItems: "center", children: /* @__PURE__ */ jsx8(Text, { $size: ".75rem", $color: "#00000", children: "5 Queries/mo" }) })
+                                    ] });
+                                  })
+                                }
+                              ),
+                              /* @__PURE__ */ jsx8(
+                                Flex,
+                                {
+                                  $flexDirection: "column",
+                                  $position: "relative",
+                                  $gap: "1rem",
+                                  $width: "100%",
+                                  $height: "auto",
+                                  $padding: "1.5rem",
+                                  children: plan.current ? /* @__PURE__ */ jsxs3(
+                                    Flex,
+                                    {
+                                      $flexDirection: "row",
+                                      $gap: ".5rem",
+                                      $justifyContent: "center",
+                                      $alignItems: "center",
+                                      children: [
+                                        /* @__PURE__ */ jsx8(
+                                          Icon2,
+                                          {
+                                            name: "check-rounded",
+                                            style: {
+                                              fontSize: 24,
+                                              lineHeight: "1em",
+                                              color: "#194BFB"
+                                            }
+                                          }
+                                        ),
+                                        /* @__PURE__ */ jsx8(
+                                          "span",
+                                          {
+                                            style: {
+                                              fontSize: "1rem",
+                                              color: "#7B7B7B"
+                                            },
+                                            children: "Selected"
+                                          }
+                                        )
+                                      ]
+                                    }
+                                  ) : /* @__PURE__ */ jsx8(
+                                    StyledButton,
+                                    {
+                                      $size: "sm",
+                                      $color: "secondary",
+                                      $variant: "outline",
+                                      onClick: () => {
+                                      },
+                                      children: "Select"
+                                    }
+                                  )
+                                }
+                              )
+                            ]
+                          }
+                        );
+                      })
+                    }
+                  )
+                ] }),
+                checkoutStage === "checkout" && /* @__PURE__ */ jsx8(CheckoutForm, {})
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx8(
+            OverlaySideBar,
+            {
+              pricePeriod: planPeriod,
+              setPricePeriod: setPlanPeriod,
+              setCheckoutStage
+            }
+          )
+        ] })
+      ] }),
+      portal || document.body
+    )
+  ] });
+});
+// src/components/elements/included-features/IncludedFeatures.tsx
+import { forwardRef as forwardRef2, useMemo as useMemo3 } from "react";
+import { jsx as jsx9, jsxs as jsxs4 } from "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 = forwardRef2(({ className, ...rest }, ref) => {
+  const props = resolveDesignProps2(rest);
+  const { data, settings } = useEmbed();
+  const features = useMemo3(() => {
+    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__ */ jsxs4(Flex, { ref, className, $flexDirection: "column", $gap: "1.5rem", children: [
+    props.header.isVisible && /* @__PURE__ */ jsx9(Box, { children: /* @__PURE__ */ jsx9(
+      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__ */ jsxs4(
+            Flex,
+            {
+              $flexWrap: "wrap",
+              $justifyContent: "space-between",
+              $alignItems: "center",
+              $gap: "1rem",
+              children: [
+                /* @__PURE__ */ jsxs4(Flex, { $gap: "1rem", children: [
+                  props.icons.isVisible && feature?.icon && /* @__PURE__ */ jsx9(
+                    IconRound,
+                    {
+                      name: feature.icon,
+                      size: "sm",
+                      colors: [
+                        settings.theme.card.background,
+                        settings.theme.primary
+                      ]
+                    }
+                  ),
+                  feature?.name && /* @__PURE__ */ jsx9(Flex, { $alignItems: "center", children: /* @__PURE__ */ jsx9(
+                    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__ */ jsxs4(Box, { $textAlign: "right", children: [
+                  props.entitlement.isVisible && /* @__PURE__ */ jsx9(
+                    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__ */ jsx9(
+                    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
+import { forwardRef as forwardRef3, useMemo as useMemo4 } from "react";
+import { jsx as jsx10, jsxs as jsxs5 } from "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 = forwardRef3(({ className, ...rest }, ref) => {
+  const props = resolveDesignProps3(rest);
+  const { data, settings } = useEmbed();
+  const features = useMemo4(() => {
+    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__ */ jsx10(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__ */ jsxs5(Flex, { $gap: "1.5rem", children: [
+          props.icon.isVisible && feature?.icon && /* @__PURE__ */ jsx10(Box, { $flexShrink: "0", children: /* @__PURE__ */ jsx10(IconRound, { name: feature.icon, size: "sm" }) }),
+          /* @__PURE__ */ jsxs5(Box, { $flexGrow: "1", children: [
+            /* @__PURE__ */ jsxs5(Flex, { children: [
+              feature?.name && /* @__PURE__ */ jsxs5(Box, { $flexGrow: "1", children: [
+                /* @__PURE__ */ jsx10(
+                  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__ */ jsx10(
+                  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__ */ jsxs5(Box, { $textAlign: "right", children: [
+                props.allocation.isVisible && /* @__PURE__ */ jsx10(
+                  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__ */ jsx10(
+                  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__ */ jsx10(Box, { children: /* @__PURE__ */ jsx10(
+              ProgressBar,
+              {
+                progress: usage / allocation * 100,
+                value: usage,
+                total: allocation,
+                color: "blue"
+              }
+            ) })
+          ] })
+        ] }, index)
+      ];
+    },
+    []
+  ) });
+});
+// src/components/elements/upcoming-bill/UpcomingBill.tsx
+import { forwardRef as forwardRef4, useMemo as useMemo5 } from "react";
+import { jsx as jsx11, jsxs as jsxs6 } from "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 = forwardRef4(({ className, ...rest }, ref) => {
+  const props = resolveDesignProps4(rest);
+  const { data, settings, stripe } = useEmbed();
+  const { latestInvoice } = useMemo5(() => {
+    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__ */ jsxs2(Flex, { $justifyContent: "space-between", $margin: "0 0 1.5rem", children: [
-    /* @__PURE__ */ jsxs2(Flex, { $gap: `${16 / 16}rem`, children: [
-      /* @__PURE__ */ jsx8(IconRound, { name: feature.icon, size: "sm" }),
-      /* @__PURE__ */ jsx8(Flex, { $alignItems: "center", children: /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsxs6("div", { ref, className, children: [
+    props.header.isVisible && latestInvoice.dueDate && /* @__PURE__ */ jsx11(
+      Flex,
+      {
+        $justifyContent: "space-between",
+        $alignItems: "center",
+        $margin: "0 0 0.75rem",
+        children: /* @__PURE__ */ jsxs6(
+          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__ */ jsxs6(Flex, { $justifyContent: "space-between", $alignItems: "start", $gap: "1rem", children: [
+      props.price.isVisible && /* @__PURE__ */ jsx11(Flex, { $alignItems: "end", $flexGrow: "1", children: /* @__PURE__ */ jsxs6(
+        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__ */ jsx11(
+              Text,
+              {
+                $size: "0.75em",
+                $color: settings.theme.typography[props.price.fontStyle].color,
+                children: "$"
+              }
+            ),
+            latestInvoice.amountDue
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsx11(Box, { $maxWidth: "10rem", $lineHeight: "1", $textAlign: "right", children: /* @__PURE__ */ jsx11(
         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__ */ jsx8(Flex, { $alignItems: "center", children: /* @__PURE__ */ jsxs2(Text, { as: Box, $font: "Public Sans", $weight: "500", $align: "right", children: [
-      usage,
-      " ",
-      feature.featureType,
-      " used"
-    ] }) })
+    ] })
   ] });
+});
+// src/components/elements/payment-method/PaymentMethod.tsx
+import { forwardRef as forwardRef5, useMemo as useMemo6 } from "react";
+import { createPortal as createPortal2 } from "react-dom";
+import { jsx as jsx12, jsxs as jsxs7 } from "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 = forwardRef5(({ children, className, portal, ...rest }, ref) => {
+  const props = resolveDesignProps5(rest);
+  const { data, settings, stripe, layout, setLayout } = useEmbed();
+  const paymentMethod = useMemo6(() => {
+    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__ */ jsx8(Flex, { $justifyContent: "space-between", $margin: "0 0 1.5rem", children: /* @__PURE__ */ jsxs2(Flex, { $gap: `${16 / 16}rem`, children: [
-    feature.icon && /* @__PURE__ */ jsx8(IconRound, { name: feature.icon, size: "sm" }),
-    /* @__PURE__ */ jsx8(Flex, { $alignItems: "center", children: /* @__PURE__ */ jsx8(
-      Text,
+  return /* @__PURE__ */ jsxs7("div", { ref, className, children: [
+    props.header.isVisible && /* @__PURE__ */ jsxs7(
+      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__ */ jsx12(
+            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__ */ jsx12(
+            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] = useState4(designPropsWithDefaults.count);
-  const isExpanded = useMemo2(
-    () => numVisible > designPropsWithDefaults.count,
-    [numVisible, designPropsWithDefaults.count]
-  );
-  const features = useMemo2(() => {
-    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__ */ jsxs7(
+      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__ */ jsxs7(Text, { $font: settings.theme.typography.text.fontFamily, $size: 14, children: [
+            "\u{1F4B3} Card ending in ",
+            paymentMethod.cardLast4
+          ] }),
+          props.functions.allowEdit && /* @__PURE__ */ jsx12(
+            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" && createPortal2(
+      /* @__PURE__ */ jsxs7(OverlayWrapper, { size: "md", children: [
+        /* @__PURE__ */ jsx12(OverlayHeader, { children: /* @__PURE__ */ jsx12(Box, { $fontWeight: "600", children: "Edit payment method" }) }),
+        /* @__PURE__ */ jsxs7(
+          Flex,
+          {
+            $flexDirection: "column",
+            $padding: "2.5rem",
+            $height: "100%",
+            $gap: "1.5rem",
+            children: [
+              /* @__PURE__ */ jsx12(
+                Flex,
+                {
+                  $flexDirection: "column",
+                  $gap: "1rem",
+                  $backgroundColor: "#FBFBFB",
+                  $borderRadius: "0 0 0.5rem 0.5rem",
+                  $flex: "1",
+                  $height: "100%",
+                  children: /* @__PURE__ */ jsxs7(Flex, { $flexDirection: "column", $height: "100%", children: [
+                    /* @__PURE__ */ jsx12(
+                      Box,
+                      {
+                        $fontSize: "18px",
+                        $marginBottom: "1.5rem",
+                        $display: "inline-block",
+                        $width: "100%",
+                        children: "Default"
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs7(Flex, { $gap: "1rem", children: [
+                      /* @__PURE__ */ jsx12(
+                        Flex,
+                        {
+                          $alignItems: "center",
+                          $padding: ".5rem 1rem",
+                          $border: "1px solid #E2E5E9",
+                          $borderRadius: ".5rem",
+                          $backgroundColor: "#ffffff",
+                          $flexDirection: "row",
+                          $gap: "1rem",
+                          $width: "100%",
+                          children: /* @__PURE__ */ jsxs7(
+                            Flex,
+                            {
+                              $flexDirection: "row",
+                              $justifyContent: "space-between",
+                              $flex: "1",
+                              children: [
+                                /* @__PURE__ */ jsxs7(
+                                  Flex,
+                                  {
+                                    $flexDirection: "row",
+                                    $alignItems: "center",
+                                    $gap: "1rem",
+                                    children: [
+                                      /* @__PURE__ */ jsx12(Box, { $display: "inline-block", children: /* @__PURE__ */ jsx12(
+                                        "svg",
+                                        {
+                                          viewBox: "0 0 24 16",
+                                          fill: "none",
+                                          xmlns: "http://www.w3.org/2000/svg",
+                                          width: "26px",
+                                          height: "auto",
+                                          children: /* @__PURE__ */ jsxs7("g", { children: [
+                                            /* @__PURE__ */ jsx12(
+                                              "rect",
+                                              {
+                                                stroke: "#DDD",
+                                                fill: "#FFF",
+                                                x: ".25",
+                                                y: ".25",
+                                                width: "23",
+                                                height: "15.5",
+                                                rx: "2"
+                                              }
+                                            ),
+                                            /* @__PURE__ */ jsx12(
+                                              "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__ */ jsx12(Box, { $whiteSpace: "nowrap", children: "Visa **** 4242" })
+                                    ]
+                                  }
+                                ),
+                                /* @__PURE__ */ jsx12(Flex, { $alignItems: "center", children: /* @__PURE__ */ jsx12(Box, { $fontSize: "12px", $color: "#5D5D5D", children: "Expires: 3/30" }) })
+                              ]
+                            }
+                          )
+                        }
+                      ),
+                      /* @__PURE__ */ jsx12(Flex, { children: /* @__PURE__ */ jsx12(
+                        StyledButton,
+                        {
+                          $size: "sm",
+                          $color: "secondary",
+                          $variant: "outline",
+                          style: {
+                            whiteSpace: "nowrap",
+                            paddingLeft: "1rem",
+                            paddingRight: "1rem"
+                          },
+                          children: "Edit"
+                        }
+                      ) })
+                    ] })
+                  ] })
+                }
+              ),
+              /* @__PURE__ */ jsx12(
+                Flex,
+                {
+                  $flexDirection: "column",
+                  $gap: "1rem",
+                  $backgroundColor: "#FBFBFB",
+                  $borderRadius: "0 0 0.5rem 0.5rem",
+                  $flex: "1",
+                  $height: "100%",
+                  children: /* @__PURE__ */ jsxs7(Flex, { $flexDirection: "column", $height: "100%", children: [
+                    /* @__PURE__ */ jsx12(
+                      Box,
+                      {
+                        $fontSize: "18px",
+                        $marginBottom: "1.5rem",
+                        $display: "inline-block",
+                        $width: "100%",
+                        children: "Others"
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs7(Flex, { $gap: "1rem", children: [
+                      /* @__PURE__ */ jsx12(
+                        Flex,
+                        {
+                          $alignItems: "center",
+                          $padding: ".5rem 1rem",
+                          $border: "1px solid #E2E5E9",
+                          $borderRadius: ".5rem",
+                          $backgroundColor: "#ffffff",
+                          $flexDirection: "row",
+                          $gap: "1rem",
+                          $width: "100%",
+                          children: /* @__PURE__ */ jsxs7(
+                            Flex,
+                            {
+                              $flexDirection: "row",
+                              $justifyContent: "space-between",
+                              $flex: "1",
+                              children: [
+                                /* @__PURE__ */ jsxs7(
+                                  Flex,
+                                  {
+                                    $flexDirection: "row",
+                                    $alignItems: "center",
+                                    $gap: "1rem",
+                                    children: [
+                                      /* @__PURE__ */ jsx12(Box, { $display: "inline-block", children: /* @__PURE__ */ jsx12(
+                                        "svg",
+                                        {
+                                          viewBox: "0 0 24 16",
+                                          fill: "none",
+                                          xmlns: "http://www.w3.org/2000/svg",
+                                          width: "26px",
+                                          height: "auto",
+                                          children: /* @__PURE__ */ jsxs7("g", { children: [
+                                            /* @__PURE__ */ jsx12(
+                                              "rect",
+                                              {
+                                                stroke: "#DDD",
+                                                fill: "#FFF",
+                                                x: ".25",
+                                                y: ".25",
+                                                width: "23",
+                                                height: "15.5",
+                                                rx: "2"
+                                              }
+                                            ),
+                                            /* @__PURE__ */ jsx12(
+                                              "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__ */ jsx12(Box, { $whiteSpace: "nowrap", children: "Visa **** 2929" })
+                                    ]
+                                  }
+                                ),
+                                /* @__PURE__ */ jsx12(Flex, { $alignItems: "center", children: /* @__PURE__ */ jsx12(Box, { $fontSize: "12px", $color: "#5D5D5D", children: "Expires: 3/30" }) })
+                              ]
+                            }
+                          )
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs7(Flex, { $gap: "1rem", children: [
+                        /* @__PURE__ */ jsx12(
+                          StyledButton,
+                          {
+                            $size: "sm",
+                            $color: "secondary",
+                            $variant: "outline",
+                            style: {
+                              whiteSpace: "nowrap",
+                              paddingLeft: "1rem",
+                              paddingRight: "1rem"
+                            },
+                            children: "Make Default"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx12(
+                          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
+import { forwardRef as forwardRef6, useMemo as useMemo7 } from "react";
+import { jsx as jsx13, jsxs as jsxs8 } from "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__ */ jsxs2("div", { className, children: [
-    /* @__PURE__ */ jsx8(Box, { $margin: "0 0 1.5rem", children: /* @__PURE__ */ jsx8(
+}
+var Invoices = forwardRef6(({ className, ...rest }, ref) => {
+  const props = resolveDesignProps6(rest);
+  const { settings } = useEmbed();
+  const { invoices } = useMemo7(() => {
+    return {
+      invoices: [
+        {
+          date: toPrettyDate(/* @__PURE__ */ new Date("2024-05-12")),
+          amount: 200
+        },
+        {
+          date: toPrettyDate(/* @__PURE__ */ new Date("2024-04-12")),
+          amount: 200
+        }
+      ]
+    };
+  }, []);
+  return /* @__PURE__ */ jsx13("div", { ref, className, children: /* @__PURE__ */ jsxs8(Flex, { $flexDirection: "column", $gap: "1rem", children: [
+    props.header.isVisible && /* @__PURE__ */ jsx13(Flex, { $justifyContent: "space-between", $alignItems: "center", children: /* @__PURE__ */ jsx13(
       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__ */ jsx8(AddonFeature, { ...feature }, index)];
-      }
-      if (feature.allocationType === "numeric" || feature.allocationType === "trait" || feature.allocationType === "unlimited") {
-        if (typeof feature.allocation === "number") {
-          return [...acc, /* @__PURE__ */ jsx8(LimitFeature, { ...feature }, index)];
-        }
-        return [...acc, /* @__PURE__ */ jsx8(UsageFeature, { ...feature }, index)];
-      }
-      return acc;
-    }, []),
-    /* @__PURE__ */ jsxs2(Flex, { $alignItems: "center", $gap: `${4 / 16}rem`, children: [
-      /* @__PURE__ */ jsx8(
-        Icon2,
+    /* @__PURE__ */ jsx13(Flex, { $flexDirection: "column", $gap: "0.5rem", children: invoices.slice(
+      0,
+      props.limit.isVisible && props.limit.number || invoices.length
+    ).map(({ date, amount }, index) => {
+      return /* @__PURE__ */ jsxs8(Flex, { $justifyContent: "space-between", children: [
+        props.date.isVisible && /* @__PURE__ */ jsx13(
+          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__ */ jsxs8(
+          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__ */ jsxs8(Flex, { $alignItems: "center", $gap: "0.5rem", children: [
+      /* @__PURE__ */ jsx13(Icon2, { name: "chevron-down", style: { color: "#D0D0D0" } }),
+      /* @__PURE__ */ jsx13(
+        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__ */ jsx8(Button2, { onClick: resize, color: "blue", variant: "link", children: /* @__PURE__ */ jsx8(Text, { $weight: "500", children: "See all" }) })
-    ] })
-  ] });
-};
-// src/components/elements/invoices/Invoices.tsx
-import { jsx as jsx9, jsxs as jsxs3 } from "react/jsx-runtime";
-var Invoices = () => {
-  return /* @__PURE__ */ jsx9("div", { className: "p-8", children: /* @__PURE__ */ jsxs3("div", { className: "relative z-[1] bg-white flex flex-col space-y-4", children: [
-    /* @__PURE__ */ jsx9("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ jsx9("div", { className: "font-bold text-base", children: "Invoices" }) }),
-    /* @__PURE__ */ jsxs3("div", { className: "flex flex-col space-y-2", children: [
-      /* @__PURE__ */ jsxs3("div", { className: "flex justify-between text-sm", children: [
-        /* @__PURE__ */ jsx9("span", { className: "text-blue-400", children: "May 12, 2024" }),
-        /* @__PURE__ */ jsx9("span", { className: "text-gray-400", children: "$315.00" })
-      ] }),
-      /* @__PURE__ */ jsxs3("div", { className: "flex justify-between text-sm", children: [
-        /* @__PURE__ */ jsx9("span", { className: "text-blue-400", children: "May 12, 2024" }),
-        /* @__PURE__ */ jsx9("span", { className: "text-gray-400", children: "$315.00" })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs3("div", { className: "flex flex-row space-x-2 items-center", children: [
-      /* @__PURE__ */ jsx9(Icon2, { name: "chevron-down", className: "text-gray-400 leading-none" }),
-      /* @__PURE__ */ jsx9("span", { className: "text-blue-400 font-medium font-display text-sm", children: "See all" })
+      )
     ] })
   ] }) });
-};
+});
-// src/components/elements/next-bill-due/NextBillDue.tsx
-import { jsx as jsx10, jsxs as jsxs4 } from "react/jsx-runtime";
-var NextBillDue = () => {
-  return /* @__PURE__ */ jsxs4("div", { className: "bg-white p-8", children: [
-    /* @__PURE__ */ jsx10("div", { className: "flex items-center justify-between mb-3", children: /* @__PURE__ */ jsx10("div", { className: "font-bold text-base", children: "Next bill due June 12, 2024" }) }),
-    /* @__PURE__ */ jsxs4("div", { className: "flex items-center leading-none justify-between", children: [
-      /* @__PURE__ */ jsxs4("div", { className: "flex flex-row items-end flex-1   font-medium font-display text-gray-700", children: [
-        /* @__PURE__ */ jsx10("div", { className: "text-lg mr-0.5 translate-y-[3px]", children: "$" }),
-        /* @__PURE__ */ jsx10("div", { className: "text-3xl", children: "315.00" })
-      ] }),
-      /* @__PURE__ */ jsxs4("div", { className: "text-gray-400 text-xs max-w-[160px]", children: [
-        "Estimated monthly bill, ",
-        /* @__PURE__ */ jsx10("br", {}),
-        "Contract ends 5/12/24."
-      ] })
-    ] })
-  ] });
-};
+// src/components/embed/ComponentTree.tsx
+import { useEffect as useEffect4, useState as useState6 } from "react";
-// src/components/elements/payment-method/PaymentMethod.tsx
-import { jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
-var PaymentMethod = () => {
-  return /* @__PURE__ */ jsx11("div", { className: "relative px-8 py-8 bg-white", children: /* @__PURE__ */ jsxs5("div", { className: "relative z-[1] bg-white", children: [
-    /* @__PURE__ */ jsxs5("div", { className: "flex items-center justify-between mb-4", children: [
-      /* @__PURE__ */ jsx11("div", { className: "font-bold text-base", children: "Payment Method" }),
-      /* @__PURE__ */ jsx11("div", { className: "text-xs text-red-400", children: "Expires in 4 mo" })
-    ] }),
-    /* @__PURE__ */ jsxs5("div", { className: "flex flex-row justify-between bg-gray-50 text-sm px-4 py-1.5 rounded-full", children: [
-      /* @__PURE__ */ jsx11("div", { className: "", children: "\u{1F4B3} Card ending 4512" }),
-      /* @__PURE__ */ jsx11("span", { className: "text-blue-400", children: "Edit" })
-    ] })
-  ] }) });
-};
+// src/components/embed/renderer.ts
+import { createElement } from "react";
-// src/components/elements/plan-manager/PlanManager.tsx
-import { useMemo as useMemo3 } from "react";
+// src/components/layout/root/Root.tsx
+import { forwardRef as forwardRef7 } from "react";
+import { jsx as jsx14 } from "react/jsx-runtime";
+var Root = forwardRef7(
+  (props, ref) => {
+    return /* @__PURE__ */ jsx14("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
+import { forwardRef as forwardRef8 } from "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
+import { jsx as jsx15 } from "react/jsx-runtime";
+var Viewport = forwardRef8(
+  ({ children, ...props }, ref) => {
+    const { settings, layout } = useEmbed();
+    return /* @__PURE__ */ jsx15(
+      StyledViewport,
+      {
+        ref,
+        $numberOfColumns: settings.theme.numberOfColumns,
+        ...props,
+        children: layout === "disabled" ? /* @__PURE__ */ jsx15("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
+import { forwardRef as forwardRef10 } from "react";
+// src/components/layout/card/Card.tsx
+import { forwardRef as forwardRef9 } from "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
-import { Fragment, jsx as jsx12, jsxs as jsxs6 } from "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 = useMemo3(() => {
-    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__ */ jsxs6("div", { className, children: [
-    /* @__PURE__ */ jsxs6(Flex, { $flexDirection: "column", $gap: `${12 / 16}rem`, $margin: "0 0 3rem", children: [
-      designPropsWithDefaults.header.isVisible && plan && /* @__PURE__ */ jsxs6(
-        Flex,
-        {
-          $justifyContent: "space-between",
-          $alignItems: "center",
-          $width: "100%",
-          $margin: "0 0 1.5rem",
-          children: [
-            /* @__PURE__ */ jsxs6("div", { children: [
-              /* @__PURE__ */ jsx12(Box, { $margin: "0 0 0.75rem", children: /* @__PURE__ */ jsx12(
-                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__ */ jsx12(
-                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__ */ jsxs6(
-              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__ */ jsxs6(Fragment, { children: [
-        /* @__PURE__ */ jsx12(Text, { $size: `${15 / 16}rem`, $weight: "500", children: "Add-Ons" }),
-        /* @__PURE__ */ jsx12(Box, { $width: "100%", $margin: "0 0 1rem", children: addons.map((addon, index) => /* @__PURE__ */ jsxs6(
-          Flex,
-          {
-            $justifyContent: "space-between",
-            $alignItems: "center",
-            $width: "100%",
-            children: [
-              /* @__PURE__ */ jsx12(Text, { $font: "Manrope", $size: `${18 / 16}rem`, $weight: "800", children: addon.name }),
-              addon.price >= 0 && /* @__PURE__ */ jsxs6(Text, { $weight: "500", children: [
-                "$",
-                addon.price,
-                "/mo"
-              ] })
-            ]
-          },
-          index
-        )) })
-      ] })
-    ] }),
-    designPropsWithDefaults.callToAction.isVisible && /* @__PURE__ */ jsx12(
-      Button3,
+// src/components/layout/card/Card.tsx
+import { jsx as jsx16 } from "react/jsx-runtime";
+var Card = forwardRef9(
+  ({ children, className }, ref) => {
+    const { settings } = useEmbed();
+    return /* @__PURE__ */ jsx16(
+      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
+import { jsx as jsx17 } from "react/jsx-runtime";
+var Column = forwardRef10(
+  ({ children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx17(StyledColumn, { ref, ...props, children: /* @__PURE__ */ jsx17(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;
@@ -7813,14 +10296,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 createElement(
       component,
       {
-        ...resolvedProps,
-        ...Object.keys(custom).length > 0 && { custom },
+        className,
+        ...component !== "div" && { resolvedProps },
+        ...component !== "div" && Object.keys(custom).length > 0 && { custom },
         key: index
       },
       resolvedChildren
@@ -7829,35 +10313,36 @@ function createRenderer(options) {
 }
 // src/components/embed/ComponentTree.tsx
-import { Fragment as Fragment2, jsx as jsx13 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx18 } from "react/jsx-runtime";
 var ComponentTree = () => {
-  const [children, setChildren] = useState5("Loading");
+  const [children, setChildren] = useState6("Loading");
   const { error, nodes } = useEmbed();
   useEffect4(() => {
     const renderer = createRenderer();
     setChildren(nodes.map(renderer));
   }, [nodes]);
   if (error) {
-    return /* @__PURE__ */ jsx13("div", { children: error.message });
+    return /* @__PURE__ */ jsx18("div", { children: error.message });
   }
-  return /* @__PURE__ */ jsx13(Fragment2, { children });
+  return /* @__PURE__ */ jsx18(Fragment2, { children });
 };
 // src/components/embed/Embed.tsx
-import { jsx as jsx14 } from "react/jsx-runtime";
-var SchematicEmbed = ({ id, accessToken }) => {
+import { jsx as jsx19 } from "react/jsx-runtime";
+var SchematicEmbed = ({ id, accessToken, apiConfig }) => {
   if (accessToken?.length === 0) {
-    return /* @__PURE__ */ jsx14("div", { children: "Please provide an access token." });
+    return /* @__PURE__ */ jsx19("div", { children: "Please provide an access token." });
   }
   if (!accessToken?.startsWith("token_")) {
-    return /* @__PURE__ */ jsx14("div", { children: 'Invalid access token; your temporary access token will start with "token_".' });
+    return /* @__PURE__ */ jsx19("div", { children: 'Invalid access token; your temporary access token will start with "token_".' });
   }
-  return /* @__PURE__ */ jsx14(EmbedProvider, { id, accessToken, children: /* @__PURE__ */ jsx14(ComponentTree, {}) });
+  return /* @__PURE__ */ jsx19(EmbedProvider, { id, accessToken, apiConfig, children: /* @__PURE__ */ jsx19(ComponentTree, {}) });
 };
 export {
   Box,
   Button2 as Button,
   Card,
+  Column,
   EmbedContext,
   EmbedProvider,
   Flex,
@@ -7865,14 +10350,22 @@ export {
   IconRound,
   IncludedFeatures,
   Invoices,
-  NextBillDue,
+  MeteredFeatures,
+  OverlayHeader,
+  OverlaySideBar,
+  OverlayWrapper,
   PaymentMethod,
   PlanManager,
   ProgressBar,
+  Root,
   Schematic,
   SchematicEmbed,
   SchematicProvider,
   Text,
+  UpcomingBill,
+  Viewport,
+  defaultSettings,
+  defaultTheme,
   useEmbed,
   useSchematic,
   useSchematicContext,