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

@schematichq/schematic-components 0.4.6 → 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 +680 -299
package/dist/schematic-components.d.ts +30 -4
package/dist/schematic-components.esm.js +657 -276
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");
@@ -11972,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",
@@ -11981,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",
@@ -12015,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",
@@ -12044,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",
@@ -12055,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",
@@ -12789,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";
@@ -12800,7 +12810,7 @@ var EmbedProvider = ({
   (0, import_react11.useEffect)(() => {
     if (accessToken) {
       const { headers = {} } = apiConfig ?? {};
-      headers["X-Schematic-Components-Version"] = "0.4.6";
+      headers["X-Schematic-Components-Version"] = "0.4.7";
       headers["X-Schematic-Session-ID"] = sessionIdRef.current;
       const config = new Configuration({
         ...apiConfig,
@@ -13247,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
         ]
       }
@@ -13324,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]);
@@ -13455,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
@@ -14193,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
@@ -14301,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,
@@ -14496,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,
@@ -14519,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"
@@ -14532,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,
@@ -14625,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)
@@ -14706,7 +14763,7 @@ var Sidebar = ({
         }
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        showHeader && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           Flex,
           {
             $position: "relative",
@@ -15456,7 +15513,7 @@ var Sidebar = ({
                   ]
                 }
               ),
-              selectedPlan && subscriptionPrice && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+              subscriptionPrice && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
                 Flex,
                 {
                   $justifyContent: "space-between",
@@ -15559,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,
@@ -15576,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,
                 {
@@ -15586,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,
@@ -16681,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
   );
@@ -17291,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,
@@ -17312,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",
@@ -17398,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,
@@ -17411,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",
@@ -17422,7 +17703,7 @@ var Disabled = () => {
             children: "Portal not found"
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
           Text,
           {
             as: "p",
@@ -17440,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,
@@ -17461,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",
@@ -17469,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",
@@ -17480,7 +17761,7 @@ var Success = () => {
             children: "Subscription updated!"
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
           Text,
           {
             as: "p",
@@ -17499,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;
   }
@@ -17526,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;
@@ -17546,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)``;
@@ -17604,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";
@@ -17618,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,
@@ -17647,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;
     }
@@ -17659,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;
     }
@@ -17671,7 +17953,7 @@ var Details = ({
     monthlyUsageBasedPrice,
     yearlyUsageBasedPrice
   ]);
-  const text = (0, import_react31.useMemo)(() => {
+  const text = (0, import_react32.useMemo)(() => {
     if (!feature?.name) {
       return;
     }
@@ -17688,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;
     }
@@ -17730,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,
@@ -17748,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,
@@ -17765,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: {
@@ -17794,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;
@@ -17846,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,
@@ -17855,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,
@@ -17868,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) => {
@@ -17881,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",
@@ -17889,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,
@@ -17900,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,
@@ -17910,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,
@@ -17930,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,
@@ -17943,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",
@@ -17956,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,
@@ -17977,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: {
@@ -18014,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: () => {
@@ -18027,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));
     });
@@ -18051,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,
@@ -18062,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,
@@ -18072,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,
@@ -18084,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,
@@ -18109,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
@@ -18130,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,
@@ -18156,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();
@@ -18180,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,
@@ -18199,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,
@@ -18211,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) => {
@@ -18223,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,
@@ -18232,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,
@@ -18251,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,
@@ -18267,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,
@@ -18302,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,
@@ -18315,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: () => {
@@ -18338,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,
@@ -18350,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 })
     ] })
   ] }) }) });
 };
@@ -18452,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,
@@ -18471,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,
@@ -18481,7 +18763,7 @@ var PaymentMethodElement = ({
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
       Flex,
       {
         $justifyContent: "space-between",
@@ -18491,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,
@@ -18508,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();
@@ -18538,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;
     }
@@ -18557,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;
@@ -18578,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
@@ -18597,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,
@@ -18608,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,
@@ -18619,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",
@@ -18628,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,
@@ -18658,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",
@@ -18675,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,
@@ -18687,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,
@@ -18708,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: {
@@ -18739,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();
@@ -18774,20 +19056,21 @@ var PlanManager = (0, import_react36.forwardRef)(({ children, className, portal,
   const billingSubscription = data.company?.billingSubscription;
   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",
@@ -18798,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",
@@ -18816,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,
@@ -18825,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",
@@ -18833,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,
@@ -18846,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,
@@ -18858,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,
@@ -18872,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)
                       ] })
@@ -18889,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,
@@ -18901,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",
@@ -18909,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,
@@ -18919,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,
@@ -18928,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)
                         ] })
@@ -18940,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,
@@ -18956,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",
@@ -18964,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)(
@@ -18981,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,
@@ -18994,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(),
@@ -19006,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,
@@ -19018,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(),
@@ -19040,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: () => {
@@ -19064,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,
@@ -19106,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] = {
@@ -19144,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,
@@ -19153,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",
@@ -19169,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,
@@ -19179,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,
@@ -19190,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",
@@ -19203,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",
@@ -19216,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",
@@ -19227,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,
@@ -19237,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,
@@ -19247,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,
@@ -19261,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,
@@ -19275,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",
@@ -19292,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",
@@ -19301,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;
@@ -19324,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,
@@ -19336,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,
@@ -19344,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"),
@@ -19353,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"),
                                             " ",
@@ -19383,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",
@@ -19402,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),
@@ -19419,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",
@@ -19427,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",
@@ -19438,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,
@@ -19449,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,
@@ -19472,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"),
@@ -19501,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,
@@ -19520,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",
@@ -19528,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",
@@ -19542,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,
@@ -19553,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,
@@ -19563,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,
@@ -19577,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,
@@ -19591,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",
@@ -19606,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",
@@ -19614,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",
@@ -19622,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,
@@ -19641,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"),
                                                 " ",
@@ -19675,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,
@@ -19711,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: {
@@ -19731,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,
@@ -19764,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,
@@ -19773,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,
@@ -19787,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,
@@ -19802,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,
@@ -19814,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,
@@ -19825,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",
@@ -19835,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,
@@ -19847,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,
@@ -19865,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,
@@ -19881,7 +20261,8 @@ var components = {
   UpcomingBill,
   PaymentMethod,
   Invoices,
-  PricingTable
+  PricingTable,
+  UnsubscribeButton
 };
 function createRenderer(options) {
   const { useFallback = false } = options || {};
@@ -19891,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
       );
     }
@@ -19901,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,
@@ -19914,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%",
@@ -19925,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",
@@ -19942,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`,
@@ -19953,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`,
@@ -19970,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: