strapi-plugin-magic-mail 2.3.11 → 2.5.0

package/dist/_chunks/{App-BMaJu77a.js → App-BTKgUbIs.js}

@@ -8,6 +8,7 @@ const outline = require("@heroicons/react/24/outline");
 const admin = require("@strapi/strapi/admin");
 const styled = require("styled-components");
 const icons = require("@strapi/icons");
+const StyledButtons = require("./StyledButtons-M7vUd2N4.js");
 const ReactEmailEditor = require("react-email-editor");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 function _interopNamespace(e) {
@@ -64,18 +65,23 @@ const theme$3 = {
     primary: {
       50: "#F0F9FF",
       100: "#E0F2FE",
+      200: "#BAE6FD",
       500: "#0EA5E9",
-      600: "#0284C7"
+      600: "#0284C7",
+      700: "#0369A1"
     },
     secondary: {
       50: "#FAF5FF",
       100: "#F3E8FF",
+      500: "#A855F7",
       600: "#9333EA"
     },
     success: {
+      50: "#F0FDF4",
       100: "#DCFCE7",
       500: "#22C55E",
-      600: "#16A34A"
+      600: "#16A34A",
+      700: "#15803D"
     },
     warning: {
       100: "#FEF3C7",
@@ -1826,18 +1832,17 @@ const AddAccountModal = ({ isOpen, onClose, onAccountAdded, editAccount = null }
     ] }) }),
     /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", style: { width: "100%" }, children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { children: currentStep > 1 && /* @__PURE__ */ jsxRuntime.jsx(
-        designSystem.Button,
+        StyledButtons.TertiaryButton,
         {
-          variant: "tertiary",
           startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.ArrowLeft, {}),
           onClick: () => setCurrentStep(currentStep - 1),
           children: "Back"
         }
       ) }),
       /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { onClick: onClose, variant: "tertiary", children: "Cancel" }),
+        /* @__PURE__ */ jsxRuntime.jsx(StyledButtons.TertiaryButton, { onClick: onClose, children: "Cancel" }),
         currentStep < 4 ? /* @__PURE__ */ jsxRuntime.jsx(
-          designSystem.Button,
+          StyledButtons.GradientButton,
           {
             endIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.ArrowRight, {}),
             onClick: () => setCurrentStep(currentStep + 1),
@@ -1845,7 +1850,7 @@ const AddAccountModal = ({ isOpen, onClose, onAccountAdded, editAccount = null }
             children: "Continue"
           }
         ) : /* @__PURE__ */ jsxRuntime.jsx(
-          designSystem.Button,
+          StyledButtons.GradientButton,
           {
             onClick: handleSubmit,
             loading,
@@ -2210,6 +2215,137 @@ const StyledSearchInput$2 = styled__default.default.input`
     color: ${(props) => props.theme.colors.neutral500};
   }
 `;
+const StyledModalContent$1 = styled__default.default(designSystem.Modal.Content)`
+  && {
+    border-radius: 16px;
+    overflow: hidden;
+    max-width: 560px;
+    width: 90vw;
+  }
+`;
+const StyledModalHeader$1 = styled__default.default(designSystem.Modal.Header)`
+  && {
+    background: linear-gradient(135deg, ${theme$3.colors.primary[500]} 0%, ${theme$3.colors.secondary[500]} 100%);
+    padding: 24px 28px;
+    border-bottom: none;
+    
+    h2 {
+      color: white;
+      font-size: 1.25rem;
+      font-weight: 700;
+    }
+    
+    button {
+      color: white !important;
+      opacity: 0.9;
+      background: rgba(255, 255, 255, 0.15) !important;
+      border-radius: 8px;
+      
+      &:hover {
+        opacity: 1;
+        background: rgba(255, 255, 255, 0.25) !important;
+      }
+      
+      svg {
+        fill: white !important;
+        color: white !important;
+        path { fill: white !important; }
+      }
+    }
+  }
+`;
+const StyledModalBody$1 = styled__default.default(designSystem.Modal.Body)`
+  && {
+    padding: 24px 28px;
+    background: ${(props) => props.theme.colors.neutral0};
+    width: 100%;
+    box-sizing: border-box;
+  }
+`;
+const StyledModalFooter$1 = styled__default.default(designSystem.Modal.Footer)`
+  && {
+    padding: 20px 28px;
+    border-top: 1px solid ${(props) => props.theme.colors.neutral200};
+    background: ${(props) => props.theme.colors.neutral100};
+  }
+`;
+const AccountInfoCard = styled__default.default(designSystem.Box)`
+  background: linear-gradient(135deg, ${theme$3.colors.primary[50]} 0%, ${theme$3.colors.secondary[50]} 100%);
+  border: 1px solid ${theme$3.colors.primary[200]};
+  border-radius: 12px;
+  padding: 16px 20px;
+  text-align: center;
+  width: 100%;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
+`;
+const TestOptionCard = styled__default.default(designSystem.Box)`
+  padding: 16px 20px;
+  border: 2px solid ${(props) => props.$selected ? theme$3.colors.primary[500] : props.theme.colors.neutral200};
+  border-radius: 12px;
+  cursor: pointer;
+  transition: all ${theme$3.transitions.fast};
+  background: ${(props) => props.$selected ? theme$3.colors.primary[50] : props.theme.colors.neutral0};
+  
+  &:hover {
+    border-color: ${theme$3.colors.primary[400]};
+    background: ${theme$3.colors.primary[50]};
+  }
+`;
+const ModalFieldLabel = styled__default.default(designSystem.Typography)`
+  font-size: 13px;
+  font-weight: 600;
+  color: ${(props) => props.theme.colors.neutral700};
+  margin-bottom: 8px;
+  display: block;
+`;
+const ModalHint$1 = styled__default.default(designSystem.Typography)`
+  font-size: 12px;
+  color: ${(props) => props.theme.colors.neutral500};
+  margin-top: 6px;
+`;
+const StyledModalSelect = styled__default.default.select`
+  width: 100%;
+  padding: 12px 14px;
+  border: 1px solid ${(props) => props.theme.colors.neutral200};
+  border-radius: 8px;
+  font-size: 14px;
+  background: ${(props) => props.theme.colors.neutral0};
+  color: ${(props) => props.theme.colors.neutral800};
+  cursor: pointer;
+  transition: all ${theme$3.transitions.fast};
+  box-sizing: border-box;
+  
+  &:focus {
+    outline: none;
+    border-color: ${theme$3.colors.primary[500]};
+    box-shadow: 0 0 0 3px ${theme$3.colors.primary[100]};
+  }
+`;
+const StyledModalInput = styled__default.default.input`
+  width: 100%;
+  padding: 12px 14px;
+  border: 1px solid ${(props) => props.theme.colors.neutral200};
+  border-radius: 8px;
+  font-size: 14px;
+  background: ${(props) => props.theme.colors.neutral0};
+  color: ${(props) => props.theme.colors.neutral800};
+  transition: all ${theme$3.transitions.fast};
+  box-sizing: border-box;
+  
+  &:focus {
+    outline: none;
+    border-color: ${theme$3.colors.primary[500]};
+    box-shadow: 0 0 0 3px ${theme$3.colors.primary[100]};
+  }
+  
+  &::placeholder {
+    color: ${(props) => props.theme.colors.neutral400};
+  }
+`;
 const HomePage = () => {
   useAuthRefresh();
   const { get, post, del } = admin.useFetchClient();
@@ -2367,11 +2503,10 @@ const HomePage = () => {
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
-          designSystem.Button,
+          StyledButtons.CTAButton,
           {
             startIcon: /* @__PURE__ */ jsxRuntime.jsx(outline.PlusIcon, { style: { width: 20, height: 20 } }),
             onClick: () => setShowAddModal(true),
-            size: "L",
             children: "Add First Account"
           }
         )
@@ -2379,7 +2514,7 @@ const HomePage = () => {
     ] }) : /* @__PURE__ */ jsxRuntime.jsxs(AccountsContainer, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { style: { marginBottom: theme$3.spacing.md }, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", alignItems: "center", marginBottom: 4, children: [
         /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "delta", textColor: "neutral700", style: { fontSize: "1.5rem", fontWeight: 600 }, children: "📧 Email Accounts" }),
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { startIcon: /* @__PURE__ */ jsxRuntime.jsx(outline.PlusIcon, { style: { width: 16, height: 16 } }), onClick: () => setShowAddModal(true), children: "Add Account" })
+        /* @__PURE__ */ jsxRuntime.jsx(StyledButtons.GradientButton, { startIcon: /* @__PURE__ */ jsxRuntime.jsx(outline.PlusIcon, { style: { width: 16, height: 16 } }), onClick: () => setShowAddModal(true), children: "Add Account" })
       ] }) }),
       /* @__PURE__ */ jsxRuntime.jsxs(FilterBar$3, { children: [
         /* @__PURE__ */ jsxRuntime.jsxs(SearchInputWrapper$2, { children: [
@@ -2500,42 +2635,36 @@ const HomePage = () => {
             }) }) : /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral500", children: "Never" }) }),
             /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, children: [
               /* @__PURE__ */ jsxRuntime.jsx(
-                designSystem.Button,
+                StyledButtons.IconButton,
                 {
-                  variant: "secondary",
                   onClick: (e) => {
                     e.stopPropagation();
                     setEditingAccount(account);
                   },
-                  size: "S",
                   "aria-label": "Edit Account",
-                  children: /* @__PURE__ */ jsxRuntime.jsx(outline.PencilIcon, { style: { width: 16, height: 16 } })
+                  children: /* @__PURE__ */ jsxRuntime.jsx(outline.PencilIcon, {})
                 }
               ),
               /* @__PURE__ */ jsxRuntime.jsx(
-                designSystem.Button,
+                StyledButtons.IconButtonPrimary,
                 {
-                  variant: "secondary",
                   onClick: (e) => {
                     e.stopPropagation();
                     setTestingAccount(account);
                   },
-                  size: "S",
                   "aria-label": "Test Account",
-                  children: /* @__PURE__ */ jsxRuntime.jsx(outline.PlayIcon, { style: { width: 16, height: 16 } })
+                  children: /* @__PURE__ */ jsxRuntime.jsx(outline.PlayIcon, {})
                 }
               ),
               /* @__PURE__ */ jsxRuntime.jsx(
-                designSystem.Button,
+                StyledButtons.IconButtonDanger,
                 {
-                  variant: "danger-light",
                   onClick: (e) => {
                     e.stopPropagation();
                     deleteAccount(account.id, account.name);
                   },
-                  size: "S",
                   "aria-label": "Delete Account",
-                  children: /* @__PURE__ */ jsxRuntime.jsx(outline.TrashIcon, { style: { width: 16, height: 16 } })
+                  children: /* @__PURE__ */ jsxRuntime.jsx(outline.TrashIcon, {})
                 }
               )
             ] }) })
@@ -2620,179 +2749,127 @@ const TestEmailModal = ({ account, onClose, onTest }) => {
   const handleKeyDown = (e) => {
     e.stopPropagation();
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Root, { open: true, onOpenChange: onClose, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Modal.Content, { size: "L", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Header, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "beta", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(outline.PlayIcon, { style: { marginRight: 8, width: 20, height: 20 } }),
-      "Test Email Account"
-    ] }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Body, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 6, style: { width: "100%" }, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        designSystem.Box,
-        {
-          padding: 4,
-          background: "neutral100",
-          hasRadius: true,
-          style: {
-            borderRadius: "8px",
-            width: "100%"
-          },
-          children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 2, style: { width: "100%" }, children: [
-            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { fontWeight: "semiBold", style: { fontSize: "14px", color: "#4B5563" }, children: "Testing Account" }),
-            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "beta", style: { fontSize: "18px", fontWeight: 600 }, children: account.name }),
-            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", style: { fontSize: "14px" }, children: account.fromEmail })
-          ] })
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { required: true, style: { width: "100%" }, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { style: { fontSize: "14px" }, children: "Recipient Email Address" }),
+  const [testMode, setTestMode] = React.useState("strapi");
+  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Root, { open: true, onOpenChange: onClose, children: /* @__PURE__ */ jsxRuntime.jsxs(StyledModalContent$1, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(StyledModalHeader$1, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Title, { children: "Test Email Account" }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(StyledModalBody$1, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(AccountInfoCard, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", style: { color: theme$3.colors.primary[600], fontWeight: 500 }, children: "Testing Account" }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "beta", textColor: "neutral800", style: { fontSize: "1.125rem", fontWeight: 700, marginTop: "4px" }, children: account.name }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", style: { marginTop: "2px" }, children: account.fromEmail })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { style: { marginTop: "20px" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ModalFieldLabel, { children: "Recipient Email *" }),
         /* @__PURE__ */ jsxRuntime.jsx(
-          designSystem.TextInput,
+          StyledModalInput,
           {
-            placeholder: "recipient@example.com",
+            placeholder: "test@example.com",
             value: testEmail,
             onChange: handleInputChange,
             onKeyDown: handleKeyDown,
             onClick: (e) => e.stopPropagation(),
-            onFocus: (e) => e.stopPropagation(),
-            onBlur: (e) => e.stopPropagation(),
             type: "email",
-            autoFocus: true,
-            autoComplete: "off",
-            name: "test-email-recipient",
-            style: { width: "100%", fontSize: "14px" }
+            autoFocus: true
           }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Hint, { style: { fontSize: "13px" }, children: "Enter the email address where you want to receive the test email" })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { style: { width: "100%" }, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { fontWeight: "semiBold", marginBottom: 3, style: { fontSize: "14px", color: "#4B5563" }, children: "Email Configuration" }),
-        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 3, style: { width: "100%" }, children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { style: { width: "100%" }, children: [
-            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { style: { fontSize: "14px" }, children: "Priority" }),
-            /* @__PURE__ */ jsxRuntime.jsxs(
-              designSystem.SingleSelect,
-              {
-                value: priority,
-                onChange: setPriority,
-                style: { width: "100%" },
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "normal", children: "Normal Priority" }),
-                  /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "high", children: "High Priority" })
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Hint, { style: { fontSize: "13px" }, children: "High priority adds X-Priority and Importance headers" })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { style: { width: "100%" }, children: [
-            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { style: { fontSize: "14px" }, children: "Email Type" }),
-            /* @__PURE__ */ jsxRuntime.jsxs(
-              designSystem.SingleSelect,
-              {
-                value: emailType,
-                onChange: setEmailType,
-                style: { width: "100%" },
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "transactional", children: "Transactional" }),
-                  /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "marketing", children: "Marketing" }),
-                  /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "notification", children: "Notification" })
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Hint, { style: { fontSize: "13px" }, children: "Marketing emails automatically include List-Unsubscribe headers" })
-          ] }),
-          emailType === "marketing" && /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { style: { width: "100%" }, children: [
-            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { style: { fontSize: "14px" }, children: "Unsubscribe URL (Required for Marketing)" }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              designSystem.TextInput,
-              {
-                placeholder: "https://yoursite.com/unsubscribe",
-                value: unsubscribeUrl,
-                onChange: (e) => {
-                  e.stopPropagation();
-                  setUnsubscribeUrl(e.target.value);
-                },
-                style: { width: "100%", fontSize: "14px" }
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Hint, { style: { fontSize: "13px" }, children: "Required for GDPR/CAN-SPAM compliance. Adds List-Unsubscribe header." })
-          ] })
-        ] })
+        )
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { style: { width: "100%" }, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { fontWeight: "semiBold", marginBottom: 3, style: { fontSize: "14px", color: "#4B5563" }, children: "Test Options" }),
-        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 3, style: { width: "100%" }, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            designSystem.Box,
-            {
-              padding: 4,
-              background: "neutral0",
-              hasRadius: true,
-              style: {
-                border: "2px solid #E5E7EB",
-                borderRadius: "8px",
-                width: "100%"
-              },
-              children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 2, children: [
-                /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { alignItems: "center", gap: 2, children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(outline.PlayIcon, { style: { width: 18, height: 18, color: "#0EA5E9", flexShrink: 0 } }),
-                  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { fontWeight: "semiBold", style: { fontSize: "14px" }, children: "Direct Test" })
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", style: { fontSize: "13px", lineHeight: "1.5" }, children: "Send test email directly through this specific account" })
-              ] })
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            designSystem.Box,
-            {
-              padding: 4,
-              background: "primary50",
-              hasRadius: true,
-              style: {
-                border: "2px solid #0EA5E9",
-                borderRadius: "8px",
-                width: "100%"
-              },
-              children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 2, children: [
-                /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { alignItems: "center", gap: 2, children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(outline.SparklesIcon, { style: { width: 18, height: 18, color: "#0369A1", flexShrink: 0 } }),
-                  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { fontWeight: "semiBold", style: { fontSize: "14px", color: "#0369A1" }, children: "Strapi Email Service Test" })
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", textColor: "neutral600", style: { fontSize: "13px", lineHeight: "1.5" }, children: [
-                  "Test if MagicMail intercepts Strapi's native email service via THIS account (",
-                  account.name,
-                  ")"
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", style: { fontSize: "13px", lineHeight: "1.5" }, children: /* @__PURE__ */ jsxRuntime.jsx("strong", { style: { color: "#0369A1" }, children: "Use this to verify Email Designer compatibility" }) })
-              ] })
-            }
-          )
-        ] })
-      ] })
-    ] }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", gap: 2, style: { width: "100%" }, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { onClick: onClose, variant: "tertiary", children: "Cancel" }),
-      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { style: { marginTop: "20px" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ModalFieldLabel, { children: "Test Mode" }),
         /* @__PURE__ */ jsxRuntime.jsx(
-          designSystem.Button,
+          TestOptionCard,
           {
-            onClick: () => onTest(testEmail, { priority, type: emailType, unsubscribeUrl }),
-            disabled: !testEmail || !testEmail.includes("@") || emailType === "marketing" && !unsubscribeUrl,
-            startIcon: /* @__PURE__ */ jsxRuntime.jsx(outline.PlayIcon, { style: { width: 16, height: 16 } }),
-            variant: "secondary",
-            children: "Test Direct"
+            $selected: testMode === "direct",
+            onClick: () => setTestMode("direct"),
+            style: { marginBottom: "10px" },
+            children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { alignItems: "center", gap: 3, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(outline.PlayIcon, { style: { width: 20, height: 20, color: testMode === "direct" ? theme$3.colors.primary[600] : "#6B7280", flexShrink: 0 } }),
+              /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { style: { flex: 1 }, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { fontWeight: "semiBold", style: { fontSize: "14px", color: testMode === "direct" ? theme$3.colors.primary[700] : "#374151" }, children: "Direct Test" }),
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral500", style: { fontSize: "12px" }, children: "Send directly through this account" })
+              ] })
+            ] })
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
-          designSystem.Button,
+          TestOptionCard,
           {
-            onClick: testStrapiService,
-            disabled: !testEmail || !testEmail.includes("@"),
-            loading: testingStrapiService,
-            startIcon: /* @__PURE__ */ jsxRuntime.jsx(outline.SparklesIcon, { style: { width: 16, height: 16 } }),
-            children: "Test Strapi Service"
+            $selected: testMode === "strapi",
+            onClick: () => setTestMode("strapi"),
+            children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { alignItems: "center", gap: 3, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(outline.SparklesIcon, { style: { width: 20, height: 20, color: testMode === "strapi" ? theme$3.colors.primary[600] : "#6B7280", flexShrink: 0 } }),
+              /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { style: { flex: 1 }, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { fontWeight: "semiBold", style: { fontSize: "14px", color: testMode === "strapi" ? theme$3.colors.primary[700] : "#374151" }, children: "Strapi Service Test" }),
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral500", style: { fontSize: "12px" }, children: "Verify MagicMail intercepts Strapi's email service" })
+              ] })
+            ] })
           }
         )
+      ] }),
+      testMode === "direct" && /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { style: { marginTop: "20px", padding: "16px", background: "#F9FAFB", borderRadius: "12px" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ModalFieldLabel, { style: { marginBottom: "16px", fontSize: "14px" }, children: "Advanced Options" }),
+        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { style: { marginBottom: "12px" }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ModalFieldLabel, { children: "Priority" }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            StyledModalSelect,
+            {
+              value: priority,
+              onChange: (e) => setPriority(e.target.value),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("option", { value: "normal", children: "Normal" }),
+                /* @__PURE__ */ jsxRuntime.jsx("option", { value: "high", children: "High Priority" })
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { style: { marginBottom: emailType === "marketing" ? "12px" : "0" }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ModalFieldLabel, { children: "Email Type" }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            StyledModalSelect,
+            {
+              value: emailType,
+              onChange: (e) => setEmailType(e.target.value),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("option", { value: "transactional", children: "Transactional" }),
+                /* @__PURE__ */ jsxRuntime.jsx("option", { value: "marketing", children: "Marketing" }),
+                /* @__PURE__ */ jsxRuntime.jsx("option", { value: "notification", children: "Notification" })
+              ]
+            }
+          )
+        ] }),
+        emailType === "marketing" && /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ModalFieldLabel, { children: "Unsubscribe URL *" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            StyledModalInput,
+            {
+              placeholder: "https://yoursite.com/unsubscribe",
+              value: unsubscribeUrl,
+              onChange: (e) => setUnsubscribeUrl(e.target.value)
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(ModalHint$1, { children: "Required for GDPR/CAN-SPAM compliance" })
+        ] })
       ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(StyledModalFooter$1, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", style: { width: "100%" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(StyledButtons.TertiaryButton, { onClick: onClose, children: "Cancel" }),
+      testMode === "direct" ? /* @__PURE__ */ jsxRuntime.jsx(
+        StyledButtons.GradientButton,
+        {
+          onClick: () => onTest(testEmail, { priority, type: emailType, unsubscribeUrl }),
+          disabled: !testEmail || !testEmail.includes("@") || emailType === "marketing" && !unsubscribeUrl,
+          startIcon: /* @__PURE__ */ jsxRuntime.jsx(outline.PlayIcon, { style: { width: 16, height: 16 } }),
+          children: "Send Test Email"
+        }
+      ) : /* @__PURE__ */ jsxRuntime.jsx(
+        StyledButtons.GradientButton,
+        {
+          onClick: testStrapiService,
+          disabled: !testEmail || !testEmail.includes("@"),
+          loading: testingStrapiService,
+          startIcon: /* @__PURE__ */ jsxRuntime.jsx(outline.SparklesIcon, { style: { width: 16, height: 16 } }),
+          children: "Test Strapi Service"
+        }
+      )
     ] }) })
   ] }) });
 };
@@ -3334,11 +3411,10 @@ const RoutingRulesPage = () => {
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
-          designSystem.Button,
+          StyledButtons.CTAButton,
           {
             startIcon: /* @__PURE__ */ jsxRuntime.jsx(outline.PlusIcon, { style: { width: 20, height: 20 } }),
             onClick: () => setShowModal(true),
-            size: "L",
             children: "Create First Rule"
           }
         )
@@ -3346,7 +3422,7 @@ const RoutingRulesPage = () => {
     ] }) : /* @__PURE__ */ jsxRuntime.jsxs(RulesContainer, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { style: { marginBottom: theme$2.spacing.md }, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", alignItems: "center", marginBottom: 4, children: [
         /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "delta", textColor: "neutral700", style: { fontSize: "1.5rem", fontWeight: 600 }, children: "🎯 Routing Rules" }),
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { startIcon: /* @__PURE__ */ jsxRuntime.jsx(outline.PlusIcon, { style: { width: 16, height: 16 } }), onClick: () => setShowModal(true), children: "Create Rule" })
+        /* @__PURE__ */ jsxRuntime.jsx(StyledButtons.GradientButton, { startIcon: /* @__PURE__ */ jsxRuntime.jsx(outline.PlusIcon, { style: { width: 16, height: 16 } }), onClick: () => setShowModal(true), children: "Create Rule" })
       ] }) }),
       /* @__PURE__ */ jsxRuntime.jsxs(FilterBar$2, { children: [
         /* @__PURE__ */ jsxRuntime.jsxs(SearchInputWrapper$1, { children: [
@@ -3439,23 +3515,19 @@ const RoutingRulesPage = () => {
           ) }),
           /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, children: [
             /* @__PURE__ */ jsxRuntime.jsx(
-              designSystem.Button,
+              StyledButtons.IconButton,
               {
-                variant: "secondary",
                 onClick: () => setEditingRule(rule),
-                size: "S",
                 "aria-label": "Edit Rule",
-                children: /* @__PURE__ */ jsxRuntime.jsx(outline.PencilIcon, { style: { width: 16, height: 16 } })
+                children: /* @__PURE__ */ jsxRuntime.jsx(outline.PencilIcon, {})
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsx(
-              designSystem.Button,
+              StyledButtons.IconButtonDanger,
               {
-                variant: "danger-light",
                 onClick: () => deleteRule(rule.id, rule.name),
-                size: "S",
                 "aria-label": "Delete Rule",
-                children: /* @__PURE__ */ jsxRuntime.jsx(outline.TrashIcon, { style: { width: 16, height: 16 } })
+                children: /* @__PURE__ */ jsxRuntime.jsx(outline.TrashIcon, {})
               }
             )
           ] }) })
@@ -3729,9 +3801,9 @@ const RuleModal = ({ rule, accounts, onClose, onSave }) => {
       )
     ] }) }) }),
     /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "flex-end", gap: 2, style: { width: "100%" }, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { onClick: onClose, variant: "tertiary", children: "Cancel" }),
+      /* @__PURE__ */ jsxRuntime.jsx(StyledButtons.TertiaryButton, { onClick: onClose, children: "Cancel" }),
       /* @__PURE__ */ jsxRuntime.jsx(
-        designSystem.Button,
+        StyledButtons.GradientButton,
         {
           onClick: handleSubmit,
           loading,
@@ -3864,7 +3936,7 @@ const useLicense = () => {
 const theme$1 = {
   colors: {
     primary: { 50: "#F0F9FF", 100: "#E0F2FE", 500: "#0EA5E9", 600: "#0284C7", 700: "#0369A1" },
-    secondary: { 50: "#F5F3FF", 100: "#EDE9FE", 600: "#9333EA" },
+    secondary: { 50: "#F5F3FF", 100: "#EDE9FE", 500: "#A855F7", 600: "#9333EA" },
     success: { 100: "#DCFCE7", 500: "#22C55E", 600: "#16A34A" },
     warning: { 100: "#FEF3C7", 500: "#F59E0B", 600: "#D97706" }
   },
@@ -3901,7 +3973,8 @@ styled__default.default.div`
 const ScrollableDialogBody = styled__default.default(designSystem.Box)`
   overflow-y: auto;
   max-height: calc(85vh - 160px);
-  padding: 0 24px 24px 24px;
+  padding: 24px 28px 28px 28px;
+  background: ${(props) => props.theme.colors.neutral0};
 
   /* Custom Scrollbar */
   &::-webkit-scrollbar {
@@ -3921,19 +3994,19 @@ const ScrollableDialogBody = styled__default.default(designSystem.Box)`
     background: ${(props) => props.theme.colors.neutral300};
   }
 `;
-const CodeSection = styled__default.default(designSystem.Box)`
+styled__default.default(designSystem.Box)`
   margin-bottom: 32px;
   
   &:last-child {
     margin-bottom: 0;
   }
 `;
-const CodeHeader = styled__default.default(designSystem.Flex)`
+styled__default.default(designSystem.Flex)`
   align-items: center;
   gap: 12px;
   margin-bottom: 16px;
 `;
-const CodeLabel = styled__default.default(designSystem.Typography)`
+styled__default.default(designSystem.Typography)`
   font-size: 15px;
   font-weight: 600;
   color: ${(props) => props.theme.colors.neutral800};
@@ -4316,8 +4389,34 @@ const StyledSearchInput = styled__default.default(designSystem.TextInput)`
   width: 100%;
   padding-left: 36px;
 `;
+const TableWrapper = styled__default.default(designSystem.Box)`
+  overflow-x: auto;
+  border-radius: ${theme$1.borderRadius.lg};
+  border: 1px solid ${(props) => props.theme.colors.neutral200};
+  background: ${(props) => props.theme.colors.neutral0};
+  
+  &::-webkit-scrollbar {
+    height: 8px;
+  }
+  
+  &::-webkit-scrollbar-track {
+    background: ${(props) => props.theme.colors.neutral100};
+    border-radius: 4px;
+  }
+  
+  &::-webkit-scrollbar-thumb {
+    background: ${(props) => props.theme.colors.neutral300};
+    border-radius: 4px;
+    
+    &:hover {
+      background: ${(props) => props.theme.colors.neutral400};
+    }
+  }
+`;
 const StyledTable$1 = styled__default.default(designSystem.Table)`
   width: 100%;
+  min-width: 900px;
+  
   thead {
     background: ${(props) => props.theme.colors.neutral100};
     border-bottom: 2px solid ${(props) => props.theme.colors.neutral200};
@@ -4325,10 +4424,11 @@ const StyledTable$1 = styled__default.default(designSystem.Table)`
     th {
       font-weight: 600;
       color: ${(props) => props.theme.colors.neutral800};
-      font-size: 0.875rem;
+      font-size: 0.75rem;
       text-transform: uppercase;
       letter-spacing: 0.025em;
-      padding: ${theme$1.spacing.lg} ${theme$1.spacing.lg};
+      padding: 12px 16px;
+      white-space: nowrap;
     }
   }
   
@@ -4345,12 +4445,42 @@ const StyledTable$1 = styled__default.default(designSystem.Table)`
     }
     
     td {
-      padding: ${theme$1.spacing.lg} ${theme$1.spacing.lg};
+      padding: 10px 12px;
       color: ${(props) => props.theme.colors.neutral800};
       vertical-align: middle;
+      font-size: 13px;
     }
   }
 `;
+const PaginationWrapper = styled__default.default(designSystem.Flex)`
+  padding: 16px 20px;
+  background: ${(props) => props.theme.colors.neutral100};
+  border-top: 1px solid ${(props) => props.theme.colors.neutral200};
+  border-radius: 0 0 ${theme$1.borderRadius.lg} ${theme$1.borderRadius.lg};
+`;
+const PaginationButton = styled__default.default.button`
+  background: ${(props) => props.active ? "linear-gradient(135deg, #0EA5E9 0%, #A855F7 100%)" : "white"};
+  color: ${(props) => props.active ? "white" : props.theme.colors.neutral700};
+  border: 1px solid ${(props) => props.active ? "transparent" : props.theme.colors.neutral300};
+  padding: 6px 12px;
+  min-width: 36px;
+  height: 36px;
+  border-radius: 8px;
+  font-weight: 500;
+  font-size: 13px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  
+  &:hover:not(:disabled) {
+    background: ${(props) => props.active ? "linear-gradient(135deg, #0284C7 0%, #9333EA 100%)" : props.theme.colors.neutral100};
+    border-color: ${(props) => props.active ? "transparent" : props.theme.colors.neutral400};
+  }
+  
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+`;
 const EmptyState$1 = styled__default.default(designSystem.Box)`
   background: ${(props) => props.theme.colors.neutral0};
   border-radius: ${theme$1.borderRadius.xl};
@@ -4445,41 +4575,157 @@ const EmptyButtonGroup = styled__default.default.div`
 const HiddenFileInput = styled__default.default.input`
   display: none;
 `;
-const TemplateList = () => {
-  const { get, del, post } = admin.useFetchClient();
-  const { toggleNotification } = admin.useNotification();
-  const navigate = reactRouterDom.useNavigate();
-  useLicense();
-  useAuthRefresh();
-  const [templates, setTemplates] = React.useState([]);
-  const [stats, setStats] = React.useState(null);
-  const [loading, setLoading] = React.useState(true);
-  const [searchTerm, setSearchTerm] = React.useState("");
-  const [activeTab, setActiveTab] = React.useState("customTemplates");
-  const [showCodeExample, setShowCodeExample] = React.useState(false);
-  const [selectedTemplate, setSelectedTemplate] = React.useState(null);
-  const [copiedCode, setCopiedCode] = React.useState(null);
-  const [limits, setLimits] = React.useState(null);
-  const [showTestSendModal, setShowTestSendModal] = React.useState(false);
-  const [testEmail, setTestEmail] = React.useState("");
-  const [testAccount, setTestAccount] = React.useState("");
-  const [accounts, setAccounts] = React.useState([]);
-  const fileInputRef = React.useRef(null);
-  const coreEmailTypes = [
-    {
-      type: "reset-password",
-      name: "Reset Password",
-      description: "Email sent when user requests password reset"
-    },
-    {
-      type: "email-confirmation",
-      name: "Email Address Confirmation",
-      description: "Email sent to confirm user email address"
+const StyledModalContent = styled__default.default(designSystem.Modal.Content)`
+  && {
+    border-radius: 16px;
+    overflow: hidden;
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    max-width: 480px;
+  }
+`;
+const StyledModalHeader = styled__default.default(designSystem.Modal.Header)`
+  && {
+    background: linear-gradient(135deg, ${theme$1.colors.primary[500]} 0%, ${theme$1.colors.secondary[500]} 100%);
+    padding: 24px 28px;
+    border-bottom: none;
+    
+    h2 {
+      color: white;
+      font-size: 1.25rem;
+      font-weight: 700;
     }
-  ];
-  React.useEffect(() => {
-    fetchData();
-    fetchLimits();
+    
+    /* Close button styling */
+    button {
+      color: white !important;
+      opacity: 0.9;
+      background: rgba(255, 255, 255, 0.15) !important;
+      border-radius: 8px;
+      
+      &:hover {
+        opacity: 1;
+        background: rgba(255, 255, 255, 0.25) !important;
+      }
+      
+      svg {
+        fill: white !important;
+        color: white !important;
+        
+        path {
+          fill: white !important;
+        }
+      }
+    }
+  }
+`;
+const StyledModalBody = styled__default.default(designSystem.Modal.Body)`
+  && {
+    padding: 28px;
+    background: ${(props) => props.theme.colors.neutral0};
+  }
+`;
+const ModalField = styled__default.default(designSystem.Box)`
+  margin-bottom: 20px;
+  
+  &:last-child {
+    margin-bottom: 0;
+  }
+`;
+const ModalLabel = styled__default.default(designSystem.Typography)`
+  && {
+    font-weight: 600;
+    font-size: 13px;
+    color: ${(props) => props.theme.colors.neutral700};
+    margin-bottom: 8px;
+    display: block;
+  }
+`;
+const ModalHint = styled__default.default(designSystem.Typography)`
+  && {
+    font-size: 12px;
+    color: ${(props) => props.theme.colors.neutral600};
+    margin-top: 6px;
+    display: block;
+  }
+`;
+const ModalTemplateInfo = styled__default.default(designSystem.Box)`
+  background: linear-gradient(135deg, ${theme$1.colors.primary[50]} 0%, ${theme$1.colors.secondary[50]} 100%);
+  border: 1px solid ${theme$1.colors.primary[100]};
+  border-radius: 10px;
+  padding: 14px 16px;
+  
+  p {
+    margin: 0;
+    font-weight: 500;
+    color: ${(props) => props.theme.colors.neutral800};
+  }
+`;
+const StyledSelect = styled__default.default.select`
+  width: 100%;
+  padding: 10px 14px;
+  border-radius: 8px;
+  border: 1px solid ${(props) => props.theme.colors.neutral200};
+  font-size: 14px;
+  background: ${(props) => props.theme.colors.neutral0};
+  cursor: pointer;
+  transition: all ${theme$1.transitions.fast};
+  color: ${(props) => props.theme.colors.neutral700};
+  
+  &:hover {
+    border-color: ${theme$1.colors.primary[500]};
+  }
+  
+  &:focus {
+    outline: none;
+    border-color: ${theme$1.colors.primary[500]};
+    box-shadow: 0 0 0 3px ${theme$1.colors.primary[100]};
+  }
+`;
+const StyledModalFooter = styled__default.default(designSystem.Modal.Footer)`
+  && {
+    padding: 20px 28px;
+    background: ${(props) => props.theme.colors.neutral100};
+    border-top: 1px solid ${(props) => props.theme.colors.neutral200};
+    gap: 12px;
+  }
+`;
+const TemplateList = () => {
+  const { get, del, post } = admin.useFetchClient();
+  const { toggleNotification } = admin.useNotification();
+  const navigate = reactRouterDom.useNavigate();
+  useLicense();
+  useAuthRefresh();
+  const [templates, setTemplates] = React.useState([]);
+  const [stats, setStats] = React.useState(null);
+  const [loading, setLoading] = React.useState(true);
+  const [searchTerm, setSearchTerm] = React.useState("");
+  const [activeTab, setActiveTab] = React.useState("customTemplates");
+  const [showCodeExample, setShowCodeExample] = React.useState(false);
+  const [selectedTemplate, setSelectedTemplate] = React.useState(null);
+  const [copiedCode, setCopiedCode] = React.useState(null);
+  const [limits, setLimits] = React.useState(null);
+  const [showTestSendModal, setShowTestSendModal] = React.useState(false);
+  const [testEmail, setTestEmail] = React.useState("");
+  const [currentPage, setCurrentPage] = React.useState(1);
+  const [itemsPerPage, setItemsPerPage] = React.useState(10);
+  const [testAccount, setTestAccount] = React.useState("");
+  const [accounts, setAccounts] = React.useState([]);
+  const fileInputRef = React.useRef(null);
+  const coreEmailTypes = [
+    {
+      type: "reset-password",
+      name: "Reset Password",
+      description: "Email sent when user requests password reset"
+    },
+    {
+      type: "email-confirmation",
+      name: "Email Address Confirmation",
+      description: "Email sent to confirm user email address"
+    }
+  ];
+  React.useEffect(() => {
+    fetchData();
+    fetchLimits();
     fetchAccounts();
   }, []);
   const fetchData = async () => {
@@ -4746,6 +4992,12 @@ const TemplateList = () => {
   const filteredTemplates = templates.filter(
     (t) => t.name.toLowerCase().includes(searchTerm.toLowerCase()) || t.subject.toLowerCase().includes(searchTerm.toLowerCase()) || t.templateReferenceId.toString().includes(searchTerm)
   );
+  const totalPages = Math.ceil(filteredTemplates.length / itemsPerPage);
+  const startIndex = (currentPage - 1) * itemsPerPage;
+  const paginatedTemplates = filteredTemplates.slice(startIndex, startIndex + itemsPerPage);
+  React.useEffect(() => {
+    setCurrentPage(1);
+  }, [searchTerm]);
   const showSkeleton = loading && templates.length === 0;
   return /* @__PURE__ */ jsxRuntime.jsxs(Container$2, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(Header$2, { children: /* @__PURE__ */ jsxRuntime.jsx(HeaderContent$1, { justifyContent: "flex-start", alignItems: "center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
@@ -4879,20 +5131,18 @@ const TemplateList = () => {
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs(EmptyButtonGroup, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(
-            designSystem.Button,
+            StyledButtons.CTAButton,
             {
               startIcon: /* @__PURE__ */ jsxRuntime.jsx(outline.PlusIcon, { style: { width: 20, height: 20 } }),
               onClick: handleCreateTemplate,
-              size: "L",
               children: "Create Your First Template"
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(
-            designSystem.Button,
+            StyledButtons.SecondaryButton,
             {
               startIcon: /* @__PURE__ */ jsxRuntime.jsx(outline.ArrowUpTrayIcon, { style: { width: 20, height: 20 } }),
               onClick: () => fileInputRef.current?.click(),
-              size: "L",
               children: "Import Template"
             }
           )
@@ -4901,11 +5151,10 @@ const TemplateList = () => {
         /* @__PURE__ */ jsxRuntime.jsx(SectionHeader, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", alignItems: "center", marginBottom: 4, children: [
           /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "delta", textColor: "neutral700", style: { fontSize: "1.5rem", fontWeight: 600 }, children: "Email Templates" }),
           /* @__PURE__ */ jsxRuntime.jsx(
-            designSystem.Button,
+            StyledButtons.GradientButton,
             {
               startIcon: /* @__PURE__ */ jsxRuntime.jsx(outline.PlusIcon, { style: { width: 20, height: 20 } }),
               onClick: handleCreateTemplate,
-              size: "L",
               children: "Create Template"
             }
           )
@@ -4924,125 +5173,182 @@ const TemplateList = () => {
             )
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx(
-            designSystem.Button,
+            StyledButtons.SecondaryButton,
             {
-              startIcon: /* @__PURE__ */ jsxRuntime.jsx(outline.ArrowUpTrayIcon, { style: { width: 20, height: 20 } }),
+              startIcon: /* @__PURE__ */ jsxRuntime.jsx(outline.ArrowUpTrayIcon, { style: { width: 16, height: 16 } }),
               onClick: () => fileInputRef.current?.click(),
-              size: "L",
               children: "Import"
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(
-            designSystem.Button,
+            StyledButtons.TertiaryButton,
             {
-              startIcon: /* @__PURE__ */ jsxRuntime.jsx(outline.ArrowDownTrayIcon, { style: { width: 20, height: 20 } }),
+              startIcon: /* @__PURE__ */ jsxRuntime.jsx(outline.ArrowDownTrayIcon, { style: { width: 16, height: 16 } }),
               onClick: handleExport,
               disabled: templates.length === 0,
-              size: "L",
               children: "Export"
             }
           )
         ] }),
-        filteredTemplates.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { children: /* @__PURE__ */ jsxRuntime.jsxs(StyledTable$1, { colCount: 6, rowCount: filteredTemplates.length, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Thead, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Tr, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", children: "ID" }) }),
-            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", children: "Name" }) }),
-            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", children: "Subject" }) }),
-            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", children: "Category" }) }),
-            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", children: "Status" }) }),
-            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { style: { textAlign: "right", width: "100%" }, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", children: "Actions" }) }) })
-          ] }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Tbody, { children: filteredTemplates.map((template) => /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Tr, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "omega", fontWeight: "bold", children: [
-              "#",
-              template.templateReferenceId
+        filteredTemplates.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(TableWrapper, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(StyledTable$1, { colCount: 5, rowCount: paginatedTemplates.length, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Thead, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Tr, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { style: { width: "100px" }, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", children: "ID" }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", children: "Name" }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { style: { width: "100px" }, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", children: "Category" }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { style: { width: "80px" }, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", children: "Status" }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { style: { width: "260px" }, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { style: { textAlign: "right", width: "100%" }, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", children: "Actions" }) }) })
             ] }) }),
-            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", fontWeight: "semiBold", children: template.name }) }),
-            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", textColor: "neutral600", children: template.subject }) }),
-            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: getCategoryBadge(template.category) }),
-            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Badge, { backgroundColor: template.isActive ? "success" : "neutral", children: template.isActive ? "ACTIVE" : "INACTIVE" }) }),
-            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, justifyContent: "flex-end", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                designSystem.Button,
-                {
-                  variant: "secondary",
-                  onClick: () => navigate(`/plugins/magic-mail/designer/${template.id}`),
-                  size: "S",
-                  "aria-label": "Edit Template",
-                  children: /* @__PURE__ */ jsxRuntime.jsx(outline.PencilIcon, { style: { width: 16, height: 16 } })
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                designSystem.Button,
-                {
-                  variant: "secondary",
-                  onClick: () => handleDownload(template.id, "html"),
-                  size: "S",
-                  "aria-label": "Download HTML",
-                  title: "Download as HTML",
-                  children: /* @__PURE__ */ jsxRuntime.jsx(outline.DocumentArrowDownIcon, { style: { width: 16, height: 16 } })
-                }
-              ),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Tbody, { children: paginatedTemplates.map((template) => /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Tr, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "omega", fontWeight: "bold", style: { fontSize: "13px" }, children: [
+                "#",
+                template.templateReferenceId
+              ] }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", fontWeight: "semiBold", style: { fontSize: "13px" }, children: template.name }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: getCategoryBadge(template.category) }),
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Badge, { backgroundColor: template.isActive ? "success" : "neutral", children: template.isActive ? "ACTIVE" : "INACTIVE" }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, justifyContent: "flex-end", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  StyledButtons.IconButtonPrimary,
+                  {
+                    onClick: () => navigate(`/plugins/magic-mail/designer/${template.id}`),
+                    "aria-label": "Edit Template",
+                    title: "Edit Template",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(outline.PencilIcon, {})
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  StyledButtons.IconButton,
+                  {
+                    onClick: () => handleDownload(template.id, "html"),
+                    "aria-label": "Download HTML",
+                    title: "Download as HTML",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(outline.DocumentArrowDownIcon, {})
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  StyledButtons.IconButton,
+                  {
+                    onClick: () => handleDownload(template.id, "json"),
+                    "aria-label": "Download JSON",
+                    title: "Download as JSON",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(outline.CodeBracketIcon, {})
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  StyledButtons.IconButton,
+                  {
+                    onClick: () => handleDuplicate(template.id, template.name),
+                    "aria-label": "Duplicate Template",
+                    title: "Duplicate Template",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(outline.DocumentDuplicateIcon, {})
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  StyledButtons.IconButtonPurple,
+                  {
+                    onClick: () => {
+                      setSelectedTemplate(template);
+                      setShowCodeExample(true);
+                    },
+                    "aria-label": "Code Example",
+                    title: "View Code Example",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(outline.BoltIcon, {})
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  StyledButtons.IconButtonSuccess,
+                  {
+                    onClick: () => handleTestSend(template),
+                    "aria-label": "Send Test Email",
+                    title: "Send Test Email",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(outline.PaperAirplaneIcon, {})
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  StyledButtons.IconButtonDanger,
+                  {
+                    onClick: () => handleDelete(template.id, template.name),
+                    "aria-label": "Delete Template",
+                    title: "Delete Template",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(outline.TrashIcon, {})
+                  }
+                )
+              ] }) })
+            ] }, template.id)) })
+          ] }),
+          totalPages > 1 && /* @__PURE__ */ jsxRuntime.jsxs(PaginationWrapper, { justifyContent: "space-between", alignItems: "center", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 3, alignItems: "center", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", textColor: "neutral600", children: [
+                "Showing ",
+                startIndex + 1,
+                "-",
+                Math.min(startIndex + itemsPerPage, filteredTemplates.length),
+                " of ",
+                filteredTemplates.length
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, alignItems: "center", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", children: "per page:" }),
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  StyledSelect,
+                  {
+                    value: itemsPerPage,
+                    onChange: (e) => {
+                      setItemsPerPage(Number(e.target.value));
+                      setCurrentPage(1);
+                    },
+                    style: { width: "70px", padding: "4px 8px", fontSize: "12px" },
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("option", { value: 5, children: "5" }),
+                      /* @__PURE__ */ jsxRuntime.jsx("option", { value: 10, children: "10" }),
+                      /* @__PURE__ */ jsxRuntime.jsx("option", { value: 25, children: "25" }),
+                      /* @__PURE__ */ jsxRuntime.jsx("option", { value: 50, children: "50" })
+                    ]
+                  }
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, children: [
               /* @__PURE__ */ jsxRuntime.jsx(
-                designSystem.Button,
+                PaginationButton,
                 {
-                  variant: "secondary",
-                  onClick: () => handleDownload(template.id, "json"),
-                  size: "S",
-                  "aria-label": "Download JSON",
-                  title: "Download as JSON",
-                  children: /* @__PURE__ */ jsxRuntime.jsx(outline.CodeBracketIcon, { style: { width: 16, height: 16 } })
+                  onClick: () => setCurrentPage((p) => Math.max(1, p - 1)),
+                  disabled: currentPage === 1,
+                  children: "Previous"
                 }
               ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                designSystem.Button,
-                {
-                  variant: "secondary",
-                  onClick: () => handleDuplicate(template.id, template.name),
-                  size: "S",
-                  "aria-label": "Duplicate Template",
-                  title: "Duplicate Template",
-                  children: /* @__PURE__ */ jsxRuntime.jsx(outline.DocumentDuplicateIcon, { style: { width: 16, height: 16 } })
+              Array.from({ length: Math.min(5, totalPages) }, (_, i) => {
+                let pageNum;
+                if (totalPages <= 5) {
+                  pageNum = i + 1;
+                } else if (currentPage <= 3) {
+                  pageNum = i + 1;
+                } else if (currentPage >= totalPages - 2) {
+                  pageNum = totalPages - 4 + i;
+                } else {
+                  pageNum = currentPage - 2 + i;
                 }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                designSystem.Button,
-                {
-                  variant: "secondary",
-                  onClick: () => {
-                    setSelectedTemplate(template);
-                    setShowCodeExample(true);
+                return /* @__PURE__ */ jsxRuntime.jsx(
+                  PaginationButton,
+                  {
+                    active: currentPage === pageNum,
+                    onClick: () => setCurrentPage(pageNum),
+                    children: pageNum
                   },
-                  size: "S",
-                  "aria-label": "Code Example",
-                  title: "View Code Example",
-                  children: /* @__PURE__ */ jsxRuntime.jsx(outline.BoltIcon, { style: { width: 16, height: 16 } })
-                }
-              ),
+                  pageNum
+                );
+              }),
               /* @__PURE__ */ jsxRuntime.jsx(
-                designSystem.Button,
+                PaginationButton,
                 {
-                  variant: "success-light",
-                  onClick: () => handleTestSend(template),
-                  size: "S",
-                  "aria-label": "Send Test Email",
-                  title: "Send Test Email",
-                  children: /* @__PURE__ */ jsxRuntime.jsx(outline.PaperAirplaneIcon, { style: { width: 16, height: 16 } })
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                designSystem.Button,
-                {
-                  variant: "danger-light",
-                  onClick: () => handleDelete(template.id, template.name),
-                  size: "S",
-                  "aria-label": "Delete Template",
-                  children: /* @__PURE__ */ jsxRuntime.jsx(outline.TrashIcon, { style: { width: 16, height: 16 } })
+                  onClick: () => setCurrentPage((p) => Math.min(totalPages, p + 1)),
+                  disabled: currentPage === totalPages,
+                  children: "Next"
                 }
               )
-            ] }) })
-          ] }, template.id)) })
-        ] }) }) : /* @__PURE__ */ jsxRuntime.jsxs(
+            ] })
+          ] })
+        ] }) : /* @__PURE__ */ jsxRuntime.jsxs(
           designSystem.Box,
           {
             background: "neutral100",
@@ -5088,13 +5394,12 @@ const TemplateList = () => {
               /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", style: { fontSize: "12px" }, children: coreEmail.description })
             ] }) }),
             /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { gap: 2, justifyContent: "flex-end", children: /* @__PURE__ */ jsxRuntime.jsx(
-              designSystem.Button,
+              StyledButtons.IconButtonPrimary,
               {
-                variant: "secondary",
                 onClick: () => navigate(`/plugins/magic-mail/designer/core/${coreEmail.type}`),
-                size: "S",
                 "aria-label": "Edit Core Email",
-                children: /* @__PURE__ */ jsxRuntime.jsx(outline.PencilIcon, { style: { width: 16, height: 16 } })
+                title: "Edit Template",
+                children: /* @__PURE__ */ jsxRuntime.jsx(outline.PencilIcon, {})
               }
             ) }) })
           ] }, coreEmail.type)) })
@@ -5106,81 +5411,93 @@ const TemplateList = () => {
       width: "90vw",
       maxHeight: "85vh",
       display: "flex",
-      flexDirection: "column"
+      flexDirection: "column",
+      borderRadius: "16px",
+      overflow: "hidden"
     }, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Header, { style: { borderBottom: "1px solid #E5E7EB", paddingBottom: "16px" }, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { alignItems: "center", gap: 2, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(outline.BoltIcon, { style: { width: 24, height: 24, color: theme$1.colors.primary[600] } }),
-        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "beta", textColor: "neutral800", children: [
-          "Send Template: ",
-          selectedTemplate.name
-        ] })
+      /* @__PURE__ */ jsxRuntime.jsx(StyledModalHeader, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Modal.Title, { children: [
+        "Code Snippets: ",
+        selectedTemplate.name
       ] }) }),
       /* @__PURE__ */ jsxRuntime.jsxs(ScrollableDialogBody, { children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(CodeSection, { children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(CodeHeader, { children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(CodeLabel, { variant: "omega", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(outline.CheckCircleIcon, { style: { width: 20, height: 20, color: theme$1.colors.success[600] } }),
-              "Native Strapi Email Service"
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsx(RecommendedBadge, { children: "Empfohlen" })
+        /* @__PURE__ */ jsxRuntime.jsx(InfoBox$1, { style: { marginTop: 0, marginBottom: "20px" }, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { alignItems: "center", justifyContent: "space-between", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", style: { color: theme$1.colors.primary[700] }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Template ID:" }),
+            " #",
+            selectedTemplate.templateReferenceId
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", style: { marginBottom: "16px" }, children: "Nutze die standard Strapi Email-Funktion. MagicMail fängt sie automatisch ab und wendet alle Features an." }),
-          /* @__PURE__ */ jsxRuntime.jsxs(CodeBlockWrapper, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(CodeBlock, { dangerouslySetInnerHTML: {
-              __html: `<span class="comment">// Überall in deinem Strapi Backend:</span>
+          /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", style: { color: theme$1.colors.primary[700] }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Status:" }),
+            " ",
+            selectedTemplate.isActive ? "Active" : "Inactive"
+          ] })
+        ] }) }),
+        !selectedTemplate.isActive && /* @__PURE__ */ jsxRuntime.jsxs(WarningBox, { style: { marginTop: 0, marginBottom: "20px" }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(outline.SparklesIcon, { style: { width: 20, height: 20, color: theme$1.colors.warning[600] } }),
+          /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", style: { color: theme$1.colors.warning[700], fontWeight: 500 }, children: [
+            "This template is currently ",
+            /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "INACTIVE" }),
+            " and will not be sent."
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Accordion.Root, { defaultValue: "native", collapsible: true, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Accordion.Item, { value: "native", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Trigger, { icon: () => /* @__PURE__ */ jsxRuntime.jsx(outline.CheckCircleIcon, { style: { width: 16, height: 16, color: theme$1.colors.success[600] } }), children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, alignItems: "center", children: [
+              "Native Strapi Email Service",
+              /* @__PURE__ */ jsxRuntime.jsx(RecommendedBadge, { children: "Recommended" })
+            ] }) }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Content, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { padding: 4, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", style: { marginBottom: "16px", display: "block" }, children: "Use the standard Strapi Email function. MagicMail intercepts it automatically and applies all features." }),
+              /* @__PURE__ */ jsxRuntime.jsxs(CodeBlockWrapper, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(CodeBlock, { dangerouslySetInnerHTML: {
+                  __html: `<span class="comment">// Anywhere in your Strapi backend:</span>
 <span class="keyword">await</span> strapi.plugins.email.services.email.<span class="function">send</span>({
   <span class="keyword">to</span>: <span class="string">'user@example.com'</span>,
-  <span class="keyword">subject</span>: <span class="string">'Dein Betreff'</span>, <span class="comment">// Optional (wird von Template überschrieben)</span>
-  <span class="keyword">templateId</span>: <span class="number">${selectedTemplate.templateReferenceId}</span>, <span class="comment">// ← Template ID</span>
+  <span class="keyword">subject</span>: <span class="string">'Your Subject'</span>, <span class="comment">// Optional (overridden by template)</span>
+  <span class="keyword">templateId</span>: <span class="number">${selectedTemplate.templateReferenceId}</span>, <span class="comment">// Template ID</span>
   <span class="keyword">data</span>: {
     <span class="keyword">name</span>: <span class="string">'John Doe'</span>,
     <span class="keyword">code</span>: <span class="string">'123456'</span>,
-    <span class="comment">// ... deine dynamischen Variablen</span>
+    <span class="comment">// ... your dynamic variables</span>
   }
-});
-
-<span class="comment">// MagicMail fängt das automatisch ab und:</span>
-<span class="comment">// 1. Rendert das Template mit deinen Daten</span>
-<span class="comment">// 2. Routet über die richtige Email-Account</span>
-<span class="comment">// 3. Tracked Opens & Clicks (wenn aktiviert)</span>`
-            } }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              CopyButton,
-              {
-                size: "S",
-                variant: "ghost",
-                onClick: () => handleCopyCode(
-                  `await strapi.plugins.email.services.email.send({
+});`
+                } }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  CopyButton,
+                  {
+                    size: "S",
+                    variant: "ghost",
+                    onClick: () => handleCopyCode(
+                      `await strapi.plugins.email.services.email.send({
   to: 'user@example.com',
-  subject: 'Dein Betreff',
+  subject: 'Your Subject',
   templateId: ${selectedTemplate.templateReferenceId},
   data: {
     name: 'John Doe',
     code: '123456'
   }
 });`,
-                  "native"
-                ),
-                children: copiedCode === "native" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(outline.CheckIcon, {}),
-                  " Kopiert!"
-                ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(outline.ClipboardDocumentIcon, {}),
-                  " Kopieren"
-                ] })
-              }
-            )
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(CodeSection, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(CodeHeader, { children: /* @__PURE__ */ jsxRuntime.jsxs(CodeLabel, { variant: "omega", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(outline.CodeBracketIcon, { style: { width: 20, height: 20, color: theme$1.colors.primary[600] } }),
-            "MagicMail Plugin Service"
-          ] }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", style: { marginBottom: "16px" }, children: "Direkter Zugriff auf den MagicMail Service für erweiterte Optionen." }),
-          /* @__PURE__ */ jsxRuntime.jsxs(CodeBlockWrapper, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(CodeBlock, { dangerouslySetInnerHTML: {
-              __html: `<span class="comment">// Inside Strapi backend</span>
+                      "native"
+                    ),
+                    children: copiedCode === "native" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(outline.CheckIcon, {}),
+                      " Copied!"
+                    ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(outline.ClipboardDocumentIcon, {}),
+                      " Copy"
+                    ] })
+                  }
+                )
+              ] })
+            ] }) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Accordion.Item, { value: "plugin", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Trigger, { icon: () => /* @__PURE__ */ jsxRuntime.jsx(outline.CodeBracketIcon, { style: { width: 16, height: 16, color: theme$1.colors.primary[600] } }), children: "MagicMail Plugin Service" }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Content, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { padding: 4, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", style: { marginBottom: "16px", display: "block" }, children: "Direct access to the MagicMail service for advanced options." }),
+              /* @__PURE__ */ jsxRuntime.jsxs(CodeBlockWrapper, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(CodeBlock, { dangerouslySetInnerHTML: {
+                  __html: `<span class="comment">// Inside Strapi backend</span>
 <span class="keyword">await</span> strapi.<span class="function">plugin</span>(<span class="string">'magic-mail'</span>)
   .<span class="function">service</span>(<span class="string">'email-router'</span>)
   .<span class="function">send</span>({
@@ -5191,14 +5508,14 @@ const TemplateList = () => {
       <span class="keyword">code</span>: <span class="string">'123456'</span>
     }
   });`
-            } }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              CopyButton,
-              {
-                size: "S",
-                variant: "ghost",
-                onClick: () => handleCopyCode(
-                  `await strapi.plugin('magic-mail')
+                } }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  CopyButton,
+                  {
+                    size: "S",
+                    variant: "ghost",
+                    onClick: () => handleCopyCode(
+                      `await strapi.plugin('magic-mail')
   .service('email-router')
   .send({
     to: 'user@example.com',
@@ -5208,28 +5525,27 @@ const TemplateList = () => {
       code: '123456'
     }
   });`,
-                  "plugin"
-                ),
-                children: copiedCode === "plugin" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(outline.CheckIcon, {}),
-                  " Kopiert!"
-                ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(outline.ClipboardDocumentIcon, {}),
-                  " Kopieren"
-                ] })
-              }
-            )
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(CodeSection, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(CodeHeader, { children: /* @__PURE__ */ jsxRuntime.jsxs(CodeLabel, { variant: "omega", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(outline.DocumentArrowDownIcon, { style: { width: 20, height: 20, color: theme$1.colors.secondary[600] } }),
-            "REST API"
-          ] }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", style: { marginBottom: "16px" }, children: "Für externe Anwendungen, Frontend-Calls oder Postman Tests." }),
-          /* @__PURE__ */ jsxRuntime.jsxs(CodeBlockWrapper, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(CodeBlock, { dangerouslySetInnerHTML: {
-              __html: `curl -X POST http://localhost:1337/api/magic-mail/send \\
+                      "plugin"
+                    ),
+                    children: copiedCode === "plugin" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(outline.CheckIcon, {}),
+                      " Copied!"
+                    ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(outline.ClipboardDocumentIcon, {}),
+                      " Copy"
+                    ] })
+                  }
+                )
+              ] })
+            ] }) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Accordion.Item, { value: "rest", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Trigger, { icon: () => /* @__PURE__ */ jsxRuntime.jsx(outline.DocumentArrowDownIcon, { style: { width: 16, height: 16, color: theme$1.colors.secondary[600] } }), children: "REST API (cURL)" }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Content, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { padding: 4, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", style: { marginBottom: "16px", display: "block" }, children: "For external applications, frontend calls, or Postman tests." }),
+              /* @__PURE__ */ jsxRuntime.jsxs(CodeBlockWrapper, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(CodeBlock, { dangerouslySetInnerHTML: {
+                  __html: `curl -X POST http://localhost:1337/api/magic-mail/send \\
   -H <span class="string">"Content-Type: application/json"</span> \\
   -H <span class="string">"Authorization: Bearer YOUR_API_TOKEN"</span> \\
   -d <span class="string">'{
@@ -5240,14 +5556,14 @@ const TemplateList = () => {
       "code": "123456"
     }
   }'</span>`
-            } }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              CopyButton,
-              {
-                size: "S",
-                variant: "ghost",
-                onClick: () => handleCopyCode(
-                  `curl -X POST http://localhost:1337/api/magic-mail/send \\
+                } }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  CopyButton,
+                  {
+                    size: "S",
+                    variant: "ghost",
+                    onClick: () => handleCopyCode(
+                      `curl -X POST http://localhost:1337/api/magic-mail/send \\
   -H "Content-Type: application/json" \\
   -H "Authorization: Bearer YOUR_API_TOKEN" \\
   -d '{
@@ -5258,51 +5574,33 @@ const TemplateList = () => {
       "code": "123456"
     }
   }'`,
-                  "curl"
-                ),
-                children: copiedCode === "curl" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(outline.CheckIcon, {}),
-                  " Kopiert!"
-                ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(outline.ClipboardDocumentIcon, {}),
-                  " Kopieren"
-                ] })
-              }
-            )
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(InfoBox$1, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { alignItems: "center", justifyContent: "space-between", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", style: { color: theme$1.colors.primary[700] }, children: [
-            /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Template ID:" }),
-            " #",
-            selectedTemplate.templateReferenceId
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", style: { color: theme$1.colors.primary[700] }, children: [
-            /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Name:" }),
-            " ",
-            selectedTemplate.name
-          ] })
-        ] }) }),
-        !selectedTemplate.isActive && /* @__PURE__ */ jsxRuntime.jsxs(WarningBox, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(outline.SparklesIcon, { style: { width: 20, height: 20, color: theme$1.colors.warning[600] } }),
-          /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", style: { color: theme$1.colors.warning[700], fontWeight: 500 }, children: [
-            "Dieses Template ist derzeit ",
-            /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "INAKTIV" }),
-            " und wird nicht versendet."
+                      "curl"
+                    ),
+                    children: copiedCode === "curl" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(outline.CheckIcon, {}),
+                      " Copied!"
+                    ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(outline.ClipboardDocumentIcon, {}),
+                      " Copy"
+                    ] })
+                  }
+                )
+              ] })
+            ] }) })
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Footer, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { onClick: () => setShowCodeExample(false), variant: "secondary", children: "Schließen" }) })
+      /* @__PURE__ */ jsxRuntime.jsx(StyledModalFooter, { children: /* @__PURE__ */ jsxRuntime.jsx(StyledButtons.TertiaryButton, { onClick: () => setShowCodeExample(false), children: "Close" }) })
     ] }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Root, { open: showTestSendModal, onOpenChange: setShowTestSendModal, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Modal.Content, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Title, { children: "Send Test Email" }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Body, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 4, children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", fontWeight: "bold", style: { marginBottom: "8px", display: "block" }, children: "Template" }),
-          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", textColor: "neutral600", children: selectedTemplate?.name })
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Root, { open: showTestSendModal, onOpenChange: setShowTestSendModal, children: /* @__PURE__ */ jsxRuntime.jsxs(StyledModalContent, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(StyledModalHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Title, { children: "Send Test Email" }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(StyledModalBody, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(ModalField, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ModalLabel, { children: "Template" }),
+          /* @__PURE__ */ jsxRuntime.jsx(ModalTemplateInfo, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", children: selectedTemplate?.name }) })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", fontWeight: "bold", style: { marginBottom: "8px", display: "block" }, children: "Recipient Email *" }),
+        /* @__PURE__ */ jsxRuntime.jsxs(ModalField, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ModalLabel, { children: "Recipient Email *" }),
           /* @__PURE__ */ jsxRuntime.jsx(
             designSystem.TextInput,
             {
@@ -5313,20 +5611,11 @@ const TemplateList = () => {
             }
           )
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", fontWeight: "bold", style: { marginBottom: "8px", display: "block" }, children: "Send from Account (optional)" }),
+        /* @__PURE__ */ jsxRuntime.jsxs(ModalField, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ModalLabel, { children: "Send from Account (optional)" }),
           /* @__PURE__ */ jsxRuntime.jsxs(
-            "select",
+            StyledSelect,
             {
-              style: {
-                width: "100%",
-                padding: "8px 12px",
-                borderRadius: "4px",
-                border: "1px solid #dcdce4",
-                fontSize: "14px",
-                backgroundColor: "white",
-                cursor: "pointer"
-              },
               value: testAccount,
               onChange: (e) => setTestAccount(e.target.value),
               children: [
@@ -5340,15 +5629,19 @@ const TemplateList = () => {
               ]
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", style: { marginTop: "8px", display: "block" }, children: "Leave empty to use smart routing" })
-        ] })
-      ] }) }),
-      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Modal.Footer, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { onClick: () => setShowTestSendModal(false), variant: "tertiary", children: "Cancel" }),
-        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Button, { onClick: sendTestEmail, variant: "default", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(outline.PaperAirplaneIcon, { style: { width: 16, height: 16, marginRight: "6px" } }),
-          "Send Test Email"
+          /* @__PURE__ */ jsxRuntime.jsx(ModalHint, { children: "Leave empty to use smart routing" })
         ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(StyledModalFooter, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(StyledButtons.TertiaryButton, { onClick: () => setShowTestSendModal(false), children: "Cancel" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          StyledButtons.GradientButton,
+          {
+            onClick: sendTestEmail,
+            startIcon: /* @__PURE__ */ jsxRuntime.jsx(outline.PaperAirplaneIcon, { style: { width: 16, height: 16 } }),
+            children: "Send Test Email"
+          }
+        )
       ] })
     ] }) }),
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -6977,18 +7270,9 @@ const Analytics = () => {
         /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "delta", fontWeight: "bold", style: { marginBottom: "12px", display: "block" }, children: "Analytics Available in Premium" }),
         /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", textColor: "neutral600", style: { marginBottom: "32px", lineHeight: "1.6", display: "block" }, children: "Upgrade to Premium to unlock email analytics, tracking, open rates, click rates, and detailed reports about your email campaigns." }),
         /* @__PURE__ */ jsxRuntime.jsx(
-          designSystem.Button,
+          StyledButtons.GradientButton,
           {
             onClick: () => window.location.href = "/admin/settings/magic-mail/upgrade",
-            variant: "default",
-            style: {
-              background: "linear-gradient(135deg, #8B5CF6, #7C3AED)",
-              color: "white",
-              border: "none",
-              padding: "12px 24px",
-              fontSize: "15px",
-              fontWeight: "600"
-            },
             children: "View Upgrade Plans"
           }
         )
@@ -7046,10 +7330,9 @@ const Analytics = () => {
           }
         ),
         emailLogs.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
-          designSystem.Button,
+          StyledButtons.DangerButton,
           {
-            variant: "danger-light",
-            startIcon: /* @__PURE__ */ jsxRuntime.jsx(outline.TrashIcon, {}),
+            startIcon: /* @__PURE__ */ jsxRuntime.jsx(outline.TrashIcon, { style: { width: 16, height: 16 } }),
             onClick: () => setShowClearDialog(true),
             disabled: isDeleting,
             children: "Clear All"
@@ -7114,21 +7397,19 @@ const Analytics = () => {
       ] }) }),
       /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "flex-end", gap: 2, children: [
         /* @__PURE__ */ jsxRuntime.jsx(
-          designSystem.Button,
+          StyledButtons.TertiaryButton,
           {
-            variant: "tertiary",
             onClick: () => setShowClearDialog(false),
             disabled: isDeleting,
             children: "Cancel"
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
-          designSystem.Button,
+          StyledButtons.DangerButton,
           {
-            variant: "danger",
             onClick: handleClearAll,
             loading: isDeleting,
-            startIcon: /* @__PURE__ */ jsxRuntime.jsx(outline.TrashIcon, {}),
+            startIcon: /* @__PURE__ */ jsxRuntime.jsx(outline.TrashIcon, { style: { width: 16, height: 16 } }),
             children: "Delete All"
           }
         )
@@ -7344,20 +7625,88 @@ const ConnectedCard = styled__default.default(designSystem.Box)`
   text-align: center;
 `;
 const InfoBox = styled__default.default(designSystem.Box)`
-  background: ${colors.primaryLight};
-  border: 1px solid ${colors.primary}33;
+  background: linear-gradient(135deg, ${theme$3.colors.primary[50]} 0%, ${colors.whatsappLight} 100%);
+  border: 1px solid ${theme$3.colors.primary[200]};
   border-radius: 12px;
-  padding: 20px;
-  margin: 16px 0;
+  padding: 24px;
+  margin: 20px 0;
 `;
 const TestSection = styled__default.default(designSystem.Box)`
-  background: ${colors.neutralLight};
-  border-radius: 12px;
+  background: linear-gradient(135deg, ${colors.whatsappLight} 0%, #E8F5E9 100%);
+  border: 1px solid ${colors.whatsapp}40;
+  border-radius: 16px;
   padding: 24px;
   margin-top: 24px;
 `;
+const WhatsAppInput = styled__default.default.input`
+  width: 100%;
+  padding: 14px 16px;
+  border: 2px solid ${(props) => props.theme.colors.neutral200};
+  border-radius: 12px;
+  font-size: 15px;
+  background: white;
+  color: ${(props) => props.theme.colors.neutral800};
+  transition: all 0.2s ease;
+  box-sizing: border-box;
+  
+  &:focus {
+    outline: none;
+    border-color: ${colors.whatsapp};
+    box-shadow: 0 0 0 3px ${colors.whatsapp}20;
+  }
+  
+  &::placeholder {
+    color: ${(props) => props.theme.colors.neutral400};
+  }
+`;
+const WhatsAppTextarea = styled__default.default.textarea`
+  width: 100%;
+  padding: 14px 16px;
+  border: 2px solid ${(props) => props.theme.colors.neutral200};
+  border-radius: 12px;
+  font-size: 15px;
+  background: white;
+  color: ${(props) => props.theme.colors.neutral800};
+  transition: all 0.2s ease;
+  box-sizing: border-box;
+  resize: vertical;
+  min-height: 80px;
+  font-family: inherit;
+  
+  &:focus {
+    outline: none;
+    border-color: ${colors.whatsapp};
+    box-shadow: 0 0 0 3px ${colors.whatsapp}20;
+  }
+  
+  &::placeholder {
+    color: ${(props) => props.theme.colors.neutral400};
+  }
+`;
+const InputLabel = styled__default.default.label`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+  font-weight: 600;
+  color: ${colors.whatsappDark};
+  margin-bottom: 8px;
+`;
+const InputHint = styled__default.default.span`
+  font-size: 12px;
+  color: ${(props) => props.theme.colors.neutral500};
+  margin-top: 6px;
+  display: block;
+`;
+const PhoneSymbol = styled__default.default.span`
+  font-size: 16px;
+  font-weight: 700;
+`;
+const MessageSymbol = styled__default.default.span`
+  font-size: 16px;
+`;
 const UseCaseCard = styled__default.default(designSystem.Box)`
-  background: linear-gradient(135deg, ${colors.primaryLight}, ${colors.whatsappLight});
+  background: linear-gradient(135deg, ${colors.whatsappLight}, ${theme$3.colors.primary[50]});
   border: 2px solid ${colors.whatsapp};
   border-radius: 16px;
   padding: 24px;
@@ -7366,7 +7715,59 @@ const UseCaseCard = styled__default.default(designSystem.Box)`
 const ButtonRow = styled__default.default(designSystem.Flex)`
   margin-top: 32px;
   padding-top: 24px;
-  border-top: 1px solid ${colors.border};
+  border-top: 1px solid ${(props) => props.theme.colors.neutral200};
+`;
+const AlertBox = styled__default.default(designSystem.Box)`
+  background: ${theme$3.colors.primary[50]};
+  border: 1px solid ${theme$3.colors.primary[200]};
+  border-radius: 12px;
+  padding: 16px 20px;
+  margin-top: 20px;
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+`;
+const AlertIcon = styled__default.default.div`
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background: ${theme$3.colors.primary[500]};
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  font-weight: bold;
+  flex-shrink: 0;
+`;
+const SuccessBox = styled__default.default(designSystem.Box)`
+  background: ${theme$3.colors.success[50]};
+  border: 1px solid ${theme$3.colors.success[200]};
+  border-radius: 12px;
+  padding: 16px 20px;
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+`;
+const SuccessIcon = styled__default.default.div`
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background: ${theme$3.colors.success[500]};
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+`;
+const WhatsAppButton = styled__default.default(StyledButtons.GradientButton)`
+  && {
+    background: linear-gradient(135deg, ${colors.whatsapp} 0%, ${colors.whatsappDark} 100%) !important;
+    
+    &:hover:not(:disabled) {
+      background: linear-gradient(135deg, ${colors.whatsappDark} 0%, ${colors.whatsapp} 100%) !important;
+    }
+  }
 `;
 const NotInstalledCard = styled__default.default(designSystem.Box)`
   background: linear-gradient(135deg, #FEF3C7, #FEE2E2);
@@ -7600,7 +8001,13 @@ const WhatsAppPage = () => {
     currentStep === 1 && /* @__PURE__ */ jsxRuntime.jsxs(ContentCard, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "beta", fontWeight: "bold", style: { display: "block", marginBottom: "8px" }, children: "Check Installation" }),
       /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", textColor: "neutral600", style: { display: "block", marginBottom: "24px" }, children: "First, we need to verify that the required dependencies are installed." }),
-      isAvailable ? /* @__PURE__ */ jsxRuntime.jsx(designSystem.Alert, { variant: "success", title: "[SUCCESS] Dependencies Installed", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", style: { display: "block" }, children: "Baileys library is installed and ready to use. You can proceed to connect your WhatsApp account." }) }) : /* @__PURE__ */ jsxRuntime.jsxs(NotInstalledCard, { children: [
+      isAvailable ? /* @__PURE__ */ jsxRuntime.jsxs(SuccessBox, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(SuccessIcon, { children: /* @__PURE__ */ jsxRuntime.jsx(icons.Check, { style: { width: 14, height: 14 } }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", fontWeight: "semiBold", style: { display: "block", marginBottom: "4px", color: theme$3.colors.success[700] }, children: "Dependencies Installed" }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", children: "Baileys library is installed and ready to use. You can proceed to connect your WhatsApp account." })
+        ] })
+      ] }) : /* @__PURE__ */ jsxRuntime.jsxs(NotInstalledCard, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "beta", fontWeight: "bold", style: { display: "block", marginBottom: "12px", color: colors.danger }, children: "[WARNING] Dependencies Not Installed" }),
         /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", textColor: "neutral600", style: { display: "block", marginBottom: "16px" }, children: "The WhatsApp integration requires additional dependencies. Please install them:" }),
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -7615,26 +8022,24 @@ const WhatsAppPage = () => {
               border: `1px solid ${colors.border}`,
               marginBottom: "16px"
             },
-            children: "npm install @whiskeysockets/baileys pino qrcode"
+            children: "npm install baileys pino qrcode"
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", children: "After installing, restart your Strapi server and refresh this page." })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs(ButtonRow, { justifyContent: "flex-end", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(ButtonRow, { justifyContent: "flex-end", gap: 3, children: [
         /* @__PURE__ */ jsxRuntime.jsx(
-          designSystem.Button,
+          StyledButtons.SecondaryButton,
           {
             onClick: () => {
               checkAvailability();
             },
-            variant: "secondary",
             startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.ArrowClockwise, {}),
-            style: { marginRight: "12px" },
             children: "Refresh"
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
-          designSystem.Button,
+          StyledButtons.GradientButton,
           {
             onClick: () => setCurrentStep(2),
             disabled: !isAvailable,
@@ -7648,31 +8053,35 @@ const WhatsAppPage = () => {
       /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "beta", fontWeight: "bold", style: { display: "block", marginBottom: "8px" }, children: "Connect Your WhatsApp" }),
       /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", textColor: "neutral600", style: { display: "block", marginBottom: "24px" }, children: "Click the button below to start the connection process. A QR code will be generated for you to scan." }),
       /* @__PURE__ */ jsxRuntime.jsxs(InfoBox, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "delta", fontWeight: "bold", style: { display: "block", marginBottom: "12px" }, children: "How it works" }),
-        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 2, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", children: '1. Click "Connect WhatsApp" to generate a QR code' }),
-          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", children: "2. Open WhatsApp on your phone" }),
-          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", children: "3. Go to Settings - Linked Devices - Link a Device" }),
-          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", children: "4. Scan the QR code with your phone" })
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "delta", fontWeight: "bold", style: { display: "block", marginBottom: "16px", color: theme$3.colors.primary[700] }, children: "How it works" }),
+        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 3, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", textColor: "neutral700", children: '1. Click "Connect WhatsApp" to generate a QR code' }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", textColor: "neutral700", children: "2. Open WhatsApp on your phone" }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", textColor: "neutral700", children: "3. Go to Settings - Linked Devices - Link a Device" }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", textColor: "neutral700", children: "4. Scan the QR code with your phone" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(AlertBox, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(AlertIcon, { children: "i" }),
+        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", fontWeight: "semiBold", style: { display: "block", marginBottom: "4px" }, children: "Session Persistence" }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", children: "Your WhatsApp session will be saved. You won't need to scan the QR code again unless you manually disconnect or your session expires." })
         ] })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Alert, { variant: "default", title: "Session Persistence", style: { marginTop: "16px" }, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", children: "Your WhatsApp session will be saved. You won't need to scan the QR code again unless you manually disconnect or your session expires." }) }),
       /* @__PURE__ */ jsxRuntime.jsxs(ButtonRow, { justifyContent: "space-between", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
-          designSystem.Button,
+          StyledButtons.TertiaryButton,
           {
             onClick: () => setCurrentStep(1),
-            variant: "tertiary",
             startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.ArrowLeft, {}),
             children: "Back"
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
-          designSystem.Button,
+          WhatsAppButton,
           {
             onClick: handleConnect,
             loading: connecting,
-            style: { background: colors.whatsapp },
             startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.Play, {}),
             children: "Connect WhatsApp"
           }
@@ -7689,28 +8098,29 @@ const WhatsAppPage = () => {
         /* @__PURE__ */ jsxRuntime.jsx(SpinningLoader, { style: { width: "40px", height: "40px" } }),
         /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", children: "Generating QR code..." })
       ] }) }),
-      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Alert, { variant: "default", title: "Instructions", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", children: "1. Open WhatsApp on your phone" }),
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", children: "2. Tap Menu or Settings" }),
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", children: '3. Select "Linked Devices"' }),
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", children: '4. Tap "Link a Device"' }),
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", children: "5. Point your phone camera at this QR code" })
+      /* @__PURE__ */ jsxRuntime.jsxs(InfoBox, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "delta", fontWeight: "bold", style: { display: "block", marginBottom: "16px", color: theme$3.colors.primary[700] }, children: "Instructions" }),
+        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 2, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", textColor: "neutral700", children: "1. Open WhatsApp on your phone" }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", textColor: "neutral700", children: "2. Tap Menu or Settings" }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", textColor: "neutral700", children: '3. Select "Linked Devices"' }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", textColor: "neutral700", children: '4. Tap "Link a Device"' }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", textColor: "neutral700", children: "5. Point your phone camera at this QR code" })
+        ] })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs(ButtonRow, { justifyContent: "space-between", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
-          designSystem.Button,
+          StyledButtons.TertiaryButton,
           {
             onClick: () => setCurrentStep(2),
-            variant: "tertiary",
             startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.ArrowLeft, {}),
             children: "Back"
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
-          designSystem.Button,
+          StyledButtons.SecondaryButton,
           {
             onClick: handleConnect,
-            variant: "secondary",
             startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.ArrowClockwise, {}),
             children: "Refresh QR"
           }
@@ -7731,40 +8141,48 @@ const WhatsAppPage = () => {
       /* @__PURE__ */ jsxRuntime.jsxs(ContentCard, { style: { marginTop: "24px" }, children: [
         /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "beta", fontWeight: "bold", style: { display: "block", marginBottom: "8px" }, children: "Send Test Message" }),
         /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", textColor: "neutral600", style: { display: "block", marginBottom: "24px" }, children: "Test your WhatsApp connection by sending a message." }),
-        /* @__PURE__ */ jsxRuntime.jsx(TestSection, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 4, children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: "Phone Number" }),
+        /* @__PURE__ */ jsxRuntime.jsxs(TestSection, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { style: { marginBottom: "20px" }, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(InputLabel, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(PhoneSymbol, { children: "+" }),
+              "Phone Number"
+            ] }),
             /* @__PURE__ */ jsxRuntime.jsx(
-              designSystem.TextInput,
+              WhatsAppInput,
               {
-                placeholder: "49123456789 (with country code, no +)",
+                placeholder: "49123456789",
                 value: testPhone,
                 onChange: (e) => setTestPhone(e.target.value)
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Hint, { children: "Enter phone number with country code (e.g., 49 for Germany)" })
+            /* @__PURE__ */ jsxRuntime.jsx(InputHint, { children: "Enter with country code, without + (e.g., 49 for Germany, 1 for USA)" })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: "Message (optional)" }),
+          /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { style: { marginBottom: "24px" }, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(InputLabel, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(MessageSymbol, { children: "@" }),
+              "Message (optional)"
+            ] }),
             /* @__PURE__ */ jsxRuntime.jsx(
-              designSystem.TextInput,
+              WhatsAppTextarea,
               {
-                placeholder: "Leave empty for default test message",
+                placeholder: "Type your message here... or leave empty for default test message",
                 value: testMessage,
-                onChange: (e) => setTestMessage(e.target.value)
+                onChange: (e) => setTestMessage(e.target.value),
+                rows: 3
               }
             )
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx(
-            designSystem.Button,
+            WhatsAppButton,
             {
               onClick: handleSendTest,
               loading: sendingTest,
-              style: { background: colors.whatsapp },
+              disabled: !testPhone,
+              style: { width: "100%" },
               children: "Send Test Message"
             }
           )
-        ] }) }),
+        ] }),
         /* @__PURE__ */ jsxRuntime.jsx(designSystem.Divider, { style: { margin: "24px 0" } }),
         /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "beta", fontWeight: "bold", style: { display: "block", marginBottom: "8px" }, children: "Using WhatsApp in Your Code" }),
         /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", textColor: "neutral600", style: { display: "block", marginBottom: "16px" }, children: "Use the WhatsApp service programmatically in your Strapi code." }),
@@ -7793,17 +8211,16 @@ await whatsapp.sendTemplateMessage('49123456789', 'welcome', {
 });` })
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsxs(ButtonRow, { justifyContent: "space-between", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(ButtonRow, { justifyContent: "space-between", alignItems: "center", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
-            designSystem.Button,
+            StyledButtons.DangerButton,
             {
               onClick: handleDisconnect,
-              variant: "danger",
               startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.Cross, {}),
               children: "Disconnect WhatsApp"
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Badge, { backgroundColor: "success600", textColor: "neutral0", children: "FREE - No API costs!" })
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Badge, { backgroundColor: "success600", textColor: "neutral0", style: { padding: "8px 16px", fontSize: "13px" }, children: "FREE - No API costs!" })
         ] })
       ] })
     ] })
@@ -7912,6 +8329,41 @@ const CloseButton = styled__default.default.button`
     transform: scale(0.95);
   }
 `;
+const GradientButton = styled__default.default(designSystem.Button)`
+  && {
+    background: linear-gradient(135deg, #0EA5E9 0%, #A855F7 100%);
+    color: white;
+    font-weight: 600;
+    border: none;
+    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.4);
+    padding: 12px 24px;
+    min-height: 44px;
+    
+    &:hover:not(:disabled) {
+      background: linear-gradient(135deg, #0284C7 0%, #9333EA 100%);
+      box-shadow: 0 6px 16px rgba(14, 165, 233, 0.5);
+    }
+    
+    &:disabled {
+      opacity: 0.6;
+      cursor: not-allowed;
+    }
+  }
+`;
+styled__default.default(designSystem.Button)`
+  && {
+    background: #f0f9ff;
+    color: #0EA5E9;
+    font-weight: 600;
+    border: 2px solid #0EA5E9;
+    padding: 12px 24px;
+    min-height: 44px;
+    
+    &:hover:not(:disabled) {
+      background: #e0f2fe;
+    }
+  }
+`;
 const ToggleButton = styled__default.default.button`
   background: none;
   border: none;
@@ -8182,37 +8634,23 @@ const LicenseGuard = ({ children }) => {
           /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", marginTop: 2, children: "Loading admin user data..." })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { gap: 3, justifyContent: "center", style: { marginTop: "16px" }, children: useExistingKey ? /* @__PURE__ */ jsxRuntime.jsx(
-          designSystem.Button,
+          GradientButton,
           {
             type: "submit",
             size: "L",
             startIcon: /* @__PURE__ */ jsxRuntime.jsx(outline.CheckIcon, { style: { width: 20, height: 20 } }),
             loading: isCreating,
             disabled: isCreating || !existingLicenseKey.trim() || !existingEmail.trim(),
-            style: {
-              background: "linear-gradient(135deg, #0EA5E9 0%, #A855F7 100%)",
-              color: "white",
-              fontWeight: "600",
-              border: "none",
-              boxShadow: "0 4px 12px rgba(14, 165, 233, 0.4)"
-            },
             children: "Validate License"
           }
         ) : /* @__PURE__ */ jsxRuntime.jsx(
-          designSystem.Button,
+          GradientButton,
           {
             type: "submit",
             size: "L",
             startIcon: /* @__PURE__ */ jsxRuntime.jsx(outline.CheckIcon, { style: { width: 20, height: 20 } }),
             loading: isCreating,
             disabled: isCreating || !adminUser,
-            style: {
-              background: "linear-gradient(135deg, #0EA5E9 0%, #A855F7 100%)",
-              color: "white",
-              fontWeight: "600",
-              border: "none",
-              boxShadow: "0 4px 12px rgba(14, 165, 233, 0.4)"
-            },
             children: "Activate License"
           }
         ) })