@schematichq/schematic-components 0.4.0-rc.3 → 0.4.0-rc.4

package/dist/schematic-components.cjs.js

@@ -2097,7 +2097,7 @@ __export(src_exports, {
 module.exports = __toCommonJS(src_exports);
 
 // src/components/elements/included-features/IncludedFeatures.tsx
-var import_react15 = require("react");
+var import_react16 = require("react");
 
 // node_modules/styled-components/node_modules/tslib/tslib.es6.mjs
 var __assign = function() {
@@ -8012,6 +8012,31 @@ function BillingPriceResponseDataFromJSONTyped(json, ignoreDiscriminator) {
   };
 }
 
+// src/api/models/BillingPriceView.ts
+function BillingPriceViewFromJSON(json) {
+  return BillingPriceViewFromJSONTyped(json, false);
+}
+function BillingPriceViewFromJSONTyped(json, ignoreDiscriminator) {
+  if (json == null) {
+    return json;
+  }
+  return {
+    createdAt: new Date(json["created_at"]),
+    currency: json["currency"],
+    id: json["id"],
+    interval: json["interval"],
+    meterId: json["meter_id"] == null ? void 0 : json["meter_id"],
+    price: json["price"],
+    priceExternalId: json["price_external_id"],
+    priceId: json["price_id"],
+    productExternalId: json["product_external_id"],
+    productId: json["product_id"],
+    productName: json["product_name"],
+    updatedAt: new Date(json["updated_at"]),
+    usageType: json["usage_type"]
+  };
+}
+
 // src/api/models/BillingProductDetailResponseData.ts
 function BillingProductDetailResponseDataFromJSON(json) {
   return BillingProductDetailResponseDataFromJSONTyped(json, false);
@@ -8084,7 +8109,8 @@ function BillingSubscriptionResponseDataFromJSONTyped(json, ignoreDiscriminator)
     periodStart: json["period_start"],
     status: json["status"],
     subscriptionExternalId: json["subscription_external_id"],
-    totalPrice: json["total_price"]
+    totalPrice: json["total_price"],
+    trialEnd: json["trial_end"] == null ? void 0 : json["trial_end"]
   };
 }
 
@@ -8173,7 +8199,8 @@ function BillingSubscriptionViewFromJSONTyped(json, ignoreDiscriminator) {
     ),
     status: json["status"],
     subscriptionExternalId: json["subscription_external_id"],
-    totalPrice: json["total_price"]
+    totalPrice: json["total_price"],
+    trialEnd: json["trial_end"] == null ? void 0 : json["trial_end"]
   };
 }
 
