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

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_react15 = require("react");
 
 // node_modules/styled-components/node_modules/tslib/tslib.es6.mjs
 var __assign = function() {
@@ -8341,6 +8341,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
     ),
@@ -9675,13 +9676,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 +9718,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.3";
       headers["X-Schematic-Session-ID"] = sessionIdRef.current;
       const config = new Configuration({
         ...apiConfig,
@@ -10001,22 +9999,39 @@ var Root = (0, import_react7.forwardRef)(
 Root.displayName = "Root";
 
 // src/components/layout/viewport/Viewport.tsx
-var import_react11 = require("react");
+var import_react12 = 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 +10117,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`
@@ -10406,7 +10424,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)`
@@ -10429,25 +10447,22 @@ var Container2 = dt(Box)`
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var Modal = ({
   children,
+  contentRef,
   size = "auto",
   top = 0,
-  onClose
+  onClose,
+  ...rest
 }) => {
   const theme = nt();
   const { setLayout } = useEmbed();
-  const ref = (0, import_react8.useRef)(null);
   const isLightBackground = useIsLightBackground();
-  const handleClose = (0, import_react8.useCallback)(() => {
+  const handleClose = (0, import_react9.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) {
@@ -10459,6 +10474,7 @@ var Modal = ({
           handleClose();
         }
       },
+      ...rest,
       $position: "absolute",
       $top: "50%",
       $left: "50%",
@@ -10475,25 +10491,30 @@ var Modal = ({
       children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
         Flex,
         {
+          ref: contentRef,
           $position: "relative",
           $top: "50%",
           $left: "50%",
           $transform: "translate(-50%, -50%)",
           $flexDirection: "column",
-          $overflow: "hidden",
-          ...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"
-          },
+          $overflow: "auto",
+          $width: "100%",
+          $height: "100vh",
           $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",
+          $viewport: {
+            sm: {
+              ...size === "auto" ? { $width: "fit-content", $height: "fit-content" } : {
+                $width: "100%",
+                ...size === "lg" ? { $height: "100%" } : { $height: "fit-content" },
+                $maxWidth: size === "sm" ? "480px" : size === "md" ? "688px" : "1356px",
+                $maxHeight: "860px"
+              },
+              $borderRadius: "0.5rem"
+            }
+          },
           children
         }
       )
@@ -10502,33 +10523,45 @@ var 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: {
+        sm: {
+          $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)(
@@ -10662,6 +10695,7 @@ var TooltipWrapper = dt(Box)`
     left: 50%;
     transform: translateX(-50%);
     bottom: 100%;
+    line-height: 1;
     width: max-content;
     max-width: 100%;
     margin-bottom: 0.75rem;
@@ -10700,30 +10734,10 @@ var TooltipWrapper = dt(Box)`
 
 // 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,
-      {
-        $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
-      }
-    ) })
+var Tooltip = ({ label, description, ...rest }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(TooltipWrapper, { ...rest, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Box, { children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Box, { className: "tooltip", children: description })
   ] });
 };
 
@@ -10731,112 +10745,101 @@ var Tooltip = ({ label, description }) => {
 var import_jsx_runtime10 = require("react/jsx-runtime");
 var Badge = () => {
   const { settings } = useEmbed();
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
-    Flex,
-    {
-      $padding: "0 0.5rem",
-      $width: "100%",
-      $flexDirection: "row",
-      $alignItems: "center",
-      $justifyContent: settings.badge.alignment,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Box, { $marginRight: "0.5rem", $fontSize: "0.75rem", children: "Powered by" }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
-          "svg",
-          {
-            width: "86",
-            height: "16",
-            viewBox: "0 0 86 16",
-            fill: "none",
-            xmlns: "http://www.w3.org/2000/svg",
-            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"
-                }
-              ),
-              /* @__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"
-                }
-              ),
-              /* @__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"
-                }
-              ),
-              /* @__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"
-                }
-              ),
-              /* @__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"
-                }
-              ),
-              /* @__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"
-                }
-              ),
-              /* @__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"
-                }
-              ),
-              /* @__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"
-                }
-              ),
-              /* @__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"
-                }
-              ),
-              /* @__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"
-                }
-              ),
-              /* @__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"
-                }
-              )
-            ]
-          }
-        )
-      ]
-    }
-  );
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Flex, { $justifyContent: settings.badge.alignment, $alignItems: "center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Box, { $fontSize: "0.75rem", $marginRight: "0.5rem", children: "Powered by" }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+      "svg",
+      {
+        width: 86,
+        height: 16,
+        viewBox: "0 0 86 16",
+        style: { marginTop: "0.125rem" },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            "path",
+            {
+              d: "M21.2354 6.16227C21.1796 5.95015 21.0494 5.76779 20.8261 5.61893C20.6028 5.46635 20.3423 5.39564 20.0408 5.39564C19.3151 5.39564 18.7941 5.69708 18.7941 6.2367C18.7941 6.49721 18.9095 6.69073 19.1402 6.81726C19.3635 6.94379 19.732 7.07033 20.2344 7.18569C21.0084 7.37177 21.4922 7.51691 21.9686 7.7402C22.203 7.85557 22.3928 7.97465 22.5305 8.10863C22.7948 8.3803 22.9548 8.74501 22.9362 9.20276C22.9176 9.86147 22.6571 10.375 22.1547 10.7397C21.6523 11.1082 20.9563 11.2905 20.0818 11.2905C19.2072 11.2905 18.5597 11.1268 18.0312 10.8067C17.5065 10.4867 17.2013 10.0215 17.1194 9.41116L18.6192 9.27719C18.6974 9.57491 18.8723 9.7982 19.1514 9.94706C19.4305 10.0959 19.7394 10.1778 20.0818 10.1778C20.4614 10.1778 20.7777 10.0996 21.0308 9.9359C21.2838 9.77959 21.4104 9.56002 21.4104 9.28835C21.4104 8.90876 21.0531 8.61104 20.5991 8.43613C20.3683 8.35053 20.0855 8.27238 19.7468 8.19423C19.2705 8.07886 18.8946 7.97094 18.6155 7.87418C18.3364 7.78486 18.0908 7.66205 17.8712 7.51319C17.4358 7.21547 17.2832 6.8247 17.2832 6.2367C17.2832 5.61521 17.5325 5.13141 18.0312 4.79648C18.5262 4.46526 19.2035 4.29407 20.0669 4.29407C21.5853 4.29407 22.5752 4.9044 22.7389 6.05807L21.228 6.16227H21.2354Z",
+              fill: "currentColor"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            "path",
+            {
+              d: "M29.4145 8.9796L30.7803 9.55271C30.49 10.0923 30.0621 10.5129 29.5001 10.8217C28.9382 11.1344 28.3167 11.2944 27.6319 11.2944C26.9472 11.2944 26.3629 11.1567 25.8121 10.8701C25.2613 10.5873 24.8147 10.1742 24.4835 9.6383C24.1523 9.09868 23.9811 8.48835 23.9811 7.79987C23.9811 7.11138 24.1486 6.49361 24.4835 5.95771C24.8147 5.41809 25.2613 5.00873 25.8121 4.72589C26.3629 4.44305 26.9732 4.30164 27.6319 4.30164C28.2906 4.30164 28.9382 4.45794 29.5038 4.77427C30.0658 5.08688 30.4938 5.51113 30.7803 6.05075L29.4145 6.62015C29.0535 5.93539 28.3985 5.56323 27.6319 5.56323C27.0327 5.56323 26.5303 5.77536 26.1135 6.19961C25.6967 6.62387 25.492 7.15977 25.492 7.80731C25.492 8.45486 25.6967 8.99076 26.1135 9.40757C26.5303 9.83182 27.0327 10.0439 27.6319 10.0439C28.3985 10.0439 29.0535 9.66807 29.4145 8.98703V8.9796Z",
+              fill: "currentColor"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            "path",
+            {
+              d: "M37.4386 11.2049V7.80341C37.4386 6.35945 36.9139 5.59282 35.697 5.59282C35.0978 5.59282 34.614 5.7975 34.2419 6.21059C33.8623 6.61996 33.6725 7.15214 33.6725 7.80713V11.2086H32.1615V1.9234H33.6725V5.47745C34.1004 4.73315 35.001 4.29773 36.1919 4.29773C37.167 4.29773 37.8666 4.59917 38.302 5.19834C38.7375 5.7975 38.9533 6.66834 38.9533 7.80341V11.2049H37.4349H37.4386Z",
+              fill: "currentColor"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            "path",
+            {
+              d: "M46.5692 5.38819C47.2167 6.07295 47.5777 7.1187 47.5107 8.30587H41.8242C41.9284 8.83805 42.1741 9.26602 42.5611 9.59352C42.9481 9.92473 43.4022 10.0885 43.9157 10.0885C44.8052 10.0885 45.5234 9.59724 45.8844 8.78222L47.1795 9.40372C46.8818 9.99172 46.4352 10.4495 45.8509 10.7881C45.2629 11.1268 44.6191 11.2943 43.9157 11.2943C42.9295 11.2943 42.0178 10.9444 41.3516 10.3453C40.6855 9.7461 40.2649 8.83432 40.2649 7.79602C40.2649 6.75771 40.6892 5.84222 41.3516 5.23933C42.0178 4.64017 42.9295 4.29034 43.9157 4.29034C44.9801 4.29034 45.9216 4.69971 46.5692 5.38447V5.38819ZM42.5388 6.00224C42.1592 6.32974 41.921 6.75772 41.8205 7.29734H46.0221C45.9179 6.75772 45.6835 6.3223 45.3039 5.99852C44.9243 5.67847 44.4628 5.51473 43.9195 5.51473C43.3761 5.51473 42.9221 5.67847 42.5425 6.00597L42.5388 6.00224Z",
+              fill: "currentColor"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            "path",
+            {
+              d: "M59.7699 5.23933C60.1495 5.86827 60.3132 6.68329 60.3132 7.80347V11.2049H58.8023V7.80347C58.8023 6.35952 58.3371 5.59288 57.2318 5.59288C56.6438 5.59288 56.1861 5.79384 55.8586 6.19577C55.5311 6.60141 55.3673 7.13731 55.3673 7.80347V11.2049H53.8489V7.80347C53.8489 6.35952 53.3838 5.59288 52.2785 5.59288C51.6905 5.59288 51.2327 5.79384 50.9052 6.19577C50.574 6.60141 50.4102 7.13731 50.4102 7.80347V11.2049H48.8993V4.39827H50.3433L50.4102 5.47379C50.8196 4.65878 51.5825 4.29407 52.8106 4.29407C53.9606 4.29407 54.7161 4.78531 55.077 5.76407C55.5199 4.81508 56.4428 4.29407 57.7677 4.29407C58.7093 4.29407 59.3829 4.61412 59.7699 5.23562V5.23933Z",
+              fill: "currentColor"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            "path",
+            {
+              d: "M67.4264 5.47382L67.4934 4.3983H68.9373V11.205H67.4934L67.4264 10.1294C67.0282 10.9147 66.1797 11.3092 64.8809 11.3017C63.102 11.3427 61.591 9.79823 61.6283 7.8035C61.591 5.8162 63.102 4.2606 64.8809 4.29782C66.0643 4.29782 67.0096 4.7444 67.4264 5.47754V5.47382ZM66.8049 9.37398C67.2217 8.95717 67.4264 8.43243 67.4264 7.79605C67.4264 7.15967 67.2217 6.64238 66.8049 6.21813C66.3881 5.80132 65.8782 5.58919 65.2828 5.58919C64.6874 5.58919 64.1887 5.80132 63.7719 6.21813C63.355 6.64238 63.1504 7.16711 63.1504 7.79605C63.1504 8.42499 63.355 8.95717 63.7719 9.37398C64.1887 9.79823 64.6911 10.0104 65.2828 10.0104C65.8745 10.0104 66.3881 9.79823 66.8049 9.37398Z",
+              fill: "currentColor"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            "path",
+            {
+              d: "M71.3891 2.85757H72.8926V4.39828H74.6455V5.58172H72.8926V8.9683C72.8926 9.5898 73.1048 9.90985 73.5923 9.96568C73.89 10.0252 74.2398 10.0141 74.6455 9.9359V11.1863C74.1989 11.257 73.7858 11.2943 73.4062 11.2943C72.6731 11.2943 72.1595 11.1082 71.8543 10.7323C71.5454 10.3639 71.3891 9.79076 71.3891 9.02041V5.58172H70.4215V4.39828H71.3891V2.85757Z",
+              fill: "currentColor"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            "path",
+            {
+              d: "M76.1747 3.15526C75.9923 2.98035 75.903 2.76078 75.903 2.50772C75.903 2.25466 75.9923 2.04997 76.1747 1.86762C76.3496 1.69271 76.5691 1.60339 76.8222 1.60339C77.0753 1.60339 77.2874 1.69271 77.4623 1.86762C77.6372 2.04997 77.7265 2.2621 77.7265 2.50772C77.7265 2.75334 77.6372 2.97291 77.4623 3.15526C77.2874 3.33762 77.0678 3.42694 76.8222 3.42694C76.5766 3.42694 76.3496 3.33762 76.1747 3.15526ZM76.0593 4.39826H77.5777V11.2049H76.0593V4.39826Z",
+              fill: "currentColor"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            "path",
+            {
+              d: "M84.3023 8.9796L85.6681 9.55271C85.3778 10.0923 84.9498 10.5129 84.3879 10.8217C83.8259 11.1344 83.2044 11.2944 82.5197 11.2944C81.8349 11.2944 81.2506 11.1567 80.6998 10.8701C80.1491 10.5873 79.7025 10.1742 79.3713 9.6383C79.04 9.09868 78.8689 8.48835 78.8689 7.79987C78.8689 7.11138 79.0363 6.49361 79.3713 5.95771C79.7025 5.41809 80.1528 5.00873 80.6998 4.72589C81.2469 4.44305 81.8609 4.30164 82.5197 4.30164C83.1784 4.30164 83.8259 4.45794 84.3916 4.77427C84.9535 5.08688 85.3815 5.51113 85.6681 6.05075L84.3023 6.62015C83.9413 5.93539 83.2863 5.56323 82.5197 5.56323C81.9205 5.56323 81.4181 5.77536 81.0013 6.19961C80.5845 6.62387 80.3798 7.15977 80.3798 7.80731C80.3798 8.45486 80.5845 8.99076 81.0013 9.40757C81.4181 9.83182 81.9205 10.0439 82.5197 10.0439C83.2863 10.0439 83.9413 9.66807 84.3023 8.98703V8.9796Z",
+              fill: "currentColor"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            "path",
+            {
+              d: "M5.93091 10.8141L7.2758 9.41753L3.83719 5.84667C2.98568 4.9624 2.98568 3.52157 3.83719 2.63731C4.68871 1.75305 6.07617 1.75305 6.92769 2.63731L10.3663 6.20817L11.7112 4.81156L8.27258 1.24069C6.67975 -0.413401 4.08513 -0.413401 2.4923 1.24069C0.899472 2.89479 0.899472 5.58919 2.4923 7.24328L5.93091 10.8141Z",
+              fill: "currentColor"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            "path",
+            {
+              d: "M6.05827 3.54751C5.68761 3.1626 5.08404 3.1626 4.71338 3.54751C4.34272 3.93243 4.34272 4.55921 4.71338 4.94413L9.02103 9.41746L5.93054 12.6268L1.62288 8.15349C1.25223 7.76857 0.648653 7.76857 0.277994 8.15349C-0.0926647 8.5384 -0.0926647 9.16519 0.277994 9.5501L5.93054 15.4201L11.7108 9.41746L6.05827 3.54751Z",
+              fill: "currentColor"
+            }
+          )
+        ]
+      }
+    )
+  ] });
 };
 
 // src/components/layout/RenderLayout.tsx
-var import_react10 = require("react");
+var import_react11 = require("react");
 var import_jsx_runtime11 = require("react/jsx-runtime");
 var Disabled = () => {
   const theme = nt();
@@ -10878,14 +10881,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_react11.useState)(true);
+  (0, import_react11.useEffect)(() => {
     if (api && data.component?.id) {
       hydrate();
       setTimeout(() => setIsOpen(false), 2e3);
     }
   }, [api, data.component?.id, hydrate]);
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     if (!isPending && !isOpen) {
       setLayout("portal");
     }
@@ -10946,18 +10949,17 @@ var RenderLayout = ({ children }) => {
 };
 
 // src/components/layout/viewport/styles.ts
-var StyledViewport = dt.div`
-  display: flex;
+var StyledViewport = dt(Flex)`
   flex-wrap: wrap;
   place-content: start;
   margin-left: auto;
   margin-right: auto;
-  gap: 1rem;
+  gap: 2rem;
 `;
 
 // src/components/layout/viewport/Viewport.tsx
 var import_jsx_runtime12 = require("react/jsx-runtime");
-var Viewport = (0, import_react11.forwardRef)(
+var Viewport = (0, import_react12.forwardRef)(
   ({ children, ...props }, ref) => {
     const theme = nt();
     return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
@@ -10977,10 +10979,10 @@ var Viewport = (0, import_react11.forwardRef)(
 Viewport.displayName = "Viewport";
 
 // src/components/layout/column/Column.tsx
-var import_react13 = require("react");
+var import_react14 = require("react");
 
 // src/components/layout/card/Card.tsx
-var import_react12 = require("react");
+var import_react13 = require("react");
 
 // src/components/layout/card/styles.ts
 var Element = dt(Box)``;
@@ -11024,7 +11026,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_react13.forwardRef)(
   ({ children, className }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(StyledCard, { ref, className, children });
   }
@@ -11040,7 +11042,7 @@ var StyledColumn = dt.div`
 
 // src/components/layout/column/Column.tsx
 var import_jsx_runtime14 = require("react/jsx-runtime");
-var Column = (0, import_react13.forwardRef)(
+var Column = (0, import_react14.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 +11075,11 @@ function resolveDesignProps(props) {
     visibleFeatures: props.visibleFeatures
   };
 }
-var IncludedFeatures = (0, import_react14.forwardRef)(({ className, ...rest }, ref) => {
+var IncludedFeatures = (0, import_react15.forwardRef)(({ className, ...rest }, ref) => {
   const props = resolveDesignProps(rest);
   const theme = nt();
   const { data } = useEmbed();
-  const elements = (0, import_react14.useRef)([]);
+  const elements = (0, import_react15.useRef)([]);
   const shouldWrapChildren = useWrapChildren(elements.current);
   const isLightBackground = useIsLightBackground();
   const featureUsage = props.visibleFeatures ? props.visibleFeatures.reduce((acc, id) => {
@@ -11100,9 +11102,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 +11154,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 +11191,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_react16 = require("react");
 var import_jsx_runtime16 = require("react/jsx-runtime");
 function resolveDesignProps2(props) {
   return {
@@ -11243,18 +11245,18 @@ var InvoiceDate = ({ date, fontStyle, url }) => {
   }
   return dateText;
 };
-var Invoices = (0, import_react15.forwardRef)(({ className, data, ...rest }, ref) => {
+var Invoices = (0, import_react16.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_react16.useState)(() => formatInvoices(data));
+  const [listSize, setListSize] = (0, import_react16.useState)(props.limit.number);
   const toggleListSize = () => {
     setListSize(
       (prev2) => prev2 !== props.limit.number ? props.limit.number : 12
     );
   };
-  (0, import_react15.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     api?.listInvoices().then(({ data: data2 }) => {
       setInvoices(formatInvoices(data2));
     });
@@ -11320,7 +11322,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_react17 = require("react");
 var import_pluralize2 = __toESM(require_pluralize());
 
 // src/components/elements/metered-features/styles.ts
@@ -11367,9 +11369,9 @@ function resolveDesignProps3(props) {
     visibleFeatures: props.visibleFeatures
   };
 }
-var MeteredFeatures = (0, import_react16.forwardRef)(({ className, ...rest }, ref) => {
+var MeteredFeatures = (0, import_react17.forwardRef)(({ className, ...rest }, ref) => {
   const props = resolveDesignProps3(rest);
-  const elements = (0, import_react16.useRef)([]);
+  const elements = (0, import_react17.useRef)([]);
   const shouldWrapChildren = useWrapChildren(elements.current);
   const theme = nt();
   const { data } = useEmbed();
@@ -11491,7 +11493,7 @@ 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_react22 = require("react");
 var import_react_dom = require("react-dom");
 
 // node_modules/@stripe/stripe-js/dist/index.mjs
@@ -11526,7 +11528,7 @@ var registerWrapper = function registerWrapper2(stripe, startTime) {
   }
   stripe._registerWrapper({
     name: "stripe-js",
-    version: "4.6.0",
+    version: "5.1.0",
     startTime
   });
 };
@@ -11632,7 +11634,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_react19 = require("react");
 
 // src/components/shared/checkout-dialog/Navigation.tsx
 var import_jsx_runtime18 = require("react/jsx-runtime");
@@ -11645,49 +11647,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: {
+                sm: {
+                  $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: {
+                sm: {
+                  $fontSize: `${19 / TEXT_BASE_SIZE}rem`
+                }
+              },
               children: [
                 index + 1,
                 ". ",
@@ -11695,9 +11722,9 @@ var Navigation = ({
               ]
             }
           )
-        }
-      )
-    ] }),
+        ]
+      }
+    ),
     !isLast && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       Icon2,
       {
@@ -11712,11 +11739,12 @@ var Navigation = ({
 };
 
 // src/components/shared/checkout-dialog/Sidebar.tsx
-var import_react17 = require("react");
+var import_react18 = require("react");
 var import_jsx_runtime19 = require("react/jsx-runtime");
 var Sidebar = ({
   addOns,
   charges,
+  checkoutRef,
   checkoutStage,
   currentAddOns,
   currentPlan,
@@ -11725,10 +11753,8 @@ var Sidebar = ({
   paymentMethodId,
   planPeriod,
   selectedPlan,
-  selectPlan,
   setCheckoutStage,
   setError,
-  setPlanPeriod,
   setSetupIntent,
   showPaymentForm,
   toggleLoading
@@ -11736,20 +11762,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_react18.useMemo)(() => {
     if (!selectedPlan || !selectedPlan.monthlyPrice || !selectedPlan.yearlyPrice) {
       return;
     }
@@ -11757,7 +11770,7 @@ var Sidebar = ({
       (planPeriod === "month" ? selectedPlan.monthlyPrice : selectedPlan.yearlyPrice)?.price
     );
   }, [selectedPlan, planPeriod]);
-  const checkout = (0, import_react17.useCallback)(async () => {
+  const checkout = (0, import_react18.useCallback)(async () => {
     const priceId = (planPeriod === "month" ? selectedPlan?.monthlyPrice : selectedPlan?.yearlyPrice)?.id;
     if (!api || !selectedPlan || !priceId) {
       return;
@@ -11802,15 +11815,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 +11822,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 +11833,20 @@ var Sidebar = ({
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
     Flex,
     {
+      ref: checkoutRef,
+      tabIndex: 0,
       $flexDirection: "column",
-      $width: "21.5rem",
       $overflow: "auto",
       $backgroundColor: theme.card.background,
       $borderRadius: "0 0 0.5rem",
       $boxShadow: "0px 1px 20px 0px #1018280F, 0px 1px 3px 0px #1018281A;",
+      $viewport: {
+        sm: {
+          $width: "21.5rem"
+        }
+      },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
           Flex,
           {
             $position: "relative",
@@ -11847,28 +11857,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 +11875,7 @@ var Sidebar = ({
           {
             $flexDirection: "column",
             $position: "relative",
-            $gap: "0.5rem",
+            $gap: "0.125rem",
             $width: "100%",
             $padding: "1.5rem",
             $flex: "1",
@@ -11948,7 +11947,8 @@ var Sidebar = ({
                         {
                           name: "arrow-down",
                           style: {
-                            display: "inline-block"
+                            display: "inline-block",
+                            color: theme.typography.text.color
                           }
                         }
                       )
@@ -12210,7 +12210,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 +12376,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: {
+                    sm: {
+                      $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,
+                          {
+                            label: "Over usage limit",
+                            description: "Current usage exceeds the limit of this plan."
+                          }
+                        ) : "Choose plan"
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          },
+          plan.id
+        );
+      })
+    }
+  ) });
 };
 
 // src/components/shared/checkout-dialog/AddOns.tsx
@@ -12589,159 +12571,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 +12780,44 @@ 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 contentRef = (0, import_react19.useRef)(null);
+  const checkoutRef = (0, import_react19.useRef)(null);
+  const [checkoutStage, setCheckoutStage] = (0, import_react19.useState)("plan");
+  const [planPeriod, setPlanPeriod] = (0, import_react19.useState)(
     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_react19.useState)();
+  const [paymentMethodId, setPaymentMethodId] = (0, import_react19.useState)();
+  const [isLoading, setIsLoading] = (0, import_react19.useState)(false);
+  const [error, setError] = (0, import_react19.useState)();
+  const [showPaymentForm, setShowPaymentForm] = (0, import_react19.useState)(
     !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_react19.useState)(null);
+  const [setupIntent, setSetupIntent] = (0, import_react19.useState)();
+  const [top, setTop] = (0, import_react19.useState)(0);
+  const {
+    plans: availablePlans,
+    addOns: availableAddOns,
+    periods: availablePeriods
+  } = useAvailablePlans(planPeriod);
+  const checkoutStages = (0, import_react19.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 +12825,22 @@ var CheckoutDialog = ({
     return checkoutStages2;
   }, [availableAddOns]);
   const currentPlan = data.company?.plan;
-  const [selectedPlan, setSelectedPlan] = (0, import_react18.useState)(
+  const [selectedPlan, setSelectedPlan] = (0, import_react19.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_react19.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_react19.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 +12874,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_react19.useCallback)(
     (plan, newPeriod) => {
       setSelectedPlan(plan);
-      previewCheckout(plan, addOns, newPeriod || planPeriod);
+      previewCheckout(plan, addOns, newPeriod);
+    },
+    [addOns, previewCheckout]
+  );
+  const changePlanPeriod = (0, import_react19.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_react19.useCallback)(
     (id, newPeriod) => {
       const updatedAddOns = addOns.map((addOn) => ({
         ...addOn,
@@ -12936,12 +12914,12 @@ var CheckoutDialog = ({
     },
     [selectedPlan, addOns, planPeriod, previewCheckout]
   );
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (!stripe && setupIntent?.publishableKey) {
       setStripe(loadStripe(setupIntent.publishableKey));
     }
   }, [stripe, setupIntent?.publishableKey]);
-  (0, import_react18.useLayoutEffect)(() => {
+  (0, import_react19.useLayoutEffect)(() => {
     const parent = portal || document.body;
     const value = Math.abs(parent.getBoundingClientRect().top ?? 0);
     setTop(value);
@@ -12950,102 +12928,210 @@ 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,
+  (0, import_react19.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, { id: "select-plan-dialog", size: "lg", top, contentRef, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ModalHeader, { bordered: true, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+      Flex,
       {
-        name: stage.name,
-        index,
-        activeIndex: checkoutStages.findIndex(
-          (s2) => s2.id === checkoutStage
-        ),
-        isLast: index === stages.length - 1,
-        onClick: () => setCheckoutStage(stage.id)
-      },
-      stage.id
-    )) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(Flex, { $position: "relative", $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)
-              }
+        $flexWrap: "wrap",
+        $gap: "0.5rem",
+        $viewport: {
+          sm: {
+            $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
             ),
-            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,
-          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)
-        }
-      )
-    ] })
+            isLast: index === stages.length - 1,
+            onClick: () => setCheckoutStage(stage.id)
+          },
+          stage.id
+        ))
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+      Flex,
+      {
+        $position: "relative",
+        $flexDirection: "column",
+        $height: "auto",
+        $viewport: {
+          sm: {
+            $flexDirection: "row",
+            $height: "calc(100% - 5rem)"
+          }
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+            Flex,
+            {
+              $flexDirection: "column",
+              $flexGrow: "1",
+              $gap: "1.5rem",
+              $padding: "1.5rem",
+              $backgroundColor: isLightBackground ? "hsla(0, 0%, 0%, 0.025)" : "hsla(0, 0%, 100%, 0.025)",
+              $overflow: "auto",
+              $viewport: {
+                sm: {
+                  $gap: "1rem",
+                  $padding: "2rem 2.5rem 2rem 2.5rem"
+                }
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+                  Flex,
+                  {
+                    $flexDirection: "column",
+                    $gap: "1.5rem",
+                    $viewport: {
+                      sm: {
+                        $flexDirection: "row",
+                        $justifyContent: "space-between",
+                        $alignItems: "start",
+                        $gap: "1rem"
+                      }
+                    },
+                    children: [
+                      activeCheckoutStage && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+                        Flex,
+                        {
+                          $flexDirection: "column",
+                          $alignItems: "center",
+                          $gap: "0.25rem",
+                          $viewport: {
+                            sm: {
+                              $alignItems: "start",
+                              $gap: "1rem",
+                              $marginBottom: "1rem"
+                            }
+                          },
+                          children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                              Text,
+                              {
+                                as: "h3",
+                                $font: theme.typography.heading3.fontFamily,
+                                $size: theme.typography.heading3.fontSize,
+                                $weight: theme.typography.heading3.fontWeight,
+                                $color: theme.typography.heading3.color,
+                                $marginBottom: "0.5rem",
+                                children: activeCheckoutStage.label
+                              }
+                            ),
+                            activeCheckoutStage?.description && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                              Text,
+                              {
+                                as: "p",
+                                $font: theme.typography.text.fontFamily,
+                                $size: theme.typography.text.fontSize,
+                                $weight: theme.typography.text.fontWeight,
+                                $color: theme.typography.text.color,
+                                children: activeCheckoutStage.description
+                              }
+                            )
+                          ]
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                        PeriodToggle,
+                        {
+                          options: availablePeriods,
+                          selectedOption: planPeriod,
+                          selectedPlan,
+                          onChange: changePlanPeriod
+                        }
+                      )
+                    ]
+                  }
+                ),
+                checkoutStage === "plan" && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                  Plan,
+                  {
+                    isLoading,
+                    period: planPeriod,
+                    plans: availablePlans,
+                    currentPlan,
+                    selectedPlan,
+                    selectPlan
+                  }
+                ),
+                checkoutStage === "addons" && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                  AddOns,
+                  {
+                    isLoading,
+                    period: planPeriod,
+                    addOns,
+                    toggle: (id) => toggleAddOn(id)
+                  }
+                ),
+                checkoutStage === "checkout" && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                  Checkout,
+                  {
+                    setPaymentMethodId: (id) => setPaymentMethodId(id),
+                    togglePaymentForm: () => setShowPaymentForm((prev2) => !prev2),
+                    setupIntent,
+                    showPaymentForm,
+                    stripe
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+            Sidebar,
+            {
+              addOns,
+              charges,
+              checkoutRef,
+              checkoutStage,
+              currentAddOns,
+              currentPlan,
+              error,
+              isLoading,
+              paymentMethodId,
+              planPeriod,
+              selectedPlan,
+              setCheckoutStage: (stage) => setCheckoutStage(stage),
+              setError: (msg) => setError(msg),
+              setSetupIntent: (intent) => setSetupIntent(intent),
+              showPaymentForm,
+              toggleLoading: () => setIsLoading((prev2) => !prev2)
+            }
+          )
+        ]
+      }
+    )
   ] });
 };
 
 // src/components/shared/payment-form/PaymentForm.tsx
-var import_react19 = require("react");
+var import_react20 = 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_react20.useState)(null);
+  const [isLoading, setIsLoading] = (0, import_react20.useState)(false);
+  const [isConfirmed, setIsConfirmed] = (0, import_react20.useState)(false);
   const handleSubmit = async (event) => {
     event.preventDefault();
     if (!api || !stripe || !elements) {
@@ -13110,6 +13196,7 @@ var import_jsx_runtime26 = require("react/jsx-runtime");
 var PeriodToggle = ({
   options,
   selectedOption,
+  selectedPlan,
   onChange
 }) => {
   const theme = nt();
@@ -13117,32 +13204,43 @@ var PeriodToggle = ({
   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: {
+        sm: {
+          $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,
+            $padding: "0.75rem 1rem",
             ...option === selectedOption && {
               $backgroundColor: isLightBackground ? "hsl(0, 0%, 92.5%)" : "hsl(0, 0%, 7.5%)"
             },
             $borderRadius: "2.5rem",
+            $viewport: {
+              sm: {
+                $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,17 +13252,28 @@ var PeriodToggle = ({
           },
           option
         );
+        if (option === "year") {
+          return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+            Tooltip,
+            {
+              label: element,
+              description: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Savings, { plan: selectedPlan, period: selectedOption }),
+              $flexGrow: 1
+            }
+          );
+        }
+        return element;
       })
     }
   );
 };
 
 // src/components/shared/savings/Savings.tsx
-var import_react20 = require("react");
+var import_react21 = require("react");
 var import_jsx_runtime27 = require("react/jsx-runtime");
 var Savings = ({ plan, period }) => {
   const theme = nt();
-  const savingsPercentage = (0, import_react20.useMemo)(() => {
+  const savingsPercentage = (0, import_react21.useMemo)(() => {
     if (plan) {
       const monthly = (plan?.monthlyPrice?.price || 0) * 12;
       const yearly = plan?.yearlyPrice?.price || 0;
@@ -13179,6 +13288,7 @@ var Savings = ({ plan, period }) => {
       $size: 11,
       $weight: theme.typography.text.fontWeight,
       $color: theme.primary,
+      $leading: 1,
       children: period === "month" ? `Save up to ${savingsPercentage}% with yearly billing` : `You are saving ${savingsPercentage}% with yearly billing`
     }
   );
@@ -13257,20 +13367,20 @@ var PaymentMethodElement = ({
     )
   ] });
 };
-var PaymentMethod = (0, import_react21.forwardRef)(({ children, className, portal, allowEdit = true, ...rest }, ref) => {
+var PaymentMethod = (0, import_react22.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_react22.useState)(false);
+  const [error, setError] = (0, import_react22.useState)();
+  const [showPaymentForm, setShowPaymentForm] = (0, import_react22.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_react22.useState)(null);
+  const [setupIntent, setSetupIntent] = (0, import_react22.useState)();
+  const [top, setTop] = (0, import_react22.useState)(0);
   const isLightBackground = useIsLightBackground();
-  const paymentMethod = (0, import_react21.useMemo)(() => {
+  const paymentMethod = (0, import_react22.useMemo)(() => {
     const { paymentMethodType, cardLast4, cardExpMonth, cardExpYear } = data.subscription?.paymentMethod || {};
     let monthsToExpiration;
     if (typeof cardExpYear === "number" && typeof cardExpMonth === "number") {
@@ -13290,7 +13400,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_react22.useCallback)(async () => {
     if (!api || !data.component?.id) {
       return;
     }
@@ -13307,7 +13417,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_react22.useCallback)(
     async (id) => {
       if (!api || !id) {
         return;
@@ -13328,22 +13438,16 @@ var PaymentMethod = (0, import_react21.forwardRef)(({ children, className, porta
     },
     [api, setLayout]
   );
-  (0, import_react21.useEffect)(() => {
+  (0, import_react22.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_react22.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 = "";
     };
@@ -13462,7 +13566,7 @@ 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_react23 = require("react");
 var import_react_dom2 = require("react-dom");
 var import_jsx_runtime29 = require("react/jsx-runtime");
 var resolveDesignProps5 = (props) => {
@@ -13493,7 +13597,7 @@ var resolveDesignProps5 = (props) => {
     }
   };
 };
-var PlanManager = (0, import_react22.forwardRef)(({ children, className, portal, ...rest }, ref) => {
+var PlanManager = (0, import_react23.forwardRef)(({ children, className, portal, ...rest }, ref) => {
   const props = resolveDesignProps5(rest);
   const theme = nt();
   const { data, layout, setLayout } = useEmbed();
@@ -13545,20 +13649,31 @@ 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_runtime29.jsxs)(Box, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime29.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_runtime29.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
+                    ]
+                  }
+                )
+              ] })
             ]
           }
         ),
@@ -13633,7 +13748,7 @@ 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_react24 = require("react");
 var import_react_dom3 = require("react-dom");
 var import_pluralize4 = __toESM(require_pluralize());
 var import_jsx_runtime30 = require("react/jsx-runtime");
@@ -13666,31 +13781,30 @@ 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_react24.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_react24.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_react24.useState)();
+  const [selectedAddOnId, setSelectedAddOnId] = (0, import_react24.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)(
     FussyChild,
     {
@@ -13698,15 +13812,23 @@ var PricingTable = (0, import_react23.forwardRef)(({ children, className, portal
       className,
       as: Flex,
       $flexDirection: "column",
-      $gap: "3rem",
+      $gap: "2rem",
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Box, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
             Flex,
             {
-              $justifyContent: "space-between",
+              $flexDirection: "column",
+              $justifyContent: "center",
               $alignItems: "center",
-              $marginBottom: "2rem",
+              $gap: "1rem",
+              $marginBottom: "1rem",
+              $viewport: {
+                sm: {
+                  $flexDirection: "row",
+                  $justifyContent: "space-between"
+                }
+              },
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
                   Text,
@@ -13714,21 +13836,18 @@ var PricingTable = (0, import_react23.forwardRef)(({ children, className, portal
                     $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_runtime30.jsx)(
+                  PeriodToggle,
+                  {
+                    options: periods,
+                    selectedOption: selectedPeriod,
+                    onChange: (period) => setSelectedPeriod(period)
+                  }
+                )
               ]
             }
           ),
@@ -13816,7 +13935,7 @@ var PricingTable = (0, import_react23.forwardRef)(({ children, className, portal
                                 $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",
@@ -13836,7 +13955,7 @@ 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.showEntitlements && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Flex, { $flexDirection: "column", $gap: "1rem", $flexGrow: "1", children: [
                               props.plans.showInclusionText && index > 0 && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Box, { $marginBottom: "1.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
                                 Text,
                                 {
@@ -13959,14 +14078,14 @@ var PricingTable = (0, import_react23.forwardRef)(({ children, className, portal
             {
               $justifyContent: "space-between",
               $alignItems: "center",
-              $marginBottom: "2rem",
+              $marginBottom: "1rem",
               children: /* @__PURE__ */ (0, import_jsx_runtime30.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"
                 }
               )
@@ -14048,7 +14167,7 @@ var PricingTable = (0, import_react23.forwardRef)(({ children, className, portal
                             $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",
@@ -14070,7 +14189,7 @@ var PricingTable = (0, import_react23.forwardRef)(({ children, className, portal
                               {
                                 $flexDirection: "column",
                                 $position: "relative",
-                                $gap: "0.5rem",
+                                $gap: "1rem",
                                 $flexGrow: "1",
                                 children: addOn.entitlements.map((entitlement) => {
                                   return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
@@ -14160,7 +14279,7 @@ 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_react25 = require("react");
 var import_jsx_runtime31 = require("react/jsx-runtime");
 function resolveDesignProps7(props) {
   return {
@@ -14180,11 +14299,11 @@ function resolveDesignProps7(props) {
     }
   };
 }
-var UpcomingBill = (0, import_react24.forwardRef)(({ className, ...rest }, ref) => {
+var UpcomingBill = (0, import_react25.forwardRef)(({ className, ...rest }, ref) => {
   const props = resolveDesignProps7(rest);
   const theme = nt();
   const { data } = useEmbed();
-  const { upcomingInvoice } = (0, import_react24.useMemo)(() => {
+  const { upcomingInvoice } = (0, import_react25.useMemo)(() => {
     return {
       upcomingInvoice: {
         ...typeof data.upcomingInvoice?.amountDue === "number" && {
@@ -14237,7 +14356,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_runtime31.jsx)(Box, { $lineHeight: 1.15, $maxWidth: "10rem", $textAlign: "right", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
         Text,
         {
           $font: theme.typography[props.contractEndDate.fontStyle].fontFamily,
@@ -14254,10 +14373,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_react27 = require("react");
 
 // src/components/embed/renderer.ts
-var import_react25 = require("react");
+var import_react26 = require("react");
 var components = {
   Root,
   Viewport,
@@ -14289,7 +14408,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_react26.createElement)(
       component,
       {
         key: index,
@@ -14358,8 +14477,8 @@ 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_react27.useState)(/* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Loading, {}));
+  (0, import_react27.useEffect)(() => {
     const renderer = createRenderer();
     setChildren(nodes.map(renderer));
   }, [nodes]);
@@ -14367,7 +14486,7 @@ var ComponentTree = () => {
     console.error(error);
     return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Error2, { message: error.message });
   }
-  if (import_react26.Children.count(children) === 0) {
+  if (import_react27.Children.count(children) === 0) {
     return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Loading, {});
   }
   return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_jsx_runtime32.Fragment, { children });