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

@@ -6782,143 +6782,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
-var import_react_stripe_js = require("@stripe/react-stripe-js");
 // src/api/runtime.ts
 var BASE_PATH = "https://api.schematichq.com".replace(/\/+$/, "");
 var Configuration = class {
@@ -7250,10 +7113,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"])
@@ -7765,6 +7628,7 @@ function CompanySubscriptionResponseDataFromJSONTyped(json, ignoreDiscriminator)
     products: json["products"].map(
       BillingProductForSubscriptionResponseDataFromJSON
     ),
+    status: json["status"],
     subscriptionExternalId: json["subscription_external_id"],
     totalPrice: json["total_price"]
   };
@@ -8521,7 +8385,6 @@ var EmbedContext = (0, import_react2.createContext)({
   },
   nodes: [],
   settings: { ...defaultSettings },
-  stripe: null,
   layout: "portal",
   error: void 0,
   isPending: false,
@@ -8531,8 +8394,6 @@ var EmbedContext = (0, import_react2.createContext)({
   },
   updateSettings: () => {
   },
-  setStripe: () => {
-  },
   setLayout: () => {
   }
 });
@@ -8551,7 +8412,6 @@ var EmbedProvider = ({
       },
       nodes: [],
       settings: { ...defaultSettings },
-      stripe: null,
       layout: "portal",
       isPending: false,
       error: void 0,
@@ -8561,8 +8421,6 @@ var EmbedProvider = ({
       },
       updateSettings: () => {
       },
-      setStripe: () => {
-      },
       setLayout: () => {
       }
     };
@@ -8588,16 +8446,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) {
@@ -8632,15 +8485,6 @@ var EmbedProvider = ({
     },
     [setState]
   );
-  const setStripe = (0, import_react2.useCallback)(
-    (stripe) => {
-      setState((prev2) => ({
-        ...prev2,
-        stripe
-      }));
-    },
-    [setState]
-  );
   const setLayout = (0, import_react2.useCallback)(
     (layout) => {
       setState((prev2) => ({
@@ -8662,12 +8506,11 @@ var EmbedProvider = ({
     styleRef.current = style;
   }, []);
   (0, import_react2.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]);
   (0, import_react2.useEffect)(() => {
     hydrate();
@@ -8684,47 +8527,6 @@ var EmbedProvider = ({
       }
     }
   }, [state.settings.theme.typography]);
-  const renderChildren = () => {
-    if (state.stripe) {
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_react_stripe_js.Elements,
-        {
-          stripe: state.stripe,
-          options: {
-            appearance: {
-              theme: "stripe",
-              variables: {
-                // Base
-                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__ */ (0, import_jsx_runtime.jsx)(
     EmbedContext.Provider,
     {
@@ -8733,19 +8535,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__ */ (0, import_jsx_runtime.jsxs)(ot, { theme: state.settings.theme, children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GlobalStyle, {}),
-        renderChildren()
+        children
       ] })
     }
   );
@@ -8938,22 +8738,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
@@ -8962,8 +8797,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;
@@ -9047,10 +8885,11 @@ var Button2 = ({
   size = "md",
   variant = "solid",
   disabled = false,
+  isLoading = false,
   children,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
     Button,
     {
       $color: color,
@@ -9058,7 +8897,10 @@ var Button2 = ({
       $variant: variant,
       disabled,
       ...props,
-      children
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Loader, { $size: "sm", $isLoading: isLoading }),
+        children
+      ]
     }
   );
 };
@@ -9152,25 +8994,6 @@ var IconRound = ({
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Container, { $size: size, $variant: variant, $colors: colors, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(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
 var import_react4 = require("react");
 var import_jsx_runtime5 = require("react/jsx-runtime");
@@ -9224,8 +9047,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",
@@ -9357,21 +9180,178 @@ 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
 var import_react8 = require("react");
 var import_pluralize = __toESM(require_pluralize());
-// src/components/elements/payment-method/PaymentMethod.tsx
-var import_react6 = require("react");
-var import_react_dom = require("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%;
-  ${({ disabled, $color = "primary", theme }) => {
+// 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
+var import_react_stripe_js3 = require("@stripe/react-stripe-js");
+// src/components/elements/payment-method/PaymentMethod.tsx
+var import_react6 = require("react");
+var import_react_dom = require("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;
   let colorFn;
@@ -9446,19 +9426,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;
         `;
   }
@@ -9764,13 +9744,13 @@ var PaymentMethod = (0, import_react6.forwardRef)(({ children, className, portal
 // src/components/elements/plan-manager/PaymentForm.tsx
 var import_react7 = require("react");
+var import_react_stripe_js = require("@stripe/react-stripe-js");
 var import_react_stripe_js2 = require("@stripe/react-stripe-js");
-var import_react_stripe_js3 = require("@stripe/react-stripe-js");
 var import_jsx_runtime9 = require("react/jsx-runtime");
 var PaymentForm = ({ plan, period, onConfirm }) => {
-  const stripe = (0, import_react_stripe_js3.useStripe)();
-  const elements = (0, import_react_stripe_js3.useElements)();
-  const { api, data } = useEmbed();
+  const stripe = (0, import_react_stripe_js2.useStripe)();
+  const elements = (0, import_react_stripe_js2.useElements)();
+  const { api } = useEmbed();
   const [message, setMessage] = (0, import_react7.useState)(null);
   const [isLoading, setIsLoading] = (0, import_react7.useState)(false);
   const [isConfirmed, setIsConfirmed] = (0, import_react7.useState)(false);
@@ -9826,20 +9806,20 @@ var PaymentForm = ({ plan, period, onConfirm }) => {
             $width: "100%",
             $marginBottom: "1.5rem",
             children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-              import_react_stripe_js2.LinkAuthenticationElement,
+              import_react_stripe_js.LinkAuthenticationElement,
               {
                 id: "link-authentication-element"
               }
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Box, { $marginBottom: "1.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_stripe_js2.PaymentElement, { id: "payment-element" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Box, { $marginBottom: "1.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_stripe_js.PaymentElement, { id: "payment-element" }) }),
         /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           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__ */ (0, import_jsx_runtime9.jsx)(Text, { id: "button-text", children: isLoading ? "Loading" : "Save payment method" })
           }
@@ -9910,6 +9890,8 @@ var CheckoutDialog = () => {
   const [showPaymentForm, setShowPaymentForm] = (0, import_react8.useState)(
     () => typeof data.subscription?.paymentMethod === "undefined"
   );
+  const [stripe, setStripe] = (0, import_react8.useState)(null);
+  const [setupIntent, setSetupIntent] = (0, import_react8.useState)();
   const { paymentMethod, currentPlan, availablePlans, planPeriodOptions } = (0, import_react8.useMemo)(() => {
     const showMonthlyPriceOption = data.activePlans.some(
       (plan) => typeof plan.yearlyPrice !== "undefined"
@@ -9987,7 +9969,41 @@ var CheckoutDialog = () => {
     },
     [selectedPlan, selectPlan]
   );
-  const allowCheckout = api && selectedPlan && selectedPlan?.id !== currentPlan?.id && (paymentMethod && !showPaymentForm || paymentMethodId) && !isLoading;
+  const checkout = (0, import_react8.useCallback)(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]);
+  (0, import_react8.useEffect)(() => {
+    if (!stripe && setupIntent?.publishableKey) {
+      setStripe(loadStripe(setupIntent.publishableKey));
+    }
+  }, [stripe, setupIntent?.publishableKey]);
+  (0, import_react8.useLayoutEffect)(() => {
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, []);
+  const allowCheckout = api && selectedPlan && (paymentMethod && !showPaymentForm || paymentMethodId) && !isLoading;
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Modal, { size: "lg", children: [
     /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ModalHeader, { bordered: true, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Flex, { $gap: "1rem", children: [
       /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Flex, { $gap: "0.5rem", $alignItems: "center", children: [
@@ -10122,11 +10138,11 @@ var CheckoutDialog = () => {
                 )
               ] }),
               /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(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) => {
@@ -10266,10 +10282,10 @@ var CheckoutDialog = () => {
                                 ]
                               }
                             ),
-                            !(plan.current || plan.id === currentPlan?.id) && plan.id !== selectedPlan?.id && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                            plan.id !== selectedPlan?.id && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                               StyledButton,
                               {
-                                disabled: plan.valid === false,
+                                disabled: isLoading || plan.valid === false,
                                 ...plan.valid === true && {
                                   onClick: () => selectPlan(plan)
                                 },
@@ -10288,36 +10304,69 @@ var CheckoutDialog = () => {
                 );
               }) })
             ] }),
-            selectedPlan && checkoutStage === "checkout" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_jsx_runtime10.Fragment, { children: showPaymentForm ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-                PaymentForm,
-                {
-                  plan: selectedPlan,
-                  period: planPeriod,
-                  onConfirm: (value) => {
-                    setPaymentMethodId(value);
-                  }
-                }
-              ),
-              typeof data.subscription?.paymentMethod !== "undefined" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-                Box,
-                {
-                  tabIndex: 0,
-                  onClick: () => setShowPaymentForm(false),
-                  $cursor: "pointer",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-                    Text,
+            selectedPlan && checkoutStage === "checkout" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_jsx_runtime10.Fragment, { children: showPaymentForm && setupIntent?.setupIntentClientSecret ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+              import_react_stripe_js3.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__ */ (0, import_jsx_runtime10.jsx)(
+                    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__ */ (0, import_jsx_runtime10.jsx)(
+                    Box,
+                    {
+                      tabIndex: 0,
+                      onClick: () => setShowPaymentForm(false),
+                      $cursor: "pointer",
+                      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                        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__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+                ]
+              }
+            ) : /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
               /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(PaymentMethod, {}),
               /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                 Box,
@@ -10345,16 +10394,17 @@ var CheckoutDialog = () => {
         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__ */ (0, import_jsx_runtime10.jsxs)(
               Flex,
               {
-                $flexDirection: "column",
                 $position: "relative",
+                $flexDirection: "column",
                 $gap: "1rem",
                 $width: "100%",
                 $height: "auto",
@@ -10472,41 +10522,49 @@ var CheckoutDialog = () => {
                     }
                   ) }),
                   /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
-                    currentPlan && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Flex, { $justifyContent: "space-between", $alignItems: "center", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-                        Flex,
-                        {
-                          ...selectedPlan && {
-                            $opacity: "0.625",
-                            $textDecoration: "line-through"
-                          },
-                          children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                    currentPlan && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+                      Flex,
+                      {
+                        $justifyContent: "space-between",
+                        $alignItems: "center",
+                        $gap: "1rem",
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                            Flex,
+                            {
+                              ...selectedPlan && {
+                                $opacity: "0.625",
+                                $textDecoration: "line-through"
+                              },
+                              children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                                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__ */ (0, import_jsx_runtime10.jsx)(Flex, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
                             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__ */ (0, import_jsx_runtime10.jsx)(Flex, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
-                        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__ */ (0, import_jsx_runtime10.jsxs)(Box, { $marginBottom: "1rem", children: [
                       /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                         Box,
@@ -10527,34 +10585,42 @@ var CheckoutDialog = () => {
                           )
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Flex, { $justifyContent: "space-between", $alignItems: "center", children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Flex, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-                          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__ */ (0, import_jsx_runtime10.jsx)(Flex, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
-                          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__ */ (0, import_jsx_runtime10.jsxs)(
+                        Flex,
+                        {
+                          $justifyContent: "space-between",
+                          $alignItems: "center",
+                          $gap: "1rem",
+                          children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Flex, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                              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__ */ (0, import_jsx_runtime10.jsx)(Flex, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+                              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__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
@@ -10615,7 +10681,7 @@ var CheckoutDialog = () => {
                 $height: "auto",
                 $padding: "1.5rem",
                 children: [
-                  selectedPlan && subscriptionPrice && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Flex, { $justifyContent: "space-between", children: [
+                  selectedPlan && subscriptionPrice && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Flex, { $justifyContent: "space-between", $gap: "1rem", children: [
                     /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Box, { $opacity: "0.625", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
                       Text,
                       {
@@ -10644,7 +10710,7 @@ var CheckoutDialog = () => {
                       }
                     ) })
                   ] }),
-                  charges && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Flex, { $justifyContent: "space-between", children: [
+                  charges && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Flex, { $justifyContent: "space-between", $gap: "1rem", children: [
                     /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Box, { $opacity: "0.625", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                       Text,
                       {
@@ -10662,17 +10728,47 @@ 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__ */ (0, import_jsx_runtime10.jsxs)(Flex, { $justifyContent: "space-between", $gap: "1rem", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Box, { $opacity: "0.625", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                      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__ */ (0, import_jsx_runtime10.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                      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__ */ (0, import_jsx_runtime10.jsx)(
                     StyledButton,
                     {
-                      disabled: !selectedPlan,
-                      ...selectedPlan && {
-                        onClick: () => setCheckoutStage("checkout")
-                      },
+                      ...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__ */ (0, import_jsx_runtime10.jsxs)(
                         Flex,
                         {
@@ -10690,31 +10786,9 @@ var CheckoutDialog = () => {
                   ) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                     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"
                     }
                   ),
@@ -10735,8 +10809,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.`
                     }
                   ) })
                 ]
@@ -10774,7 +10848,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"
     }
   };
@@ -10782,13 +10856,13 @@ var resolveDesignProps2 = (props) => {
 var PlanManager = (0, import_react9.forwardRef)(({ 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 } = (0, import_react9.useMemo)(() => {
     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]);
+  }, [data.company, data.activePlans]);
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { ref, className, children: [
     /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       Flex,
@@ -11200,7 +11274,7 @@ function resolveDesignProps5(props) {
 var UpcomingBill = (0, import_react12.forwardRef)(({ className, ...rest }, ref) => {
   const props = resolveDesignProps5(rest);
   const theme = nt();
-  const { data, stripe } = useEmbed();
+  const { data } = useEmbed();
   const { upcomingInvoice } = (0, import_react12.useMemo)(() => {
     return {
       upcomingInvoice: {
@@ -11216,7 +11290,7 @@ var UpcomingBill = (0, import_react12.forwardRef)(({ className, ...rest }, ref)
       }
     };
   }, [data.subscription, data.upcomingInvoice]);
-  if (!stripe || !upcomingInvoice.amountDue || !upcomingInvoice.dueDate) {
+  if (!upcomingInvoice.amountDue || !upcomingInvoice.dueDate) {
     return null;
   }
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { ref, className, children: [
@@ -11617,6 +11691,7 @@ var import_react18 = require("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
@@ -11680,7 +11755,7 @@ var Loading = () => {
       $alignItems: "center",
       $justifyContent: "center",
       $padding: `${theme.card.padding / TEXT_BASE_SIZE}rem`,
-      children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Loader, {})
+      children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Loader, { $size: "2xl", $color: "#194BFB" })
     }
   );
 };