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

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

Files changed (4) hide show

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

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

@@ -4934,7 +4934,7 @@ var unitlessKeys = {
 var f = "undefined" != typeof process && void 0 !== process.env && (process.env.REACT_APP_SC_ATTR || process.env.SC_ATTR) || "data-styled";
 var m = "active";
 var y = "data-styled-version";
-var v = "6.1.12";
+var v = "6.1.13";
 var g = "/*!sc*/\n";
 var S = "undefined" != typeof window && "HTMLElement" in window;
 var w = Boolean("boolean" == typeof SC_DISABLE_SPEEDY ? SC_DISABLE_SPEEDY : "undefined" != typeof process && void 0 !== process.env && void 0 !== process.env.REACT_APP_SC_DISABLE_SPEEDY && "" !== process.env.REACT_APP_SC_DISABLE_SPEEDY ? "false" !== process.env.REACT_APP_SC_DISABLE_SPEEDY && process.env.REACT_APP_SC_DISABLE_SPEEDY : "undefined" != typeof process && void 0 !== process.env && void 0 !== process.env.SC_DISABLE_SPEEDY && "" !== process.env.SC_DISABLE_SPEEDY ? "false" !== process.env.SC_DISABLE_SPEEDY && process.env.SC_DISABLE_SPEEDY : true);
@@ -5614,6 +5614,143 @@ var vt = function() {
 var St = "__sc-".concat(f, "__");
 "undefined" != typeof window && (window[St] || (window[St] = 0), 1 === window[St] && console.warn("It looks like there are several instances of 'styled-components' initialized in this application. This may cause dynamic styles to not render properly, errors during the rehydration process, a missing theme prop, and makes your application bigger without good reason.\n\nSee https://s-c.sh/2BAXzed for more info."), window[St] += 1);
+// node_modules/@stripe/stripe-js/dist/index.mjs
+var V3_URL = "https://js.stripe.com/v3";
+var V3_URL_REGEX = /^https:\/\/js\.stripe\.com\/v3\/?(\?.*)?$/;
+var EXISTING_SCRIPT_MESSAGE = "loadStripe.setLoadParameters was called but an existing Stripe.js script already exists in the document; existing script parameters will be used";
+var findScript = function findScript2() {
+  var scripts = document.querySelectorAll('script[src^="'.concat(V3_URL, '"]'));
+  for (var i2 = 0; i2 < scripts.length; i2++) {
+    var script = scripts[i2];
+    if (!V3_URL_REGEX.test(script.src)) {
+      continue;
+    }
+    return script;
+  }
+  return null;
+};
+var injectScript = function injectScript2(params) {
+  var queryString = params && !params.advancedFraudSignals ? "?advancedFraudSignals=false" : "";
+  var script = document.createElement("script");
+  script.src = "".concat(V3_URL).concat(queryString);
+  var headOrBody = document.head || document.body;
+  if (!headOrBody) {
+    throw new Error("Expected document.body not to be null. Stripe.js requires a <body> element.");
+  }
+  headOrBody.appendChild(script);
+  return script;
+};
+var registerWrapper = function registerWrapper2(stripe, startTime) {
+  if (!stripe || !stripe._registerWrapper) {
+    return;
+  }
+  stripe._registerWrapper({
+    name: "stripe-js",
+    version: "4.3.0",
+    startTime
+  });
+};
+var stripePromise = null;
+var onErrorListener = null;
+var onLoadListener = null;
+var onError = function onError2(reject) {
+  return function() {
+    reject(new Error("Failed to load Stripe.js"));
+  };
+};
+var onLoad = function onLoad2(resolve, reject) {
+  return function() {
+    if (window.Stripe) {
+      resolve(window.Stripe);
+    } else {
+      reject(new Error("Stripe.js not available"));
+    }
+  };
+};
+var loadScript = function loadScript2(params) {
+  if (stripePromise !== null) {
+    return stripePromise;
+  }
+  stripePromise = new Promise(function(resolve, reject) {
+    if (typeof window === "undefined" || typeof document === "undefined") {
+      resolve(null);
+      return;
+    }
+    if (window.Stripe && params) {
+      console.warn(EXISTING_SCRIPT_MESSAGE);
+    }
+    if (window.Stripe) {
+      resolve(window.Stripe);
+      return;
+    }
+    try {
+      var script = findScript();
+      if (script && params) {
+        console.warn(EXISTING_SCRIPT_MESSAGE);
+      } else if (!script) {
+        script = injectScript(params);
+      } else if (script && onLoadListener !== null && onErrorListener !== null) {
+        var _script$parentNode;
+        script.removeEventListener("load", onLoadListener);
+        script.removeEventListener("error", onErrorListener);
+        (_script$parentNode = script.parentNode) === null || _script$parentNode === void 0 ? void 0 : _script$parentNode.removeChild(script);
+        script = injectScript(params);
+      }
+      onLoadListener = onLoad(resolve, reject);
+      onErrorListener = onError(reject);
+      script.addEventListener("load", onLoadListener);
+      script.addEventListener("error", onErrorListener);
+    } catch (error) {
+      reject(error);
+      return;
+    }
+  });
+  return stripePromise["catch"](function(error) {
+    stripePromise = null;
+    return Promise.reject(error);
+  });
+};
+var initStripe = function initStripe2(maybeStripe, args, startTime) {
+  if (maybeStripe === null) {
+    return null;
+  }
+  var stripe = maybeStripe.apply(void 0, args);
+  registerWrapper(stripe, startTime);
+  return stripe;
+};
+var stripePromise$1;
+var loadCalled = false;
+var getStripePromise = function getStripePromise2() {
+  if (stripePromise$1) {
+    return stripePromise$1;
+  }
+  stripePromise$1 = loadScript(null)["catch"](function(error) {
+    stripePromise$1 = null;
+    return Promise.reject(error);
+  });
+  return stripePromise$1;
+};
+Promise.resolve().then(function() {
+  return getStripePromise();
+})["catch"](function(error) {
+  if (!loadCalled) {
+    console.warn(error);
+  }
+});
+var loadStripe = function loadStripe2() {
+  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+    args[_key] = arguments[_key];
+  }
+  loadCalled = true;
+  var startTime = Date.now();
+  return getStripePromise().then(function(maybeStripe) {
+    return initStripe(maybeStripe, args, startTime);
+  });
+};
+// src/context/embed.tsx
+import { Elements } from "@stripe/react-stripe-js";
 // src/api/runtime.ts
 var BASE_PATH = "https://api.schematichq.com".replace(/\/+$/, "");
 var Configuration = class {
@@ -5930,6 +6067,30 @@ function BillingProductDetailResponseDataFromJSONTyped(json, ignoreDiscriminator
   };
 }
+// src/api/models/BillingProductForSubscriptionResponseData.ts
+function BillingProductForSubscriptionResponseDataFromJSON(json) {
+  return BillingProductForSubscriptionResponseDataFromJSONTyped(json, false);
+}
+function BillingProductForSubscriptionResponseDataFromJSONTyped(json, ignoreDiscriminator) {
+  if (json == null) {
+    return json;
+  }
+  return {
+    accountId: json["account_id"],
+    createdAt: new Date(json["created_at"]),
+    currency: json["currency"],
+    environmentId: json["environment_id"],
+    externalId: json["external_id"],
+    id: json["id"],
+    interval: json["interval"] == null ? void 0 : json["interval"],
+    name: json["name"],
+    price: json["price"],
+    quantity: json["quantity"],
+    subscriptionId: json["subscription_id"],
+    updatedAt: new Date(json["updated_at"])
+  };
+}
 // src/api/models/BillingSubscriptionResponseData.ts
 function BillingSubscriptionResponseDataFromJSON(json) {
   return BillingSubscriptionResponseDataFromJSONTyped(json, false);
@@ -5952,7 +6113,6 @@ function ChangeSubscriptionRequestBodyToJSON(value) {
     return value;
   }
   return {
-    action: value["action"],
     new_plan_id: value["newPlanId"],
     new_price_id: value["newPriceId"]
   };
@@ -6364,6 +6524,81 @@ function CompanyPlanDetailResponseDataFromJSONTyped(json, ignoreDiscriminator) {
   };
 }
+// src/api/models/InvoiceResponseData.ts
+function InvoiceResponseDataFromJSON(json) {
+  return InvoiceResponseDataFromJSONTyped(json, false);
+}
+function InvoiceResponseDataFromJSONTyped(json, ignoreDiscriminator) {
+  if (json == null) {
+    return json;
+  }
+  return {
+    amountDue: json["amount_due"],
+    amountPaid: json["amount_paid"],
+    amountRemaining: json["amount_remaining"],
+    collectionMethod: json["collection_method"],
+    companyId: json["company_id"] == null ? void 0 : json["company_id"],
+    createdAt: new Date(json["created_at"]),
+    currency: json["currency"],
+    customerExternalId: json["customer_external_id"],
+    dueDate: json["due_date"] == null ? void 0 : new Date(json["due_date"]),
+    environmentId: json["environment_id"],
+    externalId: json["external_id"],
+    id: json["id"],
+    subscriptionExternalId: json["subscription_external_id"] == null ? void 0 : json["subscription_external_id"],
+    subtotal: json["subtotal"],
+    updatedAt: new Date(json["updated_at"])
+  };
+}
+// src/api/models/PaymentMethodResponseData.ts
+function PaymentMethodResponseDataFromJSON(json) {
+  return PaymentMethodResponseDataFromJSONTyped(json, false);
+}
+function PaymentMethodResponseDataFromJSONTyped(json, ignoreDiscriminator) {
+  if (json == null) {
+    return json;
+  }
+  return {
+    cardBrand: json["card_brand"] == null ? void 0 : json["card_brand"],
+    cardExpMonth: json["card_exp_month"] == null ? void 0 : json["card_exp_month"],
+    cardExpYear: json["card_exp_year"] == null ? void 0 : json["card_exp_year"],
+    cardLast4: json["card_last4"] == null ? void 0 : json["card_last4"],
+    companyId: json["company_id"] == null ? void 0 : json["company_id"],
+    createdAt: new Date(json["created_at"]),
+    customerExternalId: json["customer_external_id"],
+    environmentId: json["environment_id"],
+    externalId: json["external_id"],
+    id: json["id"],
+    invoiceExternalId: json["invoice_external_id"] == null ? void 0 : json["invoice_external_id"],
+    paymentMethodType: json["payment_method_type"],
+    subscriptionExternalId: json["subscription_external_id"] == null ? void 0 : json["subscription_external_id"],
+    updatedAt: new Date(json["updated_at"])
+  };
+}
+// src/api/models/CompanySubscriptionResponseData.ts
+function CompanySubscriptionResponseDataFromJSON(json) {
+  return CompanySubscriptionResponseDataFromJSONTyped(json, false);
+}
+function CompanySubscriptionResponseDataFromJSONTyped(json, ignoreDiscriminator) {
+  if (json == null) {
+    return json;
+  }
+  return {
+    customerExternalId: json["customer_external_id"],
+    expiredAt: json["expired_at"] == null ? void 0 : new Date(json["expired_at"]),
+    interval: json["interval"],
+    latestInvoice: json["latest_invoice"] == null ? void 0 : InvoiceResponseDataFromJSON(json["latest_invoice"]),
+    paymentMethod: json["payment_method"] == null ? void 0 : PaymentMethodResponseDataFromJSON(json["payment_method"]),
+    products: json["products"].map(
+      BillingProductForSubscriptionResponseDataFromJSON
+    ),
+    subscriptionExternalId: json["subscription_external_id"],
+    totalPrice: json["total_price"]
+  };
+}
 // src/api/models/ComponentResponseData.ts
 function ComponentResponseDataFromJSON(json) {
   return ComponentResponseDataFromJSONTyped(json, false);
@@ -6428,7 +6663,7 @@ function StripeEmbedInfoFromJSONTyped(json, ignoreDiscriminator) {
     return json;
   }
   return {
-    customerEkey: json["customer_ekey"],
+    customerEkey: json["customer_ekey"] == null ? void 0 : json["customer_ekey"],
     publishableKey: json["publishable_key"]
   };
 }
@@ -6448,7 +6683,8 @@ function ComponentHydrateResponseDataFromJSONTyped(json, ignoreDiscriminator) {
     company: json["company"] == null ? void 0 : CompanyDetailResponseDataFromJSON(json["company"]),
     component: json["component"] == null ? void 0 : ComponentResponseDataFromJSON(json["component"]),
     featureUsage: json["feature_usage"] == null ? void 0 : FeatureUsageDetailResponseDataFromJSON(json["feature_usage"]),
-    stripeEmbed: json["stripe_embed"] == null ? void 0 : StripeEmbedInfoFromJSON(json["stripe_embed"])
+    stripeEmbed: json["stripe_embed"] == null ? void 0 : StripeEmbedInfoFromJSON(json["stripe_embed"]),
+    subscription: json["subscription"] == null ? void 0 : CompanySubscriptionResponseDataFromJSON(json["subscription"])
   };
 }
@@ -6661,28 +6897,36 @@ async function fetchComponent(id, accessToken, options) {
     const json = inflate_1(Uint8Array.from(Object.values(compressed)), {
       to: "string"
     });
-    const ast = getEditorState(JSON.stringify(json));
+    const ast = getEditorState(json);
     if (ast) {
       Object.assign(settings, ast.ROOT.props);
       nodes.push(...parseEditorState(ast));
     }
   }
+  let stripe = null;
+  if (data.stripeEmbed?.publishableKey) {
+    stripe = loadStripe(data.stripeEmbed.publishableKey);
+  }
   return {
     data,
     nodes,
-    settings
+    settings,
+    stripe
   };
 }
 var EmbedContext = createContext({
   data: {},
   nodes: [],
   settings: { ...defaultSettings },
+  stripe: null,
   layout: "portal",
   error: void 0,
   setData: () => {
   },
   updateSettings: () => {
   },
+  setStripe: () => {
+  },
   setLayout: () => {
   }
 });
@@ -6698,12 +6942,15 @@ var EmbedProvider = ({
       data: {},
       nodes: [],
       settings: { ...defaultSettings },
+      stripe: null,
       layout: "portal",
       error: void 0,
       setData: () => {
       },
       updateSettings: () => {
       },
+      setStripe: () => {
+      },
       setLayout: () => {
       }
     };
@@ -6723,7 +6970,7 @@ var EmbedProvider = ({
     if (!id || !accessToken) {
       return;
     }
-    fetchComponent(id, accessToken, apiConfig).then((resolvedData) => {
+    fetchComponent(id, accessToken, apiConfig).then(async (resolvedData) => {
       setState((prev2) => ({ ...prev2, ...resolvedData }));
     }).catch((error) => setState((prev2) => ({ ...prev2, error })));
   }, [id, accessToken, apiConfig]);
@@ -6757,6 +7004,15 @@ var EmbedProvider = ({
     },
     [setState]
   );
+  const setStripe = useCallback(
+    (stripe) => {
+      setState((prev2) => ({
+        ...prev2,
+        stripe
+      }));
+    },
+    [setState]
+  );
   const setLayout = useCallback(
     (layout) => {
       setState((prev2) => ({
@@ -6766,6 +7022,47 @@ var EmbedProvider = ({
     },
     [setState]
   );
+  const renderChildren = () => {
+    if (state.stripe) {
+      return /* @__PURE__ */ jsx(
+        Elements,
+        {
+          stripe: state.stripe,
+          options: {
+            appearance: {
+              theme: "stripe",
+              variables: {
+                // Base
+                spacingUnit: ".25rem",
+                colorPrimary: "#0570de",
+                colorBackground: "#FFFFFF",
+                colorText: "#30313d",
+                colorDanger: "#df1b41",
+                fontFamily: "Public Sans, system-ui, sans-serif",
+                borderRadius: ".5rem",
+                // Layout
+                gridRowSpacing: "1.5rem",
+                gridColumnSpacing: "1.5rem"
+              },
+              rules: {
+                ".Label": {
+                  color: "#020202",
+                  fontWeight: "400",
+                  fontSize: "16px",
+                  marginBottom: "12px"
+                }
+              }
+            },
+            ...state.data.stripeEmbed?.customerEkey && {
+              clientSecret: state.data.stripeEmbed.customerEkey
+            }
+          },
+          children
+        }
+      );
+    }
+    return children;
+  };
   return /* @__PURE__ */ jsx(
     EmbedContext.Provider,
     {
@@ -6773,13 +7070,15 @@ var EmbedProvider = ({
         data: state.data,
         nodes: state.nodes,
         settings: state.settings,
+        stripe: state.stripe,
         layout: state.layout,
         error: state.error,
         setData,
         updateSettings,
+        setStripe,
         setLayout
       },
-      children: /* @__PURE__ */ jsx(ot, { theme: state.settings.theme, children })
+      children: /* @__PURE__ */ jsx(ot, { theme: state.settings.theme, children: renderChildren() })
     }
   );
 };
@@ -7624,12 +7923,7 @@ function contextString(context) {
 }
 // src/context/schematic.tsx
-import {
-  createContext as createContext2,
-  useEffect as useEffect2,
-  useMemo,
-  useState as useState2
-} from "react";
+import { createContext as createContext2, useEffect as useEffect2, useMemo, useState as useState2 } from "react";
 import { jsx as jsx2 } from "react/jsx-runtime";
 var SchematicContext = createContext2({
   flagValues: {}
@@ -7722,11 +8016,13 @@ var useSchematicFlag = (key, opts) => {
   return value;
 };
-// src/components/elements/card/Card.tsx
-import { forwardRef } from "react";
-// src/const/index.ts
-var TEXT_BASE_SIZE = 16;
+// src/components/elements/plan-manager/PlanManager.tsx
+import {
+  forwardRef,
+  useMemo as useMemo2,
+  useState as useState5
+} from "react";
+import { createPortal } from "react-dom";
 // src/utils/color.ts
 function hexToHSL(color) {
@@ -7838,6 +8134,9 @@ function camelToHyphen(str) {
   return str.replace(/([a-z][A-Z])/g, (g2) => `${g2[0]}-${g2[1].toLowerCase()}`);
 }
+// src/const/index.ts
+var TEXT_BASE_SIZE = 16;
 // src/utils/style.ts
 function attr(key, value) {
   return typeof value !== "undefined" && lt`
@@ -7855,88 +8154,6 @@ attr.rem = function propAsRem(key, value) {
     `;
 };
-// src/components/elements/card/styles.ts
-var StyledCard = dt.div(
-  ({
-    theme,
-    $sectionLayout = "merged",
-    $borderRadius = 8,
-    $padding = 48,
-    $shadow = true
-  }) => {
-    return lt`
-      box-sizing: border-box;
-      font-size: ${TEXT_BASE_SIZE}px;
-      *,
-      *::before,
-      *::after {
-        box-sizing: inherit;
-      }
-      > * {
-        padding: ${$padding * 0.75 / TEXT_BASE_SIZE}rem
-          ${$padding / TEXT_BASE_SIZE}rem;
-        color: ${theme.typography.text.color};
-      }
-      ${() => {
-      const { l: l2 } = hexToHSL(theme.card.background);
-      const borderColor = l2 > 50 ? darken(theme.card.background, 10) : lighten(theme.card.background, 30);
-      const borderRadius = `${$borderRadius / TEXT_BASE_SIZE}rem`;
-      const boxShadow = "0px 1px 20px 0px #1018280F, 0px 1px 3px 0px #1018281A";
-      if ($sectionLayout === "merged") {
-        return lt`
-            background: ${({ theme: theme2 }) => theme2.card.background};
-            border-radius: ${borderRadius};
-            ${$shadow && `box-shadow: ${boxShadow};`}
-            > :not(:last-child) {
-              border-bottom: 1px solid ${borderColor};
-            }
-          `;
-      }
-      return lt`
-          > :not(:last-child) {
-            margin-bottom: 1rem;
-          }
-          > * {
-            background: ${theme.card.background};
-            border-radius: ${borderRadius};
-            ${$shadow && `box-shadow: ${boxShadow};`}
-          }
-        `;
-    }}
-    `;
-  }
-);
-// src/components/elements/card/Card.tsx
-import { jsx as jsx3 } from "react/jsx-runtime";
-var Card = forwardRef(
-  ({ children, className }, ref) => {
-    const { settings } = useEmbed();
-    return /* @__PURE__ */ jsx3(
-      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
-import { forwardRef as forwardRef2, useMemo as useMemo2 } from "react";
-import { createPortal } from "react-dom";
 // src/components/ui/box/styles.ts
 var Box = dt.div((props) => {
   const initialStyles = [];
@@ -8054,7 +8271,7 @@ var Button = dt.button`
 `;
 // src/components/ui/button/Button.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { jsx as jsx3 } from "react/jsx-runtime";
 var Button2 = ({
   color = "white",
   size = "md",
@@ -8063,7 +8280,7 @@ var Button2 = ({
   children,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx3(
     Button,
     {
       $color: color,
@@ -8094,6 +8311,7 @@ var Container = dt.div`
   display: flex;
   justify-content: center;
   align-items: center;
+  flex-shrink: 0;
   border-radius: 9999px;
   ${({ $size }) => {
   const base = 24;
@@ -8130,13 +8348,13 @@ var Container = dt.div`
 `;
 // src/components/ui/icon/Icon.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx4 } from "react/jsx-runtime";
 var Icon2 = ({ name, className, ...props }) => {
-  return /* @__PURE__ */ jsx5(Icon, { className: (0, import_classnames.default)("i", `i-${name}`, className), ...props });
+  return /* @__PURE__ */ jsx4(Icon, { className: (0, import_classnames.default)("i", `i-${name}`, className), ...props });
 };
 // src/components/ui/icon/IconRound.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx5 } from "react/jsx-runtime";
 var IconRound = ({
   name,
   variant = "filled",
@@ -8144,7 +8362,7 @@ var IconRound = ({
   colors = ["white", "#e5e7eb"],
   ...props
 }) => {
-  return /* @__PURE__ */ jsx6(Container, { $size: size, $variant: variant, $colors: colors, ...props, children: /* @__PURE__ */ jsx6(Icon2, { name }) });
+  return /* @__PURE__ */ jsx5(Container, { $size: size, $variant: variant, $colors: colors, ...props, children: /* @__PURE__ */ jsx5(Icon2, { name }) });
 };
 // src/components/ui/progress-bar/styles.ts
@@ -8153,7 +8371,7 @@ var Container2 = dt(Flex)`
 `;
 // src/components/ui/progress-bar/ProgressBar.tsx
-import { jsx as jsx7, jsxs } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs } from "react/jsx-runtime";
 var ProgressBar = ({
   progress,
   value,
@@ -8176,14 +8394,14 @@ var ProgressBar = ({
       $gap: `${16 / TEXT_BASE_SIZE}rem`,
       ...props,
       children: [
-        /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx6(
           Flex,
           {
             $position: "relative",
             $alignItems: "center",
             $width: `${barWidth}`,
             $maxWidth: "100%",
-            children: /* @__PURE__ */ jsx7(
+            children: /* @__PURE__ */ jsx6(
               Flex,
               {
                 $position: "relative",
@@ -8192,7 +8410,7 @@ var ProgressBar = ({
                 $height: `${8 / TEXT_BASE_SIZE}rem`,
                 $background: "#F2F4F7",
                 $borderRadius: "9999px",
-                children: /* @__PURE__ */ jsx7(
+                children: /* @__PURE__ */ jsx6(
                   Box,
                   {
                     $width: `${Math.min(progress, 100)}%`,
@@ -8215,41 +8433,155 @@ var ProgressBar = ({
   );
 };
+// src/components/elements/plan-manager/CheckoutForm.tsx
+import { useState as useState4 } from "react";
+import {
+  LinkAuthenticationElement,
+  PaymentElement
+} from "@stripe/react-stripe-js";
+import { useStripe, useElements } from "@stripe/react-stripe-js";
+import { jsx as jsx7, jsxs as jsxs2 } from "react/jsx-runtime";
+var CheckoutForm = () => {
+  const stripe = useStripe();
+  const elements = useElements();
+  const [message, setMessage] = useState4(null);
+  const [isLoading, setIsLoading] = useState4(false);
+  const handleSubmit = async (event) => {
+    event.preventDefault();
+    if (!stripe || !elements) {
+      return;
+    }
+    setIsLoading(true);
+    const { error } = await stripe.confirmPayment({
+      elements,
+      confirmParams: {
+        return_url: window.location.href
+      }
+    });
+    if (error.type === "card_error" || error.type === "validation_error") {
+      setMessage(error.message);
+    } else {
+      setMessage("An unexpected error occured.");
+    }
+    setIsLoading(false);
+  };
+  return /* @__PURE__ */ jsxs2(
+    "form",
+    {
+      id: "payment-form",
+      onSubmit: handleSubmit,
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        height: "100%"
+      },
+      children: [
+        /* @__PURE__ */ jsxs2(
+          Box,
+          {
+            $fontSize: "18px",
+            $marginBottom: "1.5rem",
+            $display: "inline-block",
+            $width: "100%",
+            children: [
+              "Add payment method",
+              " "
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx7(
+          Flex,
+          {
+            $flexDirection: "column",
+            $gap: "1.5rem",
+            $marginBottom: "1.5rem",
+            $width: "100%",
+            children: /* @__PURE__ */ jsx7(
+              LinkAuthenticationElement,
+              {
+                id: "link-authentication-element"
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs2(Flex, { $flexDirection: "column", $width: "100%", $flex: "1", $height: "100%", children: [
+          /* @__PURE__ */ jsx7(PaymentElement, { id: "payment-element" }),
+          message && /* @__PURE__ */ jsx7("div", { id: "payment-message", children: message })
+        ] }),
+        /* @__PURE__ */ jsx7("div", { children: /* @__PURE__ */ jsx7(
+          "button",
+          {
+            disabled: isLoading || !stripe || !elements,
+            id: "submit",
+            style: {
+              backgroundColor: "#000000",
+              color: "#ffffff",
+              paddingTop: ".75rem",
+              paddingBottom: ".75rem",
+              fontSize: "15px",
+              width: "100%",
+              borderRadius: ".5rem",
+              textAlign: "center",
+              cursor: "pointer"
+            },
+            children: /* @__PURE__ */ jsx7("span", { id: "button-text", style: { marginTop: "2.5rem" }, children: isLoading ? /* @__PURE__ */ jsx7("div", { className: "spinner", id: "spinner" }) : "Save payment method" })
+          }
+        ) })
+      ]
+    }
+  );
+};
 // src/components/elements/plan-manager/styles.ts
 var StyledButton = dt(Button2)`
   font-family: "Public Sans", sans-serif;
   font-weight: 500;
   text-align: center;
   width: 100%;
   ${({ $color = "primary", theme }) => {
   const { l: l2 } = hexToHSL(theme[$color]);
-  const color = l2 > 50 ? "#000000" : "#FFFFFF";
+  const textColor = l2 > 50 ? "#000000" : "#FFFFFF";
   return lt`
-      color: ${color};
+      color: ${textColor};
       ${Text} {
-        color: ${color};
+        color: ${textColor};
       }
     `;
 }};
-  ${({ $color = "primary", theme }) => {
+  ${({ $color = "primary", theme, $variant = "filled" }) => {
   const color = theme[$color];
-  return lt`
-      background-color: ${color};
-      border-color: ${color};
-    `;
-}}
+  return $variant === "filled" ? lt`
+          background-color: ${color};
+          border-color: ${color};
+        ` : lt`
+          background-color: transparent;
+          border-color: #d2d2d2;
+          color: #194bfb;
+          ${Text} {
+            color: #194bfb;
+          }
+        `;
+}}
   &:hover {
-    ${({ $color = "primary", theme }) => {
+    ${({ $color = "primary", theme, $variant = "filled" }) => {
   const specified = theme[$color];
   const lightened = lighten(specified, 15);
   const color = specified === lightened ? darken(specified, 15) : lightened;
-  return lt`
-        background-color: ${color};
-        border-color: ${color};
-      `;
+  return $variant === "filled" ? lt`
+            background-color: ${color};
+            border-color: ${color};
+          ` : lt`
+            background-color: ${color};
+            border-color: ${color};
+            color: #ffffff;
+            ${Text} {
+              color: #ffffff;
+            }
+          `;
 }}
   }
@@ -8259,26 +8591,321 @@ var StyledButton = dt(Button2)`
       return lt`
           font-size: ${15 / 16}rem;
           padding: ${12 / 16}rem 0;
-          border-radius: ${8 / 16}rem;
+          border-radius: ${6 / 16}rem;
         `;
     case "md":
       return lt`
           font-size: ${17 / 16}rem;
           padding: ${16 / 16}rem 0;
-          border-radius: ${10 / 16}rem;
+          border-radius: ${8 / 16}rem;
         `;
     case "lg":
       return lt`
           font-size: ${19 / 16}rem;
           padding: ${20 / 16}rem 0;
-          border-radius: ${12 / 16}rem;
+          border-radius: ${10 / 16}rem;
         `;
   }
 }}
 `;
 // src/components/elements/plan-manager/PlanManager.tsx
-import { Fragment, jsx as jsx8, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
+var OverlayHeader = ({ children }) => {
+  const { setLayout } = useEmbed();
+  return /* @__PURE__ */ jsxs3(
+    Flex,
+    {
+      $paddingLeft: "2.5rem",
+      $paddingRight: "2.5rem",
+      $padding: ".75rem 2.5rem",
+      $flexDirection: "row",
+      $justifyContent: "space-between",
+      $alignItems: "center",
+      $borderBottom: "1px solid #DEDEDE",
+      $gap: "1rem",
+      $backgroundColor: "#FFFFFF",
+      $borderRadius: ".5rem .5rem 0 0",
+      children: [
+        children,
+        /* @__PURE__ */ jsx8("div", { children: /* @__PURE__ */ jsx8(
+          Box,
+          {
+            $cursor: "pointer",
+            onClick: () => {
+              setLayout("portal");
+            },
+            children: /* @__PURE__ */ jsx8(Icon2, { name: "close", style: { fontSize: 36, color: "#B8B8B8" } })
+          }
+        ) })
+      ]
+    }
+  );
+};
+var OverlayWrapper = ({
+  children,
+  size = "lg"
+}) => {
+  const sizeWidthMap = {
+    md: "700px",
+    lg: "75%"
+  };
+  const sizeHeighthMap = {
+    md: "auto",
+    lg: "75%"
+  };
+  const sizeMaxWidthMap = {
+    md: "auto",
+    lg: "1140px"
+  };
+  return /* @__PURE__ */ jsx8(
+    Box,
+    {
+      $position: "absolute",
+      $top: "50%",
+      $left: "50%",
+      $zIndex: "999999",
+      $transform: "translate(-50%, -50%)",
+      $width: "100%",
+      $height: "100%",
+      $backgroundColor: "#D9D9D9",
+      $overflow: "hidden",
+      children: /* @__PURE__ */ jsx8(
+        Flex,
+        {
+          $position: "relative",
+          $top: "50%",
+          $left: "50%",
+          $transform: "translate(-50%, -50%)",
+          $flexDirection: "column",
+          $maxWidth: sizeMaxWidthMap[size],
+          $width: sizeWidthMap[size],
+          $height: sizeHeighthMap[size],
+          $backgroundColor: "#FBFBFB",
+          $borderBottom: "1px solid #DEDEDE",
+          $borderRadius: "8px",
+          $boxShadow: "0px 1px 20px 0px #1018280F, 0px 1px 3px 0px #1018281A;",
+          id: "select-plan-dialog",
+          role: "dialog",
+          "aria-labelledby": "select-plan-dialog-label",
+          "aria-modal": "true",
+          children
+        }
+      )
+    }
+  );
+};
+var OverlaySideBar = ({
+  pricePeriod,
+  setPricePeriod,
+  setCheckoutStage
+}) => {
+  return /* @__PURE__ */ jsxs3(
+    Flex,
+    {
+      $flexDirection: "column",
+      $background: "white",
+      $borderRadius: "0 0 0.5rem",
+      $maxWidth: "275px",
+      $height: "100%",
+      $boxShadow: "0px 1px 20px 0px #1018280F, 0px 1px 3px 0px #1018281A;",
+      children: [
+        /* @__PURE__ */ jsxs3(
+          Flex,
+          {
+            $flexDirection: "column",
+            $position: "relative",
+            $gap: "1rem",
+            $width: "100%",
+            $height: "auto",
+            $padding: "1.5rem",
+            $borderBottom: "1px solid #DEDEDE",
+            children: [
+              /* @__PURE__ */ jsxs3(Flex, { $flexDirection: "row", $justifyContent: "space-between", children: [
+                /* @__PURE__ */ jsx8(Text, { $size: 20, $weight: 600, children: "Subscription" }),
+                /* @__PURE__ */ jsxs3(
+                  Flex,
+                  {
+                    $border: "1px solid #D9D9D9",
+                    $padding: ".15rem .45rem .15rem .55rem",
+                    $alignItems: "center",
+                    $borderRadius: "5px",
+                    $fontSize: "12px",
+                    children: [
+                      /* @__PURE__ */ jsx8(Box, { $display: "inline-block", $marginRight: ".5rem", children: "$ USD" }),
+                      /* @__PURE__ */ jsx8(
+                        Icon2,
+                        {
+                          name: "chevron-down",
+                          style: {
+                            fontSize: "20px",
+                            lineHeight: "1em"
+                          }
+                        }
+                      )
+                    ]
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs3(
+                Flex,
+                {
+                  $flexDirection: "row",
+                  $border: "1px solid #D9D9D9",
+                  $borderRadius: "40px",
+                  $fontSize: "12px",
+                  $textAlign: "center",
+                  $cursor: "pointer",
+                  children: [
+                    /* @__PURE__ */ jsx8(
+                      Box,
+                      {
+                        onClick: () => setPricePeriod("month"),
+                        $padding: ".25rem .5rem",
+                        $flex: "1",
+                        $fontWeight: pricePeriod === "month" ? "600" : "400",
+                        $backgroundColor: pricePeriod === "month" ? "#DDDDDD" : "white",
+                        $borderRadius: "40px",
+                        children: "Billed monthly"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx8(
+                      Box,
+                      {
+                        onClick: () => setPricePeriod("year"),
+                        $padding: ".25rem .5rem",
+                        $flex: "1",
+                        $fontWeight: pricePeriod === "year" ? "600" : "400",
+                        $backgroundColor: pricePeriod === "year" ? "#DDDDDD" : "white",
+                        $borderRadius: "40px",
+                        children: "Billed yearly"
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx8(Box, { $fontSize: "11px", $color: "#194BFB", children: "Save up to 33% with yearly billing" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs3(
+          Flex,
+          {
+            $flexDirection: "column",
+            $position: "relative",
+            $gap: "1rem",
+            $width: "100%",
+            $height: "auto",
+            $padding: "1.5rem",
+            $flex: "1",
+            $borderBottom: "1px solid #DEDEDE",
+            children: [
+              /* @__PURE__ */ jsx8(Box, { $fontSize: "14px", $color: "#5D5D5D", children: "Plan" }),
+              /* @__PURE__ */ jsxs3(
+                Flex,
+                {
+                  $flexDirection: "column",
+                  $fontSize: "14px",
+                  $color: "#5D5D5D",
+                  $gap: ".5rem",
+                  children: [
+                    /* @__PURE__ */ jsxs3(
+                      Flex,
+                      {
+                        $flexDirection: "row",
+                        $alignItems: "center",
+                        $justifyContent: "space-between",
+                        $fontSize: "14px",
+                        $color: "#5D5D5D",
+                        children: [
+                          /* @__PURE__ */ jsx8(Flex, { $fontSize: "14px", $color: "#5D5D5D", children: "Free" }),
+                          /* @__PURE__ */ jsxs3(Flex, { $fontSize: "12px", $color: "#000000", children: [
+                            "$0/",
+                            pricePeriod
+                          ] })
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsx8(
+                      Box,
+                      {
+                        $width: "100%",
+                        $textAlign: "left",
+                        $opacity: "50%",
+                        $marginBottom: "-.25rem",
+                        $marginTop: "-.25rem",
+                        children: /* @__PURE__ */ jsx8(
+                          Icon2,
+                          {
+                            name: "arrow-down",
+                            style: {
+                              display: "inline-block"
+                            }
+                          }
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs3(
+                      Flex,
+                      {
+                        $flexDirection: "row",
+                        $alignItems: "center",
+                        $justifyContent: "space-between",
+                        $fontSize: "14px",
+                        $color: "#5D5D5D",
+                        children: [
+                          /* @__PURE__ */ jsx8(Flex, { $fontSize: "14px", $color: "#000000", $fontWeight: "600", children: "Professional" }),
+                          /* @__PURE__ */ jsxs3(Flex, { $fontSize: "12px", $color: "#000000", children: [
+                            "$285/",
+                            pricePeriod
+                          ] })
+                        ]
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs3(
+          Flex,
+          {
+            $flexDirection: "column",
+            $position: "relative",
+            $gap: ".75rem",
+            $width: "100%",
+            $height: "auto",
+            $padding: "1.5rem",
+            children: [
+              /* @__PURE__ */ jsxs3(Flex, { $fontSize: "12px", $color: "#5D5D5D", $justifyContent: "space-between", children: [
+                /* @__PURE__ */ jsxs3(Box, { $fontSize: "12px", $color: "#5D5D5D", children: [
+                  "Monthly total:",
+                  " "
+                ] }),
+                /* @__PURE__ */ jsx8(Box, { $fontSize: "12px", $color: "#000000", children: "$285/mo" })
+              ] }),
+              /* @__PURE__ */ jsx8(
+                StyledButton,
+                {
+                  $size: "sm",
+                  onClick: () => {
+                    setCheckoutStage("checkout");
+                  },
+                  children: /* @__PURE__ */ jsxs3(Flex, { $gap: ".5rem", $alignItems: "center", $justifyContent: "center", children: [
+                    /* @__PURE__ */ jsx8("span", { children: "Next: Checkout" }),
+                    /* @__PURE__ */ jsx8(Icon2, { name: "arrow-right" })
+                  ] })
+                }
+              ),
+              /* @__PURE__ */ jsx8(Box, { $fontSize: "12px", $color: "#5D5D5D", children: "Discounts & credits applied at checkout" })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
 var resolveDesignProps = (props) => {
   return {
     header: {
@@ -8307,120 +8934,91 @@ var resolveDesignProps = (props) => {
     }
   };
 };
-var PlanManager = forwardRef2(({ children, className, portal, ...rest }, ref) => {
+var PlanManager = forwardRef(({ children, className, portal, ...rest }, ref) => {
   const props = resolveDesignProps(rest);
-  const { data, settings, layout, setLayout } = useEmbed();
-  const { plan, plans, addOns } = useMemo2(() => {
-    return {
-      plan: data.company?.plan || {},
-      plans: data.company?.plans?.map(({ name, description }) => ({
-        name,
-        description,
-        price: void 0
-      })) || [],
-      addOns: data.company?.addOns?.map(({ name, description }) => ({
+  const [checkoutStage, setCheckoutStage] = useState5(
+    "plan"
+  );
+  const [planPeriod, setPlanPeriod] = useState5("month");
+  const { data, settings, layout, stripe, setLayout } = useEmbed();
+  const { currentPlan, canChangePlan, availablePlans } = useMemo2(() => {
+    const canChangePlan2 = stripe !== null;
+    const availablePlans2 = data.activePlans?.map(
+      ({ name, description, current, monthlyPrice, yearlyPrice }) => ({
         name,
         description,
-        price: void 0
-      })) || []
+        price: planPeriod === "month" ? monthlyPrice?.price : yearlyPrice?.price,
+        current
+      })
+    );
+    return {
+      currentPlan: data.company?.plan,
+      canChangePlan: canChangePlan2,
+      availablePlans: availablePlans2
     };
-  }, [data.company]);
-  return /* @__PURE__ */ jsxs2("div", { ref, className, children: [
-    /* @__PURE__ */ jsxs2(Flex, { $flexDirection: "column", $gap: "0.75rem", $margin: "0 0 3rem", children: [
-      props.header.isVisible && plan && /* @__PURE__ */ jsxs2(
-        Flex,
-        {
-          $justifyContent: "space-between",
-          $alignItems: "center",
-          $width: "100%",
-          $margin: "0 0 1.5rem",
-          children: [
-            /* @__PURE__ */ jsxs2("div", { children: [
-              /* @__PURE__ */ jsx8(Box, { $margin: "0 0 0.75rem", children: /* @__PURE__ */ jsx8(
-                Text,
-                {
-                  $font: settings.theme.typography[props.header.title.fontStyle].fontFamily,
-                  $size: settings.theme.typography[props.header.title.fontStyle].fontSize,
-                  $weight: settings.theme.typography[props.header.title.fontStyle].fontWeight,
-                  $color: settings.theme.typography[props.header.title.fontStyle].color,
-                  $lineHeight: 1,
-                  children: plan.name
-                }
-              ) }),
-              props.header.description.isVisible && plan.description && /* @__PURE__ */ jsx8(
-                Text,
-                {
-                  $font: settings.theme.typography[props.header.description.fontStyle].fontFamily,
-                  $size: settings.theme.typography[props.header.description.fontStyle].fontSize,
-                  $weight: settings.theme.typography[props.header.description.fontStyle].fontWeight,
-                  $color: settings.theme.typography[props.header.description.fontStyle].color,
-                  children: plan.description
-                }
-              )
-            ] }),
-            props.header.price.isVisible && plan.planPrice >= 0 && /* @__PURE__ */ jsxs2(
-              Text,
-              {
-                $font: settings.theme.typography[props.header.price.fontStyle].fontFamily,
-                $size: settings.theme.typography[props.header.price.fontStyle].fontSize,
-                $weight: settings.theme.typography[props.header.price.fontStyle].fontWeight,
-                $color: settings.theme.typography[props.header.price.fontStyle].color,
-                children: [
-                  "$",
-                  plan.planPrice,
-                  "/",
-                  plan.planPeriod
-                ]
-              }
-            )
-          ]
-        }
-      ),
-      props.addOns.isVisible && /* @__PURE__ */ jsxs2(Fragment, { children: [
-        props.addOns.showLabel && /* @__PURE__ */ jsx8(
-          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__ */ jsx8(Box, { $width: "100%", $margin: "0 0 1rem", children: addOns.map((addOn, index) => /* @__PURE__ */ jsxs2(
+  }, [data.company, data.activePlans, stripe, planPeriod]);
+  return /* @__PURE__ */ jsxs3("div", { ref, className, children: [
+    /* @__PURE__ */ jsx8(
+      Flex,
+      {
+        $flexDirection: "column",
+        $gap: "0.75rem",
+        ...canChangePlan && { $margin: "0 0 0.5rem" },
+        children: props.header.isVisible && currentPlan && /* @__PURE__ */ jsxs3(
           Flex,
           {
             $justifyContent: "space-between",
             $alignItems: "center",
             $width: "100%",
+            ...canChangePlan && { $margin: "0 0 1.5rem" },
             children: [
-              /* @__PURE__ */ jsx8(
+              /* @__PURE__ */ jsxs3("div", { children: [
+                /* @__PURE__ */ jsx8(Box, { $margin: "0 0 0.75rem", children: /* @__PURE__ */ jsx8(
+                  Text,
+                  {
+                    $font: settings.theme.typography[props.header.title.fontStyle].fontFamily,
+                    $size: settings.theme.typography[props.header.title.fontStyle].fontSize,
+                    $weight: settings.theme.typography[props.header.title.fontStyle].fontWeight,
+                    $color: settings.theme.typography[props.header.title.fontStyle].color,
+                    $lineHeight: 1,
+                    children: currentPlan.name
+                  }
+                ) }),
+                props.header.description.isVisible && currentPlan.description && /* @__PURE__ */ jsx8(
+                  Text,
+                  {
+                    $font: settings.theme.typography[props.header.description.fontStyle].fontFamily,
+                    $size: settings.theme.typography[props.header.description.fontStyle].fontSize,
+                    $weight: settings.theme.typography[props.header.description.fontStyle].fontWeight,
+                    $color: settings.theme.typography[props.header.description.fontStyle].color,
+                    children: currentPlan.description
+                  }
+                )
+              ] }),
+              props.header.price.isVisible && currentPlan.planPrice >= 0 && currentPlan.planPeriod && /* @__PURE__ */ jsxs3(
                 Text,
                 {
-                  $font: settings.theme.typography[props.addOns.fontStyle].fontFamily,
-                  $size: settings.theme.typography[props.addOns.fontStyle].fontSize,
-                  $weight: settings.theme.typography[props.addOns.fontStyle].fontWeight,
-                  $color: settings.theme.typography[props.addOns.fontStyle].color,
-                  children: addOn.name
+                  $font: settings.theme.typography[props.header.price.fontStyle].fontFamily,
+                  $size: settings.theme.typography[props.header.price.fontStyle].fontSize,
+                  $weight: settings.theme.typography[props.header.price.fontStyle].fontWeight,
+                  $color: settings.theme.typography[props.header.price.fontStyle].color,
+                  children: [
+                    "$",
+                    currentPlan.planPrice,
+                    "/",
+                    currentPlan.planPeriod
+                  ]
                 }
-              ),
-              addOn.price >= 0 && /* @__PURE__ */ jsxs2(Text, { $weight: 500, children: [
-                "$",
-                addOn.price,
-                "/mo"
-              ] })
+              )
             ]
-          },
-          index
-        )) })
-      ] })
-    ] }),
-    props.callToAction.isVisible && /* @__PURE__ */ jsx8(
+          }
+        )
+      }
+    ),
+    canChangePlan && props.callToAction.isVisible && /* @__PURE__ */ jsx8(
       StyledButton,
       {
         onClick: () => {
-          if (layout !== "checkout")
-            return;
           setLayout("checkout");
         },
         $size: props.callToAction.buttonSize,
@@ -8436,91 +9034,277 @@ var PlanManager = forwardRef2(({ children, className, portal, ...rest }, ref) =>
         )
       }
     ),
-    children,
-    layout === "checkout" && createPortal(
-      /* @__PURE__ */ jsx8(
-        Box,
-        {
-          $position: "absolute",
-          $top: "50%",
-          $left: "50%",
-          $zIndex: "999999",
-          $transform: "translate(-50%, -50%)",
-          $width: "100%",
-          $height: "100%",
-          $backgroundColor: "#B5B5B580",
-          children: /* @__PURE__ */ jsxs2(
+    canChangePlan && layout === "checkout" && createPortal(
+      /* @__PURE__ */ jsxs3(OverlayWrapper, { children: [
+        /* @__PURE__ */ jsx8(OverlayHeader, { children: /* @__PURE__ */ jsxs3(Flex, { $gap: "1rem", children: [
+          /* @__PURE__ */ jsxs3(Flex, { $flexDirection: "row", $gap: "0.5rem", $alignItems: "center", children: [
+            /* @__PURE__ */ jsx8(
+              Box,
+              {
+                $width: "15px",
+                $height: "15px",
+                $border: "2px solid #DDDDDD",
+                $borderRadius: "999px",
+                $backgroundColor: "white"
+              }
+            ),
+            /* @__PURE__ */ jsx8(
+              "div",
+              {
+                ...checkoutStage === "plan" && {
+                  style: {
+                    fontWeight: "700"
+                  }
+                },
+                children: "1. Select plan"
+              }
+            ),
+            /* @__PURE__ */ jsx8(
+              Icon2,
+              {
+                name: "chevron-right",
+                style: { fontSize: 16, color: "#D0D0D0" }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs3(Flex, { $flexDirection: "row", $gap: "0.5rem", $alignItems: "center", children: [
+            /* @__PURE__ */ jsx8(
+              Box,
+              {
+                $width: "15px",
+                $height: "15px",
+                $border: "2px solid #DDDDDD",
+                $borderRadius: "999px",
+                $backgroundColor: "white"
+              }
+            ),
+            /* @__PURE__ */ jsx8(
+              "div",
+              {
+                ...checkoutStage === "checkout" && {
+                  style: {
+                    fontWeight: "700"
+                  }
+                },
+                children: "2. Checkout"
+              }
+            ),
+            /* @__PURE__ */ jsx8(
+              Icon2,
+              {
+                name: "chevron-right",
+                style: { fontSize: 16, color: "#D0D0D0" }
+              }
+            )
+          ] })
+        ] }) }),
+        /* @__PURE__ */ jsxs3(Flex, { $flexDirection: "row", $height: "100%", children: [
+          /* @__PURE__ */ jsxs3(
             Flex,
             {
-              $position: "relative",
-              $top: "50%",
-              $left: "50%",
-              $transform: "translate(-50%, -50%)",
-              $width: "956px",
-              $height: "700px",
+              $flexDirection: "column",
+              $gap: "1rem",
+              $padding: "2rem 2.5rem 2rem 2.5rem",
               $backgroundColor: "#FBFBFB",
-              $borderRadius: "8px",
-              $boxShadow: "0px 1px 20px 0px #1018280F, 0px 1px 3px 0px #1018281A;",
-              id: "select-plan-dialog",
-              role: "dialog",
-              "aria-labelledby": "select-plan-dialog-label",
-              "aria-modal": "true",
+              $borderRadius: "0 0.5rem 0",
+              $flex: "1",
+              $height: "100%",
               children: [
-                /* @__PURE__ */ jsx8(
-                  Box,
-                  {
-                    $position: "absolute",
-                    $top: "0.25rem",
-                    $right: "0.75rem",
-                    $cursor: "pointer",
-                    onClick: () => {
-                      setLayout("portal");
-                    },
-                    children: /* @__PURE__ */ jsx8(Icon2, { name: "close", style: { fontSize: 36, color: "#B8B8B8" } })
-                  }
-                ),
-                /* @__PURE__ */ jsxs2(Flex, { $flexDirection: "column", $gap: "1rem", children: [
-                  /* @__PURE__ */ jsx8(
-                    Text,
+                checkoutStage === "plan" && /* @__PURE__ */ jsxs3(Fragment, { children: [
+                  /* @__PURE__ */ jsxs3(
+                    Flex,
                     {
-                      as: "h1",
-                      id: "select-plan-dialog-label",
-                      $size: 24,
-                      $weight: 800,
-                      children: "Select plan"
+                      $flexDirection: "column",
+                      $gap: "1rem",
+                      $marginBottom: "1rem",
+                      children: [
+                        /* @__PURE__ */ jsx8(
+                          Text,
+                          {
+                            as: "h1",
+                            id: "select-plan-dialog-label",
+                            $size: 18,
+                            $marginBottom: ".5rem",
+                            children: "Select plan"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx8(
+                          Text,
+                          {
+                            as: "p",
+                            id: "select-plan-dialog-description",
+                            $size: 14,
+                            $weight: 400,
+                            children: "Choose your base plan"
+                          }
+                        )
+                      ]
                     }
                   ),
-                  /* @__PURE__ */ jsx8(Flex, { $flexDirection: "column", $gap: "1rem", children: plans.map((plan2, index) => /* @__PURE__ */ jsxs2(
+                  /* @__PURE__ */ jsx8(
                     Flex,
                     {
-                      $justifyContent: "space-between",
-                      $alignItems: "center",
-                      $width: "100%",
-                      children: [
-                        /* @__PURE__ */ jsx8(Text, { $size: 20, $weight: 800, children: plan2.name }),
-                        plan2.price >= 0 && /* @__PURE__ */ jsxs2(Text, { children: [
-                          "$",
-                          plan2.price,
-                          "/mo"
-                        ] })
-                      ]
-                    },
-                    index
-                  )) })
-                ] })
+                      $flexDirection: "row",
+                      $gap: "1rem",
+                      $flex: "1",
+                      $height: "100%",
+                      children: availablePlans?.map((plan) => {
+                        return /* @__PURE__ */ jsxs3(
+                          Flex,
+                          {
+                            $height: "100%",
+                            $flexDirection: "column",
+                            $backgroundColor: "white",
+                            $border: plan?.current ? `2px solid #194BFB` : "",
+                            $flex: "1",
+                            $borderRadius: ".5rem",
+                            $boxShadow: "0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 20px rgba(16, 24, 40, 0.06)",
+                            children: [
+                              /* @__PURE__ */ jsxs3(
+                                Flex,
+                                {
+                                  $flexDirection: "column",
+                                  $position: "relative",
+                                  $gap: "1rem",
+                                  $width: "100%",
+                                  $height: "auto",
+                                  $padding: "1.5rem",
+                                  $borderBottom: "1px solid #DEDEDE",
+                                  children: [
+                                    /* @__PURE__ */ jsx8(Text, { $size: 20, $weight: 600, children: plan?.name }),
+                                    /* @__PURE__ */ jsx8(Text, { $size: 14, children: plan?.description }),
+                                    /* @__PURE__ */ jsxs3(Text, { children: [
+                                      /* @__PURE__ */ jsx8(Box, { $display: "inline-block", $fontSize: ".90rem", children: "$" }),
+                                      /* @__PURE__ */ jsx8(Box, { $display: "inline-block", $fontSize: "1.5rem", children: plan?.price ? plan.price : "350" }),
+                                      /* @__PURE__ */ jsxs3(Box, { $display: "inline-block", $fontSize: ".75rem", children: [
+                                        "/",
+                                        planPeriod
+                                      ] })
+                                    ] }),
+                                    plan?.current && /* @__PURE__ */ jsx8(
+                                      Flex,
+                                      {
+                                        $position: "absolute",
+                                        $right: "1rem",
+                                        $top: "1rem",
+                                        $fontSize: ".75rem",
+                                        $color: "white",
+                                        $backgroundColor: "#194BFB",
+                                        $borderRadius: "999px",
+                                        $padding: ".125rem .85rem",
+                                        children: "Current plan"
+                                      }
+                                    )
+                                  ]
+                                }
+                              ),
+                              /* @__PURE__ */ jsx8(
+                                Flex,
+                                {
+                                  $flexDirection: "column",
+                                  $position: "relative",
+                                  $gap: "0.5rem",
+                                  $flex: "1",
+                                  $width: "100%",
+                                  $height: "auto",
+                                  $padding: "1.5rem",
+                                  children: [{}, {}, {}].map(() => {
+                                    return /* @__PURE__ */ jsxs3(Flex, { $flexShrink: "0", $gap: "1rem", children: [
+                                      /* @__PURE__ */ jsx8(
+                                        IconRound,
+                                        {
+                                          name: "server-search",
+                                          size: "tn",
+                                          colors: ["#00000", "#F5F5F5"]
+                                        }
+                                      ),
+                                      /* @__PURE__ */ jsx8(Flex, { $alignItems: "center", children: /* @__PURE__ */ jsx8(Text, { $size: ".75rem", $color: "#00000", children: "5 Queries/mo" }) })
+                                    ] });
+                                  })
+                                }
+                              ),
+                              /* @__PURE__ */ jsx8(
+                                Flex,
+                                {
+                                  $flexDirection: "column",
+                                  $position: "relative",
+                                  $gap: "1rem",
+                                  $width: "100%",
+                                  $height: "auto",
+                                  $padding: "1.5rem",
+                                  children: plan.current ? /* @__PURE__ */ jsxs3(
+                                    Flex,
+                                    {
+                                      $flexDirection: "row",
+                                      $gap: ".5rem",
+                                      $justifyContent: "center",
+                                      $alignItems: "center",
+                                      children: [
+                                        /* @__PURE__ */ jsx8(
+                                          Icon2,
+                                          {
+                                            name: "check-rounded",
+                                            style: {
+                                              fontSize: 24,
+                                              lineHeight: "1em",
+                                              color: "#194BFB"
+                                            }
+                                          }
+                                        ),
+                                        /* @__PURE__ */ jsx8(
+                                          "span",
+                                          {
+                                            style: {
+                                              fontSize: "1rem",
+                                              color: "#7B7B7B"
+                                            },
+                                            children: "Selected"
+                                          }
+                                        )
+                                      ]
+                                    }
+                                  ) : /* @__PURE__ */ jsx8(
+                                    StyledButton,
+                                    {
+                                      $size: "sm",
+                                      $color: "secondary",
+                                      $variant: "outline",
+                                      onClick: () => {
+                                      },
+                                      children: "Select"
+                                    }
+                                  )
+                                }
+                              )
+                            ]
+                          }
+                        );
+                      })
+                    }
+                  )
+                ] }),
+                checkoutStage === "checkout" && /* @__PURE__ */ jsx8(CheckoutForm, {})
               ]
             }
+          ),
+          /* @__PURE__ */ jsx8(
+            OverlaySideBar,
+            {
+              pricePeriod: planPeriod,
+              setPricePeriod: setPlanPeriod,
+              setCheckoutStage
+            }
           )
-        }
-      ),
+        ] })
+      ] }),
       portal || document.body
     )
   ] });
 });
 // src/components/elements/included-features/IncludedFeatures.tsx
-import { forwardRef as forwardRef3, useMemo as useMemo3 } from "react";
-import { jsx as jsx9, jsxs as jsxs3 } from "react/jsx-runtime";
+import { forwardRef as forwardRef2, useMemo as useMemo3 } from "react";
+import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
 function resolveDesignProps2(props) {
   return {
     header: {
@@ -8543,7 +9327,7 @@ function resolveDesignProps2(props) {
     }
   };
 }
-var IncludedFeatures = forwardRef3(({ className, ...rest }, ref) => {
+var IncludedFeatures = forwardRef2(({ className, ...rest }, ref) => {
   const props = resolveDesignProps2(rest);
   const { data, settings } = useEmbed();
   const features = useMemo3(() => {
@@ -8554,7 +9338,7 @@ var IncludedFeatures = forwardRef3(({ className, ...rest }, ref) => {
         allocationType,
         feature,
         period,
-        usage,
+        usage = 0,
         ...props2
       }) => {
         return {
@@ -8573,7 +9357,7 @@ var IncludedFeatures = forwardRef3(({ className, ...rest }, ref) => {
       }
     );
   }, [data.featureUsage]);
-  return /* @__PURE__ */ jsxs3(Flex, { ref, className, $flexDirection: "column", $gap: "1.5rem", children: [
+  return /* @__PURE__ */ jsxs4(Flex, { ref, className, $flexDirection: "column", $gap: "1.5rem", children: [
     props.header.isVisible && /* @__PURE__ */ jsx9(Box, { children: /* @__PURE__ */ jsx9(
       Text,
       {
@@ -8591,7 +9375,7 @@ var IncludedFeatures = forwardRef3(({ className, ...rest }, ref) => {
         }
         return [
           ...acc,
-          /* @__PURE__ */ jsxs3(
+          /* @__PURE__ */ jsxs4(
             Flex,
             {
               $flexWrap: "wrap",
@@ -8599,7 +9383,7 @@ var IncludedFeatures = forwardRef3(({ className, ...rest }, ref) => {
               $alignItems: "center",
               $gap: "1rem",
               children: [
-                /* @__PURE__ */ jsxs3(Flex, { $flexShrink: "0", $gap: "1rem", children: [
+                /* @__PURE__ */ jsxs4(Flex, { $gap: "1rem", children: [
                   props.icons.isVisible && feature?.icon && /* @__PURE__ */ jsx9(
                     IconRound,
                     {
@@ -8618,12 +9402,11 @@ var IncludedFeatures = forwardRef3(({ className, ...rest }, ref) => {
                       $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__ */ jsxs3(Box, { $textAlign: "right", children: [
+                allocationType === "numeric" && feature?.name && /* @__PURE__ */ jsxs4(Box, { $textAlign: "right", children: [
                   props.entitlement.isVisible && /* @__PURE__ */ jsx9(
                     Text,
                     {
@@ -8659,8 +9442,8 @@ var IncludedFeatures = forwardRef3(({ className, ...rest }, ref) => {
 });
 // src/components/elements/metered-features/MeteredFeatures.tsx
-import { forwardRef as forwardRef4, useMemo as useMemo4 } from "react";
-import { jsx as jsx10, jsxs as jsxs4 } from "react/jsx-runtime";
+import { forwardRef as forwardRef3, useMemo as useMemo4 } from "react";
+import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
 function resolveDesignProps3(props) {
   return {
     isVisible: props.isVisible ?? true,
@@ -8689,7 +9472,7 @@ function resolveDesignProps3(props) {
     }
   };
 }
-var MeteredFeatures = forwardRef4(({ className, ...rest }, ref) => {
+var MeteredFeatures = forwardRef3(({ className, ...rest }, ref) => {
   const props = resolveDesignProps3(rest);
   const { data, settings } = useEmbed();
   const features = useMemo4(() => {
@@ -8726,11 +9509,11 @@ var MeteredFeatures = forwardRef4(({ className, ...rest }, ref) => {
       }
       return [
         ...acc,
-        /* @__PURE__ */ jsxs4(Flex, { $gap: "1.5rem", children: [
+        /* @__PURE__ */ jsxs5(Flex, { $gap: "1.5rem", children: [
           props.icon.isVisible && feature?.icon && /* @__PURE__ */ jsx10(Box, { $flexShrink: "0", children: /* @__PURE__ */ jsx10(IconRound, { name: feature.icon, size: "sm" }) }),
-          /* @__PURE__ */ jsxs4(Box, { $flexGrow: "1", children: [
-            /* @__PURE__ */ jsxs4(Flex, { children: [
-              feature?.name && /* @__PURE__ */ jsxs4(Box, { $flexGrow: "1", children: [
+          /* @__PURE__ */ jsxs5(Box, { $flexGrow: "1", children: [
+            /* @__PURE__ */ jsxs5(Flex, { children: [
+              feature?.name && /* @__PURE__ */ jsxs5(Box, { $flexGrow: "1", children: [
                 /* @__PURE__ */ jsx10(
                   Text,
                   {
@@ -8754,7 +9537,7 @@ var MeteredFeatures = forwardRef4(({ className, ...rest }, ref) => {
                   }
                 )
               ] }),
-              allocationType === "numeric" && feature?.name && /* @__PURE__ */ jsxs4(Box, { $textAlign: "right", children: [
+              allocationType === "numeric" && feature?.name && /* @__PURE__ */ jsxs5(Box, { $textAlign: "right", children: [
                 props.allocation.isVisible && /* @__PURE__ */ jsx10(
                   Text,
                   {
@@ -8797,8 +9580,8 @@ var MeteredFeatures = forwardRef4(({ className, ...rest }, ref) => {
 });
 // src/components/elements/upcoming-bill/UpcomingBill.tsx
-import { forwardRef as forwardRef5, useMemo as useMemo5 } from "react";
-import { Fragment as Fragment2, jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
+import { forwardRef as forwardRef4, useMemo as useMemo5 } from "react";
+import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
 function resolveDesignProps4(props) {
   return {
     header: {
@@ -8817,27 +9600,37 @@ function resolveDesignProps4(props) {
     }
   };
 }
-var UpcomingBill = forwardRef5(({ className, ...rest }, ref) => {
+var UpcomingBill = forwardRef4(({ className, ...rest }, ref) => {
   const props = resolveDesignProps4(rest);
-  const { settings } = useEmbed();
-  const { bill } = useMemo5(() => {
+  const { data, settings, stripe } = useEmbed();
+  const { latestInvoice } = useMemo5(() => {
     return {
-      bill: {
-        amount: 200,
-        period: "monthly",
-        dueDate: toPrettyDate(/* @__PURE__ */ new Date("2024-06-12")),
-        endDate: (/* @__PURE__ */ new Date("2025-05-12")).toLocaleDateString()
+      latestInvoice: {
+        ...data.subscription?.latestInvoice?.amountDue && {
+          amountDue: data.subscription.latestInvoice.amountDue
+        },
+        ...data.subscription?.interval && {
+          interval: data.subscription.interval
+        },
+        ...data.subscription?.latestInvoice?.dueDate && {
+          dueDate: toPrettyDate(
+            new Date(data.subscription.latestInvoice.dueDate)
+          )
+        }
       }
     };
-  }, []);
-  return /* @__PURE__ */ jsxs5("div", { ref, className, children: [
-    props.header.isVisible && /* @__PURE__ */ jsx11(
+  }, [data.subscription]);
+  if (!stripe || !data.subscription?.latestInvoice) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs6("div", { ref, className, children: [
+    props.header.isVisible && latestInvoice.dueDate && /* @__PURE__ */ jsx11(
       Flex,
       {
         $justifyContent: "space-between",
         $alignItems: "center",
         $margin: "0 0 0.75rem",
-        children: /* @__PURE__ */ jsxs5(
+        children: /* @__PURE__ */ jsxs6(
           Text,
           {
             $font: settings.theme.typography[props.header.fontStyle].fontFamily,
@@ -8847,14 +9640,14 @@ var UpcomingBill = forwardRef5(({ className, ...rest }, ref) => {
             children: [
               props.header.prefix,
               " ",
-              bill.dueDate
+              latestInvoice.dueDate
             ]
           }
         )
       }
     ),
-    /* @__PURE__ */ jsxs5(Flex, { $justifyContent: "space-between", $alignItems: "start", $gap: "1rem", children: [
-      props.price.isVisible && /* @__PURE__ */ jsx11(Flex, { $alignItems: "end", $flexGrow: "1", children: /* @__PURE__ */ jsxs5(
+    latestInvoice.amountDue && /* @__PURE__ */ jsxs6(Flex, { $justifyContent: "space-between", $alignItems: "start", $gap: "1rem", children: [
+      props.price.isVisible && /* @__PURE__ */ jsx11(Flex, { $alignItems: "end", $flexGrow: "1", children: /* @__PURE__ */ jsxs6(
         Text,
         {
           $font: settings.theme.typography[props.price.fontStyle].fontFamily,
@@ -8871,27 +9664,18 @@ var UpcomingBill = forwardRef5(({ className, ...rest }, ref) => {
                 children: "$"
               }
             ),
-            bill.amount
+            latestInvoice.amountDue
           ]
         }
       ) }),
-      /* @__PURE__ */ jsx11(Box, { $maxWidth: "140px", $lineHeight: "1", children: /* @__PURE__ */ jsxs5(
+      /* @__PURE__ */ jsx11(Box, { $maxWidth: "10rem", $lineHeight: "1", $textAlign: "right", children: /* @__PURE__ */ jsx11(
         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__ */ jsxs5(Fragment2, { children: [
-              "\xA0",
-              props.contractEndDate.prefix,
-              " ",
-              bill.endDate,
-              "."
-            ] })
-          ]
+          children: "Estimated monthly bill."
         }
       ) })
     ] })
@@ -8899,9 +9683,9 @@ var UpcomingBill = forwardRef5(({ className, ...rest }, ref) => {
 });
 // src/components/elements/payment-method/PaymentMethod.tsx
-import { forwardRef as forwardRef6, useMemo as useMemo6 } from "react";
+import { forwardRef as forwardRef5, useMemo as useMemo6 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
-import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
 var resolveDesignProps5 = (props) => {
   return {
     header: {
@@ -8913,25 +9697,30 @@ var resolveDesignProps5 = (props) => {
     }
   };
 };
-var PaymentMethod = forwardRef6(({ children, className, portal, ...rest }, ref) => {
+var PaymentMethod = forwardRef5(({ children, className, portal, ...rest }, ref) => {
   const props = resolveDesignProps5(rest);
-  const { settings, layout, setLayout } = useEmbed();
+  const { data, settings, stripe, layout, setLayout } = useEmbed();
   const paymentMethod = useMemo6(() => {
-    const cardNumber = "4512";
-    const expirationDate = "2024-12-22";
-    const timeToExpiration = Math.round(
-      +new Date(expirationDate) - +/* @__PURE__ */ new Date()
-    );
-    const monthsToExpiration = Math.round(
-      timeToExpiration / (1e3 * 60 * 60 * 24 * 30)
-    );
+    const { cardLast4, cardExpMonth, cardExpYear } = data.subscription?.paymentMethod || {};
+    let monthsToExpiration;
+    if (typeof cardExpYear === "number" && typeof cardExpMonth === "number") {
+      const timeToExpiration = Math.round(
+        +new Date(cardExpYear, cardExpMonth - 1) - +/* @__PURE__ */ new Date()
+      );
+      monthsToExpiration = Math.round(
+        timeToExpiration / (1e3 * 60 * 60 * 24 * 30)
+      );
+    }
     return {
-      cardNumber,
+      cardLast4,
       monthsToExpiration
     };
-  }, []);
-  return /* @__PURE__ */ jsxs6("div", { ref, className, children: [
-    props.header.isVisible && /* @__PURE__ */ jsxs6(
+  }, [data.subscription?.paymentMethod]);
+  if (!stripe || !data.subscription?.paymentMethod) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs7("div", { ref, className, children: [
+    props.header.isVisible && /* @__PURE__ */ jsxs7(
       Flex,
       {
         $justifyContent: "space-between",
@@ -8948,7 +9737,7 @@ var PaymentMethod = forwardRef6(({ children, className, portal, ...rest }, ref)
               children: "Payment Method"
             }
           ),
-          Math.abs(paymentMethod.monthsToExpiration) < 4 && /* @__PURE__ */ jsx12(
+          typeof paymentMethod.monthsToExpiration === "number" && Math.abs(paymentMethod.monthsToExpiration) < 4 && /* @__PURE__ */ jsx12(
             Text,
             {
               $font: settings.theme.typography.text.fontFamily,
@@ -8960,7 +9749,7 @@ var PaymentMethod = forwardRef6(({ children, className, portal, ...rest }, ref)
         ]
       }
     ),
-    /* @__PURE__ */ jsxs6(
+    paymentMethod.cardLast4 && /* @__PURE__ */ jsxs7(
       Flex,
       {
         $justifyContent: "space-between",
@@ -8970,9 +9759,9 @@ var PaymentMethod = forwardRef6(({ children, className, portal, ...rest }, ref)
         $padding: "0.375rem 1rem",
         $borderRadius: "9999px",
         children: [
-          /* @__PURE__ */ jsxs6(Text, { $font: settings.theme.typography.text.fontFamily, $size: 14, children: [
+          /* @__PURE__ */ jsxs7(Text, { $font: settings.theme.typography.text.fontFamily, $size: 14, children: [
             "\u{1F4B3} Card ending in ",
-            paymentMethod.cardNumber
+            paymentMethod.cardLast4
           ] }),
           props.functions.allowEdit && /* @__PURE__ */ jsx12(
             Text,
@@ -8994,70 +9783,254 @@ var PaymentMethod = forwardRef6(({ children, className, portal, ...rest }, ref)
       }
     ),
     layout === "payment" && createPortal2(
-      /* @__PURE__ */ jsx12(
-        Box,
-        {
-          $position: "absolute",
-          $top: "50%",
-          $left: "50%",
-          $zIndex: "999999",
-          $transform: "translate(-50%, -50%)",
-          $width: "100%",
-          $height: "100%",
-          $backgroundColor: "#B5B5B580",
-          children: /* @__PURE__ */ jsxs6(
-            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__ */ jsx12(
-                  Box,
-                  {
-                    $position: "absolute",
-                    $top: "0.25rem",
-                    $right: "0.75rem",
-                    $cursor: "pointer",
-                    onClick: () => {
-                      setLayout("portal");
-                    },
-                    children: /* @__PURE__ */ jsx12(Icon2, { name: "close", style: { fontSize: 36, color: "#B8B8B8" } })
-                  }
-                ),
-                /* @__PURE__ */ jsx12(Flex, { $flexDirection: "column", $gap: "1rem", children: /* @__PURE__ */ jsx12(
-                  Text,
-                  {
-                    as: "h1",
-                    id: "select-plan-dialog-label",
-                    $size: 24,
-                    $weight: 800,
-                    children: "Add payment method"
-                  }
-                ) })
-              ]
-            }
-          )
-        }
-      ),
+      /* @__PURE__ */ jsxs7(OverlayWrapper, { size: "md", children: [
+        /* @__PURE__ */ jsx12(OverlayHeader, { children: /* @__PURE__ */ jsx12(Box, { $fontWeight: "600", children: "Edit payment method" }) }),
+        /* @__PURE__ */ jsxs7(
+          Flex,
+          {
+            $flexDirection: "column",
+            $padding: "2.5rem",
+            $height: "100%",
+            $gap: "1.5rem",
+            children: [
+              /* @__PURE__ */ jsx12(
+                Flex,
+                {
+                  $flexDirection: "column",
+                  $gap: "1rem",
+                  $backgroundColor: "#FBFBFB",
+                  $borderRadius: "0 0 0.5rem 0.5rem",
+                  $flex: "1",
+                  $height: "100%",
+                  children: /* @__PURE__ */ jsxs7(Flex, { $flexDirection: "column", $height: "100%", children: [
+                    /* @__PURE__ */ jsx12(
+                      Box,
+                      {
+                        $fontSize: "18px",
+                        $marginBottom: "1.5rem",
+                        $display: "inline-block",
+                        $width: "100%",
+                        children: "Default"
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs7(Flex, { $gap: "1rem", children: [
+                      /* @__PURE__ */ jsx12(
+                        Flex,
+                        {
+                          $alignItems: "center",
+                          $padding: ".5rem 1rem",
+                          $border: "1px solid #E2E5E9",
+                          $borderRadius: ".5rem",
+                          $backgroundColor: "#ffffff",
+                          $flexDirection: "row",
+                          $gap: "1rem",
+                          $width: "100%",
+                          children: /* @__PURE__ */ jsxs7(
+                            Flex,
+                            {
+                              $flexDirection: "row",
+                              $justifyContent: "space-between",
+                              $flex: "1",
+                              children: [
+                                /* @__PURE__ */ jsxs7(
+                                  Flex,
+                                  {
+                                    $flexDirection: "row",
+                                    $alignItems: "center",
+                                    $gap: "1rem",
+                                    children: [
+                                      /* @__PURE__ */ jsx12(Box, { $display: "inline-block", children: /* @__PURE__ */ jsx12(
+                                        "svg",
+                                        {
+                                          viewBox: "0 0 24 16",
+                                          fill: "none",
+                                          xmlns: "http://www.w3.org/2000/svg",
+                                          width: "26px",
+                                          height: "auto",
+                                          children: /* @__PURE__ */ jsxs7("g", { children: [
+                                            /* @__PURE__ */ jsx12(
+                                              "rect",
+                                              {
+                                                stroke: "#DDD",
+                                                fill: "#FFF",
+                                                x: ".25",
+                                                y: ".25",
+                                                width: "23",
+                                                height: "15.5",
+                                                rx: "2"
+                                              }
+                                            ),
+                                            /* @__PURE__ */ jsx12(
+                                              "path",
+                                              {
+                                                d: "M2.788 5.914A7.201 7.201 0 0 0 1 5.237l.028-.125h2.737c.371.013.672.125.77.519l.595 2.836.182.854 1.666-4.21h1.799l-2.674 6.167H4.304L2.788 5.914Zm7.312 5.37H8.399l1.064-6.172h1.7L10.1 11.284Zm6.167-6.021-.232 1.333-.153-.066a3.054 3.054 0 0 0-1.268-.236c-.671 0-.972.269-.98.531 0 .29.365.48.96.762.98.44 1.435.979 1.428 1.681-.014 1.28-1.176 2.108-2.96 2.108-.764-.007-1.5-.158-1.898-.328l.238-1.386.224.099c.553.23.917.328 1.596.328.49 0 1.015-.19 1.022-.604 0-.27-.224-.466-.882-.769-.644-.295-1.505-.788-1.491-1.674C11.878 5.84 13.06 5 14.74 5c.658 0 1.19.138 1.526.263Zm2.26 3.834h1.415c-.07-.308-.392-1.786-.392-1.786l-.12-.531c-.083.23-.23.604-.223.59l-.68 1.727Zm2.1-3.985L22 11.284h-1.575s-.154-.71-.203-.926h-2.184l-.357.926h-1.785l2.527-5.66c.175-.4.483-.512.889-.512h1.316Z",
+                                                fill: "#1434CB"
+                                              }
+                                            )
+                                          ] })
+                                        }
+                                      ) }),
+                                      /* @__PURE__ */ jsx12(Box, { $whiteSpace: "nowrap", children: "Visa **** 4242" })
+                                    ]
+                                  }
+                                ),
+                                /* @__PURE__ */ jsx12(Flex, { $alignItems: "center", children: /* @__PURE__ */ jsx12(Box, { $fontSize: "12px", $color: "#5D5D5D", children: "Expires: 3/30" }) })
+                              ]
+                            }
+                          )
+                        }
+                      ),
+                      /* @__PURE__ */ jsx12(Flex, { children: /* @__PURE__ */ jsx12(
+                        StyledButton,
+                        {
+                          $size: "sm",
+                          $color: "secondary",
+                          $variant: "outline",
+                          style: {
+                            whiteSpace: "nowrap",
+                            paddingLeft: "1rem",
+                            paddingRight: "1rem"
+                          },
+                          children: "Edit"
+                        }
+                      ) })
+                    ] })
+                  ] })
+                }
+              ),
+              /* @__PURE__ */ jsx12(
+                Flex,
+                {
+                  $flexDirection: "column",
+                  $gap: "1rem",
+                  $backgroundColor: "#FBFBFB",
+                  $borderRadius: "0 0 0.5rem 0.5rem",
+                  $flex: "1",
+                  $height: "100%",
+                  children: /* @__PURE__ */ jsxs7(Flex, { $flexDirection: "column", $height: "100%", children: [
+                    /* @__PURE__ */ jsx12(
+                      Box,
+                      {
+                        $fontSize: "18px",
+                        $marginBottom: "1.5rem",
+                        $display: "inline-block",
+                        $width: "100%",
+                        children: "Others"
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs7(Flex, { $gap: "1rem", children: [
+                      /* @__PURE__ */ jsx12(
+                        Flex,
+                        {
+                          $alignItems: "center",
+                          $padding: ".5rem 1rem",
+                          $border: "1px solid #E2E5E9",
+                          $borderRadius: ".5rem",
+                          $backgroundColor: "#ffffff",
+                          $flexDirection: "row",
+                          $gap: "1rem",
+                          $width: "100%",
+                          children: /* @__PURE__ */ jsxs7(
+                            Flex,
+                            {
+                              $flexDirection: "row",
+                              $justifyContent: "space-between",
+                              $flex: "1",
+                              children: [
+                                /* @__PURE__ */ jsxs7(
+                                  Flex,
+                                  {
+                                    $flexDirection: "row",
+                                    $alignItems: "center",
+                                    $gap: "1rem",
+                                    children: [
+                                      /* @__PURE__ */ jsx12(Box, { $display: "inline-block", children: /* @__PURE__ */ jsx12(
+                                        "svg",
+                                        {
+                                          viewBox: "0 0 24 16",
+                                          fill: "none",
+                                          xmlns: "http://www.w3.org/2000/svg",
+                                          width: "26px",
+                                          height: "auto",
+                                          children: /* @__PURE__ */ jsxs7("g", { children: [
+                                            /* @__PURE__ */ jsx12(
+                                              "rect",
+                                              {
+                                                stroke: "#DDD",
+                                                fill: "#FFF",
+                                                x: ".25",
+                                                y: ".25",
+                                                width: "23",
+                                                height: "15.5",
+                                                rx: "2"
+                                              }
+                                            ),
+                                            /* @__PURE__ */ jsx12(
+                                              "path",
+                                              {
+                                                d: "M2.788 5.914A7.201 7.201 0 0 0 1 5.237l.028-.125h2.737c.371.013.672.125.77.519l.595 2.836.182.854 1.666-4.21h1.799l-2.674 6.167H4.304L2.788 5.914Zm7.312 5.37H8.399l1.064-6.172h1.7L10.1 11.284Zm6.167-6.021-.232 1.333-.153-.066a3.054 3.054 0 0 0-1.268-.236c-.671 0-.972.269-.98.531 0 .29.365.48.96.762.98.44 1.435.979 1.428 1.681-.014 1.28-1.176 2.108-2.96 2.108-.764-.007-1.5-.158-1.898-.328l.238-1.386.224.099c.553.23.917.328 1.596.328.49 0 1.015-.19 1.022-.604 0-.27-.224-.466-.882-.769-.644-.295-1.505-.788-1.491-1.674C11.878 5.84 13.06 5 14.74 5c.658 0 1.19.138 1.526.263Zm2.26 3.834h1.415c-.07-.308-.392-1.786-.392-1.786l-.12-.531c-.083.23-.23.604-.223.59l-.68 1.727Zm2.1-3.985L22 11.284h-1.575s-.154-.71-.203-.926h-2.184l-.357.926h-1.785l2.527-5.66c.175-.4.483-.512.889-.512h1.316Z",
+                                                fill: "#1434CB"
+                                              }
+                                            )
+                                          ] })
+                                        }
+                                      ) }),
+                                      /* @__PURE__ */ jsx12(Box, { $whiteSpace: "nowrap", children: "Visa **** 2929" })
+                                    ]
+                                  }
+                                ),
+                                /* @__PURE__ */ jsx12(Flex, { $alignItems: "center", children: /* @__PURE__ */ jsx12(Box, { $fontSize: "12px", $color: "#5D5D5D", children: "Expires: 3/30" }) })
+                              ]
+                            }
+                          )
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs7(Flex, { $gap: "1rem", children: [
+                        /* @__PURE__ */ jsx12(
+                          StyledButton,
+                          {
+                            $size: "sm",
+                            $color: "secondary",
+                            $variant: "outline",
+                            style: {
+                              whiteSpace: "nowrap",
+                              paddingLeft: "1rem",
+                              paddingRight: "1rem"
+                            },
+                            children: "Make Default"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx12(
+                          StyledButton,
+                          {
+                            $size: "sm",
+                            $color: "secondary",
+                            $variant: "outline",
+                            style: {
+                              whiteSpace: "nowrap",
+                              paddingLeft: "1rem",
+                              paddingRight: "1rem"
+                            },
+                            children: "Edit"
+                          }
+                        )
+                      ] })
+                    ] })
+                  ] })
+                }
+              )
+            ]
+          }
+        )
+      ] }),
       portal || document.body
     )
   ] });
 });
 // src/components/elements/invoices/Invoices.tsx
-import { forwardRef as forwardRef7, useMemo as useMemo7 } from "react";
-import { jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
+import { forwardRef as forwardRef6, useMemo as useMemo7 } from "react";
+import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
 function resolveDesignProps6(props) {
   return {
     header: {
@@ -9082,7 +10055,7 @@ function resolveDesignProps6(props) {
     }
   };
 }
-var Invoices = forwardRef7(({ className, ...rest }, ref) => {
+var Invoices = forwardRef6(({ className, ...rest }, ref) => {
   const props = resolveDesignProps6(rest);
   const { settings } = useEmbed();
   const { invoices } = useMemo7(() => {
@@ -9099,7 +10072,7 @@ var Invoices = forwardRef7(({ className, ...rest }, ref) => {
       ]
     };
   }, []);
-  return /* @__PURE__ */ jsx13("div", { ref, className, children: /* @__PURE__ */ jsxs7(Flex, { $flexDirection: "column", $gap: "1rem", children: [
+  return /* @__PURE__ */ jsx13("div", { ref, className, children: /* @__PURE__ */ jsxs8(Flex, { $flexDirection: "column", $gap: "1rem", children: [
     props.header.isVisible && /* @__PURE__ */ jsx13(Flex, { $justifyContent: "space-between", $alignItems: "center", children: /* @__PURE__ */ jsx13(
       Text,
       {
@@ -9114,7 +10087,7 @@ var Invoices = forwardRef7(({ className, ...rest }, ref) => {
       0,
       props.limit.isVisible && props.limit.number || invoices.length
     ).map(({ date, amount }, index) => {
-      return /* @__PURE__ */ jsxs7(Flex, { $justifyContent: "space-between", children: [
+      return /* @__PURE__ */ jsxs8(Flex, { $justifyContent: "space-between", children: [
         props.date.isVisible && /* @__PURE__ */ jsx13(
           Text,
           {
@@ -9125,7 +10098,7 @@ var Invoices = forwardRef7(({ className, ...rest }, ref) => {
             children: toPrettyDate(date)
           }
         ),
-        props.amount.isVisible && /* @__PURE__ */ jsxs7(
+        props.amount.isVisible && /* @__PURE__ */ jsxs8(
           Text,
           {
             $font: settings.theme.typography[props.amount.fontStyle].fontFamily,
@@ -9140,7 +10113,7 @@ var Invoices = forwardRef7(({ className, ...rest }, ref) => {
         )
       ] }, index);
     }) }),
-    props.collapse.isVisible && /* @__PURE__ */ jsxs7(Flex, { $alignItems: "center", $gap: "0.5rem", children: [
+    props.collapse.isVisible && /* @__PURE__ */ jsxs8(Flex, { $alignItems: "center", $gap: "0.5rem", children: [
       /* @__PURE__ */ jsx13(Icon2, { name: "chevron-down", style: { color: "#D0D0D0" } }),
       /* @__PURE__ */ jsx13(
         Text,
@@ -9157,20 +10130,159 @@ var Invoices = forwardRef7(({ className, ...rest }, ref) => {
 });
 // src/components/embed/ComponentTree.tsx
-import { useEffect as useEffect4, useState as useState4 } from "react";
+import { useEffect as useEffect4, useState as useState6 } from "react";
 // src/components/embed/renderer.ts
 import { createElement } from "react";
+// src/components/layout/root/Root.tsx
+import { forwardRef as forwardRef7 } from "react";
+import { jsx as jsx14 } from "react/jsx-runtime";
+var Root = forwardRef7(
+  (props, ref) => {
+    return /* @__PURE__ */ jsx14("div", { ref, ...props });
+  }
+);
+// src/components/layout/viewport/Viewport.tsx
+import { forwardRef as forwardRef8 } from "react";
+// src/components/layout/viewport/styles.ts
+var StyledViewport = dt.div`
+  display: flex;
+  flex-wrap: wrap;
+  margin-left: auto;
+  margin-right: auto;
+`;
+// src/components/layout/viewport/Viewport.tsx
+import { jsx as jsx15 } from "react/jsx-runtime";
+var Viewport = forwardRef8(
+  ({ children, ...props }, ref) => {
+    const { settings, layout } = useEmbed();
+    return /* @__PURE__ */ jsx15(
+      StyledViewport,
+      {
+        ref,
+        $numberOfColumns: settings.theme.numberOfColumns,
+        ...props,
+        children: layout === "disabled" ? /* @__PURE__ */ jsx15("div", { className: "", children: "DISABLED" }) : children
+      }
+    );
+  }
+);
+// src/components/layout/column/Column.tsx
+import { forwardRef as forwardRef10 } from "react";
+// src/components/layout/card/Card.tsx
+import { forwardRef as forwardRef9 } from "react";
+// src/components/layout/card/styles.ts
+var StyledCard = dt.div(
+  ({
+    theme,
+    $sectionLayout = "merged",
+    $borderRadius = 8,
+    $padding = 48,
+    $shadow = true
+  }) => {
+    return lt`
+      box-sizing: border-box;
+      font-size: ${TEXT_BASE_SIZE}px;
+      *,
+      *::before,
+      *::after {
+        box-sizing: inherit;
+      }
+      > * {
+        padding: ${$padding * 0.75 / TEXT_BASE_SIZE}rem
+          ${$padding / TEXT_BASE_SIZE}rem;
+        color: ${theme.typography.text.color};
+      }
+      ${() => {
+      const { l: l2 } = hexToHSL(theme.card.background);
+      const borderColor = l2 > 50 ? darken(theme.card.background, 10) : lighten(theme.card.background, 30);
+      const borderRadius = `${$borderRadius / TEXT_BASE_SIZE}rem`;
+      const boxShadow = "0px 1px 20px 0px #1018280F, 0px 1px 3px 0px #1018281A";
+      if ($sectionLayout === "merged") {
+        return lt`
+            background: ${({ theme: theme2 }) => theme2.card.background};
+            border-radius: ${borderRadius};
+            ${$shadow && `box-shadow: ${boxShadow};`}
+            > :not(:last-child) {
+              border-bottom: 1px solid ${borderColor};
+            }
+          `;
+      }
+      return lt`
+          > :not(:last-child) {
+            margin-bottom: 1rem;
+          }
+          > * {
+            background: ${theme.card.background};
+            border-radius: ${borderRadius};
+            ${$shadow && `box-shadow: ${boxShadow};`}
+          }
+        `;
+    }}
+    `;
+  }
+);
+// src/components/layout/card/Card.tsx
+import { jsx as jsx16 } from "react/jsx-runtime";
+var Card = forwardRef9(
+  ({ children, className }, ref) => {
+    const { settings } = useEmbed();
+    return /* @__PURE__ */ jsx16(
+      StyledCard,
+      {
+        ref,
+        className,
+        $sectionLayout: settings.theme?.sectionLayout,
+        $borderRadius: settings.theme?.card?.borderRadius,
+        $padding: settings.theme?.card?.padding,
+        $shadow: settings.theme?.card?.hasShadow,
+        children
+      }
+    );
+  }
+);
+// src/components/layout/column/styles.ts
+var StyledColumn = dt.div`
+  flex-grow: 1;
+  padding: 0.75rem;
+`;
+// src/components/layout/column/Column.tsx
+import { jsx as jsx17 } from "react/jsx-runtime";
+var Column = forwardRef10(
+  ({ children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx17(StyledColumn, { ref, ...props, children: /* @__PURE__ */ jsx17(Card, { children }) });
+  }
+);
+// src/components/embed/renderer.ts
 var components = {
+  Root,
+  Viewport,
+  Column,
   Card,
   PlanManager,
   IncludedFeatures,
   UpcomingBill,
-  PaymentMethod,
-  MeteredFeatures
+  PaymentMethod
 };
 function createRenderer(options) {
-  const { useFallback = true } = options || {};
+  const { useFallback = false } = options || {};
   return function renderNode(node2, index) {
     const { type, props = {}, custom = {}, children } = node2;
     const name = typeof type !== "string" ? type.resolvedName : type;
@@ -9192,7 +10304,7 @@ function createRenderer(options) {
       {
         className,
         ...component !== "div" && { resolvedProps },
-        ...Object.keys(custom).length > 0 && { custom },
+        ...component !== "div" && Object.keys(custom).length > 0 && { custom },
         key: index
       },
       resolvedChildren
@@ -9201,35 +10313,36 @@ function createRenderer(options) {
 }
 // src/components/embed/ComponentTree.tsx
-import { Fragment as Fragment3, jsx as jsx14 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx18 } from "react/jsx-runtime";
 var ComponentTree = () => {
-  const [children, setChildren] = useState4("Loading");
+  const [children, setChildren] = useState6("Loading");
   const { error, nodes } = useEmbed();
   useEffect4(() => {
     const renderer = createRenderer();
     setChildren(nodes.map(renderer));
   }, [nodes]);
   if (error) {
-    return /* @__PURE__ */ jsx14("div", { children: error.message });
+    return /* @__PURE__ */ jsx18("div", { children: error.message });
   }
-  return /* @__PURE__ */ jsx14(Fragment3, { children });
+  return /* @__PURE__ */ jsx18(Fragment2, { children });
 };
 // src/components/embed/Embed.tsx
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 var SchematicEmbed = ({ id, accessToken, apiConfig }) => {
   if (accessToken?.length === 0) {
-    return /* @__PURE__ */ jsx15("div", { children: "Please provide an access token." });
+    return /* @__PURE__ */ jsx19("div", { children: "Please provide an access token." });
   }
   if (!accessToken?.startsWith("token_")) {
-    return /* @__PURE__ */ jsx15("div", { children: 'Invalid access token; your temporary access token will start with "token_".' });
+    return /* @__PURE__ */ jsx19("div", { children: 'Invalid access token; your temporary access token will start with "token_".' });
   }
-  return /* @__PURE__ */ jsx15(EmbedProvider, { id, accessToken, apiConfig, children: /* @__PURE__ */ jsx15(ComponentTree, {}) });
+  return /* @__PURE__ */ jsx19(EmbedProvider, { id, accessToken, apiConfig, children: /* @__PURE__ */ jsx19(ComponentTree, {}) });
 };
 export {
   Box,
   Button2 as Button,
   Card,
+  Column,
   EmbedContext,
   EmbedProvider,
   Flex,
@@ -9238,14 +10351,19 @@ export {
   IncludedFeatures,
   Invoices,
   MeteredFeatures,
+  OverlayHeader,
+  OverlaySideBar,
+  OverlayWrapper,
   PaymentMethod,
   PlanManager,
   ProgressBar,
+  Root,
   Schematic,
   SchematicEmbed,
   SchematicProvider,
   Text,
   UpcomingBill,
+  Viewport,
   defaultSettings,
   defaultTheme,
   useEmbed,