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

package/dist/schematic-react.esm.js

@@ -6418,7 +6418,7 @@ var registerWrapper = function registerWrapper2(stripe, startTime) {
   }
   stripe._registerWrapper({
     name: "stripe-js",
-    version: "4.3.0",
+    version: "4.4.0",
     startTime
   });
 };
@@ -7344,7 +7344,6 @@ function PaymentMethodResponseDataFromJSONTyped(json, ignoreDiscriminator) {
     environmentId: json["environment_id"],
     externalId: json["external_id"],
     id: json["id"],
-    invoiceExternalId: json["invoice_external_id"] == null ? void 0 : json["invoice_external_id"],
     paymentMethodType: json["payment_method_type"],
     subscriptionExternalId: json["subscription_external_id"] == null ? void 0 : json["subscription_external_id"],
     updatedAt: new Date(json["updated_at"])
@@ -7969,33 +7968,6 @@ function parseEditorState(data) {
   });
   return arr;
 }
-async function fetchComponent(id, api) {
-  const nodes = [];
-  const settings = { ...defaultSettings };
-  const response = await api.hydrateComponent({ componentId: id });
-  const { data } = response;
-  if (data.component?.ast) {
-    const compressed = data.component.ast;
-    const json = inflate_1(Uint8Array.from(Object.values(compressed)), {
-      to: "string"
-    });
-    const ast = getEditorState(json);
-    if (ast) {
-      (0, import_lodash.default)(settings, ast.ROOT.props.settings);
-      nodes.push(...parseEditorState(ast));
-    }
-  }
-  let stripe = null;
-  if (data.stripeEmbed?.publishableKey) {
-    stripe = loadStripe(data.stripeEmbed.publishableKey);
-  }
-  return {
-    data,
-    nodes,
-    settings,
-    stripe
-  };
-}
 var EmbedContext = createContext({
   api: null,
   data: {
@@ -8006,6 +7978,9 @@ var EmbedContext = createContext({
   stripe: null,
   layout: "portal",
   error: void 0,
+  isPending: false,
+  hydrate: () => {
+  },
   setData: () => {
   },
   updateSettings: () => {
@@ -8032,7 +8007,10 @@ var EmbedProvider = ({
       settings: { ...defaultSettings },
       stripe: null,
       layout: "portal",
+      isPending: false,
       error: void 0,
+      hydrate: () => {
+      },
       setData: () => {
       },
       updateSettings: () => {
@@ -8043,45 +8021,47 @@ var EmbedProvider = ({
       }
     };
   });
-  useEffect(() => {
-    const element = document.getElementById("schematic-fonts");
-    if (element) {
-      return void (styleRef.current = element);
-    }
-    const style = document.createElement("link");
-    style.id = "schematic-fonts";
-    style.rel = "stylesheet";
-    document.head.appendChild(style);
-    styleRef.current = style;
-  }, []);
-  useEffect(() => {
-    if (!accessToken) {
-      return;
-    }
-    const config = new Configuration({ ...apiConfig, apiKey: accessToken });
-    const api = new CheckoutApi(config);
-    setState((prev2) => ({ ...prev2, api }));
-  }, [accessToken, apiConfig]);
-  useEffect(() => {
-    if (!id || !state.api) {
-      return;
-    }
-    fetchComponent(id, state.api).then(async (resolvedData) => {
-      setState((prev2) => ({ ...prev2, ...resolvedData }));
-    }).catch((error) => setState((prev2) => ({ ...prev2, error })));
-  }, [id, state.api]);
-  useEffect(() => {
-    const fontSet = /* @__PURE__ */ new Set([]);
-    Object.values(state.settings.theme.typography).forEach(({ fontFamily }) => {
-      fontSet.add(fontFamily);
-    });
-    if (fontSet.size > 0) {
-      const src = `https://fonts.googleapis.com/css2?${[...fontSet].map((fontFamily) => `family=${fontFamily}&display=swap`).join("&")}`;
-      if (styleRef.current) {
-        styleRef.current.href = src;
+  const hydrate = useCallback(async () => {
+    setState((prev2) => ({ ...prev2, isPending: true, error: void 0 }));
+    try {
+      const nodes = [];
+      const settings = { ...defaultSettings };
+      if (!id || !state.api) {
+        throw new Error("Invalid component id or api instance.");
+      }
+      const response = await state.api.hydrateComponent({ componentId: id });
+      const { data } = response;
+      if (data.component?.ast) {
+        const compressed = data.component.ast;
+        const json = inflate_1(Uint8Array.from(Object.values(compressed)), {
+          to: "string"
+        });
+        const ast = getEditorState(json);
+        if (ast) {
+          (0, import_lodash.default)(settings, ast.ROOT.props.settings);
+          nodes.push(...parseEditorState(ast));
+        }
       }
+      let stripe = null;
+      if (data.stripeEmbed?.publishableKey) {
+        stripe = loadStripe(data.stripeEmbed.publishableKey);
+      }
+      setState((prev2) => ({
+        ...prev2,
+        data,
+        nodes,
+        settings,
+        stripe,
+        isPending: false
+      }));
+    } catch (error) {
+      setState((prev2) => ({
+        ...prev2,
+        isPending: false,
+        error: error instanceof Error ? error : new Error("An unknown error occurred.")
+      }));
     }
-  }, [state.settings.theme.typography]);
+  }, [id, state.api]);
   const setData = useCallback(
     (data) => {
       setState((prev2) => {
@@ -8124,6 +8104,40 @@ var EmbedProvider = ({
     },
     [setState]
   );
+  useEffect(() => {
+    const element = document.getElementById("schematic-fonts");
+    if (element) {
+      return void (styleRef.current = element);
+    }
+    const style = document.createElement("link");
+    style.id = "schematic-fonts";
+    style.rel = "stylesheet";
+    document.head.appendChild(style);
+    styleRef.current = style;
+  }, []);
+  useEffect(() => {
+    if (!accessToken) {
+      return;
+    }
+    const config = new Configuration({ ...apiConfig, apiKey: accessToken });
+    const api = new CheckoutApi(config);
+    setState((prev2) => ({ ...prev2, api }));
+  }, [accessToken, apiConfig]);
+  useEffect(() => {
+    hydrate();
+  }, [hydrate]);
+  useEffect(() => {
+    const fontSet = /* @__PURE__ */ new Set([]);
+    Object.values(state.settings.theme.typography).forEach(({ fontFamily }) => {
+      fontSet.add(fontFamily);
+    });
+    if (fontSet.size > 0) {
+      const src = `https://fonts.googleapis.com/css2?${[...fontSet].map((fontFamily) => `family=${fontFamily}&display=swap`).join("&")}`;
+      if (styleRef.current) {
+        styleRef.current.href = src;
+      }
+    }
+  }, [state.settings.theme.typography]);
   const renderChildren = () => {
     if (state.stripe) {
       return /* @__PURE__ */ jsx(
@@ -8176,6 +8190,8 @@ var EmbedProvider = ({
         stripe: state.stripe,
         layout: state.layout,
         error: state.error,
+        isPending: state.isPending,
+        hydrate,
         setData,
         updateSettings,
         setStripe,
@@ -8756,19 +8772,36 @@ function v4(options, buf, offset) {
 }
 var v4_default = v4;
 var import_polyfill = __toESM2(require_browser_polyfill());
+function contextString(context) {
+  const sortedContext = Object.keys(context).reduce((acc, key) => {
+    const sortedKeys = Object.keys(
+      context[key] || {}
+    ).sort();
+    const sortedObj = sortedKeys.reduce((obj, sortedKey) => {
+      obj[sortedKey] = context[key][sortedKey];
+      return obj;
+    }, {});
+    acc[key] = sortedObj;
+    return acc;
+  }, {});
+  return JSON.stringify(sortedContext);
+}
 var anonymousIdKey = "schematicId";
 var Schematic = class {
   apiKey;
   apiUrl = "https://api.schematichq.com";
-  webSocketUrl = "wss://api.schematichq.com";
-  eventUrl = "https://c.schematichq.com";
   conn = null;
   context = {};
   eventQueue;
+  eventUrl = "https://c.schematichq.com";
+  flagListener;
+  flagValueListeners = {};
+  isPending = true;
+  isPendingListeners = /* @__PURE__ */ new Set();
   storage;
   useWebSocket = false;
   values = {};
-  flagListener;
+  webSocketUrl = "wss://api.schematichq.com";
   constructor(apiKey, options) {
     this.apiKey = apiKey;
     this.eventQueue = [];
@@ -8788,12 +8821,14 @@ var Schematic = class {
     if (options?.webSocketUrl !== void 0) {
       this.webSocketUrl = options.webSocketUrl;
     }
-    if (window?.addEventListener) {
+    if (typeof window !== "undefined" && window?.addEventListener) {
       window.addEventListener("beforeunload", () => {
         this.flushEventQueue();
       });
     }
   }
+  // Get value for a single flag
+  // If in websocket mode, return the local value, otherwise make an API call
   async checkFlag(options) {
     const { fallback = false, key } = options;
     const context = options.context || this.context;
@@ -8821,7 +8856,7 @@ var Schematic = class {
       return fallback;
     });
   }
-  // Make a REST API call to fetch all flag values for a given context
+  // Make an API call to fetch all flag values for a given context (use if not in websocket mode)
   checkFlags = async (context) => {
     context = context || this.context;
     const requestUrl = `${this.apiUrl}/flags/check`;
@@ -8851,18 +8886,6 @@ var Schematic = class {
       return false;
     });
   };
-  cleanup = async () => {
-    if (this.conn) {
-      try {
-        const socket = await this.conn;
-        socket.close();
-      } catch (error) {
-        console.error("Error during cleanup:", error);
-      } finally {
-        this.conn = null;
-      }
-    }
-  };
   // Send an identify event
   identify = (body) => {
     this.setContext({
@@ -8880,12 +8903,16 @@ var Schematic = class {
       this.context = context;
       return Promise.resolve();
     }
-    if (!this.conn) {
-      this.conn = this.wsConnect();
+    try {
+      this.setIsPending(true);
+      if (!this.conn) {
+        this.conn = this.wsConnect();
+      }
+      const socket = await this.conn;
+      await this.wsSendMessage(socket, context);
+    } catch (error) {
+      console.error("Error setting Schematic context:", error);
     }
-    return this.conn.then((socket) => {
-      return this.wsSendMessage(socket, context);
-    });
   };
   // Send track event
   track = (body) => {
@@ -8897,6 +8924,9 @@ var Schematic = class {
       user: user ?? this.context.user
     });
   };
+  /**
+   * Event processing
+   */
   flushEventQueue = () => {
     while (this.eventQueue.length > 0) {
       const event = this.eventQueue.shift();
@@ -8952,6 +8982,22 @@ var Schematic = class {
     this.eventQueue.push(event);
     return Promise.resolve();
   };
+  /**
+   * Websocket management
+   */
+  cleanup = async () => {
+    if (this.conn) {
+      try {
+        const socket = await this.conn;
+        socket.close();
+      } catch (error) {
+        console.error("Error during cleanup:", error);
+      } finally {
+        this.conn = null;
+      }
+    }
+  };
+  // Open a websocket connection
   wsConnect = () => {
     return new Promise((resolve, reject) => {
       const wsUrl = `${this.webSocketUrl}/flags/bootstrap`;
@@ -8967,6 +9013,8 @@ var Schematic = class {
       };
     });
   };
+  // Send a message on the websocket indicating interest in a particular evaluation context
+  // and wait for the initial set of flag values to be returned
   wsSendMessage = (socket, context) => {
     return new Promise((resolve, reject) => {
       if (contextString(context) == contextString(this.context)) {
@@ -8984,16 +9032,17 @@ var Schematic = class {
           (message.flags ?? []).forEach(
             (flag) => {
               this.values[contextString(context)][flag.flag] = flag.value;
+              this.notifyFlagValueListeners(flag.flag);
             }
           );
           if (this.flagListener) {
-            this.flagListener(this.values[contextString(context)]);
+            this.flagListener(this.getFlagValues());
           }
+          this.setIsPending(false);
           if (!resolved) {
             resolved = true;
             resolve();
           }
-          socket.removeEventListener("message", messageHandler);
         };
         socket.addEventListener("message", messageHandler);
         socket.send(
@@ -9012,118 +9061,156 @@ var Schematic = class {
       }
     });
   };
+  /**
+   * State management
+   */
+  // isPending state
+  getIsPending = () => {
+    return this.isPending;
+  };
+  addIsPendingListener = (listener) => {
+    this.isPendingListeners.add(listener);
+    return () => {
+      this.isPendingListeners.delete(listener);
+    };
+  };
+  setIsPending = (isPending) => {
+    this.isPending = isPending;
+    this.isPendingListeners.forEach((listener) => listener());
+  };
+  // flagValues state
+  getFlagValue = (flagKey) => {
+    const values = this.getFlagValues();
+    return values[flagKey];
+  };
+  getFlagValues = () => {
+    const contextStr = contextString(this.context);
+    return this.values[contextStr] ?? {};
+  };
+  addFlagValueListener = (flagKey, listener) => {
+    if (!(flagKey in this.flagValueListeners)) {
+      this.flagValueListeners[flagKey] = /* @__PURE__ */ new Set();
+    }
+    this.flagValueListeners[flagKey].add(listener);
+    return () => {
+      this.flagValueListeners[flagKey].delete(listener);
+    };
+  };
+  notifyFlagValueListeners = (flagKey) => {
+    const listeners = this.flagValueListeners?.[flagKey] ?? [];
+    listeners.forEach((listener) => listener());
+  };
 };
-function contextString(context) {
-  const sortedContext = Object.keys(context).reduce((acc, key) => {
-    const sortedKeys = Object.keys(
-      context[key] || {}
-    ).sort();
-    const sortedObj = sortedKeys.reduce((obj, sortedKey) => {
-      obj[sortedKey] = context[key][sortedKey];
-      return obj;
-    }, {});
-    acc[key] = sortedObj;
-    return acc;
-  }, {});
-  return JSON.stringify(sortedContext);
-}
 
 // src/context/schematic.tsx
-import { createContext as createContext2, useEffect as useEffect2, useMemo, useState as useState2 } from "react";
+import React, { createContext as createContext2, useEffect as useEffect2, useMemo } from "react";
 import { jsx as jsx2 } from "react/jsx-runtime";
-var SchematicContext = createContext2({
-  flagValues: {}
-});
+var SchematicContext = createContext2(
+  null
+);
 var SchematicProvider = ({
   children,
   client: providedClient,
   publishableKey,
   ...clientOpts
 }) => {
-  const [client, setClient] = useState2();
-  const [flagValues, setFlagValues] = useState2({});
-  const memoizedClientOpts = useMemo(
-    () => clientOpts,
-    /* eslint-disable-next-line react-hooks/exhaustive-deps */
-    [JSON.stringify(clientOpts)]
-  );
-  const { useWebSocket = true } = clientOpts;
-  useEffect2(() => {
-    let cleanupFunction;
+  const client = useMemo(() => {
+    const { useWebSocket = true } = clientOpts;
     if (providedClient) {
-      setClient(providedClient);
-      cleanupFunction = () => {
-        providedClient.cleanup().catch((error) => {
-          console.error("Error during cleanup:", error);
-        });
-      };
-    } else {
-      const newClient = new Schematic(publishableKey, {
-        ...memoizedClientOpts,
-        flagListener: setFlagValues,
-        useWebSocket
-      });
-      setClient(newClient);
-      cleanupFunction = () => {
-        newClient.cleanup().catch((error) => {
+      return providedClient;
+    }
+    return new Schematic(publishableKey, {
+      useWebSocket,
+      ...clientOpts
+    });
+  }, [providedClient, publishableKey, clientOpts]);
+  useEffect2(() => {
+    return () => {
+      if (!providedClient) {
+        client.cleanup().catch((error) => {
           console.error("Error during cleanup:", error);
         });
-      };
-    }
-    return cleanupFunction;
-  }, [memoizedClientOpts, providedClient, publishableKey, useWebSocket]);
-  const contextValue = {
-    client,
-    flagValues
-  };
+      }
+    };
+  }, [client, providedClient]);
+  const contextValue = useMemo(
+    () => ({
+      client
+    }),
+    [client]
+  );
   return /* @__PURE__ */ jsx2(SchematicContext.Provider, { value: contextValue, children });
 };
+var useSchematic = () => {
+  const context = React.useContext(SchematicContext);
+  if (context === null) {
+    throw new Error("useSchematic must be used within a SchematicProvider");
+  }
+  return context;
+};
 
 // src/hooks/embed.ts
 import { useContext } from "react";
 var useEmbed = () => useContext(EmbedContext);
 
 // src/hooks/schematic.ts
-import { useContext as useContext2, useEffect as useEffect3, useState as useState3 } from "react";
-var useSchematic = () => useContext2(SchematicContext);
+import { useMemo as useMemo2, useSyncExternalStore, useCallback as useCallback2 } from "react";
 var useSchematicClient = (opts) => {
   const schematic = useSchematic();
   const { client } = opts ?? {};
-  if (client) {
-    return client;
-  }
-  return schematic.client;
+  return useMemo2(() => {
+    if (client) {
+      return client;
+    }
+    return schematic.client;
+  }, [client, schematic.client]);
 };
 var useSchematicContext = (opts) => {
   const client = useSchematicClient(opts);
-  const { setContext } = client ?? {};
-  return { setContext };
+  return useMemo2(
+    () => ({
+      setContext: client.setContext.bind(client)
+    }),
+    [client]
+  );
 };
 var useSchematicEvents = (opts) => {
   const client = useSchematicClient(opts);
-  const { track, identify } = client ?? {};
-  return { track, identify };
+  const track = useCallback2(
+    (...args) => client.track(...args),
+    [client]
+  );
+  const identify = useCallback2(
+    (...args) => client.identify(...args),
+    [client]
+  );
+  return useMemo2(() => ({ track, identify }), [track, identify]);
 };
 var useSchematicFlag = (key, opts) => {
-  const { flagValues } = useSchematic();
-  const { client } = opts ?? {};
-  const { fallback = false } = opts ?? {};
-  const [value, setValue] = useState3(fallback);
-  const flagValue = flagValues[key];
-  useEffect3(() => {
-    if (typeof flagValue !== "undefined") {
-      setValue(flagValue);
-    } else if (client) {
-      client.checkFlag({ key, fallback }).then(setValue);
-    } else {
-      setValue(fallback);
-    }
-  }, [key, fallback, flagValue, client]);
-  return value;
+  const client = useSchematicClient(opts);
+  const fallback = opts?.fallback ?? false;
+  const subscribe = useCallback2(
+    (callback) => client.addFlagValueListener(key, callback),
+    [client, key]
+  );
+  const getSnapshot = useCallback2(() => {
+    const value = client.getFlagValue(key);
+    return typeof value === "undefined" ? fallback : value;
+  }, [client, key, fallback]);
+  return useSyncExternalStore(subscribe, getSnapshot);
+};
+var useSchematicIsPending = (opts) => {
+  const client = useSchematicClient(opts);
+  const subscribe = useCallback2(
+    (callback) => client.addIsPendingListener(callback),
+    [client]
+  );
+  const getSnapshot = useCallback2(() => client.getIsPending(), [client]);
+  return useSyncExternalStore(subscribe, getSnapshot);
 };
 
 // src/components/elements/plan-manager/PlanManager.tsx
-import { forwardRef, useMemo as useMemo3 } from "react";
+import { forwardRef, useMemo as useMemo6 } from "react";
 import { createPortal } from "react-dom";
 
 // src/utils/color.ts
@@ -9205,7 +9292,7 @@ function hslToHex({ h, s: s2, l: l2 }) {
 }
 function adjustLightness(color, amount) {
   const { h, s: s2, l: l2 } = hexToHSL(color);
-  return hslToHex({ h, s: s2, l: Math.max(Math.min(l2 + amount, 100), 0) });
+  return hslToHex({ h, s: s2, l: Math.max(Math.min(l2 + amount * 100, 100), 0) });
 }
 function lighten(color, amount) {
   return adjustLightness(color, amount);
@@ -9435,6 +9522,7 @@ var Container = dt.div`
   align-items: center;
   flex-shrink: 0;
   border-radius: 9999px;
+
   ${({ $size }) => {
   const base = 24;
   let scale = 1;
@@ -9452,6 +9540,15 @@ var Container = dt.div`
     case "lg":
       scale *= 1.75;
       break;
+    case "xl":
+      scale *= 2;
+      break;
+    case "2xl":
+      scale *= 2.5;
+      break;
+    case "3xl":
+      scale *= 3;
+      break;
   }
   return lt`
       font-size: ${base * scale / TEXT_BASE_SIZE}rem;
@@ -9460,12 +9557,19 @@ var Container = dt.div`
       height: ${(base + 8) * scale / TEXT_BASE_SIZE}rem;
     `;
 }}
+
   ${({ $variant, $colors }) => $variant === "outline" ? lt`
-          color: ${$colors[0]};
           background-color: transparent;
+
+          ${Icon} {
+            color: ${$colors[0]};
+          }
         ` : lt`
-          color: ${$colors[0]};
           background-color: ${$colors[1]};
+
+          ${Icon} {
+            color: ${$colors[0]};
+          }
         `}
 `;
 
@@ -9488,17 +9592,20 @@ var IconRound = ({
 };
 
 // src/components/ui/modal/Modal.tsx
-import { useCallback as useCallback2, useEffect as useEffect4, useRef as useRef2 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect3, useMemo as useMemo3, useRef as useRef2 } from "react";
 import { jsx as jsx6 } from "react/jsx-runtime";
-var Modal = ({ children, onClose }) => {
+var Modal = ({ children, size = "auto", onClose }) => {
   const theme = nt();
   const { setLayout } = useEmbed();
   const ref = useRef2(null);
-  const handleClose = useCallback2(() => {
+  const isLightBackground = useMemo3(() => {
+    return hexToHSL(theme.card.background).l > 50;
+  }, [theme.card.background]);
+  const handleClose = useCallback3(() => {
     setLayout("portal");
     onClose?.();
   }, [setLayout, onClose]);
-  useEffect4(() => {
+  useEffect3(() => {
     ref.current?.focus();
   }, []);
   return /* @__PURE__ */ jsx6(
@@ -9523,7 +9630,7 @@ var Modal = ({ children, onClose }) => {
       $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),
+      $backgroundColor: isLightBackground ? "hsl(0, 0%, 85%)" : "hsl(0, 0%, 15%)",
       $overflow: "hidden",
       children: /* @__PURE__ */ jsx6(
         Flex,
@@ -9534,9 +9641,13 @@ var Modal = ({ children, onClose }) => {
           $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),
+          ...size === "auto" ? { $width: "min-content", $height: "min-content" } : {
+            $width: "100%",
+            $height: "100%",
+            $maxWidth: "1366px",
+            $maxHeight: "768px"
+          },
+          $backgroundColor: theme.card.background,
           $borderRadius: "0.5rem",
           $boxShadow: "0px 1px 20px 0px #1018280F, 0px 1px 3px 0px #1018281A;",
           id: "select-plan-dialog",
@@ -9551,12 +9662,19 @@ var Modal = ({ children, onClose }) => {
 };
 
 // src/components/ui/modal/ModalHeader.tsx
-import { useCallback as useCallback3 } from "react";
+import { useCallback as useCallback4, useMemo as useMemo4 } from "react";
 import { jsx as jsx7, jsxs as jsxs2 } from "react/jsx-runtime";
-var ModalHeader = ({ children, onClose }) => {
+var ModalHeader = ({
+  children,
+  bordered = false,
+  onClose
+}) => {
   const theme = nt();
   const { setLayout } = useEmbed();
-  const handleClose = useCallback3(() => {
+  const isLightBackground = useMemo4(() => {
+    return hexToHSL(theme.card.background).l > 50;
+  }, [theme.card.background]);
+  const handleClose = useCallback4(() => {
     setLayout("portal");
     onClose?.();
   }, [setLayout, onClose]);
@@ -9565,13 +9683,15 @@ var ModalHeader = ({ children, onClose }) => {
     {
       $justifyContent: "space-between",
       $alignItems: "center",
+      $flexShrink: "0",
       $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),
+      $height: "5rem",
+      $padding: "0 1.5rem 0 3rem",
+      ...bordered && {
+        $borderBottomWidth: "1px",
+        $borderBottomStyle: "solid",
+        $borderBottomColor: isLightBackground ? "hsla(0, 0%, 0%, 0.15)" : "hsla(0, 0%, 100%, 0.15)"
+      },
       children: [
         children,
         /* @__PURE__ */ jsx7(Box, { $cursor: "pointer", onClick: handleClose, children: /* @__PURE__ */ jsx7(
@@ -9580,7 +9700,7 @@ var ModalHeader = ({ children, onClose }) => {
             name: "close",
             style: {
               fontSize: 36,
-              color: hexToHSL(theme.card.background).l > 50 ? darken(theme.card.background, 27.5) : lighten(theme.card.background, 27.5)
+              color: isLightBackground ? "hsla(0, 0%, 0%, 0.275)" : "hsla(0, 0%, 100%, 0.275)"
             }
           }
         ) })
@@ -9632,14 +9752,14 @@ var ProgressBar = ({
                 $overflow: "hidden",
                 $width: "100%",
                 $height: `${8 / TEXT_BASE_SIZE}rem`,
-                $background: "#F2F4F7",
+                $backgroundColor: "#F2F4F7",
                 $borderRadius: "9999px",
                 children: /* @__PURE__ */ jsx8(
                   Box,
                   {
                     $width: `${Math.min(progress, 100)}%`,
                     $height: "100%",
-                    $background: barColorMap[color],
+                    $backgroundColor: barColorMap[color],
                     $borderRadius: "9999px"
                   }
                 )
@@ -9658,10 +9778,10 @@ var ProgressBar = ({
 };
 
 // src/components/elements/plan-manager/CheckoutDialog.tsx
-import { useMemo as useMemo2, useState as useState5 } from "react";
+import { useEffect as useEffect4, useMemo as useMemo5, useState as useState3 } from "react";
 
 // src/components/elements/plan-manager/PaymentForm.tsx
-import { useState as useState4 } from "react";
+import { useState as useState2 } from "react";
 import {
   LinkAuthenticationElement,
   PaymentElement
@@ -9702,7 +9822,7 @@ var StyledButton = dt(Button2)`
   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);
+    color = l2 > 50 ? darken(color, 0.075) : lighten(color, 0.15);
   }
   return $variant === "filled" ? lt`
           background-color: ${color};
@@ -9725,8 +9845,8 @@ var StyledButton = dt(Button2)`
   &:not(:disabled):hover {
     ${({ $color = "primary", theme, $variant = "filled" }) => {
   const specified = theme[$color];
-  const lightened = lighten(specified, 15);
-  const color = specified === lightened ? darken(specified, 15) : lightened;
+  const lightened = lighten(specified, 0.15);
+  const color = specified === lightened ? darken(specified, 0.15) : lightened;
   const { l: l2 } = hexToHSL(theme[$color]);
   const textColor = l2 > 50 ? "#000000" : "#FFFFFF";
   return $variant === "filled" ? lt`
@@ -9748,21 +9868,21 @@ var StyledButton = dt(Button2)`
   switch ($size) {
     case "sm":
       return lt`
-          font-size: ${15 / 16}rem;
-          padding: ${12 / 16}rem 0;
-          border-radius: ${6 / 16}rem;
+          font-size: ${15 / TEXT_BASE_SIZE}rem;
+          padding: ${12 / TEXT_BASE_SIZE}rem 0;
+          border-radius: ${6 / TEXT_BASE_SIZE}rem;
         `;
     case "md":
       return lt`
-          font-size: ${17 / 16}rem;
-          padding: ${16 / 16}rem 0;
-          border-radius: ${8 / 16}rem;
+          font-size: ${17 / TEXT_BASE_SIZE}rem;
+          padding: ${16 / TEXT_BASE_SIZE}rem 0;
+          border-radius: ${8 / TEXT_BASE_SIZE}rem;
         `;
     case "lg":
       return lt`
-          font-size: ${19 / 16}rem;
-          padding: ${20 / 16}rem 0;
-          border-radius: ${10 / 16}rem;
+          font-size: ${19 / TEXT_BASE_SIZE}rem;
+          padding: ${20 / TEXT_BASE_SIZE}rem 0;
+          border-radius: ${10 / TEXT_BASE_SIZE}rem;
         `;
   }
 }}
@@ -9774,9 +9894,9 @@ var PaymentForm = ({ plan, period, onConfirm }) => {
   const stripe = useStripe();
   const elements = useElements();
   const { api, data } = useEmbed();
-  const [message, setMessage] = useState4(null);
-  const [isLoading, setIsLoading] = useState4(false);
-  const [isConfirmed, setIsConfirmed] = useState4(false);
+  const [message, setMessage] = useState2(null);
+  const [isLoading, setIsLoading] = useState2(false);
+  const [isConfirmed, setIsConfirmed] = useState2(false);
   const handleSubmit = async (event) => {
     event.preventDefault();
     const priceId = period === "month" ? plan.monthlyPrice?.id : plan.yearlyPrice?.id;
@@ -9785,6 +9905,7 @@ var PaymentForm = ({ plan, period, onConfirm }) => {
     }
     setIsLoading(true);
     setIsConfirmed(false);
+    setMessage(null);
     try {
       const { setupIntent, error } = await stripe.confirmSetup({
         elements,
@@ -9801,13 +9922,9 @@ var PaymentForm = ({ plan, period, onConfirm }) => {
       if (error?.type === "card_error" || error?.type === "validation_error") {
         setMessage(error.message);
       }
-      setIsLoading(false);
     } catch (error) {
-      if (error instanceof Error) {
-        setMessage(error.message);
-      } else {
-        setMessage("An unexpected error occured.");
-      }
+      setMessage("A problem occurred while saving your payment method.");
+    } finally {
       setIsLoading(false);
     }
   };
@@ -9830,8 +9947,8 @@ var PaymentForm = ({ plan, period, onConfirm }) => {
           {
             $flexDirection: "column",
             $gap: "1.5rem",
-            $marginBottom: "1.5rem",
             $width: "100%",
+            $marginBottom: "1.5rem",
             children: /* @__PURE__ */ jsx9(
               LinkAuthenticationElement,
               {
@@ -9840,20 +9957,18 @@ var PaymentForm = ({ plan, period, onConfirm }) => {
             )
           }
         ),
-        /* @__PURE__ */ jsxs4(Flex, { $flexDirection: "column", $width: "100%", $flex: "1", $height: "100%", children: [
-          /* @__PURE__ */ jsx9(PaymentElement, { id: "payment-element" }),
-          message && /* @__PURE__ */ jsx9(Text, { id: "payment-message", children: message })
-        ] }),
-        /* @__PURE__ */ jsx9("div", { children: /* @__PURE__ */ jsx9(
+        /* @__PURE__ */ jsx9(Box, { $marginBottom: "1.5rem", children: /* @__PURE__ */ jsx9(PaymentElement, { id: "payment-element" }) }),
+        /* @__PURE__ */ jsx9(
           StyledButton,
           {
             id: "submit",
             disabled: isLoading || !stripe || !elements || !data.stripeEmbed?.publishableKey || !data.stripeEmbed?.setupIntentClientSecret || isConfirmed,
             $size: "md",
             $color: "primary",
-            children: /* @__PURE__ */ jsx9(Text, { id: "button-text", children: !isLoading ? "Loading" : "Save payment method" })
+            children: /* @__PURE__ */ jsx9(Text, { id: "button-text", children: isLoading ? "Loading" : "Save payment method" })
           }
-        ) })
+        ),
+        message && /* @__PURE__ */ jsx9(Box, { $margin: "1rem 0", children: /* @__PURE__ */ jsx9(Text, { id: "payment-message", $size: 15, $weight: 500, $color: "#DB6669", children: message }) })
       ]
     }
   );
@@ -9862,23 +9977,24 @@ var PaymentForm = ({ plan, period, onConfirm }) => {
 // src/components/elements/plan-manager/CheckoutDialog.tsx
 import { Fragment, jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
 var CheckoutDialog = () => {
-  const [checkoutStage, setCheckoutStage] = useState5(
+  const [checkoutStage, setCheckoutStage] = useState3(
     "plan"
   );
-  const [planPeriod, setPlanPeriod] = useState5("month");
-  const [selectedPlan, setSelectedPlan] = useState5();
-  const [paymentMethodId, setPaymentMethodId] = useState5();
-  const [isLoading, setIsLoading] = useState5(false);
-  const [isCheckoutComplete, setIsCheckoutComplete] = useState5(false);
+  const [planPeriod, setPlanPeriod] = useState3("month");
+  const [selectedPlan, setSelectedPlan] = useState3();
+  const [paymentMethodId, setPaymentMethodId] = useState3();
+  const [isLoading, setIsLoading] = useState3(false);
+  const [isCheckoutComplete, setIsCheckoutComplete] = useState3(false);
+  const [error, setError] = useState3();
   const theme = nt();
-  const { api, data, settings } = useEmbed();
-  const { currentPlan, availablePlans } = useMemo2(() => {
+  const { api, data, hydrate, setLayout } = useEmbed();
+  const { currentPlan, availablePlans } = useMemo5(() => {
     return {
       currentPlan: data.company?.plan,
       availablePlans: data.activePlans
     };
   }, [data.company, data.activePlans]);
-  const savingsPercentage = useMemo2(() => {
+  const savingsPercentage = useMemo5(() => {
     if (selectedPlan) {
       const monthly = (selectedPlan?.monthlyPrice?.price || 0) * 12;
       const yearly = selectedPlan?.yearlyPrice?.price || 0;
@@ -9886,29 +10002,39 @@ var CheckoutDialog = () => {
     }
     return 0;
   }, [selectedPlan]);
-  return /* @__PURE__ */ jsxs5(Modal, { children: [
-    /* @__PURE__ */ jsx10(ModalHeader, { children: /* @__PURE__ */ jsx10(Flex, { $gap: "1rem", children: !isCheckoutComplete && /* @__PURE__ */ jsxs5(Fragment, { children: [
+  const isLightBackground = useMemo5(() => {
+    return hexToHSL(theme.card.background).l > 50;
+  }, [theme.card.background]);
+  useEffect4(() => {
+    if (isCheckoutComplete && api && data.component?.id) {
+      hydrate();
+    }
+  }, [isCheckoutComplete, api, data.component?.id, hydrate]);
+  return /* @__PURE__ */ jsxs5(Modal, { size: isCheckoutComplete ? "auto" : "lg", children: [
+    /* @__PURE__ */ jsx10(ModalHeader, { bordered: !isCheckoutComplete, children: /* @__PURE__ */ jsx10(Flex, { $gap: "1rem", children: !isCheckoutComplete && /* @__PURE__ */ jsxs5(Fragment, { children: [
       /* @__PURE__ */ jsxs5(Flex, { $gap: "0.5rem", $alignItems: "center", children: [
         checkoutStage === "plan" ? /* @__PURE__ */ jsx10(
           Box,
           {
-            $width: "0.9375rem",
-            $height: "0.9375rem",
+            $width: `${20 / TEXT_BASE_SIZE}rem`,
+            $height: `${20 / TEXT_BASE_SIZE}rem`,
             $borderWidth: "2px",
             $borderStyle: "solid",
-            $borderColor: hexToHSL(theme.card.background).l > 50 ? darken(theme.card.background, 12.5) : lighten(theme.card.background, 12.5),
+            $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.125)" : "hsla(0, 0%, 100%, 0.25)",
             $borderRadius: "9999px"
           }
         ) : /* @__PURE__ */ jsx10(
           IconRound,
           {
             name: "check",
+            colors: [
+              theme.card.background,
+              isLightBackground ? "hsla(0, 0%, 0%, 0.125)" : "hsla(0, 0%, 100%, 0.25)"
+            ],
             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"
+              fontSize: `${16 / TEXT_BASE_SIZE}rem`,
+              width: `${20 / TEXT_BASE_SIZE}rem`,
+              height: `${20 / TEXT_BASE_SIZE}rem`
             }
           }
         ),
@@ -9916,39 +10042,43 @@ var CheckoutDialog = () => {
           Box,
           {
             tabIndex: 0,
-            ...checkoutStage === "plan" ? {
-              style: {
-                fontWeight: "700"
-              }
-            } : {
-              style: {
-                cursor: "pointer"
-              },
-              onClick: () => setCheckoutStage("plan")
+            ...checkoutStage !== "plan" && {
+              onClick: () => setCheckoutStage("plan"),
+              $opacity: "0.6375",
+              $cursor: "pointer"
             },
-            children: /* @__PURE__ */ jsx10(Text, { children: "1. Select plan" })
-          }
-        ),
-        /* @__PURE__ */ jsx10(
-          Icon2,
-          {
-            name: "chevron-right",
-            style: {
-              fontSize: 16,
-              color: hexToHSL(theme.card.background).l > 50 ? darken(theme.card.background, 17.5) : lighten(theme.card.background, 17.5)
-            }
+            children: /* @__PURE__ */ jsx10(
+              Text,
+              {
+                $font: theme.typography.text.fontFamily,
+                $size: 19,
+                $weight: checkoutStage === "plan" ? 600 : 400,
+                $color: theme.typography.text.color,
+                children: "1. Select plan"
+              }
+            )
           }
         )
       ] }),
+      /* @__PURE__ */ jsx10(
+        Icon2,
+        {
+          name: "chevron-right",
+          style: {
+            fontSize: 16,
+            color: isLightBackground ? "hsla(0, 0%, 0%, 0.175)" : "hsla(0, 0%, 100%, 0.35)"
+          }
+        }
+      ),
       /* @__PURE__ */ jsxs5(Flex, { $gap: "0.5rem", $alignItems: "center", children: [
         /* @__PURE__ */ jsx10(
           Box,
           {
-            $width: "0.9375rem",
-            $height: "0.9375rem",
+            $width: `${20 / TEXT_BASE_SIZE}rem`,
+            $height: `${20 / TEXT_BASE_SIZE}rem`,
             $borderWidth: "2px",
             $borderStyle: "solid",
-            $borderColor: hexToHSL(theme.card.background).l > 50 ? darken(theme.card.background, 12.5) : lighten(theme.card.background, 12.5),
+            $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.125)" : "hsla(0, 0%, 100%, 0.25)",
             $borderRadius: "9999px"
           }
         ),
@@ -9956,41 +10086,70 @@ var CheckoutDialog = () => {
           Box,
           {
             tabIndex: 0,
-            ...checkoutStage === "checkout" && {
-              style: {
-                fontWeight: "700"
-              }
+            ...checkoutStage !== "checkout" && {
+              $opacity: "0.6375"
             },
-            children: /* @__PURE__ */ jsx10(Text, { children: "2. Checkout" })
+            children: /* @__PURE__ */ jsx10(
+              Text,
+              {
+                $font: theme.typography.text.fontFamily,
+                $size: 19,
+                $weight: checkoutStage === "plan" ? 600 : 400,
+                $color: theme.typography.text.color,
+                children: "2. Checkout"
+              }
+            )
           }
         )
       ] })
     ] }) }) }),
-    isCheckoutComplete && /* @__PURE__ */ jsx10(Flex, { $justifyContent: "center", $alignItems: "center", $flexGrow: "1", children: /* @__PURE__ */ jsx10(
-      Text,
+    isCheckoutComplete && /* @__PURE__ */ jsxs5(
+      Flex,
       {
-        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!"
+        $flexDirection: "column",
+        $justifyContent: "center",
+        $alignItems: "center",
+        $flexGrow: "1",
+        $gap: `${32 / TEXT_BASE_SIZE}rem`,
+        $padding: `${32 / TEXT_BASE_SIZE}rem ${40 / TEXT_BASE_SIZE}rem`,
+        $whiteSpace: "nowrap",
+        children: [
+          /* @__PURE__ */ jsx10(
+            IconRound,
+            {
+              name: "check",
+              size: "3xl",
+              colors: [
+                theme.card.background,
+                isLightBackground ? "hsla(0, 0%, 0%, 0.125)" : "hsla(0, 0%, 100%, 0.125)"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx10(
+            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!"
+            }
+          ),
+          /* @__PURE__ */ jsx10(StyledButton, { onClick: () => setLayout("portal"), children: "Close" })
+        ]
       }
-    ) }),
-    !isCheckoutComplete && /* @__PURE__ */ jsxs5(Flex, { $position: "relative", $flexGrow: "1", children: [
+    ),
+    !isCheckoutComplete && /* @__PURE__ */ jsxs5(Flex, { $position: "relative", $height: "calc(100% - 5rem)", children: [
       /* @__PURE__ */ jsxs5(
         Flex,
         {
-          $position: "absolute",
-          $top: "0",
-          $left: "0",
           $flexDirection: "column",
+          $flexGrow: "1",
           $gap: "1rem",
           $padding: "2rem 2.5rem 2rem 2.5rem",
-          $backgroundColor: darken(settings.theme.card.background, 2.5),
+          $backgroundColor: isLightBackground ? "hsla(0, 0%, 0%, 0.025)" : "hsla(0, 0%, 100%, 0.025)",
           $flex: "1",
-          $width: "72.5%",
-          $height: "100%",
           $overflow: "auto",
           children: [
             checkoutStage === "plan" && /* @__PURE__ */ jsxs5(Fragment, { children: [
@@ -9998,9 +10157,12 @@ var CheckoutDialog = () => {
                 /* @__PURE__ */ jsx10(
                   Text,
                   {
-                    as: "h1",
+                    as: "h3",
                     id: "select-plan-dialog-label",
-                    $size: 18,
+                    $font: theme.typography.heading3.fontFamily,
+                    $size: theme.typography.heading3.fontSize,
+                    $weight: theme.typography.heading3.fontWeight,
+                    $color: theme.typography.heading3.color,
                     $marginBottom: "0.5rem",
                     children: "Select plan"
                   }
@@ -10010,25 +10172,28 @@ var CheckoutDialog = () => {
                   {
                     as: "p",
                     id: "select-plan-dialog-description",
-                    $size: 14,
-                    $weight: 400,
+                    $font: theme.typography.text.fontFamily,
+                    $size: theme.typography.text.fontSize,
+                    $weight: theme.typography.text.fontWeight,
+                    $color: theme.typography.text.color,
                     children: "Choose your base plan"
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsx10(Flex, { $gap: "1rem", $flexGrow: "1", children: availablePlans?.map((plan) => {
+              /* @__PURE__ */ jsx10(Flex, { $flexWrap: "wrap", $gap: "1rem", $flexGrow: "1", children: availablePlans?.map((plan) => {
                 return /* @__PURE__ */ jsxs5(
                   Flex,
                   {
-                    $height: "100%",
                     $flexDirection: "column",
-                    $backgroundColor: settings.theme.card.background,
-                    $flex: "1",
+                    $width: "100%",
+                    $minWidth: "280px",
+                    $maxWidth: `calc(${100 / 3}% - 1rem)`,
+                    $backgroundColor: theme.card.background,
                     $outlineWidth: "2px",
                     $outlineStyle: "solid",
                     $outlineColor: plan.id === selectedPlan?.id ? theme.primary : "transparent",
-                    $borderRadius: `${settings.theme.card.borderRadius / 16}rem`,
-                    ...settings.theme.card.hasShadow && {
+                    $borderRadius: `${theme.card.borderRadius / TEXT_BASE_SIZE}rem`,
+                    ...theme.card.hasShadow && {
                       $boxShadow: "0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 20px rgba(16, 24, 40, 0.06)"
                     },
                     children: [
@@ -10040,10 +10205,10 @@ var CheckoutDialog = () => {
                           $gap: "1rem",
                           $width: "100%",
                           $height: "auto",
-                          $padding: `${settings.theme.card.padding / 16}rem`,
+                          $padding: `${theme.card.padding / TEXT_BASE_SIZE}rem`,
                           $borderBottomWidth: "1px",
                           $borderStyle: "solid",
-                          $borderColor: hexToHSL(theme.card.background).l > 50 ? darken(theme.card.background, 17.5) : lighten(theme.card.background, 17.5),
+                          $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.175)" : "hsla(0, 0%, 100%, 0.175)",
                           children: [
                             /* @__PURE__ */ jsx10(Text, { $size: 20, $weight: 600, children: plan.name }),
                             /* @__PURE__ */ jsx10(Text, { $size: 14, children: plan.description }),
@@ -10096,8 +10261,8 @@ var CheckoutDialog = () => {
                                       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)}`
+                                        theme.primary,
+                                        isLightBackground ? "hsla(0, 0%, 0%, 0.0625)" : "hsla(0, 0%, 100%, 0.0625)"
                                       ]
                                     }
                                   ),
@@ -10142,10 +10307,8 @@ var CheckoutDialog = () => {
                                   /* @__PURE__ */ jsx10(
                                     Text,
                                     {
-                                      style: {
-                                        color: hexToHSL(theme.card.background).l > 50 ? "#000000" : "#FFFFFF",
-                                        lineHeight: "1.4"
-                                      },
+                                      $lineHeight: "1.4",
+                                      $color: theme.typography.text.color,
                                       children: "Selected"
                                     }
                                   )
@@ -10156,12 +10319,12 @@ var CheckoutDialog = () => {
                               StyledButton,
                               {
                                 disabled: plan.valid === false,
+                                ...plan.valid === true && {
+                                  onClick: () => setSelectedPlan(plan)
+                                },
                                 $size: "sm",
                                 $color: "primary",
                                 $variant: "outline",
-                                onClick: () => {
-                                  setSelectedPlan(plan);
-                                },
                                 children: "Select"
                               }
                             )
@@ -10190,14 +10353,10 @@ var CheckoutDialog = () => {
       /* @__PURE__ */ jsxs5(
         Flex,
         {
-          $position: "absolute",
-          $top: "0",
-          $right: "0",
           $flexDirection: "column",
-          $background: settings.theme.card.background,
+          $backgroundColor: theme.card.background,
           $borderRadius: "0 0 0.5rem",
-          $width: "27.5%",
-          $height: "100%",
+          $width: "21.5rem",
           $boxShadow: "0px 1px 20px 0px #1018280F, 0px 1px 3px 0px #1018281A;",
           children: [
             /* @__PURE__ */ jsxs5(
@@ -10209,13 +10368,27 @@ var CheckoutDialog = () => {
                 $width: "100%",
                 $height: "auto",
                 $padding: "1.5rem",
-                $borderBottom: "1px solid #DEDEDE",
+                $borderBottomWidth: "1px",
+                $borderStyle: "solid",
+                $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.1)" : "hsla(0, 0%, 100%, 0.2)",
                 children: [
-                  /* @__PURE__ */ jsx10(Flex, { $justifyContent: "space-between", children: /* @__PURE__ */ jsx10(Text, { $size: 20, $weight: 600, children: "Subscription" }) }),
+                  /* @__PURE__ */ jsx10(Flex, { $justifyContent: "space-between", children: /* @__PURE__ */ jsx10(
+                    Text,
+                    {
+                      as: "h3",
+                      $font: theme.typography.heading3.fontFamily,
+                      $size: theme.typography.heading3.fontSize,
+                      $weight: theme.typography.heading3.fontWeight,
+                      $color: theme.typography.heading3.color,
+                      children: "Subscription"
+                    }
+                  ) }),
                   /* @__PURE__ */ jsxs5(
                     Flex,
                     {
-                      $border: "1px solid #D9D9D9",
+                      $borderWidth: "1px",
+                      $borderStyle: "solid",
+                      $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.1)" : "hsla(0, 0%, 100%, 0.2)",
                       $borderRadius: "2.5rem",
                       $cursor: "pointer",
                       children: [
@@ -10227,9 +10400,20 @@ var CheckoutDialog = () => {
                             $alignItems: "center",
                             $padding: "0.25rem 0.5rem",
                             $flex: "1",
-                            $backgroundColor: planPeriod === "month" ? darken(settings.theme.card.background, 8) : lighten(settings.theme.card.background, 2),
+                            ...planPeriod === "month" && {
+                              $backgroundColor: isLightBackground ? "hsla(0, 0%, 0%, 0.075)" : "hsla(0, 0%, 100%, 0.15)"
+                            },
                             $borderRadius: "2.5rem",
-                            children: /* @__PURE__ */ jsx10(Text, { $size: 12, $weight: planPeriod === "month" ? 600 : 400, children: "Billed monthly" })
+                            children: /* @__PURE__ */ jsx10(
+                              Text,
+                              {
+                                $font: theme.typography.text.fontFamily,
+                                $size: 14,
+                                $weight: planPeriod === "month" ? 600 : 400,
+                                $color: theme.typography.text.color,
+                                children: "Billed monthly"
+                              }
+                            )
                           }
                         ),
                         /* @__PURE__ */ jsx10(
@@ -10240,15 +10424,35 @@ var CheckoutDialog = () => {
                             $alignItems: "center",
                             $padding: "0.25rem 0.5rem",
                             $flex: "1",
-                            $backgroundColor: planPeriod === "year" ? darken(settings.theme.card.background, 8) : lighten(settings.theme.card.background, 2),
+                            ...planPeriod === "year" && {
+                              $backgroundColor: isLightBackground ? "hsla(0, 0%, 0%, 0.075)" : "hsla(0, 0%, 100%, 0.15)"
+                            },
                             $borderRadius: "2.5rem",
-                            children: /* @__PURE__ */ jsx10(Text, { $size: 12, $weight: planPeriod === "year" ? 600 : 400, children: "Billed yearly" })
+                            children: /* @__PURE__ */ jsx10(
+                              Text,
+                              {
+                                $font: theme.typography.text.fontFamily,
+                                $size: 14,
+                                $weight: planPeriod === "year" ? 600 : 400,
+                                $color: theme.typography.text.color,
+                                children: "Billed yearly"
+                              }
+                            )
                           }
                         )
                       ]
                     }
                   ),
-                  savingsPercentage > 0 && /* @__PURE__ */ jsx10(Box, { children: /* @__PURE__ */ jsx10(Text, { $size: 11, $color: "#194BFB", children: planPeriod === "month" ? `Save up to ${savingsPercentage}% with yearly billing` : `You are saving ${savingsPercentage}% with yearly billing` }) })
+                  savingsPercentage > 0 && /* @__PURE__ */ jsx10(Box, { children: /* @__PURE__ */ jsx10(
+                    Text,
+                    {
+                      $font: theme.typography.text.fontFamily,
+                      $size: 11,
+                      $weight: theme.typography.text.fontWeight,
+                      $color: theme.primary,
+                      children: planPeriod === "month" ? `Save up to ${savingsPercentage}% with yearly billing` : `You are saving ${savingsPercentage}% with yearly billing`
+                    }
+                  ) })
                 ]
               }
             ),
@@ -10262,85 +10466,106 @@ var CheckoutDialog = () => {
                 $height: "auto",
                 $padding: "1.5rem",
                 $flex: "1",
-                $borderBottom: "1px solid #DEDEDE",
+                $borderBottomWidth: "1px",
+                $borderStyle: "solid",
+                $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.1)" : "hsla(0, 0%, 100%, 0.2)",
                 children: [
-                  /* @__PURE__ */ jsx10(Box, { children: /* @__PURE__ */ jsx10(Text, { $size: 14, $color: "#5D5D5D", children: "Plan" }) }),
-                  /* @__PURE__ */ jsxs5(
-                    Flex,
+                  /* @__PURE__ */ jsx10(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsx10(
+                    Text,
                     {
-                      $flexDirection: "column",
-                      $fontSize: "0.875rem",
-                      $color: "#5D5D5D",
-                      $gap: "0.5rem",
-                      children: [
-                        currentPlan && /* @__PURE__ */ jsxs5(
-                          Flex,
-                          {
-                            $alignItems: "center",
-                            $justifyContent: "space-between",
-                            $fontSize: "0.875rem",
-                            $color: "#5D5D5D",
-                            children: [
-                              /* @__PURE__ */ jsx10(Flex, { $fontSize: "0.875rem", $color: "#5D5D5D", children: currentPlan.name }),
-                              typeof currentPlan.planPrice === "number" && currentPlan.planPeriod && /* @__PURE__ */ jsxs5(Flex, { $fontSize: "0.75rem", $color: "#000000", children: [
-                                formatCurrency(currentPlan.planPrice),
-                                "/",
-                                currentPlan.planPeriod
-                              ] })
-                            ]
-                          }
-                        ),
-                        selectedPlan && /* @__PURE__ */ jsxs5(Fragment, { children: [
-                          /* @__PURE__ */ jsx10(
-                            Box,
+                      $font: theme.typography.text.fontFamily,
+                      $size: 14,
+                      $weight: theme.typography.text.fontWeight,
+                      $color: theme.typography.text.color,
+                      children: "Plan"
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsxs5(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
+                    currentPlan && /* @__PURE__ */ jsxs5(Flex, { $justifyContent: "space-between", $alignItems: "center", children: [
+                      /* @__PURE__ */ jsx10(
+                        Flex,
+                        {
+                          ...selectedPlan && {
+                            $opacity: "0.625",
+                            $textDecoration: "line-through"
+                          },
+                          children: /* @__PURE__ */ jsx10(
+                            Text,
                             {
-                              $width: "100%",
-                              $textAlign: "left",
-                              $opacity: "50%",
-                              $marginBottom: "-0.25rem",
-                              $marginTop: "-0.25rem",
-                              children: /* @__PURE__ */ jsx10(
-                                Icon2,
-                                {
-                                  name: "arrow-down",
-                                  style: {
-                                    display: "inline-block"
-                                  }
-                                }
-                              )
+                              $font: theme.typography.heading4.fontFamily,
+                              $size: theme.typography.heading4.fontSize,
+                              $weight: theme.typography.heading4.fontWeight,
+                              $color: theme.typography.heading4.color,
+                              children: currentPlan.name
                             }
-                          ),
-                          /* @__PURE__ */ jsxs5(
-                            Flex,
+                          )
+                        }
+                      ),
+                      typeof currentPlan.planPrice === "number" && currentPlan.planPeriod && /* @__PURE__ */ jsx10(Flex, { children: /* @__PURE__ */ jsxs5(
+                        Text,
+                        {
+                          $font: theme.typography.text.fontFamily,
+                          $size: theme.typography.text.fontSize,
+                          $weight: theme.typography.text.fontWeight,
+                          $color: theme.typography.text.color,
+                          children: [
+                            formatCurrency(currentPlan.planPrice),
+                            "/",
+                            currentPlan.planPeriod
+                          ]
+                        }
+                      ) })
+                    ] }),
+                    selectedPlan && /* @__PURE__ */ jsxs5(Fragment, { children: [
+                      /* @__PURE__ */ jsx10(
+                        Box,
+                        {
+                          $width: "100%",
+                          $textAlign: "left",
+                          $opacity: "50%",
+                          $marginBottom: "-0.25rem",
+                          $marginTop: "-0.25rem",
+                          children: /* @__PURE__ */ jsx10(
+                            Icon2,
                             {
-                              $alignItems: "center",
-                              $justifyContent: "space-between",
-                              $fontSize: "0.875rem",
-                              $color: "#5D5D5D",
-                              children: [
-                                /* @__PURE__ */ jsx10(
-                                  Flex,
-                                  {
-                                    $fontSize: "0.875rem",
-                                    $color: "#000000",
-                                    $fontWeight: "600",
-                                    children: selectedPlan.name
-                                  }
-                                ),
-                                /* @__PURE__ */ jsxs5(Flex, { $fontSize: "0.75rem", $color: "#000000", children: [
-                                  formatCurrency(
-                                    (planPeriod === "month" ? selectedPlan.monthlyPrice : selectedPlan.yearlyPrice)?.price ?? 0
-                                  ),
-                                  "/",
-                                  planPeriod
-                                ] })
-                              ]
+                              name: "arrow-down",
+                              style: {
+                                display: "inline-block"
+                              }
                             }
                           )
-                        ] })
-                      ]
-                    }
-                  )
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs5(Flex, { $justifyContent: "space-between", $alignItems: "center", children: [
+                        /* @__PURE__ */ jsx10(Flex, { children: /* @__PURE__ */ jsx10(
+                          Text,
+                          {
+                            $font: theme.typography.heading4.fontFamily,
+                            $size: theme.typography.heading4.fontSize,
+                            $weight: theme.typography.heading4.fontWeight,
+                            $color: theme.typography.heading4.color,
+                            children: selectedPlan.name
+                          }
+                        ) }),
+                        /* @__PURE__ */ jsx10(Flex, { children: /* @__PURE__ */ jsxs5(
+                          Text,
+                          {
+                            $font: theme.typography.text.fontFamily,
+                            $size: theme.typography.text.fontSize,
+                            $weight: theme.typography.text.fontWeight,
+                            $color: theme.typography.text.color,
+                            children: [
+                              formatCurrency(
+                                (planPeriod === "month" ? selectedPlan.monthlyPrice : selectedPlan.yearlyPrice)?.price ?? 0
+                              ),
+                              "/",
+                              planPeriod
+                            ]
+                          }
+                        ) })
+                      ] })
+                    ] })
+                  ] })
                 ]
               }
             ),
@@ -10349,47 +10574,57 @@ var CheckoutDialog = () => {
               {
                 $flexDirection: "column",
                 $position: "relative",
-                $gap: "0.75rem",
+                $gap: "1rem",
                 $width: "100%",
                 $height: "auto",
                 $padding: "1.5rem",
                 children: [
-                  selectedPlan && /* @__PURE__ */ jsxs5(
-                    Flex,
-                    {
-                      $fontSize: "0.75rem",
-                      $color: "#5D5D5D",
-                      $justifyContent: "space-between",
-                      children: [
-                        /* @__PURE__ */ jsxs5(Box, { $fontSize: "0.75rem", $color: "#5D5D5D", children: [
+                  selectedPlan && /* @__PURE__ */ jsxs5(Flex, { $justifyContent: "space-between", children: [
+                    /* @__PURE__ */ jsx10(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsxs5(
+                      Text,
+                      {
+                        $font: theme.typography.text.fontFamily,
+                        $size: theme.typography.text.fontSize,
+                        $weight: theme.typography.text.fontWeight,
+                        $color: theme.typography.text.color,
+                        children: [
                           planPeriod === "month" ? "Monthly" : "Yearly",
                           " total:",
                           " "
-                        ] }),
-                        /* @__PURE__ */ jsxs5(Box, { $fontSize: "0.75rem", $color: "#000000", children: [
+                        ]
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsx10(Box, { children: /* @__PURE__ */ jsxs5(
+                      Text,
+                      {
+                        $font: theme.typography.text.fontFamily,
+                        $size: theme.typography.text.fontSize,
+                        $weight: theme.typography.text.fontWeight,
+                        $color: theme.typography.text.color,
+                        children: [
                           formatCurrency(
                             (planPeriod === "month" ? selectedPlan.monthlyPrice : selectedPlan.yearlyPrice)?.price ?? 0
                           ),
                           "/",
                           planPeriod
-                        ] })
-                      ]
-                    }
-                  ),
+                        ]
+                      }
+                    ) })
+                  ] }),
                   checkoutStage === "plan" ? /* @__PURE__ */ jsx10(
                     StyledButton,
                     {
                       disabled: !selectedPlan,
-                      onClick: () => {
-                        setCheckoutStage("checkout");
+                      ...selectedPlan && {
+                        onClick: () => setCheckoutStage("checkout")
                       },
                       $size: "sm",
                       children: /* @__PURE__ */ jsxs5(
                         Flex,
                         {
                           $gap: "0.5rem",
-                          $alignItems: "center",
                           $justifyContent: "center",
+                          $alignItems: "center",
                           $padding: "0 1rem",
                           children: [
                             /* @__PURE__ */ jsx10(Text, { $align: "left", children: "Next: Checkout" }),
@@ -10418,10 +10653,11 @@ var CheckoutDialog = () => {
                             }
                           });
                           setIsCheckoutComplete(true);
-                        } catch (error) {
-                          console.error(error);
+                        } catch {
+                          setError(
+                            "Error processing payment. Please try a different payment method."
+                          );
                         } finally {
-                          setIsCheckoutComplete(true);
                           setIsLoading(false);
                         }
                       },
@@ -10429,7 +10665,26 @@ var CheckoutDialog = () => {
                       children: "Pay now"
                     }
                   ),
-                  /* @__PURE__ */ jsx10(Box, { $fontSize: "0.75rem", $color: "#5D5D5D", children: "Discounts & credits applied at checkout" })
+                  /* @__PURE__ */ jsx10(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsx10(
+                    Text,
+                    {
+                      $font: theme.typography.text.fontFamily,
+                      $size: theme.typography.text.fontSize,
+                      $weight: theme.typography.text.fontWeight,
+                      $color: theme.typography.text.color,
+                      children: "Discounts & credits applied at checkout"
+                    }
+                  ) }),
+                  error && /* @__PURE__ */ jsx10(Box, { children: /* @__PURE__ */ jsx10(
+                    Text,
+                    {
+                      $font: theme.typography.text.fontFamily,
+                      $size: theme.typography.text.fontSize,
+                      $weight: 500,
+                      $color: "#DB6669",
+                      children: error
+                    }
+                  ) })
                 ]
               }
             )
@@ -10465,15 +10720,16 @@ var resolveDesignProps = (props) => {
     },
     callToAction: {
       isVisible: props.callToAction?.isVisible ?? true,
-      buttonSize: props.callToAction?.buttonSize ?? "md",
+      buttonSize: props.callToAction?.buttonSize ?? "lg",
       buttonStyle: props.callToAction?.buttonStyle ?? "primary"
     }
   };
 };
 var PlanManager = forwardRef(({ children, className, portal, ...rest }, ref) => {
   const props = resolveDesignProps(rest);
-  const { data, settings, layout, stripe, setLayout } = useEmbed();
-  const { currentPlan, canChangePlan } = useMemo3(() => {
+  const theme = nt();
+  const { data, layout, stripe, setLayout } = useEmbed();
+  const { currentPlan, canChangePlan } = useMemo6(() => {
     return {
       currentPlan: data.company?.plan,
       canChangePlan: stripe !== null
@@ -10498,10 +10754,10 @@ var PlanManager = forwardRef(({ children, className, portal, ...rest }, ref) =>
                 /* @__PURE__ */ jsx11(Box, { $margin: "0 0 0.75rem", children: /* @__PURE__ */ jsx11(
                   Text,
                   {
-                    $font: settings.theme.typography[props.header.title.fontStyle].fontFamily,
-                    $size: settings.theme.typography[props.header.title.fontStyle].fontSize,
-                    $weight: settings.theme.typography[props.header.title.fontStyle].fontWeight,
-                    $color: settings.theme.typography[props.header.title.fontStyle].color,
+                    $font: theme.typography[props.header.title.fontStyle].fontFamily,
+                    $size: theme.typography[props.header.title.fontStyle].fontSize,
+                    $weight: theme.typography[props.header.title.fontStyle].fontWeight,
+                    $color: theme.typography[props.header.title.fontStyle].color,
                     $lineHeight: 1,
                     children: currentPlan.name
                   }
@@ -10509,10 +10765,10 @@ var PlanManager = forwardRef(({ children, className, portal, ...rest }, ref) =>
                 props.header.description.isVisible && currentPlan.description && /* @__PURE__ */ jsx11(
                   Text,
                   {
-                    $font: settings.theme.typography[props.header.description.fontStyle].fontFamily,
-                    $size: settings.theme.typography[props.header.description.fontStyle].fontSize,
-                    $weight: settings.theme.typography[props.header.description.fontStyle].fontWeight,
-                    $color: settings.theme.typography[props.header.description.fontStyle].color,
+                    $font: theme.typography[props.header.description.fontStyle].fontFamily,
+                    $size: theme.typography[props.header.description.fontStyle].fontSize,
+                    $weight: theme.typography[props.header.description.fontStyle].fontWeight,
+                    $color: theme.typography[props.header.description.fontStyle].color,
                     children: currentPlan.description
                   }
                 )
@@ -10520,10 +10776,10 @@ var PlanManager = forwardRef(({ children, className, portal, ...rest }, ref) =>
               props.header.price.isVisible && typeof currentPlan.planPrice === "number" && currentPlan.planPeriod && /* @__PURE__ */ jsxs6(
                 Text,
                 {
-                  $font: settings.theme.typography[props.header.price.fontStyle].fontFamily,
-                  $size: settings.theme.typography[props.header.price.fontStyle].fontSize,
-                  $weight: settings.theme.typography[props.header.price.fontStyle].fontWeight,
-                  $color: settings.theme.typography[props.header.price.fontStyle].color,
+                  $font: theme.typography[props.header.price.fontStyle].fontFamily,
+                  $size: theme.typography[props.header.price.fontStyle].fontSize,
+                  $weight: theme.typography[props.header.price.fontStyle].fontWeight,
+                  $color: theme.typography[props.header.price.fontStyle].color,
                   children: [
                     formatCurrency(currentPlan.planPrice),
                     "/",
@@ -10544,15 +10800,7 @@ var PlanManager = forwardRef(({ children, className, portal, ...rest }, ref) =>
         },
         $size: props.callToAction.buttonSize,
         $color: props.callToAction.buttonStyle,
-        children: /* @__PURE__ */ jsx11(
-          Text,
-          {
-            $font: settings.theme.typography.text.fontFamily,
-            $size: settings.theme.typography.text.fontSize,
-            $weight: settings.theme.typography.text.fontWeight,
-            children: "Change Plan"
-          }
-        )
+        children: "Change Plan"
       }
     ),
     canChangePlan && layout === "checkout" && createPortal(/* @__PURE__ */ jsx11(CheckoutDialog, {}), portal || document.body)
@@ -10560,7 +10808,7 @@ var PlanManager = forwardRef(({ children, className, portal, ...rest }, ref) =>
 });
 
 // src/components/elements/included-features/IncludedFeatures.tsx
-import { forwardRef as forwardRef2, useMemo as useMemo4 } from "react";
+import { forwardRef as forwardRef2, useMemo as useMemo7 } from "react";
 import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
 function resolveDesignProps2(props) {
   return {
@@ -10571,12 +10819,12 @@ function resolveDesignProps2(props) {
     },
     icons: {
       isVisible: props.icons?.isVisible ?? true,
-      fontStyle: props.icons?.fontStyle ?? "heading3",
+      fontStyle: props.icons?.fontStyle ?? "heading5",
       style: props.icons?.style ?? "light"
     },
     entitlement: {
       isVisible: props.entitlement?.isVisible ?? true,
-      fontStyle: props.entitlement?.fontStyle ?? "heading5"
+      fontStyle: props.entitlement?.fontStyle ?? "text"
     },
     usage: {
       isVisible: props.usage?.isVisible ?? true,
@@ -10586,8 +10834,9 @@ function resolveDesignProps2(props) {
 }
 var IncludedFeatures = forwardRef2(({ className, ...rest }, ref) => {
   const props = resolveDesignProps2(rest);
-  const { data, settings } = useEmbed();
-  const features = useMemo4(() => {
+  const theme = nt();
+  const { data } = useEmbed();
+  const features = useMemo7(() => {
     return (data.featureUsage?.features || []).map(
       ({
         access,
@@ -10614,14 +10863,17 @@ var IncludedFeatures = forwardRef2(({ className, ...rest }, ref) => {
       }
     );
   }, [data.featureUsage]);
+  const isLightBackground = useMemo7(() => {
+    return hexToHSL(theme.card.background).l > 50;
+  }, [theme.card.background]);
   return /* @__PURE__ */ jsxs7(Flex, { ref, className, $flexDirection: "column", $gap: "1.5rem", children: [
     props.header.isVisible && /* @__PURE__ */ jsx12(Box, { children: /* @__PURE__ */ jsx12(
       Text,
       {
-        $font: settings.theme.typography[props.header.fontStyle].fontFamily,
-        $size: settings.theme.typography[props.header.fontStyle].fontSize,
-        $weight: settings.theme.typography[props.header.fontStyle].fontWeight,
-        $color: settings.theme.typography[props.header.fontStyle].color,
+        $font: theme.typography[props.header.fontStyle].fontFamily,
+        $size: theme.typography[props.header.fontStyle].fontSize,
+        $weight: theme.typography[props.header.fontStyle].fontWeight,
+        $color: theme.typography[props.header.fontStyle].color,
         children: props.header.text
       }
     ) }),
@@ -10647,18 +10899,18 @@ var IncludedFeatures = forwardRef2(({ className, ...rest }, ref) => {
                       name: feature.icon,
                       size: "sm",
                       colors: [
-                        settings.theme.primary,
-                        `${hexToHSL(settings.theme.card.background).l > 50 ? darken(settings.theme.card.background, 10) : lighten(settings.theme.card.background, 20)}`
+                        theme.primary,
+                        isLightBackground ? "hsla(0, 0%, 0%, 0.0625)" : "hsla(0, 0%, 100%, 0.25)"
                       ]
                     }
                   ),
                   feature?.name && /* @__PURE__ */ jsx12(Flex, { $alignItems: "center", children: /* @__PURE__ */ jsx12(
                     Text,
                     {
-                      $font: settings.theme.typography[props.icons.fontStyle].fontFamily,
-                      $size: settings.theme.typography[props.icons.fontStyle].fontSize,
-                      $weight: settings.theme.typography[props.icons.fontStyle].fontWeight,
-                      $color: settings.theme.typography[props.icons.fontStyle].color,
+                      $font: theme.typography[props.icons.fontStyle].fontFamily,
+                      $size: theme.typography[props.icons.fontStyle].fontSize,
+                      $weight: theme.typography[props.icons.fontStyle].fontWeight,
+                      $color: theme.typography[props.icons.fontStyle].color,
                       children: feature.name
                     }
                   ) })
@@ -10668,10 +10920,11 @@ var IncludedFeatures = forwardRef2(({ className, ...rest }, ref) => {
                     Text,
                     {
                       as: Box,
-                      $font: settings.theme.typography[props.entitlement.fontStyle].fontFamily,
-                      $size: settings.theme.typography[props.entitlement.fontStyle].fontSize,
-                      $weight: settings.theme.typography[props.entitlement.fontStyle].fontWeight,
-                      $color: settings.theme.typography[props.entitlement.fontStyle].color,
+                      $font: theme.typography[props.entitlement.fontStyle].fontFamily,
+                      $size: theme.typography[props.entitlement.fontStyle].fontSize,
+                      $weight: theme.typography[props.entitlement.fontStyle].fontWeight,
+                      $lineHeight: 1.5,
+                      $color: theme.typography[props.entitlement.fontStyle].color,
                       children: typeof allocation === "number" ? `${allocation} ${feature.name}` : `Unlimited ${feature.name}`
                     }
                   ),
@@ -10679,10 +10932,11 @@ var IncludedFeatures = forwardRef2(({ className, ...rest }, ref) => {
                     Text,
                     {
                       as: Box,
-                      $font: settings.theme.typography[props.usage.fontStyle].fontFamily,
-                      $size: settings.theme.typography[props.usage.fontStyle].fontSize,
-                      $weight: settings.theme.typography[props.usage.fontStyle].fontWeight,
-                      $color: settings.theme.typography[props.usage.fontStyle].color,
+                      $font: theme.typography[props.usage.fontStyle].fontFamily,
+                      $size: theme.typography[props.usage.fontStyle].fontSize,
+                      $weight: theme.typography[props.usage.fontStyle].fontWeight,
+                      $lineHeight: 1.5,
+                      $color: theme.typography[props.usage.fontStyle].color,
                       children: typeof allocation === "number" ? `${usage} of ${allocation} used` : `${usage} used`
                     }
                   )
@@ -10699,7 +10953,7 @@ var IncludedFeatures = forwardRef2(({ className, ...rest }, ref) => {
 });
 
 // src/components/elements/metered-features/MeteredFeatures.tsx
-import { forwardRef as forwardRef3, useMemo as useMemo5 } from "react";
+import { forwardRef as forwardRef3, useMemo as useMemo8 } from "react";
 import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
 function resolveDesignProps3(props) {
   return {
@@ -10731,8 +10985,9 @@ function resolveDesignProps3(props) {
 }
 var MeteredFeatures = forwardRef3(({ className, ...rest }, ref) => {
   const props = resolveDesignProps3(rest);
-  const { data, settings } = useEmbed();
-  const features = useMemo5(() => {
+  const theme = nt();
+  const { data } = useEmbed();
+  const features = useMemo8(() => {
     return (data.featureUsage?.features || []).map(
       ({
         access,
@@ -10775,10 +11030,10 @@ var MeteredFeatures = forwardRef3(({ className, ...rest }, ref) => {
                   Text,
                   {
                     as: Box,
-                    $font: settings.theme.typography[props.header.fontStyle].fontFamily,
-                    $size: settings.theme.typography[props.header.fontStyle].fontSize,
-                    $weight: settings.theme.typography[props.header.fontStyle].fontWeight,
-                    $color: settings.theme.typography[props.header.fontStyle].color,
+                    $font: theme.typography[props.header.fontStyle].fontFamily,
+                    $size: theme.typography[props.header.fontStyle].fontSize,
+                    $weight: theme.typography[props.header.fontStyle].fontWeight,
+                    $color: theme.typography[props.header.fontStyle].color,
                     children: feature.name
                   }
                 ),
@@ -10786,10 +11041,10 @@ var MeteredFeatures = forwardRef3(({ className, ...rest }, ref) => {
                   Text,
                   {
                     as: Box,
-                    $font: settings.theme.typography[props.description.fontStyle].fontFamily,
-                    $size: settings.theme.typography[props.description.fontStyle].fontSize,
-                    $weight: settings.theme.typography[props.description.fontStyle].fontWeight,
-                    $color: settings.theme.typography[props.description.fontStyle].color,
+                    $font: theme.typography[props.description.fontStyle].fontFamily,
+                    $size: theme.typography[props.description.fontStyle].fontSize,
+                    $weight: theme.typography[props.description.fontStyle].fontWeight,
+                    $color: theme.typography[props.description.fontStyle].color,
                     children: feature.description
                   }
                 )
@@ -10799,10 +11054,10 @@ var MeteredFeatures = forwardRef3(({ className, ...rest }, ref) => {
                   Text,
                   {
                     as: Box,
-                    $font: settings.theme.typography[props.allocation.fontStyle].fontFamily,
-                    $size: settings.theme.typography[props.allocation.fontStyle].fontSize,
-                    $weight: settings.theme.typography[props.allocation.fontStyle].fontWeight,
-                    $color: settings.theme.typography[props.allocation.fontStyle].color,
+                    $font: theme.typography[props.allocation.fontStyle].fontFamily,
+                    $size: theme.typography[props.allocation.fontStyle].fontSize,
+                    $weight: theme.typography[props.allocation.fontStyle].fontWeight,
+                    $color: theme.typography[props.allocation.fontStyle].color,
                     children: typeof allocation === "number" ? `${allocation} ${feature.name}` : `Unlimited ${feature.name}`
                   }
                 ),
@@ -10810,10 +11065,10 @@ var MeteredFeatures = forwardRef3(({ className, ...rest }, ref) => {
                   Text,
                   {
                     as: Box,
-                    $font: settings.theme.typography[props.usage.fontStyle].fontFamily,
-                    $size: settings.theme.typography[props.usage.fontStyle].fontSize,
-                    $weight: settings.theme.typography[props.usage.fontStyle].fontWeight,
-                    $color: settings.theme.typography[props.usage.fontStyle].color,
+                    $font: theme.typography[props.usage.fontStyle].fontFamily,
+                    $size: theme.typography[props.usage.fontStyle].fontSize,
+                    $weight: theme.typography[props.usage.fontStyle].fontWeight,
+                    $color: theme.typography[props.usage.fontStyle].color,
                     children: typeof allocation === "number" ? `${usage} of ${allocation} used` : `${usage} used`
                   }
                 )
@@ -10837,7 +11092,7 @@ var MeteredFeatures = forwardRef3(({ className, ...rest }, ref) => {
 });
 
 // src/components/elements/upcoming-bill/UpcomingBill.tsx
-import { forwardRef as forwardRef4, useMemo as useMemo6 } from "react";
+import { forwardRef as forwardRef4, useMemo as useMemo9 } from "react";
 import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
 function resolveDesignProps4(props) {
   return {
@@ -10859,8 +11114,9 @@ function resolveDesignProps4(props) {
 }
 var UpcomingBill = forwardRef4(({ className, ...rest }, ref) => {
   const props = resolveDesignProps4(rest);
-  const { data, settings, stripe } = useEmbed();
-  const { upcomingInvoice } = useMemo6(() => {
+  const theme = nt();
+  const { data, stripe } = useEmbed();
+  const { upcomingInvoice } = useMemo9(() => {
     return {
       upcomingInvoice: {
         ...data.upcomingInvoice?.amountDue && {
@@ -10875,7 +11131,7 @@ var UpcomingBill = forwardRef4(({ className, ...rest }, ref) => {
       }
     };
   }, [data.subscription, data.upcomingInvoice]);
-  if (!stripe || !data.upcomingInvoice) {
+  if (!stripe || !upcomingInvoice.amountDue || !upcomingInvoice.dueDate) {
     return null;
   }
   return /* @__PURE__ */ jsxs9("div", { ref, className, children: [
@@ -10888,10 +11144,10 @@ var UpcomingBill = forwardRef4(({ className, ...rest }, ref) => {
         children: /* @__PURE__ */ jsxs9(
           Text,
           {
-            $font: settings.theme.typography[props.header.fontStyle].fontFamily,
-            $size: settings.theme.typography[props.header.fontStyle].fontSize,
-            $weight: settings.theme.typography[props.header.fontStyle].fontWeight,
-            $color: settings.theme.typography[props.header.fontStyle].color,
+            $font: theme.typography[props.header.fontStyle].fontFamily,
+            $size: theme.typography[props.header.fontStyle].fontSize,
+            $weight: theme.typography[props.header.fontStyle].fontWeight,
+            $color: theme.typography[props.header.fontStyle].color,
             children: [
               props.header.prefix,
               " ",
@@ -10905,10 +11161,10 @@ var UpcomingBill = forwardRef4(({ className, ...rest }, ref) => {
       props.price.isVisible && /* @__PURE__ */ jsx14(Flex, { $alignItems: "end", $flexGrow: "1", children: /* @__PURE__ */ jsx14(
         Text,
         {
-          $font: settings.theme.typography[props.price.fontStyle].fontFamily,
-          $size: settings.theme.typography[props.price.fontStyle].fontSize,
-          $weight: settings.theme.typography[props.price.fontStyle].fontWeight,
-          $color: settings.theme.typography[props.price.fontStyle].color,
+          $font: theme.typography[props.price.fontStyle].fontFamily,
+          $size: theme.typography[props.price.fontStyle].fontSize,
+          $weight: theme.typography[props.price.fontStyle].fontWeight,
+          $color: theme.typography[props.price.fontStyle].color,
           $lineHeight: 1,
           children: formatCurrency(upcomingInvoice.amountDue)
         }
@@ -10916,10 +11172,10 @@ var UpcomingBill = forwardRef4(({ className, ...rest }, ref) => {
       /* @__PURE__ */ jsx14(Box, { $maxWidth: "10rem", $lineHeight: "1", $textAlign: "right", children: /* @__PURE__ */ jsx14(
         Text,
         {
-          $font: settings.theme.typography[props.contractEndDate.fontStyle].fontFamily,
-          $size: settings.theme.typography[props.contractEndDate.fontStyle].fontSize,
-          $weight: settings.theme.typography[props.contractEndDate.fontStyle].fontWeight,
-          $color: settings.theme.typography[props.contractEndDate.fontStyle].color,
+          $font: theme.typography[props.contractEndDate.fontStyle].fontFamily,
+          $size: theme.typography[props.contractEndDate.fontStyle].fontSize,
+          $weight: theme.typography[props.contractEndDate.fontStyle].fontWeight,
+          $color: theme.typography[props.contractEndDate.fontStyle].color,
           children: "Estimated monthly bill."
         }
       ) })
@@ -10928,7 +11184,7 @@ var UpcomingBill = forwardRef4(({ className, ...rest }, ref) => {
 });
 
 // src/components/elements/payment-method/PaymentMethod.tsx
-import { forwardRef as forwardRef5, useMemo as useMemo7 } from "react";
+import { forwardRef as forwardRef5, useMemo as useMemo10 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
 import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
 var resolveDesignProps5 = (props) => {
@@ -10944,8 +11200,9 @@ var resolveDesignProps5 = (props) => {
 };
 var PaymentMethod = forwardRef5(({ children, className, portal, ...rest }, ref) => {
   const props = resolveDesignProps5(rest);
-  const { data, settings, stripe, layout } = useEmbed();
-  const paymentMethod = useMemo7(() => {
+  const theme = nt();
+  const { data, stripe, layout } = useEmbed();
+  const paymentMethod = useMemo10(() => {
     const { cardLast4, cardExpMonth, cardExpYear } = data.subscription?.paymentMethod || {};
     let monthsToExpiration;
     if (typeof cardExpYear === "number" && typeof cardExpMonth === "number") {
@@ -10961,7 +11218,10 @@ var PaymentMethod = forwardRef5(({ children, className, portal, ...rest }, ref)
       monthsToExpiration
     };
   }, [data.subscription?.paymentMethod]);
-  if (!stripe || !data.subscription?.paymentMethod) {
+  const isLightBackground = useMemo10(() => {
+    return hexToHSL(theme.card.background).l > 50;
+  }, [theme.card.background]);
+  if (!stripe || !paymentMethod.cardLast4) {
     return null;
   }
   return /* @__PURE__ */ jsxs10("div", { ref, className, children: [
@@ -10975,17 +11235,17 @@ var PaymentMethod = forwardRef5(({ children, className, portal, ...rest }, ref)
           /* @__PURE__ */ jsx15(
             Text,
             {
-              $font: settings.theme.typography[props.header.fontStyle].fontFamily,
-              $size: settings.theme.typography[props.header.fontStyle].fontSize,
-              $weight: settings.theme.typography[props.header.fontStyle].fontWeight,
-              $color: settings.theme.typography[props.header.fontStyle].color,
+              $font: theme.typography[props.header.fontStyle].fontFamily,
+              $size: theme.typography[props.header.fontStyle].fontSize,
+              $weight: theme.typography[props.header.fontStyle].fontWeight,
+              $color: theme.typography[props.header.fontStyle].color,
               children: "Payment Method"
             }
           ),
           typeof paymentMethod.monthsToExpiration === "number" && Math.abs(paymentMethod.monthsToExpiration) < 4 && /* @__PURE__ */ jsx15(
             Text,
             {
-              $font: settings.theme.typography.text.fontFamily,
+              $font: theme.typography.text.fontFamily,
               $size: 14,
               $color: "#DB6769",
               children: paymentMethod.monthsToExpiration > 0 ? `Expires in ${paymentMethod.monthsToExpiration} mo` : "Expired"
@@ -11000,10 +11260,10 @@ var PaymentMethod = forwardRef5(({ children, className, portal, ...rest }, ref)
         $justifyContent: "space-between",
         $alignItems: "center",
         $margin: "0 0 1rem",
-        $background: `${hexToHSL(settings.theme.card.background).l > 50 ? darken(settings.theme.card.background, 10) : lighten(settings.theme.card.background, 20)}`,
+        $backgroundColor: isLightBackground ? "hsla(0, 0%, 0%, 0.0625)" : "hsla(0, 0%, 100%, 0.125)",
         $padding: "0.375rem 1rem",
         $borderRadius: "9999px",
-        children: /* @__PURE__ */ jsxs10(Text, { $font: settings.theme.typography.text.fontFamily, $size: 14, children: [
+        children: /* @__PURE__ */ jsxs10(Text, { $font: theme.typography.text.fontFamily, $size: 14, children: [
           "\u{1F4B3} Card ending in ",
           paymentMethod.cardLast4
         ] })
@@ -11222,7 +11482,7 @@ var PaymentMethod = forwardRef5(({ children, className, portal, ...rest }, ref)
 });
 
 // src/components/elements/invoices/Invoices.tsx
-import { forwardRef as forwardRef6, useMemo as useMemo8 } from "react";
+import { forwardRef as forwardRef6, useMemo as useMemo11 } from "react";
 import { jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
 function resolveDesignProps6(props) {
   return {
@@ -11250,8 +11510,8 @@ function resolveDesignProps6(props) {
 }
 var Invoices = forwardRef6(({ className, ...rest }, ref) => {
   const props = resolveDesignProps6(rest);
-  const { settings } = useEmbed();
-  const { invoices } = useMemo8(() => {
+  const theme = nt();
+  const { invoices } = useMemo11(() => {
     return {
       invoices: [
         {
@@ -11269,10 +11529,10 @@ var Invoices = forwardRef6(({ className, ...rest }, ref) => {
     props.header.isVisible && /* @__PURE__ */ jsx16(Flex, { $justifyContent: "space-between", $alignItems: "center", children: /* @__PURE__ */ jsx16(
       Text,
       {
-        $font: settings.theme.typography[props.header.fontStyle].fontFamily,
-        $size: settings.theme.typography[props.header.fontStyle].fontSize,
-        $weight: settings.theme.typography[props.header.fontStyle].fontWeight,
-        $color: settings.theme.typography[props.header.fontStyle].color,
+        $font: theme.typography[props.header.fontStyle].fontFamily,
+        $size: theme.typography[props.header.fontStyle].fontSize,
+        $weight: theme.typography[props.header.fontStyle].fontWeight,
+        $color: theme.typography[props.header.fontStyle].color,
         children: "Invoices"
       }
     ) }),
@@ -11284,20 +11544,20 @@ var Invoices = forwardRef6(({ className, ...rest }, ref) => {
         props.date.isVisible && /* @__PURE__ */ jsx16(
           Text,
           {
-            $font: settings.theme.typography[props.date.fontStyle].fontFamily,
-            $size: settings.theme.typography[props.date.fontStyle].fontSize,
-            $weight: settings.theme.typography[props.date.fontStyle].fontWeight,
-            $color: settings.theme.typography[props.date.fontStyle].color,
+            $font: theme.typography[props.date.fontStyle].fontFamily,
+            $size: theme.typography[props.date.fontStyle].fontSize,
+            $weight: theme.typography[props.date.fontStyle].fontWeight,
+            $color: theme.typography[props.date.fontStyle].color,
             children: toPrettyDate(date)
           }
         ),
         props.amount.isVisible && /* @__PURE__ */ jsxs11(
           Text,
           {
-            $font: settings.theme.typography[props.amount.fontStyle].fontFamily,
-            $size: settings.theme.typography[props.amount.fontStyle].fontSize,
-            $weight: settings.theme.typography[props.amount.fontStyle].fontWeight,
-            $color: settings.theme.typography[props.amount.fontStyle].color,
+            $font: theme.typography[props.amount.fontStyle].fontFamily,
+            $size: theme.typography[props.amount.fontStyle].fontSize,
+            $weight: theme.typography[props.amount.fontStyle].fontWeight,
+            $color: theme.typography[props.amount.fontStyle].color,
             children: [
               "$",
               amount
@@ -11311,10 +11571,10 @@ var Invoices = forwardRef6(({ className, ...rest }, ref) => {
       /* @__PURE__ */ jsx16(
         Text,
         {
-          $font: settings.theme.typography[props.collapse.fontStyle].fontFamily,
-          $size: settings.theme.typography[props.collapse.fontStyle].fontSize,
-          $weight: settings.theme.typography[props.collapse.fontStyle].fontWeight,
-          $color: settings.theme.typography[props.collapse.fontStyle].color,
+          $font: theme.typography[props.collapse.fontStyle].fontFamily,
+          $size: theme.typography[props.collapse.fontStyle].fontSize,
+          $weight: theme.typography[props.collapse.fontStyle].fontWeight,
+          $color: theme.typography[props.collapse.fontStyle].color,
           children: "See all"
         }
       )
@@ -11323,7 +11583,7 @@ var Invoices = forwardRef6(({ className, ...rest }, ref) => {
 });
 
 // src/components/embed/ComponentTree.tsx
-import { useEffect as useEffect5, useState as useState6 } from "react";
+import { useEffect as useEffect5, useState as useState4, Children } from "react";
 
 // src/components/embed/renderer.ts
 import { createElement } from "react";
@@ -11352,22 +11612,23 @@ var StyledViewport = dt.div`
 import { jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
 var Viewport = forwardRef8(
   ({ children, ...props }, ref) => {
-    const { settings, layout } = useEmbed();
+    const theme = nt();
+    const { layout } = useEmbed();
     return /* @__PURE__ */ jsx18(
       StyledViewport,
       {
         ref,
-        $numberOfColumns: settings.theme.numberOfColumns,
+        $numberOfColumns: theme.numberOfColumns,
         ...props,
         children: layout === "disabled" ? /* @__PURE__ */ jsx18(Box, { $width: "100%", children: /* @__PURE__ */ jsxs12(
           Flex,
           {
             $flexDirection: "column",
-            $padding: `${settings.theme.card.padding / 16}rem`,
+            $padding: `${theme.card.padding / TEXT_BASE_SIZE}rem`,
             $width: "100%",
             $height: "auto",
-            $borderRadius: `${settings.theme.card.borderRadius / 16}rem`,
-            $backgroundColor: settings.theme.card.background,
+            $borderRadius: `${theme.card.borderRadius / TEXT_BASE_SIZE}rem`,
+            $backgroundColor: theme.card.background,
             $alignItems: "center",
             $justifyContent: "center",
             children: [
@@ -11375,10 +11636,10 @@ var Viewport = forwardRef8(
                 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,
+                  $fontSize: `${theme.typography.heading1.fontSize / TEXT_BASE_SIZE}rem`,
+                  $fontFamily: theme.typography.heading1.fontFamily,
+                  $fontWeight: theme.typography.heading1.fontWeight,
+                  $color: theme.typography.heading1.color,
                   children: "Coming soon"
                 }
               ),
@@ -11386,10 +11647,10 @@ var Viewport = forwardRef8(
                 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,
+                  $fontSize: `${theme.typography.text.fontSize / TEXT_BASE_SIZE}rem`,
+                  $fontFamily: theme.typography.text.fontFamily,
+                  $fontWeight: theme.typography.text.fontWeight,
+                  $color: theme.typography.text.color,
                   children: "The plan manager will be back very soon."
                 }
               )
@@ -11434,7 +11695,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, 20);
+      const borderColor = l2 > 50 ? "hsla(0, 0%, 0%, 0.1)" : "hsla(0, 0%, 100%, 0.2)";
       const borderRadius = `${$borderRadius / TEXT_BASE_SIZE}rem`;
       const boxShadow = "0px 1px 20px 0px #1018280F, 0px 1px 3px 0px #1018281A";
       if ($sectionLayout === "merged") {
@@ -11469,16 +11730,16 @@ var StyledCard = dt.div(
 import { jsx as jsx19 } from "react/jsx-runtime";
 var Card = forwardRef9(
   ({ children, className }, ref) => {
-    const { settings } = useEmbed();
+    const theme = nt();
     return /* @__PURE__ */ jsx19(
       StyledCard,
       {
         ref,
         className,
-        $sectionLayout: settings.theme?.sectionLayout,
-        $borderRadius: settings.theme?.card?.borderRadius,
-        $padding: settings.theme?.card?.padding,
-        $shadow: settings.theme?.card?.hasShadow,
+        $sectionLayout: theme?.sectionLayout,
+        $borderRadius: theme?.card?.borderRadius,
+        $padding: theme?.card?.padding,
+        $shadow: theme?.card?.hasShadow,
         children
       }
     );
@@ -11550,78 +11811,84 @@ var spin = mt`
     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;
-  `;
-});
+var Loader = dt.div`
+  border: ${({ theme }) => `${4 / TEXT_BASE_SIZE}rem solid hsla(0, 0%, ${hexToHSL(theme.card.background).l > 50 ? 0 : 100}%, 0.1)`};
+  border-top: ${4 / TEXT_BASE_SIZE}rem solid ${({ theme }) => theme.primary};
+  border-radius: 50%;
+  width: ${40 / TEXT_BASE_SIZE}rem;
+  height: ${40 / TEXT_BASE_SIZE}rem;
+  animation: ${spin} 1.5s linear infinite;
+  display: inline-block;
+`;
 
 // src/components/embed/ComponentTree.tsx
 import { Fragment as Fragment2, jsx as jsx21, jsxs as jsxs13 } from "react/jsx-runtime";
-var ComponentTree = () => {
-  const { error, nodes, settings } = useEmbed();
-  const [children, setChildren] = useState6(
-    /* @__PURE__ */ jsx21(
-      Flex,
-      {
-        $width: "100%",
-        $height: "100%",
-        $alignItems: "center",
-        $justifyContent: "center",
-        $padding: `${settings.theme.card.padding / 16}rem`,
-        children: /* @__PURE__ */ jsx21(Loader, {})
-      }
-    )
+var Loading = () => {
+  const theme = nt();
+  return /* @__PURE__ */ jsx21(
+    Flex,
+    {
+      $width: "100%",
+      $height: "100%",
+      $alignItems: "center",
+      $justifyContent: "center",
+      $padding: `${theme.card.padding / TEXT_BASE_SIZE}rem`,
+      children: /* @__PURE__ */ jsx21(Loader, {})
+    }
+  );
+};
+var Error2 = ({ message }) => {
+  const theme = nt();
+  return /* @__PURE__ */ jsxs13(
+    Flex,
+    {
+      $flexDirection: "column",
+      $padding: `${theme.card.padding / TEXT_BASE_SIZE}rem`,
+      $width: "100%",
+      $height: "auto",
+      $borderRadius: `${theme.card.borderRadius / TEXT_BASE_SIZE}rem`,
+      $backgroundColor: theme.card.background,
+      $alignItems: "center",
+      $justifyContent: "center",
+      children: [
+        /* @__PURE__ */ jsx21(
+          Box,
+          {
+            $marginBottom: `${8 / TEXT_BASE_SIZE}rem`,
+            $fontSize: `${theme.typography.heading1.fontSize / TEXT_BASE_SIZE}rem`,
+            $fontFamily: theme.typography.heading1.fontFamily,
+            $fontWeight: theme.typography.heading1.fontWeight,
+            $color: theme.typography.heading1.color,
+            children: "404 Error"
+          }
+        ),
+        /* @__PURE__ */ jsx21(
+          Box,
+          {
+            $marginBottom: `${8 / TEXT_BASE_SIZE}rem`,
+            $fontSize: `${theme.typography.text.fontSize / TEXT_BASE_SIZE}rem`,
+            $fontFamily: theme.typography.text.fontFamily,
+            $fontWeight: theme.typography.text.fontWeight,
+            $color: theme.typography.text.color,
+            children: message
+          }
+        )
+      ]
+    }
   );
+};
+var ComponentTree = () => {
+  const { error, nodes } = useEmbed();
+  const [children, setChildren] = useState4(/* @__PURE__ */ jsx21(Loading, {}));
   useEffect5(() => {
     const renderer = createRenderer();
     setChildren(nodes.map(renderer));
   }, [nodes]);
   if (error) {
-    return /* @__PURE__ */ jsxs13(
-      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__ */ jsx21(
-            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__ */ jsx21(
-            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__ */ jsx21(Error2, { message: error.message });
+  }
+  if (Children.count(children) === 0) {
+    return /* @__PURE__ */ jsx21(Loading, {});
   }
   return /* @__PURE__ */ jsx21(Fragment2, { children });
 };
@@ -11668,7 +11935,8 @@ export {
   useSchematic,
   useSchematicContext,
   useSchematicEvents,
-  useSchematicFlag
+  useSchematicFlag,
+  useSchematicIsPending
 };
 /*! Bundled license information: