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.esm.js CHANGED Viewed

@@ -2076,7 +2076,7 @@ var require_pluralize = __commonJS({
 });
 // src/components/elements/included-features/IncludedFeatures.tsx
-import { forwardRef as forwardRef7, useRef as useRef6, useState as useState12 } from "react";
+import { forwardRef as forwardRef7, useRef as useRef6, useState as useState13 } from "react";
 // node_modules/react-i18next/dist/es/Trans.js
 import { useContext } from "react";
@@ -11925,6 +11925,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",
@@ -11934,6 +11935,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",
@@ -11968,9 +11970,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",
@@ -11997,10 +12001,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",
@@ -12008,6 +12015,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",
@@ -12742,7 +12750,8 @@ var EmbedProvider = ({
   useEffect2(() => {
     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";
@@ -12753,7 +12762,7 @@ var EmbedProvider = ({
   useEffect2(() => {
     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,
@@ -13200,7 +13209,7 @@ var Button2 = forwardRef(
         disabled,
         ...props,
         children: [
-          /* @__PURE__ */ jsx2(Loader, { $size: "sm", $isLoading: isLoading }),
+          isLoading && /* @__PURE__ */ jsx2(Loader, { $size: "sm", $isLoading: isLoading }),
           children
         ]
       }
@@ -13277,8 +13286,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]);
@@ -13408,6 +13415,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
@@ -14146,7 +14185,7 @@ var Root = forwardRef3(
 Root.displayName = "Root";
 // src/components/layout/viewport/Viewport.tsx
-import { forwardRef as forwardRef4, useLayoutEffect as useLayoutEffect5, useState as useState11 } from "react";
+import { forwardRef as forwardRef4, useLayoutEffect as useLayoutEffect5, useState as useState12 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
 // src/components/shared/checkout-dialog/CheckoutDialog.tsx
@@ -14261,11 +14300,11 @@ var Navigation = ({
   ] });
 };
-// src/components/shared/checkout-dialog/Sidebar.tsx
+// src/components/shared/sidebar/Sidebar.tsx
 import { useCallback as useCallback6, useMemo as useMemo4 } from "react";
 var import_pluralize = __toESM(require_pluralize());
-// src/components/shared/checkout-dialog/StageButton.tsx
+// src/components/shared/sidebar/StageButton.tsx
 import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
 var StageButton = ({
   canTrial,
@@ -14456,7 +14495,7 @@ var StageButton = ({
   }
 };
-// src/components/shared/checkout-dialog/Sidebar.tsx
+// src/components/shared/sidebar/Sidebar.tsx
 import { Fragment as Fragment4, jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
 var Sidebar = ({
   addOns,
@@ -14479,11 +14518,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"
@@ -14492,27 +14532,28 @@ var Sidebar = ({
     ({ entitlement }) => entitlement.priceBehavior === "pay_as_you_go"
   );
   const subscriptionPrice = useMemo4(() => {
-    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 } = useMemo4(() => {
     return {
       amountOff: charges?.amountOff ?? 0,
@@ -14585,8 +14626,23 @@ var Sidebar = ({
     payInAdvanceEntitlements,
     promoCode
   ]);
+  const unsubscribe = useCallback6(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)
@@ -14666,7 +14722,7 @@ var Sidebar = ({
         }
       },
       children: [
-        /* @__PURE__ */ jsx12(
+        showHeader && /* @__PURE__ */ jsx12(
           Flex,
           {
             $position: "relative",
@@ -15416,7 +15472,7 @@ var Sidebar = ({
                   ]
                 }
               ),
-              selectedPlan && subscriptionPrice && /* @__PURE__ */ jsxs8(
+              subscriptionPrice && /* @__PURE__ */ jsxs8(
                 Flex,
                 {
                   $justifyContent: "space-between",
@@ -15519,11 +15575,11 @@ var Sidebar = ({
                   }
                 ) })
               ] }),
-              /* @__PURE__ */ jsx12(
+              layout === "checkout" && /* @__PURE__ */ jsx12(
                 StageButton,
                 {
                   canTrial: selectedPlan?.companyCanTrial === true,
-                  canCheckout: canCheckout === true,
+                  canCheckout,
                   canUpdateSubscription,
                   checkout,
                   checkoutStage,
@@ -15536,6 +15592,16 @@ var Sidebar = ({
                   trialPaymentMethodRequired: data.trialPaymentMethodRequired === true
                 }
               ),
+              layout === "unsubscribe" && /* @__PURE__ */ jsx12(
+                EmbedButton,
+                {
+                  onClick: async () => {
+                    unsubscribe();
+                  },
+                  isLoading,
+                  children: t2("Cancel subscription")
+                }
+              ),
               !isLoading && error && /* @__PURE__ */ jsx12(Box, { children: /* @__PURE__ */ jsx12(
                 Text,
                 {
@@ -15546,7 +15612,7 @@ var Sidebar = ({
                   children: error
                 }
               ) }),
-              /* @__PURE__ */ jsx12(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsx12(
+              layout !== "unsubscribe" && /* @__PURE__ */ jsx12(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsx12(
                 Text,
                 {
                   $font: theme.typography.text.fontFamily,
@@ -16641,7 +16707,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
   );
@@ -17255,20 +17321,234 @@ var PeriodToggle = ({
   );
 };
-// src/components/ui/badge/Badge.tsx
+// src/components/shared/unsubscribe-dialog/UnsubscribeDialog.tsx
+import { useCallback as useCallback8, useMemo as useMemo7, useState as useState10 } from "react";
 import { jsx as jsx20, jsxs as jsxs15 } from "react/jsx-runtime";
+var UnsubscribeDialog = () => {
+  const { t: t2 } = useTranslation();
+  const theme = nt();
+  const { data, setSelected } = useEmbed();
+  const [error, setError] = useState10();
+  const [isLoading, setIsLoading] = useState10(false);
+  const planPeriod = useMemo7(
+    () => data.company?.plan?.planPeriod ?? "month",
+    [data.company?.plan?.planPeriod]
+  );
+  const { setLayout } = useEmbed();
+  const currentPlan = useMemo7(
+    () => ({
+      ...data.company?.plan,
+      monthlyPrice: { price: data.company?.plan?.planPrice },
+      yearlyPrice: { price: data.company?.plan?.planPrice }
+    }),
+    [data.company?.plan]
+  );
+  const currentAddOns = useMemo7(
+    () => data.company?.addOns || [],
+    [data.company?.addOns]
+  );
+  const addOns = useMemo7(
+    () => currentAddOns.map((addOn) => ({
+      ...addOn,
+      isSelected: true,
+      monthlyPrice: {
+        price: addOn.planPrice
+      },
+      yearlyPrice: {
+        price: addOn.planPrice
+      }
+    })),
+    [currentAddOns]
+  );
+  const currentUsageBasedEntitlements = useMemo7(
+    () => 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 = useCallback8(() => {
+    setLayout("portal");
+  }, [setLayout]);
+  return /* @__PURE__ */ jsxs15(Modal, { id: "unsubscribe-dialog", size: "auto", children: [
+    /* @__PURE__ */ jsx20(
+      Box,
+      {
+        $display: "inline-flex",
+        $position: "absolute",
+        $top: 0,
+        $right: 0,
+        $zIndex: 1,
+        $cursor: "pointer",
+        onClick: handleClose,
+        children: /* @__PURE__ */ jsx20(
+          Icon2,
+          {
+            name: "close",
+            style: {
+              fontSize: 36,
+              color: isLightBackground ? "hsla(0, 0%, 0%, 0.275)" : "hsla(0, 0%, 100%, 0.275)"
+            }
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxs15(
+      Flex,
+      {
+        $position: "relative",
+        $flexDirection: "column",
+        $height: "auto",
+        $viewport: {
+          md: {
+            $flexDirection: "row",
+            $height: "calc(100% - 5rem)"
+          }
+        },
+        children: [
+          /* @__PURE__ */ jsxs15(
+            Flex,
+            {
+              $flexDirection: "column",
+              $flexWrap: "wrap",
+              $justifyContent: "space-around",
+              $gap: "5rem",
+              $padding: "2.5rem",
+              children: [
+                /* @__PURE__ */ jsxs15(Flex, { $flexDirection: "column", $flexWrap: "wrap", $gap: "0.5rem", children: [
+                  /* @__PURE__ */ jsx20(
+                    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__ */ jsxs15(
+                    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__ */ jsxs15(Flex, { $flexDirection: "column", $flexWrap: "wrap", $gap: "0.5rem", children: [
+                  /* @__PURE__ */ jsx20(
+                    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__ */ jsx20(
+                    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__ */ jsx20(
+            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
+import { jsx as jsx21, jsxs as jsxs16 } from "react/jsx-runtime";
 var Badge = () => {
   const { t: t2 } = useTranslation();
   const { settings } = useEmbed();
-  return /* @__PURE__ */ jsxs15(
+  return /* @__PURE__ */ jsxs16(
     Flex,
     {
       $justifyContent: settings.badge?.alignment || "start",
       $alignItems: "center",
       $gridColumn: "1 / -1",
       children: [
-        /* @__PURE__ */ jsx20(Box, { $fontSize: "0.75rem", $marginRight: "0.5rem", children: t2("Powered by") }),
-        /* @__PURE__ */ jsxs15(
+        /* @__PURE__ */ jsx21(Box, { $fontSize: "0.75rem", $marginRight: "0.5rem", children: t2("Powered by") }),
+        /* @__PURE__ */ jsxs16(
           "svg",
           {
             width: 86,
@@ -17276,77 +17556,77 @@ var Badge = () => {
             viewBox: "0 0 86 16",
             style: { marginTop: "0.125rem" },
             children: [
-              /* @__PURE__ */ jsx20(
+              /* @__PURE__ */ jsx21(
                 "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__ */ jsx20(
+              /* @__PURE__ */ jsx21(
                 "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__ */ jsx20(
+              /* @__PURE__ */ jsx21(
                 "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__ */ jsx20(
+              /* @__PURE__ */ jsx21(
                 "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__ */ jsx20(
+              /* @__PURE__ */ jsx21(
                 "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__ */ jsx20(
+              /* @__PURE__ */ jsx21(
                 "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__ */ jsx20(
+              /* @__PURE__ */ jsx21(
                 "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__ */ jsx20(
+              /* @__PURE__ */ jsx21(
                 "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__ */ jsx20(
+              /* @__PURE__ */ jsx21(
                 "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__ */ jsx20(
+              /* @__PURE__ */ jsx21(
                 "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__ */ jsx20(
+              /* @__PURE__ */ jsx21(
                 "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",
@@ -17362,11 +17642,11 @@ var Badge = () => {
 };
 // src/components/layout/RenderLayout.tsx
-import { useEffect as useEffect6, useState as useState10 } from "react";
-import { jsx as jsx21, jsxs as jsxs16 } from "react/jsx-runtime";
+import { useEffect as useEffect6, useState as useState11 } from "react";
+import { jsx as jsx22, jsxs as jsxs17 } from "react/jsx-runtime";
 var Disabled = () => {
   const theme = nt();
-  return /* @__PURE__ */ jsx21(Box, { $width: "max-content", $height: "max-content", $margin: "0 auto", children: /* @__PURE__ */ jsx21(Card, { children: /* @__PURE__ */ jsxs16(
+  return /* @__PURE__ */ jsx22(Box, { $width: "max-content", $height: "max-content", $margin: "0 auto", children: /* @__PURE__ */ jsx22(Card, { children: /* @__PURE__ */ jsxs17(
     Element,
     {
       as: Flex,
@@ -17375,7 +17655,7 @@ var Disabled = () => {
       $alignItems: "center",
       $whiteSpace: "nowrap",
       children: [
-        /* @__PURE__ */ jsx21(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ jsx21(
+        /* @__PURE__ */ jsx22(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ jsx22(
           Text,
           {
             as: "h1",
@@ -17386,7 +17666,7 @@ var Disabled = () => {
             children: "Portal not found"
           }
         ) }),
-        /* @__PURE__ */ jsx21(
+        /* @__PURE__ */ jsx22(
           Text,
           {
             as: "p",
@@ -17404,7 +17684,7 @@ var Disabled = () => {
 var Success = () => {
   const theme = nt();
   const { hydrate, data, api, setLayout, isPending } = useEmbed();
-  const [isOpen, setIsOpen] = useState10(true);
+  const [isOpen, setIsOpen] = useState11(true);
   useEffect6(() => {
     if (api && data.component?.id) {
       hydrate();
@@ -17416,7 +17696,7 @@ var Success = () => {
       setLayout("portal");
     }
   }, [isPending, isOpen, setLayout]);
-  return /* @__PURE__ */ jsx21(Box, { $width: "max-content", $height: "max-content", $margin: "0 auto", children: /* @__PURE__ */ jsx21(Card, { children: /* @__PURE__ */ jsxs16(
+  return /* @__PURE__ */ jsx22(Box, { $width: "max-content", $height: "max-content", $margin: "0 auto", children: /* @__PURE__ */ jsx22(Card, { children: /* @__PURE__ */ jsxs17(
     Element,
     {
       as: Flex,
@@ -17425,7 +17705,7 @@ var Success = () => {
       $alignItems: "center",
       $whiteSpace: "nowrap",
       children: [
-        /* @__PURE__ */ jsx21(Box, { $marginBottom: "1.5rem", children: /* @__PURE__ */ jsx21(
+        /* @__PURE__ */ jsx22(Box, { $marginBottom: "1.5rem", children: /* @__PURE__ */ jsx22(
           IconRound,
           {
             name: "check",
@@ -17433,7 +17713,7 @@ var Success = () => {
             colors: [theme.card.background, theme.primary]
           }
         ) }),
-        /* @__PURE__ */ jsx21(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ jsx21(
+        /* @__PURE__ */ jsx22(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ jsx22(
           Text,
           {
             as: "h1",
@@ -17444,7 +17724,7 @@ var Success = () => {
             children: "Subscription updated!"
           }
         ) }),
-        /* @__PURE__ */ jsx21(
+        /* @__PURE__ */ jsx22(
           Text,
           {
             as: "p",
@@ -17463,9 +17743,9 @@ var RenderLayout = ({ children }) => {
   const { layout } = useEmbed();
   switch (layout) {
     case "disabled":
-      return /* @__PURE__ */ jsx21(Disabled, {});
+      return /* @__PURE__ */ jsx22(Disabled, {});
     case "success":
-      return /* @__PURE__ */ jsx21(Success, {});
+      return /* @__PURE__ */ jsx22(Success, {});
     default:
       return children;
   }
@@ -17490,14 +17770,14 @@ var StyledViewport = dt(Box).attrs(({ theme }) => ({
 `;
 // src/components/layout/viewport/Viewport.tsx
-import { Fragment as Fragment9, jsx as jsx22, jsxs as jsxs17 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx23, jsxs as jsxs18 } from "react/jsx-runtime";
 var Viewport = forwardRef4(
   ({ children, portal, ...props }, ref) => {
     const { data, layout } = useEmbed();
-    const [top, setTop] = useState11(0);
+    const [top, setTop] = useState12(0);
     const canCheckout = data.capabilities?.checkout ?? true;
     useLayoutEffect5(() => {
-      if (layout !== "checkout") {
+      if (layout !== "checkout" && layout !== "unsubscribe") {
         return;
       }
       const parent = portal || document.body;
@@ -17510,12 +17790,13 @@ var Viewport = forwardRef4(
         parent.style.overflow = "";
       };
     }, [layout, portal]);
-    return /* @__PURE__ */ jsxs17(Fragment9, { children: [
-      /* @__PURE__ */ jsxs17(StyledViewport, { ref, ...props, children: [
-        /* @__PURE__ */ jsx22(RenderLayout, { children }),
-        /* @__PURE__ */ jsx22(Badge, {})
+    return /* @__PURE__ */ jsxs18(Fragment9, { children: [
+      /* @__PURE__ */ jsxs18(StyledViewport, { ref, ...props, children: [
+        /* @__PURE__ */ jsx23(RenderLayout, { children }),
+        /* @__PURE__ */ jsx23(Badge, {})
       ] }),
-      canCheckout && layout === "checkout" && createPortal2(/* @__PURE__ */ jsx22(CheckoutDialog, { top }), portal || document.body)
+      canCheckout && layout === "checkout" && createPortal2(/* @__PURE__ */ jsx23(CheckoutDialog, { top }), portal || document.body),
+      layout === "unsubscribe" && createPortal2(/* @__PURE__ */ jsx23(UnsubscribeDialog, {}), portal || document.body)
     ] });
   }
 );
@@ -17568,10 +17849,10 @@ var StyledCard = dt.div(({ theme }) => {
 });
 // src/components/layout/card/Card.tsx
-import { jsx as jsx23 } from "react/jsx-runtime";
+import { jsx as jsx24 } from "react/jsx-runtime";
 var Card = forwardRef5(
   ({ children, className }, ref) => {
-    return /* @__PURE__ */ jsx23(StyledCard, { ref, className, children });
+    return /* @__PURE__ */ jsx24(StyledCard, { ref, className, children });
   }
 );
 Card.displayName = "Card";
@@ -17582,18 +17863,18 @@ var StyledColumn = dt.div`
 `;
 // src/components/layout/column/Column.tsx
-import { jsx as jsx24 } from "react/jsx-runtime";
+import { jsx as jsx25 } from "react/jsx-runtime";
 var Column = forwardRef6(
   ({ children, basis, ...props }, ref) => {
-    return /* @__PURE__ */ jsx24(StyledColumn, { ref, ...props, children: /* @__PURE__ */ jsx24(Card, { children }) });
+    return /* @__PURE__ */ jsx25(StyledColumn, { ref, ...props, children: /* @__PURE__ */ jsx25(Card, { children }) });
   }
 );
 Column.displayName = "Column";
 // src/components/elements/included-features/Details.tsx
-import { useMemo as useMemo7 } from "react";
+import { useMemo as useMemo8 } from "react";
 var import_pluralize4 = __toESM(require_pluralize());
-import { jsx as jsx25, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs19 } from "react/jsx-runtime";
 var Details = ({
   details,
   shouldWrapChildren,
@@ -17611,7 +17892,7 @@ var Details = ({
   const { t: t2 } = useTranslation();
   const theme = nt();
   const { data } = useEmbed();
-  const currency = useMemo7(() => {
+  const currency = useMemo8(() => {
     if (data.company?.plan?.planPeriod === "month") {
       return monthlyUsageBasedPrice?.currency;
     }
@@ -17623,7 +17904,7 @@ var Details = ({
     monthlyUsageBasedPrice,
     yearlyUsageBasedPrice
   ]);
-  const price = useMemo7(() => {
+  const price = useMemo8(() => {
     if (data.company?.plan?.planPeriod === "month") {
       return monthlyUsageBasedPrice?.price;
     }
@@ -17635,7 +17916,7 @@ var Details = ({
     monthlyUsageBasedPrice,
     yearlyUsageBasedPrice
   ]);
-  const text = useMemo7(() => {
+  const text = useMemo8(() => {
     if (!feature?.name) {
       return;
     }
@@ -17652,7 +17933,7 @@ var Details = ({
       return t2("Unlimited", { item: (0, import_pluralize4.default)(feature.name) });
     }
   }, [allocation, feature?.name, price, priceBehavior, t2, currency]);
-  const usageText = useMemo7(() => {
+  const usageText = useMemo8(() => {
     if (!feature?.name) {
       return;
     }
@@ -17694,14 +17975,14 @@ var Details = ({
   if (!text) {
     return null;
   }
-  return /* @__PURE__ */ jsxs18(
+  return /* @__PURE__ */ jsxs19(
     Box,
     {
       $flexBasis: "min-content",
       $flexGrow: "1",
       $textAlign: shouldWrapChildren ? "left" : "right",
       children: [
-        props.entitlement.isVisible && /* @__PURE__ */ jsx25(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsx25(
+        props.entitlement.isVisible && /* @__PURE__ */ jsx26(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsx26(
           Text,
           {
             $font: theme.typography[props.entitlement.fontStyle].fontFamily,
@@ -17712,7 +17993,7 @@ var Details = ({
             children: text
           }
         ) }),
-        props.usage.isVisible && usageText && /* @__PURE__ */ jsx25(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsx25(
+        props.usage.isVisible && usageText && /* @__PURE__ */ jsx26(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsx26(
           Text,
           {
             $font: theme.typography[props.usage.fontStyle].fontFamily,
@@ -17729,7 +18010,7 @@ var Details = ({
 };
 // src/components/elements/included-features/IncludedFeatures.tsx
-import { jsx as jsx26, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs20 } from "react/jsx-runtime";
 function resolveDesignProps(props) {
   return {
     header: {
@@ -17766,7 +18047,7 @@ var IncludedFeatures = forwardRef7(({ className, ...rest }, ref) => {
   const elements = useRef6([]);
   const shouldWrapChildren = useWrapChildren(elements.current);
   const isLightBackground = useIsLightBackground();
-  const [showCount, setShowCount] = useState12(VISIBLE_ENTITLEMENT_COUNT);
+  const [showCount, setShowCount] = useState13(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;
@@ -17810,7 +18091,7 @@ var IncludedFeatures = forwardRef7(({ className, ...rest }, ref) => {
   }
   const shouldShowExpand = featureListSize > VISIBLE_ENTITLEMENT_COUNT;
   const isExpanded = showCount > VISIBLE_ENTITLEMENT_COUNT;
-  return /* @__PURE__ */ jsxs19(
+  return /* @__PURE__ */ jsxs20(
     Element,
     {
       as: Flex,
@@ -17819,7 +18100,7 @@ var IncludedFeatures = forwardRef7(({ className, ...rest }, ref) => {
       $flexDirection: "column",
       $gap: "1rem",
       children: [
-        props.header.isVisible && /* @__PURE__ */ jsx26(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ jsx26(
+        props.header.isVisible && /* @__PURE__ */ jsx27(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ jsx27(
           Text,
           {
             $font: theme.typography[props.header.fontStyle].fontFamily,
@@ -17832,7 +18113,7 @@ var IncludedFeatures = forwardRef7(({ className, ...rest }, ref) => {
         entitlements.slice(0, showCount).map((entitlement, index) => {
           const { entitlementExpirationDate, feature } = entitlement.featureUsage || {};
           const shouldShowDetails = feature?.name && (feature?.featureType === "event" || feature?.featureType === "trait");
-          return /* @__PURE__ */ jsxs19(
+          return /* @__PURE__ */ jsxs20(
             Flex,
             {
               ref: (el) => {
@@ -17845,7 +18126,7 @@ var IncludedFeatures = forwardRef7(({ className, ...rest }, ref) => {
               $alignItems: "center",
               $gap: "1rem",
               children: [
-                /* @__PURE__ */ jsxs19(
+                /* @__PURE__ */ jsxs20(
                   Flex,
                   {
                     $alignItems: "center",
@@ -17853,7 +18134,7 @@ var IncludedFeatures = forwardRef7(({ className, ...rest }, ref) => {
                     $flexBasis: "min-content",
                     $gap: "1rem",
                     children: [
-                      props.icons.isVisible && feature?.icon && /* @__PURE__ */ jsx26(
+                      props.icons.isVisible && feature?.icon && /* @__PURE__ */ jsx27(
                         IconRound,
                         {
                           name: feature.icon,
@@ -17864,7 +18145,7 @@ var IncludedFeatures = forwardRef7(({ className, ...rest }, ref) => {
                           ]
                         }
                       ),
-                      feature?.name && /* @__PURE__ */ jsx26(
+                      feature?.name && /* @__PURE__ */ jsx27(
                         Text,
                         {
                           $font: theme.typography[props.icons.fontStyle].fontFamily,
@@ -17874,7 +18155,7 @@ var IncludedFeatures = forwardRef7(({ className, ...rest }, ref) => {
                           children: feature.name
                         }
                       ),
-                      props.entitlementExpiration.isVisible && entitlementExpirationDate && /* @__PURE__ */ jsxs19(
+                      props.entitlementExpiration.isVisible && entitlementExpirationDate && /* @__PURE__ */ jsxs20(
                         Text,
                         {
                           $font: theme.typography[props.entitlementExpiration.fontStyle].fontFamily,
@@ -17894,7 +18175,7 @@ var IncludedFeatures = forwardRef7(({ className, ...rest }, ref) => {
                     ]
                   }
                 ),
-                shouldShowDetails && /* @__PURE__ */ jsx26(
+                shouldShowDetails && /* @__PURE__ */ jsx27(
                   Details,
                   {
                     details: entitlement,
@@ -17907,8 +18188,8 @@ var IncludedFeatures = forwardRef7(({ className, ...rest }, ref) => {
             index
           );
         }),
-        shouldShowExpand && /* @__PURE__ */ jsxs19(Flex, { $alignItems: "center", $justifyContent: "start", $marginTop: "1rem", children: [
-          /* @__PURE__ */ jsx26(
+        shouldShowExpand && /* @__PURE__ */ jsxs20(Flex, { $alignItems: "center", $justifyContent: "start", $marginTop: "1rem", children: [
+          /* @__PURE__ */ jsx27(
             Icon2,
             {
               name: isExpanded ? "chevron-up" : "chevron-down",
@@ -17920,7 +18201,7 @@ var IncludedFeatures = forwardRef7(({ className, ...rest }, ref) => {
               }
             }
           ),
-          /* @__PURE__ */ jsx26(
+          /* @__PURE__ */ jsx27(
             Text,
             {
               onClick: handleToggleShowAll,
@@ -17941,8 +18222,8 @@ var IncludedFeatures = forwardRef7(({ className, ...rest }, ref) => {
 IncludedFeatures.displayName = "IncludedFeatures";
 // src/components/elements/invoices/Invoices.tsx
-import { forwardRef as forwardRef8, useEffect as useEffect7, useState as useState13 } from "react";
-import { jsx as jsx27, jsxs as jsxs20 } from "react/jsx-runtime";
+import { forwardRef as forwardRef8, useEffect as useEffect7, useState as useState14 } from "react";
+import { jsx as jsx28, jsxs as jsxs21 } from "react/jsx-runtime";
 function resolveDesignProps2(props) {
   return {
     header: {
@@ -17978,7 +18259,7 @@ function formatInvoices(invoices) {
 }
 var InvoiceDate = ({ date, fontStyle, url }) => {
   const theme = nt();
-  const dateText = /* @__PURE__ */ jsx27(
+  const dateText = /* @__PURE__ */ jsx28(
     Text,
     {
       ...url && { onClick: () => {
@@ -17991,7 +18272,7 @@ var InvoiceDate = ({ date, fontStyle, url }) => {
     }
   );
   if (url) {
-    return /* @__PURE__ */ jsx27("a", { href: url, target: "_blank", rel: "noreferrer", children: dateText });
+    return /* @__PURE__ */ jsx28("a", { href: url, target: "_blank", rel: "noreferrer", children: dateText });
   }
   return dateText;
 };
@@ -18000,8 +18281,8 @@ var Invoices = forwardRef8(({ className, data, ...rest }, ref) => {
   const { t: t2 } = useTranslation();
   const theme = nt();
   const { api } = useEmbed();
-  const [invoices, setInvoices] = useState13(() => formatInvoices(data));
-  const [listSize, setListSize] = useState13(props.limit.number);
+  const [invoices, setInvoices] = useState14(() => formatInvoices(data));
+  const [listSize, setListSize] = useState14(props.limit.number);
   const toggleListSize = () => {
     setListSize(
       (prev2) => prev2 !== props.limit.number ? props.limit.number : MAX_VISIBLE_INVOICE_COUNT
@@ -18015,8 +18296,8 @@ var Invoices = forwardRef8(({ className, data, ...rest }, ref) => {
   if (invoices.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsx27(Element, { ref, className, children: /* @__PURE__ */ jsxs20(Flex, { $flexDirection: "column", $gap: "1rem", children: [
-    props.header.isVisible && /* @__PURE__ */ jsx27(Flex, { $justifyContent: "space-between", $alignItems: "center", children: /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsx28(Element, { ref, className, children: /* @__PURE__ */ jsxs21(Flex, { $flexDirection: "column", $gap: "1rem", children: [
+    props.header.isVisible && /* @__PURE__ */ jsx28(Flex, { $justifyContent: "space-between", $alignItems: "center", children: /* @__PURE__ */ jsx28(
       Text,
       {
         $font: theme.typography[props.header.fontStyle].fontFamily,
@@ -18026,9 +18307,9 @@ var Invoices = forwardRef8(({ className, data, ...rest }, ref) => {
         children: t2("Invoices")
       }
     ) }),
-    /* @__PURE__ */ jsx27(Flex, { $flexDirection: "column", $gap: "0.5rem", children: invoices.slice(0, listSize).map(({ date, amount, url }, index) => {
-      return /* @__PURE__ */ jsxs20(Flex, { $justifyContent: "space-between", children: [
-        props.date.isVisible && date && /* @__PURE__ */ jsx27(
+    /* @__PURE__ */ jsx28(Flex, { $flexDirection: "column", $gap: "0.5rem", children: invoices.slice(0, listSize).map(({ date, amount, url }, index) => {
+      return /* @__PURE__ */ jsxs21(Flex, { $justifyContent: "space-between", children: [
+        props.date.isVisible && date && /* @__PURE__ */ jsx28(
           InvoiceDate,
           {
             date,
@@ -18036,7 +18317,7 @@ var Invoices = forwardRef8(({ className, data, ...rest }, ref) => {
             url
           }
         ),
-        props.amount.isVisible && /* @__PURE__ */ jsx27(
+        props.amount.isVisible && /* @__PURE__ */ jsx28(
           Text,
           {
             $font: theme.typography[props.amount.fontStyle].fontFamily,
@@ -18048,15 +18329,15 @@ var Invoices = forwardRef8(({ className, data, ...rest }, ref) => {
         )
       ] }, index);
     }) }),
-    props.collapse.isVisible && invoices.length > props.limit.number && /* @__PURE__ */ jsxs20(Flex, { $alignItems: "center", $gap: "0.5rem", children: [
-      /* @__PURE__ */ jsx27(
+    props.collapse.isVisible && invoices.length > props.limit.number && /* @__PURE__ */ jsxs21(Flex, { $alignItems: "center", $gap: "0.5rem", children: [
+      /* @__PURE__ */ jsx28(
         Icon2,
         {
           name: `chevron-${listSize === props.limit.number ? "down" : "up"}`,
           style: { color: "#D0D0D0" }
         }
       ),
-      /* @__PURE__ */ jsx27(
+      /* @__PURE__ */ jsx28(
         Text,
         {
           onClick: toggleListSize,
@@ -18094,7 +18375,7 @@ var Container4 = dt(Flex)`
 `;
 // src/components/elements/metered-features/MeteredFeatures.tsx
-import { Fragment as Fragment10, jsx as jsx28, jsxs as jsxs21 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx29, jsxs as jsxs22 } from "react/jsx-runtime";
 function resolveDesignProps3(props) {
   return {
     isVisible: props.isVisible ?? true,
@@ -18144,7 +18425,7 @@ var MeteredFeatures = forwardRef9(({ className, ...rest }, ref) => {
   if (!shouldShowFeatures) {
     return null;
   }
-  return /* @__PURE__ */ jsx28(Container4, { ref, className, children: featureUsage.map(
+  return /* @__PURE__ */ jsx29(Container4, { ref, className, children: featureUsage.map(
     ({
       allocation,
       feature,
@@ -18163,8 +18444,8 @@ var MeteredFeatures = forwardRef9(({ className, ...rest }, ref) => {
         price = yearlyUsageBasedPrice?.price;
         currency = yearlyUsageBasedPrice?.currency;
       }
-      return /* @__PURE__ */ jsxs21(Element, { as: Flex, $gap: "1.5rem", children: [
-        props.icon.isVisible && feature?.icon && /* @__PURE__ */ jsx28(
+      return /* @__PURE__ */ jsxs22(Element, { as: Flex, $gap: "1.5rem", children: [
+        props.icon.isVisible && feature?.icon && /* @__PURE__ */ jsx29(
           IconRound,
           {
             name: feature.icon,
@@ -18175,8 +18456,8 @@ var MeteredFeatures = forwardRef9(({ className, ...rest }, ref) => {
             ]
           }
         ),
-        /* @__PURE__ */ jsxs21(Flex, { $flexDirection: "column", $gap: "2rem", $flexGrow: "1", children: [
-          /* @__PURE__ */ jsxs21(
+        /* @__PURE__ */ jsxs22(Flex, { $flexDirection: "column", $gap: "2rem", $flexGrow: "1", children: [
+          /* @__PURE__ */ jsxs22(
             Flex,
             {
               ref: (el) => {
@@ -18187,8 +18468,8 @@ var MeteredFeatures = forwardRef9(({ className, ...rest }, ref) => {
               $flexWrap: "wrap",
               $gap: "1rem",
               children: [
-                feature?.name && /* @__PURE__ */ jsxs21(Flex, { $flexDirection: "column", $gap: "0.5rem", $flexGrow: "1", children: [
-                  /* @__PURE__ */ jsx28(
+                feature?.name && /* @__PURE__ */ jsxs22(Flex, { $flexDirection: "column", $gap: "0.5rem", $flexGrow: "1", children: [
+                  /* @__PURE__ */ jsx29(
                     Text,
                     {
                       as: Box,
@@ -18196,14 +18477,14 @@ var MeteredFeatures = forwardRef9(({ className, ...rest }, ref) => {
                       $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__ */ jsxs21(Fragment10, { children: [
+                      children: priceBehavior === "pay_as_you_go" ? typeof usage === "number" && /* @__PURE__ */ jsxs22(Fragment10, { children: [
                         formatNumber(usage),
                         " ",
                         (0, import_pluralize5.default)(feature.name, usage)
                       ] }) : feature.name
                     }
                   ),
-                  props.description.isVisible && /* @__PURE__ */ jsx28(
+                  props.description.isVisible && /* @__PURE__ */ jsx29(
                     Text,
                     {
                       as: Box,
@@ -18215,14 +18496,14 @@ var MeteredFeatures = forwardRef9(({ className, ...rest }, ref) => {
                     }
                   )
                 ] }),
-                (feature?.featureType === "event" || feature?.featureType === "trait") && feature?.name && /* @__PURE__ */ jsxs21(
+                (feature?.featureType === "event" || feature?.featureType === "trait") && feature?.name && /* @__PURE__ */ jsxs22(
                   Box,
                   {
                     $flexBasis: "min-content",
                     $flexGrow: "1",
                     $textAlign: shouldWrapChildren ? "left" : "right",
                     children: [
-                      props.usage.isVisible && /* @__PURE__ */ jsx28(
+                      props.usage.isVisible && /* @__PURE__ */ jsx29(
                         Text,
                         {
                           as: Box,
@@ -18231,18 +18512,18 @@ var MeteredFeatures = forwardRef9(({ className, ...rest }, ref) => {
                           $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__ */ jsxs21(Fragment10, { children: [
+                          children: priceBehavior === "pay_in_advance" ? typeof allocation === "number" && /* @__PURE__ */ jsxs22(Fragment10, { 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__ */ jsxs21(Fragment10, { children: [
+                          ] }) : priceBehavior === "pay_as_you_go" ? typeof price === "number" && typeof usage === "number" && formatCurrency(usage * price, currency) : typeof usage === "number" && /* @__PURE__ */ jsxs22(Fragment10, { children: [
                             formatNumber(usage),
                             " ",
                             (0, import_pluralize5.default)(feature.name, usage)
                           ] })
                         }
                       ),
-                      props.allocation.isVisible && /* @__PURE__ */ jsx28(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsx28(
+                      props.allocation.isVisible && /* @__PURE__ */ jsx29(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsx29(
                         Text,
                         {
                           $font: theme.typography[props.allocation.fontStyle].fontFamily,
@@ -18266,8 +18547,8 @@ var MeteredFeatures = forwardRef9(({ className, ...rest }, ref) => {
               ]
             }
           ),
-          props.isVisible && typeof usage === "number" && typeof allocation === "number" && priceBehavior !== "pay_as_you_go" && /* @__PURE__ */ jsxs21(Flex, { $gap: "2rem", children: [
-            /* @__PURE__ */ jsx28(
+          props.isVisible && typeof usage === "number" && typeof allocation === "number" && priceBehavior !== "pay_as_you_go" && /* @__PURE__ */ jsxs22(Flex, { $gap: "2rem", children: [
+            /* @__PURE__ */ jsx29(
               ProgressBar,
               {
                 progress: usage / allocation * 100,
@@ -18279,7 +18560,7 @@ var MeteredFeatures = forwardRef9(({ className, ...rest }, ref) => {
                 $flexGrow: "1"
               }
             ),
-            priceBehavior === "pay_in_advance" && /* @__PURE__ */ jsx28(
+            priceBehavior === "pay_in_advance" && /* @__PURE__ */ jsx29(
               EmbedButton,
               {
                 onClick: () => {
@@ -18304,15 +18585,15 @@ MeteredFeatures.displayName = "MeteredFeatures";
 // src/components/elements/payment-method/PaymentMethod.tsx
 import {
   forwardRef as forwardRef10,
-  useCallback as useCallback8,
+  useCallback as useCallback9,
   useEffect as useEffect8,
   useLayoutEffect as useLayoutEffect6,
-  useMemo as useMemo8,
-  useState as useState14
+  useMemo as useMemo9,
+  useState as useState15
 } from "react";
 import { createPortal as createPortal3 } from "react-dom";
 import { Elements as Elements2 } from "@stripe/react-stripe-js";
-import { Fragment as Fragment11, jsx as jsx29, jsxs as jsxs22 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx30, jsxs as jsxs23 } from "react/jsx-runtime";
 var PaymentElement2 = ({
   iconName,
   iconTitle,
@@ -18321,11 +18602,11 @@ var PaymentElement2 = ({
   paymentLast4
 }) => {
   const theme = nt();
-  return /* @__PURE__ */ jsx29(Fragment11, { children: /* @__PURE__ */ jsx29(Text, { $font: theme.typography.text.fontFamily, $size: 16, children: /* @__PURE__ */ jsxs22(Flex, { $flexDirection: "row", $alignItems: "center", children: [
-    iconName && /* @__PURE__ */ jsx29(Box, { children: /* @__PURE__ */ jsx29(Icon2, { name: iconName, title: iconTitle, style: iconStyles }) }),
-    /* @__PURE__ */ jsxs22(Flex, { $alignItems: "center", children: [
-      /* @__PURE__ */ jsx29(Box, { $lineHeight: "1", $marginRight: "4px", children: t(label) }),
-      paymentLast4 && /* @__PURE__ */ jsx29(Box, { $display: "inline-block", $fontWeight: "bold", children: paymentLast4 })
+  return /* @__PURE__ */ jsx30(Fragment11, { children: /* @__PURE__ */ jsx30(Text, { $font: theme.typography.text.fontFamily, $size: 16, children: /* @__PURE__ */ jsxs23(Flex, { $flexDirection: "row", $alignItems: "center", children: [
+    iconName && /* @__PURE__ */ jsx30(Box, { children: /* @__PURE__ */ jsx30(Icon2, { name: iconName, title: iconTitle, style: iconStyles }) }),
+    /* @__PURE__ */ jsxs23(Flex, { $alignItems: "center", children: [
+      /* @__PURE__ */ jsx30(Box, { $lineHeight: "1", $marginRight: "4px", children: t(label) }),
+      paymentLast4 && /* @__PURE__ */ jsx30(Box, { $display: "inline-block", $fontWeight: "bold", children: paymentLast4 })
     ] })
   ] }) }) });
 };
@@ -18423,16 +18704,16 @@ var PaymentMethodElement = ({
       iconTitle: genericLabel,
       label: genericLabel
     };
-    return /* @__PURE__ */ jsx29(
+    return /* @__PURE__ */ jsx30(
       PaymentElement2,
       {
         ...paymentMethodElementProps(iconName, iconTitle, label, paymentLast4)
       }
     );
   };
-  return /* @__PURE__ */ jsxs22(Flex, { $flexDirection: "column", $gap: `${sizeFactor}rem`, children: [
-    props.header.isVisible && /* @__PURE__ */ jsxs22(Flex, { $justifyContent: "space-between", $alignItems: "center", children: [
-      /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsxs23(Flex, { $flexDirection: "column", $gap: `${sizeFactor}rem`, children: [
+    props.header.isVisible && /* @__PURE__ */ jsxs23(Flex, { $justifyContent: "space-between", $alignItems: "center", children: [
+      /* @__PURE__ */ jsx30(
         Text,
         {
           $font: theme.typography[props.header.fontStyle].fontFamily,
@@ -18442,7 +18723,7 @@ var PaymentMethodElement = ({
           children: t2("Payment Method")
         }
       ),
-      props.functions.showExpiration && typeof monthsToExpiration === "number" && monthsToExpiration < 4 && /* @__PURE__ */ jsx29(
+      props.functions.showExpiration && typeof monthsToExpiration === "number" && monthsToExpiration < 4 && /* @__PURE__ */ jsx30(
         Text,
         {
           $font: theme.typography.text.fontFamily,
@@ -18452,7 +18733,7 @@ var PaymentMethodElement = ({
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs22(
+    /* @__PURE__ */ jsxs23(
       Flex,
       {
         $justifyContent: "space-between",
@@ -18462,7 +18743,7 @@ var PaymentMethodElement = ({
         $borderRadius: "9999px",
         children: [
           renderPaymentMethodElement(),
-          props.functions.allowEdit && onEdit && /* @__PURE__ */ jsx29(
+          props.functions.allowEdit && onEdit && /* @__PURE__ */ jsx30(
             Text,
             {
               onClick: onEdit,
@@ -18485,18 +18766,18 @@ var PaymentMethod = forwardRef10(({ children, className, portal, allowEdit = tru
   const theme = nt();
   const { api, data, layout, setLayout } = useEmbed();
   const isLightBackground = useIsLightBackground();
-  const [isLoading, setIsLoading] = useState14(false);
-  const [error, setError] = useState14();
-  const [showPaymentForm, setShowPaymentForm] = useState14(
+  const [isLoading, setIsLoading] = useState15(false);
+  const [error, setError] = useState15();
+  const [showPaymentForm, setShowPaymentForm] = useState15(
     () => typeof data.subscription?.paymentMethod === "undefined"
   );
-  const [stripe, setStripe] = useState14(null);
-  const [setupIntent, setSetupIntent] = useState14();
-  const [top, setTop] = useState14(0);
-  const paymentMethod = useMemo8(() => {
+  const [stripe, setStripe] = useState15(null);
+  const [setupIntent, setSetupIntent] = useState15();
+  const [top, setTop] = useState15(0);
+  const paymentMethod = useMemo9(() => {
     return data.subscription?.paymentMethod;
   }, [data.subscription?.paymentMethod]);
-  const monthsToExpiration = useMemo8(() => {
+  const monthsToExpiration = useMemo9(() => {
     let expiration;
     if (typeof paymentMethod?.cardExpYear === "number" && typeof paymentMethod?.cardExpMonth === "number") {
       const today = /* @__PURE__ */ new Date();
@@ -18509,7 +18790,7 @@ var PaymentMethod = forwardRef10(({ children, className, portal, allowEdit = tru
     }
     return expiration;
   }, [paymentMethod?.cardExpYear, paymentMethod?.cardExpMonth]);
-  const createSetupIntent = useCallback8(async () => {
+  const createSetupIntent = useCallback9(async () => {
     if (!api || !data.component?.id) {
       return;
     }
@@ -18528,7 +18809,7 @@ var PaymentMethod = forwardRef10(({ children, className, portal, allowEdit = tru
       setIsLoading(false);
     }
   }, [t2, api, data.component?.id]);
-  const updatePaymentMethod = useCallback8(
+  const updatePaymentMethod = useCallback9(
     async (id) => {
       if (!api || !id) {
         return;
@@ -18568,8 +18849,8 @@ var PaymentMethod = forwardRef10(({ children, className, portal, allowEdit = tru
   if (!paymentMethod?.paymentMethodType) {
     return null;
   }
-  return /* @__PURE__ */ jsxs22(Element, { ref, className, children: [
-    /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsxs23(Element, { ref, className, children: [
+    /* @__PURE__ */ jsx30(
       PaymentMethodElement,
       {
         paymentMethod,
@@ -18579,8 +18860,8 @@ var PaymentMethod = forwardRef10(({ children, className, portal, allowEdit = tru
       }
     ),
     layout === "payment" && createPortal3(
-      /* @__PURE__ */ jsxs22(Modal, { size: "md", top, onClose: () => setShowPaymentForm(false), children: [
-        /* @__PURE__ */ jsx29(ModalHeader, { bordered: true, children: /* @__PURE__ */ jsx29(
+      /* @__PURE__ */ jsxs23(Modal, { size: "md", top, onClose: () => setShowPaymentForm(false), children: [
+        /* @__PURE__ */ jsx30(ModalHeader, { bordered: true, children: /* @__PURE__ */ jsx30(
           Text,
           {
             $font: theme.typography.text.fontFamily,
@@ -18590,7 +18871,7 @@ var PaymentMethod = forwardRef10(({ children, className, portal, allowEdit = tru
             children: t2("Edit payment method")
           }
         ) }),
-        /* @__PURE__ */ jsx29(Flex, { $position: "relative", $height: "calc(100% - 5rem)", children: /* @__PURE__ */ jsx29(
+        /* @__PURE__ */ jsx30(Flex, { $position: "relative", $height: "calc(100% - 5rem)", children: /* @__PURE__ */ jsx30(
           Flex,
           {
             $flexDirection: "column",
@@ -18599,8 +18880,8 @@ var PaymentMethod = forwardRef10(({ children, className, portal, allowEdit = tru
             $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__ */ jsxs22(Fragment11, { children: [
-              showPaymentForm ? /* @__PURE__ */ jsx29(
+            children: /* @__PURE__ */ jsxs23(Fragment11, { children: [
+              showPaymentForm ? /* @__PURE__ */ jsx30(
                 Elements2,
                 {
                   stripe,
@@ -18629,15 +18910,15 @@ var PaymentMethod = forwardRef10(({ children, className, portal, allowEdit = tru
                     },
                     clientSecret: setupIntent?.setupIntentClientSecret
                   },
-                  children: /* @__PURE__ */ jsx29(
+                  children: /* @__PURE__ */ jsx30(
                     PaymentForm,
                     {
                       onConfirm: (value) => updatePaymentMethod(value)
                     }
                   )
                 }
-              ) : /* @__PURE__ */ jsxs22(Flex, { $flexDirection: "column", $gap: "2rem", children: [
-                /* @__PURE__ */ jsx29(
+              ) : /* @__PURE__ */ jsxs23(Flex, { $flexDirection: "column", $gap: "2rem", children: [
+                /* @__PURE__ */ jsx30(
                   PaymentMethodElement,
                   {
                     size: "lg",
@@ -18646,7 +18927,7 @@ var PaymentMethod = forwardRef10(({ children, className, portal, allowEdit = tru
                     ...props
                   }
                 ),
-                /* @__PURE__ */ jsx29(Box, { children: /* @__PURE__ */ jsx29(
+                /* @__PURE__ */ jsx30(Box, { children: /* @__PURE__ */ jsx30(
                   Text,
                   {
                     onClick: createSetupIntent,
@@ -18658,7 +18939,7 @@ var PaymentMethod = forwardRef10(({ children, className, portal, allowEdit = tru
                   }
                 ) })
               ] }),
-              !isLoading && error && /* @__PURE__ */ jsx29(Box, { children: /* @__PURE__ */ jsx29(
+              !isLoading && error && /* @__PURE__ */ jsx30(Box, { children: /* @__PURE__ */ jsx30(
                 Text,
                 {
                   $font: theme.typography.text.fontFamily,
@@ -18681,7 +18962,7 @@ PaymentMethod.displayName = "PaymentMethod";
 // src/components/elements/plan-manager/PlanManager.tsx
 import { forwardRef as forwardRef11 } from "react";
 var import_pluralize6 = __toESM(require_pluralize());
-import { Fragment as Fragment12, jsx as jsx30, jsxs as jsxs23 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx31, jsxs as jsxs24 } from "react/jsx-runtime";
 var resolveDesignProps5 = (props) => {
   return {
     header: {
@@ -18745,20 +19026,21 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
   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__ */ jsxs23(Fragment12, { children: [
-    showTrialBox && /* @__PURE__ */ jsxs23(
+  return /* @__PURE__ */ jsxs24(Fragment12, { children: [
+    showTrialBox && !showUnsubscribeBox && /* @__PURE__ */ jsxs24(
       Box,
       {
         $backgroundColor: isLightBackground ? "hsla(0, 0%, 0%, 0.04)" : "hsla(0, 0%, 100%, 0.04)",
         $textAlign: "center",
         $padding: "1rem",
         children: [
-          /* @__PURE__ */ jsx30(
+          /* @__PURE__ */ jsx31(
             Text,
             {
               as: "h3",
@@ -18769,7 +19051,7 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
               children: t2("Trial ends in", { days: trialEndDays.toString() })
             }
           ),
-          /* @__PURE__ */ jsx30(
+          /* @__PURE__ */ jsx31(
             Text,
             {
               as: "p",
@@ -18787,7 +19069,43 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
         ]
       }
     ),
-    /* @__PURE__ */ jsxs23(
+    showUnsubscribeBox && /* @__PURE__ */ jsxs24(
+      Box,
+      {
+        $backgroundColor: isLightBackground ? "hsla(0, 0%, 0%, 0.04)" : "hsla(0, 0%, 100%, 0.04)",
+        $textAlign: "center",
+        $padding: "1rem",
+        children: [
+          /* @__PURE__ */ jsx31(
+            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__ */ jsx31(
+            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__ */ jsxs24(
       Element,
       {
         as: Flex,
@@ -18796,7 +19114,7 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
         $flexDirection: "column",
         $gap: "2rem",
         children: [
-          props.header.isVisible && currentPlan && /* @__PURE__ */ jsxs23(
+          props.header.isVisible && currentPlan && /* @__PURE__ */ jsxs24(
             Flex,
             {
               $justifyContent: "space-between",
@@ -18804,8 +19122,8 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
               $flexWrap: "wrap",
               $gap: "1rem",
               children: [
-                /* @__PURE__ */ jsxs23(Flex, { $flexDirection: "column", $gap: "1rem", children: [
-                  /* @__PURE__ */ jsx30(
+                /* @__PURE__ */ jsxs24(Flex, { $flexDirection: "column", $gap: "1rem", children: [
+                  /* @__PURE__ */ jsx31(
                     Text,
                     {
                       as: Box,
@@ -18817,7 +19135,7 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
                       children: currentPlan.name
                     }
                   ),
-                  props.header.description.isVisible && currentPlan.description && /* @__PURE__ */ jsx30(
+                  props.header.description.isVisible && currentPlan.description && /* @__PURE__ */ jsx31(
                     Text,
                     {
                       as: Box,
@@ -18829,8 +19147,8 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
                     }
                   )
                 ] }),
-                props.header.price.isVisible && typeof currentPlan.planPrice === "number" && currentPlan.planPeriod && /* @__PURE__ */ jsxs23(Box, { children: [
-                  /* @__PURE__ */ jsx30(
+                props.header.price.isVisible && typeof currentPlan.planPrice === "number" && currentPlan.planPeriod && /* @__PURE__ */ jsxs24(Box, { children: [
+                  /* @__PURE__ */ jsx31(
                     Text,
                     {
                       $font: theme.typography[props.header.price.fontStyle].fontFamily,
@@ -18843,14 +19161,14 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
                       )
                     }
                   ),
-                  /* @__PURE__ */ jsx30(
+                  /* @__PURE__ */ jsx31(
                     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__ */ jsxs23("sub", { children: [
+                      children: /* @__PURE__ */ jsxs24("sub", { children: [
                         "/",
                         shortenPeriod(currentPlan.planPeriod)
                       ] })
@@ -18860,8 +19178,8 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
               ]
             }
           ),
-          props.addOns.isVisible && addOns.length > 0 && /* @__PURE__ */ jsxs23(Flex, { $flexDirection: "column", $gap: "1rem", children: [
-            props.addOns.showLabel && /* @__PURE__ */ jsx30(
+          props.addOns.isVisible && addOns.length > 0 && /* @__PURE__ */ jsxs24(Flex, { $flexDirection: "column", $gap: "1rem", children: [
+            props.addOns.showLabel && /* @__PURE__ */ jsx31(
               Text,
               {
                 $font: theme.typography.text.fontFamily,
@@ -18872,7 +19190,7 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
                 children: t2("Add-ons")
               }
             ),
-            addOns.map((addOn) => /* @__PURE__ */ jsxs23(
+            addOns.map((addOn) => /* @__PURE__ */ jsxs24(
               Flex,
               {
                 $justifyContent: "space-between",
@@ -18880,7 +19198,7 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
                 $flexWrap: "wrap",
                 $gap: "1rem",
                 children: [
-                  /* @__PURE__ */ jsx30(
+                  /* @__PURE__ */ jsx31(
                     Text,
                     {
                       $font: theme.typography[props.addOns.fontStyle].fontFamily,
@@ -18890,7 +19208,7 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
                       children: addOn.name
                     }
                   ),
-                  addOn.planPrice && addOn.planPeriod && /* @__PURE__ */ jsxs23(
+                  addOn.planPrice && addOn.planPeriod && /* @__PURE__ */ jsxs24(
                     Text,
                     {
                       $font: theme.typography.text.fontFamily,
@@ -18899,7 +19217,7 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
                       $color: theme.typography.text.color,
                       children: [
                         formatCurrency(addOn.planPrice, subscriptionCurrency),
-                        /* @__PURE__ */ jsxs23("sub", { children: [
+                        /* @__PURE__ */ jsxs24("sub", { children: [
                           "/",
                           shortenPeriod(addOn.planPeriod)
                         ] })
@@ -18911,8 +19229,8 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
               addOn.id
             ))
           ] }),
-          usageBasedEntitlements.length > 0 && /* @__PURE__ */ jsxs23(Flex, { $flexDirection: "column", $gap: "1rem", children: [
-            /* @__PURE__ */ jsx30(
+          usageBasedEntitlements.length > 0 && /* @__PURE__ */ jsxs24(Flex, { $flexDirection: "column", $gap: "1rem", children: [
+            /* @__PURE__ */ jsx31(
               Text,
               {
                 $font: theme.typography.text.fontFamily,
@@ -18927,7 +19245,7 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
               (acc, entitlement) => {
                 if (entitlement.feature?.name) {
                   acc.push(
-                    /* @__PURE__ */ jsxs23(
+                    /* @__PURE__ */ jsxs24(
                       Flex,
                       {
                         $justifyContent: "space-between",
@@ -18935,14 +19253,14 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
                         $flexWrap: "wrap",
                         $gap: "1rem",
                         children: [
-                          /* @__PURE__ */ jsx30(
+                          /* @__PURE__ */ jsx31(
                             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__ */ jsxs23(Fragment12, { children: [
+                              children: entitlement.priceBehavior === "pay_in_advance" ? /* @__PURE__ */ jsxs24(Fragment12, { children: [
                                 entitlement.quantity,
                                 " ",
                                 (0, import_pluralize6.default)(
@@ -18952,8 +19270,8 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
                               ] }) : entitlement.feature.name
                             }
                           ),
-                          /* @__PURE__ */ jsxs23(Flex, { $alignItems: "center", $gap: "1rem", children: [
-                            entitlement.priceBehavior === "pay_in_advance" && currentPlan?.planPeriod && /* @__PURE__ */ jsxs23(
+                          /* @__PURE__ */ jsxs24(Flex, { $alignItems: "center", $gap: "1rem", children: [
+                            entitlement.priceBehavior === "pay_in_advance" && currentPlan?.planPeriod && /* @__PURE__ */ jsxs24(
                               Text,
                               {
                                 $font: theme.typography.text.fontFamily,
@@ -18965,7 +19283,7 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
                                     entitlement.price,
                                     entitlement.currencyCode
                                   ),
-                                  /* @__PURE__ */ jsxs23("sub", { children: [
+                                  /* @__PURE__ */ jsxs24("sub", { children: [
                                     "/",
                                     (0, import_pluralize6.default)(
                                       entitlement.feature.name.toLowerCase(),
@@ -18977,7 +19295,7 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
                                 ]
                               }
                             ),
-                            /* @__PURE__ */ jsxs23(
+                            /* @__PURE__ */ jsxs24(
                               Text,
                               {
                                 $font: theme.typography.text.fontFamily,
@@ -18989,7 +19307,7 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
                                     entitlement.price * (entitlement.priceBehavior === "pay_in_advance" ? entitlement.quantity : 1),
                                     entitlement.currencyCode
                                   ),
-                                  /* @__PURE__ */ jsxs23("sub", { children: [
+                                  /* @__PURE__ */ jsxs24("sub", { children: [
                                     "/",
                                     currentPlan?.planPeriod && entitlement.priceBehavior === "pay_in_advance" ? shortenPeriod(currentPlan.planPeriod) : (0, import_pluralize6.default)(
                                       entitlement.feature.name.toLowerCase(),
@@ -19011,7 +19329,7 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
               []
             )
           ] }),
-          canCheckout && props.callToAction.isVisible && /* @__PURE__ */ jsx30(
+          canCheckout && props.callToAction.isVisible && /* @__PURE__ */ jsx31(
             EmbedButton,
             {
               onClick: () => {
@@ -19035,9 +19353,9 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
 PlanManager.displayName = "PlanManager";
 // src/components/elements/pricing-table/PricingTable.tsx
-import { forwardRef as forwardRef12, useState as useState15 } from "react";
+import { forwardRef as forwardRef12, useState as useState16 } from "react";
 var import_pluralize7 = __toESM(require_pluralize());
-import { Fragment as Fragment13, jsx as jsx31, jsxs as jsxs24 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx32, jsxs as jsxs25 } from "react/jsx-runtime";
 var resolveDesignProps6 = (props) => {
   return {
     showPeriodToggle: props.showPeriodToggle ?? true,
@@ -19083,12 +19401,12 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
   const theme = nt();
   const { data, setLayout, setSelected } = useEmbed();
   const trialEndDays = useTrialEnd();
-  const [selectedPeriod, setSelectedPeriod] = useState15(
+  const [selectedPeriod, setSelectedPeriod] = useState16(
     () => data.company?.plan?.planPeriod || "month"
   );
   const { plans, addOns, periods } = useAvailablePlans(selectedPeriod);
   const isLightBackground = useIsLightBackground();
-  const [entitlementCounts, setEntitlementCounts] = useState15(
+  const [entitlementCounts, setEntitlementCounts] = useState16(
     () => plans.reduce(
       (acc, plan) => {
         acc[plan.id] = {
@@ -19115,7 +19433,7 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
       };
     });
   };
-  return /* @__PURE__ */ jsxs24(
+  return /* @__PURE__ */ jsxs25(
     FussyChild,
     {
       ref,
@@ -19124,8 +19442,8 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
       $flexDirection: "column",
       $gap: "2rem",
       children: [
-        /* @__PURE__ */ jsxs24(Box, { children: [
-          /* @__PURE__ */ jsxs24(
+        /* @__PURE__ */ jsxs25(Box, { children: [
+          /* @__PURE__ */ jsxs25(
             Flex,
             {
               $flexDirection: "column",
@@ -19140,7 +19458,7 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                 }
               },
               children: [
-                /* @__PURE__ */ jsx31(
+                /* @__PURE__ */ jsx32(
                   Text,
                   {
                     $font: theme.typography[props.header.fontStyle].fontFamily,
@@ -19150,7 +19468,7 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                     children: props.header.isVisible && props.plans.isVisible && plans.length > 0 && t2("Plans")
                   }
                 ),
-                props.showPeriodToggle && /* @__PURE__ */ jsx31(
+                props.showPeriodToggle && /* @__PURE__ */ jsx32(
                   PeriodToggle,
                   {
                     options: periods,
@@ -19161,7 +19479,7 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
               ]
             }
           ),
-          props.plans.isVisible && plans.length > 0 && /* @__PURE__ */ jsx31(
+          props.plans.isVisible && plans.length > 0 && /* @__PURE__ */ jsx32(
             Box,
             {
               $display: "grid",
@@ -19174,7 +19492,7 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                 if (count?.limit && count.limit > VISIBLE_ENTITLEMENT_COUNT) {
                   isExpanded = true;
                 }
-                return /* @__PURE__ */ jsxs24(
+                return /* @__PURE__ */ jsxs25(
                   Flex,
                   {
                     $position: "relative",
@@ -19187,7 +19505,7 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                     $outlineColor: isActivePlan ? theme.primary : "transparent",
                     ...theme.card.hasShadow && { $boxShadow: cardBoxShadow },
                     children: [
-                      /* @__PURE__ */ jsxs24(
+                      /* @__PURE__ */ jsxs25(
                         Flex,
                         {
                           $flexDirection: "column",
@@ -19198,7 +19516,7 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                           $borderStyle: "solid",
                           $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.175)" : "hsla(0, 0%, 100%, 0.175)",
                           children: [
-                            /* @__PURE__ */ jsx31(Box, { children: /* @__PURE__ */ jsx31(
+                            /* @__PURE__ */ jsx32(Box, { children: /* @__PURE__ */ jsx32(
                               Text,
                               {
                                 $font: theme.typography[props.plans.name.fontStyle].fontFamily,
@@ -19208,7 +19526,7 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                                 children: plan.name
                               }
                             ) }),
-                            props.plans.description.isVisible && /* @__PURE__ */ jsx31(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ jsx31(
+                            props.plans.description.isVisible && /* @__PURE__ */ jsx32(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ jsx32(
                               Text,
                               {
                                 $font: theme.typography[props.plans.description.fontStyle].fontFamily,
@@ -19218,8 +19536,8 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                                 children: plan.description
                               }
                             ) }),
-                            /* @__PURE__ */ jsxs24(Box, { children: [
-                              /* @__PURE__ */ jsx31(
+                            /* @__PURE__ */ jsxs25(Box, { children: [
+                              /* @__PURE__ */ jsx32(
                                 Text,
                                 {
                                   $font: theme.typography[props.plans.name.fontStyle].fontFamily,
@@ -19232,7 +19550,7 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                                   )
                                 }
                               ),
-                              !plan.custom && /* @__PURE__ */ jsxs24(
+                              !plan.custom && /* @__PURE__ */ jsxs25(
                                 Text,
                                 {
                                   $font: theme.typography[props.plans.name.fontStyle].fontFamily,
@@ -19246,7 +19564,7 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                                 }
                               )
                             ] }),
-                            isActivePlan && /* @__PURE__ */ jsx31(
+                            isActivePlan && /* @__PURE__ */ jsx32(
                               Flex,
                               {
                                 $position: "absolute",
@@ -19263,7 +19581,7 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                           ]
                         }
                       ),
-                      /* @__PURE__ */ jsxs24(
+                      /* @__PURE__ */ jsxs25(
                         Flex,
                         {
                           $flexDirection: "column",
@@ -19272,7 +19590,7 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                           $gap: `${cardPadding}rem`,
                           $padding: `${0.75 * cardPadding}rem ${cardPadding}rem 0`,
                           children: [
-                            props.plans.showEntitlements && /* @__PURE__ */ jsxs24(Flex, { $flexDirection: "column", $gap: "1rem", $flexGrow: "1", children: [
+                            props.plans.showEntitlements && /* @__PURE__ */ jsxs25(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;
@@ -19295,8 +19613,8 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                                   return acc;
                                 }
                                 acc.push(
-                                  /* @__PURE__ */ jsxs24(Flex, { $gap: "1rem", children: [
-                                    props.plans.showFeatureIcons && entitlement.feature?.icon && /* @__PURE__ */ jsx31(
+                                  /* @__PURE__ */ jsxs25(Flex, { $gap: "1rem", children: [
+                                    props.plans.showFeatureIcons && entitlement.feature?.icon && /* @__PURE__ */ jsx32(
                                       IconRound,
                                       {
                                         name: entitlement.feature.icon,
@@ -19307,7 +19625,7 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                                         ]
                                       }
                                     ),
-                                    entitlement.feature?.name && /* @__PURE__ */ jsx31(Flex, { $alignItems: "center", children: /* @__PURE__ */ jsx31(
+                                    entitlement.feature?.name && /* @__PURE__ */ jsx32(Flex, { $alignItems: "center", children: /* @__PURE__ */ jsx32(
                                       Text,
                                       {
                                         $font: theme.typography.text.fontFamily,
@@ -19315,7 +19633,7 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                                         $weight: theme.typography.text.fontWeight,
                                         $color: theme.typography.text.color,
                                         $leading: 1.35,
-                                        children: typeof price !== "undefined" ? /* @__PURE__ */ jsxs24(Fragment13, { children: [
+                                        children: typeof price !== "undefined" ? /* @__PURE__ */ jsxs25(Fragment13, { children: [
                                           formatCurrency(price, currency),
                                           " ",
                                           t2("per"),
@@ -19324,19 +19642,19 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                                             entitlement.feature.name,
                                             1
                                           ),
-                                          entitlement.priceBehavior === "pay_in_advance" && /* @__PURE__ */ jsxs24(Fragment13, { children: [
+                                          entitlement.priceBehavior === "pay_in_advance" && /* @__PURE__ */ jsxs25(Fragment13, { children: [
                                             " ",
                                             t2("per"),
                                             " ",
                                             selectedPeriod
                                           ] })
-                                        ] }) : entitlement.valueType === "numeric" || entitlement.valueType === "unlimited" || entitlement.valueType === "trait" ? /* @__PURE__ */ jsxs24(Fragment13, { children: [
+                                        ] }) : entitlement.valueType === "numeric" || entitlement.valueType === "unlimited" || entitlement.valueType === "trait" ? /* @__PURE__ */ jsxs25(Fragment13, { 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__ */ jsxs24(Fragment13, { children: [
+                                          entitlement.metricPeriod && /* @__PURE__ */ jsxs25(Fragment13, { children: [
                                             " ",
                                             t2("per"),
                                             " ",
@@ -19354,14 +19672,14 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                                 );
                                 return acc;
                               }, []).slice(0, count?.limit ?? VISIBLE_ENTITLEMENT_COUNT),
-                              (count?.size || plan.entitlements.length) > VISIBLE_ENTITLEMENT_COUNT && /* @__PURE__ */ jsxs24(
+                              (count?.size || plan.entitlements.length) > VISIBLE_ENTITLEMENT_COUNT && /* @__PURE__ */ jsxs25(
                                 Flex,
                                 {
                                   $alignItems: "center",
                                   $justifyContent: "start",
                                   $marginTop: "1rem",
                                   children: [
-                                    /* @__PURE__ */ jsx31(
+                                    /* @__PURE__ */ jsx32(
                                       Icon2,
                                       {
                                         name: isExpanded ? "chevron-up" : "chevron-down",
@@ -19373,7 +19691,7 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                                         }
                                       }
                                     ),
-                                    /* @__PURE__ */ jsx31(
+                                    /* @__PURE__ */ jsx32(
                                       Text,
                                       {
                                         onClick: () => handleToggleShowAll(plan.id),
@@ -19390,7 +19708,7 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                                 }
                               )
                             ] }),
-                            isActivePlan ? /* @__PURE__ */ jsxs24(
+                            isActivePlan ? /* @__PURE__ */ jsxs25(
                               Flex,
                               {
                                 $justifyContent: "center",
@@ -19398,7 +19716,7 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                                 $gap: "0.25rem",
                                 $padding: "0.625rem 0",
                                 children: [
-                                  /* @__PURE__ */ jsx31(
+                                  /* @__PURE__ */ jsx32(
                                     Icon2,
                                     {
                                       name: "check-rounded",
@@ -19409,7 +19727,7 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                                       }
                                     }
                                   ),
-                                  /* @__PURE__ */ jsx31(
+                                  /* @__PURE__ */ jsx32(
                                     Text,
                                     {
                                       $size: 15,
@@ -19420,7 +19738,7 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                                   )
                                 ]
                               }
-                            ) : (props.upgrade.isVisible || props.downgrade.isVisible) && /* @__PURE__ */ jsx31(
+                            ) : (props.upgrade.isVisible || props.downgrade.isVisible) && /* @__PURE__ */ jsx32(
                               EmbedButton,
                               {
                                 disabled: !plan.valid || !canCheckout,
@@ -19443,14 +19761,14 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                                   $color: props.downgrade.buttonStyle,
                                   $variant: "outline"
                                 },
-                                children: plan.custom ? /* @__PURE__ */ jsx31(
+                                children: plan.custom ? /* @__PURE__ */ jsx32(
                                   ButtonLink,
                                   {
                                     href: plan.customPlanConfig?.ctaWebSite ?? "#",
                                     target: "_blank",
                                     children: plan.customPlanConfig?.ctaText ?? t2("Custom Plan CTA")
                                   }
-                                ) : !plan.valid ? /* @__PURE__ */ jsx31(
+                                ) : !plan.valid ? /* @__PURE__ */ jsx32(
                                   Tooltip,
                                   {
                                     trigger: t2("Over usage limit"),
@@ -19472,14 +19790,14 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
             }
           )
         ] }),
-        /* @__PURE__ */ jsx31(Box, { children: props.addOns.isVisible && addOns.length > 0 && /* @__PURE__ */ jsxs24(Fragment13, { children: [
-          props.header.isVisible && /* @__PURE__ */ jsx31(
+        /* @__PURE__ */ jsx32(Box, { children: props.addOns.isVisible && addOns.length > 0 && /* @__PURE__ */ jsxs25(Fragment13, { children: [
+          props.header.isVisible && /* @__PURE__ */ jsx32(
             Flex,
             {
               $justifyContent: "space-between",
               $alignItems: "center",
               $marginBottom: "1rem",
-              children: /* @__PURE__ */ jsx31(
+              children: /* @__PURE__ */ jsx32(
                 Text,
                 {
                   $font: theme.typography[props.header.fontStyle].fontFamily,
@@ -19491,7 +19809,7 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
               )
             }
           ),
-          /* @__PURE__ */ jsx31(
+          /* @__PURE__ */ jsx32(
             Box,
             {
               $display: "grid",
@@ -19499,7 +19817,7 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
               $gap: "1rem",
               children: addOns.map((addOn, index) => {
                 const isActiveAddOn = addOn.current && selectedPeriod === data.company?.addOns.find((a2) => a2.id === addOn.id)?.planPeriod;
-                return /* @__PURE__ */ jsxs24(
+                return /* @__PURE__ */ jsxs25(
                   Flex,
                   {
                     $position: "relative",
@@ -19513,8 +19831,8 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                     $outlineColor: isActiveAddOn ? theme.primary : "transparent",
                     ...theme.card.hasShadow && { $boxShadow: cardBoxShadow },
                     children: [
-                      /* @__PURE__ */ jsxs24(Flex, { $flexDirection: "column", $gap: "0.75rem", children: [
-                        /* @__PURE__ */ jsx31(Box, { children: /* @__PURE__ */ jsx31(
+                      /* @__PURE__ */ jsxs25(Flex, { $flexDirection: "column", $gap: "0.75rem", children: [
+                        /* @__PURE__ */ jsx32(Box, { children: /* @__PURE__ */ jsx32(
                           Text,
                           {
                             $font: theme.typography[props.plans.name.fontStyle].fontFamily,
@@ -19524,7 +19842,7 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                             children: addOn.name
                           }
                         ) }),
-                        props.addOns.showDescription && /* @__PURE__ */ jsx31(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ jsx31(
+                        props.addOns.showDescription && /* @__PURE__ */ jsx32(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ jsx32(
                           Text,
                           {
                             $font: theme.typography[props.plans.description.fontStyle].fontFamily,
@@ -19534,8 +19852,8 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                             children: addOn.description
                           }
                         ) }),
-                        /* @__PURE__ */ jsxs24(Box, { children: [
-                          /* @__PURE__ */ jsx31(
+                        /* @__PURE__ */ jsxs25(Box, { children: [
+                          /* @__PURE__ */ jsx32(
                             Text,
                             {
                               $font: theme.typography[props.plans.name.fontStyle].fontFamily,
@@ -19548,7 +19866,7 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                               )
                             }
                           ),
-                          /* @__PURE__ */ jsxs24(
+                          /* @__PURE__ */ jsxs25(
                             Text,
                             {
                               $font: theme.typography[props.plans.name.fontStyle].fontFamily,
@@ -19562,7 +19880,7 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                             }
                           )
                         ] }),
-                        isActiveAddOn && /* @__PURE__ */ jsx31(
+                        isActiveAddOn && /* @__PURE__ */ jsx32(
                           Flex,
                           {
                             $position: "absolute",
@@ -19577,7 +19895,7 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                           }
                         )
                       ] }),
-                      /* @__PURE__ */ jsxs24(
+                      /* @__PURE__ */ jsxs25(
                         Flex,
                         {
                           $flexDirection: "column",
@@ -19585,7 +19903,7 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                           $gap: `${cardPadding}rem`,
                           $flexGrow: "1",
                           children: [
-                            props.addOns.showEntitlements && /* @__PURE__ */ jsx31(
+                            props.addOns.showEntitlements && /* @__PURE__ */ jsx32(
                               Flex,
                               {
                                 $flexDirection: "column",
@@ -19593,15 +19911,15 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                                 $gap: "1rem",
                                 $flexGrow: "1",
                                 children: addOn.entitlements.map((entitlement) => {
-                                  return /* @__PURE__ */ jsx31(
+                                  return /* @__PURE__ */ jsx32(
                                     Flex,
                                     {
                                       $flexWrap: "wrap",
                                       $justifyContent: "space-between",
                                       $alignItems: "center",
                                       $gap: "1rem",
-                                      children: /* @__PURE__ */ jsxs24(Flex, { $gap: "1rem", children: [
-                                        props.addOns.showFeatureIcons && entitlement.feature?.icon && /* @__PURE__ */ jsx31(
+                                      children: /* @__PURE__ */ jsxs25(Flex, { $gap: "1rem", children: [
+                                        props.addOns.showFeatureIcons && entitlement.feature?.icon && /* @__PURE__ */ jsx32(
                                           IconRound,
                                           {
                                             name: entitlement.feature.icon,
@@ -19612,20 +19930,20 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                                             ]
                                           }
                                         ),
-                                        entitlement.feature?.name && /* @__PURE__ */ jsx31(Flex, { $alignItems: "center", children: /* @__PURE__ */ jsx31(
+                                        entitlement.feature?.name && /* @__PURE__ */ jsx32(Flex, { $alignItems: "center", children: /* @__PURE__ */ jsx32(
                                           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__ */ jsxs24(Fragment13, { children: [
+                                            children: entitlement.valueType === "numeric" || entitlement.valueType === "unlimited" || entitlement.valueType === "trait" ? /* @__PURE__ */ jsxs25(Fragment13, { 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__ */ jsxs24(Fragment13, { children: [
+                                              entitlement.metricPeriod && /* @__PURE__ */ jsxs25(Fragment13, { children: [
                                                 " ",
                                                 t2("per"),
                                                 " ",
@@ -19646,7 +19964,7 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                                 })
                               }
                             ),
-                            props.upgrade.isVisible && /* @__PURE__ */ jsx31(
+                            props.upgrade.isVisible && /* @__PURE__ */ jsx32(
                               EmbedButton,
                               {
                                 disabled: !addOn.valid || !canCheckout,
@@ -19682,8 +20000,8 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
 PricingTable.displayName = "PricingTable";
 // src/components/elements/upcoming-bill/UpcomingBill.tsx
-import { forwardRef as forwardRef13, useMemo as useMemo9 } from "react";
-import { jsx as jsx32, jsxs as jsxs25 } from "react/jsx-runtime";
+import { forwardRef as forwardRef13, useMemo as useMemo10 } from "react";
+import { jsx as jsx33, jsxs as jsxs26 } from "react/jsx-runtime";
 function resolveDesignProps7(props) {
   return {
     header: {
@@ -19708,7 +20026,7 @@ var UpcomingBill = forwardRef13(({ className, ...rest }, ref) => {
   const theme = nt();
   const { data } = useEmbed();
   const isLightBackground = useIsLightBackground();
-  const { upcomingInvoice, discounts } = useMemo9(() => {
+  const { upcomingInvoice, discounts } = useMemo10(() => {
     const discounts2 = (data.subscription?.discounts || []).map((discount) => ({
       amountOff: discount.amountOff,
       couponId: discount.couponId,
@@ -19735,7 +20053,7 @@ var UpcomingBill = forwardRef13(({ className, ...rest }, ref) => {
   if (typeof upcomingInvoice.amountDue !== "number" || !upcomingInvoice.dueDate) {
     return null;
   }
-  return /* @__PURE__ */ jsxs25(
+  return /* @__PURE__ */ jsxs26(
     Element,
     {
       as: Flex,
@@ -19744,7 +20062,7 @@ var UpcomingBill = forwardRef13(({ className, ...rest }, ref) => {
       $flexDirection: "column",
       $gap: "1rem",
       children: [
-        props.header.isVisible && /* @__PURE__ */ jsx32(Flex, { $justifyContent: "space-between", $alignItems: "center", children: /* @__PURE__ */ jsxs25(
+        props.header.isVisible && /* @__PURE__ */ jsx33(Flex, { $justifyContent: "space-between", $alignItems: "center", children: /* @__PURE__ */ jsxs26(
           Text,
           {
             $font: theme.typography[props.header.fontStyle].fontFamily,
@@ -19758,8 +20076,8 @@ var UpcomingBill = forwardRef13(({ className, ...rest }, ref) => {
             ]
           }
         ) }),
-        /* @__PURE__ */ jsxs25(Flex, { $justifyContent: "space-between", $alignItems: "start", $gap: "1rem", children: [
-          props.price.isVisible && /* @__PURE__ */ jsx32(Flex, { $alignItems: "end", $flexGrow: "1", children: /* @__PURE__ */ jsx32(
+        /* @__PURE__ */ jsxs26(Flex, { $justifyContent: "space-between", $alignItems: "start", $gap: "1rem", children: [
+          props.price.isVisible && /* @__PURE__ */ jsx33(Flex, { $alignItems: "end", $flexGrow: "1", children: /* @__PURE__ */ jsx33(
             Text,
             {
               $font: theme.typography[props.price.fontStyle].fontFamily,
@@ -19773,7 +20091,7 @@ var UpcomingBill = forwardRef13(({ className, ...rest }, ref) => {
               )
             }
           ) }),
-          /* @__PURE__ */ jsx32(Box, { $lineHeight: 1.15, $maxWidth: "10rem", $textAlign: "right", children: /* @__PURE__ */ jsx32(
+          /* @__PURE__ */ jsx33(Box, { $lineHeight: 1.15, $maxWidth: "10rem", $textAlign: "right", children: /* @__PURE__ */ jsx33(
             Text,
             {
               $font: theme.typography[props.contractEndDate.fontStyle].fontFamily,
@@ -19785,8 +20103,8 @@ var UpcomingBill = forwardRef13(({ className, ...rest }, ref) => {
             }
           ) })
         ] }),
-        discounts.length > 0 && /* @__PURE__ */ jsxs25(Flex, { $justifyContent: "space-between", $alignItems: "center", children: [
-          /* @__PURE__ */ jsx32(Box, { children: /* @__PURE__ */ jsx32(
+        discounts.length > 0 && /* @__PURE__ */ jsxs26(Flex, { $justifyContent: "space-between", $alignItems: "center", children: [
+          /* @__PURE__ */ jsx33(Box, { children: /* @__PURE__ */ jsx33(
             Text,
             {
               $font: theme.typography.text.fontFamily,
@@ -19796,8 +20114,8 @@ var UpcomingBill = forwardRef13(({ className, ...rest }, ref) => {
               children: t2("Discount")
             }
           ) }),
-          /* @__PURE__ */ jsx32(Box, { children: discounts.map((discount) => /* @__PURE__ */ jsxs25(Flex, { $alignItems: "center", $gap: "0.5rem", children: [
-            /* @__PURE__ */ jsx32(
+          /* @__PURE__ */ jsx33(Box, { children: discounts.map((discount) => /* @__PURE__ */ jsxs26(Flex, { $alignItems: "center", $gap: "0.5rem", children: [
+            /* @__PURE__ */ jsx33(
               Flex,
               {
                 $alignItems: "center",
@@ -19806,7 +20124,7 @@ var UpcomingBill = forwardRef13(({ className, ...rest }, ref) => {
                 $borderStyle: "solid",
                 $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.15)" : "hsla(0, 0%, 100%, 0.15)",
                 $borderRadius: "0.3125rem",
-                children: /* @__PURE__ */ jsx32(
+                children: /* @__PURE__ */ jsx33(
                   Text,
                   {
                     $font: theme.typography.text.fontFamily,
@@ -19818,7 +20136,7 @@ var UpcomingBill = forwardRef13(({ className, ...rest }, ref) => {
                 )
               }
             ),
-            /* @__PURE__ */ jsx32(Box, { children: /* @__PURE__ */ jsx32(
+            /* @__PURE__ */ jsx33(Box, { children: /* @__PURE__ */ jsx33(
               Text,
               {
                 $font: theme.typography.text.fontFamily,
@@ -19836,8 +20154,69 @@ var UpcomingBill = forwardRef13(({ className, ...rest }, ref) => {
 });
 UpcomingBill.displayName = "UpcomingBill";
+// src/components/elements/unsubscribe-button/UnsubscribeButton.tsx
+import { forwardRef as forwardRef14 } from "react";
+import { jsx as jsx34 } from "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 = forwardRef14(({ 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__ */ jsx34(
+    Element,
+    {
+      as: Flex,
+      ref,
+      className,
+      $flexDirection: "column",
+      $gap: "2rem",
+      children: /* @__PURE__ */ jsx34(
+        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
-import { useEffect as useEffect9, useState as useState16 } from "react";
+import { useEffect as useEffect9, useState as useState17 } from "react";
 // src/components/embed/renderer.ts
 import { createElement as createElement5 } from "react";
@@ -19852,7 +20231,8 @@ var components = {
   UpcomingBill,
   PaymentMethod,
   Invoices,
-  PricingTable
+  PricingTable,
+  UnsubscribeButton
 };
 function createRenderer(options) {
   const { useFallback = false } = options || {};
@@ -19862,7 +20242,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
       );
     }
@@ -19885,10 +20265,10 @@ function createRenderer(options) {
 }
 // src/components/embed/ComponentTree.tsx
-import { Fragment as Fragment14, jsx as jsx33, jsxs as jsxs26 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx35, jsxs as jsxs27 } from "react/jsx-runtime";
 var Loading = () => {
   const theme = nt();
-  return /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsx35(
     Flex,
     {
       $width: "100%",
@@ -19896,13 +20276,13 @@ var Loading = () => {
       $alignItems: "center",
       $justifyContent: "center",
       $padding: `${theme.card.padding / TEXT_BASE_SIZE}rem`,
-      children: /* @__PURE__ */ jsx33(Loader, { $size: "2xl", $color: "#194BFB" })
+      children: /* @__PURE__ */ jsx35(Loader, { $size: "2xl", $color: "#194BFB" })
     }
   );
 };
 var Error2 = ({ message }) => {
   const theme = nt();
-  return /* @__PURE__ */ jsxs26(
+  return /* @__PURE__ */ jsxs27(
     Flex,
     {
       $flexDirection: "column",
@@ -19913,7 +20293,7 @@ var Error2 = ({ message }) => {
       $alignItems: "center",
       $justifyContent: "center",
       children: [
-        /* @__PURE__ */ jsx33(
+        /* @__PURE__ */ jsx35(
           Box,
           {
             $marginBottom: `${8 / TEXT_BASE_SIZE}rem`,
@@ -19924,7 +20304,7 @@ var Error2 = ({ message }) => {
             children: "Error"
           }
         ),
-        /* @__PURE__ */ jsx33(
+        /* @__PURE__ */ jsx35(
           Box,
           {
             $marginBottom: `${8 / TEXT_BASE_SIZE}rem`,
@@ -19941,31 +20321,31 @@ var Error2 = ({ message }) => {
 };
 var ComponentTree = () => {
   const { error, nodes, isPending } = useEmbed();
-  const [children, setChildren] = useState16(/* @__PURE__ */ jsx33(Loading, {}));
+  const [children, setChildren] = useState17(/* @__PURE__ */ jsx35(Loading, {}));
   useEffect9(() => {
     const renderer = createRenderer();
     setChildren(nodes.map(renderer));
   }, [nodes]);
   if (error) {
     console.error(error);
-    return /* @__PURE__ */ jsx33(Error2, { message: error.message });
+    return /* @__PURE__ */ jsx35(Error2, { message: error.message });
   }
   if (isPending) {
-    return /* @__PURE__ */ jsx33(Loading, {});
+    return /* @__PURE__ */ jsx35(Loading, {});
   }
-  return /* @__PURE__ */ jsx33(Fragment14, { children });
+  return /* @__PURE__ */ jsx35(Fragment14, { children });
 };
 // src/components/embed/Embed.tsx
-import { jsx as jsx34 } from "react/jsx-runtime";
+import { jsx as jsx36 } from "react/jsx-runtime";
 var SchematicEmbed = ({ id, accessToken, apiConfig }) => {
   if (accessToken?.length === 0) {
-    return /* @__PURE__ */ jsx34("div", { children: "Please provide an access token." });
+    return /* @__PURE__ */ jsx36("div", { children: "Please provide an access token." });
   }
   if (!accessToken?.startsWith("token_")) {
-    return /* @__PURE__ */ jsx34("div", { children: 'Invalid access token; your temporary access token will start with "token_".' });
+    return /* @__PURE__ */ jsx36("div", { children: 'Invalid access token; your temporary access token will start with "token_".' });
   }
-  return /* @__PURE__ */ jsx34(EmbedProvider, { id, accessToken, apiConfig, children: /* @__PURE__ */ jsx34(ComponentTree, {}) });
+  return /* @__PURE__ */ jsx36(EmbedProvider, { id, accessToken, apiConfig, children: /* @__PURE__ */ jsx36(ComponentTree, {}) });
 };
 export {
   Box,
@@ -19997,6 +20377,7 @@ export {
   StyledCard,
   Text,
   Tooltip,
+  UnsubscribeButton,
   UpcomingBill,
   Viewport,
   cardBoxShadow,