@schematichq/schematic-components 0.4.0-rc.2 → 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_react14 = 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"]
   };
 }
 
@@ -8341,6 +8368,7 @@ function CompanyDetailResponseDataFromJSONTyped(json, ignoreDiscriminator) {
     addOns: json["add_ons"].map(
       CompanyPlanWithBillingSubViewFromJSON
     ),
+    billingSubscription: json["billing_subscription"] == null ? void 0 : BillingSubscriptionViewFromJSON(json["billing_subscription"]),
     billingSubscriptions: json["billing_subscriptions"].map(
       BillingSubscriptionViewFromJSON
     ),
@@ -8607,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"],
@@ -8645,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"],
@@ -9675,13 +9706,10 @@ var EmbedProvider = ({
   }, [id, state.api]);
   const setData = (0, import_react3.useCallback)(
     (data) => {
-      setState((prev2) => {
-        const updatedData = (0, import_merge.default)({}, prev2.data, { ...data });
-        return {
-          ...prev2,
-          data: updatedData
-        };
-      });
+      setState((prev2) => ({
+        ...prev2,
+        data
+      }));
     },
     [setState]
   );
@@ -9720,7 +9748,7 @@ var EmbedProvider = ({
   (0, import_react3.useEffect)(() => {
     if (accessToken) {
       const { headers = {} } = apiConfig ?? {};
-      headers["X-Schematic-Components-Version"] = "0.4.0-rc.2";
+      headers["X-Schematic-Components-Version"] = "0.4.0-rc.4";
       headers["X-Schematic-Session-ID"] = sessionIdRef.current;
       const config = new Configuration({
         ...apiConfig,
@@ -10001,22 +10029,39 @@ var Root = (0, import_react7.forwardRef)(
 Root.displayName = "Root";
 
 // src/components/layout/viewport/Viewport.tsx
-var import_react11 = require("react");
+var import_react13 = require("react");
 
 // src/components/ui/box/styles.ts
 var Box = dt.div((props) => {
-  const initialStyles = [];
-  return Object.entries(props).reduce((acc, [key, value]) => {
-    if (key.startsWith("$")) {
+  function reducer(acc, [key, value]) {
+    if (key.startsWith("$") && key !== "$viewport") {
       acc.push(
         // keys will always be CSS properties
         attr(camelToHyphen(key.slice(1)), value)
       );
     }
     return acc;
-  }, initialStyles);
+  }
+  const styles = Object.entries(props).reduce(reducer, []);
+  for (const [key, value] of Object.entries(props.$viewport || {})) {
+    styles.push(lt`
+      ${{
+      sm: "@media (min-width: 640px)",
+      md: "@media (min-width: 768px)",
+      lg: "@media (min-width: 1024px)",
+      xl: "@media (min-width: 1280px)",
+      "2xl": "@media (min-width: 1536px)"
+    }[key] || key} {
+        ${Object.entries(value || {}).reduce(reducer, [])}
+      }
+    `);
+  }
+  return styles;
 });
 
+// src/components/ui/button/Button.tsx
+var import_react8 = require("react");
+
 // src/components/ui/button/styles.ts
 var Button = dt.button`
   appearance: none;
@@ -10102,30 +10147,33 @@ var Button = dt.button`
 
 // src/components/ui/button/Button.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
-var Button2 = ({
-  color = "white",
-  size = "md",
-  variant = "solid",
-  disabled = false,
-  isLoading = false,
-  children,
-  ...props
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-    Button,
-    {
-      $color: color,
-      $size: size,
-      $variant: variant,
-      disabled,
-      ...props,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Loader, { $size: "sm", $isLoading: isLoading }),
-        children
-      ]
-    }
-  );
-};
+var Button2 = (0, import_react8.forwardRef)(
+  ({
+    color = "white",
+    size = "md",
+    variant = "solid",
+    disabled = false,
+    isLoading = false,
+    children,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      Button,
+      {
+        ref,
+        $color: color,
+        $size: size,
+        $variant: variant,
+        disabled,
+        ...props,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Loader, { $size: "sm", $isLoading: isLoading }),
+          children
+        ]
+      }
+    );
+  }
+);
 
 // src/components/ui/icon/styles.ts
 var Icon = dt.i`
@@ -10369,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;
@@ -10406,7 +10454,7 @@ var Loader = dt.div`
 `;
 
 // src/components/ui/modal/Modal.tsx
-var import_react8 = require("react");
+var import_react9 = require("react");
 
 // src/components/ui/modal/styles.ts
 var Container2 = dt(Box)`
@@ -10427,108 +10475,120 @@ var Container2 = dt(Box)`
 
 // src/components/ui/modal/Modal.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
-var Modal = ({
-  children,
-  size = "auto",
-  top = 0,
-  onClose
-}) => {
-  const theme = nt();
-  const { setLayout } = useEmbed();
-  const ref = (0, import_react8.useRef)(null);
-  const isLightBackground = useIsLightBackground();
-  const handleClose = (0, import_react8.useCallback)(() => {
-    setLayout("portal");
-    onClose?.();
-  }, [setLayout, onClose]);
-  (0, import_react8.useEffect)(() => {
-    ref.current?.focus();
-  }, []);
-  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();
-        }
-      },
-      $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,
-        {
-          $position: "relative",
-          $top: "50%",
-          $left: "50%",
-          $transform: "translate(-50%, -50%)",
-          $flexDirection: "column",
-          $overflow: "hidden",
-          ...size === "auto" ? { $width: "fit-content", $height: "fit-content" } : {
+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%",
-            ...size === "lg" ? { $height: "100%" } : { $height: "fit-content" },
-            $maxWidth: size === "sm" ? "480px" : size === "md" ? "688px" : "1356px",
-            $maxHeight: "860px"
-          },
-          $backgroundColor: theme.card.background,
-          $borderRadius: "0.5rem",
-          $boxShadow: "0px 1px 20px 0px #1018280F, 0px 1px 3px 0px #1018281A;",
-          id: "select-plan-dialog",
-          role: "dialog",
-          "aria-labelledby": "select-plan-dialog-label",
-          "aria-modal": "true",
-          children
-        }
-      )
-    }
-  );
-};
+            $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_react9 = require("react");
+var import_react10 = require("react");
 var import_jsx_runtime7 = require("react/jsx-runtime");
 var ModalHeader = ({
   children,
   bordered = false,
   onClose
 }) => {
+  const theme = nt();
   const { setLayout } = useEmbed();
   const isLightBackground = useIsLightBackground();
-  const handleClose = (0, import_react9.useCallback)(() => {
+  const handleClose = (0, import_react10.useCallback)(() => {
     setLayout("portal");
     onClose?.();
   }, [setLayout, onClose]);
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     Flex,
     {
+      $position: "sticky",
+      $top: 0,
+      $left: 0,
+      $zIndex: 1,
       $justifyContent: children ? "space-between" : "end",
       $alignItems: "center",
-      $flexShrink: "0",
+      $flexShrink: 0,
       $gap: "1rem",
-      $height: "5rem",
-      $padding: "0 1.5rem 0 3rem",
+      $height: "3.5rem",
+      $padding: "0 1rem",
+      $backgroundColor: theme.card.background,
       ...bordered && {
         $borderBottomWidth: "1px",
         $borderBottomStyle: "solid",
         $borderBottomColor: isLightBackground ? "hsla(0, 0%, 0%, 0.15)" : "hsla(0, 0%, 100%, 0.15)"
       },
+      $viewport: {
+        md: {
+          $height: "5rem",
+          $padding: "0 1.5rem 0 3rem"
+        }
+      },
       children: [
         children,
         /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Box, { $cursor: "pointer", onClick: handleClose, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
@@ -10653,34 +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;
@@ -10688,42 +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 }) => {
-  const theme = nt();
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(TooltipWrapper, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-      Text,
-      {
-        $font: theme.typography.text.fontFamily,
-        $size: theme.typography.text.fontSize,
-        $weight: theme.typography.text.fontWeight,
-        $color: theme.typography.text.color,
-        children: label
-      }
-    ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Box, { className: "tooltip", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-      Text,
+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,
       {
-        $font: theme.typography.text.fontFamily,
-        $size: theme.typography.text.fontSize,
-        $weight: theme.typography.text.fontWeight,
-        $color: theme.typography.text.color,
-        $leading: 1.15,
-        children: description
+        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
+    )
   ] });
 };
 
@@ -10734,97 +10898,94 @@ var Badge = () => {
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
     Flex,
     {
-      $padding: "0 0.5rem",
-      $width: "100%",
-      $flexDirection: "row",
-      $alignItems: "center",
       $justifyContent: settings.badge.alignment,
+      $alignItems: "center",
+      $gridColumn: "1 / -1",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Box, { $marginRight: "0.5rem", $fontSize: "0.75rem", children: "Powered by" }),
+        /* @__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",
+            width: 86,
+            height: 16,
             viewBox: "0 0 86 16",
-            fill: "none",
-            xmlns: "http://www.w3.org/2000/svg",
+            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: "black"
+                  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: "black"
+                  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: "black"
+                  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: "black"
+                  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: "black"
+                  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: "black"
+                  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: "black"
+                  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: "black"
+                  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: "black"
+                  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: "black"
+                  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: "black"
+                  fill: "currentColor"
                 }
               )
             ]
@@ -10836,7 +10997,7 @@ var Badge = () => {
 };
 
 // src/components/layout/RenderLayout.tsx
-var import_react10 = require("react");
+var import_react12 = require("react");
 var import_jsx_runtime11 = require("react/jsx-runtime");
 var Disabled = () => {
   const theme = nt();
@@ -10878,14 +11039,14 @@ var Disabled = () => {
 var Success = () => {
   const theme = nt();
   const { hydrate, data, api, setLayout, isPending } = useEmbed();
-  const [isOpen, setIsOpen] = (0, import_react10.useState)(true);
-  (0, import_react10.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_react10.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     if (!isPending && !isOpen) {
       setLayout("portal");
     }
@@ -10946,10 +11107,18 @@ var RenderLayout = ({ children }) => {
 };
 
 // src/components/layout/viewport/styles.ts
-var StyledViewport = dt.div`
-  display: 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: 1rem;
@@ -10957,30 +11126,21 @@ var StyledViewport = dt.div`
 
 // src/components/layout/viewport/Viewport.tsx
 var import_jsx_runtime12 = require("react/jsx-runtime");
-var Viewport = (0, import_react11.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_react13 = require("react");
+var import_react15 = require("react");
 
 // src/components/layout/card/Card.tsx
-var import_react12 = require("react");
+var import_react14 = require("react");
 
 // src/components/layout/card/styles.ts
 var Element = dt(Box)``;
@@ -11024,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_react12.forwardRef)(
+var Card = (0, import_react14.forwardRef)(
   ({ children, className }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(StyledCard, { ref, className, children });
   }
@@ -11033,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_react13.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 }) });
   }
@@ -11073,11 +11231,11 @@ function resolveDesignProps(props) {
     visibleFeatures: props.visibleFeatures
   };
 }
-var IncludedFeatures = (0, import_react14.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_react14.useRef)([]);
+  const elements = (0, import_react16.useRef)([]);
   const shouldWrapChildren = useWrapChildren(elements.current);
   const isLightBackground = useIsLightBackground();
   const featureUsage = props.visibleFeatures ? props.visibleFeatures.reduce((acc, id) => {
@@ -11100,9 +11258,9 @@ var IncludedFeatures = (0, import_react14.forwardRef)(({ className, ...rest }, r
       ref,
       className,
       $flexDirection: "column",
-      $gap: "1.5rem",
+      $gap: "1rem",
       children: [
-        props.header.isVisible && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        props.header.isVisible && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
           Text,
           {
             $font: theme.typography[props.header.fontStyle].fontFamily,
@@ -11152,7 +11310,7 @@ var IncludedFeatures = (0, import_react14.forwardRef)(({ className, ...rest }, r
                     $flexGrow: "1",
                     $textAlign: shouldWrapChildren ? "left" : "right",
                     children: [
-                      props.entitlement.isVisible && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                      props.entitlement.isVisible && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                         Text,
                         {
                           $font: theme.typography[props.entitlement.fontStyle].fontFamily,
@@ -11189,7 +11347,7 @@ var IncludedFeatures = (0, import_react14.forwardRef)(({ className, ...rest }, r
 IncludedFeatures.displayName = "IncludedFeatures";
 
 // src/components/elements/invoices/Invoices.tsx
-var import_react15 = require("react");
+var import_react17 = require("react");
 var import_jsx_runtime16 = require("react/jsx-runtime");
 function resolveDesignProps2(props) {
   return {
@@ -11243,18 +11401,18 @@ var InvoiceDate = ({ date, fontStyle, url }) => {
   }
   return dateText;
 };
-var Invoices = (0, import_react15.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_react15.useState)(() => formatInvoices(data));
-  const [listSize, setListSize] = (0, import_react15.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_react15.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     api?.listInvoices().then(({ data: data2 }) => {
       setInvoices(formatInvoices(data2));
     });
@@ -11320,7 +11478,7 @@ var Invoices = (0, import_react15.forwardRef)(({ className, data, ...rest }, ref
 Invoices.displayName = "Invoices";
 
 // src/components/elements/metered-features/MeteredFeatures.tsx
-var import_react16 = require("react");
+var import_react18 = require("react");
 var import_pluralize2 = __toESM(require_pluralize());
 
 // src/components/elements/metered-features/styles.ts
@@ -11367,9 +11525,9 @@ function resolveDesignProps3(props) {
     visibleFeatures: props.visibleFeatures
   };
 }
-var MeteredFeatures = (0, import_react16.forwardRef)(({ className, ...rest }, ref) => {
+var MeteredFeatures = (0, import_react18.forwardRef)(({ className, ...rest }, ref) => {
   const props = resolveDesignProps3(rest);
-  const elements = (0, import_react16.useRef)([]);
+  const elements = (0, import_react18.useRef)([]);
   const shouldWrapChildren = useWrapChildren(elements.current);
   const theme = nt();
   const { data } = useEmbed();
@@ -11491,8 +11649,8 @@ var MeteredFeatures = (0, import_react16.forwardRef)(({ className, ...rest }, re
 MeteredFeatures.displayName = "MeteredFeatures";
 
 // src/components/elements/payment-method/PaymentMethod.tsx
-var import_react21 = 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";
@@ -11526,7 +11684,7 @@ var registerWrapper = function registerWrapper2(stripe, startTime) {
   }
   stripe._registerWrapper({
     name: "stripe-js",
-    version: "4.6.0",
+    version: "5.1.0",
     startTime
   });
 };
@@ -11632,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_react18 = require("react");
+var import_react20 = require("react");
 
 // src/components/shared/checkout-dialog/Navigation.tsx
 var import_jsx_runtime18 = require("react/jsx-runtime");
@@ -11645,49 +11803,74 @@ var Navigation = ({
 }) => {
   const theme = nt();
   const isLightBackground = useIsLightBackground();
+  const showFullContent = index === activeIndex || index === activeIndex + 1;
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Flex, { $gap: "0.5rem", $alignItems: "center", children: [
-      index >= activeIndex ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-        Box,
-        {
-          $width: `${20 / TEXT_BASE_SIZE}rem`,
-          $height: `${20 / TEXT_BASE_SIZE}rem`,
-          $borderWidth: "2px",
-          $borderStyle: "solid",
-          $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.125)" : "hsla(0, 0%, 100%, 0.25)",
-          $borderRadius: "9999px"
-        }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-        IconRound,
-        {
-          name: "check",
-          colors: [
-            theme.card.background,
-            isLightBackground ? "hsla(0, 0%, 0%, 0.125)" : "hsla(0, 0%, 100%, 0.25)"
-          ],
-          style: {
-            fontSize: `${16 / TEXT_BASE_SIZE}rem`,
-            width: `${20 / TEXT_BASE_SIZE}rem`,
-            height: `${20 / TEXT_BASE_SIZE}rem`
-          }
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-        Box,
-        {
-          tabIndex: 0,
-          ...index !== activeIndex && { $opacity: "0.6375" },
-          ...index < activeIndex && {
-            onClick,
-            $cursor: "pointer"
-          },
-          children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
-            Text,
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+      Flex,
+      {
+        $gap: "0.5rem",
+        $alignItems: "center",
+        ...!showFullContent && { $flex: 1, $minWidth: 0 },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+            Box,
             {
-              $font: theme.typography.text.fontFamily,
-              $size: 19,
-              $weight: index === activeIndex ? 600 : 400,
+              $display: "none",
+              $viewport: {
+                md: {
+                  $display: "block"
+                }
+              },
+              children: index >= activeIndex ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                Box,
+                {
+                  $width: `${20 / TEXT_BASE_SIZE}rem`,
+                  $height: `${20 / TEXT_BASE_SIZE}rem`,
+                  $borderWidth: "2px",
+                  $borderStyle: "solid",
+                  $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.125)" : "hsla(0, 0%, 100%, 0.25)",
+                  $borderRadius: "9999px"
+                }
+              ) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                IconRound,
+                {
+                  name: "check",
+                  colors: [
+                    theme.card.background,
+                    isLightBackground ? "hsla(0, 0%, 0%, 0.125)" : "hsla(0, 0%, 100%, 0.25)"
+                  ],
+                  style: {
+                    fontSize: `${16 / TEXT_BASE_SIZE}rem`,
+                    width: `${20 / TEXT_BASE_SIZE}rem`,
+                    height: `${20 / TEXT_BASE_SIZE}rem`
+                  }
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+            Box,
+            {
+              tabIndex: 0,
+              $fontSize: `${16 / TEXT_BASE_SIZE}rem`,
+              $fontFamily: theme.typography.text.fontFamily,
+              $fontWeight: index === activeIndex ? 600 : 400,
               $color: theme.typography.text.color,
+              ...!showFullContent && {
+                $overflow: "hidden",
+                $whiteSpace: "nowrap",
+                $textOverflow: "ellipsis"
+              },
+              ...index !== activeIndex && { $opacity: "0.6375" },
+              ...index < activeIndex && {
+                onClick,
+                $cursor: "pointer"
+              },
+              $viewport: {
+                md: {
+                  $fontSize: `${19 / TEXT_BASE_SIZE}rem`
+                }
+              },
               children: [
                 index + 1,
                 ". ",
@@ -11695,9 +11878,9 @@ var Navigation = ({
               ]
             }
           )
-        }
-      )
-    ] }),
+        ]
+      }
+    ),
     !isLast && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       Icon2,
       {
@@ -11712,11 +11895,12 @@ var Navigation = ({
 };
 
 // src/components/shared/checkout-dialog/Sidebar.tsx
-var import_react17 = require("react");
+var import_react19 = require("react");
 var import_jsx_runtime19 = require("react/jsx-runtime");
 var Sidebar = ({
   addOns,
   charges,
+  checkoutRef,
   checkoutStage,
   currentAddOns,
   currentPlan,
@@ -11725,10 +11909,8 @@ var Sidebar = ({
   paymentMethodId,
   planPeriod,
   selectedPlan,
-  selectPlan,
   setCheckoutStage,
   setError,
-  setPlanPeriod,
   setSetupIntent,
   showPaymentForm,
   toggleLoading
@@ -11736,20 +11918,7 @@ var Sidebar = ({
   const theme = nt();
   const { api, data, mode, setLayout } = useEmbed();
   const isLightBackground = useIsLightBackground();
-  const { planPeriodOptions, paymentMethod } = (0, import_react17.useMemo)(() => {
-    const planPeriodOptions2 = [];
-    if (data.activePlans.some((plan) => plan.monthlyPrice) || data.activeAddOns.some((addOn) => addOn.monthlyPrice)) {
-      planPeriodOptions2.push("month");
-    }
-    if (data.activePlans.some((plan) => plan.yearlyPrice) || data.activeAddOns.some((addOn) => addOn.yearlyPrice)) {
-      planPeriodOptions2.push("year");
-    }
-    return {
-      planPeriodOptions: planPeriodOptions2,
-      paymentMethod: data.subscription?.paymentMethod
-    };
-  }, [data.activePlans, data.activeAddOns, data.subscription?.paymentMethod]);
-  const subscriptionPrice = (0, import_react17.useMemo)(() => {
+  const subscriptionPrice = (0, import_react19.useMemo)(() => {
     if (!selectedPlan || !selectedPlan.monthlyPrice || !selectedPlan.yearlyPrice) {
       return;
     }
@@ -11757,7 +11926,7 @@ var Sidebar = ({
       (planPeriod === "month" ? selectedPlan.monthlyPrice : selectedPlan.yearlyPrice)?.price
     );
   }, [selectedPlan, planPeriod]);
-  const checkout = (0, import_react17.useCallback)(async () => {
+  const checkout = (0, import_react19.useCallback)(async () => {
     const priceId = (planPeriod === "month" ? selectedPlan?.monthlyPrice : selectedPlan?.yearlyPrice)?.id;
     if (!api || !selectedPlan || !priceId) {
       return;
@@ -11802,15 +11971,6 @@ var Sidebar = ({
     setLayout,
     toggleLoading
   ]);
-  const changePlanPeriod = (0, import_react17.useCallback)(
-    (period) => {
-      if (selectedPlan) {
-        selectPlan(selectedPlan, period);
-      }
-      setPlanPeriod(period);
-    },
-    [selectedPlan, selectPlan, setPlanPeriod]
-  );
   const shortPeriod = (p2) => p2 === "month" ? "mo" : "yr";
   const selectedAddOns = addOns.filter((addOn) => addOn.isSelected);
   const willPlanChange = selectedPlan && (selectedPlan.id !== currentPlan?.id || planPeriod !== currentPlan.planPeriod);
@@ -11818,7 +11978,7 @@ var Sidebar = ({
   selectedAddOns.length !== currentAddOns.length || !selectedAddOns.every(
     (addOn) => currentAddOns.some((currentAddOn) => addOn.id === currentAddOn.id)
   )) && !isLoading;
-  const canCheckout = canUpdateSubscription && (paymentMethod && !showPaymentForm || paymentMethodId);
+  const canCheckout = canUpdateSubscription && (data.subscription?.paymentMethod && !showPaymentForm || paymentMethodId);
   const removedAddOns = currentAddOns.filter(
     (current) => !selectedAddOns.some((selected) => current.id === selected.id)
   );
@@ -11829,14 +11989,21 @@ var Sidebar = ({
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
     Flex,
     {
+      ref: checkoutRef,
+      tabIndex: 0,
       $flexDirection: "column",
-      $width: "21.5rem",
+      $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: {
+        md: {
+          $width: "21.5rem"
+        }
+      },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
           Flex,
           {
             $position: "relative",
@@ -11847,28 +12014,17 @@ var Sidebar = ({
             $borderBottomWidth: "1px",
             $borderStyle: "solid",
             $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.1)" : "hsla(0, 0%, 100%, 0.2)",
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Flex, { $justifyContent: "space-between", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-                Text,
-                {
-                  as: "h3",
-                  $font: theme.typography.heading3.fontFamily,
-                  $size: theme.typography.heading3.fontSize,
-                  $weight: theme.typography.heading3.fontWeight,
-                  $color: theme.typography.heading3.color,
-                  children: "Subscription"
-                }
-              ) }),
-              planPeriodOptions.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-                PeriodToggle,
-                {
-                  options: planPeriodOptions,
-                  selectedOption: planPeriod,
-                  onChange: changePlanPeriod
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Savings, { plan: selectedPlan, period: planPeriod })
-            ]
+            children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Flex, { $justifyContent: "space-between", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+              Text,
+              {
+                as: "h3",
+                $font: theme.typography.heading3.fontFamily,
+                $size: theme.typography.heading3.fontSize,
+                $weight: theme.typography.heading3.fontWeight,
+                $color: theme.typography.heading3.color,
+                children: "Subscription"
+              }
+            ) })
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
@@ -11876,7 +12032,7 @@ var Sidebar = ({
           {
             $flexDirection: "column",
             $position: "relative",
-            $gap: "0.5rem",
+            $gap: "0.125rem",
             $width: "100%",
             $padding: "1.5rem",
             $flex: "1",
@@ -11948,7 +12104,8 @@ var Sidebar = ({
                         {
                           name: "arrow-down",
                           style: {
-                            display: "inline-block"
+                            display: "inline-block",
+                            color: theme.typography.text.color
                           }
                         }
                       )
@@ -12210,7 +12367,13 @@ var Sidebar = ({
                 EmbedButton,
                 {
                   disabled: !addOns.length && !canUpdateSubscription,
-                  onClick: () => {
+                  onClick: async () => {
+                    if (!addOns.length && api && data.component?.id) {
+                      const { data: setupIntent } = await api.getSetupIntent({
+                        componentId: data.component.id
+                      });
+                      setSetupIntent(setupIntent);
+                    }
                     setCheckoutStage(addOns.length ? "addons" : "checkout");
                   },
                   isLoading,
@@ -12370,217 +12533,193 @@ var Plan = ({
   const isLightBackground = useIsLightBackground();
   const cardPadding = theme.card.padding / TEXT_BASE_SIZE;
   const currentPlanIndex = plans.findIndex((plan) => plan.current);
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Flex, { $flexDirection: "column", $gap: "1rem", $marginBottom: "1rem", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-        Text,
-        {
-          as: "h3",
-          id: "select-plan-dialog-label",
-          $font: theme.typography.heading3.fontFamily,
-          $size: theme.typography.heading3.fontSize,
-          $weight: theme.typography.heading3.fontWeight,
-          $color: theme.typography.heading3.color,
-          $marginBottom: "0.5rem",
-          children: "Select plan"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-        Text,
-        {
-          as: "p",
-          id: "select-plan-dialog-description",
-          $font: theme.typography.text.fontFamily,
-          $size: theme.typography.text.fontSize,
-          $weight: theme.typography.text.fontWeight,
-          $color: theme.typography.text.color,
-          children: "Choose your base plan"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-      Box,
-      {
-        $display: "grid",
-        $gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))",
-        $gap: "1rem",
-        $flexGrow: "1",
-        children: plans.map((plan, index) => {
-          const isActivePlan = plan.current && currentPlan?.planPeriod === period;
-          return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
-            Flex,
-            {
-              $position: "relative",
-              $flexDirection: "column",
-              $padding: `${cardPadding}rem 0`,
-              $backgroundColor: theme.card.background,
-              $borderRadius: `${theme.card.borderRadius / TEXT_BASE_SIZE}rem`,
-              $outlineWidth: "2px",
-              $outlineStyle: "solid",
-              $outlineColor: plan.id === selectedPlan?.id ? theme.primary : "transparent",
-              ...theme.card.hasShadow && { $boxShadow: cardBoxShadow },
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
-                  Flex,
-                  {
-                    $flexDirection: "column",
-                    $gap: "1rem",
-                    $padding: `0 ${cardPadding}rem ${0.75 * cardPadding}rem`,
-                    $borderBottomWidth: "1px",
-                    $borderStyle: "solid",
-                    $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.175)" : "hsla(0, 0%, 100%, 0.175)",
-                    children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_jsx_runtime21.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    Box,
+    {
+      $display: "grid",
+      $gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))",
+      $gap: "1rem",
+      $flexGrow: "1",
+      children: plans.map((plan, index) => {
+        const isActivePlan = plan.current && currentPlan?.planPeriod === period;
+        return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+          Flex,
+          {
+            $position: "relative",
+            $flexDirection: "column",
+            $padding: `${0.75 * cardPadding}rem 0`,
+            $backgroundColor: theme.card.background,
+            $borderRadius: `${theme.card.borderRadius / TEXT_BASE_SIZE}rem`,
+            $outlineWidth: "2px",
+            $outlineStyle: "solid",
+            $outlineColor: plan.id === selectedPlan?.id ? theme.primary : "transparent",
+            ...theme.card.hasShadow && { $boxShadow: cardBoxShadow },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+                Flex,
+                {
+                  $flexDirection: "column",
+                  $gap: "0.5rem",
+                  $padding: `0 ${cardPadding}rem ${0.75 * cardPadding}rem`,
+                  $borderBottomWidth: "1px",
+                  $borderStyle: "solid",
+                  $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.175)" : "hsla(0, 0%, 100%, 0.175)",
+                  $viewport: {
+                    md: {
+                      $gap: "1rem"
+                    }
+                  },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                      Text,
+                      {
+                        $font: theme.typography.heading2.fontFamily,
+                        $size: theme.typography.heading2.fontSize,
+                        $weight: theme.typography.heading2.fontWeight,
+                        $color: theme.typography.heading2.color,
+                        children: plan.name
+                      }
+                    ) }),
+                    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Box, { $marginBottom: "0.5rem", $lineHeight: 1.35, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                      Text,
+                      {
+                        $font: theme.typography.text.fontFamily,
+                        $size: theme.typography.text.fontSize,
+                        $weight: theme.typography.text.fontWeight,
+                        $color: theme.typography.text.color,
+                        children: plan.description
+                      }
+                    ) }),
+                    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Box, { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                         Text,
                         {
                           $font: theme.typography.heading2.fontFamily,
                           $size: theme.typography.heading2.fontSize,
                           $weight: theme.typography.heading2.fontWeight,
                           $color: theme.typography.heading2.color,
-                          children: plan.name
+                          children: formatCurrency(
+                            (period === "month" ? plan.monthlyPrice : plan.yearlyPrice)?.price ?? 0
+                          )
                         }
-                      ) }),
-                      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
                         Text,
                         {
-                          $font: theme.typography.text.fontFamily,
-                          $size: theme.typography.text.fontSize,
-                          $weight: theme.typography.text.fontWeight,
-                          $color: theme.typography.text.color,
-                          children: plan.description
-                        }
-                      ) }),
-                      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Box, { children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-                          Text,
-                          {
-                            $font: theme.typography.heading2.fontFamily,
-                            $size: theme.typography.heading2.fontSize,
-                            $weight: theme.typography.heading2.fontWeight,
-                            $color: theme.typography.heading2.color,
-                            children: formatCurrency(
-                              (period === "month" ? plan.monthlyPrice : plan.yearlyPrice)?.price ?? 0
-                            )
-                          }
-                        ),
-                        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
-                          Text,
-                          {
-                            $font: theme.typography.heading2.fontFamily,
-                            $size: 16 / 30 * theme.typography.heading2.fontSize,
-                            $weight: theme.typography.heading2.fontWeight,
-                            $color: theme.typography.heading2.color,
-                            children: [
-                              "/",
-                              period
-                            ]
-                          }
-                        )
-                      ] }),
-                      isActivePlan && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-                        Flex,
-                        {
-                          $position: "absolute",
-                          $right: "1rem",
-                          $top: "1rem",
-                          $fontSize: "0.625rem",
-                          $color: hexToHSL(theme.primary).l > 50 ? "#000000" : "#FFFFFF",
-                          $backgroundColor: theme.primary,
-                          $borderRadius: "9999px",
-                          $padding: "0.125rem 0.85rem",
-                          children: "Active"
+                          $font: theme.typography.heading2.fontFamily,
+                          $size: 16 / 30 * theme.typography.heading2.fontSize,
+                          $weight: theme.typography.heading2.fontWeight,
+                          $color: theme.typography.heading2.color,
+                          children: [
+                            "/",
+                            period
+                          ]
                         }
                       )
-                    ]
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
-                  Flex,
-                  {
-                    $flexDirection: "column",
-                    $justifyContent: "end",
-                    $flexGrow: "1",
-                    $gap: `${cardPadding}rem`,
-                    $padding: `${0.75 * cardPadding}rem ${cardPadding}rem 0`,
-                    children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Flex, { $flexDirection: "column", $gap: "0.5rem", $flexGrow: "1", children: plan.entitlements.map(
-                        ({
-                          id,
+                    ] }),
+                    isActivePlan && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                      Flex,
+                      {
+                        $position: "absolute",
+                        $right: "1rem",
+                        $top: "1rem",
+                        $fontSize: "0.75rem",
+                        $color: hexToHSL(theme.primary).l > 50 ? "#000000" : "#FFFFFF",
+                        $backgroundColor: theme.primary,
+                        $borderRadius: "9999px",
+                        $padding: "0.125rem 0.85rem",
+                        children: "Active"
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+                Flex,
+                {
+                  $flexDirection: "column",
+                  $justifyContent: "end",
+                  $flexGrow: "1",
+                  $gap: `${cardPadding}rem`,
+                  $padding: `${0.75 * cardPadding}rem ${cardPadding}rem 0`,
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Flex, { $flexDirection: "column", $gap: "1rem", $flexGrow: "1", children: plan.entitlements.map(
+                      ({
+                        id,
+                        feature,
+                        metricPeriod,
+                        valueNumeric,
+                        valueType
+                      }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                        PlanEntitlementRow,
+                        {
                           feature,
                           metricPeriod,
                           valueNumeric,
                           valueType
-                        }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-                          PlanEntitlementRow,
-                          {
-                            feature,
-                            metricPeriod,
-                            valueNumeric,
-                            valueType
-                          },
-                          id
-                        )
-                      ) }),
-                      plan.id === selectedPlan?.id ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
-                        Flex,
-                        {
-                          $justifyContent: "center",
-                          $alignItems: "center",
-                          $gap: "0.25rem",
-                          $padding: "0.625rem 0",
-                          children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-                              Icon2,
-                              {
-                                name: "check-rounded",
-                                style: {
-                                  fontSize: 20,
-                                  lineHeight: 1,
-                                  color: theme.primary
-                                }
-                              }
-                            ),
-                            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-                              Text,
-                              {
-                                $size: 15,
-                                $leading: 1,
-                                $color: theme.typography.text.color,
-                                children: isActivePlan ? "Current plan" : "Selected"
+                        },
+                        id
+                      )
+                    ) }),
+                    plan.id === selectedPlan?.id ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+                      Flex,
+                      {
+                        $justifyContent: "center",
+                        $alignItems: "center",
+                        $gap: "0.25rem",
+                        $padding: "0.625rem 0",
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                            Icon2,
+                            {
+                              name: "check-rounded",
+                              style: {
+                                fontSize: 20,
+                                lineHeight: 1,
+                                color: theme.primary
                               }
-                            )
-                          ]
-                        }
-                      ) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-                        EmbedButton,
-                        {
-                          disabled: isLoading || !plan.valid,
-                          onClick: () => {
-                            selectPlan(plan);
-                          },
-                          $size: "sm",
-                          $color: "primary",
-                          $variant: index < currentPlanIndex ? "outline" : "filled",
-                          children: !plan.valid ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-                            Tooltip,
+                            }
+                          ),
+                          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                            Text,
                             {
-                              label: "Over usage limit",
-                              description: "Current usage exceeds the limit of this plan."
+                              $size: 15,
+                              $leading: 1,
+                              $color: theme.typography.text.color,
+                              children: isActivePlan ? "Current plan" : "Selected"
                             }
-                          ) : "Choose plan"
-                        }
-                      )
-                    ]
-                  }
-                )
-              ]
-            },
-            plan.id
-          );
-        })
-      }
-    )
-  ] });
+                          )
+                        ]
+                      }
+                    ) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                      EmbedButton,
+                      {
+                        disabled: isLoading || !plan.valid,
+                        onClick: () => {
+                          selectPlan(plan);
+                        },
+                        $size: "sm",
+                        $color: "primary",
+                        $variant: index < currentPlanIndex ? "outline" : "filled",
+                        children: !plan.valid ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                          Tooltip,
+                          {
+                            trigger: "Over usage limit",
+                            content: "Current usage exceeds the limit of this plan."
+                          }
+                        ) : "Choose plan"
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          },
+          plan.id
+        );
+      })
+    }
+  ) });
 };
 
 // src/components/shared/checkout-dialog/AddOns.tsx
@@ -12589,159 +12728,130 @@ var AddOns = ({ addOns, toggle, isLoading, period }) => {
   const theme = nt();
   const periodKey = period === "year" ? "yearlyPrice" : "monthlyPrice";
   const cardPadding = theme.card.padding / TEXT_BASE_SIZE;
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(Flex, { $flexDirection: "column", $gap: "1rem", $marginBottom: "1rem", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-        Text,
-        {
-          as: "h3",
-          id: "select-addons-dialog-label",
-          $font: theme.typography.heading3.fontFamily,
-          $size: theme.typography.heading3.fontSize,
-          $weight: theme.typography.heading3.fontWeight,
-          $color: theme.typography.heading3.color,
-          $marginBottom: "0.5rem",
-          children: "Customize with add-ons"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-        Text,
-        {
-          as: "p",
-          id: "select-addons-dialog-description",
-          $font: theme.typography.text.fontFamily,
-          $size: theme.typography.text.fontSize,
-          $weight: theme.typography.text.fontWeight,
-          $color: theme.typography.text.color,
-          children: "Optionally add features to your subscription"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-      Box,
-      {
-        $display: "grid",
-        $gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))",
-        $gap: "1rem",
-        children: addOns.map((addOn) => {
-          return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
-            Flex,
-            {
-              $position: "relative",
-              $flexDirection: "column",
-              $gap: "2rem",
-              $padding: `${cardPadding}rem`,
-              $backgroundColor: theme.card.background,
-              $borderRadius: `${theme.card.borderRadius / TEXT_BASE_SIZE}rem`,
-              $outlineWidth: "2px",
-              $outlineStyle: "solid",
-              $outlineColor: addOn.isSelected ? theme.primary : "transparent",
-              ...theme.card.hasShadow && { $boxShadow: cardBoxShadow },
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(Flex, { $flexDirection: "column", $gap: "0.75rem", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_jsx_runtime22.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    Box,
+    {
+      $display: "grid",
+      $gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))",
+      $gap: "1rem",
+      children: addOns.map((addOn) => {
+        return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+          Flex,
+          {
+            $position: "relative",
+            $flexDirection: "column",
+            $gap: "2rem",
+            $padding: `${cardPadding}rem`,
+            $backgroundColor: theme.card.background,
+            $borderRadius: `${theme.card.borderRadius / TEXT_BASE_SIZE}rem`,
+            $outlineWidth: "2px",
+            $outlineStyle: "solid",
+            $outlineColor: addOn.isSelected ? theme.primary : "transparent",
+            ...theme.card.hasShadow && { $boxShadow: cardBoxShadow },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(Flex, { $flexDirection: "column", $gap: "0.75rem", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                  Text,
+                  {
+                    $font: theme.typography.heading3.fontFamily,
+                    $size: theme.typography.heading3.fontSize,
+                    $weight: theme.typography.heading3.fontWeight,
+                    $color: theme.typography.heading3.color,
+                    children: addOn.name
+                  }
+                ) }),
+                addOn.description && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                  Text,
+                  {
+                    $font: theme.typography.text.fontFamily,
+                    $size: theme.typography.text.fontSize,
+                    $weight: theme.typography.text.fontWeight,
+                    $color: theme.typography.text.color,
+                    children: addOn.description
+                  }
+                ) }),
+                addOn[periodKey] && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(Box, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                     Text,
                     {
-                      $font: theme.typography.heading3.fontFamily,
-                      $size: theme.typography.heading3.fontSize,
-                      $weight: theme.typography.heading3.fontWeight,
-                      $color: theme.typography.heading3.color,
-                      children: addOn.name
+                      $font: theme.typography.heading2.fontFamily,
+                      $size: theme.typography.heading2.fontSize,
+                      $weight: theme.typography.heading2.fontWeight,
+                      $color: theme.typography.heading2.color,
+                      children: formatCurrency(
+                        (period === "month" ? addOn.monthlyPrice : addOn.yearlyPrice)?.price ?? 0
+                      )
                     }
-                  ) }),
-                  addOn.description && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
                     Text,
                     {
-                      $font: theme.typography.text.fontFamily,
-                      $size: theme.typography.text.fontSize,
-                      $weight: theme.typography.text.fontWeight,
-                      $color: theme.typography.text.color,
-                      children: addOn.description
-                    }
-                  ) }),
-                  addOn[periodKey] && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(Box, { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-                      Text,
-                      {
-                        $font: theme.typography.heading2.fontFamily,
-                        $size: theme.typography.heading2.fontSize,
-                        $weight: theme.typography.heading2.fontWeight,
-                        $color: theme.typography.heading2.color,
-                        children: formatCurrency(
-                          (period === "month" ? addOn.monthlyPrice : addOn.yearlyPrice)?.price ?? 0
-                        )
-                      }
-                    ),
-                    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
-                      Text,
-                      {
-                        $font: theme.typography.heading2.fontFamily,
-                        $size: 16 / 30 * theme.typography.heading2.fontSize,
-                        $weight: theme.typography.heading2.fontWeight,
-                        $color: theme.typography.heading2.color,
-                        children: [
-                          "/",
-                          period
-                        ]
-                      }
-                    )
-                  ] }),
-                  addOn.current && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-                    Flex,
-                    {
-                      $position: "absolute",
-                      $right: "1rem",
-                      $top: "1rem",
-                      $fontSize: "0.625rem",
-                      $color: hexToHSL(theme.primary).l > 50 ? "#000000" : "#FFFFFF",
-                      $backgroundColor: theme.primary,
-                      $borderRadius: "9999px",
-                      $padding: "0.125rem 0.85rem",
-                      children: "Active"
+                      $font: theme.typography.heading2.fontFamily,
+                      $size: 16 / 30 * theme.typography.heading2.fontSize,
+                      $weight: theme.typography.heading2.fontWeight,
+                      $color: theme.typography.heading2.color,
+                      children: [
+                        "/",
+                        period
+                      ]
                     }
                   )
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Flex, { $flexDirection: "column", $justifyContent: "end", $flexGrow: "1", children: !addOn.isSelected ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-                  EmbedButton,
+                addOn.current && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                  Flex,
                   {
-                    disabled: isLoading || !addOn.valid,
-                    onClick: () => toggle(addOn.id),
-                    $size: "sm",
-                    $color: "primary",
-                    $variant: "outline",
-                    children: "Choose add-on"
+                    $position: "absolute",
+                    $right: "1rem",
+                    $top: "1rem",
+                    $fontSize: "0.75rem",
+                    $color: hexToHSL(theme.primary).l > 50 ? "#000000" : "#FFFFFF",
+                    $backgroundColor: theme.primary,
+                    $borderRadius: "9999px",
+                    $padding: "0.125rem 0.85rem",
+                    children: "Active"
                   }
-                ) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-                  EmbedButton,
-                  {
-                    disabled: isLoading || !addOn.valid,
-                    onClick: () => toggle(addOn.id),
-                    $size: "sm",
-                    $color: addOn.current ? "danger" : "primary",
-                    $variant: addOn.current ? "ghost" : "text",
-                    children: addOn.current ? "Remove add-on" : /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-                        Icon2,
-                        {
-                          name: "check-rounded",
-                          style: {
-                            fontSize: 20,
-                            lineHeight: 1
-                          }
+                )
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Flex, { $flexDirection: "column", $justifyContent: "end", $flexGrow: "1", children: !addOn.isSelected ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                EmbedButton,
+                {
+                  disabled: isLoading || !addOn.valid,
+                  onClick: () => toggle(addOn.id),
+                  $size: "sm",
+                  $color: "primary",
+                  $variant: "outline",
+                  children: "Choose add-on"
+                }
+              ) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                EmbedButton,
+                {
+                  disabled: isLoading || !addOn.valid,
+                  onClick: () => toggle(addOn.id),
+                  $size: "sm",
+                  $color: addOn.current ? "danger" : "primary",
+                  $variant: addOn.current ? "ghost" : "text",
+                  children: addOn.current ? "Remove add-on" : /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                      Icon2,
+                      {
+                        name: "check-rounded",
+                        style: {
+                          fontSize: 20,
+                          lineHeight: 1
                         }
-                      ),
-                      "Selected"
-                    ] })
-                  }
-                ) })
-              ]
-            },
-            addOn.id
-          );
-        })
-      }
-    )
-  ] });
+                      }
+                    ),
+                    "Selected"
+                  ] })
+                }
+              ) })
+            ]
+          },
+          addOn.id
+        );
+      })
+    }
+  ) });
 };
 
 // src/components/shared/checkout-dialog/Checkout.tsx
@@ -12827,35 +12937,45 @@ var CheckoutDialog = ({
   initialAddOnId,
   portal
 }) => {
+  const theme = nt();
   const { api, data } = useEmbed();
-  const [checkoutStage, setCheckoutStage] = (0, import_react18.useState)("plan");
-  const [planPeriod, setPlanPeriod] = (0, import_react18.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_react18.useState)();
-  const [paymentMethodId, setPaymentMethodId] = (0, import_react18.useState)();
-  const [isLoading, setIsLoading] = (0, import_react18.useState)(false);
-  const [error, setError] = (0, import_react18.useState)();
-  const [showPaymentForm, setShowPaymentForm] = (0, import_react18.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_react18.useState)(null);
-  const [setupIntent, setSetupIntent] = (0, import_react18.useState)();
-  const [top, setTop] = (0, import_react18.useState)(0);
-  const { plans: availablePlans, addOns: availableAddOns } = useAvailablePlans(planPeriod);
-  const checkoutStages = (0, import_react18.useMemo)(() => {
+  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_react20.useMemo)(() => {
     const checkoutStages2 = [
       {
         id: "plan",
-        name: "Select plan",
+        name: "Plan",
+        label: "Select plan",
         description: "Choose your base plan"
       },
       {
         id: "addons",
-        name: "Customize with addons",
+        name: "Add-ons",
+        label: "Select add-ons",
         description: "Optionally add features to your subscription"
       },
-      { id: "checkout", name: "Checkout", description: "" }
+      { id: "checkout", name: "Checkout", label: "Checkout" }
     ];
     if (!availableAddOns.length) {
       checkoutStages2.splice(1, 1);
@@ -12863,21 +12983,22 @@ var CheckoutDialog = ({
     return checkoutStages2;
   }, [availableAddOns]);
   const currentPlan = data.company?.plan;
-  const [selectedPlan, setSelectedPlan] = (0, import_react18.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_react18.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_react18.useCallback)(
-    async (plan, addOns2, period) => {
+  const previewCheckout = (0, import_react20.useCallback)(
+    async (plan, addOns2, newPeriod) => {
+      const period = newPeriod || planPeriod;
       const planPriceId = period === "month" ? plan?.monthlyPrice?.id : plan?.yearlyPrice?.id;
       if (!api || !planPriceId) {
         return;
@@ -12911,18 +13032,33 @@ var CheckoutDialog = ({
         );
       } finally {
         setIsLoading(false);
+        if (!newPeriod) {
+          checkoutRef.current?.scrollIntoView({
+            behavior: "smooth",
+            block: "nearest"
+          });
+        }
       }
     },
-    [api]
+    [api, planPeriod]
   );
-  const selectPlan = (0, import_react18.useCallback)(
+  const selectPlan = (0, import_react20.useCallback)(
     (plan, newPeriod) => {
       setSelectedPlan(plan);
-      previewCheckout(plan, addOns, newPeriod || planPeriod);
+      previewCheckout(plan, addOns, newPeriod);
+    },
+    [addOns, previewCheckout]
+  );
+  const changePlanPeriod = (0, import_react20.useCallback)(
+    (period) => {
+      if (selectedPlan) {
+        selectPlan(selectedPlan, period);
+      }
+      setPlanPeriod(period);
     },
-    [addOns, planPeriod, previewCheckout]
+    [selectedPlan, selectPlan, setPlanPeriod]
   );
-  const toggleAddOn = (0, import_react18.useCallback)(
+  const toggleAddOn = (0, import_react20.useCallback)(
     (id, newPeriod) => {
       const updatedAddOns = addOns.map((addOn) => ({
         ...addOn,
@@ -12936,12 +13072,12 @@ var CheckoutDialog = ({
     },
     [selectedPlan, addOns, planPeriod, previewCheckout]
   );
-  (0, import_react18.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     if (!stripe && setupIntent?.publishableKey) {
       setStripe(loadStripe(setupIntent.publishableKey));
     }
   }, [stripe, setupIntent?.publishableKey]);
-  (0, import_react18.useLayoutEffect)(() => {
+  (0, import_react20.useLayoutEffect)(() => {
     const parent = portal || document.body;
     const value = Math.abs(parent.getBoundingClientRect().top ?? 0);
     setTop(value);
@@ -12950,102 +13086,219 @@ var CheckoutDialog = ({
       parent.style.overflow = "";
     };
   }, [portal]);
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(Modal, { size: "lg", top, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ModalHeader, { bordered: true, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Flex, { $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)
-      },
-      stage.id
-    )) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(Flex, { $position: "relative", $height: "calc(100% - 5rem)", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
-        Flex,
-        {
-          $flexDirection: "column",
-          $flexGrow: "1",
-          $gap: "1rem",
-          $padding: "2rem 2.5rem 2rem 2.5rem",
-          $backgroundColor: isLightBackground ? "hsla(0, 0%, 0%, 0.025)" : "hsla(0, 0%, 100%, 0.025)",
-          $flex: "1",
-          $overflow: "auto",
-          children: [
-            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)
+  (0, import_react20.useLayoutEffect)(() => {
+    if (contentRef.current) {
+      contentRef.current.scrollTo({
+        top: 0,
+        left: 0,
+        behavior: "smooth"
+      });
+    }
+  }, [checkoutStage]);
+  const activeCheckoutStage = checkoutStages.find(
+    (stage) => stage.id === checkoutStage
+  );
+  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,
+          {
+            $flexWrap: "wrap",
+            $gap: "0.5rem",
+            $viewport: {
+              md: {
+                $gap: "1rem"
               }
-            ),
-            checkoutStage === "checkout" && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-              Checkout,
+            },
+            children: checkoutStages.map((stage, index, stages) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+              Navigation,
               {
-                setPaymentMethodId: (id) => setPaymentMethodId(id),
-                togglePaymentForm: () => setShowPaymentForm((prev2) => !prev2),
-                setupIntent,
-                showPaymentForm,
-                stripe
+                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: {
+              md: {
+                $flexDirection: "row",
+                $height: "calc(100% - 5rem)"
               }
-            )
-          ]
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-        Sidebar,
-        {
-          addOns,
-          charges,
-          checkoutStage,
-          currentAddOns,
-          currentPlan,
-          error,
-          isLoading,
-          paymentMethodId,
-          planPeriod,
-          selectedPlan,
-          selectPlan,
-          setCheckoutStage: (stage) => setCheckoutStage(stage),
-          setError: (msg) => setError(msg),
-          setPlanPeriod: (period) => setPlanPeriod(period),
-          setSetupIntent: (intent) => setSetupIntent(intent),
-          showPaymentForm,
-          toggleLoading: () => setIsLoading((prev2) => !prev2)
-        }
-      )
-    ] })
-  ] });
+            },
+            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
+                                  }
+                                )
+                              ]
+                            }
+                          ),
+                          /* @__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_react19 = 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_react19.useState)(null);
-  const [isLoading, setIsLoading] = (0, import_react19.useState)(false);
-  const [isConfirmed, setIsConfirmed] = (0, import_react19.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) {
@@ -13106,43 +13359,75 @@ 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,
-  onChange
+  selectedPlan,
+  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,
     {
-      $width: "fit-content",
+      $margin: 0,
       $backgroundColor: theme.card.background,
       $borderWidth: "1px",
       $borderStyle: "solid",
       $borderColor: isLightBackground ? "hsl(0, 0%, 92.5%)" : "hsl(0, 0%, 7.5%)",
       $borderRadius: "2.5rem",
       $cursor: "pointer",
+      $viewport: {
+        md: {
+          $width: "fit-content"
+        }
+      },
       children: options.map((option) => {
-        return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+        const element = /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
           Flex,
           {
             tabIndex: 0,
             onClick: () => onChange(option),
             $justifyContent: "center",
             $alignItems: "center",
-            $padding: "0.375rem 1rem",
+            $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: {
+              md: {
+                $padding: "0.375rem 1rem"
+              }
+            },
             children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
               Text,
               {
-                $flexShrink: "0",
+                $flexShrink: 0,
                 $font: theme.typography.text.fontFamily,
-                $size: 14,
+                $size: 15,
                 $weight: option === selectedOption ? 600 : 400,
                 $color: theme.typography.text.color,
                 children: [
@@ -13154,38 +13439,36 @@ var PeriodToggle = ({
           },
           option
         );
+        if (option === "year" && savingsPercentage > 0) {
+          return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+            Tooltip,
+            {
+              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;
       })
     }
   );
 };
 
-// src/components/shared/savings/Savings.tsx
-var import_react20 = require("react");
-var import_jsx_runtime27 = require("react/jsx-runtime");
-var Savings = ({ plan, period }) => {
-  const theme = nt();
-  const savingsPercentage = (0, import_react20.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,
-      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: {
@@ -13208,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,
@@ -13220,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,
@@ -13230,7 +13513,7 @@ var PaymentMethodElement = ({
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
       Flex,
       {
         $justifyContent: "space-between",
@@ -13239,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,
@@ -13257,20 +13540,20 @@ var PaymentMethodElement = ({
     )
   ] });
 };
-var PaymentMethod = (0, import_react21.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_react21.useState)(false);
-  const [error, setError] = (0, import_react21.useState)();
-  const [showPaymentForm, setShowPaymentForm] = (0, import_react21.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_react21.useState)(null);
-  const [setupIntent, setSetupIntent] = (0, import_react21.useState)();
-  const [top, setTop] = (0, import_react21.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_react21.useMemo)(() => {
+  const paymentMethod = (0, import_react23.useMemo)(() => {
     const { paymentMethodType, cardLast4, cardExpMonth, cardExpYear } = data.subscription?.paymentMethod || {};
     let monthsToExpiration;
     if (typeof cardExpYear === "number" && typeof cardExpMonth === "number") {
@@ -13290,7 +13573,7 @@ var PaymentMethod = (0, import_react21.forwardRef)(({ children, className, porta
       monthsToExpiration
     };
   }, [data.subscription?.paymentMethod]);
-  const createSetupIntent = (0, import_react21.useCallback)(async () => {
+  const createSetupIntent = (0, import_react23.useCallback)(async () => {
     if (!api || !data.component?.id) {
       return;
     }
@@ -13307,7 +13590,7 @@ var PaymentMethod = (0, import_react21.forwardRef)(({ children, className, porta
       setIsLoading(false);
     }
   }, [api, data.component?.id]);
-  const updatePaymentMethod = (0, import_react21.useCallback)(
+  const updatePaymentMethod = (0, import_react23.useCallback)(
     async (id) => {
       if (!api || !id) {
         return;
@@ -13328,22 +13611,16 @@ var PaymentMethod = (0, import_react21.forwardRef)(({ children, className, porta
     },
     [api, setLayout]
   );
-  (0, import_react21.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     if (!stripe && setupIntent?.publishableKey) {
       setStripe(loadStripe(setupIntent.publishableKey));
     }
   }, [stripe, setupIntent?.publishableKey]);
-  (0, import_react21.useEffect)(() => {
-    document.body.style.overflow = layout === "payment" ? "hidden" : "";
-    return () => {
-      document.body.style.overflow = "";
-    };
-  }, [layout]);
-  (0, import_react21.useLayoutEffect)(() => {
+  (0, import_react23.useLayoutEffect)(() => {
     const parent = portal || document.body;
     const value = Math.abs(parent.getBoundingClientRect().top ?? 0);
     setTop(value);
-    parent.style.overflow = "hidden";
+    parent.style.overflow = layout === "payment" ? "hidden" : "";
     return () => {
       parent.style.overflow = "";
     };
@@ -13351,8 +13628,8 @@ var PaymentMethod = (0, import_react21.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") },
@@ -13360,9 +13637,9 @@ var PaymentMethod = (0, import_react21.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,
@@ -13372,7 +13649,7 @@ var PaymentMethod = (0, import_react21.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",
@@ -13381,8 +13658,8 @@ var PaymentMethod = (0, import_react21.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,
@@ -13413,15 +13690,15 @@ var PaymentMethod = (0, import_react21.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",
@@ -13429,7 +13706,7 @@ var PaymentMethod = (0, import_react21.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,
@@ -13441,7 +13718,7 @@ var PaymentMethod = (0, import_react21.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,
@@ -13462,9 +13739,9 @@ var PaymentMethod = (0, import_react21.forwardRef)(({ children, className, porta
 PaymentMethod.displayName = "PaymentMethod";
 
 // src/components/elements/plan-manager/PlanManager.tsx
-var import_react22 = 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: {
@@ -13478,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: {
@@ -13493,7 +13770,7 @@ var resolveDesignProps5 = (props) => {
     }
   };
 };
-var PlanManager = (0, import_react22.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();
@@ -13503,7 +13780,7 @@ var PlanManager = (0, import_react22.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,
@@ -13512,7 +13789,7 @@ var PlanManager = (0, import_react22.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",
@@ -13520,8 +13797,8 @@ var PlanManager = (0, import_react22.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,
@@ -13533,7 +13810,7 @@ var PlanManager = (0, import_react22.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,
@@ -13545,25 +13822,36 @@ var PlanManager = (0, import_react22.forwardRef)(({ children, className, portal,
                   }
                 )
               ] }),
-              props.header.price.isVisible && typeof currentPlan.planPrice === "number" && currentPlan.planPeriod && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
-                Text,
-                {
-                  $font: theme.typography[props.header.price.fontStyle].fontFamily,
-                  $size: theme.typography[props.header.price.fontStyle].fontSize,
-                  $weight: theme.typography[props.header.price.fontStyle].fontWeight,
-                  $color: theme.typography[props.header.price.fontStyle].color,
-                  children: [
-                    formatCurrency(currentPlan.planPrice),
-                    "/",
-                    currentPlan.planPeriod
-                  ]
-                }
-              )
+              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,
+                    $size: theme.typography[props.header.price.fontStyle].fontSize,
+                    $weight: theme.typography[props.header.price.fontStyle].fontWeight,
+                    $color: theme.typography[props.header.price.fontStyle].color,
+                    children: formatCurrency(currentPlan.planPrice)
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+                  Text,
+                  {
+                    $font: theme.typography[props.header.price.fontStyle].fontFamily,
+                    $size: 16 / 30 * theme.typography[props.header.price.fontStyle].fontSize,
+                    $weight: theme.typography[props.header.price.fontStyle].fontWeight,
+                    $color: theme.typography[props.header.price.fontStyle].color,
+                    children: [
+                      "/",
+                      currentPlan.planPeriod
+                    ]
+                  }
+                )
+              ] })
             ]
           }
         ),
-        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,
@@ -13574,7 +13862,7 @@ var PlanManager = (0, import_react22.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",
@@ -13582,7 +13870,7 @@ var PlanManager = (0, import_react22.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,
@@ -13592,7 +13880,7 @@ var PlanManager = (0, import_react22.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,
@@ -13611,7 +13899,7 @@ var PlanManager = (0, import_react22.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: () => {
@@ -13622,8 +13910,8 @@ var PlanManager = (0, import_react22.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
         )
       ]
@@ -13633,10 +13921,10 @@ var PlanManager = (0, import_react22.forwardRef)(({ children, className, portal,
 PlanManager.displayName = "PlanManager";
 
 // src/components/elements/pricing-table/PricingTable.tsx
-var import_react23 = 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,
@@ -13666,73 +13954,77 @@ var resolveDesignProps6 = (props) => {
     },
     upgrade: {
       isVisible: props.upgrade?.isVisible ?? true,
-      buttonSize: props.upgrade?.buttonSize ?? "sm",
+      buttonSize: props.upgrade?.buttonSize ?? "md",
       buttonStyle: props.upgrade?.buttonStyle ?? "primary"
     },
     downgrade: {
       isVisible: props.downgrade?.isVisible ?? true,
-      buttonSize: props.downgrade?.buttonSize ?? "sm",
+      buttonSize: props.downgrade?.buttonSize ?? "md",
       buttonStyle: props.downgrade?.buttonStyle ?? "primary"
     }
   };
 };
-var PricingTable = (0, import_react23.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_react23.useState)(
+  const [selectedPeriod, setSelectedPeriod] = (0, import_react25.useState)(
     () => data.company?.plan?.planPeriod || "month"
   );
-  const [selectedPlanId, setSelectedPlanId] = (0, import_react23.useState)();
-  const [selectedAddOnId, setSelectedAddOnId] = (0, import_react23.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);
-  const currentPlan = plans[currentPlanIndex];
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
     FussyChild,
     {
       ref,
       className,
       as: Flex,
       $flexDirection: "column",
-      $gap: "3rem",
+      $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,
             {
-              $justifyContent: "space-between",
+              $flexDirection: "column",
+              $justifyContent: "center",
               $alignItems: "center",
-              $marginBottom: "2rem",
+              $gap: "1rem",
+              $marginBottom: "1rem",
+              $viewport: {
+                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,
                     $size: theme.typography[props.header.fontStyle].fontSize,
                     $weight: theme.typography[props.header.fontStyle].fontWeight,
-                    $color: theme.typography[props.header.fontStyle].color,
+                    $color: theme.card.background,
                     children: props.header.isVisible && props.plans.isVisible && plans.length > 0 && "Plans"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Flex, { $alignItems: "center", $gap: "1rem", children: [
-                  props.showDiscount && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Savings, { plan: currentPlan, period: selectedPeriod }),
-                  props.showPeriodToggle && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-                    PeriodToggle,
-                    {
-                      options: periods,
-                      selectedOption: selectedPeriod,
-                      onChange: (period) => setSelectedPeriod(period)
-                    }
-                  )
-                ] })
+                props.showPeriodToggle && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+                  PeriodToggle,
+                  {
+                    options: periods,
+                    selectedOption: selectedPeriod,
+                    onChange: (period) => setSelectedPeriod(period)
+                  }
+                )
               ]
             }
           ),
-          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",
@@ -13740,7 +14032,7 @@ var PricingTable = (0, import_react23.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",
@@ -13753,7 +14045,7 @@ var PricingTable = (0, import_react23.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",
@@ -13763,7 +14055,7 @@ var PricingTable = (0, import_react23.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,
@@ -13773,7 +14065,7 @@ var PricingTable = (0, import_react23.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,
@@ -13783,8 +14075,8 @@ var PricingTable = (0, import_react23.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,
@@ -13796,7 +14088,7 @@ var PricingTable = (0, import_react23.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,
@@ -13810,13 +14102,13 @@ var PricingTable = (0, import_react23.forwardRef)(({ children, className, portal
                                 }
                               )
                             ] }),
-                            isActivePlan && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                            isActivePlan && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                               Flex,
                               {
                                 $position: "absolute",
                                 $right: "1rem",
                                 $top: "1rem",
-                                $fontSize: "0.625rem",
+                                $fontSize: "0.75rem",
                                 $color: hexToHSL(theme.primary).l > 50 ? "#000000" : "#FFFFFF",
                                 $backgroundColor: theme.primary,
                                 $borderRadius: "9999px",
@@ -13827,7 +14119,7 @@ var PricingTable = (0, import_react23.forwardRef)(({ children, className, portal
                           ]
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+                      /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
                         Flex,
                         {
                           $flexDirection: "column",
@@ -13836,8 +14128,8 @@ var PricingTable = (0, import_react23.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: "0.5rem", $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,
@@ -13852,8 +14144,8 @@ var PricingTable = (0, import_react23.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,
@@ -13864,14 +14156,14 @@ var PricingTable = (0, import_react23.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",
@@ -13885,7 +14177,7 @@ var PricingTable = (0, import_react23.forwardRef)(({ children, className, portal
                                 ] }, entitlement.id);
                               })
                             ] }),
-                            isActivePlan ? /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+                            isActivePlan ? /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
                               Flex,
                               {
                                 $justifyContent: "center",
@@ -13893,7 +14185,7 @@ var PricingTable = (0, import_react23.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",
@@ -13904,7 +14196,7 @@ var PricingTable = (0, import_react23.forwardRef)(({ children, className, portal
                                       }
                                     }
                                   ),
-                                  /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                                  /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                                     Text,
                                     {
                                       $size: 15,
@@ -13915,7 +14207,7 @@ var PricingTable = (0, import_react23.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,
@@ -13933,11 +14225,11 @@ var PricingTable = (0, import_react23.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"
                               }
@@ -13953,26 +14245,26 @@ var PricingTable = (0, import_react23.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: "2rem",
-              children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+              $marginBottom: "1rem",
+              children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                 Text,
                 {
                   $font: theme.typography[props.header.fontStyle].fontFamily,
                   $size: theme.typography[props.header.fontStyle].fontSize,
                   $weight: theme.typography[props.header.fontStyle].fontWeight,
-                  $color: theme.typography[props.header.fontStyle].color,
+                  $color: theme.card.background,
                   children: "Add-ons"
                 }
               )
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
             Box,
             {
               $display: "grid",
@@ -13980,7 +14272,7 @@ var PricingTable = (0, import_react23.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",
@@ -13994,8 +14286,8 @@ var PricingTable = (0, import_react23.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,
@@ -14005,7 +14297,7 @@ var PricingTable = (0, import_react23.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,
@@ -14015,8 +14307,8 @@ var PricingTable = (0, import_react23.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,
@@ -14028,7 +14320,7 @@ var PricingTable = (0, import_react23.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,
@@ -14042,13 +14334,13 @@ var PricingTable = (0, import_react23.forwardRef)(({ children, className, portal
                             }
                           )
                         ] }),
-                        isActiveAddOn && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                        isActiveAddOn && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                           Flex,
                           {
                             $position: "absolute",
                             $right: "1rem",
                             $top: "1rem",
-                            $fontSize: "0.625rem",
+                            $fontSize: "0.75rem",
                             $color: hexToHSL(theme.primary).l > 50 ? "#000000" : "#FFFFFF",
                             $backgroundColor: theme.primary,
                             $borderRadius: "9999px",
@@ -14057,7 +14349,7 @@ var PricingTable = (0, import_react23.forwardRef)(({ children, className, portal
                           }
                         )
                       ] }),
-                      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+                      /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
                         Flex,
                         {
                           $flexDirection: "column",
@@ -14065,23 +14357,23 @@ var PricingTable = (0, import_react23.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",
                                 $position: "relative",
-                                $gap: "0.5rem",
+                                $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,
@@ -14092,14 +14384,14 @@ var PricingTable = (0, import_react23.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",
@@ -14117,7 +14409,7 @@ var PricingTable = (0, import_react23.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,
@@ -14142,8 +14434,8 @@ var PricingTable = (0, import_react23.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,
@@ -14160,8 +14452,8 @@ var PricingTable = (0, import_react23.forwardRef)(({ children, className, portal
 PricingTable.displayName = "PricingTable";
 
 // src/components/elements/upcoming-bill/UpcomingBill.tsx
-var import_react24 = 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: {
@@ -14180,11 +14472,11 @@ function resolveDesignProps7(props) {
     }
   };
 }
-var UpcomingBill = (0, import_react24.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_react24.useMemo)(() => {
+  const { upcomingInvoice } = (0, import_react26.useMemo)(() => {
     return {
       upcomingInvoice: {
         ...typeof data.upcomingInvoice?.amountDue === "number" && {
@@ -14202,14 +14494,14 @@ var UpcomingBill = (0, import_react24.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,
@@ -14225,8 +14517,8 @@ var UpcomingBill = (0, import_react24.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,
@@ -14237,7 +14529,7 @@ var UpcomingBill = (0, import_react24.forwardRef)(({ className, ...rest }, ref)
           children: formatCurrency(upcomingInvoice.amountDue)
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Box, { $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,
@@ -14254,10 +14546,10 @@ var UpcomingBill = (0, import_react24.forwardRef)(({ className, ...rest }, ref)
 UpcomingBill.displayName = "UpcomingBill";
 
 // src/components/embed/ComponentTree.tsx
-var import_react26 = require("react");
+var import_react28 = require("react");
 
 // src/components/embed/renderer.ts
-var import_react25 = require("react");
+var import_react27 = require("react");
 var components = {
   Root,
   Viewport,
@@ -14289,7 +14581,7 @@ function createRenderer(options) {
     const { className, ...rest } = props;
     const resolvedProps = component === "div" ? rest : props;
     const resolvedChildren = children.map(renderNode);
-    return (0, import_react25.createElement)(
+    return (0, import_react27.createElement)(
       component,
       {
         key: index,
@@ -14302,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%",
@@ -14313,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",
@@ -14330,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`,
@@ -14341,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`,
@@ -14358,31 +14650,31 @@ var Error2 = ({ message }) => {
 };
 var ComponentTree = () => {
   const { error, nodes } = useEmbed();
-  const [children, setChildren] = (0, import_react26.useState)(/* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Loading, {}));
-  (0, import_react26.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_react26.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: