npm - @schematichq/schematic-components - Versions diffs - 0.4.5 → 0.4.7 - Mend

@schematichq/schematic-components 0.4.5 → 0.4.7

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

Files changed (4) hide show

package/dist/schematic-components.cjs.js +753 -305
package/dist/schematic-components.d.ts +119 -4
package/dist/schematic-components.esm.js +730 -282
package/package.json +1 -1

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

@@ -2107,6 +2107,7 @@ __export(index_exports, {
   StyledCard: () => StyledCard,
   Text: () => Text,
   Tooltip: () => Tooltip,
+  UnsubscribeButton: () => UnsubscribeButton,
   UpcomingBill: () => UpcomingBill,
   Viewport: () => Viewport,
   cardBoxShadow: () => cardBoxShadow,
@@ -2123,7 +2124,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 // src/components/elements/included-features/IncludedFeatures.tsx
-var import_react32 = require("react");
+var import_react33 = require("react");
 // node_modules/react-i18next/dist/es/Trans.js
 var import_react3 = require("react");
@@ -10655,6 +10656,8 @@ function BillingSubscriptionResponseDataFromJSONTyped(json, ignoreDiscriminator)
     return json;
   }
   return {
+    cancelAt: json["cancel_at"] == null ? void 0 : json["cancel_at"],
+    cancelAtPeriodEnd: json["cancel_at_period_end"],
     companyId: json["company_id"] == null ? void 0 : json["company_id"],
     createdAt: new Date(json["created_at"]),
     currency: json["currency"],
@@ -10741,6 +10744,8 @@ function BillingSubscriptionViewFromJSONTyped(json, ignoreDiscriminator) {
     return json;
   }
   return {
+    cancelAt: json["cancel_at"] == null ? void 0 : json["cancel_at"],
+    cancelAtPeriodEnd: json["cancel_at_period_end"],
     companyId: json["company_id"] == null ? void 0 : json["company_id"],
     createdAt: new Date(json["created_at"]),
     currency: json["currency"],
@@ -10823,6 +10828,33 @@ function CheckoutResponseFromJSONTyped(json, ignoreDiscriminator) {
   };
 }
+// src/api/models/DeleteResponse.ts
+function DeleteResponseFromJSON(json) {
+  return DeleteResponseFromJSONTyped(json, false);
+}
+function DeleteResponseFromJSONTyped(json, ignoreDiscriminator) {
+  if (json == null) {
+    return json;
+  }
+  return {
+    deleted: json["deleted"] == null ? void 0 : json["deleted"]
+  };
+}
+// src/api/models/CheckoutUnsubscribeResponse.ts
+function CheckoutUnsubscribeResponseFromJSON(json) {
+  return CheckoutUnsubscribeResponseFromJSONTyped(json, false);
+}
+function CheckoutUnsubscribeResponseFromJSONTyped(json, ignoreDiscriminator) {
+  if (json == null) {
+    return json;
+  }
+  return {
+    data: DeleteResponseFromJSON(json["data"]),
+    params: json["params"]
+  };
+}
 // src/api/models/CompanyEventPeriodMetricsResponseData.ts
 function CompanyEventPeriodMetricsResponseDataFromJSON(json) {
   return CompanyEventPeriodMetricsResponseDataFromJSONTyped(json, false);
@@ -11322,6 +11354,8 @@ function CompanySubscriptionResponseDataFromJSONTyped(json, ignoreDiscriminator)
     return json;
   }
   return {
+    cancelAt: json["cancel_at"] == null ? void 0 : new Date(json["cancel_at"]),
+    cancelAtPeriodEnd: json["cancel_at_period_end"],
     currency: json["currency"],
     customerExternalId: json["customer_external_id"],
     discounts: json["discounts"].map(
@@ -11682,6 +11716,38 @@ var CheckoutexternalApi = class extends BaseAPI {
     const response = await this.checkoutRaw(requestParameters, initOverrides);
     return await response.value();
   }
+  /**
+   * Checkout unsubscribe
+   */
+  async checkoutUnsubscribeRaw(initOverrides) {
+    const queryParameters = {};
+    const headerParameters = {};
+    if (this.configuration && this.configuration.apiKey) {
+      headerParameters["X-Schematic-Api-Key"] = await this.configuration.apiKey(
+        "X-Schematic-Api-Key"
+      );
+    }
+    const response = await this.request(
+      {
+        path: `/checkout/unsubscribe`,
+        method: "DELETE",
+        headers: headerParameters,
+        query: queryParameters
+      },
+      initOverrides
+    );
+    return new JSONApiResponse(
+      response,
+      (jsonValue) => CheckoutUnsubscribeResponseFromJSON(jsonValue)
+    );
+  }
+  /**
+   * Checkout unsubscribe
+   */
+  async checkoutUnsubscribe(initOverrides) {
+    const response = await this.checkoutUnsubscribeRaw(initOverrides);
+    return await response.value();
+  }
   /**
    * Get setup intent
    */
@@ -11907,6 +11973,7 @@ var CheckoutexternalApi = class extends BaseAPI {
 var en_default = {
   translation: {
     "A problem occurred while saving your payment method.": "A problem occurred while saving your payment method.",
+    "Access to plan will end on": "Access to plan will end on {{date}}",
     Active: "Active",
     "Add payment method": "Add payment method",
     "Add Seats": "Add More",
@@ -11916,6 +11983,7 @@ var en_default = {
     "After the trial, cancel no default": "After the trial, you will be lose access to {{planName}} plan and your subscription will be cancelled.",
     Billed: "Billed {{period}}",
     "billing period": "billing period",
+    "Cancel subscription": "Cancel subscription",
     "Cannot downgrade entitlement": "Cannot downgrade to a lower quantity than current usage.",
     "Card ending in": "\u{1F4B3} Card ending in {{value}}",
     "Change add-on": "Change add-on",
@@ -11950,9 +12018,11 @@ var en_default = {
     Invoices: "Invoices",
     "Limit of": "Limit of {{amount}}",
     Loading: "Loading",
+    "Manage plan": "Manage plan",
     Monthly: "Monthly",
     Next: "Next",
     "No limit": "No limit",
+    "Not ready to cancel?": "Not ready to cancel?",
     "Optionally add features to your subscription": "Optionally add features to your subscription",
     "Other existing payment method": "Other existing payment method",
     "Over usage limit": "Over usage limit",
@@ -11979,10 +12049,13 @@ var en_default = {
     "Start trial": "Start trial",
     "Subscribe and close": "Subscribe and close",
     Subscription: "Subscription",
+    "Subscription canceled": "Subscription canceled",
     Trial: "Trial",
     "Trial ends in": "Trial ends in {{days}} days",
     "Trial plan": "Try free for {{days}} days",
     Unlimited: "Unlimited {{item}}",
+    Unsubscribe: "Unsubscribe",
+    "Unsubscribe failed": "Unsubscribe failed",
     "Unused time": "Unused time",
     Usage: "Usage",
     "Usage-based": "Usage-based",
@@ -11990,6 +12063,7 @@ var en_default = {
     "X% off": "{{percent}}% off",
     "X off": "{{amount}} off",
     Yearly: "Yearly",
+    "You will retain access to your plan until the end of the billing period, on": "You will retain access to your plan until the end of the billing period, on",
     day: "day",
     month: "month",
     per: "per",
@@ -12724,7 +12798,8 @@ var EmbedProvider = ({
   (0, import_react11.useEffect)(() => {
     const element = document.getElementById("schematic-fonts");
     if (element) {
-      return void (styleRef.current = element);
+      styleRef.current = element;
+      return;
     }
     const style = document.createElement("link");
     style.id = "schematic-fonts";
@@ -12735,7 +12810,7 @@ var EmbedProvider = ({
   (0, import_react11.useEffect)(() => {
     if (accessToken) {
       const { headers = {} } = apiConfig ?? {};
-      headers["X-Schematic-Components-Version"] = "0.4.5";
+      headers["X-Schematic-Components-Version"] = "0.4.7";
       headers["X-Schematic-Session-ID"] = sessionIdRef.current;
       const config = new Configuration({
         ...apiConfig,
@@ -12910,13 +12985,15 @@ function shortenPeriod(period) {
 }
 // src/utils/string.ts
+var DEFAULT_CURRENCY = "USD";
 function camelToHyphen(str) {
   return str.replace(/([a-z][A-Z])/g, (g2) => `${g2[0]}-${g2[1].toLowerCase()}`);
 }
 function formatNumber(num) {
   return new Intl.NumberFormat("en-US").format(num);
 }
-function formatCurrency(amount, currency = "USD") {
+function formatCurrency(amount, currency = DEFAULT_CURRENCY) {
+  const nonEmptyCurrency = currency ? currency.toUpperCase() : DEFAULT_CURRENCY;
   try {
     const dollars = amount / 100;
     const formatValue = (value, symbol) => {
@@ -12924,8 +13001,8 @@ function formatCurrency(amount, currency = "USD") {
       if (formatted.endsWith(".0")) {
         formatted = formatted.slice(0, -2);
       }
-      if (currency.toUpperCase() !== "USD") {
-        return `${currency.toUpperCase()}${formatted}${symbol}`;
+      if (nonEmptyCurrency !== DEFAULT_CURRENCY) {
+        return `${nonEmptyCurrency}${formatted}${symbol}`;
       }
       return `$${formatted}${symbol}`;
     };
@@ -12936,14 +13013,14 @@ function formatCurrency(amount, currency = "USD") {
     } else {
       return new Intl.NumberFormat("en-US", {
         style: "currency",
-        currency: currency.toUpperCase()
+        currency: nonEmptyCurrency
       }).format(dollars);
     }
   } catch (error) {
     console.error("Error formatting currency", error);
     return new Intl.NumberFormat("en-US", {
       style: "currency",
-      currency: currency.toUpperCase()
+      currency: nonEmptyCurrency
     }).format(amount / 100);
   }
 }
@@ -13180,7 +13257,7 @@ var Button2 = (0, import_react16.forwardRef)(
         disabled,
         ...props,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Loader, { $size: "sm", $isLoading: isLoading }),
+          isLoading && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Loader, { $size: "sm", $isLoading: isLoading }),
           children
         ]
       }
@@ -13257,8 +13334,6 @@ var EmbedButton = dt(Button2)`
   font-family: "Public Sans", sans-serif;
   font-weight: 500;
   text-align: center;
-  width: 100%;
-  padding: 0;
   ${({ disabled, $color = "primary", theme }) => {
   const { l: l2 } = hexToHSL(theme[$color]);
@@ -13388,6 +13463,38 @@ var EmbedButton = dt(Button2)`
         `;
   }
 }}
+  ${({ $alignment = "center" }) => {
+  switch ($alignment) {
+    case "start":
+      return lt`
+          justify-content: start;
+        `;
+    case "end":
+      return lt`
+          justify-content: end;
+        `;
+    case "center":
+    default:
+      return lt`
+          justify-content: center;
+        `;
+  }
+}}
+  ${({ $fullWidth = true }) => {
+  if ($fullWidth) {
+    return lt`
+        width: 100%;
+        padding: 0;
+      `;
+  }
+  return lt`
+      width: fit-content;
+      padding-left: 1rem;
+      padding-right: 1rem;
+    `;
+}}
 `;
 // src/components/ui/flex/styles.ts
@@ -14126,7 +14233,7 @@ var Root = (0, import_react20.forwardRef)(
 Root.displayName = "Root";
 // src/components/layout/viewport/Viewport.tsx
-var import_react28 = require("react");
+var import_react29 = require("react");
 var import_react_dom2 = require("react-dom");
 // src/components/shared/checkout-dialog/CheckoutDialog.tsx
@@ -14234,11 +14341,11 @@ var Navigation = ({
   ] });
 };
-// src/components/shared/checkout-dialog/Sidebar.tsx
+// src/components/shared/sidebar/Sidebar.tsx
 var import_react21 = require("react");
 var import_pluralize = __toESM(require_pluralize());
-// src/components/shared/checkout-dialog/StageButton.tsx
+// src/components/shared/sidebar/StageButton.tsx
 var import_jsx_runtime11 = require("react/jsx-runtime");
 var StageButton = ({
   canTrial,
@@ -14429,7 +14536,7 @@ var StageButton = ({
   }
 };
-// src/components/shared/checkout-dialog/Sidebar.tsx
+// src/components/shared/sidebar/Sidebar.tsx
 var import_jsx_runtime12 = require("react/jsx-runtime");
 var Sidebar = ({
   addOns,
@@ -14452,11 +14559,12 @@ var Sidebar = ({
   showPaymentForm,
   toggleLoading,
   updatePromoCode,
-  usageBasedEntitlements
+  usageBasedEntitlements,
+  showHeader = true
 }) => {
   const { t: t2 } = useTranslation();
   const theme = nt();
-  const { api, data, mode, setLayout } = useEmbed();
+  const { api, data, mode, layout, setLayout } = useEmbed();
   const isLightBackground = useIsLightBackground();
   const payInAdvanceEntitlements = usageBasedEntitlements.filter(
     ({ entitlement }) => entitlement.priceBehavior === "pay_in_advance"
@@ -14465,27 +14573,28 @@ var Sidebar = ({
     ({ entitlement }) => entitlement.priceBehavior === "pay_as_you_go"
   );
   const subscriptionPrice = (0, import_react21.useMemo)(() => {
-    if (!selectedPlan || !selectedPlan.monthlyPrice || !selectedPlan.yearlyPrice) {
+    const plan = selectedPlan || currentPlan;
+    if (!plan || !plan.monthlyPrice || !plan.yearlyPrice) {
       return;
     }
     let total = 0;
-    const planPrice = (planPeriod === "month" ? selectedPlan.monthlyPrice : selectedPlan.yearlyPrice)?.price;
-    const currency = (planPeriod === "month" ? selectedPlan.monthlyPrice : selectedPlan.yearlyPrice)?.currency;
+    const planPrice = (planPeriod === "month" ? plan.monthlyPrice : plan.yearlyPrice)?.price;
+    const currency = (planPeriod === "month" ? plan?.monthlyPrice : plan?.yearlyPrice)?.currency;
     if (planPrice) {
       total += planPrice;
     }
     const addOnCost = addOns.reduce(
-      (sum, addOn) => sum + (addOn.isSelected ? (planPeriod === "month" ? addOn.monthlyPrice : addOn.yearlyPrice)?.price || 0 : 0),
+      (sum, addOn) => sum + (addOn.isSelected ? (planPeriod === "month" ? addOn.monthlyPrice : addOn.yearlyPrice)?.price ?? 0 : 0),
       0
     );
     total += addOnCost;
     const payInAdvanceCost = payInAdvanceEntitlements.reduce(
-      (sum, { entitlement, quantity }) => sum + quantity * ((planPeriod === "month" ? entitlement.meteredMonthlyPrice : entitlement.meteredYearlyPrice)?.price || 0),
+      (sum, { entitlement, quantity }) => sum + quantity * ((planPeriod === "month" ? entitlement.meteredMonthlyPrice : entitlement.meteredYearlyPrice)?.price ?? 0),
       0
     );
     total += payInAdvanceCost;
     return formatCurrency(total, currency);
-  }, [selectedPlan, addOns, payInAdvanceEntitlements, planPeriod]);
+  }, [selectedPlan, currentPlan, planPeriod, addOns, payInAdvanceEntitlements]);
   const { amountOff, dueNow, newCharges, percentOff, periodStart, proration } = (0, import_react21.useMemo)(() => {
     return {
       amountOff: charges?.amountOff ?? 0,
@@ -14558,8 +14667,23 @@ var Sidebar = ({
     payInAdvanceEntitlements,
     promoCode
   ]);
+  const unsubscribe = (0, import_react21.useCallback)(async () => {
+    if (!api) {
+      return;
+    }
+    try {
+      setError(void 0);
+      toggleLoading();
+      await api.checkoutUnsubscribe();
+      setError("success");
+    } catch {
+      setError(t2("Unsubscribe failed"));
+    } finally {
+      toggleLoading();
+    }
+  }, [api, setError, t2, toggleLoading]);
   const selectedAddOns = addOns.filter((addOn) => addOn.isSelected);
-  const willPlanChange = typeof selectedPlan !== "undefined" && selectedPlan.current === false;
+  const willPlanChange = typeof selectedPlan !== "undefined" && !selectedPlan.current;
   const canUpdateSubscription = mode === "edit" || api !== null && (willPlanChange || // TODO: test add-on comparison for finding "changes"
   selectedAddOns.length !== currentAddOns.length || !selectedAddOns.every(
     (addOn) => currentAddOns.some((currentAddOn) => addOn.id === currentAddOn.id)
@@ -14639,7 +14763,7 @@ var Sidebar = ({
         }
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        showHeader && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           Flex,
           {
             $position: "relative",
@@ -15389,7 +15513,7 @@ var Sidebar = ({
                   ]
                 }
               ),
-              selectedPlan && subscriptionPrice && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+              subscriptionPrice && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
                 Flex,
                 {
                   $justifyContent: "space-between",
@@ -15492,11 +15616,11 @@ var Sidebar = ({
                   }
                 ) })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+              layout === "checkout" && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                 StageButton,
                 {
                   canTrial: selectedPlan?.companyCanTrial === true,
-                  canCheckout: canCheckout === true,
+                  canCheckout,
                   canUpdateSubscription,
                   checkout,
                   checkoutStage,
@@ -15509,6 +15633,16 @@ var Sidebar = ({
                   trialPaymentMethodRequired: data.trialPaymentMethodRequired === true
                 }
               ),
+              layout === "unsubscribe" && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                EmbedButton,
+                {
+                  onClick: async () => {
+                    unsubscribe();
+                  },
+                  isLoading,
+                  children: t2("Cancel subscription")
+                }
+              ),
               !isLoading && error && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                 Text,
                 {
@@ -15519,7 +15653,7 @@ var Sidebar = ({
                   children: error
                 }
               ) }),
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { $opacity: "0.625", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+              layout !== "unsubscribe" && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { $opacity: "0.625", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                 Text,
                 {
                   $font: theme.typography.text.fontFamily,
@@ -16614,7 +16748,7 @@ var CheckoutDialog = ({ top = 0 }) => {
     ),
     [usageBasedEntitlements]
   );
-  const hasActiveAddOns = addOns.some((addOn) => addOn.isSelected === true);
+  const hasActiveAddOns = addOns.some((addOn) => addOn.isSelected);
   const hasActivePayInAdvanceEntitlements = payInAdvanceEntitlements.some(
     ({ quantity }) => quantity > 0
   );
@@ -17224,20 +17358,234 @@ var PeriodToggle = ({
   );
 };
-// src/components/ui/badge/Badge.tsx
+// src/components/shared/unsubscribe-dialog/UnsubscribeDialog.tsx
+var import_react27 = require("react");
 var import_jsx_runtime20 = require("react/jsx-runtime");
+var UnsubscribeDialog = () => {
+  const { t: t2 } = useTranslation();
+  const theme = nt();
+  const { data, setSelected } = useEmbed();
+  const [error, setError] = (0, import_react27.useState)();
+  const [isLoading, setIsLoading] = (0, import_react27.useState)(false);
+  const planPeriod = (0, import_react27.useMemo)(
+    () => data.company?.plan?.planPeriod ?? "month",
+    [data.company?.plan?.planPeriod]
+  );
+  const { setLayout } = useEmbed();
+  const currentPlan = (0, import_react27.useMemo)(
+    () => ({
+      ...data.company?.plan,
+      monthlyPrice: { price: data.company?.plan?.planPrice },
+      yearlyPrice: { price: data.company?.plan?.planPrice }
+    }),
+    [data.company?.plan]
+  );
+  const currentAddOns = (0, import_react27.useMemo)(
+    () => data.company?.addOns || [],
+    [data.company?.addOns]
+  );
+  const addOns = (0, import_react27.useMemo)(
+    () => currentAddOns.map((addOn) => ({
+      ...addOn,
+      isSelected: true,
+      monthlyPrice: {
+        price: addOn.planPrice
+      },
+      yearlyPrice: {
+        price: addOn.planPrice
+      }
+    })),
+    [currentAddOns]
+  );
+  const currentUsageBasedEntitlements = (0, import_react27.useMemo)(
+    () => data.activeUsageBasedEntitlements.reduce(
+      (acc, usageData) => {
+        const featureUsage = data.featureUsage?.features.find(
+          (usage2) => usage2.feature?.id === usageData.featureId
+        );
+        const allocation = featureUsage?.allocation ?? 0;
+        const usage = featureUsage?.usage ?? 0;
+        acc.push({
+          entitlement: {
+            ...usageData,
+            id: featureUsage?.entitlementId ?? usageData.featureId,
+            feature: featureUsage?.feature,
+            meteredMonthlyPrice: usageData.meteredPrice,
+            meteredYearlyPrice: usageData.meteredPrice
+          },
+          usageData,
+          allocation,
+          quantity: allocation ?? usage,
+          usage
+        });
+        return acc;
+      },
+      []
+    ),
+    [data.activeUsageBasedEntitlements, data.featureUsage?.features]
+  );
+  const cancelDate = new Date(
+    data.subscription?.cancelAt || data.upcomingInvoice?.dueDate || Date.now()
+  );
+  const isLightBackground = useIsLightBackground();
+  const handleClose = (0, import_react27.useCallback)(() => {
+    setLayout("portal");
+  }, [setLayout]);
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(Modal, { id: "unsubscribe-dialog", size: "auto", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      Box,
+      {
+        $display: "inline-flex",
+        $position: "absolute",
+        $top: 0,
+        $right: 0,
+        $zIndex: 1,
+        $cursor: "pointer",
+        onClick: handleClose,
+        children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          Icon2,
+          {
+            name: "close",
+            style: {
+              fontSize: 36,
+              color: isLightBackground ? "hsla(0, 0%, 0%, 0.275)" : "hsla(0, 0%, 100%, 0.275)"
+            }
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+      Flex,
+      {
+        $position: "relative",
+        $flexDirection: "column",
+        $height: "auto",
+        $viewport: {
+          md: {
+            $flexDirection: "row",
+            $height: "calc(100% - 5rem)"
+          }
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+            Flex,
+            {
+              $flexDirection: "column",
+              $flexWrap: "wrap",
+              $justifyContent: "space-around",
+              $gap: "5rem",
+              $padding: "2.5rem",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(Flex, { $flexDirection: "column", $flexWrap: "wrap", $gap: "0.5rem", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                    Text,
+                    {
+                      as: "h2",
+                      $font: theme.typography.heading2.fontFamily,
+                      $size: theme.typography.heading2.fontSize,
+                      $weight: theme.typography.heading2.fontWeight,
+                      $color: theme.typography.heading2.color,
+                      children: t2("Cancel subscription")
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+                    Text,
+                    {
+                      as: "p",
+                      $font: theme.typography.text.fontFamily,
+                      $size: theme.typography.text.fontSize,
+                      $weight: theme.typography.text.fontWeight,
+                      $color: theme.typography.text.color,
+                      children: [
+                        t2(
+                          "You will retain access to your plan until the end of the billing period, on"
+                        ),
+                        " ",
+                        cancelDate ? toPrettyDate(cancelDate, {
+                          month: "numeric"
+                        }) : ""
+                      ]
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(Flex, { $flexDirection: "column", $flexWrap: "wrap", $gap: "0.5rem", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                    Text,
+                    {
+                      as: "p",
+                      $font: theme.typography.text.fontFamily,
+                      $size: theme.typography.text.fontSize,
+                      $weight: theme.typography.text.fontWeight,
+                      $color: theme.typography.text.color,
+                      children: t2("Not ready to cancel?")
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                    EmbedButton,
+                    {
+                      onClick: () => {
+                        setSelected({
+                          planId: currentPlan?.id,
+                          addOnId: void 0,
+                          usage: false
+                        });
+                        setLayout("checkout");
+                      },
+                      $size: "sm",
+                      $color: "secondary",
+                      $variant: "ghost",
+                      $fullWidth: false,
+                      children: t2("Manage plan")
+                    }
+                  )
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            Sidebar,
+            {
+              addOns,
+              checkoutStage: "checkout",
+              checkoutStages: [],
+              currentAddOns,
+              currentUsageBasedEntitlements,
+              error,
+              currentPlan,
+              isLoading,
+              planPeriod,
+              requiresPayment: false,
+              setCheckoutStage: () => {
+              },
+              setError: (msg) => setError(msg),
+              showPaymentForm: false,
+              toggleLoading: () => setIsLoading((prev2) => !prev2),
+              updatePromoCode: () => {
+              },
+              usageBasedEntitlements: currentUsageBasedEntitlements,
+              showHeader: false
+            }
+          )
+        ]
+      }
+    )
+  ] });
+};
+// src/components/ui/badge/Badge.tsx
+var import_jsx_runtime21 = require("react/jsx-runtime");
 var Badge = () => {
   const { t: t2 } = useTranslation();
   const { settings } = useEmbed();
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
     Flex,
     {
       $justifyContent: settings.badge?.alignment || "start",
       $alignItems: "center",
       $gridColumn: "1 / -1",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Box, { $fontSize: "0.75rem", $marginRight: "0.5rem", children: t2("Powered by") }),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Box, { $fontSize: "0.75rem", $marginRight: "0.5rem", children: t2("Powered by") }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
           "svg",
           {
             width: 86,
@@ -17245,77 +17593,77 @@ var Badge = () => {
             viewBox: "0 0 86 16",
             style: { marginTop: "0.125rem" },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                 "path",
                 {
                   d: "M21.2354 6.16227C21.1796 5.95015 21.0494 5.76779 20.8261 5.61893C20.6028 5.46635 20.3423 5.39564 20.0408 5.39564C19.3151 5.39564 18.7941 5.69708 18.7941 6.2367C18.7941 6.49721 18.9095 6.69073 19.1402 6.81726C19.3635 6.94379 19.732 7.07033 20.2344 7.18569C21.0084 7.37177 21.4922 7.51691 21.9686 7.7402C22.203 7.85557 22.3928 7.97465 22.5305 8.10863C22.7948 8.3803 22.9548 8.74501 22.9362 9.20276C22.9176 9.86147 22.6571 10.375 22.1547 10.7397C21.6523 11.1082 20.9563 11.2905 20.0818 11.2905C19.2072 11.2905 18.5597 11.1268 18.0312 10.8067C17.5065 10.4867 17.2013 10.0215 17.1194 9.41116L18.6192 9.27719C18.6974 9.57491 18.8723 9.7982 19.1514 9.94706C19.4305 10.0959 19.7394 10.1778 20.0818 10.1778C20.4614 10.1778 20.7777 10.0996 21.0308 9.9359C21.2838 9.77959 21.4104 9.56002 21.4104 9.28835C21.4104 8.90876 21.0531 8.61104 20.5991 8.43613C20.3683 8.35053 20.0855 8.27238 19.7468 8.19423C19.2705 8.07886 18.8946 7.97094 18.6155 7.87418C18.3364 7.78486 18.0908 7.66205 17.8712 7.51319C17.4358 7.21547 17.2832 6.8247 17.2832 6.2367C17.2832 5.61521 17.5325 5.13141 18.0312 4.79648C18.5262 4.46526 19.2035 4.29407 20.0669 4.29407C21.5853 4.29407 22.5752 4.9044 22.7389 6.05807L21.228 6.16227H21.2354Z",
                   fill: "currentColor"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                 "path",
                 {
                   d: "M29.4145 8.9796L30.7803 9.55271C30.49 10.0923 30.0621 10.5129 29.5001 10.8217C28.9382 11.1344 28.3167 11.2944 27.6319 11.2944C26.9472 11.2944 26.3629 11.1567 25.8121 10.8701C25.2613 10.5873 24.8147 10.1742 24.4835 9.6383C24.1523 9.09868 23.9811 8.48835 23.9811 7.79987C23.9811 7.11138 24.1486 6.49361 24.4835 5.95771C24.8147 5.41809 25.2613 5.00873 25.8121 4.72589C26.3629 4.44305 26.9732 4.30164 27.6319 4.30164C28.2906 4.30164 28.9382 4.45794 29.5038 4.77427C30.0658 5.08688 30.4938 5.51113 30.7803 6.05075L29.4145 6.62015C29.0535 5.93539 28.3985 5.56323 27.6319 5.56323C27.0327 5.56323 26.5303 5.77536 26.1135 6.19961C25.6967 6.62387 25.492 7.15977 25.492 7.80731C25.492 8.45486 25.6967 8.99076 26.1135 9.40757C26.5303 9.83182 27.0327 10.0439 27.6319 10.0439C28.3985 10.0439 29.0535 9.66807 29.4145 8.98703V8.9796Z",
                   fill: "currentColor"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                 "path",
                 {
                   d: "M37.4386 11.2049V7.80341C37.4386 6.35945 36.9139 5.59282 35.697 5.59282C35.0978 5.59282 34.614 5.7975 34.2419 6.21059C33.8623 6.61996 33.6725 7.15214 33.6725 7.80713V11.2086H32.1615V1.9234H33.6725V5.47745C34.1004 4.73315 35.001 4.29773 36.1919 4.29773C37.167 4.29773 37.8666 4.59917 38.302 5.19834C38.7375 5.7975 38.9533 6.66834 38.9533 7.80341V11.2049H37.4349H37.4386Z",
                   fill: "currentColor"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                 "path",
                 {
                   d: "M46.5692 5.38819C47.2167 6.07295 47.5777 7.1187 47.5107 8.30587H41.8242C41.9284 8.83805 42.1741 9.26602 42.5611 9.59352C42.9481 9.92473 43.4022 10.0885 43.9157 10.0885C44.8052 10.0885 45.5234 9.59724 45.8844 8.78222L47.1795 9.40372C46.8818 9.99172 46.4352 10.4495 45.8509 10.7881C45.2629 11.1268 44.6191 11.2943 43.9157 11.2943C42.9295 11.2943 42.0178 10.9444 41.3516 10.3453C40.6855 9.7461 40.2649 8.83432 40.2649 7.79602C40.2649 6.75771 40.6892 5.84222 41.3516 5.23933C42.0178 4.64017 42.9295 4.29034 43.9157 4.29034C44.9801 4.29034 45.9216 4.69971 46.5692 5.38447V5.38819ZM42.5388 6.00224C42.1592 6.32974 41.921 6.75772 41.8205 7.29734H46.0221C45.9179 6.75772 45.6835 6.3223 45.3039 5.99852C44.9243 5.67847 44.4628 5.51473 43.9195 5.51473C43.3761 5.51473 42.9221 5.67847 42.5425 6.00597L42.5388 6.00224Z",
                   fill: "currentColor"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                 "path",
                 {
                   d: "M59.7699 5.23933C60.1495 5.86827 60.3132 6.68329 60.3132 7.80347V11.2049H58.8023V7.80347C58.8023 6.35952 58.3371 5.59288 57.2318 5.59288C56.6438 5.59288 56.1861 5.79384 55.8586 6.19577C55.5311 6.60141 55.3673 7.13731 55.3673 7.80347V11.2049H53.8489V7.80347C53.8489 6.35952 53.3838 5.59288 52.2785 5.59288C51.6905 5.59288 51.2327 5.79384 50.9052 6.19577C50.574 6.60141 50.4102 7.13731 50.4102 7.80347V11.2049H48.8993V4.39827H50.3433L50.4102 5.47379C50.8196 4.65878 51.5825 4.29407 52.8106 4.29407C53.9606 4.29407 54.7161 4.78531 55.077 5.76407C55.5199 4.81508 56.4428 4.29407 57.7677 4.29407C58.7093 4.29407 59.3829 4.61412 59.7699 5.23562V5.23933Z",
                   fill: "currentColor"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                 "path",
                 {
                   d: "M67.4264 5.47382L67.4934 4.3983H68.9373V11.205H67.4934L67.4264 10.1294C67.0282 10.9147 66.1797 11.3092 64.8809 11.3017C63.102 11.3427 61.591 9.79823 61.6283 7.8035C61.591 5.8162 63.102 4.2606 64.8809 4.29782C66.0643 4.29782 67.0096 4.7444 67.4264 5.47754V5.47382ZM66.8049 9.37398C67.2217 8.95717 67.4264 8.43243 67.4264 7.79605C67.4264 7.15967 67.2217 6.64238 66.8049 6.21813C66.3881 5.80132 65.8782 5.58919 65.2828 5.58919C64.6874 5.58919 64.1887 5.80132 63.7719 6.21813C63.355 6.64238 63.1504 7.16711 63.1504 7.79605C63.1504 8.42499 63.355 8.95717 63.7719 9.37398C64.1887 9.79823 64.6911 10.0104 65.2828 10.0104C65.8745 10.0104 66.3881 9.79823 66.8049 9.37398Z",
                   fill: "currentColor"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                 "path",
                 {
                   d: "M71.3891 2.85757H72.8926V4.39828H74.6455V5.58172H72.8926V8.9683C72.8926 9.5898 73.1048 9.90985 73.5923 9.96568C73.89 10.0252 74.2398 10.0141 74.6455 9.9359V11.1863C74.1989 11.257 73.7858 11.2943 73.4062 11.2943C72.6731 11.2943 72.1595 11.1082 71.8543 10.7323C71.5454 10.3639 71.3891 9.79076 71.3891 9.02041V5.58172H70.4215V4.39828H71.3891V2.85757Z",
                   fill: "currentColor"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                 "path",
                 {
                   d: "M76.1747 3.15526C75.9923 2.98035 75.903 2.76078 75.903 2.50772C75.903 2.25466 75.9923 2.04997 76.1747 1.86762C76.3496 1.69271 76.5691 1.60339 76.8222 1.60339C77.0753 1.60339 77.2874 1.69271 77.4623 1.86762C77.6372 2.04997 77.7265 2.2621 77.7265 2.50772C77.7265 2.75334 77.6372 2.97291 77.4623 3.15526C77.2874 3.33762 77.0678 3.42694 76.8222 3.42694C76.5766 3.42694 76.3496 3.33762 76.1747 3.15526ZM76.0593 4.39826H77.5777V11.2049H76.0593V4.39826Z",
                   fill: "currentColor"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                 "path",
                 {
                   d: "M84.3023 8.9796L85.6681 9.55271C85.3778 10.0923 84.9498 10.5129 84.3879 10.8217C83.8259 11.1344 83.2044 11.2944 82.5197 11.2944C81.8349 11.2944 81.2506 11.1567 80.6998 10.8701C80.1491 10.5873 79.7025 10.1742 79.3713 9.6383C79.04 9.09868 78.8689 8.48835 78.8689 7.79987C78.8689 7.11138 79.0363 6.49361 79.3713 5.95771C79.7025 5.41809 80.1528 5.00873 80.6998 4.72589C81.2469 4.44305 81.8609 4.30164 82.5197 4.30164C83.1784 4.30164 83.8259 4.45794 84.3916 4.77427C84.9535 5.08688 85.3815 5.51113 85.6681 6.05075L84.3023 6.62015C83.9413 5.93539 83.2863 5.56323 82.5197 5.56323C81.9205 5.56323 81.4181 5.77536 81.0013 6.19961C80.5845 6.62387 80.3798 7.15977 80.3798 7.80731C80.3798 8.45486 80.5845 8.99076 81.0013 9.40757C81.4181 9.83182 81.9205 10.0439 82.5197 10.0439C83.2863 10.0439 83.9413 9.66807 84.3023 8.98703V8.9796Z",
                   fill: "currentColor"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                 "path",
                 {
                   d: "M5.93091 10.8141L7.2758 9.41753L3.83719 5.84667C2.98568 4.9624 2.98568 3.52157 3.83719 2.63731C4.68871 1.75305 6.07617 1.75305 6.92769 2.63731L10.3663 6.20817L11.7112 4.81156L8.27258 1.24069C6.67975 -0.413401 4.08513 -0.413401 2.4923 1.24069C0.899472 2.89479 0.899472 5.58919 2.4923 7.24328L5.93091 10.8141Z",
                   fill: "currentColor"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                 "path",
                 {
                   d: "M6.05827 3.54751C5.68761 3.1626 5.08404 3.1626 4.71338 3.54751C4.34272 3.93243 4.34272 4.55921 4.71338 4.94413L9.02103 9.41746L5.93054 12.6268L1.62288 8.15349C1.25223 7.76857 0.648653 7.76857 0.277994 8.15349C-0.0926647 8.5384 -0.0926647 9.16519 0.277994 9.5501L5.93054 15.4201L11.7108 9.41746L6.05827 3.54751Z",
@@ -17331,11 +17679,11 @@ var Badge = () => {
 };
 // src/components/layout/RenderLayout.tsx
-var import_react27 = require("react");
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_react28 = require("react");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 var Disabled = () => {
   const theme = nt();
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Box, { $width: "max-content", $height: "max-content", $margin: "0 auto", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Card, { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Box, { $width: "max-content", $height: "max-content", $margin: "0 auto", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Card, { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
     Element,
     {
       as: Flex,
@@ -17344,7 +17692,7 @@ var Disabled = () => {
       $alignItems: "center",
       $whiteSpace: "nowrap",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
           Text,
           {
             as: "h1",
@@ -17355,7 +17703,7 @@ var Disabled = () => {
             children: "Portal not found"
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
           Text,
           {
             as: "p",
@@ -17373,19 +17721,19 @@ var Disabled = () => {
 var Success = () => {
   const theme = nt();
   const { hydrate, data, api, setLayout, isPending } = useEmbed();
-  const [isOpen, setIsOpen] = (0, import_react27.useState)(true);
-  (0, import_react27.useEffect)(() => {
+  const [isOpen, setIsOpen] = (0, import_react28.useState)(true);
+  (0, import_react28.useEffect)(() => {
     if (api && data.component?.id) {
       hydrate();
       setTimeout(() => setIsOpen(false), 2e3);
     }
   }, [api, data.component?.id, hydrate]);
-  (0, import_react27.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     if (!isPending && !isOpen) {
       setLayout("portal");
     }
   }, [isPending, isOpen, setLayout]);
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Box, { $width: "max-content", $height: "max-content", $margin: "0 auto", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Card, { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Box, { $width: "max-content", $height: "max-content", $margin: "0 auto", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Card, { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
     Element,
     {
       as: Flex,
@@ -17394,7 +17742,7 @@ var Success = () => {
       $alignItems: "center",
       $whiteSpace: "nowrap",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Box, { $marginBottom: "1.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Box, { $marginBottom: "1.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
           IconRound,
           {
             name: "check",
@@ -17402,7 +17750,7 @@ var Success = () => {
             colors: [theme.card.background, theme.primary]
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
           Text,
           {
             as: "h1",
@@ -17413,7 +17761,7 @@ var Success = () => {
             children: "Subscription updated!"
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
           Text,
           {
             as: "p",
@@ -17432,9 +17780,9 @@ var RenderLayout = ({ children }) => {
   const { layout } = useEmbed();
   switch (layout) {
     case "disabled":
-      return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Disabled, {});
+      return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Disabled, {});
     case "success":
-      return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Success, {});
+      return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Success, {});
     default:
       return children;
   }
@@ -17459,14 +17807,14 @@ var StyledViewport = dt(Box).attrs(({ theme }) => ({
 `;
 // src/components/layout/viewport/Viewport.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
-var Viewport = (0, import_react28.forwardRef)(
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var Viewport = (0, import_react29.forwardRef)(
   ({ children, portal, ...props }, ref) => {
     const { data, layout } = useEmbed();
-    const [top, setTop] = (0, import_react28.useState)(0);
+    const [top, setTop] = (0, import_react29.useState)(0);
     const canCheckout = data.capabilities?.checkout ?? true;
-    (0, import_react28.useLayoutEffect)(() => {
-      if (layout !== "checkout") {
+    (0, import_react29.useLayoutEffect)(() => {
+      if (layout !== "checkout" && layout !== "unsubscribe") {
         return;
       }
       const parent = portal || document.body;
@@ -17479,22 +17827,23 @@ var Viewport = (0, import_react28.forwardRef)(
         parent.style.overflow = "";
       };
     }, [layout, portal]);
-    return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(StyledViewport, { ref, ...props, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(RenderLayout, { children }),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Badge, {})
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(StyledViewport, { ref, ...props, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(RenderLayout, { children }),
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Badge, {})
       ] }),
-      canCheckout && layout === "checkout" && (0, import_react_dom2.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(CheckoutDialog, { top }), portal || document.body)
+      canCheckout && layout === "checkout" && (0, import_react_dom2.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(CheckoutDialog, { top }), portal || document.body),
+      layout === "unsubscribe" && (0, import_react_dom2.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(UnsubscribeDialog, {}), portal || document.body)
     ] });
   }
 );
 Viewport.displayName = "Viewport";
 // src/components/layout/column/Column.tsx
-var import_react30 = require("react");
+var import_react31 = require("react");
 // src/components/layout/card/Card.tsx
-var import_react29 = require("react");
+var import_react30 = require("react");
 // src/components/layout/card/styles.ts
 var Element = dt(Box)``;
@@ -17537,10 +17886,10 @@ var StyledCard = dt.div(({ theme }) => {
 });
 // src/components/layout/card/Card.tsx
-var import_jsx_runtime23 = require("react/jsx-runtime");
-var Card = (0, import_react29.forwardRef)(
+var import_jsx_runtime24 = require("react/jsx-runtime");
+var Card = (0, import_react30.forwardRef)(
   ({ children, className }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(StyledCard, { ref, className, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(StyledCard, { ref, className, children });
   }
 );
 Card.displayName = "Card";
@@ -17551,18 +17900,18 @@ var StyledColumn = dt.div`
 `;
 // src/components/layout/column/Column.tsx
-var import_jsx_runtime24 = require("react/jsx-runtime");
-var Column = (0, import_react30.forwardRef)(
+var import_jsx_runtime25 = require("react/jsx-runtime");
+var Column = (0, import_react31.forwardRef)(
   ({ children, basis, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(StyledColumn, { ref, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Card, { children }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(StyledColumn, { ref, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Card, { children }) });
   }
 );
 Column.displayName = "Column";
 // src/components/elements/included-features/Details.tsx
-var import_react31 = require("react");
+var import_react32 = require("react");
 var import_pluralize4 = __toESM(require_pluralize());
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 var Details = ({
   details,
   shouldWrapChildren,
@@ -17580,7 +17929,7 @@ var Details = ({
   const { t: t2 } = useTranslation();
   const theme = nt();
   const { data } = useEmbed();
-  const currency = (0, import_react31.useMemo)(() => {
+  const currency = (0, import_react32.useMemo)(() => {
     if (data.company?.plan?.planPeriod === "month") {
       return monthlyUsageBasedPrice?.currency;
     }
@@ -17592,7 +17941,7 @@ var Details = ({
     monthlyUsageBasedPrice,
     yearlyUsageBasedPrice
   ]);
-  const price = (0, import_react31.useMemo)(() => {
+  const price = (0, import_react32.useMemo)(() => {
     if (data.company?.plan?.planPeriod === "month") {
       return monthlyUsageBasedPrice?.price;
     }
@@ -17604,7 +17953,7 @@ var Details = ({
     monthlyUsageBasedPrice,
     yearlyUsageBasedPrice
   ]);
-  const text = (0, import_react31.useMemo)(() => {
+  const text = (0, import_react32.useMemo)(() => {
     if (!feature?.name) {
       return;
     }
@@ -17621,7 +17970,7 @@ var Details = ({
       return t2("Unlimited", { item: (0, import_pluralize4.default)(feature.name) });
     }
   }, [allocation, feature?.name, price, priceBehavior, t2, currency]);
-  const usageText = (0, import_react31.useMemo)(() => {
+  const usageText = (0, import_react32.useMemo)(() => {
     if (!feature?.name) {
       return;
     }
@@ -17663,14 +18012,14 @@ var Details = ({
   if (!text) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
     Box,
     {
       $flexBasis: "min-content",
       $flexGrow: "1",
       $textAlign: shouldWrapChildren ? "left" : "right",
       children: [
-        props.entitlement.isVisible && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        props.entitlement.isVisible && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
           Text,
           {
             $font: theme.typography[props.entitlement.fontStyle].fontFamily,
@@ -17681,7 +18030,7 @@ var Details = ({
             children: text
           }
         ) }),
-        props.usage.isVisible && usageText && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        props.usage.isVisible && usageText && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
           Text,
           {
             $font: theme.typography[props.usage.fontStyle].fontFamily,
@@ -17698,7 +18047,7 @@ var Details = ({
 };
 // src/components/elements/included-features/IncludedFeatures.tsx
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 function resolveDesignProps(props) {
   return {
     header: {
@@ -17727,15 +18076,15 @@ function resolveDesignProps(props) {
     visibleFeatures: props.visibleFeatures
   };
 }
-var IncludedFeatures = (0, import_react32.forwardRef)(({ className, ...rest }, ref) => {
+var IncludedFeatures = (0, import_react33.forwardRef)(({ className, ...rest }, ref) => {
   const props = resolveDesignProps(rest);
   const { t: t2 } = useTranslation();
   const theme = nt();
   const { data } = useEmbed();
-  const elements = (0, import_react32.useRef)([]);
+  const elements = (0, import_react33.useRef)([]);
   const shouldWrapChildren = useWrapChildren(elements.current);
   const isLightBackground = useIsLightBackground();
-  const [showCount, setShowCount] = (0, import_react32.useState)(VISIBLE_ENTITLEMENT_COUNT);
+  const [showCount, setShowCount] = (0, import_react33.useState)(VISIBLE_ENTITLEMENT_COUNT);
   const entitlements = (props.visibleFeatures ? props.visibleFeatures : data.featureUsage?.features.sort((a2, b2) => {
     if (a2.feature?.name && b2.feature?.name && a2.feature?.name > b2.feature?.name) {
       return 1;
@@ -17779,7 +18128,7 @@ var IncludedFeatures = (0, import_react32.forwardRef)(({ className, ...rest }, r
   }
   const shouldShowExpand = featureListSize > VISIBLE_ENTITLEMENT_COUNT;
   const isExpanded = showCount > VISIBLE_ENTITLEMENT_COUNT;
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
     Element,
     {
       as: Flex,
@@ -17788,7 +18137,7 @@ var IncludedFeatures = (0, import_react32.forwardRef)(({ className, ...rest }, r
       $flexDirection: "column",
       $gap: "1rem",
       children: [
-        props.header.isVisible && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+        props.header.isVisible && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
           Text,
           {
             $font: theme.typography[props.header.fontStyle].fontFamily,
@@ -17801,7 +18150,7 @@ var IncludedFeatures = (0, import_react32.forwardRef)(({ className, ...rest }, r
         entitlements.slice(0, showCount).map((entitlement, index) => {
           const { entitlementExpirationDate, feature } = entitlement.featureUsage || {};
           const shouldShowDetails = feature?.name && (feature?.featureType === "event" || feature?.featureType === "trait");
-          return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+          return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
             Flex,
             {
               ref: (el) => {
@@ -17814,7 +18163,7 @@ var IncludedFeatures = (0, import_react32.forwardRef)(({ className, ...rest }, r
               $alignItems: "center",
               $gap: "1rem",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
                   Flex,
                   {
                     $alignItems: "center",
@@ -17822,7 +18171,7 @@ var IncludedFeatures = (0, import_react32.forwardRef)(({ className, ...rest }, r
                     $flexBasis: "min-content",
                     $gap: "1rem",
                     children: [
-                      props.icons.isVisible && feature?.icon && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+                      props.icons.isVisible && feature?.icon && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                         IconRound,
                         {
                           name: feature.icon,
@@ -17833,7 +18182,7 @@ var IncludedFeatures = (0, import_react32.forwardRef)(({ className, ...rest }, r
                           ]
                         }
                       ),
-                      feature?.name && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+                      feature?.name && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                         Text,
                         {
                           $font: theme.typography[props.icons.fontStyle].fontFamily,
@@ -17843,7 +18192,7 @@ var IncludedFeatures = (0, import_react32.forwardRef)(({ className, ...rest }, r
                           children: feature.name
                         }
                       ),
-                      props.entitlementExpiration.isVisible && entitlementExpirationDate && /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+                      props.entitlementExpiration.isVisible && entitlementExpirationDate && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
                         Text,
                         {
                           $font: theme.typography[props.entitlementExpiration.fontStyle].fontFamily,
@@ -17863,7 +18212,7 @@ var IncludedFeatures = (0, import_react32.forwardRef)(({ className, ...rest }, r
                     ]
                   }
                 ),
-                shouldShowDetails && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+                shouldShowDetails && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                   Details,
                   {
                     details: entitlement,
@@ -17876,8 +18225,8 @@ var IncludedFeatures = (0, import_react32.forwardRef)(({ className, ...rest }, r
             index
           );
         }),
-        shouldShowExpand && /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(Flex, { $alignItems: "center", $justifyContent: "start", $marginTop: "1rem", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+        shouldShowExpand && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(Flex, { $alignItems: "center", $justifyContent: "start", $marginTop: "1rem", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
             Icon2,
             {
               name: isExpanded ? "chevron-up" : "chevron-down",
@@ -17889,7 +18238,7 @@ var IncludedFeatures = (0, import_react32.forwardRef)(({ className, ...rest }, r
               }
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
             Text,
             {
               onClick: handleToggleShowAll,
@@ -17910,8 +18259,8 @@ var IncludedFeatures = (0, import_react32.forwardRef)(({ className, ...rest }, r
 IncludedFeatures.displayName = "IncludedFeatures";
 // src/components/elements/invoices/Invoices.tsx
-var import_react33 = require("react");
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_react34 = require("react");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 function resolveDesignProps2(props) {
   return {
     header: {
@@ -17947,7 +18296,7 @@ function formatInvoices(invoices) {
 }
 var InvoiceDate = ({ date, fontStyle, url }) => {
   const theme = nt();
-  const dateText = /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  const dateText = /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
     Text,
     {
       ...url && { onClick: () => {
@@ -17960,23 +18309,23 @@ var InvoiceDate = ({ date, fontStyle, url }) => {
     }
   );
   if (url) {
-    return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("a", { href: url, target: "_blank", rel: "noreferrer", children: dateText });
+    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("a", { href: url, target: "_blank", rel: "noreferrer", children: dateText });
   }
   return dateText;
 };
-var Invoices = (0, import_react33.forwardRef)(({ className, data, ...rest }, ref) => {
+var Invoices = (0, import_react34.forwardRef)(({ className, data, ...rest }, ref) => {
   const props = resolveDesignProps2(rest);
   const { t: t2 } = useTranslation();
   const theme = nt();
   const { api } = useEmbed();
-  const [invoices, setInvoices] = (0, import_react33.useState)(() => formatInvoices(data));
-  const [listSize, setListSize] = (0, import_react33.useState)(props.limit.number);
+  const [invoices, setInvoices] = (0, import_react34.useState)(() => formatInvoices(data));
+  const [listSize, setListSize] = (0, import_react34.useState)(props.limit.number);
   const toggleListSize = () => {
     setListSize(
       (prev2) => prev2 !== props.limit.number ? props.limit.number : MAX_VISIBLE_INVOICE_COUNT
     );
   };
-  (0, import_react33.useEffect)(() => {
+  (0, import_react34.useEffect)(() => {
     api?.listInvoices().then(({ data: data2 }) => {
       setInvoices(formatInvoices(data2));
     });
@@ -17984,8 +18333,8 @@ var Invoices = (0, import_react33.forwardRef)(({ className, data, ...rest }, ref
   if (invoices.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Element, { ref, className, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(Flex, { $flexDirection: "column", $gap: "1rem", children: [
-    props.header.isVisible && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Flex, { $justifyContent: "space-between", $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Element, { ref, className, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(Flex, { $flexDirection: "column", $gap: "1rem", children: [
+    props.header.isVisible && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Flex, { $justifyContent: "space-between", $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
       Text,
       {
         $font: theme.typography[props.header.fontStyle].fontFamily,
@@ -17995,9 +18344,9 @@ var Invoices = (0, import_react33.forwardRef)(({ className, data, ...rest }, ref
         children: t2("Invoices")
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Flex, { $flexDirection: "column", $gap: "0.5rem", children: invoices.slice(0, listSize).map(({ date, amount, url }, index) => {
-      return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(Flex, { $justifyContent: "space-between", children: [
-        props.date.isVisible && date && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Flex, { $flexDirection: "column", $gap: "0.5rem", children: invoices.slice(0, listSize).map(({ date, amount, url }, index) => {
+      return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(Flex, { $justifyContent: "space-between", children: [
+        props.date.isVisible && date && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
           InvoiceDate,
           {
             date,
@@ -18005,7 +18354,7 @@ var Invoices = (0, import_react33.forwardRef)(({ className, data, ...rest }, ref
             url
           }
         ),
-        props.amount.isVisible && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        props.amount.isVisible && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
           Text,
           {
             $font: theme.typography[props.amount.fontStyle].fontFamily,
@@ -18017,15 +18366,15 @@ var Invoices = (0, import_react33.forwardRef)(({ className, data, ...rest }, ref
         )
       ] }, index);
     }) }),
-    props.collapse.isVisible && invoices.length > props.limit.number && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(Flex, { $alignItems: "center", $gap: "0.5rem", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    props.collapse.isVisible && invoices.length > props.limit.number && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(Flex, { $alignItems: "center", $gap: "0.5rem", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
         Icon2,
         {
           name: `chevron-${listSize === props.limit.number ? "down" : "up"}`,
           style: { color: "#D0D0D0" }
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
         Text,
         {
           onClick: toggleListSize,
@@ -18042,7 +18391,7 @@ var Invoices = (0, import_react33.forwardRef)(({ className, data, ...rest }, ref
 Invoices.displayName = "Invoices";
 // src/components/elements/metered-features/MeteredFeatures.tsx
-var import_react34 = require("react");
+var import_react35 = require("react");
 var import_pluralize5 = __toESM(require_pluralize());
 // src/components/elements/metered-features/styles.ts
@@ -18063,7 +18412,7 @@ var Container4 = dt(Flex)`
 `;
 // src/components/elements/metered-features/MeteredFeatures.tsx
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 function resolveDesignProps3(props) {
   return {
     isVisible: props.isVisible ?? true,
@@ -18089,9 +18438,9 @@ function resolveDesignProps3(props) {
     visibleFeatures: props.visibleFeatures
   };
 }
-var MeteredFeatures = (0, import_react34.forwardRef)(({ className, ...rest }, ref) => {
+var MeteredFeatures = (0, import_react35.forwardRef)(({ className, ...rest }, ref) => {
   const props = resolveDesignProps3(rest);
-  const elements = (0, import_react34.useRef)([]);
+  const elements = (0, import_react35.useRef)([]);
   const shouldWrapChildren = useWrapChildren(elements.current);
   const { t: t2 } = useTranslation();
   const theme = nt();
@@ -18113,7 +18462,7 @@ var MeteredFeatures = (0, import_react34.forwardRef)(({ className, ...rest }, re
   if (!shouldShowFeatures) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Container4, { ref, className, children: featureUsage.map(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Container4, { ref, className, children: featureUsage.map(
     ({
       allocation,
       feature,
@@ -18132,8 +18481,8 @@ var MeteredFeatures = (0, import_react34.forwardRef)(({ className, ...rest }, re
         price = yearlyUsageBasedPrice?.price;
         currency = yearlyUsageBasedPrice?.currency;
       }
-      return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(Element, { as: Flex, $gap: "1.5rem", children: [
-        props.icon.isVisible && feature?.icon && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(Element, { as: Flex, $gap: "1.5rem", children: [
+        props.icon.isVisible && feature?.icon && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
           IconRound,
           {
             name: feature.icon,
@@ -18144,8 +18493,8 @@ var MeteredFeatures = (0, import_react34.forwardRef)(({ className, ...rest }, re
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(Flex, { $flexDirection: "column", $gap: "2rem", $flexGrow: "1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(Flex, { $flexDirection: "column", $gap: "2rem", $flexGrow: "1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
             Flex,
             {
               ref: (el) => {
@@ -18156,8 +18505,8 @@ var MeteredFeatures = (0, import_react34.forwardRef)(({ className, ...rest }, re
               $flexWrap: "wrap",
               $gap: "1rem",
               children: [
-                feature?.name && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(Flex, { $flexDirection: "column", $gap: "0.5rem", $flexGrow: "1", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                feature?.name && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(Flex, { $flexDirection: "column", $gap: "0.5rem", $flexGrow: "1", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                     Text,
                     {
                       as: Box,
@@ -18165,14 +18514,14 @@ var MeteredFeatures = (0, import_react34.forwardRef)(({ className, ...rest }, re
                       $size: theme.typography[props.header.fontStyle].fontSize,
                       $weight: theme.typography[props.header.fontStyle].fontWeight,
                       $color: theme.typography[props.header.fontStyle].color,
-                      children: priceBehavior === "pay_as_you_go" ? typeof usage === "number" && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
+                      children: priceBehavior === "pay_as_you_go" ? typeof usage === "number" && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
                         formatNumber(usage),
                         " ",
                         (0, import_pluralize5.default)(feature.name, usage)
                       ] }) : feature.name
                     }
                   ),
-                  props.description.isVisible && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                  props.description.isVisible && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                     Text,
                     {
                       as: Box,
@@ -18184,14 +18533,14 @@ var MeteredFeatures = (0, import_react34.forwardRef)(({ className, ...rest }, re
                     }
                   )
                 ] }),
-                (feature?.featureType === "event" || feature?.featureType === "trait") && feature?.name && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+                (feature?.featureType === "event" || feature?.featureType === "trait") && feature?.name && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
                   Box,
                   {
                     $flexBasis: "min-content",
                     $flexGrow: "1",
                     $textAlign: shouldWrapChildren ? "left" : "right",
                     children: [
-                      props.usage.isVisible && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                      props.usage.isVisible && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                         Text,
                         {
                           as: Box,
@@ -18200,18 +18549,18 @@ var MeteredFeatures = (0, import_react34.forwardRef)(({ className, ...rest }, re
                           $weight: theme.typography[props.usage.fontStyle].fontWeight,
                           $leading: 1.25,
                           $color: theme.typography[props.usage.fontStyle].color,
-                          children: priceBehavior === "pay_in_advance" ? typeof allocation === "number" && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
+                          children: priceBehavior === "pay_in_advance" ? typeof allocation === "number" && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
                             formatNumber(allocation),
                             " ",
                             (0, import_pluralize5.default)(feature.name, allocation)
-                          ] }) : priceBehavior === "pay_as_you_go" ? typeof price === "number" && typeof usage === "number" && formatCurrency(usage * price, currency) : typeof usage === "number" && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
+                          ] }) : priceBehavior === "pay_as_you_go" ? typeof price === "number" && typeof usage === "number" && formatCurrency(usage * price, currency) : typeof usage === "number" && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
                             formatNumber(usage),
                             " ",
                             (0, import_pluralize5.default)(feature.name, usage)
                           ] })
                         }
                       ),
-                      props.allocation.isVisible && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                      props.allocation.isVisible && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                         Text,
                         {
                           $font: theme.typography[props.allocation.fontStyle].fontFamily,
@@ -18235,8 +18584,8 @@ var MeteredFeatures = (0, import_react34.forwardRef)(({ className, ...rest }, re
               ]
             }
           ),
-          props.isVisible && typeof usage === "number" && typeof allocation === "number" && priceBehavior !== "pay_as_you_go" && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(Flex, { $gap: "2rem", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+          props.isVisible && typeof usage === "number" && typeof allocation === "number" && priceBehavior !== "pay_as_you_go" && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(Flex, { $gap: "2rem", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
               ProgressBar,
               {
                 progress: usage / allocation * 100,
@@ -18248,7 +18597,7 @@ var MeteredFeatures = (0, import_react34.forwardRef)(({ className, ...rest }, re
                 $flexGrow: "1"
               }
             ),
-            priceBehavior === "pay_in_advance" && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+            priceBehavior === "pay_in_advance" && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
               EmbedButton,
               {
                 onClick: () => {
@@ -18271,10 +18620,10 @@ var MeteredFeatures = (0, import_react34.forwardRef)(({ className, ...rest }, re
 MeteredFeatures.displayName = "MeteredFeatures";
 // src/components/elements/payment-method/PaymentMethod.tsx
-var import_react35 = require("react");
+var import_react36 = require("react");
 var import_react_dom3 = require("react-dom");
 var import_react_stripe_js3 = require("@stripe/react-stripe-js");
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 var PaymentElement2 = ({
   iconName,
   iconTitle,
@@ -18283,11 +18632,11 @@ var PaymentElement2 = ({
   paymentLast4
 }) => {
   const theme = nt();
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_jsx_runtime29.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Text, { $font: theme.typography.text.fontFamily, $size: 16, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(Flex, { $flexDirection: "row", $alignItems: "center", children: [
-    iconName && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Icon2, { name: iconName, title: iconTitle, style: iconStyles }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(Flex, { $alignItems: "center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Box, { $lineHeight: "1", $marginRight: "4px", children: t(label) }),
-      paymentLast4 && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Box, { $display: "inline-block", $fontWeight: "bold", children: paymentLast4 })
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_jsx_runtime30.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Text, { $font: theme.typography.text.fontFamily, $size: 16, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Flex, { $flexDirection: "row", $alignItems: "center", children: [
+    iconName && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Icon2, { name: iconName, title: iconTitle, style: iconStyles }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Flex, { $alignItems: "center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Box, { $lineHeight: "1", $marginRight: "4px", children: t(label) }),
+      paymentLast4 && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Box, { $display: "inline-block", $fontWeight: "bold", children: paymentLast4 })
     ] })
   ] }) }) });
 };
@@ -18385,16 +18734,16 @@ var PaymentMethodElement = ({
       iconTitle: genericLabel,
       label: genericLabel
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
       PaymentElement2,
       {
         ...paymentMethodElementProps(iconName, iconTitle, label, paymentLast4)
       }
     );
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(Flex, { $flexDirection: "column", $gap: `${sizeFactor}rem`, children: [
-    props.header.isVisible && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(Flex, { $justifyContent: "space-between", $alignItems: "center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Flex, { $flexDirection: "column", $gap: `${sizeFactor}rem`, children: [
+    props.header.isVisible && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Flex, { $justifyContent: "space-between", $alignItems: "center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
         Text,
         {
           $font: theme.typography[props.header.fontStyle].fontFamily,
@@ -18404,7 +18753,7 @@ var PaymentMethodElement = ({
           children: t2("Payment Method")
         }
       ),
-      props.functions.showExpiration && typeof monthsToExpiration === "number" && monthsToExpiration < 4 && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+      props.functions.showExpiration && typeof monthsToExpiration === "number" && monthsToExpiration < 4 && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
         Text,
         {
           $font: theme.typography.text.fontFamily,
@@ -18414,7 +18763,7 @@ var PaymentMethodElement = ({
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
       Flex,
       {
         $justifyContent: "space-between",
@@ -18424,7 +18773,7 @@ var PaymentMethodElement = ({
         $borderRadius: "9999px",
         children: [
           renderPaymentMethodElement(),
-          props.functions.allowEdit && onEdit && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+          props.functions.allowEdit && onEdit && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
             Text,
             {
               onClick: onEdit,
@@ -18441,24 +18790,24 @@ var PaymentMethodElement = ({
     )
   ] });
 };
-var PaymentMethod = (0, import_react35.forwardRef)(({ children, className, portal, allowEdit = true, ...rest }, ref) => {
+var PaymentMethod = (0, import_react36.forwardRef)(({ children, className, portal, allowEdit = true, ...rest }, ref) => {
   const props = resolveDesignProps4(rest);
   const { t: t2 } = useTranslation();
   const theme = nt();
   const { api, data, layout, setLayout } = useEmbed();
   const isLightBackground = useIsLightBackground();
-  const [isLoading, setIsLoading] = (0, import_react35.useState)(false);
-  const [error, setError] = (0, import_react35.useState)();
-  const [showPaymentForm, setShowPaymentForm] = (0, import_react35.useState)(
+  const [isLoading, setIsLoading] = (0, import_react36.useState)(false);
+  const [error, setError] = (0, import_react36.useState)();
+  const [showPaymentForm, setShowPaymentForm] = (0, import_react36.useState)(
     () => typeof data.subscription?.paymentMethod === "undefined"
   );
-  const [stripe, setStripe] = (0, import_react35.useState)(null);
-  const [setupIntent, setSetupIntent] = (0, import_react35.useState)();
-  const [top, setTop] = (0, import_react35.useState)(0);
-  const paymentMethod = (0, import_react35.useMemo)(() => {
+  const [stripe, setStripe] = (0, import_react36.useState)(null);
+  const [setupIntent, setSetupIntent] = (0, import_react36.useState)();
+  const [top, setTop] = (0, import_react36.useState)(0);
+  const paymentMethod = (0, import_react36.useMemo)(() => {
     return data.subscription?.paymentMethod;
   }, [data.subscription?.paymentMethod]);
-  const monthsToExpiration = (0, import_react35.useMemo)(() => {
+  const monthsToExpiration = (0, import_react36.useMemo)(() => {
     let expiration;
     if (typeof paymentMethod?.cardExpYear === "number" && typeof paymentMethod?.cardExpMonth === "number") {
       const today = /* @__PURE__ */ new Date();
@@ -18471,7 +18820,7 @@ var PaymentMethod = (0, import_react35.forwardRef)(({ children, className, porta
     }
     return expiration;
   }, [paymentMethod?.cardExpYear, paymentMethod?.cardExpMonth]);
-  const createSetupIntent = (0, import_react35.useCallback)(async () => {
+  const createSetupIntent = (0, import_react36.useCallback)(async () => {
     if (!api || !data.component?.id) {
       return;
     }
@@ -18490,7 +18839,7 @@ var PaymentMethod = (0, import_react35.forwardRef)(({ children, className, porta
       setIsLoading(false);
     }
   }, [t2, api, data.component?.id]);
-  const updatePaymentMethod = (0, import_react35.useCallback)(
+  const updatePaymentMethod = (0, import_react36.useCallback)(
     async (id) => {
       if (!api || !id) {
         return;
@@ -18511,12 +18860,12 @@ var PaymentMethod = (0, import_react35.forwardRef)(({ children, className, porta
     },
     [t2, api, setLayout]
   );
-  (0, import_react35.useEffect)(() => {
+  (0, import_react36.useEffect)(() => {
     if (!stripe && setupIntent?.publishableKey) {
       setStripe(loadStripe(setupIntent.publishableKey));
     }
   }, [stripe, setupIntent?.publishableKey]);
-  (0, import_react35.useLayoutEffect)(() => {
+  (0, import_react36.useLayoutEffect)(() => {
     const parent = portal || document.body;
     const value = Math.abs(
       (parent === document.body ? window.scrollY : parent.scrollTop) ?? 0
@@ -18530,8 +18879,8 @@ var PaymentMethod = (0, import_react35.forwardRef)(({ children, className, porta
   if (!paymentMethod?.paymentMethodType) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(Element, { ref, className, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Element, { ref, className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
       PaymentMethodElement,
       {
         paymentMethod,
@@ -18541,8 +18890,8 @@ var PaymentMethod = (0, import_react35.forwardRef)(({ children, className, porta
       }
     ),
     layout === "payment" && (0, import_react_dom3.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(Modal, { size: "md", top, onClose: () => setShowPaymentForm(false), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(ModalHeader, { bordered: true, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Modal, { size: "md", top, onClose: () => setShowPaymentForm(false), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(ModalHeader, { bordered: true, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
           Text,
           {
             $font: theme.typography.text.fontFamily,
@@ -18552,7 +18901,7 @@ var PaymentMethod = (0, import_react35.forwardRef)(({ children, className, porta
             children: t2("Edit payment method")
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Flex, { $position: "relative", $height: "calc(100% - 5rem)", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Flex, { $position: "relative", $height: "calc(100% - 5rem)", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
           Flex,
           {
             $flexDirection: "column",
@@ -18561,8 +18910,8 @@ var PaymentMethod = (0, import_react35.forwardRef)(({ children, className, porta
             $padding: "2rem 2.5rem 2rem 2.5rem",
             $backgroundColor: isLightBackground ? "hsla(0, 0%, 0%, 0.025)" : "hsla(0, 0%, 100%, 0.025)",
             $overflow: "auto",
-            children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
-              showPaymentForm ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_jsx_runtime30.Fragment, { children: [
+              showPaymentForm ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
                 import_react_stripe_js3.Elements,
                 {
                   stripe,
@@ -18591,15 +18940,15 @@ var PaymentMethod = (0, import_react35.forwardRef)(({ children, className, porta
                     },
                     clientSecret: setupIntent?.setupIntentClientSecret
                   },
-                  children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
                     PaymentForm,
                     {
                       onConfirm: (value) => updatePaymentMethod(value)
                     }
                   )
                 }
-              ) : /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(Flex, { $flexDirection: "column", $gap: "2rem", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+              ) : /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Flex, { $flexDirection: "column", $gap: "2rem", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
                   PaymentMethodElement,
                   {
                     size: "lg",
@@ -18608,7 +18957,7 @@ var PaymentMethod = (0, import_react35.forwardRef)(({ children, className, porta
                     ...props
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
                   Text,
                   {
                     onClick: createSetupIntent,
@@ -18620,7 +18969,7 @@ var PaymentMethod = (0, import_react35.forwardRef)(({ children, className, porta
                   }
                 ) })
               ] }),
-              !isLoading && error && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+              !isLoading && error && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
                 Text,
                 {
                   $font: theme.typography.text.fontFamily,
@@ -18641,9 +18990,9 @@ var PaymentMethod = (0, import_react35.forwardRef)(({ children, className, porta
 PaymentMethod.displayName = "PaymentMethod";
 // src/components/elements/plan-manager/PlanManager.tsx
-var import_react36 = require("react");
+var import_react37 = require("react");
 var import_pluralize6 = __toESM(require_pluralize());
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 var resolveDesignProps5 = (props) => {
   return {
     header: {
@@ -18672,7 +19021,7 @@ var resolveDesignProps5 = (props) => {
     }
   };
 };
-var PlanManager = (0, import_react36.forwardRef)(({ children, className, portal, ...rest }, ref) => {
+var PlanManager = (0, import_react37.forwardRef)(({ children, className, portal, ...rest }, ref) => {
   const props = resolveDesignProps5(rest);
   const theme = nt();
   const { t: t2 } = useTranslation();
@@ -18705,22 +19054,23 @@ var PlanManager = (0, import_react36.forwardRef)(({ children, className, portal,
     []
   );
   const billingSubscription = data.company?.billingSubscription;
-  const subscriptionCurrency = billingSubscription?.currency ?? "USD";
+  const subscriptionCurrency = billingSubscription?.currency;
   const showTrialBox = billingSubscription && billingSubscription.status == "trialing";
+  const showUnsubscribeBox = billingSubscription && billingSubscription.status == "cancelled";
   const trialEndDate = billingSubscription?.trialEnd ? new Date(billingSubscription.trialEnd * 1e3) : /* @__PURE__ */ new Date();
   const todayDate = /* @__PURE__ */ new Date();
   const trialEndDays = Math.floor(
     (trialEndDate.getTime() - todayDate.getTime()) / (1e3 * 60 * 60 * 24)
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_jsx_runtime30.Fragment, { children: [
-    showTrialBox && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
+    showTrialBox && !showUnsubscribeBox && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
       Box,
       {
         $backgroundColor: isLightBackground ? "hsla(0, 0%, 0%, 0.04)" : "hsla(0, 0%, 100%, 0.04)",
         $textAlign: "center",
         $padding: "1rem",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
             Text,
             {
               as: "h3",
@@ -18731,7 +19081,7 @@ var PlanManager = (0, import_react36.forwardRef)(({ children, className, portal,
               children: t2("Trial ends in", { days: trialEndDays.toString() })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
             Text,
             {
               as: "p",
@@ -18749,7 +19099,43 @@ var PlanManager = (0, import_react36.forwardRef)(({ children, className, portal,
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+    showUnsubscribeBox && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+      Box,
+      {
+        $backgroundColor: isLightBackground ? "hsla(0, 0%, 0%, 0.04)" : "hsla(0, 0%, 100%, 0.04)",
+        $textAlign: "center",
+        $padding: "1rem",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+            Text,
+            {
+              as: "h3",
+              $font: theme.typography.heading3.fontFamily,
+              $size: theme.typography.heading3.fontSize,
+              $weight: theme.typography.heading3.fontWeight,
+              $color: theme.typography.heading3.color,
+              children: t2("Subscription canceled")
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+            Text,
+            {
+              as: "p",
+              $font: theme.typography.text.fontFamily,
+              $size: theme.typography.text.fontSize * 0.8125,
+              $weight: theme.typography.text.fontWeight,
+              $color: theme.typography.text.color,
+              children: billingSubscription.cancelAt ? t2("Access to plan will end on", {
+                date: toPrettyDate(new Date(billingSubscription.cancelAt), {
+                  month: "numeric"
+                })
+              }) : ""
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
       Element,
       {
         as: Flex,
@@ -18758,7 +19144,7 @@ var PlanManager = (0, import_react36.forwardRef)(({ children, className, portal,
         $flexDirection: "column",
         $gap: "2rem",
         children: [
-          props.header.isVisible && currentPlan && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+          props.header.isVisible && currentPlan && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
             Flex,
             {
               $justifyContent: "space-between",
@@ -18766,8 +19152,8 @@ var PlanManager = (0, import_react36.forwardRef)(({ children, className, portal,
               $flexWrap: "wrap",
               $gap: "1rem",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Flex, { $flexDirection: "column", $gap: "1rem", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(Flex, { $flexDirection: "column", $gap: "1rem", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
                     Text,
                     {
                       as: Box,
@@ -18779,7 +19165,7 @@ var PlanManager = (0, import_react36.forwardRef)(({ children, className, portal,
                       children: currentPlan.name
                     }
                   ),
-                  props.header.description.isVisible && currentPlan.description && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                  props.header.description.isVisible && currentPlan.description && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
                     Text,
                     {
                       as: Box,
@@ -18791,8 +19177,8 @@ var PlanManager = (0, import_react36.forwardRef)(({ children, className, portal,
                     }
                   )
                 ] }),
-                props.header.price.isVisible && typeof currentPlan.planPrice === "number" && currentPlan.planPeriod && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Box, { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                props.header.price.isVisible && typeof currentPlan.planPrice === "number" && currentPlan.planPeriod && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(Box, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
                     Text,
                     {
                       $font: theme.typography[props.header.price.fontStyle].fontFamily,
@@ -18805,14 +19191,14 @@ var PlanManager = (0, import_react36.forwardRef)(({ children, className, portal,
                       )
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
                     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: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("sub", { children: [
+                      children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("sub", { children: [
                         "/",
                         shortenPeriod(currentPlan.planPeriod)
                       ] })
@@ -18822,8 +19208,8 @@ var PlanManager = (0, import_react36.forwardRef)(({ children, className, portal,
               ]
             }
           ),
-          props.addOns.isVisible && addOns.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Flex, { $flexDirection: "column", $gap: "1rem", children: [
-            props.addOns.showLabel && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+          props.addOns.isVisible && addOns.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(Flex, { $flexDirection: "column", $gap: "1rem", children: [
+            props.addOns.showLabel && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
               Text,
               {
                 $font: theme.typography.text.fontFamily,
@@ -18834,7 +19220,7 @@ var PlanManager = (0, import_react36.forwardRef)(({ children, className, portal,
                 children: t2("Add-ons")
               }
             ),
-            addOns.map((addOn) => /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+            addOns.map((addOn) => /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
               Flex,
               {
                 $justifyContent: "space-between",
@@ -18842,7 +19228,7 @@ var PlanManager = (0, import_react36.forwardRef)(({ children, className, portal,
                 $flexWrap: "wrap",
                 $gap: "1rem",
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
                     Text,
                     {
                       $font: theme.typography[props.addOns.fontStyle].fontFamily,
@@ -18852,7 +19238,7 @@ var PlanManager = (0, import_react36.forwardRef)(({ children, className, portal,
                       children: addOn.name
                     }
                   ),
-                  addOn.planPrice && addOn.planPeriod && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+                  addOn.planPrice && addOn.planPeriod && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
                     Text,
                     {
                       $font: theme.typography.text.fontFamily,
@@ -18861,7 +19247,7 @@ var PlanManager = (0, import_react36.forwardRef)(({ children, className, portal,
                       $color: theme.typography.text.color,
                       children: [
                         formatCurrency(addOn.planPrice, subscriptionCurrency),
-                        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("sub", { children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("sub", { children: [
                           "/",
                           shortenPeriod(addOn.planPeriod)
                         ] })
@@ -18873,8 +19259,8 @@ var PlanManager = (0, import_react36.forwardRef)(({ children, className, portal,
               addOn.id
             ))
           ] }),
-          usageBasedEntitlements.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Flex, { $flexDirection: "column", $gap: "1rem", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+          usageBasedEntitlements.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(Flex, { $flexDirection: "column", $gap: "1rem", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
               Text,
               {
                 $font: theme.typography.text.fontFamily,
@@ -18889,7 +19275,7 @@ var PlanManager = (0, import_react36.forwardRef)(({ children, className, portal,
               (acc, entitlement) => {
                 if (entitlement.feature?.name) {
                   acc.push(
-                    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+                    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
                       Flex,
                       {
                         $justifyContent: "space-between",
@@ -18897,14 +19283,14 @@ var PlanManager = (0, import_react36.forwardRef)(({ children, className, portal,
                         $flexWrap: "wrap",
                         $gap: "1rem",
                         children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
                             Text,
                             {
                               $font: theme.typography[props.addOns.fontStyle].fontFamily,
                               $size: theme.typography[props.addOns.fontStyle].fontSize,
                               $weight: theme.typography[props.addOns.fontStyle].fontWeight,
                               $color: theme.typography[props.addOns.fontStyle].color,
-                              children: entitlement.priceBehavior === "pay_in_advance" ? /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_jsx_runtime30.Fragment, { children: [
+                              children: entitlement.priceBehavior === "pay_in_advance" ? /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
                                 entitlement.quantity,
                                 " ",
                                 (0, import_pluralize6.default)(
@@ -18914,8 +19300,8 @@ var PlanManager = (0, import_react36.forwardRef)(({ children, className, portal,
                               ] }) : entitlement.feature.name
                             }
                           ),
-                          /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Flex, { $alignItems: "center", $gap: "1rem", children: [
-                            entitlement.priceBehavior === "pay_in_advance" && currentPlan?.planPeriod && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+                          /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(Flex, { $alignItems: "center", $gap: "1rem", children: [
+                            entitlement.priceBehavior === "pay_in_advance" && currentPlan?.planPeriod && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
                               Text,
                               {
                                 $font: theme.typography.text.fontFamily,
@@ -18927,7 +19313,7 @@ var PlanManager = (0, import_react36.forwardRef)(({ children, className, portal,
                                     entitlement.price,
                                     entitlement.currencyCode
                                   ),
-                                  /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("sub", { children: [
+                                  /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("sub", { children: [
                                     "/",
                                     (0, import_pluralize6.default)(
                                       entitlement.feature.name.toLowerCase(),
@@ -18939,7 +19325,7 @@ var PlanManager = (0, import_react36.forwardRef)(({ children, className, portal,
                                 ]
                               }
                             ),
-                            /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+                            /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
                               Text,
                               {
                                 $font: theme.typography.text.fontFamily,
@@ -18951,7 +19337,7 @@ var PlanManager = (0, import_react36.forwardRef)(({ children, className, portal,
                                     entitlement.price * (entitlement.priceBehavior === "pay_in_advance" ? entitlement.quantity : 1),
                                     entitlement.currencyCode
                                   ),
-                                  /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("sub", { children: [
+                                  /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("sub", { children: [
                                     "/",
                                     currentPlan?.planPeriod && entitlement.priceBehavior === "pay_in_advance" ? shortenPeriod(currentPlan.planPeriod) : (0, import_pluralize6.default)(
                                       entitlement.feature.name.toLowerCase(),
@@ -18973,7 +19359,7 @@ var PlanManager = (0, import_react36.forwardRef)(({ children, className, portal,
               []
             )
           ] }),
-          canCheckout && props.callToAction.isVisible && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+          canCheckout && props.callToAction.isVisible && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
             EmbedButton,
             {
               onClick: () => {
@@ -18997,9 +19383,9 @@ var PlanManager = (0, import_react36.forwardRef)(({ children, className, portal,
 PlanManager.displayName = "PlanManager";
 // src/components/elements/pricing-table/PricingTable.tsx
-var import_react37 = require("react");
+var import_react38 = require("react");
 var import_pluralize7 = __toESM(require_pluralize());
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 var resolveDesignProps6 = (props) => {
   return {
     showPeriodToggle: props.showPeriodToggle ?? true,
@@ -19039,18 +19425,18 @@ var resolveDesignProps6 = (props) => {
     }
   };
 };
-var PricingTable = (0, import_react37.forwardRef)(({ children, className, ...rest }, ref) => {
+var PricingTable = (0, import_react38.forwardRef)(({ children, className, ...rest }, ref) => {
   const props = resolveDesignProps6(rest);
   const { t: t2 } = useTranslation();
   const theme = nt();
   const { data, setLayout, setSelected } = useEmbed();
   const trialEndDays = useTrialEnd();
-  const [selectedPeriod, setSelectedPeriod] = (0, import_react37.useState)(
+  const [selectedPeriod, setSelectedPeriod] = (0, import_react38.useState)(
     () => data.company?.plan?.planPeriod || "month"
   );
   const { plans, addOns, periods } = useAvailablePlans(selectedPeriod);
   const isLightBackground = useIsLightBackground();
-  const [entitlementCounts, setEntitlementCounts] = (0, import_react37.useState)(
+  const [entitlementCounts, setEntitlementCounts] = (0, import_react38.useState)(
     () => plans.reduce(
       (acc, plan) => {
         acc[plan.id] = {
@@ -19077,7 +19463,7 @@ var PricingTable = (0, import_react37.forwardRef)(({ children, className, ...res
       };
     });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
     FussyChild,
     {
       ref,
@@ -19086,8 +19472,8 @@ var PricingTable = (0, import_react37.forwardRef)(({ children, className, ...res
       $flexDirection: "column",
       $gap: "2rem",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(Box, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(Box, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
             Flex,
             {
               $flexDirection: "column",
@@ -19102,7 +19488,7 @@ var PricingTable = (0, import_react37.forwardRef)(({ children, className, ...res
                 }
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                   Text,
                   {
                     $font: theme.typography[props.header.fontStyle].fontFamily,
@@ -19112,7 +19498,7 @@ var PricingTable = (0, import_react37.forwardRef)(({ children, className, ...res
                     children: props.header.isVisible && props.plans.isVisible && plans.length > 0 && t2("Plans")
                   }
                 ),
-                props.showPeriodToggle && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                props.showPeriodToggle && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                   PeriodToggle,
                   {
                     options: periods,
@@ -19123,7 +19509,7 @@ var PricingTable = (0, import_react37.forwardRef)(({ children, className, ...res
               ]
             }
           ),
-          props.plans.isVisible && plans.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+          props.plans.isVisible && plans.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
             Box,
             {
               $display: "grid",
@@ -19136,7 +19522,7 @@ var PricingTable = (0, import_react37.forwardRef)(({ children, className, ...res
                 if (count?.limit && count.limit > VISIBLE_ENTITLEMENT_COUNT) {
                   isExpanded = true;
                 }
-                return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+                return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
                   Flex,
                   {
                     $position: "relative",
@@ -19149,7 +19535,7 @@ var PricingTable = (0, import_react37.forwardRef)(({ children, className, ...res
                     $outlineColor: isActivePlan ? theme.primary : "transparent",
                     ...theme.card.hasShadow && { $boxShadow: cardBoxShadow },
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+                      /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
                         Flex,
                         {
                           $flexDirection: "column",
@@ -19160,7 +19546,7 @@ var PricingTable = (0, import_react37.forwardRef)(({ children, className, ...res
                           $borderStyle: "solid",
                           $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.175)" : "hsla(0, 0%, 100%, 0.175)",
                           children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                               Text,
                               {
                                 $font: theme.typography[props.plans.name.fontStyle].fontFamily,
@@ -19170,7 +19556,7 @@ var PricingTable = (0, import_react37.forwardRef)(({ children, className, ...res
                                 children: plan.name
                               }
                             ) }),
-                            props.plans.description.isVisible && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                            props.plans.description.isVisible && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                               Text,
                               {
                                 $font: theme.typography[props.plans.description.fontStyle].fontFamily,
@@ -19180,8 +19566,8 @@ var PricingTable = (0, import_react37.forwardRef)(({ children, className, ...res
                                 children: plan.description
                               }
                             ) }),
-                            /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(Box, { children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                            /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(Box, { children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                                 Text,
                                 {
                                   $font: theme.typography[props.plans.name.fontStyle].fontFamily,
@@ -19194,7 +19580,7 @@ var PricingTable = (0, import_react37.forwardRef)(({ children, className, ...res
                                   )
                                 }
                               ),
-                              !plan.custom && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+                              !plan.custom && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
                                 Text,
                                 {
                                   $font: theme.typography[props.plans.name.fontStyle].fontFamily,
@@ -19208,7 +19594,7 @@ var PricingTable = (0, import_react37.forwardRef)(({ children, className, ...res
                                 }
                               )
                             ] }),
-                            isActivePlan && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                            isActivePlan && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                               Flex,
                               {
                                 $position: "absolute",
@@ -19225,7 +19611,7 @@ var PricingTable = (0, import_react37.forwardRef)(({ children, className, ...res
                           ]
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+                      /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
                         Flex,
                         {
                           $flexDirection: "column",
@@ -19234,7 +19620,7 @@ var PricingTable = (0, import_react37.forwardRef)(({ children, className, ...res
                           $gap: `${cardPadding}rem`,
                           $padding: `${0.75 * cardPadding}rem ${cardPadding}rem 0`,
                           children: [
-                            props.plans.showEntitlements && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(Flex, { $flexDirection: "column", $gap: "1rem", $flexGrow: "1", children: [
+                            props.plans.showEntitlements && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(Flex, { $flexDirection: "column", $gap: "1rem", $flexGrow: "1", children: [
                               plan.entitlements.slice().sort((a2, b2) => {
                                 if (a2.feature?.name && b2.feature?.name && a2.feature?.name > b2.feature?.name) {
                                   return 1;
@@ -19257,8 +19643,8 @@ var PricingTable = (0, import_react37.forwardRef)(({ children, className, ...res
                                   return acc;
                                 }
                                 acc.push(
-                                  /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(Flex, { $gap: "1rem", children: [
-                                    props.plans.showFeatureIcons && entitlement.feature?.icon && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                                  /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(Flex, { $gap: "1rem", children: [
+                                    props.plans.showFeatureIcons && entitlement.feature?.icon && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                                       IconRound,
                                       {
                                         name: entitlement.feature.icon,
@@ -19269,7 +19655,7 @@ var PricingTable = (0, import_react37.forwardRef)(({ children, className, ...res
                                         ]
                                       }
                                     ),
-                                    entitlement.feature?.name && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Flex, { $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                                    entitlement.feature?.name && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Flex, { $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                                       Text,
                                       {
                                         $font: theme.typography.text.fontFamily,
@@ -19277,7 +19663,7 @@ var PricingTable = (0, import_react37.forwardRef)(({ children, className, ...res
                                         $weight: theme.typography.text.fontWeight,
                                         $color: theme.typography.text.color,
                                         $leading: 1.35,
-                                        children: typeof price !== "undefined" ? /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
+                                        children: typeof price !== "undefined" ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
                                           formatCurrency(price, currency),
                                           " ",
                                           t2("per"),
@@ -19286,19 +19672,19 @@ var PricingTable = (0, import_react37.forwardRef)(({ children, className, ...res
                                             entitlement.feature.name,
                                             1
                                           ),
-                                          entitlement.priceBehavior === "pay_in_advance" && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
+                                          entitlement.priceBehavior === "pay_in_advance" && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
                                             " ",
                                             t2("per"),
                                             " ",
                                             selectedPeriod
                                           ] })
-                                        ] }) : entitlement.valueType === "numeric" || entitlement.valueType === "unlimited" || entitlement.valueType === "trait" ? /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
+                                        ] }) : entitlement.valueType === "numeric" || entitlement.valueType === "unlimited" || entitlement.valueType === "trait" ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
                                           entitlement.valueType === "unlimited" ? t2("Unlimited", {
                                             item: (0, import_pluralize7.default)(
                                               entitlement.feature.name
                                             )
                                           }) : typeof entitlement.valueNumeric === "number" && `${formatNumber(entitlement.valueNumeric)} ${(0, import_pluralize7.default)(entitlement.feature.name, entitlement.valueNumeric)}`,
-                                          entitlement.metricPeriod && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
+                                          entitlement.metricPeriod && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
                                             " ",
                                             t2("per"),
                                             " ",
@@ -19316,14 +19702,14 @@ var PricingTable = (0, import_react37.forwardRef)(({ children, className, ...res
                                 );
                                 return acc;
                               }, []).slice(0, count?.limit ?? VISIBLE_ENTITLEMENT_COUNT),
-                              (count?.size || plan.entitlements.length) > VISIBLE_ENTITLEMENT_COUNT && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+                              (count?.size || plan.entitlements.length) > VISIBLE_ENTITLEMENT_COUNT && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
                                 Flex,
                                 {
                                   $alignItems: "center",
                                   $justifyContent: "start",
                                   $marginTop: "1rem",
                                   children: [
-                                    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                                    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                                       Icon2,
                                       {
                                         name: isExpanded ? "chevron-up" : "chevron-down",
@@ -19335,7 +19721,7 @@ var PricingTable = (0, import_react37.forwardRef)(({ children, className, ...res
                                         }
                                       }
                                     ),
-                                    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                                    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                                       Text,
                                       {
                                         onClick: () => handleToggleShowAll(plan.id),
@@ -19352,7 +19738,7 @@ var PricingTable = (0, import_react37.forwardRef)(({ children, className, ...res
                                 }
                               )
                             ] }),
-                            isActivePlan ? /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+                            isActivePlan ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
                               Flex,
                               {
                                 $justifyContent: "center",
@@ -19360,7 +19746,7 @@ var PricingTable = (0, import_react37.forwardRef)(({ children, className, ...res
                                 $gap: "0.25rem",
                                 $padding: "0.625rem 0",
                                 children: [
-                                  /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                                  /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                                     Icon2,
                                     {
                                       name: "check-rounded",
@@ -19371,7 +19757,7 @@ var PricingTable = (0, import_react37.forwardRef)(({ children, className, ...res
                                       }
                                     }
                                   ),
-                                  /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                                  /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                                     Text,
                                     {
                                       $size: 15,
@@ -19382,7 +19768,7 @@ var PricingTable = (0, import_react37.forwardRef)(({ children, className, ...res
                                   )
                                 ]
                               }
-                            ) : (props.upgrade.isVisible || props.downgrade.isVisible) && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                            ) : (props.upgrade.isVisible || props.downgrade.isVisible) && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                               EmbedButton,
                               {
                                 disabled: !plan.valid || !canCheckout,
@@ -19405,14 +19791,14 @@ var PricingTable = (0, import_react37.forwardRef)(({ children, className, ...res
                                   $color: props.downgrade.buttonStyle,
                                   $variant: "outline"
                                 },
-                                children: plan.custom ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                                children: plan.custom ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                                   ButtonLink,
                                   {
                                     href: plan.customPlanConfig?.ctaWebSite ?? "#",
                                     target: "_blank",
                                     children: plan.customPlanConfig?.ctaText ?? t2("Custom Plan CTA")
                                   }
-                                ) : !plan.valid ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                                ) : !plan.valid ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                                   Tooltip,
                                   {
                                     trigger: t2("Over usage limit"),
@@ -19434,14 +19820,14 @@ var PricingTable = (0, import_react37.forwardRef)(({ children, className, ...res
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Box, { children: props.addOns.isVisible && addOns.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
-          props.header.isVisible && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Box, { children: props.addOns.isVisible && addOns.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
+          props.header.isVisible && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
             Flex,
             {
               $justifyContent: "space-between",
               $alignItems: "center",
               $marginBottom: "1rem",
-              children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                 Text,
                 {
                   $font: theme.typography[props.header.fontStyle].fontFamily,
@@ -19453,7 +19839,7 @@ var PricingTable = (0, import_react37.forwardRef)(({ children, className, ...res
               )
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
             Box,
             {
               $display: "grid",
@@ -19461,7 +19847,7 @@ var PricingTable = (0, import_react37.forwardRef)(({ children, className, ...res
               $gap: "1rem",
               children: addOns.map((addOn, index) => {
                 const isActiveAddOn = addOn.current && selectedPeriod === data.company?.addOns.find((a2) => a2.id === addOn.id)?.planPeriod;
-                return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+                return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
                   Flex,
                   {
                     $position: "relative",
@@ -19475,8 +19861,8 @@ var PricingTable = (0, import_react37.forwardRef)(({ children, className, ...res
                     $outlineColor: isActiveAddOn ? theme.primary : "transparent",
                     ...theme.card.hasShadow && { $boxShadow: cardBoxShadow },
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(Flex, { $flexDirection: "column", $gap: "0.75rem", children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(Flex, { $flexDirection: "column", $gap: "0.75rem", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                           Text,
                           {
                             $font: theme.typography[props.plans.name.fontStyle].fontFamily,
@@ -19486,7 +19872,7 @@ var PricingTable = (0, import_react37.forwardRef)(({ children, className, ...res
                             children: addOn.name
                           }
                         ) }),
-                        props.addOns.showDescription && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                        props.addOns.showDescription && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                           Text,
                           {
                             $font: theme.typography[props.plans.description.fontStyle].fontFamily,
@@ -19496,8 +19882,8 @@ var PricingTable = (0, import_react37.forwardRef)(({ children, className, ...res
                             children: addOn.description
                           }
                         ) }),
-                        /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(Box, { children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                        /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(Box, { children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                             Text,
                             {
                               $font: theme.typography[props.plans.name.fontStyle].fontFamily,
@@ -19510,7 +19896,7 @@ var PricingTable = (0, import_react37.forwardRef)(({ children, className, ...res
                               )
                             }
                           ),
-                          /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+                          /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
                             Text,
                             {
                               $font: theme.typography[props.plans.name.fontStyle].fontFamily,
@@ -19524,7 +19910,7 @@ var PricingTable = (0, import_react37.forwardRef)(({ children, className, ...res
                             }
                           )
                         ] }),
-                        isActiveAddOn && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                        isActiveAddOn && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                           Flex,
                           {
                             $position: "absolute",
@@ -19539,7 +19925,7 @@ var PricingTable = (0, import_react37.forwardRef)(({ children, className, ...res
                           }
                         )
                       ] }),
-                      /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+                      /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
                         Flex,
                         {
                           $flexDirection: "column",
@@ -19547,7 +19933,7 @@ var PricingTable = (0, import_react37.forwardRef)(({ children, className, ...res
                           $gap: `${cardPadding}rem`,
                           $flexGrow: "1",
                           children: [
-                            props.addOns.showEntitlements && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                            props.addOns.showEntitlements && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                               Flex,
                               {
                                 $flexDirection: "column",
@@ -19555,15 +19941,15 @@ var PricingTable = (0, import_react37.forwardRef)(({ children, className, ...res
                                 $gap: "1rem",
                                 $flexGrow: "1",
                                 children: addOn.entitlements.map((entitlement) => {
-                                  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                                  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                                     Flex,
                                     {
                                       $flexWrap: "wrap",
                                       $justifyContent: "space-between",
                                       $alignItems: "center",
                                       $gap: "1rem",
-                                      children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(Flex, { $gap: "1rem", children: [
-                                        props.addOns.showFeatureIcons && entitlement.feature?.icon && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                                      children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(Flex, { $gap: "1rem", children: [
+                                        props.addOns.showFeatureIcons && entitlement.feature?.icon && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                                           IconRound,
                                           {
                                             name: entitlement.feature.icon,
@@ -19574,20 +19960,20 @@ var PricingTable = (0, import_react37.forwardRef)(({ children, className, ...res
                                             ]
                                           }
                                         ),
-                                        entitlement.feature?.name && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Flex, { $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                                        entitlement.feature?.name && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Flex, { $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                                           Text,
                                           {
                                             $font: theme.typography.text.fontFamily,
                                             $size: theme.typography.text.fontSize,
                                             $weight: theme.typography.text.fontWeight,
                                             $color: theme.typography.text.color,
-                                            children: entitlement.valueType === "numeric" || entitlement.valueType === "unlimited" || entitlement.valueType === "trait" ? /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
+                                            children: entitlement.valueType === "numeric" || entitlement.valueType === "unlimited" || entitlement.valueType === "trait" ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
                                               entitlement.valueType === "unlimited" ? t2("Unlimited", {
                                                 item: (0, import_pluralize7.default)(
                                                   entitlement.feature.name
                                                 )
                                               }) : typeof entitlement.valueNumeric === "number" && `${formatNumber(entitlement.valueNumeric)} ${(0, import_pluralize7.default)(entitlement.feature.name, entitlement.valueNumeric)}`,
-                                              entitlement.metricPeriod && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
+                                              entitlement.metricPeriod && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
                                                 " ",
                                                 t2("per"),
                                                 " ",
@@ -19608,7 +19994,7 @@ var PricingTable = (0, import_react37.forwardRef)(({ children, className, ...res
                                 })
                               }
                             ),
-                            props.upgrade.isVisible && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                            props.upgrade.isVisible && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                               EmbedButton,
                               {
                                 disabled: !addOn.valid || !canCheckout,
@@ -19644,8 +20030,8 @@ var PricingTable = (0, import_react37.forwardRef)(({ children, className, ...res
 PricingTable.displayName = "PricingTable";
 // src/components/elements/upcoming-bill/UpcomingBill.tsx
-var import_react38 = require("react");
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_react39 = require("react");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 function resolveDesignProps7(props) {
   return {
     header: {
@@ -19664,13 +20050,13 @@ function resolveDesignProps7(props) {
     }
   };
 }
-var UpcomingBill = (0, import_react38.forwardRef)(({ className, ...rest }, ref) => {
+var UpcomingBill = (0, import_react39.forwardRef)(({ className, ...rest }, ref) => {
   const props = resolveDesignProps7(rest);
   const { t: t2 } = useTranslation();
   const theme = nt();
   const { data } = useEmbed();
   const isLightBackground = useIsLightBackground();
-  const { upcomingInvoice, discounts } = (0, import_react38.useMemo)(() => {
+  const { upcomingInvoice, discounts } = (0, import_react39.useMemo)(() => {
     const discounts2 = (data.subscription?.discounts || []).map((discount) => ({
       amountOff: discount.amountOff,
       couponId: discount.couponId,
@@ -19697,7 +20083,7 @@ var UpcomingBill = (0, import_react38.forwardRef)(({ className, ...rest }, ref)
   if (typeof upcomingInvoice.amountDue !== "number" || !upcomingInvoice.dueDate) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
     Element,
     {
       as: Flex,
@@ -19706,7 +20092,7 @@ var UpcomingBill = (0, import_react38.forwardRef)(({ className, ...rest }, ref)
       $flexDirection: "column",
       $gap: "1rem",
       children: [
-        props.header.isVisible && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Flex, { $justifyContent: "space-between", $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+        props.header.isVisible && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Flex, { $justifyContent: "space-between", $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
           Text,
           {
             $font: theme.typography[props.header.fontStyle].fontFamily,
@@ -19720,8 +20106,8 @@ var UpcomingBill = (0, import_react38.forwardRef)(({ className, ...rest }, ref)
             ]
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(Flex, { $justifyContent: "space-between", $alignItems: "start", $gap: "1rem", children: [
-          props.price.isVisible && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Flex, { $alignItems: "end", $flexGrow: "1", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(Flex, { $justifyContent: "space-between", $alignItems: "start", $gap: "1rem", children: [
+          props.price.isVisible && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Flex, { $alignItems: "end", $flexGrow: "1", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
             Text,
             {
               $font: theme.typography[props.price.fontStyle].fontFamily,
@@ -19735,7 +20121,7 @@ var UpcomingBill = (0, import_react38.forwardRef)(({ className, ...rest }, ref)
               )
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Box, { $lineHeight: 1.15, $maxWidth: "10rem", $textAlign: "right", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Box, { $lineHeight: 1.15, $maxWidth: "10rem", $textAlign: "right", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
             Text,
             {
               $font: theme.typography[props.contractEndDate.fontStyle].fontFamily,
@@ -19747,8 +20133,8 @@ var UpcomingBill = (0, import_react38.forwardRef)(({ className, ...rest }, ref)
             }
           ) })
         ] }),
-        discounts.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(Flex, { $justifyContent: "space-between", $alignItems: "center", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+        discounts.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(Flex, { $justifyContent: "space-between", $alignItems: "center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
             Text,
             {
               $font: theme.typography.text.fontFamily,
@@ -19758,8 +20144,8 @@ var UpcomingBill = (0, import_react38.forwardRef)(({ className, ...rest }, ref)
               children: t2("Discount")
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Box, { children: discounts.map((discount) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(Flex, { $alignItems: "center", $gap: "0.5rem", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Box, { children: discounts.map((discount) => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(Flex, { $alignItems: "center", $gap: "0.5rem", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
               Flex,
               {
                 $alignItems: "center",
@@ -19768,7 +20154,7 @@ var UpcomingBill = (0, import_react38.forwardRef)(({ className, ...rest }, ref)
                 $borderStyle: "solid",
                 $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.15)" : "hsla(0, 0%, 100%, 0.15)",
                 $borderRadius: "0.3125rem",
-                children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                   Text,
                   {
                     $font: theme.typography.text.fontFamily,
@@ -19780,7 +20166,7 @@ var UpcomingBill = (0, import_react38.forwardRef)(({ className, ...rest }, ref)
                 )
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
               Text,
               {
                 $font: theme.typography.text.fontFamily,
@@ -19798,11 +20184,72 @@ var UpcomingBill = (0, import_react38.forwardRef)(({ className, ...rest }, ref)
 });
 UpcomingBill.displayName = "UpcomingBill";
-// src/components/embed/ComponentTree.tsx
+// src/components/elements/unsubscribe-button/UnsubscribeButton.tsx
 var import_react40 = require("react");
+var import_jsx_runtime34 = require("react/jsx-runtime");
+var resolveDesignProps8 = (props) => {
+  return {
+    button: {
+      text: props.button?.text ?? "Unsubscribe",
+      style: props.button?.style ?? "primary",
+      size: props.button?.size ?? "md",
+      fullWidth: props.button?.fullWidth ?? true,
+      alignment: props.button?.alignment ?? "center"
+    }
+  };
+};
+var UnsubscribeButton = (0, import_react40.forwardRef)(({ children, className, ...rest }, ref) => {
+  const props = resolveDesignProps8(rest);
+  const { t: t2 } = useTranslation();
+  const { data, setLayout } = useEmbed();
+  const disabled = !data.subscription || data.subscription.status === "cancelled";
+  const buttonStyles = {
+    primary: {
+      color: "primary",
+      variant: "filled"
+    },
+    secondary: {
+      color: "primary",
+      variant: "outline"
+    },
+    tertiary: {
+      color: "primary",
+      variant: "text"
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+    Element,
+    {
+      as: Flex,
+      ref,
+      className,
+      $flexDirection: "column",
+      $gap: "2rem",
+      children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+        EmbedButton,
+        {
+          $size: props.button.size,
+          $color: buttonStyles[props.button.style].color,
+          $variant: buttonStyles[props.button.style].variant,
+          $alignment: props.button.alignment,
+          $fullWidth: props.button.fullWidth,
+          onClick: () => {
+            setLayout("unsubscribe");
+          },
+          disabled,
+          children: t2(props.button.text) ?? t2("Unsubscribe")
+        }
+      )
+    }
+  );
+});
+UnsubscribeButton.displayName = "UnsubscribeButton";
+// src/components/embed/ComponentTree.tsx
+var import_react42 = require("react");
 // src/components/embed/renderer.ts
-var import_react39 = require("react");
+var import_react41 = require("react");
 var components = {
   Root,
   Viewport,
@@ -19814,7 +20261,8 @@ var components = {
   UpcomingBill,
   PaymentMethod,
   Invoices,
-  PricingTable
+  PricingTable,
+  UnsubscribeButton
 };
 function createRenderer(options) {
   const { useFallback = false } = options || {};
@@ -19824,7 +20272,7 @@ function createRenderer(options) {
     const component = useFallback ? components[name] || "div" : components[name];
     if (!components[name]) {
       console.debug(
-        "`schematic-embed`: Encounted an unknown component during render cycle.",
+        "`schematic-embed`: Encountered an unknown component during render cycle.",
         name
       );
     }
@@ -19834,7 +20282,7 @@ function createRenderer(options) {
     const { className, ...rest } = props;
     const resolvedProps = component === "div" ? rest : props;
     const resolvedChildren = children.map(renderNode);
-    return (0, import_react39.createElement)(
+    return (0, import_react41.createElement)(
       component,
       {
         key: index,
@@ -19847,10 +20295,10 @@ function createRenderer(options) {
 }
 // src/components/embed/ComponentTree.tsx
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 var Loading = () => {
   const theme = nt();
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
     Flex,
     {
       $width: "100%",
@@ -19858,13 +20306,13 @@ var Loading = () => {
       $alignItems: "center",
       $justifyContent: "center",
       $padding: `${theme.card.padding / TEXT_BASE_SIZE}rem`,
-      children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Loader, { $size: "2xl", $color: "#194BFB" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Loader, { $size: "2xl", $color: "#194BFB" })
     }
   );
 };
 var Error2 = ({ message }) => {
   const theme = nt();
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
     Flex,
     {
       $flexDirection: "column",
@@ -19875,7 +20323,7 @@ var Error2 = ({ message }) => {
       $alignItems: "center",
       $justifyContent: "center",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
           Box,
           {
             $marginBottom: `${8 / TEXT_BASE_SIZE}rem`,
@@ -19886,7 +20334,7 @@ var Error2 = ({ message }) => {
             children: "Error"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
           Box,
           {
             $marginBottom: `${8 / TEXT_BASE_SIZE}rem`,
@@ -19903,31 +20351,31 @@ var Error2 = ({ message }) => {
 };
 var ComponentTree = () => {
   const { error, nodes, isPending } = useEmbed();
-  const [children, setChildren] = (0, import_react40.useState)(/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Loading, {}));
-  (0, import_react40.useEffect)(() => {
+  const [children, setChildren] = (0, import_react42.useState)(/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Loading, {}));
+  (0, import_react42.useEffect)(() => {
     const renderer = createRenderer();
     setChildren(nodes.map(renderer));
   }, [nodes]);
   if (error) {
     console.error(error);
-    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Error2, { message: error.message });
+    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Error2, { message: error.message });
   }
   if (isPending) {
-    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Loading, {});
+    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Loading, {});
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_jsx_runtime33.Fragment, { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_jsx_runtime35.Fragment, { children });
 };
 // src/components/embed/Embed.tsx
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 var SchematicEmbed = ({ id, accessToken, apiConfig }) => {
   if (accessToken?.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { children: "Please provide an access token." });
+    return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { children: "Please provide an access token." });
   }
   if (!accessToken?.startsWith("token_")) {
-    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { children: 'Invalid access token; your temporary access token will start with "token_".' });
+    return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { children: 'Invalid access token; your temporary access token will start with "token_".' });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(EmbedProvider, { id, accessToken, apiConfig, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ComponentTree, {}) });
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(EmbedProvider, { id, accessToken, apiConfig, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ComponentTree, {}) });
 };
 /*! Bundled license information: