strapi-plugin-magic-mail 1.0.1

package/dist/_chunks/LicensePage-Bl02myMx.mjs

@@ -0,0 +1,342 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { useFetchClient, useNotification } from "@strapi/strapi/admin";
+import styled from "styled-components";
+import { Flex, Typography, Box, Badge, Button } from "@strapi/design-system";
+import { Check, Cross, Sparkle, Lightning, Rocket } from "@strapi/icons";
+const Container = styled(Box)`
+  padding: 32px;
+  max-width: 1400px;
+  margin: 0 auto;
+`;
+const Header = styled(Box)`
+  text-align: center;
+  margin-bottom: 48px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+`;
+const Title = styled(Typography)`
+  font-size: 2.5rem;
+  font-weight: 700;
+  margin-bottom: 8px;
+  background: linear-gradient(135deg, #0EA5E9, #A855F7);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  display: block;
+`;
+const Subtitle = styled(Typography)`
+  font-size: 1.125rem;
+  color: #6B7280;
+  line-height: 1.6;
+  display: block;
+`;
+const TierGrid = styled(Flex)`
+  gap: 32px;
+  margin: 0 auto 48px;
+  max-width: 1080px;
+  justify-content: center;
+  flex-wrap: wrap;
+`;
+const TierWrapper = styled(Box)`
+  flex: 1;
+  min-width: 280px;
+  max-width: 340px;
+`;
+const TierCard = styled(Box)`
+  background: white;
+  border-radius: 16px;
+  padding: 32px;
+  border: 2px solid ${(props) => props.$featured ? "#0EA5E9" : "#E5E7EB"};
+  position: relative;
+  transition: all 0.3s ease;
+  box-shadow: ${(props) => props.$featured ? "0 20px 25px -5px rgba(14, 165, 233, 0.25), 0 8px 10px -6px rgba(14, 165, 233, 0.2)" : "0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.05)"};
+
+  &:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 20px 25px -5px rgba(15, 23, 42, 0.15), 0 8px 10px -6px rgba(15, 23, 42, 0.1);
+  }
+`;
+const PopularBadge = styled(Badge)`
+  position: absolute;
+  top: -12px;
+  right: 24px;
+  background: linear-gradient(135deg, #0EA5E9, #0284C7);
+  color: white;
+  padding: 4px 16px;
+  font-size: 12px;
+  font-weight: 600;
+`;
+const TierIcon = styled(Box)`
+  width: 48px;
+  height: 48px;
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 16px;
+  background: ${(props) => props.$color};
+  
+  svg {
+    width: 28px;
+    height: 28px;
+    color: white;
+  }
+`;
+const TierName = styled(Typography)`
+  font-size: 1.5rem;
+  font-weight: 700;
+  margin-bottom: 8px;
+`;
+const TierPrice = styled(Typography)`
+  font-size: 2rem;
+  font-weight: 800;
+  margin-bottom: 4px;
+`;
+const TierDescription = styled(Typography)`
+  color: #6B7280;
+  margin-bottom: 24px;
+`;
+const FeatureList = styled(Box)`
+  margin-bottom: 24px;
+`;
+const Feature = styled(Flex)`
+  gap: 12px;
+  margin-bottom: 12px;
+  align-items: flex-start;
+`;
+const FeatureIcon = styled(Box)`
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  margin-top: 2px;
+  
+  ${(props) => props.$included ? `
+    background: #DCFCE7;
+    svg { color: #16A34A; }
+  ` : `
+    background: #FEE2E2;
+    svg { color: #DC2626; }
+  `}
+`;
+const UpgradeButton = styled(Button)`
+  width: 100%;
+  height: 48px;
+  font-weight: 600;
+  font-size: 15px;
+  background: ${(props) => props.$gradient};
+  border: none;
+  color: white;
+  
+  &:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  }
+`;
+const CurrentPlanBadge = styled(Badge)`
+  width: 100%;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #F3F4F6;
+  color: #6B7280;
+  font-weight: 600;
+  font-size: 15px;
+`;
+const LicensePage = () => {
+  const { get, post } = useFetchClient();
+  const { toggleNotification } = useNotification();
+  const [currentTier, setCurrentTier] = useState("free");
+  const [limits, setLimits] = useState(null);
+  const [loading, setLoading] = useState(true);
+  useEffect(() => {
+    fetchLicenseInfo();
+  }, []);
+  const fetchLicenseInfo = async () => {
+    try {
+      const response = await get("/magic-mail/license/limits");
+      const licenseData = response.data || {};
+      let tier = "free";
+      if (licenseData.tier) {
+        tier = licenseData.tier;
+      }
+      setCurrentTier(tier);
+      setLimits(licenseData.limits);
+      setLoading(false);
+    } catch (error) {
+      console.error("Failed to fetch license info:", error);
+      setLoading(false);
+    }
+  };
+  const getTierRank = (tierId) => {
+    const ranks = {
+      "free": 0,
+      "premium": 1,
+      "advanced": 2,
+      "enterprise": 3
+    };
+    return ranks[tierId] || 0;
+  };
+  const getButtonText = (tierId) => {
+    const currentRank = getTierRank(currentTier);
+    const targetRank = getTierRank(tierId);
+    if (currentRank === targetRank) {
+      return "Current Plan";
+    } else if (targetRank > currentRank) {
+      return "Upgrade Now";
+    } else {
+      return "Downgrade";
+    }
+  };
+  const tiers = [
+    {
+      id: "free",
+      name: "FREE",
+      price: "$0",
+      period: "forever",
+      description: "Perfect for small projects and testing",
+      icon: /* @__PURE__ */ jsx(Sparkle, {}),
+      color: "linear-gradient(135deg, #6B7280, #4B5563)",
+      features: [
+        { name: "25 Email Templates", included: true },
+        { name: "3 Email Accounts", included: true },
+        { name: "5 Routing Rules", included: true },
+        { name: "All OAuth Providers", included: true },
+        { name: "Import/Export Templates", included: true },
+        { name: "Template Versioning", included: false },
+        { name: "Analytics Dashboard", included: false },
+        { name: "Priority Support", included: false }
+      ],
+      limits: {
+        templates: "25",
+        accounts: "3",
+        rules: "5"
+      }
+    },
+    {
+      id: "premium",
+      name: "PREMIUM",
+      price: "$14.50",
+      period: "/month",
+      description: "Enhanced features for growing teams",
+      icon: /* @__PURE__ */ jsx(Lightning, {}),
+      color: "linear-gradient(135deg, #8B5CF6, #7C3AED)",
+      featured: true,
+      features: [
+        { name: "100 Email Templates", included: true },
+        { name: "10 Email Accounts", included: true },
+        { name: "20 Routing Rules", included: true },
+        { name: "All OAuth Providers", included: true },
+        { name: "Import/Export Templates", included: true },
+        { name: "Template Versioning", included: true },
+        { name: "Basic Analytics", included: true },
+        { name: "Priority Support", included: true }
+      ],
+      limits: {
+        templates: "100",
+        accounts: "10",
+        rules: "20"
+      }
+    },
+    {
+      id: "advanced",
+      name: "ADVANCED",
+      price: "$39.50",
+      period: "/month",
+      description: "Maximum features for power users",
+      icon: /* @__PURE__ */ jsx(Rocket, {}),
+      color: "linear-gradient(135deg, #0EA5E9, #0284C7)",
+      features: [
+        { name: "500 Email Templates", included: true },
+        { name: "Unlimited Accounts", included: true },
+        { name: "Unlimited Routing Rules", included: true },
+        { name: "All OAuth Providers", included: true },
+        { name: "Import/Export Templates", included: true },
+        { name: "Template Versioning", included: true },
+        { name: "Advanced Analytics & Tracking", included: true },
+        { name: "SendGrid & Mailgun APIs", included: true }
+      ],
+      limits: {
+        templates: "500",
+        accounts: "Unlimited",
+        rules: "Unlimited"
+      }
+    }
+  ];
+  const handleUpgrade = (tierId) => {
+    window.open("https://store.magicdx.dev/", "_blank");
+  };
+  if (loading) {
+    return /* @__PURE__ */ jsx(Container, { children: /* @__PURE__ */ jsx(Flex, { justifyContent: "center", alignItems: "center", style: { minHeight: "400px" }, children: /* @__PURE__ */ jsx(Typography, { children: "Loading license information..." }) }) });
+  }
+  return /* @__PURE__ */ jsxs(Container, { children: [
+    /* @__PURE__ */ jsxs(Header, { children: [
+      /* @__PURE__ */ jsx(Title, { variant: "alpha", children: "Choose Your Plan" }),
+      /* @__PURE__ */ jsx(Subtitle, { variant: "omega", children: "Unlock powerful email management features for your Strapi application" })
+    ] }),
+    /* @__PURE__ */ jsx(TierGrid, { children: tiers.map((tier) => /* @__PURE__ */ jsx(TierWrapper, { children: /* @__PURE__ */ jsxs(TierCard, { $featured: tier.featured, children: [
+      tier.featured && /* @__PURE__ */ jsx(PopularBadge, { children: "MOST POPULAR" }),
+      /* @__PURE__ */ jsx(TierIcon, { $color: tier.color, children: tier.icon }),
+      /* @__PURE__ */ jsx(TierName, { variant: "beta", children: tier.name }),
+      /* @__PURE__ */ jsxs(Flex, { alignItems: "baseline", gap: 1, children: [
+        /* @__PURE__ */ jsx(TierPrice, { variant: "alpha", children: tier.price }),
+        /* @__PURE__ */ jsx(Typography, { variant: "omega", style: { color: "#6B7280" }, children: tier.period })
+      ] }),
+      /* @__PURE__ */ jsx(TierDescription, { variant: "omega", children: tier.description }),
+      /* @__PURE__ */ jsx(Box, { style: {
+        background: "#F9FAFB",
+        borderRadius: "8px",
+        padding: "12px",
+        marginBottom: "20px"
+      }, children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 2, children: [
+        /* @__PURE__ */ jsxs(Typography, { variant: "pi", style: { fontSize: "13px" }, children: [
+          /* @__PURE__ */ jsx("strong", { children: "Templates:" }),
+          " ",
+          tier.limits.templates
+        ] }),
+        /* @__PURE__ */ jsxs(Typography, { variant: "pi", style: { fontSize: "13px" }, children: [
+          /* @__PURE__ */ jsx("strong", { children: "Accounts:" }),
+          " ",
+          tier.limits.accounts
+        ] }),
+        /* @__PURE__ */ jsxs(Typography, { variant: "pi", style: { fontSize: "13px" }, children: [
+          /* @__PURE__ */ jsx("strong", { children: "Routing Rules:" }),
+          " ",
+          tier.limits.rules
+        ] })
+      ] }) }),
+      /* @__PURE__ */ jsx(FeatureList, { children: tier.features.map((feature, index) => /* @__PURE__ */ jsxs(Feature, { children: [
+        /* @__PURE__ */ jsx(FeatureIcon, { $included: feature.included, children: feature.included ? /* @__PURE__ */ jsx(Check, { style: { width: 14, height: 14 } }) : /* @__PURE__ */ jsx(Cross, { style: { width: 14, height: 14 } }) }),
+        /* @__PURE__ */ jsx(
+          Typography,
+          {
+            variant: "omega",
+            style: {
+              fontSize: "14px",
+              color: feature.included ? "#374151" : "#9CA3AF",
+              textDecoration: feature.included ? "none" : "line-through"
+            },
+            children: feature.name
+          }
+        )
+      ] }, index)) }),
+      currentTier === tier.id ? /* @__PURE__ */ jsx(CurrentPlanBadge, { children: "Current Plan" }) : /* @__PURE__ */ jsx(
+        UpgradeButton,
+        {
+          $gradient: tier.color,
+          onClick: () => handleUpgrade(tier.id),
+          children: getButtonText(tier.id)
+        }
+      )
+    ] }) }, tier.id)) })
+  ] });
+};
+export {
+  LicensePage as default
+};

package/dist/_chunks/LicensePage-CJXwPnEe.js

@@ -0,0 +1,344 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const admin = require("@strapi/strapi/admin");
+const styled = require("styled-components");
+const designSystem = require("@strapi/design-system");
+const icons = require("@strapi/icons");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const styled__default = /* @__PURE__ */ _interopDefault(styled);
+const Container = styled__default.default(designSystem.Box)`
+  padding: 32px;
+  max-width: 1400px;
+  margin: 0 auto;
+`;
+const Header = styled__default.default(designSystem.Box)`
+  text-align: center;
+  margin-bottom: 48px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+`;
+const Title = styled__default.default(designSystem.Typography)`
+  font-size: 2.5rem;
+  font-weight: 700;
+  margin-bottom: 8px;
+  background: linear-gradient(135deg, #0EA5E9, #A855F7);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  display: block;
+`;
+const Subtitle = styled__default.default(designSystem.Typography)`
+  font-size: 1.125rem;
+  color: #6B7280;
+  line-height: 1.6;
+  display: block;
+`;
+const TierGrid = styled__default.default(designSystem.Flex)`
+  gap: 32px;
+  margin: 0 auto 48px;
+  max-width: 1080px;
+  justify-content: center;
+  flex-wrap: wrap;
+`;
+const TierWrapper = styled__default.default(designSystem.Box)`
+  flex: 1;
+  min-width: 280px;
+  max-width: 340px;
+`;
+const TierCard = styled__default.default(designSystem.Box)`
+  background: white;
+  border-radius: 16px;
+  padding: 32px;
+  border: 2px solid ${(props) => props.$featured ? "#0EA5E9" : "#E5E7EB"};
+  position: relative;
+  transition: all 0.3s ease;
+  box-shadow: ${(props) => props.$featured ? "0 20px 25px -5px rgba(14, 165, 233, 0.25), 0 8px 10px -6px rgba(14, 165, 233, 0.2)" : "0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.05)"};
+
+  &:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 20px 25px -5px rgba(15, 23, 42, 0.15), 0 8px 10px -6px rgba(15, 23, 42, 0.1);
+  }
+`;
+const PopularBadge = styled__default.default(designSystem.Badge)`
+  position: absolute;
+  top: -12px;
+  right: 24px;
+  background: linear-gradient(135deg, #0EA5E9, #0284C7);
+  color: white;
+  padding: 4px 16px;
+  font-size: 12px;
+  font-weight: 600;
+`;
+const TierIcon = styled__default.default(designSystem.Box)`
+  width: 48px;
+  height: 48px;
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 16px;
+  background: ${(props) => props.$color};
+  
+  svg {
+    width: 28px;
+    height: 28px;
+    color: white;
+  }
+`;
+const TierName = styled__default.default(designSystem.Typography)`
+  font-size: 1.5rem;
+  font-weight: 700;
+  margin-bottom: 8px;
+`;
+const TierPrice = styled__default.default(designSystem.Typography)`
+  font-size: 2rem;
+  font-weight: 800;
+  margin-bottom: 4px;
+`;
+const TierDescription = styled__default.default(designSystem.Typography)`
+  color: #6B7280;
+  margin-bottom: 24px;
+`;
+const FeatureList = styled__default.default(designSystem.Box)`
+  margin-bottom: 24px;
+`;
+const Feature = styled__default.default(designSystem.Flex)`
+  gap: 12px;
+  margin-bottom: 12px;
+  align-items: flex-start;
+`;
+const FeatureIcon = styled__default.default(designSystem.Box)`
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  margin-top: 2px;
+  
+  ${(props) => props.$included ? `
+    background: #DCFCE7;
+    svg { color: #16A34A; }
+  ` : `
+    background: #FEE2E2;
+    svg { color: #DC2626; }
+  `}
+`;
+const UpgradeButton = styled__default.default(designSystem.Button)`
+  width: 100%;
+  height: 48px;
+  font-weight: 600;
+  font-size: 15px;
+  background: ${(props) => props.$gradient};
+  border: none;
+  color: white;
+  
+  &:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  }
+`;
+const CurrentPlanBadge = styled__default.default(designSystem.Badge)`
+  width: 100%;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #F3F4F6;
+  color: #6B7280;
+  font-weight: 600;
+  font-size: 15px;
+`;
+const LicensePage = () => {
+  const { get, post } = admin.useFetchClient();
+  const { toggleNotification } = admin.useNotification();
+  const [currentTier, setCurrentTier] = React.useState("free");
+  const [limits, setLimits] = React.useState(null);
+  const [loading, setLoading] = React.useState(true);
+  React.useEffect(() => {
+    fetchLicenseInfo();
+  }, []);
+  const fetchLicenseInfo = async () => {
+    try {
+      const response = await get("/magic-mail/license/limits");
+      const licenseData = response.data || {};
+      let tier = "free";
+      if (licenseData.tier) {
+        tier = licenseData.tier;
+      }
+      setCurrentTier(tier);
+      setLimits(licenseData.limits);
+      setLoading(false);
+    } catch (error) {
+      console.error("Failed to fetch license info:", error);
+      setLoading(false);
+    }
+  };
+  const getTierRank = (tierId) => {
+    const ranks = {
+      "free": 0,
+      "premium": 1,
+      "advanced": 2,
+      "enterprise": 3
+    };
+    return ranks[tierId] || 0;
+  };
+  const getButtonText = (tierId) => {
+    const currentRank = getTierRank(currentTier);
+    const targetRank = getTierRank(tierId);
+    if (currentRank === targetRank) {
+      return "Current Plan";
+    } else if (targetRank > currentRank) {
+      return "Upgrade Now";
+    } else {
+      return "Downgrade";
+    }
+  };
+  const tiers = [
+    {
+      id: "free",
+      name: "FREE",
+      price: "$0",
+      period: "forever",
+      description: "Perfect for small projects and testing",
+      icon: /* @__PURE__ */ jsxRuntime.jsx(icons.Sparkle, {}),
+      color: "linear-gradient(135deg, #6B7280, #4B5563)",
+      features: [
+        { name: "25 Email Templates", included: true },
+        { name: "3 Email Accounts", included: true },
+        { name: "5 Routing Rules", included: true },
+        { name: "All OAuth Providers", included: true },
+        { name: "Import/Export Templates", included: true },
+        { name: "Template Versioning", included: false },
+        { name: "Analytics Dashboard", included: false },
+        { name: "Priority Support", included: false }
+      ],
+      limits: {
+        templates: "25",
+        accounts: "3",
+        rules: "5"
+      }
+    },
+    {
+      id: "premium",
+      name: "PREMIUM",
+      price: "$14.50",
+      period: "/month",
+      description: "Enhanced features for growing teams",
+      icon: /* @__PURE__ */ jsxRuntime.jsx(icons.Lightning, {}),
+      color: "linear-gradient(135deg, #8B5CF6, #7C3AED)",
+      featured: true,
+      features: [
+        { name: "100 Email Templates", included: true },
+        { name: "10 Email Accounts", included: true },
+        { name: "20 Routing Rules", included: true },
+        { name: "All OAuth Providers", included: true },
+        { name: "Import/Export Templates", included: true },
+        { name: "Template Versioning", included: true },
+        { name: "Basic Analytics", included: true },
+        { name: "Priority Support", included: true }
+      ],
+      limits: {
+        templates: "100",
+        accounts: "10",
+        rules: "20"
+      }
+    },
+    {
+      id: "advanced",
+      name: "ADVANCED",
+      price: "$39.50",
+      period: "/month",
+      description: "Maximum features for power users",
+      icon: /* @__PURE__ */ jsxRuntime.jsx(icons.Rocket, {}),
+      color: "linear-gradient(135deg, #0EA5E9, #0284C7)",
+      features: [
+        { name: "500 Email Templates", included: true },
+        { name: "Unlimited Accounts", included: true },
+        { name: "Unlimited Routing Rules", included: true },
+        { name: "All OAuth Providers", included: true },
+        { name: "Import/Export Templates", included: true },
+        { name: "Template Versioning", included: true },
+        { name: "Advanced Analytics & Tracking", included: true },
+        { name: "SendGrid & Mailgun APIs", included: true }
+      ],
+      limits: {
+        templates: "500",
+        accounts: "Unlimited",
+        rules: "Unlimited"
+      }
+    }
+  ];
+  const handleUpgrade = (tierId) => {
+    window.open("https://store.magicdx.dev/", "_blank");
+  };
+  if (loading) {
+    return /* @__PURE__ */ jsxRuntime.jsx(Container, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", alignItems: "center", style: { minHeight: "400px" }, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { children: "Loading license information..." }) }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(Container, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(Header, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Title, { variant: "alpha", children: "Choose Your Plan" }),
+      /* @__PURE__ */ jsxRuntime.jsx(Subtitle, { variant: "omega", children: "Unlock powerful email management features for your Strapi application" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(TierGrid, { children: tiers.map((tier) => /* @__PURE__ */ jsxRuntime.jsx(TierWrapper, { children: /* @__PURE__ */ jsxRuntime.jsxs(TierCard, { $featured: tier.featured, children: [
+      tier.featured && /* @__PURE__ */ jsxRuntime.jsx(PopularBadge, { children: "MOST POPULAR" }),
+      /* @__PURE__ */ jsxRuntime.jsx(TierIcon, { $color: tier.color, children: tier.icon }),
+      /* @__PURE__ */ jsxRuntime.jsx(TierName, { variant: "beta", children: tier.name }),
+      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { alignItems: "baseline", gap: 1, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(TierPrice, { variant: "alpha", children: tier.price }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", style: { color: "#6B7280" }, children: tier.period })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(TierDescription, { variant: "omega", children: tier.description }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { style: {
+        background: "#F9FAFB",
+        borderRadius: "8px",
+        padding: "12px",
+        marginBottom: "20px"
+      }, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 2, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", style: { fontSize: "13px" }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Templates:" }),
+          " ",
+          tier.limits.templates
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", style: { fontSize: "13px" }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Accounts:" }),
+          " ",
+          tier.limits.accounts
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", style: { fontSize: "13px" }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Routing Rules:" }),
+          " ",
+          tier.limits.rules
+        ] })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(FeatureList, { children: tier.features.map((feature, index) => /* @__PURE__ */ jsxRuntime.jsxs(Feature, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(FeatureIcon, { $included: feature.included, children: feature.included ? /* @__PURE__ */ jsxRuntime.jsx(icons.Check, { style: { width: 14, height: 14 } }) : /* @__PURE__ */ jsxRuntime.jsx(icons.Cross, { style: { width: 14, height: 14 } }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          designSystem.Typography,
+          {
+            variant: "omega",
+            style: {
+              fontSize: "14px",
+              color: feature.included ? "#374151" : "#9CA3AF",
+              textDecoration: feature.included ? "none" : "line-through"
+            },
+            children: feature.name
+          }
+        )
+      ] }, index)) }),
+      currentTier === tier.id ? /* @__PURE__ */ jsxRuntime.jsx(CurrentPlanBadge, { children: "Current Plan" }) : /* @__PURE__ */ jsxRuntime.jsx(
+        UpgradeButton,
+        {
+          $gradient: tier.color,
+          onClick: () => handleUpgrade(tier.id),
+          children: getButtonText(tier.id)
+        }
+      )
+    ] }) }, tier.id)) })
+  ] });
+};
+exports.default = LicensePage;