@@ -8608,10 +8635,12 @@ function PlanEntitlementResponseDataFromJSONTyped(json, ignoreDiscriminator) {
     feature: json["feature"] == null ? void 0 : FeatureResponseDataFromJSON(json["feature"]),
     featureId: json["feature_id"],
     id: json["id"],
+    meteredPrice: json["metered_price"] == null ? void 0 : BillingPriceViewFromJSON(json["metered_price"]),
     metricPeriod: json["metric_period"] == null ? void 0 : json["metric_period"],
     metricPeriodMonthReset: json["metric_period_month_reset"] == null ? void 0 : json["metric_period_month_reset"],
     plan: json["plan"] == null ? void 0 : PlanResponseDataFromJSON(json["plan"]),
     planId: json["plan_id"],
+    priceBehavior: json["price_behavior"] == null ? void 0 : json["price_behavior"],
     ruleId: json["rule_id"],
     updatedAt: new Date(json["updated_at"]),
     valueBool: json["value_bool"] == null ? void 0 : json["value_bool"],
@@ -8646,6 +8675,7 @@ function CompanyPlanDetailResponseDataFromJSONTyped(json, ignoreDiscriminator) {
     icon: json["icon"],
     id: json["id"],
     isDefault: json["is_default"],
+    isFree: json["is_free"],
     isTrialable: json["is_trialable"],
     monthlyPrice: json["monthly_price"] == null ? void 0 : BillingPriceResponseDataFromJSON(json["monthly_price"]),
     name: json["name"],
@@ -9718,7 +9748,7 @@ var EmbedProvider = ({
   (0, import_react3.useEffect)(() => {
     if (accessToken) {
       const { headers = {} } = apiConfig ?? {};
-      headers["X-Schematic-Components-Version"] = "0.4.0-rc.3";
+      headers["X-Schematic-Components-Version"] = "0.4.0-rc.4";
       headers["X-Schematic-Session-ID"] = sessionIdRef.current;
       const config = new Configuration({
         ...apiConfig,
@@ -9999,7 +10029,7 @@ var Root = (0, import_react7.forwardRef)(
 Root.displayName = "Root";
 
 // src/components/layout/viewport/Viewport.tsx
-var import_react12 = require("react");
+var import_react13 = require("react");
 
 // src/components/ui/box/styles.ts
 var Box = dt.div((props) => {
@@ -10387,7 +10417,7 @@ var Loader = dt.div`
   border-top-color: ${({ theme, $color }) => $color || theme.primary};
   border-radius: 50%;
   transition: all 0.1s;
-  animation: ${spin} 1.5s linear infinite;
+  animation: 1.5s linear infinite ${spin};
 
   ${({ $size = "md", $isLoading = true }) => {
   let px;
@@ -10445,82 +10475,79 @@ var Container2 = dt(Box)`
 
 // src/components/ui/modal/Modal.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
-var Modal = ({
-  children,
-  contentRef,
-  size = "auto",
-  top = 0,
-  onClose,
-  ...rest
-}) => {
-  const theme = nt();
-  const { setLayout } = useEmbed();
-  const isLightBackground = useIsLightBackground();
-  const handleClose = (0, import_react9.useCallback)(() => {
-    setLayout("portal");
-    onClose?.();
-  }, [setLayout, onClose]);
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-    Container2,
-    {
-      tabIndex: 0,
-      onClick: (event) => {
-        if (event.target === event.currentTarget) {
-          handleClose();
-        }
-      },
-      onKeyDown: (event) => {
-        if (event.key === "Escape") {
-          handleClose();
-        }
-      },
-      ...rest,
-      $position: "absolute",
-      $top: "50%",
-      $left: "50%",
-      $zIndex: "999999",
-      $transform: "translate(-50%, -50%)",
-      $width: "100%",
-      $height: "100%",
-      $marginTop: `${top}px`,
-      $backgroundColor: isLightBackground ? "hsla(0, 0%, 85%, 0.8)" : "hsla(0, 0%, 0%, 0.8)",
-      $overflow: "hidden",
-      $scrollbarColor: `${isLightBackground ? "hsla(0, 0%, 0%, 0.15)" : "hsla(0, 0%, 100%, 0.15)"} transparent`,
-      $scrollbarWidth: "thin",
-      $scrollbarGutter: "stable both-edges",
-      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-        Flex,
-        {
-          ref: contentRef,
-          $position: "relative",
-          $top: "50%",
-          $left: "50%",
-          $transform: "translate(-50%, -50%)",
-          $flexDirection: "column",
-          $overflow: "auto",
-          $width: "100%",
-          $height: "100vh",
-          $backgroundColor: theme.card.background,
-          $boxShadow: "0px 1px 20px 0px #1018280F, 0px 1px 3px 0px #1018281A;",
-          role: "dialog",
-          "aria-modal": "true",
-          $viewport: {
-            sm: {
-              ...size === "auto" ? { $width: "fit-content", $height: "fit-content" } : {
-                $width: "100%",
-                ...size === "lg" ? { $height: "100%" } : { $height: "fit-content" },
-                $maxWidth: size === "sm" ? "480px" : size === "md" ? "688px" : "1356px",
-                $maxHeight: "860px"
-              },
-              $borderRadius: "0.5rem"
-            }
-          },
-          children
-        }
-      )
-    }
-  );
-};
+var Modal = (0, import_react9.forwardRef)(
+  ({ children, contentRef, size = "auto", top = 0, onClose, ...rest }, ref) => {
+    const theme = nt();
+    const { setLayout } = useEmbed();
+    const isLightBackground = useIsLightBackground();
+    const handleClose = (0, import_react9.useCallback)(() => {
+      setLayout("portal");
+      onClose?.();
+    }, [setLayout, onClose]);
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      Container2,
+      {
+        ref,
+        tabIndex: 0,
+        onClick: (event) => {
+          if (event.target === event.currentTarget) {
+            handleClose();
+          }
+        },
+        onKeyDown: (event) => {
+          if (event.key === "Escape") {
+            handleClose();
+          }
+        },
+        ...rest,
+        $position: "absolute",
+        $top: "50%",
+        $left: "50%",
+        $zIndex: "999999",
+        $transform: "translate(-50%, -50%)",
+        $width: "100%",
+        $height: "100%",
+        $marginTop: `${top}px`,
+        $backgroundColor: isLightBackground ? "hsla(0, 0%, 85%, 0.8)" : "hsla(0, 0%, 0%, 0.8)",
+        $overflow: "hidden",
+        $scrollbarColor: `${isLightBackground ? "hsla(0, 0%, 0%, 0.15)" : "hsla(0, 0%, 100%, 0.15)"} transparent`,
+        $scrollbarWidth: "thin",
+        $scrollbarGutter: "stable both-edges",
+        children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          Flex,
+          {
+            ref: contentRef,
+            $position: "relative",
+            $top: "50%",
+            $left: "50%",
+            $transform: "translate(-50%, -50%)",
+            $flexDirection: "column",
+            $overflow: "auto",
+            $width: "100%",
+            $height: "100vh",
+            $backgroundColor: theme.card.background,
+            $boxShadow: "0px 1px 20px 0px #1018280F, 0px 1px 3px 0px #1018281A;",
+            role: "dialog",
+            "aria-modal": "true",
+            $viewport: {
+              md: {
+                ...size === "auto" ? { $width: "fit-content", $height: "fit-content" } : {
+                  $width: "100%",
+                  ...size === "lg" ? { $height: "100%" } : { $height: "fit-content" },
+                  $maxWidth: size === "sm" ? "480px" : size === "md" ? "688px" : "1356px",
+                  $maxHeight: "860px"
+                },
+                $borderRadius: "0.5rem"
+              }
+            },
+            children
+          }
+        )
+      }
+    );
+  }
+);
+Modal.displayName = "Modal";
 
 // src/components/ui/modal/ModalHeader.tsx
 var import_react10 = require("react");
@@ -10557,7 +10584,7 @@ var ModalHeader = ({
         $borderBottomColor: isLightBackground ? "hsla(0, 0%, 0%, 0.15)" : "hsla(0, 0%, 100%, 0.15)"
       },
       $viewport: {
-        sm: {
+        md: {
           $height: "5rem",
           $padding: "0 1.5rem 0 3rem"
         }
@@ -10686,35 +10713,126 @@ var Text = dt.span.attrs(({ onClick }) => ({
     `}
 `;
 
+// src/components/ui/tooltip/Tooltip.tsx
+var import_react11 = require("react");
+var import_react_dom = require("react-dom");
+
 // src/components/ui/tooltip/styles.ts
-var TooltipWrapper = dt(Box)`
-  position: relative;
+var Trigger = dt(Box)``;
+var coords = (position2) => {
+  let x2 = 0;
+  let y2 = 0;
+  switch (position2) {
+    case "top":
+      x2 = -50;
+      y2 = -100;
+      break;
+    case "right":
+      x2 = 0;
+      y2 = -50;
+      break;
+    case "bottom":
+      x2 = -50;
+      y2 = 0;
+      break;
+    case "left":
+      x2 = -100;
+      y2 = -50;
+      break;
+  }
+  return { x: x2, y: y2 };
+};
+var arrowCoords = (position2) => {
+  let x2 = 0;
+  let y2 = 0;
+  switch (position2) {
+    case "top":
+      x2 = -50;
+      y2 = -50;
+      break;
+    case "right":
+      x2 = 50;
+      y2 = -50;
+      break;
+    case "bottom":
+      x2 = -50;
+      y2 = 50;
+      break;
+    case "left":
+      x2 = -50;
+      y2 = -50;
+      break;
+  }
+  return { x: x2, y: y2 };
+};
+var origin = (position2) => {
+  const o2 = {
+    x: position2 === "top" ? "bottom" : position2 === "bottom" ? "top" : "center",
+    y: position2 === "left" ? "right" : position2 === "right" ? "left" : "center"
+  };
+  return o2;
+};
+var grow = (translate) => {
+  return mt`
+    0% {
+      opacity: 0;
+      transform: translate(${translate.x}%, ${translate.y}%) scale(0);
+    }
 
-  .tooltip {
+    100% {
+      opacity: 1;
+      transform: translate(${translate.x}%, ${translate.y}%) scale(1);
+    }
+  `;
+};
+var Content = dt(Box).withConfig({
+  shouldForwardProp: (prop) => !["x", "y", "position", "zIndex"].includes(prop)
+})(({ x: x2, y: y2, position: position2, zIndex }) => {
+  const translate = coords(position2);
+  const arrowTranslate = arrowCoords(position2);
+  const transformOrigin = origin(position2);
+  return lt`
     position: absolute;
-    left: 50%;
-    transform: translateX(-50%);
-    bottom: 100%;
+    top: calc(
+      ${y2}px -
+        ${position2 === "top" ? 0.75 : position2 === "bottom" ? -0.75 : 0}rem
+    );
+    left: calc(
+      ${x2}px -
+        ${position2 === "left" ? 0.75 : position2 === "right" ? -0.75 : 0}rem
+    );
+    transform: translate(${translate.x}%, ${translate.y}%);
+    z-index: ${zIndex};
     line-height: 1;
     width: max-content;
     max-width: 100%;
-    margin-bottom: 0.75rem;
     padding: ${1 / 1.15}rem 1rem;
     text-align: left;
+    opacity: 0;
     background-color: ${({ theme }) => theme.card.background};
     border-radius: ${({ theme }) => `${theme.card.borderRadius / TEXT_BASE_SIZE}rem`};
     filter: drop-shadow(0px 1px 20px #1018280f)
       drop-shadow(0px 1px 3px #1018281a);
-    transition: opacity 0.1s 0.2s ease-in-out;
-    opacity: 0;
-    visibility: hidden;
+    transform-origin: ${transformOrigin.x} ${transformOrigin.y};
+    animation: 0.2s ease-in-out 0.1s both ${grow(translate)};
 
     &::after {
       position: absolute;
       z-index: 0;
-      top: 100%;
-      left: 50%;
-      transform: translate(-50%, -50%);
+      ${position2 === "top" ? lt`
+            top: 100%;
+            left: 50%;
+          ` : position2 === "right" ? lt`
+              top: 50%;
+              right: 100%;
+            ` : position2 === "bottom" ? lt`
+                bottom: 100%;
+                left: 50%;
+              ` : lt`
+                top: 50%;
+                left: 100%;
+              `};
+      transform: translate(${arrowTranslate.x}%, ${arrowTranslate.y}%);
       content: "";
       display: block;
       width: 1rem;
@@ -10722,22 +10840,54 @@ var TooltipWrapper = dt(Box)`
       clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
       background-color: ${({ theme }) => theme.card.background};
     }
-  }
-
-  &:hover {
-    .tooltip {
-      opacity: 1;
-      visibility: visible;
-    }
-  }
-`;
+  `;
+});
 
 // src/components/ui/tooltip/Tooltip.tsx
 var import_jsx_runtime9 = require("react/jsx-runtime");
-var Tooltip = ({ label, description, ...rest }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(TooltipWrapper, { ...rest, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Box, { children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Box, { className: "tooltip", children: description })
+var Tooltip = ({
+  trigger,
+  content,
+  position: position2 = "top",
+  zIndex = 1,
+  ...rest
+}) => {
+  const ref = (0, import_react11.useRef)(null);
+  const [show, setShow] = (0, import_react11.useState)(false);
+  const [coords2, setCoords] = (0, import_react11.useState)({ x: 0, y: 0 });
+  (0, import_react11.useLayoutEffect)(() => {
+    if (ref.current) {
+      const { top: offsetTop, left: offsetLeft } = document.body.getBoundingClientRect();
+      const rect = ref.current.getBoundingClientRect();
+      let x2 = position2 === "left" ? rect.left : rect.right;
+      if (position2 === "top" || position2 === "bottom") {
+        x2 -= rect.width / 2;
+      }
+      let y2 = position2 === "top" ? rect.top : rect.bottom;
+      if (position2 === "left" || position2 === "right") {
+        y2 -= rect.height / 2;
+      }
+      setCoords({
+        x: Math.round(x2 - offsetLeft),
+        y: Math.round(y2 - offsetTop)
+      });
+    }
+  }, [position2, trigger]);
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      Trigger,
+      {
+        ref,
+        onPointerEnter: () => setShow(true),
+        onPointerLeave: () => setShow(false),
+        ...rest,
+        children: trigger
+      }
+    ),
+    show && (0, import_react_dom.createPortal)(
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Content, { ...coords2, position: position2, zIndex, children: content }),
+      document.body
+    )
   ] });
 };
 
@@ -10745,101 +10895,109 @@ var Tooltip = ({ label, description, ...rest }) => {
 var import_jsx_runtime10 = require("react/jsx-runtime");
 var Badge = () => {
   const { settings } = useEmbed();
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Flex, { $justifyContent: settings.badge.alignment, $alignItems: "center", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Box, { $fontSize: "0.75rem", $marginRight: "0.5rem", children: "Powered by" }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
-      "svg",
-      {
-        width: 86,
-        height: 16,
-        viewBox: "0 0 86 16",
-        style: { marginTop: "0.125rem" },
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-            "path",
-            {
-              d: "M21.2354 6.16227C21.1796 5.95015 21.0494 5.76779 20.8261 5.61893C20.6028 5.46635 20.3423 5.39564 20.0408 5.39564C19.3151 5.39564 18.7941 5.69708 18.7941 6.2367C18.7941 6.49721 18.9095 6.69073 19.1402 6.81726C19.3635 6.94379 19.732 7.07033 20.2344 7.18569C21.0084 7.37177 21.4922 7.51691 21.9686 7.7402C22.203 7.85557 22.3928 7.97465 22.5305 8.10863C22.7948 8.3803 22.9548 8.74501 22.9362 9.20276C22.9176 9.86147 22.6571 10.375 22.1547 10.7397C21.6523 11.1082 20.9563 11.2905 20.0818 11.2905C19.2072 11.2905 18.5597 11.1268 18.0312 10.8067C17.5065 10.4867 17.2013 10.0215 17.1194 9.41116L18.6192 9.27719C18.6974 9.57491 18.8723 9.7982 19.1514 9.94706C19.4305 10.0959 19.7394 10.1778 20.0818 10.1778C20.4614 10.1778 20.7777 10.0996 21.0308 9.9359C21.2838 9.77959 21.4104 9.56002 21.4104 9.28835C21.4104 8.90876 21.0531 8.61104 20.5991 8.43613C20.3683 8.35053 20.0855 8.27238 19.7468 8.19423C19.2705 8.07886 18.8946 7.97094 18.6155 7.87418C18.3364 7.78486 18.0908 7.66205 17.8712 7.51319C17.4358 7.21547 17.2832 6.8247 17.2832 6.2367C17.2832 5.61521 17.5325 5.13141 18.0312 4.79648C18.5262 4.46526 19.2035 4.29407 20.0669 4.29407C21.5853 4.29407 22.5752 4.9044 22.7389 6.05807L21.228 6.16227H21.2354Z",
-              fill: "currentColor"
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-            "path",
-            {
-              d: "M29.4145 8.9796L30.7803 9.55271C30.49 10.0923 30.0621 10.5129 29.5001 10.8217C28.9382 11.1344 28.3167 11.2944 27.6319 11.2944C26.9472 11.2944 26.3629 11.1567 25.8121 10.8701C25.2613 10.5873 24.8147 10.1742 24.4835 9.6383C24.1523 9.09868 23.9811 8.48835 23.9811 7.79987C23.9811 7.11138 24.1486 6.49361 24.4835 5.95771C24.8147 5.41809 25.2613 5.00873 25.8121 4.72589C26.3629 4.44305 26.9732 4.30164 27.6319 4.30164C28.2906 4.30164 28.9382 4.45794 29.5038 4.77427C30.0658 5.08688 30.4938 5.51113 30.7803 6.05075L29.4145 6.62015C29.0535 5.93539 28.3985 5.56323 27.6319 5.56323C27.0327 5.56323 26.5303 5.77536 26.1135 6.19961C25.6967 6.62387 25.492 7.15977 25.492 7.80731C25.492 8.45486 25.6967 8.99076 26.1135 9.40757C26.5303 9.83182 27.0327 10.0439 27.6319 10.0439C28.3985 10.0439 29.0535 9.66807 29.4145 8.98703V8.9796Z",
-              fill: "currentColor"
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-            "path",
-            {
-              d: "M37.4386 11.2049V7.80341C37.4386 6.35945 36.9139 5.59282 35.697 5.59282C35.0978 5.59282 34.614 5.7975 34.2419 6.21059C33.8623 6.61996 33.6725 7.15214 33.6725 7.80713V11.2086H32.1615V1.9234H33.6725V5.47745C34.1004 4.73315 35.001 4.29773 36.1919 4.29773C37.167 4.29773 37.8666 4.59917 38.302 5.19834C38.7375 5.7975 38.9533 6.66834 38.9533 7.80341V11.2049H37.4349H37.4386Z",
-              fill: "currentColor"
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-            "path",
-            {
-              d: "M46.5692 5.38819C47.2167 6.07295 47.5777 7.1187 47.5107 8.30587H41.8242C41.9284 8.83805 42.1741 9.26602 42.5611 9.59352C42.9481 9.92473 43.4022 10.0885 43.9157 10.0885C44.8052 10.0885 45.5234 9.59724 45.8844 8.78222L47.1795 9.40372C46.8818 9.99172 46.4352 10.4495 45.8509 10.7881C45.2629 11.1268 44.6191 11.2943 43.9157 11.2943C42.9295 11.2943 42.0178 10.9444 41.3516 10.3453C40.6855 9.7461 40.2649 8.83432 40.2649 7.79602C40.2649 6.75771 40.6892 5.84222 41.3516 5.23933C42.0178 4.64017 42.9295 4.29034 43.9157 4.29034C44.9801 4.29034 45.9216 4.69971 46.5692 5.38447V5.38819ZM42.5388 6.00224C42.1592 6.32974 41.921 6.75772 41.8205 7.29734H46.0221C45.9179 6.75772 45.6835 6.3223 45.3039 5.99852C44.9243 5.67847 44.4628 5.51473 43.9195 5.51473C43.3761 5.51473 42.9221 5.67847 42.5425 6.00597L42.5388 6.00224Z",
-              fill: "currentColor"
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-            "path",
-            {
-              d: "M59.7699 5.23933C60.1495 5.86827 60.3132 6.68329 60.3132 7.80347V11.2049H58.8023V7.80347C58.8023 6.35952 58.3371 5.59288 57.2318 5.59288C56.6438 5.59288 56.1861 5.79384 55.8586 6.19577C55.5311 6.60141 55.3673 7.13731 55.3673 7.80347V11.2049H53.8489V7.80347C53.8489 6.35952 53.3838 5.59288 52.2785 5.59288C51.6905 5.59288 51.2327 5.79384 50.9052 6.19577C50.574 6.60141 50.4102 7.13731 50.4102 7.80347V11.2049H48.8993V4.39827H50.3433L50.4102 5.47379C50.8196 4.65878 51.5825 4.29407 52.8106 4.29407C53.9606 4.29407 54.7161 4.78531 55.077 5.76407C55.5199 4.81508 56.4428 4.29407 57.7677 4.29407C58.7093 4.29407 59.3829 4.61412 59.7699 5.23562V5.23933Z",
-              fill: "currentColor"
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-            "path",
-            {
-              d: "M67.4264 5.47382L67.4934 4.3983H68.9373V11.205H67.4934L67.4264 10.1294C67.0282 10.9147 66.1797 11.3092 64.8809 11.3017C63.102 11.3427 61.591 9.79823 61.6283 7.8035C61.591 5.8162 63.102 4.2606 64.8809 4.29782C66.0643 4.29782 67.0096 4.7444 67.4264 5.47754V5.47382ZM66.8049 9.37398C67.2217 8.95717 67.4264 8.43243 67.4264 7.79605C67.4264 7.15967 67.2217 6.64238 66.8049 6.21813C66.3881 5.80132 65.8782 5.58919 65.2828 5.58919C64.6874 5.58919 64.1887 5.80132 63.7719 6.21813C63.355 6.64238 63.1504 7.16711 63.1504 7.79605C63.1504 8.42499 63.355 8.95717 63.7719 9.37398C64.1887 9.79823 64.6911 10.0104 65.2828 10.0104C65.8745 10.0104 66.3881 9.79823 66.8049 9.37398Z",
-              fill: "currentColor"
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-            "path",
-            {
-              d: "M71.3891 2.85757H72.8926V4.39828H74.6455V5.58172H72.8926V8.9683C72.8926 9.5898 73.1048 9.90985 73.5923 9.96568C73.89 10.0252 74.2398 10.0141 74.6455 9.9359V11.1863C74.1989 11.257 73.7858 11.2943 73.4062 11.2943C72.6731 11.2943 72.1595 11.1082 71.8543 10.7323C71.5454 10.3639 71.3891 9.79076 71.3891 9.02041V5.58172H70.4215V4.39828H71.3891V2.85757Z",
-              fill: "currentColor"
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-            "path",
-            {
-              d: "M76.1747 3.15526C75.9923 2.98035 75.903 2.76078 75.903 2.50772C75.903 2.25466 75.9923 2.04997 76.1747 1.86762C76.3496 1.69271 76.5691 1.60339 76.8222 1.60339C77.0753 1.60339 77.2874 1.69271 77.4623 1.86762C77.6372 2.04997 77.7265 2.2621 77.7265 2.50772C77.7265 2.75334 77.6372 2.97291 77.4623 3.15526C77.2874 3.33762 77.0678 3.42694 76.8222 3.42694C76.5766 3.42694 76.3496 3.33762 76.1747 3.15526ZM76.0593 4.39826H77.5777V11.2049H76.0593V4.39826Z",
-              fill: "currentColor"
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-            "path",
-            {
-              d: "M84.3023 8.9796L85.6681 9.55271C85.3778 10.0923 84.9498 10.5129 84.3879 10.8217C83.8259 11.1344 83.2044 11.2944 82.5197 11.2944C81.8349 11.2944 81.2506 11.1567 80.6998 10.8701C80.1491 10.5873 79.7025 10.1742 79.3713 9.6383C79.04 9.09868 78.8689 8.48835 78.8689 7.79987C78.8689 7.11138 79.0363 6.49361 79.3713 5.95771C79.7025 5.41809 80.1528 5.00873 80.6998 4.72589C81.2469 4.44305 81.8609 4.30164 82.5197 4.30164C83.1784 4.30164 83.8259 4.45794 84.3916 4.77427C84.9535 5.08688 85.3815 5.51113 85.6681 6.05075L84.3023 6.62015C83.9413 5.93539 83.2863 5.56323 82.5197 5.56323C81.9205 5.56323 81.4181 5.77536 81.0013 6.19961C80.5845 6.62387 80.3798 7.15977 80.3798 7.80731C80.3798 8.45486 80.5845 8.99076 81.0013 9.40757C81.4181 9.83182 81.9205 10.0439 82.5197 10.0439C83.2863 10.0439 83.9413 9.66807 84.3023 8.98703V8.9796Z",
-              fill: "currentColor"
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-            "path",
-            {
-              d: "M5.93091 10.8141L7.2758 9.41753L3.83719 5.84667C2.98568 4.9624 2.98568 3.52157 3.83719 2.63731C4.68871 1.75305 6.07617 1.75305 6.92769 2.63731L10.3663 6.20817L11.7112 4.81156L8.27258 1.24069C6.67975 -0.413401 4.08513 -0.413401 2.4923 1.24069C0.899472 2.89479 0.899472 5.58919 2.4923 7.24328L5.93091 10.8141Z",
-              fill: "currentColor"
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-            "path",
-            {
-              d: "M6.05827 3.54751C5.68761 3.1626 5.08404 3.1626 4.71338 3.54751C4.34272 3.93243 4.34272 4.55921 4.71338 4.94413L9.02103 9.41746L5.93054 12.6268L1.62288 8.15349C1.25223 7.76857 0.648653 7.76857 0.277994 8.15349C-0.0926647 8.5384 -0.0926647 9.16519 0.277994 9.5501L5.93054 15.4201L11.7108 9.41746L6.05827 3.54751Z",
-              fill: "currentColor"
-            }
-          )
-        ]
-      }
-    )
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+    Flex,
+    {
+      $justifyContent: settings.badge.alignment,
+      $alignItems: "center",
+      $gridColumn: "1 / -1",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Box, { $fontSize: "0.75rem", $marginRight: "0.5rem", children: "Powered by" }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+          "svg",
+          {
+            width: 86,
+            height: 16,
+            viewBox: "0 0 86 16",
+            style: { marginTop: "0.125rem" },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                "path",
+                {
+                  d: "M21.2354 6.16227C21.1796 5.95015 21.0494 5.76779 20.8261 5.61893C20.6028 5.46635 20.3423 5.39564 20.0408 5.39564C19.3151 5.39564 18.7941 5.69708 18.7941 6.2367C18.7941 6.49721 18.9095 6.69073 19.1402 6.81726C19.3635 6.94379 19.732 7.07033 20.2344 7.18569C21.0084 7.37177 21.4922 7.51691 21.9686 7.7402C22.203 7.85557 22.3928 7.97465 22.5305 8.10863C22.7948 8.3803 22.9548 8.74501 22.9362 9.20276C22.9176 9.86147 22.6571 10.375 22.1547 10.7397C21.6523 11.1082 20.9563 11.2905 20.0818 11.2905C19.2072 11.2905 18.5597 11.1268 18.0312 10.8067C17.5065 10.4867 17.2013 10.0215 17.1194 9.41116L18.6192 9.27719C18.6974 9.57491 18.8723 9.7982 19.1514 9.94706C19.4305 10.0959 19.7394 10.1778 20.0818 10.1778C20.4614 10.1778 20.7777 10.0996 21.0308 9.9359C21.2838 9.77959 21.4104 9.56002 21.4104 9.28835C21.4104 8.90876 21.0531 8.61104 20.5991 8.43613C20.3683 8.35053 20.0855 8.27238 19.7468 8.19423C19.2705 8.07886 18.8946 7.97094 18.6155 7.87418C18.3364 7.78486 18.0908 7.66205 17.8712 7.51319C17.4358 7.21547 17.2832 6.8247 17.2832 6.2367C17.2832 5.61521 17.5325 5.13141 18.0312 4.79648C18.5262 4.46526 19.2035 4.29407 20.0669 4.29407C21.5853 4.29407 22.5752 4.9044 22.7389 6.05807L21.228 6.16227H21.2354Z",
+                  fill: "currentColor"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                "path",
+                {
+                  d: "M29.4145 8.9796L30.7803 9.55271C30.49 10.0923 30.0621 10.5129 29.5001 10.8217C28.9382 11.1344 28.3167 11.2944 27.6319 11.2944C26.9472 11.2944 26.3629 11.1567 25.8121 10.8701C25.2613 10.5873 24.8147 10.1742 24.4835 9.6383C24.1523 9.09868 23.9811 8.48835 23.9811 7.79987C23.9811 7.11138 24.1486 6.49361 24.4835 5.95771C24.8147 5.41809 25.2613 5.00873 25.8121 4.72589C26.3629 4.44305 26.9732 4.30164 27.6319 4.30164C28.2906 4.30164 28.9382 4.45794 29.5038 4.77427C30.0658 5.08688 30.4938 5.51113 30.7803 6.05075L29.4145 6.62015C29.0535 5.93539 28.3985 5.56323 27.6319 5.56323C27.0327 5.56323 26.5303 5.77536 26.1135 6.19961C25.6967 6.62387 25.492 7.15977 25.492 7.80731C25.492 8.45486 25.6967 8.99076 26.1135 9.40757C26.5303 9.83182 27.0327 10.0439 27.6319 10.0439C28.3985 10.0439 29.0535 9.66807 29.4145 8.98703V8.9796Z",
+                  fill: "currentColor"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                "path",
+                {
+                  d: "M37.4386 11.2049V7.80341C37.4386 6.35945 36.9139 5.59282 35.697 5.59282C35.0978 5.59282 34.614 5.7975 34.2419 6.21059C33.8623 6.61996 33.6725 7.15214 33.6725 7.80713V11.2086H32.1615V1.9234H33.6725V5.47745C34.1004 4.73315 35.001 4.29773 36.1919 4.29773C37.167 4.29773 37.8666 4.59917 38.302 5.19834C38.7375 5.7975 38.9533 6.66834 38.9533 7.80341V11.2049H37.4349H37.4386Z",
+                  fill: "currentColor"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                "path",
+                {
+                  d: "M46.5692 5.38819C47.2167 6.07295 47.5777 7.1187 47.5107 8.30587H41.8242C41.9284 8.83805 42.1741 9.26602 42.5611 9.59352C42.9481 9.92473 43.4022 10.0885 43.9157 10.0885C44.8052 10.0885 45.5234 9.59724 45.8844 8.78222L47.1795 9.40372C46.8818 9.99172 46.4352 10.4495 45.8509 10.7881C45.2629 11.1268 44.6191 11.2943 43.9157 11.2943C42.9295 11.2943 42.0178 10.9444 41.3516 10.3453C40.6855 9.7461 40.2649 8.83432 40.2649 7.79602C40.2649 6.75771 40.6892 5.84222 41.3516 5.23933C42.0178 4.64017 42.9295 4.29034 43.9157 4.29034C44.9801 4.29034 45.9216 4.69971 46.5692 5.38447V5.38819ZM42.5388 6.00224C42.1592 6.32974 41.921 6.75772 41.8205 7.29734H46.0221C45.9179 6.75772 45.6835 6.3223 45.3039 5.99852C44.9243 5.67847 44.4628 5.51473 43.9195 5.51473C43.3761 5.51473 42.9221 5.67847 42.5425 6.00597L42.5388 6.00224Z",
+                  fill: "currentColor"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                "path",
+                {
+                  d: "M59.7699 5.23933C60.1495 5.86827 60.3132 6.68329 60.3132 7.80347V11.2049H58.8023V7.80347C58.8023 6.35952 58.3371 5.59288 57.2318 5.59288C56.6438 5.59288 56.1861 5.79384 55.8586 6.19577C55.5311 6.60141 55.3673 7.13731 55.3673 7.80347V11.2049H53.8489V7.80347C53.8489 6.35952 53.3838 5.59288 52.2785 5.59288C51.6905 5.59288 51.2327 5.79384 50.9052 6.19577C50.574 6.60141 50.4102 7.13731 50.4102 7.80347V11.2049H48.8993V4.39827H50.3433L50.4102 5.47379C50.8196 4.65878 51.5825 4.29407 52.8106 4.29407C53.9606 4.29407 54.7161 4.78531 55.077 5.76407C55.5199 4.81508 56.4428 4.29407 57.7677 4.29407C58.7093 4.29407 59.3829 4.61412 59.7699 5.23562V5.23933Z",
+                  fill: "currentColor"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                "path",
+                {
+                  d: "M67.4264 5.47382L67.4934 4.3983H68.9373V11.205H67.4934L67.4264 10.1294C67.0282 10.9147 66.1797 11.3092 64.8809 11.3017C63.102 11.3427 61.591 9.79823 61.6283 7.8035C61.591 5.8162 63.102 4.2606 64.8809 4.29782C66.0643 4.29782 67.0096 4.7444 67.4264 5.47754V5.47382ZM66.8049 9.37398C67.2217 8.95717 67.4264 8.43243 67.4264 7.79605C67.4264 7.15967 67.2217 6.64238 66.8049 6.21813C66.3881 5.80132 65.8782 5.58919 65.2828 5.58919C64.6874 5.58919 64.1887 5.80132 63.7719 6.21813C63.355 6.64238 63.1504 7.16711 63.1504 7.79605C63.1504 8.42499 63.355 8.95717 63.7719 9.37398C64.1887 9.79823 64.6911 10.0104 65.2828 10.0104C65.8745 10.0104 66.3881 9.79823 66.8049 9.37398Z",
+                  fill: "currentColor"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                "path",
+                {
+                  d: "M71.3891 2.85757H72.8926V4.39828H74.6455V5.58172H72.8926V8.9683C72.8926 9.5898 73.1048 9.90985 73.5923 9.96568C73.89 10.0252 74.2398 10.0141 74.6455 9.9359V11.1863C74.1989 11.257 73.7858 11.2943 73.4062 11.2943C72.6731 11.2943 72.1595 11.1082 71.8543 10.7323C71.5454 10.3639 71.3891 9.79076 71.3891 9.02041V5.58172H70.4215V4.39828H71.3891V2.85757Z",
+                  fill: "currentColor"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                "path",
+                {
+                  d: "M76.1747 3.15526C75.9923 2.98035 75.903 2.76078 75.903 2.50772C75.903 2.25466 75.9923 2.04997 76.1747 1.86762C76.3496 1.69271 76.5691 1.60339 76.8222 1.60339C77.0753 1.60339 77.2874 1.69271 77.4623 1.86762C77.6372 2.04997 77.7265 2.2621 77.7265 2.50772C77.7265 2.75334 77.6372 2.97291 77.4623 3.15526C77.2874 3.33762 77.0678 3.42694 76.8222 3.42694C76.5766 3.42694 76.3496 3.33762 76.1747 3.15526ZM76.0593 4.39826H77.5777V11.2049H76.0593V4.39826Z",
+                  fill: "currentColor"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                "path",
+                {
+                  d: "M84.3023 8.9796L85.6681 9.55271C85.3778 10.0923 84.9498 10.5129 84.3879 10.8217C83.8259 11.1344 83.2044 11.2944 82.5197 11.2944C81.8349 11.2944 81.2506 11.1567 80.6998 10.8701C80.1491 10.5873 79.7025 10.1742 79.3713 9.6383C79.04 9.09868 78.8689 8.48835 78.8689 7.79987C78.8689 7.11138 79.0363 6.49361 79.3713 5.95771C79.7025 5.41809 80.1528 5.00873 80.6998 4.72589C81.2469 4.44305 81.8609 4.30164 82.5197 4.30164C83.1784 4.30164 83.8259 4.45794 84.3916 4.77427C84.9535 5.08688 85.3815 5.51113 85.6681 6.05075L84.3023 6.62015C83.9413 5.93539 83.2863 5.56323 82.5197 5.56323C81.9205 5.56323 81.4181 5.77536 81.0013 6.19961C80.5845 6.62387 80.3798 7.15977 80.3798 7.80731C80.3798 8.45486 80.5845 8.99076 81.0013 9.40757C81.4181 9.83182 81.9205 10.0439 82.5197 10.0439C83.2863 10.0439 83.9413 9.66807 84.3023 8.98703V8.9796Z",
+                  fill: "currentColor"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                "path",
+                {
+                  d: "M5.93091 10.8141L7.2758 9.41753L3.83719 5.84667C2.98568 4.9624 2.98568 3.52157 3.83719 2.63731C4.68871 1.75305 6.07617 1.75305 6.92769 2.63731L10.3663 6.20817L11.7112 4.81156L8.27258 1.24069C6.67975 -0.413401 4.08513 -0.413401 2.4923 1.24069C0.899472 2.89479 0.899472 5.58919 2.4923 7.24328L5.93091 10.8141Z",
+                  fill: "currentColor"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                "path",
+                {
+                  d: "M6.05827 3.54751C5.68761 3.1626 5.08404 3.1626 4.71338 3.54751C4.34272 3.93243 4.34272 4.55921 4.71338 4.94413L9.02103 9.41746L5.93054 12.6268L1.62288 8.15349C1.25223 7.76857 0.648653 7.76857 0.277994 8.15349C-0.0926647 8.5384 -0.0926647 9.16519 0.277994 9.5501L5.93054 15.4201L11.7108 9.41746L6.05827 3.54751Z",
+                  fill: "currentColor"
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
 };
 
 // src/components/layout/RenderLayout.tsx
-var import_react11 = require("react");
+var import_react12 = require("react");
 var import_jsx_runtime11 = require("react/jsx-runtime");
 var Disabled = () => {
   const theme = nt();
@@ -10881,14 +11039,14 @@ var Disabled = () => {
 var Success = () => {
   const theme = nt();
   const { hydrate, data, api, setLayout, isPending } = useEmbed();
-  const [isOpen, setIsOpen] = (0, import_react11.useState)(true);
-  (0, import_react11.useEffect)(() => {
+  const [isOpen, setIsOpen] = (0, import_react12.useState)(true);
+  (0, import_react12.useEffect)(() => {
     if (api && data.component?.id) {
       hydrate();
       setTimeout(() => setIsOpen(false), 2e3);
     }
   }, [api, data.component?.id, hydrate]);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     if (!isPending && !isOpen) {
       setLayout("portal");
     }
@@ -10949,40 +11107,40 @@ var RenderLayout = ({ children }) => {
 };
 
 // src/components/layout/viewport/styles.ts
-var StyledViewport = dt(Flex)`
-  flex-wrap: wrap;
-  place-content: start;
+var StyledViewport = dt(Box).attrs(({ theme }) => ({
+  $gridTemplateColumns: `repeat(auto-fill, minmax(300px, 1fr))`,
+  $viewport: {
+    xl: {
+      $gridTemplateColumns: `repeat(${theme.numberOfColumns}, minmax(300px, 1fr))`
+    }
+  }
+})).withConfig({
+  shouldForwardProp: (prop) => !["$numberOfColumns", "numberOfColumns"].includes(prop)
+})`
+  display: grid;
+
   margin-left: auto;
   margin-right: auto;
-  gap: 2rem;
+  gap: 1rem;
 `;
 
 // src/components/layout/viewport/Viewport.tsx
 var import_jsx_runtime12 = require("react/jsx-runtime");
-var Viewport = (0, import_react12.forwardRef)(
+var Viewport = (0, import_react13.forwardRef)(
   ({ children, ...props }, ref) => {
-    const theme = nt();
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
-      StyledViewport,
-      {
-        ref,
-        $numberOfColumns: theme.numberOfColumns,
-        ...props,
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(RenderLayout, { children }),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Badge, {})
-        ]
-      }
-    );
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(StyledViewport, { ref, ...props, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(RenderLayout, { children }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Badge, {})
+    ] }) });
   }
 );
 Viewport.displayName = "Viewport";
 
 // src/components/layout/column/Column.tsx
-var import_react14 = require("react");
+var import_react15 = require("react");
 
 // src/components/layout/card/Card.tsx
-var import_react13 = require("react");
+var import_react14 = require("react");
 
 // src/components/layout/card/styles.ts
 var Element = dt(Box)``;
@@ -11026,7 +11184,7 @@ var StyledCard = dt.div(({ theme }) => {
 
 // src/components/layout/card/Card.tsx
 var import_jsx_runtime13 = require("react/jsx-runtime");
-var Card = (0, import_react13.forwardRef)(
+var Card = (0, import_react14.forwardRef)(
   ({ children, className }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(StyledCard, { ref, className, children });
   }
@@ -11035,14 +11193,12 @@ Card.displayName = "Card";
 
 // src/components/layout/column/styles.ts
 var StyledColumn = dt.div`
-  flex-grow: 1;
-  flex-basis: ${({ theme }) => `calc(${100 / theme.numberOfColumns}% - ${(theme.numberOfColumns - 1) / theme.numberOfColumns}rem)`};
   height: min-content;
 `;
 
 // src/components/layout/column/Column.tsx
 var import_jsx_runtime14 = require("react/jsx-runtime");
-var Column = (0, import_react14.forwardRef)(
+var Column = (0, import_react15.forwardRef)(
   ({ children, basis, ...props }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(StyledColumn, { ref, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Card, { children }) });
   }
@@ -11075,11 +11231,11 @@ function resolveDesignProps(props) {
     visibleFeatures: props.visibleFeatures
   };
 }
-var IncludedFeatures = (0, import_react15.forwardRef)(({ className, ...rest }, ref) => {
+var IncludedFeatures = (0, import_react16.forwardRef)(({ className, ...rest }, ref) => {
   const props = resolveDesignProps(rest);
   const theme = nt();
   const { data } = useEmbed();
-  const elements = (0, import_react15.useRef)([]);
+  const elements = (0, import_react16.useRef)([]);
   const shouldWrapChildren = useWrapChildren(elements.current);
   const isLightBackground = useIsLightBackground();
   const featureUsage = props.visibleFeatures ? props.visibleFeatures.reduce((acc, id) => {
@@ -11191,7 +11347,7 @@ var IncludedFeatures = (0, import_react15.forwardRef)(({ className, ...rest }, r
 IncludedFeatures.displayName = "IncludedFeatures";
 
 // src/components/elements/invoices/Invoices.tsx
-var import_react16 = require("react");
+var import_react17 = require("react");
 var import_jsx_runtime16 = require("react/jsx-runtime");
 function resolveDesignProps2(props) {
   return {
@@ -11245,18 +11401,18 @@ var InvoiceDate = ({ date, fontStyle, url }) => {
   }
   return dateText;
 };
-var Invoices = (0, import_react16.forwardRef)(({ className, data, ...rest }, ref) => {
+var Invoices = (0, import_react17.forwardRef)(({ className, data, ...rest }, ref) => {
   const props = resolveDesignProps2(rest);
   const theme = nt();
   const { api } = useEmbed();
-  const [invoices, setInvoices] = (0, import_react16.useState)(() => formatInvoices(data));
-  const [listSize, setListSize] = (0, import_react16.useState)(props.limit.number);
+  const [invoices, setInvoices] = (0, import_react17.useState)(() => formatInvoices(data));
+  const [listSize, setListSize] = (0, import_react17.useState)(props.limit.number);
   const toggleListSize = () => {
     setListSize(
       (prev2) => prev2 !== props.limit.number ? props.limit.number : 12
     );
   };
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     api?.listInvoices().then(({ data: data2 }) => {
       setInvoices(formatInvoices(data2));
     });
@@ -11322,7 +11478,7 @@ var Invoices = (0, import_react16.forwardRef)(({ className, data, ...rest }, ref
 Invoices.displayName = "Invoices";
 
 // src/components/elements/metered-features/MeteredFeatures.tsx
-var import_react17 = require("react");
+var import_react18 = require("react");
 var import_pluralize2 = __toESM(require_pluralize());
 
 // src/components/elements/metered-features/styles.ts
@@ -11369,9 +11525,9 @@ function resolveDesignProps3(props) {
     visibleFeatures: props.visibleFeatures
   };
 }
-var MeteredFeatures = (0, import_react17.forwardRef)(({ className, ...rest }, ref) => {
+var MeteredFeatures = (0, import_react18.forwardRef)(({ className, ...rest }, ref) => {
   const props = resolveDesignProps3(rest);
-  const elements = (0, import_react17.useRef)([]);
+  const elements = (0, import_react18.useRef)([]);
   const shouldWrapChildren = useWrapChildren(elements.current);
   const theme = nt();
   const { data } = useEmbed();
@@ -11493,8 +11649,8 @@ var MeteredFeatures = (0, import_react17.forwardRef)(({ className, ...rest }, re
 MeteredFeatures.displayName = "MeteredFeatures";
 
 // src/components/elements/payment-method/PaymentMethod.tsx
-var import_react22 = require("react");
-var import_react_dom = require("react-dom");
+var import_react23 = require("react");
+var import_react_dom2 = require("react-dom");
 
 // node_modules/@stripe/stripe-js/dist/index.mjs
 var V3_URL = "https://js.stripe.com/v3";
@@ -11634,7 +11790,7 @@ var loadStripe = function loadStripe2() {
 var import_react_stripe_js3 = require("@stripe/react-stripe-js");
 
 // src/components/shared/checkout-dialog/CheckoutDialog.tsx
-var import_react19 = require("react");
+var import_react20 = require("react");
 
 // src/components/shared/checkout-dialog/Navigation.tsx
 var import_jsx_runtime18 = require("react/jsx-runtime");
@@ -11661,7 +11817,7 @@ var Navigation = ({
             {
               $display: "none",
               $viewport: {
-                sm: {
+                md: {
                   $display: "block"
                 }
               },
@@ -11711,7 +11867,7 @@ var Navigation = ({
                 $cursor: "pointer"
               },
               $viewport: {
-                sm: {
+                md: {
                   $fontSize: `${19 / TEXT_BASE_SIZE}rem`
                 }
               },
@@ -11739,7 +11895,7 @@ var Navigation = ({
 };
 
 // src/components/shared/checkout-dialog/Sidebar.tsx
-var import_react18 = require("react");
+var import_react19 = require("react");
 var import_jsx_runtime19 = require("react/jsx-runtime");
 var Sidebar = ({
   addOns,
@@ -11762,7 +11918,7 @@ var Sidebar = ({
   const theme = nt();
   const { api, data, mode, setLayout } = useEmbed();
   const isLightBackground = useIsLightBackground();
-  const subscriptionPrice = (0, import_react18.useMemo)(() => {
+  const subscriptionPrice = (0, import_react19.useMemo)(() => {
     if (!selectedPlan || !selectedPlan.monthlyPrice || !selectedPlan.yearlyPrice) {
       return;
     }
@@ -11770,7 +11926,7 @@ var Sidebar = ({
       (planPeriod === "month" ? selectedPlan.monthlyPrice : selectedPlan.yearlyPrice)?.price
     );
   }, [selectedPlan, planPeriod]);
-  const checkout = (0, import_react18.useCallback)(async () => {
+  const checkout = (0, import_react19.useCallback)(async () => {
     const priceId = (planPeriod === "month" ? selectedPlan?.monthlyPrice : selectedPlan?.yearlyPrice)?.id;
     if (!api || !selectedPlan || !priceId) {
       return;
@@ -11836,12 +11992,13 @@ var Sidebar = ({
       ref: checkoutRef,
       tabIndex: 0,
       $flexDirection: "column",
+      $flexShrink: 0,
       $overflow: "auto",
       $backgroundColor: theme.card.background,
       $borderRadius: "0 0 0.5rem",
       $boxShadow: "0px 1px 20px 0px #1018280F, 0px 1px 3px 0px #1018281A;",
       $viewport: {
-        sm: {
+        md: {
           $width: "21.5rem"
         }
       },
@@ -12408,7 +12565,7 @@ var Plan = ({
                   $borderStyle: "solid",
                   $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.175)" : "hsla(0, 0%, 100%, 0.175)",
                   $viewport: {
-                    sm: {
+                    md: {
                       $gap: "1rem"
                     }
                   },
@@ -12547,8 +12704,8 @@ var Plan = ({
                         children: !plan.valid ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                           Tooltip,
                           {
-                            label: "Over usage limit",
-                            description: "Current usage exceeds the limit of this plan."
+                            trigger: "Over usage limit",
+                            content: "Current usage exceeds the limit of this plan."
                           }
                         ) : "Choose plan"
                       }
@@ -12782,28 +12939,29 @@ var CheckoutDialog = ({
 }) => {
   const theme = nt();
   const { api, data } = useEmbed();
-  const contentRef = (0, import_react19.useRef)(null);
-  const checkoutRef = (0, import_react19.useRef)(null);
-  const [checkoutStage, setCheckoutStage] = (0, import_react19.useState)("plan");
-  const [planPeriod, setPlanPeriod] = (0, import_react19.useState)(
+  const modalRef = (0, import_react20.useRef)(null);
+  const contentRef = (0, import_react20.useRef)(null);
+  const checkoutRef = (0, import_react20.useRef)(null);
+  const [checkoutStage, setCheckoutStage] = (0, import_react20.useState)("plan");
+  const [planPeriod, setPlanPeriod] = (0, import_react20.useState)(
     initialPeriod || data.company?.plan?.planPeriod || "month"
   );
-  const [charges, setCharges] = (0, import_react19.useState)();
-  const [paymentMethodId, setPaymentMethodId] = (0, import_react19.useState)();
-  const [isLoading, setIsLoading] = (0, import_react19.useState)(false);
-  const [error, setError] = (0, import_react19.useState)();
-  const [showPaymentForm, setShowPaymentForm] = (0, import_react19.useState)(
+  const [charges, setCharges] = (0, import_react20.useState)();
+  const [paymentMethodId, setPaymentMethodId] = (0, import_react20.useState)();
+  const [isLoading, setIsLoading] = (0, import_react20.useState)(false);
+  const [error, setError] = (0, import_react20.useState)();
+  const [showPaymentForm, setShowPaymentForm] = (0, import_react20.useState)(
     !data.subscription?.paymentMethod
   );
-  const [stripe, setStripe] = (0, import_react19.useState)(null);
-  const [setupIntent, setSetupIntent] = (0, import_react19.useState)();
-  const [top, setTop] = (0, import_react19.useState)(0);
+  const [stripe, setStripe] = (0, import_react20.useState)(null);
+  const [setupIntent, setSetupIntent] = (0, import_react20.useState)();
+  const [top, setTop] = (0, import_react20.useState)(0);
   const {
     plans: availablePlans,
     addOns: availableAddOns,
     periods: availablePeriods
   } = useAvailablePlans(planPeriod);
-  const checkoutStages = (0, import_react19.useMemo)(() => {
+  const checkoutStages = (0, import_react20.useMemo)(() => {
     const checkoutStages2 = [
       {
         id: "plan",
@@ -12825,20 +12983,20 @@ var CheckoutDialog = ({
     return checkoutStages2;
   }, [availableAddOns]);
   const currentPlan = data.company?.plan;
-  const [selectedPlan, setSelectedPlan] = (0, import_react19.useState)(
+  const [selectedPlan, setSelectedPlan] = (0, import_react20.useState)(
     () => availablePlans.find(
       (plan) => plan.id === (typeof initialPlanId !== "undefined" ? initialPlanId : currentPlan?.id)
     )
   );
   const currentAddOns = data.company?.addOns || [];
-  const [addOns, setAddOns] = (0, import_react19.useState)(
+  const [addOns, setAddOns] = (0, import_react20.useState)(
     () => availableAddOns.map((addOn) => ({
       ...addOn,
       isSelected: typeof initialAddOnId !== "undefined" ? addOn.id === initialAddOnId : currentAddOns.some((currentAddOn) => addOn.id === currentAddOn.id)
     }))
   );
   const isLightBackground = useIsLightBackground();
-  const previewCheckout = (0, import_react19.useCallback)(
+  const previewCheckout = (0, import_react20.useCallback)(
     async (plan, addOns2, newPeriod) => {
       const period = newPeriod || planPeriod;
       const planPriceId = period === "month" ? plan?.monthlyPrice?.id : plan?.yearlyPrice?.id;
@@ -12884,14 +13042,14 @@ var CheckoutDialog = ({
     },
     [api, planPeriod]
   );
-  const selectPlan = (0, import_react19.useCallback)(
+  const selectPlan = (0, import_react20.useCallback)(
     (plan, newPeriod) => {
       setSelectedPlan(plan);
       previewCheckout(plan, addOns, newPeriod);
     },
     [addOns, previewCheckout]
   );
-  const changePlanPeriod = (0, import_react19.useCallback)(
+  const changePlanPeriod = (0, import_react20.useCallback)(
     (period) => {
       if (selectedPlan) {
         selectPlan(selectedPlan, period);
@@ -12900,7 +13058,7 @@ var CheckoutDialog = ({
     },
     [selectedPlan, selectPlan, setPlanPeriod]
   );
-  const toggleAddOn = (0, import_react19.useCallback)(
+  const toggleAddOn = (0, import_react20.useCallback)(
     (id, newPeriod) => {
       const updatedAddOns = addOns.map((addOn) => ({
         ...addOn,
@@ -12914,12 +13072,12 @@ var CheckoutDialog = ({
     },
     [selectedPlan, addOns, planPeriod, previewCheckout]
   );
-  (0, import_react19.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     if (!stripe && setupIntent?.publishableKey) {
       setStripe(loadStripe(setupIntent.publishableKey));
     }
   }, [stripe, setupIntent?.publishableKey]);
-  (0, import_react19.useLayoutEffect)(() => {
+  (0, import_react20.useLayoutEffect)(() => {
     const parent = portal || document.body;
     const value = Math.abs(parent.getBoundingClientRect().top ?? 0);
     setTop(value);
@@ -12928,7 +13086,7 @@ var CheckoutDialog = ({
       parent.style.overflow = "";
     };
   }, [portal]);
-  (0, import_react19.useLayoutEffect)(() => {
+  (0, import_react20.useLayoutEffect)(() => {
     if (contentRef.current) {
       contentRef.current.scrollTo({
         top: 0,
@@ -12940,198 +13098,207 @@ var CheckoutDialog = ({
   const activeCheckoutStage = checkoutStages.find(
     (stage) => stage.id === checkoutStage
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(Modal, { id: "select-plan-dialog", size: "lg", top, contentRef, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ModalHeader, { bordered: true, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-      Flex,
-      {
-        $flexWrap: "wrap",
-        $gap: "0.5rem",
-        $viewport: {
-          sm: {
-            $gap: "1rem"
-          }
-        },
-        children: checkoutStages.map((stage, index, stages) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-          Navigation,
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+    Modal,
+    {
+      ref: modalRef,
+      id: "select-plan-dialog",
+      size: "lg",
+      top,
+      contentRef,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ModalHeader, { bordered: true, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+          Flex,
           {
-            name: stage.name,
-            index,
-            activeIndex: checkoutStages.findIndex(
-              (s2) => s2.id === checkoutStage
-            ),
-            isLast: index === stages.length - 1,
-            onClick: () => setCheckoutStage(stage.id)
-          },
-          stage.id
-        ))
-      }
-    ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
-      Flex,
-      {
-        $position: "relative",
-        $flexDirection: "column",
-        $height: "auto",
-        $viewport: {
-          sm: {
-            $flexDirection: "row",
-            $height: "calc(100% - 5rem)"
-          }
-        },
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
-            Flex,
-            {
-              $flexDirection: "column",
-              $flexGrow: "1",
-              $gap: "1.5rem",
-              $padding: "1.5rem",
-              $backgroundColor: isLightBackground ? "hsla(0, 0%, 0%, 0.025)" : "hsla(0, 0%, 100%, 0.025)",
-              $overflow: "auto",
-              $viewport: {
-                sm: {
-                  $gap: "1rem",
-                  $padding: "2rem 2.5rem 2rem 2.5rem"
-                }
+            $flexWrap: "wrap",
+            $gap: "0.5rem",
+            $viewport: {
+              md: {
+                $gap: "1rem"
+              }
+            },
+            children: checkoutStages.map((stage, index, stages) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+              Navigation,
+              {
+                name: stage.name,
+                index,
+                activeIndex: checkoutStages.findIndex(
+                  (s2) => s2.id === checkoutStage
+                ),
+                isLast: index === stages.length - 1,
+                onClick: () => setCheckoutStage(stage.id)
               },
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
-                  Flex,
-                  {
-                    $flexDirection: "column",
-                    $gap: "1.5rem",
-                    $viewport: {
-                      sm: {
-                        $flexDirection: "row",
-                        $justifyContent: "space-between",
-                        $alignItems: "start",
-                        $gap: "1rem"
-                      }
-                    },
-                    children: [
-                      activeCheckoutStage && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
-                        Flex,
-                        {
-                          $flexDirection: "column",
-                          $alignItems: "center",
-                          $gap: "0.25rem",
-                          $viewport: {
-                            sm: {
-                              $alignItems: "start",
-                              $gap: "1rem",
-                              $marginBottom: "1rem"
+              stage.id
+            ))
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+          Flex,
+          {
+            $position: "relative",
+            $flexDirection: "column",
+            $height: "auto",
+            $viewport: {
+              md: {
+                $flexDirection: "row",
+                $height: "calc(100% - 5rem)"
+              }
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+                Flex,
+                {
+                  $flexDirection: "column",
+                  $flexGrow: "1",
+                  $gap: "1.5rem",
+                  $padding: "1.5rem",
+                  $backgroundColor: isLightBackground ? "hsla(0, 0%, 0%, 0.025)" : "hsla(0, 0%, 100%, 0.025)",
+                  $overflow: "auto",
+                  $viewport: {
+                    md: {
+                      $padding: "2rem 2.5rem 2rem 2.5rem"
+                    }
+                  },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+                      Flex,
+                      {
+                        $flexDirection: "column",
+                        $flexWrap: "wrap",
+                        $gap: "1.5rem",
+                        $viewport: {
+                          md: {
+                            $flexDirection: "row",
+                            $justifyContent: "space-between",
+                            $alignItems: "start",
+                            $gap: "1rem"
+                          }
+                        },
+                        children: [
+                          activeCheckoutStage && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+                            Flex,
+                            {
+                              $flexDirection: "column",
+                              $alignItems: "center",
+                              $gap: "0.25rem",
+                              $viewport: {
+                                md: {
+                                  $alignItems: "start"
+                                }
+                              },
+                              children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                                  Text,
+                                  {
+                                    as: "h3",
+                                    $font: theme.typography.heading3.fontFamily,
+                                    $size: theme.typography.heading3.fontSize,
+                                    $weight: theme.typography.heading3.fontWeight,
+                                    $color: theme.typography.heading3.color,
+                                    $marginBottom: "0.5rem",
+                                    children: activeCheckoutStage.label
+                                  }
+                                ),
+                                activeCheckoutStage?.description && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                                  Text,
+                                  {
+                                    as: "p",
+                                    $font: theme.typography.text.fontFamily,
+                                    $size: theme.typography.text.fontSize,
+                                    $weight: theme.typography.text.fontWeight,
+                                    $color: theme.typography.text.color,
+                                    children: activeCheckoutStage.description
+                                  }
+                                )
+                              ]
                             }
-                          },
-                          children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-                              Text,
-                              {
-                                as: "h3",
-                                $font: theme.typography.heading3.fontFamily,
-                                $size: theme.typography.heading3.fontSize,
-                                $weight: theme.typography.heading3.fontWeight,
-                                $color: theme.typography.heading3.color,
-                                $marginBottom: "0.5rem",
-                                children: activeCheckoutStage.label
-                              }
-                            ),
-                            activeCheckoutStage?.description && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-                              Text,
-                              {
-                                as: "p",
-                                $font: theme.typography.text.fontFamily,
-                                $size: theme.typography.text.fontSize,
-                                $weight: theme.typography.text.fontWeight,
-                                $color: theme.typography.text.color,
-                                children: activeCheckoutStage.description
-                              }
-                            )
-                          ]
-                        }
-                      ),
-                      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-                        PeriodToggle,
-                        {
-                          options: availablePeriods,
-                          selectedOption: planPeriod,
-                          selectedPlan,
-                          onChange: changePlanPeriod
-                        }
-                      )
-                    ]
-                  }
-                ),
-                checkoutStage === "plan" && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-                  Plan,
-                  {
-                    isLoading,
-                    period: planPeriod,
-                    plans: availablePlans,
-                    currentPlan,
-                    selectedPlan,
-                    selectPlan
-                  }
-                ),
-                checkoutStage === "addons" && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-                  AddOns,
-                  {
-                    isLoading,
-                    period: planPeriod,
-                    addOns,
-                    toggle: (id) => toggleAddOn(id)
-                  }
-                ),
-                checkoutStage === "checkout" && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-                  Checkout,
-                  {
-                    setPaymentMethodId: (id) => setPaymentMethodId(id),
-                    togglePaymentForm: () => setShowPaymentForm((prev2) => !prev2),
-                    setupIntent,
-                    showPaymentForm,
-                    stripe
-                  }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-            Sidebar,
-            {
-              addOns,
-              charges,
-              checkoutRef,
-              checkoutStage,
-              currentAddOns,
-              currentPlan,
-              error,
-              isLoading,
-              paymentMethodId,
-              planPeriod,
-              selectedPlan,
-              setCheckoutStage: (stage) => setCheckoutStage(stage),
-              setError: (msg) => setError(msg),
-              setSetupIntent: (intent) => setSetupIntent(intent),
-              showPaymentForm,
-              toggleLoading: () => setIsLoading((prev2) => !prev2)
-            }
-          )
-        ]
-      }
-    )
-  ] });
+                          ),
+                          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                            PeriodToggle,
+                            {
+                              options: availablePeriods,
+                              selectedOption: planPeriod,
+                              selectedPlan,
+                              onChange: changePlanPeriod,
+                              layerRef: modalRef
+                            }
+                          )
+                        ]
+                      }
+                    ),
+                    checkoutStage === "plan" && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                      Plan,
+                      {
+                        isLoading,
+                        period: planPeriod,
+                        plans: availablePlans,
+                        currentPlan,
+                        selectedPlan,
+                        selectPlan
+                      }
+                    ),
+                    checkoutStage === "addons" && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                      AddOns,
+                      {
+                        isLoading,
+                        period: planPeriod,
+                        addOns,
+                        toggle: (id) => toggleAddOn(id)
+                      }
+                    ),
+                    checkoutStage === "checkout" && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                      Checkout,
+                      {
+                        setPaymentMethodId: (id) => setPaymentMethodId(id),
+                        togglePaymentForm: () => setShowPaymentForm((prev2) => !prev2),
+                        setupIntent,
+                        showPaymentForm,
+                        stripe
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                Sidebar,
+                {
+                  addOns,
+                  charges,
+                  checkoutRef,
+                  checkoutStage,
+                  currentAddOns,
+                  currentPlan,
+                  error,
+                  isLoading,
+                  paymentMethodId,
+                  planPeriod,
+                  selectedPlan,
+                  setCheckoutStage: (stage) => setCheckoutStage(stage),
+                  setError: (msg) => setError(msg),
+                  setSetupIntent: (intent) => setSetupIntent(intent),
+                  showPaymentForm,
+                  toggleLoading: () => setIsLoading((prev2) => !prev2)
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
 };
 
 // src/components/shared/payment-form/PaymentForm.tsx
-var import_react20 = require("react");
+var import_react21 = require("react");
 var import_react_stripe_js2 = require("@stripe/react-stripe-js");
 var import_jsx_runtime25 = require("react/jsx-runtime");
 var PaymentForm = ({ onConfirm }) => {
   const stripe = (0, import_react_stripe_js2.useStripe)();
   const elements = (0, import_react_stripe_js2.useElements)();
   const { api } = useEmbed();
-  const [message, setMessage] = (0, import_react20.useState)(null);
-  const [isLoading, setIsLoading] = (0, import_react20.useState)(false);
-  const [isConfirmed, setIsConfirmed] = (0, import_react20.useState)(false);
+  const [message, setMessage] = (0, import_react21.useState)(null);
+  const [isLoading, setIsLoading] = (0, import_react21.useState)(false);
+  const [isConfirmed, setIsConfirmed] = (0, import_react21.useState)(false);
   const handleSubmit = async (event) => {
     event.preventDefault();
     if (!api || !stripe || !elements) {
@@ -13192,15 +13359,34 @@ var PaymentForm = ({ onConfirm }) => {
 };
 
 // src/components/shared/period-toggle/PeriodToggle.tsx
+var import_react22 = require("react");
 var import_jsx_runtime26 = require("react/jsx-runtime");
 var PeriodToggle = ({
   options,
   selectedOption,
   selectedPlan,
-  onChange
+  onChange,
+  layerRef
 }) => {
   const theme = nt();
   const isLightBackground = useIsLightBackground();
+  const [tooltipZIndex, setTooltipZIndex] = (0, import_react22.useState)(1);
+  const savingsPercentage = (0, import_react22.useMemo)(() => {
+    if (selectedPlan) {
+      const monthly = (selectedPlan?.monthlyPrice?.price || 0) * 12;
+      const yearly = selectedPlan?.yearlyPrice?.price || 0;
+      return Math.round((monthly - yearly) / monthly * 1e4) / 100;
+    }
+    return 0;
+  }, [selectedPlan]);
+  (0, import_react22.useLayoutEffect)(() => {
+    const element = layerRef?.current;
+    if (element) {
+      const style = getComputedStyle(element);
+      const value = style.getPropertyValue("z-index");
+      setTooltipZIndex(parseInt(value) + 1);
+    }
+  }, [layerRef]);
   return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     Flex,
     {
@@ -13212,7 +13398,7 @@ var PeriodToggle = ({
       $borderRadius: "2.5rem",
       $cursor: "pointer",
       $viewport: {
-        sm: {
+        md: {
           $width: "fit-content"
         }
       },
@@ -13225,13 +13411,14 @@ var PeriodToggle = ({
             $justifyContent: "center",
             $alignItems: "center",
             $flexGrow: 1,
+            $whiteSpace: "nowrap",
             $padding: "0.75rem 1rem",
             ...option === selectedOption && {
               $backgroundColor: isLightBackground ? "hsl(0, 0%, 92.5%)" : "hsl(0, 0%, 7.5%)"
             },
             $borderRadius: "2.5rem",
             $viewport: {
-              sm: {
+              md: {
                 $padding: "0.375rem 1rem"
               }
             },
@@ -13252,14 +13439,26 @@ var PeriodToggle = ({
           },
           option
         );
-        if (option === "year") {
+        if (option === "year" && savingsPercentage > 0) {
           return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
             Tooltip,
             {
-              label: element,
-              description: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Savings, { plan: selectedPlan, period: selectedOption }),
+              trigger: element,
+              content: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+                Text,
+                {
+                  $font: theme.typography.text.fontFamily,
+                  $size: 11,
+                  $weight: theme.typography.text.fontWeight,
+                  $color: theme.primary,
+                  $leading: 1,
+                  children: selectedOption === "month" ? `Save up to ${savingsPercentage}% with yearly billing` : `You are saving ${savingsPercentage}% with yearly billing`
+                }
+              ),
+              zIndex: tooltipZIndex,
               $flexGrow: 1
-            }
+            },
+            option
           );
         }
         return element;
@@ -13268,34 +13467,8 @@ var PeriodToggle = ({
   );
 };
 
-// src/components/shared/savings/Savings.tsx
-var import_react21 = require("react");
-var import_jsx_runtime27 = require("react/jsx-runtime");
-var Savings = ({ plan, period }) => {
-  const theme = nt();
-  const savingsPercentage = (0, import_react21.useMemo)(() => {
-    if (plan) {
-      const monthly = (plan?.monthlyPrice?.price || 0) * 12;
-      const yearly = plan?.yearlyPrice?.price || 0;
-      return Math.round((monthly - yearly) / monthly * 1e4) / 100;
-    }
-    return 0;
-  }, [plan]);
-  return savingsPercentage > 0 && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-    Text,
-    {
-      $font: theme.typography.text.fontFamily,
-      $size: 11,
-      $weight: theme.typography.text.fontWeight,
-      $color: theme.primary,
-      $leading: 1,
-      children: period === "month" ? `Save up to ${savingsPercentage}% with yearly billing` : `You are saving ${savingsPercentage}% with yearly billing`
-    }
-  );
-};
-
 // src/components/elements/payment-method/PaymentMethod.tsx
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 var resolveDesignProps4 = (props) => {
   return {
     header: {
@@ -13318,9 +13491,9 @@ var PaymentMethodElement = ({
   const theme = nt();
   const isLightBackground = useIsLightBackground();
   const sizeFactor = size === "lg" ? 2 : size === "md" ? 1 : 0.5;
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(Flex, { $flexDirection: "column", $gap: `${sizeFactor}rem`, children: [
-    props.header.isVisible && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(Flex, { $justifyContent: "space-between", $alignItems: "center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(Flex, { $flexDirection: "column", $gap: `${sizeFactor}rem`, children: [
+    props.header.isVisible && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(Flex, { $justifyContent: "space-between", $alignItems: "center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
         Text,
         {
           $font: theme.typography[props.header.fontStyle].fontFamily,
@@ -13330,7 +13503,7 @@ var PaymentMethodElement = ({
           children: "Payment Method"
         }
       ),
-      props.functions.showExpiration && typeof monthsToExpiration === "number" && monthsToExpiration < 4 && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+      props.functions.showExpiration && typeof monthsToExpiration === "number" && monthsToExpiration < 4 && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
         Text,
         {
           $font: theme.typography.text.fontFamily,
@@ -13340,7 +13513,7 @@ var PaymentMethodElement = ({
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
       Flex,
       {
         $justifyContent: "space-between",
@@ -13349,8 +13522,8 @@ var PaymentMethodElement = ({
         $padding: `${sizeFactor / 2}rem ${sizeFactor}rem`,
         $borderRadius: "9999px",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Text, { $font: theme.typography.text.fontFamily, $size: 14, children: cardLast4 ? `\u{1F4B3} Card ending in ${cardLast4}` : "Other existing payment method" }),
-          props.functions.allowEdit && onEdit && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Text, { $font: theme.typography.text.fontFamily, $size: 14, children: cardLast4 ? `\u{1F4B3} Card ending in ${cardLast4}` : "Other existing payment method" }),
+          props.functions.allowEdit && onEdit && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
             Text,
             {
               onClick: onEdit,
@@ -13367,20 +13540,20 @@ var PaymentMethodElement = ({
     )
   ] });
 };
-var PaymentMethod = (0, import_react22.forwardRef)(({ children, className, portal, allowEdit = true, ...rest }, ref) => {
+var PaymentMethod = (0, import_react23.forwardRef)(({ children, className, portal, allowEdit = true, ...rest }, ref) => {
   const props = resolveDesignProps4(rest);
   const theme = nt();
   const { api, data, layout, setLayout } = useEmbed();
-  const [isLoading, setIsLoading] = (0, import_react22.useState)(false);
-  const [error, setError] = (0, import_react22.useState)();
-  const [showPaymentForm, setShowPaymentForm] = (0, import_react22.useState)(
+  const [isLoading, setIsLoading] = (0, import_react23.useState)(false);
+  const [error, setError] = (0, import_react23.useState)();
+  const [showPaymentForm, setShowPaymentForm] = (0, import_react23.useState)(
     () => typeof data.subscription?.paymentMethod === "undefined"
   );
-  const [stripe, setStripe] = (0, import_react22.useState)(null);
-  const [setupIntent, setSetupIntent] = (0, import_react22.useState)();
-  const [top, setTop] = (0, import_react22.useState)(0);
+  const [stripe, setStripe] = (0, import_react23.useState)(null);
+  const [setupIntent, setSetupIntent] = (0, import_react23.useState)();
+  const [top, setTop] = (0, import_react23.useState)(0);
   const isLightBackground = useIsLightBackground();
-  const paymentMethod = (0, import_react22.useMemo)(() => {
+  const paymentMethod = (0, import_react23.useMemo)(() => {
     const { paymentMethodType, cardLast4, cardExpMonth, cardExpYear } = data.subscription?.paymentMethod || {};
     let monthsToExpiration;
     if (typeof cardExpYear === "number" && typeof cardExpMonth === "number") {
@@ -13400,7 +13573,7 @@ var PaymentMethod = (0, import_react22.forwardRef)(({ children, className, porta
       monthsToExpiration
     };
   }, [data.subscription?.paymentMethod]);
-  const createSetupIntent = (0, import_react22.useCallback)(async () => {
+  const createSetupIntent = (0, import_react23.useCallback)(async () => {
     if (!api || !data.component?.id) {
       return;
     }
@@ -13417,7 +13590,7 @@ var PaymentMethod = (0, import_react22.forwardRef)(({ children, className, porta
       setIsLoading(false);
     }
   }, [api, data.component?.id]);
-  const updatePaymentMethod = (0, import_react22.useCallback)(
+  const updatePaymentMethod = (0, import_react23.useCallback)(
     async (id) => {
       if (!api || !id) {
         return;
@@ -13438,12 +13611,12 @@ var PaymentMethod = (0, import_react22.forwardRef)(({ children, className, porta
     },
     [api, setLayout]
   );
-  (0, import_react22.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     if (!stripe && setupIntent?.publishableKey) {
       setStripe(loadStripe(setupIntent.publishableKey));
     }
   }, [stripe, setupIntent?.publishableKey]);
-  (0, import_react22.useLayoutEffect)(() => {
+  (0, import_react23.useLayoutEffect)(() => {
     const parent = portal || document.body;
     const value = Math.abs(parent.getBoundingClientRect().top ?? 0);
     setTop(value);
@@ -13455,8 +13628,8 @@ var PaymentMethod = (0, import_react22.forwardRef)(({ children, className, porta
   if (!paymentMethod.paymentMethodType) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(Element, { ref, className, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(Element, { ref, className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
       PaymentMethodElement,
       {
         ...allowEdit && { onEdit: () => setLayout("payment") },
@@ -13464,9 +13637,9 @@ var PaymentMethod = (0, import_react22.forwardRef)(({ children, className, porta
         ...props
       }
     ),
-    layout === "payment" && (0, import_react_dom.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(Modal, { size: "md", top, onClose: () => setShowPaymentForm(false), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ModalHeader, { bordered: true, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+    layout === "payment" && (0, import_react_dom2.createPortal)(
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(Modal, { size: "md", top, onClose: () => setShowPaymentForm(false), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ModalHeader, { bordered: true, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
           Text,
           {
             $font: theme.typography.text.fontFamily,
@@ -13476,7 +13649,7 @@ var PaymentMethod = (0, import_react22.forwardRef)(({ children, className, porta
             children: "Edit payment method"
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Flex, { $position: "relative", $height: "calc(100% - 5rem)", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Flex, { $position: "relative", $height: "calc(100% - 5rem)", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
           Flex,
           {
             $flexDirection: "column",
@@ -13485,8 +13658,8 @@ var PaymentMethod = (0, import_react22.forwardRef)(({ children, className, porta
             $padding: "2rem 2.5rem 2rem 2.5rem",
             $backgroundColor: isLightBackground ? "hsla(0, 0%, 0%, 0.025)" : "hsla(0, 0%, 100%, 0.025)",
             $overflow: "auto",
-            children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
-              showPaymentForm ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
+              showPaymentForm ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                 import_react_stripe_js3.Elements,
                 {
                   stripe,
@@ -13517,15 +13690,15 @@ var PaymentMethod = (0, import_react22.forwardRef)(({ children, className, porta
                     },
                     clientSecret: setupIntent?.setupIntentClientSecret
                   },
-                  children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                     PaymentForm,
                     {
                       onConfirm: (value) => updatePaymentMethod(value)
                     }
                   )
                 }
-              ) : /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(Flex, { $flexDirection: "column", $gap: "2rem", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+              ) : /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(Flex, { $flexDirection: "column", $gap: "2rem", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                   PaymentMethodElement,
                   {
                     size: "lg",
@@ -13533,7 +13706,7 @@ var PaymentMethod = (0, import_react22.forwardRef)(({ children, className, porta
                     ...props
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                   Text,
                   {
                     onClick: createSetupIntent,
@@ -13545,7 +13718,7 @@ var PaymentMethod = (0, import_react22.forwardRef)(({ children, className, porta
                   }
                 ) })
               ] }),
-              !isLoading && error && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+              !isLoading && error && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                 Text,
                 {
                   $font: theme.typography.text.fontFamily,
@@ -13566,9 +13739,9 @@ var PaymentMethod = (0, import_react22.forwardRef)(({ children, className, porta
 PaymentMethod.displayName = "PaymentMethod";
 
 // src/components/elements/plan-manager/PlanManager.tsx
-var import_react23 = require("react");
-var import_react_dom2 = require("react-dom");
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_react24 = require("react");
+var import_react_dom3 = require("react-dom");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 var resolveDesignProps5 = (props) => {
   return {
     header: {
@@ -13582,7 +13755,7 @@ var resolveDesignProps5 = (props) => {
       },
       price: {
         isVisible: props.header?.price?.isVisible ?? true,
-        fontStyle: props.header?.price?.fontStyle ?? "text"
+        fontStyle: props.header?.price?.fontStyle ?? "heading3"
       }
     },
     addOns: {
@@ -13597,7 +13770,7 @@ var resolveDesignProps5 = (props) => {
     }
   };
 };
-var PlanManager = (0, import_react23.forwardRef)(({ children, className, portal, ...rest }, ref) => {
+var PlanManager = (0, import_react24.forwardRef)(({ children, className, portal, ...rest }, ref) => {
   const props = resolveDesignProps5(rest);
   const theme = nt();
   const { data, layout, setLayout } = useEmbed();
@@ -13607,7 +13780,7 @@ var PlanManager = (0, import_react23.forwardRef)(({ children, className, portal,
     canChangePlan: data.capabilities?.checkout ?? true,
     currentPlan: data.company?.plan
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
     Element,
     {
       as: Flex,
@@ -13616,7 +13789,7 @@ var PlanManager = (0, import_react23.forwardRef)(({ children, className, portal,
       $flexDirection: "column",
       $gap: "2rem",
       children: [
-        props.header.isVisible && currentPlan && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+        props.header.isVisible && currentPlan && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
           Flex,
           {
             $justifyContent: "space-between",
@@ -13624,8 +13797,8 @@ var PlanManager = (0, import_react23.forwardRef)(({ children, className, portal,
             $flexWrap: "wrap",
             $gap: "1rem",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(Flex, { $flexDirection: "column", $gap: "1rem", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(Flex, { $flexDirection: "column", $gap: "1rem", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
                   Text,
                   {
                     as: Box,
@@ -13637,7 +13810,7 @@ var PlanManager = (0, import_react23.forwardRef)(({ children, className, portal,
                     children: currentPlan.name
                   }
                 ),
-                props.header.description.isVisible && currentPlan.description && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+                props.header.description.isVisible && currentPlan.description && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
                   Text,
                   {
                     as: Box,
@@ -13649,8 +13822,8 @@ var PlanManager = (0, import_react23.forwardRef)(({ children, className, portal,
                   }
                 )
               ] }),
-              props.header.price.isVisible && typeof currentPlan.planPrice === "number" && currentPlan.planPeriod && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(Box, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+              props.header.price.isVisible && typeof currentPlan.planPrice === "number" && currentPlan.planPeriod && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(Box, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
                   Text,
                   {
                     $font: theme.typography[props.header.price.fontStyle].fontFamily,
@@ -13660,7 +13833,7 @@ var PlanManager = (0, import_react23.forwardRef)(({ children, className, portal,
                     children: formatCurrency(currentPlan.planPrice)
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+                /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
                   Text,
                   {
                     $font: theme.typography[props.header.price.fontStyle].fontFamily,
@@ -13677,8 +13850,8 @@ var PlanManager = (0, import_react23.forwardRef)(({ children, className, portal,
             ]
           }
         ),
-        props.addOns.isVisible && addOns.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(Flex, { $flexDirection: "column", $gap: "1rem", children: [
-          props.addOns.showLabel && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+        props.addOns.isVisible && addOns.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(Flex, { $flexDirection: "column", $gap: "1rem", children: [
+          props.addOns.showLabel && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
             Text,
             {
               $font: theme.typography.text.fontFamily,
@@ -13689,7 +13862,7 @@ var PlanManager = (0, import_react23.forwardRef)(({ children, className, portal,
               children: "Addons"
             }
           ),
-          addOns.map((addOn) => /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+          addOns.map((addOn) => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
             Flex,
             {
               $justifyContent: "space-between",
@@ -13697,7 +13870,7 @@ var PlanManager = (0, import_react23.forwardRef)(({ children, className, portal,
               $flexWrap: "wrap",
               $gap: "1rem",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
                   Text,
                   {
                     $font: theme.typography[props.addOns.fontStyle].fontFamily,
@@ -13707,7 +13880,7 @@ var PlanManager = (0, import_react23.forwardRef)(({ children, className, portal,
                     children: addOn.name
                   }
                 ),
-                addOn.planPrice && addOn.planPeriod && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+                addOn.planPrice && addOn.planPeriod && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
                   Text,
                   {
                     $font: theme.typography.text.fontFamily,
@@ -13726,7 +13899,7 @@ var PlanManager = (0, import_react23.forwardRef)(({ children, className, portal,
             addOn.id
           ))
         ] }),
-        canChangePlan && props.callToAction.isVisible && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+        canChangePlan && props.callToAction.isVisible && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
           EmbedButton,
           {
             onClick: () => {
@@ -13737,8 +13910,8 @@ var PlanManager = (0, import_react23.forwardRef)(({ children, className, portal,
             children: "Change Plan"
           }
         ),
-        canChangePlan && layout === "checkout" && (0, import_react_dom2.createPortal)(
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(CheckoutDialog, { ...portal && { portal } }),
+        canChangePlan && layout === "checkout" && (0, import_react_dom3.createPortal)(
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(CheckoutDialog, { ...portal && { portal } }),
           portal || document.body
         )
       ]
@@ -13748,10 +13921,10 @@ var PlanManager = (0, import_react23.forwardRef)(({ children, className, portal,
 PlanManager.displayName = "PlanManager";
 
 // src/components/elements/pricing-table/PricingTable.tsx
-var import_react24 = require("react");
-var import_react_dom3 = require("react-dom");
+var import_react25 = require("react");
+var import_react_dom4 = require("react-dom");
 var import_pluralize4 = __toESM(require_pluralize());
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 var resolveDesignProps6 = (props) => {
   return {
     showPeriodToggle: props.showPeriodToggle ?? true,
@@ -13791,21 +13964,21 @@ var resolveDesignProps6 = (props) => {
     }
   };
 };
-var PricingTable = (0, import_react24.forwardRef)(({ children, className, portal, ...rest }, ref) => {
+var PricingTable = (0, import_react25.forwardRef)(({ children, className, portal, ...rest }, ref) => {
   const props = resolveDesignProps6(rest);
   const theme = nt();
   const { data, layout, setLayout } = useEmbed();
-  const [selectedPeriod, setSelectedPeriod] = (0, import_react24.useState)(
+  const [selectedPeriod, setSelectedPeriod] = (0, import_react25.useState)(
     () => data.company?.plan?.planPeriod || "month"
   );
-  const [selectedPlanId, setSelectedPlanId] = (0, import_react24.useState)();
-  const [selectedAddOnId, setSelectedAddOnId] = (0, import_react24.useState)();
+  const [selectedPlanId, setSelectedPlanId] = (0, import_react25.useState)();
+  const [selectedAddOnId, setSelectedAddOnId] = (0, import_react25.useState)();
   const { plans, addOns, periods } = useAvailablePlans(selectedPeriod);
   const isLightBackground = useIsLightBackground();
   const canChangePlan = data.capabilities?.checkout ?? true;
   const cardPadding = theme.card.padding / TEXT_BASE_SIZE;
   const currentPlanIndex = plans.findIndex((plan) => plan.current);
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
     FussyChild,
     {
       ref,
@@ -13814,8 +13987,8 @@ var PricingTable = (0, import_react24.forwardRef)(({ children, className, portal
       $flexDirection: "column",
       $gap: "2rem",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Box, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(Box, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
             Flex,
             {
               $flexDirection: "column",
@@ -13824,13 +13997,13 @@ var PricingTable = (0, import_react24.forwardRef)(({ children, className, portal
               $gap: "1rem",
               $marginBottom: "1rem",
               $viewport: {
-                sm: {
+                md: {
                   $flexDirection: "row",
                   $justifyContent: "space-between"
                 }
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                   Text,
                   {
                     $font: theme.typography[props.header.fontStyle].fontFamily,
@@ -13840,7 +14013,7 @@ var PricingTable = (0, import_react24.forwardRef)(({ children, className, portal
                     children: props.header.isVisible && props.plans.isVisible && plans.length > 0 && "Plans"
                   }
                 ),
-                props.showPeriodToggle && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                props.showPeriodToggle && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                   PeriodToggle,
                   {
                     options: periods,
@@ -13851,7 +14024,7 @@ var PricingTable = (0, import_react24.forwardRef)(({ children, className, portal
               ]
             }
           ),
-          props.plans.isVisible && plans.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+          props.plans.isVisible && plans.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
             Box,
             {
               $display: "grid",
@@ -13859,7 +14032,7 @@ var PricingTable = (0, import_react24.forwardRef)(({ children, className, portal
               $gap: "1rem",
               children: plans.map((plan, index, self2) => {
                 const isActivePlan = plan.current && data.company?.plan?.planPeriod === selectedPeriod;
-                return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+                return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
                   Flex,
                   {
                     $position: "relative",
@@ -13872,7 +14045,7 @@ var PricingTable = (0, import_react24.forwardRef)(({ children, className, portal
                     $outlineColor: isActivePlan ? theme.primary : "transparent",
                     ...theme.card.hasShadow && { $boxShadow: cardBoxShadow },
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+                      /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
                         Flex,
                         {
                           $flexDirection: "column",
@@ -13882,7 +14055,7 @@ var PricingTable = (0, import_react24.forwardRef)(({ children, className, portal
                           $borderStyle: "solid",
                           $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.175)" : "hsla(0, 0%, 100%, 0.175)",
                           children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                               Text,
                               {
                                 $font: theme.typography[props.plans.name.fontStyle].fontFamily,
@@ -13892,7 +14065,7 @@ var PricingTable = (0, import_react24.forwardRef)(({ children, className, portal
                                 children: plan.name
                               }
                             ) }),
-                            props.plans.description.isVisible && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                            props.plans.description.isVisible && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                               Text,
                               {
                                 $font: theme.typography[props.plans.description.fontStyle].fontFamily,
@@ -13902,8 +14075,8 @@ var PricingTable = (0, import_react24.forwardRef)(({ children, className, portal
                                 children: plan.description
                               }
                             ) }),
-                            /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Box, { children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                            /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(Box, { children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                                 Text,
                                 {
                                   $font: theme.typography[props.plans.name.fontStyle].fontFamily,
@@ -13915,7 +14088,7 @@ var PricingTable = (0, import_react24.forwardRef)(({ children, className, portal
                                   )
                                 }
                               ),
-                              /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+                              /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
                                 Text,
                                 {
                                   $font: theme.typography[props.plans.name.fontStyle].fontFamily,
@@ -13929,7 +14102,7 @@ var PricingTable = (0, import_react24.forwardRef)(({ children, className, portal
                                 }
                               )
                             ] }),
-                            isActivePlan && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                            isActivePlan && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                               Flex,
                               {
                                 $position: "absolute",
@@ -13946,7 +14119,7 @@ var PricingTable = (0, import_react24.forwardRef)(({ children, className, portal
                           ]
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+                      /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
                         Flex,
                         {
                           $flexDirection: "column",
@@ -13955,8 +14128,8 @@ var PricingTable = (0, import_react24.forwardRef)(({ children, className, portal
                           $gap: `${cardPadding}rem`,
                           $padding: `${0.75 * cardPadding}rem ${cardPadding}rem 0`,
                           children: [
-                            props.plans.showEntitlements && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Flex, { $flexDirection: "column", $gap: "1rem", $flexGrow: "1", children: [
-                              props.plans.showInclusionText && index > 0 && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Box, { $marginBottom: "1.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+                            props.plans.showEntitlements && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(Flex, { $flexDirection: "column", $gap: "1rem", $flexGrow: "1", children: [
+                              props.plans.showInclusionText && index > 0 && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Box, { $marginBottom: "1.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
                                 Text,
                                 {
                                   $font: theme.typography.text.fontFamily,
@@ -13971,8 +14144,8 @@ var PricingTable = (0, import_react24.forwardRef)(({ children, className, portal
                                 }
                               ) }),
                               plan.entitlements.map((entitlement) => {
-                                return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Flex, { $gap: "1rem", children: [
-                                  props.plans.showFeatureIcons && entitlement.feature?.icon && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                                return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(Flex, { $gap: "1rem", children: [
+                                  props.plans.showFeatureIcons && entitlement.feature?.icon && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                                     IconRound,
                                     {
                                       name: entitlement.feature.icon,
@@ -13983,14 +14156,14 @@ var PricingTable = (0, import_react24.forwardRef)(({ children, className, portal
                                       ]
                                     }
                                   ),
-                                  entitlement.feature?.name && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Flex, { $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                                  entitlement.feature?.name && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Flex, { $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                                     Text,
                                     {
                                       $font: theme.typography.text.fontFamily,
                                       $size: theme.typography.text.fontSize,
                                       $weight: theme.typography.text.fontWeight,
                                       $color: theme.typography.text.color,
-                                      children: entitlement.valueType === "numeric" || entitlement.valueType === "unlimited" || entitlement.valueType === "trait" ? /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_jsx_runtime30.Fragment, { children: [
+                                      children: entitlement.valueType === "numeric" || entitlement.valueType === "unlimited" || entitlement.valueType === "trait" ? /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
                                         typeof entitlement.valueNumeric === "number" ? `${formatNumber(entitlement.valueNumeric)} ${(0, import_pluralize4.default)(entitlement.feature.name, entitlement.valueNumeric)}` : `Unlimited ${(0, import_pluralize4.default)(entitlement.feature.name)}`,
                                         entitlement.metricPeriod && ` per ${{
                                           billing: "billing period",
@@ -14004,7 +14177,7 @@ var PricingTable = (0, import_react24.forwardRef)(({ children, className, portal
                                 ] }, entitlement.id);
                               })
                             ] }),
-                            isActivePlan ? /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+                            isActivePlan ? /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
                               Flex,
                               {
                                 $justifyContent: "center",
@@ -14012,7 +14185,7 @@ var PricingTable = (0, import_react24.forwardRef)(({ children, className, portal
                                 $gap: "0.25rem",
                                 $padding: "0.625rem 0",
                                 children: [
-                                  /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                                  /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                                     Icon2,
                                     {
                                       name: "check-rounded",
@@ -14023,7 +14196,7 @@ var PricingTable = (0, import_react24.forwardRef)(({ children, className, portal
                                       }
                                     }
                                   ),
-                                  /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                                  /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                                     Text,
                                     {
                                       $size: 15,
@@ -14034,7 +14207,7 @@ var PricingTable = (0, import_react24.forwardRef)(({ children, className, portal
                                   )
                                 ]
                               }
-                            ) : (props.upgrade.isVisible || props.downgrade.isVisible) && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                            ) : (props.upgrade.isVisible || props.downgrade.isVisible) && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                               EmbedButton,
                               {
                                 disabled: !plan.valid,
@@ -14052,11 +14225,11 @@ var PricingTable = (0, import_react24.forwardRef)(({ children, className, portal
                                   $color: props.downgrade.buttonStyle,
                                   $variant: "outline"
                                 },
-                                children: !plan.valid ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                                children: !plan.valid ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                                   Tooltip,
                                   {
-                                    label: "Over usage limit",
-                                    description: "Current usage exceeds the limit of this plan."
+                                    trigger: "Over usage limit",
+                                    content: "Current usage exceeds the limit of this plan."
                                   }
                                 ) : "Choose plan"
                               }
@@ -14072,14 +14245,14 @@ var PricingTable = (0, import_react24.forwardRef)(({ children, className, portal
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Box, { children: props.addOns.isVisible && addOns.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_jsx_runtime30.Fragment, { children: [
-          props.header.isVisible && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Box, { children: props.addOns.isVisible && addOns.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
+          props.header.isVisible && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
             Flex,
             {
               $justifyContent: "space-between",
               $alignItems: "center",
               $marginBottom: "1rem",
-              children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                 Text,
                 {
                   $font: theme.typography[props.header.fontStyle].fontFamily,
@@ -14091,7 +14264,7 @@ var PricingTable = (0, import_react24.forwardRef)(({ children, className, portal
               )
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
             Box,
             {
               $display: "grid",
@@ -14099,7 +14272,7 @@ var PricingTable = (0, import_react24.forwardRef)(({ children, className, portal
               $gap: "1rem",
               children: addOns.map((addOn, index) => {
                 const isActiveAddOn = addOn.current && selectedPeriod === data.company?.addOns.find((a2) => a2.id === addOn.id)?.planPeriod;
-                return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+                return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
                   Flex,
                   {
                     $position: "relative",
@@ -14113,8 +14286,8 @@ var PricingTable = (0, import_react24.forwardRef)(({ children, className, portal
                     $outlineColor: isActiveAddOn ? theme.primary : "transparent",
                     ...theme.card.hasShadow && { $boxShadow: cardBoxShadow },
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Flex, { $flexDirection: "column", $gap: "0.75rem", children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(Flex, { $flexDirection: "column", $gap: "0.75rem", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                           Text,
                           {
                             $font: theme.typography[props.plans.name.fontStyle].fontFamily,
@@ -14124,7 +14297,7 @@ var PricingTable = (0, import_react24.forwardRef)(({ children, className, portal
                             children: addOn.name
                           }
                         ) }),
-                        props.addOns.showDescription && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                        props.addOns.showDescription && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                           Text,
                           {
                             $font: theme.typography[props.plans.description.fontStyle].fontFamily,
@@ -14134,8 +14307,8 @@ var PricingTable = (0, import_react24.forwardRef)(({ children, className, portal
                             children: addOn.description
                           }
                         ) }),
-                        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Box, { children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                        /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(Box, { children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                             Text,
                             {
                               $font: theme.typography[props.plans.name.fontStyle].fontFamily,
@@ -14147,7 +14320,7 @@ var PricingTable = (0, import_react24.forwardRef)(({ children, className, portal
                               )
                             }
                           ),
-                          /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+                          /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
                             Text,
                             {
                               $font: theme.typography[props.plans.name.fontStyle].fontFamily,
@@ -14161,7 +14334,7 @@ var PricingTable = (0, import_react24.forwardRef)(({ children, className, portal
                             }
                           )
                         ] }),
-                        isActiveAddOn && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                        isActiveAddOn && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                           Flex,
                           {
                             $position: "absolute",
@@ -14176,7 +14349,7 @@ var PricingTable = (0, import_react24.forwardRef)(({ children, className, portal
                           }
                         )
                       ] }),
-                      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+                      /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
                         Flex,
                         {
                           $flexDirection: "column",
@@ -14184,7 +14357,7 @@ var PricingTable = (0, import_react24.forwardRef)(({ children, className, portal
                           $gap: `${cardPadding}rem`,
                           $flexGrow: "1",
                           children: [
-                            props.addOns.showEntitlements && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                            props.addOns.showEntitlements && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                               Flex,
                               {
                                 $flexDirection: "column",
@@ -14192,15 +14365,15 @@ var PricingTable = (0, import_react24.forwardRef)(({ children, className, portal
                                 $gap: "1rem",
                                 $flexGrow: "1",
                                 children: addOn.entitlements.map((entitlement) => {
-                                  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                                  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                                     Flex,
                                     {
                                       $flexWrap: "wrap",
                                       $justifyContent: "space-between",
                                       $alignItems: "center",
                                       $gap: "1rem",
-                                      children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Flex, { $gap: "1rem", children: [
-                                        props.addOns.showFeatureIcons && entitlement.feature?.icon && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                                      children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(Flex, { $gap: "1rem", children: [
+                                        props.addOns.showFeatureIcons && entitlement.feature?.icon && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                                           IconRound,
                                           {
                                             name: entitlement.feature.icon,
@@ -14211,14 +14384,14 @@ var PricingTable = (0, import_react24.forwardRef)(({ children, className, portal
                                             ]
                                           }
                                         ),
-                                        entitlement.feature?.name && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Flex, { $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                                        entitlement.feature?.name && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Flex, { $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                                           Text,
                                           {
                                             $font: theme.typography.text.fontFamily,
                                             $size: theme.typography.text.fontSize,
                                             $weight: theme.typography.text.fontWeight,
                                             $color: theme.typography.text.color,
-                                            children: entitlement.valueType === "numeric" || entitlement.valueType === "unlimited" || entitlement.valueType === "trait" ? /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_jsx_runtime30.Fragment, { children: [
+                                            children: entitlement.valueType === "numeric" || entitlement.valueType === "unlimited" || entitlement.valueType === "trait" ? /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
                                               typeof entitlement.valueNumeric === "number" ? `${formatNumber(entitlement.valueNumeric)} ${(0, import_pluralize4.default)(entitlement.feature.name, entitlement.valueNumeric)}` : `Unlimited ${(0, import_pluralize4.default)(entitlement.feature.name)}`,
                                               entitlement.metricPeriod && ` per ${{
                                                 billing: "billing period",
@@ -14236,7 +14409,7 @@ var PricingTable = (0, import_react24.forwardRef)(({ children, className, portal
                                 })
                               }
                             ),
-                            props.upgrade.isVisible && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                            props.upgrade.isVisible && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                               EmbedButton,
                               {
                                 disabled: !addOn.valid,
@@ -14261,8 +14434,8 @@ var PricingTable = (0, import_react24.forwardRef)(({ children, className, portal
             }
           )
         ] }) }),
-        canChangePlan && layout === "checkout" && (0, import_react_dom3.createPortal)(
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+        canChangePlan && layout === "checkout" && (0, import_react_dom4.createPortal)(
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
             CheckoutDialog,
             {
               initialPeriod: selectedPeriod,
@@ -14279,8 +14452,8 @@ var PricingTable = (0, import_react24.forwardRef)(({ children, className, portal
 PricingTable.displayName = "PricingTable";
 
 // src/components/elements/upcoming-bill/UpcomingBill.tsx
-var import_react25 = require("react");
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_react26 = require("react");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 function resolveDesignProps7(props) {
   return {
     header: {
@@ -14299,11 +14472,11 @@ function resolveDesignProps7(props) {
     }
   };
 }
-var UpcomingBill = (0, import_react25.forwardRef)(({ className, ...rest }, ref) => {
+var UpcomingBill = (0, import_react26.forwardRef)(({ className, ...rest }, ref) => {
   const props = resolveDesignProps7(rest);
   const theme = nt();
   const { data } = useEmbed();
-  const { upcomingInvoice } = (0, import_react25.useMemo)(() => {
+  const { upcomingInvoice } = (0, import_react26.useMemo)(() => {
     return {
       upcomingInvoice: {
         ...typeof data.upcomingInvoice?.amountDue === "number" && {
@@ -14321,14 +14494,14 @@ var UpcomingBill = (0, import_react25.forwardRef)(({ className, ...rest }, ref)
   if (typeof upcomingInvoice.amountDue !== "number" || !upcomingInvoice.dueDate) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(Element, { ref, className, children: [
-    props.header.isVisible && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Element, { ref, className, children: [
+    props.header.isVisible && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
       Flex,
       {
         $justifyContent: "space-between",
         $alignItems: "center",
         $margin: "0 0 1rem",
-        children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
           Text,
           {
             $font: theme.typography[props.header.fontStyle].fontFamily,
@@ -14344,8 +14517,8 @@ var UpcomingBill = (0, import_react25.forwardRef)(({ className, ...rest }, ref)
         )
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(Flex, { $justifyContent: "space-between", $alignItems: "start", $gap: "1rem", children: [
-      props.price.isVisible && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Flex, { $alignItems: "end", $flexGrow: "1", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Flex, { $justifyContent: "space-between", $alignItems: "start", $gap: "1rem", children: [
+      props.price.isVisible && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Flex, { $alignItems: "end", $flexGrow: "1", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
         Text,
         {
           $font: theme.typography[props.price.fontStyle].fontFamily,
@@ -14356,7 +14529,7 @@ var UpcomingBill = (0, import_react25.forwardRef)(({ className, ...rest }, ref)
           children: formatCurrency(upcomingInvoice.amountDue)
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Box, { $lineHeight: 1.15, $maxWidth: "10rem", $textAlign: "right", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Box, { $lineHeight: 1.15, $maxWidth: "10rem", $textAlign: "right", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
         Text,
         {
           $font: theme.typography[props.contractEndDate.fontStyle].fontFamily,
@@ -14373,10 +14546,10 @@ var UpcomingBill = (0, import_react25.forwardRef)(({ className, ...rest }, ref)
 UpcomingBill.displayName = "UpcomingBill";
 
 // src/components/embed/ComponentTree.tsx
-var import_react27 = require("react");
+var import_react28 = require("react");
 
 // src/components/embed/renderer.ts
-var import_react26 = require("react");
+var import_react27 = require("react");
 var components = {
   Root,
   Viewport,
@@ -14408,7 +14581,7 @@ function createRenderer(options) {
     const { className, ...rest } = props;
     const resolvedProps = component === "div" ? rest : props;
     const resolvedChildren = children.map(renderNode);
-    return (0, import_react26.createElement)(
+    return (0, import_react27.createElement)(
       component,
       {
         key: index,
@@ -14421,10 +14594,10 @@ function createRenderer(options) {
 }
 
 // src/components/embed/ComponentTree.tsx
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 var Loading = () => {
   const theme = nt();
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
     Flex,
     {
       $width: "100%",
@@ -14432,13 +14605,13 @@ var Loading = () => {
       $alignItems: "center",
       $justifyContent: "center",
       $padding: `${theme.card.padding / TEXT_BASE_SIZE}rem`,
-      children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Loader, { $size: "2xl", $color: "#194BFB" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Loader, { $size: "2xl", $color: "#194BFB" })
     }
   );
 };
 var Error2 = ({ message }) => {
   const theme = nt();
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
     Flex,
     {
       $flexDirection: "column",
@@ -14449,7 +14622,7 @@ var Error2 = ({ message }) => {
       $alignItems: "center",
       $justifyContent: "center",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
           Box,
           {
             $marginBottom: `${8 / TEXT_BASE_SIZE}rem`,
@@ -14460,7 +14633,7 @@ var Error2 = ({ message }) => {
             children: "404 Error"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
           Box,
           {
             $marginBottom: `${8 / TEXT_BASE_SIZE}rem`,
@@ -14477,31 +14650,31 @@ var Error2 = ({ message }) => {
 };
 var ComponentTree = () => {
   const { error, nodes } = useEmbed();
-  const [children, setChildren] = (0, import_react27.useState)(/* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Loading, {}));
-  (0, import_react27.useEffect)(() => {
+  const [children, setChildren] = (0, import_react28.useState)(/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Loading, {}));
+  (0, import_react28.useEffect)(() => {
     const renderer = createRenderer();
     setChildren(nodes.map(renderer));
   }, [nodes]);
   if (error) {
     console.error(error);
-    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Error2, { message: error.message });
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Error2, { message: error.message });
   }
-  if (import_react27.Children.count(children) === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Loading, {});
+  if (import_react28.Children.count(children) === 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Loading, {});
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_jsx_runtime32.Fragment, { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_jsx_runtime31.Fragment, { children });
 };
 
 // src/components/embed/Embed.tsx
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 var SchematicEmbed = ({ id, accessToken, apiConfig }) => {
   if (accessToken?.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { children: "Please provide an access token." });
+    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { children: "Please provide an access token." });
   }
   if (!accessToken?.startsWith("token_")) {
-    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { children: 'Invalid access token; your temporary access token will start with "token_".' });
+    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { children: 'Invalid access token; your temporary access token will start with "token_".' });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(EmbedProvider, { id, accessToken, apiConfig, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ComponentTree, {}) });
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(EmbedProvider, { id, accessToken, apiConfig, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ComponentTree, {}) });
 };
 /*! Bundled license information: