npm - @schematichq/schematic-components - Versions diffs - 0.1.0 → 0.2.0 - Mend

@schematichq/schematic-components 0.1.0 → 0.2.0

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

Files changed (5) hide show

package/README.md +25 -0
package/dist/schematic-components.cjs.js +480 -405
package/dist/schematic-components.d.ts +15 -7
package/dist/schematic-components.esm.js +569 -488
package/package.json +3 -2

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

@@ -6750,143 +6750,6 @@ var inflate_1 = inflate;
 // src/context/embed.tsx
 var import_lodash = __toESM(require_lodash());
-// 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.4.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 {
@@ -7218,10 +7081,10 @@ function BillingProductForSubscriptionResponseDataFromJSONTyped(json, ignoreDisc
     environmentId: json["environment_id"],
     externalId: json["external_id"],
     id: json["id"],
-    interval: json["interval"] == null ? void 0 : json["interval"],
+    interval: json["interval"],
     name: json["name"],
     price: json["price"],
-    priceExternalId: json["price_external_id"] == null ? void 0 : json["price_external_id"],
+    priceExternalId: json["price_external_id"],
     quantity: json["quantity"],
     subscriptionId: json["subscription_id"],
     updatedAt: new Date(json["updated_at"])
@@ -7733,6 +7596,7 @@ function CompanySubscriptionResponseDataFromJSONTyped(json, ignoreDiscriminator)
     products: json["products"].map(
       BillingProductForSubscriptionResponseDataFromJSON
     ),
+    status: json["status"],
     subscriptionExternalId: json["subscription_external_id"],
     totalPrice: json["total_price"]
   };
@@ -8489,7 +8353,6 @@ var EmbedContext = createContext({
   },
   nodes: [],
   settings: { ...defaultSettings },
-  stripe: null,
   layout: "portal",
   error: void 0,
   isPending: false,
@@ -8499,8 +8362,6 @@ var EmbedContext = createContext({
   },
   updateSettings: () => {
   },
-  setStripe: () => {
-  },
   setLayout: () => {
   }
 });
@@ -8519,7 +8380,6 @@ var EmbedProvider = ({
       },
       nodes: [],
       settings: { ...defaultSettings },
-      stripe: null,
       layout: "portal",
       isPending: false,
       error: void 0,
@@ -8529,8 +8389,6 @@ var EmbedProvider = ({
       },
       updateSettings: () => {
       },
-      setStripe: () => {
-      },
       setLayout: () => {
       }
     };
@@ -8556,16 +8414,11 @@ var EmbedProvider = ({
           nodes.push(...parseEditorState(ast));
         }
       }
-      let stripe = null;
-      if (data.stripeEmbed?.publishableKey) {
-        stripe = loadStripe(data.stripeEmbed.publishableKey);
-      }
       setState((prev2) => ({
         ...prev2,
         data,
         nodes,
         settings,
-        stripe,
         isPending: false
       }));
     } catch (error) {
@@ -8600,15 +8453,6 @@ var EmbedProvider = ({
     },
     [setState]
   );
-  const setStripe = useCallback(
-    (stripe) => {
-      setState((prev2) => ({
-        ...prev2,
-        stripe
-      }));
-    },
-    [setState]
-  );
   const setLayout = useCallback(
     (layout) => {
       setState((prev2) => ({
@@ -8630,12 +8474,11 @@ var EmbedProvider = ({
     styleRef.current = style;
   }, []);
   useEffect(() => {
-    if (!accessToken) {
-      return;
+    if (accessToken) {
+      const config = new Configuration({ ...apiConfig, apiKey: accessToken });
+      const api = new CheckoutApi(config);
+      setState((prev2) => ({ ...prev2, api }));
     }
-    const config = new Configuration({ ...apiConfig, apiKey: accessToken });
-    const api = new CheckoutApi(config);
-    setState((prev2) => ({ ...prev2, api }));
   }, [accessToken, apiConfig]);
   useEffect(() => {
     hydrate();
@@ -8652,47 +8495,6 @@ var EmbedProvider = ({
       }
     }
   }, [state.settings.theme.typography]);
-  const renderChildren = () => {
-    if (state.stripe) {
-      return /* @__PURE__ */ jsx(
-        Elements,
-        {
-          stripe: state.stripe,
-          options: {
-            appearance: {
-              theme: "stripe",
-              variables: {
-                // Base
-                fontFamily: '"Public Sans", system-ui, sans-serif',
-                spacingUnit: "0.25rem",
-                borderRadius: "0.5rem",
-                colorText: "#30313D",
-                colorBackground: "#FFFFFF",
-                colorPrimary: "#0570DE",
-                colorDanger: "#DF1B41",
-                // Layout
-                gridRowSpacing: "1.5rem",
-                gridColumnSpacing: "1.5rem"
-              },
-              rules: {
-                ".Label": {
-                  fontSize: "1rem",
-                  fontWeight: "400",
-                  marginBottom: "0.75rem",
-                  color: state.settings.theme.typography.text.color
-                }
-              }
-            },
-            ...state.data.stripeEmbed?.setupIntentClientSecret ? {
-              clientSecret: state.data.stripeEmbed?.setupIntentClientSecret
-            } : { mode: "payment", currency: "usd", amount: 999999 }
-          },
-          children
-        }
-      );
-    }
-    return children;
-  };
   return /* @__PURE__ */ jsx(
     EmbedContext.Provider,
     {
@@ -8701,19 +8503,17 @@ var EmbedProvider = ({
         data: state.data,
         nodes: state.nodes,
         settings: state.settings,
-        stripe: state.stripe,
         layout: state.layout,
         error: state.error,
         isPending: state.isPending,
         hydrate,
         setData,
         updateSettings,
-        setStripe,
         setLayout
       },
       children: /* @__PURE__ */ jsxs(ot, { theme: state.settings.theme, children: [
         /* @__PURE__ */ jsx(GlobalStyle, {}),
-        renderChildren()
+        children
       ] })
     }
   );
@@ -8906,22 +8706,57 @@ var Box = dt.div((props) => {
   }, initialStyles);
 });
-// src/components/ui/text/styles.ts
-var Text = dt.span`
-  font-family: ${({ $font = "Inter" }) => `${$font}, sans-serif`};
-  font-size: ${({ $size = 16 }) => typeof $size === "number" ? `${$size / TEXT_BASE_SIZE}rem` : $size};
-  ${({ $weight = 400 }) => lt`
-    font-weight: ${$weight};
-    font-variation-settings: "wght" ${$weight};
-  `};
-  line-height: ${({ $lineHeight = 1.25 }) => $lineHeight};
-  ${({ $align }) => attr("text-align", $align)};
-  color: ${({ $color, theme }) => $color || theme.typography.text.color};
+// src/components/ui/loader/styles.ts
+var spin = mt`
+  0% {
+    transform: rotate(0deg);
+  }
-  &:focus-visible {
-    outline: 2px solid ${({ theme }) => theme.primary};
-    outline-offset: 2px;
+  100% {
+    transform: rotate(360deg);
+  }
+`;
+var Loader = dt.div`
+  display: inline-block;
+  border-style: solid;
+  border-color: hsla(0, 0%, 50%, 0.125);
+  border-top-color: ${({ theme, $color }) => $color || theme.primary};
+  border-radius: 50%;
+  transition: all 0.1s;
+  animation: ${spin} 1.5s linear infinite;
+  ${({ $size = "md", $isLoading = true }) => {
+  let px;
+  switch ($size) {
+    case "xs":
+      px = 16;
+      break;
+    case "sm":
+      px = 24;
+      break;
+    default:
+    case "md":
+      px = 32;
+      break;
+    case "lg":
+      px = 40;
+      break;
+    case "xl":
+      px = 48;
+      break;
+    case "2xl":
+      px = 56;
+      break;
+    case "3xl":
+      px = 64;
+      break;
   }
+  return lt`
+      width: ${($isLoading ? px : 0) / TEXT_BASE_SIZE}rem;
+      height: ${($isLoading ? px : 0) / TEXT_BASE_SIZE}rem;
+      border-width: ${($isLoading ? px : 0) / 16 / TEXT_BASE_SIZE}rem;
+    `;
+}}
 `;
 // src/components/ui/button/styles.ts
@@ -8930,8 +8765,11 @@ var Button = dt.button`
   font-family: Manrope, Arial, Helvetica, sans-serif;
   font-weight: 800;
   line-height: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 0.5rem;
   border: 1px solid transparent;
-  transition-property: all;
   &:hover {
     cursor: pointer;
@@ -9009,16 +8847,17 @@ var Button = dt.button`
 `;
 // src/components/ui/button/Button.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var Button2 = ({
   color = "white",
   size = "md",
   variant = "solid",
   disabled = false,
+  isLoading = false,
   children,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsxs2(
     Button,
     {
       $color: color,
@@ -9026,7 +8865,10 @@ var Button2 = ({
       $variant: variant,
       disabled,
       ...props,
-      children
+      children: [
+        /* @__PURE__ */ jsx2(Loader, { $size: "sm", $isLoading: isLoading }),
+        children
+      ]
     }
   );
 };
@@ -9120,25 +8962,6 @@ var IconRound = ({
   return /* @__PURE__ */ jsx4(Container, { $size: size, $variant: variant, $colors: colors, ...props, children: /* @__PURE__ */ jsx4(Icon2, { name }) });
 };
-// src/components/ui/loader/styles.ts
-var spin = mt`
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-`;
-var Loader = dt.div`
-  border: ${4 / TEXT_BASE_SIZE}rem solid hsla(0, 0%, 50%, 0.125);
-  border-top: ${4 / TEXT_BASE_SIZE}rem solid ${({ theme }) => theme.secondary};
-  border-radius: 50%;
-  width: ${56 / TEXT_BASE_SIZE}rem;
-  height: ${56 / TEXT_BASE_SIZE}rem;
-  animation: ${spin} 1.5s linear infinite;
-  display: inline-block;
-`;
 // src/components/ui/modal/Modal.tsx
 import { useCallback as useCallback2, useEffect as useEffect2, useMemo, useRef as useRef2 } from "react";
 import { jsx as jsx5 } from "react/jsx-runtime";
@@ -9192,8 +9015,8 @@ var Modal = ({ children, size = "auto", onClose }) => {
           ...size === "auto" ? { $width: "min-content", $height: "min-content" } : {
             $width: "100%",
             $height: "100%",
-            $maxWidth: "1366px",
-            $maxHeight: "768px"
+            $maxWidth: "1356px",
+            $maxHeight: "860px"
           },
           $backgroundColor: theme.card.background,
           $borderRadius: "0.5rem",
@@ -9211,7 +9034,7 @@ var Modal = ({ children, size = "auto", onClose }) => {
 // src/components/ui/modal/ModalHeader.tsx
 import { useCallback as useCallback3, useMemo as useMemo2 } from "react";
-import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
 var ModalHeader = ({
   children,
   bordered = false,
@@ -9226,7 +9049,7 @@ var ModalHeader = ({
     setLayout("portal");
     onClose?.();
   }, [setLayout, onClose]);
-  return /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsxs3(
     Flex,
     {
       $justifyContent: children ? "space-between" : "end",
@@ -9263,7 +9086,7 @@ var Container2 = dt(Flex)`
 `;
 // src/components/ui/progress-bar/ProgressBar.tsx
-import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
 var ProgressBar = ({
   progress,
   value,
@@ -9279,7 +9102,7 @@ var ProgressBar = ({
     orange: "#DB6769",
     red: "#EF4444"
   };
-  return /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs4(
     Container2,
     {
       $alignItems: "center",
@@ -9315,7 +9138,7 @@ var ProgressBar = ({
             )
           }
         ),
-        total !== 0 && /* @__PURE__ */ jsxs3(Text, { $size: 14, $weight: 500, children: [
+        total !== 0 && /* @__PURE__ */ jsxs4(Text, { $size: 14, $weight: 500, children: [
           value,
           "/",
           total
@@ -9325,20 +9148,183 @@ var ProgressBar = ({
   );
 };
+// src/components/ui/text/styles.ts
+var Text = dt.span`
+  font-family: ${({ $font = "Inter" }) => `${$font}, sans-serif`};
+  font-size: ${({ $size = 16 }) => typeof $size === "number" ? `${$size / TEXT_BASE_SIZE}rem` : $size};
+  ${({ $weight = 400 }) => lt`
+    font-weight: ${$weight};
+    font-variation-settings: "wght" ${$weight};
+  `};
+  line-height: ${({ $lineHeight = 1.25 }) => $lineHeight};
+  ${({ $align }) => attr("text-align", $align)};
+  color: ${({ $color, theme }) => $color || theme.typography.text.color};
+  &:focus-visible {
+    outline: 2px solid ${({ theme }) => theme.primary};
+    outline-offset: 2px;
+  }
+`;
 // src/components/elements/plan-manager/CheckoutDialog.tsx
-import { useCallback as useCallback4, useMemo as useMemo4, useState as useState3 } from "react";
+import {
+  useCallback as useCallback4,
+  useEffect as useEffect3,
+  useLayoutEffect,
+  useMemo as useMemo4,
+  useState as useState3
+} from "react";
 var import_pluralize = __toESM(require_pluralize());
-// src/components/elements/payment-method/PaymentMethod.tsx
-import { forwardRef, useMemo as useMemo3 } from "react";
-import { createPortal } from "react-dom";
-// src/components/elements/plan-manager/styles.ts
-var StyledButton = dt(Button2)`
+// 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.4.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/components/elements/plan-manager/CheckoutDialog.tsx
+import { Elements } from "@stripe/react-stripe-js";
+// src/components/elements/payment-method/PaymentMethod.tsx
+import { forwardRef, useMemo as useMemo3 } from "react";
+import { createPortal } from "react-dom";
+// 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%;
+  padding: 0;
   ${({ disabled, $color = "primary", theme }) => {
   const { l: l2 } = hexToHSL(theme[$color]);
   let textColor;
@@ -9414,19 +9400,19 @@ var StyledButton = dt(Button2)`
     case "sm":
       return lt`
           font-size: ${15 / TEXT_BASE_SIZE}rem;
-          padding: ${12 / TEXT_BASE_SIZE}rem 0;
+          height: ${40 / TEXT_BASE_SIZE}rem;
           border-radius: ${6 / TEXT_BASE_SIZE}rem;
         `;
     case "md":
       return lt`
           font-size: ${17 / TEXT_BASE_SIZE}rem;
-          padding: ${16 / TEXT_BASE_SIZE}rem 0;
+          height: ${52 / TEXT_BASE_SIZE}rem;
           border-radius: ${8 / TEXT_BASE_SIZE}rem;
         `;
     case "lg":
       return lt`
           font-size: ${19 / TEXT_BASE_SIZE}rem;
-          padding: ${20 / TEXT_BASE_SIZE}rem 0;
+          height: ${64 / TEXT_BASE_SIZE}rem;
           border-radius: ${10 / TEXT_BASE_SIZE}rem;
         `;
   }
@@ -9434,7 +9420,7 @@ var StyledButton = dt(Button2)`
 `;
 // src/components/elements/payment-method/PaymentMethod.tsx
-import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
 var resolveDesignProps = (props) => {
   return {
     header: {
@@ -9476,8 +9462,8 @@ var PaymentMethod = forwardRef(({ children, className, portal, ...rest }, ref) =
   if (!paymentMethod.paymentMethodType) {
     return null;
   }
-  return /* @__PURE__ */ jsxs4("div", { ref, className, children: [
-    props.header.isVisible && /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs5("div", { ref, className, children: [
+    props.header.isVisible && /* @__PURE__ */ jsxs5(
       Flex,
       {
         $justifyContent: "space-between",
@@ -9519,9 +9505,9 @@ var PaymentMethod = forwardRef(({ children, className, portal, ...rest }, ref) =
       }
     ),
     layout === "payment" && createPortal(
-      /* @__PURE__ */ jsxs4(Modal, { size: "md", children: [
+      /* @__PURE__ */ jsxs5(Modal, { size: "md", children: [
         /* @__PURE__ */ jsx8(ModalHeader, { children: /* @__PURE__ */ jsx8(Box, { $fontWeight: "600", children: "Edit payment method" }) }),
-        /* @__PURE__ */ jsxs4(
+        /* @__PURE__ */ jsxs5(
           Flex,
           {
             $flexDirection: "column",
@@ -9538,7 +9524,7 @@ var PaymentMethod = forwardRef(({ children, className, portal, ...rest }, ref) =
                   $borderRadius: "0 0 0.5rem 0.5rem",
                   $flex: "1",
                   $height: "100%",
-                  children: /* @__PURE__ */ jsxs4(Flex, { $flexDirection: "column", $height: "100%", children: [
+                  children: /* @__PURE__ */ jsxs5(Flex, { $flexDirection: "column", $height: "100%", children: [
                     /* @__PURE__ */ jsx8(
                       Box,
                       {
@@ -9549,7 +9535,7 @@ var PaymentMethod = forwardRef(({ children, className, portal, ...rest }, ref) =
                         children: "Default"
                       }
                     ),
-                    /* @__PURE__ */ jsxs4(Flex, { $gap: "1rem", children: [
+                    /* @__PURE__ */ jsxs5(Flex, { $gap: "1rem", children: [
                       /* @__PURE__ */ jsx8(
                         Flex,
                         {
@@ -9560,8 +9546,8 @@ var PaymentMethod = forwardRef(({ children, className, portal, ...rest }, ref) =
                           $backgroundColor: "#ffffff",
                           $gap: "1rem",
                           $width: "100%",
-                          children: /* @__PURE__ */ jsxs4(Flex, { $justifyContent: "space-between", $flex: "1", children: [
-                            /* @__PURE__ */ jsxs4(Flex, { $alignItems: "center", $gap: "1rem", children: [
+                          children: /* @__PURE__ */ jsxs5(Flex, { $justifyContent: "space-between", $flex: "1", children: [
+                            /* @__PURE__ */ jsxs5(Flex, { $alignItems: "center", $gap: "1rem", children: [
                               /* @__PURE__ */ jsx8(Box, { $display: "inline-block", children: /* @__PURE__ */ jsx8(
                                 "svg",
                                 {
@@ -9570,7 +9556,7 @@ var PaymentMethod = forwardRef(({ children, className, portal, ...rest }, ref) =
                                   xmlns: "http://www.w3.org/2000/svg",
                                   width: "26px",
                                   height: "auto",
-                                  children: /* @__PURE__ */ jsxs4("g", { children: [
+                                  children: /* @__PURE__ */ jsxs5("g", { children: [
                                     /* @__PURE__ */ jsx8(
                                       "rect",
                                       {
@@ -9626,7 +9612,7 @@ var PaymentMethod = forwardRef(({ children, className, portal, ...rest }, ref) =
                   $borderRadius: "0 0 0.5rem 0.5rem",
                   $flex: "1",
                   $height: "100%",
-                  children: /* @__PURE__ */ jsxs4(Flex, { $flexDirection: "column", $height: "100%", children: [
+                  children: /* @__PURE__ */ jsxs5(Flex, { $flexDirection: "column", $height: "100%", children: [
                     /* @__PURE__ */ jsx8(
                       Box,
                       {
@@ -9637,7 +9623,7 @@ var PaymentMethod = forwardRef(({ children, className, portal, ...rest }, ref) =
                         children: "Others"
                       }
                     ),
-                    /* @__PURE__ */ jsxs4(Flex, { $gap: "1rem", children: [
+                    /* @__PURE__ */ jsxs5(Flex, { $gap: "1rem", children: [
                       /* @__PURE__ */ jsx8(
                         Flex,
                         {
@@ -9648,8 +9634,8 @@ var PaymentMethod = forwardRef(({ children, className, portal, ...rest }, ref) =
                           $backgroundColor: "#ffffff",
                           $gap: "1rem",
                           $width: "100%",
-                          children: /* @__PURE__ */ jsxs4(Flex, { $justifyContent: "space-between", $flex: "1", children: [
-                            /* @__PURE__ */ jsxs4(Flex, { $alignItems: "center", $gap: "1rem", children: [
+                          children: /* @__PURE__ */ jsxs5(Flex, { $justifyContent: "space-between", $flex: "1", children: [
+                            /* @__PURE__ */ jsxs5(Flex, { $alignItems: "center", $gap: "1rem", children: [
                               /* @__PURE__ */ jsx8(Box, { $display: "inline-block", children: /* @__PURE__ */ jsx8(
                                 "svg",
                                 {
@@ -9658,7 +9644,7 @@ var PaymentMethod = forwardRef(({ children, className, portal, ...rest }, ref) =
                                   xmlns: "http://www.w3.org/2000/svg",
                                   width: "26px",
                                   height: "auto",
-                                  children: /* @__PURE__ */ jsxs4("g", { children: [
+                                  children: /* @__PURE__ */ jsxs5("g", { children: [
                                     /* @__PURE__ */ jsx8(
                                       "rect",
                                       {
@@ -9687,7 +9673,7 @@ var PaymentMethod = forwardRef(({ children, className, portal, ...rest }, ref) =
                           ] })
                         }
                       ),
-                      /* @__PURE__ */ jsxs4(Flex, { $gap: "1rem", children: [
+                      /* @__PURE__ */ jsxs5(Flex, { $gap: "1rem", children: [
                         /* @__PURE__ */ jsx8(
                           StyledButton,
                           {
@@ -9737,11 +9723,11 @@ import {
   PaymentElement
 } from "@stripe/react-stripe-js";
 import { useStripe, useElements } from "@stripe/react-stripe-js";
-import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
 var PaymentForm = ({ plan, period, onConfirm }) => {
   const stripe = useStripe();
   const elements = useElements();
-  const { api, data } = useEmbed();
+  const { api } = useEmbed();
   const [message, setMessage] = useState2(null);
   const [isLoading, setIsLoading] = useState2(false);
   const [isConfirmed, setIsConfirmed] = useState2(false);
@@ -9776,7 +9762,7 @@ var PaymentForm = ({ plan, period, onConfirm }) => {
       setIsLoading(false);
     }
   };
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs6(
     "form",
     {
       id: "payment-form",
@@ -9809,8 +9795,8 @@ var PaymentForm = ({ plan, period, onConfirm }) => {
           StyledButton,
           {
             id: "submit",
-            disabled: isLoading || !stripe || !elements || !data.stripeEmbed?.publishableKey || !data.stripeEmbed?.setupIntentClientSecret || isConfirmed,
-            $size: "md",
+            disabled: isLoading || !stripe || !elements || isConfirmed,
+            isLoading,
             $color: "primary",
             children: /* @__PURE__ */ jsx9(Text, { id: "button-text", children: isLoading ? "Loading" : "Save payment method" })
           }
@@ -9822,7 +9808,7 @@ var PaymentForm = ({ plan, period, onConfirm }) => {
 };
 // src/components/elements/plan-manager/CheckoutDialog.tsx
-import { Fragment, jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
 var FeatureName = ({
   entitlement
 }) => {
@@ -9839,7 +9825,7 @@ var FeatureName = ({
         current_year: "year"
       }[entitlement.metricPeriod];
     }
-    return /* @__PURE__ */ jsx10(Flex, { $alignItems: "center", children: /* @__PURE__ */ jsxs6(
+    return /* @__PURE__ */ jsx10(Flex, { $alignItems: "center", children: /* @__PURE__ */ jsxs7(
       Text,
       {
         $font: theme.typography.text.fontFamily,
@@ -9881,6 +9867,8 @@ var CheckoutDialog = () => {
   const [showPaymentForm, setShowPaymentForm] = useState3(
     () => typeof data.subscription?.paymentMethod === "undefined"
   );
+  const [stripe, setStripe] = useState3(null);
+  const [setupIntent, setSetupIntent] = useState3();
   const { paymentMethod, currentPlan, availablePlans, planPeriodOptions } = useMemo4(() => {
     const showMonthlyPriceOption = data.activePlans.some(
       (plan) => typeof plan.yearlyPrice !== "undefined"
@@ -9958,10 +9946,44 @@ var CheckoutDialog = () => {
     },
     [selectedPlan, selectPlan]
   );
-  const allowCheckout = api && selectedPlan && selectedPlan?.id !== currentPlan?.id && (paymentMethod && !showPaymentForm || paymentMethodId) && !isLoading;
-  return /* @__PURE__ */ jsxs6(Modal, { size: "lg", children: [
-    /* @__PURE__ */ jsx10(ModalHeader, { bordered: true, children: /* @__PURE__ */ jsxs6(Flex, { $gap: "1rem", children: [
-      /* @__PURE__ */ jsxs6(Flex, { $gap: "0.5rem", $alignItems: "center", children: [
+  const checkout = useCallback4(async () => {
+    const priceId = (planPeriod === "month" ? selectedPlan?.monthlyPrice : selectedPlan?.yearlyPrice)?.id;
+    if (!api || !selectedPlan || !priceId) {
+      return;
+    }
+    try {
+      setIsLoading(true);
+      await api.checkout({
+        changeSubscriptionRequestBody: {
+          newPlanId: selectedPlan.id,
+          newPriceId: priceId,
+          ...paymentMethodId && { paymentMethodId }
+        }
+      });
+      setLayout("success");
+    } catch {
+      setError(
+        "Error processing payment. Please try a different payment method."
+      );
+    } finally {
+      setIsLoading(false);
+    }
+  }, [api, paymentMethodId, planPeriod, selectedPlan, setLayout]);
+  useEffect3(() => {
+    if (!stripe && setupIntent?.publishableKey) {
+      setStripe(loadStripe(setupIntent.publishableKey));
+    }
+  }, [stripe, setupIntent?.publishableKey]);
+  useLayoutEffect(() => {
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, []);
+  const allowCheckout = api && selectedPlan && (paymentMethod && !showPaymentForm || paymentMethodId) && !isLoading;
+  return /* @__PURE__ */ jsxs7(Modal, { size: "lg", children: [
+    /* @__PURE__ */ jsx10(ModalHeader, { bordered: true, children: /* @__PURE__ */ jsxs7(Flex, { $gap: "1rem", children: [
+      /* @__PURE__ */ jsxs7(Flex, { $gap: "0.5rem", $alignItems: "center", children: [
         checkoutStage === "plan" ? /* @__PURE__ */ jsx10(
           Box,
           {
@@ -10019,7 +10041,7 @@ var CheckoutDialog = () => {
           }
         }
       ),
-      /* @__PURE__ */ jsxs6(Flex, { $gap: "0.5rem", $alignItems: "center", children: [
+      /* @__PURE__ */ jsxs7(Flex, { $gap: "0.5rem", $alignItems: "center", children: [
         /* @__PURE__ */ jsx10(
           Box,
           {
@@ -10052,8 +10074,8 @@ var CheckoutDialog = () => {
         )
       ] })
     ] }) }),
-    /* @__PURE__ */ jsxs6(Flex, { $position: "relative", $height: "calc(100% - 5rem)", children: [
-      /* @__PURE__ */ jsxs6(
+    /* @__PURE__ */ jsxs7(Flex, { $position: "relative", $height: "calc(100% - 5rem)", children: [
+      /* @__PURE__ */ jsxs7(
         Flex,
         {
           $flexDirection: "column",
@@ -10064,8 +10086,8 @@ var CheckoutDialog = () => {
           $flex: "1",
           $overflow: "auto",
           children: [
-            checkoutStage === "plan" && /* @__PURE__ */ jsxs6(Fragment, { children: [
-              /* @__PURE__ */ jsxs6(Flex, { $flexDirection: "column", $gap: "1rem", $marginBottom: "1rem", children: [
+            checkoutStage === "plan" && /* @__PURE__ */ jsxs7(Fragment, { children: [
+              /* @__PURE__ */ jsxs7(Flex, { $flexDirection: "column", $gap: "1rem", $marginBottom: "1rem", children: [
                 /* @__PURE__ */ jsx10(
                   Text,
                   {
@@ -10093,15 +10115,15 @@ var CheckoutDialog = () => {
                 )
               ] }),
               /* @__PURE__ */ jsx10(Flex, { $flexWrap: "wrap", $gap: "1rem", $flexGrow: "1", children: availablePlans.sort((a2, b2) => {
-                if (planPeriod === "year" && a2.yearlyPrice && b2.yearlyPrice) {
-                  return a2.yearlyPrice?.price - b2.yearlyPrice?.price;
+                if (planPeriod === "year") {
+                  return (a2.yearlyPrice?.price ?? 0) - (b2.yearlyPrice?.price ?? 0);
                 }
-                if (planPeriod === "month" && a2.monthlyPrice && b2.monthlyPrice) {
-                  return a2.monthlyPrice.price - b2.monthlyPrice.price;
+                if (planPeriod === "month") {
+                  return (a2.monthlyPrice?.price ?? 0) - (b2.monthlyPrice?.price ?? 0);
                 }
                 return 0;
               }).map((plan) => {
-                return /* @__PURE__ */ jsxs6(
+                return /* @__PURE__ */ jsxs7(
                   Flex,
                   {
                     $flexDirection: "column",
@@ -10117,7 +10139,7 @@ var CheckoutDialog = () => {
                       $boxShadow: "0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 20px rgba(16, 24, 40, 0.06)"
                     },
                     children: [
-                      /* @__PURE__ */ jsxs6(
+                      /* @__PURE__ */ jsxs7(
                         Flex,
                         {
                           $flexDirection: "column",
@@ -10132,11 +10154,11 @@ var CheckoutDialog = () => {
                           children: [
                             /* @__PURE__ */ jsx10(Text, { $size: 20, $weight: 600, children: plan.name }),
                             /* @__PURE__ */ jsx10(Text, { $size: 14, children: plan.description }),
-                            /* @__PURE__ */ jsxs6(Text, { children: [
+                            /* @__PURE__ */ jsxs7(Text, { children: [
                               /* @__PURE__ */ jsx10(Box, { $display: "inline-block", $fontSize: "1.5rem", children: formatCurrency(
                                 (planPeriod === "month" ? plan.monthlyPrice : plan.yearlyPrice)?.price ?? 0
                               ) }),
-                              /* @__PURE__ */ jsxs6(Box, { $display: "inline-block", $fontSize: "0.75rem", children: [
+                              /* @__PURE__ */ jsxs7(Box, { $display: "inline-block", $fontSize: "0.75rem", children: [
                                 "/",
                                 planPeriod
                               ] })
@@ -10176,7 +10198,7 @@ var CheckoutDialog = () => {
                                 $justifyContent: "space-between",
                                 $alignItems: "center",
                                 $gap: "1rem",
-                                children: /* @__PURE__ */ jsxs6(Flex, { $gap: "1rem", children: [
+                                children: /* @__PURE__ */ jsxs7(Flex, { $gap: "1rem", children: [
                                   entitlement.feature?.icon && /* @__PURE__ */ jsx10(
                                     IconRound,
                                     {
@@ -10196,7 +10218,7 @@ var CheckoutDialog = () => {
                           })
                         }
                       ),
-                      /* @__PURE__ */ jsxs6(
+                      /* @__PURE__ */ jsxs7(
                         Flex,
                         {
                           $flexDirection: "column",
@@ -10206,7 +10228,7 @@ var CheckoutDialog = () => {
                           $height: "auto",
                           $padding: "1.5rem",
                           children: [
-                            plan.id === selectedPlan?.id && /* @__PURE__ */ jsxs6(
+                            plan.id === selectedPlan?.id && /* @__PURE__ */ jsxs7(
                               Flex,
                               {
                                 $justifyContent: "center",
@@ -10237,10 +10259,10 @@ var CheckoutDialog = () => {
                                 ]
                               }
                             ),
-                            !(plan.current || plan.id === currentPlan?.id) && plan.id !== selectedPlan?.id && /* @__PURE__ */ jsx10(
+                            plan.id !== selectedPlan?.id && /* @__PURE__ */ jsx10(
                               StyledButton,
                               {
-                                disabled: plan.valid === false,
+                                disabled: isLoading || plan.valid === false,
                                 ...plan.valid === true && {
                                   onClick: () => selectPlan(plan)
                                 },
@@ -10259,36 +10281,69 @@ var CheckoutDialog = () => {
                 );
               }) })
             ] }),
-            selectedPlan && checkoutStage === "checkout" && /* @__PURE__ */ jsx10(Fragment, { children: showPaymentForm ? /* @__PURE__ */ jsxs6(Fragment, { children: [
-              /* @__PURE__ */ jsx10(
-                PaymentForm,
-                {
-                  plan: selectedPlan,
-                  period: planPeriod,
-                  onConfirm: (value) => {
-                    setPaymentMethodId(value);
-                  }
-                }
-              ),
-              typeof data.subscription?.paymentMethod !== "undefined" && /* @__PURE__ */ jsx10(
-                Box,
-                {
-                  tabIndex: 0,
-                  onClick: () => setShowPaymentForm(false),
-                  $cursor: "pointer",
-                  children: /* @__PURE__ */ jsx10(
-                    Text,
+            selectedPlan && checkoutStage === "checkout" && /* @__PURE__ */ jsx10(Fragment, { children: showPaymentForm && setupIntent?.setupIntentClientSecret ? /* @__PURE__ */ jsxs7(
+              Elements,
+              {
+                stripe,
+                options: {
+                  appearance: {
+                    theme: "stripe",
+                    variables: {
+                      // Base
+                      fontFamily: '"Public Sans", system-ui, sans-serif',
+                      spacingUnit: "0.25rem",
+                      borderRadius: "0.5rem",
+                      colorText: "#30313D",
+                      colorBackground: "#FFFFFF",
+                      colorPrimary: "#0570DE",
+                      colorDanger: "#DF1B41",
+                      // Layout
+                      gridRowSpacing: "1.5rem",
+                      gridColumnSpacing: "1.5rem"
+                    },
+                    rules: {
+                      ".Label": {
+                        fontSize: "1rem",
+                        fontWeight: "400",
+                        marginBottom: "0.75rem",
+                        color: theme.typography.text.color
+                      }
+                    }
+                  },
+                  clientSecret: setupIntent.setupIntentClientSecret
+                },
+                children: [
+                  /* @__PURE__ */ jsx10(
+                    PaymentForm,
                     {
-                      $font: theme.typography.link.fontFamily,
-                      $size: theme.typography.link.fontSize,
-                      $weight: theme.typography.link.fontWeight,
-                      $color: theme.typography.link.color,
-                      children: "Use existing payment method"
+                      plan: selectedPlan,
+                      period: planPeriod,
+                      onConfirm: (value) => {
+                        setPaymentMethodId(value);
+                      }
+                    }
+                  ),
+                  data.subscription?.paymentMethod && /* @__PURE__ */ jsx10(
+                    Box,
+                    {
+                      tabIndex: 0,
+                      onClick: () => setShowPaymentForm(false),
+                      $cursor: "pointer",
+                      children: /* @__PURE__ */ jsx10(
+                        Text,
+                        {
+                          $font: theme.typography.link.fontFamily,
+                          $size: theme.typography.link.fontSize,
+                          $weight: theme.typography.link.fontWeight,
+                          $color: theme.typography.link.color,
+                          children: "Use existing payment method"
+                        }
+                      )
                     }
                   )
-                }
-              )
-            ] }) : /* @__PURE__ */ jsxs6(Fragment, { children: [
+                ]
+              }
+            ) : /* @__PURE__ */ jsxs7(Fragment, { children: [
               /* @__PURE__ */ jsx10(PaymentMethod, {}),
               /* @__PURE__ */ jsx10(
                 Box,
@@ -10312,20 +10367,21 @@ var CheckoutDialog = () => {
           ]
         }
       ),
-      /* @__PURE__ */ jsxs6(
+      /* @__PURE__ */ jsxs7(
         Flex,
         {
           $flexDirection: "column",
+          $width: "21.5rem",
+          $overflow: "auto",
           $backgroundColor: theme.card.background,
           $borderRadius: "0 0 0.5rem",
-          $width: "21.5rem",
           $boxShadow: "0px 1px 20px 0px #1018280F, 0px 1px 3px 0px #1018281A;",
           children: [
-            /* @__PURE__ */ jsxs6(
+            /* @__PURE__ */ jsxs7(
               Flex,
               {
-                $flexDirection: "column",
                 $position: "relative",
+                $flexDirection: "column",
                 $gap: "1rem",
                 $width: "100%",
                 $height: "auto",
@@ -10345,7 +10401,7 @@ var CheckoutDialog = () => {
                       children: "Subscription"
                     }
                   ) }),
-                  planPeriodOptions.length > 1 && /* @__PURE__ */ jsxs6(
+                  planPeriodOptions.length > 1 && /* @__PURE__ */ jsxs7(
                     Flex,
                     {
                       $borderWidth: "1px",
@@ -10418,7 +10474,7 @@ var CheckoutDialog = () => {
                 ]
               }
             ),
-            /* @__PURE__ */ jsxs6(
+            /* @__PURE__ */ jsxs7(
               Flex,
               {
                 $flexDirection: "column",
@@ -10442,43 +10498,51 @@ var CheckoutDialog = () => {
                       children: "Plan"
                     }
                   ) }),
-                  /* @__PURE__ */ jsxs6(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
-                    currentPlan && /* @__PURE__ */ jsxs6(Flex, { $justifyContent: "space-between", $alignItems: "center", children: [
-                      /* @__PURE__ */ jsx10(
-                        Flex,
-                        {
-                          ...selectedPlan && {
-                            $opacity: "0.625",
-                            $textDecoration: "line-through"
-                          },
-                          children: /* @__PURE__ */ jsx10(
+                  /* @__PURE__ */ jsxs7(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
+                    currentPlan && /* @__PURE__ */ jsxs7(
+                      Flex,
+                      {
+                        $justifyContent: "space-between",
+                        $alignItems: "center",
+                        $gap: "1rem",
+                        children: [
+                          /* @__PURE__ */ jsx10(
+                            Flex,
+                            {
+                              ...selectedPlan && {
+                                $opacity: "0.625",
+                                $textDecoration: "line-through"
+                              },
+                              children: /* @__PURE__ */ jsx10(
+                                Text,
+                                {
+                                  $font: theme.typography.heading4.fontFamily,
+                                  $size: theme.typography.heading4.fontSize,
+                                  $weight: theme.typography.heading4.fontWeight,
+                                  $color: theme.typography.heading4.color,
+                                  children: currentPlan.name
+                                }
+                              )
+                            }
+                          ),
+                          typeof currentPlan.planPrice === "number" && currentPlan.planPeriod && /* @__PURE__ */ jsx10(Flex, { children: /* @__PURE__ */ jsxs7(
                             Text,
                             {
-                              $font: theme.typography.heading4.fontFamily,
-                              $size: theme.typography.heading4.fontSize,
-                              $weight: theme.typography.heading4.fontWeight,
-                              $color: theme.typography.heading4.color,
-                              children: currentPlan.name
+                              $font: theme.typography.text.fontFamily,
+                              $size: theme.typography.text.fontSize,
+                              $weight: theme.typography.text.fontWeight,
+                              $color: theme.typography.text.color,
+                              children: [
+                                formatCurrency(currentPlan.planPrice),
+                                "/",
+                                currentPlan.planPeriod
+                              ]
                             }
-                          )
-                        }
-                      ),
-                      typeof currentPlan.planPrice === "number" && currentPlan.planPeriod && /* @__PURE__ */ jsx10(Flex, { children: /* @__PURE__ */ jsxs6(
-                        Text,
-                        {
-                          $font: theme.typography.text.fontFamily,
-                          $size: theme.typography.text.fontSize,
-                          $weight: theme.typography.text.fontWeight,
-                          $color: theme.typography.text.color,
-                          children: [
-                            formatCurrency(currentPlan.planPrice),
-                            "/",
-                            currentPlan.planPeriod
-                          ]
-                        }
-                      ) })
-                    ] }),
-                    selectedPlan && /* @__PURE__ */ jsxs6(Box, { $marginBottom: "1rem", children: [
+                          ) })
+                        ]
+                      }
+                    ),
+                    selectedPlan && /* @__PURE__ */ jsxs7(Box, { $marginBottom: "1rem", children: [
                       /* @__PURE__ */ jsx10(
                         Box,
                         {
@@ -10498,37 +10562,45 @@ var CheckoutDialog = () => {
                           )
                         }
                       ),
-                      /* @__PURE__ */ jsxs6(Flex, { $justifyContent: "space-between", $alignItems: "center", children: [
-                        /* @__PURE__ */ jsx10(Flex, { children: /* @__PURE__ */ jsx10(
-                          Text,
-                          {
-                            $font: theme.typography.heading4.fontFamily,
-                            $size: theme.typography.heading4.fontSize,
-                            $weight: theme.typography.heading4.fontWeight,
-                            $color: theme.typography.heading4.color,
-                            children: selectedPlan.name
-                          }
-                        ) }),
-                        /* @__PURE__ */ jsx10(Flex, { children: /* @__PURE__ */ jsxs6(
-                          Text,
-                          {
-                            $font: theme.typography.text.fontFamily,
-                            $size: theme.typography.text.fontSize,
-                            $weight: theme.typography.text.fontWeight,
-                            $color: theme.typography.text.color,
-                            children: [
-                              formatCurrency(
-                                (planPeriod === "month" ? selectedPlan.monthlyPrice : selectedPlan.yearlyPrice)?.price ?? 0
-                              ),
-                              "/",
-                              planPeriod
-                            ]
-                          }
-                        ) })
-                      ] })
+                      /* @__PURE__ */ jsxs7(
+                        Flex,
+                        {
+                          $justifyContent: "space-between",
+                          $alignItems: "center",
+                          $gap: "1rem",
+                          children: [
+                            /* @__PURE__ */ jsx10(Flex, { children: /* @__PURE__ */ jsx10(
+                              Text,
+                              {
+                                $font: theme.typography.heading4.fontFamily,
+                                $size: theme.typography.heading4.fontSize,
+                                $weight: theme.typography.heading4.fontWeight,
+                                $color: theme.typography.heading4.color,
+                                children: selectedPlan.name
+                              }
+                            ) }),
+                            /* @__PURE__ */ jsx10(Flex, { children: /* @__PURE__ */ jsxs7(
+                              Text,
+                              {
+                                $font: theme.typography.text.fontFamily,
+                                $size: theme.typography.text.fontSize,
+                                $weight: theme.typography.text.fontWeight,
+                                $color: theme.typography.text.color,
+                                children: [
+                                  formatCurrency(
+                                    (planPeriod === "month" ? selectedPlan.monthlyPrice : selectedPlan.yearlyPrice)?.price ?? 0
+                                  ),
+                                  "/",
+                                  planPeriod
+                                ]
+                              }
+                            ) })
+                          ]
+                        }
+                      )
                     ] })
                   ] }),
-                  charges?.proration && /* @__PURE__ */ jsxs6(Fragment, { children: [
+                  charges?.proration && /* @__PURE__ */ jsxs7(Fragment, { children: [
                     /* @__PURE__ */ jsx10(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsx10(
                       Text,
                       {
@@ -10539,14 +10611,14 @@ var CheckoutDialog = () => {
                         children: charges?.proration && charges.proration > 0 ? "Proration" : "Credits"
                       }
                     ) }),
-                    /* @__PURE__ */ jsx10(Flex, { $flexDirection: "column", $gap: "0.5rem", children: currentPlan && /* @__PURE__ */ jsxs6(
+                    /* @__PURE__ */ jsx10(Flex, { $flexDirection: "column", $gap: "0.5rem", children: currentPlan && /* @__PURE__ */ jsxs7(
                       Flex,
                       {
                         $justifyContent: "space-between",
                         $alignItems: "center",
                         $gap: "1rem",
                         children: [
-                          /* @__PURE__ */ jsx10(Flex, { children: /* @__PURE__ */ jsxs6(
+                          /* @__PURE__ */ jsx10(Flex, { children: /* @__PURE__ */ jsxs7(
                             Text,
                             {
                               $font: theme.typography.heading4.fontFamily,
@@ -10576,7 +10648,7 @@ var CheckoutDialog = () => {
                 ]
               }
             ),
-            /* @__PURE__ */ jsxs6(
+            /* @__PURE__ */ jsxs7(
               Flex,
               {
                 $flexDirection: "column",
@@ -10586,8 +10658,8 @@ var CheckoutDialog = () => {
                 $height: "auto",
                 $padding: "1.5rem",
                 children: [
-                  selectedPlan && subscriptionPrice && /* @__PURE__ */ jsxs6(Flex, { $justifyContent: "space-between", children: [
-                    /* @__PURE__ */ jsx10(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsxs6(
+                  selectedPlan && subscriptionPrice && /* @__PURE__ */ jsxs7(Flex, { $justifyContent: "space-between", $gap: "1rem", children: [
+                    /* @__PURE__ */ jsx10(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsxs7(
                       Text,
                       {
                         $font: theme.typography.text.fontFamily,
@@ -10600,7 +10672,7 @@ var CheckoutDialog = () => {
                         ]
                       }
                     ) }),
-                    /* @__PURE__ */ jsx10(Box, { children: /* @__PURE__ */ jsxs6(
+                    /* @__PURE__ */ jsx10(Box, { children: /* @__PURE__ */ jsxs7(
                       Text,
                       {
                         $font: theme.typography.text.fontFamily,
@@ -10615,7 +10687,7 @@ var CheckoutDialog = () => {
                       }
                     ) })
                   ] }),
-                  charges && /* @__PURE__ */ jsxs6(Flex, { $justifyContent: "space-between", children: [
+                  charges && /* @__PURE__ */ jsxs7(Flex, { $justifyContent: "space-between", $gap: "1rem", children: [
                     /* @__PURE__ */ jsx10(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsx10(
                       Text,
                       {
@@ -10633,18 +10705,48 @@ var CheckoutDialog = () => {
                         $size: theme.typography.text.fontSize,
                         $weight: theme.typography.text.fontWeight,
                         $color: theme.typography.text.color,
-                        children: formatCurrency(charges.dueNow)
+                        children: formatCurrency(Math.max(0, charges.dueNow))
+                      }
+                    ) })
+                  ] }),
+                  charges?.dueNow && charges.dueNow < 0 && /* @__PURE__ */ jsxs7(Flex, { $justifyContent: "space-between", $gap: "1rem", children: [
+                    /* @__PURE__ */ jsx10(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsx10(
+                      Text,
+                      {
+                        $font: theme.typography.text.fontFamily,
+                        $size: theme.typography.text.fontSize,
+                        $weight: theme.typography.text.fontWeight,
+                        $color: theme.typography.text.color,
+                        children: "Credits to be applied to future invoices:"
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsx10(Box, { children: /* @__PURE__ */ jsx10(
+                      Text,
+                      {
+                        $font: theme.typography.text.fontFamily,
+                        $size: theme.typography.text.fontSize,
+                        $weight: theme.typography.text.fontWeight,
+                        $color: theme.typography.text.color,
+                        children: formatCurrency(Math.abs(charges.dueNow))
                       }
                     ) })
                   ] }),
                   checkoutStage === "plan" ? /* @__PURE__ */ jsx10(
                     StyledButton,
                     {
-                      disabled: !selectedPlan,
-                      ...selectedPlan && {
-                        onClick: () => setCheckoutStage("checkout")
-                      },
-                      children: /* @__PURE__ */ jsxs6(
+                      ...allowCheckout ? {
+                        onClick: async () => {
+                          if (!data.component?.id) {
+                            return;
+                          }
+                          const { data: setupIntent2 } = await api.getSetupIntent({
+                            componentId: data.component.id
+                          });
+                          setSetupIntent(setupIntent2);
+                          setCheckoutStage("checkout");
+                        }
+                      } : { disabled: true },
+                      children: /* @__PURE__ */ jsxs7(
                         Flex,
                         {
                           $gap: "0.5rem",
@@ -10661,31 +10763,9 @@ var CheckoutDialog = () => {
                   ) : /* @__PURE__ */ jsx10(
                     StyledButton,
                     {
-                      ...allowCheckout ? {
-                        onClick: async () => {
-                          const priceId = (planPeriod === "month" ? selectedPlan?.monthlyPrice : selectedPlan?.yearlyPrice)?.id;
-                          if (!priceId) {
-                            return;
-                          }
-                          try {
-                            setIsLoading(true);
-                            await api.checkout({
-                              changeSubscriptionRequestBody: {
-                                newPlanId: selectedPlan.id,
-                                newPriceId: priceId,
-                                ...paymentMethodId && { paymentMethodId }
-                              }
-                            });
-                            setLayout("success");
-                          } catch {
-                            setError(
-                              "Error processing payment. Please try a different payment method."
-                            );
-                          } finally {
-                            setIsLoading(false);
-                          }
-                        }
-                      } : { disabled: true },
+                      disabled: isLoading || !allowCheckout,
+                      isLoading,
+                      ...allowCheckout && { onClick: checkout },
                       children: "Pay now"
                     }
                   ),
@@ -10706,8 +10786,8 @@ var CheckoutDialog = () => {
                       $size: theme.typography.text.fontSize,
                       $weight: theme.typography.text.fontWeight,
                       $color: theme.typography.text.color,
-                      children: checkoutStage === "plan" ? "Discounts & credits applied at checkout" : subscriptionPrice && `You will be billed ${subscriptionPrice} for this subscription
-                    every ${planPeriod} on the ${data.subscription?.latestInvoice?.dueDate && formatOrdinal(new Date(data.subscription.latestInvoice.dueDate).getDate())} ${planPeriod === "year" && data.subscription?.latestInvoice?.dueDate ? `of ${getMonthName(data.subscription.latestInvoice.dueDate)}` : ""} unless you unsubscribe.`
+                      children: subscriptionPrice && `You will be billed ${subscriptionPrice} for this subscription
+                    every ${planPeriod} ${charges?.periodStart ? `on the ${formatOrdinal(charges.periodStart.getDate())}` : ""} ${planPeriod === "year" && charges?.periodStart ? `of ${getMonthName(charges.periodStart)}` : ""} unless you unsubscribe.`
                     }
                   ) })
                 ]
@@ -10721,7 +10801,7 @@ var CheckoutDialog = () => {
 };
 // src/components/elements/plan-manager/PlanManager.tsx
-import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
 var resolveDesignProps2 = (props) => {
   return {
     header: {
@@ -10745,7 +10825,7 @@ var resolveDesignProps2 = (props) => {
     },
     callToAction: {
       isVisible: props.callToAction?.isVisible ?? true,
-      buttonSize: props.callToAction?.buttonSize ?? "lg",
+      buttonSize: props.callToAction?.buttonSize ?? "md",
       buttonStyle: props.callToAction?.buttonStyle ?? "primary"
     }
   };
@@ -10753,21 +10833,21 @@ var resolveDesignProps2 = (props) => {
 var PlanManager = forwardRef2(({ children, className, portal, ...rest }, ref) => {
   const props = resolveDesignProps2(rest);
   const theme = nt();
-  const { data, layout, stripe, setLayout } = useEmbed();
+  const { data, layout, setLayout } = useEmbed();
   const { currentPlan, canChangePlan } = useMemo5(() => {
     return {
       currentPlan: data.company?.plan,
-      canChangePlan: data.activePlans.length > 0 && data.stripeEmbed?.publishableKey && stripe !== null
+      canChangePlan: data.activePlans.length > 0
     };
-  }, [data.company, data.activePlans, data.stripeEmbed, stripe]);
-  return /* @__PURE__ */ jsxs7("div", { ref, className, children: [
+  }, [data.company, data.activePlans]);
+  return /* @__PURE__ */ jsxs8("div", { ref, className, children: [
     /* @__PURE__ */ jsx11(
       Flex,
       {
         $flexDirection: "column",
         $gap: "0.75rem",
         ...canChangePlan && { $margin: "0 0 0.5rem" },
-        children: props.header.isVisible && currentPlan && /* @__PURE__ */ jsxs7(
+        children: props.header.isVisible && currentPlan && /* @__PURE__ */ jsxs8(
           Flex,
           {
             $justifyContent: "space-between",
@@ -10775,7 +10855,7 @@ var PlanManager = forwardRef2(({ children, className, portal, ...rest }, ref) =>
             $width: "100%",
             ...canChangePlan && { $margin: "0 0 1.5rem" },
             children: [
-              /* @__PURE__ */ jsxs7("div", { children: [
+              /* @__PURE__ */ jsxs8("div", { children: [
                 /* @__PURE__ */ jsx11(Box, { $margin: "0 0 0.75rem", children: /* @__PURE__ */ jsx11(
                   Text,
                   {
@@ -10798,7 +10878,7 @@ var PlanManager = forwardRef2(({ children, className, portal, ...rest }, ref) =>
                   }
                 )
               ] }),
-              props.header.price.isVisible && typeof currentPlan.planPrice === "number" && currentPlan.planPeriod && /* @__PURE__ */ jsxs7(
+              props.header.price.isVisible && typeof currentPlan.planPrice === "number" && currentPlan.planPeriod && /* @__PURE__ */ jsxs8(
                 Text,
                 {
                   $font: theme.typography[props.header.price.fontStyle].fontFamily,
@@ -10833,9 +10913,9 @@ var PlanManager = forwardRef2(({ children, className, portal, ...rest }, ref) =>
 });
 // src/components/elements/included-features/IncludedFeatures.tsx
-import { forwardRef as forwardRef3, useLayoutEffect, useMemo as useMemo6, useRef as useRef3 } from "react";
+import { forwardRef as forwardRef3, useLayoutEffect as useLayoutEffect2, useMemo as useMemo6, useRef as useRef3 } from "react";
 var import_pluralize2 = __toESM(require_pluralize());
-import { Fragment as Fragment2, jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
 function resolveDesignProps3(props) {
   return {
     header: {
@@ -10893,7 +10973,7 @@ var IncludedFeatures = forwardRef3(({ className, ...rest }, ref) => {
   const isLightBackground = useMemo6(() => {
     return hexToHSL(theme.card.background).l > 50;
   }, [theme.card.background]);
-  useLayoutEffect(() => {
+  useLayoutEffect2(() => {
     const assignRows = (parent) => {
       let isWrapped = true;
       [...parent.children].forEach((el) => {
@@ -10921,7 +11001,7 @@ var IncludedFeatures = forwardRef3(({ className, ...rest }, ref) => {
       assignRows(el);
     });
   }, [elements.current.length]);
-  return /* @__PURE__ */ jsxs8(Flex, { ref, className, $flexDirection: "column", $gap: "1.5rem", children: [
+  return /* @__PURE__ */ jsxs9(Flex, { ref, className, $flexDirection: "column", $gap: "1.5rem", children: [
     props.header.isVisible && /* @__PURE__ */ jsx12(Box, { children: /* @__PURE__ */ jsx12(
       Text,
       {
@@ -10939,7 +11019,7 @@ var IncludedFeatures = forwardRef3(({ className, ...rest }, ref) => {
         }
         return [
           ...acc,
-          /* @__PURE__ */ jsxs8(
+          /* @__PURE__ */ jsxs9(
             Flex,
             {
               ref: (el) => elements.current.push(el),
@@ -10948,7 +11028,7 @@ var IncludedFeatures = forwardRef3(({ className, ...rest }, ref) => {
               $alignItems: "center",
               $gap: "1rem",
               children: [
-                /* @__PURE__ */ jsxs8(Flex, { $gap: "1rem", children: [
+                /* @__PURE__ */ jsxs9(Flex, { $gap: "1rem", children: [
                   props.icons.isVisible && feature?.icon && /* @__PURE__ */ jsx12(
                     IconRound,
                     {
@@ -10971,7 +11051,7 @@ var IncludedFeatures = forwardRef3(({ className, ...rest }, ref) => {
                     }
                   ) })
                 ] }),
-                (allocationType === "numeric" || allocationType === "unlimited") && feature?.name && /* @__PURE__ */ jsxs8(Box, { $textAlign: "right", $paddingLeft: "3.5rem", children: [
+                (allocationType === "numeric" || allocationType === "unlimited") && feature?.name && /* @__PURE__ */ jsxs9(Box, { $textAlign: "right", $paddingLeft: "3.5rem", children: [
                   props.entitlement.isVisible && /* @__PURE__ */ jsx12(
                     Text,
                     {
@@ -11010,7 +11090,7 @@ var IncludedFeatures = forwardRef3(({ className, ...rest }, ref) => {
 // src/components/elements/metered-features/MeteredFeatures.tsx
 import { forwardRef as forwardRef4, useMemo as useMemo7 } from "react";
-import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
 function resolveDesignProps4(props) {
   return {
     isVisible: props.isVisible ?? true,
@@ -11077,11 +11157,11 @@ var MeteredFeatures = forwardRef4(({ className, ...rest }, ref) => {
       }
       return [
         ...acc,
-        /* @__PURE__ */ jsxs9(Flex, { $gap: "1.5rem", children: [
+        /* @__PURE__ */ jsxs10(Flex, { $gap: "1.5rem", children: [
           props.icon.isVisible && feature?.icon && /* @__PURE__ */ jsx13(Box, { $flexShrink: "0", children: /* @__PURE__ */ jsx13(IconRound, { name: feature.icon, size: "sm" }) }),
-          /* @__PURE__ */ jsxs9(Box, { $flexGrow: "1", children: [
-            /* @__PURE__ */ jsxs9(Flex, { children: [
-              feature?.name && /* @__PURE__ */ jsxs9(Box, { $flexGrow: "1", children: [
+          /* @__PURE__ */ jsxs10(Box, { $flexGrow: "1", children: [
+            /* @__PURE__ */ jsxs10(Flex, { children: [
+              feature?.name && /* @__PURE__ */ jsxs10(Box, { $flexGrow: "1", children: [
                 /* @__PURE__ */ jsx13(
                   Text,
                   {
@@ -11105,7 +11185,7 @@ var MeteredFeatures = forwardRef4(({ className, ...rest }, ref) => {
                   }
                 )
               ] }),
-              (allocationType === "numeric" || allocationType === "unlimited") && feature?.name && /* @__PURE__ */ jsxs9(Box, { $textAlign: "right", children: [
+              (allocationType === "numeric" || allocationType === "unlimited") && feature?.name && /* @__PURE__ */ jsxs10(Box, { $textAlign: "right", children: [
                 props.allocation.isVisible && /* @__PURE__ */ jsx13(
                   Text,
                   {
@@ -11149,7 +11229,7 @@ var MeteredFeatures = forwardRef4(({ className, ...rest }, ref) => {
 // src/components/elements/upcoming-bill/UpcomingBill.tsx
 import { forwardRef as forwardRef5, useMemo as useMemo8 } from "react";
-import { jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
 function resolveDesignProps5(props) {
   return {
     header: {
@@ -11171,7 +11251,7 @@ function resolveDesignProps5(props) {
 var UpcomingBill = forwardRef5(({ className, ...rest }, ref) => {
   const props = resolveDesignProps5(rest);
   const theme = nt();
-  const { data, stripe } = useEmbed();
+  const { data } = useEmbed();
   const { upcomingInvoice } = useMemo8(() => {
     return {
       upcomingInvoice: {
@@ -11187,17 +11267,17 @@ var UpcomingBill = forwardRef5(({ className, ...rest }, ref) => {
       }
     };
   }, [data.subscription, data.upcomingInvoice]);
-  if (!stripe || !upcomingInvoice.amountDue || !upcomingInvoice.dueDate) {
+  if (!upcomingInvoice.amountDue || !upcomingInvoice.dueDate) {
     return null;
   }
-  return /* @__PURE__ */ jsxs10("div", { ref, className, children: [
+  return /* @__PURE__ */ jsxs11("div", { ref, className, children: [
     props.header.isVisible && upcomingInvoice.dueDate && /* @__PURE__ */ jsx14(
       Flex,
       {
         $justifyContent: "space-between",
         $alignItems: "center",
         $margin: "0 0 0.75rem",
-        children: /* @__PURE__ */ jsxs10(
+        children: /* @__PURE__ */ jsxs11(
           Text,
           {
             $font: theme.typography[props.header.fontStyle].fontFamily,
@@ -11213,7 +11293,7 @@ var UpcomingBill = forwardRef5(({ className, ...rest }, ref) => {
         )
       }
     ),
-    upcomingInvoice.amountDue && /* @__PURE__ */ jsxs10(Flex, { $justifyContent: "space-between", $alignItems: "start", $gap: "1rem", children: [
+    upcomingInvoice.amountDue && /* @__PURE__ */ jsxs11(Flex, { $justifyContent: "space-between", $alignItems: "start", $gap: "1rem", children: [
       props.price.isVisible && /* @__PURE__ */ jsx14(Flex, { $alignItems: "end", $flexGrow: "1", children: /* @__PURE__ */ jsx14(
         Text,
         {
@@ -11225,7 +11305,7 @@ var UpcomingBill = forwardRef5(({ className, ...rest }, ref) => {
           children: formatCurrency(upcomingInvoice.amountDue)
         }
       ) }),
-      /* @__PURE__ */ jsx14(Box, { $maxWidth: "10rem", $lineHeight: "1", $textAlign: "right", children: /* @__PURE__ */ jsxs10(
+      /* @__PURE__ */ jsx14(Box, { $maxWidth: "10rem", $lineHeight: "1", $textAlign: "right", children: /* @__PURE__ */ jsxs11(
         Text,
         {
           $font: theme.typography[props.contractEndDate.fontStyle].fontFamily,
@@ -11246,7 +11326,7 @@ var UpcomingBill = forwardRef5(({ className, ...rest }, ref) => {
 // src/components/elements/invoices/Invoices.tsx
 import { forwardRef as forwardRef6, useMemo as useMemo9 } from "react";
-import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
 function resolveDesignProps6(props) {
   return {
     header: {
@@ -11288,7 +11368,7 @@ var Invoices = forwardRef6(({ className, ...rest }, ref) => {
       ]
     };
   }, []);
-  return /* @__PURE__ */ jsx15("div", { ref, className, children: /* @__PURE__ */ jsxs11(Flex, { $flexDirection: "column", $gap: "1rem", children: [
+  return /* @__PURE__ */ jsx15("div", { ref, className, children: /* @__PURE__ */ jsxs12(Flex, { $flexDirection: "column", $gap: "1rem", children: [
     props.header.isVisible && /* @__PURE__ */ jsx15(Flex, { $justifyContent: "space-between", $alignItems: "center", children: /* @__PURE__ */ jsx15(
       Text,
       {
@@ -11303,7 +11383,7 @@ var Invoices = forwardRef6(({ className, ...rest }, ref) => {
       0,
       props.limit.isVisible && props.limit.number || invoices.length
     ).map(({ date, amount }, index) => {
-      return /* @__PURE__ */ jsxs11(Flex, { $justifyContent: "space-between", children: [
+      return /* @__PURE__ */ jsxs12(Flex, { $justifyContent: "space-between", children: [
         props.date.isVisible && /* @__PURE__ */ jsx15(
           Text,
           {
@@ -11314,7 +11394,7 @@ var Invoices = forwardRef6(({ className, ...rest }, ref) => {
             children: toPrettyDate(date)
           }
         ),
-        props.amount.isVisible && /* @__PURE__ */ jsxs11(
+        props.amount.isVisible && /* @__PURE__ */ jsxs12(
           Text,
           {
             $font: theme.typography[props.amount.fontStyle].fontFamily,
@@ -11329,7 +11409,7 @@ var Invoices = forwardRef6(({ className, ...rest }, ref) => {
         )
       ] }, index);
     }) }),
-    props.collapse.isVisible && /* @__PURE__ */ jsxs11(Flex, { $alignItems: "center", $gap: "0.5rem", children: [
+    props.collapse.isVisible && /* @__PURE__ */ jsxs12(Flex, { $alignItems: "center", $gap: "0.5rem", children: [
       /* @__PURE__ */ jsx15(Icon2, { name: "chevron-down", style: { color: "#D0D0D0" } }),
       /* @__PURE__ */ jsx15(
         Text,
@@ -11346,7 +11426,7 @@ var Invoices = forwardRef6(({ className, ...rest }, ref) => {
 });
 // src/components/embed/ComponentTree.tsx
-import { useEffect as useEffect4, useState as useState5, Children } from "react";
+import { useEffect as useEffect5, useState as useState5, Children } from "react";
 // src/components/embed/renderer.ts
 import { createElement } from "react";
@@ -11374,7 +11454,7 @@ var StyledViewport = dt.div`
 `;
 // src/components/layout/RenderLayout.tsx
-import { useEffect as useEffect3, useState as useState4 } from "react";
+import { useEffect as useEffect4, useState as useState4 } from "react";
 // src/components/layout/card/Card.tsx
 import { forwardRef as forwardRef8 } from "react";
@@ -11458,10 +11538,10 @@ var Card = forwardRef8(
 );
 // src/components/layout/RenderLayout.tsx
-import { jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
 var Disabled = () => {
   const theme = nt();
-  return /* @__PURE__ */ jsx18(Box, { $width: "max-content", $height: "max-content", $margin: "0 auto", children: /* @__PURE__ */ jsx18(Card, { children: /* @__PURE__ */ jsxs12(
+  return /* @__PURE__ */ jsx18(Box, { $width: "max-content", $height: "max-content", $margin: "0 auto", children: /* @__PURE__ */ jsx18(Card, { children: /* @__PURE__ */ jsxs13(
     Flex,
     {
       $flexDirection: "column",
@@ -11499,18 +11579,18 @@ var Success = () => {
   const theme = nt();
   const { hydrate, data, api, setLayout, isPending } = useEmbed();
   const [isOpen, setIsOpen] = useState4(true);
-  useEffect3(() => {
+  useEffect4(() => {
     if (api && data.component?.id) {
       hydrate();
       setTimeout(() => setIsOpen(false), 2e3);
     }
   }, [api, data.component?.id, hydrate]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (!isPending && !isOpen) {
       setLayout("portal");
     }
   }, [isPending, isOpen, setLayout]);
-  return /* @__PURE__ */ jsx18(Box, { $width: "max-content", $height: "max-content", $margin: "0 auto", children: /* @__PURE__ */ jsx18(Card, { children: /* @__PURE__ */ jsxs12(
+  return /* @__PURE__ */ jsx18(Box, { $width: "max-content", $height: "max-content", $margin: "0 auto", children: /* @__PURE__ */ jsx18(Card, { children: /* @__PURE__ */ jsxs13(
     Flex,
     {
       $flexDirection: "column",
@@ -11588,6 +11668,7 @@ import { forwardRef as forwardRef10 } from "react";
 var StyledColumn = dt.div`
   flex-grow: 1;
   flex-basis: ${({ theme }) => `calc(${100 / theme.numberOfColumns}% - ${(theme.numberOfColumns - 1) / theme.numberOfColumns}rem)`};
+  height: min-content;
 `;
 // src/components/layout/column/Column.tsx
@@ -11640,7 +11721,7 @@ function createRenderer(options) {
 }
 // src/components/embed/ComponentTree.tsx
-import { Fragment as Fragment3, jsx as jsx21, jsxs as jsxs13 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx21, jsxs as jsxs14 } from "react/jsx-runtime";
 var Loading = () => {
   const theme = nt();
   return /* @__PURE__ */ jsx21(
@@ -11651,13 +11732,13 @@ var Loading = () => {
       $alignItems: "center",
       $justifyContent: "center",
       $padding: `${theme.card.padding / TEXT_BASE_SIZE}rem`,
-      children: /* @__PURE__ */ jsx21(Loader, {})
+      children: /* @__PURE__ */ jsx21(Loader, { $size: "2xl", $color: "#194BFB" })
     }
   );
 };
 var Error2 = ({ message }) => {
   const theme = nt();
-  return /* @__PURE__ */ jsxs13(
+  return /* @__PURE__ */ jsxs14(
     Flex,
     {
       $flexDirection: "column",
@@ -11698,7 +11779,7 @@ var Error2 = ({ message }) => {
 var ComponentTree = () => {
   const { error, nodes } = useEmbed();
   const [children, setChildren] = useState5(/* @__PURE__ */ jsx21(Loading, {}));
-  useEffect4(() => {
+  useEffect5(() => {
     const renderer = createRenderer();
     setChildren(nodes.map(renderer));
   }, [nodes]);