@schematichq/schematic-components 0.7.15 → 0.7.16

package/dist/schematic-components.cjs.js

@@ -6028,16 +6028,17 @@ __export(index_exports, {
   useEmbed: () => useEmbed,
   useIsLightBackground: () => useIsLightBackground,
   usePrevious: () => usePrevious2,
+  useRequest: () => useRequest,
   useTrialEnd: () => useTrialEnd,
   useWrapChildren: () => useWrapChildren
 });
 module.exports = __toCommonJS(index_exports);
 
 // src/components/elements/button/Button.tsx
-var import_react31 = require("react");
+var import_react33 = require("react");
 
 // src/components/layout/card/Card.tsx
-var import_react19 = require("react");
+var import_react21 = require("react");
 
 // node_modules/styled-components/node_modules/tslib/tslib.es6.mjs
 var __assign = function() {
@@ -16341,6 +16342,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.",
     "After the trial, cancel": "After the trial, you will be downgraded to the {{defaultPlanName}} plan and your subscription will be cancelled.",
     "After the trial, subscribe": "After the trial, subscription starts and you will be billed.",
+    "Amount off": "{{amount}} off",
     Billed: "Billed {{period}}",
     "billing period": "billing period",
     "Cancel subscription": "Cancel subscription",
@@ -16422,11 +16424,13 @@ var en_default = {
     "Subscription canceled": "Subscription canceled",
     Subscription: "Subscription",
     "Talk to support": "Talk to support",
+    "There was a problem retrieving your upcoming invoice.": "There was a problem retrieving your upcoming invoice.",
     Total: "Total",
     "Trial ends in": "Trial ends in {{days}} days",
     "Trial in progress": "Trial in progress",
     "Trial selected": "Trial selected",
     Trial: "Trial",
+    "Try again": "Try again",
     Unlimited: "Unlimited {{item}}",
     "Unsubscribe failed": "Unsubscribe failed",
     Unsubscribe: "Unsubscribe",
@@ -17120,7 +17124,7 @@ var EmbedProvider = ({
   (0, import_react11.useEffect)(() => {
     if (accessToken) {
       const { headers = {} } = apiConfig ?? {};
-      headers["X-Schematic-Components-Version"] = "0.7.15";
+      headers["X-Schematic-Components-Version"] = "0.7.16";
       headers["X-Schematic-Session-ID"] = sessionIdRef.current;
       const config = new Configuration({
         ...apiConfig,
@@ -17200,6 +17204,36 @@ function usePrevious2(value) {
   return ref.current;
 }
 
+// src/hooks/useRequest.ts
+var import_react15 = require("react");
+function useRequest(fn) {
+  const [isLoading, setIsLoading] = (0, import_react15.useState)(false);
+  const [error, setError] = (0, import_react15.useState)(null);
+  const [data, setData] = (0, import_react15.useState)(void 0);
+  const request = (0, import_react15.useCallback)(async () => {
+    try {
+      setError(null);
+      setIsLoading(true);
+      const response = await fn();
+      if (!response) {
+        return;
+      }
+      setData(response.data);
+    } catch (e2) {
+      if (e2 instanceof Error) {
+        setError(e2);
+      }
+    } finally {
+      setIsLoading(false);
+    }
+  }, [fn]);
+  const value = (0, import_react15.useMemo)(() => {
+    const state = { isLoading, error, data };
+    return [state, request];
+  }, [isLoading, error, data, request]);
+  return value;
+}
+
 // src/hooks/useTrialEnd.ts
 function useTrialEnd() {
   const { data } = useEmbed();
@@ -17215,12 +17249,12 @@ function useTrialEnd() {
 }
 
 // src/hooks/useWrapChildren.ts
-var import_react15 = require("react");
+var import_react16 = require("react");
 function useWrapChildren(elements) {
-  const [shouldWrap, setShouldWrap] = (0, import_react15.useState)(
+  const [shouldWrap, setShouldWrap] = (0, import_react16.useState)(
     () => new Array(elements.length).fill(false)
   );
-  (0, import_react15.useLayoutEffect)(() => {
+  (0, import_react16.useLayoutEffect)(() => {
     const rowShouldWrap = (parent) => [...parent.children].some(
       (el) => el instanceof HTMLElement && el.previousElementSibling instanceof HTMLElement && el.offsetLeft <= el.previousElementSibling.offsetLeft
     );
@@ -17414,7 +17448,7 @@ var Button = dt.button(
     $isLoading = false,
     $alignment = "center",
     $selfAlignment = "center",
-    $fullWidth = true,
+    $fullWidth = false,
     disabled,
     theme
   }) => {
@@ -17457,7 +17491,7 @@ var Button = dt.button(
       return lt`
           color: ${textColor};
 
-          ${Icon} {
+          ${Text}, ${Icon} {
             color: ${textColor};
           }
         `;
@@ -17476,7 +17510,7 @@ var Button = dt.button(
             border-color: ${color};
             color: ${color};
 
-            ${Icon} {
+            ${Text}, ${Icon} {
               color: ${color};
             }
           `;
@@ -17487,7 +17521,7 @@ var Button = dt.button(
             border-color: ${l2 > 50 ? darken(theme.card.background, 0.2) : lighten(theme.card.background, 0.2)};
             color: ${color};
 
-            ${Icon} {
+            ${Text}, ${Icon} {
               color: ${color};
             }
           `;
@@ -17502,7 +17536,7 @@ var Button = dt.button(
               text-decoration: underline;
             }
 
-            ${Icon} {
+            ${Text}, ${Icon} {
               color: ${color};
             }
           `;
@@ -17543,7 +17577,7 @@ var Button = dt.button(
               border-color: ${color};
               color: ${textColor};
 
-              ${Icon} {
+              ${Text}, ${Icon} {
                 color: ${textColor};
               }
             `;
@@ -17875,7 +17909,7 @@ var Input = dt.input(({ theme, $size = "md", $variant = "filled" }) => {
 });
 
 // src/components/ui/modal/Modal.tsx
-var import_react16 = require("react");
+var import_react17 = require("react");
 
 // src/components/ui/modal/styles.ts
 var Modal = dt(Box).attrs({
@@ -17914,15 +17948,15 @@ var Modal = dt(Box).attrs({
 
 // src/components/ui/modal/Modal.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
-var Modal2 = (0, import_react16.forwardRef)(
+var Modal2 = (0, import_react17.forwardRef)(
   ({ children, contentRef, size = "auto", top = 0, onClose, ...rest }, ref) => {
     const { setLayout } = useEmbed();
     const isLightBackground = useIsLightBackground();
-    const handleClose = (0, import_react16.useCallback)(() => {
+    const handleClose = (0, import_react17.useCallback)(() => {
       setLayout("portal");
       onClose?.();
     }, [setLayout, onClose]);
-    (0, import_react16.useLayoutEffect)(() => {
+    (0, import_react17.useLayoutEffect)(() => {
       contentRef?.current?.focus({ preventScroll: true });
     }, [contentRef]);
     return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
@@ -17962,7 +17996,7 @@ var Modal2 = (0, import_react16.forwardRef)(
 Modal2.displayName = "Modal";
 
 // src/components/ui/modal/ModalHeader.tsx
-var import_react17 = require("react");
+var import_react18 = require("react");
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var ModalHeader = ({
   children,
@@ -17972,7 +18006,7 @@ var ModalHeader = ({
   const theme = nt();
   const { setLayout } = useEmbed();
   const isLightBackground = useIsLightBackground();
-  const handleClose = (0, import_react17.useCallback)(() => {
+  const handleClose = (0, import_react18.useCallback)(() => {
     setLayout("portal");
     onClose?.();
   }, [setLayout, onClose]);
@@ -18020,6 +18054,7 @@ var ModalHeader = ({
 };
 
 // src/components/ui/progress-bar/ProgressBar.tsx
+var import_react19 = require("react");
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var progressColorMap = [
   "blue",
@@ -18029,68 +18064,72 @@ var progressColorMap = [
   "red",
   "red"
 ];
-var ProgressBar = ({
-  progress,
-  value,
-  total = 0,
-  color = "gray",
-  bgColor = "#F2F4F7",
-  ...props
-}) => {
-  const theme = nt();
-  const barColorMap = {
-    gray: "#9CA3AF",
-    blue: "#2563EB",
-    yellow: "#FFAA06",
-    orange: "#DB6769",
-    red: "#EF4444"
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
-    Flex,
-    {
-      $position: "relative",
-      $alignItems: "center",
-      $gap: "1rem",
-      $width: "100%",
-      ...props,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-          Box,
-          {
-            $overflow: "hidden",
-            $width: "100%",
-            $minWidth: "6rem",
-            $height: `${8 / TEXT_BASE_SIZE}rem`,
-            $backgroundColor: bgColor,
-            $borderRadius: "9999px",
-            children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-              Box,
-              {
-                $width: `${Math.min(progress, 100)}%`,
-                $height: "100%",
-                $backgroundColor: barColorMap[color]
-              }
-            )
-          }
-        ),
-        total && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
-          Text,
-          {
-            $font: theme.typography.text.fontFamily,
-            $size: 14,
-            $weight: 500,
-            $color: theme.typography.text.color,
-            children: [
-              formatNumber(value),
-              "/",
-              formatNumber(total)
-            ]
-          }
-        )
-      ]
-    }
-  );
-};
+var ProgressBar = (0, import_react19.forwardRef)(
+  ({
+    progress,
+    value,
+    total = 0,
+    color = "gray",
+    bgColor = "#F2F4F7",
+    ...props
+  }, ref) => {
+    const theme = nt();
+    const barColorMap = {
+      gray: "#9CA3AF",
+      blue: "#2563EB",
+      yellow: "#FFAA06",
+      orange: "#DB6769",
+      red: "#EF4444"
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+      Flex,
+      {
+        ref,
+        $position: "relative",
+        $alignItems: "center",
+        $gap: "1rem",
+        $width: "100%",
+        ...props,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            Box,
+            {
+              $overflow: "hidden",
+              $width: "100%",
+              $minWidth: "6rem",
+              $height: `${8 / TEXT_BASE_SIZE}rem`,
+              $backgroundColor: bgColor,
+              $borderRadius: "9999px",
+              children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                Box,
+                {
+                  $width: `${Math.min(progress, 100)}%`,
+                  $height: "100%",
+                  $backgroundColor: barColorMap[color]
+                }
+              )
+            }
+          ),
+          total && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+            Text,
+            {
+              $font: theme.typography.text.fontFamily,
+              $size: 14,
+              $weight: 500,
+              $color: theme.typography.text.color,
+              children: [
+                formatNumber(value),
+                "/",
+                formatNumber(total)
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+ProgressBar.displayName = "ProgressBar";
 
 // src/components/ui/text/styles.ts
 var TextPropNames = /* @__PURE__ */ ((TextPropNames2) => {
@@ -18157,12 +18196,13 @@ var Text = dt.span.withConfig({
 
 // src/components/ui/tooltip/Tooltip.tsx
 var import_lodash2 = __toESM(require_lodash());
-var import_react18 = require("react");
+var import_react20 = require("react");
 var import_react_dom = require("react-dom");
 
 // src/components/ui/tooltip/styles.ts
 var Trigger = dt.div`
   width: 100%;
+  flex-grow: 1;
 `;
 var coords = (position2) => {
   let x2 = 0;
@@ -18294,13 +18334,13 @@ var Tooltip = ({
   trigger,
   content,
   position: position2 = "top",
-  zIndex = 1,
+  zIndex = 9999999,
   ...rest
 }) => {
-  const ref = (0, import_react18.useRef)(null);
-  const [show, setShow] = (0, import_react18.useState)(false);
-  const [coords2, setCoords] = (0, import_react18.useState)({ x: 0, y: 0 });
-  const updateCoords = (0, import_react18.useCallback)(() => {
+  const ref = (0, import_react20.useRef)(null);
+  const [show, setShow] = (0, import_react20.useState)(false);
+  const [coords2, setCoords] = (0, import_react20.useState)({ x: 0, y: 0 });
+  const updateCoords = (0, import_react20.useCallback)(() => {
     if (ref.current) {
       const { top: offsetTop, left: offsetLeft } = document.body.getBoundingClientRect();
       const rect = ref.current.getBoundingClientRect();
@@ -18318,14 +18358,14 @@ var Tooltip = ({
       });
     }
   }, [position2]);
-  (0, import_react18.useLayoutEffect)(() => {
+  (0, import_react20.useLayoutEffect)(() => {
     const handleResize = (0, import_lodash2.debounce)(updateCoords, DEBOUNCE_TIMEOUT);
     window.addEventListener("resize", handleResize);
     return () => {
       window.removeEventListener("resize", handleResize);
     };
   }, [updateCoords]);
-  (0, import_react18.useLayoutEffect)(() => {
+  (0, import_react20.useLayoutEffect)(() => {
     updateCoords();
   }, [updateCoords, show]);
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
@@ -18387,7 +18427,7 @@ var StyledCard = dt.div(({ theme }) => {
 
 // src/components/layout/card/Card.tsx
 var import_jsx_runtime8 = require("react/jsx-runtime");
-var Card = (0, import_react19.forwardRef)(
+var Card = (0, import_react21.forwardRef)(
   ({ children, className }, ref) => {
     const { isPending } = useEmbed();
     const theme = nt();
@@ -18416,7 +18456,7 @@ var Card = (0, import_react19.forwardRef)(
 Card.displayName = "Card";
 
 // src/components/layout/column/Column.tsx
-var import_react20 = require("react");
+var import_react22 = require("react");
 
 // src/components/layout/column/styles.ts
 var StyledColumn = dt.div`
@@ -18425,15 +18465,15 @@ var StyledColumn = dt.div`
 
 // src/components/layout/column/Column.tsx
 var import_jsx_runtime9 = require("react/jsx-runtime");
-var Column = (0, import_react20.forwardRef)(
+var Column = (0, import_react22.forwardRef)(
   ({ children, basis, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(StyledColumn, { ref, ...props, children: import_react20.Children.count(children) > 0 ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Card, { children }) : children });
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(StyledColumn, { ref, ...props, children: import_react22.Children.count(children) > 0 ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Card, { children }) : children });
   }
 );
 Column.displayName = "Column";
 
 // src/components/layout/root/Root.tsx
-var import_react21 = require("react");
+var import_react23 = require("react");
 
 // src/components/layout/root/styles.ts
 var Container2 = dt.div`
@@ -18445,6 +18485,7 @@ var Container2 = dt.div`
   width: 100%;
   height: 100%;
   container-type: inline-size;
+  interpolate-size: allow-keywords;
 
   *,
   *::before,
@@ -18469,7 +18510,7 @@ var Container2 = dt.div`
 
 // src/components/layout/root/Root.tsx
 var import_jsx_runtime10 = require("react/jsx-runtime");
-var Root = (0, import_react21.forwardRef)(
+var Root = (0, import_react23.forwardRef)(
   ({ data, settings, ...props }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Container2, { ref, ...props });
   }
@@ -18478,17 +18519,17 @@ Root.displayName = "Root";
 
 // src/components/layout/viewport/Viewport.tsx
 var import_lodash3 = __toESM(require_lodash());
-var import_react30 = require("react");
+var import_react32 = require("react");
 var import_react_dom2 = require("react-dom");
 
 // src/components/shared/checkout-dialog/CheckoutDialog.tsx
-var import_react26 = require("react");
+var import_react28 = require("react");
 
 // src/components/shared/sidebar/Sidebar.tsx
-var import_react23 = require("react");
+var import_react25 = require("react");
 
 // src/components/shared/sidebar/Proration.tsx
-var import_react22 = require("react");
+var import_react24 = require("react");
 var import_jsx_runtime11 = require("react/jsx-runtime");
 var Proration = ({
   currency,
@@ -18497,7 +18538,7 @@ var Proration = ({
 }) => {
   const { t: t2 } = useTranslation();
   const theme = nt();
-  const [open, setOpen] = (0, import_react22.useState)(false);
+  const [open, setOpen] = (0, import_react24.useState)(false);
   const toggle = (e2) => {
     e2.preventDefault();
     e2.stopPropagation();
@@ -18553,21 +18594,29 @@ var Proration = ({
               children: t2("Total")
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Button, { onClick: toggle, $variant: "text", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Icon2, { name: open ? "chevron-up" : "chevron-down" }),
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-              Text,
-              {
-                $font: theme.typography.link.fontFamily,
-                $size: theme.typography.link.fontSize,
-                $weight: theme.typography.link.fontWeight,
-                $color: theme.typography.link.color,
-                $leading: 1,
-                style: { cursor: "pointer" },
-                children: open ? t2("Hide details") : t2("Show details")
-              }
-            )
-          ] })
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+            Button,
+            {
+              onClick: toggle,
+              style: { height: "auto", padding: 0 },
+              $variant: "text",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Icon2, { name: open ? "chevron-up" : "chevron-down" }),
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                  Text,
+                  {
+                    $font: theme.typography.link.fontFamily,
+                    $size: theme.typography.link.fontSize,
+                    $weight: theme.typography.link.fontWeight,
+                    $color: theme.typography.link.color,
+                    $leading: 1,
+                    style: { cursor: "pointer" },
+                    children: open ? t2("Hide details") : t2("Show details")
+                  }
+                )
+              ]
+            }
+          )
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Flex, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
           Text,
@@ -18611,6 +18660,7 @@ var StageButton = ({
         disabled: isLoading || !hasUnstagedChanges || !canUpdateSubscription,
         onClick: checkout,
         $isLoading: isLoading,
+        $fullWidth: true,
         children: t2("Subscribe and close")
       }
     );
@@ -18626,6 +18676,7 @@ var StageButton = ({
             setCheckoutStage?.("checkout");
           },
           $isLoading: isLoading,
+          $fullWidth: true,
           children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
             Flex,
             {
@@ -18660,6 +18711,7 @@ var StageButton = ({
           );
         },
         $isLoading: isLoading,
+        $fullWidth: true,
         children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Flex, { $gap: "0.5rem", $justifyContent: "center", $alignItems: "center", children: [
           t2("Next"),
           ":",
@@ -18683,6 +18735,7 @@ var StageButton = ({
           setCheckoutStage?.(hasAddOns ? "addons" : "checkout");
         },
         $isLoading: isLoading,
+        $fullWidth: true,
         children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
           Flex,
           {
@@ -18714,6 +18767,7 @@ var StageButton = ({
           setCheckoutStage?.("checkout");
         },
         $isLoading: isLoading,
+        $fullWidth: true,
         children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
           Flex,
           {
@@ -18743,6 +18797,7 @@ var StageButton = ({
         disabled: isLoading || !hasUnstagedChanges || !canCheckout,
         onClick: checkout,
         $isLoading: isLoading,
+        $fullWidth: true,
         children: willTrial ? t2("Start trial") : t2("Pay now")
       }
     );
@@ -18778,7 +18833,7 @@ var Sidebar = ({
   const isLightBackground = useIsLightBackground();
   const currentPlan = data.company?.plan;
   const currentAddOns = data.company?.addOns || [];
-  const currentUsageBasedEntitlements = (0, import_react23.useMemo)(() => {
+  const currentUsageBasedEntitlements = (0, import_react25.useMemo)(() => {
     return (data.featureUsage?.features || []).reduce(
       (acc, entitlement) => {
         if (entitlement.priceBehavior && (planPeriod === "month" && entitlement.monthlyUsageBasedPrice || planPeriod === "year" && entitlement.yearlyUsageBasedPrice)) {
@@ -18796,7 +18851,7 @@ var Sidebar = ({
       []
     );
   }, [data.featureUsage?.features, planPeriod]);
-  const { payAsYouGoEntitlements, payInAdvanceEntitlements } = (0, import_react23.useMemo)(() => {
+  const { payAsYouGoEntitlements, payInAdvanceEntitlements } = (0, import_react25.useMemo)(() => {
     const payAsYouGoEntitlements2 = [];
     const payInAdvanceEntitlements2 = usageBasedEntitlements.filter(
       (entitlement) => {
@@ -18808,7 +18863,7 @@ var Sidebar = ({
     );
     return { payAsYouGoEntitlements: payAsYouGoEntitlements2, payInAdvanceEntitlements: payInAdvanceEntitlements2 };
   }, [usageBasedEntitlements]);
-  const subscriptionPrice = (0, import_react23.useMemo)(() => {
+  const subscriptionPrice = (0, import_react25.useMemo)(() => {
     let planPrice;
     let currency;
     if (selectedPlan) {
@@ -18842,7 +18897,7 @@ var Sidebar = ({
     total += payInAdvanceCost;
     return formatCurrency(total, currency);
   }, [selectedPlan, currentPlan, planPeriod, addOns, payInAdvanceEntitlements]);
-  const { amountOff, dueNow, newCharges, percentOff, periodStart, proration } = (0, import_react23.useMemo)(() => {
+  const { amountOff, dueNow, newCharges, percentOff, periodStart, proration } = (0, import_react25.useMemo)(() => {
     return {
       amountOff: charges?.amountOff ?? 0,
       dueNow: charges?.dueNow ?? 0,
@@ -18859,7 +18914,7 @@ var Sidebar = ({
     });
     window.dispatchEvent(event);
   };
-  const checkout = (0, import_react23.useCallback)(async () => {
+  const checkout = (0, import_react25.useCallback)(async () => {
     const priceId = (planPeriod === "year" ? selectedPlan?.yearlyPrice : selectedPlan?.monthlyPrice)?.id;
     if (!api || !selectedPlan || !priceId) {
       return;
@@ -18926,7 +18981,7 @@ var Sidebar = ({
     payInAdvanceEntitlements,
     promoCode
   ]);
-  const unsubscribe = (0, import_react23.useCallback)(async () => {
+  const unsubscribe = (0, import_react25.useCallback)(async () => {
     if (!api) {
       return;
     }
@@ -18950,7 +19005,7 @@ var Sidebar = ({
     addedUsageBasedEntitlements,
     removedUsageBasedEntitlements,
     willUsageBasedEntitlementsChange
-  } = (0, import_react23.useMemo)(() => {
+  } = (0, import_react25.useMemo)(() => {
     const changedUsageBasedEntitlements2 = [];
     const addedUsageBasedEntitlements2 = selectedPlan ? usageBasedEntitlements.reduce(
       (acc, selected) => {
@@ -19014,7 +19069,7 @@ var Sidebar = ({
   const hasUnstagedChanges = willPeriodChange || willPlanChange || willAddOnsChange || willPayInAdvanceEntitlementsChange;
   const canUpdateSubscription = mode === "edit" || api !== null && !isLoading;
   const canCheckout = canUpdateSubscription && (!!data.subscription?.paymentMethod || typeof paymentMethodId === "string");
-  const isTrialable = selectedPlan?.companyCanTrial === true;
+  const isTrialable = selectedPlan?.companyCanTrial === true && selectedPlan?.isTrialable === true;
   const today = /* @__PURE__ */ new Date();
   const trialEndsOn = new Date(today);
   if (isTrialable && selectedPlan.trialDays) {
@@ -19908,7 +19963,7 @@ var Sidebar = ({
                   willTrial
                 }
               ),
-              layout === "unsubscribe" && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Button, { onClick: unsubscribe, $isLoading: isLoading, children: t2("Cancel subscription") }),
+              layout === "unsubscribe" && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Button, { onClick: unsubscribe, $isLoading: isLoading, $fullWidth: true, children: t2("Cancel subscription") }),
               !isLoading && error && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                 Text,
                 {
@@ -20045,6 +20100,7 @@ var AddOns = ({ addOns, toggle, isLoading, period }) => {
                   $size: "sm",
                   $color: "primary",
                   $variant: "outline",
+                  $fullWidth: true,
                   children: t2("Choose add-on")
                 }
               ) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
@@ -20056,6 +20112,7 @@ var AddOns = ({ addOns, toggle, isLoading, period }) => {
                   $size: "sm",
                   $color: addOn.current ? "danger" : "primary",
                   $variant: addOn.current ? "ghost" : "text",
+                  $fullWidth: true,
                   children: addOn.current ? t2("Remove add-on") : /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
                     /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
                       Icon2,
@@ -20081,7 +20138,7 @@ var AddOns = ({ addOns, toggle, isLoading, period }) => {
 };
 
 // src/components/shared/checkout-dialog/Checkout.tsx
-var import_react24 = require("react");
+var import_react26 = require("react");
 var import_jsx_runtime15 = require("react/jsx-runtime");
 var Checkout = ({
   requiresPayment,
@@ -20091,7 +20148,7 @@ var Checkout = ({
   const { t: t2 } = useTranslation();
   const theme = nt();
   const isLightBackground = useIsLightBackground();
-  const [discount, setDiscount] = (0, import_react24.useState)("");
+  const [discount, setDiscount] = (0, import_react26.useState)("");
   if (!requiresPayment) {
     return null;
   }
@@ -20259,7 +20316,7 @@ var Navigation = ({
 };
 
 // src/components/shared/checkout-dialog/Plan.tsx
-var import_react25 = require("react");
+var import_react27 = require("react");
 
 // src/components/elements/pricing-table/styles.ts
 var ButtonLink = dt.a`
@@ -20275,7 +20332,7 @@ var import_jsx_runtime17 = require("react/jsx-runtime");
 var Selected = ({ isCurrent = false, isTrial = false }) => {
   const { t: t2 } = useTranslation();
   const theme = nt();
-  const text = (0, import_react25.useMemo)(() => {
+  const text = (0, import_react27.useMemo)(() => {
     if (isCurrent) {
       return isTrial ? t2("Trial in progress") : t2("Current plan");
     }
@@ -20325,15 +20382,9 @@ var PlanButtonGroup = ({
   const { t: t2 } = useTranslation();
   const { data } = useEmbed();
   const isCurrent = plan.id === data.company?.plan?.id;
-  if (plan.companyCanTrial) {
+  if (plan.companyCanTrial && plan.isTrialable) {
     return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Flex, { $flexDirection: "column", $gap: "1.5rem", children: [
-      data.subscription?.status !== "trialing" && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_jsx_runtime17.Fragment, { children: isSelected && willTrial ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-        Selected,
-        {
-          isCurrent,
-          isTrial: plan.companyCanTrial && willTrial
-        }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      data.subscription?.status !== "trialing" && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_jsx_runtime17.Fragment, { children: isSelected && willTrial ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Selected, { isCurrent, isTrial: willTrial }) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
         Button,
         {
           type: "button",
@@ -20349,6 +20400,7 @@ var PlanButtonGroup = ({
           $size: "sm",
           $color: "primary",
           $variant: "filled",
+          $fullWidth: true,
           children: plan.custom ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
             ButtonLink,
             {
@@ -20359,8 +20411,8 @@ var PlanButtonGroup = ({
           ) : !plan.valid ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
             Tooltip,
             {
-              trigger: t2("Over usage limit"),
-              content: t2("Current usage exceeds the limit of this plan.")
+              trigger: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Text, { children: t2("Over usage limit") }),
+              content: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Text, { children: t2("Current usage exceeds the limit of this plan.") })
             }
           ) : t2("Start X day trial", { days: plan.trialDays })
         }
@@ -20376,11 +20428,12 @@ var PlanButtonGroup = ({
           $size: "sm",
           $color: "primary",
           $variant: data.subscription?.status === "trialing" ? "filled" : "text",
+          $fullWidth: true,
           children: !plan.valid ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
             Tooltip,
             {
-              trigger: t2("Over usage limit"),
-              content: t2("Current usage exceeds the limit of this plan.")
+              trigger: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Text, { children: t2("Over usage limit") }),
+              content: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Text, { children: t2("Current usage exceeds the limit of this plan.") })
             }
           ) : t2("Choose plan")
         }
@@ -20400,6 +20453,7 @@ var PlanButtonGroup = ({
       $size: "sm",
       $color: "primary",
       $variant: "filled",
+      $fullWidth: true,
       children: plan.custom ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
         ButtonLink,
         {
@@ -20410,8 +20464,8 @@ var PlanButtonGroup = ({
       ) : !plan.valid ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
         Tooltip,
         {
-          trigger: t2("Over usage limit"),
-          content: t2("Current usage exceeds the limit of this plan.")
+          trigger: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Text, { children: t2("Over usage limit") }),
+          content: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Text, { children: t2("Current usage exceeds the limit of this plan.") })
         }
       ) : t2("Choose plan")
     }
@@ -20429,7 +20483,7 @@ var Plan = ({
   const theme = nt();
   const { data } = useEmbed();
   const isLightBackground = useIsLightBackground();
-  const [entitlementCounts, setEntitlementCounts] = (0, import_react25.useState)(
+  const [entitlementCounts, setEntitlementCounts] = (0, import_react27.useState)(
     () => plans.reduce(
       (acc, plan) => {
         acc[plan.id] = {
@@ -20990,16 +21044,16 @@ var CheckoutDialog = ({ top = 0 }) => {
   const { t: t2 } = useTranslation();
   const theme = nt();
   const { api, data, selected } = useEmbed();
-  const modalRef = (0, import_react26.useRef)(null);
-  const contentRef = (0, import_react26.useRef)(null);
-  const checkoutRef = (0, import_react26.useRef)(null);
-  const [charges, setCharges] = (0, import_react26.useState)();
-  const [paymentMethodId, setPaymentMethodId] = (0, import_react26.useState)(
+  const modalRef = (0, import_react28.useRef)(null);
+  const contentRef = (0, import_react28.useRef)(null);
+  const checkoutRef = (0, import_react28.useRef)(null);
+  const [charges, setCharges] = (0, import_react28.useState)();
+  const [paymentMethodId, setPaymentMethodId] = (0, import_react28.useState)(
     (data.subscription?.paymentMethod || data.company?.defaultPaymentMethod)?.externalId
   );
-  const [isLoading, setIsLoading] = (0, import_react26.useState)(false);
-  const [error, setError] = (0, import_react26.useState)();
-  const [planPeriod, setPlanPeriod] = (0, import_react26.useState)(
+  const [isLoading, setIsLoading] = (0, import_react28.useState)(false);
+  const [error, setError] = (0, import_react28.useState)();
+  const [planPeriod, setPlanPeriod] = (0, import_react28.useState)(
     selected.period || data.company?.plan?.planPeriod || "month"
   );
   const {
@@ -21007,15 +21061,13 @@ var CheckoutDialog = ({ top = 0 }) => {
     addOns: availableAddOns,
     periods: availablePeriods
   } = useAvailablePlans(planPeriod);
-  const [selectedPlan, setSelectedPlan] = (0, import_react26.useState)(
+  const [selectedPlan, setSelectedPlan] = (0, import_react28.useState)(
     () => availablePlans.find(
       (plan) => selected.planId ? plan.id === selected.planId : plan.current
     )
   );
-  const [willTrial, setWillTrial] = (0, import_react26.useState)(
-    data.subscription?.status !== "trialing" && !data.trialPaymentMethodRequired
-  );
-  const [addOns, setAddOns] = (0, import_react26.useState)(
+  const [willTrial, setWillTrial] = (0, import_react28.useState)(false);
+  const [addOns, setAddOns] = (0, import_react28.useState)(
     () => availableAddOns.map((addOn) => ({
       ...addOn,
       isSelected: typeof selected.addOnId !== "undefined" ? addOn.id === selected.addOnId : (data.company?.addOns || []).some(
@@ -21024,10 +21076,10 @@ var CheckoutDialog = ({ top = 0 }) => {
     }))
   );
   const hasActiveAddOns = addOns.some((addOn) => addOn.isSelected);
-  const currentEntitlements = (0, import_react26.useMemo)(() => {
+  const currentEntitlements = (0, import_react28.useMemo)(() => {
     return data.featureUsage?.features || [];
   }, [data.featureUsage?.features]);
-  const [usageBasedEntitlements, setUsageBasedEntitlements] = (0, import_react26.useState)(
+  const [usageBasedEntitlements, setUsageBasedEntitlements] = (0, import_react28.useState)(
     () => (selectedPlan?.entitlements || []).reduce(
       createActiveUsageBasedEntitlementsReducer(
         currentEntitlements,
@@ -21036,7 +21088,7 @@ var CheckoutDialog = ({ top = 0 }) => {
       []
     )
   );
-  const payInAdvanceEntitlements = (0, import_react26.useMemo)(
+  const payInAdvanceEntitlements = (0, import_react28.useMemo)(
     () => usageBasedEntitlements.filter(
       (entitlement) => entitlement.priceBehavior === "pay_in_advance"
     ),
@@ -21045,12 +21097,12 @@ var CheckoutDialog = ({ top = 0 }) => {
   const hasActivePayInAdvanceEntitlements = payInAdvanceEntitlements.some(
     ({ quantity }) => quantity > 0
   );
-  const [promoCode, setPromoCode] = (0, import_react26.useState)();
+  const [promoCode, setPromoCode] = (0, import_react28.useState)();
   const isTrialable = selectedPlan?.isTrialable === true && selectedPlan?.companyCanTrial === true;
   const isTrialableAndFree = isTrialable && data.trialPaymentMethodRequired !== true;
   const planRequiresPayment = !isTrialableAndFree || !isTrialable && selectedPlan?.isFree !== true;
   const requiresPayment = planRequiresPayment || hasActiveAddOns || hasActivePayInAdvanceEntitlements;
-  const checkoutStages = (0, import_react26.useMemo)(() => {
+  const checkoutStages = (0, import_react28.useMemo)(() => {
     const stages = [
       {
         id: "plan",
@@ -21091,7 +21143,7 @@ var CheckoutDialog = ({ top = 0 }) => {
     availableAddOns,
     requiresPayment
   ]);
-  const [checkoutStage, setCheckoutStage] = (0, import_react26.useState)(() => {
+  const [checkoutStage, setCheckoutStage] = (0, import_react28.useState)(() => {
     if (selected.addOnId) {
       return "addons";
     }
@@ -21104,7 +21156,7 @@ var CheckoutDialog = ({ top = 0 }) => {
     return "plan";
   });
   const isLightBackground = useIsLightBackground();
-  const previewCheckout = (0, import_react26.useCallback)(
+  const previewCheckout = (0, import_react28.useCallback)(
     async (updates) => {
       const period = updates.period || planPeriod;
       const plan = updates.plan || selectedPlan;
@@ -21178,7 +21230,7 @@ var CheckoutDialog = ({ top = 0 }) => {
       promoCode
     ]
   );
-  const selectPlan = (0, import_react26.useCallback)(
+  const selectPlan = (0, import_react28.useCallback)(
     (updates) => {
       const plan = updates.plan || selectedPlan;
       if (!plan) {
@@ -21211,7 +21263,7 @@ var CheckoutDialog = ({ top = 0 }) => {
       previewCheckout
     ]
   );
-  const changePlanPeriod = (0, import_react26.useCallback)(
+  const changePlanPeriod = (0, import_react28.useCallback)(
     (period) => {
       setPlanPeriod(period);
       previewCheckout({ period });
@@ -21228,7 +21280,7 @@ var CheckoutDialog = ({ top = 0 }) => {
       return updated;
     });
   };
-  const updateUsageBasedEntitlementQuantity = (0, import_react26.useCallback)(
+  const updateUsageBasedEntitlementQuantity = (0, import_react28.useCallback)(
     (id, updatedQuantity) => {
       setUsageBasedEntitlements((prev2) => {
         const updated = prev2.map(
@@ -21251,7 +21303,7 @@ var CheckoutDialog = ({ top = 0 }) => {
     setPromoCode(code);
     previewCheckout({ promoCode: code });
   };
-  (0, import_react26.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     if (charges) {
       checkoutRef.current?.scrollIntoView({
         behavior: "smooth",
@@ -21259,7 +21311,7 @@ var CheckoutDialog = ({ top = 0 }) => {
       });
     }
   }, [charges]);
-  (0, import_react26.useLayoutEffect)(() => {
+  (0, import_react28.useLayoutEffect)(() => {
     if (contentRef.current) {
       contentRef.current.scrollTo({
         top: 0,
@@ -21494,7 +21546,7 @@ var PaymentDialog = ({ top = 0 }) => {
 
 // src/components/shared/payment-form/PaymentForm.tsx
 var import_react_stripe_js = require("@stripe/react-stripe-js");
-var import_react27 = require("react");
+var import_react29 = require("react");
 var import_jsx_runtime21 = require("react/jsx-runtime");
 var PaymentForm = ({ onConfirm }) => {
   const { t: t2 } = useTranslation();
@@ -21502,10 +21554,10 @@ var PaymentForm = ({ onConfirm }) => {
   const stripe = (0, import_react_stripe_js.useStripe)();
   const elements = (0, import_react_stripe_js.useElements)();
   const { api } = useEmbed();
-  const [message, setMessage] = (0, import_react27.useState)(null);
-  const [isLoading, setIsLoading] = (0, import_react27.useState)(false);
-  const [isConfirmed, setIsConfirmed] = (0, import_react27.useState)(false);
-  const [isComplete, setIsComplete] = (0, import_react27.useState)(false);
+  const [message, setMessage] = (0, import_react29.useState)(null);
+  const [isLoading, setIsLoading] = (0, import_react29.useState)(false);
+  const [isConfirmed, setIsConfirmed] = (0, import_react29.useState)(false);
+  const [isComplete, setIsComplete] = (0, import_react29.useState)(false);
   const handleSubmit = async (event) => {
     event.preventDefault();
     if (!api || !stripe || !elements) {
@@ -21565,6 +21617,7 @@ var PaymentForm = ({ onConfirm }) => {
             style: { flexShrink: 0 },
             $color: "primary",
             $isLoading: isLoading,
+            $fullWidth: true,
             children: isLoading ? t2("Loading") : t2("Save payment method")
           }
         ),
@@ -21585,7 +21638,7 @@ var PaymentForm = ({ onConfirm }) => {
 };
 
 // src/components/shared/period-toggle/PeriodToggle.tsx
-var import_react28 = require("react");
+var import_react30 = require("react");
 var import_jsx_runtime22 = require("react/jsx-runtime");
 var PeriodToggle = ({
   options: options2,
@@ -21597,8 +21650,8 @@ var PeriodToggle = ({
   const { t: t2 } = useTranslation();
   const theme = nt();
   const isLightBackground = useIsLightBackground();
-  const [tooltipZIndex, setTooltipZIndex] = (0, import_react28.useState)(1);
-  const savingsPercentage = (0, import_react28.useMemo)(() => {
+  const [tooltipZIndex, setTooltipZIndex] = (0, import_react30.useState)(1);
+  const savingsPercentage = (0, import_react30.useMemo)(() => {
     if (selectedPlan) {
       const monthlyBillingPrice = getBillingPrice(selectedPlan?.monthlyPrice);
       const yearlyBillingPrice = getBillingPrice(selectedPlan?.yearlyPrice);
@@ -21608,7 +21661,7 @@ var PeriodToggle = ({
     }
     return 0;
   }, [selectedPlan]);
-  (0, import_react28.useLayoutEffect)(() => {
+  (0, import_react30.useLayoutEffect)(() => {
     const element = layerRef?.current;
     if (element) {
       const style = getComputedStyle(element);
@@ -21698,21 +21751,21 @@ var PeriodToggle = ({
 };
 
 // src/components/shared/unsubscribe-dialog/UnsubscribeDialog.tsx
-var import_react29 = require("react");
+var import_react31 = require("react");
 var import_jsx_runtime23 = require("react/jsx-runtime");
 var UnsubscribeDialog = ({ top = 0 }) => {
   const { t: t2 } = useTranslation();
   const theme = nt();
   const { data, setLayout, setSelected } = useEmbed();
-  const contentRef = (0, import_react29.useRef)(null);
-  const [error, setError] = (0, import_react29.useState)();
-  const [isLoading, setIsLoading] = (0, import_react29.useState)(false);
-  const planPeriod = (0, import_react29.useMemo)(
+  const contentRef = (0, import_react31.useRef)(null);
+  const [error, setError] = (0, import_react31.useState)();
+  const [isLoading, setIsLoading] = (0, import_react31.useState)(false);
+  const planPeriod = (0, import_react31.useMemo)(
     () => data.company?.plan?.planPeriod ?? "month",
     [data.company?.plan?.planPeriod]
   );
   const { plans: availablePlans, addOns: availableAddOns } = useAvailablePlans(planPeriod);
-  const selectedPlan = (0, import_react29.useMemo)(
+  const selectedPlan = (0, import_react31.useMemo)(
     () => availablePlans.find(
       (plan) => plan.id === data.company?.plan?.id && data.company?.plan.planPeriod === planPeriod
     ),
@@ -21723,7 +21776,7 @@ var UnsubscribeDialog = ({ top = 0 }) => {
     createActiveUsageBasedEntitlementsReducer(currentEntitlements, planPeriod),
     []
   );
-  const addOns = (0, import_react29.useMemo)(
+  const addOns = (0, import_react31.useMemo)(
     () => availableAddOns.map((available) => ({
       ...available,
       isSelected: data.company?.addOns.some((current) => available.id === current.id) ?? false
@@ -21734,7 +21787,7 @@ var UnsubscribeDialog = ({ top = 0 }) => {
     data.subscription?.cancelAt || data.upcomingInvoice?.dueDate || Date.now()
   );
   const isLightBackground = useIsLightBackground();
-  const handleClose = (0, import_react29.useCallback)(() => {
+  const handleClose = (0, import_react31.useCallback)(() => {
     setLayout("portal");
   }, [setLayout]);
   return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
@@ -21847,7 +21900,6 @@ var UnsubscribeDialog = ({ top = 0 }) => {
                           $size: "sm",
                           $color: "secondary",
                           $variant: "ghost",
-                          $fullWidth: false,
                           children: t2("Manage plan")
                         }
                       )
@@ -22062,12 +22114,12 @@ var StyledViewport = dt.div.withConfig({
 
 // src/components/layout/viewport/Viewport.tsx
 var import_jsx_runtime26 = require("react/jsx-runtime");
-var Viewport = (0, import_react30.forwardRef)(
+var Viewport = (0, import_react32.forwardRef)(
   ({ children, portal, ...props }, ref) => {
     const { data, layout, settings } = useEmbed();
-    const [top, setTop] = (0, import_react30.useState)(0);
+    const [top, setTop] = (0, import_react32.useState)(0);
     const canCheckout = data.capabilities?.checkout ?? true;
-    (0, import_react30.useLayoutEffect)(() => {
+    (0, import_react32.useLayoutEffect)(() => {
       const parent = portal || document.body;
       const setModalY = (0, import_lodash3.debounce)(() => {
         const value = Math.abs(
@@ -22114,7 +22166,7 @@ var resolveDesignProps = (props) => {
     }
   };
 };
-var ButtonElement = (0, import_react31.forwardRef)(({ children, className, ...rest }, ref) => {
+var ButtonElement = (0, import_react33.forwardRef)(({ children, className, ...rest }, ref) => {
   const props = resolveDesignProps(rest);
   const buttonStyles = {
     primary: {
@@ -22159,10 +22211,10 @@ var ButtonElement = (0, import_react31.forwardRef)(({ children, className, ...re
 ButtonElement.displayName = "Button";
 
 // src/components/elements/included-features/IncludedFeatures.tsx
-var import_react33 = require("react");
+var import_react35 = require("react");
 
 // src/components/elements/included-features/Details.tsx
-var import_react32 = require("react");
+var import_react34 = require("react");
 var import_jsx_runtime28 = require("react/jsx-runtime");
 var Details = ({
   shouldWrapChildren,
@@ -22187,7 +22239,7 @@ var Details = ({
     priceTier,
     currency,
     packageSize = 1
-  } = (0, import_react32.useMemo)(() => {
+  } = (0, import_react34.useMemo)(() => {
     const {
       price: entitlementPrice,
       priceDecimal: entitlementPriceDecimal,
@@ -22209,7 +22261,7 @@ var Details = ({
     monthlyUsageBasedPrice,
     yearlyUsageBasedPrice
   ]);
-  const text = (0, import_react32.useMemo)(() => {
+  const text = (0, import_react34.useMemo)(() => {
     if (!feature) {
       return;
     }
@@ -22260,7 +22312,7 @@ var Details = ({
     packageSize,
     softLimit
   ]);
-  const usageText = (0, import_react32.useMemo)(() => {
+  const usageText = (0, import_react34.useMemo)(() => {
     if (!feature) {
       return;
     }
@@ -22268,7 +22320,7 @@ var Details = ({
     let index = 0;
     if (priceBehavior === "pay_in_advance" && typeof data.company?.plan?.planPeriod === "string" && typeof price === "number") {
       acc.push(
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_react32.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_react34.Fragment, { children: [
           formatCurrency(price, currency),
           "/",
           packageSize > 1 && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
@@ -22283,7 +22335,7 @@ var Details = ({
       index += 1;
     } else if ((priceBehavior === "pay_as_you_go" || priceBehavior === "overage") && typeof usage === "number") {
       acc.push(
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_react32.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_react34.Fragment, { children: [
           usage,
           " ",
           getFeatureName(feature, usage),
@@ -22296,7 +22348,7 @@ var Details = ({
     if (acc) {
       if (priceBehavior === "pay_in_advance" && typeof price === "number" && typeof allocation === "number") {
         acc.push(
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_react32.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_react34.Fragment, { children: [
             " ",
             "\u2022 ",
             formatCurrency(price * allocation, currency)
@@ -22305,7 +22357,7 @@ var Details = ({
         index += 1;
       } else if (priceBehavior === "pay_as_you_go" && typeof price === "number" && typeof usage === "number") {
         acc.push(
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_react32.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_react34.Fragment, { children: [
             " ",
             "\u2022 ",
             formatCurrency(price * usage, currency)
@@ -22326,7 +22378,7 @@ var Details = ({
         const period = feature.featureType === "trait" && typeof data.company?.plan?.planPeriod === "string" ? `/${shortenPeriod(data.company.plan.planPeriod)}` : "";
         if (cost > 0) {
           acc.push(
-            /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_react32.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_react34.Fragment, { children: [
               " ",
               "\u2022 ",
               formatCurrency(cost),
@@ -22428,16 +22480,16 @@ function resolveDesignProps2(props) {
     visibleFeatures: props.visibleFeatures
   };
 }
-var IncludedFeatures = (0, import_react33.forwardRef)(({ className, ...rest }, ref) => {
+var IncludedFeatures = (0, import_react35.forwardRef)(({ className, ...rest }, ref) => {
   const props = resolveDesignProps2(rest);
   const { t: t2 } = useTranslation();
   const theme = nt();
   const { data } = useEmbed();
-  const elements = (0, import_react33.useRef)([]);
+  const elements = (0, import_react35.useRef)([]);
   const shouldWrapChildren = useWrapChildren(elements.current);
   const isLightBackground = useIsLightBackground();
-  const [showCount, setShowCount] = (0, import_react33.useState)(VISIBLE_ENTITLEMENT_COUNT);
-  const featureUsage = (0, import_react33.useMemo)(() => {
+  const [showCount, setShowCount] = (0, import_react35.useState)(VISIBLE_ENTITLEMENT_COUNT);
+  const featureUsage = (0, import_react35.useMemo)(() => {
     const orderedFeatureUsage = props.visibleFeatures?.reduce(
       (acc, id) => {
         const mappedFeatureUsage = data.featureUsage?.features.find(
@@ -22595,7 +22647,7 @@ var IncludedFeatures = (0, import_react33.forwardRef)(({ className, ...rest }, r
 IncludedFeatures.displayName = "IncludedFeatures";
 
 // src/components/elements/invoices/Invoices.tsx
-var import_react34 = require("react");
+var import_react36 = require("react");
 var import_jsx_runtime30 = require("react/jsx-runtime");
 function resolveDesignProps3(props) {
   return {
@@ -22647,24 +22699,24 @@ var InvoiceDate = ({ date, fontStyle, url }) => {
   }
   return dateText;
 };
-var Invoices = (0, import_react34.forwardRef)(({ className, data, ...rest }, ref) => {
+var Invoices = (0, import_react36.forwardRef)(({ className, data, ...rest }, ref) => {
   const props = resolveDesignProps3(rest);
   const { t: t2 } = useTranslation();
   const theme = nt();
   const { api } = useEmbed();
-  const [invoices, setInvoices] = (0, import_react34.useState)(() => formatInvoices(data));
-  const [listSize, setListSize] = (0, import_react34.useState)(props.limit.number);
+  const [invoices, setInvoices] = (0, import_react36.useState)(() => formatInvoices(data));
+  const [listSize, setListSize] = (0, import_react36.useState)(props.limit.number);
   const toggleListSize = () => {
     setListSize(
       (prev2) => prev2 !== props.limit.number ? props.limit.number : MAX_VISIBLE_INVOICE_COUNT
     );
   };
-  (0, import_react34.useEffect)(() => {
+  (0, import_react36.useEffect)(() => {
     api?.listInvoices().then((response) => {
       setInvoices(formatInvoices(response.data));
     });
   }, [api]);
-  (0, import_react34.useEffect)(() => {
+  (0, import_react36.useEffect)(() => {
     setInvoices(formatInvoices(data));
   }, [data]);
   return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Element, { ref, className, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Flex, { $flexDirection: "column", $gap: "1rem", children: [
@@ -22727,7 +22779,7 @@ var Invoices = (0, import_react34.forwardRef)(({ className, data, ...rest }, ref
 Invoices.displayName = "Invoices";
 
 // src/components/elements/metered-features/MeteredFeatures.tsx
-var import_react35 = require("react");
+var import_react37 = require("react");
 
 // src/components/elements/metered-features/styles.ts
 var Container3 = dt.div`
@@ -22773,15 +22825,15 @@ function resolveDesignProps4(props) {
     visibleFeatures: props.visibleFeatures
   };
 }
-var MeteredFeatures = (0, import_react35.forwardRef)(({ className, ...rest }, ref) => {
+var MeteredFeatures = (0, import_react37.forwardRef)(({ className, ...rest }, ref) => {
   const props = resolveDesignProps4(rest);
-  const elements = (0, import_react35.useRef)([]);
+  const elements = (0, import_react37.useRef)([]);
   const shouldWrapChildren = useWrapChildren(elements.current);
   const { t: t2 } = useTranslation();
   const theme = nt();
   const { data, setLayout, setSelected } = useEmbed();
   const isLightBackground = useIsLightBackground();
-  const featureUsage = (0, import_react35.useMemo)(() => {
+  const featureUsage = (0, import_react37.useMemo)(() => {
     const orderedFeatureUsage = props.visibleFeatures?.reduce(
       (acc, id) => {
         const mappedFeatureUsage = data.featureUsage?.features.find(
@@ -22967,7 +23019,7 @@ var MeteredFeatures = (0, import_react35.forwardRef)(({ className, ...rest }, re
                   }
                 ),
                 props.isVisible && typeof usage === "number" && priceBehavior !== "pay_as_you_go" && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(Flex, { $flexWrap: "wrap", $justifyContent: "end", $gap: "2rem", children: [
-                  typeof allocation === "number" ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                  typeof allocation === "number" && progressBar ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
                     Tooltip,
                     {
                       trigger: progressBar,
@@ -22995,7 +23047,6 @@ var MeteredFeatures = (0, import_react35.forwardRef)(({ className, ...rest }, re
                         setSelected({ usage: true });
                         setLayout("checkout");
                       },
-                      $fullWidth: false,
                       style: { whiteSpace: "nowrap" },
                       children: t2("Add More")
                     }
@@ -23078,10 +23129,10 @@ var MeteredFeatures = (0, import_react35.forwardRef)(({ className, ...rest }, re
 MeteredFeatures.displayName = "MeteredFeatures";
 
 // src/components/elements/payment-method/PaymentMethod.tsx
-var import_react37 = require("react");
+var import_react39 = require("react");
 
 // src/components/elements/payment-method/PaymentMethodElement.tsx
-var import_react36 = require("react");
+var import_react38 = require("react");
 var import_jsx_runtime32 = require("react/jsx-runtime");
 var PaymentElement2 = ({
   iconName,
@@ -23256,7 +23307,7 @@ var PaymentListElement = ({
   const isLightBackground = useIsLightBackground();
   const { iconName, iconTitle, label, paymentLast4 } = getPaymentMethodData(paymentMethod);
   const iconStyles = getIconStyles({ size: "lg", theme });
-  const expirationDate = (0, import_react36.useMemo)(() => {
+  const expirationDate = (0, import_react38.useMemo)(() => {
     const { cardExpMonth, cardExpYear } = paymentMethod;
     if (!cardExpMonth && !cardExpYear) {
       return "";
@@ -23368,13 +23419,13 @@ var resolveDesignProps5 = (props) => {
     }
   };
 };
-var PaymentMethod = (0, import_react37.forwardRef)(({ children, className, portal, allowEdit = true, ...rest }, ref) => {
+var PaymentMethod = (0, import_react39.forwardRef)(({ children, className, portal, allowEdit = true, ...rest }, ref) => {
   const props = resolveDesignProps5(rest);
   const { data, setLayout } = useEmbed();
-  const paymentMethod = (0, import_react37.useMemo)(() => {
+  const paymentMethod = (0, import_react39.useMemo)(() => {
     return data.subscription?.paymentMethod || data.company?.defaultPaymentMethod;
   }, [data.company?.defaultPaymentMethod, data.subscription?.paymentMethod]);
-  const monthsToExpiration = (0, import_react37.useMemo)(() => {
+  const monthsToExpiration = (0, import_react39.useMemo)(() => {
     let expiration;
     if (typeof paymentMethod?.cardExpYear === "number" && typeof paymentMethod?.cardExpMonth === "number") {
       const today = /* @__PURE__ */ new Date();
@@ -23555,7 +23606,7 @@ var loadStripe = function loadStripe2() {
 };
 
 // src/components/elements/payment-method/PaymentMethodDetails.tsx
-var import_react38 = require("react");
+var import_react40 = require("react");
 var import_jsx_runtime34 = require("react/jsx-runtime");
 var resolveDesignProps6 = () => {
   return {
@@ -23577,14 +23628,14 @@ var PaymentMethodDetails = ({
   const theme = nt();
   const { api, data, setData } = useEmbed();
   const isLightBackground = useIsLightBackground();
-  const [isLoading, setIsLoading] = (0, import_react38.useState)(false);
-  const [error, setError] = (0, import_react38.useState)();
-  const [showPaymentForm, setShowPaymentForm] = (0, import_react38.useState)(false);
-  const [stripe, setStripe] = (0, import_react38.useState)(null);
-  const [setupIntent, setSetupIntent] = (0, import_react38.useState)();
-  const [showDifferentPaymentMethods, setShowDifferentPaymentMethods] = (0, import_react38.useState)(false);
-  const [paymentMethod, setPaymentMethod] = (0, import_react38.useState)(data.subscription?.paymentMethod || data.company?.defaultPaymentMethod);
-  const monthsToExpiration = (0, import_react38.useMemo)(() => {
+  const [isLoading, setIsLoading] = (0, import_react40.useState)(false);
+  const [error, setError] = (0, import_react40.useState)();
+  const [showPaymentForm, setShowPaymentForm] = (0, import_react40.useState)(false);
+  const [stripe, setStripe] = (0, import_react40.useState)(null);
+  const [setupIntent, setSetupIntent] = (0, import_react40.useState)();
+  const [showDifferentPaymentMethods, setShowDifferentPaymentMethods] = (0, import_react40.useState)(false);
+  const [paymentMethod, setPaymentMethod] = (0, import_react40.useState)(data.subscription?.paymentMethod || data.company?.defaultPaymentMethod);
+  const monthsToExpiration = (0, import_react40.useMemo)(() => {
     let expiration;
     if (typeof paymentMethod?.cardExpYear === "number" && typeof paymentMethod?.cardExpMonth === "number") {
       const today = /* @__PURE__ */ new Date();
@@ -23597,7 +23648,7 @@ var PaymentMethodDetails = ({
     }
     return expiration;
   }, [paymentMethod?.cardExpYear, paymentMethod?.cardExpMonth]);
-  const createSetupIntent = (0, import_react38.useCallback)(async () => {
+  const createSetupIntent = (0, import_react40.useCallback)(async () => {
     if (!api || !data.component?.id) {
       return;
     }
@@ -23616,7 +23667,7 @@ var PaymentMethodDetails = ({
       setIsLoading(false);
     }
   }, [t2, api, data.component?.id]);
-  const updatePaymentMethod = (0, import_react38.useCallback)(
+  const updatePaymentMethod = (0, import_react40.useCallback)(
     async (externalId) => {
       if (!api || !externalId) {
         return;
@@ -23665,7 +23716,7 @@ var PaymentMethodDetails = ({
     },
     [api, data, setData, setPaymentMethodId, t2]
   );
-  const deletePaymentMethod = (0, import_react38.useCallback)(
+  const deletePaymentMethod = (0, import_react40.useCallback)(
     async (id) => {
       if (!api || !id) {
         return;
@@ -23692,12 +23743,12 @@ var PaymentMethodDetails = ({
     },
     [api, data, setData, t2]
   );
-  (0, import_react38.useEffect)(() => {
+  (0, import_react40.useEffect)(() => {
     if (!stripe && setupIntent?.publishableKey) {
       setStripe(loadStripe(setupIntent.publishableKey));
     }
   }, [stripe, setupIntent?.publishableKey]);
-  (0, import_react38.useEffect)(() => {
+  (0, import_react40.useEffect)(() => {
     if (!setupIntent && (!paymentMethod || showPaymentForm)) {
       createSetupIntent();
     }
@@ -23834,7 +23885,7 @@ var PaymentMethodDetails = ({
                 },
                 paymentMethod2.id
               )) }),
-              (!setupIntent || !paymentMethod || showDifferentPaymentMethods) && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Button, { onClick: createSetupIntent, $size: "lg", children: t2("Add new payment method") })
+              (!setupIntent || !paymentMethod || showDifferentPaymentMethods) && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Button, { onClick: createSetupIntent, $size: "lg", $fullWidth: true, children: t2("Add new payment method") })
             ] })
           ] }),
           !isLoading && error && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
@@ -23854,7 +23905,7 @@ var PaymentMethodDetails = ({
 };
 
 // src/components/elements/plan-manager/PlanManager.tsx
-var import_react39 = require("react");
+var import_react41 = require("react");
 var import_jsx_runtime35 = require("react/jsx-runtime");
 var resolveDesignProps7 = (props) => {
   return {
@@ -23884,7 +23935,7 @@ var resolveDesignProps7 = (props) => {
     }
   };
 };
-var PlanManager = (0, import_react39.forwardRef)(({ children, className, portal, ...rest }, ref) => {
+var PlanManager = (0, import_react41.forwardRef)(({ children, className, portal, ...rest }, ref) => {
   const props = resolveDesignProps7(rest);
   const theme = nt();
   const { t: t2 } = useTranslation();
@@ -23910,7 +23961,7 @@ var PlanManager = (0, import_react39.forwardRef)(({ children, className, portal,
     []
   );
   const billingSubscription = data.company?.billingSubscription;
-  const trialEndDays = (0, import_react39.useMemo)(() => {
+  const trialEndDays = (0, import_react41.useMemo)(() => {
     const trialEnd = billingSubscription?.trialEnd;
     const trialEndDate = trialEnd ? new Date(trialEnd * 1e3) : /* @__PURE__ */ new Date();
     const todayDate = /* @__PURE__ */ new Date();
@@ -24182,6 +24233,7 @@ var PlanManager = (0, import_react39.forwardRef)(({ children, className, portal,
               },
               $size: props.callToAction.buttonSize,
               $color: props.callToAction.buttonStyle,
+              $fullWidth: true,
               children: t2("Change plan")
             }
           )
@@ -24193,7 +24245,7 @@ var PlanManager = (0, import_react39.forwardRef)(({ children, className, portal,
 PlanManager.displayName = "PlanManager";
 
 // src/components/elements/pricing-table/PricingTable.tsx
-var import_react40 = require("react");
+var import_react42 = require("react");
 var import_jsx_runtime36 = require("react/jsx-runtime");
 var resolveDesignProps8 = (props) => {
   return {
@@ -24234,18 +24286,18 @@ var resolveDesignProps8 = (props) => {
     }
   };
 };
-var PricingTable = (0, import_react40.forwardRef)(({ children, className, ...rest }, ref) => {
+var PricingTable = (0, import_react42.forwardRef)(({ children, className, ...rest }, ref) => {
   const props = resolveDesignProps8(rest);
   const { t: t2 } = useTranslation();
   const theme = nt();
   const { data, setLayout, setSelected } = useEmbed();
   const trialEndDays = useTrialEnd();
-  const [selectedPeriod, setSelectedPeriod] = (0, import_react40.useState)(
+  const [selectedPeriod, setSelectedPeriod] = (0, import_react42.useState)(
     () => data.company?.plan?.planPeriod || "month"
   );
   const { plans, addOns, periods } = useAvailablePlans(selectedPeriod);
   const isLightBackground = useIsLightBackground();
-  const [entitlementCounts, setEntitlementCounts] = (0, import_react40.useState)(
+  const [entitlementCounts, setEntitlementCounts] = (0, import_react42.useState)(
     () => plans.reduce(
       (acc, plan) => {
         acc[plan.id] = {
@@ -24699,6 +24751,7 @@ var PricingTable = (0, import_react40.forwardRef)(({ children, className, ...res
                                   $color: props.downgrade.buttonStyle,
                                   $variant: "outline"
                                 },
+                                $fullWidth: true,
                                 children: plan.custom ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
                                   ButtonLink,
                                   {
@@ -24709,12 +24762,12 @@ var PricingTable = (0, import_react40.forwardRef)(({ children, className, ...res
                                 ) : !plan.valid ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
                                   Tooltip,
                                   {
-                                    trigger: t2("Over usage limit"),
-                                    content: t2(
+                                    trigger: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Text, { children: t2("Over usage limit") }),
+                                    content: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Text, { children: t2(
                                       "Current usage exceeds the limit of this plan."
-                                    )
+                                    ) })
                                   }
-                                ) : plan.companyCanTrial ? t2("Start X day trial", { days: plan.trialDays }) : t2("Choose plan")
+                                ) : plan.companyCanTrial && plan.isTrialable ? t2("Start X day trial", { days: plan.trialDays }) : t2("Choose plan")
                               }
                             )
                           ]
@@ -24936,6 +24989,7 @@ var PricingTable = (0, import_react40.forwardRef)(({ children, className, ...res
                                 $size: props.upgrade.buttonSize,
                                 $color: isActiveAddOn ? "danger" : props.upgrade.buttonStyle,
                                 $variant: isActiveAddOn ? "ghost" : addOn.current ? "outline" : "filled",
+                                $fullWidth: true,
                                 children: isActiveAddOn ? t2("Remove add-on") : addOn.current ? t2("Change add-on") : t2("Choose add-on")
                               }
                             )
@@ -24957,7 +25011,7 @@ var PricingTable = (0, import_react40.forwardRef)(({ children, className, ...res
 PricingTable.displayName = "PricingTable";
 
 // src/components/elements/text/Text.tsx
-var import_react41 = require("react");
+var import_react43 = require("react");
 var import_jsx_runtime37 = require("react/jsx-runtime");
 var resolveDesignProps9 = (props) => {
   return {
@@ -24968,7 +25022,7 @@ var resolveDesignProps9 = (props) => {
     }
   };
 };
-var TextElement = (0, import_react41.forwardRef)(({ children, className, ...rest }, ref) => {
+var TextElement = (0, import_react43.forwardRef)(({ children, className, ...rest }, ref) => {
   const props = resolveDesignProps9(rest);
   const theme = nt();
   return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Element, { as: Flex, ref, className, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
@@ -24987,7 +25041,7 @@ var TextElement = (0, import_react41.forwardRef)(({ children, className, ...rest
 TextElement.displayName = "Text";
 
 // src/components/elements/unsubscribe-button/UnsubscribeButton.tsx
-var import_react42 = require("react");
+var import_react44 = require("react");
 var import_jsx_runtime38 = require("react/jsx-runtime");
 var resolveDesignProps10 = (props) => {
   return {
@@ -25000,7 +25054,7 @@ var resolveDesignProps10 = (props) => {
     }
   };
 };
-var UnsubscribeButton = (0, import_react42.forwardRef)(({ children, className, ...rest }, ref) => {
+var UnsubscribeButton = (0, import_react44.forwardRef)(({ children, className, ...rest }, ref) => {
   const props = resolveDesignProps10(rest);
   const { t: t2 } = useTranslation();
   const { data, setLayout } = useEmbed();
@@ -25048,7 +25102,21 @@ var UnsubscribeButton = (0, import_react42.forwardRef)(({ children, className, .
 UnsubscribeButton.displayName = "UnsubscribeButton";
 
 // src/components/elements/upcoming-bill/UpcomingBill.tsx
-var import_react43 = require("react");
+var import_react45 = require("react");
+
+// src/components/elements/upcoming-bill/styles.ts
+var Container4 = dt.div`
+  height: auto;
+  opacity: 1;
+  transition: 0.1s;
+
+  @starting-style {
+    height: 0;
+    opacity: 0;
+  }
+`;
+
+// src/components/elements/upcoming-bill/UpcomingBill.tsx
 var import_jsx_runtime39 = require("react/jsx-runtime");
 function resolveDesignProps11(props) {
   return {
@@ -25068,139 +25136,179 @@ function resolveDesignProps11(props) {
     }
   };
 }
-var UpcomingBill = (0, import_react43.forwardRef)(({ className, ...rest }, ref) => {
+var UpcomingBill = (0, import_react45.forwardRef)(({ className, ...rest }, ref) => {
   const props = resolveDesignProps11(rest);
   const { t: t2 } = useTranslation();
   const theme = nt();
-  const { data } = useEmbed();
+  const { api, data } = useEmbed();
   const isLightBackground = useIsLightBackground();
-  const { discounts, upcomingInvoice } = (0, import_react43.useMemo)(() => {
-    const discounts2 = (data.subscription?.discounts || []).map((discount) => ({
-      amountOff: discount.amountOff,
+  const [isLoading, setIsLoading] = (0, import_react45.useState)(false);
+  const [error, setError] = (0, import_react45.useState)();
+  const [upcomingInvoice, setUpcomingInvoice] = (0, import_react45.useState)();
+  const discounts = (0, import_react45.useMemo)(() => {
+    return (data.subscription?.discounts || []).map((discount) => ({
       couponId: discount.couponId,
-      customerFacingCode: discount.customerFacingCode,
-      isActive: discount.isActive,
-      percentOff: discount.percentOff
+      customerFacingCode: discount.customerFacingCode || void 0,
+      currency: discount.currency || void 0,
+      amountOff: discount.amountOff ?? void 0,
+      percentOff: discount.percentOff ?? void 0,
+      isActive: discount.isActive
     }));
-    return {
-      discounts: discounts2,
-      upcomingInvoice: data.upcomingInvoice
-    };
-  }, [data.subscription, data.upcomingInvoice]);
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-    Element,
-    {
-      as: Flex,
-      ref,
-      className,
-      $flexDirection: "column",
-      $gap: "1rem",
-      children: upcomingInvoice ? /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
-        props.header.isVisible && upcomingInvoice.dueDate && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Flex, { $justifyContent: "space-between", $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
-          Text,
-          {
-            $font: theme.typography[props.header.fontStyle].fontFamily,
-            $size: theme.typography[props.header.fontStyle].fontSize,
-            $weight: theme.typography[props.header.fontStyle].fontWeight,
-            $color: theme.typography[props.header.fontStyle].color,
-            children: [
-              props.header.prefix,
-              " ",
-              toPrettyDate(upcomingInvoice.dueDate)
-            ]
-          }
-        ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(Flex, { $justifyContent: "space-between", $alignItems: "start", $gap: "1rem", children: [
-          props.price.isVisible && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Flex, { $alignItems: "end", $flexGrow: "1", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-            Text,
-            {
-              $font: theme.typography[props.price.fontStyle].fontFamily,
-              $size: theme.typography[props.price.fontStyle].fontSize,
-              $weight: theme.typography[props.price.fontStyle].fontWeight,
-              $color: theme.typography[props.price.fontStyle].color,
-              $leading: 1,
-              children: formatCurrency(
-                upcomingInvoice.amountDue,
-                upcomingInvoice.currency
-              )
-            }
-          ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Box, { $lineHeight: 1.15, $maxWidth: "10rem", $textAlign: "right", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-            Text,
-            {
-              $font: theme.typography[props.contractEndDate.fontStyle].fontFamily,
-              $size: theme.typography[props.contractEndDate.fontStyle].fontSize,
-              $weight: theme.typography[props.contractEndDate.fontStyle].fontWeight,
-              $color: theme.typography[props.contractEndDate.fontStyle].color,
-              $leading: 1,
-              children: t2("Estimated bill.")
-            }
-          ) })
-        ] }),
-        discounts.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(Flex, { $justifyContent: "space-between", $alignItems: "center", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-            Text,
+  }, [data.subscription]);
+  const loadInvoice = (0, import_react45.useCallback)(async () => {
+    if (!api || !data.component?.id) {
+      return;
+    }
+    try {
+      setError(void 0);
+      setIsLoading(true);
+      const response = await api.hydrateUpcomingInvoice({
+        componentId: data.component.id
+      });
+      setUpcomingInvoice(response.data);
+    } catch (e2) {
+      if (e2 instanceof Error) {
+        setError(e2);
+      }
+    } finally {
+      setIsLoading(false);
+    }
+  }, [api, data.component?.id]);
+  (0, import_react45.useEffect)(() => {
+    loadInvoice();
+  }, [loadInvoice]);
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(Element, { ref, className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Flex, { as: Container4, $justifyContent: "center", $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Loader, { $color: theme.primary, $isLoading: isLoading }) }),
+    error ? /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+      Flex,
+      {
+        as: Container4,
+        $flexDirection: "column",
+        $justifyContent: "center",
+        $alignItems: "center",
+        $gap: "1rem",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Text, { $weight: 500, $color: "#DB6669", children: t2("There was a problem retrieving your upcoming invoice.") }),
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+            Button,
             {
-              $font: theme.typography.text.fontFamily,
-              $size: theme.typography.text.fontSize,
-              $weight: 600,
-              $color: theme.typography.text.color,
-              children: t2("Discount")
+              onClick: () => loadInvoice(),
+              $size: "sm",
+              $variant: "ghost",
+              $fullWidth: false,
+              children: t2("Try again")
             }
-          ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Box, { children: discounts.map((discount) => /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
-            Flex,
-            {
-              $alignItems: "center",
-              $gap: "0.5rem",
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-                  Flex,
-                  {
-                    $alignItems: "center",
-                    $padding: "0.1875rem 0.375rem",
-                    $borderWidth: "1px",
-                    $borderStyle: "solid",
-                    $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.15)" : "hsla(0, 0%, 100%, 0.15)",
-                    $borderRadius: "0.3125rem",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-                      Text,
-                      {
-                        $font: theme.typography.text.fontFamily,
-                        $size: 0.75 * theme.typography.text.fontSize,
-                        $weight: theme.typography.text.fontWeight,
-                        $color: theme.typography.text.color,
-                        children: discount.customerFacingCode
-                      }
-                    )
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-                  Text,
-                  {
-                    $font: theme.typography.text.fontFamily,
-                    $size: theme.typography.text.fontSize,
-                    $weight: theme.typography.text.fontWeight,
-                    $color: theme.typography.text.color,
-                    children: t2("Percent off", { percent: discount.percentOff })
-                  }
-                ) })
-              ]
-            },
-            discount.couponId
-          )) })
-        ] })
-      ] }) : /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Text, { display: "heading2", children: t2("No upcoming invoice") })
-    }
-  );
+          )
+        ]
+      }
+    ) : !isLoading && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Container4, { children: upcomingInvoice ? /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(Flex, { $flexDirection: "column", $gap: "1rem", children: [
+      props.header.isVisible && upcomingInvoice.dueDate && /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(Text, { display: props.header.fontStyle, children: [
+        props.header.prefix,
+        " ",
+        toPrettyDate(upcomingInvoice.dueDate)
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+        Flex,
+        {
+          $justifyContent: "space-between",
+          $alignItems: "start",
+          $gap: "1rem",
+          children: [
+            props.price.isVisible && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Text, { display: props.price.fontStyle, $leading: 1, children: formatCurrency(
+              upcomingInvoice.amountDue,
+              upcomingInvoice.currency
+            ) }),
+            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Box, { $maxWidth: "10rem", $textAlign: "right", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Text, { display: props.contractEndDate.fontStyle, children: t2("Estimated bill.") }) })
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+        Flex,
+        {
+          $justifyContent: "space-between",
+          $alignItems: "center",
+          $gap: "1rem",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Text, { $weight: 600, children: t2("Remaining balance") }),
+            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Text, { children: formatCurrency(5e3, upcomingInvoice.currency) })
+          ]
+        }
+      ),
+      discounts.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+        Flex,
+        {
+          $justifyContent: "space-between",
+          $alignItems: "start",
+          $gap: "1rem",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Text, { $weight: 600, children: t2("Discount") }),
+            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+              Flex,
+              {
+                $flexDirection: "column",
+                $alignItems: "end",
+                $gap: "0.5rem",
+                children: discounts.reduce(
+                  (acc, discount) => {
+                    if (typeof discount.customerFacingCode === "string" && (typeof discount.percentOff === "number" || typeof discount.amountOff === "number")) {
+                      acc.push(
+                        /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+                          Flex,
+                          {
+                            $alignItems: "center",
+                            $gap: "0.5rem",
+                            children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+                                Flex,
+                                {
+                                  $alignItems: "center",
+                                  $padding: "0.1875rem 0.375rem",
+                                  $borderWidth: "1px",
+                                  $borderStyle: "solid",
+                                  $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.15)" : "hsla(0, 0%, 100%, 0.15)",
+                                  $borderRadius: "0.3125rem",
+                                  children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+                                    Text,
+                                    {
+                                      $size: 0.75 * theme.typography.text.fontSize,
+                                      children: discount.customerFacingCode
+                                    }
+                                  )
+                                }
+                              ),
+                              /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Text, { children: typeof discount.percentOff === "number" ? t2("Percent off", {
+                                percent: discount.percentOff
+                              }) : t2("Amount off", {
+                                amount: formatCurrency(
+                                  discount.amountOff,
+                                  discount?.currency
+                                )
+                              }) }) })
+                            ]
+                          },
+                          discount.couponId
+                        )
+                      );
+                    }
+                    return acc;
+                  },
+                  []
+                )
+              }
+            )
+          ]
+        }
+      )
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Text, { display: "heading2", children: t2("No upcoming invoice") }) })
+  ] });
 });
 UpcomingBill.displayName = "UpcomingBill";
 
 // src/components/embed/ComponentTree.tsx
-var import_react45 = require("react");
+var import_react47 = require("react");
 
 // src/components/embed/renderer.ts
-var import_react44 = require("react");
+var import_react46 = require("react");
 var components = {
   Root,
   Viewport,
@@ -25235,7 +25343,7 @@ function createRenderer(options2) {
     const { className, ...rest } = props;
     const resolvedProps = component === "div" ? rest : props;
     const resolvedChildren = children.map(renderNode);
-    return (0, import_react44.createElement)(
+    return (0, import_react46.createElement)(
       component,
       {
         key: index,
@@ -25304,8 +25412,8 @@ var Error2 = ({ message }) => {
 };
 var ComponentTree = () => {
   const { error, nodes, isPending } = useEmbed();
-  const [children, setChildren] = (0, import_react45.useState)(/* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Loading, {}));
-  (0, import_react45.useEffect)(() => {
+  const [children, setChildren] = (0, import_react47.useState)(/* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Loading, {}));
+  (0, import_react47.useEffect)(() => {
     const renderer = createRenderer();
     setChildren(nodes.map(renderer));
   }, [nodes]);