@schematichq/schematic-components 1.1.0 → 1.1.1

package/dist/schematic-components.cjs.js

@@ -1900,15 +1900,21 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/components/elements/button/Button.tsx
-var import_react38 = require("react");
+var import_react39 = require("react");
 
 // src/components/layout/card/Card.tsx
-var import_react22 = require("react");
+var import_react23 = require("react");
 
 // src/const/components.ts
 var VISIBLE_ENTITLEMENT_COUNT = 4;
 var MAX_VISIBLE_INVOICE_COUNT = 12;
 
+// src/const/date.ts
+var SECONDS_IN_MS = 1e3;
+var MINUTES_IN_MS = SECONDS_IN_MS * 60;
+var HOURS_IN_MS = MINUTES_IN_MS * 60;
+var DAYS_IN_MS = HOURS_IN_MS * 24;
+
 // src/const/debounce.ts
 var debounceOptions = {
   leading: true,
@@ -6746,7 +6752,7 @@ var en_default = {
     "There was a problem retrieving your invoices.": "There was a problem retrieving your invoices.",
     "Tiers apply progressively as quantity increases.": "Tiers apply progressively as quantity increases.",
     Total: "Total",
-    "Trial ends in": "Trial ends in {{days}} days",
+    "Trial ends in": "Trial ends in {{amount}} {{units}}",
     "Trial in progress": "Trial in progress",
     "Trial selected": "Trial selected",
     Trial: "Trial",
@@ -10143,7 +10149,7 @@ var EmbedProvider = ({
   });
   const customHeaders = (0, import_react12.useMemo)(
     () => ({
-      "X-Schematic-Components-Version": "1.1.0",
+      "X-Schematic-Components-Version": "1.1.1",
       "X-Schematic-Session-ID": sessionIdRef.current
     }),
     []
@@ -10538,26 +10544,49 @@ function useRequest(fn) {
 }
 
 // src/hooks/useTrialEnd.ts
+var import_react17 = require("react");
 function useTrialEnd() {
+  const { t: t2 } = useTranslation();
   const { data } = useEmbed();
-  const billingSubscription = isCheckoutData(data) ? data.company?.billingSubscription : void 0;
-  const trialEndDate = typeof billingSubscription?.trialEnd === "number" ? new Date(billingSubscription.trialEnd * 1e3) : void 0;
-  if (trialEndDate) {
-    const todayDate = /* @__PURE__ */ new Date();
-    const trialEndDays = Math.floor(
-      (trialEndDate.getTime() - todayDate.getTime()) / (1e3 * 60 * 60 * 24)
-    );
-    return trialEndDays;
-  }
+  const { endDate, formatted } = (0, import_react17.useMemo)(() => {
+    const billingSubscription = isCheckoutData(data) ? data.company?.billingSubscription : void 0;
+    const end = typeof billingSubscription?.trialEnd === "number" ? new Date(billingSubscription.trialEnd * 1e3) : void 0;
+    let formatted2;
+    if (end) {
+      const today = /* @__PURE__ */ new Date();
+      const difference = end.getTime() - today.getTime();
+      let amount;
+      let unit;
+      if (difference >= DAYS_IN_MS) {
+        amount = Math.floor(difference / DAYS_IN_MS);
+        unit = "day";
+      } else if (difference >= HOURS_IN_MS) {
+        amount = Math.floor(difference / HOURS_IN_MS);
+        unit = "hour";
+      } else if (difference >= MINUTES_IN_MS) {
+        amount = Math.floor(difference / MINUTES_IN_MS);
+        unit = "minute";
+      } else {
+        amount = Math.floor(difference / SECONDS_IN_MS);
+        unit = "second";
+      }
+      formatted2 = t2("Trial ends in", {
+        amount,
+        units: pluralize(unit, amount)
+      });
+    }
+    return { endDate: end, formatted: formatted2 };
+  }, [t2, data]);
+  return { endDate, formatted };
 }
 
 // src/hooks/useWrapChildren.ts
-var import_react17 = require("react");
+var import_react18 = require("react");
 function useWrapChildren(elements) {
-  const [shouldWrap, setShouldWrap] = (0, import_react17.useState)(
+  const [shouldWrap, setShouldWrap] = (0, import_react18.useState)(
     () => new Array(elements.length).fill(false)
   );
-  (0, import_react17.useLayoutEffect)(() => {
+  (0, import_react18.useLayoutEffect)(() => {
     const rowShouldWrap = (parent) => [...parent.children].some(
       (el) => el instanceof HTMLElement && el.previousElementSibling instanceof HTMLElement && el.offsetLeft <= el.previousElementSibling.offsetLeft
     );
@@ -11068,7 +11097,7 @@ var Input = dt.input(({ theme, $size = "md", $variant = "filled" }) => {
 });
 
 // src/components/ui/modal/Modal.tsx
-var import_react18 = require("react");
+var import_react19 = require("react");
 
 // src/components/ui/modal/styles.ts
 var Overlay = dt(Box)`
@@ -11133,12 +11162,12 @@ var Modal2 = ({
 }) => {
   const { setLayout } = useEmbed();
   const isLightBackground = useIsLightBackground();
-  const ref = (0, import_react18.useRef)(null);
-  const handleClose = (0, import_react18.useCallback)(() => {
+  const ref = (0, import_react19.useRef)(null);
+  const handleClose = (0, import_react19.useCallback)(() => {
     setLayout("portal");
     onClose?.();
   }, [setLayout, onClose]);
-  (0, import_react18.useLayoutEffect)(() => {
+  (0, import_react19.useLayoutEffect)(() => {
     contentRef?.current?.focus({ preventScroll: true });
   }, [contentRef]);
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Container, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
@@ -11168,7 +11197,7 @@ var Modal2 = ({
 Modal2.displayName = "Modal";
 
 // src/components/ui/modal/ModalHeader.tsx
-var import_react19 = require("react");
+var import_react20 = require("react");
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var ModalHeader = ({
   children,
@@ -11177,7 +11206,7 @@ var ModalHeader = ({
 }) => {
   const { settings, setLayout } = useEmbed();
   const isLightBackground = useIsLightBackground();
-  const handleClose = (0, import_react19.useCallback)(() => {
+  const handleClose = (0, import_react20.useCallback)(() => {
     setLayout("portal");
     onClose?.();
   }, [setLayout, onClose]);
@@ -11234,7 +11263,7 @@ var ModalHeader = ({
 };
 
 // src/components/ui/progress-bar/ProgressBar.tsx
-var import_react20 = require("react");
+var import_react21 = require("react");
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var progressColorMap = [
   "blue",
@@ -11244,7 +11273,7 @@ var progressColorMap = [
   "red",
   "red"
 ];
-var ProgressBar = (0, import_react20.forwardRef)(
+var ProgressBar = (0, import_react21.forwardRef)(
   ({
     progress,
     value,
@@ -11289,7 +11318,7 @@ var ProgressBar = (0, import_react20.forwardRef)(
               )
             }
           ),
-          total && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(Text, { $size: 14, $weight: 500, children: [
+          total > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(Text, { $size: 14, $weight: 500, children: [
             formatNumber(value),
             "/",
             formatNumber(total)
@@ -11366,7 +11395,7 @@ var Text = dt.span.withConfig({
 
 // src/components/ui/tooltip/Tooltip.tsx
 var import_debounce2 = __toESM(require_debounce());
-var import_react21 = require("react");
+var import_react22 = require("react");
 var import_react_dom = require("react-dom");
 
 // src/components/ui/tooltip/styles.ts
@@ -11520,10 +11549,10 @@ var Tooltip = ({
   position: position2 = "top",
   ...rest
 }) => {
-  const ref = (0, import_react21.useRef)(null);
-  const [show, setShow] = (0, import_react21.useState)(false);
-  const [coords2, setCoords] = (0, import_react21.useState)({ x: 0, y: 0 });
-  const updateCoords = (0, import_react21.useCallback)(() => {
+  const ref = (0, import_react22.useRef)(null);
+  const [show, setShow] = (0, import_react22.useState)(false);
+  const [coords2, setCoords] = (0, import_react22.useState)({ x: 0, y: 0 });
+  const updateCoords = (0, import_react22.useCallback)(() => {
     if (ref.current) {
       const { top: offsetTop, left: offsetLeft } = document.body.getBoundingClientRect();
       const rect = ref.current.getBoundingClientRect();
@@ -11541,14 +11570,14 @@ var Tooltip = ({
       });
     }
   }, [position2]);
-  (0, import_react21.useLayoutEffect)(() => {
+  (0, import_react22.useLayoutEffect)(() => {
     const handleResize = (0, import_debounce2.default)(updateCoords, EVENT_DEBOUNCE_TIMEOUT);
     window.addEventListener("resize", handleResize);
     return () => {
       window.removeEventListener("resize", handleResize);
     };
   }, [updateCoords]);
-  (0, import_react21.useLayoutEffect)(() => {
+  (0, import_react22.useLayoutEffect)(() => {
     updateCoords();
   }, [updateCoords, show]);
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
@@ -11610,7 +11639,7 @@ var StyledCard = dt.div(({ theme }) => {
 
 // src/components/layout/card/Card.tsx
 var import_jsx_runtime8 = require("react/jsx-runtime");
-var Card = (0, import_react22.forwardRef)(
+var Card = (0, import_react23.forwardRef)(
   ({ children, className }, ref) => {
     const { settings, isPending } = useEmbed();
     return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(StyledCard, { ref, className, children: [
@@ -11638,7 +11667,7 @@ var Card = (0, import_react22.forwardRef)(
 Card.displayName = "Card";
 
 // src/components/layout/column/Column.tsx
-var import_react23 = require("react");
+var import_react24 = require("react");
 
 // src/components/layout/column/styles.ts
 var StyledColumn = dt.div`
@@ -11647,15 +11676,15 @@ var StyledColumn = dt.div`
 
 // src/components/layout/column/Column.tsx
 var import_jsx_runtime9 = require("react/jsx-runtime");
-var Column = (0, import_react23.forwardRef)(
+var Column = (0, import_react24.forwardRef)(
   ({ children, basis, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(StyledColumn, { ref, ...props, children: import_react23.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_react24.Children.count(children) > 0 ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Card, { children }) : children });
   }
 );
 Column.displayName = "Column";
 
 // src/components/layout/root/Root.tsx
-var import_react24 = require("react");
+var import_react25 = require("react");
 
 // src/components/layout/root/styles.ts
 var Container = dt.div`
@@ -11692,7 +11721,7 @@ var Container = dt.div`
 
 // src/components/layout/root/Root.tsx
 var import_jsx_runtime10 = require("react/jsx-runtime");
-var Root = (0, import_react24.forwardRef)(
+var Root = (0, import_react25.forwardRef)(
   ({ data, settings, ...props }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Container, { ref, ...props });
   }
@@ -11701,14 +11730,14 @@ Root.displayName = "Root";
 
 // src/components/layout/viewport/Viewport.tsx
 var import_debounce3 = __toESM(require_debounce());
-var import_react37 = require("react");
+var import_react38 = require("react");
 var import_react_dom2 = require("react-dom");
 
 // src/components/shared/checkout-dialog/CheckoutDialog.tsx
-var import_react29 = require("react");
+var import_react30 = require("react");
 
 // src/components/shared/sidebar/Sidebar.tsx
-var import_react26 = require("react");
+var import_react27 = require("react");
 
 // src/components/shared/sidebar/EntitlementRow.tsx
 var import_jsx_runtime11 = require("react/jsx-runtime");
@@ -11782,7 +11811,7 @@ var EntitlementRow = (entitlement) => {
 };
 
 // src/components/shared/sidebar/Proration.tsx
-var import_react25 = require("react");
+var import_react26 = require("react");
 var import_jsx_runtime12 = require("react/jsx-runtime");
 var Proration = ({
   currency,
@@ -11790,7 +11819,7 @@ var Proration = ({
   selectedPlan
 }) => {
   const { t: t2 } = useTranslation();
-  const [open, setOpen] = (0, import_react25.useState)(false);
+  const [open, setOpen] = (0, import_react26.useState)(false);
   const toggle = (e2) => {
     e2.preventDefault();
     e2.stopPropagation();
@@ -12038,7 +12067,7 @@ var Sidebar = ({
     billingSubscription,
     paymentMethod,
     trialPaymentMethodRequired
-  } = (0, import_react26.useMemo)(() => {
+  } = (0, import_react27.useMemo)(() => {
     if (isCheckoutData(data)) {
       const currentEntitlements2 = data.featureUsage?.features || [];
       return {
@@ -12076,7 +12105,7 @@ var Sidebar = ({
       trialPaymentMethodRequired: false
     };
   }, [data, planPeriod]);
-  const { payInAdvanceEntitlements } = (0, import_react26.useMemo)(() => {
+  const { payInAdvanceEntitlements } = (0, import_react27.useMemo)(() => {
     const payAsYouGoEntitlements = [];
     const payInAdvanceEntitlements2 = usageBasedEntitlements.filter(
       (entitlement) => {
@@ -12088,7 +12117,7 @@ var Sidebar = ({
     );
     return { payAsYouGoEntitlements, payInAdvanceEntitlements: payInAdvanceEntitlements2 };
   }, [usageBasedEntitlements]);
-  const subscriptionPrice = (0, import_react26.useMemo)(() => {
+  const subscriptionPrice = (0, import_react27.useMemo)(() => {
     let planPrice;
     let currency;
     if (selectedPlan) {
@@ -12116,7 +12145,7 @@ var Sidebar = ({
     total += payInAdvanceCost;
     return formatCurrency(total, currency);
   }, [selectedPlan, currentPlan, planPeriod, addOns, payInAdvanceEntitlements]);
-  const { amountOff, dueNow, newCharges, percentOff, periodStart, proration } = (0, import_react26.useMemo)(() => {
+  const { amountOff, dueNow, newCharges, percentOff, periodStart, proration } = (0, import_react27.useMemo)(() => {
     return {
       amountOff: charges?.amountOff ?? 0,
       dueNow: charges?.dueNow ?? 0,
@@ -12126,7 +12155,7 @@ var Sidebar = ({
       proration: charges?.proration ?? 0
     };
   }, [charges]);
-  const handleCheckout = (0, import_react26.useCallback)(async () => {
+  const handleCheckout = (0, import_react27.useCallback)(async () => {
     const planId = selectedPlan?.id;
     const priceId = (planPeriod === "year" ? selectedPlan?.yearlyPrice : selectedPlan?.monthlyPrice)?.id;
     try {
@@ -12191,7 +12220,7 @@ var Sidebar = ({
     willTrialWithoutPaymentMethod,
     promoCode
   ]);
-  const handleUnsubscribe = (0, import_react26.useCallback)(async () => {
+  const handleUnsubscribe = (0, import_react27.useCallback)(async () => {
     try {
       setError(void 0);
       setIsLoading(true);
@@ -12205,7 +12234,7 @@ var Sidebar = ({
     }
   }, [t2, unsubscribe, setError, setIsLoading, setLayout]);
   const selectedAddOns = addOns.filter((addOn) => addOn.isSelected);
-  const updatedUsageBasedEntitlements = (0, import_react26.useMemo)(() => {
+  const updatedUsageBasedEntitlements = (0, import_react27.useMemo)(() => {
     const changedUsageBasedEntitlements = [];
     const addedUsageBasedEntitlements = selectedPlan ? usageBasedEntitlements.reduce(
       (acc, selected) => {
@@ -12840,7 +12869,7 @@ var AddOns = ({ addOns, toggle, isLoading, period }) => {
 };
 
 // src/components/shared/checkout-dialog/Checkout.tsx
-var import_react27 = require("react");
+var import_react28 = require("react");
 var import_jsx_runtime16 = require("react/jsx-runtime");
 var Checkout = ({
   isPaymentMethodRequired,
@@ -12849,7 +12878,7 @@ var Checkout = ({
 }) => {
   const { t: t2 } = useTranslation();
   const isLightBackground = useIsLightBackground();
-  const [discount, setDiscount] = (0, import_react27.useState)("");
+  const [discount, setDiscount] = (0, import_react28.useState)("");
   if (!isPaymentMethodRequired) {
     return null;
   }
@@ -12988,12 +13017,12 @@ var Navigation = ({
 };
 
 // src/components/shared/checkout-dialog/Plan.tsx
-var import_react28 = require("react");
+var import_react29 = require("react");
 var import_jsx_runtime18 = require("react/jsx-runtime");
 var Selected = ({ isCurrent = false, isTrial = false }) => {
   const { t: t2 } = useTranslation();
   const { settings } = useEmbed();
-  const text = (0, import_react28.useMemo)(() => {
+  const text = (0, import_react29.useMemo)(() => {
     if (isCurrent) {
       return isTrial ? t2("Trial in progress") : t2("Current plan");
     }
@@ -13029,7 +13058,7 @@ var PlanButtonGroup = ({
 }) => {
   const { t: t2 } = useTranslation();
   const { data } = useEmbed();
-  const { isCurrentPlan, isValidPlan, isTrialing } = (0, import_react28.useMemo)(() => {
+  const { isCurrentPlan, isValidPlan, isTrialing } = (0, import_react29.useMemo)(() => {
     if (isCheckoutData(data)) {
       return {
         isCurrentPlan: data.company?.plan?.id === plan.id,
@@ -13139,10 +13168,10 @@ var Plan = ({
   const { t: t2 } = useTranslation();
   const { data, settings } = useEmbed();
   const isLightBackground = useIsLightBackground();
-  const [entitlementCounts, setEntitlementCounts] = (0, import_react28.useState)(
+  const [entitlementCounts, setEntitlementCounts] = (0, import_react29.useState)(
     () => plans.reduce(entitlementCountsReducer, {})
   );
-  const isTrialing = (0, import_react28.useMemo)(
+  const isTrialing = (0, import_react29.useMemo)(
     () => isCheckoutData(data) && data.subscription?.status === "trialing",
     [data]
   );
@@ -13161,7 +13190,7 @@ var Plan = ({
       return prev2;
     });
   };
-  (0, import_react28.useEffect)(() => {
+  (0, import_react29.useEffect)(() => {
     setEntitlementCounts(plans.reduce(entitlementCountsReducer, {}));
   }, [plans]);
   const cardPadding = settings.theme.card.padding / TEXT_BASE_SIZE;
@@ -13631,29 +13660,29 @@ var CheckoutDialog = ({ top = 0 }) => {
   const { t: t2 } = useTranslation();
   const { data, checkoutState, previewCheckout } = useEmbed();
   const isLightBackground = useIsLightBackground();
-  const contentRef = (0, import_react29.useRef)(null);
-  const checkoutRef = (0, import_react29.useRef)(null);
-  const [charges, setCharges] = (0, import_react29.useState)();
-  const [paymentMethodId, setPaymentMethodId] = (0, import_react29.useState)(
+  const contentRef = (0, import_react30.useRef)(null);
+  const checkoutRef = (0, import_react30.useRef)(null);
+  const [charges, setCharges] = (0, import_react30.useState)();
+  const [paymentMethodId, setPaymentMethodId] = (0, import_react30.useState)(
     () => {
       if (isCheckoutData(data)) {
         return (data.subscription?.paymentMethod || data.company?.defaultPaymentMethod)?.externalId;
       }
     }
   );
-  const [isLoading, setIsLoading] = (0, import_react29.useState)(false);
-  const [error, setError] = (0, import_react29.useState)();
-  const currentPeriod = (0, import_react29.useMemo)(
+  const [isLoading, setIsLoading] = (0, import_react30.useState)(false);
+  const [error, setError] = (0, import_react30.useState)();
+  const currentPeriod = (0, import_react30.useMemo)(
     () => checkoutState?.period || isCheckoutData(data) && data.company?.plan?.planPeriod || "month",
     [data, checkoutState?.period]
   );
-  const [planPeriod, setPlanPeriod] = (0, import_react29.useState)(currentPeriod);
+  const [planPeriod, setPlanPeriod] = (0, import_react30.useState)(currentPeriod);
   const {
     plans: availablePlans,
     addOns: availableAddOns,
     periods: availablePeriods
   } = useAvailablePlans(planPeriod);
-  const { currentPlanId, currentEntitlements, trialPaymentMethodRequired } = (0, import_react29.useMemo)(() => {
+  const { currentPlanId, currentEntitlements, trialPaymentMethodRequired } = (0, import_react30.useMemo)(() => {
     if (isCheckoutData(data)) {
       return {
         currentPlanId: data.company?.plan?.id,
@@ -13667,7 +13696,7 @@ var CheckoutDialog = ({ top = 0 }) => {
       trialPaymentMethodRequired: false
     };
   }, [data]);
-  const [selectedPlan, setSelectedPlan] = (0, import_react29.useState)(
+  const [selectedPlan, setSelectedPlan] = (0, import_react30.useState)(
     () => {
       const currentSelectedPlan = availablePlans.find(
         (plan) => checkoutState?.planId ? plan.id === checkoutState.planId : isHydratedPlan(plan) && plan.current
@@ -13675,8 +13704,8 @@ var CheckoutDialog = ({ top = 0 }) => {
       return currentSelectedPlan;
     }
   );
-  const [shouldTrial, setShouldTrial] = (0, import_react29.useState)(false);
-  const [addOns, setAddOns] = (0, import_react29.useState)(() => {
+  const [shouldTrial, setShouldTrial] = (0, import_react30.useState)(false);
+  const [addOns, setAddOns] = (0, import_react30.useState)(() => {
     if (isCheckoutData(data)) {
       return availableAddOns.map((addOn) => ({
         ...addOn,
@@ -13687,7 +13716,7 @@ var CheckoutDialog = ({ top = 0 }) => {
     }
     return [];
   });
-  const [usageBasedEntitlements, setUsageBasedEntitlements] = (0, import_react29.useState)(
+  const [usageBasedEntitlements, setUsageBasedEntitlements] = (0, import_react30.useState)(
     () => (selectedPlan?.entitlements || []).reduce(
       createActiveUsageBasedEntitlementsReducer(
         currentEntitlements,
@@ -13696,20 +13725,20 @@ var CheckoutDialog = ({ top = 0 }) => {
       []
     )
   );
-  const payInAdvanceEntitlements = (0, import_react29.useMemo)(
+  const payInAdvanceEntitlements = (0, import_react30.useMemo)(
     () => usageBasedEntitlements.filter(
       (entitlement) => entitlement.priceBehavior === "pay_in_advance" /* PayInAdvance */
     ),
     [usageBasedEntitlements]
   );
-  const [promoCode, setPromoCode] = (0, import_react29.useState)(null);
-  const [isPaymentMethodRequired, setIsPaymentMethodRequired] = (0, import_react29.useState)(false);
-  const willTrialWithoutPaymentMethod = (0, import_react29.useMemo)(
+  const [promoCode, setPromoCode] = (0, import_react30.useState)(null);
+  const [isPaymentMethodRequired, setIsPaymentMethodRequired] = (0, import_react30.useState)(false);
+  const willTrialWithoutPaymentMethod = (0, import_react30.useMemo)(
     () => shouldTrial && !trialPaymentMethodRequired,
     [shouldTrial, trialPaymentMethodRequired]
   );
   const isSelectedPlanTrialable = isHydratedPlan(selectedPlan) && selectedPlan.isTrialable && selectedPlan.companyCanTrial;
-  const checkoutStages = (0, import_react29.useMemo)(() => {
+  const checkoutStages = (0, import_react30.useMemo)(() => {
     const stages = [];
     if (availablePlans) {
       stages.push({
@@ -13754,7 +13783,7 @@ var CheckoutDialog = ({ top = 0 }) => {
     isSelectedPlanTrialable,
     isPaymentMethodRequired
   ]);
-  const [checkoutStage, setCheckoutStage] = (0, import_react29.useState)(() => {
+  const [checkoutStage, setCheckoutStage] = (0, import_react30.useState)(() => {
     if (checkoutState?.addOnId) {
       return "addons";
     }
@@ -13766,7 +13795,7 @@ var CheckoutDialog = ({ top = 0 }) => {
     }
     return "plan";
   });
-  const handlePreviewCheckout = (0, import_react29.useCallback)(
+  const handlePreviewCheckout = (0, import_react30.useCallback)(
     async (updates) => {
       const period = updates.period || planPeriod;
       const plan = updates.plan || selectedPlan;
@@ -13862,7 +13891,7 @@ var CheckoutDialog = ({ top = 0 }) => {
       promoCode
     ]
   );
-  const selectPlan = (0, import_react29.useCallback)(
+  const selectPlan = (0, import_react30.useCallback)(
     (updates) => {
       const plan = updates.plan;
       const period = updates.period || planPeriod;
@@ -13913,7 +13942,7 @@ var CheckoutDialog = ({ top = 0 }) => {
       handlePreviewCheckout
     ]
   );
-  const changePlanPeriod = (0, import_react29.useCallback)(
+  const changePlanPeriod = (0, import_react30.useCallback)(
     (period) => {
       if (period !== planPeriod) {
         setPlanPeriod(period);
@@ -13922,7 +13951,7 @@ var CheckoutDialog = ({ top = 0 }) => {
     },
     [planPeriod, setPlanPeriod, handlePreviewCheckout]
   );
-  const toggleAddOn = (0, import_react29.useCallback)(
+  const toggleAddOn = (0, import_react30.useCallback)(
     (id) => {
       setAddOns((prev2) => {
         const updated = prev2.map((addOn) => ({
@@ -13935,7 +13964,7 @@ var CheckoutDialog = ({ top = 0 }) => {
     },
     [handlePreviewCheckout]
   );
-  const updateUsageBasedEntitlementQuantity = (0, import_react29.useCallback)(
+  const updateUsageBasedEntitlementQuantity = (0, import_react30.useCallback)(
     (id, updatedQuantity) => {
       setUsageBasedEntitlements((prev2) => {
         const updated = prev2.map(
@@ -13954,18 +13983,18 @@ var CheckoutDialog = ({ top = 0 }) => {
     },
     [handlePreviewCheckout]
   );
-  const updatePromoCode = (0, import_react29.useCallback)(
+  const updatePromoCode = (0, import_react30.useCallback)(
     async (code) => {
       handlePreviewCheckout({ promoCode: code });
     },
     [handlePreviewCheckout]
   );
-  (0, import_react29.useEffect)(() => {
+  (0, import_react30.useEffect)(() => {
     if (selectedPlan) {
       selectPlan({ plan: selectedPlan, period: currentPeriod });
     }
   }, []);
-  (0, import_react29.useEffect)(() => {
+  (0, import_react30.useEffect)(() => {
     setAddOns((prevAddOns) => {
       return availableAddOns.filter((availAddOn) => {
         if (!selectedPlan) {
@@ -13987,7 +14016,7 @@ var CheckoutDialog = ({ top = 0 }) => {
       });
     });
   }, [availableAddOns, data?.addOnCompatibilities, selectedPlan]);
-  (0, import_react29.useEffect)(() => {
+  (0, import_react30.useEffect)(() => {
     if (charges) {
       checkoutRef.current?.scrollTo({
         top: 0,
@@ -13996,7 +14025,7 @@ var CheckoutDialog = ({ top = 0 }) => {
       });
     }
   }, [charges]);
-  (0, import_react29.useLayoutEffect)(() => {
+  (0, import_react30.useLayoutEffect)(() => {
     contentRef.current?.scrollTo({
       top: 0,
       left: 0,
@@ -14171,11 +14200,11 @@ var CheckoutDialog = ({ top = 0 }) => {
 };
 
 // src/components/shared/payment-dialog/PaymentDialog.tsx
-var import_react30 = require("react");
+var import_react31 = require("react");
 var import_jsx_runtime21 = require("react/jsx-runtime");
 var PaymentDialog = ({ top = 0 }) => {
   const { t: t2 } = useTranslation();
-  const contentRef = (0, import_react30.useRef)(null);
+  const contentRef = (0, import_react31.useRef)(null);
   return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Modal2, { size: "md", top, contentRef, children: [
     /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ModalHeader, { bordered: true, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Text, { $size: 18, children: t2("Edit payment method") }) }),
     /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(PaymentMethodDetails, {})
@@ -14184,16 +14213,16 @@ var PaymentDialog = ({ top = 0 }) => {
 
 // src/components/shared/payment-form/PaymentForm.tsx
 var import_react_stripe_js = require("@stripe/react-stripe-js");
-var import_react31 = require("react");
+var import_react32 = require("react");
 var import_jsx_runtime22 = require("react/jsx-runtime");
 var PaymentForm = ({ onConfirm }) => {
   const { t: t2 } = useTranslation();
   const stripe = (0, import_react_stripe_js.useStripe)();
   const elements = (0, import_react_stripe_js.useElements)();
-  const [message, setMessage] = (0, import_react31.useState)();
-  const [isLoading, setIsLoading] = (0, import_react31.useState)(false);
-  const [isConfirmed, setIsConfirmed] = (0, import_react31.useState)(false);
-  const [isComplete, setIsComplete] = (0, import_react31.useState)(false);
+  const [message, setMessage] = (0, import_react32.useState)();
+  const [isLoading, setIsLoading] = (0, import_react32.useState)(false);
+  const [isConfirmed, setIsConfirmed] = (0, import_react32.useState)(false);
+  const [isComplete, setIsComplete] = (0, import_react32.useState)(false);
   const handleSubmit = async (event) => {
     event.preventDefault();
     if (!stripe || !elements) {
@@ -14264,7 +14293,7 @@ var PaymentForm = ({ onConfirm }) => {
 };
 
 // src/components/shared/period-toggle/PeriodToggle.tsx
-var import_react32 = require("react");
+var import_react33 = require("react");
 var import_jsx_runtime23 = require("react/jsx-runtime");
 var PeriodToggle = ({
   options: options2,
@@ -14275,7 +14304,7 @@ var PeriodToggle = ({
   const { t: t2 } = useTranslation();
   const { settings } = useEmbed();
   const isLightBackground = useIsLightBackground();
-  const savingsPercentage = (0, import_react32.useMemo)(() => {
+  const savingsPercentage = (0, import_react33.useMemo)(() => {
     if (selectedPlan) {
       const monthlyBillingPrice = getPlanPrice(selectedPlan, "month");
       const yearlyBillingPrice = getPlanPrice(selectedPlan, "year");
@@ -14355,10 +14384,10 @@ var PeriodToggle = ({
 };
 
 // src/components/shared/pricing-tiers-tooltip/PricingTiersTooltip.tsx
-var import_react34 = require("react");
+var import_react35 = require("react");
 
 // src/components/shared/pricing-tiers-tooltip/PriceText.tsx
-var import_react33 = require("react");
+var import_react34 = require("react");
 var import_jsx_runtime24 = require("react/jsx-runtime");
 var PriceText = ({
   feature,
@@ -14367,7 +14396,7 @@ var PriceText = ({
   flatAmount = 0,
   perUnitPrice = 0
 }) => {
-  const text = (0, import_react33.useMemo)(() => {
+  const text = (0, import_react34.useMemo)(() => {
     if (!flatAmount && perUnitPrice) {
       return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
         formatCurrency(perUnitPrice, currency),
@@ -14415,7 +14444,7 @@ var PricingTiersTooltip = ({
   const { t: t2 } = useTranslation();
   const { settings } = useEmbed();
   const isLightBackground = useIsLightBackground();
-  const tiers = (0, import_react34.useMemo)(() => {
+  const tiers = (0, import_react35.useMemo)(() => {
     let start = 1;
     return priceTiers.map((tier) => {
       const { upTo, ...rest } = tier;
@@ -14474,7 +14503,7 @@ var PricingTiersTooltip = ({
             index
           );
         }) }),
-        tiersMode && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
+        (tiersMode === "volume" /* Volume */ || tiersMode === "graduated" /* Graduated */) && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
             "hr",
             {
@@ -14488,7 +14517,7 @@ var PricingTiersTooltip = ({
           /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(Text, { children: [
             "\u2139\uFE0F",
             " ",
-            tiersMode === "volume" ? t2("Price by unit based on final tier reached.") : t2("Tiers apply progressively as quantity increases.")
+            tiersMode === "volume" /* Volume */ ? t2("Price by unit based on final tier reached.") : t2("Tiers apply progressively as quantity increases.")
           ] }) })
         ] })
       ] }),
@@ -14499,13 +14528,13 @@ var PricingTiersTooltip = ({
 };
 
 // src/components/shared/tiered-pricing-details/TieredPricingDetails.tsx
-var import_react35 = require("react");
+var import_react36 = require("react");
 var TieredPricingDetails = ({
   entitlement,
   period
 }) => {
   const { t: t2 } = useTranslation();
-  const { currency, flatAmount, perUnitPrice, upTo } = (0, import_react35.useMemo)(() => {
+  const { currency, flatAmount, perUnitPrice, upTo } = (0, import_react36.useMemo)(() => {
     const { currency: currency2, priceTier } = getEntitlementPrice(entitlement, period) || {};
     const { flatAmount: flatAmount2, perUnitPrice: perUnitPrice2, perUnitPriceDecimal, upTo: upTo2 } = priceTier?.[0] || {};
     return {
@@ -14553,15 +14582,15 @@ var TieredPricingDetails = ({
 };
 
 // src/components/shared/unsubscribe-dialog/UnsubscribeDialog.tsx
-var import_react36 = require("react");
+var import_react37 = require("react");
 var import_jsx_runtime26 = require("react/jsx-runtime");
 var UnsubscribeDialog = ({ top = 0 }) => {
   const { t: t2 } = useTranslation();
   const { data, setCheckoutState } = useEmbed();
-  const contentRef = (0, import_react36.useRef)(null);
-  const [error, setError] = (0, import_react36.useState)();
-  const [isLoading, setIsLoading] = (0, import_react36.useState)(false);
-  const { planPeriod, currentPlan, currentAddOns, featureUsage, cancelDate } = (0, import_react36.useMemo)(() => {
+  const contentRef = (0, import_react37.useRef)(null);
+  const [error, setError] = (0, import_react37.useState)();
+  const [isLoading, setIsLoading] = (0, import_react37.useState)(false);
+  const { planPeriod, currentPlan, currentAddOns, featureUsage, cancelDate } = (0, import_react37.useMemo)(() => {
     if (isCheckoutData(data)) {
       return {
         planPeriod: data.company?.plan?.planPeriod || "month",
@@ -14582,7 +14611,7 @@ var UnsubscribeDialog = ({ top = 0 }) => {
     };
   }, [data]);
   const { plans: availablePlans, addOns: availableAddOns } = useAvailablePlans(planPeriod);
-  const selectedPlan = (0, import_react36.useMemo)(
+  const selectedPlan = (0, import_react37.useMemo)(
     () => availablePlans.find((plan) => plan.id === currentPlan?.id),
     [currentPlan?.id, availablePlans]
   );
@@ -14591,7 +14620,7 @@ var UnsubscribeDialog = ({ top = 0 }) => {
     createActiveUsageBasedEntitlementsReducer(currentEntitlements, planPeriod),
     []
   );
-  const addOns = (0, import_react36.useMemo)(
+  const addOns = (0, import_react37.useMemo)(
     () => availableAddOns.map((available) => ({
       ...available,
       isSelected: currentAddOns.some((current) => available.id === current.id) ?? false
@@ -14628,9 +14657,9 @@ var UnsubscribeDialog = ({ top = 0 }) => {
                       "You will retain access to your plan until the end of the billing period, on"
                     ),
                     " ",
-                    cancelDate ? toPrettyDate(cancelDate, {
+                    toPrettyDate(cancelDate, {
                       month: "numeric"
-                    }) : ""
+                    })
                   ] })
                 ] }),
                 /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(Flex, { $flexDirection: "column", $flexWrap: "wrap", $gap: "0.5rem", children: [
@@ -14830,17 +14859,17 @@ var StyledViewport = dt.div.withConfig({
 
 // src/components/layout/viewport/Viewport.tsx
 var import_jsx_runtime29 = require("react/jsx-runtime");
-var Viewport = (0, import_react37.forwardRef)(
+var Viewport = (0, import_react38.forwardRef)(
   ({ children, portal, ...props }, ref) => {
     const { data, layout, settings } = useEmbed();
-    const [top, setTop] = (0, import_react37.useState)(0);
-    const { canCheckout, isBadgeVisible } = (0, import_react37.useMemo)(() => {
+    const [top, setTop] = (0, import_react38.useState)(0);
+    const { canCheckout, isBadgeVisible } = (0, import_react38.useMemo)(() => {
       return {
         canCheckout: data?.capabilities?.checkout ?? true,
         isBadgeVisible: !data?.capabilities?.badgeVisibility || settings.badge?.visibility !== "hidden"
       };
     }, [data, settings]);
-    (0, import_react37.useLayoutEffect)(() => {
+    (0, import_react38.useLayoutEffect)(() => {
       const parent = portal || document.body;
       const setModalY = (0, import_debounce3.default)(() => {
         const value = Math.abs(
@@ -14887,7 +14916,7 @@ var resolveDesignProps = (props) => {
     }
   };
 };
-var ButtonElement = (0, import_react38.forwardRef)(({ children, className, ...rest }, ref) => {
+var ButtonElement = (0, import_react39.forwardRef)(({ children, className, ...rest }, ref) => {
   const props = resolveDesignProps(rest);
   const buttonStyles2 = {
     primary: {
@@ -14932,10 +14961,10 @@ var ButtonElement = (0, import_react38.forwardRef)(({ children, className, ...re
 ButtonElement.displayName = "Button";
 
 // src/components/elements/included-features/IncludedFeatures.tsx
-var import_react40 = require("react");
+var import_react41 = require("react");
 
 // src/components/elements/included-features/UsageDetails.tsx
-var import_react39 = require("react");
+var import_react40 = require("react");
 var import_jsx_runtime31 = require("react/jsx-runtime");
 var UsageDetails = ({
   entitlement,
@@ -14952,14 +14981,14 @@ var UsageDetails = ({
   } = entitlement;
   const { t: t2 } = useTranslation();
   const { data } = useEmbed();
-  const period = (0, import_react39.useMemo)(() => {
+  const period = (0, import_react40.useMemo)(() => {
     return isCheckoutData(data) && typeof data.company?.plan?.planPeriod === "string" ? data.company.plan.planPeriod : void 0;
   }, [data]);
-  const { billingPrice, cost, currentTier } = (0, import_react39.useMemo)(
+  const { billingPrice, cost, currentTier } = (0, import_react40.useMemo)(
     () => getUsageDetails(entitlement, period),
     [entitlement, period]
   );
-  const text = (0, import_react39.useMemo)(() => {
+  const text = (0, import_react40.useMemo)(() => {
     if (!feature) {
       return;
     }
@@ -15019,7 +15048,7 @@ var UsageDetails = ({
     billingPrice,
     currentTier?.to
   ]);
-  const usageText = (0, import_react39.useMemo)(() => {
+  const usageText = (0, import_react40.useMemo)(() => {
     if (!feature) {
       return;
     }
@@ -15028,7 +15057,7 @@ var UsageDetails = ({
     let index = 0;
     if (priceBehavior === "pay_in_advance" /* PayInAdvance */ && typeof period === "string" && typeof price === "number") {
       acc.push(
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_react39.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_react40.Fragment, { children: [
           formatCurrency(price, currency),
           "/",
           packageSize > 1 && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
@@ -15043,7 +15072,7 @@ var UsageDetails = ({
       index += 1;
     } else if ((priceBehavior === "pay_as_you_go" /* PayAsYouGo */ || priceBehavior === "overage" /* Overage */ || priceBehavior === "tier" /* Tiered */) && typeof usage === "number") {
       acc.push(
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_react39.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_react40.Fragment, { children: [
           usage,
           " ",
           getFeatureName(feature, usage),
@@ -15056,14 +15085,14 @@ var UsageDetails = ({
     if (acc) {
       if (typeof cost === "number" && cost > 0) {
         acc.push(
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_react39.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_react40.Fragment, { children: [
             " \u2022 ",
             formatCurrency(cost, currency)
           ] }, index)
         );
         index += 1;
         if (feature.featureType === "trait" /* Trait */ && typeof period === "string") {
-          acc.push(/* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_react39.Fragment, { children: [
+          acc.push(/* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_react40.Fragment, { children: [
             "/",
             shortenPeriod(period)
           ] }, index));
@@ -15148,15 +15177,15 @@ function resolveDesignProps2(props) {
     visibleFeatures: props.visibleFeatures
   };
 }
-var IncludedFeatures = (0, import_react40.forwardRef)(({ className, ...rest }, ref) => {
+var IncludedFeatures = (0, import_react41.forwardRef)(({ className, ...rest }, ref) => {
   const props = resolveDesignProps2(rest);
   const { t: t2 } = useTranslation();
   const { data, settings } = useEmbed();
-  const elements = (0, import_react40.useRef)([]);
+  const elements = (0, import_react41.useRef)([]);
   const shouldWrapChildren = useWrapChildren(elements.current);
   const isLightBackground = useIsLightBackground();
-  const [showCount, setShowCount] = (0, import_react40.useState)(VISIBLE_ENTITLEMENT_COUNT);
-  const { plan, addOns, featureUsage } = (0, import_react40.useMemo)(() => {
+  const [showCount, setShowCount] = (0, import_react41.useState)(VISIBLE_ENTITLEMENT_COUNT);
+  const { plan, addOns, featureUsage } = (0, import_react41.useMemo)(() => {
     if (isCheckoutData(data)) {
       const orderedFeatureUsage = props.visibleFeatures?.reduce(
         (acc, id) => {
@@ -15292,7 +15321,7 @@ var IncludedFeatures = (0, import_react40.forwardRef)(({ className, ...rest }, r
 IncludedFeatures.displayName = "IncludedFeatures";
 
 // src/components/elements/invoices/Invoices.tsx
-var import_react41 = require("react");
+var import_react42 = require("react");
 var import_jsx_runtime33 = require("react/jsx-runtime");
 function resolveDesignProps3(props) {
   return {
@@ -15325,15 +15354,15 @@ function formatInvoices(invoices) {
     url: url || void 0
   }));
 }
-var Invoices = (0, import_react41.forwardRef)(({ className, data, ...rest }, ref) => {
+var Invoices = (0, import_react42.forwardRef)(({ className, data, ...rest }, ref) => {
   const props = resolveDesignProps3(rest);
   const { t: t2 } = useTranslation();
   const { listInvoices, settings } = useEmbed();
-  const [isLoading, setIsLoading] = (0, import_react41.useState)(false);
-  const [error, setError] = (0, import_react41.useState)();
-  const [invoices, setInvoices] = (0, import_react41.useState)(() => formatInvoices(data));
-  const [listSize, setListSize] = (0, import_react41.useState)(props.limit.number);
-  const getInvoices = (0, import_react41.useCallback)(async () => {
+  const [isLoading, setIsLoading] = (0, import_react42.useState)(false);
+  const [error, setError] = (0, import_react42.useState)();
+  const [invoices, setInvoices] = (0, import_react42.useState)(() => formatInvoices(data));
+  const [listSize, setListSize] = (0, import_react42.useState)(props.limit.number);
+  const getInvoices = (0, import_react42.useCallback)(async () => {
     try {
       setError(void 0);
       setIsLoading(true);
@@ -15352,10 +15381,10 @@ var Invoices = (0, import_react41.forwardRef)(({ className, data, ...rest }, ref
       (prev2) => prev2 !== props.limit.number ? props.limit.number : MAX_VISIBLE_INVOICE_COUNT
     );
   };
-  (0, import_react41.useEffect)(() => {
+  (0, import_react42.useEffect)(() => {
     getInvoices();
   }, [getInvoices]);
-  (0, import_react41.useEffect)(() => {
+  (0, import_react42.useEffect)(() => {
     setInvoices(formatInvoices(data));
   }, [data]);
   if (invoices.length === 0) {
@@ -15435,7 +15464,7 @@ var Invoices = (0, import_react41.forwardRef)(({ className, data, ...rest }, ref
 Invoices.displayName = "Invoices";
 
 // src/components/elements/metered-features/MeteredFeatures.tsx
-var import_react42 = require("react");
+var import_react43 = require("react");
 
 // src/components/elements/metered-features/Meter.tsx
 var import_jsx_runtime34 = require("react/jsx-runtime");
@@ -15486,7 +15515,7 @@ var PriceDetails = ({
     tiersMode: billingPrice?.tiersMode || void 0,
     currentTierPerUnitPrice: typeof currentTier?.perUnitPriceDecimal === "string" ? Number(currentTier?.perUnitPriceDecimal) : currentTier?.perUnitPrice
   };
-  if (typeof feature === "undefined" || typeof currentTierPerUnitPrice !== "number") {
+  if (!feature || typeof currentTierPerUnitPrice !== "number") {
     return null;
   }
   return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
@@ -15633,14 +15662,14 @@ function resolveDesignProps4(props) {
     visibleFeatures: props.visibleFeatures
   };
 }
-var MeteredFeatures = (0, import_react42.forwardRef)(({ className, ...rest }, ref) => {
+var MeteredFeatures = (0, import_react43.forwardRef)(({ className, ...rest }, ref) => {
   const props = resolveDesignProps4(rest);
-  const elements = (0, import_react42.useRef)([]);
+  const elements = (0, import_react43.useRef)([]);
   const shouldWrapChildren = useWrapChildren(elements.current);
   const { t: t2 } = useTranslation();
   const { data, settings, setCheckoutState } = useEmbed();
   const isLightBackground = useIsLightBackground();
-  const { meteredFeatures, period } = (0, import_react42.useMemo)(() => {
+  const { meteredFeatures, period } = (0, import_react43.useMemo)(() => {
     if (isCheckoutData(data)) {
       const period2 = typeof data.company?.plan?.planPeriod === "string" ? data.company?.plan?.planPeriod : void 0;
       const orderedFeatureUsage = props.visibleFeatures?.reduce(
@@ -15776,10 +15805,10 @@ var MeteredFeatures = (0, import_react42.forwardRef)(({ className, ...rest }, re
 MeteredFeatures.displayName = "MeteredFeatures";
 
 // src/components/elements/payment-method/PaymentMethod.tsx
-var import_react44 = require("react");
+var import_react45 = require("react");
 
 // src/components/elements/payment-method/PaymentMethodElement.tsx
-var import_react43 = require("react");
+var import_react44 = require("react");
 var import_jsx_runtime37 = require("react/jsx-runtime");
 var PaymentElement2 = ({
   iconName,
@@ -15899,7 +15928,7 @@ var PaymentListElement = ({
 }) => {
   const isLightBackground = useIsLightBackground();
   const { iconName, iconTitle, label, paymentLast4 } = getPaymentMethodData(paymentMethod);
-  const expirationDate = (0, import_react43.useMemo)(() => {
+  const expirationDate = (0, import_react44.useMemo)(() => {
     const { cardExpMonth, cardExpYear } = paymentMethod;
     if (!cardExpMonth || !cardExpYear) {
       return;
@@ -15984,10 +16013,10 @@ var resolveDesignProps5 = (props) => {
     }
   };
 };
-var PaymentMethod = (0, import_react44.forwardRef)(({ children, className, portal, allowEdit = true, ...rest }, ref) => {
+var PaymentMethod = (0, import_react45.forwardRef)(({ children, className, portal, allowEdit = true, ...rest }, ref) => {
   const props = resolveDesignProps5(rest);
   const { data, setLayout } = useEmbed();
-  const { paymentMethod, monthsToExpiration } = (0, import_react44.useMemo)(() => {
+  const { paymentMethod, monthsToExpiration } = (0, import_react45.useMemo)(() => {
     if (isCheckoutData(data)) {
       const paymentMethod2 = data.subscription?.paymentMethod || data.company?.defaultPaymentMethod;
       let monthsToExpiration2;
@@ -16180,7 +16209,7 @@ var loadStripe = function loadStripe2() {
 };
 
 // src/components/elements/payment-method/PaymentMethodDetails.tsx
-var import_react45 = require("react");
+var import_react46 = require("react");
 var import_jsx_runtime39 = require("react/jsx-runtime");
 var resolveDesignProps6 = () => {
   return {
@@ -16206,7 +16235,7 @@ var PaymentMethodDetails = ({
     updatePaymentMethod,
     deletePaymentMethod
   } = useEmbed();
-  const { defaultPaymentMethod, paymentMethods, subscription } = (0, import_react45.useMemo)(() => {
+  const { defaultPaymentMethod, paymentMethods, subscription } = (0, import_react46.useMemo)(() => {
     if (isCheckoutData(data)) {
       return {
         defaultPaymentMethod: data.company?.defaultPaymentMethod,
@@ -16221,14 +16250,14 @@ var PaymentMethodDetails = ({
     };
   }, [data]);
   const isLightBackground = useIsLightBackground();
-  const [isLoading, setIsLoading] = (0, import_react45.useState)(false);
-  const [error, setError] = (0, import_react45.useState)();
-  const [showPaymentForm, setShowPaymentForm] = (0, import_react45.useState)(false);
-  const [stripe, setStripe] = (0, import_react45.useState)(null);
-  const [setupIntent, setSetupIntent] = (0, import_react45.useState)();
-  const [showDifferentPaymentMethods, setShowDifferentPaymentMethods] = (0, import_react45.useState)(false);
-  const [currentPaymentMethod, setCurrentPaymentMethod] = (0, import_react45.useState)(subscription?.paymentMethod || defaultPaymentMethod);
-  const monthsToExpiration = (0, import_react45.useMemo)(() => {
+  const [isLoading, setIsLoading] = (0, import_react46.useState)(false);
+  const [error, setError] = (0, import_react46.useState)();
+  const [showPaymentForm, setShowPaymentForm] = (0, import_react46.useState)(false);
+  const [stripe, setStripe] = (0, import_react46.useState)(null);
+  const [setupIntent, setSetupIntent] = (0, import_react46.useState)();
+  const [showDifferentPaymentMethods, setShowDifferentPaymentMethods] = (0, import_react46.useState)(false);
+  const [currentPaymentMethod, setCurrentPaymentMethod] = (0, import_react46.useState)(subscription?.paymentMethod || defaultPaymentMethod);
+  const monthsToExpiration = (0, import_react46.useMemo)(() => {
     let expiration;
     if (typeof currentPaymentMethod?.cardExpYear === "number" && typeof currentPaymentMethod?.cardExpMonth === "number") {
       const today = /* @__PURE__ */ new Date();
@@ -16251,7 +16280,7 @@ var PaymentMethodDetails = ({
   const toggleShowPaymentMethods = () => {
     setShowDifferentPaymentMethods((prev2) => !prev2);
   };
-  const initializePaymentMethod = (0, import_react45.useCallback)(async () => {
+  const initializePaymentMethod = (0, import_react46.useCallback)(async () => {
     try {
       setIsLoading(true);
       const response = await createSetupIntent();
@@ -16267,7 +16296,7 @@ var PaymentMethodDetails = ({
       setIsLoading(false);
     }
   }, [t2, createSetupIntent]);
-  const handleUpdatePaymentMethod = (0, import_react45.useCallback)(
+  const handleUpdatePaymentMethod = (0, import_react46.useCallback)(
     async (paymentMethodId) => {
       try {
         setIsLoading(true);
@@ -16286,7 +16315,7 @@ var PaymentMethodDetails = ({
     },
     [t2, setPaymentMethodId, updatePaymentMethod]
   );
-  const handleDeletePaymentMethod = (0, import_react45.useCallback)(
+  const handleDeletePaymentMethod = (0, import_react46.useCallback)(
     async (paymentMethodId) => {
       try {
         setIsLoading(true);
@@ -16299,12 +16328,12 @@ var PaymentMethodDetails = ({
     },
     [t2, deletePaymentMethod]
   );
-  (0, import_react45.useEffect)(() => {
+  (0, import_react46.useEffect)(() => {
     if (!stripe && setupIntent?.publishableKey) {
       setStripe(loadStripe(setupIntent.publishableKey));
     }
   }, [stripe, setupIntent?.publishableKey]);
-  (0, import_react45.useEffect)(() => {
+  (0, import_react46.useEffect)(() => {
     if (!setupIntent && (!currentPaymentMethod || showPaymentForm)) {
       initializePaymentMethod();
     }
@@ -16440,7 +16469,7 @@ var PaymentMethodDetails = ({
                 },
                 paymentMethod.id
               )) }),
-              (!setupIntent || !currentPaymentMethod || showDifferentPaymentMethods) && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+              (!setupIntent || !currentPaymentMethod) && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
                 Button,
                 {
                   type: "button",
@@ -16460,7 +16489,7 @@ var PaymentMethodDetails = ({
 };
 
 // src/components/elements/plan-manager/PlanManager.tsx
-var import_react47 = require("react");
+var import_react48 = require("react");
 
 // src/components/elements/plan-manager/AddOn.tsx
 var import_jsx_runtime40 = require("react/jsx-runtime");
@@ -16474,7 +16503,7 @@ var AddOn = ({ addOn, currency, layout }) => {
       $gap: "1rem",
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Text, { display: layout.addOns.fontStyle, children: addOn.name }),
-        addOn.planPrice && addOn.planPeriod && /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(Text, { children: [
+        typeof addOn.planPrice === "number" && addOn.planPeriod && /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(Text, { children: [
           formatCurrency(addOn.planPrice, currency),
           /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("sub", { children: addOn.planPeriod == "one-time" ? shortenPeriod(addOn.planPeriod) : `/${shortenPeriod(addOn.planPeriod)}` })
         ] })
@@ -16484,7 +16513,7 @@ var AddOn = ({ addOn, currency, layout }) => {
 };
 
 // src/components/elements/plan-manager/UsageDetails.tsx
-var import_react46 = require("react");
+var import_react47 = require("react");
 var import_jsx_runtime41 = require("react/jsx-runtime");
 var UsageDetails2 = ({
   entitlement,
@@ -16498,18 +16527,18 @@ var UsageDetails2 = ({
     limit,
     amount = 0,
     cost = 0
-  } = (0, import_react46.useMemo)(
+  } = (0, import_react47.useMemo)(
     () => getUsageDetails(entitlement, period),
     [entitlement, period]
   );
-  const description = (0, import_react46.useMemo)(() => {
+  const description = (0, import_react47.useMemo)(() => {
     const acc = [];
     let index = 0;
     if (entitlement.priceBehavior === "overage" /* Overage */) {
       acc.push(
-        amount > 0 ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_react46.Fragment, { children: t2("X additional", {
+        amount > 0 ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_react47.Fragment, { children: t2("X additional", {
           amount
-        }) }, index) : /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_react46.Fragment, { children: [
+        }) }, index) : /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_react47.Fragment, { children: [
           t2("Additional"),
           ": "
         ] }, index)
@@ -16520,7 +16549,7 @@ var UsageDetails2 = ({
     if (entitlement.priceBehavior !== "tier" /* Tiered */ && entitlement.feature && typeof price === "number" && !amount) {
       const packageSize = billingPrice?.packageSize ?? 1;
       acc.push(
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_react46.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_react47.Fragment, { children: [
           formatCurrency(price, billingPrice?.currency),
           /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("sub", { children: [
             "/",
@@ -16621,12 +16650,12 @@ var resolveDesignProps7 = (props) => {
     }
   };
 };
-var PlanManager = (0, import_react47.forwardRef)(({ children, className, portal, ...rest }, ref) => {
+var PlanManager = (0, import_react48.forwardRef)(({ children, className, portal, ...rest }, ref) => {
   const props = resolveDesignProps7(rest);
   const { t: t2 } = useTranslation();
   const { data, settings, setCheckoutState } = useEmbed();
   const isLightBackground = useIsLightBackground();
-  const trialEndDays = useTrialEnd();
+  const trialEnd = useTrialEnd();
   const {
     currentPlan,
     currentAddOns,
@@ -16635,7 +16664,7 @@ var PlanManager = (0, import_react47.forwardRef)(({ children, className, portal,
     defaultPlan,
     featureUsage,
     trialPaymentMethodRequired
-  } = (0, import_react47.useMemo)(() => {
+  } = (0, import_react48.useMemo)(() => {
     if (isCheckoutData(data)) {
       return {
         currentPlan: data.company?.plan,
@@ -16657,11 +16686,11 @@ var PlanManager = (0, import_react47.forwardRef)(({ children, className, portal,
       trialPaymentMethodRequired: false
     };
   }, [data]);
-  const usageBasedEntitlements = (0, import_react47.useMemo)(
+  const usageBasedEntitlements = (0, import_react48.useMemo)(
     () => featureUsage.filter((usage) => typeof usage.priceBehavior === "string"),
     [featureUsage]
   );
-  const { subscriptionCurrency, willSubscriptionCancel, isTrialSubscription } = (0, import_react47.useMemo)(() => {
+  const { subscriptionCurrency, willSubscriptionCancel, isTrialSubscription } = (0, import_react48.useMemo)(() => {
     const subscriptionCurrency2 = billingSubscription?.currency;
     const isTrialSubscription2 = billingSubscription?.status === "trialing";
     const willSubscriptionCancel2 = typeof billingSubscription?.cancelAt === "number" && billingSubscription?.cancelAtPeriodEnd === true;
@@ -16683,7 +16712,7 @@ var PlanManager = (0, import_react47.forwardRef)(({ children, className, portal,
         $textAlign: "center",
         $backgroundColor: isLightBackground ? darken(settings.theme.card.background, 0.04) : lighten(settings.theme.card.background, 0.04),
         children: [
-          trialEndDays && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Text, { as: "h3", display: "heading3", children: t2("Trial ends in", { days: trialEndDays }) }),
+          typeof trialEnd.formatted !== "undefined" && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Text, { as: "h3", display: "heading3", children: trialEnd.formatted }),
           /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Text, { as: "p", $size: 0.8125 * settings.theme.typography.text.fontSize, children: trialPaymentMethodRequired ? t2("After the trial, subscribe") : defaultPlan ? t2("After the trial, cancel", {
             defaultPlanName: defaultPlan?.name
           }) : t2("After the trial, cancel no default", {
@@ -16702,7 +16731,7 @@ var PlanManager = (0, import_react47.forwardRef)(({ children, className, portal,
         $backgroundColor: isLightBackground ? darken(settings.theme.card.background, 0.04) : lighten(settings.theme.card.background, 0.04),
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Text, { as: "h3", display: "heading3", children: t2("Subscription canceled") }),
-          billingSubscription?.cancelAt && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+          typeof billingSubscription?.cancelAt === "number" && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
             Text,
             {
               as: "p",
@@ -16825,17 +16854,17 @@ var PlanManager = (0, import_react47.forwardRef)(({ children, className, portal,
 PlanManager.displayName = "PlanManager";
 
 // src/components/elements/pricing-table/PricingTable.tsx
-var import_react50 = require("react");
+var import_react51 = require("react");
 
 // src/components/elements/pricing-table/AddOn.tsx
-var import_react48 = require("react");
+var import_react49 = require("react");
 var import_jsx_runtime43 = require("react/jsx-runtime");
 var AddOn2 = ({ addOn, sharedProps, selectedPeriod }) => {
   const { layout } = sharedProps;
   const { t: t2 } = useTranslation();
   const { data, settings, setCheckoutState } = useEmbed();
   const isLightBackground = useIsLightBackground();
-  const { currentAddOns, canCheckout, isStandalone, showCallToAction } = (0, import_react48.useMemo)(() => {
+  const { currentAddOns, canCheckout, isStandalone, showCallToAction } = (0, import_react49.useMemo)(() => {
     if (isCheckoutData(data)) {
       return {
         currentAddOns: data.company?.addOns || [],
@@ -16998,7 +17027,7 @@ var AddOn2 = ({ addOn, sharedProps, selectedPeriod }) => {
 };
 
 // src/components/elements/pricing-table/Plan.tsx
-var import_react49 = require("react");
+var import_react50 = require("react");
 
 // src/components/elements/pricing-table/Entitlement.tsx
 var import_jsx_runtime44 = require("react/jsx-runtime");
@@ -17130,7 +17159,7 @@ var Plan2 = ({
   const { t: t2 } = useTranslation();
   const { data, settings, setCheckoutState } = useEmbed();
   const isLightBackground = useIsLightBackground();
-  const trialEndDays = useTrialEnd();
+  const trialEnd = useTrialEnd();
   const {
     currentPeriod,
     canCheckout,
@@ -17138,11 +17167,11 @@ var Plan2 = ({
     willSubscriptionCancel,
     isStandalone,
     showCallToAction
-  } = (0, import_react49.useMemo)(() => {
+  } = (0, import_react50.useMemo)(() => {
     if (isCheckoutData(data)) {
       const billingSubscription = data.company?.billingSubscription;
       const isTrialSubscription2 = billingSubscription?.status === "trialing";
-      const willSubscriptionCancel2 = billingSubscription?.cancelAt;
+      const willSubscriptionCancel2 = typeof billingSubscription?.cancelAt === "number";
       return {
         currentPeriod: data.company?.plan?.planPeriod || "month",
         canCheckout: data.capabilities?.checkout ?? true,
@@ -17234,7 +17263,7 @@ var Plan2 = ({
                     {
                       $size: 0.75 * settings.theme.typography.text.fontSize,
                       $color: hexToHSL(settings.theme.primary).l > 50 ? "#000000" : "#FFFFFF",
-                      children: isTrialSubscription && !willSubscriptionCancel && trialEndDays ? t2("Trial ends in", { days: trialEndDays }) : t2("Active")
+                      children: isTrialSubscription && !willSubscriptionCancel && typeof trialEnd !== "undefined" ? trialEnd.formatted : t2("Active")
                     }
                   )
                 }
@@ -17413,11 +17442,11 @@ var resolveDesignProps8 = (props) => {
     }
   };
 };
-var PricingTable = (0, import_react50.forwardRef)(({ className, callToActionUrl, onCallToAction, ...rest }, ref) => {
+var PricingTable = (0, import_react51.forwardRef)(({ className, callToActionUrl, onCallToAction, ...rest }, ref) => {
   const props = resolveDesignProps8(rest);
   const { t: t2 } = useTranslation();
   const { data, settings, hydratePublic } = useEmbed();
-  const { currentPeriod, isStandalone } = (0, import_react50.useMemo)(() => {
+  const { currentPeriod, isStandalone } = (0, import_react51.useMemo)(() => {
     if (isCheckoutData(data)) {
       const billingSubscription = data.company?.billingSubscription;
       const isTrialSubscription = billingSubscription?.status === "trialing";
@@ -17442,9 +17471,9 @@ var PricingTable = (0, import_react50.forwardRef)(({ className, callToActionUrl,
       showCallToAction: typeof callToActionUrl === "string"
     };
   }, [data, callToActionUrl]);
-  const [selectedPeriod, setSelectedPeriod] = (0, import_react50.useState)(currentPeriod);
+  const [selectedPeriod, setSelectedPeriod] = (0, import_react51.useState)(currentPeriod);
   const { plans, addOns, periods } = useAvailablePlans(selectedPeriod);
-  const [entitlementCounts, setEntitlementCounts] = (0, import_react50.useState)(
+  const [entitlementCounts, setEntitlementCounts] = (0, import_react51.useState)(
     () => plans.reduce(entitlementCountsReducer, {})
   );
   const handleToggleShowAll = (id) => {
@@ -17462,15 +17491,15 @@ var PricingTable = (0, import_react50.forwardRef)(({ className, callToActionUrl,
       return prev2;
     });
   };
-  (0, import_react50.useEffect)(() => {
+  (0, import_react51.useEffect)(() => {
     if (isStandalone) {
       hydratePublic();
     }
   }, [isStandalone, hydratePublic]);
-  (0, import_react50.useEffect)(() => {
+  (0, import_react51.useEffect)(() => {
     setEntitlementCounts(plans.reduce(entitlementCountsReducer, {}));
   }, [plans]);
-  const Wrapper = isStandalone ? Container : import_react50.Fragment;
+  const Wrapper = isStandalone ? Container : import_react51.Fragment;
   return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Wrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
     FussyChild,
     {
@@ -17591,7 +17620,7 @@ var PricingTable = (0, import_react50.forwardRef)(({ className, callToActionUrl,
 PricingTable.displayName = "PricingTable";
 
 // src/components/elements/text/Text.tsx
-var import_react51 = require("react");
+var import_react52 = require("react");
 var import_jsx_runtime47 = require("react/jsx-runtime");
 var resolveDesignProps9 = (props) => {
   return {
@@ -17602,7 +17631,7 @@ var resolveDesignProps9 = (props) => {
     }
   };
 };
-var TextElement = (0, import_react51.forwardRef)(({ children, className, ...rest }, ref) => {
+var TextElement = (0, import_react52.forwardRef)(({ children, className, ...rest }, ref) => {
   const props = resolveDesignProps9(rest);
   return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Element, { as: Flex, ref, className, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
     Text,
@@ -17617,7 +17646,7 @@ var TextElement = (0, import_react51.forwardRef)(({ children, className, ...rest
 TextElement.displayName = "Text";
 
 // src/components/elements/unsubscribe-button/UnsubscribeButton.tsx
-var import_react52 = require("react");
+var import_react53 = require("react");
 var import_jsx_runtime48 = require("react/jsx-runtime");
 var buttonStyles = {
   primary: {
@@ -17644,11 +17673,11 @@ var resolveDesignProps10 = (props) => {
     }
   };
 };
-var UnsubscribeButton = (0, import_react52.forwardRef)(({ children, className, ...rest }, ref) => {
+var UnsubscribeButton = (0, import_react53.forwardRef)(({ children, className, ...rest }, ref) => {
   const props = resolveDesignProps10(rest);
   const { t: t2 } = useTranslation();
   const { data, setLayout } = useEmbed();
-  const hasActiveSubscription = (0, import_react52.useMemo)(() => {
+  const hasActiveSubscription = (0, import_react53.useMemo)(() => {
     return isCheckoutData(data) && data.subscription && data.subscription.status !== "cancelled" && !data.subscription.cancelAt;
   }, [data]);
   if (!hasActiveSubscription) {
@@ -17683,7 +17712,7 @@ var UnsubscribeButton = (0, import_react52.forwardRef)(({ children, className, .
 UnsubscribeButton.displayName = "UnsubscribeButton";
 
 // src/components/elements/upcoming-bill/UpcomingBill.tsx
-var import_react53 = require("react");
+var import_react54 = require("react");
 var import_jsx_runtime49 = require("react/jsx-runtime");
 function resolveDesignProps11(props) {
   return {
@@ -17703,15 +17732,15 @@ function resolveDesignProps11(props) {
     }
   };
 }
-var UpcomingBill = (0, import_react53.forwardRef)(({ className, ...rest }, ref) => {
+var UpcomingBill = (0, import_react54.forwardRef)(({ className, ...rest }, ref) => {
   const props = resolveDesignProps11(rest);
   const { t: t2 } = useTranslation();
   const { data, settings, getUpcomingInvoice } = useEmbed();
   const isLightBackground = useIsLightBackground();
-  const [isLoading, setIsLoading] = (0, import_react53.useState)(false);
-  const [error, setError] = (0, import_react53.useState)();
-  const [upcomingInvoice, setUpcomingInvoice] = (0, import_react53.useState)();
-  const discounts = (0, import_react53.useMemo)(() => {
+  const [isLoading, setIsLoading] = (0, import_react54.useState)(false);
+  const [error, setError] = (0, import_react54.useState)();
+  const [upcomingInvoice, setUpcomingInvoice] = (0, import_react54.useState)();
+  const discounts = (0, import_react54.useMemo)(() => {
     return (isCheckoutData(data) && data.subscription?.discounts || []).map(
       (discount) => ({
         couponId: discount.couponId,
@@ -17723,7 +17752,7 @@ var UpcomingBill = (0, import_react53.forwardRef)(({ className, ...rest }, ref)
       })
     );
   }, [data]);
-  const getInvoice = (0, import_react53.useCallback)(async () => {
+  const getInvoice = (0, import_react54.useCallback)(async () => {
     if (isCheckoutData(data) && data.component?.id && data.subscription && !data.subscription.cancelAt) {
       try {
         setError(void 0);
@@ -17739,7 +17768,7 @@ var UpcomingBill = (0, import_react53.forwardRef)(({ className, ...rest }, ref)
       }
     }
   }, [data, getUpcomingInvoice]);
-  (0, import_react53.useEffect)(() => {
+  (0, import_react54.useEffect)(() => {
     getInvoice();
   }, [getInvoice]);
   if (!isCheckoutData(data) || !data.subscription || data.subscription.cancelAt) {
@@ -17839,6 +17868,7 @@ var UpcomingBill = (0, import_react53.forwardRef)(({ className, ...rest }, ref)
                               }) : t2("Amount off", {
                                 amount: formatCurrency(
                                   discount.amountOff,
+                                  // we already checked for `number` type
                                   discount?.currency
                                 )
                               }) }) })
@@ -22037,10 +22067,10 @@ var { Inflate, inflate, inflateRaw, ungzip } = inflate_1$1;
 var inflate_1 = inflate;
 
 // src/components/embed/Embed.tsx
-var import_react55 = require("react");
+var import_react56 = require("react");
 
 // src/components/embed/renderer.ts
-var import_react54 = require("react");
+var import_react55 = require("react");
 var components = {
   Root,
   Viewport,
@@ -22104,7 +22134,7 @@ function createRenderer(options2) {
     const { className, ...rest } = props;
     const resolvedProps = component === "div" ? rest : props;
     const resolvedChildren = children.map(renderNode);
-    return (0, import_react54.createElement)(
+    return (0, import_react55.createElement)(
       component,
       {
         key: index,
@@ -22152,8 +22182,8 @@ var Error2 = ({ message }) => {
   );
 };
 var SchematicEmbed = ({ id, accessToken }) => {
-  const [children, setChildren] = (0, import_react55.useState)(/* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Loading, {}));
-  const theme = (0, import_react55.useContext)(et);
+  const [children, setChildren] = (0, import_react56.useState)(/* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Loading, {}));
+  const theme = (0, import_react56.useContext)(et);
   const {
     data,
     error,
@@ -22164,17 +22194,17 @@ var SchematicEmbed = ({ id, accessToken }) => {
     setAccessToken,
     updateSettings
   } = useEmbed();
-  (0, import_react55.useEffect)(() => {
+  (0, import_react56.useEffect)(() => {
     if (accessToken) {
       setAccessToken(accessToken);
     }
   }, [accessToken, setAccessToken]);
-  (0, import_react55.useEffect)(() => {
+  (0, import_react56.useEffect)(() => {
     if (id && stale) {
       hydrateComponent(id);
     }
   }, [id, hydrateComponent, stale]);
-  (0, import_react55.useEffect)(() => {
+  (0, import_react56.useEffect)(() => {
     const renderer = createRenderer();
     try {
       if (isCheckoutData(data) && data.component?.ast) {