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

package/dist/schematic-react.esm.js

@@ -4,7 +4,13 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __commonJS = (cb, mod) => function __require() {
+var __require = /* @__PURE__ */ ((x2) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x2, {
+  get: (a2, b2) => (typeof require !== "undefined" ? require : a2)[b2]
+}) : x2)(function(x2) {
+  if (typeof require !== "undefined") return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x2 + '" is not supported');
+});
+var __commonJS = (cb, mod) => function __require2() {
   return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
 };
 var __copyProps = (to, from2, except, desc) => {
@@ -843,6 +849,357 @@ var require_classnames = __commonJS({
   }
 });
 
+// node_modules/pluralize/pluralize.js
+var require_pluralize = __commonJS({
+  "node_modules/pluralize/pluralize.js"(exports, module) {
+    (function(root, pluralize3) {
+      if (typeof __require === "function" && typeof exports === "object" && typeof module === "object") {
+        module.exports = pluralize3();
+      } else if (typeof define === "function" && define.amd) {
+        define(function() {
+          return pluralize3();
+        });
+      } else {
+        root.pluralize = pluralize3();
+      }
+    })(exports, function() {
+      var pluralRules = [];
+      var singularRules = [];
+      var uncountables = {};
+      var irregularPlurals = {};
+      var irregularSingles = {};
+      function sanitizeRule(rule) {
+        if (typeof rule === "string") {
+          return new RegExp("^" + rule + "$", "i");
+        }
+        return rule;
+      }
+      function restoreCase(word, token2) {
+        if (word === token2) return token2;
+        if (word === word.toLowerCase()) return token2.toLowerCase();
+        if (word === word.toUpperCase()) return token2.toUpperCase();
+        if (word[0] === word[0].toUpperCase()) {
+          return token2.charAt(0).toUpperCase() + token2.substr(1).toLowerCase();
+        }
+        return token2.toLowerCase();
+      }
+      function interpolate(str, args) {
+        return str.replace(/\$(\d{1,2})/g, function(match2, index) {
+          return args[index] || "";
+        });
+      }
+      function replace2(word, rule) {
+        return word.replace(rule[0], function(match2, index) {
+          var result = interpolate(rule[1], arguments);
+          if (match2 === "") {
+            return restoreCase(word[index - 1], result);
+          }
+          return restoreCase(match2, result);
+        });
+      }
+      function sanitizeWord(token2, word, rules) {
+        if (!token2.length || uncountables.hasOwnProperty(token2)) {
+          return word;
+        }
+        var len = rules.length;
+        while (len--) {
+          var rule = rules[len];
+          if (rule[0].test(word)) return replace2(word, rule);
+        }
+        return word;
+      }
+      function replaceWord(replaceMap, keepMap, rules) {
+        return function(word) {
+          var token2 = word.toLowerCase();
+          if (keepMap.hasOwnProperty(token2)) {
+            return restoreCase(word, token2);
+          }
+          if (replaceMap.hasOwnProperty(token2)) {
+            return restoreCase(word, replaceMap[token2]);
+          }
+          return sanitizeWord(token2, word, rules);
+        };
+      }
+      function checkWord(replaceMap, keepMap, rules, bool) {
+        return function(word) {
+          var token2 = word.toLowerCase();
+          if (keepMap.hasOwnProperty(token2)) return true;
+          if (replaceMap.hasOwnProperty(token2)) return false;
+          return sanitizeWord(token2, token2, rules) === token2;
+        };
+      }
+      function pluralize3(word, count, inclusive) {
+        var pluralized = count === 1 ? pluralize3.singular(word) : pluralize3.plural(word);
+        return (inclusive ? count + " " : "") + pluralized;
+      }
+      pluralize3.plural = replaceWord(
+        irregularSingles,
+        irregularPlurals,
+        pluralRules
+      );
+      pluralize3.isPlural = checkWord(
+        irregularSingles,
+        irregularPlurals,
+        pluralRules
+      );
+      pluralize3.singular = replaceWord(
+        irregularPlurals,
+        irregularSingles,
+        singularRules
+      );
+      pluralize3.isSingular = checkWord(
+        irregularPlurals,
+        irregularSingles,
+        singularRules
+      );
+      pluralize3.addPluralRule = function(rule, replacement) {
+        pluralRules.push([sanitizeRule(rule), replacement]);
+      };
+      pluralize3.addSingularRule = function(rule, replacement) {
+        singularRules.push([sanitizeRule(rule), replacement]);
+      };
+      pluralize3.addUncountableRule = function(word) {
+        if (typeof word === "string") {
+          uncountables[word.toLowerCase()] = true;
+          return;
+        }
+        pluralize3.addPluralRule(word, "$0");
+        pluralize3.addSingularRule(word, "$0");
+      };
+      pluralize3.addIrregularRule = function(single, plural) {
+        plural = plural.toLowerCase();
+        single = single.toLowerCase();
+        irregularSingles[single] = plural;
+        irregularPlurals[plural] = single;
+      };
+      [
+        // Pronouns.
+        ["I", "we"],
+        ["me", "us"],
+        ["he", "they"],
+        ["she", "they"],
+        ["them", "them"],
+        ["myself", "ourselves"],
+        ["yourself", "yourselves"],
+        ["itself", "themselves"],
+        ["herself", "themselves"],
+        ["himself", "themselves"],
+        ["themself", "themselves"],
+        ["is", "are"],
+        ["was", "were"],
+        ["has", "have"],
+        ["this", "these"],
+        ["that", "those"],
+        // Words ending in with a consonant and `o`.
+        ["echo", "echoes"],
+        ["dingo", "dingoes"],
+        ["volcano", "volcanoes"],
+        ["tornado", "tornadoes"],
+        ["torpedo", "torpedoes"],
+        // Ends with `us`.
+        ["genus", "genera"],
+        ["viscus", "viscera"],
+        // Ends with `ma`.
+        ["stigma", "stigmata"],
+        ["stoma", "stomata"],
+        ["dogma", "dogmata"],
+        ["lemma", "lemmata"],
+        ["schema", "schemata"],
+        ["anathema", "anathemata"],
+        // Other irregular rules.
+        ["ox", "oxen"],
+        ["axe", "axes"],
+        ["die", "dice"],
+        ["yes", "yeses"],
+        ["foot", "feet"],
+        ["eave", "eaves"],
+        ["goose", "geese"],
+        ["tooth", "teeth"],
+        ["quiz", "quizzes"],
+        ["human", "humans"],
+        ["proof", "proofs"],
+        ["carve", "carves"],
+        ["valve", "valves"],
+        ["looey", "looies"],
+        ["thief", "thieves"],
+        ["groove", "grooves"],
+        ["pickaxe", "pickaxes"],
+        ["passerby", "passersby"]
+      ].forEach(function(rule) {
+        return pluralize3.addIrregularRule(rule[0], rule[1]);
+      });
+      [
+        [/s?$/i, "s"],
+        [/[^\u0000-\u007F]$/i, "$0"],
+        [/([^aeiou]ese)$/i, "$1"],
+        [/(ax|test)is$/i, "$1es"],
+        [/(alias|[^aou]us|t[lm]as|gas|ris)$/i, "$1es"],
+        [/(e[mn]u)s?$/i, "$1s"],
+        [/([^l]ias|[aeiou]las|[ejzr]as|[iu]am)$/i, "$1"],
+        [/(alumn|syllab|vir|radi|nucle|fung|cact|stimul|termin|bacill|foc|uter|loc|strat)(?:us|i)$/i, "$1i"],
+        [/(alumn|alg|vertebr)(?:a|ae)$/i, "$1ae"],
+        [/(seraph|cherub)(?:im)?$/i, "$1im"],
+        [/(her|at|gr)o$/i, "$1oes"],
+        [/(agend|addend|millenni|dat|extrem|bacteri|desiderat|strat|candelabr|errat|ov|symposi|curricul|automat|quor)(?:a|um)$/i, "$1a"],
+        [/(apheli|hyperbat|periheli|asyndet|noumen|phenomen|criteri|organ|prolegomen|hedr|automat)(?:a|on)$/i, "$1a"],
+        [/sis$/i, "ses"],
+        [/(?:(kni|wi|li)fe|(ar|l|ea|eo|oa|hoo)f)$/i, "$1$2ves"],
+        [/([^aeiouy]|qu)y$/i, "$1ies"],
+        [/([^ch][ieo][ln])ey$/i, "$1ies"],
+        [/(x|ch|ss|sh|zz)$/i, "$1es"],
+        [/(matr|cod|mur|sil|vert|ind|append)(?:ix|ex)$/i, "$1ices"],
+        [/\b((?:tit)?m|l)(?:ice|ouse)$/i, "$1ice"],
+        [/(pe)(?:rson|ople)$/i, "$1ople"],
+        [/(child)(?:ren)?$/i, "$1ren"],
+        [/eaux$/i, "$0"],
+        [/m[ae]n$/i, "men"],
+        ["thou", "you"]
+      ].forEach(function(rule) {
+        return pluralize3.addPluralRule(rule[0], rule[1]);
+      });
+      [
+        [/s$/i, ""],
+        [/(ss)$/i, "$1"],
+        [/(wi|kni|(?:after|half|high|low|mid|non|night|[^\w]|^)li)ves$/i, "$1fe"],
+        [/(ar|(?:wo|[ae])l|[eo][ao])ves$/i, "$1f"],
+        [/ies$/i, "y"],
+        [/\b([pl]|zomb|(?:neck|cross)?t|coll|faer|food|gen|goon|group|lass|talk|goal|cut)ies$/i, "$1ie"],
+        [/\b(mon|smil)ies$/i, "$1ey"],
+        [/\b((?:tit)?m|l)ice$/i, "$1ouse"],
+        [/(seraph|cherub)im$/i, "$1"],
+        [/(x|ch|ss|sh|zz|tto|go|cho|alias|[^aou]us|t[lm]as|gas|(?:her|at|gr)o|[aeiou]ris)(?:es)?$/i, "$1"],
+        [/(analy|diagno|parenthe|progno|synop|the|empha|cri|ne)(?:sis|ses)$/i, "$1sis"],
+        [/(movie|twelve|abuse|e[mn]u)s$/i, "$1"],
+        [/(test)(?:is|es)$/i, "$1is"],
+        [/(alumn|syllab|vir|radi|nucle|fung|cact|stimul|termin|bacill|foc|uter|loc|strat)(?:us|i)$/i, "$1us"],
+        [/(agend|addend|millenni|dat|extrem|bacteri|desiderat|strat|candelabr|errat|ov|symposi|curricul|quor)a$/i, "$1um"],
+        [/(apheli|hyperbat|periheli|asyndet|noumen|phenomen|criteri|organ|prolegomen|hedr|automat)a$/i, "$1on"],
+        [/(alumn|alg|vertebr)ae$/i, "$1a"],
+        [/(cod|mur|sil|vert|ind)ices$/i, "$1ex"],
+        [/(matr|append)ices$/i, "$1ix"],
+        [/(pe)(rson|ople)$/i, "$1rson"],
+        [/(child)ren$/i, "$1"],
+        [/(eau)x?$/i, "$1"],
+        [/men$/i, "man"]
+      ].forEach(function(rule) {
+        return pluralize3.addSingularRule(rule[0], rule[1]);
+      });
+      [
+        // Singular words with no plurals.
+        "adulthood",
+        "advice",
+        "agenda",
+        "aid",
+        "aircraft",
+        "alcohol",
+        "ammo",
+        "analytics",
+        "anime",
+        "athletics",
+        "audio",
+        "bison",
+        "blood",
+        "bream",
+        "buffalo",
+        "butter",
+        "carp",
+        "cash",
+        "chassis",
+        "chess",
+        "clothing",
+        "cod",
+        "commerce",
+        "cooperation",
+        "corps",
+        "debris",
+        "diabetes",
+        "digestion",
+        "elk",
+        "energy",
+        "equipment",
+        "excretion",
+        "expertise",
+        "firmware",
+        "flounder",
+        "fun",
+        "gallows",
+        "garbage",
+        "graffiti",
+        "hardware",
+        "headquarters",
+        "health",
+        "herpes",
+        "highjinks",
+        "homework",
+        "housework",
+        "information",
+        "jeans",
+        "justice",
+        "kudos",
+        "labour",
+        "literature",
+        "machinery",
+        "mackerel",
+        "mail",
+        "media",
+        "mews",
+        "moose",
+        "music",
+        "mud",
+        "manga",
+        "news",
+        "only",
+        "personnel",
+        "pike",
+        "plankton",
+        "pliers",
+        "police",
+        "pollution",
+        "premises",
+        "rain",
+        "research",
+        "rice",
+        "salmon",
+        "scissors",
+        "series",
+        "sewage",
+        "shambles",
+        "shrimp",
+        "software",
+        "species",
+        "staff",
+        "swine",
+        "tennis",
+        "traffic",
+        "transportation",
+        "trout",
+        "tuna",
+        "wealth",
+        "welfare",
+        "whiting",
+        "wildebeest",
+        "wildlife",
+        "you",
+        /pok[eé]mon$/i,
+        // Regexes.
+        /[^aeiou]ese$/i,
+        // "chinese", "japanese"
+        /deer$/i,
+        // "deer", "reindeer"
+        /fish$/i,
+        // "fish", "blowfish", "angelfish"
+        /measles$/i,
+        /o[iu]s$/i,
+        // "carnivorous"
+        /pox$/i,
+        // "chickpox", "smallpox"
+        /sheep$/i
+      ].forEach(pluralize3.addUncountableRule);
+      return pluralize3;
+    });
+  }
+});
+
 // src/context/embed.tsx
 import { createContext, useCallback, useEffect, useRef, useState } from "react";
 
@@ -5020,7 +5377,7 @@ var { Deflate, deflate, deflateRaw, gzip } = deflate_1$1;
 var { Inflate, inflate, inflateRaw, ungzip } = inflate_1$1;
 var inflate_1 = inflate;
 
-// node_modules/tslib/tslib.es6.mjs
+// node_modules/styled-components/node_modules/tslib/tslib.es6.mjs
 var __assign = function() {
   __assign = Object.assign || function __assign2(t) {
     for (var s2, i2 = 1, n = arguments.length; i2 < n; i2++) {
@@ -6857,6 +7214,7 @@ function BillingProductForSubscriptionResponseDataFromJSONTyped(json, ignoreDisc
     interval: json["interval"] == null ? void 0 : json["interval"],
     name: json["name"],
     price: json["price"],
+    priceExternalId: json["price_external_id"] == null ? void 0 : json["price_external_id"],
     quantity: json["quantity"],
     subscriptionId: json["subscription_id"],
     updatedAt: new Date(json["updated_at"])
@@ -7288,6 +7646,7 @@ function CompanyPlanDetailResponseDataFromJSONTyped(json, ignoreDiscriminator) {
     ),
     icon: json["icon"],
     id: json["id"],
+    isDefault: json["is_default"],
     monthlyPrice: json["monthly_price"] == null ? void 0 : BillingPriceResponseDataFromJSON(json["monthly_price"]),
     name: json["name"],
     planType: json["plan_type"],
@@ -7316,7 +7675,7 @@ function InvoiceResponseDataFromJSONTyped(json, ignoreDiscriminator) {
     customerExternalId: json["customer_external_id"],
     dueDate: json["due_date"] == null ? void 0 : new Date(json["due_date"]),
     environmentId: json["environment_id"],
-    externalId: json["external_id"],
+    externalId: json["external_id"] == null ? void 0 : json["external_id"],
     id: json["id"],
     paymentMethodExternalId: json["payment_method_external_id"] == null ? void 0 : json["payment_method_external_id"],
     subscriptionExternalId: json["subscription_external_id"] == null ? void 0 : json["subscription_external_id"],
@@ -7882,7 +8241,7 @@ var defaultTheme = {
   sectionLayout: "merged",
   colorMode: "light",
   primary: "#000000",
-  secondary: "#000000",
+  secondary: "#194BFB",
   card: {
     background: "#FFFFFF",
     borderRadius: 10,
@@ -8027,7 +8386,7 @@ var EmbedProvider = ({
       const nodes = [];
       const settings = { ...defaultSettings };
       if (!id || !state.api) {
-        throw new Error("Invalid component id or api instance.");
+        return new Error("Invalid component id or api instance.");
       }
       const response = await state.api.hydrateComponent({ componentId: id });
       const { data } = response;
@@ -8149,23 +8508,23 @@ var EmbedProvider = ({
               theme: "stripe",
               variables: {
                 // Base
-                spacingUnit: ".25rem",
-                colorPrimary: "#0570de",
+                fontFamily: '"Public Sans", system-ui, sans-serif',
+                spacingUnit: "0.25rem",
+                borderRadius: "0.5rem",
+                colorText: "#30313D",
                 colorBackground: "#FFFFFF",
-                colorText: "#30313d",
-                colorDanger: "#df1b41",
-                fontFamily: "Public Sans, system-ui, sans-serif",
-                borderRadius: ".5rem",
+                colorPrimary: "#0570DE",
+                colorDanger: "#DF1B41",
                 // Layout
                 gridRowSpacing: "1.5rem",
                 gridColumnSpacing: "1.5rem"
               },
               rules: {
                 ".Label": {
-                  color: "#020202",
+                  fontSize: "1rem",
                   fontWeight: "400",
-                  fontSize: "16px",
-                  marginBottom: "12px"
+                  marginBottom: "0.75rem",
+                  color: state.settings.theme.typography.text.color
                 }
               }
             },
@@ -8212,7 +8571,7 @@ var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames2 = Object.getOwnPropertyNames;
 var __getProtoOf2 = Object.getPrototypeOf;
 var __hasOwnProp2 = Object.prototype.hasOwnProperty;
-var __commonJS2 = (cb, mod) => function __require() {
+var __commonJS2 = (cb, mod) => function __require2() {
   return mod || (0, cb[__getOwnPropNames2(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
 };
 var __copyProps2 = (to, from2, except, desc) => {
@@ -9210,8 +9569,8 @@ var useSchematicIsPending = (opts) => {
 };
 
 // src/components/elements/plan-manager/PlanManager.tsx
-import { forwardRef, useMemo as useMemo6 } from "react";
-import { createPortal } from "react-dom";
+import { forwardRef as forwardRef2, useMemo as useMemo7 } from "react";
+import { createPortal as createPortal2 } from "react-dom";
 
 // src/utils/color.ts
 function hexToHSL(color) {
@@ -9591,6 +9950,25 @@ var IconRound = ({
   return /* @__PURE__ */ jsx5(Container, { $size: size, $variant: variant, $colors: colors, ...props, children: /* @__PURE__ */ jsx5(Icon2, { name }) });
 };
 
+// src/components/ui/loader/styles.ts
+var spin = mt`
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+`;
+var Loader = dt.div`
+  border: ${4 / TEXT_BASE_SIZE}rem solid hsla(0, 0%, 50%, 0.125);
+  border-top: ${4 / TEXT_BASE_SIZE}rem solid ${({ theme }) => theme.secondary};
+  border-radius: 50%;
+  width: ${56 / TEXT_BASE_SIZE}rem;
+  height: ${56 / TEXT_BASE_SIZE}rem;
+  animation: ${spin} 1.5s linear infinite;
+  display: inline-block;
+`;
+
 // src/components/ui/modal/Modal.tsx
 import { useCallback as useCallback3, useEffect as useEffect3, useMemo as useMemo3, useRef as useRef2 } from "react";
 import { jsx as jsx6 } from "react/jsx-runtime";
@@ -9630,7 +10008,7 @@ var Modal = ({ children, size = "auto", onClose }) => {
       $transform: "translate(-50%, -50%)",
       $width: "100%",
       $height: "100%",
-      $backgroundColor: isLightBackground ? "hsl(0, 0%, 85%)" : "hsl(0, 0%, 15%)",
+      $backgroundColor: isLightBackground ? "hsla(0, 0%, 85%, 0.8)" : "hsla(0, 0%, 15%, 0.8)",
       $overflow: "hidden",
       children: /* @__PURE__ */ jsx6(
         Flex,
@@ -9681,7 +10059,7 @@ var ModalHeader = ({
   return /* @__PURE__ */ jsxs2(
     Flex,
     {
-      $justifyContent: "space-between",
+      $justifyContent: children ? "space-between" : "end",
       $alignItems: "center",
       $flexShrink: "0",
       $gap: "1rem",
@@ -9778,15 +10156,12 @@ var ProgressBar = ({
 };
 
 // src/components/elements/plan-manager/CheckoutDialog.tsx
-import { useEffect as useEffect4, useMemo as useMemo5, useState as useState3 } from "react";
+import { useMemo as useMemo6, useState as useState3 } from "react";
+var import_pluralize = __toESM(require_pluralize());
 
-// src/components/elements/plan-manager/PaymentForm.tsx
-import { useState as useState2 } from "react";
-import {
-  LinkAuthenticationElement,
-  PaymentElement
-} from "@stripe/react-stripe-js";
-import { useStripe, useElements } from "@stripe/react-stripe-js";
+// src/components/elements/payment-method/PaymentMethod.tsx
+import { forwardRef, useMemo as useMemo5 } from "react";
+import { createPortal } from "react-dom";
 
 // src/components/elements/plan-manager/styles.ts
 var StyledButton = dt(Button2)`
@@ -9888,1102 +10263,1324 @@ var StyledButton = dt(Button2)`
 }}
 `;
 
-// src/components/elements/plan-manager/PaymentForm.tsx
+// src/components/elements/payment-method/PaymentMethod.tsx
 import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
-var PaymentForm = ({ plan, period, onConfirm }) => {
-  const stripe = useStripe();
-  const elements = useElements();
-  const { api, data } = useEmbed();
-  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;
-    if (!api || !stripe || !elements || !priceId) {
-      return;
-    }
-    setIsLoading(true);
-    setIsConfirmed(false);
-    setMessage(null);
-    try {
-      const { setupIntent, error } = await stripe.confirmSetup({
-        elements,
-        confirmParams: {
-          return_url: window.location.href
-        },
-        redirect: "if_required"
-      });
-      if (onConfirm && typeof setupIntent?.payment_method === "string") {
-        onConfirm(setupIntent.payment_method);
-        setIsConfirmed(true);
-      } else {
-      }
-      if (error?.type === "card_error" || error?.type === "validation_error") {
-        setMessage(error.message);
-      }
-    } catch (error) {
-      setMessage("A problem occurred while saving your payment method.");
-    } finally {
-      setIsLoading(false);
+var resolveDesignProps = (props) => {
+  return {
+    header: {
+      isVisible: props.header?.isVisible ?? true,
+      fontStyle: props.header?.fontStyle ?? "heading4"
+    },
+    functions: {
+      allowEdit: props.functions?.allowEdit ?? true
     }
   };
-  return /* @__PURE__ */ jsxs4(
-    "form",
-    {
-      id: "payment-form",
-      onSubmit: handleSubmit,
-      style: {
-        display: "flex",
-        flexDirection: "column",
-        height: "100%",
-        overflowX: "hidden",
-        overflowY: "auto"
-      },
-      children: [
-        /* @__PURE__ */ jsx9(Box, { $width: "100%", $marginBottom: "1.5rem", children: /* @__PURE__ */ jsx9(Text, { $size: 18, children: "Add payment method" }) }),
-        /* @__PURE__ */ jsx9(
-          Flex,
-          {
-            $flexDirection: "column",
-            $gap: "1.5rem",
-            $width: "100%",
-            $marginBottom: "1.5rem",
-            children: /* @__PURE__ */ jsx9(
-              LinkAuthenticationElement,
-              {
-                id: "link-authentication-element"
-              }
-            )
-          }
-        ),
-        /* @__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" })
-          }
-        ),
-        message && /* @__PURE__ */ jsx9(Box, { $margin: "1rem 0", children: /* @__PURE__ */ jsx9(Text, { id: "payment-message", $size: 15, $weight: 500, $color: "#DB6669", children: message }) })
-      ]
-    }
-  );
 };
-
-// src/components/elements/plan-manager/CheckoutDialog.tsx
-import { Fragment, jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
-var CheckoutDialog = () => {
-  const [checkoutStage, setCheckoutStage] = useState3(
-    "plan"
-  );
-  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();
+var PaymentMethod = forwardRef(({ children, className, portal, ...rest }, ref) => {
+  const props = resolveDesignProps(rest);
   const theme = nt();
-  const { api, data, hydrate, setLayout } = useEmbed();
-  const { currentPlan, availablePlans } = useMemo5(() => {
+  const { data, layout } = useEmbed();
+  const paymentMethod = useMemo5(() => {
+    const { paymentMethodType, cardLast4, cardExpMonth, cardExpYear } = data.subscription?.paymentMethod || {};
+    let monthsToExpiration;
+    if (typeof cardExpYear === "number" && typeof cardExpMonth === "number") {
+      const today = /* @__PURE__ */ new Date();
+      const currentYear = today.getFullYear();
+      const currentMonth = today.getMonth();
+      const timeToExpiration = Math.round(
+        +new Date(cardExpYear, cardExpMonth - 1) - +new Date(currentYear, currentMonth)
+      );
+      monthsToExpiration = Math.round(
+        timeToExpiration / (1e3 * 60 * 60 * 24 * 30)
+      );
+    }
     return {
-      currentPlan: data.company?.plan,
-      availablePlans: data.activePlans
+      paymentMethodType,
+      cardLast4,
+      monthsToExpiration
     };
-  }, [data.company, data.activePlans]);
-  const savingsPercentage = useMemo5(() => {
-    if (selectedPlan) {
-      const monthly = (selectedPlan?.monthlyPrice?.price || 0) * 12;
-      const yearly = selectedPlan?.yearlyPrice?.price || 0;
-      return Math.round((monthly - yearly) / monthly * 1e4) / 100;
-    }
-    return 0;
-  }, [selectedPlan]);
+  }, [data.subscription?.paymentMethod]);
   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: `${20 / TEXT_BASE_SIZE}rem`,
-            $height: `${20 / TEXT_BASE_SIZE}rem`,
-            $borderWidth: "2px",
-            $borderStyle: "solid",
-            $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: {
-              fontSize: `${16 / TEXT_BASE_SIZE}rem`,
-              width: `${20 / TEXT_BASE_SIZE}rem`,
-              height: `${20 / TEXT_BASE_SIZE}rem`
+  if (!paymentMethod.paymentMethodType) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs4("div", { ref, className, children: [
+    props.header.isVisible && /* @__PURE__ */ jsxs4(
+      Flex,
+      {
+        $justifyContent: "space-between",
+        $alignItems: "center",
+        $margin: "0 0 1rem",
+        children: [
+          /* @__PURE__ */ jsx9(
+            Text,
+            {
+              $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"
             }
-          }
-        ),
-        /* @__PURE__ */ jsx10(
-          Box,
+          ),
+          typeof paymentMethod.monthsToExpiration === "number" && paymentMethod.monthsToExpiration < 4 && /* @__PURE__ */ jsx9(
+            Text,
+            {
+              $font: theme.typography.text.fontFamily,
+              $size: 14,
+              $color: "#DB6769",
+              children: paymentMethod.monthsToExpiration > 0 ? `Expires in ${paymentMethod.monthsToExpiration} mo` : "Expired"
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx9(
+      Flex,
+      {
+        $justifyContent: "space-between",
+        $alignItems: "center",
+        $margin: "0 0 1rem",
+        $backgroundColor: isLightBackground ? "hsla(0, 0%, 0%, 0.0625)" : "hsla(0, 0%, 100%, 0.125)",
+        $padding: "0.375rem 1rem",
+        $borderRadius: "9999px",
+        children: /* @__PURE__ */ jsx9(Text, { $font: theme.typography.text.fontFamily, $size: 14, children: paymentMethod.cardLast4 ? `\u{1F4B3} Card ending in ${paymentMethod.cardLast4}` : "Other existing payment method" })
+      }
+    ),
+    layout === "payment" && createPortal(
+      /* @__PURE__ */ jsxs4(Modal, { size: "md", children: [
+        /* @__PURE__ */ jsx9(ModalHeader, { children: /* @__PURE__ */ jsx9(Box, { $fontWeight: "600", children: "Edit payment method" }) }),
+        /* @__PURE__ */ jsxs4(
+          Flex,
           {
-            tabIndex: 0,
-            ...checkoutStage !== "plan" && {
-              onClick: () => setCheckoutStage("plan"),
-              $opacity: "0.6375",
-              $cursor: "pointer"
-            },
-            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: `${20 / TEXT_BASE_SIZE}rem`,
-            $height: `${20 / TEXT_BASE_SIZE}rem`,
-            $borderWidth: "2px",
-            $borderStyle: "solid",
-            $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.125)" : "hsla(0, 0%, 100%, 0.25)",
-            $borderRadius: "9999px"
-          }
-        ),
-        /* @__PURE__ */ jsx10(
-          Box,
-          {
-            tabIndex: 0,
-            ...checkoutStage !== "checkout" && {
-              $opacity: "0.6375"
-            },
-            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__ */ jsxs5(
-      Flex,
-      {
-        $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", $height: "calc(100% - 5rem)", children: [
-      /* @__PURE__ */ jsxs5(
-        Flex,
-        {
-          $flexDirection: "column",
-          $flexGrow: "1",
-          $gap: "1rem",
-          $padding: "2rem 2.5rem 2rem 2.5rem",
-          $backgroundColor: isLightBackground ? "hsla(0, 0%, 0%, 0.025)" : "hsla(0, 0%, 100%, 0.025)",
-          $flex: "1",
-          $overflow: "auto",
-          children: [
-            checkoutStage === "plan" && /* @__PURE__ */ jsxs5(Fragment, { children: [
-              /* @__PURE__ */ jsxs5(Flex, { $flexDirection: "column", $gap: "1rem", $marginBottom: "1rem", children: [
-                /* @__PURE__ */ jsx10(
-                  Text,
-                  {
-                    as: "h3",
-                    id: "select-plan-dialog-label",
-                    $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"
-                  }
-                ),
-                /* @__PURE__ */ jsx10(
-                  Text,
-                  {
-                    as: "p",
-                    id: "select-plan-dialog-description",
-                    $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, { $flexWrap: "wrap", $gap: "1rem", $flexGrow: "1", children: availablePlans?.map((plan) => {
-                return /* @__PURE__ */ jsxs5(
-                  Flex,
-                  {
-                    $flexDirection: "column",
-                    $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: `${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: [
-                      /* @__PURE__ */ jsxs5(
+            $flexDirection: "column",
+            $padding: "2.5rem",
+            $height: "100%",
+            $gap: "1.5rem",
+            children: [
+              /* @__PURE__ */ jsx9(
+                Flex,
+                {
+                  $flexDirection: "column",
+                  $gap: "1rem",
+                  $backgroundColor: "#FBFBFB",
+                  $borderRadius: "0 0 0.5rem 0.5rem",
+                  $flex: "1",
+                  $height: "100%",
+                  children: /* @__PURE__ */ jsxs4(Flex, { $flexDirection: "column", $height: "100%", children: [
+                    /* @__PURE__ */ jsx9(
+                      Box,
+                      {
+                        $fontSize: "18px",
+                        $marginBottom: "1.5rem",
+                        $display: "inline-block",
+                        $width: "100%",
+                        children: "Default"
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs4(Flex, { $gap: "1rem", children: [
+                      /* @__PURE__ */ jsx9(
                         Flex,
                         {
-                          $flexDirection: "column",
-                          $position: "relative",
+                          $alignItems: "center",
+                          $padding: ".5rem 1rem",
+                          $border: "1px solid #E2E5E9",
+                          $borderRadius: ".5rem",
+                          $backgroundColor: "#ffffff",
                           $gap: "1rem",
                           $width: "100%",
-                          $height: "auto",
-                          $padding: `${theme.card.padding / TEXT_BASE_SIZE}rem`,
-                          $borderBottomWidth: "1px",
-                          $borderStyle: "solid",
-                          $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 }),
-                            /* @__PURE__ */ jsxs5(Text, { children: [
-                              /* @__PURE__ */ jsx10(Box, { $display: "inline-block", $fontSize: "1.5rem", children: formatCurrency(
-                                (planPeriod === "month" ? plan.monthlyPrice : plan.yearlyPrice)?.price ?? 0
+                          children: /* @__PURE__ */ jsxs4(Flex, { $justifyContent: "space-between", $flex: "1", children: [
+                            /* @__PURE__ */ jsxs4(Flex, { $alignItems: "center", $gap: "1rem", children: [
+                              /* @__PURE__ */ jsx9(Box, { $display: "inline-block", children: /* @__PURE__ */ jsx9(
+                                "svg",
+                                {
+                                  viewBox: "0 0 24 16",
+                                  fill: "none",
+                                  xmlns: "http://www.w3.org/2000/svg",
+                                  width: "26px",
+                                  height: "auto",
+                                  children: /* @__PURE__ */ jsxs4("g", { children: [
+                                    /* @__PURE__ */ jsx9(
+                                      "rect",
+                                      {
+                                        stroke: "#DDD",
+                                        fill: "#FFF",
+                                        x: ".25",
+                                        y: ".25",
+                                        width: "23",
+                                        height: "15.5",
+                                        rx: "2"
+                                      }
+                                    ),
+                                    /* @__PURE__ */ jsx9(
+                                      "path",
+                                      {
+                                        d: "M2.788 5.914A7.201 7.201 0 0 0 1 5.237l.028-.125h2.737c.371.013.672.125.77.519l.595 2.836.182.854 1.666-4.21h1.799l-2.674 6.167H4.304L2.788 5.914Zm7.312 5.37H8.399l1.064-6.172h1.7L10.1 11.284Zm6.167-6.021-.232 1.333-.153-.066a3.054 3.054 0 0 0-1.268-.236c-.671 0-.972.269-.98.531 0 .29.365.48.96.762.98.44 1.435.979 1.428 1.681-.014 1.28-1.176 2.108-2.96 2.108-.764-.007-1.5-.158-1.898-.328l.238-1.386.224.099c.553.23.917.328 1.596.328.49 0 1.015-.19 1.022-.604 0-.27-.224-.466-.882-.769-.644-.295-1.505-.788-1.491-1.674C11.878 5.84 13.06 5 14.74 5c.658 0 1.19.138 1.526.263Zm2.26 3.834h1.415c-.07-.308-.392-1.786-.392-1.786l-.12-.531c-.083.23-.23.604-.223.59l-.68 1.727Zm2.1-3.985L22 11.284h-1.575s-.154-.71-.203-.926h-2.184l-.357.926h-1.785l2.527-5.66c.175-.4.483-.512.889-.512h1.316Z",
+                                        fill: "#1434CB"
+                                      }
+                                    )
+                                  ] })
+                                }
                               ) }),
-                              /* @__PURE__ */ jsxs5(Box, { $display: "inline-block", $fontSize: "0.75rem", children: [
-                                "/",
-                                planPeriod
-                              ] })
+                              /* @__PURE__ */ jsx9(Box, { $whiteSpace: "nowrap", children: "Visa **** 4242" })
                             ] }),
-                            (plan.current || plan.id === currentPlan?.id) && /* @__PURE__ */ jsx10(
-                              Flex,
-                              {
-                                $position: "absolute",
-                                $right: "1rem",
-                                $top: "1rem",
-                                $fontSize: "0.625rem",
-                                $color: hexToHSL(theme.primary).l > 50 ? "#000000" : "#FFFFFF",
-                                $backgroundColor: theme.primary,
-                                $borderRadius: "9999px",
-                                $padding: "0.125rem 0.85rem",
-                                children: "Current plan"
-                              }
-                            )
-                          ]
+                            /* @__PURE__ */ jsx9(Flex, { $alignItems: "center", children: /* @__PURE__ */ jsx9(Box, { $fontSize: "12px", $color: "#5D5D5D", children: "Expires: 3/30" }) })
+                          ] })
                         }
                       ),
-                      /* @__PURE__ */ jsx10(
-                        Flex,
+                      /* @__PURE__ */ jsx9(Flex, { children: /* @__PURE__ */ jsx9(
+                        StyledButton,
                         {
-                          $flexDirection: "column",
-                          $position: "relative",
-                          $gap: "0.5rem",
-                          $flex: "1",
-                          $width: "100%",
-                          $height: "auto",
-                          $padding: "1.5rem",
-                          children: plan.features.map((feature) => {
-                            return /* @__PURE__ */ jsxs5(
-                              Flex,
-                              {
-                                $flexShrink: "0",
-                                $gap: "1rem",
-                                children: [
-                                  /* @__PURE__ */ jsx10(
-                                    IconRound,
-                                    {
-                                      name: feature.icon,
-                                      size: "tn",
-                                      colors: [
-                                        theme.primary,
-                                        isLightBackground ? "hsla(0, 0%, 0%, 0.0625)" : "hsla(0, 0%, 100%, 0.0625)"
-                                      ]
-                                    }
-                                  ),
-                                  /* @__PURE__ */ jsx10(Flex, { $alignItems: "center", children: /* @__PURE__ */ jsx10(Text, { $size: 12, children: feature.name }) })
-                                ]
-                              },
-                              feature.id
-                            );
-                          })
+                          $size: "sm",
+                          $color: "primary",
+                          $variant: "outline",
+                          style: {
+                            whiteSpace: "nowrap",
+                            paddingLeft: "1rem",
+                            paddingRight: "1rem"
+                          },
+                          children: "Edit"
                         }
-                      ),
-                      /* @__PURE__ */ jsxs5(
+                      ) })
+                    ] })
+                  ] })
+                }
+              ),
+              /* @__PURE__ */ jsx9(
+                Flex,
+                {
+                  $flexDirection: "column",
+                  $gap: "1rem",
+                  $backgroundColor: "#FBFBFB",
+                  $borderRadius: "0 0 0.5rem 0.5rem",
+                  $flex: "1",
+                  $height: "100%",
+                  children: /* @__PURE__ */ jsxs4(Flex, { $flexDirection: "column", $height: "100%", children: [
+                    /* @__PURE__ */ jsx9(
+                      Box,
+                      {
+                        $fontSize: "18px",
+                        $marginBottom: "1.5rem",
+                        $display: "inline-block",
+                        $width: "100%",
+                        children: "Others"
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs4(Flex, { $gap: "1rem", children: [
+                      /* @__PURE__ */ jsx9(
                         Flex,
                         {
-                          $flexDirection: "column",
-                          $position: "relative",
+                          $alignItems: "center",
+                          $padding: ".5rem 1rem",
+                          $border: "1px solid #E2E5E9",
+                          $borderRadius: ".5rem",
+                          $backgroundColor: "#ffffff",
                           $gap: "1rem",
                           $width: "100%",
-                          $height: "auto",
-                          $padding: "1.5rem",
-                          children: [
-                            plan.id === selectedPlan?.id && /* @__PURE__ */ jsxs5(
-                              Flex,
-                              {
-                                $justifyContent: "center",
-                                $alignItems: "center",
-                                $gap: "0.25rem",
-                                $fontSize: "0.9375rem",
-                                $padding: "0.625rem 0",
-                                children: [
-                                  /* @__PURE__ */ jsx10(
-                                    Icon2,
-                                    {
-                                      name: "check-rounded",
-                                      style: {
-                                        fontSize: 20,
-                                        lineHeight: "1",
-                                        color: theme.primary
+                          children: /* @__PURE__ */ jsxs4(Flex, { $justifyContent: "space-between", $flex: "1", children: [
+                            /* @__PURE__ */ jsxs4(Flex, { $alignItems: "center", $gap: "1rem", children: [
+                              /* @__PURE__ */ jsx9(Box, { $display: "inline-block", children: /* @__PURE__ */ jsx9(
+                                "svg",
+                                {
+                                  viewBox: "0 0 24 16",
+                                  fill: "none",
+                                  xmlns: "http://www.w3.org/2000/svg",
+                                  width: "26px",
+                                  height: "auto",
+                                  children: /* @__PURE__ */ jsxs4("g", { children: [
+                                    /* @__PURE__ */ jsx9(
+                                      "rect",
+                                      {
+                                        stroke: "#DDD",
+                                        fill: "#FFF",
+                                        x: ".25",
+                                        y: ".25",
+                                        width: "23",
+                                        height: "15.5",
+                                        rx: "2"
                                       }
-                                    }
-                                  ),
-                                  /* @__PURE__ */ jsx10(
-                                    Text,
-                                    {
-                                      $lineHeight: "1.4",
-                                      $color: theme.typography.text.color,
-                                      children: "Selected"
-                                    }
-                                  )
-                                ]
-                              }
-                            ),
-                            !(plan.current || plan.id === currentPlan?.id) && plan.id !== selectedPlan?.id && /* @__PURE__ */ jsx10(
-                              StyledButton,
-                              {
-                                disabled: plan.valid === false,
-                                ...plan.valid === true && {
-                                  onClick: () => setSelectedPlan(plan)
-                                },
-                                $size: "sm",
-                                $color: "primary",
-                                $variant: "outline",
-                                children: "Select"
-                              }
-                            )
-                          ]
+                                    ),
+                                    /* @__PURE__ */ jsx9(
+                                      "path",
+                                      {
+                                        d: "M2.788 5.914A7.201 7.201 0 0 0 1 5.237l.028-.125h2.737c.371.013.672.125.77.519l.595 2.836.182.854 1.666-4.21h1.799l-2.674 6.167H4.304L2.788 5.914Zm7.312 5.37H8.399l1.064-6.172h1.7L10.1 11.284Zm6.167-6.021-.232 1.333-.153-.066a3.054 3.054 0 0 0-1.268-.236c-.671 0-.972.269-.98.531 0 .29.365.48.96.762.98.44 1.435.979 1.428 1.681-.014 1.28-1.176 2.108-2.96 2.108-.764-.007-1.5-.158-1.898-.328l.238-1.386.224.099c.553.23.917.328 1.596.328.49 0 1.015-.19 1.022-.604 0-.27-.224-.466-.882-.769-.644-.295-1.505-.788-1.491-1.674C11.878 5.84 13.06 5 14.74 5c.658 0 1.19.138 1.526.263Zm2.26 3.834h1.415c-.07-.308-.392-1.786-.392-1.786l-.12-.531c-.083.23-.23.604-.223.59l-.68 1.727Zm2.1-3.985L22 11.284h-1.575s-.154-.71-.203-.926h-2.184l-.357.926h-1.785l2.527-5.66c.175-.4.483-.512.889-.512h1.316Z",
+                                        fill: "#1434CB"
+                                      }
+                                    )
+                                  ] })
+                                }
+                              ) }),
+                              /* @__PURE__ */ jsx9(Box, { $whiteSpace: "nowrap", children: "Visa **** 2929" })
+                            ] }),
+                            /* @__PURE__ */ jsx9(Flex, { $alignItems: "center", children: /* @__PURE__ */ jsx9(Box, { $fontSize: "12px", $color: "#5D5D5D", children: "Expires: 3/30" }) })
+                          ] })
                         }
-                      )
-                    ]
-                  },
-                  plan.id
-                );
-              }) })
-            ] }),
-            selectedPlan && checkoutStage === "checkout" && /* @__PURE__ */ jsx10(
-              PaymentForm,
-              {
-                plan: selectedPlan,
-                period: planPeriod,
-                onConfirm: (value) => {
-                  setPaymentMethodId(value);
-                }
-              }
-            )
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsxs5(
-        Flex,
-        {
-          $flexDirection: "column",
-          $backgroundColor: theme.card.background,
-          $borderRadius: "0 0 0.5rem",
-          $width: "21.5rem",
-          $boxShadow: "0px 1px 20px 0px #1018280F, 0px 1px 3px 0px #1018281A;",
-          children: [
-            /* @__PURE__ */ jsxs5(
-              Flex,
-              {
-                $flexDirection: "column",
-                $position: "relative",
-                $gap: "1rem",
-                $width: "100%",
-                $height: "auto",
-                $padding: "1.5rem",
-                $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,
-                    {
-                      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,
-                    {
-                      $borderWidth: "1px",
-                      $borderStyle: "solid",
-                      $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.1)" : "hsla(0, 0%, 100%, 0.2)",
-                      $borderRadius: "2.5rem",
-                      $cursor: "pointer",
-                      children: [
-                        /* @__PURE__ */ jsx10(
-                          Flex,
+                      ),
+                      /* @__PURE__ */ jsxs4(Flex, { $gap: "1rem", children: [
+                        /* @__PURE__ */ jsx9(
+                          StyledButton,
                           {
-                            onClick: () => setPlanPeriod("month"),
-                            $justifyContent: "center",
-                            $alignItems: "center",
-                            $padding: "0.25rem 0.5rem",
-                            $flex: "1",
-                            ...planPeriod === "month" && {
-                              $backgroundColor: isLightBackground ? "hsla(0, 0%, 0%, 0.075)" : "hsla(0, 0%, 100%, 0.15)"
+                            $size: "sm",
+                            $color: "primary",
+                            $variant: "outline",
+                            style: {
+                              whiteSpace: "nowrap",
+                              paddingLeft: "1rem",
+                              paddingRight: "1rem"
                             },
-                            $borderRadius: "2.5rem",
-                            children: /* @__PURE__ */ jsx10(
-                              Text,
-                              {
-                                $font: theme.typography.text.fontFamily,
-                                $size: 14,
-                                $weight: planPeriod === "month" ? 600 : 400,
-                                $color: theme.typography.text.color,
-                                children: "Billed monthly"
-                              }
-                            )
+                            children: "Make Default"
                           }
                         ),
-                        /* @__PURE__ */ jsx10(
-                          Flex,
+                        /* @__PURE__ */ jsx9(
+                          StyledButton,
                           {
-                            onClick: () => setPlanPeriod("year"),
-                            $justifyContent: "center",
-                            $alignItems: "center",
-                            $padding: "0.25rem 0.5rem",
-                            $flex: "1",
-                            ...planPeriod === "year" && {
-                              $backgroundColor: isLightBackground ? "hsla(0, 0%, 0%, 0.075)" : "hsla(0, 0%, 100%, 0.15)"
+                            $size: "sm",
+                            $color: "primary",
+                            $variant: "outline",
+                            style: {
+                              whiteSpace: "nowrap",
+                              paddingLeft: "1rem",
+                              paddingRight: "1rem"
                             },
-                            $borderRadius: "2.5rem",
-                            children: /* @__PURE__ */ jsx10(
-                              Text,
-                              {
-                                $font: theme.typography.text.fontFamily,
-                                $size: 14,
-                                $weight: planPeriod === "year" ? 600 : 400,
-                                $color: theme.typography.text.color,
-                                children: "Billed yearly"
-                              }
-                            )
+                            children: "Edit"
                           }
                         )
-                      ]
-                    }
-                  ),
-                  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`
-                    }
-                  ) })
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsxs5(
-              Flex,
-              {
-                $flexDirection: "column",
-                $position: "relative",
-                $gap: "1rem",
-                $width: "100%",
-                $height: "auto",
-                $padding: "1.5rem",
-                $flex: "1",
-                $borderBottomWidth: "1px",
-                $borderStyle: "solid",
-                $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.1)" : "hsla(0, 0%, 100%, 0.2)",
-                children: [
-                  /* @__PURE__ */ jsx10(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsx10(
-                    Text,
-                    {
-                      $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,
-                            {
-                              $font: theme.typography.heading4.fontFamily,
-                              $size: theme.typography.heading4.fontSize,
-                              $weight: theme.typography.heading4.fontWeight,
-                              $color: theme.typography.heading4.color,
-                              children: currentPlan.name
-                            }
-                          )
-                        }
-                      ),
-                      typeof currentPlan.planPrice === "number" && currentPlan.planPeriod && /* @__PURE__ */ jsx10(Flex, { children: /* @__PURE__ */ 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,
-                            {
-                              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
-                            ]
-                          }
-                        ) })
                       ] })
                     ] })
                   ] })
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsxs5(
-              Flex,
+                }
+              )
+            ]
+          }
+        )
+      ] }),
+      portal || document.body
+    )
+  ] });
+});
+
+// src/components/elements/plan-manager/PaymentForm.tsx
+import { useState as useState2 } from "react";
+import {
+  LinkAuthenticationElement,
+  PaymentElement
+} from "@stripe/react-stripe-js";
+import { useStripe, useElements } from "@stripe/react-stripe-js";
+import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
+var PaymentForm = ({ plan, period, onConfirm }) => {
+  const stripe = useStripe();
+  const elements = useElements();
+  const { api, data } = useEmbed();
+  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;
+    if (!api || !stripe || !elements || !priceId) {
+      return;
+    }
+    setIsLoading(true);
+    setIsConfirmed(false);
+    setMessage(null);
+    try {
+      const { setupIntent, error } = await stripe.confirmSetup({
+        elements,
+        confirmParams: {
+          return_url: window.location.href
+        },
+        redirect: "if_required"
+      });
+      if (onConfirm && typeof setupIntent?.payment_method === "string") {
+        onConfirm(setupIntent.payment_method);
+        setIsConfirmed(true);
+      } else {
+      }
+      if (error?.type === "card_error" || error?.type === "validation_error") {
+        setMessage(error.message);
+      }
+    } catch (error) {
+      setMessage("A problem occurred while saving your payment method.");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs5(
+    "form",
+    {
+      id: "payment-form",
+      onSubmit: handleSubmit,
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        overflowX: "hidden",
+        overflowY: "auto"
+      },
+      children: [
+        /* @__PURE__ */ jsx10(Box, { $width: "100%", $marginBottom: "1.5rem", children: /* @__PURE__ */ jsx10(Text, { $size: 18, children: "Add payment method" }) }),
+        /* @__PURE__ */ jsx10(
+          Flex,
+          {
+            $flexDirection: "column",
+            $gap: "1.5rem",
+            $width: "100%",
+            $marginBottom: "1.5rem",
+            children: /* @__PURE__ */ jsx10(
+              LinkAuthenticationElement,
               {
-                $flexDirection: "column",
-                $position: "relative",
-                $gap: "1rem",
-                $width: "100%",
-                $height: "auto",
-                $padding: "1.5rem",
-                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__ */ 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,
-                      ...selectedPlan && {
-                        onClick: () => setCheckoutStage("checkout")
-                      },
-                      $size: "sm",
-                      children: /* @__PURE__ */ jsxs5(
-                        Flex,
-                        {
-                          $gap: "0.5rem",
-                          $justifyContent: "center",
-                          $alignItems: "center",
-                          $padding: "0 1rem",
-                          children: [
-                            /* @__PURE__ */ jsx10(Text, { $align: "left", children: "Next: Checkout" }),
-                            /* @__PURE__ */ jsx10(Icon2, { name: "arrow-right" })
-                          ]
-                        }
-                      )
-                    }
-                  ) : /* @__PURE__ */ jsx10(
-                    StyledButton,
-                    {
-                      disabled: !api || !selectedPlan || selectedPlan?.id === currentPlan?.id || !paymentMethodId || isLoading,
-                      onClick: async () => {
-                        const priceId = (planPeriod === "month" ? selectedPlan?.monthlyPrice : selectedPlan?.yearlyPrice)?.id;
-                        if (!api || !selectedPlan || !priceId || !paymentMethodId) {
-                          return;
-                        }
-                        try {
-                          setIsLoading(true);
-                          setIsCheckoutComplete(false);
-                          await api.checkout({
-                            changeSubscriptionRequestBody: {
-                              newPlanId: selectedPlan.id,
-                              newPriceId: priceId,
-                              paymentMethodId
-                            }
-                          });
-                          setIsCheckoutComplete(true);
-                        } catch {
-                          setError(
-                            "Error processing payment. Please try a different payment method."
-                          );
-                        } finally {
-                          setIsLoading(false);
-                        }
-                      },
-                      $size: "md",
-                      children: "Pay now"
-                    }
-                  ),
-                  /* @__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
-                    }
-                  ) })
-                ]
+                id: "link-authentication-element"
               }
             )
-          ]
-        }
-      )
-    ] })
-  ] });
+          }
+        ),
+        /* @__PURE__ */ jsx10(Box, { $marginBottom: "1.5rem", children: /* @__PURE__ */ jsx10(PaymentElement, { id: "payment-element" }) }),
+        /* @__PURE__ */ jsx10(
+          StyledButton,
+          {
+            id: "submit",
+            disabled: isLoading || !stripe || !elements || !data.stripeEmbed?.publishableKey || !data.stripeEmbed?.setupIntentClientSecret || isConfirmed,
+            $size: "md",
+            $color: "primary",
+            children: /* @__PURE__ */ jsx10(Text, { id: "button-text", children: isLoading ? "Loading" : "Save payment method" })
+          }
+        ),
+        message && /* @__PURE__ */ jsx10(Box, { $margin: "1rem 0", children: /* @__PURE__ */ jsx10(Text, { id: "payment-message", $size: 15, $weight: 500, $color: "#DB6669", children: message }) })
+      ]
+    }
+  );
 };
 
-// src/components/elements/plan-manager/PlanManager.tsx
-import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
-var resolveDesignProps = (props) => {
-  return {
-    header: {
-      isVisible: props.header?.isVisible ?? true,
-      title: {
-        fontStyle: props.header?.title?.fontStyle ?? "heading1"
-      },
-      description: {
-        isVisible: props.header?.description?.isVisible ?? true,
-        fontStyle: props.header?.description?.fontStyle ?? "text"
-      },
-      price: {
-        isVisible: props.header?.price?.isVisible ?? true,
-        fontStyle: props.header?.price?.fontStyle ?? "text"
+// src/components/elements/plan-manager/CheckoutDialog.tsx
+import { Fragment, jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
+var FeatureName = ({
+  entitlement
+}) => {
+  const theme = nt();
+  if (!entitlement.feature?.name) {
+    return null;
+  }
+  if (entitlement.valueType === "numeric" || entitlement.valueType === "trait") {
+    let period;
+    if (entitlement.metricPeriod) {
+      period = {
+        current_day: "day",
+        current_month: "mo",
+        current_year: "yr"
+      }[entitlement.metricPeriod];
+    }
+    return /* @__PURE__ */ jsx11(Flex, { $alignItems: "center", children: /* @__PURE__ */ jsxs6(
+      Text,
+      {
+        $font: theme.typography.text.fontFamily,
+        $size: theme.typography.text.fontSize,
+        $weight: theme.typography.text.fontWeight,
+        $color: theme.typography.text.color,
+        children: [
+          typeof entitlement.valueNumeric === "number" ? (0, import_pluralize.default)(
+            entitlement.feature.name,
+            entitlement.valueNumeric,
+            true
+          ) : `Unlimited ${(0, import_pluralize.default)(entitlement.feature.name)}`,
+          period && `/${period}`
+        ]
       }
-    },
-    addOns: {
-      isVisible: props.addOns?.isVisible ?? true,
-      fontStyle: props.addOns?.fontStyle ?? "heading4",
-      showLabel: props.addOns?.showLabel ?? true
-    },
-    callToAction: {
-      isVisible: props.callToAction?.isVisible ?? true,
-      buttonSize: props.callToAction?.buttonSize ?? "lg",
-      buttonStyle: props.callToAction?.buttonStyle ?? "primary"
+    ) });
+  }
+  return /* @__PURE__ */ jsx11(Flex, { $alignItems: "center", children: /* @__PURE__ */ jsx11(
+    Text,
+    {
+      $font: theme.typography.text.fontFamily,
+      $size: theme.typography.text.fontSize,
+      $weight: theme.typography.text.fontWeight,
+      $color: theme.typography.text.color,
+      children: entitlement.feature.name
     }
-  };
+  ) });
 };
-var PlanManager = forwardRef(({ children, className, portal, ...rest }, ref) => {
-  const props = resolveDesignProps(rest);
+var CheckoutDialog = () => {
   const theme = nt();
-  const { data, layout, stripe, setLayout } = useEmbed();
-  const { currentPlan, canChangePlan } = useMemo6(() => {
-    return {
-      currentPlan: data.company?.plan,
-      canChangePlan: stripe !== null
-    };
-  }, [data.company, stripe]);
-  return /* @__PURE__ */ jsxs6("div", { ref, className, children: [
-    /* @__PURE__ */ jsx11(
-      Flex,
-      {
-        $flexDirection: "column",
-        $gap: "0.75rem",
-        ...canChangePlan && { $margin: "0 0 0.5rem" },
-        children: props.header.isVisible && currentPlan && /* @__PURE__ */ jsxs6(
-          Flex,
+  const { api, data, setLayout } = useEmbed();
+  const [checkoutStage, setCheckoutStage] = useState3(
+    "plan"
+  );
+  const [planPeriod, setPlanPeriod] = useState3(
+    () => data.company?.plan?.planPeriod || "month"
+  );
+  const [selectedPlan, setSelectedPlan] = useState3();
+  const [paymentMethodId, setPaymentMethodId] = useState3();
+  const [isLoading, setIsLoading] = useState3(false);
+  const [error, setError] = useState3();
+  const [showPaymentForm, setShowPaymentForm] = useState3(
+    () => typeof data.subscription?.paymentMethod === "undefined"
+  );
+  const { paymentMethod, currentPlan, availablePlans, planPeriodOptions } = useMemo6(() => {
+    const showMonthlyPriceOption = data.activePlans.some(
+      (plan) => typeof plan.yearlyPrice !== "undefined"
+    );
+    const showYearlyPriceOption = data.activePlans.some(
+      (plan) => typeof plan.yearlyPrice !== "undefined"
+    );
+    const planPeriodOptions2 = [];
+    if (showMonthlyPriceOption) {
+      planPeriodOptions2.push("month");
+    }
+    if (showYearlyPriceOption) {
+      planPeriodOptions2.push("year");
+    }
+    return {
+      paymentMethod: data.subscription?.paymentMethod,
+      currentPlan: data.company?.plan,
+      availablePlans: data.activePlans.filter(
+        (plan) => plan.current || plan.yearlyPrice && planPeriod === "year" || plan.monthlyPrice && planPeriod === "month"
+      ),
+      planPeriodOptions: planPeriodOptions2
+    };
+  }, [
+    data.subscription?.paymentMethod,
+    data.company,
+    data.activePlans,
+    planPeriod
+  ]);
+  const savingsPercentage = useMemo6(() => {
+    if (selectedPlan) {
+      const monthly = (selectedPlan?.monthlyPrice?.price || 0) * 12;
+      const yearly = selectedPlan?.yearlyPrice?.price || 0;
+      return Math.round((monthly - yearly) / monthly * 1e4) / 100;
+    }
+    return 0;
+  }, [selectedPlan]);
+  const isLightBackground = useMemo6(() => {
+    return hexToHSL(theme.card.background).l > 50;
+  }, [theme.card.background]);
+  const allowCheckout = api && selectedPlan && selectedPlan?.id !== currentPlan?.id && (paymentMethod && !showPaymentForm || paymentMethodId) && !isLoading;
+  return /* @__PURE__ */ jsxs6(Modal, { size: "lg", children: [
+    /* @__PURE__ */ jsx11(ModalHeader, { bordered: true, children: /* @__PURE__ */ jsxs6(Flex, { $gap: "1rem", children: [
+      /* @__PURE__ */ jsxs6(Flex, { $gap: "0.5rem", $alignItems: "center", children: [
+        checkoutStage === "plan" ? /* @__PURE__ */ jsx11(
+          Box,
           {
-            $justifyContent: "space-between",
-            $alignItems: "center",
-            $width: "100%",
-            ...canChangePlan && { $margin: "0 0 1.5rem" },
-            children: [
-              /* @__PURE__ */ jsxs6("div", { children: [
-                /* @__PURE__ */ jsx11(Box, { $margin: "0 0 0.75rem", children: /* @__PURE__ */ jsx11(
+            $width: `${20 / TEXT_BASE_SIZE}rem`,
+            $height: `${20 / TEXT_BASE_SIZE}rem`,
+            $borderWidth: "2px",
+            $borderStyle: "solid",
+            $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.125)" : "hsla(0, 0%, 100%, 0.25)",
+            $borderRadius: "9999px"
+          }
+        ) : /* @__PURE__ */ jsx11(
+          IconRound,
+          {
+            name: "check",
+            colors: [
+              theme.card.background,
+              isLightBackground ? "hsla(0, 0%, 0%, 0.125)" : "hsla(0, 0%, 100%, 0.25)"
+            ],
+            style: {
+              fontSize: `${16 / TEXT_BASE_SIZE}rem`,
+              width: `${20 / TEXT_BASE_SIZE}rem`,
+              height: `${20 / TEXT_BASE_SIZE}rem`
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx11(
+          Box,
+          {
+            tabIndex: 0,
+            ...checkoutStage !== "plan" && {
+              onClick: () => setCheckoutStage("plan"),
+              $opacity: "0.6375",
+              $cursor: "pointer"
+            },
+            children: /* @__PURE__ */ jsx11(
+              Text,
+              {
+                $font: theme.typography.text.fontFamily,
+                $size: 19,
+                $weight: checkoutStage === "plan" ? 600 : 400,
+                $color: theme.typography.text.color,
+                children: "1. Select plan"
+              }
+            )
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx11(
+        Icon2,
+        {
+          name: "chevron-right",
+          style: {
+            fontSize: 16,
+            color: isLightBackground ? "hsla(0, 0%, 0%, 0.175)" : "hsla(0, 0%, 100%, 0.35)"
+          }
+        }
+      ),
+      /* @__PURE__ */ jsxs6(Flex, { $gap: "0.5rem", $alignItems: "center", children: [
+        /* @__PURE__ */ jsx11(
+          Box,
+          {
+            $width: `${20 / TEXT_BASE_SIZE}rem`,
+            $height: `${20 / TEXT_BASE_SIZE}rem`,
+            $borderWidth: "2px",
+            $borderStyle: "solid",
+            $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.125)" : "hsla(0, 0%, 100%, 0.25)",
+            $borderRadius: "9999px"
+          }
+        ),
+        /* @__PURE__ */ jsx11(
+          Box,
+          {
+            tabIndex: 0,
+            ...checkoutStage !== "checkout" && {
+              $opacity: "0.6375"
+            },
+            children: /* @__PURE__ */ jsx11(
+              Text,
+              {
+                $font: theme.typography.text.fontFamily,
+                $size: 19,
+                $weight: checkoutStage === "plan" ? 600 : 400,
+                $color: theme.typography.text.color,
+                children: "2. Checkout"
+              }
+            )
+          }
+        )
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxs6(Flex, { $position: "relative", $height: "calc(100% - 5rem)", children: [
+      /* @__PURE__ */ jsxs6(
+        Flex,
+        {
+          $flexDirection: "column",
+          $flexGrow: "1",
+          $gap: "1rem",
+          $padding: "2rem 2.5rem 2rem 2.5rem",
+          $backgroundColor: isLightBackground ? "hsla(0, 0%, 0%, 0.025)" : "hsla(0, 0%, 100%, 0.025)",
+          $flex: "1",
+          $overflow: "auto",
+          children: [
+            checkoutStage === "plan" && /* @__PURE__ */ jsxs6(Fragment, { children: [
+              /* @__PURE__ */ jsxs6(Flex, { $flexDirection: "column", $gap: "1rem", $marginBottom: "1rem", children: [
+                /* @__PURE__ */ jsx11(
                   Text,
                   {
-                    $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
+                    as: "h3",
+                    id: "select-plan-dialog-label",
+                    $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"
                   }
-                ) }),
-                props.header.description.isVisible && currentPlan.description && /* @__PURE__ */ jsx11(
+                ),
+                /* @__PURE__ */ jsx11(
                   Text,
                   {
-                    $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
+                    as: "p",
+                    id: "select-plan-dialog-description",
+                    $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"
                   }
                 )
               ] }),
-              props.header.price.isVisible && typeof currentPlan.planPrice === "number" && currentPlan.planPeriod && /* @__PURE__ */ jsxs6(
-                Text,
-                {
-                  $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),
-                    "/",
-                    currentPlan.planPeriod
-                  ]
-                }
-              )
-            ]
-          }
-        )
-      }
-    ),
-    canChangePlan && props.callToAction.isVisible && /* @__PURE__ */ jsx11(
-      StyledButton,
-      {
-        onClick: () => {
-          setLayout("checkout");
-        },
-        $size: props.callToAction.buttonSize,
-        $color: props.callToAction.buttonStyle,
-        children: "Change Plan"
-      }
-    ),
-    canChangePlan && layout === "checkout" && createPortal(/* @__PURE__ */ jsx11(CheckoutDialog, {}), portal || document.body)
-  ] });
-});
-
-// src/components/elements/included-features/IncludedFeatures.tsx
-import { forwardRef as forwardRef2, useMemo as useMemo7 } from "react";
-import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
-function resolveDesignProps2(props) {
-  return {
-    header: {
-      isVisible: props.header?.isVisible ?? true,
-      fontStyle: props.header?.fontStyle ?? "heading4",
-      text: props.header?.text ?? "Included features"
-    },
-    icons: {
-      isVisible: props.icons?.isVisible ?? true,
-      fontStyle: props.icons?.fontStyle ?? "heading5",
-      style: props.icons?.style ?? "light"
-    },
-    entitlement: {
-      isVisible: props.entitlement?.isVisible ?? true,
-      fontStyle: props.entitlement?.fontStyle ?? "text"
-    },
-    usage: {
-      isVisible: props.usage?.isVisible ?? true,
-      fontStyle: props.usage?.fontStyle ?? "heading6"
-    }
-  };
-}
-var IncludedFeatures = forwardRef2(({ className, ...rest }, ref) => {
-  const props = resolveDesignProps2(rest);
-  const theme = nt();
-  const { data } = useEmbed();
-  const features = useMemo7(() => {
-    return (data.featureUsage?.features || []).map(
-      ({
-        access,
-        allocation,
-        allocationType,
-        feature,
-        period,
-        usage = 0,
-        ...props2
-      }) => {
-        return {
-          access,
-          allocation,
-          allocationType,
-          feature,
-          period,
-          /**
-           * @TODO: resolve feature price
-           */
-          price: void 0,
-          usage,
-          ...props2
-        };
-      }
-    );
-  }, [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: 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
-      }
-    ) }),
-    features.reduce(
-      (acc, { allocation, allocationType, feature, usage }, index) => {
-        if (!allocationType) {
-          return acc;
-        }
-        return [
-          ...acc,
-          /* @__PURE__ */ jsxs7(
-            Flex,
-            {
-              $flexWrap: "wrap",
-              $justifyContent: "space-between",
-              $alignItems: "center",
-              $gap: "1rem",
-              children: [
-                /* @__PURE__ */ jsxs7(Flex, { $gap: "1rem", children: [
-                  props.icons.isVisible && feature?.icon && /* @__PURE__ */ jsx12(
-                    IconRound,
-                    {
-                      name: feature.icon,
-                      size: "sm",
-                      colors: [
-                        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(
+              /* @__PURE__ */ jsx11(Flex, { $flexWrap: "wrap", $gap: "1rem", $flexGrow: "1", children: availablePlans?.map((plan) => {
+                return /* @__PURE__ */ jsxs6(
+                  Flex,
+                  {
+                    $flexDirection: "column",
+                    $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: `${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: [
+                      /* @__PURE__ */ jsxs6(
+                        Flex,
+                        {
+                          $flexDirection: "column",
+                          $position: "relative",
+                          $gap: "1rem",
+                          $width: "100%",
+                          $height: "auto",
+                          $padding: `${theme.card.padding / TEXT_BASE_SIZE}rem`,
+                          $borderBottomWidth: "1px",
+                          $borderStyle: "solid",
+                          $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.175)" : "hsla(0, 0%, 100%, 0.175)",
+                          children: [
+                            /* @__PURE__ */ jsx11(Text, { $size: 20, $weight: 600, children: plan.name }),
+                            /* @__PURE__ */ jsx11(Text, { $size: 14, children: plan.description }),
+                            /* @__PURE__ */ jsxs6(Text, { children: [
+                              /* @__PURE__ */ jsx11(Box, { $display: "inline-block", $fontSize: "1.5rem", children: formatCurrency(
+                                (planPeriod === "month" ? plan.monthlyPrice : plan.yearlyPrice)?.price ?? 0
+                              ) }),
+                              /* @__PURE__ */ jsxs6(Box, { $display: "inline-block", $fontSize: "0.75rem", children: [
+                                "/",
+                                planPeriod
+                              ] })
+                            ] }),
+                            (plan.current || plan.id === currentPlan?.id) && /* @__PURE__ */ jsx11(
+                              Flex,
+                              {
+                                $position: "absolute",
+                                $right: "1rem",
+                                $top: "1rem",
+                                $fontSize: "0.625rem",
+                                $color: hexToHSL(theme.primary).l > 50 ? "#000000" : "#FFFFFF",
+                                $backgroundColor: theme.primary,
+                                $borderRadius: "9999px",
+                                $padding: "0.125rem 0.85rem",
+                                children: "Current plan"
+                              }
+                            )
+                          ]
+                        }
+                      ),
+                      /* @__PURE__ */ jsx11(
+                        Flex,
+                        {
+                          $flexDirection: "column",
+                          $position: "relative",
+                          $gap: "0.5rem",
+                          $flex: "1",
+                          $width: "100%",
+                          $height: "auto",
+                          $padding: "1.5rem",
+                          children: plan.entitlements.map((entitlement) => {
+                            return /* @__PURE__ */ jsx11(
+                              Flex,
+                              {
+                                $flexWrap: "wrap",
+                                $justifyContent: "space-between",
+                                $alignItems: "center",
+                                $gap: "1rem",
+                                children: /* @__PURE__ */ jsxs6(Flex, { $gap: "1rem", children: [
+                                  entitlement.feature?.icon && /* @__PURE__ */ jsx11(
+                                    IconRound,
+                                    {
+                                      name: entitlement.feature.icon,
+                                      size: "sm",
+                                      colors: [
+                                        theme.primary,
+                                        isLightBackground ? "hsla(0, 0%, 0%, 0.0625)" : "hsla(0, 0%, 100%, 0.25)"
+                                      ]
+                                    }
+                                  ),
+                                  /* @__PURE__ */ jsx11(FeatureName, { entitlement })
+                                ] })
+                              },
+                              entitlement.id
+                            );
+                          })
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs6(
+                        Flex,
+                        {
+                          $flexDirection: "column",
+                          $position: "relative",
+                          $gap: "1rem",
+                          $width: "100%",
+                          $height: "auto",
+                          $padding: "1.5rem",
+                          children: [
+                            plan.id === selectedPlan?.id && /* @__PURE__ */ jsxs6(
+                              Flex,
+                              {
+                                $justifyContent: "center",
+                                $alignItems: "center",
+                                $gap: "0.25rem",
+                                $fontSize: "0.9375rem",
+                                $padding: "0.625rem 0",
+                                children: [
+                                  /* @__PURE__ */ jsx11(
+                                    Icon2,
+                                    {
+                                      name: "check-rounded",
+                                      style: {
+                                        fontSize: 20,
+                                        lineHeight: "1",
+                                        color: theme.primary
+                                      }
+                                    }
+                                  ),
+                                  /* @__PURE__ */ jsx11(
+                                    Text,
+                                    {
+                                      $lineHeight: "1.4",
+                                      $color: theme.typography.text.color,
+                                      children: "Selected"
+                                    }
+                                  )
+                                ]
+                              }
+                            ),
+                            !(plan.current || plan.id === currentPlan?.id) && plan.id !== selectedPlan?.id && /* @__PURE__ */ jsx11(
+                              StyledButton,
+                              {
+                                disabled: plan.valid === false,
+                                ...plan.valid === true && {
+                                  onClick: () => setSelectedPlan(plan)
+                                },
+                                $size: "sm",
+                                $color: "primary",
+                                $variant: "outline",
+                                children: "Select"
+                              }
+                            )
+                          ]
+                        }
+                      )
+                    ]
+                  },
+                  plan.id
+                );
+              }) })
+            ] }),
+            selectedPlan && checkoutStage === "checkout" && /* @__PURE__ */ jsx11(Fragment, { children: showPaymentForm ? /* @__PURE__ */ jsxs6(Fragment, { children: [
+              /* @__PURE__ */ jsx11(
+                PaymentForm,
+                {
+                  plan: selectedPlan,
+                  period: planPeriod,
+                  onConfirm: (value) => {
+                    setPaymentMethodId(value);
+                  }
+                }
+              ),
+              typeof data.subscription?.paymentMethod !== "undefined" && /* @__PURE__ */ jsx11(
+                Box,
+                {
+                  tabIndex: 0,
+                  onClick: () => setShowPaymentForm(false),
+                  $cursor: "pointer",
+                  children: /* @__PURE__ */ jsx11(
                     Text,
                     {
-                      $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
+                      $font: theme.typography.link.fontFamily,
+                      $size: theme.typography.link.fontSize,
+                      $weight: theme.typography.link.fontWeight,
+                      $color: theme.typography.link.color,
+                      children: "Use existing payment method"
                     }
-                  ) })
-                ] }),
-                allocationType === "numeric" && feature?.name && /* @__PURE__ */ jsxs7(Box, { $textAlign: "right", children: [
-                  props.entitlement.isVisible && /* @__PURE__ */ jsx12(
+                  )
+                }
+              )
+            ] }) : /* @__PURE__ */ jsxs6(Fragment, { children: [
+              /* @__PURE__ */ jsx11(PaymentMethod, {}),
+              /* @__PURE__ */ jsx11(
+                Box,
+                {
+                  tabIndex: 0,
+                  onClick: () => setShowPaymentForm(true),
+                  $cursor: "pointer",
+                  children: /* @__PURE__ */ jsx11(
                     Text,
                     {
-                      as: Box,
-                      $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}`
+                      $font: theme.typography.link.fontFamily,
+                      $size: theme.typography.link.fontSize,
+                      $weight: theme.typography.link.fontWeight,
+                      $color: theme.typography.link.color,
+                      children: "Change payment method"
                     }
-                  ),
-                  props.usage.isVisible && /* @__PURE__ */ jsx12(
+                  )
+                }
+              )
+            ] }) })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs6(
+        Flex,
+        {
+          $flexDirection: "column",
+          $backgroundColor: theme.card.background,
+          $borderRadius: "0 0 0.5rem",
+          $width: "21.5rem",
+          $boxShadow: "0px 1px 20px 0px #1018280F, 0px 1px 3px 0px #1018281A;",
+          children: [
+            /* @__PURE__ */ jsxs6(
+              Flex,
+              {
+                $flexDirection: "column",
+                $position: "relative",
+                $gap: "1rem",
+                $width: "100%",
+                $height: "auto",
+                $padding: "1.5rem",
+                $borderBottomWidth: "1px",
+                $borderStyle: "solid",
+                $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.1)" : "hsla(0, 0%, 100%, 0.2)",
+                children: [
+                  /* @__PURE__ */ jsx11(Flex, { $justifyContent: "space-between", children: /* @__PURE__ */ jsx11(
                     Text,
                     {
-                      as: Box,
-                      $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`
+                      as: "h3",
+                      $font: theme.typography.heading3.fontFamily,
+                      $size: theme.typography.heading3.fontSize,
+                      $weight: theme.typography.heading3.fontWeight,
+                      $color: theme.typography.heading3.color,
+                      children: "Subscription"
                     }
-                  )
-                ] })
-              ]
-            },
-            index
-          )
-        ];
-      },
-      []
-    )
-  ] });
-});
-
-// src/components/elements/metered-features/MeteredFeatures.tsx
-import { forwardRef as forwardRef3, useMemo as useMemo8 } from "react";
-import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
-function resolveDesignProps3(props) {
-  return {
-    isVisible: props.isVisible ?? true,
-    header: {
-      fontStyle: props.header?.fontStyle ?? "heading2"
-    },
-    description: {
-      isVisible: props.description?.isVisible ?? true,
-      fontStyle: props.description?.fontStyle ?? "text"
-    },
-    icon: {
-      isVisible: props.icon?.isVisible ?? true
-    },
-    allocation: {
-      isVisible: props.allocation?.isVisible ?? true,
-      fontStyle: props.allocation?.fontStyle ?? "heading4"
-    },
-    usage: {
-      isVisible: props.usage?.isVisible ?? true,
-      fontStyle: props.usage?.fontStyle ?? "heading5"
-    },
-    callToAction: {
-      isVisible: props.callToAction?.isVisible ?? true,
-      buttonSize: props.callToAction?.buttonSize ?? "md",
-      buttonStyle: props.callToAction?.buttonStyle ?? "primary"
-    }
-  };
+                  ) }),
+                  planPeriodOptions.length > 1 && /* @__PURE__ */ jsxs6(
+                    Flex,
+                    {
+                      $borderWidth: "1px",
+                      $borderStyle: "solid",
+                      $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.1)" : "hsla(0, 0%, 100%, 0.2)",
+                      $borderRadius: "2.5rem",
+                      $cursor: "pointer",
+                      children: [
+                        /* @__PURE__ */ jsx11(
+                          Flex,
+                          {
+                            onClick: () => setPlanPeriod("month"),
+                            $justifyContent: "center",
+                            $alignItems: "center",
+                            $padding: "0.25rem 0.5rem",
+                            $flex: "1",
+                            ...planPeriod === "month" && {
+                              $backgroundColor: isLightBackground ? "hsla(0, 0%, 0%, 0.075)" : "hsla(0, 0%, 100%, 0.15)"
+                            },
+                            $borderRadius: "2.5rem",
+                            children: /* @__PURE__ */ jsx11(
+                              Text,
+                              {
+                                $font: theme.typography.text.fontFamily,
+                                $size: 14,
+                                $weight: planPeriod === "month" ? 600 : 400,
+                                $color: theme.typography.text.color,
+                                children: "Billed monthly"
+                              }
+                            )
+                          }
+                        ),
+                        /* @__PURE__ */ jsx11(
+                          Flex,
+                          {
+                            onClick: () => setPlanPeriod("year"),
+                            $justifyContent: "center",
+                            $alignItems: "center",
+                            $padding: "0.25rem 0.5rem",
+                            $flex: "1",
+                            ...planPeriod === "year" && {
+                              $backgroundColor: isLightBackground ? "hsla(0, 0%, 0%, 0.075)" : "hsla(0, 0%, 100%, 0.15)"
+                            },
+                            $borderRadius: "2.5rem",
+                            children: /* @__PURE__ */ jsx11(
+                              Text,
+                              {
+                                $font: theme.typography.text.fontFamily,
+                                $size: 14,
+                                $weight: planPeriod === "year" ? 600 : 400,
+                                $color: theme.typography.text.color,
+                                children: "Billed yearly"
+                              }
+                            )
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  savingsPercentage > 0 && /* @__PURE__ */ jsx11(Box, { children: /* @__PURE__ */ jsx11(
+                    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`
+                    }
+                  ) })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs6(
+              Flex,
+              {
+                $flexDirection: "column",
+                $position: "relative",
+                $gap: "1rem",
+                $width: "100%",
+                $height: "auto",
+                $padding: "1.5rem",
+                $flex: "1",
+                $borderBottomWidth: "1px",
+                $borderStyle: "solid",
+                $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.1)" : "hsla(0, 0%, 100%, 0.2)",
+                children: [
+                  /* @__PURE__ */ jsx11(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsx11(
+                    Text,
+                    {
+                      $font: theme.typography.text.fontFamily,
+                      $size: 14,
+                      $weight: theme.typography.text.fontWeight,
+                      $color: theme.typography.text.color,
+                      children: "Plan"
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsxs6(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
+                    currentPlan && /* @__PURE__ */ jsxs6(Flex, { $justifyContent: "space-between", $alignItems: "center", children: [
+                      /* @__PURE__ */ jsx11(
+                        Flex,
+                        {
+                          ...selectedPlan && {
+                            $opacity: "0.625",
+                            $textDecoration: "line-through"
+                          },
+                          children: /* @__PURE__ */ jsx11(
+                            Text,
+                            {
+                              $font: theme.typography.heading4.fontFamily,
+                              $size: theme.typography.heading4.fontSize,
+                              $weight: theme.typography.heading4.fontWeight,
+                              $color: theme.typography.heading4.color,
+                              children: currentPlan.name
+                            }
+                          )
+                        }
+                      ),
+                      typeof currentPlan.planPrice === "number" && currentPlan.planPeriod && /* @__PURE__ */ jsx11(Flex, { children: /* @__PURE__ */ jsxs6(
+                        Text,
+                        {
+                          $font: theme.typography.text.fontFamily,
+                          $size: theme.typography.text.fontSize,
+                          $weight: theme.typography.text.fontWeight,
+                          $color: theme.typography.text.color,
+                          children: [
+                            formatCurrency(currentPlan.planPrice),
+                            "/",
+                            currentPlan.planPeriod
+                          ]
+                        }
+                      ) })
+                    ] }),
+                    selectedPlan && /* @__PURE__ */ jsxs6(Fragment, { children: [
+                      /* @__PURE__ */ jsx11(
+                        Box,
+                        {
+                          $width: "100%",
+                          $textAlign: "left",
+                          $opacity: "50%",
+                          $marginBottom: "-0.25rem",
+                          $marginTop: "-0.25rem",
+                          children: /* @__PURE__ */ jsx11(
+                            Icon2,
+                            {
+                              name: "arrow-down",
+                              style: {
+                                display: "inline-block"
+                              }
+                            }
+                          )
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs6(Flex, { $justifyContent: "space-between", $alignItems: "center", children: [
+                        /* @__PURE__ */ jsx11(Flex, { children: /* @__PURE__ */ jsx11(
+                          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__ */ jsx11(Flex, { children: /* @__PURE__ */ jsxs6(
+                          Text,
+                          {
+                            $font: theme.typography.text.fontFamily,
+                            $size: theme.typography.text.fontSize,
+                            $weight: theme.typography.text.fontWeight,
+                            $color: theme.typography.text.color,
+                            children: [
+                              formatCurrency(
+                                (planPeriod === "month" ? selectedPlan.monthlyPrice : selectedPlan.yearlyPrice)?.price ?? 0
+                              ),
+                              "/",
+                              planPeriod
+                            ]
+                          }
+                        ) })
+                      ] })
+                    ] })
+                  ] })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs6(
+              Flex,
+              {
+                $flexDirection: "column",
+                $position: "relative",
+                $gap: "1rem",
+                $width: "100%",
+                $height: "auto",
+                $padding: "1.5rem",
+                children: [
+                  selectedPlan && /* @__PURE__ */ jsxs6(Flex, { $justifyContent: "space-between", children: [
+                    /* @__PURE__ */ jsx11(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsxs6(
+                      Text,
+                      {
+                        $font: theme.typography.text.fontFamily,
+                        $size: theme.typography.text.fontSize,
+                        $weight: theme.typography.text.fontWeight,
+                        $color: theme.typography.text.color,
+                        children: [
+                          planPeriod === "month" ? "Monthly" : "Yearly",
+                          " total:",
+                          " "
+                        ]
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsx11(Box, { children: /* @__PURE__ */ jsxs6(
+                      Text,
+                      {
+                        $font: theme.typography.text.fontFamily,
+                        $size: theme.typography.text.fontSize,
+                        $weight: theme.typography.text.fontWeight,
+                        $color: theme.typography.text.color,
+                        children: [
+                          formatCurrency(
+                            (planPeriod === "month" ? selectedPlan.monthlyPrice : selectedPlan.yearlyPrice)?.price ?? 0
+                          ),
+                          "/",
+                          planPeriod
+                        ]
+                      }
+                    ) })
+                  ] }),
+                  checkoutStage === "plan" ? /* @__PURE__ */ jsx11(
+                    StyledButton,
+                    {
+                      disabled: !selectedPlan,
+                      ...selectedPlan && {
+                        onClick: () => setCheckoutStage("checkout")
+                      },
+                      children: /* @__PURE__ */ jsxs6(
+                        Flex,
+                        {
+                          $gap: "0.5rem",
+                          $justifyContent: "center",
+                          $alignItems: "center",
+                          $padding: "0 1rem",
+                          children: [
+                            /* @__PURE__ */ jsx11(Text, { $align: "left", $lineHeight: 1, children: "Next: Checkout" }),
+                            /* @__PURE__ */ jsx11(Icon2, { name: "arrow-right" })
+                          ]
+                        }
+                      )
+                    }
+                  ) : /* @__PURE__ */ jsx11(
+                    StyledButton,
+                    {
+                      ...allowCheckout ? {
+                        onClick: async () => {
+                          const priceId = (planPeriod === "month" ? selectedPlan?.monthlyPrice : selectedPlan?.yearlyPrice)?.id;
+                          if (!priceId) {
+                            return;
+                          }
+                          try {
+                            setIsLoading(true);
+                            await api.checkout({
+                              changeSubscriptionRequestBody: {
+                                newPlanId: selectedPlan.id,
+                                newPriceId: priceId,
+                                ...paymentMethodId && { paymentMethodId }
+                              }
+                            });
+                            setLayout("success");
+                          } catch {
+                            setError(
+                              "Error processing payment. Please try a different payment method."
+                            );
+                          } finally {
+                            setIsLoading(false);
+                          }
+                        }
+                      } : { disabled: true },
+                      children: "Pay now"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx11(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsx11(
+                    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__ */ jsx11(Box, { children: /* @__PURE__ */ jsx11(
+                    Text,
+                    {
+                      $font: theme.typography.text.fontFamily,
+                      $size: theme.typography.text.fontSize,
+                      $weight: 500,
+                      $color: "#DB6669",
+                      children: error
+                    }
+                  ) })
+                ]
+              }
+            )
+          ]
+        }
+      )
+    ] })
+  ] });
+};
+
+// src/components/elements/plan-manager/PlanManager.tsx
+import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
+var resolveDesignProps2 = (props) => {
+  return {
+    header: {
+      isVisible: props.header?.isVisible ?? true,
+      title: {
+        fontStyle: props.header?.title?.fontStyle ?? "heading1"
+      },
+      description: {
+        isVisible: props.header?.description?.isVisible ?? true,
+        fontStyle: props.header?.description?.fontStyle ?? "text"
+      },
+      price: {
+        isVisible: props.header?.price?.isVisible ?? true,
+        fontStyle: props.header?.price?.fontStyle ?? "text"
+      }
+    },
+    addOns: {
+      isVisible: props.addOns?.isVisible ?? true,
+      fontStyle: props.addOns?.fontStyle ?? "heading4",
+      showLabel: props.addOns?.showLabel ?? true
+    },
+    callToAction: {
+      isVisible: props.callToAction?.isVisible ?? true,
+      buttonSize: props.callToAction?.buttonSize ?? "lg",
+      buttonStyle: props.callToAction?.buttonStyle ?? "primary"
+    }
+  };
+};
+var PlanManager = forwardRef2(({ children, className, portal, ...rest }, ref) => {
+  const props = resolveDesignProps2(rest);
+  const theme = nt();
+  const { data, layout, stripe, setLayout } = useEmbed();
+  const { currentPlan, canChangePlan } = useMemo7(() => {
+    return {
+      currentPlan: data.company?.plan,
+      canChangePlan: stripe !== null
+    };
+  }, [data.company, stripe]);
+  return /* @__PURE__ */ jsxs7("div", { ref, className, children: [
+    /* @__PURE__ */ jsx12(
+      Flex,
+      {
+        $flexDirection: "column",
+        $gap: "0.75rem",
+        ...canChangePlan && { $margin: "0 0 0.5rem" },
+        children: props.header.isVisible && currentPlan && /* @__PURE__ */ jsxs7(
+          Flex,
+          {
+            $justifyContent: "space-between",
+            $alignItems: "center",
+            $width: "100%",
+            ...canChangePlan && { $margin: "0 0 1.5rem" },
+            children: [
+              /* @__PURE__ */ jsxs7("div", { children: [
+                /* @__PURE__ */ jsx12(Box, { $margin: "0 0 0.75rem", children: /* @__PURE__ */ jsx12(
+                  Text,
+                  {
+                    $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
+                  }
+                ) }),
+                props.header.description.isVisible && currentPlan.description && /* @__PURE__ */ jsx12(
+                  Text,
+                  {
+                    $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
+                  }
+                )
+              ] }),
+              props.header.price.isVisible && typeof currentPlan.planPrice === "number" && currentPlan.planPeriod && /* @__PURE__ */ jsxs7(
+                Text,
+                {
+                  $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),
+                    "/",
+                    currentPlan.planPeriod
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      }
+    ),
+    canChangePlan && props.callToAction.isVisible && /* @__PURE__ */ jsx12(
+      StyledButton,
+      {
+        onClick: () => {
+          setLayout("checkout");
+        },
+        $size: props.callToAction.buttonSize,
+        $color: props.callToAction.buttonStyle,
+        children: "Change Plan"
+      }
+    ),
+    canChangePlan && layout === "checkout" && createPortal2(/* @__PURE__ */ jsx12(CheckoutDialog, {}), portal || document.body)
+  ] });
+});
+
+// src/components/elements/included-features/IncludedFeatures.tsx
+import { forwardRef as forwardRef3, useMemo as useMemo8 } from "react";
+var import_pluralize2 = __toESM(require_pluralize());
+import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
+function resolveDesignProps3(props) {
+  return {
+    header: {
+      isVisible: props.header?.isVisible ?? true,
+      fontStyle: props.header?.fontStyle ?? "heading4",
+      text: props.header?.text ?? "Included features"
+    },
+    icons: {
+      isVisible: props.icons?.isVisible ?? true,
+      fontStyle: props.icons?.fontStyle ?? "heading5",
+      style: props.icons?.style ?? "light"
+    },
+    entitlement: {
+      isVisible: props.entitlement?.isVisible ?? true,
+      fontStyle: props.entitlement?.fontStyle ?? "text"
+    },
+    usage: {
+      isVisible: props.usage?.isVisible ?? true,
+      fontStyle: props.usage?.fontStyle ?? "heading6"
+    }
+  };
 }
-var MeteredFeatures = forwardRef3(({ className, ...rest }, ref) => {
+var IncludedFeatures = forwardRef3(({ className, ...rest }, ref) => {
   const props = resolveDesignProps3(rest);
   const theme = nt();
   const { data } = useEmbed();
@@ -10995,7 +11592,7 @@ var MeteredFeatures = forwardRef3(({ className, ...rest }, ref) => {
         allocationType,
         feature,
         period,
-        usage,
+        usage = 0,
         ...props2
       }) => {
         return {
@@ -11014,470 +11611,323 @@ var MeteredFeatures = forwardRef3(({ className, ...rest }, ref) => {
       }
     );
   }, [data.featureUsage]);
-  return /* @__PURE__ */ jsx13(Flex, { ref, className, $flexDirection: "column", $gap: "1.5rem", children: features.reduce(
-    (acc, { allocation, allocationType, feature, usage }, index) => {
-      if (!props.isVisible || allocationType !== "numeric" || typeof allocation !== "number") {
-        return acc;
+  const isLightBackground = useMemo8(() => {
+    return hexToHSL(theme.card.background).l > 50;
+  }, [theme.card.background]);
+  return /* @__PURE__ */ jsxs8(Flex, { ref, className, $flexDirection: "column", $gap: "1.5rem", children: [
+    props.header.isVisible && /* @__PURE__ */ jsx13(Box, { children: /* @__PURE__ */ jsx13(
+      Text,
+      {
+        $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
       }
-      return [
-        ...acc,
-        /* @__PURE__ */ jsxs8(Flex, { $gap: "1.5rem", children: [
-          props.icon.isVisible && feature?.icon && /* @__PURE__ */ jsx13(Box, { $flexShrink: "0", children: /* @__PURE__ */ jsx13(IconRound, { name: feature.icon, size: "sm" }) }),
-          /* @__PURE__ */ jsxs8(Box, { $flexGrow: "1", children: [
-            /* @__PURE__ */ jsxs8(Flex, { children: [
-              feature?.name && /* @__PURE__ */ jsxs8(Box, { $flexGrow: "1", children: [
-                /* @__PURE__ */ jsx13(
-                  Text,
-                  {
-                    as: Box,
-                    $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
-                  }
-                ),
-                props.description.isVisible && /* @__PURE__ */ jsx13(
-                  Text,
-                  {
-                    as: Box,
-                    $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
-                  }
-                )
-              ] }),
-              allocationType === "numeric" && feature?.name && /* @__PURE__ */ jsxs8(Box, { $textAlign: "right", children: [
-                props.allocation.isVisible && /* @__PURE__ */ jsx13(
-                  Text,
-                  {
-                    as: Box,
-                    $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}`
-                  }
-                ),
-                props.usage.isVisible && /* @__PURE__ */ jsx13(
-                  Text,
-                  {
-                    as: Box,
-                    $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`
-                  }
-                )
-              ] })
-            ] }),
-            typeof usage === "number" && typeof allocation === "number" && /* @__PURE__ */ jsx13(Box, { children: /* @__PURE__ */ jsx13(
-              ProgressBar,
-              {
-                progress: usage / allocation * 100,
-                value: usage,
-                total: allocation,
-                color: "blue"
-              }
-            ) })
-          ] })
-        ] }, index)
-      ];
-    },
-    []
-  ) });
+    ) }),
+    features.reduce(
+      (acc, { allocation, allocationType, feature, usage }, index) => {
+        if (!allocationType) {
+          return acc;
+        }
+        return [
+          ...acc,
+          /* @__PURE__ */ jsxs8(
+            Flex,
+            {
+              $flexWrap: "wrap",
+              $justifyContent: "space-between",
+              $alignItems: "center",
+              $gap: "1rem",
+              children: [
+                /* @__PURE__ */ jsxs8(Flex, { $gap: "1rem", children: [
+                  props.icons.isVisible && feature?.icon && /* @__PURE__ */ jsx13(
+                    IconRound,
+                    {
+                      name: feature.icon,
+                      size: "sm",
+                      colors: [
+                        theme.primary,
+                        isLightBackground ? "hsla(0, 0%, 0%, 0.0625)" : "hsla(0, 0%, 100%, 0.25)"
+                      ]
+                    }
+                  ),
+                  feature?.name && /* @__PURE__ */ jsx13(Flex, { $alignItems: "center", children: /* @__PURE__ */ jsx13(
+                    Text,
+                    {
+                      $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
+                    }
+                  ) })
+                ] }),
+                allocationType === "numeric" && feature?.name && /* @__PURE__ */ jsxs8(Box, { $textAlign: "right", children: [
+                  props.entitlement.isVisible && /* @__PURE__ */ jsx13(
+                    Text,
+                    {
+                      as: Box,
+                      $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" ? (0, import_pluralize2.default)(feature.name, allocation, true) : `Unlimited ${(0, import_pluralize2.default)(feature.name)}`
+                    }
+                  ),
+                  props.usage.isVisible && /* @__PURE__ */ jsx13(
+                    Text,
+                    {
+                      as: Box,
+                      $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`
+                    }
+                  )
+                ] })
+              ]
+            },
+            index
+          )
+        ];
+      },
+      []
+    )
+  ] });
 });
 
-// src/components/elements/upcoming-bill/UpcomingBill.tsx
+// src/components/elements/metered-features/MeteredFeatures.tsx
 import { forwardRef as forwardRef4, useMemo as useMemo9 } from "react";
 import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
 function resolveDesignProps4(props) {
   return {
+    isVisible: props.isVisible ?? true,
     header: {
-      isVisible: props.header?.isVisible ?? true,
-      fontStyle: props.header?.fontStyle ?? "heading4",
-      prefix: props.header?.prefix ?? "Next bill due"
+      fontStyle: props.header?.fontStyle ?? "heading2"
     },
-    price: {
-      isVisible: props.price?.isVisible ?? true,
-      fontStyle: props.price?.fontStyle ?? "heading1"
+    description: {
+      isVisible: props.description?.isVisible ?? true,
+      fontStyle: props.description?.fontStyle ?? "text"
     },
-    contractEndDate: {
-      isVisible: props.contractEndDate?.isVisible ?? true,
-      fontStyle: props.contractEndDate?.fontStyle ?? "heading6",
-      prefix: props.contractEndDate?.prefix ?? "Contract ends"
-    }
-  };
-}
-var UpcomingBill = forwardRef4(({ className, ...rest }, ref) => {
-  const props = resolveDesignProps4(rest);
-  const theme = nt();
-  const { data, stripe } = useEmbed();
-  const { upcomingInvoice } = useMemo9(() => {
-    return {
-      upcomingInvoice: {
-        ...data.upcomingInvoice?.amountDue && {
-          amountDue: data.upcomingInvoice.amountDue
-        },
-        ...data.subscription?.interval && {
-          interval: data.subscription.interval
-        },
-        ...data.upcomingInvoice?.dueDate && {
-          dueDate: toPrettyDate(new Date(data.upcomingInvoice.dueDate))
-        }
-      }
-    };
-  }, [data.subscription, data.upcomingInvoice]);
-  if (!stripe || !upcomingInvoice.amountDue || !upcomingInvoice.dueDate) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxs9("div", { ref, className, children: [
-    props.header.isVisible && upcomingInvoice.dueDate && /* @__PURE__ */ jsx14(
-      Flex,
-      {
-        $justifyContent: "space-between",
-        $alignItems: "center",
-        $margin: "0 0 0.75rem",
-        children: /* @__PURE__ */ jsxs9(
-          Text,
-          {
-            $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,
-              " ",
-              upcomingInvoice.dueDate
-            ]
-          }
-        )
-      }
-    ),
-    upcomingInvoice.amountDue && /* @__PURE__ */ jsxs9(Flex, { $justifyContent: "space-between", $alignItems: "start", $gap: "1rem", children: [
-      props.price.isVisible && /* @__PURE__ */ jsx14(Flex, { $alignItems: "end", $flexGrow: "1", children: /* @__PURE__ */ jsx14(
-        Text,
-        {
-          $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)
-        }
-      ) }),
-      /* @__PURE__ */ jsx14(Box, { $maxWidth: "10rem", $lineHeight: "1", $textAlign: "right", children: /* @__PURE__ */ jsx14(
-        Text,
-        {
-          $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."
-        }
-      ) })
-    ] })
-  ] });
-});
-
-// src/components/elements/payment-method/PaymentMethod.tsx
-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) => {
-  return {
-    header: {
-      isVisible: props.header?.isVisible ?? true,
-      fontStyle: props.header?.fontStyle ?? "heading4"
+    icon: {
+      isVisible: props.icon?.isVisible ?? true
     },
-    functions: {
-      allowEdit: props.functions?.allowEdit ?? true
+    allocation: {
+      isVisible: props.allocation?.isVisible ?? true,
+      fontStyle: props.allocation?.fontStyle ?? "heading4"
+    },
+    usage: {
+      isVisible: props.usage?.isVisible ?? true,
+      fontStyle: props.usage?.fontStyle ?? "heading5"
+    },
+    callToAction: {
+      isVisible: props.callToAction?.isVisible ?? true,
+      buttonSize: props.callToAction?.buttonSize ?? "md",
+      buttonStyle: props.callToAction?.buttonStyle ?? "primary"
     }
   };
-};
-var PaymentMethod = forwardRef5(({ children, className, portal, ...rest }, ref) => {
-  const props = resolveDesignProps5(rest);
+}
+var MeteredFeatures = forwardRef4(({ className, ...rest }, ref) => {
+  const props = resolveDesignProps4(rest);
   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") {
-      const timeToExpiration = Math.round(
-        +new Date(cardExpYear, cardExpMonth - 1) - +/* @__PURE__ */ new Date()
-      );
-      monthsToExpiration = Math.round(
-        timeToExpiration / (1e3 * 60 * 60 * 24 * 30)
-      );
-    }
-    return {
-      cardLast4,
-      monthsToExpiration
-    };
-  }, [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: [
-    props.header.isVisible && /* @__PURE__ */ jsxs10(
-      Flex,
-      {
-        $justifyContent: "space-between",
-        $alignItems: "center",
-        $margin: "0 0 1rem",
-        children: [
-          /* @__PURE__ */ jsx15(
-            Text,
-            {
-              $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: theme.typography.text.fontFamily,
-              $size: 14,
-              $color: "#DB6769",
-              children: paymentMethod.monthsToExpiration > 0 ? `Expires in ${paymentMethod.monthsToExpiration} mo` : "Expired"
-            }
-          )
-        ]
-      }
-    ),
-    paymentMethod.cardLast4 && /* @__PURE__ */ jsx15(
-      Flex,
-      {
-        $justifyContent: "space-between",
-        $alignItems: "center",
-        $margin: "0 0 1rem",
-        $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: theme.typography.text.fontFamily, $size: 14, children: [
-          "\u{1F4B3} Card ending in ",
-          paymentMethod.cardLast4
-        ] })
+  const { data } = useEmbed();
+  const features = useMemo9(() => {
+    return (data.featureUsage?.features || []).map(
+      ({
+        access,
+        allocation,
+        allocationType,
+        feature,
+        period,
+        usage,
+        ...props2
+      }) => {
+        return {
+          access,
+          allocation,
+          allocationType,
+          feature,
+          period,
+          /**
+           * @TODO: resolve feature price
+           */
+          price: void 0,
+          usage,
+          ...props2
+        };
       }
-    ),
-    layout === "payment" && createPortal2(
-      /* @__PURE__ */ jsxs10(Modal, { size: "md", children: [
-        /* @__PURE__ */ jsx15(ModalHeader, { children: /* @__PURE__ */ jsx15(Box, { $fontWeight: "600", children: "Edit payment method" }) }),
-        /* @__PURE__ */ jsxs10(
-          Flex,
-          {
-            $flexDirection: "column",
-            $padding: "2.5rem",
-            $height: "100%",
-            $gap: "1.5rem",
-            children: [
-              /* @__PURE__ */ jsx15(
-                Flex,
-                {
-                  $flexDirection: "column",
-                  $gap: "1rem",
-                  $backgroundColor: "#FBFBFB",
-                  $borderRadius: "0 0 0.5rem 0.5rem",
-                  $flex: "1",
-                  $height: "100%",
-                  children: /* @__PURE__ */ jsxs10(Flex, { $flexDirection: "column", $height: "100%", children: [
-                    /* @__PURE__ */ jsx15(
-                      Box,
-                      {
-                        $fontSize: "18px",
-                        $marginBottom: "1.5rem",
-                        $display: "inline-block",
-                        $width: "100%",
-                        children: "Default"
-                      }
-                    ),
-                    /* @__PURE__ */ jsxs10(Flex, { $gap: "1rem", children: [
-                      /* @__PURE__ */ jsx15(
-                        Flex,
-                        {
-                          $alignItems: "center",
-                          $padding: ".5rem 1rem",
-                          $border: "1px solid #E2E5E9",
-                          $borderRadius: ".5rem",
-                          $backgroundColor: "#ffffff",
-                          $gap: "1rem",
-                          $width: "100%",
-                          children: /* @__PURE__ */ jsxs10(Flex, { $justifyContent: "space-between", $flex: "1", children: [
-                            /* @__PURE__ */ jsxs10(Flex, { $alignItems: "center", $gap: "1rem", children: [
-                              /* @__PURE__ */ jsx15(Box, { $display: "inline-block", children: /* @__PURE__ */ jsx15(
-                                "svg",
-                                {
-                                  viewBox: "0 0 24 16",
-                                  fill: "none",
-                                  xmlns: "http://www.w3.org/2000/svg",
-                                  width: "26px",
-                                  height: "auto",
-                                  children: /* @__PURE__ */ jsxs10("g", { children: [
-                                    /* @__PURE__ */ jsx15(
-                                      "rect",
-                                      {
-                                        stroke: "#DDD",
-                                        fill: "#FFF",
-                                        x: ".25",
-                                        y: ".25",
-                                        width: "23",
-                                        height: "15.5",
-                                        rx: "2"
-                                      }
-                                    ),
-                                    /* @__PURE__ */ jsx15(
-                                      "path",
-                                      {
-                                        d: "M2.788 5.914A7.201 7.201 0 0 0 1 5.237l.028-.125h2.737c.371.013.672.125.77.519l.595 2.836.182.854 1.666-4.21h1.799l-2.674 6.167H4.304L2.788 5.914Zm7.312 5.37H8.399l1.064-6.172h1.7L10.1 11.284Zm6.167-6.021-.232 1.333-.153-.066a3.054 3.054 0 0 0-1.268-.236c-.671 0-.972.269-.98.531 0 .29.365.48.96.762.98.44 1.435.979 1.428 1.681-.014 1.28-1.176 2.108-2.96 2.108-.764-.007-1.5-.158-1.898-.328l.238-1.386.224.099c.553.23.917.328 1.596.328.49 0 1.015-.19 1.022-.604 0-.27-.224-.466-.882-.769-.644-.295-1.505-.788-1.491-1.674C11.878 5.84 13.06 5 14.74 5c.658 0 1.19.138 1.526.263Zm2.26 3.834h1.415c-.07-.308-.392-1.786-.392-1.786l-.12-.531c-.083.23-.23.604-.223.59l-.68 1.727Zm2.1-3.985L22 11.284h-1.575s-.154-.71-.203-.926h-2.184l-.357.926h-1.785l2.527-5.66c.175-.4.483-.512.889-.512h1.316Z",
-                                        fill: "#1434CB"
-                                      }
-                                    )
-                                  ] })
-                                }
-                              ) }),
-                              /* @__PURE__ */ jsx15(Box, { $whiteSpace: "nowrap", children: "Visa **** 4242" })
-                            ] }),
-                            /* @__PURE__ */ jsx15(Flex, { $alignItems: "center", children: /* @__PURE__ */ jsx15(Box, { $fontSize: "12px", $color: "#5D5D5D", children: "Expires: 3/30" }) })
-                          ] })
-                        }
-                      ),
-                      /* @__PURE__ */ jsx15(Flex, { children: /* @__PURE__ */ jsx15(
-                        StyledButton,
-                        {
-                          $size: "sm",
-                          $color: "primary",
-                          $variant: "outline",
-                          style: {
-                            whiteSpace: "nowrap",
-                            paddingLeft: "1rem",
-                            paddingRight: "1rem"
-                          },
-                          children: "Edit"
-                        }
-                      ) })
-                    ] })
-                  ] })
-                }
-              ),
-              /* @__PURE__ */ jsx15(
-                Flex,
-                {
-                  $flexDirection: "column",
-                  $gap: "1rem",
-                  $backgroundColor: "#FBFBFB",
-                  $borderRadius: "0 0 0.5rem 0.5rem",
-                  $flex: "1",
-                  $height: "100%",
-                  children: /* @__PURE__ */ jsxs10(Flex, { $flexDirection: "column", $height: "100%", children: [
-                    /* @__PURE__ */ jsx15(
-                      Box,
-                      {
-                        $fontSize: "18px",
-                        $marginBottom: "1.5rem",
-                        $display: "inline-block",
-                        $width: "100%",
-                        children: "Others"
-                      }
-                    ),
-                    /* @__PURE__ */ jsxs10(Flex, { $gap: "1rem", children: [
-                      /* @__PURE__ */ jsx15(
-                        Flex,
-                        {
-                          $alignItems: "center",
-                          $padding: ".5rem 1rem",
-                          $border: "1px solid #E2E5E9",
-                          $borderRadius: ".5rem",
-                          $backgroundColor: "#ffffff",
-                          $gap: "1rem",
-                          $width: "100%",
-                          children: /* @__PURE__ */ jsxs10(Flex, { $justifyContent: "space-between", $flex: "1", children: [
-                            /* @__PURE__ */ jsxs10(Flex, { $alignItems: "center", $gap: "1rem", children: [
-                              /* @__PURE__ */ jsx15(Box, { $display: "inline-block", children: /* @__PURE__ */ jsx15(
-                                "svg",
-                                {
-                                  viewBox: "0 0 24 16",
-                                  fill: "none",
-                                  xmlns: "http://www.w3.org/2000/svg",
-                                  width: "26px",
-                                  height: "auto",
-                                  children: /* @__PURE__ */ jsxs10("g", { children: [
-                                    /* @__PURE__ */ jsx15(
-                                      "rect",
-                                      {
-                                        stroke: "#DDD",
-                                        fill: "#FFF",
-                                        x: ".25",
-                                        y: ".25",
-                                        width: "23",
-                                        height: "15.5",
-                                        rx: "2"
-                                      }
-                                    ),
-                                    /* @__PURE__ */ jsx15(
-                                      "path",
-                                      {
-                                        d: "M2.788 5.914A7.201 7.201 0 0 0 1 5.237l.028-.125h2.737c.371.013.672.125.77.519l.595 2.836.182.854 1.666-4.21h1.799l-2.674 6.167H4.304L2.788 5.914Zm7.312 5.37H8.399l1.064-6.172h1.7L10.1 11.284Zm6.167-6.021-.232 1.333-.153-.066a3.054 3.054 0 0 0-1.268-.236c-.671 0-.972.269-.98.531 0 .29.365.48.96.762.98.44 1.435.979 1.428 1.681-.014 1.28-1.176 2.108-2.96 2.108-.764-.007-1.5-.158-1.898-.328l.238-1.386.224.099c.553.23.917.328 1.596.328.49 0 1.015-.19 1.022-.604 0-.27-.224-.466-.882-.769-.644-.295-1.505-.788-1.491-1.674C11.878 5.84 13.06 5 14.74 5c.658 0 1.19.138 1.526.263Zm2.26 3.834h1.415c-.07-.308-.392-1.786-.392-1.786l-.12-.531c-.083.23-.23.604-.223.59l-.68 1.727Zm2.1-3.985L22 11.284h-1.575s-.154-.71-.203-.926h-2.184l-.357.926h-1.785l2.527-5.66c.175-.4.483-.512.889-.512h1.316Z",
-                                        fill: "#1434CB"
-                                      }
-                                    )
-                                  ] })
-                                }
-                              ) }),
-                              /* @__PURE__ */ jsx15(Box, { $whiteSpace: "nowrap", children: "Visa **** 2929" })
-                            ] }),
-                            /* @__PURE__ */ jsx15(Flex, { $alignItems: "center", children: /* @__PURE__ */ jsx15(Box, { $fontSize: "12px", $color: "#5D5D5D", children: "Expires: 3/30" }) })
-                          ] })
-                        }
-                      ),
-                      /* @__PURE__ */ jsxs10(Flex, { $gap: "1rem", children: [
-                        /* @__PURE__ */ jsx15(
-                          StyledButton,
-                          {
-                            $size: "sm",
-                            $color: "primary",
-                            $variant: "outline",
-                            style: {
-                              whiteSpace: "nowrap",
-                              paddingLeft: "1rem",
-                              paddingRight: "1rem"
-                            },
-                            children: "Make Default"
-                          }
-                        ),
-                        /* @__PURE__ */ jsx15(
-                          StyledButton,
-                          {
-                            $size: "sm",
-                            $color: "primary",
-                            $variant: "outline",
-                            style: {
-                              whiteSpace: "nowrap",
-                              paddingLeft: "1rem",
-                              paddingRight: "1rem"
-                            },
-                            children: "Edit"
-                          }
-                        )
-                      ] })
-                    ] })
-                  ] })
-                }
-              )
+    );
+  }, [data.featureUsage]);
+  return /* @__PURE__ */ jsx14(Flex, { ref, className, $flexDirection: "column", $gap: "1.5rem", children: features.reduce(
+    (acc, { allocation, allocationType, feature, usage }, index) => {
+      if (!props.isVisible || allocationType !== "numeric" || typeof allocation !== "number") {
+        return acc;
+      }
+      return [
+        ...acc,
+        /* @__PURE__ */ jsxs9(Flex, { $gap: "1.5rem", children: [
+          props.icon.isVisible && feature?.icon && /* @__PURE__ */ jsx14(Box, { $flexShrink: "0", children: /* @__PURE__ */ jsx14(IconRound, { name: feature.icon, size: "sm" }) }),
+          /* @__PURE__ */ jsxs9(Box, { $flexGrow: "1", children: [
+            /* @__PURE__ */ jsxs9(Flex, { children: [
+              feature?.name && /* @__PURE__ */ jsxs9(Box, { $flexGrow: "1", children: [
+                /* @__PURE__ */ jsx14(
+                  Text,
+                  {
+                    as: Box,
+                    $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
+                  }
+                ),
+                props.description.isVisible && /* @__PURE__ */ jsx14(
+                  Text,
+                  {
+                    as: Box,
+                    $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
+                  }
+                )
+              ] }),
+              allocationType === "numeric" && feature?.name && /* @__PURE__ */ jsxs9(Box, { $textAlign: "right", children: [
+                props.allocation.isVisible && /* @__PURE__ */ jsx14(
+                  Text,
+                  {
+                    as: Box,
+                    $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}`
+                  }
+                ),
+                props.usage.isVisible && /* @__PURE__ */ jsx14(
+                  Text,
+                  {
+                    as: Box,
+                    $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`
+                  }
+                )
+              ] })
+            ] }),
+            typeof usage === "number" && typeof allocation === "number" && /* @__PURE__ */ jsx14(Box, { children: /* @__PURE__ */ jsx14(
+              ProgressBar,
+              {
+                progress: usage / allocation * 100,
+                value: usage,
+                total: allocation,
+                color: "blue"
+              }
+            ) })
+          ] })
+        ] }, index)
+      ];
+    },
+    []
+  ) });
+});
+
+// src/components/elements/upcoming-bill/UpcomingBill.tsx
+import { forwardRef as forwardRef5, useMemo as useMemo10 } from "react";
+import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
+function resolveDesignProps5(props) {
+  return {
+    header: {
+      isVisible: props.header?.isVisible ?? true,
+      fontStyle: props.header?.fontStyle ?? "heading4",
+      prefix: props.header?.prefix ?? "Next bill due"
+    },
+    price: {
+      isVisible: props.price?.isVisible ?? true,
+      fontStyle: props.price?.fontStyle ?? "heading1"
+    },
+    contractEndDate: {
+      isVisible: props.contractEndDate?.isVisible ?? true,
+      fontStyle: props.contractEndDate?.fontStyle ?? "heading6",
+      prefix: props.contractEndDate?.prefix ?? "Contract ends"
+    }
+  };
+}
+var UpcomingBill = forwardRef5(({ className, ...rest }, ref) => {
+  const props = resolveDesignProps5(rest);
+  const theme = nt();
+  const { data, stripe } = useEmbed();
+  const { upcomingInvoice } = useMemo10(() => {
+    return {
+      upcomingInvoice: {
+        ...data.upcomingInvoice?.amountDue && {
+          amountDue: data.upcomingInvoice.amountDue
+        },
+        ...data.subscription?.interval && {
+          interval: data.subscription.interval
+        },
+        ...data.upcomingInvoice?.dueDate && {
+          dueDate: toPrettyDate(new Date(data.upcomingInvoice.dueDate))
+        }
+      }
+    };
+  }, [data.subscription, data.upcomingInvoice]);
+  if (!stripe || !upcomingInvoice.amountDue || !upcomingInvoice.dueDate) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs10("div", { ref, className, children: [
+    props.header.isVisible && upcomingInvoice.dueDate && /* @__PURE__ */ jsx15(
+      Flex,
+      {
+        $justifyContent: "space-between",
+        $alignItems: "center",
+        $margin: "0 0 0.75rem",
+        children: /* @__PURE__ */ jsxs10(
+          Text,
+          {
+            $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,
+              " ",
+              upcomingInvoice.dueDate
             ]
           }
         )
-      ] }),
-      portal || document.body
-    )
+      }
+    ),
+    upcomingInvoice.amountDue && /* @__PURE__ */ jsxs10(Flex, { $justifyContent: "space-between", $alignItems: "start", $gap: "1rem", children: [
+      props.price.isVisible && /* @__PURE__ */ jsx15(Flex, { $alignItems: "end", $flexGrow: "1", children: /* @__PURE__ */ jsx15(
+        Text,
+        {
+          $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)
+        }
+      ) }),
+      /* @__PURE__ */ jsx15(Box, { $maxWidth: "10rem", $lineHeight: "1", $textAlign: "right", children: /* @__PURE__ */ jsx15(
+        Text,
+        {
+          $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."
+        }
+      ) })
+    ] })
   ] });
 });
 
@@ -11583,7 +12033,7 @@ var Invoices = forwardRef6(({ className, ...rest }, ref) => {
 });
 
 // src/components/embed/ComponentTree.tsx
-import { useEffect as useEffect5, useState as useState4, Children } from "react";
+import { useEffect as useEffect5, useState as useState5, Children } from "react";
 
 // src/components/embed/renderer.ts
 import { createElement } from "react";
@@ -11592,7 +12042,7 @@ import { createElement } from "react";
 import { forwardRef as forwardRef7 } from "react";
 import { jsx as jsx17 } from "react/jsx-runtime";
 var Root = forwardRef7(
-  (props, ref) => {
+  ({ data, settings, ...props }, ref) => {
     return /* @__PURE__ */ jsx17("div", { ref, ...props });
   }
 );
@@ -11606,57 +12056,142 @@ var StyledViewport = dt.div`
   flex-wrap: wrap;
   margin-left: auto;
   margin-right: auto;
+  gap: 1rem;
 `;
 
-// src/components/layout/viewport/Viewport.tsx
+// src/components/layout/RenderLayout.tsx
+import { useState as useState4 } from "react";
+import { useEffect as useEffect4 } from "react";
 import { jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
+var DisabledState = () => {
+  const theme = nt();
+  return /* @__PURE__ */ jsx18(Box, { $width: "100%", children: /* @__PURE__ */ jsxs12(
+    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__ */ jsx18(
+          Box,
+          {
+            $marginBottom: "8px",
+            $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"
+          }
+        ),
+        /* @__PURE__ */ jsx18(
+          Box,
+          {
+            $marginBottom: "8px",
+            $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."
+          }
+        )
+      ]
+    }
+  ) });
+};
+var SuccessState = () => {
+  const [isOpen, setIsOpen] = useState4(true);
+  const theme = nt();
+  const { hydrate, data, api, setLayout, isPending } = useEmbed();
+  useEffect4(() => {
+    if (api && data.component?.id) {
+      hydrate();
+      setTimeout(() => setIsOpen(false), 2e3);
+    }
+  }, [api, data.component?.id, hydrate]);
+  useEffect4(() => {
+    if (!isPending && !isOpen) {
+      setLayout("portal");
+    }
+  }, [isPending, isOpen, setLayout]);
+  return /* @__PURE__ */ jsxs12(
+    Flex,
+    {
+      $flexDirection: "column",
+      $justifyContent: "center",
+      $alignItems: "center",
+      $gap: `${32 / TEXT_BASE_SIZE}rem`,
+      $width: "min-content",
+      $height: "min-content",
+      $margin: "auto",
+      $padding: `${theme.card.padding / TEXT_BASE_SIZE}rem ${theme.card.padding * 1.5 / TEXT_BASE_SIZE}rem`,
+      $whiteSpace: "nowrap",
+      $backgroundColor: theme.card.background,
+      $borderRadius: "0.5rem",
+      $boxShadow: "0px 1px 20px 0px #1018280F, 0px 1px 3px 0px #1018281A;",
+      children: [
+        /* @__PURE__ */ jsx18(
+          IconRound,
+          {
+            name: "check",
+            size: "3xl",
+            colors: [theme.card.background, theme.primary]
+          }
+        ),
+        /* @__PURE__ */ jsx18(
+          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__ */ jsx18(
+          Text,
+          {
+            as: "p",
+            $font: theme.typography.text.fontFamily,
+            $size: theme.typography.text.fontSize,
+            $weight: theme.typography.text.fontWeight,
+            $color: theme.typography.text.color,
+            children: "Loading..."
+          }
+        )
+      ]
+    }
+  );
+};
+var RenderLayout = ({ children }) => {
+  const { layout } = useEmbed();
+  switch (layout) {
+    case "disabled":
+      return /* @__PURE__ */ jsx18(DisabledState, {});
+    case "success":
+      return /* @__PURE__ */ jsx18(SuccessState, {});
+    default:
+      return children;
+  }
+};
+
+// src/components/layout/viewport/Viewport.tsx
+import { jsx as jsx19 } from "react/jsx-runtime";
 var Viewport = forwardRef8(
   ({ children, ...props }, ref) => {
     const theme = nt();
-    const { layout } = useEmbed();
-    return /* @__PURE__ */ jsx18(
+    return /* @__PURE__ */ jsx19(
       StyledViewport,
       {
         ref,
         $numberOfColumns: theme.numberOfColumns,
         ...props,
-        children: layout === "disabled" ? /* @__PURE__ */ jsx18(Box, { $width: "100%", children: /* @__PURE__ */ jsxs12(
-          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__ */ jsx18(
-                Box,
-                {
-                  $marginBottom: "8px",
-                  $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"
-                }
-              ),
-              /* @__PURE__ */ jsx18(
-                Box,
-                {
-                  $marginBottom: "8px",
-                  $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."
-                }
-              )
-            ]
-          }
-        ) }) : children
+        children: /* @__PURE__ */ jsx19(RenderLayout, { children })
       }
     );
   }
@@ -11727,11 +12262,11 @@ var StyledCard = dt.div(
 );
 
 // src/components/layout/card/Card.tsx
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx20 } from "react/jsx-runtime";
 var Card = forwardRef9(
   ({ children, className }, ref) => {
     const theme = nt();
-    return /* @__PURE__ */ jsx19(
+    return /* @__PURE__ */ jsx20(
       StyledCard,
       {
         ref,
@@ -11749,14 +12284,13 @@ var Card = forwardRef9(
 // src/components/layout/column/styles.ts
 var StyledColumn = dt.div`
   flex-grow: 1;
-  padding: 0.75rem;
 `;
 
 // src/components/layout/column/Column.tsx
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { jsx as jsx21 } from "react/jsx-runtime";
 var Column = forwardRef10(
-  ({ children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx20(StyledColumn, { ref, ...props, children: /* @__PURE__ */ jsx20(Card, { children }) });
+  ({ children, basis, ...props }, ref) => {
+    return /* @__PURE__ */ jsx21(StyledColumn, { ref, ...props, children: /* @__PURE__ */ jsx21(Card, { children }) });
   }
 );
 
@@ -11774,7 +12308,7 @@ var components = {
 function createRenderer(options) {
   const { useFallback = false } = options || {};
   return function renderNode(node2, index) {
-    const { type, props = {}, custom = {}, children } = node2;
+    const { type, props = {}, children } = node2;
     const name = typeof type !== "string" ? type.resolvedName : type;
     const component = useFallback ? components[name] || "div" : components[name];
     if (!components[name]) {
@@ -11792,40 +12326,20 @@ function createRenderer(options) {
     return createElement(
       component,
       {
+        key: index,
         className,
-        ...component !== "div" && { ...resolvedProps },
-        ...component !== "div" && Object.keys(custom).length > 0 && { custom },
-        key: index
+        ...component !== "div" && { ...resolvedProps }
       },
       resolvedChildren
     );
   };
 }
 
-// src/components/ui/loader/styles.ts
-var spin = mt`
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-`;
-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";
+import { Fragment as Fragment2, jsx as jsx22, jsxs as jsxs13 } from "react/jsx-runtime";
 var Loading = () => {
   const theme = nt();
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx22(
     Flex,
     {
       $width: "100%",
@@ -11833,7 +12347,7 @@ var Loading = () => {
       $alignItems: "center",
       $justifyContent: "center",
       $padding: `${theme.card.padding / TEXT_BASE_SIZE}rem`,
-      children: /* @__PURE__ */ jsx21(Loader, {})
+      children: /* @__PURE__ */ jsx22(Loader, {})
     }
   );
 };
@@ -11851,7 +12365,7 @@ var Error2 = ({ message }) => {
       $alignItems: "center",
       $justifyContent: "center",
       children: [
-        /* @__PURE__ */ jsx21(
+        /* @__PURE__ */ jsx22(
           Box,
           {
             $marginBottom: `${8 / TEXT_BASE_SIZE}rem`,
@@ -11862,7 +12376,7 @@ var Error2 = ({ message }) => {
             children: "404 Error"
           }
         ),
-        /* @__PURE__ */ jsx21(
+        /* @__PURE__ */ jsx22(
           Box,
           {
             $marginBottom: `${8 / TEXT_BASE_SIZE}rem`,
@@ -11879,30 +12393,30 @@ var Error2 = ({ message }) => {
 };
 var ComponentTree = () => {
   const { error, nodes } = useEmbed();
-  const [children, setChildren] = useState4(/* @__PURE__ */ jsx21(Loading, {}));
+  const [children, setChildren] = useState5(/* @__PURE__ */ jsx22(Loading, {}));
   useEffect5(() => {
     const renderer = createRenderer();
     setChildren(nodes.map(renderer));
   }, [nodes]);
   if (error) {
-    return /* @__PURE__ */ jsx21(Error2, { message: error.message });
+    return /* @__PURE__ */ jsx22(Error2, { message: error.message });
   }
   if (Children.count(children) === 0) {
-    return /* @__PURE__ */ jsx21(Loading, {});
+    return /* @__PURE__ */ jsx22(Loading, {});
   }
-  return /* @__PURE__ */ jsx21(Fragment2, { children });
+  return /* @__PURE__ */ jsx22(Fragment2, { children });
 };
 
 // src/components/embed/Embed.tsx
-import { jsx as jsx22 } from "react/jsx-runtime";
+import { jsx as jsx23 } from "react/jsx-runtime";
 var SchematicEmbed = ({ id, accessToken, apiConfig }) => {
   if (accessToken?.length === 0) {
-    return /* @__PURE__ */ jsx22("div", { children: "Please provide an access token." });
+    return /* @__PURE__ */ jsx23("div", { children: "Please provide an access token." });
   }
   if (!accessToken?.startsWith("token_")) {
-    return /* @__PURE__ */ jsx22("div", { children: 'Invalid access token; your temporary access token will start with "token_".' });
+    return /* @__PURE__ */ jsx23("div", { children: 'Invalid access token; your temporary access token will start with "token_".' });
   }
-  return /* @__PURE__ */ jsx22(EmbedProvider, { id, accessToken, apiConfig, children: /* @__PURE__ */ jsx22(ComponentTree, {}) });
+  return /* @__PURE__ */ jsx23(EmbedProvider, { id, accessToken, apiConfig, children: /* @__PURE__ */ jsx23(ComponentTree, {}) });
 };
 export {
   Box,
@@ -11916,6 +12430,7 @@ export {
   IconRound,
   IncludedFeatures,
   Invoices,
+  Loader,
   MeteredFeatures,
   Modal,
   ModalHeader,