strapi-plugin-magic-mail 2.3.10 → 2.4.0

package/dist/_chunks/{Settings-Ca5UE3c1.mjs → Settings-Cc-hhoLA.mjs}

@@ -1,12 +1,10 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useState, useEffect } from "react";
-import { Loader, Box, Alert, Flex, Typography, Button, Badge, Accordion } from "@strapi/design-system";
+import { Loader, Box, Alert, Flex, Typography, Badge, Accordion } from "@strapi/design-system";
 import { useFetchClient, useNotification } from "@strapi/strapi/admin";
 import { ArrowPathIcon, DocumentDuplicateIcon, ArrowDownTrayIcon, UserIcon, ShieldCheckIcon, SparklesIcon, ChartBarIcon } from "@heroicons/react/24/outline";
 import styled, { css, keyframes } from "styled-components";
-const theme = {
-  borderRadius: { lg: "12px" }
-};
+import { S as SecondaryButton, W as WhiteOutlineButton } from "./StyledButtons-nt2C730e.mjs";
 const fadeIn = keyframes`
   from { opacity: 0; transform: translateY(10px); }
   to { opacity: 1; transform: translateY(0); }
@@ -30,7 +28,7 @@ const StickySaveBar = styled(Box)`
 `;
 const LicenseKeyBanner = styled(Box)`
   background: linear-gradient(135deg, #0EA5E9 0%, #A855F7 100%);
-  border-radius: ${theme.borderRadius.lg};
+  border-radius: 12px;
   padding: 28px 32px;
   color: white;
   position: relative;
@@ -68,7 +66,7 @@ const LoaderContainer = styled(Flex)`
   flex-direction: column;
   gap: 16px;
 `;
-const LicensePage = () => {
+const LicenseDetailsPage = () => {
   const { get } = useFetchClient();
   const { toggleNotification } = useNotification();
   const [loading, setLoading] = useState(true);
@@ -110,27 +108,27 @@ const LicensePage = () => {
       const lastName = data2.lastName || "";
       const fullName = `${firstName} ${lastName}`.trim() || "N/A";
       const content = `MagicMail - Email Business Suite - License Key
-═══════════════════════════════════════
+===============================================
 
 License Key: ${licenseKey}
 
 License Holder Information:
-──────────────────────────────────────
+----------------------------------------------
 Name:        ${fullName}
 Email:       ${email}
 
 License Status:
-──────────────────────────────────────
+----------------------------------------------
 Status:      ${data2.isActive ? "ACTIVE" : "INACTIVE"}
 Expires:     ${data2.expiresAt ? new Date(data2.expiresAt).toLocaleDateString() : "Never"}
 
 Features:
-──────────────────────────────────────
+----------------------------------------------
 Premium:     ${data2.features?.premium ? "Enabled" : "Disabled"}
 Advanced:    ${data2.features?.advanced ? "Enabled" : "Disabled"}
 Enterprise:  ${data2.features?.enterprise ? "Enabled" : "Disabled"}
 
-═══════════════════════════════════════
+===============================================
 Generated:   ${(/* @__PURE__ */ new Date()).toLocaleString()}
 `;
       const blob = new Blob([content], { type: "text/plain" });
@@ -172,17 +170,10 @@ Generated:   ${(/* @__PURE__ */ new Date()).toLocaleString()}
         /* @__PURE__ */ jsx(Typography, { variant: "epsilon", textColor: "neutral600", children: "View your MagicMail plugin license" })
       ] }),
       /* @__PURE__ */ jsx(
-        Button,
+        SecondaryButton,
         {
-          startIcon: /* @__PURE__ */ jsx(ArrowPathIcon, { style: { width: 20, height: 20 } }),
+          startIcon: /* @__PURE__ */ jsx(ArrowPathIcon, { style: { width: 18, height: 18 } }),
           onClick: fetchLicenseStatus,
-          size: "L",
-          style: {
-            background: "linear-gradient(135deg, #0EA5E9 0%, #A855F7 100%)",
-            color: "white",
-            fontWeight: "600",
-            border: "none"
-          },
           children: "Refresh Status"
         }
       )
@@ -195,34 +186,20 @@ Generated:   ${(/* @__PURE__ */ new Date()).toLocaleString()}
           /* @__PURE__ */ jsx(Typography, { style: { color: "white", fontFamily: "monospace", fontSize: "28px", fontWeight: "bold", wordBreak: "break-all", marginBottom: "16px" }, children: data.licenseKey }),
           /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
             /* @__PURE__ */ jsx(
-              Button,
+              WhiteOutlineButton,
               {
                 onClick: handleCopyLicenseKey,
                 startIcon: /* @__PURE__ */ jsx(DocumentDuplicateIcon, { style: { width: 16, height: 16 } }),
                 size: "S",
-                variant: "secondary",
-                style: {
-                  backgroundColor: "rgba(255,255,255,0.2)",
-                  color: "white",
-                  border: "1px solid rgba(255,255,255,0.3)",
-                  fontWeight: "600"
-                },
                 children: "Copy Key"
               }
             ),
             /* @__PURE__ */ jsx(
-              Button,
+              WhiteOutlineButton,
               {
                 onClick: handleDownloadLicenseKey,
                 startIcon: /* @__PURE__ */ jsx(ArrowDownTrayIcon, { style: { width: 16, height: 16 } }),
                 size: "S",
-                variant: "secondary",
-                style: {
-                  backgroundColor: "rgba(255,255,255,0.2)",
-                  color: "white",
-                  border: "1px solid rgba(255,255,255,0.3)",
-                  fontWeight: "600"
-                },
                 children: "Download as TXT"
               }
             )
@@ -282,15 +259,10 @@ Generated:   ${(/* @__PURE__ */ new Date()).toLocaleString()}
                 {
                   backgroundColor: data.features?.premium ? "success100" : "neutral100",
                   textColor: data.features?.premium ? "success700" : "neutral600",
-                  style: {
-                    fontSize: "13px",
-                    fontWeight: "700",
-                    padding: "8px 16px",
-                    border: data.features?.premium ? "2px solid #dcfce7" : "2px solid #e5e7eb"
-                  },
+                  style: { fontSize: "13px", fontWeight: "700", padding: "8px 16px" },
                   children: [
-                    data.features?.premium ? "✓" : "✗",
-                    " PREMIUM FEATURES"
+                    data.features?.premium ? "[OK]" : "[X]",
+                    " PREMIUM"
                   ]
                 }
               ),
@@ -299,15 +271,10 @@ Generated:   ${(/* @__PURE__ */ new Date()).toLocaleString()}
                 {
                   backgroundColor: data.features?.advanced ? "primary100" : "neutral100",
                   textColor: data.features?.advanced ? "primary700" : "neutral600",
-                  style: {
-                    fontSize: "13px",
-                    fontWeight: "700",
-                    padding: "8px 16px",
-                    border: data.features?.advanced ? "2px solid #bae6fd" : "2px solid #e5e7eb"
-                  },
+                  style: { fontSize: "13px", fontWeight: "700", padding: "8px 16px" },
                   children: [
-                    data.features?.advanced ? "✓" : "✗",
-                    " ADVANCED FEATURES"
+                    data.features?.advanced ? "[OK]" : "[X]",
+                    " ADVANCED"
                   ]
                 }
               ),
@@ -316,48 +283,37 @@ Generated:   ${(/* @__PURE__ */ new Date()).toLocaleString()}
                 {
                   backgroundColor: data.features?.enterprise ? "secondary100" : "neutral100",
                   textColor: data.features?.enterprise ? "secondary700" : "neutral600",
-                  style: {
-                    fontSize: "13px",
-                    fontWeight: "700",
-                    padding: "8px 16px",
-                    border: data.features?.enterprise ? "2px solid #ddd6fe" : "2px solid #e5e7eb"
-                  },
+                  style: { fontSize: "13px", fontWeight: "700", padding: "8px 16px" },
                   children: [
-                    data.features?.enterprise ? "✓" : "✗",
-                    " ENTERPRISE FEATURES"
+                    data.features?.enterprise ? "[OK]" : "[X]",
+                    " ENTERPRISE"
                   ]
                 }
               )
             ] }),
-            data.features?.premium && /* @__PURE__ */ jsxs(Box, { marginBottom: 5, padding: 5, background: "success50", hasRadius: true, style: { border: "2px solid #dcfce7" }, children: [
-              /* @__PURE__ */ jsx(Typography, { variant: "delta", fontWeight: "bold", textColor: "success700", style: { marginBottom: "16px", display: "flex", alignItems: "center", gap: "8px" }, children: "✨ Premium Features Active" }),
+            data.features?.premium && /* @__PURE__ */ jsxs(Box, { marginBottom: 5, padding: 5, background: "success50", hasRadius: true, children: [
+              /* @__PURE__ */ jsx(Typography, { variant: "delta", fontWeight: "bold", textColor: "success700", style: { marginBottom: "16px" }, children: "Premium Features Active" }),
               /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 2, children: [
-                /* @__PURE__ */ jsx(Typography, { variant: "omega", textColor: "success700", style: { fontSize: "14px", display: "flex", alignItems: "center", gap: "8px" }, children: "✓ Gmail OAuth 2.0 (Unlimited accounts)" }),
-                /* @__PURE__ */ jsx(Typography, { variant: "omega", textColor: "success700", style: { fontSize: "14px", display: "flex", alignItems: "center", gap: "8px" }, children: "✓ Microsoft 365 OAuth Integration" }),
-                /* @__PURE__ */ jsx(Typography, { variant: "omega", textColor: "success700", style: { fontSize: "14px", display: "flex", alignItems: "center", gap: "8px" }, children: "✓ Yahoo Mail OAuth" }),
-                /* @__PURE__ */ jsx(Typography, { variant: "omega", textColor: "success700", style: { fontSize: "14px", display: "flex", alignItems: "center", gap: "8px" }, children: "✓ SendGrid & Mailgun Integration" }),
-                /* @__PURE__ */ jsx(Typography, { variant: "omega", textColor: "success700", style: { fontSize: "14px", display: "flex", alignItems: "center", gap: "8px" }, children: "✓ Smart Routing Rules (Unlimited)" }),
-                /* @__PURE__ */ jsx(Typography, { variant: "omega", textColor: "success700", style: { fontSize: "14px", display: "flex", alignItems: "center", gap: "8px" }, children: "✓ Email Analytics Dashboard" })
+                /* @__PURE__ */ jsx(Typography, { variant: "omega", textColor: "success700", children: "[OK] Gmail OAuth 2.0" }),
+                /* @__PURE__ */ jsx(Typography, { variant: "omega", textColor: "success700", children: "[OK] Microsoft 365 OAuth" }),
+                /* @__PURE__ */ jsx(Typography, { variant: "omega", textColor: "success700", children: "[OK] Smart Routing Rules" }),
+                /* @__PURE__ */ jsx(Typography, { variant: "omega", textColor: "success700", children: "[OK] Email Analytics" })
               ] })
             ] }),
-            data.features?.advanced && /* @__PURE__ */ jsxs(Box, { marginBottom: 5, padding: 5, background: "primary50", hasRadius: true, style: { border: "2px solid #bae6fd" }, children: [
-              /* @__PURE__ */ jsx(Typography, { variant: "delta", fontWeight: "bold", textColor: "primary700", style: { marginBottom: "16px", display: "flex", alignItems: "center", gap: "8px" }, children: "🚀 Advanced Features Active" }),
+            data.features?.advanced && /* @__PURE__ */ jsxs(Box, { marginBottom: 5, padding: 5, background: "primary50", hasRadius: true, children: [
+              /* @__PURE__ */ jsx(Typography, { variant: "delta", fontWeight: "bold", textColor: "primary700", style: { marginBottom: "16px" }, children: "Advanced Features Active" }),
               /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 2, children: [
-                /* @__PURE__ */ jsx(Typography, { variant: "omega", textColor: "primary700", style: { fontSize: "14px", display: "flex", alignItems: "center", gap: "8px" }, children: "✓ DKIM Signing for SMTP" }),
-                /* @__PURE__ */ jsx(Typography, { variant: "omega", textColor: "primary700", style: { fontSize: "14px", display: "flex", alignItems: "center", gap: "8px" }, children: "✓ Email Designer Integration" }),
-                /* @__PURE__ */ jsx(Typography, { variant: "omega", textColor: "primary700", style: { fontSize: "14px", display: "flex", alignItems: "center", gap: "8px" }, children: "✓ Priority Email Headers" }),
-                /* @__PURE__ */ jsx(Typography, { variant: "omega", textColor: "primary700", style: { fontSize: "14px", display: "flex", alignItems: "center", gap: "8px" }, children: "✓ List-Unsubscribe Headers (GDPR)" }),
-                /* @__PURE__ */ jsx(Typography, { variant: "omega", textColor: "primary700", style: { fontSize: "14px", display: "flex", alignItems: "center", gap: "8px" }, children: "✓ Enhanced Security Validation" })
+                /* @__PURE__ */ jsx(Typography, { variant: "omega", textColor: "primary700", children: "[OK] DKIM Signing" }),
+                /* @__PURE__ */ jsx(Typography, { variant: "omega", textColor: "primary700", children: "[OK] Email Designer" }),
+                /* @__PURE__ */ jsx(Typography, { variant: "omega", textColor: "primary700", children: "[OK] List-Unsubscribe Headers" })
               ] })
             ] }),
-            data.features?.enterprise && /* @__PURE__ */ jsxs(Box, { padding: 5, background: "secondary50", hasRadius: true, style: { border: "2px solid #ddd6fe" }, children: [
-              /* @__PURE__ */ jsx(Typography, { variant: "delta", fontWeight: "bold", textColor: "secondary700", style: { marginBottom: "16px", display: "flex", alignItems: "center", gap: "8px" }, children: "🏢 Enterprise Features Active" }),
+            data.features?.enterprise && /* @__PURE__ */ jsxs(Box, { padding: 5, background: "secondary50", hasRadius: true, children: [
+              /* @__PURE__ */ jsx(Typography, { variant: "delta", fontWeight: "bold", textColor: "secondary700", style: { marginBottom: "16px" }, children: "Enterprise Features Active" }),
               /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 2, children: [
-                /* @__PURE__ */ jsx(Typography, { variant: "omega", textColor: "secondary700", style: { fontSize: "14px", display: "flex", alignItems: "center", gap: "8px" }, children: "✓ Multi-tenant Email Management" }),
-                /* @__PURE__ */ jsx(Typography, { variant: "omega", textColor: "secondary700", style: { fontSize: "14px", display: "flex", alignItems: "center", gap: "8px" }, children: "✓ Compliance Reports (GDPR, CAN-SPAM)" }),
-                /* @__PURE__ */ jsx(Typography, { variant: "omega", textColor: "secondary700", style: { fontSize: "14px", display: "flex", alignItems: "center", gap: "8px" }, children: "✓ Custom Routing Rules Engine" }),
-                /* @__PURE__ */ jsx(Typography, { variant: "omega", textColor: "secondary700", style: { fontSize: "14px", display: "flex", alignItems: "center", gap: "8px" }, children: "✓ Advanced Rate Limiting" }),
-                /* @__PURE__ */ jsx(Typography, { variant: "omega", textColor: "secondary700", style: { fontSize: "14px", display: "flex", alignItems: "center", gap: "8px" }, children: "✓ Priority Support" })
+                /* @__PURE__ */ jsx(Typography, { variant: "omega", textColor: "secondary700", children: "[OK] Multi-tenant Management" }),
+                /* @__PURE__ */ jsx(Typography, { variant: "omega", textColor: "secondary700", children: "[OK] Compliance Reports" }),
+                /* @__PURE__ */ jsx(Typography, { variant: "omega", textColor: "secondary700", children: "[OK] Priority Support" })
               ] })
             ] })
           ] }) })
@@ -392,5 +348,5 @@ Generated:   ${(/* @__PURE__ */ new Date()).toLocaleString()}
   ] });
 };
 export {
-  LicensePage as default
+  LicenseDetailsPage as default
 };

package/dist/_chunks/StyledButtons-M7vUd2N4.js

@@ -0,0 +1,435 @@
+"use strict";
+const styled = require("styled-components");
+const designSystem = require("@strapi/design-system");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const styled__default = /* @__PURE__ */ _interopDefault(styled);
+const GradientButton = styled__default.default(designSystem.Button)`
+  && {
+    background: linear-gradient(135deg, #0EA5E9 0%, #A855F7 100%);
+    color: white;
+    font-weight: 600;
+    border: none;
+    padding: 10px 20px;
+    min-height: 40px;
+    transition: all 0.2s ease;
+    
+    &:hover:not(:disabled) {
+      background: linear-gradient(135deg, #0284C7 0%, #9333EA 100%);
+      transform: translateY(-1px);
+      box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
+    }
+    
+    &:active:not(:disabled) {
+      transform: translateY(0);
+    }
+    
+    &:disabled {
+      opacity: 0.6;
+      cursor: not-allowed;
+    }
+  }
+`;
+const SecondaryButton = styled__default.default(designSystem.Button)`
+  && {
+    background: white;
+    color: #7C3AED;
+    font-weight: 600;
+    border: 2px solid transparent;
+    background-image: linear-gradient(white, white), linear-gradient(135deg, #0EA5E9 0%, #A855F7 100%);
+    background-origin: border-box;
+    background-clip: padding-box, border-box;
+    padding: 10px 20px;
+    min-height: 40px;
+    transition: all 0.2s ease;
+    
+    &:hover:not(:disabled) {
+      background: linear-gradient(135deg, #0EA5E9 0%, #A855F7 100%);
+      background-clip: padding-box;
+      color: white;
+      transform: translateY(-1px);
+      box-shadow: 0 4px 12px rgba(168, 85, 247, 0.3);
+    }
+    
+    &:active:not(:disabled) {
+      transform: translateY(0);
+    }
+    
+    &:disabled {
+      opacity: 0.6;
+      cursor: not-allowed;
+    }
+  }
+`;
+const TertiaryButton = styled__default.default(designSystem.Button)`
+  && {
+    background: transparent;
+    color: ${(props) => props.theme.colors.neutral600};
+    font-weight: 500;
+    border: 1px solid ${(props) => props.theme.colors.neutral200};
+    padding: 10px 20px;
+    min-height: 40px;
+    transition: all 0.2s ease;
+    
+    &:hover:not(:disabled) {
+      background: ${(props) => props.theme.colors.neutral100};
+      border-color: ${(props) => props.theme.colors.neutral300};
+      color: ${(props) => props.theme.colors.neutral800};
+    }
+    
+    &:disabled {
+      opacity: 0.6;
+      cursor: not-allowed;
+    }
+  }
+`;
+const DangerButton = styled__default.default(designSystem.Button)`
+  && {
+    background: #FEE2E2;
+    color: #DC2626;
+    font-weight: 600;
+    border: 1px solid #FECACA;
+    padding: 10px 20px;
+    min-height: 40px;
+    transition: all 0.2s ease;
+    
+    &:hover:not(:disabled) {
+      background: #DC2626;
+      color: white;
+      border-color: #DC2626;
+    }
+    
+    &:disabled {
+      opacity: 0.6;
+      cursor: not-allowed;
+    }
+  }
+`;
+styled__default.default(designSystem.Button)`
+  && {
+    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
+    color: white;
+    font-weight: 600;
+    border: none;
+    padding: 10px 20px;
+    min-height: 40px;
+    transition: all 0.2s ease;
+    
+    &:hover:not(:disabled) {
+      background: linear-gradient(135deg, #059669 0%, #047857 100%);
+      transform: translateY(-1px);
+      box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
+    }
+    
+    &:disabled {
+      opacity: 0.6;
+      cursor: not-allowed;
+    }
+  }
+`;
+const IconButton = styled__default.default(designSystem.Button)`
+  && {
+    background: linear-gradient(135deg, #F8FAFC 0%, #F1F5F9 100%);
+    color: #64748B;
+    border: 1px solid #E2E8F0;
+    padding: 8px;
+    min-width: 38px;
+    min-height: 38px;
+    width: 38px;
+    height: 38px;
+    border-radius: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s ease;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
+    
+    svg {
+      width: 18px;
+      height: 18px;
+    }
+    
+    &:hover:not(:disabled) {
+      background: linear-gradient(135deg, #0EA5E9 0%, #0284C7 100%);
+      border-color: #0EA5E9;
+      color: white;
+      transform: translateY(-1px);
+      box-shadow: 0 4px 12px rgba(14, 165, 233, 0.25);
+    }
+    
+    &:disabled {
+      opacity: 0.6;
+      cursor: not-allowed;
+    }
+  }
+`;
+const IconButtonDanger = styled__default.default(designSystem.Button)`
+  && {
+    background: linear-gradient(135deg, #FEF2F2 0%, #FEE2E2 100%);
+    color: #EF4444;
+    border: 1px solid #FECACA;
+    padding: 8px;
+    min-width: 38px;
+    min-height: 38px;
+    width: 38px;
+    height: 38px;
+    border-radius: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s ease;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
+    
+    svg {
+      width: 18px;
+      height: 18px;
+    }
+    
+    &:hover:not(:disabled) {
+      background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
+      border-color: #EF4444;
+      color: white;
+      transform: translateY(-1px);
+      box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
+    }
+    
+    &:disabled {
+      opacity: 0.6;
+      cursor: not-allowed;
+    }
+  }
+`;
+const IconButtonPrimary = styled__default.default(designSystem.Button)`
+  && {
+    background: linear-gradient(135deg, #F0F9FF 0%, #E0F2FE 100%);
+    color: #0EA5E9;
+    border: 1px solid #BAE6FD;
+    padding: 8px;
+    min-width: 38px;
+    min-height: 38px;
+    width: 38px;
+    height: 38px;
+    border-radius: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s ease;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
+    
+    svg {
+      width: 18px;
+      height: 18px;
+    }
+    
+    &:hover:not(:disabled) {
+      background: linear-gradient(135deg, #0EA5E9 0%, #0284C7 100%);
+      border-color: #0EA5E9;
+      color: white;
+      transform: translateY(-1px);
+      box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
+    }
+    
+    &:disabled {
+      opacity: 0.6;
+      cursor: not-allowed;
+    }
+  }
+`;
+const IconButtonSuccess = styled__default.default(designSystem.Button)`
+  && {
+    background: linear-gradient(135deg, #F0FDF4 0%, #DCFCE7 100%);
+    color: #22C55E;
+    border: 1px solid #BBF7D0;
+    padding: 8px;
+    min-width: 38px;
+    min-height: 38px;
+    width: 38px;
+    height: 38px;
+    border-radius: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s ease;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
+    
+    svg {
+      width: 18px;
+      height: 18px;
+    }
+    
+    &:hover:not(:disabled) {
+      background: linear-gradient(135deg, #22C55E 0%, #16A34A 100%);
+      border-color: #22C55E;
+      color: white;
+      transform: translateY(-1px);
+      box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
+    }
+    
+    &:disabled {
+      opacity: 0.6;
+      cursor: not-allowed;
+    }
+  }
+`;
+styled__default.default(designSystem.Button)`
+  && {
+    background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);
+    color: #F59E0B;
+    border: 1px solid #FDE68A;
+    padding: 8px;
+    min-width: 38px;
+    min-height: 38px;
+    width: 38px;
+    height: 38px;
+    border-radius: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s ease;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
+    
+    svg {
+      width: 18px;
+      height: 18px;
+    }
+    
+    &:hover:not(:disabled) {
+      background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
+      border-color: #F59E0B;
+      color: white;
+      transform: translateY(-1px);
+      box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
+    }
+    
+    &:disabled {
+      opacity: 0.6;
+      cursor: not-allowed;
+    }
+  }
+`;
+const IconButtonPurple = styled__default.default(designSystem.Button)`
+  && {
+    background: linear-gradient(135deg, #FAF5FF 0%, #F3E8FF 100%);
+    color: #A855F7;
+    border: 1px solid #E9D5FF;
+    padding: 8px;
+    min-width: 38px;
+    min-height: 38px;
+    width: 38px;
+    height: 38px;
+    border-radius: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s ease;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
+    
+    svg {
+      width: 18px;
+      height: 18px;
+    }
+    
+    &:hover:not(:disabled) {
+      background: linear-gradient(135deg, #A855F7 0%, #9333EA 100%);
+      border-color: #A855F7;
+      color: white;
+      transform: translateY(-1px);
+      box-shadow: 0 4px 12px rgba(168, 85, 247, 0.3);
+    }
+    
+    &:disabled {
+      opacity: 0.6;
+      cursor: not-allowed;
+    }
+  }
+`;
+const CTAButton = styled__default.default(designSystem.Button)`
+  && {
+    background: linear-gradient(135deg, #0EA5E9 0%, #A855F7 100%);
+    color: white;
+    font-weight: 700;
+    font-size: 1rem;
+    border: none;
+    padding: 14px 28px;
+    min-height: 52px;
+    border-radius: 12px;
+    transition: all 0.2s ease;
+    box-shadow: 0 4px 14px rgba(14, 165, 233, 0.25);
+    
+    &:hover:not(:disabled) {
+      background: linear-gradient(135deg, #0284C7 0%, #9333EA 100%);
+      transform: translateY(-2px);
+      box-shadow: 0 6px 20px rgba(14, 165, 233, 0.35);
+    }
+    
+    &:active:not(:disabled) {
+      transform: translateY(0);
+    }
+    
+    &:disabled {
+      opacity: 0.6;
+      cursor: not-allowed;
+    }
+  }
+`;
+styled__default.default(designSystem.Button)`
+  && {
+    background: transparent;
+    color: #0EA5E9;
+    font-weight: 500;
+    border: none;
+    padding: 4px 8px;
+    min-height: auto;
+    text-decoration: underline;
+    transition: all 0.2s ease;
+    
+    &:hover:not(:disabled) {
+      color: #0284C7;
+      text-decoration: none;
+    }
+    
+    &:disabled {
+      opacity: 0.6;
+      cursor: not-allowed;
+    }
+  }
+`;
+const WhiteOutlineButton = styled__default.default(designSystem.Button)`
+  && {
+    background: rgba(255, 255, 255, 0.15);
+    color: white;
+    font-weight: 600;
+    border: 2px solid rgba(255, 255, 255, 0.4);
+    padding: 8px 16px;
+    min-height: 38px;
+    border-radius: 8px;
+    backdrop-filter: blur(4px);
+    transition: all 0.2s ease;
+    
+    &:hover:not(:disabled) {
+      background: rgba(255, 255, 255, 0.25);
+      border-color: rgba(255, 255, 255, 0.6);
+      transform: translateY(-1px);
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    }
+    
+    &:active:not(:disabled) {
+      transform: translateY(0);
+    }
+    
+    &:disabled {
+      opacity: 0.6;
+      cursor: not-allowed;
+    }
+  }
+`;
+exports.CTAButton = CTAButton;
+exports.DangerButton = DangerButton;
+exports.GradientButton = GradientButton;
+exports.IconButton = IconButton;
+exports.IconButtonDanger = IconButtonDanger;
+exports.IconButtonPrimary = IconButtonPrimary;
+exports.IconButtonPurple = IconButtonPurple;
+exports.IconButtonSuccess = IconButtonSuccess;
+exports.SecondaryButton = SecondaryButton;
+exports.TertiaryButton = TertiaryButton;
+exports.WhiteOutlineButton = WhiteOutlineButton;