@schematichq/schematic-components 0.7.15 → 0.7.16

package/dist/schematic-components.esm.js

@@ -5981,10 +5981,10 @@ var require_classnames = __commonJS({
 });
 
 // src/components/elements/button/Button.tsx
-import { forwardRef as forwardRef6 } from "react";
+import { forwardRef as forwardRef7 } from "react";
 
 // src/components/layout/card/Card.tsx
-import { forwardRef as forwardRef2 } from "react";
+import { forwardRef as forwardRef3 } from "react";
 
 // node_modules/styled-components/node_modules/tslib/tslib.es6.mjs
 var __assign = function() {
@@ -16288,6 +16288,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",
@@ -16369,11 +16370,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",
@@ -17067,7 +17070,7 @@ var EmbedProvider = ({
   useEffect2(() => {
     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,
@@ -17147,6 +17150,36 @@ function usePrevious2(value) {
   return ref.current;
 }
 
+// src/hooks/useRequest.ts
+import { useCallback as useCallback4, useMemo as useMemo4, useState as useState3 } from "react";
+function useRequest(fn) {
+  const [isLoading, setIsLoading] = useState3(false);
+  const [error, setError] = useState3(null);
+  const [data, setData] = useState3(void 0);
+  const request = useCallback4(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 = useMemo4(() => {
+    const state = { isLoading, error, data };
+    return [state, request];
+  }, [isLoading, error, data, request]);
+  return value;
+}
+
 // src/hooks/useTrialEnd.ts
 function useTrialEnd() {
   const { data } = useEmbed();
@@ -17162,9 +17195,9 @@ function useTrialEnd() {
 }
 
 // src/hooks/useWrapChildren.ts
-import { useLayoutEffect, useState as useState3 } from "react";
+import { useLayoutEffect, useState as useState4 } from "react";
 function useWrapChildren(elements) {
-  const [shouldWrap, setShouldWrap] = useState3(
+  const [shouldWrap, setShouldWrap] = useState4(
     () => new Array(elements.length).fill(false)
   );
   useLayoutEffect(() => {
@@ -17361,7 +17394,7 @@ var Button = dt.button(
     $isLoading = false,
     $alignment = "center",
     $selfAlignment = "center",
-    $fullWidth = true,
+    $fullWidth = false,
     disabled,
     theme
   }) => {
@@ -17404,7 +17437,7 @@ var Button = dt.button(
       return lt`
           color: ${textColor};
 
-          ${Icon} {
+          ${Text}, ${Icon} {
             color: ${textColor};
           }
         `;
@@ -17423,7 +17456,7 @@ var Button = dt.button(
             border-color: ${color};
             color: ${color};
 
-            ${Icon} {
+            ${Text}, ${Icon} {
               color: ${color};
             }
           `;
@@ -17434,7 +17467,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};
             }
           `;
@@ -17449,7 +17482,7 @@ var Button = dt.button(
               text-decoration: underline;
             }
 
-            ${Icon} {
+            ${Text}, ${Icon} {
               color: ${color};
             }
           `;
@@ -17490,7 +17523,7 @@ var Button = dt.button(
               border-color: ${color};
               color: ${textColor};
 
-              ${Icon} {
+              ${Text}, ${Icon} {
                 color: ${textColor};
               }
             `;
@@ -17822,7 +17855,7 @@ var Input = dt.input(({ theme, $size = "md", $variant = "filled" }) => {
 });
 
 // src/components/ui/modal/Modal.tsx
-import { forwardRef, useCallback as useCallback4, useLayoutEffect as useLayoutEffect2 } from "react";
+import { forwardRef, useCallback as useCallback5, useLayoutEffect as useLayoutEffect2 } from "react";
 
 // src/components/ui/modal/styles.ts
 var Modal = dt(Box).attrs({
@@ -17865,7 +17898,7 @@ var Modal2 = forwardRef(
   ({ children, contentRef, size = "auto", top = 0, onClose, ...rest }, ref) => {
     const { setLayout } = useEmbed();
     const isLightBackground = useIsLightBackground();
-    const handleClose = useCallback4(() => {
+    const handleClose = useCallback5(() => {
       setLayout("portal");
       onClose?.();
     }, [setLayout, onClose]);
@@ -17909,7 +17942,7 @@ var Modal2 = forwardRef(
 Modal2.displayName = "Modal";
 
 // src/components/ui/modal/ModalHeader.tsx
-import { useCallback as useCallback5 } from "react";
+import { useCallback as useCallback6 } from "react";
 import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
 var ModalHeader = ({
   children,
@@ -17919,7 +17952,7 @@ var ModalHeader = ({
   const theme = nt();
   const { setLayout } = useEmbed();
   const isLightBackground = useIsLightBackground();
-  const handleClose = useCallback5(() => {
+  const handleClose = useCallback6(() => {
     setLayout("portal");
     onClose?.();
   }, [setLayout, onClose]);
@@ -17967,6 +18000,7 @@ var ModalHeader = ({
 };
 
 // src/components/ui/progress-bar/ProgressBar.tsx
+import { forwardRef as forwardRef2 } from "react";
 import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
 var progressColorMap = [
   "blue",
@@ -17976,68 +18010,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__ */ jsxs3(
-    Flex,
-    {
-      $position: "relative",
-      $alignItems: "center",
-      $gap: "1rem",
-      $width: "100%",
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx6(
-          Box,
-          {
-            $overflow: "hidden",
-            $width: "100%",
-            $minWidth: "6rem",
-            $height: `${8 / TEXT_BASE_SIZE}rem`,
-            $backgroundColor: bgColor,
-            $borderRadius: "9999px",
-            children: /* @__PURE__ */ jsx6(
-              Box,
-              {
-                $width: `${Math.min(progress, 100)}%`,
-                $height: "100%",
-                $backgroundColor: barColorMap[color]
-              }
-            )
-          }
-        ),
-        total && /* @__PURE__ */ jsxs3(
-          Text,
-          {
-            $font: theme.typography.text.fontFamily,
-            $size: 14,
-            $weight: 500,
-            $color: theme.typography.text.color,
-            children: [
-              formatNumber(value),
-              "/",
-              formatNumber(total)
-            ]
-          }
-        )
-      ]
-    }
-  );
-};
+var ProgressBar = forwardRef2(
+  ({
+    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__ */ jsxs3(
+      Flex,
+      {
+        ref,
+        $position: "relative",
+        $alignItems: "center",
+        $gap: "1rem",
+        $width: "100%",
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx6(
+            Box,
+            {
+              $overflow: "hidden",
+              $width: "100%",
+              $minWidth: "6rem",
+              $height: `${8 / TEXT_BASE_SIZE}rem`,
+              $backgroundColor: bgColor,
+              $borderRadius: "9999px",
+              children: /* @__PURE__ */ jsx6(
+                Box,
+                {
+                  $width: `${Math.min(progress, 100)}%`,
+                  $height: "100%",
+                  $backgroundColor: barColorMap[color]
+                }
+              )
+            }
+          ),
+          total && /* @__PURE__ */ jsxs3(
+            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) => {
@@ -18104,12 +18142,13 @@ var Text = dt.span.withConfig({
 
 // src/components/ui/tooltip/Tooltip.tsx
 var import_lodash2 = __toESM(require_lodash());
-import { useCallback as useCallback6, useLayoutEffect as useLayoutEffect3, useRef as useRef4, useState as useState4 } from "react";
+import { useCallback as useCallback7, useLayoutEffect as useLayoutEffect3, useRef as useRef4, useState as useState5 } from "react";
 import { createPortal } from "react-dom";
 
 // src/components/ui/tooltip/styles.ts
 var Trigger = dt.div`
   width: 100%;
+  flex-grow: 1;
 `;
 var coords = (position2) => {
   let x2 = 0;
@@ -18241,13 +18280,13 @@ var Tooltip = ({
   trigger,
   content,
   position: position2 = "top",
-  zIndex = 1,
+  zIndex = 9999999,
   ...rest
 }) => {
   const ref = useRef4(null);
-  const [show, setShow] = useState4(false);
-  const [coords2, setCoords] = useState4({ x: 0, y: 0 });
-  const updateCoords = useCallback6(() => {
+  const [show, setShow] = useState5(false);
+  const [coords2, setCoords] = useState5({ x: 0, y: 0 });
+  const updateCoords = useCallback7(() => {
     if (ref.current) {
       const { top: offsetTop, left: offsetLeft } = document.body.getBoundingClientRect();
       const rect = ref.current.getBoundingClientRect();
@@ -18334,7 +18373,7 @@ var StyledCard = dt.div(({ theme }) => {
 
 // src/components/layout/card/Card.tsx
 import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
-var Card = forwardRef2(
+var Card = forwardRef3(
   ({ children, className }, ref) => {
     const { isPending } = useEmbed();
     const theme = nt();
@@ -18363,7 +18402,7 @@ var Card = forwardRef2(
 Card.displayName = "Card";
 
 // src/components/layout/column/Column.tsx
-import { Children as Children2, forwardRef as forwardRef3 } from "react";
+import { Children as Children2, forwardRef as forwardRef4 } from "react";
 
 // src/components/layout/column/styles.ts
 var StyledColumn = dt.div`
@@ -18372,7 +18411,7 @@ var StyledColumn = dt.div`
 
 // src/components/layout/column/Column.tsx
 import { jsx as jsx9 } from "react/jsx-runtime";
-var Column = forwardRef3(
+var Column = forwardRef4(
   ({ children, basis, ...props }, ref) => {
     return /* @__PURE__ */ jsx9(StyledColumn, { ref, ...props, children: Children2.count(children) > 0 ? /* @__PURE__ */ jsx9(Card, { children }) : children });
   }
@@ -18380,7 +18419,7 @@ var Column = forwardRef3(
 Column.displayName = "Column";
 
 // src/components/layout/root/Root.tsx
-import { forwardRef as forwardRef4 } from "react";
+import { forwardRef as forwardRef5 } from "react";
 
 // src/components/layout/root/styles.ts
 var Container2 = dt.div`
@@ -18392,6 +18431,7 @@ var Container2 = dt.div`
   width: 100%;
   height: 100%;
   container-type: inline-size;
+  interpolate-size: allow-keywords;
 
   *,
   *::before,
@@ -18416,7 +18456,7 @@ var Container2 = dt.div`
 
 // src/components/layout/root/Root.tsx
 import { jsx as jsx10 } from "react/jsx-runtime";
-var Root = forwardRef4(
+var Root = forwardRef5(
   ({ data, settings, ...props }, ref) => {
     return /* @__PURE__ */ jsx10(Container2, { ref, ...props });
   }
@@ -18425,27 +18465,27 @@ Root.displayName = "Root";
 
 // src/components/layout/viewport/Viewport.tsx
 var import_lodash3 = __toESM(require_lodash());
-import { forwardRef as forwardRef5, useLayoutEffect as useLayoutEffect6, useState as useState12 } from "react";
+import { forwardRef as forwardRef6, useLayoutEffect as useLayoutEffect6, useState as useState13 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
 
 // src/components/shared/checkout-dialog/CheckoutDialog.tsx
 import {
-  useCallback as useCallback8,
+  useCallback as useCallback9,
   useEffect as useEffect4,
   useLayoutEffect as useLayoutEffect4,
-  useMemo as useMemo6,
+  useMemo as useMemo7,
   useRef as useRef5,
-  useState as useState8
+  useState as useState9
 } from "react";
 
 // src/components/shared/sidebar/Sidebar.tsx
 import {
-  useCallback as useCallback7,
-  useMemo as useMemo4
+  useCallback as useCallback8,
+  useMemo as useMemo5
 } from "react";
 
 // src/components/shared/sidebar/Proration.tsx
-import { useState as useState5 } from "react";
+import { useState as useState6 } from "react";
 import { Fragment as Fragment3, jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
 var Proration = ({
   currency,
@@ -18454,7 +18494,7 @@ var Proration = ({
 }) => {
   const { t: t2 } = useTranslation();
   const theme = nt();
-  const [open, setOpen] = useState5(false);
+  const [open, setOpen] = useState6(false);
   const toggle = (e2) => {
     e2.preventDefault();
     e2.stopPropagation();
@@ -18510,21 +18550,29 @@ var Proration = ({
               children: t2("Total")
             }
           ),
-          /* @__PURE__ */ jsxs6(Button, { onClick: toggle, $variant: "text", children: [
-            /* @__PURE__ */ jsx11(Icon2, { name: open ? "chevron-up" : "chevron-down" }),
-            /* @__PURE__ */ jsx11(
-              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__ */ jsxs6(
+            Button,
+            {
+              onClick: toggle,
+              style: { height: "auto", padding: 0 },
+              $variant: "text",
+              children: [
+                /* @__PURE__ */ jsx11(Icon2, { name: open ? "chevron-up" : "chevron-down" }),
+                /* @__PURE__ */ jsx11(
+                  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__ */ jsx11(Flex, { children: /* @__PURE__ */ jsx11(
           Text,
@@ -18568,6 +18616,7 @@ var StageButton = ({
         disabled: isLoading || !hasUnstagedChanges || !canUpdateSubscription,
         onClick: checkout,
         $isLoading: isLoading,
+        $fullWidth: true,
         children: t2("Subscribe and close")
       }
     );
@@ -18583,6 +18632,7 @@ var StageButton = ({
             setCheckoutStage?.("checkout");
           },
           $isLoading: isLoading,
+          $fullWidth: true,
           children: /* @__PURE__ */ jsxs7(
             Flex,
             {
@@ -18617,6 +18667,7 @@ var StageButton = ({
           );
         },
         $isLoading: isLoading,
+        $fullWidth: true,
         children: /* @__PURE__ */ jsxs7(Flex, { $gap: "0.5rem", $justifyContent: "center", $alignItems: "center", children: [
           t2("Next"),
           ":",
@@ -18640,6 +18691,7 @@ var StageButton = ({
           setCheckoutStage?.(hasAddOns ? "addons" : "checkout");
         },
         $isLoading: isLoading,
+        $fullWidth: true,
         children: /* @__PURE__ */ jsxs7(
           Flex,
           {
@@ -18671,6 +18723,7 @@ var StageButton = ({
           setCheckoutStage?.("checkout");
         },
         $isLoading: isLoading,
+        $fullWidth: true,
         children: /* @__PURE__ */ jsxs7(
           Flex,
           {
@@ -18700,6 +18753,7 @@ var StageButton = ({
         disabled: isLoading || !hasUnstagedChanges || !canCheckout,
         onClick: checkout,
         $isLoading: isLoading,
+        $fullWidth: true,
         children: willTrial ? t2("Start trial") : t2("Pay now")
       }
     );
@@ -18735,7 +18789,7 @@ var Sidebar = ({
   const isLightBackground = useIsLightBackground();
   const currentPlan = data.company?.plan;
   const currentAddOns = data.company?.addOns || [];
-  const currentUsageBasedEntitlements = useMemo4(() => {
+  const currentUsageBasedEntitlements = useMemo5(() => {
     return (data.featureUsage?.features || []).reduce(
       (acc, entitlement) => {
         if (entitlement.priceBehavior && (planPeriod === "month" && entitlement.monthlyUsageBasedPrice || planPeriod === "year" && entitlement.yearlyUsageBasedPrice)) {
@@ -18753,7 +18807,7 @@ var Sidebar = ({
       []
     );
   }, [data.featureUsage?.features, planPeriod]);
-  const { payAsYouGoEntitlements, payInAdvanceEntitlements } = useMemo4(() => {
+  const { payAsYouGoEntitlements, payInAdvanceEntitlements } = useMemo5(() => {
     const payAsYouGoEntitlements2 = [];
     const payInAdvanceEntitlements2 = usageBasedEntitlements.filter(
       (entitlement) => {
@@ -18765,7 +18819,7 @@ var Sidebar = ({
     );
     return { payAsYouGoEntitlements: payAsYouGoEntitlements2, payInAdvanceEntitlements: payInAdvanceEntitlements2 };
   }, [usageBasedEntitlements]);
-  const subscriptionPrice = useMemo4(() => {
+  const subscriptionPrice = useMemo5(() => {
     let planPrice;
     let currency;
     if (selectedPlan) {
@@ -18799,7 +18853,7 @@ var Sidebar = ({
     total += payInAdvanceCost;
     return formatCurrency(total, currency);
   }, [selectedPlan, currentPlan, planPeriod, addOns, payInAdvanceEntitlements]);
-  const { amountOff, dueNow, newCharges, percentOff, periodStart, proration } = useMemo4(() => {
+  const { amountOff, dueNow, newCharges, percentOff, periodStart, proration } = useMemo5(() => {
     return {
       amountOff: charges?.amountOff ?? 0,
       dueNow: charges?.dueNow ?? 0,
@@ -18816,7 +18870,7 @@ var Sidebar = ({
     });
     window.dispatchEvent(event);
   };
-  const checkout = useCallback7(async () => {
+  const checkout = useCallback8(async () => {
     const priceId = (planPeriod === "year" ? selectedPlan?.yearlyPrice : selectedPlan?.monthlyPrice)?.id;
     if (!api || !selectedPlan || !priceId) {
       return;
@@ -18883,7 +18937,7 @@ var Sidebar = ({
     payInAdvanceEntitlements,
     promoCode
   ]);
-  const unsubscribe = useCallback7(async () => {
+  const unsubscribe = useCallback8(async () => {
     if (!api) {
       return;
     }
@@ -18907,7 +18961,7 @@ var Sidebar = ({
     addedUsageBasedEntitlements,
     removedUsageBasedEntitlements,
     willUsageBasedEntitlementsChange
-  } = useMemo4(() => {
+  } = useMemo5(() => {
     const changedUsageBasedEntitlements2 = [];
     const addedUsageBasedEntitlements2 = selectedPlan ? usageBasedEntitlements.reduce(
       (acc, selected) => {
@@ -18971,7 +19025,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) {
@@ -19865,7 +19919,7 @@ var Sidebar = ({
                   willTrial
                 }
               ),
-              layout === "unsubscribe" && /* @__PURE__ */ jsx13(Button, { onClick: unsubscribe, $isLoading: isLoading, children: t2("Cancel subscription") }),
+              layout === "unsubscribe" && /* @__PURE__ */ jsx13(Button, { onClick: unsubscribe, $isLoading: isLoading, $fullWidth: true, children: t2("Cancel subscription") }),
               !isLoading && error && /* @__PURE__ */ jsx13(Box, { children: /* @__PURE__ */ jsx13(
                 Text,
                 {
@@ -20002,6 +20056,7 @@ var AddOns = ({ addOns, toggle, isLoading, period }) => {
                   $size: "sm",
                   $color: "primary",
                   $variant: "outline",
+                  $fullWidth: true,
                   children: t2("Choose add-on")
                 }
               ) : /* @__PURE__ */ jsx14(
@@ -20013,6 +20068,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__ */ jsxs9(Fragment5, { children: [
                     /* @__PURE__ */ jsx14(
                       Icon2,
@@ -20038,7 +20094,7 @@ var AddOns = ({ addOns, toggle, isLoading, period }) => {
 };
 
 // src/components/shared/checkout-dialog/Checkout.tsx
-import { useState as useState6 } from "react";
+import { useState as useState7 } from "react";
 import { Fragment as Fragment6, jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
 var Checkout = ({
   requiresPayment,
@@ -20048,7 +20104,7 @@ var Checkout = ({
   const { t: t2 } = useTranslation();
   const theme = nt();
   const isLightBackground = useIsLightBackground();
-  const [discount, setDiscount] = useState6("");
+  const [discount, setDiscount] = useState7("");
   if (!requiresPayment) {
     return null;
   }
@@ -20216,7 +20272,7 @@ var Navigation = ({
 };
 
 // src/components/shared/checkout-dialog/Plan.tsx
-import { useMemo as useMemo5, useState as useState7 } from "react";
+import { useMemo as useMemo6, useState as useState8 } from "react";
 
 // src/components/elements/pricing-table/styles.ts
 var ButtonLink = dt.a`
@@ -20232,7 +20288,7 @@ import { Fragment as Fragment8, jsx as jsx17, jsxs as jsxs12 } from "react/jsx-r
 var Selected = ({ isCurrent = false, isTrial = false }) => {
   const { t: t2 } = useTranslation();
   const theme = nt();
-  const text = useMemo5(() => {
+  const text = useMemo6(() => {
     if (isCurrent) {
       return isTrial ? t2("Trial in progress") : t2("Current plan");
     }
@@ -20282,15 +20338,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__ */ jsxs12(Flex, { $flexDirection: "column", $gap: "1.5rem", children: [
-      data.subscription?.status !== "trialing" && /* @__PURE__ */ jsx17(Fragment8, { children: isSelected && willTrial ? /* @__PURE__ */ jsx17(
-        Selected,
-        {
-          isCurrent,
-          isTrial: plan.companyCanTrial && willTrial
-        }
-      ) : /* @__PURE__ */ jsx17(
+      data.subscription?.status !== "trialing" && /* @__PURE__ */ jsx17(Fragment8, { children: isSelected && willTrial ? /* @__PURE__ */ jsx17(Selected, { isCurrent, isTrial: willTrial }) : /* @__PURE__ */ jsx17(
         Button,
         {
           type: "button",
@@ -20306,6 +20356,7 @@ var PlanButtonGroup = ({
           $size: "sm",
           $color: "primary",
           $variant: "filled",
+          $fullWidth: true,
           children: plan.custom ? /* @__PURE__ */ jsx17(
             ButtonLink,
             {
@@ -20316,8 +20367,8 @@ var PlanButtonGroup = ({
           ) : !plan.valid ? /* @__PURE__ */ jsx17(
             Tooltip,
             {
-              trigger: t2("Over usage limit"),
-              content: t2("Current usage exceeds the limit of this plan.")
+              trigger: /* @__PURE__ */ jsx17(Text, { children: t2("Over usage limit") }),
+              content: /* @__PURE__ */ jsx17(Text, { children: t2("Current usage exceeds the limit of this plan.") })
             }
           ) : t2("Start X day trial", { days: plan.trialDays })
         }
@@ -20333,11 +20384,12 @@ var PlanButtonGroup = ({
           $size: "sm",
           $color: "primary",
           $variant: data.subscription?.status === "trialing" ? "filled" : "text",
+          $fullWidth: true,
           children: !plan.valid ? /* @__PURE__ */ jsx17(
             Tooltip,
             {
-              trigger: t2("Over usage limit"),
-              content: t2("Current usage exceeds the limit of this plan.")
+              trigger: /* @__PURE__ */ jsx17(Text, { children: t2("Over usage limit") }),
+              content: /* @__PURE__ */ jsx17(Text, { children: t2("Current usage exceeds the limit of this plan.") })
             }
           ) : t2("Choose plan")
         }
@@ -20357,6 +20409,7 @@ var PlanButtonGroup = ({
       $size: "sm",
       $color: "primary",
       $variant: "filled",
+      $fullWidth: true,
       children: plan.custom ? /* @__PURE__ */ jsx17(
         ButtonLink,
         {
@@ -20367,8 +20420,8 @@ var PlanButtonGroup = ({
       ) : !plan.valid ? /* @__PURE__ */ jsx17(
         Tooltip,
         {
-          trigger: t2("Over usage limit"),
-          content: t2("Current usage exceeds the limit of this plan.")
+          trigger: /* @__PURE__ */ jsx17(Text, { children: t2("Over usage limit") }),
+          content: /* @__PURE__ */ jsx17(Text, { children: t2("Current usage exceeds the limit of this plan.") })
         }
       ) : t2("Choose plan")
     }
@@ -20386,7 +20439,7 @@ var Plan = ({
   const theme = nt();
   const { data } = useEmbed();
   const isLightBackground = useIsLightBackground();
-  const [entitlementCounts, setEntitlementCounts] = useState7(
+  const [entitlementCounts, setEntitlementCounts] = useState8(
     () => plans.reduce(
       (acc, plan) => {
         acc[plan.id] = {
@@ -20950,13 +21003,13 @@ var CheckoutDialog = ({ top = 0 }) => {
   const modalRef = useRef5(null);
   const contentRef = useRef5(null);
   const checkoutRef = useRef5(null);
-  const [charges, setCharges] = useState8();
-  const [paymentMethodId, setPaymentMethodId] = useState8(
+  const [charges, setCharges] = useState9();
+  const [paymentMethodId, setPaymentMethodId] = useState9(
     (data.subscription?.paymentMethod || data.company?.defaultPaymentMethod)?.externalId
   );
-  const [isLoading, setIsLoading] = useState8(false);
-  const [error, setError] = useState8();
-  const [planPeriod, setPlanPeriod] = useState8(
+  const [isLoading, setIsLoading] = useState9(false);
+  const [error, setError] = useState9();
+  const [planPeriod, setPlanPeriod] = useState9(
     selected.period || data.company?.plan?.planPeriod || "month"
   );
   const {
@@ -20964,15 +21017,13 @@ var CheckoutDialog = ({ top = 0 }) => {
     addOns: availableAddOns,
     periods: availablePeriods
   } = useAvailablePlans(planPeriod);
-  const [selectedPlan, setSelectedPlan] = useState8(
+  const [selectedPlan, setSelectedPlan] = useState9(
     () => availablePlans.find(
       (plan) => selected.planId ? plan.id === selected.planId : plan.current
     )
   );
-  const [willTrial, setWillTrial] = useState8(
-    data.subscription?.status !== "trialing" && !data.trialPaymentMethodRequired
-  );
-  const [addOns, setAddOns] = useState8(
+  const [willTrial, setWillTrial] = useState9(false);
+  const [addOns, setAddOns] = useState9(
     () => availableAddOns.map((addOn) => ({
       ...addOn,
       isSelected: typeof selected.addOnId !== "undefined" ? addOn.id === selected.addOnId : (data.company?.addOns || []).some(
@@ -20981,10 +21032,10 @@ var CheckoutDialog = ({ top = 0 }) => {
     }))
   );
   const hasActiveAddOns = addOns.some((addOn) => addOn.isSelected);
-  const currentEntitlements = useMemo6(() => {
+  const currentEntitlements = useMemo7(() => {
     return data.featureUsage?.features || [];
   }, [data.featureUsage?.features]);
-  const [usageBasedEntitlements, setUsageBasedEntitlements] = useState8(
+  const [usageBasedEntitlements, setUsageBasedEntitlements] = useState9(
     () => (selectedPlan?.entitlements || []).reduce(
       createActiveUsageBasedEntitlementsReducer(
         currentEntitlements,
@@ -20993,7 +21044,7 @@ var CheckoutDialog = ({ top = 0 }) => {
       []
     )
   );
-  const payInAdvanceEntitlements = useMemo6(
+  const payInAdvanceEntitlements = useMemo7(
     () => usageBasedEntitlements.filter(
       (entitlement) => entitlement.priceBehavior === "pay_in_advance"
     ),
@@ -21002,12 +21053,12 @@ var CheckoutDialog = ({ top = 0 }) => {
   const hasActivePayInAdvanceEntitlements = payInAdvanceEntitlements.some(
     ({ quantity }) => quantity > 0
   );
-  const [promoCode, setPromoCode] = useState8();
+  const [promoCode, setPromoCode] = useState9();
   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 = useMemo6(() => {
+  const checkoutStages = useMemo7(() => {
     const stages = [
       {
         id: "plan",
@@ -21048,7 +21099,7 @@ var CheckoutDialog = ({ top = 0 }) => {
     availableAddOns,
     requiresPayment
   ]);
-  const [checkoutStage, setCheckoutStage] = useState8(() => {
+  const [checkoutStage, setCheckoutStage] = useState9(() => {
     if (selected.addOnId) {
       return "addons";
     }
@@ -21061,7 +21112,7 @@ var CheckoutDialog = ({ top = 0 }) => {
     return "plan";
   });
   const isLightBackground = useIsLightBackground();
-  const previewCheckout = useCallback8(
+  const previewCheckout = useCallback9(
     async (updates) => {
       const period = updates.period || planPeriod;
       const plan = updates.plan || selectedPlan;
@@ -21135,7 +21186,7 @@ var CheckoutDialog = ({ top = 0 }) => {
       promoCode
     ]
   );
-  const selectPlan = useCallback8(
+  const selectPlan = useCallback9(
     (updates) => {
       const plan = updates.plan || selectedPlan;
       if (!plan) {
@@ -21168,7 +21219,7 @@ var CheckoutDialog = ({ top = 0 }) => {
       previewCheckout
     ]
   );
-  const changePlanPeriod = useCallback8(
+  const changePlanPeriod = useCallback9(
     (period) => {
       setPlanPeriod(period);
       previewCheckout({ period });
@@ -21185,7 +21236,7 @@ var CheckoutDialog = ({ top = 0 }) => {
       return updated;
     });
   };
-  const updateUsageBasedEntitlementQuantity = useCallback8(
+  const updateUsageBasedEntitlementQuantity = useCallback9(
     (id, updatedQuantity) => {
       setUsageBasedEntitlements((prev2) => {
         const updated = prev2.map(
@@ -21455,7 +21506,7 @@ import {
   useElements,
   useStripe
 } from "@stripe/react-stripe-js";
-import { useState as useState9 } from "react";
+import { useState as useState10 } from "react";
 import { jsx as jsx21, jsxs as jsxs16 } from "react/jsx-runtime";
 var PaymentForm = ({ onConfirm }) => {
   const { t: t2 } = useTranslation();
@@ -21463,10 +21514,10 @@ var PaymentForm = ({ onConfirm }) => {
   const stripe = useStripe();
   const elements = useElements();
   const { api } = useEmbed();
-  const [message, setMessage] = useState9(null);
-  const [isLoading, setIsLoading] = useState9(false);
-  const [isConfirmed, setIsConfirmed] = useState9(false);
-  const [isComplete, setIsComplete] = useState9(false);
+  const [message, setMessage] = useState10(null);
+  const [isLoading, setIsLoading] = useState10(false);
+  const [isConfirmed, setIsConfirmed] = useState10(false);
+  const [isComplete, setIsComplete] = useState10(false);
   const handleSubmit = async (event) => {
     event.preventDefault();
     if (!api || !stripe || !elements) {
@@ -21526,6 +21577,7 @@ var PaymentForm = ({ onConfirm }) => {
             style: { flexShrink: 0 },
             $color: "primary",
             $isLoading: isLoading,
+            $fullWidth: true,
             children: isLoading ? t2("Loading") : t2("Save payment method")
           }
         ),
@@ -21546,7 +21598,7 @@ var PaymentForm = ({ onConfirm }) => {
 };
 
 // src/components/shared/period-toggle/PeriodToggle.tsx
-import { useLayoutEffect as useLayoutEffect5, useMemo as useMemo7, useState as useState10 } from "react";
+import { useLayoutEffect as useLayoutEffect5, useMemo as useMemo8, useState as useState11 } from "react";
 import { jsx as jsx22 } from "react/jsx-runtime";
 var PeriodToggle = ({
   options: options2,
@@ -21558,8 +21610,8 @@ var PeriodToggle = ({
   const { t: t2 } = useTranslation();
   const theme = nt();
   const isLightBackground = useIsLightBackground();
-  const [tooltipZIndex, setTooltipZIndex] = useState10(1);
-  const savingsPercentage = useMemo7(() => {
+  const [tooltipZIndex, setTooltipZIndex] = useState11(1);
+  const savingsPercentage = useMemo8(() => {
     if (selectedPlan) {
       const monthlyBillingPrice = getBillingPrice(selectedPlan?.monthlyPrice);
       const yearlyBillingPrice = getBillingPrice(selectedPlan?.yearlyPrice);
@@ -21659,21 +21711,21 @@ var PeriodToggle = ({
 };
 
 // src/components/shared/unsubscribe-dialog/UnsubscribeDialog.tsx
-import { useCallback as useCallback9, useMemo as useMemo8, useRef as useRef6, useState as useState11 } from "react";
+import { useCallback as useCallback10, useMemo as useMemo9, useRef as useRef6, useState as useState12 } from "react";
 import { jsx as jsx23, jsxs as jsxs17 } from "react/jsx-runtime";
 var UnsubscribeDialog = ({ top = 0 }) => {
   const { t: t2 } = useTranslation();
   const theme = nt();
   const { data, setLayout, setSelected } = useEmbed();
   const contentRef = useRef6(null);
-  const [error, setError] = useState11();
-  const [isLoading, setIsLoading] = useState11(false);
-  const planPeriod = useMemo8(
+  const [error, setError] = useState12();
+  const [isLoading, setIsLoading] = useState12(false);
+  const planPeriod = useMemo9(
     () => data.company?.plan?.planPeriod ?? "month",
     [data.company?.plan?.planPeriod]
   );
   const { plans: availablePlans, addOns: availableAddOns } = useAvailablePlans(planPeriod);
-  const selectedPlan = useMemo8(
+  const selectedPlan = useMemo9(
     () => availablePlans.find(
       (plan) => plan.id === data.company?.plan?.id && data.company?.plan.planPeriod === planPeriod
     ),
@@ -21684,7 +21736,7 @@ var UnsubscribeDialog = ({ top = 0 }) => {
     createActiveUsageBasedEntitlementsReducer(currentEntitlements, planPeriod),
     []
   );
-  const addOns = useMemo8(
+  const addOns = useMemo9(
     () => availableAddOns.map((available) => ({
       ...available,
       isSelected: data.company?.addOns.some((current) => available.id === current.id) ?? false
@@ -21695,7 +21747,7 @@ var UnsubscribeDialog = ({ top = 0 }) => {
     data.subscription?.cancelAt || data.upcomingInvoice?.dueDate || Date.now()
   );
   const isLightBackground = useIsLightBackground();
-  const handleClose = useCallback9(() => {
+  const handleClose = useCallback10(() => {
     setLayout("portal");
   }, [setLayout]);
   return /* @__PURE__ */ jsxs17(
@@ -21808,7 +21860,6 @@ var UnsubscribeDialog = ({ top = 0 }) => {
                           $size: "sm",
                           $color: "secondary",
                           $variant: "ghost",
-                          $fullWidth: false,
                           children: t2("Manage plan")
                         }
                       )
@@ -22023,10 +22074,10 @@ var StyledViewport = dt.div.withConfig({
 
 // src/components/layout/viewport/Viewport.tsx
 import { Fragment as Fragment10, jsx as jsx26, jsxs as jsxs20 } from "react/jsx-runtime";
-var Viewport = forwardRef5(
+var Viewport = forwardRef6(
   ({ children, portal, ...props }, ref) => {
     const { data, layout, settings } = useEmbed();
-    const [top, setTop] = useState12(0);
+    const [top, setTop] = useState13(0);
     const canCheckout = data.capabilities?.checkout ?? true;
     useLayoutEffect6(() => {
       const parent = portal || document.body;
@@ -22075,7 +22126,7 @@ var resolveDesignProps = (props) => {
     }
   };
 };
-var ButtonElement = forwardRef6(({ children, className, ...rest }, ref) => {
+var ButtonElement = forwardRef7(({ children, className, ...rest }, ref) => {
   const props = resolveDesignProps(rest);
   const buttonStyles = {
     primary: {
@@ -22120,10 +22171,10 @@ var ButtonElement = forwardRef6(({ children, className, ...rest }, ref) => {
 ButtonElement.displayName = "Button";
 
 // src/components/elements/included-features/IncludedFeatures.tsx
-import { forwardRef as forwardRef7, useMemo as useMemo10, useRef as useRef7, useState as useState13 } from "react";
+import { forwardRef as forwardRef8, useMemo as useMemo11, useRef as useRef7, useState as useState14 } from "react";
 
 // src/components/elements/included-features/Details.tsx
-import { Fragment as Fragment11, useMemo as useMemo9 } from "react";
+import { Fragment as Fragment11, useMemo as useMemo10 } from "react";
 import { Fragment as Fragment12, jsx as jsx28, jsxs as jsxs21 } from "react/jsx-runtime";
 var Details = ({
   shouldWrapChildren,
@@ -22148,7 +22199,7 @@ var Details = ({
     priceTier,
     currency,
     packageSize = 1
-  } = useMemo9(() => {
+  } = useMemo10(() => {
     const {
       price: entitlementPrice,
       priceDecimal: entitlementPriceDecimal,
@@ -22170,7 +22221,7 @@ var Details = ({
     monthlyUsageBasedPrice,
     yearlyUsageBasedPrice
   ]);
-  const text = useMemo9(() => {
+  const text = useMemo10(() => {
     if (!feature) {
       return;
     }
@@ -22221,7 +22272,7 @@ var Details = ({
     packageSize,
     softLimit
   ]);
-  const usageText = useMemo9(() => {
+  const usageText = useMemo10(() => {
     if (!feature) {
       return;
     }
@@ -22389,7 +22440,7 @@ function resolveDesignProps2(props) {
     visibleFeatures: props.visibleFeatures
   };
 }
-var IncludedFeatures = forwardRef7(({ className, ...rest }, ref) => {
+var IncludedFeatures = forwardRef8(({ className, ...rest }, ref) => {
   const props = resolveDesignProps2(rest);
   const { t: t2 } = useTranslation();
   const theme = nt();
@@ -22397,8 +22448,8 @@ var IncludedFeatures = forwardRef7(({ className, ...rest }, ref) => {
   const elements = useRef7([]);
   const shouldWrapChildren = useWrapChildren(elements.current);
   const isLightBackground = useIsLightBackground();
-  const [showCount, setShowCount] = useState13(VISIBLE_ENTITLEMENT_COUNT);
-  const featureUsage = useMemo10(() => {
+  const [showCount, setShowCount] = useState14(VISIBLE_ENTITLEMENT_COUNT);
+  const featureUsage = useMemo11(() => {
     const orderedFeatureUsage = props.visibleFeatures?.reduce(
       (acc, id) => {
         const mappedFeatureUsage = data.featureUsage?.features.find(
@@ -22556,7 +22607,7 @@ var IncludedFeatures = forwardRef7(({ className, ...rest }, ref) => {
 IncludedFeatures.displayName = "IncludedFeatures";
 
 // src/components/elements/invoices/Invoices.tsx
-import { forwardRef as forwardRef8, useEffect as useEffect5, useState as useState14 } from "react";
+import { forwardRef as forwardRef9, useEffect as useEffect5, useState as useState15 } from "react";
 import { Fragment as Fragment13, jsx as jsx30, jsxs as jsxs23 } from "react/jsx-runtime";
 function resolveDesignProps3(props) {
   return {
@@ -22608,13 +22659,13 @@ var InvoiceDate = ({ date, fontStyle, url }) => {
   }
   return dateText;
 };
-var Invoices = forwardRef8(({ className, data, ...rest }, ref) => {
+var Invoices = forwardRef9(({ className, data, ...rest }, ref) => {
   const props = resolveDesignProps3(rest);
   const { t: t2 } = useTranslation();
   const theme = nt();
   const { api } = useEmbed();
-  const [invoices, setInvoices] = useState14(() => formatInvoices(data));
-  const [listSize, setListSize] = useState14(props.limit.number);
+  const [invoices, setInvoices] = useState15(() => formatInvoices(data));
+  const [listSize, setListSize] = useState15(props.limit.number);
   const toggleListSize = () => {
     setListSize(
       (prev2) => prev2 !== props.limit.number ? props.limit.number : MAX_VISIBLE_INVOICE_COUNT
@@ -22688,7 +22739,7 @@ var Invoices = forwardRef8(({ className, data, ...rest }, ref) => {
 Invoices.displayName = "Invoices";
 
 // src/components/elements/metered-features/MeteredFeatures.tsx
-import { forwardRef as forwardRef9, useMemo as useMemo11, useRef as useRef8 } from "react";
+import { forwardRef as forwardRef10, useMemo as useMemo12, useRef as useRef8 } from "react";
 
 // src/components/elements/metered-features/styles.ts
 var Container3 = dt.div`
@@ -22734,7 +22785,7 @@ function resolveDesignProps4(props) {
     visibleFeatures: props.visibleFeatures
   };
 }
-var MeteredFeatures = forwardRef9(({ className, ...rest }, ref) => {
+var MeteredFeatures = forwardRef10(({ className, ...rest }, ref) => {
   const props = resolveDesignProps4(rest);
   const elements = useRef8([]);
   const shouldWrapChildren = useWrapChildren(elements.current);
@@ -22742,7 +22793,7 @@ var MeteredFeatures = forwardRef9(({ className, ...rest }, ref) => {
   const theme = nt();
   const { data, setLayout, setSelected } = useEmbed();
   const isLightBackground = useIsLightBackground();
-  const featureUsage = useMemo11(() => {
+  const featureUsage = useMemo12(() => {
     const orderedFeatureUsage = props.visibleFeatures?.reduce(
       (acc, id) => {
         const mappedFeatureUsage = data.featureUsage?.features.find(
@@ -22928,7 +22979,7 @@ var MeteredFeatures = forwardRef9(({ className, ...rest }, ref) => {
                   }
                 ),
                 props.isVisible && typeof usage === "number" && priceBehavior !== "pay_as_you_go" && /* @__PURE__ */ jsxs24(Flex, { $flexWrap: "wrap", $justifyContent: "end", $gap: "2rem", children: [
-                  typeof allocation === "number" ? /* @__PURE__ */ jsx31(
+                  typeof allocation === "number" && progressBar ? /* @__PURE__ */ jsx31(
                     Tooltip,
                     {
                       trigger: progressBar,
@@ -22956,7 +23007,6 @@ var MeteredFeatures = forwardRef9(({ className, ...rest }, ref) => {
                         setSelected({ usage: true });
                         setLayout("checkout");
                       },
-                      $fullWidth: false,
                       style: { whiteSpace: "nowrap" },
                       children: t2("Add More")
                     }
@@ -23039,10 +23089,10 @@ var MeteredFeatures = forwardRef9(({ className, ...rest }, ref) => {
 MeteredFeatures.displayName = "MeteredFeatures";
 
 // src/components/elements/payment-method/PaymentMethod.tsx
-import { forwardRef as forwardRef10, useMemo as useMemo13 } from "react";
+import { forwardRef as forwardRef11, useMemo as useMemo14 } from "react";
 
 // src/components/elements/payment-method/PaymentMethodElement.tsx
-import { useMemo as useMemo12 } from "react";
+import { useMemo as useMemo13 } from "react";
 import { jsx as jsx32, jsxs as jsxs25 } from "react/jsx-runtime";
 var PaymentElement2 = ({
   iconName,
@@ -23217,7 +23267,7 @@ var PaymentListElement = ({
   const isLightBackground = useIsLightBackground();
   const { iconName, iconTitle, label, paymentLast4 } = getPaymentMethodData(paymentMethod);
   const iconStyles = getIconStyles({ size: "lg", theme });
-  const expirationDate = useMemo12(() => {
+  const expirationDate = useMemo13(() => {
     const { cardExpMonth, cardExpYear } = paymentMethod;
     if (!cardExpMonth && !cardExpYear) {
       return "";
@@ -23329,13 +23379,13 @@ var resolveDesignProps5 = (props) => {
     }
   };
 };
-var PaymentMethod = forwardRef10(({ children, className, portal, allowEdit = true, ...rest }, ref) => {
+var PaymentMethod = forwardRef11(({ children, className, portal, allowEdit = true, ...rest }, ref) => {
   const props = resolveDesignProps5(rest);
   const { data, setLayout } = useEmbed();
-  const paymentMethod = useMemo13(() => {
+  const paymentMethod = useMemo14(() => {
     return data.subscription?.paymentMethod || data.company?.defaultPaymentMethod;
   }, [data.company?.defaultPaymentMethod, data.subscription?.paymentMethod]);
-  const monthsToExpiration = useMemo13(() => {
+  const monthsToExpiration = useMemo14(() => {
     let expiration;
     if (typeof paymentMethod?.cardExpYear === "number" && typeof paymentMethod?.cardExpMonth === "number") {
       const today = /* @__PURE__ */ new Date();
@@ -23516,7 +23566,7 @@ var loadStripe = function loadStripe2() {
 };
 
 // src/components/elements/payment-method/PaymentMethodDetails.tsx
-import { useCallback as useCallback10, useEffect as useEffect6, useMemo as useMemo14, useState as useState15 } from "react";
+import { useCallback as useCallback11, useEffect as useEffect6, useMemo as useMemo15, useState as useState16 } from "react";
 import { jsx as jsx34, jsxs as jsxs26 } from "react/jsx-runtime";
 var resolveDesignProps6 = () => {
   return {
@@ -23538,14 +23588,14 @@ var PaymentMethodDetails = ({
   const theme = nt();
   const { api, data, setData } = useEmbed();
   const isLightBackground = useIsLightBackground();
-  const [isLoading, setIsLoading] = useState15(false);
-  const [error, setError] = useState15();
-  const [showPaymentForm, setShowPaymentForm] = useState15(false);
-  const [stripe, setStripe] = useState15(null);
-  const [setupIntent, setSetupIntent] = useState15();
-  const [showDifferentPaymentMethods, setShowDifferentPaymentMethods] = useState15(false);
-  const [paymentMethod, setPaymentMethod] = useState15(data.subscription?.paymentMethod || data.company?.defaultPaymentMethod);
-  const monthsToExpiration = useMemo14(() => {
+  const [isLoading, setIsLoading] = useState16(false);
+  const [error, setError] = useState16();
+  const [showPaymentForm, setShowPaymentForm] = useState16(false);
+  const [stripe, setStripe] = useState16(null);
+  const [setupIntent, setSetupIntent] = useState16();
+  const [showDifferentPaymentMethods, setShowDifferentPaymentMethods] = useState16(false);
+  const [paymentMethod, setPaymentMethod] = useState16(data.subscription?.paymentMethod || data.company?.defaultPaymentMethod);
+  const monthsToExpiration = useMemo15(() => {
     let expiration;
     if (typeof paymentMethod?.cardExpYear === "number" && typeof paymentMethod?.cardExpMonth === "number") {
       const today = /* @__PURE__ */ new Date();
@@ -23558,7 +23608,7 @@ var PaymentMethodDetails = ({
     }
     return expiration;
   }, [paymentMethod?.cardExpYear, paymentMethod?.cardExpMonth]);
-  const createSetupIntent = useCallback10(async () => {
+  const createSetupIntent = useCallback11(async () => {
     if (!api || !data.component?.id) {
       return;
     }
@@ -23577,7 +23627,7 @@ var PaymentMethodDetails = ({
       setIsLoading(false);
     }
   }, [t2, api, data.component?.id]);
-  const updatePaymentMethod = useCallback10(
+  const updatePaymentMethod = useCallback11(
     async (externalId) => {
       if (!api || !externalId) {
         return;
@@ -23626,7 +23676,7 @@ var PaymentMethodDetails = ({
     },
     [api, data, setData, setPaymentMethodId, t2]
   );
-  const deletePaymentMethod = useCallback10(
+  const deletePaymentMethod = useCallback11(
     async (id) => {
       if (!api || !id) {
         return;
@@ -23795,7 +23845,7 @@ var PaymentMethodDetails = ({
                 },
                 paymentMethod2.id
               )) }),
-              (!setupIntent || !paymentMethod || showDifferentPaymentMethods) && /* @__PURE__ */ jsx34(Button, { onClick: createSetupIntent, $size: "lg", children: t2("Add new payment method") })
+              (!setupIntent || !paymentMethod || showDifferentPaymentMethods) && /* @__PURE__ */ jsx34(Button, { onClick: createSetupIntent, $size: "lg", $fullWidth: true, children: t2("Add new payment method") })
             ] })
           ] }),
           !isLoading && error && /* @__PURE__ */ jsx34(Box, { children: /* @__PURE__ */ jsx34(
@@ -23815,7 +23865,7 @@ var PaymentMethodDetails = ({
 };
 
 // src/components/elements/plan-manager/PlanManager.tsx
-import { forwardRef as forwardRef11, useMemo as useMemo15 } from "react";
+import { forwardRef as forwardRef12, useMemo as useMemo16 } from "react";
 import { Fragment as Fragment15, jsx as jsx35, jsxs as jsxs27 } from "react/jsx-runtime";
 var resolveDesignProps7 = (props) => {
   return {
@@ -23845,7 +23895,7 @@ var resolveDesignProps7 = (props) => {
     }
   };
 };
-var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) => {
+var PlanManager = forwardRef12(({ children, className, portal, ...rest }, ref) => {
   const props = resolveDesignProps7(rest);
   const theme = nt();
   const { t: t2 } = useTranslation();
@@ -23871,7 +23921,7 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
     []
   );
   const billingSubscription = data.company?.billingSubscription;
-  const trialEndDays = useMemo15(() => {
+  const trialEndDays = useMemo16(() => {
     const trialEnd = billingSubscription?.trialEnd;
     const trialEndDate = trialEnd ? new Date(trialEnd * 1e3) : /* @__PURE__ */ new Date();
     const todayDate = /* @__PURE__ */ new Date();
@@ -24143,6 +24193,7 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
               },
               $size: props.callToAction.buttonSize,
               $color: props.callToAction.buttonStyle,
+              $fullWidth: true,
               children: t2("Change plan")
             }
           )
@@ -24154,7 +24205,7 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
 PlanManager.displayName = "PlanManager";
 
 // src/components/elements/pricing-table/PricingTable.tsx
-import { forwardRef as forwardRef12, useState as useState16 } from "react";
+import { forwardRef as forwardRef13, useState as useState17 } from "react";
 import { Fragment as Fragment16, jsx as jsx36, jsxs as jsxs28 } from "react/jsx-runtime";
 var resolveDesignProps8 = (props) => {
   return {
@@ -24195,18 +24246,18 @@ var resolveDesignProps8 = (props) => {
     }
   };
 };
-var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
+var PricingTable = forwardRef13(({ 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] = useState16(
+  const [selectedPeriod, setSelectedPeriod] = useState17(
     () => data.company?.plan?.planPeriod || "month"
   );
   const { plans, addOns, periods } = useAvailablePlans(selectedPeriod);
   const isLightBackground = useIsLightBackground();
-  const [entitlementCounts, setEntitlementCounts] = useState16(
+  const [entitlementCounts, setEntitlementCounts] = useState17(
     () => plans.reduce(
       (acc, plan) => {
         acc[plan.id] = {
@@ -24660,6 +24711,7 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                                   $color: props.downgrade.buttonStyle,
                                   $variant: "outline"
                                 },
+                                $fullWidth: true,
                                 children: plan.custom ? /* @__PURE__ */ jsx36(
                                   ButtonLink,
                                   {
@@ -24670,12 +24722,12 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                                 ) : !plan.valid ? /* @__PURE__ */ jsx36(
                                   Tooltip,
                                   {
-                                    trigger: t2("Over usage limit"),
-                                    content: t2(
+                                    trigger: /* @__PURE__ */ jsx36(Text, { children: t2("Over usage limit") }),
+                                    content: /* @__PURE__ */ jsx36(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")
                               }
                             )
                           ]
@@ -24897,6 +24949,7 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                                 $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")
                               }
                             )
@@ -24918,7 +24971,7 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
 PricingTable.displayName = "PricingTable";
 
 // src/components/elements/text/Text.tsx
-import { forwardRef as forwardRef13 } from "react";
+import { forwardRef as forwardRef14 } from "react";
 import { jsx as jsx37 } from "react/jsx-runtime";
 var resolveDesignProps9 = (props) => {
   return {
@@ -24929,7 +24982,7 @@ var resolveDesignProps9 = (props) => {
     }
   };
 };
-var TextElement = forwardRef13(({ children, className, ...rest }, ref) => {
+var TextElement = forwardRef14(({ children, className, ...rest }, ref) => {
   const props = resolveDesignProps9(rest);
   const theme = nt();
   return /* @__PURE__ */ jsx37(Element, { as: Flex, ref, className, children: /* @__PURE__ */ jsx37(
@@ -24948,7 +25001,7 @@ var TextElement = forwardRef13(({ children, className, ...rest }, ref) => {
 TextElement.displayName = "Text";
 
 // src/components/elements/unsubscribe-button/UnsubscribeButton.tsx
-import { forwardRef as forwardRef14 } from "react";
+import { forwardRef as forwardRef15 } from "react";
 import { jsx as jsx38 } from "react/jsx-runtime";
 var resolveDesignProps10 = (props) => {
   return {
@@ -24961,7 +25014,7 @@ var resolveDesignProps10 = (props) => {
     }
   };
 };
-var UnsubscribeButton = forwardRef14(({ children, className, ...rest }, ref) => {
+var UnsubscribeButton = forwardRef15(({ children, className, ...rest }, ref) => {
   const props = resolveDesignProps10(rest);
   const { t: t2 } = useTranslation();
   const { data, setLayout } = useEmbed();
@@ -25009,8 +25062,22 @@ var UnsubscribeButton = forwardRef14(({ children, className, ...rest }, ref) =>
 UnsubscribeButton.displayName = "UnsubscribeButton";
 
 // src/components/elements/upcoming-bill/UpcomingBill.tsx
-import { forwardRef as forwardRef15, useMemo as useMemo16 } from "react";
-import { Fragment as Fragment17, jsx as jsx39, jsxs as jsxs29 } from "react/jsx-runtime";
+import { forwardRef as forwardRef16, useCallback as useCallback12, useEffect as useEffect7, useMemo as useMemo17, useState as useState18 } from "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
+import { jsx as jsx39, jsxs as jsxs29 } from "react/jsx-runtime";
 function resolveDesignProps11(props) {
   return {
     header: {
@@ -25029,136 +25096,176 @@ function resolveDesignProps11(props) {
     }
   };
 }
-var UpcomingBill = forwardRef15(({ className, ...rest }, ref) => {
+var UpcomingBill = forwardRef16(({ 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 } = useMemo16(() => {
-    const discounts2 = (data.subscription?.discounts || []).map((discount) => ({
-      amountOff: discount.amountOff,
+  const [isLoading, setIsLoading] = useState18(false);
+  const [error, setError] = useState18();
+  const [upcomingInvoice, setUpcomingInvoice] = useState18();
+  const discounts = useMemo17(() => {
+    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__ */ jsx39(
-    Element,
-    {
-      as: Flex,
-      ref,
-      className,
-      $flexDirection: "column",
-      $gap: "1rem",
-      children: upcomingInvoice ? /* @__PURE__ */ jsxs29(Fragment17, { children: [
-        props.header.isVisible && upcomingInvoice.dueDate && /* @__PURE__ */ jsx39(Flex, { $justifyContent: "space-between", $alignItems: "center", children: /* @__PURE__ */ jsxs29(
-          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__ */ jsxs29(Flex, { $justifyContent: "space-between", $alignItems: "start", $gap: "1rem", children: [
-          props.price.isVisible && /* @__PURE__ */ jsx39(Flex, { $alignItems: "end", $flexGrow: "1", children: /* @__PURE__ */ jsx39(
-            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__ */ jsx39(Box, { $lineHeight: 1.15, $maxWidth: "10rem", $textAlign: "right", children: /* @__PURE__ */ jsx39(
-            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__ */ jsxs29(Flex, { $justifyContent: "space-between", $alignItems: "center", children: [
-          /* @__PURE__ */ jsx39(Box, { children: /* @__PURE__ */ jsx39(
-            Text,
+  }, [data.subscription]);
+  const loadInvoice = useCallback12(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]);
+  useEffect7(() => {
+    loadInvoice();
+  }, [loadInvoice]);
+  return /* @__PURE__ */ jsxs29(Element, { ref, className, children: [
+    /* @__PURE__ */ jsx39(Flex, { as: Container4, $justifyContent: "center", $alignItems: "center", children: /* @__PURE__ */ jsx39(Loader, { $color: theme.primary, $isLoading: isLoading }) }),
+    error ? /* @__PURE__ */ jsxs29(
+      Flex,
+      {
+        as: Container4,
+        $flexDirection: "column",
+        $justifyContent: "center",
+        $alignItems: "center",
+        $gap: "1rem",
+        children: [
+          /* @__PURE__ */ jsx39(Text, { $weight: 500, $color: "#DB6669", children: t2("There was a problem retrieving your upcoming invoice.") }),
+          /* @__PURE__ */ jsx39(
+            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__ */ jsx39(Box, { children: discounts.map((discount) => /* @__PURE__ */ jsxs29(
-            Flex,
-            {
-              $alignItems: "center",
-              $gap: "0.5rem",
-              children: [
-                /* @__PURE__ */ jsx39(
-                  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__ */ jsx39(
-                      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__ */ jsx39(Box, { children: /* @__PURE__ */ jsx39(
-                  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__ */ jsx39(Text, { display: "heading2", children: t2("No upcoming invoice") })
-    }
-  );
+          )
+        ]
+      }
+    ) : !isLoading && /* @__PURE__ */ jsx39(Container4, { children: upcomingInvoice ? /* @__PURE__ */ jsxs29(Flex, { $flexDirection: "column", $gap: "1rem", children: [
+      props.header.isVisible && upcomingInvoice.dueDate && /* @__PURE__ */ jsxs29(Text, { display: props.header.fontStyle, children: [
+        props.header.prefix,
+        " ",
+        toPrettyDate(upcomingInvoice.dueDate)
+      ] }),
+      /* @__PURE__ */ jsxs29(
+        Flex,
+        {
+          $justifyContent: "space-between",
+          $alignItems: "start",
+          $gap: "1rem",
+          children: [
+            props.price.isVisible && /* @__PURE__ */ jsx39(Text, { display: props.price.fontStyle, $leading: 1, children: formatCurrency(
+              upcomingInvoice.amountDue,
+              upcomingInvoice.currency
+            ) }),
+            /* @__PURE__ */ jsx39(Box, { $maxWidth: "10rem", $textAlign: "right", children: /* @__PURE__ */ jsx39(Text, { display: props.contractEndDate.fontStyle, children: t2("Estimated bill.") }) })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs29(
+        Flex,
+        {
+          $justifyContent: "space-between",
+          $alignItems: "center",
+          $gap: "1rem",
+          children: [
+            /* @__PURE__ */ jsx39(Text, { $weight: 600, children: t2("Remaining balance") }),
+            /* @__PURE__ */ jsx39(Text, { children: formatCurrency(5e3, upcomingInvoice.currency) })
+          ]
+        }
+      ),
+      discounts.length > 0 && /* @__PURE__ */ jsxs29(
+        Flex,
+        {
+          $justifyContent: "space-between",
+          $alignItems: "start",
+          $gap: "1rem",
+          children: [
+            /* @__PURE__ */ jsx39(Text, { $weight: 600, children: t2("Discount") }),
+            /* @__PURE__ */ jsx39(
+              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__ */ jsxs29(
+                          Flex,
+                          {
+                            $alignItems: "center",
+                            $gap: "0.5rem",
+                            children: [
+                              /* @__PURE__ */ jsx39(
+                                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__ */ jsx39(
+                                    Text,
+                                    {
+                                      $size: 0.75 * theme.typography.text.fontSize,
+                                      children: discount.customerFacingCode
+                                    }
+                                  )
+                                }
+                              ),
+                              /* @__PURE__ */ jsx39(Box, { children: /* @__PURE__ */ jsx39(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__ */ jsx39(Text, { display: "heading2", children: t2("No upcoming invoice") }) })
+  ] });
 });
 UpcomingBill.displayName = "UpcomingBill";
 
 // src/components/embed/ComponentTree.tsx
-import { useEffect as useEffect7, useState as useState17 } from "react";
+import { useEffect as useEffect8, useState as useState19 } from "react";
 
 // src/components/embed/renderer.ts
 import { createElement as createElement5 } from "react";
@@ -25209,7 +25316,7 @@ function createRenderer(options2) {
 }
 
 // src/components/embed/ComponentTree.tsx
-import { Fragment as Fragment18, jsx as jsx40, jsxs as jsxs30 } from "react/jsx-runtime";
+import { Fragment as Fragment17, jsx as jsx40, jsxs as jsxs30 } from "react/jsx-runtime";
 var Loading = () => {
   const theme = nt();
   return /* @__PURE__ */ jsx40(
@@ -25265,8 +25372,8 @@ var Error2 = ({ message }) => {
 };
 var ComponentTree = () => {
   const { error, nodes, isPending } = useEmbed();
-  const [children, setChildren] = useState17(/* @__PURE__ */ jsx40(Loading, {}));
-  useEffect7(() => {
+  const [children, setChildren] = useState19(/* @__PURE__ */ jsx40(Loading, {}));
+  useEffect8(() => {
     const renderer = createRenderer();
     setChildren(nodes.map(renderer));
   }, [nodes]);
@@ -25277,7 +25384,7 @@ var ComponentTree = () => {
   if (isPending) {
     return /* @__PURE__ */ jsx40(Loading, {});
   }
-  return /* @__PURE__ */ jsx40(Fragment18, { children });
+  return /* @__PURE__ */ jsx40(Fragment17, { children });
 };
 
 // src/components/embed/Embed.tsx
@@ -25351,6 +25458,7 @@ export {
   useEmbed,
   useIsLightBackground,
   usePrevious2 as usePrevious,
+  useRequest,
   useTrialEnd,
   useWrapChildren
 };