@schematichq/schematic-react 0.2.0-rc.4 → 0.2.0-rc.5

package/dist/schematic-react.cjs.js

@@ -864,9 +864,8 @@ __export(src_exports, {
   IncludedFeatures: () => IncludedFeatures,
   Invoices: () => Invoices,
   MeteredFeatures: () => MeteredFeatures,
-  OverlayHeader: () => OverlayHeader,
-  OverlaySideBar: () => OverlaySideBar,
-  OverlayWrapper: () => OverlayWrapper,
+  Modal: () => Modal,
+  ModalHeader: () => ModalHeader,
   PaymentMethod: () => PaymentMethod,
   PlanManager: () => PlanManager,
   ProgressBar: () => ProgressBar,
@@ -6236,6 +6235,11 @@ var Qe = function() {
 }();
 var et = import_react.default.createContext(void 0);
 var tt = et.Consumer;
+function nt() {
+  var e = (0, import_react.useContext)(et);
+  if (!e) throw he(18);
+  return e;
+}
 function ot(e) {
   var n = import_react.default.useContext(et), r2 = (0, import_react.useMemo)(function() {
     return function(e2, n2) {
@@ -6383,6 +6387,12 @@ function ft(n) {
   }
   return import_react.default.memo(l2);
 }
+function mt(t) {
+  for (var n = [], o2 = 1; o2 < arguments.length; o2++) n[o2 - 1] = arguments[o2];
+  "undefined" != typeof navigator && "ReactNative" === navigator.product && console.warn("`keyframes` cannot be used on ReactNative, only on the web. To do animation in ReactNative please use Animated.");
+  var r2 = ae(lt.apply(void 0, __spreadArray([t], n, false))), s2 = $(r2);
+  return new We(s2, r2);
+}
 var vt = function() {
   function e() {
     var e2 = this;
@@ -7351,6 +7361,7 @@ function InvoiceResponseDataFromJSONTyped(json, ignoreDiscriminator) {
     environmentId: json["environment_id"],
     externalId: json["external_id"],
     id: json["id"],
+    paymentMethodExternalId: json["payment_method_external_id"] == null ? void 0 : json["payment_method_external_id"],
     subscriptionExternalId: json["subscription_external_id"] == null ? void 0 : json["subscription_external_id"],
     subtotal: json["subtotal"],
     updatedAt: new Date(json["updated_at"])
@@ -8002,8 +8013,8 @@ function parseEditorState(data) {
   return arr;
 }
 async function fetchComponent(id, api) {
-  const settings = { ...defaultSettings };
   const nodes = [];
+  const settings = { ...defaultSettings };
   const response = await api.hydrateComponent({ componentId: id });
   const { data } = response;
   if (data.component?.ast) {
@@ -8117,9 +8128,11 @@ var EmbedProvider = ({
   const setData = (0, import_react2.useCallback)(
     (data) => {
       setState((prev2) => {
-        const updated = { ...prev2 };
-        (0, import_lodash.default)(updated.data, data);
-        return updated;
+        const updatedData = (0, import_lodash.default)({}, prev2.data, { ...data });
+        return {
+          ...prev2,
+          data: updatedData
+        };
       });
     },
     [setState]
@@ -8127,9 +8140,11 @@ var EmbedProvider = ({
   const updateSettings = (0, import_react2.useCallback)(
     (settings) => {
       setState((prev2) => {
-        const updated = { ...prev2 };
-        (0, import_lodash.default)(updated.settings, settings);
-        return updated;
+        const updatedSettings = (0, import_lodash.default)({}, prev2.settings, { ...settings });
+        return {
+          ...prev2,
+          settings: updatedSettings
+        };
       });
     },
     [setState]
@@ -9151,7 +9166,7 @@ var useSchematicFlag = (key, opts) => {
 };
 
 // src/components/elements/plan-manager/PlanManager.tsx
-var import_react8 = require("react");
+var import_react10 = require("react");
 var import_react_dom = require("react-dom");
 
 // src/utils/color.ts
@@ -9515,13 +9530,115 @@ var IconRound = ({
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Container, { $size: size, $variant: variant, $colors: colors, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon2, { name }) });
 };
 
+// src/components/ui/modal/Modal.tsx
+var import_react6 = require("react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var Modal = ({ children, onClose }) => {
+  const theme = nt();
+  const { setLayout } = useEmbed();
+  const ref = (0, import_react6.useRef)(null);
+  const handleClose = (0, import_react6.useCallback)(() => {
+    setLayout("portal");
+    onClose?.();
+  }, [setLayout, onClose]);
+  (0, import_react6.useEffect)(() => {
+    ref.current?.focus();
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    Box,
+    {
+      ref,
+      tabIndex: 0,
+      onClick: (event) => {
+        if (event.target === event.currentTarget) {
+          handleClose();
+        }
+      },
+      onKeyDown: (event) => {
+        if (event.key === "Escape") {
+          handleClose();
+        }
+      },
+      $position: "absolute",
+      $top: "50%",
+      $left: "50%",
+      $zIndex: "999999",
+      $transform: "translate(-50%, -50%)",
+      $width: "100%",
+      $height: "100%",
+      $backgroundColor: hexToHSL(theme.card.background).l > 50 ? darken(theme.card.background, 15) : lighten(theme.card.background, 15),
+      $overflow: "hidden",
+      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        Flex,
+        {
+          $position: "relative",
+          $top: "50%",
+          $left: "50%",
+          $transform: "translate(-50%, -50%)",
+          $flexDirection: "column",
+          $overflow: "hidden",
+          $width: "calc(100% - 5rem)",
+          $height: "calc(100% - 5rem)",
+          $backgroundColor: hexToHSL(theme.card.background).l > 50 ? darken(theme.card.background, 2.5) : lighten(theme.card.background, 2.5),
+          $borderRadius: "0.5rem",
+          $boxShadow: "0px 1px 20px 0px #1018280F, 0px 1px 3px 0px #1018281A;",
+          id: "select-plan-dialog",
+          role: "dialog",
+          "aria-labelledby": "select-plan-dialog-label",
+          "aria-modal": "true",
+          children
+        }
+      )
+    }
+  );
+};
+
+// src/components/ui/modal/ModalHeader.tsx
+var import_react7 = require("react");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var ModalHeader = ({ children, onClose }) => {
+  const theme = nt();
+  const { setLayout } = useEmbed();
+  const handleClose = (0, import_react7.useCallback)(() => {
+    setLayout("portal");
+    onClose?.();
+  }, [setLayout, onClose]);
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    Flex,
+    {
+      $justifyContent: "space-between",
+      $alignItems: "center",
+      $gap: "1rem",
+      $height: "3.75rem",
+      $padding: "0 0.625rem 0 2.5rem",
+      $backgroundColor: theme.card.background,
+      $borderBottomWidth: "1px",
+      $borderBottomStyle: "solid",
+      $borderBottomColor: hexToHSL(theme.card.background).l > 50 ? darken(theme.card.background, 15) : lighten(theme.card.background, 15),
+      children: [
+        children,
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Box, { $cursor: "pointer", onClick: handleClose, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          Icon2,
+          {
+            name: "close",
+            style: {
+              fontSize: 36,
+              color: hexToHSL(theme.card.background).l > 50 ? darken(theme.card.background, 27.5) : lighten(theme.card.background, 27.5)
+            }
+          }
+        ) })
+      ]
+    }
+  );
+};
+
 // src/components/ui/progress-bar/styles.ts
 var Container2 = dt(Flex)`
   position: relative;
 `;
 
 // src/components/ui/progress-bar/ProgressBar.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var ProgressBar = ({
   progress,
   value,
@@ -9537,21 +9654,21 @@ var ProgressBar = ({
     orange: "#DB6769",
     red: "#EF4444"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
     Container2,
     {
       $alignItems: "center",
       $gap: `${16 / TEXT_BASE_SIZE}rem`,
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           Flex,
           {
             $position: "relative",
             $alignItems: "center",
             $width: `${barWidth}`,
             $maxWidth: "100%",
-            children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
               Flex,
               {
                 $position: "relative",
@@ -9560,7 +9677,7 @@ var ProgressBar = ({
                 $height: `${8 / TEXT_BASE_SIZE}rem`,
                 $background: "#F2F4F7",
                 $borderRadius: "9999px",
-                children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                   Box,
                   {
                     $width: `${Math.min(progress, 100)}%`,
@@ -9573,7 +9690,7 @@ var ProgressBar = ({
             )
           }
         ),
-        total !== 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(Text, { $size: 14, $weight: 500, children: [
+        total !== 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Text, { $size: 14, $weight: 500, children: [
           value,
           "/",
           total
@@ -9584,10 +9701,10 @@ var ProgressBar = ({
 };
 
 // src/components/elements/plan-manager/CheckoutDialog.tsx
-var import_react7 = require("react");
+var import_react9 = require("react");
 
 // src/components/elements/plan-manager/PaymentForm.tsx
-var import_react6 = require("react");
+var import_react8 = require("react");
 var import_react_stripe_js2 = require("@stripe/react-stripe-js");
 var import_react_stripe_js3 = require("@stripe/react-stripe-js");
 
@@ -9599,7 +9716,18 @@ var StyledButton = dt(Button2)`
   width: 100%;
   ${({ disabled, $color = "primary", theme }) => {
   const { l: l2 } = hexToHSL(theme[$color]);
-  const textColor = disabled ? "#989898" : l2 > 50 ? "#000000" : "#FFFFFF";
+  let textColor;
+  let colorFn;
+  if (l2 > 50) {
+    textColor = "#000000";
+    colorFn = lighten;
+  } else {
+    textColor = "#FFFFFF";
+    colorFn = darken;
+  }
+  if (disabled) {
+    textColor = colorFn(textColor, 42.5);
+  }
   return lt`
       color: ${textColor};
 
@@ -9610,35 +9738,47 @@ var StyledButton = dt(Button2)`
 }};
 
   ${({ disabled, $color = "primary", theme, $variant = "filled" }) => {
-  const color = disabled ? "#EEEEEE" : theme[$color];
+  let color = theme[$color];
+  if (disabled) {
+    const { l: l2 } = hexToHSL(theme.card.background);
+    color = hslToHex({ h: 0, s: 0, l: l2 });
+    color = l2 > 50 ? darken(color, 7.5) : lighten(color, 7.5);
+  }
   return $variant === "filled" ? lt`
           background-color: ${color};
           border-color: ${color};
         ` : lt`
           background-color: transparent;
-          border-color: #d2d2d2;
-          color: #194bfb;
+          border-color: ${color};
+          color: ${color};
+
           ${Text} {
-            color: #194bfb;
+            color: ${color};
           }
         `;
 }}
 
-  &:hover {
-    ${({ disabled }) => disabled && "cursor: not-allowed;"}
-    ${({ disabled, $color = "primary", theme, $variant = "filled" }) => {
+  &:disabled:hover {
+    cursor: not-allowed;
+  }
+
+  &:not(:disabled):hover {
+    ${({ $color = "primary", theme, $variant = "filled" }) => {
   const specified = theme[$color];
   const lightened = lighten(specified, 15);
-  const color = disabled ? "#EEEEEE" : specified === lightened ? darken(specified, 15) : lightened;
+  const color = specified === lightened ? darken(specified, 15) : lightened;
+  const { l: l2 } = hexToHSL(theme[$color]);
+  const textColor = l2 > 50 ? "#000000" : "#FFFFFF";
   return $variant === "filled" ? lt`
             background-color: ${color};
             border-color: ${color};
           ` : lt`
             background-color: ${color};
             border-color: ${color};
-            color: #ffffff;
+            color: ${textColor};
+
             ${Text} {
-              color: #ffffff;
+              color: ${textColor};
             }
           `;
 }}
@@ -9669,14 +9809,14 @@ var StyledButton = dt(Button2)`
 `;
 
 // src/components/elements/plan-manager/PaymentForm.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+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 [message, setMessage] = (0, import_react6.useState)(null);
-  const [isLoading, setIsLoading] = (0, import_react6.useState)(false);
-  const [isConfirmed, setIsConfirmed] = (0, import_react6.useState)(false);
+  const [message, setMessage] = (0, import_react8.useState)(null);
+  const [isLoading, setIsLoading] = (0, import_react8.useState)(false);
+  const [isConfirmed, setIsConfirmed] = (0, import_react8.useState)(false);
   const handleSubmit = async (event) => {
     event.preventDefault();
     const priceId = period === "month" ? plan.monthlyPrice?.id : plan.yearlyPrice?.id;
@@ -9700,8 +9840,6 @@ var PaymentForm = ({ plan, period, onConfirm }) => {
       }
       if (error?.type === "card_error" || error?.type === "validation_error") {
         setMessage(error.message);
-      } else {
-        setMessage("An unexpected error occured.");
       }
       setIsLoading(false);
     } catch (error) {
@@ -9713,7 +9851,7 @@ var PaymentForm = ({ plan, period, onConfirm }) => {
       setIsLoading(false);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
     "form",
     {
       id: "payment-form",
@@ -9726,27 +9864,15 @@ var PaymentForm = ({ plan, period, onConfirm }) => {
         overflowY: "auto"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
-          Box,
-          {
-            $fontSize: "18px",
-            $marginBottom: "1.5rem",
-            $display: "inline-block",
-            $width: "100%",
-            children: [
-              "Add payment method",
-              " "
-            ]
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Box, { $width: "100%", $marginBottom: "1.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text, { $size: 18, children: "Add payment method" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           Flex,
           {
             $flexDirection: "column",
             $gap: "1.5rem",
             $marginBottom: "1.5rem",
             $width: "100%",
-            children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
               import_react_stripe_js2.LinkAuthenticationElement,
               {
                 id: "link-authentication-element"
@@ -9754,18 +9880,18 @@ var PaymentForm = ({ plan, period, onConfirm }) => {
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Flex, { $flexDirection: "column", $width: "100%", $flex: "1", $height: "100%", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_stripe_js2.PaymentElement, { id: "payment-element" }),
-          message && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { id: "payment-message", children: message })
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Flex, { $flexDirection: "column", $width: "100%", $flex: "1", $height: "100%", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_stripe_js2.PaymentElement, { id: "payment-element" }),
+          message && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text, { id: "payment-message", children: message })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           StyledButton,
           {
             id: "submit",
             disabled: isLoading || !stripe || !elements || !data.stripeEmbed?.publishableKey || !data.stripeEmbed?.setupIntentClientSecret || isConfirmed,
             $size: "md",
             $color: "primary",
-            children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { id: "button-text", children: isLoading ? "Loading" : "Save payment method" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text, { id: "button-text", children: !isLoading ? "Loading" : "Save payment method" })
           }
         ) })
       ]
@@ -9774,396 +9900,60 @@ var PaymentForm = ({ plan, period, onConfirm }) => {
 };
 
 // src/components/elements/plan-manager/CheckoutDialog.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var OverlayHeader = ({
-  children,
-  onClose
-}) => {
-  const { setLayout } = useEmbed();
-  const handleClose = (0, import_react7.useCallback)(() => {
-    setLayout("portal");
-    onClose?.();
-  }, [setLayout, onClose]);
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
-    Flex,
-    {
-      $paddingLeft: "2.5rem",
-      $paddingRight: "2.5rem",
-      $padding: ".75rem 2.5rem",
-      $flexDirection: "row",
-      $justifyContent: "space-between",
-      $alignItems: "center",
-      $borderBottom: "1px solid #DEDEDE",
-      $gap: "1rem",
-      $backgroundColor: "#FFFFFF",
-      $borderRadius: ".5rem .5rem 0 0",
-      children: [
-        children,
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Box, { $cursor: "pointer", onClick: handleClose, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon2, { name: "close", style: { fontSize: 36, color: "#B8B8B8" } }) }) })
-      ]
-    }
-  );
-};
-var OverlayWrapper = ({
-  children,
-  size = "lg",
-  onClose
-}) => {
-  const { setLayout } = useEmbed();
-  const ref = (0, import_react7.useRef)(null);
-  const sizeWidthMap = {
-    md: "700px",
-    lg: "75%"
-  };
-  const sizeHeighthMap = {
-    md: "auto",
-    lg: "75%"
-  };
-  const sizeMaxWidthMap = {
-    md: "auto",
-    lg: "1140px"
-  };
-  const handleClose = (0, import_react7.useCallback)(() => {
-    setLayout("portal");
-    onClose?.();
-  }, [setLayout, onClose]);
-  (0, import_react7.useEffect)(() => {
-    ref.current?.focus();
-  }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-    Box,
-    {
-      ref,
-      tabIndex: 0,
-      onClick: (event) => {
-        if (event.target === event.currentTarget) {
-          handleClose();
-        }
-      },
-      onKeyDown: (event) => {
-        if (event.key === "Escape") {
-          handleClose();
-        }
-      },
-      $position: "absolute",
-      $top: "50%",
-      $left: "50%",
-      $zIndex: "999999",
-      $transform: "translate(-50%, -50%)",
-      $width: "100%",
-      $height: "100%",
-      $backgroundColor: "#D9D9D9",
-      $overflow: "hidden",
-      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-        Flex,
-        {
-          $position: "relative",
-          $top: "50%",
-          $left: "50%",
-          $transform: "translate(-50%, -50%)",
-          $flexDirection: "column",
-          $maxWidth: sizeMaxWidthMap[size],
-          $width: sizeWidthMap[size],
-          $height: sizeHeighthMap[size],
-          $backgroundColor: "#FBFBFB",
-          $borderBottom: "1px solid #DEDEDE",
-          $borderRadius: "8px",
-          $boxShadow: "0px 1px 20px 0px #1018280F, 0px 1px 3px 0px #1018281A;",
-          id: "select-plan-dialog",
-          role: "dialog",
-          "aria-labelledby": "select-plan-dialog-label",
-          "aria-modal": "true",
-          children
-        }
-      )
-    }
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var CheckoutDialog = () => {
+  const [checkoutStage, setCheckoutStage] = (0, import_react9.useState)(
+    "plan"
   );
-};
-var OverlaySideBar = ({
-  pricePeriod,
-  setPricePeriod,
-  checkoutStage,
-  setCheckoutStage,
-  currentPlan,
-  selectedPlan,
-  paymentMethodId
-}) => {
-  const { api } = useEmbed();
-  const savingsPercentage = (0, import_react7.useMemo)(() => {
-    if (selectedPlan && pricePeriod === "month") {
+  const [planPeriod, setPlanPeriod] = (0, import_react9.useState)("month");
+  const [selectedPlan, setSelectedPlan] = (0, import_react9.useState)();
+  const [paymentMethodId, setPaymentMethodId] = (0, import_react9.useState)();
+  const [isLoading, setIsLoading] = (0, import_react9.useState)(false);
+  const [isCheckoutComplete, setIsCheckoutComplete] = (0, import_react9.useState)(false);
+  const theme = nt();
+  const { api, data, settings } = useEmbed();
+  const { currentPlan, availablePlans } = (0, import_react9.useMemo)(() => {
+    return {
+      currentPlan: data.company?.plan,
+      availablePlans: data.activePlans
+    };
+  }, [data.company, data.activePlans]);
+  const savingsPercentage = (0, import_react9.useMemo)(() => {
+    if (selectedPlan) {
       const monthly = (selectedPlan?.monthlyPrice?.price || 0) * 12;
       const yearly = selectedPlan?.yearlyPrice?.price || 0;
       return Math.round((monthly - yearly) / monthly * 1e4) / 100;
     }
     return 0;
-  }, [selectedPlan, pricePeriod]);
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
-    Flex,
-    {
-      $flexDirection: "column",
-      $background: "white",
-      $borderRadius: "0 0 0.5rem",
-      $maxWidth: "275px",
-      $height: "100%",
-      $boxShadow: "0px 1px 20px 0px #1018280F, 0px 1px 3px 0px #1018281A;",
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
-          Flex,
+  }, [selectedPlan]);
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Modal, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ModalHeader, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Flex, { $gap: "1rem", children: !isCheckoutComplete && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Flex, { $gap: "0.5rem", $alignItems: "center", children: [
+        checkoutStage === "plan" ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          Box,
           {
-            $flexDirection: "column",
-            $position: "relative",
-            $gap: "1rem",
-            $width: "100%",
-            $height: "auto",
-            $padding: "1.5rem",
-            $borderBottom: "1px solid #DEDEDE",
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Flex, { $flexDirection: "row", $justifyContent: "space-between", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text, { $size: 20, $weight: 600, children: "Subscription" }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
-                Flex,
-                {
-                  $flexDirection: "row",
-                  $border: "1px solid #D9D9D9",
-                  $borderRadius: "40px",
-                  $fontSize: "12px",
-                  $textAlign: "center",
-                  $cursor: "pointer",
-                  children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                      Box,
-                      {
-                        onClick: () => setPricePeriod("month"),
-                        $padding: ".25rem .5rem",
-                        $flex: "1",
-                        $fontWeight: pricePeriod === "month" ? "600" : "400",
-                        $backgroundColor: pricePeriod === "month" ? "#DDDDDD" : "white",
-                        $borderRadius: "40px",
-                        children: "Billed monthly"
-                      }
-                    ),
-                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                      Box,
-                      {
-                        onClick: () => setPricePeriod("year"),
-                        $padding: ".25rem .5rem",
-                        $flex: "1",
-                        $fontWeight: pricePeriod === "year" ? "600" : "400",
-                        $backgroundColor: pricePeriod === "year" ? "#DDDDDD" : "white",
-                        $borderRadius: "40px",
-                        children: "Billed yearly"
-                      }
-                    )
-                  ]
-                }
-              ),
-              savingsPercentage > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Box, { $fontSize: "11px", $color: "#194BFB", children: [
-                "Save up to ",
-                savingsPercentage,
-                "% with yearly billing"
-              ] })
-            ]
+            $width: "0.9375rem",
+            $height: "0.9375rem",
+            $borderWidth: "2px",
+            $borderStyle: "solid",
+            $borderColor: hexToHSL(theme.card.background).l > 50 ? darken(theme.card.background, 12.5) : lighten(theme.card.background, 12.5),
+            $borderRadius: "9999px"
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          IconRound,
+          {
+            name: "check",
+            style: {
+              color: theme.card.background,
+              backgroundColor: hexToHSL(theme.card.background).l > 50 ? darken(theme.card.background, 12.5) : lighten(theme.card.background, 12.5),
+              fontSize: 16,
+              width: "1rem",
+              height: "1rem"
+            }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
-          Flex,
-          {
-            $flexDirection: "column",
-            $position: "relative",
-            $gap: "1rem",
-            $width: "100%",
-            $height: "auto",
-            $padding: "1.5rem",
-            $flex: "1",
-            $borderBottom: "1px solid #DEDEDE",
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Box, { $fontSize: "14px", $color: "#5D5D5D", children: "Plan" }),
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
-                Flex,
-                {
-                  $flexDirection: "column",
-                  $fontSize: "14px",
-                  $color: "#5D5D5D",
-                  $gap: ".5rem",
-                  children: [
-                    currentPlan && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
-                      Flex,
-                      {
-                        $flexDirection: "row",
-                        $alignItems: "center",
-                        $justifyContent: "space-between",
-                        $fontSize: "14px",
-                        $color: "#5D5D5D",
-                        children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Flex, { $fontSize: "14px", $color: "#5D5D5D", children: currentPlan.name }),
-                          typeof currentPlan.planPrice === "number" && currentPlan.planPeriod && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Flex, { $fontSize: "12px", $color: "#000000", children: [
-                            formatCurrency(currentPlan.planPrice),
-                            "/",
-                            currentPlan.planPeriod
-                          ] })
-                        ]
-                      }
-                    ),
-                    selectedPlan && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                        Box,
-                        {
-                          $width: "100%",
-                          $textAlign: "left",
-                          $opacity: "50%",
-                          $marginBottom: "-.25rem",
-                          $marginTop: "-.25rem",
-                          children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                            Icon2,
-                            {
-                              name: "arrow-down",
-                              style: {
-                                display: "inline-block"
-                              }
-                            }
-                          )
-                        }
-                      ),
-                      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
-                        Flex,
-                        {
-                          $flexDirection: "row",
-                          $alignItems: "center",
-                          $justifyContent: "space-between",
-                          $fontSize: "14px",
-                          $color: "#5D5D5D",
-                          children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Flex, { $fontSize: "14px", $color: "#000000", $fontWeight: "600", children: selectedPlan.name }),
-                            /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Flex, { $fontSize: "12px", $color: "#000000", children: [
-                              formatCurrency(
-                                (pricePeriod === "month" ? selectedPlan.monthlyPrice : selectedPlan.yearlyPrice)?.price ?? 0
-                              ),
-                              "/",
-                              pricePeriod
-                            ] })
-                          ]
-                        }
-                      )
-                    ] })
-                  ]
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
-          Flex,
-          {
-            $flexDirection: "column",
-            $position: "relative",
-            $gap: ".75rem",
-            $width: "100%",
-            $height: "auto",
-            $padding: "1.5rem",
-            children: [
-              selectedPlan && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
-                Flex,
-                {
-                  $fontSize: "12px",
-                  $color: "#5D5D5D",
-                  $justifyContent: "space-between",
-                  children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Box, { $fontSize: "12px", $color: "#5D5D5D", children: [
-                      "Monthly total:",
-                      " "
-                    ] }),
-                    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Box, { $fontSize: "12px", $color: "#000000", children: [
-                      formatCurrency(
-                        (pricePeriod === "month" ? selectedPlan.monthlyPrice : selectedPlan.yearlyPrice)?.price ?? 0
-                      ),
-                      "/",
-                      pricePeriod
-                    ] })
-                  ]
-                }
-              ),
-              checkoutStage === "plan" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                StyledButton,
-                {
-                  $size: "sm",
-                  onClick: () => {
-                    setCheckoutStage("checkout");
-                  },
-                  ...!selectedPlan && { disabled: true },
-                  children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Flex, { $gap: "0.5rem", $alignItems: "center", $justifyContent: "center", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: "Next: Checkout" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon2, { name: "arrow-right" })
-                  ] })
-                }
-              ) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                StyledButton,
-                {
-                  disabled: !api || !selectedPlan || selectedPlan?.id === currentPlan?.id || !paymentMethodId,
-                  onClick: async () => {
-                    const priceId = (pricePeriod === "month" ? selectedPlan?.monthlyPrice : selectedPlan?.yearlyPrice)?.id;
-                    if (!api || !selectedPlan || !priceId || !paymentMethodId) {
-                      return;
-                    }
-                    await api.checkout({
-                      changeSubscriptionRequestBody: {
-                        newPlanId: selectedPlan.id,
-                        newPriceId: priceId,
-                        paymentMethodId
-                      }
-                    });
-                  },
-                  $size: "md",
-                  children: "Pay now"
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Box, { $fontSize: "12px", $color: "#5D5D5D", children: "Discounts & credits applied at checkout" })
-            ]
-          }
-        )
-      ]
-    }
-  );
-};
-var CheckoutDialog = () => {
-  const [checkoutStage, setCheckoutStage] = (0, import_react7.useState)(
-    "plan"
-  );
-  const [planPeriod, setPlanPeriod] = (0, import_react7.useState)("month");
-  const [selectedPlan, setSelectedPlan] = (0, import_react7.useState)();
-  const [paymentMethodId, setPaymentMethodId] = (0, import_react7.useState)();
-  const { data } = useEmbed();
-  const { currentPlan, availablePlans } = (0, import_react7.useMemo)(() => {
-    return {
-      currentPlan: data.company?.plan,
-      availablePlans: data.activePlans
-    };
-  }, [data.company, data.activePlans]);
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(OverlayWrapper, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(OverlayHeader, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Flex, { $gap: "1rem", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Flex, { $flexDirection: "row", $gap: "0.5rem", $alignItems: "center", children: [
-        checkoutStage === "plan" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-          Box,
-          {
-            $width: "15px",
-            $height: "15px",
-            $backgroundColor: "white",
-            $border: "2px solid #DDDDDD",
-            $borderRadius: "999px"
-          }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-          IconRound,
-          {
-            name: "check",
-            style: {
-              color: "#FFFFFF",
-              backgroundColor: "#DDDDDD",
-              fontSize: 16,
-              width: "1rem",
-              height: "1rem"
-            }
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-          "div",
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          Box,
           {
             tabIndex: 0,
             ...checkoutStage === "plan" ? {
@@ -10176,30 +9966,34 @@ var CheckoutDialog = () => {
               },
               onClick: () => setCheckoutStage("plan")
             },
-            children: "1. Select plan"
+            children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text, { children: "1. Select plan" })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           Icon2,
           {
             name: "chevron-right",
-            style: { fontSize: 16, color: "#D0D0D0" }
+            style: {
+              fontSize: 16,
+              color: hexToHSL(theme.card.background).l > 50 ? darken(theme.card.background, 17.5) : lighten(theme.card.background, 17.5)
+            }
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Flex, { $flexDirection: "row", $gap: "0.5rem", $alignItems: "center", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Flex, { $gap: "0.5rem", $alignItems: "center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           Box,
           {
-            $width: "15px",
-            $height: "15px",
-            $border: "2px solid #DDDDDD",
-            $borderRadius: "999px",
-            $backgroundColor: "white"
+            $width: "0.9375rem",
+            $height: "0.9375rem",
+            $borderWidth: "2px",
+            $borderStyle: "solid",
+            $borderColor: hexToHSL(theme.card.background).l > 50 ? darken(theme.card.background, 12.5) : lighten(theme.card.background, 12.5),
+            $borderRadius: "9999px"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-          "div",
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          Box,
           {
             tabIndex: 0,
             ...checkoutStage === "checkout" && {
@@ -10207,36 +10001,51 @@ var CheckoutDialog = () => {
                 fontWeight: "700"
               }
             },
-            children: "2. Checkout"
+            children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text, { children: "2. Checkout" })
           }
         )
       ] })
-    ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Flex, { $flexDirection: "row", $height: "100%", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    ] }) }) }),
+    isCheckoutComplete && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Flex, { $justifyContent: "center", $alignItems: "center", $flexGrow: "1", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      Text,
+      {
+        as: "h1",
+        $font: theme.typography.heading1.fontFamily,
+        $size: theme.typography.heading1.fontSize,
+        $weight: theme.typography.heading1.fontWeight,
+        $color: theme.typography.heading1.color,
+        children: "Subscription updated!"
+      }
+    ) }),
+    !isCheckoutComplete && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Flex, { $position: "relative", $flexGrow: "1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
         Flex,
         {
+          $position: "absolute",
+          $top: "0",
+          $left: "0",
           $flexDirection: "column",
           $gap: "1rem",
           $padding: "2rem 2.5rem 2rem 2.5rem",
-          $backgroundColor: "#FBFBFB",
-          $borderRadius: "0 0.5rem 0",
+          $backgroundColor: darken(settings.theme.card.background, 2.5),
           $flex: "1",
+          $width: "72.5%",
           $height: "100%",
+          $overflow: "auto",
           children: [
-            checkoutStage === "plan" && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Flex, { $flexDirection: "column", $gap: "1rem", $marginBottom: "1rem", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            checkoutStage === "plan" && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Flex, { $flexDirection: "column", $gap: "1rem", $marginBottom: "1rem", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                   Text,
                   {
                     as: "h1",
                     id: "select-plan-dialog-label",
                     $size: 18,
-                    $marginBottom: ".5rem",
+                    $marginBottom: "0.5rem",
                     children: "Select plan"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                   Text,
                   {
                     as: "p",
@@ -10247,19 +10056,23 @@ var CheckoutDialog = () => {
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Flex, { $flexDirection: "row", $gap: "1rem", $flex: "1", $height: "100%", children: availablePlans?.map((plan) => {
-                return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Flex, { $gap: "1rem", $flexGrow: "1", children: availablePlans?.map((plan) => {
+                return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
                   Flex,
                   {
                     $height: "100%",
                     $flexDirection: "column",
-                    $backgroundColor: "white",
+                    $backgroundColor: settings.theme.card.background,
                     $flex: "1",
-                    $border: `2px solid ${plan.id === selectedPlan?.id ? "#194BFB" : "transparent"}`,
-                    $borderRadius: ".5rem",
-                    $boxShadow: "0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 20px rgba(16, 24, 40, 0.06)",
+                    $outlineWidth: "2px",
+                    $outlineStyle: "solid",
+                    $outlineColor: plan.id === selectedPlan?.id ? theme.primary : "transparent",
+                    $borderRadius: `${settings.theme.card.borderRadius / 16}rem`,
+                    ...settings.theme.card.hasShadow && {
+                      $boxShadow: "0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 20px rgba(16, 24, 40, 0.06)"
+                    },
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+                      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
                         Flex,
                         {
                           $flexDirection: "column",
@@ -10267,38 +10080,40 @@ var CheckoutDialog = () => {
                           $gap: "1rem",
                           $width: "100%",
                           $height: "auto",
-                          $padding: "2rem 1.5rem 1.5rem",
-                          $borderBottom: "1px solid #DEDEDE",
+                          $padding: `${settings.theme.card.padding / 16}rem`,
+                          $borderBottomWidth: "1px",
+                          $borderStyle: "solid",
+                          $borderColor: hexToHSL(theme.card.background).l > 50 ? darken(theme.card.background, 17.5) : lighten(theme.card.background, 17.5),
                           children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text, { $size: 20, $weight: 600, children: plan.name }),
-                            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text, { $size: 14, children: plan.description }),
-                            /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Text, { children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Box, { $display: "inline-block", $fontSize: "1.5rem", children: formatCurrency(
+                            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text, { $size: 20, $weight: 600, children: plan.name }),
+                            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text, { $size: 14, children: plan.description }),
+                            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Text, { children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Box, { $display: "inline-block", $fontSize: "1.5rem", children: formatCurrency(
                                 (planPeriod === "month" ? plan.monthlyPrice : plan.yearlyPrice)?.price ?? 0
                               ) }),
-                              /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Box, { $display: "inline-block", $fontSize: ".75rem", children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Box, { $display: "inline-block", $fontSize: "0.75rem", children: [
                                 "/",
                                 planPeriod
                               ] })
                             ] }),
-                            (plan.current || plan.id === currentPlan?.id) && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                            (plan.current || plan.id === currentPlan?.id) && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                               Flex,
                               {
                                 $position: "absolute",
                                 $right: "1rem",
                                 $top: "1rem",
-                                $fontSize: ".625rem",
-                                $color: "white",
-                                $backgroundColor: "#194BFB",
-                                $borderRadius: "999px",
-                                $padding: ".125rem .85rem",
+                                $fontSize: "0.625rem",
+                                $color: hexToHSL(theme.primary).l > 50 ? "#000000" : "#FFFFFF",
+                                $backgroundColor: theme.primary,
+                                $borderRadius: "9999px",
+                                $padding: "0.125rem 0.85rem",
                                 children: "Current plan"
                               }
                             )
                           ]
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                         Flex,
                         {
                           $flexDirection: "column",
@@ -10309,21 +10124,32 @@ var CheckoutDialog = () => {
                           $height: "auto",
                           $padding: "1.5rem",
                           children: plan.features.map((feature) => {
-                            return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Flex, { $flexShrink: "0", $gap: "1rem", children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                                IconRound,
-                                {
-                                  name: feature.icon,
-                                  size: "tn",
-                                  colors: ["#000000", "#F5F5F5"]
-                                }
-                              ),
-                              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Flex, { $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text, { $size: ".75rem", $color: "#00000", children: feature.name }) })
-                            ] }, feature.id);
+                            return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+                              Flex,
+                              {
+                                $flexShrink: "0",
+                                $gap: "1rem",
+                                children: [
+                                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                                    IconRound,
+                                    {
+                                      name: feature.icon,
+                                      size: "tn",
+                                      colors: [
+                                        settings.theme.primary,
+                                        `${hexToHSL(settings.theme.card.background).l > 50 ? darken(settings.theme.card.background, 10) : lighten(settings.theme.card.background, 20)}`
+                                      ]
+                                    }
+                                  ),
+                                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Flex, { $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text, { $size: 12, children: feature.name }) })
+                                ]
+                              },
+                              feature.id
+                            );
                           })
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+                      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
                         Flex,
                         {
                           $flexDirection: "column",
@@ -10333,7 +10159,7 @@ var CheckoutDialog = () => {
                           $height: "auto",
                           $padding: "1.5rem",
                           children: [
-                            plan.id === selectedPlan?.id && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+                            plan.id === selectedPlan?.id && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
                               Flex,
                               {
                                 $justifyContent: "center",
@@ -10342,22 +10168,22 @@ var CheckoutDialog = () => {
                                 $fontSize: "0.9375rem",
                                 $padding: "0.625rem 0",
                                 children: [
-                                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                                     Icon2,
                                     {
                                       name: "check-rounded",
                                       style: {
                                         fontSize: 20,
                                         lineHeight: "1",
-                                        color: "#194BFB"
+                                        color: theme.primary
                                       }
                                     }
                                   ),
-                                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                                    "span",
+                                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                                    Text,
                                     {
                                       style: {
-                                        color: "#7B7B7B",
+                                        color: hexToHSL(theme.card.background).l > 50 ? "#000000" : "#FFFFFF",
                                         lineHeight: "1.4"
                                       },
                                       children: "Selected"
@@ -10366,9 +10192,10 @@ var CheckoutDialog = () => {
                                 ]
                               }
                             ),
-                            !(plan.current || plan.id === currentPlan?.id) && plan.id !== selectedPlan?.id && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                            !(plan.current || plan.id === currentPlan?.id) && plan.id !== selectedPlan?.id && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                               StyledButton,
                               {
+                                disabled: plan.valid === false,
                                 $size: "sm",
                                 $color: "primary",
                                 $variant: "outline",
@@ -10387,7 +10214,7 @@ var CheckoutDialog = () => {
                 );
               }) })
             ] }),
-            selectedPlan && checkoutStage === "checkout" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            selectedPlan && checkoutStage === "checkout" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
               PaymentForm,
               {
                 plan: selectedPlan,
@@ -10400,16 +10227,253 @@ var CheckoutDialog = () => {
           ]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-        OverlaySideBar,
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+        Flex,
         {
-          pricePeriod: planPeriod,
-          setPricePeriod: setPlanPeriod,
-          checkoutStage,
-          setCheckoutStage,
-          currentPlan,
-          selectedPlan,
-          paymentMethodId
+          $position: "absolute",
+          $top: "0",
+          $right: "0",
+          $flexDirection: "column",
+          $background: settings.theme.card.background,
+          $borderRadius: "0 0 0.5rem",
+          $width: "27.5%",
+          $height: "100%",
+          $boxShadow: "0px 1px 20px 0px #1018280F, 0px 1px 3px 0px #1018281A;",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+              Flex,
+              {
+                $flexDirection: "column",
+                $position: "relative",
+                $gap: "1rem",
+                $width: "100%",
+                $height: "auto",
+                $padding: "1.5rem",
+                $borderBottom: "1px solid #DEDEDE",
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Flex, { $justifyContent: "space-between", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text, { $size: 20, $weight: 600, children: "Subscription" }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+                    Flex,
+                    {
+                      $border: "1px solid #D9D9D9",
+                      $borderRadius: "2.5rem",
+                      $cursor: "pointer",
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                          Flex,
+                          {
+                            onClick: () => setPlanPeriod("month"),
+                            $justifyContent: "center",
+                            $alignItems: "center",
+                            $padding: "0.25rem 0.5rem",
+                            $flex: "1",
+                            $backgroundColor: planPeriod === "month" ? darken(settings.theme.card.background, 8) : lighten(settings.theme.card.background, 2),
+                            $borderRadius: "2.5rem",
+                            children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text, { $size: 12, $weight: planPeriod === "month" ? 600 : 400, children: "Billed monthly" })
+                          }
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                          Flex,
+                          {
+                            onClick: () => setPlanPeriod("year"),
+                            $justifyContent: "center",
+                            $alignItems: "center",
+                            $padding: "0.25rem 0.5rem",
+                            $flex: "1",
+                            $backgroundColor: planPeriod === "year" ? darken(settings.theme.card.background, 8) : lighten(settings.theme.card.background, 2),
+                            $borderRadius: "2.5rem",
+                            children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text, { $size: 12, $weight: planPeriod === "year" ? 600 : 400, children: "Billed yearly" })
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  savingsPercentage > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text, { $size: 11, $color: "#194BFB", children: planPeriod === "month" ? `Save up to ${savingsPercentage}% with yearly billing` : `You are saving ${savingsPercentage}% with yearly billing` }) })
+                ]
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+              Flex,
+              {
+                $flexDirection: "column",
+                $position: "relative",
+                $gap: "1rem",
+                $width: "100%",
+                $height: "auto",
+                $padding: "1.5rem",
+                $flex: "1",
+                $borderBottom: "1px solid #DEDEDE",
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text, { $size: 14, $color: "#5D5D5D", children: "Plan" }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+                    Flex,
+                    {
+                      $flexDirection: "column",
+                      $fontSize: "0.875rem",
+                      $color: "#5D5D5D",
+                      $gap: "0.5rem",
+                      children: [
+                        currentPlan && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+                          Flex,
+                          {
+                            $alignItems: "center",
+                            $justifyContent: "space-between",
+                            $fontSize: "0.875rem",
+                            $color: "#5D5D5D",
+                            children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Flex, { $fontSize: "0.875rem", $color: "#5D5D5D", children: currentPlan.name }),
+                              typeof currentPlan.planPrice === "number" && currentPlan.planPeriod && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Flex, { $fontSize: "0.75rem", $color: "#000000", children: [
+                                formatCurrency(currentPlan.planPrice),
+                                "/",
+                                currentPlan.planPeriod
+                              ] })
+                            ]
+                          }
+                        ),
+                        selectedPlan && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                            Box,
+                            {
+                              $width: "100%",
+                              $textAlign: "left",
+                              $opacity: "50%",
+                              $marginBottom: "-0.25rem",
+                              $marginTop: "-0.25rem",
+                              children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                                Icon2,
+                                {
+                                  name: "arrow-down",
+                                  style: {
+                                    display: "inline-block"
+                                  }
+                                }
+                              )
+                            }
+                          ),
+                          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+                            Flex,
+                            {
+                              $alignItems: "center",
+                              $justifyContent: "space-between",
+                              $fontSize: "0.875rem",
+                              $color: "#5D5D5D",
+                              children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                                  Flex,
+                                  {
+                                    $fontSize: "0.875rem",
+                                    $color: "#000000",
+                                    $fontWeight: "600",
+                                    children: selectedPlan.name
+                                  }
+                                ),
+                                /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Flex, { $fontSize: "0.75rem", $color: "#000000", children: [
+                                  formatCurrency(
+                                    (planPeriod === "month" ? selectedPlan.monthlyPrice : selectedPlan.yearlyPrice)?.price ?? 0
+                                  ),
+                                  "/",
+                                  planPeriod
+                                ] })
+                              ]
+                            }
+                          )
+                        ] })
+                      ]
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+              Flex,
+              {
+                $flexDirection: "column",
+                $position: "relative",
+                $gap: "0.75rem",
+                $width: "100%",
+                $height: "auto",
+                $padding: "1.5rem",
+                children: [
+                  selectedPlan && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+                    Flex,
+                    {
+                      $fontSize: "0.75rem",
+                      $color: "#5D5D5D",
+                      $justifyContent: "space-between",
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Box, { $fontSize: "0.75rem", $color: "#5D5D5D", children: [
+                          planPeriod === "month" ? "Monthly" : "Yearly",
+                          " total:",
+                          " "
+                        ] }),
+                        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Box, { $fontSize: "0.75rem", $color: "#000000", children: [
+                          formatCurrency(
+                            (planPeriod === "month" ? selectedPlan.monthlyPrice : selectedPlan.yearlyPrice)?.price ?? 0
+                          ),
+                          "/",
+                          planPeriod
+                        ] })
+                      ]
+                    }
+                  ),
+                  checkoutStage === "plan" ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                    StyledButton,
+                    {
+                      disabled: !selectedPlan,
+                      onClick: () => {
+                        setCheckoutStage("checkout");
+                      },
+                      $size: "sm",
+                      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+                        Flex,
+                        {
+                          $gap: "0.5rem",
+                          $alignItems: "center",
+                          $justifyContent: "center",
+                          $padding: "0 1rem",
+                          children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text, { $align: "left", children: "Next: Checkout" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Icon2, { name: "arrow-right" })
+                          ]
+                        }
+                      )
+                    }
+                  ) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                    StyledButton,
+                    {
+                      disabled: !api || !selectedPlan || selectedPlan?.id === currentPlan?.id || !paymentMethodId || isLoading,
+                      onClick: async () => {
+                        const priceId = (planPeriod === "month" ? selectedPlan?.monthlyPrice : selectedPlan?.yearlyPrice)?.id;
+                        if (!api || !selectedPlan || !priceId || !paymentMethodId) {
+                          return;
+                        }
+                        try {
+                          setIsLoading(true);
+                          setIsCheckoutComplete(false);
+                          await api.checkout({
+                            changeSubscriptionRequestBody: {
+                              newPlanId: selectedPlan.id,
+                              newPriceId: priceId,
+                              paymentMethodId
+                            }
+                          });
+                          setIsCheckoutComplete(true);
+                        } catch (error) {
+                          console.error(error);
+                        } finally {
+                          setIsCheckoutComplete(true);
+                          setIsLoading(false);
+                        }
+                      },
+                      $size: "md",
+                      children: "Pay now"
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Box, { $fontSize: "0.75rem", $color: "#5D5D5D", children: "Discounts & credits applied at checkout" })
+                ]
+              }
+            )
+          ]
         }
       )
     ] })
@@ -10417,7 +10481,7 @@ var CheckoutDialog = () => {
 };
 
 // src/components/elements/plan-manager/PlanManager.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var resolveDesignProps = (props) => {
   return {
     header: {
@@ -10446,23 +10510,23 @@ var resolveDesignProps = (props) => {
     }
   };
 };
-var PlanManager = (0, import_react8.forwardRef)(({ children, className, portal, ...rest }, ref) => {
+var PlanManager = (0, import_react10.forwardRef)(({ children, className, portal, ...rest }, ref) => {
   const props = resolveDesignProps(rest);
   const { data, settings, layout, stripe, setLayout } = useEmbed();
-  const { currentPlan, canChangePlan } = (0, import_react8.useMemo)(() => {
+  const { currentPlan, canChangePlan } = (0, import_react10.useMemo)(() => {
     return {
       currentPlan: data.company?.plan,
       canChangePlan: stripe !== null
     };
   }, [data.company, stripe]);
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { ref, className, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { ref, className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       Flex,
       {
         $flexDirection: "column",
         $gap: "0.75rem",
         ...canChangePlan && { $margin: "0 0 0.5rem" },
-        children: props.header.isVisible && currentPlan && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+        children: props.header.isVisible && currentPlan && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
           Flex,
           {
             $justifyContent: "space-between",
@@ -10470,8 +10534,8 @@ var PlanManager = (0, import_react8.forwardRef)(({ children, className, portal,
             $width: "100%",
             ...canChangePlan && { $margin: "0 0 1.5rem" },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Box, { $margin: "0 0 0.75rem", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Box, { $margin: "0 0 0.75rem", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                   Text,
                   {
                     $font: settings.theme.typography[props.header.title.fontStyle].fontFamily,
@@ -10482,7 +10546,7 @@ var PlanManager = (0, import_react8.forwardRef)(({ children, className, portal,
                     children: currentPlan.name
                   }
                 ) }),
-                props.header.description.isVisible && currentPlan.description && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                props.header.description.isVisible && currentPlan.description && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                   Text,
                   {
                     $font: settings.theme.typography[props.header.description.fontStyle].fontFamily,
@@ -10493,7 +10557,7 @@ var PlanManager = (0, import_react8.forwardRef)(({ children, className, portal,
                   }
                 )
               ] }),
-              props.header.price.isVisible && typeof currentPlan.planPrice === "number" && currentPlan.planPeriod && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+              props.header.price.isVisible && typeof currentPlan.planPrice === "number" && currentPlan.planPeriod && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
                 Text,
                 {
                   $font: settings.theme.typography[props.header.price.fontStyle].fontFamily,
@@ -10512,7 +10576,7 @@ var PlanManager = (0, import_react8.forwardRef)(({ children, className, portal,
         )
       }
     ),
-    canChangePlan && props.callToAction.isVisible && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    canChangePlan && props.callToAction.isVisible && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       StyledButton,
       {
         onClick: () => {
@@ -10520,7 +10584,7 @@ var PlanManager = (0, import_react8.forwardRef)(({ children, className, portal,
         },
         $size: props.callToAction.buttonSize,
         $color: props.callToAction.buttonStyle,
-        children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
           Text,
           {
             $font: settings.theme.typography.text.fontFamily,
@@ -10531,13 +10595,13 @@ var PlanManager = (0, import_react8.forwardRef)(({ children, className, portal,
         )
       }
     ),
-    canChangePlan && layout === "checkout" && (0, import_react_dom.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CheckoutDialog, {}), portal || document.body)
+    canChangePlan && layout === "checkout" && (0, import_react_dom.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(CheckoutDialog, {}), portal || document.body)
   ] });
 });
 
 // src/components/elements/included-features/IncludedFeatures.tsx
-var import_react9 = require("react");
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_react11 = require("react");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 function resolveDesignProps2(props) {
   return {
     header: {
@@ -10560,10 +10624,10 @@ function resolveDesignProps2(props) {
     }
   };
 }
-var IncludedFeatures = (0, import_react9.forwardRef)(({ className, ...rest }, ref) => {
+var IncludedFeatures = (0, import_react11.forwardRef)(({ className, ...rest }, ref) => {
   const props = resolveDesignProps2(rest);
   const { data, settings } = useEmbed();
-  const features = (0, import_react9.useMemo)(() => {
+  const features = (0, import_react11.useMemo)(() => {
     return (data.featureUsage?.features || []).map(
       ({
         access,
@@ -10590,8 +10654,8 @@ var IncludedFeatures = (0, import_react9.forwardRef)(({ className, ...rest }, re
       }
     );
   }, [data.featureUsage]);
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Flex, { ref, className, $flexDirection: "column", $gap: "1.5rem", children: [
-    props.header.isVisible && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Flex, { ref, className, $flexDirection: "column", $gap: "1.5rem", children: [
+    props.header.isVisible && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       Text,
       {
         $font: settings.theme.typography[props.header.fontStyle].fontFamily,
@@ -10608,7 +10672,7 @@ var IncludedFeatures = (0, import_react9.forwardRef)(({ className, ...rest }, re
         }
         return [
           ...acc,
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
             Flex,
             {
               $flexWrap: "wrap",
@@ -10616,8 +10680,8 @@ var IncludedFeatures = (0, import_react9.forwardRef)(({ className, ...rest }, re
               $alignItems: "center",
               $gap: "1rem",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Flex, { $gap: "1rem", children: [
-                  props.icons.isVisible && feature?.icon && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Flex, { $gap: "1rem", children: [
+                  props.icons.isVisible && feature?.icon && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                     IconRound,
                     {
                       name: feature.icon,
@@ -10628,7 +10692,7 @@ var IncludedFeatures = (0, import_react9.forwardRef)(({ className, ...rest }, re
                       ]
                     }
                   ),
-                  feature?.name && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Flex, { $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                  feature?.name && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Flex, { $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                     Text,
                     {
                       $font: settings.theme.typography[props.icons.fontStyle].fontFamily,
@@ -10639,8 +10703,8 @@ var IncludedFeatures = (0, import_react9.forwardRef)(({ className, ...rest }, re
                     }
                   ) })
                 ] }),
-                allocationType === "numeric" && feature?.name && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Box, { $textAlign: "right", children: [
-                  props.entitlement.isVisible && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                allocationType === "numeric" && feature?.name && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Box, { $textAlign: "right", children: [
+                  props.entitlement.isVisible && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                     Text,
                     {
                       as: Box,
@@ -10651,7 +10715,7 @@ var IncludedFeatures = (0, import_react9.forwardRef)(({ className, ...rest }, re
                       children: typeof allocation === "number" ? `${allocation} ${feature.name}` : `Unlimited ${feature.name}`
                     }
                   ),
-                  props.usage.isVisible && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                  props.usage.isVisible && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                     Text,
                     {
                       as: Box,
@@ -10675,8 +10739,8 @@ var IncludedFeatures = (0, import_react9.forwardRef)(({ className, ...rest }, re
 });
 
 // src/components/elements/metered-features/MeteredFeatures.tsx
-var import_react10 = require("react");
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_react12 = require("react");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 function resolveDesignProps3(props) {
   return {
     isVisible: props.isVisible ?? true,
@@ -10705,10 +10769,10 @@ function resolveDesignProps3(props) {
     }
   };
 }
-var MeteredFeatures = (0, import_react10.forwardRef)(({ className, ...rest }, ref) => {
+var MeteredFeatures = (0, import_react12.forwardRef)(({ className, ...rest }, ref) => {
   const props = resolveDesignProps3(rest);
   const { data, settings } = useEmbed();
-  const features = (0, import_react10.useMemo)(() => {
+  const features = (0, import_react12.useMemo)(() => {
     return (data.featureUsage?.features || []).map(
       ({
         access,
@@ -10735,19 +10799,19 @@ var MeteredFeatures = (0, import_react10.forwardRef)(({ className, ...rest }, re
       }
     );
   }, [data.featureUsage]);
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Flex, { ref, className, $flexDirection: "column", $gap: "1.5rem", children: features.reduce(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Flex, { ref, className, $flexDirection: "column", $gap: "1.5rem", children: features.reduce(
     (acc, { allocation, allocationType, feature, usage }, index) => {
       if (!props.isVisible || allocationType !== "numeric" || typeof allocation !== "number") {
         return acc;
       }
       return [
         ...acc,
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Flex, { $gap: "1.5rem", children: [
-          props.icon.isVisible && feature?.icon && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Box, { $flexShrink: "0", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(IconRound, { name: feature.icon, size: "sm" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Box, { $flexGrow: "1", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Flex, { children: [
-              feature?.name && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Box, { $flexGrow: "1", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Flex, { $gap: "1.5rem", children: [
+          props.icon.isVisible && feature?.icon && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Box, { $flexShrink: "0", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(IconRound, { name: feature.icon, size: "sm" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Box, { $flexGrow: "1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Flex, { children: [
+              feature?.name && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Box, { $flexGrow: "1", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                   Text,
                   {
                     as: Box,
@@ -10758,7 +10822,7 @@ var MeteredFeatures = (0, import_react10.forwardRef)(({ className, ...rest }, re
                     children: feature.name
                   }
                 ),
-                props.description.isVisible && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                props.description.isVisible && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                   Text,
                   {
                     as: Box,
@@ -10770,8 +10834,8 @@ var MeteredFeatures = (0, import_react10.forwardRef)(({ className, ...rest }, re
                   }
                 )
               ] }),
-              allocationType === "numeric" && feature?.name && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Box, { $textAlign: "right", children: [
-                props.allocation.isVisible && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              allocationType === "numeric" && feature?.name && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Box, { $textAlign: "right", children: [
+                props.allocation.isVisible && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                   Text,
                   {
                     as: Box,
@@ -10782,7 +10846,7 @@ var MeteredFeatures = (0, import_react10.forwardRef)(({ className, ...rest }, re
                     children: typeof allocation === "number" ? `${allocation} ${feature.name}` : `Unlimited ${feature.name}`
                   }
                 ),
-                props.usage.isVisible && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                props.usage.isVisible && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                   Text,
                   {
                     as: Box,
@@ -10795,7 +10859,7 @@ var MeteredFeatures = (0, import_react10.forwardRef)(({ className, ...rest }, re
                 )
               ] })
             ] }),
-            typeof usage === "number" && typeof allocation === "number" && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            typeof usage === "number" && typeof allocation === "number" && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
               ProgressBar,
               {
                 progress: usage / allocation * 100,
@@ -10813,8 +10877,8 @@ var MeteredFeatures = (0, import_react10.forwardRef)(({ className, ...rest }, re
 });
 
 // src/components/elements/upcoming-bill/UpcomingBill.tsx
-var import_react11 = require("react");
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_react13 = require("react");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 function resolveDesignProps4(props) {
   return {
     header: {
@@ -10833,10 +10897,10 @@ function resolveDesignProps4(props) {
     }
   };
 }
-var UpcomingBill = (0, import_react11.forwardRef)(({ className, ...rest }, ref) => {
+var UpcomingBill = (0, import_react13.forwardRef)(({ className, ...rest }, ref) => {
   const props = resolveDesignProps4(rest);
   const { data, settings, stripe } = useEmbed();
-  const { upcomingInvoice } = (0, import_react11.useMemo)(() => {
+  const { upcomingInvoice } = (0, import_react13.useMemo)(() => {
     return {
       upcomingInvoice: {
         ...data.upcomingInvoice?.amountDue && {
@@ -10854,14 +10918,14 @@ var UpcomingBill = (0, import_react11.forwardRef)(({ className, ...rest }, ref)
   if (!stripe || !data.upcomingInvoice) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { ref, className, children: [
-    props.header.isVisible && upcomingInvoice.dueDate && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { ref, className, children: [
+    props.header.isVisible && upcomingInvoice.dueDate && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       Flex,
       {
         $justifyContent: "space-between",
         $alignItems: "center",
         $margin: "0 0 0.75rem",
-        children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
           Text,
           {
             $font: settings.theme.typography[props.header.fontStyle].fontFamily,
@@ -10877,8 +10941,8 @@ var UpcomingBill = (0, import_react11.forwardRef)(({ className, ...rest }, ref)
         )
       }
     ),
-    upcomingInvoice.amountDue && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Flex, { $justifyContent: "space-between", $alignItems: "start", $gap: "1rem", children: [
-      props.price.isVisible && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Flex, { $alignItems: "end", $flexGrow: "1", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    upcomingInvoice.amountDue && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(Flex, { $justifyContent: "space-between", $alignItems: "start", $gap: "1rem", children: [
+      props.price.isVisible && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Flex, { $alignItems: "end", $flexGrow: "1", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
         Text,
         {
           $font: settings.theme.typography[props.price.fontStyle].fontFamily,
@@ -10889,7 +10953,7 @@ var UpcomingBill = (0, import_react11.forwardRef)(({ className, ...rest }, ref)
           children: formatCurrency(upcomingInvoice.amountDue)
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { $maxWidth: "10rem", $lineHeight: "1", $textAlign: "right", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Box, { $maxWidth: "10rem", $lineHeight: "1", $textAlign: "right", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
         Text,
         {
           $font: settings.theme.typography[props.contractEndDate.fontStyle].fontFamily,
@@ -10904,9 +10968,9 @@ var UpcomingBill = (0, import_react11.forwardRef)(({ className, ...rest }, ref)
 });
 
 // src/components/elements/payment-method/PaymentMethod.tsx
-var import_react12 = require("react");
+var import_react14 = require("react");
 var import_react_dom2 = require("react-dom");
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 var resolveDesignProps5 = (props) => {
   return {
     header: {
@@ -10918,10 +10982,10 @@ var resolveDesignProps5 = (props) => {
     }
   };
 };
-var PaymentMethod = (0, import_react12.forwardRef)(({ children, className, portal, ...rest }, ref) => {
+var PaymentMethod = (0, import_react14.forwardRef)(({ children, className, portal, ...rest }, ref) => {
   const props = resolveDesignProps5(rest);
   const { data, settings, stripe, layout } = useEmbed();
-  const paymentMethod = (0, import_react12.useMemo)(() => {
+  const paymentMethod = (0, import_react14.useMemo)(() => {
     const { cardLast4, cardExpMonth, cardExpYear } = data.subscription?.paymentMethod || {};
     let monthsToExpiration;
     if (typeof cardExpYear === "number" && typeof cardExpMonth === "number") {
@@ -10940,15 +11004,15 @@ var PaymentMethod = (0, import_react12.forwardRef)(({ children, className, porta
   if (!stripe || !data.subscription?.paymentMethod) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { ref, className, children: [
-    props.header.isVisible && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { ref, className, children: [
+    props.header.isVisible && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
       Flex,
       {
         $justifyContent: "space-between",
         $alignItems: "center",
         $margin: "0 0 1rem",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
             Text,
             {
               $font: settings.theme.typography[props.header.fontStyle].fontFamily,
@@ -10958,7 +11022,7 @@ var PaymentMethod = (0, import_react12.forwardRef)(({ children, className, porta
               children: "Payment Method"
             }
           ),
-          typeof paymentMethod.monthsToExpiration === "number" && Math.abs(paymentMethod.monthsToExpiration) < 4 && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          typeof paymentMethod.monthsToExpiration === "number" && Math.abs(paymentMethod.monthsToExpiration) < 4 && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
             Text,
             {
               $font: settings.theme.typography.text.fontFamily,
@@ -10970,7 +11034,7 @@ var PaymentMethod = (0, import_react12.forwardRef)(({ children, className, porta
         ]
       }
     ),
-    paymentMethod.cardLast4 && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    paymentMethod.cardLast4 && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       Flex,
       {
         $justifyContent: "space-between",
@@ -10979,16 +11043,16 @@ var PaymentMethod = (0, import_react12.forwardRef)(({ children, className, porta
         $background: `${hexToHSL(settings.theme.card.background).l > 50 ? darken(settings.theme.card.background, 10) : lighten(settings.theme.card.background, 20)}`,
         $padding: "0.375rem 1rem",
         $borderRadius: "9999px",
-        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Text, { $font: settings.theme.typography.text.fontFamily, $size: 14, children: [
+        children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Text, { $font: settings.theme.typography.text.fontFamily, $size: 14, children: [
           "\u{1F4B3} Card ending in ",
           paymentMethod.cardLast4
         ] })
       }
     ),
     layout === "payment" && (0, import_react_dom2.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(OverlayWrapper, { size: "md", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(OverlayHeader, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Box, { $fontWeight: "600", children: "Edit payment method" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Modal, { size: "md", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ModalHeader, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Box, { $fontWeight: "600", children: "Edit payment method" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
           Flex,
           {
             $flexDirection: "column",
@@ -10996,7 +11060,7 @@ var PaymentMethod = (0, import_react12.forwardRef)(({ children, className, porta
             $height: "100%",
             $gap: "1.5rem",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                 Flex,
                 {
                   $flexDirection: "column",
@@ -11005,8 +11069,8 @@ var PaymentMethod = (0, import_react12.forwardRef)(({ children, className, porta
                   $borderRadius: "0 0 0.5rem 0.5rem",
                   $flex: "1",
                   $height: "100%",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Flex, { $flexDirection: "column", $height: "100%", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Flex, { $flexDirection: "column", $height: "100%", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                       Box,
                       {
                         $fontSize: "18px",
@@ -11016,8 +11080,8 @@ var PaymentMethod = (0, import_react12.forwardRef)(({ children, className, porta
                         children: "Default"
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Flex, { $gap: "1rem", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Flex, { $gap: "1rem", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                         Flex,
                         {
                           $alignItems: "center",
@@ -11025,65 +11089,48 @@ var PaymentMethod = (0, import_react12.forwardRef)(({ children, className, porta
                           $border: "1px solid #E2E5E9",
                           $borderRadius: ".5rem",
                           $backgroundColor: "#ffffff",
-                          $flexDirection: "row",
                           $gap: "1rem",
                           $width: "100%",
-                          children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
-                            Flex,
-                            {
-                              $flexDirection: "row",
-                              $justifyContent: "space-between",
-                              $flex: "1",
-                              children: [
-                                /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
-                                  Flex,
-                                  {
-                                    $flexDirection: "row",
-                                    $alignItems: "center",
-                                    $gap: "1rem",
-                                    children: [
-                                      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Box, { $display: "inline-block", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-                                        "svg",
-                                        {
-                                          viewBox: "0 0 24 16",
-                                          fill: "none",
-                                          xmlns: "http://www.w3.org/2000/svg",
-                                          width: "26px",
-                                          height: "auto",
-                                          children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("g", { children: [
-                                            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-                                              "rect",
-                                              {
-                                                stroke: "#DDD",
-                                                fill: "#FFF",
-                                                x: ".25",
-                                                y: ".25",
-                                                width: "23",
-                                                height: "15.5",
-                                                rx: "2"
-                                              }
-                                            ),
-                                            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-                                              "path",
-                                              {
-                                                d: "M2.788 5.914A7.201 7.201 0 0 0 1 5.237l.028-.125h2.737c.371.013.672.125.77.519l.595 2.836.182.854 1.666-4.21h1.799l-2.674 6.167H4.304L2.788 5.914Zm7.312 5.37H8.399l1.064-6.172h1.7L10.1 11.284Zm6.167-6.021-.232 1.333-.153-.066a3.054 3.054 0 0 0-1.268-.236c-.671 0-.972.269-.98.531 0 .29.365.48.96.762.98.44 1.435.979 1.428 1.681-.014 1.28-1.176 2.108-2.96 2.108-.764-.007-1.5-.158-1.898-.328l.238-1.386.224.099c.553.23.917.328 1.596.328.49 0 1.015-.19 1.022-.604 0-.27-.224-.466-.882-.769-.644-.295-1.505-.788-1.491-1.674C11.878 5.84 13.06 5 14.74 5c.658 0 1.19.138 1.526.263Zm2.26 3.834h1.415c-.07-.308-.392-1.786-.392-1.786l-.12-.531c-.083.23-.23.604-.223.59l-.68 1.727Zm2.1-3.985L22 11.284h-1.575s-.154-.71-.203-.926h-2.184l-.357.926h-1.785l2.527-5.66c.175-.4.483-.512.889-.512h1.316Z",
-                                                fill: "#1434CB"
-                                              }
-                                            )
-                                          ] })
-                                        }
-                                      ) }),
-                                      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Box, { $whiteSpace: "nowrap", children: "Visa **** 4242" })
-                                    ]
-                                  }
-                                ),
-                                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Flex, { $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Box, { $fontSize: "12px", $color: "#5D5D5D", children: "Expires: 3/30" }) })
-                              ]
-                            }
-                          )
+                          children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Flex, { $justifyContent: "space-between", $flex: "1", children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Flex, { $alignItems: "center", $gap: "1rem", children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Box, { $display: "inline-block", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                                "svg",
+                                {
+                                  viewBox: "0 0 24 16",
+                                  fill: "none",
+                                  xmlns: "http://www.w3.org/2000/svg",
+                                  width: "26px",
+                                  height: "auto",
+                                  children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("g", { children: [
+                                    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                                      "rect",
+                                      {
+                                        stroke: "#DDD",
+                                        fill: "#FFF",
+                                        x: ".25",
+                                        y: ".25",
+                                        width: "23",
+                                        height: "15.5",
+                                        rx: "2"
+                                      }
+                                    ),
+                                    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                                      "path",
+                                      {
+                                        d: "M2.788 5.914A7.201 7.201 0 0 0 1 5.237l.028-.125h2.737c.371.013.672.125.77.519l.595 2.836.182.854 1.666-4.21h1.799l-2.674 6.167H4.304L2.788 5.914Zm7.312 5.37H8.399l1.064-6.172h1.7L10.1 11.284Zm6.167-6.021-.232 1.333-.153-.066a3.054 3.054 0 0 0-1.268-.236c-.671 0-.972.269-.98.531 0 .29.365.48.96.762.98.44 1.435.979 1.428 1.681-.014 1.28-1.176 2.108-2.96 2.108-.764-.007-1.5-.158-1.898-.328l.238-1.386.224.099c.553.23.917.328 1.596.328.49 0 1.015-.19 1.022-.604 0-.27-.224-.466-.882-.769-.644-.295-1.505-.788-1.491-1.674C11.878 5.84 13.06 5 14.74 5c.658 0 1.19.138 1.526.263Zm2.26 3.834h1.415c-.07-.308-.392-1.786-.392-1.786l-.12-.531c-.083.23-.23.604-.223.59l-.68 1.727Zm2.1-3.985L22 11.284h-1.575s-.154-.71-.203-.926h-2.184l-.357.926h-1.785l2.527-5.66c.175-.4.483-.512.889-.512h1.316Z",
+                                        fill: "#1434CB"
+                                      }
+                                    )
+                                  ] })
+                                }
+                              ) }),
+                              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Box, { $whiteSpace: "nowrap", children: "Visa **** 4242" })
+                            ] }),
+                            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Flex, { $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Box, { $fontSize: "12px", $color: "#5D5D5D", children: "Expires: 3/30" }) })
+                          ] })
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Flex, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Flex, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                         StyledButton,
                         {
                           $size: "sm",
@@ -11101,7 +11148,7 @@ var PaymentMethod = (0, import_react12.forwardRef)(({ children, className, porta
                   ] })
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                 Flex,
                 {
                   $flexDirection: "column",
@@ -11110,8 +11157,8 @@ var PaymentMethod = (0, import_react12.forwardRef)(({ children, className, porta
                   $borderRadius: "0 0 0.5rem 0.5rem",
                   $flex: "1",
                   $height: "100%",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Flex, { $flexDirection: "column", $height: "100%", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Flex, { $flexDirection: "column", $height: "100%", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                       Box,
                       {
                         $fontSize: "18px",
@@ -11121,8 +11168,8 @@ var PaymentMethod = (0, import_react12.forwardRef)(({ children, className, porta
                         children: "Others"
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Flex, { $gap: "1rem", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Flex, { $gap: "1rem", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                         Flex,
                         {
                           $alignItems: "center",
@@ -11130,66 +11177,49 @@ var PaymentMethod = (0, import_react12.forwardRef)(({ children, className, porta
                           $border: "1px solid #E2E5E9",
                           $borderRadius: ".5rem",
                           $backgroundColor: "#ffffff",
-                          $flexDirection: "row",
                           $gap: "1rem",
                           $width: "100%",
-                          children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
-                            Flex,
-                            {
-                              $flexDirection: "row",
-                              $justifyContent: "space-between",
-                              $flex: "1",
-                              children: [
-                                /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
-                                  Flex,
-                                  {
-                                    $flexDirection: "row",
-                                    $alignItems: "center",
-                                    $gap: "1rem",
-                                    children: [
-                                      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Box, { $display: "inline-block", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-                                        "svg",
-                                        {
-                                          viewBox: "0 0 24 16",
-                                          fill: "none",
-                                          xmlns: "http://www.w3.org/2000/svg",
-                                          width: "26px",
-                                          height: "auto",
-                                          children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("g", { children: [
-                                            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-                                              "rect",
-                                              {
-                                                stroke: "#DDD",
-                                                fill: "#FFF",
-                                                x: ".25",
-                                                y: ".25",
-                                                width: "23",
-                                                height: "15.5",
-                                                rx: "2"
-                                              }
-                                            ),
-                                            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-                                              "path",
-                                              {
-                                                d: "M2.788 5.914A7.201 7.201 0 0 0 1 5.237l.028-.125h2.737c.371.013.672.125.77.519l.595 2.836.182.854 1.666-4.21h1.799l-2.674 6.167H4.304L2.788 5.914Zm7.312 5.37H8.399l1.064-6.172h1.7L10.1 11.284Zm6.167-6.021-.232 1.333-.153-.066a3.054 3.054 0 0 0-1.268-.236c-.671 0-.972.269-.98.531 0 .29.365.48.96.762.98.44 1.435.979 1.428 1.681-.014 1.28-1.176 2.108-2.96 2.108-.764-.007-1.5-.158-1.898-.328l.238-1.386.224.099c.553.23.917.328 1.596.328.49 0 1.015-.19 1.022-.604 0-.27-.224-.466-.882-.769-.644-.295-1.505-.788-1.491-1.674C11.878 5.84 13.06 5 14.74 5c.658 0 1.19.138 1.526.263Zm2.26 3.834h1.415c-.07-.308-.392-1.786-.392-1.786l-.12-.531c-.083.23-.23.604-.223.59l-.68 1.727Zm2.1-3.985L22 11.284h-1.575s-.154-.71-.203-.926h-2.184l-.357.926h-1.785l2.527-5.66c.175-.4.483-.512.889-.512h1.316Z",
-                                                fill: "#1434CB"
-                                              }
-                                            )
-                                          ] })
-                                        }
-                                      ) }),
-                                      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Box, { $whiteSpace: "nowrap", children: "Visa **** 2929" })
-                                    ]
-                                  }
-                                ),
-                                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Flex, { $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Box, { $fontSize: "12px", $color: "#5D5D5D", children: "Expires: 3/30" }) })
-                              ]
-                            }
-                          )
+                          children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Flex, { $justifyContent: "space-between", $flex: "1", children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Flex, { $alignItems: "center", $gap: "1rem", children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Box, { $display: "inline-block", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                                "svg",
+                                {
+                                  viewBox: "0 0 24 16",
+                                  fill: "none",
+                                  xmlns: "http://www.w3.org/2000/svg",
+                                  width: "26px",
+                                  height: "auto",
+                                  children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("g", { children: [
+                                    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                                      "rect",
+                                      {
+                                        stroke: "#DDD",
+                                        fill: "#FFF",
+                                        x: ".25",
+                                        y: ".25",
+                                        width: "23",
+                                        height: "15.5",
+                                        rx: "2"
+                                      }
+                                    ),
+                                    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                                      "path",
+                                      {
+                                        d: "M2.788 5.914A7.201 7.201 0 0 0 1 5.237l.028-.125h2.737c.371.013.672.125.77.519l.595 2.836.182.854 1.666-4.21h1.799l-2.674 6.167H4.304L2.788 5.914Zm7.312 5.37H8.399l1.064-6.172h1.7L10.1 11.284Zm6.167-6.021-.232 1.333-.153-.066a3.054 3.054 0 0 0-1.268-.236c-.671 0-.972.269-.98.531 0 .29.365.48.96.762.98.44 1.435.979 1.428 1.681-.014 1.28-1.176 2.108-2.96 2.108-.764-.007-1.5-.158-1.898-.328l.238-1.386.224.099c.553.23.917.328 1.596.328.49 0 1.015-.19 1.022-.604 0-.27-.224-.466-.882-.769-.644-.295-1.505-.788-1.491-1.674C11.878 5.84 13.06 5 14.74 5c.658 0 1.19.138 1.526.263Zm2.26 3.834h1.415c-.07-.308-.392-1.786-.392-1.786l-.12-.531c-.083.23-.23.604-.223.59l-.68 1.727Zm2.1-3.985L22 11.284h-1.575s-.154-.71-.203-.926h-2.184l-.357.926h-1.785l2.527-5.66c.175-.4.483-.512.889-.512h1.316Z",
+                                        fill: "#1434CB"
+                                      }
+                                    )
+                                  ] })
+                                }
+                              ) }),
+                              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Box, { $whiteSpace: "nowrap", children: "Visa **** 2929" })
+                            ] }),
+                            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Flex, { $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Box, { $fontSize: "12px", $color: "#5D5D5D", children: "Expires: 3/30" }) })
+                          ] })
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Flex, { $gap: "1rem", children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Flex, { $gap: "1rem", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                           StyledButton,
                           {
                             $size: "sm",
@@ -11203,7 +11233,7 @@ var PaymentMethod = (0, import_react12.forwardRef)(({ children, className, porta
                             children: "Make Default"
                           }
                         ),
-                        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                           StyledButton,
                           {
                             $size: "sm",
@@ -11232,8 +11262,8 @@ var PaymentMethod = (0, import_react12.forwardRef)(({ children, className, porta
 });
 
 // src/components/elements/invoices/Invoices.tsx
-var import_react13 = require("react");
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_react15 = require("react");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 function resolveDesignProps6(props) {
   return {
     header: {
@@ -11258,10 +11288,10 @@ function resolveDesignProps6(props) {
     }
   };
 }
-var Invoices = (0, import_react13.forwardRef)(({ className, ...rest }, ref) => {
+var Invoices = (0, import_react15.forwardRef)(({ className, ...rest }, ref) => {
   const props = resolveDesignProps6(rest);
   const { settings } = useEmbed();
-  const { invoices } = (0, import_react13.useMemo)(() => {
+  const { invoices } = (0, import_react15.useMemo)(() => {
     return {
       invoices: [
         {
@@ -11275,8 +11305,8 @@ var Invoices = (0, import_react13.forwardRef)(({ className, ...rest }, ref) => {
       ]
     };
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { ref, className, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(Flex, { $flexDirection: "column", $gap: "1rem", children: [
-    props.header.isVisible && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Flex, { $justifyContent: "space-between", $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { ref, className, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Flex, { $flexDirection: "column", $gap: "1rem", children: [
+    props.header.isVisible && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Flex, { $justifyContent: "space-between", $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       Text,
       {
         $font: settings.theme.typography[props.header.fontStyle].fontFamily,
@@ -11286,12 +11316,12 @@ var Invoices = (0, import_react13.forwardRef)(({ className, ...rest }, ref) => {
         children: "Invoices"
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Flex, { $flexDirection: "column", $gap: "0.5rem", children: invoices.slice(
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Flex, { $flexDirection: "column", $gap: "0.5rem", children: invoices.slice(
       0,
       props.limit.isVisible && props.limit.number || invoices.length
     ).map(({ date, amount }, index) => {
-      return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(Flex, { $justifyContent: "space-between", children: [
-        props.date.isVisible && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Flex, { $justifyContent: "space-between", children: [
+        props.date.isVisible && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
           Text,
           {
             $font: settings.theme.typography[props.date.fontStyle].fontFamily,
@@ -11301,7 +11331,7 @@ var Invoices = (0, import_react13.forwardRef)(({ className, ...rest }, ref) => {
             children: toPrettyDate(date)
           }
         ),
-        props.amount.isVisible && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+        props.amount.isVisible && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
           Text,
           {
             $font: settings.theme.typography[props.amount.fontStyle].fontFamily,
@@ -11316,9 +11346,9 @@ var Invoices = (0, import_react13.forwardRef)(({ className, ...rest }, ref) => {
         )
       ] }, index);
     }) }),
-    props.collapse.isVisible && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(Flex, { $alignItems: "center", $gap: "0.5rem", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Icon2, { name: "chevron-down", style: { color: "#D0D0D0" } }),
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    props.collapse.isVisible && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Flex, { $alignItems: "center", $gap: "0.5rem", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Icon2, { name: "chevron-down", style: { color: "#D0D0D0" } }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         Text,
         {
           $font: settings.theme.typography[props.collapse.fontStyle].fontFamily,
@@ -11333,22 +11363,22 @@ var Invoices = (0, import_react13.forwardRef)(({ className, ...rest }, ref) => {
 });
 
 // src/components/embed/ComponentTree.tsx
-var import_react19 = require("react");
+var import_react21 = require("react");
 
 // src/components/embed/renderer.ts
-var import_react18 = require("react");
+var import_react20 = require("react");
 
 // src/components/layout/root/Root.tsx
-var import_react14 = require("react");
-var import_jsx_runtime15 = require("react/jsx-runtime");
-var Root = (0, import_react14.forwardRef)(
+var import_react16 = require("react");
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var Root = (0, import_react16.forwardRef)(
   (props, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { ref, ...props });
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { ref, ...props });
   }
 );
 
 // src/components/layout/viewport/Viewport.tsx
-var import_react15 = require("react");
+var import_react17 = require("react");
 
 // src/components/layout/viewport/styles.ts
 var StyledViewport = dt.div`
@@ -11359,27 +11389,63 @@ var StyledViewport = dt.div`
 `;
 
 // src/components/layout/viewport/Viewport.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
-var Viewport = (0, import_react15.forwardRef)(
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var Viewport = (0, import_react17.forwardRef)(
   ({ children, ...props }, ref) => {
     const { settings, layout } = useEmbed();
-    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       StyledViewport,
       {
         ref,
         $numberOfColumns: settings.theme.numberOfColumns,
         ...props,
-        children: layout === "disabled" ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "", children: "DISABLED" }) : children
+        children: layout === "disabled" ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Box, { $width: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+          Flex,
+          {
+            $flexDirection: "column",
+            $padding: `${settings.theme.card.padding / 16}rem`,
+            $width: "100%",
+            $height: "auto",
+            $borderRadius: `${settings.theme.card.borderRadius / 16}rem`,
+            $backgroundColor: settings.theme.card.background,
+            $alignItems: "center",
+            $justifyContent: "center",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                Box,
+                {
+                  $marginBottom: "8px",
+                  $fontSize: `${settings.theme.typography.heading1.fontSize / 16}rem`,
+                  $fontFamily: settings.theme.typography.heading1.fontFamily,
+                  $fontWeight: settings.theme.typography.heading1.fontWeight,
+                  $color: settings.theme.typography.heading1.color,
+                  children: "Coming soon"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                Box,
+                {
+                  $marginBottom: "8px",
+                  $fontSize: `${settings.theme.typography.text.fontSize / 16}rem`,
+                  $fontFamily: settings.theme.typography.text.fontFamily,
+                  $fontWeight: settings.theme.typography.text.fontWeight,
+                  $color: settings.theme.typography.text.color,
+                  children: "The plan manager will be back very soon."
+                }
+              )
+            ]
+          }
+        ) }) : children
       }
     );
   }
 );
 
 // src/components/layout/column/Column.tsx
-var import_react17 = require("react");
+var import_react19 = require("react");
 
 // src/components/layout/card/Card.tsx
-var import_react16 = require("react");
+var import_react18 = require("react");
 
 // src/components/layout/card/styles.ts
 var StyledCard = dt.div(
@@ -11408,7 +11474,7 @@ var StyledCard = dt.div(
 
       ${() => {
       const { l: l2 } = hexToHSL(theme.card.background);
-      const borderColor = l2 > 50 ? darken(theme.card.background, 10) : lighten(theme.card.background, 30);
+      const borderColor = l2 > 50 ? darken(theme.card.background, 10) : lighten(theme.card.background, 20);
       const borderRadius = `${$borderRadius / TEXT_BASE_SIZE}rem`;
       const boxShadow = "0px 1px 20px 0px #1018280F, 0px 1px 3px 0px #1018281A";
       if ($sectionLayout === "merged") {
@@ -11440,11 +11506,11 @@ var StyledCard = dt.div(
 );
 
 // src/components/layout/card/Card.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
-var Card = (0, import_react16.forwardRef)(
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var Card = (0, import_react18.forwardRef)(
   ({ children, className }, ref) => {
     const { settings } = useEmbed();
-    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       StyledCard,
       {
         ref,
@@ -11466,10 +11532,10 @@ var StyledColumn = dt.div`
 `;
 
 // src/components/layout/column/Column.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
-var Column = (0, import_react17.forwardRef)(
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var Column = (0, import_react19.forwardRef)(
   ({ children, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(StyledColumn, { ref, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Card, { children }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(StyledColumn, { ref, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Card, { children }) });
   }
 );
 
@@ -11502,7 +11568,7 @@ function createRenderer(options) {
     const { className, ...rest } = props;
     const resolvedProps = component === "div" ? rest : props;
     const resolvedChildren = children.map(renderNode);
-    return (0, import_react18.createElement)(
+    return (0, import_react20.createElement)(
       component,
       {
         className,
@@ -11515,31 +11581,101 @@ function createRenderer(options) {
   };
 }
 
+// src/components/ui/loader/styles.ts
+var spin = mt`
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+`;
+var Loader = dt.div(() => {
+  const { settings } = useEmbed();
+  return lt`
+    border: 4px solid rgba(0, 0, 0, 0.1);
+    border-top: 4px solid ${settings.theme.primary};
+    border-radius: 50%;
+    width: 40px;
+    height: 40px;
+    animation: ${spin} 1.5s linear infinite;
+    display: inline-block;
+  `;
+});
+
 // src/components/embed/ComponentTree.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 var ComponentTree = () => {
-  const [children, setChildren] = (0, import_react19.useState)("Loading");
-  const { error, nodes } = useEmbed();
-  (0, import_react19.useEffect)(() => {
+  const { error, nodes, settings } = useEmbed();
+  const [children, setChildren] = (0, import_react21.useState)(
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      Flex,
+      {
+        $width: "100%",
+        $height: "100%",
+        $alignItems: "center",
+        $justifyContent: "center",
+        $padding: `${settings.theme.card.padding / 16}rem`,
+        children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Loader, {})
+      }
+    )
+  );
+  (0, import_react21.useEffect)(() => {
     const renderer = createRenderer();
     setChildren(nodes.map(renderer));
   }, [nodes]);
   if (error) {
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { children: error.message });
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+      Flex,
+      {
+        $flexDirection: "column",
+        $padding: `${settings.theme.card.padding / 16}rem`,
+        $width: "100%",
+        $height: "auto",
+        $borderRadius: `${settings.theme.card.borderRadius / 16}rem`,
+        $backgroundColor: settings.theme.card.background,
+        $alignItems: "center",
+        $justifyContent: "center",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+            Box,
+            {
+              $marginBottom: "8px",
+              $fontSize: `${settings.theme.typography.heading1.fontSize / 16}rem`,
+              $fontFamily: settings.theme.typography.heading1.fontFamily,
+              $fontWeight: settings.theme.typography.heading1.fontWeight,
+              $color: settings.theme.typography.heading1.color,
+              children: "404 Error"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+            Box,
+            {
+              $marginBottom: "8px",
+              $fontSize: `${settings.theme.typography.text.fontSize / 16}rem`,
+              $fontFamily: settings.theme.typography.text.fontFamily,
+              $fontWeight: settings.theme.typography.text.fontWeight,
+              $color: settings.theme.typography.text.color,
+              children: error.message
+            }
+          )
+        ]
+      }
+    );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_jsx_runtime19.Fragment, { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_jsx_runtime21.Fragment, { children });
 };
 
 // src/components/embed/Embed.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 var SchematicEmbed = ({ id, accessToken, apiConfig }) => {
   if (accessToken?.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { children: "Please provide an access token." });
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { children: "Please provide an access token." });
   }
   if (!accessToken?.startsWith("token_")) {
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { children: 'Invalid access token; your temporary access token will start with "token_".' });
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { children: 'Invalid access token; your temporary access token will start with "token_".' });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(EmbedProvider, { id, accessToken, apiConfig, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ComponentTree, {}) });
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(EmbedProvider, { id, accessToken, apiConfig, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ComponentTree, {}) });
 };
 /*! Bundled license information: