@windrun-huaiin/third-ui 6.2.0 → 6.2.1

package/dist/main/server.mjs

@@ -67,121 +67,7 @@ function cn(...inputs) {
 
 // src/main/gallery.tsx
 import Image from "next/image";
-
-// src/main/gallery-interactive.tsx
-import { useState, useEffect } from "react";
-function GalleryInteractive({ data }) {
-  const [imageErrors, setImageErrors] = useState(/* @__PURE__ */ new Set());
-  const [downloadingItems, setDownloadingItems] = useState(/* @__PURE__ */ new Set());
-  const cdnProxyUrl = process.env.NEXT_PUBLIC_STYLE_CDN_PROXY_URL;
-  useEffect(() => {
-    data.items.forEach((item, index) => {
-      const downloadButton = document.querySelector(`[data-gallery-download="${item.id}"]`);
-      const imageElement = document.querySelector(`[data-gallery-image="${item.id}"]`);
-      if (downloadButton) {
-        const handleDownload = () => __async(null, null, function* () {
-          var _a;
-          if (downloadingItems.has(item.id)) {
-            return;
-          }
-          setDownloadingItems((prev) => new Set(prev).add(item.id));
-          try {
-            if (!cdnProxyUrl) {
-              throw new Error("CDN proxy URL not configured");
-            }
-            const originalUrl = new URL(item.url);
-            const filename = originalUrl.pathname.substring(1);
-            const proxyUrl = `${cdnProxyUrl}/${encodeURIComponent(filename)}`;
-            const urlExtension = (_a = item.url.split(".").pop()) == null ? void 0 : _a.toLowerCase();
-            let extension = ".webp";
-            if (urlExtension && ["jpg", "jpeg", "png", "gif", "webp", "svg"].includes(urlExtension)) {
-              extension = `.${urlExtension}`;
-            }
-            const response = yield fetch(proxyUrl);
-            if (!response.ok) {
-              throw new Error(`HTTP ${response.status}: ${response.statusText}`);
-            }
-            const blob = yield response.blob();
-            const blobUrl = URL.createObjectURL(blob);
-            const a = document.createElement("a");
-            a.href = blobUrl;
-            a.download = `${data.downloadPrefix}-${index + 1}${extension}`;
-            a.style.display = "none";
-            document.body.appendChild(a);
-            a.click();
-            setTimeout(() => {
-              document.body.removeChild(a);
-              URL.revokeObjectURL(blobUrl);
-            }, 100);
-          } catch (error) {
-            console.error("Download failed:", error);
-          } finally {
-            setDownloadingItems((prev) => {
-              const newSet = new Set(prev);
-              newSet.delete(item.id);
-              return newSet;
-            });
-          }
-        });
-        downloadButton.addEventListener("click", handleDownload);
-      }
-      if (imageElement) {
-        const handleImageError = () => {
-          setImageErrors((prev) => new Set(prev).add(item.id));
-          imageElement.src = data.defaultImgUrl;
-        };
-        imageElement.addEventListener("error", handleImageError);
-      }
-    });
-    const updateDownloadStates = () => {
-      data.items.forEach((item) => {
-        const downloadButton = document.querySelector(`[data-gallery-download="${item.id}"]`);
-        if (downloadButton) {
-          const isDownloading = downloadingItems.has(item.id);
-          if (isDownloading) {
-            downloadButton.disabled = true;
-            downloadButton.classList.add("bg-black/30", "text-white/50");
-            downloadButton.classList.remove("bg-black/50", "hover:bg-black/70", "text-white/80", "hover:text-white");
-            downloadButton.innerHTML = `
-              <svg class="h-5 w-5 text-white animate-spin" fill="none" viewBox="0 0 24 24">
-                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-              </svg>
-            `;
-          } else {
-            downloadButton.disabled = false;
-            downloadButton.classList.remove("bg-black/30", "text-white/50");
-            downloadButton.classList.add("bg-black/50", "hover:bg-black/70", "text-white/80", "hover:text-white");
-            downloadButton.innerHTML = `
-              <svg class="h-5 w-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
-              </svg>
-            `;
-          }
-        }
-      });
-    };
-    updateDownloadStates();
-    return () => {
-      data.items.forEach((item) => {
-        var _a, _b;
-        const downloadButton = document.querySelector(`[data-gallery-download="${item.id}"]`);
-        const imageElement = document.querySelector(`[data-gallery-image="${item.id}"]`);
-        if (downloadButton) {
-          const newButton = downloadButton.cloneNode(true);
-          (_a = downloadButton.parentNode) == null ? void 0 : _a.replaceChild(newButton, downloadButton);
-        }
-        if (imageElement) {
-          const newImage = imageElement.cloneNode(true);
-          (_b = imageElement.parentNode) == null ? void 0 : _b.replaceChild(newImage, imageElement);
-        }
-      });
-    };
-  }, [data, downloadingItems, imageErrors, cdnProxyUrl]);
-  return null;
-}
-
-// src/main/gallery.tsx
+import { GalleryInteractive } from "@third-ui/main";
 import { jsx, jsxs } from "react/jsx-runtime";
 function Gallery(_0) {
   return __async(this, arguments, function* ({ locale, sectionClassName, button }) {
@@ -2915,34 +2801,9 @@ function getGlobalIcon(iconKey, createElement3) {
   return Icon2;
 }
 
-// src/main/rich-text-expert.tsx
-import { jsx as jsx34 } from "react/jsx-runtime";
-var defaultTagRenderers = {
-  // text Stong
-  strong: (chunks) => /* @__PURE__ */ jsx34("strong", { children: chunks }),
-  // text Emphasis
-  em: (chunks) => /* @__PURE__ */ jsx34("em", { children: chunks }),
-  // text Underline
-  u: (chunks) => /* @__PURE__ */ jsx34("u", { children: chunks }),
-  // text Mark
-  mark: (chunks) => /* @__PURE__ */ jsx34("mark", { className: "bg-purple-300 dark:bg-purple-500 text-neutral-800 dark:text-neutral-300 px-1 rounded", children: chunks }),
-  // text Delete
-  del: (chunks) => /* @__PURE__ */ jsx34("del", { children: chunks }),
-  // text Subscript
-  sub: (chunks) => /* @__PURE__ */ jsx34("sub", { children: chunks }),
-  // text Superscript
-  sup: (chunks) => /* @__PURE__ */ jsx34("sup", { children: chunks })
-};
-function createRichTextRenderer(customRenderers) {
-  const renderers = __spreadValues(__spreadValues({}, defaultTagRenderers), customRenderers);
-  return function richText2(t, key) {
-    return t.rich(key, renderers);
-  };
-}
-var richText = createRichTextRenderer();
-
 // src/main/usage.tsx
-import { jsx as jsx35, jsxs as jsxs11 } from "react/jsx-runtime";
+import { richText } from "@third-ui/main/rich-text-expert";
+import { jsx as jsx34, jsxs as jsxs11 } from "react/jsx-runtime";
 function Usage(_0) {
   return __async(this, arguments, function* ({
     locale,
@@ -2966,16 +2827,16 @@ function Usage(_0) {
       /* @__PURE__ */ jsxs11("h2", { className: "text-3xl md:text-4xl font-bold text-center mb-4", children: [
         data.title,
         " ",
-        /* @__PURE__ */ jsx35("span", { className: "text-purple-500", children: data.eyesOn })
+        /* @__PURE__ */ jsx34("span", { className: "text-purple-500", children: data.eyesOn })
       ] }),
-      /* @__PURE__ */ jsx35("p", { className: "text-center text-gray-600 dark:text-gray-400 mb-12 text-base md:text-lg mx-auto whitespace-nowrap", children: data.description }),
-      /* @__PURE__ */ jsx35("div", { className: "bg-gray-50 dark:bg-gray-800/60 border border-gray-200 dark:border-gray-700 rounded-2xl p-8 md:p-12 shadow-sm dark:shadow-none", children: /* @__PURE__ */ jsx35("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-8 gap-y-12", children: data.steps.map((step) => {
+      /* @__PURE__ */ jsx34("p", { className: "text-center text-gray-600 dark:text-gray-400 mb-12 text-base md:text-lg mx-auto whitespace-nowrap", children: data.description }),
+      /* @__PURE__ */ jsx34("div", { className: "bg-gray-50 dark:bg-gray-800/60 border border-gray-200 dark:border-gray-700 rounded-2xl p-8 md:p-12 shadow-sm dark:shadow-none", children: /* @__PURE__ */ jsx34("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-8 gap-y-12", children: data.steps.map((step) => {
         const Icon2 = getGlobalIcon(step.iconKey);
         return /* @__PURE__ */ jsxs11("div", { "data-usage-step": step.id, className: "flex items-start", children: [
-          /* @__PURE__ */ jsx35("div", { className: "flex-shrink-0 mr-4", children: /* @__PURE__ */ jsx35(Icon2, { className: "w-8 h-8 text-purple-500" }) }),
+          /* @__PURE__ */ jsx34("div", { className: "flex-shrink-0 mr-4", children: /* @__PURE__ */ jsx34(Icon2, { className: "w-8 h-8 text-purple-500" }) }),
           /* @__PURE__ */ jsxs11("div", { children: [
-            /* @__PURE__ */ jsx35("h3", { className: "text-xl font-semibold mb-3 text-gray-900 dark:text-gray-100 flex items-center", children: `${step.stepNumber}. ${step.title}` }),
-            /* @__PURE__ */ jsx35("p", { className: "text-gray-700 dark:text-gray-300", children: step.description })
+            /* @__PURE__ */ jsx34("h3", { className: "text-xl font-semibold mb-3 text-gray-900 dark:text-gray-100 flex items-center", children: `${step.stepNumber}. ${step.title}` }),
+            /* @__PURE__ */ jsx34("p", { className: "text-gray-700 dark:text-gray-300", children: step.description })
           ] })
         ] }, step.id);
       }) }) })
@@ -2985,7 +2846,8 @@ function Usage(_0) {
 
 // src/main/features.tsx
 import { getTranslations as getTranslations3 } from "next-intl/server";
-import { jsx as jsx36, jsxs as jsxs12 } from "react/jsx-runtime";
+import { richText as richText2 } from "@third-ui/main/rich-text-expert";
+import { jsx as jsx35, jsxs as jsxs12 } from "react/jsx-runtime";
 function Features(_0) {
   return __async(this, arguments, function* ({
     locale,
@@ -2996,11 +2858,11 @@ function Features(_0) {
     const data = {
       title: t("title"),
       eyesOn: t("eyesOn"),
-      description: richText(t, "description"),
+      description: richText2(t, "description"),
       items: featureItems.map((feature, index) => ({
         id: `feature-item-${index}`,
         title: feature.title,
-        description: richText(t, `items.${index}.description`),
+        description: richText2(t, `items.${index}.description`),
         iconKey: feature.iconKey
       }))
     };
@@ -3008,10 +2870,10 @@ function Features(_0) {
       /* @__PURE__ */ jsxs12("h2", { className: "text-3xl md:text-4xl font-bold text-center mb-4", children: [
         data.title,
         " ",
-        /* @__PURE__ */ jsx36("span", { className: "text-purple-500", children: data.eyesOn })
+        /* @__PURE__ */ jsx35("span", { className: "text-purple-500", children: data.eyesOn })
       ] }),
-      /* @__PURE__ */ jsx36("p", { className: "text-center text-gray-600 dark:text-gray-400 mb-12 text-base md:text-lg mx-auto whitespace-nowrap", children: data.description }),
-      /* @__PURE__ */ jsx36("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-8 gap-y-12", children: data.items.map((feature) => {
+      /* @__PURE__ */ jsx35("p", { className: "text-center text-gray-600 dark:text-gray-400 mb-12 text-base md:text-lg mx-auto whitespace-nowrap", children: data.description }),
+      /* @__PURE__ */ jsx35("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-8 gap-y-12", children: data.items.map((feature) => {
         const Icon2 = getGlobalIcon(feature.iconKey);
         return /* @__PURE__ */ jsxs12(
           "div",
@@ -3019,9 +2881,9 @@ function Features(_0) {
             "data-feature-id": feature.id,
             className: "bg-white dark:bg-gray-800/60 p-8 rounded-xl border border-gray-200 dark:border-gray-700 hover:border-purple-300 dark:hover:border-purple-500/50 transition shadow-sm dark:shadow-none",
             children: [
-              /* @__PURE__ */ jsx36("div", { className: "text-4xl mb-4 flex items-center justify-start", children: /* @__PURE__ */ jsx36(Icon2, { className: "w-8 h-8" }) }),
-              /* @__PURE__ */ jsx36("h3", { className: "text-xl font-semibold mb-3 text-gray-900 dark:text-gray-100", children: feature.title }),
-              /* @__PURE__ */ jsx36("p", { className: "text-gray-700 dark:text-gray-300", children: feature.description })
+              /* @__PURE__ */ jsx35("div", { className: "text-4xl mb-4 flex items-center justify-start", children: /* @__PURE__ */ jsx35(Icon2, { className: "w-8 h-8" }) }),
+              /* @__PURE__ */ jsx35("h3", { className: "text-xl font-semibold mb-3 text-gray-900 dark:text-gray-100", children: feature.title }),
+              /* @__PURE__ */ jsx35("p", { className: "text-gray-700 dark:text-gray-300", children: feature.description })
             ]
           },
           feature.id
@@ -3033,7 +2895,8 @@ function Features(_0) {
 
 // src/main/tips.tsx
 import { getTranslations as getTranslations4 } from "next-intl/server";
-import { jsx as jsx37, jsxs as jsxs13 } from "react/jsx-runtime";
+import { richText as richText3 } from "@third-ui/main/rich-text-expert";
+import { jsx as jsx36, jsxs as jsxs13 } from "react/jsx-runtime";
 function Tips(_0) {
   return __async(this, arguments, function* ({
     locale,
@@ -3044,7 +2907,7 @@ function Tips(_0) {
     const processedSections = sections.map((section, index) => ({
       id: `tip-section-${index}`,
       title: section.title,
-      description: richText(t, `sections.${index}.description`)
+      description: richText3(t, `sections.${index}.description`)
     }));
     const midPoint = Math.ceil(processedSections.length / 2);
     const leftColumn = processedSections.slice(0, midPoint);
@@ -3059,11 +2922,11 @@ function Tips(_0) {
       /* @__PURE__ */ jsxs13("h2", { className: "text-3xl md:text-4xl font-bold text-center mb-16", children: [
         data.title,
         " ",
-        /* @__PURE__ */ jsx37("span", { className: "text-purple-500", children: data.eyesOn })
+        /* @__PURE__ */ jsx36("span", { className: "text-purple-500", children: data.eyesOn })
       ] }),
-      /* @__PURE__ */ jsx37("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-12 bg-gray-50 dark:bg-gray-800/60 border border-gray-200 dark:border-gray-700 rounded-2xl p-8 md:p-12 shadow-sm dark:shadow-none", children: [data.leftColumn, data.rightColumn].map((column, colIndex) => /* @__PURE__ */ jsx37("div", { className: "space-y-8", children: column.map((tip) => /* @__PURE__ */ jsxs13("div", { "data-tip-id": tip.id, className: "space-y-4", children: [
-        /* @__PURE__ */ jsx37("h3", { className: "text-2xl font-semibold", children: tip.title }),
-        /* @__PURE__ */ jsx37("p", { className: "", children: tip.description })
+      /* @__PURE__ */ jsx36("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-12 bg-gray-50 dark:bg-gray-800/60 border border-gray-200 dark:border-gray-700 rounded-2xl p-8 md:p-12 shadow-sm dark:shadow-none", children: [data.leftColumn, data.rightColumn].map((column, colIndex) => /* @__PURE__ */ jsx36("div", { className: "space-y-8", children: column.map((tip) => /* @__PURE__ */ jsxs13("div", { "data-tip-id": tip.id, className: "space-y-4", children: [
+        /* @__PURE__ */ jsx36("h3", { className: "text-2xl font-semibold", children: tip.title }),
+        /* @__PURE__ */ jsx36("p", { className: "", children: tip.description })
       ] }, tip.id)) }, colIndex)) })
     ] });
   });
@@ -3071,52 +2934,9 @@ function Tips(_0) {
 
 // src/main/faq.tsx
 import { getTranslations as getTranslations5 } from "next-intl/server";
-
-// src/main/faq-interactive.tsx
-import { useState as useState2, useEffect as useEffect2 } from "react";
-function FAQInteractive({ data }) {
-  const [openStates, setOpenStates] = useState2({});
-  useEffect2(() => {
-    data.items.forEach((item) => {
-      const toggleButton = document.querySelector(`[data-faq-toggle="${item.id}"]`);
-      const contentDiv = document.querySelector(`[data-faq-content="${item.id}"]`);
-      const iconSvg = document.querySelector(`[data-faq-icon="${item.id}"]`);
-      if (toggleButton && contentDiv && iconSvg) {
-        const handleClick = () => {
-          const isOpen = openStates[item.id] || false;
-          const newOpenState = !isOpen;
-          setOpenStates((prev) => __spreadProps(__spreadValues({}, prev), {
-            [item.id]: newOpenState
-          }));
-          if (newOpenState) {
-            contentDiv.classList.remove("hidden");
-            toggleButton.setAttribute("aria-expanded", "true");
-            iconSvg.style.transform = "rotate(90deg)";
-          } else {
-            contentDiv.classList.add("hidden");
-            toggleButton.setAttribute("aria-expanded", "false");
-            iconSvg.style.transform = "rotate(0deg)";
-          }
-        };
-        toggleButton.addEventListener("click", handleClick);
-      }
-    });
-    return () => {
-      data.items.forEach((item) => {
-        var _a;
-        const toggleButton = document.querySelector(`[data-faq-toggle="${item.id}"]`);
-        if (toggleButton) {
-          const newButton = toggleButton.cloneNode(true);
-          (_a = toggleButton.parentNode) == null ? void 0 : _a.replaceChild(newButton, toggleButton);
-        }
-      });
-    };
-  }, [data, openStates]);
-  return null;
-}
-
-// src/main/faq.tsx
-import { jsx as jsx38, jsxs as jsxs14 } from "react/jsx-runtime";
+import { richText as richText4 } from "@third-ui/main/rich-text-expert";
+import { FAQInteractive } from "@third-ui/main";
+import { jsx as jsx37, jsxs as jsxs14 } from "react/jsx-runtime";
 function FAQ(_0) {
   return __async(this, arguments, function* ({
     locale,
@@ -3126,17 +2946,17 @@ function FAQ(_0) {
     const rawItems = t.raw("items");
     const data = {
       title: t("title"),
-      description: richText(t, "description"),
+      description: richText4(t, "description"),
       items: rawItems.map((item, index) => ({
         id: `faq-item-${index}`,
         question: item.question,
-        answer: richText(t, `items.${index}.answer`)
+        answer: richText4(t, `items.${index}.answer`)
       }))
     };
     return /* @__PURE__ */ jsxs14("section", { id: "faq", className: cn("px-16 py-10 mx-16 md:mx-32 scroll-mt-20", sectionClassName), children: [
-      /* @__PURE__ */ jsx38("h2", { className: "text-3xl md:text-4xl font-bold text-center mb-4", children: data.title }),
-      /* @__PURE__ */ jsx38("p", { className: "text-center text-gray-600 dark:text-gray-400 mb-12 text-base md:text-lg mx-auto", children: data.description }),
-      /* @__PURE__ */ jsx38("div", { className: "space-y-6", children: data.items.map((item) => /* @__PURE__ */ jsxs14(
+      /* @__PURE__ */ jsx37("h2", { className: "text-3xl md:text-4xl font-bold text-center mb-4", children: data.title }),
+      /* @__PURE__ */ jsx37("p", { className: "text-center text-gray-600 dark:text-gray-400 mb-12 text-base md:text-lg mx-auto", children: data.description }),
+      /* @__PURE__ */ jsx37("div", { className: "space-y-6", children: data.items.map((item) => /* @__PURE__ */ jsxs14(
         "div",
         {
           "data-faq-id": item.id,
@@ -3149,8 +2969,8 @@ function FAQ(_0) {
                 "data-faq-toggle": item.id,
                 "aria-expanded": "false",
                 children: [
-                  /* @__PURE__ */ jsx38("span", { className: "text-lg font-semibold text-gray-900 dark:text-gray-100", children: item.question }),
-                  /* @__PURE__ */ jsx38(
+                  /* @__PURE__ */ jsx37("span", { className: "text-lg font-semibold text-gray-900 dark:text-gray-100", children: item.question }),
+                  /* @__PURE__ */ jsx37(
                     "svg",
                     {
                       className: "w-6 h-6 text-gray-400 ml-2 transition-transform duration-200",
@@ -3158,13 +2978,13 @@ function FAQ(_0) {
                       fill: "none",
                       stroke: "currentColor",
                       viewBox: "0 0 24 24",
-                      children: /* @__PURE__ */ jsx38("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" })
+                      children: /* @__PURE__ */ jsx37("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" })
                     }
                   )
                 ]
               }
             ),
-            /* @__PURE__ */ jsx38(
+            /* @__PURE__ */ jsx37(
               "div",
               {
                 className: "mt-4 text-gray-700 dark:text-gray-300 text-base hidden",
@@ -3176,14 +2996,15 @@ function FAQ(_0) {
         },
         item.id
       )) }),
-      /* @__PURE__ */ jsx38(FAQInteractive, { data })
+      /* @__PURE__ */ jsx37(FAQInteractive, { data })
     ] });
   });
 }
 
 // src/main/seo-content.tsx
 import { getTranslations as getTranslations6 } from "next-intl/server";
-import { jsx as jsx39, jsxs as jsxs15 } from "react/jsx-runtime";
+import { richText as richText5 } from "@third-ui/main/rich-text-expert";
+import { jsx as jsx38, jsxs as jsxs15 } from "react/jsx-runtime";
 function SeoContent(_0) {
   return __async(this, arguments, function* ({
     locale,
@@ -3195,30 +3016,30 @@ function SeoContent(_0) {
       title: t("title"),
       eyesOn: t("eyesOn"),
       description: t("description"),
-      intro: richText(t, "intro"),
+      intro: richText5(t, "intro"),
       sections: rawSections.map((section, index) => ({
         id: `seo-section-${index}`,
         title: section.title,
-        content: richText(t, `sections.${index}.content`)
+        content: richText5(t, `sections.${index}.content`)
       })),
-      conclusion: richText(t, "conclusion")
+      conclusion: richText5(t, "conclusion")
     };
     return /* @__PURE__ */ jsxs15("section", { id: "seo", className: cn("px-16 py-10 mx-16 md:mx-32 scroll-mt-20", sectionClassName), children: [
       /* @__PURE__ */ jsxs15("h2", { className: "text-3xl md:text-4xl font-bold text-center mb-8", children: [
         data.title,
         " ",
-        /* @__PURE__ */ jsx39("span", { className: "text-purple-500", children: data.eyesOn })
+        /* @__PURE__ */ jsx38("span", { className: "text-purple-500", children: data.eyesOn })
       ] }),
-      /* @__PURE__ */ jsx39("h3", { className: "text-center text-gray-600 dark:text-gray-400 mb-12 text-lg", children: data.description }),
+      /* @__PURE__ */ jsx38("h3", { className: "text-center text-gray-600 dark:text-gray-400 mb-12 text-lg", children: data.description }),
       /* @__PURE__ */ jsxs15("div", { className: "bg-gray-50 dark:bg-gray-800/60 border border-gray-200 dark:border-gray-700 rounded-2xl p-8 md:p-12 shadow-sm dark:shadow-none", children: [
         /* @__PURE__ */ jsxs15("div", { className: "space-y-10", children: [
-          /* @__PURE__ */ jsx39("p", { className: "text-gray-600 dark:text-gray-400 text-lg", children: data.intro }),
+          /* @__PURE__ */ jsx38("p", { className: "text-gray-600 dark:text-gray-400 text-lg", children: data.intro }),
           data.sections.map((section) => /* @__PURE__ */ jsxs15("div", { "data-seo-section": section.id, children: [
-            /* @__PURE__ */ jsx39("h2", { className: "text-xl font-semibold mb-3 text-gray-900 dark:text-gray-100 flex items-center", children: section.title }),
-            /* @__PURE__ */ jsx39("p", { className: "text-gray-700 dark:text-gray-300", children: section.content })
+            /* @__PURE__ */ jsx38("h2", { className: "text-xl font-semibold mb-3 text-gray-900 dark:text-gray-100 flex items-center", children: section.title }),
+            /* @__PURE__ */ jsx38("p", { className: "text-gray-700 dark:text-gray-300", children: section.content })
           ] }, section.id))
         ] }),
-        /* @__PURE__ */ jsx39("p", { className: "mt-10 text-gray-600 dark:text-gray-400 text-lg", children: data.conclusion })
+        /* @__PURE__ */ jsx38("p", { className: "mt-10 text-gray-600 dark:text-gray-400 text-lg", children: data.conclusion })
       ] })
     ] });
   });
@@ -3226,306 +3047,9 @@ function SeoContent(_0) {
 
 // src/main/cta.tsx
 import { getTranslations as getTranslations7 } from "next-intl/server";
-
-// ../base-ui/src/ui/button.tsx
-import * as React35 from "react";
-
-// ../../node_modules/.pnpm/@radix-ui+react-slot@1.2.3_@types+react@19.1.2_react@19.1.0/node_modules/@radix-ui/react-slot/dist/index.mjs
-import * as React34 from "react";
-
-// ../../node_modules/.pnpm/@radix-ui+react-compose-refs@1.1.2_@types+react@19.1.2_react@19.1.0/node_modules/@radix-ui/react-compose-refs/dist/index.mjs
-import * as React33 from "react";
-function setRef(ref, value) {
-  if (typeof ref === "function") {
-    return ref(value);
-  } else if (ref !== null && ref !== void 0) {
-    ref.current = value;
-  }
-}
-function composeRefs(...refs) {
-  return (node) => {
-    let hasCleanup = false;
-    const cleanups = refs.map((ref) => {
-      const cleanup = setRef(ref, node);
-      if (!hasCleanup && typeof cleanup == "function") {
-        hasCleanup = true;
-      }
-      return cleanup;
-    });
-    if (hasCleanup) {
-      return () => {
-        for (let i = 0; i < cleanups.length; i++) {
-          const cleanup = cleanups[i];
-          if (typeof cleanup == "function") {
-            cleanup();
-          } else {
-            setRef(refs[i], null);
-          }
-        }
-      };
-    }
-  };
-}
-
-// ../../node_modules/.pnpm/@radix-ui+react-slot@1.2.3_@types+react@19.1.2_react@19.1.0/node_modules/@radix-ui/react-slot/dist/index.mjs
-import { Fragment as Fragment2, jsx as jsx40 } from "react/jsx-runtime";
-// @__NO_SIDE_EFFECTS__
-function createSlot(ownerName) {
-  const SlotClone = /* @__PURE__ */ createSlotClone(ownerName);
-  const Slot2 = React34.forwardRef((props, forwardedRef) => {
-    const _a = props, { children } = _a, slotProps = __objRest(_a, ["children"]);
-    const childrenArray = React34.Children.toArray(children);
-    const slottable = childrenArray.find(isSlottable);
-    if (slottable) {
-      const newElement = slottable.props.children;
-      const newChildren = childrenArray.map((child) => {
-        if (child === slottable) {
-          if (React34.Children.count(newElement) > 1) return React34.Children.only(null);
-          return React34.isValidElement(newElement) ? newElement.props.children : null;
-        } else {
-          return child;
-        }
-      });
-      return /* @__PURE__ */ jsx40(SlotClone, __spreadProps(__spreadValues({}, slotProps), { ref: forwardedRef, children: React34.isValidElement(newElement) ? React34.cloneElement(newElement, void 0, newChildren) : null }));
-    }
-    return /* @__PURE__ */ jsx40(SlotClone, __spreadProps(__spreadValues({}, slotProps), { ref: forwardedRef, children }));
-  });
-  Slot2.displayName = `${ownerName}.Slot`;
-  return Slot2;
-}
-var Slot = /* @__PURE__ */ createSlot("Slot");
-// @__NO_SIDE_EFFECTS__
-function createSlotClone(ownerName) {
-  const SlotClone = React34.forwardRef((props, forwardedRef) => {
-    const _a = props, { children } = _a, slotProps = __objRest(_a, ["children"]);
-    if (React34.isValidElement(children)) {
-      const childrenRef = getElementRef(children);
-      const props2 = mergeProps(slotProps, children.props);
-      if (children.type !== React34.Fragment) {
-        props2.ref = forwardedRef ? composeRefs(forwardedRef, childrenRef) : childrenRef;
-      }
-      return React34.cloneElement(children, props2);
-    }
-    return React34.Children.count(children) > 1 ? React34.Children.only(null) : null;
-  });
-  SlotClone.displayName = `${ownerName}.SlotClone`;
-  return SlotClone;
-}
-var SLOTTABLE_IDENTIFIER = Symbol("radix.slottable");
-function isSlottable(child) {
-  return React34.isValidElement(child) && typeof child.type === "function" && "__radixId" in child.type && child.type.__radixId === SLOTTABLE_IDENTIFIER;
-}
-function mergeProps(slotProps, childProps) {
-  const overrideProps = __spreadValues({}, childProps);
-  for (const propName in childProps) {
-    const slotPropValue = slotProps[propName];
-    const childPropValue = childProps[propName];
-    const isHandler = /^on[A-Z]/.test(propName);
-    if (isHandler) {
-      if (slotPropValue && childPropValue) {
-        overrideProps[propName] = (...args) => {
-          const result = childPropValue(...args);
-          slotPropValue(...args);
-          return result;
-        };
-      } else if (slotPropValue) {
-        overrideProps[propName] = slotPropValue;
-      }
-    } else if (propName === "style") {
-      overrideProps[propName] = __spreadValues(__spreadValues({}, slotPropValue), childPropValue);
-    } else if (propName === "className") {
-      overrideProps[propName] = [slotPropValue, childPropValue].filter(Boolean).join(" ");
-    }
-  }
-  return __spreadValues(__spreadValues({}, slotProps), overrideProps);
-}
-function getElementRef(element) {
-  var _a, _b;
-  let getter = (_a = Object.getOwnPropertyDescriptor(element.props, "ref")) == null ? void 0 : _a.get;
-  let mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
-  if (mayWarn) {
-    return element.ref;
-  }
-  getter = (_b = Object.getOwnPropertyDescriptor(element, "ref")) == null ? void 0 : _b.get;
-  mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
-  if (mayWarn) {
-    return element.props.ref;
-  }
-  return element.props.ref || element.ref;
-}
-
-// ../base-ui/src/ui/button.tsx
-import { cva } from "class-variance-authority";
-import { jsx as jsx41, jsxs as jsxs16 } from "react/jsx-runtime";
-var buttonVariants = cva(
-  "inline-flex items-center gap-2 whitespace-nowrap rounded-md text-sm ring-offset-background transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
-        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
-        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 hover:underline"
-      },
-      size: {
-        default: "h-10 px-4 py-2",
-        sm: "h-9 rounded-md px-3",
-        lg: "h-11 rounded-md px-8",
-        icon: "h-10 w-10"
-      }
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default"
-    }
-  }
-);
-var Button = React35.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { className, variant, size, asChild = false, loading = false, children } = _b, props = __objRest(_b, ["className", "variant", "size", "asChild", "loading", "children"]);
-    const Comp = asChild ? Slot : "button";
-    if (asChild) {
-      return /* @__PURE__ */ jsx41(
-        Comp,
-        __spreadProps(__spreadValues({
-          className: cn(buttonVariants({ variant, size, className })),
-          ref,
-          disabled: loading || props.disabled
-        }, props), {
-          children
-        })
-      );
-    }
-    return /* @__PURE__ */ jsxs16(
-      Comp,
-      __spreadProps(__spreadValues({
-        className: cn(buttonVariants({ variant, size, className })),
-        ref,
-        disabled: loading || props.disabled
-      }, props), {
-        children: [
-          children,
-          loading && /* @__PURE__ */ jsx41(globalLucideIcons.Loader2, { className: "ml-2 h-4 w-4 animate-spin" })
-        ]
-      })
-    );
-  }
-);
-Button.displayName = "Button";
-
-// src/fuma/mdx/gradient-button.tsx
-import Link2 from "next/link";
-import React36, { useState as useState3 } from "react";
-import { Fragment as Fragment3, jsx as jsx42, jsxs as jsxs17 } from "react/jsx-runtime";
-function GradientButton({
-  title,
-  icon,
-  align = "left",
-  disabled = false,
-  className = "",
-  href,
-  openInNewTab = true,
-  onClick,
-  loadingText,
-  preventDoubleClick = true
-}) {
-  const [isLoading, setIsLoading] = useState3(false);
-  const actualLoadingText = loadingText || (title == null ? void 0 : title.toString().trim()) || "Loading...";
-  const getAlignmentClass = () => {
-    switch (align) {
-      case "center":
-        return "justify-center";
-      case "right":
-        return "justify-end";
-      default:
-        return "justify-start";
-    }
-  };
-  const handleClick = (e) => __async(null, null, function* () {
-    if (disabled || isLoading) {
-      e.preventDefault();
-      return;
-    }
-    if (onClick) {
-      e.preventDefault();
-      if (preventDoubleClick) {
-        setIsLoading(true);
-      }
-      try {
-        yield onClick();
-      } catch (error) {
-        console.error("GradientButton onClick error:", error);
-      } finally {
-        if (preventDoubleClick) {
-          setIsLoading(false);
-        }
-      }
-    }
-  });
-  const isDisabled = disabled || isLoading;
-  const displayTitle = isLoading ? actualLoadingText : title;
-  const displayIcon = isLoading ? /* @__PURE__ */ jsx42(globalLucideIcons.Loader2, { className: "h-4 w-4 text-white animate-spin" }) : icon ? React36.cloneElement(icon, {
-    className: "h-4 w-4 text-white"
-  }) : /* @__PURE__ */ jsx42(globalLucideIcons.ArrowRight, { className: "h-4 w-4 text-white" });
-  const buttonContent = onClick ? /* @__PURE__ */ jsxs17(Fragment3, { children: [
-    /* @__PURE__ */ jsx42("span", { children: displayIcon }),
-    /* @__PURE__ */ jsx42("span", { className: "ml-1", children: displayTitle })
-  ] }) : /* @__PURE__ */ jsxs17(Fragment3, { children: [
-    /* @__PURE__ */ jsx42("span", { children: displayTitle }),
-    /* @__PURE__ */ jsx42("span", { className: "ml-1", children: displayIcon })
-  ] });
-  const buttonClassName = `
-    bg-gradient-to-r 
-    from-purple-400 to-pink-500 
-    hover:from-purple-500 hover:to-pink-600
-    dark:from-purple-500 dark:to-pink-600 
-    dark:hover:from-purple-600 dark:hover:to-pink-700
-    text-white text-base font-bold shadow-lg hover:shadow-xl
-    transition-all duration-300
-    rounded-full
-    ${isDisabled ? "opacity-50 cursor-not-allowed" : ""}
-    ${className}
-  `;
-  return /* @__PURE__ */ jsx42("div", { className: `flex flex-col sm:flex-row gap-3 ${getAlignmentClass()}`, children: onClick ? (
-    // for click
-    /* @__PURE__ */ jsx42(
-      Button,
-      {
-        size: "lg",
-        className: buttonClassName,
-        onClick: handleClick,
-        disabled: isDisabled,
-        children: buttonContent
-      }
-    )
-  ) : (
-    // for Link
-    /* @__PURE__ */ jsx42(
-      Button,
-      {
-        asChild: true,
-        size: "lg",
-        className: buttonClassName,
-        disabled: isDisabled,
-        children: /* @__PURE__ */ jsx42(
-          Link2,
-          __spreadProps(__spreadValues({
-            href: href || "#",
-            className: "no-underline hover:no-underline"
-          }, openInNewTab ? { target: "_blank", rel: "noopener noreferrer" } : {}), {
-            onClick: isDisabled ? (e) => e.preventDefault() : void 0,
-            children: buttonContent
-          })
-        )
-      }
-    )
-  ) });
-}
-
-// src/main/cta.tsx
-import { jsx as jsx43, jsxs as jsxs18 } from "react/jsx-runtime";
+import { GradientButton } from "@third-ui/fuma/mdx/gradient-button";
+import { richText as richText6 } from "@third-ui/main/rich-text-expert";
+import { jsx as jsx39, jsxs as jsxs16 } from "react/jsx-runtime";
 function CTA(_0) {
   return __async(this, arguments, function* ({
     locale,
@@ -3535,24 +3059,24 @@ function CTA(_0) {
     const data = {
       title: t("title"),
       eyesOn: t("eyesOn"),
-      description1: richText(t, "description1"),
+      description1: richText6(t, "description1"),
       description2: t("description2"),
       button: t("button"),
       url: t("url")
     };
-    return /* @__PURE__ */ jsx43("section", { id: "cta", className: cn("px-16 py-20 mx-16 md:mx-32 scroll-mt-20", sectionClassName), children: /* @__PURE__ */ jsxs18("div", { className: "\n        bg-gradient-to-r from-[#f7f8fa] via-[#e0c3fc] to-[#b2fefa]\n        dark:bg-gradient-to-r dark:from-[#2d0b4e] dark:via-[#6a3fa0] dark:to-[#3a185a]\n        rounded-2xl p-12 text-center\n        bg-[length:200%_auto] animate-cta-gradient-wave\n        ", children: [
-      /* @__PURE__ */ jsxs18("h2", { className: "text-3xl md:text-4xl font-bold mb-6", children: [
+    return /* @__PURE__ */ jsx39("section", { id: "cta", className: cn("px-16 py-20 mx-16 md:mx-32 scroll-mt-20", sectionClassName), children: /* @__PURE__ */ jsxs16("div", { className: "\n        bg-gradient-to-r from-[#f7f8fa] via-[#e0c3fc] to-[#b2fefa]\n        dark:bg-gradient-to-r dark:from-[#2d0b4e] dark:via-[#6a3fa0] dark:to-[#3a185a]\n        rounded-2xl p-12 text-center\n        bg-[length:200%_auto] animate-cta-gradient-wave\n        ", children: [
+      /* @__PURE__ */ jsxs16("h2", { className: "text-3xl md:text-4xl font-bold mb-6", children: [
         data.title,
         " ",
-        /* @__PURE__ */ jsx43("span", { className: "text-purple-400", children: data.eyesOn }),
+        /* @__PURE__ */ jsx39("span", { className: "text-purple-400", children: data.eyesOn }),
         "?"
       ] }),
-      /* @__PURE__ */ jsxs18("p", { className: "text-2xl mx-auto mb-8", children: [
+      /* @__PURE__ */ jsxs16("p", { className: "text-2xl mx-auto mb-8", children: [
         data.description1,
-        /* @__PURE__ */ jsx43("br", {}),
-        /* @__PURE__ */ jsx43("span", { className: "text-purple-400", children: data.description2 })
+        /* @__PURE__ */ jsx39("br", {}),
+        /* @__PURE__ */ jsx39("span", { className: "text-purple-400", children: data.description2 })
       ] }),
-      /* @__PURE__ */ jsx43(
+      /* @__PURE__ */ jsx39(
         GradientButton,
         {
           title: data.button,
@@ -3566,8 +3090,8 @@ function CTA(_0) {
 
 // src/main/footer.tsx
 import { getTranslations as getTranslations8 } from "next-intl/server";
-import Link3 from "next/link";
-import { jsx as jsx44, jsxs as jsxs19 } from "react/jsx-runtime";
+import Link2 from "next/link";
+import { jsx as jsx40, jsxs as jsxs17 } from "react/jsx-runtime";
 function Footer(_0) {
   return __async(this, arguments, function* ({ locale }) {
     const tFooter = yield getTranslations8({ locale, namespace: "footer" });
@@ -3579,243 +3103,40 @@ function Footer(_0) {
       company: tFooter("company"),
       copyright: tFooter("copyright", { year: (/* @__PURE__ */ new Date()).getFullYear(), name: tFooter("company") })
     };
-    return /* @__PURE__ */ jsx44("div", { className: "mb-10 w-full mx-auto border-t-purple-700/80 border-t-1", children: /* @__PURE__ */ jsx44("footer", { children: /* @__PURE__ */ jsxs19("div", { className: "w-full flex flex-col items-center justify-center px-4 py-8 space-y-3", children: [
-      /* @__PURE__ */ jsxs19("div", { className: "flex items-center justify-center space-x-6 text-xs", children: [
-        /* @__PURE__ */ jsxs19(Link3, { href: `/${locale}/legal/terms`, className: "flex items-center space-x-1 hover:underline", children: [
-          /* @__PURE__ */ jsx44(globalLucideIcons.ReceiptText, { className: "h-3.5 w-3.5" }),
-          /* @__PURE__ */ jsx44("span", { children: data.terms })
+    return /* @__PURE__ */ jsx40("div", { className: "mb-10 w-full mx-auto border-t-purple-700/80 border-t-1", children: /* @__PURE__ */ jsx40("footer", { children: /* @__PURE__ */ jsxs17("div", { className: "w-full flex flex-col items-center justify-center px-4 py-8 space-y-3", children: [
+      /* @__PURE__ */ jsxs17("div", { className: "flex items-center justify-center space-x-6 text-xs", children: [
+        /* @__PURE__ */ jsxs17(Link2, { href: `/${locale}/legal/terms`, className: "flex items-center space-x-1 hover:underline", children: [
+          /* @__PURE__ */ jsx40(globalLucideIcons.ReceiptText, { className: "h-3.5 w-3.5" }),
+          /* @__PURE__ */ jsx40("span", { children: data.terms })
         ] }),
-        /* @__PURE__ */ jsxs19(Link3, { href: `/${locale}/legal/privacy`, className: "flex items-center space-x-1 hover:underline", children: [
-          /* @__PURE__ */ jsx44(globalLucideIcons.ShieldUser, { className: "h-3.5 w-3.5" }),
-          /* @__PURE__ */ jsx44("span", { children: data.privacy })
+        /* @__PURE__ */ jsxs17(Link2, { href: `/${locale}/legal/privacy`, className: "flex items-center space-x-1 hover:underline", children: [
+          /* @__PURE__ */ jsx40(globalLucideIcons.ShieldUser, { className: "h-3.5 w-3.5" }),
+          /* @__PURE__ */ jsx40("span", { children: data.privacy })
         ] }),
-        /* @__PURE__ */ jsxs19("div", { className: "relative group", children: [
-          /* @__PURE__ */ jsx44("div", { className: "absolute left-2/3 -translate-x-1/4 bottom-full mb-1 hidden group-hover:block bg-zinc-600 text-white text-xs rounded px-3 py-1 whitespace-nowrap z-10 shadow-lg", children: data.email }),
-          /* @__PURE__ */ jsxs19(
+        /* @__PURE__ */ jsxs17("div", { className: "relative group", children: [
+          /* @__PURE__ */ jsx40("div", { className: "absolute left-2/3 -translate-x-1/4 bottom-full mb-1 hidden group-hover:block bg-zinc-600 text-white text-xs rounded px-3 py-1 whitespace-nowrap z-10 shadow-lg", children: data.email }),
+          /* @__PURE__ */ jsxs17(
             "a",
             {
               href: `mailto:${data.email}`,
               className: "flex items-center space-x-1 underline cursor-pointer px-2",
               children: [
-                /* @__PURE__ */ jsx44(globalLucideIcons.Mail, { className: "h-3.5 w-3.5" }),
-                /* @__PURE__ */ jsx44("span", { children: data.contactUs })
+                /* @__PURE__ */ jsx40(globalLucideIcons.Mail, { className: "h-3.5 w-3.5" }),
+                /* @__PURE__ */ jsx40("span", { children: data.contactUs })
               ]
             }
           )
         ] })
       ] }),
-      /* @__PURE__ */ jsx44("div", { className: "text-xs text-center", children: /* @__PURE__ */ jsx44("span", { children: data.copyright }) })
+      /* @__PURE__ */ jsx40("div", { className: "text-xs text-center", children: /* @__PURE__ */ jsx40("span", { children: data.copyright }) })
     ] }) }) });
   });
 }
 
 // src/main/price-plan.tsx
 import { getTranslations as getTranslations9 } from "next-intl/server";
-
-// src/main/price-plan-interactive.tsx
-import { useState as useState4, useEffect as useEffect3 } from "react";
-import { useRouter } from "next/navigation";
-import { jsx as jsx45 } from "react/jsx-runtime";
-function PricePlanInteractive({ data }) {
-  const [billingKey, setBillingKey] = useState4(data.billingSwitch.defaultKey);
-  const [tooltip, setTooltip] = useState4({ show: false, content: "", x: 0, y: 0 });
-  const router = useRouter();
-  useEffect3(() => {
-    const monthlyButton = document.querySelector('[data-billing-button="monthly"]');
-    const yearlyButton = document.querySelector('[data-billing-button="yearly"]');
-    const handleBillingSwitch = (newBillingKey) => {
-      setBillingKey(newBillingKey);
-      updatePrices(newBillingKey);
-      updateDiscountInfo(newBillingKey);
-      updateButtonStyles(newBillingKey);
-    };
-    if (monthlyButton) {
-      monthlyButton.addEventListener("click", () => handleBillingSwitch("monthly"));
-    }
-    if (yearlyButton) {
-      yearlyButton.addEventListener("click", () => handleBillingSwitch("yearly"));
-    }
-    data.plans.forEach((plan) => {
-      var _a;
-      (_a = plan.features) == null ? void 0 : _a.forEach((feature, i) => {
-        if (feature == null ? void 0 : feature.tooltip) {
-          const tooltipTrigger = document.querySelector(`[data-tooltip-trigger="${plan.key}-${i}"]`);
-          if (tooltipTrigger) {
-            const handleMouseEnter = (e) => {
-              setTooltip({
-                show: true,
-                content: feature.tooltip,
-                x: e.clientX,
-                y: e.clientY
-              });
-            };
-            const handleMouseMove = (e) => {
-              setTooltip((prev) => __spreadProps(__spreadValues({}, prev), { x: e.clientX, y: e.clientY }));
-            };
-            const handleMouseLeave = () => {
-              setTooltip((prev) => __spreadProps(__spreadValues({}, prev), { show: false }));
-            };
-            tooltipTrigger.addEventListener("mouseenter", handleMouseEnter);
-            tooltipTrigger.addEventListener("mousemove", handleMouseMove);
-            tooltipTrigger.addEventListener("mouseleave", handleMouseLeave);
-          }
-        }
-      });
-    });
-    data.plans.forEach((plan) => {
-      var _a;
-      const planButton = document.querySelector(`[data-plan-button="${plan.key}"]`);
-      if (planButton && !((_a = plan.button) == null ? void 0 : _a.disabled)) {
-        planButton.addEventListener("click", () => {
-          router.push("/");
-        });
-      }
-    });
-    return () => {
-      var _a, _b;
-      if (monthlyButton) {
-        const newButton = monthlyButton.cloneNode(true);
-        (_a = monthlyButton.parentNode) == null ? void 0 : _a.replaceChild(newButton, monthlyButton);
-      }
-      if (yearlyButton) {
-        const newButton = yearlyButton.cloneNode(true);
-        (_b = yearlyButton.parentNode) == null ? void 0 : _b.replaceChild(newButton, yearlyButton);
-      }
-      data.plans.forEach((plan) => {
-        var _a2;
-        (_a2 = plan.features) == null ? void 0 : _a2.forEach((_feature, i) => {
-          var _a3;
-          const tooltipTrigger = document.querySelector(`[data-tooltip-trigger="${plan.key}-${i}"]`);
-          if (tooltipTrigger) {
-            const newTrigger = tooltipTrigger.cloneNode(true);
-            (_a3 = tooltipTrigger.parentNode) == null ? void 0 : _a3.replaceChild(newTrigger, tooltipTrigger);
-          }
-        });
-      });
-    };
-  }, [data, router]);
-  const updatePrices = (newBillingKey) => {
-    const currentBilling = data.pricePlanConfig.billingOptions.find((opt) => opt.key === newBillingKey) || data.pricePlanConfig.billingOptions[0];
-    const currentBillingDisplay = data.billingSwitch.options.find((opt) => opt.key === newBillingKey) || data.billingSwitch.options[0];
-    data.plans.forEach((plan) => {
-      const priceContainer = document.querySelector(`[data-price-container="${plan.key}"]`);
-      const priceValue = data.pricePlanConfig.prices[plan.key];
-      if (priceContainer) {
-        const priceValueElement = document.querySelector(`[data-price-value="${plan.key}"]`);
-        const priceUnitElement = document.querySelector(`[data-price-unit="${plan.key}"]`);
-        const priceOriginalElement = document.querySelector(`[data-price-original="${plan.key}"]`);
-        const priceDiscountElement = document.querySelector(`[data-price-discount="${plan.key}"]`);
-        const priceSubtitleElement = document.querySelector(`[data-price-subtitle="${plan.key}"]`);
-        if (typeof priceValue !== "number" || isNaN(priceValue)) {
-          if (priceValueElement) priceValueElement.textContent = String(priceValue);
-          if (priceSubtitleElement) priceSubtitleElement.textContent = plan.showBillingSubTitle === false ? "" : (currentBillingDisplay == null ? void 0 : currentBillingDisplay.subTitle) || "";
-        } else {
-          const originValue = Number(priceValue);
-          const discount = currentBilling.discount;
-          const hasDiscount = discount !== 0;
-          const saleValue = originValue * (1 - discount);
-          const formatPrice = (v) => Number(v.toFixed(2)).toString();
-          const showNaN = saleValue < 0;
-          if (priceValueElement) {
-            priceValueElement.textContent = `${data.currency}${showNaN ? "NaN" : hasDiscount ? formatPrice(saleValue) : formatPrice(originValue)}`;
-          }
-          if (priceUnitElement) {
-            priceUnitElement.textContent = currentBillingDisplay.unit || "";
-          }
-          if (hasDiscount) {
-            if (priceOriginalElement) {
-              priceOriginalElement.textContent = `${data.currency}${showNaN ? "NaN" : formatPrice(originValue)}`;
-              priceOriginalElement.style.display = "inline";
-            }
-            if (priceDiscountElement && currentBillingDisplay.discountText) {
-              const discountText = currentBillingDisplay.discountText.replace("{percent}", String(Math.round(Math.abs(discount) * 100)));
-              priceDiscountElement.textContent = discountText;
-              priceDiscountElement.style.display = "inline";
-            }
-          } else {
-            if (priceOriginalElement) priceOriginalElement.style.display = "none";
-            if (priceDiscountElement) priceDiscountElement.style.display = "none";
-          }
-          if (priceSubtitleElement) {
-            priceSubtitleElement.textContent = plan.showBillingSubTitle === false ? "" : (currentBillingDisplay == null ? void 0 : currentBillingDisplay.subTitle) || "";
-          }
-        }
-      }
-    });
-  };
-  const updateDiscountInfo = (newBillingKey) => {
-    const discountInfoElement = document.querySelector("[data-discount-info]");
-    if (discountInfoElement) {
-      const opt = data.billingSwitch.options.find((opt2) => opt2.key === newBillingKey);
-      const bOpt = data.pricePlanConfig.billingOptions.find((opt2) => opt2.key === newBillingKey);
-      if (opt && bOpt && opt.discountText && bOpt.discount !== 0) {
-        const discountText = opt.discountText.replace("{percent}", String(Math.round(Math.abs(bOpt.discount) * 100)));
-        discountInfoElement.innerHTML = `
-          <span class="px-2 py-1 text-xs rounded bg-yellow-100 text-yellow-800 font-semibold align-middle text-center inline-flex items-center justify-center whitespace-nowrap">
-            ${discountText}
-          </span>
-        `;
-      } else {
-        discountInfoElement.innerHTML = "";
-      }
-    }
-  };
-  const updateButtonStyles = (newBillingKey) => {
-    const monthlyButton = document.querySelector('[data-billing-button="monthly"]');
-    const yearlyButton = document.querySelector('[data-billing-button="yearly"]');
-    if (monthlyButton) {
-      if (newBillingKey === "monthly") {
-        monthlyButton.className = cn(
-          "min-w-[120px] px-6 py-2 font-medium transition text-lg relative",
-          "text-white bg-gradient-to-r from-purple-400 to-pink-500 hover:from-purple-500 hover:to-pink-600 dark:from-purple-500 dark:to-pink-600 dark:hover:from-purple-600 rounded-full shadow-sm"
-        );
-      } else {
-        monthlyButton.className = cn(
-          "min-w-[120px] px-6 py-2 font-medium transition text-lg relative",
-          "text-gray-800 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-100 rounded-full"
-        );
-      }
-    }
-    if (yearlyButton) {
-      if (newBillingKey === "yearly") {
-        yearlyButton.className = cn(
-          "min-w-[120px] px-6 py-2 font-medium transition text-lg relative",
-          "text-white bg-gradient-to-r from-purple-400 to-pink-500 hover:from-purple-500 hover:to-pink-600 dark:from-purple-500 dark:to-pink-600 dark:hover:from-purple-600 rounded-full shadow-sm"
-        );
-      } else {
-        yearlyButton.className = cn(
-          "min-w-[120px] px-6 py-2 font-medium transition text-lg relative",
-          "text-gray-800 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-100 rounded-full"
-        );
-      }
-    }
-  };
-  const Tooltip = ({ show, content, x, y }) => {
-    if (!show) return null;
-    const style = {
-      position: "fixed",
-      left: Math.max(8, x),
-      top: Math.max(8, y),
-      zIndex: 9999,
-      maxWidth: 200,
-      transform: "translateY(-50%)",
-      pointerEvents: "none",
-      whiteSpace: "pre-line"
-    };
-    return /* @__PURE__ */ jsx45(
-      "div",
-      {
-        style,
-        className: "bg-gray-700 dark:bg-gray-200 text-gray-100 dark:text-gray-800 text-xs leading-relaxed px-3 py-2 rounded-lg shadow-lg border border-gray-300 dark:border-gray-600 backdrop-blur-sm",
-        children: content
-      }
-    );
-  };
-  return /* @__PURE__ */ jsx45(Tooltip, __spreadValues({}, tooltip));
-}
-
-// src/main/price-plan.tsx
-import { Fragment as Fragment4, jsx as jsx46, jsxs as jsxs20 } from "react/jsx-runtime";
+import { PricePlanInteractive } from "@third-ui/main";
+import { Fragment, jsx as jsx41, jsxs as jsxs18 } from "react/jsx-runtime";
 function PricePlan(_0) {
   return __async(this, arguments, function* ({
     locale,
@@ -3857,9 +3178,9 @@ function PricePlan(_0) {
       const currentBillingDisplay = data.billingSwitch.options.find((opt) => opt.key === billingKey) || defaultBillingDisplay;
       const billingSubTitle = (currentBillingDisplay == null ? void 0 : currentBillingDisplay.subTitle) || "";
       if (typeof priceValue !== "number" || isNaN(priceValue)) {
-        return /* @__PURE__ */ jsxs20("div", { className: "flex flex-col items-start w-full", "data-price-container": plan.key, children: [
-          /* @__PURE__ */ jsx46("div", { className: "flex items-end gap-2", children: /* @__PURE__ */ jsx46("span", { className: "text-4xl font-extrabold text-gray-900 dark:text-gray-100", "data-price-value": plan.key, children: priceValue }) }),
-          /* @__PURE__ */ jsx46("div", { className: "flex items-center gap-2 min-h-[24px] mt-1", children: /* @__PURE__ */ jsx46("span", { className: cn("text-xs text-gray-700 dark:text-gray-300 font-medium", plan.showBillingSubTitle === false && "opacity-0 select-none"), "data-price-subtitle": plan.key, children: plan.showBillingSubTitle === false ? "" : billingSubTitle }) })
+        return /* @__PURE__ */ jsxs18("div", { className: "flex flex-col items-start w-full", "data-price-container": plan.key, children: [
+          /* @__PURE__ */ jsx41("div", { className: "flex items-end gap-2", children: /* @__PURE__ */ jsx41("span", { className: "text-4xl font-extrabold text-gray-900 dark:text-gray-100", "data-price-value": plan.key, children: priceValue }) }),
+          /* @__PURE__ */ jsx41("div", { className: "flex items-center gap-2 min-h-[24px] mt-1", children: /* @__PURE__ */ jsx41("span", { className: cn("text-xs text-gray-700 dark:text-gray-300 font-medium", plan.showBillingSubTitle === false && "opacity-0 select-none"), "data-price-subtitle": plan.key, children: plan.showBillingSubTitle === false ? "" : billingSubTitle }) })
         ] });
       }
       const originValue = Number(priceValue);
@@ -3873,32 +3194,32 @@ function PricePlan(_0) {
         discountText = currentBillingDisplay.discountText.replace("{percent}", String(Math.round(Math.abs(discount) * 100)));
       }
       const showNaN = saleValue < 0;
-      return /* @__PURE__ */ jsxs20("div", { className: "flex flex-col items-start w-full", "data-price-container": plan.key, children: [
-        /* @__PURE__ */ jsxs20("div", { className: "flex items-end gap-2", children: [
-          /* @__PURE__ */ jsxs20("span", { className: "text-4xl font-extrabold text-gray-900 dark:text-gray-100", "data-price-value": plan.key, children: [
+      return /* @__PURE__ */ jsxs18("div", { className: "flex flex-col items-start w-full", "data-price-container": plan.key, children: [
+        /* @__PURE__ */ jsxs18("div", { className: "flex items-end gap-2", children: [
+          /* @__PURE__ */ jsxs18("span", { className: "text-4xl font-extrabold text-gray-900 dark:text-gray-100", "data-price-value": plan.key, children: [
             data.currency,
             showNaN ? "NaN" : hasDiscount ? formatPrice(saleValue) : formatPrice(originValue)
           ] }),
-          /* @__PURE__ */ jsx46("span", { className: "text-lg text-gray-700 dark:text-gray-300 font-medium mb-1", "data-price-unit": plan.key, children: unit })
+          /* @__PURE__ */ jsx41("span", { className: "text-lg text-gray-700 dark:text-gray-300 font-medium mb-1", "data-price-unit": plan.key, children: unit })
         ] }),
-        /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-2 min-h-[24px] mt-1", children: [
-          hasDiscount && /* @__PURE__ */ jsxs20(Fragment4, { children: [
-            /* @__PURE__ */ jsxs20("span", { className: "text-base text-gray-400 line-through", "data-price-original": plan.key, children: [
+        /* @__PURE__ */ jsxs18("div", { className: "flex items-center gap-2 min-h-[24px] mt-1", children: [
+          hasDiscount && /* @__PURE__ */ jsxs18(Fragment, { children: [
+            /* @__PURE__ */ jsxs18("span", { className: "text-base text-gray-400 line-through", "data-price-original": plan.key, children: [
               data.currency,
               showNaN ? "NaN" : formatPrice(originValue)
             ] }),
-            discountText && /* @__PURE__ */ jsx46("span", { className: "px-2 py-0.5 text-xs rounded bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200 font-semibold align-middle", "data-price-discount": plan.key, children: discountText })
+            discountText && /* @__PURE__ */ jsx41("span", { className: "px-2 py-0.5 text-xs rounded bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200 font-semibold align-middle", "data-price-discount": plan.key, children: discountText })
           ] }),
-          /* @__PURE__ */ jsx46("span", { className: cn("text-xs text-gray-700 dark:text-gray-300 font-medium", plan.showBillingSubTitle === false && "opacity-0 select-none"), "data-price-subtitle": plan.key, children: plan.showBillingSubTitle === false ? "" : billingSubTitle })
+          /* @__PURE__ */ jsx41("span", { className: cn("text-xs text-gray-700 dark:text-gray-300 font-medium", plan.showBillingSubTitle === false && "opacity-0 select-none"), "data-price-subtitle": plan.key, children: plan.showBillingSubTitle === false ? "" : billingSubTitle })
         ] })
       ] });
     }
-    return /* @__PURE__ */ jsxs20("section", { id: "pricing", className: cn("px-4 py-10 md:px-16 md:py-16 mx-auto max-w-7xl scroll-mt-10", sectionClassName), children: [
-      /* @__PURE__ */ jsx46("h2", { className: "text-3xl md:text-4xl font-bold text-center mb-3", children: data.title }),
-      /* @__PURE__ */ jsx46("p", { className: "text-center text-gray-600 dark:text-gray-400 mb-8 text-base md:text-lg mx-auto", children: data.subtitle }),
-      /* @__PURE__ */ jsxs20("div", { className: "flex flex-col items-center", children: [
-        /* @__PURE__ */ jsx46("div", { className: "flex items-center relative mb-3", children: /* @__PURE__ */ jsxs20("div", { className: "flex bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded-full p-1", "data-billing-switch": true, children: [
-          /* @__PURE__ */ jsx46(
+    return /* @__PURE__ */ jsxs18("section", { id: "pricing", className: cn("px-4 py-10 md:px-16 md:py-16 mx-auto max-w-7xl scroll-mt-10", sectionClassName), children: [
+      /* @__PURE__ */ jsx41("h2", { className: "text-3xl md:text-4xl font-bold text-center mb-3", children: data.title }),
+      /* @__PURE__ */ jsx41("p", { className: "text-center text-gray-600 dark:text-gray-400 mb-8 text-base md:text-lg mx-auto", children: data.subtitle }),
+      /* @__PURE__ */ jsxs18("div", { className: "flex flex-col items-center", children: [
+        /* @__PURE__ */ jsx41("div", { className: "flex items-center relative mb-3", children: /* @__PURE__ */ jsxs18("div", { className: "flex bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded-full p-1", "data-billing-switch": true, children: [
+          /* @__PURE__ */ jsx41(
             "button",
             {
               className: cn(
@@ -3910,7 +3231,7 @@ function PricePlan(_0) {
               children: ((_a = data.billingSwitch.options.find((opt) => opt.key === "monthly")) == null ? void 0 : _a.name) || "Monthly"
             }
           ),
-          /* @__PURE__ */ jsx46(
+          /* @__PURE__ */ jsx41(
             "button",
             {
               className: cn(
@@ -3923,19 +3244,19 @@ function PricePlan(_0) {
             }
           )
         ] }) }),
-        /* @__PURE__ */ jsx46("div", { className: "h-8 flex items-center justify-center mb-3", "data-discount-info": true, children: (() => {
+        /* @__PURE__ */ jsx41("div", { className: "h-8 flex items-center justify-center mb-3", "data-discount-info": true, children: (() => {
           const opt = data.billingSwitch.options.find((opt2) => opt2.key === data.billingSwitch.defaultKey);
           const bOpt = billingOptions.find((opt2) => opt2.key === data.billingSwitch.defaultKey);
           if (!(opt && bOpt && opt.discountText && bOpt.discount !== 0)) return null;
-          return /* @__PURE__ */ jsx46("span", { className: "px-2 py-1 text-xs rounded bg-yellow-100 text-yellow-800 font-semibold align-middle text-center inline-flex items-center justify-center whitespace-nowrap", children: opt.discountText.replace(
+          return /* @__PURE__ */ jsx41("span", { className: "px-2 py-1 text-xs rounded bg-yellow-100 text-yellow-800 font-semibold align-middle text-center inline-flex items-center justify-center whitespace-nowrap", children: opt.discountText.replace(
             "{percent}",
             String(Math.round(Math.abs(bOpt.discount) * 100))
           ) });
         })() })
       ] }),
-      /* @__PURE__ */ jsx46("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-8", children: data.plans.map((plan, _idx) => {
+      /* @__PURE__ */ jsx41("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-8", children: data.plans.map((plan, _idx) => {
         var _a2, _b2, _c;
-        return /* @__PURE__ */ jsxs20(
+        return /* @__PURE__ */ jsxs18(
           "div",
           {
             "data-price-plan": plan.key,
@@ -3946,29 +3267,29 @@ function PricePlan(_0) {
             ),
             style: { minHeight: maxFeaturesCount * 100 },
             children: [
-              /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-2 mb-2", children: [
-                /* @__PURE__ */ jsx46("span", { className: "text-xl font-bold text-gray-900 dark:text-gray-100", children: plan.title }),
-                plan.titleTags && plan.titleTags.map((tag, i) => /* @__PURE__ */ jsx46("span", { className: "px-2 py-0.5 text-xs rounded bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200 font-semibold align-middle", children: tag }, i))
+              /* @__PURE__ */ jsxs18("div", { className: "flex items-center gap-2 mb-2", children: [
+                /* @__PURE__ */ jsx41("span", { className: "text-xl font-bold text-gray-900 dark:text-gray-100", children: plan.title }),
+                plan.titleTags && plan.titleTags.map((tag, i) => /* @__PURE__ */ jsx41("span", { className: "px-2 py-0.5 text-xs rounded bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200 font-semibold align-middle", children: tag }, i))
               ] }),
               renderPrice(plan),
-              /* @__PURE__ */ jsx46("ul", { className: "flex-1 mb-6 mt-4", children: getFeatureRows(plan).map((feature, i) => /* @__PURE__ */ jsxs20("li", { className: "flex items-center gap-2 mb-2 min-h-[28px]", "data-feature-item": `${plan.key}-${i}`, children: [
-                feature ? /* @__PURE__ */ jsx46("span", { className: "inline-flex items-center justify-center w-5 h-5 rounded-full bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-200 mr-1", children: feature.icon ? /* @__PURE__ */ jsx46("span", { children: feature.icon }) : /* @__PURE__ */ jsx46("span", { className: "font-bold", children: "\u2713" }) }) : /* @__PURE__ */ jsx46("span", { className: "inline-flex items-center justify-center w-5 h-5 rounded-full mr-1", children: "\xA0" }),
-                feature && feature.tag && /* @__PURE__ */ jsx46("span", { className: "px-1 py-0.5 text-[6px] rounded bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200 font-semibold align-middle", children: feature.tag }),
-                feature ? /* @__PURE__ */ jsxs20("span", { className: "relative group cursor-pointer text-sm text-gray-800 dark:text-gray-200", children: [
+              /* @__PURE__ */ jsx41("ul", { className: "flex-1 mb-6 mt-4", children: getFeatureRows(plan).map((feature, i) => /* @__PURE__ */ jsxs18("li", { className: "flex items-center gap-2 mb-2 min-h-[28px]", "data-feature-item": `${plan.key}-${i}`, children: [
+                feature ? /* @__PURE__ */ jsx41("span", { className: "inline-flex items-center justify-center w-5 h-5 rounded-full bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-200 mr-1", children: feature.icon ? /* @__PURE__ */ jsx41("span", { children: feature.icon }) : /* @__PURE__ */ jsx41("span", { className: "font-bold", children: "\u2713" }) }) : /* @__PURE__ */ jsx41("span", { className: "inline-flex items-center justify-center w-5 h-5 rounded-full mr-1", children: "\xA0" }),
+                feature && feature.tag && /* @__PURE__ */ jsx41("span", { className: "px-1 py-0.5 text-[6px] rounded bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200 font-semibold align-middle", children: feature.tag }),
+                feature ? /* @__PURE__ */ jsxs18("span", { className: "relative group cursor-pointer text-sm text-gray-800 dark:text-gray-200", children: [
                   feature.description,
-                  feature.tooltip && /* @__PURE__ */ jsx46(
+                  feature.tooltip && /* @__PURE__ */ jsx41(
                     "span",
                     {
                       className: "ml-1 align-middle inline-flex",
                       "data-tooltip-trigger": `${plan.key}-${i}`,
                       "data-tooltip-content": feature.tooltip,
-                      children: /* @__PURE__ */ jsx46("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx46("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) })
+                      children: /* @__PURE__ */ jsx41("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx41("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) })
                     }
                   )
-                ] }) : /* @__PURE__ */ jsx46("span", { children: "\xA0" })
+                ] }) : /* @__PURE__ */ jsx41("span", { children: "\xA0" })
               ] }, i)) }),
-              /* @__PURE__ */ jsx46("div", { className: "flex-1" }),
-              /* @__PURE__ */ jsx46(
+              /* @__PURE__ */ jsx41("div", { className: "flex-1" }),
+              /* @__PURE__ */ jsx41(
                 "button",
                 {
                   className: cn(
@@ -3986,7 +3307,7 @@ function PricePlan(_0) {
           plan.key
         );
       }) }),
-      /* @__PURE__ */ jsx46(PricePlanInteractive, { data })
+      /* @__PURE__ */ jsx41(PricePlanInteractive, { data })
     ] });
   });
 }