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

package/dist/schematic-react.cjs.js

@@ -140,7 +140,7 @@ __export(src_exports, {
   IconRound: () => IconRound,
   IncludedFeatures: () => IncludedFeatures,
   Invoices: () => Invoices,
-  NextBillDue: () => NextBillDue,
+  MeteredFeatures: () => MeteredFeatures,
   PaymentMethod: () => PaymentMethod,
   PlanManager: () => PlanManager,
   ProgressBar: () => ProgressBar,
@@ -148,6 +148,9 @@ __export(src_exports, {
   SchematicEmbed: () => SchematicEmbed,
   SchematicProvider: () => SchematicProvider,
   Text: () => Text,
+  UpcomingBill: () => UpcomingBill,
+  defaultSettings: () => defaultSettings,
+  defaultTheme: () => defaultTheme,
   useEmbed: () => useEmbed,
   useSchematic: () => useSchematic,
   useSchematicContext: () => useSchematicContext,
@@ -5906,6 +5909,107 @@ 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/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 {
+    action: value["action"],
+    new_plan_id: value["newPlanId"],
+    new_price_id: value["newPriceId"]
+  };
+}
+
+// src/api/models/CheckoutResponse.ts
+function CheckoutResponseFromJSON(json) {
+  return CheckoutResponseFromJSONTyped(json, false);
+}
+function CheckoutResponseFromJSONTyped(json, ignoreDiscriminator) {
+  if (json == null) {
+    return json;
+  }
+  return {
+    data: BillingSubscriptionResponseDataFromJSON(json["data"]),
+    params: json["params"]
+  };
+}
+
 // src/api/models/PreviewObject.ts
 function PreviewObjectFromJSON(json) {
   return PreviewObjectFromJSONTyped(json, false);
@@ -6008,7 +6112,7 @@ function CompanyDetailResponseDataFromJSONTyped(json, ignoreDiscriminator) {
     return json;
   }
   return {
-    addOns: json["add_ons"].map(PreviewObjectFromJSON),
+    addOns: json["add_ons"].map(BillingPlanFromJSON),
     createdAt: new Date(json["created_at"]),
     entityTraits: json["entity_traits"].map(
       EntityTraitDetailResponseDataFromJSON
@@ -6019,7 +6123,7 @@ function CompanyDetailResponseDataFromJSONTyped(json, ignoreDiscriminator) {
     lastSeenAt: json["last_seen_at"] == null ? void 0 : new Date(json["last_seen_at"]),
     logoUrl: json["logo_url"] == null ? void 0 : json["logo_url"],
     name: json["name"],
-    plan: json["plan"] == null ? void 0 : PreviewObjectFromJSON(json["plan"]),
+    plan: json["plan"] == null ? void 0 : BillingPlanFromJSON(json["plan"]),
     plans: json["plans"].map(PreviewObjectFromJSON),
     traits: json["traits"] == null ? void 0 : json["traits"],
     updatedAt: new Date(json["updated_at"]),
@@ -6027,25 +6131,6 @@ function CompanyDetailResponseDataFromJSONTyped(json, ignoreDiscriminator) {
   };
 }
 
-// src/api/models/ComponentResponseData.ts
-function ComponentResponseDataFromJSON(json) {
-  return ComponentResponseDataFromJSONTyped(json, false);
-}
-function ComponentResponseDataFromJSONTyped(json, ignoreDiscriminator) {
-  if (json == null) {
-    return json;
-  }
-  return {
-    ast: json["ast"],
-    createdAt: new Date(json["created_at"]),
-    id: json["id"],
-    name: json["name"],
-    state: json["state"],
-    type: json["type"],
-    updatedAt: new Date(json["updated_at"])
-  };
-}
-
 // src/api/models/EventSummaryResponseData.ts
 function EventSummaryResponseDataFromJSON(json) {
   return EventSummaryResponseDataFromJSONTyped(json, false);
@@ -6247,13 +6332,91 @@ 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/ComponentResponseData.ts
+function ComponentResponseDataFromJSON(json) {
+  return ComponentResponseDataFromJSONTyped(json, false);
+}
+function ComponentResponseDataFromJSONTyped(json, ignoreDiscriminator) {
+  if (json == null) {
+    return json;
+  }
+  return {
+    ast: json["ast"] == null ? void 0 : json["ast"],
+    createdAt: new Date(json["created_at"]),
+    id: json["id"],
+    name: json["name"],
+    state: json["state"],
+    type: json["type"],
     updatedAt: new Date(json["updated_at"])
   };
 }
@@ -6294,6 +6457,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"],
+    publishableKey: json["publishable_key"]
+  };
+}
+
 // src/api/models/ComponentHydrateResponseData.ts
 function ComponentHydrateResponseDataFromJSON(json) {
   return ComponentHydrateResponseDataFromJSONTyped(json, false);
@@ -6303,9 +6480,13 @@ 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"])
   };
 }
 
@@ -6323,8 +6504,50 @@ function HydrateComponentResponseFromJSONTyped(json, ignoreDiscriminator) {
   };
 }
 
-// src/api/apis/ComponentsApi.ts
-var ComponentsApi = class extends BaseAPI {
+// src/api/apis/CheckoutApi.ts
+var CheckoutApi = class extends BaseAPI {
+  /**
+   * Checkout
+   */
+  async checkoutRaw(requestParameters, initOverrides) {
+    if (requestParameters["changeSubscriptionRequestBody"] == null) {
+      throw new RequiredError(
+        "changeSubscriptionRequestBody",
+        'Required parameter "changeSubscriptionRequestBody" was null or undefined when calling checkout().'
+      );
+    }
+    const queryParameters = {};
+    const headerParameters = {};
+    headerParameters["Content-Type"] = "application/json";
+    if (this.configuration && this.configuration.apiKey) {
+      headerParameters["X-Schematic-Api-Key"] = await this.configuration.apiKey(
+        "X-Schematic-Api-Key"
+      );
+    }
+    const response = await this.request(
+      {
+        path: `/checkout`,
+        method: "POST",
+        headers: headerParameters,
+        query: queryParameters,
+        body: ChangeSubscriptionRequestBodyToJSON(
+          requestParameters["changeSubscriptionRequestBody"]
+        )
+      },
+      initOverrides
+    );
+    return new JSONApiResponse(
+      response,
+      (jsonValue) => CheckoutResponseFromJSON(jsonValue)
+    );
+  }
+  /**
+   * Checkout
+   */
+  async checkout(requestParameters, initOverrides) {
+    const response = await this.checkoutRaw(requestParameters, initOverrides);
+    return await response.value();
+  }
   /**
    * Hydrate component
    */
@@ -6371,30 +6594,73 @@ var ComponentsApi = class extends BaseAPI {
   }
 };
 
-// src/components/theme.ts
-var light = {
-  text: "#000000",
-  textDetail: "#767676",
-  background: "#FFFFFF",
-  button: "#000000"
-};
-var dark = {
-  text: "#FFFFFF",
-  textDetail: "#A5A5A5",
-  background: "#000000",
-  button: "#194BFB"
-};
-
 // src/context/embed.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
-var defaultSettings = {
-  theme: "light",
+var defaultTheme = {
+  numberOfColumns: 2,
   sectionLayout: "merged",
-  borderWidth: 0,
-  borderColor: "#E9E9E9",
-  borderRadius: 10,
-  boxShadow: "none",
-  boxPadding: 50
+  colorMode: "light",
+  primary: "#000000",
+  secondary: "#000000",
+  card: {
+    background: "#FFFFFF",
+    borderRadius: 10,
+    hasShadow: true,
+    padding: 45
+  },
+  typography: {
+    heading1: {
+      fontFamily: "Manrope",
+      fontSize: 37,
+      fontWeight: 800,
+      color: "#000000"
+    },
+    heading2: {
+      fontFamily: "Manrope",
+      fontSize: 29,
+      fontWeight: 800,
+      color: "#000000"
+    },
+    heading3: {
+      fontFamily: "Manrope",
+      fontSize: 20,
+      fontWeight: 600,
+      color: "#000000"
+    },
+    heading4: {
+      fontFamily: "Manrope",
+      fontSize: 18,
+      fontWeight: 800,
+      color: "#000000"
+    },
+    heading5: {
+      fontFamily: "Public Sans",
+      fontSize: 17,
+      fontWeight: 500,
+      color: "#000000"
+    },
+    heading6: {
+      fontFamily: "Public Sans",
+      fontSize: 14,
+      fontWeight: 400,
+      color: "#8A8A8A"
+    },
+    text: {
+      fontFamily: "Public Sans",
+      fontSize: 16,
+      fontWeight: 400,
+      color: "#000000"
+    },
+    link: {
+      fontFamily: "Inter",
+      fontSize: 16,
+      fontWeight: 400,
+      color: "#194BFB"
+    }
+  }
+};
+var defaultSettings = {
+  theme: defaultTheme
 };
 function isEditorState(obj) {
   return Object.entries(obj).every(([key, value]) => {
@@ -6421,11 +6687,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) {
@@ -6433,7 +6699,7 @@ async function fetchComponent(id, accessToken) {
     const json = inflate_1(Uint8Array.from(Object.values(compressed)), {
       to: "string"
     });
-    const ast = getEditorState(json);
+    const ast = getEditorState(JSON.stringify(json));
     if (ast) {
       Object.assign(settings, ast.ROOT.props);
       nodes.push(...parseEditorState(ast));
@@ -6448,61 +6714,92 @@ async function fetchComponent(id, accessToken) {
 var EmbedContext = (0, import_react2.createContext)({
   data: {},
   nodes: [],
-  settings: {},
+  settings: { ...defaultSettings },
+  layout: "portal",
+  error: void 0,
   setData: () => {
   },
-  setSettings: () => {
-  },
   updateSettings: () => {
+  },
+  setLayout: () => {
   }
 });
 var EmbedProvider = ({
   id,
   accessToken,
+  apiConfig,
   children
 }) => {
-  const [state, setState] = (0, import_react2.useState)({
-    data: {},
-    nodes: [],
-    settings: { ...defaultSettings },
-    setData: () => {
-    },
-    setSettings: () => {
-    },
-    updateSettings: () => {
-    }
+  const styleRef = (0, import_react2.useRef)(null);
+  const [state, setState] = (0, import_react2.useState)(() => {
+    return {
+      data: {},
+      nodes: [],
+      settings: { ...defaultSettings },
+      layout: "portal",
+      error: void 0,
+      setData: () => {
+      },
+      updateSettings: () => {
+      },
+      setLayout: () => {
+      }
+    };
   });
+  (0, import_react2.useEffect)(() => {
+    const element = document.getElementById("schematic-fonts");
+    if (element) {
+      return void (styleRef.current = element);
+    }
+    const style = document.createElement("link");
+    style.id = "schematic-fonts";
+    style.rel = "stylesheet";
+    document.head.appendChild(style);
+    styleRef.current = style;
+  }, []);
   (0, import_react2.useEffect)(() => {
     if (!id || !accessToken) {
       return;
     }
-    fetchComponent(id, accessToken).then((resolvedData) => {
+    fetchComponent(id, accessToken, apiConfig).then((resolvedData) => {
       setState((prev2) => ({ ...prev2, ...resolvedData }));
     }).catch((error) => setState((prev2) => ({ ...prev2, error })));
-  }, [id, accessToken]);
+  }, [id, accessToken, apiConfig]);
+  (0, import_react2.useEffect)(() => {
+    const fontSet = /* @__PURE__ */ new Set([]);
+    Object.values(state.settings.theme.typography).forEach(({ fontFamily }) => {
+      fontSet.add(fontFamily);
+    });
+    if (fontSet.size > 0) {
+      const src = `https://fonts.googleapis.com/css2?${[...fontSet].map((fontFamily) => `family=${fontFamily}&display=swap`).join("&")}`;
+      if (styleRef.current) {
+        styleRef.current.href = src;
+      }
+    }
+  }, [state.settings.theme.typography]);
   const setData = (0, import_react2.useCallback)(
     (data) => {
       setState((prev2) => ({
         ...prev2,
-        data
+        data: Object.assign({}, data)
       }));
     },
     [setState]
   );
-  const setSettings = (0, import_react2.useCallback)(
+  const updateSettings = (0, import_react2.useCallback)(
     (settings) => {
       setState((prev2) => ({
         ...prev2,
-        settings
+        settings: Object.assign({}, prev2.settings, settings)
       }));
     },
     [setState]
   );
-  const updateSettings = (0, import_react2.useCallback)(
-    (settings) => {
+  const setLayout = (0, import_react2.useCallback)(
+    (layout) => {
       setState((prev2) => ({
         ...prev2,
-        settings: { ...prev2.settings, ...settings }
+        layout
       }));
     },
     [setState]
@@ -6514,75 +6811,602 @@ var EmbedProvider = ({
         data: state.data,
         nodes: state.nodes,
         settings: state.settings,
+        layout: state.layout,
         error: state.error,
         setData,
-        setSettings,
-        updateSettings
+        updateSettings,
+        setLayout
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ot, { theme: state.settings.theme === "dark" ? dark : light, children })
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ot, { theme: state.settings.theme, children })
     }
   );
 };
 
 // node_modules/@schematichq/schematic-js/dist/schematic.esm.js
-var getRandomValues;
-var rnds8 = new Uint8Array(16);
-function rng() {
-  if (!getRandomValues) {
-    getRandomValues = typeof crypto !== "undefined" && crypto.getRandomValues && crypto.getRandomValues.bind(crypto);
-    if (!getRandomValues) {
-      throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");
-    }
+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 getRandomValues(rnds8);
-}
-var byteToHex = [];
-for (let i2 = 0; i2 < 256; ++i2) {
-  byteToHex.push((i2 + 256).toString(16).slice(1));
-}
-function unsafeStringify(arr, offset = 0) {
-  return byteToHex[arr[offset + 0]] + byteToHex[arr[offset + 1]] + byteToHex[arr[offset + 2]] + byteToHex[arr[offset + 3]] + "-" + byteToHex[arr[offset + 4]] + byteToHex[arr[offset + 5]] + "-" + byteToHex[arr[offset + 6]] + byteToHex[arr[offset + 7]] + "-" + byteToHex[arr[offset + 8]] + byteToHex[arr[offset + 9]] + "-" + byteToHex[arr[offset + 10]] + byteToHex[arr[offset + 11]] + byteToHex[arr[offset + 12]] + byteToHex[arr[offset + 13]] + byteToHex[arr[offset + 14]] + byteToHex[arr[offset + 15]];
-}
-var randomUUID = typeof crypto !== "undefined" && crypto.randomUUID && crypto.randomUUID.bind(crypto);
-var native_default = {
-  randomUUID
+  return to;
 };
-function v4(options, buf, offset) {
-  if (native_default.randomUUID && !buf && !options) {
-    return native_default.randomUUID();
-  }
-  options = options || {};
-  const rnds = options.random || (options.rng || rng)();
-  rnds[6] = rnds[6] & 15 | 64;
-  rnds[8] = rnds[8] & 63 | 128;
-  if (buf) {
-    offset = offset || 0;
-    for (let i2 = 0; i2 < 16; ++i2) {
-      buf[offset + i2] = rnds[i2];
-    }
-    return buf;
-  }
-  return unsafeStringify(rnds);
-}
-var v4_default = v4;
-var anonymousIdKey = "schematicId";
-var Schematic = class {
-  apiKey;
-  apiUrl = "https://api.schematichq.com";
-  webSocketUrl = "wss://api.schematichq.com";
-  eventUrl = "https://c.schematichq.com";
-  conn = null;
-  context = {};
-  eventQueue;
-  storage;
-  useWebSocket = false;
-  values = {};
-  flagListener;
-  constructor(apiKey, options) {
-    this.apiKey = apiKey;
-    this.eventQueue = [];
-    this.useWebSocket = options?.useWebSocket ?? false;
-    this.flagListener = options?.flagListener;
+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() {
+  if (!getRandomValues) {
+    getRandomValues = typeof crypto !== "undefined" && crypto.getRandomValues && crypto.getRandomValues.bind(crypto);
+    if (!getRandomValues) {
+      throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");
+    }
+  }
+  return getRandomValues(rnds8);
+}
+var byteToHex = [];
+for (let i2 = 0; i2 < 256; ++i2) {
+  byteToHex.push((i2 + 256).toString(16).slice(1));
+}
+function unsafeStringify(arr, offset = 0) {
+  return byteToHex[arr[offset + 0]] + byteToHex[arr[offset + 1]] + byteToHex[arr[offset + 2]] + byteToHex[arr[offset + 3]] + "-" + byteToHex[arr[offset + 4]] + byteToHex[arr[offset + 5]] + "-" + byteToHex[arr[offset + 6]] + byteToHex[arr[offset + 7]] + "-" + byteToHex[arr[offset + 8]] + byteToHex[arr[offset + 9]] + "-" + byteToHex[arr[offset + 10]] + byteToHex[arr[offset + 11]] + byteToHex[arr[offset + 12]] + byteToHex[arr[offset + 13]] + byteToHex[arr[offset + 14]] + byteToHex[arr[offset + 15]];
+}
+var randomUUID = typeof crypto !== "undefined" && crypto.randomUUID && crypto.randomUUID.bind(crypto);
+var native_default = {
+  randomUUID
+};
+function v4(options, buf, offset) {
+  if (native_default.randomUUID && !buf && !options) {
+    return native_default.randomUUID();
+  }
+  options = options || {};
+  const rnds = options.random || (options.rng || rng)();
+  rnds[6] = rnds[6] & 15 | 64;
+  rnds[8] = rnds[8] & 63 | 128;
+  if (buf) {
+    offset = offset || 0;
+    for (let i2 = 0; i2 < 16; ++i2) {
+      buf[offset + i2] = rnds[i2];
+    }
+    return buf;
+  }
+  return unsafeStringify(rnds);
+}
+var v4_default = v4;
+var import_polyfill = __toESM2(require_browser_polyfill());
+var anonymousIdKey = "schematicId";
+var Schematic = class {
+  apiKey;
+  apiUrl = "https://api.schematichq.com";
+  webSocketUrl = "wss://api.schematichq.com";
+  eventUrl = "https://c.schematichq.com";
+  conn = null;
+  context = {};
+  eventQueue;
+  storage;
+  useWebSocket = false;
+  values = {};
+  flagListener;
+  constructor(apiKey, options) {
+    this.apiKey = apiKey;
+    this.eventQueue = [];
+    this.useWebSocket = options?.useWebSocket ?? false;
+    this.flagListener = options?.flagListener;
     if (options?.storage) {
       this.storage = options.storage;
     } else if (typeof localStorage !== "undefined") {
@@ -6931,14 +7755,11 @@ var useSchematicFlag = (key, opts) => {
   return value;
 };
 
-// src/components/embed/ComponentTree.tsx
-var import_react10 = require("react");
-
-// src/components/embed/renderer.ts
-var import_react9 = require("react");
+// src/components/elements/card/Card.tsx
+var import_react6 = require("react");
 
-// src/components/elements/included-features/IncludedFeatures.tsx
-var import_react7 = require("react");
+// src/const/index.ts
+var TEXT_BASE_SIZE = 16;
 
 // src/utils/color.ts
 function hexToHSL(color) {
@@ -7025,15 +7846,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
@@ -7041,9 +7871,6 @@ function camelToHyphen(str) {
   return str.replace(/([a-z][A-Z])/g, (g2) => `${g2[0]}-${g2[1].toLowerCase()}`);
 }
 
-// src/const/index.ts
-var TEXT_BASE_SIZE = 16;
-
 // src/utils/style.ts
 function attr(key, value) {
   return typeof value !== "undefined" && lt`
@@ -7061,6 +7888,88 @@ attr.rem = function propAsRem(key, value) {
     `;
 };
 
+// src/components/elements/card/styles.ts
+var StyledCard = dt.div(
+  ({
+    theme,
+    $sectionLayout = "merged",
+    $borderRadius = 8,
+    $padding = 48,
+    $shadow = true
+  }) => {
+    return lt`
+      box-sizing: border-box;
+      font-size: ${TEXT_BASE_SIZE}px;
+
+      *,
+      *::before,
+      *::after {
+        box-sizing: inherit;
+      }
+
+      > * {
+        padding: ${$padding * 0.75 / TEXT_BASE_SIZE}rem
+          ${$padding / TEXT_BASE_SIZE}rem;
+        color: ${theme.typography.text.color};
+      }
+
+      ${() => {
+      const { l: l2 } = hexToHSL(theme.card.background);
+      const borderColor = l2 > 50 ? darken(theme.card.background, 10) : lighten(theme.card.background, 30);
+      const borderRadius = `${$borderRadius / TEXT_BASE_SIZE}rem`;
+      const boxShadow = "0px 1px 20px 0px #1018280F, 0px 1px 3px 0px #1018281A";
+      if ($sectionLayout === "merged") {
+        return lt`
+            background: ${({ theme: theme2 }) => theme2.card.background};
+            border-radius: ${borderRadius};
+
+            ${$shadow && `box-shadow: ${boxShadow};`}
+
+            > :not(:last-child) {
+              border-bottom: 1px solid ${borderColor};
+            }
+          `;
+      }
+      return lt`
+          > :not(:last-child) {
+            margin-bottom: 1rem;
+          }
+
+          > * {
+            background: ${theme.card.background};
+            border-radius: ${borderRadius};
+            ${$shadow && `box-shadow: ${boxShadow};`}
+          }
+        `;
+    }}
+    `;
+  }
+);
+
+// src/components/elements/card/Card.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var Card = (0, import_react6.forwardRef)(
+  ({ children, className }, ref) => {
+    const { settings } = useEmbed();
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      StyledCard,
+      {
+        ref,
+        className,
+        $sectionLayout: settings.theme?.sectionLayout,
+        $borderRadius: settings.theme?.card?.borderRadius,
+        $padding: settings.theme?.card?.padding,
+        $shadow: settings.theme?.card?.hasShadow,
+        children
+      }
+    );
+  }
+);
+
+// src/components/elements/plan-manager/PlanManager.tsx
+var import_react7 = require("react");
+var import_react_dom = require("react-dom");
+
 // src/components/ui/box/styles.ts
 var Box = dt.div((props) => {
   const initialStyles = [];
@@ -7079,10 +7988,13 @@ var Box = dt.div((props) => {
 var Text = dt.span`
   font-family: ${({ $font = "Inter" }) => `${$font}, sans-serif`};
   font-size: ${({ $size = 16 }) => typeof $size === "number" ? `${$size / TEXT_BASE_SIZE}rem` : $size};
-  font-weight: ${({ $weight = 400 }) => $weight};
-  line-height: 1.25;
+  ${({ $weight = 400 }) => lt`
+    font-weight: ${$weight};
+    font-variation-settings: "wght" ${$weight};
+  `};
+  line-height: ${({ $lineHeight = 1.25 }) => $lineHeight};
   ${({ $align }) => attr("text-align", $align)};
-  color: ${({ $color, theme }) => $color || theme.text};
+  color: ${({ $color, theme }) => $color || theme.typography.text.color};
 
   &:focus-visible {
     outline: 2px solid ${({ theme }) => theme.primary};
@@ -7107,46 +8019,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";
@@ -7175,7 +8087,7 @@ var Button = dt.button`
 `;
 
 // src/components/ui/button/Button.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var Button2 = ({
   color = "white",
   size = "md",
@@ -7184,7 +8096,7 @@ var Button2 = ({
   children,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     Button,
     {
       $color: color,
@@ -7197,72 +8109,6 @@ var Button2 = ({
   );
 };
 
-// src/components/ui/card/Card.tsx
-var import_react6 = require("react");
-
-// src/components/ui/card/styles.ts
-var StyledCard = dt.div`
-  box-sizing: border-box;
-  font-size: ${TEXT_BASE_SIZE}px;
-
-  *,
-  *::before,
-  *::after {
-    box-sizing: inherit;
-  }
-
-  > * {
-    padding: ${40 / 16}rem ${50 / 16}rem;
-    color: ${({ theme }) => theme.color};
-    background: ${({ theme }) => theme.background};
-    box-shadow:
-      0px 1px 20px 0px #1018280f,
-      0px 1px 3px 0px #1018281a;
-  }
-
-  ${({ $sectionLayout = "merged", $borderRadius = 8 }) => $sectionLayout === "merged" ? lt`
-          > :first-child {
-            border-top-left-radius: ${$borderRadius / 16}rem;
-            border-top-right-radius: ${$borderRadius / 16}rem;
-          }
-
-          > :last-child {
-            border-bottom-left-radius: ${$borderRadius / 16}rem;
-            border-bottom-right-radius: ${$borderRadius / 16}rem;
-          }
-
-          > :not(:last-child) {
-            border-bottom: 1px solid #eaeaea;
-          }
-        ` : lt`
-          > :not(:last-child) {
-            margin-bottom: 2rem;
-          }
-
-          > * {
-            border-radius: ${$borderRadius / 16}rem;
-          }
-        `}
-`;
-
-// src/components/ui/card/Card.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var Card = (0, import_react6.forwardRef)(
-  ({ children, className }, ref) => {
-    const { settings } = useEmbed();
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-      StyledCard,
-      {
-        ref,
-        className,
-        $sectionLayout: settings.sectionLayout,
-        $borderRadius: settings.borderRadius,
-        children
-      }
-    );
-  }
-);
-
 // src/components/ui/flex/styles.ts
 var Flex = dt(Box)`
   display: flex;
@@ -7281,9 +8127,7 @@ var Container = dt.div`
   display: flex;
   justify-content: center;
   align-items: center;
-  border-width: 1px;
-  border-style: solid;
-  border-radius: 100%;
+  border-radius: 9999px;
   ${({ $size }) => {
   const base = 24;
   let scale = 1;
@@ -7303,18 +8147,18 @@ 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]};
         `}
 `;
 
@@ -7328,10 +8172,12 @@ var Icon2 = ({ name, className, ...props }) => {
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var IconRound = ({
   name,
-  style = "filled",
-  size = "md"
+  variant = "filled",
+  size = "md",
+  colors = ["white", "#e5e7eb"],
+  ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Container, { $size: size, $style: style, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon2, { name }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Container, { $size: size, $variant: variant, $colors: colors, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon2, { name }) });
 };
 
 // src/components/ui/progress-bar/styles.ts
@@ -7346,7 +8192,7 @@ var ProgressBar = ({
   value,
   total = 0,
   color = "gray",
-  barWidth,
+  barWidth = "100%",
   ...props
 }) => {
   const barColorMap = {
@@ -7356,287 +8202,72 @@ var ProgressBar = ({
     orange: "#DB6769",
     red: "#EF4444"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Container2, { $alignItems: "center", $gap: `${16 / 16}rem`, ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Flex, { $alignItems: "center", $width: `${barWidth}`, $position: "relative", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-      Flex,
-      {
-        $position: "relative",
-        $overflow: "hidden",
-        $width: "100%",
-        $height: `${8 / TEXT_BASE_SIZE}rem`,
-        $background: "#F2F4F7",
-        $borderRadius: "9999px",
-        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-          Box,
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    Container2,
+    {
+      $alignItems: "center",
+      $gap: `${16 / TEXT_BASE_SIZE}rem`,
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          Flex,
           {
-            $width: `${Math.min(progress, 100)}%`,
-            $height: "100%",
-            $background: barColorMap[color],
-            $borderRadius: "9999px"
+            $position: "relative",
+            $alignItems: "center",
+            $width: `${barWidth}`,
+            $maxWidth: "100%",
+            children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              Flex,
+              {
+                $position: "relative",
+                $overflow: "hidden",
+                $width: "100%",
+                $height: `${8 / TEXT_BASE_SIZE}rem`,
+                $background: "#F2F4F7",
+                $borderRadius: "9999px",
+                children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                  Box,
+                  {
+                    $width: `${Math.min(progress, 100)}%`,
+                    $height: "100%",
+                    $background: barColorMap[color],
+                    $borderRadius: "9999px"
+                  }
+                )
+              }
+            )
           }
-        )
-      }
-    ) }),
-    total !== 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Text, { $size: `${14 / 16}rem`, $weight: "500", children: [
-      value,
-      "/",
-      total
-    ] })
-  ] });
-};
-
-// src/components/elements/included-features/IncludedFeatures.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
-function resolveDesignProps(props) {
-  return {
-    name: {
-      text: props.name?.text || "Included features",
-      style: {
-        fontFamily: props.name?.style?.fontFamily || "Inter",
-        fontSize: props.name?.style?.fontSize || 16,
-        fontWeight: props.name?.style?.fontWeight || 500,
-        color: props.name?.style?.color || "#000000"
-      }
-    },
-    limits: {
-      isVisible: props.limits?.isVisible || true
-    },
-    usage: {
-      isVisible: props.usage?.isVisible || true
-    },
-    count: props.count || 3
-  };
-}
-var LimitFeature = ({
-  feature,
-  allocation,
-  usage
-}) => {
-  if (!feature) {
-    return null;
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Flex, { $justifyContent: "space-between", $margin: "0 0 1.5rem", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Flex, { $gap: `${16 / 16}rem`, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(IconRound, { name: feature.icon, size: "sm" }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Flex, { $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-        Text,
-        {
-          $font: "Public Sans",
-          $size: `${18 / 16}rem`,
-          $weight: "500",
-          $align: "center",
-          children: feature.name
-        }
-      ) })
-    ] }),
-    typeof allocation === "number" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-      ProgressBar,
-      {
-        progress: (usage || 0) / allocation * 100,
-        value: usage || 0,
-        total: allocation,
-        color: "blue",
-        barWidth: "140px"
-      }
-    )
-  ] });
-};
-var UsageFeature = ({
-  feature,
-  usage
-}) => {
-  if (!feature) {
-    return null;
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Flex, { $justifyContent: "space-between", $margin: "0 0 1.5rem", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Flex, { $gap: `${16 / 16}rem`, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(IconRound, { name: feature.icon, size: "sm" }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Flex, { $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-        Text,
-        {
-          $font: "Public Sans",
-          $size: `${18 / 16}rem`,
-          $weight: "500",
-          $align: "center",
-          children: feature.name
-        }
-      ) })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Flex, { $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Text, { as: Box, $font: "Public Sans", $weight: "500", $align: "right", children: [
-      usage,
-      " ",
-      feature.featureType,
-      " used"
-    ] }) })
-  ] });
-};
-var AddonFeature = ({
-  feature
-}) => {
-  if (!feature) {
-    return null;
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Flex, { $justifyContent: "space-between", $margin: "0 0 1.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Flex, { $gap: `${16 / 16}rem`, children: [
-    feature.icon && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(IconRound, { name: feature.icon, size: "sm" }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Flex, { $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-      Text,
-      {
-        $font: "Public Sans",
-        $size: `${18 / 16}rem`,
-        $weight: "500",
-        $align: "center",
-        children: feature.name
-      }
-    ) })
-  ] }) });
-};
-var IncludedFeatures = ({
-  className,
-  ...props
-}) => {
-  const designPropsWithDefaults = resolveDesignProps(props);
-  const { data } = useEmbed();
-  const [numVisible, setNumVisible] = (0, import_react7.useState)(designPropsWithDefaults.count);
-  const isExpanded = (0, import_react7.useMemo)(
-    () => numVisible > designPropsWithDefaults.count,
-    [numVisible, designPropsWithDefaults.count]
+        ),
+        total !== 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Text, { $size: 14, $weight: 500, children: [
+          value,
+          "/",
+          total
+        ] })
+      ]
+    }
   );
-  const features = (0, import_react7.useMemo)(() => {
-    return (data.featureUsage?.features || []).map(
-      ({
-        access,
-        allocation,
-        allocationType,
-        feature,
-        period,
-        usage,
-        ...props2
-      }) => {
-        return {
-          access,
-          allocation,
-          allocationType,
-          feature,
-          period,
-          /**
-           * @TODO: resolve feature price
-           */
-          price: void 0,
-          usage,
-          ...props2
-        };
-      }
-    );
-  }, [data.featureUsage]);
-  const resize = () => {
-    setNumVisible(
-      (prev2) => prev2 > designPropsWithDefaults.count ? designPropsWithDefaults.count : features.length
-    );
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Box, { $margin: "0 0 1.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-      Text,
-      {
-        $font: "Inter",
-        $size: `${15 / 16}rem`,
-        $weight: "500",
-        $color: "#767676",
-        children: designPropsWithDefaults.name.text
-      }
-    ) }),
-    features.slice(0, numVisible).reduce((acc, feature, index) => {
-      if (feature.allocationType === "boolean") {
-        return [...acc, /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AddonFeature, { ...feature }, index)];
-      }
-      if (feature.allocationType === "numeric" || feature.allocationType === "trait" || feature.allocationType === "unlimited") {
-        if (typeof feature.allocation === "number") {
-          return [...acc, /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(LimitFeature, { ...feature }, index)];
-        }
-        return [...acc, /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(UsageFeature, { ...feature }, index)];
-      }
-      return acc;
-    }, []),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Flex, { $alignItems: "center", $gap: `${4 / 16}rem`, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-        Icon2,
-        {
-          name: isExpanded ? "chevron-up" : "chevron-down",
-          style: { fontSize: "1.25rem", color: "#D0D0D0" }
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Button2, { onClick: resize, color: "blue", variant: "link", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text, { $weight: "500", children: "See all" }) })
-    ] })
-  ] });
-};
-
-// src/components/elements/invoices/Invoices.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var Invoices = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "p-8", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "relative z-[1] bg-white flex flex-col space-y-4", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "font-bold text-base", children: "Invoices" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex flex-col space-y-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex justify-between text-sm", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-blue-400", children: "May 12, 2024" }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-gray-400", children: "$315.00" })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex justify-between text-sm", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-blue-400", children: "May 12, 2024" }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-gray-400", children: "$315.00" })
-      ] })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex flex-row space-x-2 items-center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Icon2, { name: "chevron-down", className: "text-gray-400 leading-none" }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-blue-400 font-medium font-display text-sm", children: "See all" })
-    ] })
-  ] }) });
-};
-
-// src/components/elements/next-bill-due/NextBillDue.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var NextBillDue = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "bg-white p-8", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex items-center justify-between mb-3", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "font-bold text-base", children: "Next bill due June 12, 2024" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center leading-none justify-between", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-row items-end flex-1   font-medium font-display text-gray-700", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "text-lg mr-0.5 translate-y-[3px]", children: "$" }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "text-3xl", children: "315.00" })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "text-gray-400 text-xs max-w-[160px]", children: [
-        "Estimated monthly bill, ",
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("br", {}),
-        "Contract ends 5/12/24."
-      ] })
-    ] })
-  ] });
-};
-
-// src/components/elements/payment-method/PaymentMethod.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
-var PaymentMethod = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "relative px-8 py-8 bg-white", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "relative z-[1] bg-white", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-center justify-between mb-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "font-bold text-base", children: "Payment Method" }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "text-xs text-red-400", children: "Expires in 4 mo" })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex flex-row justify-between bg-gray-50 text-sm px-4 py-1.5 rounded-full", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "", children: "\u{1F4B3} Card ending 4512" }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "text-blue-400", children: "Edit" })
-    ] })
-  ] }) });
 };
 
-// src/components/elements/plan-manager/PlanManager.tsx
-var import_react8 = require("react");
-
 // src/components/elements/plan-manager/styles.ts
-var Button3 = dt(Button2)`
+var StyledButton = 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;
+  ${({ $color = "primary", theme }) => {
+  const { l: l2 } = hexToHSL(theme[$color]);
+  const color = l2 > 50 ? "#000000" : "#FFFFFF";
+  return lt`
+      color: ${color};
+
+      ${Text} {
+        color: ${color};
+      }
+    `;
+}};
+
+  ${({ $color = "primary", theme }) => {
+  const color = theme[$color];
   return lt`
       background-color: ${color};
       border-color: ${color};
@@ -7644,10 +8275,10 @@ var Button3 = dt(Button2)`
 }}
 
   &:hover {
-    ${({ $backgroundColor, theme }) => {
-  const specified = $backgroundColor || theme.button;
-  const lightened = lighten(specified, 12.5);
-  const color = specified === lightened ? darken(specified, 12.5) : lightened;
+    ${({ $color = "primary", theme }) => {
+  const specified = theme[$color];
+  const lightened = lighten(specified, 15);
+  const color = specified === lightened ? darken(specified, 15) : lightened;
   return lt`
         background-color: ${color};
         border-color: ${color};
@@ -7680,66 +8311,56 @@ var Button3 = dt(Button2)`
 `;
 
 // src/components/elements/plan-manager/PlanManager.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
-function resolveDesignProps2(props) {
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var resolveDesignProps = (props) => {
   return {
     header: {
-      isVisible: props.header?.isVisible || true,
+      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"
+        fontStyle: props.header?.title?.fontStyle ?? "heading1"
       },
       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"
+        isVisible: props.header?.description?.isVisible ?? true,
+        fontStyle: props.header?.description?.fontStyle ?? "text"
       },
       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"
+        isVisible: props.header?.price?.isVisible ?? true,
+        fontStyle: props.header?.price?.fontStyle ?? "text"
       }
     },
     addOns: {
-      isVisible: props.addOns?.isVisible || true
-    },
-    usageBased: {
-      isVisible: props.usageBased?.isVisible || true
+      isVisible: props.addOns?.isVisible ?? true,
+      fontStyle: props.addOns?.fontStyle ?? "heading4",
+      showLabel: props.addOns?.showLabel ?? true
     },
     callToAction: {
-      isVisible: props.callToAction?.isVisible || true,
-      size: props.callToAction?.size || "md",
-      color: props.callToAction?.color || "white",
-      backgroundColor: props.callToAction?.backgroundColor || "black"
+      isVisible: props.callToAction?.isVisible ?? true,
+      buttonSize: props.callToAction?.buttonSize ?? "md",
+      buttonStyle: props.callToAction?.buttonStyle ?? "secondary"
     }
   };
-}
-var PlanManager = ({ className, ...props }) => {
-  const designPropsWithDefaults = resolveDesignProps2(props);
-  const { data } = useEmbed();
-  const plans = (0, import_react8.useMemo)(() => {
-    return (data.company?.plans || []).map(({ name, description }) => {
-      return {
+};
+var PlanManager = (0, import_react7.forwardRef)(({ children, className, portal, ...rest }, ref) => {
+  const props = resolveDesignProps(rest);
+  const { data, settings, layout, setLayout } = useEmbed();
+  const { plan, plans, addOns } = (0, import_react7.useMemo)(() => {
+    return {
+      plan: data.company?.plan || {},
+      plans: data.company?.plans?.map(({ name, description }) => ({
         name,
         description,
-        /**
-         * @TODO: resolve plan/addon prices
-         */
         price: void 0
-      };
-    });
-  }, [data.company?.plans]);
-  const plan = plans.at(0);
-  const addons = plans.slice(1);
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Flex, { $flexDirection: "column", $gap: `${12 / 16}rem`, $margin: "0 0 3rem", children: [
-      designPropsWithDefaults.header.isVisible && plan && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+      })) || [],
+      addOns: data.company?.addOns?.map(({ name, description }) => ({
+        name,
+        description,
+        price: void 0
+      })) || []
+    };
+  }, [data.company]);
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { ref, className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Flex, { $flexDirection: "column", $gap: "0.75rem", $margin: "0 0 3rem", children: [
+      props.header.isVisible && plan && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
         Flex,
         {
           $justifyContent: "space-between",
@@ -7747,58 +8368,78 @@ var PlanManager = ({ className, ...props }) => {
           $width: "100%",
           $margin: "0 0 1.5rem",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { $margin: "0 0 0.75rem", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Box, { $margin: "0 0 0.75rem", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                 Text,
                 {
-                  $font: designPropsWithDefaults.header.title.fontFamily,
-                  $size: `${designPropsWithDefaults.header.title.fontSize / 16}rem`,
-                  $weight: `${designPropsWithDefaults.header.title.fontWeight}`,
-                  $color: designPropsWithDefaults.header.title.color,
+                  $font: settings.theme.typography[props.header.title.fontStyle].fontFamily,
+                  $size: settings.theme.typography[props.header.title.fontStyle].fontSize,
+                  $weight: settings.theme.typography[props.header.title.fontStyle].fontWeight,
+                  $color: settings.theme.typography[props.header.title.fontStyle].color,
+                  $lineHeight: 1,
                   children: plan.name
                 }
               ) }),
-              designPropsWithDefaults.header.description.isVisible && plan.description && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+              props.header.description.isVisible && plan.description && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                 Text,
                 {
-                  $font: designPropsWithDefaults.header.description.fontFamily,
-                  $size: `${designPropsWithDefaults.header.description.fontSize / 16}rem`,
-                  $weight: `${designPropsWithDefaults.header.description.fontWeight}`,
-                  $color: designPropsWithDefaults.header.description.color,
+                  $font: settings.theme.typography[props.header.description.fontStyle].fontFamily,
+                  $size: settings.theme.typography[props.header.description.fontStyle].fontSize,
+                  $weight: settings.theme.typography[props.header.description.fontStyle].fontWeight,
+                  $color: settings.theme.typography[props.header.description.fontStyle].color,
                   children: plan.description
                 }
               )
             ] }),
-            designPropsWithDefaults.header.price.isVisible && plan.price >= 0 && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+            props.header.price.isVisible && plan.planPrice >= 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
               Text,
               {
-                $font: designPropsWithDefaults.header.price.fontFamily,
-                $size: `${designPropsWithDefaults.header.price.fontSize / 16}`,
-                $weight: `${designPropsWithDefaults.header.price.fontWeight}`,
-                $color: designPropsWithDefaults.header.price.color,
+                $font: settings.theme.typography[props.header.price.fontStyle].fontFamily,
+                $size: settings.theme.typography[props.header.price.fontStyle].fontSize,
+                $weight: settings.theme.typography[props.header.price.fontStyle].fontWeight,
+                $color: settings.theme.typography[props.header.price.fontStyle].color,
                 children: [
                   "$",
-                  plan.price,
-                  "/mo"
+                  plan.planPrice,
+                  "/",
+                  plan.planPeriod
                 ]
               }
             )
           ]
         }
       ),
-      designPropsWithDefaults.addOns.isVisible && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Text, { $size: `${15 / 16}rem`, $weight: "500", children: "Add-Ons" }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { $width: "100%", $margin: "0 0 1rem", children: addons.map((addon, index) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+      props.addOns.isVisible && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+        props.addOns.showLabel && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          Text,
+          {
+            $font: settings.theme.typography.text.fontFamily,
+            $size: settings.theme.typography.text.fontSize,
+            $weight: 500,
+            $color: darken(settings.theme.typography.text.color, 20),
+            children: "Add-Ons"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Box, { $width: "100%", $margin: "0 0 1rem", children: addOns.map((addOn, index) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
           Flex,
           {
             $justifyContent: "space-between",
             $alignItems: "center",
             $width: "100%",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Text, { $font: "Manrope", $size: `${18 / 16}rem`, $weight: "800", children: addon.name }),
-              addon.price >= 0 && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Text, { $weight: "500", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                Text,
+                {
+                  $font: settings.theme.typography[props.addOns.fontStyle].fontFamily,
+                  $size: settings.theme.typography[props.addOns.fontStyle].fontSize,
+                  $weight: settings.theme.typography[props.addOns.fontStyle].fontWeight,
+                  $color: settings.theme.typography[props.addOns.fontStyle].color,
+                  children: addOn.name
+                }
+              ),
+              addOn.price >= 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Text, { $weight: 500, children: [
                 "$",
-                addon.price,
+                addOn.price,
                 "/mo"
               ] })
             ]
@@ -7807,23 +8448,759 @@ var PlanManager = ({ className, ...props }) => {
         )) })
       ] })
     ] }),
-    designPropsWithDefaults.callToAction.isVisible && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-      Button3,
+    props.callToAction.isVisible && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      StyledButton,
       {
-        $size: designPropsWithDefaults.callToAction.size,
-        $color: designPropsWithDefaults.callToAction.color,
-        $backgroundColor: designPropsWithDefaults.callToAction.backgroundColor,
-        children: "Change Plan"
+        onClick: () => {
+          if (layout !== "checkout")
+            return;
+          setLayout("checkout");
+        },
+        $size: props.callToAction.buttonSize,
+        $color: props.callToAction.buttonStyle,
+        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          Text,
+          {
+            $font: settings.theme.typography.text.fontFamily,
+            $size: settings.theme.typography.text.fontSize,
+            $weight: settings.theme.typography.text.fontWeight,
+            children: "Change Plan"
+          }
+        )
       }
+    ),
+    children,
+    layout === "checkout" && (0, import_react_dom.createPortal)(
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        Box,
+        {
+          $position: "absolute",
+          $top: "50%",
+          $left: "50%",
+          $zIndex: "999999",
+          $transform: "translate(-50%, -50%)",
+          $width: "100%",
+          $height: "100%",
+          $backgroundColor: "#B5B5B580",
+          children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+            Flex,
+            {
+              $position: "relative",
+              $top: "50%",
+              $left: "50%",
+              $transform: "translate(-50%, -50%)",
+              $width: "956px",
+              $height: "700px",
+              $backgroundColor: "#FBFBFB",
+              $borderRadius: "8px",
+              $boxShadow: "0px 1px 20px 0px #1018280F, 0px 1px 3px 0px #1018281A;",
+              id: "select-plan-dialog",
+              role: "dialog",
+              "aria-labelledby": "select-plan-dialog-label",
+              "aria-modal": "true",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                  Box,
+                  {
+                    $position: "absolute",
+                    $top: "0.25rem",
+                    $right: "0.75rem",
+                    $cursor: "pointer",
+                    onClick: () => {
+                      setLayout("portal");
+                    },
+                    children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon2, { name: "close", style: { fontSize: 36, color: "#B8B8B8" } })
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Flex, { $flexDirection: "column", $gap: "1rem", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                    Text,
+                    {
+                      as: "h1",
+                      id: "select-plan-dialog-label",
+                      $size: 24,
+                      $weight: 800,
+                      children: "Select plan"
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Flex, { $flexDirection: "column", $gap: "1rem", children: plans.map((plan2, index) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+                    Flex,
+                    {
+                      $justifyContent: "space-between",
+                      $alignItems: "center",
+                      $width: "100%",
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text, { $size: 20, $weight: 800, children: plan2.name }),
+                        plan2.price >= 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Text, { children: [
+                          "$",
+                          plan2.price,
+                          "/mo"
+                        ] })
+                      ]
+                    },
+                    index
+                  )) })
+                ] })
+              ]
+            }
+          )
+        }
+      ),
+      portal || document.body
     )
   ] });
+});
+
+// src/components/elements/included-features/IncludedFeatures.tsx
+var import_react8 = require("react");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+function resolveDesignProps2(props) {
+  return {
+    header: {
+      isVisible: props.header?.isVisible ?? true,
+      fontStyle: props.header?.fontStyle ?? "heading4",
+      text: props.header?.text ?? "Included features"
+    },
+    icons: {
+      isVisible: props.icons?.isVisible ?? true,
+      fontStyle: props.icons?.fontStyle ?? "heading3",
+      style: props.icons?.style ?? "light"
+    },
+    entitlement: {
+      isVisible: props.entitlement?.isVisible ?? true,
+      fontStyle: props.entitlement?.fontStyle ?? "heading5"
+    },
+    usage: {
+      isVisible: props.usage?.isVisible ?? true,
+      fontStyle: props.usage?.fontStyle ?? "heading6"
+    }
+  };
+}
+var IncludedFeatures = (0, import_react8.forwardRef)(({ className, ...rest }, ref) => {
+  const props = resolveDesignProps2(rest);
+  const { data, settings } = useEmbed();
+  const features = (0, import_react8.useMemo)(() => {
+    return (data.featureUsage?.features || []).map(
+      ({
+        access,
+        allocation,
+        allocationType,
+        feature,
+        period,
+        usage,
+        ...props2
+      }) => {
+        return {
+          access,
+          allocation,
+          allocationType,
+          feature,
+          period,
+          /**
+           * @TODO: resolve feature price
+           */
+          price: void 0,
+          usage,
+          ...props2
+        };
+      }
+    );
+  }, [data.featureUsage]);
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Flex, { ref, className, $flexDirection: "column", $gap: "1.5rem", children: [
+    props.header.isVisible && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      Text,
+      {
+        $font: settings.theme.typography[props.header.fontStyle].fontFamily,
+        $size: settings.theme.typography[props.header.fontStyle].fontSize,
+        $weight: settings.theme.typography[props.header.fontStyle].fontWeight,
+        $color: settings.theme.typography[props.header.fontStyle].color,
+        children: props.header.text
+      }
+    ) }),
+    features.reduce(
+      (acc, { allocation, allocationType, feature, usage }, index) => {
+        if (!allocationType) {
+          return acc;
+        }
+        return [
+          ...acc,
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+            Flex,
+            {
+              $flexWrap: "wrap",
+              $justifyContent: "space-between",
+              $alignItems: "center",
+              $gap: "1rem",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Flex, { $flexShrink: "0", $gap: "1rem", children: [
+                  props.icons.isVisible && feature?.icon && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                    IconRound,
+                    {
+                      name: feature.icon,
+                      size: "sm",
+                      colors: [
+                        settings.theme.card.background,
+                        settings.theme.primary
+                      ]
+                    }
+                  ),
+                  feature?.name && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Flex, { $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                    Text,
+                    {
+                      $font: settings.theme.typography[props.icons.fontStyle].fontFamily,
+                      $size: settings.theme.typography[props.icons.fontStyle].fontSize,
+                      $weight: settings.theme.typography[props.icons.fontStyle].fontWeight,
+                      $color: settings.theme.typography[props.icons.fontStyle].color,
+                      $align: "center",
+                      children: feature.name
+                    }
+                  ) })
+                ] }),
+                allocationType === "numeric" && feature?.name && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Box, { $textAlign: "right", children: [
+                  props.entitlement.isVisible && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                    Text,
+                    {
+                      as: Box,
+                      $font: settings.theme.typography[props.entitlement.fontStyle].fontFamily,
+                      $size: settings.theme.typography[props.entitlement.fontStyle].fontSize,
+                      $weight: settings.theme.typography[props.entitlement.fontStyle].fontWeight,
+                      $color: settings.theme.typography[props.entitlement.fontStyle].color,
+                      children: typeof allocation === "number" ? `${allocation} ${feature.name}` : `Unlimited ${feature.name}`
+                    }
+                  ),
+                  props.usage.isVisible && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                    Text,
+                    {
+                      as: Box,
+                      $font: settings.theme.typography[props.usage.fontStyle].fontFamily,
+                      $size: settings.theme.typography[props.usage.fontStyle].fontSize,
+                      $weight: settings.theme.typography[props.usage.fontStyle].fontWeight,
+                      $color: settings.theme.typography[props.usage.fontStyle].color,
+                      children: typeof allocation === "number" ? `${usage} of ${allocation} used` : `${usage} used`
+                    }
+                  )
+                ] })
+              ]
+            },
+            index
+          )
+        ];
+      },
+      []
+    )
+  ] });
+});
+
+// src/components/elements/metered-features/MeteredFeatures.tsx
+var import_react9 = require("react");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+function resolveDesignProps3(props) {
+  return {
+    isVisible: props.isVisible ?? true,
+    header: {
+      fontStyle: props.header?.fontStyle ?? "heading2"
+    },
+    description: {
+      isVisible: props.description?.isVisible ?? true,
+      fontStyle: props.description?.fontStyle ?? "text"
+    },
+    icon: {
+      isVisible: props.icon?.isVisible ?? true
+    },
+    allocation: {
+      isVisible: props.allocation?.isVisible ?? true,
+      fontStyle: props.allocation?.fontStyle ?? "heading4"
+    },
+    usage: {
+      isVisible: props.usage?.isVisible ?? true,
+      fontStyle: props.usage?.fontStyle ?? "heading5"
+    },
+    callToAction: {
+      isVisible: props.callToAction?.isVisible ?? true,
+      buttonSize: props.callToAction?.buttonSize ?? "md",
+      buttonStyle: props.callToAction?.buttonStyle ?? "secondary"
+    }
+  };
+}
+var MeteredFeatures = (0, import_react9.forwardRef)(({ className, ...rest }, ref) => {
+  const props = resolveDesignProps3(rest);
+  const { data, settings } = useEmbed();
+  const features = (0, import_react9.useMemo)(() => {
+    return (data.featureUsage?.features || []).map(
+      ({
+        access,
+        allocation,
+        allocationType,
+        feature,
+        period,
+        usage,
+        ...props2
+      }) => {
+        return {
+          access,
+          allocation,
+          allocationType,
+          feature,
+          period,
+          /**
+           * @TODO: resolve feature price
+           */
+          price: void 0,
+          usage,
+          ...props2
+        };
+      }
+    );
+  }, [data.featureUsage]);
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Flex, { ref, className, $flexDirection: "column", $gap: "1.5rem", children: features.reduce(
+    (acc, { allocation, allocationType, feature, usage }, index) => {
+      if (!props.isVisible || allocationType !== "numeric" || typeof allocation !== "number") {
+        return acc;
+      }
+      return [
+        ...acc,
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Flex, { $gap: "1.5rem", children: [
+          props.icon.isVisible && feature?.icon && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Box, { $flexShrink: "0", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(IconRound, { name: feature.icon, size: "sm" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Box, { $flexGrow: "1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Flex, { children: [
+              feature?.name && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Box, { $flexGrow: "1", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                  Text,
+                  {
+                    as: Box,
+                    $font: settings.theme.typography[props.header.fontStyle].fontFamily,
+                    $size: settings.theme.typography[props.header.fontStyle].fontSize,
+                    $weight: settings.theme.typography[props.header.fontStyle].fontWeight,
+                    $color: settings.theme.typography[props.header.fontStyle].color,
+                    children: feature.name
+                  }
+                ),
+                props.description.isVisible && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                  Text,
+                  {
+                    as: Box,
+                    $font: settings.theme.typography[props.description.fontStyle].fontFamily,
+                    $size: settings.theme.typography[props.description.fontStyle].fontSize,
+                    $weight: settings.theme.typography[props.description.fontStyle].fontWeight,
+                    $color: settings.theme.typography[props.description.fontStyle].color,
+                    children: feature.description
+                  }
+                )
+              ] }),
+              allocationType === "numeric" && feature?.name && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Box, { $textAlign: "right", children: [
+                props.allocation.isVisible && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                  Text,
+                  {
+                    as: Box,
+                    $font: settings.theme.typography[props.allocation.fontStyle].fontFamily,
+                    $size: settings.theme.typography[props.allocation.fontStyle].fontSize,
+                    $weight: settings.theme.typography[props.allocation.fontStyle].fontWeight,
+                    $color: settings.theme.typography[props.allocation.fontStyle].color,
+                    children: typeof allocation === "number" ? `${allocation} ${feature.name}` : `Unlimited ${feature.name}`
+                  }
+                ),
+                props.usage.isVisible && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                  Text,
+                  {
+                    as: Box,
+                    $font: settings.theme.typography[props.usage.fontStyle].fontFamily,
+                    $size: settings.theme.typography[props.usage.fontStyle].fontSize,
+                    $weight: settings.theme.typography[props.usage.fontStyle].fontWeight,
+                    $color: settings.theme.typography[props.usage.fontStyle].color,
+                    children: typeof allocation === "number" ? `${usage} of ${allocation} used` : `${usage} used`
+                  }
+                )
+              ] })
+            ] }),
+            typeof usage === "number" && typeof allocation === "number" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+              ProgressBar,
+              {
+                progress: usage / allocation * 100,
+                value: usage,
+                total: allocation,
+                color: "blue"
+              }
+            ) })
+          ] })
+        ] }, index)
+      ];
+    },
+    []
+  ) });
+});
+
+// src/components/elements/upcoming-bill/UpcomingBill.tsx
+var import_react10 = require("react");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+function resolveDesignProps4(props) {
+  return {
+    header: {
+      isVisible: props.header?.isVisible ?? true,
+      fontStyle: props.header?.fontStyle ?? "heading4",
+      prefix: props.header?.prefix ?? "Next bill due"
+    },
+    price: {
+      isVisible: props.price?.isVisible ?? true,
+      fontStyle: props.price?.fontStyle ?? "heading1"
+    },
+    contractEndDate: {
+      isVisible: props.contractEndDate?.isVisible ?? true,
+      fontStyle: props.contractEndDate?.fontStyle ?? "heading6",
+      prefix: props.contractEndDate?.prefix ?? "Contract ends"
+    }
+  };
+}
+var UpcomingBill = (0, import_react10.forwardRef)(({ className, ...rest }, ref) => {
+  const props = resolveDesignProps4(rest);
+  const { settings } = useEmbed();
+  const { bill } = (0, import_react10.useMemo)(() => {
+    return {
+      bill: {
+        amount: 200,
+        period: "monthly",
+        dueDate: toPrettyDate(/* @__PURE__ */ new Date("2024-06-12")),
+        endDate: (/* @__PURE__ */ new Date("2025-05-12")).toLocaleDateString()
+      }
+    };
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { ref, className, children: [
+    props.header.isVisible && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      Flex,
+      {
+        $justifyContent: "space-between",
+        $alignItems: "center",
+        $margin: "0 0 0.75rem",
+        children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+          Text,
+          {
+            $font: settings.theme.typography[props.header.fontStyle].fontFamily,
+            $size: settings.theme.typography[props.header.fontStyle].fontSize,
+            $weight: settings.theme.typography[props.header.fontStyle].fontWeight,
+            $color: settings.theme.typography[props.header.fontStyle].color,
+            children: [
+              props.header.prefix,
+              " ",
+              bill.dueDate
+            ]
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Flex, { $justifyContent: "space-between", $alignItems: "start", $gap: "1rem", children: [
+      props.price.isVisible && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Flex, { $alignItems: "end", $flexGrow: "1", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+        Text,
+        {
+          $font: settings.theme.typography[props.price.fontStyle].fontFamily,
+          $size: settings.theme.typography[props.price.fontStyle].fontSize,
+          $weight: settings.theme.typography[props.price.fontStyle].fontWeight,
+          $color: settings.theme.typography[props.price.fontStyle].color,
+          $lineHeight: 1,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              Text,
+              {
+                $size: "0.75em",
+                $color: settings.theme.typography[props.price.fontStyle].color,
+                children: "$"
+              }
+            ),
+            bill.amount
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Box, { $maxWidth: "140px", $lineHeight: "1", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+        Text,
+        {
+          $font: settings.theme.typography[props.contractEndDate.fontStyle].fontFamily,
+          $size: settings.theme.typography[props.contractEndDate.fontStyle].fontSize,
+          $weight: settings.theme.typography[props.contractEndDate.fontStyle].fontWeight,
+          $color: settings.theme.typography[props.contractEndDate.fontStyle].color,
+          children: [
+            "Estimated monthly bill.",
+            props.contractEndDate.isVisible && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+              "\xA0",
+              props.contractEndDate.prefix,
+              " ",
+              bill.endDate,
+              "."
+            ] })
+          ]
+        }
+      ) })
+    ] })
+  ] });
+});
+
+// src/components/elements/payment-method/PaymentMethod.tsx
+var import_react11 = require("react");
+var import_react_dom2 = require("react-dom");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var resolveDesignProps5 = (props) => {
+  return {
+    header: {
+      isVisible: props.header?.isVisible ?? true,
+      fontStyle: props.header?.fontStyle ?? "heading4"
+    },
+    functions: {
+      allowEdit: props.functions?.allowEdit ?? true
+    }
+  };
 };
+var PaymentMethod = (0, import_react11.forwardRef)(({ children, className, portal, ...rest }, ref) => {
+  const props = resolveDesignProps5(rest);
+  const { settings, layout, setLayout } = useEmbed();
+  const paymentMethod = (0, import_react11.useMemo)(() => {
+    const cardNumber = "4512";
+    const expirationDate = "2024-12-22";
+    const timeToExpiration = Math.round(
+      +new Date(expirationDate) - +/* @__PURE__ */ new Date()
+    );
+    const monthsToExpiration = Math.round(
+      timeToExpiration / (1e3 * 60 * 60 * 24 * 30)
+    );
+    return {
+      cardNumber,
+      monthsToExpiration
+    };
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { ref, className, children: [
+    props.header.isVisible && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+      Flex,
+      {
+        $justifyContent: "space-between",
+        $alignItems: "center",
+        $margin: "0 0 1rem",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            Text,
+            {
+              $font: settings.theme.typography[props.header.fontStyle].fontFamily,
+              $size: settings.theme.typography[props.header.fontStyle].fontSize,
+              $weight: settings.theme.typography[props.header.fontStyle].fontWeight,
+              $color: settings.theme.typography[props.header.fontStyle].color,
+              children: "Payment Method"
+            }
+          ),
+          Math.abs(paymentMethod.monthsToExpiration) < 4 && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            Text,
+            {
+              $font: settings.theme.typography.text.fontFamily,
+              $size: 14,
+              $color: "#DB6769",
+              children: paymentMethod.monthsToExpiration > 0 ? `Expires in ${paymentMethod.monthsToExpiration} mo` : "Expired"
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+      Flex,
+      {
+        $justifyContent: "space-between",
+        $alignItems: "center",
+        $margin: "0 0 1rem",
+        $background: `${hexToHSL(settings.theme.card.background).l > 50 ? darken(settings.theme.card.background, 10) : lighten(settings.theme.card.background, 20)}`,
+        $padding: "0.375rem 1rem",
+        $borderRadius: "9999px",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Text, { $font: settings.theme.typography.text.fontFamily, $size: 14, children: [
+            "\u{1F4B3} Card ending in ",
+            paymentMethod.cardNumber
+          ] }),
+          props.functions.allowEdit && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            Text,
+            {
+              tabIndex: 0,
+              onClick: () => {
+                if (layout !== "payment")
+                  return;
+                setLayout("payment");
+              },
+              $font: settings.theme.typography.link.fontFamily,
+              $size: settings.theme.typography.link.fontSize,
+              $weight: settings.theme.typography.link.fontWeight,
+              $color: settings.theme.typography.link.color,
+              children: "Edit"
+            }
+          )
+        ]
+      }
+    ),
+    layout === "payment" && (0, import_react_dom2.createPortal)(
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        Box,
+        {
+          $position: "absolute",
+          $top: "50%",
+          $left: "50%",
+          $zIndex: "999999",
+          $transform: "translate(-50%, -50%)",
+          $width: "100%",
+          $height: "100%",
+          $backgroundColor: "#B5B5B580",
+          children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+            Flex,
+            {
+              $position: "relative",
+              $top: "50%",
+              $left: "50%",
+              $transform: "translate(-50%, -50%)",
+              $width: "956px",
+              $height: "700px",
+              $backgroundColor: "#FBFBFB",
+              $borderRadius: "8px",
+              $boxShadow: "0px 1px 20px 0px #1018280F, 0px 1px 3px 0px #1018281A;",
+              id: "select-plan-dialog",
+              role: "dialog",
+              "aria-labelledby": "select-plan-dialog-label",
+              "aria-modal": "true",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                  Box,
+                  {
+                    $position: "absolute",
+                    $top: "0.25rem",
+                    $right: "0.75rem",
+                    $cursor: "pointer",
+                    onClick: () => {
+                      setLayout("portal");
+                    },
+                    children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Icon2, { name: "close", style: { fontSize: 36, color: "#B8B8B8" } })
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Flex, { $flexDirection: "column", $gap: "1rem", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                  Text,
+                  {
+                    as: "h1",
+                    id: "select-plan-dialog-label",
+                    $size: 24,
+                    $weight: 800,
+                    children: "Add payment method"
+                  }
+                ) })
+              ]
+            }
+          )
+        }
+      ),
+      portal || document.body
+    )
+  ] });
+});
+
+// src/components/elements/invoices/Invoices.tsx
+var import_react12 = require("react");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function resolveDesignProps6(props) {
+  return {
+    header: {
+      isVisible: props.header?.isVisible ?? true,
+      fontStyle: props.header?.fontStyle ?? "heading4"
+    },
+    date: {
+      isVisible: props.date?.isVisible ?? true,
+      fontStyle: props.date?.fontStyle ?? "link"
+    },
+    amount: {
+      isVisible: props.amount?.isVisible ?? true,
+      fontStyle: props.amount?.fontStyle ?? "text"
+    },
+    limit: {
+      isVisible: props.limit?.isVisible ?? true,
+      number: props.limit?.number ?? 2
+    },
+    collapse: {
+      isVisible: props.collapse?.isVisible ?? true,
+      fontStyle: props.collapse?.fontStyle ?? "link"
+    }
+  };
+}
+var Invoices = (0, import_react12.forwardRef)(({ className, ...rest }, ref) => {
+  const props = resolveDesignProps6(rest);
+  const { settings } = useEmbed();
+  const { invoices } = (0, import_react12.useMemo)(() => {
+    return {
+      invoices: [
+        {
+          date: toPrettyDate(/* @__PURE__ */ new Date("2024-05-12")),
+          amount: 200
+        },
+        {
+          date: toPrettyDate(/* @__PURE__ */ new Date("2024-04-12")),
+          amount: 200
+        }
+      ]
+    };
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { ref, className, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Flex, { $flexDirection: "column", $gap: "1rem", children: [
+    props.header.isVisible && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Flex, { $justifyContent: "space-between", $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      Text,
+      {
+        $font: 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"
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Flex, { $flexDirection: "column", $gap: "0.5rem", children: invoices.slice(
+      0,
+      props.limit.isVisible && props.limit.number || invoices.length
+    ).map(({ date, amount }, index) => {
+      return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Flex, { $justifyContent: "space-between", children: [
+        props.date.isVisible && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          Text,
+          {
+            $font: settings.theme.typography[props.date.fontStyle].fontFamily,
+            $size: settings.theme.typography[props.date.fontStyle].fontSize,
+            $weight: settings.theme.typography[props.date.fontStyle].fontWeight,
+            $color: settings.theme.typography[props.date.fontStyle].color,
+            children: toPrettyDate(date)
+          }
+        ),
+        props.amount.isVisible && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+          Text,
+          {
+            $font: settings.theme.typography[props.amount.fontStyle].fontFamily,
+            $size: settings.theme.typography[props.amount.fontStyle].fontSize,
+            $weight: settings.theme.typography[props.amount.fontStyle].fontWeight,
+            $color: settings.theme.typography[props.amount.fontStyle].color,
+            children: [
+              "$",
+              amount
+            ]
+          }
+        )
+      ] }, index);
+    }) }),
+    props.collapse.isVisible && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Flex, { $alignItems: "center", $gap: "0.5rem", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon2, { name: "chevron-down", style: { color: "#D0D0D0" } }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        Text,
+        {
+          $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"
+        }
+      )
+    ] })
+  ] }) });
+});
+
+// src/components/embed/ComponentTree.tsx
+var import_react14 = require("react");
 
 // src/components/embed/renderer.ts
+var import_react13 = require("react");
 var components = {
   Card,
+  PlanManager,
   IncludedFeatures,
-  PlanManager
+  UpcomingBill,
+  PaymentMethod,
+  MeteredFeatures
 };
 function createRenderer(options) {
   const { useFallback = true } = options || {};
@@ -7840,13 +9217,14 @@ function createRenderer(options) {
     if (!component) {
       return null;
     }
-    const { className, style, ...rootProps } = props;
-    const resolvedProps = node2.id === "ROOT" ? rootProps : props;
+    const { className, ...rest } = props;
+    const resolvedProps = component === "div" ? rest : props;
     const resolvedChildren = children.map(renderNode);
-    return (0, import_react9.createElement)(
+    return (0, import_react13.createElement)(
       component,
       {
-        ...resolvedProps,
+        className,
+        ...component !== "div" && { resolvedProps },
         ...Object.keys(custom).length > 0 && { custom },
         key: index
       },
@@ -7856,30 +9234,30 @@ function createRenderer(options) {
 }
 
 // src/components/embed/ComponentTree.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var ComponentTree = () => {
-  const [children, setChildren] = (0, import_react10.useState)("Loading");
+  const [children, setChildren] = (0, import_react14.useState)("Loading");
   const { error, nodes } = useEmbed();
-  (0, import_react10.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     const renderer = createRenderer();
     setChildren(nodes.map(renderer));
   }, [nodes]);
   if (error) {
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { children: error.message });
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { children: error.message });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_jsx_runtime13.Fragment, { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_jsx_runtime14.Fragment, { children });
 };
 
 // src/components/embed/Embed.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
-var SchematicEmbed = ({ id, accessToken }) => {
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var SchematicEmbed = ({ id, accessToken, apiConfig }) => {
   if (accessToken?.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { children: "Please provide an access token." });
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { children: "Please provide an access token." });
   }
   if (!accessToken?.startsWith("token_")) {
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { children: 'Invalid access token; your temporary access token will start with "token_".' });
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { children: 'Invalid access token; your temporary access token will start with "token_".' });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(EmbedProvider, { id, accessToken, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ComponentTree, {}) });
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(EmbedProvider, { id, accessToken, apiConfig, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ComponentTree, {}) });
 };
 /*! Bundled license information: